/* ============================================================
   ra999.info — visual system

   An instrument panel that happens to be a publication. Two colour
   roles, held strictly across every page:

     --signal (teal)  every interactive, stateful or navigational
                      thing. Links, buttons, hovers, focus, active
                      nav, progress. Nothing else is ever this colour.
     --gold           the sigil, and only the sigil: the mark itself,
                      the thesis band it sits in, and the raised
                      capital that opens an essay. Never a link,
                      never a button, never a hover.

   One corner radius (2px) on everything, including the archive
   pages. One grain. One accent.

   Motion is deliberately thin. This site was measured at 6fps on a
   mid-range phone when it carried hundreds of transform-animated
   layers, so the rule here is: an animation may exist only if it
   drives a single element, only transform/opacity, and only where
   the pointer is fine and the user has not asked for less.
   ============================================================ */

:root {
  --void:#04080a;
  --deep:#070d0f;
  --panel:#0a1315;
  --panel-2:#0e191b;
  --ink:#e6f1ec;
  --dim:#9cb2ab;
  /* --faint is used at 9-11px, which WCAG counts as normal text, so it has
     to clear 4.5:1 against the lightest panel, not just against the void. */
  --faint:#758d85;
  --signal:#4fe3b4;
  --signal-dim:#2aa886;
  --signal-deep:#0c3a30;
  --gold:#c9a24a;
  --line:rgba(126,214,187,.16);
  --hair:rgba(126,214,187,.075);
  --survey:rgba(126,214,187,.05);
  --serif:"Newsreader",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --r:2px;
  --pad:max(7vw,26px)
}

* { box-sizing:border-box }

html {
  scroll-behavior:smooth;
  background:var(--void);
  -webkit-text-size-adjust:100%
}

body {
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden
}

/* Grain sits above everything and takes no hit tests. */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:99;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")
}

/* ---- the field -------------------------------------------------
   One fixed layer behind the document: two static glows, a surveyed
   grid that fades out below the fold, and a single drifting bloom.
   Sections that want depth paint a translucent panel over it; the
   rest let it through. Nothing here scrolls, so nothing here repaints
   on scroll.
   --------------------------------------------------------------- */
.field {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(940px 640px at 80% -8%,rgba(79,227,180,.085),transparent 62%),
    radial-gradient(780px 580px at 4% 106%,rgba(201,162,74,.055),transparent 60%),
    var(--void)
}

.field::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--survey) 1px,transparent 1px),
    linear-gradient(90deg,var(--survey) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(125% 82% at 50% 0,#000 10%,transparent 74%);
  mask-image:radial-gradient(125% 82% at 50% 0,#000 10%,transparent 74%)
}

.field span {
  position:absolute;
  left:50%;
  top:6%;
  width:min(82vw,980px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,0);
  background:radial-gradient(circle,rgba(79,227,180,.075),transparent 62%)
}

@keyframes bloom { to { transform:translate(-50%,0) scale(1.22) } }

.reading-progress {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:2px;
  z-index:100;
  pointer-events:none
}

.reading-progress span {
  display:block;
  width:100%;
  height:100%;
  background:var(--signal);
  box-shadow:0 0 12px rgba(79,227,180,.55);
  transform:scaleX(0);
  transform-origin:left center
}

img { max-width:100%; height:auto }
a { color:inherit }

.skip-link {
  position:fixed;
  top:-100px;
  left:1rem;
  background:var(--signal);
  color:var(--void);
  font-weight:700;
  border-radius:var(--r);
  padding:.7rem 1rem;
  z-index:120
}

.skip-link:focus { top:1rem }

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}

/* ---- header ---------------------------------------------------- */
.site-header {
  height:80px;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(4,8,10,.82);
  backdrop-filter:blur(14px);
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--hair)
}

.brand,.footer-brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none
}

.brand img,.footer-brand img { object-fit:contain }

.brand span,.footer-brand span {
  display:flex;
  flex-direction:column;
  line-height:1.2
}

.brand strong,.footer-brand strong {
  font-size:15px;
  letter-spacing:.01em
}

.brand small,.footer-brand small {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  margin-top:4px
}

.site-header nav { display:flex; gap:26px }

.site-header nav a {
  position:relative;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--dim);
  transition:color .2s ease
}

.site-header nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:1px;
  background:var(--signal);
  transition:right .25s ease
}

.site-header nav a:hover,.site-header nav a:focus,.site-header nav a.active { color:var(--signal) }
.site-header nav a:hover::after,.site-header nav a.active::after { right:0 }

.menu-button {
  display:none;
  background:none;
  border:0;
  padding:10px;
  cursor:pointer
}

.menu-button>span:not(.sr-only) {
  display:block;
  width:23px;
  height:1px;
  background:var(--ink);
  margin:5px 4px
}

