/* ============================================================
   SAVORIENT — Design tokens
   Color: cream #F7F3EC / ink #2E2A24 / terracotta #B8593A
          olive #7C8354 / line #E3DCCB / card #FFFDF9
   Type: "Fraunces" (display, editorial warmth) + "Work Sans" (body/UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --cream:#F7F3EC;
  --card:#FFFDF9;
  --ink:#2E2A24;
  --ink-soft:#5C5548;
  --terracotta:#B8593A;
  --olive:#7C8354;
  --line:#E3DCCB;
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(46,42,36,.05) 1px, transparent 0) 0 0/22px 22px,
    var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  line-height:1.15;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em; max-width:64ch;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  padding:18px 0;
  position:sticky; top:0; z-index:50;
  background:rgba(247,243,236,.88);
  backdrop-filter:blur(8px);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.nav-group{display:flex; align-items:center; gap:30px;}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); transition:opacity .15s ease;}
.logo:hover{opacity:.75;}
.logo svg{width:22px; height:22px; flex-shrink:0; color:var(--terracotta);}
.logo-word{font-family:'Fraunces', serif; font-size:21px; letter-spacing:-0.01em;}
nav.primary-nav{display:flex; gap:30px; font-size:14.5px;}
nav.primary-nav a{
  position:relative; text-decoration:none; color:var(--ink-soft); padding-bottom:4px;
}
nav.primary-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--terracotta);
  transition:right .2s ease;
}
nav.primary-nav a:hover::after, nav.primary-nav a.active::after{right:0;}
nav.primary-nav a:hover, nav.primary-nav a.active{color:var(--ink);}

/* ---------- Header extras: search + more menu ---------- */
.nav-extra{display:flex; align-items:center; gap:6px;}
.nav-icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid transparent; background:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.nav-icon-btn:hover{background:#EFE6D3; color:var(--ink);}
.nav-icon-btn svg{width:18px; height:18px;}

.nav-search{position:relative;}
.nav-search-box{
  position:absolute; top:calc(100% + 8px); right:0; width:280px;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 16px 32px -14px rgba(46,42,36,.3); padding:10px;
  display:none; z-index:60;
}
.nav-search-box.active{display:block;}
.nav-search-box input{
  width:100%; border:none; border-bottom:1.5px solid var(--line); background:none;
  font-family:'Work Sans'; font-size:14.5px; color:var(--ink); padding:6px 4px; outline:none;
}
.nav-search-box input:focus{border-color:var(--terracotta);}
.header-search-suggestions{max-height:240px; overflow-y:auto;}
.header-search-suggestions .sugg-item{padding:9px 6px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--line);}
.header-search-suggestions .sugg-item:last-child{border-bottom:none;}
.header-search-suggestions .sugg-item:hover, .header-search-suggestions .sugg-item.active{color:var(--terracotta); background:#F1E9D9;}
.header-search-suggestions .sugg-item mark{background:none; color:var(--terracotta); font-weight:600;}
.header-search-suggestions .sugg-empty{padding:9px 6px; font-size:13px; color:var(--ink-soft); font-style:italic;}

.nav-more{position:relative;}
.nav-more-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:190px;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 16px 32px -14px rgba(46,42,36,.3); padding:6px;
  display:none; flex-direction:column; z-index:60;
}
.nav-more-menu.active{display:flex;}
.nav-more-menu a{
  padding:9px 12px; font-size:14px; color:var(--ink); text-decoration:none; border-radius:5px;
}
.nav-more-menu a:hover{background:#F1E9D9; color:var(--terracotta);}

.nav-favorites{position:relative;}
.nav-favorites-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:240px; max-width:300px;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 16px 32px -14px rgba(46,42,36,.3); padding:6px;
  display:none; flex-direction:column; z-index:60;
}
.nav-favorites-menu.active{display:flex;}
.nav-favorites-menu a{
  padding:9px 12px; font-size:14px; color:var(--ink); text-decoration:none; border-radius:5px;
}
.nav-favorites-menu a:hover{background:#F1E9D9; color:var(--terracotta);}
.nav-favorites-empty{padding:10px 12px; font-size:13px; color:var(--ink-soft); font-style:italic; line-height:1.5;}

/* Page links live in the primary nav on desktop; on phones they move into
   the hamburger menu so the header stays a single row. */
.nav-menu-only{display:none;}
.nav-menu-divider{display:none;}
@media (max-width:700px){
  .site-header .wrap{flex-wrap:nowrap; gap:12px;}
  nav.primary-nav{display:none;}
  .nav-menu-only{display:block;}
  .nav-menu-divider{display:block; height:1px; background:var(--line); margin:6px 8px;}
  .nav-more-menu{min-width:210px;}
  /* Anchored to the header instead of the icon, or a 280px box hanging off the
     leftmost icon runs past the screen edge. */
  .nav-search{position:static;}
  .nav-search-box{left:16px; right:16px; width:auto;}
  /* Comfortable finger targets */
  .nav-icon-btn{width:42px; height:42px;}
  .nav-more-menu a, .nav-favorites-menu a{padding:12px;}
}

/* ---------- Hero ---------- */
.hero-bg-wrap{background:linear-gradient(160deg, #F6DEC2 0%, #F8EFDF 45%, #E7E6CC 100%);}
.hero{padding:72px 0 64px; border-bottom:1px solid var(--line); overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; position:relative;}
.hero-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--olive);
  border:1px solid var(--olive); border-radius:20px; padding:5px 12px 5px 10px; margin-bottom:20px;
}
.hero-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--terracotta);}
.hero h1{font-size:clamp(38px,5.2vw,58px); max-width:11ch;}
.hero p.lede{font-size:18px; color:var(--ink-soft); max-width:38ch;}
.search-bar{
  display:flex; gap:8px; margin-top:26px; max-width:420px;
  border-bottom:2px solid var(--ink);
  padding-bottom:10px;
  transition:border-color .15s ease;
}
.search-bar:focus-within{border-color:var(--terracotta);}
.search-bar input{
  flex:1; border:none; background:none; font-family:'Work Sans'; font-size:16px; color:var(--ink); outline:none;
}
.search-bar button{
  border:none; background:none; font-family:'Work Sans'; font-size:15px; color:var(--terracotta); cursor:pointer; font-weight:500;
}
.search-wrap{position:relative; max-width:420px;}
.search-suggestions{
  position:absolute; top:100%; left:0; right:0; margin-top:2px;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 16px 32px -14px rgba(46,42,36,.3); z-index:20;
  max-height:240px; overflow-y:auto; display:none;
}
.search-suggestions.active{display:block;}
.search-suggestions .sugg-item{
  padding:10px 16px; font-size:14.5px; cursor:pointer; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.search-suggestions .sugg-item:last-child{border-bottom:none;}
.search-suggestions .sugg-item:hover, .search-suggestions .sugg-item.active{
  background:#F1E9D9; color:var(--terracotta);
}
.search-suggestions .sugg-item mark{background:none; color:var(--terracotta); font-weight:600;}
.search-suggestions .sugg-empty{padding:12px 16px; font-size:13.5px; color:var(--ink-soft); font-style:italic;}

.hero-stats{display:flex; gap:28px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line);}
.hero-stats div{font-size:13px; color:var(--ink-soft);}
.hero-stats strong{display:block; font-family:'Fraunces'; font-size:24px; color:var(--ink); font-weight:500;}

