/* ===========================================================
   Lisa's Recipes — "Olive & Bone"

   426 family recipes, sorted the way you'd actually reach for
   them: by COURSE. A warm bone-cream reading ground held inside
   a rounded olive-green frame, with a dark-green header — green
   dominant, Graza-elegant, never a flooded field. Each course
   wears its own foodie hue; how a recipe reached the box
   (handwritten / typed / forwarded / printed) is a quiet note.

   Readability is load-bearing: body is a warm serif at 20px,
   never monospace. Every color used as text clears WCAG AAA
   (7:1) on both the cream and card grounds, light AND dark —
   measured, not estimated. Course colors appear as soft tints
   with deep-of-hue text; the green frame and header carry the
   brand. If you change a color, re-check its contrast.
   =========================================================== */

/* ---------- Fonts (self-hosted, no network dependency) ---------- */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
/* Body: a warm humanist sans, upright — chosen for legibility at any age on any
   screen. Replaces the earlier Newsreader serif body while keeping the collection's
   elegance (Fraunces still carries titles + the italic origin notes). */
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url("fonts/spline-mono.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */

:root {
  /* P2 Olive & Bone */
  --green:       #3B5A2A;   /* garden/olive green — the brand */
  --green-deep:  #28401C;   /* header, deep fills, text-safe green (9.2:1 on cream) */
  --green-dark:  #1D3315;   /* frame edge, darkest wells */
  --cream:       #EDE7D3;   /* bone reading ground */
  --paper:       #F7F2E3;   /* card / raised surface */
  --sunk:        #E5DCC2;   /* recessed wells */
  --edge:        #D8CDB0;   /* hairline card edge */

  --ink:         #23241A;   /* 13.6:1 body text */
  --ink-soft:    #454231;   /*  8.6:1 secondary text */
  --ink-faint:   #5B553F;   /*  6.9→ nudged: metadata, still real text */

  /* header wordmark yellows */
  --butter:      #E6B84A;
  --lemon:       #EDD86A;

  /* one warm secondary spark (rare) */
  --tomato:      #B4471F;   /* fill/large only */
  --tomato-text: #9E3E1B;   /* readable tomato when it must be text */

  /* rules */
  --rule:        color-mix(in srgb, var(--ink) 15%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink) 26%, transparent);
  --shadow:      64 22% 40%;

  /* frame */
  --frame-w: 12px;
  --frame-r: 26px;

  --display:"Fraunces","Hoefler Text",Georgia,serif;
  --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ui:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono","Courier New",monospace;
  --wonk:"SOFT" 25,"WONK" 1;

  --measure: 64ch;
  --page: 72rem;

  /* ---- Course palette: each course a {tint, deep(text), border} triad ---- */
  --c-mains-t:#E4E7D2;   --c-mains-d:#324D22;   --c-mains-b:#BAC69F;
  --c-sides-t:#EFE2CB;   --c-sides-d:#6E4712;   --c-sides-b:#D6BF93;
  --c-sweets-t:#EEDEE0;  --c-sweets-d:#812F49;  --c-sweets-b:#D6B4BC;
  --c-salads-t:#E7E9CF;  --c-salads-d:#455117;  --c-salads-b:#C3C899;
  --c-breakfast-t:#F0E4CA;--c-breakfast-d:#734D17;--c-breakfast-b:#DBC28E;
  --c-drinks-t:#DBE8E1;  --c-drinks-d:#1C4A40;  --c-drinks-b:#AAC9BE;
  --c-party-t:#E9DEE8;   --c-party-d:#57284F;   --c-party-b:#CBB4C7;
  --c-preserves-t:#F1DFD3;--c-preserves-d:#853419;--c-preserves-b:#DDB6A2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --green:#7FA968; --green-deep:#96BE80; --green-dark:#0F1A0B;
    --cream:#14170F; --paper:#1D2016; --sunk:#0E110A; --edge:#333A28;
    --ink:#ECE7D6; --ink-soft:#CFC9B4; --ink-faint:#A7A088;
    --butter:#E6B84A; --lemon:#EDD86A;
    --tomato:#E38A63; --tomato-text:#F0A488;
    --rule:color-mix(in srgb, var(--ink) 18%, transparent);
    --rule-strong:color-mix(in srgb, var(--ink) 30%, transparent);
    --shadow:0 0% 0%;
    /* course tints on dark: deep translucent bg + lifted text */
    --c-mains-t:#26331C;   --c-mains-d:#A8CE8C;   --c-mains-b:#3C5230;
    --c-sides-t:#332816;   --c-sides-d:#E4BA76;  --c-sides-b:#4E4026;
    --c-sweets-t:#331F27;  --c-sweets-d:#E7A0B4;  --c-sweets-b:#4E313B;
    --c-salads-t:#2A311A;  --c-salads-d:#BCCB86;  --c-salads-b:#43502C;
    --c-breakfast-t:#33280F;--c-breakfast-d:#E6BE7C;--c-breakfast-b:#4E4021;
    --c-drinks-t:#1A2E2A;  --c-drinks-d:#84C7B4;  --c-drinks-b:#2E4842;
    --c-party-t:#2E2130;   --c-party-d:#D9A6CE;   --c-party-b:#48354A;
    --c-preserves-t:#33221A;--c-preserves-d:#E5A183;--c-preserves-b:#4E3529;
  }
}

