:root{
  /* Palette: fresh, elegant, not stark */
  --bg: #faf8f4;          /* warm off-white */
  --ink: #2f2f33;         /* soft charcoal */
  --muted: #6b6b73;       /* secondary text */
/*  --accent: #b69a5e;      /* muted gold */
  --accent: #826216;      /* muted gold */
  --hint: #2f2f3310;      /* faint lines/overlays */
  --link: #315a63;        /* desaturated teal */
  --block: #ffffff;       /* panels/cards */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
}
button {
  cursor: pointer;
}
/* Generic layout helpers */
.container{width:min(1140px, 92vw); margin:0 auto}
.section{padding:72px 0}
.serif{font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif}
.lead{font-size:1.125rem;color:var(--muted)}
.kicker{
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:0.95rem;      /* slightly larger */
  font-weight:600;
  color:#444;             /* darker for contrast */
  text-shadow:0 1px 0 #fff; /* subtle lift */
}

/* Buttons */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-appearance:none;
  appearance:none;
  border:0;
  text-decoration:none;
  color:#fff;
  background:var(--link);
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  min-height:44px;
  box-shadow:0 6px 16px #315a631a;
  transition:.25s ease;
}
.button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px #315a6325;
}
.button--light{
  background:transparent;
  color:var(--link);
  border:1px solid var(--link);
}
@media (max-width:540px){
  .hero__actions{flex-direction:column;align-items:stretch;gap:10px;}
  .hero__actions .button{width:100%;}
}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in oklab, var(--bg) 90%, white 10%);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid #0000000e}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand__mark{
  width:36px;height:36px;border-radius:8px;
  object-fit:cover; /* keeps logo nicely cropped if not square */
  box-shadow: inset 0 0 0 2px #ffffff88, 0 2px 8px #00000010;
  /* remove the old gradient background line */
  background: none;
  display:block;
}
.brand__name{font-weight:700;letter-spacing:.02em}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;margin-left:18px}
.nav a:hover{color:var(--link)}

