/* ============================================================================
   Baristuno - shared design system
   ----------------------------------------------------------------------------
   Single source of truth for colour, type, spacing and the shared chrome
   (header, nav, buttons, cards, footer). Every page links this file first,
   then adds only what is genuinely specific to it.

   Before this existed each page carried its own inline <style> with its own
   :root block, which is why the site drifted out of visual sync. If you are
   adding a style that more than one page needs, it belongs here.
   ========================================================================= */

:root{
  /* --- surfaces: warm paper, not grey ------------------------------------ */
  --paper:      #F7F1E8;
  --paper-2:    #E9DDCF;
  --surface:    #FFFCF7;
  --surface-2:  #F7F1E8;
  --line:       #E9DDCF;
  --line-soft:  #F3EADF;

  /* --- ink --------------------------------------------------------------- */
  --ink:        #1D1A18;
  --body:       #1D1A18;
  --mut:        #6E6660;
  --faint:      #766D67;

  /* --- brand ------------------------------------------------------------- */
  --espresso:   #241A16;
  --roast:      #6A3F2A;
  --clay:       #A64B35;
  --clay-dk:    #813827;
  --clay-soft:  #F5E4DE;
  --crema:      #E9DDCF;
  --amber:      #D6A45F;

  /* --- semantic (charts, states). Kept distinct from brand on purpose so a
         rebrand never silently changes what "in range" looks like. --------- */
  --good:       #52694F;
  --good-soft:  #E8F1EA;
  --warn:       #BE851F;
  --warn-soft:  #FAF0DC;
  --bad:        #AE4228;
  --bad-soft:   #FBEAE5;
  --info:       #4C6E96;

  /* --- type -------------------------------------------------------------- */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* fluid scale: each step interpolates between phone and desktop */
  --fs-hero: clamp(2.25rem, 1.3rem + 3.1vw, 3.5rem);
  --fs-h1:   clamp(2rem, 1.4rem + 2.6vw, 3.15rem);
  --fs-h2:   clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  --fs-h3:   clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  --fs-lead: clamp(1.06rem, 1rem + .32vw, 1.28rem);
  --fs-body: 1.0625rem;
  --fs-sm:   .9375rem;
  --fs-xs:   .8125rem;
  --fs-kick: .6875rem;

  /* --- measure + layout -------------------------------------------------- */
  --w-prose: 68ch;      /* reading column */
  --w-page:  1180px;    /* marketing / editorial pages */
  --w-app:   1440px;    /* tool surfaces that want the whole screen */
  --gutter:  clamp(18px, 3.2vw, 44px);

  /* --- shape + depth: shadows tinted warm, never neutral grey ------------ */
  --r-xs: 8px;  --r-sm: 12px;  --r: 20px;  --r-lg: 24px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(36,26,22,.05), 0 1px 3px rgba(36,26,22,.04);
  --sh-2: 0 4px 14px rgba(36,26,22,.07), 0 2px 5px rgba(36,26,22,.04);
  --sh-3: 0 16px 48px rgba(36,26,22,.10);
  --ring: 0 0 0 3px rgba(166,75,53,.24);
  --motion-fast:180ms;
  --motion-standard:240ms;
}

*{box-sizing:border-box;margin:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--body);
  font:var(--fs-body)/1.65 var(--sans);
  font-feature-settings:'kern' 1,'liga' 1,'cv05' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.012em;
  /* Fraunces carries an optical-size axis; let the browser drive it by size */
  font-optical-sizing:auto;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.004em}

p{text-wrap:pretty}

a{color:var(--clay);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--clay-dk)}

img,svg,video{max-width:100%}
img{height:auto}

::selection{background:var(--crema);color:var(--ink)}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}

/* --- layout ------------------------------------------------------------- */
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter) 96px}
.wrap.app{max-width:var(--w-app)}
.prose{max-width:var(--w-prose)}

/* --- eyebrow / kicker ---------------------------------------------------- */
.kick{
  font:700 var(--fs-kick)/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--clay);
  margin-bottom:14px;
}

