/* ============================================================================
   PLEDGE · THE PLEDGE DRIVE
   A telethon tally board for a charity launchpad on Robinhood Chain (pons).
   Direction: clients/pledge/working/00_brand/BRAND.md

   Palette speaks pons's language (lime #d4fc50 verbatim, their green and red)
   so the product reads native to the venue it launches on. Robin Neon #ccff00
   is deliberately absent: that is Robinhood's brand, not ours.

   Our material is THE FLAP: dark split-flap tiles with a specular top edge and
   a seam, carrying every total. ALMS owns paper, PONSTONK owns chrome,
   PLEDGE owns the flap.

   Type: Archivo Variable (wdth 62..125) is display and body. Chivo Mono
   Variable carries every figure and label; both pass type_audit --money
   (tnum + slashed zero), both OFL, subset with axes preserved.
   ============================================================================ */

@font-face{
  font-family:"Pledge Display";
  src:url("/fonts/display.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Pledge Mono";
  src:url("/fonts/mono.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* studio darkness, layered. never one flat plane. */
  --void:#0a0b0a;
  --s1:#111310;
  --s2:#171a16;
  --s3:#1f231e;

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.06);

  --ink:#f2f4ee;
  --ink-2:#aab1a4;
  --ink-3:#7d847a;            /* AA on --void for normal text */
  --ink-4:#4d524a;            /* decorative only */

  /* pons verbatim */
  --lime:#d4fc50;
  --lime-2:#aacc3e;
  --lime-wash:rgba(212,252,80,.10);
  --lime-line:rgba(212,252,80,.32);

  --up:#30d158;
  --dn:#ff453a;               /* doubles as the ON AIR / PRE-LAUNCH lamp */
  --dn-wash:rgba(255,69,58,.12);

  /* the flap material */
  --flap-face:#20241f;
  --flap-face-2:#121411;
  --flap-glyph:#f4f6f0;
  --flap-seam:rgba(0,0,0,.85);
  --flap-edge:rgba(255,255,255,.10);

  /* spacing scale, monotonic */
  --sp-1:4px; --sp-2:8px; --sp-3:14px; --sp-4:22px;
  --sp-5:34px; --sp-6:52px; --sp-7:84px;

  --r-1:6px; --r-2:10px; --r-3:16px;

  --mono:"Pledge Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Pledge Display",Archivo,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--disp);
  font-variation-settings:"wdth" 96;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* hidden, never clip: clip breaks overflow probes */
}
::selection{background:var(--lime); color:#0a0b0a}

.mono{font-family:var(--mono); font-feature-settings:"zero" 1}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--lime); color:#0a0b0a; padding:10px 16px; border-radius:var(--r-1);
  font-weight:700; text-decoration:none;
}
.skip:focus{left:12px; top:12px}

/* ---------------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:var(--sp-4);
  padding:12px clamp(16px,4vw,40px);
  background:rgba(10,11,10,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.lockup{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.mark{width:30px; height:30px; flex:none}
.mark-s{width:24px; height:24px}
.mark-plate{fill:var(--s2); stroke:var(--line-2); stroke-width:1}
.mark-ring{fill:none; stroke:var(--lime); stroke-width:2.6}
.mark-bar{fill:var(--lime)}
.wordmark{
  font-weight:860; letter-spacing:.06em; font-size:19px;
  font-variation-settings:"wdth" 125;
}
.wordmark-s{font-size:15px}

.tabs{display:flex; gap:2px; margin-inline:auto}
.tabs a{
  color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:8px 13px; border-radius:999px;
  font-variation-settings:"wdth" 88;
}
.tabs a:hover{color:var(--ink); background:var(--s2)}
.tabs a.active{color:var(--lime); background:var(--lime-wash)}

.topbar-right{display:flex; align-items:center; gap:var(--sp-3)}
.lamp{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  color:var(--dn); background:var(--dn-wash);
  border:1px solid rgba(255,69,58,.35);
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.lamp-dot{
  width:7px; height:7px; border-radius:50%; background:var(--dn); flex:none;
  animation:lamp-breathe 2.6s ease-in-out infinite;
}
@keyframes lamp-breathe{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce){ .lamp-dot{animation:none} }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px;
  font-family:var(--disp); font-size:15px; font-weight:750;
  letter-spacing:.02em; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--lime); color:#0c0d08}
.btn-primary:hover{background:#e2ff78}
.btn-primary:disabled{
  background:var(--s3); color:var(--ink-3); cursor:not-allowed; transform:none;
}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3); background:var(--s1)}
.btn-connect{
  background:var(--s2); color:var(--ink); border-color:var(--line-2);
  font-size:13.5px; padding:9px 16px;
}
.btn-connect:hover{border-color:var(--lime-line); color:var(--lime)}
.btn-connect.connected{color:var(--lime); border-color:var(--lime-line); font-family:var(--mono); font-size:12.5px}

:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--lime); outline-offset:2px; border-radius:var(--r-1);
}

/* ---------------------------------------------------------------- hero */
.hero{
  padding:clamp(48px,8vw,110px) clamp(16px,4vw,40px) var(--sp-6);
  max-width:1180px; margin-inline:auto;
}
.kicker{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lime); margin:0 0 var(--sp-4);
}
.hero h1{
  margin:0 0 var(--sp-4);
  font-size:clamp(44px,8.4vw,104px);
  line-height:.96; letter-spacing:-.015em; font-weight:870;
  font-variation-settings:"wdth" 118;
  text-wrap:balance;
}
.lede{max-width:620px; color:var(--ink-2); font-size:17.5px; margin:0 0 var(--sp-5)}
.hero-cta{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-7)}

