:root{
  --wall:#12C3E8; --wall-deep:#0DA9CB; --orange:#D0702A; --skin:#F6CFA3; --ink:#1A1A1A; --paper:#F4EDE0; --paper-2:#E9DFCC;
  --red:#D3282D; --green:#1F8A4C; --gold:#F2C230; --grey:#5A5F66;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r:3px; --wob:255px 12px 225px 12px/12px 225px 12px 255px;
  --hard:4px 4px 0 var(--ink);
  --fw:clamp(190px,17vw,262px);
  --display:'Black Ops One',Impact,sans-serif; --text:'Cutive Mono','Courier New',monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@font-face{font-family:'Black Ops One';src:url(/fonts/black-ops-one-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Cutive Mono';src:url(/fonts/cutive-mono-latin-400-normal.woff2) format('woff2');font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font:17px/1.45 var(--text);min-height:100vh;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
h1,h2,h3,.sign-name,.plate b,.stamp,.foot,.tag,.book,.slogan,.big{font-family:var(--display);font-weight:400;letter-spacing:.04em}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* header: sign plate + canary */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s5);position:relative;z-index:5}
.sign{display:flex;align-items:center;gap:var(--s3);text-decoration:none;background:var(--paper);border:3px solid var(--ink);padding:var(--s2) var(--s4) var(--s2) var(--s2);box-shadow:var(--hard);border-radius:var(--r)}
.sign img{display:block;border-radius:50%;border:2px solid var(--ink);background:var(--wall)}
.sign-name{font-size:24px;line-height:1}
.canary{margin:0;font-size:15px;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s4);border-radius:var(--r);white-space:nowrap}
.canary b,.canary time{color:var(--gold);font-weight:400}
.canary .dot{opacity:.5;margin:0 var(--s1)}

