/* cr3d.org: warm off-black + gold. Locked design = design/lab/cr3d-org round 3 (A3) minus the Our Starting 5 section (Sonny 2026-11-02). */
/* cr3d.org lab, round 3 BASE (A2 + dark beehiiv slot). Warm off-black ground, softened ink, gold for accents only.
   Square corners (R115, only the phone bezel is round); no grain; content renders with no JS and without scroll-timeline support. */
@font-face{font-family:"CR3D Brush";src:url("../assets/cr3d-brush.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --ground:#14120F;--card:#1C1A16;--edge:#35312A;
  --ink:#E9E4D8;--dim:#B6AFA1;--gold:#DAB54C;--gold-hi:#E8C964;--on-gold:#14120F;
    --brush:"CR3D Brush","Arial Narrow",Impact,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* TYPE: five sizes + eyebrow/small. body 18, lede 21, h3 28 -> 32, h2 34 -> 72, hero 88 -> 200 */
  --t-xs:13px;--t-s:15px;
  --t-b:clamp(17px,.5vw + 15px,19px);
  --t-m:clamp(19px,.6vw + 16px,22px);
  --t-l:clamp(24px,1vw + 20px,32px);
  --t-xl:clamp(34px,4.6vw + 17px,72px);
  --t-hero:clamp(88px,19vw + 14px,200px);
  /* SPACING: 8-based only */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:72px;--s7:112px;
  --sec:clamp(72px,8vw,112px);
  --gut:clamp(20px,4vw,48px);
  --max:1160px;
  --measure:62ch;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ground)}
body{font:400 var(--t-b)/1.6 var(--sans);color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;background:var(--gold);color:var(--on-gold);padding:10px 16px;font-weight:700;z-index:20;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
section{padding-block:var(--sec)}
.brush{font-family:var(--brush);font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:.01em}
h2.brush{font-size:var(--t-xl);margin-bottom:var(--s3)}
.eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2);display:block}
.lede{color:var(--dim);font-size:var(--t-m);line-height:1.55;max-width:var(--measure)}
p.body{max-width:var(--measure)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s4);background:var(--gold);color:var(--on-gold);font:700 var(--t-s)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:2px solid var(--gold);transition:background-color .2s ease-out,color .2s ease-out}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--on-gold)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.small{font-size:14px;color:var(--dim);margin-top:var(--s2);max-width:60ch;line-height:1.6}
/* header: solid ground (no translucent layer repainting under scroll) */
.top{position:sticky;top:0;z-index:9;background:var(--ground);border-bottom:1px solid var(--gold)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.top img{width:92px;height:auto}
.top nav{display:flex;gap:var(--s3);align-items:center}
.top nav a.l{display:none;padding:10px 0;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.top nav a.l:hover{color:var(--gold)}
.top .btn{min-height:44px;padding:0 var(--s3);font-size:var(--t-xs)}
@media(min-width:760px){.top nav a.l{display:inline}.top img{width:110px}}
/* phone: the one rounded thing */
.phone{margin:0 auto;max-width:320px}
.phone .frame{border:2px solid var(--edge);border-radius:32px;overflow:hidden;background:#000}
.phone figcaption{color:var(--dim);font-size:14px;text-align:center;margin-top:var(--s2)}
/* waitlist slot: the page's dark card holding the REAL beehiiv iframe. Its inside is set dark/transparent in beehiiv's form editor (see README). */
.slot{max-width:560px;background:var(--card);border:1px solid var(--edge);padding:0}
.slot iframe{display:block;width:100%;height:291px;border:0;max-width:100%}
/* 404 */
.nf{min-height:100vh;display:grid;place-items:center;padding:var(--s3);text-align:center}
.nf-box{max-width:360px}
.nf-box img{margin:0 auto var(--s2)}
.nf-box h1{font-size:var(--t-xl);margin-bottom:var(--s2);color:var(--gold)}
.nf-box p{color:var(--dim);margin-bottom:var(--s3)}
/* footer */
footer{border-top:1px solid var(--gold);background:var(--card);padding:var(--s5) 0 var(--s6);font-size:14px;color:var(--dim)}
footer .wrap{display:grid;gap:var(--s3)}
footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px var(--s3)}
footer a{display:inline-block;padding:10px 0}
footer img{width:84px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ===== A2: round 1 A, refined. Held: copy, sections, motion-forward direction. Varied: polish (readability, clean-up, natural motion).
   Motion rules: transform + opacity only, short travel, ease-out, one mover per viewport; every effect sits inside @supports + no-preference. ===== */
/* hero */
.hero{padding-block:var(--s5) var(--s7);position:relative;overflow:clip}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 520px at 76% 40%,rgba(218,181,76,.13),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;gap:var(--s4);align-items:center;position:relative}
.hero h1{font-size:var(--t-hero);margin:var(--s1) 0 var(--s3)}
.hero h1 span{display:block}
.hero h1 .g{color:var(--gold)}
.hero p{color:var(--dim);max-width:44ch;margin-bottom:var(--s4);font-size:var(--t-m);line-height:1.55}
.hero .mark{width:min(60vw,300px);margin:0 auto}
@media(min-width:860px){.hero{padding-block:var(--s6) var(--s7)}.hero .wrap{grid-template-columns:1.1fr .9fr}.hero .mark{width:min(34vw,440px)}}
/* divider: a clean thin gold rule with one square at its centre (the brush-stroke asset is a repeating wave band at every size, so it is not used) */
.rule{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:12px;position:relative}
.rule::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:5px;height:2px;background:var(--gold);transform-origin:50% 50%}
.rule::after{content:"";position:absolute;left:calc(50% - 6px);top:0;width:12px;height:12px;background:var(--gold)}
/* problem */
.problem{background:var(--card);text-align:center}
.problem h2{margin-inline:auto;max-width:16ch;line-height:1}
.problem p{margin-inline:auto;color:var(--dim);font-size:var(--t-m);max-width:34ch;line-height:1.55}
/* experience */
.exp-grid{display:grid;gap:var(--s5)}
.exp-head{order:1}.exp-grid .phone{order:2;max-width:280px}.steps{order:3}
.steps{list-style:none}
.steps li{position:relative;padding:var(--s4) 0;border-top:1px solid var(--edge);display:grid;grid-template-columns:clamp(56px,14vw,88px) 1fr;gap:0 var(--s2);align-items:start}
.steps li:last-child{border-bottom:1px solid var(--edge)}
.steps li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}
.steps b{grid-row:span 2;font:400 clamp(48px,8vw,80px)/.9 var(--brush);color:var(--gold)}
.steps h3{font-size:var(--t-l);font-weight:700;line-height:1.15;margin-bottom:var(--s1)}
.steps p{color:var(--dim);font-size:var(--t-b);max-width:44ch}
@media(min-width:860px){
  .exp-grid{grid-template-columns:320px minmax(0,1fr);gap:0 var(--s7);align-items:start}
  .exp-grid .phone{grid-column:1;grid-row:1/span 2;position:sticky;top:104px;max-width:320px}
  .exp-head,.steps{grid-column:2}
  .steps li{min-height:24vh;align-content:center}
}
/* leagues: heading, then four perks as a 2x2 grid, then the season as one full-width gold line with five nodes (a column on a phone) */
.lg-head{margin-bottom:var(--s5)}
.lg-head h2{margin-bottom:0}
.pay{list-style:none;display:grid;gap:0 var(--s6);border-top:1px solid var(--edge)}
.pay li{padding:var(--s3) 0;border-bottom:1px solid var(--edge);font:600 var(--t-l)/1.2 var(--sans);display:flex;gap:var(--s2);align-items:baseline}
.pay li::before{content:"";flex:none;width:10px;height:10px;background:var(--gold);translate:0 -2px}
@media(min-width:760px){.pay{grid-template-columns:1fr 1fr}}
.seasonbox{margin-top:var(--s6)}
.seasonbox h3.eyebrow{margin-bottom:var(--s4)}
.season{list-style:none;position:relative;padding-left:var(--s5)}
.season::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--gold);transform-origin:50% 0}
.season li{position:relative;padding:var(--s2) 0;font:400 var(--t-l)/1 var(--brush);text-transform:uppercase;color:var(--ink)}
.season li::before{content:"";position:absolute;left:calc(-1 * var(--s5));top:calc(var(--s2) + 2px);width:16px;height:16px;background:var(--gold)}
.season li small{display:block;font:700 var(--t-xs)/1 var(--sans);letter-spacing:.2em;color:var(--gold);margin-bottom:6px}
@media(min-width:860px){
  .season{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;padding:var(--s5) 0 0;gap:0 var(--s2)}
  .season::before{left:0;right:0;top:7px;bottom:auto;width:auto;height:2px;transform-origin:0 50%}
  .season li{padding:0}
  .season li::before{left:0;top:-48px}
  .season li{padding-top:0;font-size:var(--t-l)}
}
/* clubs */
.clubs{background:var(--card)}
.clubs .wrap{display:grid;gap:var(--s4);align-items:center}
.clubs h2{max-width:18ch}
.clubs .lede+.lede{margin-top:var(--s2)}
@media(min-width:860px){.clubs .wrap{grid-template-columns:1.3fr .7fr;gap:var(--s7)}.clubs .cta{justify-self:end}}
/* waitlist */
.join{text-align:center}
.join h2{margin-bottom:var(--s3)}
.join h2 .g{color:var(--gold)}
.join .lede{margin:0 auto var(--s4);max-width:46ch}
.join .slot,.join .small{margin-inline:auto}