/* ---- hero ------------------------------------------------------ */
.hero {
  min-height:calc(100vh - 80px);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.62fr);
  align-items:center;
  gap:clamp(48px,8vw,120px);
  padding:clamp(64px,9vw,130px) var(--pad);
  position:relative;
  overflow:hidden
}

.hero::after {
  content:"R.A.999";
  position:absolute;
  left:-.04em;
  bottom:-.26em;
  color:transparent;
  -webkit-text-stroke:1px rgba(126,214,187,.06);
  font:500 clamp(130px,25vw,380px)/1 var(--serif);
  letter-spacing:-.08em;
  pointer-events:none
}

.hero-atmosphere {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none
}

.hero-atmosphere::before,.hero-atmosphere::after {
  content:"";
  position:absolute;
  width:1px;
  height:100%;
  top:0;
  background:linear-gradient(transparent,rgba(126,214,187,.18),transparent)
}

.hero-atmosphere::before { left:7vw }
.hero-atmosphere::after { right:7vw }

.hero-atmosphere span {
  position:absolute;
  border:1px solid rgba(126,214,187,.14);
  border-radius:50%;
  right:clamp(20px,8vw,120px);
  top:50%;
  transform:translateY(-50%)
}

.hero-atmosphere span:nth-child(1) { width:clamp(320px,40vw,600px);aspect-ratio:1 }
.hero-atmosphere span:nth-child(2) { width:clamp(260px,32vw,486px);aspect-ratio:1;border-style:dashed;border-color:rgba(126,214,187,.11) }
.hero-atmosphere span:nth-child(3) { width:7px;height:7px;background:var(--gold);border:0;box-shadow:0 0 26px 7px rgba(201,162,74,.4) }

@keyframes orbit-turn { to { transform:translateY(-50%) rotate(360deg) } }

/* ---- registration marks ----------------------------------------
   Corner brackets, the way a plate is cropped for press or a frame is
   marked on an instrument. Four <i> elements, two borders each, no cost.
   They give the full-bleed panels an edge without drawing a box.
   ---------------------------------------------------------------- */
.frame-marks { position:absolute;inset:0;pointer-events:none;z-index:1 }

.frame-marks i {
  position:absolute;
  width:18px;
  height:18px;
  border:0 solid var(--line)
}

.frame-marks i:nth-child(1) { top:22px;left:22px;border-top-width:1px;border-left-width:1px }
.frame-marks i:nth-child(2) { top:22px;right:22px;border-top-width:1px;border-right-width:1px }
.frame-marks i:nth-child(3) { bottom:22px;left:22px;border-bottom-width:1px;border-left-width:1px }
.frame-marks i:nth-child(4) { bottom:22px;right:22px;border-bottom-width:1px;border-right-width:1px }

/* A caption set on its side down the left margin, against the hairline
   that already runs there. Reads as a plate edge, not as navigation. */
.edge-caption {
  position:absolute;
  left:calc(var(--pad) - 26px);
  /* Anchored from the top. The rotated box grows upward from this point,
     so measuring from the bottom of a hero that is taller than the
     viewport pushed the caption off the first screen. */
  top:clamp(300px,46vh,470px);
  transform-origin:0 100%;
  rotate:-90deg;
  margin:0;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--faint);
  pointer-events:none
}

.hero-copy {
  max-width:820px;
  position:relative;
  z-index:1
}

.eyebrow {
  margin:0 0 18px;
  font-family:var(--mono);
  color:var(--signal);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase
}

/* Newsreader ships an optical-size axis (opsz 6..72). Letting the browser
   drive it means the 100px headline gets the high-contrast, tightly fitted
   cut it was drawn for, and 17px body copy gets the sturdier one, from the
   same file. text-wrap:balance keeps headings off widowed last lines. */
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:500;
  font-optical-sizing:auto;
  line-height:1.05;
  color:var(--ink);
  text-wrap:balance;
  margin-top:0
}

/* Sized against Newsreader's real metrics, not a fallback's. At 7vw the
   headline ran five lines on a 1440 laptop and pushed the primary call to
   action off the first screen. */
h1 {
  font-size:clamp(46px,5.4vw,82px);
  letter-spacing:-.04em;
  margin-bottom:24px
}

h2 {
  font-size:clamp(40px,4.8vw,68px);
  letter-spacing:-.035em;
  margin-bottom:20px
}

h3 { font-size:29px; margin-bottom:12px }

p,li { text-wrap:pretty }

/* Any figure a reader might compare against another one gets lining,
   fixed-width digits so the columns line up and 1 is as wide as 7. */
.fact-row strong,.sec-index,.tx-meta,.tx-num,.tx-len,.hero-coordinate,.error-code {
  font-variant-numeric:lining-nums tabular-nums
}

::selection { background:var(--signal);color:var(--void);text-shadow:none }
html { scrollbar-color:var(--signal-deep) var(--void);scrollbar-width:thin }

