/* ============================================================
   CCRB — Christian Content Review Bureau
   Design tokens and components.

   Decisions locked in the design pass:
   - Orange is an INTERACTION colour only. Severity owns green/
     amber/red. Structure is hairline grey-blue. Nothing else.
   - Neutrals are contrast-corrected: every text token passes
     WCAG AA on its ground (lowest is 5.6:1).
   - Texture comes from structure: panel edges + tick rails.
     No noise, no scanlines.
   - Motion: fade+rise entry, shift+bar hover, 170ms, and it
     disables itself under prefers-reduced-motion.
   ============================================================ */

:root{
  /* ground */
  --bg-0:#080b11;
  --bg-1:#0e131b;
  --bg-2:#151c26;

  /* structure */
  --line:rgba(150,180,220,.16);
  --line-mid:rgba(150,180,220,.30);
  --line-hi:rgba(170,205,255,.50);

  /* ink — measured: 16.6 / 10.9 / 7.3 */
  --ink:#f6f8fb;
  --ink-dim:#bbc7d5;
  --ink-faint:#96a3b2;

  /* interaction */
  --accent:#ff9638;
  --accent-bg:rgba(255,150,56,.10);

  /* severity — the only semantic colour on the site */
  --sev-1:#4aa863;
  --sev-2:#dc9412;
  --sev-3:#cf4a3e;
  --sev-0:rgba(150,180,220,.16);

  /* material */
  --edge-hi:rgba(190,220,255,.10);
  --edge-lo:rgba(0,0,0,.38);
  --edge-wash:rgba(150,180,220,.05);
  --rail:rgba(150,180,220,.30);

  --font-display:'Michroma',sans-serif;
  --font-ui:'Rajdhani',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --dur:170ms;
  --ease:cubic-bezier(.2,.7,.3,1);
  --pad:clamp(1rem,3vw,2rem);
  --maxw:1320px;
}

/* print theme — measured to pass AA on the paper ground */
body.print{
  --bg-0:#f4f2ed; --bg-1:#eceae4; --bg-2:#e3e0d8;
  --line:rgba(40,50,65,.16); --line-mid:rgba(40,50,65,.28); --line-hi:rgba(40,50,65,.45);
  --ink:#1a1f27; --ink-dim:#4a5361; --ink-faint:#656e7b;
  --accent:#b25400; --accent-bg:rgba(178,84,0,.08);
  --sev-1:#377c49; --sev-2:#96650c; --sev-3:#c73e32;
  --edge-hi:rgba(255,255,255,.75); --edge-lo:rgba(40,50,65,.10);
  --edge-wash:rgba(40,50,65,.028); --rail:rgba(40,50,65,.32);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg-0);color:var(--ink);font-family:var(--font-body);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none !important}
.label{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint)}
.mono{font-family:var(--font-mono)}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--line-mid);position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg-0) 95%,transparent);backdrop-filter:blur(8px)}
.mast-in{max-width:var(--maxw);margin:0 auto;padding:1rem var(--pad);
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.lockup{display:flex;align-items:center;gap:1.6rem}
.wm{display:inline-block}
.wm .mark{font-family:var(--font-display);font-size:22px;color:var(--ink);line-height:1;
  display:flex;justify-content:space-between;padding-right:.06em}
.wm .mark i{font-style:normal}
.wm .full{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--line-mid);
  margin-top:.44rem;padding-top:.44rem;white-space:nowrap}
.logo-slot{width:52px;height:52px;flex-shrink:0;border:1px dashed var(--line-mid);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:7.5px;
  letter-spacing:.08em;color:var(--ink-faint);text-align:center;line-height:1.4}
.nav{display:flex;gap:1.1rem}
.nav a{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);text-decoration:none}
.nav a:hover,.nav a.on{color:var(--accent);text-decoration:none}
.search{flex:1;min-width:210px;max-width:330px;display:flex;align-items:center;gap:.55rem;
  border:1px solid var(--line-mid);background:var(--bg-1);padding:.42rem .7rem;margin-left:auto;
  position:relative}
.search:focus-within{border-color:var(--accent)}
.search input{border:0;background:none;outline:none;color:var(--ink);
  font-family:var(--font-body);font-size:13.5px;width:100%}
.search input::placeholder{color:var(--ink-faint)}
.search kbd{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);
  border:1px solid var(--line);padding:0 4px}
