/* ============================================================
   California State RP — design tokens
   Art direction: "Golden State at blue hour" — midnight navy
   surfaces, California gold accent, warm amber highlight.
   ============================================================ */
:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.5rem,1rem + 4vw,5rem);

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.16,1,.3,1);

  --content-narrow:640px;--content-default:1000px;--content-wide:1240px;

  --font-display:'Clash Display','Satoshi',sans-serif;
  --font-body:'Satoshi','Inter',sans-serif;
}

/* DARK (primary art direction) */
:root,[data-theme='dark']{
  --color-bg:#060c1c;
  --color-surface:#0a1228;
  --color-surface-2:#0d1b3a;
  --color-surface-offset:#142c52;
  --color-divider:rgba(247,197,72,.14);
  --color-border:rgba(190,208,240,.16);
  --color-text:#e9eefb;
  --color-text-muted:#9bacc9;
  --color-text-faint:#65769a;
  --color-text-inverse:#060c1c;
  --color-primary:#f7c548;
  --color-primary-hover:#ffd672;
  --color-primary-soft:rgba(247,197,72,.12);
  --color-amber:#e8863d;
  --color-success:#4fb477;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --grid-line:rgba(190,208,240,.06);
  --hero-veil:linear-gradient(180deg,rgba(6,12,28,.55) 0%,rgba(6,12,28,.7) 45%,rgba(6,12,28,.97) 100%);
}

/* LIGHT */
[data-theme='light']{
  --color-bg:#f6f4ef;
  --color-surface:#fffdf8;
  --color-surface-2:#f1ece1;
  --color-surface-offset:#e7e1d3;
  --color-divider:rgba(13,27,58,.12);
  --color-border:rgba(13,27,58,.16);
  --color-text:#101a30;
  --color-text-muted:#525d75;
  --color-text-faint:#8b93a5;
  --color-text-inverse:#fffdf8;
  --color-primary:#8a5c00;
  --color-primary-hover:#6e4900;
  --color-primary-soft:rgba(138,92,0,.1);
  --color-amber:#a8531a;
  --color-success:#276d47;
  --shadow-sm:0 1px 2px rgba(16,26,48,.07);
  --shadow-md:0 8px 24px rgba(16,26,48,.09);
  --shadow-lg:0 24px 60px rgba(16,26,48,.14);
  --grid-line:rgba(16,26,48,.05);
  --hero-veil:linear-gradient(180deg,rgba(6,12,28,.5) 0%,rgba(6,12,28,.55) 45%,rgba(246,244,239,.98) 100%);
}

/* ============================ layout ============================ */
.wrap{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(var(--space-5),4vw,var(--space-12))}
.wrap--narrow{max-width:var(--content-default)}
section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.skip{position:absolute;left:var(--space-4);top:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-md);transform:translateY(-200%);z-index:100}
.skip:focus{transform:translateY(0)}

/* ============================ type ============================ */
.eyebrow{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary);font-weight:600;display:flex;align-items:center;gap:var(--space-3)}
.eyebrow::before{content:'';width:var(--space-8);height:1px;background:var(--color-primary);opacity:.6}
.s-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;letter-spacing:-.02em;margin-block:var(--space-4) var(--space-3)}
.lede{color:var(--color-text-muted);max-width:60ch}
h3{font-size:var(--text-lg);font-weight:600}

/* ============================ header ============================ */
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--transition-interactive),background var(--transition-interactive)}
.header--scrolled{border-bottom-color:var(--color-divider)}
.header__in{display:flex;align-items:center;gap:var(--space-6);min-height:68px}
.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text);text-decoration:none;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.1}
.brand svg{color:var(--color-primary);flex:none}
.brand small{display:block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;color:var(--color-text-faint);letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;gap:var(--space-5);margin-left:auto}
.nav a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--color-primary)}
.header__tools{display:flex;align-items:center;gap:var(--space-3)}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border)}
.icon-btn:hover{color:var(--color-primary);border-color:var(--color-primary)}
.nav-toggle{display:none}