.lede {
  font-family:var(--serif);
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.42;
  color:var(--dim);
  max-width:740px;
  margin:0 0 34px
}

.actions {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 26px;
  border-radius:var(--r);
  border:1px solid transparent;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease
}

.button.primary {
  background:var(--signal);
  color:var(--void)
}

.button.primary:hover { background:#79f0c8 }

.button.secondary {
  border-color:var(--line);
  background:rgba(126,214,187,.04);
  color:var(--ink)
}

.button.secondary:hover { border-color:var(--signal); color:var(--signal) }
.button:active { transform:translateY(1px) }

.identity-note {
  font-size:13px;
  color:var(--faint);
  margin-top:30px;
  max-width:52ch
}

.identity-note strong { color:var(--dim) }

.hero-topics {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px
}

.hero-topics span {
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:7px 11px;
  color:var(--faint);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:rgba(126,214,187,.03)
}

.hero-portrait {
  margin:0;
  position:relative;
  z-index:1
}

.portrait-frame {
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--panel-2);
  border-radius:220px 220px var(--r) var(--r);
  padding:9px;
  border:1px solid rgba(126,214,187,.28)
}

.portrait-frame::before {
  content:"";
  position:absolute;
  inset:9px;
  z-index:2;
  border:1px solid rgba(126,214,187,.16);
  border-radius:212px 212px var(--r) var(--r);
  pointer-events:none
}

.portrait-frame::after {
  content:"";
  position:absolute;
  inset:9px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(4,8,10,.7))
}

.portrait-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  filter:saturate(.62) contrast(1.06) brightness(.94)
}

figcaption {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  margin-top:14px;
  text-align:center
}

.portrait-note {
  position:absolute;
  right:-30px;
  bottom:48px;
  width:152px;
  padding:16px 17px;
  background:rgba(10,19,21,.94);
  border:1px solid var(--line);
  border-top:1px solid var(--gold);
  border-radius:var(--r);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column
}

.portrait-note span,.portrait-note small {
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint)
}

.portrait-note strong { font:500 26px/1.2 var(--serif);margin:5px 0;color:var(--ink) }

.hero-coordinate {
  position:absolute;
  right:var(--pad);
  bottom:24px;
  color:var(--faint);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em
}

/* ---- ticker ---------------------------------------------------- */
.topic-ticker {
  overflow:hidden;
  background:var(--deep);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:12px 0;
  white-space:nowrap
}

.topic-ticker div {
  display:inline-flex;
  align-items:center;
  gap:26px;
  min-width:max-content
}

.topic-ticker span {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim)
}

.topic-ticker i { font-style:normal;font-size:9px;color:var(--gold) }

@keyframes ticker { to { transform:translateX(-50%) } }

/* ---- section frame --------------------------------------------- */
.section {
  padding:clamp(84px,11vw,146px) var(--pad);
  scroll-margin-top:78px;
  position:relative
}

.sec-index {
  position:absolute;
  top:clamp(32px,5vw,56px);
  right:var(--pad);
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint)
}

.sec-index::before {
  content:"";
  width:clamp(28px,5vw,68px);
  height:1px;
  background:var(--hair)
}

.section-heading {
  max-width:720px;
  margin-bottom:52px
}

.section-heading.row {
  max-width:none;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px
}

.section-heading.row>p {
  max-width:430px;
  color:var(--dim);
  margin:0 0 8px
}

/* Panels are translucent so the field reads through them. No
   backdrop-filter: a full-width blurred surface is the single most
   expensive thing you can put on a phone. */
.panel { background:rgba(10,19,21,.72) }
.panel-2 { background:rgba(14,25,27,.78) }
.panel,.panel-2 { border-top:1px solid var(--hair);border-bottom:1px solid var(--hair) }

/* A register mark sitting on the seam where two panels meet, in the same
   vocabulary as the corner brackets. */
.panel::before,.panel-2::before {
  content:"";
  position:absolute;
  top:-4px;
  left:50%;
  width:7px;
  height:7px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--void);
  border:1px solid var(--line)
}

/* ---- start here: one tall lead, two stacked -------------------- */
.start-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.88fr);
  gap:16px
}

.start-card {
  padding:30px;
  border:1px solid var(--hair);
  border-radius:var(--r);
  text-decoration:none;
  background:rgba(4,8,10,.5);
  display:flex;
  flex-direction:column;
  transition:border-color .25s ease,background-color .25s ease;
  position:relative;
  overflow:hidden
}

.start-card::before,.article-grid article::before,.project-grid article::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(280px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(79,227,180,.11),transparent 68%);
  transition:opacity .25s ease
}

.start-card:hover::before,.article-grid article:hover::before,.project-grid article:hover::before { opacity:1 }

