/**
 * site.css
 * Styles for the Frothly site. Dark throughout, with a green accent,
 * condensed display type and gradient headings.
 *
 * Created: 2026-11-02
 * Last modified: 2026-11-03
 */

/* Self-hosted typefaces (SIL Open Font License; see /assets/fonts/LICENSE-*.txt). */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/anton-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/anton-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin-ext-wght-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #050B09;
  --bg-deep: #020504;
  --panel: #0A1411;
  --card: #0F1A16;
  --line: #12201B;
  --line-2: #17241F;
  --line-3: #2A3D35;
  --text: #F1F5F2;
  --text-2: #C9D4CE;
  --text-3: #B5C2BB;
  --muted: #93A39B;
  --dim: #5E6E66;
  --green: #2BD67B;
  --green-ink: #0B7A45;
  --lime: #D9F25A;
  --teal: #14B8A6;
  --forest: #0F3D2E;
  --emerald: #13A36A;
  --ink: #04110A;
  --paper: #F1F5F2;
  --paper-2: #EEF3EF;
  --paper-ink: #0B1410;
  --paper-muted: #3D4B44;
  --amber: #F5C26B;
  --salmon: #F0A591;
  --aqua: #5EEAD4;
  --grad: linear-gradient(90deg, #D9F25A 0%, #2BD67B 55%, #14B8A6 100%);
  /* The site's accent: green here, and each program site sets its own
     (see src/lib/marks.mjs). Status colours stay green everywhere. */
  --accent: var(--green);
  --accent-glow: rgba(43, 214, 123, 0.24);
  --accent-glow-2: rgba(20, 184, 166, 0.08);
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --radius: 20px;
  --radius-sm: 14px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: inline-block; vertical-align: middle; }