.theme-btn{background:none;border:1px solid var(--line-mid);color:var(--ink-faint);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:.35rem .55rem;cursor:pointer}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}

/* typeahead */
.ac{position:absolute;top:calc(100% + 4px);left:-1px;right:-1px;background:var(--bg-1);
  border:1px solid var(--line-hi);max-height:340px;overflow-y:auto;z-index:40}
.ac a{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .7rem;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:13.5px}
.ac a:last-child{border-bottom:0}
.ac a:hover,.ac a.sel{background:var(--accent-bg);color:var(--accent);text-decoration:none}
.ac .w{font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.05em;flex-shrink:0}
.ac a.none{color:var(--ink-faint);cursor:default;pointer-events:none}
.ac a.none .w{color:var(--ink-faint);font-weight:500}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 6rem;position:relative}
.wrap::before,.wrap::after{content:'';position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--rail) 0 9px,transparent 9px 10px);background-size:1px 10px}
.wrap::before{left:-20px} .wrap::after{right:-20px}
@media(max-width:1420px){.wrap::before,.wrap::after{display:none}}

/* ---------- motion ---------- */
.anim{animation:riseIn calc(var(--dur) * 1.5) var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 45ms)}
@keyframes riseIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .anim{animation:none !important}
  *{transition-duration:.01ms !important}
}

/* ---------- home ---------- */
.hero-wrap{position:relative;margin:0 calc(-1 * var(--pad));height:clamp(400px,68vh,700px);
  overflow:hidden;border-bottom:1px solid var(--line-mid)}
.hero-img{position:absolute;inset:-6% 0;background-color:var(--bg-2);background-size:cover;
  background-position:center;background-image:url('images/hero.jpg');
  transform-origin:50% 45%;will-change:transform,opacity;backface-visibility:hidden}
.hero-cap,.hero-grad{will-change:opacity}
@media (prefers-reduced-motion: reduce){
  .hero-img{transform:none !important;opacity:1 !important}
}
.hero-grad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,17,.30) 0%,rgba(8,11,17,0) 20%,
    rgba(8,11,17,0) 60%,var(--bg-0) 100%)}
body.print .hero-grad{background:linear-gradient(to bottom,rgba(0,0,0,.18) 0%,
  rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,var(--bg-0) 100%)}
.rm{position:absolute;width:16px;height:16px;border:0 solid var(--line-hi);pointer-events:none;z-index:2}
.rm.tl{top:18px;left:18px;border-top-width:1px;border-left-width:1px}
.rm.tr{top:18px;right:18px;border-top-width:1px;border-right-width:1px}
.rm.bl{bottom:18px;left:18px;border-bottom-width:1px;border-left-width:1px}
.rm.br{bottom:18px;right:18px;border-bottom-width:1px;border-right-width:1px}
.hero-cap{position:absolute;left:calc(var(--pad) + 6px);bottom:20px;z-index:3}

.tally{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.tally div{display:flex;align-items:baseline;gap:.5rem;padding:.75rem 1.3rem .75rem 0;
  margin-right:1.3rem;border-right:1px solid var(--line)}
.tally div:last-child{border-right:0;margin-right:0}
.tally .n{font-family:var(--font-mono);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.tally .n.s3{color:var(--sev-3)} .tally .n.s2{color:var(--sev-2)} .tally .n.s1{color:var(--sev-1)}

.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px solid var(--line-mid);padding-bottom:.6rem;margin:2.4rem 0 1.4rem}
.sec-head .t{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim)}
.sec-head .sq{display:inline-block;width:8px;height:8px;margin-right:.5rem}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:1.15rem}
.tier-sec{margin-top:0}
.sec-more{display:flex;align-items:center;gap:.6rem;padding:1.1rem 0 .2rem;flex-wrap:wrap}
.more-btn{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;background:none;border:1px solid var(--line-mid);color:var(--ink-dim);
  padding:.65rem 1.4rem;cursor:pointer;transition:all var(--dur) var(--ease)}
.more-btn:hover{border-color:var(--accent);color:var(--accent)}
.more-btn.ghost{border-color:var(--line);color:var(--ink-faint)}
.more-btn.ghost:hover{border-color:var(--line-mid);color:var(--ink-dim)}
.sec-more a{margin-left:auto}
.card{display:block;color:inherit;text-decoration:none}
.card:hover{text-decoration:none}
.card .art{aspect-ratio:2/3;background:var(--bg-2);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 0 var(--edge-hi),inset 0 -1px 0 var(--edge-lo);
  transition:border-color var(--dur) var(--ease)}
