:root { --ink: #0A0A0C; --ink-2: #14141A; --ink-3: #1F1F26; --paper: #F5F4EE; --paper-2: rgba(245,244,238,0.78); --paper-3: rgba(245,244,238,0.46); --accent: #B5F03F; --accent-pale: rgba(181,240,63,0.18); --rule: rgba(245,244,238,0.10); --rule-soft: rgba(245,244,238,0.05); --display: 'Bricolage Grotesque','Inter',sans-serif; --sans: 'Inter',sans-serif; --mono: 'JetBrains Mono',monospace; }
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.65; color:var(--paper); background:var(--ink); -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); opacity:0.04; mix-blend-mode:overlay; z-index:999; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; transition:color 180ms ease; }
::selection { background:var(--accent-pale); color:var(--paper); }
.wrap { max-width:1320px; margin:0 auto; padding:0 2rem; }
.narrow { max-width:720px; margin:0 auto; padding:0 2rem; }
.nav { background:var(--ink); padding:1.4rem 0; position:sticky; top:0; z-index:50; border-bottom:1px solid var(--rule-soft); }
.nav-inner { display:flex; justify-content:space-between; align-items:center; }
.nav-brand { font-family:var(--mono); font-weight:500; font-size:0.92rem; color:var(--paper); }
.nav-brand::before { content:'◆ '; color:var(--accent); }
.nav-links { display:flex; gap:2.25rem; font-family:var(--mono); font-size:0.82rem; }
.nav-links a { color:var(--paper-3); position:relative; padding:0.3rem 0; }
.nav-links a:hover { color:var(--paper); }
.nav-links a[aria-current="page"] { color:var(--paper); }
.nav-links a[aria-current="page"]::before { content:'/'; color:var(--accent); margin-right:4px; }
.article-hero { padding:5rem 0 4rem; border-bottom:1px solid var(--rule); }
.article-meta { font-family:var(--mono); font-size:0.78rem; color:var(--paper-3); margin-bottom:2rem; display:flex; gap:1.5rem; flex-wrap:wrap; }
.article-meta .cat { color:var(--accent); }
.article-hero h1 { font-family:var(--display); font-weight:500; font-size:clamp(2.6rem, 5.4vw, 4.4rem); line-height:0.96; letter-spacing:-0.04em; color:var(--paper); margin-bottom:1.75rem; max-width:22ch; font-variation-settings:"opsz" 96; }
.article-hero h1 em { font-style:italic; color:var(--accent); }
.article-hero p.dek { font-family:var(--display); font-weight:300; font-size:clamp(1.2rem, 2vw, 1.5rem); line-height:1.4; letter-spacing:-0.015em; color:var(--paper-2); max-width:38rem; font-variation-settings:"opsz" 48; }
article.body { padding:5rem 0 4rem; }
article.body p, article.body ul, article.body ol { font-size:1.1rem; line-height:1.75; color:var(--paper-2); margin-bottom:1.5rem; max-width:38rem; }
article.body p strong { color:var(--paper); font-weight:500; }
article.body h2 { font-family:var(--display); font-weight:500; font-size:clamp(1.7rem, 3vw, 2.2rem); line-height:1.05; letter-spacing:-0.025em; color:var(--paper); margin:3.5rem 0 1.5rem; max-width:24ch; font-variation-settings:"opsz" 56; }
article.body h2 em { font-style:italic; color:var(--accent); }
article.body .pull { font-family:var(--display); font-style:italic; font-size:clamp(1.6rem, 2.6vw, 2.1rem); line-height:1.2; color:var(--paper); border-left:2px solid var(--accent); padding:0.75rem 0 0.75rem 1.75rem; margin:3rem 0; font-variation-settings:"opsz" 64; }
article.body .pull::before { content:'"'; color:var(--accent); margin-right:2px; }
article.body .pull::after { content:'"'; color:var(--accent); margin-left:2px; }
article.body .section-marker { font-family:var(--mono); font-size:0.74rem; color:var(--accent); margin:4rem 0 1rem; max-width:38rem; }
article.body figure { margin:3rem auto; max-width:100%; padding:0 2rem; }
article.body figure img { width:100%; border:1px solid var(--rule); background:var(--ink-2); }
article.body figure figcaption { font-family:var(--mono); font-size:0.78rem; color:var(--paper-3); margin-top:0.85rem; max-width:38rem; }
article.body figure figcaption strong { color:var(--accent); font-weight:500; }
article.body .stat-row { display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; max-width:38rem; margin:2.5rem 0; padding:2rem; border:1px solid var(--rule); background:var(--ink-2); }
article.body .stat { display:flex; flex-direction:column; gap:0.35rem; }
article.body .stat-num { font-family:var(--display); font-weight:500; font-size:2.2rem; line-height:1; color:var(--accent); font-variation-settings:"opsz" 64; }
article.body .stat-label { font-family:var(--mono); font-size:0.74rem; color:var(--paper-3); }
article.body .slide-card { margin:3rem auto; max-width:100%; padding:0; }
article.body .slide-card .slide-frame { background:var(--ink-2); border:1px solid var(--rule); padding:3rem 2.5rem; aspect-ratio:16/9; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
article.body .slide-card .slide-eyebrow { position:absolute; top:1.5rem; left:1.5rem; font-family:var(--mono); font-size:0.7rem; color:var(--accent); letter-spacing:0.16em; }
article.body .slide-card .slide-meta { position:absolute; bottom:1.5rem; right:1.5rem; font-family:var(--mono); font-size:0.65rem; color:var(--paper-3); letter-spacing:0.14em; text-transform:uppercase; }
article.body .slide-card h3.slide-headline { font-family:var(--display); font-weight:500; font-size:clamp(2rem, 5vw, 3.4rem); line-height:0.98; letter-spacing:-0.025em; color:var(--paper); margin:0; max-width:none; font-variation-settings:"opsz" 80; }
article.body .slide-card h3.slide-headline em { font-style:italic; color:var(--accent); }
article.body .slide-card .slide-sub { font-family:var(--sans); font-size:0.95rem; line-height:1.5; color:var(--paper-3); margin-top:1rem; max-width:32rem; }
article.body .slide-card figcaption { font-family:var(--mono); font-size:0.78rem; color:var(--paper-3); margin-top:0.85rem; padding:0 2rem; }
article.body .slide-card figcaption strong { color:var(--accent); font-weight:500; }
.article-foot { padding:4rem 0 6rem; border-top:1px solid var(--rule); background:var(--ink-2); }
.article-foot .grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.article-foot .back-link { font-family:var(--mono); font-size:0.82rem; color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px; align-self:start; }
.article-foot .cta-block { text-align:right; }
.article-foot .cta-block .label { font-family:var(--mono); font-size:0.74rem; color:var(--paper-3); margin-bottom:0.75rem; display:block; }
.article-foot .cta-block h3 { font-family:var(--display); font-weight:500; font-size:1.5rem; line-height:1.05; color:var(--paper); margin-bottom:1.25rem; letter-spacing:-0.02em; }
.btn { display:inline-flex; align-items:center; gap:0.55rem; background:var(--accent); color:var(--ink); padding:0.85rem 1.5rem; font-family:var(--sans); font-weight:500; font-size:0.9rem; transition:all 180ms ease; }
.btn::after { content:'↗'; transition:transform 180ms ease; }
.btn:hover { background:var(--paper); }
.btn:hover::after { transform:translate(3px, -3px); }
footer { background:var(--ink-2); color:var(--paper-3); padding:2.5rem 0; font-family:var(--mono); font-size:0.78rem; border-top:1px solid var(--rule); }
.foot-inner { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:1.5rem; }
.foot-centre { text-align:center; }
.foot-right { text-align:right; }
footer a { color:var(--paper-2); }
footer a:hover { color:var(--accent); }
@media (max-width: 980px) {
  .nav-links { gap:1.25rem; font-size:0.78rem; }
  .article-foot .grid { grid-template-columns:1fr; }
  .article-foot .cta-block { text-align:left; }
  article.body figure { padding:0; }
  article.body .slide-card .slide-frame { aspect-ratio:auto; padding:2.5rem 1.75rem; }
  article.body .slide-card figcaption { padding:0 0.5rem; }
  article.body .stat-row { grid-template-columns:1fr; gap:1.25rem; }
  .foot-inner { grid-template-columns:1fr; text-align:center; gap:0.6rem; }
  .foot-centre, .foot-right { text-align:center; }
}
@media (max-width: 560px) { .nav-inner { flex-direction:column; align-items:flex-start; gap:0.6rem; } }