/* XFINALE — The Unfinished World · station/front/front.css
   Base: phone/phone.html's CSS (2026-09-19), lifted and extended. Station tokens per CONTRACTS §7.
   One column, max 720px. Every tap target ≥ 44px. Nothing you must read is under 12px.
   The thumb bar is the one fixed layer. 320px wide without horizontal scroll. */
:root{
  --void:#0a0604; --deep:#150c05; --panel:#1f1308; --line:#3a2510; --line-bright:#5f451f;
  --amber:#ffb020; --amber-soft:#ffd08a; --ember:#ff5030; --ember-soft:#ff9c6c; --brass:#c87830; --bone:#e8d9c3;
  --ink:#f4e6c6; --dim:#cbb488; --faint:#ab8b5c; --ink-faint:#8a7a62;
  --display:"Bowlby One", "Chakra Petch", system-ui, sans-serif;
  --body:"Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, "Courier New", monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --bar:calc(66px + env(safe-area-inset-bottom, 0px));
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--void); -webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background-color:var(--void); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:repeating-linear-gradient(0deg, rgba(255,176,32,.035) 0 1px, transparent 1px 3px);
  padding-bottom:var(--bar);}
img{max-width:100%;}
a{color:var(--amber);}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:6px;}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.wrap{position:relative; z-index:1; max-width:720px; margin:0 auto; padding:0 16px calc(28px + env(safe-area-inset-bottom));}

/* ---------------- the doorway: one screen, one door ---------------- */
#doorway{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px;
  padding:calc(44px + env(safe-area-inset-top, 0px)) 16px calc(var(--bar) + 48px);
  background:radial-gradient(ellipse 80% 55% at 50% 42%, rgba(255,176,32,.09), transparent 70%);}
.door-top{position:absolute; top:calc(8px + env(safe-area-inset-top, 0px)); left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.door-brand{display:inline-flex; align-items:center; min-height:48px; min-width:48px; padding:0 8px; text-decoration:none; color:var(--faint); font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase;}
.lang{min-width:48px; min-height:48px; padding:0 14px; border:1px solid var(--line-bright); border-radius:10px; background:transparent; color:var(--dim);
  font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;}
.lang:active{background:var(--panel);}
.door-frame{position:relative; width:min(44vh, 88vw, 520px); width:min(44svh, 88vw, 520px); aspect-ratio:1; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 55%, #1a0f07 0%, #0e0804 62%, var(--void) 100%);
  box-shadow:0 0 0 1px rgba(255,176,32,.28), 0 0 0 10px rgba(255,176,32,.05), 0 0 90px -20px rgba(255,176,32,.45);}
.door-frame::after{content:""; position:absolute; inset:12px; border-radius:50%; border:1px solid rgba(255,176,32,.16); pointer-events:none;}
#doorway-art{width:100%; height:100%; display:block; object-fit:contain;}
#doorway-art.missing{visibility:hidden;}
.door-q{font-family:var(--display); font-size:clamp(25px, 7vw, 44px); line-height:1.06; letter-spacing:.01em; color:var(--amber); margin:0; max-width:17ch; text-shadow:0 0 28px rgba(255,176,32,.28);}
.door-enter{display:inline-flex; align-items:center; justify-content:center; min-height:56px; min-width:180px; padding:0 34px; border-radius:14px; text-decoration:none;
  background:var(--amber); color:#1a0b02; font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  box-shadow:0 14px 40px -16px rgba(255,176,32,.9); transition:transform .12s var(--ease); -webkit-tap-highlight-color:transparent;}
.door-enter:active{transform:scale(.985);}
.door-line{margin:0; font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);}
.door-down{position:absolute; left:50%; transform:translateX(-50%); bottom:var(--bar); display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  text-decoration:none; color:var(--ink-faint); font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; -webkit-tap-highlight-color:transparent;}
.door-down .ic{color:var(--amber); font-size:14px;}
/* the whole doorway — art, question, Enter, the small line, the hint — fits above the thumb bar at every height */
@media (max-height:600px){ .door-frame{width:min(34vh, 88vw, 520px); width:min(34svh, 88vw, 520px);} #doorway{gap:10px;} }
@media (min-width:700px){ .door-frame{width:min(50vh, 90vw, 520px); width:min(50svh, 90vw, 520px);} .door-q{max-width:24ch;} }
@media (prefers-reduced-motion:no-preference){
  .door-frame{animation:doorbreath 6s ease-in-out infinite;}
  @keyframes doorbreath{ 0%,100%{box-shadow:0 0 0 1px rgba(255,176,32,.28), 0 0 0 10px rgba(255,176,32,.05), 0 0 90px -20px rgba(255,176,32,.45);}
                         50%{box-shadow:0 0 0 1px rgba(255,176,32,.42), 0 0 0 14px rgba(255,176,32,.07), 0 0 120px -18px rgba(255,176,32,.6);} }
  .door-down .ic{animation:doorhint 2.4s ease-in-out infinite;}
  @keyframes doorhint{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);} }
}