/* ---------- Hero carousel (Swiper) ----------
   Full-bleed photo carousel: no floating cards, the dish name/description
   sit directly on the photo over a dark scrim, with a slow Ken-Burns zoom
   on the active slide and a filling progress bar instead of dots. */
.hero-carousel{
  width:100%; aspect-ratio:4/3; border-radius:6px; overflow:hidden; position:relative;
  box-shadow:0 24px 48px -18px rgba(46,42,36,.28);
}
.slide-photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.02);
  transition:transform 7s linear;
}
.swiper-slide-active .slide-photo{transform:scale(1.13);}

.slide-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,17,13,.82) 0%, rgba(20,17,13,.32) 42%, rgba(20,17,13,0) 62%);
}

.slide-content{
  position:absolute; left:0; right:0; bottom:0; padding:28px 28px 26px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
}
.slide-tag{
  display:inline-block; font-size:11.5px; letter-spacing:.02em; color:#F3D9C8;
  border:1px solid rgba(243,217,200,.5); border-radius:20px; padding:3px 11px; margin-bottom:10px;
}
.slide-title{
  font-family:'Fraunces', serif; font-weight:500; font-size:clamp(22px,3vw,28px);
  color:#FBF7F0; margin:0 0 6px; max-width:16ch; line-height:1.1;
}
.slide-desc{color:#E7DDCE; font-size:14px; margin:0; max-width:32ch;}

.slide-index{
  font-family:'Fraunces', serif; color:#FBF7F0; font-size:14px; text-align:right;
  white-space:nowrap; padding-bottom:2px; flex-shrink:0;
}
.slide-index .current{font-size:20px; font-weight:500;}
.slide-index .divider{color:rgba(251,247,240,.5); margin:0 2px;}
.slide-index .total{color:rgba(251,247,240,.65);}

.hero-carousel .swiper-button-next,
.hero-carousel .swiper-button-prev{
  width:40px; height:40px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  border-radius:50%; color:#FBF7F0; transition:background .2s ease;
}
.hero-carousel .swiper-button-next:hover,
.hero-carousel .swiper-button-prev:hover{background:rgba(255,255,255,.28);}
.hero-carousel .swiper-button-next:after,
.hero-carousel .swiper-button-prev:after{font-size:13px; font-weight:700;}

/* Progress-bar pagination instead of dots */
.progress-track{
  position:absolute; top:0; left:0; right:0; display:flex; gap:6px; padding:16px 18px 0; z-index:5;
}
.progress-bar{
  flex:1; height:3px; background:rgba(255,255,255,.28); border-radius:2px; overflow:hidden; position:relative;
}
.progress-bar .fill{
  position:absolute; left:0; top:0; bottom:0; width:0%; background:#FBF7F0; border-radius:2px;
}
.progress-bar.done .fill{width:100%; transition:none;}
.progress-bar.active .fill{width:100%; transition:width 7s linear;}

@media (max-width:900px){.hero-carousel{aspect-ratio:16/11;}}
/* Phones: swipe replaces the arrows (they collided with the slide title),
   a taller frame suits the narrow screen, and the text scales down. */
@media (max-width:700px){
  .hero-carousel{aspect-ratio:4/3;}
  .hero-carousel .swiper-button-next,
  .hero-carousel .swiper-button-prev{display:none;}
  .slide-content{padding:20px 18px 18px; gap:10px;}
  .slide-title{font-size:20px; max-width:14ch;}
  .slide-desc{font-size:13px;}
  .slide-index .current{font-size:17px;}
  .progress-track{padding:12px 14px 0; gap:4px;}
}

/* ---------- Sections ---------- */
section.block{padding:60px 0; border-bottom:1px solid var(--line);}
section.block:nth-of-type(even){background:#F1E9D9;}
.block-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; gap:16px; flex-wrap:wrap;}
.block-head h2{font-size:30px; position:relative; padding-left:18px;}
.block-head h2::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:3px; background:var(--terracotta); border-radius:2px;
}
.block-head a.see-all{
  font-size:13.5px; color:var(--ink); text-decoration:none; white-space:nowrap;
  border:1px solid var(--ink); border-radius:20px; padding:6px 14px;
  transition:background .15s ease, color .15s ease;
}
.block-head a.see-all:hover{background:var(--ink); color:var(--cream);}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}

