/* Fonts are served from here (public/fonts, the latin cuts of the Google
   families, all OFL): no third-party stylesheet in the way of first paint. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 900; font-stretch: 62% 125%; font-display: swap; src: url("/fonts/archivo.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/spacemono-400.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/spacemono-700.woff2") format("woff2"); }

/* Public Domain Brand — dark, scary, brutal. A black cinema ground carrying
   very large pictures of very old art; hard type, hard edges, blood red
   against the brand's cyan. Brand tokens from the old site: black, #5CD7DE,
   Poppins, Playball. Gunar Heavy (licensed upload there) → Archivo 900,
   pulled narrow, until the font files arrive. */
:root {
  --black: #050505; --ink: #0c0c0d; --ink-2: #141416; --line: #2a2a2e;
  --bone: #E9E2D0; --mute: #8e8a80; --cyan: #5CD7DE; --blood: #C8102E; --blood-2: #ff2a3f;
  --slime: #9BE22D; --violet: #7A3FF2;
  --display: "Archivo", "Arial Narrow", "Arial Black", sans-serif;
  --body: "Poppins", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --script: "Playball", cursive;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --over: cubic-bezier(.22, 1.3, .36, 1);
  --wipe: cubic-bezier(.72, 0, .28, 1);
  --wrap: 1680px; --gut: 5vw; --headh: 84px;
}
* { box-sizing: border-box; }
html { background: var(--black); color: var(--bone); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.6 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; font-stretch: 75%; line-height: .88; letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
h1 { font-size: clamp(64px, 12.5vw, 232px); }
h2 { font-size: clamp(48px, 8vw, 148px); }
h3 { font-size: clamp(22px, 2.2vw, 34px); line-height: 1; }
p { margin: 0 0 1em; }
::selection { background: var(--blood); color: #fff; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--cyan); color: #000; padding: 8px 12px; z-index: 60; }
.skip:focus { top: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.eyebrow { font: 700 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); margin: 0 0 22px; display: flex; align-items: center; gap: 12px; }
.eyebrow:before { content: ""; width: 34px; height: 2px; background: currentColor; }
.eyebrow.blood { color: var(--blood-2); }
.lede { font-size: clamp(17px, 1.5vw, 22px); max-width: 52ch; color: #cfc8b8; }
main { padding-top: var(--headh); }
.overhero main { padding-top: 0; }

/* film grain over everything; never in the way of a click */
.grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .13; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-2%, 3%); } 80% { transform: translate(4%, 1%); } 100% { transform: translate(0, 0); } }