/* --- header -------------------------------------------------------------- */
.site-head{
  display:flex;align-items:center;gap:20px;
  padding:22px 0 18px;
  margin-bottom:clamp(20px,3vw,38px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{width:40px;height:40px;border-radius:11px;display:block}
.brand b{
  display:block;font:600 1.22rem/1.05 var(--display);color:var(--ink);letter-spacing:-.015em;
}
.brand span{display:block;font:500 var(--fs-xs)/1.3 var(--sans);color:var(--mut);margin-top:2px}

.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.site-nav a,.site-nav button{
  font:500 var(--fs-sm)/1 var(--sans);
  color:var(--mut);background:none;border:none;cursor:pointer;
  padding:9px 13px;border-radius:var(--r-xs);text-decoration:none;
  transition:color .15s, background .15s;
}
.site-nav a:hover,.site-nav button:hover{color:var(--ink);background:var(--surface-2)}
.site-nav a.on,.site-nav button.on{color:var(--ink);font-weight:650;background:var(--crema)}

.head-acct{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 var(--fs-sm)/1 var(--sans);
  padding:12px 20px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .15s, border-color .15s, color .15s, transform .06s, box-shadow .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--clay);color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--clay-dk);color:#fff;box-shadow:var(--sh-2)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--faint);color:var(--ink);box-shadow:var(--sh-1)}
.btn-ghost{background:none;color:var(--mut);padding:9px 14px}
.btn-ghost:hover{color:var(--ink);background:var(--surface-2)}
.btn-sm{padding:9px 15px;font-size:var(--fs-xs)}

/* --- cards --------------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px);
  box-shadow:var(--sh-1);
}
.card-flat{background:var(--surface-2);border-color:var(--line-soft);box-shadow:none}
.card-lift{box-shadow:var(--sh-2)}

/* --- callouts, shared by articles and app ------------------------------- */
.note{
  border-left:3px solid var(--clay);
  background:var(--clay-soft);
  padding:16px 20px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:28px 0;
}
.note b{display:block;color:var(--ink);font:600 var(--fs-sm) var(--sans);margin-bottom:5px}
.note p{color:var(--body);font-size:var(--fs-sm);margin:0}

/* --- footer -------------------------------------------------------------- */
.site-foot{
  border-top:1px solid var(--line);
  background:var(--paper-2);
  margin-top:72px;padding:52px 0 44px;
}
.site-foot .in{
  max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;
}
.site-foot h4{font:600 var(--fs-sm) var(--sans);color:var(--ink);margin-bottom:14px}
.site-foot a{display:block;color:var(--mut);text-decoration:none;font-size:var(--fs-sm);padding:5px 0}
.site-foot a:hover{color:var(--clay)}
.site-foot .blurb{color:var(--mut);font-size:var(--fs-sm);max-width:42ch}
.site-foot .legal{
  max-width:var(--w-page);margin:38px auto 0;padding:22px var(--gutter) 0;
  border-top:1px solid var(--line);color:var(--faint);font-size:var(--fs-xs);
}

/* Compact premium footer. The extra selector depth intentionally wins over
   legacy page-level footer rules while keeping their HTML and destinations. */
body .site-foot{
  width:100%;max-width:none;margin:48px 0 24px;padding:28px 32px 18px;
  border:1px solid rgba(255,255,255,.1);border-radius:24px;
  background:
    radial-gradient(circle at 88% 20%,rgba(190,126,77,.22),transparent 28%),
    linear-gradient(135deg,#241a14,#4b3022 68%,#684630);
  color:#fff;box-shadow:0 18px 42px rgba(42,28,19,.13);
}
.site-foot .foot-grid{
  display:grid;grid-template-columns:minmax(280px,1.65fr) minmax(190px,1fr) minmax(190px,1fr);
  align-items:start;gap:34px;max-width:none;margin:0;padding:0;
}
.site-foot .foot-brand{display:flex;align-items:center;gap:10px;margin:0 0 9px}
.site-foot .foot-brand .mark{width:36px;height:36px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:#fff}
.site-foot .foot-brand b{color:#fff;font:600 19px/1 var(--display)}
.site-foot .foot-blurb{max-width:48ch;margin:0;color:rgba(255,255,255,.65);font-size:11px;line-height:1.55}
.site-foot .socials{display:flex;gap:7px;margin:14px 0 0}
.site-foot .socials a{
  display:grid;place-items:center;width:32px;height:32px;padding:0;margin:0;
  border:1px solid rgba(255,255,255,.17);border-radius:9px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);
}
.site-foot .socials a:hover{translate:0 -1px;border-color:rgba(240,192,124,.7);background:rgba(240,192,124,.12);color:#f0c07c}
.site-foot .socials svg{width:16px;height:16px}
.site-foot .foot-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;align-content:start}
.site-foot .foot-col h4{
  grid-column:1/-1;margin:2px 0 9px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);
  color:#e5b875;font:750 8px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
}
.site-foot .foot-col a{
  display:block;min-width:0;margin:0;padding:5px 0;color:rgba(255,255,255,.72);
  font:600 10.5px/1.25 var(--sans);text-decoration:none;cursor:pointer;
}
.site-foot .foot-col a:hover{color:#fff}
.site-foot .foot-base{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:18px;
  margin:20px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.42);font:550 8.5px/1.4 var(--sans);
}
.site-foot .foot-base span:last-child{text-align:right}
@media (min-width:861px) and (max-width:1050px){
  body .site-foot{padding-inline:24px}
  .site-foot .foot-grid{grid-template-columns:1.35fr 1fr 1fr;gap:22px}
  .site-foot .foot-col{grid-template-columns:1fr}
}
@media (max-width:760px){
  .site-foot .in{grid-template-columns:1fr;gap:28px}
}

/* --- mobile: nav moves to a bottom bar ----------------------------------
   Kept deliberately tall and pinned to the bottom edge; it is the primary
   way the app is navigated on a phone. */
.mobile-nav{display:none}
@media (max-width:860px){
  .site-nav{display:none}
  /* Five stable destinations fit a phone without wrapping. Grind Lab remains
     one deliberate tap away inside Menu → Improve on every route. */
  .site-head nav>[data-tab="lab"],.site-head nav>[data-primary="lab"]{display:none!important}
  .site-head{padding:16px 0 14px;margin-bottom:20px}
  body{padding-bottom:78px}
  .mobile-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
    backdrop-filter:saturate(150%) blur(12px);
    border-top:1px solid var(--line);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-nav a,.mobile-nav button{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    background:none;border:none;cursor:pointer;text-decoration:none;
    font:600 11px/1 var(--sans);color:var(--mut);padding:8px 2px;border-radius:var(--r-xs);
  }
  .mobile-nav a.on,.mobile-nav button.on{color:var(--clay);background:var(--clay-soft)}
  .mobile-nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================================
   EDITORIAL LAYER
   ----------------------------------------------------------------------------
   The palette alone made the site warm but flat. This is the part that gives it
   structure and interest: a vertical rhythm scale, full-bleed sections, labelled
   section heads, oversized indices, asymmetric feature rows, and motion.
   ========================================================================= */

:root{
  --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:34px;
  --sp-5:clamp(40px,5vw,64px); --sp-6:clamp(60px,8vw,104px); --sp-7:clamp(84px,11vw,152px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* one rhythm for every major band, so sections stop breathing differently */
.band{padding-block:var(--sp-6)}
.band + .band{padding-top:0}
.band-tight{padding-block:var(--sp-5)}

/* escape the wrap for full-bleed imagery without a wrapper div */
.bleed{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}

/* --- section head: hairline + small-caps label + optional index ----------- */
.shead{display:flex;align-items:baseline;gap:16px;margin-bottom:var(--sp-4)}
.shead .lab{
  font:700 var(--fs-kick)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);white-space:nowrap;
}
.shead .ln{flex:1;height:1px;background:var(--line)}
.shead .n{font:400 var(--fs-xs) var(--mono);color:var(--faint)}

/* oversized index numerals, the classic magazine tell */
.idx{
  font:600 clamp(2.4rem,4vw,3.6rem)/1 var(--display);
  color:var(--crema);letter-spacing:-.03em;display:block;margin-bottom:6px;
}

/* --- asymmetric feature row ---------------------------------------------- */
.feature{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,72px);align-items:center;
}
.feature.flip > .media{order:2}
.feature > .copy{max-width:52ch}
@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:26px}
  .feature.flip > .media{order:0}
}

/* --- media: rounded, clipped, with a slow hover push ---------------------- */
.media{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface-2);box-shadow:var(--sh-2);
}
.media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.media:hover img{transform:scale(1.035)}
.media figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 22px 16px;
  background:linear-gradient(to top,rgba(36,28,21,.82),transparent);
  color:rgba(255,255,255,.9);font-size:var(--fs-xs);
}

