@font-face { font-family: 'Overpass'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(/assets/fonts/overpass-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Winterstoke next-gen. Ross's poster system (Overpass, his palettes, his traced lockup and drawings),
   told as one story: the mountain becomes a line, the line becomes the kit, the kit becomes the season. */
:root {
  --cream: #F3E9DA; --esp: #3B2A22; --rust: #A8481F;
  --ice: #F4F6F8; --navy: #2A4057; --slate: #3665A8;
  --coral: #EF7B6C; --slate-ink: #25313A;
  --esp-d: #4A2C21; --cream-2: #F6EDE2; --apricot: #F2B880;
  --ink: var(--esp); --bg: var(--cream);
  --gutter: clamp(16px, 4vw, 56px);
  --top-h: 60px;
  --font: "Overpass", system-ui, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-plant: cubic-bezier(.34, 1.5, .64, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 60px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 600 17px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
p, li { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--ink); color: var(--bg); padding: 10px 14px; font-weight: 800; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* lockup layers */
.lk { width: 100%; height: auto; overflow: visible; }
.lk__word, .lk__box { fill: var(--rust); transition: fill .45s var(--ease-out); }
.lk__digits { fill: var(--cream); transition: fill .45s var(--ease-out); }
.lk__poles { fill: var(--esp); }
.lk__roll { transition: transform .6s var(--ease-out); }
.lk[data-year="27"] .lk__roll { transform: translateY(var(--lk-roll)); }
.lk[data-year="27"] .lk__box { fill: var(--esp-d); }
.lk[data-year="27"] .lk__digits { fill: var(--apricot); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: 16px 22px 13px;
  background: var(--rust); color: var(--cream); border: 2px solid var(--rust);
  font: 900 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -4px 0 rgba(40, 18, 8, .28); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .2s;
}
.btn .ar { width: 15px; height: 15px; margin-top: -3px; transition: transform .3s var(--ease-out); }
.btn:hover .ar { transform: translateX(3px); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(40, 18, 8, .28); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.btn--line:hover { background: var(--ink); color: var(--cream); }
.btn--line:hover .ar { transform: translateY(3px); }

/* ---------- top bar: slim, frosted, over the picture ---------- */
.top {
  position: fixed; z-index: 100; inset: 0 0 auto; height: var(--top-h);
  display: flex; align-items: center; gap: 24px; padding: 0 0 0 var(--gutter);
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--esp) 18%, transparent);
}
.top__mark { width: 236px; flex: none; }
.top__mark .lk { display: block; }
.top__links { display: flex; height: 100%; margin-left: auto; }
.top__links a {
  display: grid; align-content: center; padding: 0 20px; height: 100%; text-decoration: none;
  font-size: 12.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  border-left: 1px solid color-mix(in srgb, var(--esp) 18%, transparent);
  transition: background-color .2s, color .2s;
}
.top__links a span { font-size: 10.5px; letter-spacing: .14em; color: var(--rust); }
.top__ev--cool:hover { background: var(--navy); color: var(--ice); }
.top__ev--coral:hover { background: var(--coral); color: var(--slate-ink); }
.top__ev--dark:hover { background: var(--esp-d); color: var(--cream-2); }
.top__links a:hover span { color: inherit; }
.top__links a:last-child:hover { background: var(--esp); color: var(--cream); }
.top__cta { display: grid; place-content: center; height: 100%; padding: 0 24px; background: var(--rust); color: var(--cream); text-decoration: none; font-size: 12.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.top__cta:hover { background: var(--esp); }

/* ---------- the opening: photo turns to ink (the reel's move), pinned for half a screen ---------- */
.open { --p: 0; position: relative; height: 185svh; overflow-x: clip; }
/* two layers: the photo stage sits under the trail; the words + buttons ride above everything on their own sticky layer */
.open__ui { position: sticky; top: 0; z-index: 1; height: 100svh; margin-top: -100svh; pointer-events: none; }
.open__ui a, .open__ui button { pointer-events: auto; }
.open__stage { position: sticky; top: 0; z-index: -2; height: 100svh; overflow: hidden; background: var(--cream); }
/* photo and ink share one frame (the photo's own aspect), cropped around a focus point, so they always register */
.open__scene {
  --ar: 1.7778; --zoom: 1; --fx: .5; --fy: .5; --ty: 50svh;
  --sw: max(100vw, calc(100svh * var(--ar) * var(--zoom)));
  --sh: calc(var(--sw) / var(--ar));
  position: absolute; width: var(--sw); height: var(--sh);
  left: clamp(calc(100vw - var(--sw)), calc(50vw - var(--sw) * var(--fx)), 0px);
  top: clamp(calc(100svh - var(--sh)), calc(var(--ty) - var(--sh) * var(--fy)), 0px);
}
.open__photo, .open__ink, .open__ink svg, .open__sketch { position: absolute; inset: 0; width: 100%; height: 100%; }

/* three stages: photo fades (0-.55), pen strokes draw over it (.1-.6), the finished drawing settles in as the strokes lift (.5-.85) */
.open__sketch { object-fit: fill; opacity: clamp(0, calc((var(--p) - .5) * 3.2), 1); }
.open__ink { opacity: clamp(0, calc(1 - (var(--p) - .62) * 4), 1); }
.open__wash { position: absolute; inset: auto 0 0; height: 46%; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--cream) 30%, transparent); opacity: calc(var(--p) * 1.1); }
/* opacity only: a filter recomputed on a 2560px photo every scroll frame was dropping tiles in Chrome */
.open__photo { object-fit: fill; opacity: calc(1 - var(--p) * 1.8); }
/* the pen drawing draws itself as you scroll: stroke i starts at p = i/2 and is done by p = (i+1)/2 */
.pen path {
  fill: none; stroke: var(--esp); stroke-width: 1.8px; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--p) * 4 - .4 - var(--i) * 1.4)), 1);
}
.open__mark::before { content: ""; position: absolute; inset: -18% -10%; z-index: -1; background: radial-gradient(closest-side, var(--cream) 55%, transparent); opacity: calc(var(--p) * 1); }
.open__mark {
  position: absolute; z-index: 2; right: var(--gutter); top: calc(var(--top-h) + 4.5vh);
  width: min(46vw, 700px);
}
.open__foot {
  position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(24px, 5vh, 48px);
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dates act" "line act"; align-items: end; gap: 8px 32px;
}
.open__dates { grid-area: dates; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em; font-size: clamp(24px, 2.7vw, 40px); font-weight: 900; line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.open__dates i { font-style: normal; color: var(--rust); }
.open__line { grid-area: line; white-space: nowrap; font-size: clamp(15px, 1.15vw, 18px); font-weight: 700; }
.open__act { grid-area: act; justify-self: end; align-self: end; display: flex; gap: 12px; margin-bottom: -2px; }
.open__line { line-height: 1.25; }
.open__by { grid-area: by; display: inline-flex; align-items: center; gap: 12px; justify-self: start; margin-bottom: 10px; color: var(--esp); text-decoration: none; }
.open__by span { font-size: 11.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.open__by .logo--altus { --h: 40px; transition: color .2s; }
.open__by:hover .logo--altus { color: var(--rust); }
.open__by--top { display: none; }

@keyframes plant { from { transform: translateY(-8%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- the trail: one dotted ski track from the hero to the finale ---------- */
/* it runs BEHIND the words but above each section's colour: grounds live on ::before at z -2 inside .run */
.run { position: relative; z-index: 0; overflow-x: clip; }
.trail { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: -1; overflow: visible; }
.beat, .guides { background: none !important; }
.beat::before, .guides::before, .foot::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ground-bg); }
.beat--cool { --ground-bg: linear-gradient(180deg, var(--cream) 0, var(--ice) min(32vh, 300px)); } .beat--warm { --ground-bg: var(--cream); } .beat--coral { --ground-bg: var(--coral); }
.beat--dark { --ground-bg: var(--esp-d); } .guides { --ground-bg: var(--cream); } .foot { --ground-bg: var(--esp); }
.trail__dots, .stack__dots { stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 11; }
/* the skier from the hero sketch rides the last stretch and skids to a stop */
.skier { position: absolute; left: 0; top: 0; z-index: 2; width: clamp(170px, 16vw, 250px); aspect-ratio: 640 / 378; background: url(/assets/img/skier-solid.webp) center / contain no-repeat; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; transform-origin: 50% 100%; }
.skier.is-on { opacity: 1; }
.skier.is-stopped { transition: opacity .3s, transform .55s cubic-bezier(.2, 1.35, .4, 1); }
.spray { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.spray i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: var(--apricot); opacity: 0; }
.spray.is-on i { animation: spray 1s var(--ease-out) forwards; }
@keyframes spray { 0% { transform: rotate(var(--a)) translateX(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(calc(var(--d) * 1.6)) translateY(14px); opacity: 0; } }

.kick { display: flex; gap: 14px; align-items: baseline; text-wrap: balance; font-size: 13px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.kick b { font-size: 13px; padding: 4px 8px 2px; border: 2px solid currentColor; border-radius: 99px; letter-spacing: .06em; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--slate { background: var(--slate); border-color: var(--slate); }

.beat { position: relative; padding: clamp(64px, 8.5vw, 124px) var(--gutter); overflow: clip; }

/* 01 · Nov 7 */
.beat--cool { background: var(--ice); color: var(--navy); }
.beat--cool .kick { color: var(--slate); }
.mini { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.mini__head { position: relative; }
.mini__title { display: grid; margin-top: 18px; font-size: clamp(64px, 9.2vw, 150px); font-weight: 900; line-height: .74; text-transform: uppercase; letter-spacing: -.005em; }
.outline { font-size: .5em; line-height: 1.02; color: transparent; -webkit-text-stroke: 2px var(--navy); letter-spacing: .02em; }
.badge {
  position: absolute; right: 4%; top: 30%; width: clamp(110px, 11vw, 160px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; background: var(--slate); color: var(--ice); text-transform: uppercase;
  transform: rotate(calc(-8deg - var(--sp, 0) * 40deg));
}
.badge b { font-size: clamp(32px, 3.6vw, 52px); font-weight: 900; line-height: .95; }
.badge i { font-style: normal; font-size: clamp(9px, .9vw, 12px); font-weight: 900; letter-spacing: .14em; }
.mini__pit { aspect-ratio: 731 / 1100; max-height: 640px; overflow: hidden; justify-self: end; width: 100%; }
.mini__pit img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--sp, 0) * .12)); }
.times { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 7vw, 96px); border-top: 3px solid var(--navy); }
.times li { display: grid; align-content: start; gap: 8px; padding: 28px 28px 0 0; }
.times li + li { padding-left: 28px; border-left: 1px solid color-mix(in srgb, var(--navy) 30%, transparent); }
.times__n { display: flex; align-items: flex-start; font-size: clamp(54px, 6.4vw, 104px); font-weight: 900; line-height: .9; letter-spacing: -.02em; }
.times__n sup { font-size: .26em; letter-spacing: .04em; margin: .14em .2em 0 .04em; }
.times__n i { width: .34em; height: .09em; background: var(--slate); margin: .42em .16em 0 .02em; }
.times__name { font-size: clamp(19px, 1.6vw, 25px); font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.times__what { font-size: 16px; }
.times em { font-style: normal; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.beat__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--navy) 30%, transparent); }
.beat__act p { font-size: 18px; } .beat__act a:not(.btn) { color: var(--slate); font-weight: 800; }

/* 02 · Nov 8 gear swap: tap the kit */
.beat--warm { background: var(--cream); }
.beat--warm .kick { color: var(--rust); }
.swap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 88px); align-items: center; }
.swap__copy { display: grid; gap: 22px; align-content: center; }
.swap__title { font-size: clamp(64px, 10vw, 164px); font-weight: 900; line-height: .84; text-transform: uppercase; }
.swap__lede { max-width: 30ch; font-size: clamp(19px, 1.5vw, 23px); font-weight: 700; line-height: 1.35; }
.swap__lede b { color: var(--rust); }
.swap__facts { display: flex; flex-wrap: wrap; gap: 8px 0; }
.swap__facts span { font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; padding-right: 18px; margin-right: 18px; border-right: 2px solid var(--rust); }
.swap__facts span:last-child { border: 0; }
.kit { position: relative; width: 100%; max-width: 600px; justify-self: center; container-type: inline-size; }
/* Ross's gear, piece by piece: each pens itself in (steady pen speed), then its crisp fill lands; pieces lift on hover */
@keyframes ink { to { stroke-dashoffset: 0; } }
.gear { display: block; width: 100%; height: auto; overflow: visible; }
.gear .ink { fill: var(--esp); } .gear .acc { fill: var(--rust); }
.it__by { font: 900 15px var(--font); letter-spacing: .14em; fill: var(--esp); }
.it__sponsor svg path { fill: var(--rust); }
.it__fill .lk__word, .it__fill .lk__box { fill: var(--rust); } .it__fill .lk__digits { fill: var(--cream); }
.it { cursor: pointer; transform-box: fill-box; transform-origin: 50% 60%; transition: transform .45s var(--ease-plant), filter .3s; }
.it__pen path { fill: none; stroke: var(--esp); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ink-ready .it__fill { opacity: 0; }
.ink-ready.is-inked .it__pen path { animation: ink var(--d) cubic-bezier(.45, .05, .35, 1) var(--t) forwards; }
.ink-ready.is-inked .it__fill { opacity: 1; transition: opacity .45s ease var(--t1); }
.ink-ready.is-inked .it__pen { opacity: 0; transition: opacity .4s ease calc(var(--t1) + .3s); }
.ink-ready .it { pointer-events: none; }
.ink-ready.is-inked .it { animation: live 0s linear var(--t1) forwards; }
@keyframes live { to { pointer-events: auto; } }
.it.is-hot { transform: translateY(-1.4%) rotate(-1.6deg) scale(1.035); filter: drop-shadow(0 10px 8px rgba(59, 42, 34, .16)); }
.spot { position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.spot__dot { position: absolute; inset: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.spot::before { content: ""; position: absolute; inset: 15px; pointer-events: none; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 0 color-mix(in srgb, var(--rust) 50%, transparent); animation: ping 2.4s var(--ease-out) infinite; animation-delay: calc(var(--n, 0) * .2s); opacity: 0; transition: opacity .4s; }
.kit.is-inked .spot::before { opacity: 1; transition: opacity .4s ease calc(var(--t1) + .1s); }
.ink-ready:not(.is-inked) .spot { pointer-events: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rust) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
/* the hang tag: rust card on a string, swings out from the piece of kit */
.tag {
  position: absolute; left: 50%; top: 32px; z-index: 3; width: max-content; max-width: 210px;
  display: grid; gap: 4px; padding: 16px 16px 12px 30px; text-align: left;
  background: var(--rust); color: var(--cream);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  transform-origin: 0 50%; transform: translate(-8px, -50%) rotate(-14deg) scale(.6); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease-plant), opacity .2s;
  filter: drop-shadow(0 6px 10px rgba(59, 42, 34, .25));
}
.tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--cream); }
.tag b { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.tag span { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.tag { color: var(--cream); text-decoration: none; cursor: pointer; } .tag:hover span .ar { transform: translateX(4px); } .tag .ar { transition: transform .3s var(--e-out); }
.tag .ar { width: 13px; height: 13px; margin-top: -2px; }
.spot:hover .tag, .spot:focus-within .tag, .spot.is-open .tag { opacity: 1; pointer-events: auto; transform: translate(-8px, -50%) rotate(-4deg); }
.spot.flip .tag { left: auto; right: 50%; transform-origin: 100% 50%; padding: 16px 30px 12px 16px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); transform: translate(8px, -50%) rotate(14deg) scale(.6); }
.spot.flip .tag::before { left: auto; right: 12px; }
.spot.flip:hover .tag, .spot.flip:focus-within .tag, .spot.flip.is-open .tag { transform: translate(8px, -50%) rotate(4deg); }

/* Skills Stack: coral. The one trail drops to the trailhead, climbs stops 1-4 to the summit, then skis off it */
.beat--coral { color: var(--slate-ink); }
.stack { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.stack__col { position: relative; }
.stack__pin { position: sticky; top: var(--top-h); height: calc(100svh - var(--top-h)); display: flex; align-items: center; justify-content: center; }
.stack__art { position: relative; z-index: 1; width: min(100%, calc((100svh - var(--top-h) - 150px) * 1.3)); text-align: center; }
.stack__trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.stack__dots { stroke: var(--slate-ink); }
.stack__arc { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: -15%; }
.stack__arc text { font: 900 132px var(--font); letter-spacing: .04em; text-transform: uppercase; fill: var(--slate-ink); }
.stack__mtn { position: relative; width: 100%; }
/* Ross's Skills Stack poster top, redrawn: the frame and rays draw, the date line writes on, SKILLS STACK drops in
   letter by letter, the arch draws, ridges run left to right, trees grow, marks pop, then the stops */
.scene { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.scene__lines { stroke: var(--slate-ink); }
.scene__lines path, .scene__lines circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.scene__fill { fill: var(--slate-ink); }
.scene .ltr, .scene .bit, .scene .num, .scene .fade { opacity: 0; }
.scene .wipe { clip-path: inset(-10% 100% -10% 0); }
.is-drawing .scene__lines path, .is-drawing .scene__lines circle { animation: ink var(--d) cubic-bezier(.45, .05, .35, 1) var(--t) forwards; }
.is-drawing .scene .ltr { animation: drop .6s var(--ease-plant) var(--t) forwards; }
.is-drawing .scene .bit { animation: twinkle .55s var(--ease-plant) var(--t) forwards; }
.is-drawing .scene .num { animation: twinkle .4s var(--ease-plant) var(--t) forwards; }
.is-drawing .scene .fade { animation: fadein .6s ease var(--t) forwards; }
.is-drawing .scene .wipe { animation: wipe .9s cubic-bezier(.65, 0, .35, 1) var(--t) forwards; }
@keyframes drop { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
@keyframes twinkle { from { opacity: 0; transform: scale(.2) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes wipe { to { clip-path: inset(-10% -2% -10% 0); } }
/* lit stop = a cream disc BEHIND Ross's own ring + numeral, so there's one outline, not two */
.stack__ring { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; background: var(--cream-2); transform: translate(-50%, -50%) scale(.3); opacity: 0; transition: transform .45s var(--ease-plant), opacity .2s; }
.stack__ring.is-on { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.stack__sub { margin-top: 26px; font-size: 13px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; line-height: 1.75; }
.stack__list { display: grid; padding: 20svh 0 30svh; }
.stack__list li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-content: center; min-height: 42svh; padding: clamp(28px, 4vw, 48px) 0; border-top: 2px solid var(--slate-ink); opacity: .4; transition: opacity .4s; }
.stack__list li:last-child { border-bottom: 2px solid var(--slate-ink); }
.stack__list li.is-on { opacity: 1; }
.num { width: 48px; height: 48px; border: 2.5px solid var(--slate-ink); border-radius: 50%; display: grid; place-content: center; padding-top: 3px; font-size: 20px; font-weight: 900; transition: background-color .3s, color .3s; }
.is-on .num { background: var(--slate-ink); color: var(--coral); }
.stack__list h3 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 900; line-height: 1; text-transform: uppercase; margin: 8px 0 12px; }
.stack__list li > div > p { line-height: 1.45; }
.stack__list .t { font-size: 13px; font-weight: 900; letter-spacing: .14em; }
.stack__list .by { margin-top: 14px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

/* 03 · January: the summit, the year rolls over */
.beat--dark { background: var(--esp-d); color: var(--cream-2); }
.beat--dark .kick { color: var(--apricot); }
.summit { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 28px; }
.summit__mark .lk__word, .summit__mark .lk__box { fill: var(--apricot); }
.summit__mark .lk__digits { fill: var(--esp-d); }
.summit__mark .lk__poles { fill: var(--cream-2); }
.summit__mark .lk[data-year="27"] .lk__box { fill: var(--apricot); }
.summit__mark .lk[data-year="27"] .lk__digits { fill: var(--esp-d); }
.summit__title { font-size: clamp(40px, 5vw, 76px); font-weight: 900; line-height: .9; text-transform: uppercase; color: var(--apricot); }
.summit__copy p { margin-top: 18px; font-size: 19px; max-width: 40ch; }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: clamp(48px, 6vw, 80px); background: color-mix(in srgb, var(--apricot) 35%, transparent); border: 2px solid color-mix(in srgb, var(--apricot) 35%, transparent); }
.board__day { display: grid; gap: 8px; padding: 22px; background: var(--esp-d); }
.board__day p { font-size: clamp(16px, 1.5vw, 22px); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.flap {
  display: block; padding: 10px 12px 7px; background: #3A2219; color: var(--apricot); border-radius: 3px;
  font-size: clamp(15px, 1.3vw, 19px); font-weight: 900; letter-spacing: .3em; text-align: center; position: relative;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3);
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .45); }
.flap.is-flipping { animation: flip .09s linear; }
@keyframes flip { 50% { transform: rotateX(80deg); } }
/* the January sign-up: a lift ticket, centred; the trail punches through its hole */
.ticket { --stub: 200px; position: relative; display: grid; grid-template-columns: 1fr var(--stub); width: min(100%, 840px); margin: clamp(56px, 7vw, 96px) auto 0; transform: rotate(-1.4deg); transition: transform .5s var(--ease-plant); filter: drop-shadow(0 22px 28px rgba(20, 10, 6, .35)); }
.ticket:hover, .ticket:focus-within { transform: rotate(0deg) translateY(-4px); }
.ticket::before, .ticket::after { content: ""; position: absolute; z-index: 2; right: calc(var(--stub) - 15px); width: 30px; height: 30px; border-radius: 50%; background: var(--esp-d); }
.ticket::before { top: -15px; } .ticket::after { bottom: -15px; }
.ticket__main { display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); background: var(--apricot); color: var(--esp-d); border-radius: 16px 0 0 16px; }
.ticket__kick { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 2px solid color-mix(in srgb, var(--esp-d) 25%, transparent); }
.ticket__title { white-space: nowrap; font-size: clamp(26px, 3vw, 44px); font-weight: 900; line-height: .95; text-transform: uppercase; }
.ticket__field { display: grid; gap: 4px; }
.ticket__field span { font-size: 11.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.ticket__field input { width: 100%; min-height: 48px; padding: 10px 0 6px; border: 0; border-bottom: 2.5px solid var(--esp-d); background: transparent; color: var(--esp-d); font: 800 clamp(18px, 1.6vw, 22px) var(--font); border-radius: 0; }
.ticket__field input::placeholder { color: color-mix(in srgb, var(--esp-d) 45%, transparent); }
.ticket__field input:focus { outline: none; border-bottom-color: var(--rust); }
.ticket__stub {
  display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: center; gap: 10px; padding: 22px 16px;
  background: var(--apricot); color: var(--esp-d); border: 0; border-left: 3px dashed color-mix(in srgb, var(--esp-d) 35%, transparent); border-radius: 0 16px 16px 0;
  font: 900 15px var(--font); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  -webkit-mask: radial-gradient(circle 14px at 50% 50%, transparent 13px, #000 14px); mask: radial-gradient(circle 14px at 50% 50%, transparent 13px, #000 14px);
  transition: background-color .2s, transform .5s var(--ease-plant); transform-origin: 0 100%;
}
.ticket__stub span { align-self: end; }
.ticket__stub small { align-self: start; font-size: 10px; letter-spacing: .18em; opacity: .7; }
.ticket__hole { display: block; width: 28px; height: 28px; }
.ticket__stub:hover { background: #F6C796; }
.ticket.is-punched .ticket__stub { transform: rotate(9deg) translate(10px, 6px); }

/* 04 · the guides, as big names */
.guides { position: relative; padding: clamp(64px, 8.5vw, 124px) var(--gutter); background: var(--cream); }
.guides .kick { color: var(--rust); }
.names { margin-top: 28px; border-top: 3px solid var(--esp); }
.names li { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 24px; padding: clamp(18px, 2.4vw, 30px) 0 clamp(14px, 2vw, 24px); border-bottom: 1px solid color-mix(in srgb, var(--esp) 30%, transparent); }
.names__n { font-size: clamp(42px, 7.6vw, 124px); font-weight: 900; line-height: .9; text-transform: uppercase; transition: color .25s; }
.names__c { font-size: 14px; font-weight: 900; letter-spacing: .14em; color: var(--rust); }
.names__w { justify-self: end; text-align: right; font-size: 15px; max-width: 30ch; }
.names img { position: absolute; z-index: 4; right: 30%; top: 50%; width: 220px; aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; opacity: 0; transform: translate(var(--mx, 0px), -50%) rotate(-4deg) scale(.9); transition: opacity .25s, transform .4s var(--ease-out); box-shadow: 0 18px 40px rgba(59, 42, 34, .25); }
@media (hover: hover) {
  .names li:hover .names__n { color: var(--rust); }
  .names li:hover img { opacity: 1; transform: translate(var(--mx, 0px), -50%) rotate(-2deg) scale(1); }
}
.guides__note { margin-top: 32px; max-width: 62ch; font-size: 18px; }
/* partner logos, one colour */
.logo { display: inline-block; height: var(--h, 30px); aspect-ratio: var(--ar); background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logo--altus { --h: 50px; } .logo--arc { --h: 24px; }
.logo-type { font-size: 22px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.partners { margin-top: clamp(56px, 7vw, 96px); padding-top: 28px; border-top: 3px solid var(--esp); }
.partners__top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.partners__top span, .partners__label { font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--esp) 70%, transparent); }
.partners__top a { display: inline-flex; color: var(--esp); transition: color .2s; } .partners__top a:hover { color: var(--rust); }
.partners__label { margin-top: 36px; }
.partners__floor { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 14px; border-top: 1px solid color-mix(in srgb, var(--esp) 30%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--esp) 30%, transparent); }
.partners__floor li { display: grid; gap: 14px; align-content: start; padding: 26px 20px 24px 0; }
.partners__floor li + li { padding-left: 20px; border-left: 1px solid color-mix(in srgb, var(--esp) 30%, transparent); }
.partners__floor .logo, .partners__floor .logo-type { display: block; width: min(100%, 150px); height: 34px; aspect-ratio: auto; color: var(--rust); -webkit-mask-position: left center; mask-position: left center; transition: color .2s; }
.partners__floor .logo-type { height: auto; padding: 6px 0; }
.partners__floor a:hover .logo { color: var(--esp); }
.partners__floor span { font-size: 14px; line-height: 1.4; }


/* the finale + footer */
.foot { position: relative; color: var(--cream); overflow: hidden; }
.finale { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); padding: clamp(110px, 12vw, 170px) var(--gutter) clamp(56px, 6vw, 88px); }
.finale__line { font-size: clamp(64px, 11.5vw, 200px); font-weight: 900; line-height: .84; text-transform: uppercase; color: var(--apricot); }
.finale__stop { display: inline-block; width: 1px; height: 1px; margin-left: .12em; vertical-align: baseline; }
.finale__events { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid color-mix(in srgb, var(--cream) 30%, transparent); }
.finale__events a { display: grid; gap: 4px; padding: 22px 22px 6px 0; text-decoration: none; }
.finale__events li + li a { padding-left: 22px; border-left: 1px solid color-mix(in srgb, var(--cream) 22%, transparent); }
.finale__events b { font-size: clamp(26px, 2.6vw, 40px); font-weight: 900; line-height: 1; color: var(--apricot); text-transform: uppercase; white-space: nowrap; transition: transform .3s var(--ease-out); }
.finale__events span { font-size: clamp(16px, 1.3vw, 19px); font-weight: 900; text-transform: uppercase; }
.finale__events em { font-style: normal; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.finale__events a:hover b { transform: translateX(6px); }
.finale__act { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--apricot { background: var(--apricot); border-color: var(--apricot); color: var(--esp-d); }
.btn--ghost { background: transparent; border-color: var(--cream); color: var(--cream); box-shadow: none; }
.btn--ghost:hover { background: var(--cream); color: var(--esp); }
.foot__links { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 32px; margin: 0 var(--gutter); padding: 36px 0 8px; border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); }
.foot__links div { display: grid; align-content: start; gap: 10px; }
.foot__links h3 { font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--apricot); margin-top: 4px; }
.foot__links a { text-decoration: none; font-size: 16px; } .foot__links a:hover { color: var(--apricot); }
.foot__by .logo { color: var(--cream); }
.foot__by .logo--altus { --h: 44px; } .foot__by .logo--arc { --h: 20px; }
/* the wordmark, poles planted either side, sitting in a strip of snow */
.foot__ridge { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: .4vw; padding: 12px var(--gutter) 0; }
.pole { height: 13vw; width: auto; margin-bottom: -1.2vw; }
.pole .lk__poles { fill: var(--cream); }
.foot__ridge.is-planted .pole { animation: plantpole .8s var(--ease-plant) both; }
.foot__ridge.is-planted .pole--r { animation-delay: .14s; }
@keyframes plantpole { from { transform: translateY(-45%); opacity: 0; } to { transform: none; opacity: 1; } }
.foot__mark { margin-bottom: -1.6vw; }
.foot__mark .lk { display: block; }
.foot__mark .lk__word, .foot__mark .lk__box { fill: var(--apricot); } .foot__mark .lk__digits { fill: var(--esp); }
.foot__base { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; padding: 16px var(--gutter) 18px; background: var(--cream); color: var(--esp); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  :root { --top-h: 54px; }
  .top { gap: 0; }
  .top__links { display: none; }
  .top__mark { width: 176px; }
  .open__line { white-space: normal; max-width: 34ch; }
  .top__cta { margin-left: auto; padding: 0 16px; font-size: 11.5px; }
  .open__scene { --zoom: 1.2; --fx: .47; --fy: .645; --ty: 50svh; }
  .open__mark { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--top-h) + 3vh); }
  .open__foot { grid-template-columns: 1fr; grid-template-areas: "by" "dates" "line" "act"; gap: 10px; bottom: 22px; }
  .open__foot .open__by { display: none; }
  .open__foot { grid-template-areas: "dates" "line" "act"; }
  .open__by--top { display: inline-flex; position: absolute; z-index: 2; right: var(--gutter); top: calc(var(--top-h) + 3vh + (100vw - 2 * var(--gutter)) * .3176 + 14px); margin: 0; }
  .open__by--top .logo--altus { --h: 30px; }
  .open__dates { font-size: clamp(22px, 7vw, 30px); flex-direction: column; gap: 2px; }
  .open__dates i { display: none; }
  .open__act { justify-self: stretch; flex-direction: column; gap: 10px; margin: 0; }
  .open__act .btn { justify-content: space-between; }
  .mini, .swap, .stack, .summit { grid-template-columns: 1fr; }
  .mini__title { font-size: 13.4vw; }
  .trail { opacity: .6; }
  .badge { right: 0; top: 36%; width: 84px; } .badge b { font-size: 30px; } .badge i { font-size: 8px; }
  .mini__pit { max-height: 360px; aspect-ratio: 4 / 3; }
  .times { grid-template-columns: 1fr; }
  .times li, .times li + li { padding: 22px 0; border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--navy) 30%, transparent); }
  .times__n { font-size: 17vw; }
  .beat__act .btn { width: 100%; justify-content: space-between; }
  .swap__title { font-size: 19vw; }
  .swap__facts { flex-direction: column; gap: 6px; } .swap__facts span { border: 0; padding: 0; margin: 0; }
  .kit { max-width: 440px; }
  .tag { max-width: 170px; }
  .stack__pin { position: static; height: auto; display: block; padding-top: 8px; }
  .stack__art { width: 100%; }
  .stack__arc text { font-size: 150px; }
  .stack__list { padding: 0; }
  .stack__list li { opacity: 1; min-height: 0; }
  .ticket { --stub: 0px; grid-template-columns: 1fr; transform: none; }
  .ticket::before, .ticket::after { display: none; }
  .ticket__main { border-radius: 16px 16px 0 0; }
  .ticket__stub { grid-template-rows: none; grid-template-columns: 1fr auto 1fr; border-left: 0; border-top: 3px dashed color-mix(in srgb, var(--esp-d) 35%, transparent); border-radius: 0 0 16px 16px; padding: 18px; }
  .ticket__stub span { align-self: center; justify-self: end; } .ticket__stub small { align-self: center; justify-self: start; }
  .partners__floor { grid-template-columns: 1fr 1fr; }
  .partners__floor li, .partners__floor li + li { padding: 20px 12px 20px 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--esp) 20%, transparent); }
  .finale { padding-top: 130px; }
  .finale__events li + li a { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent); }
  .finale__line { font-size: 17vw; }
  .finale__stop { margin-left: .3em; }
  .finale__events { grid-template-columns: 1fr; }
  .finale__act .btn { width: 100%; justify-content: space-between; }
  .foot__links { grid-template-columns: 1fr 1fr; }
  .foot__by { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 10px 18px !important; }
  .foot__by h3 { margin: 0; }
  .finale { padding-top: 150px; }
  .ticket__kick { flex-direction: column; gap: 2px; }
  .pole { height: 22vw; }
  .skier { width: 140px; }
  .ticket__title { white-space: normal; }
  .summit__mark { max-width: 420px; }
  .board { grid-template-columns: repeat(2, 1fr); }
  .names li { grid-template-columns: 1fr auto; }
  .names__w { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .names img { display: none; }
  .foot__base { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .open { height: auto; } .open__stage { position: relative; }
  .open__ink { display: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- phone menu ---------- */
.top__menu { display: none; }
.sheet { position: fixed; z-index: 99; inset: var(--top-h) 0 auto; display: grid; gap: 0; padding: 8px var(--gutter) 22px; background: var(--cream); border-bottom: 1px solid color-mix(in srgb, var(--esp) 20%, transparent); box-shadow: 0 24px 40px rgba(59, 42, 34, .18); transform-origin: top; animation: sheet .28s var(--ease-out); }
.sheet[hidden] { display: none; }
@keyframes sheet { from { opacity: 0; transform: translateY(-8px); } }
.sheet a:not(.btn) { display: grid; gap: 2px; padding: 16px 0 14px; border-bottom: 1px solid color-mix(in srgb, var(--esp) 18%, transparent); text-decoration: none; }
.sheet b { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.sheet span, .sheet__plain { font-size: 22px; font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.sheet__ev--cool b { color: var(--slate); } .sheet__ev--dark b { color: #8A5A3C; }
.btn--block { margin-top: 18px; justify-content: space-between; width: 100%; }
.finale__stop--m { display: none; }
@media (max-width: 900px) {
  .top__menu { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 16px; border: 0; border-left: 1px solid color-mix(in srgb, var(--esp) 18%, transparent); background: transparent; color: var(--esp); font: 900 11.5px var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
  .top__menu i { position: relative; width: 16px; height: 2px; background: currentColor; transition: background-color .2s; }
  .top__menu i::before, .top__menu i::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; transition: transform .25s var(--ease-out); }
  .top__menu i::before { top: -5px; } .top__menu i::after { top: 5px; }
  .top__menu[aria-expanded="true"] i { background: transparent; }
  .top__menu[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
  .top__menu[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }
  .top__cta { display: none; }
  .top__menu { margin-left: auto; }
  /* hero: the skier skis in on the right, the words hold a narrower column on the left */
  .open__scene { --zoom: 1.2; --fx: .39; --fy: .645; --ty: 50svh; }
  .open__dates { font-size: clamp(20px, 6vw, 26px); max-width: 64vw; }
  .open__line { max-width: 62vw; font-size: 14px; }
  .mini__pit { max-height: none; aspect-ratio: 4 / 3; width: 100%; justify-self: stretch; }
  .finale__stop--d { display: none; } .finale__stop--m { display: inline-block; margin-left: .2em; }
  .foot__links { grid-template-columns: auto auto; justify-content: space-between; column-gap: 20px; }
  .foot__links a { white-space: nowrap; }
  html { scroll-padding-top: var(--top-h); }
}

/* ---------- buttons + links: one interaction system ---------- */
.btn, .top__cta { position: relative; overflow: hidden; isolation: isolate; --sheet: var(--esp); --sheet-ink: var(--cream);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), color .4s ease, border-color .45s cubic-bezier(.23, 1, .32, 1); }
.btn::after, .top__cta::after { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--sheet); transform: translateY(102%); transition: transform .5s cubic-bezier(.23, 1, .32, 1); }
.btn__t { position: relative; display: inline-grid; overflow: hidden; line-height: 1.15; vertical-align: middle; }
.btn__t > span { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.23, 1, .32, 1); }
.btn__t > span + span { transform: translateY(105%); }
@media (hover: hover) {
  .btn:hover::after, .top__cta:hover::after, .btn:focus-visible::after { transform: none; }
  .btn:hover, .top__cta:hover { color: var(--sheet-ink); border-color: var(--sheet); }
  .btn:hover .btn__t > span:first-child, .top__cta:hover .btn__t > span:first-child { transform: translateY(-105%); }
  .btn:hover .btn__t > span + span, .top__cta:hover .btn__t > span + span { transform: none; }
  .btn:hover .ar { transform: translateX(4px); }
}
.btn:active, .top__cta:active { transform: translateY(2px) scale(.985); }
.btn--line, .btn--ghost { --sheet: var(--esp); }
.btn--line:hover { background: transparent; color: var(--cream); }
.btn--slate { --sheet: var(--navy); --sheet-ink: var(--ice); }
.btn--apricot { --sheet: var(--cream); --sheet-ink: var(--esp-d); }
.btn--ghost { --sheet: var(--cream); --sheet-ink: var(--esp); }
.btn--ghost:hover { background: transparent; }
.top__cta { --sheet: var(--esp); }
.top__cta:hover { background: var(--rust); }
/* nav cells flood up from the bottom in their event's colour */
.top__links a { background: linear-gradient(var(--fl, var(--esp)), var(--fl, var(--esp))) 0 100% / 100% 0 no-repeat; transition: background-size .35s cubic-bezier(.23, 1, .32, 1), color .25s; }
.top__ev--cool { --fl: var(--navy); } .top__ev--coral { --fl: var(--coral); } .top__ev--dark { --fl: var(--esp-d); }
.top__ev--cool:hover, .top__ev--coral:hover, .top__ev--dark:hover, .top__links a:last-child:hover { background-color: transparent; }
.top__links a:hover { background-size: 100% 100%; }
/* text links: an underline draws in from the left */
.foot__links a, .beat__act a:not(.btn), .partners__ask a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; text-decoration: none; transition: background-size .35s cubic-bezier(.23, 1, .32, 1), color .2s; }
.foot__links a:hover, .beat__act a:not(.btn):hover { background-size: 100% 1.5px; }
.beat__act a:not(.btn) { background-size: 100% 1.5px; }
.beat__act a:not(.btn):hover { background-position: 100% 100%; animation: reline .5s cubic-bezier(.23, 1, .32, 1); }
@keyframes reline { 0% { background-size: 100% 1.5px; background-position: 100% 100%; } 45% { background-size: 0 1.5px; background-position: 100% 100%; } 46% { background-position: 0 100%; } 100% { background-size: 100% 1.5px; background-position: 0 100%; } }
/* finale + menu rows: the date slides, a hairline sweeps */
.finale__events a, .sheet a:not(.btn) { position: relative; }
.finale__events a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--apricot); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.23, 1, .32, 1); }
.finale__events a:hover::after { transform: scaleX(1); }
.partners__floor li { transition: transform .35s var(--ease-out); } .partners__floor li:hover { transform: translateY(-3px); }