:root[data-theme="dark"]{
  --green:#7FA968; --green-deep:#96BE80; --green-dark:#0F1A0B;
  --cream:#14170F; --paper:#1D2016; --sunk:#0E110A; --edge:#333A28;
  --ink:#ECE7D6; --ink-soft:#CFC9B4; --ink-faint:#A7A088;
  --butter:#E6B84A; --lemon:#EDD86A; --tomato:#E38A63; --tomato-text:#F0A488;
  --rule:color-mix(in srgb, var(--ink) 18%, transparent);
  --rule-strong:color-mix(in srgb, var(--ink) 30%, transparent);
  --shadow:0 0% 0%;
  --c-mains-t:#26331C;--c-mains-d:#A8CE8C;--c-mains-b:#3C5230;
  --c-sides-t:#332816;--c-sides-d:#E4BA76;--c-sides-b:#4E4026;
  --c-sweets-t:#331F27;--c-sweets-d:#E7A0B4;--c-sweets-b:#4E313B;
  --c-salads-t:#2A311A;--c-salads-d:#BCCB86;--c-salads-b:#43502C;
  --c-breakfast-t:#33280F;--c-breakfast-d:#E6BE7C;--c-breakfast-b:#4E4021;
  --c-drinks-t:#1A2E2A;--c-drinks-d:#84C7B4;--c-drinks-b:#2E4842;
  --c-party-t:#2E2130;--c-party-d:#D9A6CE;--c-party-b:#48354A;
  --c-preserves-t:#33221A;--c-preserves-d:#E5A183;--c-preserves-b:#4E3529;
}

:root[data-theme="light"]{
  --green:#3B5A2A; --green-deep:#28401C; --green-dark:#1D3315;
  --cream:#EDE7D3; --paper:#F7F2E3; --sunk:#E5DCC2; --edge:#D8CDB0;
  --ink:#23241A; --ink-soft:#454231; --ink-faint:#5B553F;
  --butter:#E6B84A; --lemon:#EDD86A; --tomato:#B4471F; --tomato-text:#9E3E1B;
  --rule:color-mix(in srgb, var(--ink) 15%, transparent);
  --rule-strong:color-mix(in srgb, var(--ink) 26%, transparent);
  --shadow:64 22% 40%;
  --c-mains-t:#E4E7D2;--c-mains-d:#324D22;--c-mains-b:#BAC69F;
  --c-sides-t:#EFE2CB;--c-sides-d:#6E4712;--c-sides-b:#D6BF93;
  --c-sweets-t:#EEDEE0;--c-sweets-d:#812F49;--c-sweets-b:#D6B4BC;
  --c-salads-t:#E7E9CF;--c-salads-d:#455117;--c-salads-b:#C3C899;
  --c-breakfast-t:#F0E4CA;--c-breakfast-d:#734D17;--c-breakfast-b:#DBC28E;
  --c-drinks-t:#DBE8E1;--c-drinks-d:#1C4A40;--c-drinks-b:#AAC9BE;
  --c-party-t:#E9DEE8;--c-party-d:#57284F;--c-party-b:#CBB4C7;
  --c-preserves-t:#F1DFD3;--c-preserves-d:#853419;--c-preserves-b:#DDB6A2;
}

