:root{
  --bg:#0b0f14; --surface:#111720; --surface-2:#151d27;
  --line:#1e2833; --line-2:#2b3948;
  --ink:#eef3f8; --ink-2:#c2cdd8; --muted:#94a3b1;
  --accent:#22c55e; --accent-ink:#04240f;
  --r:12px; --r-lg:18px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --read:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:78px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:700;
  line-height:1.14; letter-spacing:-.022em}
p{margin:0}
ul,ol{margin:0}
.wrap{width:min(1120px, calc(100% - 2.2rem)); margin-inline:auto}
.wrap-narrow{width:min(720px, calc(100% - 2.2rem))}
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent);
  color:var(--accent-ink); padding:.8rem 1.2rem; font-weight:700}
.skip-link:focus{left:0}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:5px}

/* the wordmark is type plus a drawn square - there is no logo file */
.mark{display:inline-block; width:15px; height:15px; border-radius:4px;
  background:var(--accent); margin-right:.55rem; vertical-align:-2px}

/* ------------------------------- header ------------------------------- */
.top{position:sticky; top:0; z-index:100; background:rgba(11,15,20,.93);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:1.2rem; padding:.65rem 0}
.logo{display:inline-flex; align-items:center; min-height:44px; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:1.12rem;
  letter-spacing:-.015em}
.burger{display:none; margin-left:auto; width:46px; height:46px; padding:0; cursor:pointer;
  border:1px solid var(--line-2); border-radius:9px; background:var(--surface);
  align-items:center; justify-content:center}
.burger span{position:relative; display:block; width:18px; height:2px; background:var(--ink)}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px;
  height:2px; background:var(--ink); transition:.18s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.top[data-open="true"] .burger span{background:transparent}
.top[data-open="true"] .burger span::before{top:0; transform:rotate(45deg)}
.top[data-open="true"] .burger span::after{top:0; transform:rotate(-45deg)}
.nav{margin-left:auto}
.nav ul{display:flex; align-items:center; gap:.1rem; list-style:none; padding:0; margin:0}
.nav a{display:flex; align-items:center; min-height:44px; padding:.5rem .8rem; border-radius:8px;
  color:var(--ink-2); font-size:.95rem; font-weight:500; text-decoration:none;
  transition:color .16s var(--ease), background .16s var(--ease)}
.nav a:hover{color:var(--ink); background:var(--surface)}

/* -------------------------------- home -------------------------------- */
.hero{padding-block:clamp(2.4rem,5vw,4rem) clamp(1.4rem,3vw,2.2rem)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.8rem,4vw,3.6rem); align-items:center}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem); max-width:20ch; text-wrap:balance}
/* Licensed photography from the operator's Envato account. Decorative, so the
   alt is empty - the picture says nothing the headline does not. */
.hero-shot img{width:100%; max-width:1000px; height:auto; border-radius:var(--r-lg); display:block}
.hero-panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,1.9rem)}
.hp-h{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700}
.hp-list{list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.85rem; counter-reset:hp}
.hp-list li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.2rem .8rem;
  align-items:baseline; counter-increment:hp}
.hp-list li::before{content:counter(hp); grid-row:span 2; align-self:start;
  display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:999px; background:var(--accent); color:var(--accent-ink);
  font-family:var(--display); font-weight:700; font-size:.8rem}
.hp-list .k{font-family:var(--display); font-weight:700;
  font-size:1.02rem; color:var(--ink)}
.hp-list .d{grid-column:2; color:var(--ink-2); font-size:.93rem; line-height:1.45}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; margin-top:1.8rem}
.btn{display:inline-flex; align-items:center; min-height:48px; padding:.75rem 1.5rem;
  border-radius:999px; background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:.98rem; text-decoration:none;
  transition:filter .16s var(--ease)}
.btn:hover{filter:brightness(1.08)}
.btn-plain{display:inline-flex; align-items:center; min-height:48px; color:var(--accent);
  font-weight:600; font-size:.96rem; text-decoration:none}
.btn-plain:hover{text-decoration:underline}

/* ------------------------- facts and entry points ------------------------- */
.facts{border-block:1px solid var(--line); background:var(--surface); padding-block:clamp(1.4rem,3vw,2rem)}
.facts-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.4rem}
.fact .v{font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem,3vw,2.2rem); color:var(--accent); line-height:1; letter-spacing:-.02em}
.fact .l{margin-top:.4rem; color:var(--ink-2); font-size:.92rem; line-height:1.45}

.starts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.8rem}
.start{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.4rem 1.4rem;
  transition:border-color .18s var(--ease), transform .18s var(--ease)}
.start:hover{border-color:var(--accent); transform:translateY(-2px)}
.start .n{display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:999px; background:var(--accent); color:var(--accent-ink);
  font-family:var(--display); font-weight:700; font-size:.92rem}