/* --- pull quote ----------------------------------------------------------- */
.quote{
  font:400 clamp(1.35rem,2.4vw,2rem)/1.32 var(--display);
  color:var(--ink);letter-spacing:-.015em;max-width:24ch;
  border-left:2px solid var(--clay);padding-left:clamp(18px,2.4vw,30px);
  margin-block:var(--sp-5);text-wrap:balance;
}
.quote cite{display:block;margin-top:14px;font:500 var(--fs-xs) var(--sans);
  color:var(--faint);font-style:normal;letter-spacing:.04em}

/* --- link with an underline that draws in --------------------------------- */
.ul-link{
  position:relative;text-decoration:none;font-weight:550;
  background-image:linear-gradient(var(--clay),var(--clay));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease);
}
.ul-link:hover{background-size:100% 1px}

/* --- cards that lift ------------------------------------------------------ */
.card,.media{transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
a.card:hover,.card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}

/* --- scroll reveal. Opt-in via data-reveal; motion.js adds .in ------------- */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(20px);
    transition:opacity .75s var(--ease),transform .75s var(--ease)}
  [data-reveal].in{opacity:1;transform:none}
  [data-reveal][data-delay="1"]{transition-delay:.09s}
  [data-reveal][data-delay="2"]{transition-delay:.18s}
  [data-reveal][data-delay="3"]{transition-delay:.27s}
  [data-reveal][data-delay="4"]{transition-delay:.36s}
}
/* Without JS the content must still be visible, so nothing is hidden until
   motion.js marks the document as capable. */
