/* Krown launch site. Tokens mirror the native app so the two never drift. */
:root{
  --bg:#0B0B0F;          /* app background */
  --surface:#15151C;
  --surface-2:#1B1B24;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.28);
  --text:#FFFFFF;
  --muted:#A9A9B2;       /* lifted from #8A8A93 to clear 4.5:1 on --bg */
  --gold:#F5C542;        /* winners and ceremony ONLY */
  --violet:#7C5CFF;      /* action + selection */
  --radius:22px;
  --gutter:24px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px;margin:0 auto;padding:0 var(--gutter)}
main.wrap,main .wrap{max-width:760px}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(11,11,15,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.mark svg{width:28px;height:28px;flex:none}
.mark span{font-weight:800;letter-spacing:-.01em;font-size:19px}
.topnav{display:flex;align-items:center;gap:22px}
.topnav>a{color:var(--muted);text-decoration:none;font-size:15px}
.topnav>a:hover{color:var(--text)}
.topnav>a.btn{color:#fff}

/* type */
h1{font-size:clamp(40px,8.4vw,88px);line-height:1.02;letter-spacing:-.045em;margin:22px 0 18px;font-weight:900}
h2{font-size:clamp(28px,4.6vw,44px);line-height:1.08;letter-spacing:-.03em;margin:0 0 14px;font-weight:800}
h3{font-size:19px;margin:0 0 8px;font-weight:700}
p{margin:0 0 14px;color:var(--muted)}
p.lead{color:var(--text);font-size:clamp(18px,2.4vw,21px);line-height:1.5}
a{color:var(--violet)}
a:focus-visible,button:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
ul,ol{color:var(--muted);padding-left:20px;margin:0 0 14px}
li{margin:0 0 8px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.eyebrow-gold{color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{border-color:rgba(255,255,255,.45)}
/* White on --violet measures 4.34:1 — AA only as large text (≥18.66px bold).
   The primary label is set 19px/700 so the pair passes without changing the
   app's shared action color. */
.btn-primary{background:var(--violet);border-color:var(--violet);color:#fff;font-size:19px;font-weight:700;box-shadow:0 10px 32px rgba(124,92,255,.35)}
.btn-primary:hover{border-color:var(--violet);filter:brightness(1.06)}
.btn-small{min-height:40px;padding:8px 18px;font-size:15px}
.btn-small.btn-primary{font-size:15px;font-weight:700;box-shadow:0 6px 20px rgba(124,92,255,.30)}
.btn-big{min-height:56px;padding:14px 30px}

/* hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:clamp(64px,10vh,110px) 0 0}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(640px 420px at 50% -8%,rgba(124,92,255,.22),transparent 68%),
  radial-gradient(520px 320px at 50% 108%,rgba(245,197,66,.10),transparent 70%);
  pointer-events:none}
.hero .wrap{position:relative;max-width:880px}
.hero .lead{max-width:640px;margin:0 auto 30px}
.nine{color:var(--gold)}
.cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 26px}

/* the fan — three live shots dealt under the crown */
.fan{position:relative;height:400px;margin:34px auto 0;max-width:760px}
.fan-crown{position:absolute;left:50%;top:-8px;width:64px;height:64px;transform:translateX(-50%);filter:drop-shadow(0 6px 24px rgba(245,197,66,.45));animation:crownfloat 5s ease-in-out infinite alternate;z-index:4}
.shot{position:absolute;left:50%;top:56px;width:224px;height:300px;margin-left:-112px;border-radius:24px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px rgba(0,0,0,.55);display:flex;flex-direction:column;justify-content:space-between;padding:16px;overflow:hidden}
/* Scrim, not decoration. The labels are white on real photographs now, so the
   worst case is a blown-out highlight landing under one — the sunset sky behind
   SAW, the lit path behind THE PROMPT. Against a pure-white pixel the top stop
   composites to #6B6B6B (5.0:1 for .shot-tag) and the bottom to #474747 (5.0:1
   for .shot-time at 65% white). Both clear AA with no photo cooperation needed.
   The middle stops stay near-clear so the picture still reads as a picture. */
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.12) 34%,rgba(0,0,0,.14) 60%,rgba(0,0,0,.72))}
.shot-tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:#fff;position:relative;z-index:1}
/* Positioned so it stacks above the scrim — which now covers the whole card,
   not just the top 44% as it did when these were gradients. */
.shot-time{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.65);align-self:flex-end;position:relative;z-index:1}
/* The background-color under each photo is that card's old gradient endpoint:
   the fan still looks deliberate while the images load, and if one ever 404s. */
.shot-ate{background:#180F09 url(/img/ate-plate.webp) center/cover no-repeat;transform:translateX(-172px) rotate(-9deg);animation:fanl .9s cubic-bezier(.2,.7,.2,1) both;z-index:1}
.shot-prompt{background:#120E1E url(/img/prompt-dog.webp) center/cover no-repeat;transform:translateY(-18px);animation:fanc .9s cubic-bezier(.2,.7,.2,1) both;z-index:3}
.shot-saw{background:#0B1316 url(/img/saw-street.webp) center/cover no-repeat;transform:translateX(172px) rotate(9deg);animation:fanr .9s cubic-bezier(.2,.7,.2,1) both;z-index:2}
@keyframes fanl{from{transform:translateX(0) rotate(0);opacity:.35}}
@keyframes fanc{from{transform:translateY(24px);opacity:.35}}
@keyframes fanr{from{transform:translateX(0) rotate(0);opacity:.35}}
@keyframes crownfloat{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(8px)}}

/* marquee — the rules of the game, on a loop */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;background:rgba(255,255,255,.02)}
.mq-track{display:flex;width:max-content;animation:mq 30s linear infinite}
.mq-track span{white-space:nowrap;font-family:var(--mono);font-size:13px;letter-spacing:.22em;color:var(--muted);padding-right:24px}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
.section{padding:clamp(64px,10vw,116px) 0}
.section-tight{padding-top:0}
.section-head{max-width:640px;margin:0 auto 44px;text-align:center}
.section-head p{margin:0}

/* the day, on its own clock */
.tl{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:0 auto}
.tl-card{display:grid;grid-template-columns:128px 1fr;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.tl-card:hover{border-color:rgba(255,255,255,.20)}
.tl-time{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--muted);padding-top:4px}
.tl-card p{margin:0}
.tl-gold{border-color:rgba(245,197,66,.38);background:linear-gradient(160deg,rgba(245,197,66,.07),transparent 55%),var(--surface)}
.tl-gold .tl-time{color:var(--gold)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{font-size:14px;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px}
.chip-gold{color:#0B0B0F;background:var(--gold);border-color:var(--gold)}

/* private by design */
.pv{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:760px;margin:0 auto}
.pv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.pv-card p{margin:0;font-size:15px}

/* honest status */
.status-card{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.status-card p{margin:0}

/* notes shared with inner pages */
.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:24px 0}
.note p:last-child{margin-bottom:0}
.note h3{margin-top:0}
.crown{color:var(--gold)}

/* footer */
footer{border-top:1px solid var(--line);margin-top:56px;padding:40px 0 56px}
.hero+*~footer,main+footer{margin-top:0}
.foot-brand p{margin:10px 0 22px;font-size:15px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:16px}
footer a{color:var(--muted);text-decoration:none;font-size:15px}
/* WCAG 2.2 AA 2.5.8: at 15px these links measured 23px tall — one pixel under
   the 24px minimum, on every page. The mailto in <small> is left alone: it sits
   inline in a sentence, which the criterion exempts.
   Padding rather than a font-size bump, so the footer keeps its visual weight
   while the hit area grows to 31px. */
footer nav a{display:inline-block;padding:4px 0}
footer a:hover{color:var(--text);text-decoration:underline}
footer small{color:var(--muted);font-size:13px;display:block}

/* legal drafts */
.draft{border:1px solid var(--gold);background:rgba(245,197,66,.08);border-radius:var(--radius);padding:18px 20px;margin:24px 0}
.draft b{color:var(--gold)}
/* The gold wash composites --bg up to rgb(30,26,19), which drops --violet from
   4.52:1 to 3.99:1 — under AA. Lift links on this panel only, so the shared
   --violet token stays identical to the native app. Measured 5.27:1. */
.draft a{color:#9478FF}

/* /join invite page */
.code-card{background:linear-gradient(160deg,rgba(124,92,255,.10),transparent 60%),var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:22px 20px;margin:24px 0 16px;text-align:center;box-shadow:0 18px 56px rgba(124,92,255,.12)}
.code-label{color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 8px}
.code{font-family:var(--mono);font-size:clamp(30px,9vw,40px);font-weight:700;line-height:1.15;letter-spacing:.18em;text-indent:.18em;color:var(--text);margin:0;-webkit-user-select:all;user-select:all}
.actions{display:flex;flex-direction:column;gap:10px;margin:0 0 6px}
.status{min-height:24px;color:var(--text);margin:0 0 10px}

/* inner pages get headline scale one step down */
main.wrap h1{font-size:clamp(32px,7vw,52px)}

@media (min-width:560px){ .actions{flex-direction:row;flex-wrap:wrap} .actions .btn{flex:1 1 auto} }
@media (max-width:760px){
  .topnav>a:not(.btn){display:none}
  .fan{height:330px}
  .shot{width:186px;height:250px;margin-left:-93px;top:52px}
  .shot-ate{transform:translateX(-128px) rotate(-9deg)}
  .shot-saw{transform:translateX(128px) rotate(9deg)}
  .tl-card{grid-template-columns:1fr;gap:8px;padding:22px}
  .pv{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }