/* ============================================================
   THE PROP FIRM AWARDS 2026 — propfirmcompanies.com
   Palette: Obsidian 60 / Ivory 30 / Warm Gray 7 / Gold 3
   ============================================================ */
:root{
  --obsidian:#0D0D0C;
  --ivory:#F4F0E8;
  --soft:#1A1917;
  --cherry:#A33A49;        /* accent lines, rules, active states  */
  --rose:#E2B3B6;          /* highlights, display accents         */
  --cherry-deep:#5E1F2B;   /* "dark cherry" — the signature tone  */
  --cherry-900:#2A0D13;
  --cherry-700:#4E1A25;
  --cherry-500:#7E2937;
  --gray:#8D8980;
  --ash:#7E7169;           /* hazards / danger — deliberately not cherry */

  --ink:#F4F0E8;
  --ink-dim:#8D8980;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1360px;
  --chapter-h:165vh;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--obsidian);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--cherry);color:var(--obsidian)}

/* ---------- type ---------- */
.label{
  font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cherry);
}
.label--gray{color:var(--gray)}
.display{
  font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em;
  margin:0;
}
.d1{font-size:clamp(42px,6.4vw,90px)}
.d2{font-size:clamp(34px,5.2vw,72px)}
.d3{font-size:clamp(26px,3.2vw,42px)}
.lede{font-size:clamp(15px,1.25vw,19px);line-height:1.65;color:#CFC9BC;font-weight:300}
.rule{height:1px;background:linear-gradient(90deg,var(--cherry),rgba(163,58,73,0));border:0;margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;cursor:pointer;
  padding:15px 28px;border-radius:2px;border:1px solid var(--cherry);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  background:transparent;color:var(--rose);
  transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease);
}
.btn:hover{background:var(--cherry);color:var(--obsidian)}
.btn--solid{background:var(--cherry);color:#0D0D0C;border-color:var(--cherry)}
.btn--solid:hover{background:var(--rose);border-color:var(--rose)}
.btn--ghost{border-color:rgba(163,58,73,.35);color:var(--ink)}
.btn--dark{border-color:rgba(26,25,23,.3);color:var(--soft)}
.btn--dark:hover{background:var(--soft);color:var(--ivory);border-color:var(--soft)}
.btn__dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--gutter);
  transition:background .6s var(--ease),border-color .6s var(--ease),padding .6s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(13,13,12,.82);backdrop-filter:blur(14px);border-bottom-color:rgba(163,58,73,.16);padding-top:13px;padding-bottom:13px}