html:not(.js) [data-reveal]{opacity:1;transform:none}

/* --- sticky header that gains a shadow once you scroll -------------------- */
.site-head{
  position:sticky;top:12px;z-index:80;
  background:rgba(251,247,241,.78);
  -webkit-backdrop-filter:saturate(165%) blur(18px);
  backdrop-filter:saturate(165%) blur(18px);
  transition:none;
}
html.motion-ready .site-head{transition:box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.site-head.scrolled{background:rgba(251,247,241,.9);border-color:rgba(190,168,145,.58);box-shadow:0 12px 34px rgba(58,42,29,.12),0 2px 8px rgba(58,42,29,.06)}

/* ============================================================================
   SITE CHROME - the single definition of the header, brand, nav and account.
   ----------------------------------------------------------------------------
   Every page previously declared its own copy of these rules, which is why the
   menu sat at x=469 on the app, x=581 on About and x=174 on Learn, and why the
   Learn header was 71px taller. Nothing below may be redefined in a page's own
   stylesheet: add a modifier class here instead.
   ========================================================================= */

.site-head{
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
  min-height:74px;padding:12px 14px;margin:12px 0 clamp(20px,2.6vw,34px);
  border:1px solid rgba(190,168,145,.38);border-radius:20px;
  box-shadow:0 4px 18px rgba(58,42,29,.055);
}
.mark,.brand img{width:43px;height:43px;border-radius:12px;flex-shrink:0;display:block;content:url('/brand/logo/current/baristuno-logo-black-128.png')}
.av{content:url('/brand/logo/current/baristuno-logo-black-128.png')}
.foot-brand .mark{width:34px;height:34px;border-radius:10px}
.site-head .site-brand-link{order:1;display:flex;align-items:center;gap:12px;flex:0 0 auto;color:inherit;text-decoration:none}
.site-head .site-brand-link:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:14px}
.site-head .head-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.site-head h1,.site-head h1.brand,.site-head .brand-name{
  font:600 1.34rem/1 var(--display);color:var(--ink);letter-spacing:-.025em;white-space:nowrap;
}
.site-head .sub{color:var(--mut);font:700 .58rem/1.3 var(--sans);letter-spacing:.105em;text-transform:uppercase;white-space:nowrap;margin-top:4px}