.start-card:hover { border-color:var(--signal-dim) }

.start-card.featured {
  grid-row:1/span 2;
  padding:clamp(30px,4vw,48px);
  background:linear-gradient(155deg,rgba(12,58,48,.55),rgba(4,8,10,.62));
  border-color:var(--line);
  justify-content:flex-end
}

.start-card.featured h3 { font-size:clamp(32px,3.6vw,46px);letter-spacing:-.025em }
.start-card.featured p { color:#bcd6cd;font-size:18px;max-width:44ch }

.start-card h3 { margin-bottom:10px }
.start-card p { color:var(--dim);margin:0 0 22px;flex:1 }

.start-card b {
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--signal);
  position:relative;
  z-index:1
}

.start-card b::after {
  content:"";
  display:block;
  width:32px;
  height:1px;
  margin-top:12px;
  background:var(--signal-dim);
  transition:width .25s ease
}

.start-card:hover b::after { width:66px }

.tag,.status,.book-meta {
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--signal-dim);
  margin:0
}

/* ---- thesis band ----------------------------------------------- */
.thesis-band {
  min-height:420px;
  padding:88px var(--pad);
  background:radial-gradient(760px 460px at 50% 40%,rgba(201,162,74,.07),transparent 68%),var(--void);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden
}

.thesis-band::before,.thesis-band::after {
  content:"";
  position:absolute;
  width:min(70vw,740px);
  aspect-ratio:1;
  border:1px solid rgba(201,162,74,.09);
  border-radius:50%
}

.thesis-band::after { width:min(52vw,560px);border-style:dashed;border-color:rgba(201,162,74,.07) }
.thesis-band img { opacity:.9;margin-bottom:26px;position:relative;z-index:1 }

.thesis-band blockquote {
  font:400 clamp(29px,4.1vw,60px)/1.22 var(--serif);
  font-optical-sizing:auto;
  letter-spacing:-.025em;
  max-width:1000px;
  margin:0;
  text-wrap:balance;
  /* The opening quote mark is punctuation, not a letter. Hanging it puts
     the first real character on the optical margin. Ignored where
     unsupported, which costs nothing. */
  hanging-punctuation:first last;
  position:relative;
  z-index:1
}

.thesis-band p {
  color:var(--gold);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.24em;
  margin:30px 0 0;
  position:relative;
  z-index:1
}

/* ---- split sections -------------------------------------------- */
.split {
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr);
  gap:clamp(50px,9vw,140px)
}

.split .section-heading { margin:0 }

/* The left column of a split runs short by design. A single rule under the
   heading makes the white space read as composed rather than unfinished. */
.split .section-heading::after {
  content:"";
  display:block;
  width:72px;
  height:1px;
  margin-top:34px;
  background:linear-gradient(90deg,var(--signal-dim),transparent)
}

.prose { max-width:720px }
.prose p { color:var(--dim) }

.prose .large {
  font-family:var(--serif);
  color:var(--ink);
  font-size:28px;
  line-height:1.44;
  margin-top:0
}

/* Read as a readout, not as three stat cards: hairline gutters, a shared
   baseline, and figures that align because the digits are tabular. */
.fact-row {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:46px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair)
}

.fact-row div {
  display:flex;
  flex-direction:column;
  padding:22px 0 22px 24px;
  border-left:1px solid var(--hair)
}

.fact-row div:first-child { padding-left:0;border-left:0 }
.fact-row strong { font-family:var(--serif);font-size:32px;line-height:1;color:var(--signal) }

.fact-row span {
  font-family:var(--mono);
  font-size:10px;
  color:var(--faint);
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-top:10px
}

/* ---- field note ------------------------------------------------ */
.field-note {
  padding:clamp(64px,9vw,110px) var(--pad);
  display:grid;
  grid-template-columns:minmax(130px,.35fr) minmax(320px,1.4fr) minmax(150px,.4fr);
  align-items:center;
  gap:48px;
  background:rgba(14,25,27,.8);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  position:relative
}

.field-note::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(var(--signal),transparent)
}

.field-note .eyebrow { margin:0 }

.field-note p:nth-child(2) {
  font:400 clamp(28px,3.8vw,54px)/1.2 var(--serif);
  font-optical-sizing:auto;
  letter-spacing:-.025em;
  text-wrap:balance;
  margin:0
}

.field-note span {
  justify-self:end;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.2em;
  color:var(--faint)
}

/* ---- books ----------------------------------------------------- */
/* No grid overlay here: the field already carries one, and two grids at
   different pitches beat against each other. */


.book-feature {
  display:grid;
  grid-template-columns:minmax(230px,340px) minmax(320px,660px);
  gap:clamp(46px,8vw,120px);
  align-items:center;
  max-width:1120px;
  margin:0 auto 112px
}

