/* ==========================================================================
   TidewaterBitcoin — Hampton Roads Bitcoin Dashboard
   Visual system: a nautical chart table. Deep-channel ground, chart-paper
   light mode, sounding-style tabular numerals, buoy orange as the one accent.
   Port red / starboard green carry the up-down semantics, as on the water.
   ========================================================================== */

/* ---------- tokens : light (chart paper) ---------- */
:root {
  color-scheme: light;

  --bg:        #E9EFF2;
  --bg-deep:   #DCE6EA;
  --panel:     #FFFFFF;
  --panel-2:   #F3F7F9;
  --line:      #C3D3DA;
  --line-soft: #DEE8EC;

  --ink:   #0B1E27;
  --ink-2: #43606C;
  --ink-3: #6D8793;

  --accent:      #B75F05;  /* text-safe buoy orange on paper           */
  --accent-pure: #F7931A;  /* the real buoy orange, for fills & marks  */
  --accent-wash: rgba(247, 147, 26, .10);

  --up:    #12784A;
  --down:  #B8352B;
  --warn:  #8C6210;
  --teal:  #216E86;

  --shadow: 0 1px 2px rgba(11, 30, 39, .06), 0 8px 24px -14px rgba(11, 30, 39, .28);
  --contour: rgba(33, 110, 134, .05);

  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Spectral", Georgia, "Times New Roman", serif;

  --r: 3px;
  --gap: 18px;
  --maxw: 1320px;
}

/* ---------- tokens : dark (deep channel) — system preference ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        #061118;
    --bg-deep:   #040C12;
    --panel:     #0C202B;
    --panel-2:   #102B37;
    --line:      #1B3C4B;
    --line-soft: #132E3B;
    --ink:   #DAE9EF;
    --ink-2: #8DA9B5;
    --ink-3: #647F8C;
    --accent:      #F7931A;
    --accent-pure: #F7931A;
    --accent-wash: rgba(247, 147, 26, .13);
    --up:    #34B577;
    --down:  #E2584A;
    --warn:  #DCA441;
    --teal:  #4FA5BF;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -18px rgba(0, 0, 0, .8);
    --contour: rgba(79, 165, 191, .07);
  }
}

/* ---------- tokens : dark (explicit choice) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #061118;
  --bg-deep:   #040C12;
  --panel:     #0C202B;
  --panel-2:   #102B37;
  --line:      #1B3C4B;
  --line-soft: #132E3B;
  --ink:   #DAE9EF;
  --ink-2: #8DA9B5;
  --ink-3: #647F8C;
  --accent:      #F7931A;
  --accent-pure: #F7931A;
  --accent-wash: rgba(247, 147, 26, .13);
  --up:    #34B577;
  --down:  #E2584A;
  --warn:  #DCA441;
  --teal:  #4FA5BF;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -18px rgba(0, 0, 0, .8);
  --contour: rgba(79, 165, 191, .07);
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
}

/* faint depth contours, the way a chart hatches shallow water */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, transparent 0 46px, var(--contour) 46px 47px),
    repeating-linear-gradient(115deg, transparent 0 210px, var(--contour) 210px 212px);
  mask-image: radial-gradient(120% 90% at 78% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 0%, #000 0%, transparent 72%);
}

main, .foot { position: relative; z-index: 1; }

img { max-width: 100%; }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent-pure); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }

.num, .chip-v, .price-big, .block-h, .v, .stat-list dd, .tbl td, .fee-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   ICONS — the TidewaterBitcoin set, from assets/icons.svg
   Drawn on a 24px grid in currentColor, so an icon is always the colour of
   the text beside it. Sized in em to sit on the text's baseline.
   ========================================================================== */
.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
/* headings get their icon in buoy orange, a little larger than the label */
.p-head h2 .ic,
.section-rule .ic { color: var(--accent); width: 1.45em; height: 1.45em; vertical-align: -.36em; margin-right: .55em; }
.p-head h2 { display: inline-flex; align-items: center; }
.p-head h2 .ic { vertical-align: 0; }
.section-rule span { display: inline-flex; align-items: center; }

/* small labels — venue, chat channels, toolkit columns, almanac — lead with a
   quieter icon in their own colour */
.gvenue span .ic,
.comm-k .ic,
.tool-col h3 .ic,
.alm-k .ic { width: 1.5em; height: 1.5em; margin-right: .45em; vertical-align: -.42em; }
.gwhen .ic-when { color: var(--accent); width: 18px; height: 18px; align-self: center; }
.goal-head .k .ic { margin-right: .45em; width: 1.4em; height: 1.4em; vertical-align: -.35em; }
.mc-ln { color: var(--up); display: inline-flex; }
.mc-ln .ic { width: 13px; height: 13px; }
.ln-mark { color: var(--up); }

/* ==========================================================================
   PILOT BOARD — the sticky rail of live figures
   ========================================================================== */
.board {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.board-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.mark { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; flex: none; }

/* the bitcoin buoy */
.mark-logo { width: 38px; height: 38px; display: block; flex: none; }

.mark-text { display: flex; flex-direction: column; line-height: 1.12; }
.mark-text b  { font-size: 15px; letter-spacing: .01em; }
/* "TidewaterBitcoin" is long: on a phone it pushed the header tools against the edge */
@media (max-width: 420px) { .mark-text b { font-size: 13px; letter-spacing: 0; } }
.mark-text em { font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.mark-text small { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: 1px; }
/* the beta tag, with the live data status beside it */
.mark-sub { display: flex; align-items: center; gap: 9px; }
.mark-sub .pulse { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; margin-top: 1px; }
.mark-sub .pulse i { width: 6px; height: 6px; }

.rail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  scroll-snap-align: start;
  padding: 2px 15px;
  border-left: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.chip:first-child { border-left: 0; }
.chip-k { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.chip-v { font-size: 14px; font-weight: 500; white-space: nowrap; }

.board-tools { flex: none; display: flex; align-items: center; gap: 10px; }

/* the rail opens the network pop-out (app.js initNetPop): the whole strip is the button,
   with a small caret after it, and the panel is the music player's twin on the left */
.rail { cursor: pointer; border-radius: 8px; transition: background .15s; }
.rail:hover, .rail.is-open { background: var(--accent-wash); }
.rail-more {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 32px; margin-left: -12px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer;
}
.rail-more:hover, .rail-more[aria-expanded="true"], .rail:hover + .rail-more { color: var(--accent); }
.rail-more svg { width: 12px; height: 12px; transition: transform .15s; }
.rail-more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* phones have no room for the rail, so no caret either (the header is full to the edge at 375px) */
@media (max-width: 640px) { .rail-more { display: none; } }

.netpop {
  position: fixed;                 /* under the header; script sets top and left */
  top: 64px; left: 12px;
  z-index: 60;
  width: min(392px, calc(100vw - 24px));
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
  padding: 0 14px 12px;
  background: #121212;
  color: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid #F7931A;
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .4);
  font-size: 12px;
  line-height: 1.35;
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s, transform .16s, visibility 0s .16s;
}
.netpop.np-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .16s, transform .16s; }
@media (prefers-reduced-motion: reduce) { .netpop, .netpop.np-open { transition: none; transform: none; } }
@media (max-width: 640px) { .netpop { left: 12px; right: 12px; width: auto; } }
.netpop :focus-visible { outline: 2px solid #F7931A; outline-offset: 2px; }

.np-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 0 10px; }
.np-x { flex: none; width: 30px; height: 30px; margin-right: -6px; padding: 6px; border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, .65); cursor: pointer; }
.np-x:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.np-x svg { display: block; width: 100%; height: 100%; }

.np-k { display: block; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.np-s { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .62); }

.np-big { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: #F7931A; font-variant-numeric: tabular-nums; }

.np-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.np-cell { padding: 7px 10px; background: #181818; }
.np-cell b { display: block; margin: 1px 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.np-fees { margin-top: 10px; }
.np-feerow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 5px 0 5px; }
.np-feerow span { padding: 4px 4px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; text-align: center; font-size: 10.5px; color: rgba(255, 255, 255, .6); }
.np-feerow b { display: block; font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.np-feerow span:first-child { border-color: color-mix(in srgb, #F7931A 60%, transparent); }
.np-feerow span:first-child b { color: #F7931A; }

.np-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.np-bar { min-width: 0; }
.np-bar .np-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.np-bar-top b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.np-track { height: 6px; margin: 5px 0 4px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.np-track i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #C46A0A, #F7931A); transition: width .4s; }

.np-blocks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.np-block {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 4px; border-radius: 6px;
  background: linear-gradient(180deg, #2A1A08, #1A1A1A);
  border: 1px solid rgba(247, 147, 26, .3);
  color: rgba(255, 255, 255, .62); font-size: 10px; text-decoration: none; text-align: center;
}
.np-block b { font-size: 11.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.np-block em { font-style: normal; color: #F7931A; }
.np-block:first-child { border-color: #F7931A; }
.np-block:hover { background: linear-gradient(180deg, #3A240A, #1F1F1F); }

.np-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
.np-tc {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border: 1px solid #F7931A; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: #F7931A; text-decoration: none; white-space: nowrap;
}
.np-tc:hover { background: #F7931A; color: #121212; }
.np-tc .ic { width: 15px; height: 15px; }
.np-src { font-size: 11px; color: rgba(255, 255, 255, .55); text-decoration: none; white-space: nowrap; }
.np-src:hover { color: #fff; }
html[data-skin="fallout"] .netpop,
html[data-skin="fallout"] .np-grid,
html[data-skin="fallout"] .np-feerow span,
html[data-skin="fallout"] .np-block,
html[data-skin="fallout"] .np-tc { border-radius: 0; }

/* "BTC buying options": sits just left of the music player */
.buy-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 32px; padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent-pure) 55%, var(--line));
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none;
}
.buy-btn .ic { width: 15px; height: 15px; }
.buy-btn:hover, .buy-btn[aria-current="page"] { background: var(--accent-pure); border-color: var(--accent-pure); color: #0B1E27; }
@media (max-width: 1100px) and (min-width: 641px) { .buy-btn { padding: 0 11px; letter-spacing: .08em; } }
@media (max-width: 640px) {
  /* no room for the words on a phone: a 32px circle with the coin, the words kept for screen readers */
  .buy-btn { width: 32px; padding: 0; justify-content: center; }
  .buy-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* the two mode buttons (skin, light/dark), a US flag as wide as the pair beneath them, and "Made in America" */
.board-modes { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.modes-row { display: flex; gap: 10px; }
.made-usa { display: block; width: 74px; height: 39px; line-height: 0; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(11, 30, 39, .28); }
.made-usa svg { display: block; width: 100%; height: 100%; }
.made-usa-text { font-family: var(--sans); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--ink); white-space: nowrap; }
html[data-skin="fallout"] .made-usa { filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(2.6) brightness(.95); }

/* ---- the music player, built into the board ----
   Wide screens get a mini player (picture, vibe, chevron); narrower ones the
   red Live button. Either pops out the same panel (.rp) under the header.
   Hidden until script finds a liveStream in config.js. --vibe is the tint of
   the vibe that is tuned in. */
.board-live { position: relative; flex: none; }
.board-live[hidden] { display: none; }
.live-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}
.live-btn:hover, .live-btn[aria-expanded="true"], .live-btn.is-playing { color: var(--accent); border-color: var(--accent); }
.live-btn i { width: 7px; height: 7px; border-radius: 50%; background: var(--down); flex: none; animation: ping 2.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-btn i { animation: none; } }
@media (max-width: 640px) {
  /* the header has no room for the word: a 32px circle with the red dot, the word kept for screen readers */
  .live-btn { width: 32px; padding: 0; justify-content: center; }
  .live-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* the mini player: the stream's picture (press it to play or pause) and its
   vibe beside it (press that to pop the player out) */
.board-player {
  --vibe: #F7931A;
  display: none;
  width: 222px;
  height: 50px;
  overflow: hidden;
  border-radius: 8px;
  flex: none;
  background: #121212;
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--vibe);
}
.bp-pic {
  position: relative; display: block; flex: none; width: 89px; height: 50px; padding: 0;
  overflow: hidden; background: #000; border: 0; cursor: pointer; color: #fff; font: inherit;
}
.bp-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-pic::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); transition: background .15s; }
.bp-pic:hover::after { background: rgba(0, 0, 0, .1); }
.bp-ic { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
.bp-ic svg { width: 22px; height: 22px; }
/* playing: the equaliser stands in for the glyph, and gives way to pause on hover */
.bp-eq { position: absolute; inset: 0; z-index: 1; display: none; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 9px; }
.bp-eq s { width: 3px; height: 14px; background: var(--vibe); border-radius: 1px; transform-origin: bottom; animation: bp-eq 1s ease-in-out infinite; }
.bp-eq s:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.bp-eq s:nth-child(3) { animation-duration: 1.2s; animation-delay: -.6s; }
@keyframes bp-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.board-player.is-playing .bp-eq { display: flex; }
.board-player.is-playing .bp-ic { opacity: 0; }
.board-player.is-playing .bp-pic:hover .bp-ic, .board-player.is-playing .bp-pic:focus-visible .bp-ic { opacity: 1; }
.board-player.is-playing .bp-pic:hover .bp-eq, .board-player.is-playing .bp-pic:focus-visible .bp-eq { opacity: 0; }
.bp-meta {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 24px 0 21px;
  border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer;
  line-height: 1.25;
  color: inherit;
}
.bp-meta i { position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--down); animation: ping 2.6s ease-out infinite; }
.bp-meta b, .bp-meta span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-meta b { font-size: 11.5px; font-weight: 600; }
.bp-meta span { font-size: 9.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
.bp-meta .bp-chev { position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; overflow: visible; color: rgba(255, 255, 255, .6); transition: transform .2s; }
.bp-chev svg { display: block; width: 100%; height: 100%; }
.bp-meta:hover b, .bp-meta:hover .bp-chev { color: var(--vibe); }
.board-player.is-open .bp-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .bp-meta i, .bp-eq s { animation: none; } .bp-eq s { transform: scaleY(.6); } }
@media (min-width: 1100px) {
  .board-player:not([hidden]) { display: flex; }
  .board-live { display: none; }
}

/* the pop-out: vibe buttons, the stream, controls, details. It sits in #music-root, which
   a soft page swap (pjax.js) never touches, so the stream plays on between pages. */
.rp {
  --vibe: #F7931A;
  position: fixed;                 /* under the header; script sets top (it lives in #music-root, outside the page) */
  top: 64px;
  z-index: 60;
  right: max(12px, calc((100vw - var(--maxw)) / 2 + 16px));
  width: min(392px, calc(100vw - 24px));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: #121212;
  color: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--vibe);
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .4);
  /* closed, it stays in the page (so the music goes on) but cannot be seen or reached */
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s, transform .16s, visibility 0s .16s;
}
.rp.rp-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .16s, transform .16s; }
@media (prefers-reduced-motion: reduce) { .rp, .rp.rp-open { transition: none; transform: none; } }
@media (max-width: 640px) { .rp { left: 12px; right: 12px; width: auto; } }
.rp button { font: inherit; color: inherit; }
.rp :focus-visible { outline: 2px solid var(--vibe); outline-offset: 2px; }

.rp-top { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 10px; }
.rp-vibes { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; }
.rp-vibe {
  --vibe: #F7931A;
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: transparent;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rp-vibe i { width: 8px; height: 8px; border-radius: 50%; background: var(--vibe); flex: none; }
.rp-vibe:hover { border-color: var(--vibe); }
.rp-vibe[aria-pressed="true"] { border-color: var(--vibe); background: color-mix(in srgb, var(--vibe) 22%, #121212); }
.rp-x {
  flex: none; width: 30px; height: 30px; padding: 6px;
  border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, .65); cursor: pointer;
}
.rp-x:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.rp-x svg, .rp-play svg, .rp-mute svg { display: block; width: 100%; height: 100%; }

/* the stream, 16:9; the picture sits under the player until it has loaded */
.rp-screen { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; color: #fff; }
.rp-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rp-big {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; padding: 15px;
  display: block; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--vibe) 82%, #000); color: #0B1E27;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
  transition: transform .15s;
}
.rp-big svg { display: block; width: 100%; height: 100%; }
.rp-screen:hover .rp-big, .rp-big:hover { transform: scale(1.07); }
.rp-screen.has-frame .rp-big { display: none; }

.rp-ctl { display: flex; align-items: center; gap: 8px; padding: 10px 14px 4px 10px; }
.rp-play {
  flex: none; width: 38px; height: 38px; padding: 9px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--vibe); color: #0B1E27;
}
.rp-play:hover { filter: brightness(1.1); }
.rp-mute { flex: none; width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, .75); cursor: pointer; }
.rp-mute:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.rp-vol {
  --p: 70%;
  flex: 1 1 auto; min-width: 0; height: 22px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.rp-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--vibe) var(--p), rgba(255, 255, 255, .22) var(--p)); }
.rp-vol::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.rp-vol::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--vibe); }
.rp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0; }
.rp-vol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }

.rp-info { padding: 8px 14px 14px; line-height: 1.4; }
.rp-title { display: block; font-size: 14px; font-weight: 600; }
.rp-by { display: block; font-size: 11.5px; letter-spacing: .03em; color: rgba(255, 255, 255, .6); }
.rp-note { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.rp-note[hidden] { display: none; }
.rp-disk { margin: 8px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
.rp-status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.rp-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--down); flex: none; }
.rp.is-playing .rp-status i { animation: ping 2.6s ease-out infinite; }
.rp-status.is-bad { color: #FFB4A8; }
.rp-yt { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .8); text-decoration: none; white-space: nowrap; }
.rp-yt:hover { color: var(--vibe); }
.rp-yt-ic { display: inline-flex; width: 13px; height: 13px; }
.rp-yt-ic svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .rp.is-playing .rp-status i { animation: none; } }

.pulse { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pulse i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.pulse.live i { background: var(--up); box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent); animation: ping 2.6s ease-out infinite; }
.pulse.stale i { background: var(--warn); }
.pulse.down i  { background: var(--down); }

@keyframes ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .pulse.live i { animation: none; } }

.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  border-radius: var(--r);
  cursor: pointer;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---- page navigation, a second quiet row in the board ---- */
.site-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 7px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent-pure); }
.site-nav .ic { width: 1.45em; height: 1.45em; vertical-align: 0; }
.site-nav a[aria-current="page"] .ic { color: var(--accent); }

/* a hairline between the nav's groups of pages */
.nav-sep { flex: none; align-self: center; width: 1px; height: 14px; margin: 0 -4px; background: var(--line); }

/* a group of pages (Community, Learn): the tab is not a link, it only opens its list,
   so it gets a caret and no underline of its own until one of its pages is open */
