/* ===========================================================================
   Shoreline Nutrition — The Kitchen Atlas
   One stylesheet, cached once, used by every page.

   The design idea: this is a field guide to food, not a wellness brochure.
   Foods are specimens. Each carries its region, season, practice and name in
   its own writing system — and that name, set very large, IS the artwork.
   No stock photography required, and nothing looks like anyone else's site.

   Every text/background pair below meets WCAG AA (verified, ≥5.9:1).
   =========================================================================== */

:root{
  /* ground — cream taken from the logo wordmark */
  --paper:#f6f1e6;
  --surface:#fffdf7;
  --ink:#0d2732;
  --muted:#4f5f66;
  --line:#e3dccd;
  --line-strong:#cbc0ab;

  /* brand — sampled straight from the logo artwork */
  --navy:#043044;          /* the logo background, exactly */
  --navy-deep:#02202d;
  --navy-link:#0f4a5e;
  --gold:#d1a768;          /* the sun in the mark */
  --cream:#f2ece1;         /* the wordmark */

  /* the practice colours, retuned to sit with navy and gold */
  --jade:#12564d;
  --jade-deep:#02202d;
  --jade-wash:#e4eeeb;
  --turmeric:#8a5f1c;
  --turmeric-bright:#a8762a;
  --turmeric-wash:#f6eddc;
  --rosehip:#7d3a44;
  --rosehip-wash:#f4e8e9;
  --moss:#45552a;
  --moss-wash:#eaeee0;
  --slate:#3a5566;
  --slate-wash:#e7ecef;
  --ember:#d1a768;

  --r:4px;          /* the atlas is squared off, not rounded */
  --r-plate:2px;
  --sh:0 1px 2px rgba(36,25,15,.05);
  --sh-md:0 10px 30px rgba(36,25,15,.10);
  --sh-lg:0 24px 60px rgba(36,25,15,.17);

  --maxw:1180px;
  --read:68ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.disp{
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-weight:400;line-height:1.1;letter-spacing:-.012em;margin:0;
  text-wrap:balance;
}
p{margin:0 0 1em}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--turmeric)}
hr{border:none;border-top:1px solid var(--line);margin:34px 0}
em{font-style:italic}

