/* ============================================================
   MV CHROME, new brand (approved 2026-10-29).
   Loaded on every page: home.hbs and default.hbs (posts, blog list,
   tags, pages). Holds the tokens, the header, the footer, the blog
   list and the brand overrides for Source-rendered posts.
   Home-only layout lives in mv-home.css.

   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. Everything here is px/clamp.
     - A global p/h1/ul margin reset. It would flatten post copy, so
       resets are scoped to the chrome and the blog list.
   ============================================================ */

:root{
  /* Plaster (light) and ink (dark) */
  --light:#F4F0EC; --on-light:#24211C; --mute-light:#5E5A52; --hair-light:#D9D2CA;
  --field:#24211C; --on-field:#F4F0EC; --mute-field:#A9A092; --hair-field:#443E35;
  --accent:#A6192E; --on-accent:#F4F0EC; --accent-hover:#7F1323;

  --display:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --body:'Instrument Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;

  /* Source resolves its typography through these two, so posts, cards
     and Portal pick up Caslon + Instrument Sans. The title_font and
     body_font settings in Ghost admin no longer have any effect. */
  --gh-font-heading:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --gh-font-body:'Instrument Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;

  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px;
  --measure:780px; --col-side:372px; --col-gap:60px; --gutter:80px;
  --frame:calc(var(--measure) + var(--col-gap) + var(--col-side));
  --edge:max(var(--gutter), calc((100% - var(--frame)) / 2));

  --t-hero:clamp(38px,5vw,72px); --t-offer:clamp(32px,4.1vw,56px); --t-opening:clamp(29px,3.3vw,46px);
  --t-nl:clamp(26px,2.7vw,38px); --t-statement:clamp(25px,2.7vw,36px);
  --t-row:clamp(21px,2vw,26px); --t-lead:clamp(19px,1.79vw,24px); --t-body:clamp(17px,1.49vw,20px); --t-small:clamp(15px,1.18vw,17px);
}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
html{scroll-padding-top:96px;}
body{margin:0;background:var(--light);color:var(--on-light);font-family:var(--body);-webkit-font-smoothing:antialiased;}

.band{padding-left:var(--edge);padding-right:var(--edge);}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-size:var(--t-body);font-weight:600;background:var(--accent);color:var(--on-accent);
  padding:var(--s3) var(--s5);white-space:nowrap;text-decoration:none;border-radius:0;}
.btn:hover{background:var(--accent-hover);color:var(--on-accent);}
.btn-sm{padding:var(--s2) var(--s3);font-size:var(--t-small);}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:5;background:var(--light);border-bottom:1px solid var(--on-light);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-top:var(--s2);padding-bottom:var(--s2);}
.nav p,.site-footer p{margin:0;}
.nav a,.site-footer a{text-decoration:none;}
.nav-links{display:flex;gap:var(--s5);align-items:baseline;padding:var(--s3) 0;min-width:0;}
.nav-links > a{font-size:var(--t-small);color:var(--mute-light);white-space:nowrap;}
.nav-links > a:hover{color:var(--accent);}
.wordmark{font-size:var(--t-small);font-weight:600;letter-spacing:-0.01em;white-space:nowrap;color:var(--on-light);}
.wordmark a{color:inherit;}

/* ---------- footer: repeats on every page, so ink ---------- */
.site-footer{background:var(--field);color:var(--on-field);border-top:1px solid var(--hair-field);
  padding-top:var(--s5);padding-bottom:var(--s6);display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;}
.site-footer .wordmark{color:var(--on-field);}
.footer-links{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;}
.footer-links a{font-size:var(--t-small);color:var(--mute-field);}
.footer-links a:hover{color:var(--on-field);}
.footer-cta{font-size:var(--t-small);font-weight:600;color:var(--on-field);border-bottom:1px solid var(--on-field);padding-bottom:var(--s1);white-space:nowrap;}
.footer-cta:hover{color:var(--on-field);}