/* course helper: set --ct/--cd/--cb from a course class */
.k-mains{--ct:var(--c-mains-t);--cd:var(--c-mains-d);--cb:var(--c-mains-b)}
.k-sides{--ct:var(--c-sides-t);--cd:var(--c-sides-d);--cb:var(--c-sides-b)}
.k-sweets{--ct:var(--c-sweets-t);--cd:var(--c-sweets-d);--cb:var(--c-sweets-b)}
.k-salads{--ct:var(--c-salads-t);--cd:var(--c-salads-d);--cb:var(--c-salads-b)}
.k-breakfast{--ct:var(--c-breakfast-t);--cd:var(--c-breakfast-d);--cb:var(--c-breakfast-b)}
.k-drinks{--ct:var(--c-drinks-t);--cd:var(--c-drinks-d);--cb:var(--c-drinks-b)}
.k-party{--ct:var(--c-party-t);--cd:var(--c-party-d);--cb:var(--c-party-b)}
.k-preserves{--ct:var(--c-preserves-t);--cd:var(--c-preserves-d);--cb:var(--c-preserves-b)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--green)}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-optical-sizing:auto;
  font-size:1.3125rem;   /* 21px — a hair larger so the sans body reads easily at any age */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* the rounded green frame around the whole site */
  border:var(--frame-w) solid var(--green);
  border-radius:var(--frame-r);
  min-height:100vh;
}
@media (max-width:640px){ :root{--frame-w:7px;--frame-r:16px} }

.skip{position:absolute;left:-9999px;background:var(--green-deep);color:var(--paper);font-family:var(--ui);font-weight:600;padding:.7rem 1.1rem;z-index:200;border-radius:8px}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--page);margin:0 auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}

/* Sentinel that drives the shrink-on-scroll header (see app.js). 1px of
   real height so IntersectionObserver tracks it; visually nothing. */
#top-sentinel{height:1px;margin-bottom:-1px}

/* =========================================================
   Header / menu — dark green bar, the wordmark lives here.
   The only title on the page: large and airy at the top, then
   it shrinks into a compact bar and sticks as you scroll.
   `--menu-pad` and `--brand-size` interpolate between the two
   states; the .is-stuck class (toggled from app.js) triggers it.
   ========================================================= */
.menu{
  --menu-pad: clamp(1.75rem, 6vw, 3.5rem);
  --brand-size: clamp(2.4rem, 7vw, 4.5rem);
  position:sticky;
  top:0;
  z-index:100;
  background:var(--green-deep);
  color:var(--paper);
  border-radius:calc(var(--frame-r) - var(--frame-w)) calc(var(--frame-r) - var(--frame-w)) 0 0;
  transition:box-shadow .3s ease;
}
/* Once the page is scrolled, tighten padding, shrink the wordmark,
   and drop a soft shadow so the bar reads as lifted above the page. */
.menu.is-stuck{
  --menu-pad: .7rem;
  --brand-size: clamp(1.4rem, 3vw, 1.9rem);
  /* once the frame's rounded top has scrolled away, the bar spans flush */
  border-radius:0;
  box-shadow:0 6px 20px -10px hsl(var(--shadow)/.55);
}
.menu-inner{display:flex;align-items:center;justify-content:flex-start;gap:1rem 1.5rem;padding-block:var(--menu-pad);transition:padding .3s ease}
/* wordmark + tagline stack together at the left of the bar */
.brand-group{flex:0 0 auto;display:flex;flex-direction:column;gap:.35em}
/* the wordmark is the page's h1 — reset the heading, let .brand style it */
.brand-h1{margin:0;font-weight:inherit;line-height:1}
/* tagline sits directly under the wordmark; scales with --brand-size and
   fades/collapses once the bar tightens on scroll */
.brand-subtitle{
  margin:0;
  font-family:var(--ui);
  font-size:max(.62rem,calc(var(--brand-size) * .2));
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--butter);
  opacity:.85;
  line-height:1;
  transition:font-size .3s ease,opacity .3s ease,max-height .3s ease;
}
.menu.is-stuck .brand-subtitle{opacity:0;max-height:0;overflow:hidden}
/* Search lives in the logo bar, pinned to the right. On a dark green ground
   it needs a lighter treatment than the on-cream field below (set in Search). */