.site-nav .nav-top {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 7px 0 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: default;
}
.site-nav .nav-top:hover, .site-nav .nav-top[aria-expanded="true"] { color: var(--ink); }
.site-nav .nav-top .nav-caret { width: 10px; height: 10px; margin-left: -.15em; opacity: .7; transition: transform .15s; }
.site-nav .nav-top[aria-expanded="true"] .nav-caret { transform: rotate(180deg); color: var(--accent); opacity: 1; }
.site-nav .nav-top.is-parent { color: var(--ink); border-bottom-color: var(--accent-pure); }
.site-nav .nav-top.is-parent .ic { color: var(--accent); }
.nav-menu {
  position: fixed; z-index: 1000;
  min-width: 200px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.nav-menu[hidden] { display: none; }
.nav-menu a {
  display: flex; align-items: center; gap: .6em;
  padding: 10px 12px;
  font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav-menu a { border-radius: 4px; }
.nav-menu a::after { content: "→"; margin-left: auto; padding-left: 1.2em; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; color: var(--accent); }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--accent-wash); color: var(--ink); }
.nav-menu a:hover::after, .nav-menu a:focus-visible::after { opacity: 1; transform: none; }
.nav-menu a[aria-current="page"] { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent-pure); }
.nav-menu .ic { width: 1.45em; height: 1.45em; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 34px 60px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.grid { display: grid; gap: var(--gap); }
.grid-two     { grid-template-columns: 1fr 1fr; }

@media (max-width: 860px) {
  .grid-two { grid-template-columns: 1fr; }
}


/* ==========================================================================
   PAGE BANNERS — an illustration from assets/banners/ behind each page's
   heading. Always dark, whatever the theme, so the heading is always white;
   a scrim on the left keeps it legible and lets the picture show on the
   right. Drawn by tools/make-banners.js.
   ========================================================================== */
.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #061822;
  color: #EEF5F8;
  border-bottom: 1px solid var(--line);
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--banner) 70% center / cover no-repeat;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 12, 18, .94) 0%, rgba(3, 12, 18, .74) 36%, rgba(3, 12, 18, .1) 68%, transparent 100%),
    linear-gradient(0deg, rgba(3, 12, 18, .4), transparent 45%);
}
.banner-meetups     { --banner: url(../banners/meetups-original.webp); }   /* original photo; the graded one is meetups.jpg */
.banner-meetups::before { background-position: 70% 38%; }
.banner-sats-and-coffee { --banner: url(../banners/meetups-original.webp); }
.banner-sats-and-coffee::before { background-position: 70% 38%; }
/* the original photograph, linked from Wikimedia Commons (public domain); the graded copy is still at ../banners/businesses.jpg */
.banner-businesses  { --banner: url(https://commons.wikimedia.org/wiki/Special:FilePath/Doumar%27s_Barbecue_from_northeast.jpg?width=2000); }
.banner-businesses::before { background-position: 70% 40%; }
.banner-social      { --banner: none; }          /* plain for now: the waterfront-bar photo is assets/banners/social.jpg, unused */
.banner-conferences { --banner: url(../banners/conferences-original.webp); }   /* original photo; the graded one is conferences.jpg */
.banner-conferences::before { background-position: 70% 40%; }
.banner-resources   { --banner: url(../banners/resources-color.webp); }   /* colourised, mast removed; the graded one is resources.jpg */
/* the Cape Henry photograph is tall: room for the lantern and the shore both */
.banner-resources::before { background-position: 70% 4%; }
.banner-resources .banner-inner { min-height: 330px; }
/* Adoption news sits under Resources and borrows its photograph */
.banner-news        { --banner: url(../banners/resources-color.webp); }
.banner-news::before { background-position: 70% 4%; }
.banner-credit {
  position: absolute;
  right: 14px;
  bottom: 8px;
  margin: 0;
  max-width: 60%;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: .04em;
  text-align: right;
  color: rgba(232, 241, 245, .55);
  text-shadow: none;
}
.banner-credit a { color: inherit; text-decoration-color: rgba(232, 241, 245, .3); }
@media (max-width: 760px) { .banner-credit { position: static; text-align: left; max-width: none; padding: 0 16px 10px; } }
.banner-memes       { --banner: url(../banners/memes.svg); }
/* the original photograph, linked from Wikimedia Commons (public domain); the graded copy is still at ../banners/about.jpg */
.banner-about       { --banner: url(../banners/about-norfolk.webp); }   /* downtown Norfolk at dusk, public domain, kept in the site */
.banner-about::before { background-position: 60% 52%; }
/* Personal projects sits under About, so it shares the About photo until it has one of its own */
.banner-projects { --banner: url(../banners/about-norfolk.webp); }
.banner-projects::before { background-position: 30% 52%; }
/* Contact borrows the drawn harbour from the home page until it has a photograph of its own */
.banner-contact { --banner: url(../banners/home.svg); }
.banner-contact::before { background-position: 70% 100%; }

.banner-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 58px 16px 54px;
  min-height: 250px;
  display: flex;
  align-items: center;
}
.banner-copy { max-width: 680px; }
.banner h1 {
  font-size: clamp(32px, 5.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .5);
}
.banner .lede { color: rgba(232, 241, 245, .88); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.banner .lede b { color: #fff; }
/* a pull quote under the lede (America 250) */
.hero-quote { margin: 20px 0 0; padding: 2px 0 2px 16px; max-width: 600px; border-left: 3px solid var(--accent-pure); }
.hero-quote p { margin: 0; font-family: var(--serif, Spectral, Georgia, serif); font-style: italic; font-size: 17px; line-height: 1.5; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.hero-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 12px; letter-spacing: .06em; color: rgba(232, 241, 245, .75); }

/* the front page puts the next-meetup card on the picture, beside the heading */
.banner-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding-block: 54px 50px;
}
.banner-split .banner-copy { max-width: 560px; }
.banner .next-hero { color: var(--ink); text-shadow: none; }
@media (max-width: 900px) { .banner-split { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 760px) {
  .banner-inner { padding-block: 40px 36px; min-height: 0; }
  .banner::after { background: linear-gradient(180deg, rgba(3, 12, 18, .78), rgba(3, 12, 18, .88)); }
}

/* ---- maps ---- */
.meetups-top { align-items: stretch; }
.meetups-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.meetups-side .next-hero { flex: none; }
.panel-upcoming { flex: 1; }
.upcoming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.up {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dotted var(--line);
}
.up:last-child { border-bottom: 0; }
.up-date { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.up-main { display: flex; flex-direction: column; min-width: 0; }
.up-main b { font-size: 13.5px; }
.up-main span { font-size: 11.5px; color: var(--ink-2); }
.up-cd { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 560px) {
  .up { grid-template-columns: 88px minmax(0, 1fr); gap: 2px 12px; }
  .up-cd { grid-column: 2; }
}
.resource-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.resource-list li { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px dotted var(--line); font-size: 13.5px; }
.resource-list li:last-child { border-bottom: 0; }
.resource-list li a { color: var(--ink); font-weight: 600; text-decoration: none; }
.resource-list li a:hover { color: var(--accent); text-decoration: underline; }
.resource-list li span { font-size: 12px; color: var(--ink-3); }
.resource-list .resource-empty { color: var(--ink-3); font-family: var(--serif); font-style: italic; }

/* ---------- deck cards (Sats & Coffee presentations and resources) ---------- */
.xcard-groups { display: flex; flex-direction: column; gap: 22px; }
.xcard-group h3 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.xcard-group h3 .ic { width: 1.15em; height: 1.15em; color: var(--accent); }
.xcard-group h3 small { margin-left: auto; font: 500 11px var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.xcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.xcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: calc(var(--r) + 3px);
  color: var(--ink); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.xcard:hover, .xcard:focus-visible { transform: translateY(-3px); border-color: var(--accent-pure); box-shadow: var(--shadow); text-decoration: none; }
.xcard-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.xcard-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform .35s ease; }
.xcard:hover .xcard-thumb img { transform: scale(1.04); }
.xcard-play {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-pure); color: #0B1E27;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.85); transition: opacity .18s, transform .18s;
}
.xcard:hover .xcard-play, .xcard:focus-visible .xcard-play { opacity: 1; transform: none; }
.xcard-play .ic { width: 16px; height: 16px; stroke-width: 2; }
.xcard-body { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px 15px; flex: 1; }
.xcard-title { font-family: var(--serif); font-size: 17px; line-height: 1.25; font-weight: 600; }
.xcard:hover .xcard-title { color: var(--accent); }
.xcard-desc { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.xcard-meta { margin-top: auto; padding-top: 6px; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.xcard-soon { border-color: color-mix(in srgb, var(--accent-pure) 55%, var(--line)); background: color-mix(in srgb, var(--accent-pure) 6%, var(--panel-2)); }

#map, #shop-map { scroll-margin-top: 156px; }
.map-box.map-box-side { height: 500px; }
.panel-dir .merchants { max-height: 470px; }
@media (max-width: 680px) { .map-box.map-box-side { height: 340px; } }

/* one finger scrolls the page, two move the map (see touchGuard in app.js) */
.leaflet-container.map-guard { touch-action: pan-x pan-y !important; }
.map-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 1100;
  transform: translate(-50%, 6px);
  padding: 7px 13px;
  background: rgba(3, 12, 18, .86);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.map-hint.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- the accepting-bitcoin figures, in the Local businesses banner ---- */
.banner-inner { justify-content: space-between; gap: 32px; }
.banner-stats {
  margin-top: 20px;
  width: min(100%, 560px);
  padding: 12px 16px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 20px;
  background: rgba(3, 12, 18, .62);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-shadow: none;
}
.banner-stats .spend-big { gap: 10px; }
.banner .banner-stats .spend-n { color: #FFB347; font-size: clamp(34px, 4.2vw, 46px); }
.banner .banner-stats .spend-u { color: rgba(232, 241, 245, .72); font-size: 10px; }
.banner .banner-stats .spend-sub { grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .16); }
.banner .banner-stats .spend-sub > div { background: rgba(3, 12, 18, .72); padding: 6px 9px; }
.banner .banner-stats .spend-sub b { color: #fff; font-size: 13px; }
.banner .banner-stats .spend-sub span { color: rgba(232, 241, 245, .72); font-size: 10px; }
.banner .banner-stats .tag { grid-column: 1 / -1; justify-self: start; color: rgba(232, 241, 245, .78); border-color: rgba(255, 255, 255, .26); }
@media (max-width: 560px) { .banner-stats { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .banner-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ---- the next conference: one panel, the size of a third of the page ---- */
.conf-top { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.conf-next { align-self: stretch; }
.conf-photo {
  position: relative;
  margin: 0;
  min-height: 280px;
  overflow: hidden;
  background: #04111A;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.conf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
.conf-photo figcaption {
  position: absolute;
  right: 0; bottom: 0;
  padding: 18px 12px 7px 26px;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-align: right;
  background: linear-gradient(90deg, transparent, rgba(3, 12, 18, .7) 40%);
}
.conf-photo figcaption a { color: rgba(232, 241, 245, .7); text-decoration-color: rgba(232, 241, 245, .3); }
.conf-photo figcaption a:hover { color: #fff; }
@media (max-width: 900px) { .conf-top { grid-template-columns: 1fr; } .conf-photo { min-height: 220px; } }

/* ---------- masthead ---------- */
.masthead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding-block: 8px 6px;
}
@media (max-width: 900px) { .masthead { grid-template-columns: 1fr; gap: 24px; } }

.masthead h1 {
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 800;
}

.lede {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 54ch;
}
.lede b { color: var(--ink); font-weight: 600; }
.ul { border-bottom: 1px solid var(--accent-pure); padding-bottom: 1px; }

.mast-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--ink);
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent-pure); border-color: var(--accent-pure); color: #0B1E27; }
.btn-primary:hover { color: #0B1E27; filter: brightness(1.07); }
.btn-sm { padding: 7px 12px; font-size: 11px; align-self: flex-start; }

/* ---------- panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  box-shadow: var(--shadow);
}
.panel-wide { width: 100%; }

.p-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.p-head h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
}

.tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.tag-accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent-pure) 45%, transparent); background: var(--accent-wash); }
.tag-edit { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }

.p-gloss {
  margin: -2px 0 0;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
}
.p-gloss b { color: var(--ink); font-weight: 600; }
.p-gloss em { font-style: italic; }

.p-foot {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}

/* section rules — a chart's latitude line */
.section-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 -8px;
  scroll-margin-top: 130px;     /* clear the sticky board and its nav row */
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.section-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ==========================================================================
   METERS — the growth goal
   ========================================================================== */
.meter {
  position: relative;
  height: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-pure) 55%, transparent), var(--accent-pure));
  transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }

/* ---------- stat lists ---------- */
.stat-list { margin: 0; display: flex; flex-direction: column; gap: 0; }
.stat-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
}
.stat-list > div:last-child { border-bottom: 0; }
.stat-list-tight > div { padding: 5px 0; }
.stat-list dt { font-size: 12px; color: var(--ink-2); min-width: 0; }
.stat-list dd { margin: 0; font-size: 13px; font-weight: 500; text-align: right; white-space: nowrap; }
.stat-list dd.up   { color: var(--up); }
.stat-list dd.down { color: var(--down); }
.stat-list dd small { font-family: var(--sans); font-size: 10.5px; color: var(--ink-3); font-weight: 400; }

/* ==========================================================================
   HARBOUR ALMANAC — a chart-margin strip of local conditions
   ========================================================================== */
.almanac {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.alm-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
}
.alm { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.alm-k {
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal);
}
.alm-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.alm-note {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 88ch;
  text-wrap: pretty;
}

/* ==========================================================================
   THE ENSIGN — the shipyard quip
   ========================================================================== */
.ensign {
  border-left: 2px solid var(--accent-pure);
  padding: 4px 0 4px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ensign p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(16px, 2.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 66ch;
  text-wrap: pretty;
}
.ensign p b { color: var(--ink); font-weight: 600; }

/* Why the 757: an opening line and three landmarks, each a figure, a name and why it fits */
.w757-lede { margin: 0; max-width: 70ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.w757 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.w757-item { padding: 16px 18px 18px; background: var(--panel); border: 1px solid var(--line-soft); border-top: 2px solid var(--accent-pure); border-radius: var(--r); }
.w757-item b { display: block; font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.w757-item h3 { margin: 8px 0 4px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.w757-item p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
html[data-skin="fallout"] .w757-item { border-radius: 0; }
.ensign-turn { color: var(--ink) !important; }

/* ==========================================================================
   THE MAP
   ========================================================================== */
.map-box {
  width: 100%;
  height: 440px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
  z-index: 0;                 /* keep Leaflet panes under the sticky board */
}
@media (max-width: 680px) { .map-box { height: 340px; } }

.map-box-sm { height: 300px; }

.map-key { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 11px; color: var(--ink-3); }
.map-key span { display: inline-flex; align-items: center; gap: 6px; }
.key-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.key-meet { background: var(--accent-pure); }
.key-shop { background: var(--teal); }
.key-ln   { background: var(--up); }

/* Dark mode inverts the OSM tiles rather than paying for a dark basemap.
   Only the tile pane is filtered — markers and popups sit in other panes
   and keep their real colours. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.94) contrast(.88) saturate(.65);
  }
}
:root[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.94) contrast(.88) saturate(.65);
}

/* Leaflet chrome, dressed for the chart table */
.leaflet-container { font-family: var(--sans); background: var(--panel-2); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.leaflet-popup-content { margin: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.leaflet-popup-content b { font-size: 13.5px; }
.leaflet-popup-content .pop-sub { color: var(--ink-3); font-size: 11.5px; }
.leaflet-popup-content .pop-ln { color: var(--up); font-size: 11.5px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-3); }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--panel) 86%, transparent) !important;
  color: var(--ink-3) !important;
  font-size: 9.5px !important;
}
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-bar a {
  background: var(--panel);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.leaflet-bar a:hover { background: var(--panel-2); color: var(--accent); }

/* ==========================================================================
   BEYOND THE 757 — conference, joint month, comms
   ========================================================================== */
.grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .grid-three { grid-template-columns: 1fr 1fr; }
  .grid-three > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .grid-three { grid-template-columns: 1fr; }
  .grid-three > :last-child { grid-column: auto; }
}

.conf-name { margin: 0; font-size: clamp(19px, 2.6vw, 24px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.conf-when {
  margin: -4px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--accent);
}
.conf-note { margin: 0; font-family: var(--serif); font-size: 13px; line-height: 1.5; color: var(--ink-2); }

.panel-joint {
  border-color: color-mix(in srgb, var(--up) 34%, var(--line));
  background: radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--up) 9%, transparent), transparent 62%), var(--panel);
}

.joint-notice {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--up) 40%, transparent);
  border-left: 2px solid var(--up);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--up) 8%, transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.comms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.comm {
  display: grid;
  grid-template-columns: 100px 1fr;   /* room for the icon and TELEGRAM on one line */
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dotted var(--line);
}
.comm:last-child { border-bottom: 0; }
.comm-k { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
.comm-v { font-size: 13px; min-width: 0; }
.comm-v a { color: var(--ink); text-decoration: none; }
.comm-v a:hover { color: var(--accent); text-decoration: underline; }
.comm-v em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); margin-top: 1px; }

/* ==========================================================================
   RESIDENT EXPERTS
   ========================================================================== */
/* The figures are screens, and a Matrix screen is dark whatever page it sits
   on — the way a monitor is on a white desk. Deliberately one palette in both
   themes: in a light version, brightness becomes dark ink and the render
   turns into a photographic negative. */
:root { --mx-bg: #04120C; --mx-on: #2FD07E; --mx-lead: #CFFFE4; --mx-off: #1E5B3E; --mx-edge: rgba(47,208,126,.5); }

.experts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.expert { background: var(--panel); display: flex; flex-direction: column; min-width: 0; }

/* the figure leads the card, full width */
.expert-face {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-height: 320px;
  overflow: hidden;
  background: var(--mx-bg);
  border-bottom: 1px solid var(--line);
  cursor: crosshair;
}
.expert-face canvas,
.expert-face .mx,
.expert-face img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.expert-face img { object-fit: cover; }
.ai-av .ai-cursor { animation: ai-blink 1.1s steps(1) infinite; }
@keyframes ai-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ai-av .ai-cursor { animation: none; } }
.expert-id {
  position: absolute;
  top: 9px; left: 11px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mx-on);
  opacity: .8;
  pointer-events: none;
}

.expert-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.expert-field { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); }
.expert-body h3 { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.expert-body h3 a { color: var(--ink); text-decoration: none; }
.expert-body h3 a:hover { color: var(--accent); }
.expert-body p { margin: 1px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
/* a redacted name: a black bar, a hair off level, with a torn end */
.redact {
  display: inline-block;
  height: .95em;
  vertical-align: -.12em;
  background: #000;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
  transform: rotate(-.8deg);
  clip-path: polygon(0 8%, 100% 0, 97% 52%, 100% 100%, 2% 92%, 0 50%);
}
.expert-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.expert-tags span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 1px 7px;
}

/* ==========================================================================
   THE MILLION METER — a loading bar along the bottom of the board
   ========================================================================== */
/* Sits on the very top edge of the board — clear of the page nav, whose
   active-page underline used to land right on top of it. */
.mil-bar {
  height: 2px;
  width: 100%;
  background: transparent;
  position: relative;
  overflow: hidden;
}
.mil-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-pure) 70%, transparent));
  opacity: .8;
  transition: width 1s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .mil-bar-fill { transition: none; } }

/* ==========================================================================
   MEMES
   ========================================================================== */
.memes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}
.memes::-webkit-scrollbar { width: 6px; }
.memes::-webkit-scrollbar-track { background: var(--panel-2); border-radius: 999px; }
.memes::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.meme {
  position: relative;
  display: block;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel-2);
  text-decoration: none;
  aspect-ratio: 1 / 1;
  transition: border-color .15s;
}
.meme:hover { border-color: var(--accent); }
.meme img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 8px 6px;
  font-size: 10.5px;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* on its own page the gallery gets room: bigger tiles, no inner scroll */
.memes-page {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.memes-page .meme-cap { font-size: 12px; padding: 22px 10px 8px; }

/* ---- pictures hotlinked from X: just the image, shown whole, in columns ---- */
/* the meme wall: polaroids pinned to a cork board (renderMemeWall in app.js) */
.mw-board {
  --cork: #B88A57;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 34px 30px;
  padding: 40px 22px 44px;
  border-radius: var(--r);
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .10) 0 1px, transparent 1.5px) 0 0 / 9px 11px,
    radial-gradient(circle at 70% 60%, rgba(60, 30, 5, .22) 0 1px, transparent 1.6px) 0 0 / 7px 8px,
    radial-gradient(circle at 40% 80%, rgba(60, 30, 5, .14) 0 1.5px, transparent 2px) 0 0 / 13px 12px,
    var(--cork);
  box-shadow: inset 0 0 0 6px #7A5530, inset 0 0 0 7px rgba(0, 0, 0, .25), inset 0 6px 24px rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .mw-board { --cork: #8A6440; }
