/* =========================================================
   SPXTR — storefront theme
   Extreme-sport apparel: black, white, hi-vis lime, stencil type.
   ========================================================= */
:root {
  --bg: #0A0A0A;
  --bg-2: #111111;
  --surface: #161616;
  --surface-2: #1F1F1F;
  --line: #262626;
  --line-2: #363636;
  --bone: #F2F2EE;
  --text: #D8D8D2;
  --muted: #8E8E88;
  --olive: #4A5238;
  --olive-2: #5E6746;
  /* Brand accent. Admin -> Customise can change it; every accent on the site follows. */
  --hot: #D4FF1F;
  --hot-2: color-mix(in srgb, var(--hot) 80%, #000);
  --paper: #EDEDE8;
  --ink: #0A0A0A;
  --red: #FF3B2F;
  --ok: #7FD957;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1440px;
  --stencil: 'Big Shoulders Stencil Display', 'Impact', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Barlow', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --goth: 'Metal Mania', 'UnifrakturCook', serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* A real wave: a smooth sine drawn as a mask, so it takes the brand colour and tiles with no
     seam. Two copies at different widths and speeds slide across each other, which is what makes
     a surface look like moving liquid rather than a repeating shape. */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 128' preserveAspectRatio='none'%3E%3Cpath d='M0 64 C 90 30 150 98 240 64 C 330 30 390 98 480 64 L480 128 L0 128 Z' fill='%23fff'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; background: var(--bg); }
/* Hidden until the real content has rendered (see renderChrome). If scripts ever fail,
   the page still appears after 20 seconds rather than staying blank forever. */
html.is-loading body { opacity: 0; animation: spx-reveal .2s 20s forwards; }
body { transition: opacity .2s ease; }
@keyframes spx-reveal { to { opacity: 1; } }
/* While waiting on a slow connection: a pulsing ghost. It only appears after 0.4s, so normal
   loads never flash it. */
html.is-loading::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: url("../brand/spxtr-ghost.jpg") center / 72px auto no-repeat;
  mix-blend-mode: screen; animation: spx-ghost 1.4s .4s ease-in-out infinite;
}
@keyframes spx-ghost { 0%, 100% { opacity: .15; } 50% { opacity: .7; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; background-image: var(--noise); opacity: .045; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
::selection { background: var(--hot); color: var(--ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow, .code { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hot); }
.display { font-family: var(--stencil); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .88; color: var(--bone); }
.display em { font-style: normal; color: var(--hot); }
.muted { color: var(--muted); }

/* reticle corner brackets: drop a <span class="corners"> inside any positioned image block */
.corners { position: absolute; inset: 12px; pointer-events: none; z-index: 2;
  --c: var(--hot); --l: 22px; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat; }

/* rubber stamp */
.stamp { display: inline-block; font: 800 15px/1 var(--stencil); letter-spacing: .12em; text-transform: uppercase; color: var(--hot); border: 2.5px solid currentColor; padding: 7px 12px 6px; transform: rotate(-6deg); opacity: .92; }

/* ---------- buttons ---------- */
.btn { --cut: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 30px; background: var(--hot); color: var(--ink); font: 700 16px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition: background .2s, color .2s; }
.btn:is(:hover, .is-held) { background: var(--bone); }
.btn--ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px var(--line-2); clip-path: none; }
.btn--ghost:is(:hover, .is-held) { color: var(--ink); box-shadow: none; }
.btn--light { background: var(--bone); color: var(--ink); }
.btn--light:is(:hover, .is-held) { background: var(--hot); }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; gap: 10px; align-items: center; font: 600 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--hot); padding-bottom: 5px; border-bottom: 1.5px solid currentColor; }
.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:is(:hover, .is-held) svg { transform: translateX(4px); }

/* ---------- announcement ---------- */
.announce { background: var(--hot); color: var(--ink); font: 500 12px/36px var(--mono); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.announce__track { display: inline-flex; animation: marquee 50s linear infinite; }
.announce__track span { padding: 0 24px; }
.announce__track span::before { content: '★'; margin-right: 24px; }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header__row { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); }
.logo__head { display: block; position: relative; flex-shrink: 0; line-height: 0; }
.logo__ghost { width: 34px; height: 40px; flex-shrink: 0; object-fit: contain; }
.logo__word { height: 40px; width: auto; display: block; }
.logo img { mix-blend-mode: screen; } /* client artwork is white on black: screen drops the black */
.logo__text { font: 400 38px/1 var(--goth); letter-spacing: .02em; color: var(--bone); display: block; }
.logo__sub { display: block; font: 500 9px/1 var(--mono); letter-spacing: .18em; color: var(--hot); margin-top: 4px; }
.nav { display: flex; justify-content: center; gap: 30px; font: 600 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.nav a { position: relative; padding: 8px 0; color: var(--text); transition: color .2s; }
.nav a:hover, .nav a.active { color: var(--hot); }
.nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hot); }
.header__icons { display: flex; justify-content: flex-end; gap: 4px; align-items: center; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; position: relative; color: var(--bone); transition: color .2s; }
.icon-btn:is(:hover, .is-held) { color: var(--hot); }
.icon-btn svg { width: 21px; height: 21px; }
.bag-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--red); color: #fff; font: 600 11px/18px var(--mono); text-align: center; transform: scale(0); transition: transform .3s var(--ease); }
.bag-count.show { transform: scale(1); }
.menu-btn { display: none; }
.vet-chip { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hot); border: 1px solid var(--line-2); padding: 8px 10px; }
.vet-chip i { width: 7px; height: 7px; background: var(--hot); border-radius: 50%; box-shadow: 0 0 0 3px rgba(127,161,90,.25); }

.search-bar { border-top: 1px solid var(--line); display: none; }
.search-bar.open { display: block; }
.search-bar form { display: flex; align-items: center; gap: 12px; height: 64px; }
.search-bar input { flex: 1; border: 0; background: none; font: 600 22px var(--cond); letter-spacing: .06em; text-transform: uppercase; outline: none; color: var(--bone); }
.search-bar input::placeholder { color: var(--muted); }

.mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--bg); transform: translateX(-100%); transition: transform .4s var(--ease); padding: 20px var(--gutter); display: flex; flex-direction: column; }
.mobile-nav.open { transform: none; }
.mobile-nav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.mobile-nav a.big { font: 800 44px/1.15 var(--stencil); text-transform: uppercase; color: var(--bone); border-bottom: 1px solid var(--line); padding: 8px 0; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(680px, calc(100vh - 72px), 1040px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img, .hero__img video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: saturate(.85) contrast(1.05); }
/* The video sits over the photo, which stays underneath as the first frame and the fallback.
   Centred, because the clip is shot upright: the middle is where the action and the logo are. */
.hero__img video { position: absolute; inset: 0; object-position: center; }
.hero__img video[hidden] { display: none; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,16,12,.94) 0%, rgba(14,16,12,.7) 38%, rgba(14,16,12,.1) 70%), linear-gradient(0deg, rgba(14,16,12,.95) 0%, transparent 35%); }
.hero .corners { inset: 22px; --l: 36px; }
.hero__inner { width: 100%; padding-top: 80px; position: relative; }
.hero__grid { display: flex; justify-content: space-between; gap: 24px; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--hot); text-transform: uppercase; margin-bottom: 26px; }
.hero h1 { font-size: clamp(76px, 11.5vw, 188px); margin: 0 0 26px; max-width: 900px; }
.hero p { max-width: 520px; font-size: 19px; color: var(--text); margin: 0 0 34px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stripes { position: absolute; right: -6%; bottom: 0; width: 38%; height: 100%; z-index: -1; background: repeating-linear-gradient(115deg, transparent 0 34px, color-mix(in srgb, var(--hot) 8%, transparent) 34px 40px); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.hero h1 .ghosted { -webkit-text-stroke: 2px var(--bone); color: transparent; }
/* The stamp rides with the text block: on the right, level with the headline's first line, so it never
   lands on the Season / tagline row whatever the screen height. */
.hero .stamp { position: absolute; right: var(--gutter); top: 150px; font-size: 20px; color: var(--hot); background: rgba(14,16,12,.72); border-width: 3px; transform: rotate(8deg); }
.hero__bar { display: grid; grid-template-columns: repeat(var(--count, 4), 1fr); border-top: 1px solid var(--line-2); margin-top: clamp(40px, 7vh, 80px); }
.hero__bar div { padding: 20px 20px 26px 0; font: 600 16px/1.25 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.hero__bar div + div { padding-left: 20px; border-left: 1px solid var(--line-2); }
.hero__bar small { display: block; font: 500 11px var(--mono); color: var(--hot); letter-spacing: .1em; margin-bottom: 6px; }

/* ---------- ticker ---------- */
.marquee { background: var(--hot); color: var(--ink); overflow: hidden; white-space: nowrap; padding: 16px 0; transform: rotate(-1.2deg) scale(1.02); margin: 18px 0; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.marquee__track { display: inline-flex; animation: marquee 45s linear infinite; }
.marquee__track span { font: 800 30px/1 var(--stencil); text-transform: uppercase; letter-spacing: .04em; padding-right: 40px; display: inline-flex; align-items: center; gap: 40px; }
.marquee__track span::after { content: '✕'; font-size: 20px; color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- section heads ---------- */
.section { padding: clamp(72px, 10vw, 136px) 0; position: relative; }
.section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.section-head h2 { font-size: clamp(48px, 6.4vw, 96px); margin: 12px 0 0; }
.section-head p { margin: 14px 0 0; color: var(--muted); max-width: 520px; }

/* ---------- categories (the armory) ---------- */
.cats { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: repeat(2, minmax(250px, 1fr)); gap: 10px; }
.cat { position: relative; overflow: hidden; background: var(--surface); min-height: 250px; }
.cat:first-child { grid-row: span 2; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.8); transition: transform 1s var(--ease), filter .4s; }
.cat:is(:hover, .is-held) img { transform: scale(1.05); filter: saturate(.9) brightness(.9); }
.cat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,16,12,.9), transparent 55%); }
.cat .corners { opacity: 0; transition: opacity .3s, inset .3s var(--ease); inset: 20px; }
.cat:is(:hover, .is-held) .corners { opacity: 1; inset: 12px; }
.cat__label { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cat__label .code { display: block; margin-bottom: 6px; }
.cat__label h3 { font: 800 clamp(34px, 3.4vw, 52px)/.9 var(--stencil); text-transform: uppercase; color: var(--bone); margin: 0; }
.cat__label .go { font: 600 14px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--hot); white-space: nowrap; }

/* ---------- product cards ---------- */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 14px; }
.card { position: relative; }
.card__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--surface); }
.card__media > a { display: block; height: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform 1s var(--ease); }
.card:is(:hover, .is-held) .card__media img { transform: scale(1.04); }
.card__media .corners { opacity: 0; transition: opacity .25s; }
.card:is(:hover, .is-held) .card__media .corners { opacity: 1; }
.card__badge { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--bg); color: var(--hot); padding: 6px 9px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-2); }
.card__badge.sale, .card__badge.low { background: var(--red); color: #fff; border-color: var(--red); }
.card__badge.hot { background: var(--hot); color: var(--ink); border-color: var(--hot); }
.card.soldout .card__media img { filter: grayscale(1) brightness(.55); }
.soldout-tag { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.soldout-tag span { font: 900 34px/1 var(--stencil); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); border: 3px solid var(--bone); padding: 8px 16px 6px; transform: rotate(-8deg); }
.card__wish { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; background: rgba(14,16,12,.7); color: var(--bone); opacity: 0; transition: opacity .25s; }
.card:is(:hover, .is-held) .card__wish, .card__wish.on { opacity: 1; }
.card__wish svg { width: 17px; height: 17px; }
.card__wish.on svg { fill: var(--red); stroke: var(--red); }
.quick { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: rgba(14,16,12,.94); border-top: 1px solid var(--hot); padding: 12px 14px 14px; transform: translateY(100%); transition: transform .3s var(--ease); }
.card:is(:hover, .is-held) .quick, .card:focus-within .quick { transform: none; }
.quick__label { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hot); margin-bottom: 8px; }
.quick__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.quick__sizes button { min-width: 40px; height: 32px; padding: 0 8px; border: 1px solid var(--line-2); font: 600 14px var(--cond); letter-spacing: .06em; color: var(--bone); transition: all .15s; }
.quick__sizes button:hover { background: var(--hot); color: var(--ink); border-color: var(--hot); }
.card__info { padding-top: 14px; }
.card__sku { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; text-transform: uppercase; }
.card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.card__name { font: 700 20px/1.1 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); margin: 0; }
.card__price { font: 600 18px var(--cond); letter-spacing: .04em; color: var(--hot); white-space: nowrap; }
.card__price s { color: var(--muted); margin-right: 6px; font-weight: 500; }
.swatches { display: flex; gap: 5px; margin-top: 10px; }
.swatches i { width: 14px; height: 14px; border: 1px solid var(--line-2); }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 42px) / 4); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-ctrls { display: flex; gap: 8px; }
.rail-ctrls button { width: 48px; height: 48px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--bone); transition: all .2s; }
.rail-ctrls button:hover { background: var(--hot); color: var(--ink); border-color: var(--hot); }

.tabs { display: flex; border: 1px solid var(--line-2); }
.tab { height: 44px; padding: 0 20px; font: 600 14px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: all .2s; }
.tab + .tab { border-left: 1px solid var(--line-2); }
.tab:hover { color: var(--bone); }
.tab.active { background: var(--hot); color: var(--ink); }

/* ---------- disciplines (slanted tiles) ---------- */
.disc { display: grid; grid-template-columns: repeat(var(--tiles, 6), 1fr); gap: 8px; height: clamp(420px, 56vh, 620px); }
.disc a { position: relative; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); margin: 0 -4%; transition: flex .5s var(--ease); background: var(--surface); }
.disc a:first-child { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); margin-left: 0; }
.disc a:last-child { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); margin-right: 0; }
.disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) brightness(.6); transition: filter .5s, transform 1s var(--ease); }
.disc a:is(:hover, .is-held) img { filter: grayscale(0) brightness(.85); transform: scale(1.06); }
.disc a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.85), transparent 50%); }
.disc__label { position: absolute; left: 18%; right: 8%; bottom: 22px; z-index: 2; }
.disc__label .code { display: block; margin-bottom: 6px; }
.disc__label h3 { font: 800 clamp(22px, 2.1vw, 40px)/.92 var(--stencil); text-transform: uppercase; margin: 0; color: var(--bone); transition: color .3s; overflow-wrap: anywhere; hyphens: auto; }
.disc a:is(:hover, .is-held) h3 { color: var(--hot); }
.disc a:first-child .disc__label { left: 10%; }