.book-feature.reverse { grid-template-columns:minmax(320px,660px) minmax(230px,340px) }
.book-feature.reverse img { grid-column:2 }
.book-feature.reverse>div { grid-column:1;grid-row:1 }

.book-feature img {
  width:100%;
  border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(126,214,187,.18),18px 22px 0 rgba(79,227,180,.05),0 30px 64px rgba(0,0,0,.6);
  transition:transform .35s ease,box-shadow .35s ease
}

.book-feature:hover img {
  transform:translate(-5px,-6px);
  box-shadow:0 0 0 1px rgba(126,214,187,.3),25px 30px 0 rgba(79,227,180,.07),0 34px 74px rgba(0,0,0,.65)
}

.book-feature h3 { font-size:clamp(38px,4.8vw,66px);letter-spacing:-.03em;margin-top:14px }

.book-subtitle {
  font-family:var(--serif);
  font-size:23px;
  color:var(--signal);
  margin-top:-6px
}

.book-feature>div>p:not(.book-meta,.book-subtitle) { color:var(--dim) }

.for-readers {
  padding:18px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  font-size:15px
}

.for-readers strong { color:var(--ink) }

.text-link {
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--signal);
  text-decoration:none;
  border-bottom:1px solid var(--signal-deep);
  padding-bottom:3px
}

.text-link:hover { border-bottom-color:var(--signal) }

/* ---- articles: one lead, two beneath --------------------------- */
.article-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.article-grid article {
  padding:30px;
  border:1px solid var(--hair);
  border-top:1px solid var(--signal-dim);
  border-radius:var(--r);
  background:rgba(4,8,10,.5);
  position:relative;
  overflow:hidden;
  transition:border-color .25s ease
}

.article-grid article:hover { border-color:var(--signal-dim) }
.article-grid article:hover { border-top-color:var(--signal) }

.article-grid article.lead {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,5vw,64px);
  align-items:center;
  padding:clamp(30px,4vw,44px);
  border-top-color:var(--gold);
  background:linear-gradient(120deg,rgba(14,25,27,.8),rgba(4,8,10,.5))
}

.article-grid article.lead:hover { border-top-color:var(--gold) }
.article-grid article.lead h3 { font-size:clamp(32px,3.8vw,48px);letter-spacing:-.025em;margin-bottom:0 }
.article-grid article.lead>div { position:relative;z-index:1 }

.article-grid h3 { margin-top:26px }
.article-grid article>div>p:not(.tag),.article-grid article>p:not(.tag) { color:var(--dim);position:relative;z-index:1 }

.read-more {
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--signal);
  text-decoration:none;
  position:relative;
  z-index:1
}

.read-more::after {
  content:"";
  display:block;
  width:30px;
  height:1px;
  margin-top:10px;
  background:var(--signal-dim);
  transition:width .25s ease
}

.article-grid article:hover .read-more::after { width:64px }

.center { text-align:center;margin-top:44px }
.center .actions { justify-content:center }

/* ---- research principles --------------------------------------- */
.principles { list-style:none;padding:0;margin:38px 0 0 }

.principles li {
  padding:20px 0;
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:190px 1fr;
  gap:24px
}

.principles strong { color:var(--ink) }
.principles span { color:var(--dim) }

/* ---- projects -------------------------------------------------- */
.project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.project-grid article {
  background:rgba(10,19,21,.6);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:34px;
  position:relative;
  overflow:hidden;
  transition:border-color .25s ease,transform .25s ease
}

.project-grid article::after {
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  border:1px solid rgba(126,214,187,.1);
  border-radius:50%;
  right:-42px;
  top:-42px
}

.project-grid article:hover { transform:translateY(-3px);border-color:var(--signal-dim) }
.project-grid h3 { font-size:34px;margin-top:34px;position:relative;z-index:1 }
.project-grid p:not(.status) { color:var(--dim);position:relative;z-index:1 }

.project-grid a {
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--signal);
  text-decoration:none;
  position:relative;
  z-index:1
}

.project-grid a:hover { text-decoration:underline;text-underline-offset:5px }

/* ---- contact --------------------------------------------------- */
.contact {
  background:linear-gradient(180deg,rgba(12,58,48,.42),rgba(4,8,10,.9));
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:end;
  position:relative;
  overflow:hidden
}

.contact::before {
  content:"OPEN CHANNEL";
  position:absolute;
  right:-.03em;
  bottom:-.24em;
  color:transparent;
  -webkit-text-stroke:1px rgba(126,214,187,.09);
  font:500 clamp(72px,11.5vw,178px)/1 var(--serif);
  white-space:nowrap;
  pointer-events:none
}

.contact>div { position:relative;z-index:1 }
.contact h2 { margin-bottom:16px }
.contact p:not(.eyebrow) { color:var(--dim);max-width:620px }

.contact-links {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  position:relative;
  z-index:1
}

