:root{--ink:#12141A;--ink-2:#0A0B0F;--shelf:#1A1D25;--shelf-2:#1F222C;--line:#2A2E38;--line-2:#3A3E48;
--paper:#EFE6D2;--paper-2:#E4D9C1;--paper-3:#E8DEC7;--text:#E6DFD0;--muted:#9A937F;--muted-2:#CFC7B5;--brown:#1E1B16;
--brass:#B8945A;--brass-2:#D4B47A;--brass-3:#5C4C33;--red:#B8443A;--rust:#8C4A2F;--green:#7FBF8E;--live:#D96A5A}
*{box-sizing:border-box}
html,body{overflow-x:clip}
a,button,.trophy{-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--ink);color:var(--text);font-family:'Geist',system-ui,sans-serif;font-size:15px;line-height:1.45}
a{color:var(--brass-2)}a:hover{color:#EBD3A3}
.mono{font-family:'Courier Prime',ui-monospace,monospace}.serif{font-family:'Instrument Serif',Georgia,serif}.vt{font-family:'VT323',ui-monospace,monospace}
.wrap{max-width:1220px;margin:0 auto;padding:18px 28px 52px;display:flex;flex-direction:column;gap:20px}
@media(max-width:640px){.wrap{padding:14px 16px 40px}}
header.top{background:var(--ink-2);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
header.top .scan{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0,rgba(255,255,255,.07) 1px,transparent 1px,transparent 4px);pointer-events:none}
header.top .roll{position:absolute;left:0;right:0;top:0;height:26px;background:rgba(255,255,255,.05);animation:vhsRoll 9s linear infinite;pointer-events:none}
@keyframes vhsRoll{0%{transform:translateY(-120%)}100%{transform:translateY(900%)}}
@media(prefers-reduced-motion:reduce){header.top .roll{animation:none;display:none}}
.head{position:relative;max-width:1220px;margin:0 auto;padding:22px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.head.slim{padding:14px 28px;gap:12px 20px}
@media(max-width:640px){.head{padding:16px}}
.portrait{width:104px;height:130px;object-fit:cover;background:#2A2E38;border:4px solid var(--brass);display:block}
.slim .portrait{width:44px;height:55px;border-width:2px}
.plate{background:var(--brass);color:var(--brown);font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:2px;padding:4px 10px}
.kicker{font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:3px;color:var(--muted)}
.counter{display:flex;gap:6px;flex-wrap:wrap}
.digit{width:50px;height:70px;overflow:hidden;border-radius:6px;border:1px solid var(--line-2);background:#1E212A;font-family:'VT323',monospace;font-size:64px;line-height:70px;text-align:center}
.digit.last{background:#2C2418;border-color:var(--brass);color:var(--brass-2)}
.digit .reel{display:block;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.digit .reel span{display:block;height:70px}
.digit.gap{margin-left:10px}
@media(max-width:640px){.digit{width:46px;height:64px;font-size:58px;line-height:64px}.digit .reel span{height:64px}.digit.gap{margin-left:6px}
header.is-hero .head{display:grid;grid-template-columns:auto 1fr;gap:16px 14px;padding:16px 14px 18px}
header.is-hero .head>div:nth-child(1){grid-row:1;grid-column:1}
header.is-hero .head>div:nth-child(3){grid-row:1;grid-column:2;text-align:left!important;flex:none!important;gap:8px!important;justify-content:center}
header.is-hero .head>div:nth-child(2){grid-row:2;grid-column:1/-1;flex:none!important}
header.is-hero .portrait{width:84px;height:105px;border-width:3px}
header.is-hero .plate{font-size:9px;letter-spacing:1px;padding:3px 6px}
header.is-hero .greet{font-size:19px}
header.is-hero .duty{font-size:17px}
header.is-hero .kicker{font-size:10px;letter-spacing:2px}
header.is-hero .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:24px}
header.is-hero .counter{gap:5px;justify-content:center}
.card .stamp{position:static;display:inline-block;margin:0 0 10px 6px;font-size:13px}}
.stats{display:flex;flex-wrap:wrap;gap:8px 32px;font-family:'VT323',monospace;font-size:24px;line-height:1.1}
.stats small{display:block;color:var(--muted);font-size:18px}
.greet{font-family:'Instrument Serif',serif;font-size:24px;line-height:1.2;margin:0}
.duty{font-family:'VT323',monospace;font-size:22px;line-height:1.15}
.on{color:var(--live)}.ok{color:var(--green)}.off{color:var(--muted)}
nav.drawers{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;background:var(--shelf);padding:8px;border:1px solid var(--line)}
nav.drawers a{background:var(--shelf-2);border:1px solid var(--line);padding:12px 10px 10px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
nav.drawers a .lbl{display:flex;align-items:center;justify-content:center;width:100%;min-height:38px;box-sizing:border-box;background:#3A3326;color:var(--text);font-family:'Courier Prime',monospace;font-size:12px;line-height:1.3;letter-spacing:.5px;padding:3px 4px;border:1px solid var(--brass-3);box-shadow:inset 0 0 0 2px #2A251C}
nav.drawers a .handle{width:42px;height:9px;border:2px solid var(--brass-3);border-top:0;border-radius:0 0 9px 9px}
.lock{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#EAD6A6,#B8945A 45%,#6E5A3A);box-shadow:0 1px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.35)}
.lock::after{content:'';position:absolute;left:50%;top:3px;width:2px;height:6px;margin-left:-1px;border-radius:1px 1px 0 0;background:#16130E}
a.back .lock{background:radial-gradient(circle at 35% 30%,#8A8E98,#555A66 50%,#30343C)}
nav.drawers a[aria-current=page]{background:#232733;border-color:var(--brass)}
nav.drawers a[aria-current=page] .lbl{background:var(--brass);color:var(--brown);font-weight:700}
nav.drawers a[aria-current=page] .handle{border-color:#8C7044}
nav.drawers a[aria-current=page] .lbl{border-color:var(--brass-2)}
nav.drawers a.back{background:var(--shelf);color:var(--muted)}nav.drawers a.back .lbl{background:var(--line);color:var(--muted)}nav.drawers a.back .handle{border-color:var(--line-2)}
@media(max-width:640px){nav.drawers{grid-template-columns:repeat(2,1fr)}nav.drawers a{padding:10px 6px 8px}}
.cols{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:24px}
.side{flex:1 1 300px;max-width:380px;display:flex;flex-direction:column;gap:20px}
@media(max-width:900px){.side{max-width:none}}
.card{background:var(--paper);color:var(--brown);font-family:'Courier Prime',monospace}
.card a{color:var(--rust)}
.shelf{background:var(--shelf);border:1px solid var(--line);padding:16px 18px}
.shelf.dashed{border-style:dashed;border-color:var(--brass-3)}
h1,h2,h3{font-family:'Instrument Serif',serif;font-weight:400;margin:0}
h1{font-size:34px;line-height:1.05}h2{font-size:26px}h3{font-size:21px}
.sub{font-family:'Courier Prime',monospace;font-size:12px;color:var(--muted)}
.card .sub{color:#6B6458}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.more{font-family:'Courier Prime',monospace;font-size:13px;white-space:nowrap}
.stamp{position:absolute;right:20px;top:14px;transform:rotate(-8deg);border:3px solid var(--red);color:var(--red);font-weight:700;font-size:16px;letter-spacing:2px;padding:4px 10px;font-family:'Courier Prime',monospace}
.stamp.muted{border-color:#A89C80;color:#A89C80}
.reply-card{border-top:3px solid var(--red)}
.reply-card.era-old{border-top-color:var(--brass);background:var(--paper-3)}
.reply-card .meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:14px;padding:16px 24px 8px;border-bottom:1px solid #C9BFA8}
.reply-card .text{font-weight:700;font-size:30px;line-height:1.3;margin:0;padding:30px 28px;text-align:center;word-break:break-word}
.reply-card.small .text{font-size:20px;padding:18px 22px}
.reply-card .meta-end{display:inline-flex;align-items:center;gap:10px}
.pin-btn{display:inline-grid;place-items:center;width:30px;height:30px;margin:-6px -8px -6px 0;padding:0;border:1px solid transparent;border-radius:50%;background:none;color:#8A8170;cursor:pointer;transition:color .15s,background .15s,transform .15s}
.pin-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transform:rotate(0deg);transition:transform .2s}
.pin-btn:hover{color:var(--ink);background:rgba(0,0,0,.06)}
.pin-btn:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.pin-btn[aria-pressed="true"]{color:var(--red)}
.pin-btn[aria-pressed="true"] svg{fill:currentColor;transform:rotate(-20deg)}
.pin-btn.pop{animation:pinpop .35s ease}
@keyframes pinpop{40%{transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){.pin-btn.pop{animation:none}}
@media(max-width:640px){.reply-card .text{font-size:22px;padding:22px 16px}}
.fold-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--paper-2);border:0;border-top:1px dashed #A89C80;padding:12px 24px;font-family:'Courier Prime',monospace;font-size:15px;color:var(--brown);cursor:pointer;text-align:left}
.sources{display:none;font-family:'Courier Prime',monospace;font-size:14px;color:var(--brown)}
.sources.open{display:block}
.src{padding:12px 24px;display:grid;grid-template-columns:64px minmax(0,1fr) 54px;gap:12px;align-items:center;box-shadow:inset 0 6px 6px -6px rgba(0,0,0,.35);background:var(--paper-3);transform-origin:top center}
.src:nth-child(even){background:#E1D6BC}.src:last-child{border-bottom:3px solid var(--red)}
.src b{text-align:right}.src u{text-decoration-thickness:2px;text-underline-offset:3px}
.src .where{color:#6B6458;font-size:12px}
.sources.open .src{animation:unfold .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes unfold{0%{transform:perspective(900px) rotateX(-92deg);opacity:0}70%{transform:perspective(900px) rotateX(8deg);opacity:1}100%{transform:none;opacity:1}}
.sources.closing .src{animation:foldup .3s ease-in both}
@keyframes foldup{0%{transform:none;opacity:1}100%{transform:perspective(900px) rotateX(-92deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.sources.open .src,.sources.closing .src{animation:none}}
@media(max-width:640px){.src{grid-template-columns:48px minmax(0,1fr);padding:10px 14px}.src a.act{grid-column:2}}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.tile{text-decoration:none;color:var(--brown);background:var(--paper);padding:14px 16px;font-family:'Courier Prime',monospace;font-size:15px;text-align:center;display:block}
.tile:nth-child(odd){background:#E7DDC6}
.tile.dark{color:var(--text);background:var(--shelf);border:1px solid var(--line);font-family:'Geist',sans-serif}
.tile small{display:block;font-size:12px;color:#6B6458;margin-top:4px}.tile.dark small{color:var(--muted)}
.trophy{background:#171A21;border:1px solid #3A3326;padding:26px 24px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.trophy .quote{font-family:'Instrument Serif',serif;font-size:30px;line-height:1.2;margin:4px 0 0;max-width:640px;word-break:break-word}
.chips{display:flex;flex-wrap:wrap;gap:6px;font-family:'Courier Prime',monospace;font-size:12px}
.chips a{color:var(--brown);border:1px solid #A89C80;padding:2px 8px;text-decoration:none}
.search-box{display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--brown);padding:6px 0}
.search-box input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--brown);font-family:'Courier Prime',monospace;font-size:14px}
.otd a{display:block;text-decoration:none;color:var(--text);border-left:3px solid var(--line-2);padding-left:12px}
.otd a:first-child{border-left-color:var(--brass)}
.bar{display:block;height:4px;background:#232733;margin-top:4px}.bar span{display:block;height:4px;background:#5C6070}
.bar.first span{background:var(--brass)}
.list{display:flex;flex-direction:column;gap:8px}
.msg{background:var(--shelf);border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.msg .who{font-family:'Courier Prime',monospace;font-size:12px;color:var(--muted)}
.msg .body{word-break:break-word}
.msg.deleted{border-style:dashed;border-color:var(--brass-3)}
.emoji{width:22px;height:22px;vertical-align:-5px;object-fit:contain}
.linkish{text-decoration:underline;text-underline-offset:2px;word-break:break-all;opacity:.85}
.mention{color:#C9B6F2;background:rgba(201,182,242,.12);padding:0 2px;border-radius:3px}
.card .mention,.tile .mention{color:#5B3FA0;background:rgba(91,63,160,.12)}
mark{background:#5C4C33;color:#F2E6C8;padding:0 2px}
table.board{width:100%;border-collapse:collapse;font-family:'Courier Prime',monospace;font-size:14px}
table.board th{text-align:left;font-weight:400;font-size:11px;letter-spacing:1px;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
table.board td{padding:8px;border-bottom:1px solid #23262F;vertical-align:top}
table.board td.n{text-align:right;color:var(--brass-2)}
@media(max-width:640px){table.board:not(.stack){display:block;overflow-x:auto}table.board:not(.stack) td,table.board:not(.stack) th{white-space:nowrap}
table.stack thead{display:none}
table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
table.stack tr{padding:12px 14px;border-bottom:1px solid var(--line)}
table.stack td{border:0;padding:2px 0}
table.stack td.n{text-align:left}
table.stack td[data-label]::before{content:attr(data-label) "  ";color:var(--muted);font-size:11px;letter-spacing:1px;font-family:'Courier Prime',monospace}
table.stack td:empty{display:none}}
.login-head{justify-content:center;text-align:center;flex-direction:column;gap:12px;padding:44px 16px}
.login-head .portrait{width:120px;height:150px}
.login-body{display:flex;flex-direction:column;align-items:center;gap:18px;padding:40px 16px}
.ticket{display:flex;text-decoration:none;color:var(--brown);font-family:'Courier Prime',monospace;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));transition:transform .15s}
.ticket:hover{transform:translateY(-2px) rotate(-1deg);color:var(--brown)}
.ticket .stub{background:var(--brass);padding:14px 16px;border-right:2px dashed var(--brown);writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:3px;font-weight:700}
.ticket .face{background:var(--paper);padding:14px 22px;display:flex;flex-direction:column;gap:2px}
.ticket .face b{font-size:18px}.ticket .face span{font-size:11px;letter-spacing:2px;color:#6B6458}
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--brass)}
.tabs a{background:var(--shelf);color:var(--muted-2);border:1px solid var(--line);border-bottom:0;padding:9px 14px;font-family:'Courier Prime',monospace;font-size:14px;text-decoration:none}
.tabs a[aria-current=page]{background:var(--brass);color:var(--brown);border-color:var(--brass);font-weight:700}
.health{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.health div{background:var(--shelf);padding:12px 14px}
.health .v{font-family:'VT323',monospace;font-size:24px}
.btn{background:transparent;border:1px solid var(--brass);color:var(--brass-2);padding:5px 12px;font-family:'Courier Prime',monospace;font-size:13px;cursor:pointer}
.btn:hover{background:#2C2418}.btn.solid{background:var(--brass);color:var(--brown)}.btn.danger{border-color:var(--red);color:#E07A6E}
.card .btn{border-color:var(--brown);color:var(--brown)}.card .btn.solid{background:var(--brown);color:var(--paper)}
input.field,select.field,textarea.field{background:var(--ink);color:var(--text);border:1px solid var(--line-2);padding:7px 9px;font-family:'Courier Prime',monospace;font-size:14px;min-width:0}
.card input.field{background:transparent;color:var(--brown);border:0;border-bottom:2px solid var(--brown)}
.form-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.form-row label{display:flex;flex-direction:column;gap:4px;font-family:'Courier Prime',monospace;font-size:12px;color:var(--muted)}
.word{display:inline-block;padding:2px 5px;margin:2px;border-bottom:3px solid var(--c,#888);font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.legend span::before{content:'';display:inline-block;width:10px;height:10px;background:var(--c);margin-right:6px;vertical-align:-1px}
.pager{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin:6px 0}
.pg{display:inline-flex;align-items:center;gap:10px;min-width:130px;justify-content:center;padding:10px 18px;border:1px solid var(--brass);background:var(--shelf);color:var(--brass-2);font-family:'Courier Prime',monospace;font-size:16px;font-weight:700;text-decoration:none;transition:background .15s,color .15s}
.pg .arr{font-size:26px;line-height:1}
a.pg:hover,a.pg:focus-visible{background:var(--brass);color:var(--brown)}
.pg.off{border-color:var(--line);color:var(--line-2)}
.pg-num{font-family:'VT323',monospace;font-size:24px;color:var(--muted-2);min-width:120px;text-align:center}
@media(max-width:640px){.pg{min-width:0;padding:9px 12px;font-size:14px}.pg-num{min-width:0;font-size:20px}}
.chip-label{font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:2px;color:#6B6458;margin:12px 0 5px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
details.passing summary{cursor:pointer;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;list-style:none}
details.passing summary::before{content:'▸';color:var(--brass-2);transition:transform .2s}
details.passing[open] summary::before{transform:rotate(90deg)}
details.passing summary::-webkit-details-marker{display:none}
details.passing[open] summary{margin-bottom:12px}
.year-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:22px}
@media(max-width:640px){.year-grid{grid-template-columns:1fr}}
.cap{font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:2px;color:var(--muted);margin-bottom:6px}
.best{display:block;color:var(--text);text-decoration:none;font-size:16px;line-height:1.45;border-left:2px solid var(--brass-3);padding-left:12px}
.best:hover{border-left-color:var(--brass-2)}
.events{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line-2);display:flex;flex-direction:column;gap:6px;font-family:'Courier Prime',monospace;font-size:14px;color:var(--brass-2)}
.plays{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.play{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--red);color:#fff;font-family:'Courier Prime',monospace;font-weight:700;font-size:14px;text-decoration:none;border:1px solid #D9685C}
.play:hover{background:#C9534A}
.swatch{width:52px;height:34px;padding:0;border:1px solid #A89C80;background:none;cursor:pointer}
.aud-intro p{max-width:70ch;line-height:1.55;color:var(--muted-2);margin:8px 0 0}
.aud-intro b{color:var(--text)}
.aud-lead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.aud-lead .cap{margin:0 4px 0 0}
.aud-chip{font-family:'Courier Prime',monospace;font-size:13px;padding:3px 10px;border:1px solid var(--line-2)}
.aud-chip.first{border-color:var(--brass);color:var(--brass-2);font-weight:700}
.aud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.aud{background:var(--shelf);border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.aud.picked{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.aud-label{background:var(--paper);color:var(--brown);padding:8px 10px;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--red);font-family:'Courier Prime',monospace}
.aud-label b{display:block;font-size:17px}.aud-label span{font-size:11px;letter-spacing:1.5px;color:#6B6458}
.aud-label .aud-n{font-family:'VT323',monospace;font-size:34px;line-height:1;letter-spacing:0;color:var(--brown)}
.aud-plays{display:flex;gap:8px}.aud-plays .btn{flex:1;padding:8px 6px;font-size:14px}
[data-audio].on{background:var(--brass);color:var(--brown)}
.aud-who{font-size:12px;color:var(--muted-2);min-height:16px;line-height:1.4}
.aud .btn[data-vote]{padding:8px;font-size:14px}
.aud-styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.aud-styles .btn{display:grid;grid-template-columns:1fr auto;gap:4px 12px;text-align:left;padding:12px 14px;font-size:15px}
.aud-styles .aud-n-small{font-family:'VT323',monospace;font-size:26px;line-height:1}
.aud-styles .aud-who{grid-column:1 / -1;color:inherit;opacity:.8}
/* ---- recordings: call list, summary card, talk lanes, transcript, clips ---- */
.crumbs{font-size:13px}
.rec-list{display:flex;flex-direction:column;gap:10px}
.rec-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--paper);color:var(--brown);padding:14px 20px;text-decoration:none;font-family:'Courier Prime',monospace;border-left:4px solid var(--brass);transition:transform .18s ease,box-shadow .18s ease}
.rec-row:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.rec-row.live{border-left-color:var(--red)}
.rec-no{font-family:'Courier Prime',monospace;font-size:12px;color:#6B6458;letter-spacing:1px}
.rec-title{font-family:'Instrument Serif',serif;font-size:26px;line-height:1.1;overflow-wrap:anywhere}
.rec-meta{font-size:13px;color:#6B6458;margin-top:4px}
.rec-tag{font-size:12px;font-weight:700;letter-spacing:1px;border:2px solid currentColor;padding:3px 8px;white-space:nowrap;transform:rotate(-3deg);justify-self:end}
.rec-tag.live{color:var(--red)}.rec-tag.audio{color:#4A6A4A}.rec-tag.pending{color:#8C6A2F}.rec-tag.gone{color:#8C7A5C}
@media(max-width:640px){.rec-row{grid-template-columns:1fr;gap:6px}.rec-tag{justify-self:start}}
.rec-sum{position:relative;padding:18px 24px}
.rec-sum .rec-name{font-size:30px;font-weight:700;margin:6px 0 10px;padding-right:120px;overflow-wrap:anywhere}
.stampbox{position:absolute;right:22px;top:16px;transform:rotate(-7deg);border:3px solid #4A6A4A;color:#4A6A4A;font-weight:700;font-size:16px;letter-spacing:2px;padding:4px 10px}
.stampbox.live{border-color:var(--red);color:var(--red)}
@media(max-width:640px){.stampbox{position:static;display:inline-block;transform:rotate(-4deg);margin-bottom:10px}.rec-sum .rec-name{padding-right:0}}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;font-size:14px}
.kv-grid small{display:block;color:#6B6458;font-size:12px}
.audio-audio,.audio-live{color:var(--red);font-weight:700}.audio-gone{color:#8C7A5C}
.player-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:14px}
.play-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--brass);background:#232733;color:var(--brass-2);font-size:18px;cursor:pointer}
.play-btn:hover{background:#2C2418}
.vt-clock{font-family:'VT323',monospace;font-size:30px;font-variant-numeric:tabular-nums}.vt-clock .dim{color:#6B6F7A}
/* The player sticks to the top while the transcript scrolls under it, slimmer once it's stuck. */
.player{position:sticky;top:0;z-index:15;transition:padding .2s}
.player.stuck{padding-top:10px;padding-bottom:10px;box-shadow:0 10px 24px rgba(0,0,0,.55);border-color:var(--brass-3)}
.player.stuck .player-top{margin-bottom:8px}.player.stuck .player-hint{display:none}
.player.stuck .play-btn{width:38px;height:38px;font-size:15px}.player.stuck .vt-clock{font-size:24px}
.player.stuck .lane{height:7px}.player.stuck .lanes{gap:3px 12px}.player.stuck .lane-name{font-size:11px;line-height:1}
.player-sentinel{height:1px;margin-bottom:-1px}
[data-follow][aria-pressed=true],[data-zoom][aria-pressed=true]{background:var(--brass);color:var(--brown)}
@media(max-width:640px){.player{top:68px}}
.lanes{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:5px 12px;align-items:center}
.lanes .lane{cursor:pointer}
.lane-name{background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:'Courier Prime',monospace;font-size:13px;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-name.off{color:#5C6070;text-decoration:line-through}
.lane{position:relative;height:12px;background:#232733;transition:opacity .2s,height .2s;overflow:hidden}
.lane-track{position:absolute;top:0;bottom:0;left:0;width:calc(100% * var(--zoom,1));transform:translateX(calc(-100% * var(--shift,0)))}
.lane.off{opacity:.25}
.lane span{position:absolute;top:0;bottom:0;background:var(--c);min-width:2px}
span.lane-name.laugh{color:var(--brass-2);cursor:default}
.lane.laugh{background:none}.lane.laugh span{background:var(--brass-2)}
.playhead{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--live);left:calc(132px + (100% - 132px) * var(--p,0));pointer-events:none}
@media(max-width:640px){.lanes{grid-template-columns:76px minmax(0,1fr);gap:5px 8px}.playhead{left:calc(84px + (100% - 84px) * var(--p,0))}}
.tx-wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.tx{flex:999 1 560px;min-width:0}
.tx-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid #C9BFA8}
.tx-head h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:26px;margin:0}
.tx-head input{background:transparent;border:0;border-bottom:1px solid var(--brown);font:13px 'Courier Prime',monospace;width:170px;color:var(--brown);outline:none;padding:2px 0}
.tx-more{width:100%;background:var(--paper-2);border:0;border-bottom:1px dashed #A89C80;padding:8px;font:13px 'Courier Prime',monospace;color:#6B6458;cursor:pointer}
.tx-row{display:grid;grid-template-columns:52px 118px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 20px;border-left:4px solid transparent;font-size:15px;line-height:1.4;scroll-margin-top:80px}
.tx-row:nth-of-type(even){background:#E9DFC9}
.tx-row.now,.tx-row:target{background:#FFF6DC;border-left-color:var(--red)}
.tx-time{background:none;border:0;padding:0;text-align:left;font:13px 'Courier Prime',monospace;color:#6B6458;cursor:pointer;font-variant-numeric:tabular-nums}
.tx-name{font-weight:700;font-size:14px;color:color-mix(in srgb,var(--c) 45%,#1E1B16);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-row.john .tx-text{font-style:italic}
.tx-text{min-width:0;overflow-wrap:anywhere}
.tx-acts{display:flex;gap:4px}
.tx-acts button{background:transparent;border:1px solid #A89C80;padding:2px 7px;font:12px 'Courier Prime',monospace;color:var(--brown);cursor:pointer}
.tx-acts button:hover{background:var(--brown);color:var(--paper)}
.fixed{font-size:11px;color:#4A6A4A;border:1px solid #8FA88F;padding:0 5px;margin-left:6px;white-space:nowrap}
.dropped-tag{color:#8C4A2F;border-color:#C9A08F}
.laughnote{font-size:12px;color:#8C6A2F;font-style:italic;margin-top:2px}
.tx-row.dropped{display:none;opacity:.75}
body.show-dropped .tx-row.dropped{display:grid}
.tx-row.hidden-speaker,.tx-row.no-match,body.show-dropped .tx-row.hidden-speaker,body.show-dropped .tx-row.no-match{display:none}
.tx-fix{display:flex;flex-wrap:wrap;gap:6px}
.tx-fix[hidden]{display:none}
.tx-fix input{flex:1 1 220px;font:15px 'Courier Prime',monospace;padding:4px 6px;border:1px solid #A89C80;background:#FFF9EC;color:var(--brown)}
@media(max-width:640px){.tx-row{grid-template-columns:44px minmax(0,1fr);padding:9px 12px}.tx-text,.tx-acts{grid-column:1 / -1}}
.clip-card{border-top:3px solid var(--red);padding:16px 18px}
.clip-card h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:26px;margin:0}
.clip-range{font-size:13px;color:#6B6458}
.clip-who{display:flex;gap:6px;margin-top:10px}.clip-who .btn{flex:1;padding:6px}
.clip-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);padding:10px 12px;font-size:14px}
.clip-play{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--brass);background:transparent;color:var(--brass-2);cursor:pointer;font-size:12px}
.clip-play.on,.clip-play:hover{background:var(--brass);color:var(--brown)}
.clip-play.big{width:44px;height:44px;font-size:16px}
.funny{display:flex;gap:12px;align-items:flex-start;background:var(--shelf);border:1px solid var(--line);border-left:3px solid var(--c);padding:12px 14px}
.funny a{color:var(--text);text-decoration:none;min-width:0;display:block}
.funny-quote{font-family:'Instrument Serif',serif;font-size:21px;line-height:1.2;display:block;overflow-wrap:anywhere}
.funny small{display:block;margin-top:5px;font-family:'Courier Prime',monospace;font-size:12px;color:var(--muted)}
.funny small b{color:var(--c);font-weight:700}
.funny-mark{font-size:22px;line-height:30px}
.clip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
.clip-tile{display:flex;gap:14px;align-items:flex-start;background:var(--shelf);border:1px solid var(--line);padding:14px 16px}
.clip-quote{font-family:'Instrument Serif',serif;font-size:22px;line-height:1.2;overflow-wrap:anywhere}
/* The home page's live call card: a camcorder viewfinder in the archive's colours. */
.viewfinder{display:block;position:relative;padding:20px 26px 18px;text-decoration:none;color:var(--text);background:#0A0B0F;border:1px solid var(--line);overflow:hidden;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
.viewfinder:hover{border-color:var(--brass-3)}
.vf-corner{position:absolute;width:18px;height:18px;border:2px solid var(--brass)}
.vf-corner.tl{top:8px;left:8px;border-right:0;border-bottom:0}.vf-corner.tr{top:8px;right:8px;border-left:0;border-bottom:0}
.vf-corner.bl{bottom:8px;left:8px;border-right:0;border-top:0}.vf-corner.br{bottom:8px;right:8px;border-left:0;border-top:0}
.vf-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:'VT323',monospace;font-size:24px;line-height:1}
.vf-rec{color:var(--live);display:inline-flex;align-items:center;gap:7px}
.vf-dot{width:11px;height:11px;border-radius:50%;background:var(--live);animation:recBlink 1.6s infinite}
/* On for most of the beat with the glow swelling, then a quick off: how a camcorder's light blinks. */
@keyframes recBlink{0%{opacity:1;box-shadow:0 0 4px var(--live)}40%{opacity:1;box-shadow:0 0 14px 3px var(--live)}62%{opacity:1;box-shadow:0 0 8px var(--live)}64%,96%{opacity:.12;box-shadow:none}100%{opacity:1;box-shadow:0 0 4px var(--live)}}
.vf-rec{animation:recText 1.6s infinite}
@keyframes recText{0%,62%{opacity:1}64%,96%{opacity:.55}}
/* A faint tracking band rolls down the viewfinder, like the header's. */
.viewfinder::after{content:'';position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(transparent,rgba(255,255,255,.045),transparent);pointer-events:none;animation:vfRoll 7s linear infinite}
.viewfinder.standby::after{animation-duration:14s;opacity:.6}
@keyframes vfRoll{0%{transform:translateY(-30px)}100%{transform:translateY(340px)}}
.vf-square{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.vf-timer{color:var(--text);font-variant-numeric:tabular-nums}
.vf-where{color:var(--muted);font-size:18px}
.vf-title{font-family:'Instrument Serif',serif;font-size:30px;line-height:1.1;margin:12px 0 10px}
.vf-people{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.vf-chip{font-family:'Courier Prime',monospace;font-size:12px;padding:2px 9px;border:1px solid var(--c);color:var(--c);display:inline-flex;align-items:center;gap:6px}
.vf-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c)}
.vf-chip.john{--c:var(--brass-2)}
/* Three one-row lines in a box of fixed height, anchored to the bottom: new lines slide in, old ones glide up and out,
   and nothing outside the box ever moves. */
.vf-lines{--row:26px;position:relative;height:calc(var(--row) * 3);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  border-left:2px solid var(--line-2);padding-left:12px}
.vf-line{flex:none;height:var(--row);line-height:var(--row);font-size:15px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-line:last-child{color:var(--text)}
.vf-line b{color:var(--c);font-family:'Courier Prime',monospace;font-size:13px;margin-right:4px}
.vf-line.john{font-style:italic}
.vf-line{transition:color .5s,opacity .45s}
.vf-line.entering{animation:lineIn .45s cubic-bezier(.2,.8,.3,1) both}
.vf-line.leaving{opacity:0}
@keyframes lineIn{from{opacity:0}to{opacity:1}}
.vf-caret{display:inline-block;width:.55em;height:1em;margin-left:2px;vertical-align:-2px;background:var(--c);animation:caretBlink .7s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
.viewfinder.swapin{animation:settle .5s ease both}
.vf-open{font-family:'Courier Prime',monospace;font-size:13px;color:var(--brass-2);margin-top:12px;text-decoration:underline}
.viewfinder.standby .vf-corner{border-color:var(--line-2)}
.viewfinder.standby:hover .vf-corner{border-color:var(--brass-3)}
.vf-standby{color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.vf-square{width:10px;height:10px;background:var(--muted)}
.vf-idle{font-size:15px;line-height:1.5;color:var(--muted-2);max-width:62ch}
.vf-idle b{color:var(--text);font-weight:600}
.vf-idle.dim{color:var(--muted);font-size:14px;margin-top:6px}
.fomo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-family:'VT323',monospace;font-size:20px}
.fomo-label{color:var(--live);letter-spacing:2px}
.fomo-bar{flex:1 1 180px;max-width:320px;height:10px;background:#232733;border:1px solid var(--line-2);position:relative;overflow:hidden}
.fomo-bar span{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--brass-3),var(--brass) 55%,var(--live));animation:fomoPulse 2.4s ease-in-out infinite}
@keyframes fomoPulse{50%{filter:brightness(1.35)}}
.fomo-pct{color:var(--text);font-variant-numeric:tabular-nums}
.fomo-why{font-family:'Courier Prime',monospace;font-size:13px;color:var(--muted);flex-basis:100%}
@media(prefers-reduced-motion:reduce){.fomo-bar span{animation:none}}
@media(prefers-reduced-motion:reduce){.vf-dot,.vf-rec,.vf-square,.viewfinder::after,.vf-line.entering,.vf-caret{animation:none}.vf-line{transition:none}.viewfinder::after{display:none}}
.empty{font-family:'Courier Prime',monospace;color:var(--muted);padding:20px;text-align:center;border:1px dashed var(--line-2)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--paper);color:var(--brown);padding:10px 16px;font-family:'Courier Prime',monospace;box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:10}
.login{max-width:440px;margin:12vh auto;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;padding:0 16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}.kv dt{color:var(--muted);font-family:'Courier Prime',monospace;font-size:12px}.kv dd{margin:0}
.hours{display:flex;align-items:flex-end;gap:2px;height:60px}.hours span{flex:1;background:#5C6070;min-height:1px}.hours span.peak{background:var(--brass)}
.footer{font-size:12px;color:#6B6F7A;text-align:center}

/* ---- file drawers: the page you're on is pulled out; opening another slides yours shut first ---- */
nav.drawers a{transition:transform .22s cubic-bezier(.2,.9,.3,1.3),box-shadow .22s,background .22s}
nav.drawers a:hover{transform:translateY(3px);box-shadow:0 6px 12px rgba(0,0,0,.45)}
nav.drawers a[aria-current=page]{animation:drawerOut .5s cubic-bezier(.2,.9,.3,1.4) both;box-shadow:0 8px 16px rgba(0,0,0,.5)}
nav.drawers a.pull,.mstrip a.pull{transform:translateY(6px);box-shadow:0 10px 18px rgba(0,0,0,.55);border-color:var(--brass);background:#232733}
nav.drawers a.shut,.mstrip a.shut{transform:translateY(-4px)!important;box-shadow:none!important;animation:none}
@keyframes drawerOut{0%{transform:translateY(-6px);box-shadow:none}100%{transform:translateY(4px)}}
.mstrip{display:none}
.footer-me{display:none}
@media(max-width:640px){
nav.drawers{display:none}
.mstrip{display:flex;position:sticky;top:0;z-index:20;gap:6px;overflow-x:auto;scrollbar-width:none;background:linear-gradient(#15171d,#101217);border-bottom:2px solid var(--brass-3);padding:8px 10px 12px;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.mstrip::-webkit-scrollbar{display:none}
.mstrip a{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 10px 7px;background:var(--shelf-2);border:1px solid var(--line);text-decoration:none;color:var(--text);transform:translateY(-3px);transition:transform .22s cubic-bezier(.2,.9,.3,1.3),box-shadow .22s,background .22s}
.mstrip a .lbl{background:#3A3326;font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:1px;padding:2px 8px;white-space:nowrap}
.mstrip a .handle{width:24px;height:6px;border:2px solid var(--brass-3);border-top:0;border-radius:0 0 6px 6px}
.mstrip a .lock{width:8px;height:8px}.mstrip a .lock::after{top:2px;height:4px}
.mstrip a.back{color:var(--muted)}
.mstrip a[aria-current=page]{transform:translateY(4px);background:#232733;border-color:var(--brass);box-shadow:0 8px 14px rgba(0,0,0,.55);animation:drawerOut .5s cubic-bezier(.2,.9,.3,1.4) both}
.mstrip a[aria-current=page] .lbl{background:var(--brass);color:var(--brown);font-weight:700}
.mstrip a[aria-current=page] .handle{border-color:#8C7044}
header.is-slim .head.slim{flex-wrap:nowrap;gap:12px;padding:10px 14px}
header.is-slim .portrait{width:38px;height:48px}
header.is-slim h1{font-size:26px!important}
header.is-slim .duty{font-size:15px}
header.is-slim .duty>div:first-child{display:none}
.footer-me{display:inline}
}
@media(prefers-reduced-motion:reduce){nav.drawers a,.mstrip a{transition:none;animation:none!important}}

/* ---- small signs of life ---- */
.stamp{animation:stampIn .55s cubic-bezier(.3,1.6,.5,1) .35s both}
@keyframes stampIn{0%{transform:rotate(-8deg) scale(2.4);opacity:0}60%{transform:rotate(-8deg) scale(.92);opacity:1}100%{transform:rotate(-8deg) scale(1);opacity:1}}
.main>*,.side>*{animation:settle .5s ease-out both}
.main>*:nth-child(2),.side>*:nth-child(2){animation-delay:.07s}.main>*:nth-child(3),.side>*:nth-child(3){animation-delay:.14s}
.main>*:nth-child(4),.side>*:nth-child(4){animation-delay:.21s}.main>*:nth-child(n+5),.side>*:nth-child(n+5){animation-delay:.28s}
@keyframes settle{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.tile,.msg,.reply-card,.trophy,.shelf{transition:transform .18s ease,box-shadow .18s ease}
a.tile:hover,.msg:hover,.trophy:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.35)}
a.tile:active,.msg:active{transform:scale(.985)}
.trophy{position:relative;cursor:pointer}
.trophy .cup{transform-origin:50% 90%}
.trophy.cheer .cup{animation:wiggle .6s ease}
@keyframes wiggle{0%,100%{transform:none}20%{transform:rotate(-12deg) scale(1.1)}40%{transform:rotate(10deg) scale(1.12)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.confetto{position:absolute;width:9px;height:14px;pointer-events:none;border-radius:1px;background:var(--c);animation:pop var(--t) cubic-bezier(.15,.7,.3,1) forwards;z-index:5}
@keyframes pop{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.greet{animation:settle .8s ease-out .2s both}
@media(prefers-reduced-motion:reduce){.stamp,.main>*,.side>*,.greet,.trophy.cheer .cup{animation:none}.tile,.msg,.trophy{transition:none}}

.dropin{animation:dropin .7s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes dropin{0%{opacity:0;transform:translateY(-26px) rotate(-1.5deg) scale(1.02)}60%{opacity:1}100%{opacity:1;transform:none}}
.tick{animation:tickFlash 1.4s ease-out}
@keyframes tickFlash{0%{color:#F2D89B;text-shadow:0 0 12px rgba(242,216,155,.6)}100%{text-shadow:none}}
@media(prefers-reduced-motion:reduce){.dropin,.tick{animation:none}}