/* ---------- top bar: Altus at the top ---------- */
.top__altus { display: flex; align-items: center; gap: 10px; padding-left: 20px; margin-left: 4px; border-left: 1px solid color-mix(in srgb, var(--esp) 18%, transparent); height: 34px; color: var(--esp); text-decoration: none; }
.top__altus span { font-size: 9.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
.top__altus .logo--altus { --h: 26px; transition: color .2s; }
.top__altus:hover .logo--altus { color: var(--rust); }
.top__links a.is-here { background-size: 100% 3px; }

/* ---------- shared: MTN Club note, guide links ---------- */
.free { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 5px; border-radius: 99px; background: color-mix(in srgb, var(--rust) 12%, transparent); color: var(--rust); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background-color .25s, transform .3s var(--ease-plant); justify-self: start; }
.free i { font-style: normal; font-size: 13px; transition: transform .6s var(--ease-plant); }
.free:hover { background: color-mix(in srgb, var(--rust) 22%, transparent); } .free:hover i { transform: rotate(180deg); }
.beat--cool .free, .phero--cool .free { background: color-mix(in srgb, var(--slate) 12%, transparent); color: var(--slate); }
.free--dark { background: color-mix(in srgb, var(--apricot) 16%, transparent); color: var(--apricot); margin-top: 18px; }
.free--inline { margin-top: 8px; font-size: 11px; padding: 6px 10px 4px; }
.guide-link { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 1px; transition: background-size .35s cubic-bezier(.23, 1, .32, 1); }
.guide-link:hover { background-size: 0 1.5px; background-position: 100% 100%; }
.btn--small { min-height: 42px; padding: 12px 16px 9px; font-size: 11.5px; justify-self: start; margin-top: 10px; }
.btn--navy { color: var(--navy); border-color: var(--navy); --sheet: var(--navy); --sheet-ink: var(--ice); }
.times em { display: block; }

/* ---------- Who's teaching ---------- */
.guides__head { display: grid; gap: 14px; max-width: 760px; }
.guides__title { font-size: clamp(44px, 6vw, 96px); font-weight: 900; line-height: .9; text-transform: uppercase; }
.guides__lede { font-size: 19px; max-width: 52ch; }
.names { margin-top: clamp(28px, 3vw, 44px); }
.names li { grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); align-items: center; }
.names__n { display: inline-flex; align-items: baseline; gap: .18em; color: inherit; text-decoration: none; white-space: nowrap; font-size: clamp(36px, 5.4vw, 92px) !important; }
.names__n .ar { width: .32em; height: .32em; opacity: 0; transform: translate(-6px, 4px); transition: opacity .25s, transform .35s var(--ease-out); }
.names li:hover .names__n .ar, .names__n:focus-visible .ar { opacity: 1; transform: none; }
.names__w { display: grid; gap: 6px; justify-items: end; }
.names__w a { display: inline-flex; gap: 10px; align-items: baseline; color: inherit; text-decoration: none; font-size: 15px; }
.names__w b { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.names__w a:hover { color: var(--rust); }

/* ---------- event pages ---------- */
.pg main > section { position: relative; }
.pg--cool { --pg: var(--ice); } .pg--warm { --pg: var(--cream); } .pg--dark { --pg: var(--esp-d); }
body.pg { background: var(--pg); }
.phero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: calc(var(--top-h) + clamp(32px, 5vh, 64px)) var(--gutter) clamp(56px, 7vw, 96px); min-height: min(100svh, 980px); }
.phero--cool { color: var(--navy); } .phero--cool .kick { color: var(--slate); }
.phero--warm .kick { color: var(--rust); }
.phero__copy { display: grid; gap: 22px; align-content: center; }
.phero__copy .mini__title, .phero__copy .swap__title { margin: 0; }
.swap__plus { display: block; font-size: .46em; line-height: 1.05; color: var(--rust); }
.phero__lede { max-width: 46ch; font-size: clamp(18px, 1.35vw, 21px); font-weight: 700; line-height: 1.4; }
.phero__lede b { color: var(--rust); }
.phero__art { position: relative; justify-self: end; width: 100%; max-width: 560px; aspect-ratio: 731 / 1100; max-height: 78svh; }
.phero__art img { width: 100%; height: 100%; object-fit: cover; }
.phero__art .badge { position: absolute; left: -9%; bottom: 10%; top: auto; right: auto; }
.phero__kit { justify-self: center; width: 100%; max-width: 560px; }
.pfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid currentColor; }
.pfacts > div { padding: 14px 18px 12px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.pfacts > div:nth-child(even) { padding-left: 18px; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.pfacts dt { font-size: 11.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.pfacts dd { margin: 4px 0 0; font-size: clamp(17px, 1.3vw, 20px); font-weight: 900; line-height: 1.25; text-transform: uppercase; }
.pfacts dd a:not(.free) { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pfacts dd .free { text-transform: uppercase; }

.srows { padding: 0 var(--gutter) clamp(56px, 7vw, 96px); color: var(--navy); }
.srow { display: grid; grid-template-columns: minmax(280px, .9fr) 1.3fr auto; gap: 18px 48px; align-items: center; padding: clamp(28px, 3.4vw, 48px) 0; border-top: 2px solid var(--navy); }
.srow:last-child { border-bottom: 2px solid var(--navy); }
.srow__time { display: flex; align-items: flex-start; font-size: clamp(56px, 6.6vw, 112px); font-weight: 900; line-height: .9; letter-spacing: -.02em; }
.srow__time sup { font-size: .26em; letter-spacing: .04em; margin: .14em .2em 0 .04em; }
.srow__time i { width: .34em; height: .09em; background: var(--slate); margin: .42em .16em 0 .02em; }
.srow__body h2 { font-size: clamp(26px, 2.8vw, 42px); font-weight: 900; line-height: 1; text-transform: uppercase; }
.srow__body p { margin-top: 10px; max-width: 44ch; font-size: 17px; }
.srow__body .srow__by { font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }

.bring { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); padding: clamp(56px, 7vw, 96px) var(--gutter); color: var(--navy); background: color-mix(in srgb, var(--slate) 7%, var(--ice)); }
.bring__head { display: grid; gap: 12px; align-content: start; }
.bring__title, .faq__title, .how__title, .floor__title { font-size: clamp(40px, 5vw, 80px); font-weight: 900; line-height: .9; text-transform: uppercase; }
.checklist li { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.checklist li:first-child { border-top: 2px solid currentColor; }
.checklist label { display: flex; align-items: center; gap: 16px; padding: 18px 4px 15px; cursor: pointer; font-size: 19px; font-weight: 800; }
.checklist input { appearance: none; flex: none; width: 30px; height: 30px; margin: -3px 0 0; border: 2px solid currentColor; border-radius: 6px; display: grid; place-content: center; cursor: pointer; transition: background-color .2s, transform .3s var(--ease-plant); }
.checklist input::after { content: ""; width: 12px; height: 7px; border: solid var(--ice); border-width: 0 0 3px 3px; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .3s var(--ease-plant); }
.checklist input:checked { background: var(--slate); border-color: var(--slate); transform: rotate(-6deg); }
.checklist input:checked::after { transform: rotate(-45deg) scale(1); }
.checklist span { position: relative; transition: opacity .3s; }
.checklist span::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.23, 1, .32, 1); }
.checklist input:checked + span { opacity: .5; } .checklist input:checked + span::after { transform: scaleX(1); }

.faq { padding: clamp(56px, 7vw, 96px) var(--gutter); }
.faq__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); }
.pg--cool .faq { color: var(--navy); } .pg--dark .faq { color: var(--cream-2); background: var(--esp-d); }
.faq details { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.faq details:first-child { border-top: 2px solid currentColor; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0 17px; cursor: pointer; list-style: none; font-size: clamp(18px, 1.5vw, 22px); font-weight: 900; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 16px; height: 16px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: currentColor; transition: transform .35s var(--ease-out); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details p { max-width: 62ch; padding-bottom: 22px; font-size: 17px; animation: rise .4s var(--ease-out); }
.faq details a { color: inherit; font-weight: 800; }

.how { padding: clamp(56px, 7vw, 104px) var(--gutter); display: grid; gap: clamp(28px, 3vw, 44px); }
.how__grid { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(28px, 5vw, 72px); }
.how__buy { display: grid; gap: 12px; align-content: start; }
.how__buy .kick, .how__rules .kick, .venue .kick { color: var(--rust); }
.how__buy p:last-child { font-size: 18px; max-width: 40ch; }
.how__steps { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--esp); counter-reset: s; }
.how__steps li { position: relative; padding: 22px 22px 24px 72px; border-bottom: 1px solid color-mix(in srgb, var(--esp) 25%, transparent); transition: background-color .3s; }
.how__steps li:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--esp) 25%, transparent); }
.how__steps li:hover { background: color-mix(in srgb, var(--rust) 6%, transparent); }
.how__steps b { position: absolute; left: 18px; top: 20px; width: 38px; height: 38px; border: 2.5px solid var(--rust); border-radius: 50%; display: grid; place-content: center; padding-top: 3px; color: var(--rust); font-size: 16px; font-weight: 900; transition: background-color .25s, color .25s; }
.how__steps li:hover b { background: var(--rust); color: var(--cream); }
.how__steps h3 { font-size: 20px; font-weight: 900; text-transform: uppercase; }
.how__steps p { margin-top: 6px; font-size: 16px; }
.how__rules .pfacts { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.how__rules .pfacts dd { font-size: 15px; font-weight: 700; text-transform: none; opacity: .75; }
.how__rules .pfacts > div:nth-child(even) { padding-left: 0; border-left: 0; }
.how__rules .pfacts > div + div { padding-left: 16px; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }

.floor { padding: clamp(56px, 7vw, 104px) var(--gutter); }
.floor__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.floor__grid li > * { display: grid; gap: 16px; align-content: start; height: 100%; padding: 28px; border-radius: 4px; background: color-mix(in srgb, var(--rust) 7%, transparent); color: var(--esp); text-decoration: none; transition: transform .35s var(--ease-plant), background-color .25s; }
.floor__grid li > a:hover { transform: translateY(-4px) rotate(-.4deg); background: color-mix(in srgb, var(--rust) 13%, transparent); }
.floor__grid .logo { --h: 34px; width: min(100%, 170px); height: 34px; aspect-ratio: auto; color: var(--rust); -webkit-mask-position: left center; mask-position: left center; }
.floor__grid .logo-type { color: var(--rust); font-size: 26px; }
.floor__grid p { font-size: 16px; }
.floor__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.floor__go .ar { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
a:hover > .floor__go .ar { transform: translateX(4px); }
.venue { display: grid; gap: 10px; justify-items: start; padding: clamp(56px, 7vw, 96px) var(--gutter); border-top: 2px solid var(--esp); margin: 0 var(--gutter); padding-left: 0; padding-right: 0; }
.venue__name { font-size: clamp(48px, 7vw, 110px); font-weight: 900; line-height: .9; text-transform: uppercase; }
.venue__sub { font-size: 14px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.venue .btn { margin-top: 12px; }
.phero--dark { padding-top: calc(var(--top-h) + clamp(32px, 5vh, 64px)); }

.sell { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 80px); align-items: start; padding: calc(var(--top-h) + clamp(32px, 5vh, 64px)) var(--gutter) clamp(56px, 7vw, 96px); }
.sell__intro { position: sticky; top: calc(var(--top-h) + 24px); display: grid; gap: 18px; }
.sell__intro .kick { color: var(--rust); }
.sell__rules a, .pp__ask a { color: var(--rust); font-weight: 800; }
.sell__kit { max-width: 300px; opacity: .9; margin-top: 8px; }
.gear--still .it__pen { display: none; }
.sellform { display: grid; gap: 28px; }
.sellform fieldset { display: grid; gap: 16px; padding: 18px 0 0; margin: 0; border: 0; border-top: 2px solid var(--esp); }
.sellform legend { float: left; width: 100%; margin-bottom: 4px; font-size: 13px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--rust); }
.f2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
.sellform label { display: grid; gap: 6px; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.sellform input:not([type=checkbox]), .sellform select { width: 100%; min-height: 52px; padding: 14px 14px 11px; border: 2px solid color-mix(in srgb, var(--esp) 35%, transparent); border-radius: 6px; background: #FBF6EE; color: var(--esp); font: 700 16px var(--font); letter-spacing: 0; text-transform: none; transition: border-color .2s, box-shadow .2s; }
.sellform input[type=file] { padding: 11px; font-size: 14px; }
.sellform input:focus, .sellform select:focus { outline: none; border-color: var(--rust); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rust) 18%, transparent); }
.was-tried input:invalid, .was-tried select:invalid { border-color: #C0392B; background: #FBEDE8; }
.item { padding: 20px; margin-bottom: 14px; border: 2px solid color-mix(in srgb, var(--esp) 18%, transparent); border-radius: 8px; animation: rise .45s var(--ease-out) both; }
.item.is-new { animation: itemin .6s var(--ease-plant) both; }
@keyframes itemin { from { opacity: 0; transform: translateY(-10px) rotate(-1deg) scale(.98); } }
.item__n { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--rust); }
.item__x { border: 0; background: none; color: var(--esp); font: 800 12px var(--font); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; cursor: pointer; padding: 8px; }
.items__add { justify-self: start; }
.agree { display: flex !important; align-items: center; gap: 12px; font-size: 15px !important; letter-spacing: .02em !important; text-transform: none !important; font-weight: 700 !important; }
.agree input { width: 24px; height: 24px; accent-color: var(--rust); }
.sellform__msg { font-weight: 800; color: var(--rust); min-height: 1.5em; }
.btn--big { min-height: 60px; padding: 20px 28px 17px; font-size: 14px; justify-self: start; }
.sell__done { padding: 40px; border-radius: 8px; background: color-mix(in srgb, var(--rust) 10%, transparent); display: grid; gap: 12px; }

.pp { padding: calc(var(--top-h) + clamp(32px, 5vh, 64px)) var(--gutter) 0; display: grid; gap: 18px; }
.pp .kick { color: var(--rust); }
.pp__tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.pp__tier { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 3vw, 40px); border: 2px solid var(--esp); border-radius: 4px; color: var(--esp); text-decoration: none; transition: transform .35s var(--ease-plant), background-color .25s; }
.pp__tier:hover { transform: translateY(-4px); background: color-mix(in srgb, var(--rust) 7%, transparent); }
.pp__tier .logo--altus { --h: 70px; } .pp__tier .logo--arc { --h: 36px; }
.pp__tier p { font-size: 17px; max-width: 42ch; }
.pp__ask { margin-top: 32px; font-size: 18px; }

