/* ============================================================
   DYSINFLUENCE — ink restyle
   Same system as the Qatar Plot site (qatar-ink.css + its local sheet):
   one typeface (Archivo), Carbon Black / sage ink in the dark theme and
   plain white paper in the light one, display type screened as a dot
   lattice rather than set solid, hairline modular grid, 2px section rules,
   a halftone fading in from the right edge. Red appears once, on the
   prefix of the wordmark. Light is the default; the dark theme is the Qatar
   Plot's Carbon Black.
   ============================================================ */

/* ---- TOKENS ----
   Light (default): the Qatar Plot local sheet's white ground, not the sage
   paper. Dark: palette v3 (Carbon Black / Ash Grey / Beige / Tangerine / Red). */
:root {
  --bg:#FFFFFF; --bg2:#F7F7F5; --surface:#F1F1EE; --surface2:#E7E7E3; --grid:#F4F4F1;
  --rule:#B9B9B2; --rule2:#E2E2DD; --rule3:#6F6F68;
  --fg:#1C1C1B; --fg2:#4E4E4A; --fg3:#6F6F68; --fg4:#B9B9B2;
  --ac:#1C1C1B; --ac-hi:#000000;
  --red:#E00C0D;
  /* Brand inks, used only for the iso grid's link tiles. */
  --substack:#FF6719; --bluesky:#1185FE; --nu:#4E2A84; --scholar:#1E9A55; --linkedin:#0A66C2;
  --bg-rgb:255,255,255; --fg-rgb:28,28,27;

  --hatch-mid:repeating-linear-gradient(45deg,var(--fg) 0 1.1px,transparent 1.1px 5px);
  --rule-dash:repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 4px);

  --gutter:clamp(20px, 3.6vw, 50px);
}
:root[data-theme="dark"] {
  --bg:#262626; --bg2:#2C2C2B; --surface:#333331; --surface2:#3D3D3A; --grid:#2F2F2E;
  --rule:#4A4A46; --rule2:#373734; --rule3:#8A8A80;
  --fg:#E2E8CE; --fg2:#A8AE98; --fg3:#828874; --fg4:#53564A;
  --ac:#E2E8CE; --ac-hi:#F2F5E6;
  --red:#FF1B1C;
  --substack:#FF6719; --bluesky:#4AA3FF; --nu:#A08CD0; --scholar:#4CC38A; --linkedin:#5B9BE0;
  --bg-rgb:38,38,38; --fg-rgb:226,232,206;
}

/* ---- GROUND ---- */
*, *::before, *::after { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg);
  color:var(--fg); font-family:Archivo,Helvetica,Arial,sans-serif;
  font-feature-settings:"tnum" 1; letter-spacing:-.002em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
a { color:inherit; }

/* Halftone, right edge of the stage: a fine even stipple on a 7px offset
   grid, faded across roughly 620px so it reads as tone rather than pattern.
   It sits under the wordmark column's right rule, where the Qatar site's
   gutter halftone would fall, and never lands behind type. */
.stage::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(circle at center, var(--fg) .7px, transparent .8px),
    radial-gradient(circle at center, var(--fg) .7px, transparent .8px);
  background-size:7px 7px, 7px 7px;
  background-position:0 0, 3.5px 3.5px;
  -webkit-mask-image:linear-gradient(to left, #000 0, rgba(0,0,0,.55) 260px, transparent 620px);
  mask-image:linear-gradient(to left, #000 0, rgba(0,0,0,.55) 260px, transparent 620px);
  opacity:.42;
}

/* ---- THEME TOGGLE: alone in the top-right corner, no nav ---- */
.theme-toggle {
  position:fixed; top:16px; right:18px; z-index:20;
  background:var(--bg); border:1px solid var(--rule3); color:var(--fg2);
  font-family:Archivo,sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; cursor:pointer;
  line-height:1.3; white-space:nowrap;
}
.theme-toggle:hover { color:var(--ac); border-color:var(--ac); }

/* ---- LAYOUT: three fifths wordmark, two fifths feed ----
   The feed hugs the right viewport edge as a full-height rail. */
.layout {
  position:relative; z-index:1; min-height:100vh; min-height:100dvh;
  display:grid; grid-template-columns:3fr 2fr;
}

/* ---- STAGE ---- */
.stage {
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-rows:minmax(0, 1fr) auto;
  padding:clamp(16px, 3vh, 48px) var(--gutter) clamp(28px, 5vh, 64px);
  /* Wordmark sizing is measured against this column, not the window. */
  container-type:inline-size;
}
/* The Qatar hero's ruled ground: a 60px drafting grid under a scrim that
   lifts toward the right, so the grid reads as paper rather than a chart. */
.stage-bg {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(var(--bg-rgb),.92) 0%, rgba(var(--bg-rgb),.80) 50%,
      rgba(var(--bg-rgb),.55) 78%, rgba(var(--bg-rgb),.30) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 59px, var(--rule2) 59px, var(--rule2) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, var(--rule2) 59px, var(--rule2) 60px);
}
.stage-in { position:relative; }

