:root {
  --paper:#faf6ed;
  --cream:#f2e9d8;
  --ink:#30291f;
  --brown:#754624;
  --olive:#4d6035;
  --olive-dark:#354426;
  --muted:#655f54;
  --line:#ddd4c3;
  --serif:'Fraunces',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased
}
::selection {
  background:#dce1c7;
  color:var(--ink)
}
button, input, select {
  font:inherit
}
button, a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
button:disabled {
  cursor:default;
  opacity:.5
}
img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  outline:1px solid rgb(0 0 0 / 6%);
  outline-offset:-1px
}
h1, h2, h3, p {
  margin:0
}
h1, h2, h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.035em;
  text-wrap:balance
}
h1 {
  font-size:clamp(48px,4.8vw,70px)
}
h2 {
  font-size:clamp(32px,3.2vw,44px)
}
h3 {
  font-size: 24px
}
em {
  font-weight:400;
  color:var(--brown)
}
p {
  text-wrap:pretty
}
button {
  border:0
}
.wrap {
  width:min(1320px,calc(100% - 96px));
  margin-inline:auto
}
[hidden] {
  display:none!important
}
.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.icon {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
:focus-visible {
  outline:3px solid #98713f;
  outline-offset:5px
}
.skip-link {
  position:fixed;
  z-index:99;
  top:8px;
  left:8px;
  background:var(--olive);
  color:white;
  padding:12px 20px;
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:none
}
.announcement {
  padding:9px max(48px,calc((100vw - 1320px)/2));
  display:flex;
  justify-content:space-between;
  gap:20px;
  background:var(--olive);
  color:#fffaf0;
  font-size: 12px;
  letter-spacing:.02em
}
.announcement a {
  display:flex;
  gap:9px;
  align-items:center
}
.announcement .icon {
  width:15px;
  height:15px
}
.header-inner {
  min-height:116px;
  display:flex;
  gap:30px;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line)
}
.brand {
  position:relative;
  display:block;
  flex-shrink:0;
  font-family:var(--serif);
  font-size: 33px;
  font-style:italic;
  line-height:1;
  letter-spacing:-.06em;
  color:var(--brown)
}
.brand span {
  color:var(--ink)
}
.brand small {
  display:block;
  margin-top:10px;
  font:11px/1.4 var(--sans);
  letter-spacing:.18em;
  text-align:center;
  color:var(--muted)
}
#navigation {
  order:2;
  display:flex;
  gap:27px;
  align-items:center;
  font-size: 12px;
  font-weight:500
}
#navigation a {
  padding:15px 0;
  transition:color .15s
}
#navigation a:hover {
  color:var(--brown)
}
.header-actions {
  order:3;
  display:flex;
  align-items:center;
  gap:12px
}
.icon-button {
  min-width:40px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:none
}
.menu-toggle {
  display:none
}
.button {
  min-height:49px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:12px 23px;
  font-size: 12px;
  font-weight:600;
  transition:background .18s,color .18s,transform .12s
}
.button:active {
  transform:scale(.96)
}
.button-green {
  background:var(--olive);
  color:#fffaf0
}
.button-green:hover {
  background:var(--olive-dark)
}
.button-outline {
  border:1px solid var(--olive);
  color:var(--olive);
  background:none
}
.button-outline:hover {
  background:#e8ebdd
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:none;
  border-bottom:1px solid currentColor;
  padding:0 0 5px;
  font-size: 12px;
  line-height:1.5
}
.text-link:hover {
  color:var(--brown)
}
.text-link .icon {
  width:18px;
  height:18px
}
.simple-link {
  display:flex;
  align-items:center;
  gap:12px;
  font:11px var(--sans)
}
.simple-link .icon {
  width:17px
}
.center {
  text-align:center;
  margin-top:36px
}
.hero {
  display:grid;
  grid-template-columns:.88fr 1.17fr .72fr;
  gap:23px;
  padding-top:36px;
  padding-bottom:49px
}
.hero-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:10px 20px 10px 0
}
.hero-copy h1 {
  line-height:1.02;
  margin-bottom:24px
}
.hero-copy p {
  max-width:34ch;
  font-size: 13px;
  color:var(--muted);
  margin-bottom:26px
}
.hero-signature {
  margin-top:24px;
  font:italic 23px var(--serif);
  color:var(--brown);
  transform:rotate(-4deg)
}
.hero-feature {
  position:relative;
  display:block;
  min-height:516px;
  overflow:hidden;
  border-radius:4px
}
.hero-feature>img {
  position:absolute;
  inset:0;
  object-position:55% center;
  transition:transform .6s
}
.hero-feature:hover>img {
  transform:scale(1.03)
}
.hero-feature:after {
  content:'';
  position:absolute;
  inset:25% 0 0;
  background:linear-gradient(transparent,rgba(29,37,22,.55) 45%,rgba(29,37,22,.94))
}
.recipe-flag {
  position:absolute;
  z-index:1;
  top:18px;
  left:18px;
  padding:6px 12px;
  background:var(--paper);
  color:var(--olive-dark);
  font-size: 12px
}
.hero-feature-caption {
  position:absolute;
  z-index:1;
  bottom:28px;
  left:27px;
  right:25px;
  color:white
}
.hero-feature-caption>span:first-child {
  font-size: 12px;
  letter-spacing:.05em;
  color:#ede9da
}
.hero-feature-caption h2 {
  font-size: 35px;
  margin-top:8px;
  margin-right:32px;
  letter-spacing:-.03em
}
.round-arrow {
  position:absolute;
  right:0;
  bottom:0;
  width:37px;
  height:37px;
  border:1px solid #eee5d3;
  border-radius:50%;
  display:grid;
  place-items:center
}
.hero-aside {
  display:grid;
  grid-template-rows:1.13fr 1fr;
  gap:20px
}
.small-feature {
  display:flex;
  flex-direction:column;
  background:#eee8d9;
  overflow:hidden
}
.small-feature>img {
  height:149px;
  object-position:center 58%
}
.small-feature>div {
  padding:17px 20px
}
.small-feature>div>span:first-child {
  font-size: 12px;
  color:var(--brown)
}
.small-feature h3 {
  font-size: 25px;
  margin:6px 0 12px
}
.hero-journal {
  padding:23px 22px;
  background:#e6e8d5;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.journal-label {
  font-size: 12px;
  color:var(--olive-dark);
  margin-bottom:12px
}
.hero-journal h3 {
  font-size: 29px;
  color:var(--olive-dark);
  margin-bottom:12px
}
.hero-journal p {
  font-size: 12px;
  color:#5c634b;
  margin-bottom:15px
}
.hero-journal .simple-link {
  color:var(--olive-dark)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  margin-bottom:29px
}
.section-heading p {
  font-size: 13px;
  color:var(--muted);
  margin-top:11px
}
.compact h2 {
  font-size: 31px
}
.compact {
  align-items:center
}
.collection-note {
  font-size: 12px;
  color:var(--muted);
  white-space:nowrap
}
.category-section {
  padding:30px 0 52px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.category-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px
}
.category-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  background:none;
  padding:0;
  color:var(--ink);
  font-size: 12px;
  font-weight:500;
  text-align:center
}
.category-item img {
  width:82px;
  height:82px;
  max-width:100%;
  border-radius:50%;
  transition:transform .25s;
  outline-offset:3px;
  outline-color:transparent
}
.category-item:hover img, .category-item.is-active img {
  outline:1px solid var(--olive);
  transform:translateY(-3px)
}
.category-item.is-active {
  color:var(--olive);
  font-weight:700
}
.recipe-section {
  padding-top:68px;
  padding-bottom:67px
}
.recipe-toolbar {
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:center;
  border-block:1px solid var(--line);
  padding:15px 0
}
.filter-list {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.filter-chip {
  min-height:39px;
  padding:0 15px;
  background:none;
  font-size: 12px;
  color:var(--muted);
  transition:background .15s,color .15s
}
.filter-chip:hover {
  background:var(--cream);
  color:var(--ink)
}
.filter-chip.is-active {
  background:var(--olive);
  color:white
}
.search-box {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  flex:0 1 280px;
  border-bottom:1px solid #b7ad9b
}
.search-box .icon {
  width:17px;
  color:var(--muted)
}
.search-box input {
  width:100%;
  min-width:0;
  background:none;
  border:0;
  outline:0;
  font-size: 12px;
  color:var(--ink)
}
input::placeholder {
  color:#665e50
}
.search-box:focus-within {
  border-color:var(--brown)
}
.recipe-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:33px 25px
}
.recipe-card {
  min-width:0
}
.recipe-image {
  position:relative;
  display:block;
  aspect-ratio:1.15;
  overflow:hidden;
  border-radius:3px;
  background:var(--cream)
}
.recipe-image img {
  transition:transform .4s
}
.recipe-image:hover img {
  transform:scale(1.04)
}
.card-image-wrap {
  position:relative
}
.card-meta {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--brown);
  font-size: 12px;
  margin:12px 0 8px
}
.card-meta .icon {
  width:13px;
  height:13px
}
.card-meta span:last-child {
  margin-left:auto;
  color:var(--muted)
}
.recipe-card h3 {
  font-size: 22px;
  line-height:1.18;
  letter-spacing:-.02em
}
.recipe-card h3 a:hover {
  color:var(--brown)
}
.recipe-card>p {
  font-size: 12px;
  color:var(--muted);
  margin-top:9px;
  line-height:1.65
}