/* The Data Center Record · broadcast-archive theme
   Palette: neutral tape black, warm transcript white, Prophecy lime accent,
   clay (opposed), slate (support), field gray (unclear). Stance pair validated
   for dark-surface CVD/contrast; unclear always ships with labels and gaps. */

:root {
  --tape: #0b0d0c;
  --room: #151816;
  --room-up: #1d211e;
  --line: #2a2e2b;
  --ink: #f5f4ef;
  --ink-dim: #b4b8b1;
  --ink-faint: #7e827c;
  --caption: #b2d960;
  --caption-ink: #101503;
  --oppose: #ce7a52;
  --support: #5b9bd1;
  --unclear: #74806f;
  --brand: #116911;
  --display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --dock-w: 420px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--caption); color: var(--caption-ink); }

a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--caption); outline-offset: 2px; border-radius: 2px; }
/* the dock takes programmatic focus when the theater opens (it's the Esc
   target) — a modal container is not a control, so it gets no focus ring;
   the buttons inside keep theirs for keyboard users */
.dock:focus, .dock:focus-visible { outline: none; }

/* ---------- hero: the field of record ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  background: #fff;
  color: #131711;
  overflow: hidden;
}
/* the landing field lives on the same viewport-fixed stage as the story
   canvas: dots never scroll — the hero text scrolls away over them and the
   story engine morphs the field in place (analysis.js swaps visibility) */
#hero-field { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* other tabs: the fixed field would bleed through their pages */
body:has(main.daylight:not([data-tab="analysis"])) #hero-field { visibility: hidden; }
body:has(main.daylight:not([data-tab="analysis"])) .hero-hint { visibility: hidden; }
/* Explore and About own the top of the page: the landing leaves the flow on
   other tabs (absolute in its same box, hidden) so there is nothing above
   the panel to scroll up into. The box keeps its real geometry — hero-dots
   measures the title pocket and masthead carve from it — and only the fixed
   masthead brand stays visible. */
body:has(main.daylight:not([data-tab="analysis"])) .hero { position: absolute; inset: 0 0 auto 0; visibility: hidden; }
body:has(main.daylight:not([data-tab="analysis"])) .hero .hero-brand { visibility: visible; }

/* The standing invitation: raised when the first featured clip rolls,
   dismissed by the visitor's first dot click. Centered in the sky above
   the map, under the tab row; plain ink at display size, regular weight,
   with a soft white halo so the crowd underneath never muddies it. */
.hero-hint {
  position: fixed; z-index: 40;
  top: clamp(64px, 9.5vh, 104px);
  left: 50%; transform: translateX(-50%);
  color: #131711;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-weight: 400;
  font-size: clamp(19px, 1.75vw, 27px);
  letter-spacing: 0.002em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 4px #fff, 0 0 14px #fff, 0 0 26px #fff;
  opacity: 0;
  /* off-hero the slot is GONE, not just transparent: visibility flips
     after the fade so its button can never sit clickable over content */
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.53, 0.2, 0.04, 0.96), visibility 0s 0.5s;
}
.hero-hint.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s cubic-bezier(0.53, 0.2, 0.04, 0.96), visibility 0s 0s;
}
/* the hint sits calm — the blink belongs to the sound cue on the card
   (Andrew's ruling); see .hf-cue */
/* The slot's second life: once the tour is dismissed, the same line
   offers the way back in. A real button (the slot itself stays
   pointer-events none), the hint's own voice, no blink. */
.hero-continue {
  /* word first, triangle trailing (Andrew) — the glyph points the way on */
  display: inline-flex; align-items: center; gap: 5.5px;
  border: 0; background: none; padding: 4px 2px;
  font: inherit; letter-spacing: inherit; line-height: inherit;
  color: inherit; text-shadow: inherit;
  cursor: pointer; pointer-events: auto;
}
.hero-continue:hover { text-decoration: underline; text-underline-offset: 4px; }
/* flexbox centers the glyph on the LINE box; "Continue" has no descenders,
   so its ink rides higher — lift the triangle onto the cap-to-baseline
   midline (measured: 0.065em at both slot sizes, Forma DJR metrics) */
.hero-continue svg { width: 0.82em; height: 0.82em; display: block; transform: translateY(-0.065em); }
/* while a claimed dot's card is playing, the offer recedes with the
   crowd (50%, like the non-selected dots) and returns full on hover.
   .on is REQUIRED: without it this rule overrode the scroll gate and the
   offer floated over the story graphics whenever their walk had a card
   up (Andrew: continue playlist is a hero thing, not a story thing) */
body:has(.mini-card) .hero-hint.act.on { opacity: 0.5; }
body:has(.mini-card) .hero-hint.act.on:hover { opacity: 1; }
/* Continue always holds the same seat (Andrew): top-center on the masthead
   line, level with the brand and the tabs — the hero's offer and the story's
   instance alike. Masthead scale (17.5px like .tab), not invitation scale;
   the top offset centers the button's text on the brand's icon the same way
   .tabs-row's does (button padding runs 2px taller than a tab's). */
.hero-hint.act {
  /* sized up from tab scale (Andrew) — the top offset re-centers the
     taller button on the brand icon's midline */
  top: calc(clamp(18px, 3.2vh, 32px) + 2.4px);
  font-size: 21px;
}
/* two quick flashes inside the first half second of every 2s cycle, then
   rest — worn by the "Click for sound" cue (the 1.2s lead gives the
   card its entrance before the first flash). The plate never vanishes:
   the flash is the ground turning brand green (Andrew — no disappearing).
   Reduced motion flattens it via the global rule. */
