/* cbarchives.com — the archive. Design anchor v4/v5 (Strategy S49, spec §14.4).
   SINGLE SOURCE. The generator copies this to public/css/cbarchives.css on every run —
   never edit the live file (S27: it is overwritten from here on each regen).
   Type: Archivo + IBM Plex Mono. Two families, no more. cbchicks owns Sora/Inter/JetBrains.
   No cards, no border-radius, no shadows, no eyebrow labels. Rules and grid lines only. */
:root{
  --paper:#edeef0;        /* cool photographic paper. NOT cream. */
  --paper-2:#e3e5e9;
  --plate:#45474e;        /* the viewing surround — true neutral, tints nothing */
  --plate-2:#3b3d43;
  --ink:#15161a;
  --ink-soft:#61646d;
  --ink-plate:#d8dae0;
  --rule:#c7cad1;
  /* badge semantics are FIXED. only the hues are themed. green=live/amber=private/grey=away */
  --live:#127a45;
  --private:#a06412;
  --away:#71747d;
  --measure:1000px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.55;
  font-variant-numeric:tabular-nums}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 24px}
a{color:inherit}
header{border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:baseline;gap:28px;padding:18px 24px;
  max-width:var(--measure);margin:0 auto}
.brand{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:16px;
  letter-spacing:-.02em;text-decoration:none}
.brand span{color:var(--ink-soft)}
nav.site{margin-left:auto;display:flex;gap:22px;font-size:14.5px}
nav.site a{color:var(--ink-soft);text-decoration:none}
nav.site a:hover{color:var(--ink)}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-soft);padding:18px 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.hero{padding:14px 0 30px}
.hero-id{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
h1{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:clamp(30px,5.2vw,46px);
  letter-spacing:-.035em;margin:0;line-height:1.05;word-break:break-all}
.tagline{font-size:19px;max-width:62ch;margin:14px 0 0}
.hero-foot{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;margin-top:22px}
.cta{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  font-weight:600;font-size:15.5px;padding:13px 22px;border:1px solid var(--ink)}
.cta:hover{background:transparent;color:var(--ink)}
.cta-context{font-size:15px;color:var(--ink-soft);max-width:44ch;margin:0;padding-top:2px}
.badge{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;
  font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 11px 5px 9px;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink-soft)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--away);flex-shrink:0}