/* ---------------- sections ---------------- */
.sec{margin:26px 0 0;}
.sec .h{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; min-height:44px;}
.sec .h b{color:var(--amber); font-weight:400; letter-spacing:.12em;}
.sec .h .sub-b{color:var(--faint); letter-spacing:.12em; text-transform:none;}
.sec .sub-h{margin-top:12px;}
.hlink{display:inline-flex; align-items:center; min-height:44px; padding:0 4px; text-decoration:none; color:var(--amber-soft); font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;}
.sub{margin:4px 0 10px; font-size:15px; color:var(--dim);}
.empty{margin:0 0 6px; color:var(--dim); font-size:16px;}
.links{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0;}
.links a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--dim); font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;}
.links a:active{border-color:var(--amber);}
.pill{display:inline-flex; align-items:center; gap:6px; min-height:44px; min-width:44px; padding:0 14px; border:1px solid var(--line-bright); border-radius:999px; background:var(--panel);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--amber-soft); text-decoration:none; max-width:100%; -webkit-tap-highlight-color:transparent;}
.pill:active{border-color:var(--amber);}
.pill.primary{background:var(--amber); border-color:var(--amber); color:#1a0b02; font-weight:700;}
.pill span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw;}
.time{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--faint); text-transform:none;}

/* the pattern card (phone.html) — now the "Tonight" story */
.card{margin:16px 0 0; padding:18px 18px 16px; border:1px solid var(--line-bright); border-radius:16px;
  background:linear-gradient(180deg, #1a0f07 0%, var(--deep) 100%); box-shadow:0 0 0 1px rgba(255,176,32,.06), 0 24px 60px -30px rgba(255,176,32,.35);}
.card .k{font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ember-soft); margin:0 0 14px; min-height:0;}
.faces{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 14px;}
.face{text-align:center; min-width:0; text-decoration:none; display:block; color:var(--ink);}
.face .pic{width:100%; aspect-ratio:1; border-radius:12px; border:1px solid var(--line-bright); background:var(--panel); overflow:hidden; display:grid; place-items:center;}
.face img{width:100%; height:100%; object-fit:cover; display:block;}
.face .init, .init{font-family:var(--display); font-size:28px; color:var(--brass);}
.face .nm{display:block; margin-top:8px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--dim); text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.card h2.title{font-family:var(--display); font-size:clamp(24px, 6.8vw, 32px); line-height:1.05; letter-spacing:.02em; color:var(--amber); margin:6px 0 12px; text-shadow:0 0 24px rgba(255,176,32,.28); text-transform:uppercase; font-weight:400;}
.card .why{margin:0 0 14px; font-size:17px; line-height:1.55; color:var(--ink);}
.card .meta{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; line-height:1.9;}
.card .meta .time{text-transform:none; letter-spacing:.06em;}
.thread{display:none; margin:0 0 16px; padding:14px 0 2px; border-top:1px dashed var(--line-bright);}
.thread[data-open]{display:block;}
.thread ol{margin:0; padding-left:22px; display:grid; gap:10px;}
.thread li{font-size:16.5px; line-height:1.5; color:var(--ink);}
.thread li::marker{color:var(--amber); font-family:var(--mono);}
.inst{display:grid; gap:14px; margin:0 0 18px;}
.inst .i{padding:0 0 12px; border-bottom:1px solid var(--line);}
.inst .i:last-child{border-bottom:0;}
.inst .il{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin:0 0 6px;}
.inst .it{margin:0 0 8px; font-size:16.5px; line-height:1.5; color:var(--ink);}
.rc{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.rc .rk{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-right:2px;}
.rc a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--line-bright); border-radius:999px; background:var(--panel);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--amber-soft); text-decoration:none; max-width:100%;}
.rc a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw;}
.rc a:active{border-color:var(--amber);}
.thread .ph{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ember-soft); margin:0 0 10px;}
.card .empty{margin:0 0 14px;}
.card .after{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0;}

/* buttons and tiles (phone.html) */
.btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; padding:14px 18px; border-radius:12px;
  font-family:var(--mono); font-size:14px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; border:1px solid var(--line-bright); color:var(--ink); background:transparent;
  transition:transform .12s var(--ease), border-color .2s, background .2s; -webkit-tap-highlight-color:transparent;}
