/* ══════════════════════════════════════════════════════════════════════
   LIBRA RP
   Light ground, committed blue. One family: Archivo variable (wdth 62–125).
   Blue is not an accent sitting on grey — it carries whole surfaces.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ground: cool off-white, tinted toward the brand hue, never warm ── */
  --paper:   oklch(0.963 0.009 262);
  --paper-2: oklch(0.982 0.006 262);
  --card:    oklch(0.998 0.002 262);

  /* ── ink ── */
  --ink:   oklch(0.180 0.038 265);
  --ink-2: oklch(0.430 0.032 265);
  --ink-3: oklch(0.560 0.028 265);

  /* ── the committed colour ── */
  --blue:      oklch(0.575 0.225 264);
  --blue-deep: oklch(0.455 0.195 266);
  --blue-dark: oklch(0.255 0.105 266);
  --blue-soft: oklch(0.925 0.035 262);
  --blue-hi:   oklch(0.760 0.145 258);

  /* ── signals ── */
  --gold:    oklch(0.855 0.155 92);   /* pill background, dark text on it */
  --gold-hi: oklch(0.925 0.130 98);   /* inline on blue: clears 3:1 for display text */
  --green: oklch(0.845 0.160 150);
  --live:  oklch(0.680 0.180 150);
  --heat:  oklch(0.620 0.215 30);

  --line:   oklch(0.180 0.038 265 / .13);
  --line-2: oklch(0.180 0.038 265 / .22);
  --on-blue: oklch(1 0 0);

  --shadow:   0 1px 2px oklch(0.18 0.038 265 / .06), 0 8px 24px -12px oklch(0.18 0.038 265 / .18);
  --shadow-2: 0 2px 4px oklch(0.18 0.038 265 / .07), 0 24px 48px -20px oklch(0.18 0.038 265 / .26);
  --shadow-blue: 0 10px 30px -10px oklch(0.575 0.225 264 / .55);

  /* ── scale, ratio ≈1.28 ── */
  --t-xs: 0.8125rem;
  --t-s:  0.9375rem;
  --t-b:  1.0625rem;
  --t-m:  clamp(1.25rem, 0.95rem + 0.9vw, 1.6rem);
  --t-l:  clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  --t-xl: clamp(2.3rem, 1.4rem + 3.4vw, 3.9rem);
  --t-2xl:clamp(3rem, 1.3rem + 6.2vw, 6rem);

  --gut:  clamp(1.25rem, 4vw, 2.5rem);
  --band: clamp(4.5rem, 9vw, 9rem);
  --shell: 78rem;
  --r:    1.125rem;

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-nav: 30;
  --z-skip: 40;

  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --out-q: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
  -webkit-text-size-adjust:100%;
  background:var(--paper);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 96;
  font-size:var(--t-b);
  line-height:1.66;
  font-synthesis-weight:none;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.locked{ overflow:hidden }

img{ display:block; max-width:100%; height:auto }
h1,h2,h3,h4{ margin:0; color:var(--ink); text-wrap:balance }
p{ margin:0; text-wrap:pretty }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
mark{ background:none; color:inherit }
::selection{ background:var(--blue); color:var(--on-blue) }

:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.shell{ width:min(100% - (var(--gut) * 2), var(--shell)); margin-inline:auto }

.skip{
  position:absolute; left:var(--gut); top:-5rem; z-index:var(--z-skip);
  padding:0.875rem 1.5rem; background:var(--blue); color:var(--on-blue);
  font-weight:700; border-radius:0.5rem; transition:top .2s var(--out);
}
.skip:focus{ top:1rem }

/* ── display type: width does the shouting ── */
.h-big,.hero__h,.under__h,.starter__h,.close__h{
  font-variation-settings:"wdth" 122;
  font-weight:800;
  line-height:0.93;
  letter-spacing:-0.028em;
  text-transform:uppercase;
}
.h-big{ font-size:var(--t-xl); margin-bottom:1.25rem }
.h-sub{ font-size:var(--t-m); color:var(--ink-2); max-width:46ch; line-height:1.5 }

