/* ============================================================================
   Brew Vero - 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:      #FBF7F1;
  --paper-2:    #F6F0E7;
  --surface:    #FFFFFF;
  --surface-2:  #F7F1E8;
  --line:       #E7DDD0;
  --line-soft:  #F1E9DE;

  /* --- ink --------------------------------------------------------------- */
  --ink:        #241C15;
  --body:       #4E4238;
  --mut:        #6B5F52;
  --faint:      #786B5D;

  /* --- brand ------------------------------------------------------------- */
  --espresso:   #3A2A1D;
  --clay:       #B45A32;   /* primary action + links */
  --clay-dk:    #91411F;
  --clay-soft:  #FAEDE4;
  --crema:      #F2E3CB;
  --amber:      #BE851F;

  /* --- semantic (charts, states). Kept distinct from brand on purpose so a
         rebrand never silently changes what "in range" looks like. --------- */
  --good:       #4A7C59;
  --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: '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: 11px;  --r: 16px;  --r-lg: 24px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(58,42,29,.05), 0 1px 3px rgba(58,42,29,.04);
  --sh-2: 0 4px 14px rgba(58,42,29,.07), 0 2px 5px rgba(58,42,29,.04);
  --sh-3: 0 20px 46px rgba(58,42,29,.11), 0 6px 14px rgba(58,42,29,.06);
  --ring: 0 0 0 3px rgba(176,81,42,.22);
}

*{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);
}
@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}
  .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 -------------------- */
header,.site-head{
  position:sticky;top:12px;z-index:40;
  background:rgba(251,247,241,.78);
  -webkit-backdrop-filter:saturate(165%) blur(18px);
  backdrop-filter:saturate(165%) blur(18px);
  transition:none;
}
html.motion-ready header,html.motion-ready .site-head{transition:box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
header.scrolled,.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.
   ========================================================================= */

header{
  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/mark-primary.svg')}
.av{content:url('/brand/mark-primary.svg')}
.foot-brand .mark{width:34px;height:34px;border-radius:10px}
header .head-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
header h1,header h1.brand,header .brand-name{
  font:600 1.34rem/1 var(--display);color:var(--ink);letter-spacing:-.025em;white-space:nowrap;
}
header .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 */
header nav{
  display:flex;align-items:center;gap:4px;flex-wrap:nowrap;
  order:2;width:auto;margin:0 0 0 auto;padding:0;
}
header nav a,header nav button{
  font:500 var(--fs-sm)/1 var(--sans);color:var(--mut);
  background:none;border:none;cursor:pointer;white-space:nowrap;
  padding:10px 14px;border-radius:var(--r-pill);text-decoration:none;min-width:0;
  transition:color .15s var(--ease),background .15s var(--ease);
}
header nav a:hover,header nav button:hover{color:var(--ink);background:var(--surface-2)}
header nav a.on,header nav button.on{background:var(--crema);color:var(--ink);font-weight:650;box-shadow:inset 0 0 0 1px rgba(162,113,73,.08)}
header nav .nl-s{display:none}

header .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)}
header .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;
}
header .acct .who:hover{color:var(--clay);background:var(--surface-2)}
header .acct .who:empty{display:none}
header .acct button.authbtn,header .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);
}
header .acct button.authbtn:hover,header .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. */
  header{min-height:66px;padding:12px 0;margin:0 0 18px;gap:10px;border:0;border-radius:0;box-shadow:none;
    position:static;-webkit-backdrop-filter:none;backdrop-filter:none;background:none}
  body{padding-bottom:92px}
  header nav{
    position:fixed;left:12px;right:12px;bottom:10px;top:auto;z-index:45;
    margin:0;width:auto;gap:1px;justify-content:space-around;
    background:rgba(251,247,241,.84);
    -webkit-backdrop-filter:saturate(170%) blur(18px);
    backdrop-filter:saturate(170%) blur(18px);
    border:1px solid rgba(190,168,145,.5);border-radius:18px;
    box-shadow:0 12px 32px rgba(58,42,29,.16),0 2px 8px rgba(58,42,29,.06);
    padding:6px 5px calc(6px + env(safe-area-inset-bottom));
  }
  header nav a,header nav button{
    flex:1;text-align:center;padding:10px 2px;border-radius:var(--r-xs);
    font:600 11px/1.15 var(--sans);
  }
  header nav a.on,header nav button.on{background:var(--clay-soft);color:var(--clay)}
  header nav .nl{display:none}
  header nav .nl-s{display:inline}
  header .acct{flex:0 0 auto;width:auto;min-width:0;margin-left:auto;padding-left:0;border-left:0}
  header .acct .who{max-width:86px;padding-inline:5px}
  header .acct button.authbtn,header .acct .btn.ghost{padding:9px 12px}
}
@media (min-width:861px) and (max-width:1080px){
  header .sub{display:none}
  header .acct{flex-basis:auto;width:auto;min-width:0}
  header .acct .who{display:none}
  header nav a,header nav button{padding-inline:11px}
}
@media (max-width:359px){header nav a,header nav button{font-size:10px}}