/* ============================ buttons ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;padding:.75rem var(--space-5);border-radius:var(--radius-full);text-decoration:none;min-height:44px;border:1px solid transparent}
.btn--primary{background:var(--color-primary);color:var(--color-text-inverse)}
.btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
.btn--ghost{border-color:var(--color-border);color:var(--color-text)}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* ============================ hero ============================ */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;overflow:hidden;padding-block:var(--space-24) clamp(var(--space-12),6vw,var(--space-20))}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero__bg::after{content:'';position:absolute;inset:0;background:var(--hero-veil)}
.hero__in{position:relative;z-index:1;width:100%}
.hero h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;letter-spacing:-.03em;color:#fff;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--color-primary)}
[data-theme='light'] .hero h1{color:#fff}
.hero__sub{margin-top:var(--space-5);color:rgba(233,238,251,.82);font-size:var(--text-lg);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero .btn--ghost{border-color:rgba(255,255,255,.34);color:#fff}
.hero .btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.hero__badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);margin-bottom:var(--space-6)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 0 rgba(79,180,119,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(79,180,119,0)}100%{box-shadow:0 0 0 0 rgba(79,180,119,0)}}

/* code chip */
.codes{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.code{display:flex;align-items:center;gap:var(--space-3);background:rgba(6,12,28,.55);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);backdrop-filter:blur(8px)}
.code span{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:rgba(233,238,251,.6);display:block}
.code b{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.06em;color:#fff;line-height:1.2}
.copy{font-size:var(--text-xs);font-weight:600;color:var(--color-primary);border:1px solid rgba(247,197,72,.4);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);min-height:32px}
.copy:hover{background:rgba(247,197,72,.16)}

/* ============================ stats ============================ */
.stats{border-block:1px solid var(--color-divider);background:var(--color-surface)}
.stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-8);padding-block:var(--space-10)}
.stat b{display:block;font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--color-primary);font-variant-numeric:tabular-nums}
.stat span{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-faint)}

/* ============================ cards / grids ============================ */
.grid{display:grid;gap:var(--space-5)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6)}
.card h3{margin-bottom:var(--space-2)}
.card p{color:var(--color-text-muted);font-size:var(--text-sm)}
.card--step{position:relative;overflow:hidden}
.card--step>b.num{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-primary);opacity:.22;position:absolute;top:var(--space-2);right:var(--space-5);line-height:1}
.ico{width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:var(--space-4)}

/* split section */
.split{display:grid;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split--flip>figure{order:-1}}
.split figure{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--color-border);box-shadow:var(--shadow-lg)}
.checks{list-style:none;display:grid;gap:var(--space-3);margin-top:var(--space-6)}
.checks li{display:flex;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted)}
.checks svg{flex:none;color:var(--color-primary);margin-top:.2rem}

/* ============================ teams ============================ */
.team{display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);border-top:3px solid var(--tc,var(--color-primary))}
.team__tag{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--tc,var(--color-primary));font-weight:600}
.team p{font-size:var(--text-sm);color:var(--color-text-muted)}
.team__range{font-size:var(--text-xs);color:var(--color-text-faint);font-variant-numeric:tabular-nums;margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--color-divider)}

/* ============================ roster ============================ */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-block:var(--space-8) var(--space-6)}
.chip{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted);min-height:36px}
.chip:hover{border-color:var(--color-primary);color:var(--color-primary)}
.chip[aria-pressed='true']{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
.roster{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.member{display:flex;align-items:center;gap:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.avatar{width:46px;height:46px;flex:none;border-radius:var(--radius-full);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--color-text-inverse);background:linear-gradient(135deg,var(--color-primary),var(--color-amber))}
.member b{display:block;font-size:var(--text-sm);font-weight:600;line-height:1.3}
.member span{display:block;font-size:var(--text-xs);color:var(--color-text-muted)}
.member i{font-style:normal;font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:.08em;text-transform:uppercase}

/* ============================ ladder ============================ */
.ladder{border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface);margin-top:var(--space-8)}
.ladder__group+.ladder__group{border-top:1px solid var(--color-divider)}
.ladder__head{width:100%;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);text-align:left}
.ladder__head:hover{background:var(--color-surface-2)}
.ladder__head b{font-family:var(--font-display);font-weight:600;font-size:var(--text-base)}
.ladder__head .dot{width:10px;height:10px;border-radius:50%;background:var(--tc);flex:none}
.ladder__head .cnt{margin-left:auto;font-size:var(--text-xs);color:var(--color-text-faint);font-variant-numeric:tabular-nums}
.ladder__head .caret{transition:transform var(--transition-interactive);color:var(--color-text-faint)}
.ladder__head[aria-expanded='true'] .caret{transform:rotate(180deg)}
.ladder__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease)}
.ladder__body>div{overflow:hidden}
.ladder__group[data-open='true'] .ladder__body{grid-template-rows:1fr}
.rank{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-6);font-size:var(--text-sm);border-top:1px solid var(--color-divider)}
.rank em{font-style:normal;width:2.2rem;flex:none;font-variant-numeric:tabular-nums;color:var(--color-primary);font-weight:600}
.rank span{margin-left:auto;font-size:var(--text-xs);color:var(--color-text-faint)}

/* ============================ band ============================ */
.band{position:relative;overflow:hidden;border-radius:var(--radius-xl);isolation:isolate}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(6,12,28,.92),rgba(6,12,28,.55))}
.band__in{padding:clamp(var(--space-10),6vw,var(--space-24)) clamp(var(--space-6),5vw,var(--space-16));max-width:60ch}
.band h2{font-family:var(--font-display);font-size:var(--text-xl);color:#fff;margin-bottom:var(--space-4)}
.band p{color:rgba(233,238,251,.8);font-size:var(--text-sm)}

/* ============================ faq ============================ */
.faq{margin-top:var(--space-8);border-top:1px solid var(--color-divider)}
.faq details{border-bottom:1px solid var(--color-divider)}
.faq summary{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) 0;cursor:pointer;font-weight:600;font-size:var(--text-base);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;color:var(--color-primary);font-size:var(--text-lg);line-height:1}
.faq details[open] summary::after{content:'−'}
.faq p{padding-bottom:var(--space-5);color:var(--color-text-muted);font-size:var(--text-sm)}