.badge.is-live{border-color:var(--live);color:var(--live)}
.badge.is-live .dot{background:var(--live);animation:pulse 1.6s ease-in-out infinite}
.badge.is-private{border-color:var(--private);color:var(--private)}
.badge.is-private .dot{background:var(--private)}
.badge.is-hidden{display:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.badge.is-live .dot{animation:none}}
/* ══ THE PLATE — the signature. 4 across, 16 per page = a 4x4 block ══ */
.plate{background:var(--plate);color:var(--ink-plate);padding:34px 0 30px;
  border-top:1px solid #2c2e33;border-bottom:1px solid #2c2e33}
.plate-head{display:flex;align-items:baseline;gap:16px;margin-bottom:22px}
.plate-head h2{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;margin:0;color:#9ea2ac}
.plate-head .rule{flex:1;height:1px;background:#565962}
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 20px}
/* the frame is NOT a link (S49 ruling): the frame is evidence, not a door. */
.frame{display:block;color:inherit}
.frame .well{display:block;position:relative;aspect-ratio:4/3;background:var(--plate-2);
  outline:1px solid #565962;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.stamp{display:flex;align-items:baseline;gap:8px;margin-top:8px;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:-.01em}
.stamp .day{color:#fff;font-weight:500}
.stamp .yr{color:#9ea2ac}
/* pagination — ENHANCEMENT ONLY. no JS = every frame renders, no pager. */
.js-paged .frame:not(.on){display:none}
.pager{display:none;margin-top:28px;border-top:1px solid #565962;padding-top:16px;
  align-items:center;gap:10px;flex-wrap:wrap}
.js-paged .pager{display:flex}
.pager .range{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:#9ea2ac;margin-right:auto}
.pager button{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-plate);
  background:transparent;border:1px solid #565962;padding:6px 11px;cursor:pointer;min-width:36px}
.pager button:hover:not(:disabled){border-color:#fff;color:#fff}
.pager button[aria-current="true"]{background:var(--ink-plate);color:var(--plate);
  border-color:var(--ink-plate);font-weight:600}
.pager button:disabled{opacity:.35;cursor:default}
.record{padding:38px 0 8px}
.record-lead{font-size:22px;max-width:56ch;margin:0 0 26px}
.tally{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tally div{padding:20px 20px 20px 0;border-right:1px solid var(--rule)}
.tally div:last-child{border-right:0}
.tally .n{font-family:"IBM Plex Mono",monospace;font-size:32px;font-weight:500;
  letter-spacing:-.04em;line-height:1;display:block}
.tally .k{font-size:13px;color:var(--ink-soft);display:block;margin-top:7px}
.reading{padding:34px 0;max-width:64ch}
.reading p{margin:0;font-size:18px;line-height:1.65}
.label{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
/* facts + chips ride together — chips are navigation, not reading */
.facts{padding:10px 0 30px}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th{text-align:left;font-weight:500;color:var(--ink-soft);width:180px;
  padding:11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
td{padding:11px 0;border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace;font-size:14.5px}
tr:first-child th,tr:first-child td{border-top:1px solid var(--rule)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:13px;padding:5px 10px;
  border:1px solid var(--rule);background:var(--paper-2);text-decoration:none}
.chip:hover{border-color:var(--ink)}
.peers{padding:4px 0 40px}
.peer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px;margin-top:18px}
.peer{text-decoration:none;display:block}
.peer .well{display:block;position:relative;aspect-ratio:1/1;background:var(--paper-2);
  outline:1px solid var(--rule);overflow:hidden}
.peer img{width:100%;height:100%;object-fit:cover;display:block}
.peer:hover .well{outline-color:var(--ink)}
.peer .u{font-family:"IBM Plex Mono",monospace;font-size:13px;margin-top:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.peer .d{font-size:12.5px;color:var(--ink-soft);line-height:1.35;margin-top:2px;display:block}
.peer .badge{position:absolute;top:7px;left:7px;background:rgba(21,22,26,.82);
  border-color:rgba(255,255,255,.2);color:#fff;padding:3px 7px 3px 6px;font-size:10px}
.peer .badge.is-live{color:#5fe39a;border-color:rgba(95,227,154,.5)}
.peer .badge.is-live .dot{background:#5fe39a}
/* glossary closes the page — reference, not reading */
.gloss-block{padding:4px 0 44px;border-top:1px solid var(--rule)}
.gloss-block .label{padding-top:26px}
.gloss{margin:0}
.gloss dt{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;padding-top:16px}
.gloss dd{margin:4px 0 16px;color:var(--ink-soft);font-size:15px;max-width:70ch;
  border-bottom:1px solid var(--rule);padding-bottom:16px}
footer{border-top:1px solid var(--rule);background:var(--paper-2)}
.foot-inner{max-width:var(--measure);margin:0 auto;padding:32px 24px;
  display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start;font-size:14px}
.foot-cols{display:flex;gap:44px;flex-wrap:wrap}
footer h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:5px 0}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--ink)}
/* Gawk — MODEL PAGES ONLY, never the shared footer partial (S49 §8) */
.gawk{margin-left:auto;display:flex;align-items:center;gap:14px;
  border:1px solid var(--rule);background:var(--paper);padding:14px;
  text-decoration:none;max-width:400px}
.gawk img{width:80px;height:80px;background:#fff;padding:5px;flex-shrink:0}
.gawk strong{display:block;font-size:15px;color:var(--ink)}
.gawk p{margin:3px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.foot-bottom{border-top:1px solid var(--rule);padding:16px 24px;max-width:var(--measure);
  margin:0 auto;font-size:12.5px;color:var(--ink-soft);font-family:"IBM Plex Mono",monospace}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.plate a:focus-visible,.pager button:focus-visible{outline-color:#fff}
/* 4-across holds down to 520px — at 3-across a 16-frame block goes ragged. */
@media (max-width:820px){
  .peer-grid{grid-template-columns:repeat(3,1fr)}
  .tally{grid-template-columns:1fr}
  .tally div{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .tally div:last-child{border-bottom:0}
  th{width:130px}
  .gawk{margin-left:0}
  .frames{gap:18px 12px}
}
@media (max-width:520px){
  .frames{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .peer-grid{grid-template-columns:repeat(2,1fr)}
  nav.site{display:none}
  body{font-size:16px}
  .pager .range{width:100%;margin-bottom:8px}
}