/* ══════════════════════════  MASTHEAD  ══════════════════════════ */
.mast{
  position:fixed; inset:0 0 auto; z-index:var(--z-nav);
  background:var(--card);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--out);
}
.mast.stuck{ box-shadow:var(--shadow) }
.mast__in{
  width:min(100% - (var(--gut) * 2), var(--shell));
  margin-inline:auto; height:4.75rem;
  display:flex; align-items:center; gap:clamp(0.75rem,2.4vw,2rem);
}

.mark{
  display:flex; align-items:center; gap:0.55rem; flex-shrink:0;
  font-variation-settings:"wdth" 118; font-weight:800; font-size:1.1rem;
  text-transform:uppercase; letter-spacing:-0.012em; color:var(--ink);
}
.mark img{ width:2.125rem; height:2.125rem; object-fit:contain }
.mark__rp{ color:var(--blue) }

.mast__nav{ display:flex; gap:0.125rem; margin-left:auto }
.mast__nav a{
  position:relative; padding:0.5rem 0.75rem; border-radius:0.375rem;
  font-size:var(--t-s); font-weight:600; color:var(--ink-2);
  transition:color .25s var(--out), background .25s;
}
.mast__nav a::after{
  content:""; position:absolute; left:0.75rem; right:0.75rem; bottom:0.1rem;
  height:2px; border-radius:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--out);
}
.mast__nav a:hover{ color:var(--ink); background:var(--blue-soft) }
.mast__nav a.here{ color:var(--ink) }
.mast__nav a.here::after{ transform:scaleX(1) }

/* live total, straight off the reference */
.total{
  display:flex; align-items:baseline; gap:0.4rem; flex-shrink:0;
  margin-left:auto; color:var(--ink-3);
  font-size:var(--t-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:0.04em; white-space:nowrap;
}
.total b{
  font-variation-settings:"wdth" 118; font-weight:800; font-size:1.65rem;
  color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
}
.mast__nav ~ .total{ margin-left:0 }

.connect{
  display:inline-flex; align-items:center; gap:0.5rem; flex-shrink:0;
  padding:0.75rem 1.25rem; border-radius:100px;
  background:var(--blue); color:var(--on-blue);
  font-size:var(--t-s); font-weight:700;
  box-shadow:var(--shadow-blue);
  transition:transform .3s var(--out), box-shadow .3s var(--out), background .3s;
}
.connect:hover{
  background:var(--blue-deep); transform:translateY(-1px);
  box-shadow:0 14px 34px -10px oklch(0.575 0.225 264 / .75);
}
.connect__led{
  width:0.4375rem; height:0.4375rem; border-radius:50%;
  background:var(--on-blue); animation:led 2.4s ease-in-out infinite;
}
@keyframes led{ 50%{ opacity:.3 } }

.menu{
  display:none; width:2.625rem; height:2.625rem; flex-shrink:0;
  padding:0; cursor:pointer; border-radius:0.5rem;
  background:var(--paper); border:1px solid var(--line-2);
}
.menu span{
  display:block; width:1.0625rem; height:2px; margin:0.25rem auto;
  background:var(--ink); border-radius:2px;
  transition:transform .35s var(--out);
}
.menu[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg) }
.menu[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg) }

/* ══════════════════════════  HERO  ══════════════════════════ */
.hero{
  position:relative; isolation:isolate;
  min-height:min(52rem, 100svh); display:flex; flex-direction:column; justify-content:flex-end;
  padding:10rem 0 0;
  background:var(--blue-dark);
}
.hero__plate{ position:absolute; inset:0; z-index:-2; overflow:hidden }
.hero__plate img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.8s var(--out), transform 12s linear;
}
.hero__plate img.on{ opacity:1; transform:scale(1) }
.hero__plate::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(94deg, oklch(0.185 0.075 266 / .95) 6%, oklch(0.20 0.08 266 / .62) 50%, oklch(0.24 0.09 266 / .3) 100%),
    linear-gradient(to top, oklch(0.185 0.075 266 / .9) 0%, transparent 42%);
}