/* ============================ rules ============================ */
.rules{counter-reset:r;display:grid;gap:var(--space-4);margin-top:var(--space-8);list-style:none;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rules li{counter-increment:r;position:relative;padding-left:var(--space-12);font-size:var(--text-sm);color:var(--color-text-muted)}
.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--color-primary);border:1px solid var(--color-divider);border-radius:var(--radius-full);width:34px;height:34px;display:grid;place-items:center}
.rules b{display:block;color:var(--color-text);font-size:var(--text-base)}

/* ============================ footer ============================ */
.footer{border-top:1px solid var(--color-divider);background:var(--color-surface);padding-block:var(--space-16) var(--space-8)}
.footer__grid{display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.footer h4{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-faint);margin-bottom:var(--space-4)}
.footer ul{list-style:none;display:grid;gap:var(--space-2)}
.footer a{color:var(--color-text-muted);text-decoration:none;font-size:var(--text-sm)}
.footer a:hover{color:var(--color-primary)}
.footer__base{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-divider);display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-faint)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* mobile nav */
@media(max-width:860px){
  .nav{position:fixed;inset:68px 0 auto;flex-direction:column;gap:0;background:var(--color-surface);border-bottom:1px solid var(--color-divider);padding:var(--space-2) var(--space-6) var(--space-6);display:none}
  .nav[data-open='true']{display:flex}
  .nav a{padding:var(--space-4) 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-base)}
  .nav-toggle{display:grid}
  .header__tools{margin-left:auto}
  .hero__cta .btn{flex:1 1 100%}
}

/* ============================ punishment table ============================ */
.pt-h{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-divider);font-family:var(--font-display);font-size:var(--text-base)}
.pt-scroll{overflow-x:auto}
.pt{width:100%;min-width:760px;font-size:var(--text-sm);border-collapse:collapse}
.pt th{text-align:left;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-divider);white-space:nowrap}
.pt td{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-divider);vertical-align:top;color:var(--color-text-muted)}
.pt tr:last-child td{border-bottom:none}
.pt tbody tr:hover{background:var(--color-surface-2)}
.pt td:first-child{min-width:260px}
.pt td b{color:var(--color-text);display:inline}
.pt td p{margin-top:var(--space-1);font-size:var(--text-xs);color:var(--color-text-faint);max-width:38ch}
.pt-code{display:inline-block;margin-left:var(--space-2);font-size:var(--text-xs);letter-spacing:.08em;color:var(--color-primary);background:var(--color-primary-soft);border-radius:var(--radius-sm);padding:0 var(--space-2);vertical-align:1px}
.pt-sev{display:inline-block;font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;color:var(--sc);border:1px solid color-mix(in oklab,var(--sc) 45%,transparent);background:color-mix(in oklab,var(--sc) 12%,transparent);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);white-space:nowrap}
.pt .pt-act{white-space:nowrap}
.pt code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-xs);color:var(--color-primary);background:var(--color-primary-soft);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);white-space:nowrap}

/* ============================ trainer modules ============================ */
.mods{display:grid;gap:var(--space-4);margin-top:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.mod{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.mod header{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
.mod__n{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--color-primary);flex:1 1 100%}
.mod header h3{font-size:var(--text-lg);flex:1 1 auto}
.mod__t{font-size:var(--text-xs);color:var(--color-text-faint);border:1px solid var(--color-divider);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);white-space:nowrap}
.mod ul{list-style:none;display:grid;gap:var(--space-3)}
.mod ul li{position:relative;padding-left:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}
.mod ul li::before{content:'';position:absolute;left:var(--space-2);top:.6em;width:6px;height:6px;border-radius:50%;background:var(--color-primary);opacity:.65}
.mod__sign{margin-top:auto;font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-primary-soft);border-left:2px solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-3) var(--space-4)}
.mod__sign b{color:var(--color-text)}

/* header responsive tweaks */
.nav__panel{display:none}
.j-short{display:none}
@media(max-width:860px){
  .btn--panel{display:none}
  .nav__panel{display:block}
  .j-long{display:none}
  .j-short{display:inline}
  .header__tools{gap:var(--space-2)}
}

.grid--teams{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
@media(min-width:1150px){.grid--teams{grid-template-columns:repeat(5,1fr)}}

.swipe-hint{display:none}
@media(max-width:820px){.swipe-hint{display:block;font-size:var(--text-xs);color:var(--color-text-faint);margin-bottom:var(--space-4)}}