/* ---------- team riders ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rider { position: relative; background: var(--surface); overflow: hidden; }
.rider__img { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.rider__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .5s, transform 1s var(--ease); }
.rider:is(:hover, .is-held) .rider__img img { filter: grayscale(0); transform: scale(1.04); }
.rider__num { position: absolute; right: 12px; top: 6px; z-index: 2; font: 900 88px/1 var(--stencil); color: transparent; -webkit-text-stroke: 2px var(--hot); }
.rider__ig { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--muted); }
.rider__ig:hover { color: var(--hot); }
.rider__body { padding: 18px 20px 22px; border-top: 3px solid var(--hot); }
.rider__body h3 { font: 800 30px/.95 var(--stencil); text-transform: uppercase; margin: 6px 0 12px; color: var(--bone); }
.rider__stats { display: flex; flex-wrap: wrap; gap: 14px 18px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rider__stats b { display: block; font: 700 18px var(--cond); color: var(--bone); letter-spacing: .04em; }
.rider .link-arrow { margin-top: 16px; font-size: 13px; }

/* ---------- next event ---------- */
.event { position: relative; overflow: hidden; isolation: isolate; }
.event__bg { position: absolute; inset: 0; z-index: -1; }
.event__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.35); }
.event__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.event h2 { font-size: clamp(56px, 7.5vw, 124px); margin: 14px 0 22px; }
.event p { font-size: 18px; max-width: 520px; color: var(--text); margin: 0 0 30px; }
.event__meta { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 30px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.event__meta b { display: block; font: 700 20px var(--cond); color: var(--bone); letter-spacing: .04em; }
.clock { background: rgba(10,10,10,.85); border: 1px solid var(--line-2); padding: 28px; backdrop-filter: blur(6px); }
.clock__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.clock__row div { background: var(--surface-2); padding: 16px 8px 12px; text-align: center; }
.clock__row b { display: block; font: 900 clamp(44px, 5vw, 76px)/.9 var(--stencil); color: var(--hot); font-variant-numeric: tabular-nums; }
.clock__row small { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.clock__label { font: 600 16px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); margin-bottom: 16px; }
.clock form { display: flex; margin-top: 18px; border: 1.5px solid var(--hot); }
.clock input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--bone); padding: 0 16px; font: 500 13px var(--mono); }
.clock input::placeholder { color: var(--muted); text-transform: uppercase; }
.clock button { height: 50px; padding: 0 20px; background: var(--hot); color: var(--ink); font: 700 15px var(--cond); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- field tested (specs) ---------- */
.field { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.field__imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 620px; }
.field__imgs div { position: relative; overflow: hidden; }
.field__imgs div:first-child { grid-row: span 2; }
.field__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.spec { background: var(--surface); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; }
.spec h2 { font-size: clamp(46px, 5vw, 80px); margin: 12px 0 18px; }
.spec > p { color: var(--muted); margin: 0 0 26px; }
.spec table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.spec td { padding: 13px 0; border-bottom: 1px dashed var(--line-2); font: 600 17px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.spec td:first-child { font: 500 11px var(--mono); color: var(--hot); letter-spacing: .1em; width: 42%; }
.spec .btn { margin-top: auto; align-self: flex-start; }

/* ---------- field reports (reviews) ---------- */
.reports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.report { background: var(--surface); border-left: 3px solid var(--hot); padding: 28px; display: flex; flex-direction: column; gap: 18px; margin: 0; }
.report__top { display: flex; justify-content: space-between; align-items: center; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stars { color: var(--hot); letter-spacing: 3px; font-size: 14px; }
.report q { font: 600 23px/1.25 var(--cond); letter-spacing: .01em; color: var(--bone); quotes: '“' '”'; }
.report footer { margin-top: auto; display: flex; align-items: center; gap: 12px; font: 600 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.report footer i { width: 40px; height: 40px; background: var(--olive); color: var(--bone); display: grid; place-items: center; font: 800 16px var(--stencil); font-style: normal; }
.report footer small { display: block; font: 500 11px var(--mono); color: var(--hot); letter-spacing: .08em; }
.verified { color: var(--ok); }

.ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.ig a { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.ig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); transition: transform .8s var(--ease), filter .4s; }
.ig a:hover img { transform: scale(1.06); filter: none; }

/* ---------- military discount strip ---------- */
.served { background: var(--bone); color: var(--ink); }
.served .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 30px; flex-wrap: wrap; }
.served h3 { font: 900 clamp(34px, 4vw, 56px)/.9 var(--stencil); text-transform: uppercase; margin: 0; }
.served p { margin: 8px 0 0; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.served .btn { background: var(--ink); color: var(--bone); }
.served .btn:is(:hover, .is-held) { background: var(--hot); color: var(--ink); }

/* ---------- newsletter ---------- */
.newsletter { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.newsletter__bg { position: absolute; inset: 0; z-index: -1; }
.newsletter__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.28) saturate(.7); }
.newsletter h2 { font-size: clamp(56px, 8vw, 128px); margin: 14px 0 16px; }
.newsletter p { margin: 0 auto 34px; max-width: 480px; color: var(--text); }
.newsletter form { display: flex; max-width: 560px; margin: 0 auto; border: 1.5px solid var(--hot); background: rgba(14,16,12,.7); }
.newsletter input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--bone); padding: 0 20px; font: 500 14px var(--mono); letter-spacing: .04em; }
.newsletter input::placeholder { color: var(--muted); text-transform: uppercase; }
.newsletter button { height: 56px; padding: 0 26px; background: var(--hot); color: var(--ink); font: 700 16px var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.newsletter button:hover { background: var(--bone); }
.newsletter .fine { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }

/* ---------- footer ---------- */
.footer { background: #0A0B08; color: var(--muted); padding: 80px 0 32px; font-size: 15px; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 40px; padding-bottom: 60px; }
.footer .logo__word { height: 64px; }
.footer .logo__text { font-size: 64px; }
.footer .logo__ghost { width: 50px; height: 60px; }
/* Giant footer wordmark: the client's artwork used as a luminance mask, so its white letters take this colour */
.footer__giant { width: min(100% - 2 * var(--gutter), clamp(440px, 66vw, 1160px)); aspect-ratio: 900 / 480; margin: 40px auto -2px; background: var(--surface-2);
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  /* mask-image is set inline so its path resolves from the page. It is a transparent SVG traced
     from the artwork: at this size a bitmap went soft on a big screen, and Safari reads only a
     mask's transparency, so a black-and-white JPG showed there as a solid grey box. */
.footer h5 { color: var(--hot); margin: 0 0 18px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 600 16px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.footer a:hover { color: var(--bone); }
.footer__motto { font: 800 22px var(--stencil); text-transform: uppercase; letter-spacing: .06em; color: var(--bone); margin: 22px 0 8px; }
.footer__bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pay { display: flex; gap: 6px; flex-wrap: wrap; }
.pay span { border: 1px solid var(--line-2); padding: 4px 8px; }

/* ---------- cart drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .35s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(460px, 100%); background: var(--bg-2); border-left: 1px solid var(--line-2); transform: translateX(100%); transition: transform .45s var(--ease); display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer__head h3 { font: 800 36px/1 var(--stencil); text-transform: uppercase; color: var(--bone); margin: 0; }
.ship-meter { padding: 16px 24px; border-bottom: 1px solid var(--line); font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.ship-meter b { color: var(--hot); }
.ship-meter .bar { height: 6px; background: var(--surface-2); margin-top: 10px; }
.ship-meter .bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--hot) 0 6px, var(--hot-2) 6px 12px); transition: width .5s var(--ease); }
.drawer__items { flex: 1; overflow-y: auto; padding: 8px 24px; }
.line-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line-item img { width: 84px; height: 105px; object-fit: cover; }
.line-item h4 { margin: 0 0 4px; font: 700 18px/1.1 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.line-item small { color: var(--muted); font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); margin-top: 12px; }
.qty button { width: 30px; height: 30px; color: var(--bone); }
.qty span { min-width: 24px; text-align: center; font: 500 13px var(--mono); }
.line-item .remove { font: 500 11px var(--mono); text-transform: uppercase; color: var(--muted); text-decoration: underline; align-self: end; }
.drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.drawer__foot .row { display: flex; justify-content: space-between; margin-bottom: 6px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.drawer__foot .total { font: 700 22px var(--cond); letter-spacing: .06em; color: var(--bone); margin: 12px 0 18px; }
.drawer__foot .mil { font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--hot); background: var(--surface); padding: 10px 12px; margin-bottom: 14px; border-left: 2px solid var(--hot); }
.empty { text-align: center; padding: 64px 12px; color: var(--muted); }
.empty h4 { font: 800 40px/1 var(--stencil); text-transform: uppercase; color: var(--bone); margin: 0 0 10px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; background: var(--hot); color: var(--ink); padding: 14px 20px; font: 600 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; display: flex; gap: 12px; align-items: center; transition: transform .4s var(--ease), visibility .4s; width: max-content; max-width: calc(100% - 32px); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast svg { width: 18px; height: 18px; stroke: var(--ink); flex-shrink: 0; }

.demo-pill { position: fixed; right: 16px; bottom: 16px; z-index: 50; background: var(--bg); border: 1px solid var(--hot); color: var(--bone); padding: 11px 16px 11px 13px; display: flex; gap: 10px; align-items: center; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: transform .2s; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.demo-pill:hover { transform: translateY(-2px); }
.demo-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(127,161,90,.25); }

/* ---------- shop / collection ---------- */
.page-head { padding: 56px 0 36px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.page-head h1 { font-size: clamp(64px, 9vw, 140px); margin: 14px 0 10px; }
.crumbs { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--hot); }
.shop { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-bottom: 120px; }
.filters { position: sticky; top: 100px; align-self: start; }
.filter-group { border-top: 1px solid var(--line); padding: 18px 0; }
.filter-group h6 { margin: 0 0 12px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hot); }
.check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font: 600 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: var(--text); }
.check input { accent-color: var(--hot); width: 15px; height: 15px; }
.check small { margin-left: auto; color: var(--muted); font: 500 11px var(--mono); }
.size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.size-grid button { height: 36px; border: 1px solid var(--line-2); font: 600 14px var(--cond); color: var(--text); }
.size-grid button.on { background: var(--hot); color: var(--ink); border-color: var(--hot); }
.filters .link-arrow { font-size: 13px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.toolbar select { border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); height: 40px; padding: 0 12px; margin-left: 8px; font: 600 14px var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.filter-toggle { display: none; }
.products--shop { grid-template-columns: repeat(3, 1fr); }
.no-results { grid-column: 1/-1; padding: 80px 0; text-align: center; color: var(--muted); }

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); padding: 24px 0 96px; }
.pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdp__gallery .main { grid-column: 1 / -1; aspect-ratio: 4/5; overflow: hidden; cursor: zoom-in; background: var(--surface); position: relative; }
.pdp__gallery .main img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pdp__gallery .main.zoom img { transform: scale(1.8); cursor: zoom-out; }
.pdp__gallery .alt { aspect-ratio: 4/5; overflow: hidden; background: var(--surface); }
.pdp__gallery .alt img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.pdp__info { position: sticky; top: 100px; align-self: start; }
.pdp__info h1 { font-size: clamp(52px, 5vw, 80px); margin: 12px 0 14px; }
.pdp__price { font: 700 30px var(--cond); letter-spacing: .04em; color: var(--hot); margin-bottom: 8px; }
.pdp__price s { color: var(--muted); margin-left: 10px; font-size: 22px; font-weight: 500; }
.pdp__opt { margin: 26px 0; }
.pdp__opt-head { display: flex; justify-content: space-between; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; color: var(--muted); }
.pdp__opt-head a { text-decoration: underline; }
.color-row { display: flex; gap: 10px; }
.color-row button { width: 34px; height: 34px; border: 1px solid var(--line-2); outline-offset: 3px; }
.color-row button.on { outline: 2px solid var(--hot); }
.size-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.size-row button { height: 50px; border: 1px solid var(--line-2); font: 700 17px var(--cond); letter-spacing: .06em; color: var(--bone); background: var(--surface); transition: all .15s; }
.size-row button:hover { border-color: var(--hot); }
.size-row button.on { background: var(--hot); color: var(--ink); border-color: var(--hot); }
.size-row.error button { border-color: var(--red); }
.stock-note { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 20px; display: flex; gap: 8px; align-items: center; }
.stock-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.stock-note.low i { background: var(--red); }
.accordion { margin-top: 32px; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; font: 700 17px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); }
.accordion summary::after { content: '+'; color: var(--hot); }
.accordion details[open] summary::after { content: '–'; }
.accordion details p { margin: 0 0 18px; color: var(--text); }
.maker-note { margin-top: 22px; background: var(--surface); border-left: 3px solid var(--hot); padding: 18px 20px; display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.maker-note img { width: 52px; height: 52px; object-fit: cover; filter: grayscale(1); }
.maker-note .hand { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hot); }
.maker-note p { margin: 6px 0 0; font: 600 18px/1.3 var(--cond); letter-spacing: .02em; color: var(--bone); }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin-top: 22px; border: 1px solid var(--line); }
.perks div { background: var(--bg); padding: 14px; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.perks b { display: block; font: 700 16px var(--cond); color: var(--bone); letter-spacing: .06em; }

/* ---------- checkout extras ---------- */
.ship-to { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.ship-to span { color: var(--muted); margin-right: 4px; }
.ship-to button { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 6px 10px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; }
.ship-to button:hover { color: var(--bone); }
.ship-to button.on { background: var(--hot); border-color: var(--hot); color: var(--ink); }
.drawer__foot .total small { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); }
.drawer__foot .btn:disabled { opacity: .6; cursor: wait; }
.secure-note { margin: 10px 0 0; text-align: center; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.done { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 90px 0 120px; }
.done__mark { width: 72px; height: 72px; margin: 0 auto 24px; display: grid; place-items: center; background: var(--hot); color: var(--ink); }
.done__mark svg { width: 38px; height: 38px; stroke: currentColor; }
.done p { max-width: 520px; margin: 14px auto 0; }
.done .btn { margin-top: 30px; }

/* ---------- customer order page ---------- */
.order-page { padding-top: 60px; padding-bottom: 110px; max-width: 1108px; }
.order-head .display { font-size: clamp(48px, 7vw, 92px); margin: 10px 0 12px; }
.order-head p { max-width: 560px; margin: 0; }
.order-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 32px 0 0; padding: 0; counter-reset: s; }
.order-steps li { counter-increment: s; padding: 14px 0 0; border-top: 4px solid var(--line-2); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.order-steps li::before { content: '0' counter(s) ' // '; }
.order-steps li.is-done { border-color: var(--hot); color: var(--bone); }
.order-track { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding: 18px 20px; background: var(--surface); border-left: 3px solid var(--hot); }
.order-track small { display: block; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.order-track b { font: 700 22px var(--cond); letter-spacing: .06em; color: var(--bone); }
.order-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin-top: 36px; align-items: start; }
.order-items .line-item { grid-template-columns: 72px 1fr auto; }
.order-sum { background: var(--surface); padding: 22px; }
.order-sum .row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.order-sum .total { font: 700 22px var(--cond); letter-spacing: .06em; color: var(--bone); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--bone); font-size: 14px; }
.order-meta small { display: block; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.order-help { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.order-help a, .order-thanks a { color: var(--hot); }
.order-thanks { display: flex; gap: 16px; align-items: center; margin-bottom: 36px; padding: 16px 18px; background: var(--surface); color: var(--text); }
.order-thanks .done__mark { width: 44px; height: 44px; margin: 0; flex: none; }
.order-thanks .done__mark svg { width: 24px; height: 24px; }
.order-thanks b { color: var(--bone); }
@media (max-width: 760px) { .order-grid { grid-template-columns: 1fr; } .order-steps li { font-size: 10px; } }

/* ---------- customer reviews (reviews.js) ---------- */
.rv-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.rv-stars svg { width: 16px; height: 16px; fill: var(--line-2); }
.rv-stars svg.on { fill: var(--hot); }
.pdp__rating { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pdp__rating:hover span { color: var(--bone); }
.reviews-section { padding: 90px 0 30px; }
.reviews-section .section-head { align-items: end; }
.rv-summary { display: flex; align-items: center; gap: 10px; color: var(--muted) !important; font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rv-summary b { font: 700 22px var(--cond); color: var(--bone); }
.rv-summary .rv-stars svg { width: 20px; height: 20px; }
.rv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.rv-layout:has(.rv-side:not([hidden])) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rv-list:empty { display: none; }
.rv-card { background: var(--surface); border-left: 3px solid var(--hot); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.rv-card__top { display: flex; justify-content: space-between; align-items: center; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.rv-card__body { margin: 0; color: var(--bone); font: 500 17px/1.45 var(--sans); white-space: pre-line; overflow-wrap: anywhere; }
.rv-card__photos, .report__photos { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-card__photos a { width: 84px; height: 84px; overflow: hidden; background: var(--surface-2); }
.rv-card__photos img { width: 100%; height: 100%; object-fit: cover; }
.report__photos img { width: 72px; height: 72px; object-fit: cover; background: var(--surface-2); }
.rv-card footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font: 600 15px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.rv-card footer small { font: 500 11px var(--mono); color: var(--muted); letter-spacing: .06em; }

.rv-form { background: var(--surface); border: 1px solid var(--line); padding: 26px; display: grid; gap: 16px; }
.rv-form h3 { margin: 0; font: 700 24px var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.rv-form p { margin: 0; }
.rv-form label { display: grid; gap: 8px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv-form input:not([type=file]), .rv-form textarea { width: 100%; background: var(--bg); border: 1px solid var(--line-2); color: var(--bone); padding: 12px 14px; font: 400 16px/1.4 var(--sans); text-transform: none; letter-spacing: 0; border-radius: 0; }
.rv-form textarea { resize: vertical; min-height: 110px; }
.rv-form input:focus, .rv-form textarea:focus { outline: none; border-color: var(--hot); }
.rv-form__rate { display: flex; align-items: center; gap: 4px; }
.rv-form__rate button { padding: 2px; line-height: 0; }
.rv-form__rate svg { width: 32px; height: 32px; fill: var(--line-2); transition: fill .15s, transform .15s; }
.rv-form__rate svg.on { fill: var(--hot); }
.rv-form__rate button:hover svg { transform: scale(1.12); }
.rv-form__rate-label { margin-left: 10px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rv-form__photos { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-form__thumbs { display: contents; }
.rv-thumb { position: relative; width: 84px; height: 84px; background: var(--surface-2); }
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-thumb button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: rgba(0,0,0,.75); color: var(--bone); font: 700 16px/24px var(--sans); }
.rv-form label.rv-form__add { width: 84px; height: 84px; display: grid; place-content: center; text-align: center; gap: 2px; border: 1.5px dashed var(--line-2); cursor: pointer; color: var(--bone); }
.rv-form label.rv-form__add[hidden] { display: none; }
.rv-form__add:hover { border-color: var(--hot); color: var(--hot); }
.rv-form__add span { font: 600 13px var(--cond); letter-spacing: .06em; }
.rv-form__add small { font: 500 10px var(--mono); color: var(--muted); }
.rv-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.rv-form__error { color: var(--red); font: 500 13px var(--mono); }
.rv-form__fine { font: 500 11px var(--mono); letter-spacing: .04em; color: var(--muted); }
.rv-form .btn[disabled] { opacity: .6; pointer-events: none; }
.rv-thanks { background: var(--surface); border-left: 3px solid var(--hot); padding: 26px; }
.rv-thanks h3 { margin: 12px 0 6px; font: 700 24px var(--cond); text-transform: uppercase; color: var(--bone); }
.rv-thanks p { margin: 0; }

.rv-gear { margin: 70px 0 100px; }
.rv-gear__item { border-top: 1px solid var(--line); padding: 18px 0; }
.rv-gear__item:last-child { border-bottom: 1px solid var(--line); }
.rv-gear__head { display: flex; align-items: center; gap: 16px; }
.rv-gear__head img { width: 64px; height: 80px; object-fit: cover; background: var(--surface); flex: none; }
.rv-gear__head > div { flex: 1; min-width: 0; font: 600 18px var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.rv-gear__head small { display: block; font: 500 11px var(--mono); color: var(--muted); letter-spacing: .06em; }
.rv-gear__head .btn { height: 44px; padding: 0 20px; font-size: 14px; }
.rv-gear__form { margin-top: 18px; max-width: 640px; }
@media (max-width: 900px) {
  .rv-layout:has(.rv-side:not([hidden])) { grid-template-columns: 1fr; }
  .rv-side { order: -1; }
  .reviews-section .section-head { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .rv-list { grid-template-columns: 1fr; }
  .rv-form { padding: 20px 16px; }
  .rv-gear__head { flex-wrap: wrap; }
  .rv-gear__head .btn { width: 100%; }
}

/* ---------- coming soon curtain ---------- */
.preview-problem { position: sticky; top: 0; z-index: 95; background: var(--red); color: #fff; padding: 10px 14px; font: 500 13px/1.45 var(--sans); text-align: center; }
.preview-bar button { margin-left: 12px; font: inherit; text-decoration: underline; color: inherit; }
.preview-bar { position: sticky; top: 0; z-index: 90; background: var(--hot); color: var(--ink); text-align: center; padding: 7px 12px; font: 600 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
body.soon { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: clamp(24px, 5vh, 48px) var(--gutter); background: var(--bg); }
body.soon::after { content: ''; position: fixed; right: -12%; bottom: -10%; width: 60%; height: 80%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 34px, color-mix(in srgb, var(--hot) 8%, transparent) 34px 40px); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.soon__wrap { position: relative; width: min(620px, 100%); text-align: center; display: grid; justify-items: center; gap: clamp(12px, 2.2vh, 18px); }
.soon__head { display: inline-block; position: relative; line-height: 0; }
.soon__ghost { width: clamp(44px, 6vh, 60px); height: auto; margin-bottom: -6px; }
.soon__word { width: min(clamp(230px, 34vh, 340px), 78%); aspect-ratio: 900 / 480; background: var(--bone);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; margin: 0 0 -14px; }
.soon__wrap .display { font-size: clamp(44px, min(11vw, 9vh), 104px); margin: 0; }
.soon__wrap p { margin: 0; color: var(--muted); max-width: 46ch; font-size: 17px; line-height: 1.6; }
.soon__form { display: flex; gap: 10px; width: min(440px, 100%); flex-wrap: wrap; }
.soon__form input { flex: 1 1 220px; min-width: 0; height: 54px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line-2); color: var(--bone); font: 400 16px var(--sans); }
.soon__form input:focus { outline: none; border-color: var(--hot); }
.soon__bad { margin: 0; padding: 12px 16px; border: 1px solid var(--red); color: #FFD2CE; font: 500 13px/1.5 var(--sans); max-width: 46ch; }
.soon__thanks { font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hot); }
.soon__by { margin-top: clamp(10px, 2.5vh, 26px); display: flex; align-items: center; justify-content: center; gap: 14px; opacity: .62; transition: opacity .25s; }
.soon__by:hover { opacity: 1; }
.soon__by:focus-visible { opacity: 1; }
.soon__by span { font: 500 10px var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.soon__by img { width: clamp(84px, 11vh, 112px); height: auto; }
@media (max-width: 540px) { .soon__form .btn { width: 100%; } }

/* =========================================================
   MOTION
   Driven by assets/js/motion.js, which puts .motion on <html>. Without it — script blocked,
   or the visitor prefers less movement — none of this applies and the page is simply static.
   Only transform and opacity are animated, so scrolling stays smooth on a phone.
   ========================================================= */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.33, 1, .68, 1); }

/* Entrance: a short rise and fade. --step staggers children of a group. */
.motion .rise { opacity: 0; transform: translate3d(0, 22px, 0); will-change: transform, opacity; }
.motion .rise.in {
  opacity: 1; transform: none; will-change: auto;
  transition: opacity .7s var(--ease-soft), transform .9s var(--ease-out);
  transition-delay: calc(var(--step, 0) * 70ms);
}
/* Headlines carry a touch more weight, so they move a little further and settle a little later. */
.motion .section-head.rise { transform: translate3d(0, 30px, 0); }
.motion .hero__inner.rise { transform: translate3d(0, 34px, 0); }

/* Photos fade up as they load rather than popping in. */
.motion img.lift { opacity: 0; transform: scale(1.02); }
.motion img.lit { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft), transform 1.2s var(--ease-out); }

/* Backdrops drift under the page as it scrolls (motion.js sets the transforms). Each is a
   little taller than its frame so there is something to move into. */
.motion .hero__img { will-change: transform; }
.motion .event__bg img, .motion .newsletter__bg img, .motion .page-head__bg { will-change: transform; height: 118%; top: -9%; }

/* The header tightens once you leave the top of the page. */
.motion .header { transition: height .35s var(--ease-out), background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
.motion.scrolled .header { background: rgba(10, 10, 10, .82); backdrop-filter: blur(10px); border-bottom-color: var(--line-2); }
.motion .header__row { transition: height .35s var(--ease-out); }
.motion.scrolled .header__row { height: 62px; }

/* The hero lines arrive one after another, like a title sequence. */
.motion .hero__inner > .rise.in { transition-delay: calc(var(--step, 0) * 90ms); }

/* The rule under a section heading draws itself in. */
.motion .section-head { border-bottom-color: transparent; position: relative; }
.motion .section-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) .15s;
}
.motion .section-head.in::after { transform: scaleX(1); }

/* Countdown digits drop as they change. */
@keyframes spx-tick { 0% { transform: translateY(-55%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.motion .clock__row b.tick { animation: spx-tick .42s var(--ease-out); }

/* The cart slides with a little more ease, and its lines follow it in. */
.drawer { transition: transform .5s var(--ease-out); }
.motion .drawer.open .line-item { animation: spx-line .5s var(--ease-out) backwards; animation-delay: calc(var(--n, 0) * 60ms); }
@keyframes spx-line { from { opacity: 0; transform: translateX(22px); } }

/* Moving between pages: a short cross-fade where the browser supports it. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: spx-fade-out .18s ease forwards; }
::view-transition-new(root) { animation: spx-fade-in .32s var(--ease-soft) forwards; }
@keyframes spx-fade-out { to { opacity: 0; } }
@keyframes spx-fade-in { from { opacity: 0; } }

/* A second photo sits behind the first and comes forward on hover, so the piece turns as you
   look at it. Only on products that have one. */
.card__media .card__alt { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .55s var(--ease-soft), transform 1.2s var(--ease-out); }
.card:is(:hover, .is-held) .card__media .card__alt { opacity: 1; transform: scale(1); }
/* Only fade the first photo out when there is a second one behind it to show. */
.card:is(:hover, .is-held) .card__media > a > img:first-of-type:has(+ .card__alt) { opacity: 0; transition: opacity .55s var(--ease-soft); }

/* Page tiles keep their slanted grid: the shapes and overlaps are cut for fixed columns.
   The hover work is colour, the label and the tilt below. */
.disc__label h3 { transition: color .3s, transform .5s var(--ease-out); }
.disc a:is(:hover, .is-held) .disc__label h3 { transform: translateY(-4px); }
.disc__label .code { transition: letter-spacing .5s var(--ease-out), color .3s; }
.disc a:is(:hover, .is-held) .disc__label .code { letter-spacing: .3em; color: var(--hot); }
.disc__label::after {
  content: ''; display: block; height: 2px; width: 100%; margin-top: 10px; background: var(--hot);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
.disc a:is(:hover, .is-held) .disc__label::after { transform: scaleX(1); }

/* Headlines come up from behind their own edge. */
.motion .line-mask { display: block; overflow: hidden; }
.motion .line-mask > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--l, 0) * 90ms); }
.motion .in .line-mask > span, .motion .line-mask.in > span { transform: none; }

/* A hairline that fills as you read down the page. */
.motion .read-line { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 45; background: var(--hot); transform: scaleX(var(--read, 0)); transform-origin: left; pointer-events: none; opacity: .9; }

/* ---------- tilt ----------
   The card leans towards the cursor (motion.js sets the angles), the photo drifts a little
   further than the frame, and a soft glare follows the pointer across it. */
.motion .card, .motion .rider, .motion .report, .motion .rv-card, .motion .disc a, .motion .cat, .motion .perks > div, .motion .line-item {
  transform-style: preserve-3d;
}
.motion .card.tilt, .motion .rider.tilt, .motion .report.tilt, .motion .rv-card.tilt,
.motion .disc a.tilt, .motion .cat.tilt, .motion .perks > div.tilt, .motion .line-item.tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translate3d(0, -6px, 0);
  transition: transform .18s ease-out;
}
.motion .card.tilt .card__media img, .motion .rider.tilt .rider__img img, .motion .disc a.tilt img, .motion .cat.tilt img {
  transform: scale(1.06) translate3d(var(--px, 0), var(--py, 0), 0);
}
.motion .card__media::after, .motion .rider__img::after, .motion .disc a::before, .motion .cat::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 60%);
  transition: opacity .35s ease;
}
.motion .card.tilt .card__media::after, .motion .rider.tilt .rider__img::after,
.motion .disc a.tilt::before, .motion .cat.tilt::before { opacity: 1; }
/* The tile's own label and gradient ride in front of the glare. */
.motion .disc a::before, .motion .cat::before { z-index: 1; }
/* The quick-add panel and labels ride in front of the tilt rather than lying flat on it. */
.motion .card.tilt .quick, .motion .card.tilt .card__badge { transform: translateZ(28px); }
.motion .card.tilt .quick { transform: translateY(0) translateZ(28px); }

/* ---------- the footer wordmark fills up ----------
   The giant SPXTR is a mask, so whatever sits inside it is clipped to the letterforms. On hover
   the brand colour pours up through the letters, with a wave running across its surface, and
   drains back out when the pointer leaves.

   Everything moves by transform alone — no height, no border-radius — because this element is
   enormous on a big monitor and anything that repaints it stutters. The colour is flat for the
   same reason: a gradient stretched over 1000px bands on wide screens. */
.footer__giant { position: relative; overflow: hidden; isolation: isolate; }
.giant__liquid, .giant__wave { display: block; pointer-events: none; }

.motion .giant__liquid {
    position: absolute; left: -25%; right: -25%; bottom: -2%; height: 125%;
    background: var(--pour-giant, var(--hot));
    transform: translate3d(0, 100%, 0);                   /* parked below the letters */
    transition: transform 2.4s cubic-bezier(.33, .9, .3, 1);   /* the pour */
    will-change: transform;
  }
.motion .footer__giant:is(:hover, .is-held) .giant__liquid {
  transform: translate3d(0, 0, 0);
  transition: transform 2.4s cubic-bezier(.33, .9, .3, 1);
}
.motion .footer__giant:not(:hover):not(.is-held) .giant__liquid {
  transition: transform 1.5s cubic-bezier(.5, 0, .75, .4);     /* draining is quicker */
}

  /* The surface. Two sine waves of different widths slide across each other in opposite
     directions, so the crests rise and fall against one another instead of marching along. The
     whole surface rolls gently at the same time. */
  .motion .giant__wave {
    position: absolute; left: 0; bottom: 100%; width: 100%; height: clamp(34px, 4.4vw, 84px);
    animation: spx-slosh 5.2s ease-in-out infinite alternate;
    will-change: transform;
  }
  .motion .giant__wave::before, .motion .giant__wave::after {
    /* The surface rolls up to 10px; the fill reaches well below it so body and surface never
       come apart, whatever point the roll is at. */
    content: ''; position: absolute; bottom: -18px; left: 0; height: calc(100% + 18px); width: 300%;
    background: var(--pour-giant, var(--hot));
    -webkit-mask-image: var(--wave); mask-image: var(--wave);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: 0 bottom; mask-position: 0 bottom;
    will-change: transform;
  }
  .motion .giant__wave::before {
    -webkit-mask-size: 520px 100%; mask-size: 520px 100%;
    animation: spx-wave-a 7.5s linear infinite;
  }
  .motion .giant__wave::after {
    -webkit-mask-size: 340px 74%; mask-size: 340px 74%;
    opacity: .5;
    animation: spx-wave-b 12s linear infinite;
  }

/* Each layer travels exactly one tile width, so the loop is seamless. */
@keyframes spx-wave-a { to { transform: translate3d(-520px, 0, 0); } }
@keyframes spx-wave-b { to { transform: translate3d(340px, 0, 0); } }
@keyframes spx-slosh { from { transform: translate3d(0, 4px, 0); } to { transform: translate3d(0, -10px, 0); } }


/* ---------- buttons fill too ----------
   The same pour as the footer wordmark, at button size. One element does the whole job: its top
   edge is cut into a wave by a mask, the rest of it is solid, so the surface can never drift out
   of line with the liquid. It sits above the button's background and below the label, which needs
   no change to the markup.

   A solid button fills with bone, a ghost button with the brand colour, and the fill stops just
   short of the top so the wave is on show the whole time, not only during the pour. */
.motion .btn { position: relative; overflow: hidden; isolation: isolate; }
.motion .btn { --pour: var(--bone); }          /* what this button fills with */
.motion .btn::before {
  content: ''; position: absolute; z-index: -1; left: -20%; right: -20%; bottom: 0;
  height: calc(100% + 12px);
  background: var(--pour);
  -webkit-mask-image: var(--wave), linear-gradient(#000, #000);
          mask-image: var(--wave), linear-gradient(#000, #000);
  -webkit-mask-size: 118px 12px, 100% calc(100% - 11px);
          mask-size: 118px 12px, 100% calc(100% - 11px);
  -webkit-mask-position: 0 top, 0 bottom;
          mask-position: 0 top, 0 bottom;
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
  transform: translate3d(0, 100%, 0);
  transition: transform .5s cubic-bezier(.33, .9, .3, 1);
  animation: spx-crest-c 3.4s linear infinite;      /* the crests travel along the surface */
}
.motion .btn:is(:hover, .is-held)::before { transform: translate3d(0, 6px, 0); }
.motion .btn:not(:hover):not(.is-held)::before { transition: transform .32s cubic-bezier(.5, 0, .75, .4); }
/* Each kind pours whatever its hover state used to turn, so buttons still read the same way
   against whatever they sit on. */
.motion .btn--ghost, .motion .btn--light, .motion .served .btn { --pour: var(--hot); }
/* The background no longer jumps on hover: the liquid does that job. */
.motion .btn:is(:hover, .is-held) { background: var(--hot); }
.motion .btn--ghost:is(:hover, .is-held) { background: transparent; }
.motion .btn--light:is(:hover, .is-held) { background: var(--bone); }
.motion .served .btn:is(:hover, .is-held) { background: var(--ink); }   /* the liquid does the colour change */
@keyframes spx-crest-c { to { -webkit-mask-position: -118px top, 0 bottom; mask-position: -118px top, 0 bottom; } }

/* Holding a tile is how a finger gets the hover treatment, so stop iOS answering the same press
   with its own link preview. Text elsewhere stays selectable. */
.card, .disc a, .cat, .rider, .btn { -webkit-touch-callout: none; }

/* ---------- hover and press ----------
   These are wanted whether or not the reveal system is running, so they sit outside .motion
   and are switched off wholesale by the reduced-motion rule at the end of this file. */
.btn { transition: background .2s, color .2s, transform .18s var(--ease-out), box-shadow .25s; }
.btn:is(:hover, .is-held) { transform: translateY(-2px); }
/* With a pointer to follow, a button leans and drifts towards it. */
.motion .btn.tilt, .motion .link-arrow.tilt {
  transform: perspective(600px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translate3d(var(--px, 0), calc(var(--py, 0px) - 2px), 0);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn--ghost:is(:hover, .is-held) { box-shadow: inset 0 0 0 1.5px var(--bone); }

.card { transition: transform .4s var(--ease-out); }
.card:is(:hover, .is-held) { transform: translateY(-6px); }
.card__media { transition: box-shadow .4s ease; }
.card:is(:hover, .is-held) .card__media { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); }
.card__name { transition: color .2s; }
.card:is(:hover, .is-held) .card__name { color: var(--hot); }

.rider__img img { transition: transform 1.1s var(--ease-out), filter .5s ease; }
.rider:is(:hover, .is-held) .rider__img img { transform: scale(1.05); }

/* Navigation: the underline grows out from the left instead of appearing. */
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--hot); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

.link-arrow { transition: color .2s, border-color .2s; }
.link-arrow svg { transition: transform .3s var(--ease-out); }
.link-arrow:is(:hover, .is-held) svg { transform: translateX(5px); }

.tab { transition: background .25s, color .25s; }
.icon-btn svg { transition: transform .3s var(--ease-out); }
.icon-btn:is(:hover, .is-held) svg { transform: scale(1.12); }

/* The ticker stops while you're reading it. */
.marquee:hover .marquee__track, .announce:hover .announce__track { animation-play-state: paused; }

/* The countdown ticks over rather than cutting. */
.motion .clock__row b { transition: transform .35s var(--ease-out), color .35s ease; }

/* Filters and form rows answer back a little. */
.check { transition: color .2s; }
.check:hover { color: var(--bone); }
.size-grid button, .size-row button, .quick__sizes button { transition: background .2s, color .2s, border-color .2s, transform .18s var(--ease-out); }
.size-grid button:hover, .size-row button:hover, .quick__sizes button:hover { transform: translateY(-2px); }

/* ---------- the banner's sound ----------
   Sits in the corner of the banner. It always starts silent, because no browser will autoplay
   sound, so this is the way in rather than a decoration. */
.hero__sound {
  position: absolute; right: var(--gutter); bottom: 112px; z-index: 5;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 12px;
  background: rgba(10, 10, 10, .62); backdrop-filter: blur(6px);
  border: 1px solid var(--line-2); color: var(--bone);
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s, border-color .25s, color .25s, transform .2s var(--ease-out);
}
.hero__sound svg { width: 16px; height: 16px; }
.hero__sound:is(:hover, .is-held) { background: rgba(10, 10, 10, .85); border-color: var(--hot); color: var(--hot); transform: translateY(-2px); }
.hero__sound.on { border-color: var(--hot); color: var(--hot); }
@media (max-width: 900px) {
  .hero__sound { bottom: auto; top: 18px; right: 16px; padding: 8px 10px; }
  .hero__sound span { display: none; }          /* the icon says it on a phone */
}

/* The ways in to the application pages from the closed store. */
.soon__privacy { display: block; margin-top: 22px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.soon__privacy:hover { color: var(--bone); }
.soon__ways { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.soon__amb-note {
  display: block; margin-top: 12px; max-width: 34ch;
  font: 500 11px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* =========================================================
   APPLICATIONS  (/ambassadors/ and /models/)

   These two pages are the only place on the site that uses gold, and it is used as a material
   rather than a colour: a gradient with a highlight running through it, so an edge catches the
   light the way leaf does. It carries the one idea the page has to land - that being asked in
   is worth something - without touching the brand's own accent, which the client sets.

   Everything moves on one curve (--ap-ease), a long decelerating one. Nothing bounces.
   ========================================================= */
body.ap {
  background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; position: relative;
  --gold-1: #7A5C18; --gold-2: #D9AE43; --gold-3: #FFF0B8; --gold-4: #C9A227;
  /* Two mixes. The first has deep stops, for text and hairlines where contrast is what reads.
     The second stays bright the whole way round, because a filled surface sweeping through a
     dark stop just looks olive. */
  --gold: linear-gradient(118deg, var(--gold-1) 0%, var(--gold-2) 18%, var(--gold-3) 34%,
                          var(--gold-2) 48%, var(--gold-1) 66%, var(--gold-2) 84%, var(--gold-3) 100%);
  --gold-fill: linear-gradient(118deg, #BE9530 0%, #E8C86A 16%, #FFF3C8 30%, #E2BB55 44%,
                               #C9A33A 60%, #EFD386 78%, #FFF3C8 100%);
  --ap-ease: cubic-bezier(.16, 1, .3, 1);
  --ap-line: color-mix(in srgb, var(--gold-2) 26%, transparent);
}
/* Grain, then a vignette. Both fixed, so the page feels lit rather than printed. */
body.ap::after {
  content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background-image: var(--noise); opacity: .04; mix-blend-mode: overlay;
}
body.ap::before {
  content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0, 0, 0, .55) 100%);
}

/* Gold, applied to text and to rules. */
.ap-gold {
  background: var(--gold); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ap-sheen 9s linear infinite;
}
@keyframes ap-sheen { to { background-position: 220% 0; } }
.ap-rule {
  display: block; height: 1px; border: 0; margin: 0;
  background: var(--gold); background-size: 220% 100%;
  animation: ap-sheen 9s linear infinite;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ap-ease);
}
.ap-rule.in { transform: scaleX(1); }

/* How far down the page they are, in gold, across the very top. */
.ap-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none;
  background: var(--gold-fill); background-size: 220% 100%;
  transform: scaleX(var(--read, 0)); transform-origin: left;
  animation: ap-sheen 9s linear infinite;
}

.ap__top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px var(--gutter); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.ap__intake {
  font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase;
  background: var(--gold); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ap-sheen 9s linear infinite;
}
.ap__foot {
  margin-top: auto; padding: 30px var(--gutter) 36px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font: 500 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase;
}
.ap__foot .link-arrow { margin-left: auto; }

/* ---------- the opening ----------
   Near enough a full screen, so the page opens on an image and a single idea. */
.ap-hero {
  position: relative; min-height: min(92vh, 900px); display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(80px, 16vh, 200px) 0; overflow: hidden; isolation: isolate;
}
.ap-hero__bg {
  position: absolute; inset: -4% -2% 0; z-index: -2; background: #000 center / cover no-repeat;
  opacity: .42; filter: grayscale(.85) contrast(1.1);
  animation: ap-drift 32s ease-in-out infinite alternate;
}
/* The image is pushed under the type rather than dimmed flat, so the words stay readable
   wherever the photograph happens to be bright. */
.ap-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 2%, color-mix(in srgb, var(--bg) 55%, transparent) 42%, transparent 78%),
    linear-gradient(to right, color-mix(in srgb, var(--bg) 80%, transparent), transparent 62%);
}
@keyframes ap-drift { from { transform: scale(1.06); } to { transform: scale(1.16) translate3d(-1.5%, -1%, 0); } }
.ap-hero__inner { position: relative; max-width: 1020px; padding-bottom: clamp(44px, 8vh, 96px); }

/* The specification line above the headline: thin gold plates. */
.ap-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; }
.ap-meta b {
  font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; font-style: normal;
  padding: 8px 14px; border: 1px solid var(--ap-line); color: var(--gold-3);
  background: color-mix(in srgb, var(--gold-1) 10%, transparent);
}
.ap-meta i { display: none; }

/* Each line of the headline rises out from behind a mask, one after the other. */
.ap-hero__title { font-size: clamp(58px, 11.5vw, 184px); line-height: .84; margin: 0; }
.ap-hero__title span { display: block; overflow: hidden; }
.ap-hero__title i {
  display: block; font-style: normal;
  transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--ap-ease);
  transition-delay: calc(var(--n, 0) * .12s);
}
.motion .ap-hero.in .ap-hero__title i, html:not(.motion) .ap-hero__title i { transform: none; }
.ap-hero__lead {
  font-size: clamp(17px, 1.8vw, 23px); line-height: 1.5; color: var(--text); max-width: 44ch; margin: 28px 0 0;
}
.ap-hero__acts { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
/* The way in is the only gold-filled thing on the page. */
.ap-hero__acts .btn:first-child {
  border: 0; color: #150F02; background: var(--gold-fill); background-size: 220% 100%;
  animation: ap-sheen 9s linear infinite;
  box-shadow: 0 14px 40px -18px rgba(217, 174, 67, .8);
}
/* The ticker runs gold here rather than in the brand accent: on these two pages the gold is
   the whole point, and a lime bar through the middle of it undoes the effect. */
.ap-marquee {
  margin: 0; transform: none; box-shadow: none; position: relative; z-index: 1;
  background: var(--gold-fill); background-size: 220% 100%; color: #150F02;
  animation: ap-sheen 9s linear infinite;
}
.ap-marquee .marquee__track span::after { color: #150F02; }
/* Links on these pages take the gold too. */
body.ap .link-arrow { color: var(--gold-2); }
body.ap .link-arrow svg { stroke: var(--gold-2); }
body.ap .eyebrow { color: var(--gold-2); }

.ap-sec { padding-block: clamp(58px, 9vh, 120px); position: relative; }
.ap-sec + .ap-sec { border-top: 1px solid var(--line); }

/* ---------- what you get ---------- */
.ap-perks { display: grid; }
.ap-perk {
  display: grid; grid-template-columns: minmax(70px, 9%) 1fr; gap: 24px; align-items: start;
  padding: 30px 20px 30px 0; border-top: 1px solid var(--line); position: relative; isolation: isolate;
  transition: padding-left .6s var(--ap-ease);
}
.ap-perk:last-child { border-bottom: 1px solid var(--line); }
.ap-perk__no {
  font: 500 12px var(--mono); letter-spacing: .18em; padding-top: 8px;
  background: var(--gold); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ap-sheen 9s linear infinite;
}
.ap-perk h3 { font: 800 clamp(26px, 2.8vw, 44px)/1 var(--stencil); text-transform: uppercase; margin: 0 0 10px; color: var(--bone); }
.ap-perk p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 62ch; }
.motion .ap-perk::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s var(--ap-ease);
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--gold-2) 10%, transparent), transparent 62%);
}
.motion .ap-perk:is(:hover, .is-held)::before { opacity: 1; }
.ap-perk::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ap-ease);
}
.motion .ap-perk:is(:hover, .is-held) { padding-left: 16px; }
.motion .ap-perk:is(:hover, .is-held)::after { transform: scaleX(1); }

/* ---------- who gets in ---------- */
.ap-list { list-style: none; margin: 0; padding: 0; display: grid; max-width: 1020px; }
.ap-list li {
  position: relative; padding: 24px 0 24px 52px; border-top: 1px solid var(--line);
  font: 500 clamp(17px, 1.9vw, 25px)/1.4 var(--cond); letter-spacing: .02em; color: var(--bone); text-transform: uppercase;
}
.ap-list li:last-child { border-bottom: 1px solid var(--line); }
.ap-list li::before {
  content: ''; position: absolute; left: 0; top: 32px; width: 28px; height: 1px;
  background: var(--gold); transform-origin: left; transform: scaleX(0);
  transition: transform .8s var(--ap-ease) calc(var(--step, 0) * .08s);
}
.ap-list li.in::before { transform: scaleX(1); }

/* ---------- the invitation ---------- */
.ap-invite {
  position: relative; max-width: 1020px; margin: 0 0 44px; padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--ap-line); background:
    linear-gradient(140deg, color-mix(in srgb, var(--gold-1) 9%, transparent), transparent 46%), var(--bg-2);
}
/* Two gold corners, the way an invitation is cornered. */
.ap-invite::before, .ap-invite::after {
  content: ''; position: absolute; width: 34px; height: 34px; pointer-events: none;
  background: var(--gold);
}
.ap-invite::before { top: -1px; left: -1px; clip-path: polygon(0 0, 100% 0, 100% 1.5px, 1.5px 1.5px, 1.5px 100%, 0 100%); }
.ap-invite::after { bottom: -1px; right: -1px; clip-path: polygon(100% 100%, 0 100%, 0 calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - 1.5px), calc(100% - 1.5px) 0, 100% 0); }
.ap-invite h3 {
  margin: 14px 0 12px; font: 800 clamp(26px, 3vw, 42px)/1 var(--stencil); text-transform: uppercase; color: var(--bone);
}
.ap-invite p { margin: 0; max-width: 60ch; color: var(--text); font-size: 16px; line-height: 1.7; }
.ap-invite__eyebrow {
  font: 500 10px var(--mono); letter-spacing: .24em; text-transform: uppercase;
  background: var(--gold); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ap-sheen 9s linear infinite;
}
.ap-smallprint {
  max-width: 64ch; margin: 18px 0 0; padding-left: 16px; border-left: 1px solid var(--ap-line);
  font-size: 13px; line-height: 1.75; color: var(--muted);
}
.ap-note { margin: 18px 0 0; max-width: 62ch; font-size: 13px; line-height: 1.75; color: var(--muted); }