.hero__in{
  width:min(100% - (var(--gut) * 2), var(--shell)); margin-inline:auto;
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.hero__in > *{ animation:lift .9s var(--out) backwards }
.hero__in > :nth-child(1){ animation-delay:.05s }
.hero__in > :nth-child(2){ animation-delay:.14s }
.hero__in > :nth-child(3){ animation-delay:.24s }
.hero__in > :nth-child(4){ animation-delay:.34s }
@keyframes lift{ from{ opacity:0; transform:translateY(1.75rem) } }

.onair{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 0.4rem;
  font-size:var(--t-s); color:oklch(0.88 0.03 262); margin-bottom:1.5rem;
}
.onair__led{
  align-self:center; width:0.5rem; height:0.5rem; border-radius:50%;
  background:var(--green); box-shadow:0 0 0.75rem var(--green);
  margin-right:0.25rem; animation:led 2.4s ease-in-out infinite;
}
.onair b{
  font-variation-settings:"wdth" 118; font-weight:800;
  font-size:1.35em; color:var(--on-blue); font-variant-numeric:tabular-nums;
}

.hero__h{ font-size:var(--t-2xl); color:var(--on-blue); margin-bottom:1.5rem }
.hero__p{ max-width:44ch; font-size:var(--t-m); line-height:1.55; color:oklch(0.92 0.02 262) }

.acts{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:2rem }
.act{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 1.875rem; border-radius:100px;
  font-size:var(--t-s); font-weight:700;
  transition:transform .35s var(--out), box-shadow .35s var(--out), background .3s, color .3s;
}
.act--go{ background:var(--blue); color:var(--on-blue); box-shadow:var(--shadow-blue) }
.act--go:hover{ transform:translateY(-2px); background:var(--blue-deep);
  box-shadow:0 16px 38px -10px oklch(0.575 0.225 264 / .8) }
.act--heat{ background:var(--heat); color:var(--on-blue) }
.act--heat:hover{ transform:translateY(-2px); filter:brightness(1.08) }
.act--alt{ background:var(--card); color:var(--ink); box-shadow:var(--shadow) }
.act--alt:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2) }
.hero .act--alt{ background:oklch(1 0 0 / .14); color:var(--on-blue);
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / .32) }
.hero .act--alt:hover{ background:oklch(1 0 0 / .22) }

/* ══════════════════════════  LIVE BOARD  ══════════════════════════ */
/* the reference's server list, told honestly for a one-city server */
.board{
  position:relative; z-index:var(--z-raised);
  width:min(100% - (var(--gut) * 2), var(--shell));
  margin:0 auto -3.5rem;
  display:grid; gap:0.5rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.slot{
  display:flex; flex-direction:column; gap:0.25rem;
  padding:0.9375rem 1.125rem;
  background:var(--card); border-radius:0.75rem;
  box-shadow:var(--shadow);
}
.slot__k{
  font-size:var(--t-xs); font-weight:700; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.05em;
}
.slot__k b{ color:var(--blue); font-weight:800 }
.slot__v{ display:flex; align-items:baseline; gap:0.3rem }
.slot__v em{
  font-style:normal; font-variation-settings:"wdth" 116; font-weight:800;
  font-size:1.5rem; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
}
.slot__v small{ font-size:var(--t-xs); font-weight:600; color:var(--ink-3) }
.slot__led{
  align-self:center; width:0.5rem; height:0.5rem; border-radius:50%;
  background:var(--live); box-shadow:0 0 0 3px oklch(0.680 0.180 150 / .22);
  animation:led 2.4s ease-in-out infinite;
}
.slot--main{
  grid-column:span 2; background:var(--blue); color:var(--on-blue);
  box-shadow:var(--shadow-blue);
  transition:transform .3s var(--out), box-shadow .3s var(--out);
}
.slot--main .slot__k,.slot--main .slot__k b,.slot--main .slot__v em{ color:var(--on-blue) }
.slot--main .slot__v em{ font-size:2rem }
.slot--main .slot__v small{ color:oklch(1 0 0 / .72) }
.slot--main .slot__led{ background:var(--on-blue); box-shadow:0 0 0 3px oklch(1 0 0 / .3) }
.slot--main:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px oklch(0.575 0.225 264 / .75) }