/* the wall */
.wall{position:relative;padding-top:var(--s2)}
.tags{position:absolute;z-index:6;left:var(--s5);top:0;display:flex;gap:var(--s4)}
.tag{position:relative;display:block;margin-top:var(--s5);background:var(--paper);border:2px solid var(--ink);padding:var(--s3) var(--s3) var(--s2);font-size:15px;text-decoration:none;border-radius:2px 2px 8px 8px;transform-origin:50% -24px;transition:transform .2s var(--ease)}
.tag i{position:absolute;left:50%;top:-24px;width:2px;height:24px;background:var(--ink);transform:translateX(-50%)}
.tag::before{content:"";position:absolute;left:50%;top:6px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--wall);border:2px solid var(--ink)}
.tag{padding-top:var(--s5)}
.tag:hover{transform:rotate(-3deg)}
.tag:nth-child(even):hover{transform:rotate(3deg)}
.slogan{position:absolute;z-index:6;right:var(--s5);top:var(--s2);margin:0;background:var(--paper);border:3px solid var(--ink);padding:var(--s2) var(--s4);font-size:clamp(14px,1.6vw,22px);box-shadow:var(--hard);transform:rotate(1.2deg)}
.wall-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;overscroll-behavior-x:contain}
.wall-inner{position:relative;height:calc(var(--fw)*2.45);min-width:100%;width:max-content}
.lines{position:absolute;inset:0;filter:url(#marker)}
.hl{position:absolute;left:0;right:0;height:5px;background:var(--ink);border-radius:3px;opacity:.9}
.hl span{position:sticky;left:var(--s3);display:inline-block;transform:translateY(-100%);margin-bottom:0;font:14px/1 var(--text);background:var(--wall);padding:2px var(--s2);border:2px solid var(--ink);color:var(--ink);top:0}
.lineup{list-style:none;margin:0;padding:0 var(--s7) 0 var(--s7);display:flex;height:100%;position:relative}
.slot{position:relative;width:calc(var(--fw)*1.08);flex:none;height:100%;scroll-snap-align:center}
.fig{position:absolute;left:0;top:calc(var(--k,1)*var(--fw)*1.15);width:var(--fw);height:var(--fw);transition:top .9s var(--ease);padding:0;border:0;background:none;display:block;text-align:left}
button.fig{cursor:pointer}
.body{position:absolute;inset:0;background:url(/img/fig.webp) center/100% 100% no-repeat}
.fig::before{content:"";position:absolute;left:8.5%;width:84%;top:97%;height:calc(var(--fw)*(1.16 - 1.15*var(--k,1)) + 8px);background:#D96A27;border:0 solid var(--ink);border-width:0 6px;border-radius:0 0 2px 2px;min-height:0}
.slot.f-dead .fig::before{filter:grayscale(.9) brightness(.92)}
.slot.f-ran .fig::before{filter:saturate(.7) hue-rotate(-12deg)}
.slot.pending .fig::before{filter:grayscale(1) brightness(1.25)}
/* the avatar's own plate sits at 30%-70% x, 67%-92% y: text goes on top of it */
.plate{position:absolute;left:30%;top:67.5%;width:40.5%;height:24.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;overflow:hidden;transform:rotate(-.6deg)}
.plate b{font-size:calc(var(--fw)*.115);color:var(--ink);display:block}
.plate i{font-style:normal;font-size:calc(var(--fw)*.056);color:var(--ink);margin-top:2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:clip}
.plate .tk{font-size:calc(var(--fw)*.062);font-weight:400}
.floor{position:absolute;left:0;right:0;bottom:0;height:calc(var(--fw)*.34);background:var(--ink);pointer-events:none}
.floor::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:var(--wall-deep);opacity:.0}
.foot{position:absolute;z-index:3;left:0;width:var(--fw);bottom:calc(var(--fw)*.06);text-align:center;color:var(--paper);font-size:calc(var(--fw)*.075);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--s2)}
.slot.idle .body{filter:saturate(.8)}
.slot.idle:not(.mid) .plate{visibility:hidden}
.slot.idle .fig{top:calc(var(--fw)*.55)}
.slot.idle.mid .fig{top:calc(var(--fw)*.35)}
.slot.idle .plate i{font-size:calc(var(--fw)*.052)}
.wall-note{margin:0;position:absolute;right:var(--s5);bottom:var(--s3);z-index:4;font-size:13px;color:var(--paper);background:var(--ink);padding:var(--s1) var(--s3);border-radius:var(--r);max-width:46ch}
.slot.pick .fig::after{content:"";position:absolute;inset:-6px;border:4px dashed var(--ink);border-radius:var(--wob);pointer-events:none}
.slot.sel .fig::after{content:"";position:absolute;inset:-6px;border:4px solid var(--ink);border-radius:var(--wob);pointer-events:none}
.slot .fig:hover .body{filter:brightness(1.05)}

/* fates on the wall */
.slot.f-dead .body{filter:grayscale(.9) brightness(.92)}
.slot.f-ran .body{filter:saturate(.7) hue-rotate(-12deg)}
.slot.f-unknown .body{filter:grayscale(.5)}
.slot.pending .body{filter:grayscale(1) brightness(1.25) contrast(.8);opacity:.85}
.slot.pending .plate b{font-size:calc(var(--fw)*.09)}

/* stamps */
.stamp{display:inline-block;font-size:calc(var(--fw)*.13);line-height:1;padding:.18em .35em .12em;border:.09em solid currentColor;border-radius:4px;color:var(--grey);transform:rotate(-11deg);text-transform:uppercase;filter:url(#ink);mix-blend-mode:multiply;background:transparent;white-space:nowrap}
.fig .stamp{position:absolute;left:50%;top:54%;translate:-50% -50%;font-size:calc(var(--fw)*.088);z-index:2;pointer-events:none;mix-blend-mode:normal;background:rgba(244,237,224,.9);filter:none;box-shadow:2px 2px 0 var(--ink)}
.s-alive{color:var(--green)}
.s-graduated{color:#9A6B00;background:rgba(242,194,48,.55)}
.s-ran{color:var(--red)}
.s-dead{color:var(--grey)}
.s-pending{color:var(--grey);opacity:.6}

/* camera flash: the one motion idiom */
.flashbox{position:absolute;inset:-4% -8%;background:#fff;opacity:0;pointer-events:none;z-index:4;border-radius:50%}
.slot.shot .flashbox{animation:flash .75s var(--d,0ms) both}
.slot.shot .body{animation:develop 1s var(--d,0ms) both}
.slot.shot .stamp{animation:inkin .5s calc(var(--d,0ms) + .7s) both}
@keyframes flash{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
@keyframes develop{0%,14%{filter:brightness(4) contrast(.2);opacity:.2}100%{opacity:1}}
@keyframes inkin{0%{opacity:0;transform:rotate(-15deg)}100%{opacity:1;transform:rotate(-11deg)}}
.slot.shot .fig{animation:standup .9s var(--d,0ms) var(--ease) both}
@keyframes standup{0%{translate:0 24px}100%{translate:0 0}}

/* desk (intake) */
.desk{position:relative;background:var(--paper);border-top:5px solid var(--ink);border-bottom:5px solid var(--ink);padding:var(--s5) var(--s5) var(--s4);margin-top:0;
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(26,26,26,.07) 31px 32px)}
#book-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s4);align-items:end;max-width:1180px;margin:0 auto}
.field{display:block}
.lbl{display:block;font-size:15px;margin-bottom:var(--s2)}
#addr{width:100%;font:20px var(--text);color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:var(--s3) var(--s4);min-height:56px;box-shadow:inset 0 0 0 0 var(--ink)}
#addr::placeholder{color:#8a8578}
#addr:focus{outline:none;box-shadow:var(--hard)}
.window{border:0;margin:0;padding:0;min-width:0}
.window legend{padding:0;font-size:15px;margin-bottom:var(--s2)}
.window label{display:inline-block;margin-right:var(--s1)}
.window input{position:absolute;opacity:0;pointer-events:none}
.window span{display:inline-block;min-width:60px;text-align:center;padding:var(--s3) var(--s3);border:3px solid var(--ink);background:#fff;font-size:17px;cursor:pointer;min-height:56px;line-height:30px}
.window input:checked+span{background:var(--ink);color:var(--gold)}
.window input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.book{font-size:24px;line-height:1;background:var(--orange);color:var(--ink);border:3px solid var(--ink);padding:0 var(--s6);min-height:56px;border-radius:var(--wob);box-shadow:var(--hard);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.book:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.book:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.book[disabled]{opacity:.6;cursor:progress}
.status-row{display:flex;align-items:center;gap:var(--s3);max-width:1180px;margin:var(--s4) auto 0;flex-wrap:wrap}
.status{margin:0;flex:1 1 320px;min-height:26px;font-size:16px}
.status.err{color:var(--red)}
.ghost{background:transparent;border:2px solid var(--ink);padding:var(--s2) var(--s4);font-size:14px;border-radius:var(--r)}
.ghost:hover{background:var(--ink);color:var(--paper)}
.meter{max-width:1180px;margin:var(--s3) auto 0;height:14px;border:2px solid var(--ink);background:repeating-linear-gradient(90deg,transparent 0 19px,rgba(26,26,26,.35) 19px 20px);position:relative;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--orange);border-right:2px solid var(--ink);transition:width .25s linear}

/* charge sheet */
.charge{background:var(--wall-deep);padding:var(--s7) var(--s5);scroll-margin-top:var(--s5)}
.slip{max-width:1180px;margin:0 auto;background:var(--paper);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:var(--s6);position:relative;transform:rotate(-.3deg);border-radius:var(--r)}
.slip-empty{margin:0;font-size:18px}
.slip-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:var(--s6);align-items:start}
.slip h3{font-size:clamp(34px,5vw,64px);line-height:1;margin:0 0 var(--s2);word-break:break-word}
.slip .name{margin:0 0 var(--s4);font-size:18px;word-break:break-word}
.slip .stamp{font-size:34px;margin:var(--s3) 0 var(--s4)}
.slip .why{margin:0;font-size:17px;border-left:5px solid var(--ink);padding-left:var(--s3)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:0 var(--s5);margin:0}
.kv dt,.kv dd{margin:0;padding:var(--s2) 0;border-bottom:2px dotted rgba(26,26,26,.45)}
.kv dt{font-size:14px;letter-spacing:.06em}
.kv dd{font-size:18px;word-break:break-all}
.links{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.links a,.links button{font-size:14px;text-decoration:none;border:2px solid var(--ink);padding:var(--s2) var(--s3);background:#fff;border-radius:var(--r)}
.links a:hover,.links button:hover{background:var(--ink);color:var(--paper)}
.asked{display:inline-block;background:var(--ink);color:var(--gold);font-size:13px;padding:2px var(--s2);margin-bottom:var(--s3)}

/* booking sheet */
.sheet{padding:var(--s7) var(--s5);scroll-margin-top:var(--s5)}
.paper{max-width:1180px;margin:0 auto;background:var(--paper);border:3px solid var(--ink);padding:var(--s6) var(--s6) var(--s7);box-shadow:8px 8px 0 var(--ink);transform:rotate(.25deg);border-radius:var(--r);
  background-image:repeating-linear-gradient(0deg,transparent 0 35px,rgba(18,195,232,.28) 35px 36px)}
.paper h2{font-size:clamp(30px,4.4vw,56px);margin:0 0 var(--s5);border-bottom:5px solid var(--ink);padding-bottom:var(--s3);line-height:1}
.sheet-empty{margin:0;font-size:18px}
.s-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s5)}
.cell{border:3px solid var(--ink);background:rgba(255,255,255,.55);padding:var(--s3) var(--s4) var(--s4);min-width:0}
.cell small{display:block;font-size:13px;letter-spacing:.06em;margin-bottom:var(--s2)}
.cell .big{font-size:clamp(34px,4.4vw,58px);line-height:1;word-break:break-word}
.cell em{font-style:normal;font-size:14px;display:block;margin-top:var(--s2)}
.cell.wide{grid-column:span 2}
.s-meta{margin:var(--s5) 0 0;font-size:15px;display:grid;gap:var(--s1)}
.tally{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:var(--s2);min-height:36px}
.tally svg{height:34px;width:auto;overflow:visible}
.fatebar{display:flex;height:32px;border:3px solid var(--ink);margin-top:var(--s5)}
.fatebar i{display:block;height:100%}
.fatebar i+i{border-left:3px solid var(--ink)}
.fb-alive{background:var(--green)}.fb-graduated{background:var(--gold)}.fb-ran{background:var(--red)}.fb-dead{background:var(--grey)}.fb-unknown{background:#999}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s2);font-size:14px}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border:2px solid var(--ink);margin-right:6px;vertical-align:-1px}
.legend .l-alive::before{background:var(--green)}.legend .l-graduated::before{background:var(--gold)}.legend .l-ran::before{background:var(--red)}.legend .l-dead::before{background:var(--grey)}
.sheet-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5);align-items:center}
.btn{font-family:var(--display);font-size:18px;letter-spacing:.04em;background:var(--orange);border:3px solid var(--ink);padding:var(--s3) var(--s5);border-radius:var(--wob);box-shadow:var(--hard);color:var(--ink)}
.btn.alt{background:#fff}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.sortbar{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s5);flex-wrap:wrap;font-size:14px}
.sortbar button{border:2px solid var(--ink);background:#fff;padding:var(--s1) var(--s3);font-size:14px}
.sortbar button[aria-pressed="true"]{background:var(--ink);color:var(--gold)}
.ledger{width:100%;border-collapse:collapse;margin-top:var(--s5);font-size:15px}
.ledger th{text-align:left;font-weight:400;font-size:13px;letter-spacing:.06em;border-bottom:3px solid var(--ink);padding:var(--s2) var(--s2)}
.ledger td{padding:var(--s2);border-bottom:2px dotted rgba(26,26,26,.45);vertical-align:middle}
.ledger tr[tabindex]{cursor:pointer}
.ledger tr[tabindex]:hover td,.ledger tr.sel td{background:rgba(242,194,48,.35)}
.ledger .st{font-family:var(--display);font-size:14px}
.ledger .st.s-alive{color:var(--green)}.ledger .st.s-graduated{color:#9A6B00}.ledger .st.s-ran{color:var(--red)}.ledger .st.s-dead{color:var(--grey)}
.ledger-wrap{overflow-x:auto}

/* rules */
.rules{background:var(--ink);color:var(--paper);padding:var(--s7) var(--s5);scroll-margin-top:var(--s5)}
.rules h2{font-size:clamp(30px,4.4vw,56px);margin:0 auto var(--s4);max-width:1180px;color:var(--gold);line-height:1}
.rules-lead{max-width:1180px;margin:0 auto var(--s6);font-size:18px}
.rule-list{list-style:none;padding:0;margin:0 auto var(--s6);max-width:1180px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.rule-list li{display:flex;gap:var(--s5);align-items:center;border:3px solid var(--paper);padding:var(--s4) var(--s5);min-height:120px}
.rule-list .stamp{font-size:26px;flex:none;mix-blend-mode:normal;background:var(--paper);filter:none}
.rule-list p{margin:0;font-size:17px}
.rule-list b{color:var(--gold);font-weight:400}
.fine{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);font-size:15px;opacity:.95}
.fine p{margin:0}
.fine b{color:var(--skin);font-weight:400;display:block;margin-bottom:var(--s1)}

.foot-banner{background:var(--wall);padding:0;text-align:center}
.foot-banner img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover}
.foot-banner p{margin:0;background:var(--ink);color:var(--paper);padding:var(--s4);font-size:14px}
.foot-banner .xlink{display:block;width:max-content;max-width:100%;margin:var(--s3) auto 0;padding:var(--s2) var(--s4);border:2px solid var(--gold);color:var(--gold);font-family:var(--display);font-size:18px;letter-spacing:.06em;text-decoration:none;transform:rotate(-1.5deg);transition:transform .2s var(--ease),background .2s}
.foot-banner .xlink:hover{background:var(--gold);color:var(--ink);transform:rotate(1.5deg)}
.noscript{position:fixed;left:var(--s4);bottom:var(--s4);background:var(--red);color:#fff;padding:var(--s3)}

@media (max-width:900px){
  :root{--fw:clamp(170px,46vw,230px)}
  .top{padding:var(--s3) var(--s3)}
  .sign-name{font-size:18px}
  .canary{font-size:12px;padding:var(--s2) var(--s3);white-space:normal;text-align:right}
  .tags{left:var(--s3);gap:var(--s2)}
  .tag{font-size:12px;padding-left:var(--s2);padding-right:var(--s2)}
  .slogan{display:none}
  .wall-note{display:none}
  #book-form{grid-template-columns:1fr}
  .book{width:100%}
  .desk{padding:var(--s5) var(--s3)}
  .slip{padding:var(--s4)}
  .slip-grid{grid-template-columns:1fr}
  .s-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .cell.wide{grid-column:span 2}
  .paper{padding:var(--s4) var(--s3) var(--s5)}
  .rule-list{grid-template-columns:1fr}
  .rule-list li{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .fine{grid-template-columns:1fr}
  .charge,.sheet,.rules{padding-left:var(--s3);padding-right:var(--s3)}
  .hl span{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* contract evidence tag */
.evid{display:flex;align-items:stretch;gap:0;margin:var(--s2) var(--s5) var(--s5);background:var(--paper);border:3px solid var(--ink);box-shadow:var(--hard);border-radius:var(--r);position:relative;z-index:5;transform:rotate(-.4deg)}
.evid-k{display:grid;place-items:center;padding:0 var(--s4);background:var(--ink);color:var(--gold);font:400 22px/1 var(--display);letter-spacing:.08em}
.evid-v{flex:1;min-width:0;padding:var(--s3) var(--s4);font:17px/1.3 var(--text);word-break:break-all;user-select:all;-webkit-user-select:all;align-self:center}
.evid-acts{display:flex;align-items:stretch;border-left:3px solid var(--ink)}
.evid-copy,.evid-link{display:grid;place-items:center;padding:var(--s3) var(--s4);font:400 15px/1 var(--display);letter-spacing:.06em;color:var(--ink);text-decoration:none;background:var(--paper-2);border:0;border-left:2px solid var(--ink)}
.evid-copy{background:var(--gold);border-left:0;min-width:84px}
.evid-copy:hover,.evid-link:hover{background:var(--ink);color:var(--paper)}
@media (max-width:720px){
  .evid{flex-wrap:wrap;margin:var(--s2) var(--s4) var(--s3)}
  .evid-k{padding:var(--s2) var(--s4);font-size:18px;flex:none}
  .evid-v{flex:1 1 0;padding:var(--s2) var(--s3);font-size:14px}
  .evid-acts{flex:1 0 100%;border-left:0;border-top:3px solid var(--ink)}
  .evid-copy,.evid-link{flex:1;padding:var(--s3) var(--s2);font-size:14px}
}