/* ---------- the file ---------- */
.ap-dossier { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: clamp(26px, 4.5vw, 80px); align-items: start; }
.ap-rail { position: sticky; top: 108px; display: grid; gap: 20px; }
.ap-rail__file {
  font: 500 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-3);
  padding-bottom: 16px; border-bottom: 1px solid var(--ap-line);
}
.ap-rail__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.ap-rail__steps li {
  position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline;
  font: 600 13px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding-left: 16px; transition: color .5s var(--ap-ease), transform .5s var(--ap-ease);
}
.ap-rail__steps b { font: 500 11px var(--mono); color: color-mix(in srgb, var(--muted) 60%, transparent); transition: color .4s var(--ap-ease); }
.ap-rail__steps li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px;
  background: var(--gold); transform: scale(0) rotate(45deg); transition: transform .5s var(--ap-ease);
}
.ap-rail__steps li.is-here { color: var(--bone); transform: translateX(4px); }
.ap-rail__steps li.is-here::before { transform: scale(1) rotate(45deg); }
.ap-rail__steps li.is-done b { color: var(--gold-2); }
.ap-rail__steps li.is-done b::after { content: ' ✓'; }
.ap-rail__fill { display: block; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.ap-rail__fill i {
  position: absolute; inset: 0; background: var(--gold-fill); background-size: 220% 100%;
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ap-ease);
  animation: ap-sheen 9s linear infinite;
}

.ap-form { max-width: 940px; }
/* A plate at the head of the file. */
.ap-plate {
  display: flex; flex-wrap: wrap; gap: 1px; margin: 0 0 10px;
  border: 1px solid var(--ap-line); background: var(--line);
}
.ap-plate span {
  flex: 1 1 160px; padding: 15px 18px; background: var(--bg-2);
  font: 500 13px var(--mono); letter-spacing: .04em; color: var(--bone);
}
.ap-plate b {
  display: block; margin-bottom: 6px; font: 500 10px var(--mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.ap-plate em { font-style: normal; color: var(--gold-3); }

.ap-part { position: relative; border: 0; border-top: 1px solid var(--line); margin: 0; padding: 40px 0 20px; overflow: hidden; }
.ap-part__ghost {
  position: absolute; right: -10px; top: 20px; z-index: 0; pointer-events: none; user-select: none;
  font: 800 clamp(110px, 16vw, 230px)/.75 var(--stencil);
  background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .09;
}
.ap-part > *:not(.ap-part__ghost) { position: relative; z-index: 1; }
.ap-part legend { display: block; width: 100%; padding: 0; margin: 0 0 26px; }
.ap-part__no {
  display: inline-block; font: 500 10px var(--mono); letter-spacing: .2em; margin-bottom: 14px;
  padding: 6px 11px; border: 1px solid var(--ap-line); color: var(--gold-3);
}
.ap-part legend b { display: block; font: 800 clamp(28px, 3.4vw, 46px)/1 var(--stencil); text-transform: uppercase; color: var(--bone); }
.ap-part legend em { display: block; font-style: normal; color: var(--muted); font-size: 15px; margin-top: 10px; max-width: 54ch; }

.ap-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
.ap-field { position: relative; display: grid; grid-template-columns: none; gap: 9px; grid-column: 1 / -1; }
.ap-field--half { grid-column: auto; }
.ap-field--full { grid-column: 1 / -1; }
.ap-field > span {
  font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: color .4s var(--ap-ease);
}
.ap-field > span i { font-style: normal; opacity: .5; text-transform: none; letter-spacing: .04em; }
.ap-req { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--gold-2); }
.ap-field__hint { font-style: normal; font-size: 12px; color: var(--muted); }
.ap-field select,
.ap-field input, .ap-field textarea {
  width: 100%; background: var(--bg-2); color: var(--bone);
  border: 1px solid var(--line-2); border-bottom-color: var(--line-2);
  padding: 15px 17px; font: 500 16px/1.5 var(--sans); border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
  transition: border-color .4s var(--ap-ease), background .4s var(--ap-ease), box-shadow .4s var(--ap-ease);
}
.ap-field textarea { resize: vertical; min-height: 104px; }
.ap-field input::placeholder, .ap-field textarea::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.ap-field select:focus,
.ap-field input:focus, .ap-field textarea:focus {
  outline: none; border-color: var(--ap-line); background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-2) 22%, transparent), 0 10px 40px -24px rgba(217, 174, 67, .9);
}
/* A gold line draws itself under whatever is being filled in. */
.ap-field__scan {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ap-ease);
}
.ap-field:focus-within .ap-field__scan { transform: scaleX(1); }
.ap-field:focus-within > span { color: var(--gold-3); }
.ap-field.is-missing > span { color: var(--red); }
.ap-field.is-missing input, .ap-field.is-missing textarea { border-color: var(--red); }

.ap-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-chip { position: relative; cursor: pointer; }
.ap-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ap-chip span {
  display: block; padding: 12px 19px; border: 1px solid var(--line-2); color: var(--text);
  font: 600 13px var(--cond); letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .4s var(--ap-ease), color .4s var(--ap-ease), background .4s var(--ap-ease), transform .4s var(--ap-ease);
}
.ap-chip:hover span { border-color: var(--gold-2); color: var(--bone); }
.ap-chip input:checked + span {
  background: var(--gold-fill); background-size: 220% 100%; border-color: transparent; color: #150F02;
  transform: translateY(-2px); animation: ap-sheen 9s linear infinite;
  box-shadow: 0 10px 26px -16px rgba(217, 174, 67, .9);
}
.ap-chip input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-2) 30%, transparent); }

/* The confirmations, which are a legal record, so they are set to be read. */
.ap-consent { display: grid; border: 1px solid var(--ap-line); }
.ap-tick { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; cursor: pointer; border-bottom: 1px solid var(--line); }
.ap-tick:last-child { border-bottom: 0; }
.ap-tick:hover { background: color-mix(in srgb, var(--gold-1) 7%, transparent); }
.ap-tick input { position: absolute; opacity: 0; pointer-events: none; }
.ap-tick span { position: relative; padding-left: 32px; font-size: 14px; line-height: 1.55; color: var(--text); transition: color .3s var(--ap-ease); }
.ap-tick span::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
  border: 1px solid var(--line-2); transition: background .3s var(--ap-ease), border-color .3s var(--ap-ease);
}
.ap-tick span::after {
  content: ''; position: absolute; left: 6px; top: 5px; width: 6px; height: 10px;
  border: solid #150F02; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform .3s var(--ap-ease);
}
.ap-tick input:checked + span { color: var(--bone); }
.ap-tick input:checked + span::before { background: var(--gold-fill); border-color: transparent; }
.ap-tick input:checked + span::after { transform: rotate(45deg) scale(1); }
.ap-tick input:focus-visible + span::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-2) 30%, transparent); }

.ap-photo__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ap-photo__pick { position: relative; cursor: pointer; }
.ap-photo__pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ap-photo__pick span {
  display: block; padding: 14px 22px; border: 1px dashed var(--ap-line); color: var(--text);
  font: 600 13px var(--cond); letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .4s var(--ap-ease), color .4s var(--ap-ease), background .4s var(--ap-ease);
}
.ap-photo__pick:hover span { border-color: var(--gold-2); color: var(--gold-3); background: color-mix(in srgb, var(--gold-1) 8%, transparent); }
.ap-photo__or { font: 500 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ap-photo__row input[type="url"] { flex: 1 1 240px; }
.ap-photo__name { font-style: normal; font-size: 12px; color: var(--gold-3); margin-top: 8px; display: block; }

/* The one thing the door cannot answer for them. */
.ap-also { margin-top: 4px; }
.ap-also .ap-tick { border: 1px solid var(--ap-line); background: color-mix(in srgb, var(--gold-1) 6%, transparent); }
.ap-also .ap-tick span { font-size: 15px; color: var(--bone); }

/* The collection notice under the confirmations. */
.ap-privacy {
  margin: 20px 0 0; padding: 16px 18px; border-left: 2px solid var(--ap-line);
  background: var(--bg-2); color: var(--muted); font-size: 13.5px; line-height: 1.7; max-width: 70ch;
}
.ap-privacy a { color: var(--gold-3); text-decoration: underline; text-underline-offset: 3px; }

.ap-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ap-error {
  margin: 22px 0 0; padding: 15px 17px; border-left: 2px solid var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--bone); font-size: 15px;
}
.ap-send {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin: 38px 0 0; padding: 30px 24px; border: 1px solid var(--ap-line);
  background: linear-gradient(140deg, color-mix(in srgb, var(--gold-1) 8%, transparent), transparent 52%), var(--bg-2);
}
.ap-send .btn {
  font-size: 16px; padding: 19px 38px; border: 0; color: #150F02;
  background: var(--gold-fill); background-size: 220% 100%;
  animation: ap-sheen 9s linear infinite;
  box-shadow: 0 16px 44px -20px rgba(217, 174, 67, .85);
  transition: transform .5s var(--ap-ease), box-shadow .5s var(--ap-ease);
}
.motion .ap-send .btn:is(:hover, .is-held) { transform: translateY(-2px); box-shadow: 0 22px 54px -20px rgba(217, 174, 67, .95); }
.ap-send span { font: 500 12px var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }

/* ---------- the receipt ---------- */
.ap-done { max-width: 780px; padding-block: clamp(34px, 7vh, 80px); }
.ap-done h2 { font-size: clamp(48px, 8vw, 112px); line-height: .88; margin: 16px 0 24px; }
.ap-done p { color: var(--text); font-size: 17px; line-height: 1.65; max-width: 48ch; }
/* Stamped on, slightly off square, with a gold double edge. */
.ap-stamp {
  display: inline-grid; gap: 5px; margin-top: 36px; padding: 20px 32px; position: relative;
  color: var(--bone); transform: rotate(-2deg);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    var(--gold) border-box;
  animation: ap-stamp .7s var(--ap-ease) both;
}
.ap-stamp::before {
  content: ''; position: absolute; inset: 4px; border: 1px solid var(--ap-line); pointer-events: none;
}
.ap-stamp span { font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ap-stamp b { font: 500 26px var(--mono); letter-spacing: .1em; }
.ap-stamp em {
  font: 500 10px var(--mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase;
  background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes ap-stamp {
  from { transform: rotate(-10deg) scale(1.35); opacity: 0; }
  to { transform: rotate(-2deg) scale(1); opacity: 1; }
}
.ap-fearless {
  margin-top: 30px; font: 800 clamp(22px, 2.6vw, 34px)/1 var(--stencil);
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--gold); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ap-sheen 9s linear infinite;
}

@media (max-width: 900px) {
  .ap-dossier { grid-template-columns: 1fr; }
  .ap-rail { position: sticky; top: 64px; z-index: 5; gap: 12px; padding: 12px 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
  .ap-rail__steps { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
  .ap-rail__steps li { grid-template-columns: 1fr; gap: 2px; font-size: 11px; padding-left: 0; }
  .ap-rail__steps li::before { display: none; }
  .ap-rail__steps span { display: none; }
  .ap-rail__file { padding-bottom: 10px; }
}
@media (max-width: 760px) {
  .ap-fields { grid-template-columns: 1fr; }
  .ap-field--half { grid-column: 1 / -1; }
  .ap__top { padding: 14px var(--gutter); }
  .ap__intake { font-size: 10px; max-width: 42vw; text-align: right; }
  .ap-perk { grid-template-columns: 1fr; gap: 8px; }
  .ap-hero { min-height: auto; }
}

/* =========================================================
   POLICY PAGES  (/privacy/ and the rest)
   Set for reading: one column, generous line height, the brand's furniture kept to the edges.
   Anything the shop still has to fill in is marked so it cannot be missed on the page.
   ========================================================= */
body.legal { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.legal__wrap { max-width: 820px; padding-block: clamp(40px, 7vh, 90px) 60px; }
.legal__title { font-size: clamp(48px, 8vw, 104px); line-height: .88; margin: 0 0 24px; }
.legal__lead { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; color: var(--text); max-width: 54ch; margin: 0 0 18px; }
.legal__meta { font: 500 12px var(--mono); letter-spacing: .06em; color: var(--muted); margin: 0 0 44px; }

.legal__toc { border: 1px solid var(--line); padding: 22px 26px; margin: 0 0 56px; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.legal__toc li { break-inside: avoid; margin: 0 0 9px; }
.legal__toc a { color: var(--text); font-size: 14px; line-height: 1.4; }
.legal__toc a:hover { color: var(--hot); }

.legal__sec { margin: 0 0 48px; scroll-margin-top: 90px; }
.legal__sec h2 {
  display: flex; gap: 14px; align-items: baseline; margin: 0 0 16px;
  font: 800 clamp(22px, 2.6vw, 32px)/1.1 var(--stencil); text-transform: uppercase; color: var(--bone);
}
.legal__sec h2 span { font: 500 12px var(--mono); color: var(--hot); flex: none; }
.legal__sec h3 {
  margin: 26px 0 10px; font: 600 13px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--hot);
}
.legal__sec p { margin: 0 0 14px; color: var(--text); font-size: 16px; line-height: 1.75; }
.legal__sec b { color: var(--bone); }
.legal__sec ul { margin: 0 0 16px; padding-left: 20px; color: var(--text); font-size: 16px; line-height: 1.75; }
.legal__sec li { margin: 0 0 7px; }
.legal__sec a { color: var(--hot); text-decoration: underline; text-underline-offset: 3px; }

/* The provider table, so who-sees-what is legible at a glance rather than buried in a sentence. */
.legal__table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.legal__table th {
  text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2);
  font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.legal__table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); color: var(--text); line-height: 1.6; vertical-align: top; }
.legal__table td:last-child, .legal__table th:last-child { padding-right: 0; }

/* Still to be filled in by the shop. Deliberately loud: an unfinished policy should look
   unfinished, not quietly ship with a blank in it. */
.legal mark {
  background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--bone);
  padding: 2px 7px; font: 500 13px var(--mono); border: 1px dashed var(--red);
}
/* Filled in: reads as ordinary prose again, with no trace of the gap it used to be. */
.legal mark.is-filled { background: none; border: 0; padding: 0; color: inherit; font: inherit; }
@media (max-width: 680px) { .legal__toc ol { columns: 1; } }

/* =========================================================
   SEASONAL THEMES
   A theme is one attribute on <html> (data-theme), set by store.js from the dates in
   Admin -> Customise. Three things follow from it: the page wears a seasonal palette, a few
   lines of copy take on the season's voice, and a layer of ornaments is laid over the page.

   The ornaments are not scattered. Every theme dresses the same five positions, so each one
   looks staged rather than stuck on:

     __a   a garland along the very top of the page
     __b   something hanging at the edge of the content column
     __c   something crossing the page
     __d   atmosphere - fog, haze, a glow
     footer   the props that stand on the ground, lined up with the content column

   All of it is drawn as shapes rather than loaded as pictures, so it stays sharp at any size,
   costs nothing to fetch, and can be recoloured by the theme.
   ========================================================= */
:root {
  --art-hat-santa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 78'%3E %3Cpath d='M22 58 C 24 28 44 8 72 8 C 96 8 112 18 122 32 C 126 38 124 45 117 46 C 100 48 86 52 76 58 Z' fill='%23C8252B'/%3E %3Cpath d='M22 58 C 24 28 44 8 72 8 C 60 18 50 36 48 58 Z' fill='%23E03A40'/%3E %3Cpath d='M112 24 C 120 28 126 34 127 40 C 128 46 124 50 118 50 C 112 50 108 45 109 38 C 110 32 111 27 112 24z' fill='%23C8252B'/%3E %3Ccircle cx='121' cy='26' r='15' fill='%23F2F2EE'/%3E %3Ccircle cx='116' cy='21' r='6' fill='%23FFFFFF'/%3E %3Cpath d='M6 58 C 30 50 94 50 124 58 C 126 66 120 74 108 75 C 72 78 36 77 14 74 C 5 72 2 64 6 58z' fill='%23F2F2EE'/%3E %3Cpath d='M10 60 C 34 53 92 53 120 60 C 120 66 114 70 104 71 C 70 73 38 72 18 69 C 11 68 8 64 10 60z' fill='%23FFFFFF'/%3E %3C/svg%3E");
  --art-hat-witch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 136'%3E %3Cpath d='M96 4 C 86 30 78 62 74 96 C 60 100 44 100 32 96 C 44 64 62 28 96 4z' fill='%231B1B22'/%3E %3Cpath d='M96 4 C 86 30 78 62 74 96 C 68 98 62 99 56 99 C 62 62 74 28 96 4z' fill='%23121219'/%3E %3Cpath d='M2 110 C 22 94 102 94 122 110 C 102 128 22 128 2 110z' fill='%231B1B22'/%3E %3Cpath d='M10 110 C 30 98 94 98 114 110 C 94 120 30 120 10 110z' fill='%23262633'/%3E %3Cpath d='M30 96 C 46 88 74 88 86 96 L88 110 C 72 100 46 101 28 110z' fill='%23E0661B'/%3E %3Cpath d='M52 94 h16 v12 h-16z' fill='%23F7C96B'/%3E %3Cpath d='M56 97 h8 v5 h-8z' fill='%231B1B22'/%3E %3C/svg%3E");
  --art-snow-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Ccircle cx='18' cy='30' r='1.3' fill='%23FFFFFF' opacity='0.70'/%3E%3Ccircle cx='74' cy='12' r='1' fill='%23FFFFFF' opacity='0.82'/%3E%3Ccircle cx='132' cy='48' r='1.5' fill='%23FFFFFF' opacity='0.75'/%3E%3Ccircle cx='196' cy='22' r='1.1' fill='%23FFFFFF' opacity='0.84'/%3E%3Ccircle cx='44' cy='96' r='1.2' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='156' cy='110' r='1' fill='%23FFFFFF' opacity='0.63'/%3E%3Ccircle cx='96' cy='140' r='1.4' fill='%23FFFFFF' opacity='0.61'/%3E%3Ccircle cx='210' cy='150' r='1.2' fill='%23FFFFFF' opacity='0.93'/%3E%3Ccircle cx='28' cy='182' r='1' fill='%23FFFFFF' opacity='0.70'/%3E%3Ccircle cx='120' cy='204' r='1.3' fill='%23FFFFFF' opacity='0.69'/%3E%3Ccircle cx='182' cy='196' r='1.1' fill='%23FFFFFF' opacity='1.00'/%3E%3Ccircle cx='62' cy='226' r='1.2' fill='%23FFFFFF' opacity='0.79'/%3E%3C/svg%3E");
  --art-snow-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Ccircle cx='36' cy='20' r='2.6' fill='%23FFFFFF' opacity='0.73'/%3E%3Cg transform='translate(36 20) rotate(9)' opacity='0.58' stroke='%23FFFFFF' stroke-width='0.9' stroke-linecap='round'%3E%3Cpath d='M0 -5.460000000000001 V5.460000000000001 M-4.680000000000001 -2.7300000000000004 L4.680000000000001 2.7300000000000004 M-4.680000000000001 2.7300000000000004 L4.680000000000001 -2.7300000000000004'/%3E%3C/g%3E%3Ccircle cx='120' cy='66' r='2.2' fill='%23FFFFFF' opacity='0.86'/%3E%3Ccircle cx='198' cy='34' r='2.8' fill='%23FFFFFF' opacity='0.63'/%3E%3Cg transform='translate(198 34) rotate(32)' opacity='0.50' stroke='%23FFFFFF' stroke-width='1.0' stroke-linecap='round'%3E%3Cpath d='M0 -5.88 V5.88 M-5.04 -2.94 L5.04 2.94 M-5.04 2.94 L5.04 -2.94'/%3E%3C/g%3E%3Ccircle cx='70' cy='128' r='2.4' fill='%23FFFFFF' opacity='0.75'/%3E%3Ccircle cx='166' cy='150' r='2.6' fill='%23FFFFFF' opacity='0.62'/%3E%3Cg transform='translate(166 150) rotate(30)' opacity='0.50' stroke='%23FFFFFF' stroke-width='0.9' stroke-linecap='round'%3E%3Cpath d='M0 -5.460000000000001 V5.460000000000001 M-4.680000000000001 -2.7300000000000004 L4.680000000000001 2.7300000000000004 M-4.680000000000001 2.7300000000000004 L4.680000000000001 -2.7300000000000004'/%3E%3C/g%3E%3Ccircle cx='24' cy='196' r='2.2' fill='%23FFFFFF' opacity='0.61'/%3E%3Ccircle cx='134' cy='214' r='2.5' fill='%23FFFFFF' opacity='0.77'/%3E%3Cg transform='translate(134 214) rotate(4)' opacity='0.62' stroke='%23FFFFFF' stroke-width='0.9' stroke-linecap='round'%3E%3Cpath d='M0 -5.25 V5.25 M-4.5 -2.625 L4.5 2.625 M-4.5 2.625 L4.5 -2.625'/%3E%3C/g%3E%3C/svg%3E");
  --art-snow-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Ccircle cx='60' cy='44' r='4' fill='%23FFFFFF' opacity='0.78'/%3E%3Cg transform='translate(60 44) rotate(34)' opacity='0.62' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 -8.4 V8.4 M-7.2 -4.2 L7.2 4.2 M-7.2 4.2 L7.2 -4.2'/%3E%3C/g%3E%3Ccircle cx='190' cy='96' r='3.4' fill='%23FFFFFF' opacity='0.97'/%3E%3Cg transform='translate(190 96) rotate(28)' opacity='0.78' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 -7.14 V7.14 M-6.12 -3.57 L6.12 3.57 M-6.12 3.57 L6.12 -3.57'/%3E%3C/g%3E%3Ccircle cx='104' cy='180' r='4.4' fill='%23FFFFFF' opacity='0.80'/%3E%3Cg transform='translate(104 180) rotate(35)' opacity='0.64' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M0 -9.240000000000002 V9.240000000000002 M-7.920000000000001 -4.620000000000001 L7.920000000000001 4.620000000000001 M-7.920000000000001 4.620000000000001 L7.920000000000001 -4.620000000000001'/%3E%3C/g%3E%3Ccircle cx='236' cy='220' r='3.6' fill='%23FFFFFF' opacity='0.67'/%3E%3Cg transform='translate(236 220) rotate(31)' opacity='0.54' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 -7.5600000000000005 V7.5600000000000005 M-6.48 -3.7800000000000002 L6.48 3.7800000000000002 M-6.48 3.7800000000000002 L6.48 -3.7800000000000002'/%3E%3C/g%3E%3C/svg%3E");
  --art-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0 0 L 52.1 0.6 52.4 10.7 49.3 19.7 40.7 27.8 37.4 38.4 31.1 42.4 21.7 45.9 7.9 48.4 1.3 54.3 Z' fill='%23F2F2EE' opacity='.05'/%3E%3Cpath d='M0 0 L 117.1 1.4 104.4 21.3 99.5 39.7 89.3 61.0 82.6 84.7 65.7 89.6 48.6 102.8 17.7 107.9 2.7 112.1 Z' fill='%23F2F2EE' opacity='.025'/%3E%3Cpath d='M0 0 Q102.8 3.9 209.8 2.5' stroke='%23F2F2EE' stroke-width='1.50' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q103.0 15.6 198.6 40.4' stroke='%23F2F2EE' stroke-width='1.43' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q92.7 32.0 183.1 73.1' stroke='%23F2F2EE' stroke-width='1.36' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q91.7 59.5 179.0 122.3' stroke='%23F2F2EE' stroke-width='1.29' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q80.7 83.6 153.8 157.7' stroke='%23F2F2EE' stroke-width='1.22' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q58.5 84.7 116.9 159.5' stroke='%23F2F2EE' stroke-width='1.15' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q44.1 93.2 92.1 194.8' stroke='%23F2F2EE' stroke-width='1.08' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q17.7 96.8 33.3 203.1' stroke='%23F2F2EE' stroke-width='1.01' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q-0.6 98.7 4.8 199.2' stroke='%23F2F2EE' stroke-width='0.94' opacity='.55' fill='none'/%3E%3Cpath d='M25.2 0.3 Q22.1 2.5 27.0 5.5' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M27.0 5.5 Q20.9 6.2 24.1 9.6' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24.1 9.6 Q18.8 10.1 22.3 15.3' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M22.3 15.3 Q17.4 14.6 18.1 18.6' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18.1 18.6 Q14.0 16.5 15.6 21.3' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M15.6 21.3 Q11.4 19.0 10.6 22.5' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10.6 22.5 Q6.4 21.0 4.3 26.1' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M4.3 26.1 Q2.1 22.2 0.7 27.1' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M52.1 0.6 Q43.8 4.7 52.4 10.7' stroke='%23F2F2EE' stroke-width='1.28' opacity='0.67' fill='none' stroke-linecap='round'/%3E%3Cpath d='M52.4 10.7 Q42.8 12.8 49.3 19.7' stroke='%23F2F2EE' stroke-width='1.28' opacity='0.67' fill='none' stroke-linecap='round'/%3E%3Cpath d='M49.3 19.7 Q38.2 20.1 40.7 27.8' stroke='%23F2F2EE' stroke-width='1.28' opacity='0.67' fill='none' stroke-linecap='round'/%3E%3Cpath d='M40.7 27.8 Q33.0 28.0 37.4 38.4' stroke='%23F2F2EE' stroke-width='1.28' opacity='0.67' fill='none' stroke-linecap='round'/%3E%3Cpath d='M37.4 38.4 Q28.9 34.1 31.1 42.4' stroke='%23F2F2EE' stroke-width='1.28' opacity='0.67' fill='none' stroke-linecap='round'/%3E%3Cpath d='M31.1 42.4 Q22.3 37.4 21.7 45.9' stroke='%23F2F2EE' stroke-width='1.28' opacity='0.67' fill='none' stroke-linecap='round'/%3E%3Cpath d='M21.7 45.9 Q12.8 40.9 7.9 48.4' stroke='%23F2F2EE' stroke-width='1.28' opacity='0.67' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7.9 48.4 Q3.9 43.2 1.3 54.3' stroke='%23F2F2EE' stroke-width='1.28' opacity='0.67' fill='none' stroke-linecap='round'/%3E%3Cpath d='M79.7 1.0 Q66.9 7.2 80.5 16.4' stroke='%23F2F2EE' stroke-width='1.12' opacity='0.62' fill='none' stroke-linecap='round'/%3E%3Cpath d='M80.5 16.4 Q67.5 20.2 77.7 31.0' stroke='%23F2F2EE' stroke-width='1.12' opacity='0.62' fill='none' stroke-linecap='round'/%3E%3Cpath d='M77.7 31.0 Q59.9 31.9 67.7 46.3' stroke='%23F2F2EE' stroke-width='1.12' opacity='0.62' fill='none' stroke-linecap='round'/%3E%3Cpath d='M67.7 46.3 Q52.3 44.1 58.7 60.2' stroke='%23F2F2EE' stroke-width='1.12' opacity='0.62' fill='none' stroke-linecap='round'/%3E%3Cpath d='M58.7 60.2 Q45.8 53.8 46.7 63.7' stroke='%23F2F2EE' stroke-width='1.12' opacity='0.62' fill='none' stroke-linecap='round'/%3E%3Cpath d='M35.4 74.9 Q20.3 64.5 12.9 78.4' stroke='%23F2F2EE' stroke-width='1.12' opacity='0.62' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12.9 78.4 Q6.3 68.5 2.0 84.2' stroke='%23F2F2EE' stroke-width='1.12' opacity='0.62' fill='none' stroke-linecap='round'/%3E%3Cpath d='M117.1 1.4 Q89.8 9.2 104.4 21.3' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M104.4 21.3 Q85.1 25.4 99.5 39.7' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M99.5 39.7 Q79.8 42.6 89.3 61.0' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M89.3 61.0 Q69.7 59.1 82.6 84.7' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M82.6 84.7 Q62.8 73.8 65.7 89.6' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M65.7 89.6 Q48.4 81.6 48.6 102.8' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M48.6 102.8 Q27.0 85.7 17.7 107.9' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M17.7 107.9 Q8.6 93.2 2.7 112.1' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M144.0 1.7 Q119.2 12.7 140.5 28.6' stroke='%23F2F2EE' stroke-width='0.78' opacity='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M140.5 28.6 Q118.0 35.4 137.0 54.7' stroke='%23F2F2EE' stroke-width='0.78' opacity='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M137.0 54.7 Q107.5 57.3 121.8 83.2' stroke='%23F2F2EE' stroke-width='0.78' opacity='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M121.8 83.2 Q97.4 82.2 106.9 109.6' stroke='%23F2F2EE' stroke-width='0.78' opacity='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M106.9 109.6 Q83.3 98.2 88.2 120.3' stroke='%23F2F2EE' stroke-width='0.78' opacity='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M88.2 120.3 Q62.4 105.1 65.6 138.8' stroke='%23F2F2EE' stroke-width='0.78' opacity='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M65.6 138.8 Q36.7 117.6 24.6 150.2' stroke='%23F2F2EE' stroke-width='0.78' opacity='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24.6 150.2 Q12.1 129.6 3.7 154.6' stroke='%23F2F2EE' stroke-width='0.78' opacity='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M183.7 2.2 Q153.1 15.9 169.3 34.4' stroke='%23F2F2EE' stroke-width='0.62' opacity='0.47' fill='none' stroke-linecap='round'/%3E%3Cpath d='M169.3 34.4 Q141.8 42.9 174.4 69.6' stroke='%23F2F2EE' stroke-width='0.62' opacity='0.47' fill='none' stroke-linecap='round'/%3E%3Cpath d='M174.4 69.6 Q138.7 74.0 156.9 107.2' stroke='%23F2F2EE' stroke-width='0.62' opacity='0.47' fill='none' stroke-linecap='round'/%3E%3Cpath d='M156.9 107.2 Q122.0 102.5 131.8 135.1' stroke='%23F2F2EE' stroke-width='0.62' opacity='0.47' fill='none' stroke-linecap='round'/%3E%3Cpath d='M131.8 135.1 Q99.1 116.7 107.3 146.4' stroke='%23F2F2EE' stroke-width='0.62' opacity='0.47' fill='none' stroke-linecap='round'/%3E%3Cpath d='M107.3 146.4 Q77.4 130.3 78.9 166.9' stroke='%23F2F2EE' stroke-width='0.62' opacity='0.47' fill='none' stroke-linecap='round'/%3E%3Cpath d='M78.9 166.9 Q44.3 140.2 28.1 171.5' stroke='%23F2F2EE' stroke-width='0.62' opacity='0.47' fill='none' stroke-linecap='round'/%3E%3Cpath d='M28.1 171.5 Q13.6 149.2 4.5 187.1' stroke='%23F2F2EE' stroke-width='0.62' opacity='0.47' fill='none' stroke-linecap='round'/%3E%3Cpath d='M209.8 2.5 Q172.7 18.2 198.6 40.4' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M198.6 40.4 Q158.0 47.0 183.1 73.1' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M183.1 73.1 Q150.7 81.3 179.0 122.3' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M179.0 122.3 Q142.5 119.9 153.8 157.7' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M153.8 157.7 Q109.8 128.7 116.9 159.5' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M116.9 159.5 Q88.2 149.6 92.1 194.8' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M33.3 203.1 Q16.3 171.8 4.8 199.2' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M16.1 0.0L15.7 1.0L15.2 1.9L14.7 2.8L14.1 3.6L13.4 4.4L12.8 5.1L12.1 5.7L11.3 6.2L10.6 6.7L9.8 7.1L9.0 7.5L8.3 7.8L7.5 8.0L6.7 8.1L6.0 8.2L5.2 8.2L4.5 8.2L3.8 8.1L3.1 7.9L2.5 7.7L1.9 7.5L1.4 7.2L0.9 6.9L0.4 6.5L0.0 6.1' stroke='%23F2F2EE' stroke-width='1.1' opacity='.6' fill='none'/%3E%3Cpath d='M131.8 135.1 C137.8 151.1 117.2 151.6 125.2 165.6' stroke='%23F2F2EE' stroke-width='.9' opacity='.4' fill='none'/%3E%3Ccircle cx='125.2' cy='165.6' r='1.8' fill='%23F2F2EE' opacity='.45'/%3E%3Cpath d='M48.6 102.8 C54.6 118.8 45.9 119.6 53.9 133.6' stroke='%23F2F2EE' stroke-width='.9' opacity='.4' fill='none'/%3E%3Ccircle cx='53.9' cy='133.6' r='1.8' fill='%23F2F2EE' opacity='.45'/%3E%3C/svg%3E");
  --art-web-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M0 0 L 41.7 0.5 37.2 10.2 36.4 23.1 30.6 30.4 20.7 36.0 10.4 40.0 1.2 39.1 Z' fill='%23F2F2EE' opacity='.05'/%3E%3Cpath d='M0 0 L 92.9 1.1 94.0 25.8 79.2 50.3 67.5 67.1 46.7 81.1 23.9 92.4 2.9 93.1 Z' fill='%23F2F2EE' opacity='.025'/%3E%3Cpath d='M0 0 Q57.5 -3.6 119.1 1.4' stroke='%23F2F2EE' stroke-width='1.50' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q65.2 16.2 125.1 34.3' stroke='%23F2F2EE' stroke-width='1.43' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q58.2 33.6 109.5 69.5' stroke='%23F2F2EE' stroke-width='1.36' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q49.8 48.4 90.4 89.8' stroke='%23F2F2EE' stroke-width='1.29' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q26.3 51.4 62.6 108.7' stroke='%23F2F2EE' stroke-width='1.22' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q19.1 57.6 30.0 115.9' stroke='%23F2F2EE' stroke-width='1.15' opacity='.55' fill='none'/%3E%3Cpath d='M0 0 Q6.7 58.2 3.7 118.4' stroke='%23F2F2EE' stroke-width='1.08' opacity='.55' fill='none'/%3E%3Cpath d='M19.2 0.2 Q15.5 2.2 18.8 5.2' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18.8 5.2 Q15.1 6.7 16.8 10.7' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M16.8 10.7 Q12.7 10.1 13.0 12.9' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M13.0 12.9 Q9.2 12.0 9.4 16.2' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M9.4 16.2 Q5.7 13.8 4.6 17.7' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M4.6 17.7 Q2.2 15.6 0.6 19.9' stroke='%23F2F2EE' stroke-width='1.45' opacity='0.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M41.7 0.5 Q34.2 4.6 37.2 10.2' stroke='%23F2F2EE' stroke-width='1.20' opacity='0.65' fill='none' stroke-linecap='round'/%3E%3Cpath d='M37.2 10.2 Q31.5 14.3 36.4 23.1' stroke='%23F2F2EE' stroke-width='1.20' opacity='0.65' fill='none' stroke-linecap='round'/%3E%3Cpath d='M36.4 23.1 Q27.4 21.9 30.6 30.4' stroke='%23F2F2EE' stroke-width='1.20' opacity='0.65' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30.6 30.4 Q21.2 27.4 20.7 36.0' stroke='%23F2F2EE' stroke-width='1.20' opacity='0.65' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20.7 36.0 Q12.7 31.0 10.4 40.0' stroke='%23F2F2EE' stroke-width='1.20' opacity='0.65' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10.4 40.0 Q4.7 32.2 1.2 39.1' stroke='%23F2F2EE' stroke-width='1.20' opacity='0.65' fill='none' stroke-linecap='round'/%3E%3Cpath d='M61.0 0.7 Q53.1 7.7 62.7 17.2' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M62.7 17.2 Q47.0 20.6 51.8 32.9' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M51.8 32.9 Q40.5 32.4 44.3 44.0' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M44.3 44.0 Q31.6 41.2 31.4 54.4' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M31.4 54.4 Q19.2 46.7 15.3 59.2' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M15.3 59.2 Q7.4 52.8 2.0 64.5' stroke='%23F2F2EE' stroke-width='0.95' opacity='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M92.9 1.1 Q76.4 11.0 94.0 25.8' stroke='%23F2F2EE' stroke-width='0.70' opacity='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M94.0 25.8 Q73.5 32.3 79.2 50.3' stroke='%23F2F2EE' stroke-width='0.70' opacity='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M79.2 50.3 Q59.9 47.9 67.5 67.1' stroke='%23F2F2EE' stroke-width='0.70' opacity='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M67.5 67.1 Q47.7 61.9 46.7 81.1' stroke='%23F2F2EE' stroke-width='0.70' opacity='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M23.9 92.4 Q11.0 76.3 2.9 93.1' stroke='%23F2F2EE' stroke-width='0.70' opacity='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M119.1 1.4 Q100.9 14.8 125.1 34.3' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M125.1 34.3 Q101.8 45.1 109.5 69.5' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M109.5 69.5 Q85.8 68.4 90.4 89.8' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M90.4 89.8 Q63.4 82.2 62.6 108.7' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M62.6 108.7 Q40.0 96.9 30.0 115.9' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30.0 115.9 Q13.9 96.4 3.7 118.4' stroke='%23F2F2EE' stroke-width='0.45' opacity='0.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M11.9 0.0L11.6 0.7L11.2 1.4L10.8 2.1L10.4 2.7L9.9 3.2L9.4 3.7L8.9 4.2L8.4 4.6L7.8 5.0L7.2 5.3L6.7 5.5L6.1 5.7L5.5 5.9L5.0 6.0L4.4 6.0L3.8 6.1L3.3 6.0L2.8 6.0L2.3 5.9L1.9 5.7L1.4 5.5L1.0 5.3L0.6 5.1L0.3 4.8L0.0 4.5' stroke='%23F2F2EE' stroke-width='1.1' opacity='.6' fill='none'/%3E%3Cpath d='M90.4 89.8 C96.4 105.8 77.9 118.9 85.9 132.9' stroke='%23F2F2EE' stroke-width='.9' opacity='.4' fill='none'/%3E%3Ccircle cx='85.9' cy='132.9' r='1.8' fill='%23F2F2EE' opacity='.45'/%3E%3C/svg%3E");
  --art-web-swag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 96'%3E%3Cpath d='M0 0 H320 V3 H0 Z' fill='%23F2F2EE' opacity='.3'/%3E%3Cpath d='M0.0 3 C27.7 34.6 78.9 34.6 106.7 3M106.7 3 C134.4 34.1 185.6 34.1 213.3 3M213.3 3 C241.1 35.5 292.3 35.5 320.0 3' stroke='%23F2F2EE' stroke-width='1.13' opacity='0.44' fill='none'/%3E%3Cpath d='M0.0 3 C27.7 55.7 78.9 55.7 106.7 3M106.7 3 C134.4 58.0 185.6 58.0 213.3 3M213.3 3 C241.1 57.2 292.3 57.2 320.0 3' stroke='%23F2F2EE' stroke-width='1.02' opacity='0.40' fill='none'/%3E%3Cpath d='M0.0 3 C27.7 77.5 78.9 77.5 106.7 3M106.7 3 C134.4 80.6 185.6 80.6 213.3 3M213.3 3 C241.1 77.4 292.3 77.4 320.0 3' stroke='%23F2F2EE' stroke-width='0.91' opacity='0.36' fill='none'/%3E%3Cpath d='M0.0 3 C27.7 102.6 78.9 102.6 106.7 3M106.7 3 C134.4 99.5 185.6 99.5 213.3 3M213.3 3 C241.1 99.7 292.3 99.7 320.0 3' stroke='%23F2F2EE' stroke-width='0.80' opacity='0.32' fill='none'/%3E%3Cpath d='M32.0 3 Q25.0 37.5 29.2 68.2' stroke='%23F2F2EE' stroke-width='.75' opacity='.26' fill='none'/%3E%3Cpath d='M53.3 3 Q43.5 50.7 49.4 92.2' stroke='%23F2F2EE' stroke-width='.75' opacity='.26' fill='none'/%3E%3Cpath d='M74.7 3 Q79.5 37.5 76.6 68.2' stroke='%23F2F2EE' stroke-width='.75' opacity='.26' fill='none'/%3E%3Ccircle cx='53.3' cy='86.4' r='1.6' fill='%23F2F2EE' opacity='.4'/%3E%3Cpath d='M138.7 3 Q133.1 37.5 136.4 68.2' stroke='%23F2F2EE' stroke-width='.75' opacity='.26' fill='none'/%3E%3Cpath d='M160.0 3 Q151.6 50.7 156.6 92.2' stroke='%23F2F2EE' stroke-width='.75' opacity='.26' fill='none'/%3E%3Cpath d='M181.3 3 Q192.0 37.5 185.6 68.2' stroke='%23F2F2EE' stroke-width='.75' opacity='.26' fill='none'/%3E%3Ccircle cx='160.0' cy='86.4' r='1.6' fill='%23F2F2EE' opacity='.4'/%3E%3Cpath d='M245.3 3 Q237.3 37.5 242.1 68.2' stroke='%23F2F2EE' stroke-width='.75' opacity='.26' fill='none'/%3E%3Cpath d='M266.7 3 Q259.9 50.7 264.0 92.2' stroke='%23F2F2EE' stroke-width='.75' opacity='.26' fill='none'/%3E%3Cpath d='M288.0 3 Q298.8 37.5 292.3 68.2' stroke='%23F2F2EE' stroke-width='.75' opacity='.26' fill='none'/%3E%3Ccircle cx='266.7' cy='86.4' r='1.6' fill='%23F2F2EE' opacity='.4'/%3E%3Cpath d='M0.0 3 C27.7 86.4 78.9 86.4 106.7 3 Z' fill='%23F2F2EE' opacity='.035'/%3E%3Cpath d='M106.7 3 C134.4 86.4 185.6 86.4 213.3 3 Z' fill='%23F2F2EE' opacity='.035'/%3E%3Cpath d='M213.3 3 C241.1 86.4 292.3 86.4 320.0 3 Z' fill='%23F2F2EE' opacity='.035'/%3E%3C/svg%3E");
  --art-spider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 100'%3E%3Cg stroke='%2314141A' stroke-width='2.8' fill='none' stroke-linecap='round'%3E%3Cpath d='M41 52 Q23.0 14.0 5.0 52.0M41 52 Q19.0 25.0 -3.0 63.0M41 52 Q20.0 39.0 -1.0 77.0M41 52 Q25.0 50.0 9.0 88.0M63 52 Q81.0 14.0 99.0 52.0M63 52 Q85.0 25.0 107.0 63.0M63 52 Q84.0 39.0 105.0 77.0M63 52 Q79.0 50.0 95.0 88.0'/%3E%3C/g%3E%3Cellipse cx='52' cy='55' rx='15' ry='13' fill='%2314141A'/%3E%3Cellipse cx='52' cy='55' rx='8' ry='6' fill='%23E0661B' opacity='.22'/%3E%3Ccircle cx='52' cy='39' r='9' fill='%231B1B22'/%3E%3Ccircle cx='48.5' cy='37' r='2.4' fill='%23E0661B'/%3E%3Ccircle cx='55.5' cy='37' r='2.4' fill='%23E0661B'/%3E%3Ccircle cx='48.5' cy='37' r='.9' fill='%23FFE9C9'/%3E%3Ccircle cx='55.5' cy='37' r='.9' fill='%23FFE9C9'/%3E%3C/svg%3E");
  --art-bat-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cg transform='translate(60 30)'%3E%3Cpath d='M6 -6 C 20 -24 30 -22 44 -16 C 40 -4 36 -6 32 4 C 28 -4 24 -2 20 8 C 16 2 12 4 7 12 C 6 14 6 8 6 -6 Z' fill='%2314141A'/%3E%3Cg transform='scale(-1 1)'%3E%3Cpath d='M6 -6 C 20 -24 30 -22 44 -16 C 40 -4 36 -6 32 4 C 28 -4 24 -2 20 8 C 16 2 12 4 7 12 C 6 14 6 8 6 -6 Z' fill='%2314141A'/%3E%3C/g%3E%3Cellipse cx='0' cy='2' rx='7' ry='13' fill='%2314141A'/%3E%3Ccircle cx='0' cy='-12' r='7' fill='%231B1B22'/%3E%3Cpath d='M-7 -16 l1-9 6 6z M7 -16 l-1-9 -6 6z' fill='%231B1B22'/%3E%3Ccircle cx='-2.6' cy='-13' r='1.5' fill='%23E0661B'/%3E%3Ccircle cx='2.6' cy='-13' r='1.5' fill='%23E0661B'/%3E%3C/g%3E%3C/svg%3E");
  --art-bat-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cg transform='translate(60 30)'%3E%3Cpath d='M6 -6 C 20 -5 30 -3 44 3 C 40 15 36 13 32 23 C 28 15 24 17 20 27 C 16 21 12 23 7 31 C 6 14 6 8 6 -6 Z' fill='%2314141A'/%3E%3Cg transform='scale(-1 1)'%3E%3Cpath d='M6 -6 C 20 -5 30 -3 44 3 C 40 15 36 13 32 23 C 28 15 24 17 20 27 C 16 21 12 23 7 31 C 6 14 6 8 6 -6 Z' fill='%2314141A'/%3E%3C/g%3E%3Cellipse cx='0' cy='2' rx='7' ry='13' fill='%2314141A'/%3E%3Ccircle cx='0' cy='-12' r='7' fill='%231B1B22'/%3E%3Cpath d='M-7 -16 l1-9 6 6z M7 -16 l-1-9 -6 6z' fill='%231B1B22'/%3E%3Ccircle cx='-2.6' cy='-13' r='1.5' fill='%23E0661B'/%3E%3Ccircle cx='2.6' cy='-13' r='1.5' fill='%23E0661B'/%3E%3C/g%3E%3C/svg%3E");
  --art-lantern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 112'%3E %3Cpath d='M65 22 c-5-10 -2-17 5-20 -1 8 2 13 6 16' stroke='%234B6B2A' stroke-width='7' fill='none' stroke-linecap='round'/%3E %3Cellipse cx='65' cy='68' rx='57' ry='42' fill='%23C2560F'/%3E %3Cellipse cx='65' cy='68' rx='40' ry='42' fill='%23E2701A'/%3E %3Cellipse cx='65' cy='68' rx='20' ry='42' fill='%23F08622'/%3E %3Cellipse cx='48' cy='56' rx='9' ry='17' fill='%23A33C08' opacity='.45'/%3E %3Cellipse cx='82' cy='56' rx='9' ry='17' fill='%23A33C08' opacity='.45'/%3E %3Cg fill='%23160A03'%3E %3Cpath d='M38 52 l19 12 -19 8z'/%3E%3Cpath d='M92 52 l-19 12 19 8z'/%3E %3Cpath d='M34 80 l12-7 9 7 10-8 10 8 9-7 12 7 -7 12 -58 0z'/%3E %3C/g%3E %3Cg fill='%23FFC861' opacity='.9'%3E %3Cpath d='M40 55 l14 9 -14 6z'/%3E%3Cpath d='M90 55 l-14 9 14 6z'/%3E %3Cpath d='M37 81 l11-6 8 6 10-7 10 7 8-6 11 6 -6 9 -54 0z'/%3E %3C/g%3E %3Cellipse cx='65' cy='78' rx='34' ry='18' fill='%23FFB347' opacity='.28'/%3E %3C/svg%3E");
  --art-candle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 150'%3E %3Cpath d='M16 148 h28 v-96 c0 -6 -3 -10 -5 -14 -3 6 -8 4 -9 -2 -2 6 -6 8 -9 3 -3 5 -5 8 -5 13z' fill='%23E8E4D6'/%3E %3Cpath d='M30 148 h14 v-96 c0 -6 -3 -10 -5 -14 -2 5 -5 6 -9 6z' fill='%23CFC9B6'/%3E %3Cpath d='M30 40 v-7' stroke='%23231A12' stroke-width='3'/%3E %3Cpath d='M30 10 c7 10 9 14 9 19 a9 10 0 0 1 -18 0 c0-5 2-9 9-19z' fill='%23FFB347'/%3E %3Cpath d='M30 18 c4 7 5 10 5 13 a5 6 0 0 1 -10 0 c0-3 1-6 5-13z' fill='%23FFF0C2'/%3E %3C/svg%3E");
  --art-drips: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 74'%3E %3Cpath d='M0 0 H400 V16 c-8 0 -10 30 -20 30 s-12-30 -20-30 c-9 0 -11 14 -19 14 s-10-14 -18-14 c-13 0 -15 46 -29 46 s-16-46 -29-46 c-8 0 -10 20 -18 20 s-10-20 -18-20 c-11 0 -13 36 -25 36 s-14-36 -25-36 c-7 0 -9 12 -16 12 s-9-12 -16-12 c-12 0 -14 40 -27 40 s-15-40 -27-40 c-8 0 -10 22 -19 22 s-11-22 -19-22 c-10 0 -12 28 -23 28 s-13-28 -22-28 Z' fill='%23871012'/%3E %3Cpath d='M0 0 H400 V9 H0 Z' fill='%236E0C0E'/%3E %3C/svg%3E");
  --art-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 34'%3E %3Cpath d='M10 0 c5 12 8 16 8 22 a8 9 0 0 1 -16 0 c0-6 3-10 8-22z' fill='%23871012'/%3E %3C/svg%3E");
  --art-snowman: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 164'%3E %3Cellipse cx='60' cy='156' rx='46' ry='8' fill='%23000000' opacity='.3'/%3E %3Cellipse cx='60' cy='128' rx='36' ry='29' fill='%23F1F1EC'/%3E %3Cellipse cx='50' cy='124' rx='22' ry='22' fill='%23FAFAF6'/%3E %3Cellipse cx='60' cy='84' rx='26' ry='23' fill='%23F4F4EF'/%3E %3Cellipse cx='52' cy='81' rx='16' ry='16' fill='%23FAFAF6'/%3E %3Ccircle cx='60' cy='44' r='19' fill='%23F7F7F2'/%3E%3Ccircle cx='54' cy='40' r='12' fill='%23FDFDF9'/%3E %3Cpath d='M32 76 C16 70 10 58 6 46' stroke='%236B4A28' stroke-width='5' fill='none' stroke-linecap='round'/%3E %3Cpath d='M10 52 l-8-3 M8 46 l-7 2' stroke='%236B4A28' stroke-width='3.5' stroke-linecap='round'/%3E %3Cpath d='M88 76 C104 72 110 60 114 50' stroke='%236B4A28' stroke-width='5' fill='none' stroke-linecap='round'/%3E %3Cpath d='M110 56 l8-3 M112 50 l7 2' stroke='%236B4A28' stroke-width='3.5' stroke-linecap='round'/%3E %3Cpath d='M38 62 q22 11 44 0 l5 10 q-27 12 -54 0z' fill='%23C8252B'/%3E %3Cpath d='M77 69 l9 26 -10 2 -7-24z' fill='%23C8252B'/%3E %3Cpath d='M77 69 l9 26 -4 1 -8-25z' fill='%23A51C22'/%3E %3Ccircle cx='53' cy='41' r='3.2' fill='%231A1A1A'/%3E%3Ccircle cx='67' cy='41' r='3.2' fill='%231A1A1A'/%3E %3Ccircle cx='52' cy='40' r='1' fill='%23FFFFFF'/%3E%3Ccircle cx='66' cy='40' r='1' fill='%23FFFFFF'/%3E %3Cpath d='M60 48 l17 5 -17 6z' fill='%23E2701A'/%3E %3Cpath d='M50 56 q10 6 20 0' stroke='%231A1A1A' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E %3Cpath d='M38 28 h44 v7 h-44z' fill='%231A1A1A'/%3E%3Cpath d='M45 9 h30 v20 h-30z' fill='%231A1A1A'/%3E %3Cpath d='M45 24 h30 v6 h-30z' fill='%23C8252B'/%3E %3Ccircle cx='60' cy='96' r='3.4' fill='%231A1A1A'/%3E%3Ccircle cx='60' cy='112' r='3.4' fill='%231A1A1A'/%3E %3Ccircle cx='60' cy='128' r='3.4' fill='%231A1A1A'/%3E %3C/svg%3E");
  --art-tree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 160'%3E %3Cellipse cx='55' cy='154' rx='34' ry='7' fill='%23000000' opacity='.3'/%3E %3Cpath d='M48 154 h14 v-26 h-14z' fill='%234A3522'/%3E %3Cpath d='M55 6 L82 56 H28 Z' fill='%231F4727'/%3E%3Cpath d='M55 6 L68 56 H28 Z' fill='%23255330'/%3E %3Cpath d='M55 38 L92 96 H18 Z' fill='%231B4024'/%3E%3Cpath d='M55 38 L72 96 H18 Z' fill='%23234E2C'/%3E %3Cpath d='M55 74 L100 134 H10 Z' fill='%23173A20'/%3E%3Cpath d='M55 74 L76 134 H10 Z' fill='%231F4826'/%3E %3Cpath d='M28 56 q27 10 54 0 M18 96 q37 11 74 0 M10 134 q45 12 90 0' stroke='%23F7F7F2' stroke-width='4' fill='none' opacity='.85'/%3E %3Ccircle cx='42' cy='48' r='4.5' fill='%23C8252B'/%3E%3Ccircle cx='68' cy='86' r='4.5' fill='%23D4FF1F'/%3E %3Ccircle cx='36' cy='122' r='4.5' fill='%23E8E8E2'/%3E%3Ccircle cx='76' cy='120' r='4.5' fill='%23C8252B'/%3E %3Ccircle cx='55' cy='108' r='4.5' fill='%23E2701A'/%3E %3Cpath d='M55 0 l5 12 12 2 -9 9 3 12 -11-7 -11 7 3-12 -9-9 12-2z' fill='%23F7E07A'/%3E %3C/svg%3E");
  --art-lights-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 72'%3E%3Cpath d='M0.0 8.0 L3.3 10.0 L6.7 11.9 L10.0 13.9 L13.3 15.8 L16.7 17.6 L20.0 19.5 L23.3 21.3 L26.7 23.0 L30.0 24.7 L33.3 26.3 L36.7 27.8 L40.0 29.2 L43.3 30.6 L46.7 31.8 L50.0 32.9 L53.3 34.0 L56.7 34.9 L60.0 35.7 L63.3 36.4 L66.7 37.0 L70.0 37.4 L73.3 37.7 L76.7 37.9 L80.0 38.0 L83.3 37.9 L86.7 37.7 L90.0 37.4 L93.3 37.0 L96.7 36.4 L100.0 35.7 L103.3 34.9 L106.7 34.0 L110.0 32.9 L113.3 31.8 L116.7 30.6 L120.0 29.2 L123.3 27.8 L126.7 26.3 L130.0 24.7 L133.3 23.0 L136.7 21.3 L140.0 19.5 L143.3 17.6 L146.7 15.8 L150.0 13.9 L153.3 11.9 L156.7 10.0 L160.0 8.0 L163.3 10.0 L166.7 11.9 L170.0 13.9 L173.3 15.8 L176.7 17.6 L180.0 19.5 L183.3 21.3 L186.7 23.0 L190.0 24.7 L193.3 26.3 L196.7 27.8 L200.0 29.2 L203.3 30.6 L206.7 31.8 L210.0 32.9 L213.3 34.0 L216.7 34.9 L220.0 35.7 L223.3 36.4 L226.7 37.0 L230.0 37.4 L233.3 37.7 L236.7 37.9 L240.0 38.0 L243.3 37.9 L246.7 37.7 L250.0 37.4 L253.3 37.0 L256.7 36.4 L260.0 35.7 L263.3 34.9 L266.7 34.0 L270.0 32.9 L273.3 31.8 L276.7 30.6 L280.0 29.2 L283.3 27.8 L286.7 26.3 L290.0 24.7 L293.3 23.0 L296.7 21.3 L300.0 19.5 L303.3 17.6 L306.7 15.8 L310.0 13.9 L313.3 11.9 L316.7 10.0 L320.0 8.0' stroke='%232B2B26' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='22.9' cy='43.0' r='17' fill='%23D4FF1F' opacity='.16'/%3E%3Ccircle cx='22.9' cy='43.0' r='10' fill='%23D4FF1F' opacity='.2'/%3E%3Cpath d='M22.9 21.0 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M18.9 26.0 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M14.9 31.0 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23D4FF1F' opacity='1'/%3E%3Cellipse cx='20.4' cy='37.0' rx='2.4' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M68.6 37.2 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M64.6 42.2 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M60.6 47.2 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23C8252B' opacity='0.3'/%3E%3Ccircle cx='114.3' cy='53.5' r='17' fill='%23E8E8E2' opacity='.16'/%3E%3Ccircle cx='114.3' cy='53.5' r='10' fill='%23E8E8E2' opacity='.2'/%3E%3Cpath d='M114.3 31.5 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M110.3 36.5 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M106.3 41.5 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23E8E8E2' opacity='1'/%3E%3Cellipse cx='111.8' cy='47.5' rx='2.4' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M160.0 8.0 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M156.0 13.0 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M152.0 18.0 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23E2701A' opacity='0.3'/%3E%3Ccircle cx='205.7' cy='53.5' r='17' fill='%2366C7E8' opacity='.16'/%3E%3Ccircle cx='205.7' cy='53.5' r='10' fill='%2366C7E8' opacity='.2'/%3E%3Cpath d='M205.7 31.5 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M201.7 36.5 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M197.7 41.5 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%2366C7E8' opacity='1'/%3E%3Cellipse cx='203.2' cy='47.5' rx='2.4' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M251.4 37.2 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M247.4 42.2 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M243.4 47.2 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23D4FF1F' opacity='0.3'/%3E%3Ccircle cx='297.1' cy='43.0' r='17' fill='%23C8252B' opacity='.16'/%3E%3Ccircle cx='297.1' cy='43.0' r='10' fill='%23C8252B' opacity='.2'/%3E%3Cpath d='M297.1 21.0 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M293.1 26.0 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M289.1 31.0 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23C8252B' opacity='1'/%3E%3Cellipse cx='294.6' cy='37.0' rx='2.4' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3C/svg%3E");
  --art-lights-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 72'%3E%3Cpath d='M0.0 8.0 L3.3 10.0 L6.7 11.9 L10.0 13.9 L13.3 15.8 L16.7 17.6 L20.0 19.5 L23.3 21.3 L26.7 23.0 L30.0 24.7 L33.3 26.3 L36.7 27.8 L40.0 29.2 L43.3 30.6 L46.7 31.8 L50.0 32.9 L53.3 34.0 L56.7 34.9 L60.0 35.7 L63.3 36.4 L66.7 37.0 L70.0 37.4 L73.3 37.7 L76.7 37.9 L80.0 38.0 L83.3 37.9 L86.7 37.7 L90.0 37.4 L93.3 37.0 L96.7 36.4 L100.0 35.7 L103.3 34.9 L106.7 34.0 L110.0 32.9 L113.3 31.8 L116.7 30.6 L120.0 29.2 L123.3 27.8 L126.7 26.3 L130.0 24.7 L133.3 23.0 L136.7 21.3 L140.0 19.5 L143.3 17.6 L146.7 15.8 L150.0 13.9 L153.3 11.9 L156.7 10.0 L160.0 8.0 L163.3 10.0 L166.7 11.9 L170.0 13.9 L173.3 15.8 L176.7 17.6 L180.0 19.5 L183.3 21.3 L186.7 23.0 L190.0 24.7 L193.3 26.3 L196.7 27.8 L200.0 29.2 L203.3 30.6 L206.7 31.8 L210.0 32.9 L213.3 34.0 L216.7 34.9 L220.0 35.7 L223.3 36.4 L226.7 37.0 L230.0 37.4 L233.3 37.7 L236.7 37.9 L240.0 38.0 L243.3 37.9 L246.7 37.7 L250.0 37.4 L253.3 37.0 L256.7 36.4 L260.0 35.7 L263.3 34.9 L266.7 34.0 L270.0 32.9 L273.3 31.8 L276.7 30.6 L280.0 29.2 L283.3 27.8 L286.7 26.3 L290.0 24.7 L293.3 23.0 L296.7 21.3 L300.0 19.5 L303.3 17.6 L306.7 15.8 L310.0 13.9 L313.3 11.9 L316.7 10.0 L320.0 8.0' stroke='%232B2B26' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M22.9 21.0 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M18.9 26.0 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M14.9 31.0 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23D4FF1F' opacity='0.3'/%3E%3Ccircle cx='68.6' cy='59.2' r='17' fill='%23C8252B' opacity='.16'/%3E%3Ccircle cx='68.6' cy='59.2' r='10' fill='%23C8252B' opacity='.2'/%3E%3Cpath d='M68.6 37.2 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M64.6 42.2 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M60.6 47.2 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23C8252B' opacity='1'/%3E%3Cellipse cx='66.1' cy='53.2' rx='2.4' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M114.3 31.5 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M110.3 36.5 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M106.3 41.5 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23E8E8E2' opacity='0.3'/%3E%3Ccircle cx='160.0' cy='30.0' r='17' fill='%23E2701A' opacity='.16'/%3E%3Ccircle cx='160.0' cy='30.0' r='10' fill='%23E2701A' opacity='.2'/%3E%3Cpath d='M160.0 8.0 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M156.0 13.0 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M152.0 18.0 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23E2701A' opacity='1'/%3E%3Cellipse cx='157.5' cy='24.0' rx='2.4' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M205.7 31.5 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M201.7 36.5 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M197.7 41.5 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%2366C7E8' opacity='0.3'/%3E%3Ccircle cx='251.4' cy='59.2' r='17' fill='%23D4FF1F' opacity='.16'/%3E%3Ccircle cx='251.4' cy='59.2' r='10' fill='%23D4FF1F' opacity='.2'/%3E%3Cpath d='M251.4 37.2 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M247.4 42.2 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M243.4 47.2 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23D4FF1F' opacity='1'/%3E%3Cellipse cx='248.9' cy='53.2' rx='2.4' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M297.1 21.0 v6' stroke='%232B2B26' stroke-width='3'/%3E%3Cpath d='M293.1 26.0 h8 v5 h-8z' fill='%239B9B93'/%3E%3Cpath d='M289.1 31.0 q8 -4 16 0 c2 10 -1 18 -8 20 c-7 -2 -10 -10 -8 -20z' fill='%23C8252B' opacity='0.3'/%3E%3C/svg%3E");
  --art-baubles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 170'%3E %3Cpath d='M0 5 C 42 0 104 11 150 3' stroke='%232A2A24' stroke-width='4' fill='none'/%3E %3Cg stroke='%23B9B9B0' stroke-width='1.6'%3E%3Cpath d='M36 5 v38'/%3E%3Cpath d='M78 7 v62'/%3E%3Cpath d='M116 5 v28'/%3E%3C/g%3E %3Cg%3E%3Cpath d='M31 41 h10 v6 h-10z' fill='%23C8A24A'/%3E %3Ccircle cx='36' cy='62' r='16' fill='%23C8252B'/%3E%3Ccircle cx='30' cy='55' r='4.6' fill='%23FFFFFF' opacity='.5'/%3E %3Cpath d='M22 62 q14 7 28 0' stroke='%23FFFFFF' stroke-width='2' opacity='.3' fill='none'/%3E%3C/g%3E %3Cg%3E%3Cpath d='M73 67 h10 v6 h-10z' fill='%23C8A24A'/%3E %3Ccircle cx='78' cy='90' r='19' fill='%23D4FF1F'/%3E%3Ccircle cx='71' cy='82' r='5.4' fill='%23FFFFFF' opacity='.5'/%3E %3Cpath d='M62 90 q16 8 32 0' stroke='%23000000' stroke-width='2' opacity='.15' fill='none'/%3E%3C/g%3E %3Cg%3E%3Cpath d='M111 31 h10 v6 h-10z' fill='%23C8A24A'/%3E %3Ccircle cx='116' cy='51' r='14' fill='%23E8E8E2'/%3E%3Ccircle cx='111' cy='45' r='4' fill='%23FFFFFF' opacity='.7'/%3E%3C/g%3E %3C/svg%3E");
  --art-eggs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 130'%3E %3Cellipse cx='95' cy='124' rx='78' ry='8' fill='%23000000' opacity='.28'/%3E %3Cpath d='M14 120 q81 -22 162 0 q-14 8 -81 8 q-67 0 -81 -8z' fill='%238A6A3A'/%3E %3Cpath d='M20 116 q75 -16 150 0' stroke='%236E5129' stroke-width='5' fill='none'/%3E %3Cg%3E%3Cellipse cx='52' cy='88' rx='27' ry='35' fill='%23F0C3D6'/%3E %3Cpath d='M26 82 q26 12 52 0 M26 96 q26 12 52 0' stroke='%238FD3C7' stroke-width='6' fill='none'/%3E %3Ccircle cx='40' cy='62' r='4' fill='%23F7E07A'/%3E%3Ccircle cx='64' cy='66' r='4' fill='%23F7E07A'/%3E %3Cellipse cx='42' cy='70' rx='6' ry='9' fill='%23FFFFFF' opacity='.4'/%3E%3C/g%3E %3Cg%3E%3Cellipse cx='136' cy='94' rx='23' ry='30' fill='%238FD3C7'/%3E %3Cpath d='M114 88 q22 11 44 0' stroke='%23FFFFFF' stroke-width='5' fill='none'/%3E %3Ccircle cx='126' cy='76' r='3.6' fill='%23F0C3D6'/%3E%3Ccircle cx='146' cy='80' r='3.6' fill='%23F0C3D6'/%3E %3Ccircle cx='136' cy='106' r='3.6' fill='%23F7E07A'/%3E %3Cellipse cx='127' cy='80' rx='5' ry='8' fill='%23FFFFFF' opacity='.4'/%3E%3C/g%3E %3Cg%3E%3Cellipse cx='94' cy='102' rx='19' ry='25' fill='%23F7E07A'/%3E %3Cpath d='M76 104 q18 9 36 0' stroke='%23E2701A' stroke-width='4.5' fill='none'/%3E %3Cpath d='M94 82 l4 7 -8 0z' fill='%238FD3C7'/%3E %3Cellipse cx='87' cy='92' rx='4' ry='6.5' fill='%23FFFFFF' opacity='.45'/%3E%3C/g%3E %3C/svg%3E");
  --art-egg-bunting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 64'%3E%3Cpath d='M0.0 6.0 L3.1 7.7 L6.2 9.4 L9.4 11.1 L12.5 12.7 L15.6 14.4 L18.8 15.9 L21.9 17.5 L25.0 19.0 L28.1 20.4 L31.2 21.8 L34.4 23.1 L37.5 24.4 L40.6 25.5 L43.8 26.6 L46.9 27.6 L50.0 28.5 L53.1 29.3 L56.2 30.0 L59.4 30.6 L62.5 31.1 L65.6 31.5 L68.8 31.8 L71.9 31.9 L75.0 32.0 L78.1 31.9 L81.2 31.8 L84.4 31.5 L87.5 31.1 L90.6 30.6 L93.8 30.0 L96.9 29.3 L100.0 28.5 L103.1 27.6 L106.2 26.6 L109.4 25.5 L112.5 24.4 L115.6 23.1 L118.8 21.8 L121.9 20.4 L125.0 19.0 L128.1 17.5 L131.2 15.9 L134.4 14.4 L137.5 12.7 L140.6 11.1 L143.8 9.4 L146.9 7.7 L150.0 6.0 L153.1 7.7 L156.2 9.4 L159.4 11.1 L162.5 12.7 L165.6 14.4 L168.8 15.9 L171.9 17.5 L175.0 19.0 L178.1 20.4 L181.2 21.8 L184.4 23.1 L187.5 24.4 L190.6 25.5 L193.8 26.6 L196.9 27.6 L200.0 28.5 L203.1 29.3 L206.2 30.0 L209.4 30.6 L212.5 31.1 L215.6 31.5 L218.8 31.8 L221.9 31.9 L225.0 32.0 L228.1 31.9 L231.2 31.8 L234.4 31.5 L237.5 31.1 L240.6 30.6 L243.8 30.0 L246.9 29.3 L250.0 28.5 L253.1 27.6 L256.2 26.6 L259.4 25.5 L262.5 24.4 L265.6 23.1 L268.8 21.8 L271.9 20.4 L275.0 19.0 L278.1 17.5 L281.2 15.9 L284.4 14.4 L287.5 12.7 L290.6 11.1 L293.8 9.4 L296.9 7.7 L300.0 6.0' stroke='%23B9B9B0' stroke-width='2.4' fill='none'/%3E%3Cpath d='M25.0 19.0 v6' stroke='%23B9B9B0' stroke-width='1.6'/%3E%3Cellipse cx='25.0' cy='40.0' rx='11.5' ry='15' fill='%23F0C3D6'/%3E%3Cpath d='M14.0 38.0 q11 6 22 0' stroke='%23FFFFFF' stroke-width='3.4' opacity='.8' fill='none'/%3E%3Cpath d='M16.0 46.0 q9 5 18 0' stroke='%23FFFFFF' stroke-width='2.4' opacity='.5' fill='none'/%3E%3Cellipse cx='21.5' cy='34.0' rx='2.6' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M75.0 32.0 v6' stroke='%23B9B9B0' stroke-width='1.6'/%3E%3Cellipse cx='75.0' cy='53.0' rx='11.5' ry='15' fill='%23F7E07A'/%3E%3Cpath d='M64.0 51.0 q11 6 22 0' stroke='%23FFFFFF' stroke-width='3.4' opacity='.8' fill='none'/%3E%3Cpath d='M66.0 59.0 q9 5 18 0' stroke='%23FFFFFF' stroke-width='2.4' opacity='.5' fill='none'/%3E%3Cellipse cx='71.5' cy='47.0' rx='2.6' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M125.0 19.0 v6' stroke='%23B9B9B0' stroke-width='1.6'/%3E%3Cellipse cx='125.0' cy='40.0' rx='11.5' ry='15' fill='%238FD3C7'/%3E%3Cpath d='M114.0 38.0 q11 6 22 0' stroke='%23FFFFFF' stroke-width='3.4' opacity='.8' fill='none'/%3E%3Cpath d='M116.0 46.0 q9 5 18 0' stroke='%23FFFFFF' stroke-width='2.4' opacity='.5' fill='none'/%3E%3Cellipse cx='121.5' cy='34.0' rx='2.6' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M175.0 19.0 v6' stroke='%23B9B9B0' stroke-width='1.6'/%3E%3Cellipse cx='175.0' cy='40.0' rx='11.5' ry='15' fill='%23F0C3D6'/%3E%3Cpath d='M164.0 38.0 q11 6 22 0' stroke='%23FFFFFF' stroke-width='3.4' opacity='.8' fill='none'/%3E%3Cpath d='M166.0 46.0 q9 5 18 0' stroke='%23FFFFFF' stroke-width='2.4' opacity='.5' fill='none'/%3E%3Cellipse cx='171.5' cy='34.0' rx='2.6' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M225.0 32.0 v6' stroke='%23B9B9B0' stroke-width='1.6'/%3E%3Cellipse cx='225.0' cy='53.0' rx='11.5' ry='15' fill='%23F7E07A'/%3E%3Cpath d='M214.0 51.0 q11 6 22 0' stroke='%23FFFFFF' stroke-width='3.4' opacity='.8' fill='none'/%3E%3Cpath d='M216.0 59.0 q9 5 18 0' stroke='%23FFFFFF' stroke-width='2.4' opacity='.5' fill='none'/%3E%3Cellipse cx='221.5' cy='47.0' rx='2.6' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M275.0 19.0 v6' stroke='%23B9B9B0' stroke-width='1.6'/%3E%3Cellipse cx='275.0' cy='40.0' rx='11.5' ry='15' fill='%238FD3C7'/%3E%3Cpath d='M264.0 38.0 q11 6 22 0' stroke='%23FFFFFF' stroke-width='3.4' opacity='.8' fill='none'/%3E%3Cpath d='M266.0 46.0 q9 5 18 0' stroke='%23FFFFFF' stroke-width='2.4' opacity='.5' fill='none'/%3E%3Cellipse cx='271.5' cy='34.0' rx='2.6' ry='4' fill='%23FFFFFF' opacity='.55'/%3E%3C/svg%3E");
  --art-petals-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cg transform='translate(44 30) rotate(85) scale(0.9)' opacity='0.75'%3E%3Cpath d='M0 -8 C 6 -4.5 6 4.5 0 8 C -6 4.5 -6 -4.5 0 -8z' fill='%23F7C6DC'/%3E%3Cpath d='M0 -8 C 3 -4.5 3 4.5 0 8 C -2 4 -2 -4 0 -8z' fill='%23FDE8F1'/%3E%3C/g%3E%3Cg transform='translate(178 96) rotate(143) scale(0.75)' opacity='0.76'%3E%3Cpath d='M0 -8 C 6 -4.5 6 4.5 0 8 C -6 4.5 -6 -4.5 0 -8z' fill='%23F7C6DC'/%3E%3Cpath d='M0 -8 C 3 -4.5 3 4.5 0 8 C -2 4 -2 -4 0 -8z' fill='%23FDE8F1'/%3E%3C/g%3E%3Cg transform='translate(96 190) rotate(24) scale(0.85)' opacity='0.83'%3E%3Cpath d='M0 -8 C 6 -4.5 6 4.5 0 8 C -6 4.5 -6 -4.5 0 -8z' fill='%23F7C6DC'/%3E%3Cpath d='M0 -8 C 3 -4.5 3 4.5 0 8 C -2 4 -2 -4 0 -8z' fill='%23FDE8F1'/%3E%3C/g%3E%3Cg transform='translate(238 214) rotate(330) scale(0.65)' opacity='0.94'%3E%3Cpath d='M0 -8 C 6 -4.5 6 4.5 0 8 C -6 4.5 -6 -4.5 0 -8z' fill='%23F7C6DC'/%3E%3Cpath d='M0 -8 C 3 -4.5 3 4.5 0 8 C -2 4 -2 -4 0 -8z' fill='%23FDE8F1'/%3E%3C/g%3E%3C/svg%3E");
  --art-petals-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cg transform='translate(120 52) rotate(167) scale(1.2)' opacity='0.82'%3E%3Cpath d='M0 -8 C 6 -4.5 6 4.5 0 8 C -6 4.5 -6 -4.5 0 -8z' fill='%23F7C6DC'/%3E%3Cpath d='M0 -8 C 3 -4.5 3 4.5 0 8 C -2 4 -2 -4 0 -8z' fill='%23FDE8F1'/%3E%3Cpath d='M14 6 C 19 9 19 15 14 18 C 10 15 10 9 14 6z' fill='%238FD3C7'/%3E%3C/g%3E%3Cg transform='translate(26 168) rotate(50) scale(1)' opacity='0.96'%3E%3Cpath d='M0 -8 C 6 -4.5 6 4.5 0 8 C -6 4.5 -6 -4.5 0 -8z' fill='%23F7C6DC'/%3E%3Cpath d='M0 -8 C 3 -4.5 3 4.5 0 8 C -2 4 -2 -4 0 -8z' fill='%23FDE8F1'/%3E%3Cpath d='M14 6 C 19 9 19 15 14 18 C 10 15 10 9 14 6z' fill='%238FD3C7'/%3E%3C/g%3E%3Cg transform='translate(214 128) rotate(2) scale(1.1)' opacity='0.86'%3E%3Cpath d='M0 -8 C 6 -4.5 6 4.5 0 8 C -6 4.5 -6 -4.5 0 -8z' fill='%23F7C6DC'/%3E%3Cpath d='M0 -8 C 3 -4.5 3 4.5 0 8 C -2 4 -2 -4 0 -8z' fill='%23FDE8F1'/%3E%3Cpath d='M14 6 C 19 9 19 15 14 18 C 10 15 10 9 14 6z' fill='%238FD3C7'/%3E%3C/g%3E%3C/svg%3E");
  --art-confetti-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cg transform='translate(40 24) rotate(344) scale(1)' opacity='0.99'%3E%3Cg%3E%3Crect x='-4' y='-6' width='8' height='12' rx='1.5' fill='%23FFC53D'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(150 70) rotate(20) scale(0.9)' opacity='0.74'%3E%3Cg%3E%3Crect x='-4' y='-6' width='8' height='12' rx='1.5' fill='%23FFC53D'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(86 176) rotate(301) scale(1.1)' opacity='0.93'%3E%3Cg%3E%3Crect x='-4' y='-6' width='8' height='12' rx='1.5' fill='%23FFC53D'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(232 140) rotate(241) scale(0.8)' opacity='0.81'%3E%3Cg%3E%3Crect x='-4' y='-6' width='8' height='12' rx='1.5' fill='%23FFC53D'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(196 236) rotate(218) scale(1)' opacity='0.89'%3E%3Cg%3E%3Crect x='-4' y='-6' width='8' height='12' rx='1.5' fill='%23FFC53D'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --art-confetti-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cg transform='translate(104 40) rotate(286) scale(1.1)' opacity='0.95'%3E%3Cg%3E%3Crect x='-3.5' y='-5' width='7' height='10' rx='1.5' fill='%23E0661B'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(16 132) rotate(175) scale(0.9)' opacity='0.79'%3E%3Cg%3E%3Crect x='-3.5' y='-5' width='7' height='10' rx='1.5' fill='%23E0661B'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(214 96) rotate(0) scale(1)' opacity='0.91'%3E%3Cg%3E%3Crect x='-3.5' y='-5' width='7' height='10' rx='1.5' fill='%23E0661B'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(138 222) rotate(169) scale(0.95)' opacity='0.93'%3E%3Cg%3E%3Crect x='-3.5' y='-5' width='7' height='10' rx='1.5' fill='%23E0661B'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --art-confetti-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cg transform='translate(66 88) rotate(82) scale(1.2)' opacity='0.99'%3E%3Cg%3E%3Crect x='-3' y='-4.5' width='6' height='9' rx='1.5' fill='%23F2F2EE'/%3E%3C/g%3E%3Ccircle cx='14' cy='12' r='3' fill='%23D4FF1F'/%3E%3C/g%3E%3Cg transform='translate(190 28) rotate(45) scale(1)' opacity='0.92'%3E%3Cg%3E%3Crect x='-3' y='-4.5' width='6' height='9' rx='1.5' fill='%23F2F2EE'/%3E%3C/g%3E%3Ccircle cx='14' cy='12' r='3' fill='%23D4FF1F'/%3E%3C/g%3E%3Cg transform='translate(120 180) rotate(31) scale(0.9)' opacity='0.79'%3E%3Cg%3E%3Crect x='-3' y='-4.5' width='6' height='9' rx='1.5' fill='%23F2F2EE'/%3E%3C/g%3E%3Ccircle cx='14' cy='12' r='3' fill='%23D4FF1F'/%3E%3C/g%3E%3C/svg%3E");
  --art-wattle-fall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cg transform='translate(52 36) rotate(224) scale(1)' opacity='0.93'%3E%3Ccircle r='5' fill='%23FFD83D'/%3E%3Ccircle cx='9' cy='5' r='3.4' fill='%23E8B300'/%3E%3Ccircle cx='-7' cy='6' r='3' fill='%23FFD83D'/%3E%3C/g%3E%3Cg transform='translate(168 112) rotate(286) scale(0.8)' opacity='0.98'%3E%3Ccircle r='5' fill='%23FFD83D'/%3E%3Ccircle cx='9' cy='5' r='3.4' fill='%23E8B300'/%3E%3Ccircle cx='-7' cy='6' r='3' fill='%23FFD83D'/%3E%3C/g%3E%3Cg transform='translate(104 206) rotate(266) scale(0.9)' opacity='0.98'%3E%3Ccircle r='5' fill='%23FFD83D'/%3E%3Ccircle cx='9' cy='5' r='3.4' fill='%23E8B300'/%3E%3Ccircle cx='-7' cy='6' r='3' fill='%23FFD83D'/%3E%3C/g%3E%3Cg transform='translate(228 160) rotate(10) scale(0.7)' opacity='0.85'%3E%3Ccircle r='5' fill='%23FFD83D'/%3E%3Ccircle cx='9' cy='5' r='3.4' fill='%23E8B300'/%3E%3Ccircle cx='-7' cy='6' r='3' fill='%23FFD83D'/%3E%3C/g%3E%3C/svg%3E");
  --art-hat-ears: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 86'%3E %3Cg fill='%23F2F2EE' stroke='%23D9D9D2' stroke-width='2'%3E %3Cellipse cx='30' cy='40' rx='12' ry='34' transform='rotate(-14 30 40)'/%3E %3Cellipse cx='62' cy='40' rx='12' ry='34' transform='rotate(14 62 40)'/%3E%3C/g%3E %3Cg fill='%23F0C3D6'%3E %3Cellipse cx='30' cy='38' rx='6' ry='22' transform='rotate(-14 30 38)'/%3E %3Cellipse cx='62' cy='38' rx='6' ry='22' transform='rotate(14 62 38)'/%3E%3C/g%3E %3C/svg%3E");
  --art-bunting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70'%3E%3Cpath d='M0.0 5.0 L3.1 6.7 L6.2 8.4 L9.4 10.1 L12.5 11.7 L15.6 13.4 L18.8 14.9 L21.9 16.5 L25.0 18.0 L28.1 19.4 L31.2 20.8 L34.4 22.1 L37.5 23.4 L40.6 24.5 L43.8 25.6 L46.9 26.6 L50.0 27.5 L53.1 28.3 L56.2 29.0 L59.4 29.6 L62.5 30.1 L65.6 30.5 L68.8 30.8 L71.9 30.9 L75.0 31.0 L78.1 30.9 L81.2 30.8 L84.4 30.5 L87.5 30.1 L90.6 29.6 L93.8 29.0 L96.9 28.3 L100.0 27.5 L103.1 26.6 L106.2 25.6 L109.4 24.5 L112.5 23.4 L115.6 22.1 L118.8 20.8 L121.9 19.4 L125.0 18.0 L128.1 16.5 L131.2 14.9 L134.4 13.4 L137.5 11.7 L140.6 10.1 L143.8 8.4 L146.9 6.7 L150.0 5.0 L153.1 6.7 L156.2 8.4 L159.4 10.1 L162.5 11.7 L165.6 13.4 L168.8 14.9 L171.9 16.5 L175.0 18.0 L178.1 19.4 L181.2 20.8 L184.4 22.1 L187.5 23.4 L190.6 24.5 L193.8 25.6 L196.9 26.6 L200.0 27.5 L203.1 28.3 L206.2 29.0 L209.4 29.6 L212.5 30.1 L215.6 30.5 L218.8 30.8 L221.9 30.9 L225.0 31.0 L228.1 30.9 L231.2 30.8 L234.4 30.5 L237.5 30.1 L240.6 29.6 L243.8 29.0 L246.9 28.3 L250.0 27.5 L253.1 26.6 L256.2 25.6 L259.4 24.5 L262.5 23.4 L265.6 22.1 L268.8 20.8 L271.9 19.4 L275.0 18.0 L278.1 16.5 L281.2 14.9 L284.4 13.4 L287.5 11.7 L290.6 10.1 L293.8 8.4 L296.9 6.7 L300.0 5.0' stroke='%23B9B9B0' stroke-width='2.6' fill='none'/%3E%3Cg transform='translate(25.0 18.0) rotate(12.6)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%23D4FF1F'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(75.0 31.0) rotate(0.0)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%23E0661B'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(125.0 18.0) rotate(-12.6)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%23F2F2EE'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(175.0 18.0) rotate(12.6)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%23D4FF1F'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(225.0 31.0) rotate(0.0)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%23E0661B'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(275.0 18.0) rotate(-12.6)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%23F2F2EE'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
  --art-bunting-au: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70'%3E%3Cpath d='M0.0 5.0 L3.1 6.7 L6.2 8.4 L9.4 10.1 L12.5 11.7 L15.6 13.4 L18.8 14.9 L21.9 16.5 L25.0 18.0 L28.1 19.4 L31.2 20.8 L34.4 22.1 L37.5 23.4 L40.6 24.5 L43.8 25.6 L46.9 26.6 L50.0 27.5 L53.1 28.3 L56.2 29.0 L59.4 29.6 L62.5 30.1 L65.6 30.5 L68.8 30.8 L71.9 30.9 L75.0 31.0 L78.1 30.9 L81.2 30.8 L84.4 30.5 L87.5 30.1 L90.6 29.6 L93.8 29.0 L96.9 28.3 L100.0 27.5 L103.1 26.6 L106.2 25.6 L109.4 24.5 L112.5 23.4 L115.6 22.1 L118.8 20.8 L121.9 19.4 L125.0 18.0 L128.1 16.5 L131.2 14.9 L134.4 13.4 L137.5 11.7 L140.6 10.1 L143.8 8.4 L146.9 6.7 L150.0 5.0 L153.1 6.7 L156.2 8.4 L159.4 10.1 L162.5 11.7 L165.6 13.4 L168.8 14.9 L171.9 16.5 L175.0 18.0 L178.1 19.4 L181.2 20.8 L184.4 22.1 L187.5 23.4 L190.6 24.5 L193.8 25.6 L196.9 26.6 L200.0 27.5 L203.1 28.3 L206.2 29.0 L209.4 29.6 L212.5 30.1 L215.6 30.5 L218.8 30.8 L221.9 30.9 L225.0 31.0 L228.1 30.9 L231.2 30.8 L234.4 30.5 L237.5 30.1 L240.6 29.6 L243.8 29.0 L246.9 28.3 L250.0 27.5 L253.1 26.6 L256.2 25.6 L259.4 24.5 L262.5 23.4 L265.6 22.1 L268.8 20.8 L271.9 19.4 L275.0 18.0 L278.1 16.5 L281.2 14.9 L284.4 13.4 L287.5 11.7 L290.6 10.1 L293.8 8.4 L296.9 6.7 L300.0 5.0' stroke='%23B9B9B0' stroke-width='2.6' fill='none'/%3E%3Cg transform='translate(25.0 18.0) rotate(12.6)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%2300843D'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(75.0 31.0) rotate(0.0)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%23FFCD00'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(125.0 18.0) rotate(-12.6)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%2300843D'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(175.0 18.0) rotate(12.6)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%23FFCD00'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(225.0 31.0) rotate(0.0)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%2300843D'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3Cg transform='translate(275.0 18.0) rotate(-12.6)'%3E%3Cpath d='M-14 0 L14 0 L0 34 Z' fill='%23FFCD00'/%3E%3Cpath d='M-14 0 L0 34 L-3 2 Z' fill='%23000000' opacity='.13'/%3E%3Cpath d='M-14 -2 h28 v3 h-28z' fill='%23B9B9B0' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
  --art-balloons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 230'%3E %3Cpath d='M50 104 C 44 140 60 164 52 228' stroke='%23B9B9B0' stroke-width='1.8' fill='none'/%3E %3Cpath d='M108 122 C 118 152 100 176 110 228' stroke='%23B9B9B0' stroke-width='1.8' fill='none'/%3E %3Cpath d='M80 136 C 76 166 86 190 80 228' stroke='%23B9B9B0' stroke-width='1.8' fill='none'/%3E %3Cg%3E%3Cellipse cx='50' cy='58' rx='40' ry='48' fill='%23D4FF1F'/%3E %3Cpath d='M43 104 h14 l-7 11z' fill='%23B8E015'/%3E %3Cellipse cx='35' cy='40' rx='10' ry='15' fill='%23FFFFFF' opacity='.4'/%3E%3C/g%3E %3Cg%3E%3Cellipse cx='110' cy='78' rx='31' ry='38' fill='%23E0661B'/%3E %3Cpath d='M104 114 h12 l-6 10z' fill='%23C2560F'/%3E %3Cellipse cx='99' cy='64' rx='8' ry='12' fill='%23FFFFFF' opacity='.35'/%3E%3C/g%3E %3Cg%3E%3Cellipse cx='80' cy='96' rx='25' ry='31' fill='%23F2F2EE'/%3E %3Cpath d='M75 125 h10 l-5 9z' fill='%23D6D6CE'/%3E %3Cellipse cx='72' cy='84' rx='7' ry='10' fill='%23FFFFFF' opacity='.7'/%3E%3C/g%3E %3C/svg%3E");
  --art-cake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 170'%3E %3Cellipse cx='80' cy='162' rx='62' ry='8' fill='%23000000' opacity='.28'/%3E %3Cpath d='M18 158 h124 v-46 h-124z' fill='%23E8DCC3'/%3E %3Cpath d='M18 112 h124 v-12 c-10 10 -18 0 -28 8 -10 8 -18 -4 -28 4 -10 8 -18 -2 -28 4 -6 4 -10 2 -12 -2z' fill='%23F2F2EE'/%3E %3Cpath d='M28 100 h104 v-34 h-104z' fill='%23D9C9A6'/%3E %3Cpath d='M28 66 h104 v-10 c-9 9 -16 0 -25 7 -9 7 -16 -4 -25 3 -9 7 -16 -2 -25 3 -5 3 -8 1 -9 -3z' fill='%23F7F7F2'/%3E %3Cg fill='%23C8252B'%3E%3Ccircle cx='46' cy='130' r='5'/%3E%3Ccircle cx='80' cy='140' r='5'/%3E%3Ccircle cx='114' cy='128' r='5'/%3E %3Ccircle cx='62' cy='84' r='4.4'/%3E%3Ccircle cx='98' cy='86' r='4.4'/%3E%3C/g%3E %3Cg%3E%3Cpath d='M54 56 v-20 h7 v20z' fill='%23D4FF1F'/%3E%3Cpath d='M57.5 36 c4 6 5 8 5 11 a5 6 0 0 1 -10 0 c0-3 1-5 5-11z' fill='%23FFB347'/%3E %3Cpath d='M77 50 v-22 h7 v22z' fill='%23E0661B'/%3E%3Cpath d='M80.5 28 c4 6 5 8 5 11 a5 6 0 0 1 -10 0 c0-3 1-5 5-11z' fill='%23FFB347'/%3E %3Cpath d='M100 56 v-20 h7 v20z' fill='%23F2F2EE'/%3E%3Cpath d='M103.5 36 c4 6 5 8 5 11 a5 6 0 0 1 -10 0 c0-3 1-5 5-11z' fill='%23FFB347'/%3E%3C/g%3E %3C/svg%3E");
  --art-hat-party: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E %3Cpath d='M50 10 L80 80 L20 80 Z' fill='%23D4FF1F'/%3E %3Cpath d='M50 10 L80 80 L56 80 Z' fill='%23B8E015'/%3E %3Cpath d='M31 44 l36 9 M24 62 l50 12' stroke='%23E0661B' stroke-width='7' fill='none'/%3E %3Ccircle cx='50' cy='11' r='11' fill='%23E0661B'/%3E%3Ccircle cx='46' cy='8' r='3.4' fill='%23FFFFFF' opacity='.5'/%3E %3C/svg%3E");
  --art-wattle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 150'%3E %3Cg stroke='%232F5D33' stroke-width='5' fill='none' stroke-linecap='round'%3E %3Cpath d='M85 148 C 80 110 70 86 46 62 M85 148 C 92 112 104 88 128 68 M85 148 C 85 116 85 96 85 72'/%3E %3C/g%3E %3Cg stroke='%232F5D33' stroke-width='3.4' fill='none' stroke-linecap='round'%3E %3Cpath d='M62 96 l-18 -10 M72 118 l-20 -8 M104 102 l18 -12 M96 124 l20 -10 M85 104 l-16 -12 M85 124 l16 -12'/%3E %3C/g%3E %3Cg fill='%23E8B300'%3E %3Ccircle cx='42' cy='58' r='10'/%3E%3Ccircle cx='58' cy='46' r='8'/%3E%3Ccircle cx='28' cy='42' r='8'/%3E %3Ccircle cx='85' cy='64' r='10'/%3E%3Ccircle cx='98' cy='50' r='8'/%3E%3Ccircle cx='68' cy='30' r='9'/%3E %3Ccircle cx='130' cy='60' r='10'/%3E%3Ccircle cx='142' cy='44' r='8'/%3E%3Ccircle cx='112' cy='34' r='8'/%3E %3C/g%3E %3Cg fill='%23FFD83D'%3E %3Ccircle cx='40' cy='55' r='6.5'/%3E%3Ccircle cx='56' cy='43' r='5'/%3E%3Ccircle cx='26' cy='39' r='5'/%3E %3Ccircle cx='83' cy='61' r='6.5'/%3E%3Ccircle cx='96' cy='47' r='5'/%3E%3Ccircle cx='66' cy='27' r='6'/%3E %3Ccircle cx='128' cy='57' r='6.5'/%3E%3Ccircle cx='140' cy='41' r='5'/%3E%3Ccircle cx='110' cy='31' r='5'/%3E %3Ccircle cx='50' cy='26' r='4.5'/%3E%3Ccircle cx='92' cy='18' r='4.5'/%3E%3Ccircle cx='120' cy='22' r='4.5'/%3E %3C/g%3E %3C/svg%3E");
  --art-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 300'%3E%3Cpath d='M130.0 259.0 L132.3 267.3 L140.2 263.9 L135.1 270.8 L142.7 274.9 L134.1 275.2 L135.6 283.7 L130.0 277.2 L124.4 283.7 L125.9 275.2 L117.3 274.9 L124.9 270.8 L119.8 263.9 L127.7 267.3 Z' fill='%23FFFFFF' opacity='.95'/%3E%3Cpath d='M206.0 138.0 L208.1 145.7 L215.4 142.5 L210.7 148.9 L217.7 152.7 L209.8 153.0 L211.2 160.8 L206.0 154.8 L200.8 160.8 L202.2 153.0 L194.3 152.7 L201.3 148.9 L196.6 142.5 L203.9 145.7 Z' fill='%23FFFFFF' opacity='.95'/%3E%3Cpath d='M130.0 14.0 L132.1 21.7 L139.4 18.5 L134.7 24.9 L141.7 28.7 L133.8 29.0 L135.2 36.8 L130.0 30.8 L124.8 36.8 L126.2 29.0 L118.3 28.7 L125.3 24.9 L120.6 18.5 L127.9 21.7 Z' fill='%23FFFFFF' opacity='.95'/%3E%3Cpath d='M54.0 118.0 L55.7 124.4 L61.8 121.8 L57.9 127.1 L63.7 130.2 L57.1 130.5 L58.3 137.0 L54.0 132.0 L49.7 137.0 L50.9 130.5 L44.3 130.2 L50.1 127.1 L46.2 121.8 L52.3 124.4 Z' fill='%23FFFFFF' opacity='.95'/%3E%3Cpath d='M150.0 183.0 L151.2 187.5 L155.5 185.6 L152.7 189.4 L156.8 191.6 L152.2 191.7 L153.0 196.3 L150.0 192.8 L147.0 196.3 L147.8 191.7 L143.2 191.6 L147.3 189.4 L144.5 185.6 L148.8 187.5 Z' fill='%23FFFFFF' opacity='.95'/%3E%3C/svg%3E");
  --art-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E %3Crect width='100' height='118' fill='%2300247D'/%3E %3Cg%3E %3Crect x='0' y='0' width='50' height='59' fill='%2300247D'/%3E %3Cpath d='M0 0 L50 59 M50 0 L0 59' stroke='%23FFFFFF' stroke-width='12'/%3E %3Cpath d='M0 0 L50 59 M50 0 L0 59' stroke='%23CF142B' stroke-width='5'/%3E %3Cpath d='M25 0 v59 M0 29.5 h50' stroke='%23FFFFFF' stroke-width='19'/%3E %3Cpath d='M25 0 v59 M0 29.5 h50' stroke='%23CF142B' stroke-width='11'/%3E %3C/g%3E %3Cpath d='M25.0 75.0 L27.1 81.6 L33.6 79.1 L29.7 84.9 L35.7 88.4 L28.8 89.0 L29.8 95.9 L25.0 90.8 L20.2 95.9 L21.2 89.0 L14.3 88.4 L20.3 84.9 L16.4 79.1 L22.9 81.6 Z' fill='%23FFFFFF'/%3E %3Cpath d='M74.0 24.5 L75.0 27.8 L78.3 26.6 L76.4 29.5 L79.4 31.2 L75.9 31.5 L76.4 35.0 L74.0 32.4 L71.6 35.0 L72.1 31.5 L68.6 31.2 L71.6 29.5 L69.7 26.6 L73.0 27.8 Z' fill='%23FFFFFF'/%3E%3Cpath d='M92.0 51.0 L93.0 54.0 L95.9 52.9 L94.1 55.5 L96.9 57.1 L93.7 57.4 L94.2 60.5 L92.0 58.2 L89.8 60.5 L90.3 57.4 L87.1 57.1 L89.9 55.5 L88.1 52.9 L91.0 54.0 Z' fill='%23FFFFFF'/%3E%3Cpath d='M74.0 81.0 L75.0 84.0 L77.9 82.9 L76.1 85.5 L78.9 87.1 L75.7 87.4 L76.2 90.5 L74.0 88.2 L71.8 90.5 L72.3 87.4 L69.1 87.1 L71.9 85.5 L70.1 82.9 L73.0 84.0 Z' fill='%23FFFFFF'/%3E%3Cpath d='M56.0 55.8 L56.8 58.3 L59.3 57.4 L57.8 59.6 L60.1 60.9 L57.4 61.2 L57.8 63.8 L56.0 61.8 L54.2 63.8 L54.6 61.2 L51.9 60.9 L54.2 59.6 L52.7 57.4 L55.2 58.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M78.0 55.2 L78.7 57.0 L80.7 57.1 L79.2 58.4 L79.6 60.3 L78.0 59.2 L76.4 60.3 L76.8 58.4 L75.3 57.1 L77.3 57.0 Z' fill='%23FFFFFF'/%3E %3C/svg%3E");
}

/* ---------- the layer ----------
   Above the page, below the cart, the menu and any message, and never in the way of a click.
   Two measurements keep every theme consistent: --edge is where the content column starts, so
   ornaments line up with the words on the page, and --orn is the one size they are all drawn to. */
.season {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  --edge: max(var(--gutter), calc(50vw - var(--max) / 2));
  --orn: clamp(78px, 8.5vw, 152px);
  --top: clamp(46px, 5vw, 74px);
  --chrome: 0px;              /* the header's height, measured by store.js */
}
.season > i { position: fixed; display: none; pointer-events: none; }
.season::before, .season::after { content: ''; position: fixed; pointer-events: none; }

/* The page layer: corners that belong to the page and scroll with it. Behind everything that
   can be read or clicked, so it can never get in the way. */
/* Behind everything on the page. body is isolated so a negative layer still sits above the
   page's own background: the webs hang in the corners of the page like scenery, and nothing
   anyone needs to read or click is ever covered by them. */
body { isolation: isolate; }
.season-page {
  position: absolute; left: 0; top: 0; width: 100%; z-index: -1; pointer-events: none;
  /* ...except the layer that hangs over the top edge, which belongs in front. */
  overflow: hidden; --chrome: 0px;
  --nook: clamp(120px, 17vw, 300px);
  --edge: max(var(--gutter), calc(50vw - var(--max) / 2));
  --orn: clamp(78px, 8.5vw, 152px);
  --top: clamp(46px, 5vw, 74px);
}

/* The garland hangs from the top of the page, just under the header, and scrolls away with it -
   the same thing a real one strung across a shopfront does. It breathes rather than swings: a
   long, shallow drift is what a hung string actually does. */
.season-page > .swag {
  display: none; position: absolute; top: var(--chrome); left: 0; right: 0; height: var(--top);
  background-repeat: repeat-x; background-position: left top; background-size: auto 100%;
  transform-origin: top center;
  animation: spx-garland 9s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
}
@keyframes spx-garland {
  from { transform: translate3d(-6px, 0, 0) rotate(-.25deg); }
  to   { transform: translate3d(6px, 2px, 0) rotate(.25deg); }
}
/* Whatever hangs at the edge of the column swings like a pendulum: quick through the middle,
   held for a moment at the ends. That easing is the difference between a swing and a tween. */
.season-page > .hang {
  display: none; position: absolute; top: var(--chrome); width: var(--orn);
  right: calc(var(--edge) + clamp(50px, 6vw, 110px));      /* clear of the banner's own controls */
  transform-origin: 70% -10px;
  animation: spx-pendulum 7.5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
}
.season-page--front { z-index: 3; height: auto !important; overflow: visible; }
.season-page > .nook { position: absolute; display: none; width: var(--nook); aspect-ratio: 1; }
.season-page > .nook--tl { top: var(--chrome); left: 0; }
.season-page > .nook--tr { top: var(--chrome); right: 0; transform: scaleX(-1); }
.season-page > .nook--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.season-page > .nook--br { bottom: 0; right: 0; transform: scale(-1); }

/* The fixed slot at the edge of the column, for the few things that should follow the reader
   down the page rather than stay with it. */
.season > .season__b {
  display: block; top: var(--chrome, 0px); right: var(--edge);
  width: var(--orn); transform-origin: 70% -10px;
  animation: spx-pendulum 7.5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
}
@keyframes spx-pendulum {
  from { transform: rotate(-2.4deg); }
  to   { transform: rotate(2.4deg); }
}

/* Props that stand on the ground belong to the page, not to the window, so they sit in the
   footer and scroll away with it - the surest way to stop decoration looking pasted on. */
.footer { position: relative; overflow: hidden; isolation: isolate; }
/* z-index -1 keeps the props above the footer's background and behind everything written on it,
   so a link, a payment badge or a line of small print is never covered by a snowman. */
[data-theme] .footer::before, [data-theme] .footer::after {
  /* Standing in the band the big wordmark occupies, flanking it, rather than up among the
     footer's links and small print. */
  content: ''; position: absolute; bottom: calc(var(--floor, 0px) * .42); z-index: -1; pointer-events: none;
  background: center bottom / contain no-repeat;
  width: var(--prop, clamp(86px, 10vw, 168px)); height: var(--prop-h, clamp(104px, 12vw, 200px));
  --edge: max(var(--gutter), calc(50vw - var(--max) / 2));
}
[data-theme] .footer::before { left: calc(var(--edge) * .42); }
[data-theme] .footer::after  { right: calc(var(--edge) * .42); }
@media (max-width: 900px) {
  [data-theme] .footer::before, [data-theme] .footer::after { --prop: 76px; --prop-h: 94px; opacity: .78; }
  [data-theme] .footer::before { left: 4px; }
  [data-theme] .footer::after { right: 4px; }
}

/* =================== Christmas =================== */
/* Red and white, on a night that has gone cold and blue. */
[data-theme="christmas"] {
  --bg: #080A0D; --bg-2: #0D1116; --surface: #12171D; --surface-2: #1A2029;
  --line: #222A34; --line-2: #313B47; --text: #DCE2E8; --muted: #93A0AD;
  --olive: #2A3B4A; --olive-2: #35495C;
}
/* Snow in three depths: fine and slow behind, flakes in the middle, and a near layer that is
   bigger and softly out of focus. Scattered tiles rather than a repeating dot, so it falls like
   weather - and there is plenty of it. */
[data-theme="christmas"] .season {
  background-image: var(--art-snow-a);
  background-size: 240px 240px; background-repeat: repeat;
  opacity: .9;
  animation: spx-snow-far 19s linear infinite;
}
[data-theme="christmas"] .season::before,
[data-theme="christmas"] .season::after { inset: 0; }
[data-theme="christmas"] .season::before {
  background-image: var(--art-snow-b); background-size: 280px 280px; background-repeat: repeat;
  opacity: .85;
  animation: spx-snow-mid 13s linear infinite;
}
[data-theme="christmas"] .season::after {
  background-image: var(--art-snow-c); background-size: 320px 320px; background-repeat: repeat;
  opacity: .7; filter: blur(1.1px);
  animation: spx-snow-near 8.5s linear infinite;
}
@keyframes spx-snow-far  { to { background-position: 50px 240px; } }
@keyframes spx-snow-mid  { to { background-position: -60px 280px; } }
@keyframes spx-snow-near { to { background-position: 80px 320px; } }

[data-theme="christmas"] .season-page > .swag { display: block; background-image: var(--art-lights-a); }
/* The second set of bulbs sits exactly on top of the first and the two cross-fade, so the
   lights alternate the way a real string does instead of dimming as one. */
[data-theme="christmas"] .season-page > .swag::after {
  content: ''; position: absolute; inset: 0;
  background: var(--art-lights-b) left top / auto 100% repeat-x;
  animation: spx-twinkle 2.6s steps(1, end) infinite;
}
@keyframes spx-twinkle { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

[data-theme="christmas"] .season-page > .hang {
  display: block; aspect-ratio: 150 / 170; background: var(--art-baubles) center top / contain no-repeat;
}
/* Lights along the top of the footer as well, so the page is dressed at both ends. */
[data-theme="christmas"] .footer {
  background-image: var(--art-lights-a);
  background-repeat: repeat-x; background-position: left top; background-size: auto clamp(40px, 4vw, 62px);
}
/* A cold haze where the snow is settling at the foot of the page. */
[data-theme="christmas"] .season__d {
  display: block; left: 0; right: 0; bottom: 0; height: 28vh;
  background: linear-gradient(to top, rgba(222, 236, 255, .14), transparent 70%);
}
[data-theme="christmas"] .footer::before { background-image: var(--art-snowman); --prop-h: clamp(118px, 13vw, 214px); }
[data-theme="christmas"] .footer::after  { background-image: var(--art-tree); }

/* Snow settles along the top of anything panel-shaped, and hangs slightly over the edge. */
[data-theme="christmas"] .card__media::before,
[data-theme="christmas"] .rider__img::before,
[data-theme="christmas"] .report::before,
[data-theme="christmas"] .rv-card::before,
[data-theme="christmas"] .disc a::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: -1px; height: 18px; z-index: 3;
  background: #F7F7F2;
  -webkit-mask-image: var(--wave); mask-image: var(--wave);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 150px 18px; mask-size: 150px 18px;
  transform: scaleY(-1);
  filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, .4));
  pointer-events: none;
}
/* Alternating the drift along the row stops the same shape repeating down the grid. */
[data-theme="christmas"] .card:nth-child(even) .card__media::before { -webkit-mask-position: 44px 0; mask-position: 44px 0; }
[data-theme="christmas"] .rider:nth-child(even) .rider__img::before { -webkit-mask-position: 70px 0; mask-position: 70px 0; }