/* ---------- MOTION ---------- */
@media(prefers-reduced-motion:no-preference){
  @keyframes in-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .hero .eyebrow,.hero h1,.hero p,.hero .btn{animation:in-up .6s cubic-bezier(.22,.7,.2,1) both}
  .hero h1{animation-delay:.06s}.hero p{animation-delay:.18s}.hero .btn{animation-delay:.26s}
}
@supports (animation-timeline:view()){
@media(prefers-reduced-motion:no-preference){
  /* 1. hero crown eases away as the page leaves the hero (only mover while the hero is on screen) */
  .hero .mark{animation:crown-away ease-out both;animation-timeline:scroll(root);animation-range:0 70vh}
  @keyframes crown-away{to{transform:translateY(40px) scale(.94);opacity:.4}}
  /* 2. reveals: 16px, opacity + transform only, done by the time 35% of the block is in view */
  .rv{animation:rise cubic-bezier(.22,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 35%}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  /* 3. brush stroke slides in a short way (transform + opacity; replaces round 1's clip-path wipe) */
  .rule::before{animation:rulex cubic-bezier(.22,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% entry 100%}
  @keyframes rulex{from{transform:scaleX(0)}to{transform:none}}
  /* 4. steps: a gold rule draws across the top, the numeral comes up to full (text never dims) */
  .steps li::before{animation:rule ease-out both;animation-timeline:view();animation-range:entry 30% cover 40%}
  @keyframes rule{to{transform:scaleX(1)}}
  .steps b{animation:numin ease-out both;animation-timeline:view();animation-range:entry 30% cover 40%}
  @keyframes numin{from{opacity:.3}to{opacity:1}}
  /* 6. the season line draws along its list */
  .season::before{animation:drawy ease-out both;animation-timeline:view();animation-range:entry 10% cover 60%}
  @keyframes drawy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @media(min-width:860px){.season::before{animation-name:drawx}@keyframes drawx{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
}}