/* the board */
.board-frame{
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--line-2);
  border-radius:var(--r-3);
  box-shadow:inset 0 1px 0 var(--glass), 0 30px 60px rgba(0,0,0,.45);
  padding:clamp(18px,3.4vw,36px);
}
.board-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap;
}
.board-title{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2);
}
.board-lamp{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dn);
}
.board-lamp .lamp-dot{width:6px; height:6px}

/* flap tiles */
.flapline{display:flex; gap:5px; flex-wrap:wrap}
.flap{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-feature-settings:"zero" 1; font-weight:560;
  color:var(--flap-glyph);
  background:linear-gradient(180deg,var(--flap-face) 0 49%,var(--flap-face-2) 51% 100%);
  border:1px solid var(--flap-edge);
  border-radius:var(--r-1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 5px rgba(0,0,0,.5);
}
.flap::before{
  content:""; position:absolute; left:0; right:0; top:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  border-radius:var(--r-1) var(--r-1) 0 0; pointer-events:none;
}
.flap::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  margin-top:-1px; background:var(--flap-seam); pointer-events:none;
}
.flapline-s .flap::after{height:1px; margin-top:0}
.flap.blank{color:var(--ink-4); background:var(--s1)}
.flap.sym{color:var(--lime)}
.flapline-xl{justify-content:center; padding:var(--sp-4) 0}
.flapline-xl .flap{width:clamp(46px,7.2vw,88px); height:clamp(64px,10vw,120px); font-size:clamp(34px,5.2vw,66px)}
.flapline-m  .flap{width:34px; height:46px; font-size:24px}
.flapline-s  .flap{width:22px; height:30px; font-size:15px}
.flapline-s{gap:3px}
@media (max-width:520px){
  .flapline-m .flap{width:27px; height:38px; font-size:19px}
}

.flap .flap-top{
  position:absolute; inset:0 0 50% 0; overflow:hidden; border-radius:var(--r-1) var(--r-1) 0 0;
  display:flex; align-items:flex-start; justify-content:center;
  background:linear-gradient(180deg,var(--flap-face),var(--flap-face-2));
  transform-origin:bottom; backface-visibility:hidden; pointer-events:none;
  opacity:0;
}
.flap.flip .flap-top{opacity:1; animation:flapdown .38s cubic-bezier(.55,0,.55,1)}
@keyframes flapdown{
  0%{transform:rotateX(0); }
  100%{transform:rotateX(-88deg);}
}
@media (prefers-reduced-motion:reduce){
  .flap.flip .flap-top{animation:none; opacity:0}
}

.board-substats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-4); margin-top:var(--sp-5);
  border-top:1px solid var(--line); padding-top:var(--sp-4);
}
.substat{display:flex; flex-direction:column; gap:10px; min-width:0}
.substat-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.board-honesty{
  margin:var(--sp-4) 0 0; max-width:640px; color:var(--ink-3); font-size:14.5px;
}
@media (max-width:760px){
  .board-substats{grid-template-columns:1fr; gap:var(--sp-3)}
  .substat{flex-direction:row; align-items:center; justify-content:space-between}
}

/* ---------------------------------------------------------------- sections */
.section{
  padding:var(--sp-7) clamp(16px,4vw,40px);
  max-width:1180px; margin-inline:auto;
}
.section-head{max-width:640px; margin-bottom:var(--sp-6)}
.section-index{
  display:inline-block; font-family:var(--mono); font-size:12px;
  color:var(--lime); letter-spacing:.2em; margin-bottom:var(--sp-2);
}
.section-head h2{
  margin:0 0 var(--sp-3);
  font-size:clamp(30px,4.4vw,52px); line-height:1.02;
  letter-spacing:-.01em; font-weight:840;
  font-variation-settings:"wdth" 112;
}
.section-sub{margin:0; color:var(--ink-2); font-size:16.5px}