.card .art img{width:100%;height:100%;object-fit:cover;display:block}
.card .art .ph{font-family:var(--font-mono);font-size:8.5px;color:var(--ink-faint);
  text-align:center;padding:.4rem;line-height:1.6}
.card:hover .art{border-color:var(--line-hi)}
.card .seal{margin-top:.5rem;display:flex;align-items:center;gap:.5rem;min-height:30px}
.card .seal svg{flex-shrink:0}
.card .seal .a{font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.07em;line-height:1.4}
.card .seal .b{font-family:var(--font-mono);font-size:7.5px;color:var(--ink-faint);letter-spacing:.07em}
.card .nm{font-family:var(--font-ui);font-weight:600;font-size:13.5px;line-height:1.25;
  margin-top:.4rem;color:var(--ink)}
.card:hover .nm{color:var(--accent)}
.card .dt{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);margin-top:.15rem}
.seg{cursor:pointer}

/* ---------- browse ---------- */
.controls{display:flex;gap:1.5rem;align-items:flex-start;padding:1.35rem 0;
  border-bottom:1px solid var(--line-mid);flex-wrap:wrap}
.ctl{display:flex;flex-direction:column;gap:.45rem}
.chips{display:flex;gap:.3rem;flex-wrap:wrap}
.chip{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;background:none;border:1px solid var(--line-mid);color:var(--ink-dim);
  padding:.38rem .6rem;cursor:pointer;white-space:nowrap;transition:all var(--dur) var(--ease)}
.chip:hover{border-color:var(--line-hi)}
.chip[aria-pressed=true]{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.chip.c3[aria-pressed=true]{background:rgba(207,74,62,.15);border-color:var(--sev-3);color:var(--sev-3)}
.chip.c2[aria-pressed=true]{background:rgba(220,148,18,.15);border-color:var(--sev-2);color:var(--sev-2)}
.chip.c1[aria-pressed=true]{background:rgba(74,168,99,.15);border-color:var(--sev-1);color:var(--sev-1)}
.filter-in{border:1px solid var(--line-mid);background:var(--bg-1);padding:.4rem .6rem;
  color:var(--ink);font-family:var(--font-body);font-size:13px;outline:none;min-width:190px}
.filter-in:focus{border-color:var(--accent)}
.readout{margin-left:auto;text-align:right;align-self:flex-end}
.readout .n{font-family:var(--font-mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}

table.reg{width:100%;border-collapse:collapse;margin-top:.5rem}
table.reg thead th{position:sticky;top:var(--mast-h,82px);background:var(--bg-0);z-index:10;
  font-family:var(--font-mono);font-size:8.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:.75rem .6rem;
  border-bottom:1px solid var(--line-mid);white-space:nowrap}
table.reg thead th[data-s],table.reg thead th.cat{cursor:pointer}
table.reg thead th[data-s]:hover,table.reg thead th.cat:hover{color:var(--accent)}
table.reg thead th.sorted{color:var(--accent)}
table.reg thead th.cat{text-align:center;width:48px;padding:.75rem .2rem}
table.reg thead th.num{text-align:right;width:56px}
table.reg tbody td{padding:.62rem .6rem;border-bottom:1px solid var(--line);
  vertical-align:middle;font-size:14px}
table.reg tbody tr{transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease)}
table.reg tbody tr:hover{background:var(--bg-1);transform:translateX(3px);
  box-shadow:inset 2px 0 0 var(--accent)}
td.n{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
td.title a{color:var(--ink);font-weight:500;text-decoration:none}
td.title a:hover{color:var(--accent)}
td.meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);white-space:nowrap}
td.cat{text-align:center;padding:.62rem .2rem}
.dot{display:inline-block;width:9px;height:9px;background:var(--sev-0)}
.dot.d1{background:var(--sev-1)} .dot.d2{background:var(--sev-2)} .dot.d3{background:var(--sev-3)}
.det-w{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.05em}
.det-w.t0{color:var(--ink-faint)} .det-w.t1{color:var(--sev-1)}
.det-w.t2{color:var(--sev-2)} .det-w.t3{color:var(--sev-3)}
.more{display:flex;justify-content:center;padding:2rem 0}
.more button{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;background:none;border:1px solid var(--line-mid);color:var(--ink-dim);
  padding:.75rem 2rem;cursor:pointer;transition:all var(--dur) var(--ease)}