/* ══════════════════════════  SIX LIVES  ══════════════════════════ */
.lives{ padding:calc(var(--band) + 3.5rem) 0 var(--band); background:var(--paper) }
.lives .h-sub{ margin-bottom:clamp(2.5rem,5vw,4rem) }

.mosaic{
  display:grid; gap:0.625rem;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(9rem,15vw,12.5rem);
}
.tile{
  position:relative; overflow:hidden; border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:box-shadow .45s var(--out), transform .45s var(--out);
}
.tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--out);
}
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, oklch(0.16 0.06 266 / .95) 4%, oklch(0.16 0.06 266 / .3) 58%, transparent 88%);
}
.tile__t{ position:absolute; inset:auto 0 0; z-index:var(--z-raised); padding:1.375rem }
.tile__t h3{
  font-variation-settings:"wdth" 116; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.1rem,1.8vw,1.5rem); line-height:1; letter-spacing:-0.022em;
  color:var(--on-blue);
}
.tile__t p{ margin-top:0.5rem; font-size:var(--t-s); line-height:1.45;
  color:oklch(0.9 0.02 262); max-width:32ch }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2) }
.tile:hover img{ transform:scale(1.06) }

.tile--a{ grid-column:1 / 6;  grid-row:span 2 }
.tile--b{ grid-column:6 / 13 }
.tile--c{ grid-column:6 / 10 }
.tile--d{ grid-column:10 / 13 }
.tile--e{ grid-column:1 / 7 }
.tile--f{ grid-column:7 / 13 }

/* ══════════════════════════  TALLY  ══════════════════════════ */
.tally{ padding:0 0 var(--band); background:var(--paper) }
.tally .shell{ border-top:1px solid var(--line-2); padding-top:clamp(2.5rem,5vw,4rem) }
.tally__p{
  font-variation-settings:"wdth" 104;
  font-size:clamp(1.75rem, 1.05rem + 2.4vw, 2.9rem);
  line-height:1.4; font-weight:400;
  color:var(--ink-2); max-width:32ch; text-wrap:pretty;
}
.tally__p em{
  font-style:normal; font-variation-settings:"wdth" 122; font-weight:800;
  font-size:1.5em; line-height:0.8; color:var(--ink);
  letter-spacing:-0.035em; font-variant-numeric:tabular-nums;
  padding-inline:0.06em;
}
.tally__p em span{ color:var(--blue); font-size:0.7em; vertical-align:0.22em }

/* ══════════════════════════  STARTER  ══════════════════════════ */
.starter{
  position:relative; isolation:isolate; overflow:hidden;
  padding:var(--band) 0;
  background:var(--blue);
}
.starter__car{
  position:absolute; z-index:-1; inset:0 auto 0 38%;
  width:74%; height:100%; object-fit:cover; object-position:58% 50%;
  opacity:.85;
  mask-image:linear-gradient(95deg, transparent 2%, oklch(0 0 0) 36%);
  -webkit-mask-image:linear-gradient(95deg, transparent 2%, oklch(0 0 0) 36%);
}
.starter__in{ position:relative }
.starter__h{ font-size:var(--t-xl); color:var(--on-blue); margin-bottom:1.25rem }
.starter__p{ max-width:38ch; font-size:var(--t-m); line-height:1.55;
  color:oklch(0.96 0.02 262); margin-bottom:2rem }
.starter .act--go{ background:var(--card); color:var(--blue-deep);
  box-shadow:0 12px 30px -10px oklch(0.18 0.06 266 / .5) }
.starter .act--go:hover{ background:var(--on-blue) }

/* ══════════════════════════  WORLDS  ══════════════════════════ */
.world{
  display:grid; align-items:center;
  gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  width:min(100% - (var(--gut) * 2), var(--shell));
  margin-inline:auto;
  background:var(--paper);
}
.world--flip .world__art{ order:2 }
.world__art{
  position:relative; align-self:stretch;
  min-height:clamp(19rem,34vw,28rem);
  border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow);
}
.world__art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(1.05);
}
.world--law .world__art img{ object-position:46% 50% }
.world--life .world__art img{ object-position:50% 42% }
.world{ padding-block:var(--band) }
.world__say{ padding:0 }
.world__say > p{ max-width:42ch; color:var(--ink-2); font-size:var(--t-m); line-height:1.55 }