.contact-links a:not(.button) {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  text-decoration:none
}

.contact-links a:not(.button):hover { color:var(--signal) }

/* ---- footer ---------------------------------------------------- */
footer {
  padding:34px var(--pad);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  background:var(--void);
  border-top:1px solid var(--hair)
}

footer p { font-size:12px;color:var(--faint) }

/* ---- reveal ---------------------------------------------------- */
.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease,transform .7s ease
}

.reveal.in-view { opacity:1;transform:none }

/* ============================================================
   ARCHIVE PAGES  (/tx/<slug>)
   Same tokens, same radius, same two colour roles. The raised
   capital is the one place gold appears in body copy, because it
   is the sigil opening the text.
   ============================================================ */
.tx-body { background:transparent }

.tx-topbar {
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px clamp(20px,5vw,64px);
  background:rgba(4,8,10,.86);
  border-bottom:1px solid var(--hair);
  backdrop-filter:blur(12px)
}

.tx-topbar img { display:block;border-radius:50% }
.tx-topbar .tx-home { font-weight:600;color:var(--ink);text-decoration:none;font-size:15px }
.tx-topbar .tx-home:hover { color:var(--signal) }

.tx-topbar .tx-back {
  margin-left:auto;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
  text-decoration:none
}

.tx-topbar .tx-back:hover { text-decoration:underline;text-underline-offset:5px }

.tx-shell { max-width:720px;margin:0 auto;padding:0 clamp(20px,5vw,32px) }

.tx-head { padding:clamp(40px,7vw,72px) 0 0 }

.tx-kicker {
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 14px
}

.tx-head h1 {
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(32px,5.6vw,52px);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 18px;
  color:var(--ink)
}

.tx-standfirst {
  font-family:var(--serif);
  font-size:clamp(19px,2.4vw,23px);
  line-height:1.58;
  color:var(--dim);
  margin:0 0 24px
}

.tx-meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
  padding-bottom:24px;
  border-bottom:1px solid var(--hair);
  margin-bottom:36px
}

.tx-meta .tx-free { color:var(--signal);font-weight:600 }

.tx-prose p {
  font-family:var(--serif);
  font-size:clamp(18px,2.05vw,20px);
  font-optical-sizing:auto;
  line-height:1.78;
  color:#d3e2dc;
  text-wrap:pretty;
  margin:0 0 24px
}

.tx-prose p:first-of-type::first-letter {
  font-size:3.1em;
  line-height:.86;
  float:left;
  padding:8px 12px 0 0;
  color:var(--gold);
  font-weight:500
}

/* An end mark, so the essay closes on something rather than stopping. */
.tx-prose p:last-child::after {
  content:"✦";
  display:inline-block;
  margin-left:.5em;
  font-size:.62em;
  vertical-align:.12em;
  color:var(--gold)
}

.tx-prose em { font-style:italic;color:var(--signal) }
.tx-prose strong { font-weight:600;color:var(--ink) }

.tx-nav { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 0 }

.tx-nav a {
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:18px 20px;
  text-decoration:none;
  color:var(--ink);
  background:rgba(10,19,21,.6);
  transition:border-color .2s ease,background-color .2s ease
}

.tx-nav a:hover { border-color:var(--signal-dim);background:rgba(12,58,48,.4) }

.tx-nav span {
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:7px
}

/* The arrows are drawn from the label, not typed into the markup, so the
   link text stays clean for a screen reader. */
.tx-nav a:not(.tx-next) span::before { content:"← " }
.tx-nav .tx-next span::after { content:" →" }
.tx-nav b { font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.3;text-wrap:balance }
.tx-nav .tx-next { text-align:right }

.tx-after { margin:40px 0 0;display:grid;gap:14px }

.tx-cta {
  display:block;
  text-decoration:none;
  border-radius:var(--r);
  padding:24px 26px;
  background:linear-gradient(140deg,rgba(12,58,48,.6),rgba(4,8,10,.7));
  border:1px solid var(--line);
  color:var(--ink)
}

.tx-cta.alt { background:rgba(10,19,21,.6);border-color:var(--hair) }

.tx-cta span {
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:9px
}

.tx-cta b { font-family:var(--serif);font-weight:500;font-size:21px;display:block;margin-bottom:8px }
.tx-cta small { display:block;font-size:15px;line-height:1.6;color:var(--dim) }
.tx-cta:hover { border-color:var(--signal-dim) }

.tx-foot {
  margin-top:56px;
  padding:24px 0 64px;
  border-top:1px solid var(--hair);
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  align-items:center;
  font-size:13px;
  color:var(--faint)
}

.tx-foot a { color:var(--signal);text-decoration:none }
.tx-foot a:hover { text-decoration:underline;text-underline-offset:4px }

/* Archive index */
.tx-index-head { padding:clamp(40px,7vw,72px) 0 8px }