.menu .search{flex:0 1 22rem;margin-left:auto}
@media (max-width:560px){
  /* Too tight to share the bar — search drops to its own line under the brand. */
  .menu-inner{flex-wrap:wrap}
  .menu .search{flex:1 1 100%;margin-left:0}
}
.brand{
  font-family:var(--display);
  text-decoration:none;
  line-height:1;
  letter-spacing:-.03em;
  font-size:var(--brand-size);
  white-space:nowrap;
  font-variation-settings:"opsz" 144,var(--wonk);
  transition:font-size .3s ease;
}
.brand .l{font-style:italic;font-weight:500;color:var(--lemon)}
.brand .r{font-weight:800;color:var(--butter)}
@media (prefers-reduced-motion:reduce){
  .menu,.menu-inner,.brand,.brand-subtitle{transition:none}
}

/* =========================================================
   Masthead
   ========================================================= */
.masthead{padding-block:clamp(2rem,5vw,3.5rem) clamp(1.25rem,3vw,2rem)}
.eyebrow{margin:0 0 1rem;font-family:var(--ui);font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--green-deep);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--green);border-radius:2px}

/* light-context wordmark (green on cream) */
.wordmark{margin:0;font-family:var(--display);line-height:.82;letter-spacing:-.035em;font-variation-settings:"opsz" 144,var(--wonk)}
.wordmark .l{display:block;font-style:italic;font-weight:500;font-size:clamp(1.8rem,5vw,2.6rem);color:var(--green);letter-spacing:-.02em;margin-bottom:.04em}
.wordmark .r{display:block;font-weight:900;font-size:clamp(3.4rem,11vw,6.4rem);color:var(--green-deep)}

.lede{margin:1.4rem 0 0;max-width:none;font-size:1.22rem;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.lede b{color:var(--green-deep);font-weight:600}

.census{margin:clamp(1.5rem,4vw,2.5rem) 0 0;padding-top:1.4rem;border-top:2px solid var(--rule-strong);display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,3.5rem)}
.census div{display:grid;gap:.2rem}
.census dt{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.census dd{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.5vw,2.3rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--green-deep);font-variation-settings:var(--wonk)}

/* =========================================================
   Courses + Search — the sticky filter bar
   Course chips are the primary classifier; search sits beside
   them. The whole bar sticks just below the logo bar (whose live
   height app.js writes into --menu-h) so filtering stays in reach
   while the cards scroll underneath.
   ========================================================= */
.courses{
  position:sticky;
  top:var(--menu-h, 0px);
  z-index:90;
  background:color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1.5px solid var(--rule-strong);
}
/* When it detaches from the logo bar and floats over cards, lift it
   with a soft shadow. app.js toggles .is-stuck in step with the menu. */
.courses.is-stuck{box-shadow:0 8px 20px -12px hsl(var(--shadow)/.5)}
.courses-inner{padding-block:clamp(.7rem,1.6vw,.95rem)}
/* Every course chip is always visible — the row wraps onto as many rows as it
   needs and never scrolls, at any width. */
