/* Skyline Spartans Lacrosse Club: "The Skyline" team shop.
   Dawn over the Cascades in the hero, a trail-junction signpost for navigation,
   a layering forecast, caps standing on their own ridgeline and a night-sky footer. */
:root {
  --paper: #f5f3ec;
  --paper-2: #ebe8de;
  --card: #fff;
  --ink: #10231e;
  --ink-2: #3d524a;
  --ink-3: #56665f;
  --spruce: #153f36;
  --spruce-2: #1d4c40;
  --spruce-d: #0f2c25;
  --spruce-dd: #0a1f1a;
  --moss: #4d7466;
  --sage: #9db5aa;
  --mist: #dfe7e1;
  --line: #d8dcd2;
  --glow: #f2a47a;
  --glow-2: #ffd9bd;
  --f-ui: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --gut: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --w: min(var(--max), 100% - 2 * var(--gut));
  --ease: cubic-bezier(.2, .75, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.locked { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--spruce-2); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--spruce); color: var(--paper); padding: 12px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; border: 0; font: 600 15px/1 var(--f-ui); letter-spacing: .02em; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), background-color .2s, color .2s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.98); }
.btn-paper { background: var(--paper); color: var(--spruce-d); }
.btn-paper:hover { background: #fff; }
.btn-line { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(245, 243, 236, .5); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }
.btn-spruce { background: var(--spruce); color: var(--paper); }
.btn-spruce:hover { background: var(--spruce-2); }
.btn[disabled] { background: #b9c3bd; color: #fff; cursor: not-allowed; }
.btn.busy { opacity: .7; pointer-events: none; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: inherit; transition: background-color .2s; }
.icon-btn:hover { background: rgba(21, 63, 54, .08); }
.icon-btn svg { width: 22px; height: 22px; }
.round { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--spruce); transition: border-color .2s, transform .2s; }
.round:hover { border-color: var(--spruce); }
.round svg { width: 20px; height: 20px; }
.link { background: none; border: 0; padding: 0 2px; min-height: 44px; font: 500 14px var(--f-ui); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--spruce); }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 20px; height: 72px; padding: 0 var(--gut); color: var(--spruce-d); transition: background-color .3s, box-shadow .3s; }
.top.solid { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--spruce); flex: none; }
.logo-crop { display: block; width: 200px; aspect-ratio: 250 / 32; }
.logo-crop img { width: 100%; height: 100%; object-fit: cover; }
.logo-crop.on-dark img { filter: brightness(0) invert(.95); }
.nav { display: flex; gap: 2px; margin: 0 auto; }
.nav > a { position: relative; padding: 12px 12px; font: 600 13px/1 var(--f-ui); font-stretch: 108%; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--spruce-d); }
.nav > a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav > a:hover::after, .nav > a:focus-visible::after { transform: scaleX(1); }
/* Player Gear: a peach pill that leads the header nav and drops down HS, Youth and Equipment */
.nav-pg { position: relative; display: flex; align-items: center; margin-right: 6px; }
.nav-pg-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 16px; border: 0; border-radius: 999px; background: var(--glow-2); color: var(--spruce-d); font: 700 13px/1 var(--f-ui); font-stretch: 108%; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(15, 44, 37, .12); transition: background-color .2s; }
.nav-pg-btn:hover, .nav-pg.open .nav-pg-btn { background: #ffc9a3; }
.nav-pg-btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.nav-pg.open .nav-pg-btn svg { transform: rotate(180deg); }
.nav-pg-menu { position: absolute; left: 0; top: 100%; z-index: 2; min-width: 270px; padding-top: 10px; }
.nav-pg-menu ul { list-style: none; margin: 0; padding: 8px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 22px 40px -18px rgba(16, 35, 30, .5); }
.npg-go, .npg-soon { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 8px; color: var(--spruce-d); text-decoration: none; }
.npg-go b, .npg-soon b, .mpg-go b, .mpg-soon b { font: 700 15px/1.2 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; }
.npg-go > span, .mpg-go > span { font: italic 400 14px/1.2 var(--f-serif); color: var(--ink-3); }
.npg-go svg, .mpg-go svg { width: 18px; height: 18px; color: var(--spruce); transition: transform .25s var(--ease); }
.npg-go:hover, .npg-go:focus-visible { background: #fbe9da; }
.npg-go:hover svg, .mpg-go:hover svg { transform: translateX(3px); }
.npg-soon { grid-template-columns: minmax(0, 1fr) auto; color: var(--ink-2); }
.npg-soon em, .mpg-soon em { padding: 5px 8px; border-radius: 3px; background: var(--glow-2); color: var(--spruce-d); font: 700 10.5px/1 var(--f-ui); font-style: normal; font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; }
.top-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav + .top-end { margin-left: 0; }
.search-btn .lbl { display: none; }
.bag-n { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--spruce); color: var(--paper); font: 700 11px/19px var(--f-ui); text-align: center; }
.bag-n.bump { animation: bump .55s var(--ease); }
@keyframes bump { 30% { transform: scale(1.45); } 60% { transform: scale(.9); } }
.menu-btn { display: none; }
@media (min-width: 1100px) {
  .search-btn { display: inline-flex; align-items: center; width: auto; gap: 8px; padding: 0 16px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(21, 63, 54, .28); margin-right: 6px; }
  .search-btn .lbl { display: inline; font: 600 14px var(--f-ui); }
}
@media (min-width: 1280px) and (max-width: 1599px) {
  .nav > a { padding-inline: 9px; letter-spacing: .07em; }
  .nav > a::after { left: 9px; right: 9px; }
  /* room for the Player Gear pill: the header's search button keeps only its icon */
  .top .search-btn { width: 44px; gap: 0; padding: 0; margin-right: 0; border-radius: 12px; box-shadow: none; }
  .top .search-btn .lbl { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .top .logo-crop { width: 168px; }
  .nav > a { padding-inline: 8px; font-size: 12.5px; letter-spacing: .06em; }
  .nav > a::after { left: 8px; right: 8px; }
  .nav-pg-btn { padding: 0 10px 0 14px; font-size: 12.5px; letter-spacing: .08em; }
}
@media (max-width: 1279px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .nav + .top-end { margin-left: auto; } }
@media (max-width: 700px) {
  .top { height: 64px; gap: 8px; }
  .logo-crop { width: 164px; }
  html { scroll-padding-top: 72px; }
}

/* ---------- hero ---------- */
.hero { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100svh; min-height: 620px; max-height: 1180px; background: var(--spruce-d); }
.land { position: relative; overflow: hidden; background: linear-gradient(180deg, #cfdcd7 0%, #e3eae4 38%, #efeee6 60%, #f5e6d6 80%, #f4dcc5 100%); }
.lyr { position: absolute; inset: 0 -20px; will-change: transform; pointer-events: none; }
.lsvg, .word { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.drift { position: absolute; inset: 0 -6%; will-change: transform; animation: drift 44s ease-in-out infinite alternate; }
.drift-b { animation-duration: 32s; animation-direction: alternate-reverse; }
.hero.off .drift { animation-play-state: paused; }
@keyframes drift { from { transform: translate3d(-2.2%, 0, 0); } to { transform: translate3d(2.2%, 0, 0); } }
.word { visibility: hidden; }
.word.on { visibility: visible; }
.wm { font-family: var(--f-ui); font-weight: 900; font-stretch: 62%; fill: url(#wordg); }
.band { position: relative; background: var(--spruce-d); color: var(--paper); }
.band::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(245, 243, 236, .42); }
.band-in { position: relative; z-index: 1; width: var(--w); margin: 0 auto; padding: 26px 0 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 48px; align-items: end; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 12px/1.3 var(--f-ui); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.eyebrow > svg { width: 24px; height: 24px; color: var(--glow-2); }
.eyebrow i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
.band-holi { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 10px; padding: 4px 4px 4px 0; color: var(--paper); text-decoration: none; }
.band-holi b { flex: none; padding: 6px 10px; border-radius: 3px; background: var(--glow-2); color: var(--spruce-d); font: 700 11.5px/1 var(--f-ui); font-stretch: 112%; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.band-holi span { font: italic 400 clamp(18px, 1.5vw, 22px)/1.25 var(--f-serif); font-variation-settings: 'opsz' 48; }
.band-holi svg { width: 20px; height: 20px; flex: none; color: var(--glow-2); transition: transform .3s var(--ease); }
.band-holi:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.band-holi:hover svg { transform: translateX(4px); }
.band :focus-visible { outline-color: var(--glow-2); }
.band-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 1199px) { .eyebrow i, .eyebrow span:last-of-type { display: none; } }
@media (max-width: 900px) {
  .band-in { grid-template-columns: minmax(0, 1fr); padding: 20px 0 26px; }
}
@media (max-width: 700px) {
  .hero { min-height: 600px; }
  .band-holi { margin-top: 6px; gap: 10px; }
  .band-holi span { font-size: 17px; }
  .band-ctas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .band-ctas .btn { padding: 0 12px; font-size: 14px; }
}

/* intro: every load, skipped for deep links and reduced motion.
   It waits (briefly) for the display font so the scene and the word rise together. */
html.intro:not(.go) .lsvg, html.intro:not(.go) .drift, html.intro:not(.go) .band-in, html.intro:not(.go) .top { opacity: 0; }
html.intro.go .top { animation: fadeDown .8s var(--ease) 1s both; }
html.intro.go .l-rainier { animation: rise-up 1.9s var(--ease) both; --y: 80px; }
html.intro.go .l-rainier .glow { animation: fade 2.6s ease .25s both; }
html.intro.go .l-rainier .lenti { animation: fade 2s ease 1.2s both; }
html.intro.go .l-far { animation: rise-up 1.6s var(--ease) .12s both; --y: 100px; }
html.intro.go .l-mid { animation: rise-up 1.4s var(--ease) .22s both; --y: 80px; }
html.intro.go .l-near { animation: slide-up 1.2s var(--ease) .05s both; --y: 44px; }
html.intro.go .l-fg { animation: slide-up 1.1s var(--ease) both; --y: 34px; }
html.intro.go .fog { animation: fog-in 2.8s ease .9s both; }
html.intro.go .wm.rise { animation: letter 1.3s cubic-bezier(.16, .84, .24, 1) both; animation-delay: calc(.3s + var(--i) * 80ms); }
html.intro.go .wm.float { animation: letter-f 1.2s var(--ease) both; animation-delay: calc(.25s + var(--i) * 90ms); }
html.intro.go .band-copy { animation: rise-up 1s var(--ease) 1.3s both; --y: 18px; }
html.intro.go .band-ctas { animation: rise-up 1s var(--ease) 1.45s both; --y: 18px; }
@keyframes rise-up { from { opacity: 0; transform: translate3d(0, var(--y), 0); } to { opacity: 1; transform: none; } }
@keyframes slide-up { from { transform: translate3d(0, var(--y), 0); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeDown { from { opacity: 0; transform: translate3d(0, -14px, 0); } }
@keyframes fog-in { from { opacity: 0; transform: translate3d(-7%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes letter { from { transform: translateY(var(--drop)); } to { transform: none; } }
@keyframes letter-f { from { opacity: 0; transform: translateY(var(--drop)); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.sec, .trailhead { position: relative; padding: clamp(64px, 7.5vw, 108px) 0; }
.sec > :not(.rule):not(.caps-scroll):not(.sky-fx):not(.holi-field), .trail-grid { width: var(--w); margin-inline: auto; }
.rule { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 44px; fill: none; stroke: #b9c8bf; stroke-width: 1.5; overflow: visible; }
.kicker { display: flex; align-items: center; gap: 12px; font: 600 12px/1 var(--f-ui); font-stretch: 116%; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); }
.kn { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--spruce); color: var(--paper); font-stretch: 100%; letter-spacing: .06em; }
.kn svg { width: 16px; height: 16px; }
.sec-title { margin-top: 14px; font: 800 clamp(52px, 7.4vw, 108px)/.88 var(--f-ui); font-stretch: 68%; letter-spacing: -.004em; text-transform: uppercase; color: var(--spruce); }
.lede { margin-top: 16px; max-width: 46ch; font: 400 clamp(17px, 1.45vw, 21px)/1.45 var(--f-serif); font-variation-settings: 'opsz' 36; color: var(--ink-2); }
.sec-head { position: relative; }
.sec-aside > :first-child { margin-top: 16px; }
@media (min-width: 1100px) {
  .sec-head.split { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 110px); align-items: end; }
  .sec-head.split .kicker { grid-column: 1 / -1; }
  .sec-head.split .sec-aside { justify-self: end; max-width: 560px; padding-bottom: 4px; }
  .sec-head.split .sec-aside > :first-child { margin-top: 0; }
  .sec-head.split .chips, .sec-head.split .tabs { margin-top: 20px; }
}
.sec-foot { display: flex; justify-content: center; margin-top: 40px; }
.more { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--spruce); color: var(--spruce); font: 600 15px/1 var(--f-ui); letter-spacing: .02em; text-decoration: none; transition: background-color .2s, color .2s; }
.more svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.more:hover { background: var(--spruce); color: var(--paper); }
.more:hover svg { transform: translateX(4px); }
.chips, .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chips button, .tabs button { height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .6); font: 600 14px/1 var(--f-ui); color: var(--ink-2); white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.chips button:hover, .tabs button:hover { border-color: var(--spruce); color: var(--spruce); }
.chips button[aria-pressed="true"], .tabs button[aria-pressed="true"] { background: var(--spruce); border-color: var(--spruce); color: var(--paper); }
.chips sup { margin-left: 6px; font-size: 11px; vertical-align: 1px; opacity: .7; }

.ships { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 13px; border-radius: 999px; background: var(--glow-2); color: var(--spruce-d); font: 600 15px/1.2 var(--f-ui); letter-spacing: .02em; }
.ships svg { width: 22px; height: 22px; flex: none; }
.ships-sm { gap: 7px; padding: 6px 13px 6px 10px; font-size: 13.5px; }
.ships-sm svg { width: 18px; height: 18px; }

[data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s ease var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }
.plates > :nth-child(4n + 2) { --d: .06s; }
.plates > :nth-child(4n + 3) { --d: .12s; }
.plates > :nth-child(4n + 4) { --d: .18s; }

/* ---------- plates (product tiles) ---------- */
.plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.plate { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 6px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.plate:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 22px 34px -24px rgba(16, 35, 30, .45); border-color: #c7cfc5; }
.plate-hit { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; background: none; text-align: left; border-radius: 6px; }
.plate-img { position: relative; display: block; aspect-ratio: 1 / 1; }
.plate-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7%; transition: opacity .45s ease; }
.pi-alt { opacity: 0; }
.plate-hit:hover .pi-alt, .plate-hit:focus-visible .pi-alt { opacity: 1; }
.plate-hit:hover .pi-main:has(~ .pi-alt:not(.img-failed)), .plate-hit:focus-visible .pi-main:has(~ .pi-alt:not(.img-failed)) { opacity: 0; }
.plate-flag { position: absolute; top: 10px; left: 10px; padding: 5px 9px; border-radius: 3px; background: var(--glow-2); color: var(--spruce-d); font: 700 11px/1 var(--f-ui); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
.plate-flag.sale { background: var(--glow); }
.plate-flag.out { background: #7c8a84; color: #fff; }
.plate-vers { position: absolute; left: 10px; bottom: 8px; display: flex; align-items: center; }
.plate-vers i { width: 24px; height: 24px; border-radius: 50%; background: #fff center / cover no-repeat; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.plate-vers i + i { margin-left: -7px; }
.plate-vers b { margin-left: 8px; font: 600 11.5px/1 var(--f-ui); color: var(--ink-3); background: rgba(255, 255, 255, .92); padding: 3px 4px; }
.plate-meta { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kick kick" "name price"; align-content: start; gap: 5px 12px; padding: 13px 15px 15px; border-top: 1px solid #eceee8; }
.plate-kick { grid-area: kick; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 16px; }
.plate-fit { font: 600 11px/1.3 var(--f-ui); font-stretch: 112%; letter-spacing: .13em; text-transform: uppercase; color: var(--moss); }
.plate-maker { font: italic 400 13.5px/1.3 var(--f-serif); color: var(--ink-3); }
.plate-name { grid-area: name; font: 600 16.5px/1.22 var(--f-ui); font-stretch: 94%; color: var(--ink); }
.plate-price { grid-area: price; align-self: start; display: flex; align-items: baseline; gap: 5px; font: 700 16px/1.22 var(--f-ui); color: var(--spruce); white-space: nowrap; }
.plate-price small { font: 500 11.5px var(--f-ui); color: var(--ink-3); }
.plate-price s { font-weight: 500; font-size: 13px; color: var(--ink-3); }
.plate.is-out .plate-img img { opacity: .55; }
/* a product photo that doesn't load: a peak and a label in its frame, at the same size */
.pd-main, .thumbs button, .kp-img, .spot-img, .mini-img, .pr-img, .line-img, .ver { position: relative; }
.img-failed { visibility: hidden; }
.ph { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8%; border-radius: inherit; background: #fff; color: var(--moss); text-align: center; pointer-events: none; }
.ph-on > .ph { display: flex; }
.ph svg { width: 34%; max-width: 72px; height: auto; }
.ph-t { font: 600 11.5px/1.3 var(--f-ui); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pd-main .ph-t { font-size: 13px; }
.thumbs .ph, .ver .ph, .kp-img .ph, .mini-img .ph, .pr-img .ph, .line-img .ph, .sa-tile .ph { gap: 0; padding: 0; }
.thumbs .ph svg, .ver .ph svg, .kp-img .ph svg, .mini-img .ph svg, .pr-img .ph svg, .line-img .ph svg { width: 52%; }
.thumbs .ph-t, .ver .ph-t, .kp-img .ph-t, .mini-img .ph-t, .pr-img .ph-t, .line-img .ph-t, .sa-tile .ph-t { display: none; }
@media (max-width: 1100px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
  .plate-meta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "name" "price"; padding: 11px 11px 13px; gap: 4px; }
  .plate-name { font-size: 15px; }
  .plate-maker { font-size: 12.5px; }
  .plate-vers b { display: none; }
  .plate-vers i { width: 20px; height: 20px; }
}

/* ---------- trailhead: the signpost ---------- */
.trailhead { padding-top: clamp(64px, 8vw, 116px); }
.trail-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.post-wrap { position: relative; padding: 34px 0 56px; }
.post { position: absolute; left: 50%; top: 6px; bottom: 0; width: 24px; margin-left: -12px; background: linear-gradient(90deg, #0b221c 0%, #1a4539 42%, #12362d 100%); border-radius: 2px 2px 0 0; }
.post i { position: absolute; left: -4px; right: -4px; top: -14px; height: 16px; background: #0d2821; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.post::after { content: ''; position: absolute; left: -70px; right: -70px; bottom: -10px; height: 20px; background: radial-gradient(closest-side, rgba(16, 35, 30, .22), rgba(16, 35, 30, 0)); }
.blades { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.blades li { display: flex; }
.blade { --tip: 28px; --r: -1.3deg; --r0: -22deg; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(410px, calc(50% + 40px)); height: 62px; color: #f3efe2; text-decoration: none; transform: rotate(var(--r)); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), filter .2s; }
.blade { clip-path: var(--shape); background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 7px), linear-gradient(180deg, #1f4d41, #143a31); }
.blade::before, .blade::after { content: ''; position: absolute; clip-path: var(--shape); pointer-events: none; }
.blade::before { inset: 5px; --tip: 25px; background: rgba(243, 239, 226, .26); }
.blade::after { inset: 6.5px; --tip: 24px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 7px), linear-gradient(180deg, #1f4d41, #143a31); }
.blade > * { position: relative; z-index: 1; }
.to-r { --shape: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); margin-left: calc(50% - 40px); padding: 0 calc(var(--tip) + 20px) 0 34px; transform-origin: 40px 50%; }
.to-l { --shape: polygon(var(--tip) 0, 100% 0, 100% 100%, var(--tip) 100%, 0 50%); --r: 1.1deg; --r0: 22deg; margin-left: auto; margin-right: calc(50% - 40px); flex-direction: row-reverse; padding: 0 34px 0 calc(var(--tip) + 20px); transform-origin: calc(100% - 40px) 50%; }
.blades li:nth-child(4n + 3) .blade { --r: -.4deg; }
.blades li:nth-child(4n + 4) .blade { --r: 2deg; }
.blade-name { font: 700 16px/1 var(--f-ui); font-stretch: 114%; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .06); white-space: nowrap; }
.blade-mi { font: italic 400 14.5px/1 var(--f-serif); color: #b8cdc2; white-space: nowrap; }
.bolt { position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d4ddd8, #6d857b 70%); z-index: 2; }
.to-r .bolt { left: 16px; }
.to-l .bolt { right: 16px; }
.blade:hover, .blade:focus-visible { transform: rotate(0deg) translateX(7px); filter: brightness(1.18); }
.to-l:hover, .to-l:focus-visible { transform: rotate(0deg) translateX(-7px); }
.blade:focus-visible { outline: none; }
.blade:focus-visible .blade-name { text-decoration: underline; text-underline-offset: 5px; }
.post-wrap:not(.in) .blade { opacity: 0; }
.post-wrap.in .blade { animation: swing 1s cubic-bezier(.3, 1.45, .45, 1) backwards; animation-delay: calc(.15s + var(--i) * 75ms); }
.blades li { --i: 0; }
@keyframes swing { from { opacity: 0; transform: rotate(var(--r0)); } 35% { opacity: 1; } to { transform: rotate(var(--r)); } }
.spot { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; width: 100%; margin-top: 34px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: left; transition: box-shadow .3s, transform .3s var(--ease); }
.spot:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 20px 34px -26px rgba(16, 35, 30, .5); }
.spot-img { aspect-ratio: 1; display: block; }
.spot-img img { width: 100%; height: 100%; object-fit: contain; }
.spot-body { display: grid; gap: 6px; justify-items: start; }
.spot-tag { padding: 5px 10px; border-radius: 3px; background: var(--glow-2); color: var(--spruce-d); font: 700 11px/1 var(--f-ui); font-stretch: 112%; letter-spacing: .13em; text-transform: uppercase; }
.spot-name { font: 700 22px/1.1 var(--f-ui); font-stretch: 86%; color: var(--ink); margin-top: 4px; }
.spot-maker { font: italic 400 15px var(--f-serif); color: var(--ink-3); }
.spot-row { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.spot-row b { font: 700 18px var(--f-ui); color: var(--spruce); }
.spot-cta { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--f-ui); color: var(--spruce); }
.spot-cta svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.spot:hover .spot-cta svg { transform: translateX(4px); }
.spot.spot-holi { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; color: inherit; text-decoration: none; }
.spot-art { position: relative; display: block; aspect-ratio: 16 / 8.6; overflow: hidden; background: linear-gradient(180deg, #06150f, #0e2a23 80%); }
.spot-art::before { content: ''; position: absolute; inset: 0; background-image: var(--snow); background-size: 200px 160px; }
.spot-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sa-tile { position: absolute; bottom: 9%; left: 8%; width: 31%; aspect-ratio: 1; padding: 3.5%; border-radius: 8px; background: #fff; box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .7); transform: rotate(-8deg); transition: transform .45s var(--ease); }
.sa-tile img { width: 100%; height: 100%; object-fit: contain; }
.sa-c { left: 33.5%; bottom: 14%; width: 33%; z-index: 1; transform: rotate(-1.5deg); }
.sa-r { left: auto; right: 8%; transform: rotate(7deg); }
.spot-holi:hover .sa-l { transform: translate3d(-8px, -3px, 0) rotate(-11deg); }
.spot-holi:hover .sa-c { transform: translate3d(0, -6px, 0) rotate(0deg); }
.spot-holi:hover .sa-r { transform: translate3d(8px, -3px, 0) rotate(10deg); }
.spot-holi .spot-body { padding: 16px 20px 20px; }
.spot-holi .spot-row { justify-self: stretch; justify-content: space-between; margin-top: 2px; }
@media (max-width: 1000px) {
  .trail-grid { grid-template-columns: minmax(0, 1fr); }
  .trail-copy { order: -1; }
}
@media (max-width: 760px) {
  .post-wrap { padding: 26px 0 40px; }
  .post { left: 26px; }
  .blade, .to-l { --shape: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); --tip: 24px; width: calc(100% - 12px); height: 58px; margin: 0 0 0 12px; padding: 0 calc(var(--tip) + 16px) 0 42px; flex-direction: row; transform-origin: 26px 50%; --r0: -16deg; }
  .to-l .bolt { right: auto; left: 10px; }
  .to-r .bolt { left: 10px; }
  .to-l:hover, .to-l:focus-visible { transform: rotate(0deg) translateX(5px); }
  .blade-name { font-size: 14.5px; letter-spacing: .1em; }
  .blade-mi { font-size: 13.5px; }
  .spot { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .spot-name { font-size: 19px; }
}

/* ---------- apparel ---------- */
.sec-apparel .sec-head { display: grid; }

/* ---------- layering forecast ---------- */
.sec-layers { background: var(--spruce-dd); color: var(--paper); overflow: hidden; isolation: isolate; }
.sky-fx { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.rain-wrap { position: absolute; inset: 0 -14%; transform: skewX(-8deg); }
.rain { position: absolute; left: 0; right: 0; top: -240px; bottom: 0; background-repeat: repeat; background-size: 200px 240px; opacity: 0; will-change: transform; transition: opacity .9s ease; animation: fall 1.15s linear infinite; }
.rain-b { animation-duration: .78s; background-position: 60px 0; }
@keyframes fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 240px, 0); } }
.sec-layers[data-sky="showers"] .rain-a { opacity: .8; }
.sec-layers[data-sky="downpour"] .rain-a { opacity: 1; }
.sec-layers[data-sky="downpour"] .rain-b { opacity: .85; }
.sec-layers[data-sky="sun"] .rain, .sec-layers[data-sky="showers"] .rain-b, .sec-layers.off .rain { animation-play-state: paused; }
.sun-fx { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; background: radial-gradient(60% 55% at 88% -6%, rgba(255, 222, 180, .22), rgba(255, 222, 180, 0) 70%), repeating-conic-gradient(from 196deg at 88% -8%, rgba(255, 236, 205, .075) 0deg 3.5deg, rgba(255, 236, 205, 0) 3.5deg 10deg); -webkit-mask-image: radial-gradient(90% 95% at 88% -8%, #000 20%, transparent 78%); mask-image: radial-gradient(90% 95% at 88% -8%, #000 20%, transparent 78%); }
.sec-layers[data-sky="sun"] .sun-fx { opacity: 1; }
.sec-layers .kicker { color: var(--sage); }
.sec-layers .kicker::before { content: ''; width: 34px; height: 2px; background: var(--glow-2); }
.sec-layers .sec-title { color: var(--paper); max-width: 12ch; }
.sec-layers .lede { color: #c7d5ce; }
.sec-layers :focus-visible { outline-color: var(--glow-2); }
.forecast { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 30px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.forecast button { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: transparent; color: #d6e2dc; font: 600 14.5px/1 var(--f-ui); transition: background-color .25s, color .25s; }
.forecast button svg { width: 22px; height: 22px; }
.forecast button:hover { background: rgba(255, 255, 255, .08); }
.forecast button[aria-checked="true"] { background: var(--paper); color: var(--spruce-d); }
.forecast-note { margin-top: 16px; min-height: 1.5em; font: italic 400 19px/1.4 var(--f-serif); color: var(--glow-2); }
.lcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.lcol { padding: 20px 18px 16px; border-radius: 8px; background: rgba(8, 26, 22, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); transition: opacity .6s ease, transform .6s var(--ease), box-shadow .4s; }
.lcol.in[data-on="false"] { opacity: .5; transform: translate3d(0, 8px, 0); }
.lcol[data-on="true"] { box-shadow: inset 0 0 0 1px rgba(255, 217, 189, .38); }
.lcol-n { font: 800 44px/1 var(--f-ui); font-stretch: 64%; color: rgba(255, 217, 189, .5); }
.lcol h3 { margin-top: 6px; font: 700 21px/1.1 var(--f-ui); font-stretch: 92%; letter-spacing: .04em; text-transform: uppercase; }
.lcol-sub { margin-top: 4px; font: italic 400 15px/1.35 var(--f-serif); color: var(--sage); }
.lcol ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.mini { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; min-height: 72px; padding: 4px; border: 0; border-radius: 6px; background: transparent; text-align: left; color: inherit; transition: background-color .2s; }
.mini:hover { background: rgba(255, 255, 255, .07); }
.mini-img { display: block; width: 64px; height: 64px; border-radius: 4px; background: #fff; }
.mini-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.mini-txt { display: grid; gap: 2px; }
.mini-name { font: 600 14.5px/1.25 var(--f-ui); }
.mini-price { font: 700 14px/1.2 var(--f-ui); color: var(--glow-2); }
@media (max-width: 1100px) { .lcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .lcols { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  .forecast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 16px; }
  .forecast button { justify-content: center; padding: 0 6px; gap: 5px; font-size: 13px; border-radius: 12px; white-space: nowrap; }
  .forecast button svg { width: 20px; height: 20px; }
  .forecast-note { font-size: 17px; }
}

/* ---------- headwear: a skyline of caps ---------- */
.rail-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.caps-scroll { margin-top: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: calc((100% - var(--w)) / 2); padding: 0 calc((100% - var(--w)) / 2); scrollbar-width: none; }
.caps-scroll::-webkit-scrollbar { display: none; }
.caps-scroll:focus-visible { outline-offset: -3px; }
.caps { position: relative; display: flex; gap: 22px; width: max-content; padding: 120px 0 14px; }
.caps-ridge { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.cr-line { fill: none; stroke: var(--spruce); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: var(--len, 6000); stroke-dashoffset: var(--len, 6000); transition: stroke-dashoffset 2.4s cubic-bezier(.45, 0, .2, 1); }
.cr-fill { opacity: 0; transition: opacity 1.4s ease .5s; }
.sec-caps.in .cr-line { stroke-dashoffset: 0; }
.sec-caps.in .cr-fill { opacity: .85; }
.cap { position: relative; z-index: 1; flex: none; width: 232px; margin-top: calc((1 - var(--h)) * 120px); scroll-snap-align: start; }
.cap::before { content: ''; position: absolute; left: 50%; top: -24px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--spruce); }
.cap .plate-meta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "name" "price"; }
@media (max-width: 700px) {
  .rail-btns { display: none; }
  .caps { padding-top: 100px; gap: 12px; }
  .cap { width: 176px; margin-top: calc((1 - var(--h)) * 92px); }
}

/* ---------- accessories + footwear ---------- */
.sec-grid.few .plates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#sec-footwear .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .sec-grid.few .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 701px) and (max-width: 1100px) { #apparel-grid > :nth-child(n + 7) { display: none; } }
@media (max-width: 700px) { #sec-footwear .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- holiday picks: first snow ---------- */
.sec-holiday { background: var(--spruce-d); color: var(--paper); overflow: hidden; isolation: isolate; }
.flakes { position: absolute; left: 0; right: 0; top: -300px; bottom: 0; background-repeat: repeat; will-change: transform; animation: snowfall 22s linear infinite; }
.flakes-a { background-size: 260px 300px; }
.flakes-b { background-size: 340px 300px; animation-duration: 14s; }
@keyframes snowfall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 300px, 0); } }
.sec-holiday.off .flakes { animation-play-state: paused; }
/* the snow field: behind the tiles and down to the section's foot, fading in below the heading */
.sec-holiday > .holi-field { position: relative; isolation: isolate; margin-bottom: calc(-1 * clamp(64px, 7.5vw, 108px)); padding-bottom: clamp(64px, 7.5vw, 108px); }
.holi-field > .plates, .holi-field > .sec-foot { width: var(--w); margin-inline: auto; }
.holi-field > .snow { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 24px, #000 104px); mask-image: linear-gradient(180deg, transparent 0, transparent 24px, #000 104px); }
/* the shipping badge clears the title's tall letter boxes where it sits under it */
@media (max-width: 1099px) { .sec-holiday .sec-aside > .ships:first-child { margin-top: 30px; } }
.sec-holiday .kicker { color: var(--sage); }
.sec-holiday .kn { background: var(--glow-2); color: var(--spruce-d); }
.sec-holiday .sec-title { color: var(--paper); }
.sec-holiday :focus-visible { outline-color: var(--glow-2); }
.sec-holiday .plate { border-color: transparent; }
.sec-holiday .more { border-color: rgba(245, 243, 236, .7); background: var(--spruce-d); color: var(--paper); }
.sec-holiday .more:hover { border-color: var(--paper); background: var(--paper); color: var(--spruce-d); }
@media (min-width: 701px) and (max-width: 1100px) { #holiday-grid > :nth-child(n + 7) { display: none; } }

/* ---------- player gear: trail boards waiting for their gear ---------- */
.pg-list { list-style: none; margin-top: 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pg-list > li { display: flex; min-width: 0; }
.pg { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 22px; min-height: 176px; padding: 40px 28px 26px; border-radius: 6px; color: #f3efe2; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 7px), linear-gradient(180deg, #1f4d41, #143a31); box-shadow: 0 20px 34px -26px rgba(16, 35, 30, .55); }
.pg::before { content: ''; position: absolute; inset: 6px; border: 1.5px solid rgba(243, 239, 226, .26); border-radius: 3px; pointer-events: none; }
.pg .bolt { top: 18px; margin-top: 0; }
.pg .bolt:first-of-type { left: 18px; }
.pg .bolt + .bolt { right: 18px; }
.pg-name { font: 800 clamp(44px, 4.6vw, 66px)/.86 var(--f-ui); font-stretch: 68%; letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.pg { flex: 1 1 auto; }
a.pg { text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.pg:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 28px 40px -26px rgba(16, 35, 30, .7); }
a.pg:focus-visible { outline-offset: 4px; }
.pg-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.pg-go > span { font: italic 400 16px/1.2 var(--f-serif); color: #b8cdc2; }
.pg-go b { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--paper); color: var(--spruce-d); font: 600 14px/1 var(--f-ui); white-space: nowrap; }
.pg-go svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
a.pg:hover .pg-go svg { transform: translateX(4px); }
.pg-soon { flex: none; white-space: nowrap; padding: 6px 10px; border-radius: 3px; background: var(--glow-2); color: var(--spruce-d); font: 700 11px/1 var(--f-ui); font-stretch: 112%; letter-spacing: .13em; text-transform: uppercase; }
@media (max-width: 700px) {
  .pg-list { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  .pg { flex-flow: row wrap; align-items: center; gap: 10px 14px; min-height: 92px; padding: 22px 22px 22px 40px; }
  .pg .bolt { top: 50%; margin-top: -4px; }
  .pg .bolt:first-of-type { left: 16px; }
  .pg .bolt + .bolt { display: none; }
  .pg-name { font-size: 36px; }
  .pg-soon { padding: 5px 9px; font-size: 10.5px; letter-spacing: .11em; }
  .pg-go { width: auto; margin-left: auto; }
  .pg-go > span { font-size: 14.5px; }
}

/* ---------- gear closet: a pack list ---------- */
.sec-gear { background: var(--paper-2) radial-gradient(circle, rgba(16, 35, 30, .075) 1.3px, transparent 1.7px) 0 0 / 22px 22px; }
.packlist { list-style: none; margin: 34px auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; counter-reset: pack; }
.packlist li { counter-increment: pack; }
.pack-row { display: grid; grid-template-columns: 26px 66px minmax(0, max-content) minmax(14px, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 88px; padding: 10px 6px; border: 0; border-bottom: 1px solid #cfd4c9; background: transparent; text-align: left; color: inherit; transition: background-color .2s; }
.pack-row::before { content: counter(pack, decimal-leading-zero); font: 600 12px var(--f-ui); color: var(--ink-3); letter-spacing: .06em; }
.pack-row:hover { background: rgba(255, 255, 255, .55); }
.pack-row:hover .pr-name { color: var(--spruce); }
.pr-img { display: block; width: 66px; height: 66px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pr-img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.pr-txt { display: grid; gap: 3px; min-width: 0; }
.pr-name { font: 600 16px/1.25 var(--f-ui); font-stretch: 94%; }
.pr-sub { font: italic 400 13.5px/1.3 var(--f-serif); color: var(--ink-3); }
.pr-dots { align-self: center; height: 0; border-bottom: 2px dotted #aebdb5; transform: translateY(6px); }
.pr-price { display: flex; align-items: baseline; gap: 5px; font: 700 17px var(--f-ui); color: var(--spruce); white-space: nowrap; }
.pr-price small { font: 500 11.5px var(--f-ui); color: var(--ink-3); }
@media (max-width: 900px) { .packlist { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .pack-row { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; min-height: 80px; }
  .pack-row::before, .pr-dots { display: none; }
  .pr-img { width: 58px; height: 58px; }
  .pr-name { font-size: 15px; }
  .sec-gear .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 4px; scrollbar-width: none; }
  .sec-gear .chips::-webkit-scrollbar { display: none; }
}

/* ---------- footer: the same skyline, after dark ---------- */
.foot { position: relative; background: #0c231d; color: #cdd9d2; }
.foot-top { position: relative; }
.foot-sky { display: block; width: 100%; height: clamp(170px, 19vw, 280px); background: linear-gradient(180deg, #06150f, #0b241e 70%, #0e2a23); }
.foot-sign { position: absolute; left: 0; right: 0; top: clamp(22px, 3.4vw, 50px); width: var(--w); margin: 0 auto; font: italic 400 clamp(24px, 3vw, 42px)/1.1 var(--f-serif); font-variation-settings: 'opsz' 96; color: #eef2ec; }
.foot-sign small { display: block; margin-top: 10px; font: 600 11.5px/1 var(--f-ui); font-style: normal; font-stretch: 114%; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); }
.foot-in { width: var(--w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding: 26px 0 44px; }
.foot-brand .logo-crop { width: 220px; }
.foot-brand p { margin-top: 16px; font: 700 17px/1.3 var(--f-ui); color: var(--paper); }
.foot-brand .foot-loc { margin-top: 4px; font: italic 400 15px var(--f-serif); color: var(--sage); }
.foot-col h2 { margin-bottom: 8px; font: 600 12px/1 var(--f-ui); font-stretch: 114%; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.foot-col a { display: flex; align-items: center; min-height: 40px; color: #e6ede9; text-decoration: none; font-size: 15px; }
.foot-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot :focus-visible { outline-color: var(--glow-2); }
.foot-base { width: var(--w); margin: 0 auto; padding: 22px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.powered { display: inline-flex; align-items: center; gap: 12px; font: 500 13px var(--f-ui); color: #a7b8b0; }
.powered img { height: 24px; width: auto; }
@media (max-width: 900px) { .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 16px; }
  .foot-in > nav.foot-col { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .foot-in > nav.foot-col h2 { grid-column: 1 / -1; }
  .foot-base { justify-content: center; }
}

/* ---------- overlays ---------- */
[role="dialog"]:focus { outline: none; }
.scrim { position: fixed; inset: 0; background: rgba(6, 20, 16, .5); opacity: 0; transition: opacity .25s ease; }
.scrim.on { opacity: 1; }
.view { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--paper); transform: translate3d(0, 28px, 0); opacity: 0; transition: transform .38s var(--ease), opacity .22s ease; }
.view.open { transform: none; opacity: 1; }
.view-top { flex: none; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 var(--gut); border-bottom: 1px solid var(--line); background: var(--paper); color: var(--spruce-d); }
.view-top .brand { margin: 0 auto; }
.view-top .top-end { margin-left: 0; }
.brand.small .logo-crop { width: 170px; }
.view-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding-bottom: 72px; }
.view-body > * { width: var(--w); margin-inline: auto; }
.view-head { padding: 34px 0 6px; }
.view-title { margin-top: 12px; font: 800 clamp(44px, 6.5vw, 88px)/.9 var(--f-ui); font-stretch: 68%; text-transform: uppercase; color: var(--spruce); }
.view-count { margin-top: 10px; font: italic 400 17px var(--f-serif); color: var(--ink-3); }
.view-bar { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.view-bar .chips { margin-top: 0; flex: 1; min-width: 0; }
@media (max-width: 700px) {
  .scroller { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .scroller::-webkit-scrollbar { display: none; }
}
.view-bar { align-items: flex-start; }
.subchips { margin-top: 12px; }
.view-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.view-sub .view-count { margin-top: 0; }
.hq { display: flex; align-items: center; flex: 1; min-width: 0; max-width: 560px; height: 44px; padding-left: 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-3); }
.hq > svg { width: 20px; height: 20px; flex: none; }
.hq-in { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: transparent; font: 500 15px var(--f-ui); color: var(--ink); outline: none; }
.hq-in::placeholder { color: var(--ink-3); opacity: 1; }
.hq-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hq:focus-within { border-color: var(--spruce); box-shadow: 0 0 0 3px rgba(21, 63, 54, .15); }
.hq-x { flex: none; margin-right: -2px; border-radius: 50%; color: var(--ink-2); }
.hq + .sort { margin-left: auto; }
.holi-chips sup { opacity: .85; }
.sort select { height: 44px; padding: 0 40px 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153f36' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; appearance: none; font: 600 14px var(--f-ui); color: var(--ink); }
.view-grid { margin-top: 26px; }
.empty { padding: 60px 0; font: italic 400 18px var(--f-serif); color: var(--ink-3); }
@media (max-width: 700px) {
  .view-top { padding: 0 8px; }
  .brand.small .logo-crop { width: 140px; }
  .view-top .search-btn { display: none; }
  .view-bar { flex-direction: column; align-items: stretch; }
  .view-bar .chips { width: calc(100% + 2 * var(--gut)); margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
  .view-body > .subchips { width: 100%; margin-inline: 0; padding-inline: var(--gut); }
  .sort select { width: 100%; }
  .hq { flex: none; max-width: none; }
  .hq + .sort { margin-left: 0; }
}

.drawer { position: fixed; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(1040px, 96vw); background: var(--paper); transform: translate3d(104%, 0, 0); transition: transform .4s var(--ease); box-shadow: -30px 0 60px -34px rgba(0, 0, 0, .5); }
.drawer.open { transform: none; }
.drawer-bag { width: min(460px, 100vw); }
.drawer-menu { left: 0; right: auto; width: min(420px, 92vw); transform: translate3d(-104%, 0, 0); box-shadow: 30px 0 60px -34px rgba(0, 0, 0, .5); }
.drawer-menu.open { transform: none; }

/* product */
.pd { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); height: 100%; }
.pd > .x-btn { position: absolute; top: 12px; right: 12px; z-index: 4; background: var(--paper); box-shadow: 0 0 0 1px var(--line); border-radius: 50%; }
.pd-gallery { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 28px; background: #fff; }
.pd-main { flex: 1; min-height: 0; display: grid; place-items: center; }
.pd-main img { max-width: 100%; max-height: calc(100svh - 170px); object-fit: contain; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.thumbs button { flex: none; width: 64px; height: 64px; padding: 3px; border-radius: 6px; border: 1.5px solid var(--line); background: #fff; }
.thumbs button[aria-pressed="true"] { border-color: var(--spruce); box-shadow: inset 0 0 0 1px var(--spruce); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pd-info { overflow: auto; overscroll-behavior: contain; padding: 60px 40px 40px; }
.pd-kick { font: 600 12px/1.3 var(--f-ui); font-stretch: 114%; letter-spacing: .15em; text-transform: uppercase; color: var(--moss); }
.pd-name { margin-top: 10px; font: 800 clamp(32px, 3.2vw, 46px)/.95 var(--f-ui); font-stretch: 76%; text-transform: uppercase; color: var(--spruce); }
.pd-price { margin-top: 14px; display: flex; align-items: baseline; gap: 10px; font: 700 22px var(--f-ui); }
.pd-price s { font-size: 16px; font-weight: 500; color: var(--ink-3); }
.opt { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.opt legend, .fld-l { padding: 0; font: 600 12.5px/1.3 var(--f-ui); font-stretch: 110%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.opt legend em, .fld-l em { margin-left: 8px; font: italic 400 15px var(--f-serif); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.fld-l .bad { margin-left: 8px; color: #a3371b; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sizes button { min-width: 54px; height: 46px; padding: 0 12px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; font: 600 15px/1 var(--f-ui); transition: border-color .15s, background-color .15s; }
.sizes button:hover { border-color: var(--spruce); }
.sizes button[aria-pressed="true"] { background: var(--spruce); border-color: var(--spruce); color: var(--paper); }
.sizes button:disabled { opacity: .38; text-decoration: line-through; cursor: not-allowed; }
.sizes button.soft:not([aria-pressed="true"]) { color: var(--ink-3); border-style: dashed; }
.opt-fixed { display: flex; gap: 10px; align-items: baseline; margin-top: 20px; }
.opt-fixed span { font: 600 12.5px var(--f-ui); font-stretch: 110%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.opt-fixed b { font: italic 400 16px var(--f-serif); color: var(--ink); }
.vers-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ver { width: 76px; height: 76px; padding: 4px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; }
.ver[aria-pressed="true"] { border-color: var(--spruce); box-shadow: inset 0 0 0 1.5px var(--spruce); }
.ver img { width: 100%; height: 100%; object-fit: contain; }
.fld { display: grid; gap: 8px; margin-top: 20px; }
.inp { width: 100%; height: 50px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; font: 500 16px var(--f-ui); }
.inp:focus { border-color: var(--spruce); outline: none; box-shadow: 0 0 0 3px rgba(21, 63, 54, .15); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hint { font: italic 400 14px var(--f-serif); color: var(--ink-3); }
.err { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: #fbe7de; color: #7c2a13; font: 500 14.5px/1.4 var(--f-ui); }
.pd-buy { display: flex; gap: 12px; align-items: stretch; margin-top: 28px; }
.qty { display: inline-flex; align-items: center; height: 54px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; flex: none; }
.qty button { width: 44px; height: 100%; border: 0; background: none; font: 500 22px/1 var(--f-ui); color: var(--spruce); border-radius: 999px; }
.qty output { min-width: 26px; text-align: center; font: 600 16px var(--f-ui); }
.qty.sm { height: 44px; }
.add { flex: 1; height: 54px; min-width: 0; }
.add span { overflow: hidden; text-overflow: ellipsis; }
.pd-desc { margin-top: 30px; border-top: 1px solid var(--line); }
.pd-desc summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; font: 600 13px var(--f-ui); font-stretch: 110%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; list-style: none; }
.pd-desc summary::-webkit-details-marker { display: none; }
.pd-desc summary::after { content: '+'; font: 400 24px var(--f-ui); color: var(--spruce); }
.pd-desc[open] summary::after { content: '−'; }
.rich { padding-bottom: 12px; font: 400 15.5px/1.6 var(--f-serif); color: var(--ink-2); overflow-wrap: anywhere; }
.rich p, .rich ul { margin: 0 0 10px; }
.rich ul { padding-left: 20px; }
.rich img { height: auto; }
.add.ask { background: var(--spruce-2); }
.pairs { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.pairs-h { font: 600 12.5px/1.3 var(--f-ui); font-stretch: 110%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pairs ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pair-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 68px; padding: 4px 10px 4px 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; transition: background-color .2s, border-color .2s; }
.pair-row:hover { background: #fff; border-color: var(--line); }
.pair-row .mini-img { width: 60px; height: 60px; box-shadow: inset 0 0 0 1px var(--line); }
.pair-kick { font: 600 10.5px/1.3 var(--f-ui); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); }
.pair-row .mini-name { font-size: 15px; }
.pair-row .mini-price { color: var(--spruce); font-size: 15px; }
.kps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.kp { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.kp-img { display: block; width: 76px; height: 76px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.kp-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.kp-body { min-width: 0; }
.kp-kick { font: 600 11px/1.3 var(--f-ui); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); }
.kp-name { margin-top: 2px; font: 600 17px/1.25 var(--f-ui); font-stretch: 94%; color: var(--ink); }
.kp .opt { margin-top: 12px; }
.kp .opt-fixed { margin-top: 10px; }
.skel { height: 120px; margin-top: 22px; border-radius: 8px; background: #e8e6dd; }
.skel.short { height: 54px; width: 70%; }
@media (max-width: 760px) {
  .drawer { width: 100vw; }
  .pd { display: block; overflow: auto; overscroll-behavior: contain; }
  .pd-gallery { padding: 58px 16px 12px; }
  .pd-main img { max-height: 44svh; }
  .pd-info { overflow: visible; padding: 20px 20px 0; }
  .pd-name { font-size: 34px; }
  .pd-buy { position: sticky; bottom: 0; z-index: 3; margin: 24px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }
  .qty { height: 52px; }
  .add { height: 52px; padding: 0 16px; font-size: 14.5px; }
  .pd-desc { margin-bottom: 20px; }
  .kp { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .kp-img { width: 60px; height: 60px; }
}

/* bag */
.bag-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 14px 22px; border-bottom: 1px solid var(--line); }
.bag-head h2 { font: 800 30px/1 var(--f-ui); font-stretch: 74%; text-transform: uppercase; color: var(--spruce); }
.bag-head h2 span { margin-left: 6px; font: italic 400 16px var(--f-serif); text-transform: none; color: var(--ink-3); }
.bag-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 4px 22px; }
.lines { list-style: none; margin: 0; padding: 0; }
.line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line-img { width: 84px; height: 84px; padding: 4px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.line-img img { width: 100%; height: 100%; object-fit: contain; }
.line-kick { font: 600 11px/1.3 var(--f-ui); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); }
.line h3 { margin-top: 2px; font: 600 16px/1.25 var(--f-ui); }
.line-meta { margin-top: 2px; font: italic 400 14px/1.35 var(--f-serif); color: var(--ink-3); }
.line-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.line-row { flex-wrap: wrap; }
.line-row .link { flex: none; min-width: 44px; padding: 0 5px; }
.line-price { font: 700 16px var(--f-ui); color: var(--spruce); }
.bag-foot { flex: none; padding: 16px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.sum { display: flex; justify-content: space-between; align-items: baseline; font: 600 17px var(--f-ui); }
.sum b { font-size: 22px; color: var(--spruce); }
.bag-foot .hint { margin-top: 4px; }
.btn.wide { width: 100%; height: 56px; margin-top: 14px; font-size: 16px; }
.bag-empty { display: grid; justify-items: center; gap: 18px; padding: 70px 10px; text-align: center; color: var(--ink-2); }
.bag-empty svg { width: 200px; color: var(--sage); }
.bag-empty p { font: italic 400 18px/1.45 var(--f-serif); }

/* search */
.dlg-search { position: fixed; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding: 12px; pointer-events: none; }
.s-panel { pointer-events: auto; display: flex; flex-direction: column; width: min(1000px, 100%); max-height: calc(100svh - 24px); background: var(--paper); border-radius: 14px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55); transform: translate3d(0, -14px, 0); opacity: 0; transition: transform .3s var(--ease), opacity .2s ease; }
.dlg-search.open .s-panel { transform: none; opacity: 1; }
.s-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--line); }
.s-bar > svg { width: 22px; height: 22px; color: var(--ink-3); flex: none; }
.s-in { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; font: 500 20px var(--f-ui); outline: none; }
.s-bar:focus-within { box-shadow: inset 0 -2px 0 var(--spruce); }
.s-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.s-results { overflow: auto; overscroll-behavior: contain; padding: 18px 18px 24px; border-radius: 0 0 14px 14px; }
.s-hint { font: 600 12px var(--f-ui); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.s-results .chips { margin-top: 12px; }
.s-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.s-grid .plate-meta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "name" "price"; }
.s-grid .plate-name { font-size: 15px; }
.s-none { font: italic 400 18px/1.5 var(--f-serif); color: var(--ink-2); }
.s-none .link { font: inherit; font-style: normal; font-weight: 600; min-height: 0; }
@media (max-width: 900px) { .s-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .dlg-search { padding: 0; }
  .s-panel { max-height: 100svh; height: 100svh; border-radius: 0; }
  .s-results { border-radius: 0; }
  .s-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* menu */
.menu-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.menu-head .logo-crop { width: 170px; }
.menu-body { flex: 1; overflow: auto; padding: 8px 20px 30px; }
.post-wrap.compact { padding: 26px 0 30px; }
.post-wrap.compact .post { left: 26px; }
.post-wrap.compact .blade { --shape: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); --tip: 22px; width: calc(100% - 12px); height: 54px; margin: 0 0 0 12px; padding: 0 calc(var(--tip) + 14px) 0 40px; flex-direction: row; transform-origin: 26px 50%; }
.post-wrap.compact .to-l .bolt, .post-wrap.compact .to-r .bolt { left: 10px; right: auto; }
.post-wrap.compact .blade-name { font-size: 14px; }
.post-wrap.compact.in .blade { animation-duration: .7s; animation-delay: calc(.05s + var(--i) * 40ms); }
.menu-pg { margin: 14px 0 4px; padding: 14px 12px 12px; border-radius: 14px; background: var(--glow-2); color: var(--spruce-d); }
.menu-pg-h { padding: 0 4px; font: 800 26px/1 var(--f-ui); font-stretch: 74%; letter-spacing: .02em; text-transform: uppercase; }
.menu-pg ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mpg-go, .mpg-soon { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 10px; background: var(--paper); color: var(--spruce-d); text-decoration: none; }
.mpg-soon { grid-template-columns: minmax(0, 1fr) auto; color: var(--ink-2); }
.menu-links { display: grid; margin-top: 10px; }
.menu-links a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font: 600 17px var(--f-ui); text-decoration: none; color: var(--spruce-d); }

/* toast + flyer */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 96; visibility: hidden; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 7px 7px 7px 16px; border-radius: 30px; background: var(--spruce-d); width: max-content; color: var(--paper); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); transform: translate3d(-50%, calc(100% + 40px), 0); transition: transform .4s var(--ease), visibility 0s linear .4s; font: 500 14.5px/1.3 var(--f-ui); }
.toast.on { visibility: visible; transform: translate3d(-50%, 0, 0); transition: transform .4s var(--ease), visibility 0s; }
.toast > svg { width: 20px; height: 20px; flex: none; color: var(--glow-2); }
.toast span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.toast button { flex: none; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--paper); color: var(--spruce-d); font: 600 14px var(--f-ui); }
.flyer { position: fixed; z-index: 99; object-fit: contain; background: #fff; padding: 6px; pointer-events: none; clip-path: inset(0 round 12px); will-change: transform, opacity; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .drift { animation: none; }
  .rain { animation: none; }
  .flakes { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .post-wrap .blade { opacity: 1 !important; }
  .cr-line { stroke-dashoffset: 0; }
  .cr-fill { opacity: .85; }
}