/* ============================================================
   MV CHROME — shared header, footer and design tokens.
   Loaded by BOTH home.hbs (the one-pager) and default.hbs (posts,
   tags, authors, pages) so the bar and the footer are the same object
   everywhere. Page-specific styling stays in its own template.

   Deliberately NOT in here:
     - html{font-size:100%}  Source's screen.css sets 62.5% and its post
       styles are built on that rem scale. Resetting it site-wide would
       double every size in an article. home.hbs sets it locally because
       that page uses no rem at all.
     - The global p/h1/h2/h3/ul margin reset. It would flatten post copy.
       Resets here are scoped to .nav and .site-footer only.
   ============================================================ */

:root{
  /* Light ground */
  --paper:#FAF8F3;
  --ink:#24211C;
  --ink-soft:#3B372F;
  --muted:#6A6153;
  --rule:#24211C;
  --rule-soft:#E3DDD1;
  --accent:#B23A22;
  --accent-hover:#8A2A15;
  --accent-wash:rgba(178,58,34,0.15);

  /* Dark bands */
  --dark-bg:#24211C;
  --dark-fg:#F2EEE6;
  --dark-body:#D8D0C2;
  --dark-rule:#443E35;
  --dark-muted:#9A9182;
  --dark-accent:#DE8A63;
  --dark-accent-wash:rgba(222,138,99,0.20);

  /* Grid */
  --gutter:80px;
  --col-side:372px;
  --col-gap:60px;
  --measure:780px;
  --frame:calc(var(--measure) + var(--col-gap) + var(--col-side));
  --edge:max(var(--gutter), calc((100% - var(--frame)) / 2));

  /* Type families */
  --display:Newsreader,Georgia,'Times New Roman',serif;
  --text:'Instrument Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;

  /* Source resolves all of its typography through these two variables
     (font-family:var(--gh-font-heading, var(--font-sans))). Setting them here
     hands Newsreader + Instrument Sans to every Source-rendered surface —
     post titles, in-article h2/h3, cards, Portal — without touching Source's
     own selectors. The theme's title_font / body_font dropdowns in Ghost
     admin no longer have any effect once these are set. */
  --gh-font-heading:Newsreader,Georgia,'Times New Roman',serif;
  --gh-font-body:'Instrument Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;

  /* Type scale — calibrated to hit the design's px values exactly at 1440px.
     The full scale lives here (not just the two the chrome uses) so there is
     one definition of it for the whole site. */
  --t-nl:clamp(38px,5.67vw,76px);
  --t-offer:clamp(34px,4.78vw,64px);
  --t-final:clamp(31px,3.75vw,54px);
  --t-opening:clamp(31px,3.75vw,54px);
  --t-display:clamp(28px,3.28vw,44px);
  --t-reason:clamp(23px,2.24vw,30px);
  --t-lead:clamp(21px,1.79vw,24px);
  --t-nlbody:clamp(19px,1.79vw,24px);
  --t-label:clamp(23px,2.24vw,30px);
  --t-faqq:clamp(23px,2.24vw,30px);
  --t-step:clamp(23px,2.24vw,30px);
  --t-body:clamp(17px,1.49vw,20px);
  --t-cta:clamp(17px,1.49vw,20px);
  --t-small:clamp(15px,1.18vw,17px);
}

/* Smooth in-page scrolling, but never for reduced-motion users. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}
html{scroll-padding-top:88px;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ---------- layout primitives the chrome needs ---------- */
.band{padding-left:var(--edge);padding-right:var(--edge);}
.grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--col-side));
  gap:0 var(--col-gap);
}
.grid > .main{grid-column:1;max-width:var(--measure);}
.grid > .side{grid-column:2;}
.grid > .wide{grid-column:1 / span 2;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-size:var(--t-cta);font-weight:600;
  background:var(--ink);color:var(--paper);padding:20px 40px;
  white-space:nowrap;align-self:flex-start;text-decoration:none;
}
.btn:hover{background:var(--accent-hover);color:var(--paper);}
.btn-sm{padding:12px 20px;font-size:var(--t-small);}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:5;background:var(--paper);
  border-bottom:1px solid var(--rule);align-items:center;
}
.nav p,.site-footer p{margin:0;}
.nav a,.site-footer a{text-decoration:none;}
.nav-links{display:flex;gap:36px;padding:20px 0;align-items:baseline;}
.wordmark{font-size:var(--t-small);font-weight:600;letter-spacing:-0.01em;
          white-space:nowrap;margin-right:12px;color:var(--ink);}