.hdr.is-light{color:var(--soft)}
.hdr.is-light.is-stuck{background:rgba(244,240,232,.88);border-bottom-color:rgba(26,25,23,.12)}
.hdr.is-light .hdr__sub{color:#6B675E}
.hdr.is-light .nav a{color:#3A3833}
.hdr.is-light .hdr__mark circle,.hdr.is-light .hdr__mark path{stroke:var(--soft)}
.hdr.is-light .hdr__mark .mk-star{fill:var(--soft);stroke:none}
.hdr.is-light .btn--ghost{border-color:rgba(26,25,23,.28);color:var(--soft)}
.hdr.is-light .btn--ghost:hover{background:var(--soft);color:var(--ivory)}

.brand{display:flex;align-items:center;gap:13px;min-width:0}
.hdr__mark{width:34px;height:34px;flex:none}
.hdr__mark circle,.hdr__mark path{fill:none;stroke:var(--cherry);stroke-width:1}
.hdr__mark .mk-star{fill:var(--cherry);stroke:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:var(--serif);font-size:17px;letter-spacing:.14em;text-transform:uppercase}
.hdr__sub{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gray)}

.nav{display:flex;gap:34px;align-items:center}
.nav a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#CFC9BC;position:relative;padding:6px 0;transition:color .35s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--cherry);transition:width .45s var(--ease)}
.nav a:hover{color:var(--cherry)}
.nav a:hover::after{width:100%}
.hdr__cta{display:flex;align-items:center;gap:12px}
@media(max-width:1080px){.nav{display:none}.hdr__sub{display:none}}
@media(max-width:820px){.hdr__cta .btn--ghost{display:none}}
@media(max-width:620px){
  .hdr__cta .btn{padding:11px 15px;font-size:10px;letter-spacing:.12em}
  .brand__name{font-size:14px;letter-spacing:.1em;white-space:nowrap}
  .hdr__mark{width:28px;height:28px}
  .brand{gap:10px}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(100px,12.5vh,130px) 0 0;overflow:hidden;background:var(--obsidian);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg svg{width:100%;height:100%;display:block}
.hero__glow{
  position:absolute;left:50%;top:38%;width:min(1100px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(163,58,73,.17),rgba(163,58,73,.05) 42%,transparent 66%);
  z-index:0;pointer-events:none;
}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter) clamp(18px,2.8vh,36px);flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
.hero__top{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:baseline;margin-bottom:clamp(14px,2.4vh,30px)}
.hero h1{margin:0 0 16px;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--rose)}
.hero__row{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,72px);align-items:flex-end;justify-content:space-between}
.hero__lede{max-width:46ch}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__meta{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,46px);padding-top:20px;margin-top:clamp(18px,2.6vh,34px);border-top:1px solid rgba(163,58,73,.18)}
.hero__meta div{min-width:110px}
.hero__meta b{display:block;font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);font-weight:400;color:var(--rose);line-height:1.1}
.hero__meta span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.hero__meta{margin-bottom:0}
@media(max-height:780px){.hero__meta{display:none}}

/* ============================================================
   THE ARCADE — playable hero run
   ============================================================ */
.arcade{
  position:relative;z-index:2;width:100%;height:clamp(152px,26vh,282px);flex:none;
  border-top:1px solid rgba(163,58,73,.26);cursor:pointer;overflow:hidden;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,rgba(94,31,43,.22),rgba(13,13,12,0) 62%);
}
.arcade canvas{display:block;width:100%;height:100%}
.arcade__hud{
  position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;
  display:flex;gap:clamp(14px,2.6vw,40px);padding:12px var(--gutter);
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);
}
.ah{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.ah i{font-style:normal;opacity:.75}
.ah b{color:var(--rose);font-weight:400;font-size:11px;letter-spacing:.16em}
.ah em{font-style:normal;color:var(--cherry);letter-spacing:.16em}
.ah--end{margin-left:auto}
@media(max-width:900px){.ah em,.ah--end{display:none}}

.arcade__start{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(13,13,12,.62);text-align:center;padding:0 22px;transition:opacity .5s var(--ease);
}
.arcade__key{
  border:1px solid var(--cherry);padding:12px 22px;border-radius:2px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(163,58,73,.4)}50%{box-shadow:0 0 0 10px rgba(163,58,73,0)}}
.arcade__hint{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);max-width:42ch}
.arcade.is-live .arcade__start{opacity:0;pointer-events:none}

.arcade__skip{
  position:absolute;right:var(--gutter);bottom:12px;z-index:3;background:none;border:0;cursor:pointer;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#6B675E;
  border-bottom:1px solid rgba(163,58,73,.4);padding:3px 0;transition:color .35s
}
.arcade__skip:hover{color:var(--rose)}
.arcade.is-won .arcade__skip{display:none}