.mw-card {
  position: relative; flex: none;
  width: 214px; margin: 0;
  padding: 10px 10px 0;
  background: #FBFAF6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 22px rgba(40, 20, 0, .35);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .2s ease, box-shadow .2s ease;
}
/* a strip of tape across the top */
.mw-card::before {
  content: ""; position: absolute; z-index: 2; top: -11px; left: 50%;
  width: 84px; height: 24px; margin-left: -42px;
  background: rgba(255, 246, 214, .72);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  transform: rotate(calc(var(--tilt, 0deg) * -1.4));
}
.mw-card:hover, .mw-card:focus-within {
  z-index: 3;
  transform: rotate(0deg) scale(1.05) translateY(-4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 22px 40px rgba(40, 20, 0, .45);
}
.mw-shot {
  position: relative; display: block; width: 100%; aspect-ratio: 1;
  padding: 0; border: 0; background: #111; cursor: zoom-in; overflow: hidden;
}
.mw-vid .mw-shot { cursor: pointer; }
.mw-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mw-shot:focus-visible { outline: 3px solid var(--accent-pure); outline-offset: 2px; }
.mw-play {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 13px;
  border-radius: 50%; background: rgba(247, 147, 26, .92); color: #1A0E00;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45); transition: transform .15s;
}
.mw-play svg { display: block; width: 100%; height: 100%; }
/* an X post: a black disc with the X mark, and a small orange play notch on its edge */
.mw-play-x { padding: 14px; background: #000; color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); }
.mw-notch {
  position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; padding: 4px 3px 4px 5px;
  border-radius: 50%; background: #F7931A; color: #000; box-shadow: 0 0 0 2px #000;
}
.mw-card:hover .mw-play { transform: scale(1.1); }
.mw-cap {
  min-height: 48px; padding: 8px 2px 10px;
  font: 400 15px/1.2 'Permanent Marker', 'Comic Sans MS', cursive;
  color: #1E2A33; text-align: center;
}
.mw-cap small { display: block; margin-top: 2px; font: 600 10.5px var(--mono); color: #6B7A85; }
@media (max-width: 520px) {
  .mw-board { gap: 26px 14px; padding: 30px 10px 34px; }
  .mw-card { width: calc(50% - 10px); padding: 7px 7px 0; }
  .mw-cap { font-size: 13px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .mw-card, .mw-play { transition: none; } }

/* the pop-up player (openPlayer in app.js), for every video list and the meme wall */
.mwp { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px 64px; background: rgba(6, 10, 16, .94); overflow-y: auto; }
.mwp-stage { width: min(960px, 100%); display: flex; flex-direction: column; gap: 12px; }
.mwp-x .mwp-stage { width: min(550px, 100%); }
.mwp-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.mwp-x .mwp-frame { aspect-ratio: auto; height: min(680px, calc(100vh - 190px)); background: #fff; }
.mwp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mwp-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: #E8F1F5; }
.mwp-info b { font-size: 16px; font-weight: 700; }
.mwp-info em { font-style: normal; font-size: 13px; color: rgba(232, 241, 245, .7); }
.mwp-count { margin-left: auto; font: 500 11px var(--mono); letter-spacing: .08em; color: rgba(232, 241, 245, .55); }
.mwp-info p { flex: 1 0 100%; margin: 0; font-size: 13px; line-height: 1.5; color: rgba(232, 241, 245, .78); }
.mwp-nav {
  position: fixed; top: 50%; width: 46px; height: 46px; margin-top: -23px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; font: 400 30px/1 sans-serif; cursor: pointer;
}
.mwp-nav:hover { background: rgba(0, 0, 0, .85); border-color: #fff; }
.mwp-prev { left: 10px; }
.mwp-next { right: 10px; }
@media (max-width: 640px) {
  .mwp { padding: 60px 10px 70px; }
  .mwp-nav { top: auto; bottom: 12px; margin: 0; }
  .mwp-prev { left: calc(50% - 56px); }
  .mwp-next { right: calc(50% - 56px); }
}

.pics:not(:empty) { margin-top: 22px; }
.pic {
  display: block;
  break-inside: avoid;
  margin: 0 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel-2);
}
.pic img { display: block; width: 100%; height: auto; }
.pic-btn {
  position: relative;
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; font: inherit; color: inherit;
}
.pic:hover { border-color: var(--accent); }
/* a credit worked into the picture's bottom-right corner, like a watermark */
.pic-cap, .lb-cap {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 8px; border-radius: 4px;
  font: 600 12px/1.5 var(--sans, system-ui, sans-serif); letter-spacing: .02em;
  color: rgba(255, 255, 255, .92); background: rgba(0, 0, 0, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  pointer-events: none;
}
.lb-cap[hidden] { display: none; }
.pic-btn:focus-visible { outline: 2px solid var(--accent-pure, var(--accent)); outline-offset: -2px; }
/* every picture grid on the site (renderPics): small thumbnails, cropped from the top so each
   one shows its title, a magnifier in the corner; a tap or click opens the whole picture enlarged */
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 210px)); gap: 14px; }
.pics .pic { margin: 0; }
.pics .pic-btn { aspect-ratio: 4 / 5; }
.pics .pic img { height: 100%; object-fit: cover; object-position: top; transition: transform .2s; }
.pics .pic:hover img { transform: scale(1.04); }
.pics .pic-btn::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2710.5%27 cy=%2710.5%27 r=%276%27/%3E%3Cpath d=%27M15 15l5 5M10.5 8v5M8 10.5h5%27/%3E%3C/svg%3E") center / 15px no-repeat;
}
.pics .pic-cap { font-size: 10.5px; right: 6px; bottom: 6px; padding: 1px 6px; }
@media (max-width: 520px) { .pics { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* the enlarged view (openLightbox in app.js) */
.lb { position: fixed; inset: 0; z-index: 3000; background: rgba(6, 10, 16, .92); }
.lb[hidden] { display: none; }
body.lb-open { overflow: hidden; }
.lb-scroll { position: absolute; inset: 0; overflow: auto; display: flex; overscroll-behavior: contain; }
.lb-frame { position: relative; margin: auto; flex: none; line-height: 0; }
.lb-img { display: block; max-width: none; background: #fff; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lb-zoomed .lb-img { cursor: grab; }
.lb-scroll.lb-drag .lb-img { cursor: grabbing; }
.lb-close {
  position: absolute; top: 14px; right: 18px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .55); color: #fff;
  font: 400 28px/1 sans-serif; cursor: pointer;
}
.lb-close:hover { background: rgba(0, 0, 0, .85); border-color: #fff; }
.lb-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  margin: 0; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; color: #fff; background: rgba(0, 0, 0, .6); pointer-events: none;
}

/* the Videos tab: group names down the left, sticky, the videos beside them */
.video-grid.has-nav {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.vid-cols { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.vid-col { scroll-margin-top: 156px; }
.vid-nav {
  position: sticky; top: 130px;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 2px solid var(--line);
}
.vid-nav a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-left: -2px; padding: 8px 12px;
  border-left: 2px solid transparent;
  font-size: 13.5px; line-height: 1.3;
  color: var(--ink-3); text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.vid-nav a span { font-size: 11px; opacity: .7; }
.vid-nav a:hover { color: var(--ink); background: var(--panel-2); }
.vid-nav a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
@media (max-width: 760px) {
  .video-grid.has-nav { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vid-nav {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; border-left: 0;
  }
  .vid-nav a {
    margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  }
  .vid-nav a[aria-current] { border-color: var(--accent); }
}

/* ==========================================================================
   ADOPTION REPORT FORM
   ========================================================================== */
.report { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: 400 13px/1.5 var(--sans);
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 11px;
  width: 100%;
  min-width: 0;
}
.field textarea { resize: vertical; font-family: var(--sans); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-pure); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }

/* the Christmas RSVP sits under the joint-month facts */
.xmas { margin-top: 16px; padding-top: 16px; border-top: 1px dotted var(--line); }
.field[hidden] { display: none; }
.xmas-tally { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.xmas-tally[hidden] { display: none; }
.picks { display: flex; flex-wrap: wrap; gap: 7px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.field .pick span {
  display: inline-block;
  padding: 7px 12px;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  user-select: none;
}
.pick:hover span { border-color: var(--ink-3); }
.pick input:checked + span { color: var(--ink); border-color: var(--accent-pure); background: color-mix(in srgb, var(--accent-pure) 14%, var(--panel-2)); }
.pick input:focus-visible + span { outline: 2px solid var(--accent-pure); outline-offset: 2px; }

.report-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.report-hint { font-size: 11.5px; color: var(--ink-3); }
.report-hint.bad { color: #c0392b; font-weight: 600; }
html[data-theme="dark"] .report-hint.bad { color: #ff7b6b; }

/* shown at the top of a form that is not switched on */
.form-notice {
  grid-column: 1 / -1;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, #e08a00 45%, transparent);
  border-left: 3px solid #e08a00;
  border-radius: var(--r);
  background: color-mix(in srgb, #e08a00 10%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}

.report-out { display: flex; flex-direction: column; gap: 10px; }
.report-out[hidden] { display: none; }   /* a class's display would otherwise beat the hidden attribute */
.report-out pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 15px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   SPEND IT HERE
   ========================================================================== */
.grid-spend { grid-template-columns: 1fr 1.15fr; }
@media (max-width: 860px) { .grid-spend { grid-template-columns: 1fr; } }

.spend-big { display: flex; align-items: baseline; gap: 12px; }
.spend-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(46px, 9vw, 70px);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--accent);
}
.spend-u {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}

.spend-sub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.spend-sub > div { background: var(--panel); padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.spend-sub b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.spend-sub span { font-size: 10.5px; color: var(--ink-3); line-height: 1.35; }

.goal { display: flex; flex-direction: column; gap: 6px; }
.goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.goal-head .k { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.goal-head .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--ink-2); }

.p-foot code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: 1px 5px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---- the directory ---- */
.merchants { max-height: 430px; overflow-y: auto; padding-right: 4px; }
.merchants::-webkit-scrollbar { width: 6px; }
.merchants::-webkit-scrollbar-track { background: var(--panel-2); border-radius: 999px; }
.merchants::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.mc-city {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 12px 0 5px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
}
.mc-city:first-child { padding-top: 0; }
.mc-city span { font-family: var(--mono); color: var(--ink-3); letter-spacing: 0; }

.mc-list { list-style: none; margin: 0 0 2px; padding: 0; }
.mc-list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--line);
}
.mc-list li:last-child { border-bottom: 0; }
.mc-name { font-size: 13px; min-width: 0; }
.mc-name a { color: var(--ink); text-decoration: none; }
.mc-name a:hover { color: var(--accent); text-decoration: underline; }
.mc-kind {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
.mc-ln { font-size: 11px; flex: none; }

/* ==========================================================================
   SUB-PAGE HEADINGS — a lighter masthead for Resources, Orange-pill, etc.
   ========================================================================== */
.page-head { padding-block: 8px 2px; max-width: 760px; }
.page-head h1 {
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 800;
}

.about-quote {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.45;
  color: var(--ink);
  border-left: 2px solid var(--accent-pure);
  padding-left: 16px;
}

/* ==========================================================================
   COMMUNITY
   ========================================================================== */
/* ---- talk archive: one block per year ---- */
.talk-years { display: flex; flex-direction: column; }
.talk-year {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.talk-year:first-child { border-top: 0; padding-top: 4px; }
.talk-year h3 {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--accent);
}
.talk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
@media (max-width: 560px) { .talk-year { grid-template-columns: 1fr; } }

/* ---- masthead: the next meetup, the whole point of the page ---- */
.next-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-pure) 40%, var(--line));
  border-radius: var(--r);
  background:
    radial-gradient(130% 150% at 100% 0%, var(--accent-wash), transparent 62%),
    var(--panel);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.next-hero:hover { border-color: var(--accent-pure); }

.next-group {
  margin: 0;
  font-size: clamp(20px, 3.2vw, 27px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.next-date {
  margin: -4px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -.01em;
}
.next-rows { margin: 6px 0 0; display: flex; flex-direction: column; gap: 0; }
.next-rows > div {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
}
.next-rows > div:last-child { border-bottom: 0; }
.next-rows dt { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.next-rows dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
}
.next-cta {
  margin-top: auto;
  padding-top: 4px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.next-hero:hover .next-cta { color: var(--accent); }

/* ---- standalone section head (no panel around it) ---- */
.p-head-bare { margin-bottom: 2px; }
.p-head-bare h2 { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.p-gloss-wide { max-width: 78ch; margin-bottom: 4px; }

/* ---- group cards ---- */
/* two up, so four groups fill a clean 2×2 and long venue addresses get room */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 12px;
}
@media (max-width: 800px) { .groups-grid { grid-template-columns: 1fr; } }
.gcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--teal);
  border-radius: var(--r);
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  box-shadow: var(--shadow);
}
.gcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gcard-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.gcard-head h3 a { color: var(--ink); text-decoration: none; }
.gcard-head h3 a:hover { color: var(--accent); }
.garea { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.gwhen {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--panel-2);
  border-radius: var(--r);
}
.gwhen b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--accent);
}
.gwhen span { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.gwhen em {
  font-style: normal;
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.gvenue {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  padding-top: 8px;
  border-top: 1px dotted var(--line);
}
.gvenue span {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}

.gformat { margin: 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.gnote { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }

.glinks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px; }
.glinks a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-2);
}
.glinks a:hover { border-color: var(--accent); color: var(--accent); }
.glinks a.glink-own {
  border-color: var(--accent-pure);
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}

.talk {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dotted var(--line);
}
.talk:last-child { border-bottom: 0; }
.talk-date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.talk-title { font-size: 12.5px; color: var(--ink); line-height: 1.4; min-width: 0; }
.talk-who {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--teal);
  border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---- curriculum decks ---- */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.deck {
  background: var(--panel);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .15s;
}
.deck:hover { background: var(--accent-wash); }
.deck-n { font-family: var(--mono); font-size: 10.5px; color: var(--accent); }
.deck h3 { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.deck p { margin: 0; font-family: var(--serif); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.deck-by { margin-top: auto; padding-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); }

/* ---- tabs: a rule with one tab lit; the panels under it swap ---- */
.tabs {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 10px 0 11px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent-pure); }
.tab .ic { width: 1.35em; height: 1.35em; vertical-align: 0; }
.tab[aria-selected="true"] .ic { color: var(--accent); }
[data-tabpanel][hidden] { display: none; }

/* ---- hub: a grid of large colour tiles that shrinks to a row of pills ----
   Each tile sets its own colours (--ta to --tb) inline. Picking one shows its
   panel and the bar gains .is-compact. */
.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  min-height: 210px;
  padding: 20px 20px 18px;
  font: inherit;
  text-align: left;
  color: #fff;
  text-decoration: none;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, .26), transparent 55%),
    linear-gradient(145deg, var(--ta), var(--tb));
  box-shadow: 0 12px 28px -16px var(--tb), 0 1px 2px rgba(0, 0, 0, .14);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, opacity .2s;
  animation: tile-in .5s both cubic-bezier(.2, .8, .2, 1);
}
.tile:nth-child(3) { animation-delay: .06s; }
.tile:nth-child(4) { animation-delay: .12s; }
.tile:nth-child(5) { animation-delay: .18s; }
.tile:nth-child(n+6) { animation-delay: .24s; }
.tile:hover { transform: translateY(-5px); box-shadow: 0 20px 34px -16px var(--tb), 0 1px 2px rgba(0, 0, 0, .14); }
.tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 16px; }
.tile > .ic {
  position: absolute;
  z-index: -1;
  right: -16px;
  top: -12px;
  width: 150px;
  height: 150px;
  stroke-width: 1.05;
  color: #fff;
  opacity: .2;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.tile:hover > .ic { transform: rotate(-7deg) scale(1.1); opacity: .3; }
.tile-name { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; text-shadow: 0 1px 8px rgba(0, 0, 0, .18); }
.tile-desc { max-width: 24ch; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.tile-count {
  order: -1;
  margin-bottom: auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hub:not(.is-compact) .tile-all { display: none; }

/* a panel is open: the tiles become pills, the open one lit, and All goes back */
.hub.is-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  margin: -4px -4px 14px;
}
.hub.is-compact .tile {
  flex: none;
  flex-direction: row;
  align-items: center;
  min-height: 0;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  opacity: .62;
  box-shadow: none;
  animation: none;
}
.hub.is-compact .tile:hover { opacity: 1; transform: none; }
.hub.is-compact .tile[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ta); }
.hub.is-compact .tile > .ic { position: static; z-index: auto; width: 16px; height: 16px; stroke-width: 1.8; opacity: 1; transform: none; }
.hub.is-compact .tile-name { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-shadow: none; white-space: nowrap; }
.hub.is-compact .tile-desc, .hub.is-compact .tile-count { display: none; }
.hub.is-compact .tile.tile-all {
  background: var(--panel);
  color: var(--ink-2);
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: none;
}
.hub.is-compact .tile.tile-all:hover { color: var(--accent); }
.hub.is-compact .tile-all > .ic { transform: scaleX(-1); }

/* a panel that is itself a hub (Start Here, Toolkit): no card around it, a second
   row of tiles on top, and the chosen section's own card underneath */
.panel-hub { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
[data-subpanel][hidden] { display: none; }
.ask { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hub-sub { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 6px; }
.hub-sub .tile { min-height: 160px; }
.hub-sub .tile-name { font-size: 22px; }

/* The Toolkit has many categories, so its second row of tiles is a side nav, as in
   the Videos list: the open category on the right, every category down the left.
   (On a narrow screen it stays a single row of pills that scrolls sideways.) */
#tool-hub.is-compact .tile-all { display: none; }
@media (min-width: 761px) {
  #toolkit:has(> #tool-hub.is-compact) {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 14px;
    align-items: start;
  }
  #toolkit:has(> #tool-hub.is-compact) > #tool-hub { grid-column: 1; grid-row: 1 / span 2; }
  #toolkit:has(> #tool-hub.is-compact) > #tool-grid { grid-column: 2; grid-row: 1; min-width: 0; }
  #toolkit:has(> #tool-hub.is-compact) > .p-foot { grid-column: 2; grid-row: 2; }
  #tool-hub.is-compact {
    position: sticky; top: 130px;
    flex-direction: column; flex-wrap: nowrap; gap: 2px;
    margin: 0; padding: 0;
    border-left: 2px solid var(--line);
  }
  #tool-hub.is-compact .tile {
    flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px;
    min-height: 0; margin-left: -2px; padding: 8px 12px;
    overflow: visible;
    border-radius: 0;
    border-left: 2px solid transparent;
    background: transparent;
    box-shadow: none;
    color: var(--ink-3);
    opacity: 1;
    transition: color .15s, background .15s, border-color .15s;
  }
  #tool-hub.is-compact .tile:hover { color: var(--ink); background: var(--panel-2); transform: none; }
  #tool-hub.is-compact .tile > .ic { flex: none; width: 18px; height: 18px; color: var(--ta); }
  #tool-hub.is-compact .tile-name { font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: normal; line-height: 1.25; }
  #tool-hub.is-compact .tile[aria-selected="true"] { color: var(--ink); background: var(--panel-2); border-left-color: var(--ta); box-shadow: none; }
  #tool-hub.is-compact .tile[aria-selected="true"] .tile-name { font-weight: 700; }
  /* the count shrinks to a bare number (the unit is dropped) at the right */
  #tool-hub.is-compact .tile-count { display: block; order: 0; margin: 0 0 0 auto; padding: 0; border: 0; background: none; font-size: 0; letter-spacing: 0; transform: none; }
  #tool-hub.is-compact .tile-count::after { content: attr(data-n); font-size: 11px; font-weight: 500; opacity: .7; }
}
@media (max-width: 760px) {
  #tool-hub.is-compact { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #tool-hub.is-compact::-webkit-scrollbar { display: none; }
}

@keyframes tile-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .tile { min-height: 150px; padding: 16px 16px 15px; }
  .tile > .ic { width: 120px; height: 120px; }
  .tile-name { font-size: 24px; }
  .hub.is-compact .tile { padding: 7px 12px 7px 10px; }
  .hub.is-compact .tile-name { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile { animation: none; transition: none; }
  .tile:hover, .tile:hover > .ic { transform: none; }
}

/* ---- videos: a heading per group, a row of thumbnail cards under it ---- */
.video-grid { display: flex; flex-direction: column; gap: 26px; }
.vid-col h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
/* one card size for every video list on the site (the Resources Videos size): cards do not
   stretch to fill a wide panel; on a phone they take the full width */
.vid-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 240px)); gap: 14px; }
@media (max-width: 560px) { .vid-row { grid-template-columns: 1fr; } }
.vid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  color: inherit;
}
.vid-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 5px;
}
.vid-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-thumb-x { background: linear-gradient(160deg, #0B1E27 0%, #16384a 55%, #B75F05 140%); border-color: var(--line); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
a.vid:hover .vid-thumb img { transform: scale(1.03); }
.vid-thumb .ic {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  padding: 7px;
  border-radius: 50%;
  color: #fff;
  background: rgba(11, 30, 39, .72);
  transition: background .15s;
}
a.vid:hover .vid-thumb .ic { background: var(--accent-pure); color: #0B1E27; }
/* what the link opens: YouTube (red play button), an X post (X mark), or anything else */
.vid-badge {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  transition: transform .15s;
}
.vid-badge svg { display: block; width: 26px; height: 26px; }
.vid-yt .vid-badge { background: #E62117; }
.vid-x .vid-badge { width: 42px; height: 42px; border-radius: 50%; background: #000; border: 1px solid rgba(255, 255, 255, .4); }
.vid-x .vid-badge svg { width: 20px; height: 20px; }
.vid-link .vid-badge { width: 40px; height: 40px; border-radius: 50%; background: rgba(11, 30, 39, .72); }
a.vid:hover .vid-badge { transform: scale(1.1); }
.vid-src {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .vid-badge { transition: none; } }
html[data-skin="fallout"] .vid-badge, html[data-skin="fallout"] .vid-src { border-radius: 0; }
.vid b { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
a.vid:hover b { color: var(--accent); }
.vid em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.vid-note { margin-top: 3px; font-family: var(--serif); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* ---- toolkit: a heading per group, a row of logo cards under it ---- */
.tool-grid { display: flex; flex-direction: column; gap: 26px; }
.tool-col h3 {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tool {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 100%;
  padding: 10px 14px 10px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.tool:hover { border-color: var(--accent); transform: translateY(-1px); }
.tool-logo {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.tool-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tool-logo .ic { width: 38px; height: 38px; overflow: visible; }   /* an inline mark with its own colours, e.g. timechainstats */
.tool-letter { background: var(--accent-wash); font-size: 20px; font-weight: 700; color: var(--accent); }
.tool-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tool-text b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tool-text em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

/* ---------- books (Resources) ---------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.book {
  display: flex;
  gap: 14px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.book:hover { border-color: var(--accent); transform: translateY(-1px); }
.book-cover {
  flex: none;
  width: 84px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--accent-wash);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.book-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book-plain { display: grid; place-items: center; padding: 8px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; letter-spacing: -.01em; }
.book-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.book-text b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.book-text em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.book-text span { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
html[data-skin="fallout"] .book-cover { border-radius: 0; }
html[data-skin="fallout"] .book-cover img { filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(2.4) brightness(.9); transition: filter .2s; }
html[data-skin="fallout"] .book:hover .book-cover img { filter: none; }

/* ---------- quote ---------- */
.quote-block {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.quote-block blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(17px, 2.6vw, 23px);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  max-width: 62ch;
  text-wrap: pretty;
}
.quote-block cite {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.quote-block cite span { font-family: var(--mono); letter-spacing: .02em; text-transform: none; }
.quote-block cite span::before { content: " · "; }

/* ---------- footer ----------
   Always dark, like the banners: a strip of the harbour at dusk settling into
   navy, the site map and sources, and a credit bar. */
.foot {
  position: relative;
  background: #04111A;
  color: #9FB5BF;
  border-top: 1px solid var(--line);
}
.foot-art {
  height: clamp(130px, 19vw, 260px);
  background: url(../banners/footer.svg) center bottom / cover no-repeat;
}
.foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 16px 34px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.4fr;
  gap: 34px;
  font-size: 12.5px;
  line-height: 1.6;
}
.foot p { margin: 0 0 6px; }
.foot a { color: #FFB347; text-decoration-color: rgba(255, 179, 71, .35); }
.foot a:hover { text-decoration-color: #FFB347; }
.foot-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #EEF5F8; margin-bottom: 10px; }
.foot-logo img { display: block; }
.foot-logo span { display: flex; flex-direction: column; line-height: 1.15; }
.foot-logo b { font-size: 17px; letter-spacing: .01em; }
.foot-logo em { font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8CA6B2; }
.foot-note { font-size: 11.5px; color: #7F98A4; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; align-content: start; }
.foot-nav a { color: #DCE9EE; text-decoration: none; font-size: 13px; }
.foot-nav a:hover { color: #FFB347; }
.foot-meta { align-self: start; }
.foot-credit {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 15px 16px 22px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7F98A4;
}
.foot-credit p { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; }
.foot-credit b {
  font-weight: 700;
  letter-spacing: .14em;
  color: #FFD08A;
  text-shadow: 0 0 16px rgba(247, 147, 26, .45);
}
/* the visitor counter (initVisitCounter in app.js): a 90s hit counter, seven rolling wheels */
.hits { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.hits-label { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9FB8C4; }
.hits-wheels {
  display: inline-flex; gap: 2px; padding: 3px;
  background: linear-gradient(180deg, #3A3A3A, #0E0E0E);
  border: 1px solid #000; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 3px 10px rgba(0, 0, 0, .5);
}
.hits-w {
  position: relative; width: 17px; height: 26px; overflow: hidden;
  background: linear-gradient(180deg, #000 0%, #1A1A1A 45%, #000 100%);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -6px 8px rgba(0, 0, 0, .7);
}
/* a glass shine across the top half of each wheel */
.hits-w::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); pointer-events: none; }
.hits-strip { display: flex; flex-direction: column; height: 1100%; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.hits-strip i {
  flex: 1 0 0; display: grid; place-items: center;
  font: 700 17px/1 var(--mono); font-style: normal;
  color: #FFB347; text-shadow: 0 0 6px rgba(247, 147, 26, .85);
}
@media (prefers-reduced-motion: reduce) { .hits-strip { transition: none; } }
html[data-skin="fallout"] .hits-strip i { color: var(--accent); text-shadow: 0 0 6px var(--accent); }
.foot-coin { width: 17px; height: 17px; flex: none; filter: drop-shadow(0 0 6px rgba(247, 147, 26, .6)); }
@media (max-width: 900px) { .foot-inner { grid-template-columns: 1fr 1fr; } .foot-meta { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-inner { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- loading shimmer ---------- */
.loading { color: var(--ink-3); }

/* ==========================================================================
   2026 CONFERENCES — conferences.html
   ========================================================================== */
.cf-tools { gap: 12px; }
.cf-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cf-bar input[type="search"],
.cf-bar select {
  font: 400 13px/1.4 var(--sans);
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 11px;
  min-width: 0;
}
.cf-bar input[type="search"] { flex: 1 1 260px; }
.cf-bar input:focus, .cf-bar select:focus { border-color: var(--accent-pure); outline: none; }

/* All / Upcoming / Held */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; flex: none; }
.seg button {
  font: 600 11px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 14px;
  background: var(--panel);
  color: var(--ink-2);
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent-pure); color: #0B1E27; }

.cf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.cf-check input { accent-color: var(--accent-pure); width: 15px; height: 15px; }
#cf-jump { margin-left: auto; }
.cf-count { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--ink-3); }

/* the list */
.cf-list { display: flex; flex-direction: column; }
.cf-month {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
}
.cf-month:first-child { margin-top: 0; }
.cf-month::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.cf-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.cf-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px 12px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.cf-row.cf-major { border-left-color: var(--accent-pure); }
.cf-row.cf-now   { border-left-color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, var(--line)); }
.cf-row.cf-past .cf-date,
.cf-row.cf-past .cf-main { opacity: .58; }

.cf-date { text-align: center; line-height: 1.15; }
.cf-date b {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--accent);
  white-space: nowrap;
}
.cf-date span { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }

.cf-main { min-width: 0; }
.cf-main h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.cf-meta { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: 12px; color: var(--ink-2); }
.cf-meta span { display: inline-flex; align-items: center; gap: 6px; }
.cf-meta .ic { width: 14px; height: 14px; color: var(--teal); }

.cf-side { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.cf-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag-road { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.cf-when-now { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); background: color-mix(in srgb, var(--up) 10%, transparent); }
.cf-go { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; align-self: center; }
.cf-go .ic { width: 14px; height: 14px; }

/* where the year stands */
.cf-today {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  scroll-margin-top: 166px;
}
.cf-today::before, .cf-today::after { content: ""; flex: 1; height: 1px; background: var(--accent-pure); opacity: .55; }

.cf-none { margin: 8px 0; font-size: 13px; color: var(--ink-2); }

@media (max-width: 700px) {
  .cf-row { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; }
  .cf-side { grid-column: 1 / -1; justify-content: space-between; }
  .cf-tags { justify-content: flex-start; }
  #cf-jump { margin-left: 0; }
}

/* ==========================================================================
   INDIVIDUAL GROUP PAGES
   ========================================================================== */
.chip-v a.plain { color: var(--ink); text-decoration: none; }
.chip-v a.plain:hover { color: var(--accent); }

.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plain-list li {
  position: relative;
  padding: 8px 0 8px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  border-bottom: 1px dotted var(--line);
}
.plain-list li:last-child { border-bottom: 0; }
.plain-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 16px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-pure);
}
.plain-list li b { color: var(--ink); font-weight: 600; }
.plain-list-cols { display: block; columns: 2; column-gap: 40px; }
.plain-list-cols li { break-inside: avoid; }
@media (max-width: 760px) { .plain-list-cols { columns: 1; } }

.gdates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.gd {
  background: var(--panel);
  padding: 12px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.gd:first-child { background: var(--accent-wash); }
.gd-date { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); }
.gd-cd { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }

/* ==========================================================================
   SKIN : FALLOUT 3
   A Pip-Boy 3000 read on a dying CRT: one green phosphor, brightness doing the
   work that colour does elsewhere, square corners, scanlines, a glow on the
   type. Switched on by the radiation button in the header (assets/js/skin.js),
   which sets data-skin="fallout" on <html>. It replaces both light and dark,
   so the light/dark button steps aside while it is on.
   Everything here only re-points the tokens and overrides a handful of shapes —
   no markup changes.
   ========================================================================== */
html[data-skin="fallout"]:root {
  color-scheme: dark;

  --bg:        #010A04;
  --bg-deep:   #000703;
  --panel:     #03120A;
  --panel-2:   #06200F;
  --line:      #12703A;
  --line-soft: #0B4424;

  --ink:   #3CF58C;
  --ink-2: #22C46A;
  --ink-3: #18A055;

  --accent:      #9BFFC3;
  --accent-pure: #22FF88;
  --accent-wash: rgba(34, 255, 136, .10);

  --up:   #7DFFB0;
  --down: #FF5A3C;
  --warn: #FFBE3D;
  --teal: #2BCF78;

  --shadow: 0 0 0 1px rgba(34, 255, 136, .05), 0 0 18px -6px rgba(34, 255, 136, .4);
  --contour: transparent;

  --sans:  "Share Tech Mono", "Lucida Console", "Courier New", monospace;
  --mono:  "Share Tech Mono", "Lucida Console", "Courier New", monospace;
  --serif: "Share Tech Mono", "Lucida Console", "Courier New", monospace;
  --display: "VT323", "Share Tech Mono", "Courier New", monospace;

  --r: 0px;
  --gap: 16px;
}

/* the light/dark button has nothing to switch while the skin is on */
html[data-skin="fallout"] #theme-toggle { display: none; }
#skin-toggle[aria-pressed="true"] { color: var(--accent-pure); border-color: var(--accent-pure); }

html[data-skin="fallout"] body {
  text-shadow: 0 0 5px rgba(34, 255, 136, .32);
  letter-spacing: .01em;
}
html[data-skin="fallout"] ::selection { background: var(--accent-pure); color: #001509; text-shadow: none; }

/* ---- the screen: a rolling refresh band, scanlines, a dark vignette ---- */
html[data-skin="fallout"] body::before {
  inset: auto;
  top: 0; left: 0; right: 0;
  height: 140px;
  z-index: 9998;
  background: linear-gradient(180deg, transparent, rgba(34, 255, 136, .045) 55%, transparent);
  mask-image: none;
  -webkit-mask-image: none;
  transform: translateY(-140px);
  animation: fo-roll 9s linear infinite;
}
html[data-skin="fallout"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px),
    radial-gradient(125% 125% at 50% 50%, transparent 58%, rgba(0, 0, 0, .55) 100%);
  animation: fo-flicker 7s steps(1, end) infinite;
}
@keyframes fo-roll    { to { transform: translateY(100vh); } }
@keyframes fo-flicker {
  0%, 100% { opacity: 1; }
  46%      { opacity: .94; }
  48%      { opacity: 1; }
  78%      { opacity: .96; }
  80%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="fallout"] body::before { display: none; }
  html[data-skin="fallout"] body::after  { animation: none; }
}

/* ---- type ---- */
html[data-skin="fallout"] .masthead h1,
html[data-skin="fallout"] .banner h1,
html[data-skin="fallout"] .page-head h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 8vw, 84px);
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 9px rgba(34, 255, 136, .7), 0 0 28px rgba(34, 255, 136, .28);
}
html[data-skin="fallout"] .banner h1::after {     /* the cursor */
  content: "";
  display: inline-block;
  width: .42em; height: .72em;
  margin-left: .14em;
  background: var(--accent-pure);
  box-shadow: 0 0 10px var(--accent-pure);
  animation: fo-blink 1.05s steps(1, end) infinite;
}
@keyframes fo-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html[data-skin="fallout"] .banner h1::after { animation: none; } }

/* the banner picture goes to phosphor like the map; the scrim keeps the heading readable */
html[data-skin="fallout"] .banner { background: #010A04; border-bottom-color: var(--accent-pure); }
html[data-skin="fallout"] .banner::before {
  filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(2.4) brightness(.85) contrast(1.1);
}
html[data-skin="fallout"] .banner .lede { color: var(--ink); text-shadow: 0 0 6px rgba(34, 255, 136, .4); }
html[data-skin="fallout"] .banner .lede b { color: var(--accent); }


html[data-skin="fallout"] .next-group,
html[data-skin="fallout"] .conf-name,
html[data-skin="fallout"] .spend-n,
html[data-skin="fallout"] .gwhen b,
html[data-skin="fallout"] .cf-date b {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
}
html[data-skin="fallout"] .next-group,
html[data-skin="fallout"] .conf-name { font-size: clamp(28px, 4vw, 38px); line-height: 1; color: var(--accent); }
html[data-skin="fallout"] .banner .banner-stats .spend-n { color: var(--accent-pure); }
html[data-skin="fallout"] .spend-n   { font-size: clamp(64px, 11vw, 96px); text-shadow: 0 0 12px rgba(34, 255, 136, .55); }
html[data-skin="fallout"] .gwhen b   { font-size: 28px; }
html[data-skin="fallout"] .talk-year h3 { font-family: var(--display); font-weight: 400; font-size: 34px; }
html[data-skin="fallout"] .cf-date b { font-size: 24px; }

/* everything that was set in italic serif reads as terminal output instead */
html[data-skin="fallout"] .alm-note,
html[data-skin="fallout"] .about-quote,
html[data-skin="fallout"] .quote-block blockquote { font-style: normal; }
html[data-skin="fallout"] .lede { font-size: 15px; line-height: 1.65; }
html[data-skin="fallout"] .quote-block blockquote::before,
html[data-skin="fallout"] .about-quote::before { content: "> "; color: var(--accent-pure); }
html[data-skin="fallout"] .ensign,
html[data-skin="fallout"] .about-quote { border-left-width: 3px; }
html[data-skin="fallout"] .ul { border-bottom-style: dashed; }
html[data-skin="fallout"] b,
html[data-skin="fallout"] strong { font-weight: 400; color: var(--accent); }
html[data-skin="fallout"] .mark-text b,
html[data-skin="fallout"] .lede b { color: inherit; }
html[data-skin="fallout"] .mark-text b { font-family: var(--display); font-size: 22px; letter-spacing: .06em; line-height: .9; }
/* the long name breaks after "Tidewater" (a <wbr> in the markup) on a phone instead of pushing the page sideways */
@media (max-width: 560px) { html[data-skin="fallout"] .mark-text { max-width: 100px; } html[data-skin="fallout"] .mark-text b { font-size: 16px; } }

/* ---- the header: a Pip-Boy menu bar ---- */
html[data-skin="fallout"] .board {
  background: color-mix(in srgb, var(--bg-deep) 94%, transparent);
  border-bottom: 1px solid var(--accent-pure);
  box-shadow: 0 0 18px -4px rgba(34, 255, 136, .45);
}
html[data-skin="fallout"] .mark-logo {
  filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(2.6) brightness(.95) drop-shadow(0 0 4px rgba(34, 255, 136, .6));
}
html[data-skin="fallout"] .live-btn,
html[data-skin="fallout"] .board-player,
html[data-skin="fallout"] .rp,
html[data-skin="fallout"] .rp-vibe { border-radius: 0; }
html[data-skin="fallout"] .chip-k { letter-spacing: .1em; }
html[data-skin="fallout"] .chip-v { color: var(--accent); }
html[data-skin="fallout"] .site-nav { gap: 3px; padding-block: 3px 6px; }
html[data-skin="fallout"] .site-nav a,
html[data-skin="fallout"] .site-nav .nav-top {
  padding: 5px 12px;
  font-size: 12.5px;
  letter-spacing: .1em;
  border: 1px solid transparent;
  color: var(--ink-2);
}
html[data-skin="fallout"] .site-nav a:hover,
html[data-skin="fallout"] .site-nav .nav-top:hover,
html[data-skin="fallout"] .site-nav .nav-top[aria-expanded="true"] { color: var(--accent); border-color: var(--line); }
html[data-skin="fallout"] .site-nav .nav-top.is-parent { color: var(--accent); border-color: var(--accent-pure); }
html[data-skin="fallout"] .site-nav a[aria-current="page"] {
  background: var(--accent-pure);
  border-color: var(--accent-pure);
  color: #001509;
  text-shadow: none;
}
html[data-skin="fallout"] .site-nav a[aria-current="page"] .ic { color: #001509; }
html[data-skin="fallout"] .tabs { border-bottom-color: var(--line); }
html[data-skin="fallout"] .tab { color: var(--ink-2); }
html[data-skin="fallout"] .tab:hover { color: var(--accent); }
html[data-skin="fallout"] .tab[aria-selected="true"] { color: var(--accent); }
html[data-skin="fallout"] .tile { background: var(--panel); color: var(--accent); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
html[data-skin="fallout"] .tile-desc { color: var(--ink-2); }
html[data-skin="fallout"] .tile-count { background: transparent; border: 1px solid var(--line); }
html[data-skin="fallout"] .hub.is-compact .tile { border-radius: 0; }

html[data-skin="fallout"] .icon-btn { border-color: var(--line); }
html[data-skin="fallout"] .icon-btn:hover { background: var(--accent-wash); }

/* ---- panels and cards: square, ruled, faintly lit from inside ---- */
html[data-skin="fallout"] .panel,
html[data-skin="fallout"] .gcard,
html[data-skin="fallout"] .next-hero,
html[data-skin="fallout"] .cf-row {
  background: linear-gradient(180deg, rgba(34, 255, 136, .035), transparent 40%), var(--panel);
  box-shadow: var(--shadow), inset 0 0 26px rgba(34, 255, 136, .04);
}
html[data-skin="fallout"] .next-hero { border-color: var(--accent-pure); }
html[data-skin="fallout"] .gcard     { border-top: 1px solid var(--line); }
html[data-skin="fallout"] .p-head    { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
html[data-skin="fallout"] .p-head h2,
html[data-skin="fallout"] .p-head-bare h2 { font-size: 13px; letter-spacing: .14em; color: var(--accent); }
html[data-skin="fallout"] .section-rule { color: var(--accent); font-size: 13px; }
html[data-skin="fallout"] .section-rule::after { height: 1px; background: var(--line); }
html[data-skin="fallout"] .cf-month { color: var(--accent); }
html[data-skin="fallout"] .cf-month::after { background: var(--line); }
html[data-skin="fallout"] .cf-row.cf-major { border-left-color: var(--accent-pure); }
html[data-skin="fallout"] .gcard-head h3,
html[data-skin="fallout"] .expert-body h3,
html[data-skin="fallout"] .cf-main h3 { font-size: 16px; letter-spacing: .02em; }
html[data-skin="fallout"] .gcard-head h3 a,
html[data-skin="fallout"] .expert-body h3 a { color: var(--accent); }

/* tags, pills and scrollbars lose their rounding */
html[data-skin="fallout"] .tag,
html[data-skin="fallout"] .glinks a,
html[data-skin="fallout"] .talk-who,
html[data-skin="fallout"] .expert-tags span,
html[data-skin="fallout"] .meter,
html[data-skin="fallout"] .merchants::-webkit-scrollbar-track,
html[data-skin="fallout"] .merchants::-webkit-scrollbar-thumb,
html[data-skin="fallout"] .memes::-webkit-scrollbar-track,
html[data-skin="fallout"] .memes::-webkit-scrollbar-thumb { border-radius: 0; }
html[data-skin="fallout"] .key-dot { border-radius: 0; }

/* ---- buttons invert on hover, the way a terminal highlights a selection ---- */
html[data-skin="fallout"] .btn { border-color: var(--accent-pure); color: var(--accent); letter-spacing: .08em; }
html[data-skin="fallout"] .btn:hover,
html[data-skin="fallout"] .glinks a:hover {
  background: var(--accent-pure);
  border-color: var(--accent-pure);
  color: #001509;
  text-shadow: none;
}
html[data-skin="fallout"] .btn-primary { background: var(--accent-pure); color: #001509; text-shadow: none; box-shadow: 0 0 14px -2px rgba(34, 255, 136, .7); }
html[data-skin="fallout"] .btn-primary:hover { background: var(--accent); border-color: var(--accent); filter: none; }
html[data-skin="fallout"] .seg button { background: var(--panel); color: var(--ink-2); }
html[data-skin="fallout"] .seg button[aria-pressed="true"] { background: var(--accent-pure); color: #001509; text-shadow: none; }
html[data-skin="fallout"] .glinks a.glink-own { color: var(--accent); border-color: var(--accent-pure); }
html[data-skin="fallout"] .glinks a.glink-own:hover { color: #001509; }

/* ---- meters: a segmented Pip-Boy bar ---- */
html[data-skin="fallout"] .meter { height: 12px; background: var(--panel-2); border-color: var(--line); }
html[data-skin="fallout"] .meter-fill {
  background: repeating-linear-gradient(90deg, var(--accent-pure) 0 7px, transparent 7px 10px);
  box-shadow: 0 0 10px rgba(34, 255, 136, .5);
}
html[data-skin="fallout"] .mil-bar { height: 3px; }
html[data-skin="fallout"] .mil-bar-fill {
  background: repeating-linear-gradient(90deg, var(--accent-pure) 0 6px, transparent 6px 9px);
  opacity: 1;
}

/* ---- forms ---- */
html[data-skin="fallout"] .field input,
html[data-skin="fallout"] .field select,
html[data-skin="fallout"] .field textarea,
html[data-skin="fallout"] .cf-bar input[type="search"],
html[data-skin="fallout"] .cf-bar select { background: #000; border-color: var(--line); color: var(--accent); }
html[data-skin="fallout"] .field input:focus,
html[data-skin="fallout"] .field select:focus,
html[data-skin="fallout"] .field textarea:focus,
html[data-skin="fallout"] .cf-bar input:focus,
html[data-skin="fallout"] .cf-bar select:focus { box-shadow: 0 0 10px -2px rgba(34, 255, 136, .7); }
html[data-skin="fallout"] .report-out pre { background: #000; }

/* ---- the map: phosphor tiles ----
   Markers and popups sit in their own panes and keep their real colours, so
   the orange meetup pins stand out against the green chart like a waypoint. */
html[data-skin="fallout"] .leaflet-tile-pane {
  filter: grayscale(1) invert(1) sepia(1) hue-rotate(82deg) saturate(2.2) brightness(.72) contrast(1.15);
}
html[data-skin="fallout"] .map-box { border-color: var(--accent-pure); box-shadow: var(--shadow); }
html[data-skin="fallout"] .leaflet-container { background: #021a0c; }
html[data-skin="fallout"] .leaflet-popup-content-wrapper,
html[data-skin="fallout"] .leaflet-popup-tip { border-color: var(--accent-pure); }
html[data-skin="fallout"] .leaflet-control-attribution a,
html[data-skin="fallout"] .leaflet-bar a { text-shadow: none; }

/* ---- memes arrive in phosphor too; hover restores the colour ---- */
html[data-skin="fallout"] .meme img { filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(2.4) brightness(.85); transition: filter .2s; }
html[data-skin="fallout"] .meme:hover img { filter: none; }
html[data-skin="fallout"] .meme-cap { text-shadow: none; }

/* ---- the extras ---- */
html[data-skin="fallout"] .deck:hover { background: var(--accent-wash); }
html[data-skin="fallout"] .tool-col h3 { color: var(--accent); }
html[data-skin="fallout"] .tool-logo { background: #000 !important; border-color: var(--line); border-radius: 0; }
html[data-skin="fallout"] .conf-photo img { filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(2.4) brightness(.9); }
html[data-skin="fallout"] .conf-photo { border-color: var(--accent-pure); border-radius: 0; }
html[data-skin="fallout"] .tool-logo img { filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(2.4) brightness(.9); transition: filter .2s; }
html[data-skin="fallout"] .tool:hover .tool-logo img { filter: none; }
html[data-skin="fallout"] .up-date { font-family: var(--display); font-size: 22px; font-weight: 400; }
html[data-skin="fallout"] .experts,
html[data-skin="fallout"] .deck-grid,
html[data-skin="fallout"] .spend-sub,
html[data-skin="fallout"] .gdates { border-color: var(--line); background: var(--line-soft); }
html[data-skin="fallout"] .expert-face { border-bottom-color: var(--accent-pure); }
html[data-skin="fallout"] .foot { background: #010A04; color: var(--ink-2); border-top-color: var(--accent-pure); }
html[data-skin="fallout"] .foot-art { filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(2.4) brightness(.85) contrast(1.1); }
html[data-skin="fallout"] .foot a,
html[data-skin="fallout"] .foot-nav a { color: var(--accent); }
html[data-skin="fallout"] .foot-logo b { font-family: var(--display); font-size: 24px; font-weight: 400; letter-spacing: .06em; }
html[data-skin="fallout"] .foot-logo img { filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(2.6) brightness(.95); }
html[data-skin="fallout"] .foot-credit { border-top-color: var(--line); color: var(--ink-3); }
html[data-skin="fallout"] .foot-credit b { color: var(--accent-pure); text-shadow: 0 0 10px rgba(34, 255, 136, .6); }
html[data-skin="fallout"] .foot-coin { filter: grayscale(1) sepia(1) hue-rotate(82deg) saturate(3); }
html[data-skin="fallout"] .plain-list li::before { border-radius: 0; }
html[data-skin="fallout"] a { text-decoration-style: dashed; }


/* ==========================================================================
   AMERICA 250 — Old Glory red, white and blue, for this one page. The colours
   are set on <main> only, so the header and the rest of the site keep the
   bitcoin orange. The cards are fixed navy, white and red in both themes.
   ========================================================================== */
body[data-page="america250"] main {
  --usa-red: #B22234;
  --usa-blue: #0A3161;
  --usa-blue-ui: #0A3161;     /* the blue for lines and marks on the page's own ground */
  --accent: #B22234;
  --accent-pure: #D1263A;
  --accent-wash: rgba(178, 34, 52, .09);
}
:root[data-theme="dark"] body[data-page="america250"] main {
  --usa-blue-ui: #5C8BEA;
  --accent: #FF6B7C;
  --accent-wash: rgba(255, 107, 124, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-page="america250"] main {
    --usa-blue-ui: #5C8BEA;
    --accent: #FF6B7C;
    --accent-wash: rgba(255, 107, 124, .14);
  }
}

/* a faint field of stars across the whole page, in place of the chart's contour lines */
body[data-page="america250"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%237d8fb5' fill-opacity='.16'%3E%3Cpath d='M22 14l2.6 5.6 6 .7-4.4 4.1 1.2 5.9L22 27.4 16.6 30.3l1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath transform='translate(45 45)' d='M22 14l2.6 5.6 6 .7-4.4 4.1 1.2 5.9L22 27.4 16.6 30.3l1.2-5.9-4.4-4.1 6-.7z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 90px 90px;
}

/* the banner: fireworks, a flag, the old light; the heading throws a red and blue shadow */
.banner-america250 { --banner: url(../banners/america250.svg); }
.banner-america250::before { background-position: 70% 100%; }
.banner-america250 .banner-inner { min-height: 330px; padding-bottom: 72px; }
.banner-america250 h1 {
  text-shadow: 3px 3px 0 #B22234, 6px 6px 0 #0A3161, 0 2px 26px rgba(0, 0, 0, .5);
}

.stripe-rule {
  height: 10px;
  margin: 6px 0;
  background: linear-gradient(180deg, #B22234 0 33.3%, #fff 33.3% 66.6%, #0A3161 66.6%);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.stripe-banner { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; height: 12px; border-radius: 0; box-shadow: none; }

/* years and days since 1776, in the banner */
.a250-count { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.a250-n {
  font-size: clamp(64px, 11vw, 112px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.05em;
  color: #fff;
  text-shadow: 3px 3px 0 #B22234, 6px 6px 0 #0A3161;
}
.a250-u {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}

.panel-usa { border-top: 4px solid var(--usa-red); }
.panel-usa .p-head h2 .ic { color: var(--accent); }

/* the presidents: navy, white and red cards in turn, each with a field of stars */
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.q {
  --star-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='%23fff' fill-opacity='.09'%3E%3Cpath d='M14 6l2.2 4.8 5.2.6-3.9 3.6 1 5.2L14 17.6 9.5 20.2l1-5.2-3.9-3.6 5.2-.6z'/%3E%3Cpath transform='translate(28 28)' d='M14 6l2.2 4.8 5.2.6-3.9 3.6 1 5.2L14 17.6 9.5 20.2l1-5.2-3.9-3.6 5.2-.6z'/%3E%3C/g%3E%3C/svg%3E");
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 30px 22px 18px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.q::before {
  content: "“";
  position: absolute;
  top: -8px;
  left: 12px;
  font-family: var(--serif);
  font-size: 120px;
  line-height: 1;
  opacity: .2;
}
.q blockquote { position: relative; margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; font-style: italic; }
.q figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 11px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.q-who { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.q-src { font-family: var(--mono); font-size: 11px; opacity: .82; }
.q-blue  { background: var(--star-tile), #0A3161; color: #fff; }
.q-red   { background: var(--star-tile), #B22234; color: #fff; }
.q-white { background: #fff; color: #0A3161; border: 1px solid #C9D3E6; border-top: 6px solid #B22234; }
.q-white::before { color: #B22234; opacity: .25; }

/* the dollar, 1775 to now: a stripe down the side, a red mark for each year */
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 96px 1fr; gap: 0 20px; }
.tl-year { padding-top: 1px; text-align: right; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.tl-body {
  position: relative;
  padding: 0 0 26px 26px;
  border-left: 4px solid;
  border-image: repeating-linear-gradient(180deg, #B22234 0 14px, var(--usa-blue-ui) 14px 28px) 1;
}
.tl-item:last-child .tl-body { padding-bottom: 0; }
.tl-body::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--panel);
  border: 4px solid var(--accent);
}
.tl-body h3 { font-size: 17px; line-height: 1.25; }
.tl-body p { margin: 4px 0 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.tl-btc .tl-year { color: #C26A08; }
.tl-btc .tl-body::before { border-color: #F7931A; background: #F7931A; }
@media (max-width: 560px) {
  .tl-item { grid-template-columns: 62px 1fr; gap: 0 14px; }
  .tl-year { font-size: 19px; }
}

/* the 757 in the story */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.loc { padding: 16px 16px 18px; background: var(--panel-2); border: 1px solid var(--line-soft); border-top: 5px solid var(--accent); border-radius: 3px; }
.loc:nth-child(even) { border-top-color: var(--usa-blue-ui); }
.loc-year { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--accent); font-variant-numeric: tabular-nums; }
.loc:nth-child(even) .loc-year { color: var(--usa-blue-ui); }
.loc h3 { margin-top: 4px; font-size: 16px; line-height: 1.25; }
.loc p { margin: 6px 0 0; font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* the Constitution, on parchment */
.const-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.const {
  margin: 0;
  padding: 24px 26px 20px;
  background: #F6EEDC;
  color: #3B2A14;
  border: 1px solid #D8C7A0;
  border-radius: 3px;
  box-shadow: inset 0 0 44px rgba(150, 110, 40, .2), var(--shadow);
}
.const blockquote { margin: 0 0 14px; font-family: var(--serif); font-size: 19px; line-height: 1.5; }
.const figcaption { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #7A5C2C; }
@media (min-width: 1000px) {
  .tl { display: block; column-count: 2; column-gap: 56px; }
  .tl-item { break-inside: avoid; }
  .tl-item .tl-body { padding-bottom: 26px; }
}

/* ---- America 250, part two: the future ---- */
.part { display: flex; flex-direction: column; gap: 30px; }
.q-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* the headline numbers */
.a250-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.a250-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 16px 18px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-top: 5px solid var(--accent);
  border-radius: 3px;
}
.a250-stat:nth-child(even) { border-top-color: var(--usa-blue-ui); }
.a250-stat-n { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--accent); font-variant-numeric: tabular-nums; }
.a250-stat:nth-child(even) .a250-stat-n { color: var(--usa-blue-ui); }
.a250-stat-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.a250-stat-s { margin: 6px 0 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* the debt chart, with a linear / log switch */
.ch-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ch-readout { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg button {
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--panel);
  border: 0;
  cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: #0A3161; color: #fff; }
.ch { overflow: hidden; }
.ch svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ch-grid { stroke: var(--line-soft); stroke-width: 1; }
.ch-axis { fill: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.ch-area { fill: var(--accent); fill-opacity: .12; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; }
.ch-mark { fill: var(--panel); stroke: var(--usa-blue-ui); stroke-width: 2; }
.ch-note { fill: var(--ink-2); font-family: var(--sans); font-size: 11px; font-weight: 600; }
.ch-cross { stroke: var(--usa-blue-ui); stroke-width: 1; stroke-dasharray: 4 3; }
.ch-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }

/* where each dollar went */
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 200px 1fr 120px; gap: 12px; align-items: center; }
.bar-name { font-size: 14px; font-weight: 600; }
.bar-track { display: block; height: 18px; background: var(--panel-2); border-radius: 2px; overflow: hidden; }
.bar-track i { display: block; height: 100%; background: var(--usa-blue-ui); border-radius: 2px; }
.bar-hot .bar-name { color: var(--accent); }
.bar-hot .bar-track i { background: var(--accent); }
.bar-rest .bar-track i { background: var(--ink-3); }
.bar-val { font-family: var(--mono); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .bar { grid-template-columns: 1fr auto; row-gap: 4px; }
  .bar-track { grid-column: 1 / -1; order: 3; }
}

/* five ways out */
.levers { list-style: none; counter-reset: lv; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lever {
  counter-increment: lv;
  position: relative;
  padding: 18px 18px 20px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-left: 5px solid var(--accent);
  border-radius: 3px;
}
.lever:nth-child(even) { border-left-color: var(--usa-blue-ui); }
.lever::before { content: counter(lv); position: absolute; top: 8px; right: 14px; font-size: 46px; font-weight: 800; line-height: 1; color: var(--accent); opacity: .18; }
.lever h3 { margin-bottom: 6px; font-size: 17px; }
.lever p { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* the Bitcoin argument, both sides */
.btc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.btc-col { padding: 18px 20px 20px; background: var(--panel-2); border: 1px solid var(--line-soft); border-top: 5px solid #F7931A; border-radius: 3px; }
.btc-against { border-top-color: var(--ink-3); }
.btc-col h3 { margin-bottom: 8px; font-size: 16px; }
.btc-col ul { display: flex; flex-direction: column; gap: 7px; margin: 0; padding-left: 18px; font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ---- the debt clock: a dark panel, digits that slide like an odometer ---- */
.debt-clock {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 18px 20px;
  color: #fff;
  background: radial-gradient(120% 150% at 50% 0%, #11295f 0%, #07142e 62%, #040c1e 100%);
  border: 1px solid #1d3a7a;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.tick {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--mono);
  font-size: clamp(20px, 5.4vw, 58px);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.tick-cur { margin-right: .12em; color: #FF5468; text-shadow: 0 0 14px rgba(255, 84, 104, .55); }
.tick-sep { width: .3em; text-align: center; color: #7E94C4; }
.tick-d {
  position: relative;
  display: inline-block;
  width: .64em;
  height: 1.2em;
  margin: 0 1px;
  overflow: hidden;
  background: linear-gradient(180deg, #0C1D44, #07122B);
  border: 1px solid #1f3f86;
  border-radius: 3px;
  text-shadow: 0 0 12px rgba(255, 255, 255, .35);
}
/* the shading that makes each digit look like a drum turning */
.tick-d::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 30%, transparent 70%, rgba(0, 0, 0, .55));
}
.tick-strip { display: flex; flex-direction: column; }
.tick-strip.roll { transition: transform .38s cubic-bezier(.3, .7, .2, 1); }
.tick-strip b { display: block; height: 1.2em; text-align: center; font-weight: 700; }
.clock-cap { margin: 0 auto; max-width: 70ch; text-align: center; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .74); }
.debt-clock .a250-stat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); border-top-color: #FF5468; }
.debt-clock .a250-stat:nth-child(even) { border-top-color: #7EA6FF; }
.debt-clock .a250-stat-n,
.debt-clock .a250-stat:nth-child(even) .a250-stat-n { color: #fff; }
.debt-clock .a250-stat-k { color: rgba(255, 255, 255, .72); }
@media (prefers-reduced-motion: reduce) { .tick-strip.roll { transition: none; } }
#a250-clock-rates { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ==========================================================================
   RESOURCES — 1950s roadside America
   --------------------------------------------------------------------------
   Nostalgia, 1950s to 1980s, from all over America: the top tiles are roadside signs (a highway guide sign, an enamel
   sign, a drive-in screen, a theatre marquee), the second row are diner menu
   cards, and the landing view is an airmail postcard of real postcards plus a
   road of billboards, one look per decade. All of it is drawn here in CSS; the only pictures are
   real postcards and photographs linked from Wikimedia Commons (config.js,
   roadside). Scoped to the Resources page.
   ========================================================================== */
body[data-page="resources"] {
  --cream: #F6EBD3;
  --cherry: #D1322F;
  --mustard: #F2B632;
  --navy: #1E3A5F;
  --green: #0B6B3A;
  --sign: 'Oswald', 'Archivo Narrow', 'Arial Narrow', Impact, sans-serif;
  --script: 'Pacifico', 'Brush Script MT', cursive;
}

/* ---- the top tiles, as roadside signs ---- */
body[data-page="resources"] .hub-diner:not(.hub-sub):not(.is-compact) .tile {
  background: var(--ta);
  border: 5px solid #fff;
  border-radius: 12px;
  min-height: 190px;
  box-shadow: 0 0 0 3px var(--ta), 7px 9px 0 rgba(0, 0, 0, .2);
}
body[data-page="resources"] .hub-diner:not(.hub-sub):not(.is-compact) .tile:hover {
  box-shadow: 0 0 0 3px var(--ta), 11px 15px 0 rgba(0, 0, 0, .22);
}
body[data-page="resources"] .hub-diner:not(.hub-sub):not(.is-compact) .tile-name {
  font-family: var(--sign);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: none;
}
/* highway guide sign: white lettering and an arrow */
body[data-page="resources"] .tile[data-sign="highway"]:not(.x)::after {
  content: '\2192';
  position: absolute; right: 18px; top: 10px;
  font: 600 38px var(--sign);
  color: #fff;
}
/* enamel sign: a ring inside the border */
body[data-page="resources"] .hub-diner:not(.hub-sub):not(.is-compact) .tile[data-sign="enamel"] {
  box-shadow: inset 0 0 0 4px var(--cherry), inset 0 0 0 7px var(--cream), 0 0 0 3px var(--cherry), 7px 9px 0 rgba(0, 0, 0, .2);
}
body[data-page="resources"] .hub-diner:not(.hub-sub):not(.is-compact) .tile[data-sign="enamel"]:hover {
  box-shadow: inset 0 0 0 4px var(--cherry), inset 0 0 0 7px var(--cream), 0 0 0 3px var(--cherry), 11px 15px 0 rgba(0, 0, 0, .22);
}
/* drive-in screen: a mustard rail along the bottom */
body[data-page="resources"] .tile[data-sign="drivein"]::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background: var(--mustard);
}
/* theatre marquee: cream board, rows of bulbs, script lettering */
body[data-page="resources"] .hub-diner:not(.hub-sub):not(.is-compact) .tile[data-sign="marquee"] {
  --bulb: radial-gradient(circle, var(--mustard) 0 3.4px, #B07A00 3.6px 4.6px, transparent 5px);
  background: var(--bulb) 0 5px / 24px 14px repeat-x, var(--bulb) 0 calc(100% - 5px) / 24px 14px repeat-x, var(--cream);
  border-color: var(--mustard);
  color: var(--navy);
  padding-block: 30px;
}
body[data-page="resources"] .hub-diner:not(.hub-sub):not(.is-compact) .tile[data-sign="marquee"] .tile-name {
  font-family: var(--script);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cherry);
}
body[data-page="resources"] .tile[data-sign="marquee"] .tile-desc { color: var(--navy); }
body[data-page="resources"] .tile[data-sign="marquee"] .tile-count { background: var(--cherry); color: #fff; }
body[data-page="resources"] .tile[data-sign="marquee"] > .ic { color: var(--navy); opacity: .12; }
body[data-page="resources"] .hub-diner.is-compact .tile[data-sign="marquee"] { color: var(--navy); }

/* ---- the second row, as diner menu cards ---- */
body[data-page="resources"] .hub-diner.hub-sub:not(.is-compact) .tile {
  background: var(--cream);
  color: var(--tb);
  border: 3px solid var(--ta);
  border-radius: 6px;
  min-height: 150px;
  box-shadow: 6px 6px 0 var(--ta);
}
body[data-page="resources"] .hub-diner.hub-sub:not(.is-compact) .tile:hover {
  transform: translate(-2px, -3px);
  box-shadow: 9px 10px 0 var(--ta);
}
body[data-page="resources"] .hub-diner.hub-sub:not(.is-compact) .tile::before {
  content: '';
  position: absolute; inset: 6px;
  border: 1.5px dashed color-mix(in srgb, var(--ta) 55%, transparent);
  border-radius: 3px;
  pointer-events: none;
}
body[data-page="resources"] .hub-diner.hub-sub:not(.is-compact) .tile-name {
  font-family: var(--sign);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tb);
  text-shadow: none;
}
body[data-page="resources"] .hub-diner.hub-sub:not(.is-compact) .tile-desc { color: #4A3F2A; }
body[data-page="resources"] .hub-diner.hub-sub:not(.is-compact) .tile-count { background: var(--ta); color: #fff; transform: rotate(-3deg); }
body[data-page="resources"] .hub-diner.hub-sub:not(.is-compact) .tile > .ic { color: var(--ta); opacity: .16; }
body[data-page="resources"] .hub-diner.hub-sub:not(.is-compact) .tile:hover > .ic { opacity: .26; }

/* ---- the landing: a postcard and the road ---- */
.rd-landing { display: flex; flex-direction: column; gap: 30px; margin-top: 10px; }
.rd-landing[hidden] { display: none; }

.postcard {
  --stripes: repeating-linear-gradient(135deg, var(--cherry) 0 14px, var(--cream) 14px 28px, var(--navy) 28px 42px, var(--cream) 42px 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 30px;
  align-items: center;
  padding: 40px 32px;
  background: var(--stripes) 0 0 / 100% 10px no-repeat, var(--stripes) 0 100% / 100% 10px no-repeat, var(--cream);
  color: #3B2F1E;
  border-radius: 6px;
  overflow: hidden;              /* the fanned postcards tilt past the edge on a phone */
  box-shadow: 0 0 0 1px #D9C9A3, 8px 10px 0 rgba(0, 0, 0, .16);
}
.pc-msg h2 { margin: 0 0 12px; font: 400 clamp(34px, 4.4vw, 52px)/1.08 var(--script); color: var(--cherry); }
.pc-msg p { margin: 0 0 10px; font: 17px/1.55 var(--serif); }
.pc-msg .pc-sign { font: 400 22px var(--script); color: var(--navy); margin-top: 6px; }
.pc-stack { position: relative; aspect-ratio: 1.75 / 1; min-height: 230px; }
.pc {
  position: absolute;
  width: 62%;
  padding: 5px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.pc img { display: block; width: 100%; aspect-ratio: 1.58 / 1; object-fit: cover; background: #E7D9B5; }
.pc-1 { left: 0;   top: 12%; transform: rotate(-7deg); z-index: 1; }
.pc-2 { left: 19%; top: 0;   transform: rotate(1deg);  z-index: 3; }
.pc-3 { right: 0;  top: 16%; transform: rotate(7deg);  z-index: 2; }
.pc:hover { transform: rotate(0) translateY(-8px) scale(1.04); z-index: 5; }

.road {
  position: relative;
  overflow: hidden;
  padding-top: 40px;
  border-radius: 14px;
  background: linear-gradient(#1E3A5F 0 36%, #2F5D8C 36% 58%, #F2B632 58% 74%, #E8873A 74% 100%);
}
.road::before {
  content: '';
  position: absolute; left: 50%; bottom: 60px;
  width: 170px; height: 170px;
  margin-left: -85px;
  border-radius: 50%;
  background: #FBE3A0;
}
.road-hills { position: absolute; left: 0; right: 0; bottom: 58px; width: 100%; height: 120px; }
.boards {
  position: relative; z-index: 3;
  list-style: none; margin: 0;
  padding: 0 24px 104px;
  display: flex; align-items: stretch; gap: 24px;
  overflow-x: auto; scroll-snap-type: x proximity;
}
.bb { --bc: var(--cherry); --tilt: 0deg; flex: 1 0 210px; max-width: 250px; position: relative; scroll-snap-align: start; transform: rotate(var(--tilt)); }
/* one look per decade, oldest first: 50s cherry and cream, 60s space-age aqua,
   70s harvest gold and burnt orange, then two 80s arcade neons */
.bb-1 { --bc: var(--cherry); --tilt: -1.2deg; }
.bb-2 { --bc: #1E3A5F; --paper: #E2F2F0; --head: #0E7C86; --tilt: .8deg; margin-top: 16px; }
.bb-3 { --bc: #B5541B; --paper: #F4E2B0; --head: #5F6B1E; --ink: #3A2A12; --tilt: -.6deg; }
.bb-4 { --bc: #FF4FD8; --paper: #1B1035; --ink: #DCD6F7; --head: #20E3FF; --cta: #FF4FD8; --edge: #20E3FF; --tilt: 1.2deg; margin-top: 10px; }
.bb-5 { --bc: #20E3FF; --paper: #1B1035; --ink: #DCD6F7; --head: #FF4FD8; --cta: #20E3FF; --edge: #FF4FD8; --tilt: -.9deg; margin-top: 6px; }
.bb::before, .bb::after {
  content: '';
  position: absolute; top: 100%;
  width: 9px; height: 70px;
  background: #5B4636;
}
.bb::before { left: 22%; }
.bb::after  { right: 22%; }
.bb > a {
  display: flex; flex-direction: column; height: 100%;
  background: var(--paper, var(--cream));
  border: 5px solid var(--bc);
  border-radius: 6px;
  color: var(--ink, #2C2417);
  text-decoration: none;
  box-shadow: 5px 7px 0 var(--edge, rgba(0, 0, 0, .28));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.bb > a:hover { transform: translateY(-5px); }
.bb-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 4px solid var(--bc); background: #CDBF9D; }
.bb-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bb b { padding: 12px 12px 4px; font: 600 21px/1.1 var(--sign); letter-spacing: .03em; text-transform: uppercase; color: var(--head, var(--bc)); }
.bb-text { padding: 0 12px; font: 13.5px/1.45 var(--serif); color: var(--ink, #3B2F1E); }
.bb em { margin-top: auto; padding: 10px 12px 12px; font: 600 12px var(--sign); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--cta, var(--bc)); }
.bb em::after { content: ' \2192'; }
.road-lane {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 64px;
  background: repeating-linear-gradient(90deg, #F2E9C9 0 38px, transparent 38px 76px) 0 50% / 100% 4px no-repeat, #2B2B2E;
  border-top: 4px solid #E8E0CF;
}
.car { position: absolute; bottom: 6px; left: -110px; width: 84px; animation: drive 26s linear infinite; }
@keyframes drive { from { left: -110px; } to { left: 100%; } }
.rd-credit { margin: -8px 0 0; font-size: 11.5px; color: var(--ink-3); }
.rd-credit a { color: inherit; text-underline-offset: 2px; }

.reveal-on [data-reveal] > * { opacity: 0; transform: translateY(30px) rotate(var(--tilt, 0deg)); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal-on [data-reveal] > .in { opacity: 1; transform: rotate(var(--tilt, 0deg)); }

@media (max-width: 760px) {
  .postcard { grid-template-columns: minmax(0, 1fr); padding: 34px 20px; }
  .pc-stack { aspect-ratio: auto; height: 220px; width: 100%; }
  .bb { flex-basis: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .car { animation: none; left: 12%; }
  .reveal-on [data-reveal] > * { opacity: 1; transform: rotate(var(--tilt, 0deg)); transition: none; }
  .pc, .bb > a { transition: none; }
}

/* ---- America 250: the presidents speak. A stage with one marble bust, and the quote beside it ---- */
.stage {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: 26px;
  align-items: center;
  padding: 22px;
  color: #fff;
  background: radial-gradient(120% 140% at 20% 0%, #11295f 0%, #07142e 60%, #040c1e 100%);
  border: 1px solid #1d3a7a;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.stage-view {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background:
    radial-gradient(70% 55% at 50% 36%, rgba(120, 160, 255, .35) 0%, rgba(20, 40, 100, .25) 55%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Cpath d='M14 6l2.2 4.8 5.2.6-3.9 3.6 1 5.2L14 17.6 9.5 20.2l1-5.2-3.9-3.6 5.2-.6z'/%3E%3Cpath transform='translate(28 28)' d='M14 6l2.2 4.8 5.2.6-3.9 3.6 1 5.2L14 17.6 9.5 20.2l1-5.2-3.9-3.6 5.2-.6z'/%3E%3C/g%3E%3C/svg%3E"),
    #06122c;
  border: 1px solid #1f3f86;
}
.stage-canvas { position: absolute; inset: 0; }
.stage-canvas canvas { display: block; width: 100%; height: 100%; }
.stage-initial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 84px; font-weight: 800; letter-spacing: -.04em; color: rgba(255, 255, 255, .16); }
.stage.is-3d .stage-initial { display: none; }
.stage-name {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 30px 12px 11px;
  text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7));
}
.stage-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stage-quote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.3vw, 27px); line-height: 1.42; }
.stage-quote .w { border-radius: 3px; transition: background .12s, color .12s, opacity .2s; }
.stage.is-talking .stage-quote .w { opacity: .55; }
.stage.is-talking .stage-quote .w.said, .stage.is-talking .stage-quote .w.on { opacity: 1; }
.stage-quote .w.on { background: #D1263A; color: #fff; box-shadow: 0 0 0 3px #D1263A; }
.stage-src { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .78); }
.stage-src b { font-family: var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.stage-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stage .btn { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); }
.stage .btn:hover { color: #fff; border-color: #fff; }
.stage .btn-primary { background: #D1263A; border-color: #D1263A; color: #fff; }
.stage-keep { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .8); cursor: pointer; }
.stage-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.stage-note a { color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) {
  .stage { grid-template-columns: 1fr; padding: 16px; }
  .stage-view { max-width: 340px; width: 100%; margin: 0 auto; }
}

/* each quote card carries a small face, and a button that sends it to the stage */
.q figcaption.q-cap-face { flex-direction: row; align-items: center; gap: 10px; }
.q-by { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.q-face {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden;
  border-radius: 50%; font-size: 15px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 50% 35%, #2a4fa8, #0a1a40);
  border: 2px solid rgba(255, 255, 255, .85);
}
.q-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.q-white .q-face { border-color: #0A3161; }
.q-play {
  flex: none; padding: 6px 11px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; opacity: .9;
}
.q-play:hover { background: rgba(255, 255, 255, .16); opacity: 1; }
.q-white .q-play:hover { background: rgba(10, 49, 97, .1); }
.q-now { box-shadow: 0 0 0 3px #FFD98A, var(--shadow); }

/* ---------- Adoption news (news.html) ---------- */
.news-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.news-bar .seg { max-width: 100%; overflow-x: auto; }
.news-list { margin: 0; padding: 0; }
.news-items { list-style: none; margin: 0; padding: 0; }
.news-day {
  margin: 22px 0 2px; padding: 0 0 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid var(--line);
}
.news-list > .news-day:first-child { margin-top: 2px; }
.news-meta .fi { font-size: 13px; margin-right: 7px; vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.news-globe { width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; color: var(--ink-3); }
.news-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px;
  padding: 13px 0; border-top: 1px solid var(--line-soft);
}
.news-item:first-child { border-top: 0; }
.news-item a { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.news-item a:hover { color: var(--accent); text-decoration: underline; }
.news-meta { font-size: 12px; color: var(--ink-3); }
.news-age { grid-row: 1; grid-column: 2; font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; align-self: start; padding-top: 3px; }
.news-empty { margin: 0; padding: 18px 0; color: var(--ink-2); }
.news-more { align-self: flex-start; }

/* ==========================================================================
   Where to buy page
   ========================================================================== */
/* drawn by tools/make-buy-banner.js: a pickaxe cracking fiat, sats stacking toward a sunrise */
.banner-buy         { --banner: url(../banners/buy.svg); }
.banner-buy::before { background-position: 78% 100%; }
.banner-buy .banner-inner { min-height: 330px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.buy-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.buy-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 16px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: calc(var(--r) + 3px);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.buy-card:hover { border-color: var(--accent-pure); box-shadow: var(--shadow); }
.buy-card.is-top { border-color: var(--accent-pure); background: color-mix(in srgb, var(--accent-pure) 7%, var(--panel-2)); }
.buy-head { display: flex; align-items: center; gap: 10px; }
.buy-rank {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 600 12.5px var(--mono); color: var(--ink-2); background: var(--panel); border: 1px solid var(--line);
}
.buy-card.is-top .buy-rank { background: var(--accent-pure); border-color: var(--accent-pure); color: #0B1E27; }
.buy-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.buy-name a { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.buy-name a:hover { color: var(--accent); text-decoration: underline; }
.buy-cost { display: flex; flex-direction: column; gap: 1px; }
.buy-cost b { font: 600 22px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.buy-cost span { font: 500 11px var(--mono); color: var(--ink-3); }
.buy-bar { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.buy-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent-pure); transition: width .3s ease; }
.buy-facts { margin: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; font-size: 12.5px; line-height: 1.45; }
.buy-facts dt { font: 700 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.buy-facts dd { margin: 0; color: var(--ink-2); }
.buy-note { margin: auto 0 0; padding-top: 4px; font-size: 12px; line-height: 1.45; color: var(--ink-3); font-family: var(--serif); font-style: italic; }

.buy-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.buy-table { border-collapse: collapse; width: 100%; min-width: 1500px; font-size: 12.5px; line-height: 1.45; }
.buy-table th, .buy-table td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.buy-table thead th { font: 700 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: var(--panel-2); position: sticky; top: 0; white-space: nowrap; }
.buy-table tbody th { font-weight: 600; white-space: nowrap; background: var(--panel); position: sticky; left: 0; }
.buy-table tbody th a { color: var(--ink); text-decoration: none; }
.buy-table tbody th a:hover { color: var(--accent); text-decoration: underline; }
.buy-table tbody tr:last-child th, .buy-table tbody tr:last-child td { border-bottom: 0; }
.buy-table tbody tr:hover td, .buy-table tbody tr:hover th { background: var(--accent-wash); }
.buy-table td { color: var(--ink-2); }
.buy-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.buy-table td.src { white-space: nowrap; }
.buy-table td.src a { color: var(--accent); }


/* ---- the buying page: ID check or no ID check, with pictures ---- */
.kyc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.kyc-sub {
  margin: 8px 0 -2px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.kyc-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .kyc-paths { grid-template-columns: 1fr; } }
.kyc-path {
  margin: 0; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: calc(var(--r) + 3px);
}
.kyc-path h3 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.kyc-path figcaption { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.kyc-svg { display: block; width: 100%; height: auto; }
.k-node { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.k-rec { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.k-dash { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 3 4; }
.k-ic { fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.k-ic.k-hot { stroke: var(--accent); }
.k-arrow { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; marker-end: url(#k-head); color: var(--accent); }
.k-lbl { fill: var(--ink); font: 700 14px var(--sans); }
.k-sub { fill: var(--ink-3); font: 500 12px var(--sans); }

/* a line from easiest to most private, five stops along it */
.kyc-scale { display: flex; flex-direction: column; gap: 16px; }
.kyc-steps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.kyc-steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #F7931A, #E2A02A, #A9B04A, #4FA58A, #2F8FB0);
}
.kyc-steps li { position: relative; padding-top: 30px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kyc-steps li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c); border: 4px solid var(--panel); box-shadow: 0 0 0 1px var(--line);
}
.kyc-steps b { font-size: 14px; font-weight: 700; color: var(--ink); }
.kyc-steps span { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 860px) {
  .kyc-steps { grid-template-columns: 1fr; gap: 16px; }
  .kyc-steps::before { left: 9px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; background: linear-gradient(180deg, #F7931A, #E2A02A, #A9B04A, #4FA58A, #2F8FB0); }
  .kyc-steps li { padding: 0 0 0 36px; }
}

.kyc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.kyc-table th, .kyc-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line-soft); }
.kyc-table thead th { border-top: 0; font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: var(--panel-2); }
.kyc-table thead th:nth-child(2) { color: var(--accent); }
.kyc-table thead th:nth-child(3) { color: var(--teal); }
.kyc-table tbody th { width: 22%; white-space: nowrap; font-weight: 600; color: var(--ink); }
.kyc-table td { color: var(--ink-2); width: 39%; }
.kyc-ic { width: 20px; height: 20px; margin-right: 9px; vertical-align: -5px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kyc-table tr:hover td, .kyc-table tr:hover th { background: var(--accent-wash); }
@media (max-width: 720px) {
  .kyc-table, .kyc-table tbody, .kyc-table tr, .kyc-table th, .kyc-table td { display: block; width: auto; }
  .kyc-table thead { display: none; }
  .kyc-table tr { padding: 10px 0; border-top: 1px solid var(--line-soft); }
  .kyc-table th, .kyc-table td { border: 0; padding: 4px 4px; white-space: normal; }
  .kyc-table td::before { content: attr(data-label); display: block; font: 700 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1px; }
}
.kyc-advice { margin-top: 2px; }

/* the apps and markets */
.buy-apps { margin-bottom: 4px; }
.buy-apps .tool { align-items: flex-start; height: 100%; }
.mkt-how { font-size: 12px; line-height: 1.45; color: var(--ink-2); margin-top: 4px; }


/* ==========================================================================
   HOME — a scroll-driven story. Hero with a coin that follows the pointer, a ticker band,
   a night-sky band of four facts, three photo chapters on a rail, and a few extras.
   Motion lives in assets/js/home.js; with reduced motion everything simply sits there.
   ========================================================================== */
.home { gap: 0; padding-block: 18px 0; }
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* ---------- hero ---------- */
.welcome {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 24px 40px;
  min-height: 540px; margin: 0 0 12px;
}
.welcome-net {
  position: absolute; z-index: -1; inset: -18px -16px 0; width: calc(100% + 32px); height: calc(100% + 18px); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40%, #000 100%);
}
.welcome-h { margin: 0 0 14px; font-size: clamp(34px, 5.4vw, 64px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
.welcome-h .w { display: inline-block; }
.welcome-h .hl {
  background: linear-gradient(100deg, var(--accent) 25%, #FFC46B 48%, var(--accent) 72%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hl-shimmer 5s linear infinite;
}
@keyframes hl-shimmer { to { background-position: -260% 0; } }
.welcome.anim .w { opacity: 0; transform: translateY(.55em); }
.welcome.anim.in .w { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 90ms); }
.welcome-lede { margin: 0; font-size: clamp(17px, 2vw, 20px); line-height: 1.65; color: var(--ink-2); max-width: 60ch; }
.welcome-lede b { color: var(--ink); font-weight: 600; }

/* the coin: it tilts toward the pointer, floats, and now and then spins */
.hero-art { position: relative; display: grid; place-items: center; width: 100%; max-width: 440px; aspect-ratio: 1; justify-self: center; perspective: 1000px; }
.coin-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-pure) 42%, transparent), transparent 66%); filter: blur(10px); animation: coin-pulse 5s ease-in-out infinite; }
@keyframes coin-pulse { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
.coin-orbit { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--accent-pure) 45%, transparent); animation: spin 26s linear infinite; }
.coin-orbit i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-pure); box-shadow: 0 0 14px var(--accent-pure); }
.coin-orbit i:nth-child(1) { top: -5px; left: 50%; }
.coin-orbit i:nth-child(2) { bottom: 14%; left: 6%; width: 8px; height: 8px; }
.coin-orbit i:nth-child(3) { bottom: 14%; right: 6%; width: 6px; height: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.coin-tilt { width: 60%; aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.coin-float { width: 100%; height: 100%; transform-style: preserve-3d; animation: coin-bob 6s ease-in-out infinite; }
@keyframes coin-bob { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(10px); } }
.coin-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: coin-turn 11s ease-in-out infinite; }
@keyframes coin-turn { 0%, 55% { transform: rotateY(0); } 78%, 100% { transform: rotateY(360deg); } }
.coin-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; filter: drop-shadow(0 18px 22px rgba(3, 12, 18, .35)); }
.coin-front { transform: translateZ(5px); }
.coin-back { transform: rotateY(180deg) translateZ(5px); }
.coin-edge { position: absolute; inset: 1%; border-radius: 50%; background: #B86A00; transform: translateZ(calc(5px - var(--k) * 1.4px)); }

/* ---------- the story: four facts beside a sticky picture that changes as you scroll (home-story.js) ---------- */
.story { position: relative; isolation: isolate; margin-top: 44px; padding: 28px 0 40px; color: #E8F1F5; background: linear-gradient(180deg, #050C14, #09192A 55%, #1E2233); }
.story-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.story-sky::before, .story-sky::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 22%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 21% 68%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 34% 14%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 47% 80%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 61% 30%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 73% 74%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 86% 18%, #FFD9A0 50%, transparent 52%), radial-gradient(1.2px 1.2px at 93% 58%, #fff 50%, transparent 52%);
  animation: twinkle 4.5s ease-in-out infinite alternate;
}
.story-sky::after { background-position: 5% 40%; transform: scaleX(-1); animation-duration: 6.5s; animation-delay: -2s; opacity: .8; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
.story-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; max-width: var(--maxw); margin: 0 auto; padding-inline: 16px; }
.story-stage { position: sticky; top: calc(var(--hdr, 120px) + 14px); align-self: start; height: min(68vh, 600px); }
.story-stage .scene { display: block; width: 100%; height: 100%; }
.story-steps { display: flex; flex-direction: column; }
.story-step { min-height: 64vh; justify-content: center; }
.story.armed .story-step { opacity: .32; transition: opacity .5s ease; }
.story.armed .story-step.is-active { opacity: 1; }

.fact { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid rgba(232, 241, 245, .18); }
.fact::before { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 100%; background: var(--accent-pure); }
.story-step.fact { border-top: 0; padding-top: 0; }
.story-step.fact::before { display: none; }
.fact-fig {
  display: block; height: 1.05em; margin-bottom: 6px;
  font-family: var(--mono); font-size: clamp(64px, 7.6vw, 108px); font-weight: 600;
  letter-spacing: -.045em; line-height: 1; color: #FFB04A; font-variant-numeric: tabular-nums;
}
.fact-coin { perspective: 400px; }
.fact-coin .ic { width: .92em; height: .92em; vertical-align: top; animation: coin-flip 7s ease-in-out infinite; }
@keyframes coin-flip { 0%, 62% { transform: rotateY(0); } 80%, 100% { transform: rotateY(360deg); } }
.fact b { font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.fact span:last-child { font-size: 17px; line-height: 1.65; color: #B9CDD6; max-width: 46ch; }

/* ---------- section headings ---------- */
.welcome-sub { margin: 0 0 6px; font-size: clamp(28px, 3.8vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.ways { margin-top: 84px; }
.extras-wrap { margin-top: 96px; }

/* ---------- the live band: four gauges fed by the network, over rising embers ---------- */
.nowband { position: relative; isolation: isolate; margin-top: 100px; padding: 84px 0 96px; color: #E8F1F5; overflow: hidden; background: linear-gradient(180deg, #061118, #0A2230 70%, #0B2A3A); }
.now-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.now-sky .scene { display: block; width: 100%; height: 100%; }
.now-inner { max-width: var(--maxw); margin: 0 auto; padding-inline: 16px; }
.on-dark { color: #fff; }
.now-lede { max-width: 58ch; margin: 10px 0 40px; font-size: 18px; line-height: 1.65; color: #B9CDD6; }
.gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.gauge { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid rgba(232, 241, 245, .18); }
.gauge::before { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 100%; background: var(--accent-pure); transition: width .9s .25s ease; }
.reveal-on .gauge:not(.in)::before { width: 0; }
.g-fig { position: relative; aspect-ratio: 1 / 1; }
.g-fig .scene { display: block; width: 100%; height: 100%; }
.gauge h3 { margin: 6px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.gauge p { margin: 0; font-size: 15px; line-height: 1.65; color: #B9CDD6; }
.g-conv { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.cv-big { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cv-big b { font-family: var(--mono); font-size: clamp(44px, 5vw, 64px); font-weight: 600; letter-spacing: -.04em; color: #FFB04A; font-variant-numeric: tabular-nums; line-height: 1; }
.cv-big i { font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(232, 241, 245, .7); }
.cv-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; font-family: var(--mono); font-size: 16px; color: rgba(232, 241, 245, .85); }
.cv-row input { width: 5.2em; padding: 7px 10px; font: 600 18px var(--mono); color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(232, 241, 245, .3); border-radius: 6px; }
.cv-row input:focus { outline: 2px solid var(--accent-pure); outline-offset: 2px; }
.cv-row b { font-size: 22px; color: #FFB04A; font-variant-numeric: tabular-nums; }
.cv-row i { font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(232, 241, 245, .7); }

/* ---------- the timeline: a strip you move yourself (swipe, drag, arrows). Nothing is pinned, and the page still scrolls up and down over it. ---------- */
.hist { position: relative; margin-top: 100px; padding: 84px 0 64px; background: var(--bg-deep); border-block: 1px solid var(--line); }
.hist-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: var(--maxw); margin: 0 auto 38px; padding-inline: 16px; }
.hist-head p { max-width: 56ch; margin: 8px 0 0; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.hist-nav { display: flex; flex: none; gap: 8px; }
.hist-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 20px/1 var(--sans); cursor: pointer; transition: border-color .15s, color .15s, transform .15s, opacity .2s; }
.hist-btn:hover:not(:disabled) { border-color: var(--accent-pure); color: var(--accent); transform: translateY(-2px); }
.hist-btn:disabled { opacity: .35; cursor: default; }
.hist-track {
  --edge: max(16px, calc((100vw - var(--maxw)) / 2 + 16px));
  display: flex; gap: 30px; padding: 0 var(--edge) 28px; overflow-x: auto; cursor: grab;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--edge); overscroll-behavior-x: contain; scrollbar-width: none;
}
.hist-track::-webkit-scrollbar { display: none; }
.hist-track:focus-visible { outline: 2px solid var(--accent-pure); outline-offset: -2px; }
.hist-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hist-card { position: relative; flex: none; width: min(310px, 78vw); padding-top: 70px; scroll-snap-align: start; }
.hist-card::after { content: ""; position: absolute; top: 36px; left: 0; right: -30px; height: 2px; background: var(--line); }
.hist-card:last-child::after { right: 0; }
.hist-card::before { content: ""; position: absolute; z-index: 1; left: 0; top: 29px; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; background: var(--bg); border: 2px solid var(--line); transition: background .3s, border-color .3s, transform .3s, box-shadow .3s; }
.hist-card.on::before { background: var(--accent-pure); border-color: var(--accent-pure); transform: scale(1.2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-pure) 25%, transparent); }
.hist-card.on::after { background: var(--accent-pure); }
.hist-year { position: absolute; left: 28px; top: 3px; font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--accent); }
.hist-ic { display: inline-flex; margin-bottom: 8px; color: var(--accent); }
.hist-ic .ic { width: 34px; height: 34px; }
.hist-card h3 { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hist-card p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.hist-card p b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hist-bar { height: 3px; margin: 8px max(16px, calc((100vw - var(--maxw)) / 2 + 16px)) 0; background: var(--line); border-radius: 2px; overflow: hidden; }
.hist-bar i { display: block; height: 100%; background: var(--accent-pure); transform: scaleX(0); transform-origin: left; }
@media (max-width: 560px) { .hist-head { flex-direction: column; align-items: flex-start; } }

/* ---------- ways in, the extras ---------- */

/* ---------- the finale: a live countdown over rising embers ---------- */
.finale { position: relative; isolation: isolate; margin-top: 110px; padding: 96px 0 104px; color: #fff; text-align: center; overflow: hidden; background: radial-gradient(120% 120% at 50% 100%, #3A2410, #061118 62%); }
.finale-embers { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
.finale-inner { max-width: 860px; margin: 0 auto; padding-inline: 16px; }
.finale h2 { margin: 0 0 10px; font-size: clamp(34px, 5.2vw, 64px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.fin-sub { margin: 0 0 34px; font-size: 19px; line-height: 1.6; color: #C9D8DF; }
.count { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 28px); margin-bottom: 18px; }
.count > div { display: flex; flex-direction: column; align-items: center; min-width: clamp(64px, 14vw, 128px); padding: 16px 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.count b { font-family: var(--mono); font-size: clamp(38px, 7.4vw, 88px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: #FFB04A; font-variant-numeric: tabular-nums; }
.count b.bump { animation: bump .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes bump { 0% { transform: translateY(-14%); opacity: .35; } 100% { transform: none; opacity: 1; } }
.count span { margin-top: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(232, 241, 245, .7); }
.fin-where { margin: 0 0 30px; font-family: var(--mono); font-size: 14px; letter-spacing: .02em; color: #C9D8DF; }
.finale .way-links { justify-content: center; }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) { .gauges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .story-inner { grid-template-columns: 1fr; gap: 0; }
  .story-stage { height: 38vh; z-index: 2; background: linear-gradient(180deg, #061118 78%, rgba(6, 17, 24, 0)); }
  .story-step { min-height: 56vh; }
}
@media (max-width: 560px) { .gauges { grid-template-columns: 1fr; } .count > div { padding: 12px 4px 8px; } }
@media (prefers-reduced-motion: reduce) {
  .story-sky::before, .story-sky::after, .fact-coin .ic, .count b.bump { animation: none; }
  .story.armed .story-step { opacity: 1; transition: none; }
  .hist-card::before, .gauge::before { transition: none; }
}

/* ---------- three ways in: a photo each, on a rail that fills as you scroll (home.js sets --prog) ---------- */
.chapters { position: relative; display: flex; flex-direction: column; gap: 76px; padding: 30px 0 6px 44px; }
.chapters::before, .chapters::after { content: ""; position: absolute; left: 8px; top: 56px; width: 2px; border-radius: 2px; }
.chapters::before { bottom: 56px; background: var(--line); }
.chapters::after { height: max(0px, calc(var(--prog, 0%) - 56px)); max-height: calc(100% - 112px); background: var(--accent-pure); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-pure) 55%, transparent); }
.chapter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 56px; }
.chapter:nth-child(even) .shot { order: -1; }
.chapter::before {
  content: ""; position: absolute; left: -44px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; box-sizing: border-box;
  background: var(--bg); border: 2px solid var(--line); transition: background .3s, border-color .3s, transform .3s;
}
.chapter.on::before { background: var(--accent-pure); border-color: var(--accent-pure); transform: scale(1.15); animation: node-ping 1.2s ease-out 1; }
@keyframes node-ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-pure) 60%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }

.ch-text h3 { margin: 0 0 14px; display: flex; align-items: center; gap: .45em; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.ch-text h3 .ic { flex: none; width: 1.1em; height: 1.1em; color: var(--accent); }
.ch-text p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 54ch; }
.ch-text p b { color: var(--ink); font-weight: 600; }
.way-links { display: flex; flex-wrap: wrap; gap: 10px; }
.way-links .btn { transition: transform .2s, border-color .15s, color .15s, filter .15s; }
.way-links .btn:hover { transform: translateY(-2px); }
.way-links .btn-primary::after { content: "→"; display: inline-block; margin-left: .55em; transition: transform .2s; }
.way-links .btn-primary:hover::after { transform: translateX(4px); }

.shot { position: relative; margin: 0; }
.shot-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; background: linear-gradient(180deg, #050C13, #0B2230); box-shadow: 0 34px 50px -30px rgba(3, 12, 18, .6); }
.shot-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 80%, rgba(3, 12, 18, .55)); }
.scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.shot-credit { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 9px; pointer-events: none; font-size: 11px; letter-spacing: .02em; color: rgba(232, 241, 245, .88); }
.shot-credit a { color: inherit; text-decoration-color: rgba(232, 241, 245, .35); }

/* with script on: text rises line by line, and each photo is wiped in */
.chapters.armed .ch-text > * { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--k, 0) * 90ms + 180ms); }
.chapters.armed .chapter.in .ch-text > * { opacity: 1; transform: none; }
.chapters.armed .shot-frame { clip-path: inset(0 100% 0 0 round 14px); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.chapters.armed .chapter:nth-child(even) .shot-frame { clip-path: inset(0 0 0 100% round 14px); }
.chapters.armed .chapter.in .shot-frame { clip-path: inset(0 0 0 0 round 14px); }

/* ---------- the next meetup, a slim strip in the first chapter (app.js fills the ids) ---------- */
.next-inline { display: block; max-width: 560px; margin: 4px 0 18px; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent-pure); color: inherit; text-decoration: none; }
.ni-top { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.ni-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-pure); animation: ni-pulse 2.4s ease-out infinite; }
@keyframes ni-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-pure) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.ni-top .tag { margin-left: 2px; }
.ni-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 4px; }
.ni-line b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.ni-line span { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--accent); }
.ni-rows { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 3px 0 0; }
.ni-rows > div { display: inline-flex; }
.ni-rows > div:nth-child(n+3) { display: none; }
.ni-rows > div + div::before { content: "·"; margin-right: 10px; color: var(--ink-3); }
.ni-rows dt { display: none; }
.ni-rows dd { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.next-inline:hover .ni-line b { color: var(--accent); }

/* ---------- a few extras: a picture, then the words ---------- */
.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 22px; }
.extra { display: flex; flex-direction: column; gap: 12px; }
.extra-shot { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 12px; background: #0B1E27; box-shadow: 0 26px 40px -28px rgba(3, 12, 18, .6); }
.extra-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.extra:hover .extra-shot img { transform: scale(1.08); }
.extra-ic { position: absolute; right: 14px; bottom: 10px; color: #fff; opacity: .9; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.extra-ic .ic { width: 64px; height: 64px; stroke-width: 1.3; }
.extra:hover .extra-ic { transform: translateY(-4px) rotate(-6deg) scale(1.1); }
.extra h3 { margin: 6px 0 0; display: flex; align-items: center; gap: .5em; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.extra h3 .ic { flex: none; width: 1.2em; height: 1.2em; color: var(--accent); }
.extra p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.extra .more { align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.extra .more::after { content: "→"; display: inline-block; margin-left: .55em; transition: transform .2s; }
.extra .more:hover::after { transform: translateX(4px); }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .welcome { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { max-width: 300px; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .chapter { grid-template-columns: 1fr; gap: 24px; }
  .chapter:nth-child(even) .shot { order: 0; }
  .extras { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } .chapters { padding-left: 36px; } .chapter::before { left: -36px; } }

@media (prefers-reduced-motion: reduce) {
  .welcome-h .hl, .coin-glow, .coin-orbit, .coin-float, .coin-spin, .fact-coin .ic, .facts-sky::before, .facts-sky::after, .ni-dot, .chapter.on::before { animation: none; }
  .welcome.anim .w { opacity: 1; transform: none; }
  .coin-tilt, .extra-shot img, .extra-ic, .fact::before, .chapter::before, .way-links .btn { transition: none; }
}

/* ---------- Resources > Toolbox > Animations in progress: a live picture beside its explanation ---------- */
.anim { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 6px 0 4px; }
.anim-text h3 { margin: 0 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.anim-text p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 860px) { .anim { grid-template-columns: 1fr; gap: 20px; } }

/* ==========================================================================
   YOU GOT LUCKY — bitcoin's whole ride on one chart (lucky.html, assets/js/lucky.js)
   Everything draws in the theme's own colours, so it follows light, dark and the Fallout skin.
   ========================================================================== */
.banner-lucky { --banner: url(../banners/lucky.svg); }
.banner-lucky::before { background-position: 70% 50%; }

.lk-readout {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  min-height: 1.4em;
  white-space: pre;
}
.lk-readout.is-live { color: var(--ink); }

.lk-years { display: flex; flex-direction: column; gap: 8px; }
.lk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lk-row-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-width: 158px;
}
.lk-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-seg button {
  font: 600 11px/1 var(--sans);
  letter-spacing: .06em;
  padding: 8px 11px;
  background: var(--panel);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.lk-seg button:hover { color: var(--ink); border-color: var(--accent-pure); }
.lk-seg button[aria-pressed="true"] { background: var(--accent-pure); border-color: var(--accent-pure); color: #0B1E27; }

.lk-chart { width: 100%; min-width: 0; }
.lk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lk-grid { stroke: var(--line-soft); stroke-width: 1; }
.lk-ax { fill: var(--ink-3); font: 500 10px var(--mono); }
.lk-line { fill: none; stroke: var(--accent-pure); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.lk-before { stroke: var(--ink-3); opacity: .42; }
.lk-under { stroke: var(--down); }
.lk-paid { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 5 4; }
.lk-paid-t { fill: var(--ink-2); font: 500 10.5px var(--mono); }
.lk-dot { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.lk-best { fill: var(--up); stroke: var(--panel); stroke-width: 1.5; }
.lk-lab { font: 700 11px var(--mono); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.lk-lab-down { fill: var(--down); }
.lk-lab-up { fill: var(--up); }
.lk-fall { stroke: var(--down); stroke-width: 1; stroke-dasharray: 2 3; opacity: .65; }
.lk-trough { fill: var(--down); }
.lk-now { fill: var(--accent-pure); stroke: var(--panel); stroke-width: 1.5; }
.lk-now-ring { fill: var(--accent-pure); opacity: .25; transform-box: fill-box; transform-origin: center; animation: lk-pulse 2.4s ease-out infinite; }
@keyframes lk-pulse { 0% { transform: scale(.5); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lk-now-ring { animation: none; } }
.lk-cross { stroke: var(--ink-2); stroke-width: 1; opacity: .6; pointer-events: none; }
.lk-hit { cursor: crosshair; touch-action: pan-y; }

.lk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.lk-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 15px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  min-width: 0;
}
.lk-big { font: 600 clamp(20px, 2.3vw, 26px)/1.15 var(--mono); color: var(--ink); }
.lk-big.lk-up { color: var(--up); }
.lk-big.lk-down { color: var(--down); }
.lk-small { font-family: var(--serif); font-size: 13px; line-height: 1.48; color: var(--ink-2); }

.lk-miles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.lk-mile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 15px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--accent-pure);
  border-radius: var(--r);
  min-width: 0;
}
.lk-mile-p { font: 600 28px/1.1 var(--mono); color: var(--accent); }
.lk-mile-d { font: 600 10.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.lk-mile-u, .lk-mile-l { font-family: var(--serif); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.lk-mile-l { color: var(--ink-3); }

.lk-prose p { margin: 0 0 12px; max-width: 68ch; font-family: var(--serif); font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.lk-prose p:first-child::first-line { color: var(--ink); }

@media (max-width: 600px) { .lk-row-k { min-width: 100%; } }

/* ---- the hack and scam markers on the price chart, and their switch ---- */
.lk-toggle {
  font: 600 11px/1 var(--sans);
  letter-spacing: .06em;
  padding: 8px 11px;
  background: var(--panel);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.lk-toggle:hover { color: var(--ink); border-color: var(--accent-pure); }
.lk-toggle[aria-pressed="true"] { background: var(--warn); border-color: var(--warn); color: var(--panel); }
.lk-inc { cursor: pointer; outline: none; }
.lk-inc-stem { stroke: var(--warn); stroke-width: 1.2; opacity: .7; }
.lk-inc-dot { fill: var(--warn); stroke: var(--panel); stroke-width: 1.5; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.lk-inc:hover .lk-inc-dot, .lk-inc:focus-visible .lk-inc-dot { transform: scale(1.25); }
.lk-inc-n { fill: var(--panel); font: 800 11px var(--sans); pointer-events: none; }

/* ==========================================================================
   THE BOARD — a Candy Land style path, 2009 to today (assets/js/lucky-board.js)
   The board itself is always a night sky, like the banners; the HUD and the card
   under it follow the theme.
   ========================================================================== */
.lk-board { position: relative; display: flex; flex-direction: column; gap: 10px; outline: none; --lk-top: 110px; }
.lk-board:focus-visible { box-shadow: 0 0 0 2px var(--accent-pure); border-radius: var(--r); }

.lkb-hud {
  position: sticky;
  top: var(--lk-top);
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 8px 22px;
  padding: 10px 16px 12px;
  background: color-mix(in srgb, var(--panel) 93%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lkb-when { display: flex; align-items: baseline; gap: 10px; }
.lkb-year { font: 600 34px/1 var(--mono); color: var(--ink); letter-spacing: -.02em; }
.lkb-mon { font: 500 12px var(--mono); color: var(--ink-3); letter-spacing: .08em; }
.lkb-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lkb-k { font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.lkb-v { font: 600 21px/1.05 var(--mono); color: var(--ink); white-space: nowrap; }
.lkb-v.is-dim { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.lkb-good .lkb-v { color: var(--up); }
.lkb-bad .lkb-v { color: var(--down); }
.lkb-hold .lkb-v { color: var(--accent); }
.lkb-stat.is-bump .lkb-v { animation: lkb-bump .65s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes lkb-bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }

.lkb-bar { grid-column: 1 / -1; position: relative; height: 9px; border-radius: 99px; background: var(--line-soft); cursor: pointer; margin-top: 2px; }
.lkb-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #F7C948, #FA9A22, #F26456, #EC55A3, #9D8BEF); transition: width .55s cubic-bezier(.3, .8, .3, 1); }
.lkb-tick { position: absolute; top: -3px; width: 3px; height: 15px; border-radius: 2px; transform: translateX(-50%); opacity: .85; pointer-events: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel) 60%, transparent); }

.lkb-stage { overflow: hidden; border-radius: 12px; border: 1px solid #1B3C4B; background: #050F18; line-height: 0; }
.lkb-svg { display: block; max-width: none; }

.lkb-bed { fill: none; stroke: #07141D; stroke-linecap: round; stroke-linejoin: round; }
.lkb-road { fill: none; stroke: #17344A; stroke-linecap: round; stroke-linejoin: round; }
.lkb-dash { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 3; stroke-dasharray: 2 15; stroke-linecap: round; }
.lkb-lit { fill: none; stroke: url(#lkb-rb); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(247, 147, 26, .65)); }
.lkb-era { fill: #fff; opacity: .1; font-family: var(--sans); font-weight: 800; font-style: italic; letter-spacing: .01em; pointer-events: none; }

.lkb-spot { cursor: pointer; outline: none; filter: saturate(.45) brightness(.78); transition: filter .5s; }
.lkb-spot.is-done { filter: none; }
.lkb-spot.is-here { filter: drop-shadow(0 0 14px rgba(255, 255, 255, .6)); }
.lkb-spot.o-lost.is-done:not(.is-here) { filter: saturate(.7) brightness(.62); }
.lkb-spot-in { transform-box: fill-box; transform-origin: center; transition: transform .28s cubic-bezier(.3, 1.7, .5, 1); }
.lkb-spot:hover .lkb-spot-in, .lkb-spot:focus-visible .lkb-spot-in { transform: translateY(-5px) scale(1.07); }
.lkb-spot.is-here .lkb-spot-in { transform: translateY(-6px) scale(1.12); }
.lkb-spot:focus-visible .lkb-face { stroke: #fff; stroke-width: 3; }
.lkb-spot.k-hack:not(.is-done) .lkb-face, .lkb-spot.k-collapse:not(.is-done) .lkb-face, .lkb-spot.k-scam:not(.is-done) .lkb-face { animation: lkb-warn 1.7s ease-in-out infinite; }
@keyframes lkb-warn { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.lkb-date { fill: #CFE3EC; font: 600 10.5px var(--mono); letter-spacing: .06em; pointer-events: none; }
.lkb-name { fill: #F4E5CC; font: 700 12px var(--sans); paint-order: stroke; stroke: #050F18; stroke-width: 3.2px; stroke-linejoin: round; pointer-events: none; }
.lkb-glyph { font-family: var(--mono); font-weight: 800; pointer-events: none; }
.lkb-float { font: 800 16px var(--sans); letter-spacing: .08em; paint-order: stroke; stroke: #050F18; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }

.lkb-dock {
  position: sticky;
  bottom: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--panel) 95%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 -6px 30px -10px rgba(0, 0, 0, .45), var(--shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lkb-card {
  --k1: #F7C948; --k2: #C98E0B;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 4px 2px 15px;
  border-left: 6px solid var(--k1);
  max-height: 32vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 8px;
  transform-origin: 50% 100%;
}
.lkb-card.is-flip { animation: lkb-flip .55s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes lkb-flip { from { transform: perspective(700px) rotateX(-62deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lkb-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; }
.lkb-card-kind { font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--k2); }
:root[data-theme="dark"] .lkb-card-kind { color: var(--k1); }
.lkb-card-date { font: 500 11.5px var(--mono); color: var(--ink-3); }
.lkb-card-name { font: 800 21px/1.15 var(--sans); color: var(--ink); }
.lkb-card-what { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 78ch; }
.lkb-card-cost { margin: 0; font: 600 13px/1.4 var(--sans); color: var(--down); }
.lkb-card-dodge { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--ink); }
.lkb-card-dodge b { color: var(--up); font-weight: 700; }
.lkb-card-price { margin: 0; font: 500 11.5px var(--mono); color: var(--ink-3); }
.lkb-stamp {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 11px;
  border: 2px solid currentColor;
  border-radius: 4px;
  font: 800 12px var(--sans);
  letter-spacing: .09em;
  transform: rotate(-2.5deg);
  animation: lkb-stamp .5s cubic-bezier(.2, 1.6, .4, 1) both .15s;
}
.o-dodged .lkb-stamp { color: var(--up); }
.o-lost .lkb-stamp { color: var(--down); }
.k-crash .lkb-stamp { color: var(--accent); }
@keyframes lkb-stamp { from { transform: rotate(-14deg) scale(2.4); opacity: 0; } to { transform: rotate(-2.5deg) scale(1); opacity: 1; } }

.lkb-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lkb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 13px;
  background: var(--panel);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.lkb-btn:hover { color: var(--ink); border-color: var(--accent-pure); }
.lkb-ico { padding: 8px 12px; font-size: 18px; line-height: 1; letter-spacing: 0; }
.lkb-play { background: var(--accent-pure); border-color: var(--accent-pure); color: #0B1E27; min-width: 150px; justify-content: center; }
.lkb-play:hover { color: #0B1E27; filter: brightness(1.08); }
.lkb-play:not(.is-on) { animation: lkb-callout 2.2s ease-in-out infinite; }
.lkb-play-i { font-size: 12px; letter-spacing: 0; }
@keyframes lkb-callout { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 147, 26, .55); } 50% { box-shadow: 0 0 0 9px rgba(247, 147, 26, 0); } }
.lkb-follow[aria-pressed="true"] { border-color: var(--accent-pure); color: var(--accent); background: var(--accent-wash); }
.lkb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lkb-seg button {
  font: 600 11px/1 var(--sans);
  letter-spacing: .06em;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink-2);
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
}
.lkb-seg button:last-child { border-right: 0; }
.lkb-seg button:hover { color: var(--ink); }
.lkb-seg button[aria-pressed="true"] { background: var(--accent-pure); color: #0B1E27; }
.lkb-where { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.lkb-where-k { font: 500 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }

.lkb-s { display: none; }
@media (max-width: 760px) {
  .lkb-hud { grid-template-columns: repeat(3, 1fr); gap: 6px 10px; padding: 8px 11px 10px; }
  .lkb-when { grid-column: 1 / 3; }
  .lkb-year { font-size: 24px; }
  .lkb-mon { font-size: 11px; }
  .lkb-price { grid-column: 3; }
  .lkb-k { font-size: 8.5px; letter-spacing: .06em; }
  .lkb-v { font-size: 15px; }
  .lkb-v.is-dim { font-size: 11px; }
  .lkb-dock { padding: 9px 10px; bottom: 6px; gap: 8px; }
  .lkb-card { max-height: 21vh; padding-left: 11px; border-left-width: 5px; gap: 3px; }
  .lkb-card-name { font-size: 16px; }
  .lkb-card-what { font-size: 12.5px; line-height: 1.42; }
  .lkb-card-cost, .lkb-card-dodge { font-size: 12px; }
  .lkb-stamp { font-size: 10.5px; padding: 4px 8px; }
  .lkb-ctl { gap: 6px; }
  .lkb-btn { padding: 9px 10px; font-size: 10px; }
  .lkb-ico { padding: 6px 11px; }
  .lkb-restart { display: none; }
  .lkb-play { min-width: 0; flex: 1 1 110px; }
  .lkb-seg button { padding: 9px 9px; font-size: 10px; }
  .lkb-where { margin-left: 0; flex: 1 1 100%; }
  .lkb-where-k { display: none; }
  .lkb-where .lkb-seg { width: 100%; }
  .lkb-where .lkb-seg button { flex: 1; }
  .lkb-l { display: none; }
  .lkb-s { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .lkb-play:not(.is-on), .lkb-spot.k-hack:not(.is-done) .lkb-face, .lkb-spot.k-collapse:not(.is-done) .lkb-face, .lkb-spot.k-scam:not(.is-done) .lkb-face { animation: none; }
  .lkb-bar-fill, .lkb-spot, .lkb-spot-in { transition: none; }
}

/* ---- the board and its panel side by side (wide screens); stacked with the card pinned below on narrow ones ---- */
.lkb-side { display: contents; }
.lkb-hud { order: 1; }
.lkb-legend { order: 2; }
.lkb-stage { order: 3; }
.lkb-dock { order: 4; }
@media (min-width: 981px) {
  .lk-board { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 16px; align-items: start; }
  .lkb-legend { order: 0; grid-column: 1; grid-row: 1; }
  .lkb-stage { order: 0; grid-column: 1; grid-row: 2; }
  .lkb-side {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 2;
    position: sticky;
    top: var(--lk-top);
    max-height: calc(100vh - var(--lk-top) - 14px);
  }
  .lkb-side .lkb-hud, .lkb-side .lkb-dock { position: static; order: 0; }
  .lkb-side .lkb-hud { grid-template-columns: repeat(3, 1fr); gap: 8px 12px; flex: none; }
  .lkb-side .lkb-when { grid-column: 1 / 3; }
  .lkb-side .lkb-price { grid-column: 3; }
  .lkb-side .lkb-v { font-size: 19px; }
  .lkb-side .lkb-dock { flex: 0 1 auto; min-height: 0; }
  .lkb-side .lkb-card { flex: 0 1 auto; min-height: 0; max-height: none; }
  .lkb-side .lkb-card-name { font-size: 23px; }
  .lkb-side .lkb-card-what { font-size: 15px; }
  .lkb-side .lkb-ctl { flex: none; }
  .lkb-side .lkb-play { flex: 1 1 100%; }
  .lkb-side .lkb-where { margin-left: 0; width: 100%; }
  .lkb-side .lkb-where .lkb-seg { flex: 1; }
  .lkb-side .lkb-where .lkb-seg button { flex: 1; }
}

/* ---- the two lower panels side by side ---- */
.lk-pair { align-items: start; }
.lk-pair .plain-list, .lk-pair .plain-list-cols { column-count: 1; grid-template-columns: 1fr; }

/* ---- the key above the board, and lighting up one kind of space ---- */
.lkb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.lkb-legend-k { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.lkb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 4px;
  background: var(--panel);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 99px;
  font: 600 11.5px/1 var(--sans);
  cursor: pointer;
}
.lkb-chip:hover { color: var(--ink); border-color: var(--accent-pure); }
.lkb-chip[aria-pressed="true"] { border-color: var(--accent-pure); background: var(--accent-wash); color: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-pure) 35%, transparent); }
.lkb-chip-i { flex: none; display: block; }
.lkb-chip-n { font: 600 10.5px var(--mono); color: var(--ink-3); }
.lkb-chip-clear { padding: 9px 12px; border-radius: var(--r); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.lkb-spot.is-dim { opacity: .2; }
.lkb-spot.is-spot .lkb-spot-in { animation: lkb-spot 1.1s ease-in-out infinite; }
.lkb-spot.is-spot { filter: drop-shadow(0 0 12px rgba(255, 255, 255, .55)); }
@keyframes lkb-spot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .lkb-spot.is-spot .lkb-spot-in { animation: none; } }
@media (max-width: 760px) {
  .lkb-legend { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .lkb-chip { flex: none; }
  .lkb-legend-k { display: none; }
}

.lkb-where-note { flex: 1 1 100%; margin: 2px 0 0; font: 400 12px/1.4 var(--sans); color: var(--ink-2); }
@media (max-width: 760px) { .lkb-where-note { font-size: 11.5px; } }

/* the three coin settings always use their short names: the panel is narrow */
.lkb-where .lkb-l { display: none !important; }
.lkb-where .lkb-s { display: inline !important; }
.lkb-where .lkb-seg { flex: 1 1 100%; }
.lkb-where .lkb-seg button { flex: 1; padding: 10px 8px; }

/* ---- settings in a pop-out; the card gets the room ---- */
@media (min-width: 981px) { .lkb-side .lkb-dock { position: relative; } }
.lkb-gear { margin-left: auto; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 12px; }
.lkb-gear small { font: 500 9.5px var(--mono); letter-spacing: .06em; color: var(--ink-3); text-transform: none; }
.lkb-gear.is-open { border-color: var(--accent-pure); color: var(--ink); }
.lkb-adv {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% - 6px);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 -10px 34px -12px rgba(0, 0, 0, .55), var(--shadow);
}
.lkb-adv[hidden] { display: none; }
.lkb-adv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lkb-adv .lkb-where { margin-left: 0; width: auto; }
.lkb-adv .lkb-where-k { flex: 1 1 100%; }
.lkb-adv-row > .lkb-where-k { flex: 0 0 74px; }
.lkb-adv .lkb-where .lkb-where-k { flex: 1 1 100%; }
.lkb-adv .lkb-seg { flex: 1 1 auto; }
.lkb-adv .lkb-seg button { flex: 1; padding: 10px 10px; }
.lkb-adv .lkb-where-note { font-size: 12.5px; }
.lkb-side .lkb-card { min-height: 300px; }
.lkb-side .lkb-card-what { font-size: 15.5px; line-height: 1.55; }
.lkb-side .lkb-card-name { font-size: 24px; }
@media (min-width: 981px) { .lkb-side .lkb-ctl { gap: 8px; } .lkb-side .lkb-play { flex: 1 1 130px; } }
@media (max-width: 760px) { .lkb-card { min-height: 0; } .lkb-gear { margin-left: 0; } }

@media (min-width: 981px) {
  .lkb-side .lkb-adv { top: 8px; bottom: auto; left: 8px; right: 8px; }
  .lkb-side .lkb-play { min-width: 0; flex: 1 1 96px; padding-left: 10px; padding-right: 10px; }
  .lkb-side .lkb-gear { margin-left: 0; }
  .lkb-side .lkb-ico { padding: 8px 10px; }
}

@media (max-width: 980px) { .lkb-side .lkb-card { min-height: 0; } }
@media (max-width: 760px) {
  .lkb-side .lkb-card-name { font-size: 17px; }
  .lkb-side .lkb-card-what { font-size: 13px; line-height: 1.45; }
}