/* the seasonal strip rides above the header */
.annc { position: fixed; left: 0; right: 0; top: 0; z-index: 31; height: var(--annc); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; background: var(--blood); color: #fff; font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden; }
.annc b { color: #000; background: #fff; padding: 4px 6px; }
.annc .go { border-bottom: 1px solid currentColor; padding-bottom: 2px; margin-left: 8px; }
.annc:hover .go { color: #000; }
.annc .sk { animation: flick 5s infinite; }
.has-annc { --annc: 36px; }
.has-annc .bar { top: var(--annc); }
.has-annc main { padding-top: calc(var(--headh) + var(--annc)); }
.has-annc.overhero main { padding-top: 0; }
.has-annc .hero-in { padding-top: calc(var(--headh) + var(--annc) + 40px); }
.bar nav a.hot { color: var(--blood-2); animation: flick 9s 3s infinite; }
.bar nav a.hot:before { content: "☠ "; }

/* header: clear over a hero, solid once the page moves */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 30; display: flex; align-items: center; gap: 30px; padding: 0 var(--gut); height: var(--headh); background: rgba(5, 5, 5, .9); border-bottom: 1px solid var(--line); transition: background 300ms var(--ease), height 450ms var(--over), border-color 300ms var(--ease); animation: rise .55s .08s var(--ease) both; }
.overhero .bar:not(.scrolled) { background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent); border-color: transparent; }
.bar.scrolled { height: 64px; backdrop-filter: blur(16px); background: rgba(5, 5, 5, .82); }
.bar nav { transition: background 300ms var(--ease), padding 300ms var(--ease), border-color 300ms var(--ease); border: 1px solid transparent; border-radius: 999px; }
.bar.scrolled nav { background: rgba(255, 255, 255, .05); border-color: var(--line); padding: 0 6px; gap: 6px; }
.bar.scrolled nav a { padding: 9px 13px; }
.bar.scrolled nav a:after { bottom: 5px; left: 13px; right: 13px; }
.bar.scrolled .cartlink { padding: 8px 12px; }
.bar .home { text-decoration: none; margin-right: auto; }
.wm { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.wm .pd { font: 400 40px/1 "Pirata One", var(--display); color: var(--bone); height: 40px; width: auto; display: block; transition: transform .45s var(--over), color .3s var(--ease); }
.home:hover .pd { transform: rotate(-8deg) scale(1.08); color: var(--blood-2); }
.wm .wmi { height: 34px; width: auto; }
.wmt { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.wm b { font: 400 25px/.9 "Pirata One", var(--display); letter-spacing: .02em; text-transform: none; }
.wm i { font: 700 8px/1 var(--mono); font-style: normal; letter-spacing: .62em; text-transform: uppercase; color: var(--bone); margin-right: -.62em; }
.bar.scrolled .wm .pd { font-size: 32px; height: 32px; }
.bar nav { display: flex; gap: 30px; }
.bar nav a, .cartlink { position: relative; font: 700 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 10px 0; white-space: nowrap; }
.bar nav a:after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--blood-2); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.bar nav a:hover:after, .bar nav a[aria-current]:after { transform: scaleX(1); }
.cartlink { display: inline-flex; align-items: center; gap: 10px; border: 2px solid var(--bone); padding: 10px 14px; transition: background 180ms var(--ease), color 180ms var(--ease); }
.cartlink:hover { background: var(--bone); color: #000; }
.count { min-width: 20px; height: 20px; padding: 0 5px; background: var(--blood); color: #fff; font-size: 11px; letter-spacing: 0; display: inline-grid; place-items: center; }
.count[hidden] { display: none; }

/* buttons: slabs */
.btn { position: relative; flex: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 34px; border: 2px solid var(--blood); background: var(--blood); color: #fff; font: 900 17px/1 var(--display); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: color 250ms var(--ease), border-color 250ms var(--ease), transform 250ms var(--ease); }
.btn:before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone); transform: translateY(101%); transition: transform 350ms var(--wipe); }
.btn:hover { color: #000; border-color: var(--bone); transform: translateY(-2px); }
.btn:hover:before { transform: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; border-color: var(--bone); color: var(--bone); }
.btn.wide { width: 100%; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* hero: one enormous old picture */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero.short { min-height: 72vh; min-height: 72svh; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; animation: kb 28s ease-in-out infinite alternate; filter: grayscale(1) contrast(1.22); }
.hero-bg:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .1) 100%), linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 25%, transparent 60%, var(--black)); }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.5%, 1.5%); } }
.hero-in { position: relative; width: 100%; padding-top: calc(var(--headh) + 40px); padding-bottom: clamp(64px, 9vh, 120px); }
.hero h1 span { display: block; }
.hero .eyebrow { animation: rise .6s .22s var(--ease) both; }
.hero h1 span:nth-child(1) { animation: rise .7s .30s var(--ease) both; }
.hero h1 span:nth-child(2) { animation: rise .7s .40s var(--ease) both; }
.hero h1 span:nth-child(3) { animation: rise .7s .50s var(--ease) both, flick 7s 2s infinite; color: var(--blood-2); }
.hero h1:not(:has(span)) { animation: rise .7s .30s var(--ease) both; }
.hero .lede { margin: 30px 0 34px; animation: rise .7s .62s var(--ease) both; }
.hero .cta { animation: rise .7s .72s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
/* a failing neon tube */
@keyframes flick { 0%, 4%, 8%, 60%, 64%, 100% { opacity: 1; text-shadow: 0 0 38px rgba(255, 42, 63, .55); } 2%, 6%, 62% { opacity: .25; text-shadow: none; } }
.credit-line { position: absolute; right: var(--gut); bottom: 22px; margin: 0; font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(233, 226, 208, .55); max-width: 40ch; text-align: right; }

/* ticker */
.ticker { background: var(--blood); color: #fff; border-block: 2px solid #000; overflow: hidden; white-space: nowrap; font: 900 clamp(18px, 2.2vw, 34px)/1 var(--display); font-stretch: 75%; letter-spacing: .04em; text-transform: uppercase; }
.ticker div { display: inline-block; padding: 16px 0; animation: tick 40s linear infinite; }
.ticker:hover div { animation-play-state: paused; }
.ticker span { margin: 0 22px; }
.ticker .sk { opacity: .8; font-family: var(--body); }
.ticker.ghost { background: transparent; color: transparent; -webkit-text-stroke: 1px #55524b; border-color: var(--line); font-size: clamp(40px, 7vw, 120px); }
.ticker.ghost .sk { -webkit-text-stroke: 0; color: var(--blood); font-size: .5em; vertical-align: middle; }
@keyframes tick { to { transform: translateX(-50%); } }

/* bands */
.band { position: relative; padding: clamp(72px, 9vw, 160px) 0; }
.band.tight { padding: clamp(40px, 5vw, 80px) 0 clamp(64px, 8vw, 130px); }
.head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 4vw, 64px); flex-wrap: wrap; }
.head a { font: 700 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding-bottom: 8px; border-bottom: 2px solid var(--blood-2); transition: color 200ms var(--ease), padding 300ms var(--ease); }
.head a:hover { color: var(--blood-2); padding-right: 12px; }
.pagehead { padding: clamp(56px, 7vw, 120px) 0 clamp(28px, 4vw, 56px); }
.pagehead h1 { font-size: clamp(56px, 10vw, 180px); }
.pagehead .lede { margin-top: 24px; }

/* the crypt: where the Halloween things live */
.crypt { background: radial-gradient(900px 500px at 80% 0, rgba(122, 63, 242, .28), transparent 70%), radial-gradient(700px 420px at 8% 100%, rgba(155, 226, 45, .12), transparent 70%), var(--black); overflow: hidden; border-block: 1px solid var(--line); }
.crypt .wrap { position: relative; z-index: 2; }
.moon { position: absolute; right: 6vw; top: clamp(30px, 6vw, 90px); width: clamp(120px, 17vw, 300px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8dc, #d9cf9f 55%, #8d8560); box-shadow: 0 0 80px 20px rgba(255, 244, 190, .18), inset -18px -14px 0 rgba(0, 0, 0, .18); z-index: 1; animation: moon 9s ease-in-out infinite alternate; }
.moon:before, .moon:after { content: ""; position: absolute; border-radius: 50%; background: rgba(0, 0, 0, .13); }
.moon:before { width: 22%; height: 22%; left: 24%; top: 50%; }
.moon:after { width: 13%; height: 13%; left: 58%; top: 26%; }
@keyframes moon { to { transform: translateY(14px); box-shadow: 0 0 110px 34px rgba(255, 244, 190, .24), inset -18px -14px 0 rgba(0, 0, 0, .18); } }
.bat { position: absolute; left: -80px; z-index: 3; pointer-events: none; color: #000; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .25)); animation: fly linear forwards; }
.bat svg { width: 100%; display: block; fill: currentColor; animation: flap .22s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.bat.rtl { left: auto; right: -80px; animation-name: flyback; }
@keyframes fly { 25% { margin-top: var(--dy); } 60% { margin-top: calc(var(--dy) * -.6); } to { transform: translateX(calc(100vw + 160px)); } }
@keyframes flyback { 25% { margin-top: var(--dy); } 60% { margin-top: calc(var(--dy) * -.6); } to { transform: translateX(calc(-100vw - 160px)); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
/* ground fog, two layers sliding past each other */
.fog { position: absolute; left: -20%; right: -20%; bottom: 0; height: 46%; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 30% 60% at 20% 100%, rgba(190, 200, 210, .16), transparent 70%), radial-gradient(ellipse 36% 70% at 62% 100%, rgba(190, 200, 210, .13), transparent 70%), radial-gradient(ellipse 28% 55% at 90% 100%, rgba(190, 200, 210, .15), transparent 70%); filter: blur(14px); animation: fog 26s ease-in-out infinite alternate; }
.fog:after { content: ""; position: absolute; inset: 0; background: inherit; transform: scaleX(-1); animation: fog 34s ease-in-out infinite alternate-reverse; }
@keyframes fog { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.crypt .plate.type span { color: var(--tint); text-shadow: 0 0 34px color-mix(in srgb, var(--tint) 55%, transparent); }
.crypt .card:hover .plate.type span { color: #fff; }
.crypt .plate.type { outline-color: color-mix(in srgb, var(--tint) 35%, var(--line)); }

/* blood runs off the bottom of the headline */
.drip { position: relative; display: inline-block; color: var(--blood-2); padding-bottom: .22em; }
.drip:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .34em; background: radial-gradient(ellipse 50% 100% at 50% 0, var(--blood-2) 98%, transparent) 4% 0 / .16em 60% no-repeat, radial-gradient(ellipse 50% 100% at 50% 0, var(--blood-2) 98%, transparent) 23% 0 / .12em 100% no-repeat, radial-gradient(ellipse 50% 100% at 50% 0, var(--blood-2) 98%, transparent) 47% 0 / .18em 45% no-repeat, radial-gradient(ellipse 50% 100% at 50% 0, var(--blood-2) 98%, transparent) 71% 0 / .1em 80% no-repeat, radial-gradient(ellipse 50% 100% at 50% 0, var(--blood-2) 98%, transparent) 92% 0 / .14em 55% no-repeat; transform-origin: top; animation: ooze 5s ease-in-out infinite alternate; }
@keyframes ooze { from { transform: scaleY(.55); } to { transform: scaleY(1.25); } }
/* something is watching from the bottom of the section */
.eyes { display: flex; justify-content: space-around; margin-top: clamp(48px, 6vw, 96px); }
.eyes b { display: flex; gap: 14px; animation: blink 6s infinite; }
.eyes b:nth-child(2) { animation-delay: -2.3s; transform: scale(.7); }
.eyes b:nth-child(3) { animation-delay: -4.1s; transform: scale(1.2); }
.eyes i { width: 26px; height: 15px; border-radius: 80% 10%; background: var(--slime); box-shadow: 0 0 18px var(--slime); position: relative; }
.eyes i:nth-child(2) { transform: scaleX(-1); }
.eyes i:after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 13px; margin: -6.5px 0 0 -2.5px; border-radius: 50%; background: #000; transform: translate(var(--px, 0), var(--py, 0)); }
@keyframes blink { 0%, 46%, 50%, 100% { clip-path: inset(0); } 48% { clip-path: inset(48% 0); } }

/* slab: a full-width picture with words on its dark side */
.slab { position: relative; min-height: 96vh; min-height: 96svh; display: flex; align-items: center; overflow: hidden; border-block: 1px solid var(--line); }
.slab-bg { position: absolute; inset: 0; overflow: hidden; }
.slab-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); filter: grayscale(1) contrast(1.2); will-change: transform; }
.slab-bg:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 42%, rgba(0, 0, 0, .05) 100%); }
.slab.right .slab-bg:before { background: linear-gradient(270deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 42%, rgba(0, 0, 0, .05) 100%); }
.slab-in { position: relative; z-index: 2; width: 100%; padding-block: 120px; }
.slab.right .slab-in { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.slab.right .eyebrow { flex-direction: row-reverse; }
.slab .lede { margin: 28px 0 34px; }
.slab h2 { max-width: 12ch; }
/* the curtain: an ink panel with a red edge slides off the picture */
.fx .curtain:after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--black); border-left: 6px solid var(--blood); transition: transform 1.1s var(--wipe); }
.fx .curtain.in:after { transform: translateX(103%); }

/* reveal (armed only when fx.js is running) */
.fx .rv { opacity: 0; transform: translateY(46px) scale(.965); filter: blur(7px); transition: opacity .75s var(--ease), transform 1.05s var(--over), filter .75s var(--ease); }
.fx .rv.in { opacity: 1; transform: none; filter: none; }
/* a heading arrives on its own terms: wider tracking closing in */
.fx .head h2.rv, .fx .slab h2.rv { letter-spacing: .08em; transition: opacity .8s var(--ease), transform 1.1s var(--over), filter .8s var(--ease), letter-spacing 1.2s var(--ease); }
.fx .head h2.rv.in, .fx .slab h2.rv.in { letter-spacing: -.015em; }

/* collection tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: var(--line); border: 1px solid var(--line); }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(300px, 34vw, 560px); padding: clamp(20px, 2.4vw, 40px); text-decoration: none; background: var(--ink); overflow: hidden; isolation: isolate; }
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.34) contrast(1.15); transform: scale(1.02); transition: filter .6s var(--ease), transform 1.4s var(--ease); }
.tile:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent 60%); }
.tile:not(.has-bg):after { background: radial-gradient(500px 300px at 100% 0, color-mix(in srgb, var(--tint) 45%, transparent), transparent 70%); transition: opacity .5s var(--ease); opacity: .55; }
.tile:hover img { filter: grayscale(1) brightness(.72) contrast(1.28); transform: scale(1.08); }
.tile:not(.has-bg):hover:after { opacity: 1; }
.tile h3 { font-size: clamp(34px, 4.2vw, 76px); line-height: .9; transition: color .3s var(--ease), transform .5s var(--over); }
.tile:hover h3 { color: var(--blood-2); transform: translateX(8px); }
.tile p { font-size: 14px; margin: 14px 0 0; max-width: 36ch; color: #cfc8b8; }
.tile .n { position: absolute; top: clamp(18px, 2vw, 32px); left: clamp(20px, 2.4vw, 40px); font: 700 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }

/* product grid */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 56px) clamp(14px, 1.6vw, 28px); }
.card { text-decoration: none; display: block; }
.plate { position: relative; aspect-ratio: 4 / 5; background: var(--ink-2); overflow: hidden; display: grid; place-items: center; isolation: isolate; outline: 1px solid var(--line); outline-offset: -1px; }
.plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s var(--ease); }
.card:hover .plate img { transform: scale(1.07); }
/* the original, dimmed, wearing the product's name */
.plate.art img { position: absolute; inset: 0; z-index: -1; filter: grayscale(.9) brightness(.42) contrast(1.15); }
.card:hover .plate.art img, .pdp .plate.art img { filter: grayscale(0) brightness(.62) contrast(1.05); }
.plate.art span, .plate.type span { padding: 0 8%; font: 900 clamp(26px, 2.6vw, 48px)/.9 var(--display); font-stretch: 75%; text-transform: uppercase; text-align: center; overflow-wrap: break-word; max-width: 100%; }
.plate.type { background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255, 255, 255, .025) 22px 24px), radial-gradient(420px 320px at 50% 0, color-mix(in srgb, var(--tint, #5CD7DE) 38%, transparent), transparent 72%), var(--ink-2); }
.plate.type span { transition: letter-spacing .5s var(--ease), color .3s var(--ease); }
.card:hover .plate.type span { letter-spacing: .04em; color: var(--blood-2); }
.plate small { position: absolute; left: 14px; bottom: 14px; font: 700 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.plate:before { content: "View →"; position: absolute; right: 0; top: 0; z-index: 2; background: var(--blood); color: #fff; font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 10px 12px; transform: translateY(-101%); transition: transform .35s var(--wipe); }
.card:hover .plate:before { transform: none; }
.pdp .plate:before, .line .plate:before { display: none; }
.card h3 { font: 500 15px/1.35 var(--body); font-stretch: 100%; text-transform: none; letter-spacing: 0; margin: 16px 0 4px; }
.card .pr { font: 400 13px/1 var(--mono); color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }
.chips a { font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 12px 14px; border: 1px solid #45454a; transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); }
.chips a:hover { border-color: var(--bone); }
.chips a[aria-current] { background: var(--bone); color: #000; border-color: var(--bone); }
.vault { padding: 40px 0; border-top: 1px solid var(--line); }
.vault h3 { margin-bottom: 28px; }

/* product page */
.pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); padding: clamp(32px, 4vw, 64px) 0 clamp(64px, 8vw, 130px); align-items: start; }
.pdp .shots { position: sticky; top: 96px; }
.pdp .plate { aspect-ratio: 1 / 1; }
.pdp .plate span { font-size: clamp(36px, 5vw, 92px); }
.crumb { font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-bottom: 20px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--bone); }
.pdp h1 { font-size: clamp(38px, 4.6vw, 84px); }
.pdp .price { margin: 24px 0 32px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pdp .price span { font: 900 40px/1 var(--display); font-stretch: 75%; color: var(--cyan); }
.pdp .price small { font: 400 12px/1 var(--mono); color: var(--mute); }
.opt { border: 0; padding: 0; margin: 0 0 26px; }
.opt legend { font: 700 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); padding: 0; margin-bottom: 12px; }
.opt legend b { color: var(--bone); letter-spacing: .04em; margin-left: 10px; }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.picks label { position: relative; cursor: pointer; }
.picks input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.picks span { display: inline-grid; place-items: center; min-width: 54px; min-height: 46px; padding: 0 14px; border: 1px solid #45454a; font-size: 13px; transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease); }
.picks label:hover span { border-color: var(--bone); }
.picks input:checked + span { background: var(--bone); color: #000; border-color: var(--bone); font-weight: 600; }
.picks input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.buy { display: flex; gap: 8px; margin: 8px 0 14px; }
.qty { width: 84px; min-height: 58px; background: transparent; color: var(--bone); border: 1px solid #45454a; border-radius: 0; text-align: center; font: 700 16px var(--mono); }
.buy .btn { flex: 1; }
.say { min-height: 24px; font: 400 13px/1.5 var(--mono); color: var(--cyan); }
.say.bad { color: var(--blood-2); }
.say a { color: inherit; }
.copy { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); color: #cfc8b8; font-size: 16px; }
.copy ul { margin: 0 0 1em; padding: 0; list-style: none; }
.copy li { padding: 9px 0 9px 22px; border-bottom: 1px solid #1c1c1f; position: relative; }
.copy li:before { content: "†"; position: absolute; left: 0; color: var(--blood-2); }
.copy .note { font-size: 14px; color: var(--mute); }
.copy a { color: var(--bone); }

/* cart */
.cartgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 72px); padding-bottom: clamp(64px, 8vw, 130px); align-items: start; }
.line { display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }
.line:first-child { border-top: 1px solid var(--line); }
.line .plate { aspect-ratio: 1 / 1; }
.line .plate span { font-size: 10px; padding: 0 4px; }
.line .plate small { display: none; }
.line h3 { font: 500 16px/1.35 var(--body); font-stretch: 100%; text-transform: none; letter-spacing: 0; }
.line h3 a { text-decoration: none; }
.line h3 a:hover { color: var(--blood-2); }
.line .meta { font: 400 12px/1.4 var(--mono); color: var(--mute); margin: 4px 0 10px; }
.line .ctl { display: flex; align-items: center; gap: 16px; }
.line .qty { width: 64px; min-height: 40px; font-size: 13px; }
.line button.rm { background: none; border: 0; color: var(--mute); font: 400 12px/1 var(--mono); text-decoration: underline; cursor: pointer; padding: 0; }
.line button.rm:hover { color: var(--blood-2); }
.line .amt { font: 900 24px/1 var(--display); font-stretch: 75%; }
.sum { background: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--blood); padding: 30px; position: sticky; top: 96px; }
.sum h2 { font-size: 40px; margin-bottom: 20px; }
.sum dl { margin: 0 0 24px; font: 400 14px/1 var(--mono); }
.sum dl div { display: flex; justify-content: space-between; padding: 10px 0; color: #cfc8b8; }
.sum dd { margin: 0; }
.sum dl div.tot { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; color: var(--bone); font: 900 30px/1 var(--display); font-stretch: 75%; }
.sum .fineprint { font-size: 12px; color: var(--mute); margin: 16px 0 0; }
.empty { padding: 10px 0 140px; }
.empty p { color: var(--mute); margin-bottom: 24px; font-size: 20px; }

/* prose */
.prose { max-width: 62ch; padding-bottom: clamp(64px, 8vw, 130px); font-size: clamp(18px, 1.5vw, 23px); color: #cfc8b8; }
.prose h2 { font-size: clamp(30px, 3vw, 48px); margin: 1.6em 0 .5em; color: var(--bone); }
.prose a { color: var(--bone); text-decoration-color: var(--blood-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 72px var(--gut) 32px; background: var(--ink); }
.footin { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.foot .wm .pd { font-size: clamp(60px, 7vw, 120px); height: clamp(60px, 7vw, 120px); }
.foot .wm b { font-size: clamp(34px, 4.4vw, 72px); }
.foot .wm i { font-size: clamp(9px, 1vw, 14px); }
.foot .wm .wmi { height: clamp(44px, 5vw, 80px); }
.motto { font: 400 26px/1.2 var(--script); color: var(--cyan); margin: 14px 0 0; }
.footnav { display: flex; flex-direction: column; gap: 12px; }
.footnav a { text-decoration: none; font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #cfc8b8; }
.footnav a:hover { color: var(--blood-2); }
.fine { max-width: var(--wrap); margin: 56px auto 0; padding-top: 20px; border-top: 1px solid var(--line); font: 400 11px/1.5 var(--mono); color: var(--mute); }

@media (max-width: 1100px) {
  .bar { gap: 20px; }
  .bar nav { gap: 18px; }
  .bar nav a, .cartlink { letter-spacing: .12em; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pdp, .cartgrid { grid-template-columns: 1fr; }
  .pdp .shots, .sum { position: static; }
  .footin { grid-template-columns: 1fr; }
  .credit-line { display: none; }
  .slab { min-height: 80svh; }
  .slab-bg:before, .slab.right .slab-bg:before { background: linear-gradient(0deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .2) 100%); }
  .slab { align-items: flex-end; }
  .slab.right .slab-in { align-items: flex-start; text-align: left; }
  .slab.right .eyebrow { flex-direction: row; }
}
@media (max-width: 640px) {
  :root { --headh: 104px; }
  body { font-size: 16px; }
  /* two rows: mark + cart, then the links across the full width */
  .bar, .bar.scrolled { flex-wrap: wrap; gap: 0 12px; height: var(--headh); padding-top: 12px; align-content: flex-start; }
  .bar nav { order: 3; width: 100%; gap: 22px; margin-top: 8px; }
  .bar nav a, .cartlink { font-size: 11px; letter-spacing: .12em; white-space: nowrap; }
  .cartlink { padding: 8px 10px; }
  .wm { gap: 10px; } .wm .pd { font-size: 30px; height: 30px; } .wm b { font-size: 20px; } .wm i { font-size: 7px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: 1fr; }
  .plate:before { display: none; }
  .line { grid-template-columns: 72px 1fr; }
  .line .amt { grid-column: 2; }
  .moon { opacity: .7; }
  .annc .go { display: none; }
  .annc { font-size: 10px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}

/* ---- the centred hero: one garment on black, cards floating off it ------- */
.hero.vexo { align-items: center; text-align: center; background: var(--black); }
.hero.vexo .hero-in { padding-bottom: clamp(40px, 5vh, 80px); display: flex; flex-direction: column; align-items: center; }
.hero.vexo .rays { position: absolute; inset: 0; background: conic-gradient(from 180deg at 50% 62%, transparent 0 8deg, rgba(200, 16, 46, .1) 9deg 11deg, transparent 12deg 26deg, rgba(92, 215, 222, .07) 27deg 29deg, transparent 30deg 48deg, rgba(200, 16, 46, .08) 49deg 52deg, transparent 53deg 72deg, rgba(255, 255, 255, .05) 73deg 75deg, transparent 76deg 100deg), radial-gradient(60% 45% at 50% 55%, rgba(122, 63, 242, .22), transparent 70%); mask: radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 75%); animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero.vexo h1 { font-size: clamp(40px, min(8.4vw, 11vh), 172px); position: relative; z-index: 1; }
.hero.vexo h1 span { display: block; }
.hero.vexo h1 span:nth-child(2) { color: var(--blood-2); }
.hero.vexo .stage { margin: clamp(-34px, -2vh, -6px) 0 clamp(4px, .8vh, 14px); }
.hero.vexo .hero-in { padding-top: calc(var(--headh) + var(--annc, 0px) + clamp(16px, 3vh, 40px)); }
.tag { display: inline-flex; align-items: center; gap: 9px; font: 700 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; margin: 0 0 clamp(12px, 2.4vh, 26px); animation: rise .6s .18s var(--ease) both; }
.tag:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blood-2); box-shadow: 0 0 10px var(--blood-2); animation: flick 4s infinite; }
.hchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 0; animation: rise .7s .58s var(--ease) both; }
.hchips a { font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .04); transition: background .2s var(--ease), border-color .2s var(--ease), transform .3s var(--over); }
.hchips a:hover { background: var(--bone); color: #000; border-color: var(--bone); transform: translateY(-2px); }

.stage { position: relative; width: 100%; display: flex; justify-content: center; margin: clamp(-10px, -1vw, 0) 0 clamp(20px, 3vh, 44px); }
.stage .shot { width: clamp(220px, min(36vw, 42vh), 520px); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .9)) drop-shadow(0 0 70px rgba(122, 63, 242, .28)); animation: rise .9s .5s var(--ease) both, bob 7s 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-14px); } }
.fcard { position: absolute; z-index: 3; background: rgba(12, 12, 13, .82); backdrop-filter: blur(12px); border: 1px solid var(--line); padding: 18px; text-align: left; text-decoration: none; max-width: 260px; animation: rise .8s .9s var(--ease) both; }
.fcard.fl { left: 0; bottom: 12%; }
.fcard.fr { right: 0; top: 24%; display: flex; align-items: center; gap: 14px; max-width: 290px; transition: border-color .25s var(--ease), transform .35s var(--over); }
.fcard.fr:hover { border-color: var(--blood); transform: translateY(-3px); }
.fcard .k { font: 700 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--blood-2); margin: 0 0 8px; }
.fcard .v { font-size: 13px; line-height: 1.5; color: #cfc8b8; margin: 0 0 12px; }
.fcard .dots { display: flex; gap: 6px; }
.fcard .dots i { width: 13px; height: 13px; border-radius: 50%; background: var(--d); border: 1px solid rgba(0, 0, 0, .5); }
.fcard .thumb { width: 54px; height: 54px; flex: none; background: var(--ink-2); display: grid; place-items: center; }
.fcard .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fcard b { display: block; font: 500 13px/1.3 var(--body); }
.fcard i { font: 400 12px/1 var(--mono); font-style: normal; color: var(--mute); }
.fcard .go { margin-left: auto; color: var(--blood-2); font-size: 18px; }
.hero.vexo .cta { justify-content: center; animation: rise .7s 1s var(--ease) both; }

/* cut-out mockups sit on the tile rather than filling it */
.plate.cut { background: radial-gradient(70% 70% at 50% 42%, color-mix(in srgb, var(--tint, #5CD7DE) 20%, transparent), transparent 72%), var(--ink-2); padding: 6%; }
.plate.cut img { width: 100%; height: 100%; object-fit: contain; }
.card:hover .plate.cut img { transform: scale(1.05); }

@media (max-width: 980px) {
  .fcard { position: static; max-width: none; margin: 14px auto 0; animation-delay: .6s; }
  .fcard.fr { max-width: 340px; }
  .stage { flex-direction: column; align-items: center; }
}

/* ---- scroll, in blood --------------------------------------------------- */
.prog { position: fixed; left: 0; right: 0; top: 0; z-index: 35; height: 3px; background: linear-gradient(90deg, var(--blood), var(--blood-2)); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.has-annc .prog { top: var(--annc); }

/* ---- the storm ---------------------------------------------------------- */
.hero.vexo:after, .crypt:after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(70% 90% at var(--bx, 50%) -10%, rgba(255, 255, 255, .95), rgba(176, 208, 255, .4) 42%, transparent 76%); }
.hero.vexo.lit:after, .crypt.lit:after { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 3% { opacity: 1; } 9% { opacity: .06; } 15% { opacity: .72; } 22% { opacity: .1; } 34% { opacity: .3; } 100% { opacity: 0; } }
.bolt { position: absolute; left: var(--bx, 40%); top: -4%; width: clamp(60px, 7vw, 120px); height: 62%; z-index: 5; pointer-events: none; opacity: 0; }
.bolt svg { width: 100%; height: 100%; fill: #eaf3ff; filter: drop-shadow(0 0 26px rgba(150, 200, 255, .95)) drop-shadow(0 0 70px rgba(120, 170, 255, .6)); }
.lit .bolt { animation: bolt 1.1s ease-out; }
@keyframes bolt { 0% { opacity: 0; } 4% { opacity: 1; } 11% { opacity: 0; } 16% { opacity: .9; } 26% { opacity: 0; } 100% { opacity: 0; } }

/* ---- blood, running down from the top of the hero ----------------------- */
.gore { position: absolute; left: 0; right: 0; top: calc(var(--headh) + var(--annc, 0px)); height: clamp(90px, 13vh, 190px); z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 4% 0 / 14px 44% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 11% 0 / 9px 78% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 19% 0 / 18px 30% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 28% 0 / 11px 96% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 37% 0 / 8px 52% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 46% 0 / 16px 68% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 56% 0 / 10px 36% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 65% 0 / 13px 84% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 74% 0 / 9px 46% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 83% 0 / 17px 62% no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--blood) 97%, transparent) 92% 0 / 10px 28% no-repeat,
    linear-gradient(180deg, var(--blood) 0, var(--blood) 9px, transparent 9px);
  transform-origin: top; animation: run 2.4s 1.1s var(--ease) both; }
@keyframes run { from { transform: scaleY(0); } }

/* ---- the rack: the hoodie is the vessel --------------------------------- */
.rack { position: relative; z-index: 2; width: var(--rackw); aspect-ratio: 1; margin: 0 auto; }
.rack .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateX(7%) scale(.93) rotate(2deg); transform-origin: 50% 8%; transition: opacity .7s var(--ease), transform 1s var(--over); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .92)) drop-shadow(0 0 70px rgba(122, 63, 242, .3)); }
.rack .shot.on { opacity: 1; transform: none; }
.rack .shot.out { opacity: 0; transform: translateX(-7%) scale(.93) rotate(-2deg); }
.fx .rack { animation: rise .9s .5s var(--ease) both; }

/* circle nav, under the shirt */
.dial { display: flex; justify-content: center; gap: clamp(8px, 1.2vw, 16px); margin: 0 0 12px; }
.dial button { width: clamp(40px, min(4.4vw, 6.4vh), 62px); aspect-ratio: 1; padding: 6px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); cursor: pointer; display: grid; place-items: center; position: relative; transition: border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--over); }
.dial button img { width: 100%; height: 100%; object-fit: contain; opacity: .5; transition: opacity .3s var(--ease); }
.dial button:hover { transform: translateY(-3px); border-color: var(--d); }
.dial button:hover img { opacity: .9; }
.dial button.on { border-color: var(--d); background: color-mix(in srgb, var(--d) 16%, transparent); box-shadow: 0 0 0 1px var(--d), 0 0 24px color-mix(in srgb, var(--d) 55%, transparent); }
.dial button.on img { opacity: 1; }
.now { font: 700 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin: 0 0 clamp(14px, 2.4vh, 26px); min-height: 12px; }

.cue { position: absolute; right: var(--gut); bottom: 18px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 700 9px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.cue i { width: 1px; height: clamp(18px, 3vh, 34px); background: linear-gradient(180deg, transparent, var(--blood-2)); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 50% { transform: scaleY(.45); opacity: .4; } }

/* ---- the wall: every monster, moving ------------------------------------ */
.wall { overflow: hidden; border-block: 1px solid var(--line); background: var(--ink); padding: 26px 0; }
.wtrack { display: flex; width: max-content; gap: 18px; animation: tick 52s linear infinite; }
.wall:hover .wtrack { animation-play-state: paused; }
.wtrack a { flex: none; width: clamp(150px, 15vw, 230px); text-decoration: none; text-align: center; opacity: .62; transition: opacity .35s var(--ease), transform .45s var(--over); }
.wtrack a:hover { opacity: 1; transform: translateY(-8px); }
.wtrack img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .8)); }
.wtrack b { display: block; margin-top: 6px; font: 700 9px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wtrack a:hover b { color: var(--d, var(--bone)); }

/* ---- the tally ---------------------------------------------------------- */
.tally .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: clamp(44px, 6vw, 88px); border-bottom: 1px solid var(--line); }
.tally b { display: block; font: 900 clamp(46px, 7.6vw, 140px)/.85 var(--display); font-stretch: 75%; color: transparent; -webkit-text-stroke: 2px var(--bone); }
.tally div:nth-child(2) b { -webkit-text-stroke-color: var(--blood-2); }
.tally span { display: block; margin-top: 12px; font: 700 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }

@media (max-width: 980px) {
  .dial button { width: 44px; }
  .tally .wrap { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .gore { height: 70px; }
}

@property --hue { syntax: "<color>"; inherits: true; initial-value: #a83cf0; }

/* ---- the weather ---------------------------------------------------------
   A real sky, in black and white, with the light coming up off the horizon
   in blood. The hoodie stands in front of the beam, so it reads as a
   silhouette carrying its ghost. */
.hero.vexo { background: #030304; transition: --hue 900ms var(--ease); --rackw: clamp(220px, min(33vw, 39vh), 500px); }
.hero.vexo .sky img { transition: filter 900ms var(--ease); }
.hero.vexo .sky { position: absolute; inset: 0; z-index: 0; }
.hero.vexo .sky { animation: kb 46s ease-in-out infinite alternate; }
.hero.vexo .sky.layered { animation: none; }
.hero.vexo .sky.layered .cl { position: absolute; left: -12%; width: 124%; max-width: none; height: 52%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 70%, transparent 100%); object-fit: cover; filter: grayscale(1) contrast(1.5); transition: transform 2.8s var(--ease); will-change: transform; }
.hero.vexo .sky.layered .far { top: -4%; opacity: .5; filter: grayscale(1) contrast(1.35) brightness(.3) blur(2px); }
.hero.vexo .sky.layered .mid { top: 16%; opacity: .72; filter: grayscale(1) contrast(1.5) brightness(.38) blur(1px); }
.hero.vexo .sky.layered .near { top: 44%; opacity: .9; filter: grayscale(1) contrast(1.6) brightness(.46); }
.sky.layered:before { content: ""; position: absolute; inset: 0; z-index: 2; mix-blend-mode: color; background: var(--hue); opacity: .55; }
.sky.layered:after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(3, 3, 4, .9) 0%, rgba(3, 3, 4, .25) 30%, rgba(3, 3, 4, .5) 62%, #030304 96%); }
.hero.vexo .sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.5) brightness(.42); transform: translate3d(var(--skyx, 0px), var(--skyy, 0px), 0) scale(1.06); transition: transform 2.6s var(--ease), filter 900ms var(--ease); }
.hero.vexo .sky.scene { animation-duration: 60s; }
.hero.vexo .sky.scene img { filter: none; object-position: 50% 45%; }
.hero.vexo .sky.scene:after { background: linear-gradient(180deg, rgba(3, 3, 4, .72) 0%, transparent 26%, transparent 62%, rgba(3, 3, 4, .9) 97%); }
.hero.vexo:has(.sky.scene) .glow { opacity: .45; }
.hero.vexo:has(.sky.scene) .vig { background: radial-gradient(130% 95% at 50% 45%, transparent 48%, rgba(0, 0, 0, .5) 100%); }
.hero.vexo .sky:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 3, 4, .92) 0%, rgba(3, 3, 4, .3) 32%, rgba(3, 3, 4, .5) 62%, #030304 96%); }
.hero.vexo .sky:before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: color; background: var(--hue); opacity: .55; }
.hero.vexo .glow { position: absolute; left: 50%; bottom: -4%; width: 120vw; height: 40%; transform: translateX(-50%); z-index: 1; mix-blend-mode: screen; pointer-events: none; background: radial-gradient(ellipse 42% 90% at 50% 92%, color-mix(in srgb, var(--hue) 62%, transparent), color-mix(in srgb, var(--hue) 28%, transparent) 40%, color-mix(in srgb, var(--hue) 12%, transparent) 64%, transparent 78%); animation: pulse 7s ease-in-out infinite alternate; }
.hero.vexo .beam { position: absolute; left: 50%; bottom: 26%; width: clamp(60px, 7.5vw, 140px); height: 58%; transform: translateX(-50%); z-index: 1; mix-blend-mode: screen; pointer-events: none; filter: blur(16px); background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--hue) 18%, transparent) 22%, color-mix(in srgb, var(--hue) 55%, transparent) 68%, color-mix(in srgb, var(--hue) 30%, #fff) 100%); animation: pulse 4.5s ease-in-out infinite alternate; }
.hero.vexo .beam:after { content: ""; position: absolute; left: -260%; right: -260%; bottom: -4px; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hue) 35%, #fff), transparent); filter: blur(2px); }
@keyframes pulse { from { opacity: .72; } to { opacity: 1; } }
.hero.vexo .fog { z-index: 2; height: 38%; }
.hero.vexo .hero-in { position: relative; z-index: 5; }
.hero.vexo .rack .shot { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .95)) drop-shadow(0 0 80px color-mix(in srgb, var(--hue) 55%, transparent)); }