/* ---- award reveal ---- */
.award{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,3.4vw,54px);padding:0 var(--gutter);
  background:radial-gradient(70% 130% at 50% 50%,rgba(42,13,19,.9),rgba(13,13,12,.97));
  opacity:0;pointer-events:none;transition:opacity .7s var(--ease);
}
.arcade.is-won .award{opacity:1;pointer-events:auto}
.plate{
  position:relative;flex:none;height:min(84%,236px);width:auto;aspect-ratio:.73;border-radius:7px;overflow:hidden;
  background:linear-gradient(133deg,#3A121B 0%,#7E2937 15%,#C4757F 29%,#8E3543 43%,#4E1A25 59%,#D79AA2 78%,#4A1721 100%);
  box-shadow:0 26px 64px rgba(0,0,0,.7),inset 0 0 0 1px rgba(226,179,182,.55);
  container-type:size;
  transform:translateY(34px) scale(.92) rotate(-2.5deg);opacity:0;
  transition:transform 1s var(--ease) .12s,opacity .8s var(--ease) .12s;
}
.arcade.is-won .plate{transform:none;opacity:1}
.plate__shine{
  position:absolute;top:-25%;left:-45%;width:38%;height:165%;transform:rotate(19deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,232,232,.62),transparent);
}
.arcade.is-won .plate__shine{animation:sweep 3.8s var(--ease) 1.1s infinite}
@keyframes sweep{0%{left:-45%}46%,100%{left:118%}}
.plate__in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.6cqh;text-align:center;padding:5cqh 9cqw;overflow:hidden}
.plate__seal{width:max(26px,20cqh);height:auto;margin-bottom:0}
.plate__in{border:1px solid rgba(240,216,218,.3);border-radius:4px;margin:3.4cqh;width:auto;height:auto}
@container (max-height:156px){.plate__seal{display:none}}
.plate__seal circle,.plate__seal path{fill:none;stroke:#F0D8DA;stroke-width:1.2;opacity:.82}
.plate__seal path{fill:#F0D8DA;stroke:none}
.plate__lbl{font-size:max(6.2px,3.4cqh);letter-spacing:.26em;text-transform:uppercase;color:#F0D8DA;opacity:.88;
  text-shadow:0 1px 2px rgba(30,7,12,.85)}
.plate__ttl{font-family:var(--serif);font-weight:500;font-size:max(14px,10.6cqh);line-height:1.12;color:#FFF3F3;
  text-shadow:0 1px 3px rgba(30,7,12,.92),0 0 18px rgba(30,7,12,.55)}
.plate__yr{font-family:var(--serif);font-size:max(11px,6.8cqh);letter-spacing:.18em;color:#F0D8DA;opacity:.92;
  text-shadow:0 1px 2px rgba(30,7,12,.9)}
.award__copy{max-width:40ch}
.award__copy h3{margin:12px 0 10px}
.award__copy p{margin:0;font-size:14px;line-height:1.65;color:#C8C2B4}
.award__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media(max-width:820px){
  .award{gap:18px;padding:0 20px}
  .award__copy h3{font-size:22px}
  .award__copy p{display:none}
  .plate{height:min(76%,150px)}
}
@media(max-width:560px){
  .arcade__hint{display:none}
  .award__cta .btn{padding:11px 15px;font-size:10px;letter-spacing:.12em}
}

/* ============================================================
   THE RUN — scroll story
   ============================================================ */
.story{position:relative;background:var(--obsidian);z-index:1}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}
.stage__media{position:absolute;inset:0;transform:translate3d(var(--sx,0%),0,0) scale(1.04);will-change:transform}
.scene{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.scene svg{position:absolute;inset:0;width:100%;height:100%}
.scene .l1{transform:translate3d(0,calc(var(--d,0) * 14px),0)}
.scene .l2{transform:translate3d(0,calc(var(--d,0) * -34px),0)}
.scene .l3{transform:translate3d(0,calc(var(--d,0) * -76px),0)}
.scene .lf{transform:translate3d(0,calc(var(--d,0) * -130px),0) }
.ln{fill:none;stroke:var(--cherry);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ln-2{stroke-width:1.9}
.dim{opacity:.34}
.dim2{opacity:.17}
.fillg{fill:var(--cherry);stroke:none}
.fillc{fill:var(--rose);stroke:none}
.fillb{fill:var(--cherry-deep);stroke:none}
.red{stroke:#7E7169}
.stage__vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(13,13,12,.55) 72%,rgba(13,13,12,.92) 100%)}
.stage__grain{position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

/* HUD */
.hud{position:absolute;left:var(--gutter);top:104px;z-index:5;display:flex;gap:clamp(18px,2.4vw,40px);align-items:flex-start;pointer-events:none}
.hud__cell span{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gray);margin-bottom:5px}
.hud__cell b{font-family:var(--serif);font-size:clamp(19px,2vw,27px);font-weight:400;color:var(--rose);letter-spacing:.02em;line-height:1}
.hud__cell b i{font-style:normal;font-size:.55em;color:var(--gray);letter-spacing:.1em}
@media(max-width:760px){.hud{top:86px;gap:16px}.hud__cell:nth-child(3){display:none}}

/* progress bar */
.prog{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(163,58,73,.13);z-index:6}
.prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4E1A25,var(--cherry),var(--rose));transform:scaleX(0);transform-origin:0 50%}

/* route rail */
.route{position:absolute;right:calc(var(--gutter) - 6px);top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.route__btn{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:7px 6px;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);transition:color .4s var(--ease)}
.route__btn em{font-style:normal;opacity:0;transform:translateX(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);white-space:nowrap}
.route__btn i{width:22px;height:1px;background:currentColor;opacity:.45;transition:width .4s var(--ease),opacity .4s}
.route__btn:hover{color:var(--rose)}
.route__btn:hover em{opacity:1;transform:none}
.route__btn.is-on{color:var(--cherry)}
.route__btn.is-on em{opacity:1;transform:none}
.route__btn.is-on i{width:44px;opacity:1}
@media(max-width:900px){.route{display:none}}

/* chapters */
.chapters{position:relative;z-index:4;margin-top:-100svh;pointer-events:none}
.chapter{min-height:var(--chapter-h);position:relative}
.chapter__pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:0 var(--gutter)}
.copy{position:relative;max-width:min(560px,44vw);opacity:0;will-change:opacity,transform}
.copy::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-22vh -30vw -22vh -34vw;
  background:radial-gradient(58% 52% at 34% 50%,rgba(13,13,12,.94),rgba(13,13,12,.78) 46%,rgba(13,13,12,0) 76%);
}
.chapter--right .chapter__pin{justify-content:flex-end}
.chapter--right .copy{margin-right:clamp(40px,8vw,150px)}
.chapter--right .copy::before{inset:-22vh -34vw -22vh -30vw;
  background:radial-gradient(58% 52% at 66% 50%,rgba(13,13,12,.94),rgba(13,13,12,.78) 46%,rgba(13,13,12,0) 76%)}
