/* Hotshots Lacrosse Club: the trailhead.
   A hanging entrance sign that turns between the club's two logos, a junction post of routed
   arrow boards for the collections, and a flat serigraph range behind them. Hotshots is daylight
   on paper; Grizzlies is the same range at dusk. Loops move transform and opacity only. */

/* Until National Park arrives (or if it never does), a narrower stand-in keeps the routed lettering inside its boards. */
@font-face { font-family: 'Trail Fallback'; src: local('Arial Bold'), local('Arial'), local('Roboto'), local('Helvetica Neue'); size-adjust: 91%; }

:root {
  --paper: #f4ecd9;
  --paper-2: #ebe0c6;
  --paper-3: #dfd2b3;
  --plate: #ffffff;
  --ink: #17283c;
  --ink-2: #33475f;
  --ink-3: #56687d;
  --line: rgba(23, 40, 60, .16);
  --red: #cc1830;
  --red-ink: #b51229;
  --navy: #17283c;
  --night: #0e1828;
  --cream: #f4ecd9;
  --timber: #101d2e;
  --timber-ink: #f4ecd9;
  --board: #17283c;
  --board-ink: #f4ecd9;
  --gear: #3f5873;
  --gear-fill: #f4ecd9;
  --cta: #17283c;
  --cta-ink: #f4ecd9;
  --focus: #cc1830;
  --font: 'National Park', 'Trail Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: 40px;
  --top-h: 68px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -20 700 640' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M355 300C358 303 361 307 363 311C364 314 364 319 363 322C361 326 358 329 354 332C350 334 345 335 341 336C336 338 332 338 328 339C324 340 321 341 317 342C313 342 309 342 305 342C302 341 298 340 295 339C292 337 289 335 286 334C283 333 281 332 277 331C274 330 271 330 268 329C265 327 262 326 259 324C256 322 253 320 251 317C249 315 247 312 246 309C245 306 245 303 245 300C245 297 247 294 248 291C249 288 251 286 251 283C252 280 252 276 253 273C254 269 255 265 258 262C260 259 264 257 268 255C272 254 277 254 281 254C286 254 290 255 294 255C298 256 302 257 306 258C309 259 313 260 316 261C319 263 321 266 323 268C325 270 327 273 328 275C330 277 331 279 333 281C335 282 337 284 340 286C342 288 344 290 347 292C350 294 353 297 355 300ZM386 300C390 305 395 311 397 317C399 322 399 329 397 335C395 340 389 345 383 349C378 352 370 354 363 356C356 358 350 359 344 361C338 362 332 364 326 364C320 365 314 365 308 364C303 363 297 360 292 358C288 356 284 353 279 351C275 349 271 348 266 347C261 346 256 346 251 344C245 342 240 340 235 338C231 335 226 331 223 328C220 324 217 319 215 314C214 310 213 305 214 300C215 295 217 291 219 286C220 282 223 278 224 273C226 268 226 263 228 258C230 253 231 247 235 242C239 238 245 234 251 232C257 230 265 230 272 230C278 230 285 232 291 232C297 233 303 234 309 235C314 236 320 238 324 240C329 242 333 246 336 250C339 253 341 257 344 261C347 264 349 267 351 270C354 273 358 275 361 278C365 281 369 284 373 288C377 291 382 295 386 300ZM418 300C423 307 429 315 432 322C434 330 434 340 431 347C428 354 420 361 412 366C405 370 394 373 385 376C376 379 368 381 359 383C351 385 343 387 335 387C327 388 319 387 311 385C304 384 296 379 290 376C284 373 279 369 273 367C267 364 262 364 255 363C248 361 241 361 233 360C226 358 218 355 212 352C205 348 199 343 194 338C190 333 186 326 184 320C181 314 181 306 182 300C183 294 186 287 188 281C191 275 194 269 196 263C198 256 199 249 202 243C205 236 208 228 214 223C219 218 228 213 236 211C244 208 254 208 263 208C272 208 280 210 288 210C296 211 304 211 311 212C319 213 327 215 333 218C339 221 345 226 349 231C354 236 356 242 360 247C363 251 366 255 370 259C374 263 378 266 383 270C388 274 394 278 400 283C406 288 413 293 418 300ZM450 300C456 308 463 319 466 328C468 338 468 350 464 359C460 368 450 376 441 382C432 389 418 392 408 396C397 400 386 402 375 405C365 407 355 410 345 410C334 411 323 409 314 407C304 404 296 398 288 393C280 389 274 384 267 382C260 379 253 379 244 378C236 376 225 377 216 375C206 373 196 370 187 366C179 361 171 355 165 348C159 342 154 334 151 325C148 317 148 308 149 300C150 292 153 283 156 275C160 268 163 260 167 252C170 244 172 236 176 228C181 220 185 211 193 204C200 198 211 193 221 190C231 188 244 188 255 188C265 188 276 189 285 189C295 189 305 188 314 190C324 191 334 192 342 196C350 200 357 206 363 212C369 218 372 226 376 232C380 238 384 243 389 248C394 253 400 257 406 262C413 267 420 272 428 278C435 285 444 292 450 300ZM482 300C489 310 497 322 500 334C502 346 502 360 496 370C491 381 480 391 469 399C458 406 443 411 430 416C417 421 404 424 391 427C379 430 366 433 354 433C341 433 328 431 317 427C305 423 295 415 286 410C276 405 270 399 261 396C253 393 244 393 234 392C223 391 210 393 198 391C186 389 173 386 162 380C152 375 142 367 134 359C127 351 121 341 118 331C114 321 114 310 114 300C115 290 120 280 124 270C127 260 132 251 137 242C141 232 145 222 150 213C156 203 163 193 172 186C182 179 195 174 208 171C220 168 234 169 247 169C260 168 271 169 283 169C295 168 306 166 317 167C329 168 341 169 351 173C361 178 370 186 377 193C384 201 387 210 393 217C398 225 402 231 408 237C414 243 422 247 430 253C438 260 448 266 456 273C465 281 475 290 482 300ZM515 300C522 312 531 326 533 340C535 353 534 369 528 382C522 394 509 406 497 415C484 424 467 430 452 436C437 442 422 446 408 450C393 453 378 457 363 456C349 456 333 453 319 448C306 442 294 432 284 426C273 420 266 413 256 409C246 406 236 407 223 407C211 407 195 409 180 407C166 405 150 401 137 395C124 389 113 380 104 370C95 360 88 349 84 337C80 325 78 312 79 300C80 288 85 276 89 264C94 252 100 242 106 231C112 219 117 208 125 198C133 187 141 176 153 169C165 162 180 157 195 154C209 151 226 152 240 151C254 150 267 150 280 149C294 148 307 144 320 145C334 145 349 146 360 151C372 156 383 165 391 174C399 182 403 194 410 202C416 211 421 218 429 225C436 232 446 237 455 244C465 252 476 259 486 268C496 277 507 288 515 300ZM547 300C555 314 563 330 565 345C567 361 565 378 558 392C551 407 537 420 523 430C509 441 491 448 474 455C458 462 441 468 424 472C407 476 390 480 373 479C356 479 337 474 322 467C307 461 293 449 282 441C270 434 262 426 250 423C239 420 227 422 212 422C198 422 179 425 162 423C145 421 126 417 112 410C97 403 84 392 74 381C63 370 55 356 50 343C45 329 42 314 43 300C44 286 48 271 54 258C59 244 66 232 74 219C81 207 89 194 99 183C109 171 121 160 135 152C149 145 167 140 183 137C199 134 217 136 233 134C249 133 263 132 278 130C293 128 308 123 323 122C339 122 356 123 370 128C383 133 395 144 405 154C415 164 420 177 427 186C435 196 441 204 450 212C459 220 471 226 482 235C493 243 506 252 517 263C528 274 539 286 547 300ZM580 300C588 316 595 333 596 351C597 368 595 387 587 403C579 419 564 434 549 446C534 458 514 467 496 475C478 483 459 491 440 495C421 500 401 504 382 502C363 501 341 495 324 487C307 479 293 465 280 457C266 448 258 440 245 437C232 433 218 437 201 437C185 438 163 442 143 440C124 438 103 433 86 425C70 417 55 405 43 392C31 379 22 364 16 349C9 333 6 316 6 300C6 284 11 267 17 252C22 236 32 221 41 207C51 193 61 179 73 168C86 156 101 144 117 137C134 129 154 125 172 122C191 119 210 121 227 119C244 117 259 115 275 112C292 108 309 101 326 100C343 99 363 100 379 105C394 111 408 123 419 134C430 145 437 159 446 170C455 181 462 190 473 199C484 208 498 215 511 225C523 234 538 245 549 257C561 270 572 284 580 300ZM612 300C619 317 625 337 626 356C626 374 623 395 615 413C606 430 591 447 575 460C558 474 538 485 518 494C498 504 477 513 456 518C435 523 413 527 391 525C369 523 346 515 327 506C308 497 292 481 278 472C263 463 254 454 239 451C224 448 209 452 190 453C171 454 146 459 125 457C103 454 80 449 61 440C42 431 26 417 13 403C0 388 -11 372 -19 354C-26 337 -32 318 -32 300C-33 282 -28 262 -22 245C-15 228 -4 211 8 195C19 180 33 165 48 153C64 141 81 129 100 122C119 114 142 111 162 108C182 105 202 107 221 104C239 102 255 98 273 94C291 89 310 80 329 79C348 77 370 77 388 83C405 88 421 102 434 114C447 125 454 141 465 153C475 165 485 174 498 185C510 195 527 203 541 214C555 225 570 237 582 252C594 266 605 283 612 300ZM644 300C650 319 655 340 654 361C654 381 650 403 641 422C632 441 616 459 599 475C582 490 560 503 539 513C518 524 496 534 472 540C449 545 424 550 400 547C376 545 350 535 329 525C309 515 292 497 276 487C259 477 249 469 233 466C217 463 199 468 178 470C157 471 129 476 105 474C82 471 56 464 36 454C15 444 -2 429 -17 413C-32 398 -44 379 -53 360C-63 341 -70 320 -71 300C-72 280 -68 258 -61 238C-53 219 -40 200 -26 183C-12 167 5 151 23 138C42 126 63 115 84 108C106 100 131 98 153 95C175 92 196 94 215 91C235 87 251 82 271 76C290 71 311 60 332 57C353 55 378 54 397 60C416 66 434 81 448 93C463 106 472 123 484 135C497 148 509 158 524 169C539 180 557 190 573 202C588 215 605 230 616 246C628 262 638 281 644 300Z'/%3E%3C/svg%3E");
  color-scheme: light;
}
html.griz {
  --paper: #0e1828;
  --paper-2: #16243a;
  --paper-3: #1f3250;
  --ink: #f4ecd9;
  --ink-2: #d8cfbb;
  --ink-3: #a7b3c4;
  --line: rgba(244, 236, 217, .2);
  --red-ink: #ff6b78;
  --timber: #f4ecd9;
  --timber-ink: #101d2e;
  --board: #f4ecd9;
  --board-ink: #18244a;
  --gear: #6f9bd1;
  --gear-fill: #0e1828;
  --cta: #cc1830;
  --cta-ink: #fff8ea;
  --focus: #ffd9a0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 500 16px/1.5 var(--font); -webkit-font-smoothing: antialiased;
  transition: background-color .5s ease, color .5s ease;
  overflow-x: hidden;
}
/* Locking the page for a sheet removes the scrollbar; --sbw gives its width back so nothing shifts. */
body.locked { overflow: hidden; padding-right: var(--sbw, 0px); }
body.locked .top { right: var(--sbw, 0px); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.defs { position: absolute; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--cta); color: var(--cta-ink); padding: 12px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }

/* ------------------------------------------------------------------ header */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--top-h); color: var(--ink); }
.top::before { content: ''; position: absolute; inset: 0; background: var(--paper); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .25s ease; }
.top.solid::before { opacity: 1; }
.top-in { position: relative; height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bears { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--ink); transition: opacity .25s ease, transform .3s var(--ease), visibility 0s; }
.top:not(.solid) .bears { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
html.solo .bear[data-bear='grizzlies'], html.solo .rider, html.solo .sign.cross { display: none; }
.bear { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.bear img { width: 32px; height: 32px; object-fit: contain; }
.bear[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.bear[aria-pressed='false'] img { opacity: .9; }
.top-end { display: flex; align-items: center; gap: 4px; }
.tool { position: relative; height: 44px; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.tool-bag { background: var(--cta); color: var(--cta-ink); padding: 0 14px; }
.tool-bag:hover { background: var(--cta); }
.tool-bag b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; letter-spacing: 0; display: inline-grid; place-items: center; }
html.griz .tool-bag b { background: #fff8ea; color: var(--red); }
.tool-bag b.bump { animation: bump .45s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* -------------------------------------------------------------------- hero */
main { container-type: inline-size; display: block; }
.hero {
  --vw: 100vw;
  --wrap: min(1320px, var(--vw));
  --inner: calc(var(--wrap) - 2 * var(--pad));
  --gap: 76px;
  --gantry-w: calc((var(--inner) - var(--gap)) * .61);
  --board-w: min(calc(var(--gantry-w) - 92px), 660px);
  --board-h: calc(var(--board-w) * .41);
  --gantry-top: clamp(98px, 13vh, 128px);
  --beam-y: 26px;
  --beam-h: 26px;
  --chain: 38px;
  --sun-d: calc(var(--board-w) * .8);
  --sun-x: calc((var(--vw) - var(--wrap)) / 2 + var(--pad) + var(--gantry-w) / 2);
  --sun-y: calc(var(--gantry-top) + var(--beam-y) + var(--beam-h) + var(--chain) + var(--board-h) / 2);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: 760px;
  min-height: clamp(720px, 100svh, 900px);
  background: #f4ecd9;
}
/* Container units measure the page without its scrollbar; viewport units are the fallback. */
@supports (width: 1cqw) { .hero { --vw: 100cqw; } }
html.griz .hero { background: #0e1828; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: var(--timber); transition: background-color .5s ease; }
.scene { position: absolute; inset: 0; z-index: 0; transition: opacity .5s ease; }
.scene-hot { background: #f4ecd9; }
.scene-griz { background: #101c30; opacity: 0; }
html.griz .scene-griz { opacity: 1; }
.sun { position: absolute; left: var(--sun-x); top: var(--sun-y); width: var(--sun-d); height: var(--sun-d); margin: calc(var(--sun-d) / -2) 0 0 calc(var(--sun-d) / -2); border-radius: 50%; background: var(--red); will-change: transform; }
.ridge { position: absolute; left: -20px; bottom: 0; width: calc(100% + 40px); height: 66%; will-change: transform; }
.scene-hot .ridge-1 { fill: #bccacd; }
.scene-hot .ridge-2 { fill: #8399a9; }
.scene-hot .ridge-3 { fill: #3f5873; }
.scene-hot .ridge-4 { fill: #f4ecd9; }
.scene-griz .ridge-1 { fill: #274772; }
.scene-griz .ridge-2 { fill: #1c3458; }
.scene-griz .ridge-3 { fill: #142541; }
.scene-griz .ridge-4 { fill: #0e1828; }
.ridge-4 { height: 66%; }

.stage { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--gantry-top) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 61fr) minmax(0, 39fr); gap: var(--gap); }

/* The gantry: two posts, a beam, and the sign that hangs from it. */
.gantry { position: relative; min-height: calc(var(--beam-y) + var(--beam-h) + var(--chain) + var(--board-h) + 190px); }
.post { position: absolute; top: 0; bottom: 0; width: 22px; background: var(--timber); border-radius: 4px 4px 0 0; transition: background-color .5s ease; transform-origin: 50% 100%; }
.post::after { content: ''; position: absolute; inset: 0 auto 0 4px; width: 2px; background: currentColor; opacity: .12; }
.post-a { left: 14px; }
.post-b { right: 14px; }
.beam { position: absolute; top: var(--beam-y); left: -16px; right: -16px; height: var(--beam-h); background: var(--timber); color: var(--timber-ink); display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 9px 100%); transition: background-color .5s ease, color .5s ease; }
.beam span { font-size: 10.5px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; opacity: .82; white-space: nowrap; }
.hang { position: absolute; top: calc(var(--beam-y) + var(--beam-h)); left: 50%; width: var(--board-w); margin-left: calc(var(--board-w) / -2); transform-origin: 50% 0; perspective: 1500px; will-change: transform; }
.chain { position: absolute; top: 0; width: 3px; height: var(--chain); background: var(--timber); transition: background-color .5s ease; }
.chain::after { content: ''; position: absolute; left: -4px; bottom: -5px; width: 11px; height: 11px; border-radius: 50%; border: 3px solid var(--timber); transition: border-color .5s ease; }
.chain-a { left: 13%; }
.chain-b { right: 13%; }
.flipper { position: relative; margin-top: var(--chain); height: var(--board-h); transform-style: preserve-3d; transition: transform .95s cubic-bezier(.3, 1.35, .45, 1); }
html.griz .flipper { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5%; padding: 0 7% 0 6.5%; }
.face::before { content: ''; position: absolute; inset: 9px; border: 2.5px solid currentColor; border-radius: 9px; opacity: .88; pointer-events: none; }
.face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background:
  radial-gradient(circle at 24px 24px, currentColor 0 3.5px, transparent 4.5px),
  radial-gradient(circle at calc(100% - 24px) 24px, currentColor 0 3.5px, transparent 4.5px),
  radial-gradient(circle at 24px calc(100% - 24px), currentColor 0 3.5px, transparent 4.5px),
  radial-gradient(circle at calc(100% - 24px) calc(100% - 24px), currentColor 0 3.5px, transparent 4.5px); opacity: .88; }
/* Each face also fades at the edge-on moment, so the turn never depends on backface culling alone. */
.face-hot { background: #17283c; color: #f4ecd9; transition: opacity 0s .2s; }
.face-griz { background: #f4ecd9; color: #18244a; transform: rotateY(180deg); opacity: 0; transition: opacity 0s .2s; }
html.griz .face-hot { opacity: 0; }
html.griz .face-griz { opacity: 1; }
.emblem { width: calc(var(--board-h) * .76); height: auto; position: relative; }
.face-griz .emblem { width: calc(var(--board-h) * .7); }
.routed { position: relative; min-width: 0; }
.routed h1, .routed .r-head { display: block; font-size: inherit; font-weight: inherit; }
.r-name { display: block; font-weight: 800; font-size: calc(var(--board-w) * .097); line-height: .92; letter-spacing: .012em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.r-sub { display: block; margin-top: calc(var(--board-w) * .014); font-weight: 600; font-size: calc(var(--board-w) * .041); line-height: 1; letter-spacing: .3em; text-transform: uppercase; }
.r-tag { margin-top: calc(var(--board-w) * .028); padding-top: calc(var(--board-w) * .022); border-top: 3px solid var(--red); font-weight: 800; font-size: calc(var(--board-w) * .03); letter-spacing: .34em; text-transform: uppercase; line-height: 1; }
.face-griz .r-name { color: #cc1830; text-shadow: none; }
.face.no-emblem { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.face.no-emblem .emblem { display: none; }
.face-griz .r-tag { border-top-color: #18244a; }

.rider { position: relative; width: 78%; margin: 16px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.link { position: absolute; top: -16px; width: 3px; height: 16px; background: var(--timber); transition: background-color .5s ease; }
.link-a { left: 16%; }
.link-b { right: 16%; }
.plank { position: relative; height: 54px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--timber); font-weight: 800; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; transition: background-color .3s ease, color .3s ease, border-color .5s ease, transform .2s var(--ease); }
.plank img { width: 34px; height: 34px; object-fit: contain; }
.plank[aria-pressed='true'] { background: var(--timber); color: var(--timber-ink); }
.plank[aria-pressed='false']:hover { transform: translateY(-2px); }
.plank[aria-pressed='false']::after { content: ''; width: 8px; height: 8px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); margin-left: -2px; }

.lean { --lax-head: #fff; --lax-mesh: var(--timber); --lax-strings: var(--timber); --lax-sidewall: var(--timber); --lax-shaft: #cc1830; --lax-grip: #f4ecd9; --lax-cap: var(--timber); position: absolute; right: -8px; bottom: 26px; width: 0; height: 0; pointer-events: none; }
.lean svg { position: absolute; right: 0; bottom: 0; height: min(40vh, 340px); width: auto; transform-origin: 50% 100%; transform: rotate(9deg); overflow: visible; }

/* The junction post: one arrow board per collection. */
.junction { position: relative; padding: 26px 0 120px; justify-self: center; width: min(100%, 330px); }
.jpost { position: absolute; left: 24px; top: 0; bottom: 0; width: 16px; background: var(--timber); border-radius: 4px 4px 0 0; transition: background-color .5s ease; transform-origin: 50% 100%; }
.signs { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1vh, 9px); perspective: 900px; }
.sign { --tip: 21px; position: relative; display: inline-flex; align-items: center; gap: 16px; height: clamp(36px, 4.9vh, 44px); padding: 0 calc(var(--tip) + 16px) 0 56px; min-width: 232px; background: var(--board); color: var(--board-ink); font-weight: 800; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); transition: transform .22s var(--ease), background-color .5s ease, color .5s ease; transform-origin: 32px 50%; }
.sign::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 8px; background: radial-gradient(circle at 4px 11px, currentColor 0 2.6px, transparent 3.4px), radial-gradient(circle at 4px calc(100% - 11px), currentColor 0 2.6px, transparent 3.4px); opacity: .8; }
.sign small { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .06em; opacity: .7; }
.sign:nth-child(3n + 1) { transform: rotate(-.7deg); }
.sign:nth-child(3n + 2) { transform: rotate(.5deg); }
.sign:hover, .sign:focus-visible { transform: translateX(8px); }
.sign.gear { background: var(--board); color: var(--board); isolation: isolate; }
.sign.gear::after { content: ''; position: absolute; inset: 2.5px; z-index: -1; background: var(--gear-fill); clip-path: polygon(0 0, calc(100% - var(--tip) + 1.5px) 0, calc(100% - 3.5px) 50%, calc(100% - var(--tip) + 1.5px) 100%, 0 100%); transition: background-color .5s ease; }
.sign.cross { --tip: 20px; background: var(--red); color: #fff8ea; padding: 0 16px 0 calc(var(--tip) + 12px); margin: 0 0 12px -58px; min-width: 0; clip-path: polygon(var(--tip) 0, 100% 0, 100% 100%, var(--tip) 100%, 0 50%); transform-origin: calc(100% - 20px) 50%; }
.sign.cross::before { left: auto; right: 0; display: none; }
.sign.cross img { width: 28px; height: 28px; object-fit: contain; }
.sign.cross:hover, .sign.cross:focus-visible { transform: translateX(-8px); }
html.griz .sign .hot-only, html:not(.griz) .sign .griz-only { display: none; }
.signs .sign.gear:first-of-type, .signs .gap { margin-top: 12px; }

/* --------------------------------------------------------------- hero motion */
@keyframes rise { from { transform: translateY(var(--from, 60px)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes swing-in { 0% { transform: rotate(-9deg); opacity: 0; } 12% { opacity: 1; } 30% { transform: rotate(5deg); } 52% { transform: rotate(-2.6deg); } 72% { transform: rotate(1.2deg); } 88% { transform: rotate(-.4deg); } 100% { transform: none; opacity: 1; } }
@keyframes twirl-in { from { transform: rotateY(-150deg); } to { transform: rotateY(0); } }
@keyframes nudge { 0% { transform: rotate(0); } 28% { transform: rotate(3.4deg); } 55% { transform: rotate(-2deg); } 80% { transform: rotate(.8deg); } 100% { transform: rotate(0); } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(.5deg); } 75% { transform: rotate(-.5deg); } }
@keyframes drop { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sign-in { from { transform: scaleX(0); opacity: 0; } to { opacity: 1; } }
@keyframes sign-out { to { transform: rotateX(88deg); opacity: 0; } }
@keyframes sign-turn { from { transform: rotateX(-88deg); opacity: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

html.intro .top { animation: fade .6s ease .7s both; }
html.intro .sun { animation: rise 1.2s var(--ease) both; --from: 140px; }
html.intro .ridge-1 { animation: rise 1s var(--ease) .05s both; --from: 70px; }
html.intro .ridge-2 { animation: rise 1s var(--ease) .14s both; --from: 90px; }
html.intro .ridge-3 { animation: rise 1s var(--ease) .23s both; --from: 110px; }
html.intro .ridge-4 { animation: rise .9s var(--ease) .3s both; --from: 60px; }
html.intro .post, html.intro .jpost { animation: grow-y .6s var(--ease) .25s both; }
html.intro .post-b { animation-delay: .32s; }
html.intro .jpost { animation-delay: .42s; }
html.intro .beam { animation: grow-x .5s var(--ease) .5s both; }
html.intro .hang { animation: swing-in 1.5s cubic-bezier(.3, .1, .3, 1) .7s both; }
html.intro .flipper { animation: twirl-in 1s cubic-bezier(.2, .7, .2, 1) .7s both; }
html.intro .rider { animation: drop .45s var(--ease) 1.35s both; }
html.intro .lean { animation: fade .5s ease 1.2s both; }
html.intro .stage .sign { animation: sign-in .42s var(--ease) calc(.8s + var(--i, 0) * 50ms) both; }
@keyframes hint { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(4px, -4px); } }
html.settled .plank[aria-pressed='false']::after { animation: hint .7s ease-in-out 3; }
.hang.nudge { animation: nudge 1s cubic-bezier(.3, .1, .3, 1) both; }
.hang.sway { animation: sway 9s ease-in-out infinite; }
.hero.offscreen .hang.sway { animation-play-state: paused; }
.signs.leaving .sign { animation: sign-out .22s ease-in calc(var(--i, 0) * 22ms) both; }
.signs.entering .sign { animation: sign-turn .34s var(--ease) calc(var(--i, 0) * 30ms) both; }

/* ---------------------------------------------------------------- sections */
.side { animation: fade .45s ease both; }
/* The trail: a dashed line down the page, a blaze at every stop, and the logo walking it as you scroll. */
.trailed { --trail-w: 68px; position: relative; display: grid; grid-template-columns: var(--trail-w) minmax(0, 1fr); padding-top: 26px; padding-bottom: 34px; }
.trail { position: relative; }
.trail::before { content: ''; position: absolute; left: 21px; top: -26px; bottom: 0; border-left: 3px dashed var(--line); border-left-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.hiker { position: sticky; top: calc(50vh - 22px); z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin: 40px 0 60px; border-radius: 50%; background: var(--paper); transition: background-color .5s ease; }
.hiker img { width: 40px; height: 40px; object-fit: contain; }
html.griz .hot-only, html:not(.griz) .griz-only { display: none; }
.stops { min-width: 0; }
/* Contour rings behind the shelves, like the corner of a trail map. A mask, so they take the ink of the logo in view. */
.trailed::after, .col-body::after { content: ''; position: absolute; z-index: -1; right: -210px; top: 10px; width: 820px; aspect-ratio: 700 / 640; background: var(--ink); opacity: .09; -webkit-mask: var(--topo) center / contain no-repeat; mask: var(--topo) center / contain no-repeat; pointer-events: none; }
.trailed, .col-body { isolation: isolate; }
.col-body { position: relative; }
.col-body::after { top: -150px; right: -260px; }
.shared { position: relative; }
.shared::after { content: ''; position: absolute; z-index: -1; left: -330px; top: 120px; width: 720px; aspect-ratio: 700 / 640; background: var(--ink); opacity: .08; transform: rotate(160deg); -webkit-mask: var(--topo) center / contain no-repeat; mask: var(--topo) center / contain no-repeat; pointer-events: none; }
#home, #collection { overflow-x: clip; }
.shelf { position: relative; padding: 26px 0 30px; }
.shelf-head { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.marker { margin: 0; font-size: inherit; line-height: 1; }
.sign.big { --tip: 24px; height: 52px; min-width: 0; padding: 0 calc(var(--tip) + 18px) 0 22px; font-size: 22px; letter-spacing: .08em; transform: none; transform-origin: 0 50%; }
.sign.big::before { display: none; }
.sign.big:hover, .sign.big:focus-visible { transform: translateX(6px); }
.leader { flex: 1; min-width: 24px; border-bottom: 3px dashed var(--line); border-bottom-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.blaze { position: absolute; left: calc(var(--trail-w) * -1 + 13px); top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--red); border: 3px solid var(--paper); transform: rotate(45deg); z-index: 3; transition: border-color .5s ease; }
.shelf.gear .blaze { background: var(--ink); }
.kicker { margin: 30px 0 -6px; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.col-head h1 { font-weight: 800; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.shelf.rv { opacity: 1; transform: none; }
.shelf.rv .sign.big { transform: scaleX(0); transition: transform .55s var(--ease), background-color .5s ease, color .5s ease; }
.shelf.rv.in .sign.big { transform: none; }
.shelf.rv.in .sign.big:hover, .shelf.rv.in .sign.big:focus-visible { transform: translateX(6px); }
.shelf.rv .leader, .shelf.rv .more, .shelf.rv .rail-nav { opacity: 0; transition: opacity .5s ease .25s; }
.shelf.rv.in .leader, .shelf.rv.in .more, .shelf.rv.in .rail-nav { opacity: 1; }
.shelf.rv .rail > *, .shelf.rv .grid > * { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .55s var(--ease); transition-delay: calc(var(--n, 0) * 50ms + .12s); }
.shelf.rv.in .rail > *, .shelf.rv.in .grid > * { opacity: 1; transform: none; }
.more { margin-left: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.more svg, .arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.more:hover svg { transform: translateX(4px); }
.rail-nav { display: flex; gap: 6px; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; transition: background-color .2s, color .2s, opacity .2s; }
.round svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.round:hover { background: var(--ink); color: var(--paper); }
.round:disabled { opacity: .3; pointer-events: none; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px 0 10px; margin: -6px 0 0; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; }

.tile { position: relative; min-width: 0; display: flex; flex-direction: column; }
.tile-open { display: block; width: 100%; text-align: left; text-decoration: none; border-radius: 12px; }
.plate { position: relative; display: block; aspect-ratio: 1; background: var(--plate); border-radius: 12px; border: 1px solid var(--line); transition: transform .28s var(--ease); }
.plate img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.tile-open:hover .plate, .tile-open:focus-visible .plate { transform: translateY(-5px); }
.go { position: absolute; right: -1px; bottom: 14px; height: 30px; padding: 0 20px 0 12px; display: inline-flex; align-items: center; background: var(--navy); color: var(--cream); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); opacity: 0; transform: translateX(-10px); transition: opacity .2s ease, transform .25s var(--ease); }
.tile-open:hover .go, .tile-open:focus-visible .go { opacity: 1; transform: none; }
.stamp { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border: 2px solid var(--red); color: var(--red); border-radius: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-4deg); background: #fff; }
.stamp.sale { border-color: var(--navy); color: var(--navy); transform: rotate(3deg); left: auto; right: 10px; }
.tile.out .plate img { opacity: .45; }
.t-who { display: block; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); min-height: 16px; }
.t-name { display: block; margin-top: 2px; font-weight: 700; font-size: 16px; line-height: 1.25; text-wrap: balance; }
.t-price { display: block; margin-top: 4px; font-weight: 600; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.t-price s { color: var(--ink-3); margin-right: 6px; font-weight: 500; }
.t-price.cut { color: var(--red-ink); }
.t-brand { display: inline-flex; align-items: center; gap: 6px; }
.t-brand img { width: 16px; height: 16px; object-fit: contain; display: inline-block; }
.styles { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: nowrap; }
.style { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff center / 170% no-repeat; border: 1px solid var(--line); flex: none; }
.style::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.style[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.style b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #17283c; background: rgba(255, 255, 255, .78); border-radius: 50%; }
.styles .plus { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-left: 2px; }
.tile-more { display: grid; place-items: center; align-content: center; gap: 10px; aspect-ratio: 1; border: 2px dashed var(--line); border-radius: 12px; text-decoration: none; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 16px; }
.tile-more svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.tile-more:hover svg { transform: translateX(6px); }
.tile-more span { display: block; }

/* the other trail */
.fork { margin: 22px 0 14px; }
.fork-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; width: 100%; padding: 26px 34px; border-radius: 18px; text-align: left; background: #0e1828; color: #f4ecd9; overflow: hidden; isolation: isolate; }
html.griz .fork-card { background: #f4ecd9; color: #17283c; }
.fork-card .ridge { left: 0; width: 100%; height: 78%; z-index: -1; fill: #1c3458; }
html.griz .fork-card .ridge { fill: #bccacd; }
.fork-card .fork-sun { position: absolute; right: 12%; top: 50%; width: 150px; height: 150px; margin-top: -40px; border-radius: 50%; background: var(--red); z-index: -2; }
.fork-card img { width: 92px; height: 92px; object-fit: contain; }
.fork-card small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .78; }
.fork-card strong { display: block; font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1.05; }
.fork-card .fork-go { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px 0 18px; background: var(--red); color: #fff8ea; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; transition: transform .2s var(--ease); }
.fork-card:hover .fork-go { transform: translateX(6px); }

/* collection page */
.col-scene { position: relative; height: 168px; margin-top: var(--top-h); overflow: hidden; background: #f4ecd9; border-bottom: 4px solid var(--timber); transition: background-color .5s ease, border-color .5s ease; }
html.griz .col-scene { background: #101c30; }
.col-scene .sun { left: max(9%, calc((100% - 1320px) / 2 + 120px)); top: 62%; width: 150px; height: 150px; margin: -75px 0 0 -75px; will-change: auto; }
.col-scene svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.col-scene .c1 { fill: #bccacd; } .col-scene .c2 { fill: #8399a9; } .col-scene .c3 { fill: #3f5873; }
html.griz .col-scene .c1 { fill: #274772; } html.griz .col-scene .c2 { fill: #1c3458; } html.griz .col-scene .c3 { fill: #142541; }
.col-top { padding-top: 18px; padding-bottom: 8px; }
.crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); }
.crumb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.col-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 6px 0 16px; }
.col-head h1 { font-size: clamp(34px, 5vw, 60px); }
.col-count { font-weight: 600; color: var(--ink-3); padding-bottom: 6px; }
.col-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.select { height: 44px; padding: 0 38px 0 14px; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317283c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 18px no-repeat; color: var(--ink); font: 700 14px var(--font); appearance: none; -webkit-appearance: none; }
html.griz .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4ecd9' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.strip { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 4px var(--pad) 14px; margin: 0 calc(-1 * var(--pad)); }
.strip::-webkit-scrollbar { display: none; }
.strip .sign { flex: none; height: 44px; min-width: 0; padding-left: 18px; transform: none; font-size: 14px; }
.strip .sign::before { display: none; }
.strip .sign[aria-current='page'] { background: var(--red); color: #fff8ea; }
.strip .sign:hover { transform: none; }
.col-body { padding-top: 14px; padding-bottom: 70px; }
.empty { padding: 60px 0; text-align: center; color: var(--ink-3); font-weight: 600; }

/* ------------------------------------------------------------------ footer */
.foot { position: relative; margin-top: 130px; background: #0c1626; color: #f4ecd9; }
html.griz .foot { background: #17263d; }
html.griz .foot-ridge { fill: #17263d; }
.foot, .foot-ridge { transition: background-color .5s ease, fill .5s ease; }
.foot-ridge { position: absolute; left: 0; bottom: 100%; width: 100%; height: 96px; fill: #0c1626; margin-bottom: -1px; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.3fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 40px; padding-top: 36px; padding-bottom: 36px; }
.foot-marks { display: flex; align-items: center; gap: 18px; }
.foot-marks img { width: 84px; height: 84px; object-fit: contain; }
.foot-name { margin-top: 16px; font-weight: 800; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.foot-place { color: #a7b3c4; font-size: 14px; font-weight: 600; }
.foot h3 { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #a7b3c4; margin-bottom: 8px; }
.foot-col a, .foot-col button { display: flex; align-items: center; min-height: 36px; font-weight: 600; font-size: 15px; text-decoration: none; text-align: left; }
.foot-col a:hover, .foot-col button:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-base { border-top: 1px solid rgba(244, 236, 217, .16); }
.foot-base .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 26px; flex-wrap: wrap; }
.powered { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #a7b3c4; }
.powered img { height: 22px; width: auto; }
.powered a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #f4ecd9; }
.foot-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ sheets */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(8, 14, 24, .56); animation: fade .2s ease both; }
.sheet { position: fixed; z-index: 80; background: var(--paper); color: var(--ink); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; outline: none; }
.sheet-product, .sheet-search { inset: 22px; max-width: 1280px; margin: 0 auto; border-radius: 20px; animation: sheet-up .32s var(--ease) both; }
.sheet-product { bottom: auto; max-height: calc(100% - 44px); }
.sheet-product .sheet-bar, .sheet-search .search-bar { border-radius: 20px 20px 0 0; }
.sheet-side { top: 0; right: 0; bottom: 0; width: min(460px, 100%); animation: sheet-right .3s var(--ease) both; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-right { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--paper); flex: none; }
.x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.x:hover { background: var(--ink); color: var(--paper); }
.sheet-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--pad); background: var(--paper); border-bottom: 1px solid var(--line); }
.sheet-bar h2 { font-size: 20px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* product */
.pv { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; max-width: 1320px; margin: 0 auto; padding: 28px var(--pad) 60px; align-items: start; }
.pv-gallery { position: sticky; top: 92px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
.pv-main { position: relative; aspect-ratio: 1; background: #fff; border-radius: 18px; border: 1px solid var(--line); overflow: hidden; }
.pv-main img { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; }
.pv-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 3px; margin: -3px; }
.pv-thumbs::-webkit-scrollbar { display: none; }
.pv-thumb { flex: none; width: 70px; height: 70px; border-radius: 10px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.pv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pv-thumb[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.pv-info { min-width: 0; padding-top: 6px; }
.pv-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.pv-brand img { width: 34px; height: 34px; object-fit: contain; }
.pv-who { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.pv-info h2 { margin-top: 6px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; line-height: 1.04; letter-spacing: .005em; text-wrap: balance; }
.pv-price { margin-top: 12px; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-price s { color: var(--ink-3); font-weight: 500; font-size: 18px; margin-right: 8px; }
.pv-price.cut { color: var(--red-ink); }
.field { margin-top: 22px; }
.label { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 9px; }
.label em { font-style: normal; font-weight: 600; letter-spacing: .04em; text-transform: none; font-size: 14px; color: var(--ink); }
.label .opt { color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-width: 48px; height: 46px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--line); font-weight: 700; font-size: 15px; background: transparent; transition: border-color .15s, background-color .15s, color .15s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:disabled, .chip.gone { opacity: .42; text-decoration: line-through; }
.chip:disabled { pointer-events: none; }
.sibs { display: flex; flex-wrap: wrap; gap: 10px; }
.sib { width: 64px; height: 64px; border-radius: 12px; background: #fff; border: 1px solid var(--line); overflow: hidden; position: relative; }
.sib img { width: 100%; height: 100%; object-fit: contain; }
.sib[aria-current='true'] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.sib b { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-align: center; background: rgba(23, 40, 60, .86); color: #f4ecd9; padding: 1px 0; }
.input { width: 100%; height: 50px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: 600 16px var(--font); }
.input:focus { border-color: var(--ink); outline: none; }
.input.bad { border-color: var(--red); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hint { margin-top: 7px; font-size: 13.5px; color: var(--ink-3); font-weight: 500; }
.err { margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--red); color: var(--red-ink); font-weight: 700; font-size: 15px; background: color-mix(in srgb, var(--red) 8%, transparent); }
.buy { margin-top: 26px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.qty { display: inline-grid; grid-template-columns: 44px 36px 44px; align-items: center; height: 56px; border: 2px solid var(--ink); border-radius: 12px; }
.qty button { height: 100%; font-size: 22px; font-weight: 600; }
.qty output { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.btn { position: relative; height: 56px; padding: 0 26px; border-radius: 12px; background: var(--cta); color: var(--cta-ink); font-weight: 800; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: transform .15s var(--ease), opacity .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.busy { pointer-events: none; opacity: .75; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.line { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.desc { margin-top: 28px; border-top: 1px solid var(--line); }
.desc summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; list-style: none; }
.desc summary::-webkit-details-marker { display: none; }
.desc summary::after { content: '+'; font-size: 22px; font-weight: 500; }
.desc[open] summary::after { content: '\2212'; }
.desc-body { padding-bottom: 20px; color: var(--ink-2); font-size: 15.5px; overflow-wrap: anywhere; }
.desc-body img { height: auto; }
.desc-body table { max-width: 100%; display: block; overflow-x: auto; overflow-y: hidden; border-collapse: collapse; margin-top: 8px; overflow-wrap: normal; }
.desc-body td, .desc-body th { padding: 7px 16px 7px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.desc-body td:first-child, .desc-body th:first-child { white-space: nowrap; }
.desc-body ul, .desc-body ol { padding-left: 20px; }
.desc-body p { margin: 10px 0 0; }
.desc-body a { text-decoration: underline; text-underline-offset: 3px; }
.skel { background: var(--line); background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 10px; animation: pulse 1.1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .5; } to { opacity: 1; } }
.pack-items { display: grid; gap: 12px; }
.pack-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.pack-item img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 8px; }
.pack-item b { display: block; margin-bottom: 6px; }

/* bag */
.bag-lines { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px var(--pad) 60px; }
.bag-line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.bag-line.flag { outline: 2px solid var(--red); outline-offset: 6px; border-radius: 8px; }
.bag-line img { width: 84px; height: 84px; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.bag-line h3 { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.bag-line p { font-size: 13.5px; color: var(--ink-3); font-weight: 500; overflow-wrap: anywhere; }
.bag-line .qty { height: 44px; grid-template-columns: 44px 30px 44px; margin-top: 8px; border-width: 1.5px; }
.bag-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.bag-end strong { font-variant-numeric: tabular-nums; }
.rm { min-height: 44px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-decoration: underline; text-underline-offset: 4px; }
.bag-foot { position: relative; padding: 16px var(--pad) calc(18px + env(safe-area-inset-bottom)); border-top: 3px solid var(--ink); background: var(--paper); }
.bag-ridge { position: absolute; left: 0; bottom: 100%; width: 100%; height: 46px; fill: var(--paper-2); pointer-events: none; }
.bag-sum { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.bag-sum strong { font-size: 24px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bag-foot .btn { width: 100%; margin-top: 14px; }
.bag-empty { flex: 1; display: grid; place-items: center; align-content: center; gap: 16px; padding: 40px var(--pad); text-align: center; }
.bag-empty img { width: 110px; height: 110px; object-fit: contain; opacity: .95; }
.bag-empty p { font-weight: 700; font-size: 18px; }

/* menu */
.menu-body { padding: 14px var(--pad) 40px; display: grid; gap: 22px; }
.menu-group h3 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; color: var(--ink-2); }
.menu-group h3 img { width: 30px; height: 30px; object-fit: contain; }
.menu-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.menu-group .sign { transform: none; padding-left: 18px; min-width: min(280px, 78%); height: 46px; flex: none; margin: 0; }
.menu-group .sign::before { display: none; }
.menu-group .sign:hover { transform: translateX(6px); }
.menu-group.is-griz .sign { background: #f4ecd9; color: #18244a; }
.menu-group.is-hot .sign { background: #17283c; color: #f4ecd9; }
html:not(.griz) .menu-group.is-griz .sign { background: var(--red); color: #fff8ea; }
html.griz .menu-group.is-hot .sign { background: #2a4263; }

/* search */
.search-bar { position: sticky; top: 0; z-index: 3; background: var(--paper); border-bottom: 1px solid var(--line); }
.search-bar .wrap { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.search-in { flex: 1; min-width: 0; height: 52px; padding: 0 16px 0 48px; border-radius: 12px; border: 2px solid var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356687d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") 14px center / 22px no-repeat; color: var(--ink); font: 600 17px var(--font); -webkit-appearance: none; appearance: none; }
.search-in::placeholder { color: var(--ink-3); }
.search-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-body { padding-top: 22px; padding-bottom: 70px; }
.search-note { font-weight: 600; color: var(--ink-3); margin-bottom: 18px; }

/* toast + flight */
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 95; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 999px; background: #0c1626; color: #f4ecd9; font-weight: 700; font-size: 14.5px; max-width: calc(100vw - 24px); animation: toast-in .3s var(--ease) both; border: 1px solid rgba(244, 236, 217, .22); }
.toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast button { flex: none; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--red); color: #fff8ea; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
@keyframes toast-in { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.flyer { position: fixed; z-index: 120; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; background: #fff center / 82% no-repeat; border: 3px solid #cc1830; pointer-events: none; will-change: transform, opacity; }

/* reveal */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
html:not(.js) .rv { opacity: 1; transform: none; }

/* ----------------------------------------------------------- medium screens */
@media (max-width: 1180px) {
  .foot-in { gap: 28px; }
  .foot h3 { letter-spacing: .12em; }
  .sign.cross { margin-left: -38px; }
  .trailed { --trail-w: 56px; }
  .rail { grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { --gap: 52px; }
  .tool span { display: none; }
  .tool { padding: 0 10px; }
  .tool-bag { padding: 0 12px; }
}
@media (min-width: 1181px) { .col-body .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ phones */
@media (max-width: 899px) {
  :root { --pad: 16px; --top-h: 60px; }
  .hero {
    --gantry-w: var(--inner);
    --board-w: min(calc(var(--inner) - 64px), 360px);
    --board-h: calc(var(--board-w) * .98);
    --gantry-top: 84px;
    --beam-y: 20px;
    --beam-h: 24px;
    --chain: 26px;
    --sun-d: calc(var(--board-w) * 1.12);
    --sun-x: calc(var(--vw) / 2);
    min-height: 0;
  }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gantry { min-height: calc(var(--beam-y) + var(--beam-h) + var(--chain) + var(--board-h) + 150px); }
  .post { width: 16px; }
  .post-a { left: 2px; }
  .post-b { right: 2px; }
  .beam { left: -8px; right: -8px; }
  .beam span { font-size: 9px; letter-spacing: .26em; }
  .face { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; gap: 0; padding: 7% 6% 6%; }
  .emblem { width: 43%; }
  .face-griz .emblem { width: 40%; }
  .routed { margin-top: 4%; }
  .r-name { font-size: calc(var(--board-w) * .15); }
  .r-sub { font-size: calc(var(--board-w) * .052); margin-top: calc(var(--board-w) * .018); letter-spacing: .28em; text-indent: .28em; }
  .r-tag { display: inline-block; font-size: calc(var(--board-w) * .038); margin-top: calc(var(--board-w) * .034); padding-top: calc(var(--board-w) * .028); text-indent: .34em; }
  .rider { width: 100%; margin-top: 14px; }
  .link { top: -14px; height: 14px; }
  .plank { height: 52px; font-size: 12.5px; letter-spacing: .08em; gap: 7px; }
  .plank img { width: 28px; height: 28px; }
  .plank[aria-pressed='false']::after { display: none; }
  .lean { display: none; }
  .junction { padding: 0 0 26px; margin: 0 calc(-1 * var(--pad)); width: auto; justify-self: stretch; }
  .jpost { display: none; }
  .signs { flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 6px var(--pad) 8px; perspective: none; scroll-snap-type: x proximity; }
  .signs::-webkit-scrollbar { display: none; }
  .sign { flex: none; height: 46px; min-width: 0; padding-left: 16px; font-size: 14px; scroll-snap-align: start; scroll-margin-left: var(--pad); }
  .sign::before { display: none; }
  .sign:nth-child(n) { transform: none; }
  .sign.cross { order: 99; margin: 0 0 0 6px; padding: 0 calc(var(--tip) + 12px) 0 14px; clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }
  .signs .sign.gear:first-of-type, .signs .gap { margin-top: 0; }
  html.intro .stage .sign { animation-name: rise; --from: 14px; }
  .bears { padding: 2px; gap: 2px; }
  .bear { height: 44px; padding: 0 10px 0 5px; gap: 6px; font-size: 11.5px; letter-spacing: .06em; }
  .bear img { width: 30px; height: 30px; }
  .bear[aria-pressed='false'] { padding: 0 7px; }
  .bear[aria-pressed='false'] span { display: none; }
  .top-in { gap: 6px; }
  .top-end { gap: 0; }
  .tool { padding: 0 8px; }
  .tool-bag { padding: 0 10px; gap: 6px; }
  .trailed { --trail-w: 0px; display: block; padding-top: 12px; padding-bottom: 16px; }
  .trail { display: none; }
  .shelf { padding: 20px 0 16px; }
  .shelf-head { margin-bottom: 14px; gap: 10px; }
  .blaze { display: none; }
  .leader { min-width: 8px; }
  .sign.big { --tip: 20px; height: 46px; font-size: 17px; padding: 0 calc(var(--tip) + 12px) 0 16px; }
  .more { font-size: 12px; letter-spacing: .08em; }
  .sheet-product { bottom: 0; max-height: none; }
  .kicker { margin-top: 20px; }
  .rail-nav { display: none; }
  .rail { grid-auto-columns: 58%; gap: 12px; margin: -6px calc(-1 * var(--pad)) 0; padding: 6px var(--pad) 10px; scroll-padding-left: var(--pad); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .t-name { font-size: 15px; }
  .go { display: none; }
  .style { width: 32px; height: 32px; }
  .style::after { inset: -6px; }
  .trailed::after { width: 520px; right: -230px; top: 60px; }
  .shared::after { width: 460px; left: -240px; }
  .col-body::after { width: 520px; right: -230px; top: -40px; }
  .fork-card { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px 18px; }
  .fork-card img { width: 64px; height: 64px; }
  .fork-card .fork-go { grid-column: 1 / -1; justify-self: start; }
  .fork-card .fork-sun { right: -30px; }
  .col-scene { height: 88px; }
  .col-scene .sun { width: 96px; height: 96px; margin: -48px 0 0 -48px; left: 22%; }
  .col-top { padding-top: 8px; }
  .col-tools { margin-left: 0; width: 100%; }
  .col-tools .select { flex: 1; }
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row; gap: 28px 20px; }
  .foot-in > :first-child { grid-column: 1 / -1; }
  .foot-ridge { height: 64px; }
  .foot-col a, .foot-col button { min-height: 44px; }
  .pv { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px var(--pad) 0; }
  .pv-gallery { position: static; grid-template-columns: minmax(0, 1fr); }
  .pv-thumbs { order: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; }
  .pv-thumb { width: 60px; height: 60px; }
  .pv-info { display: flex; flex-direction: column; padding-bottom: 0; }
  /* The buy bar goes last on a phone so it stays pinned under everything, details included. */
  .pv-info .err { order: 8; }
  .pv-info .buy { order: 9; }
  .pv-info .desc { margin-bottom: 4px; }
  .buy { position: sticky; bottom: 0; z-index: 4; margin: 22px calc(-1 * var(--pad)) 0; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }
  .buy .btn { padding: 0 12px; font-size: 14px; letter-spacing: .1em; }
  .qty { grid-template-columns: 40px 28px 40px; height: 54px; }
  .btn { height: 54px; }
  .desc { margin-top: 14px; }
  .sheet-side { width: 100%; border-left: 0; }
  .sheet-product, .sheet-search { inset: 0; border-radius: 0; }
  .sheet-product .sheet-bar, .sheet-search .search-bar { border-radius: 0; }
  .toast { bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  .sign { height: 44px; }
  .bear { height: 44px; }
  .style { width: 32px; height: 32px; }
  .style::after { inset: -6px; }
  .foot-col a, .foot-col button { min-height: 44px; }
}
@media (max-width: 380px) {
  .bear { font-size: 11px; padding-right: 10px; }
  .tool { padding: 0 8px; }
}

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .shelf.rv .sign.big, .shelf.rv .rail > *, .shelf.rv .grid > *, .shelf.rv .leader, .shelf.rv .more, .shelf.rv .rail-nav { opacity: 1; transform: none; }
}