/* ============================================================
   VESPER ADVISORY — Blog / Insights (matches the "Instrument" site)
   Shared stylesheet for /blog/ pages. Token-based, light + dark.
   ============================================================ */
:root{
  --serif: "Jost","Futura PT",Futura,"Avenir Next",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans: "Jost","Futura PT",Futura,"Avenir Next",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, "Cascadia Code", Consolas, monospace;
  --paper:#F5F7F7;--surface:#EFF0F3;--surface-2:#FFFFFF;--ink:#1E263A;--ink-2:#596272;--ink-3:#838997;
  --line:#DDE0E4;--line-2:#CACDD4;--copper:#416588;--copper-2:#84ADD7;--copper-text:#416588;--copper-soft:rgba(65,101,136,.10);
  --btn-bg:#416588;--btn-bg-hover:#365472;--btn-fg:#fff;--good:#22795B;
  --shadow:none;
  color-scheme:light;
}
/* Dark-mode override removed 27 Aug 2026. Only seven pages implemented
   prefers-color-scheme, so on a machine set to dark these went dark while the
   other forty-odd stayed light — the site read as two different sites. One
   theme site-wide until dark mode is done everywhere, deliberately.
   The Sprint's SETUP-SHEET.html keeps its dark mode: it is a standalone
   document read in its own tab, not part of browsing the site. */

:root[data-theme="light"]{--paper:#F5F7F7;--surface:#EFF0F3;--surface-2:#FFFFFF;--ink:#1E263A;--ink-2:#596272;--ink-3:#838997;--line:#DDE0E4;--line-2:#CACDD4;--copper:#416588;--copper-2:#84ADD7;--copper-text:#416588;--btn-bg:#416588;--btn-bg-hover:#365472;--btn-fg:#fff;--good:#22795B;color-scheme:light}
:root[data-theme="dark"]{--paper:#19233A;--surface:#1A243A;--surface-2:#1E273E;--ink:#E9ECF1;--ink-2:#A1A8B7;--ink-3:#8B93A2;--line:rgba(255,255,255,.085);--line-2:rgba(255,255,255,.14);--copper:#719DC9;--copper-2:#85B1DE;--copper-text:#7EAAD6;--btn-bg:#719DC9;--btn-bg-hover:#85B1DE;--btn-fg:#19233A;--good:#46B389;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size-adjust:.51;font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--serif);font-size-adjust:none;font-weight:600;line-height:1.12;letter-spacing:-0.005em;text-wrap:balance;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2.5px solid var(--copper);outline-offset:3px;border-radius:3px}
::selection{background:var(--copper);color:#fff}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.measure{width:min(72ch,92vw);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--copper-text);font-weight:600;display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--copper-text);opacity:.7}
.muted{color:var(--ink-2)}

/* header (shared with site look) */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(4px)){header.site{background:var(--paper)}}
header .wrap{width:min(1180px,92vw)}
.nav{display:flex;align-items:center;gap:1rem;height:66px}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto}
.brand .mark{width:34px;height:34px;flex:none}
.brand /* Wordmark normalised 27 Aug 2026: six different lockups existed across the
   site (serif size, mono vs sans, .13em to .32em tracking, weight 600 vs 700),
   so the logo visibly changed as you moved between pages. One lockup now.
   The colour-only override on the navy panel is deliberately untouched. */
.wordmark{display:flex;flex-direction:column;line-height:1}
.brand .wordmark b{font-family:var(--serif);font-size-adjust:none;font-size:1.16rem;font-weight:600;letter-spacing:-0.004em}
.brand .wordmark span{font-family:var(--mono);font-size:.56rem;font-weight:500;letter-spacing:.32em;color:var(--ink-2);margin-top:3px}
.nav a.navlink{font-size:.92rem;color:var(--ink-2);font-weight:500}
.nav a.navlink:hover{color:var(--copper-text)}
/* Site-wide nav + hamburger, ported from the homepage header (CHANGE-01).
   The .navlink rules above are retired but kept so nothing breaks if an old
   copy of the header is ever restored. */
.nav-links{display:flex;align-items:center;gap:.95rem}
.nav-links a{font-size:.875rem;color:var(--ink-2);font-weight:500;position:relative;transition:color .15s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--copper);transition:width .22s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-links .only-mobile{display:none}
.nav-actions{display:flex;align-items:center;gap:.6rem}
header.site .btn{white-space:nowrap}  /* CHANGE-02: the homepage .btn carries nowrap; without it the CTA label wraps to three lines inside the flex row */
.hamburger{display:none}
@media (max-width:960px){
  .nav-links{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 4vw 1rem;
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease, visibility .3s ease}
  .nav-links.open{max-height:480px;visibility:visible}
  .nav-links a{padding:.8rem 0;width:100%;border-bottom:1px solid var(--line)}
  .nav-links .only-mobile{display:block;color:var(--copper-text);font-weight:600}
  .hamburger{display:inline-flex}
  .nav-actions .btn-primary{display:none}
  .icon-btn{width:44px;height:44px}
}
.icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:2px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{color:var(--copper-text);border-color:var(--copper)}
.icon-btn svg{width:18px;height:18px}
/* Sun/moon icon rules removed 27 Aug 2026 with the dark palette. Nothing on
   the site sets data-theme and no toggle control exists, so these were dead. */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;padding:.72em 1.25em;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:transform .18s,background .18s}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn-primary:hover{background:var(--btn-bg-hover);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--copper);color:var(--copper-text)}