.more button:hover{border-color:var(--accent);color:var(--accent)}
.empty{padding:3rem 0;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.empty .code{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-faint)}
.empty .msg{color:var(--ink-dim);max-width:52ch;margin:0}
.empty button{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid var(--line-mid);color:var(--ink-dim);padding:.65rem 1.1rem;cursor:pointer;
  transition:all var(--dur) var(--ease)}
.empty button:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:880px){td.meta,th.meta{display:none}}
@media(max-width:640px){th.cat,td.cat{display:none}}

/* ---------- record page ---------- */
.rec-no{display:flex;align-items:baseline;gap:.9rem;padding:1.6rem 0 .5rem;
  border-bottom:1px solid var(--line)}
.rec-no .n{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--ink-faint);
  letter-spacing:.1em}
.rec-no .d{flex:1;border-bottom:1px dotted var(--line-mid);transform:translateY(-3px)}
.body-grid{display:grid;grid-template-columns:168px 1fr;gap:2.25rem;padding:1.4rem 0 0}
@media(max-width:760px){.body-grid{grid-template-columns:1fr;gap:1.5rem}}
.cover{aspect-ratio:2/3;background:var(--bg-2);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 1px 0 var(--edge-hi),inset 0 -1px 0 var(--edge-lo)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .ph{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-faint);
  text-align:center;padding:.5rem;line-height:1.7}
@media(max-width:760px){.cover{max-width:168px}}
h1{font-family:var(--font-ui);font-weight:700;font-size:clamp(23px,3.4vw,31px);
  line-height:1.16;margin:0 0 1rem;letter-spacing:.005em}
.credits{margin:1.1rem 0 0;border-top:1px solid var(--line-mid)}
.credits div{display:flex;flex-direction:column;gap:.15rem;padding:.6rem 0;
  border-bottom:1px solid var(--line)}
.credits dt{font-family:var(--font-mono);font-size:8.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint)}
.credits dd{margin:0;font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  color:var(--ink-dim);line-height:1.45}
.credits dd.unrec{color:var(--ink-faint);font-weight:400;font-size:10px;line-height:1.55}
.credits.creds-none{opacity:.75}

.finding{display:flex;align-items:flex-start;gap:1.1rem;padding:1rem 1.15rem;
  border:1px solid var(--line-mid);border-left:3px solid var(--line-hi);
  background:linear-gradient(to bottom,var(--edge-wash),transparent 42%),var(--bg-1);
  box-shadow:inset 0 1px 0 var(--edge-hi),inset 0 -1px 0 var(--edge-lo)}
.finding.t3{border-left-color:var(--sev-3)}
.finding.t2{border-left-color:var(--sev-2)}
.finding.t1{border-left-color:var(--sev-1)}
.finding .det{flex-shrink:0;width:104px;border-right:1px solid var(--line);padding-right:1rem}
.finding .det .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.3rem}
.finding .det .v{font-family:var(--font-display);font-size:11px;line-height:1.35;letter-spacing:.02em}
.finding.t3 .det .v{color:var(--sev-3)} .finding.t2 .det .v{color:var(--sev-2)}
.finding.t1 .det .v{color:var(--sev-1)} .finding.t0 .det .v{color:var(--ink-dim)}
.finding p{margin:0;font-size:16.5px;line-height:1.5}
@media(max-width:560px){.finding{flex-direction:column;gap:.75rem}
  .finding .det{border-right:0;border-bottom:1px solid var(--line);padding:0 0 .6rem;width:100%}}

.assess{width:100%;border-collapse:collapse;margin-top:.25rem}
.assess thead th{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);text-align:left;font-weight:500;
  padding:0 0 .5rem;border-bottom:1px solid var(--line-mid)}
.assess td{padding:.85rem .9rem .85rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.assess td:first-child{width:124px}
.assess td:nth-child(2){width:116px}
.assess td:last-child{padding-right:0}
.assess tbody tr{transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease)}
.assess tbody tr:hover{background:var(--bg-1);transform:translateX(3px);
  box-shadow:inset 2px 0 0 var(--accent)}