.rail{ margin:2rem 0 2.25rem; border-top:1px solid var(--line-2) }
.rail li{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem;
  padding:0.875rem 0; border-bottom:1px solid var(--line);
  font-size:var(--t-s); color:var(--ink-2);
}
.rail b{
  font-variation-settings:"wdth" 112; font-weight:800;
  color:var(--ink); text-transform:uppercase; letter-spacing:0.012em;
}

/* ══════════════════════════  UNDERWORLD  ══════════════════════════ */
/* the one dark room in a light building — art direction, not inconsistency */
.under{
  position:relative; isolation:isolate; overflow:hidden;
  padding:calc(var(--band) * 1.1) 0;
  background:oklch(0.155 0.045 28);
}
.under__bg{
  position:absolute; z-index:-1; inset:0;
  width:100%; height:100%; object-fit:cover; opacity:.5; filter:saturate(.6);
}
.under::after{
  content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(to bottom, oklch(0.155 0.045 28 / .9) 0%, oklch(0.155 0.045 28 / .72) 42%, oklch(0.155 0.045 28 / .92) 100%);
}
.under__in{ max-width:44rem }
.under__h{ font-size:var(--t-xl); color:var(--on-blue); margin-bottom:1.25rem }
.under__p{ font-size:var(--t-m); line-height:1.55; color:oklch(0.93 0.02 40); max-width:40ch }
.under__l{ display:flex; flex-wrap:wrap; gap:0.5rem; margin:2rem 0 2.25rem }
.under__l li{
  padding:0.5rem 1rem; border-radius:100px;
  font-size:var(--t-s); font-weight:700; color:oklch(0.16 0.04 30);
  background:oklch(0.86 0.13 55);
}

/* ══════════════════════════  NIGHTS  ══════════════════════════ */
.nights{ padding:var(--band) 0; background:var(--paper) }
.nights .h-big{ margin-bottom:clamp(2.5rem,5vw,4rem) }
.nights__grid{ display:grid; gap:0.625rem; grid-template-columns:repeat(2,minmax(0,1fr)) }
.night{
  position:relative; overflow:hidden; border-radius:var(--r);
  min-height:clamp(17rem,26vw,22rem);
  box-shadow:var(--shadow);
  transition:box-shadow .45s var(--out), transform .45s var(--out);
}
.night img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--out);
}
.nights__grid > a:nth-of-type(2) img{ object-position:50% 76% }
.night::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, oklch(0.16 0.06 266 / .95) 6%, oklch(0.16 0.06 266 / .3) 60%, transparent 88%);
}
.night__t{ position:absolute; inset:auto 0 0; z-index:var(--z-raised); padding:1.625rem }
.night__t h3{
  font-variation-settings:"wdth" 118; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1; letter-spacing:-0.025em;
  color:var(--on-blue);
}
.night__t p{ margin-top:0.625rem; font-size:var(--t-s); line-height:1.5;
  color:oklch(0.9 0.02 262); max-width:36ch }
a.night:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2) }
a.night:hover img{ transform:scale(1.05) }
.night--wide{ grid-column:span 2; min-height:clamp(20rem,32vw,26rem) }

.night--hub{
  background:linear-gradient(170deg, var(--blue) 0%, var(--blue-deep) 100%);
  box-shadow:var(--shadow);
}
.night--hub img{
  position:absolute; inset:1.5rem auto auto 50%;
  translate:-50% 0;
  width:auto; height:72%; object-fit:contain;
  filter:drop-shadow(0 1.25rem 1.75rem oklch(0.18 0.08 266 / .6));
}
.night--hub::after{
  background:linear-gradient(to top, oklch(0.455 0.195 266) 10%, oklch(0.455 0.195 266 / .3) 42%, transparent 70%);
}

/* ══════════════════════════  START PLAYING  ══════════════════════════ */
/* stacked blocks with step pills and a beaded connector, per the reference */
.start{ padding:var(--band) 0; background:var(--paper) }
.start .h-big{ margin-bottom:clamp(2.5rem,5vw,4rem) }