@media (max-width: 1100px) { .top__altus span { display: none; } }
@media (max-width: 900px) {
  .top__altus { padding-left: 12px; margin-left: 2px; height: 28px; }
  .top__altus .logo--altus { --h: 20px; }
  .names li { grid-template-columns: 1fr auto; }
  .names__w { grid-column: 1 / -1; justify-items: start; }
  .phero, .bring, .faq__in, .how__grid, .sell, .pp__tiers { grid-template-columns: 1fr; }
  .phero { min-height: 0; padding-top: calc(var(--top-h) + 28px); }
  .phero__art { max-height: none; aspect-ratio: 4 / 3; max-width: none; }
  .phero__art .badge { left: auto; right: 12px; bottom: -24px; width: 96px; }
  .pfacts { grid-template-columns: 1fr 1fr; }
  .srow { grid-template-columns: 1fr; gap: 10px; }
  .srow .btn { justify-self: stretch; justify-content: space-between; }
  .srow__time { font-size: 17vw; }
  .how__steps { grid-template-columns: 1fr; } .how__steps li:nth-child(odd) { border-right: 0; }
  .how__rules .pfacts { grid-template-columns: 1fr; } .how__rules .pfacts > div + div { padding-left: 0; border-left: 0; }
  .floor__grid { grid-template-columns: 1fr; }
  .sell__intro { position: static; } .sell__kit { display: none; }
  .f2 { grid-template-columns: 1fr; }
  .free { font-size: 11px; }
}
.floor__sub { margin-top: 10px; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
@media (max-width: 900px) { .names__n { font-size: 11vw !important; white-space: normal; line-height: .92; } .names li { grid-template-columns: minmax(0, 1fr) auto; } }
.top__altus { flex: none; }
.top__altus .logo--altus { display: block; width: auto; }
@media (max-width: 900px) {
  .top__mark { width: 150px; }
  .top__altus { display: flex; }
  .pfacts > div:last-child { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
  .pfacts > div:last-child dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .pfacts > div:last-child dd br { display: none; }
  .pfacts > div:last-child .free { margin: 0; }
}
@media (max-width: 900px) { .pfacts > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; } }
.bit { transform-origin: center !important; }
@media (prefers-reduced-motion: reduce) {
  .scene__lines path, .scene__lines circle { stroke-dashoffset: 0 !important; }
  .scene .ltr, .scene .bit, .scene .num, .scene .fade { opacity: 1 !important; }
  .scene .wipe { clip-path: none !important; }
}

/* ===================== motion layer: one rhythm, one curve family ===================== */
:root { --e-out: cubic-bezier(.16, 1, .3, 1); --e-snap: cubic-bezier(.4, 0, .2, 1); }

/* ---- hero entrance: the photo settles, the poles plant, the word lands, the box opens, the year rolls in ---- */
/* the photo waits until it is fully decoded, then fades in and settles: no half-downloaded rows, no torn tiles */
.js .open__scene { opacity: 0; transform-origin: 55% 60%; }
.js .open__scene.is-ready { opacity: 1; transition: opacity .7s ease; animation: settle 1.8s var(--e-out) both; }
@keyframes settle { from { transform: scale(1.07); } to { transform: none; } }
.open__mark .lk__word { animation: landword .9s var(--e-out) .15s both; transform-box: fill-box; transform-origin: 50% 100%; }
.open__mark .lk__box { animation: openbox .7s var(--e-out) .45s both; transform-box: fill-box; transform-origin: 0 50%; }
.open__mark .lk__digits { animation: fadein .01s linear .5s both; }
.open__mark .lk__roll { animation: rollin .8s var(--e-out) .62s both; }
.open__mark .lk__poles { animation: plantpole2 .8s var(--ease-plant) .85s both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes landword { from { opacity: 0; transform: translateY(14%) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes openbox { from { transform: scaleX(0); } to { transform: none; } }
@keyframes rollin { from { transform: translateY(calc(var(--lk-roll) * -1)); } to { transform: none; } }
@keyframes plantpole2 { 0% { opacity: 0; transform: translateY(-30%); } 60% { opacity: 1; transform: translateY(2%); } 100% { opacity: 1; transform: none; } }
.open__foot .open__dates, .open__foot .open__line, .open__foot .open__act { animation: liftin .9s var(--e-out) both; }
.open__foot .open__dates { animation-delay: .7s; } .open__foot .open__line { animation-delay: .82s; } .open__foot .open__act { animation-delay: .94s; }
/* no opacity: text painted invisible never counts as the page's largest paint, which scored mobile speed 0 */
@keyframes liftin { from { opacity: .01; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* pointer depth on desktop: lockup and photo drift apart a few px */

/* ---- top bar: hides on the way down, back the moment you scroll up (parts: hide-on-scroll-nav) ---- */
.top { transition: transform .15s var(--e-snap), background-color .3s; }
.top.is-away { transform: translateY(calc(-100% - 8px)); }
.top__links a { position: relative; }
.top__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--fl, var(--esp)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--e-out); }
.top__links a.is-here::after { transform: scaleX(1); }
.top__links a.is-here { background-size: 100% 0; }

/* ---- headings: each word rises out from behind its own line ---- */
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .1em; margin: -.06em -.02em -.1em; }
.rwi { display: inline-block; }
.js .rv-words .rwi { transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; }
.js .rv-words.is-in .rwi { transform: none; transition: transform 1s var(--e-out) calc(var(--i) * 55ms); }

/* ---- blocks: rise in order as they arrive ---- */
.js .rv-up { opacity: 0; transform: translateY(26px); }
.js .rv-up.is-in { opacity: 1; transform: none; transition: opacity .8s var(--e-out) calc(var(--i, 0) * 80ms), transform 1s var(--e-out) calc(var(--i, 0) * 80ms); }
/* session times roll up into their window like the year box */
.times__n, .srow__time { overflow: visible; padding-bottom: .04em; }
.js .rv-roll > * , .js .rv-roll { --roll: 0; }
.js .times li .times__n > *, .js .srow .srow__time > * { display: inline-block; }
.js .times li:not(.is-in) .times__n, .js .srow:not(.is-in) .srow__time { clip-path: inset(-30% -5% 130% -5%); transform: translateY(40%); }
.js .times li.is-in .times__n, .js .srow.is-in .srow__time { clip-path: inset(-30% -5% -10% -5%); transform: none; transition: clip-path .9s var(--e-out) calc(var(--i, 0) * 80ms + 120ms), transform .9s var(--e-out) calc(var(--i, 0) * 80ms + 120ms); }
/* photos open from the bottom edge and settle */
.js .rv-img img { clip-path: inset(100% 0 0 0); transform: scale(1.12); transform-origin: 50% 100%; }
.js .rv-img.is-in img { clip-path: inset(0 0 0 0); transform: none; transition: clip-path 1.2s var(--e-out), transform 1.6s var(--e-out); }
/* hairlines draw across */
.js .rv-rule { background-size: 0 2px !important; }

/* ---- the ticket tilts toward the pointer, a sheen follows ---- */
.ticket.is-tilting { transition: transform .2s var(--e-out); transform: perspective(1100px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) rotate(-.4deg) !important; filter: drop-shadow(0 26px 30px rgba(20, 10, 6, .4)); }
.ticket__main, .ticket__stub { position: relative; }
.ticket__main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .35), transparent 45%); opacity: 0; transition: opacity .3s; }
.ticket.is-tilting .ticket__main::after { opacity: 1; }