.btn:active{transform:scale(.985);}
.btn.primary{background:var(--amber); border-color:var(--amber); color:#1a0b02; font-weight:700; box-shadow:0 12px 34px -16px rgba(255,176,32,.9);}
.btn .ic{font-size:16px; line-height:1; color:var(--amber);}
.btn.primary .ic{color:#1a0b02;}
.stack{display:grid; gap:10px;}
/* grid children default to min-width:auto (their min-content) — a nowrap line inside would widen the track past the
   viewport and make mobile Chromium zoom the whole page out; every card is allowed to be narrower than its text */
.stack > *, .tapes > *, .qgrid > *, .loglist > li, .tape, .crewcard, .mem, .qc, .ep{min-width:0;}
.more{margin:12px 0 0;}

/* fresh now */
.tapes{display:grid; gap:10px;}
.tape{display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 12px 10px 10px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.015); text-decoration:none; color:var(--ink);
  transition:border-color .2s, transform .12s var(--ease); -webkit-tap-highlight-color:transparent;}
.tape:active{transform:scale(.985); border-color:var(--amber);}
.tape .th{flex:0 0 112px; width:112px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--panel); border:1px solid var(--line-bright); display:grid; place-items:center; position:relative;}
.tape .th img{width:100%; height:100%; object-fit:cover; display:block;}
.tape .th .live{position:absolute; left:6px; top:6px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:#1a0b02; background:var(--ember); border-radius:6px; padding:1px 6px;}
.tape .t{min-width:0; flex:1;}
.tape .t b{display:block; font-weight:600; font-size:15.5px; line-height:1.3; color:var(--ink); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.tape .t span{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--faint); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:359px){ .tape .th{flex-basis:88px; width:88px;} }

/* questions */
.qgrid{display:grid; gap:10px; margin:0 0 6px;}
@media (min-width:900px){ .qgrid{grid-template-columns:1fr 1fr;} }
.qc{border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.015); padding:14px 14px 12px; min-width:0;}
.qc.journey{border-color:var(--line-bright); background:linear-gradient(180deg, #17100a 0%, var(--deep) 100%);}
.qc .art{display:block; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:radial-gradient(circle at 50% 60%, #1a0f07 0%, var(--void) 100%); margin:0 0 12px; border:1px solid var(--line);}
.qc .art img{width:100%; height:100%; object-fit:contain; display:block;}
.qc .kind{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ember-soft); margin:0 0 6px;}
.qc .q{display:block; text-decoration:none; color:var(--amber); font-family:var(--display); font-size:clamp(19px, 5.2vw, 24px); line-height:1.12; letter-spacing:.01em; margin:0 0 8px; min-height:44px; padding:2px 0;}
.qc .m{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; line-height:1.9;}
.qc .m .time{text-transform:none;}
.qc .go{display:flex; flex-wrap:wrap; gap:8px;}
.archive{margin:10px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); line-height:1.9;}

/* the characters (phone.html, verbatim) */
.find{width:100%; min-height:52px; padding:12px 16px; border:1px solid var(--line-bright); border-radius:12px; background:var(--deep); color:var(--ink);
  font-family:var(--body); font-size:17px; margin:0 0 10px; -webkit-appearance:none; appearance:none;}
.find::placeholder{color:var(--faint);}
.find:focus{border-color:var(--amber); outline:none; box-shadow:0 0 0 2px rgba(255,176,32,.18);}
.roster{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.roster li{min-width:0;}
.roster li.wide{grid-column:1 / -1;}
.roster a.ch{display:block; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.015);
  transition:transform .12s var(--ease), border-color .2s; -webkit-tap-highlight-color:transparent;}
.roster a.ch:active{transform:scale(.97); border-color:var(--amber);}
.roster .pic{position:relative; aspect-ratio:1; background:var(--panel); display:grid; place-items:center; overflow:hidden;}
.roster .pic img{width:100%; height:100%; object-fit:cover; display:block;}
.roster .pic .init{font-family:var(--display); font-size:30px; color:var(--brass);}
.roster .pic .lv{position:absolute; left:6px; top:6px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:#1a0b02; background:var(--amber); border-radius:6px; padding:2px 6px;}
.roster .pic .lv.f{background:var(--ember-soft);}
.roster .nm{display:block; padding:8px 8px 9px; font-weight:600; font-size:14.5px; line-height:1.25; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.roster .dom{display:block; padding:0 8px 9px; margin-top:-4px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.roster .divider{display:flex; align-items:center; gap:12px; min-height:44px; font-family:var(--mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint);}
.roster .divider::before, .roster .divider::after{content:""; flex:1; height:1px; background:var(--line-bright);}
.roster .none{grid-column:1 / -1; display:block; padding:18px 14px; color:var(--dim); font-size:16px; border:1px solid var(--line); border-radius:14px;}
.roster .none a{display:inline-flex; align-items:center; min-height:44px;}
@media (max-width:359px){ .roster{grid-template-columns:repeat(2,1fr);} }
@media (min-width:600px){ .roster{grid-template-columns:repeat(4,1fr);} }

/* transmissions */
.ep{display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line-bright); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink); background:linear-gradient(180deg, #120b06 0%, var(--deep) 100%);
  transition:border-color .2s; -webkit-tap-highlight-color:transparent;}
.ep:active{border-color:var(--amber);}
.ep-art{display:block; width:100%; aspect-ratio:1200/630; object-fit:cover; background:var(--panel); border-bottom:1px solid var(--line);}
.ep-t{display:block; padding:14px 16px 16px;}
.ep-k{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ember-soft); margin:0 0 6px;}
.ep-t b{display:block; font-family:var(--display); font-weight:400; font-size:clamp(19px, 5.4vw, 24px); line-height:1.12; color:var(--amber); margin:0 0 8px;}
.ep-d{display:block; font-size:15.5px; line-height:1.5; color:var(--dim);}
.ep-m{display:block; margin-top:10px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);}
@media (min-width:600px){ .ep{grid-template-columns:200px 1fr;} .ep-art{height:100%; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--line);} }

/* the crew */
.crewcard{display:flex; align-items:flex-start; gap:14px; padding:14px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.015);}
.crewcard .pic{flex:0 0 72px; width:72px; height:72px; border-radius:14px; overflow:hidden; border:1px solid var(--line-bright); background:var(--panel); display:grid; place-items:center;}
.crewcard .pic img{width:100%; height:100%; object-fit:cover; display:block;}
.crewcard .pic .glyph{font-family:var(--display); font-size:30px; color:var(--brass);}
.crewcard .ct{min-width:0; flex:1;}
.crewcard .who{margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber);}
.crewcard .who span{color:var(--faint);}
.crewcard .say{margin:6px 0 0; font-size:17px; color:var(--ink); font-style:italic; min-height:1.55em;}
.crewcard .note{margin:8px 0 0; font-size:15.5px; color:var(--dim); font-style:normal;}
.crewcard .note .lbl{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember-soft); font-style:normal; margin:0 0 4px;}
.crewcard .go{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0;}
.crewcard.host{align-items:center;}
.crewcard.host .bowl{flex:0 0 96px; width:96px; height:96px; border-radius:50%; overflow:hidden; border:1px solid var(--line-bright); background:var(--panel);
  box-shadow:0 0 0 5px rgba(255,176,32,.06), 0 0 40px -8px rgba(255,176,32,.45); display:grid; place-items:center;}
