/* The Commish Files. Hand-edited, not generated: scripts/build.py writes the
   HTML, and every page it writes links this one stylesheet. */
:root {
  --ink:#1b1814; --paper:#e8e0cf; --paper-2:#ded4bf; --folder:#c8a44d; --stamp:#a8322a;
  --blue:#2d4f7c; --green:#2f6a3b; --rule:#b3a88e; --muted:#6a6152;
  --desk:#15130f; --note:#f3e38a; --cork:#8a6a45; --string:#b3261e;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--desk); color:var(--ink);
  font:16px/1.55 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  padding:0 16px 64px;
}
.strip { margin:0 -16px 24px; background:var(--stamp); color:#fff;
  font:700 10.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  text-align:center; padding:8px 12px; }
.file {
  max-width:780px; margin:0 auto; background:var(--paper);
  border-top:14px solid var(--folder);
  box-shadow:0 18px 50px #0009; padding:36px 32px 40px; position:relative;
}
.file::before { content:""; position:absolute; top:-14px; left:32px; width:150px; height:14px;
  background:var(--folder); transform:translateY(-10px); border-radius:6px 6px 0 0; }
header { border-bottom:3px double var(--rule); padding-bottom:18px; margin-bottom:22px; position:relative;
  display:flex; gap:22px; align-items:flex-start; }
.hd-text { flex:1; min-width:0; }

/* subject photo, clipped to the file */
.mug { flex:0 0 184px; margin:6px 4px 0 0; background:#fbf8f1; padding:9px 9px 0;
  box-shadow:0 8px 18px #0000004d, 0 1px 0 #0000001a; transform:rotate(2.2deg); position:relative; }
.mug img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; filter:sepia(.28) contrast(1.06) saturate(.85); }
.mug figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:6px;
  padding:7px 1px 8px; font:700 9px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.mug figcaption b { color:var(--stamp); letter-spacing:.2em; }
.mug figcaption span { white-space:nowrap; }
.caption-q { margin:6px 0 16px; padding:12px 16px; background:#0d0f12; color:#e9e6df;
  font:600 17px/1.4 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif; transform:rotate(-.4deg); }