/* ---- magnetic main buttons (fine pointers) ---- */
.btn.is-mag { transition: translate .25s var(--e-out), transform .2s var(--ease-out), color .4s ease, border-color .45s; translate: var(--bx, 0) var(--by, 0); }

/* ---- FAQ: the answer opens smoothly (height animated in JS), the plus turns ---- */
.faq details { overflow: hidden; }

/* ---- footer: the wordmark stands up piece by piece, then the poles plant (CSS translate, so the glyphs' own transforms stay intact) ---- */
.js .foot__ridge:not(.is-planted) .foot__mark :is(.lk__w1, .lk__w2, .lk__box, .lk__digits) { translate: 0 75%; opacity: 0; }
.foot__ridge.is-planted .foot__mark .lk__w1 { transition: translate 1s var(--e-out), opacity .4s; }
.foot__ridge.is-planted .foot__mark .lk__w2 { transition: translate 1s var(--e-out) .1s, opacity .4s .1s; }
.foot__ridge.is-planted .foot__mark :is(.lk__box, .lk__digits) { transition: translate 1s var(--e-out) .2s, opacity .4s .2s; }
.foot__ridge.is-planted .pole { animation-delay: .45s; } .foot__ridge.is-planted .pole--r { animation-delay: .58s; }

/* ---- between pages: the page lifts away, the next rises in; the top bar stays put ---- */
@view-transition { navigation: auto; }
.top { view-transition-name: topbar; }
::view-transition-old(root) { animation: vtout .35s var(--e-snap) both; }
::view-transition-new(root) { animation: vtin .55s var(--e-out) .05s both; }
@keyframes vtout { to { opacity: 0; transform: translateY(-24px); } }
@keyframes vtin { from { opacity: 0; transform: translateY(32px); } }

