/* ============================================================================
   FullyCooked — the card. One phone screen. The joke is the design.
   The card is a fixed, hot object (same in both themes); the page around it
   follows the system.
   ============================================================================ */
:root{
  --page:#f2efe9; --page-ink:#1a1816; --page-mute:#7a746c;
  --hot:#ff4d1c; --ink:#120b08; --ink-2:rgba(18,11,8,.72); --ink-3:rgba(18,11,8,.5); --rule:rgba(18,11,8,.18);
  --paper:#fff3ec;
  --disp:"Anton","Impact","Arial Narrow",sans-serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --scale:1;
}
@media (prefers-color-scheme: dark){:root{--page:#0f0e0d; --page-ink:#eeeae4; --page-mute:#8f8a82}}
*,*::before,*::after{box-sizing:border-box}
/* blank until the web fonts are in (base.html flips the class); layout still happens underneath */
html.fonts-loading .card > *{visibility:hidden}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--page);color:var(--page-ink);font:16px/1.4 var(--sans)}

/* ---------- the card ---------- */
.card{background:var(--hot);color:var(--ink);min-height:100dvh;display:flex;flex-direction:column;
  padding:calc(16px * var(--scale)) 18px calc(14px * var(--scale));gap:calc(12px * var(--scale))}
.mast{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font:600 calc(11px * var(--scale))/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.mast .wm{color:var(--ink);font-weight:700;text-decoration:none}
.kick{font:600 calc(11px * var(--scale))/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px}
.victim{margin:0}
.badge{display:inline-block;margin:2px 0 6px;padding:.08em .22em .02em;background:var(--ink);color:var(--hot);
  font:400 clamp(30px,calc(11.5vw * var(--scale)),52px)/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
.tagline{margin:0;font:italic 500 calc(15.5px * var(--scale))/1.3 var(--sans);color:var(--ink);max-width:34ch}
.exhibits{display:flex;flex-direction:column;justify-content:center;gap:calc(14px * var(--scale));flex:1}
.ex{border-top:1.5px solid var(--ink);padding-top:calc(10px * var(--scale))}
.ex .line{margin:0;font:700 clamp(17px,calc(5.6vw * var(--scale)),24px)/1.22 var(--sans);letter-spacing:-.012em;text-wrap:pretty}
.ex .rcpt{margin:calc(8px * var(--scale)) 0 0;font:500 max(10px,calc(11px * var(--scale)))/1.4 var(--mono);color:var(--ink-2);word-break:break-word}
.ex .rcpt::before{content:"▸ "}
.ex .acts{display:flex;gap:10px;align-items:center;margin-top:6px}
.ex .acts button{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  background:transparent;border:1px solid var(--rule);border-radius:999px;padding:5px 9px;cursor:pointer}
.ex .acts button.on,.ex .acts button:hover{color:var(--ink);border-color:var(--ink)}
.ex .acts .strike{margin-left:auto}
.reacts{display:flex;gap:5px}
.reacts .ha{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:14px;letter-spacing:0;text-transform:none}
.reacts .ha span{font:600 11px/1 var(--mono);color:var(--ink-2);min-width:0}
.reacts .ha.on{background:rgba(18,11,8,.12);border-color:var(--ink)}
.reacts .ha.on span{color:var(--ink)}
.ex.struck .line{text-decoration:line-through;text-decoration-thickness:3px;opacity:.5}
.foot{display:flex;flex-direction:column;gap:8px;margin-top:auto}
/* The CTA is the fixed point of every page: one size, immune to the fitter's --scale, and a
   <button> renders exactly like an <a>. */
.cta{display:block;width:100%;margin:0;appearance:none;-webkit-appearance:none;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--ink);color:var(--hot);font:400 19px/1 var(--disp);text-transform:uppercase;letter-spacing:.05em;
  padding:14px 16px;border:0;border-radius:6px}
.cta:hover{opacity:.92}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.cta.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);font:600 12px/1 var(--mono);letter-spacing:.1em;padding:10px 12px}
.share-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
main.card .sub{margin:0;font:500 15px/1.4 var(--sans);color:var(--ink-2);max-width:36ch}
.fine{margin:0;font:500 11px/1.4 var(--sans);color:var(--ink-2);text-align:center}
.fine.left{text-align:left;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:12.5px;color:var(--ink-2)}
.toast{font:500 12px/1.3 var(--sans);color:var(--ink);text-align:center;min-height:1.3em}
/* the small contact / privacy / terms pills under every footer */
.minis{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.mini{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:5px 10px;margin-top:2px}
.mini:hover{color:var(--ink);border-color:var(--ink)}
.mini.on,.mini.on:hover{background:var(--ink);color:var(--hot);border-color:var(--ink)}   /* the page you are on */
/* contact form */
.cform{display:flex;flex-direction:column;flex:1;gap:10px;min-height:0}
.cform input,.cform textarea{width:100%;font:500 15px/1.4 var(--sans);color:var(--ink);background:rgba(255,255,255,.18);
  border:1.5px solid var(--ink);border-radius:6px;padding:11px 12px;outline:none;-webkit-appearance:none;appearance:none}
.cform textarea{flex:1;min-height:120px;resize:none}
.cform input:focus,.cform textarea:focus{background:rgba(255,255,255,.32)}
.cform ::placeholder{color:var(--ink-3)}
.cform .err{margin:0;font:600 13px/1.3 var(--sans);color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* desktop: the card sits on the page like a phone */
@media (min-width:600px){
  body{display:grid;place-items:center;padding:28px 16px}
  .card{width:430px;min-height:auto;height:min(880px,calc(100vh - 56px));border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.28)}
}
/* on phones the card clips its own overflow, so the 8px slide-in never reads as page overflow */
@media (max-width:599px){.card{overflow:hidden}}
/* short phones: tighten everything before the fitter has to */
@media (max-height:720px){
  :root{--scale:.92}
  .share-row{grid-template-columns:repeat(4,1fr);gap:5px}
  .share-row .cta{padding:9px 4px;font-size:9.5px;letter-spacing:.04em}
  .cta{padding:12px 14px}
}
/* the fitter's last resort: drop the fine print and the gaps */
.card.tight{gap:8px}
.card.tight .fine,.card.tight .toast,.card.tight .minis{display:none}
/* long-form pages (privacy, terms): the same fixed card as everything else; the text pages to fit */
.card.doc{height:100dvh;min-height:0}
.doc-body{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow:hidden;
  font:500 15px/1.5 var(--sans);color:var(--ink)}
.doc-body > *{margin:0;max-width:62ch}
.doc-body > [hidden]{display:none}
.doc-body .lead{font-weight:700}
.doc-body h2{padding-top:6px;font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.doc-body a{color:var(--ink)}
.doc-body .legal{font-size:13px;line-height:1.5;letter-spacing:.01em}
@media (min-width:600px){.card.doc{height:min(880px,calc(100vh - 56px))}}
.card.tight .ex .acts{margin-top:2px}

/* ---------- picker: a fixed-height card whose list pages to fit ---------- */
.pickcard{height:100dvh;min-height:0}
.pickform{display:flex;flex-direction:column;flex:1;gap:10px;min-height:0}
.picklist{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:hidden;justify-content:flex-start}
.acct{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;height:54px;flex:none;
  text-align:left;background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:0 12px;
  font:700 14px/1.2 var(--sans);cursor:pointer}
.acct[hidden]{display:none}
.acct .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.acct .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct small{font:500 10.5px/1 var(--mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .amt{font:500 12px/1 var(--mono);color:var(--ink-2);white-space:nowrap}
.acct:hover,.acct:focus-visible{background:rgba(18,11,8,.09);outline:none}
.pager{display:flex;justify-content:center;align-items:center;gap:16px;font:600 12px/1 var(--mono);color:var(--ink-2)}
.pager button{font:700 18px/1 var(--sans);color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:999px;width:34px;height:34px;cursor:pointer}
.pager button:disabled{opacity:.3;cursor:default}
.pickform.busy .acct:not(.picked),.pickform.busy .cta:not(.picked),.pickform.busy .pager{opacity:.3;pointer-events:none}
.acct.picked{background:var(--ink);color:var(--hot)}
.acct.picked small,.acct.picked .amt{color:var(--hot)}
.cta.picked{opacity:1}
@media (min-width:600px){.pickcard{height:min(880px,calc(100vh - 56px))}}

/* ---------- cover (landing) ---------- */
.cover .pitch{margin:0;font:700 clamp(20px,6.4vw,28px)/1.18 var(--sans);letter-spacing:-.015em;text-wrap:balance}
main.cover .sub{margin-top:8px}
.cover ol{margin:10px 0 0;padding-left:20px;font:500 14px/1.45 var(--sans)}
.cover li{margin:0 0 6px}

/* ---------- progress ---------- */
.bar{height:6px;background:rgba(18,11,8,.22);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.bar.live i{transition:none;position:relative}
.bar.live i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,77,28,.45) 50%,transparent 100%);background-size:220% 100%;animation:sheen 1.8s linear infinite}
@keyframes sheen{from{background-position:220% 0}to{background-position:-220% 0}}
.bar.busy i{width:35%;animation:slide 1.1s ease-in-out infinite alternate}
@keyframes slide{from{margin-left:0}to{margin-left:65%}}
.clock{font:600 11px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);text-align:right;margin-top:-6px;font-variant-numeric:tabular-nums}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.steps li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:3px;font:600 14px/1.3 var(--sans);color:var(--ink-3);transition:color .35s}
.steps li.on,.steps li.done{color:var(--ink)}
.steps .mark{width:17px;height:17px;box-sizing:border-box;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;position:relative;transition:background .35s,border-color .35s}
.steps li.done .mark{background:var(--ink);border-color:var(--ink)}
.steps .mark svg{width:11px;height:11px;fill:none;stroke:var(--hot);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .4s ease-out .1s}
.steps li.done .mark svg{stroke-dashoffset:0}
.steps li.on .mark::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:ring 1.5s ease-out infinite}
@keyframes ring{0%{transform:scale(.5);opacity:.75}100%{transform:scale(1.1);opacity:0}}
.steps .took{font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.steps .detail{grid-column:2/4;font:500 12px/1.3 var(--mono);color:var(--ink-2);height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .35s ease}
.steps li.on .detail:not(:empty){opacity:1}
/* The progress page swaps copy between steps: the tagline keeps three lines of room so the bar
   and the steps never move, and every step row keeps its detail slot whether or not it has text. */
.stage .tagline{min-height:3.9em}
.stage .badge{min-width:5ch}
@media (prefers-reduced-motion:reduce){.steps li.on .mark::after,.bar.live i::after{animation:none}}

/* ---------- reveal ---------- */
.pop{transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.pop.out{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion: reduce){.pop{transition:none}.pop.out{opacity:1;transform:none}}

/* ---------- admin (plain, on the page ground) ---------- */
.wrap.wide{max-width:1120px;margin:0 auto;padding:18px 16px 60px;color:var(--page-ink)}
.mast-admin{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--page-mute);padding-bottom:8px;margin-bottom:16px;font-size:12px}
.mast-admin nav{display:flex;flex-wrap:wrap;gap:12px}
.mast-admin a{color:var(--page-mute);text-decoration:none;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.mast-admin a:hover{color:var(--page-ink)}
.logo{font-weight:700;text-decoration:none;color:var(--page-ink);letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.pill{display:inline-block;font:500 11px/1 var(--mono);padding:3px 7px;border-radius:999px;border:1px solid var(--page-mute);color:var(--page-mute);margin-right:6px}
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--page-mute);margin:14px 0 8px}
.card-admin,.card{--x:0}
.wrap.wide .card{background:transparent;color:var(--page-ink);min-height:0;display:block;border:1px solid var(--page-mute);border-radius:6px;padding:14px 16px;margin:12px 0;height:auto;box-shadow:none;width:auto}
.wrap.wide .card h2{margin-top:0;font:600 15px/1.3 var(--sans)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.tile{border:1px solid var(--page-mute);border-radius:6px;padding:10px 12px}
.tile .v{font:700 22px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.tile .k{color:var(--page-mute);font-size:12px;margin-top:4px}
.tile.hot .v,.tile.warm .v{color:var(--hot)}
table.adm{width:100%;border-collapse:collapse;font-size:13px}
table.adm th,table.adm td{padding:6px 8px;border-bottom:1px solid rgba(128,128,128,.25);text-align:left;vertical-align:top}
table.adm th{color:var(--page-mute);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
table.adm a{color:var(--page-ink)}
.num{font-variant-numeric:tabular-nums}
pre{background:rgba(128,128,128,.12);padding:12px;border-radius:6px;overflow:auto;font:12px/1.45 var(--mono);max-height:460px;white-space:pre-wrap;word-break:break-word}
code{font-family:var(--mono);font-size:.85em;color:var(--hot)}
details.card summary{cursor:pointer;color:var(--page-mute)}
select.btn,input.btn,button.btn{font:500 13px/1 var(--sans);color:var(--page-ink);background:transparent;border:1px solid var(--page-mute);border-radius:6px;padding:8px 10px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.rl{border-top:1px solid rgba(128,128,128,.25);padding:10px 0 4px;margin:8px 0}
.rl .txt{margin:0 0 4px;font-size:15px;font-weight:600}
.rl .rcpt{font-size:12px;color:var(--page-mute)}
.rl.is-hidden .txt{text-decoration:line-through;opacity:.6}
.wrap.wide .sub{color:var(--page-mute);font-size:13px}
.mt0{margin-top:0}
.pnl-neg{color:var(--hot)} .pnl-pos{color:#2f7a4f}