/* The article pages share the homepage's color, type, and original gradients.
   The reading area stays quiet, with one wide column and a small chapter guide. */
:root { --ink:#172d32; --soft:#5a6a69; --paper:#f6f7f4; --line:rgba(23,45,50,.14); font-family:Manrope,-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink); font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--paper); }
a { color:inherit; text-decoration:none; }
svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; }
h1,h2,p { margin:0; }
a:focus-visible { outline:2px solid #315f72; outline-offset:5px; }
.skip { position:fixed; top:-100px; left:20px; padding:14px; background:white; z-index:30; }
.skip:focus { top:20px; }
.masthead { position:fixed; z-index:10; inset:0 0 auto; padding:26px 5.5%; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:14px; transition:background .25s,padding .25s; }
.masthead.scrolled { padding-block:15px; background:rgba(246,247,244,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.wordmark { font-weight:700; letter-spacing:-.5px; white-space:nowrap; }
.masthead nav { display:flex; gap:30px; align-items:center; }
.masthead a[aria-current="page"] { text-decoration:underline; text-underline-offset:6px; }
.glass-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:12px 20px; border:1px solid rgba(255,255,255,.9); border-radius:16px; background:rgba(255,255,255,.58); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(23,45,50,.08); font-size:14px; font-weight:600; transition:background .2s,transform .2s; }
.glass-button:hover { background:rgba(255,255,255,.85); transform:translateY(-2px); }
.reading-progress { position:absolute; left:0; right:0; bottom:0; height:2px; background:#315f72; transform-origin:left; transform:scaleX(var(--read,0)); }

/* These are the cached, non-fluid layers shared with the homepage Work cards. */
.gradient { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.gradient-base { position:absolute; inset:0; width:100%; height:100%; }
.gradient-layer { position:absolute; transform-origin:center; will-change:transform; pointer-events:none; }
.article-hero { position:relative; isolation:isolate; overflow:hidden; min-height:74svh; display:flex; align-items:flex-end; padding:140px 8vw 72px; }
.article-hero>.gradient { z-index:-2; }
/* A light local veil protects title contrast through all points in the loop. */
.article-hero::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(247,250,249,.38),rgba(247,250,249,.05)); pointer-events:none; }
.hero-copy { width:min(1040px,100%); animation:arrive .7s both; }
.back-link { display:inline-flex; gap:12px; align-items:center; font-size:13px; margin-bottom:36px; padding:8px 0; }
.back-link:hover { text-decoration:underline; text-underline-offset:5px; }
.eyebrow { text-transform:uppercase; font-size:11px; font-weight:600; letter-spacing:.14em; margin-bottom:20px; }
h1 { font-size:clamp(64px,9.2vw,138px); line-height:1.04; font-weight:500; letter-spacing:-.065em; margin-left:-.055em; max-width:1050px; }
.dek { max-width:680px; font-size:clamp(18px,1.7vw,23px); line-height:1.6; margin-top:26px; }
.byline { display:flex; gap:24px; font-size:13px; margin-top:34px; }
.byline span+span { padding-left:24px; border-left:1px solid rgba(23,45,50,.3); }

.article-layout { display:grid; grid-template-columns:210px minmax(0,710px); gap:clamp(45px,7vw,105px); width:min(1180px,84%); margin:0 auto; padding:90px 0 100px; align-items:start; }
.article-index { align-self:stretch; }
.article-index nav { position:sticky; top:116px; }
.article-index nav>p { font-size:12px; color:var(--soft); margin-bottom:25px; }
.article-index a { display:flex; align-items:baseline; gap:12px; padding:12px 0; font-size:13px; line-height:1.6; color:var(--soft); border-top:1px solid var(--line); transition:color .2s; }
.article-index a span { flex:none; font-size:10px; font-variant-numeric:tabular-nums; opacity:.6; }
.article-index a:hover,.article-index a[aria-current] { color:var(--ink); }
.article-index a[aria-current] { font-weight:600; }
.article-body { min-width:0; }
.article-body p,.article-body li { font-size:18px; line-height:1.85; color:#354a4e; }
.article-body>p:first-child { font-size:23px; line-height:1.65; color:var(--ink); }
.article-body p+p { margin-top:24px; }
.article-body a { text-decoration:underline; text-underline-offset:4px; text-decoration-color:#8ba1a6; }
.article-body a:hover { text-decoration-color:var(--ink); }
.article-section { margin-top:64px; padding-top:36px; border-top:1px solid var(--line); }
.article-section h2 { font-size:clamp(28px,2.7vw,39px); line-height:1.2; letter-spacing:-.035em; font-weight:500; margin-bottom:26px; }
.article-body ul { padding-left:22px; margin:24px 0; }
.article-body li+li { margin-top:12px; }
.article-close { padding:66px 8vw 80px; border-top:1px solid var(--line); background:#e5edf0; }
.article-close h2 { font-size:clamp(36px,4vw,60px); line-height:1.15; font-weight:500; letter-spacing:-.045em; max-width:760px; }
.closing-links { display:flex; gap:30px; flex-wrap:wrap; align-items:center; margin-top:30px; }
.contact-link,.text-link { display:inline-flex; align-items:center; gap:20px; padding:12px 0; border-bottom:1px solid #8da0a5; }
.contact-link { font-size:clamp(18px,2.4vw,28px); letter-spacing:-.025em; }
.text-link { font-size:15px; }
.contact-link svg,.text-link svg { transition:transform .2s; }
.contact-link:hover svg,.text-link:hover svg { transform:translateX(4px); }
footer { display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center; padding:35px 5.5%; font-size:13px; color:var(--soft); }
.contact-status:empty { display:none; }
@keyframes arrive { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media(max-width:900px) {
  .masthead { padding:20px 5.5%; }
  .masthead nav { gap:18px; }
  .masthead nav>a:not(.glass-button) { display:none; }
  .article-hero { min-height:70svh; padding:130px 7vw 55px; }
  .hero-copy { width:100%; }
  .back-link { margin-bottom:28px; }
  .article-layout { display:block; width:86%; padding:55px 0 70px; }
  .article-index { margin-bottom:48px; }
  .article-index nav { position:static; }
  .article-index nav>p { margin-bottom:14px; }
  .article-index a { padding:11px 0; font-size:14px; }
  .article-body>p:first-child { font-size:21px; }
  .article-body p,.article-body li { font-size:17px; }
  .article-section { margin-top:46px; padding-top:28px; }
  .article-close { padding:50px 7vw; }
  footer { padding:30px 7vw; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

/* Keep the home signature at the right edge and the contact action beside it. */
.masthead { gap:28px; }
.masthead nav { flex:1; }
.masthead nav .glass-button { margin-left:auto; }
@media (max-width:900px) {
  .masthead { gap:20px; }
  .masthead nav .glass-button { margin-left:0; }
}