/* Hero */
.hero{
  position:relative;isolation:isolate;
  min-height:72vh;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(1200px 600px at 30% 10%, #315a630f 0%, transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#faf8f4 60%,#f2efe8 100%);
}
.hero::before{
  content:"";
  position:absolute;inset:-10% -10% auto -10%;height:130%;
  background:
    repeating-linear-gradient(100deg,var(--hint) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(-100deg,var(--hint) 0 1px,transparent 1px 10px);
  transform:skewY(-8deg) translateY(-10%);
  mask:linear-gradient(180deg,transparent 0 12%,#000 45% 85%,transparent 100%);
  pointer-events:none;z-index:0;
}
.hero__img{
  position:absolute;inset:0;z-index:-1;
  background:url('/picfiles/coverdishbanner.png') center/cover no-repeat;
  filter:saturate(103%) contrast(96%) brightness(0.78);
  opacity:.18;
}
.hero__content{text-align:center;padding:56px 0 24px;z-index:1}

.hero p.lead{
  margin:10px auto 24px;
  max-width:720px;
  font-size:1.2rem;       /* slightly larger */
  line-height:1.65;
  color:#333;             /* darker for legibility */
}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Two-column intro */
.intro{display:grid;gap:42px;grid-template-columns:1.05fr .95fr;align-items:center}
@media (max-width:900px){.intro{grid-template-columns:1fr}}
.card{background:var(--block);border:1px solid #00000010;border-radius:18px;padding:28px;box-shadow:0 8px 28px #0000000b}

/* Book block */
.book {
  display: grid;
  gap: 22px;
  grid-template-columns: 1.1fr .9fr;
  align-items: start;  /* align top instead of center */
}
@media (max-width:900px){.book{grid-template-columns:1fr}}
.book__cover{background:#f3f1eb url('/picfiles/bookcover.png') center/contain no-repeat;border-radius:18px;aspect-ratio:3/4;box-shadow:0 8px 26px #00000014;border:1px solid #00000012}

/* Recipes */
.grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.tile{grid-column:span 4;min-height:240px;border-radius:16px;overflow:hidden;position:relative;background:#f3f1eb;border:1px solid #00000012;box-shadow:0 8px 24px #0000000b}
.tile--wide{grid-column:span 8}
@media (max-width:1000px){.tile,.tile--wide{grid-column:span 6}}
@media (max-width:640px){.tile,.tile--wide{grid-column:span 12}}
.tile__img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(105%);opacity:.9}
.tile__veil{position:absolute;inset:0;background:linear-gradient(180deg,#0000 25%,#0008 100%)}
.tile__cap{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;z-index:2;font-family:"Cormorant Garamond",serif;font-size:1.25rem;line-height:1.25}

/* Amazon Popup */
.bookurlpopup , .bookurlpopup_m {
    display: none;
    position: absolute;
    min-width: 160px;
    background-color: #faf8f4;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px;
    z-index: 9999;
  }
.bookurlpopup_m {
  position: fixed;  
}
   .bookurlpopup a , .bookurlpopup_m a {
    padding: 8px 10px;
    text-decoration: none;
    display: inline-block;
    color: #2a361c;
  }

  .bookurlpopup a:hover , .bookurlpopup_m a:hover {
    text-decoration: underline;
  }

/* Newsletter */
.newsletter{display:grid;gap:16px;justify-items:center;text-align:center}
.form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
input[type="email"]{padding:12px 14px;border-radius:999px;border:1px solid #00000018;background:#fff;min-width:260px;font:inherit;outline:none}
input[type="email"]:focus{border-color:var(--link);box-shadow:0 0 0 4px #315a6320}

/* Footer */
.site-footer{padding:36px 0 60px;color:var(--muted);text-align:center;border-top:1px solid #00000012}
small{opacity:.9}

/* Animations */
.reveal{opacity:0;transform:translateY(12px);animation:fadeUp .8s ease forwards}
.reveal:nth-of-type(2){animation-delay:.12s}
.reveal:nth-of-type(3){animation-delay:.22s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Animations */
.reveal{opacity:0;transform:translateY(12px);animation:fadeUp .8s ease forwards}
.reveal:nth-of-type(2){animation-delay:.12s}
.reveal:nth-of-type(3){animation-delay:.22s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* --- Mobile readability tweaks --- */
@media (max-width:640px){
  .hero__content .kicker {
    font-size: 1.05rem;   /* a little bigger */
    color: #333;          /* stronger for contrast */
  }
  .hero__content p.lead {
    font-size: 1.28rem;   /* slightly larger body */
    line-height: 1.7;     /* more breathing space */
    color: #2c2c2f;       /* near-ink */
  }
}

/* Parent heading: keep a modest overall lift */

.hero h1{
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  font-size:clamp(36px,6vw,64px);
  line-height:1.1;
  margin:0 0 8px;
  color:#111;
  text-shadow:0 1px 0 #fff,0 14px 32px #0000003a;
}
.hero h1 .accent{
  color:var(--accent);
  text-shadow:0 1px 0 #fff,0 12px 28px #00000030;
}
/* ——— Book page preview gallery ——— */
.book{ display:grid; gap:22px; grid-template-columns: 1.1fr .9fr; align-items:start }
@media (max-width:900px){ .book{ grid-template-columns:1fr } }

.book__cover{
  background:#f3f1eb url('/picfiles/bookcover.png') center/contain no-repeat;
  border-radius:18px; aspect-ratio:3/4;
  box-shadow:0 8px 26px #00000014; border:1px solid #00000012;
}

/* Right-hand column content */
.book__meta .lead{ margin:.3em 0 1em; }

/* Preview gallery */
.book__gallery{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width:720px){ .book__gallery{ grid-template-columns:1fr } }

.book__spread{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid #00000012; background:#fff;
  box-shadow: 0 6px 20px #00000010; cursor:zoom-in;
}
.book__spread img{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio: 3 / 2;
  transition: transform .3s ease;
}
.book__spread:hover img{ transform: scale(1.02); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:80; display:none;
  background:rgba(0,0,0,.6);
  align-items:center; justify-content:center;
  padding:24px;
}
.lightbox.is-open{ display:flex; }
.lightbox__inner{
  max-width:min(1200px, 94vw); max-height:90vh; position:relative;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.lightbox__img{ display:block; width:100%; height:auto; }
.lightbox__close{
  position:absolute; top:8px; right:10px;
  background:#00000080; color:#fff; border:0; border-radius:999px;
  width:36px; height:36px; cursor:pointer; font-size:20px; line-height:36px;
}
/* --- Book preview layout --- */
.pages-grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
@media (max-width: 900px){ .pages-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width: 560px){ .pages-grid{ grid-template-columns: 1fr } }

.page-card{
  background:var(--block);
  border:1px solid #00000012;
  border-radius:16px;
  box-shadow:0 8px 24px #0000000b;
  padding:14px;
  display:flex; align-items:center; justify-content:center;
  cursor: zoom-in;
}

/* Use an <img>, keep natural aspect. A book page is ~1:1.414 (A-series) */
.page-thumb{
  display:block;
  width:100%;
  height:auto;               /* preserve aspect ratio */
  aspect-ratio: 1 / 1.414;   /* hint for layout stability */
  object-fit: contain;       /* never squish */
  border-radius:10px;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:none; /* toggled via JS */
  background:rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}
.lightbox.open{ display:grid; place-items:center; }

.lb-frame{
  width: min(96vw, 1200px);
  height: min(92vh, 1200px);
  background:#111;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  position:relative;
  display:flex; flex-direction:column;
}
.lb-bar{
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  padding:8px 10px; color:#fff; background:#111A;
  border-bottom:1px solid #ffffff22; border-radius:14px 14px 0 0;
  font-weight:600;
}
.lb-viewport{
  flex:1;
  overflow:auto;            /* scroll when zoomed */
  background:#222;
}
.lb-viewport img{
  display:block;
  max-width:none;           /* allow true zoom */
  transform-origin: 0 0;    /* top-left zooming */
  image-rendering:auto;
}
.lb-controls button{
  appearance:none; border:1px solid #ffffff33; color:#fff; background:#00000033;
  padding:6px 10px; border-radius:999px; font-weight:600; cursor:pointer;
}
.lb-controls button:hover{ background:#ffffff22 }

/* PDF embed block */
.pdf-block{
  margin-top:18px;
  background:var(--block);
  border:1px solid #00000012;
  border-radius:16px;
  box-shadow:0 8px 24px #0000000b;
  padding:14px;
}
.pdf-embed{
  width:100%;
  height:70vh;          /* comfortable inline preview; adjust if you wish */
  border:0;
  border-radius:12px;
}
/* Book page enhancements */
.book-features { 
  margin: .4em 0 1em; padding-left: 1.1em; 
}
.book-features li { margin: .35em 0; color: var(--ink); }

.book-cta { position: relative;display:flex; gap:12px; flex-wrap:wrap; margin: 12px 0 4px; }

/* PDF preview */
.pdf-preview > summary {
  cursor: pointer; list-style: none; font-weight: 700;
  padding: 10px 14px; border:1px solid #00000012; border-radius:10px;
  background: #fff; box-shadow: 0 6px 16px #0000000b;
}
.pdf-preview[open] > summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }

.pdf-wrap {
  border:1px solid #00000012; border-top:0; border-bottom-left-radius:10px; border-bottom-right-radius:10px;
  box-shadow: 0 8px 24px #0000000b;
}
.pdf-frame {
  width:100%;
  height:min(72vh, 820px); /* responsive height; keeps it roomy on desktop */
  display:block;
}
.pdf-fallback { margin:.6em 0 0; color: var(--muted); }
/* Book page: smaller, readable preview cards */
.grid--bookpreviews {
  gap: 14px;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}
@media (max-width: 1200px){
  .grid--bookpreviews { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 800px){
  .grid--bookpreviews { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

.grid--bookpreviews .tile {
  min-height: 260px;   /* a bit taller for breathing room */
}

/* stronger fade so text stands out */
.grid--bookpreviews .tile__veil{
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%);
}

/* title pill: readable + clamped to 3 lines */
.grid--bookpreviews .tile__cap{
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  font-size: 1.05rem;
  line-height: 1.25;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);

  display: -webkit-box;
  -webkit-line-clamp: 3;     /* clamp to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Book page preview grid: real columns + reset spanning */
.grid--bookpreviews {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}
.grid--bookpreviews .tile {
  grid-column: auto;       /* <-- stop spanning the whole row */
  min-height: 260px;
}

/* Responsive */
@media (max-width: 1200px){
  .grid--bookpreviews { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 800px){
  .grid--bookpreviews { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

/* Keep the dark read-friendly cap we added */
.grid--bookpreviews .tile__veil{
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%);
}
.grid--bookpreviews .tile__cap{
  left: 12px; right: 12px; bottom: 12px;
  padding: 10px 12px; font-size: 1.05rem; line-height: 1.25;
  border-radius: 12px; background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Compact, left-aligned filter; centers on small screens */
.form--compact{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  justify-content:flex-start;
}
@media (max-width:640px){
  .form--compact{ justify-content:center; }
}
/* --- Notes Page --- */
.note {
  margin-top: 36px;
  max-width: 720px;
}

.note h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--ink);
}

.note p {
  margin-bottom: 1rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #3b3b3b;
}

.note em {
  font-style: italic;
  color: #444;
}

.note .signature {
  margin-top: 2rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--muted);
  text-align: right;
  border-top: 1px solid #00000015;
  padding-top: 1rem;
}
/* ===== Recipe detail layout & styling ===== */
.container--recipe { width: min(1220px, 94vw); }      /* a bit wider than default */
.recipe__title { margin: .2em 0 .1em; }
.recipe__meta { margin: 0 0 .8em; }
.recipe__desc { margin: .6em 0 1.2em; max-width: 72ch; }

.recipe__figure { margin: 0 0 18px; }
.recipe__img {
  display: block; width: 100%;
  max-height: 560px; object-fit: cover;
  border-radius: 14px; border: 1px solid #00000014;
  box-shadow: 0 14px 40px #00000014;
}

/* single global column headings for desktop */
.recipe-head {
  display: grid; gap: 22px;
  grid-template-columns: 1fr 2fr;
  align-items: end;
  margin: 10px 0 6px;
  border-bottom: 1px solid var(--hint);
  padding-bottom: 8px;
}
.recipe-head__title {
  margin: 0;
  color: var(--accent);
  letter-spacing: .01em;
}

/* Stage blocks */
.stage { margin-top: 22px; }
.stage__title {
  margin: 0 0 10px;
  color: var(--ink);
  border-left: 4px solid color-mix(in oklab, var(--accent) 85%, #000 0%);
  padding-left: 10px;
}
.stage__subhead {
  margin: .2em 0 .4em;
  color: var(--accent);
  font-weight: 700;
}

/* Desktop two columns beneath the single header */
.stage__row {
  display: grid; gap: 22px;
  grid-template-columns: 1fr 2fr;
}
.stage__col ul.ingredients,
.stage__col ol.method { margin: 0; }
ul.ingredients, ol.method { padding-left: 1.1em; }
ul.ingredients .head, ol.method .head {
  list-style: none; margin: .6em 0 .2em; padding: 0; font-weight: 700; color: var(--ink);
}

/* Actions row */
.recipe__actions { margin-top: 18px; display:flex; gap:10px; flex-wrap:wrap; }

/* Mobile behavior: stack + repeat headings inside each stage */
.only-desktop { display: block; }
.only-mobile  { display: none; }

@media (max-width: 760px){
  .only-desktop { display: none !important; }
  .only-mobile  { display: block !important; }

  .recipe__img { max-height: 46vh; }                 /* keep it letterbox-y on phones */
  .stage__row { grid-template-columns: 1fr; }        /* stack lists */
  .recipe-head { display: none; }                    /* hide the global headers on mobile */
  .stage__title { margin-bottom: 8px; }              /* tighter spacing */
}

/* Print: single global headers, no buttons, clean lists (like your PDF) */
@media print {
  :root { --bg:#fff; --ink:#000; }
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .no-print { display: none !important; }
  .container--recipe { width: 100%; }
  .recipe__figure { margin: 0 0 8px; }
  .recipe__img { max-height: 420px; border: 0; box-shadow: none; border-radius: 0; }

  .only-mobile { display: none !important; }       /* don’t repeat headings on print */
  .only-desktop { display: block !important; }

  .recipe-head { border-color: #0002; }
  .stage__title { break-after: avoid; }
  .stage__row { grid-template-columns: 1fr 2fr; }
  .button { display: none !important; }
}
/* Visibility helpers */
.only-desktop { display: block !important; }
.only-mobile  { display: none  !important; }

@media (max-width: 760px){
  .only-desktop { display: none  !important; }
  .only-mobile  { display: block !important; }
}

/* Single, global column headers (desktop) */
.recipe-head{
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  gap: 22px;
  align-items: end;
  margin: 10px 0 6px;
  border-bottom: 1px solid var(--hint);
  padding-bottom: 8px;
}
.recipe-head__title{ margin:0; color: var(--accent); }

/* Stage rows: two columns on desktop */
.stage__row{
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  gap: 22px;
}

/* Lists */
ul.ingredients, ol.method { padding-left: 1.1em; margin: 0; }
ul.ingredients .head, ol.method .head {
  list-style: none; margin: .6em 0 .2em; padding: 0; font-weight: 700; color: var(--ink);
}

/* Mobile: stack each stage and show per-stage headings */
@media (max-width: 760px){
  .stage__row{ grid-template-columns: 1fr; }
  .recipe-head{ display: none !important; } /* hide the global header on phones */
}
/* Remove numbering for method lists */
ol.method {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
  margin: 0;
}

ol.method li {
  margin: 0 0 0.8em 0;      /* add generous space between steps */
  line-height: 1.4;       /* slightly more readable line height */
}

ol.method li:last-child {
  margin-bottom: 0;        /* avoid extra space at the end */
}

/* Optional: make subhead entries ("Blanch", "Sear", etc.) stand out slightly */
ol.method li.head {
  font-weight: 700;
  margin-top: 1.2em;
  margin-bottom: 0.3em;
  color: var(--ink);
}
/* Constrain the maximum readable width of recipes */
.container--recipe {
  width: min(1200px, 94vw);   /* responsive up to 1200px */
  margin-left: auto;
  margin-right: auto;
}

/* Optional: tighten the text column on ultra-wide screens */
@media (min-width: 1600px) {
  .recipe__body {
    max-width: 1100px;
    margin: 0 auto;
  }
}

/* =========================
   HERO VIDEO — STRONGER VEIL + BETTER FRAMING
   ========================= */

/* Tunable variables */
.hero{
  /* dial back veil strength and vignette for more cinematic depth */
  --veil-strength: .34;   /* previously .62 — lighter overall scrim */
  --vignette-top: .10;    /* subtle top fade */
  --vignette-bot: .22;    /* gentle bottom darkening */
  --grid-alpha: .05;      /* faint diagonal texture */
}

/* Make sure old image backgrounds don't leak through */
.hero{ background: none !important; position: relative; overflow: hidden; min-height: 72vh; }

/* Show more of the upper part of the square video (chef hat) */
.hero__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;   /* <— nudge focus upward; adjust 10–25% to taste */
  transform: scale(1.02);
  z-index: 0;
}

.hero__video{
  filter: brightness(0.85) contrast(1.1) saturate(1.05);
}

/* Veil: solid scrim + pattern + gentle vignette */
.hero__veil{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__veil::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,var(--veil-strength)); /* strong base veil */
}
.hero__veil::after{
  content:"";
  position:absolute; inset:0;
  background:
    /* top/bottom vignette for extra legibility */
    linear-gradient(to bottom,
      rgba(0,0,0,var(--vignette-top)) 0%,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0) 65%,
      rgba(0,0,0,var(--vignette-bot)) 100%
    ),
    /* subtle diagonal grid, like your current hero */
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,var(--grid-alpha)) 0 2px,
      rgba(255,255,255,0) 2px 12px
    );
}

/* Text sits above the veil; add a little lift */
.hero__content{ position: relative; z-index: 2; text-align: center; padding: 8vh 2rem 10vh; }
.hero h1, .hero .lead{ text-shadow: 0 2px 10px rgba(0,0,0,.45); } /* subtle, helps on dark frames */

/* On very wide viewports the square gets cropped too much; show full square instead. */
@media (min-aspect-ratio: 16/10){
  .hero__video{
    object-fit: contain;          /* show entire 1:1 video */
    background: #000;             /* tasteful letterbox on sides */
    object-position: center;      /* recentre when using contain */
  }
}

/* Smaller screens: keep cover but reduce crop slightly */
@media (max-width: 760px){
  .hero{ min-height: 64vh; }
  .hero__content{ padding: 6vh 1.2rem 8vh; }
  .hero__video{ object-position: 50% 22%; }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero__video{ display: none; }
  .hero__veil::before{ background: rgba(0,0,0,.35); }
  .hero__veil::after{
    background:
      linear-gradient(to bottom,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,.30) 100%
      ),
      repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,0) 2px 12px);
  }
}
/* ===== HERO: light-on-dark text palette ===== */
.hero{
  /* warm near-whites that match your gold palette */
  --hero-text: #F4F1E8;   /* main headings */
  --hero-muted: #E7E2D6;  /* kicker + lead */
}

.hero h1,
.hero h1.serif{
  color: var(--hero-text) !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.65);
}

.hero .accent{            /* keep your gold accent */
  color: var(--accent) !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.65);
}

.hero .kicker{
  color: var(--hero-muted) !important;
  letter-spacing: .08em;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.hero .lead{
  color: rgba(245, 241, 232, .92) !important; /* warm near-white */
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* ensure buttons read cleanly on the dark veil */
.hero .button{
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.hero .button.button--light{
  color: var(--hero-text);
  border-color: rgba(255,255,255,.35);
}
/* ===== Book page: bullet-proof mobile layout ===== */

/* Never let anything in the book grid be wider than its column */
#book .book,
#book .book * {
  max-width: 100%;
}

/* Make the book grid single-column on phones (you already switch at 900px,
   but we also add padding and prevent any accidental overflow) */
@media (max-width: 760px){
  #book .container.book{
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  #book .book{
    grid-template-columns: 1fr;   /* single column */
    gap: 16px;
  }

  /* Ensure the cover block cannot exceed the viewport */
  #book .book__cover{
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: contain;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;             /* clip any internal effects */
  }

  /* Headings: wrap cleanly instead of forcing horizontal scroll */
  #book h1, 
  #book h2, 
  #book .serif {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
}

/* Absolute guard against horizontal scroll on this page */
#book { overflow-x: hidden; }

/* ===== Mobile overflow fix (container + grid + media) ===== */
@media (max-width: 760px){
  /* 1) Make containers never exceed the viewport (include padding in width) */
  .container{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 2) Book page grid: allow tracks to actually shrink */
  #book .book{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
  }

  /* 3) Media should never be wider than its column */
  #book .book__cover,
  #book img,
  #book video{
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    overflow: hidden;           /* clip rounded corners/shadows */
    border-radius: 16px;
  }

  /* 4) Long headings wrap instead of forcing horizontal growth */
  #book h1, #book h2, #book .serif{
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
}

/* 5) Grid safety everywhere: prevent content from expanding tracks */
.grid, .book{
  /* if you define grid-template-columns elsewhere as 1fr 1fr, this ensures tracks can shrink */
  grid-auto-columns: minmax(0, 1fr);
}

html, body { overflow-x: hidden; } /* last-resort guard */

/* ===== Recipe grid mobile layout ===== */
@media (max-width: 760px){
  /* Ensure grid items in the recipe preview stack vertically */
  .grid{
    display: grid;
    grid-template-columns: 1fr;  /* single column layout */
    gap: 16px;                   /* space between items */
  }

  .tile{
    width: 100%;                 /* make sure each tile takes full width */
    height: auto;
    position: relative;
  }

  /* Ensure recipe image doesn’t overflow */
  .tile__img{
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 12px;
  }

  /* Optional: Center the text overlay on mobile */
  .tile__cap{
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);  /* soft background for text */
    color: #fff;
    padding: 0.5rem;
    border-radius: 0 0 12px 12px;
  }
}