.course-row{display:flex;flex-wrap:wrap;gap:.55rem}
.course{font-family:var(--ui);font-weight:600;font-size:1rem;min-height:2.75rem;padding:.5rem 1.05rem;border-radius:100px;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;background:var(--ct);color:var(--cd);border:1.5px solid var(--cb);transition:transform .14s ease,box-shadow .14s ease}
.course .n{font-variant-numeric:tabular-nums;opacity:.72;font-size:.82rem}
.course:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px hsl(var(--shadow)/.4)}
.course[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--cd)}
/* "All" chip — neutral green */
.course.all{--ct:var(--paper);--cd:var(--green-deep);--cb:var(--edge)}
.course.all[aria-pressed="true"]{--ct:var(--green);--cd:#fff;--cb:var(--green);box-shadow:none}

/* =========================================================
   Shelf
   ========================================================= */
/* scroll-margin clears both compact sticky bars (collapsed logo bar + filter
   bar) so scrolling the shelf into view on search lands it just below them. */
main{display:block;scroll-margin-top:9.5rem}
.shelf-head{display:flex;align-items:end;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;padding-top:clamp(.5rem,2vw,1rem);margin-bottom:1.2rem}
.shelf-head-text{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.shelf-head h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.02em;font-variation-settings:var(--wonk)}
.shelf-count{font-family:var(--mono);font-size:.92rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Search ----------
   Broad search across every field of a recipe. Styled as a soft "well" that
   matches the course pills: bone paper, pill radius, green focus. Lives in the
   sticky filter bar beside the course chips (layout set in the Courses block). */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.search-field{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:.95rem;width:1.1rem;height:1.1rem;color:var(--ink-faint);pointer-events:none}
/* A cream field on the dark-green logo bar — reads as a writable surface
   against the green, pill-shaped to echo the course chips. */
.search-input{width:100%;min-height:2.6rem;padding:.5rem 2.5rem .5rem 2.7rem;font-family:var(--body);font-size:1.05rem;color:var(--ink);background:var(--paper);border:1.5px solid transparent;border-radius:100px;box-shadow:0 1px 3px hsl(0 0% 0% / .18);transition:border-color .14s ease,box-shadow .14s ease}
.search-input::placeholder{color:var(--ink-faint);font-style:italic;opacity:1}
.search-input:hover{border-color:var(--butter)}
/* Buttery focus ring — high-contrast against the green header. */
.search-input:focus-visible{outline:3px solid var(--butter);outline-offset:2px;border-color:var(--butter)}
.search-input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-clear{position:absolute;right:.45rem;width:1.9rem;height:1.9rem;display:grid;place-items:center;font-size:1.4rem;line-height:1;color:var(--ink-faint);background:transparent;border:0;border-radius:50%;cursor:pointer;transition:color .14s ease,background .14s ease}
.search-clear[hidden]{display:none}
.search-clear:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* Why this card surfaced in a search — deliberately quiet: a small green
   marker and a plain label under the note. Shown only when the match landed
   somewhere other than the title (the title explains itself). */
.card-match{margin:0;display:flex;align-items:center;gap:.5rem;font-family:var(--ui);font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--green-deep)}
.card-match-dot{flex:0 0 auto;width:.5rem;height:.5rem;border-radius:50%;background:currentColor}

.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));gap:1.1rem;align-items:start;padding-bottom:4rem}