.steps{ --gap:1.75rem; display:flex; flex-direction:column; gap:var(--gap) }

.step{
  position:relative;
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,3.5vw,3.5rem);
  padding:clamp(1.5rem,2.8vw,2.25rem) clamp(1.75rem,3.2vw,2.75rem);
  border-radius:clamp(1rem,1.8vw,1.5rem);
  background:var(--blue); color:var(--on-blue);
  box-shadow:var(--shadow-blue);
}
/* the payoff card arrives: deeper, and it carries the weight of the sequence */
.step--last{ background:linear-gradient(105deg, var(--blue) 0%, var(--blue-deep) 100%) }

/* whole dots, both ends — width is an exact multiple of the tile */
.step + .step::before{
  content:""; position:absolute; left:50%; top:calc(var(--gap) * -1);
  translate:-50% 0;
  width:9.625rem; height:var(--gap);
  background-image:radial-gradient(circle at center, var(--blue) 0 0.25rem, transparent 0.27rem);
  background-size:1.375rem 100%;
  background-position:0 center;
  background-repeat:repeat-x;
}

.step__pill{
  display:inline-block; margin-bottom:0.875rem;
  padding:0.375rem 0.75rem; border-radius:0.4375rem;
  font-size:var(--t-xs); font-weight:800; text-transform:uppercase;
  letter-spacing:0.07em; color:oklch(0.16 0.04 265);
}
.step__pill--one{ background:var(--paper-2) }
.step__pill--two{ background:var(--gold) }
.step__pill--three{ background:var(--green) }

.step h3{
  font-variation-settings:"wdth" 116; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.4rem, 0.9rem + 1.5vw, 2.1rem);
  line-height:1.04; letter-spacing:-0.028em;
  color:var(--on-blue); text-wrap:balance;
}
.step h3 mark{ color:var(--gold-hi) }

.step__do{ display:flex; flex-direction:column; align-items:stretch; gap:0.5rem; min-width:11.5rem }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.8125rem 1.5rem; border-radius:100px;
  font-size:var(--t-s); font-weight:700; white-space:nowrap;
  transition:transform .3s var(--out), background .3s, color .3s;
}
.chip--solid{ background:var(--paper-2); color:var(--ink) }
.chip--solid:hover{ background:var(--on-blue); transform:translateY(-2px) }
.chip--ghost{ color:var(--on-blue); box-shadow:inset 0 0 0 2px oklch(1 0 0 / .45) }
.chip--ghost:hover{ background:oklch(1 0 0 / .16); transform:translateY(-2px) }
.chip--flat{ color:var(--on-blue); padding:0.25rem; font-size:var(--t-xs); font-weight:700 }

/* ══════════════════════════  LATEST  ══════════════════════════ */
.latest{ padding:var(--band) 0; background:var(--paper) }
.latest .h-big{ margin-bottom:clamp(2.5rem,5vw,4rem) }
.latest__g{ display:grid; gap:0.625rem; grid-template-columns:1.55fr 1fr }
.lead{
  position:relative; overflow:hidden; border-radius:var(--r);
  min-height:clamp(22rem,36vw,29rem); display:flex; align-items:flex-end;
  box-shadow:var(--shadow);
  transition:box-shadow .45s var(--out), transform .45s var(--out);
}
.lead img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--out);
}
.lead::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, oklch(0.16 0.06 266 / .96) 10%, oklch(0.16 0.06 266 / .28) 64%, transparent 90%);
}
.lead__t{ position:relative; z-index:var(--z-raised); padding:2.125rem; max-width:40rem }
.lead__t h3{
  font-variation-settings:"wdth" 120; font-weight:800; text-transform:uppercase;
  font-size:var(--t-l); line-height:0.98; letter-spacing:-0.028em;
  color:var(--on-blue); margin-bottom:0.75rem;
}
.lead__t p{ font-size:var(--t-s); line-height:1.6; color:oklch(0.9 0.02 262); max-width:46ch }
.lead:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2) }
.lead:hover img{ transform:scale(1.04) }