.crewcard.host .bowl img{width:100%; height:100%; object-fit:cover; display:block;}
.crewcard.host .bowl .fallback{font-family:var(--display); font-size:40px; color:var(--brass);}

/* since you were here */
.mem{padding:14px; border:1px solid var(--line-bright); border-radius:16px; background:linear-gradient(180deg, #17100a 0%, var(--deep) 100%);}
.mem .k{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ember-soft); margin:0 0 6px;}
.mem p{margin:0 0 8px; font-size:16.5px; line-height:1.5;}
.mem .go{display:flex; flex-wrap:wrap; gap:8px;}
.mem .old{border-left:2px solid var(--line-bright); padding-left:12px; color:var(--dim); margin:0 0 10px;}

/* the log */
.loglist{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.loglist li{display:grid; grid-template-columns:28px 1fr; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; font-size:15.5px; line-height:1.45; min-width:0;}
.loglist li.empty{display:block; border:0; padding:0;}
.loglist .g{font-family:var(--mono); color:var(--amber); font-size:18px; line-height:1.2; text-align:center;}
.loglist .w{min-width:0; overflow-wrap:anywhere;}
.loglist .w .time{display:block; margin-top:4px;}
.loglist .w b{font-weight:600; color:var(--ink);}
.loglist .w a{color:var(--amber-soft); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; min-width:44px;}
.loglist .w .names{color:var(--dim);}

/* the station clock */
.clockface{padding:14px 16px; border:1px solid var(--line-bright); border-radius:16px; background:linear-gradient(180deg, #120b06 0%, var(--deep) 100%); font-family:var(--mono);}
.clockface .row{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 14px; padding:8px 0; border-bottom:1px solid var(--line);}
.clockface .row:last-child{border-bottom:0;}
.clockface .lbl{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);}
.clockface .val{font-size:16px; color:var(--ink); overflow-wrap:anywhere;}
.clockface .val.big{font-size:clamp(22px, 6.4vw, 30px); color:var(--amber); letter-spacing:.06em;}
.clockface .val small{font-size:12.5px; color:var(--dim); letter-spacing:.04em;}
.unfold{margin:10px 0 0; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.015);}
.unfold summary{display:flex; align-items:center; min-height:48px; padding:6px 16px; cursor:pointer; list-style:none; font-family:var(--mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-soft);}
.unfold summary::-webkit-details-marker{display:none;}
.unfold summary::before{content:"▸"; margin-right:10px; color:var(--amber); transition:transform .2s var(--ease);}
.unfold[open] summary::before{transform:rotate(90deg);}
.unfold-body{padding:2px 16px 14px; font-size:15.5px; line-height:1.55; color:var(--dim);}
.unfold-body p{margin:0 0 10px;}
.unfold-body a{display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--amber-soft);}
.unfold-body ul{margin:0 0 10px; padding-left:20px;}

/* glossary */
.gloss{margin:0; display:grid; grid-template-columns:1fr; gap:2px 12px;}
.gloss dt{font-family:var(--mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin:12px 0 2px;}
.gloss dd{margin:0; font-size:15.5px; line-height:1.5; color:var(--dim);}
@media (min-width:600px){ .gloss{grid-template-columns:max-content 1fr;} .gloss dt{margin:10px 0 0;} .gloss dd{margin-top:10px;} }

/* footer (phone.html) */
.foot{margin:28px 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--faint); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; line-height:1.8;}
.foot .links{margin:0 0 12px;}
.foot .console{display:block; margin:0 0 12px; text-transform:none; letter-spacing:0; font-family:var(--body); font-size:15px; color:var(--dim);}
.foot .console a{color:var(--amber-soft); display:inline-flex; align-items:center; min-height:44px;}
.foot .tag{display:block;}

/* thumb bar: the one deliberate fixed layer — big targets where the thumb already is */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  background:rgba(10,6,4,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line-bright);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));}
.bar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; border-radius:10px; text-decoration:none; color:var(--dim);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; -webkit-tap-highlight-color:transparent;}
.bar a .ic{font-size:18px; line-height:1; color:var(--amber);}
.bar a:active{background:var(--panel); color:var(--ink);}