/* reveal on scroll: transform+opacity only, JS-added, reduced-motion safe */
.rv{opacity:0; transform:translateY(18px)}
.rv.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none} }

/* ---------------------------------------------------------------- launch */
.launch-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sp-5); align-items:start;
}
@media (max-width:900px){ .launch-grid{grid-template-columns:1fr} }

.launch-form{display:flex; flex-direction:column; gap:var(--sp-4)}
.field{display:flex; flex-direction:column; gap:8px}
.field label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2);
}
.field input[type=text], .field select{
  background:var(--s1); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  padding:13px 15px; font-family:var(--disp); font-size:15.5px;
  width:100%;
}
.field input[type=text]::placeholder{color:var(--ink-4)}
.field input[type=text]:hover, .field select:hover{border-color:var(--ink-3)}
.field select{appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 51%);
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;
  background-size:6px 6px; background-repeat:no-repeat;
}
#fTicker{font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase}
#fWallet{font-family:var(--mono); font-size:13.5px}
.field-hint{margin:2px 0 0; font-size:13px; color:var(--ink-3)}

.slider-row{display:flex; align-items:center; gap:var(--sp-3)}
.slider-out{
  min-width:64px; text-align:right; font-size:22px; font-weight:640; color:var(--lime);
}
input[type=range]{
  flex:1; appearance:none; -webkit-appearance:none; height:30px; background:transparent;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:3px;
  background:linear-gradient(90deg,var(--lime) var(--fill,100%),var(--s3) var(--fill,100%));
}
input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--lime); border:3px solid #0c0d08;
  box-shadow:0 0 0 1px var(--lime-line);
  margin-top:-8px;
}
input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:var(--s3)}
input[type=range]::-moz-range-progress{height:6px; border-radius:3px; background:var(--lime)}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--lime); border:3px solid #0c0d08;
}

.preflight{
  margin-top:var(--sp-2);
  background:var(--s1); border:1px solid var(--line);
  border-radius:var(--r-3); padding:var(--sp-4);
}
.preflight h3{
  margin:0 0 6px; font-size:16px; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; font-variation-settings:"wdth" 100;
}
.preflight-sub{margin:0 0 var(--sp-3); color:var(--ink-3); font-size:13.5px}
.checks{list-style:none; margin:0 0 var(--sp-4); padding:0;
  display:flex; flex-direction:column; gap:10px}
.checks li{
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink-2);
}
.check-dot{
  width:9px; height:9px; border-radius:50%; flex:none; align-self:center;
  background:var(--ink-4);
}
.checks li.ok .check-dot{background:var(--up)}
.checks li.fail .check-dot{background:var(--dn)}
.checks li.warn .check-dot{background:#e0a83c}
.check-note{
  font-style:normal; font-family:var(--mono); font-size:11.5px;
  color:var(--ink-3); margin-left:auto; text-align:right;
}
.checks li.ok .check-note{color:var(--up)}
.checks li.fail .check-note{color:var(--dn)}
.btn-launch{width:100%}
.preflight-state{
  margin:var(--sp-3) 0 0; text-align:center;
  font-size:11.5px; letter-spacing:.14em; color:var(--dn);
}

/* the pledge card */
.pledge-card{
  position:sticky; top:96px;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--line-2); border-radius:var(--r-3);
  box-shadow:inset 0 1px 0 var(--glass), 0 24px 50px rgba(0,0,0,.4);
  padding:var(--sp-4);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4);
}
.card-title{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2);
}
.chip{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:#0c0d08; background:var(--lime);
  padding:5px 11px; border-radius:999px; font-weight:640; white-space:nowrap;
}
.chip.partial{background:transparent; color:var(--lime); border:1px solid var(--lime-line)}
.card-name{margin:var(--sp-3) 0 var(--sp-4); font-size:19px; font-weight:750; color:var(--ink)}
.card-terms{margin:0; display:flex; flex-direction:column}
.card-terms > div{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  padding:11px 0; border-top:1px solid var(--line);
}
.card-terms dt{
  color:var(--ink-3); font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; flex:none; padding-top:2px;
}
.card-terms dd{margin:0; text-align:right; font-size:14px; color:var(--ink-2); max-width:60%}
.card-foot{
  margin:var(--sp-4) 0 0; padding-top:var(--sp-3); border-top:1px solid var(--line);
  color:var(--ink-3); font-size:13px;
}

/* ---------------------------------------------------------------- route */
.route{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-3);
}
@media (max-width:1020px){ .route{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .route{grid-template-columns:1fr} }
.route li{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--sp-4);
  box-shadow:inset 0 1px 0 var(--glass);
}
.route-step{font-size:12px; color:var(--lime); letter-spacing:.2em}
.route h3{
  margin:var(--sp-3) 0 8px; font-size:19px; font-weight:820;
  font-variation-settings:"wdth" 108;
}
.route p{margin:0; font-size:14px; color:var(--ink-2)}