/* Pre-hide recipe cards until the GSAP scroll-reveal takes over (card-reveal.js).
   A <head> guard adds .cards-prereveal and removes it after 2s, so cards still
   appear if GSAP is blocked, slow, or the user prefers reduced motion. */
html.cards-prereveal .card{opacity:0;}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr);} .hero .wrap{grid-template-columns:1fr;}}
@media (max-width:560px){.grid, .grid.cols-3{grid-template-columns:1fr;}}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column;
  box-shadow:0 2px 6px -2px rgba(46,42,36,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 32px -16px rgba(46,42,36,.28);
  border-color:#D8C9A8;
}
.card .thumb{aspect-ratio:5/4; background:linear-gradient(135deg,#EFE6D3,#D9C9AB); position:relative; overflow:hidden;}
/* Larger card photos, home page only (index.html) -- see .thumb-lg usage there. */
.card .thumb.thumb-lg{aspect-ratio:1/1;}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:0; transition:transform .5s ease, filter .5s ease;}
.card:hover .thumb img{transform:scale(1.08); filter:brightness(1.03);}
.card .thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(46,42,36,.14), transparent 45%);}
.card .thumb .ph-label{position:absolute; bottom:8px; left:8px; font-size:10.5px; color:#7A6F58; background:rgba(255,253,249,.85); padding:2px 6px; border-radius:3px; z-index:1;}
.card .body{padding:18px 18px 20px;}
.card h3{font-size:17.5px; margin-bottom:6px; transition:color .15s ease;}
.card:hover h3{color:var(--terracotta);}
.card .meta{font-size:13px; color:var(--ink-soft);}
.tag-pill{display:inline-block; font-size:12px; color:var(--olive); background:rgba(124,131,84,.1); border:1px solid rgba(124,131,84,.35); border-radius:20px; padding:3px 12px; margin-bottom:8px; font-weight:500;}

/* World section variant with flag/region label */
.card .region{font-size:12.5px; color:var(--terracotta); font-weight:500; margin-bottom:4px;}

/* "What are you craving today?" -- full-bleed photo band, solid charcoal tiles that turn yellow on hover */
.craving-band{
  background-image:url('images/hero-flame-skillet.jpg');
  background-size:cover; background-position:center 40%; background-attachment:fixed;
  padding:96px 0; border-bottom:1px solid var(--line);
}
.craving-band .block-head h2{color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.6);}
.craving-lede{margin:0 0 24px; color:#F1E9D9; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.5);}

.craving-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
/* Three across down to tablet width; phones stack them. */
@media (max-width:700px){.craving-grid{grid-template-columns:1fr;}}

.craving-tile{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  min-height:180px; padding:32px 20px; border-radius:8px;
  /* Opaque on purpose: the old 88% black let the flame photo bleed through
     and read as smoke inside the tiles. --ink is the charcoal the footer and
     cookie banner already use. */
  background:var(--ink); border:1px solid rgba(255,255,255,.12);
  text-decoration:none; cursor:pointer;
  transition:background-color .25s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.craving-tile:hover{
  background-color:#F3B92A; border-color:#F3B92A;
  transform:translateY(-5px); box-shadow:0 18px 32px -16px rgba(0,0,0,.5);
}
.craving-tile-name{
  font-family:'Fraunces'; font-size:27px; font-weight:500; color:var(--cream);
  transition:color .25s ease;
}
.craving-tile:hover .craving-tile-name{color:var(--ink);}
.craving-tile-soon{cursor:default;}
.craving-tile-badge{
  font-size:12px; color:rgba(255,255,255,.65); letter-spacing:.01em;
  transition:color .25s ease;
}

/* Editorial teaser (What Food Means) */
.teaser{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center;}
.teaser .thumb{aspect-ratio:5/4; border-radius:3px; background:linear-gradient(135deg,#E7DEC9,#C9B892); overflow:hidden;}
.teaser .thumb img{width:100%; height:100%; object-fit:cover; display:block; border-radius:0 !important;}
@media (max-width:900px){.teaser{grid-template-columns:1fr;}}

/* ---------- Recipe page ---------- */
/* Keeps .wrap's own 24px side padding -- without it the photo and the stats
   run edge to edge on phones. */
.recipe-head{padding:44px 24px 8px;}
.recipe-head .tag-pill{margin-bottom:14px;}
.recipe-head h1{font-size:clamp(30px,4.5vw,44px); max-width:20ch;}
.recipe-photo{aspect-ratio:16/9; border-radius:6px; background:linear-gradient(135deg,#EFE6D3,#D9C9AB); margin:24px 0; position:relative; overflow:hidden; box-shadow:0 20px 40px -18px rgba(46,42,36,.3);}
.recipe-photo .ph-label{position:absolute; bottom:12px; left:12px; font-size:12px; color:#7A6F58; background:rgba(255,253,249,.9); padding:3px 8px; border-radius:3px;}
.recipe-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.recipe-photo:hover img{transform:scale(1.045);}
.favorite-btn{
  position:absolute; top:12px; right:12px; z-index:5;
  width:40px; height:40px; border-radius:50%; border:none;
  background:rgba(255,253,249,.9); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(46,42,36,.4);
  transition:background .15s ease, transform .15s ease;
}
.favorite-btn:hover{transform:scale(1.07); background:var(--card);}
.favorite-btn svg{width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:2; transition:fill .15s ease, stroke .15s ease;}
.favorite-btn:hover svg{stroke:var(--terracotta);}
.favorite-btn.active svg{fill:var(--terracotta); stroke:var(--terracotta);}
.recipe-stats{display:flex; gap:0; flex-wrap:wrap; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:8px;}
.recipe-stats div{font-size:13px; color:var(--ink-soft); padding:0 28px; border-left:1px solid var(--line);}
.recipe-stats div:first-child{padding-left:0; border-left:none;}
.recipe-stats strong{display:block; font-family:'Fraunces'; font-size:21px; font-weight:500; color:var(--ink); margin-bottom:2px;}
.print-btn{border:1px solid var(--ink); background:none; padding:10px 18px; font-family:'Work Sans'; font-size:14px; border-radius:20px; cursor:pointer; margin-top:18px; transition:background .15s ease, color .15s ease;}
.print-btn:hover{background:var(--ink); color:var(--cream);}

.recipe-body{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; padding:36px 0;}
@media (max-width:800px){.recipe-body{grid-template-columns:1fr;}}
.ingredients h2, .steps h2{font-size:20px; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:16px;}
.ingredients ul{list-style:none; margin:0; padding:0;}
.ingredients li{padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; display:flex; align-items:center; gap:10px;}
.ingredients li::before{content:"–"; color:var(--terracotta);}
.ingredients.has-icons li::before{content:none;}
.ing-icon{width:42px; height:42px; flex-shrink:0; border-radius:50%; object-fit:cover; background:var(--card); box-shadow:0 0 0 1px var(--line);}
.steps ol{padding-left:22px; margin:0;}
.steps li{margin-bottom:18px; font-size:15.5px;}
.culture-note{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--olive); padding:16px 18px; margin:20px 0; font-size:14.5px; color:var(--ink-soft);}

/* ---------- Article (What Food Means) ---------- */
/* Editorial photo background: the photo is meant to be seen, in warm tones.
   Three layers, top to bottom:
   1. A --cream veil (247,243,236): .5 behind the text column, only .2 at the
      edges, where the photo shows almost untouched.
   2. A warm tone in "screen" mode that lifts the night scene's shadows to a
      soft brown, so a thin veil still reads light instead of dark.
   3. The photo in "luminosity" mode: it keeps its light and shade but takes its
      colour from the warm sand underneath, so no greens or blue-greys.
   Checked against every pixel of the photo (the fixed background slides under
   the text as you scroll, so any pixel can end up behind a letter): body text
   stays >= 7.5:1 behind the column and >= 5.2:1 even at the .2 edges -- WCAG AA
   (4.5:1) with room to spare. */
.article-wrap{
  background-color:#E6D5B8;
  background-image:
    linear-gradient(90deg, rgba(247,243,236,.2) 0%, rgba(247,243,236,.5) 24%, rgba(247,243,236,.5) 76%, rgba(247,243,236,.2) 100%),
    linear-gradient(rgb(140,116,84), rgb(140,116,84)),
    url('images/family-sharing-meal.jpg');
  background-blend-mode:normal, screen, luminosity;
  background-size:cover; background-position:center 30%; background-attachment:fixed;
}
/* Phones and touch tablets ignore fixed backgrounds and would stretch the photo
   over the whole (very tall) article -- on a phone that is 6x zoom and only a
   sixth of the picture. Show the whole photo at its own proportions (66.5% of
   the width tall) behind the opening lines, easing into cream below it. */
@media (max-width:700px), (hover:none){
  .article-wrap{
    background-image:
      linear-gradient(rgba(247,243,236,.45) 0, rgba(247,243,236,.55) 40vw, rgb(247,243,236) 66.5vw),
      linear-gradient(rgb(140,116,84), rgb(140,116,84)),
      url('images/family-sharing-meal.jpg');
    background-size:100% 100%, 100% 100%, 100% auto;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:scroll;
  }
}
.article{padding:56px 24px; max-width:70ch; margin:0 auto;}
.article h1{font-size:clamp(32px,5vw,46px); margin-bottom:.5em;}
.article p{font-size:17px; max-width:none;}

/* ---------- Simple pages (About/Contact/Legal) ---------- */
.simple-page{padding:56px 24px; max-width:72ch; margin:0 auto;}
.simple-page h1{margin-bottom:.6em;}
.simple-page h2{font-size:20px; margin-top:1.6em;}

/* ---------- Error pages (404 / 500) ---------- */
.notfound{text-align:center;}
.notfound-code{
  font-family:'Fraunces', serif; font-size:clamp(64px,12vw,108px); font-weight:500;
  line-height:1; color:var(--terracotta); margin:0 0 .12em;
}
.notfound h1{font-size:clamp(28px,4.4vw,40px); margin-bottom:.4em;}
.notfound-lede{font-size:17px; color:var(--ink-soft); max-width:46ch; margin:0 auto 26px;}
.notfound-lede a{color:var(--terracotta);}
.notfound-search{max-width:520px; margin:0 auto; text-align:left;}
.notfound-links{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:28px 0 24px;}
.notfound-links a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 17px;
  border:1px solid var(--line); border-radius:999px; background:var(--card);
  color:var(--ink-soft); font-size:14px; font-weight:500; text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
}
.notfound-links a:hover{color:var(--terracotta); border-color:var(--terracotta);}
.notfound-home{
  display:inline-flex; align-items:center; min-height:46px; padding:0 24px;
  border-radius:999px; background:var(--terracotta); color:#FFF8F0;
  font-weight:500; text-decoration:none; transition:background .15s ease;
}
.notfound-home:hover{background:#A34C30;}
form.contact-form{display:flex; flex-direction:column; gap:14px; max-width:480px; margin-top:20px;}
/* Label above its field at every width (it used to sit beside the field on
   desktop, with "Message" dropping to the bottom edge of the text box). */
form.contact-form label{display:block; margin-bottom:6px; font-size:14px; color:var(--ink-soft);}
form.contact-form input:not([type=hidden]), form.contact-form textarea{display:block; width:100%; box-sizing:border-box;}
form.contact-form input, form.contact-form textarea{
  font-family:'Work Sans'; font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius:3px; background:var(--card); color:var(--ink);
}
form.contact-form button{
  align-self:flex-start; background:var(--terracotta); color:#fff; border:none; padding:11px 22px; border-radius:3px; font-size:15px; cursor:pointer;
}

/* Contact form feedback. Error red #A23B22 is 5.9:1 on cream; the success
   green is darker than --olive, which only reaches 3.6:1 as small text. */
.field-error{display:block; margin-top:5px; font-size:13px; color:#A23B22;}
.field-error:empty{display:none;}
form.contact-form [aria-invalid="true"]{border-color:#A23B22;}
.form-note{margin:0; font-size:13.5px; color:var(--ink-soft);}
.form-note a{color:var(--terracotta);}
.form-status{margin:2px 0 0; font-size:14.5px; color:var(--ink-soft);}
.form-status:empty{display:none;}
.form-status.is-ok{color:#4B5A26; font-weight:500;}
.form-status.is-error{color:#A23B22; font-weight:500;}
form.contact-form button:disabled{opacity:.6; cursor:progress;}

/* Honeypot spam trap: visually hidden (not display:none — some bots skip that),
   removed from tab order, off-screen so it never shows to real visitors. */
.hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

/* ---------- Footer ---------- */
footer.site-footer{
  padding:44px 0; margin-top:40px; background:var(--ink); color:#D8D0BF;
  background-image:radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size:22px 22px;
}
footer.site-footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:13.5px;}
footer.site-footer nav{display:flex; gap:22px;}
footer.site-footer a{text-decoration:none; color:#B9AF98; transition:color .15s ease;}
footer.site-footer a:hover{color:#EFB08C;}

/* ---------- Phone tuning ---------- */
@media (max-width:700px){
  /* Shorter card photos so more than one card fits on screen */
  .card .thumb.thumb-lg{aspect-ratio:4/3;}
  /* The flame band doesn't need desktop-sized breathing room */
  .craving-band{padding:56px 0;}
  .craving-tile{min-height:120px; padding:26px 20px;}
  .craving-tile-name{font-size:24px;}
  /* Stats sit tighter and keep their dividers tidy when they wrap */
  .recipe-stats div{padding:0 16px;}
  .recipe-stats strong{font-size:19px;}
  /* Finger-friendly form controls */
  .print-btn{min-height:44px; padding:12px 20px;}
  /* 16px keeps iOS from zooming in when a field gets focus */
  form.contact-form input, form.contact-form textarea{font-size:16px; padding:12px; width:100%;}
  form.contact-form button{min-height:44px; width:100%; text-align:center;}
}
#cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; max-width:520px;
  background:var(--ink); color:var(--cream); border-radius:6px; padding:18px 20px;
  font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:999; display:none;
}
#cookie-banner p{color:var(--cream); font-size:13.5px; margin-bottom:12px;}
#cookie-banner .actions{display:flex; gap:10px;}
#cookie-banner button{border:none; padding:8px 16px; border-radius:3px; font-size:13.5px; cursor:pointer; font-family:'Work Sans';}
#cookie-banner .accept{background:var(--terracotta); color:#fff;}
#cookie-banner .decline{background:transparent; color:var(--cream); border:1px solid #6b6455;}
/* Light terracotta on charcoal: 8:1, same accent the footer links use. */
#cookie-banner a{color:#EFB08C; text-decoration:underline; text-underline-offset:2px;}
#cookie-banner a:hover{color:#fff;}

/* "Manage cookie preferences" box on the Privacy and Cookie Policy pages */
.cookie-preferences{
  display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap;
  margin:16px 0 8px; padding:14px 18px;
  background:var(--card); border:1px solid var(--line); border-radius:8px; font-size:15px;
}
.cookie-choice-status{font-weight:600; color:var(--ink);}
.cookie-preferences-btn{
  border:1px solid var(--ink); background:none; color:var(--ink); cursor:pointer;
  font-family:'Work Sans'; font-size:14px; padding:10px 18px; min-height:44px; border-radius:22px;
  transition:background .15s ease, color .15s ease;
}
.cookie-preferences-btn:hover{background:var(--ink); color:var(--cream);}

/* print */
@media print{
  .site-header, footer.site-footer, .print-btn, #cookie-banner, nav{display:none !important;}
  body{background:#fff;}
  .recipe-body{grid-template-columns:1fr;}
}

/* ============================================================
   Header v2 + home hero v2
   Appended on purpose: everything here is either a new class or a
   deliberate override of an earlier rule. Because these come last in the
   file, they win on equal specificity - which also means every responsive
   override for them has to be re-stated *inside this block*, after the
   desktop rule. An earlier @media further up the file would otherwise be
   silently beaten by a plain rule down here.
   ============================================================ */

/* ---------- Header shell ---------- */
.site-header{padding:13px 0; transition:box-shadow .22s ease, background .22s ease;}
.site-header.is-stuck{background:rgba(247,243,236,.96); box-shadow:0 10px 28px -20px rgba(46,42,36,.6);}
.site-header .wrap{
  position:relative;
  display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
  justify-content:flex-start;
}
.logo{flex-shrink:0;}

/* ---------- Main nav with dropdowns ---------- */
.mainnav{display:flex; align-items:center; gap:2px; margin-right:auto;}
.mainnav-item{position:relative;}
.mainnav-btn{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-family:'Work Sans'; font-size:14.5px; font-weight:500; line-height:1;
  color:var(--ink-soft); background:none; border:none; cursor:pointer;
  padding:9px 11px; border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.mainnav-btn:hover{color:var(--ink); background:#EFE6D3;}
.mainnav-item.open .mainnav-btn{color:var(--ink); background:#EFE6D3;}
.mainnav-caret{width:13px; height:13px; transition:transform .2s ease;}
.mainnav-item.open .mainnav-caret{transform:rotate(180deg);}

.mainnav-panel{
  position:absolute; top:calc(100% + 10px); left:0; min-width:206px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 38px -16px rgba(46,42,36,.34);
  padding:7px; display:none; flex-direction:column; z-index:60;
}
.mainnav-item.open .mainnav-panel{display:flex; animation:navpop .18s ease both;}
@keyframes navpop{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.mainnav-panel a{
  padding:9px 12px; font-size:14px; color:var(--ink); text-decoration:none;
  border-radius:6px; white-space:nowrap; transition:background .13s ease, color .13s ease;
}
.mainnav-panel a:hover{background:#F1E9D9; color:var(--terracotta);}
.mainnav-panel-wide{min-width:348px;}
.mainnav-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 8px;}
.mainnav-panel a.mainnav-panel-all{
  margin-top:6px; padding-top:11px; border-top:1px solid var(--line);
  border-radius:0; font-size:13.5px; font-weight:500; color:var(--terracotta);
}
.mainnav-panel a.mainnav-panel-all:hover{background:none; opacity:.72;}
.mainnav-foot{display:none;}

/* ---------- Header tools ---------- */
.headtools{display:flex; align-items:center; gap:9px; flex-shrink:1; min-width:0;}

/* Search: a real, always-visible field on desktop. The lupa button stays in
   the markup (hidden here) because the existing header-search script needs
   both it and .nav-search-box to exist, and it takes over again on phones. */
.nav-search-toggle{display:none;}
/* The search box is the one item allowed to give way under pressure (down to
   120px), so a wider fallback font can never push the header into overflow. */
.nav-search{flex:0 1 180px; min-width:120px;}
.nav-search-box{
  position:static; width:100%; padding:0 14px; height:40px;
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  box-shadow:none; transition:border-color .16s ease, box-shadow .16s ease;
}
.nav-search-box:focus-within{border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(184,89,58,.11);}
.nav-search-glass{width:15px; height:15px; color:var(--ink-soft); flex-shrink:0;}
.nav-search-box input{
  width:100%; min-width:0; border:none; border-bottom:none; background:none;
  padding:0; font-family:'Work Sans'; font-size:14px; color:var(--ink); outline:none;
}
.nav-search-box input:focus{border-color:transparent;}
.header-search-suggestions{
  position:absolute; top:calc(100% + 9px); right:0; width:280px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 38px -16px rgba(46,42,36,.34); padding:6px;
  display:none; max-height:290px; overflow-y:auto; z-index:61;
}
.header-search-suggestions.active{display:block;}
.header-search-suggestions .sugg-item{padding:9px 11px; border-radius:6px; border-bottom:none;}

/* Saved */
.nav-saved-btn{
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 12px;
  background:none; border:none; border-radius:999px; cursor:pointer;
  font-family:'Work Sans'; font-size:14px; font-weight:500; color:var(--ink-soft);
  transition:color .15s ease, background .15s ease;
}
.nav-saved-btn svg{width:17px; height:17px; flex-shrink:0;}
.nav-saved-btn:hover{background:#EFE6D3; color:var(--ink);}
.nav-favorites-menu{top:calc(100% + 9px); border-radius:10px;}

/* Surprise me */
.surprise-btn{
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px;
  background:var(--terracotta); color:#FFF8F0; border:none; border-radius:999px;
  font-family:'Work Sans'; font-size:14px; font-weight:500; cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.surprise-btn:hover{background:#A34C30; transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(184,89,58,.75);}
.surprise-btn:active{transform:none;}
.surprise-btn svg{width:16px; height:16px; flex-shrink:0;}
.surprise-btn.is-rolling svg{animation:roll .55s cubic-bezier(.3,.7,.3,1);}
@keyframes roll{to{transform:rotate(360deg);}}

/* Hamburger */
.burger-btn{
  display:none; flex-direction:column; justify-content:center; gap:4.5px;
  width:42px; height:42px; padding:0 11px; flex-shrink:0;
  background:none; border:none; border-radius:9px; cursor:pointer;
  transition:background .15s ease;
}
.burger-btn:hover{background:#EFE6D3;}
.burger-bar{display:block; height:1.8px; width:100%; background:var(--ink); border-radius:2px; transition:transform .22s ease, opacity .18s ease;}
.burger-btn[aria-expanded="true"] .burger-bar:nth-child(1){transform:translateY(6.3px) rotate(45deg);}
.burger-btn[aria-expanded="true"] .burger-bar:nth-child(2){opacity:0;}
.burger-btn[aria-expanded="true"] .burger-bar:nth-child(3){transform:translateY(-6.3px) rotate(-45deg);}

/* ---------- Home hero ---------- */
.hero{padding:62px 0 58px;}
.hero .wrap{display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center;}
.hero-copy{min-width:0;}
.hero h1{font-size:clamp(40px,5.3vw,60px); max-width:13ch; line-height:1.05; margin-bottom:.34em;}
.hero p.lede{font-size:17.5px; max-width:36ch; margin-bottom:26px;}

.search-wrap{position:relative; max-width:none; width:100%;}
.search-bar.hero-search{
  display:flex; align-items:center; gap:11px;
  max-width:none;
  background:var(--card); border:1.5px solid var(--line); border-radius:999px;
  padding:6px 6px 6px 20px;
  box-shadow:0 12px 28px -20px rgba(46,42,36,.6);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.search-bar.hero-search:focus-within{border-color:var(--terracotta); box-shadow:0 14px 30px -18px rgba(184,89,58,.65);}
.hero-search-glass{width:19px; height:19px; color:var(--ink-soft); flex-shrink:0;}
.search-bar.hero-search input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-family:'Work Sans'; font-size:16.5px; color:var(--ink);
}
.search-bar.hero-search button{
  flex-shrink:0; border:none; cursor:pointer; border-radius:999px;
  background:var(--terracotta); color:#FFF8F0;
  font-family:'Work Sans'; font-size:15px; font-weight:500; padding:13px 27px;
  transition:background .15s ease;
}
.search-bar.hero-search button:hover{background:#A34C30;}

.hero-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px;}
.chip{
  font-family:'Work Sans'; font-size:13.5px; font-weight:500; white-space:nowrap;
  color:var(--ink-soft); background:rgba(255,253,249,.72);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.chip:hover{color:var(--terracotta); border-color:var(--terracotta); transform:translateY(-1px);}
.chip.active{background:var(--ink); border-color:var(--ink); color:var(--cream);}
.chip.active:hover{transform:none;}

/* Featured dish carousel */
a.swiper-slide{display:block; text-decoration:none; color:inherit;}
.slide-meta{
  display:flex; align-items:center; gap:9px; margin:0;
  color:#E7DDCE; font-size:13.5px; font-weight:500; letter-spacing:.01em;
}
.slide-sep{width:3px; height:3px; border-radius:50%; background:rgba(231,221,206,.8); flex-shrink:0;}

/* ---------- Social links ----------
   Outline icons drawn at the same thin stroke as the chef-hat logo, in the
   site's own ink colour with the terracotta accent on hover -- never the
   networks' brand colours. Icon paths are based on Tabler Icons (MIT). */
.social-icons{display:flex; align-items:center; gap:2px;}
.social-link{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--ink-soft); text-decoration:none; border-radius:50%;
  transition:color .15s ease, background .15s ease;
}
.social-link svg{width:18px; height:18px;}
.social-link:hover{color:var(--terracotta);}
.social-link:focus-visible{outline:2px solid var(--terracotta); outline-offset:2px;}

/* Header bar */
.header-social{display:flex; align-items:center; flex-shrink:0;}
.header-social .social-link{width:30px; height:30px;}
.header-social .social-link:hover{background:#EFE6D3;}

/* End of the hamburger drawer */
.mainnav-social{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding:12px 2px 0; border-top:1px solid var(--line);
}
.mainnav-social-label{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.mainnav-social .social-link{width:44px; height:44px;}
.mainnav-social .social-link svg{width:21px; height:21px;}

/* Footer: a touch larger. On the dark footer the plain terracotta falls below
   3:1 contrast, so hover uses the footer's existing light-terracotta accent. */
/* Six links no longer fit one row on a phone: let them wrap instead of
   squeezing "Terms of Use" onto three lines and clipping "Disclaimer". */
footer.site-footer nav{flex-wrap:wrap; gap:10px 22px;}
.footer-social{display:flex; align-items:center; gap:12px;}
.footer-social-label{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#A39A84;}
footer.site-footer .social-link{width:38px; height:38px; color:#B9AF98;}
footer.site-footer .social-link svg{width:22px; height:22px;}
footer.site-footer .social-link:hover{color:#EFB08C; background:rgba(255,255,255,.06);}

/* ---------- Responsive ---------- */
/* Below full laptop width, the Saved and Surprise me labels give way to their
   icons so the row keeps room for the social icons. */
@media (max-width:1180px){
  .nav-search{flex-basis:170px;}
  .nav-saved-word{display:none;}
  .nav-saved-btn{width:40px; padding:0; justify-content:center;}
  .surprise-btn{padding:0 13px;}
  .surprise-btn span{display:none;}
  .mainnav-btn{padding:9px 10px; font-size:14px;}
}

/* Nav collapses into the hamburger before the row can crowd the logo. The
   social icons leave the bar here and reappear at the end of the drawer. */
@media (max-width:1020px){
  .burger-btn{display:flex;}
  /* With the nav lifted out of the row, this is what keeps the icons on the
     right edge instead of bunched up against the logo. */
  .headtools{margin-left:auto;}
  .header-social{display:none;}
  .mainnav{
    position:absolute; top:calc(100% + 13px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:8px 14px 12px;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 22px 44px -20px rgba(46,42,36,.45);
    display:none; max-height:calc(100vh - 110px); overflow-y:auto; z-index:59;
  }
  .mainnav.open{display:flex;}
  .mainnav-item{border-bottom:1px solid var(--line);}
  .mainnav-item:last-of-type{border-bottom:none;}
  .mainnav-btn{width:100%; justify-content:space-between; padding:14px 6px; font-size:16px; color:var(--ink); border-radius:0;}
  .mainnav-btn:hover, .mainnav-item.open .mainnav-btn{background:none;}
  .mainnav-panel, .mainnav-panel-wide{
    position:static; min-width:0; padding:0 0 10px 10px;
    background:none; border:none; box-shadow:none;
  }
  .mainnav-item.open .mainnav-panel{animation:none;}
  .mainnav-panel a{padding:11px 8px; font-size:14.5px;}
  .mainnav-cols{grid-template-columns:1fr 1fr;}
  .mainnav-foot{display:block; margin-top:12px;}
  .mainnav-foot .surprise-btn{width:100%; justify-content:center; height:46px;}
  .mainnav-foot .surprise-btn span{display:inline;}
  .headtools .surprise-btn{display:none;}
}

@media (max-width:940px){
  .hero .wrap{grid-template-columns:1fr; gap:40px;}
  .hero h1{max-width:16ch;}
  .hero p.lede{max-width:52ch;}
}

/* Phones: header shrinks to logo + lupa + heart + burger. */
@media (max-width:700px){
  .site-header{padding:10px 0;}
  .site-header .wrap{gap:4px;}
  .nav-search{position:static; flex:0 0 auto; min-width:0;}
  .nav-search-toggle{display:inline-flex; margin-left:auto;}
  .nav-search-box{
    position:absolute; top:calc(100% + 11px); left:16px; right:16px; width:auto;
    height:46px; display:none; z-index:62;
    box-shadow:0 20px 40px -20px rgba(46,42,36,.45);
  }
  .nav-search-box.active{display:flex;}
  .header-search-suggestions{left:16px; right:16px; width:auto; top:calc(100% + 64px);}
  .nav-saved-word{display:none;}
  .nav-saved-btn{width:42px; height:42px; padding:0; justify-content:center;}
  .nav-favorites{position:static;}
  .nav-favorites-menu{left:16px; right:16px; min-width:0; max-width:none;}
  .mainnav{left:16px; right:16px;}

  .hero{padding:40px 0 44px;}
  .hero .wrap{gap:32px;}
  .hero h1{font-size:clamp(33px,8.6vw,44px); max-width:14ch;}
  .hero p.lede{font-size:16px; margin-bottom:22px;}
  .search-bar.hero-search{padding:5px 5px 5px 16px; gap:9px;}
  .search-bar.hero-search input{font-size:16px;}
  .search-bar.hero-search button{padding:12px 20px; font-size:14.5px;}
  .hero-search-glass{width:17px; height:17px;}
  .hero-chips{gap:7px; margin-top:18px;}
  .chip{font-size:13px; padding:9px 14px;}
  .slide-meta{font-size:12.5px;}
}

/* Chip results header inside the suggestions panel */
.sugg-head{
  padding:9px 16px 8px; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line);
}
.mainnav-panel a.is-current{color:var(--terracotta); font-weight:500;}
.mainnav-item.has-current .mainnav-btn{color:var(--ink);}

/* ---------- Touch targets on phones ----------
   Everything tappable is at least 44x44px (Apple HIG, WCAG 2.5.5). Kept last in
   the file so it wins over the earlier, equally specific phone rules. Inline
   links inside running text are left alone -- they are exempt, and padding
   them would pull lines of prose apart. */
/* Applied by input type as well as width: a tablet is a touch screen at any
   size, while a laptop with a mouse keeps the tighter desktop spacing. */
@media (max-width:700px), (pointer:coarse){
  .logo{min-height:44px;}
  .nav-icon-btn, .nav-saved-btn, .burger-btn{width:44px; height:44px;}
  .favorite-btn{width:44px; height:44px;}

  /* The text field itself was only 21px tall inside the 52px pill, so a tap
     on the pill's padding missed it. Stretch it to the pill's full height. */
  .search-bar.hero-search input{align-self:stretch; min-height:44px;}
  .search-bar.hero-search button{min-height:44px;}
  .chip{min-height:44px; padding-top:0; padding-bottom:0;}

  .block-head a.see-all, a.see-all{display:inline-flex; align-items:center; min-height:44px;}

  footer.site-footer nav{row-gap:0;}
  footer.site-footer nav a{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px;}
  footer.site-footer .social-link{width:44px; height:44px;}

}
.slide-tag{font-size:12px;}
/* On the narrowest phones (320px) three 44px buttons plus 9px gaps no longer
   fit beside the logo and the menu button ate into the right margin. */
@media (max-width:380px){
  .headtools{gap:4px;}
}

/* Author byline under recipe and article titles */
.byline{margin:-4px 0 12px; font-size:14px; color:var(--ink-soft);}
.byline a{color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; transition:color .15s ease, text-decoration-color .15s ease;}
.byline a:hover{color:var(--terracotta); text-decoration-color:currentColor;}
/* Anchored headings (e.g. about.html#team) clear the sticky header. */
:target{scroll-margin-top:96px;}

/* Big screens get a larger copy of the flame photo. The standard version is
   1200px wide (a portrait photo capped at 1600px tall), which a 1920px monitor
   would stretch 1.6x and soften. Phones and laptops keep the light 165 KB file;
   only screens from 1440px up download the 1920px one (~420 KB). */
@media (min-width:1440px){
  .craving-band{background-image:url('images/hero-flame-skillet-large.jpg');}
}