/* the monospace field-label voice, used for data only */
.mono,.kicker,.fieldname{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--turmeric-bright);outline-offset:2px;border-radius:2px;
}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;font-weight:700}
.skip:focus{left:0}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 24px}
section{padding:clamp(52px,7vw,96px) 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:none;cursor:pointer;font-family:'Karla',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.02em;padding:14px 26px;border-radius:2px;text-decoration:none;
  transition:background .18s,color .18s,box-shadow .18s,transform .18s;
}
@media (prefers-reduced-motion:no-preference){.btn:hover{transform:translateY(-2px)}}
.btn-primary{background:var(--navy-link);color:#fff;box-shadow:0 5px 16px rgba(4,48,68,.26)}
.btn-primary:hover{background:var(--navy);color:#fff}
.btn-gold{background:var(--turmeric);color:#fff;box-shadow:0 5px 16px rgba(140,84,6,.24)}
.btn-gold:hover{background:#733f03;color:#fff}
.btn-ink{background:var(--navy);color:#fff}
.btn-ink:hover{background:var(--navy-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--jade);color:var(--jade)}
.btn-onband{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff}
.btn-onband:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--paper);color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ------------------------------------------------------------ header/nav */
.topbar{background:var(--navy-deep);color:#bfd0d8;text-align:center;font-size:13px;padding:9px 16px;letter-spacing:.01em}
.topbar a{color:var(--ember)}
.topbar b{color:var(--ember)}

header.site{position:sticky;top:0;z-index:60;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.10)}
.nav{display:flex;align-items:center;gap:26px;padding:12px 0}
.brand{display:flex;align-items:center;margin-right:auto;text-decoration:none;min-width:0;padding:4px 0}
.brand img{height:38px;width:auto;display:block}
.links{display:flex;gap:24px;font-size:15px;font-weight:600}
.links a{color:#cfdde3;text-decoration:none;padding:5px 0;border-bottom:2px solid transparent}
.links a:hover{color:#fff;border-bottom-color:var(--ember)}
.links a[aria-current="page"]{color:#fff;border-bottom-color:var(--ember)}
.nav-r{display:flex;align-items:center;gap:11px}
.menu-btn{display:none;width:44px;height:44px;border-radius:3px;border:1px solid rgba(255,255,255,.24);background:transparent;color:#fdf9f1;font-size:19px;cursor:pointer;align-items:center;justify-content:center;flex:none}

@media(max-width:1000px){
  .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);padding:6px 0 12px;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 22px 44px rgba(0,0,0,.4)}
  .links.open{display:flex}
  .links a{padding:13px 24px;border-bottom:none;border-left:3px solid transparent}
  .links a[aria-current="page"]{border-left-color:var(--ember)}
  .menu-btn{display:inline-flex}
}
@media(max-width:430px){
  .nav{gap:8px}
  .brand img{height:29px}
  .nav-r .btn{display:none}
}

/* ------------------------------------------------------------------ hero */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:5px;
  background:linear-gradient(90deg,var(--jade) 0 20%,var(--rosehip) 20% 40%,var(--turmeric-bright) 40% 60%,var(--moss) 60% 80%,var(--slate) 80% 100%);
}
.hero .wrap{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;padding-top:clamp(46px,6vw,74px);padding-bottom:clamp(52px,7vw,84px)}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:34px}}
.hero h1{font-size:clamp(40px,6.2vw,74px);color:#fff;line-height:1.02;margin:18px 0 0}
.hero h1 em{color:var(--ember)}
.hero .sub{font-size:clamp(16.5px,1.5vw,19.5px);color:#c9d8df;max-width:36em;margin:22px 0 28px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .kicker{color:var(--ember);display:block;margin-bottom:2px}

/* portrait frame — the slot for Mellissa's photo */
.portrait{margin:0}
.portrait .frame{
  position:relative;background:var(--navy-deep);border:1px solid rgba(255,255,255,.18);
  aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;
}
.portrait .frame img{width:100%;height:100%;object-fit:cover}
.portrait .placeholder{text-align:center;padding:30px;color:#a9bdb2}
.portrait .placeholder .mono{display:block;color:var(--ember);margin-bottom:12px}
.portrait .placeholder p{font-size:14.5px;line-height:1.6;margin:0;max-width:24em}
.portrait figcaption{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#93a9b3;margin-top:12px;
}

/* --------------------------------------------------------- practice rail */
.rail{background:var(--surface);border-bottom:1px solid var(--line)}
.rail .wrap{display:flex;flex-wrap:wrap;gap:0;padding:0}
.rail a{
  flex:1 1 auto;min-width:150px;padding:20px 22px;text-decoration:none;color:var(--ink);
  border-right:1px solid var(--line);transition:background .18s;
}
.rail a:last-child{border-right:none}
.rail a:hover{background:var(--paper)}
.rail .k{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}
.rail .t{font-family:'Newsreader',Georgia,serif;font-size:20px;display:block;line-height:1.15}
.rail .n{font-size:13.5px;color:var(--muted)}
.rail a.ferment .k{color:var(--jade)} .rail a.infuse .k{color:var(--rosehip)}
.rail a.simmer .k{color:var(--turmeric)} .rail a.forage .k{color:var(--moss)}
.rail a.everyday .k{color:var(--slate)}
@media(max-width:760px){.rail a{flex-basis:50%;border-bottom:1px solid var(--line)}}

/* -------------------------------------------------------------- sec-head */
.sec-top{margin-bottom:36px;max-width:44em}
.sec-top .kicker{color:var(--turmeric);display:block;margin-bottom:14px}
.sec-top h2{font-size:clamp(29px,3.8vw,46px)}
.sec-top p{color:var(--muted);margin:14px 0 0;font-size:17.5px}
.sec-top.center{margin-left:auto;margin-right:auto;text-align:center}
.rule{height:1px;background:var(--line-strong);margin:0 0 36px}

/* -------------------------------------------------- the specimen plate
   The signature component. A food's name in its own script is the artwork. */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.plates{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.plates{grid-template-columns:1fr}}

a.plate{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-plate);
  overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;
}
@media (prefers-reduced-motion:no-preference){a.plate:hover{transform:translateY(-4px)}}
a.plate:hover{box-shadow:var(--sh-lg);border-color:var(--line-strong)}

.plate .face{
  position:relative;aspect-ratio:5/3;display:grid;place-items:center;padding:18px;overflow:hidden;
}
.plate .face .glyph{
  font-family:'Newsreader',Georgia,serif;color:#fff;line-height:1;text-align:center;
  font-size:clamp(44px,7vw,66px);letter-spacing:.02em;
}
.plate .face .glyph.latin{font-style:italic;font-size:clamp(24px,3.4vw,32px);line-height:1.2;max-width:11ch}
.plate .face .corner{
  position:absolute;top:11px;left:13px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.82);
}
.plate .face .num{
  position:absolute;bottom:11px;right:13px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.1em;color:rgba(255,255,255,.7);
}
.plate .body{padding:20px 21px 22px;display:flex;flex-direction:column;flex:1}
.plate h3{font-size:23px;margin-bottom:5px}
.plate .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.plate .blurb{font-size:15px;color:var(--muted);margin:0 0 15px;flex:1}
.plate .go{font-weight:700;font-size:14.5px;color:var(--jade)}

/* practice colours drive the plate face */
.p-ferment .face{background:var(--jade)}
.p-infuse  .face{background:var(--rosehip)}
.p-simmer  .face{background:var(--turmeric-bright)}
.p-forage  .face{background:var(--moss)}
.p-everyday .face{background:var(--slate)}
.p-ferment .go{color:var(--jade)} .p-infuse .go{color:var(--rosehip)}
.p-simmer .go{color:var(--turmeric)} .p-forage .go{color:var(--moss)}
.p-everyday .go{color:var(--slate)}

/* ------------------------------------------------------- the entry plate */
.entryhead{color:#fff;position:relative;overflow:hidden}
.entryhead.p-ferment{background:var(--jade)} .entryhead.p-infuse{background:var(--rosehip)}
.entryhead.p-simmer{background:var(--turmeric)} .entryhead.p-forage{background:var(--moss)}
.entryhead.p-everyday{background:var(--slate)}
.entryhead .wrap{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding-top:clamp(34px,4.6vw,56px);padding-bottom:clamp(34px,4.6vw,56px)}
@media(max-width:820px){.entryhead .wrap{grid-template-columns:1fr;gap:20px}}
.entryhead .crumbs{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:16px}
.entryhead .crumbs a{color:rgba(255,255,255,.92)}
.entryhead h1{color:#fff;font-size:clamp(38px,6vw,66px);margin:0}
.entryhead .native{font-family:'Newsreader',Georgia,serif;font-size:clamp(52px,9vw,104px);line-height:1;color:rgba(255,255,255,.94);text-align:right}
.entryhead .native.latin{font-style:italic;font-size:clamp(22px,3vw,34px);max-width:12ch;line-height:1.2}
.entryhead .tagline{color:rgba(255,255,255,.9);font-size:18px;margin:14px 0 0;max-width:38em}

/* the data block */
.specdata{background:var(--surface);border-bottom:1px solid var(--line)}
.specdata dl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0}
@media(max-width:900px){.specdata dl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.specdata dl{grid-template-columns:1fr}}
.specdata .cell{padding:18px 20px;border-right:1px solid var(--line)}
.specdata .cell:last-child{border-right:none}
@media(max-width:900px){.specdata .cell{border-bottom:1px solid var(--line)}}
.specdata dt{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.specdata dd{margin:0;font-size:15.5px;line-height:1.4}
.specdata dd em{font-style:italic;color:var(--muted)}

/* ----------------------------------------------------------------- prose */
.prose{font-size:17.5px;color:#332618;max-width:var(--read)}
.prose .lede{font-size:21px;line-height:1.55;color:var(--ink);font-family:'Newsreader',Georgia,serif}
.prose h2{font-size:clamp(25px,3vw,34px);margin:42px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:'Karla',sans-serif;font-size:18px;font-weight:700;letter-spacing:.01em;margin:30px 0 8px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1em}
.prose li{margin-bottom:8px}
.prose blockquote{border-left:3px solid var(--turmeric-bright);padding:4px 0 4px 20px;margin:24px 0;font-family:'Newsreader',Georgia,serif;font-size:20px;font-style:italic;color:var(--muted)}
.prose table{border-collapse:collapse;width:100%;font-size:15.5px;margin:22px 0}
.prose th,.prose td{border:1px solid var(--line);padding:10px 13px;text-align:left}
.prose th{background:var(--turmeric-wash);font-weight:700}
.tablewrap{overflow-x:auto}

/* ------------------------------------------------------------- the recipe */
.recipe{background:var(--surface);border:1px solid var(--line-strong);border-top:4px solid var(--turmeric-bright);padding:clamp(24px,3.4vw,36px);margin:36px 0}
.recipe .kicker{color:var(--turmeric);display:block;margin-bottom:10px}
.recipe h2{margin:0 0 4px!important;font-size:clamp(24px,3vw,32px)}
.recipe .yield{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.recipe .cols{display:grid;grid-template-columns:1fr 1.5fr;gap:32px}
@media(max-width:760px){.recipe .cols{grid-template-columns:1fr;gap:22px}}
.recipe h3{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.recipe ul{list-style:none;padding:0;margin:0;font-size:16px}
.recipe ul li{padding:6px 0;border-bottom:1px dotted var(--line)}
.recipe ol{padding-left:20px;margin:0;font-size:16.5px}
.recipe ol li{margin-bottom:12px;padding-left:4px}

/* --------------------------------------------------------------- callouts */
.note{background:var(--jade-wash);border-left:4px solid var(--jade);padding:18px 22px;margin:28px 0;font-size:16px}
.note b{color:var(--jade)}
.note.warn{background:var(--turmeric-wash);border-left-color:var(--turmeric)}
.note.warn b{color:var(--turmeric)}
.note.danger{background:var(--rosehip-wash);border-left-color:var(--rosehip)}
.note.danger b{color:var(--rosehip)}
.note p:last-child{margin-bottom:0}
.note .kicker{display:block;margin-bottom:8px}

/* ------------------------------------------------------------------ band */
.band{background:var(--navy);color:#fff}
.band-inner{padding:clamp(38px,5.5vw,72px) 0;text-align:center}
.band h2{color:#fff;font-size:clamp(28px,3.8vw,44px);max-width:18em;margin:0 auto}
.band p{color:#c3d2d9;max-width:40em;margin:16px auto 26px;font-size:17px}
.band .kicker{color:var(--ember);display:block;margin-bottom:14px}

/* ------------------------------------------------------------ page heads */
.phead{background:var(--navy);color:#fff;padding:clamp(46px,6vw,80px) 0;position:relative}
.phead::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--jade),var(--turmeric-bright),var(--rosehip))}
.phead .kicker{color:var(--ember);display:block;margin-bottom:14px}
.phead h1{color:#fff;font-size:clamp(34px,5vw,58px);margin:0;max-width:17em}
.phead p{color:#c3d2d9;max-width:44em;margin:18px 0 0;font-size:17.5px}
.phead .crumbs{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#93a9b3;margin-bottom:14px}
.phead .crumbs a{color:#bccdd5}

/* ----------------------------------------------------------------- cards */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-plate);padding:26px 24px}
.card h3{font-size:21px;margin-bottom:9px}
.card p{font-size:16px;color:var(--muted);margin:0}
.card .kicker{color:var(--turmeric);display:block;margin-bottom:11px}
a.card{text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s;display:block}
@media (prefers-reduced-motion:no-preference){a.card:hover{transform:translateY(-4px)}}
a.card:hover{box-shadow:var(--sh-lg);border-color:var(--line-strong)}
a.card .go{display:inline-block;margin-top:14px;font-weight:700;font-size:14.5px;color:var(--navy-link)}

/* numbered step cards */
.card .step{font-family:'Newsreader',Georgia,serif;font-size:34px;color:var(--turmeric-bright);line-height:1;display:block;margin-bottom:10px}

/* ------------------------------------------------------- service pricing */
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-plate);padding:28px 26px;display:flex;flex-direction:column}
.svc.featured{border:2px solid var(--navy-link)}
.svc .flag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--navy-link);padding:5px 12px;margin-bottom:15px;align-self:flex-start}
.svc h3{font-size:25px;margin-bottom:4px}
.svc .price{font-family:'Newsreader',Georgia,serif;font-size:36px;color:var(--ink);margin:10px 0 4px;line-height:1}
.svc .price span{font-size:15px;font-family:'Karla',sans-serif;color:var(--muted)}
.svc .lead{color:var(--muted);font-size:16px;margin:8px 0 18px}
.svc ul{list-style:none;padding:0;margin:0 0 24px;font-size:16px}
.svc ul li{padding:7px 0 7px 26px;position:relative;color:#332618;border-bottom:1px dotted var(--line)}
.svc ul li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:2px solid var(--turmeric-bright);border-bottom:2px solid var(--turmeric-bright);transform:rotate(-45deg)}
.svc .foot{margin-top:auto}

/* ----------------------------------------------------------------- forms */
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
.field .hint{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:3px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field input[type=password],.field input[type=date],.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:2px;
  font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--jade);outline:3px solid rgba(31,92,74,.25);outline-offset:0}
.check{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;margin-bottom:12px;cursor:pointer}
.check input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--jade)}
fieldset{border:1px solid var(--line);border-radius:2px;padding:18px 20px;margin:0 0 22px}
legend{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:0 8px;color:var(--muted)}
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-plate);padding:clamp(24px,3.5vw,38px)}
.formstatus{padding:14px 18px;border-radius:2px;margin:16px 0;font-size:16px;display:none}
.formstatus.ok{display:block;background:var(--jade-wash);border:1px solid #a8c7ba;color:#164438}
.formstatus.err{display:block;background:var(--rosehip-wash);border:1px solid #dbaba4;color:#7d211d}

/* ---------------------------------------------------------------- footer */
footer.site{background:var(--navy);color:#b9c9d1;padding:56px 0 32px}
footer.site a{color:#b9c9d1;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
@media(max-width:880px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.fgrid{grid-template-columns:1fr}}
.fgrid .fh{font-family:'IBM Plex Mono',monospace;color:#fff;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:15px}
.fgrid nav a{display:block;padding:5px 0;font-size:15.5px}
.fbrand img{height:82px;width:auto;margin-bottom:16px;display:block}
.fbrand p{font-size:15.5px;max-width:31em;color:#9fb3bc}
.fbrand address{font-style:normal;font-size:15.5px;margin-top:13px;line-height:1.9}
.fbot{border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:22px;font-size:13.5px;color:#8fa4ae;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.disclaimer{background:var(--navy-deep);color:#8fa4ae;font-size:13px;padding:20px 0;line-height:1.7}

/* ---------------------------------------------------------- client area */
.clientbar{background:var(--navy-deep);color:#c9dae1;font-size:14.5px;padding:11px 0}
.clientbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.clientbar b{color:#fff}
.clientbar button{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:2px;padding:6px 15px;font-size:13.5px;font-family:inherit;cursor:pointer}
.clientbar button:hover{background:rgba(255,255,255,.15)}

.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.plist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.plist{grid-template-columns:1fr}}
.p-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-plate);padding:22px;display:flex;flex-direction:column}
.p-card .brandline{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--jade)}
.p-card h3{font-size:20px;margin:8px 0 6px}
.p-card .size{font-size:14.5px;color:var(--muted)}
.p-card .npn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);margin-top:10px}
.p-card .body{font-size:15.5px;color:#332618;margin:12px 0 14px;flex:1}
.p-card .approved{font-size:14.5px;background:var(--jade-wash);padding:12px 14px;margin-bottom:14px}
.p-card .approved b{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);margin-bottom:5px}
.p-card .cautions{font-size:14px;background:var(--turmeric-wash);padding:12px 14px;margin-bottom:14px}
.p-card .cautions b{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--turmeric);margin-bottom:5px}
.p-card .pricerow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px;padding-top:13px;border-top:1px solid var(--line)}
.p-card .pr{font-family:'Newsreader',Georgia,serif;font-size:27px}
.qtyrow{display:flex;align-items:center;gap:10px}
.qtyrow input{width:66px;padding:9px 10px;border:1.5px solid var(--line-strong);border-radius:2px;font-family:inherit;font-size:15px;text-align:center}
.reqbar{position:sticky;bottom:0;z-index:50;background:var(--navy);color:#fff;padding:14px 0;box-shadow:0 -8px 26px rgba(0,0,0,.24)}
.reqbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.reqbar .tot b{font-family:'Newsreader',Georgia,serif;font-size:23px}
.loginwrap{max-width:450px;margin:0 auto}
.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------ misc */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.4vw,56px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);background:var(--jade-wash);padding:5px 11px}
.faq details{background:var(--surface);border:1px solid var(--line);margin-bottom:11px}
.faq summary{padding:18px 21px;cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Newsreader',serif;font-size:24px;color:var(--turmeric-bright);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 21px 20px;font-size:16.5px;color:#332618}
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.imgframe{border:1px solid var(--line-strong);padding:9px;background:var(--surface)}

/* atlas filter controls */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.filters button{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line-strong);background:transparent;color:var(--muted);
  cursor:pointer;border-radius:2px;transition:.16s;
}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.count{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}


/* ===========================================================================
   Simplified layout — added for the rewrite.
   The homepage is now one piece of writing followed by four clear doors.
   =========================================================================== */

/* the homepage essay: generous, unhurried, one column */
.essay{max-width:34em;margin:0 auto}
.essay p{font-size:19px;line-height:1.72;color:#22333c;margin:0 0 1.15em}
.essay p.opening{font-size:23px;line-height:1.55;color:var(--ink);font-family:'Newsreader',Georgia,serif}
.essay h2{
  font-size:clamp(26px,3.2vw,36px);margin:56px 0 18px;
  padding-top:26px;border-top:1px solid var(--line);
}
.essay h2:first-child{margin-top:0;padding-top:0;border-top:none}
.essay .said{
  font-family:'Newsreader',Georgia,serif;font-size:clamp(23px,2.8vw,30px);
  line-height:1.35;color:var(--navy);margin:14px 0 0;
}
@media(max-width:640px){.essay p{font-size:17.5px}.essay p.opening{font-size:20px}}

/* the philosophy line, given room to land */
.pullquote{
  margin:60px 0;padding:44px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  text-align:center;
}
.pullquote p{
  font-family:'Newsreader',Georgia,serif;font-style:italic;
  font-size:clamp(25px,3.6vw,38px);line-height:1.28;color:var(--navy);
  max-width:16em;margin:0 auto;
}
.pullquote cite{
  display:block;font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:22px;
}

/* the four doors */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line-strong)}
@media(max-width:760px){.tiles{grid-template-columns:1fr}}
a.tile{
  display:block;text-decoration:none;color:#fff;padding:clamp(30px,4vw,50px);
  min-height:clamp(230px,26vw,300px);position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:background .22s;
}
a.tile .n{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
  color:rgba(255,255,255,.62);margin-bottom:auto;
}
a.tile h3{font-size:clamp(26px,3.2vw,36px);color:#fff;margin:0 0 12px;font-weight:400}
a.tile p{font-size:16px;color:rgba(255,255,255,.86);margin:0;max-width:30em;line-height:1.55}
a.tile .go{
  display:inline-block;margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.tile-work{background:var(--navy)}        .tile-work:hover{background:#053a52}
.tile-recipes{background:var(--jade)}     .tile-recipes:hover{background:#0e463f}
.tile-library{background:var(--slate)}    .tile-library:hover{background:#2f4757}
.tile-land{background:var(--moss)}        .tile-land:hover{background:#3a4823}

/* quieter section heads for the simplified pages */
.simple-top{max-width:36em;margin:0 auto 40px;text-align:center}
.simple-top .kicker{color:var(--turmeric);display:block;margin-bottom:14px}
.simple-top h2{font-size:clamp(27px,3.4vw,40px)}
.simple-top p{color:var(--muted);margin:14px 0 0;font-size:17.5px}

/* library index: plain, scannable lists rather than another wall of cards */
.libgroup{margin-bottom:52px}
.libgroup > h2{font-size:clamp(24px,2.9vw,32px);margin-bottom:6px}
.libgroup > p.blurb{color:var(--muted);font-size:16.5px;margin:0 0 20px;max-width:44em}
.liblist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.liblist li{border-bottom:1px solid var(--line)}
.liblist a{
  display:flex;gap:20px;align-items:baseline;padding:17px 4px;text-decoration:none;color:inherit;
  transition:background .15s,padding .15s;
}
.liblist a:hover{background:var(--surface);padding-left:12px}
.liblist .t{font-family:'Newsreader',Georgia,serif;font-size:20px;flex:1;min-width:0}
.liblist .d{color:var(--muted);font-size:15.5px;flex:2;min-width:0}
.liblist .m{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);white-space:nowrap}
@media(max-width:760px){
  .liblist a{flex-direction:column;gap:5px}
  .liblist .d{font-size:15px}
}

/* recipe index cards — lighter than the old specimen plates */
.recipes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.recipes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.recipes{grid-template-columns:1fr}}
a.rcp{
  display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);padding:24px;transition:border-color .18s,transform .18s;
}
@media (prefers-reduced-motion:no-preference){a.rcp:hover{transform:translateY(-3px)}}
a.rcp:hover{border-color:var(--navy)}
a.rcp .place{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--turmeric)}
a.rcp h3{font-size:22px;margin:9px 0 8px}
a.rcp p{font-size:15.5px;color:var(--muted);margin:0 0 14px}
a.rcp .yield{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);padding-top:13px;border-top:1px solid var(--line)}

/* ----------------------------------------------------------- photographs
   One figure component for every photograph on the site, so captions,
   borders and spacing cannot drift apart page to page. Matches .imgframe,
   which was already doing this job for the single portrait on /about. */
.sfig{margin:clamp(28px,4vw,40px) 0;border:1px solid var(--line-strong);
  padding:9px;background:var(--surface)}
.sfig img{display:block;width:100%;height:auto;border-radius:var(--r-plate)}
.sfig figcaption{font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:12px 3px 3px;line-height:1.6}

/* Landscape and food photographs run edge to edge as part of the page
   background, breaking out of the reading column. Portraits of Mellissa
   keep the framed look (.sfig.framed). Caption sits on the photo. */
.sfig:not(.framed){position:relative;width:100vw;max-width:none;
  margin:clamp(40px,6vw,72px) 0 clamp(40px,6vw,72px) calc(50% - 50vw);
  border:0;padding:0;background:var(--navy-deep);
  height:clamp(300px,44vw,600px);overflow:hidden}
.sfig:not(.framed) img{width:100%;height:100%;object-fit:cover;object-position:center 55%;border-radius:0}
.sfig:not(.framed)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;
  background:linear-gradient(to top,rgba(2,32,45,.55),rgba(2,32,45,0));pointer-events:none}
.sfig:not(.framed) figcaption{position:absolute;z-index:1;left:0;right:0;bottom:0;
  max-width:var(--maxw);margin:0 auto;padding:0 24px clamp(16px,2.4vw,26px);
  color:var(--cream);text-shadow:0 1px 10px rgba(2,32,45,.6)}
@media(max-width:700px){.sfig:not(.framed){height:clamp(260px,78vw,420px)}}
body{overflow-x:clip}

/* Full-width photograph band on the homepage: stones and water, with a
   short line of text. Wide crop on larger screens, tall crop on phones. */
.shore-band{position:relative;padding:0;margin:0 0 clamp(52px,7vw,96px);
  min-height:clamp(380px,42vw,560px);display:grid;place-items:center;overflow:hidden;
  background:var(--navy-deep)}
.shore-band picture,.shore-band img{position:absolute;inset:0;width:100%;height:100%}
.shore-band img{object-fit:cover;object-position:center 55%}
.shore-band::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(2,32,45,.55) 0%,rgba(2,32,45,.30) 55%,rgba(2,32,45,.12) 100%)}
.shore-band-text{position:relative;z-index:1;text-align:center;max-width:34em;
  padding:clamp(56px,8vw,96px) 24px;color:var(--cream)}
