/* ==========================================================================
   Mirror Trap -- stylesheet
   Concept "Dossier": document typography, one accent, no decoration.
   Zero external requests. Mobile first. Logical properties throughout.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Palette */
  --paper:#FBFAF8;
  --paper-sunk:#F3F0F8;
  --ink:#181223;
  --ink-soft:#4B4460;
  --ink-faint:#6E6784;
  --rule:#E3DEED;
  --rule-firm:#C7C0D8;
  --accent:#5B2AE0;
  --accent-deep:#3D14B4;
  --accent-wash:#F2EDFE;
  --alarm:#A31D2B;
  --alarm-wash:#FCECEE;

  /* Type stacks */
  --serif:ui-serif,Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* Fluid type scale */
  --t-xs:clamp(.75rem,.73rem + .1vw,.8rem);
  --t-sm:clamp(.85rem,.82rem + .14vw,.92rem);
  --t-md:clamp(1rem,.96rem + .2vw,1.09rem);
  --t-lg:clamp(1.15rem,1.07rem + .4vw,1.36rem);
  --t-xl:clamp(1.42rem,1.24rem + .85vw,1.95rem);
  --t-2xl:clamp(1.8rem,1.4rem + 1.9vw,2.75rem);
  --t-3xl:clamp(2.2rem,1.5rem + 3.2vw,3.8rem);

  /* Space */
  --gap:clamp(1rem,.8rem + 1vw,1.75rem);
  --stack:clamp(1.5rem,1.2rem + 1.4vw,2.5rem);
  --section:clamp(2.5rem,1.8rem + 3.4vw,4.75rem);
  --rail:64rem;
  --measure:65ch;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--t-md);
  line-height:1.62;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  hanging-punctuation:first last;
}

img,svg{max-inline-size:100%;block-size:auto}

/* --------------------------------------------------------- masthead ---- */