.start .t{display:block; margin-top:.9rem; font-family:var(--display);
  font-weight:700; font-size:1.1rem; color:var(--ink)}
.start .w{display:block; margin-top:.5rem; color:var(--ink-2); font-size:.94rem; line-height:1.5}

/* --------------------------- glossary teaser --------------------------- */
.gterms{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.8rem 0 0}
.gt{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem}
.gt dt{font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink)}
.gt dd{margin:.4rem 0 0; color:var(--ink-2); font-size:.93rem; line-height:1.55}
.more-link{margin-top:1.4rem}
.more-link a{color:var(--accent); font-weight:600; text-decoration:none}
.more-link a::after{content:" \2192"}
.more-link a:hover{text-decoration:underline}
.lede{margin-top:1.15rem; font-size:1.16rem; color:var(--ink-2); max-width:60ch}
.hero-note{margin-top:1.1rem; font-size:.9rem; color:var(--muted); max-width:56ch}
.section{padding-block:clamp(1.2rem,2.5vw,2rem)}

.lc-shot{display:block; grid-column:1 / -1;
  margin:calc(-1 * clamp(1.5rem,3.4vw,2.6rem) - 1px) calc(-1 * clamp(1.5rem,3.4vw,2.6rem) - 1px) .6rem}
.lc-shot img{width:100%; height:auto; display:block}
.lead-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,3rem); align-items:center; text-decoration:none; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,3.4vw,2.6rem);
  transition:border-color .18s var(--ease), transform .18s var(--ease)}
.lead-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.topic{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700}
.lead-card h2{margin-top:.7rem; font-size:clamp(1.6rem,3.2vw,2.3rem); max-width:18ch}
.lead-card .sf{color:var(--ink-2); font-size:1.04rem}
.lead-card .more{margin-top:1.2rem; font-weight:600; color:var(--accent)}
.lead-card .rt{margin-top:.5rem; color:var(--muted); font-size:.84rem}
.lead-card .more::after{content:" \2192"}

.group{margin-top:clamp(2rem,4vw,3rem)}
.group-h{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  font-family:var(--body); font-weight:700; padding-bottom:.7rem; border-bottom:1px solid var(--line)}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.2rem}
.card{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.3rem 1.35rem; overflow:hidden;
  transition:border-color .18s var(--ease), transform .18s var(--ease)}
.card:hover{border-color:var(--accent); transform:translateY(-2px)}
.card .topic{font-size:.7rem; margin-bottom:.5rem}
.card h3{font-size:1.12rem}
.related{border-top:1px solid var(--line); margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.6rem,3vw,2.2rem)}

/* ------------------------- figures -------------------------
   Drawn as inline SVG with classes rather than baked-in colours, so the same
   generator serves the light site and the dark one. */
.fig{margin:2rem 0 0; padding:0}
/* A diagram squeezed onto a phone renders its labels at about 7px, which is
   unreadable. Below the tablet breakpoint the figure keeps a legible width and
   scrolls inside its own frame instead. */
.fig-scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
.fig svg{width:100%; height:auto; display:block; overflow:visible}
.fig figcaption{margin-top:.9rem; font-family:var(--body); font-size:.9rem;
  line-height:1.55; color:var(--muted); max-width:66ch}
.f-panel{fill:var(--surface-2); stroke:var(--line); stroke-width:1}
.f-accent{fill:var(--accent)}
.f-accent-soft{fill:rgba(34,197,94,.13); stroke:rgba(34,197,94,.28); stroke-width:1}
.f-band{fill:rgba(34,197,94,.13)}
.f-dot{fill:var(--accent)}
.f-fill{fill:var(--muted)}
.f-stroke{stroke:var(--muted); stroke-width:1.5; fill:none}
.f-ink{fill:var(--ink)}
.f-muted{fill:var(--muted)}
.f-accent-text{fill:#22c55e}
.f-on-accent{fill:var(--accent-ink)}
.f-on-accent-2{fill:rgba(4,36,15,.72)}
.fig text{font-family:var(--body)}
.f-lab{font-size:15px; font-weight:600}
.f-sub{font-size:12.5px}
.f-mono{font-size:14px; font-family:var(--code, ui-monospace, monospace); font-weight:600}
.f-big{font-size:40px; font-weight:700}

/* ---------------- contents, archive, glossary ---------------- */
.toc{margin-top:1.9rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.15rem 1.3rem}
.toc-h{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  font-weight:700; font-family:var(--body)}
.toc ol,.toc ul{margin-top:.7rem; padding-left:1.15rem; display:grid; gap:.35rem}
.toc ul{list-style:none; padding-left:0}
.toc ul li{padding-left:.9rem; position:relative}
.toc ul li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:999px; background:var(--accent)}
.toc li{font-size:.96rem}
.toc li::marker{color:var(--accent)}
.toc a{color:var(--ink-2); text-decoration:none}
.toc a:hover{color:var(--accent); text-decoration:underline}

.hero-sm{padding-block:clamp(2rem,4vw,3.2rem) .5rem}
.hero-sm h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.filters{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-bottom:1.6rem}
.search{flex:1 1 260px; max-width:340px}
.search input{width:100%; min-height:46px; padding:.6rem .95rem; font:inherit; font-size:.96rem;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:10px}
.search input::placeholder{color:var(--muted)}
.tabs{display:flex; flex-wrap:wrap; gap:.45rem}
.tab{font:inherit; font-size:.88rem; font-weight:500; cursor:pointer; min-height:44px;
  padding:.45rem 1rem; border-radius:999px; background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line-2);
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease)}
.tab:hover{background:var(--surface-2); color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink);
  border-color:var(--accent); font-weight:600}

.rows{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:9.5rem minmax(0,1fr) 4rem; gap:1.2rem; align-items:baseline;
  padding:1.15rem .2rem; border-bottom:1px solid var(--line); text-decoration:none;
  transition:background .16s var(--ease)}
.row:hover{background:var(--surface)}
.row[hidden]{display:none}
.r-topic{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-weight:700}
.r-title{display:block; font-family:var(--display); font-weight:700;
  font-size:1.1rem; color:var(--ink)}
.r-sf{display:block; margin-top:.35rem; color:var(--ink-2); font-size:.94rem; line-height:1.5}
.r-read{color:var(--muted); font-size:.84rem; text-align:right}
.empty{margin-top:1.6rem; color:var(--muted)}

.terms{margin:0; border-top:1px solid var(--line)}
.term{display:grid; grid-template-columns:14rem minmax(0,1fr); gap:1.2rem;
  padding:1.05rem .2rem; border-bottom:1px solid var(--line)}
.term[hidden]{display:none}
.terms dt{font-family:var(--display); font-weight:700;
  font-size:1.04rem; color:var(--ink)}
.terms dd{margin:0; color:var(--ink-2); font-size:.98rem; line-height:1.6}
.see{display:block; margin-top:.4rem; font-size:.88rem; color:var(--accent); text-decoration:none}
.see::before{content:"See "}
.see:hover{text-decoration:underline}
.nf-links{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem}
@media (max-width:620px){ .nf-links{grid-template-columns:1fr} }
.card p{margin-top:.6rem; color:var(--ink-2); font-size:.94rem; line-height:1.55}
.card .rt{margin-top:.9rem; color:var(--muted); font-size:.82rem}

/* -------------------- answers and editorial standards -------------------- */
/* Two columns rather than three: these are paragraphs, and a three-column
   paragraph on a wide screen gives a measure nobody wants to read. */
.qas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.6rem) clamp(2rem,4vw,4rem); margin-top:clamp(1.4rem,3vw,2.2rem)}
.qa h3{font-size:1.12rem; line-height:1.4; max-width:34ch}
.qa p{margin-top:.6rem; color:var(--ink-2); font-size:.97rem; line-height:1.65; max-width:52ch}
.qa-more{margin-top:.7rem}
.qa-more a{color:var(--accent); font-weight:600; font-size:.92rem; text-decoration:none}
.qa-more a::after{content:" \2192"}
.qa-more a:hover{text-decoration:underline}

.stds{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem); margin-top:clamp(1.4rem,3vw,2.2rem)}
.std{border-top:2px solid var(--accent); padding-top:.9rem}
.std h3{font-size:1rem; line-height:1.4}
.std p{margin-top:.5rem; color:var(--ink-2); font-size:.92rem; line-height:1.6}

/* Sits under the group label, which is a small uppercase eyebrow - so this
   stays below body size, or the sentence outweighs the heading it explains. */
.group-i{margin-top:.55rem; margin-bottom:.2rem; color:var(--ink-2);
  font-size:.95rem; line-height:1.55; max-width:72ch}

/* ------------------------------ article ------------------------------ */
.article{padding-block:clamp(2rem,4.5vw,3.4rem)}
/* The photograph band sits above the breadcrumb, wider than the text column so
   it reads as a masthead rather than an illustration dropped into the prose.
   max-width caps it at its own 1440px, so it is never enlarged. */
.art-photo-wrap{margin:0 0 1.8rem;
  width:min(1120px, calc(100vw - 2.2rem)); max-width:1440px;
  margin-inline:calc((min(720px, 100vw - 2.2rem) - min(1120px, 100vw - 2.2rem)) / 2)}
.art-photo{width:100%; height:auto; display:block; border-radius:var(--r-lg);
  background:var(--surface-2)}
.crumb{font-size:.84rem; color:var(--muted)}
.crumb a{color:var(--accent); text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{margin-inline:.4rem}
.article h1{margin-top:.7rem; font-size:clamp(2rem,4.4vw,3rem); text-wrap:balance}
.standfirst{margin-top:1.1rem; font-size:1.18rem; line-height:1.55; color:var(--ink-2);
  font-family:var(--read)}
.meta{margin-top:1.1rem; padding-bottom:1.6rem; border-bottom:1px solid var(--line);
  font-size:.84rem; color:var(--muted)}
.article h2{margin-top:2.4rem; font-size:clamp(1.3rem,2.4vw,1.6rem); scroll-margin-top:88px}
.article p{margin-top:1.05rem; font-family:var(--read); font-size:1.05rem; line-height:1.68;
  color:var(--ink-2); max-width:68ch}
.article ul{margin-top:1.1rem; padding-left:1.3rem; display:grid; gap:.7rem; max-width:68ch}
.article li{font-family:var(--read); font-size:1.05rem; line-height:1.68; color:var(--ink-2)}
.article li::marker{color:var(--accent)}
.callout{margin-top:2rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.3rem 1.4rem}
.callout p{margin:0; color:var(--ink); font-size:1rem; font-family:var(--body)}

.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding-bottom:clamp(2rem,4vw,3rem)}
.pn{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.1rem 1.2rem; font-weight:600;
  transition:border-color .18s var(--ease)}
.pn:hover{border-color:var(--accent)}
.pn span{display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:.35rem}
.pn.next{text-align:right; grid-column:2}

/* ------------------------------- footer ------------------------------- */
.foot{background:#070b0f; border-top:1px solid var(--line);
  padding-block:clamp(2.4rem,5vw,3.2rem) 2rem; margin-top:clamp(2.4rem,5vw,3.4rem)}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:2.2rem}
.fb{font-family:var(--display); font-weight:700; font-size:1.08rem}
.foot h4{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.7rem; font-family:var(--body); font-weight:700}
.foot ul{list-style:none; padding:0; margin:0}
.foot li a{display:flex; align-items:center; min-height:44px; padding:.4rem 0; color:var(--ink-2);
  font-size:.93rem; text-decoration:none}
.foot li a:hover{color:var(--accent)}
.foot-tag{margin-top:.6rem; font-size:.92rem; color:var(--muted); max-width:34ch}
.foot-contact a{display:inline-flex; align-items:center; min-height:44px; color:var(--ink-2);
  font-size:.93rem; text-decoration:none}
.foot-contact a:hover{color:var(--accent)}
.foot-base{margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line); text-align:center}
.foot-promoter{color:var(--muted); font-size:.8rem; line-height:1.65; max-width:92ch; margin:0 auto}
.foot-promoter a{color:var(--ink-2)}
.foot-copy{color:var(--ink); font-size:.85rem; font-weight:700; margin:1.3rem auto 0}
.foot-legal{color:var(--muted); font-size:.78rem; margin:.4rem auto 0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto} *{transition-duration:.01ms!important}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .starts,.gterms{grid-template-columns:1fr}
  .lead-card{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .stds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .qas{grid-template-columns:1fr}
  .burger{display:flex}
  .nav{position:absolute; left:0; right:0; top:100%; display:none; margin:0;
    background:var(--bg); border-bottom:1px solid var(--line)}
  .top[data-open="true"] .nav{display:block}
  .nav ul{flex-direction:column; align-items:stretch; gap:0; padding:.4rem 1.1rem 1rem}
  .nav a{padding:.9rem .3rem}
}
@media (max-width:760px){
  .fig svg{min-width:640px}
  .fig figcaption{padding-right:.2rem}
  .row{grid-template-columns:1fr auto; gap:.4rem 1rem}
  .r-topic{grid-column:1} .r-read{grid-column:2; grid-row:1}
  .r-main{grid-column:1 / -1}
  .term{grid-template-columns:1fr; gap:.35rem}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap,.wrap-narrow{width:calc(100% - 1.4rem)}
  /* At 353px the native 3.5:1 band is only 100px tall, which is a sliver
     rather than a picture. Trimming the sides back to 2.4:1 gives it height;
     every one of these subjects sits centrally enough to survive it. */
  .art-photo-wrap{width:100%; margin-inline:0}
  .art-photo{aspect-ratio:2.4/1; object-fit:cover; object-position:center}
  .stds{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .prevnext{grid-template-columns:1fr}
  .pn.next{text-align:left; grid-column:1}
  .foot-grid{grid-template-columns:1fr; gap:1.5rem}
}