.latest__s{ display:grid; gap:0.625rem }
.note{
  padding:1.875rem; border-radius:var(--r); background:var(--card);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; justify-content:center;
  transition:box-shadow .35s, transform .35s var(--out);
}
.note h4{
  font-variation-settings:"wdth" 112; font-weight:800;
  font-size:var(--t-m); line-height:1.15; letter-spacing:-0.015em; margin-bottom:0.5rem;
}
.note p{ font-size:var(--t-s); line-height:1.6; color:var(--ink-2) }
.note:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2) }
.link{ display:inline-block; margin-top:1rem; color:var(--blue);
  font-size:var(--t-s); font-weight:700; transition:translate .3s var(--out) }
.lead .link{ color:var(--blue-hi) }
a:hover .link{ translate:5px 0 }

/* ══════════════════════════  ANSWERS  ══════════════════════════ */
.answers{ padding:var(--band) 0; background:var(--paper) }
.answers__in{ display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:0.8fr 1.2fr; align-items:start }
.answers__side p{ color:var(--ink-2); max-width:34ch; margin-bottom:1.75rem }
.answers__list{ display:grid; gap:0.5rem }
.answers details{
  border-radius:0.875rem; background:var(--card); padding:0 1.625rem;
  box-shadow:var(--shadow);
  transition:box-shadow .35s;
}
.answers details[open]{ box-shadow:var(--shadow-2) }
.answers summary{
  list-style:none; cursor:pointer; padding:1.25rem 0;
  display:flex; justify-content:space-between; align-items:center; gap:1.25rem;
  font-weight:800; font-size:var(--t-b); color:var(--ink);
}
.answers summary::-webkit-details-marker{ display:none }
.answers summary::after{
  content:""; flex:0 0 auto; width:0.6875rem; height:0.6875rem;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  rotate:45deg; translate:0 -2px; transition:rotate .35s var(--out);
}
.answers details[open] summary::after{ rotate:-135deg; translate:0 2px }
.answers details p{ padding-bottom:1.375rem; font-size:var(--t-s);
  line-height:1.65; color:var(--ink-2); max-width:62ch }
.answers details p b{ color:var(--blue); font-weight:800; overflow-wrap:anywhere }

/* ══════════════════════════  CLOSE  ══════════════════════════ */
.close{
  position:relative; isolation:isolate; overflow:hidden;
  padding:calc(var(--band) * 1.25) 0; text-align:center;
  background:var(--blue-dark);
}
.close__bg{
  position:absolute; z-index:-2; inset:0;
  width:100%; height:100%; object-fit:cover; opacity:.5;
}
.close::after{
  content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(to bottom, oklch(0.185 0.075 266 / .86), oklch(0.205 0.085 266 / .8) 55%, oklch(0.185 0.075 266 / .88));
}
.close__in{ max-width:48rem; margin-inline:auto }
.close__h{ font-size:var(--t-2xl); color:var(--on-blue); margin-bottom:1.5rem }
.close__p{ font-size:var(--t-m); line-height:1.55; color:oklch(0.93 0.02 262);
  margin-inline:auto; max-width:42ch }
.close .acts{ justify-content:center }
.close .act--go{ background:var(--card); color:var(--blue-deep) }
.close .act--go:hover{ background:var(--on-blue) }
.close .act--alt{ background:oklch(1 0 0 / .14); color:var(--on-blue);
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / .32) }
.close .act--alt:hover{ background:oklch(1 0 0 / .22) }

/* ══════════════════════════  FOOT  ══════════════════════════ */
.foot{ background:var(--card); border-top:1px solid var(--line);
  padding-top:clamp(3rem,6vw,4.5rem) }
.foot__in{
  display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1.7fr repeat(3,1fr);
  padding-bottom:3rem;
}
.foot__id p{ margin-top:1rem; font-size:var(--t-s); line-height:1.65;
  color:var(--ink-2); max-width:34ch }
.foot__col{ display:flex; flex-direction:column; gap:0.625rem }
.foot__col h3{ font-size:var(--t-s); font-weight:800; color:var(--ink);
  margin-bottom:0.25rem; font-variation-settings:"wdth" 110 }