/* ---------------------------------------------------------------- board table */
.table-wrap{overflow-x:auto; border:1px solid var(--line-2); border-radius:var(--r-3); background:var(--s1)}
.board-table{width:100%; border-collapse:collapse; min-width:640px}
.board-table th{
  text-align:left; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  padding:14px 18px; border-bottom:1px solid var(--line-2); font-weight:500;
}
.board-table th.num{text-align:right}
.board-table td{padding:14px 18px; border-bottom:1px solid var(--line)}
.empty-row td{padding:var(--sp-6) var(--sp-4); text-align:center}
.empty-row .flapline{justify-content:center; margin-bottom:var(--sp-4)}
.empty-row p{margin:0 auto; max-width:420px; color:var(--ink-3); font-size:14.5px}

/* ---------------------------------------------------------------- causes */
.causes-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3);
}
@media (max-width:1020px){ .causes-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .causes-grid{grid-template-columns:1fr} }
.cause{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:10px;
  box-shadow:inset 0 1px 0 var(--glass);
}
.cause-tag{
  align-self:flex-start; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lime);
  background:var(--lime-wash); padding:4px 9px; border-radius:999px;
}
.cause h3{margin:2px 0 0; font-size:16.5px; font-weight:780; line-height:1.25;
  font-variation-settings:"wdth" 104}
.cause p{margin:0; font-size:13.5px; color:var(--ink-3); flex:1}
.cause-raised{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line); padding-top:10px;
}
.cause-raised span:first-child{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.cause-raised span:last-child{font-family:var(--mono); font-size:14px; color:var(--ink-2)}
.causes-note{margin:var(--sp-4) 0 0; color:var(--ink-3); font-size:13px; max-width:640px}

/* ---------------------------------------------------------------- ledger */
.ledger-schema{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-5);
  align-items:start;
}
@media (max-width:900px){ .ledger-schema{grid-template-columns:1fr} }
.schema{margin:0; border:1px solid var(--line-2); border-radius:var(--r-3);
  background:var(--s1); overflow:hidden}
.schema > div{
  display:flex; gap:var(--sp-4); padding:13px 18px; border-bottom:1px solid var(--line);
}
.schema > div:last-child{border-bottom:0}
.schema dt{
  flex:none; width:110px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--lime); padding-top:2px;
}
.schema dd{margin:0; font-size:14px; color:var(--ink-2)}
.ledger-empty{
  border:1px dashed var(--line-2); border-radius:var(--r-3); padding:var(--sp-5);
  text-align:center;
}
.ledger-empty-stamp{
  display:inline-block; font-size:13px; letter-spacing:.22em; color:var(--ink-2);
  border:1px solid var(--line-2); padding:9px 16px; border-radius:var(--r-1);
  margin-bottom:var(--sp-3);
}
.ledger-empty p{margin:0 auto; max-width:420px; color:var(--ink-3); font-size:14.5px}

/* ---------------------------------------------------------------- terms */
.terms-list{
  margin:0; padding:0; list-style:none;
  counter-reset:term;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3);
}
@media (max-width:820px){ .terms-list{grid-template-columns:1fr} }
.terms-list li{
  counter-increment:term;
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-4) 64px; position:relative;
  font-size:14.5px; color:var(--ink-2);
}
.terms-list li::before{
  content:counter(term,decimal-leading-zero);
  position:absolute; left:22px; top:24px;
  font-family:var(--mono); font-size:12px; color:var(--lime); letter-spacing:.08em;
}
.terms-list strong{color:var(--ink); font-weight:780}

/* ---------------------------------------------------------------- footer */
.footer{
  border-top:1px solid var(--line);
  padding:var(--sp-6) clamp(16px,4vw,40px) var(--sp-7);
  max-width:1180px; margin-inline:auto;
}
.footer-lockup{display:flex; align-items:center; gap:9px; margin-bottom:var(--sp-3)}
.footer-line{margin:0 0 var(--sp-4); color:var(--ink-3); font-size:14px; max-width:520px}
.footer-nav{display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4)}
.footer-nav a{
  color:var(--ink-2); text-decoration:none; font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.footer-nav a:hover{color:var(--lime)}
.footer-fine{margin:0; color:var(--ink-3); font-size:12.5px}

/* ---------------------------------------------------------------- topbar collapse */
@media (max-width:880px){
  .tabs{display:none}
  .topbar{justify-content:space-between}
}
@media (max-width:560px){
  .lamp{display:none}
}

/* board rows, live */
.row-ok{color:var(--up); font-size:11.5px; letter-spacing:.14em}
.row-bad{color:var(--dn); font-size:11.5px; letter-spacing:.14em}
.board-table td .chip{font-size:10.5px; padding:4px 9px}