.cat-name{font-family:var(--font-display);font-size:10px;letter-spacing:.04em;line-height:1.5}
.cat-name.on{color:var(--ink)} .cat-name.off{color:var(--ink-faint)}
.sev{display:flex;flex-direction:column;gap:.3rem}
.sev .segs{display:flex;gap:2px}
.sev .s{width:10px;height:10px;background:var(--sev-0)}
.sev .w{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--ink-faint)}
.s3 .s:nth-child(-n+3){background:var(--sev-3)} .s3 .w{color:var(--sev-3)}
.s2 .s:nth-child(-n+2){background:var(--sev-2)} .s2 .w{color:var(--sev-2)}
.s1 .s:nth-child(-n+1){background:var(--sev-1)} .s1 .w{color:var(--sev-1)}
.why{font-size:14.5px;color:var(--ink-dim);line-height:1.55}
.why.none{color:var(--ink-dim);opacity:.82}

section{margin-top:2.5rem}
.col-r > section:first-of-type{margin-top:1.6rem}
.rest{margin-top:2.75rem;padding-top:.25rem;border-top:1px solid var(--line-mid)}
h2{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);margin:0 0 1rem;padding-bottom:.55rem;
  border-bottom:1px solid var(--line-mid);display:flex;justify-content:space-between;gap:1rem}
h2 .num{color:var(--ink-faint)}
section p{margin:0 0 1.05rem;max-width:76ch}
.checked{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  border:1px solid var(--line);background:var(--line);gap:1px}
.checked div{background:var(--bg-1);padding:.85rem .95rem;
  box-shadow:inset 0 1px 0 var(--edge-hi),inset 0 -1px 0 var(--edge-lo)}
.checked .n{font-family:var(--font-mono);font-size:19px;font-weight:600;color:var(--ink);
  line-height:1;font-variant-numeric:tabular-nums}
.checked .k{margin-top:.4rem}

details.method{border-top:1px solid var(--line);margin-top:1.2rem}
details.method summary{cursor:pointer;padding:.7rem 0;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
  list-style:none;display:flex;gap:.55rem}
details.method summary::-webkit-details-marker{display:none}
details.method summary::before{content:'+';color:var(--accent);font-weight:600}
details.method[open] summary::before{content:'\2212'}
details.method summary:hover{color:var(--accent)}
details.method .in{padding:0 0 1.1rem;font-size:14.5px;color:var(--ink-dim);max-width:76ch}
ol.src{font-family:var(--font-mono);font-size:11.5px;font-weight:500;color:var(--ink-dim);
  padding-left:1.5rem;line-height:2}
ol.src li::marker{color:var(--ink-faint)}

/* ---------- prose pages (method, about) ---------- */
.prose{max-width:76ch;padding-top:1.5rem}
.prose h1{font-size:clamp(24px,3.6vw,34px);margin-bottom:.5rem}
.prose .standfirst{color:var(--ink-dim);font-size:17px;margin:0 0 2rem;padding-bottom:1.5rem;
  border-bottom:1px solid var(--line-mid)}
.prose h2{margin-top:2.6rem}
.prose h3{font-family:var(--font-ui);font-weight:700;font-size:18px;margin:1.8rem 0 .6rem}
.prose p,.prose li{color:var(--ink-dim)}
.prose strong{color:var(--ink);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:14px}
.prose th{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);text-align:left;font-weight:500;padding:.5rem .7rem .5rem 0;
  border-bottom:1px solid var(--line-mid)}
.prose td{padding:.65rem .7rem .65rem 0;border-bottom:1px solid var(--line);
  color:var(--ink-dim);vertical-align:top}
.prose blockquote{margin:1.2rem 0;padding-left:1rem;border-left:2px solid var(--accent);
  color:var(--ink)}
.prose .note{border:1px solid var(--line-mid);background:var(--bg-1);padding:1rem 1.15rem;
  margin:1.5rem 0;font-size:14.5px;
  box-shadow:inset 0 1px 0 var(--edge-hi),inset 0 -1px 0 var(--edge-lo)}