.hero-label {
  margin:0 0 clamp(20px, 4vh, 36px); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg2);
}
.sep { color:var(--fg3); margin:0 .4em; }

/* The wordmark: one word on two lines, DYS over INFLUENCE. Size is derived
   from the column rather than picked: nine characters of Archivo Black at
   this tracking measure about 6.2em, so INFLUENCE fills the column and stops
   and DYS sits above it at the same size. Real text throughout; the spans only
   break the line and split the screen. */
.wordmark {
  margin:0; font-weight:900; text-transform:uppercase;
  font-size:clamp(44px, 100cqw / 6.25, 220px);
  line-height:.82; letter-spacing:-.05em; white-space:nowrap;
  color:var(--fg); display:flex; flex-direction:column; align-items:flex-start;
  position:relative; z-index:1;   /* above the solid E's faces (fly.js) */
}
.wordmark span { display:block; }
.wordmark .dys { color:var(--red); font-style:italic; padding-right:.06em; }

/* Screened, not solid: the page-title lattice from the Qatar site (3.8px grid,
   dots on a half-step offset) so it reads as tone at arm's length and only
   resolves into dots up close. The prefix takes the red screen over the page's
   ink, the same device as the story headline's hatched word.

   background-clip:text needs a transparent fill to show through, so it is
   guarded: without the @supports a browser missing the property would render
   the word invisible rather than merely solid. */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  /* The last E takes its own copy of the screen only while fly.js has it
     skewed: the parent's text clip doesn't follow a transformed child, and
     unskewed it would paint the dots twice. */
  .wordmark .inf, .wordmark .e-last.is-solid, .screen {
    background-image:
      radial-gradient(circle at center, var(--fg) 1.35px, transparent 1.5px),
      radial-gradient(circle at center, var(--fg) 1.35px, transparent 1.5px);
    background-size:3.8px 3.8px, 3.8px 3.8px;
    background-position:0 0, 1.9px 1.9px;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
  .wordmark .dys {
    background-image:
      radial-gradient(circle at center, var(--red) 1.45px, transparent 1.55px),
      radial-gradient(circle at center, var(--red) 1.45px, transparent 1.55px),
      linear-gradient(var(--fg), var(--fg));
    background-size:4.2px 4.2px, 4.2px 4.2px, 100% 100%;
    background-position:0 0, 2.1px 2.1px, 0 0;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
}

/* ---- ISO GRID ----
   Line work only: tiles on hairlines, cubes filled with the ground so they
   hide what is behind them. Strokes ignore the SVG's scale, so a hairline
   stays a hairline at any width.

   Set to the right and sunk into the first line of the wordmark, so the
   diamond's lower half sits in the space DYS leaves beside it. DYS is about
   2.1em of a 6.25em column (34cqw), so a grid 58cqw wide, starting at 42cqw,
   clears it;
   the sink is most of the DYS line (font size
   100cqw / 6.25, line-height .82). Width also caps on vh to keep the
   wordmark and subtitle on one screen. */
.iso-wrap {
  position:relative; z-index:2; min-height:0;
  display:grid; align-items:end; justify-items:end;
  margin-bottom:calc(-1 * (100cqw / 6.25 * .62));
  pointer-events:none;
}
.iso {
  display:block; width:min(58cqw, 600px, 80vh); height:auto;
  overflow:visible; pointer-events:auto;
}
.iso polygon, .iso path, .iso line { vector-effect:non-scaling-stroke; }
.iso .hatch { stroke-width:.9; vector-effect:none; }
.iso .hatch--ink { stroke:var(--fg); }
.iso .hatch--substack { stroke:var(--substack); }
.iso .hatch--bluesky { stroke:var(--bluesky); }
.iso .hatch--nu { stroke:var(--nu); }
.iso .hatch--scholar { stroke:var(--scholar); }
.iso .hatch--red { stroke:var(--red); }
.iso .hatch--linkedin { stroke:var(--linkedin); }
.iso .hatch--muted { stroke:var(--fg4); }
/* Tiles are solid ground, so the stage's drafting grid and halftone stop at
   the diamond's edge; a hatched tile keeps a ground fill under its hatch. */
.iso .tile { fill:var(--bg); stroke:var(--fg); stroke-width:.6; }
.iso .base { fill:var(--bg); stroke:none; }
.iso .cell { outline:none; }
.iso .cell--sec[href] { cursor:pointer; }

/* A cube is hidden flat on its tile and rises on hover: the side faces grow
   up from their feet (scaleY in their sheared frame) while the top lifts by
   the same 46 units the script uses for H. */
.iso .cube { opacity:0; transition:opacity .12s ease .1s; }
.iso .face, .iso .top { stroke:var(--fg); stroke-width:1; stroke-linejoin:round; }
.iso .face--hatch { stroke:none; }
.iso .face { fill:var(--bg); transform:scaleY(0); transform-origin:0 0; }
.iso .top { fill:var(--bg); }
.iso .face, .iso .top { transition:transform .38s cubic-bezier(.16,1,.3,1); }
.iso .cell:hover .cube, .iso .cell:focus-visible .cube { opacity:1; transition-delay:0s; }
.iso .cell:hover .face, .iso .cell:focus-visible .face { transform:scaleY(1); }
.iso .cell:hover .top, .iso .cell:focus-visible .top { transform:translateY(-46px); }

/* Section names: hidden until their cube is up, then set in the hero label's
   tracked caps over a ground-coloured halo so grid lines never cut the letters. */
.iso .tag { opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .38s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.iso .tag line { stroke:var(--fg); stroke-width:1; }
.iso .tag text {
  font-family:Archivo,Helvetica,Arial,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; fill:var(--fg);
  stroke:var(--bg); stroke-width:5px; stroke-linejoin:round; paint-order:stroke;
}
.iso .cell:hover .tag, .iso .cell:focus-visible .tag { opacity:1; transform:none; transition-delay:.08s; }
.iso .cell:not(.cell--sec) { cursor:pointer; }
/* The tile the fly is under is a hatch (fly.js), not a block: no cube rises
   from it, and when it lifts it shows a dark hole beneath. */
.iso .cell--buzz .cube, .iso .cell.is-trap .cube { display:none; }
.iso .trap-hole { fill:var(--fg); }
.iso .trap-flap { fill:var(--bg); stroke:var(--fg); stroke-width:1; stroke-linejoin:round; vector-effect:non-scaling-stroke; }

/* ---- THE FLY'S DEFINITION ----
   Top right of the stage, on the ground colour so the drafting grid doesn't
   run through it; never takes a click, so the tiles under it still work. It fades in a line at a time when the fly is released: each
   line rises a few px out of a soft blur. */
.fly-def {
  position:absolute; z-index:3; top:clamp(20px, 4vh, 40px); right:var(--gutter);
  width:min(360px, 44%); margin:0; padding:14px 0 0;
  background:var(--bg); border-top:2px solid var(--fg);
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear 1.6s;
}
.fly-def.is-on { visibility:visible; transition-delay:0s; }
.fly-def p {
  margin:0; opacity:0; transform:translateY(6px); filter:blur(3px);
  transition:opacity 1.6s ease, transform 1.6s cubic-bezier(.16,1,.3,1), filter 1.6s ease;
}
.fly-def.is-on p { opacity:1; transform:none; filter:none; }
.fly-def.is-on p:nth-child(2) { transition-delay:.6s; }
.fly-def.is-on p:nth-child(3) { transition-delay:1.2s; }
.fly-def-term { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.fly-def-term dfn {
  font-style:normal; font-size:clamp(18px, 1.7vw, 22px); font-weight:900;
  letter-spacing:-.03em; text-transform:uppercase; color:var(--fg);
}
.fly-def [lang="ar"] { font-family:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,serif; letter-spacing:0; }
.fly-def-term [lang="ar"] { font-size:clamp(17px, 1.5vw, 20px); color:var(--red); }
.fly-def-text { margin-top:10px !important; font-size:13px; line-height:1.55; color:var(--fg); }
.fly-def-note { margin-top:10px !important; font-size:12px; line-height:1.55; color:var(--fg3); }
.fly-def-note i { font-style:italic; }
/* On a phone the stage's top is the grid itself, so the card floats over
   the bottom of the screen instead; taps always pass through it. */
@media (max-width:640px) {
  .fly-def {
    position:fixed; top:auto; bottom:12px; left:var(--gutter); right:var(--gutter);
    width:auto; padding:12px 14px 14px; border:1px solid var(--rule3); border-top:2px solid var(--fg);
  }
}

/* ---- THE FLY ----
   A WebGL canvas drawn by fly.js; the fly's feet are at its centre, which
   fly.js moves with a translate on .fly. Size matches VIEW in fly.js. */
.fly {
  position:absolute; left:0; top:0; z-index:2; pointer-events:none;
  width:300px; height:300px; margin:-150px 0 0 -150px;
}
/* The fly's dashed trail: a canvas over the stage, sized by fly.js. */
.fly-trail { position:absolute; z-index:1; pointer-events:none; }
.fly canvas { display:block; width:100%; height:100%; }
/* The last E as a block, drawn by fly.js under the letter: faces in the
   grid's hairline on the ground colour, right-facing ones hatched. */
.e3d { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.e3d polygon { vector-effect:non-scaling-stroke; }
.e3d-face { fill:var(--bg); stroke:var(--fg); stroke-width:1; stroke-linejoin:round; }
.e3d-face--hatch { fill:url(#iso-hatch-ink); }
.e3d-front { fill:var(--bg); stroke:none; }
/* The last E, skewed by fly.js into the grid's plane when the fly lands; it
   turns about its right edge so it rises into the empty space above. */
.wordmark .e-last { display:inline-block; transform-origin:100% 100%; }

/* The tile the hidden fly is under: a faint buzz, then still, like a fly
   walking about under paper. */
.iso .cell--buzz { animation:buzz 1.3s linear infinite; transform-box:fill-box; transform-origin:center; }
@keyframes buzz {
  0%, 40%, 100% { transform:translate(0, 0) rotate(0); }
  4%  { transform:translate(1.3px, -.7px) rotate(.6deg); }
  8%  { transform:translate(-1.2px, .9px) rotate(-.5deg); }
  12% { transform:translate(1px, .9px) rotate(.4deg); }
  16% { transform:translate(-1.3px, -.6px) rotate(-.6deg); }
  20% { transform:translate(1.1px, -.9px) rotate(.5deg); }
  24% { transform:translate(-.9px, .8px) rotate(-.4deg); }
  28% { transform:translate(.8px, -.5px) rotate(.3deg); }
  32% { transform:translate(-.5px, .4px) rotate(-.2deg); }
  36% { transform:translate(.3px, -.2px) rotate(.1deg); }
}

/* Subtitle: the story hero's spec, bold tracked caps under a dashed rule. */
.subtitle {
  font-size:clamp(12px, 1.25cqw, 16px); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg); margin:clamp(22px, 4vh, 34px) 0 0;
  max-width:60ch; line-height:1.45;
}
.subtitle::before {
  content:''; display:block; width:56px; height:5px;
  background:var(--rule-dash); margin:0 0 16px;
}
.subtitle em { font-style:normal; color:var(--fg2); }

.foot {
  margin:clamp(20px, 4vh, 32px) 0 0; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg3);
}

/* ---- FEED RAIL ----
   Sticky and self-scrolling: the wordmark stays put while the posts move.
   Sits on a 2px rule, the same weight as the Qatar site's section breaks. */
.feed {
  position:sticky; top:0; align-self:start;
  height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  border-left:2px solid var(--fg);
  padding:0 var(--gutter) clamp(32px, 6vh, 56px);
  background:var(--bg);
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
.feed::-webkit-scrollbar { width:6px; }
.feed::-webkit-scrollbar-thumb { background:var(--rule); }

/* Solid behind the heading, fading out below, so posts scroll away under it. */
.feed-head {
  position:sticky; top:0; z-index:1;
  padding:clamp(24px, 4.5vh, 40px) 0 14px; margin-bottom:8px;
  background:linear-gradient(var(--bg), var(--bg) 86%, rgba(var(--bg-rgb),0));
}
.section-hdr { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 18px; }
.section-hdr .num { font-size:14px; font-weight:900; letter-spacing:.2em; color:var(--fg2); }
.section-hdr h2 {
  margin:0; font-size:clamp(24px, 2.4vw, 30px); font-weight:900; letter-spacing:-.04em;
  text-transform:uppercase; line-height:1;
}
.section-src {
  margin:8px 0 0; font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg3);
}

.feed-status { margin:12px 0 0; font-size:13px; color:var(--fg2); }
.feed-status[hidden] { display:none; }
.feed-status a { color:var(--fg); text-decoration-color:var(--rule3); }

/* Posts stack on hairlines; the newest carries display size. */
.feed-list { list-style:none; margin:0; padding:0; border-top:2px solid var(--fg); }
.post { border-bottom:1px solid var(--rule2); background:var(--bg); }
.post__link {
  display:block; padding:clamp(16px, 2.6vh, 24px) 0 clamp(16px, 2.6vh, 24px) 14px;
  color:inherit; text-decoration:none;
  border-left:2px solid transparent;
  transition:border-color .2s ease;
}
.post__link:hover, .post__link:focus-visible { border-left-color:var(--fg); }
.post__date {
  display:block; font-size:10px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg3);
}
.post__title {
  margin:10px 0 0; font-size:clamp(16px, 1.35vw, 19px); font-weight:800;
  line-height:1.15; letter-spacing:-.025em; color:var(--fg);
}
.post__link:hover .post__title { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.post__excerpt { margin:10px 0 0; font-size:13px; line-height:1.55; color:var(--fg2); }
.post:first-child .post__title { font-size:clamp(20px, 1.9vw, 27px); letter-spacing:-.035em; }
.post:first-child .post__excerpt { font-size:14px; }

.more-row { margin:24px 0 0; }
.more {
  display:inline-block; padding:9px 14px; border:1px solid var(--rule3);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg2); text-decoration:none;
}
.more:hover { color:var(--fg); border-color:var(--fg); }

/* ---- INNER PAGES (investigations.html) ----
   The home page's label, section header and 2px rule on a plain column. */
.page { max-width:900px; padding:clamp(72px, 12vh, 120px) var(--gutter) 64px; }
.page .section-hdr h1 {
  margin:0; font-size:clamp(32px, 5vw, 56px); font-weight:900; letter-spacing:-.04em;
  text-transform:uppercase; line-height:1;
}
.page-home { color:inherit; text-decoration:none; }
.page-home:hover { text-decoration:underline; text-underline-offset:3px; }
.page .section-src a { color:var(--fg); text-underline-offset:2px; }
.page .section-src a:hover { text-decoration-thickness:2px; }
.page-list { list-style:none; margin:24px 0 0; padding:0; border-top:2px solid var(--fg); }

/* ---- ABOUT (about.html) ----
   Photo beside the biography; the photo sits in a hairline frame on the
   page's 2px rule, the lede set larger like the feed's first post. */
.page--about { max-width:1120px; }
.about {
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(24px, 4vw, 56px);
  margin-top:24px; border-top:2px solid var(--fg); padding-top:clamp(20px, 3vh, 32px); align-items:start;
}
.about-photo { margin:0; position:sticky; top:24px; }
.about-photo img { display:block; width:100%; height:auto; border:1px solid var(--rule); }
.about-bio p { margin:0 0 1.1em; font-size:16px; line-height:1.65; color:var(--fg2); max-width:68ch; }
.about-bio .about-lede { font-size:clamp(19px, 1.6vw, 22px); line-height:1.45; font-weight:700; letter-spacing:-.01em; color:var(--fg); }
.about-bio cite { font-style:italic; color:var(--fg); }
.about-bio a { color:var(--fg); text-underline-offset:3px; }
.about-bio a:hover { text-decoration-thickness:2px; }
.about-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px !important; }
.about-links .more { text-decoration:none; }
@media (max-width:760px) {
  .about { grid-template-columns:1fr; }
  .about-photo { position:static; max-width:420px; }
}

/* ---- MEDIA APPEARANCES (media.html, built by scripts/build_media.py) ----
   An archive, not a table: the counts as screened display numerals, the
   outlets as a band of type sized by how often, a hatched bar per year, and
   the entries grouped under big screened years that stick as you scroll. */
.page--media { max-width:1120px; }
.ap-stats { display:flex; flex-wrap:wrap; gap:16px clamp(28px, 6vw, 72px); margin:clamp(28px, 5vh, 48px) 0 0; }
.ap-stats p { margin:0; }
.ap-big {
  display:block; font-size:clamp(56px, 9vw, 112px); font-weight:900;
  letter-spacing:-.05em; line-height:.86; color:var(--fg);
}
.ap-stats span {
  display:block; margin-top:8px; font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg3);
}

.band {
  list-style:none; margin:clamp(28px, 5vh, 44px) 0 0; padding:18px 0;
  border-top:2px solid var(--fg); border-bottom:1px solid var(--rule2);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 26px;
}
.band li {
  font-size:calc(14px * var(--s, 1)); font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.05; color:var(--fg);
}
.band-n { font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--fg3); margin-left:3px; vertical-align:super; }