@media (prefers-reduced-motion: reduce) {
  .js .rv-words .rwi, .js .rv-up, .js .rv-img, .js .rv-img img, .js .times li .times__n, .js .srow .srow__time { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .js .foot__ridge .foot__mark * { translate: none !important; opacity: 1 !important; }
  .open__mark, .open__photo { translate: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ===================== round 7 polish ===================== */
/* nav: equal cells; the current page's cell still floods on hover */
@media (min-width: 901px) { .top__links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } }
.top__links a.is-here:hover { background-size: 100% 100%; }
/* word masks need room for tight display leading */
.rw { padding: .16em .04em .14em; margin: -.16em -.04em -.14em; }
.mini__title { line-height: .8 !important; }
/* who's teaching: title on one line, three aligned columns sized by the longest name */
.guides__title { white-space: nowrap; }
.names { display: grid; grid-template-columns: max-content max-content 1fr; column-gap: clamp(24px, 3vw, 56px); }
.names li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.names__n { font-size: clamp(36px, 4.9vw, 84px) !important; }
/* copy measures */
.summit__copy p { max-width: 54ch; }
.pp__tier p { max-width: none; }
/* footer links: the underline is as long as the word */
.foot__links a { justify-self: start; }

/* sell: a few pieces, big, filling the column; skis laid flat along the bottom */
.flatlay { display: grid; grid-template-columns: 1.15fr .8fr .7fr; grid-template-areas: "pack mid shovel" "skis skis skis"; align-items: end; gap: 18px 20px; margin-top: 18px; }
.flatlay__pack { grid-area: pack; } .flatlay__mid { grid-area: mid; display: grid; gap: 14px; justify-items: center; align-self: center; } .flatlay__shovel { grid-area: shovel; } .flatlay__skis { grid-area: skis; }
.flatlay .pc { display: block; width: 100%; height: auto; overflow: visible; }
.flatlay__mid .pc--goggles { width: 92%; } .flatlay__mid .pc--transceiver { width: 46%; }
.flatlay .pc .it__fill .ink { fill: var(--esp); } .flatlay .pc .it__fill .acc { fill: var(--rust); }
.flatlay .pc .it__hit { display: none; }
.flatlay > div, .flatlay__mid > .pc { transition: transform .45s var(--ease-plant); }
.flatlay > div:hover, .flatlay__mid > .pc:hover { transform: translateY(-4px) rotate(-1.5deg); }
.sell__intro { gap: 14px; }

/* sell form: dashed add-row, one horizontal submit bar */
.items__add { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; width: 100%; padding: 20px 22px; border: 2px dashed color-mix(in srgb, var(--esp) 35%, transparent); border-radius: 8px; background: transparent; color: var(--esp); font: 900 14px var(--font); letter-spacing: .14em; text-transform: uppercase; text-align: left; cursor: pointer; transition: border-color .25s, background-color .25s; }
.items__add i { grid-row: 1 / 3; position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--rust); transition: transform .45s var(--ease-plant); }
.items__add i::before, .items__add i::after { content: ""; position: absolute; left: 12px; right: 12px; top: 19px; height: 2.5px; background: var(--cream); border-radius: 2px; }
.items__add i::after { transform: rotate(90deg); }
.items__add small { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: none; opacity: .65; margin-top: 3px; }
.items__add:hover { border-color: var(--rust); background: color-mix(in srgb, var(--rust) 6%, transparent); }
.items__add:hover i { transform: rotate(90deg) scale(1.06); }
.sellbar { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; padding: 22px 24px; border-radius: 10px; background: color-mix(in srgb, var(--rust) 8%, var(--cream)); border: 2px solid color-mix(in srgb, var(--esp) 14%, transparent); }
.sellbar .agree { flex: 1 1 260px; }
.sellbar__count { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.sellbar__count b { font-size: 18px; letter-spacing: 0; margin-right: 4px; color: var(--rust); opacity: 1; display: inline-block; }
.sellbar__count b.bump { animation: bump .45s var(--ease-plant); }
@keyframes bump { 40% { transform: scale(1.5); } }
.sellbar .btn--big { margin-left: auto; }
.agree input { appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border: 2px solid var(--esp); border-radius: 6px; display: grid; place-content: center; cursor: pointer; transition: background-color .2s, transform .3s var(--ease-plant); }
.agree input::after { content: ""; width: 11px; height: 6px; border: solid var(--cream); border-width: 0 0 3px 3px; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .3s var(--ease-plant); }
.agree input:checked { background: var(--rust); border-color: var(--rust); transform: rotate(-6deg); }
.agree input:checked::after { transform: rotate(-45deg) scale(1); }
.was-tried .agree input:invalid { border-color: #C0392B; }
/* file picker in the house style */
.sellform input[type=file]::file-selector-button { margin-right: 14px; padding: 9px 14px 7px; border: 2px solid var(--esp); border-radius: 4px; background: transparent; color: var(--esp); font: 900 11px var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s; }
.sellform input[type=file]::file-selector-button:hover { background: var(--esp); color: var(--cream); }

/* custom dropdowns (the real select stays underneath for the form) */
.dd { position: relative; }
.dd select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dd__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 14px 14px 11px; border: 2px solid color-mix(in srgb, var(--esp) 35%, transparent); border-radius: 6px; background: #FBF6EE; color: var(--esp); font: 700 16px var(--font); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.dd__btn.is-empty span { opacity: .5; }
.dd__btn i { position: relative; flex: none; width: 12px; height: 12px; transition: transform .35s var(--e-out); }
.dd__btn i::before { content: ""; position: absolute; inset: 1px 2px 4px; border: solid var(--rust); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.dd.is-open .dd__btn, .dd__btn:focus-visible { outline: none; border-color: var(--rust); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rust) 18%, transparent); }
.dd.is-open .dd__btn i { transform: rotate(180deg); }
.was-tried .dd:has(select:invalid) .dd__btn { border-color: #C0392B; background: #FBEDE8; }
.dd__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow: auto; padding: 6px; margin: 0; list-style: none; border-radius: 8px; background: #FFFBF4; border: 2px solid var(--esp); box-shadow: 0 18px 40px rgba(59, 42, 34, .2); transform-origin: top; opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .18s ease, transform .3s var(--e-out); }
.dd.is-open .dd__list { opacity: 1; transform: none; pointer-events: auto; }
.dd__list li { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px 9px; border-radius: 5px; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background-color .12s, padding .2s var(--e-out); }
.dd__list li.is-active { background: color-mix(in srgb, var(--rust) 12%, transparent); padding-left: 16px; }
.dd__list li[aria-selected="true"] { color: var(--rust); }
.dd__list li[aria-selected="true"]::after { content: ""; width: 10px; height: 6px; border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); margin-top: -4px; }

/* between pages: the next page rises over this one as a sheet with a curved leading edge (the buttons' move, page-sized) */
::view-transition-old(root) { animation: vtold .7s cubic-bezier(.7, 0, .3, 1) both; }
::view-transition-new(root) { animation: vtsheet .75s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes vtold { to { transform: translateY(-6%) scale(.97); filter: brightness(.72); } }
@keyframes vtsheet { from { clip-path: inset(100% 0 0 0 round 45% 45% 0 0); transform: translateY(4%); } to { clip-path: inset(0 0 0 0 round 0 0 0 0); transform: none; } }
::view-transition-group(topbar) { animation-duration: .7s; }

@media (max-width: 900px) {
  .guides__title { white-space: normal; }
  .names { grid-template-columns: 1fr; }
  .names li { grid-template-columns: minmax(0, 1fr) auto; }
  .flatlay { display: grid; }
  .sell__kit { display: none; }
  .sellbar { padding: 18px; } .sellbar .btn--big { margin-left: 0; width: 100%; justify-content: space-between; }
}
.top__links a:hover, .top__links a.is-here:hover { background-image: linear-gradient(var(--fl, var(--esp)), var(--fl, var(--esp))); background-size: 100% 100%; }
@media (max-width: 900px) { .br-d { display: none; } }

/* ===================== round 9: Ross's notes ===================== */
/* giving back: Zero Ceiling, a big 20% you can't miss */
.giving { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; padding: clamp(20px, 2.4vw, 32px); border-radius: 10px; background: var(--esp); color: var(--cream); }
.giving__pct { font-size: clamp(64px, 7vw, 112px); font-weight: 900; line-height: .8; color: var(--apricot); letter-spacing: -.02em; }
.giving__pct i { font-style: normal; font-size: .5em; vertical-align: top; margin-left: .04em; }
.giving .kick { color: var(--apricot); margin-bottom: 6px; }
.giving p:last-child { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; max-width: 52ch; }
.giving a { color: var(--apricot); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.giving--sell { margin-top: 6px; }
.giving--sell .giving__pct { font-size: 64px; }
.giving--sell p:last-child { font-size: 15px; }
.how__sell { display: grid; gap: 12px; align-content: start; }
.how__sell .kick { color: var(--rust); }
.how__steps li::marker { content: none; }
.f-note { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: color-mix(in srgb, var(--esp) 75%, transparent); }
.f-note b { color: var(--rust); }
.phero__lede b { color: var(--rust); }
.sheet .btn--line { margin-top: 10px; color: var(--esp); border-color: var(--esp); background: transparent; }
@media (max-width: 900px) {
  .giving { grid-template-columns: 1fr; }
  .giving__pct { font-size: 72px; }
  .finale__act .btn { width: 100%; justify-content: space-between; }
}
/* the ticket once it's punched and sent */
.ticket__done { min-height: 48px; padding: 10px 0 6px; border-bottom: 2.5px solid var(--esp-d); font: 800 clamp(16px, 1.4vw, 20px)/1.3 var(--font); animation: fadein .4s var(--ease-out) both; }
.ticket__stub:disabled { cursor: default; }

/* ---- phone polish (10-18): full-width actions, stacked guide credits, a sticky next-step bar, nothing over the edge ---- */
.mbar { display: none; }
@media (max-width: 700px) {
  .btns { display: grid; gap: 10px; }
  .btns .btn { width: 100%; justify-content: space-between; }
  .names li { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  .names__c { justify-self: start; }
  .names__w { justify-self: start; text-align: left; max-width: none; }
  #pp-h { font-size: 16.5vw; }
  .pfacts > div:has(.free) { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
  .pfacts > div:has(.free) dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .pfacts > div:has(.free) dd br { display: none; }
  .foot__mark { margin-bottom: 0; }
  .mbar { position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--esp); color: var(--cream); box-shadow: 0 10px 30px rgba(36, 24, 18, .35);
    transform: translateY(calc(100% + 24px)); transition: transform .45s var(--e-out); }
  .mbar.is-on { transform: none; }
  .mbar p { margin: 0; display: grid; gap: 2px; min-width: 0; }
  .mbar b { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .mbar span { font-size: 12px; font-weight: 700; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar__go { margin: 0 !important; flex: none; background: var(--apricot); color: var(--esp-d); border-color: var(--apricot); }
}

/* ---- phone hero + bar (10-18, Eric's phone): the lockup sits on a cream sky that fades into the photo, so rust reads
   over the rocks; the divider sits mid-way between the two marks; the menu is the icon alone ---- */
@media (max-width: 700px) {
  .open__stage::after { content: ""; position: absolute; inset: 0 0 auto; height: 56%; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, var(--cream) 0%, color-mix(in srgb, var(--cream) 92%, transparent) 30%, color-mix(in srgb, var(--cream) 55%, transparent) 54%, transparent 100%); }
  .top__altus { margin-left: 12px; padding-left: 12px; }
  .top__menu { width: 54px; padding: 0; justify-content: center; }
  .top__menu i, .top__menu i::before, .top__menu i::after { width: 20px; }
}

/* ---- the phone menu (10-18): a full-screen espresso sheet; the three events are their own poster colours, stacked and
   sharing the height; it wipes down from the bar and the pieces arrive in turn ---- */
@media (max-width: 900px) {
  .sheet { inset: var(--top-h) 0 0 !important; display: grid; grid-template-rows: auto auto auto auto; align-content: start; gap: 14px; padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom)) !important;
    background: var(--esp) !important; color: var(--cream); border: 0 !important; box-shadow: none !important; overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); transition: clip-path .5s cubic-bezier(.7, 0, .2, 1); }
  .sheet.is-open { clip-path: inset(0 0 0 0); }
  .sheet > *, .sheet__ev { opacity: 0; transform: translateY(22px); transition: opacity .35s ease, transform .55s var(--e-out); }
  .sheet.is-open > *, .sheet.is-open .sheet__ev { opacity: 1; transform: none; transition-delay: calc(.16s + var(--i, 0) * .06s); }
  .sheet__evs { display: grid; grid-auto-rows: auto; gap: 10px; opacity: 1 !important; transform: none !important; }
  .sheet a.sheet__ev { position: relative; display: grid; align-content: end; gap: 6px; min-height: clamp(84px, calc((100dvh - var(--top-h) - 300px) / 3), 190px); padding: 16px 64px 16px 20px; border: 0; border-radius: 16px; text-decoration: none; }
  .sheet__ev b { font-size: 11.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet__ev span { font-size: clamp(26px, 7.6vw, 34px); font-weight: 900; line-height: .95; text-transform: uppercase; }
  .sheet__ev--cool { background: var(--ice); color: var(--navy); }
  .sheet__ev--coral { background: var(--coral); color: var(--slate-ink); }
  .sheet__ev--dark { background: var(--esp-d); color: var(--apricot); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--apricot) 45%, transparent); }
  .sheet__go { position: absolute; right: 16px; bottom: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid currentColor; font-style: normal; transition: transform .35s var(--ease-plant); }
  .sheet__go .ar { width: 16px; height: 16px; }
  .sheet__ev:active .sheet__go { transform: translateX(4px); }
  .sheet__ev:active { filter: brightness(.96); }
  .sheet__here { position: absolute; right: 16px; top: 14px; padding: 5px 9px 3px; border-radius: 99px; font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
  .sheet__ev--cool .sheet__here { background: var(--navy); color: var(--ice); } .sheet__ev--coral .sheet__here { background: var(--slate-ink); color: var(--coral); } .sheet__ev--dark .sheet__here { background: var(--apricot); color: var(--esp-d); }
  .sheet__more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .sheet .sheet__more a:not(.btn) { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 14px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--cream) 8%, transparent); color: var(--cream); font-size: 13px; font-weight: 900; letter-spacing: .05em; white-space: nowrap; text-transform: uppercase; text-decoration: none; }
  .sheet__act { display: grid; gap: 10px; }
  .sheet__act .btn { width: 100%; justify-content: space-between; margin: 0 !important; }
  .sheet .btn--ghost { color: var(--cream); border-color: color-mix(in srgb, var(--cream) 60%, transparent); background: transparent; }
  .sheet__by { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 9.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 60%, transparent); }
  .sheet__by span { margin-left: 8px; font-size: 10px; line-height: 1; text-transform: uppercase; }
  .sheet__more .ar { width: 14px; height: 14px; flex: none; }
  .sheet__by .logo { color: var(--cream); } .sheet__by .logo--altus { --h: 18px; } .sheet__by .logo--arc { --h: 12px; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  html.menu-open .mbar { transform: translateY(calc(100% + 24px)) !important; }
}
/* contrast (launch gate 10-18): small text at AA */
.top__altus span { opacity: 1; color: color-mix(in srgb, var(--esp) 88%, var(--cream)); }
.free { color: #8A3914; }
.beat--cool .free, .phero--cool .free { color: #2B528A; }

/* ---- nav cells (10-18): four equal cells at every desktop width, Partners carries an eyebrow like the events so the
   titles line up, and its hover fill is espresso (an older shorthand left cream text on cream) ---- */
@media (min-width: 901px) {
  .top__links { grid-auto-columns: minmax(0, 1fr); }
  .top__links a { white-space: nowrap; min-width: 0; }
  .top__links a.top__pp:hover, .top__links a:last-child:hover { background-color: var(--esp); color: var(--cream); }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .top { gap: 14px; }
  .top__mark { width: 180px; }
  .top__links a { padding: 0 12px; font-size: 11px; letter-spacing: .1em; }
  .top__links a span { font-size: 9.5px; letter-spacing: .1em; }
  .top__cta { padding: 0 16px; font-size: 11px; letter-spacing: .1em; }
}
.top__cta { white-space: nowrap; }

/* ---- polish round 10-18 (Eric) ---- */
.sep { display: inline-block; margin: 0 .18em 0 .02em; }
.beat__act p { line-height: 1.95; }
.stack__list .btn--small { margin-top: 22px; }
.giving { grid-template-columns: auto 1fr auto; overflow: hidden; }
.giving__art { width: clamp(180px, 20vw, 300px); height: auto; margin: -10px -8px -24px 0; align-self: end; }
@media (max-width: 900px) { .giving { grid-template-columns: 1fr; } .giving__art { width: 220px; justify-self: end; margin: -6px -10px -26px 0; } }
@media (min-width: 901px) {
  /* two even rows: three short facts, then the two long ones at wider widths */
  .how__rules .pfacts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .how__rules .pfacts > div { grid-column: span 2; padding: 16px 22px 14px; border-left: 0; }
  .how__rules .pfacts > div:nth-child(n+4) { grid-column: span 3; }
  .how__rules .pfacts > div:nth-child(1), .how__rules .pfacts > div:nth-child(4) { padding-left: 0; }
  .how__rules .pfacts > div:nth-child(2), .how__rules .pfacts > div:nth-child(3), .how__rules .pfacts > div:nth-child(5) { padding-left: 22px; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
}

/* ---- Getting there: the venue beside its map (Winterstoke palette, drawn from OpenStreetMap) ---- */
.venue { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.venue__copy { display: grid; gap: 10px; justify-items: start; }
.venue__how { max-width: 38ch; font-size: 17px; line-height: 1.5; }
.venue__map { display: block; justify-self: stretch; width: 100%; border-radius: 18px; transition: transform .45s var(--e-out); }
.venue__map:hover { transform: translateY(-4px) rotate(-.4deg); }
.wmap { display: block; width: 100%; height: auto; }
.wmap .m-st { font: 800 13px var(--font); letter-spacing: .18em; fill: var(--esp); opacity: .8; paint-order: stroke; stroke: #F6EDE2; stroke-width: 5px; }
.wmap .m-water { font: 900 15px var(--font); letter-spacing: .4em; fill: var(--slate); opacity: .55; }
.wmap .m-tag { font: 900 14px var(--font); letter-spacing: .14em; paint-order: stroke; stroke: #F6EDE2; stroke-width: 6px; }
.wmap .m-tag--slate { fill: var(--slate); }
.wmap .m-name { font: 900 24px var(--font); letter-spacing: .06em; fill: var(--cream); }
.wmap .m-addr { font: 800 11.5px var(--font); letter-spacing: .14em; fill: var(--apricot); }
.wmap .m-osm { font: 700 11px var(--font); fill: var(--esp); opacity: .55; }
.wmap .m-pin { transform-box: fill-box; }
@media (max-width: 900px) { .venue { grid-template-columns: 1fr; } }

/* ---- legal pages ---- */
.legal { max-width: 820px; padding-bottom: clamp(64px, 8vw, 120px); }
.legal h2 { margin: 40px 0 12px; font-size: clamp(22px, 2vw, 28px); font-weight: 900; text-transform: uppercase; }
.legal p { font-size: 17px; line-height: 1.6; max-width: 64ch; }
.legal__lede { margin-top: 18px; font-size: 19px !important; }
.legal a { color: var(--rust); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal__list { margin: 0; border-top: 2px solid var(--esp); }
.legal__list > div { display: grid; grid-template-columns: 200px 1fr; gap: 6px 24px; padding: 16px 0 14px; border-bottom: 1px solid color-mix(in srgb, var(--esp) 22%, transparent); }
.legal__list dt { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); padding-top: 4px; }
.legal__list dd { margin: 0; font-size: 17px; line-height: 1.55; }
@media (max-width: 700px) { .legal__list > div { grid-template-columns: 1fr; } }

/* hero lockup + Arc'teryx as plain images (10-19): an <img> paints whole or not at all, where the animated inline
   SVG and the CSS-masked logo were half-painting on Eric's Mac */
.open__lockup { display: block; width: 100%; height: auto; animation: lockin .9s var(--e-out) .1s both; }
@keyframes lockin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.open__arc { position: absolute; z-index: 2; right: calc(var(--gutter) + min(46vw, 700px) * .0916); top: calc(var(--top-h) + 4.5vh + min(46vw, 700px) * .3176 + 14px); display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 9px 16px; border-radius: 8px; background: var(--cream); color: var(--esp); text-decoration: none; box-shadow: 0 6px 18px rgba(36, 24, 18, .16);
  animation: lockin .7s var(--e-out) 1s both; transition: background-color .25s; }
.open__arc span { font-size: 10.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; padding-top: 2px; }
.open__arc img { display: block; height: 20px; width: auto; }
.open__arc:hover { background: #fff; }
@media (max-width: 900px) { .open__arc { right: calc(var(--gutter) + (100vw - 2 * var(--gutter)) * .0916); top: calc(var(--top-h) + 3vh + (100vw - 2 * var(--gutter)) * .3176 + 12px); padding: 8px 12px 7px 13px; } .open__arc img { height: 16px; } .open__arc span { font-size: 9.5px; } }
.ticket__fine { margin: 0; font-size: 12px; font-weight: 700; opacity: .75; }
.ticket__fine a { color: inherit; }

/* nav: no strip between the last cell and Sell your gear */
@media (min-width: 901px) { .top__cta { margin-left: -24px; } }
@media (min-width: 901px) and (max-width: 1240px) { .top__cta { margin-left: -14px; } }