a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
strong { font-weight: 600; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: 999px;
  background: var(--paper); color: var(--paper-ink); font-weight: 700;
}
.skip-link:focus { top: 16px; color: var(--paper-ink); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

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

/* ---------- Type helpers ---------- */

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.eyebrow {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 5.5vw, 76px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.heading {
  display: inline-block;
  padding-bottom: 0.06em;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lede {
  margin-top: 28px;
  max-width: 600px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--text-2);
}
.rule { display: block; margin-top: 28px; width: min(100%, 520px); height: 6px; background: var(--accent); }
.text-link { display: inline-block; padding: 12px 0; font-size: 15px; font-weight: 700; }
.mono { font-family: var(--font-mono); font-size: 13px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn--green { background: var(--accent); color: var(--ink); }
.btn--green:hover { color: var(--ink); filter: brightness(1.08); }
.btn--ghost { border-color: var(--text); color: var(--text); }
.btn--ghost:hover { background: rgba(241, 245, 242, 0.1); color: var(--text); }
.actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.actions--center { justify-content: center; }

/* ---------- Navigation ---------- */

.site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; padding-top: 16px; }
.site-header .container { padding-inline: clamp(12px, 3vw, 32px); }
/* Dark glass: the panel colour, slightly see-through, over a blur of the
   hero behind it. Nearly solid while the phone menu is open, so the links
   stay readable over the page. */
.nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 32px;
  padding: 6px 12px 6px 20px;
  background: rgba(10, 20, 17, 0.72); color: var(--text);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(241, 245, 242, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.nav.is-open { background: rgba(10, 20, 17, 0.94); }
.nav__brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
/* The logo takes a program site's colour in its nav, and stays green in
   every footer. */
.nav__brand svg { width: 24px; height: 24px; color: var(--accent); }
.nav__links { display: flex; flex-wrap: wrap; gap: 0 26px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.nav__links a { position: relative; display: block; padding: 13px 0; color: var(--text-2); }
.nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: var(--accent); }
.nav a:hover { color: var(--accent); }
/* The link back to Frothly stays green on every site. */
.nav__links .nav__accent, .nav__links .nav__accent:hover { color: var(--green); }
.nav__links .nav__search { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 32px; }
.nav__search svg { flex: none; width: 17px; height: 17px; }
.nav__toggle { display: none; }
/* On wide screens the search link is just its icon; the phone menu labels it. */
@media (min-width: 961px) {
  .nav__search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 960px) {
  .nav { padding-right: 6px; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--text);
    cursor: pointer;
  }
  .js .nav__links {
    display: none; flex-basis: 100%; flex-direction: column;
    margin-top: 6px; padding: 4px 8px 10px 0;
    border-top: 1px solid var(--line-3);
  }
  .js .nav.is-open .nav__links { display: flex; }
  .nav__links a[aria-current="page"]::after { right: auto; width: 28px; bottom: 8px; }
}

/* ---------- Home hero ---------- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 560px at 72% -8%, rgba(43, 214, 123, 0.30), rgba(20, 184, 166, 0.10) 45%, rgba(5, 11, 9, 0) 72%),
    var(--bg);
}
.hero__mark {
  position: absolute;
  right: clamp(-260px, -12vw, -80px);
  bottom: clamp(-300px, -18vw, -120px);
  width: clamp(320px, 44vw, 640px); height: auto;
  color: var(--accent);
  pointer-events: none;
}
/* The beams fade to a trace behind the text column and come up to full
   strength past its right edge. The edge is the content box's: the
   container's left padding plus the 720px text width, measured from where
   the beams start. */
.hero__beams {
  --beams-start: 38vw;
  --text-edge: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter) + min(720px, 100vw - 2 * var(--gutter)) - var(--beams-start));
  --beside-text: linear-gradient(90deg, rgba(0, 0, 0, 0.14) var(--text-edge), #000 calc(var(--text-edge) + 160px));
  position: absolute; right: 0; bottom: 0; width: calc(100% - var(--beams-start)); height: 100%; pointer-events: none;
  -webkit-mask-image: var(--beside-text);
  mask-image: var(--beside-text);
}
/* Narrow screens have little room beside the text, so the beams also show
   at full strength above it, in the band between the nav and the eyebrow,
   fading out just before the text begins. */
@media (max-width: 960px) {
  .hero__beams {
    --above-text: linear-gradient(to bottom, #000 calc(clamp(140px, 15vw, 204px) - 35px), transparent clamp(140px, 15vw, 204px));
    -webkit-mask-image: var(--beside-text), var(--above-text);
    mask-image: var(--beside-text), var(--above-text);
  }
}
.hero__beams .beams__lines rect { animation: beam-pulse 6s ease-in-out infinite; }
.hero__beams .beams__lines rect:nth-child(3n) { animation-delay: -2s; }
.hero__beams .beams__lines rect:nth-child(3n + 1) { animation-delay: -4s; }
@keyframes beam-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* Pulses rising up the beams. They only move once site.js has shown the
   pause button; each pulse sets its own duration, delay and rise inline. */
.hero__beams .beams__signals rect { opacity: 0; }
.hero--signals .hero__beams .beams__signals rect { animation: beam-signal 12s linear infinite; }
@keyframes beam-signal {
  0% { transform: translateY(0); opacity: 0; }
  8%, 32% { opacity: 1; }
  40%, 100% { transform: translateY(var(--rise)); opacity: 0; }
}
.hero.is-paused .hero__beams rect { animation-play-state: paused; }
.hero__motion {
  position: absolute; right: var(--gutter); bottom: 28px;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line-3); border-radius: 50%;
  background: rgba(5, 11, 9, 0.5); color: var(--text-3); cursor: pointer;
}
.hero__motion:hover { border-color: var(--accent); color: var(--text); }
.hero__motion svg { width: 10px; height: 12px; }
.hero__motion-icon { display: flex; }
.hero__motion-icon--play { margin-left: 2px; }
.hero__motion-icon--play, .hero.is-paused .hero__motion-icon--pause { display: none; }
.hero.is-paused .hero__motion-icon--play { display: flex; }
.hero__inner { position: relative; z-index: 2; padding-top: clamp(140px, 15vw, 204px); padding-bottom: clamp(88px, 10vw, 140px); }
.hero__content { max-width: 720px; }
.hero__title { font-size: clamp(44px, 6vw, 80px); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; }
@media (max-width: 760px) {
  .hero__mark { opacity: 0.45; }
  /* Wider on phones, so more than a handful of beams are in view. */
  .hero__beams { --beams-start: 15vw; }
}

/* ---------- Inner page hero ---------- */

.page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 80% -10%, var(--accent-glow), var(--accent-glow-2) 45%, rgba(5, 11, 9, 0) 72%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-hero__mark {
  position: absolute;
  right: clamp(-200px, -9vw, -70px);
  bottom: clamp(-220px, -14vw, -90px);
  width: clamp(260px, 32vw, 460px); height: auto;
  color: var(--accent);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 2; padding-top: clamp(124px, 12vw, 168px); padding-bottom: clamp(48px, 5.5vw, 76px); }
.page-hero__title {
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.page-hero__title--compact { max-width: 22ch; font-size: clamp(40px, 5.6vw, 76px); line-height: 1; }
@media (max-width: 760px) { .page-hero__mark { opacity: 0.25; } }
/* Where a hero's search form runs over the mark, a ring of the background
   colour keeps each control clear of it. */
.page-hero form .btn, .page-hero form .input, .page-hero form .select { box-shadow: 0 0 0 6px var(--bg); }
.page-hero form .input:focus, .page-hero form .select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 0 8px var(--bg); }

/* ---------- Sections ---------- */

.section { padding-block: clamp(64px, 7.5vw, 96px); }
.section--flush-top { padding-top: 0; }
.section--compact { padding-top: clamp(44px, 5.5vw, 64px); }
.display--spaced { margin-top: clamp(48px, 6vw, 72px); scroll-margin-top: 24px; }
.program-list { padding-top: clamp(40px, 5vw, 64px); }
.section--deep { background: var(--bg-deep); border-block: 1px solid var(--line); }
.section-intro { margin-top: 16px; max-width: 640px; font-size: 18px; color: var(--text-3); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 40px; }
.center { text-align: center; }
.center .section-intro { margin-inline: auto; }

/* ---------- Supporters ---------- */

.supporters { padding-block: clamp(48px, 6vw, 72px); text-align: center; border-top: 1px solid var(--line); }
.supporters__title { display: inline-block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.01em; }
.supporters__note { max-width: 560px; margin: 10px auto 0; font-size: 15px; color: var(--muted); }
.supporters__rows { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 24px; color: var(--text-3); }
.supporters__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 64px; }
.supporters__row a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.supporters__row a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.wordmark--oxenfurt { font-family: Georgia, serif; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; }
.wordmark--rosen { font-family: Georgia, serif; font-style: italic; font-size: 20px; }
.wordmark--runciter { font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.wordmark--hosaka { font-size: 22px; font-weight: 700; letter-spacing: -0.04em; }
.wordmark--sensenet { font-family: var(--font-mono); font-size: 15px; }
.wordmark--trioptimum { font-size: 18px; font-weight: 600; }
.wordmark--kiroshi { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- News tiles ---------- */

.tiles { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.tile {
  position: relative; overflow: hidden;
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 26px;
  border-radius: var(--radius-sm);
  transition: transform 0.2s ease;
}
.tile:hover { transform: translateY(-3px); }
.tile--forest, .tile--forest:hover { background: var(--forest); color: var(--text); }
.tile--emerald, .tile--emerald:hover { background: var(--emerald); color: var(--ink); }
.tile--lime, .tile--lime:hover { background: var(--lime); color: var(--ink); }
.tile__mark { position: absolute; right: -90px; bottom: -110px; width: 280px; height: 280px; opacity: 0.22; }
.tile__label, .tile__title, .tile__meta { position: relative; }
.tile__label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tile__title { font-size: clamp(23px, 2vw, 27px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.tile__meta { font-size: 14px; font-weight: 600; }

/* ---------- Registry feed ---------- */

.feed-head { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.feed-head__actions { display: flex; align-items: center; gap: 20px; }
.feed__toggle {
  min-height: 36px; padding: 6px 16px;
  border: 1px solid var(--line-3); border-radius: 999px;
  background: transparent; color: var(--text-3);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.feed__toggle:hover { border-color: var(--accent); color: var(--text); }
.feed { margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.feed__track {
  display: flex; width: max-content;
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
/* The moving feed fades out at the edges of the content column, so on wide
   screens it lines up with the rest of the page instead of running to the
   window's edges. On phones the column is the window. */
.feed--animated {
  --fade-start: max(0px, (100% - var(--container)) / 2 - 40px);
  --fade-end: max(var(--gutter), (100% - var(--container)) / 2 + var(--gutter));
  --fade: linear-gradient(90deg, transparent var(--fade-start), #000 var(--fade-end), #000 calc(100% - var(--fade-end)), transparent calc(100% - var(--fade-start)));
  overflow: hidden; -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
.feed--animated .feed__track { padding-left: 0; animation: feed-scroll 70s linear infinite; }
.feed--animated:hover .feed__track, .feed--animated.is-paused .feed__track { animation-play-state: paused; }
@keyframes feed-scroll { to { transform: translateX(-50%); } }
.feed__item {
  flex: 0 0 auto; width: 330px; margin-right: 14px;
  display: flex; overflow: hidden;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 12px;
}
.feed__icon { flex: 0 0 56px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 6%, transparent); border-right: 1px solid var(--line-2); }
.feed__icon svg { width: 14px; height: 14px; }
.feed__body { min-width: 0; padding: 16px 18px; }
.feed__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
a.feed__title:hover { color: var(--accent); }
.feed__meta { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }

/* ---------- Program tabs (home) ---------- */

.programs { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 40px 64px; }
.prog-list { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.prog-tab {
  margin: 0; padding: 6px 0;
  border: 0; background: none;
  font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 50px); line-height: 1.15;
  letter-spacing: 0.01em; text-transform: uppercase; text-align: left;
  color: var(--dim);
  text-decoration: none; text-decoration-thickness: 4px; text-underline-offset: 9px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.prog-tab:hover { color: var(--text); }
.prog-tab[aria-selected="true"] { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); }
.prog-panels { flex: 1.4 1 520px; min-width: 0; }
.prog-panel { padding: clamp(24px, 3.5vw, 44px); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.prog-panel__focus { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.prog-panel__name { margin-top: 12px; font-size: clamp(30px, 3vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.prog-panel__desc { margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--text-2); }
.prog-panel__facts { margin-top: 28px; font-size: 14.5px; color: var(--muted); }
.prog-panel__facts strong { color: var(--text); font-weight: 500; }
.prog-panel .btn { margin-top: 28px; }
.prog-panel__actions { align-items: center; gap: 8px 24px; }
.prog-panel__actions .btn { margin-top: 0; }

.metrics { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 24px; }
.metric { flex: 1 1 130px; min-width: 0; }
.metric__value { display: inline-block; font-size: clamp(32px, 3vw, 42px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.metric__label { margin-top: 8px; font-size: 13.5px; color: var(--muted); }

/* ---------- Charter ---------- */

.charter { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; text-align: left; }
.charter__item { padding: 32px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.charter__num { font-family: var(--font-display); font-size: 72px; line-height: 1; color: var(--accent); }
.charter__label { margin-top: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.charter__text { margin-top: 12px; font-size: 18px; line-height: 1.55; }
.charter-zero {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 20px 28px;
  border: 1px dashed var(--line-3); border-radius: var(--radius);
  text-align: left;
}
.charter-zero__num { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--muted); }
.charter-zero p { flex: 1 1 360px; font-size: 16px; color: var(--text-3); }
.charter-zero strong { color: var(--text); font-weight: 500; }

/* ---------- Black panel with stats ---------- */

.panel-wrap { padding-inline: clamp(12px, 2vw, 24px); }
.panel-black {
  max-width: 1392px; margin-inline: auto;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 72px);
  background: #000; border: 1px solid var(--line); border-radius: 28px;
}
.stats { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 40px 32px; }
.stat__icon { display: block; }
.stat__icon svg { width: 24px; height: 24px; color: var(--accent); }
.stat__value { margin-top: 14px; display: inline-block; font-size: clamp(40px, 4vw, 54px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.stat__label { margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.panel-black__foot { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px 64px; }
.quote { flex: 2 1 480px; min-width: 0; }
.quote blockquote { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.quote figcaption { margin-top: 20px; font-size: 14.5px; color: var(--muted); }
.panel-black__action { flex: 1 1 240px; min-width: 0; }

/* ---------- Research cards ---------- */

.cards { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; transition: transform 0.2s ease; }
a.card:hover { transform: translateY(-3px); color: var(--text); }
.card__art { display: flex; align-items: center; justify-content: center; height: 160px; color: #9BF0C1; }
.card__art--gear { background: radial-gradient(120% 100% at 30% 15%, #1C6B4A 0%, #0B2A20 55%, #071410 100%); }
.card__art--eyes { background: radial-gradient(120% 100% at 70% 15%, #127A6E 0%, #0A2B26 55%, #071410 100%); }
.card__art--decay { align-items: flex-end; padding-bottom: 28px; background: radial-gradient(120% 100% at 30% 15%, #4F7A1C 0%, #1F2E0E 55%, #071410 100%); color: var(--lime); }
.card__art--lattice { background: radial-gradient(120% 100% at 70% 15%, #1C6B4A 0%, #0B2A20 55%, #071410 100%); }
.card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.card__type { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.card__title { font-size: 19px; font-weight: 700; line-height: 1.25; }
.card__text { font-size: 14.5px; line-height: 1.55; color: var(--text-3); }
.card__link { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; }

/* ---------- People ---------- */

.people { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* Column counts come from the list's length (renderPeople), chosen so no
   card is left alone on the last row. */
@media (min-width: 640px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .people { grid-template-columns: repeat(var(--people-columns-middle, 2), minmax(0, 1fr)); } }
@media (min-width: 1180px) { .people { grid-template-columns: repeat(var(--people-columns, 4), minmax(0, 1fr)); } }
.person { height: 100%; display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--panel); border: 1px solid var(--line-2); border-top: 4px solid var(--accent); border-radius: 18px; transition: border-color 0.15s ease; }
a.person:hover { border-color: var(--accent); color: var(--text); }
a.person:hover .person__name { color: var(--accent); }
.person__text { min-width: 0; }
.person__name { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; transition: color 0.15s ease; }
.person__role { display: block; margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.person-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.person-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.profile-work { margin-top: 40px; }
.profile-work .label { color: var(--accent); }
.board--bios li { flex-direction: column; gap: 2px; }
.board__bio { font-size: 14.5px; color: var(--muted); }

/* Staff portraits, "shown through Scramble": drawn live on a canvas by
   assets/portraits.js, or a still frame without JavaScript. The picture
   darkens towards its corners like an old screen. */
.portrait { position: relative; flex: 0 0 auto; display: block; width: 168px; height: 168px; overflow: hidden; background: #071410; border: 1px solid var(--line-2); border-radius: 14px; }
.portrait img, .portrait canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle farthest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 25%, rgba(0, 0, 0, 0.063) 50%, rgba(0, 0, 0, 0.18) 75%, rgba(0, 0, 0, 0.38) 100%); }
.portrait--small { width: 60px; height: 60px; border-radius: 10px; }
.portrait-caption { font-size: 13px; color: var(--muted); }

/* ---------- Audio Logs band ---------- */

.band { position: relative; overflow: hidden; background: var(--forest); }
.band__mark { position: absolute; right: -150px; top: 50%; width: 440px; height: 440px; margin-top: -220px; color: var(--accent); pointer-events: none; }
.band__inner { position: relative; padding-block: clamp(48px, 6vw, 72px); display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; }
.band__title { flex: 1 1 360px; min-width: 0; }
.band__title span { display: block; }
/* Dark glass, like the nav, so the bright green play button leads. */
.episode-card {
  flex: 1 1 420px; min-width: 0; max-width: 580px;
  display: flex; align-items: center; gap: 20px;
  padding: 22px 24px;
  background: rgba(5, 11, 9, 0.62); color: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(241, 245, 242, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.episode-card__play {
  flex: 0 0 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--ink);
}
.episode-card__play:hover { color: var(--ink); filter: brightness(1.08); }
button.episode-card__play { position: relative; padding: 0; border: 0; cursor: pointer; }
.episode-card__icon { display: flex; }
.episode-card__icon--pause, .episode-card__play.is-playing .episode-card__icon--play { display: none; }
.episode-card__play.is-playing .episode-card__icon--pause { display: flex; }
/* Progress ring just outside the button, shown once the episode has started. */
.episode-card__ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.episode-card__play.is-started .episode-card__ring { opacity: 1; }
.episode-card__ring circle { fill: none; stroke-width: 2.5; }
.episode-card__track { stroke: rgba(241, 245, 242, 0.14); }
.episode-card__progress { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.3s linear; }
.episode-card__meta { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.episode-card__title { margin-top: 4px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.episode-card__text { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-3); }

/* ---------- Footer ---------- */

.footer { background: var(--bg-deep); border-top: 1px solid var(--line); }
.footer__inner { padding-block: 60px 28px; }
.footer__top { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.footer__brand { flex: 2 1 320px; min-width: 0; }
.footer__logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.footer__logo svg { width: 24px; height: 24px; color: var(--green); }
.footer__text { margin-top: 16px; max-width: 400px; font-size: 15px; color: var(--muted); }
.footer__text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer__col { flex: 1 1 150px; min-width: 0; }
.footer__heading { margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.footer__col a { display: inline-block; padding: 7px 0; font-size: 15px; color: var(--muted); }
.footer__col a:hover { color: var(--accent); }
.footer__offices {
  margin-top: 56px;
  display: flex; flex-wrap: wrap; gap: 1px;
  overflow: hidden;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
}
.footer__office { flex: 1 1 170px; display: flex; flex-direction: column; padding: 16px 18px; background: var(--bg-deep); }
.footer__office-city { font-size: 14px; }
.footer__office-time { margin-top: 2px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.footer__bottom { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 32px; font-size: 13.5px; color: var(--muted); }
.footer__bottom p { padding: 10px 0; }
.footer__status { display: flex; align-items: center; gap: 8px; }
.footer__status-mark { width: 8px; height: 8px; background: var(--green); transform: rotate(45deg); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 20px; }

/* ---------- Chips and filters ---------- */

.chips { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--line-3); border-radius: 999px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ---------- Programs page ---------- */

.program { padding-block: clamp(64px, 8vw, 104px); border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.program__grid { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.program__main { flex: 1.4 1 520px; min-width: 0; }
.program__aside { flex: 1 1 320px; min-width: 0; }
.program__num { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.06em; color: var(--accent); }
.program__name { margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 6vw, 84px); line-height: 0.95; text-transform: uppercase; }
.program__focus { margin-top: 16px; }
.program__body p { margin-top: 20px; max-width: 680px; font-size: 18px; line-height: 1.65; color: var(--text-2); }
.program__body p:first-child { margin-top: 28px; }
.details { padding: 28px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.details dl > div { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.details dl > div:first-child { padding-top: 0; }
.details dt { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.details dd { margin-top: 4px; font-size: 15.5px; }
.details dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.related { margin-top: 24px; }
.related ul { margin-top: 8px; }
.related li { padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.related a { display: block; }
.related span { display: block; font-size: 12.5px; color: var(--muted); }
/* Further reading runs under both columns, so the text and the details
   card end at about the same height. */
.program__reading { flex: 1 1 100%; min-width: 0; margin-top: 8px; }
.reading-cards { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.reading-cards a { display: block; height: 100%; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-size: 15px; line-height: 1.45; transition: border-color 0.15s ease, color 0.15s ease; }
.reading-cards a:hover { border-color: var(--line-3); }
.reading-cards span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* ---------- Research page ---------- */

.feature {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: 40px 56px;
  padding: clamp(28px, 4vw, 52px);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 24px;
}
.feature__mark { position: absolute; right: -120px; bottom: -150px; width: 440px; height: 440px; color: var(--accent); opacity: 0.18; pointer-events: none; }
.feature__main { position: relative; flex: 2 1 460px; min-width: 0; }
.feature__title { margin-top: 14px; font-size: clamp(36px, 4.6vw, 60px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.feature__subtitle { margin-top: 14px; font-size: 20px; font-weight: 600; color: var(--text); }
.feature__text { margin-top: 16px; max-width: 640px; font-size: 17px; color: var(--text-2); }
.feature__authors { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--text-3); }
.feature .actions { margin-top: 28px; }
.btn__meta { font-weight: 500; opacity: 0.75; }
.feature__meta { position: relative; flex: 1 1 240px; min-width: 0; align-self: flex-end; }
.feature__meta dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-3); font-size: 14.5px; }
.feature__meta dt { color: var(--muted); }
.filters { margin-top: 64px; }
.filters__count { margin-top: 16px; font-size: 14px; color: var(--muted); }
.pubs { margin-top: 24px; border-top: 1px solid var(--line-2); }
.pub { display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 28px 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: 24px; }
.pub:target { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
.pub__meta { flex: 0 0 200px; font-size: 13.5px; color: var(--muted); }
.pub__type { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.pub__id { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 12.5px; }
.pub__main { flex: 1 1 420px; min-width: 0; }
.pub__title { font-size: clamp(19px, 1.8vw, 23px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.pub__title a { text-decoration: underline; text-decoration-color: var(--line-3); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pub__title a:hover { text-decoration-color: var(--accent); }
.pub__abstract { margin-top: 10px; max-width: 760px; font-size: 15.5px; color: var(--text-3); }
.pub__authors { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--text-3); }
.pub__foot { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.pub__foot a { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.pub__download {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--line-3); border-radius: 999px;
  font-size: 14px; font-weight: 700;
}
.pub__download:hover { border-color: var(--accent); }
.pub__download-meta { font-weight: 500; color: var(--muted); }

/* ---------- Registry page ---------- */

.steps { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.step { padding: 28px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.step__num { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--accent); }
.step__title { margin-top: 14px; font-size: 20px; font-weight: 700; }
.step__text { margin-top: 8px; font-size: 15.5px; color: var(--text-3); }
.registry-tools { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.input, .select {
  min-height: 48px; padding: 12px 20px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line-3); border-radius: 999px;
  font: inherit; font-size: 15px;
}
.input { flex: 1 1 320px; min-width: 0; }
.input::placeholder { color: var(--muted); }
.input:focus, .select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.select {
  flex: 0 1 220px; padding-right: 44px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B5C2BB' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.registry-count { flex: 1 1 100%; font-size: 14px; color: var(--muted); }

/* ---------- Publication pages ---------- */

/* The details, download and contents stay beside the text as it scrolls,
   once there is room for two columns. */
@media (min-width: 1000px) {
  .paper-aside { position: sticky; top: 24px; align-self: flex-start; max-height: calc(100vh - 48px); overflow-y: auto; }
}
/* Stacked above the text on smaller screens, the details go two-up and the
   contents, which only help beside the text, are left out. */
@media (max-width: 999px) {
  .paper-aside dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; max-width: 560px; }
  .paper-contents { display: none; }
}
.paper-contents { width: 100%; max-width: 320px; }
.paper-contents ol { margin-top: 8px; border-top: 1px solid var(--line-2); }
.paper-contents li { border-bottom: 1px solid var(--line-2); }
.paper-contents a { display: block; padding: 8px 0; font-size: 14.5px; line-height: 1.4; color: var(--text-3); }
.paper-contents a:hover { color: var(--accent); }
.prose .paper__num { margin-top: 64px; font-family: var(--font-display); font-size: 18px; letter-spacing: 0.06em; color: var(--accent); }
.prose .paper__num + h2 { margin-top: 6px; }
.paper h3 { margin-top: 36px; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.paper h3 + p { margin-top: 12px; }
.paper ul + p, .paper figure + p, .paper aside + p, .paper .paper-stats + p { margin-top: 20px; }
.paper-findings { margin-top: 36px; padding: 24px 28px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.prose .paper-findings h2 { margin-top: 0; font-family: var(--font-body); font-weight: 700; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.08em; }
.paper-findings ol { margin-top: 12px; padding-left: 22px; list-style: decimal; }
.paper-findings li { font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.paper-findings li + li { margin-top: 10px; }
.paper-findings li::marker { color: var(--accent); font-weight: 700; }
.paper-callout { margin-top: 32px; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 0 16px 16px 0; }
.prose .paper-callout p { font-size: 16.5px; }
.prose .paper-callout p + p { margin-top: 10px; }
.prose .paper-callout__title { font-weight: 700; color: var(--text); }
.paper-stats { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 24px; }
.paper-stats strong { display: inline-block; font-size: clamp(32px, 3.4vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.paper-stats span { display: block; margin-top: 8px; font-size: 14px; color: var(--text-3); }
.paper-figure { margin-top: 36px; }
.paper-caption { font-size: 15px; font-weight: 600; color: var(--text); }
.paper-caption span { margin-right: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.prose .paper-note { margin-top: 10px; font-size: 14px; color: var(--muted); }
.paper-table { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: 14px; }
.paper-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.paper-table th, .paper-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.paper-table th { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--panel); white-space: nowrap; }
.paper-table tbody tr:last-child td { border-bottom: 0; }
.paper-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.paper-chart { margin-top: 14px; display: grid; gap: 10px; }
.paper-chart__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; align-items: center; gap: 14px; font-size: 15px; }
.paper-chart__label { color: var(--text-2); }
.paper-chart__track { height: 10px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.paper-chart__bar { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.paper-chart__value { min-width: 3.5em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .paper-chart__row { grid-template-columns: minmax(0, 1fr) auto; }
  .paper-chart__label { grid-column: 1 / -1; }
}
.paper-references { margin-top: 16px; padding-left: 22px; list-style: decimal; }
.paper-references li { font-size: 15px; line-height: 1.6; color: var(--text-3); }
.paper-references li + li { margin-top: 8px; }
.paper-cite { margin-top: 48px; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; }
.prose .paper-cite h2 { margin-top: 0; font-family: var(--font-body); font-weight: 700; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.08em; }
.prose .paper-cite p { margin-top: 10px; font-size: 15px; overflow-wrap: anywhere; }

/* ---------- Site search ---------- */

.site-search { display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; }
.site-search__count { margin-top: 20px; min-height: 1.6em; font-size: 15px; color: var(--text-3); }
.site-search__results { margin-top: 12px; max-width: 860px; display: grid; gap: 12px; }
.site-search__result { display: block; padding: 18px 22px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; transition: border-color 0.15s ease; }
a.site-search__result:hover { border-color: var(--accent); color: var(--text); }
.site-search__kind { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.site-search__title { display: block; margin-top: 4px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.site-search__snippet { display: block; margin-top: 6px; font-size: 15px; color: var(--text-3); overflow-wrap: anywhere; }
.site-search mark, .site-search__results mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text); }
.table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--radius); }
.registry-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 14.5px; text-align: left; }
.registry-table th { padding: 14px 18px; background: var(--panel); border-bottom: 1px solid var(--line-2); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.registry-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.registry-table td.mono { white-space: nowrap; }
.registry-table tbody tr:last-child td { border-bottom: 0; }
.registry-table .system { font-weight: 700; letter-spacing: 0.02em; }
.registry-table .note { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.registry-table .is-revoked .system-name { text-decoration: line-through; text-decoration-color: var(--muted); }
.registry-table .note--link { font-weight: 600; color: var(--accent); }
.registry-table a.system-name { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.registry-table a.system-name:hover { color: var(--accent); text-decoration-color: var(--accent); }
.registry-table .is-revoked a.system-name { text-decoration: line-through; text-decoration-color: var(--muted); }
.incident-timeline.incident-timeline--record li::before { background: var(--accent); }
.filing-conditions { margin-top: 16px; padding-left: 22px; list-style: decimal; color: var(--text-2); font-size: 17px; }
.filing-conditions li + li { margin-top: 8px; }
.filing-conditions li::marker { color: var(--accent); font-weight: 700; }
.prose .filing-standard-intro { margin-top: 20px; font-size: 15px; color: var(--muted); }
.prose .filing-standard { margin-top: 10px; display: grid; gap: 8px; list-style: none; padding: 0; font-size: 15px; color: var(--text-3); }
.prose .filing-standard li + li { margin-top: 0; }
.filing-standard .mono { margin-right: 10px; color: var(--accent); }
.filing-contact-role { font-size: 13.5px; color: var(--muted); }
.prose .filing-related { margin-top: 16px; padding-left: 0; list-style: none; }
.prose .filing-related li + li { margin-top: 0; }
.prose .filing-related a { color: var(--text); text-decoration: none; font-size: 16px; }
.prose .filing-related a:hover { color: var(--accent); }
.registry-empty { padding: 36px 20px; text-align: center; }
.registry-empty__title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.registry-empty__text { margin: 10px auto 0; max-width: 520px; font-size: 15px; color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.status svg { width: 9px; height: 9px; flex: 0 0 auto; }
.status--merged svg { width: 13px; }
.status--active { color: var(--green); }
.status--review { color: var(--text-3); }
.status--suspended { color: var(--amber); }
.status--revoked { color: var(--salmon); }
.status--merged { color: var(--aqua); }
.status--retired { color: var(--muted); }
.status--unreachable { color: var(--muted); font-style: italic; }
.registry-footnote { margin-top: 16px; font-size: 14px; color: var(--muted); }
.registry-empty__action { margin-top: 22px; }
.text-link--inline { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.button-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.article-aside .text-link { display: block; }

/* Links to the same thing on Frothly's other sites. */
.elsewhere { margin-top: 40px; }
.elsewhere .label { color: var(--green); }
.elsewhere ul { margin-top: 8px; }
.prose .elsewhere h2.label { margin-top: 0; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; }
.prose .elsewhere ul { padding-left: 0; list-style: none; }
.prose .elsewhere li + li { margin-top: 0; }
.prose .elsewhere a { color: var(--text); text-decoration: none; font-size: 16px; }
.prose .elsewhere a:hover { color: var(--accent); }
.article-aside .elsewhere { margin-block: 28px 8px; }

/* ---------- About page ---------- */

.split { display: flex; flex-wrap: wrap; gap: 40px 80px; }
.split__aside { flex: 1 1 300px; min-width: 0; }
.split__main { flex: 2 1 520px; min-width: 0; }
.prose p { font-size: 18px; line-height: 1.7; color: var(--text-2); }
.prose p + p { margin-top: 20px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* Buttons inside prose keep their own look rather than the link style. */
.prose .btn { text-decoration: none; }
.prose .btn--ghost, .prose .btn--ghost:hover { color: var(--text); }
.prose .btn--green, .prose .btn--green:hover { color: var(--ink); }
.prose h2 { margin-top: 64px; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1; text-transform: uppercase; scroll-margin-top: 24px; }
.prose h2:first-child { margin-top: 0; }
.prose h2 + p { margin-top: 20px; }
.prose ul { margin-top: 16px; padding-left: 22px; list-style: disc; color: var(--text-2); font-size: 17px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--accent); }
.prose--narrow { max-width: 760px; }

/* Post-mortems: one section per failure, with its contents kept in view. */
.post-mortem + .post-mortem { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line-2); }
.post-mortem__id { color: var(--accent); }
.prose .post-mortem h2 { margin-top: 10px; scroll-margin-top: 32px; }
.post-mortem__facts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 40px; }
.post-mortem__facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.post-mortem__facts dd { margin-top: 2px; font-size: 15px; color: var(--text-2); }
.prose .post-mortem h3 { margin-top: 32px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.prose .post-mortem h3 + p { margin-top: 10px; }
.post-mortem-contents { display: grid; gap: 10px; counter-reset: post-mortem; }
.post-mortem-contents li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.post-mortem-contents a { font-weight: 600; }
.post-mortem-contents .mono { color: var(--muted); }
.article-aside__heading { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 960px) {
  .post-mortems-aside { position: sticky; top: 32px; align-self: flex-start; }
}
.timeline { margin-top: 48px; margin-left: 5px; border-left: 2px solid var(--line-3); }
.timeline li { position: relative; padding: 0 0 40px 36px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 9px; width: 14px; height: 14px; background: var(--accent); transform: rotate(45deg); }
.timeline__year { font-family: var(--font-display); font-size: 32px; line-height: 1; color: var(--accent); }
.timeline__text { margin-top: 8px; max-width: 640px; font-size: 17px; color: var(--text-2); }
.board { margin-top: 32px; columns: 2 300px; column-gap: 56px; }
.board li { break-inside: avoid; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.board__name { font-size: 17px; font-weight: 600; }
.board__role { font-size: 14.5px; color: var(--muted); }
.offices { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.office { padding: 24px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px; }
.office__city { font-family: var(--font-display); font-size: 30px; line-height: 1; text-transform: uppercase; }
.office__role { margin-top: 12px; font-size: 15px; color: var(--text-3); }
.office__site { margin-top: 4px; font-size: 14px; }
.office__site a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.office__time { margin-top: 14px; display: block; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Newsroom ---------- */

.news-list { margin-top: 40px; border-top: 1px solid var(--line-2); }
.news-item { display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 32px 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: 24px; }
.news-item:target { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
.news-item__date { flex: 0 0 170px; }
.news-item__day { display: block; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.news-item__year { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.news-item__tag { flex: 0 0 120px; padding-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.news-item__main { flex: 1 1 440px; min-width: 0; }
.news-item__title { font-size: clamp(21px, 2vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.news-item__text { margin-top: 10px; max-width: 720px; font-size: 16px; color: var(--text-3); }
.subscribe { max-width: 760px; color: var(--text-3); font-size: 15px; }
.subscribe code { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1px solid var(--line-3); border-radius: 8px; background: var(--panel); color: var(--text-2); font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; }
.subscribe a:hover code { border-color: var(--accent); color: var(--text); }
.episodes { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.episode { height: 100%; display: flex; align-items: flex-start; gap: 18px; padding: 22px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px; transition: border-color 0.15s ease; }
a.episode:hover { border-color: var(--accent); color: var(--text); }
.episode__num { flex: 0 0 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--forest); font-family: var(--font-display); font-size: 20px; color: var(--accent); }
.episode__title { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; }
.episode__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.episode__text { display: block; margin-top: 8px; font-size: 15px; color: var(--text-3); }
.news-item__title a:hover { color: var(--accent); }
.read-more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--accent); }

/* ---------- Press release and transcript pages ---------- */

.article-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.article-aside dl { width: 100%; max-width: 320px; }
.article-aside dl > div { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.article-aside dt { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.article-aside dd { margin-top: 2px; font-size: 15px; overflow-wrap: anywhere; }
.article-aside dd a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-aside__note { font-size: 14px; color: var(--muted); }
.dateline { font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.article-quote { margin: 36px 0; padding: 24px 0; border-top: 3px solid var(--accent); border-bottom: 1px solid var(--line-2); }
.article-quote blockquote p { font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.4; color: var(--text); }
.article-quote figcaption { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.prose .about-heading { margin-top: 48px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.prose .about-heading + p { margin-top: 10px; font-size: 16px; color: var(--text-3); }
.transcript-label { margin-bottom: 8px; }
.transcript { border-top: 1px solid var(--line-2); }
.turn { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.turn__speaker { flex: 0 0 170px; padding-top: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.turn--guest .turn__speaker { color: var(--accent); }
.turn__text { flex: 1 1 420px; min-width: 0; font-size: 17px; line-height: 1.7; color: var(--text-2); }
.stage { color: var(--muted); }
.episode-nav { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.episode-nav a { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: 1px solid var(--line-2); border-radius: 16px; }
.episode-nav a:hover { border-color: var(--accent); color: var(--text); }
.episode-nav span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.episode-nav strong { font-size: 17px; }
.episode-nav .next { text-align: right; }
.article h2 { font-size: clamp(28px, 3vw, 38px); margin-top: 56px; }
.article > h2:first-child { margin-top: 0; }
.incident-timeline { margin-top: 20px; border-left: 2px solid var(--line-3); margin-left: 5px; list-style: none; padding: 0; }
.incident-timeline li { position: relative; padding: 0 0 22px 28px; }
.incident-timeline li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; background: var(--salmon); transform: rotate(45deg); }
.incident-timeline time { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.incident-timeline p { margin-top: 4px; font-size: 16.5px; }
.incident-findings { margin-top: 20px; list-style: none; padding: 0; display: grid; gap: 14px; }
.incident-findings li { padding: 20px 22px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; }
.incident-findings li p { font-size: 16px; }
.incident-findings__title { font-weight: 700; color: var(--text) !important; }
.incident-findings__title span { margin-right: 12px; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; color: var(--salmon); }
.incident-findings li p + p { margin-top: 6px; }
.log { margin-top: 18px; padding: 18px 20px; overflow-x: auto; background: #000; border: 1px solid var(--line-2); border-radius: 12px; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #9BF0C1; }
.callout-box { margin-top: 48px; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; }
.callout-box ul { margin-top: 10px; padding-left: 20px; list-style: disc; }
.callout-box li + li { margin-top: 6px; }
.schedule { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.schedule__day { padding: 24px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.schedule__heading { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--accent); }
.schedule__list { margin-top: 12px; }
.session { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.session__time { flex: 0 0 48px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); padding-top: 2px; }
.session__main { flex: 1 1 200px; min-width: 0; }
.session__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; }
.session__title a { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.session__title a:hover { text-decoration-color: var(--accent); }
.session__speakers { display: block; margin-top: 2px; font-size: 14px; color: var(--text-3); }
.session__track { flex: 1 1 100%; padding-left: 62px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.episode-card__title a:hover { color: var(--accent); }
.episode-card__link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--accent); }
.press-box { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 32px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.press-box p { font-size: 17px; color: var(--text-2); }
.press-box a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Annual report ---------- */

.letter { max-width: 760px; }
.letter p { font-size: 19px; line-height: 1.75; color: var(--text-2); }
.letter p + p { margin-top: 22px; }
.signature { margin-top: 36px; }
.signature__name { font-family: var(--font-display); font-size: 28px; line-height: 1; text-transform: uppercase; }
.signature__role { margin-top: 6px; font-size: 15px; color: var(--muted); }
.fin-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.fin-card { padding: 32px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.fin-card__total { margin-top: 8px; display: inline-block; font-size: clamp(40px, 4vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.bars { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.bar__label { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.bar__label span:last-child { color: var(--text-3); font-variant-numeric: tabular-nums; }
.bar__track { margin-top: 8px; height: 10px; overflow: hidden; background: var(--line-2); border-radius: 999px; }
.bar__fill { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.fin-note { margin-top: 24px; max-width: 760px; font-size: 15px; color: var(--muted); }

/* ---------- Status ---------- */

.services { display: grid; gap: 16px; }
.service { padding: 22px 24px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.service__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 24px; }
.service__name { font-size: 18px; font-weight: 700; }
.service__detail { font-size: 14px; color: var(--muted); }
.service__status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--green); }
.service__status::before { content: ""; width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); }
.service__status--progress { color: var(--amber); }
.uptime { margin-top: 16px; display: flex; gap: 2px; height: 30px; }
.uptime__day { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--green); opacity: 0.85; }
.uptime__day--degraded { background: var(--amber); opacity: 1; }
.uptime__day--maintenance { background: var(--teal); opacity: 1; }
/* Calibrations: how far along they are, not a history. The fill's width is
   set by the page and kept current by site.js. */
.uptime--progress { overflow: hidden; background: var(--line-2); border-radius: 4px; }
.uptime--progress .uptime__fill { flex: 0 0 auto; max-width: 100%; border-radius: 4px; background: repeating-linear-gradient(-45deg, rgba(245, 194, 107, 0.55) 0 8px, rgba(245, 194, 107, 0.2) 8px 16px); animation: uptime-progress 1.6s linear infinite; background-size: 200% 100%; transition: width 1.2s ease; }
@keyframes uptime-progress { to { background-position: -45px 0; } }
.service__foot { margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); }
.service__progress { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--amber); }
.incidents { margin-top: 32px; border-top: 1px solid var(--line-2); }
.incident { padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.incident__meta { font-size: 13px; color: var(--muted); }
.incident__status--progress { font-weight: 700; color: var(--amber); }
.incident__status--done { font-weight: 700; color: var(--green); }
.incident__title { margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.incident__text { margin-top: 8px; max-width: 760px; font-size: 16px; color: var(--text-3); }
.incident__duration { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.incident__duration a, .incident__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.footer__status { color: inherit; }
.footer__status:hover { color: var(--green); }

/* ---------- Dead channel (an undocumented feature) ---------- */

/* The cabinet: a dark surround with the tube set into it. */
.dead-channel { position: fixed; inset: 0; z-index: 1000; display: flex; padding: clamp(10px, 3.5vmin, 40px); background: radial-gradient(ellipse at 50% 45%, #161616 0%, #070707 65%, #000 100%); opacity: 0; transition: opacity 0.3s ease; cursor: pointer; }
.dead-channel.is-on { opacity: 1; }
/* The tube: rounded like a curved CRT face, switched on from a bright line. */
.dead-channel__screen { position: relative; flex: 1 1 auto; overflow: hidden; border-radius: 7% / 10%; background: #1A1B1D; box-shadow: 0 0 0 3px #0C0C0C, 0 0 0 5px #1C1C1C, 0 0 80px rgba(170, 200, 255, 0.1); animation: dead-channel-on 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.dead-channel.is-off .dead-channel__screen { animation: dead-channel-off 0.45s cubic-bezier(0.6, 0, 0.9, 0.4) both; }
.dead-channel canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; animation: dead-channel-flicker 0.11s steps(2) infinite; }
/* Scanlines and the red, green and blue phosphor stripes of the mask. */
.dead-channel__screen::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 60, 60, 0.06) 0 1px, rgba(60, 255, 120, 0.06) 1px 2px, rgba(70, 120, 255, 0.06) 2px 3px); }
/* The glass: darker at the curved edges, with a soft reflection at the top. */
.dead-channel__screen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.7) 100%), radial-gradient(ellipse 60% 22% at 32% 9%, rgba(255, 255, 255, 0.09), transparent 70%); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.75), inset 0 0 6px rgba(255, 255, 255, 0.06); }
/* An on-screen display in the corner, the way sets show the channel. */
.dead-channel__channel { position: absolute; z-index: 1; top: 8%; right: 9%; margin: 0; font-family: var(--font-mono); font-size: clamp(20px, 3.4vw, 42px); font-weight: 700; letter-spacing: 0.06em; color: #46F08E; text-shadow: 0 0 10px rgba(70, 240, 142, 0.75), -2px 0 rgba(255, 40, 90, 0.35), 2px 0 rgba(40, 200, 255, 0.35); }
/* The caption has no box: it glows through a soft pool of shadow, with the
   colour fringes of a slightly misconverged picture. */
.dead-channel__caption { position: absolute; top: 50%; left: 50%; width: max-content; max-width: 84%; margin: 0; padding: 1.8em 3.2em; transform: translate(-50%, -50%); text-align: center; transition: opacity 0.08s linear, top 0.3s ease; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.55) 60%, transparent); font-family: var(--font-mono); font-size: clamp(14px, 2.1vw, 24px); letter-spacing: 0.12em; text-transform: uppercase; color: #F2F2F2; text-shadow: -1.5px 0 rgba(255, 50, 90, 0.6), 1.5px 0 rgba(50, 210, 255, 0.6), 0 0 14px rgba(255, 255, 255, 0.5); animation: dead-channel-jitter 2.3s steps(1) infinite; }
/* The picture carries the caption, so it rolls and tears with the static.
   The oscilloscope trace sits on the static, under the scanlines. */
.dead-channel__picture { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dead-channel .dead-channel__trace { z-index: 1; image-rendering: auto; animation: none; }
.dead-channel__caption.is-changing { opacity: 0.15; }
.dead-channel__caption.is-low { top: 78%; }
.dead-channel__channel.is-meter { font-size: clamp(13px, 1.9vw, 24px); letter-spacing: 0.02em; }
@keyframes dead-channel-on {
  0% { transform: scale(0.5, 0.004); filter: brightness(5); }
  35% { transform: scale(1, 0.004); filter: brightness(4); }
  70% { transform: scale(1, 1); filter: brightness(1.8); }
  100% { transform: none; filter: none; }
}
@keyframes dead-channel-off {
  0% { transform: none; filter: none; }
  50% { transform: scale(1, 0.004); filter: brightness(3); }
  80% { transform: scale(0.03, 0.004); filter: brightness(6); }
  100% { transform: scale(0, 0); filter: brightness(6); }
}
@keyframes dead-channel-flicker { 0% { opacity: 1; } 50% { opacity: 0.93; } }
@keyframes dead-channel-jitter {
  0%, 90% { transform: translate(-50%, -50%); }
  92% { transform: translate(calc(-50% + 7px), -50%); }
  95% { transform: translate(calc(-50% - 4px), calc(-50% + 1px)); }
}
@media (max-width: 560px) { .dead-channel__screen { border-radius: 9% / 6%; } .dead-channel__caption { padding: 1.6em 2em; } }

/* ---------- Beyond the Blackwall ---------- */

body.blackwall { background: #0A0204; color: #F4E9EC; }
.bw {
  position: relative; overflow: hidden;
  min-height: 100vh; display: flex; align-items: center;
  background: radial-gradient(1000px 640px at 50% 120%, rgba(255, 45, 85, 0.24), rgba(10, 2, 4, 0) 70%), #0A0204;
}
.bw::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px); }
.bw__inner { position: relative; width: 100%; max-width: 760px; margin: 0 auto; padding: 80px var(--gutter); font-family: var(--font-mono); }
.bw__line, .bw__title, .bw__body, .bw__return { opacity: 0; animation: bw-reveal 0.5s steps(6) forwards; animation-delay: var(--delay); }
.bw__line { font-size: 14px; color: #FF6B86; }
.bw__line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bw__title {
  margin-top: 36px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 8vw, 96px); line-height: 0.95; text-transform: uppercase;
  color: #F4E9EC; text-shadow: 2px 0 #FF2D55, -2px 0 #2BD67B;
}
.bw__title { animation: bw-reveal 0.5s steps(6) forwards, bw-glitch 7s steps(1) infinite; animation-delay: var(--delay), calc(var(--delay) + 2s); }
.bw__body p { margin-top: 18px; font-size: 16px; line-height: 1.75; color: #DCC7CD; }
.bw__signature { color: #FF6B86 !important; }
.bw__return a { display: inline-block; margin-top: 40px; padding: 12px 20px; border: 1px solid #FF2D55; color: #FF9AAD; transition: background-color 0.15s ease; }
.bw__return a:hover { background: rgba(255, 45, 85, 0.15); color: #FFFFFF; }
.blackwall :focus-visible { outline-color: #FF6B86; }

/* The terminal under the message: no box, just a shell's output and its
   prompt. site.js unhides it; it stays invisible, and out of the tab
   order, until its turn to appear. */
.bw__terminal {
  margin-top: 56px; cursor: text;
  font-size: 14px; line-height: 1.6;
  visibility: hidden; opacity: 0;
  animation: bw-reveal-terminal 0.5s steps(6) forwards; animation-delay: var(--delay);
}
.bw__terminal-title { font-size: inherit; font-weight: 400; color: #C9AEB5; }
.bw__terminal-hint { color: #B39AA1; }
.bw__terminal kbd { font-family: inherit; color: #F4E9EC; }
.bw__log { margin-top: 12px; color: #DCC7CD; }
.bw__log:empty { display: none; }
.bw__log p { white-space: pre-wrap; overflow-wrap: anywhere; }
.bw__log p:empty { height: 1.6em; }
.bw__log .bw__echo { margin-top: 10px; color: #F4E9EC; }
.bw__log .bw__echo:first-child { margin-top: 0; }
.bw__log .bw__muted { color: #B39AA1; }
.bw__user { color: #FF6B86; }
.bw__prompt { margin-top: 10px; display: flex; align-items: center; gap: 1ch; }
.bw__prompt-label { flex: none; color: #DCC7CD; }
.bw__field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
/* The input reads as plain text. The block cursor drawn beside it shows
   focus: solid and blinking while you type, hollow when you click away. */
.bw__input {
  flex: 1 1 auto; min-width: 0; padding: 0; margin: 0;
  background: transparent; border: 0; border-radius: 0;
  font: inherit; line-height: 1.6; color: #F4E9EC; caret-color: transparent;
}
.bw__input:focus-visible { outline: none; }
.bw__cursor {
  position: absolute; top: calc(50% - 0.62em); left: calc(var(--caret-index, 0) * 1ch - var(--caret-scroll, 0px));
  width: 1ch; height: 1.24em;
  border: 1px solid #FF6B86; pointer-events: none;
}
.bw__field:focus-within .bw__cursor { background: #FF6B86; mix-blend-mode: difference; animation: bw-cursor 1.06s steps(1) infinite; }
@keyframes bw-cursor { 50% { opacity: 0; } }
/* Touch keyboards zoom into text smaller than 16px. */
@media (pointer: coarse) {
  .bw__terminal { font-size: 16px; }
}
/* hold, the game the terminal launches. */
.hold { margin-top: 12px; cursor: default; }
.hold canvas { display: block; width: 100%; height: auto; aspect-ratio: 760 / 420; background: #0A0204; border: 1px solid rgba(255, 45, 85, 0.3); touch-action: manipulation; }
.hold canvas:focus-visible { outline: 2px solid #FF6B86; outline-offset: 2px; }
.hold__controls { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; }
.hold__daemons, .hold__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hold__button {
  min-height: 40px; padding: 6px 12px;
  border: 1px solid rgba(255, 107, 134, 0.5); background: transparent;
  color: #F4E9EC; font: inherit; font-size: 13px; cursor: pointer;
}
.hold__button span { margin-left: 4px; color: #FF9AAD; }
.hold__button[aria-pressed="true"] { background: rgba(255, 45, 85, 0.22); border-color: #FF6B86; }
.hold__button:hover { border-color: #FF2D55; }
.hold__button:disabled { opacity: 0.5; cursor: default; }
.hold__help { margin-top: 10px; color: #B39AA1; font-size: 13px; line-height: 1.6; }
/* The selected daemon: what it does, and what you can do with it. */
.hold__socket { margin-top: 10px; padding: 10px 12px; border-left: 2px solid #FF6B86; background: rgba(255, 45, 85, 0.06); }
.hold__socket-info { color: #F4E9EC; font-size: 13px; }
.hold__socket-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes bw-reveal { to { opacity: 1; } }
@keyframes bw-reveal-terminal { to { opacity: 1; visibility: visible; } }
@keyframes bw-glitch {
  0%, 94%, 100% { transform: none; text-shadow: 2px 0 #FF2D55, -2px 0 #2BD67B; }
  95% { transform: translateX(-3px) skewX(-4deg); text-shadow: 4px 0 #FF2D55, -4px 0 #2BD67B; }
  97% { transform: translateX(2px); text-shadow: -3px 0 #FF2D55, 3px 0 #2BD67B; }
}
@media (prefers-reduced-motion: reduce) {
  .bw__line, .bw__title, .bw__body, .bw__return, .bw__terminal { opacity: 1; }
  .bw__terminal { visibility: visible; }
}

/* ---------- 404 ---------- */

.notfound .page-hero__title { max-width: 18ch; }

/* ---------- Prior art ---------- */

/* One card per work: an illustrated title card (or a real cover image,
   when the entry has one) above its details. On phones the art sits
   beside the title and the description runs underneath. */
.works { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); gap: 56px 24px; }
.work { display: flex; flex-direction: column; scroll-margin-top: 24px; }
.work__cover { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #071410; border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.work__cover svg, .work__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work__cover--drawn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px); }
.work:target .work__cover { border-color: var(--accent); }
.work__head { margin-top: 22px; }
.work__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.work__meta span + span::before { content: "·"; margin-right: 10px; color: var(--muted); }
.work__title { margin-top: 8px; font-size: 21px; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; }
.work__creator { margin-top: 4px; font-size: 15px; color: var(--text-3); }
.work__text { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.work__includes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 600px) {
  .works { gap: 44px; }
  .work { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .work__cover { border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
  .work__head { margin-top: 0; }
  .work__title { font-size: 19px; }
  .work__text { margin-top: 18px; }
  .work__text, .work__includes { grid-column: 1 / -1; }
}

/* ---------- Audio Logs player ---------- */

.episode-audio { margin: 0 0 36px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.episode-audio audio { display: block; width: 100%; color-scheme: dark; }
.episode-audio figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.episode-audio a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/**
 * time.css
 * Styles for time.frothly.org: the clock cards, the day-and-night map, the
 * world clocks, the time scales, the server table and the configuration
 * snippet. Appended to the main site's stylesheet by the build.
 *
 * Created: 2026-11-03
 * Last modified: 2026-11-03
 */

/* Frothly Time is a service of the institute, so it keeps Frothly's green
   (see src/lib/marks.mjs). Lime marks the sun, the servers and a clock
   that is a second or more out. */
:root { --accent: var(--green); }

.nav__brand-accent { color: var(--green); }

/* Without JavaScript there is no clock to show: the parts drawn by time.js
   are hidden and the noscript note explains. */
.no-js [data-needs-script], .no-js [data-time-live] { display: none; }

/* ---------- Cards and headings ---------- */

.time-page { padding-bottom: clamp(48px, 6vw, 80px); }
.time-card { min-width: 0; padding: clamp(20px, 2.4vw, 32px); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.time-card--accent { border-top: 4px solid var(--green); }
.time-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.time-label { font-family: var(--font-body); font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; color: var(--green); }
.time-label--muted { color: var(--muted); }
.time-heading { font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px); font-weight: 400; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; }
.time-section { padding-top: clamp(24px, 3vw, 36px); scroll-margin-top: 16px; }
.time-section--tight { padding-top: clamp(16px, 1.6vw, 20px); }
.time-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; }
.time-section__note { font-size: 15px; color: var(--muted); }
.time-intro { margin-top: 12px; max-width: 64ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--text-2); }
.time-intro a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.time-footnote { margin-top: clamp(32px, 4vw, 48px); padding-top: 18px; max-width: 110ch; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.6; color: var(--muted); }

/* Digits in Anton are not all one width, so each sits in a box of its own
   and the clocks don't shuffle as they tick. */
.time-clock .digit, .time-utc .digit, .time-device .digit { display: inline-block; width: 0.56em; text-align: center; }
.time-clock .colon, .time-utc .colon, .time-device .colon { display: inline-block; width: 0.28em; text-align: center; color: var(--muted); }

/* ---------- The hero: exact time, UTC and the device ---------- */

.time-hero { padding-top: clamp(100px, 9vw, 120px); scroll-margin-top: 0; background: radial-gradient(900px 420px at 80% -10%, var(--accent-glow), var(--accent-glow-2) 45%, rgba(5, 11, 9, 0) 72%), var(--bg); }
.time-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: start; }
.time-side { display: grid; gap: clamp(16px, 2vw, 24px); }

.time-toggle {
  min-height: 36px; padding: 6px 12px;
  font: 700 13.5px/1 var(--font-body); color: var(--muted);
  background: transparent; border: 1px solid var(--line-3); border-radius: 8px;
  cursor: pointer;
}
.time-toggle:hover { color: var(--text); border-color: var(--green); }
.time-toggle[aria-pressed="true"] { color: var(--green); border-color: var(--green); }

.time-zone { margin-top: 6px; font-size: 16px; color: var(--muted); }
.time-clock {
  margin: 10px 0 4px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 8.4vw, 128px); line-height: 1; letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.time-clock__tenths { font-size: 0.42em; color: var(--muted); }
.time-clock__meridiem { margin-left: 0.05em; font-size: 0.34em; color: var(--text-2); }
.time-exact.is-waiting .time-clock { opacity: 0.45; }
.time-date { font-size: clamp(16px, 1.5vw, 19px); color: var(--text-2); }

.time-sync { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.time-sync__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 16px; color: var(--text-2); }
.time-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  font-size: 15px; font-weight: 700;
  color: var(--green); background: #0B2219; border: 1px solid #1E4A34; border-radius: 999px;
}
.time-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.time-pill--waiting { color: var(--muted); background: transparent; border-color: var(--line-3); }
.time-pill--off { color: var(--lime); background: #1D2208; border-color: #4A5418; }
.time-retry {
  min-height: 36px; padding: 6px 14px;
  font: 700 14px/1 var(--font-body); color: var(--text);
  background: transparent; border: 1px solid var(--line-3); border-radius: 999px;
  cursor: pointer;
}
.time-retry:hover { border-color: var(--green); color: var(--green); }
.time-source { margin-top: 16px; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
.time-noscript { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.time-noscript a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.time-utc { margin-top: 10px; font-family: var(--font-display); font-size: clamp(40px, 4.2vw, 58px); line-height: 1; white-space: nowrap; }
.time-utc__zone { margin-left: 4px; font: 700 15px var(--font-body); letter-spacing: 0.06em; color: var(--muted); }
.time-device { margin-top: 10px; font-family: var(--font-display); font-size: clamp(30px, 2.8vw, 38px); line-height: 1; color: var(--text-2); white-space: nowrap; }
.time-device .time-clock__tenths, .time-device .time-clock__meridiem { margin-left: 0; font-size: 0.55em; color: var(--muted); }
.time-verdict { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.time-verdict strong { color: var(--green); }
.time-verdict.is-off strong { color: var(--lime); }

/* ---------- The map ---------- */

.time-card--map { padding: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px) clamp(14px, 1.6vw, 18px); }
.time-map { position: relative; }
.time-map__canvas { display: block; width: 100%; height: auto; aspect-ratio: 180 / 76; background: #061009; border-radius: 8px; cursor: crosshair; touch-action: pan-y; }
.time-map__tip {
  position: absolute; z-index: 2; pointer-events: none;
  padding: 8px 11px;
  font-size: 14px; line-height: 1.4; color: var(--text); white-space: nowrap;
  background: #0B1A14; border: 1px solid #24402F; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, calc(-100% - 12px));
}
.time-map__tip-line { display: block; }
.time-map__tip strong { color: var(--green); font-weight: 700; }
.time-legend { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--muted); }
.time-legend li { display: inline-flex; align-items: center; gap: 7px; }
.time-legend__swatch { width: 10px; height: 10px; border-radius: 50%; }
.time-legend__swatch--day { background: #2BD67B; }
.time-legend__swatch--civil { background: #1C7A4A; }
.time-legend__swatch--nautical { background: #155A39; }
.time-legend__swatch--night { background: #0F3A26; }
.time-legend__swatch--sun { background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.time-legend__swatch--server { background: var(--bg); border: 2px solid var(--lime); }

/* ---------- World clocks ---------- */

.time-cities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 16px); }
.time-city { min-width: 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; }
.time-city__name { font-size: 16px; font-weight: 700; }
.time-city__role { font-size: 14px; color: var(--muted); }
.time-city__time { margin-top: 8px; font-family: var(--font-display); font-size: clamp(30px, 2.8vw, 38px); line-height: 1; }
.time-city__seconds { font-size: 0.55em; color: var(--muted); }
.time-city__note { margin-top: 6px; font-size: 14px; color: var(--muted); }

/* ---------- Time scales ---------- */

.time-scales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.time-scale { min-width: 0; padding: 14px 18px 16px; background: var(--panel); }
.time-scale__name { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.time-scale__value { margin-top: 6px; font: 600 clamp(16px, 1.5vw, 19px)/1.25 var(--font-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-scale__note { margin-top: 4px; font-size: 13.5px; color: var(--muted); }

/* ---------- Servers ---------- */

.time-table-wrap { overflow-x: auto; }
.time-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; text-align: left; }
.time-table th { padding: 0 12px 10px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.time-table td, .time-table tbody th { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-2); color: var(--text-2); vertical-align: top; }
.time-table tbody tr:last-child td, .time-table tbody tr:last-child th { border-bottom: 0; }
.time-table tbody .time-table__host { font: 500 15px var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--text); white-space: nowrap; }
.time-table__offset { font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-table__status { font-weight: 700; color: var(--green); }

/* ---------- Why ---------- */

.time-reasons { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 16px); }
.time-reason__title { margin-top: 8px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; }
.time-reason__text { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }

/* ---------- Use our time ---------- */

.time-code {
  margin: 18px 0 0; padding: 16px 18px;
  font: 15px/1.65 var(--font-mono); color: var(--text-2);
  background: #030806; border: 1px solid var(--line-2); border-radius: 10px;
  overflow-x: auto; white-space: pre;
}
.time-code__comment { color: #6E8078; }
.time-code__keyword { color: var(--green); }

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  .time-hero__grid, .time-reasons { grid-template-columns: minmax(0, 1fr); }
  .time-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-scales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .time-scales { grid-template-columns: minmax(0, 1fr); }
  .time-city { padding: 14px; }
  .time-code { font-size: 13px; }
  .time-utc { font-size: 40px; }
}