/* Direct children only: the wordmark contains its own <a> home link, which
   must not inherit these rules (or the display:none below). */
.nav-links > a{font-size:var(--t-small);color:var(--ink-soft);}
.nav-links > a:hover{color:var(--accent);}
.nav-cta{display:flex;justify-content:flex-end;padding:12px 0;}

/* ---------- footer ---------- */
.site-footer{background:var(--paper);padding:52px var(--edge) 68px;}
.site-footer .grid{align-items:center;}
.footer-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.footer-links a{font-size:var(--t-small);color:var(--muted);}
.footer-links a:hover{color:var(--accent);}
.footer-cta{display:flex;justify-content:flex-end;}
.footer-cta a{
  font-size:var(--t-small);font-weight:600;color:var(--accent);
  border-bottom:2px solid var(--accent);padding-bottom:3px;white-space:nowrap;
}

/* ============================================================
   RESPONSIVE — mirrors the one-pager's tiers.
   ============================================================ */
@media (max-width:1180px){
  :root{--gutter:56px;--col-side:260px;--col-gap:40px;}
}

@media (max-width:980px){
  :root{--gutter:48px;--col-gap:0px;}
  .grid{grid-template-columns:minmax(0,1fr);}
  .grid > .main,.grid > .side,.grid > .wide{grid-column:1;}
  /* The bar stays one row even where the page grid collapses — a stacked
     sticky bar would eat ~13% of a short viewport for the whole scroll. */
  .nav.grid{grid-template-columns:minmax(0,1fr) auto;align-items:center;}
  .nav > .nav-links{grid-column:1;}
  .nav > .nav-cta{grid-column:2;margin-top:0;justify-content:flex-end;}
  .nav-links{gap:22px;}
  .footer-cta{justify-content:flex-start;}
  .site-footer .side{margin-top:20px;}
}

/* Wordmark + links + CTA run out of room on one line below ~760px: measured
   clearance is 39px at 760, 9px at 730, and the links overlap the button at
   681. Drop them at 760 rather than wrapping — this bar is sticky, and a
   two-line bar would eat ~13% of a short viewport for the whole scroll.
   (Re-measure if a fourth link is ever added back; four links collide at 800.) */
@media (max-width:760px){
  .nav-links > a{display:none;}
}

@media (max-width:680px){
  :root{--gutter:24px;}
  .nav-links{gap:20px;flex-wrap:wrap;min-width:0;}
  .btn{width:100%;text-align:center;padding:18px 24px;}
  .btn-sm{width:auto;}
  /* At 390px the wordmark and the CTA collide; shrink the CTA and let the
     wordmark ellipsis rather than letting them overlap. */
  .nav .btn-sm{font-size:15px;padding:10px 13px;}
  .nav .wordmark{font-size:16px;margin-right:0;}
  .wordmark{min-width:0;overflow:hidden;text-overflow:ellipsis;}
}

/* ============================================================
   SOURCE-RENDERED PAGES (posts, tags, authors, pages)
   Newsreader is loaded at 300/400 only — the light weights the one-pager
   uses. Source would otherwise ask for 600/700 here and the browser would
   synthesise a fake bold, so pin the weights to what is actually loaded.
   ============================================================ */
.gh-article-title,
.gh-featured-title,
.gh-card-title,
.gh-header-title{font-weight:300;letter-spacing:-0.02em;}
.gh-content h2,.gh-content h3{font-weight:400;letter-spacing:-0.015em;}