/* nav: right-aligned, one row, identical on every page */
.site-head nav{
  display:flex;align-items:center;gap:4px;flex-wrap:nowrap;
  order:2;width:auto;margin:0 0 0 auto;padding:0;
}
.site-head nav a,.site-head nav button{
  font:500 var(--fs-sm)/1 var(--sans);color:var(--mut);
  background:none;border:none;cursor:pointer;white-space:nowrap;
  padding:10px 11px;border-radius:var(--r-pill);text-decoration:none;min-width:0;
  transition:color .15s var(--ease),background .15s var(--ease);
}
.site-head nav a:hover,.site-head nav button:hover{color:var(--ink);background:var(--surface-2)}
.site-head nav a.on,.site-head nav button.on{background:var(--crema);color:var(--ink);font-weight:650;box-shadow:inset 0 0 0 1px rgba(162,113,73,.08)}
.site-head nav .shop-nav-link{border:1px solid rgba(178,98,55,.24);background:rgba(178,98,55,.07);color:var(--clay);font-weight:700}.site-head nav .shop-nav-link:hover,.site-head nav .shop-nav-link.on{border-color:rgba(178,98,55,.38);background:var(--clay);color:#fff}
.site-head nav .nl-s{display:none}
.advisor-nav-link{display:none!important}
.knowledge-menu{position:relative}.knowledge-menu>summary{display:flex;min-height:44px;align-items:center;gap:7px;padding:10px 11px;border-radius:var(--r-pill);color:var(--mut);font:500 var(--fs-sm)/1 var(--sans);list-style:none;white-space:nowrap;cursor:pointer}.knowledge-menu>summary::-webkit-details-marker{display:none}.knowledge-menu>summary i{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .16s ease}.knowledge-menu[open]>summary i{transform:rotate(225deg) translate(-1px,-1px)}.knowledge-menu>summary:hover,.knowledge-menu[open]>summary,.knowledge-menu.on>summary{background:var(--crema);color:var(--ink)}.knowledge-popover{position:absolute;z-index:60;top:calc(100% + 10px);right:0;display:grid;width:390px;padding:10px;border:1px solid rgba(190,168,145,.55);border-radius:19px;background:rgba(251,247,241,.98);box-shadow:0 22px 58px rgba(48,32,22,.19);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.site-head nav .knowledge-popover a{display:grid;gap:5px;padding:15px 16px;border-radius:13px;color:var(--ink);text-align:left;white-space:normal}.site-head nav .knowledge-popover a:hover,.site-head nav .knowledge-popover a.on{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft)}.knowledge-popover small{color:var(--clay);font:750 8px var(--sans);letter-spacing:.14em}.knowledge-popover b{font:600 17px/1.15 var(--display)}.knowledge-popover span{color:var(--mut);font:10.5px/1.4 var(--sans)}
.knowledge-menu.scan-menu .knowledge-popover{width:min(390px,calc(100vw - 36px))}.knowledge-menu.scan-menu .knowledge-popover a+a{border-top:1px solid var(--line-soft)}
.knowledge-menu.app-menu .knowledge-popover{
  position:absolute;
  top:var(--app-menu-top,54px);
  left:var(--app-menu-left,18px);
  right:auto;
  box-sizing:border-box;
  width:var(--app-menu-width,min(920px,calc(100vw - 36px)));
  max-height:var(--app-menu-max-height,min(680px,calc(100dvh - 120px)));
  overflow:auto;
  padding:16px;
}
/* Menu categories are nested nav elements. Reset the main header-nav layout so
   they remain contained vertical cards instead of becoming one long row. */
.site-head nav .knowledge-popover .app-menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin:0;padding:0}
.site-head nav .knowledge-popover .app-menu-group{position:static;display:block;order:initial;width:auto;min-width:0;margin:0;padding:10px;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.app-menu-group h3{margin:0 6px 7px;color:var(--clay);font:750 9px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.site-head nav .knowledge-popover .app-menu-group a{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 7px;border-radius:8px;color:var(--body);font:650 11px/1.25 var(--sans);text-align:left;text-decoration:none;white-space:normal}
.site-head nav .knowledge-popover .app-menu-group a:hover,.site-head nav .knowledge-popover .app-menu-group a.on{background:var(--surface-2);color:var(--clay);box-shadow:none}
.app-menu-group a em{flex:0 0 auto;padding:3px 5px;border-radius:999px;background:var(--crema);color:var(--clay);font:800 7px/1 var(--sans);font-style:normal;letter-spacing:.06em}
@media (min-width:861px) and (max-width:1180px){
  .knowledge-menu.app-menu .knowledge-popover{width:var(--app-menu-width,min(860px,calc(100vw - 28px)))}
}

.site-head .acct{order:3;display:flex;gap:8px;align-items:center;justify-content:flex-end;flex:0 0 176px;width:176px;min-width:176px;padding-left:12px;margin-left:4px;border-left:1px solid var(--line)}
.site-head .acct .who{
  flex:1 1 auto;font:600 var(--fs-xs) var(--sans);color:var(--mut);max-width:78px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;
  background:none;border:none;padding:6px 8px;border-radius:var(--r-xs);cursor:pointer;
}
.site-head .acct .who:hover{color:var(--clay);background:var(--surface-2)}
.site-head .acct .who:empty{display:none}
.site-head .acct button.authbtn,.site-head .acct .btn.ghost{
  font:600 var(--fs-xs)/1 var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 15px;cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.site-head .acct button.authbtn:hover,.site-head .acct .btn.ghost:hover{border-color:var(--clay);color:var(--clay)}

/* phones: nav leaves the header and becomes the bottom bar */
@media (max-width:860px){
  /* Drop sticky + backdrop-filter here: either one makes the header a
     containing block, which pins the fixed bottom nav to the header's
     box (339px) rather than the full viewport width. */
  .site-head{min-height:66px;padding:12px 0;margin:0 0 18px;gap:10px;border:0;border-radius:0;box-shadow:none;
    position:relative;z-index:60;-webkit-backdrop-filter:none;backdrop-filter:none;background:none}
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .site-head nav{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:45;
    margin:0;width:auto;gap:1px;justify-content:space-around;
    background:rgba(251,247,241,.94);
    -webkit-backdrop-filter:saturate(170%) blur(18px);
    backdrop-filter:saturate(170%) blur(18px);
    border:1px solid rgba(190,168,145,.5);border-bottom:0;border-radius:22px 22px 0 0;
    box-shadow:0 -10px 32px rgba(58,42,29,.13),0 -2px 8px rgba(58,42,29,.05);
    padding:6px 10px max(7px,env(safe-area-inset-bottom));
  }
  .site-head nav a,.site-head nav button{
    flex:1;min-height:44px;text-align:center;padding:10px 2px;border-radius:var(--r-xs);
    font:600 11px/1.15 var(--sans);
  }
  .site-head nav a.on,.site-head nav button.on{background:var(--clay-soft);color:var(--clay)}
  .site-head nav .nl{display:none}
  .site-head nav .nl-s{display:inline}
  /* Learn already lives in More on phones; keep the bottom bar to four
     product destinations plus the conventional More action. */
  .site-head nav [data-nav="/learn"],.site-head nav [data-tab="lab"],
  .site-head nav [data-primary="learn"],.site-head nav [data-primary="guides"],
  .site-head nav [data-primary="advisor"]{display:none}
  .site-head nav .knowledge-menu,.site-head nav .knowledge-menu[data-primary="menu"]{display:none!important}
  .site-head .acct{flex:0 0 auto;width:auto;min-width:0;margin-left:auto;padding-left:0;border-left:0}
  .site-head .acct .who{min-height:44px;max-width:86px;padding-inline:8px}
  .site-head .acct button.authbtn,.site-head .acct .btn.ghost{min-height:44px;padding:9px 12px}
}
@media (min-width:861px) and (max-width:1080px){
  .site-head .sub{display:none}
  .site-head .acct{flex-basis:auto;width:auto;min-width:0}
  .site-head .acct .who{display:none}
  .site-head nav a,.site-head nav button{padding-inline:11px}
}
@media (max-width:359px){.site-head nav a,.site-head nav button{font-size:10px}}

/* The full footer belongs to desktop. On phones its destinations live in the
   conventional More item beside the four primary navigation destinations. */
.mobile-more-trigger,.mobile-more-menu{display:none}
@media(max-width:860px){
  .site-foot{display:none!important}
  .site-head nav .mobile-more-trigger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
  .mobile-more-icon{display:flex;gap:3px;height:10px;align-items:center}.mobile-more-icon i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor}
  body.mobile-menu-open{overflow:hidden}
  .mobile-more-menu.mobile-more-fallback:not([hidden]){display:block;position:fixed;inset:0;z-index:70;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit}
  .mobile-more-backdrop{position:absolute;inset:0;border:0;background:rgba(26,18,13,.48);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .mobile-more-sheet{position:absolute;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));max-height:calc(100dvh - max(16px,env(safe-area-inset-bottom)));overflow:auto;overscroll-behavior:contain;padding:22px 20px 18px;border:1px solid rgba(190,168,145,.55);border-radius:24px;background:var(--paper);box-shadow:0 24px 70px rgba(42,29,20,.3)}
  .mobile-more-sheet>header{min-height:0;margin:0 0 18px;padding:0;border:0;border-radius:0;box-shadow:none;display:flex;align-items:flex-start;justify-content:space-between}.mobile-more-sheet>header span{color:var(--clay);font:750 8px var(--sans);letter-spacing:.14em}.mobile-more-sheet h2{margin-top:4px;color:var(--ink);font:600 30px/1 var(--display)}
  .mobile-more-sheet .app-menu-grid{grid-template-columns:1fr 1fr;gap:8px}.mobile-more-sheet .app-menu-group{padding:11px}.mobile-more-sheet .app-menu-group h3{margin-bottom:5px}.mobile-more-sheet .app-menu-group a{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:8px 5px;border-radius:7px;color:var(--body);font:650 10px/1.2 var(--sans);text-decoration:none}.mobile-more-sheet .app-menu-group a:hover{background:var(--surface-2);color:var(--clay)}
  .mobile-more-close{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--mut);font:26px/1 var(--sans);cursor:pointer}
  .mobile-menu-groups{display:grid;gap:8px}
  .mobile-menu-groups details{overflow:hidden;border:1px solid var(--line-soft);border-radius:15px;background:var(--surface)}
  .mobile-menu-groups summary{display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;color:var(--ink);font:700 12px/1.2 var(--sans);list-style:none;cursor:pointer}
  .mobile-menu-groups summary::-webkit-details-marker{display:none}
  .mobile-menu-groups summary small{display:block;margin-bottom:3px;color:var(--clay);font:800 8px/1 var(--sans);letter-spacing:.12em}
  .mobile-menu-groups summary i{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .16s ease}
  .mobile-menu-groups details[open] summary{background:var(--surface-2)}
  .mobile-menu-groups details[open] summary i{transform:rotate(225deg)}
  .mobile-menu-groups nav{display:grid;position:static;width:auto;margin:0;padding:4px 8px 10px;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .mobile-menu-groups nav a{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:9px;color:var(--body);font:650 12px/1.25 var(--sans);text-align:left;text-decoration:none}
  .mobile-menu-groups nav a:hover,.mobile-menu-groups nav a:focus-visible{background:var(--paper-2);color:var(--clay)}
  .mobile-menu-groups nav a em{padding:3px 6px;border-radius:999px;background:var(--crema);color:var(--clay);font:800 7px/1 var(--sans);font-style:normal;letter-spacing:.06em}
  .mobile-more-utility{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}.mobile-more-utility a{display:grid;min-height:44px;place-items:center;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface-2);color:var(--mut);font:700 9px var(--sans);text-decoration:none}.mobile-more-utility a:hover,.mobile-more-utility a:focus-visible{color:var(--clay);border-color:var(--line)}
  .mobile-more-groups{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-more-groups nav{display:block;position:static;width:auto;margin:0;padding:14px;border:1px solid var(--line-soft);border-radius:15px;background:var(--surface);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.mobile-more-groups h3{margin:0 0 7px;color:var(--faint);font:750 8px var(--sans);letter-spacing:.11em;text-transform:uppercase}.mobile-more-groups nav a{display:block;padding:9px 6px;border-radius:8px;color:var(--body);font:650 11px/1.2 var(--sans);text-align:left;text-decoration:none}.mobile-more-groups nav a:hover{background:var(--surface-2);color:var(--clay)}
  .mobile-more-social{display:flex;gap:7px;overflow-x:auto;margin-top:12px}.mobile-more-social a{display:grid;min-height:44px;flex:1;min-width:68px;padding:10px 7px;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--mut);font:700 9px var(--sans);text-align:center;text-decoration:none}.mobile-more-sheet>p{margin-top:14px;color:var(--faint);font:500 9px var(--sans);text-align:center}
  .mobile-menu-open .mobile-more-trigger{background:var(--clay-soft);color:var(--clay)}
}
@media(max-width:380px){.mobile-more-sheet{padding-inline:14px}.mobile-more-groups{gap:7px}.mobile-more-groups nav{padding:11px}.mobile-more-groups nav a{font-size:10px}}

/* ==========================================================================
   MARCUS PHASE 3 — interaction finish and resilient states
   --------------------------------------------------------------------------
   One shared contract for focus, loading, empty/error feedback, offline
   awareness, dialogs and motion. Page styles may compose these primitives,
   but should not invent a second behavior for the same state.
   ========================================================================= */
:root{
  --dur-instant:120ms;
  --dur-fast:160ms;
  --dur-base:220ms;
  --dur-slow:320ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --focus:#8B3E20;
}

html{scroll-behavior:smooth;scroll-padding-top:112px}

/* Keyboard users should enter at the task, not traverse the full product
   chrome on every route. motion.js inserts this only when a main landmark is
   available. */
.skip-link{
  position:fixed;z-index:500;top:max(8px,env(safe-area-inset-top));left:12px;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  padding:0;border:0;opacity:0;pointer-events:none;
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-3);font:750 var(--fs-sm)/1.2 var(--sans);text-decoration:none;
  transition:opacity var(--dur-fast) var(--ease-out);
}
html.keyboard-navigation .skip-link:focus-visible{
  width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;
  padding:11px 16px;border:2px solid var(--focus);opacity:1;pointer-events:auto;color:var(--ink)
}

:focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;
  box-shadow:0 0 0 5px rgba(139,62,32,.16);border-radius:var(--r-xs);
}

button,input,select,textarea,a{accent-color:var(--clay)}
button:disabled,.btn:disabled,[aria-disabled="true"]{
  opacity:.55;cursor:not-allowed;box-shadow:none!important;transform:none!important;
}
button[aria-busy="true"],.btn[data-loading="true"]{position:relative;cursor:progress}
button[aria-busy="true"]::before,.btn[data-loading="true"]::before{
  content:"";width:14px;height:14px;flex:0 0 14px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:ui-spin .72s linear infinite;
}
@keyframes ui-spin{to{rotate:360deg}}

/* Known-shape loading should preserve layout instead of flashing empty space. */
.ui-skeleton{
  min-height:18px;border-radius:var(--r-xs);color:transparent!important;
  background:linear-gradient(100deg,var(--paper-2) 28%,#fff 46%,var(--paper-2) 64%);
  background-size:220% 100%;animation:ui-shimmer 1.25s ease-in-out infinite;
}
@keyframes ui-shimmer{to{background-position:-220% 0}}

/* Empty, error and permission states use the same readable structure. */
.ui-state{
  grid-column:1/-1;display:grid;justify-items:center;gap:8px;min-height:190px;
  align-content:center;padding:clamp(28px,5vw,52px);border:1px dashed var(--line);
  border-radius:var(--r);background:var(--surface);color:var(--mut);text-align:center;
}
.ui-state::before{
  content:"";display:block;width:34px;height:34px;border-radius:50%;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);
}
.ui-state[data-state="error"]::before,.ui-state[data-state="offline"]::before{background:var(--bad-soft);box-shadow:inset 0 0 0 1px rgba(174,66,40,.24)}
.ui-state[data-state="success"]::before{background:var(--good-soft);box-shadow:inset 0 0 0 1px rgba(74,124,89,.24)}
.ui-state h2,.ui-state strong{max-width:30ch;color:var(--ink);font:600 var(--fs-h3)/1.2 var(--display)}
.ui-state p{max-width:52ch;margin:0;font-size:var(--fs-sm);line-height:1.55}
.ui-state-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.ui-state-actions button,.ui-state-actions a{min-height:44px}