.shore-band h2{font-family:'Newsreader',Georgia,serif;font-weight:400;color:var(--cream);
  font-size:clamp(30px,4.2vw,52px);line-height:1.12;margin:0;letter-spacing:-.005em;
  text-shadow:0 1px 18px rgba(2,32,45,.45)}
.shore-band-rule{display:block;width:56px;height:1px;background:var(--gold);margin:22px auto}
.shore-band p{font-family:'Newsreader',Georgia,serif;font-style:italic;color:var(--cream);
  font-size:clamp(18px,2vw,23px);line-height:1.5;margin:0 auto;max-width:28em;
  text-shadow:0 1px 14px rgba(2,32,45,.5)}
@media(max-width:700px){
  .shore-band{min-height:clamp(460px,125vw,620px)}
  .shore-band img{object-position:center 50%}
}

/* ------------------------------------------------ editorial image treatment
   No frames, borders or white mats. Photos run to the edge of the page and
   fade softly into the navy or cream around them. */

/* 1. Editorial hero: sits straight under a navy page header and rises out
      of it. A short navy veil at the top makes the join seamless. */
.ed-hero{position:relative;margin:0;height:clamp(320px,46vw,620px);overflow:hidden;background:var(--navy)}
.ed-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus,center)}
.ed-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(4,48,68,.78),rgba(4,48,68,.28) 55%,rgba(4,48,68,0))}
.ed-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:18%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(2,32,45,.45),rgba(2,32,45,0))}
.ed-hero figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto;
  padding:0 24px clamp(14px,2vw,22px);font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase}
