/* STEEZY website. Palette, type and voice follow the in-game brand kit. */
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-latin.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('/fonts/inter-tight-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/fonts/cinzel-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/fonts/jost-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --night: #0C111A; --night-2: #151D2C; --cream: #F1E9D8; --paper: #F6EFE1; --oat: #D9CBB4;
  --ink: #23222B; --ink-soft: #4A4854; --heather: #8E8E96;
  --gold: #F2A93B; --gold-hi: #FFBB4D; --on-gold: #1A1408;
  --coral: #E8735A; --dusk: #2E4A7A; --teal: #3FAE9F; --pass-teal: #0B3A38;
  --sign: #1E3A30; --sign-2: #173027; --brass: #C49A55; --wood: #6B4A2E;
  --green: #3FAA4C; --blue: #2F7FE0; --black: #1C2029; --park: #F08A24;
  --display: 'Inter Tight', 'SF Pro Display', system-ui, sans-serif;
  --body: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  --serif: 'Cinzel', Georgia, serif;
  --sans-sign: 'Jost', 'Nunito', sans-serif;
  --wrap: 1240px; --gutter: clamp(16px, 4vw, 48px);
  --radius: 22px; --ease: cubic-bezier(.2,.8,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.6 var(--body); overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
kbd { font: 800 .85em var(--body); background: var(--ink); color: var(--cream); border-radius: 6px; padding: .05em .45em; box-shadow: 0 2px 0 #000; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: var(--on-gold); padding: 10px 16px; border-radius: 999px; font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(820px, 100% - 2 * var(--gutter)); }

/* Type */
.display { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 7.4vw, 104px); line-height: .98; letter-spacing: -.03em; }
.display .ln { display: block; transform: skewX(-5deg); transform-origin: left bottom; padding-left: .04em; }
.display em { font-style: normal; color: var(--gold); }
.label { font: 800 13px/1.2 var(--body); letter-spacing: .26em; text-transform: uppercase; color: #B7701A; margin-bottom: 18px; }
.on-dark .label, .hero .label, .page-hero .label { color: var(--gold); }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 36ch; color: var(--ink-soft); margin-top: 26px; }
.on-dark .lead, .on-dark p { color: rgba(241,233,216,.82); }
.small { font-size: 14px; color: var(--ink-soft); }
.on-dark .small { color: rgba(241,233,216,.65); }
.sign-text { font-family: var(--serif); font-weight: 700; letter-spacing: .04em; }
.text-link { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.text-link:hover .arr, .btn:hover .arr { transform: translateX(3px); }
.arr { display: inline-block; transition: transform .2s var(--ease); }

/* Buttons: slanted like the mark, text kept upright */
.btn { --bg: var(--gold); --fg: var(--on-gold); display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; background: var(--bg); color: var(--fg); border-radius: 14px; font: 900 18px/1 var(--body); letter-spacing: .01em; text-decoration: none; transform: skewX(-5deg); box-shadow: 0 5px 0 #B9761C, 0 14px 30px rgba(242,169,59,.35); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s; border: 0; cursor: pointer; }
.btn > span { transform: skewX(5deg); display: inline-flex; gap: 10px; align-items: center; }
.btn:hover { background: var(--gold-hi); transform: skewX(-5deg) translateY(-2px); box-shadow: 0 7px 0 #B9761C, 0 18px 36px rgba(242,169,59,.45); }
.btn:active { transform: skewX(-5deg) translateY(3px); box-shadow: 0 2px 0 #B9761C, 0 8px 18px rgba(242,169,59,.3); }
.btn-gold > span::after { content: '→'; transition: transform .2s var(--ease); }
.btn-gold:hover > span::after { transform: translateX(3px); }
.btn-small { min-height: 42px; padding: 0 20px; font-size: 15px; border-radius: 11px; box-shadow: 0 4px 0 #B9761C; }
.btn-small:hover { box-shadow: 0 5px 0 #B9761C; }
.btn-ink { --bg: var(--ink); --fg: var(--cream); box-shadow: 0 5px 0 #000, 0 14px 30px rgba(35,34,43,.25); }
.btn-ink:hover { background: #33313d; box-shadow: 0 7px 0 #000, 0 18px 36px rgba(35,34,43,.3); }
.btn-ink > span::after { content: '→'; }
.play-group { display: grid; justify-items: start; gap: 14px; margin-top: 34px; }
.requirements { font-size: 14px; font-weight: 700; color: rgba(241,233,216,.85); letter-spacing: .01em; }
.play-group.on-light .requirements { color: var(--ink-soft); }
.mobile-signup { display: none !important; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .desktop-play { display: none !important; }
  .mobile-signup { display: inline-flex !important; }
  p.mobile-signup { display: block !important; }
}
.pill { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.pill-teal { background: var(--pass-teal); color: var(--cream); }
.pill-gold { background: var(--gold); color: var(--on-gold); }
.pill-coral { background: var(--coral); color: #fff; }

/* Trail markers, drawn like the signs on the hill */
.marker { display: inline-block; width: 16px; height: 16px; flex: none; }
.marker.green { background: var(--green); border-radius: 50%; }
.marker.blue { background: var(--blue); border-radius: 2px; }
.marker.black { background: var(--black); transform: rotate(45deg) scale(.85); border-radius: 2px; }
.marker.park { background: var(--park); border-radius: 3px; height: 10px; width: 22px; }

/* Header */
.main-nav { display: flex; gap: 2px; margin-left: auto; padding: 5px; border-radius: 999px; background: rgba(12,17,26,.34); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(241,233,216,.14); transition: background .3s, box-shadow .3s; }
.main-nav a { color: var(--cream); text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: .01em; padding: 9px 16px; border-radius: 999px; transition: background .2s, color .2s; }
.main-nav a:hover { background: rgba(241,233,216,.14); }
.main-nav a[aria-current] { background: var(--cream); color: var(--ink); }
body:not(.at-top):not(.over-dark) .main-nav { background: rgba(35,34,43,.05); box-shadow: inset 0 0 0 1px rgba(35,34,43,.08); backdrop-filter: none; }
body:not(.at-top):not(.over-dark) .main-nav a:hover { background: rgba(35,34,43,.07); }
body:not(.at-top):not(.over-dark) .main-nav a[aria-current] { background: var(--ink); color: var(--cream); }
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s, transform .35s var(--ease); }
.nav-shell { width: min(1400px, 100% - 2 * var(--gutter)); margin-inline: auto; height: 76px; display: flex; align-items: center; gap: 32px; }
.brand { display: block; position: relative; flex: none; }
.brand img { width: 128px; }
.brand .logo-ink { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.brand .logo-cream { transition: opacity .3s; }



body:not(.at-top) .site-header { background: rgba(246,239,225,.9); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(35,34,43,.08); }
body:not(.at-top) .main-nav a:not([aria-current]) { color: var(--ink); }
body:not(.at-top) .brand .logo-ink { opacity: 1; }
body:not(.at-top) .brand .logo-cream { opacity: 0; }
body.over-dark:not(.at-top) .site-header { background: rgba(12,17,26,.82); box-shadow: 0 1px 0 rgba(241,233,216,.08); }
body.over-dark:not(.at-top) .main-nav a:not([aria-current]) { color: var(--cream); }
body.over-dark:not(.at-top) .brand .logo-ink { opacity: 0; }
body.over-dark:not(.at-top) .brand .logo-cream { opacity: 1; }
.menu-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(12,17,26,.35); cursor: pointer; padding: 0 12px; flex-direction: column; justify-content: center; gap: 6px; }
.menu-toggle span { display: block; height: 2.5px; border-radius: 2px; background: var(--cream); transition: transform .25s; }
body:not(.at-top):not(.over-dark) .menu-toggle { background: rgba(35,34,43,.08); }
body:not(.at-top):not(.over-dark) .menu-toggle span { background: var(--ink); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu { position: absolute; inset: 76px 12px auto; background: var(--night); border-radius: 20px; padding: 14px; display: grid; gap: 4px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) { color: var(--cream); text-decoration: none; font: 900 26px/1.2 var(--display); letter-spacing: -.02em; padding: 12px 14px; border-radius: 12px; }
.mobile-menu a:not(.btn):hover { background: rgba(241,233,216,.06); }
.mobile-menu .btn { margin: 10px 8px 6px; }
@media (max-width: 1080px) {
  .main-nav, .site-header .btn-small { display: none; }
  .menu-toggle { display: flex; }
  .nav-shell { height: 68px; }
  .mobile-menu { top: 68px; }
  .brand img { width: 112px; }
}

/* HUD chip, the in-game status line */
.hud { position: fixed; left: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 7px; background: rgba(12,17,26,.72); color: var(--cream); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; padding: 8px 14px 8px 12px; font: 700 13px/1 var(--body); letter-spacing: .02em; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
body:not(.at-top) .hud { opacity: 1; transform: none; }
.hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(242,169,59,.25); }
@media (max-width: 760px) { .hud { display: none; } }

/* Hero */
.hero { position: relative; min-height: max(640px, 100svh); display: grid; align-items: center; color: var(--cream); overflow: hidden; isolation: isolate; background: #3a2c2a; }
.hero-art, .page-hero-art, .village-art { position: absolute; inset: 0; z-index: -2; }
.hero-art img, .page-hero-art img, .village-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-art { transform: scaleX(-1); }
.hero-art img { object-position: 60% 60%; transform: scale(1.06); animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.13) translate(-1.2%, -1%); } }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,14,22,.5) 0%, rgba(20,14,22,0) 18%), linear-gradient(90deg, rgba(20,14,22,.78) 0%, rgba(20,14,22,.45) 38%, rgba(20,14,22,0) 62%), linear-gradient(0deg, rgba(20,14,22,.5), rgba(20,14,22,0) 30%); }
.snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero-inner { padding: 120px 0 130px; }
.hero-title img { width: min(640px, 88vw); filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)); }
.hero-lede { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; max-width: 30ch; margin-top: 28px; font-weight: 600; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.hero-next { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); color: var(--cream); text-decoration: none; font: 800 13px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.hero-next span { display: inline-block; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
@media (max-width: 760px) {
  .hero { min-height: 100svh; align-items: end; }
  .hero-art img { object-position: 40% 50%; }
  .hero::before { background: linear-gradient(180deg, rgba(20,14,22,.6) 0%, rgba(20,14,22,0) 16%), linear-gradient(0deg, rgba(20,14,22,.85) 0%, rgba(20,14,22,.45) 55%, rgba(20,14,22,.1) 100%); }
  .hero-inner { padding: 110px 0 90px; }
  .hero-next { display: none; }
}

/* Trick ticker: the HUD's trick feed, slanted like the wordmark */
.ticker { background: var(--gold); color: var(--on-gold); overflow: hidden; transform: skewY(-1.2deg); margin: -18px 0 0; position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(185,118,28,.25); }
.ticker-track { display: flex; width: max-content; animation: tick 48s linear infinite; padding: 15px 0; }
.ticker span { font: 900 21px/1 var(--display); letter-spacing: -.01em; white-space: nowrap; padding: 0 22px; transform: skewX(-5deg); display: inline-flex; align-items: center; gap: 44px; }
.ticker span::after { content: ''; width: 9px; height: 9px; background: var(--on-gold); transform: rotate(45deg); opacity: .7; }
@keyframes tick { to { transform: translateX(-50%); } }

.report-strip { display: block; text-decoration: none; background: var(--paper); border-bottom: 1px solid rgba(35,34,43,.08); }
.report-strip-inner { display: flex; align-items: center; gap: 18px; padding: 26px 0 18px; font-weight: 700; flex-wrap: wrap; }
.report-strip-title { font-weight: 900; }
.report-strip-date { color: var(--ink-soft); font-size: 14px; }
.report-strip-go { margin-left: auto; font-size: 14px; font-weight: 800; border-bottom: 2px solid var(--gold); }
.report-strip:hover .arr { transform: translateX(3px); }

/* Sky: each section is a time of day on the mountain */
section { position: relative; }
.sky-morning { background: linear-gradient(180deg, var(--paper) 0%, #EEF2F2 100%); }
.sky-noon { background: linear-gradient(180deg, #EEF2F2 0%, #DCE8F0 100%); }
.sky-afternoon { background: linear-gradient(180deg, #DCE8F0 0%, #F5E6CC 100%); }
.sky-golden { background: linear-gradient(180deg, #F5E6CC 0%, #F6C98C 100%); }
.sky-dusk { background: linear-gradient(180deg, #F6C98C 0%, #E8735A 26%, #7A4B6E 58%, var(--dusk) 82%, #17213A 100%); color: var(--cream); }
.sky-night { background: radial-gradient(120% 70% at 70% 0%, #1B2A48 0%, #0F1726 45%, var(--night) 100%); color: var(--cream); overflow: hidden; }
.stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 42%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 44% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 61% 30%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 77% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 36%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 6% 60%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 36% 70%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 94% 64%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 54% 56%, #fff 50%, transparent 51%); background-size: 520px 420px; opacity: .55; }

.steez, .footage, .mountain, .report-section, .trail-guide, #runs, .places, .sky-afternoon:not(.mountain) { padding: clamp(90px, 11vw, 150px) 0; }

/* Steez intro */
.steez-head { max-width: 760px; }

/* Section heads */
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 56px; }
.section-head > p { max-width: 34ch; color: var(--ink-soft); font-size: 18px; }
.section-head.on-dark > p { color: rgba(241,233,216,.9); }
.sky-dusk .label { color: var(--cream) !important; opacity: .9; }
@media (max-width: 760px) { .section-head { flex-direction: column; align-items: start; gap: 22px; } }

/* Mountain */
.mountain-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 40px; }
.stats > div { background: rgba(255,255,255,.75); border-radius: 18px; padding: 20px 20px 18px; }
.stats dt { font: 800 12px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.stats dd { grid-column: 1 / -1; font: 900 clamp(36px, 4vw, 52px)/1 var(--display); letter-spacing: -.03em; margin-top: 12px; transform: skewX(-5deg); transform-origin: left bottom; }
.stats dd small { font-size: .45em; margin-left: 3px; letter-spacing: 0; }
@media (max-width: 980px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } .stats > div:last-child { grid-column: 1 / -1; } }

.map-board { background: var(--sign); border-radius: 22px; padding: 14px; box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px var(--brass), 0 40px 80px -40px rgba(12,17,26,.55); margin-bottom: 40px; }
.map-board-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 16px; color: var(--cream); gap: 12px; flex-wrap: wrap; }
.map-board-head .sign-text { font-size: clamp(20px, 2.4vw, 28px); }
.map-board-tag { font: 600 13px/1 var(--sans-sign); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.map-frame { display: block; position: relative; border-radius: 12px; overflow: hidden; }
.map-frame img { width: 100%; transition: transform .6s var(--ease); }
.map-frame:hover img { transform: scale(1.015); }
.map-zoom { position: absolute; right: 14px; bottom: 14px; background: var(--night); color: var(--cream); font: 800 14px/1 var(--body); padding: 11px 15px; border-radius: 999px; }
.map-board figcaption { color: rgba(241,233,216,.7); font-size: 14px; padding: 14px 14px 6px; }

/* Village */
.village { padding: clamp(340px, 38vw, 560px) 0 clamp(100px, 12vw, 160px); overflow: hidden; isolation: isolate; }
.village-art { bottom: auto; height: clamp(520px, 56vw, 820px); }
.village-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245,230,204,.55) 0%, rgba(245,230,204,0) 7%, rgba(245,220,180,0) 60%, #F5DDB0 100%); }
.village-art img { object-position: 50% 40%; }
.village-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: end; }
.village-copy { background: rgba(246,239,225,.94); border-radius: 28px; padding: clamp(28px, 4vw, 50px); box-shadow: 0 30px 70px -40px rgba(60,30,10,.6); }
.town-sign { display: inline-grid; justify-items: center; gap: 4px; background: var(--sign); color: var(--cream); padding: 16px 30px 14px; border-radius: 10px; box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px var(--brass); margin-bottom: 30px; transform: rotate(-1.5deg); }
.town-sign .sign-text { font-size: clamp(24px, 3vw, 34px); }
.sign-small { font: 600 11px/1 var(--sans-sign); letter-spacing: .28em; text-transform: uppercase; color: var(--brass); }
.ladder { display: grid; gap: 14px; }
.ladder li { display: flex; gap: 20px; align-items: start; background: rgba(255,255,255,.82); border-radius: 20px; padding: 22px 24px; }
.ladder-step { font: 900 30px/1 var(--display); color: #B7701A; transform: skewX(-5deg); min-width: 42px; }
.ladder h3 { font: 900 21px/1.15 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left; }
.ladder p { color: var(--ink-soft); margin-top: 4px; }
.ladder-top { background: var(--ink) !important; color: var(--cream); }
.ladder-top p { color: rgba(241,233,216,.75); }
.ladder-top .ladder-step { color: var(--gold); }
.row-card { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 60px auto 0; position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(60,30,10,.7); border: 8px solid #fff; }
.row-card img { width: 100%; aspect-ratio: 21/9; object-fit: cover; object-position: 50% 40%; }
.row-card figcaption { position: absolute; left: 22px; bottom: 20px; background: var(--sign); color: var(--cream); font: 700 18px/1 var(--serif); letter-spacing: .05em; padding: 12px 18px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 4px var(--brass); }
@media (max-width: 900px) { .village-inner { grid-template-columns: 1fr; } .village { padding-top: 62vw; } .village-art { height: 80vw; } .row-card img { aspect-ratio: 4/3; } .row-card { border-width: 5px; } }

/* Signup: a lift pass on a night sky */
.signup { padding: clamp(100px, 12vw, 160px) 0; }
.signup-inner { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 60px; align-items: center; position: relative; }
.signup-copy .note { margin-top: 20px; max-width: 38ch; }
.signup-play .play-group { margin-top: 30px; }
.pass { position: relative; justify-self: center; width: 100%; max-width: 420px; padding-top: 58px; transform: rotate(2.5deg); }
.pass-ring { position: absolute; top: 0; left: 50%; width: 64px; height: 92px; margin-left: -32px; border: 5px solid #B9BEC6; border-radius: 50%; border-bottom-color: transparent; z-index: 2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.pass-card { position: relative; background: #F3EBDC; color: var(--ink); border-radius: 22px; padding: 44px 30px 22px 44px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.7); overflow: hidden; }
.pass-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: var(--gold); }
.pass-card::after { content: ''; position: absolute; top: 16px; left: 50%; width: 22px; height: 22px; margin-left: -3px; border-radius: 50%; background: #0F1726; box-shadow: 0 0 0 4px #D4B06A; }
.pass-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--pass-teal); padding: 16px 0 14px; }
.pass-brand { font: 900 34px/1 var(--display); color: var(--pass-teal); letter-spacing: -.02em; transform: skewX(-8deg); }
.pass-kind { font: 600 12px/1 var(--sans-sign); letter-spacing: .24em; text-transform: uppercase; color: var(--coral); }
.pass-body { display: grid; gap: 14px; justify-items: start; padding: 24px 0 22px; border: 2px solid var(--pass-teal); border-width: 0 0 2px; }
.pass-line { font-weight: 700; font-size: 18px; line-height: 1.4; }
.pass-body .small { color: var(--ink-soft); }
.pass-body iframe { width: 100%; border: 0; border-radius: 10px; background: #fff; }
.pass-foot { display: flex; justify-content: space-between; padding-top: 14px; font: 600 12px/1 var(--sans-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.pass-foot span:last-child { color: var(--coral); }
@media (max-width: 900px) { .signup-inner { grid-template-columns: 1fr; gap: 50px; } .pass { transform: rotate(1.5deg); } }
@media (max-width: 420px) { .pass-card { padding: 40px 20px 20px 34px; } .pass-brand { font-size: 28px; } }

/* Page heroes */
.page-hero { position: relative; min-height: min(78svh, 760px); display: flex; align-items: end; color: var(--cream); overflow: hidden; isolation: isolate; background: #3a2c2a; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,14,22,.85) 0%, rgba(20,14,22,.5) 50%, rgba(20,14,22,.2) 80%, rgba(20,14,22,.45) 100%); }
.page-hero-inner { padding: 150px 0 80px; }
.page-hero .lead { color: rgba(241,233,216,.88); }
.trail-guide { padding-top: 70px !important; }

.trail-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { display: inline-flex; align-items: center; gap: 9px; border: 0; background: #fff; color: var(--ink); font: 800 15px/1 var(--body); padding: 12px 16px; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 0 rgba(35,34,43,.08); transition: background .2s, color .2s; }
.filter .marker { width: 12px; height: 12px; }
.filter .marker.park { width: 18px; height: 9px; }
.filter .count { font-size: 12px; opacity: .6; }
.filter:hover { background: var(--cream); }
.filter.active { background: var(--ink); color: var(--cream); }
.filter.active .marker.black { background: var(--cream); }
.table-scroll { overflow-x: auto; border-radius: 22px; }
.board-table { background: var(--sign); padding: 10px; box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px var(--brass); }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
.board-table table { background: var(--paper); border-radius: 14px; overflow: hidden; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid rgba(35,34,43,.08); vertical-align: middle; font-variant-numeric: tabular-nums; }
thead th { font: 800 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); background: #EDE3D0; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: #fff; }
tr[hidden] { display: none; }
.run-name { display: block; font: 900 19px/1.15 var(--display); letter-spacing: -.01em; }
.run-area { display: block; font-size: 14px; color: var(--ink-soft); font-weight: 600; margin-top: 3px; }
.rating { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; white-space: nowrap; }
.table-note { margin-top: 18px; }
.lift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lift-ticket { position: relative; background: #fff; border-radius: 18px; padding: 22px 22px 18px; border-left: 10px solid var(--pass-teal); box-shadow: 0 20px 40px -28px rgba(35,34,43,.4); }
.lift-ticket::after { content: ''; position: absolute; right: 18px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px #D4B06A; }
.lift-type { font: 600 12px/1 var(--sans-sign); letter-spacing: .22em; text-transform: uppercase; color: var(--coral); }
.lift-ticket h3 { font: 900 22px/1.1 var(--display); letter-spacing: -.02em; margin: 12px 0 6px; transform: skewX(-5deg); transform-origin: left; }
.lift-ticket p { color: var(--ink-soft); font-size: 15px; }
.lift-ticket dl { display: flex; gap: 22px; margin-top: 16px; padding-top: 14px; border-top: 2px dashed rgba(35,34,43,.12); }
.lift-ticket dt { font: 800 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.lift-ticket dd { font: 900 20px/1 var(--display); margin-top: 6px; }
@media (max-width: 1000px) { .lift-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lift-grid { grid-template-columns: 1fr; } }
.place-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.place { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(60,30,10,.55); }
.place img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.place > div { padding: 24px 26px 28px; }
.place h3 { font: 900 24px/1.1 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left; margin-bottom: 10px; }
.place p { color: var(--ink-soft); }
@media (max-width: 900px) { .place-grid { grid-template-columns: 1fr; max-width: 520px; } }

.closing { padding: clamp(110px, 13vw, 170px) 0; text-align: left; }
.closing .display { margin-bottom: 8px; }
.closing .small { margin-top: 20px; }
.lost { min-height: 100svh; display: flex; align-items: center; }
.lost .btn { margin-top: 34px; }

.article-top { padding: 150px 0 110px; }
.article-top .report { margin-top: 50px; }
.back-link { display: inline-block; margin-bottom: 30px; font-weight: 800; text-decoration: none; color: var(--ink-soft); }
.back-link:hover { color: var(--ink); }
.updates-list { padding: 90px 0 120px; }

/* Footer */
.site-footer { background: var(--night); color: var(--cream); padding: 80px 0 30px; }
.footer-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 50px; padding-bottom: 50px; border-bottom: 1px solid rgba(241,233,216,.1); }
.site-footer .brand img { width: min(320px, 70vw); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-cols div { display: grid; gap: 10px; align-content: start; }
.footer-cols .label { color: var(--gold); margin-bottom: 6px; font-size: 12px; }
.footer-cols a { color: rgba(241,233,216,.8); text-decoration: none; font-weight: 700; font-size: 15px; }
.footer-cols a:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--gold); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 13px; color: rgba(241,233,216,.55); flex-wrap: wrap; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; gap: 26px; } }

/* Lightbox */
.lightbox { width: min(1600px, 96vw); max-height: 94vh; padding: 0; border: 0; border-radius: 18px; background: var(--night); color: var(--cream); overflow: hidden; }
.lightbox::backdrop { background: rgba(8,10,16,.85); backdrop-filter: blur(6px); }
.lightbox img { width: 100%; max-height: calc(94vh - 60px); object-fit: contain; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; font-weight: 700; }
.lightbox-original { color: var(--gold); font-weight: 800; text-decoration: none; }
.lightbox-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(12,17,26,.8); color: var(--cream); font-size: 18px; cursor: pointer; }
body.lightbox-open { overflow: hidden; }

/* Reveal on scroll, only when JS is running */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.polaroid { transform: translateY(26px) rotate(var(--tilt, 0deg)); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.polaroid.in { transform: rotate(var(--tilt, 0deg)); }
.js .reveal.polaroid.in:hover { transform: rotate(0deg) translateY(-6px); }
.js .reveal.pass.in { transform: rotate(2.5deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.pass { transform: rotate(2.5deg); }
  .js .reveal.polaroid { transform: rotate(var(--tilt, 0deg)); }
}

/* ---------- Round 2 ---------- */
@font-face { font-family: 'Caveat'; src: url('/fonts/caveat-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@media (max-width: 900px) { .mountain-head { grid-template-columns: 1fr; } }

/* A marker inside a white tile, the way the game's trail boards show it */
.tile { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; background: #F4EFE3; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.tile .marker { width: 15px; height: 15px; }
.tile .marker.park { width: 19px; height: 10px; }

/* Pillars: painted cards with a trail-board plaque */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 72px; }
.pillar { position: relative; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 1px 0 rgba(35,34,43,.06), 0 30px 60px -34px rgba(60,30,10,.5); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pillar:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(35,34,43,.06), 0 40px 70px -34px rgba(60,30,10,.6); }
.pillar-art { aspect-ratio: 4/3; overflow: hidden; }
.pillar-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pillar:hover .pillar-art img { transform: scale(1.05); }
.pillar-plaque { position: relative; margin: -26px 22px 0; display: inline-flex; align-items: center; gap: 12px; background: var(--sign); color: var(--cream); padding: 9px 18px 9px 10px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 4px var(--brass), 0 10px 20px -8px rgba(0,0,0,.4); font-size: 17px; text-transform: uppercase; letter-spacing: .08em; }
.pillar-body { padding: 18px 28px 32px; }
.pillar h3 { font: 900 clamp(24px, 2.2vw, 30px)/1.08 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; margin-bottom: 12px; }
.pillar p { color: var(--ink-soft); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; max-width: 520px; } }

/* Clipping */
.clip-intro { max-width: 36ch; color: var(--ink-soft); font-size: 19px; line-height: 1.55; }
.clip-studio { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; }
.clip-studio figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700; color: var(--ink-soft); font-size: 15px; }
.reel { position: relative; border-radius: 26px; overflow: hidden; background: var(--night); box-shadow: 0 40px 80px -40px rgba(12,17,26,.6); border: 8px solid #fff; }
.reel-video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.reel-tag, .phone-tag { position: absolute; left: 16px; top: 14px; background: rgba(12,17,26,.72); color: var(--cream); font: 800 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; pointer-events: none; }
.reel-tag::first-letter { color: var(--coral); }
.phone { position: relative; width: clamp(200px, 19vw, 270px); aspect-ratio: 9/16; border-radius: 34px; overflow: hidden; background: var(--night); border: 9px solid var(--ink); box-shadow: 0 40px 70px -34px rgba(12,17,26,.7), inset 0 0 0 1px rgba(255,255,255,.1); }
.phone video { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.phone::after { content: ''; position: absolute; top: 10px; left: 50%; width: 64px; height: 18px; margin-left: -32px; background: var(--ink); border-radius: 999px; }
.phone-tag { top: auto; bottom: 14px; left: 50%; transform: translateX(-50%); }
.clip-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.clip-list { background: #fff; border-radius: 24px; padding: 28px 30px 30px; box-shadow: 0 20px 44px -30px rgba(35,34,43,.4); }
.clip-list.soon { background: var(--ink); color: var(--cream); }
.clip-list h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 900 22px/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 18px; }
.clip-list ul { display: grid; gap: 12px; }
.clip-list li { position: relative; padding-left: 30px; }
.clip-list li::before { content: '✓'; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--teal); }
.clip-list.soon li { color: rgba(241,233,216,.85); }
.clip-list.soon li::before { content: '○'; color: var(--coral); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.share-row span { font: 800 13px/1 var(--body); padding: 9px 13px; border-radius: 999px; border: 1.5px dashed rgba(241,233,216,.35); color: rgba(241,233,216,.75); }
@media (max-width: 900px) { .clip-studio { grid-template-columns: 1fr; justify-items: center; } .frame-wide { width: 100%; } .clip-lists { grid-template-columns: 1fr; } .reel { border-width: 5px; border-radius: 20px; } }

/* Mountain Moments: the village's photo wall */
.moments-board { position: relative; margin-top: 80px; padding: 70px clamp(20px, 4vw, 54px) 58px; border-radius: 26px; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 2px, transparent 3px) 0 0 / 22px 22px, linear-gradient(135deg, #7A5334, #5E3F27); box-shadow: inset 0 0 0 10px #4A3120, inset 0 0 0 12px var(--brass), 0 40px 80px -40px rgba(40,20,10,.7); }
.moments-sign { position: absolute; top: -26px; left: 50%; transform: translateX(-50%) rotate(-1deg); display: grid; justify-items: center; gap: 3px; background: var(--sign); color: var(--cream); padding: 12px 34px 11px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 4px var(--brass), 0 12px 24px -10px rgba(0,0,0,.5); white-space: nowrap; }
.moments-sign .sign-text { font-size: clamp(20px, 2.4vw, 28px); }
.moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.polaroid { position: relative; background: #FBF8F1; padding: 14px 14px 20px; border-radius: 4px; box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 24px 40px -20px rgba(0,0,0,.6); transform: rotate(var(--tilt, 0deg)); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.polaroid:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 36px 50px -22px rgba(0,0,0,.7); z-index: 2; }
.tape { position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(242,233,210,.72); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.polaroid-shot { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #cfd8de; }
.polaroid video { width: 100%; height: 100%; object-fit: cover; }
.stamp { position: absolute; right: 10px; top: 10px; font: 700 15px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: #FF9A3C; letter-spacing: .06em; text-shadow: 0 0 6px rgba(255,120,40,.6); pointer-events: none; }
.polaroid figcaption { font: 700 25px/1.1 'Caveat', 'Bradley Hand', cursive; color: #2B2A33; padding: 14px 4px 0; text-align: center; }
@media (max-width: 900px) { .moments { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } .moments-board { padding-top: 64px; } }

/* The base-area trail sign, after the in-game boards */
.signpost { position: relative; justify-self: end; width: min(520px, 100%); padding: 0 34px 90px; }
.sp-roof { position: relative; height: 26px; margin: 0 -8px; background: linear-gradient(180deg, #F7F4EE 0 9px, #8A6645 9px, #6B4A2E); border-radius: 6px 6px 3px 3px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.4); z-index: 2; }
.sp-post { position: absolute; top: 18px; bottom: 0; width: 22px; background: linear-gradient(90deg, #4B321E, #7A5536 45%, #4B321E); border-radius: 3px; }
.sp-post.left { left: 44px; } .sp-post.right { right: 44px; }
.sp-boards { position: relative; display: grid; gap: 10px; padding-top: 12px; z-index: 1; }
.sp-board { display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, #1F4032, var(--sign-2)); color: #F4EFE3; padding: 12px 20px; border-radius: 4px; box-shadow: inset 0 0 0 3px #1B3328, inset 0 0 0 5px #B9A15C, 0 8px 16px -8px rgba(0,0,0,.5); font-size: clamp(20px, 2vw, 27px); }
.sp-board .sign-text { text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
.sp-head { justify-content: center; padding: 13px 20px; }
.sp-head .sign-text { letter-spacing: .14em; }
.sp-arrow { font: 900 26px/1 var(--body); width: 26px; text-align: center; }
.sp-sub { margin-left: auto; font: 600 11px/1 var(--sans-sign); letter-spacing: .18em; text-transform: uppercase; color: #C9B472; }
@media (max-width: 900px) { .signpost { justify-self: stretch; padding: 0 16px 70px; } .sp-post.left { left: 30px; } .sp-post.right { right: 30px; } }
@media (max-width: 420px) { .sp-sub { display: none; } }

/* Map image */
.map-frame img { display: block; image-rendering: auto; }
.map-board figcaption a { color: var(--cream); text-decoration-color: var(--brass); }
.map-board kbd { background: var(--cream); color: var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.4); }

/* Mountain report */
.report-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.report-intro { position: sticky; top: 110px; }
.report-intro > p:not(.label) { margin-top: 24px; font-size: 18px; max-width: 30ch; }
.report-intro .text-link { margin-top: 26px; color: var(--cream); }
.report { display: grid; grid-template-columns: 170px 1fr; background: var(--paper); color: var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.65); }
.report + .report { margin-top: 28px; }
.report-side { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; background: var(--pass-teal); color: var(--cream); padding: 28px 22px; }
.report-side::after { content: ''; position: absolute; top: 0; bottom: 0; right: -7px; width: 14px; background: radial-gradient(circle at 7px 7px, var(--paper) 5px, transparent 5.5px) 0 0 / 14px 22px repeat-y; }
.report-kicker { font: 700 12px/1.35 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.report-date { display: grid; }
.report-day { font: 900 68px/.9 var(--display); letter-spacing: -.04em; transform: skewX(-5deg); transform-origin: left bottom; }
.report-month { font: 800 13px/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; margin-top: 8px; color: rgba(241,233,216,.8); }
.report-main { padding: clamp(26px, 3.4vw, 42px); position: relative; }
/* A first-of-its-kind update wears a rubber stamp in the corner, like a pass punched on opening day. */
.report-stamp { position: absolute; top: 22px; right: 22px; transform: rotate(6deg); padding: 7px 12px 6px; border: 2.5px solid var(--coral); border-radius: 6px; color: var(--coral); font: 900 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px var(--coral); }
.report-stamp + .report-title { padding-right: 150px; }
@media (max-width: 620px) { .report-stamp { position: static; display: inline-block; margin-bottom: 14px; transform: rotate(-2deg); } .report-stamp + .report-title { padding-right: 0; } }
.report-title { font: 900 clamp(28px, 3.2vw, 40px)/1.05 var(--display); letter-spacing: -.03em; transform: skewX(-5deg); transform-origin: left bottom; }
.report-title a { text-decoration: none; }
.report-title a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; }
.report-summary { color: var(--ink-soft); margin: 12px 0 22px; font-size: 18px; }
.report-list { display: grid; gap: 0; }
.report-list li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 12px 0; border-top: 1px dashed rgba(35,34,43,.16); }
.report-n { font: 900 15px/1.5 var(--display); color: #B7701A; transform: skewX(-5deg); }
@media (max-width: 1000px) { .report-layout { grid-template-columns: 1fr; gap: 36px; } .report-intro { position: static; } }
@media (max-width: 620px) { .report { grid-template-columns: 1fr; } .report-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 18px; } .report-side::after { display: none; } .report-day { font-size: 44px; } .report-kicker { width: 100%; } }

/* Character screen */
.sky-night-soft { background: linear-gradient(180deg, #17213A 0%, #121A2B 100%); color: var(--cream); }
.gear { padding: clamp(90px, 10vw, 140px) 0 30px; }
.gear-inner { display: grid; grid-template-columns: 1.35fr .65fr; gap: 50px; align-items: center; }
.gear-shot img { width: 100%; border-radius: 22px; border: 6px solid rgba(241,233,216,.9); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); transform: rotate(-1deg); }
.gear-shot figcaption { margin-top: 18px; font-size: 14px; color: rgba(241,233,216,.6); }
.gear-copy .display { font-size: clamp(40px, 5vw, 70px); }
.gear-copy > p:not(.label) { margin-top: 22px; font-size: 18px; }
.gear-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.gear-chips li { font: 800 14px/1 var(--body); padding: 10px 14px; border-radius: 999px; background: rgba(241,233,216,.08); box-shadow: inset 0 0 0 1px rgba(241,233,216,.18); }
@media (max-width: 900px) { .gear-inner { grid-template-columns: 1fr; } }

/* Leaderboards */
.boards-section { padding: 80px 0 110px; }
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.boards-status { grid-column: 1 / -1; font-weight: 700; color: var(--ink-soft); padding: 40px 0; }
.lb { background: var(--paper); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(35,34,43,.5); }
.lb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--sign); color: var(--cream); padding: 16px 22px; box-shadow: inset 0 -3px 0 var(--brass); }
.lb-head .sign-text { font-size: 18px; text-transform: uppercase; letter-spacing: .08em; }
.lb-unit { font: 600 11px/1 var(--sans-sign); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.lb ol { padding: 8px 12px 14px; }
.lb li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.lb li + li { border-top: 1px solid rgba(35,34,43,.06); }
.lb-place { font: 900 17px/1 var(--display); color: var(--ink-soft); transform: skewX(-5deg); }
.lb-who { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font: 900 17px/1 var(--display); }
.lb li:first-child { background: var(--gold); }
.lb li:first-child .lb-place { color: var(--on-gold); }
.lb-empty { padding: 22px; color: var(--ink-soft); }

/* Credits */
.credit-list { display: grid; gap: 18px; margin-top: 50px; }
.credit { background: #fff; border-radius: 22px; padding: 28px 30px; box-shadow: 0 20px 44px -30px rgba(35,34,43,.4); }
.credit h2 { font: 900 26px/1.1 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; margin-bottom: 10px; }
.credit p { color: var(--ink-soft); margin-bottom: 14px; }
.credit-fonts { display: grid; gap: 6px; margin-bottom: 14px; }
.credit code { font-size: .9em; background: var(--cream); padding: 1px 6px; border-radius: 5px; }

@media (prefers-reduced-motion: reduce) { .pillar:hover, .polaroid:hover { transform: rotate(var(--tilt, 0deg)); } }

.signup { background: linear-gradient(180deg, #121A2B 0%, var(--night) 100%); }
.phone-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 14px 46px; background: linear-gradient(0deg, #0C111A 0 58%, rgba(12,17,26,0) 100%); color: #fff; text-align: center; font: 900 19px/1.1 var(--display); letter-spacing: -.01em; pointer-events: none; }
.phone-caption span { display: block; transform: skewX(-5deg); }
.phone-caption small { display: block; margin-top: 6px; font: 800 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

.page-hero .label { text-shadow: 0 1px 12px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.6); }
@media (max-width: 1000px) { .sky-dusk { background: linear-gradient(180deg, #F6C98C 0%, #E8735A 7%, #9A5468 22%, #5B4A78 45%, var(--dusk) 75%, #17213A 100%); } }

/* ---------- Sponsors ---------- */
.sponsor-band { padding: clamp(90px, 10vw, 140px) 0 20px; }
.sponsor-band-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.sponsor-band-foot .gear-chips { margin: 0; }

/* The three boards, drawn to scale on a painted slope */
.sp-scene { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 21/8; min-height: 300px; isolation: isolate; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); border: 6px solid rgba(241,233,216,.9); }
.sp-scene-art { position: absolute; inset: 0; z-index: -1; }
.sp-scene-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(1.05); }
.sp-scene-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,22,.1) 0%, rgba(20,14,22,.05) 50%, rgba(250,246,240,.95) 86%); }
.sp-scene-row { position: absolute; left: 0; right: 0; bottom: 8%; display: flex; justify-content: space-evenly; align-items: flex-end; padding: 0 4%; }
.sp-scene-item { display: grid; justify-items: center; gap: 12px; }
.sp-scene-tag { font: 800 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.9); padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.sp-scene-tag b { color: #B7701A; margin-right: 4px; }
.sp-scene .mk { --u: clamp(9px, 1.4vw, 20px); }

.mk { --u: 14px; position: relative; display: grid; justify-items: center; }
.mk-face { display: grid; place-items: center; text-align: center; overflow: hidden; }
.mk-face span { font: 900 calc(var(--u) * .9)/1 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); text-transform: lowercase; }
/* Trail Marker: a plate on a post, 2 x 1 */
.mk-marker .mk-face { width: calc(var(--u) * 4); height: calc(var(--u) * 2); background: #F4EFE3; color: var(--sign); border-radius: 3px; box-shadow: inset 0 0 0 calc(var(--u) * .18) var(--sign), inset 0 0 0 calc(var(--u) * .28) #B9A15C, 0 6px 10px -6px rgba(0,0,0,.5); }
.mk-marker .mk-face span { font-size: calc(var(--u) * .8); }
.mk-post { width: calc(var(--u) * .45); height: calc(var(--u) * 3); background: linear-gradient(90deg, #4B321E, #7A5536 45%, #4B321E); }
/* Village Banner: vinyl between two poles, 5 x 1.5 */
.mk-banner { grid-template-columns: auto; padding: 0 calc(var(--u) * .5); }
.mk-banner .mk-face { width: calc(var(--u) * 10); height: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2.2); background: var(--gold); color: var(--on-gold); border-radius: 2px; box-shadow: 0 8px 14px -8px rgba(0,0,0,.5); background-image: radial-gradient(circle, rgba(0,0,0,.35) 0 2px, transparent 2.5px); background-size: calc(var(--u) * 2) calc(var(--u) * 2.72); background-position: calc(var(--u) * .3) calc(var(--u) * .2); }
.mk-banner .mk-face span { font-size: calc(var(--u) * 1.1); background: var(--gold); padding: 0 .3em; }
.mk-pole { position: absolute; bottom: 0; width: calc(var(--u) * .3); height: calc(var(--u) * 5.6); background: linear-gradient(90deg, #8E8E96, #D8D8DE 50%, #8E8E96); border-radius: 2px; }
.mk-pole.l { left: 0; } .mk-pole.r { right: 0; }
/* Summit Billboard: a framed board on legs with snow on top, 10 x 5 */
.mk-billboard .mk-face { position: relative; z-index: 1; width: calc(var(--u) * 20); height: calc(var(--u) * 10); background: linear-gradient(135deg, #1B2A48, var(--night)); color: var(--cream); border-radius: 4px; box-shadow: inset 0 0 0 calc(var(--u) * .35) #5E3F27, inset 0 0 0 calc(var(--u) * .55) var(--brass), 0 14px 24px -12px rgba(0,0,0,.6); }
.mk-billboard .mk-face span { font-size: calc(var(--u) * 1.9); }
.mk-billboard .mk-face span::first-letter { color: var(--gold); }
.mk-cap { position: absolute; top: calc(var(--u) * -.45); left: calc(var(--u) * -.3); right: calc(var(--u) * -.3); height: calc(var(--u) * .9); background: #FAFAF7; border-radius: 999px 999px 6px 6px; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.mk-leg { position: relative; width: calc(var(--u) * .7); height: calc(var(--u) * 2.4); background: linear-gradient(90deg, #4B321E, #7A5536 45%, #4B321E); }
.mk-billboard { grid-template-columns: 1fr 1fr; }
.mk-billboard .mk-face, .mk-billboard .mk-cap { grid-column: 1 / -1; }
.mk-leg.l { justify-self: start; margin-left: 18%; } .mk-leg.r { justify-self: end; margin-right: 18%; }
@media (max-width: 700px) { .sp-scene { aspect-ratio: auto; min-height: 260px; } .sp-scene .mk { --u: 7px; } .sp-scene-tag { font-size: 10px; } }

/* Why sponsor */
.sponsor-why { padding: 90px 0 40px; }
.why-grid { margin-top: 0; }
.why { background: #fff; border-radius: 24px; padding: 28px 28px 30px; box-shadow: 0 20px 44px -30px rgba(35,34,43,.4); }
.why .tile { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 0 0 4px var(--sign); margin-bottom: 20px; }
.why h3 { font: 900 24px/1.1 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; margin-bottom: 10px; }
.why p { color: var(--ink-soft); }

/* Packages */
#packages { padding: 90px 0 120px; }
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; align-items: stretch; }
.package { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #fff; border-radius: 26px; padding: 26px 28px 30px; box-shadow: 0 30px 60px -36px rgba(35,34,43,.5); }
.package.featured { background: var(--ink); color: var(--cream); transform: translateY(-10px); }
.package-flag { position: absolute; top: -14px; right: 24px; background: var(--coral); color: #fff; font: 800 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; }
.package-mock { width: 100%; height: 170px; display: grid; place-items: end center; background: linear-gradient(180deg, #DCE8F0, #F3F6F7 70%, #fff); border-radius: 16px; padding-bottom: 14px; margin-bottom: 8px; overflow: hidden; }
.package.featured .package-mock { background: linear-gradient(180deg, #2E4A7A, #1B2A48 70%, #151D2C); }
.package-mock .mk-marker { --u: 22px; } .package-mock .mk-banner { --u: 11px; } .package-mock .mk-billboard { --u: 6.2px; }
.package h3 { font: 900 30px/1 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; }
.package-price { font-size: 15px; color: var(--ink-soft); }
.package-price b { font: 900 38px/1 var(--display); color: var(--ink); letter-spacing: -.03em; margin-right: 4px; }
.package.featured .package-price, .package.featured .package-where, .package.featured .package-spec dt { color: rgba(241,233,216,.75); }
.package.featured .package-price b { color: var(--gold); }
.package-where { color: var(--ink-soft); }
.package-spec { display: grid; gap: 8px; width: 100%; padding: 14px 0; margin: 4px 0; border-block: 2px dashed rgba(127,127,140,.25); }
.package-spec div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.package-spec dt { font: 800 11px/1.5 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.package-spec dd { font-weight: 800; text-align: right; }
.package-perks { display: grid; gap: 8px; margin-bottom: 18px; flex: 1; }
.package-perks li { position: relative; padding-left: 26px; }
.package-perks li::before { content: '✓'; position: absolute; left: 0; font-weight: 900; color: var(--teal); }
.package.featured .package-perks li::before { color: var(--gold); }
@media (max-width: 1000px) { .packages { grid-template-columns: 1fr; max-width: 520px; } .package.featured { transform: none; } }

/* How it works */
.sponsor-how { padding: 110px 0 !important; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps li { background: rgba(255,255,255,.85); border-radius: 22px; padding: 24px 24px 26px; }
.steps .ladder-step { display: block; margin-bottom: 14px; }
.steps h3 { font: 900 21px/1.15 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; margin-bottom: 8px; }
.steps p { color: var(--ink-soft); font-size: 15px; }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 50px; }
.faq details { background: #fff; border-radius: 18px; padding: 18px 22px; box-shadow: 0 14px 30px -24px rgba(35,34,43,.4); }
.faq summary { cursor: pointer; font: 900 18px/1.3 var(--display); letter-spacing: -.01em; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: '+'; color: #B7701A; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin-top: 10px; color: var(--ink-soft); }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } .faq { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Application form, as a sponsor pass */
.sponsor-form { max-width: 480px; margin: 0; }
.form-grid { grid-template-columns: 1fr 1fr; gap: 12px 14px !important; }
.form-grid label { display: grid; gap: 6px; font: 800 11px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); width: 100%; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { font: 600 15px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); background: #fff; border: 1.5px solid rgba(11,58,56,.25); border-radius: 10px; padding: 10px 12px; width: 100%; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--pass-teal); }
.form-grid .btn { width: 100%; }
@media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } }
.js .reveal.sponsor-form.in { transform: rotate(1.5deg); }
.signup-copy a:not(.btn) { color: var(--gold); }

/* ---------- Devices ---------- */
.laptop { position: relative; width: 100%; filter: drop-shadow(0 40px 50px rgba(20,14,30,.35)); }
.laptop-lid { position: relative; background: linear-gradient(180deg, #2A2B30, #111215); border-radius: 22px 22px 8px 8px; padding: 14px 14px 18px; box-shadow: inset 0 0 0 1.5px #5B5D66, inset 0 0 0 3px #16171A; }
.laptop-lid::before { content: ''; position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2F3440; box-shadow: inset 0 0 0 1.5px #111; }
.browser { border-radius: 9px; overflow: hidden; background: #fff; }
.browser-bar { display: flex; align-items: center; gap: 14px; padding: 9px 12px; background: linear-gradient(180deg, #F2F2F4, #E4E4E8); border-bottom: 1px solid #D2D2D8; }
.browser-dots { display: flex; gap: 6px; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
.browser-dots i:nth-child(2) { background: #FEBC2E; } .browser-dots i:nth-child(3) { background: #28C840; }
.browser-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 8px; padding: 5px 12px; font: 600 13px/1.2 system-ui, sans-serif; color: #3C3C43; box-shadow: inset 0 0 0 1px #D7D7DD; }
.browser-url svg { width: 10px; height: 12px; color: #6E6E78; flex: none; }
.browser-view { position: relative; aspect-ratio: 16/10; background: var(--night); }
.browser-view video, .browser-view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.laptop-base { position: relative; height: 18px; margin: 0 -7%; background: linear-gradient(180deg, #D9DADF 0%, #B4B6BD 55%, #8E9098 100%); border-radius: 2px 2px 16px 16px; box-shadow: inset 0 1px 0 #F4F4F6; }
.laptop-base span { position: absolute; top: 0; left: 50%; width: 16%; height: 7px; transform: translateX(-50%); background: linear-gradient(180deg, #9FA1A8, #C2C4CA); border-radius: 0 0 9px 9px; }
@media (max-width: 600px) { .laptop-lid { padding: 8px 8px 11px; border-radius: 14px 14px 6px 6px; } .browser-bar { padding: 6px 8px; gap: 8px; } .browser-dots i { width: 8px; height: 8px; } .browser-url { font-size: 11px; padding: 4px 8px; } .laptop-base { height: 11px; } }

/* A more real phone */
.phone { width: clamp(210px, 19vw, 280px); border-radius: 44px; border: 0; padding: 10px; background: linear-gradient(145deg, #6B6E78, #2A2C33 30%, #1A1B20 70%, #4B4E57); box-shadow: 0 40px 70px -30px rgba(12,17,26,.7), inset 0 0 0 1.5px #8A8D97, inset 0 0 0 3px #111; }
.phone video { border-radius: 34px; }
.phone::before { content: ''; position: absolute; inset: 10px; border-radius: 34px; background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 28%); pointer-events: none; z-index: 2; }
.phone::after { top: 20px; width: 78px; height: 22px; margin-left: -39px; background: #000; z-index: 3; }
.frame-tall { position: relative; }
.frame-tall .phone-caption { left: 10px; right: 10px; bottom: 10px; border-radius: 0 0 34px 34px; }
.phone-tag { bottom: 22px; z-index: 3; }
.frame-tall .phone { position: relative; }
.frame-tall .phone > .side { display: none; }

/* One link */
.one-link { padding: clamp(90px, 10vw, 140px) 0 20px; }
.one-link-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.one-link-copy .play-group .requirements { color: var(--ink-soft); }
.gear-chips.light li { background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(35,34,43,.06), inset 0 0 0 1px rgba(35,34,43,.08); }
.one-link-device figcaption { margin-top: 26px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 1000px) { .one-link-inner { grid-template-columns: 1fr; } .one-link-device { order: -1; } }

/* Share bar */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; padding-top: 22px; border-top: 2px dashed rgba(35,34,43,.12); }
.share-label { width: 100%; font: 800 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #B7701A; margin-bottom: 4px; }
.share-btn { font: 800 14px/1 var(--body); padding: 11px 15px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 rgba(35,34,43,.08), inset 0 0 0 1.5px rgba(35,34,43,.12); transition: background .2s, transform .2s var(--ease); }
.share-btn:hover { background: var(--cream); transform: translateY(-2px); }
.share-native, [data-copy] { background: var(--ink); color: var(--cream); box-shadow: none; }
.share-native:hover, [data-copy]:hover { background: #3a3845; }
.share-btn[hidden] { display: none; }
.share-done { font-size: 14px; font-weight: 800; color: var(--teal); }
.challenge { margin: 44px 0 10px; background: #fff; border-radius: 24px; padding: 28px 30px; box-shadow: 0 20px 44px -30px rgba(35,34,43,.4); }
.challenge-title { font: 900 28px/1.1 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; margin-bottom: 6px; }
.challenge p { color: var(--ink-soft); }
.gear-shot .laptop { transform: rotate(-1deg); }
.gear-shot .browser-view { aspect-ratio: 2000/1077; }

/* ---------- Social ---------- */
.social { padding: clamp(90px, 10vw, 140px) 0; }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.social-hero { position: relative; border-radius: 28px; overflow: hidden; min-height: 460px; box-shadow: 0 40px 80px -40px rgba(12,17,26,.6); border: 8px solid #fff; }
.social-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.social-hero figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 8px; padding: 90px 28px 26px; background: linear-gradient(0deg, rgba(20,14,22,.85), rgba(20,14,22,0)); color: var(--cream); }
.social-hero-title { font: 900 clamp(28px, 3vw, 40px)/1 var(--display); letter-spacing: -.03em; transform: skewX(-5deg); transform-origin: left bottom; }
.social-hero-sub { font-weight: 700; opacity: .85; }
.social-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.social-list li { background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: 0 16px 36px -28px rgba(35,34,43,.45); }
.social-list h3 { font: 900 19px/1.15 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; margin-bottom: 6px; }
.social-list p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.prox { display: flex; align-items: center; gap: 28px; margin-top: 26px; background: var(--ink); color: var(--cream); border-radius: 24px; padding: 26px 30px; }
.prox h3 { font: 900 26px/1.1 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; margin: 10px 0 6px; }
.prox p { color: rgba(241,233,216,.8); max-width: 60ch; }
.prox-wave { display: flex; align-items: center; gap: 6px; height: 64px; flex: none; }
.prox-wave i { width: 8px; border-radius: 4px; background: var(--coral); animation: wave 1.4s ease-in-out infinite; }
.prox-wave i:nth-child(1) { height: 20px; } .prox-wave i:nth-child(2) { height: 44px; animation-delay: .15s; } .prox-wave i:nth-child(3) { height: 62px; animation-delay: .3s; } .prox-wave i:nth-child(4) { height: 40px; animation-delay: .45s; } .prox-wave i:nth-child(5) { height: 24px; animation-delay: .6s; }
@keyframes wave { 50% { transform: scaleY(.45); } }
@media (max-width: 1000px) { .social-grid { grid-template-columns: 1fr; } .social-hero { min-height: 360px; } }
@media (max-width: 560px) { .social-list { grid-template-columns: 1fr; } .prox { flex-direction: column; align-items: flex-start; gap: 14px; } }
.one-link .display { font-size: clamp(44px, 6vw, 88px); }
.gear-shot .laptop img { border: 0; border-radius: 0; transform: none; box-shadow: none; }
.discord-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; background: #5865F2; color: #fff; border-radius: 24px; padding: 24px 30px; box-shadow: 0 30px 60px -36px rgba(88,101,242,.8); }
.discord-cta h3 { font: 900 26px/1.1 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; margin-bottom: 6px; }
.discord-cta p { opacity: .9; }

body.at-top .brand img { filter: drop-shadow(0 1px 8px rgba(20,14,22,.55)); }
/* The laptop base overhangs its lid; keep that inside the page on narrow screens. */
.one-link, .gear { overflow-x: clip; }
@media (max-width: 600px) { .laptop-base { margin: 0 -3%; } }
/* Leaderboards: open places until the live data fills them. */
.boards-status { padding: 0 0 18px !important; }
.lb li.lb-open .lb-who, .lb li.lb-open .lb-val { color: rgba(35,34,43,.32); font-weight: 700; }
.lb li.lb-open:first-child { background: rgba(242,169,59,.25); }
.lb li.lb-filled { animation: lb-in .45s var(--ease) both; }
@keyframes lb-in { from { opacity: 0; transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { .lb li.lb-filled { animation: none; } }
/* "join N riders on sugarpine": holds its line from the start so nothing shifts when it appears. */
.riders { display: flex; align-items: center; gap: 8px; min-height: 18px; font: 700 13px/1.2 var(--body); letter-spacing: .02em; color: rgba(241,233,216,.9); visibility: hidden; opacity: 0; transition: opacity .6s ease; }
.riders.is-live { visibility: visible; opacity: 1; }
.riders b { font: 900 16px/1 var(--display); color: var(--gold); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.riders i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); border-radius: 1px; flex: none; }
.one-link .riders, .sky-morning .riders, .sky-noon .riders { color: var(--ink-soft); }
.one-link .riders b, .sky-morning .riders b { color: #B7701A; }
.riders em { font-style: normal; }
/* The band is tilted 1.2°, so each end sits tan(1.2°) × half the width (1.05vw) off its box.
   Pull it up by exactly that so the low left end still meets the painting, and keep the band at
   least twice that tall so the high right end still covers the painting's bottom edge. */
.ticker { margin-top: calc(-1.05vw - 3px); }
.ticker-track { padding: max(15px, calc(1.05vw - 4px)) 0; }
.hero-next { bottom: calc(1.05vw + 14px); }
/* Phones: join the Discord, send the game link to a computer. */
.send-link { all: unset; cursor: pointer; font-weight: 800; color: var(--gold); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sky-morning .send-link, .one-link .send-link { color: #8F5610; }
.send-link:focus-visible, .send-link-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.send-link-btn { background: none; border: 0; border-bottom: 2px solid var(--gold); padding: 0 0 2px; cursor: pointer; font: inherit; font-weight: 800; color: var(--ink); }
.btn-discord { --bg: #5865F2; --fg: #fff; box-shadow: 0 5px 0 #3C45A5, 0 14px 30px rgba(88,101,242,.35); }
.btn-discord:hover { background: #6D78F5; box-shadow: 0 7px 0 #3C45A5, 0 18px 36px rgba(88,101,242,.45); }
.btn-discord > span::after { content: '→'; }
.follow { margin-top: 26px; font-size: 14px; font-weight: 700; color: rgba(241,233,216,.7); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.follow-links { display: inline-flex; gap: 10px; align-items: center; }
.follow-links a { color: var(--cream); text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---------- Creators ---------- */
.creators-why { padding: 80px 0 60px; }
.creator-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.creator-perk { position: relative; background: #fff; border-radius: 22px; padding: 24px 24px 26px; box-shadow: 0 20px 44px -30px rgba(35,34,43,.4); }
.creator-perk.is-custom { background: var(--ink); color: var(--cream); }
.creator-perk.is-custom p { color: rgba(241,233,216,.8); }
.creator-perk.is-custom .pill { margin-top: 14px; }
.creator-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--sign); box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3.5px var(--brass); margin-bottom: 16px; }
.creator-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--cream); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.creator-badge { position: absolute; top: 30px; right: 24px; font: 900 11px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #F1E9D8; background: #0F6B64; padding: 4px 9px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(79,216,196,.6); }
.creator-perk h3 { font: 900 22px/1.1 var(--display); letter-spacing: -.02em; transform: skewX(-5deg); transform-origin: left bottom; margin-bottom: 8px; }
.creator-perk:first-child h3 { color: #0F6B64; }
.creator-perk p { color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 1000px) { .creator-perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .creator-perks { grid-template-columns: 1fr; } .creator-perk.is-custom { grid-column: auto; } }
.creators-how { padding: 80px 0 110px; }
.form-checks { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.form-checks legend { font: 800 11px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.form-grid .check { display: flex; align-items: center; gap: 10px; font: 700 14px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.form-grid .check input { width: 18px; height: 18px; accent-color: var(--pass-teal); padding: 0; }
.creator-band { padding: 20px 0 90px; }
.cb { position: relative; display: grid; grid-template-columns: .9fr 1.35fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: 30px; overflow: hidden; isolation: isolate; color: var(--cream); background: radial-gradient(90% 120% at 100% 0%, rgba(79,216,196,.28), rgba(79,216,196,0) 55%), radial-gradient(70% 90% at 0% 100%, rgba(242,169,59,.18), rgba(242,169,59,0) 60%), linear-gradient(135deg, #0F4A47, #0B3A38 60%, #082C2B); box-shadow: 0 40px 80px -40px rgba(11,58,56,.85), inset 0 0 0 1px rgba(79,216,196,.25); }
.cb::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(1.2px 1.2px at 12% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 34% 70%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 58% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 80% 82%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 92% 40%, #fff 50%, transparent 51%); background-size: 380px 300px; }
.cb .label { color: #4FD8C4; }
.cb .display { font-size: clamp(36px, 3.7vw, 56px); }
.cb .display .ln { white-space: nowrap; }
.cb .lead { color: rgba(241,233,216,.86); max-width: 38ch; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.cb-chips li { display: inline-flex; align-items: center; gap: 8px; font: 800 13.5px/1 var(--body); padding: 9px 13px 9px 10px; border-radius: 999px; background: rgba(241,233,216,.08); box-shadow: inset 0 0 0 1px rgba(79,216,196,.35); }
.cb-chips svg { width: 17px; height: 17px; fill: none; stroke: #4FD8C4; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cb-btn { --bg: var(--gold); --fg: var(--on-gold); white-space: nowrap; }
@media (max-width: 420px) { .cb-btn { font-size: 16px; padding: 0 20px; } }
.cb-btn > span::after { content: '→'; }
.cb-btn:hover { background: var(--gold-hi); color: var(--on-gold); }
.cb-stream { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 196px; border-radius: 18px; overflow: hidden; background: #0C111A; box-shadow: 0 30px 60px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(241,233,216,.12); transform: rotate(1.2deg); }
.cb-screen { position: relative; min-height: 100%; aspect-ratio: 16/9; background: #0C111A; }
@media (min-width: 561px) { .cb-screen { aspect-ratio: auto; } .cb-screen video { position: absolute; inset: 0; } }
.cb-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-live { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; font: 900 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: #E0344B; padding: 6px 9px; border-radius: 6px; }
.cb-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: cb-blink 1.4s ease-in-out infinite; }
@keyframes cb-blink { 50% { opacity: .3; } }
.cb-tag { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font: 800 14px/1 var(--body); color: #4FD8C4; background: rgba(12,17,26,.72); padding: 7px 10px 7px 12px; border-radius: 999px; white-space: nowrap; }
.cb-tag b { font: 900 10px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #F1E9D8; background: #0F6B64; padding: 3px 6px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(79,216,196,.6); }
.cb-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; background: #11192A; border-left: 1px solid rgba(241,233,216,.08); font-size: 12.5px; line-height: 1.35; color: rgba(241,233,216,.85); }
.cb-chat p { margin: 0; }
.cb-chat b { color: #4FD8C4; font-weight: 800; margin-right: 4px; }
.cb-chat p:nth-of-type(3) b { color: var(--gold); }
.cb-chat p:nth-of-type(4) b { color: var(--coral); }
.cb-chat-head { font: 800 10px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: rgba(241,233,216,.5); margin-bottom: auto !important; }
.cb-chat-link { padding: 7px 8px; border-radius: 8px; background: rgba(242,169,59,.14); box-shadow: inset 0 0 0 1px rgba(242,169,59,.4); overflow-wrap: normal; }
.cb-chat-link b { color: var(--gold) !important; }
@media (max-width: 980px) { .cb { grid-template-columns: 1fr; } .cb-stream { transform: none; } }
@media (max-width: 560px) { .cb-stream { grid-template-columns: 1fr; } .cb-chat { border-left: 0; border-top: 1px solid rgba(241,233,216,.08); } .cb-chat-head { margin-bottom: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .cb-live i { animation: none; } }
.send-link-btn { text-align: left; justify-content: flex-start; gap: 8px; line-height: 1.35; }
.cb-soon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -14px 0 28px; font: 700 14px/1.35 var(--body); color: rgba(241,233,216,.9); }
.cb-soon svg { width: 17px; height: 17px; fill: none; stroke: var(--coral); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cb-soon span:last-child { flex: 1; min-width: 200px; }
.creator-perk .pill-coral { margin-top: 14px; }