/* ---------- category modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(4,6,10,.82);z-index:80;display:grid;
  place-items:center;padding:var(--pad)}
body.print .modal-bg{background:rgba(120,116,105,.55)}
.modal{background:var(--bg-1);border:1px solid var(--line-hi);max-width:560px;width:100%;
  padding:1.5rem 1.6rem;box-shadow:inset 0 1px 0 var(--edge-hi)}
.modal h3{font-family:var(--font-display);font-size:12px;letter-spacing:.05em;margin:0 0 .25rem}
.modal .sub{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-faint);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.modal p{font-size:14.5px;color:var(--ink-dim);margin:0 0 .9rem}
.modal .test{font-size:13.5px;color:var(--ink);border-left:2px solid var(--accent);
  padding-left:.8rem;margin-bottom:1.1rem}
.modal .ex{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);line-height:1.85}
.modal .x{float:right;background:none;border:1px solid var(--line-mid);color:var(--ink-dim);
  font-family:var(--font-mono);font-size:10px;padding:.2rem .5rem;cursor:pointer}

#tip{position:fixed;z-index:99;pointer-events:none;display:none;background:var(--bg-1);
  border:1px solid var(--line-hi);padding:.3rem .55rem;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.07em;white-space:nowrap}
#tip .s{color:var(--ink-faint)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line-mid);margin-top:4rem;padding:1.4rem 0 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer.site p{margin:0;max-width:62ch;font-size:12px;color:var(--ink-faint);line-height:1.6}


/* ============================================================
   MOBILE
   Three sizes: tablet (<=900), phone (<=640), small phone (<=400).
   Touch targets grow on coarse pointers regardless of width.
   ============================================================ */

/* --- coarse pointer: bigger hit areas everywhere --- */
@media (pointer:coarse){
  .chip{padding:.6rem .8rem;font-size:10.5px}
  .nav a{padding:.45rem 0}
  .more button{padding:.9rem 2rem}
  .theme-btn{padding:.55rem .8rem}
  details.method summary{padding:.95rem 0}
  .ac a{padding:.75rem .7rem}
  table.reg tbody tr:hover{transform:none;box-shadow:none}
  .assess tbody tr:hover{transform:none;box-shadow:none}
}

/* --- tablet --- */
@media(max-width:900px){
  .mast-in{gap:1rem 1.25rem;padding:.85rem var(--pad)}
  .lockup{gap:1rem}
  .logo-slot{width:44px;height:44px}
  .wm .mark{font-size:19px}
  .wm .full{font-size:8.5px;letter-spacing:.16em}
  .search{min-width:180px;order:3;margin-left:0;flex:1 1 100%;max-width:none}
  .nav{order:2;margin-left:auto}
  .theme-btn{order:4}
}

/* --- phone --- */
@media(max-width:640px){
  :root{--pad:1rem}
  .mast-in{padding:.75rem var(--pad);gap:.75rem 1rem}
  .lockup{flex:1 1 auto;gap:.9rem}
  .logo-slot{width:40px;height:40px;font-size:7px}
  .nav{order:3;flex:1 1 100%;gap:1.25rem;border-top:1px solid var(--line);padding-top:.6rem}
  .search{order:4;flex:1 1 100%}
  .theme-btn{order:2;margin-left:auto}

  .hero-wrap{height:clamp(300px,46vh,420px)}
  .hero-cap{left:calc(var(--pad) + 2px);bottom:14px}
  .rm{width:12px;height:12px}
  .rm.tl,.rm.tr{top:12px} .rm.bl,.rm.br{bottom:12px}
  .rm.tl,.rm.bl{left:12px} .rm.tr,.rm.br{right:12px}

  .tally{gap:0}
  .tally div{padding:.6rem .9rem .6rem 0;margin-right:.9rem}

  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.9rem}

  /* browse: rows become stacked records */
  .controls{gap:1.1rem;padding:1.1rem 0}
  .readout{margin-left:0;text-align:left;align-self:flex-start}
  .filter-in{min-width:0;width:100%}
  .ctl{flex:1 1 100%}
  table.reg thead{display:none}
  table.reg tbody tr{display:block;padding:.85rem 0;border-bottom:1px solid var(--line)}
  table.reg tbody tr:hover{transform:none;box-shadow:none;background:none}
  table.reg tbody td{display:inline-block;border:0;padding:0;vertical-align:middle}
  td.n{display:none}
  td.title{display:block;width:100%;font-size:15.5px;margin-bottom:.35rem;line-height:1.3}
  td.meta{display:inline-block !important;font-size:10px;margin-right:.7rem}
  th.cat,td.cat{display:inline-block !important;padding:0 3px 0 0}
  td.cat .dot{width:8px;height:8px}
  table.reg tbody td:last-child{display:block;margin-top:.4rem}

  /* record page */
  .rec-no{flex-wrap:wrap;gap:.4rem;font-size:10px}
  .rec-no .d{display:none}
  .body-grid{gap:1.25rem}
  .cover{max-width:132px}
  .credits div{padding:.5rem 0}
  .finding{padding:.85rem .95rem}
  .finding p{font-size:15.5px}

  /* assessment table stacks */
  .assess thead{display:none}
  .assess tbody tr{display:block;padding:.85rem 0;border-bottom:1px solid var(--line)}
  .assess tbody tr:hover{transform:none;box-shadow:none;background:none}
  .assess td{display:block;width:auto !important;padding:0;border:0}
  .assess td:nth-child(2){margin:.4rem 0 .5rem}
  .sev{flex-direction:row;align-items:center;gap:.5rem}
  .why{font-size:14px}

  .checked{grid-template-columns:1fr 1fr}
  .prose{padding-top:1rem}
  .prose table{display:block;overflow-x:auto;white-space:nowrap}
  .prose table td,.prose table th{white-space:normal;min-width:130px}
  .modal{padding:1.2rem 1.1rem;max-height:82vh;overflow-y:auto}
  footer.site{flex-direction:column;gap:.75rem}
}