.ed-hero figcaption span{color:var(--cream);text-shadow:0 1px 10px rgba(2,32,45,.75)}

/* 2. Photo band: a full-bleed photograph behind a short piece of text,
      under a soft navy wash that is deepest where the words sit. */
.photo-band{position:relative;overflow:hidden;color:#fff;background:var(--navy);padding:0}
.photo-band>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.photo-band::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(2,32,45,.42),rgba(2,32,45,0) 100%),
    linear-gradient(to bottom,rgba(4,48,68,.82) 0%,rgba(4,48,68,.42) 35%,rgba(4,48,68,.42) 65%,rgba(4,48,68,.85) 100%)}
.photo-band-inner{position:relative;z-index:2;text-align:center;padding:clamp(80px,11vw,150px) 24px}
.photo-band .kicker{color:var(--ember);display:block;margin-bottom:14px}
.photo-band h2{color:#fff;font-size:clamp(28px,3.8vw,44px);max-width:18em;margin:0 auto;text-shadow:0 1px 18px rgba(2,32,45,.4)}
.photo-band p{color:#e6edf0;max-width:38em;margin:16px auto 26px;font-size:17px;text-shadow:0 1px 12px rgba(2,32,45,.5)}

/* 3. Split: the photo runs to the left edge of the window and fills just
      over half the width; the words sit beside it on the normal grid, with
      a faint cream fade where the two meet. */
.split-bleed{width:100vw;margin:clamp(44px,6vw,80px) 0 clamp(44px,6vw,80px) calc(50% - 50vw);
  display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:stretch;min-height:clamp(460px,48vw,680px)}
.split-media{position:relative;margin:0;overflow:hidden;background:var(--paper)}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,center)}
.split-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(246,241,230,0) 72%,rgba(246,241,230,.55) 92%,var(--paper) 100%)}
.split-media figcaption{position:absolute;z-index:1;left:clamp(16px,3vw,32px);bottom:clamp(14px,2vw,22px);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cream);text-shadow:0 1px 10px rgba(2,32,45,.7)}
.split-text{align-self:center;padding:clamp(32px,4vw,56px) clamp(24px,5vw,72px) clamp(32px,4vw,56px) clamp(24px,4vw,56px);max-width:34em}
.essay .split-text h2{margin-top:0;padding-top:0;border-top:none}
@media(max-width:860px){
  .split-bleed{grid-template-columns:1fr;min-height:0}
  .split-media{height:clamp(300px,82vw,460px)}
  .split-media::after{background:linear-gradient(to bottom,rgba(246,241,230,0) 70%,rgba(246,241,230,.6) 90%,var(--paper) 100%)}
  .split-media figcaption{bottom:auto;top:16px}
  .split-text{padding:8px 24px 0;max-width:none}
}