.tx-index-head h1 {
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(34px,6vw,54px);
  line-height:1.1;
  letter-spacing:-.03em;
  margin:0 0 16px;
  color:var(--ink)
}

/* :not(.tx-kicker) matters: a bare `.tx-index-head p` outranks `.tx-kicker`
   and would repaint the gold label in body grey. */
.tx-index-head p:not(.tx-kicker) { font-size:18px;line-height:1.7;color:var(--dim);max-width:60ch;margin:0 0 8px }

.tx-series { margin:44px 0 0 }

.tx-series h2 {
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 6px;
  padding-bottom:10px;
  border-bottom:1px solid var(--hair)
}

.tx-list { list-style:none;margin:0;padding:0 }
.tx-list li { border-bottom:1px solid var(--hair) }

.tx-list a {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 16px;
  padding:18px 6px;
  text-decoration:none;
  color:var(--ink);
  transition:background-color .2s ease
}

.tx-list a:hover { background:rgba(126,214,187,.045) }

.tx-list .tx-num {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--faint);
  min-width:86px
}

.tx-list .tx-name { font-family:var(--serif);font-size:20px;font-weight:500;flex:1 1 240px }
.tx-list a:hover .tx-name { color:var(--signal) }
.tx-list .tx-len { font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--faint) }
.tx-list .tx-blurb { flex:1 1 100%;font-size:15px;color:var(--dim);line-height:1.6;margin:2px 0 0 }

/* ---- 404 ------------------------------------------------------- */
.error-page { min-height:100vh;display:grid;place-items:center;position:relative }
.error-content { width:min(680px,calc(100% - 48px));padding:80px 0 }
.error-brand { color:var(--ink);width:max-content;margin-bottom:clamp(70px,12vh,130px) }

.error-code {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--signal);
  margin:0 0 20px
}

.error-content h1 { font-size:clamp(46px,8vw,84px);letter-spacing:-.04em;margin-bottom:22px }
.error-content>p:not(.error-code) { max-width:590px;color:var(--dim);font-size:18px;margin-bottom:32px }

/* ---- focus ----------------------------------------------------- */
:focus-visible { outline:2px solid var(--signal);outline-offset:3px }

/* ---- responsive ------------------------------------------------ */
@media(max-width:980px) {
  .site-header nav {
    display:none;
    position:absolute;
    top:79px;
    left:0;
    right:0;
    padding:18px var(--pad) 26px;
    background:rgba(4,8,10,.98);
    flex-direction:column;
    gap:0;
    border-bottom:1px solid var(--hair)
  }
  .site-header nav.open { display:flex }
  .site-header nav a { padding:13px 0;font-size:15px }
  .site-header nav a::after { display:none }
  .menu-button { display:block }
  .hero { grid-template-columns:1fr;min-height:auto }
  .hero-portrait { max-width:390px }
  .portrait-note { right:-14px }
  .sec-index,.edge-caption { display:none }
  .frame-marks i { width:13px;height:13px }
  .frame-marks i:nth-child(1),.frame-marks i:nth-child(2) { top:14px }
  .frame-marks i:nth-child(3),.frame-marks i:nth-child(4) { bottom:14px }
  .frame-marks i:nth-child(1),.frame-marks i:nth-child(3) { left:14px }
  .frame-marks i:nth-child(2),.frame-marks i:nth-child(4) { right:14px }
  .split { grid-template-columns:1fr }
  .section-heading.row { display:block }
  .section-heading.row>p { margin-top:14px }
  .start-grid { grid-template-columns:1fr }
  .start-card.featured { grid-row:auto }
  .article-grid { grid-template-columns:1fr }
  .article-grid article.lead { grid-template-columns:1fr;gap:20px }
  .book-feature,.book-feature.reverse { grid-template-columns:minmax(160px,250px) 1fr;gap:42px }
  .project-grid { grid-template-columns:1fr }
  .contact { grid-template-columns:1fr }
  .contact-links { justify-content:flex-start }
  .field-note { grid-template-columns:1fr;gap:24px }
  .field-note span { justify-self:start }
  footer { gap:28px }
}