/* noscript */
.noscript{padding-top:24px; color:var(--dim);}
.noscript a{display:inline-flex; align-items:center; min-height:44px;}

/* plain pages: corrections.html, contribute.html */
.page{max-width:720px; margin:0 auto; padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 40px;}
.page .top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 12px; border-bottom:1px solid var(--line); margin:0 0 22px;}
.page .brand{display:inline-flex; align-items:center; min-height:48px; text-decoration:none; color:var(--amber); font-family:var(--display); font-size:22px; letter-spacing:.06em; text-shadow:0 0 18px rgba(255,176,32,.35);}
.page h1{font-family:var(--display); font-size:clamp(26px, 7vw, 40px); line-height:1.06; color:var(--amber); margin:0 0 6px; font-weight:400;}
.page h2{font-family:var(--mono); font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--ember-soft); margin:28px 0 8px; font-weight:400;}
.page h2.langmark{margin-top:40px; padding-top:18px; border-top:1px dashed var(--line-bright); color:var(--amber);}
.page p, .page li{font-size:17px; line-height:1.55; color:var(--ink);}
.page .lead{color:var(--dim); margin:0 0 12px;}
.page ul, .page ol{padding-left:22px;}
.page li{margin:0 0 8px;}
.page li b{color:var(--amber-soft); font-weight:600;}
.page .time{display:block;}
.page a{display:inline-flex; align-items:center; min-height:44px;}
.page .links a{min-height:44px;}
.page .promise{padding:14px 16px; border:1px solid var(--line-bright); border-radius:16px; background:linear-gradient(180deg, #17100a 0%, var(--deep) 100%); margin:12px 0 0;}
.page .promise p{margin:0;}
.corr{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.corr li{padding:12px 14px; border:1px solid var(--line); border-radius:12px; margin:0;}
.corr li b{display:block; color:var(--ink); font-weight:600;}

/* motion, safe areas, big screens */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none !important; animation:none !important;} html{scroll-behavior:auto;} }
@media (min-width:700px){ body{font-size:18px;} .wrap{padding-top:10px;} }