.caption-q cite { display:block; margin-top:6px; font:700 9.5px/1.3 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:#8f8a80; font-style:normal; }
.labsheet { margin:6px 0 16px; padding:12px 14px 6px; background:#fbf8f1; border:1px solid var(--rule);
  background-image:repeating-linear-gradient(#0000 0 27px,#1b181412 27px 28px); }
.labsheet ul { list-style:none; margin:0; padding:0; font:13.5px/1.4 var(--mono); }
.labsheet li { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dotted var(--rule); }
.labsheet li span { flex:0 0 auto; max-width:45%; }
.labsheet li b { text-align:right; }
.labsheet .pos { color:var(--stamp); } .labsheet .neg { color:var(--green); }
.timeline { list-style:none; margin:14px 0 16px; padding:0 0 0 16px; border-left:2px solid var(--stamp); }
.timeline li { margin:0 0 10px; position:relative; }
.timeline li::before { content:""; position:absolute; left:-22px; top:.55em; width:10px; height:10px;
  border-radius:50%; background:var(--paper); border:2px solid var(--stamp); }
.timeline time { display:block; font:700 11px/1.4 var(--mono); letter-spacing:.14em; color:var(--stamp); }
.clip { position:absolute; top:-14px; left:26px; width:16px; height:46px; z-index:2;
  border:3px solid #8d8d93; border-bottom:none; border-radius:9px 9px 0 0; transform:rotate(-6deg); }
.clip::after { content:""; position:absolute; left:2px; top:6px; width:6px; height:30px;
  border:3px solid #a3a3a9; border-bottom:none; border-radius:5px 5px 0 0; }
.case { font:700 11px/1 var(--mono); letter-spacing:.22em; color:var(--muted); text-transform:uppercase; }
h1 { margin:.28em 0 .1em; font-size:clamp(36px,8.4vw,62px); letter-spacing:-.02em; line-height:.96; }
.sub { font-size:15px; color:var(--muted); font-style:italic; max-width:34em; }
.stamp {
  display:inline-block; margin-top:16px; border:3px solid var(--stamp); color:var(--stamp);
  font:700 13px/1 var(--mono); letter-spacing:.18em; padding:9px 13px;
  transform:rotate(-2.5deg); text-transform:uppercase;
}

/* next-disclosure countdown */
.drop { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  background:var(--ink); color:var(--paper); padding:16px 18px; margin:0 0 22px; }
.drop-k { margin:0; font:700 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:#d9cfb8; }
.drop-x { margin:6px 0 0; font-size:22px; font-weight:700; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#e0463b;
  margin-right:6px; animation:blink 1.2s steps(2,start) infinite; }
@keyframes blink { to { visibility:hidden; } }
.clock { display:flex; gap:8px; margin-left:auto; }
.clock div { min-width:54px; text-align:center; background:#0000004d; border:1px solid #ffffff1f; padding:7px 4px 5px; }
.clock b { display:block; font:700 24px/1 var(--mono); font-variant-numeric:tabular-nums; }
.clock small { font:700 9px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#b9ae96; }
.drop-when { flex-basis:100%; margin:0; font:12px/1.3 var(--mono); color:#b9ae96; }

/* Deep Waiver tip */
.tip { background:var(--note); padding:14px 18px 12px; margin:0 0 24px;
  transform:rotate(-.6deg); box-shadow:0 6px 14px #0003; max-width:520px; }
.tip-k { margin:0 0 6px; font:700 10px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#6b5a14; }
.tip-x { margin:0; font:20px/1.3 var(--mono); }

/* vitals + corruption index */
.vitals { display:flex; flex-wrap:wrap; border:1px solid var(--rule); border-right:0; border-bottom:0; margin:0 0 8px; }
/* flex, not grid: with five cells an auto-fit grid leaves a filled-looking
   empty cell at the end of the last row on phone widths. */
.vitals div { flex:1 1 128px; padding:11px 13px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.vitals dt { font:700 10px/1.4 var(--mono); letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin:0; }
.vitals dd { margin:3px 0 0; font-size:21px; font-weight:700; }
.gauge { margin:18px 0 6px; }
.gauge-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.gauge-top h3 { margin:0; }
.gauge-top b { font:700 22px/1 var(--mono); color:var(--stamp); }
.meter { position:relative; height:14px; margin-top:8px;
  background:repeating-linear-gradient(90deg,#0000 0 calc(10% - 2px),var(--paper) calc(10% - 2px) 10%),
    linear-gradient(90deg,#d8cdb4,#c9a24a 45%,var(--stamp)); border:1px solid var(--rule); }
.meter i { position:absolute; top:-5px; bottom:-5px; width:3px; background:var(--ink); left:calc(var(--idx, 0%) - 1.5px); }
.fine { font-size:14px; color:var(--muted); }

/* evidence locker */
.locker { margin:28px 0 0; padding:16px 16px 6px; background:var(--paper-2); border:1px solid var(--rule); }
.locker ol { list-style:none; margin:10px 0 0; padding:0; }
.locker li { border-top:1px dotted var(--rule); }
.locker a, .lk-sealed { display:flex; align-items:center; gap:12px; padding:8px 2px;
  color:inherit; text-decoration:none; }
.locker a:hover .lk-t { text-decoration:underline; }
.lk-id { flex:0 0 26px; height:26px; display:grid; place-items:center; background:var(--ink); color:var(--paper);
  font:700 12px/1 var(--mono); }
.lk-t { flex:1; min-width:0; font-size:15.5px; }
.lk-st { font:700 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  border:2px solid currentColor; padding:4px 6px; white-space:nowrap; }

.st-red { color:var(--stamp); } .st-blue { color:var(--blue); }
.st-green { color:var(--green); } .st-ink { color:var(--muted); }

/* exhibits */
.ex { margin-top:36px; padding-top:22px; border-top:1px solid var(--rule); position:relative; scroll-margin-top:16px; }
.ex-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ex-tab { display:inline-block; background:var(--ink); color:var(--paper);
  font:700 10px/1 var(--mono); letter-spacing:.2em; padding:6px 10px; text-transform:uppercase; }
.ex-stamp { font:700 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  border:3px double currentColor; padding:6px 9px; transform:rotate(3deg); opacity:.9; }
h2 { font-size:clamp(21px,4.4vw,27px); margin:.5em 0 .45em; line-height:1.15; }
h3 { font:700 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 9px; }
p { margin:0 0 .85em; }
.roster { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:18px 0 4px; }
.roster ul { list-style:none; margin:0; padding:0; font-size:14.5px; }
.roster li { padding:3px 0; border-bottom:1px dotted var(--rule); }
.roster i { display:inline-block; min-width:34px; font:700 10px/1 var(--mono); color:var(--muted); font-style:normal; }
.verdict { margin-top:14px; padding:11px 14px; background:#00000008; border-left:4px solid var(--stamp); font-size:15px; }
.verdict span { display:block; font:700 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--stamp); margin-bottom:5px; }

/* redaction */
.bar { display:inline-block; height:.78em; background:var(--ink); vertical-align:-.04em; margin:.12em 0; }
.lk-t .bar { height:.7em; }
.lk-sealed .lk-t { white-space:nowrap; overflow:hidden; }
.redacted-h { line-height:1.5; }
.redacted-p { line-height:1.9; }
.redacted-p .bar { height:.72em; }
.ex-sealed { background:repeating-linear-gradient(-45deg,#0000 0 14px,#0000000a 14px 16px); padding-bottom:6px; }
.unseal { font:12px/1.3 var(--mono); color:var(--muted); }

/* case board */
.board { background:var(--cork); background-image:radial-gradient(#0000001f 1px,#0000 1.5px); background-size:7px 7px;
  border:10px solid #5b4128; margin:14px 0 12px; padding:6px; }
.board svg { display:block; width:100%; height:auto; }
.board .string path { fill:none; stroke:var(--string); stroke-width:2.2; }
.board .card { fill:#f4efe3; stroke:#0000002e; }
.board .card-main { fill:#fffaf0; }
.board .rbar { fill:var(--ink); }
.board .pin { fill:#d23a2e; stroke:#7a1c16; stroke-width:1.5; }
.board text { text-anchor:middle; fill:var(--ink); }
.board .name { font:700 21px Georgia,serif; }
.board .cap { font:700 10.5px var(--mono); letter-spacing:.16em; text-transform:uppercase; fill:var(--muted); }

footer { margin-top:40px; padding-top:18px; border-top:3px double var(--rule); font-size:13px; color:var(--muted); }
.nocomment { font:700 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }

/* share + exhibit photos */
.ex-right { display:flex; align-items:center; gap:12px; }
.share { font:700 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  background:none; border:1px solid var(--rule); padding:6px 9px; cursor:pointer; }
.share:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.zoom { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.zoom img { display:block; width:100%; }
.ex-lead { float:right; width:220px; margin:4px 0 14px 22px; background:#fbf8f1; padding:8px 8px 0;
  box-shadow:0 6px 14px #0000003d; transform:rotate(1.4deg); }
.ex-lead img { aspect-ratio:4/5; object-fit:cover; filter:sepia(.18) contrast(1.04); }
.ex-lead figcaption { padding:6px 1px 8px; font:11px/1.35 var(--mono); color:var(--muted); }
.ex .verdict { clear:both; }
/* Blocks beside a floated lead photo shrink to fit instead of running under it. */
.caption-q, .labsheet, .timeline, .md-list, .md-photo { display:flow-root; }
.share-head { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.share-head + .ex { border-top:3px double var(--rule); }
.md-h { margin:18px 0 8px; }
.md-list { margin:0 0 .85em; padding-left:1.2em; }
.md-list li { margin:0 0 4px; }
.md-photo { margin:10px 0 16px; background:#fbf8f1; padding:8px; box-shadow:0 6px 14px #00000033; max-width:520px; }
.md-photo img { max-height:520px; object-fit:contain; background:#0d0f12; }
.md-photo figcaption { padding:7px 1px 1px; font:11.5px/1.35 var(--mono); color:var(--muted); }

/* contact sheet: every released photo */
.sheet { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px 14px;
  margin:14px 0 4px; padding:16px; background:#0d0f12; }
.snap { margin:0; background:#fbf8f1; padding:7px 7px 0; }
.snap:nth-child(3n+1) { transform:rotate(-1.2deg); } .snap:nth-child(3n+2) { transform:rotate(.9deg); }
.snap img { aspect-ratio:1; object-fit:cover; }
.snap figcaption { padding:6px 0 8px; font:10.5px/1.3 var(--mono); color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.snap figcaption b { color:var(--stamp); margin-right:4px; }

/* photo viewer */
.lightbox { border:0; padding:0; background:#0d0f12; color:#e9e6df; max-width:min(94vw,900px); max-height:94vh; width:auto; }
.lightbox::backdrop { background:#000c; }
.lightbox img { display:block; max-width:min(94vw,900px); max-height:calc(94vh - 90px); margin:0 auto; object-fit:contain; }
.lb-x { position:absolute; top:6px; right:8px; z-index:2; width:36px; height:36px; font:28px/1 Georgia,serif;
  color:#fff; background:#0009; border:0; border-radius:50%; cursor:pointer; }
.lb-bar { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:center; padding:12px 14px; }
.lb-bar p { margin:0; font:12px/1.4 var(--mono); }
.lb-act { display:flex; gap:12px; align-items:center; }
.lb-act a { color:var(--note); font:700 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.lightbox .share { color:#e9e6df; border-color:#ffffff40; }

/* standalone share page */
.share-head { display:block; }
.share-t { margin:.4em 0 0; font-size:26px; font-weight:700; }
.share-t a { color:inherit; }
.back { margin-top:26px; font:700 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.back a { color:var(--stamp); }

@media (max-width:560px) {
  .file { padding:26px 18px 30px; } .file::before { left:18px; }
  header { gap:12px; }
  .mug { flex-basis:104px; padding:6px 6px 0; margin-top:28px; }
  .mug figcaption span { display:none; }
  .mug figcaption { font-size:8px; padding:5px 0 6px; }
  .clip { left:14px; height:38px; width:13px; }
  .stamp { font-size:11px; padding:7px 9px; letter-spacing:.12em; }
  .roster { grid-template-columns:1fr; }
  .clock { margin-left:0; } .clock div { min-width:0; flex:1; }
  .drop .clock { flex-basis:100%; }
  .strip { font-size:9.5px; letter-spacing:.12em; }
  .lk-sealed { flex-wrap:wrap; row-gap:6px; }
  .lk-sealed .lk-t { flex:1 0 calc(100% - 38px); }
  .lk-sealed .lk-st { margin-left:38px; }
  .lk-st { font-size:8.5px; letter-spacing:.08em; }
  .ex-lead { float:none; width:auto; max-width:300px; margin:6px auto 16px; }
  .ex-stamp { font-size:9.5px; padding:5px 7px; letter-spacing:.12em; }
  .ex-right { gap:8px; }
  .sheet { grid-template-columns:repeat(2,1fr); padding:12px; gap:14px 10px; }
}
@media (prefers-reduced-motion:reduce) { .dot { animation:none; } html { scroll-behavior:auto; } }