.foot__col a{ font-size:var(--t-s); color:var(--ink-2); width:fit-content;
  transition:color .25s, translate .25s var(--out) }
.foot__col a:hover{ color:var(--blue); translate:3px 0 }
.foot__rule{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.75rem;
  padding:1.375rem 0; border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--ink-3);
}

/* ══════════════════════════════════════════════════════════════════════
   SCROLL MOTION — content is visible by default; the browser drives the
   reveal natively. Nothing here gates visibility on a class or observer.
   ══════════════════════════════════════════════════════════════════════ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 46%;
    }
  }
}
@keyframes rise{ from{ opacity:0; transform:translateY(1.5rem) } }

/* ══════════════════════════  RESPONSIVE  ══════════════════════════ */
@media (max-width:72rem){
  .total{ display:none }
}

@media (max-width:64rem){
  .mast__nav{
    display:none; position:fixed; inset:4.75rem 0 auto;
    flex-direction:column; gap:0; padding:0.75rem var(--gut) 1.5rem;
    background:var(--card); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-2);
  }
  .mast__nav.open{ display:flex }
  .mast__nav a{ padding:0.9375rem 0.25rem; font-size:var(--t-b);
    border-bottom:1px solid var(--line) }
  .mast__nav a::after{ display:none }
  .menu{ display:block; order:3 }
  .total{ display:flex; margin-left:auto }
  .total span{ display:none }

  .board{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:-2.5rem }
  .lives{ padding-top:calc(var(--band) + 2.5rem) }
  .slot--main{ grid-column:span 2 }

  .mosaic{ grid-auto-rows:clamp(8rem,22vw,11rem) }
  .tile--a{ grid-column:1 / 7 }
  .tile--b{ grid-column:7 / 13 }
  .tile--c{ grid-column:1 / 7 }
  .tile--d{ grid-column:7 / 13 }
  .tile--e{ grid-column:1 / 7 }
  .tile--f{ grid-column:7 / 13 }

  .world{ grid-template-columns:1fr; gap:clamp(1.5rem,4vw,2.5rem) }
  .world--flip .world__art{ order:0 }
  .world__art{ min-height:clamp(15rem,40vw,22rem) }

  .starter__car{ inset:0; width:100%; opacity:.4;
    mask-image:none; -webkit-mask-image:none }

  .answers__in{ grid-template-columns:1fr }
  .latest__g{ grid-template-columns:1fr }
  .foot__in{ grid-template-columns:1fr 1fr }
  .foot__id{ grid-column:1 / -1 }
}

@media (max-width:48rem){
  html{ scroll-padding-top:5rem }
  .nights__grid{ grid-template-columns:1fr }
  .night--wide{ grid-column:span 1 }
  .rail li{ grid-template-columns:1fr; gap:0.125rem }
  .step{ grid-template-columns:1fr; gap:1.5rem; align-items:start }
  .step__do{ flex-direction:row; flex-wrap:wrap; min-width:0 }
  .step + .step::before{ width:6.875rem }
}

@media (max-width:34rem){
  .mosaic{ grid-template-columns:1fr; grid-auto-rows:11rem }
  .mosaic .tile{ grid-column:1 / -1 }
  .tile--a{ grid-row:span 1 }
  .acts{ flex-direction:column; align-items:stretch }
  .act{ width:100% }
  .board{ grid-template-columns:1fr 1fr }
  .foot__in{ grid-template-columns:1fr }
  .foot__rule{ flex-direction:column; gap:0.375rem }
  .tally__p{ max-width:none }
  .step__do{ flex-direction:column; align-items:stretch }
  .chip{ width:100% }
  .chip--flat{ width:auto }
}

/* small phones: the masthead is the only row that can't wrap, so it shrinks */
@media (max-width:25rem){
  :root{ --gut:1rem }
  .mast__in{ gap:0.5rem }
  .mark{ font-size:0.9rem }
  .mark img{ width:1.75rem; height:1.75rem }
  .total b{ font-size:1.3rem }
  .connect{ padding:0.625rem 0.9375rem; font-size:0.8125rem }
  .menu{ width:2.375rem; height:2.375rem }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero__plate img{ transition:opacity .01ms }
}