/* the cards turn to glass */
.fcard { background: linear-gradient(180deg, rgba(18, 18, 22, .8), rgba(8, 8, 10, .88)); backdrop-filter: blur(20px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 28px 70px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .16); }
.tag { background: rgba(8, 8, 10, .78); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, .24); }
.dial button { backdrop-filter: blur(12px); }
.hero.vexo h1 { text-shadow: 0 10px 50px rgba(0, 0, 0, .8); }

.hero.vexo .vig { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, .55) 100%); }

/* words on the walls, either side of the vessel */
.wallword { position: absolute; top: 46%; z-index: 3; margin: 0; width: 6.5em; font: 400 clamp(11px, 1.15vw, 17px)/1.45 var(--display); font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; color: rgba(233, 226, 208, .5); pointer-events: none; }
.wallword.left { left: var(--gut); text-align: center; }
.wallword.right { right: var(--gut); text-align: center; top: 58%; }
.btn .ar { display: inline-block; margin-left: 10px; transition: transform .3s var(--ease); }
.btn:hover .ar { transform: translateX(5px); }
@media (max-width: 1240px) { .wallword { display: none; } }

/* ---- no chrome over a hero ----------------------------------------------
   On a page that opens with a full hero, the bar and the strip stay out of
   the picture until you move. They are hidden only when script is running
   (html.js), so with no JS the navigation is simply always there, and a
   keyboard tabbing into it brings it straight back. */
html.js .overhero:not(.scrolled) .annc,
html.js .overhero:not(.scrolled) .bar { transform: translateY(-110%); opacity: 0; pointer-events: none; }
html.js .overhero .annc,
html.js .overhero .bar { transition: transform 550ms var(--over), opacity 350ms var(--ease), background 300ms var(--ease), height 450ms var(--over); }
html.js .overhero:not(.scrolled) .bar:focus-within { transform: none; opacity: 1; pointer-events: auto; }
/* the hero's own spacing no longer depends on chrome that may not be there */
html.js .overhero .hero.vexo .hero-in { padding-top: clamp(52px, 8.5vh, 116px); }
html.js .overhero .hero.short .hero-in { padding-top: clamp(80px, 14vh, 170px); }
html.js .overhero .gore { top: 0; }

/* ---- somebody is wearing it --------------------------------------------
   An anatomical engraving stands behind the garment, invisible until the
   lightning catches it. Inverted and screened, so the paper drops away and
   only the bones take the light. */
.wraith { position: absolute; left: 50%; top: calc(var(--rackw) * -.115); z-index: 1; width: calc(var(--rackw) * 1.2); transform: translateX(-50%); pointer-events: none; }
/* the same figure again, skull only, in front of the hood */
.wraith.front { z-index: 3; }
.wraith.front img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 21%, transparent 26.5%); mask-image: linear-gradient(180deg, #000 0, #000 21%, transparent 26.5%); }
.wraith img { width: 100%; max-width: none; height: auto; opacity: 0; filter: drop-shadow(0 0 18px rgba(190, 215, 255, .5)); }
.lit .wraith img { animation: wraith 1.4s ease-out; }
@keyframes wraith {
  0% { opacity: 0; transform: scale(1); }
  4% { opacity: .95; }
  11% { opacity: .08; }
  16% { opacity: 1; }
  32% { opacity: .18; }
  52% { opacity: 0; transform: scale(1.03); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wraith { display: none; } }

/* ---- the wearer: renders supplied by the studio ---------------------------
   .wearer — one transparent skull-and-hands overlay, bottom-aligned to the
   mockup's frame so the same file sits right on every garment.
   .worn   — a full render of this piece being worn; for the length of the
   flash it stands in for the flat garment. */
.wearer, .worn { position: absolute; left: 50%; bottom: 0; z-index: 3; width: var(--rackw); height: auto; max-width: none; transform: translateX(-50%); pointer-events: none; opacity: 0; }
.worn { width: calc(var(--rackw) * 1.04); filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .95)); }
.lit .wearer, .lit .worn { animation: wraith 1.4s ease-out; }
.has-worn.lit .rack .shot.on { animation: unworn 1.4s ease-out; }
.has-worn .wraith { display: none; }
@keyframes unworn { 0% { opacity: 1; } 4% { opacity: 0; } 11% { opacity: 1; } 16% { opacity: 0; } 32% { opacity: .8; } 52% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wearer, .worn { display: none; } }

/* ---- x-ray --------------------------------------------------------------
   The strike doesn't just find the figure around the garment, it goes
   through it: for the two flashes the hoodie thins to a veil and the ribs,
   spine and arms behind it show in the fabric. Timed to the same beats as
   the bolt and the figure. */
.lit .rack .shot.on { animation: xray 1.4s ease-out; }
@keyframes xray { 0% { opacity: 1; } 4% { opacity: .46; } 11% { opacity: .92; } 16% { opacity: .4; } 32% { opacity: .74; } 52% { opacity: 1; } 100% { opacity: 1; } }
.has-worn.lit .rack .shot.on { animation-name: unworn; }

/* ---- the figure, evened out ----------------------------------------------
   The skull exists in both layers, so it was stacking to twice the opacity of
   the arms. The back layer now starts below the jaw; the front layer ends
   right under it (no neck stub over the hood). The strike holds the figure
   solid for a beat before letting go, so it reads as bone, not as a haze. */