/* A drift piled along the bottom of the banner. */
[data-theme="christmas"] .hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(26px, 3vw, 46px); z-index: 2;
  background: #F7F7F2;
  -webkit-mask-image: var(--wave); mask-image: var(--wave);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 420px 100%; mask-size: 420px 100%;
  -webkit-mask-position: 0 bottom; mask-position: 0 bottom;
  pointer-events: none;
}

/* =================== Halloween =================== */
[data-theme="halloween"] {
  --bg: #0A0708; --bg-2: #100B0A; --surface: #171010; --surface-2: #211715;
  --line: #2C1E18; --line-2: #3D2A20; --text: #E4D8CE; --muted: #9C8B7E;
  --olive: #3A2A18; --olive-2: #4A361E;
}
/* Webs strung in all four corners of the page, each one mirrored into its corner so no two are
   the same way round. They sit in the page, so they pass by as you scroll rather than riding
   along with you. Silk is light enough to move in the air of a room, so it breathes. */
[data-theme="halloween"] .season-page > .nook {
  display: block;
  background: var(--art-web) top left / contain no-repeat;
  opacity: .26;
  animation: spx-silk 12s ease-in-out infinite alternate;
}
[data-theme="halloween"] .season-page > .nook--tr { animation-delay: -3s; }
[data-theme="halloween"] .season-page > .nook--bl { animation-delay: -6s; opacity: .2; }
[data-theme="halloween"] .season-page > .nook--br { animation-delay: -9s; opacity: .2; }
@keyframes spx-silk {
  from { opacity: .2; }
  to   { opacity: .34; }
}

