/* Murder Mystery Case Files UK — "the file on the desk" identity
   Frame: a dark desk. Content: an aged manila case file. Labels: rubber stamps & typewriter. */
:root{
  --desk:#20241f;            /* desk surface behind the file */
  --paper:#f0e7cf;           /* the file's paper */
  --paper-grain:rgba(90,70,30,.045);
  --panel:#e7d9b4;           /* manila inserts */
  --panel-2:#ded0a8;
  --ink:#2b2417;             /* typewriter ink */
  --ink-soft:#5b5140;
  --ink-faint:#8a7c60;
  --line:#c4b288;
  --rule:#a08c5e;
  --stamp:#a83a2b;           /* rubber-stamp red */
  --stamp-dark:#8a2c20;
  --tag:#7d5f28;             /* evidence-tag brown */
  --good:#4a6237;
  --cta-text:#f6efdd;
}
@media (prefers-color-scheme: dark){
  :root{
    --desk:#0f0e0c;
    --paper:#242019;         /* the file under a desk lamp, lights off */
    --paper-grain:rgba(255,220,150,.03);
    --panel:#2d2820;
    --panel-2:#353024;
    --ink:#e9ddc0;
    --ink-soft:#b5a888;
    --ink-faint:#877a5e;
    --line:#453d2c;
    --rule:#5c5138;
    --stamp:#d96a53;
    --stamp-dark:#e8836e;
    --tag:#c9a24d;
    --good:#93ad7a;
    --cta-text:#1a1712;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--desk);
  color:var(--ink);
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-size:16.5px;line-height:1.7;
  margin:0;
}
img{max-width:100%;height:auto}
a{color:var(--stamp);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--stamp-dark)}
a:focus-visible,button:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
strong{font-weight:600}
code{font-family:"Courier Prime",ui-monospace,monospace;font-size:.92em}

/* ── Header: the folder tab ─────────────────────────── */
.site-head{background:transparent;border:0;padding-top:26px}
.site-head .inner{
  max-width:820px;margin:0 auto;padding:16px 26px 14px;
  background:var(--panel);
  border:1px solid var(--rule);border-bottom:0;
  border-radius:10px 10px 0 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  position:relative;
}
.site-head .inner::after{ /* the tab's punched label holes */
  content:"";position:absolute;top:12px;right:14px;width:8px;height:8px;border-radius:50%;
  background:var(--desk);opacity:.5;box-shadow:-16px 0 0 var(--desk);
}
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.brand .name{font-family:"Special Elite","Courier New",monospace;font-size:21px;line-height:1.15;letter-spacing:.01em}
.brand .tag{
  font-family:"Courier Prime",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--stamp);font-weight:700;
}
nav.primary{display:flex;gap:2px 18px;flex-wrap:wrap}
nav.primary a{
  font-family:"Courier Prime",ui-monospace,monospace;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:4px 1px;border-bottom:2px solid transparent;
}
nav.primary a:hover{color:var(--stamp)}
nav.primary a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--stamp)}

/* ── Main: the paper itself ─────────────────────────── */
main{
  max-width:820px;margin:0 auto;padding:8px 30px 72px;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--paper-grain) 27px 28px),
    var(--paper);
  border:1px solid var(--rule);
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  position:relative;
}
main::before{ /* file reference strip along the top of the sheet */
  content:"CASE REF · MMCF/UK/2026 — DO NOT REMOVE FROM SITE";
  display:block;
  font-family:"Courier Prime",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.18em;color:var(--ink-faint);
  border-bottom:1px dashed var(--rule);
  padding:12px 0 10px;margin:0 0 6px;text-transform:uppercase;
}
main.wide{max-width:980px}
.page-hero{
  display:block;width:100%;height:auto;max-width:none;
  border:1px solid var(--rule);margin:4px 0 20px;
  filter:sepia(.08) contrast(1.02);
}
main>*{max-width:640px}
main>.table-scroll,main>.card-grid,main>.pros-cons{max-width:none}

/* ── Type ───────────────────────────────────────────── */
h1{
  font-family:"Special Elite","Courier New",monospace;font-weight:400;
  font-size:clamp(27px,4.4vw,37px);line-height:1.22;
  margin:34px 0 12px;text-wrap:balance;
}
h2{
  font-family:"Special Elite","Courier New",monospace;font-weight:400;
  font-size:23px;line-height:1.28;margin:52px 0 8px;text-wrap:balance;
  padding-top:16px;border-top:3px double var(--rule);
}
h3{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:18.5px;margin:28px 0 6px}
p{margin:13px 0}
ul,ol{padding-left:22px}
li{margin:6px 0}
li::marker{color:var(--stamp)}
.lede{font-size:18px;font-style:italic;color:var(--ink-soft)}
.eyebrow{
  font-family:"Courier Prime",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stamp);font-weight:700;margin:44px 0 -34px;
}
.byline{
  font-family:"Courier Prime",ui-monospace,monospace;font-size:12px;
  color:var(--ink-faint);margin:0 0 26px;
  border-bottom:1px solid var(--line);padding-bottom:14px;
}
.byline a{color:var(--ink-faint)}

/* ── Evidence-log tables ────────────────────────────── */
.table-scroll{overflow-x:auto;margin:18px 0;border:1px solid var(--rule);background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
.table-scroll table{min-width:620px}
th{
  text-align:left;font-family:"Courier Prime",ui-monospace,monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--ink);padding:10px 14px;border-bottom:2px solid var(--ink);
  background:var(--panel-2);
}
td{padding:10px 14px;border-bottom:1px dotted var(--rule);vertical-align:top}
tr:last-child td{border-bottom:none}