.wraith:not(.front) img { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 22%, #000 25%); mask-image: linear-gradient(180deg, transparent 0, transparent 22%, #000 25%); }
.wraith.front img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 22.5%, transparent 25%); mask-image: linear-gradient(180deg, #000 0, #000 22.5%, transparent 25%); }
.lit .wraith img, .lit .wearer, .lit .worn { animation-duration: 1.9s; }
.lit .rack .shot.on { animation-duration: 1.9s; }
@keyframes wraith {
  0% { opacity: 0; transform: scale(1); }
  3% { opacity: 1; }
  8% { opacity: .1; }
  12% { opacity: 1; }
  38% { opacity: 1; }
  62% { opacity: 0; transform: scale(1.02); }
  100% { opacity: 0; }
}
@keyframes xray { 0% { opacity: 1; } 3% { opacity: .46; } 8% { opacity: .95; } 12% { opacity: .42; } 38% { opacity: .55; } 62% { opacity: 1; } 100% { opacity: 1; } }
/* the hands hang below the cuffs — give them room before the dial */
.hero.vexo .dial { margin-top: calc(var(--rackw) * .07); }
.hero.vexo h1 { font-size: clamp(38px, min(7.8vw, 10vh), 160px); }

/* ---- weather, varied ------------------------------------------------------ */
/* far off: the sky breathes light, nothing is revealed */
.hero.vexo.lit-far:after, .crypt.lit-far:after { animation: flashfar .9s ease-out; }
@keyframes flashfar { 0% { opacity: 0; } 8% { opacity: .34; } 18% { opacity: .05; } 30% { opacity: .22; } 100% { opacity: 0; } }
/* each bolt is its own: where it lands, which way it leans, how far it reaches */
.bolt { height: var(--bh, 62%); transform: scaleX(var(--bflip, 1)); }
/* the jolt: the garment takes the hit */
.jolt .rack { animation: jolt .5s var(--ease); }
@keyframes jolt { 0% { transform: none; } 12% { transform: translate(-5px, 3px) rotate(-1.2deg); } 28% { transform: translate(4px, -2px) rotate(.9deg); } 46% { transform: translate(-2px, 1px) rotate(-.4deg); } 100% { transform: none; } }
/* blood: rare, red, and it lingers */
.hero.vexo.blood:after, .crypt.blood:after { background: radial-gradient(70% 90% at var(--bx, 50%) -10%, rgba(255, 70, 80, .95), rgba(200, 16, 46, .45) 42%, transparent 76%); }
.blood .bolt svg { fill: #ffd9d9; filter: drop-shadow(0 0 26px rgba(255, 42, 63, .95)) drop-shadow(0 0 80px rgba(200, 16, 46, .7)); }
.blood .wraith img { filter: drop-shadow(0 0 22px rgba(255, 42, 63, .7)); }

/* eyes: they light a moment after the flash and are the last thing to go */
.eye { position: absolute; top: 14.1%; width: 2.1%; aspect-ratio: 1; border-radius: 50%; background: #ff2a3f; box-shadow: 0 0 8px 2px #ff2a3f, 0 0 26px 8px rgba(255, 42, 63, .55); opacity: 0; transform: translate(-50%, -50%); }
.eye.l { left: 46.6%; } .eye.r { left: 53.5%; }
.lit .eye { animation: eyes 3.4s ease-out; }
.blood.lit .eye { animation-duration: 5.2s; box-shadow: 0 0 12px 4px #ff2a3f, 0 0 46px 16px rgba(255, 42, 63, .7); }
@keyframes eyes { 0%, 10% { opacity: 0; } 16% { opacity: 1; } 44% { opacity: 1; } 50% { opacity: .35; } 54% { opacity: 1; } 78% { opacity: .9; } 84% { opacity: .2; } 88% { opacity: .7; } 100% { opacity: 0; } }

/* the drips are gone */
.gore, .drip:after { display: none; }
@media (prefers-reduced-motion: reduce) { .eye { display: none; } }

/* ---- dramatic af ----------------------------------------------------------
   One strike, in order: a triple strobe; the bolt forks; the garment is
   thrown; the figure LUNGES (the skull further than the body, so it comes out
   of the hood at you); the headline takes the voltage; the clouds blow white;
   then the room drops darker than it was — a blackout with only the eyes left
   burning — and the light creeps back. */
@keyframes flash { 0% { opacity: 0; } 2% { opacity: 1; } 5% { opacity: .1; } 8% { opacity: .95; } 12% { opacity: .05; } 16% { opacity: .8; } 22% { opacity: .12; } 30% { opacity: .3; } 44% { opacity: 0; } 100% { opacity: 0; } }
.hero.vexo.lit:after, .crypt.lit:after { animation-duration: 1.5s; }
@keyframes bolt { 0% { opacity: 0; } 2% { opacity: 1; } 6% { opacity: .1; } 9% { opacity: 1; } 14% { opacity: 0; } 17% { opacity: .85; } 26% { opacity: 0; } 100% { opacity: 0; } }
.bolt:before { content: ""; position: absolute; left: 46%; top: 38%; width: 85%; height: 46%; background: #eaf3ff; clip-path: polygon(38% 0, 0 56%, 34% 56%, 8% 100%, 100% 38%, 58% 38%, 88% 0); transform: rotate(16deg); filter: drop-shadow(0 0 18px rgba(150, 200, 255, .95)); }
.blood .bolt:before { background: #ffd9d9; filter: drop-shadow(0 0 18px rgba(255, 42, 63, .95)); }

/* the garment is thrown, then hangs forward while the figure is out */
.jolt .rack { animation: jolt 2.2s var(--ease); }
@keyframes jolt { 0% { transform: none; } 3% { transform: translate(-9px, 5px) rotate(-2.4deg) scale(1.02); } 7% { transform: translate(8px, -4px) rotate(1.9deg) scale(1.05); } 12% { transform: translate(-4px, 2px) rotate(-1deg) scale(1.08); } 18% { transform: rotate(.4deg) scale(1.09); } 42% { transform: scale(1.1); } 70% { transform: none; } 100% { transform: none; } }

/* the lunge */
.lit .wraith img { animation: lunge 2.2s var(--ease); transform-origin: 50% 34%; }
.lit .wraith.front img { animation-name: lungeskull; transform-origin: 50% 12%; }
@keyframes lunge { 0% { opacity: 0; transform: scale(.98); } 2% { opacity: 1; } 5% { opacity: .1; } 8% { opacity: 1; transform: scale(1.04); } 12% { opacity: .15; } 16% { opacity: 1; transform: scale(1.08); } 44% { opacity: 1; transform: scale(1.11); } 66% { opacity: 0; transform: scale(1.13); } 100% { opacity: 0; } }
@keyframes lungeskull { 0% { opacity: 0; transform: scale(.98); } 2% { opacity: 1; } 5% { opacity: .1; } 8% { opacity: 1; transform: scale(1.08); } 12% { opacity: .15; } 16% { opacity: 1; transform: scale(1.18) translateY(1.5%); } 44% { opacity: 1; transform: scale(1.26) translateY(2.5%) rotate(-2deg); } 66% { opacity: 0; transform: scale(1.3) translateY(3%) rotate(-3deg); } 100% { opacity: 0; } }
.lit .rack .shot.on { animation-duration: 2.2s; }
@keyframes xray { 0% { opacity: 1; } 2% { opacity: .4; } 5% { opacity: .95; } 8% { opacity: .36; } 12% { opacity: .9; } 16% { opacity: .34; } 44% { opacity: .5; } 68% { opacity: 1; } 100% { opacity: 1; } }
/* the eyes ride the skull out, and stay for the blackout */
.lit .eye { animation: eyes 4.2s ease-out; }
.lit .wraith.front { animation: skullride 2.2s var(--ease); }
@keyframes skullride { 0%, 100% { --x: 0; } }

/* the headline takes it */
.lit h1 .flick { animation: zap 1.5s steps(1, end), flick 7s 2s infinite; }
@keyframes zap { 0% { color: #fff; text-shadow: 0 0 60px #fff, 0 0 120px rgba(150, 200, 255, .9); transform: skewX(-8deg) translateX(-6px); } 5% { color: var(--blood-2); transform: none; } 8% { color: #fff; transform: skewX(6deg) translateX(8px); letter-spacing: .04em; } 12% { color: var(--blood-2); transform: translateX(-3px); letter-spacing: 0; } 16% { color: #fff; text-shadow: 0 0 80px #fff; transform: skewX(-3deg); } 24% { color: var(--blood-2); transform: none; text-shadow: 0 0 38px rgba(255, 42, 63, .55); } 100% { color: var(--blood-2); } }
.lit h1 span:first-child { animation: zapdim 1.5s steps(1, end); }
@keyframes zapdim { 0% { opacity: 1; transform: translateX(3px); } 5% { opacity: .35; transform: none; } 8% { opacity: 1; transform: translateX(-4px); } 12% { opacity: .5; } 16% { opacity: 1; transform: none; } 100% { opacity: 1; } }

/* the clouds blow white on the beats */
.lit .sky.layered .cl { animation: surge 1.5s ease-out; }
@keyframes surge { 2% { opacity: 1; } 5% { opacity: .4; } 8% { opacity: 1; } 16% { opacity: 1; } }

/* then the blackout: darker than before the strike, eyes only */
.hero.vexo .vig:after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; }
.lit .vig:after { animation: blackout 4.2s ease-in-out; }
@keyframes blackout { 0%, 30% { opacity: 0; } 50% { opacity: .78; } 72% { opacity: .7; } 100% { opacity: 0; } }
.lit .glow, .lit .beam { animation: dimout 4.2s ease-in-out; }
@keyframes dimout { 0%, 30% { opacity: 1; } 50% { opacity: .08; } 72% { opacity: .15; } 100% { opacity: 1; } }
.lit .fcard, .lit .dial, .lit .now, .lit .tag { animation: hush 4.2s ease-in-out; }
@keyframes hush { 0%, 30% { opacity: 1; } 50% { opacity: .25; } 72% { opacity: .3; } 100% { opacity: 1; } }

/* a far flicker stays gentle — none of the above */
.lit-far .vig:after, .lit-far .glow, .lit-far .beam { animation: none; }
@media (prefers-reduced-motion: reduce) { .lit h1 .flick, .lit h1 span:first-child, .jolt .rack { animation: none; } }
.lit .eye { transform-origin: 50% -20%; }

/* ---- the seal, centred ----------------------------------------------------- */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; }
.bar nav { order: 1; justify-self: start; }
.bar .home { order: 2; margin: 0; display: block; line-height: 0; }
.bar .cartlink { order: 3; justify-self: end; }
.seal { width: 66px; height: 66px; display: block; transition: width .45s var(--over), height .45s var(--over), transform .6s var(--over); }
.bar.scrolled .seal { width: 50px; height: 50px; }
.home:hover .seal { transform: rotate(-14deg) scale(1.06); }
@media (max-width: 640px) {
  .bar, .bar.scrolled { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; row-gap: 4px; height: var(--headh); padding-top: 8px; align-content: start; }
  .bar .home { grid-column: 2; grid-row: 1; }
  .bar .cartlink { grid-column: 3; grid-row: 1; align-self: center; }
  .bar nav { grid-column: 1 / -1; grid-row: 2; order: 0; width: auto; justify-self: center; margin: 0; gap: 16px; }
  .seal, .bar.scrolled .seal { width: 46px; height: 46px; }
}

/* ---- the push-in ----------------------------------------------------------- */
.cue { display: none; }
html.fx .pin { height: 250vh; }
html.fx .pin .hero { position: sticky; top: 0; height: 100vh; height: 100svh; }
.pinblack { position: absolute; inset: 0; z-index: 8; background: #000; pointer-events: none; opacity: calc((var(--p, 0) - .8) * 5.2); }
html.fx .pin .tag, html.fx .pin h1, html.fx .pin .dial, html.fx .pin .now, html.fx .pin .cta, html.fx .pin .fcard, html.fx .pin .wallword { opacity: calc(1 - var(--p, 0) * 4.5); }
html.fx .pin .stage { transform: scale(var(--z, 1)); transform-origin: calc(50% - var(--rackw) * .041) calc(var(--rackw) * .054); }
html.fx .pin.scrub .stage { will-change: transform; }
html.fx .pin .wraith img { opacity: calc((var(--p, 0) - .05) * 7); }
html.fx .pin .eye { opacity: calc((var(--p, 0) - .16) * 5); }
html.fx .pin.scrub .rack .shot { transition: none; }
html.fx .pin.scrub .rack .shot.on { opacity: max(.3, calc(1 - (var(--p, 0) - .05) * 3.4)); }
html.fx .pin.scrub .cta, html.fx .pin.scrub .dial { pointer-events: none; }
html.fx .pin:not(.scrub) .cta, html.fx .pin:not(.scrub) .dial { pointer-events: auto; }

/* the real seal is a crop of the back print: clip the fabric off at the ring */
img.seal { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(233, 226, 208, .18), 0 6px 22px rgba(0, 0, 0, .6); }

/* eyes, measured off a 11x frame: sockets at 45.7% / 55.9% across, 18.5% down.
   A glow, not a disc — it has to survive being 40x. */
.eye { top: 18.5%; width: 3.6%; background: radial-gradient(circle, #fff 0, #ff8a8a 14%, #ff2a3f 36%, rgba(255, 42, 63, .35) 58%, rgba(255, 42, 63, 0) 72%); box-shadow: none; }
.eye.l { left: 45.7%; } .eye.r { left: 55.9%; }
.blood.lit .eye { box-shadow: none; width: 4.6%; }
/* the camera goes in through the left socket */
html.fx .pin .stage { transform-origin: calc(50% - var(--rackw) * .052) calc(var(--rackw) * .107); }
/* while the scroll is driving, a strike may flash the sky but not fight the fade */
html.fx .pin.scrub .fcard, html.fx .pin.scrub .dial, html.fx .pin.scrub .now, html.fx .pin.scrub .tag, html.fx .pin.scrub .cta, html.fx .pin.scrub h1 span, html.fx .pin.scrub .wraith img, html.fx .pin.scrub .eye, html.fx .pin.scrub .rack, html.fx .pin.scrub .rack .shot.on { animation: none !important; }

/* eyes, re-measured on a still frame (the first reading caught the skull
   mid-lunge): sockets at 46.3% / 53.9% across, 13.6% down. */
.eye { top: 13.6%; }
.eye.l { left: 46.3%; } .eye.r { left: 53.9%; }
html.fx .pin .stage { transform-origin: calc(50% - var(--rackw) * .044) calc(var(--rackw) * .048); }
/* the lunge moves the whole skull layer — box, eyes and all — so the eyes
   stay in their sockets as it comes at you. The image only handles opacity. */
.lit .wraith.front { animation: skullbox 2.2s var(--ease); transform-origin: 50% 12%; }
@keyframes skullbox { 0% { transform: translateX(-50%) scale(.98); } 8% { transform: translateX(-50%) scale(1.08); } 16% { transform: translateX(-50%) scale(1.18) translateY(1.5%); } 44% { transform: translateX(-50%) scale(1.26) translateY(2.5%) rotate(-2deg); } 66% { transform: translateX(-50%) scale(1.3) translateY(3%) rotate(-3deg); } 100% { transform: translateX(-50%); } }
.lit .wraith.front img { animation-name: lungefade; }
@keyframes lungefade { 0% { opacity: 0; } 2% { opacity: 1; } 5% { opacity: .1; } 8% { opacity: 1; } 12% { opacity: .15; } 16% { opacity: 1; } 44% { opacity: 1; } 66% { opacity: 0; } 100% { opacity: 0; } }
html.fx .pin.scrub .wraith.front { animation: none !important; }

/* ---- backed off ------------------------------------------------------------
   Same events, less volume: two flashes not three, a lean not a lunge, a dip
   not a blackout, and the headline flickers without being thrown around. */
@keyframes flash { 0% { opacity: 0; } 3% { opacity: .8; } 8% { opacity: .08; } 13% { opacity: .6; } 24% { opacity: .1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes jolt { 0% { transform: none; } 4% { transform: translate(-3px, 2px) rotate(-.8deg); } 9% { transform: translate(3px, -1px) rotate(.6deg) scale(1.01); } 16% { transform: scale(1.025); } 44% { transform: scale(1.03); } 70% { transform: none; } 100% { transform: none; } }
@keyframes lunge { 0% { opacity: 0; transform: scale(.99); } 3% { opacity: 1; } 8% { opacity: .12; } 13% { opacity: 1; transform: scale(1.02); } 44% { opacity: 1; transform: scale(1.035); } 66% { opacity: 0; transform: scale(1.04); } 100% { opacity: 0; } }
@keyframes skullbox { 0% { transform: translateX(-50%) scale(.99); } 13% { transform: translateX(-50%) scale(1.04); } 44% { transform: translateX(-50%) scale(1.08) translateY(1%); } 66% { transform: translateX(-50%) scale(1.09) translateY(1.2%); } 100% { transform: translateX(-50%); } }
@keyframes lungefade { 0% { opacity: 0; } 3% { opacity: 1; } 8% { opacity: .12; } 13% { opacity: 1; } 44% { opacity: 1; } 66% { opacity: 0; } 100% { opacity: 0; } }
@keyframes xray { 0% { opacity: 1; } 3% { opacity: .5; } 8% { opacity: .95; } 13% { opacity: .45; } 44% { opacity: .58; } 68% { opacity: 1; } 100% { opacity: 1; } }
@keyframes zap { 0% { color: #fff; text-shadow: 0 0 50px #fff; } 6% { color: var(--blood-2); } 11% { color: #fff; text-shadow: 0 0 60px #fff; } 18% { color: var(--blood-2); text-shadow: 0 0 38px rgba(255, 42, 63, .55); } 100% { color: var(--blood-2); } }
@keyframes zapdim { 0%, 100% { opacity: 1; } 6% { opacity: .6; } 11% { opacity: 1; } }
@keyframes blackout { 0%, 30% { opacity: 0; } 50% { opacity: .42; } 70% { opacity: .36; } 100% { opacity: 0; } }
@keyframes dimout { 0%, 30% { opacity: 1; } 50% { opacity: .4; } 70% { opacity: .45; } 100% { opacity: 1; } }
@keyframes hush { 0%, 30% { opacity: 1; } 50% { opacity: .6; } 70% { opacity: .62; } 100% { opacity: 1; } }
.lit .vig:after, .lit .glow, .lit .beam, .lit .fcard, .lit .dial, .lit .now, .lit .tag { animation-duration: 3.2s; }
.lit .eye { animation-duration: 3.4s; }

/* the weather ducks out as the camera goes in: a black layer above the sky,
   glow, beam and fog but below the figure, so only the skeleton is left lit.
   (A layer rather than fading each piece — the glow and beam animate their own
   opacity and would win.) */
.hero.vexo .vig:before { content: ""; position: absolute; inset: 0; background: #000; opacity: calc(var(--p, 0) * 2.6 - .08); }
html.fx .pin.scrub .bat { opacity: calc(1 - var(--p, 0) * 4); }

/* the push-in is on the skull's centre line, and the skull rides to mid-screen */
html.fx .pin .stage { transform: translateY(var(--ty, 0px)) scale(var(--z, 1)); transform-origin: 50% calc(var(--rackw) * .07); }

/* the figure is an x-ray plate: black and white, high contrast. The eyes are
   the only colour it has. (Tan bone also fought the tinted rooms.) */
.wraith img { filter: grayscale(1) contrast(1.55) brightness(1.05) drop-shadow(0 0 18px rgba(190, 215, 255, .5)); }
.blood .wraith img { filter: grayscale(1) contrast(1.55) brightness(1.05) drop-shadow(0 0 22px rgba(255, 42, 63, .75)); }

/* the eyes catch, hold a beat past the figure, flicker once, and go — about
   two seconds all told (they were lingering for three and a half). */
.lit .eye { animation: eyes 2.1s ease-out; }
.blood.lit .eye { animation-duration: 3s; }
@keyframes eyes { 0%, 8% { opacity: 0; } 14% { opacity: 1; } 58% { opacity: 1; } 66% { opacity: .3; } 72% { opacity: .85; } 100% { opacity: 0; } }

/* the eyes belong to the skull: they light with it and are gone when it is.
   Left on their own they float in open sky above the hood and read as a bug.
   Same 2.2s clock as the skull layer (lungefade: solid to 44%, out by 66%). */
.lit .eye, .blood.lit .eye { animation: eyes 2.2s ease-out; }
@keyframes eyes { 0%, 6% { opacity: 0; } 13% { opacity: 1; } 44% { opacity: 1; } 62% { opacity: 0; } 100% { opacity: 0; } }

/* ---- the garment, bigger --------------------------------------------------
   ~1.45x. It no longer queues under the headline: it rises in front of it, so
   the second line of type runs behind the hood. The figure, the zoom anchor
   and the dial spacing all hang off --rackw, so they follow. The name label
   goes (the card already says it) to buy back the height. */
.hero.vexo { --rackw: clamp(260px, min(46vw, 56vh), 760px); }
.hero.vexo .stage { margin-top: calc(var(--rackw) * -.2); margin-bottom: 0; }
.hero.vexo .dial { margin-top: calc(var(--rackw) * .065); margin-bottom: clamp(8px, 1.3vh, 16px); }
.hero.vexo .now { display: none; }
.hero.vexo h1 { font-size: clamp(40px, min(9vw, 11.5vh), 190px); }
.hero.vexo .hero-in { padding-bottom: clamp(16px, 2.4vh, 36px); }
.fcard.fl { bottom: 10%; } .fcard.fr { top: 34%; }
.wallword { top: 52%; } .wallword.right { top: 64%; }

/* the stage carries a transform (the push-in), which makes it its own layer at
   z:auto — below the headline`s z:1. It has to sit above the type. */
.hero.vexo .stage { z-index: 2; }

/* ---- the garment, doubled --------------------------------------------------
   It doesn't have to fit any more: its lower third sinks into a floor of
   shadow, and the dial and buttons stand on that. (A shadow layer, not a CSS
   mask — a mask would clip the skull where it rises above the stage box.) */
.hero.vexo { --rackw: clamp(300px, min(62vw, 80vh), 1040px); }
.hero.vexo .stage { margin-top: calc(var(--rackw) * -.17); margin-bottom: calc(var(--rackw) * -.27); }
.hero.vexo .hero-in:after { content: ""; position: absolute; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1); bottom: 0; height: calc(var(--rackw) * .62); z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(3, 3, 4, 0) 0%, rgba(3, 3, 4, .72) 38%, #030304 72%); opacity: calc(1 - var(--p, 0) * 5); }
.hero.vexo .dial, .hero.vexo .cta { position: relative; z-index: 4; }
.hero.vexo .dial { margin-top: 0; }
.fcard.fl { bottom: 44%; } .fcard.fr { top: 30%; }
.wallword { top: 44%; } .wallword.right { top: 56%; }

/* don't cover too much: the hood only kisses the bottom of the headline; the
   height comes out of the hem instead, which goes further into the floor. */
.hero.vexo { --rackw: clamp(300px, min(58vw, 74vh), 980px); }
.hero.vexo .stage { margin-top: calc(var(--rackw) * -.055); margin-bottom: calc(var(--rackw) * -.385); }
.hero.vexo .hero-in:after { height: calc(var(--rackw) * .44); background: linear-gradient(180deg, rgba(3, 3, 4, 0) 0%, rgba(3, 3, 4, .7) 45%, #030304 80%); }
.fcard.fl { bottom: 50%; } .fcard.fr { top: 26%; }

/* wide-screen fixes to the floor:
   - it ran out at the bottom of the content box, so on tall screens the hem
     showed again beneath it as a grey strip — it now runs past the hero's edge;
   - it began too high and dimmed the print — it stays clear for its top third
     and only then closes, so the artwork is never under it. */
.hero.vexo .hero-in:after { bottom: -30vh; height: calc(var(--rackw) * .44 + 30vh); background: linear-gradient(180deg, rgba(3, 3, 4, 0) 0%, rgba(3, 3, 4, 0) 16%, rgba(3, 3, 4, .78) 38%, #030304 56%); }
/* the fog was pooling into a grey band under the buttons */
.hero.vexo .fog { height: 30%; opacity: .55; bottom: 8%; }
/* the words on the right wall were behind the product card */
.wallword.right { top: 40%; }
.fcard.fr { top: 52%; }

/* ---- the deck --------------------------------------------------------------
   Everything under the garment is one instrument panel: what's showing, the
   dial, the way in. Hairline on top with a blood-red timer that runs until the
   rack turns; mono labels; the floor behind it. */
.deck { position: relative; z-index: 4; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(20px, 3vw, 56px); padding: 18px 0 0; border-top: 1px solid rgba(233, 226, 208, .16); text-align: left; animation: rise .8s .9s var(--ease) both; }
.deck:before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--blood-2); transform: scaleX(0); transform-origin: 0 50%; }
.deck.tick:before, .deck:not(.tick):before { animation: decktick 4.2s linear; }
.pin.scrub .deck:before { animation: none; }
@keyframes decktick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.deck small { display: block; font: 700 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; white-space: nowrap; }
.deck small em { font-style: normal; color: var(--blood-2); margin-left: 8px; }
.deck-now { display: flex; align-items: center; gap: 16px; text-decoration: none; justify-self: start; min-width: 0; }
.deck-now .thumb { width: 58px; height: 58px; flex: none; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); display: grid; place-items: center; }
.deck-now .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.deck-now .meta { min-width: 0; }
.deck-now b { display: block; font: 900 clamp(18px, 1.7vw, 28px)/1 var(--display); font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s var(--ease); }
.deck-now i { display: block; margin-top: 6px; font: 400 12px/1 var(--mono); font-style: normal; color: var(--mute); }
.deck-now .go { color: var(--blood-2); font-size: 20px; transition: transform .3s var(--ease); }
.deck-now:hover b { color: var(--blood-2); } .deck-now:hover .go { transform: translateX(6px); }
.deck-dial { text-align: center; }
.hero.vexo .deck .dial { margin: 0; }
.deck-go { justify-self: end; text-align: right; }
.hero.vexo .deck .cta { justify-content: flex-end; flex-wrap: nowrap; gap: 8px; animation: none; }
.deck .btn { min-height: 50px; padding: 0 22px; font-size: 15px; }
html.fx .pin .deck { opacity: calc(1 - var(--p, 0) * 4.5); }
html.fx .pin.scrub .deck { pointer-events: none; animation: none !important; }
.lit .deck { animation: hush 3.2s ease-in-out; }
@media (max-width: 980px) {
  .deck { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; align-items: center; }
  .deck-now, .deck-go { justify-self: center; text-align: center; }
  .deck-dial { order: -1; }
  .hero.vexo .deck .cta { justify-content: center; flex-wrap: wrap; }
  .deck-go small { display: none; }
}

.deck-now { max-width: 100%; }
.deck-now .meta { flex: 1 1 auto; overflow: hidden; }
.deck-now .go { flex: none; }

/* ---- the carousel ----------------------------------------------------------
   The next design waits half off the right edge of the screen, the last one
   half off the left — dimmed, smaller, cropped by the viewport. Click one and
   it takes the centre. The wall words are gone to make the room. */
.wallword { display: none; }
.rack .shot { pointer-events: none; }
.rack .shot.on { pointer-events: auto; z-index: 2; }
.rack .shot.next, .rack .shot.prev { opacity: .5; pointer-events: auto; cursor: pointer; z-index: 1; filter: brightness(.55) saturate(.7) drop-shadow(0 30px 50px rgba(0, 0, 0, .9)); transition: opacity .7s var(--ease), transform 1s var(--over), filter .4s var(--ease); }
.rack .shot.next { transform: translateX(calc(50vw - var(--rackw) * .2)) scale(.8); }
.rack .shot.prev { transform: translateX(calc(-50vw + var(--rackw) * .2)) scale(.8); }
.rack .shot.next:hover { opacity: .9; filter: brightness(.9) drop-shadow(0 30px 50px rgba(0, 0, 0, .9)); transform: translateX(calc(50vw - var(--rackw) * .26)) scale(.84); }
.rack .shot.prev:hover { opacity: .9; filter: brightness(.9) drop-shadow(0 30px 50px rgba(0, 0, 0, .9)); transform: translateX(calc(-50vw + var(--rackw) * .26)) scale(.84); }
/* the floor has to reach the teasers too: full bleed, not just the content width */
.hero.vexo .hero-in:after { left: calc(50% - 50vw); right: calc(50% - 50vw); }
/* they bow out when the camera goes in */
html.fx .pin.scrub .rack .shot.next, html.fx .pin.scrub .rack .shot.prev { opacity: calc(.5 - var(--p, 0) * 4); transition: none; }

/* a leftover: every shot still carried the single-garment hero's rise+bob,
   and an animation's transform REPLACES the class transform — so the teasers
   drifted toward the centre and back every 7s. The float belongs to the rack. */
.hero.vexo .rack .shot { animation: none; }
.hero.vexo .rack .shot.on { animation: none; }
.lit .rack .shot.on { animation: xray 2.2s ease-out; }
.fx .hero.vexo .rack { animation: rise .9s .5s var(--ease) both, bob 7s 1.6s ease-in-out infinite; }
.jolt .rack { animation: jolt 2.2s var(--ease); }
html.fx .pin.scrub .rack { animation: none !important; }
/* black hoodies on a dark sky need light behind them to read at all */
.rack .shot.next, .rack .shot.prev { opacity: .8; filter: brightness(.7) saturate(.85) drop-shadow(0 0 60px color-mix(in srgb, var(--hue) 50%, transparent)) drop-shadow(0 30px 50px rgba(0, 0, 0, .9)); }
.rack .shot.next:hover, .rack .shot.prev:hover { opacity: 1; filter: brightness(1) drop-shadow(0 0 70px color-mix(in srgb, var(--hue) 60%, transparent)) drop-shadow(0 30px 50px rgba(0, 0, 0, .9)); }
html.fx .pin.scrub .rack .shot.next, html.fx .pin.scrub .rack .shot.prev { opacity: calc(.8 - var(--p, 0) * 6); }

/* the teasers come out of the dark rather than being cut by the screen: each
   dissolves toward its outer edge. On the image itself, so it travels with it. */
.rack .shot.next { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 22%, rgba(0, 0, 0, .35) 52%, transparent 78%); mask-image: linear-gradient(90deg, #000 0, #000 22%, rgba(0, 0, 0, .35) 52%, transparent 78%); }
.rack .shot.prev { -webkit-mask-image: linear-gradient(270deg, #000 0, #000 22%, rgba(0, 0, 0, .35) 52%, transparent 78%); mask-image: linear-gradient(270deg, #000 0, #000 22%, rgba(0, 0, 0, .35) 52%, transparent 78%); }

/* the deck at mid widths: three columns can't hold the name, the dial and two
   buttons, and the name was the one being crushed to zero. Two rows instead —
   the dial across the top, name left and buttons right beneath it. */
.deck-now .meta { min-width: 150px; }
@media (max-width: 1240px) and (min-width: 981px) {
  .deck { grid-template-columns: 1fr auto; grid-template-areas: "dial dial" "now go"; row-gap: 14px; padding-top: 14px; }
  .deck-dial { grid-area: dial; } .deck-now { grid-area: now; } .deck-go { grid-area: go; }
  .deck-dial small, .deck-go small { display: none; }
  .hero.vexo .stage { margin-bottom: calc(var(--rackw) * -.47); }
}
@media (max-width: 980px) {
  .deck-now .thumb { display: none; }
  .deck-now small { margin-bottom: 8px; }
  .hero.vexo .stage { margin-bottom: calc(var(--rackw) * -.3); }
}

/* the centre garment is a way in to its product page */
.rack .shot.on { cursor: pointer; }

/* the seal stands beside the product in the deck, the same size as its thumb */
.deck-left { display: flex; align-items: center; gap: 14px; justify-self: start; min-width: 0; max-width: 100%; }
.deck-seal { flex: none; line-height: 0; }
.deck-seal .seal, .bar.scrolled .deck-seal .seal { width: 58px; height: 58px; }
.deck-left .deck-now { min-width: 0; }
@media (max-width: 1240px) and (min-width: 981px) { .deck-left { grid-area: now; } }
@media (max-width: 980px) { .deck-seal { display: none; } .deck-left { justify-self: center; } }

/* ---- the top deck ----------------------------------------------------------
   The header in the same language as the deck under the hero: a hairline rule,
   mono labels over display type, slabs not pills, and the blood line running
   along the rule (it is the scroll progress). The seal is doubled and hangs
   through the hairline like a badge. */
.bar, .bar.scrolled { height: 86px; background: linear-gradient(180deg, #030304 0%, rgba(3, 3, 4, .9) 100%); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(233, 226, 208, .16); align-items: center; }
.overhero .bar:not(.scrolled) { background: linear-gradient(180deg, #030304 0%, rgba(3, 3, 4, .9) 100%); border-color: rgba(233, 226, 208, .16); }
.lab { display: block; font: 700 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; white-space: nowrap; }
.bar nav, .bar.scrolled nav { display: block; background: none; border: 0; border-radius: 0; padding: 0; }
.bar nav .links { display: flex; gap: clamp(16px, 2vw, 34px); }
.bar nav a, .bar.scrolled nav a { font: 900 18px/1 var(--display); font-stretch: 75%; letter-spacing: .05em; padding: 0 0 6px; }
.bar nav a:after, .bar.scrolled nav a:after { left: 0; right: 0; bottom: 0; }
.bar nav a.hot:before { content: ""; }
.cartbox { order: 3; justify-self: end; text-align: right; }
.bar .cartlink, .bar.scrolled .cartlink { order: 0; font: 900 16px/1 var(--display); font-stretch: 75%; letter-spacing: .08em; padding: 7px 12px; border-width: 2px; }
.cartbox .lab { margin-bottom: 7px; }
/* the badge */
.bar .home { align-self: start; position: relative; z-index: 2; margin-top: 8px; }
.bar .seal, .bar.scrolled .seal { width: 124px; height: 124px; }
img.seal { box-shadow: 0 0 0 1px rgba(233, 226, 208, .22), 0 0 0 6px #030304, 0 14px 34px rgba(0, 0, 0, .75); }
.deck-seal img.seal { box-shadow: 0 0 0 1px rgba(233, 226, 208, .18); }
/* the blood line rides the header's rule */
.prog { top: calc(var(--annc, 0px) + 85px); height: 2px; z-index: 31; }
.has-annc .prog { top: calc(var(--annc) + 85px); }
html.js .overhero:not(.scrolled) .prog { opacity: 0; }
main, .has-annc main { padding-top: calc(86px + var(--annc, 0px)); }
.overhero main, .has-annc.overhero main { padding-top: 0; }
.pagehead { padding-top: clamp(84px, 9vw, 140px); }
@media (max-width: 1100px) { .bar nav a, .bar.scrolled nav a { font-size: 16px; } .bar .seal, .bar.scrolled .seal { width: 104px; height: 104px; } }
@media (max-width: 640px) {
  .lab { display: none; }
  .bar, .bar.scrolled { height: var(--headh); }
  .bar nav .links { gap: 16px; justify-content: center; }
  .bar nav a, .bar.scrolled nav a { font-size: 14px; }
  .cartbox { grid-column: 3; grid-row: 1; align-self: center; }
  .bar .home { margin-top: 0; align-self: center; }
  .bar .seal, .bar.scrolled .seal { width: 60px; height: 60px; }
  .prog, .has-annc .prog { top: calc(var(--annc, 0px) + var(--headh) - 1px); }
  main, .has-annc main { padding-top: calc(var(--headh) + var(--annc, 0px)); }
}

/* ---- the stalls -------------------------------------------------------------
   One per creature: hoodie behind, tee in front, a pool of the design's own
   colour under them, a hollow numeral behind that. No boxes. The columns are
   staggered so the row doesn't read as a table. */
.stalls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(56px, 7vw, 120px) clamp(24px, 4vw, 72px); padding-bottom: 60px; }
.stall { position: relative; }
.stall:nth-child(3n + 2) { margin-top: clamp(40px, 6vw, 96px); }
.stall .no { position: absolute; left: -2%; top: -9%; z-index: 0; font: 900 clamp(110px, 15vw, 250px)/.8 var(--display); font-stretch: 75%; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--tint) 46%, transparent); pointer-events: none; transition: -webkit-text-stroke-color .4s var(--ease), transform .8s var(--over); }
.stall:hover .no { -webkit-text-stroke-color: var(--tint); transform: translate(-6px, -6px); }
.pair { position: relative; z-index: 1; aspect-ratio: 1 / .86; }
.pair:before { content: ""; position: absolute; left: 4%; right: 4%; bottom: -4%; height: 46%; background: radial-gradient(ellipse 50% 50% at 50% 60%, color-mix(in srgb, var(--tint) 46%, transparent), transparent 72%); filter: blur(10px); opacity: .8; transition: opacity .4s var(--ease); }
.stall:hover .pair:before { opacity: 1; }
.pair .g { position: absolute; display: block; transition: transform .7s var(--over), filter .4s var(--ease), opacity .4s var(--ease); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .85)); }
.pair .g img { width: 100%; height: auto; }
.pair .hood { left: -3%; top: -2%; width: 80%; z-index: 1; transform: rotate(-4deg); }
.pair .tee { right: -4%; bottom: -3%; width: 62%; z-index: 2; transform: rotate(5deg); }
.pair .g:hover { z-index: 3; filter: drop-shadow(0 30px 36px rgba(0, 0, 0, .9)) drop-shadow(0 0 40px color-mix(in srgb, var(--tint) 50%, transparent)); }
.pair .hood:hover { transform: rotate(-1deg) scale(1.06); }
.pair .tee:hover { transform: rotate(2deg) scale(1.08); }
.pair:hover .g:not(:hover) { opacity: .45; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .85)) brightness(.6); }
.stall h3 { position: relative; z-index: 2; margin-top: 22px; font-size: clamp(34px, 3.6vw, 64px); line-height: .9; }
.stall .buy { position: relative; z-index: 2; display: flex; gap: 22px; margin: 14px 0 0; font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.stall .buy a { text-decoration: none; padding-bottom: 7px; border-bottom: 2px solid color-mix(in srgb, var(--tint) 60%, transparent); transition: border-color .25s var(--ease), color .25s var(--ease); }
.stall .buy a:hover { border-color: var(--tint); color: var(--tint); }
.stall .buy i { font-style: normal; font-weight: 400; color: var(--mute); margin-left: 6px; letter-spacing: .04em; }
@media (max-width: 980px) { .stalls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stall:nth-child(3n + 2) { margin-top: 0; } .stall:nth-child(2n) { margin-top: 48px; } }
@media (max-width: 560px) { .stalls { grid-template-columns: 1fr; } .stall:nth-child(2n) { margin-top: 0; } }

/* and everywhere else, garments stand on the dark rather than in a frame */
.plate.cut { background: none; outline: 0; padding: 2%; }
.plate.cut:before { z-index: 3; }
.plate.cut:after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 40%; z-index: -1; background: radial-gradient(ellipse 50% 50% at 50% 70%, color-mix(in srgb, var(--tint, #5CD7DE) 40%, transparent), transparent 72%); filter: blur(8px); opacity: .7; transition: opacity .4s var(--ease); }
.card:hover .plate.cut:after { opacity: 1; }
.plate.cut img { filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .85)); }

/* ---- the top deck, executed properly ----------------------------------------
   The 124px seal was IN the grid row, so the row grew to 132px inside an 86px
   bar and everything centred against that — the links landed on the rule and
   the cart crossed it. The seal now hangs outside the flow; the row is only as
   tall as the nav. And the bar is solid: a translucent one let whatever was
   scrolling under it ghost through the labels. */
.bar, .bar.scrolled, .overhero .bar:not(.scrolled) { background: #050505; backdrop-filter: none; grid-template-columns: 1fr 140px 1fr; align-items: center; padding-bottom: 4px; }
.bar .home { position: absolute; left: 50%; top: 10px; margin: 0; transform: translateX(-50%); align-self: auto; }
.bar nav { grid-column: 1; } .cartbox { grid-column: 3; }
.bar .lab, .cartbox .lab { margin-bottom: 9px; }
.bar nav a, .bar.scrolled nav a { padding-bottom: 5px; }
.bar .cartlink, .bar.scrolled .cartlink { padding: 6px 12px; }
.bar .seal, .bar.scrolled .seal { width: 116px; height: 116px; }
.home:hover .seal { transform: rotate(-10deg) scale(1.04); }
@media (max-width: 1100px) { .bar, .bar.scrolled { grid-template-columns: 1fr 116px 1fr; } .bar .seal, .bar.scrolled .seal { width: 96px; height: 96px; } }
@media (max-width: 640px) {
  .bar, .bar.scrolled, .overhero .bar:not(.scrolled) { grid-template-columns: 1fr auto 1fr; padding-bottom: 0; }
  .bar .home { position: static; transform: none; grid-column: 2; grid-row: 1; }
  .home:hover .seal { transform: none; }
  .bar nav { grid-column: 1 / -1; }
}

/* a size this colour doesn't come in */
.picks label.off { cursor: not-allowed; }
.picks label.off span { opacity: .28; text-decoration: line-through; border-style: dashed; }
.picks label.off:hover span { border-color: #45454a; }

/* ---- "added to your haul" ---------------------------------------------------
   Drops from under the cart button; the deck's language: hairline, mono label,
   display name, slabs, and a blood line that runs out as it prepares to leave. */
.added { position: fixed; z-index: 45; top: calc(var(--annc, 0px) + 86px + 12px); right: var(--gut); width: min(400px, calc(100vw - 32px)); background: #0a0a0b; border: 1px solid rgba(233, 226, 208, .18); border-top: 0; box-shadow: 0 30px 70px rgba(0, 0, 0, .8); padding: 18px 18px 18px; opacity: 0; transform: translateY(-14px); transition: opacity .3s var(--ease), transform .45s var(--over); }
.added.in { opacity: 1; transform: none; }
.added:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blood-2); transform-origin: 100% 50%; }
.added.in:before { animation: addedrun 7s linear forwards; }
.added.hold:before { animation-play-state: paused; }
@keyframes addedrun { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.added-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.added-head small { font: 700 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--blood-2); }
.added-x { background: none; border: 0; color: var(--mute); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.added-x:hover { color: var(--bone); }
.added-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; }
.added-thumb { width: 72px; height: 72px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); display: grid; place-items: center; }
.added-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.added-meta b { display: block; font: 900 19px/1.05 var(--display); font-stretch: 75%; text-transform: uppercase; }
.added-meta i { display: block; margin-top: 7px; font: 400 11px/1.4 var(--mono); font-style: normal; color: var(--mute); letter-spacing: .04em; }
.added-amt { font: 900 22px/1 var(--display); font-stretch: 75%; color: var(--cyan); }
.added-sum { margin: 14px 0 14px; padding-top: 12px; border-top: 1px solid var(--line); font: 400 11px/1.4 var(--mono); color: var(--mute); letter-spacing: .04em; }
.added-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.added-act .btn { min-height: 46px; padding: 0 10px; font-size: 14px; }
/* and the cart button takes the hit */
.cartlink.bump { animation: bump .6s var(--over); }
@keyframes bump { 30% { transform: scale(1.14); background: var(--blood); border-color: var(--blood); color: #fff; } }
@media (max-width: 640px) { .added { top: auto; bottom: 12px; right: 16px; left: 16px; width: auto; border-top: 1px solid rgba(233, 226, 208, .18); transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .added.in:before { animation: none; } }

/* a mockup that is a photograph (own background) is framed and fills the frame */
.plate.photo { background: #e9e9e6; outline: 1px solid var(--line); outline-offset: -1px; padding: 0; }
.plate.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: none; }
.card:hover .plate.photo img { transform: scale(1.05); }
.pdp .plate.photo { box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
/* the added panel is solid, whatever is behind it */
.added { background: #0a0a0b; isolation: isolate; }
.added.in { opacity: 1 !important; }

/* ---- the TV cut (/tease) ------------------------------------------------
   The top of the site alone, for a screen on a wall: no bar, no footer, no
   cursor, nothing to press; the push-in runs on a clock (fx.js) and ends on
   a card. */
body.tease { overflow: hidden; cursor: none; }
body.tease .annc, body.tease .bar, body.tease .foot, body.tease .prog, body.tease .skip,
body.tease .deck-go { display: none !important; }
body.tease .pin { height: 100vh; }
.tease-end { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2.4vmin; text-align: center; padding: 6vmin; background: #000;
  opacity: 0; pointer-events: none; transition: opacity 1s ease; }
body.tease.ending .tease-end { opacity: 1; }
.tease-seal svg, .tease-seal img { width: 22vmin; height: auto; display: block; }
.tease-end h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(34px, 8.5vmin, 170px); line-height: .92; letter-spacing: -.01em; color: #fff;
  max-width: 92vw; white-space: normal; overflow-wrap: break-word; text-wrap: balance; }
.tease-end p { margin: 0; font-family: 'Space Mono', monospace; font-size: clamp(14px, 2.6vmin, 40px); color: #5CD7DE;
  letter-spacing: .04em; }
.tease-qr { width: 18vmin; height: 18vmin; background: #fff; padding: 1.2vmin; border-radius: 1vmin; image-rendering: pixelated; }
body.tease.ending .tease-end h2 { animation: tease-in 1.2s cubic-bezier(.16,1,.3,1) both .3s; }
body.tease.ending .tease-end p { animation: tease-in 1.2s cubic-bezier(.16,1,.3,1) both .7s; }
@keyframes tease-in { from { opacity: 0; transform: translateY(3vmin); } to { opacity: 1; transform: none; } }

/* ---- the hybrid: the garment leads, the person supports -------------------
   Under the cut-out, one photograph of it being worn — black and white like
   every other photograph here, so only the garment above it carries colour.
   Colour comes back on hover for anyone who wants to check it. */
.pdp .shots { position: sticky; top: 130px; }
.onbody { margin: 18px 0 0; display: grid; grid-template-columns: 38% 1fr; gap: 18px; align-items: end; }
.onbody img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.12); outline: 1px solid var(--line); outline-offset: -1px; transition: filter .5s var(--ease); }
.onbody:hover img { filter: none; }
.onbody figcaption { font: 700 10px/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.onbody figcaption:after { content: "Hover for colour. Fit is unisex, true to size."; display: block; margin-top: 8px; letter-spacing: .04em; text-transform: none; font-weight: 400; }
.pdp .plate.cut { aspect-ratio: 1 / 1; }
@media (max-width: 860px) { .pdp .shots { position: static; } }

/* one photograph standing in for every colour stays black and white */
.onbody.mono:hover img { filter: grayscale(1) contrast(1.12); }
.onbody.mono figcaption:after { content: "Fit is unisex, true to size."; }

/* ---- the TV cut, made light enough for a stick --------------------------
   A Fire TV's browser cannot keep up with the full room: animated grain over
   the whole glass, blurred fog and beam, blend modes stacked on moving
   layers, double drop-shadows on every hoodie as it changes, a spinning
   conic gradient, bats. On /tease those go or hold still; the storm, the
   rack changing and the lightning stay. */
body.tease .grain, body.tease .fog, body.tease .bat, body.tease .hero.vexo .rays { display: none !important; }
body.tease .hero.vexo .beam { filter: none; animation: none; opacity: .5; mix-blend-mode: normal; }
body.tease .hero.vexo .glow { animation: none; mix-blend-mode: normal; opacity: .7; }
body.tease .sky.layered:before, body.tease .hero.vexo .sky:before { mix-blend-mode: normal; opacity: .22; }
body.tease .hero.vexo .sky.layered .cl { transition: none; will-change: auto; }
body.tease .hero.vexo .sky.layered .far { filter: grayscale(1) brightness(.3); }
body.tease .hero.vexo .sky.layered .mid { filter: grayscale(1) brightness(.38); }
body.tease .rack .shot, body.tease .stage .shot { filter: none; animation: none; }
body.tease .rack .shot { transition: opacity .9s ease; transform: none; }
body.tease .bolt svg { filter: none; }
body.tease .hero.vexo:after { mix-blend-mode: normal; }

/* teaser fix: a mask clips to the image's box, so the glow (a drop-shadow that
   spills outside the garment) was being cut off square — a lit rectangle with a
   hard inner edge. No shadows on the teasers at all, and the mask now feathers
   every side of the box, so nothing of the box can ever show. */
/* (.hero.vexo .rack .shot carries the glow at higher specificity — match it) */
.hero.vexo .rack .shot.next, .hero.vexo .rack .shot.prev { filter: brightness(.78) saturate(.9); }
.hero.vexo .rack .shot.next:hover, .hero.vexo .rack .shot.prev:hover { filter: brightness(1); }
.rack .shot.next { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 26%, rgba(0, 0, 0, .35) 54%, transparent 80%), linear-gradient(180deg, transparent 0, #000 6%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 26%, rgba(0, 0, 0, .35) 54%, transparent 80%), linear-gradient(180deg, transparent 0, #000 6%, #000 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.rack .shot.prev { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 9%, #000 26%, rgba(0, 0, 0, .35) 54%, transparent 80%), linear-gradient(180deg, transparent 0, #000 6%, #000 100%); mask-image: linear-gradient(270deg, transparent 0, #000 9%, #000 26%, rgba(0, 0, 0, .35) 54%, transparent 80%), linear-gradient(180deg, transparent 0, #000 6%, #000 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }

/* ---- no borders on the figure ------------------------------------------------
   Same trap as the teasers: the figure's glow was a drop-shadow, and its mask
   (which hides the doubled skull) clips to the image box — so the glow was cut
   off square and showed as a lit rectangle. The bones carry no shadow at all. */
.wraith img, .blood .wraith img { filter: grayscale(1) contrast(1.55) brightness(1.05); }

/* ---- mobile pass ---------------------------------------------------------------
   The headline is the poster; the hoodie fills the width; one way in; teasers are
   slivers at the edges; no camera move (fx.js also refuses it), so the page just
   scrolls. */
@media (max-width: 640px) {
  html.fx .pin { height: auto; }
  html.fx .pin .hero, .hero.vexo { position: relative; height: auto; min-height: 0; }
  html.js .overhero .hero.vexo .hero-in { padding-bottom: 30px; }
  html.fx .pin .stage { transform: none; }
  .pinblack, .hero.vexo .vig:before { display: none; }
  .hero.vexo { align-items: flex-start; --rackw: min(88vw, 46svh); }
  html.js .overhero .hero.vexo .hero-in { padding-top: clamp(26px, 5svh, 48px); padding-bottom: 22px; }
  .tag { margin-bottom: 16px; padding: 9px 13px; font-size: 10px; }
  .hero.vexo h1 { font-size: clamp(56px, 17.4vw, 104px); line-height: .84; letter-spacing: -.02em; }
  .hero.vexo .stage { margin-top: calc(var(--rackw) * -.03); margin-bottom: calc(var(--rackw) * -.3); }
  /* the next and the last one: a sliver at each edge, not a crowd behind the garment */
  .rack .shot.next { transform: translateX(calc(50vw + var(--rackw) * .12)) scale(.6); }
  .rack .shot.prev { transform: translateX(calc(-50vw - var(--rackw) * .12)) scale(.6); }
  .hero.vexo .rack .shot.next, .hero.vexo .rack .shot.prev { opacity: .6; }
  /* the deck, stacked: what it is, the dial, one way in */
  .deck { grid-template-columns: 1fr; justify-items: center; gap: 14px; padding-top: 14px; text-align: center; }
  .deck-left { order: 1; justify-self: center; }
  .deck-dial { order: 2; }
  .deck-go { order: 3; justify-self: stretch; width: 100%; }
  .deck-now { flex-direction: column; gap: 4px; }
  .deck-now .go { display: none; }
  .deck-now small { margin-bottom: 6px; }
  .deck-now b { font-size: 24px; white-space: normal; line-height: 1; }
  .deck-dial small, .deck-go small { display: none; }
  .hero.vexo .deck .dial { gap: 8px; }
  .dial button { width: 44px; padding: 5px; }
  .hero.vexo .deck .cta { display: block; }
  .deck .btn { width: 100%; min-height: 56px; font-size: 17px; }
  .deck .btn.ghost { display: none; }            /* the originals: not on a phone */
  .hero.vexo .hero-in:after { height: calc(var(--rackw) * .7); }
  /* sections breathe less, type stays big */
  .band { padding: 64px 0; }
  .crypt h2, .head h2 { font-size: clamp(46px, 14vw, 84px); }
  .head { margin-bottom: 28px; }
  .stalls { gap: 64px 0; }
  .stall h3 { font-size: 40px; }
  .slab { min-height: 74svh; }
  .slab h2 { font-size: clamp(44px, 13vw, 80px); }
  .moon { width: 96px; right: 5vw; top: 18px; }
  .pdp h1 { font-size: clamp(34px, 10vw, 52px); }
  .picks span { min-height: 48px; }
}

/* ---- the push-in, back on phones ------------------------------------------------
   Overrides the "no pin on mobile" rules above. Only under html.fx, so reduced
   motion and no-JS still get a page that simply scrolls. */
@media (max-width: 640px) {
  html.fx .pin { height: 230svh; }
  html.fx .pin .hero.vexo { position: sticky; top: 0; height: 100svh; min-height: 0; }
  html.fx .pin .stage { transform: translateY(var(--ty, 0px)) scale(var(--z, 1)); }
  html.fx .pinblack, html.fx .hero.vexo .vig:before { display: block; }
}

/* ---- the mobile header, last word ----------------------------------------------
   The desktop "top deck" rules came after the mobile ones and won: an 86px bar
   (too short for two rows, so the links fell out of it onto the page), a 96px
   seal, an absolutely-placed badge. This block is last on purpose. Two rows in a
   solid bar of known height: seal centred with the cart beside it, links beneath. */
@media (max-width: 640px) {
  :root { --headh: 102px; }
  .bar, .bar.scrolled, .overhero .bar:not(.scrolled) { height: var(--headh); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 58px auto; row-gap: 6px; align-content: start; align-items: center; padding: 8px 16px 0; background: #050505; }
  .bar .home { position: static; transform: none; grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .bar .seal, .bar.scrolled .seal { width: 56px; height: 56px; }
  img.seal { box-shadow: 0 0 0 1px rgba(233, 226, 208, .22); }
  .home:hover .seal { transform: none; }
  .cartbox { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  .bar .cartlink, .bar.scrolled .cartlink { font-size: 14px; padding: 6px 10px; }
  .lab { display: none; }
  .bar nav, .bar.scrolled nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: auto; margin: 0; }
  .bar nav .links { gap: 18px; justify-content: center; }
  .bar nav a, .bar.scrolled nav a { font-size: 15px; padding: 0 0 4px; }
  .prog, .has-annc .prog { top: calc(var(--annc, 0px) + var(--headh) - 2px); }
  main, .has-annc main { padding-top: calc(var(--headh) + var(--annc, 0px)); }
  .overhero main, .has-annc.overhero main { padding-top: 0; }
  .pagehead { padding-top: 40px; }
  .annc { font-size: 10px; letter-spacing: .08em; gap: 7px; }
}

/* mobile: the seal anchors the left, the cart the right, the links run beneath */
@media (max-width: 640px) {
  .bar, .bar.scrolled, .overhero .bar:not(.scrolled) { grid-template-columns: auto 1fr auto; }
  .bar .home { grid-column: 1; justify-self: start; }
  .cartbox { grid-column: 3; }
  .bar nav, .bar.scrolled nav { justify-self: stretch; }
  .bar nav .links { justify-content: space-between; gap: 10px; }
}

/* ---- the mobile menu --------------------------------------------------------------
   Bar: seal left, cart and a MENU slab right. The menu is the whole screen: the
   links as a poster — hollow numerals, display type, Halloween in blood with the
   countdown — rising in one after another under a lightning flash. Without JS the
   two-row bar above still stands (these rules hang off html.js). */
.menu-btn, .mnav { display: none; }
@media (max-width: 640px) {
  html.js { --headh: 72px; }
  html.js .bar, html.js .bar.scrolled, html.js .overhero .bar:not(.scrolled) { height: 72px; grid-template-columns: auto 1fr auto auto; grid-template-rows: 1fr; column-gap: 8px; padding: 0 16px; align-items: center; }
  html.js .bar nav { display: none; }
  html.js .bar .home { grid-column: 1; grid-row: 1; }
  html.js .bar .seal, html.js .bar.scrolled .seal { width: 52px; height: 52px; }
  html.js .cartbox { grid-column: 3; grid-row: 1; }
  html.js .menu-btn { display: inline-flex; grid-column: 4; grid-row: 1; align-items: center; gap: 9px; height: 38px; padding: 0 12px; background: var(--blood); color: #fff; border: 2px solid var(--blood); font: 900 14px/1 var(--display); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .menu-btn i { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; display: block; }
  html.js .bar .cartlink, html.js .bar.scrolled .cartlink { height: 38px; display: inline-flex; align-items: center; padding: 0 10px; }

  .mnav { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 70; padding: 0 20px calc(18px + env(safe-area-inset-bottom)); background: radial-gradient(120% 60% at 50% 0, rgba(200, 16, 46, .22), transparent 60%), radial-gradient(90% 50% at 50% 100%, rgba(122, 63, 242, .2), transparent 65%), #050505; opacity: 0; visibility: hidden; transform: translateY(-2%); transition: opacity .35s var(--ease), transform .45s var(--over), visibility 0s .45s; overflow-y: auto; }
  .mnav[hidden] { display: none; }
  .mnav-open .mnav { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .45s var(--over), visibility 0s; }
  .mnav-open { overflow: hidden; }
  .mnav-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 70% -10%, rgba(255, 255, 255, .9), rgba(176, 208, 255, .35) 45%, transparent 75%); opacity: 0; mix-blend-mode: screen; }
  .mnav-open .mnav-flash { animation: flash 1.1s ease-out .12s; }
  .mnav-top { display: flex; align-items: center; justify-content: space-between; height: 72px; flex: none; }
  .mnav-top .seal { width: 52px; height: 52px; }
  .mnav-x { background: none; border: 2px solid var(--bone); color: var(--bone); height: 38px; padding: 0 12px; font: 900 14px/1 var(--display); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .mnav-x i { font-style: normal; font-size: 20px; line-height: 0; }
  .mnav-links { display: flex; flex-direction: column; margin: auto 0; padding: 10px 0; }
  .mnav-links a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding: 12px 0 10px; border-top: 1px solid rgba(233, 226, 208, .14); text-decoration: none; opacity: 0; transform: translateY(26px); transition: opacity .5s var(--ease), transform .7s var(--over); transition-delay: 0s; }
  .mnav-links a:last-child { border-bottom: 1px solid rgba(233, 226, 208, .14); }
  .mnav-open .mnav-links a { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i) * 70ms); }
  .mnav-links small { font: 700 11px/1 var(--mono); letter-spacing: .14em; color: var(--mute); }
  .mnav-links b { font: 900 clamp(46px, 15.5vw, 84px)/.9 var(--display); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; }
  .mnav-links a.hot b { color: var(--blood-2); text-shadow: 0 0 34px rgba(255, 42, 63, .45); }
  .mnav-links a[aria-current] b { color: transparent; -webkit-text-stroke: 2px var(--bone); }
  .mnav-links a.hot[aria-current] b { -webkit-text-stroke-color: var(--blood-2); text-shadow: none; }
  .mnav-links em { font: 700 10px/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--blood-2); white-space: nowrap; }
  .mnav-links em [data-cart-count] { display: inline-grid; place-items: center; min-width: 22px; height: 22px; background: var(--blood); color: #fff; letter-spacing: 0; font-size: 12px; }
  .mnav-links em [data-cart-count][hidden] { display: none; }
  .mnav-links a:active b { transform: translateX(6px); }
  .mnav-foot { flex: none; opacity: 0; transition: opacity .5s var(--ease) .55s; }
  .mnav-open .mnav-foot { opacity: 1; }
  .mnav-foot .motto { font-size: 24px; margin: 0 0 12px; }
  .mnav-foot p:last-child { display: flex; gap: 18px; margin: 0; font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
  .mnav-foot a { color: #cfc8b8; text-decoration: none; }
  /* with the menu doing the work, the page sits under a one-row bar */
  html.js main, html.js .has-annc main { padding-top: calc(72px + var(--annc, 0px)); }
  html.js .overhero main, html.js .has-annc.overhero main { padding-top: 0; }
  html.js .prog, html.js .has-annc .prog { top: calc(var(--annc, 0px) + 70px); }
}
@media (prefers-reduced-motion: reduce) { .mnav-links a, .mnav { transition: none !important; } .mnav-open .mnav-flash { animation: none; } }

/* menu fit: the longest word ("COLLECTIONS") sets the size; tags sit under their link */
@media (max-width: 640px) {
  .mnav-links a { grid-template-columns: 26px 1fr; row-gap: 6px; padding: 12px 0 11px; }
  .mnav-links b { font-size: clamp(40px, 12.4vw, 78px); }
  .mnav-links em { grid-column: 2; }
}

/* the footer carries the seal — the same mark as the header and the menu */
.footmark .seal { width: clamp(112px, 12vw, 168px); height: clamp(112px, 12vw, 168px); transition: transform .6s var(--over); }
.footmark a { display: inline-block; line-height: 0; }
.footmark a:hover .seal { transform: rotate(-10deg) scale(1.04); }
.footmark .motto { margin-top: 20px; }

/* a marked-down price: the old one struck through in blood */
.card .pr s, .pdp .price s.was { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--blood-2); text-decoration-thickness: 2px; margin-right: 6px; }
.pdp .price s.was { font: 900 24px/1 var(--display); font-stretch: 75%; }

/* ---- the seal is the real logo now (the brand's own print file: white on
   clear, whole ring, breathing room). It sits on its own black disc so it
   reads over anything. Was: a crop of a back-print photo, cut off at the ring. */
img.seal { background: #050505; object-fit: contain; }

/* legal pages + the footer's small links */
.prose ul { padding-left: 1.1em; margin: 0 0 1em; }
.prose li { margin: .4em 0; }
.prose.legal { font-size: clamp(16px, 1.2vw, 19px); }
.prose.legal h2 { font-size: clamp(24px, 2.2vw, 34px); }
.foot .fine a { color: inherit; text-underline-offset: 3px; }
.foot .fine a:hover { color: var(--bone); }

/* collection tiles: the pictures were too dark to read as pictures (Dan: "fill
   these"). Brighter at rest, full on hover; the type keeps its own shadow. */
.tile img { filter: grayscale(1) brightness(.62) contrast(1.18); }
.tile:hover img { filter: grayscale(1) brightness(.95) contrast(1.22); }
.tile.in-color img { filter: brightness(.78) contrast(1.08); }
.tile.in-color:hover img { filter: brightness(1.05) contrast(1.1); }
.tile:after { background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 32%, transparent 68%); }
.tile h3, .tile p { text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.tile .n { color: #d9d2c0; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }

/* the maker's mark, under the fine print */
.foot .credit { margin-top: 10px; opacity: .8; }
.foot .credit span[aria-hidden] { color: var(--blood-2); }
.foot .credit a { text-decoration: underline; text-decoration-color: var(--blood-2); text-underline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }