/* The articles — in the site's own voice.

   The first version of this sheet used system fonts and a plain header, and
   the blog read as a different website stapled to this one. Everything here
   now comes from the home page's vocabulary: Montserrat in capitals with wide
   tracking for display, Barlow for numerals, black and white with one teal,
   and the dark slate gradient for anything that should stop the eye.

   An article is opened by two readers: one with thirty seconds, standing at a
   counter with a borrowed phone (key facts, numbered steps, the table), and
   one with ten minutes (everything between). Each component serves one.

   THIS FILE IS CACHED FOR FOUR HOURS by Cloudflare's default headers, which
   is how a reader once got new markup with an old stylesheet and a page that
   looked undressed. Every page links it as /blog.css?v=<hash>, and
   scripts/stamp-assets.py rewrites that hash from this file's contents —
   `npm run deploy:site` runs it first, so a change here can never again ship
   behind a stale URL. */

:root {
  --bg: #ffffff; --sunk: #f5f5f5;
  --ink: #000000; --ink-body: #1f2326; --ink-2: #5a5a5a; --ink-3: #8a8a8a;
  --line: #e4e4e4;
  --teal: #00f19f;
  /* The teal is a light on black. On white it is unreadable as text, so
     links and small labels on light ground use its dark sibling. */
  --link: #00794f;
  --tint: #effdf7;
  --dark-a: #283339; --dark-b: #101518;
  --on-dark: #ffffff; --on-dark-2: #aab3b8; --on-dark-line: rgba(255, 255, 255, 0.14);
  --words: "Montserrat", "Proxima Nova", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --numbers: "Barlow", "DIN Pro", "DINPro", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --sunk: #14191d;
    --ink: #ffffff; --ink-body: #e3e7ea; --ink-2: #aab3b8; --ink-3: #7c868c;
    --line: #283339;
    --link: #00f19f; --tint: #0b1f18;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink-body);
  font: 500 17px/1.75 var(--words);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* ── the bar: always there, always a way back ──────────────────────────── */
.topbar { background: #000000; color: #ffffff; position: sticky; top: 0; z-index: 30; }
.bar { max-width: 70rem; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 18px; }
.back {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px;
  color: #ffffff; text-decoration: none; white-space: nowrap;
  font: 700 11px/1 var(--words); letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color .15s ease, color .15s ease;
}
.back:hover { border-color: var(--teal); color: var(--teal); }
.back svg { width: 14px; height: 14px; flex: none; }
.brand { font: 700 17px/1 var(--words); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #ffffff; margin-right: auto; }
.links { display: flex; gap: 24px; align-items: center; font: 700 12px/1 var(--words); letter-spacing: 0.1em; text-transform: uppercase; }
.links a { color: #aab3b8; text-decoration: none; }
.links a:hover, .links a[aria-current="page"] { color: #ffffff; }
.cta {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--teal); color: #000000; text-decoration: none; white-space: nowrap;
  font: 700 11px/1 var(--words); letter-spacing: 0.1em; text-transform: uppercase;
}
.cta:hover { background: #4df7bb; }
@media (max-width: 860px) { .links { display: none; } }
@media (max-width: 520px) {
  .bar { padding: 12px 16px; gap: 12px; }
  .back { padding: 0; width: 36px; justify-content: center; }
  .back span { display: none; }
  .brand { font-size: 15px; }
}

/* ── the cover: the title set on the picture, like the front of a magazine ─ */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--dark-b); color: #ffffff; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 38%); z-index: -2; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16, 21, 24, 0.30) 0%, rgba(16, 21, 24, 0.52) 42%, rgba(16, 21, 24, 0.94) 100%);
}
.hero .in { max-width: 70rem; margin: 0 auto; padding: clamp(130px, 24vw, 300px) 28px clamp(30px, 4vw, 52px); }
.crumbs { font: 700 11px/1.4 var(--words); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); margin: 0 0 14px; }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: #ffffff; }
.kicker { display: inline-block; font: 700 11px/1 var(--words); letter-spacing: 0.14em; text-transform: uppercase; color: #000000; background: var(--teal); padding: 7px 10px; border-radius: 6px; margin: 0 0 16px; }
.hero h1 {
  font: 700 clamp(25px, 4.4vw, 52px)/1.14 var(--words); letter-spacing: 0.055em; text-transform: uppercase;
  margin: 0 0 18px; max-width: 58rem; text-wrap: balance; color: #ffffff;
}
.hero .standfirst { font-size: clamp(16px, 1.55vw, 19px); line-height: 1.6; color: #d9dee1; max-width: 46rem; margin: 0; }
.hero .meta { font: 700 11px/1.4 var(--words); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); margin: 20px 0 0; }
.credit { max-width: 70rem; margin: 8px auto 0; padding: 0 28px; text-align: right; font-size: 11px; color: var(--ink-3); }
.credit a { color: var(--ink-3); }
@media (max-width: 640px) {
  /* On a narrow screen the crop is a vertical slice, and the centre of this
     photograph may be nothing. Each article names its own focal points
     (--focus, --focus-m) on the cover element. */
  .hero > img { object-position: var(--focus-m, 50% 38%); }
  .hero .in { padding-left: 20px; padding-right: 20px; }
  .credit { padding: 0 20px; }
}

/* A measure of about 68 characters. Longer lines are where a reader loses
   the row, starts it again, and then stops. */
.wrap { max-width: 47rem; margin: 0 auto; padding: 10px 28px 40px; }
@media (max-width: 640px) { .wrap { padding: 6px 20px 32px; } body { font-size: 16px; } }

h2 {
  font: 700 clamp(18px, 2.5vw, 23px)/1.32 var(--words); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); margin: 64px 0 16px; text-wrap: balance;
}
h3 { font: 700 17px/1.4 var(--words); color: var(--ink); margin: 34px 0 8px; }
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 20px; padding-left: 22px; }
li { margin: 0 0 10px; }
strong { font-weight: 700; color: var(--ink); }

/* A lead and its explanation are two things. Run together on one line the
   bold reads as glued to the sentence after it — said of the first version,
   in plainer words. The lead gets its own line, and air beneath it. */
.points { list-style: none; padding: 0; margin: 22px 0 26px; }
.points > li { position: relative; padding-left: 26px; margin-bottom: 20px; color: var(--ink-2); }
.points > li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.points > li > strong:first-child,
.check > li > strong:first-child,
.keyfacts li > strong:first-child { display: block; margin-bottom: 4px; }
.points > li > strong:first-child, .check > li > strong:first-child { color: var(--ink); font-size: 1.03em; line-height: 1.45; }
.check > li { color: var(--ink-2); }

/* ── the scene the article opens on ────────────────────────────────────── */
.scene { margin: 40px 0 10px; padding-left: 22px; border-left: 3px solid var(--ink); }
.scene p { font-size: 1.1em; line-height: 1.7; }
.scene .beat { font: 700 clamp(20px, 3vw, 25px)/1.3 var(--words); color: var(--ink); letter-spacing: 0.01em; }

/* ── for the reader with thirty seconds ────────────────────────────────── */
.keyfacts { background: linear-gradient(160deg, var(--dark-a), var(--dark-b)); color: #ffffff; border-radius: 20px; padding: 28px 30px 16px; margin: 38px 0 26px; }
.keyfacts h2 { font-size: 12px; letter-spacing: 0.14em; color: var(--teal); margin: 0 0 16px; }
.keyfacts ul { list-style: none; padding: 0; margin: 0; }
.keyfacts li { position: relative; padding-left: 24px; margin-bottom: 13px; font-size: 0.97em; line-height: 1.6; color: #d9dee1; }
.keyfacts li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.keyfacts strong { color: #ffffff; }
@media (max-width: 640px) { .keyfacts { padding: 22px 20px 10px; border-radius: 16px; } }

.toc { margin: 0 0 6px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.toc li { margin: 0; }
.toc a { display: inline-block; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-2); font: 700 11px/1 var(--words); letter-spacing: 0.08em; text-transform: uppercase; }
.toc a:hover { border-color: var(--ink); color: var(--ink); }

/* ── three clocks ──────────────────────────────────────────────────────── */
.clocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 26px 0 28px; }
.clock { border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.clock span { display: block; font: 700 11px/1 var(--words); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); margin-bottom: 10px; }
.clock b { display: block; font: 700 30px/1.05 var(--numbers); color: var(--ink); margin-bottom: 8px; }
.clock p { font-size: 0.88em; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* ── numbered steps ────────────────────────────────────────────────────── */
ol.steps { list-style: none; padding: 0; counter-reset: step; margin: 24px 0 28px; }
ol.steps > li { counter-increment: step; position: relative; padding: 0 0 2px 56px; margin-bottom: 22px; }
ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center; font: 700 18px/1 var(--numbers);
}
ol.steps > li > strong:first-child { display: block; font-size: 1.06em; margin-bottom: 3px; }

.note { background: var(--sunk); border-left: 3px solid var(--ink); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 26px 0; font-size: 0.95em; line-height: 1.65; }

.right { border: 2px solid var(--teal); background: var(--tint); border-radius: 18px; padding: 24px 26px 8px; margin: 30px 0; }
.right .tag { font: 700 11px/1 var(--words); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); margin: 0 0 10px; }
.right h3 { margin-top: 0; font-size: 1.12em; }
@media (max-width: 640px) { .right { padding: 20px 20px 4px; } }

/* ── what to say, in their language ────────────────────────────────────── */
.phrases { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 24px 0; }
.phrases div { padding: 14px 20px; border-top: 1px solid var(--line); }
.phrases div:first-child { border-top: 0; background: var(--sunk); font-size: 0.88em; color: var(--ink-2); }
.phrases b { display: block; font: 700 10px/1 var(--words); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.phrases span { font-size: 1em; line-height: 1.5; color: var(--ink); }

/* Tables are the one thing allowed to be wider than the phone, inside their
   own scroller, so the page itself never moves sideways. */
.scroll { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 580px; font-size: 0.9em; line-height: 1.55; }
th { text-align: left; font: 700 10px/1 var(--words); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 0 16px 12px 0; border-bottom: 2px solid var(--ink); }
td { vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ── what usually goes wrong ───────────────────────────────────────────── */
.wrong { list-style: none; padding: 0; margin: 26px 0; }
.wrong li { border-top: 1px solid var(--line); padding: 20px 0 8px; margin: 0; }
.wrong li:last-child { border-bottom: 1px solid var(--line); }
.wrong b { display: block; font-size: 1.06em; line-height: 1.4; color: var(--ink); margin-bottom: 6px; }
.wrong p { color: var(--ink-2); font-size: 0.95em; margin-bottom: 12px; }

/* ── the product, once, after the reader has been given something ─────── */
.app {
  margin: 64px 0; border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, var(--dark-a), var(--dark-b)); color: #ffffff;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.app img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; min-height: 280px; }
.app .in { padding: 34px 32px 30px; }
.app .tag { font: 700 11px/1 var(--words); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin: 0 0 14px; }
.app h2 { color: #ffffff; font-size: clamp(17px, 2.2vw, 21px); letter-spacing: 0.07em; margin: 0 0 14px; }
.app p { color: var(--on-dark-2); font-size: 0.9em; line-height: 1.65; margin: 0 0 16px; }
.app ul { list-style: none; padding: 0; margin: 0 0 22px; }
.app li { position: relative; padding-left: 24px; font-size: 0.9em; line-height: 1.55; color: #d9dee1; margin-bottom: 10px; }
.app li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.app li strong { color: #ffffff; }
.app .go { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 999px; background: var(--teal); color: #000000; text-decoration: none; font: 700 12px/1 var(--words); letter-spacing: 0.1em; text-transform: uppercase; }
.app .go:hover { background: #4df7bb; }
.app .soon { display: block; margin-top: 14px; font-size: 12px; color: #7c868c; }
.app .fine { font-size: 12.5px; color: #7c868c; margin: 18px 0 0; line-height: 1.6; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; border-radius: 20px; margin: 52px 0; }
  .app img { aspect-ratio: 4 / 3; height: auto; min-height: 0; object-position: 50% 24%; }
  .app .in { padding: 26px 22px 24px; }
}

/* ── numbers, each with where it came from ─────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 26px 0; }
.stat { background: linear-gradient(160deg, var(--dark-a), var(--dark-b)); color: #ffffff; border-radius: 18px; padding: 24px 22px 20px; }
.stat b { display: block; font: 700 40px/1 var(--numbers); color: var(--teal); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.stat p { font-size: 0.85em; line-height: 1.6; color: #d9dee1; margin: 0 0 12px; }
.stat cite { font-style: normal; font: 700 10px/1.4 var(--words); letter-spacing: 0.08em; text-transform: uppercase; color: #7c868c; }
.stat cite a { color: #7c868c; }
.stat cite a:hover { color: var(--teal); }

.check { list-style: none; padding: 0; margin: 24px 0; }
.check li { position: relative; padding-left: 36px; margin-bottom: 15px; }
.check li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 20px; height: 20px; border: 2px solid var(--link); border-radius: 6px; }

/* ── questions ─────────────────────────────────────────────────────────── */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 18px 34px 18px 0; list-style: none; position: relative; line-height: 1.45; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 24px/1 var(--numbers); color: var(--ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); font-size: 0.95em; }

.official { list-style: none; padding: 0; margin: 22px 0; }
.official li { border-top: 1px solid var(--line); padding: 15px 0; margin: 0; line-height: 1.5; }
.official li:last-child { border-bottom: 1px solid var(--line); }
.official b { display: block; font-size: 0.95em; }
.official span { color: var(--ink-2); font-size: 0.86em; }

.sources { font-size: 12.5px; line-height: 1.7; color: var(--ink-3); margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.sources a { color: var(--ink-3); }
.sources strong { color: var(--ink-2); }
.sources p { margin-bottom: 10px; }

/* ── the way out of the article: back, or onwards ──────────────────────── */
.endnav { max-width: 47rem; margin: 0 auto; padding: 8px 28px 80px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 999px; font: 700 12px/1 var(--words); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; }
.btn svg { width: 14px; height: 14px; }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.quiet:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 640px) { .endnav { padding: 0 20px 64px; } .btn { flex: 1 1 auto; } }

/* ── the foot: the same one the home page stands on ────────────────────── */
.foot { background: #000000; color: #aab3b8; }
.foot .in { max-width: 70rem; margin: 0 auto; padding: 52px 28px 40px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
.foot .brand { display: inline-block; margin: 0 0 14px; }
.foot p { font-size: 13px; line-height: 1.7; margin: 0; max-width: 26rem; }
.foot h4 { font: 700 11px/1 var(--words); letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; margin: 4px 0 16px; }
.foot nav { display: flex; flex-direction: column; gap: 11px; font-size: 13px; }
.foot nav a { color: #aab3b8; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 3px; }
.foot nav a:hover { color: #ffffff; }
/* Two words under the policy, and a link to the section of it that earns them. */
.foot nav a.gdpr-mark { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 4px; padding: 6px 13px 6px 10px; border: 1px solid var(--teal); border-radius: 999px; color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; }
.foot nav a.gdpr-mark:hover { background: rgba(0, 241, 159, 0.12); color: var(--teal); }
.foot nav a.gdpr-mark svg { flex: none; }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 22px; font-size: 11px; letter-spacing: 0.04em; max-width: none; }
@media (max-width: 720px) { .foot .in { grid-template-columns: 1fr 1fr; padding: 40px 20px 32px; gap: 28px; } .foot .in > div:first-child { grid-column: 1 / -1; } }

/* ── the blog's own front page ─────────────────────────────────────────── */
.band { background: linear-gradient(160deg, var(--dark-a), var(--dark-b)); color: #ffffff; }
.band .in { max-width: 70rem; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 28px clamp(40px, 6vw, 72px); }
.band h1 { font: 700 clamp(26px, 4.4vw, 50px)/1.14 var(--words); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 18px; max-width: 50rem; text-wrap: balance; }
.band p.lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: #d9dee1; max-width: 42rem; margin: 0; }
.posts { max-width: 70rem; margin: 0 auto; padding: 44px 28px 96px; display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 26px; }
.post { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; background: var(--bg); transition: transform .18s ease, border-color .18s ease; }
.post:hover { transform: translateY(-4px); border-color: var(--ink); }
.post img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--sunk); }
.post div { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.post .tagline { font: 700 11px/1 var(--words); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); margin: 0 0 12px; }
.post h2 { font: 700 19px/1.35 var(--words); letter-spacing: 0.01em; text-transform: none; color: var(--ink); margin: 0 0 10px; }
.post p { font-size: 0.88em; line-height: 1.65; color: var(--ink-2); margin: 0; }
.post .more { display: block; margin-top: auto; padding-top: 16px; font: 700 11px/1 var(--words); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 640px) { .band .in { padding-left: 20px; padding-right: 20px; } .posts { padding: 32px 20px 72px; grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .post, .back { transition: none; } .post:hover { transform: none; } }