/* Proof of Luck — private research brief
   Palette is two-colour by thesis: LUCK (magenta) is what you can't schedule,
   CRAFT (teal) is what you decide. Every chart obeys that encoding.
   Chart hues validated for CVD + lightness band against surface #14101F. */

@font-face{font-family:'Archivo';src:url(fonts/Archivo-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/IBMPlexSans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PlexMono';src:url(fonts/IBMPlexMono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PlexMono';src:url(fonts/IBMPlexMono-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --ink:#14101F; --ink-2:#1D1730; --ink-3:#272040; --hair:#332B4E;
  /* decorative radial blooms at page top/bottom — MUST invert with the theme,
     or light mode renders dark text on a dark wash (measured 1.10:1). */
  --bloom:#221A3B; --bloom-2:#241B40;
  /* translucent chip surface for the fixed folio — must invert too */
  --chip:#14101FCC; --ticket-foot:#181231;
  --paper:#EFE9DC; --paper-2:#DFD6C4;
  --luck:#FF3D68; --craft:#0FA090; --data:#A87C28; --foil:#C8A24C;
  --text:#F2EFF7; --text-2:#B7B0CC; --muted:#8B85A0;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Plex',system-ui,sans-serif;
  --mono:'PlexMono',ui-monospace,monospace;
  --gut:clamp(20px,5vw,84px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:.98;margin:0}
a{color:var(--foil)}
:focus-visible{outline:2px solid var(--foil);outline-offset:3px;border-radius:2px}

/* ─── perforation: the one motif carried everywhere ─────────────── */
.perf{height:2px;background-image:radial-gradient(circle,var(--hair) 1.4px,transparent 1.5px);
  background-size:9px 9px;background-position:0 50%;opacity:.85}

/* ─── the gate ──────────────────────────────────────────────────── */
#gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,var(--bloom) 0%,var(--ink) 62%)}
.ticket{width:min(430px,100%);background:var(--ink-2);border:1px solid var(--hair);
  border-radius:3px;box-shadow:0 30px 90px -30px #000,0 0 0 1px #000 inset;overflow:hidden}
.ticket-top{padding:30px 30px 22px}
.ticket-bot{padding:20px 30px 26px;background:var(--ticket-foot)}
.gate-brand{font-family:var(--display);font-size:26px;letter-spacing:-.03em;margin:0 0 4px}
.gate-brand .of{color:var(--muted)}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted)}
.gate-sub{color:var(--text-2);font-size:13.5px;margin:14px 0 0}
.field{display:flex;gap:8px;margin-top:16px}
input[type=password]{flex:1;min-width:0;background:var(--ink);border:1px solid var(--hair);
  color:var(--text);font-family:var(--mono);font-size:15px;letter-spacing:.16em;
  padding:12px 13px;border-radius:2px}
input[type=password]::placeholder{color:#5A5478;letter-spacing:.3em}
button{font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;cursor:pointer;border-radius:2px;border:0;
  background:var(--foil);color:#1A1305;padding:12px 18px;transition:filter .15s}
button:hover{filter:brightness(1.12)}
.gate-note{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.05em;margin:0}
.err{color:var(--luck);font-family:var(--mono);font-size:12px;margin:12px 0 0;min-height:16px}

/* ─── deck shell ────────────────────────────────────────────────── */
#deck{opacity:0;transition:opacity .5s ease}
#deck.on{opacity:1}
.rail{position:fixed;left:0;top:0;height:2px;background:var(--foil);z-index:50;width:0;transition:width .12s linear}
.folio{position:fixed;right:clamp(12px,2.4vw,28px);bottom:clamp(12px,2.4vw,24px);z-index:50;
  font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em;
  background:var(--chip);padding:5px 9px;border:1px solid var(--hair);border-radius:2px}
section{padding:clamp(56px,9vh,104px) var(--gut);border-bottom:1px solid var(--hair);position:relative}
.wrap{max-width:1180px;margin:0 auto}
.tag{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.tag .n{font-family:var(--mono);font-weight:600;font-size:11px;color:var(--foil);letter-spacing:.16em}
.tag .line{flex:1;height:1px;background:var(--hair)}
h2{font-size:clamp(30px,5.2vw,60px);max-width:19ch}
h2 em{font-style:normal;color:var(--muted)}
.lede{color:var(--text-2);max-width:62ch;font-size:clamp(15.5px,1.35vw,19px);margin:20px 0 0}
.lede strong{color:var(--text);font-weight:400;box-shadow:inset 0 -.5em 0 #FF3D6822}

/* ─── hero + scratch ticket ─────────────────────────────────────── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 80% at 50% -10%,var(--bloom-2) 0%,var(--ink) 60%)}
.hero h1{font-size:clamp(38px,8.4vw,104px);max-width:15ch;margin:22px 0 0}
.hero h1 .hi{color:var(--foil)}
.scratch-wrap{margin:38px 0 0;display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);align-items:center}
.scratch-wrap>div:first-child{flex:0 1 470px;min-width:min(300px,100%)}
.card{position:relative;width:100%;max-width:470px;aspect-ratio:1.9/1;border-radius:4px;
  background:var(--paper);color:#141018;overflow:hidden;flex:0 0 auto;
  box-shadow:0 26px 70px -26px #000}
.card-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:18px}
.card .from{font-family:var(--mono);font-size:12px;color:#6A6280;letter-spacing:.12em}
.card .amt{font-family:var(--display);font-size:clamp(32px,6.6vw,54px);letter-spacing:-.04em;
  color:#141018;margin:2px 0}
.card .meta{font-family:var(--mono);font-size:11px;color:#6A6280;letter-spacing:.07em;max-width:30ch}
canvas.foil{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
canvas.foil.gone{pointer-events:none}
.scratch-hint{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.11em;
  margin:12px 0 0;display:flex;align-items:center;gap:10px}
.linkish{background:none;border:0;color:var(--foil);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.11em;text-transform:none;padding:0;text-decoration:underline;cursor:pointer}
.hero-side{flex:1 1 300px;min-width:240px}
/* measure: 46ch while it sits beside the ticket, unconstrained once it stacks —
   a capped line under a full-width card reads as pinched, not as considered. */
.hero-side p{color:var(--text-2);margin:0 0 18px;max-width:46ch}
@media (max-width:860px){
  .hero-side p{max-width:none}
  .scratch-wrap>div:first-child{flex:1 1 100%}
}

/* ─── stat tiles ────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin:34px 0 0}
.tile{background:var(--ink);padding:20px 18px}
.tile .k{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;display:block}
.tile .l{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.13em;
  text-transform:uppercase;margin-top:7px;display:block;line-height:1.5}
.k.luck{color:var(--luck)} .k.craft{color:var(--craft)} .k.foil{color:var(--foil)}

/* ─── charts ────────────────────────────────────────────────────── */
figure{margin:34px 0 0}
figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 16px}
.chart{width:100%;overflow-x:auto}
.chart svg{display:block;min-width:520px;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 14px;font-family:var(--mono);
  font-size:11.5px;color:var(--text-2);letter-spacing:.06em}
.legend i{width:11px;height:11px;border-radius:2px;display:inline-block;margin-right:7px;vertical-align:-1px}
.src{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin:14px 0 0;letter-spacing:.04em}
details{margin:16px 0 0;border-top:1px solid var(--hair);padding-top:12px}
summary{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer}
table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}
th,td{text-align:right;padding:7px 10px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:12px}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:600;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}

/* ─── two-column split ──────────────────────────────────────────── */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin:34px 0 0}
.col{background:var(--ink);padding:clamp(22px,2.6vw,34px)}
.col h3{font-size:clamp(19px,2vw,25px);margin-bottom:6px}
.col .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:14px;display:block}
.col.a .role{color:var(--luck)} .col.b .role{color:var(--craft)}
.col p{color:var(--text-2);margin:0 0 16px}

/* ─── evidence rows: claim + the receipt ────────────────────────── */
.rows{margin:30px 0 0;border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(16px,3vw,44px);
  padding:24px 0;border-bottom:1px solid var(--hair);align-items:start}
.row h3{font-size:clamp(17px,1.75vw,21px);letter-spacing:-.015em;line-height:1.2}
.row p{margin:9px 0 0;color:var(--text-2);font-size:14.5px}
.receipt{background:var(--ink-2);border:1px solid var(--hair);border-left:2px solid var(--luck);
  padding:15px 17px;border-radius:2px}
.receipt.c{border-left-color:var(--craft)}
.receipt .q{font-family:var(--mono);font-size:12.5px;color:var(--text);line-height:1.65}
.receipt .s{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:9px;letter-spacing:.05em}
@media (max-width:720px){.row{grid-template-columns:1fr;gap:14px}}

/* ─── playbook: printed stubs ───────────────────────────────────── */
.track-head{display:flex;align-items:center;gap:11px;margin:38px 0 14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--text-2)}
.track-head .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.track-head .dot.luck{background:var(--luck)} .track-head .dot.craft{background:var(--craft)}
.track-head .rule{flex:1;height:1px;background:var(--hair)}
.stubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin:0}
.stub{background:var(--paper);color:#161119;border-radius:3px;padding:20px 20px 16px;
  display:flex;flex-direction:column;min-height:186px;position:relative}