/* --- small phone --- */
@media(max-width:400px){
  .wm .full{font-size:7.5px;letter-spacing:.12em}
  .logo-slot{display:none}
  .grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .nav{gap:1rem;font-size:9.5px}
  .tally div{padding:.5rem .7rem .5rem 0;margin-right:.7rem}
  .checked{grid-template-columns:1fr}
}


/* ---- pending review state -------------------------------------------
   Split out of a franchise bundle, not yet individually assessed.
   Deliberately reads as absent rather than as a clean verdict. */
.det-w.tp{ color:var(--ink-faint); border-color:var(--line-mid); }
.det-w.tp::before{ background:transparent; border:1px dashed var(--ink-faint); }
.finding.tp{ border-left-color:var(--ink-faint); }
.finding.tp .v{ color:var(--ink-faint); font-style:italic; }
.card .seal svg circle[stroke-dasharray]{ opacity:.75; }
.pending-note{
  border:1px dashed var(--line-mid); border-radius:2px;
  padding:14px 16px; margin:18px 0;
  color:var(--ink-dim); font-size:.93rem; line-height:1.55;
}
.pending-note strong{ color:var(--ink); font-weight:600; }
.franchise-line{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px;
}

/* "Under review" filter chip on browse */
.chip.cp[aria-pressed="true"]{ border-color:var(--ink-faint); color:var(--ink); }
.chip.cp::before{ background:transparent; border:1px dashed var(--ink-faint); }

/* ---- records link outward ------------------------------------------
   A record used to be a dead end. Category, determination and studio
   are now routes back into the filtered table.

   No underline at rest: .cat-name is 10px on a tight line-height, so a
   border-bottom sits hard against the letters and reads as a rule rather
   than a link. The affordance is the hover instead. */
.finding .v a,
a.cat-name,
.credits dd a{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.finding .v a:hover,
.credits dd a:hover{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

/* Inside the assessment table the row already announces the hover: it
   shifts 3px, lifts its background and shows an orange inset bar. Turning
   the text orange as well, under an underline, on a moving row, is three
   signals for one event. The row keeps the orange; the link takes the
   underline only. */
.assess a.cat-name:hover{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

/* ---- related records ------------------------------------------------ */
.related{ margin-top:34px; }
.related h2{ margin-bottom:14px; }
.rel-group{ margin-bottom:22px; }
.rel-head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);
}
.rel-head a{ color:var(--accent); text-decoration:none; margin-left:auto; }
.rel-head a:hover{ text-decoration:underline; text-underline-offset:3px; }
.rel-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:14px;
}
@media (max-width:640px){
  .rel-grid{ grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:10px; }
}


/* ---- keyboard focus --------------------------------------------------
   The site had two :focus rules, both border tints on inputs, so anyone
   navigating by keyboard had no idea where they were. :focus-visible
   shows the ring for keyboard users without putting it on every mouse
   click. Two layers so it reads against both the dark and print themes. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,150,56,.18);
}
.card:focus-visible,
a.card:focus-visible{ outline-offset:4px; }
/* Rows are links; keep the ring clear of the row's own hover bar. */
.reg tbody tr a:focus-visible{ outline-offset:-2px; }

/* ---- skip to content -------------------------------------------------
   First tab stop on every page. Off-screen until focused. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--bg-2); color:var(--ink);
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none;
  padding:12px 18px; border:1px solid var(--accent); border-radius:2px;
}
.skip:focus{
  left:12px; top:calc(12px + env(safe-area-inset-top,0px));
}