@media(max-width:620px) {
  body { font-size:16px }
  .site-header { height:70px }
  .site-header nav { top:69px }
  .hero { padding-top:64px }
  .hero h1 { font-size:44px }
  .hero .lede { font-size:21px }
  /* The orbit rings sit behind the headline once the hero stacks, which is
     the kind of busy backdrop that makes small type hard to read. Keep the
     gold marker, drop the circles. */
  .hero-atmosphere span:nth-child(1),.hero-atmosphere span:nth-child(2) { display:none }
  .hero-atmosphere span:nth-child(3) { top:4%;right:9vw }
  .hero .actions { display:grid;grid-template-columns:1fr;gap:12px }
  .hero-portrait { max-width:290px }
  .portrait-note { right:-8px;bottom:32px;width:124px;padding:13px }
  .hero-coordinate { display:none }
  .hero::after { font-size:34vw }
  .section { padding-top:76px;padding-bottom:76px }
  .section-heading { margin-bottom:36px }
  .book-feature,.book-feature.reverse { display:flex;flex-direction:column;align-items:flex-start;margin-bottom:84px }
  .book-feature img { width:min(70vw,290px) }
  .fact-row { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .fact-row div:nth-child(3) { padding-left:0;border-left:0;border-top:1px solid var(--hair) }
  .principles li { grid-template-columns:1fr;gap:4px }
  .contact-links { align-items:flex-start;flex-direction:column }
  footer { align-items:flex-start;flex-direction:column }
  .tx-nav { grid-template-columns:1fr }
  .tx-nav .tx-next { text-align:left }
  .tx-prose p:first-of-type::first-letter { font-size:2.6em }
}

/* ---- motion gate ------------------------------------------------
   Animation is opt-in, not opt-out. It runs only on a fine pointer
   at a comfortable width, which is exactly the class of device that
   can afford it. Phones and tablets get the same layout with the
   moving parts held still.
   ---------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine) and (min-width:981px) {
  .field span { animation:bloom 38s ease-in-out infinite alternate }
  .hero-atmosphere span:nth-child(2) { animation:orbit-turn 90s linear infinite }
  .topic-ticker div { animation:ticker 34s linear infinite }
  .button.primary:hover,.button.secondary:hover { transform:translateY(-2px) }
}

/* ---- cross-document transitions ---------------------------------
   The homepage and the 37 archive pages are one site, so moving between
   them should not read as a hard cut. The header and the archive topbar
   share a transition name, so the chrome holds still while the page
   underneath changes. Browsers without view transitions navigate as
   before; nothing is polyfilled.
   ---------------------------------------------------------------- */
@view-transition { navigation:auto }

/* Only the chrome is named. Naming the backdrop too would make the browser
   snapshot a second full-viewport texture on every navigation for a layer
   that is identical on both pages. */
.site-header,.tx-topbar { view-transition-name:site-chrome }

::view-transition-old(root),::view-transition-new(root) { animation-duration:.26s }

/* ---- more contrast ----------------------------------------------
   For readers who ask the OS for it, the quiet greys and hairlines come
   up. Layout, colour roles and type are untouched.
   ---------------------------------------------------------------- */
@media (prefers-contrast:more) {
  :root {
    --dim:#d3e3dd;
    --faint:#a6bdb5;
    --hair:rgba(126,214,187,.26);
    --line:rgba(126,214,187,.42);
    --survey:rgba(126,214,187,.1)
  }
  .tx-prose p { color:var(--ink) }
  .button.secondary { border-color:var(--signal-dim) }
}

/* ---- print -------------------------------------------------------
   People print essays. On paper the whole dark system inverts: the
   backdrop, the chrome and the navigation come off, type goes to black
   on white, and every link's destination is printed after it so the
   page still works once it has left the screen.
   ------------------------------------------------------------------ */
@media print {
  .field,.reading-progress,.site-header,.tx-topbar,.menu-button,.skip-link,
  .topic-ticker,.sec-index,.edge-caption,.frame-marks,.hero-atmosphere,
  .hero-coordinate,.portrait-note,.tx-nav,.tx-after,.contact-links { display:none !important }

  html,body { background:#fff !important;color:#000 !important;font-size:11pt }
  body::before { display:none !important }
  h1,h2,h3,.tx-head h1,.tx-index-head h1 { color:#000 !important }
  p,li,.prose p,.tx-prose p,.tx-standfirst,.lede { color:#111 !important }
  .hero,.section,.thesis-band,.field-note,.contact,.panel,.panel-2,
  .start-card,.article-grid article,.project-grid article,.tx-cta {
    background:none !important;border-color:#bbb !important;box-shadow:none !important
  }
  .section,.hero { padding:0 0 18pt !important;min-height:0 !important }
  .tx-shell { max-width:none;padding:0 }
  .tx-prose p:first-of-type::first-letter { color:#000 !important }
  .tx-meta,.eyebrow,.tag,.status,.book-meta,.tx-kicker { color:#444 !important }
  a { color:#000 !important;text-decoration:underline }
  /* Print where a link actually goes, but only for real destinations. */
  .tx-prose a[href^="http"]::after,.prose a[href^="http"]::after { content:" (" attr(href) ")";font-size:9pt;color:#555 }
  .tx-foot,footer { border-top:1px solid #bbb }
  article,.book-feature,.tx-head { break-inside:avoid }
  h1,h2,h3 { break-after:avoid }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important;transition:none!important }
  .reveal { opacity:1;transform:none }
}

@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation:none }
}