/* This status is deliberately global: recipes, news and account tasks can all
   fail while offline, not only the Journal. */
.connection-banner{
  position:fixed;z-index:240;top:max(10px,env(safe-area-inset-top));left:50%;
  display:flex;max-width:min(520px,calc(100% - 24px));min-height:44px;
  align-items:center;gap:10px;padding:10px 15px;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);background:var(--espresso);color:#fff;
  box-shadow:var(--sh-3);font:650 var(--fs-xs)/1.35 var(--sans);
  translate:-50% calc(-100% - 24px);opacity:0;pointer-events:none;
  transition:translate var(--dur-base) var(--ease-out),opacity var(--dur-fast) ease;
}
.connection-banner:not([hidden]){translate:-50% 0;opacity:1}
.connection-banner[data-state="online"]{background:var(--good)}
.connection-banner i{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(255,255,255,.14)}

/* Every modal uses viewport-safe bounds and the same scroll-lock contract.
   Native dialog owns focus containment; the shared script supplies it to the
   legacy custom overlays. */
body.dialog-open,body.overlay-open{overflow:hidden;overscroll-behavior:none}
dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overscroll-behavior:contain}
dialog[open]{animation:dialog-enter var(--dur-base) var(--ease-out)}
dialog::backdrop{animation:backdrop-enter var(--dur-fast) ease-out}
@keyframes dialog-enter{from{opacity:0;translate:0 10px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}

@media(pointer:coarse){
  .btn,button:not(.recipe-favorite):not(.news-preview-close):not(.recipe-dialog-close),input,select{min-height:44px}
}
@media(max-width:420px){
  .connection-banner{top:max(8px,env(safe-area-inset-top));border-radius:14px}
  .ui-state{min-height:170px;padding:28px 20px}
  .ui-state-actions{display:grid;width:100%}.ui-state-actions>*{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .skip-link,.connection-banner{transition:none}
  .ui-skeleton,button[aria-busy="true"]::before,.btn[data-loading="true"]::before,dialog[open],dialog::backdrop{animation:none!important}
  .media img,a.card,.card-hover,.news-card{transform:none!important}
}
@media(forced-colors:active){
  :focus-visible{outline:3px solid Highlight;box-shadow:none}
  .connection-banner,.ui-state{border:1px solid CanvasText}
}

/* ==========================================================================
   MARCUS PHASE 4 — installable, adaptive application shell
   ========================================================================= */
[hidden]{display:none!important}
.primary-nav-icon{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:860px){
  .site-head>nav>[data-tab]:not([data-tab="lab"]),
  .site-head>nav>[data-primary]:not([data-primary="shop"]):not([data-primary="learn"]):not([data-primary="advisor"]):not(.knowledge-menu){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
  .primary-nav-icon{display:block;flex:0 0 20px}
  .site-head nav a,.site-head nav button{font-size:10.5px}
}

/* Standalone mode owns the full screen, including the notch/status-bar area. */
@media(display-mode:standalone){
  body{padding-top:env(safe-area-inset-top)}
  header{margin-top:0}
  .profile-install-action,[data-install-app]{display:none!important}
}

.install-app-dialog{
  width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;
  padding:0;border:1px solid var(--line);border-radius:26px;background:var(--surface);
  color:var(--body);box-shadow:0 32px 90px rgba(35,24,16,.32);
}
.install-app-dialog::backdrop{background:rgba(31,22,16,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.install-app-dialog article{position:relative;padding:clamp(28px,6vw,48px)}
.install-app-dialog article>img{width:58px;height:58px;margin-bottom:28px;border-radius:16px;box-shadow:var(--sh-2)}
.install-app-dialog h2{max-width:12ch;margin:0;font-size:clamp(32px,5vw,46px);line-height:1}
.install-app-dialog #installAppCopy{max-width:55ch;margin:15px 0 0;color:var(--mut);font-size:14px;line-height:1.58}
.install-app-steps{display:grid;gap:10px;margin:24px 0 0;padding:18px 18px 18px 38px;border:1px solid var(--line-soft);border-radius:16px;background:var(--surface-2);color:var(--body);font-size:12px;line-height:1.5}
.install-app-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.install-app-actions .btn{min-height:44px}
.install-app-dialog article>small{display:block;margin-top:16px;color:var(--faint);font-size:10px;line-height:1.5}
.install-app-close{position:absolute;top:18px;right:18px;display:grid;width:44px;height:44px;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--mut);font:26px/1 var(--sans);cursor:pointer}

@media(max-width:520px){
  .install-app-dialog{width:calc(100% - 16px);border-radius:22px}
  .install-app-dialog article{padding:24px 20px}
  .install-app-dialog article>img{width:50px;height:50px;margin-bottom:32px}
  .install-app-dialog h2{font-size:34px}
  .install-app-actions{display:grid}.install-app-actions .btn{width:100%}
}