/* ── Stamps & tags ──────────────────────────────────── */
.pill{
  display:inline-block;font-family:"Courier Prime",ui-monospace,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:1px 8px;border:1.5px solid currentColor;border-radius:2px;
  white-space:nowrap;transform:rotate(-1.2deg);background:transparent;
}
.pill.red{color:var(--stamp)}
.pill.gold{color:var(--tag)}
.pill.green{color:var(--good)}

.callout{
  background:var(--panel);border:1px solid var(--rule);
  border-left:5px solid var(--tag);
  padding:16px 20px;margin:22px 0;font-size:15px;
}
.callout .label{
  font-family:"Courier Prime",ui-monospace,monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tag);font-weight:700;
  display:block;margin-bottom:5px;
}
.callout p{margin:7px 0}

.disclosure{
  background:transparent;border:1px dashed var(--rule);
  padding:12px 18px;margin:20px 0;font-size:14px;color:var(--ink-soft);
}

/* ── Index cards: evidence slips ────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px;margin:26px 0;padding:0;list-style:none}
.card{
  background:var(--panel);border:1px solid var(--rule);padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:6px;position:relative;
}
.card::before{ /* strip of tape over the top edge */
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(-1.5deg);
  width:74px;height:14px;background:var(--paper-grain);
  border:1px solid var(--rule);opacity:.85;
}
.card h3{margin:2px 0 0;font-size:17px;font-family:"Spectral",Georgia,serif}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--stamp)}
.card .kicker{
  font-family:"Courier Prime",ui-monospace,monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stamp);font-weight:700;
}
.card p{font-size:14px;color:var(--ink-soft);margin:2px 0 8px}
.card .more{margin-top:auto;font-size:13.5px;font-weight:600}

/* ── Verdict memo ───────────────────────────────────── */
.verdict-box{
  background:var(--panel);
  border:2px solid var(--ink);
  padding:18px 22px;margin:24px 0;position:relative;
}
.verdict-box::before{
  content:"FINDINGS";
  position:absolute;top:-11px;left:16px;
  font-family:"Courier Prime",ui-monospace,monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;color:var(--stamp);background:var(--panel);padding:0 8px;
  border:1.5px solid var(--stamp);transform:rotate(-1deg);
}
.verdict-box .score{
  font-family:"Special Elite","Courier New",monospace;font-size:32px;color:var(--stamp);
  line-height:1;margin:6px 0 4px;
}
.verdict-box .outof{font-size:15px;color:var(--ink-faint);font-family:"Spectral",serif}
.verdict-box p{margin:8px 0}

/* ── Pros / cons: two witness statements ────────────── */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.pros-cons>div{background:var(--panel);border:1px solid var(--rule);padding:14px 18px}
.pros-cons h3{
  margin:0 0 8px;font-size:12px;font-family:"Courier Prime",ui-monospace,monospace;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.pros-cons ul{margin:0;padding-left:18px}
.pros-cons li{font-size:14.5px;margin:5px 0}
.pros-cons .pros h3{color:var(--good)}
.pros-cons .cons h3{color:var(--stamp)}
@media (max-width:600px){.pros-cons{grid-template-columns:1fr}}

/* ── CTA: the big red stamp ─────────────────────────── */
.cta{
  display:inline-block;background:var(--stamp);color:var(--cta-text);
  font-family:"Courier Prime",ui-monospace,monospace;font-weight:700;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:12px 24px;border-radius:2px;margin:6px 0;
  box-shadow:2px 3px 0 rgba(0,0,0,.25);
}
.cta:hover{background:var(--stamp-dark);color:var(--cta-text)}

/* ── FAQ: interview transcript ──────────────────────── */
details.faq{border-bottom:1px dotted var(--rule);padding:6px 0}
details.faq summary{font-weight:600;cursor:pointer;padding:8px 0}
details.faq summary::before{content:"Q. ";font-family:"Courier Prime",monospace;color:var(--stamp);font-weight:700}
details.faq p{margin:4px 0 12px;color:var(--ink-soft)}

/* ── Breadcrumbs ────────────────────────────────────── */
.crumbs{
  font-family:"Courier Prime",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.04em;color:var(--ink-faint);margin:18px 0 -22px;
}
.crumbs a{color:var(--ink-faint)}
.crumbs a:hover{color:var(--stamp)}

/* ── Footer: the back cover ─────────────────────────── */
.site-foot{background:transparent;border:0;margin-top:0}
.site-foot .inner{
  max-width:820px;margin:0 auto 40px;padding:26px 30px 30px;
  background:var(--panel);border:1px solid var(--rule);border-top:0;
  border-radius:0 0 10px 10px;
}
.site-foot .cols{display:flex;flex-wrap:wrap;gap:22px 52px;margin-bottom:18px}
.site-foot h4{
  font-family:"Courier Prime",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px;font-weight:700;
}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:5px 0}
.site-foot a{color:var(--ink-soft);text-decoration:none;font-size:14px}
.site-foot a:hover{color:var(--stamp)}
.site-foot .fine{font-size:13px;color:var(--ink-faint);max-width:78ch;border-top:1px dashed var(--rule);padding-top:14px}

@media (max-width:640px){
  main{padding:6px 20px 56px}
  .site-head .inner,.site-foot .inner{padding-left:20px;padding-right:20px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}