.strip{
  background:var(--ink);
  color:#EDE9F7;
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.strip__in{
  max-inline-size:var(--rail);
  margin-inline:auto;
  padding: .55rem clamp(1rem,.6rem + 2vw,2.5rem);
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.25rem;
  justify-content:space-between;
}
.strip strong{color:#C6B4FF;font-weight:600}

.masthead{
  border-block-end:1px solid var(--rule);
  background:var(--paper);
}
.masthead__in{
  max-inline-size:var(--rail);
  margin-inline:auto;
  padding-block:.9rem;
  padding-inline:clamp(1rem,.6rem + 2vw,2.5rem);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  align-items:baseline;
  justify-content:space-between;
}

.wordmark{
  font-family:var(--serif);
  font-size:var(--t-lg);
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.wordmark__mark{
  inline-size:1.45em;
  block-size:1.45em;
  flex:none;
  display:block;
}
.wordmark:hover{color:var(--accent-deep)}

.nav{
  font-family:var(--sans);
  font-size:var(--t-sm);
}
.nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.15rem;
  margin:0;
  padding:0;
  list-style:none;
}
.nav a{
  color:var(--ink-soft);
  text-decoration:none;
  padding-block-end:.15rem;
  border-block-end:2px solid transparent;
}
.nav a:hover{color:var(--ink);border-block-end-color:var(--accent)}
.nav a[aria-current="page"]{color:var(--ink);border-block-end-color:var(--accent)}

/* ---------------------------------------------------------- layout ---- */

main{display:block}

.rail{
  max-inline-size:var(--rail);
  margin-inline:auto;
  padding-inline:clamp(1rem,.6rem + 2vw,2.5rem);
}

.band{padding-block:var(--section);border-block-start:1px solid var(--rule)}
.band--sunk{background:var(--paper-sunk)}
.band--accent{background:var(--accent-wash);border-block-start-color:#DCD1FA}
.band--alarm{background:var(--alarm-wash);border-block-start-color:#F2D3D6}

/* ---------------------------------------------------------- figures ---- */

.rail--bleed{
  max-inline-size:min(calc(100vw - 2rem),88rem);
  padding-inline:clamp(.5rem,.3rem + 1vw,1.25rem);
}

.figure{
  margin-block:var(--stack) 0;
  margin-inline:0;
  border:1px solid var(--rule-firm);
  background:#fff;
}
.figure img{
  display:block;
  inline-size:100%;
  block-size:auto;
}
.figure figcaption{
  border-block-start:1px solid var(--rule);
  padding:.85rem 1rem;
  font-family:var(--sans);
  font-size:var(--t-sm);
  line-height:1.55;
  color:var(--ink-faint);
}
.figure figcaption strong{color:var(--ink);font-weight:600}

/* ----------------------------------------------------------- prose ---- */

.prose{max-inline-size:var(--measure)}
.prose > * + *{margin-block-start:1em}
/* A heading that follows running text needs a fixed gap, not 1em of its own
   display size -- otherwise a 50px h1 drags 50px of empty space with it. */
.prose > * + h1,
.prose > * + h2,
.prose > * + h3{margin-block-start:calc(var(--gap) * .85)}
.prose p{margin-block:0}

h1,h2,h3,h4{
  font-family:var(--serif);
  line-height:1.16;
  letter-spacing:-.018em;
  margin-block:0;
  text-wrap:balance;
}
h1{font-size:var(--t-3xl);font-weight:600}
h2{font-size:var(--t-xl);font-weight:600}
h3{font-size:var(--t-lg);font-weight:600}
h4{font-size:var(--t-md);font-weight:600;letter-spacing:0}

.deck{
  font-size:var(--t-lg);
  line-height:1.5;
  color:var(--ink-soft);
  max-inline-size:52ch;
}

.eyebrow{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-block:0 .85rem;
}

a{color:var(--accent-deep);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}

.lede{font-size:var(--t-lg);line-height:1.5}
.lede strong{background:linear-gradient(transparent 62%, #D8C9FD 62%)}

small,.fineprint{font-size:var(--t-sm);color:var(--ink-faint)}

/* ------------------------------------------------------------ hero ---- */

.hero{
  padding-block:var(--section);
  display:grid;
  gap:calc(var(--gap) * 1.6);
  align-items:start;
}
@media (min-width:62rem){
  .hero{grid-template-columns:minmax(0,1.5fr) minmax(17rem,.85fr)}
}

/* ------------------------------------------------------------- card --- */

.slab{
  border:1px solid var(--rule-firm);
  background:#fff;
  padding:clamp(1.1rem,1rem + 1vw,1.75rem);
}
.slab--accent{border-color:#CDBCFB;background:var(--accent-wash)}
.slab--alarm{border-color:#EFC9CD;background:var(--alarm-wash)}
.slab h2,.slab h3{margin-block-end:.6rem}

.label{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-block:0 .5rem;
}
.label--accent{color:var(--accent-deep)}
.label--alarm{color:var(--alarm)}

/* ------------------------------------------------------------ grid ---- */

.grid{display:grid;gap:var(--gap)}
@media (min-width:46rem){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --------------------------------------------------------- ledger ----- */

.ledger{
  border-block-start:1px solid var(--rule-firm);
  margin:0;
  padding:0;
  list-style:none;
}
.ledger li{
  display:grid;
  gap:.2rem var(--gap);
  padding-block:1.05rem;
  border-block-end:1px solid var(--rule);
}
@media (min-width:46rem){
  .ledger li{grid-template-columns:11rem minmax(0,1fr)}
}
.ledger dt,.ledger .k{
  font-family:var(--mono);
  font-size:var(--t-sm);
  letter-spacing:.02em;
  color:var(--accent-deep);
}
.ledger p{margin:0;max-inline-size:58ch}
.ledger .k--alarm{color:var(--alarm)}

/* ------------------------------------------------- claim / reality ---- */

.claim{
  border-inline-start:3px solid var(--rule-firm);
  padding-inline-start:1rem;
  font-family:var(--mono);
  font-size:var(--t-sm);
  color:var(--ink-faint);
  text-decoration:line-through;
  text-decoration-color:var(--rule-firm);
}
.reality{
  border-inline-start:3px solid var(--accent);
  padding-inline-start:1rem;
}
.reality h3{margin-block-end:.35rem}

/* ---------------------------------------------------------- tables ---- */

.tablewrap{overflow-x:auto;border:1px solid var(--rule-firm);background:#fff}
table{
  border-collapse:collapse;
  inline-size:100%;
  font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;
}
caption{
  text-align:start;
  padding:.85rem 1rem;
  border-block-end:1px solid var(--rule);
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
th,td{
  text-align:start;
  padding:.7rem .9rem;
  border-block-end:1px solid var(--rule);
  vertical-align:top;
}
thead th{
  font-family:var(--sans);
  font-size:var(--t-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  background:var(--paper-sunk);
  white-space:nowrap;
}
tbody tr:last-child td{border-block-end:0}
tbody tr:hover{background:var(--accent-wash)}
td .yr{font-family:var(--mono);white-space:nowrap}
.t-infected{color:var(--alarm);font-weight:600}

/* --------------------------------------------------------- filters ---- */

.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-block-end:var(--gap)}
.filters input,.filters button{
  font-family:var(--mono);
  font-size:var(--t-sm);
  color:var(--ink);
  background:#fff;
  border:1px solid var(--rule-firm);
  padding:.5rem .8rem;
  border-radius:0;
}
.filters input{min-inline-size:14rem;flex:1 1 14rem}
.filters button{cursor:pointer}
.filters button:hover{border-color:var(--accent);color:var(--accent-deep)}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* -------------------------------------------------------- timeline ---- */

.rail-list{
  margin:0;
  padding:0;
  list-style:none;
  border-inline-start:2px solid var(--rule-firm);
}
.rail-list li{
  position:relative;
  padding:0 0 1.6rem 1.5rem;
}
.rail-list li::before{
  content:"";
  position:absolute;
  inset-inline-start:-7px;
  inset-block-start:.55em;
  inline-size:12px;
  block-size:12px;
  background:var(--paper);
  border:2px solid var(--accent);
}
.rail-list li:last-child{padding-block-end:0}
.rail-list time{
  font-family:var(--mono);
  font-size:var(--t-sm);
  color:var(--accent-deep);
  display:block;
}

/* ----------------------------------------------------------- notes ---- */

.ref{font-family:var(--sans);font-size:.7em;vertical-align:super;line-height:0;padding-inline-start:.1em}
.ref a{text-decoration:none;color:var(--accent)}

.sources{
  border-block-start:2px solid var(--ink);
  padding-block-start:1.1rem;
  font-size:var(--t-sm);
  color:var(--ink-soft);
}
.sources h2{font-size:var(--t-md);font-family:var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sources ol{margin:1rem 0 0;padding-inline-start:1.4rem;display:grid;gap:.6rem}
.sources li{max-inline-size:76ch}
.sources li:target{background:var(--accent-wash);outline:2px solid #D8C9FD}

/* ------------------------------------------------------------ callout - */

.callout{
  border:1px solid var(--rule-firm);
  border-inline-start:4px solid var(--accent);
  background:#fff;
  padding:1.1rem 1.25rem;
  max-inline-size:var(--measure);
}
.callout--alarm{border-inline-start-color:var(--alarm);background:var(--alarm-wash);border-color:#EFC9CD}
.callout p:first-child{margin-block-start:0}
.callout p:last-child{margin-block-end:0}

/* ------------------------------------------------------------- list --- */

.rules{
  counter-reset:rule;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:1.1rem;
}
.rules > li{
  counter-increment:rule;
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr);
  gap:1rem;
  align-items:start;
  padding-block-end:1.1rem;
  border-block-end:1px solid var(--rule);
}
.rules > li::before{
  content:counter(rule,decimal-leading-zero);
  font-family:var(--mono);
  font-size:var(--t-sm);
  color:var(--accent);
  padding-block-start:.2em;
}
.rules h3{margin-block-end:.3rem}
.rules p{margin:0;max-inline-size:62ch}

.plain{margin:0;padding-inline-start:1.25rem;display:grid;gap:.5rem;max-inline-size:var(--measure)}
.plain li::marker{color:var(--accent)}

/* ------------------------------------------------------------ cta ----- */

.next{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:baseline;margin-block-start:var(--stack)}
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:var(--t-sm);
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  padding:.7rem 1.2rem;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--accent-deep)}
.btn--ghost:hover{background:var(--accent-wash);color:var(--accent-deep)}

/* ----------------------------------------------------------- footer --- */

.foot{
  border-block-start:1px solid var(--rule-firm);
  background:var(--paper-sunk);
  padding-block:var(--section);
  font-size:var(--t-sm);
}
.foot__grid{display:grid;gap:var(--gap)}
@media (min-width:46rem){
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.foot h2{font-size:var(--t-md);font-family:var(--sans);letter-spacing:.08em;text-transform:uppercase}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}
.foot a{color:var(--ink-soft);text-decoration:none}
.foot a:hover{color:var(--accent-deep);text-decoration:underline}

.disclaimer{
  margin-block-start:var(--stack);
  border:1px solid var(--rule-firm);
  background:var(--paper);
  padding:clamp(1.1rem,1rem + 1vw,1.9rem);
  max-inline-size:78ch;
}
.disclaimer p{margin-block:0 .8rem}
.disclaimer p:last-child{margin-block-end:0}
.colophon{
  margin-block-start:var(--stack);
  padding-block-start:1.1rem;
  border-block-start:1px solid var(--rule);
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.05em;
  color:var(--ink-faint);
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.5rem;
  justify-content:space-between;
}

/* ------------------------------------------------------------ utils --- */

.visually-hidden{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Progressive enhancement: controls that need scripting stay hidden until
   the script reveals them, so they are never inert for a reader without JS. */
[hidden]{display:none !important}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.skip{
  position:absolute;
  inset-inline-start:-9999px;
}
.skip:focus{
  inset-inline-start:1rem;
  inset-block-start:1rem;
  z-index:9;
  background:#fff;
  border:2px solid var(--accent);
  padding:.6rem 1rem;
  font-family:var(--sans);
  font-size:var(--t-sm);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media print{
  .strip,.masthead,.next,.filters{display:none}
  body{font-size:11pt}
}