.card{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.25rem 1.4rem;text-align:left;background:var(--paper);border:1.5px solid var(--edge);border-radius:14px;color:inherit;font:inherit;cursor:pointer;box-shadow:4px 4px 0 var(--sunk);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--cb);box-shadow:5px 8px 0 color-mix(in srgb,var(--cd) 22%,var(--sunk))}
.card-tag{align-self:flex-start;font-family:var(--ui);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.26rem .7rem;border-radius:100px;background:var(--ct);color:var(--cd);border:1px solid var(--cb)}
.card-title{margin:0;font-family:var(--display);font-weight:700;font-size:1.42rem;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;font-variation-settings:"SOFT" 40,"WONK" 1}
.card-note{margin:0;font-size:1.04rem;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.card-foot{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;font-family:var(--ui);font-size:.8rem;color:var(--ink-faint)}
.card-foot .time{font-variant-numeric:tabular-nums;white-space:nowrap}
.card-origin{font-family:var(--display);font-style:italic;font-weight:500;font-size:1rem;color:var(--green-deep);opacity:.85;text-align:right;font-variation-settings:"SOFT" 50,"WONK" 1}
.card .flags{display:flex;gap:.5rem;flex-wrap:wrap;font-family:var(--ui);font-size:.72rem;font-weight:600}
.flag{color:var(--green-deep)}
.flag-safety{color:var(--tomato-text)}

.empty{grid-column:1/-1;text-align:center;color:var(--ink-faint);font-family:var(--ui);font-size:1.05rem;padding:4rem 0}

/* =========================================================
   Reader
   ========================================================= */
.reader[hidden]{display:none}
/* The reader is a full-screen modal and must sit above every sticky bar —
   the logo bar (z-index:100) and the courses/search filter bar (z-index:90).
   Below them, those bars punched through the overlay: the topbar showed above
   the panel, the filter bar sliced across the recipe, and both hid the close (×). */
.reader{position:fixed;inset:0;z-index:120;display:grid;place-items:end center}
.reader-scrim{position:absolute;inset:0;background:color-mix(in srgb,#0E140A 58%,transparent);backdrop-filter:blur(3px);animation:fade .2s ease}
.reader-panel{position:relative;width:min(78rem,100%);height:min(95vh,100%);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;background:var(--cream);border-radius:18px 18px 0 0;border-top:6px solid var(--cd,var(--green));box-shadow:0 -10px 50px -14px hsl(var(--shadow)/.4);animation:rise .3s cubic-bezier(.22,.68,.32,1)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(2.5rem);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .reader-scrim,.reader-panel{animation:none}
  .reader-panel{scroll-behavior:auto}
  .card,.course{transition:none}
  .card:hover,.card:focus-visible{transform:none}
}
.reader-close{position:sticky;top:0;float:right;margin:.7rem .7rem 0 0;z-index:6;width:3rem;height:3rem;display:grid;place-items:center;font-size:1.6rem;line-height:1;background:var(--paper);color:var(--ink);border:1.5px solid var(--edge);border-radius:50%;cursor:pointer;box-shadow:0 2px 10px -3px hsl(var(--shadow)/.3)}
.reader-close:hover{color:#fff;background:var(--green);border-color:var(--green)}
.reader-body{padding:clamp(1.2rem,5vw,3.25rem);padding-top:clamp(1.4rem,3vw,2rem)}

/* ---- Section tabs: a sticky, jump-to bar for the recipe's sections ---- */
.r-tabs{position:sticky;top:0;z-index:5;display:flex;gap:.4rem;margin:1.75rem 0 0;padding:.55rem 3.4rem .6rem 0;
  background:linear-gradient(var(--cream) 78%,color-mix(in srgb,var(--cream) 0%,transparent));
  overflow-x:auto;scrollbar-width:none;scroll-padding-inline:.2rem;-webkit-overflow-scrolling:touch}
.r-tabs::-webkit-scrollbar{display:none}
.r-tab{flex:0 0 auto;font-family:var(--ui);font-weight:600;font-size:.95rem;min-height:2.6rem;padding:.4rem 1rem;
  border-radius:100px;cursor:pointer;white-space:nowrap;
  background:var(--paper);color:var(--ink-soft);border:1.5px solid var(--edge);
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.r-tab:hover{border-color:var(--cb);color:var(--cd)}
.r-tab[aria-current="true"]{background:var(--cd);color:var(--paper);border-color:var(--cd)}
@media (prefers-reduced-motion:reduce){ .r-tab{transition:none} }

.r-tag{align-self:flex-start;display:inline-block;font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .8rem;border-radius:100px;background:var(--ct);color:var(--cd);border:1px solid var(--cb);margin:0 0 .8rem}
.r-title{margin:0 0 .4rem;font-family:var(--display);font-weight:700;font-size:clamp(2.15rem,5.5vw,3.3rem);line-height:1.02;letter-spacing:-.025em;text-wrap:balance;max-width:22ch;font-variation-settings:"opsz" 144,var(--wonk)}
.r-origin{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.2rem;color:var(--green-deep);font-variation-settings:"SOFT" 50,"WONK" 1}
.r-source{margin:.3rem 0 0;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.08rem;color:var(--ink-soft);font-variation-settings:"SOFT" 50,"WONK" 1}
.r-note{margin:1.2rem 0 0;max-width:var(--measure);font-size:1.1rem;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}

.r-stats{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.75rem 0;padding:1.1rem 1.25rem;background:var(--paper);border:1px solid var(--edge);border-radius:10px}
.r-stats div{display:grid;gap:.2rem}
.r-stats dt{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.r-stats dd{margin:0;font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1;font-variant-numeric:tabular-nums;font-variation-settings:var(--wonk)}

.caution{display:flex;gap:.8rem;margin:1.4rem 0;padding:1.1rem 1.3rem;background:color-mix(in srgb,var(--green) 10%,var(--paper));border-left:4px solid var(--green);border-radius:0 10px 10px 0;font-size:1.08rem;line-height:1.55;color:var(--ink-soft);max-width:var(--measure)}
.caution strong{display:block;margin-bottom:.35rem;font-family:var(--ui);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}
.caution-safety{background:color-mix(in srgb,var(--tomato) 10%,var(--paper));border-left-color:var(--tomato)}
.caution-safety strong{color:var(--tomato-text)}

.r-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start;margin-top:1.5rem}
@media (max-width:1000px){ .r-grid{grid-template-columns:1fr} }
.r-col{min-width:0}
h3.r-head{margin:0 0 1rem;font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);padding-bottom:.5rem;border-bottom:2px solid var(--rule-strong)}
/* clear the sticky tab bar when a section is scrolled to */
.r-section{scroll-margin-top:4rem}
.r-section:focus{outline:none}
.r-section + .r-section{margin-top:2.5rem}
.sub-label{margin:1.5rem 0 .6rem;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.2rem}
.sub-label:first-child{margin-top:0}

.ing{list-style:none;margin:0;padding:0}
.ing li{display:grid;grid-template-columns:minmax(6.5rem,auto) 1fr;gap:.3rem 1.2rem;padding:.75rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.ing .qty{font-family:var(--mono);font-size:1.12rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--green-deep);letter-spacing:-.01em}
.ing .name{line-height:1.45}
.ing .detail{grid-column:2;font-size:1.02rem;color:var(--ink-soft);line-height:1.45}
.ing .opt{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--ink-faint);border-radius:100px;padding:.1rem .55rem;margin-left:.5rem;white-space:nowrap}

.steps{margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:2.4rem 1fr;gap:1.2rem;padding:1rem 0;max-width:var(--measure);line-height:1.65;text-wrap:pretty;border-bottom:1px solid var(--rule)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(step);display:grid;place-items:center;width:2rem;height:2rem;font-family:var(--ui);font-size:1rem;font-weight:600;background:var(--green);color:#fff;border-radius:50%;font-variant-numeric:tabular-nums}

.uncertain-mark{color:var(--tomato-text);font-size:1.05em;cursor:help;vertical-align:.02em}
.ing li.is-uncertain,.steps li.is-uncertain{background:color-mix(in srgb,var(--tomato) 8%,transparent);border-radius:5px}
.ing li.is-uncertain{padding-inline:.5rem;margin-inline:-.5rem}
.uncertain-note{display:block;grid-column:2;margin-top:.3rem;font-family:var(--mono);font-size:.9rem;line-height:1.45;color:var(--tomato-text)}

.tips{margin:0;padding-left:1.1rem;max-width:var(--measure)}
.tips li{padding:.3rem 0;color:var(--ink-soft);font-size:1.08rem;line-height:1.5}
.nutrition{margin:0;max-width:var(--measure);font-family:var(--mono);font-size:1rem;line-height:1.55;color:var(--ink-faint)}

.scans{position:sticky;top:1rem;display:grid;gap:1rem}
@media (max-width:1000px){ .scans{position:static;max-width:42rem} }
.scan{display:block;margin:0;width:100%;border:1px solid var(--edge);border-radius:10px;background:var(--paper);padding:.55rem;cursor:zoom-in;box-shadow:0 2px 10px -5px hsl(var(--shadow)/.25);transition:box-shadow .16s ease,border-color .16s ease}
.scan:hover{border-color:var(--green);box-shadow:0 8px 22px -8px hsl(var(--shadow)/.35)}
.scan img{display:block;width:100%;height:auto;border-radius:4px}
.scan figcaption{font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);padding-top:.5rem;text-align:center}

.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,#0A0D06 90%,transparent);display:grid;place-items:center;padding:2rem;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}

/* =========================================================
   Colophon
   ========================================================= */
.colophon{border-top:2px solid var(--rule-strong);padding-block:2.5rem 3rem;margin-top:1.5rem}
.colophon-inner{display:grid;gap:1rem;max-width:60ch;margin:0 auto;text-align:center}
.colophon .mark{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--green-deep)}
.colophon p{margin:0;font-size:1.06rem;line-height:1.6;color:var(--ink-faint);text-wrap:pretty}

@media print{
  body{border:none}
  .menu,.masthead,.courses,.colophon,.reader-close,.scans,.shelf-head{display:none}
  .reader,.reader-panel{position:static;height:auto;overflow:visible;box-shadow:none;border:none}
  .reader-scrim{display:none}
}