/* Silk slung along the top of the page, tiling without a seam. */
[data-theme="halloween"] .season-page > .swag {
  display: block; background-image: var(--art-web-swag); height: clamp(54px, 6vw, 96px);
  opacity: .5; filter: none;
}
/* And silk slung across the top of the footer. */
[data-theme="halloween"] .footer {
  background-image: var(--art-web-swag);
  background-repeat: repeat-x; background-position: left top; background-size: auto clamp(46px, 5vw, 80px);
}
/* A spider let down on its thread at the edge of the column: it drops in once, then breathes. */
[data-theme="halloween"] .season__b {
  aspect-ratio: 104 / 100; width: clamp(40px, 4.4vw, 68px);
  background: var(--art-spider) center bottom / contain no-repeat;
  margin-top: clamp(120px, 18vh, 240px);
  transform-origin: center -210px;
  animation: spx-drop 2.6s cubic-bezier(.3, 1.3, .5, 1) both, spx-pendulum 6s cubic-bezier(.45, 0, .55, 1) 2.6s infinite alternate;
}
[data-theme="halloween"] .season__b::before {
  content: ''; position: absolute; left: 50%; bottom: 92%; width: 1px; height: 230px;
  background: linear-gradient(to bottom, transparent, rgba(242, 242, 238, .45));
}
@keyframes spx-drop { from { transform: translate3d(0, -210px, 0); } to { transform: none; } }