.stub.c{background:var(--paper-2)}
.stub .step{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.15em;
  color:#7A7290;text-transform:uppercase}
.stub h3{font-size:19px;margin:9px 0 8px;color:#0F0B16;max-width:18ch}
.stub p{margin:0;font-size:14px;color:#443E52;line-height:1.55}
.stub .foot{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;display:flex;align-items:center;gap:7px;color:#6A6280}
.pill{display:inline-block;padding:2px 7px;border-radius:2px;font-family:var(--mono);
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.pill.luck{background:#FF3D6822;color:#B21D42} .pill.craft{background:#0FA09022;color:#0A6C61}

/* ─── closing ───────────────────────────────────────────────────── */
.close{min-height:78svh;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(110% 80% at 50% 100%,var(--bloom-2) 0%,var(--ink) 62%)}
.close h2{font-size:clamp(30px,6vw,68px);max-width:16ch}
.close .sig{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.15em;
  margin-top:38px;text-transform:uppercase}
@media (max-width:640px){
  .hero h1{font-size:clamp(32px,10vw,52px)}
  .row{padding:20px 0}
}

/* utility classes — inline style="" attributes are blocked by style-src 'self' */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.legend i.sw-craft{background:var(--craft)}
.legend i.sw-luck{background:var(--luck)}
.lede.pad{margin-top:34px}
h3.sub{font-size:clamp(20px,2.4vw,29px);margin:clamp(58px,8vh,104px) 0 0;max-width:24ch}
.mono-in{font-family:var(--mono);font-size:.92em;color:var(--text-2)}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE
   Values are contrast-checked against the light surface (#F7F4EE), not eyeballed:
     luck  #C8103F 5.31:1 · craft #046A60 5.91:1 · data #6E4F12 6.86:1
     text  #191325 16.47:1 · text-2 #443B5A 9.47:1 · muted #645C7A 5.70:1
   All pass AA and mirror the dark theme's ratios (5.45 / 5.74 / 4.96).
   luck-vs-craft lightness is deliberately near-equal in BOTH themes — the pair is
   separated by HUE (pink vs teal), which is the red/green-colourblind-safe choice.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --ink:#F7F4EE; --ink-2:#FFFFFF; --ink-3:#F0EADD; --hair:#DCD3C2;
  --paper:#FFFFFF; --paper-2:#F0EADD;
  --luck:#C8103F; --craft:#046A60; --data:#6E4F12; --foil:#8A6B20;
  --text:#191325; --text-2:#443B5A; --muted:#645C7A;
  /* pale lavender keeps the design's character; muted text over it is 4.90:1 (AA),
     body text 14.14:1 — vs 2.62:1 / 1.10:1 with the un-inverted dark bloom. */
  --bloom:#E6E1F2; --bloom-2:#E6E1F2;
  --chip:#FFFFFFDD; --ticket-foot:#F0EADD;
}

/* The deck's SVG charts carry hard-coded presentation attributes (fill="#…").
   A CSS `fill` property beats a presentation attribute on specificity, so one
   block rethemes every chart without regenerating the encrypted payload. */
svg [fill="#B7B0CC"] { fill: var(--text-2); }
svg [fill="#8B85A0"] { fill: var(--muted);  }
svg [fill="#A87C28"] { fill: var(--data);   }
svg [fill="#FF3D68"] { fill: var(--luck);   }
svg [fill="#0FA090"] { fill: var(--craft);  }
svg [stroke="#332B4E"] { stroke: var(--hair); }

/* ── theme toggle ───────────────────────────────────────────────────────── */
.themebtn {
  position: fixed; top: 14px; right: 14px; z-index: 80;   /* above #gate, which is also fixed at 60 */
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair); border-radius: 9px;
  background: var(--ink-2); color: var(--text-2);
  cursor: pointer; line-height: 1;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.themebtn:hover { color: var(--text); border-color: var(--foil); }
.themebtn:focus-visible { outline: 2px solid var(--foil); outline-offset: 2px; }
.themebtn svg { width: 17px; height: 17px; display: block; }
.themebtn .ico-sun  { display: none; }
:root[data-theme="light"] .themebtn .ico-sun  { display: block; }
:root[data-theme="light"] .themebtn .ico-moon { display: none; }
@media print { .themebtn { display: none; } }