/* ---------- shared type (home + blog list) ---------- */
.h-offer{font-family:var(--display);font-weight:400;font-size:var(--t-offer);line-height:1.1;letter-spacing:-0.02em;}
.lead{font-size:var(--t-lead);line-height:1.45;}
.body{font-size:var(--t-body);line-height:1.68;}
.mute{font-size:var(--t-small);line-height:1.55;color:var(--mute-light);}
.row-h{font-family:var(--body);font-size:var(--t-row);line-height:1.3;font-weight:600;letter-spacing:-0.012em;}
.in{display:flex;flex-direction:column;gap:var(--s4);max-width:var(--measure);margin-left:auto;margin-right:auto;width:100%;}
.rows{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;}
.rows > *{border-top:1px solid var(--hair-light);padding:var(--s4) 0;display:flex;flex-direction:column;gap:var(--s2);}
.rows > :last-child{border-bottom:1px solid var(--on-light);}

/* ---------- blog list (index.hbs at /blog/, tag.hbs) ---------- */
.mv-blog{padding-top:var(--s7);padding-bottom:var(--s7);}
.mv-blog p,.mv-blog h1,.mv-blog h2{margin:0;text-wrap:pretty;}
.post-title{color:var(--on-light);text-decoration:none;}
.post-title:hover{color:var(--accent);}
/* Picture-first rows (2.0.2): the list runs the full frame so the cover sits
   in the side column's width (372px) and the text in the measure. */
.mv-blog .in{max-width:var(--frame);}
.mv-blog .in > p,.mv-blog .in > h1,.mv-blog .in > .lead{max-width:var(--measure);}
.rows-pic > *{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--col-gap);padding:var(--s5) 0;}
.row-pic-img{flex:0 0 var(--col-side);max-width:100%;display:block;}
.row-pic-img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;}
.row-pic-text{flex:999 1 420px;min-width:0;max-width:var(--measure);display:flex;flex-direction:column;gap:var(--s3);}
.mv-blog .label{margin:0;font-size:var(--t-small);line-height:1.4;font-weight:500;color:var(--mute-light);}
.mv-blog .label a{color:var(--mute-light);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair-light);}
.mv-blog .label a:hover{color:var(--accent);text-decoration-color:currentColor;}
.row-pic-h{font-family:var(--display);font-weight:400;font-size:var(--t-statement);line-height:1.25;letter-spacing:-0.015em;}
.mv-pager{display:flex;justify-content:space-between;gap:var(--s4);font-size:var(--t-small);font-weight:600;}
.mv-pager a{color:var(--accent);text-decoration:none;}
.mv-pager a:hover{color:var(--accent-hover);}

/* ---------- Source-rendered posts and pages ----------
   Caslon is loaded at 400 and 700 only. Pin titles to 400, the brand's
   display weight, so the browser never fakes a bold. */
.gh-article-title,.gh-card-title,.gh-header-title,.gh-featured-title{font-weight:400;letter-spacing:-0.02em;}
.gh-content h2,.gh-content h3{font-weight:400;letter-spacing:-0.015em;}
.gh-content a{color:var(--accent);}
.gh-article-tag{color:var(--accent);}
.gh-button,.gh-content .kg-button-card a.kg-btn{border-radius:0;}

/* ---------- post closer (partials/mv-post-closer.hbs) ----------
   Content is the Ghost page "post-closer". Square, ink-ruled box. */
.mv-closer{margin-top:72px;}
.mv-closer-box{border:1px solid var(--on-light);padding:40px 44px 44px;}
.mv-closer-box > :first-child{margin-top:0;}
.mv-closer-box h2{font-size:var(--t-statement);line-height:1.3;}
.mv-closer-box hr{margin-top:36px;border-color:var(--hair-light);}
.mv-closer-box hr + *{margin-top:36px;}

/* ============================================================
   RESPONSIVE: same tiers as the approved page.
   ============================================================ */
@media (max-width:1180px){:root{--gutter:56px;--col-side:260px;--col-gap:40px;} .nav-links{gap:var(--s4);}}
@media (max-width:980px){:root{--gutter:48px;}}
/* Wordmark + five links + the button measure ~855px at 15px type with the
   48px gutters; below 900px, drop the links rather than wrap a sticky bar. */
@media (max-width:900px){.nav-links > a{display:none;}}
@media (max-width:680px){
  :root{--gutter:24px;}
  .mv-blog{padding-top:var(--s6);padding-bottom:var(--s6);}
  .row-pic-img{flex:1 1 100%;}
  .row-pic-text{flex-basis:100%;}
  .nav .btn-sm{display:inline-block;font-size:15px;white-space:nowrap;padding:var(--s2) var(--s3);}
  .wordmark{min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .mv-closer{margin-top:56px;}
  .mv-closer-box{padding:28px 24px 30px;}
}