/* Bats crossing high up: the traveller carries them sideways, the artwork rises and falls, and
   two wing positions cross-fade into a flap. */
[data-theme="halloween"] .season__c {
  display: block; top: clamp(74px, 10vh, 130px); left: 0; width: clamp(50px, 5vw, 80px); aspect-ratio: 120 / 80;
  opacity: .75;
  animation: spx-cross 23s linear infinite;
}
[data-theme="halloween"] .season__c::before,
[data-theme="halloween"] .season__c::after {
  content: ''; position: absolute; inset: 0; background: center / contain no-repeat;
  animation: spx-bob 6.5s ease-in-out infinite alternate;
}
[data-theme="halloween"] .season__c::before { background-image: var(--art-bat-up); }
[data-theme="halloween"] .season__c::after {
  background-image: var(--art-bat-down);
  animation: spx-bob 6.5s ease-in-out infinite alternate, spx-flap .42s steps(1, end) infinite;
}
@keyframes spx-cross { from { transform: translate3d(-18vw, 0, 0) scale(.7); } to { transform: translate3d(112vw, 0, 0) scale(1); } }
@keyframes spx-bob { from { transform: translate3d(0, -26px, 0); } to { transform: translate3d(0, 26px, 0); } }
@keyframes spx-flap { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* Fog pooling at the foot of the page, drifting slowly across. */
[data-theme="halloween"] .season__d {
  display: block; left: -20%; right: -20%; bottom: -4vh; height: 34vh;
  background:
    radial-gradient(60% 100% at 20% 100%, rgba(226, 112, 26, .13), transparent 70%),
    radial-gradient(50% 100% at 72% 100%, rgba(168, 150, 190, .1), transparent 70%),
    linear-gradient(to top, rgba(140, 140, 150, .08), transparent 75%);
  animation: spx-fog 34s ease-in-out infinite alternate;
}
@keyframes spx-fog { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, -1.5%, 0); } }

/* A web caught in the corner of the panels, turned a different way further down the grid so the
   same shape never shows up twice side by side. */
[data-theme="halloween"] .card__media::before,
[data-theme="halloween"] .rider__img::before,
[data-theme="halloween"] .report::before,
[data-theme="halloween"] .rv-card::before {
  content: ''; position: absolute; top: 0; right: 0; width: 84px; height: 84px; z-index: 1;
  background: var(--art-web-sm) top left / contain no-repeat;
  transform: scaleX(-1);                          /* the badges live in the other corner */
  opacity: .3; pointer-events: none;
}
[data-theme="halloween"] .card:nth-child(even) .card__media::before,
[data-theme="halloween"] .rider:nth-child(even) .rider__img::before {
  right: auto; left: 0; transform: none;
}
/* The page tiles carry their own layer for this: both of their own are already spoken for by
   the glare and the snow. It is clipped to the tile's slanted shape, so the blood runs inside
   the panel rather than over its edge. */
.tile-drip { display: none; }
.motion[data-theme="halloween"] .tile-drip {
  display: block; position: absolute; left: -2%; right: -2%; top: -1px;
  height: clamp(30px, 3.4vw, 54px); z-index: 2; pointer-events: none;
  background: var(--art-drips) left top / 260px 100% repeat-x;
  transform: scaleY(0); transform-origin: top center;
  transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}
.motion[data-theme="halloween"] .disc a:is(:hover, .is-held) .tile-drip {
  transform: scaleY(1);
  transition: transform .75s cubic-bezier(.22, .9, .3, 1);
}

/* Hover anything and blood runs down from its top edge - quick on the way down, and it drains
   back when you leave. Transform only, so it costs nothing even across a grid of cards. */
[data-theme="halloween"] { --pour-giant: #8A1210; }
.motion[data-theme="halloween"] .card::after,
.motion[data-theme="halloween"] .rider::after,
.motion[data-theme="halloween"] .report::after,
.motion[data-theme="halloween"] .rv-card::after,
.motion[data-theme="halloween"] .perks > div::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: clamp(26px, 3vw, 44px);
  z-index: 4; pointer-events: none;
  background: var(--art-drips) left top / 260px 100% repeat-x;
  transform: scaleY(0); transform-origin: top center;
  transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}
.motion[data-theme="halloween"] .card:is(:hover, .is-held)::after,
.motion[data-theme="halloween"] .rider:is(:hover, .is-held)::after,
.motion[data-theme="halloween"] .report:is(:hover, .is-held)::after,
.motion[data-theme="halloween"] .rv-card:is(:hover, .is-held)::after,
.motion[data-theme="halloween"] .perks > div:is(:hover, .is-held)::after {
  transform: scaleY(1);
  transition: transform .75s cubic-bezier(.22, .9, .3, 1);
}
/* A button is small, so it gets a thinner run of it over the wave it already fills with. */
.motion[data-theme="halloween"] .btn { --pour: #8A1210; }
.motion[data-theme="halloween"] .btn--ghost,
.motion[data-theme="halloween"] .btn--light,
.motion[data-theme="halloween"] .served .btn { --pour: #A3161A; }

/* Lanterns lit on the ground, each one guttering to its own rhythm. */
[data-theme="halloween"] .footer::before {
  background-image: var(--art-lantern); --prop-h: clamp(90px, 10vw, 160px);
  filter: drop-shadow(0 0 16px rgba(240, 134, 34, .5)) drop-shadow(0 0 40px rgba(226, 112, 26, .28));
  animation: spx-flicker 3.1s ease-in-out infinite;
}
[data-theme="halloween"] .footer::after {
  background-image: var(--art-candle); --prop: clamp(42px, 5vw, 78px); --prop-h: clamp(104px, 12vw, 190px);
  filter: drop-shadow(0 -6px 18px rgba(255, 179, 71, .45));
  animation: spx-flicker 2.3s ease-in-out infinite reverse;
}
@keyframes spx-flicker {
  0%, 100% { opacity: 1; }
  38% { opacity: .88; } 44% { opacity: 1; }
  66% { opacity: .8; }  72% { opacity: .97; }
  86% { opacity: .9; }
}
/* Blood running down into the banner, drawn in the brand's own cut. */
[data-theme="halloween"] .hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: clamp(38px, 4.4vw, 70px); z-index: 2;
  background: var(--art-drips) left top / 400px 100% repeat-x;
  pointer-events: none;
}
/* And a drop that has run further than the rest, falling every so often. */
[data-theme="halloween"] .hero::before {
  content: ''; position: absolute; left: 22%; top: 0; width: 14px; height: 24px; z-index: 3;
  background: var(--art-drop) center / contain no-repeat;
  animation: spx-bleed 9s cubic-bezier(.55, 0, .9, .5) infinite;
}
@keyframes spx-bleed {
  0%, 62% { transform: translate3d(0, 34px, 0) scaleY(.6); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: translate3d(0, 46vh, 0) scaleY(1.6); opacity: 0; }
}

/* =================== Easter =================== */
[data-theme="easter"] {
  --bg: #0B0A0C; --bg-2: #121016; --surface: #18151D; --surface-2: #211D29;
  --line: #2A2434; --line-2: #3A3246; --text: #E4DEE8; --muted: #A79DB2;
  --olive: #3C5A4A; --olive-2: #4C6E5A;
}
/* Blossom coming down on the breeze: lighter and slower than snow, and it drifts sideways. */
[data-theme="easter"] .season::before,
[data-theme="easter"] .season::after { inset: 0; }
[data-theme="easter"] .season::before {
  background-image: var(--art-petals-a); background-size: 280px 280px; background-repeat: repeat;
  opacity: .75;
  animation: spx-petal-a 21s linear infinite;
}
[data-theme="easter"] .season::after {
  background-image: var(--art-petals-b); background-size: 420px 420px; background-repeat: repeat;
  opacity: .5; filter: blur(.7px);
  animation: spx-petal-b 14s linear infinite;
}
@keyframes spx-petal-a { to { background-position: 90px 280px; } }
@keyframes spx-petal-b { to { background-position: -120px 400px; } }
[data-theme="easter"] .season-page > .swag { display: block; background-image: var(--art-egg-bunting); }
[data-theme="easter"] .footer {
  background-image: var(--art-egg-bunting);
  background-repeat: repeat-x; background-position: left top; background-size: auto clamp(40px, 4vw, 60px);
}
[data-theme="easter"] .season__d {
  display: block; left: 0; right: 0; top: 0; height: 36vh;
  background: linear-gradient(to bottom, rgba(240, 195, 214, .09), transparent 70%);
}
[data-theme="easter"] .footer::before { background-image: var(--art-eggs); --prop: clamp(110px, 13vw, 210px); --prop-h: clamp(80px, 9vw, 150px); }
[data-theme="easter"] .footer::after  { background-image: var(--art-eggs); --prop: clamp(110px, 13vw, 210px); --prop-h: clamp(80px, 9vw, 150px); transform: scaleX(-1); opacity: .85; }

/* =================== Birthday =================== */
[data-theme="birthday"] {
  --hot: #FFC53D;
  --bg: #0B0906; --bg-2: #120F0A; --surface: #19150F; --surface-2: #231D14;
  --line: #2E2619; --line-2: #413522; --text: #E8E0D2; --muted: #A89B84;
}
/* Confetti on three depths: small and slow behind, bigger and faster in front, each tile holding
   a few pieces so it scatters across the page rather than covering it. */
[data-theme="birthday"] .season {
  background-image: var(--art-confetti-a);
  background-size: 300px 300px; background-repeat: repeat;
  opacity: .75;
  animation: spx-confetti 17s linear infinite;
}
[data-theme="birthday"] .season::before,
[data-theme="birthday"] .season::after { inset: 0; }
[data-theme="birthday"] .season::before {
  background-image: var(--art-confetti-b); background-size: 380px 380px; background-repeat: repeat;
  opacity: .6; animation: spx-confetti-b 12s linear infinite;
}
[data-theme="birthday"] .season::after {
  background-image: var(--art-confetti-c); background-size: 470px 470px; background-repeat: repeat;
  opacity: .5; filter: blur(.6px); animation: spx-confetti-c 8.5s linear infinite;
}
@keyframes spx-confetti   { to { background-position: 70px 300px; } }
@keyframes spx-confetti-b { to { background-position: -60px 380px; } }
@keyframes spx-confetti-c { to { background-position: 40px 470px; } }
[data-theme="birthday"] .season-page > .swag { display: block; background-image: var(--art-bunting); }
[data-theme="birthday"] .footer {
  background-image: var(--art-bunting);
  background-repeat: repeat-x; background-position: left top; background-size: auto clamp(42px, 4.4vw, 64px);
}
/* Balloons that have got away, bobbing at the edge of the column. */
[data-theme="birthday"] .season__b {
  top: auto; bottom: clamp(24px, 6vh, 90px); aspect-ratio: 160 / 230;
  width: clamp(84px, 9vw, 170px);
  background: var(--art-balloons) center bottom / contain no-repeat;
  transform-origin: 50% 110%;
  animation: spx-float 8s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes spx-float {
  from { transform: translate3d(0, 10px, 0) rotate(-2.2deg); }
  to   { transform: translate3d(-8px, -14px, 0) rotate(2.2deg); }
}
[data-theme="birthday"] .footer::before { background-image: var(--art-cake); --prop: clamp(96px, 11vw, 180px); --prop-h: clamp(102px, 12vw, 190px); }
[data-theme="birthday"] .footer::after  { background-image: var(--art-balloons); --prop-h: clamp(120px, 14vw, 230px); animation: spx-float 9s cubic-bezier(.45,0,.55,1) infinite alternate; }

/* =================== Australia Day =================== */
[data-theme="australia"] {
  --hot: #FFCD00;
  --bg: #070C08; --bg-2: #0C120C; --surface: #111811; --surface-2: #182117;
  --line: #1F2A1D; --line-2: #2C3B28; --text: #DFE6DA; --muted: #93A28E;
  --olive: #00843D; --olive-2: #0A9E4C;
}
/* Wattle on the wind, and the heat still coming off the day. */
[data-theme="australia"] .season::before { inset: 0;
  background-image: var(--art-wattle-fall); background-size: 340px 340px; background-repeat: repeat;
  opacity: .4;
  animation: spx-petal-a 24s linear infinite;
}
[data-theme="australia"] .season::after {
  left: 0; right: 0; top: 0; height: 40vh;
  background: linear-gradient(to bottom, rgba(255, 205, 0, .08), transparent 72%);
}
[data-theme="australia"] .season-page > .swag { display: block; background-image: var(--art-bunting-au); }
[data-theme="australia"] .footer {
  background-image: var(--art-bunting-au);
  background-repeat: repeat-x; background-position: left top; background-size: auto clamp(42px, 4.4vw, 64px);
}
/* The Southern Cross, set high in the page the way a constellation sits in the sky. */
[data-theme="australia"] .season-page > .hang {
  display: block; margin-top: clamp(70px, 11vh, 150px); aspect-ratio: 260 / 300;
  width: clamp(70px, 7vw, 128px);
  background: var(--art-cross) center / contain no-repeat;
  transform-origin: center; animation: spx-starlight 5.5s ease-in-out infinite alternate;
  filter: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5));
}
@keyframes spx-starlight { from { opacity: .55; } to { opacity: 1; } }
[data-theme="australia"] .footer::before,
[data-theme="australia"] .footer::after {
  background-image: var(--art-cross); background-position: center;
  --prop: clamp(66px, 7vw, 120px); --prop-h: clamp(76px, 8vw, 140px);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .45));
  animation: spx-starlight 6s ease-in-out infinite alternate;
}
[data-theme="australia"] .footer::after { animation-delay: -3s; opacity: .85; }