/* ------------------------------------------------ recipe cards
   Photo on top at 4:3, words beneath, no box. A recipe without its own
   photograph shows a quiet placeholder rather than a borrowed one. */
.recipes{gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px)}
a.rcp{display:flex;flex-direction:column;background:none;border:0;box-shadow:none;padding:0;border-radius:0;color:inherit;text-decoration:none}
a.rcp:hover{border-color:transparent}
.rcp-media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line);margin-bottom:16px}
.rcp-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
@media (prefers-reduced-motion:no-preference){a.rcp:hover{transform:none}a.rcp:hover .rcp-media img{transform:scale(1.03)}}
.rcp-empty{background:linear-gradient(135deg,#ece4d4,#e2d8c4);display:flex;align-items:center;justify-content:center}
.rcp-empty span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#9a8d74}
.rcp-body{display:flex;flex-direction:column;flex:1}
a.rcp h3{font-size:22px;margin:8px 0 8px;line-height:1.25}
a.rcp:hover h3{color:var(--navy-link)}
a.rcp p{font-size:15.5px;color:var(--muted);margin:0 0 12px}
.rcp-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.rcp-tags span{font-size:12px;line-height:1;padding:6px 9px;border-radius:99px;background:var(--jade-wash);color:var(--jade)}
a.rcp .yield{margin-top:auto}
.rcp-go{display:inline-flex;gap:6px;align-items:center;margin-top:14px;font-weight:700;font-size:14.5px;color:var(--navy)}
a.rcp:hover .rcp-go{color:var(--turmeric)}

/* Recipe page photo: sits under the details bar with no frame, fading
   softly into the cream page below. */
.ed-hero.ed-plain::before{display:none}
.ed-hero.ed-plain{background:var(--paper);height:clamp(300px,44vw,560px)}
.ed-hero.ed-plain::after{height:22%;background:linear-gradient(to top,rgba(246,241,230,.85),rgba(246,241,230,0))}
/* Half-height version of the editorial hero (Recipes page crumble). */
.ed-hero.ed-half{height:clamp(170px,23vw,310px)}
.ed-hero.ed-half::before{height:45%}
.rcp-ill{position:absolute;right:8px;bottom:8px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);background:rgba(2,32,45,.45);padding:3px 6px;border-radius:2px}
.ed-hero.ed-plain figcaption span{color:var(--cream);text-shadow:0 1px 10px rgba(2,32,45,.75)}
.ed-hero.ed-plain::after{background:linear-gradient(to top,rgba(2,32,45,.35),rgba(2,32,45,0))}
/* Recipes header: the lake sits faintly behind the navy, and the whole
   crumble dish sits on the right, its left edge softening into the blue. */
.phead-photo{overflow:hidden}
.phead-photo>.wrap{position:relative;z-index:2}
.phead-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.16;filter:saturate(.6);z-index:0}
.phead-dish{position:absolute;z-index:1;top:0;right:0;bottom:0;margin:0;width:46%}
.phead-dish img{width:100%;height:100%;object-fit:cover;object-position:28% 54%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 14%);mask-image:linear-gradient(to right,transparent 0%,#000 14%)}
.phead-photo .wrap>*{max-width:min(44em,52%)}
@media(max-width:860px){
  .phead-dish{position:relative;top:auto;bottom:auto;right:auto;width:100%;height:auto;aspect-ratio:1200/610;margin-top:28px;order:2;overflow:hidden}
  .phead-dish img{position:absolute;inset:0}
  .phead-photo{display:flex;flex-direction:column}
  .phead-dish img{object-position:center 54.5%;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%)}
  .phead-photo .wrap{order:1}
  .phead-photo .wrap>*{max-width:none}
  .phead-photo{padding-bottom:0}
}
/* Page header photo strip used on Learn articles and the assessment page. */
.ed-hero.ed-page{height:clamp(220px,26vw,380px)}
/* Homepage header: the lake, faint, behind the navy (as on Recipes). */
.hero-photo>.wrap{position:relative;z-index:2}
.hero-photo .phead-bg{opacity:.18}