/* blog index */
.blog-hero{padding:clamp(3rem,7vw,5.5rem) 0 1.5rem}
.blog-hero h1{font-size:clamp(2.4rem,5vw,3.6rem)}
.blog-hero p{color:var(--ink-2);font-size:1.15rem;margin-top:1rem;max-width:52ch}
.posts{display:grid;gap:1rem;padding:1.5rem 0 5rem}
.post-card{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:baseline;padding:1.7rem 0;border-top:1px solid var(--line);transition:background .2s}
.post-card:last-child{border-bottom:1px solid var(--line)}
.post-card .date{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--copper-text);white-space:nowrap}
.post-card h2{font-size:1.5rem}
.post-card p{color:var(--ink-2);font-size:1rem;margin-top:.5rem;max-width:64ch}
.post-card .go{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-text);white-space:nowrap;display:inline-flex;gap:.5em;transition:gap .18s}
.post-card:hover .go{gap:.85em}

/* article */
.article{padding:clamp(2.5rem,5vw,4rem) 0 5rem}
.back{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-text);display:inline-flex;gap:.5em;margin-bottom:1.8rem}
.article .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.article h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:.7rem 0 1rem}
.article .byline{color:var(--ink-2);font-size:.95rem;border-bottom:1px solid var(--line);padding-bottom:1.6rem;margin-bottom:2rem}
.article .draft{background:var(--copper-soft);border:1px solid color-mix(in srgb,var(--copper) 30%,transparent);border-radius:2px;padding:.8rem 1rem;font-size:.88rem;color:var(--ink-2);margin-bottom:2rem}
.article p{margin:0 0 1.3rem;color:var(--ink)}
.article h2{font-size:1.6rem;margin:2.4rem 0 .9rem}
.article ul{margin:0 0 1.3rem;padding-left:1.2rem;color:var(--ink)}
.article li{margin:.4rem 0}
.article strong{color:var(--ink)}
.article .pull{font-family:var(--serif);font-size-adjust:none;font-size:1.5rem;line-height:1.3;border-left:3px solid var(--copper);padding-left:1.3rem;margin:2rem 0;color:var(--ink)}
.article .cta{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.article .cta span{color:var(--ink-2)}

/* footer */
footer.site{border-top:1px solid var(--line);background:var(--surface);padding:2.6rem 0;font-size:.85rem;color:var(--ink-2)}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--copper-text)}

@media (max-width:720px){
  .post-card{grid-template-columns:1fr;gap:.5rem}
  .post-card .go{justify-self:start;margin-top:.3rem}
  .nav a.navlink{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── house type scale — one system across the site ───────────── */
h1,h2{font-family:var(--serif);font-size-adjust:none;font-weight:500;letter-spacing:-0.007em;text-wrap:balance}
h3,h4,h5,h6{font-family:var(--serif);font-size-adjust:none;font-weight:600;letter-spacing:-0.003em}
p{max-width:68ch}