:root{
  --ink:#0B0B0D;
  --ink-2:#141418;
  --ink-3:#1D1D23;
  --gold:#D4A537;
  --gold-dim:rgba(212,165,55,.14);
  --red:#C0392B;
  /* #C0392B is only 3.62:1 on ink — fine for fills and borders, fails WCAG AA
     for small text. Use --red-text (5.11:1) wherever red carries words. */
  --red-text:#E05243;
  --bone:#F7F5F0;
  --bone-2:#EDEAE3;
  --muted:#9A9AA6;
  --line:rgba(212,165,55,.18);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --display:"Archivo Black",Impact,sans-serif;
  --wrap:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}

/* ── Phones ──────────────────────────────────────────────────────────────
   Most readers are on iOS or Android, so the defaults below are about how the
   site feels in a hand rather than how it looks in a browser window. */

html{
  scroll-behavior:smooth;
  /* iOS inflates text when the phone is rotated to landscape, which reflows
     mid-sentence. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* Stop the rubber-band bounce dragging the whole page around, and stop a
     pull-down at the top triggering a browser refresh mid-read. */
  overscroll-behavior-y:none;
}
body{
  background:var(--ink);color:var(--bone);font-family:var(--sans);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Android's default tap flash is a blue box that has nothing to do with this
     design. Buttons and links carry their own :active state instead. */
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{-webkit-tap-highlight-color:transparent}
/* A phone needs to see it has registered the tap. */
@media(hover:none){
  a:active,button:active{opacity:.62}
}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
/* Big enough to hit once it appears — a skip link that a thumb misses is no
   use to the people who need it. */
.skip:focus{left:12px;top:12px;background:var(--gold);color:var(--ink);padding:14px 20px;min-height:44px;display:inline-flex;align-items:center;z-index:999;border-radius:4px}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(11,11,13,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px}
.brand svg{width:34px;height:34px;flex-shrink:0}
.brand-tx b{font-family:var(--display);font-size:19px;letter-spacing:2.5px;display:block;line-height:1}
.brand-tx span{font-size:11px;letter-spacing:3.2px;color:var(--gold);font-weight:700;text-transform:uppercase}
/* The nav grew to fourteen links as Stories, Games and Archive were added, and
   at 28px of gap it stopped fitting a 1280px laptop — 15px over, which put a
   horizontal scrollbar on every page and clipped the left of every headline.
   The gap now shrinks with the viewport instead of overflowing it. */
.nav-links{display:flex;gap:clamp(14px,1.6vw,28px);align-items:center;min-width:0}
.nav-links a{font-size:13.5px;font-weight:500;color:rgba(247,245,240,.72);transition:color .2s;white-space:nowrap}
@media(max-width:1460px){.nav-links{gap:clamp(9px,1.05vw,16px)}.nav-links a{font-size:12.5px}.nav-in{padding:14px 20px;gap:16px}}
@media(max-width:1180px){.nav-links{gap:8px}.nav-links a{font-size:12px}}
.nav-links a:hover{color:var(--gold)}
.btn{display:inline-block;padding:10px 20px;border-radius:3px;font-size:13px;font-weight:700;letter-spacing:.4px;transition:.2s;cursor:pointer;border:none;font-family:var(--sans)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#E5B849}
.btn-ghost{border:1px solid var(--line);color:var(--bone)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.burger{display:none;background:none;border:none;color:var(--bone);font-size:24px;cursor:pointer}

/* ---------- HERO ---------- */
.hero{padding:110px 0 90px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(212,165,55,.09),transparent 62%);pointer-events:none}
.hero-in{position:relative;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:3.4px;font-weight:700;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:7px 16px;border-radius:100px;margin-bottom:30px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
.hero h1{font-family:var(--serif);font-size:clamp(46px,7vw,86px);font-weight:700;line-height:1.03;letter-spacing:-1.5px;margin-bottom:22px}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p{font-size:18.5px;color:rgba(247,245,240,.7);max-width:600px;margin:0 auto 38px;line-height:1.7}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.stats{display:flex;gap:52px;justify-content:center;margin-top:66px;flex-wrap:wrap}
.stat b{font-family:var(--serif);font-size:36px;color:var(--gold);display:block;line-height:1}
.stat span{font-size:11px;letter-spacing:2.4px;color:var(--muted);text-transform:uppercase;font-weight:600}

/* ---------- SECTIONS ---------- */
section{padding:96px 0}
.sec-head{margin-bottom:52px}
.sec-head.center{text-align:center}
.kicker{font-size:11px;letter-spacing:3.4px;font-weight:700;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.sec-head h2{font-family:var(--serif);font-size:clamp(32px,4.4vw,50px);font-weight:700;line-height:1.12;letter-spacing:-.6px;margin-bottom:14px}
.sec-head p{color:rgba(247,245,240,.62);max-width:620px;font-size:16.5px}
.sec-head.center p{margin:0 auto}

.alt{background:var(--ink-2)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--ink-3);border:1px solid rgba(255,255,255,.055);border-radius:9px;padding:30px;transition:.25s}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card .n{font-family:var(--serif);font-size:32px;color:var(--gold);opacity:.42;line-height:1;margin-bottom:16px}
.card h3{font-size:19px;font-weight:700;margin-bottom:11px;letter-spacing:-.2px}
.card p{color:rgba(247,245,240,.62);font-size:14.5px;line-height:1.68}

/* ---------- VIDEO GRID ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vcard{background:var(--ink-3);border:1px solid rgba(255,255,255,.055);border-radius:9px;overflow:hidden;transition:.25s}
.vcard:hover{border-color:var(--line);transform:translateY(-3px)}
.vthumb{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover}
.vtag{position:absolute;top:11px;left:11px;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:2px;padding:4px 9px;border-radius:2px}
.vbody{padding:18px 20px 22px}
.vbody h3{font-size:15.5px;font-weight:650;line-height:1.4;margin-bottom:9px}
.vmeta{font-size:11.5px;color:var(--muted);letter-spacing:.3px}

/* ---------- STORY / ABOUT ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.story blockquote{font-family:var(--serif);font-size:25px;font-style:italic;line-height:1.5;color:var(--bone);border-left:2px solid var(--gold);padding-left:26px;margin:26px 0}
.story p{color:rgba(247,245,240,.68);margin-bottom:16px;font-size:16px}
.story-mark{display:flex;align-items:center;justify-content:center;padding:56px;background:var(--ink-3);border:1px solid var(--line);border-radius:11px}
.story-mark svg{width:210px;height:210px}

/* ---------- STANDARDS ---------- */
.std{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.std:last-child{border-bottom:none}
.std-i{width:30px;height:30px;border-radius:50%;background:var(--gold-dim);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;font-weight:800}
.std h4{font-size:16px;font-weight:650;margin-bottom:5px}
.std p{font-size:14.5px;color:rgba(247,245,240,.6)}

/* ---------- CTA / NEWSLETTER ---------- */
.cta{background:linear-gradient(150deg,var(--ink-2),var(--ink));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.form{display:flex;gap:11px;max-width:470px;margin:30px auto 0}
.form input{flex:1;padding:14px 17px;border-radius:3px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);color:var(--bone);font-size:14.5px;font-family:var(--sans)}
.form input:focus{outline:none;border-color:var(--gold)}
.form input::placeholder{color:rgba(247,245,240,.36)}
.fineprint{font-size:12px;color:var(--muted);margin-top:15px}

/* ---------- FOOTER ---------- */
footer{padding:66px 0 34px;background:var(--ink)}
.f-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.07)}
.f-brand p{color:var(--muted);font-size:14px;margin-top:16px;max-width:290px;line-height:1.7}
.f-col h5{font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:16px}
.f-col a{display:block;color:rgba(247,245,240,.62);font-size:14px;margin-bottom:11px;transition:color .2s}
.f-col a:hover{color:var(--gold)}
.f-bot{display:flex;justify-content:space-between;align-items:center;padding-top:26px;color:var(--muted);font-size:12.5px;flex-wrap:wrap;gap:14px}

@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:block}  .g3,.g4,.vgrid{grid-template-columns:1fr 1fr}
  .story{grid-template-columns:1fr;gap:38px}
  .f-top{grid-template-columns:1fr 1fr;gap:32px}

  /* A table with more than about three columns is wider than a phone, and
     the whole page then pans sideways — which breaks reading everything else
     on it. Let the table scroll inside itself instead. Measured on
     /explainers/remittances, which was 502px wide on a 390px screen. */
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* The burger is the most important control on a phone and was 22px wide.
     A thumb needs 44. */
  .burger{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;margin-right:-8px}

  /* Grid and flex children default to min-width:auto, so they refuse to shrink
     below their own content and push the whole page sideways. Measured on
     /advertise (429px wide) and /scheduler (405px) against a 390px screen. */
  [class*="grid"] > *, .g2 > *, .g3 > *, .g4 > *, .row > *{min-width:0}
  /* A long unbroken string — a URL, a slug — will still overflow on its own. */
  p,li,td,th,h1,h2,h3,h4,h5,h6,b,span,div{overflow-wrap:break-word}

  /* The back link and the breadcrumb are the way out of a country page or an
     explainer, and they appear on about a hundred pages. They were 14 and 22
     pixels high. Vertical padding makes them tappable without changing how
     they look. */
  .back,.crumb a{display:inline-flex;align-items:center;min-height:44px}

  /* Safari zooms the whole page when a field under 16px takes focus, and it
     does not zoom back out. Twelve fields across the site were at 12.5–15px.
     16px is the threshold; nothing smaller is safe on iOS. */
  input,select,textarea{font-size:16px !important}

  /* The notch, the rounded corners and the home indicator. Without this the
     first line of a heading can sit under the camera cutout, and the last row
     of a page under the home bar. */
  body{
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
  nav:not(#ananse-tabs){padding-top:env(safe-area-inset-top,0px)}

  /* Room for the tab bar at the foot of every reader page. Scoped to a class
     because the desks have no tab bar, and because makeRoom() below overrides
     this inline whenever the player is up — it adds the two together. */
  body.has-tabs{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}

  /* Horizontal scrollers should carry iOS momentum rather than stopping dead. */
  .filters,.chips,table,pre,.scroll-x{-webkit-overflow-scrolling:touch}
}
@media(max-width:600px){
  .g2,.g3,.g4,.vgrid{grid-template-columns:1fr}
  section{padding:64px 0}
  .hero{padding:74px 0 62px}
  .stats{gap:32px}
  .form{flex-direction:column}
  .f-top{grid-template-columns:1fr}
}

/* Nav aliases. Pages historically used <nav class="nav"><div class="nav-in">
   with .brand-tx markup, but several consoles had no top nav at all and were
   given one using the bare <nav> element with .navwrap/.bname/.btag. Rather
   than rewrite every page, teach the stylesheet both conventions so a nav
   renders correctly wherever it appears. */
nav:not(.side){position:sticky;top:0;z-index:100;background:rgba(11,11,13,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.navwrap{max-width:var(--wrap);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.bname{font-family:var(--display);font-size:19px;letter-spacing:2.5px;display:block;line-height:1}
.btag{font-size:11px;letter-spacing:2.4px;color:var(--gold);font-weight:700;text-transform:uppercase;display:block;margin-top:3px}
.brand{text-decoration:none;color:var(--bone)}
@media(max-width:820px){
  .navwrap{padding:12px 18px}
  nav:not(.side) .nav-links{display:none}
}
/* ── Filters ─────────────────────────────────────────────────────────────
   One row, scrolling sideways. Wrapping chips made the filters taller than
   the results on three separate pages. */
.filters{
  display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:2px 0 10px;margin-bottom:14px;
  /* The scrollbar itself is noise; the fade at the edge says there is more. */
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.filters::-webkit-scrollbar{display:none}
.filters>*{flex:0 0 auto;scroll-snap-align:start}
/* A chip must not squash to fit — that is what makes a row of them unreadable. */
.chip{white-space:nowrap}
/* Two stacked filter rows read as one control rather than two. */
.filters+.filters{margin-top:-8px}

/* The search and sort line above them. */
.searchbar{display:flex;gap:10px;margin:24px 0 12px;flex-wrap:wrap;align-items:center}
.searchbar input[type=search],.searchbar input[type=text]{flex:1;min-width:200px}

@media(max-width:760px){
  /* Room to swipe the row without catching the page underneath. */
  .filters{padding-bottom:12px;gap:7px}
  .searchbar{margin:18px 0 10px}
}

/* PHONE READING SCALE ─────────────────────────────────────────────────────
   Measured on an iPhone 13: the masthead, the page title and the standfirst
   filled the whole first screen, so the first headline sat below the fold. On
   a phone the reader has come for the story, not for the description of the
   section. Everything above the first item shrinks, and the desk's standfirst
   goes away entirely. */
@media(max-width:640px){
  .brand svg{width:27px;height:27px}
  .brand-tx b{font-size:15px;letter-spacing:1.6px}
  .brand-tx .btag{font-size:8.5px;letter-spacing:1.6px}
  .nav-in{padding:9px 15px}

  h1, .hero h1{font-size:clamp(27px,7.6vw,33px);line-height:1.1}
  h2, .hero h2{font-size:20px;line-height:1.2}
  h3{font-size:16px}

  /* The standfirst explains the section to somebody deciding whether to read
     it. On a phone it costs a whole screen to say what the title already said. */
  /* These standfirsts carry inline sizes set per page, so a plain rule cannot
     reach them. Nothing is hidden — it is simply set at reading size for a
     390px screen instead of a 1440px one. */
  .hero p, .phead p, .sechead p{font-size:13.5px !important;line-height:1.5 !important}
  .hero p{max-width:34em}
  /* Page standfirsts are written inline at 16.5-17px, which is a desktop
     reading size. Match on the inline value itself, since that is the only
     thing they reliably have in common. */
  p[style*="font-size:16.5px"], p[style*="font-size:17px"], p[style*="font-size:16px"]{
    font-size:13.5px !important;line-height:1.5 !important}

  /* Section headings on a phone. 27px for "On rotation this week" pushed the
     records themselves off the screen. */
  .sect h2, .mhead h2, .phead h2, section > h2{font-size:19px !important;line-height:1.2 !important}
  .sect h3, .mhead h3{font-size:16px !important}

  /* Page standfirsts, wherever they live. */
  .mhead p, .sect > p, .phead p, .lead{font-size:13.5px !important;line-height:1.55 !important}
  .mhead, .sect{padding-top:0 !important}
  .hero{padding-top:20px;padding-bottom:14px}

  .filters{gap:6px}
  .filters .chip, .filters button{font-size:12px;padding:6px 12px;min-height:34px}

  /* Two floating buttons in the same corner covered the first illustration.
     They stack above the tab bar instead. */
  #ananse-social{bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important;
    right:12px !important;transform:scale(.86);transform-origin:bottom right}
  #ananse-ask-btn{bottom:calc(126px + env(safe-area-inset-bottom,0px)) !important;
    right:12px !important;transform:scale(.9);transform-origin:bottom right}

  .wsum{font-size:13.5px;line-height:1.5}
  .wmeta{font-size:11px;gap:7px}
}

/* Standalone links that behave as buttons need a thumb-sized target. Links
   inside a sentence are deliberately left alone: a 44px tall word would break
   the paragraph it sits in, and a finger finds it from the line anyway. */
@media(max-width:640px){
  a[style*="inline-block"], .readmore, .morelink{
    min-height:44px;display:inline-flex !important;align-items:center}
}

/* PHONE TYPE SCALE ────────────────────────────────────────────────────────
   Four earlier attempts each targeted the class names I happened to have seen
   — .hero, .phead, .mhead, .sect — and each time another page turned up with
   its own. Measuring every page at once showed h2 running from 19px to 32px
   and body copy from 14px to 17px, set variously in the stylesheet, in page
   <style> blocks and inline.

   So this sets the scale by element, once, for phones only. It is blunt on
   purpose: on a 390px screen there is one sensible size for a heading, and
   arguing about it per page is what produced the mess. The hierarchy is kept
   — 27 / 19 / 16 / 14 — it is simply set in one place. */
@media(max-width:640px){
  h1{font-size:27px !important;line-height:1.12 !important;letter-spacing:-.4px !important}
  h2{font-size:19px !important;line-height:1.2 !important;letter-spacing:-.2px !important}
  h3{font-size:16px !important;line-height:1.28 !important}
  h4{font-size:14.5px !important}
  p, li{font-size:14px !important;line-height:1.6 !important}
  .lead, .d, .sub, .note, .vmeta, .wmeta, small{font-size:12.5px !important;line-height:1.55 !important}

  /* Links inside prose inherit; standalone ones are already handled above. */
  p a, li a{font-size:inherit !important}

  /* A phone reader came for the thing, not the description of the thing. */
  .hero{padding-top:16px !important;padding-bottom:10px !important}
  /* The counters are a nice thing to find, not a thing to scroll past before
     the news. Two rows of four rather than four rows of one. */
  .stats{grid-template-columns:1fr 1fr !important;gap:12px !important;margin-top:18px !important}
  .stats > *{padding:10px 12px !important}
  .hero-cta{gap:10px !important}
  section:not(.shelf):not(.wrail){padding-top:20px !important;padding-bottom:20px !important}
  .shelf, .wrail{padding:0 !important;margin-bottom:22px !important}
}

/* PHONE PREAMBLE ──────────────────────────────────────────────────────────
   Measured on an iPhone 13: /watch spent 864px on a masthead, an eyebrow, a
   four-line standfirst, a two-line notice and two filter rows before the
   first thing you could actually watch. None of it is wrong — it is just all
   of it, before anything.

   The standfirst is clamped rather than removed: the first two lines say what
   the page is, which is what it was for, and it opens on a tap. */
@media(max-width:640px){
  .mhead > p, .phead > p, .hero > p, header.hero p, .sect > p:first-of-type{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-bottom:12px}
  .mhead > p.open, .phead > p.open, .hero > p.open, header.hero p.open, .sect > p.open{
    -webkit-line-clamp:unset;display:block}

  /* Standing notices are reassurance, not news. One line is enough to reassure. */
  .safe, .notice, .pill-note, .badge-note{font-size:12px !important;padding:8px 13px !important}

  /* Filter rows: one line each, scrolling, rather than wrapping to three. */
  .filters, .chips{flex-wrap:nowrap !important;overflow-x:auto;padding-bottom:5px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filters::-webkit-scrollbar, .chips::-webkit-scrollbar{display:none}
  .filters > *, .chips > *{flex:0 0 auto}
}

/* FLOATING BUTTONS ────────────────────────────────────────────────────────
   The share and ask buttons sat over the last card on every page. A floating
   control is meant to be reachable, not to cover the thing you are reading —
   so the page ends with enough room for them, and they sit clear of the tab
   bar rather than on top of it. */
@media(max-width:640px){
  main{padding-bottom:150px}
  #ananse-social{bottom:calc(150px + env(safe-area-inset-bottom,0px)) !important}
  #ananse-ask-btn{bottom:calc(202px + env(safe-area-inset-bottom,0px)) !important}
}