.copy__lvl{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.copy__lvl b{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--cherry);font-weight:400}
.copy__lvl i{display:block;width:clamp(30px,5vw,64px);height:1px;background:rgba(163,58,73,.5)}
.copy h2{margin:0 0 18px}
.copy p{margin:0;color:#C8C2B4;font-size:clamp(14.5px,1.15vw,17px);line-height:1.7;max-width:42ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(163,58,73,.26);border-radius:2px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#BDB6A6;background:rgba(163,58,73,.05)}
.chip--bad{border-color:rgba(140,128,120,.5);color:#A79C94;background:rgba(28,26,24,.55)}
.chip--good{border-color:rgba(163,58,73,.6);color:var(--rose);background:rgba(163,58,73,.1)}
.chip i{width:4px;height:4px;border-radius:50%;background:currentColor}
@media(max-width:900px){
  :root{--chapter-h:140vh}
  .stage__media{transform:scale(1.02)}
  /* narrow screens: show the whole scene in the top half, copy sits under it */
  .scene svg{top:7%;height:52%}
  .copy::before,.chapter--right .copy::before{inset:-14vh -40vw -34vh -40vw;
    background:linear-gradient(180deg,rgba(13,13,12,0),rgba(13,13,12,.72) 38%,rgba(13,13,12,.94) 66%)}
  .chapter__pin{align-items:flex-end;padding-bottom:clamp(56px,12vh,110px)}
  .chapter--right .chapter__pin{justify-content:flex-start}
  .chapter--right .copy{margin-right:0}
  .copy{max-width:none}
  .copy p{max-width:none}
}

/* ============================================================
   TROPHY REVEAL
   ============================================================ */
.reveal{position:relative;background:var(--obsidian);padding:clamp(90px,13vh,170px) var(--gutter) clamp(80px,12vh,150px);overflow:hidden;text-align:center}
.reveal::before{content:"";position:absolute;left:50%;top:-10%;width:min(900px,110vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(163,58,73,.2),transparent 62%);pointer-events:none}
.reveal__in{position:relative;max-width:900px;margin:0 auto}
.seal{width:clamp(150px,17vw,208px);height:auto;margin:0 auto 36px;display:block}
.seal circle,.seal path,.seal line{fill:none;stroke:var(--cherry);stroke-width:1}
.seal .sl-fill{fill:var(--cherry);stroke:none}
.seal text{fill:var(--rose);font-family:var(--sans);font-size:8.4px;letter-spacing:.34em}
.seal .sl-yr{font-family:var(--serif);font-size:19px;letter-spacing:.12em;fill:var(--rose)}
.reveal h2{margin:0 0 20px}
.reveal p{max-width:56ch;margin:0 auto;color:#C8C2B4}
.reveal__tags{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(14px,3vw,38px);margin-top:38px;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gray)}
.reveal__tags span{position:relative}
.reveal__tags span+span::before{content:"·";position:absolute;left:clamp(-19px,-1.5vw,-10px);color:var(--cherry)}

/* ============================================================
   LIGHT SECTIONS (ivory 30%)
   ============================================================ */
.light{background:var(--ivory);color:var(--soft)}
.light .label{color:#8E2C3C}
.light .lede{color:#4A4740}
.sec{padding:clamp(76px,11vh,140px) var(--gutter)}
.sec__in{max-width:var(--maxw);margin:0 auto}
.sec__head{display:flex;flex-wrap:wrap;gap:26px 60px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(36px,6vh,68px)}
.sec__head h2{margin:14px 0 0;max-width:18ch}
.sec__head p{margin:0;max-width:44ch}

/* tabs */
.tabs{display:inline-flex;padding:4px;border:1px solid rgba(26,25,23,.16);border-radius:2px;background:rgba(255,255,255,.42)}
.tab{border:0;background:none;cursor:pointer;padding:12px 22px;border-radius:1px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#6B675E;transition:background .4s var(--ease),color .4s var(--ease)}
.tab.is-on{background:var(--soft);color:var(--ivory)}

/* category grid */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;background:rgba(26,25,23,.14);border:1px solid rgba(26,25,23,.14)}
.cat{background:var(--ivory);padding:30px 26px 28px;position:relative;transition:background .5s var(--ease),transform .5s var(--ease)}
.cat:hover{background:#EFEADF}
.cat__n{font-family:var(--serif);font-size:13px;letter-spacing:.14em;color:#8E2C3C;display:block;margin-bottom:16px}
.cat h3{margin:0 0 10px;font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.2;letter-spacing:-.01em}
.cat p{margin:0;font-size:13.5px;line-height:1.6;color:#605C53}
.cat__tag{position:absolute;right:22px;top:28px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#A09A8D}
.cat--vote .cat__tag{color:#8E2C3C}
.cats__wrap[hidden]{display:none}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(24px,3vw,44px);counter-reset:s}
.step{position:relative;padding-top:26px;border-top:1px solid rgba(26,25,23,.2)}
.step__n{font-family:var(--serif);font-size:44px;line-height:1;color:#8E2C3C;display:block;margin-bottom:16px}
.step h3{margin:0 0 10px;font-family:var(--serif);font-weight:500;font-size:22px}
.step p{margin:0;font-size:14px;color:#605C53;line-height:1.65}

/* dates */
.dates{border-top:1px solid rgba(26,25,23,.18)}
.date{display:grid;grid-template-columns:180px 1fr auto;gap:20px 34px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid rgba(26,25,23,.13);transition:padding-left .5s var(--ease)}
.date:hover{padding-left:12px}
.date b{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8E2C3C}
.date h3{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2vw,27px)}
.date p{margin:6px 0 0;font-size:13.5px;color:#605C53;max-width:52ch}
.date__st{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#A09A8D;white-space:nowrap}
.date--live .date__st{color:#0D0D0C;background:var(--cherry);padding:5px 10px;border-radius:1px}
@media(max-width:780px){.date{grid-template-columns:1fr;gap:6px}.date__st{justify-self:start}}

/* integrity — dark band */
.integrity{background:var(--soft);color:var(--ivory);position:relative;overflow:hidden}
.integrity::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--cherry),transparent)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:rgba(163,58,73,.18);margin-top:clamp(30px,5vh,54px)}
.pillar{background:var(--soft);padding:32px 28px}
.pillar svg{width:30px;height:30px;margin-bottom:20px}
.pillar svg *{fill:none;stroke:var(--cherry);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{margin:0 0 10px;font-family:var(--serif);font-weight:500;font-size:21px;color:var(--rose)}
.pillar p{margin:0;font-size:13.5px;color:#A8A296;line-height:1.65}

/* ============================================================
   NOMINATE
   ============================================================ */
.nominate{background:var(--obsidian);position:relative;overflow:hidden}
.nominate::before{content:"";position:absolute;left:-10%;bottom:-30%;width:60vw;aspect-ratio:1;
  background:radial-gradient(circle,rgba(94,31,43,.45),transparent 64%);pointer-events:none}
.nom__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,88px);position:relative}
@media(max-width:940px){.nom__grid{grid-template-columns:1fr}}
.nom__aside h2{margin:14px 0 20px}
.nom__aside p{color:#C8C2B4;max-width:40ch}
.nom__note{margin-top:32px;padding-top:24px;border-top:1px solid rgba(163,58,73,.2);font-size:13px;color:var(--gray);max-width:38ch}
.nom__note a{color:var(--rose);border-bottom:1px solid rgba(226,179,182,.42)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:9px}
.field--full{grid-column:1/-1}
.field label{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray)}
.field input,.field select,.field textarea{
  background:rgba(244,240,232,.03);border:0;border-bottom:1px solid rgba(163,58,73,.3);
  padding:13px 2px;color:var(--ivory);font-size:15px;font-weight:300;outline:none;
  transition:border-color .4s var(--ease),background .4s var(--ease);border-radius:0;
}
.field textarea{min-height:104px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23A33A49' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center}
.field select option{background:var(--soft);color:var(--ivory)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--cherry);background:rgba(163,58,73,.06)}
.field input::placeholder,.field textarea::placeholder{color:#5E5A52}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-bottom-color:#8E3A44}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-top:8px}
.form__foot small{font-size:11.5px;color:var(--gray);max-width:34ch;line-height:1.55}
.form__ok{grid-column:1/-1;display:none;padding:28px;border:1px solid rgba(163,58,73,.4);background:rgba(163,58,73,.07);text-align:center}
.form__ok h3{margin:0 0 8px;font-family:var(--serif);font-weight:400;font-size:26px;color:var(--rose)}
.form__ok p{margin:0;color:#C8C2B4;font-size:14px}
.form.is-sent .field,.form.is-sent .form__foot{display:none}
.form.is-sent .form__ok{display:block}
@media(max-width:620px){.form{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--obsidian);border-top:1px solid rgba(163,58,73,.16);padding:clamp(50px,7vh,80px) var(--gutter) 34px}
.ftr__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:860px){.ftr__in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr__in{grid-template-columns:1fr}}
.ftr h4{margin:0 0 18px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--cherry);font-weight:400}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr li a{font-size:13.5px;color:#A8A296;transition:color .35s}
.ftr li a:hover{color:var(--rose)}
.ftr__brand p{margin:18px 0 0;font-size:13px;color:var(--gray);max-width:32ch;line-height:1.7}
.ftr__bottom{max-width:var(--maxw);margin:clamp(40px,6vh,64px) auto 0;padding-top:24px;border-top:1px solid rgba(163,58,73,.14);
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;font-size:11px;letter-spacing:.08em;color:#6B675E}

/* reveal-on-scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .copy{opacity:1!important}
}

/* ── mobile fixes (added 2026-09-14) ─────────────────────── */
/* The chapter scrim used inset:-14vh -40vw, so on a 390px phone it stuck
   ~156px past each edge and forced a 526px layout viewport. Bleed it to the
   page edges instead — same look, no overflow. */
@media(max-width:900px){
  .copy::before,.chapter--right .copy::before{
    inset:-14vh calc(var(--gutter) * -1) -34vh calc(var(--gutter) * -1);
  }
  .chapter__pin{overflow:hidden}
}
@media(max-width:620px){
  /* primary CTA was 10px/36px — below a comfortable touch target */
  .hdr__cta .btn{padding:13px 16px;font-size:10.5px;min-height:44px}
  .hero__cta .btn,.nom .btn,.btn--solid{min-height:44px}
}
@media(max-width:1080px){
  /* section nav was display:none with no replacement: no in-page navigation
     at all on phones. Restore it as a scrollable strip under the brand row. */
  .hdr{flex-wrap:wrap;row-gap:0}
  .nav{display:flex;order:3;flex:1 0 100%;gap:0;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:10px 14px 9px;flex:none}
  .nav a:first-child{padding-inline-start:0}
  .nav a::after{left:14px;right:14px}
  .nav a:first-child::after{left:0}
  .hud{top:112px}
}

@media(max-width:900px){
  /* "Skip to the award" is the escape hatch out of a very long scroll
     sequence — it was a 21px-tall, 9px-text control. */
  .arcade__skip{min-height:42px;padding-inline:14px;font-size:10px}
}

/* ──────────────────────────────────────────────────────────────────────
   Blog module (Admin Hub) theme. blog-hub.css ships neutral and is driven
   by --blog-* variables; these map them onto this site's tokens so the
   blog follows the palette without the kit file being edited.
   Accent is --rose, not --cherry: cherry is 3.0:1 on the obsidian ground
   and fails WCAG AA, rose is 10.5:1. Display face is the Cormorant serif,
   matching the rest of the site.
   "body .blog" beats the kit's own ".blog" block, which loads after this.
   ────────────────────────────────────────────────────────────────────── */
body .blog{
  --blog-text:var(--ivory);
  --blog-muted:var(--gray);
  --blog-bg:transparent;
  --blog-surface:var(--soft);
  --blog-border:var(--cherry-700);
  --blog-accent:var(--rose);
  --blog-accent-contrast:var(--obsidian);
  --blog-radius:2px;
  --blog-width:var(--maxw);
  --blog-gutter:var(--gutter);
  font-family:var(--sans);
}
body .blog .blog-hero__title,
body .blog .post-header h1,
body .blog .post-card__title,
body .blog .post-body h2,
body .blog .post-body h3{font-family:var(--serif);font-weight:400}
/* .hdr is position:fixed and the home page hides that behind a full-height
   hero. Blog pages start at the top of the document, so they need to clear
   the masthead themselves. 20px padding top and bottom plus the brand block
   measures about 76px. */
body .blog{padding-top:80px}