@charset "UTF-8";

/* Ersatz für Arial Black (27.10.2026, Michas iPhone-Screenshot): Das iPhone hat kein Arial Black und nahm Impact, das viel
   schmaler ist; mit den engen Buchstabenabständen quetschte sich „KALTE LUFT.“ ineinander. Archivo Black (OFL) hat
   dieselben Buchstabenbreiten, die Höhenwerte sind in der Datei auf Arial Black gesetzt. Steht in --display HINTER Arial
   Black, Rechner mit Arial Black laden die Datei also gar nicht. Ein Schnitt für alle Stärken, sonst verdickt der Browser
   ihn künstlich; block statt swap, damit nicht kurz die gequetschte Impact-Fassung aufblitzt. */
@font-face { font-family: "Archivo Black Web"; src: url("assets/fonts/archivo-black-web.woff2") format("woff2"); font-style: normal; font-weight: 1 1000; font-display: block; }

:root {
  color-scheme: dark;
  --black: #080808;
  --panel: #111111;
  --panel-2: #181818;
  --paper: #e8e8e5;
  --muted: #92928f;
  --dim: #5d5d5b;
  --line: rgba(232, 232, 229, .19);
  --line-soft: rgba(232, 232, 229, .09);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --display: "Arial Black", "Archivo Black Web", Impact, Haettenschweiler, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 6.4vw, 106px);
  --ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }
/* Kopfleiste seit 06.10.2026 schmaler: 62 px, am Handy 54 px. Sprungziele landen 8 px darunter. */
html { scroll-behavior: smooth; scroll-padding-top: 70px; background: var(--black); }
body { margin: 0; color: var(--paper); background: var(--black); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
button, input, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { color: var(--black); background: var(--paper); }
:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 12px 16px; color: var(--black); background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.announcement { display: flex; min-height: 27px; align-items: center; justify-content: center; padding: 5px 12px; color: #c9c9c6; background: #050505; border-bottom: 1px solid var(--line-soft); text-align: center; font: 9px/1.2 var(--mono); letter-spacing: .19em; }
.site-header { position: sticky; z-index: 30; top: 0; display: grid; min-height: 62px; grid-template-columns: minmax(160px, 1fr) auto minmax(190px, 1fr); align-items: center; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: rgba(8,8,8,.94); backdrop-filter: blur(12px); }
.wordmark { display: inline-flex; width: max-content; align-items: center; gap: 9px; font: 700 12px/1.1 var(--mono); letter-spacing: .18em; }
.wordmark > span:last-child { display: block; }
.wordmark > span:last-child > span { color: var(--muted); }
.wordmark small { display: block; margin-top: 5px; color: #aaa; font: 8px/1 var(--mono); letter-spacing: .2em; }
.brand-mark { display: grid; width: 21px; height: 21px; place-items: center; color: var(--paper); font: 20px/1 var(--sans); }
.main-nav { display: flex; align-items: center; gap: clamp(28px, 5vw, 76px); height: 100%; }
.main-nav a, .site-footer nav a { position: relative; color: #d1d1cf; font: 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: color .2s; }
.main-nav a::after { position: absolute; right: 0; bottom: -9px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-tools { display: flex; align-items: center; justify-self: end; gap: clamp(12px, 1.7vw, 23px); }
.header-icon, .menu-toggle { position: relative; display: grid; width: 27px; height: 32px; place-items: center; padding: 0; border: 0; background: transparent; }
.search-icon { display: block; }
.saved-open > span { font-size: 20px; line-height: 1; }
.saved-count { position: absolute; top: -1px; right: -4px; color: var(--paper); font: 8px var(--mono); }
.bag-open { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; font: 9px var(--mono); letter-spacing: .12em; }
.bag-count { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 9px; }
/* Taschen-Symbol (30.09.2026): gleiche Strichstärke wie Sonne/Mond, am Handy steht es allein vor der Zahl. */
.bag-icon { display: block; flex: 0 0 auto; width: 18px; height: 18px; margin-right: -2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Bis 1180 px ist die Kopfzeile mit Menü, Sprachschalter und Symbolen voll: dort nur Symbol + Zahl wie am Handy. */
@media (max-width: 1180px) {
  .bag-open { gap: 4px; font-size: 0; }
  .bag-icon { width: 20px; height: 20px; margin-right: 0; }
}
.menu-toggle, .mobile-nav { display: none; }

.hero { position: relative; display: grid; min-height: min(760px, calc(100svh - 94px)); min-height: max(590px, min(760px, calc(100svh - 94px))); grid-template-columns: 1fr 195px; align-items: center; overflow: hidden; padding: 58px var(--gutter) 74px; border-bottom: 1px solid var(--line); isolation: isolate; }
.hero::before { position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse at 60% 46%, rgba(255,255,255,.07), transparent 44%), linear-gradient(118deg, transparent 0 46%, rgba(255,255,255,.028) 46.1% 46.2%, transparent 46.3%), repeating-linear-gradient(132deg, transparent 0 82px, rgba(255,255,255,.018) 83px 84px, transparent 85px 168px); content: ""; }
.hero::after { position: absolute; z-index: -1; inset: 0; background: radial-gradient(rgba(255,255,255,.26) .55px, transparent .8px); background-size: 5px 5px; content: ""; opacity: .13; pointer-events: none; mix-blend-mode: screen; }
.hero-texture { position: absolute; z-index: -1; top: 8%; right: 7%; width: min(40vw, 550px); height: 82%; border: 1px solid rgba(255,255,255,.055); transform: skewY(-8deg); }
.hero-texture::before, .hero-texture::after { position: absolute; content: ""; background: rgba(255,255,255,.1); }
.hero-texture::before { top: 13%; left: -14%; width: 129%; height: 1px; transform: rotate(-19deg); }
.hero-texture::after { right: 16%; bottom: -5%; width: 1px; height: 112%; transform: rotate(21deg); }
.hero-copy { position: relative; z-index: 1; max-width: 990px; padding-top: 25px; perspective: 900px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 25px; color: var(--muted); font: 9px/1.4 var(--mono); letter-spacing: .15em; }
.eyebrow > span:first-child { display: block; width: 20px; height: 1px; background: var(--paper); }
.hero h1, .closing-cta h2 { margin: 0; font: 900 clamp(64px, 10.2vw, 150px)/.8 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
.hero h1 { max-width: none; font-size: clamp(56px, 6.8vw, 101px); line-height: .87; transform: perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transform-origin: 45% 55%; transform-style: preserve-3d; transition: transform .48s var(--ease); }
.hero h1.is-tilting { transition-duration: .11s; }
.hero h1 > span { display: inline-block; }
.typewriter { min-height: .93em; display: inline-block; transform: translateZ(9px); text-shadow: 1px 1px 0 rgba(218,218,214,.9),2px 2px 0 rgba(127,127,124,.8),3px 3px 0 rgba(49,49,48,.75),0 0 19px rgba(255,255,255,.1); }
.typewriter.typing { text-shadow: 0 0 11px rgba(232,232,229,.24); }
.typewriter::after { display: inline-block; width: .055em; height: .78em; margin-left: .09em; background: var(--paper); content: ""; vertical-align: -.06em; animation: cursor-blink .8s steps(2, start) infinite; }
.typewriter.typed::after { animation: none; opacity: 0; }
.hero h1 .spray-text { margin-top: .13em; font-family: Impact, Haettenschweiler, var(--display); font-size: .9em; font-style: italic; letter-spacing: -.055em; -webkit-text-stroke: 1px rgba(232,232,229,.8); color: transparent; text-shadow: 1px 1px 0 rgba(232,232,229,.75), -2px 1px 0 rgba(232,232,229,.4), 2px -1px 0 rgba(232,232,229,.34), 0 0 13px rgba(232,232,229,.18); transform: rotate(-2deg) skewX(-5deg); }
.spray-text { position: relative; display: inline-block; isolation: isolate; }
.spray-text::before { position: absolute; z-index: -1; right: 2%; bottom: -.3em; left: 1%; height: .39em; background: radial-gradient(ellipse,rgba(232,232,229,.82) 0 46%,transparent 55%) 12% 100%/5px 7px,linear-gradient(rgba(232,232,229,.72),rgba(232,232,229,.56)) 12.4% 0/2px 75%,radial-gradient(ellipse,rgba(232,232,229,.72) 0 46%,transparent 55%) 37% 100%/6px 6px,linear-gradient(rgba(232,232,229,.67),rgba(232,232,229,.48)) 37.5% 0/2px 56%,radial-gradient(ellipse,rgba(232,232,229,.78) 0 46%,transparent 55%) 66% 100%/5px 8px,linear-gradient(rgba(232,232,229,.7),rgba(232,232,229,.5)) 66.3% 0/2px 83%,radial-gradient(ellipse,rgba(232,232,229,.7) 0 46%,transparent 55%) 87% 100%/4px 5px,linear-gradient(rgba(232,232,229,.6),rgba(232,232,229,.44)) 87.4% 0/1px 65%; background-repeat: no-repeat; content: ""; opacity: 0; transform: scaleY(.18); transform-origin: top; }
.spray-text.sprayed { animation: spray-in .72s cubic-bezier(.14,.78,.3,1) both; }
.spray-text.sprayed::before { animation: paint-drips 1.1s .26s cubic-bezier(.18,.75,.26,1) both; }
.spray-text.sprayed::after { position: absolute; z-index: -1; inset: -13% -4%; border-radius: 45%; background: radial-gradient(ellipse at 28% 51%, rgba(235,235,231,.14), transparent 53%), radial-gradient(ellipse at 75% 44%, rgba(235,235,231,.1), transparent 50%); content: ""; filter: blur(6px); animation: mist .8s ease-out both; }
.spray-grain { position: absolute; z-index: -1; inset: -12% -3%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E") center/160px 80px; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.spray-text.sprayed .spray-grain { animation: spray-grain-in .6s .12s both; }
.hero-deck { max-width: 405px; margin: 27px 0 25px; color: #b2b2af; font: 12px/1.75 var(--mono); }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 27px; padding: 0 18px; border: 1px solid rgba(232,232,229,.65); background: transparent; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: color .2s, background .2s, transform .2s var(--ease), border-color .2s; }
.button:hover { color: var(--black); background: var(--paper); transform: translateY(-2px); }
.button:active { transform: scale(.98); }
.button span { font-size: 15px; }
.button-light { color: var(--paper); }
.hero-meta { display: flex; gap: 32px; margin-top: 49px; color: #777; font: 8px var(--mono); letter-spacing: .13em; }
.hero-side { position: relative; z-index: 1; display: flex; min-height: 340px; flex-direction: column; align-items: flex-start; justify-content: space-between; justify-self: end; padding: 12px 0 16px 25px; border-left: 1px solid var(--line); color: #b3b3b0; font: 9px/1.55 var(--mono); letter-spacing: .1em; }
.side-index, .side-note { color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.hero-side p { margin: 26px 0 0; font-size: 9px; line-height: 1.7; }
.side-mark { position: relative; display: grid; width: 110px; height: 85px; place-items: center; margin-top: auto; }
.side-mark span { z-index: 1; font: italic 32px/1 var(--display); transform: rotate(-8deg); }
.side-mark i, .side-mark b { position: absolute; display: block; width: 81px; height: 33px; border: 1px solid rgba(232,232,229,.56); border-radius: 50%; transform: rotate(-28deg); }
.side-mark b { width: 40px; height: 83px; transform: rotate(28deg); }
.hero-coordinates { position: absolute; z-index: 1; right: var(--gutter); bottom: 24px; left: var(--gutter); display: flex; justify-content: space-between; color: #61615f; font: 8px var(--mono); letter-spacing: .14em; }

.signal-strip { display: flex; min-height: 49px; align-items: center; justify-content: space-around; gap: 18px; overflow: hidden; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); color: #a2a29f; white-space: nowrap; font: 8px var(--mono); letter-spacing: .17em; }
.signal-strip i { color: #d8d8d5; font: normal 13px var(--sans); }
.shop-section { padding: 82px var(--gutter) 73px; border-bottom: 1px solid var(--line); }
.section-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.section-topline .eyebrow { margin-bottom: 15px; }
.view-all, .text-link { color: #c5c5c2; font: 9px var(--mono); letter-spacing: .1em; }
.view-all span, .text-link span { padding-left: 11px; font-size: 13px; }
.shop-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 27px 0 31px; }
.shop-heading h2, .archive-copy h2, .about-title h2 { margin: 0; font: 800 clamp(36px, 5.1vw, 69px)/.91 var(--display); letter-spacing: -.06em; }
.shop-heading h2 span { display: inline-block; margin-top: 12px; color: var(--muted); font: 9px/1.5 var(--mono); letter-spacing: .2em; }
.shop-heading > p { margin: 0 0 3px; color: var(--muted); font: 10px/1.7 var(--mono); text-align: right; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0 13px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.filter-chip { padding: 5px 0; border: 0; border-bottom: 1px solid transparent; color: #858582; background: transparent; font: 9px var(--mono); transition: color .2s, border-color .2s; }
.filter-chip:hover, .filter-chip.active { color: var(--paper); border-color: var(--paper); }
.filter-chip sup { color: #777; font-size: 7px; }
.filter-selects { display: flex; gap: 16px; }
.filter-selects select { max-width: 135px; padding: 5px 19px 5px 4px; border: 0; color: #aaa; background: var(--black); font: 9px var(--mono); }
.results-line { display: flex; justify-content: space-between; padding: 16px 0 8px; color: #858582; font: 8px var(--mono); letter-spacing: .13em; }
.photo-note { margin: 5px 0 14px; color: #686866; font: 8px var(--mono); letter-spacing: .11em; }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 33px 14px; }
.product-card { min-width: 0; }
.product-image-wrap { position: relative; overflow: hidden; border: 1px solid rgba(232,232,229,.15); background: var(--panel); }
.product-image { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.02; overflow: hidden; padding: 0; border: 0; background: linear-gradient(137deg, #171717 0%, #101010 51%, #1a1a1a 100%); text-align: left; }
.product-image::before { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,255,255,.035) 28px, transparent 29px), repeating-linear-gradient(90deg, transparent 0 27px, rgba(255,255,255,.025) 28px, transparent 29px); content: ""; opacity: .7; animation: frame-tick 13s steps(1,end) infinite; }
.product-card:nth-child(2n) .product-image::before { animation-delay: -2.2s; }
.product-card:nth-child(3n) .product-image::before { animation-delay: -4.6s; }
.product-image::after { position: absolute; top: 12%; right: 10%; width: 18px; height: 18px; border-top: 1px solid rgba(255,255,255,.4); border-right: 1px solid rgba(255,255,255,.4); content: ""; }
.photo-slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #a4a4a1; text-align: center; }
.photo-slot::before { position: absolute; width: 39%; height: 58%; border: 1px solid rgba(232,232,229,.13); content: ""; transform: skewY(-4deg); }
.photo-slot::after { position: absolute; width: 29%; height: 45%; border: 1px dashed rgba(232,232,229,.16); content: ""; transform: translate(5px,5px) skewY(-4deg); }
.photo-slot small, .photo-slot b, .photo-slot i { position: relative; z-index: 1; display: block; }
.photo-slot small { font: 9px var(--mono); letter-spacing: .16em; }
.photo-slot b { margin-top: 8px; color: #d3d3d0; font: 700 9px var(--mono); letter-spacing: .13em; }
.photo-slot i { margin-top: 35px; color: #777; font: normal 7px var(--mono); letter-spacing: .13em; }
.favorite-button { position: absolute; z-index: 2; top: 11px; right: 12px; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(232,232,229,.35); border-radius: 50%; color: var(--paper); background: rgba(8,8,8,.65); font-size: 17px; }
.favorite-button[aria-pressed="true"] { color: var(--paper); background: #333; }
.quick-view { position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 8px 10px; border: 1px solid rgba(232,232,229,.38); color: var(--paper); background: rgba(8,8,8,.72); font: 8px var(--mono); letter-spacing: .12em; opacity: 0; transform: translateY(5px); transition: opacity .2s, transform .2s; }
.quick-view span { padding-left: 7px; }
.product-image-wrap:hover .quick-view, .quick-view:focus-visible { opacity: 1; transform: none; }
.product-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding: 13px 2px 0; }
.product-info > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.product-brand { color: #a0a09d; font: 8px var(--mono); letter-spacing: .13em; }
.product-title { max-width: 100%; margin: 7px 0 5px; padding: 0; border: 0; color: var(--paper); background: transparent; text-align: left; font: 500 14px/1.25 var(--sans); }
.product-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-size { color: #8a8a87; font: 9px var(--mono); }
.product-size i { padding: 0 3px; color: #555; font-style: normal; }
.condition-tag { margin-top: 9px; color: #737370; font: 7px var(--mono); letter-spacing: .13em; }
.product-price { flex: 0 0 auto; color: #e0e0dd; font: 10px var(--mono); }
.empty-results { padding: 55px 0; color: var(--muted); text-align: center; font: 12px var(--mono); }
.empty-results button { padding: 7px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--paper); background: none; font: 9px var(--mono); }
.shop-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 29px; color: #777; font: 8px var(--mono); letter-spacing: .12em; }
.load-more { padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--paper); background: none; font: 9px var(--mono); letter-spacing: .12em; }
.load-more span { padding-left: 14px; }

.signal-room { position: relative; display: grid; min-height: 680px; grid-template-columns: minmax(230px,.72fr) minmax(0,1.28fr); gap: clamp(38px,7vw,104px); align-items: center; overflow: hidden; padding: 86px var(--gutter); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 65% 58%,rgba(255,255,255,.035),transparent 45%),#0b0b0b; }
.signal-room::before { position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.018) 36px,transparent 37px); content: ""; pointer-events: none; }
.room-copy { position: relative; z-index: 1; max-width: 390px; }
.room-copy .eyebrow { margin-bottom: 25px; }
.room-copy h2, .gallery-copy h2 { margin: 0; font: 800 clamp(43px,5.6vw,77px)/.91 var(--display); letter-spacing: -.065em; }
.room-copy h2 span, .gallery-copy h2 span { margin-top: 8px; color: #d9d9d6; font-size: .8em; -webkit-text-stroke: 0; text-shadow: 2px 2px 0 rgba(255,255,255,.23),-1px 1px 0 rgba(255,255,255,.24); transform: rotate(-2deg) skewX(-4deg); }
.room-copy > p:not(.eyebrow) { max-width: 310px; margin: 24px 0 24px; color: #999996; font: 10px/1.8 var(--mono); }
.room-index { color: #686865; font: 8px var(--mono); letter-spacing: .12em; }
.crt-room { position: relative; z-index: 1; min-height: 485px; overflow: hidden; border: 1px solid rgba(232,232,229,.12); background: radial-gradient(ellipse at 54% 63%,rgba(225,225,219,.095),transparent 40%),linear-gradient(180deg,#151515 0%,#111 67%,#0a0a0a 67%,#090909 100%); isolation: isolate; }
.crt-room::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,transparent 0 13%,rgba(255,255,255,.045) 13.1%,transparent 13.4% 86%,rgba(255,255,255,.03) 86.2%,transparent 86.5%),linear-gradient(180deg,transparent 0 67%,rgba(255,255,255,.08) 67.2%,transparent 67.5%),radial-gradient(ellipse at 50% 70%,rgba(0,0,0,0),rgba(0,0,0,.52) 72%); content: ""; }
.room-wall-lines { position: absolute; top: 0; right: 12%; left: 12%; height: 67%; border-right: 1px solid rgba(255,255,255,.025); border-left: 1px solid rgba(255,255,255,.035); }
.room-wall-lines::before { position: absolute; top: 14%; left: -18%; width: 120%; height: 1px; background: rgba(255,255,255,.045); content: ""; transform: rotate(-3deg); }
.room-floor { position: absolute; z-index: 0; right: -8%; bottom: -4%; left: -8%; height: 35%; background: repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.025) 39px,transparent 40px),repeating-linear-gradient(90deg,transparent 0 70px,rgba(255,255,255,.025) 71px,transparent 72px),linear-gradient(180deg,#111,#080808); transform: perspective(450px) rotateX(13deg); transform-origin: top; }
.room-light { position: absolute; top: 12%; left: 45%; width: 27%; height: 25%; border-radius: 50%; background: rgba(236,236,229,.05); filter: blur(35px); }
.tv-table { position: absolute; z-index: 2; bottom: 24%; left: 50%; width: min(76%,450px); height: 15px; border: 1px solid rgba(255,255,255,.17); background: linear-gradient(180deg,#3a3936 0%,#1b1b1a 39%,#090909 100%); box-shadow: 0 12px 20px rgba(0,0,0,.9),0 0 28px rgba(0,0,0,.62); transform: translateX(-50%) skewX(-3deg); }
.tv-table::before { position: absolute; top: 13px; right: 5%; left: 3%; height: 48px; background: linear-gradient(90deg,#080808,#151515 22%,#0a0a0a 50%,#141414 78%,#070707); clip-path: polygon(0 0,100% 0,95% 100%,5% 100%); content: ""; }
.table-leg { position: absolute; z-index: -1; top: 13px; width: 7px; height: 63px; background: linear-gradient(90deg,#070707,#252523,#090909); box-shadow: 2px 4px 6px rgba(0,0,0,.8); }
.table-leg-left { left: 9%; transform: skewX(3deg); }
.table-leg-right { right: 9%; transform: skewX(-3deg); }
.crt-tv { position: absolute; z-index: 4; bottom: calc(24% + 12px); left: 50%; width: min(74%,430px); filter: drop-shadow(0 19px 20px rgba(0,0,0,.72)); transform: translateX(-50%) perspective(900px) rotateY(-5deg) rotateX(1deg); }
.crt-body { display: grid; height: 218px; grid-template-columns: minmax(0,1fr) 62px; gap: 11px; padding: 14px 12px 12px; border: 1px solid #333331; border-radius: 17px 17px 12px 12px; background: linear-gradient(145deg,#343432 0%,#1b1b1a 20%,#101010 65%,#262624 100%); box-shadow: inset 0 2px 2px rgba(255,255,255,.12),inset 0 -5px 9px rgba(0,0,0,.8),0 2px 2px #030303; }
.crt-bezel { display: flex; align-items: stretch; padding: 9px; border: 1px solid #060606; border-radius: 14px 14px 24px 24px; background: linear-gradient(145deg,#050505,#191918 56%,#050505); box-shadow: inset 0 0 10px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07); }
.crt-screen { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(195,195,188,.13); border-radius: 20px 20px 26px 26px / 13px 13px 20px 20px; background: radial-gradient(ellipse at 50% 48%,#20201f 0%,#111110 42%,#050505 100%); box-shadow: inset 0 0 24px rgba(0,0,0,.94),inset 0 0 6px rgba(220,220,215,.1),0 0 10px rgba(255,255,255,.035); color: rgba(231,231,225,.76); text-align: center; }
.crt-screen::before { position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(240,240,232,.07) 4px,transparent 5px),linear-gradient(115deg,rgba(255,255,255,.08),transparent 24% 73%,rgba(255,255,255,.03)); content: ""; opacity: .46; }
.crt-screen::after { position: absolute; top: 42%; right: 0; left: 0; height: 16px; background: linear-gradient(180deg,transparent,rgba(255,255,255,.2),transparent); content: ""; opacity: 0; animation: tv-scan-glitch 8s steps(1,end) infinite; }
.crt-logo { position: relative; z-index: 1; font: 900 clamp(19px,2.2vw,28px)/.84 var(--display); letter-spacing: -.06em; text-shadow: 0 0 9px rgba(230,230,224,.32),0 0 23px rgba(230,230,224,.16); }
.crt-tune { position: relative; z-index: 1; margin-top: 12px; color: rgba(225,225,218,.52); font: 6px var(--mono); letter-spacing: .17em; }
.crt-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border-left: 1px solid rgba(255,255,255,.12); border-radius: 3px; background: linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.025)); }
.crt-speaker { width: 25px; height: 61px; border: 1px solid rgba(255,255,255,.08); background: repeating-linear-gradient(0deg,#060606 0 2px,#30302e 3px,#0a0a0a 4px); }
.crt-controls i { width: 16px; height: 16px; border: 2px solid #050505; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#595957,#161615 62%,#050505); box-shadow: 0 0 0 1px #4c4c49; }
.crt-controls i + i { width: 11px; height: 11px; }
.crt-controls b { color: #73736f; font: 5px var(--mono); letter-spacing: .1em; }
.crt-foot { position: absolute; bottom: -10px; width: 17px; height: 12px; background: linear-gradient(90deg,#111,#050505); }
.crt-foot-left { left: 12%; transform: skewX(14deg); }
.crt-foot-right { right: 12%; transform: skewX(-14deg); }
.room-coord { position: absolute; z-index: 5; right: 15px; bottom: 14px; color: #777773; font: 7px var(--mono); letter-spacing: .12em; }

.open-sign-section { position: relative; display: grid; min-height: 154px; place-items: center; overflow: hidden; padding: 20px var(--gutter); border-bottom: 1px solid var(--line); isolation: isolate; background: radial-gradient(ellipse at 50% 52%,rgba(235,235,232,.095),transparent 43%),#030303; }
.open-sign-section::before { position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px); content: ""; opacity: .34; pointer-events: none; mix-blend-mode: screen; }
.open-sign-section::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.025) 49.8% 50%,transparent); content: ""; opacity: .6; pointer-events: none; }
.open-sign-frame { position: relative; display: grid; width: min(620px,100%); min-height: 116px; place-items: center; padding: 26px 40px 19px; border: 1px solid rgba(232,232,229,.2); background: linear-gradient(180deg,rgba(255,255,255,.025),transparent 28% 72%,rgba(255,255,255,.018)),#070707; box-shadow: inset 0 0 35px rgba(255,255,255,.025),0 14px 48px rgba(0,0,0,.9); isolation: isolate; }
.open-sign-frame::before,.open-sign-frame::after { position: absolute; top: 8px; width: 4px; height: 4px; border: 1px solid rgba(240,240,236,.26); border-radius: 50%; content: ""; box-shadow: 0 0 6px rgba(255,255,255,.14); }
.open-sign-frame::before { left: 9px; }
.open-sign-frame::after { right: 9px; }
.open-sign-serial,.open-sign-sub { position: absolute; z-index: 2; color: rgba(229,229,225,.51); font: 7px var(--mono); letter-spacing: .2em; }
.open-sign-serial { top: 13px; left: 17px; }
.open-sign-after { position: absolute; z-index: 2; top: 13px; right: 17px; color: rgba(248,248,245,.78); font: 800 8px var(--display); letter-spacing: .15em; }
.open-sign-sub { right: 17px; bottom: 10px; left: 17px; text-align: center; }
.open-sign-word { position: relative; z-index: 1; display: block; padding: 4px 10px 9px; color: #f8f8f5; font: 900 clamp(76px,13vw,142px)/.8 var(--display); letter-spacing: .08em; text-align: center; text-shadow: 0 0 2px #fff,0 0 7px rgba(255,255,255,.96),0 0 17px rgba(255,255,255,.8),0 0 36px rgba(229,239,255,.58),-3px 0 14px rgba(255,46,91,.34),3px 0 14px rgba(72,221,255,.32); animation: neon-tube-buzz 9s steps(1,end) infinite; transition: filter .25s,text-shadow .25s; }
.open-sign-word::before,.open-sign-word::after { position: absolute; inset: 4px 10px 9px; overflow: hidden; color: #ff5476; content: attr(data-label); opacity: .44; pointer-events: none; text-shadow: 0 0 8px currentColor,0 0 18px currentColor; transform: translateX(-2px); filter: blur(.7px); clip-path: inset(4% 48% 4% 0); mix-blend-mode: screen; }
.open-sign-word::after { color: #62e8ff; opacity: .4; transform: translateX(2px); clip-path: inset(4% 0 4% 52%); }
.open-sign-word:hover,.open-sign-word:focus-visible { filter: brightness(1.2); text-shadow: 0 0 3px #fff,0 0 9px rgba(255,255,255,1),0 0 24px rgba(255,255,255,.95),0 0 50px rgba(229,239,255,.72),-4px 0 18px rgba(255,46,91,.46),4px 0 18px rgba(72,221,255,.44); }
.open-sign-grain { position: absolute; z-index: 3; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E") center/180px 180px; opacity: .13; pointer-events: none; mix-blend-mode: screen; }
.storm-target { position: relative; isolation: isolate; }
.storm-target > .storm-content { position: relative; z-index: 1; }
.storm-overlay { position: absolute; z-index: 0; right: 0; left: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; }
.storm-overlay.is-striking { visibility: visible; animation: storm-screen-flash .42s steps(1,end) both; }
.storm-bolt { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.storm-vector { transform: translateX(var(--storm-shift,0)); }
.storm-glow,.storm-core { fill: none; stroke-linecap: round; stroke-linejoin: bevel; stroke-dasharray: 3600; stroke-dashoffset: 3600; }
.storm-glow { stroke: #a4ddff; stroke-width: 5.5; opacity: .72; filter: blur(3px) drop-shadow(0 0 8px rgba(134,207,255,.8)); }
.storm-core { stroke: #fff; stroke-width: 1.25; opacity: 1; filter: drop-shadow(0 0 3px rgba(255,255,255,.95)); }
.storm-overlay.is-striking .storm-glow { animation: lightning-drop .2s steps(12,end) both; }
.storm-overlay.is-striking .storm-core { animation: lightning-drop .18s steps(14,end) .025s both; }
.storm-screen { position: absolute; z-index: 0; inset: 0; background: radial-gradient(ellipse at 65% 38%,rgba(226,244,255,.19),transparent 47%),rgba(226,241,255,.035); opacity: 0; mix-blend-mode: screen; }
.storm-overlay.is-striking .storm-screen { animation: storm-ambient-flash .4s steps(1,end) both; }

.gallery-section { position: relative; display: grid; grid-template-columns: minmax(245px,.75fr) minmax(0,1.12fr); gap: clamp(38px,8vw,120px); align-items: center; overflow: hidden; padding: 95px var(--gutter); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 81% 48%,rgba(255,255,255,.04),transparent 50%),#0a0a0a; }
.gallery-copy { position: relative; z-index: 1; max-width: 430px; }
.gallery-copy .eyebrow { margin-bottom: 26px; }
.gallery-copy h2 { font-size: clamp(46px,6.1vw,82px); }
.gallery-copy > p:not(.eyebrow) { max-width: 330px; margin: 24px 0 26px; color: #999996; font: 10px/1.8 var(--mono); }
.gallery-brand-mark { display: flex; align-items: center; gap: 11px; padding-top: 15px; border-top: 1px solid var(--line); font: 700 10px var(--mono); letter-spacing: .15em; }
.gallery-brand-mark small { display: block; margin-top: 6px; color: #858582; font: 7px var(--mono); letter-spacing: .12em; }
.gallery-brand-mark .brand-mark { flex: 0 0 21px; }
.gallery-note { display: block; margin-top: 30px; color: #646461; font: 7px var(--mono); letter-spacing: .15em; }
.gallery-column { position: relative; z-index: 1; min-width: 0; }
.gallery-camera { position: relative; padding: 9px 10px 10px; border: 1px solid #3d3d3b; border-radius: 9px 9px 5px 5px; background: linear-gradient(140deg,#282827 0%,#171716 18%,#0d0d0d 72%,#222220 100%); box-shadow: inset 0 1px rgba(255,255,255,.14),inset 0 -3px 8px rgba(0,0,0,.9),0 14px 25px rgba(0,0,0,.55); }
.gallery-camera::after { position: absolute; top: 43%; right: 3px; width: 4px; height: 44px; border: 1px solid #484846; border-radius: 2px; background: linear-gradient(180deg,#090909,#393937,#111); content: ""; }
.gallery-camera-topline,.gallery-camera-controls { display: flex; min-height: 24px; align-items: center; justify-content: space-between; padding: 0 4px; color: #969692; font: 6px var(--mono); letter-spacing: .15em; }
.gallery-camera-topline { margin-bottom: 6px; }
.camera-rec,.camera-hud-rec { display: inline-flex; align-items: center; gap: 5px; color: #d4d4cf; }
.camera-rec i,.camera-hud-rec i { width: 5px; height: 5px; border-radius: 50%; background: #b62d2b; box-shadow: 0 0 5px rgba(255,48,40,.65); animation: camera-rec-light 1.8s steps(2,end) infinite; }
.camera-battery { color: #bbb; letter-spacing: .2em; }
.gallery-camera-controls { min-height: 29px; padding: 7px 5px 0; color: #777773; }
.camera-control-buttons { display: flex; gap: 7px; align-items: center; }
.camera-control-buttons i { width: 8px; height: 8px; border: 1px solid #60605d; border-radius: 50%; background: radial-gradient(circle at 32% 30%,#4a4a48,#101010 72%); box-shadow: 0 1px 2px #000; }
.camera-control-buttons i:first-child { width: 11px; height: 11px; }
.gallery-camera-controls b { padding: 3px 5px; border: 1px solid #444442; border-radius: 2px; color: #c2c2bd; font: 700 6px var(--mono); }
.brand-gallery { position: relative; height: clamp(410px,51vw,690px); overflow: hidden; border: 2px solid #080808; background: #111; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.12); }
.brand-gallery::before { position: absolute; z-index: 2; inset: 0; background: repeating-linear-gradient(0deg,rgba(8,8,8,.12) 0 1px,transparent 1px 4px); content: ""; opacity: .48; pointer-events: none; mix-blend-mode: multiply; }
.brand-gallery::after { position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse at center,transparent 54%,rgba(0,0,0,.28) 100%); content: ""; pointer-events: none; }
.gallery-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity .7s var(--ease),transform 1.1s var(--ease),visibility .7s; }
.gallery-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.gallery-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; filter: saturate(.68) contrast(1.08) brightness(.78); }
.gallery-slide:nth-child(2) img { object-position: center 40%; }
.gallery-slide:nth-child(3) img { object-position: center 49%; }
.gallery-slide::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.12),transparent 22% 60%,rgba(0,0,0,.5)); content: ""; pointer-events: none; }
.gallery-photo-mark { position: absolute; z-index: 1; top: 16px; left: 16px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.35); color: rgba(245,245,241,.85); background: rgba(5,5,5,.32); font: 7px var(--mono); letter-spacing: .15em; }
.gallery-flash { position: absolute; z-index: 3; inset: 0; background: radial-gradient(ellipse at 52% 42%,rgba(255,255,255,.4),rgba(255,255,255,.15) 34%,transparent 73%); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.gallery-camera-hud { position: absolute; z-index: 4; top: 14px; right: 15px; left: 15px; display: flex; justify-content: space-between; color: rgba(245,245,239,.76); font: 7px var(--mono); letter-spacing: .12em; text-shadow: 0 1px 4px #000,0 0 5px rgba(0,0,0,.9); pointer-events: none; }
.gallery-camera-bottom-hud { position: absolute; z-index: 4; right: 15px; bottom: 14px; left: 15px; display: flex; justify-content: space-between; color: rgba(245,245,239,.72); font: 7px var(--mono); letter-spacing: .12em; text-shadow: 0 1px 4px #000,0 0 5px rgba(0,0,0,.9); pointer-events: none; }
.gallery-flicker { position: absolute; z-index: 3; inset: 0; background: linear-gradient(180deg,rgba(255,255,255,.22),transparent 14% 82%,rgba(255,255,255,.12)),repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 3px); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.gallery-camera.is-flicker .gallery-flicker { animation: camera-screen-flicker .23s steps(2,end) both; }
.brand-gallery.is-flash .gallery-flash { animation: gallery-arrival-flash .24s steps(2,end) both; }
.gallery-caption { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.gallery-status { color: #7c7c79; font: 8px var(--mono); letter-spacing: .12em; }
.gallery-caption-text { margin: 7px 0 0; color: var(--paper); font: 9px var(--mono); letter-spacing: .1em; }
.gallery-controls { display: flex; align-items: center; gap: 7px; }
.gallery-controls button { display: grid; min-width: 33px; height: 31px; place-items: center; padding: 0 7px; border: 1px solid var(--line); color: var(--paper); background: transparent; font: 9px var(--mono); }
.gallery-controls button:hover { color: var(--black); background: var(--paper); }
.gallery-controls .gallery-play { min-width: 62px; font-size: 7px; letter-spacing: .1em; }
.gallery-progress { height: 1px; background: rgba(255,255,255,.12); }
.gallery-progress span { display: block; width: 0; height: 100%; background: #eee; transition: width 5.2s linear; }

.archive-section { display: grid; min-height: 540px; grid-template-columns: 1fr 1fr; gap: clamp(34px, 8vw, 118px); align-items: center; padding: 80px var(--gutter); border-bottom: 1px solid var(--line); }
.archive-copy { max-width: 470px; }
.archive-copy .eyebrow { margin-bottom: 26px; }
.archive-copy h2 { font-size: clamp(47px, 6.3vw, 87px); line-height: .91; }
.archive-copy h2 span { margin-top: 8px; font-size: .82em; }
.archive-copy .spray-text { color: #dededb; -webkit-text-stroke: 0; text-shadow: 2px 2px 0 rgba(255,255,255,.26), -1px 1px 0 rgba(255,255,255,.22); transform: rotate(-2deg) skewX(-4deg); }
.archive-copy > p:not(.eyebrow) { max-width: 365px; margin: 25px 0 20px; color: #999996; font: 11px/1.8 var(--mono); }
.archive-visual { position: relative; min-height: 370px; overflow: hidden; margin: 0; border: 1px solid rgba(232,232,229,.18); background: #141414; }
.archive-visual::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(7,7,7,.22),transparent 48%),linear-gradient(0deg,rgba(7,7,7,.58),transparent 36%); content: ""; pointer-events: none; }
.archive-visual small { position: absolute; z-index: 2; bottom: 16px; left: 17px; color: #efefeb; font: 8px var(--mono); letter-spacing: .13em; }
.archive-visual i { position: absolute; top: 17px; right: 20px; color: #bdbdb9; font: normal 23px var(--sans); }
.about-section { position: relative; display: grid; grid-template-columns: minmax(230px,.82fr) 1.18fr; gap: 7vw; padding: 94px var(--gutter) 105px; border-bottom: 1px solid var(--line); }
.about-title .eyebrow { margin-bottom: 25px; }
.about-title h2 { font-size: clamp(46px, 6vw, 80px); line-height: .89; }
.about-title h2 span { color: #898986; }
.about-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-self: end; }
.about-steps article { min-height: 144px; padding: 14px 12px 0 0; border-top: 1px solid var(--line); }
.about-steps article > b { color: #81817e; font: 9px var(--mono); }
.about-steps h3 { margin: 26px 0 9px; font: 500 15px var(--sans); }
.about-steps p { max-width: 180px; margin: 0; color: #8e8e8b; font: 9px/1.7 var(--mono); }
.closing-cta { position: relative; display: flex; min-height: 440px; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: 76px var(--gutter); border-bottom: 1px solid var(--line); }
.closing-cta::after { position: absolute; top: 12%; right: 9%; width: 29vw; height: 70%; border: 1px solid var(--line-soft); content: ""; transform: rotate(-17deg); }
.closing-cta .eyebrow { position: relative; z-index: 1; }
.closing-cta h2 { position: relative; z-index: 1; font-size: clamp(67px, 10vw, 139px); }
.closing-cta h2 .spray-text { color: #dededb; -webkit-text-stroke: 0; text-shadow: 1px 2px 0 rgba(255,255,255,.45), -2px -1px 0 rgba(255,255,255,.21); transform: rotate(-2deg) skewX(-5deg); }
.closing-cta .button { position: relative; z-index: 1; margin-top: 34px; }
.closing-mark { position: absolute; right: var(--gutter); bottom: 27px; color: #696966; font: 8px var(--mono); letter-spacing: .13em; }
.site-footer { padding: 35px var(--gutter) 18px; }
.footer-top { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; align-items: center; gap: 26px; padding-bottom: 35px; }
.footer-top > p { margin: 0; color: #d1d1ce; font: 13px/1.5 var(--mono); }
.footer-top > p span { color: #848481; }
.site-footer nav { display: flex; gap: 23px; }
.site-footer nav a { color: #999996; font-size: 8px; }
.back-top { color: #8f8f8c; font: 8px var(--mono); letter-spacing: .1em; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: #62625f; font: 7px var(--mono); letter-spacing: .11em; }

.drawer-backdrop, .modal-backdrop { position: fixed; z-index: 60; inset: 0; background: rgba(0,0,0,.68); opacity: 0; transition: opacity .25s; }
.drawer-backdrop.show, .modal-backdrop.show { opacity: 1; }
.cart-drawer { position: fixed; z-index: 61; top: 0; right: 0; display: flex; width: min(475px,100%); height: 100dvh; flex-direction: column; padding: 28px; border-left: 1px solid var(--line); background: #101010; transform: translateX(102%); transition: transform .3s var(--ease); }
.cart-drawer.open { transform: none; }
.drawer-heading { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.drawer-heading .eyebrow { margin-bottom: 12px; }
.drawer-heading h2, .saved-dialog h2, .size-dialog h2, .checkout-dialog h2 { margin: 0; font: 700 28px var(--display); letter-spacing: -.04em; }
.drawer-close, .dialog-close { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); color: var(--paper); background: transparent; font-size: 22px; line-height: 1; }
.cart-items { overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: 70px 1fr auto; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.cart-line-info { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; }
.cart-line-info strong { font-size: 12px; font-weight: 500; }
.cart-line-info span, .cart-line-info small { color: var(--muted); font: 8px var(--mono); }
.cart-line-price { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; color: #ddd; font: 10px var(--mono); }
/* Entfernen als Kreuz (01.10.2026): oben rechts in der Zeile, Preis darunter. Ohne Rahmen und kleiner als „Tasche schließen“. */
.remove-item { display: grid; width: 28px; height: 28px; margin: -6px -7px 0 0; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #a8a8a5; background: none; transition: color .2s, background-color .2s; }
.remove-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.remove-item:hover { color: var(--paper); background: rgba(255,255,255,.08); }
.remove-item:focus-visible { outline: 1px solid var(--paper); outline-offset: 1px; }
@media (max-width: 680px) { .remove-item { width: 34px; height: 34px; margin: -9px -10px 0 0; } }
.cart-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-star { font-size: 27px; }
.cart-empty h3 { margin: 20px 0 5px; font-size: 17px; font-weight: 500; }
.cart-empty p, .cart-summary p { margin: 0 0 20px; color: var(--muted); font: 10px/1.6 var(--mono); }
.cart-summary { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.cart-summary > div { display: flex; justify-content: space-between; margin-bottom: 13px; font: 11px var(--mono); }
.cart-summary p { margin-bottom: 16px; font-size: 9px; }
.cart-summary .button { width: 100%; }
.product-dialog, .search-dialog, .saved-dialog, .size-dialog, .checkout-dialog { position: fixed; z-index: 62; top: 50%; left: 50%; width: min(910px,calc(100% - 36px)); max-height: min(88dvh,900px); overflow: auto; border: 1px solid var(--line); background: #101010; opacity: 0; transform: translate(-50%,-48%); transition: opacity .24s, transform .24s var(--ease); }
.product-dialog.open, .search-dialog.open, .saved-dialog.open, .size-dialog.open, .checkout-dialog.open { opacity: 1; transform: translate(-50%,-50%); }
.dialog-close { position: absolute; z-index: 2; top: 14px; right: 14px; }
.product-dialog { display: grid; grid-template-columns: 1fr 1fr; }
.dialog-image { position: relative; min-height: 520px; overflow: hidden; background: #141414; }
.dialog-content { padding: clamp(27px,4vw,55px); }
.dialog-content .eyebrow { margin: 5px 45px 19px 0; }
.dialog-title-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.dialog-title-line h2 { margin: 0; font: 600 clamp(22px,3vw,36px)/1.1 var(--sans); }
.dialog-price { padding-top: 5px; white-space: nowrap; font: 12px var(--mono); }
.dialog-condition { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #a8a8a5; font: 9px var(--mono); }
.condition-dot { width: 6px; height: 6px; border-radius: 50%; background: #c4c4c1; }
.dialog-description { margin: 21px 0; color: #999996; font: 10px/1.75 var(--mono); }
.dialog-size-head { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 9px var(--mono); }
.dialog-size-head button { padding: 0; border: 0; color: #aaa; background: none; font: 8px var(--mono); }
.size-note { padding: 12px 0; color: #8e8e8b; font: 9px var(--mono); }
.add-to-bag { width: 100%; margin: 13px 0 20px; }
.add-to-bag:disabled { opacity: .55; cursor: default; }
.dialog-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dialog-details div { display: flex; flex-direction: column; gap: 6px; }
.dialog-details span { color: #858582; font: 7px var(--mono); }
.dialog-details b { font: 9px var(--mono); }
.concept-note { margin: 13px 0 0; color: #696966; font: 8px/1.6 var(--mono); }
.search-dialog, .saved-dialog, .size-dialog, .checkout-dialog { width: min(560px,calc(100% - 36px)); padding: 37px; }
.search-dialog > .eyebrow, .saved-dialog > .eyebrow, .size-dialog > .eyebrow, .checkout-dialog > .eyebrow { margin: 3px 40px 18px 0; }
.search-dialog > label { display: block; margin-bottom: 11px; font: 700 23px var(--display); }
.search-input-wrap { display: flex; align-items: center; border-bottom: 1px solid var(--paper); }
.search-input-wrap input { width: 100%; padding: 12px 0; border: 0; outline: 0; color: var(--paper); background: transparent; font: 12px var(--mono); }
.search-input-wrap span { color: var(--muted); font: 10px var(--mono); }
.search-results { display: grid; margin-top: 15px; }
.search-result { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); color: #d1d1ce; background: transparent; text-align: left; font: 9px var(--mono); }
.search-result span:last-child { white-space: nowrap; }
.search-empty { color: var(--muted); font: 10px var(--mono); }
.saved-dialog h2, .size-dialog h2, .checkout-dialog h2 { margin-bottom: 20px; }
.saved-items { display: grid; }
.saved-empty { padding: 22px 0 0; border-top: 1px solid var(--line); color: #a4a4a1; font: 10px/1.7 var(--mono); }
.saved-empty > span { font-size: 20px; }
.size-dialog > p:not(.eyebrow) { color: #a0a09d; font: 10px/1.75 var(--mono); }
.measure-list { margin: 24px 0; border-top: 1px solid var(--line); }
.measure-list > div { display: grid; grid-template-columns: 35px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); color: #aaa; font: 9px/1.6 var(--mono); }
.measure-list b { color: #797976; font-weight: 400; }
.measure-list strong { color: var(--paper); font-weight: 500; }
.size-tip { color: #757572 !important; }
.checkout-intro { color: #aaa; font: 10px/1.7 var(--mono); }
.checkout-review { margin: 20px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.checkout-review-line, .checkout-review-total { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: #aaa; font: 9px var(--mono); }
.checkout-review-total { margin-top: 5px; border-top: 1px solid var(--line-soft); color: var(--paper); }
.checkout-form { display: grid; gap: 13px; }
.checkout-form label { display: grid; gap: 6px; color: #92928f; font: 8px var(--mono); letter-spacing: .08em; }
.checkout-form input { min-width: 0; padding: 10px; border: 1px solid var(--line); color: var(--paper); background: #090909; font: 11px var(--mono); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.checkout-success { padding: 23px 0; text-align: center; }
.checkout-success > span { font-size: 23px; }
.checkout-success h3 { margin: 13px 0; font: 700 24px var(--display); }
.checkout-success p { color: #999; font: 10px var(--mono); }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 20px; max-width: calc(100% - 44px); padding: 13px 17px; border: 1px solid var(--line); color: var(--paper); background: #171717; font: 9px var(--mono); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: none; }

.reveal-ready { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal-ready.is-visible { opacity: 1; transform: none; }
@keyframes cursor-blink { to { visibility: hidden; } }
@keyframes spray-in { 0% { opacity: 0; filter: blur(9px); clip-path: inset(0 100% 0 0); transform: translate(-12px,7px) rotate(-3deg) skewX(-11deg); } 58% { opacity: .72; filter: blur(2px); } 100% { opacity: 1; filter: none; clip-path: inset(-12% -6%); transform: rotate(-2deg) skewX(-5deg); } }
@keyframes mist { 0% { opacity: 0; transform: scale(.78); } 65% { opacity: .8; } 100% { opacity: .38; transform: scale(1.08); } }
@keyframes frame-tick { 0%, 36%, 36.3%, 37%, 37.3%, 76%, 76.3%, 77%, 100% { filter: none; transform: translateX(0); } 36.1% { filter: brightness(1.7); transform: translateX(-2px); } 36.9% { filter: none; transform: translateX(2px); } 76.1% { filter: brightness(1.5); transform: translateX(1px); } 76.9% { filter: none; transform: translateX(-1px); } }
@keyframes paint-drips { 0% { opacity: 0; transform: scaleY(.18); } 27% { opacity: .82; transform: scaleY(1.12); } 54% { opacity: .65; transform: scaleY(.94); } 100% { opacity: .76; transform: scaleY(1); } }
@keyframes tv-scan-glitch { 0%, 39%, 39.2%, 40.2%, 40.4%, 100% { opacity: 0; transform: translateY(0); } 39.1% { opacity: .88; transform: translateY(-12px); } 40.1% { opacity: 0; transform: translateY(4px); } }
@keyframes gallery-arrival-flash { 0% { opacity: 0; } 9% { opacity: .72; } 35% { opacity: .23; } 100% { opacity: 0; } }
@keyframes neon-tube-buzz { 0%,29%,29.2%,74%,74.2%,100% { opacity: 1; filter: brightness(1); } 29.1%,74.1% { opacity: .84; filter: brightness(.68); } }
@keyframes lightning-drop { to { stroke-dashoffset: 0; } }
@keyframes storm-screen-flash { 0%,100% { opacity: 0; } 4%,17% { opacity: .72; } 8%,12%,22% { opacity: .12; } }
@keyframes storm-ambient-flash { 0%,100% { opacity: 0; } 5% { opacity: .88; } 11% { opacity: .18; } 19% { opacity: .62; } 30% { opacity: .04; } }
@keyframes spray-grain-in { 0% { opacity: 0; transform: scale(.92); } 30% { opacity: .24; } 100% { opacity: .1; transform: scale(1); } }
@keyframes camera-screen-flicker { 0% { opacity: 0; } 12% { opacity: .56; } 24% { opacity: .12; } 41% { opacity: .4; } 100% { opacity: 0; } }
@keyframes camera-rec-light { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

@media (min-width: 1500px) { .product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .hero { min-height: 770px; } }
@media (max-width: 980px) {
  :root { --gutter: clamp(25px,5vw,52px); }
  .site-header { grid-template-columns: 1fr auto 1fr; }
  .main-nav { gap: 24px; }
  .hero { grid-template-columns: 1fr 142px; }
  .hero-side { padding-left: 18px; }
  .hero h1 { font-size: clamp(52px,8.4vw,82px); }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 31px 14px; }
  .signal-room { grid-template-columns: minmax(210px,.65fr) minmax(0,1.35fr); gap: 34px; }
  .crt-room { min-height: 420px; }
  .crt-body { height: 190px; grid-template-columns: minmax(0,1fr) 54px; }
  .gallery-section { grid-template-columns: minmax(220px,.72fr) minmax(0,1.08fr); gap: 40px; }
  .brand-gallery { height: clamp(430px,61vw,650px); }
  .archive-section { gap: 35px; }
  .about-section { grid-template-columns: 1fr; gap: 50px; }
  .about-steps { max-width: 780px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .site-footer nav { justify-self: start; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 62px; }
  .announcement { min-height: 24px; font-size: 8px; letter-spacing: .14em; }
  .site-header { min-height: 54px; grid-template-columns: 1fr auto; padding: 0 19px; }
  .wordmark { gap: 6px; font-size: 10px; }
  .wordmark small { font-size: 7px; }
  .brand-mark { width: 17px; font-size: 17px; }
  .main-nav { display: none; }
  .header-tools { gap: 11px; }
  .bag-open { position: relative; gap: 3px; font-size: 0; }
  .bag-icon { width: 20px; height: 20px; }
  .menu-toggle { display: grid; width: 25px; }
  .menu-toggle span { position: absolute; left: 5px; width: 15px; height: 1px; background: var(--paper); transition: transform .2s; }
  .menu-toggle span:first-child { transform: translateY(-4px); }
  .menu-toggle span:last-child { transform: translateY(4px); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .mobile-nav:not([hidden]) { position: absolute; top: 100%; right: 0; left: 0; display: grid; padding: 9px 22px 15px; border-bottom: 1px solid var(--line); background: #090909; }
  .mobile-nav a, .mobile-nav button { display: flex; justify-content: space-between; padding: 15px 0; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--paper); background: none; font: 10px var(--mono); letter-spacing: .1em; text-align: left; text-transform: uppercase; }
  .mobile-nav a span, .mobile-nav button span { color: #70706d; }
  .hero { min-height: 650px; min-height: max(610px,calc(88svh - 83px)); grid-template-columns: 1fr; align-items: center; padding: 60px 23px 64px; }
  .hero::before { background: radial-gradient(ellipse at 66% 44%, rgba(255,255,255,.07), transparent 52%), repeating-linear-gradient(132deg, transparent 0 52px, rgba(255,255,255,.02) 53px 54px, transparent 55px 108px); }
  .hero-texture { top: 17%; right: -34%; width: 82vw; height: 67%; opacity: .7; }
  .hero-copy { max-width: 100%; align-self: center; padding: 0; }
  .hero-copy .eyebrow { max-width: 290px; font-size: 8px; line-height: 1.7; }
  .hero h1 { font-size: clamp(47px,12.3vw,79px); line-height: .88; letter-spacing: -.08em; }
  .hero h1 .spray-text { font-size: .87em; }
  .hero-deck { max-width: 310px; margin: 25px 0 22px; font-size: 10px; }
  .hero-meta { gap: 17px; margin-top: 36px; font-size: 7px; }
  .hero-side { position: absolute; top: 22px; right: 23px; min-height: auto; height: 107px; justify-content: space-between; padding: 0 0 0 12px; font-size: 7px; }
  .hero-side p { margin: 6px 0 0; font-size: 7px; }
  .side-mark { position: absolute; top: 107px; right: 0; width: 75px; height: 65px; margin: 0; opacity: .75; }
  .side-mark span { font-size: 23px; }
  .side-mark i { width: 59px; height: 24px; }
  .side-mark b { width: 31px; height: 59px; }
  .side-note { display: none; }
  .hero-coordinates { right: 23px; bottom: 18px; left: 23px; font-size: 7px; }
  .signal-strip { min-height: 42px; justify-content: flex-start; gap: 17px; padding: 0 23px; font-size: 7px; }
  .signal-strip span:nth-last-child(-n+2) { display: none; }
  .shop-section { padding: 55px 20px 52px; }
  .section-topline .eyebrow { font-size: 8px; }
  .view-all { font-size: 7px; white-space: nowrap; }
  .shop-heading { display: block; padding: 23px 0; }
  .shop-heading h2 { font-size: clamp(37px,10vw,55px); }
  .shop-heading h2 span { font-size: 8px; }
  .shop-heading > p { margin-top: 16px; text-align: left; font-size: 9px; }
  .shop-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .filter-row { gap: 4px 16px; }
  .filter-chip { font-size: 8px; }
  .filter-selects { width: 100%; justify-content: space-between; }
  .filter-selects select { max-width: none; font-size: 8px; }
  .results-line { font-size: 7px; }
  .photo-note { font-size: 7px; line-height: 1.5; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 27px 10px; }
  .product-image { aspect-ratio: 1 / 1.15; }
  .photo-slot::before { width: 47%; height: 59%; }
  .photo-slot::after { width: 37%; height: 46%; }
  .photo-slot small { font-size: 7px; }
  .photo-slot b { font-size: 7px; }
  .photo-slot i { margin-top: 25px; font-size: 6px; }
  .favorite-button { top: 7px; right: 7px; width: 25px; height: 25px; font-size: 15px; }
  .quick-view { right: 6px; bottom: 6px; padding: 6px; font-size: 6px; opacity: 1; transform: none; }
  .product-info { gap: 4px; padding-top: 10px; }
  .product-brand { font-size: 6.5px; letter-spacing: .1em; }
  .product-title { margin: 6px 0 4px; font-size: 11px; }
  .product-size { font-size: 7px; }
  .condition-tag { margin-top: 7px; font-size: 6px; }
  .product-price { font-size: 8px; }
  .shop-bottom { gap: 8px; padding-top: 23px; font-size: 6px; }
  .load-more { font-size: 7px; }
  .signal-room { grid-template-columns: 1fr; gap: 30px; min-height: auto; padding: 64px 23px; }
  .room-copy h2 { font-size: clamp(43px,11.6vw,62px); }
  .room-copy > p:not(.eyebrow) { margin: 17px 0 15px; }
  .crt-room { min-height: 365px; }
  .tv-table { bottom: 22%; width: 82%; }
  .crt-tv { bottom: calc(22% + 12px); width: 78%; }
  .crt-body { height: 169px; grid-template-columns: minmax(0,1fr) 45px; gap: 7px; padding: 10px 9px 9px; }
  .crt-bezel { padding: 6px; }
  .crt-controls { gap: 7px; }
  .crt-speaker { width: 22px; height: 47px; }
  .crt-controls i { width: 13px; height: 13px; }
  .crt-controls i + i { width: 9px; height: 9px; }
  .crt-logo { font-size: 20px; }
  .room-coord { right: 11px; bottom: 10px; font-size: 6px; }
  .gallery-section { grid-template-columns: 1fr; gap: 29px; padding: 65px 23px 70px; }
  .gallery-copy h2 { font-size: clamp(48px,12vw,68px); }
  .gallery-copy > p:not(.eyebrow) { margin: 18px 0 20px; }
  .gallery-brand-mark { padding-top: 11px; }
  .gallery-note { margin-top: 17px; }
  .gallery-camera { padding: 7px 7px 8px; }
  .gallery-camera-topline,.gallery-camera-controls { font-size: 5px; }
  .brand-gallery { height: clamp(390px,118vw,610px); }
  .gallery-slide img { object-position: center 43%; }
  .gallery-caption { min-height: 65px; gap: 8px; }
  .gallery-caption-text { font-size: 7px; }
  .gallery-controls { gap: 4px; }
  .gallery-controls button { min-width: 29px; height: 29px; }
  .gallery-controls .gallery-play { min-width: 51px; font-size: 6px; }
  .open-sign-section { min-height: 130px; padding: 13px 22px; }
  .open-sign-frame { min-height: 100px; padding: 24px 20px 19px; }
  .open-sign-word { font-size: clamp(64px,17vw,96px); }
  .open-sign-word::before,.open-sign-word::after { inset: 4px 10px 9px; }
  .open-sign-sub { font-size: 6px; letter-spacing: .14em; }
  .open-sign-after { top: 13px; right: 13px; font-size: 7px; }
  .archive-section { min-height: auto; grid-template-columns: 1fr; gap: 38px; padding: 64px 23px; }
  .archive-copy h2 { font-size: clamp(47px,12vw,68px); }
  .archive-visual { min-height: 320px; }
  .about-section { gap: 39px; padding: 66px 23px 72px; }
  .about-title h2 { font-size: clamp(49px,12vw,68px); }
  .about-steps { grid-template-columns: 1fr; gap: 0; }
  .about-steps article { display: grid; min-height: auto; grid-template-columns: 35px 1fr; gap: 0 6px; padding: 14px 0; }
  .about-steps article > b { grid-row: span 2; padding-top: 2px; }
  .about-steps h3 { margin: 0 0 6px; font-size: 13px; }
  .about-steps p { max-width: none; font-size: 8px; }
  .closing-cta { min-height: 350px; padding: 58px 23px; }
  .closing-cta h2 { font-size: clamp(65px,15vw,91px); }
  .closing-cta::after { top: 17%; right: -9%; width: 48vw; height: 65%; }
  .closing-mark { right: 23px; bottom: 20px; font-size: 6px; }
  .site-footer { padding: 28px 23px 15px; }
  .footer-top { grid-template-columns: 1fr auto; gap: 20px 12px; padding-bottom: 25px; }
  .footer-top > p { font-size: 10px; }
  .site-footer nav { flex-wrap: wrap; gap: 14px; }
  .site-footer nav a { font-size: 7px; }
  .back-top { font-size: 7px; }
  .footer-bottom { flex-wrap: wrap; gap: 7px 14px; font-size: 6px; }
  .footer-bottom span:last-child { display: none; }
  .product-dialog { top: auto; bottom: 0; left: 0; width: 100%; max-height: 92dvh; grid-template-columns: 1fr; transform: translateY(102%); }
  .product-dialog.open { transform: none; }
  .dialog-image { min-height: 250px; max-height: 34dvh; }
  .dialog-content { padding: 25px 22px 27px; }
  .dialog-content .eyebrow { margin-bottom: 14px; }
  .dialog-title-line h2 { font-size: 23px; }
  .search-dialog, .saved-dialog, .size-dialog, .checkout-dialog { top: auto; bottom: 0; left: 0; width: 100%; max-height: 90dvh; padding: 31px 23px 28px; transform: translateY(102%); }
  .search-dialog.open, .saved-dialog.open, .size-dialog.open, .checkout-dialog.open { transform: none; }
  .dialog-close { top: 11px; right: 13px; }
  .cart-drawer { padding: 24px 21px; }
  .toast { right: 14px; bottom: 14px; }
}
@media (max-width: 370px) {
  .header-tools { gap: 6px; }
  .bag-open { gap: 5px; }
  .hero h1 { font-size: 45px; }
  .product-title { font-size: 10px; }
  .product-brand { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-ready { opacity: 1; transform: none; }
  .storm-overlay { display: none; }
  .open-sign-word { animation: none; }
  .product-image:hover .product-photo, .product-image:focus-visible .product-photo { transform: none; }
}

/* Live letter-by-letter type and spray paint */
.hero h1 { transform: none; transform-style: flat; transition: none; }
.hero h1.is-tilting { transition: none; }
.typewriter { transform: none; white-space: pre; text-shadow: none; }
.typewriter-letters { display: inline-block; white-space: pre; }
.typewriter-letter { position: relative; display: inline-block; opacity: 0; transform: translate3d(0,3px,0); transform-style: preserve-3d; text-shadow: 1px 1px 0 rgba(218,218,214,.9),2px 2px 0 rgba(127,127,124,.8),3px 3px 0 rgba(49,49,48,.75),0 0 19px rgba(255,255,255,.1); transition: transform .2s var(--ease),text-shadow .2s var(--ease),opacity .1s; }
.typewriter-letter.is-written,.typewriter-letter.is-glitching { opacity: 1; transform: translate3d(0,0,0); }
.typewriter-letter.is-glitching { color: #c7d3db; text-shadow: 2px 0 rgba(255,58,94,.6),-2px 0 rgba(69,216,255,.5); }
.typewriter-letter.is-hovered { z-index: 2; color: #fff; transform: perspective(260px) translate3d(0,-4px,9px) rotateY(calc(var(--letter-turn) * 9deg)) rotateX(-4deg); text-shadow: 1px 1px 0 #eee,2px 2px 0 #888,3px 3px 0 #454545,0 0 13px rgba(255,255,255,.28); }
.typewriter.typing::after { opacity: 1; }
.spray-text.sprayed { animation: none; }
.spray-letters { position: relative; display: inline-block; white-space: pre; }
.spray-letter { position: relative; display: inline-block; opacity: 0; filter: blur(7px); clip-path: inset(0 100% 0 0); transform: translate(-6px,5px) rotate(-3deg) scale(.95); transform-origin: 20% 85%; }
.spray-text.sprayed .spray-letter { animation: spray-letter-on .43s cubic-bezier(.15,.83,.26,1) calc(var(--spray-index) * 55ms) both; }
.spray-text.sprayed::before { animation: paint-drips 1.05s calc(var(--spray-duration,.7s) + 45ms) cubic-bezier(.18,.75,.26,1) both; }
.spray-text.sprayed::after { animation: mist .72s calc(var(--spray-duration,.7s) * .45) ease-out both; }
.spray-text.sprayed .spray-grain { animation: spray-grain-in .55s calc(var(--spray-duration,.7s) * .5) both; }
@keyframes spray-letter-on { 0% { opacity: 0; filter: blur(8px); clip-path: inset(0 100% 0 0); transform: translate(-7px,6px) rotate(-4deg) scale(.94); } 38% { opacity: .83; filter: blur(2.8px); clip-path: inset(0 38% 0 0); } 66% { opacity: 1; filter: blur(.4px); clip-path: inset(-4% -5%); transform: translate(1px,-1px) rotate(1deg) scale(1.02); } 100% { opacity: 1; filter: none; clip-path: inset(-8% -8%); transform: none; } }

/* Compact real camcorder with the gallery composited into its LCD */
.gallery-column { width: 100%; max-width: 650px; justify-self: center; }
.gallery-camera { position: relative; width: min(100%,650px); aspect-ratio: 3 / 2; margin: 0 auto; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; isolation: isolate; }
.gallery-camera::after { display: none; }
.camcorder-shell { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 16px 20px rgba(0,0,0,.44)); }
.brand-gallery { position: absolute; z-index: 1; top: 40%; left: 59.15%; width: 33.55%; height: 35.6%; overflow: hidden; border: 0; border-radius: 1.1%; background: #080808; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 1px rgba(0,0,0,.8); }
.brand-gallery::before { opacity: .3; }
.gallery-slide img { filter: saturate(.74) contrast(1.06) brightness(.9); }
.gallery-photo-mark { top: 5%; left: 5%; padding: 4px 5px; font-size: 5px; }
.gallery-camera-hud { top: 5%; right: 5%; left: 5%; font-size: 5px; }
.gallery-camera-bottom-hud { right: 5%; bottom: 5%; left: 5%; font-size: 5px; }
.camera-mode-dial { position: absolute; z-index: 3; top: 17.7%; left: 33%; width: 11.6%; height: 8.8%; border-radius: 50%; transform: rotate(0deg); transform-origin: 50% 50%; transition: transform .64s cubic-bezier(.16,.85,.24,1); pointer-events: none; }
.camera-mode-dial i { position: absolute; top: -1%; left: calc(50% - .5px); width: 1px; height: 25%; border-radius: 2px; background: rgba(242,242,237,.8); box-shadow: 0 0 3px rgba(255,255,255,.5); }
.camera-mode-dial.is-turning { filter: brightness(1.22); }
.camcorder-label { position: absolute; z-index: 3; bottom: 20%; left: 9%; color: rgba(225,225,219,.5); font: 5px var(--mono); letter-spacing: .12em; text-shadow: 0 1px 2px #000; pointer-events: none; }
.gallery-camera.is-flicker .gallery-flicker { animation: camera-screen-flicker .28s steps(2,end) both; }
.gallery-caption { max-width: 650px; margin-inline: auto; }
.gallery-progress { max-width: 650px; margin-inline: auto; }

/* Fine, branching downward lightning with a soft atmospheric spill */
.storm-overlay.is-striking { animation: storm-screen-flash .44s ease-out both; }
.storm-glow,.storm-core,.storm-main-glow,.storm-main-core,.storm-branch-glow,.storm-branch-core { fill: none; stroke-linecap: round; stroke-linejoin: bevel; stroke-dasharray: 3600; stroke-dashoffset: 3600; }
.storm-main-glow { stroke: #c1e5ff; stroke-width: 1.15; opacity: .62; filter: blur(1.5px) drop-shadow(0 0 3px rgba(134,207,255,.54)); }
.storm-main-core { stroke: #fff; stroke-width: .62; opacity: .94; filter: drop-shadow(0 0 1.4px rgba(255,255,255,.82)); }
.storm-branch-glow { stroke: #b9dfff; stroke-width: .52; opacity: .48; filter: blur(.8px) drop-shadow(0 0 2px rgba(134,207,255,.4)); }
.storm-branch-core { stroke: #fff; stroke-width: .34; opacity: .86; filter: drop-shadow(0 0 1px rgba(255,255,255,.65)); }
.storm-overlay.is-striking .storm-main-glow,.storm-overlay.is-striking .storm-branch-glow { animation: lightning-drop .22s ease-out both; }
.storm-overlay.is-striking .storm-main-core,.storm-overlay.is-striking .storm-branch-core { animation: lightning-drop .16s ease-out .02s both; }
.storm-screen { background: radial-gradient(ellipse at var(--storm-x,50%) 42%,rgba(220,240,255,.19),transparent 52%); }
.storm-overlay.is-striking .storm-screen { animation: storm-ambient-flash .38s ease-out both; }
@keyframes storm-screen-flash { 0%,100% { opacity: 0; } 4% { opacity: .5; } 11% { opacity: .12; } 17% { opacity: .29; } 31% { opacity: 0; } }
@keyframes storm-ambient-flash { 0%,100% { opacity: 0; } 5% { opacity: .42; } 13% { opacity: .06; } 22% { opacity: .2; } 36% { opacity: 0; } }

@media (max-width: 680px) {
  .gallery-camera { width: min(100%,560px); }
  .gallery-camera-hud,.gallery-camera-bottom-hud { font-size: 4px; }
  .gallery-photo-mark { font-size: 4px; }
}

/* Language switch: quiet and legible beside the utility controls. */
.language-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); }
.language-choice { display: inline-flex; min-width: 42px; min-height: 27px; align-items: center; justify-content: center; gap: 4px; padding: 3px 5px; border: 0; color: #aaa; background: transparent; font: 8px/1 var(--mono); letter-spacing: .08em; cursor: pointer; transition: color .18s,background .18s; }
.language-choice > span { font-size: 13px; line-height: 1; }
.language-choice.is-active { color: #080808; background: #e4e4e0; }
.language-choice:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

/* The reference lettering is painted stroke by stroke, then the drips settle. */
.spray-text::before { content: none; }
.spray-letters { display: inline; white-space: normal; }
.spray-text.sprayed .spray-letter { animation: none; opacity: 1; filter: none; clip-path: none; }
.spray-letter { display: inline-block; height: 1.16em; margin-right: -.075em; overflow: visible; color: #e0e0dc; opacity: 1; filter: none; clip-path: none; vertical-align: -.23em; transform: rotate(var(--letter-tilt,0deg)); transform-origin: 50% 75%; }
.spray-letter path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spray-halo { stroke-width: calc(var(--ink-weight,8px) + 4px); opacity: .24; filter: blur(1.3px); }
.spray-ink { stroke-width: var(--ink-weight,8px); opacity: .94; filter: drop-shadow(0 0 .45px currentColor); }
.spray-highlight { stroke: #fff; stroke-width: 1.1px; opacity: .2; }
.spray-drip-halo { stroke-width: 5px; opacity: .18; filter: blur(1.15px); }
.spray-drip { stroke-width: var(--ink-weight,2.5px); opacity: .84; }
.spray-umlaut { fill: currentColor; opacity: 0; }
.spray-text.sprayed .spray-letter path { animation: spray-stroke-draw .58s cubic-bezier(.2,.68,.22,1) both; }
.spray-text.sprayed .spray-letter .spray-drip,
.spray-text.sprayed .spray-letter .spray-drip-halo { animation-name: spray-drip-draw; animation-duration: .5s; animation-timing-function: cubic-bezier(.16,.72,.26,1); }
.spray-text.sprayed .spray-letter .spray-umlaut { animation: spray-splat-in .18s ease-out both; }
.spray-text.sprayed .spray-grain { animation: spray-grain-in .7s .2s both; }
.spray-text.sprayed::after { animation: mist .78s .1s ease-out both; }
@keyframes spray-stroke-draw { 0% { stroke-dashoffset: 1; opacity: .12; } 12% { opacity: .8; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes spray-drip-draw { 0% { stroke-dashoffset: 1; opacity: .1; } 20% { opacity: .88; } 100% { stroke-dashoffset: 0; opacity: .82; } }
@keyframes spray-splat-in { 0% { transform: scale(.25); opacity: 0; } 65% { transform: scale(1.2); opacity: .95; } 100% { transform: scale(1); opacity: .8; } }

/* Fit the new user supplied camera photo: the gallery now sits inside its left LCD. */
.brand-gallery { top: 26.4%; left: 24.35%; width: 53.1%; height: 50.8%; border-radius: .7%; transform: skewY(4.3deg); transform-origin: top left; }
.gallery-camera-hud { top: 5%; right: 5%; left: 5%; font-size: 5px; }
.gallery-camera-bottom-hud { right: 5%; bottom: 5%; left: 5%; font-size: 5px; }
.gallery-photo-mark { top: 5%; left: 5%; padding: 4px 5px; font-size: 5px; }
.camera-mode-dial { top: 17.2%; left: 71.2%; width: 10.7%; height: 7.2%; }
.camera-mode-dial i { top: 9%; left: 49%; width: 2px; height: 28%; background: rgba(55,55,52,.82); box-shadow: 0 0 1px rgba(255,255,255,.32); }

/* A locally bundled wet-paint face gives the winter headline its own hand-sprayed character. */
/* Seit 24.10.2026 auf die nötigen Zeichen verkleinert (A–Z, Umlaute, ß, Ziffern, Satzzeichen) und als WOFF2: 56 statt 409 KB. */
@font-face { font-family: "Rubik Wet Paint"; src: url("assets/fonts/rubik-wet-paint-web.woff2") format("woff2"), url("assets/fonts/rubik-wet-paint.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
.snowboard-copy h2 { line-height: .87; }
.snowboard-copy h2 .spray-wet { position: relative; display: inline-block; margin: -.11em 0 -.05em -.045em; padding: .08em .08em .2em 0; color: #ececea; font-family: "Rubik Wet Paint", Impact, var(--display); font-size: .84em; font-style: normal; font-weight: 400; letter-spacing: -.035em; line-height: 1.05; -webkit-text-stroke: 1.25px #090a0b; paint-order: stroke fill; background: linear-gradient(180deg,#fff 0%,#d6d8d7 37%,#777c80 51%,#f4f4f0 59%,#a9acad 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 2px 2px 0 #f0f0ed,4px 5px 0 #6b7072,7px 8px 0 #090a0b,0 0 18px rgba(238,242,244,.22); filter: drop-shadow(0 12px 13px rgba(0,0,0,.48)); transform: rotate(-2.6deg) skewX(-3deg); transform-origin: 25% 75%; }
.snowboard-copy h2 .spray-wet::before { position: absolute; z-index: -1; top: -.1em; right: -.07em; bottom: .08em; left: -.08em; background: radial-gradient(circle at 9% 40%,rgba(240,242,241,.88) 0 1.2px,transparent 1.9px),radial-gradient(circle at 96% 23%,rgba(230,233,232,.82) 0 1.4px,transparent 2.2px),radial-gradient(ellipse at 3% 75%,rgba(231,234,233,.56) 0 1.7px,transparent 3px),radial-gradient(ellipse at 88% 89%,rgba(239,241,239,.65) 0 1.4px,transparent 2.5px); content: ""; filter: drop-shadow(0 0 3px rgba(239,245,248,.28)); pointer-events: none; }
.snowboard-copy h2 .spray-wet::after { position: absolute; z-index: -2; inset: -.12em -.08em -.04em; border-radius: 48%; background: radial-gradient(ellipse at 31% 54%,rgba(235,239,239,.13),transparent 55%),radial-gradient(ellipse at 76% 42%,rgba(235,239,239,.1),transparent 52%); content: ""; filter: blur(7px); pointer-events: none; }
.snowboard-copy h2 .spray-wet.sprayed { animation: wet-tag-settle .56s cubic-bezier(.16,.82,.24,1) both; }
@keyframes wet-tag-settle { 0% { transform: rotate(-4.2deg) skewX(-3deg) scale(.96); filter: brightness(1.35) drop-shadow(0 13px 13px rgba(0,0,0,.5)); } 65% { transform: rotate(-1.8deg) skewX(-3deg) scale(1.025); } 100% { transform: rotate(-2.6deg) skewX(-3deg) scale(1); filter: drop-shadow(0 12px 13px rgba(0,0,0,.48)); } }

/* Keep the hand-lettered SVG words legible at rest while their letters stamp into place. */
.spray-letter path { stroke-dashoffset: 0; }
.spray-text.sprayed .spray-letter { opacity: 1; filter: none; clip-path: none; animation: graffiti-stamp .42s cubic-bezier(.16,.82,.24,1) calc(var(--spray-index,0) * 55ms) both; }
.spray-text.sprayed .spray-letter path,.spray-text.sprayed .spray-letter .spray-drip,.spray-text.sprayed .spray-letter .spray-drip-halo { animation: none; stroke-dashoffset: 0; }
.spray-text.sprayed .spray-letter .spray-umlaut { animation: none; opacity: .82; }
@keyframes graffiti-stamp { 0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-2px,2px) rotate(calc(var(--letter-tilt,0deg) - 1.8deg)) scale(.96); filter: blur(4px); } 52% { opacity: .88; clip-path: inset(-4% 34% -4% 0); filter: blur(1px); } 82% { opacity: 1; clip-path: inset(-7% -5%); transform: translate(1px,-1px) rotate(calc(var(--letter-tilt,0deg) + .6deg)) scale(1.025); } 100% { opacity: 1; clip-path: inset(-8% -8%); transform: rotate(var(--letter-tilt,0deg)) scale(1); filter: none; } }

/* Smoked archival glass: quiet graphite panes, cool edge light, and restrained background blur. */
:root { --glass-fill: rgba(17,19,20,.72); --glass-edge: rgba(237,240,240,.2); --glass-glint: rgba(248,250,250,.075); }
.site-header { border-bottom-color: rgba(235,238,238,.2); background: linear-gradient(180deg,rgba(25,27,28,.82),rgba(9,10,11,.78)); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); box-shadow: 0 9px 28px rgba(0,0,0,.2); }
.language-switch { border-color: var(--glass-edge); background: linear-gradient(145deg,rgba(245,248,248,.07),rgba(15,17,18,.45)); box-shadow: inset 0 1px 0 var(--glass-glint),0 5px 18px rgba(0,0,0,.18); -webkit-backdrop-filter: blur(12px) saturate(115%); backdrop-filter: blur(12px) saturate(115%); }
.mobile-nav:not([hidden]) { border-bottom-color: var(--glass-edge); background: linear-gradient(145deg,rgba(26,28,29,.94),rgba(9,10,11,.88)); box-shadow: 0 14px 35px rgba(0,0,0,.34),inset 0 1px 0 var(--glass-glint); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); }
.filter-selects select { border: 1px solid rgba(232,235,235,.14); border-radius: 0; background: linear-gradient(145deg,rgba(245,248,248,.055),rgba(15,17,18,.58)); box-shadow: inset 0 1px 0 rgba(248,250,250,.05); }
.product-image-wrap { border-color: rgba(235,239,239,.22); background: linear-gradient(145deg,rgba(230,235,237,.08),transparent 32%),rgba(14,16,17,.78); box-shadow: inset 0 1px 0 rgba(248,250,250,.12),0 10px 28px rgba(0,0,0,.2); }
.product-image { background: linear-gradient(135deg,rgba(235,240,241,.075),transparent 30%),linear-gradient(137deg,#191b1c 0%,#101213 51%,#1b1d1e 100%); box-shadow: inset 0 1px 0 rgba(248,250,250,.11),inset 0 -44px 85px rgba(0,0,0,.16); }
.product-image::after { z-index: 0; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; border: 0; background: linear-gradient(119deg,rgba(248,250,250,.085) 0%,rgba(248,250,250,.018) 16%,transparent 33% 68%,rgba(224,232,235,.035) 82%,transparent 100%); box-shadow: inset 0 1px 0 rgba(248,250,250,.13),inset 1px 0 rgba(248,250,250,.045); pointer-events: none; }
.favorite-button,.quick-view { border-color: rgba(239,242,242,.38); background: rgba(17,19,20,.62); box-shadow: inset 0 1px 0 rgba(248,250,250,.12),0 4px 14px rgba(0,0,0,.22); -webkit-backdrop-filter: blur(9px) saturate(112%); backdrop-filter: blur(9px) saturate(112%); }
.favorite-button[aria-pressed="true"] { background: rgba(70,73,74,.72); }
.button { border-color: rgba(235,239,239,.6); background: linear-gradient(145deg,rgba(248,250,250,.055),rgba(20,22,23,.14)); box-shadow: inset 0 1px 0 rgba(248,250,250,.12),0 6px 18px rgba(0,0,0,.14); -webkit-backdrop-filter: blur(7px) saturate(108%); backdrop-filter: blur(7px) saturate(108%); }
.button:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 9px 24px rgba(0,0,0,.22); }
.drawer-backdrop,.modal-backdrop { background: rgba(0,0,0,.58); -webkit-backdrop-filter: blur(7px) saturate(82%); backdrop-filter: blur(7px) saturate(82%); }
.cart-drawer,.product-dialog,.search-dialog,.saved-dialog,.size-dialog,.checkout-dialog { border-color: rgba(237,240,240,.22); background: linear-gradient(145deg,rgba(28,30,31,.91),rgba(10,11,12,.9)); box-shadow: inset 0 1px 0 rgba(248,250,250,.11),0 24px 80px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(19px) saturate(112%); backdrop-filter: blur(19px) saturate(112%); }
.snowboard-image-frame { border-color: rgba(238,242,243,.24); box-shadow: inset 0 1px 0 rgba(248,250,250,.19),inset 0 0 45px rgba(220,230,234,.045),0 14px 38px rgba(0,0,0,.16); }
.snowboard-image-frame::before { background: linear-gradient(180deg,rgba(5,6,7,.04) 50%,rgba(4,5,7,.58)),linear-gradient(90deg,rgba(4,5,7,.18),transparent 35% 72%,rgba(4,5,7,.18)),linear-gradient(118deg,rgba(246,249,250,.11),transparent 17% 69%,rgba(235,241,242,.035)); }
.snowboard-image-frame::after { position: absolute; z-index: 3; inset: 0; background: linear-gradient(111deg,transparent 0 35%,rgba(244,248,249,.035) 35.3%,transparent 35.8% 67%,rgba(246,249,250,.04) 67.2%,transparent 67.7%); content: ""; opacity: .8; pointer-events: none; mix-blend-mode: screen; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,.mobile-nav:not([hidden]),.favorite-button,.quick-view,.button,.cart-drawer,.product-dialog,.search-dialog,.saved-dialog,.size-dialog,.checkout-dialog { background-color: #111314; }
  .drawer-backdrop,.modal-backdrop { background: rgba(0,0,0,.76); }
}

@media (max-width: 680px) {
  .header-tools { gap: 6px; }
  .language-switch { gap: 0; padding: 1px; }
  .language-choice { min-width: 31px; min-height: 24px; gap: 2px; padding: 2px 3px; font-size: 6px; }
  .language-choice > span { font-size: 11px; }
  .brand-gallery { top: 26.4%; left: 24.35%; width: 53.1%; height: 50.8%; }
  .gallery-camera-hud,.gallery-camera-bottom-hud { font-size: 4px; }
  .gallery-photo-mark { font-size: 4px; }
}
@media (max-width: 370px) {
  .header-tools { gap: 3px; }
  .language-choice { min-width: 28px; }
}


/* A compact 27 ARCHIVE mark and a field campaign that opens as it enters view. */
.brand-logo { display: block; width: 76px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.wordmark > span:last-child { display: flex; min-height: 30px; align-items: flex-end; }
.wordmark small { margin-top: 0; font-size: 7px; letter-spacing: .14em; white-space: nowrap; }
.gallery-brand-mark .brand-logo { width: 88px; height: 36px; }
.gallery-brand-mark > span { align-self: center; }
.gallery-brand-mark small { margin-top: 0; }

.snowboard-section { position: relative; display: grid; min-height: 780px; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(28px,5vw,76px); align-items: center; overflow: hidden; padding: 82px var(--gutter) 92px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 74% 40%,rgba(213,222,230,.11),transparent 47%),linear-gradient(130deg,#101113 0%,#15171a 48%,#08090a 100%); isolation: isolate; }
.snowboard-section::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(5,6,7,.45),transparent 62%),radial-gradient(ellipse at 73% 83%,rgba(235,237,237,.13),transparent 48%); content: ""; pointer-events: none; }
.snowboard-mountains { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .72; pointer-events: none; }
.ridge-back { fill: url(#ridge-back); }
.ridge-front { fill: url(#ridge-front); }
.ridge-snow { fill: #e4e5e2; opacity: .52; }
.snowboard-grain { position: absolute; z-index: 0; inset: 0; background: radial-gradient(rgba(255,255,255,.34) .55px,transparent .85px) 0 0/5px 5px; opacity: .1; mix-blend-mode: screen; pointer-events: none; }
.snowboard-copy { position: relative; z-index: 3; max-width: 500px; padding-bottom: 18px; }
.snowboard-copy .eyebrow { margin-bottom: 29px; font-size: 8px; }
.snowboard-copy h2 { margin: 0; font: 900 clamp(58px,7.7vw,108px)/.8 var(--display); letter-spacing: -.075em; text-shadow: 0 2px 0 #08090a,0 5px 14px rgba(0,0,0,.46); }
.snowboard-kicker { display: inline-block; margin-bottom: .13em; color: #b9bec0; font: 8px/1 var(--mono); letter-spacing: .25em; text-shadow: none; vertical-align: middle; }
.snowboard-copy h2 .spray-text { color: #f0f0ec; -webkit-text-stroke: 0; text-shadow: 2px 2px 0 rgba(10,11,12,.9),-1px 0 0 rgba(244,244,238,.48),0 0 13px rgba(238,242,244,.19); transform: rotate(-2.4deg) skewX(-6deg); }
.snowboard-copy > p:not(.eyebrow) { max-width: 390px; margin: 30px 0 25px; color: #b1b3b3; font: 11px/1.8 var(--mono); }
.snowboard-copy .button { min-height: 44px; gap: 17px; }
.snowboard-index { display: block; margin-top: 44px; color: #7e8285; font: 8px var(--mono); letter-spacing: .14em; }
.snowboard-image-frame { position: relative; z-index: 1; display: block; min-width: 0; min-height: 625px; overflow: hidden; margin: 0; border: 1px solid rgba(235,239,241,.16); background: radial-gradient(ellipse at 49% 34%,rgba(220,228,234,.14),transparent 56%),linear-gradient(180deg,rgba(33,39,44,.28),rgba(5,7,9,.45)); isolation: isolate; }
.snowboard-image-frame::before { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg,rgba(5,6,7,.04) 50%,rgba(4,5,7,.58)),linear-gradient(90deg,rgba(4,5,7,.18),transparent 35% 72%,rgba(4,5,7,.18)); content: ""; pointer-events: none; }
.snowboard-photo { position: absolute; z-index: 1; top: 12%; left: 26%; width: 48%; height: 76%; border: 1px solid rgba(245,246,244,.46); object-fit: contain; object-position: center; filter: grayscale(1) contrast(1.08) brightness(.88); box-shadow: 0 22px 44px rgba(0,0,0,.48); transition: top 1.12s cubic-bezier(.16,.84,.22,1),left 1.12s cubic-bezier(.16,.84,.22,1),width 1.12s cubic-bezier(.16,.84,.22,1),height 1.12s cubic-bezier(.16,.84,.22,1),border-color .75s ease,filter .75s ease; }
.snowboard-section.is-open .snowboard-photo { top: 0; left: 0; width: 100%; height: 100%; border-color: transparent; filter: grayscale(1) contrast(1.12) brightness(.83); }
.snowboard-photo-caption { position: absolute; z-index: 4; right: 15px; bottom: 14px; left: 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: rgba(244,245,241,.76); font: 7px var(--mono); letter-spacing: .15em; text-shadow: 0 1px 5px #000; }
.snowboard-logo { display: block; width: 97px; height: 37px; object-fit: contain; opacity: .9; }
.snowboard-weather { position: absolute; z-index: 2; inset: 0 0 0 43%; overflow: hidden; pointer-events: none; }
.rain-glass,.snow-fall { position: absolute; inset: 0; display: block; }
.rain-glass { opacity: .5; mix-blend-mode: screen; }
.rain-glass::before { position: absolute; inset: 0; background-image: radial-gradient(ellipse 2px 7px at 11% 21%,rgba(239,247,250,.3),rgba(212,230,238,.1) 45%,transparent 100%),radial-gradient(ellipse 3px 9px at 33% 13%,rgba(248,252,253,.24),rgba(212,230,238,.08) 48%,transparent 100%),radial-gradient(ellipse 2px 6px at 58% 32%,rgba(244,250,252,.28),rgba(212,230,238,.08) 52%,transparent 100%),radial-gradient(ellipse 3px 10px at 78% 18%,rgba(244,250,252,.24),rgba(212,230,238,.08) 50%,transparent 100%),radial-gradient(ellipse 2px 8px at 23% 57%,rgba(244,250,252,.2),rgba(212,230,238,.07) 49%,transparent 100%),radial-gradient(ellipse 3px 11px at 45% 71%,rgba(244,250,252,.22),rgba(212,230,238,.07) 50%,transparent 100%),radial-gradient(ellipse 2px 7px at 88% 63%,rgba(244,250,252,.26),rgba(212,230,238,.08) 48%,transparent 100%),radial-gradient(ellipse 2px 6px at 68% 87%,rgba(244,250,252,.19),rgba(212,230,238,.06) 50%,transparent 100%); content: ""; backdrop-filter: blur(.2px) contrast(1.04); animation: glass-runoff 15s ease-in-out infinite alternate; }
.rain-glass::after { position: absolute; inset: 0; background: linear-gradient(101deg,transparent 0 18%,rgba(240,247,250,.09) 18.2%,transparent 18.6% 51%,rgba(240,247,250,.07) 51.2%,transparent 51.6% 82%,rgba(240,247,250,.08) 82.3%,transparent 82.7%); opacity: .64; content: ""; }
.snow-fall { opacity: .58; mix-blend-mode: screen; background-image: radial-gradient(1.2px 1.2px at 14% 19%,rgba(255,255,255,.88) 99%,transparent),radial-gradient(1.6px 1.6px at 73% 63%,rgba(255,255,255,.74) 99%,transparent),radial-gradient(1px 1px at 38% 81%,rgba(255,255,255,.72) 99%,transparent),linear-gradient(166deg,transparent 49.4%,rgba(235,243,248,.36) 49.8%,transparent 50.5%); background-size: 173px 227px,263px 321px,317px 269px,11px 37px; animation: snow-screen-drift 16s linear infinite; }
.snowboard-edge-note { position: absolute; z-index: 3; right: var(--gutter); bottom: 19px; left: var(--gutter); display: flex; justify-content: space-between; color: rgba(230,233,232,.55); font: 7px var(--mono); letter-spacing: .15em; pointer-events: none; }
@keyframes snow-screen-drift { to { background-position: -60px 290px,115px 370px,-83px 245px,12px 300px; } }
@keyframes glass-runoff { 0% { transform: translate3d(0,-.7%,0); } 100% { transform: translate3d(1.2%,1.3%,0); } }

/* Hand-drawn spray lettering: layered black edge, wet paint body, silver highlight and scattered overspray. */
.spray-letters { display: inline; white-space: normal; }
.spray-letter { height: 1.22em; margin-right: -.055em; vertical-align: -.24em; overflow: visible; transform: rotate(var(--letter-tilt,0deg)); transform-origin: 50% 75%; }
.spray-letter path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spray-shadow { stroke: #070809; stroke-width: calc(var(--ink-weight,12px) + 9px); opacity: .98; transform: translate(2px,3px); filter: drop-shadow(1px 2px 1px rgba(0,0,0,.8)); }
.spray-halo { stroke: #f1f1ed; stroke-width: calc(var(--ink-weight,12px) + 5px); opacity: .22; filter: blur(2px); }
.spray-ink { stroke: #e2e2de; stroke-width: var(--ink-weight,12px); opacity: .97; filter: drop-shadow(0 0 .7px rgba(255,255,255,.85)); }
.spray-highlight { stroke: #fff; stroke-width: 1.25px; opacity: .52; }
.spray-drip-halo { stroke: #eeefed; stroke-width: 6px; opacity: .24; filter: blur(1.4px); }
.spray-drip { stroke: #e5e5e1; stroke-width: var(--ink-weight,2.5px); opacity: .87; }
.spray-fleck { fill: #ededeb; stroke: none; opacity: .5; filter: drop-shadow(0 0 1px rgba(255,255,255,.46)); transform-box: fill-box; transform-origin: center; }
.spray-text.sprayed .spray-letter .spray-fleck { animation: fleck-settle .28s ease-out both; }
@keyframes fleck-settle { 0% { opacity: 0; transform: scale(.25); } 58% { opacity: .75; transform: scale(1.22); } 100% { opacity: .5; transform: scale(1); } }

/* Frame the five original portrait crops for the camcorder's wide LCD. */
.gallery-slide img { object-position: center var(--frame-y,46%); }
.gallery-slide:nth-child(2) img { object-position: center var(--frame-y,46%); }
.gallery-slide:nth-child(3) img { object-position: center var(--frame-y,46%); }
.gallery-slide:nth-child(4) img { object-position: center var(--frame-y,46%); }
.gallery-slide:nth-child(5) img { object-position: center var(--frame-y,46%); }

/* Keep the OPEN tube discreet and mounted in the hero corner. */
.open-sign-section { position: absolute; z-index: 5; right: var(--gutter); bottom: 54px; display: block; width: 118px; min-height: 0; overflow: visible; padding: 0; border: 0; background: transparent; isolation: isolate; }
.open-sign-section::before,.open-sign-section::after { display: none; }
.open-sign-frame { display: grid; width: 100%; min-height: 0; place-items: center; padding: 11px 5px 8px; border-color: rgba(164,232,244,.32); background: linear-gradient(180deg,rgba(255,255,255,.035),transparent 35% 75%,rgba(160,228,242,.025)),rgba(3,7,9,.83); box-shadow: inset 0 0 19px rgba(137,221,240,.045),0 0 14px rgba(67,198,225,.1); }
.open-sign-frame::before,.open-sign-frame::after { display: none; }
.open-sign-word { padding: 3px 4px 5px; font-size: 33px; letter-spacing: .09em; text-shadow: 0 0 2px #fff,0 0 5px rgba(233,252,255,.94),0 0 12px rgba(115,229,250,.8),0 0 22px rgba(59,206,232,.45),-2px 0 10px rgba(255,64,110,.2),2px 0 10px rgba(72,221,255,.35); animation: open-corner-flicker 8.4s steps(1,end) infinite; }
.open-sign-word::before,.open-sign-word::after { inset: 3px 4px 5px; }
.open-sign-word::before { color: #ff5a7e; opacity: .25; }
.open-sign-word::after { color: #6fe9ff; opacity: .33; }
.open-sign-word:hover,.open-sign-word:focus-visible { filter: brightness(1.15); }
.open-sign-serial,.open-sign-after,.open-sign-sub { display: none; }
.open-sign-grain { opacity: .1; }
@keyframes open-corner-flicker { 0%,6%,6.3%,31%,31.2%,100% { opacity: 1; filter: brightness(1); } 6.1%,31.1% { opacity: .56; filter: brightness(.65); } 68%,68.2% { opacity: .92; } 68.1% { opacity: .72; filter: brightness(.8); } }

/* The tube stays on the archive signal between its short video and test-card interruptions. */
.crt-clip { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: grayscale(.86) contrast(1.18) brightness(.86); opacity: 0; transition: opacity .16s steps(2,end); }
.crt-logo,.crt-tune { transition: opacity .12s steps(2,end); }
.crt-screen.is-playing .crt-clip { opacity: 1; animation: crt-sting-in .2s steps(2,end) both; }
.crt-screen.is-playing .crt-logo,.crt-screen.is-playing .crt-tune { opacity: 0; }
@keyframes crt-sting-in { 0% { opacity: .2; filter: grayscale(1) contrast(1.8) brightness(1.5); transform: scaleY(.08); } 36% { opacity: 1; transform: scaleY(1.04); } 100% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 980px) {
  .snowboard-section { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 28px; }
  .snowboard-image-frame { min-height: 600px; }
  .snowboard-copy h2 { font-size: clamp(53px,8.5vw,82px); }
}
@media (max-width: 680px) {
  .brand-logo { width: 62px; height: 25px; }
  .wordmark { gap: 5px; }
  .wordmark small { font-size: 6px; letter-spacing: .11em; }
  .gallery-brand-mark .brand-logo { width: 80px; height: 34px; }
  .snowboard-section { grid-template-columns: minmax(0,1fr); gap: 28px; min-height: 0; padding: 70px 23px 75px; }
  .snowboard-copy { max-width: 460px; padding: 0 0 5px; }
  .snowboard-copy .eyebrow { margin-bottom: 23px; font-size: 7px; }
  .snowboard-copy h2 { font-size: clamp(57px,14vw,90px); }
  .snowboard-copy > p:not(.eyebrow) { max-width: 340px; margin: 24px 0 20px; font-size: 9px; }
  .snowboard-index { margin-top: 29px; font-size: 7px; }
  .snowboard-image-frame { min-height: clamp(470px,132vw,650px); }
  .snowboard-photo { top: 9%; left: 23%; width: 54%; height: 81%; }
  .snowboard-photo-caption { right: 9px; bottom: 8px; left: 9px; font-size: 6px; }
  .snowboard-logo { width: 78px; height: 31px; }
  .snowboard-weather { inset: 37% 0 4% 0; }
  .snowboard-edge-note { right: 23px; bottom: 13px; left: 23px; font-size: 6px; }
  .snowboard-edge-note span:last-child { display: none; }
  .open-sign-section { right: 23px; bottom: 46px; width: 91px; }
  .open-sign-frame { padding: 8px 3px 6px; }
  .open-sign-word { font-size: 25px; }
  .open-sign-word::before,.open-sign-word::after { inset: 2px 3px 4px; }
  .crt-clip { object-position: center 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .snowboard-photo { transition: none; }
  .snow-fall,.rain-glass::before,.open-sign-word,.crt-screen,.crt-screen::after { animation: none !important; }
}


/* Explicit link-state colors keep archive links consistent in dark-mode browsers. */
a:any-link { color: inherit; }
.main-nav a:any-link,.site-footer nav a:any-link { color: #d1d1cf; }
a.button:any-link { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 27px; padding: 0 18px; border: 1px solid rgba(232,232,229,.65); color: var(--paper); background: transparent; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
a.button:any-link:hover { color: var(--black); background: var(--paper); }
a.button-light:any-link { color: var(--paper); }

/* Let the supplied photograph carry the distant ridge texture. */
.snowboard-landscape { position: absolute; z-index: -1; inset: -7%; background: linear-gradient(90deg,rgba(7,8,10,.62),rgba(7,8,10,.2) 60%,rgba(7,8,10,.58)),url("assets/snowboarder-reference.webp") center 55%/cover no-repeat; opacity: .32; filter: grayscale(1) brightness(.52) blur(13px); transform: scale(1.06); pointer-events: none; }
.snowboard-mountains { opacity: .4; filter: blur(2.2px); }
.ridge-snow { opacity: .3; }
.snowboard-grain { opacity: .055; }
.brand-logo { width: 92px; height: 34px; }
.gallery-brand-mark .brand-logo { width: 104px; height: 42px; }
@media (max-width: 680px) {
  .brand-logo { width: 66px; height: 27px; }
  .gallery-brand-mark .brand-logo { width: 88px; height: 37px; }
}

/* Portfolio lettering uses the bundled wet-paint face, with a real letter-by-letter entrance. */
.spray-letters { display: inline; white-space: normal; }
.spray-text:not(.spray-wet) .spray-letter { display: inline-block; height: auto; margin-right: -.055em; color: #ededea; font-family: "Rubik Wet Paint", Impact, var(--display); font-size: 1em; font-style: normal; font-weight: 400; line-height: 1.05; letter-spacing: -.025em; opacity: 1; overflow: visible; vertical-align: -.02em; -webkit-text-stroke: .8px rgba(5,6,7,.92); paint-order: stroke fill; text-shadow: 1px 1px 0 rgba(6,7,8,.9),2px 3px 0 rgba(6,7,8,.78),0 0 12px rgba(242,244,242,.2); transform: rotate(var(--letter-tilt,0deg)); transform-origin: 50% 80%; }
.spray-text.sprayed:not(.spray-wet) .spray-letter { animation: graffiti-stamp .38s cubic-bezier(.16,.82,.24,1) calc(var(--spray-index,0) * 44ms) both; }
.spray-text:not(.spray-wet) .spray-grain { position: absolute; z-index: 1; inset: -14% -5%; border-radius: 50%; background: radial-gradient(circle at 11% 44%,rgba(241,244,243,.55) 0 1px,transparent 2px),radial-gradient(circle at 92% 17%,rgba(241,244,243,.47) 0 1.2px,transparent 2.2px),radial-gradient(ellipse at 79% 88%,rgba(241,244,243,.34) 0 1.5px,transparent 3px),radial-gradient(circle at 32% 91%,rgba(241,244,243,.44) 0 1px,transparent 2px); opacity: .52; pointer-events: none; }
.spray-text.sprayed:not(.spray-wet)::after { inset: -16% -8%; border-radius: 47%; background: radial-gradient(ellipse at 30% 55%,rgba(237,241,241,.11),transparent 56%),radial-gradient(ellipse at 74% 45%,rgba(237,241,241,.09),transparent 55%); content: ""; filter: blur(6px); pointer-events: none; }
.gallery-copy h2 { white-space: nowrap; font-size: clamp(42px,5.25vw,68px); }

/* Match the screen overlay to the camcorder's tilted LCD and keep every frame inside its bezel. */
.brand-gallery { top: 25.8%; left: 24.45%; width: 54.25%; height: 47%; border-radius: .7%; transform: skewY(4.3deg); transform-origin: top left; clip-path: none; background: #08090a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.17),0 0 0 1px rgba(0,0,0,.92); }
.gallery-slide::before { position: absolute; z-index: 0; inset: -5%; background-image: linear-gradient(180deg,rgba(3,4,5,.16),rgba(3,4,5,.42)),var(--gallery-photo); background-position: center,center var(--frame-y,46%); background-size: cover; content: ""; filter: blur(11px) saturate(.6) brightness(.52); opacity: .72; transform: scale(1.06); }
.gallery-slide img { position: relative; z-index: 1; object-fit: cover; object-position: center var(--frame-y,46%); filter: saturate(.77) contrast(1.06) brightness(.89); }
.gallery-slide::after { z-index: 2; background: linear-gradient(180deg,rgba(0,0,0,.22),transparent 27% 68%,rgba(0,0,0,.5)); }
.gallery-camera-hud,.gallery-camera-bottom-hud { z-index: 4; text-shadow: 0 1px 3px rgba(0,0,0,.95),0 0 7px rgba(0,0,0,.96); }
.gallery-photo-mark { z-index: 4; background: rgba(5,6,7,.48); }
.gallery-flash,.gallery-flicker { z-index: 5; }
.camera-mode-dial { z-index: 3; }

/* Hero lettering follows the supplied spray-tag reference: connected wet strokes, overspray, then long drips. */
.hero h1 .hero-graffiti { width: min(8.9em,calc(100vw - 54px)); max-width: 100%; margin-top: .08em; color: transparent; font-size: .95em; letter-spacing: 0; line-height: 0; vertical-align: -.2em; -webkit-text-stroke: 0; text-shadow: none; transform: none; }
.hero-graffiti::before,.hero-graffiti::after { content: none !important; }
.hero-graffiti-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 5px rgba(231,237,238,.17)); shape-rendering: geometricPrecision; }
.tag-paint,.tag-drip { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tag-paint-shadow,.tag-flourish-shadow { stroke: #b8bdbe; stroke-width: 47px; opacity: .18; }
.tag-paint-body,.tag-flourish-body { stroke: #e5e7e5; stroke-width: 36px; opacity: .91; }
.tag-paint-highlight,.tag-flourish-highlight { stroke: #fff; stroke-width: 2.8px; opacity: .48; }
.tag-drip { stroke: rgba(238,240,237,.87); stroke-width: 3.7px; }
.tag-bead,.tag-fleck { fill: #f0f1ec; opacity: 0; }
.tag-fleck { fill: rgba(239,241,239,.78); }
.hero-graffiti.sprayed .tag-paint { animation: spray-tag-draw .68s cubic-bezier(.32,.12,.22,1) var(--paint-delay,0ms) both; }
.hero-graffiti.sprayed .tag-flourish { animation-duration: .92s; }
.hero-graffiti.sprayed .tag-drip { animation: spray-tag-drip .57s cubic-bezier(.2,.67,.25,1) var(--paint-delay,0ms) both; }
.hero-graffiti.sprayed .tag-bead { animation: spray-tag-bead .24s cubic-bezier(.16,.8,.28,1) var(--paint-delay,0ms) both; }
.hero-graffiti.sprayed .tag-fleck { animation: spray-tag-fleck .32s ease-out var(--paint-delay,0ms) both; }
.hero-graffiti.sprayed .tag-fullstop { animation: spray-tag-bead .22s ease-out var(--paint-delay,0ms) both; }
@keyframes spray-tag-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 5% { opacity: var(--tag-opacity,1); } 100% { stroke-dashoffset: 0; opacity: var(--tag-opacity,1); } }
@keyframes spray-tag-drip { 0% { stroke-dashoffset: 1; opacity: 0; } 13% { opacity: .84; } 100% { stroke-dashoffset: 0; opacity: .84; } }
@keyframes spray-tag-bead { 0% { opacity: 0; transform: scale(.22); } 70% { opacity: .95; transform: scale(1.1); } 100% { opacity: .87; transform: scale(1); } }
@keyframes spray-tag-fleck { 0% { opacity: 0; transform: scale(.25); } 45% { opacity: .7; transform: scale(1.1); } 100% { opacity: .46; transform: scale(1); } }
.tag-paint-shadow,.tag-flourish-shadow { --tag-opacity: .18; }
.tag-paint-body,.tag-flourish-body { --tag-opacity: .91; }
.tag-paint-highlight,.tag-flourish-highlight { --tag-opacity: .48; }
.tag-fullstop { fill: #e9ebe8; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (max-width: 680px) {
  .hero h1 .hero-graffiti { width: min(8.7em,calc(100vw - 46px)); margin-top: .13em; vertical-align: -.14em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-graffiti .tag-paint,.hero-graffiti .tag-drip { stroke-dashoffset: 0; opacity: var(--tag-opacity,1); animation: none !important; }
  .hero-graffiti .tag-bead,.hero-graffiti .tag-fleck,.hero-graffiti .tag-fullstop { opacity: .82; animation: none !important; transform: none; }
}

/* Standalone winter field page, opened through a Jitter-inspired portrait discovery card. */
.snowboard-page { min-width: 320px; overflow-x: hidden; background: #090a0b; }
.snowboard-page .site-header { grid-template-columns: minmax(155px,1fr) auto minmax(112px,1fr); }
.snowboard-page .main-nav { gap: clamp(13px,1.85vw,27px); }
.snowboard-page .header-tools { justify-self: end; }
.snowboard-page .brand-logo { width: 74px; height: 29px; }
.winter-header-tools { display: flex; align-items: center; gap: 12px; }
.alpine-hero { position: relative; display: grid; min-height: min(930px,calc(100svh - 90px)); grid-template-columns: minmax(0,1.03fr) minmax(340px,.75fr); gap: clamp(36px,8vw,130px); align-items: center; overflow: hidden; padding: clamp(65px,8vw,110px) var(--gutter) 100px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 69% 44%,rgba(208,222,232,.13),transparent 38%),linear-gradient(118deg,#0b0c0d 0%,#131619 53%,#070809 100%); isolation: isolate; }
.alpine-hero::before { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg,rgba(5,6,7,.9) 0%,rgba(6,7,8,.68) 43%,rgba(6,7,8,.15) 78%,rgba(5,6,7,.48) 100%),linear-gradient(0deg,#08090a 0%,transparent 24% 76%,rgba(7,8,9,.35)); content: ""; pointer-events: none; }
.alpine-atmosphere { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.alpine-fog { position: absolute; right: -10%; bottom: 8%; left: -12%; height: 25%; background: linear-gradient(180deg,transparent,rgba(201,211,217,.09),transparent); filter: blur(21px); transform: translateX(-9%); }
.alpine-fog-two { bottom: 22%; opacity: .56; transform: translateX(14%); }
.alpine-rain,.alpine-snow { position: absolute; inset: 0; opacity: .54; mix-blend-mode: screen; }
.alpine-rain { background-image: linear-gradient(104deg,transparent 0 17%,rgba(227,239,244,.14) 17.15%,transparent 17.5% 45%,rgba(227,239,244,.09) 45.18%,transparent 45.5% 81%,rgba(227,239,244,.12) 81.18%,transparent 81.5%); opacity: .23; animation: alpine-rain-drift 9s ease-in-out infinite alternate; }
.alpine-snow { background-image: radial-gradient(1.2px 1.2px at 12% 20%,rgba(255,255,255,.86) 99%,transparent),radial-gradient(1.5px 1.5px at 73% 59%,rgba(255,255,255,.82) 99%,transparent),radial-gradient(1px 1px at 39% 82%,rgba(255,255,255,.72) 99%,transparent),radial-gradient(1.1px 1.1px at 91% 31%,rgba(255,255,255,.76) 99%,transparent); background-size: 173px 227px,263px 321px,317px 269px,221px 193px; animation: alpine-snow-drift 51s linear infinite; }
/* Each snow layer travels whole tiles per loop (1 across, 4/4/3/5 down), so the restart is invisible.
   Changing a background-size means changing its distance here too. The rain streaks cannot repeat, so they sway back instead of jumping. */
@keyframes alpine-snow-drift { to { background-position: -173px 908px,263px 1284px,-317px 807px,221px 965px; } }
@keyframes alpine-rain-drift { to { transform: translate3d(12px,24px,0); } }
/* Regen und Schnee halten an, solange der Winterblock nicht zu sehen ist (store.js startWeatherPause, Livegang 10.11.2026). Der Schnee
   schiebt background-position und malt damit jedes Bild den ganzen Block neu, auch außer Sicht. Im Bild ändert sich nichts. */
.alpine-atmosphere.is-paused :is(.alpine-rain,.alpine-snow) { animation-play-state: paused; }
.alpine-copy { position: relative; z-index: 2; align-self: center; max-width: 650px; padding: 8px 0 54px; opacity: 0; transform: translate3d(-22px,13px,0); transition: opacity .7s .18s ease,transform .9s .16s cubic-bezier(.16,.82,.24,1); }
.snowboard-page.is-open .alpine-copy { opacity: 1; transform: none; }
.alpine-copy .eyebrow { margin: 0 0 18px; color: rgba(235,238,238,.78); font-size: 8px; }
.alpine-index { margin: 0 0 27px; color: rgba(193,201,203,.51); font: 7px var(--mono); letter-spacing: .16em; }
.alpine-copy h1 { margin: 0; color: #efefeb; font: 900 clamp(57px,7.15vw,105px)/.79 var(--display); letter-spacing: -.085em; text-shadow: 0 3px 0 #0a0b0c,0 9px 28px rgba(0,0,0,.56); }
.alpine-copy h1 > span:not(.winter-tag) { display: inline-block; white-space: nowrap; }
/* PLAN B. (30.09.2026): every letter lands on its own, then its paint runs down, and an ice glint closes it.
   At rest nothing is left on the lettering but text-shadow: no filter, clip-path or animation, so it stays sharp.
   The extrusion is one solid step per hundredth of an em, so no drip shows a ghost copy beside it. */
.winter-tag { position: relative; isolation: isolate; display: inline-block; margin: .05em 0 .1em -.055em; color: #eef0ee; font-family: "Rubik Wet Paint",Impact,var(--display); font-size: .95em; font-weight: 400; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; -webkit-text-stroke: .014em #08090a; paint-order: stroke fill; text-rendering: geometricPrecision; text-shadow: .01em .012em 0 #08090a,.018em .024em 0 #6d7376,.026em .036em 0 #666c6f,.034em .048em 0 #5c6265,.042em .06em 0 #4f5457,.05em .072em 0 #3a3e41,.058em .084em 0 #08090a,.066em .094em 0 #08090a; transform: rotate(-2deg) skewX(-2deg); }
/* The soft shadow sits on its own copy behind the letters, so a neighbour's blur never greys a letter's edge. */
.winter-tag::before { position: absolute; z-index: -1; top: 0; left: 0; color: transparent; content: attr(data-plan); -webkit-text-stroke: 0; text-shadow: 0 .1em .16em rgba(0,0,0,.62),0 0 .18em rgba(235,241,244,.18); pointer-events: none; }
.winter-tag::after { position: absolute; z-index: 2; top: -.14em; right: .04em; width: .64em; height: .64em; background: radial-gradient(circle,#fff 0 5%,rgba(255,255,255,.6) 10%,transparent 28%),linear-gradient(#fff,#fff) center/100% .022em no-repeat,linear-gradient(#fff,#fff) center/.022em 100% no-repeat; -webkit-mask: radial-gradient(circle,#000 0 10%,transparent 66%); mask: radial-gradient(circle,#000 0 10%,transparent 66%); content: ""; opacity: 0; pointer-events: none; }
.plan-letter { position: relative; display: inline-block; transform-origin: 50% 82%; }
.plan-ink { display: inline-block; }
.winter-tag.is-waiting::before,.winter-tag.is-waiting .plan-letter { opacity: 0; }
.winter-tag.is-landing::before { animation: plan-shadow-in .8s calc(var(--plan-start,0ms) + 120ms) ease-out both; }
.winter-tag.is-landing::after { animation: plan-glint .82s cubic-bezier(.2,.7,.3,1) calc(var(--plan-start,0ms) + var(--plan-hit,760ms) + 700ms) both; }
.winter-tag.is-landing .plan-letter { animation: plan-slam .46s cubic-bezier(.2,.7,.2,1) calc(var(--plan-start,0ms) + var(--plan-delay,0ms)) both; }
.winter-tag.is-landing .plan-ink { animation: plan-run .9s cubic-bezier(.25,.6,.35,1) calc(var(--plan-start,0ms) + var(--plan-delay,0ms) + 240ms) both; }
.winter-tag.is-landing .plan-letter::before { position: absolute; left: -22%; right: -22%; bottom: 14%; height: .34em; background: radial-gradient(circle at 7% 64%,currentColor 0 .016em,transparent .027em),radial-gradient(circle at 21% 28%,currentColor 0 .012em,transparent .022em),radial-gradient(circle at 36% 82%,currentColor 0 .01em,transparent .019em),radial-gradient(circle at 64% 74%,currentColor 0 .013em,transparent .023em),radial-gradient(circle at 81% 24%,currentColor 0 .011em,transparent .02em),radial-gradient(circle at 94% 60%,currentColor 0 .015em,transparent .026em),radial-gradient(ellipse at 50% 92%,rgba(235,241,244,.34),transparent 62%); content: ""; opacity: 0; pointer-events: none; transform-origin: 50% 100%; animation: plan-dust .62s cubic-bezier(.2,.7,.3,1) calc(var(--plan-start,0ms) + var(--plan-delay,0ms) + 230ms) both; }
.alpine-copy h1.is-plan-landing > span:not(.winter-tag) { animation: plan-jolt .38s cubic-bezier(.3,.7,.3,1) calc(var(--plan-start,0ms) + var(--plan-hit,760ms)) both; }
.alpine-copy h1 > span:first-child { --plan-jolt: .022em; }
.alpine-copy h1 > span:nth-of-type(2) { --plan-jolt: .05em; }
@keyframes plan-slam { 0% { opacity: 0; filter: blur(.06em); transform: translateY(-.3em) rotate(var(--plan-tilt,0deg)) scale(1.7); } 38% { opacity: 1; filter: blur(0); } 56% { transform: translateY(.02em) rotate(0deg) scale(1.1,.87); } 76% { transform: translateY(-.012em) scale(.97,1.04); } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes plan-run { 0% { clip-path: inset(-40% -40% 20.5% -40%); } 100% { clip-path: inset(-40%); } }
@keyframes plan-dust { 0% { opacity: 0; transform: scale(.3,.2); } 22% { opacity: .9; } 100% { opacity: 0; transform: translateY(-.07em) scale(1.22,1.06); } }
@keyframes plan-jolt { 0% { translate: 0 0; } 28% { translate: 0 var(--plan-jolt,.03em); } 62% { translate: 0 calc(var(--plan-jolt,.03em) * -.25); } 100% { translate: 0 0; } }
@keyframes plan-shadow-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes plan-glint { 0% { opacity: 0; transform: scale(.1) rotate(-70deg); } 34% { opacity: 1; transform: scale(1) rotate(0deg); } 100% { opacity: 0; transform: scale(.15) rotate(55deg); } }
.alpine-deck { max-width: 420px; margin: 24px 0 26px; color: rgba(221,224,223,.76); font: 11px/1.85 var(--mono); }
.alpine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.replay-opening { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; border: 0; color: rgba(230,233,232,.66); background: transparent; font: 7px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.replay-opening > span:first-child { color: #dce4e8; font-size: 14px; }
.replay-opening:hover { color: #fff; }
.snowboard-page .mobile-nav a .nav-label { color: var(--paper); }
.alpine-specimen { display: flex; max-width: 390px; align-items: center; gap: 13px; margin-top: 37px; color: rgba(206,211,211,.5); font: 7px var(--mono); letter-spacing: .14em; }
.alpine-specimen i { width: 25px; height: 1px; background: rgba(229,233,232,.36); }
.alpine-photo-frame { position: relative; z-index: 1; width: min(100%,550px); height: min(76svh,760px); min-height: 590px; justify-self: end; overflow: hidden; margin: 0; border: 1px solid rgba(236,240,241,.24); background: rgba(28,31,33,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.17),0 28px 80px rgba(0,0,0,.43); isolation: isolate; opacity: 0; transform: translateY(20px) scale(.97); transition: opacity .8s .08s ease,transform 1.1s cubic-bezier(.16,.82,.24,1); }
.snowboard-page.is-open .alpine-photo-frame { opacity: 1; transform: none; }
.alpine-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; filter: grayscale(1) contrast(1.12) brightness(.79); }
.alpine-photo-frame::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg,rgba(5,6,7,.02) 47%,rgba(5,6,7,.54)),linear-gradient(90deg,rgba(4,5,6,.12),transparent 38% 72%,rgba(4,5,6,.19)); content: ""; pointer-events: none; }
.alpine-photo-sheen { position: absolute; z-index: 2; inset: 0; background: linear-gradient(118deg,transparent 0 26%,rgba(247,250,251,.12) 26.3%,transparent 27% 69%,rgba(241,246,248,.05) 69.3%,transparent 70%); opacity: .82; pointer-events: none; mix-blend-mode: screen; }
.alpine-photo-frame figcaption { position: absolute; z-index: 4; right: 15px; bottom: 13px; left: 15px; display: flex; justify-content: space-between; color: rgba(244,245,242,.74); font: 7px var(--mono); letter-spacing: .16em; text-shadow: 0 1px 5px #000; }
.rain-study { position: absolute; z-index: 4; right: calc(var(--gutter) + clamp(224px,25vw,355px)); bottom: 48px; width: clamp(130px,14vw,190px); padding: 7px; border: 1px solid rgba(240,244,245,.34); border-radius: 5px; background: linear-gradient(145deg,rgba(34,38,39,.62),rgba(10,12,13,.82)); box-shadow: inset 0 1px 0 rgba(248,250,250,.16),0 18px 44px rgba(0,0,0,.48); -webkit-backdrop-filter: blur(14px) saturate(118%); backdrop-filter: blur(14px) saturate(118%); opacity: 0; transform: translateY(24px) rotate(-2deg); transition: opacity .65s .45s ease,transform .85s .42s cubic-bezier(.16,.82,.24,1); }
.snowboard-page.is-open .rain-study { opacity: 1; transform: none; }
.rain-study-screen { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #101112; }
.rain-study-screen :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; filter: grayscale(.84) contrast(1.15) brightness(.75); }
.rain-study-glass { position: absolute; inset: 0; background: linear-gradient(115deg,rgba(245,249,250,.13),transparent 30% 72%,rgba(240,245,246,.055)),radial-gradient(ellipse at 42% 18%,transparent 20%,rgba(2,3,4,.17) 100%); pointer-events: none; }
.rain-study-rec { position: absolute; top: 9px; right: 8px; display: inline-flex; align-items: center; gap: 4px; color: rgba(249,249,246,.83); font: 6px var(--mono); letter-spacing: .14em; text-shadow: 0 1px 4px #000; }
.rain-study-rec i { width: 5px; height: 5px; border-radius: 50%; background: #d63b3b; box-shadow: 0 0 6px rgba(240,51,51,.65); animation: camera-rec-light 1.7s steps(2,end) infinite; }
.rain-study figcaption { display: flex; align-items: center; justify-content: space-between; padding: 9px 3px 4px; color: rgba(240,242,239,.78); font: 6px var(--mono); letter-spacing: .11em; }
.rain-study figcaption b,.rain-study figcaption small { display: block; }
.rain-study figcaption small { margin-top: 4px; color: rgba(198,204,204,.52); font-size: 5px; }
.rain-study-time { align-self: flex-start; color: rgba(235,238,237,.55); }
.alpine-bottomline { position: absolute; z-index: 3; right: var(--gutter); bottom: 18px; left: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 15px; color: rgba(209,214,215,.5); font: 7px var(--mono); letter-spacing: .14em; }
.alpine-bottomline a { display: inline-flex; align-items: center; gap: 10px; color: rgba(223,226,225,.74); }
.alpine-bottomline b { color: #f0f0eb; font-size: 12px; font-weight: 400; }
.winter-footer .footer-top { gap: 28px; }

/* Animated opening widget adapted to 27 ARCHIVE's graphite glass and alpine photography. */
.opening-overlay { position: fixed; z-index: 60; inset: 0; display: grid; overflow: hidden; place-items: center; padding: 24px; background: rgba(3,4,5,.5); opacity: 0; visibility: hidden; transition: opacity .5s ease,visibility 0s .52s; pointer-events: none; }
.opening-card { position: relative; width: clamp(265px,31vw,405px); height: min(72svh,625px); min-height: 490px; overflow: hidden; border: 1px solid rgba(241,245,246,.38); border-radius: 18px; background: linear-gradient(180deg,rgba(19,22,24,.25),rgba(8,10,11,.28)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 26px 80px rgba(0,0,0,.58); -webkit-backdrop-filter: blur(12px) saturate(110%); backdrop-filter: blur(12px) saturate(110%); opacity: 0; transform: translateY(21px) scale(.9); transition: opacity .55s .08s ease,transform .85s cubic-bezier(.16,.82,.24,1),border-radius .85s ease; isolation: isolate; }
.snowboard-page.is-ready:not(.is-open) .opening-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
.snowboard-page.is-ready:not(.is-open) .opening-card { opacity: 1; transform: translateY(0) scale(1); }
.snowboard-page.is-open .opening-overlay { opacity: 0; visibility: hidden; transition: opacity .58s .68s ease,visibility 0s 1.3s; }
.snowboard-page.is-open .opening-card { opacity: 0; transform: scale(4.8); border-radius: 0; transition: opacity .46s .53s ease,transform 1.08s cubic-bezier(.16,.82,.24,1),border-radius .9s ease; }
.opening-image,.opening-vignette { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.opening-image { object-fit: cover; object-position: 50% 43%; filter: grayscale(1) brightness(.5) contrast(1.12); }
.opening-vignette { z-index: -1; background: linear-gradient(180deg,rgba(4,5,6,.24),rgba(5,6,7,.36) 39%,rgba(5,6,7,.85)),linear-gradient(110deg,rgba(245,248,249,.08),transparent 30%); }
.opening-topline { position: absolute; top: 21px; right: 19px; left: 19px; display: flex; justify-content: space-between; color: rgba(241,243,241,.65); font: 6px var(--mono); letter-spacing: .16em; }
.opening-logo { position: absolute; top: 22%; left: 50%; width: 115px; height: 45px; object-fit: contain; opacity: .9; transform: translateX(-50%); filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.opening-label { position: absolute; top: 37%; right: 0; left: 0; margin: 0; color: rgba(239,242,240,.72); font: 7px var(--mono); letter-spacing: .22em; text-align: center; }
.opening-card h2 { position: absolute; z-index: 2; top: 40%; right: 0; left: 0; margin: 0; color: #f0f0eb; font: 800 clamp(32px,5vw,51px)/.95 var(--display); letter-spacing: -.075em; text-align: center; text-shadow: 0 2px 15px rgba(0,0,0,.6); }
.opening-description { position: absolute; z-index: 2; top: 51%; right: 22px; left: 22px; margin: 0; color: rgba(234,238,237,.72); font: 8px/1.6 var(--mono); text-align: center; }
.opening-mountains { position: absolute; right: 0; bottom: 13%; left: 0; width: 100%; height: 37%; fill: rgba(7,9,10,.72); filter: drop-shadow(0 -2px 12px rgba(225,235,239,.12)); transform: translateY(16px); transition: transform .9s .18s cubic-bezier(.16,.82,.24,1); }
.opening-mountains path + path { fill: rgba(236,239,238,.29); }
.snowboard-page.is-ready:not(.is-open) .opening-mountains { transform: translateY(0); }
.opening-start { position: absolute; z-index: 3; right: 24px; bottom: 25px; left: 24px; display: flex; min-height: 43px; align-items: center; justify-content: space-between; padding: 0 13px; border: 1px solid rgba(239,242,241,.43); color: #f1f2ef; background: linear-gradient(130deg,rgba(244,247,247,.12),rgba(12,14,15,.36)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 7px var(--mono); letter-spacing: .14em; cursor: pointer; transition: background .2s,border-color .2s; }
.opening-start:hover { border-color: rgba(255,255,255,.8); background: rgba(239,243,243,.2); }
.opening-start b { font-size: 14px; font-weight: 400; }
.opening-coordinate { position: absolute; right: 24px; bottom: 19px; color: rgba(232,235,235,.42); font: 6px var(--mono); letter-spacing: .15em; }

@media (max-width: 980px) {
  .snowboard-page .site-header { grid-template-columns: minmax(138px,1fr) auto minmax(91px,1fr); }
  .snowboard-page .main-nav { gap: 14px; }
  .snowboard-page .main-nav a { font-size: 7px; }
  .alpine-hero { min-height: min(850px,calc(100svh - 83px)); grid-template-columns: minmax(0,1fr) minmax(285px,.78fr); gap: 34px; }
  .alpine-photo-frame { min-height: 560px; }
  .rain-study { right: calc(var(--gutter) + 210px); bottom: 40px; width: 133px; }
}
@media (max-width: 680px) {
  .snowboard-page .site-header { min-height: 59px; grid-template-columns: 1fr auto; padding: 0 19px; }
  .snowboard-page .brand-logo { width: 64px; height: 26px; }
  .snowboard-page .main-nav { display: none; }
  .snowboard-page .header-tools { gap: 7px; }
  .snowboard-page .winter-header-tools .menu-toggle { display: grid; }
  .snowboard-page .alpine-hero { min-height: 0; grid-template-columns: minmax(0,1fr); gap: 0; padding: 69px 23px 74px; }
  .alpine-copy { z-index: 3; max-width: 500px; padding: 0 0 35px; }
  .alpine-copy .eyebrow { margin-bottom: 14px; font-size: 7px; }
  .alpine-index { margin-bottom: 22px; font-size: 6px; }
  .alpine-copy h1 { font-size: clamp(53px,14vw,91px); }
  .alpine-deck { max-width: 360px; margin: 20px 0 22px; font-size: 9px; }
  .alpine-actions { gap: 10px 17px; }
  .alpine-actions .button { min-height: 42px; gap: 14px; padding-inline: 12px; font-size: 8px; }
  .replay-opening { font-size: 6px; }
  .alpine-specimen { margin-top: 26px; font-size: 6px; }
  .alpine-photo-frame { width: 100%; height: min(126vw,690px); min-height: 0; justify-self: stretch; }
  .alpine-photo { object-position: center 43%; }
  .rain-study { right: 37px; bottom: 53px; width: 112px; padding: 5px; }
  .rain-study figcaption { padding: 7px 2px 3px; }
  .alpine-bottomline { right: 23px; bottom: 13px; left: 23px; font-size: 5px; }
  .alpine-bottomline span:nth-child(2) { display: none; }
  .opening-overlay { padding: 18px; }
  .opening-card { width: min(78vw,360px); height: min(70svh,580px); min-height: min(470px,64svh); border-radius: 15px; }
  .opening-logo { top: 19%; width: 102px; height: 42px; }
  .opening-label { top: 35%; }
  .opening-card h2 { top: 39%; font-size: clamp(33px,9vw,45px); }
  .opening-description { top: 50%; font-size: 7px; }
  .opening-coordinate { right: 12px; bottom: 11px; font-size: 5px; }
  .winter-footer .footer-top { grid-template-columns: 1fr 1fr; }
  .winter-footer .footer-top > p { justify-self: end; }
  .winter-footer .footer-top nav { grid-column: 1 / -1; }
  .winter-footer .back-top { justify-self: start; }
  .gallery-copy h2 { font-size: clamp(40px,10.2vw,55px); }
  .brand-gallery { top: 25.8%; left: 24.45%; width: 54.25%; height: 47%; }
}
@media (max-width: 370px) {
  .snowboard-page .header-tools { gap: 3px; }
  .snowboard-page .language-choice { min-width: 28px; }
  .alpine-copy h1 { font-size: 53px; }
  .alpine-actions .button { font-size: 7px; }
  .replay-opening { font-size: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-overlay { transition: none !important; }
  .alpine-rain,.alpine-snow,.rain-study-rec i { animation: none !important; }
  .alpine-copy,.alpine-photo-frame,.rain-study,.opening-card,.opening-mountains { transition: none !important; }
  .winter-tag,.winter-tag *,.winter-tag::before,.winter-tag::after,.plan-letter::before,.alpine-copy h1 > span { animation: none !important; clip-path: none !important; }
}

/* Photographic alpine depth replaces the flat ridge illustration; the copy stays clear over a dark falloff. */
.alpine-landscape { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% center; opacity: .91; filter: grayscale(.38) saturate(.66) brightness(.68) contrast(1.08); transform: scale(1.025); }
.alpine-atmosphere::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(5,6,7,.6),rgba(6,7,8,.34) 42%,rgba(6,7,8,.16) 70%,rgba(5,6,7,.42)),linear-gradient(0deg,rgba(5,6,7,.48),transparent 25% 74%,rgba(5,6,7,.18)); content: ""; pointer-events: none; }
.alpine-fog { z-index: 2; }
.alpine-rain,.alpine-snow { z-index: 3; }
@media (max-width: 680px) {
  .alpine-landscape { object-position: 57% center; filter: grayscale(.45) saturate(.62) brightness(.58) contrast(1.08); }
  .alpine-atmosphere::after { background: linear-gradient(180deg,rgba(5,6,7,.44),rgba(6,7,8,.15) 42%,rgba(5,6,7,.43) 100%),linear-gradient(90deg,rgba(5,6,7,.35),transparent 78%); }
}

/* Alpine arrival: landscape, archive frame and field typography assemble from the foot of the screen. */
.opening-overlay { z-index: 100; display: block; padding: 0; overflow: hidden; background: #07090a; opacity: 1; transform: translate3d(0,0,0); transition: transform 1.08s cubic-bezier(.76,0,.24,1),visibility 0s linear 0s; }
.snowboard-page.is-ready:not(.is-open) .opening-overlay { opacity: 1; visibility: visible; transform: translate3d(0,0,0); pointer-events: auto; }
.snowboard-page.is-open .opening-overlay { opacity: 1; visibility: hidden; transform: translate3d(0,-101%,0); pointer-events: none; transition: transform 1.08s cubic-bezier(.76,0,.24,1),visibility 0s linear 1.12s; }
.opening-card { position: absolute; inset: 0; display: block; width: auto; height: auto; min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: #080a0b; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; transform: none; transition: none; isolation: isolate; }
.snowboard-page.is-ready:not(.is-open) .opening-card,.snowboard-page.is-open .opening-card { opacity: 1; transform: none; }
.opening-image { z-index: -2; object-position: center 57%; filter: grayscale(.56) saturate(.62) brightness(.55) contrast(1.17); transform: translateY(8%) scale(1.07); clip-path: inset(100% 0 0); }
.snowboard-page.is-ready:not(.is-open) .opening-image { animation: opening-mountain-rise 1.5s .04s cubic-bezier(.16,1,.3,1) both; }
@keyframes opening-mountain-rise { to { clip-path: inset(0); transform: translateY(0) scale(1.015); } }
.opening-vignette { z-index: -1; background: linear-gradient(90deg,rgba(3,4,5,.9) 0%,rgba(4,5,6,.76) 35%,rgba(4,5,6,.25) 70%,rgba(4,5,6,.45) 100%),linear-gradient(0deg,#07090a 0%,rgba(5,6,7,.56) 9%,transparent 43% 75%,rgba(5,6,7,.36) 100%); }
.opening-topline { top: clamp(22px,4.3vh,43px); right: var(--gutter); left: var(--gutter); align-items: center; }
.opening-brand { display: inline-flex; align-items: center; gap: 17px; opacity: 0; transform: translateY(18px); }
.opening-logo { position: static; display: block; width: 94px; height: 38px; object-fit: contain; opacity: .96; transform: none; }
.opening-brand small { padding-left: 16px; border-left: 1px solid rgba(242,244,241,.33); color: rgba(238,240,237,.63); font: 7px var(--mono); letter-spacing: .2em; white-space: nowrap; }
.opening-edition { display: inline-flex; align-items: center; gap: 11px; color: rgba(238,241,239,.68); font: 7px var(--mono); letter-spacing: .17em; opacity: 0; transform: translateY(18px); }
.opening-edition i { width: 28px; height: 1px; background: rgba(238,241,239,.45); }
.snowboard-page.is-ready:not(.is-open) .opening-brand { animation: opening-rise .72s .2s cubic-bezier(.16,1,.3,1) both; }
.snowboard-page.is-ready:not(.is-open) .opening-edition { animation: opening-rise .72s .34s cubic-bezier(.16,1,.3,1) both; }
.opening-copy { position: absolute; z-index: 2; top: 50%; left: var(--gutter); width: min(57vw,790px); transform: translateY(-50%); }
.opening-label { position: static; margin: 0 0 clamp(15px,2.2vh,24px); color: rgba(236,240,239,.73); font: 8px var(--mono); letter-spacing: .2em; opacity: 0; transform: translateY(26px); }
.opening-copy .opening-title { position: static; inset: auto; z-index: auto; display: flex; flex-direction: column; align-items: flex-start; width: auto; margin: 0; color: #f0f0eb; font: 900 clamp(55px,7.25vw,106px)/.84 var(--display); letter-spacing: -.09em; text-shadow: 0 4px 28px rgba(0,0,0,.43); }
.opening-copy .opening-title > span { display: block; overflow: visible; white-space: nowrap; opacity: 0; transform: translateY(70px); }
.opening-copy .opening-title > span:nth-child(1) { animation-delay: .65s; }
.opening-copy .opening-title > span:nth-child(2) { animation-delay: .82s; }
.opening-copy .opening-title > span:nth-child(3) { animation-delay: 1s; }
.snowboard-page.is-ready:not(.is-open) .opening-copy .opening-title > span { animation-name: opening-rise; animation-duration: .82s; animation-timing-function: cubic-bezier(.16,1,.3,1); animation-fill-mode: both; }
.opening-copy .opening-title > .opening-plan { color: #ebedeb; font: 400 .82em/1.08 "Rubik Wet Paint",Impact,var(--display); letter-spacing: -.035em; -webkit-text-stroke: .5px #111314; paint-order: stroke fill; text-shadow: 2px 3px 0 rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.52); transform: translateY(70px) rotate(-2deg); }
.opening-description { position: static; margin: clamp(17px,2.8vh,30px) 0 0; color: rgba(231,235,234,.78); font: 9px/1.8 var(--mono); text-align: left; opacity: 0; transform: translateY(24px); }
.snowboard-page.is-ready:not(.is-open) .opening-label { animation: opening-rise .7s .48s cubic-bezier(.16,1,.3,1) both; }
.snowboard-page.is-ready:not(.is-open) .opening-description { animation: opening-rise .7s 1.2s cubic-bezier(.16,1,.3,1) both; }
@keyframes opening-rise { to { opacity: 1; transform: translateY(0); } }
.opening-print { position: absolute; z-index: 1; top: 10.5%; right: max(var(--gutter),7vw); width: clamp(300px,34vw,510px); height: min(78svh,760px); min-height: 420px; overflow: hidden; margin: 0; border: 1px solid rgba(240,243,241,.42); background: #111416; box-shadow: 0 35px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2); opacity: 0; transform: translate3d(0,112%,0) rotate(1.4deg); }
.snowboard-page.is-ready:not(.is-open) .opening-print { animation: opening-print-rise 1.25s .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes opening-print-rise { 72% { opacity: 1; transform: translate3d(0,-2.5%,0) rotate(-.35deg); } to { opacity: 1; transform: translate3d(0,0,0) rotate(0); } }
.opening-print::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(3,4,5,.03) 60%,rgba(3,4,5,.59)),linear-gradient(90deg,rgba(3,4,5,.1),transparent 40% 78%,rgba(3,4,5,.2)); content: ""; pointer-events: none; }
.opening-print img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; filter: grayscale(1) brightness(.76) contrast(1.13); transform: scale(1.045); }
.opening-print figcaption { position: absolute; z-index: 2; right: 15px; bottom: 13px; left: 15px; display: flex; justify-content: space-between; gap: 10px; color: rgba(244,245,242,.78); font: 6px var(--mono); letter-spacing: .15em; text-shadow: 0 1px 5px #000; }
.opening-foot { position: absolute; right: var(--gutter); bottom: clamp(24px,5vh,50px); left: var(--gutter); display: flex; justify-content: space-between; color: rgba(226,230,229,.59); font: 7px var(--mono); letter-spacing: .16em; opacity: 0; transform: translateY(20px); }
.snowboard-page.is-ready:not(.is-open) .opening-foot { animation: opening-rise .72s 1.45s cubic-bezier(.16,1,.3,1) both; }
.opening-start { position: absolute; z-index: 3; right: auto; bottom: clamp(62px,12vh,116px); left: var(--gutter); width: clamp(210px,21vw,292px); min-height: 48px; padding: 0 15px; border-color: rgba(239,242,241,.55); background: linear-gradient(115deg,rgba(230,236,237,.15),rgba(10,12,13,.56)); font-size: 7px; opacity: 0; transform: translateY(24px); }
.snowboard-page.is-ready:not(.is-open) .opening-start { animation: opening-rise .76s 1.62s cubic-bezier(.16,1,.3,1) both; }
.opening-start:hover { border-color: #f0f2ef; background: rgba(226,233,235,.24); box-shadow: 0 0 22px rgba(224,233,237,.14),inset 0 1px 0 rgba(255,255,255,.2); }
.opening-start:focus-visible { outline: 2px solid #f2f3f0; outline-offset: 5px; }
.snowboard-page .alpine-copy { opacity: 1; transform: none; transition: none; }
.snowboard-page .alpine-copy > * { opacity: 0; transform: translateY(28px); }
.snowboard-page.is-open .alpine-copy > .eyebrow { animation: alpine-content-rise .68s .12s cubic-bezier(.16,1,.3,1) both; }
.snowboard-page.is-open .alpine-copy > .alpine-index { animation: alpine-content-rise .68s .22s cubic-bezier(.16,1,.3,1) both; }
.snowboard-page.is-open .alpine-copy > h1 { animation: alpine-content-rise .8s .32s cubic-bezier(.16,1,.3,1) both; }
.snowboard-page.is-open .alpine-copy > .alpine-deck { animation: alpine-content-rise .68s .54s cubic-bezier(.16,1,.3,1) both; }
.snowboard-page.is-open .alpine-copy > .alpine-actions { animation: alpine-content-rise .68s .7s cubic-bezier(.16,1,.3,1) both; }
.snowboard-page.is-open .alpine-copy > .alpine-specimen { animation: alpine-content-rise .68s .82s cubic-bezier(.16,1,.3,1) both; }
@keyframes alpine-content-rise { to { opacity: 1; transform: translateY(0); } }
.alpine-photo-frame { transform: translateY(90px) scale(.985); transition: opacity .7s .12s ease,transform 1.08s .12s cubic-bezier(.16,1,.3,1); }
.rain-study { transform: translateY(55px) rotate(-2deg); transition: opacity .55s .62s ease,transform .9s .62s cubic-bezier(.16,1,.3,1); }
.alpine-bottomline { opacity: 0; transform: translateY(15px); transition: opacity .6s .83s ease,transform .8s .83s cubic-bezier(.16,1,.3,1); }
.snowboard-page.is-open .alpine-bottomline { opacity: 1; transform: none; }
@media (max-width: 680px) {
  .opening-vignette { background: linear-gradient(90deg,rgba(3,4,5,.72),rgba(4,5,6,.23)),linear-gradient(0deg,#07090a 0%,rgba(5,6,7,.62) 15%,rgba(5,6,7,.1) 59%,rgba(5,6,7,.4)); }
  .opening-topline { top: 22px; right: 22px; left: 22px; }
  .opening-brand { gap: 9px; }
  .opening-logo { width: 70px; height: 30px; }
  .opening-brand small { max-width: 112px; padding-left: 9px; font-size: 5px; line-height: 1.5; letter-spacing: .11em; white-space: normal; }
  .opening-edition { gap: 6px; font-size: 5px; letter-spacing: .08em; }
  .opening-edition i { width: 12px; }
  .opening-copy { top: 31%; left: 23px; width: 52vw; transform: none; }
  .opening-label { margin-bottom: 15px; font-size: 6px; letter-spacing: .13em; }
  .opening-copy .opening-title { font-size: clamp(32px,7vw,52px); line-height: .84; }
  .opening-description { max-width: 250px; margin-top: 15px; font-size: 7px; }
  .opening-print { top: auto; right: 23px; bottom: 8%; width: min(39vw,230px); height: 37svh; min-height: 250px; }
  .opening-print figcaption { right: 8px; bottom: 9px; left: 8px; flex-direction: column; gap: 4px; font-size: 5px; }
  .opening-start { bottom: 8.5%; left: 23px; width: min(43vw,220px); min-height: 43px; padding-inline: 10px; font-size: 6px; }
  .opening-foot { right: 23px; bottom: 23px; left: 23px; font-size: 5px; letter-spacing: .1em; }
  .opening-foot span:nth-child(2) { display: none; }
  .snowboard-page.is-open .alpine-copy > .alpine-specimen { animation-delay: .76s; }
}
@media (max-width: 390px) {
  .opening-edition { max-width: 86px; font-size: 4px; }
  .opening-copy { top: 30%; width: calc(100% - 46px); }
  .opening-copy .opening-title { font-size: 52px; }
  .opening-print { width: 42vw; height: 34svh; min-height: 220px; bottom: 9%; }
  .opening-start { width: 44vw; }
}
@media (max-width: 370px) {
  .opening-topline { right: 18px; left: 18px; }
  .opening-brand { gap: 6px; }
  .opening-logo { width: 58px; }
  .opening-brand small { max-width: 84px; padding-left: 7px; font-size: 4.5px; }
  .opening-edition { max-width: 92px; font-size: 4.2px; }
  .opening-copy { top: 25%; }
  .opening-copy .opening-title { font-size: clamp(44px,14vw,50px); }
  .opening-start { width: 43vw; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-overlay { transition: none !important; transform: none !important; }
  .opening-image,.opening-brand,.opening-edition,.opening-label,.opening-copy .opening-title > span,.opening-description,.opening-print,.opening-foot,.opening-start,.alpine-copy > *, .alpine-photo-frame,.rain-study,.alpine-bottomline { animation: none !important; transition: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }
}

/* Drop 01 opens on its analog signal; the test card leads into the archive ident. */
.signal-room { min-height: clamp(620px,calc(100svh - 93px),760px); grid-template-columns: minmax(230px,.72fr) minmax(0,1.28fr); gap: clamp(34px,6vw,92px); padding: 42px var(--gutter); }
.main-nav { gap: clamp(13px,1.9vw,28px); }
.site-header .main-nav { gap: 12px; }
.site-header .main-nav a { font-size: 8px; letter-spacing: .08em; }
.room-copy { max-width: 440px; }
.room-copy h2 { font-size: clamp(43px,4.55vw,66px); }
.crt-room { min-height: clamp(430px,55svh,520px); background: radial-gradient(ellipse at 54% 63%,rgba(232,214,184,.11),transparent 40%),linear-gradient(180deg,#211a14 0%,#18120e 67%,#0c0a08 67%,#090807 100%); }
.crt-room::before { background: linear-gradient(90deg,transparent 0 13%,rgba(255,241,218,.05) 13.1%,transparent 13.4% 86%,rgba(255,241,218,.035) 86.2%,transparent 86.5%),linear-gradient(180deg,transparent 0 67%,rgba(255,241,218,.075) 67.2%,transparent 67.5%),radial-gradient(ellipse at 50% 70%,rgba(0,0,0,0),rgba(0,0,0,.58) 72%); }
.tv-table { width: min(84%,540px); background: linear-gradient(180deg,#49301f 0%,#25190f 39%,#100b07 100%); border-color: rgba(195,154,104,.3); }
.tv-table::before { background: linear-gradient(90deg,#17100b,#382516 22%,#20150d 50%,#382516 78%,#120c08); }
.crt-tv { width: min(84%,520px); transform: translateX(-50%) perspective(1000px) rotateY(-2deg) rotateX(.4deg); }
.crt-body { position: relative; height: 246px; grid-template-columns: minmax(0,1fr) 72px; gap: 11px; padding: 15px 14px 13px; border: 1px solid #261a11; border-radius: 13px 13px 8px 8px; background: linear-gradient(105deg,rgba(246,216,171,.1),transparent 15% 82%,rgba(13,7,4,.2)),repeating-linear-gradient(90deg,rgba(14,8,4,.12) 0 2px,rgba(232,193,137,.035) 3px 4px,transparent 5px 9px),linear-gradient(138deg,#765337 0%,#50351f 24%,#302014 54%,#634329 81%,#382417 100%); box-shadow: inset 0 2px 0 rgba(255,232,195,.22),inset 0 -7px 10px rgba(0,0,0,.53),0 2px 2px #030201,0 0 0 2px #21160f; }
.crt-body::before { position: absolute; inset: 5px; border: 1px solid rgba(228,193,148,.14); border-radius: 9px 9px 5px 5px; content: ""; pointer-events: none; }
.crt-bezel { padding: 11px; border: 1px solid #070706; border-radius: 17px 17px 27px 27px; background: linear-gradient(145deg,#11100f,#030303 55%,#141310); box-shadow: inset 0 0 0 2px rgba(255,255,255,.035),inset 0 0 10px rgba(0,0,0,.94),0 1px 0 rgba(255,240,218,.11); }
.crt-screen { border-color: rgba(209,206,191,.27); border-radius: 23px 23px 30px 30px / 15px 15px 22px 22px; box-shadow: inset 0 0 30px rgba(0,0,0,.91),inset 0 0 5px rgba(237,236,222,.22),0 0 1px 1px rgba(0,0,0,.8),0 0 10px rgba(255,255,255,.04); }
.crt-screen::before { background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(240,240,232,.075) 4px,transparent 5px),radial-gradient(ellipse at 50% 51%,transparent 0 49%,rgba(0,0,0,.16) 89%,rgba(0,0,0,.49) 100%),linear-gradient(112deg,rgba(255,255,255,.15),transparent 22% 70%,rgba(255,255,255,.04)); }
.crt-screen.is-static { animation-duration: 1.35s; }
.crt-controls { position: relative; gap: 9px; border-left-color: rgba(255,232,200,.27); background: linear-gradient(90deg,rgba(16,9,5,.52),rgba(238,200,151,.08) 23%,rgba(17,10,6,.24)); }
.crt-controls::before { position: absolute; top: 8px; right: 3px; left: 3px; height: 1px; background: rgba(255,227,194,.13); content: ""; }
.crt-speaker { width: 31px; height: 55px; border-color: rgba(24,14,8,.85); border-radius: 1px; background: repeating-linear-gradient(0deg,#100b07 0 1px,#2c1b10 2px,#100b07 3px); box-shadow: inset 0 0 0 2px rgba(170,121,75,.18),0 1px 0 rgba(255,230,193,.12); }
.crt-controls i,.crt-controls i + i { width: 22px; height: 22px; border: 3px solid #21170f; background: radial-gradient(circle at 34% 28%,#e1d1b6 0 7%,#80715e 16%,#302b24 37%,#c1b193 40%,#584b38 57%,#14110e 74%); box-shadow: 0 0 0 1px rgba(215,183,140,.56),0 1px 3px #080604; }
.crt-controls i + i { width: 19px; height: 19px; }
.crt-controls b { color: #c2a77f; text-shadow: 0 0 4px rgba(225,187,134,.36); }
.crt-foot { background: linear-gradient(90deg,#17100a,#60442a,#120c07); }
.room-coord { color: #a39582; }

.waitlist-section { position: relative; display: grid; min-height: 570px; grid-template-columns: minmax(0,1fr) minmax(370px,.84fr); gap: clamp(44px,10vw,145px); align-items: center; overflow: hidden; padding: 89px var(--gutter) 95px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 78% 50%,rgba(233,233,227,.07),transparent 41%),linear-gradient(130deg,#111 0%,#090909 59%,#101010 100%); isolation: isolate; }
.waitlist-section::before { position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(115deg,transparent 0 51px,rgba(255,255,255,.018) 52px,transparent 53px 104px); content: ""; pointer-events: none; }
.waitlist-copy { max-width: 590px; }
.waitlist-copy .eyebrow { margin-bottom: 27px; }
.waitlist-copy h2 { margin: 0; font: 900 clamp(60px,5.7vw,82px)/.8 var(--display); letter-spacing: -.075em; }
.waitlist-copy > p:not(.eyebrow) { max-width: 385px; margin: 32px 0 25px; color: #aaa9a5; font: 11px/1.9 var(--mono); }
.waitlist-edition { display: flex; align-items: center; gap: 13px; color: #777671; font: 7px var(--mono); letter-spacing: .15em; }
.waitlist-edition i { width: 31px; height: 1px; background: rgba(239,239,233,.45); }
.waitlist-card { position: relative; min-height: 430px; padding: 25px 27px 36px; border: 1px solid rgba(235,235,228,.27); background: linear-gradient(145deg,rgba(240,240,235,.09),rgba(26,27,26,.32) 45%,rgba(12,13,13,.78)),rgba(18,19,19,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.17),0 24px 65px rgba(0,0,0,.44); -webkit-backdrop-filter: blur(18px) saturate(110%); backdrop-filter: blur(18px) saturate(110%); isolation: isolate; transition: border-color .5s ease,box-shadow .5s ease,transform .6s var(--ease); }
.waitlist-card::before { position: absolute; z-index: -1; inset: 7px; border: 1px solid rgba(232,232,228,.07); content: ""; pointer-events: none; }
.waitlist-card::after { position: absolute; z-index: -1; top: -30%; left: -25%; width: 150%; height: 55%; background: linear-gradient(180deg,transparent,rgba(244,246,245,.09),transparent); content: ""; opacity: 0; transform: rotate(-8deg) translateY(-140%); pointer-events: none; }
.waitlist-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.waitlist-card-top img { width: 88px; height: 35px; object-fit: contain; }
.waitlist-card-top > span { color: #babbb7; font: 7px/1.7 var(--mono); letter-spacing: .12em; text-align: right; }
.waitlist-rule { position: relative; display: flex; justify-content: space-between; margin: 19px -27px 25px; border-top: 1px dashed rgba(225,226,222,.24); }
.waitlist-rule i { position: absolute; top: -5px; width: 9px; height: 9px; border: 1px solid rgba(232,232,228,.38); border-radius: 50%; background: #101111; }
.waitlist-rule i:first-child { left: -5px; }
.waitlist-rule i:last-child { right: -5px; }
.waitlist-card-index,.waitlist-success-index { margin: 0 0 14px; color: #999995; font: 7px var(--mono); letter-spacing: .16em; }
.waitlist-form-view { transition: opacity .34s ease,transform .42s var(--ease); }
.waitlist-form-view h3,.waitlist-success h3 { margin: 0; font: 700 clamp(25px,2.4vw,32px)/1.1 var(--display); letter-spacing: -.035em; }
.waitlist-card-copy { margin: 12px 0 23px; color: #a8a8a4; font: 9px/1.7 var(--mono); }
.waitlist-form { display: grid; gap: 10px; }
.waitlist-email-label { color: #aaa9a4; font: 7px var(--mono); letter-spacing: .12em; }
.waitlist-input-row { display: flex; min-height: 47px; border: 1px solid rgba(237,238,232,.36); background: rgba(0,0,0,.34); transition: border-color .25s ease,box-shadow .25s ease,background-color .25s ease; }
.waitlist-input-row:focus-within { border-color: rgba(245,246,241,.8); background: rgba(0,0,0,.55); box-shadow: 0 0 0 3px rgba(230,232,230,.07),0 0 25px rgba(222,226,227,.09); }
.waitlist-input-row input { width: 100%; min-width: 0; padding: 0 12px; border: 0; outline: 0; color: #f2f2ed; background: transparent; font: 9px var(--mono); }
.waitlist-input-row input::placeholder { color: #777874; }
.waitlist-submit { display: inline-flex; min-width: 122px; align-items: center; justify-content: space-between; gap: 13px; margin: 4px; padding: 0 13px; border: 1px solid rgba(238,239,234,.42); color: #111; background: #e6e6e1; font: 8px var(--mono); letter-spacing: .04em; transition: color .25s ease,background-color .25s ease,transform .25s var(--ease),box-shadow .25s ease; }
.waitlist-submit:hover { color: #fff; background: #555753; box-shadow: 0 0 19px rgba(230,233,231,.19); transform: translateY(-1px); }
.waitlist-submit:active { transform: scale(.97); }
.waitlist-submit:disabled { cursor: progress; opacity: .75; }
.waitlist-submit span { font-size: 14px; transition: transform .25s var(--ease); }
.waitlist-submit:hover span { transform: translate(3px,-2px); }
.waitlist-consent { display: flex; align-items: flex-start; gap: 9px; color: #969792; font: 7px/1.55 var(--mono); cursor: pointer; }
.waitlist-consent input { width: 12px; height: 12px; flex: 0 0 12px; margin: 0; accent-color: #e7e8e3; }
.waitlist-preview-note { max-width: 295px; margin: 15px 0 0; color: #777873; font: 6px/1.7 var(--mono); letter-spacing: .025em; }
.waitlist-card-serial { position: absolute; right: 27px; bottom: 13px; left: 27px; color: #676864; font: 6px var(--mono); letter-spacing: .11em; }
.waitlist-card.is-confirming { border-color: rgba(244,246,243,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(241,242,239,.12),0 0 45px rgba(220,227,226,.13),0 24px 65px rgba(0,0,0,.44); transform: translateY(-3px); }
.waitlist-card.is-confirming::after { opacity: 1; animation: waitlist-scan .72s ease-in-out both; }
.waitlist-card.is-confirming .waitlist-form-view { opacity: .12; transform: translateY(-12px) scale(.98); }
.waitlist-card.is-complete { border-color: rgba(219,231,225,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 0 50px rgba(200,222,208,.1),0 24px 65px rgba(0,0,0,.44); }
.waitlist-success { padding: 1px 0 6px; animation: waitlist-arrive .65s cubic-bezier(.16,.82,.24,1) both; }
.waitlist-success h3 { font-size: clamp(29px,3.3vw,39px); }
.waitlist-success-copy { max-width: 285px; margin: 12px 0 26px; color: #aaaba6; font: 9px/1.7 var(--mono); }
.waitlist-success-note { margin: 15px 0 0; color: #777873; font: 6px/1.7 var(--mono); letter-spacing: .04em; }
.waitlist-success h3:focus { outline: none; }
.waitlist-checkmark { display: grid; width: 67px; height: 67px; place-items: center; margin: 0 0 19px; border: 1px solid rgba(223,236,228,.43); border-radius: 50%; box-shadow: 0 0 0 7px rgba(219,233,226,.04),0 0 30px rgba(217,235,225,.12); animation: waitlist-ring .75s .04s cubic-bezier(.16,.82,.24,1) both; }
.waitlist-checkmark svg { width: 51px; height: 51px; overflow: visible; fill: none; stroke: #e6eee9; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.waitlist-checkmark circle { stroke-dasharray: 170; stroke-dashoffset: 170; animation: waitlist-draw .8s .1s ease forwards; }
.waitlist-checkmark path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: waitlist-draw .4s .56s ease forwards; }
.waitlist-success-ticket { display: flex; align-items: center; gap: 12px; width: max-content; padding: 9px 11px; border: 1px solid rgba(231,234,228,.23); color: #c1c2bc; font: 6px var(--mono); letter-spacing: .13em; }
.waitlist-success-ticket i { color: #eceee9; font-size: 12px; font-style: normal; }
@keyframes waitlist-scan { 0% { transform: rotate(-8deg) translateY(-140%); } 100% { transform: rotate(-8deg) translateY(275%); } }
@keyframes waitlist-arrive { 0% { opacity: 0; filter: blur(9px); transform: translateY(12px) scale(.97); } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes waitlist-ring { 0% { opacity: 0; transform: scale(.48) rotate(-65deg); } 75% { opacity: 1; transform: scale(1.1) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes waitlist-draw { to { stroke-dashoffset: 0; } }

/* Every control receives a clear, quick tactile response. */
button:not(.product-image):not(.product-title):not([disabled]) { transition-property: color,background-color,border-color,box-shadow,transform,filter; transition-duration: .22s; transition-timing-function: var(--ease); }
button:not(.product-image):not(.product-title):not([disabled]):hover { filter: brightness(1.12); }
button:not(.product-image):not(.product-title):not([disabled]):active { transform: scale(.97); }
.product-image { transition: transform .24s var(--ease),filter .24s ease,box-shadow .24s ease; }
.product-image:hover { filter: brightness(1.07); box-shadow: inset 0 0 0 1px rgba(245,246,242,.38),inset 0 -44px 85px rgba(0,0,0,.16); }
.product-image:active { transform: scale(.99); }
.product-title { transition: color .2s var(--ease),transform .2s var(--ease); }
.product-title:hover { color: #fff; transform: translateX(2px); }

@media (max-width: 980px) {
  .signal-room { min-height: clamp(590px,calc(100svh - 93px),740px); grid-template-columns: minmax(200px,.62fr) minmax(0,1.38fr); gap: 30px; }
  .crt-room { min-height: clamp(400px,51svh,490px); }
  .crt-tv { width: min(91%,520px); }
  .crt-body { height: 225px; grid-template-columns: minmax(0,1fr) 62px; }
  .waitlist-section { min-height: 530px; grid-template-columns: minmax(0,1fr) minmax(340px,.9fr); gap: 48px; padding-block: 75px; }
  .waitlist-card { padding-inline: 23px; }
  .waitlist-rule { margin-inline: -23px; }
  .waitlist-card-serial { right: 23px; left: 23px; }
}
@media (max-width: 680px) {
  .signal-room { min-height: auto; grid-template-columns: 1fr; gap: 0; padding: 23px 16px 43px; }
  .crt-room { grid-row: 1; min-height: max(350px,57svh); }
  .room-copy { grid-row: 2; max-width: 430px; padding: 35px 7px 0; }
  .room-copy .eyebrow { margin-bottom: 15px; font-size: 7px; }
  .room-copy h2 { font-size: clamp(44px,11.6vw,62px); }
  .room-copy > p:not(.eyebrow) { max-width: 350px; margin: 13px 0; font-size: 8px; }
  .room-index { font-size: 6px; }
  .tv-table { bottom: 21%; width: 87%; }
  .crt-tv { bottom: calc(21% + 12px); width: 85%; }
  .crt-body { height: 176px; grid-template-columns: minmax(0,1fr) 49px; gap: 6px; padding: 10px 9px 9px; }
  .crt-bezel { padding: 7px; }
  .crt-controls { gap: 6px; }
  .crt-speaker { width: 21px; height: 42px; }
  .crt-controls i,.crt-controls i + i { width: 15px; height: 15px; border-width: 2px; }
  .crt-controls i + i { width: 13px; height: 13px; }
  .crt-controls b { font-size: 4px; }
  .crt-logo { font-size: 20px; }
  .room-coord { right: 9px; bottom: 8px; font-size: 5px; }
  .waitlist-section { min-height: 0; grid-template-columns: 1fr; gap: 37px; padding: 69px 22px 73px; }
  .waitlist-copy .eyebrow { margin-bottom: 23px; font-size: 7px; }
  .waitlist-copy h2 { font-size: clamp(52px,12.8vw,70px); }
  .waitlist-copy > p:not(.eyebrow) { max-width: 330px; margin: 23px 0 19px; font-size: 9px; }
  .waitlist-card { min-height: 420px; padding: 21px 21px 35px; }
  .waitlist-rule { margin: 17px -21px 24px; }
  .waitlist-card-copy { max-width: 290px; font-size: 8px; }
  .waitlist-card-serial { right: 21px; left: 21px; font-size: 5px; }
  .waitlist-success h3 { font-size: 34px; }
  .waitlist-success-note { font-size: 5px; }
}
@media (max-width: 370px) {
  .waitlist-input-row { min-height: 44px; }
  .waitlist-input-row input { padding-inline: 8px; font-size: 8px; }
  .waitlist-submit { min-width: 105px; gap: 6px; padding-inline: 8px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .waitlist-card,.waitlist-form-view,.waitlist-submit,.waitlist-submit span { transition: none !important; }
  .waitlist-card.is-confirming::after,.waitlist-success,.waitlist-checkmark,.waitlist-checkmark svg circle,.waitlist-checkmark svg path { animation: none !important; }
  .waitlist-checkmark svg circle,.waitlist-checkmark svg path { stroke-dashoffset: 0; }
  button:not(.product-image):not(.product-title),.product-image,.product-title { transition: none !important; transform: none !important; }
}

/* The camera LCD is a perspective quadrilateral; the JavaScript projector maps every slide to its four glass edges. */
.brand-gallery { top: 26.37%; left: 24.22%; width: 54.30%; height: 57.42%; transform: none; transform-origin: 0 0; overflow: hidden; border: 0; border-radius: 1.6%; clip-path: polygon(0 0,100% 12.45%,94.24% 100%,0 73.81%); background: #08090a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 1px rgba(0,0,0,.92); }
.brand-gallery::before,.brand-gallery::after { content: none; }
.gallery-projector { position: absolute; top: 0; left: 0; width: 100%; height: 86.2%; overflow: hidden; isolation: isolate; transform-origin: 0 0; backface-visibility: hidden; }
.gallery-projector::before { position: absolute; z-index: 3; inset: 0; background: repeating-linear-gradient(0deg,rgba(8,8,8,.13) 0 1px,transparent 1px 4px); content: ""; opacity: .46; pointer-events: none; mix-blend-mode: multiply; }
.gallery-projector::after { position: absolute; z-index: 3; inset: 0; background: radial-gradient(ellipse at center,transparent 54%,rgba(0,0,0,.28) 100%); content: ""; pointer-events: none; }
.gallery-camera-hud { top: 5%; right: 5%; left: 5%; font-size: 5px; }
.gallery-camera-bottom-hud { right: 5%; bottom: 4%; left: 5%; font-size: 5px; }
.gallery-slide img { object-position: center var(--frame-y,46%); }

/* CRT cycles mostly through the 27 ARCHIVE ident and brief field footage; color bars/noise interrupt only briefly. */
.crt-screen { animation: none; isolation: isolate; }
.crt-screen::before { z-index: 1; opacity: .34; }
.crt-screen::after { z-index: 6; animation-duration: 10.8s; }
.crt-bars { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; overflow: hidden; opacity: 0; transition: opacity .07s steps(2,end); }
.crt-bars-main { display: grid; height: 72%; grid-template-columns: repeat(7,1fr); }
.crt-bars-main i:nth-child(1) { background: #c8c9c5; }
.crt-bars-main i:nth-child(2) { background: #e8dd00; }
.crt-bars-main i:nth-child(3) { background: #00c6cc; }
.crt-bars-main i:nth-child(4) { background: #12b75a; }
.crt-bars-main i:nth-child(5) { background: #d32ac7; }
.crt-bars-main i:nth-child(6) { background: #e21b25; }
.crt-bars-main i:nth-child(7) { background: #2536c2; }
.crt-bars-lower { display: grid; height: 28%; grid-template-columns: 1.6fr .72fr .8fr .78fr 1fr 1.25fr; border-top: 2px solid rgba(8,9,10,.68); }
.crt-bars-lower i:nth-child(1) { background: #181d60; }
.crt-bars-lower i:nth-child(2) { background: #e7e7e3; }
.crt-bars-lower i:nth-child(3) { background: #292253; }
.crt-bars-lower i:nth-child(4) { background: #171718; }
.crt-bars-lower i:nth-child(5) { background: #202020; }
.crt-bars-lower i:nth-child(6) { background: #090a0a; }
.crt-static { position: absolute; z-index: 4; inset: -3%; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .06s steps(2,end); }
.crt-static::before { position: absolute; top: 43%; right: -5%; left: -5%; height: 16%; background: linear-gradient(180deg,transparent,rgba(245,245,239,.52) 48%,rgba(235,235,229,.08) 56%,transparent); content: ""; animation: crt-static-roll .21s steps(3,end) infinite; }
.crt-static::after { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.78'/%3E%3C/svg%3E") center/128px 96px; content: ""; opacity: .56; mix-blend-mode: screen; animation: crt-static-noise .075s steps(2,end) infinite; }
.crt-clip { z-index: 3; }
.crt-logo,.crt-tune { z-index: 7; }
.crt-screen.is-playing .crt-bars,.crt-screen.is-playing .crt-static { opacity: 0; }
.crt-screen.is-static { animation: crt-testcard-pulse .64s steps(1,end) both; }
.crt-screen.is-static .crt-bars,.crt-screen.is-static .crt-static { opacity: 1; }
.crt-screen.is-static .crt-clip,.crt-screen.is-static .crt-logo,.crt-screen.is-static .crt-tune { opacity: 0; }
@keyframes crt-testcard-pulse { 0%,38%,57%,100% { filter: brightness(.88) contrast(1.22); } 8%,51% { filter: brightness(1.8) contrast(1.05); } 12%,48% { filter: brightness(.58) contrast(1.5); } }
@keyframes crt-static-roll { 0% { transform: translateY(-75%); opacity: .2; } 45% { opacity: .95; } 100% { transform: translateY(330%); opacity: .25; } }
@keyframes crt-static-noise { 0% { transform: translate3d(-2%,1%,0); } 50% { transform: translate3d(1%,-2%,0); } 100% { transform: translate3d(2%,1%,0); } }

/* Use the supplied front-facing CRT cutout, with the live picture aligned to its curved glass. */
.crt-tv { top: 50%; bottom: auto; left: 50%; width: min(100%,700px); aspect-ratio: 1374 / 1145; filter: drop-shadow(0 22px 28px rgba(0,0,0,.78)); transform: translate(-50%,-50%); }
.crt-tv-shell { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.crt-room { border: 0; }
.crt-screen { position: absolute; z-index: 1; top: 20%; left: 10.1%; display: grid; width: 67%; height: 59%; flex: none; align-content: center; justify-items: center; overflow: hidden; padding: 0; border: 0; border-radius: 13% / 12%; background: radial-gradient(ellipse at 50% 47%,#171819 0%,#0b0c0d 59%,#030405 100%); box-shadow: inset 0 0 32px rgba(0,0,0,.72),inset 0 1px 12px rgba(245,245,239,.14); isolation: isolate; }
.crt-screen::before { z-index: 1; border-radius: inherit; opacity: .42; }
.crt-screen::after { z-index: 6; }
.crt-screen.is-static { border: 0; background: transparent; box-shadow: none; }
.crt-screen.is-static .crt-bars { opacity: 0; }
.crt-screen.is-static .crt-static { opacity: .3; }
.crt-logo { margin: 0; font-size: clamp(23px,2.6vw,35px); }
.crt-tune { margin-top: 8px; font-size: 7px; }
.crt-scanlines { position: absolute; z-index: 5; inset: 0; display: block; background: repeating-linear-gradient(0deg,rgba(5,5,6,.16) 0 1px,transparent 1px 3px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .crt-static::before,.crt-static::after { animation: none !important; }
  .crt-static::before { opacity: .18; transform: none; }
}

/* 27 ARCHIVE spray-tag system: thin passes, exposed ground, restrained signal color and edge overspray. */
.hero h1 .hero-graffiti { width: min(8.9em,calc(100vw - 54px)); margin-top: .08em; vertical-align: -.2em; }
.hero-graffiti-svg { filter: drop-shadow(0 3px 5px rgba(0,0,0,.38)); }
.tag-paint-shadow,.tag-flourish-shadow { stroke: rgba(5,7,8,.68); stroke-width: 38px; opacity: .34; transform: translate(1.5px,2px); }
.tag-paint-halo { stroke: var(--tag-color,#cbd7d0); stroke-width: 54px; opacity: .17; filter: blur(8px); }
.tag-paint-accent,.tag-flourish-accent { stroke: var(--tag-color,#ad6d55); stroke-width: 38px; opacity: .22; transform: translate(-2.8px,1.8px); }
.tag-paint-body,.tag-flourish-body { stroke: var(--tag-color,#d3d5cb); stroke-width: 34px; opacity: .9; filter: url(#tag-rough-edge); }
.tag-paint-highlight { stroke: #fff8e9; stroke-width: 1.4px; stroke-dasharray: .06 .16; opacity: .12; }
.tag-flourish-shadow { stroke-width: 15px; }
.tag-flourish-accent { stroke-width: 10px; opacity: .42; }
.tag-flourish-body { stroke-width: 7px; opacity: .77; }
.tag-drip { stroke: var(--tag-color,#d2d6cf); stroke-width: var(--drip-weight,2.5px); opacity: .62; filter: drop-shadow(0 0 2.5px rgba(223,231,223,.2)); }
.tag-bead { fill: var(--tag-color,#d2d6cf); stroke: rgba(7,9,10,.34); stroke-width: .75px; opacity: 0; }
.tag-fleck { fill: var(--tag-color,#bac9c3); opacity: 0; filter: drop-shadow(0 0 1.2px currentColor); }
.tag-dry-mark { fill: none; stroke: var(--tag-color,#ad6d55); stroke-width: 2.4px; stroke-linecap: round; opacity: .28; }
.hero-graffiti.sprayed .tag-paint { animation: spray-tag-draw .68s cubic-bezier(.32,.12,.22,1) var(--paint-delay,0ms) both; }
.hero-graffiti.sprayed .tag-paint-halo { animation-duration: .86s; }
.hero-graffiti.sprayed .tag-flourish { animation-duration: .82s; }
.hero-graffiti.sprayed .tag-drip { animation: spray-tag-drip .72s cubic-bezier(.2,.67,.25,1) var(--paint-delay,0ms) both; }
.hero-graffiti.sprayed .tag-bead { animation: spray-tag-bead .31s cubic-bezier(.16,.8,.28,1) var(--paint-delay,0ms) both; }
.hero-graffiti.sprayed .tag-fleck { animation: spray-tag-fleck .38s ease-out var(--paint-delay,0ms) both; }
.hero-graffiti.sprayed .tag-dry-mark { animation: spray-dry-mark .4s ease-out var(--paint-delay,0ms) both; }
.tag-paint-shadow { --tag-opacity: .34; }
.tag-paint-halo { --tag-opacity: .17; }
.tag-paint-accent,.tag-flourish-accent { --tag-opacity: .22; }
.tag-paint-body,.tag-flourish-body { --tag-opacity: .9; }
.tag-paint-highlight { --tag-opacity: .12; }
.tag-flourish-shadow { --tag-opacity: .34; }
.tag-flourish-body { --tag-opacity: .77; }
.tag-fullstop { fill: #d5c5b4; }
@keyframes spray-tag-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 5% { opacity: var(--tag-opacity,1); } 100% { stroke-dashoffset: 0; opacity: var(--tag-opacity,1); } }
@keyframes spray-tag-drip { 0% { stroke-dashoffset: 1; opacity: 0; } 13% { opacity: .68; } 100% { stroke-dashoffset: 0; opacity: .68; } }
@keyframes spray-tag-bead { 0% { opacity: 0; transform: scale(.4); } 74% { opacity: .93; transform: scale(1.08); } 100% { opacity: .82; transform: scale(1); } }
@keyframes spray-tag-fleck { 0% { opacity: 0; transform: scale(.35); } 42% { opacity: var(--fleck-opacity,.45); transform: scale(1.12); } 100% { opacity: var(--fleck-opacity,.45); transform: scale(1); } }
@keyframes spray-dry-mark { 0% { opacity: 0; stroke-dasharray: 0 1; } 100% { opacity: .28; stroke-dasharray: 1 0; } }
@media (max-width: 680px) {
  .hero h1 .hero-graffiti { width: min(8.7em,calc(100vw - 46px)); margin-top: .13em; vertical-align: -.14em; }
  .tag-paint-shadow { stroke-width: 36px; }
  .tag-paint-halo { stroke-width: 49px; }
  .tag-paint-accent { stroke-width: 36px; }
  .tag-paint-body { stroke-width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-graffiti .tag-paint,.hero-graffiti .tag-drip,.hero-graffiti .tag-fleck,.hero-graffiti .tag-bead,.hero-graffiti .tag-dry-mark { animation: none !important; }
  .hero-graffiti .tag-paint,.hero-graffiti .tag-drip { stroke-dashoffset: 0; opacity: var(--tag-opacity,1); }
  .hero-graffiti .tag-fleck { opacity: var(--fleck-opacity,.4); }
  .hero-graffiti .tag-bead { opacity: .82; }
  .hero-graffiti .tag-dry-mark { opacity: .28; }
}

/* Brand gallery on the front-facing CRT: the picture sits on the curved glass, the channel knob turns on every change. */
.gallery-camera.gallery-tv { aspect-ratio: 1296 / 919; }
.gallery-tv .tv-shell { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.gallery-tv .brand-gallery { top: 12.08%; left: 7.33%; width: 68.44%; height: 73.56%; transform: none; clip-path: none; border-radius: 11.27% / 13.02%; box-shadow: none; }
.gallery-tv .brand-gallery::after { position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 28% 10%,rgba(255,255,255,.09),rgba(255,255,255,.02) 34%,transparent 50%),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.42) 100%); box-shadow: inset 0 0 24px 8px rgba(0,0,0,.7),inset 0 0 3px 1px rgba(0,0,0,.92); content: ""; pointer-events: none; }
.gallery-tv .gallery-projector { inset: 0; width: 100%; height: 100%; transform: none; }
.gallery-tv .gallery-camera-hud { top: 9%; right: 10%; left: 10%; }
.gallery-tv .gallery-camera-bottom-hud { right: 10%; bottom: 9%; left: 10%; }
.gallery-tv .gallery-photo-mark { top: 17%; left: 10%; }
.gallery-tv .camera-mode-dial { top: 14.09%; left: 83.95%; width: 9.72%; height: auto; aspect-ratio: 1; background: url("assets/retro-tv-gallery.webp?v=4") 92.99% 16.33% / 1028.57% auto no-repeat; }
.gallery-tv .camera-mode-dial i { display: none; }
.gallery-tv .camera-mode-dial.is-turning { filter: brightness(1.1); }

/* Channel 27 program on the same screen: ident, rain clip and the set's own test card, cut together with static. */
.gallery-tv .tv-testcard { position: absolute; z-index: 2; inset: 0; background: url("assets/retro-tv-gallery.webp?v=4") 23.23% 45.68% / 146.11% auto no-repeat; opacity: 0; visibility: hidden; }
.gallery-tv .tv-ident { position: absolute; z-index: 2; inset: 0; display: grid; align-content: center; justify-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 47%,#171819 0%,#0b0c0d 59%,#030405 100%); text-align: center; opacity: 0; visibility: hidden; transition: opacity .12s steps(2,end),visibility .12s; }
.gallery-tv .tv-ident::after { position: absolute; top: 42%; right: 0; left: 0; height: 16px; background: linear-gradient(180deg,transparent,rgba(255,255,255,.2),transparent); content: ""; opacity: 0; animation: tv-scan-glitch 10.8s steps(1,end) infinite; }
.gallery-tv .crt-clip { z-index: 2; transition: none; }
.gallery-tv .tv-ident { transition: none; }
.gallery-tv .crt-static { z-index: 4; display: none; }
.gallery-tv .brand-gallery[data-program="brand"] .tv-ident { opacity: 1; visibility: visible; }
.gallery-tv .brand-gallery[data-program="clip"] .crt-clip { opacity: 1; animation: crt-sting-in .2s steps(2,end) both; }
/* 3D-Logo (27.10.2026): in Farbe, nicht grau wie der Regenclip; das Video hat den Grund der Ident-Tafel schon eingerechnet. */
.gallery-tv .crt-3d { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; filter: contrast(1.06) saturate(1.05); opacity: 0; visibility: hidden; }
.gallery-tv .brand-gallery[data-program="logo3d"] .crt-3d { opacity: 1; visibility: visible; animation: crt-sting-in .2s steps(2,end) both; }
/* Freeski-Clip (27.10.2026): wie der Regenclip als alte Kameraaufnahme, grau und mit Aufnahmeanzeige. */
.gallery-tv .crt-ski { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: grayscale(.86) contrast(1.18) brightness(.86); opacity: 0; visibility: hidden; }
.gallery-tv .brand-gallery[data-program="ski"] .crt-ski { opacity: 1; visibility: visible; animation: crt-sting-in .2s steps(2,end) both; }
.gallery-tv .brand-gallery[data-program="static"] .tv-testcard { opacity: 1; visibility: visible; animation: crt-testcard-pulse 1.35s steps(1,end) both; }
.gallery-tv .brand-gallery[data-program="static"] .crt-static { display: block; opacity: .3; }
.gallery-tv .brand-gallery.is-tuning .crt-static { display: block; opacity: .88; }
.gallery-tv .brand-gallery:is([data-program="brand"],[data-program="static"],[data-program="logo3d"]) :is(.gallery-camera-hud,.gallery-camera-bottom-hud) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .gallery-tv .tv-testcard,.gallery-tv .tv-ident::after,.gallery-tv .crt-clip,.gallery-tv .crt-3d,.gallery-tv .crt-ski { animation: none !important; }
}

/* Winter field notes as part of the start page: the opening plays inside the alpine hero when it scrolls into view. */
.winter-block { position: relative; }
.winter-block .opening-overlay { position: absolute; z-index: 20; inset: 0 0 auto; height: 100%; max-height: calc(100svh - 62px); }
@media (max-width: 680px) {
  .winter-block .opening-overlay { max-height: calc(100svh - 54px); }
}

/* Both bar knobs click between stops when the channel changes; the lower one is cut from the same TV image. */
.gallery-tv .camera-mode-dial,.gallery-tv .tv-knob-lower { transition: transform .58s cubic-bezier(.3,1.45,.5,1); }
.gallery-tv .tv-knob-lower { position: absolute; z-index: 3; top: 34.66%; left: 83.95%; width: 9.72%; aspect-ratio: 1; border-radius: 50%; background: url("assets/retro-tv-gallery.webp?v=4") 92.99% 40.16% / 1028.57% auto no-repeat; pointer-events: none; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .gallery-tv .camera-mode-dial,.gallery-tv .tv-knob-lower { transition: none; }
}

/* No countdown bar and no pause button under the gallery TV; the arrows stay. */
.gallery-section .gallery-progress,.gallery-section .gallery-play { display: none; }

/* Photo orbit: the portraits turn on one big wheel like the Jitter study "Orbit: Cards": cards 15° apart, card top 4.34 card widths
   from the wheel centre (Jitter: 440 card scaled 1.25 on the 2300 rim). Cards past ±36° fade out, so no portrait shows twice.
   The TV above keeps the channel 27 program; its current channel sits under the set. */
.gallery-section { --orbit-bleed: var(--gutter); row-gap: clamp(26px,4vw,58px); }
.tv-program-line { display: flex; max-width: 650px; justify-content: space-between; gap: 16px; margin: 16px auto 0; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--muted); font: 8px var(--mono); letter-spacing: .16em; }
.tv-program-channel { color: var(--muted); opacity: .75; }
.gallery-orbit { position: relative; z-index: 1; grid-column: 1 / -1; min-width: 0; margin-inline: calc(var(--orbit-bleed) * -1); }
.orbit-stage { --card-w: clamp(170px,19vw,440px); --card-h: calc(var(--card-w) * 1.6136); --orbit-r: calc(var(--card-w) * 4.34); --orbit-top: calc(var(--card-h) * .14); --orbit-sink: .07; position: relative; height: calc(var(--orbit-top) + var(--card-h) * 1.3); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.orbit-wheel { --orbit-fade: conic-gradient(from -40deg at 50% calc(var(--orbit-top) + var(--orbit-r)),transparent,#000 4deg 76deg,transparent 80deg); position: absolute; inset: 0; -webkit-mask-image: var(--orbit-fade); mask-image: var(--orbit-fade); }
.orbit-card { position: absolute; top: var(--orbit-top); left: 50%; width: var(--card-w); height: var(--card-h); margin: 0 0 0 calc(var(--card-w) * -.5); overflow: hidden; border-radius: calc(var(--card-w) * .045); background: #151514; box-shadow: 14px 0 46px rgba(0,0,0,.7),0 0 0 1px rgba(232,232,229,.08); transform: rotate(calc(var(--orbit-slot,0) * 15deg)); transform-origin: 50% var(--orbit-r); cursor: pointer; backface-visibility: hidden; }
.orbit-card:nth-child(2) { --orbit-slot: 1; }
.orbit-card:nth-child(3) { --orbit-slot: 2; }
.orbit-card:nth-child(4) { --orbit-slot: 3; }
.orbit-card:nth-child(5) { --orbit-slot: -2; }
.orbit-card:nth-child(6) { --orbit-slot: -1; }
.orbit-card.is-center { cursor: default; }
.orbit-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center var(--frame-y,46%); filter: saturate(.8) contrast(1.06) brightness(.88); pointer-events: none; -webkit-user-drag: none; }
.orbit-card::after { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg,rgba(0,0,0,.2),transparent 24% 62%,rgba(0,0,0,.45)); box-shadow: inset 0 1px rgba(255,255,255,.13); content: ""; pointer-events: none; }
.orbit-card-mark { position: absolute; z-index: 1; top: 7%; left: 8%; color: rgba(232,232,229,.8); font: 7px var(--mono); letter-spacing: .16em; text-shadow: 0 1px 6px rgba(0,0,0,.85); }
.orbit-hub { position: absolute; z-index: 30; top: calc(var(--orbit-top) + var(--card-h) * (1 - var(--orbit-sink))); left: 50%; width: calc((var(--orbit-r) - var(--card-h) * (1 - var(--orbit-sink))) * 2); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(180deg,#1c1c1b 0,#121211 64px,#0b0b0b 170px); box-shadow: 0 -16px 46px rgba(0,0,0,.6),inset 0 1px rgba(232,232,229,.17),inset 0 24px 34px -26px rgba(255,255,255,.09); transform: translateX(-50%); pointer-events: none; }
.orbit-stage::after { position: absolute; z-index: 30; right: 0; bottom: 0; left: 0; height: 48%; background: linear-gradient(0deg,#0a0a0a 0,rgba(10,10,10,.74) 18%,rgba(10,10,10,0) 100%); content: ""; pointer-events: none; }
.orbit-hud { position: absolute; z-index: 31; right: var(--orbit-bleed); bottom: clamp(14px,2vw,26px); left: var(--orbit-bleed); display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; color: rgba(232,232,229,.66); font: 8px var(--mono); letter-spacing: .17em; text-transform: uppercase; pointer-events: none; }
.orbit-hud > :last-child { justify-self: end; }
.orbit-hud .orbit-count { display: none; }
.orbit-hud .brand-logo { display: block; width: 64px; height: auto; opacity: .82; }
.gallery-orbit .gallery-caption { max-width: none; margin-inline: var(--orbit-bleed); }
@media (max-width: 680px) {
  .gallery-section { --orbit-bleed: 23px; row-gap: 29px; }
  .tv-program-line { margin-top: 12px; padding-top: 10px; font-size: 7px; }
  .orbit-stage { --card-w: clamp(150px,48vw,260px); height: calc(var(--orbit-top) + var(--card-h) * 1.2); }
  .orbit-hud { grid-template-columns: 1fr auto; gap: 14px; font-size: 7px; }
  .orbit-hud .orbit-hud-brand { display: none; }
}

/* ===== Light mode foundation: dark stays the default, html[data-theme="light"] switches the tokens. ===== */
:root[data-theme="light"] {
  color-scheme: light;
  --black: #efeee9;
  --panel: #e6e4de;
  --panel-2: #dcdad3;
  --paper: #131312;
  --muted: #5b5a56;
  --dim: #83827d;
  --line: rgba(19, 19, 18, .2);
  --line-soft: rgba(19, 19, 18, .1);
}
.theme-toggle { color: inherit; }
.theme-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon .theme-moon { display: none; }
:root[data-theme="light"] .theme-icon .theme-sun,:root[data-theme="light"] .theme-icon .theme-rays { display: none; }
:root[data-theme="light"] .theme-icon .theme-moon { display: inline; }

/* The header fits every phone: the claim beside the logo gives way first, then the flags. */
@media (max-width: 680px) {
  .site-header .wordmark > span { display: none; }
}
@media (max-width: 400px) {
  .site-header .language-choice > span[aria-hidden="true"] { display: none; }
  .site-header .language-choice { min-width: 26px; }
}

/* ===== Light mode, part 1: frame, shared components, hero, dialogs (every rule is scoped to html[data-theme="light"]). ===== */
/* ===== Light mode: frame and shared parts ("the same archive, printed"). Every rule starts with :root[data-theme="light"]. ===== */

/* Shared light tokens: ink ladder for text (all >= 4.5:1 on paper), milk glass, ink rgb for hairlines and shadows. */
:root[data-theme="light"] { --ink-rgb: 19,19,18; --ink-soft: #2a2927; --ink-body: #3d3c39; --ink-note: #54534f; --ink-faint: #6a6964; --paper-hi: #f7f6f2; --glass-fill: rgba(250,249,246,.76); --glass-edge: rgba(19,19,18,.2); --glass-glint: rgba(255,255,255,.82); }

/* Base helpers: skip link text (a:any-link would inherit ink onto ink), focus rings, placeholders. */
:root[data-theme="light"] .skip-link { color: var(--black); }
:root[data-theme="light"] .language-choice:focus-visible { outline-color: var(--paper); }
:root[data-theme="light"] :is(.search-input-wrap input,.checkout-form input)::placeholder { color: var(--ink-faint); opacity: 1; }

/* The logo file is drawn in white: print it in ink wherever it stands on paper (photo stages keep it white). */
:root[data-theme="light"] img[src*="27-archive-logo"]:not(.opening-logo):not(.snowboard-logo) { filter: invert(1); }

/* Announcement: a narrow printed ink band above the paper header. */
:root[data-theme="light"] .announcement { color: var(--black); background: var(--paper); border-bottom-color: var(--paper); }

/* Header: milk glass with an ink hairline. */
:root[data-theme="light"] .site-header { border-bottom-color: var(--line); background: linear-gradient(180deg,rgba(250,249,246,.95),rgba(239,238,233,.9)); box-shadow: 0 8px 26px rgba(var(--ink-rgb),.05); }
:root[data-theme="light"] .wordmark small { color: var(--muted); }
:root[data-theme="light"] .main-nav a:any-link { color: var(--ink-soft); }
:root[data-theme="light"] .main-nav a:any-link:hover,:root[data-theme="light"] .main-nav a[aria-current="page"] { color: var(--paper); }
:root[data-theme="light"] button:is(.header-icon,.bag-open,.menu-toggle):hover { filter: none; opacity: .6; }
:root[data-theme="light"] .language-switch { border-color: var(--glass-edge); background: linear-gradient(145deg,rgba(255,255,255,.72),rgba(230,228,222,.5)); box-shadow: inset 0 1px 0 var(--glass-glint),0 4px 14px rgba(var(--ink-rgb),.05); }
:root[data-theme="light"] .language-choice { color: var(--ink-note); }
:root[data-theme="light"] .language-choice:not(.is-active):hover { color: var(--paper); background: rgba(var(--ink-rgb),.07); filter: none; }
:root[data-theme="light"] .language-choice.is-active { color: var(--black); background: var(--paper); }

/* Mobile menu: the same milk glass, dropped below the header. */
:root[data-theme="light"] .mobile-nav:not([hidden]) { border-bottom-color: var(--glass-edge); background: linear-gradient(145deg,rgba(250,249,246,.99),rgba(239,238,233,.985)); box-shadow: 0 14px 32px rgba(var(--ink-rgb),.1),inset 0 1px 0 var(--glass-glint); }
:root[data-theme="light"] .mobile-nav :is(a,button) span { color: var(--muted); }

/* Hero ground: paper light instead of a white glow, ink hairlines and a multiplied halftone grain. */
:root[data-theme="light"] .hero::before { background: radial-gradient(ellipse at 60% 46%,rgba(255,255,255,.62),transparent 46%),linear-gradient(118deg,transparent 0 46%,rgba(var(--ink-rgb),.05) 46.1% 46.2%,transparent 46.3%),repeating-linear-gradient(132deg,transparent 0 82px,rgba(var(--ink-rgb),.035) 83px 84px,transparent 85px 168px); }
:root[data-theme="light"] .hero::after { background: radial-gradient(rgba(var(--ink-rgb),.55) .55px,transparent .8px); background-size: 5px 5px; opacity: .07; mix-blend-mode: multiply; }
:root[data-theme="light"] .hero-texture { border-color: rgba(var(--ink-rgb),.09); }
:root[data-theme="light"] .hero-texture::before,:root[data-theme="light"] .hero-texture::after { background: rgba(var(--ink-rgb),.12); }

/* Typewriter headline: the extruded edge runs from dark to paper, the reverse of the dark theme. */
:root[data-theme="light"] .typewriter-letter { text-shadow: 1px 1px 0 rgba(58,58,56,.9),2px 2px 0 rgba(128,127,123,.72),3px 3px 0 rgba(206,205,199,.8),0 0 19px rgba(var(--ink-rgb),.06); }
:root[data-theme="light"] .typewriter-letter.is-glitching { color: #34424b; }
:root[data-theme="light"] .typewriter-letter.is-hovered { color: #000; text-shadow: 1px 1px 0 #2c2c2a,2px 2px 0 #8a8985,3px 3px 0 #cbcac4,0 0 13px rgba(var(--ink-rgb),.14); }

/* Hero spray tag (SVG): ink paint over a darker offset underpaint, so the worn coverage still reads (>= 3:1) on paper; the original hues stay as a hint. */
:root[data-theme="light"] .hero-graffiti-svg { filter: drop-shadow(0 2px 3px rgba(var(--ink-rgb),.12)); }
:root[data-theme="light"] :is(.tag-paint-shadow,.tag-flourish-shadow) { stroke: rgba(255,255,255,.85); }
:root[data-theme="light"] :is(.tag-paint-halo,.tag-paint-body,.tag-flourish-body,.tag-drip) { stroke: #1d1d1b; }
:root[data-theme="light"] :is(.tag-paint-accent,.tag-flourish-accent,.tag-dry-mark) { stroke: #57504b; }
:root[data-theme="light"] :is(.tag-bead,.tag-fleck,.tag-fullstop) { fill: #1d1d1b; }
:root[data-theme="light"] .tag-bead { stroke: rgba(255,255,255,.45); }
:root[data-theme="light"] .tag-drip { filter: none; }
:root[data-theme="light"] .tag-paint-halo { --tag-opacity: .12; }
:root[data-theme="light"] .tag-paint-accent { --tag-opacity: .64; }
:root[data-theme="light"] .tag-paint-body { --tag-opacity: 1; }
:root[data-theme="light"] .tag-flourish-body { --tag-opacity: .86; }
@supports (stroke: color-mix(in srgb, red 50%, blue)) {
  :root[data-theme="light"] :is(.tag-paint-halo,.tag-paint-body,.tag-flourish-body,.tag-drip) { stroke: color-mix(in srgb,var(--tag-color,#d2d6cf) 10%,#131312); }
  :root[data-theme="light"] :is(.tag-flourish-accent,.tag-dry-mark) { stroke: color-mix(in srgb,var(--tag-color,#ad6d55) 80%,#131312); }
  :root[data-theme="light"] .tag-paint-accent { stroke: color-mix(in srgb,var(--tag-color,#ad6d55) 38%,#131312); }
  :root[data-theme="light"] :is(.tag-bead,.tag-fleck) { fill: color-mix(in srgb,var(--tag-color,#d2d6cf) 10%,#131312); }
}

/* Hero copy, side notes and the corner marks in the ink ladder. */
:root[data-theme="light"] .hero-deck { color: var(--ink-body); }
:root[data-theme="light"] .hero-meta { color: var(--muted); }
:root[data-theme="light"] .hero-side { color: var(--ink-body); }
:root[data-theme="light"] .side-mark :is(i,b) { border-color: rgba(var(--ink-rgb),.42); }
:root[data-theme="light"] .hero-coordinates { color: var(--ink-faint); }

/* OPEN stays a lit neon box: a small dark object on the paper, like the TV. */
:root[data-theme="light"] .open-sign-word { color: #f8f8f5; }
:root[data-theme="light"] .open-sign-frame { background: linear-gradient(180deg,rgba(255,255,255,.035),transparent 35% 75%,rgba(160,228,242,.025)),#0d1113; box-shadow: inset 0 0 19px rgba(137,221,240,.045),0 0 14px rgba(67,198,225,.1),0 10px 22px rgba(var(--ink-rgb),.2); }

/* Signal strip under the hero. */
:root[data-theme="light"] .signal-strip { color: var(--ink-note); }
:root[data-theme="light"] .signal-strip i { color: var(--ink-soft); }

/* Text links: the base color is a fixed light grey, so pin them to ink. */
:root[data-theme="light"] :is(.view-all,.text-link) { color: var(--paper); }

/* Shared button: ink outline on milk glass, filled with ink on hover. */
:root[data-theme="light"] .button { border-color: rgba(var(--ink-rgb),.72); background: linear-gradient(145deg,rgba(255,255,255,.6),rgba(230,228,222,.28)); box-shadow: inset 0 1px 0 rgba(255,255,255,.75),0 6px 18px rgba(var(--ink-rgb),.05); }
:root[data-theme="light"] .button:hover { color: var(--black); background: var(--paper); box-shadow: 0 9px 22px rgba(var(--ink-rgb),.16); }
:root[data-theme="light"] a.button:any-link { border-color: rgba(var(--ink-rgb),.72); background: linear-gradient(145deg,rgba(255,255,255,.6),rgba(230,228,222,.28)); }
:root[data-theme="light"] a.button:any-link:hover { color: var(--black); background: var(--paper); }

/* Shared spray lettering: ink letters with a paper cut edge and a soft ink overspray (the dark theme reversed). */
:root[data-theme="light"] .spray-text:not(.spray-wet):not(.hero-graffiti) { color: #1a1a18; }
:root[data-theme="light"] .spray-text:not(.spray-wet) .spray-letter { color: #1a1a18; -webkit-text-stroke: .8px rgba(250,249,245,.92); text-shadow: 1px 1px 0 rgba(250,249,245,.95),2px 3px 0 rgba(214,213,206,.9),0 0 12px rgba(var(--ink-rgb),.16); }
:root[data-theme="light"] .spray-text:not(.spray-wet) .spray-grain { background: radial-gradient(circle at 11% 44%,rgba(var(--ink-rgb),.5) 0 1px,transparent 2px),radial-gradient(circle at 92% 17%,rgba(var(--ink-rgb),.42) 0 1.2px,transparent 2.2px),radial-gradient(ellipse at 79% 88%,rgba(var(--ink-rgb),.3) 0 1.5px,transparent 3px),radial-gradient(circle at 32% 91%,rgba(var(--ink-rgb),.4) 0 1px,transparent 2px); mix-blend-mode: multiply; }
:root[data-theme="light"] .spray-text.sprayed:not(.spray-wet)::after { background: radial-gradient(ellipse at 30% 55%,rgba(var(--ink-rgb),.07),transparent 56%),radial-gradient(ellipse at 74% 45%,rgba(var(--ink-rgb),.05),transparent 55%); }

/* Photo placeholders carry their own paper panel, so they never end up as ink on a dark box. */
:root[data-theme="light"] .photo-slot { color: var(--ink-note); background: linear-gradient(137deg,#e8e6e0 0%,#dfddd6 51%,#e6e4de 100%); }
:root[data-theme="light"] .photo-slot::before { border-color: rgba(var(--ink-rgb),.17); }
:root[data-theme="light"] .photo-slot::after { border-color: rgba(var(--ink-rgb),.22); }
:root[data-theme="light"] .photo-slot b { color: var(--ink-soft); }
:root[data-theme="light"] .photo-slot i { color: var(--muted); }

/* Glass panel utility: milk glass with an ink edge. */
:root[data-theme="light"] .glass-panel { border-color: var(--glass-edge); background: linear-gradient(145deg,rgba(255,255,255,.72),rgba(236,235,230,.58)); box-shadow: inset 0 1px 0 var(--glass-glint),0 18px 44px rgba(var(--ink-rgb),.12); }

/* Toast: an inverted ink note so it is noticed on paper. */
:root[data-theme="light"] .toast { border-color: var(--paper); color: var(--black); background: #1b1b19; box-shadow: 0 12px 30px rgba(var(--ink-rgb),.2); }

/* Footer. */
:root[data-theme="light"] .footer-top > p { color: var(--ink-soft); }
:root[data-theme="light"] .footer-top > p span { color: var(--muted); }
:root[data-theme="light"] .site-footer nav a:any-link { color: var(--ink-body); }
:root[data-theme="light"] .site-footer nav a:any-link:hover { color: var(--paper); }
:root[data-theme="light"] .footer-bottom { color: var(--muted); }

/* Layers: a warm ink scrim, panels as milk glass with an ink edge. */
:root[data-theme="light"] :is(.drawer-backdrop,.modal-backdrop) { background: rgba(var(--ink-rgb),.3); }
:root[data-theme="light"] :is(.cart-drawer,.product-dialog,.search-dialog,.saved-dialog,.size-dialog,.checkout-dialog) { border-color: rgba(var(--ink-rgb),.22); background: linear-gradient(145deg,rgba(250,249,246,.99),rgba(239,238,233,.985)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 24px 70px rgba(var(--ink-rgb),.22); }
:root[data-theme="light"] button:is(.drawer-close,.dialog-close):hover { border-color: var(--paper); background: rgba(var(--ink-rgb),.06); filter: none; }

/* Cart drawer. */
:root[data-theme="light"] .cart-line-price { color: var(--ink-soft); }
:root[data-theme="light"] .remove-item { color: var(--muted); }
:root[data-theme="light"] .remove-item:hover { color: var(--paper); background: rgba(var(--ink-rgb),.06); }

/* Product dialog. */
:root[data-theme="light"] .dialog-image { background: linear-gradient(137deg,#e8e6e0 0%,#dfddd6 51%,#e6e4de 100%); }
:root[data-theme="light"] .dialog-condition { color: var(--ink-body); }
:root[data-theme="light"] .condition-dot { background: var(--ink-note); }
:root[data-theme="light"] .dialog-description { color: var(--ink-body); }
:root[data-theme="light"] .dialog-size-head button { color: var(--ink-body); }
:root[data-theme="light"] .dialog-size-head button:hover { color: var(--paper); }
:root[data-theme="light"] .size-note { color: var(--ink-note); }
:root[data-theme="light"] .dialog-details span { color: var(--muted); }
:root[data-theme="light"] .concept-note { color: var(--muted); }

/* Search dialog. */
:root[data-theme="light"] .search-input-wrap input::-webkit-search-cancel-button { filter: grayscale(1) brightness(.45); cursor: pointer; }
:root[data-theme="light"] .search-result { color: var(--ink-soft); }
:root[data-theme="light"] button.search-result:hover { color: var(--paper); background: rgba(var(--ink-rgb),.04); filter: none; }

/* Saved list. */
:root[data-theme="light"] .saved-empty { color: var(--ink-body); }

/* Size guide (size-tip carries !important in the base sheet, so the fill color takes over instead). */
:root[data-theme="light"] .size-dialog > p:not(.eyebrow) { color: var(--ink-body); }
:root[data-theme="light"] .size-tip { -webkit-text-fill-color: var(--muted); }
:root[data-theme="light"] .measure-list > div { color: var(--ink-body); }
:root[data-theme="light"] .measure-list b { color: var(--muted); }

/* Checkout. */
:root[data-theme="light"] .checkout-intro { color: var(--ink-body); }
:root[data-theme="light"] .checkout-review-line { color: var(--ink-body); }
:root[data-theme="light"] .checkout-form label { color: var(--ink-note); }
:root[data-theme="light"] .checkout-form input { border-color: rgba(var(--ink-rgb),.28); background: rgba(255,255,255,.66); }
:root[data-theme="light"] .checkout-form input:focus { border-color: var(--paper); }
:root[data-theme="light"] .checkout-success p { color: var(--ink-body); }

/* Mobile hero ground. */
@media (max-width: 680px) {
  :root[data-theme="light"] .hero::before { background: radial-gradient(ellipse at 66% 44%,rgba(255,255,255,.6),transparent 52%),repeating-linear-gradient(132deg,transparent 0 52px,rgba(var(--ink-rgb),.035) 53px 54px,transparent 55px 108px); }
}

/* Without backdrop blur the glass falls back to solid paper. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] :is(.site-header,.mobile-nav:not([hidden]),.button,.cart-drawer,.product-dialog,.search-dialog,.saved-dialog,.size-dialog,.checkout-dialog) { background-color: #f4f3ef; }
  :root[data-theme="light"] :is(.drawer-backdrop,.modal-backdrop) { background: rgba(var(--ink-rgb),.45); }
}

/* ===== Light mode, part 2: winter, shop, drop 01. ===== */
/* ===== Light mode: winter block, shop and Drop 01 waitlist ("the same archive, printed"). Every rule starts with :root[data-theme="light"]. ===== */

/* Winter block ground: paper instead of the night backdrop. */
:root[data-theme="light"] .snowboard-page { background: var(--black); }

/* Alpine hero as a snowy, overexposed print: pale graphite mountains, a paper mist over the copy side. */
:root[data-theme="light"] .alpine-hero { background: radial-gradient(ellipse at 69% 44%,rgba(255,255,255,.7),transparent 40%),linear-gradient(118deg,#e8e7e1 0%,#e1e0da 53%,#ecebe6 100%); }
:root[data-theme="light"] .alpine-hero::before { background: linear-gradient(90deg,rgba(239,238,233,.9) 0%,rgba(239,238,233,.6) 43%,rgba(239,238,233,.1) 78%,rgba(239,238,233,.4) 100%),linear-gradient(0deg,#efeee9 0%,transparent 24% 76%,rgba(239,238,233,.3)); }
:root[data-theme="light"] .alpine-landscape { opacity: 1; filter: grayscale(1) contrast(.74) brightness(1.36); }
:root[data-theme="light"] .alpine-atmosphere::after { background: linear-gradient(90deg,rgba(239,238,233,.82),rgba(239,238,233,.52) 42%,rgba(239,238,233,.12) 70%,rgba(239,238,233,.34)),linear-gradient(0deg,rgba(239,238,233,.86),transparent 25% 74%,rgba(239,238,233,.3)); }
:root[data-theme="light"] .alpine-fog { background: linear-gradient(180deg,transparent,rgba(250,249,246,.72),transparent); }

/* Weather in graphite: rain strokes and snow flecks print onto the paper instead of glowing. */
:root[data-theme="light"] :is(.alpine-rain,.alpine-snow) { mix-blend-mode: multiply; }
:root[data-theme="light"] .alpine-rain { background-image: linear-gradient(104deg,transparent 0 17%,rgba(var(--ink-rgb),.2) 17.15%,transparent 17.5% 45%,rgba(var(--ink-rgb),.13) 45.18%,transparent 45.5% 81%,rgba(var(--ink-rgb),.17) 81.18%,transparent 81.5%); }
:root[data-theme="light"] .alpine-snow { background-image: radial-gradient(1.2px 1.2px at 12% 20%,rgba(var(--ink-rgb),.5) 99%,transparent),radial-gradient(1.5px 1.5px at 73% 59%,rgba(var(--ink-rgb),.46) 99%,transparent),radial-gradient(1px 1px at 39% 82%,rgba(var(--ink-rgb),.4) 99%,transparent),radial-gradient(1.1px 1.1px at 91% 31%,rgba(var(--ink-rgb),.42) 99%,transparent); }

/* Alpine copy in the ink ladder; the headline gets a pale extruded edge and a paper halo against the mountain. */
:root[data-theme="light"] .alpine-copy .eyebrow { color: var(--ink-note); }
:root[data-theme="light"] .alpine-index { color: var(--ink-faint); }
:root[data-theme="light"] .alpine-copy h1 { color: var(--paper); text-shadow: 0 3px 0 rgba(190,189,183,.9),0 9px 28px rgba(250,249,245,.8); }
:root[data-theme="light"] .alpine-deck { color: var(--ink-body); }
:root[data-theme="light"] .alpine-specimen { color: var(--ink-faint); }
:root[data-theme="light"] .alpine-specimen i { background: rgba(var(--ink-rgb),.4); }

/* PLAN B. wet-paint tag: ink paint, paper cut edge, graphite and paper offsets (the dark ladder reversed). */
:root[data-theme="light"] .winter-tag { color: #1a1a18; -webkit-text-stroke: .014em #f7f6f2; text-shadow: .01em .012em 0 #f7f6f2,.018em .024em 0 #a7a6a1,.026em .036em 0 #9f9e99,.034em .048em 0 #96958f,.042em .06em 0 #8a8984,.05em .072em 0 #7a7974,.058em .084em 0 #f7f6f2,.066em .094em 0 #f7f6f2; }
:root[data-theme="light"] .winter-tag::before { text-shadow: 0 .1em .16em rgba(var(--ink-rgb),.16); }
:root[data-theme="light"] .winter-tag.is-landing .plan-letter::before { background: radial-gradient(circle at 7% 64%,currentColor 0 .016em,transparent .027em),radial-gradient(circle at 21% 28%,currentColor 0 .012em,transparent .022em),radial-gradient(circle at 36% 82%,currentColor 0 .01em,transparent .019em),radial-gradient(circle at 64% 74%,currentColor 0 .013em,transparent .023em),radial-gradient(circle at 81% 24%,currentColor 0 .011em,transparent .02em),radial-gradient(circle at 94% 60%,currentColor 0 .015em,transparent .026em); }

/* Photo frame and rain study: ink hairlines and soft paper shadows; captions on the photos stay white. */
:root[data-theme="light"] .alpine-photo-frame { border-color: rgba(var(--ink-rgb),.3); background: var(--panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 28px 70px rgba(var(--ink-rgb),.2); }
:root[data-theme="light"] .rain-study { border-color: rgba(var(--ink-rgb),.24); background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,237,232,.93)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px rgba(var(--ink-rgb),.18); }
:root[data-theme="light"] .rain-study figcaption { color: var(--ink-soft); }
:root[data-theme="light"] .rain-study figcaption small { color: var(--ink-note); }
:root[data-theme="light"] .rain-study-time { color: var(--ink-note); }

/* Bottom line of the hero. */
:root[data-theme="light"] .alpine-bottomline { color: var(--ink-note); }
:root[data-theme="light"] .alpine-bottomline a { color: var(--ink-soft); }
:root[data-theme="light"] .alpine-bottomline a:hover { color: var(--paper); }
:root[data-theme="light"] .alpine-bottomline b { color: var(--paper); }

/* Field notes: paper band, ink headline and spray tag, printed photo frame. */

/* Shop filters: graphite chips that turn ink when active, milk-glass selects. */
:root[data-theme="light"] .filter-chip { color: var(--ink-note); }
:root[data-theme="light"] .filter-chip:hover,:root[data-theme="light"] .filter-chip.active { color: var(--paper); border-color: var(--paper); }
:root[data-theme="light"] .filter-chip sup { color: var(--ink-faint); }
:root[data-theme="light"] .filter-selects select { border-color: rgba(var(--ink-rgb),.2); color: var(--ink-body); background: linear-gradient(145deg,rgba(255,255,255,.72),rgba(230,228,222,.42)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
:root[data-theme="light"] .filter-selects select:hover { border-color: rgba(var(--ink-rgb),.45); color: var(--paper); }
:root[data-theme="light"] .filter-selects select:focus-visible { border-color: var(--paper); }
:root[data-theme="light"] .results-line { color: var(--ink-note); }
:root[data-theme="light"] .photo-note { color: var(--ink-faint); }

/* Product cards: paper panels with an ink hairline, the glass sheen turned to a soft white glint. */
:root[data-theme="light"] .product-image-wrap { border-color: rgba(var(--ink-rgb),.18); background: var(--panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 10px 26px rgba(var(--ink-rgb),.07); }
:root[data-theme="light"] .product-image { background: linear-gradient(137deg,#e8e6e0 0%,#dfddd6 51%,#e6e4de 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6),inset 0 -44px 85px rgba(var(--ink-rgb),.04); }
:root[data-theme="light"] .product-image::before { background: repeating-linear-gradient(0deg,transparent 0 27px,rgba(var(--ink-rgb),.035) 28px,transparent 29px),repeating-linear-gradient(90deg,transparent 0 27px,rgba(var(--ink-rgb),.025) 28px,transparent 29px); }
:root[data-theme="light"] .product-image::after { background: linear-gradient(119deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.1) 16%,transparent 33% 68%,rgba(255,255,255,.16) 82%,transparent 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7),inset 1px 0 rgba(255,255,255,.3); }
:root[data-theme="light"] .product-image:hover { filter: none; box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb),.38),inset 0 -44px 85px rgba(var(--ink-rgb),.05); }

/* Favorite and quick view: milk-glass chips with ink marks; a saved piece fills with ink. */
:root[data-theme="light"] :is(.favorite-button,.quick-view) { border-color: rgba(var(--ink-rgb),.26); color: var(--paper); background: rgba(250,249,246,.84); box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(var(--ink-rgb),.1); }
:root[data-theme="light"] :is(.favorite-button,.quick-view):hover { border-color: var(--paper); background: #fff; filter: none; }
:root[data-theme="light"] .favorite-button[aria-pressed="true"] { border-color: var(--paper); color: var(--paper-hi); background: var(--paper); }
:root[data-theme="light"] .favorite-button[aria-pressed="true"]:hover { background: var(--ink-soft); }

/* Product text in the ink ladder; titles darken to pure black on hover. */
:root[data-theme="light"] .product-brand { color: var(--ink-note); }
:root[data-theme="light"] .product-title:hover { color: #000; }
:root[data-theme="light"] .product-size { color: var(--ink-note); }
:root[data-theme="light"] .product-size i { color: rgba(var(--ink-rgb),.5); }
:root[data-theme="light"] .condition-tag { color: var(--ink-note); }
:root[data-theme="light"] .product-price { color: var(--paper); }

/* Empty state and the shop foot. */
:root[data-theme="light"] .empty-results { color: var(--ink-note); }
:root[data-theme="light"] .shop-bottom { color: var(--ink-note); }
:root[data-theme="light"] :is(.empty-results button,.load-more):hover { border-bottom-color: var(--paper); filter: none; }

/* Drop 01 ground: paper with a faint ink diagonal. */
:root[data-theme="light"] .waitlist-section { background: radial-gradient(ellipse at 78% 50%,rgba(255,255,255,.62),transparent 41%),linear-gradient(130deg,#e8e7e1 0%,#efeee9 59%,#e9e8e2 100%); }
:root[data-theme="light"] .waitlist-section::before { background: repeating-linear-gradient(115deg,transparent 0 51px,rgba(var(--ink-rgb),.035) 52px,transparent 53px 104px); }
:root[data-theme="light"] .waitlist-copy > p:not(.eyebrow) { color: var(--ink-body); }
:root[data-theme="light"] .waitlist-edition { color: var(--ink-note); }
:root[data-theme="light"] .waitlist-edition i { background: rgba(var(--ink-rgb),.45); }

/* Waitlist card: milk glass ticket with an ink edge; the punch holes show the paper behind. */
:root[data-theme="light"] .waitlist-card { border-color: rgba(var(--ink-rgb),.22); background: linear-gradient(145deg,rgba(255,255,255,.86),rgba(246,245,241,.72) 45%,rgba(232,230,224,.8)),rgba(247,246,242,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 24px 60px rgba(var(--ink-rgb),.12); }
:root[data-theme="light"] .waitlist-card::before { border-color: rgba(var(--ink-rgb),.08); }
:root[data-theme="light"] .waitlist-card::after { background: linear-gradient(180deg,transparent,rgba(var(--ink-rgb),.06),transparent); }
:root[data-theme="light"] .waitlist-card-top > span { color: var(--ink-note); }
:root[data-theme="light"] .waitlist-rule { border-top-color: rgba(var(--ink-rgb),.26); }
:root[data-theme="light"] .waitlist-rule i { border-color: rgba(var(--ink-rgb),.38); background: var(--black); }
:root[data-theme="light"] :is(.waitlist-card-index,.waitlist-success-index) { color: var(--ink-note); }
:root[data-theme="light"] .waitlist-card-copy { color: var(--ink-body); }
:root[data-theme="light"] .waitlist-card-serial { color: var(--ink-faint); }

/* Waitlist form: white field with an ink frame, ink submit button, ink checkbox. */
:root[data-theme="light"] .waitlist-email-label { color: var(--ink-note); }
:root[data-theme="light"] .waitlist-input-row { border-color: rgba(var(--ink-rgb),.32); background: rgba(255,255,255,.72); }
:root[data-theme="light"] .waitlist-input-row:hover { border-color: rgba(var(--ink-rgb),.52); }
:root[data-theme="light"] .waitlist-input-row:focus-within { border-color: rgba(var(--ink-rgb),.8); background: #fff; box-shadow: 0 0 0 3px rgba(var(--ink-rgb),.08),0 8px 22px rgba(var(--ink-rgb),.08); }
:root[data-theme="light"] .waitlist-input-row input { color: var(--paper); }
:root[data-theme="light"] .waitlist-input-row input::placeholder { color: var(--ink-faint); }
:root[data-theme="light"] .waitlist-submit { border-color: var(--paper); color: var(--paper-hi); background: var(--paper); }
:root[data-theme="light"] .waitlist-submit:hover { color: #fff; background: #3a3936; box-shadow: 0 6px 18px rgba(var(--ink-rgb),.22); filter: none; }
:root[data-theme="light"] .waitlist-consent { color: var(--ink-note); }
:root[data-theme="light"] .waitlist-consent input { accent-color: var(--paper); }
:root[data-theme="light"] .waitlist-preview-note { color: var(--ink-faint); }

/* Waitlist confirmation: ink ring and check, a quiet ink scan instead of a light sweep. */
:root[data-theme="light"] .waitlist-card.is-confirming { border-color: rgba(var(--ink-rgb),.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(var(--ink-rgb),.1),0 0 40px rgba(var(--ink-rgb),.08),0 24px 60px rgba(var(--ink-rgb),.14); }
:root[data-theme="light"] .waitlist-card.is-complete { border-color: rgba(var(--ink-rgb),.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 0 44px rgba(var(--ink-rgb),.06),0 24px 60px rgba(var(--ink-rgb),.12); }
:root[data-theme="light"] .waitlist-success-copy { color: var(--ink-body); }
:root[data-theme="light"] .waitlist-success-note { color: var(--ink-faint); }
:root[data-theme="light"] .waitlist-checkmark { border-color: rgba(var(--ink-rgb),.4); box-shadow: 0 0 0 7px rgba(var(--ink-rgb),.04),0 0 26px rgba(var(--ink-rgb),.08); }
:root[data-theme="light"] .waitlist-checkmark svg { stroke: var(--paper); }
:root[data-theme="light"] .waitlist-success-ticket { border-color: rgba(var(--ink-rgb),.26); color: var(--ink-soft); }
:root[data-theme="light"] .waitlist-success-ticket i { color: var(--paper); }

/* Phones: the copy sits above the photo, so the paper mist runs from top to bottom. */
@media (max-width: 680px) {
  :root[data-theme="light"] .alpine-atmosphere::after { background: linear-gradient(180deg,rgba(239,238,233,.8),rgba(239,238,233,.56) 42%,rgba(239,238,233,.74) 100%),linear-gradient(90deg,rgba(239,238,233,.36),transparent 78%); }
}

/* ===== Light mode, part 3: gallery, archive, about, closing. ===== */
/* ===== Light mode: gallery, archive, about and closing ("the same archive, printed"). Every rule starts with :root[data-theme="light"]. ===== */

/* Gallery ground: plain paper instead of the dark stage, with a soft paper light kept inside the TV column. */
:root[data-theme="light"] .gallery-section { background: var(--black); }
:root[data-theme="light"] .gallery-column { background: radial-gradient(closest-side at 50% 44%,rgba(255,255,255,.62),rgba(255,255,255,0)); }

/* Gallery copy: body text, brand line and note in the ink ladder. */
:root[data-theme="light"] .gallery-copy > p:not(.eyebrow) { color: var(--ink-body); }
:root[data-theme="light"] .gallery-brand-mark small { color: var(--muted); }
:root[data-theme="light"] .gallery-note { color: var(--muted); }

/* The TV stays a dark object; on paper it casts a softer ink shadow with a short contact shade. */
:root[data-theme="light"] .gallery-tv .tv-shell { filter: drop-shadow(0 3px 3px rgba(var(--ink-rgb),.2)) drop-shadow(0 20px 24px rgba(var(--ink-rgb),.24)); }

/* Channel line under the TV. */
:root[data-theme="light"] .tv-program-line { border-top-color: var(--line); color: var(--muted); }
:root[data-theme="light"] .tv-program-channel { color: var(--ink-note); }

/* Photo orbit: cards keep their photos, the frame turns to ink hairlines and a soft ink shadow. */
:root[data-theme="light"] .orbit-card { background: var(--panel-2); box-shadow: -12px 0 38px rgba(var(--ink-rgb),.26),0 0 0 1px rgba(var(--ink-rgb),.16); }

/* The hub is a paper disc with an ink rim; the stage fades out into paper, kept low so the portraits do not turn milky. */
:root[data-theme="light"] .orbit-hub { background: linear-gradient(180deg,var(--paper-hi) 0,var(--black) 64px,var(--black) 170px); box-shadow: 0 -14px 40px rgba(var(--ink-rgb),.13),inset 0 1px rgba(var(--ink-rgb),.3),inset 0 24px 34px -26px rgba(255,255,255,.9); }
:root[data-theme="light"] .orbit-stage::after { background: linear-gradient(0deg,var(--black) 0,rgba(239,238,233,.82) 20%,rgba(239,238,233,.24) 46%,rgba(239,238,233,0) 72%); }
:root[data-theme="light"] .orbit-hud { color: var(--ink-note); }
:root[data-theme="light"] .orbit-hud .orbit-count { color: var(--ink-soft); }

/* Caption and arrows: ink outline on milk glass, filled with ink on hover. */
:root[data-theme="light"] .gallery-status { color: var(--muted); }
:root[data-theme="light"] .gallery-controls button { border-color: rgba(var(--ink-rgb),.42); background: linear-gradient(145deg,rgba(255,255,255,.6),rgba(230,228,222,.28)); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
:root[data-theme="light"] .gallery-controls button:hover { border-color: var(--paper); color: var(--black); background: var(--paper); box-shadow: 0 6px 16px rgba(var(--ink-rgb),.16); filter: none; }

/* Archive: body copy in ink, the placeholder frame as an ink hairline on a paper panel. */
:root[data-theme="light"] .archive-copy > p:not(.eyebrow) { color: var(--ink-body); }
:root[data-theme="light"] .archive-visual { border-color: var(--line); background: var(--panel); }
:root[data-theme="light"] .archive-visual:has(.archive-photo-slot)::before { background: linear-gradient(90deg,rgba(var(--ink-rgb),.04),transparent 48%),linear-gradient(0deg,rgba(var(--ink-rgb),.08),transparent 36%); }
:root[data-theme="light"] .archive-photo-slot small { color: var(--ink-note); }

/* About: the second headline line in graphite, step numbers and notes in the ink ladder. */
:root[data-theme="light"] .about-title h2 span { color: #777671; }
:root[data-theme="light"] .about-steps article > b { color: var(--muted); }
:root[data-theme="light"] .about-steps p { color: var(--ink-note); }

/* Closing. */
:root[data-theme="light"] .closing-mark { color: var(--muted); }

/* ===== Translation fit for longer German headlines (both themes). ===== */
/* ------------------------------------------------------------------
   Übersetzung DE/EN: Passform der großen Überschriften
   (gilt für hellen und dunklen Modus; gehört ans Ende von styles.css)
   ------------------------------------------------------------------ */

/* Sprühschrift: store.js legt die Buchstaben jedes Worts in eine .spray-word.
   Die Zeile darf nur noch zwischen den Wörtern umbrechen, nie mitten im Wort
   (vorher: "NUR NEU FÜR DI / CH.", "OUT THE / RE."). */
.spray-word { white-space: nowrap; }

/* Abschluss "WIR SEHEN UNS / DA DRAUSSEN.": "DRAUSSEN." ist das längste
   Sprühwort der Seite. Am schmalen Handy (unter ca. 410 px) wird es so weit
   verkleinert, dass es zwischen die Seitenränder passt. Englisch bleibt, wie es ist. */
html[lang="de"] .closing-cta h2 .spray-text { font-size: min(1em, 16vw); }

/* Kopfzeile auf dem Tablet (681 bis 980 px): Der deutsche Spruch neben dem Logo
   ist länger als der englische und schob "TASCHE 0" rechts aus dem Bild.
   Dort läuft er deshalb in zwei Zeilen: GUTE KLEIDUNG. / BESSERE GESCHICHTEN. */
@media (min-width: 681px) and (max-width: 980px) {
  html[lang="de"] .site-header .wordmark small { max-width: calc(21 * (1ch + .11em)); white-space: normal; line-height: 1.35; }
}

/* Leuchtschild: Der Kasten hatte eine feste Breite (118 px, am Handy 91 px).
   Schon "OPEN" ragte darin ein paar Pixel rechts heraus, "OFFEN" mit fünf
   Buchstaben deutlich. Jetzt wächst der Kasten mit dem Wort: Er bleibt rechts
   stehen und wird nach links breiter, die Schriftgröße bleibt in beiden Sprachen
   gleich. Die alte Breite gilt weiter als Mindestmaß.
   text-indent gleicht den Buchstabenabstand hinter dem letzten Buchstaben aus,
   damit das Wort genau in der Mitte des Kastens sitzt. */
.open-sign-section { width: max-content; min-width: 118px; }
.open-sign-word { text-indent: .09em; }
@media (max-width: 680px) {
  .open-sign-section { min-width: 91px; }
}

/* Prinzip "GEFUNDEN. / GETRAGEN. / WIEDER GEFUNDEN.": Die deutschen Wörter sind
   breiter als FOUND. / WORN. und ragten auf Laptop und iPad quer (ab 981 px, dort
   stehen Überschrift und drei Schritte nebeneinander) bis zu 40 px über ihre Spalte;
   der Abstand zu den Schritten schrumpfte auf die Hälfte. Etwas kleiner passt
   jedes Wort in die Spalte. Handy und Tablet hoch (eine Spalte) bleiben unverändert. */
@media (min-width: 981px) {
  html[lang="de"] .about-title h2 { font-size: clamp(46px, 5.4vw, 78px); }
}

/* Galerie "GETRAGEN / DA DRAUSSEN.": Die Zeile darf nicht umbrechen (nowrap) und
   "DA DRAUSSEN." ist gut ein Viertel breiter als "OUT THERE.". Überall, wo Text und
   Fernseher nebeneinander stehen (ab 681 px), lief sie über ihre Spalte und stieß
   an den Fernseher (iPad hoch 820 px: 5 px hinein, iPad quer 1180 px: 3 px davor).
   Auf Deutsch ist die Überschrift dort so viel kleiner, dass sie in der Spalte bleibt. */
@media (min-width: 681px) {
  html[lang="de"] .gallery-copy h2 { font-size: clamp(30px, 4.1vw, 56px); }
}

/* Winter "KALTE LUFT." auf dem schmalen Tablet (681 bis ca. 800 px): Die Überschrift
   hat dort ihre Mindestgröße 57 px und stieß ins Foto daneben, auf Englisch auch
   "NO BACKUP". Die Mindestgröße sinkt auf 46 px; ab ca. 800 px ändert sich nichts. */
@media (min-width: 681px) and (max-width: 980px) {
  .alpine-copy h1 { font-size: clamp(46px, 7.15vw, 105px); }
}

/* Winter "KALTE LUFT.": ist zwei Buchstaben länger als "COLD AIR." und ragte am
   schmalsten Handy (bis 370 px) 10 px über die Textspalte in den Seitenrand. */
@media (max-width: 370px) {
  html[lang="de"] .alpine-copy h1 { font-size: 51px; }
}

/* Brand band under the hero: the labels we carry, one click filters the shop.
   Colours come from the theme tokens, so the light mode follows on its own. */
.brand-marquee { --logo-scale: 1; position: relative; display: flex; align-items: stretch; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--black); }
.brand-marquee-label { position: relative; z-index: 1; display: flex; flex: 0 0 auto; align-items: center; padding: 0 26px 0 var(--gutter); border-right: 1px solid var(--line); color: var(--muted); font: 8px var(--mono); letter-spacing: .17em; white-space: nowrap; }
.brand-marquee-window { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.brand-marquee-track { display: flex; width: max-content; animation: brand-marquee 38s linear infinite; }
.brand-marquee-list { display: flex; margin: 0; padding: 0; list-style: none; }
.brand-marquee-list li { display: flex; align-items: center; }
/* Trenner als gezeichnetes Sternchen (22.10.2026): das Zeichen ✳ zeigte das iPhone als grünes Emoji. */
.brand-marquee-list li::after { width: 13px; height: 13px; flex: none; margin: 0 clamp(26px, 3.4vw, 54px); background: var(--dim); content: ""; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5v17M3.5 12h17M6 6l12 12M18 6 6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5v17M3.5 12h17M6 6l12 12M18 6 6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.zeichen-stern { display: inline-block; width: .9em; height: .9em; vertical-align: -.08em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5v17M3.5 12h17M6 6l12 12M18 6 6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5v17M3.5 12h17M6 6l12 12M18 6 6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.brand-marquee-list a { display: flex; align-items: center; padding: clamp(18px, 2vw, 24px) 0; transition: opacity .3s var(--ease); }
/* Real brand logos, one colour: the filter paints them in the page's paper tone. Heights are set per logo so a wide wordmark does not outweigh a compact mark. */
.brand-marquee-list img { display: block; width: auto; height: calc(var(--logo-h, 40px) * var(--logo-scale)); filter: brightness(0) invert(.91); }
.brand-marquee a[data-brand-link="the-north-face"] img { --logo-h: 46px; }
.brand-marquee a[data-brand-link="stone-island"] img { --logo-h: 46px; }
.brand-marquee a[data-brand-link="fred-perry"] img { --logo-h: 40px; }
.brand-marquee a[data-brand-link="carhartt"] img { --logo-h: 32px; }
.brand-marquee a[data-brand-link="barbour"] img { --logo-h: 28px; }
.brand-marquee a[data-brand-link="arc-teryx"] img { --logo-h: 48px; }
/* „+ VIELE WEITERE MARKEN“ hinter den Logos (22.10.2026): Schrift statt Logo, so hoch wie ein Schriftzug-Logo. */
.brand-marquee-list .brand-marquee-mehr { padding: clamp(18px, 2vw, 24px) 0; color: var(--paper); font: 900 calc(19px * var(--logo-scale)) / 1 var(--display); letter-spacing: .03em; white-space: nowrap; opacity: .91; }
.brand-marquee-plus { margin-right: .4em; color: var(--muted); }
:root[data-theme="light"] .brand-marquee-list img { filter: brightness(0) invert(.07); }
.brand-marquee-list a::after { display: inline-block; align-self: flex-start; margin-left: 8px; color: var(--muted); content: "↗"; font: 12px var(--mono); letter-spacing: 0; vertical-align: top; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
/* With a mouse the script moves the band (.is-eased, easeBrandMarquee in store.js) and brakes it softly on hover; the CSS
   animation is switched off then but keeps its duration, which the script reads as the speed. Without it the band just stops. */
.brand-marquee.is-eased .brand-marquee-track { animation-name: none; will-change: transform; }
.brand-marquee:not(.is-eased):hover .brand-marquee-track,.brand-marquee:not(.is-eased):focus-within .brand-marquee-track { animation-play-state: paused; }
.brand-marquee a:focus-visible { outline-offset: -3px; }
.brand-marquee a:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) {
  .brand-marquee-track:hover a { opacity: .3; }
  .brand-marquee-track:hover a:hover { opacity: 1; }
  .brand-marquee a:hover::after { opacity: 1; transform: none; }
}
@keyframes brand-marquee { to { transform: translateX(-50%); } }
@media (min-width: 681px) and (max-width: 980px) { .brand-marquee { --logo-scale: .86; } }
@media (max-width: 680px) {
  .brand-marquee-label { display: none; }
  .brand-marquee-window { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
  .brand-marquee { --logo-scale: .72; }
  .brand-marquee-list a { padding: 15px 0; }
  .brand-marquee-track { animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation: none; }
  .brand-marquee-list[aria-hidden] { display: none; }
  .brand-marquee-window { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .brand-marquee-window::-webkit-scrollbar { display: none; }
}

/* "BETTER STORIES." sprayed on glass (graffiti-glas.js) left the old opening section and now sits above the three
   steps of the principle; the page opens with the winter section instead. */
.about-section { grid-template-rows: auto 1fr; row-gap: 40px; }
.about-title { grid-row: 1 / span 2; }
.about-graffiti { grid-column: 2; width: min(100%, 640px); margin: 30px 0 0; }
.about-steps { grid-column: 2; grid-row: 2; }
@media (max-width: 980px) {
  .about-section { grid-template-rows: none; }
  .about-title,.about-graffiti,.about-steps { grid-column: auto; grid-row: auto; }
  .about-graffiti { margin: 0; }
}

/* The skier photo from the former "RAUS. DRAUSSEN BLEIBEN." section turns on the photo wheel as card 06, black and white as before. */
.orbit-card img.orbit-photo-mono { filter: grayscale(1) contrast(1.12) brightness(.8); }

/* ===== Merkliste (30.09.2026): Foto je Stück, Tasche direkt aus der Liste, Rückgängig nach dem Entfernen,
   Hinweis bei gesenktem Preis und bei Stücken, die nicht mehr im Shop sind. store.js: renderSaved(). ===== */
.saved-line { display: grid; grid-template-columns: 76px minmax(0,1fr) auto; align-items: start; gap: 15px; padding: 15px 0; border-top: 1px solid var(--line); }
.saved-thumb { position: relative; display: grid; width: 76px; aspect-ratio: 4 / 5; place-items: center; overflow: hidden; padding: 0; border: 1px solid var(--line-soft); background: var(--panel-2); }
.saved-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.saved-thumb .saved-logo { width: 58%; height: auto; opacity: .5; }
button.saved-thumb:hover img { transform: scale(1.05); }
.saved-info { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 5px; padding-top: 1px; }
.saved-brand, .saved-meta { color: var(--muted); font: 8px/1.5 var(--mono); letter-spacing: .08em; }
.saved-name { max-width: 100%; padding: 0; border: 0; color: var(--paper); background: none; text-align: left; font: 500 13px/1.3 var(--sans); overflow-wrap: anywhere; }
button.saved-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.saved-flag { padding: 3px 6px 2px; border: 1px solid currentColor; font: 7px/1.4 var(--mono); letter-spacing: .12em; }
.saved-flag.is-drop { color: var(--paper); background: rgba(232,232,229,.08); }
.saved-flag.is-gone { color: var(--muted); }
.saved-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 5px; }
.saved-action { display: inline-flex; min-height: 30px; align-items: center; gap: 10px; padding: 0 11px; border: 1px solid rgba(232,232,229,.5); color: var(--paper); background: transparent; font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: color .2s, background .2s, border-color .2s; }
.saved-action span { font-size: 12px; }
.saved-action:hover { color: var(--black); background: var(--paper); }
.saved-action.is-done { border-color: var(--line); color: var(--muted); }
.saved-action.is-done:hover { border-color: var(--paper); color: var(--paper); background: transparent; }
.saved-remove, .saved-undo { padding: 0; border: 0; color: #858582; background: none; font: 8px var(--mono); letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; }
.saved-remove:hover { color: var(--paper); }
.saved-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-top: 1px; color: var(--paper); font: 11px var(--mono); white-space: nowrap; }
.saved-price s { color: var(--muted); font-size: 9px; }
.saved-line.is-gone .saved-thumb { filter: grayscale(1); opacity: .45; }
.saved-line.is-gone .saved-name, .saved-line.is-gone .saved-price { color: var(--muted); }
.saved-line.is-gone .saved-price b { font-weight: 400; text-decoration: line-through; }
.saved-line.saved-ghost { grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 13px 0; color: var(--muted); font: 9px/1.6 var(--mono); }
.saved-undo { color: var(--paper); font-size: 9px; }
.saved-foot { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.saved-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; }
.saved-sum b { color: var(--paper); font: 700 20px var(--display); letter-spacing: -.02em; }
.saved-foot .button { width: 100%; }
.saved-empty p { margin: 8px 0 0; }
.saved-empty .saved-empty-hint { color: var(--muted); font-size: 8px; letter-spacing: .04em; }
.saved-empty .button { margin-top: 20px; }

/* Herz in der Detailansicht, neben „In die Tasche“. */
.dialog-buy { display: grid; grid-template-columns: minmax(0,1fr) 46px; gap: 8px; margin: 13px 0 20px; }
.dialog-buy .add-to-bag { width: 100%; margin: 0; }
.dialog-save { display: grid; min-height: 46px; place-items: center; padding: 0; border: 1px solid rgba(235,239,239,.6); color: var(--paper); background: linear-gradient(145deg,rgba(248,250,250,.055),rgba(20,22,23,.14)); box-shadow: inset 0 1px 0 rgba(248,250,250,.12); font-size: 19px; line-height: 1; transition: color .2s, background .2s, border-color .2s; }
.dialog-save:hover { border-color: var(--paper); background: rgba(232,232,229,.1); }
.dialog-save[aria-pressed="true"] { border-color: var(--paper); color: var(--black); background: var(--paper); }

/* Merken fühlt sich an: das Herz springt kurz, fliegt zum Kopf, dort zuckt die Zahl. */
@keyframes heart-pop { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 65% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes saved-bump { 0%, 100% { transform: none; } 40% { transform: scale(1.4); } }
.favorite-button.is-popping > span, .favorite-button.is-popping, .dialog-save.is-popping > span { animation: heart-pop .5s var(--ease); }
.saved-open.is-bumping > span, .saved-open.is-bumping .saved-count { animation: saved-bump .45s var(--ease); }
.heart-flight { position: fixed; z-index: 120; color: var(--paper); font-size: 20px; line-height: 1; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.45); }

@media (max-width: 680px) {
  .saved-line { grid-template-columns: 64px minmax(0,1fr) auto; gap: 12px; }
  .saved-thumb { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .favorite-button.is-popping, .dialog-save.is-popping > span, .saved-open.is-bumping > span, .saved-open.is-bumping .saved-count { animation: none; }
  button.saved-thumb:hover img { transform: none; }
}

:root[data-theme="light"] :is(.saved-brand,.saved-meta,.saved-ghost,.saved-sum,.saved-empty .saved-empty-hint) { color: var(--ink-note); }
:root[data-theme="light"] .saved-remove { color: var(--ink-note); }
:root[data-theme="light"] .saved-remove:hover { color: var(--paper); }
:root[data-theme="light"] .saved-action { border-color: rgba(var(--ink-rgb),.55); }
:root[data-theme="light"] .saved-action.is-done { border-color: rgba(var(--ink-rgb),.2); color: var(--ink-note); }
:root[data-theme="light"] .saved-flag.is-drop { background: rgba(var(--ink-rgb),.06); }
:root[data-theme="light"] .saved-flag.is-gone, :root[data-theme="light"] .saved-line.is-gone :is(.saved-name,.saved-price) { color: var(--ink-faint); }
:root[data-theme="light"] .saved-thumb { border-color: rgba(var(--ink-rgb),.12); background: #e4e2dc; }
:root[data-theme="light"] .dialog-save { border-color: rgba(var(--ink-rgb),.72); background: linear-gradient(145deg,rgba(255,255,255,.6),rgba(230,228,222,.28)); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
:root[data-theme="light"] .dialog-save:hover { border-color: var(--paper); background: #fff; }
:root[data-theme="light"] .dialog-save[aria-pressed="true"] { border-color: var(--paper); color: var(--paper-hi); background: var(--paper); }
:root[data-theme="light"] .heart-flight { text-shadow: 0 2px 10px rgba(255,255,255,.7); }

/* Schrift-Auftritte (30.09.2026): every headline writes itself in its own way, chosen by data-write in index.html.
   store.js splits the text into <w-c> letters or <w-l> lines (own tags, so rules such as ".shop-heading h2 span" never reach them),
   sets .write-ready while waiting and .is-writing while it runs, then takes both away: the resting text carries nothing. */
w-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
w-w { display: inline-block; white-space: nowrap; }
w-c { position: relative; display: inline-block; }
.spray-wait:not(.sprayed) { opacity: 0; }
@keyframes write-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes write-caret { from { opacity: 1; } to { opacity: 0; } }
@keyframes write-caret-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }

/* Small lines: typed, with a block cursor. */
.write-ready:not(.is-writing)[data-write="type"] w-c { opacity: 0; }
.is-writing[data-write="type"] w-c { animation: write-show 1ms calc(var(--write-delay,0ms) + var(--i) * 22ms) both; }
.is-writing[data-write="type"] w-c::after { position: absolute; top: -.1em; bottom: -.1em; left: 100%; width: .62em; background: currentColor; content: ""; opacity: 0; animation: write-caret 22ms steps(1,end) calc(var(--write-delay,0ms) + var(--i) * 22ms) forwards; }
.is-writing[data-write="type"] w-c.is-last::after { animation: write-caret-blink .42s steps(1,end) calc(var(--write-delay,0ms) + var(--i) * 22ms) 3 forwards; }
.alpine-copy .eyebrow { --write-delay: 380ms; }

/* NEUE FUNDE: an arrivals board, every letter spins through random ones and stops left to right. */
[data-write="flap"] w-c { transform-origin: 50% 55%; }
.write-ready:not(.is-writing)[data-write="flap"] w-c { opacity: 0; }
.is-writing[data-write="flap"] w-c { animation: write-flap-settle .5s cubic-bezier(.25,1.6,.5,1) both; }
.is-writing[data-write="flap"] w-c.is-shuffling { -webkit-text-fill-color: transparent; animation: write-flap-spin .11s linear infinite; }
.is-writing[data-write="flap"] w-c.is-shuffling::before { position: absolute; top: 0; right: -.3em; left: -.3em; content: attr(data-r); text-align: center; -webkit-text-fill-color: currentColor; opacity: .62; }
@keyframes write-flap-spin { 0% { transform: perspective(300px) rotateX(-70deg); } 100% { transform: perspective(300px) rotateX(12deg); } }
@keyframes write-flap-settle { 0% { transform: perspective(300px) rotateX(-90deg); } 100% { transform: none; } }

/* DER ERSTE FUND: the signal comes in torn, in colour fringes, and locks. */
.write-ready:not(.is-writing)[data-write="signal"] { opacity: 0; }
.is-writing[data-write="signal"] { animation: write-signal 1s linear both; }
@keyframes write-signal {
  0% { opacity: 0; animation-timing-function: steps(1,end); }
  6% { opacity: 1; clip-path: inset(62% 0 16% 0); transform: translateX(-.08em) skewX(-14deg); text-shadow: .09em 0 rgba(255,45,85,.85),-.09em 0 rgba(0,225,255,.85); animation-timing-function: steps(1,end); }
  13% { clip-path: inset(6% 0 70% 0); transform: translateX(.1em); animation-timing-function: steps(1,end); }
  20% { clip-path: inset(38% 0 34% 0); transform: translateX(-.03em) skewX(10deg); animation-timing-function: steps(1,end); }
  28% { clip-path: inset(0 0 50% 0); transform: none; text-shadow: -.06em 0 rgba(255,45,85,.8),.06em 0 rgba(0,225,255,.8); animation-timing-function: steps(1,end); }
  36% { clip-path: inset(46% 0 0 0); transform: translateX(.05em); animation-timing-function: steps(1,end); }
  45% { opacity: .55; clip-path: inset(-20%); transform: translateX(-.02em) skewX(-4deg); text-shadow: .035em 0 rgba(255,45,85,.7),-.035em 0 rgba(0,225,255,.7); animation-timing-function: steps(1,end); }
  52% { opacity: 1; transform: translateX(.015em); animation-timing-function: ease-out; }
  66% { transform: none; text-shadow: -.015em 0 rgba(255,45,85,.5),.015em 0 rgba(0,225,255,.5); animation-timing-function: steps(1,end); }
  80% { opacity: .8; animation-timing-function: steps(1,end); }
  84% { opacity: 1; animation-timing-function: ease-out; }
  100% { opacity: 1; clip-path: inset(-20%); transform: none; text-shadow: 0 0 0 rgba(255,45,85,0),0 0 0 rgba(0,225,255,0); }
}

/* GETRAGEN / DA DRAUSSEN.: the lines slide up out of a slot, the spray line mists on after them. */
[data-write="rise"] w-l,[data-write="rise"] w-i { display: inline-block; }
.write-ready[data-write="rise"] w-l { clip-path: inset(-.3em -.5em -.04em -.5em); }
.write-ready:not(.is-writing)[data-write="rise"] w-i { transform: translateY(125%); }
.is-writing[data-write="rise"] w-i { animation: write-rise .85s cubic-bezier(.16,1,.3,1) calc(var(--l) * 120ms) both; }
@keyframes write-rise { 0% { transform: translateY(125%) rotate(4deg); } 100% { transform: none; } }
.gallery-copy .spray-text.sprayed:not(.spray-wet) .spray-letter { animation: write-spray-mist .55s cubic-bezier(.2,.7,.3,1) calc(320ms + var(--spray-index,0) * 40ms) both; }
@keyframes write-spray-mist { 0% { opacity: 0; filter: blur(.16em); scale: 1.4; } 55% { opacity: .9; filter: blur(.02em); } 100% { opacity: 1; filter: none; scale: 1; } }

/* Nicht neu.: typed on a typewriter, a little crooked, then "Nur neu für dich." is stamped on. */
[data-write="typewriter"] w-c { translate: 0 var(--j,0em); }
.write-ready:not(.is-writing)[data-write="typewriter"] w-c { opacity: 0; }
.is-writing[data-write="typewriter"] w-c { animation: write-key .14s ease-out calc(var(--i) * 85ms) both; }
.is-writing[data-write="typewriter"] w-c::after { position: absolute; top: .12em; bottom: .02em; left: 100%; width: .055em; margin-left: .04em; background: currentColor; content: ""; opacity: 0; animation: write-caret 85ms steps(1,end) calc(var(--i) * 85ms) forwards; }
.is-writing[data-write="typewriter"] w-c.is-last::after { animation: write-caret-blink .5s steps(1,end) calc(var(--i) * 85ms) 3 forwards; }
@keyframes write-key { 0% { opacity: 0; transform: translateY(.05em) scale(1.08); } 1% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.archive-copy .spray-text.sprayed { animation: write-stamp .5s cubic-bezier(.2,.8,.25,1) calc(var(--n,10) * 85ms + 200ms) both; }
.archive-copy .spray-text.sprayed:not(.spray-wet) .spray-letter { animation: none; }
.archive-copy .spray-text.sprayed::after,.archive-copy .spray-text.sprayed .spray-grain { animation-delay: calc(var(--n,10) * 85ms + 260ms); }
@keyframes write-stamp { 0% { opacity: 0; scale: 1.9; rotate: -7deg; } 55% { opacity: 1; scale: .95; rotate: 1deg; } 78% { scale: 1.02; rotate: -.4deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }

/* GEFUNDEN. GETRAGEN. WIEDER GEFUNDEN.: a bar of the line's own colour wipes across and leaves the word behind. */
[data-write="wipe"] w-l { position: relative; display: inline-block; }
.write-ready:not(.is-writing)[data-write="wipe"] w-i { opacity: 0; }
.is-writing[data-write="wipe"] w-i { animation: write-show 1ms calc(var(--l) * 170ms + 330ms) both; }
.is-writing[data-write="wipe"] w-l::after { position: absolute; top: .08em; right: -.04em; bottom: .02em; left: -.04em; background: currentColor; content: ""; transform: scaleX(0); animation: write-wipe .72s cubic-bezier(.75,0,.2,1) calc(var(--l) * 170ms) both; }
@keyframes write-wipe { 0% { transform: scaleX(0); transform-origin: 0 50%; } 46% { transform: scaleX(1); transform-origin: 0 50%; } 54% { transform: scaleX(1); transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }

/* The three steps below: stretched wide and blurred, they pull together. Only transform, so the text below never moves. */
.write-ready:not(.is-writing)[data-write="track"] { opacity: 0; }
.is-writing[data-write="track"] { transform-origin: 0 60%; animation: write-track .8s cubic-bezier(.2,.7,.2,1) var(--write-delay,0ms) both; }
.about-steps article:nth-child(2) h3 { --write-delay: 130ms; }
.about-steps article:nth-child(3) h3 { --write-delay: 260ms; }
@keyframes write-track { 0% { opacity: 0; transform: scaleX(1.45); filter: blur(4px); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; filter: blur(0); } }

/* WIR SEHEN UNS: the letters jump up in a wave, then "DA DRAUSSEN." is slapped on letter by letter. */
[data-write="wave"] w-c { transform-origin: 50% 100%; }
.write-ready:not(.is-writing)[data-write="wave"] w-c { opacity: 0; }
.is-writing[data-write="wave"] w-c { animation: write-wave .7s cubic-bezier(.2,1.55,.4,1) calc(var(--i) * 38ms) both; }
@keyframes write-wave { 0% { opacity: 0; transform: translateY(.5em) rotate(12deg) scaleY(.55); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.closing-cta .spray-text.sprayed:not(.spray-wet) .spray-letter { animation: write-slap .52s cubic-bezier(.2,1.5,.45,1) calc(var(--n,13) * 38ms + 380ms + var(--spray-index,0) * 55ms) both; }
@keyframes write-slap { 0% { opacity: 0; translate: 0 -.45em; rotate: -16deg; scale: 1.45; } 45% { opacity: 1; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .gallery-copy .spray-text .spray-letter,.archive-copy .spray-text,.archive-copy .spray-text .spray-letter,.closing-cta .spray-text .spray-letter { animation: none !important; }
}

/* KALTE LUFT. / KEIN react to the mouse (startColdAir in store.js). The letters themselves carry no shadow; the shadows
   come from a transparent copy of the same letters behind them (.kalt-schatten), which moves along letter by letter.
   So at rest the headline looks exactly as before, and no letter's blurred shadow lies on its neighbour. */
[data-letters="kalt"] w-seg { position: relative; display: inline-block; }
/* Beim Kopieren nur der Text selbst (in w-src), nicht noch die Buchstaben- und Schattenkopien (24.10.2026). */
w-vis { -webkit-user-select: none; user-select: none; }
[data-letters="kalt"] w-vis:not(.kalt-schatten) { text-shadow: none; }
[data-letters="kalt"] .kalt-schatten { position: absolute; top: 0; left: 0; color: transparent; white-space: nowrap; pointer-events: none; }
[data-letters="kalt"] w-vis:not(.kalt-schatten) w-c { --frost-tone: #bfe3ff; color: color-mix(in srgb, var(--frost-tone) calc(var(--frost, 0) * 60%), currentColor); }
:root[data-theme="light"] [data-letters="kalt"] w-vis:not(.kalt-schatten) w-c { --frost-tone: #3d7bb3; }

/* Kategorie-Reiter (30.09.2026): Jacken, Pullover & Hoodies, Hosen, Shirts, Accessoires. server.mjs zeigt sie immer,
   sobald etwas im Shop steht; wo noch nichts zu haben ist, ist der Reiter blasser (.is-empty).
   Größer als die Markenleiste darunter: erst die Art, dann die Marke. */
.category-row { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 16px 0 12px; border-top: 1px solid var(--line-soft); }
.category-row[hidden] { display: none; }
.category-tab { padding: 3px 0 6px; border: 0; border-bottom: 2px solid transparent; color: #7d7d7a; background: transparent; font: 900 15px/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.category-tab sup { margin-left: 2px; color: #6f6f6c; font: 8px var(--mono); letter-spacing: .04em; }
.category-tab:hover, .category-tab.active { color: var(--paper); border-color: var(--paper); }
.category-tab:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
:root[data-theme="light"] .category-tab { color: var(--ink-note); }
:root[data-theme="light"] .category-tab:hover, :root[data-theme="light"] .category-tab.active { color: var(--paper); border-color: var(--paper); }
:root[data-theme="light"] .category-tab sup { color: var(--ink-faint); }
.category-tab.is-empty, .category-tab.is-empty sup { color: #4f4f4c; }
.category-tab.is-empty:hover, .category-tab.is-empty.active { color: var(--paper); }
:root[data-theme="light"] .category-tab.is-empty, :root[data-theme="light"] .category-tab.is-empty sup { color: var(--ink-faint); }
:root[data-theme="light"] .category-tab.is-empty:hover, :root[data-theme="light"] .category-tab.is-empty.active { color: var(--paper); }
@media (max-width: 680px) {
  .category-row { gap: 4px 18px; padding: 13px 0 9px; }
  .category-tab { font-size: 12px; }
}

/* Galerie-Rad, vierte Runde (30.09.2026): Andocken statt Einrasten.
   - Das native Einrasten (scroll-snap) der dritten Runde hat nach jeder Rad-Raste in der Nähe zurückgezogen; in Chrome kam man
     mit dem Mausrad gar nicht an der Galerie vorbei. Jetzt dockt das Rad an: .gallery-orbit ist sticky und bleibt auf dem Weg
     von oben wie von unten für --orbit-hold an der richtigen Stelle stehen, dann läuft es mit der Seite weiter. Das Stehenbleiben
     rechnet der Browser selbst, kein Skript bewegt die Seite. store.js startOrbitDock() misst nur --orbit-dock-top:
     vordere Kartenoberkante bis Linie unter den Pfeilen mittig unter der Kopfzeile (bei zu niedrigem Fenster knapp darunter).
   - Der Halteweg ist der Leerraum .orbit-dock::after unter dem Rad (Inhalt, kein Innenabstand: sticky läuft nur im Inhalt).
   - Die Galerie darf dafür kein Scroll-Container sein: overflow: clip schneidet wie hidden, ohne einer zu werden. Wer clip
     nicht kennt, behält hidden und bekommt weder Andocken noch Leerraum.
   - Karten ohne backface-visibility und ohne eigenen Beschnitt: die Kombination aus Drehung, Beschnitt mit runden Ecken und
     Maske darüber ist in Safari für kurzes Schwarzflackern bekannt. Das Foto rundet seine Ecken jetzt selbst.
   - Karten weit hinten (.is-far) werden gar nicht gemalt. */
.gallery-section { overflow: hidden; overflow: clip; }
.orbit-dock { --orbit-hold: clamp(140px,26vh,240px); grid-column: 1 / -1; min-width: 0; align-self: stretch; }
@supports (overflow: clip) {
  .orbit-dock::after { display: block; height: var(--orbit-hold); content: ""; }
  .gallery-orbit { position: sticky; top: var(--orbit-dock-top,74px); }
}
.orbit-card { overflow: visible; backface-visibility: visible; -webkit-backface-visibility: visible; will-change: transform; }
.orbit-card img { border-radius: inherit; }
.orbit-card.is-far { visibility: hidden; }
/* Ab ±45° ist eine Karte aus dem Bild (store.js blendet sie beim Drehen passend zum Winkel aus und ein). Ihre innere untere
   Ecke ragte sonst in die Maske und legte links einen dunklen Keil über das Foto bei ±30°. */
.orbit-card.is-out { opacity: 0; pointer-events: none; }
/* Fernseh-Rauschen als fertig gerechnete Kachel (assets/rauschen/crt-static.webp, aus dem bisherigen feTurbulence-SVG in
   doppelter Auflösung gerendert): das SVG baute bei jedem Einschalten des Testbilds ein eigenes Dokument auf und rechnete
   den Filter neu, am Eingang der Galerie ein Hänger von rund 150 ms. Aussehen und Kachelgröße bleiben gleich. */
.crt-static::after { background-image: url("assets/rauschen/crt-static.webp"); }