/* Four on the Floor — parent-facing evidence site
   The device: every claim in running text carries a numbered source that
   resolves to a card in the rail. Nothing asserts without a citation beside it. */

:root{
  --paper:#FBFAF7; --panel:#F3F0EA; --sunk:#EDE9E1;
  --ink:#14110E; --body:#2E2822; --muted:#6E655A;
  --rule:#E2DCD1; --rule-2:#D2C9BB;
  --accent:#DE4B26; --blue:#1F5F87; --green:#2F6E47; --amber:#9A6A05;
  --chip-green:#E4EFE7; --chip-amber:#F7EDD7; --chip-grey:#EAE6DE;
  --shadow:0 1px 2px rgba(20,17,14,.05), 0 8px 24px -16px rgba(20,17,14,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12100E; --panel:#1B1815; --sunk:#221E1A;
    --ink:#F4F0E9; --body:#DCD5CB; --muted:#9A9086;
    --rule:#2C2723; --rule-2:#3A342E;
    --accent:#F2683F; --blue:#7FB6D8; --green:#7FC095; --amber:#E5B451;
    --chip-green:#1D2A21; --chip-amber:#2B2517; --chip-grey:#232019;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#12100E; --panel:#1B1815; --sunk:#221E1A;
  --ink:#F4F0E9; --body:#DCD5CB; --muted:#9A9086;
  --rule:#2C2723; --rule-2:#3A342E;
  --accent:#F2683F; --blue:#7FB6D8; --green:#7FC095; --amber:#E5B451;
  --chip-green:#1D2A21; --chip-amber:#2B2517; --chip-grey:#232019;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:Literata,Georgia,'Times New Roman',serif;
  font-size:17px; line-height:1.62; font-optical-sizing:auto;
}
h1,h2,h3,h4,.dsp{ font-family:'Bricolage Grotesque',system-ui,sans-serif;
  color:var(--ink); letter-spacing:-.015em; text-wrap:balance; }
.mono,code,.cite,.lbl{ font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace; }
a{ color:var(--blue); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
img{max-width:100%}

/* ---- the mark ------------------------------------------------------- */
.mark{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  width:20px; height:20px; flex:0 0 20px; }
.mark i{ display:block; border-radius:2px; }
.mark i:nth-child(1){background:#DE4B26} .mark i:nth-child(2){background:#E39A0F}
.mark i:nth-child(3){background:#2A76A6} .mark i:nth-child(4){background:#3A8757}
.mark.lg{ width:34px;height:34px;flex-basis:34px;gap:3px }
.mark.lg i{border-radius:3px}

/* ---- chrome --------------------------------------------------------- */
header.top{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule); }
.bar{ max-width:1240px; margin:0 auto; padding:11px 22px; display:flex;
  align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.brand b{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:15px;
  letter-spacing:-.01em; }
.brand span{ font-family:'DM Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  color:var(--muted); text-transform:uppercase; }
nav.main{ margin-left:auto; display:flex; gap:2px; flex-wrap:wrap; }
nav.main a{ font-family:'Bricolage Grotesque',sans-serif; font-size:13.5px;
  text-decoration:none; color:var(--muted); padding:6px 10px; border-radius:6px; }
nav.main a:hover{ background:var(--panel); color:var(--ink); }
nav.main a[aria-current="page"]{ color:var(--ink); background:var(--sunk); }

/* ---- layout: text column + citation rail ---------------------------- */
main{ max-width:1240px; margin:0 auto; padding:0 22px 96px; }
.spread{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 44px; }
@media (min-width:1080px){ .spread{ grid-template-columns:minmax(0,1fr) 288px; } }
.rail{ display:none; }
@media (min-width:1080px){
  .rail{ display:block; padding-top:14px; }
  .rail .sticky{ position:sticky; top:74px; }
}
.col{ max-width:70ch; }

/* ---- type ----------------------------------------------------------- */
.hero{ padding:64px 0 36px; border-bottom:1px solid var(--rule); margin-bottom:34px; }
.eyebrow{ font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
h1{ font-size:clamp(34px,5.4vw,54px); font-weight:800; line-height:1.02; margin:0; }
h1.sm{ font-size:clamp(28px,4vw,40px); }
.stand{ font-size:clamp(18px,2.2vw,21px); line-height:1.5; color:var(--muted);
  margin:18px 0 0; max-width:60ch; }
h2{ font-size:26px; font-weight:800; margin:52px 0 12px; line-height:1.15; }
h2:first-child{ margin-top:0; }
h3{ font-size:19px; font-weight:700; margin:32px 0 8px; }
p{ margin:0 0 17px; }
ul,ol{ margin:0 0 18px; padding-left:22px; } li{ margin-bottom:8px; }
strong,b{ color:var(--ink); font-weight:600; }
.lede{ font-size:19px; line-height:1.55; }
hr{ border:0; border-top:1px solid var(--rule); margin:44px 0; }

/* ---- the citation device -------------------------------------------- */
sup.ref{ font-family:'DM Mono',monospace; font-size:10.5px; line-height:0;
  vertical-align:super; margin-left:1.5px; }
sup.ref a{ text-decoration:none; color:var(--accent); padding:0 2px;
  border-radius:3px; background:var(--sunk); }
sup.ref a:hover,sup.ref a:focus{ background:var(--accent); color:#fff; }
.srcs{ margin:0; padding:0; list-style:none; }
.srcs li{ margin:0 0 12px; padding:11px 12px; background:var(--panel);
  border:1px solid var(--rule); border-radius:8px; font-size:12.5px; line-height:1.45; }
.srcs .n{ font-family:'DM Mono',monospace; font-size:10.5px; color:var(--accent);
  display:block; margin-bottom:4px; letter-spacing:.06em; }
.srcs .t{ color:var(--ink); font-weight:600; display:block; }
.srcs .j{ color:var(--muted); font-style:italic; }
.srcs a{ word-break:break-word; }
.rail h4{ font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:400; }
/* on narrow screens the rail becomes an endnote block */
.endnotes{ margin-top:52px; padding-top:22px; border-top:1px solid var(--rule); }
@media (min-width:1080px){ .endnotes{ display:none; } }
.endnotes h4{ font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:400; }

/* ---- evidence strength chips ---------------------------------------- */
.chip{ display:inline-flex; align-items:center; gap:5px; font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px;
  border-radius:4px; white-space:nowrap; }
.chip.s{ background:var(--chip-green); color:var(--green); }
.chip.m{ background:var(--chip-amber); color:var(--amber); }
.chip.w{ background:var(--chip-grey); color:var(--muted); }

/* ---- tables --------------------------------------------------------- */
.tw{ overflow-x:auto; margin:0 0 24px; border:1px solid var(--rule); border-radius:10px; }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:14px; }
th,td{ text-align:left; padding:11px 13px; border-bottom:1px solid var(--rule);
  vertical-align:top; line-height:1.45; }
th{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; color:var(--ink);
  background:var(--panel); font-size:12.5px; letter-spacing:.01em; }
tr:last-child td{ border-bottom:0; }
td b{ color:var(--ink); }
.num{ font-variant-numeric:tabular-nums; }

/* ---- callouts ------------------------------------------------------- */
.note{ border-left:3px solid var(--accent); background:var(--panel);
  padding:15px 17px; border-radius:0 8px 8px 0; margin:0 0 22px; font-size:15.5px; }
.note p:last-child{ margin-bottom:0; }
.note .lbl{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px; }
.note.cool{ border-left-color:var(--blue); }
.note.cool .lbl{ color:var(--blue); }

/* ---- the ladder ----------------------------------------------------- */
.ladder{ display:flex; flex-direction:column; gap:0; margin:0 0 26px;
  border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
.rung{ display:grid; grid-template-columns:60px 1fr; gap:16px; padding:18px 18px;
  border-bottom:1px solid var(--rule); background:var(--paper); }
.rung:last-child{ border-bottom:0; }
.rung .age{ font-family:'DM Mono',monospace; font-size:11px; line-height:1.3;
  color:var(--accent); padding-top:3px; }
.rung h3{ margin:0 0 5px; font-size:17px; }
.rung p{ margin:0 0 8px; font-size:15px; }
.say{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:17px;
  color:var(--ink); background:var(--sunk); padding:9px 12px; border-radius:7px;
  margin-top:8px; }
.say em{ color:var(--muted); font-style:normal; font-size:13px; display:block;
  margin-top:3px; font-family:'DM Mono',monospace; }

/* ---- cards ---------------------------------------------------------- */
.grid{ display:grid; gap:14px; margin:0 0 26px; }
@media(min-width:640px){ .grid.two{ grid-template-columns:1fr 1fr; } }
.card{ border:1px solid var(--rule); border-radius:12px; padding:18px; background:var(--panel); }
.card h3{ margin:0 0 7px; font-size:17px; }
.card p{ margin:0 0 10px; font-size:14.5px; line-height:1.5; }
.card p:last-child{ margin-bottom:0; }

/* ---- footer --------------------------------------------------------- */
footer{ border-top:1px solid var(--rule); background:var(--panel); }
.fin{ max-width:1240px; margin:0 auto; padding:38px 22px 54px; display:grid;
  gap:26px; }
@media(min-width:760px){ .fin{ grid-template-columns:1.4fr 1fr 1fr; } }
footer h4{ font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px; font-weight:400; }
footer a{ color:var(--body); text-decoration:none; display:block; margin-bottom:7px;
  font-size:14px; }
footer a:hover{ color:var(--accent); }
.fbrand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.fbrand b{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; color:var(--ink); }
.smallprint{ font-size:12.5px; color:var(--muted); line-height:1.55; max-width:44ch; }
.disc{ border-top:1px solid var(--rule-2); }
.disc .in{ max-width:1240px; margin:0 auto; padding:18px 22px 30px;
  font-size:12px; color:var(--muted); line-height:1.6; }
@media print{ header.top,nav.main,footer{display:none} .rail{display:none} }