/* Homepage hero portrait: photo melts into the navy header (no box, no border) */
.hero .portrait .frame{background:transparent;border:0;overflow:visible}
.hero .portrait .frame img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%),linear-gradient(to left,transparent 0,#000 16%),linear-gradient(to bottom,transparent 0,#000 16%),linear-gradient(to top,transparent 0,#000 28%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 34%),linear-gradient(to left,transparent 0,#000 16%),linear-gradient(to bottom,transparent 0,#000 16%),linear-gradient(to top,transparent 0,#000 28%);mask-composite:intersect;
}
.hero .portrait figcaption{text-align:center;margin-top:-4px;position:relative}

/* Digital guides: designed covers (no photos) */
.svc{overflow:hidden}
.guide-cover{display:flex;align-items:center;justify-content:center;gap:10px;margin:-28px -26px 22px;padding:30px 20px;aspect-ratio:16/10;
  background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.10),transparent 60%),var(--gc);position:relative}
.guide-cover::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--ember);opacity:.85}
.c-jade{--gc:var(--jade)}.c-turmeric{--gc:var(--turmeric)}.c-rosehip{--gc:var(--rosehip)}.c-moss{--gc:var(--moss)}.c-slate{--gc:var(--slate)}.c-navy{--gc:var(--navy)}
.gbook{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;aspect-ratio:3/4;
  background:var(--cream);color:var(--gc);border-radius:2px 6px 6px 2px;padding:14px 12px;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.10),0 14px 28px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18)}