/* ---------- the ghost wears the season ----------
   store.js measures where the ghost is actually drawn inside its picture and leaves the answer
   here as --gx/--gy/--gw/--gh (left, top, width, height, as fractions of the frame). The hat is
   then placed against the ghost itself rather than the frame, so it lands on the head whether
   the mark fills its file, sits inset in a square, or is artwork the client uploaded later -
   and at any size, because every figure below is a fraction. */
.logo { position: relative; }
.logo__head, .soon__head { --gx: 0; --gy: 0; --gw: 1; --gh: 1; }
[data-theme] .logo__head::after,
[data-theme] .soon__head::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  background: center bottom / contain no-repeat;
  left:   calc((var(--gx) + var(--hat-x) * var(--gw)) * 100%);
  top:    calc((var(--gy) + var(--hat-y) * var(--gh)) * 100%);
  width:  calc(var(--hat-w) * var(--gw) * 100%);
  height: calc(var(--hat-h) * var(--gh) * 100%);
  transform: rotate(var(--hat-r, -8deg));
  transform-origin: 60% 100%;
}
[data-theme="christmas"] .logo__head, [data-theme="christmas"] .soon__head {
  --hat-x: 0.232; --hat-y: -0.022; --hat-w: 0.651; --hat-h: 0.282; --hat-r: -6deg;
}
[data-theme="halloween"] .logo__head, [data-theme="halloween"] .soon__head {
  --hat-x: 0.128; --hat-y: -0.338; --hat-w: 0.855; --hat-h: 0.678; --hat-r: -4deg;
}
[data-theme="easter"] .logo__head, [data-theme="easter"] .soon__head {
  --hat-x: 0.094; --hat-y: -0.449; --hat-w: 0.902; --hat-h: 0.623; --hat-r: 0deg;
}
[data-theme="birthday"] .logo__head, [data-theme="birthday"] .soon__head {
  --hat-x: 0.133; --hat-y: -0.288; --hat-w: 0.843; --hat-h: 0.561; --hat-r: -10deg;
}
/* On Australia Day the ghost is the flag. Rather than tint the artwork - which would leave the
   black square it is drawn on showing through - the mark is repainted: the flag is cut to the
   ghost's outline using the cut-out version of the same artwork, and the picture underneath
   steps aside. Sharp at any size, no box, no blend. */
[data-theme="australia"] .logo__head, [data-theme="australia"] .soon__head {
  --hat-x: 0; --hat-y: 0; --hat-w: 1; --hat-h: 1; --hat-r: 0deg;
}
[data-theme="australia"] .logo__head img,
[data-theme="australia"] .soon__head img { visibility: hidden; }
[data-theme="australia"] .logo__head::after,
[data-theme="australia"] .soon__head::after {
  left: 0; top: 0; width: 100%; height: 100%;          /* the flag takes the whole frame */
  background-size: cover; background-position: center;
  -webkit-mask-image: var(--ghost-clear); mask-image: var(--ghost-clear);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
[data-theme="christmas"] .logo__head::after, [data-theme="christmas"] .soon__head::after { background-image: var(--art-hat-santa); }
[data-theme="halloween"] .logo__head::after, [data-theme="halloween"] .soon__head::after { background-image: var(--art-hat-witch); }
[data-theme="easter"]    .logo__head::after, [data-theme="easter"] .soon__head::after    { background-image: var(--art-hat-ears); }
[data-theme="birthday"]  .logo__head::after, [data-theme="birthday"] .soon__head::after  { background-image: var(--art-hat-party); }
[data-theme="australia"] .logo__head::after, [data-theme="australia"] .soon__head::after { background-image: var(--art-flag); }

/* ---------- the season in the writing ----------
   store.js swaps a few lines of copy for the season. These give those lines the right look:
   Halloween's headline letters are cut from the brand's gothic face, Christmas underlines them
   in candy stripe, and the rest take the season's own colour. */
[data-theme="halloween"] .hero .stamp { font-family: var(--goth); letter-spacing: .02em; font-size: 24px; }
[data-theme="christmas"] .hero .stamp { color: #F7F7F2; border-color: #F7F7F2; background: rgba(200, 37, 43, .9); }
[data-theme="christmas"] .section-head h2::after {
  content: ''; display: block; height: 5px; margin-top: 10px; border-radius: 3px;
  background: repeating-linear-gradient(115deg, #C8252B 0 12px, #F7F7F2 12px 24px);
  opacity: .9;
}
[data-theme="australia"] .section-head h2::after {
  content: ''; display: block; height: 5px; margin-top: 10px; border-radius: 3px;
  background: repeating-linear-gradient(115deg, #00843D 0 12px, #FFCD00 12px 24px);
  opacity: .9;
}
[data-theme="easter"] .section-head h2::after {
  content: ''; display: block; height: 5px; margin-top: 10px; border-radius: 3px;
  background: repeating-linear-gradient(115deg, #F0C3D6 0 10px, #8FD3C7 10px 20px, #F7E07A 20px 30px);
  opacity: .85;
}

/* ---------- smaller screens ----------
   A phone has no room for props at the edges of the column: the garland and the falling
   weather carry the season, and the rest steps back. */
@media (max-width: 760px) {
  .season, .season-page { --orn: clamp(62px, 16vw, 96px); --top: 44px; --nook: clamp(96px, 34vw, 150px); }
  .season__b { opacity: .85; }
  /* No room beside the column on a phone, and the banner's own controls live in that corner. */
  [data-theme] .season-page > .hang { display: none; }
  [data-theme="halloween"] .card__media::before, [data-theme="halloween"] .rider__img::before,
  [data-theme="halloween"] .report::before, [data-theme="halloween"] .rv-card::before { width: 56px; height: 56px; }
  [data-theme="birthday"] .season__b, [data-theme="australia"] .season__b { display: none; }
}

/* ---------- big screens ----------
   The layout is capped at --max so lines of text stay readable. On very wide monitors the cap
   is loosened a little, the gutters open up and the grids show another column, so the page
   fills the screen instead of sitting in a narrow strip. */
@media (min-width: 1700px) {
  :root { --max: 1640px; --gutter: clamp(48px, 5vw, 96px); }
  .marquee__track span { font-size: 36px; }
  .rail { grid-auto-columns: calc((100% - 56px) / 5); }
}
@media (min-width: 2200px) {
  :root { --max: 1900px; }
  body { font-size: 17px; }
  .products { grid-template-columns: repeat(5, 1fr); }
  .rail { grid-auto-columns: calc((100% - 70px) / 6); }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 20px; font-size: 14px; }
  .vet-chip { display: none; }
  .products { grid-template-columns: repeat(3, 1fr); }
  .rail { grid-auto-columns: calc((100% - 28px) / 3); }
  .ig { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .header__row { grid-template-columns: auto 1fr auto; gap: 8px; height: 66px; }
  .header__row .logo { justify-self: center; }
  .logo__word { height: 30px; }
  .logo__text { font-size: 30px; }
  .logo__ghost { width: 26px; height: 30px; }
  .disc { grid-template-columns: repeat(2, 1fr); height: auto; }
  .disc a, .disc a:first-child, .disc a:last-child { clip-path: none; margin: 0; min-height: 200px; }
  .disc__label, .disc a:first-child .disc__label { left: 16px; right: 16px; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .event__grid { grid-template-columns: 1fr; }
  .header .logo__sub { white-space: nowrap; font-size: 8.5px; letter-spacing: .1em; }
  .icon-btn.hide-sm { display: none; }
  /* Phone/tablet banner: exactly one screen tall under the header (103px), photo up top, words anchored
     at the bottom over a dark fade so they stay readable on any photo. */
  .hero { min-height: calc(100vh - 103px); min-height: calc(100svh - 103px); }
  .hero::before { background: linear-gradient(0deg, rgba(14,16,12,.97) 0%, rgba(14,16,12,.86) 34%, rgba(14,16,12,.28) 66%, rgba(14,16,12,.4) 100%); }
  .hero__img img { object-position: 72% 35%; }
  .hero__inner { padding-top: 96px; padding-bottom: 6px; }
  .hero .stamp, .hero__stripes { display: none; }
  .hero .corners { display: none; }
  .hero__grid { margin-bottom: 14px; }
  .hero__grid span:last-child { display: none; }
  .hero__bar { margin-top: 26px; }
  /* four promises: 2 × 2 */
  .hero__bar[data-count="4"] { grid-template-columns: 1fr 1fr; }
  .hero__bar[data-count="4"] div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero__bar[data-count="4"] div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .section-head { grid-template-columns: 1fr; }
  .cats { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .cat:first-child { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
  .products, .products--shop { grid-template-columns: repeat(2, 1fr); gap: 30px 10px; }
  .rail { grid-auto-columns: 72%; }
  .rail-ctrls { display: none; }
  .field, .pdp { grid-template-columns: 1fr; }
  .field__imgs { min-height: 460px; }
  .reports { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .shop { grid-template-columns: 1fr; gap: 0; }
  .filters { display: none; position: static; }
  .filters.open { display: block; margin-bottom: 24px; }
  .filter-toggle { display: inline-flex; }
  .pdp__info { position: static; }
  .quick { display: none; }
  .card__wish { opacity: 1; }
}
@media (max-width: 540px) {
  .hero h1 { font-size: clamp(54px, 17vw, 72px); margin-bottom: 16px; }
  .hero p { font-size: 16px; line-height: 1.5; margin-bottom: 22px; }
  .hero__ctas { gap: 10px; flex-wrap: nowrap; }
  .hero__ctas .btn { flex: 1; height: 50px; padding: 0 10px; font-size: 14px; letter-spacing: .1em; white-space: nowrap; }
  /* promises: one slim, even row of short labels (numbers dropped to save space) */
  .hero__bar { margin-top: 22px; border-bottom: 1px solid var(--line-2); }
  .hero__bar div { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px;
    padding: 8px 6px; font-size: 12px; line-height: 1.2; letter-spacing: .05em; }
  .hero__bar div + div { padding-left: 6px; }
  .hero__bar small { display: none; }
  .team { grid-template-columns: 1fr; }
  .clock__row b { font-size: 40px; }
  .ig { grid-template-columns: repeat(2, 1fr); }
  .card__row { flex-direction: column; gap: 4px; }
  .card__name { font-size: 17px; }
  .card__sku span:last-child { display: none; }
  .newsletter form { flex-direction: column; }
  .newsletter input { height: 54px; }
  .size-row { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- page header with the page's hero photo ---------- */
.page-head { position: relative; overflow: hidden; isolation: isolate; }
.page-head__bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: 0; transition: opacity .4s; }
.page-head__bg.on { opacity: 1; }
.page-head__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.95) 30%, rgba(10,10,10,.55)); }
.page-head--hero { padding: 90px 0 60px; }
.page-head .page-desc { margin: 14px 0 0; max-width: 620px; color: var(--text); white-space: pre-line; }

/* ---------- product gallery thumbnails ---------- */
.pdp__thumbs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pdp__thumbs button { aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; background: var(--surface); padding: 0; }
.pdp__thumbs button.on { border-color: var(--hot); }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp__desc { margin: 22px 0 0; white-space: pre-line; }
.preview-flag { position: fixed; left: 12px; bottom: 12px; z-index: 95; background: var(--hot); color: var(--ink); font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; }

/* =========================================================
   THE WOMEN'S STORE
   The second storefront at /womens/. It is the same site -- same layout, same components, same
   type, same voice -- wearing a different palette. Everything below is token overrides plus the
   handful of places where store.css assumes a black page, which is why there is no second
   stylesheet and no forked markup to keep in step.

   Which way round it reads is the admin's choice, saved per store:
     data-look="light"  white paper, pink and blue          (the default)
     data-look="dark"   midnight blue, same pinks and blues
   The accent itself comes from Admin -> Customise like any other, so these are only the
   surfaces the accent sits on.
   ========================================================= */
:root[data-store="womens"][data-look="light"] {
  --bg: #FFFFFF;
  --bg-2: #F3F7FC;             /* cool white, so sections separate without a grey */
  --surface: #FFFFFF;
  --surface-2: #EFF5FC;
  --line: #E4EBF4;
  --line-2: #CFDCEA;
  /* --bone is the site's "brightest type" token, so on white it has to become the darkest. */
  --bone: #16202E;
  --text: #45505F;
  --muted: #8593A5;
  --paper: #16202E;
  --ink: #16202E;              /* type that sits on the accent */
  --red: #E8566E;
  --ok: #5FC3A3;
  --olive: #A6CCF2;            /* powder blue, the second accent */
  --olive-2: #7FB3E8;
}
:root[data-store="womens"][data-look="dark"] {
  --bg: #0B1220;               /* midnight blue rather than black */
  --bg-2: #101A2B;
  --surface: #152133;
  --surface-2: #1D2B41;
  --line: #243349;
  --line-2: #344761;
  --bone: #F4F8FF;
  --text: #D2DCEA;
  --muted: #8593A8;
  --paper: #F4F8FF;
  --ink: #0B1220;
  --red: #FF6B84;
  --ok: #7FD9BC;
  --olive: #9FC7F2;
  --olive-2: #74A8E4;
}

/* The hero scrim above is a near-black wash built for a black page. On white it reads as a dirty
   rectangle, so the light look turns the same gradient white: the photo becomes a pale wash the
   headline can sit on, instead of a dark block dropped into a bright page. */
:root[data-store="womens"][data-look="light"] .hero::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.84) 36%, rgba(255,255,255,.26) 72%),
    linear-gradient(0deg, var(--bg) 0%, rgba(255,255,255,.12) 40%);
}
:root[data-store="womens"][data-look="light"] .hero__img img,
:root[data-store="womens"][data-look="light"] .hero__img video { filter: saturate(.42) contrast(.88) brightness(1.5); }
:root[data-store="womens"][data-look="dark"] .hero::before {
  background:
    linear-gradient(90deg, rgba(11,18,32,.94) 0%, rgba(11,18,32,.72) 38%, rgba(11,18,32,.12) 70%),
    linear-gradient(0deg, rgba(11,18,32,.96) 0%, transparent 35%);
}
:root[data-store="womens"][data-look="dark"] .hero__img img,
:root[data-store="womens"][data-look="dark"] .hero__img video { filter: saturate(.7) contrast(1.02) brightness(.95); }

/* The client's brand artwork is white on black and the header drops the black with a screen
   blend. On a white page that blend erases the mark entirely, so the light look inverts the
   artwork to black and multiplies instead: same file, same shape, readable on paper. */
:root[data-store="womens"][data-look="light"] .logo img { mix-blend-mode: multiply; filter: invert(1); }
:root[data-store="womens"][data-look="light"] .is-loading::after { mix-blend-mode: multiply; filter: invert(1); }

/* Cards lift off paper with a soft shadow rather than a hard border. */
:root[data-store="womens"][data-look="light"] .card,
:root[data-store="womens"][data-look="light"] .pcard { box-shadow: 0 2px 18px rgba(30, 60, 100, .08); }

/* A handful of panels in the main design are a hard-coded near-black rather than a token,
   because the original site is never anything but dark. On the women's light look they would
   read as holes punched in a white page, so each one is restated here in the pastel palette.
   The dark look needs none of this -- it is dark already. */
:root[data-store="womens"][data-look="light"] {
  /* The footer is its own block of colour at the bottom of the page. */
  & .footer { background: var(--bg-2); color: var(--muted); border-top: 1px solid var(--line); }
  /* Page tiles: white type over a dark wash becomes dark type over a light one, so the
     photograph still reads and the page name on top of it is legible. */
  & .disc a::after { background: linear-gradient(0deg, rgba(255,255,255,.92), transparent 55%); }
  & .disc img { filter: grayscale(.5) brightness(1.08); }
  & .disc a:is(:hover, .is-held) img { filter: grayscale(0) brightness(1.02); }
  /* The shop page's header photo sits behind dark type on this side. */
  & .page-head__bg::after { background: linear-gradient(90deg, rgba(255,255,255,.95) 30%, rgba(255,255,255,.6)); }
  /* The event countdown panel. */
  & .clock { background: rgba(255,255,255,.85); }
  /* The newsletter block is a photograph darkened to almost nothing so white type can sit on
     it. Here the photograph is lifted instead and the type on it is the dark ink. */
  & .newsletter__bg img { filter: brightness(1.35) saturate(.45) contrast(.9); }
  & .newsletter::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(255,255,255,.9), rgba(255,255,255,.78));
  }
  & .newsletter form { background: rgba(255,255,255,.85); }
  /* Product cards: the quick-add panel and the wishlist dot are dark chips by default. */
  & .quick { background: rgba(255,255,255,.96); }
  & .card__wish { background: rgba(255,255,255,.8); color: var(--bone); }
  /* The homepage category strip uses the same bottom-up wash as the page tiles. */
  & .cat::after { background: linear-gradient(0deg, rgba(255,255,255,.92), transparent 55%); }
  /* The hero's rotated "rider tested" stamp. */
  & .hero .stamp { background: rgba(255,255,255,.8); }
}

/* ---------------------------------------------------------
   THE BRAND MARK ON THE WOMEN'S STORE
   The same pink-to-blue gradient as the door, poured through the client's own artwork. The
   shape is masked from the transparent files, so this is the real mark and not a redraw. Both
   places it appears get it: the header (and the mobile menu's copy of it) and the giant
   wordmark across the footer.
   --------------------------------------------------------- */
:root[data-store="womens"] { --mark-a: #FFA6C4; --mark-b: #A6CCF2; }

.gradmark {
  display: block; flex-shrink: 0;
  background: linear-gradient(104deg, var(--mark-a) 0%, var(--mark-b) 100%);
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}
/* Same box as the artwork it replaces, so the header does not shift between the two stores. */
.logo__ghost.gradmark { width: 34px; height: 40px; }
.logo__word.gradmark  { height: 40px; width: 75px; }      /* the wordmark is 900 x 480 */
.footer .logo__word.gradmark { height: 64px; width: 120px; }

/* The giant footer wordmark is already a mask over a flat colour, so it only needs the fill. */
:root[data-store="womens"] .footer__giant {
  background: linear-gradient(104deg, var(--mark-a) 0%, var(--mark-b) 100%);
}
/* The liquid wave that washes across the giant mark on hover is tuned for the lime; on the
   pastel gradient it muddies it, so it is softened rather than removed. */
:root[data-store="womens"] .giant__liquid { opacity: .5; }

/* ---------------------------------------------------------
   THE DOOR between the two shops. Fixed bottom right on every storefront page.
   Its colours are fixed rather than following the page, because the button has to look the same
   from either side -- it is the one thing both stores share. --door-* is set by which store it
   POINTS AT, so the ghost you see is always the shop you are about to walk into.
   --------------------------------------------------------- */
/* --door-accent is the DESTINATION store's own accent, set on the element by storeDoor() from
   what the database reports. The values here are only the fallback for a database that cannot
   say yet. The two stops are a lighter and a deeper turn of that one colour, leaning whichever
   way keeps the ghost off its own background: light on the black orb, deep on the white one.
   A charcoal store therefore gives a charcoal door, which is the whole point. */
.door[data-to="womens"] {
  --door-accent: #FFA6C4; --door-face: #FFFFFF; --door-ink: #16202E;
  --door-a: var(--door-accent);
  --door-b: color-mix(in srgb, var(--door-accent) 62%, #10161F);
}
.door[data-to="main"] {
  --door-accent: #D4FF1F; --door-face: #0A0A0A; --door-ink: #F2F2EE;
  --door-a: color-mix(in srgb, var(--door-accent) 34%, #FFFFFF);
  --door-b: var(--door-accent);
}
.door { --door-ring: var(--door-accent); }

.door {
  position: fixed; right: clamp(14px, 3vw, 30px); bottom: clamp(14px, 3vw, 30px);
  z-index: 60; display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--door-ink);
  font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.door__label {
  background: var(--door-face); border: 1px solid color-mix(in srgb, var(--door-ring) 45%, transparent);
  padding: 10px 14px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateX(10px) scale(.96); transform-origin: right center;
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.door:is(:hover, :focus-visible) .door__label { opacity: 1; transform: none; }

.door__orb {
  position: relative; width: clamp(58px, 9vw, 74px); aspect-ratio: 1;
  display: grid; place-items: center; flex: none;
  animation: door-float 4.4s var(--ease) infinite;
}
/* The halo breathes out of step with the float, so the two never line up into a single
   mechanical pulse. */
.door__orb::before {
  content: ''; position: absolute; inset: -16%;
  background: radial-gradient(circle at 50% 55%,
    color-mix(in srgb, var(--door-a) 52%, transparent) 0%,
    color-mix(in srgb, var(--door-b) 42%, transparent) 46%, transparent 72%);
  filter: blur(7px); animation: door-glow 3.1s ease-in-out infinite;
}
.door__orb::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--door-face) 90%, var(--door-a)),
    color-mix(in srgb, var(--door-face) 76%, var(--door-b)));
  border: 1px solid color-mix(in srgb, var(--door-ring) 55%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
/* The ghost is the brand's own artwork used as a mask, so it is the real silhouette taking a
   colour -- never a redraw. --mark is set on the element by storeDoor(). */
.door__ghost {
  position: relative; z-index: 2; width: 54%; aspect-ratio: 1;
  background: linear-gradient(165deg, var(--door-a) 0%, var(--door-b) 100%);
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
  filter: drop-shadow(0 2px 5px rgba(20, 40, 80, .28));
  animation: door-sway 5.7s ease-in-out infinite;
}
.door:is(:hover, :focus-visible) .door__orb { animation-play-state: paused; transform: scale(1.07); transition: transform .3s var(--ease); }

@keyframes door-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes door-sway  { 0%, 100% { transform: rotate(-2.2deg) } 50% { transform: rotate(2.2deg) } }
@keyframes door-glow  { 0%, 100% { opacity: .55; transform: scale(.94) } 50% { opacity: .95; transform: scale(1.06) } }

/* Anyone who has asked their system to stop animation gets a still ghost, not a bobbing one. */
@media (prefers-reduced-motion: reduce) {
  .door__orb, .door__ghost, .door__orb::before { animation: none; }
}
/* Out of the way of the cart drawer and the mobile bar. */
.drawer.open ~ .door, body:has(.drawer.open) .door { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* ---------------------------------------------------------
   THE WOMEN'S TYPEFACE
   The pairing itself is set as --stencil / --cond / --sans by applyFont() in store.js, so most
   of the site needs nothing here: it already reads those. What does need saying is how a
   JOINED-UP face has to be treated, because the site sets every headline in capitals with the
   lines almost touching — which turns a script into an unreadable scribble.
   --------------------------------------------------------- */
:root[data-font-kind="script"] {
  & .display, & .hero h1, & .footer h2 {
    font-family: var(--script-face); /* the script itself, only where it is big enough to read */
    text-transform: none;            /* capitals destroy a joined-up face */
    letter-spacing: 0;               /* the letters already join */
    line-height: 1.04;               /* room for the long descenders */
    font-weight: 400;                /* scripts have one weight; faking bold smears them */
  }
  /* Scripts read small for their size, so the headline is given back some of it. */
  & .hero h1 { font-size: clamp(60px, 10vw, 150px); }
  & .display em { font-style: normal; }
}
/* The serif and rounded pairings keep the uppercase headline but want a touch more air between
   the letters than a stencil face, which is drawn tight on purpose. */
:root[data-font-kind="serif"] .display,
:root[data-font-kind="sans"] .display { letter-spacing: .02em; line-height: .96; }

/* The tiny technical labels stay in the mono face whatever is chosen: they are code-like by
   design (SEC. 01 //, SPX-H-001) and a decorative face makes them unreadable at 11px. */

/* A size that has sold out: struck through and unclickable, but still shown. Hiding it entirely
   loses useful information — people want to know the size exists and may come back. */
.size-row button.out {
  opacity: .4; cursor: pointer; position: relative; color: var(--muted);
}
.size-row button.out::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 50%;
  border-top: 1.5px solid currentColor; transform: rotate(-14deg);
}
.size-row button.out:hover { background: none; border-color: var(--line-2); color: var(--muted); }
.size-row button.out.on { border-color: var(--hot); opacity: .55; }

/* "Tell me when it's back" — shown on a product page only when the chosen size is sold out. */
.restock { margin: 14px 0 0; padding: 16px; border: 1px solid var(--line-2); background: var(--surface); }
.restock > label { display: block; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hot); margin: 0 0 10px; }
.restock__row { display: flex; gap: 8px; flex-wrap: wrap; }
.restock__row input { flex: 1 1 200px; height: 46px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line-2); color: var(--bone); font: 400 15px var(--sans); }
.restock__row input:focus-visible { outline: 2px solid var(--hot); outline-offset: 1px; }
.restock__row .btn { height: 46px; flex: 0 0 auto; }
.restock__note { margin: 10px 0 0; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.restock__note--bad { color: var(--red); }
.restock__done { margin: 0; font: 500 15px/1.5 var(--sans); color: var(--bone); }
/* The honeypot: off-screen rather than display:none, which some bots skip. */
.restock__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------------------------------------------------------
   TEAM AND CLUB ORDERS (/team-orders/)
   A short enquiry, so it is given a plain opening rather than the application pages' full-bleed
   hero: three fieldsets dressed like a ten-section application would read as longer than it is,
   and length is what stops people filling these in.
   --------------------------------------------------------- */
.to-top { padding: clamp(48px, 9vh, 110px) 0 clamp(8px, 2vh, 20px); }
.to-eyebrow { display: block; font: 500 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--hot); margin-bottom: 18px; }
.to-title { font-size: clamp(44px, 8vw, 112px); line-height: .9; margin: 0; }
.to-lead { max-width: 56ch; margin: 22px 0 0; font-size: clamp(16px, 1.6vw, 19px); color: var(--text); }
.to-points { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 26px 0 0; }
.to-points li {
  font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-2); padding: 7px 12px;
}

/* The enquiry form has a dropdown, which the application pages never needed. Same box as the
   text fields so the row does not look like two different forms. */
.ap-field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
/* Which shop a cart line came from, shown only when it is not the one you are looking at. */
.line-item__from { color: var(--hot); font-weight: 600; }