@keyframes cue-flash {
  0%, 24%, 100% { background-color: #c1121f; }
  6%, 18% { background-color: #116911; }
  12% { background-color: #c1121f; }
}
/* phones read the flat story and never boot the canvas engine, so nothing
   would ever hide a fixed field: keep it scrolling away with the hero */
@media (max-width: 720px) {
  #hero-field { position: absolute; }
}

.hero-center {
  /* the lockup sits bottom-left, in the blank corner outside the CONUS
     silhouette; the pocket carve remains as a guard if they ever touch */
  position: absolute;
  /* lifted off the bottom edge: the lockup floats in the blank corner
     rather than clinging to the viewport rim. The padding is subtracted
     back out of the inset so the text keeps its seat: the white ground
     (invisible at rest on the white page) exists for story entry, when
     the in-flow lockup scrolls up across the fixed dot field */
  inset: auto auto calc(clamp(40px, 9vh, 96px) - 16px) calc(clamp(20px, 3.5vw, 56px) - 20px);
  padding: 14px 20px 16px;
  background: #fff;
  border-radius: 12px;
  /* above both fixed canvases (z0) so the ground actually covers dots and
     canvas-painted labels during the crossing; below the story cards (z2),
     which ride in over the departing lockup, and the scrim (z4) */
  z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; pointer-events: none;
}
.hero-title {
  margin: 0;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-weight: 500;
  font-size: clamp(16px, 2.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* the highlight is the finding: 93% opposed, 7% in support. One background
   layer only — hero-dots.js rebuilds the gradient each frame (crimson to the
   fill line, white past it, green emerging after 93%), so there is no overlay
   seam and nothing swaps at completion. */
.hero-title .t-dc {
  /* ink from first paint; the sweep turns the words white as the color
     passes over them (the .t-dc-lit overlay unclips on the bar's clock) */
  color: #131711;
  position: relative;
  /* symmetric padding: the words sit centered in the WHOLE bar (Andrew's
     ruling) — the green 7% underlaps the tail of the final "s", by design */
  padding: 0.02em 0.16em 0.04em;
  border-radius: 0.045em;
}
/* white copy of the words, revealed left-to-right in exact step with the
   fill line — hero-dots.js barSet() drives the clip each bloom frame */
.hero-title .t-dc .t-dc-lit {
  position: absolute;
  inset: 0;
  padding: 0.02em 0.16em 0.04em;
  color: #fff;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
/* title and stat line are one lockup in one carved pocket; the stat line
   starts flush with the title's left edge — no indent */
.hero-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.hero-sub {
  margin: clamp(10px, 1.7vh, 16px) 0 0;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-weight: 400;
  font-size: clamp(12px, 1.3vw, 18px);
  line-height: 1.25;
  letter-spacing: 0.004em;
  color: #131711;
  white-space: nowrap;
}

/* Corner brand: the site's own name in ink, quiet in the top-right — the
   blank sky above Maine on every tested aspect ratio. The icon slot fills
   once the American Sentiment mark is chosen. */
.hero-brand {
  /* fixed, not absolute: the brand holds the top-left on every tab and on
     the standalone about page */
  position: fixed;
  z-index: 45;
  top: clamp(18px, 3.2vh, 32px);
  left: clamp(20px, 3.5vw, 56px);
  display: flex;
  align-items: center;
  gap: 11px;
  color: #131711;
  text-decoration: none;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.hero-brand svg { width: 38px; height: 38px; display: block; flex: none; }


/* The one-time aside for the first walked-home exile: it speaks from the
   invitation's own seat — the sky pocket above the map — in the hint's
   own voice (same face, same display size, same halo). Absolute, not
   fixed: it belongs to the hero and scrolls away with it. The walk is
   the demonstration; this line only captions it, and leaves on its own. */
.hero-uneven {
  position: absolute; z-index: 40;
  left: 50%;
  transform: translateX(-50%);
  color: #131711;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-weight: 400;
  font-size: clamp(19px, 1.75vw, 27px);
  letter-spacing: 0.002em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 4px #fff, 0 0 14px #fff, 0 0 26px #fff;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.53, 0.2, 0.04, 0.96);
}
.hero-uneven.on { opacity: 1; }


/* Hover card, set the way Reve sets theirs: borderless white on an 8px rhythm,
   16px radius, layered whisper shadow, the title face at UI sizes with their
   barely-positive small-size tracking (tight tracking is for display only). */
.hero-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: #fff; border-radius: 16px;
  border: 1.5px solid transparent;   /* stance color, set per hover in JS */
  box-shadow: 0 12px 32px rgba(19, 23, 17, 0.10), 0 2px 8px rgba(19, 23, 17, 0.07);
  padding: 18px 24px 19px; color: #131711;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  max-width: 440px;
  animation: tip-in 0.14s cubic-bezier(0.53, 0.2, 0.04, 0.96) backwards;
}
.hero-tip .t-name { font-size: 21px; font-weight: 560; line-height: 1.15; }  /* stance color, set in JS */
.hero-tip .t-gov {
  margin-top: 5px; font-size: 19.5px; font-weight: 400; line-height: 1.25;
  letter-spacing: 0.002em; color: #131711;
}
.hero-tip .t-fact {
  margin-top: 8px; font-size: 18px; font-weight: 400; line-height: 1.3;
  letter-spacing: 0.002em; color: #131711;
}
@keyframes tip-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* The hover card mid-conversion: a bare white card that rides from the
   hover card's rect to the mini's seat, then fades over the mini's own
   entrance. Same Reve construction; contentless by design. */
.tip-morph {
  position: fixed; z-index: 75; pointer-events: none;
  background: #fff; border-radius: 16px;
  border: 1.5px solid transparent;   /* stance color, set in JS */
  box-shadow: 0 12px 32px rgba(19, 23, 17, 0.10), 0 2px 8px rgba(19, 23, 17, 0.07);
  transition: left 0.27s cubic-bezier(0.53, 0.2, 0.04, 0.96),
              top 0.27s cubic-bezier(0.53, 0.2, 0.04, 0.96),
              width 0.27s cubic-bezier(0.53, 0.2, 0.04, 0.96),
              height 0.27s cubic-bezier(0.53, 0.2, 0.04, 0.96),
              opacity 0.2s ease;
}
.tip-morph.out { opacity: 0; }

/* The invitation beside the featured dot: the hover card with the person's
   clip playing in place — same Reve construction as .hero-tip, media
   full-bleed on top, the three fact lines below. */
.hero-feature {
  position: fixed; z-index: 44;
  background: #fff; border-radius: 16px;
  border: 1.5px solid transparent;   /* stance color, set in JS */
  box-shadow: 0 12px 32px rgba(19, 23, 17, 0.10), 0 2px 8px rgba(19, 23, 17, 0.07);
  width: min(560px, 46vw);
  overflow: hidden;
  color: #131711;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  cursor: pointer; user-select: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.28s cubic-bezier(0.53, 0.2, 0.04, 0.96),
              transform 0.28s cubic-bezier(0.53, 0.2, 0.04, 0.96);
}
.hero-feature { pointer-events: none; }   /* a fading card must not eat input */
.hero-feature.on { opacity: 1; transform: none; pointer-events: auto; }
.hero-feature .hf-media { position: relative; background: #0b0d0c; }
.hero-feature video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-feature .hf-cue {
  position: absolute; left: 12px; top: 12px;
  display: flex; align-items: center; gap: 10px;
  background: #c1121f; color: #fff;
  font-size: 18px; font-weight: 500; letter-spacing: 0.004em; line-height: 1;
  padding: 12px 17px; border-radius: 11px;
  pointer-events: none;
  /* the ask that flashes green: twice, quickly, every 2s (keyframes above) */
  animation: cue-flash 2s 1.2s infinite;
}
.hero-feature .hf-cue svg { width: 21px; height: 21px; display: block; }
/* While a YouTube mini is muted, the whole tape belongs to the sound ask:
   a transparent shield above the embed catches the first click (the cue
   itself is pointer-events none), so nothing lands inside YouTube — whose
   title and logo link straight offsite. Removed on unmute. */
.hero-feature .mini-shield { position: absolute; inset: 0; cursor: pointer; }

/* the wait for a slow city portal, named: a caption-style plate centered on
   the pre-video stage — white on the captions' solid black — raised only
   when the wait is real, gone the moment a frame paints */
.hf-loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1;
  max-width: calc(100% - 40px);
  padding: 9px 15px; text-align: center;
  background: #080908;
  color: #fff;
  font-size: 17px; font-weight: 500; line-height: 1.5;
  letter-spacing: 0.004em;
  pointer-events: none;
}
.hf-loading[hidden] { display: none; }
/* the animated ellipsis owns three dots' width so the centered line
   doesn't wobble as it cycles . .. ... */
.hf-loading-dots { display: inline-block; width: 0.95em; text-align: left; }
/* captions ride the shard's sentence clock — broadcast style on the
   video: bold white lines on black highlight boxes that hug the text */
.hero-feature .hf-cap {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  text-align: center;
  pointer-events: none;
}
.hero-feature .hf-cap span {
  display: inline;
  background: #080908;
  color: #fff;
  font-size: 19px; font-weight: 700; line-height: 1.52;
  letter-spacing: 0.004em;
  padding: 3px 9px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-feature .hf-body { padding: 12px 22px 13px; }
/* ONE row: who/where/when on the left, the whole control strip on the
   right — the card is a real mini player: pause, previous/next, expand
   into the theater, and a download where a sliced clip exists */
.hero-feature .hf-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 17.5px; font-weight: 400; line-height: 1.3;
  letter-spacing: 0.002em; color: #131711;
}
.hero-feature .hf-ident {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-feature .hf-name { font-size: 19px; font-weight: 560; }  /* stance color, set in JS */
/* the strip hugs the card's right edge: the negative margin gives back the
   icon buttons' built-in inner padding so the last glyph, not its hit box,
   is what reads as right-aligned */
.hero-feature .hf-controls { display: flex; align-items: center; gap: 2px; flex: none; margin-right: -14px; }
.hero-feature .hf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 0; background: none; color: #131711;
  cursor: pointer; text-decoration: none; padding: 0;
  transition: background 120ms ease, opacity 120ms ease;
}
.hero-feature .hf-btn:hover { background: rgba(19, 23, 17, 0.08); }
.hero-feature .hf-btn:disabled { opacity: 0.3; cursor: default; background: none; }
.hero-feature .hf-btn svg { width: 17px; height: 17px; display: block; }
.hero-feature .hf-btn[hidden] { display: none; }
/* the same card, opened by a comment click anywhere on the site — the
   FULL tour size and type scale (Andrew: every video wears the big card;
   the 460px browsing cut is retired). Only conduct differs: cursor,
   stacking, and the embedded players' aspect box. No width here means
   the max-height media block below scales minis with the tour card. */
.hero-feature.mini-card { cursor: default; z-index: 74; }
.hero-feature.mini-card .hf-media iframe, .hero-feature.mini-card .hf-media .mini-yt {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
}
.hero-feature.mini-card .hf-media { cursor: pointer; }
@media (max-width: 720px) {
  /* every comment click lands here on phones too: the big card, capped
     to the phone's width */
  .hero-feature.mini-card { width: min(560px, 92vw); }
}
/* 768-class laptop heights: the full-size card plus a five-line caption
   reserve can outgrow the placeable band and the invitation would skip
   speakers (or fail to open at all); scale it down instead */
@media (max-height: 799px) {
  .hero-feature { width: min(500px, 44vw); }
  .hero-feature .hf-cap span { font-size: 17px; }
  .hero-feature .hf-body { padding: 12px 20px 14px; }
  .hero-feature .hf-line { font-size: 16px; }
  .hero-feature .hf-name { font-size: 17.5px; }
}


@media (prefers-reduced-motion: reduce) {
  .hero-tip { animation: none; }
}

/* ---------- tabs: pinned to the top right ---------- */

:root { --tabbar-h: 0px; --sidetabs-w: 0px; }

.tabs-row {
  /* bare text on the masthead line — brand left, tabs right — fixed, so the
     sections are reachable from the hero and the row rides along over the
     panels. No pill, no fill; the tab you're on is just underlined.
     Vertical offset centers the line on the brand's icon. */
  position: fixed;
  top: calc(clamp(18px, 3.2vh, 32px) + 3px);
  right: clamp(20px, 3.5vw, 56px);
  z-index: 45;
  display: flex; align-items: center; gap: clamp(20px, 2.8vw, 38px);
  transition: opacity 0.5s ease;
}
/* visible from the start; hero-dots strips a stale cached page's .hold */
.tabs-row.hold { opacity: 0; pointer-events: none; }
.tab {
  background: none; border: 0;
  padding: 2px 0;
  text-decoration: none;   /* the About tab is an anchor */
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-weight: 500; font-size: 17.5px;
  letter-spacing: -0.025em;
  color: #55604f;
  transition: color 130ms ease;
}
.tab:hover { color: #131711; }
.tab[aria-selected="true"],
.tab[aria-current="page"] {
  color: #131711;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1.5px;
}

main.daylight:not([data-tab="analysis"]) .panel-analysis,
main.daylight:not([data-tab="dataset"]) .panel-dataset,
main.daylight:not([data-tab="about"]) .panel-about { display: none; }

/* ---------- analysis story: pinned stage, scroll advances scenes ---------- */

/* issue bars: mentions per issue, split by stance */
.ibar-label {
  font-family: var(--display); font-weight: 650; font-size: 15px;
  color: var(--ink); letter-spacing: -0.01em;
  transition: color 120ms ease;
}
.ibar-track { height: 24px; border-radius: 3px; background: var(--room-up); overflow: hidden; }
.ibar-fill { display: flex; height: 100%; border-radius: 3px; overflow: hidden; }
.ibar-fill i { display: block; min-width: 1px; }
.ibar-fill .sun { background: var(--unclear); }
.ibar-n {
  font-family: var(--display); font-weight: 700; font-size: 15px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink-dim);
}

/* ---------- voices strip ---------- */

section { scroll-margin-top: 24px; }

/* ---------- stance band ---------- */

/* ---------- voices strip: one row, sideways ---------- */

.voices { padding: 26px 0 84px; }

/* ---------- tile map ---------- */

/* ---------- explorer ---------- */

.explore { padding: 20px 0 60px; }
.controls {
  max-width: 1180px; margin: 0 auto 10px; padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(4, minmax(130px, 180px));
  gap: 10px;
}
.controls input[type="search"], .controls select {
  width: 100%;
  background: var(--room); color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 11px 12px; font: inherit; font-size: 15px;
}
.controls input[type="search"]::placeholder { color: var(--ink-faint); }
.controls select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--room-up); border: 1px solid var(--line); border-radius: 99px;
  padding: 4px 6px 4px 12px; font-size: 13px; color: var(--ink);
}
.chip button { border: 0; background: var(--line); color: var(--ink-dim); border-radius: 99px; width: 18px; height: 18px; line-height: 1; font-size: 11px; display: grid; place-items: center; }
.chip button:hover { color: var(--ink); }
.chip-clear { background: none; border: 0; color: var(--ink-faint); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.chip-clear:hover { color: var(--ink); }

/* the dataset window: the list scrolls here, the page does not */

.row {
  display: grid;
  grid-template-columns: 52px minmax(180px, 240px) 1fr auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.row-who { min-width: 0; }
.row-name { font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; }
.row-affil { font-size: 12.5px; color: var(--support); line-height: 1.35; margin-top: 2px; }
.row-place { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }
.row-issues { font-size: 12px; color: var(--ink-faint); text-align: right; max-width: 180px; }

/* ---------- about: the record's colophon ---------- */

/* The About page speaks in the landing's own voice: white ground, Forma DJR
   ink. A 50/50 spread — headline and measured column on the left, the 8×8
   punch-card register on the right — closed by a full-frame rule and the
   maker's signature. The column starts at the brand's left edge, like the
   landing title. */
.about {
  min-height: 100svh;
  padding: calc(clamp(18px, 3.2vh, 32px) + clamp(88px, 15vh, 160px))
           clamp(20px, 3.5vw, 56px) 96px;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  color: #131711;
}
/* a 50/50 spread on the masthead's own frame: the text column holds the
   brand's left edge, the machine centers in the right void, and both open
   on one shared top line — the lede's cap height (no display title; the
   tab and the page title carry the name). The closing rule below spans
   the full frame, so neither half floats. */
.about-cols {
  display: grid;
  /* a classic editorial spread: the text holds the book measure on the
     brand's left edge, the contact rail anchors to the right frame line,
     and the void between them breathes with the viewport */
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  column-gap: clamp(56px, 6vw, 112px);
  row-gap: clamp(48px, 7vh, 72px);
  align-items: start;
}
/* the page signs itself in the brand flag's own material: an 8×8 punch card
   of ink dots holding the right-hand side — each row one byte, one character
   entering at the bottom per beat, a square of seemingly random pattern
   saying something to whoever thinks to read it (the source comment beside
   it says how). Ink, not stance color — binary text runs half ones, and
   green is never decoration here. */
.about-code {
  width: 72px;
  flex: none;
}
.about-code svg { display: block; width: 100%; height: auto; }
/* deliberately no transition on the dots: the rows shift up one place per
   beat and that is all — no slide, no crossfade, no motion (Andrew: quiet) */
/* the measure: sized so the lede sits on exactly 4 lines (it breaks at
   815px; a little headroom for other rasterizers — Andrew, Aug 2026),
   a clear breath between paragraphs. Only viewports ≳1375px afford the
   full width; below that the grid track caps it and the lede rewraps. */
.about-body { max-width: 824px; }
.about-body p {
  margin: 0 0 28px;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 0.002em;
  color: #131711;
}
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { font-weight: 500; }
/* the maker's name is the only color in the column: brand green, links home */
.about-body .about-prophecy { color: #116911; text-decoration: none; }
.about-body .about-prophecy:hover { text-decoration: underline; text-underline-offset: 4px; }

/* contact: three addresses on hairlines, the punch card shrunk to a seal
   beside the address it spells */
.about-contact { width: 100%; }
.contact-item {
  padding: 16px 0;
  border-top: 1px solid rgba(19, 23, 17, 0.1);
}
/* the rail opens on the columns' shared first line: no rule or padding
   above "General", and its label rides the body's own line grid so the
   two first lines sit level by construction */
.contact-item:first-child { border-top: 0; padding-top: 0; }
.contact-cat { display: block; font-weight: 500; font-size: 20px; line-height: 1.7; }
.contact-mail {
  display: inline-block;
  margin-top: 3px;
  font-size: 17px;
  color: #116911;
  text-decoration: none;
}
.contact-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-item p { margin: 9px 0 0; font-size: 15px; line-height: 1.55; color: #131711; }
.contact-code { padding: 20px 0 4px; }
/* the legacy lime selection and focus ring stay with the archive theme;
   this page is daylight ink */
body.about-page ::selection { background: #131711; color: #fff; }
body.about-page :focus-visible { outline-color: #131711; }
/* daylight's cream ground belongs to the working panels; the colophon
   shares the landing's white */
body.about-page main.daylight { background: #fff; }

/* ---------- theater: video left, transcript right ---------- */

/* The theater is the mini card grown to full size: the same Reve
   construction — white, 16px radius, whisper shadow scaled to modal depth,
   the title face throughout — with the tape on the left and the record's
   paper trail on the right. */
.theater-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(19, 23, 17, 0.6);
  backdrop-filter: blur(6px);
}

.dock {
  --hair: rgba(19, 23, 17, 0.1);
  position: fixed; z-index: 60;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(96vw, 1720px);
  height: min(92dvh, 1040px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(19, 23, 17, 0.28), 0 4px 16px rgba(19, 23, 17, 0.1);
  display: grid;
  grid-template-columns: minmax(0, 7fr) clamp(430px, 33vw, 580px);
}
/* the arrival: dock rises as the morph ghost lands on it (classes cleared
   on close so the next open replays; queue steps inside an open dock don't) */
@media (prefers-reduced-motion: no-preference) {
  .dock.rise { animation: dock-rise 0.34s cubic-bezier(0.53, 0.2, 0.04, 0.96); }
  .theater-backdrop.rise { animation: backdrop-in 0.3s ease; }
}
@keyframes dock-rise {
  from { opacity: 0; transform: translate(-50%, -49%) scale(0.965); }
}
@keyframes backdrop-in {
  from { opacity: 0; }
}

.dock-stage {
  position: relative;
  background: #000;
  min-height: 0;
}
.dock-stage iframe, #dock-player, .dock-stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dock-alt {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center;
  padding: 32px; background: #000; gap: 18px; color: #f5f4ef;
}
.dock-alt p { margin: 0; }
a.dock-alt-open {
  display: inline-block;
  background: #116911; color: #fff;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-weight: 500; font-size: 19px; letter-spacing: 0.004em;
  padding: 14px 36px; border-radius: 12px;
  text-decoration: none;
  transition: background 130ms ease, transform 130ms ease;
}
a.dock-alt-open:hover { background: #0d5410; transform: translateY(-1px); }

.dock-panel {
  display: flex; flex-direction: column;
  min-height: 0;
  background: #fff;
  color: #131711;
  border-left: 1px solid var(--hair);
  font-family: "Forma DJR Text", "Switzer", var(--display);
}
.dock-top {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--hair);
}
/* the mini card's own icon buttons, at theater size */
.dock-top button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: 0; background: none; color: #131711; padding: 0;
  transition: background 120ms ease, opacity 120ms ease;
}
.dock-top button:hover:not(:disabled) { background: rgba(19, 23, 17, 0.07); }
.dock-top button:disabled { opacity: 0.3; cursor: default; }
.dock-top button svg { width: 19px; height: 19px; display: block; }
.dock-queue {
  margin-left: 8px;
  font-size: 15.5px; font-weight: 400; letter-spacing: 0.004em;
  font-variant-numeric: tabular-nums;
  color: #6f746c;
}
.dock-top-spacer { flex: 1; }
.dock-share {
  display: inline-block;
  margin-right: 6px;
  border: 1px solid rgba(19, 23, 17, 0.18);
  border-radius: 999px;
  padding: 7px 17px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.004em;
  color: #131711; background: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}
.dock-share:hover { background: #131711; border-color: #131711; color: #fff; }

.dock-head { padding: 18px 30px 16px; }
/* the hover card's hierarchy at theater size: the person first, in their
   stance's ink, the where/when line beneath in the quiet voice */
.dock-title-row {
  display: flex; flex-direction: column;
  gap: 4px;
}
.dock-head h3 {
  order: -1;
  margin: 0;
  font-weight: 560;
  font-size: 23px; letter-spacing: -0.01em; line-height: 1.12;
  color: #131711;   /* stance ink, set per comment in JS */
}
.dock-byline-row {
  display: flex; align-items: center; gap: 14px;
  margin: 9px 0 0;
}
.dock-byline {
  flex: 1; min-width: 0;
  margin: 0;
  font-size: 15.5px; line-height: 1.6; letter-spacing: 0.004em;
  color: #494e46;
}
.dock-byline b { font-weight: 500; color: #131711; }
.dock-byline .dock-dot { color: rgba(19, 23, 17, 0.3); margin: 0 6px; }
.dock-affil-inline { color: #2e6da4; }
.stance-pill {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.004em; line-height: 1.35;
}
.stance-pill.no { background: rgba(193, 18, 31, 0.08); color: #c1121f; }
.stance-pill.yes { background: rgba(17, 105, 17, 0.08); color: #116911; }
.stance-pill.inquiry { background: rgba(138, 109, 26, 0.09); color: #8a6d1a; }
.stance-pill.unclear { background: rgba(85, 96, 79, 0.1); color: #55604f; }

.dock-where {
  margin: 0;
  font-weight: 400;
  font-size: 18px; letter-spacing: 0.002em; line-height: 1.3;
  color: #131711; white-space: nowrap;
}
.dock-where strong { font-weight: 500; }
.dock-where .dock-sep { color: rgba(19, 23, 17, 0.3); margin: 0 7px; font-weight: 400; font-size: 16px; }
#dock-date { font-size: 17px; font-weight: 400; letter-spacing: 0.002em; color: #6f746c; }
.dock-time { display: inline-flex; align-items: center; gap: 5px; }
.dock-time svg { width: 15px; height: 15px; color: #6f746c; }

.dock-transcript {
  flex: 1;
  min-height: 118px;
  overflow-y: auto;
  margin: 0;
  padding: 18px 30px 26px;
  border-top: 1px solid var(--hair);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 23, 17, 0.2) transparent;
}
.tr-p {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 16px;
  margin: 0 0 15px;
}
.tr-time {
  font-family: var(--mono); font-size: 13.5px; color: rgba(19, 23, 17, 0.38);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tr-body {
  margin: 0;
  font-size: 17px; line-height: 1.76; letter-spacing: 0.002em; color: #131711;
}
.dock-transcript .tr-s { cursor: pointer; border-radius: 4px; padding: 1px 2px; transition: background 120ms ease, color 120ms ease; }
.dock-transcript .tr-s:hover { background: rgba(19, 23, 17, 0.055); }
/* the live sentence carries the speaker's stance ink (set on the dock in JS) */
.dock-transcript .tr-s.on { background: rgba(17, 105, 17, 0.14); font-weight: 560; }
.dock-transcript .tr-s.on {
  background: color-mix(in srgb, var(--dock-accent, #116911) 13%, transparent);
}
.tr-p.tr-other .tr-body {
  background: rgba(19, 23, 17, 0.04);
  border-radius: 10px;
  padding: 10px 14px 11px;
  color: #55604f;
  font-size: 15.5px; line-height: 1.7;
}
.tr-other-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500; font-size: 14px; letter-spacing: 0.004em;
  color: #8b8f88;
}
.tr-p.tr-other .tr-time { color: rgba(19, 23, 17, 0.24); }
.dock-transcript .tr-skip {
  display: block; margin: 4px 0 15px; padding: 9px 14px;
  margin-left: 74px;
  background: rgba(19, 23, 17, 0.04); border-radius: 10px;
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.004em;
  color: #8b8f88;
}
.dock-alt-hint { font-size: 20px; line-height: 1.55; color: rgba(255, 255, 255, 0.94); max-width: 27em; }

/* ---- how this comment was coded ---- */

/* the person's section is the toggle: click the head, the coding unfolds */
.dock-top, .dock-head { flex-shrink: 0; }
.dock-head.expandable { cursor: pointer; }
.dock-head.expandable:hover { background: rgba(19, 23, 17, 0.03); }
.dock-head-chev {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(19, 23, 17, 0.16); border-radius: 999px;
  background: #fff;
  color: #131711;
  transition: transform 160ms ease, background 130ms ease, color 130ms ease, border-color 130ms ease;
}
.dock-head-chev svg { width: 18px; height: 18px; display: block; }
.dock-head.expandable:hover .dock-head-chev { background: #131711; border-color: #131711; color: #fff; }
.dock-head[aria-expanded="true"] .dock-head-chev { transform: rotate(180deg); }
.dock-coding {
  border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; min-height: 0;
}
.dock-coding-body {
  /* opens in full; scrolls only if a heavily-coded outlier outgrows the panel */
  overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 30px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 23, 17, 0.2) transparent;
}
.code-group { margin: 0 0 14px; }
.code-group h5 {
  margin: 0 0 8px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.004em; color: #6f746c;
}
.code-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.code-chip {
  display: inline-flex; align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.004em; line-height: 1.3;
  background: #fff;
  border: 1px solid rgba(19, 23, 17, 0.14);
  color: #131711;
}
.code-chip.c { background: rgba(193, 18, 31, 0.05); border-color: rgba(193, 18, 31, 0.22); }
.code-chip.b { background: rgba(29, 79, 156, 0.05); border-color: rgba(29, 79, 156, 0.22); }
.code-chip.a { background: rgba(138, 109, 26, 0.06); border-color: rgba(138, 109, 26, 0.26); }
.code-facts { margin-top: 4px; border-top: 1px solid var(--hair); padding-top: 13px; }
.code-facts p { margin: 0 0 9px; font-size: 15px; line-height: 1.55; letter-spacing: 0.002em; color: #3f443c; }
.code-facts p span { font-weight: 500; color: #6f746c; margin-right: 9px; }
.code-why em { color: #6f746c; font-style: italic; }


/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 80;
  background: var(--caption); color: var(--caption-ink);
  font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 4px;
}


/* ---------- daylight: everything after the hero ---------- */

main.daylight {
  --tape: #faf9f5;
  --room: #ffffff;
  --room-up: #f1efe7;
  --line: #e2dfd3;
  --ink: #131711;
  --ink-dim: #55604f;
  --ink-faint: #8b948a;
  --caption: #116911;
  --caption-ink: #ffffff;
  --support: #2f6f9f;
  background: var(--tape);
  color: var(--ink);
}
main.daylight .timecode { background: var(--room-up); border-color: var(--line); color: var(--caption); }
main.daylight .chyron { background: var(--room-up); }
main.daylight .controls input[type="search"], main.daylight .controls select { background: var(--room); }

/* ---------- story reveals: desktop only (mobile lays flat) ---------- */

@media (min-width: 901px) {
  .story-scene {
    opacity: 0; transform: translateY(16px);
    visibility: hidden; pointer-events: none;
    transition: opacity 420ms ease, transform 420ms ease, visibility 0s linear 420ms;
  }
  .story-scene.on {
    opacity: 1; transform: none;
    visibility: visible; pointer-events: auto;
    transition: opacity 420ms ease, transform 420ms ease;
  }
  /* the split: the bar arrives as equal thirds, then settles to the truth */
  .story-scene .stance-bar .seg { transition: flex-grow 950ms cubic-bezier(0.22, 0.61, 0.21, 1); }
  .story-scene:not(.on) .stance-bar .seg { flex-grow: 1 !important; }
  /* the map: tiles wash in on a diagonal */
  .story-scene[data-scene="1"] .tile { opacity: 0; transform: translateY(8px); }
  .story-scene[data-scene="1"].on .tile {
    opacity: 1; transform: none;
    transition: opacity 300ms ease var(--d, 0ms), transform 300ms ease var(--d, 0ms), border-color 120ms ease;
  }
  .story-scene[data-scene="1"].on .tile.dim { opacity: 0.38; }
  .story-scene[data-scene="1"].on .tile.dim:hover { opacity: 1; }
  /* the issues: bars sweep out top to bottom */
  .story-scene[data-scene="2"] .ibar-fill { transform-origin: left; transform: scaleX(0); }
  .story-scene[data-scene="2"] .ibar-n { opacity: 0; }
  .story-scene[data-scene="2"].on .ibar-fill {
    transform: scaleX(1);
    transition: transform 620ms cubic-bezier(0.22, 0.61, 0.21, 1) var(--d, 0ms);
  }
  .story-scene[data-scene="2"].on .ibar-n {
    opacity: 1;
    transition: opacity 380ms ease calc(var(--d, 0ms) + 340ms);
  }
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .controls { grid-template-columns: 1fr 1fr; }
  .search-wrap { grid-column: 1 / -1; }
}

/* flat story: no pin, scenes stack with their own titles */
@media (max-width: 900px) {
  .story-track { height: auto; }
  .story-pin {
    position: static; height: auto;
    display: block; overflow: visible;
    padding-top: 44px;
  }
  .story-steps { display: none; }
  .story-stage { height: auto; }
  .story-scene { position: static; margin: 26px 0 52px; }
  .scene-title {
    display: block; margin: 0 0 14px;
    font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.015em;
  }
  .ibar { grid-template-columns: 1fr; gap: 5px; }
  .ibar-n { display: none; }
}

@media (max-width: 720px) {
  .section-head, .voices-strip, .controls,
  .active-filters, .result-line, .pager { padding-left: 16px; padding-right: 16px; }
  /* brand and tabs share the masthead line on phones too (Andrew, Aug 29);
     the vertical offset centers the smaller tab text on the brand icon */
  .tabs-row { top: calc(clamp(18px, 3.2vh, 32px) + 7px); gap: 14px; }
  /* content scrolls up beneath the transparent fixed masthead; a frosted
     band carries the brand and tabs over it, fading out below the tabs.
     Frost, not a flat fill: the grounds differ (hero white, daylight
     panels cream, scene images white), so no single color matches all */
  body::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0;
    height: calc(clamp(18px, 3.2vh, 32px) + 66px);
    background: #fff;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
    z-index: 44; pointer-events: none;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body::before {
      background: rgba(255, 255, 255, 0.58);
      -webkit-backdrop-filter: blur(16px) saturate(1.1);
      backdrop-filter: blur(16px) saturate(1.1);
    }
  }
  /* the standalone About page opened with its heading under the lockup */
  .about { padding-top: calc(clamp(18px, 3.2vh, 32px) + 120px); }
  /* one column on phones: contact follows the text, sharing its edges */
  .about-cols { grid-template-columns: 1fr; }
  .tab { white-space: nowrap; flex: none; font-size: 16px; }
  /* the narrowest phones: tighten both ends of the masthead so the brand
     and the tabs still clear each other on one line */
  @media (max-width: 374px) {
    .hero-brand { font-size: 15.5px; gap: 9px; }
    .hero-brand svg { width: 32px; height: 32px; }
    .tabs-row { gap: 11px; top: calc(clamp(18px, 3.2vh, 32px) + 4px); }
    .tab { font-size: 15px; }
  }
  .row { grid-template-columns: 44px 1fr; }
  .row-issues { text-align: left; max-width: none; }
  .dock {
    width: 100vw; height: 100dvh; border-radius: 0; border: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(200px, 38dvh) minmax(0, 1fr);
  }
  .dock-panel { border-left: 0; border-top: 1px solid var(--hair); }
  .dock-head h3 { font-size: 20px; }
  .dock-where { font-size: 16px; }
  /* phones: timecodes sit above their paragraph so the text gets the width */
  .tr-p { grid-template-columns: 1fr; gap: 0; }
  .tr-time { text-align: left; padding-top: 0; margin-bottom: 2px; }
  .dock-transcript { padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
  .dock-transcript .tr-skip { margin-left: 0; }
  .tabs-row { max-width: calc(100vw - 32px); }
  .dock-top { padding: 10px 12px; }
  .dock-top button { width: 44px; height: 44px; }
  .ds-minifind { font-size: 16px; }
}

/* touch landscape phones get the stacked dock sheet too */
@media (pointer: coarse) and (max-height: 520px) {
  .dock {
    width: 100vw; height: 100dvh; border-radius: 0; border: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(140px, 44dvh) minmax(0, 1fr);
  }
  .dock-panel { border-left: 0; border-top: 1px solid var(--hair); }
}

/* ============ PHONE GATE: the desktop notice ============ */
/* Daylight room, ink words, one door. Copy is Andrew's, verbatim. */
.phone-gate {
  position: fixed; inset: 0; z-index: 200;
  background: #fff; color: #131711;
  display: flex; align-items: center;
  padding: calc(28px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
}
.phone-gate[hidden] { display: none; }
.phone-gate-inner { max-width: 26em; }
.phone-gate p {
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-size: 21px; line-height: 1.5; font-weight: 500;
  letter-spacing: 0.002em; margin: 0 0 1.15em;
}
/* the lockup holds the gate's top center, in the masthead's ink */
.phone-gate .pg-brand {
  position: absolute;
  top: calc(26px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 11px;
  color: #131711;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-weight: 500; font-size: 17.5px; line-height: 1.02;
  letter-spacing: -0.025em; white-space: nowrap;
}
.phone-gate .pg-brand svg { width: 38px; height: 38px; display: block; flex: none; }
/* the flag rides the free-country line: flex centers it on the text
   exactly, no baseline guesswork */
.phone-gate .pg-line { display: flex; align-items: center; gap: 10px; }
.phone-gate .pg-flag {
  width: 27px; height: auto; flex: none; border-radius: 1.5px;
  /* the stripes need an edge on the white page */
  box-shadow: 0 0 0 1px rgba(19, 23, 17, 0.14);
}
.phone-gate button {
  display: block; margin: 34px auto 0; min-height: 48px;
  font-family: "Forma DJR Text", "Switzer", var(--display);
  font-size: 17px; font-weight: 650;
  background: #131711; color: #fff;
  border: 0; border-radius: 4px; padding: 13px 46px;
  cursor: pointer;
}
html.gate-up, html.gate-up body { overflow: hidden; height: 100%; }