.gbook .gk{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.gbook svg{width:46%;max-width:62px;margin:12px 0 10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gbook .gt{font-family:'Newsreader',Georgia,serif;font-size:clamp(15px,1.6vw,19px);line-height:1.1;color:var(--navy)}
.gbook .gs{font-family:'Karla',sans-serif;font-size:11px;margin-top:6px;opacity:.85}
.shelf{aspect-ratio:21/7;gap:14px}
.gbook.mini{height:82%;padding:10px 8px;border-top:6px solid var(--mc)}
.gbook.mini .gt{font-size:clamp(11px,1.1vw,14px)}
.m-jade{--mc:var(--jade)}.m-turmeric{--mc:var(--turmeric)}.m-rosehip{--mc:var(--rosehip)}.m-moss{--mc:var(--moss)}.m-slate{--mc:var(--slate)}
@media(max-width:620px){.shelf{aspect-ratio:auto;flex-wrap:wrap;padding:24px 14px}.gbook.mini{height:auto;width:28%}}



/* Client product line: category jump links and headings */
.dcats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 26px}
.dcats a{font-size:13.5px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none}
.dcats a:hover{border-color:var(--turmeric-bright);color:var(--turmeric)}
.dcat-h{font-size:26px;margin:40px 0 16px;padding-top:6px;border-top:1px solid var(--line);scroll-margin-top:90px}
.dcat-h span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);vertical-align:middle;margin-left:6px}
.note.anyorder{margin-top:34px}
.foodfirst{background:var(--surface);border-left:3px solid var(--turmeric-bright);padding:14px 18px;margin:0 0 18px;font-size:15px;max-width:60em}
.foodfirst .ff-k{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--turmeric);margin-bottom:6px}
.foodfirst p{margin:0 0 6px;color:#332618}
.foodfirst a{font-size:14px}
.p-card .pr .was{font-family:'Karla',sans-serif;font-size:15px;color:var(--muted);margin-left:6px;font-weight:400}
.perks .card h3{font-size:20px}
.deliv{border:0;padding:0;margin:0 0 18px}
.deliv legend{font-weight:600;margin-bottom:8px}
.deliv .check{margin-bottom:8px}
.p-card .p-img{margin:-6px -6px 14px;background:#fff;border-radius:4px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.p-card .p-img img{width:100%;height:100%;object-fit:contain;display:block}

/* Deal of the week */
.dealbox{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;background:var(--navy);color:#f3ece0;border-radius:6px;padding:26px 30px;margin:6px 0 30px;border-bottom:4px solid var(--turmeric-bright)}
.dealbox .dealimg{background:#fff;border-radius:6px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dealbox .dealimg img{width:100%;height:100%;object-fit:contain}
.dealbox .ff-k{color:var(--turmeric-bright);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.dealbox h2{color:#fff;font-size:30px;margin:6px 0 4px}
.dealbox .dealsub{margin:0 0 12px;opacity:.8}
.dealbox .dealprice{margin:0 0 6px;font-size:18px}
.dealbox .dealprice b{font-family:'Newsreader',Georgia,serif;font-size:34px;font-weight:500;color:#fff}
.dealbox .dealprice s{opacity:.6;margin:0 8px}
.dealbox .dealprice span{background:var(--turmeric-bright);color:var(--navy);font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}
.dealbox .dealends{font-size:14px;opacity:.75;margin:0 0 16px}
.p-card.is-deal{border:2px solid var(--turmeric-bright)}
.deal-flag{display:inline-block;background:var(--turmeric-bright);color:var(--navy);font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:3px;margin-bottom:10px;letter-spacing:.02em}
@media(max-width:640px){.dealbox{grid-template-columns:1fr;padding:22px}.dealbox .dealimg{max-width:220px}}
.note.orderday{border-left-color:var(--jade)}
.note.orderday .od-next,.note.orderday .od-tip{display:block;margin-top:8px}
.check.standing{margin-bottom:16px}