.ap-chart { margin:clamp(28px, 5vh, 44px) 0 0; }
.ap-chart figcaption { margin:0 0 10px; }
.years { display:block; width:100%; max-width:680px; height:auto; overflow:visible; }
.yr-hatch { stroke:var(--fg); stroke-width:1; }
.yr-base { stroke:var(--fg); stroke-width:1; }
.yr-hit { fill:transparent; }
.yr-bar { fill:url(#yr-hatch); stroke:var(--fg); stroke-width:1; transition:fill .15s ease; }
.yr-n, .yr-label { font-family:Archivo,Helvetica,Arial,sans-serif; text-anchor:middle; }
.yr-n { font-size:11px; font-weight:800; fill:var(--fg); opacity:0; transition:opacity .15s ease; }
.yr-label { font-size:10px; font-weight:700; fill:var(--fg3); }
.yr:hover .yr-bar, .yr:focus-visible .yr-bar { fill:var(--fg); }
.yr:hover .yr-n, .yr:focus-visible .yr-n { opacity:1; }
.yr:hover .yr-label { fill:var(--fg); }
.yr { outline:none; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin:clamp(28px, 5vh, 44px) 0 0; }
.chip {
  font-family:Archivo,sans-serif; font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:8px 12px; cursor:pointer;
  background:var(--bg); color:var(--fg2); border:1px solid var(--rule3);
}
.chip span { color:var(--fg3); margin-left:4px; }
.chip:hover { color:var(--fg); border-color:var(--fg); }
.chip.is-on { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.chip.is-on span { color:var(--bg); opacity:.7; }

.ap-year {
  display:grid; grid-template-columns:minmax(150px, 220px) minmax(0, 1fr); gap:0 clamp(16px, 3vw, 40px);
  margin-top:clamp(36px, 6vh, 56px); border-top:2px solid var(--fg); padding-top:16px;
  scroll-margin-top:16px;
}
.ap-year[hidden] { display:none; }
.ap-y {
  position:sticky; top:16px; align-self:start; margin:0;
  font-size:clamp(48px, 5.6vw, 76px); font-weight:900; letter-spacing:-.05em; line-height:.8; color:var(--fg);
}
.ap-list { list-style:none; margin:0; padding:0; }
.ap-row {
  display:grid; grid-template-columns:56px minmax(0, 1fr) minmax(0, 1.3fr) 118px 14px;
  gap:4px 16px; align-items:baseline; padding:11px 0;
  border-bottom:1px solid var(--rule2); color:inherit; text-decoration:none;
}
.ap-row time { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); }
.ap-outlet { font-size:15px; font-weight:800; letter-spacing:-.015em; line-height:1.2; color:var(--fg); }
.ap-topic { font-size:14px; line-height:1.35; color:var(--fg2); }
.ap-kind {
  justify-self:start; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg2); border:1px solid var(--rule); padding:3px 6px; white-space:nowrap;
}
.ap-go { color:var(--fg3); transition:transform .2s ease, color .2s ease; }
a.ap-row:hover .ap-outlet { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
a.ap-row:hover .ap-go { color:var(--fg); transform:translateX(3px); }
@media (max-width:760px) {
  .ap-year { grid-template-columns:1fr; }
  .ap-y { position:static; margin-bottom:8px; }
  .ap-row { grid-template-columns:52px minmax(0, 1fr) 14px; }
  .ap-topic, .ap-kind { grid-column:2; }
  .ap-go { grid-column:3; grid-row:1; }
}

/* ---- ENTRANCE: one staggered load, nothing else ---- */
.reveal {
  opacity:0; transform:translateY(24px);
  animation:rise .6s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes rise { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation:none; opacity:1; transform:none; }
  .post__link, .yr-bar, .yr-n, .ap-go, .fly-def p, .iso .cube, .iso .face, .iso .top, .iso .tag { transition:none; }
  html { scroll-behavior:auto; }
}

/* Below this the 2/5 rail is too narrow for either column, so the feed drops
   under the wordmark and runs at full width. */
@media (max-width:900px) {
  .layout { grid-template-columns:1fr; }
  .stage { min-height:100vh; min-height:100dvh; }
  .feed {
    position:static; height:auto; overflow:visible;
    border-left:0; border-top:2px solid var(--fg);
  }
  .feed-head { position:static; background:none; }
}
@media (max-width:640px) {
  .subtitle { letter-spacing:.1em; }
}