@layer reset, tokens, base, layout, components, utilities;
@layer tokens {
:root {
--c-void: #000000;
--c-ink: #08080A;
--c-iron: #101013;
--c-steel: #17171B;
--c-graphite: #26262B;
--c-stroke: #606069;
--c-ash: #6E6E76;
--c-smoke: #A8A8B0;
--c-bone: #E8E8EA;
--c-paper: #FFFFFF;
--c-acid: #D8FF3E;
--c-acid-dim: #A8C72F;
--c-signal: #FF3B2F;
--c-signal-dim: #B4372A;
--c-success: #4ADE80;
--c-success-on: #00140A;
--c-warning: #FBBF24;
--c-warning-on: #1A1300;
--c-error: #FF5A52;
--c-error-on: #1A0301;
--c-info: #7DA9FF;
--c-info-on: #01081A;
--c-tier-member: #E8E8EA;
--c-tier-member-plus: #D8FF3E;
--c-rule: rgba(255,255,255,.10);
--c-rule-hi: rgba(255,255,255,.24);
--c-veil: rgba(0,0,0,.55);
--c-veil-deep: rgba(0,0,0,.78);
--c-glass: rgba(8,8,10,.72);
--f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
--f-mono: "Martian Mono", "SFMono-Regular", ui-monospace, monospace;
--t-d1: clamp(3.25rem, 10vw, 8.5rem);
--t-d1-w: 800;
--t-d1-ls: -0.045em;
--t-d1-lh: 0.9;
--t-d2: clamp(2.5rem, 7vw, 5.5rem);
--t-d2-w: 800;
--t-d2-ls: -0.04em;
--t-d2-lh: 0.94;
--t-h1: clamp(2rem, 5vw, 3.5rem);
--t-h1-w: 700;
--t-h1-ls: -0.03em;
--t-h1-lh: 1;
--t-h2: clamp(1.625rem, 3.4vw, 2.5rem);
--t-h2-w: 700;
--t-h2-ls: -0.025em;
--t-h2-lh: 1.08;
--t-h3: clamp(1.25rem, 2.2vw, 1.75rem);
--t-h3-w: 600;
--t-h3-ls: -0.02em;
--t-h3-lh: 1.15;
--t-h4: clamp(1.0625rem, 1.5vw, 1.25rem);
--t-h4-w: 600;
--t-h4-ls: -0.01em;
--t-h4-lh: 1.25;
--t-body: clamp(1rem, 0.98rem + 0.2vw, 1.125rem);
--t-body-w: 400;
--t-body-ls: 0;
--t-body-lh: 1.62;
--t-small: 0.9375rem;
--t-small-w: 400;
--t-small-ls: 0;
--t-small-lh: 1.5;
--t-label: 0.6875rem;
--t-label-w: 500;
--t-label-ls: 0.28em;
--t-label-lh: 1.2;
--m-prose: 62ch;
--m-narrow: 46ch;
--m-wide: 78ch;
--s-0: 0;
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--s-11: 12rem;
--s-gutter: clamp(1.125rem, 4vw, 3.5rem);
--s-section: clamp(4rem, 9vw, 9rem);
--s-bar: 56px;
--r-none: 0;
--r-xs: 2px;
--r-sm: 4px;
--r-pill: 999px;
--b-hair: 1px;
--b-thick: 2px;
--b-block: 4px;
--e-panel: 0 24px 64px rgba(0,0,0,.65);
--e-lift: 0 8px 24px rgba(0,0,0,.45);
--e-focus: 0 0 0 1px #000, 0 0 0 3px #FFFFFF;
--d-instant: 80ms;
--d-fast: 180ms;
--d-base: 280ms;
--d-slow: 500ms;
--d-curtain: 700ms;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-in: cubic-bezier(.7, 0, .84, 0);
--ease-soft: cubic-bezier(.4, 0, .2, 1);
--ar-poster: 2 / 3;
--ar-portrait: 4 / 5;
--ar-square: 1 / 1;
--ar-video: 16 / 9;
--ar-wide: 21 / 9;
--ar-band: 16 / 10;
--g-cols: 6;
--g-gap: clamp(0.75rem, 2vw, 1.5rem);
--g-max: 1560px;
--g-prose: 72ch;
--z-base: 0;
--z-sticky: 100;
--z-rail: 200;
--z-topbar: 800;
--z-grain: 900;
--z-scrim: 1000;
--z-drawer: 1100;
--z-page: 1200;
--z-lightbox: 1300;
--z-toast: 1400;
--z-cookiebar: 1500;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--s-bar) + 1rem);
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul {
margin: 0;
}
ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
img, picture, video, canvas, svg, iframe {
display: block;
max-width: 100%;
}
img, video { height: auto; }
input, button, textarea, select {
font: inherit;
color: inherit;
}
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
outline: none;
box-shadow: var(--e-focus);
border-radius: var(--r-xs);
}
.sr {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
[hidden] { display: none !important; }
}
@layer base {
@font-face {
font-family: "Figtree";
src: url("/assets/fonts/figtree-variable.woff2") format("woff2-variations");
font-weight: 300 900;
font-display: swap;
}
@font-face {
font-family: "Archivo";
src: url("/assets/fonts/archivo-variable.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2192, U+2197, U+2212;
}
@font-face {
font-family: "Archivo Fallback";
src: local("Arial");
size-adjust: 97%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
@font-face {
font-family: "Martian Mono";
src: url("/assets/fonts/martian-mono-variable.woff2") format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
font-family: "Martian Fallback";
src: local("Courier New");
size-adjust: 118%;
ascent-override: 78%;
descent-override: 20%;
line-gap-override: 0%;
}
body {
background: var(--c-void);
color: var(--c-bone);
font-family: var(--f-text);
font-size: var(--t-body);
line-height: var(--t-body-lh);
font-weight: var(--t-body-w);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-height: 100svh;
font-synthesis-weight: none;
}
body.is-locked { overflow: hidden; }
body::after {
content: "";
position: fixed;
inset: 0;
z-index: var(--z-grain);
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
opacity: .045;
mix-blend-mode: screen;
}
svg:not(.knot) { width: 1em; height: 1em; }
.knot { width: 100%; height: auto; }
.t-d1, .t-d2, .t-h1, .t-h2, .t-h3, .t-h4 { color: var(--c-paper); }
.t-d1 { font-size: var(--t-d1); font-weight: var(--t-d1-w); letter-spacing: var(--t-d1-ls); line-height: var(--t-d1-lh); }
.t-d2 { font-size: var(--t-d2); font-weight: var(--t-d2-w); letter-spacing: var(--t-d2-ls); line-height: var(--t-d2-lh); }
.t-h1 { font-size: var(--t-h1); font-weight: var(--t-h1-w); letter-spacing: var(--t-h1-ls); line-height: var(--t-h1-lh); }
.t-h2 { font-size: var(--t-h2); font-weight: var(--t-h2-w); letter-spacing: var(--t-h2-ls); line-height: var(--t-h2-lh); }
.t-h3 { font-size: var(--t-h3); font-weight: var(--t-h3-w); letter-spacing: var(--t-h3-ls); line-height: var(--t-h3-lh); }
.t-h4 { font-size: var(--t-h4); font-weight: var(--t-h4-w); letter-spacing: var(--t-h4-ls); line-height: var(--t-h4-lh); }
.t-small { font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--c-smoke); }
.t-label,
.slate {
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: var(--t-label-w);
letter-spacing: var(--t-label-ls);
line-height: var(--t-label-lh);
text-transform: uppercase;
color: var(--c-smoke);
}
h1 { font-size: var(--t-d2); font-weight: var(--t-d2-w); letter-spacing: var(--t-d2-ls); line-height: var(--t-d2-lh); color: var(--c-paper); }
h2 { font-size: var(--t-h2); font-weight: var(--t-h2-w); letter-spacing: var(--t-h2-ls); line-height: var(--t-h2-lh); color: var(--c-paper); }
h3 { font-size: var(--t-h3); font-weight: var(--t-h3-w); letter-spacing: var(--t-h3-ls); line-height: var(--t-h3-lh); color: var(--c-paper); }
h4 { font-size: var(--t-h4); font-weight: var(--t-h4-w); letter-spacing: var(--t-h4-ls); line-height: var(--t-h4-lh); color: var(--c-paper); }
strong, b { font-weight: 700; color: var(--c-paper); }
::selection { background: var(--c-acid); color: var(--c-void); }
.prose a,
a.link {
color: var(--c-paper);
text-decoration: underline;
text-decoration-color: var(--c-rule-hi);
text-underline-offset: .22em;
text-decoration-thickness: 1px;
transition: text-decoration-color var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft);
}
.prose a:hover,
a.link:hover { text-decoration-color: var(--c-acid); color: var(--c-acid); }
.prose { max-width: var(--m-prose); }
.prose > * + * { margin-block-start: var(--s-5); }
.prose h2 { margin-block-start: var(--s-8); }
.prose h3 { margin-block-start: var(--s-7); }
.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose li + li { margin-block-start: var(--s-2); }
.prose blockquote {
border-inline-start: var(--b-thick) solid var(--c-acid);
padding-inline-start: var(--s-5);
color: var(--c-paper);
font-size: var(--t-h4);
}
.prose hr { border: 0; border-top: 1px solid var(--c-rule); margin-block: var(--s-8); }
.skip {
position: absolute;
inset-inline-start: var(--s-4);
inset-block-start: -100px;
z-index: calc(var(--z-topbar) + 1);
background: var(--c-acid);
color: var(--c-void);
padding: var(--s-3) var(--s-5);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
transition: inset-block-start var(--d-fast) var(--ease-soft);
}
.skip:focus { inset-block-start: var(--s-3); }
}
@layer layout {
.wrap {
width: 100%;
max-width: var(--g-max);
margin-inline: auto;
padding-inline: var(--s-gutter);
}
.wrap--narrow { max-width: 900px; }
.wrap--prose  { max-width: 780px; }
.section { padding-block: var(--s-section); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--ink { background: var(--c-ink); }
.section--iron { background: var(--c-iron); }
.stack > * + * { margin-block-start: var(--flow, var(--s-5)); }
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
align-items: center;
}
.split {
display: flex;
flex-wrap: wrap;
gap: var(--s-5);
align-items: baseline;
justify-content: space-between;
}
.sechead {
display: flex;
flex-wrap: wrap;
gap: var(--s-4) var(--s-6);
align-items: end;
justify-content: space-between;
padding-block-end: var(--s-5);
border-block-end: 1px solid var(--c-rule);
margin-block-end: var(--s-6);
}
.sechead__title { display: grid; gap: var(--s-2); }
.media {
display: block;
position: relative;
aspect-ratio: var(--ar, 16 / 10);
overflow: hidden;
background: var(--c-iron);
}
.media > picture {
position: absolute;
inset: 0;
}
.media > picture > img,
.media > img,
.media > video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--pos, center);
}
.media--contain > picture > img { object-fit: contain; }
.media--free { aspect-ratio: auto; }
img[data-zoom] { cursor: zoom-in; }
.grid6 {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--g-gap);
}
.grid6 > * { grid-column: span 2; }
.grid6 > :first-child:nth-last-child(3n + 2),
.grid6 > :first-child:nth-last-child(3n + 2) + * {
grid-column: span 3;
}
.grid6 > :first-child:nth-last-child(3n + 4),
.grid6 > :first-child:nth-last-child(3n + 4) + *,
.grid6 > :first-child:nth-last-child(3n + 4) + * + *,
.grid6 > :first-child:nth-last-child(3n + 4) + * + * + * {
grid-column: span 3;
}
.grid6 > :first-child:last-child { grid-column: 1 / -1; }
@media (max-width: 1023px) {
.grid6 > * { grid-column: span 3; }
.grid6 > :first-child:nth-last-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
.grid6 > *,
.grid6 > :first-child:nth-last-child(3n + 2),
.grid6 > :first-child:nth-last-child(3n + 2) + *,
.grid6 > :first-child:nth-last-child(3n + 4),
.grid6 > :first-child:nth-last-child(3n + 4) + *,
.grid6 > :first-child:nth-last-child(3n + 4) + * + *,
.grid6 > :first-child:nth-last-child(3n + 4) + * + * + * {
grid-column: 1 / -1;
}
}
.duo {
display: grid;
gap: var(--s-6);
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.duo { grid-template-columns: 1.15fr 1fr; gap: var(--s-8); align-items: start; }
.duo--center { align-items: center; }
.duo--flip > :first-child { order: 2; }
}
.pair {
display: grid;
gap: var(--g-gap);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .pair { grid-template-columns: 1fr 1fr; } }
}
@layer components {
.topbar {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: var(--z-topbar);
height: var(--s-bar);
display: flex;
align-items: center;
gap: var(--s-4);
padding-inline: var(--s-gutter);
background: var(--c-glass);
backdrop-filter: blur(14px) saturate(.6);
-webkit-backdrop-filter: blur(14px) saturate(.6);
border-block-end: 1px solid transparent;
transition: border-color var(--d-base) var(--ease-soft), background var(--d-base) var(--ease-soft);
}
.topbar.is-scrolled {
border-block-end-color: var(--c-rule);
background: rgba(0, 0, 0, .86);
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--s-3);
color: var(--c-paper);
padding-block: var(--s-2);
}
.brand__knot {
width: auto;
height: 26px;
color: var(--c-paper);
transition: transform var(--d-fast) var(--ease-soft);
}
.brand:hover .brand__knot { transform: translateY(-1px); }
.brand__word {
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: .3em;
text-transform: uppercase;
}
.onair {
display: none;
align-items: center;
gap: var(--s-2);
margin-inline: auto;
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: .26em;
text-transform: uppercase;
color: var(--c-smoke);
}
@media (min-width: 700px) { .onair { display: inline-flex; } }
.onair__dot {
width: 7px; height: 7px;
border-radius: var(--r-pill);
background: var(--c-signal-dim);
flex: none;
}
.onair[data-live="true"] { color: var(--c-paper); }
.onair[data-live="true"] .onair__dot {
background: var(--c-signal);
animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 59, 47, .45); }
50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(255, 59, 47, 0); }
}
@media (prefers-reduced-motion: reduce) {
.onair[data-live="true"] .onair__dot { animation: none; opacity: 1; box-shadow: none; }
}
.topnav { display: none; margin-inline-start: auto; }
@media (min-width: 1024px) {
.topnav { display: flex; gap: var(--s-6); align-items: center; }
.onair { margin-inline: 0 auto; padding-inline-start: var(--s-6); }
}
.topnav a {
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-smoke);
padding-block: var(--s-2);
position: relative;
transition: color var(--d-fast) var(--ease-soft);
}
.topnav a::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
height: 1px;
background: var(--c-acid);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--d-base) var(--ease-out);
}
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--c-paper); }
.topnav a:hover::after, .topnav a[aria-current="page"]::after { transform: scaleX(1); }
.topact {
display: flex;
align-items: center;
gap: var(--s-3);
margin-inline-start: auto;
}
@media (min-width: 1024px) { .topact { margin-inline-start: var(--s-6); } }
.iconbtn {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
color: var(--c-paper);
position: relative;
}
.iconbtn svg { width: 20px; height: 20px; }
.cartcount {
position: absolute;
inset-block-start: 4px;
inset-inline-end: 2px;
min-width: 16px;
height: 16px;
padding-inline: 4px;
display: none;
place-items: center;
background: var(--c-acid);
color: var(--c-void);
font-family: var(--f-mono);
font-size: 9px;
font-weight: 700;
border-radius: var(--r-pill);
}
.cartcount[data-n]:not([data-n="0"]) { display: grid; }
.burger {
display: inline-grid;
place-content: center;
justify-items: center;
width: 44px; height: 44px;
gap: 5px;
grid-auto-rows: 2px;
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger span {
display: block;
width: 22px; height: 2px;
background: var(--c-paper);
transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast) var(--ease-soft);
}
body.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.scrim {
position: fixed;
inset: 0;
z-index: var(--z-scrim);
background: var(--c-veil-deep);
opacity: 0;
visibility: hidden;
transition: opacity var(--d-base) var(--ease-soft), visibility 0s var(--d-base);
}
body.nav-open .scrim,
body.cart-open .scrim {
opacity: 1;
visibility: visible;
transition: opacity var(--d-base) var(--ease-soft);
}
.drawer {
position: fixed;
inset: 0;
z-index: var(--z-drawer);
background: var(--c-ink);
display: flex;
flex-direction: column;
padding: var(--s-4) var(--s-gutter) var(--s-7);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out), visibility 0s var(--d-slow);
overflow-y: auto;
overscroll-behavior: contain;
}
body.nav-open .drawer {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.drawer__top {
display: flex;
align-items: center;
justify-content: space-between;
min-height: calc(var(--s-bar) - var(--s-4));
margin-block-end: var(--s-7);
}
.drawer__list { display: grid; gap: var(--s-1); }
.drawer__list a {
display: grid;
gap: 2px;
padding-block: var(--s-4);
border-block-end: 1px solid var(--c-rule);
color: var(--c-paper);
font-size: var(--t-h2);
font-weight: 700;
letter-spacing: var(--t-h2-ls);
line-height: 1.05;
transition: color var(--d-fast) var(--ease-soft), padding-inline-start var(--d-base) var(--ease-out);
}
.drawer__list a:hover { color: var(--c-acid); padding-inline-start: var(--s-2); }
.drawer__list .sub {
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
font-weight: 400;
}
.drawer__foot {
margin-block-start: auto;
padding-block-start: var(--s-7);
display: grid;
gap: var(--s-3);
font-size: var(--t-small);
color: var(--c-smoke);
}
.no-js .drawer { position: static; opacity: 1; visibility: visible; transform: none; }
.foot {
background: var(--c-void);
border-block-start: 1px solid var(--c-rule);
padding-block: var(--s-8) var(--s-6);
}
.foot__lockup {
display: flex;
justify-content: center;
padding-block-end: var(--s-8);
}
.foot__lockup svg { height: clamp(72px, 12vw, 132px); width: auto; color: var(--c-paper); opacity: .9; }
.foot__grid {
display: grid;
gap: var(--s-6) var(--s-5);
grid-template-columns: 1fr;
}
@media (min-width: 560px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot h2 {
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
margin-block-end: var(--s-3);
}
.foot__grid a,
.foot__grid span {
display: block;
min-height: 32px;          
padding-block: 6px;
font-size: var(--t-small);
color: var(--c-bone);
}
.foot__grid a { transition: color var(--d-fast) var(--ease-soft); }
.foot__grid a:hover { color: var(--c-acid); }
.nap { display: grid; gap: var(--s-2); }
.nap a, .nap span {
display: flex;
align-items: start;
gap: var(--s-2);
min-width: 0;
}
.nap a > span, .nap > span { min-width: 0; overflow-wrap: anywhere; }
.nap svg { width: 14px; height: 14px; flex: none; margin-block-start: 4px; color: var(--c-smoke); }
.social { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.social a {
display: grid;
place-items: center;
width: 44px; height: 44px;
border: 1px solid var(--c-stroke);
color: var(--c-bone);
transition: border-color var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-soft);
}
.social a:hover { border-color: var(--c-acid); color: var(--c-acid); transform: translateY(-1px); }
.social svg { width: 18px; height: 18px; }
.foot__legal {
margin-block-start: var(--s-8);
padding-block-start: var(--s-5);
border-block-start: 1px solid var(--c-rule);
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
justify-content: space-between;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--c-ash);
}
.foot__legal a { color: var(--c-ash); }
.foot__legal a:hover { color: var(--c-smoke); }
}
@layer components {
.hero {
position: relative;
min-height: 100svh;
display: grid;
align-items: end;
padding: calc(var(--s-bar) + 40px) var(--s-gutter) var(--hero-pad-b);
overflow: hidden;
isolation: isolate;
background: var(--c-void);
--hero-pad-b: clamp(30px, 7vh, 74px);
}
.hero__bed { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.5s var(--ease-out);
}
.hero__slide.is-on { opacity: 1; }
.hero__slide video,
.hero__slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: none;
transform: none;
}
.hero__bed::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.26) 40%, rgba(0,0,0,.97) 100%);
}
.hero__haze {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(115% 78% at 50% 40%, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 58%),
radial-gradient(125% 105% at 50% 48%, rgba(0,0,0,0) 46%, rgba(0,0,0,.50) 100%),
linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 54%, rgba(0,0,0,.88) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.slate {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 16px;
padding-block-end: 9px;
margin-block-end: 14px;
border-block-end: 1px solid var(--c-rule-hi);
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--c-paper);
min-height: 28px;
}
a.slate { text-decoration: none; }
.slate__id { font-weight: 600; }
.slate .sep { color: var(--c-ash); }
.slate__meta { color: var(--c-smoke); font-weight: 300; display: inline-flex; align-items: center; gap: 6px; }
.slate__cta {
margin-inline-start: auto;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--c-smoke);
transition: color var(--d-fast) var(--ease-soft);
}
.slate__cta svg { width: 11px; height: 11px; }
a.slate:hover .slate__cta { color: var(--c-paper); }
.caret {
display: inline-block;
width: 7px;
height: 11px;
background: var(--c-paper);
animation: caret 1.6s steps(1, end) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.marquee {
display: flex;
overflow: hidden;
user-select: none;
width: calc(100% + var(--s-gutter) * 2);
margin: 0 0 26px calc(var(--s-gutter) * -1);
-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%);
}
.marquee__run {
display: flex;
flex-shrink: 0;
align-items: center;
gap: .42em;
padding-inline-end: .42em;
font-family: var(--f-marq);
font-weight: 700;
font-size: clamp(38px, 9.5vw, 122px);
line-height: 1.06;
letter-spacing: 0;
font-kerning: normal;
text-transform: uppercase;
white-space: nowrap;
color: var(--c-paper);
animation: slide 38s linear infinite;
}
.marquee__run i {
font-family: var(--f-display);
font-style: normal;
font-weight: 400;
color: var(--c-ash);
font-size: .42em;
transform: translateY(-.08em);
}
@keyframes slide { to { transform: translateX(-100%); } }
.marquee:hover .marquee__run { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.marquee__run { animation: none; }
.marquee { -webkit-mask-image: none; mask-image: none; }
.caret { animation: none; }
}
.hero__foot {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 26px;
border-block-start: 1px solid var(--c-rule);
padding-block-start: 18px;
}
.hero__claim {
max-width: 38ch;
font-size: clamp(14px, 1.6vw, 17px);
line-height: 1.55;
color: var(--c-smoke);
}
.hero__claim strong { color: var(--c-paper); font-weight: 600; }
.ticks { display: flex; gap: 0; align-items: center; margin-inline-start: -5px; }
.ticks button {
width: 44px;
height: 44px;            
display: grid;
place-content: center;
position: relative;
}
.ticks button::before {
content: "";
display: block;
width: 34px;
height: 2px;
background: rgba(255,255,255,.22);
transition: background var(--d-slow) var(--ease-soft);
}
.ticks button[aria-selected="true"]::before { background: var(--c-paper); }
.hero > .ticks {
position: absolute;
inset-inline-start: var(--s-gutter);
inset-block-end: calc(var(--hero-pad-b) - 26px);
z-index: 3;
}
.heroplay {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
z-index: 4;
display: none;
align-items: center;
gap: 11px;
padding: 13px 20px;
border: 1px solid var(--c-rule-hi);
background: rgba(0, 0, 0, .5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--c-paper);
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: .2em;
text-transform: uppercase;
}
.heroplay svg { width: 12px; height: 12px; }
.hero.is-blocked .heroplay { display: inline-flex; }
.scrollcue {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-ash);
}
.scrollcue svg { width: 12px; height: 12px; animation: nudge 2.6s var(--ease-soft) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .scrollcue svg { animation: none; transform: none; } }
@media (max-width: 699px) {
.slate { font-size: 8px; letter-spacing: .1em; gap: 0 10px; }
.slate__cta { margin-inline-start: 0; flex-basis: 100%; padding-block-start: 4px; }
.hero__foot { flex-direction: column; align-items: flex-start; }
.hero > .ticks { inset-block-end: 4px; }
.ticks button::before { width: 24px; }
}
.phero {
padding-block: calc(var(--s-bar) + var(--s-8)) var(--s-7);
border-block-end: 1px solid var(--c-rule);
}
.phero__inner { display: grid; gap: var(--s-4); }
.phero__sub { color: var(--c-smoke); max-width: 58ch; }
}
@layer components {
.hero { grid-template-columns: minmax(0, 1fr); }
.hero__inner { min-width: 0; max-width: 100%; }
}
@layer components {
.hero__foot { padding-block-end: 22px; }
@media (max-width: 699px) { .hero__foot { padding-block-end: 30px; } }
}
@layer components {
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: 48px;
padding: var(--s-3) var(--s-5);
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
border: 1px solid transparent;
transition:
background var(--d-fast) var(--ease-soft),
color var(--d-fast) var(--ease-soft),
border-color var(--d-fast) var(--ease-soft),
transform var(--d-fast) var(--ease-soft);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
transform: none;
}
.btn--primary { background: var(--c-acid); color: var(--c-void); }
.btn--primary:hover { background: var(--c-acid-dim); }
.btn--ghost { border-color: var(--c-stroke); color: var(--c-paper); }
.btn--ghost:hover { border-color: var(--c-paper); background: rgba(255, 255, 255, .04); }
.btn--solid { background: var(--c-paper); color: var(--c-void); }
.btn--solid:hover { background: var(--c-bone); }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: var(--s-2) var(--s-4); }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn__label { opacity: .4; }
.spinner {
width: 14px; height: 14px;
border: 1.5px solid currentColor;
border-top-color: transparent;
border-radius: var(--r-pill);
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
.arrowlink {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: 44px;
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-paper);
padding-block: var(--s-2);
}
.arrowlink svg { width: 12px; height: 12px; transition: transform var(--d-base) var(--ease-out); }
.arrowlink:hover { color: var(--c-acid); }
.arrowlink:hover svg { transform: translate(2px, -2px); }
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
font-family: var(--f-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
border: 1px solid var(--c-stroke);
color: var(--c-smoke);
}
.badge--acid { background: var(--c-acid); border-color: var(--c-acid); color: var(--c-void); }
.badge--live { background: var(--c-signal); border-color: var(--c-signal); color: var(--c-paper); }
.badge--plus { border-color: var(--c-acid); color: var(--c-acid); }
.card {
position: relative;
display: block;
background: var(--c-iron);
overflow: hidden;
}
.card__media { --ar: var(--ar-band); }
.card__veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.82) 100%);
transition: opacity var(--d-base) var(--ease-soft);
pointer-events: none;
}
.card:hover .card__veil { opacity: .78; }
.card__body {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
padding: var(--s-5);
display: grid;
gap: var(--s-2);
z-index: 1;
}
.card__title {
transition: transform var(--d-base) var(--ease-out);
}
.card__title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.card__body .platforms { position: relative; z-index: 3; }
.card:hover .card__title { transform: translateY(-2px); }
.card__media img { transition: transform var(--d-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) {
.card:hover .card__media img,
.card:hover .card__title { transform: none; }
}
.card--portrait .card__media { --ar: var(--ar-portrait); }
.card--poster .card__media { --ar: var(--ar-poster); }
.card--square .card__media { --ar: var(--ar-square); }
.card--wide .card__media { --ar: var(--ar-wide); }
.index { border-block-start: 1px solid var(--c-rule); }
.index li,
.index__row {
display: flex;
align-items: center;
gap: var(--s-4);
justify-content: space-between;
min-height: 56px;
padding-inline: var(--s-3);
border-block-end: 1px solid var(--c-rule);
color: var(--c-bone);
position: relative;
transition: background var(--d-fast) var(--ease-soft), padding-inline-start var(--d-base) var(--ease-out);
}
.index a.index__row:hover { background: rgba(255,255,255,.03); padding-inline-start: var(--s-5); color: var(--c-paper); }
.index a.index__row::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 2px;
background: var(--c-acid);
transform: scaleY(0);
transition: transform var(--d-base) var(--ease-out);
}
.index a.index__row:hover::before { transform: scaleY(1); }
.index ol { list-style: none; padding: 0; margin: 0; counter-reset: idx; }
.ticker {
border-block: 1px solid var(--c-rule);
overflow: hidden;
padding-block: var(--s-4);
background: var(--c-void);
}
.ticker__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ticker__run { display: flex; align-items: center; }
.ticker__run span {
padding-inline: var(--s-6);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
white-space: nowrap;
}
.ticker__run b { color: var(--c-paper); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }
.knot { color: var(--c-paper); }
.knot--trace path {
fill: none;
stroke: var(--c-paper);
stroke-width: 14;
stroke-dasharray: var(--len, 9000);
stroke-dashoffset: var(--len, 9000);
}
.knot--trace.is-in path {
animation: trace var(--d-curtain) var(--ease-out) forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; fill: var(--c-paper); } }
@media (prefers-reduced-motion: reduce) {
.knot--trace path { stroke-dashoffset: 0; fill: var(--c-paper); animation: none; }
}
.field { display: grid; gap: var(--s-2); }
.field label {
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
}
.field .req { color: var(--c-acid); }
.input,
.field input,
.field textarea,
.field select {
width: 100%;
min-height: 48px;
padding: var(--s-3) var(--s-4);
background: var(--c-steel);
border: 1px solid var(--c-stroke);
color: var(--c-paper);
font-size: var(--t-body);
transition: border-color var(--d-fast) var(--ease-soft), background var(--d-fast) var(--ease-soft);
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-ash); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--c-smoke); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-paper); }
.field[data-state="error"] input,
.field[data-state="error"] textarea,
.field[data-state="error"] select { border-color: var(--c-error); }
.field__err {
display: none;
align-items: center;
gap: 6px;
font-size: var(--t-small);
color: var(--c-error);
}
.field[data-state="error"] .field__err { display: flex; }
.field__err svg { width: 14px; height: 14px; flex: none; }
.field__hint { font-size: var(--t-small); color: var(--c-ash); }
.check {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s-3);
align-items: start;
cursor: pointer;
font-size: var(--t-small);
color: var(--c-smoke);
}
.check input {
width: 24px; height: 24px;
min-height: 0;
margin-block-start: 0;
accent-color: var(--c-acid);
padding: 0;
}
.formgrid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) {
.formgrid--2 { grid-template-columns: 1fr 1fr; }
.formgrid .span2 { grid-column: 1 / -1; }
}
.formnote { font-size: var(--t-small); color: var(--c-ash); }
.formmsg {
display: grid;
gap: var(--s-3);
padding: var(--s-5);
border: 1px solid var(--c-rule);
background: var(--c-iron);
}
.formmsg--ok { border-color: var(--c-success); }
.formmsg--ko { border-color: var(--c-error); }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.honey input { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }
.lightbox {
position: fixed;
inset: 0;
z-index: var(--z-lightbox);
display: grid;
grid-template-rows: auto 1fr auto;
background: rgba(0, 0, 0, .96);
opacity: 0;
visibility: hidden;
transition: opacity var(--d-base) var(--ease-soft), visibility 0s var(--d-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--d-base) var(--ease-soft); }
.lightbox__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s-3) var(--s-gutter);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
}
.lightbox__stage { display: grid; place-items: center; padding: var(--s-4); overflow: hidden; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__nav { display: flex; justify-content: center; gap: var(--s-4); padding-block-end: var(--s-6); }
.lightbox__nav button {
width: 48px; height: 48px;
display: grid; place-items: center;
border: 1px solid var(--c-stroke);
color: var(--c-paper);
}
.lightbox__nav button:hover { border-color: var(--c-paper); }
.toasts {
position: fixed;
inset-block-end: var(--s-5);
inset-inline-end: var(--s-5);
z-index: var(--z-toast);
display: grid;
gap: var(--s-2);
max-width: min(380px, calc(100vw - 2rem));
pointer-events: none;
}
.toast {
display: flex;
align-items: start;
gap: var(--s-3);
padding: var(--s-4);
background: var(--c-steel);
border: 1px solid var(--c-stroke);
color: var(--c-paper);
font-size: var(--t-small);
pointer-events: auto;
animation: toastin var(--d-base) var(--ease-out);
}
.toast--ok { border-color: var(--c-success); }
.toast--ko { border-color: var(--c-error); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.cookiebar {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
z-index: var(--z-cookiebar);
background: var(--c-ink);
border-block-start: 1px solid var(--c-rule);
padding: var(--s-5) var(--s-gutter);
}
.cookiebar[hidden] { display: none; }
.cookiebar__inner {
max-width: var(--g-max);
margin-inline: auto;
display: grid;
gap: var(--s-4);
align-items: center;
}
@media (min-width: 900px) { .cookiebar__inner { grid-template-columns: 1fr auto; } }
.cookiebar p { font-size: var(--t-small); color: var(--c-smoke); max-width: 72ch; }
.cookiebar .cluster { gap: var(--s-2); }
@media (max-width: 767px) {
.cookiebar { padding: var(--s-3) var(--s-gutter); }
.cookiebar__inner { gap: var(--s-3); }
.cookiebar p { font-size: 13px; line-height: 1.45; }
.cookiebar .cluster { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-2); }
.cookiebar .btn { min-height: 44px; padding-inline: var(--s-3); font-size: 10px; }
}
.locked {
position: relative;
border: 1px solid var(--c-rule);
background: var(--c-iron);
padding: var(--s-6);
display: grid;
gap: var(--s-4);
overflow: hidden;
}
.locked__preview { display: grid; gap: var(--s-2); }
.locked__fake {
display: grid;
gap: var(--s-2);
filter: blur(5px);
opacity: .45;
user-select: none;
pointer-events: none;
}
.locked__fake span {
height: 14px;
background: linear-gradient(90deg, var(--c-graphite), var(--c-steel));
}
.locked__cta {
display: grid;
gap: var(--s-3);
justify-items: start;
padding-block-start: var(--s-4);
border-block-start: 1px solid var(--c-rule);
}
.locked__lock { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-acid); }
.locked__lock svg { width: 16px; height: 16px; }
.crumbs {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
align-items: center;
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--c-ash);
}
.crumbs a { color: var(--c-smoke); }
.crumbs a:hover { color: var(--c-paper); }
.crumbs [aria-current] { color: var(--c-paper); }
.empty {
display: grid;
gap: var(--s-4);
justify-items: center;
text-align: center;
padding: var(--s-9) var(--s-5);
border: 1px dashed var(--c-stroke);
color: var(--c-smoke);
}
.empty svg { width: 56px; height: 56px; color: var(--c-graphite); }
.acc { border-block-start: 1px solid var(--c-rule); }
.acc details { border-block-end: 1px solid var(--c-rule); }
.acc summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: 56px;
padding-block: var(--s-3);
cursor: pointer;
list-style: none;
color: var(--c-paper);
font-weight: 600;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
content: "+";
font-family: var(--f-mono);
color: var(--c-smoke);
flex: none;
}
.acc details[open] summary::after { content: "–"; }
.acc details[open] { background: var(--c-ink); }
.acc__body { padding-block: 0 var(--s-5); color: var(--c-smoke); font-size: var(--t-small); max-width: 68ch; }
}
@layer components {
.wa {
position: fixed;
inset-block-end: var(--s-5);
inset-inline-end: var(--s-5);
z-index: calc(var(--z-toast) - 1);
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: 52px;
padding-inline: var(--s-4);
background: var(--c-acid);
color: var(--c-void);
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
box-shadow: var(--e-lift);
transition: background var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-soft);
}
.wa:hover { background: var(--c-acid-dim); transform: translateY(-1px); }
.wa svg { width: 20px; height: 20px; }
@media (max-width: 559px) {
.wa { min-height: 52px; width: 52px; padding-inline: 0; justify-content: center; }
.wa__label { display: none; }
}
body:has(.cookiebar:not([hidden])) .wa { inset-block-end: calc(var(--s-5) + 7rem); }
@media (min-width: 900px) {
body:has(.cookiebar:not([hidden])) .wa { inset-block-end: calc(var(--s-5) + 5rem); }
}
}
@layer components {
.railpage { display: grid; gap: var(--s-6); }
@media (min-width: 768px) {
.railpage { grid-template-columns: 190px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
}
.rail {
display: grid;
gap: var(--s-1);
position: sticky;
inset-block-start: calc(var(--s-bar) + var(--s-4));
}
@media (max-width: 767px) {
.rail {
position: static;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 0;
border: 1px solid var(--c-stroke);
}
}
.rail a {
display: flex;
align-items: center;
gap: var(--s-3);
min-height: 48px;
padding-inline: var(--s-3);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
position: relative;
transition: color var(--d-fast) var(--ease-soft);
}
@media (max-width: 767px) { .rail a { justify-content: center; } .rail a + a { border-inline-start: 1px solid var(--c-stroke); } }
.rail a::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 2px;
background: var(--c-acid);
transform: scaleY(0);
transition: transform var(--d-base) var(--ease-out);
}
@media (max-width: 767px) {
.rail a::before { inset-block: auto 0; inset-inline: 0; width: auto; height: 2px; transform: scaleX(0); }
.rail a[aria-current="page"]::before { transform: scaleX(1); }
}
.rail a:hover { color: var(--c-paper); }
.rail a[aria-current="page"] { color: var(--c-paper); }
@media (min-width: 768px) { .rail a[aria-current="page"]::before { transform: scaleY(1); } }
.rail__n { color: var(--c-ash); margin-inline-start: auto; }
@media (max-width: 767px) { .rail__n { display: none; } }
.artist__hero { --ar: var(--ar-wide); }
@media (max-width: 700px) { .artist__hero { --ar: var(--ar-portrait); } }
.artist__meta {
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-5);
align-items: center;
padding-block: var(--s-4);
border-block-end: 1px solid var(--c-rule);
}
.platforms { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.platforms a {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: 44px;
padding-inline: var(--s-4);
border: 1px solid var(--c-stroke);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-bone);
transition: border-color var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-soft);
}
.platforms a:hover { border-color: var(--c-acid); color: var(--c-acid); transform: translateY(-1px); }
.platforms svg { width: 16px; height: 16px; }
.facade {
position: relative;
width: 100%;
aspect-ratio: var(--ar, 16 / 9);
display: grid;
place-items: center;
background: var(--c-iron);
border: 1px solid var(--c-rule);
overflow: hidden;
cursor: pointer;
}
.facade--audio { aspect-ratio: auto; min-height: 120px; }
.facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.facade__btn {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-5);
border: 1px solid var(--c-paper);
background: rgba(0, 0, 0, .6);
color: var(--c-paper);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
transition: background var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft), border-color var(--d-fast) var(--ease-soft);
}
.facade:hover .facade__btn { background: var(--c-acid); border-color: var(--c-acid); color: var(--c-void); }
.facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.facade__note {
position: absolute;
inset-block-end: var(--s-3);
inset-inline: var(--s-4);
z-index: 1;
font-size: 11px;
color: var(--c-ash);
text-align: center;
}
.product { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
.product { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-8); align-items: start; }
}
.product__gallery { display: grid; gap: var(--s-3); }
.product__main { --ar: var(--ar-portrait); }
.product__thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.product__thumbs button {
width: 74px;
border: 1px solid transparent;
padding: 0;
transition: border-color var(--d-fast) var(--ease-soft);
}
.product__thumbs button[aria-pressed="true"] { border-color: var(--c-acid); }
.product__thumbs .media { --ar: var(--ar-square); }
.product__side { display: grid; gap: var(--s-5); position: sticky; inset-block-start: calc(var(--s-bar) + var(--s-5)); }
@media (max-width: 899px) { .product__side { position: static; } }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.price__now { font-family: var(--f-mono); font-size: var(--t-h3); font-weight: 600; letter-spacing: -.04em; color: var(--c-paper); }
.price__was { font-family: var(--f-mono); font-size: var(--t-small); color: var(--c-ash); text-decoration: line-through; }
.price__note { font-size: var(--t-small); color: var(--c-smoke); }
.sizes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sizes button {
min-width: 56px;
min-height: 48px;
padding-inline: var(--s-3);
border: 1px solid var(--c-stroke);
color: var(--c-bone);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: .12em;
transition: background var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft), border-color var(--d-fast) var(--ease-soft);
}
.sizes button:hover { border-color: var(--c-paper); }
.sizes button[aria-pressed="true"] { background: var(--c-paper); color: var(--c-void); border-color: var(--c-paper); }
.sizes button[aria-disabled="true"] {
color: var(--c-ash);
border-color: var(--c-graphite);
text-decoration: line-through;
cursor: not-allowed;
}
.sizes[data-state="error"] button { border-color: var(--c-error); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-stroke); }
.qty button { width: 48px; height: 48px; display: grid; place-items: center; color: var(--c-paper); }
.qty button:hover { background: rgba(255,255,255,.05); }
.qty output { min-width: 44px; text-align: center; font-family: var(--f-mono); }
.cart { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .cart { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); align-items: start; } }
.cartrow {
display: grid;
grid-template-columns: 88px minmax(0, 1fr) auto;
gap: var(--s-4);
align-items: center;
padding-block: var(--s-4);
border-block-end: 1px solid var(--c-rule);
}
.cartrow .media { --ar: var(--ar-square); }
.cartrow.is-updating { opacity: .55; pointer-events: none; }
.summary {
display: grid;
gap: var(--s-3);
padding: var(--s-5);
border: 1px solid var(--c-rule);
background: var(--c-iron);
position: sticky;
inset-block-start: calc(var(--s-bar) + var(--s-5));
}
@media (max-width: 899px) { .summary { position: static; } }
.summary__row { display: flex; justify-content: space-between; gap: var(--s-4); font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: -.03em; }
.summary__row--total { padding-block-start: var(--s-3); border-block-start: 1px solid var(--c-rule); font-size: var(--t-h4); color: var(--c-paper); }
.summary__row--sconto { color: var(--c-acid); }
.meter { display: grid; gap: var(--s-2); }
.meter__bar { height: 3px; background: var(--c-graphite); overflow: hidden; }
.meter__fill { height: 100%; width: 0; background: var(--c-acid); transition: width var(--d-slow) var(--ease-out); }
.meter__text { font-size: var(--t-small); color: var(--c-smoke); }
.meter.is-reached .meter__text { color: var(--c-acid); }
.plantoggle {
display: inline-flex;
border: 1px solid var(--c-stroke);
}
.plantoggle button {
min-height: 48px;
padding-inline: var(--s-5);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
transition: background var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft);
}
.plantoggle button[aria-pressed="true"] { background: var(--c-paper); color: var(--c-void); }
.plans { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .plans { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.plan {
display: grid;
gap: var(--s-5);
align-content: start;
padding: var(--s-6);
border: 1px solid var(--c-rule);
background: var(--c-iron);
}
.plan--plus { border-color: var(--c-acid); background: var(--c-ink); }
.plan__price { display: flex; align-items: baseline; gap: var(--s-2); }
.plan__price b { font-family: var(--f-mono); font-size: var(--t-h1); font-weight: 700; letter-spacing: -.05em; color: var(--c-paper); }
.plan__price span { font-family: var(--f-mono); font-size: var(--t-label); color: var(--c-smoke); }
.plan ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); align-items: start; font-size: var(--t-small); color: var(--c-bone); }
.plan li svg { width: 16px; height: 16px; margin-block-start: 3px; color: var(--c-acid); }
.plan li.is-off { color: var(--c-ash); }
.plan li.is-off svg { color: var(--c-graphite); }
.tbd,
.plan__price b.tbd {
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-warning);
border: 1px dashed var(--c-warning);
padding: 4px 8px;
overflow-wrap: anywhere;
max-width: 100%;
}
.plan__price { flex-wrap: wrap; }
.dash { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .dash { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-8); align-items: start; } }
.dashnav { display: grid; gap: 2px; position: sticky; inset-block-start: calc(var(--s-bar) + var(--s-4)); }
@media (max-width: 899px) { .dashnav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-block-end: var(--s-2); } }
.dashnav a {
display: flex;
align-items: center;
gap: var(--s-3);
min-height: 48px;
padding-inline: var(--s-3);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
border-inline-start: 2px solid transparent;
white-space: nowrap;
}
.dashnav a[aria-current="page"] { color: var(--c-paper); border-inline-start-color: var(--c-acid); }
.dashnav a:hover { color: var(--c-paper); }
.panel {
padding: var(--s-5);
border: 1px solid var(--c-rule);
background: var(--c-iron);
display: grid;
gap: var(--s-4);
}
.panelgrid { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .panelgrid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .panelgrid--3 { grid-template-columns: repeat(3, 1fr); } }
.stat { display: grid; gap: var(--s-2); }
.stat b { font-family: var(--f-mono); font-size: var(--t-h2); font-weight: 700; color: var(--c-paper); }
.banner {
display: grid;
gap: var(--s-3);
padding: var(--s-5);
border: 1px solid var(--c-rule);
background: var(--c-ink);
}
.banner--warn { border-color: var(--c-warning); }
.banner--demo { border-style: dashed; border-color: var(--c-warning); }
.banner__title { display: flex; align-items: center; gap: var(--s-2); color: var(--c-paper); font-weight: 600; }
.banner__title svg { width: 16px; height: 16px; color: var(--c-warning); }
.postmeta a {
display: inline-flex;
align-items: center;
min-height: 24px;
}
.postmeta {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-4);
align-items: center;
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
}
.cats { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cats a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding-inline: var(--s-4);
border: 1px solid var(--c-stroke);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
transition: border-color var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft);
}
.cats a:hover, .cats a[aria-current="page"] { border-color: var(--c-acid); color: var(--c-acid); }
.eventhead { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .eventhead { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s-8); align-items: start; } }
.eventhead .media { --ar: var(--ar-poster); }
.deflist { display: grid; gap: var(--s-3); }
.deflist > div { display: grid; gap: 4px; padding-block-end: var(--s-3); border-block-end: 1px solid var(--c-rule); }
.deflist dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--c-smoke); }
.deflist dd { margin: 0; color: var(--c-paper); }
.lineup { display: grid; gap: var(--s-2); }
.lineup li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-h4); color: var(--c-paper); }
.lineup li::before { content: ""; width: 16px; height: 1px; background: var(--c-acid); flex: none; }
.soon {
position: relative;
display: grid;
place-items: center;
gap: var(--s-5);
aspect-ratio: var(--ar-portrait);
background: var(--c-void);
border: 1px solid var(--c-rule);
text-align: center;
padding: var(--s-6);
}
.soon svg { height: clamp(90px, 18vw, 170px); width: auto; color: var(--c-paper); opacity: .92; }
.soon__label {
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: .42em;
text-transform: uppercase;
color: var(--c-smoke);
}
}
@layer utilities {
.u-acid { color: var(--c-acid); }
.u-smoke { color: var(--c-smoke); }
.u-paper { color: var(--c-paper); }
.u-mono { font-family: var(--f-mono); }
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-mt-0 { margin-block-start: 0; }
.u-mt-4 { margin-block-start: var(--s-4); }
.u-mt-6 { margin-block-start: var(--s-6); }
.u-mt-8 { margin-block-start: var(--s-8); }
.u-mb-4 { margin-block-end: var(--s-4); }
.u-mb-6 { margin-block-end: var(--s-6); }
.u-measure { max-width: var(--m-prose); }
.u-narrow { max-width: var(--m-narrow); }
.u-full { grid-column: 1 / -1; }
.u-nowrap { white-space: nowrap; }
.u-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.js-only { display: none; }
html.has-js .js-only { display: revert; }
html.has-js .nojs-only { display: none; }
}
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
.motion [data-reveal],
.motion [data-reveal-group] > * { opacity: 0; }
.motion [data-split] { visibility: hidden; }
.motion [data-split].is-split { visibility: visible; }
.motion [data-split] [class$="-mask"] { padding-bottom: .08em; margin-bottom: -.08em; }
[data-parallax] { overflow: hidden; }
.motion [data-parallax] > img,
.motion [data-parallax] > picture > img,
.motion [data-parallax] > video { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
[data-reveal], [data-reveal-group] > *, [data-split] {
opacity: 1 !important; visibility: visible !important;
transform: none !important; animation: none !important;
}
[data-parallax] > img, [data-parallax] > picture > img, [data-parallax] > video { scale: 1 !important; transform: none !important; }
}
html.lenis {
scroll-behavior: auto;
}
@layer tokens {
:root { --c-ash: #8A8A93; }
:root { --f-marq: "Figtree", "Archivo", "Helvetica Neue", Arial, sans-serif; }
:root, [data-accent="mono"] { --c-acid: #FFFFFF; --c-acid-dim: #E8E8EA; }
[data-accent="acid"] { --c-acid: #D8FF3E; --c-acid-dim: #A8C72F; }
[data-accent="ice"]  { --c-acid: #9FD3FF; --c-acid-dim: #6FA9D6; }
[data-accent="mist"] { --c-acid: #C9CBD3; --c-acid-dim: #9A9CA6; }
}
@layer components {
.band { position: relative; display: block; color: var(--c-paper); }
.band__cta {
position: absolute;
inset-block-end: var(--s-5);
inset-inline-end: var(--s-gutter);
z-index: 2;
display: inline-flex; align-items: center; gap: var(--s-2);
padding: var(--s-3) var(--s-4);
border: 1px solid var(--c-paper);
background: rgba(0,0,0,.55);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
transition: background var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft);
}
.band__cta svg { width: 12px; height: 12px; }
.band:hover .band__cta { background: var(--c-paper); color: var(--c-void); }
.ticks--band {
position: absolute;
inset-block-end: var(--s-4);
inset-inline-start: var(--s-gutter);
z-index: 2;
}
[data-module~="slideshow"] { position: relative; }
.tiles { display: grid; gap: var(--g-gap); grid-template-columns: 1fr; }
@media (min-width: 560px) {
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles > .tile--big { grid-column: 1 / -1; }
.tiles > .tile--big + .tile + .tile + .tile:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles > .tile--big + .tile + .tile + .tile:last-child { grid-column: auto; }
}
.tiles--row { grid-template-columns: 1fr; }
@media (min-width: 560px) { .tiles--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles--row > :first-child:nth-last-child(odd):last-child, .tiles--row > :nth-child(3):last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .tiles--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles--row > :nth-child(3):last-child { grid-column: auto; } }
.tile {
position: relative;
display: block;
overflow: hidden;
background: var(--c-iron);
color: var(--c-paper);
isolation: isolate;
}
.tile__media { --ar: 16 / 9; }
.tile--big .tile__media { --ar: 16 / 9; }
@media (min-width: 1024px) { .tile--big .tile__media { --ar: 21 / 9; } }
.tile__media img { transition: transform 1.2s var(--ease-out), opacity var(--d-slow) var(--ease-soft); }
.tile:hover .tile__media img { transform: scale(1.03); }
.tile__frame { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tile__frame iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
transform: scale(1.35);
opacity: 0;
transition: opacity var(--d-curtain) var(--ease-soft);
}
.tile.is-previewing .tile__frame iframe { opacity: 1; }
.tile.is-previewing .tile__media img { opacity: 0; }
.tile__veil {
position: absolute; inset: 0; z-index: 2;
background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,0) 65%);
pointer-events: none;
}
.tile__body {
position: absolute;
inset-inline: var(--s-5);
inset-block-start: var(--s-5);
z-index: 3;
display: grid;
gap: var(--s-2);
}
.tile--big .tile__body { inset-inline: var(--s-gutter); inset-block-start: var(--s-6); }
.tile__body .t-label { color: var(--c-bone); padding-block-end: var(--s-2); border-block-end: 1px solid rgba(255,255,255,.28); width: min(100%, 420px); }
.tile__name {
font-size: var(--t-h2);
font-weight: 800;
letter-spacing: -.035em;
line-height: .95;
text-transform: uppercase;
}
.tile--big .tile__name { font-size: var(--t-d2); }
.tile__body .arrowlink { color: var(--c-smoke); }
.tile:hover .tile__body .arrowlink { color: var(--c-paper); }
.wear { display: grid; background: var(--c-void); }
@media (min-width: 900px) { .wear { grid-template-columns: 58fr 42fr; } }
.wear__media { position: relative; }
.wear__media .media { --ar: 4 / 5; }
@media (min-width: 900px) { .wear__media .media { --ar: 4 / 5; } }
.wear__body {
display: grid;
align-content: center;
gap: var(--s-5);
padding: var(--s-9) var(--s-gutter);
}
.wear__label a {
display: inline-block;
padding-block-end: var(--s-2);
border-block-end: 1px solid var(--c-rule-hi);
color: var(--c-paper);
min-width: 320px;
}
.wear__shop {
display: inline-block;
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-paper);
padding-block-end: var(--s-2);
border-block-end: 1px solid var(--c-paper);
transition: color var(--d-fast) var(--ease-soft), border-color var(--d-fast) var(--ease-soft);
}
.wear__shop:hover { color: var(--c-acid); border-color: var(--c-acid); }
.concept {
position: relative;
min-height: 100svh;
display: grid;
place-items: center;
padding: calc(var(--s-bar) + var(--s-8)) var(--s-gutter) var(--s-9);
isolation: isolate;
text-align: center;
}
.concept__knot {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 0;
pointer-events: none;
}
.concept__knot svg { height: min(62vh, 520px); width: auto; color: var(--c-paper); opacity: .14; }
.concept__text {
position: relative;
z-index: 1;
display: grid;
gap: var(--s-5);
justify-items: center;
max-width: 62ch;
}
.concept__text h1 { font-size: var(--t-h1); font-weight: 600; letter-spacing: -.02em; }
.concept__text p { font-size: var(--t-h4); font-weight: 400; color: var(--c-bone); line-height: 1.5; }
.artistpage { display: grid; gap: var(--s-8); }
@media (min-width: 1000px) {
.artistpage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
.artistpage__text { position: sticky; inset-block-start: calc(var(--s-bar) + var(--s-6)); }
}
.artistpage__photos { display: grid; gap: var(--g-gap); }
.artistpage__main { --ar: 4 / 5; }
.artistpage__grid { display: grid; gap: var(--g-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.artistpage__grid .media { --ar: 4 / 5; }
.artistpage__grid .media img { cursor: zoom-in; }
.soonpage {
position: relative;
min-height: 100svh;
display: grid;
align-content: center;
justify-items: center;
gap: var(--s-5);
text-align: center;
padding: calc(var(--s-bar) + var(--s-8)) var(--s-gutter) var(--s-9);
isolation: isolate;
}
.soonpage__knot { width: clamp(120px, 20vw, 220px); }
.soonpage__knot svg { width: 100%; height: auto; color: var(--c-paper); }
.pager { display: grid; gap: var(--s-3); align-content: start; }
.pager__a {
display: grid; gap: var(--s-1);
padding: var(--s-4) var(--s-5);
border: 1px solid var(--c-rule);
color: var(--c-paper);
transition: border-color var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-soft);
}
.pager__a:hover { border-color: var(--c-stroke); transform: translateY(-1px); }
.pager__a .t-label { color: var(--c-smoke); }
.player {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--c-iron);
overflow: hidden;
cursor: pointer;
isolation: isolate;
text-align: left;
}
.player__cover { position: absolute; inset: 0; --ar: 16 / 9; }
.player__cover img { transition: transform 1.2s var(--ease-out); }
.player:hover .player__cover img { transform: scale(1.02); }
.player::after {
content: "";
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.05) 50%);
pointer-events: none;
}
.player__btn {
position: absolute;
inset-inline-start: 50%;
inset-block-start: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: inline-flex; align-items: center; gap: var(--s-3);
padding: var(--s-4) var(--s-6);
border: 1px solid var(--c-paper);
background: rgba(0,0,0,.55);
color: var(--c-paper);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
transition: background var(--d-fast) var(--ease-soft), color var(--d-fast) var(--ease-soft);
}
.player__btn svg { width: 14px; height: 14px; }
.player:hover .player__btn { background: var(--c-paper); color: var(--c-void); }
.player__tag {
position: absolute;
inset-inline-start: var(--s-5);
inset-block-end: var(--s-5);
z-index: 2;
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-bone);
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.player.is-loading { cursor: progress; }
.langsw {
display: inline-grid;
place-items: center;
min-width: 44px; height: 44px;
padding-inline: var(--s-2);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--c-smoke);
transition: color var(--d-fast) var(--ease-soft);
}
.langsw:hover { color: var(--c-paper); }
.drawer__top .langsw { text-transform: none; letter-spacing: .08em; }
.drawer__sub {
display: flex;
gap: var(--s-5);
padding: var(--s-3) 0 var(--s-4) var(--s-5);
border-block-end: 1px solid var(--c-rule);
}
.drawer__sub a {
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
min-height: 32px;
display: inline-flex; align-items: center;
}
.drawer__sub a:hover, .drawer__sub a[aria-current="page"] { color: var(--c-paper); }
.foot__nl { padding-block-end: var(--s-8); margin-block-end: var(--s-8); border-block-end: 1px solid var(--c-rule); }
.nl { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .nl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; } }
.nl__head { display: grid; gap: var(--s-2); }
.nl__title { font-size: var(--t-h2); font-weight: 700; letter-spacing: var(--t-h2-ls); line-height: 1.08; color: var(--c-paper); }
.nl__row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.nl__row input { flex: 1 1 220px; }
.nl__field { display: grid; gap: var(--s-3); }
.eventlist { display: grid; gap: var(--s-8); }
.eventhead--row { padding-block-end: var(--s-8); border-block-end: 1px solid var(--c-rule); }
.eventhead--row:last-child { border-block-end: 0; padding-block-end: 0; }
.poster { --ar: 9 / 16; max-width: 420px; }
.eventhead .media.poster { --ar: 9 / 16; }
.card__excerpt { color: var(--c-smoke); max-width: 36ch; }
.card--portrait .card__body { gap: var(--s-2); }
.t-d2 { font-size: var(--t-d2); font-weight: var(--t-d2-w); letter-spacing: var(--t-d2-ls); line-height: var(--t-d2-lh); text-transform: uppercase; }
}
@layer components {
.player__btn { white-space: nowrap; }
}
@layer components {
.wear__label a { min-height: 28px; display: inline-flex; align-items: flex-end; }
}
@layer components {
.t-sec {
font-size: clamp(26px, 4.4vw, 54px);
font-weight: 700;
letter-spacing: -.015em;
line-height: 1;
text-transform: uppercase;
color: var(--c-paper);
}
.t-sec--s { font-size: clamp(22px, 3.2vw, 40px); }
.sechead__title h2, .phero h1 { text-transform: uppercase; }
.fade { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease-soft); }
.fade:first-child { position: relative; }
.fade.is-on { opacity: 1; }
.tile__cta {
display: inline-flex; align-items: center; gap: var(--s-2);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-paper);
}
.tile__cta svg { width: 12px; height: 12px; transition: transform var(--d-fast) var(--ease-soft); }
.tile:hover .tile__cta svg { transform: translate(2px, -2px); }
.tile__body { gap: var(--s-3); }
.tile__body .t-label { width: auto; padding-block-end: 0; border-block-end: 0; }
.index--caps .index__row .t-h4 { text-transform: uppercase; }
.wordmark {
display: inline-flex;
align-items: baseline;
font-family: var(--f-display);
font-weight: 900;
font-size: 15px;
line-height: 1;
letter-spacing: 0;
color: var(--c-paper);
text-transform: uppercase;
padding-block: var(--s-2);
}
.wordmark i { display: inline-block; font-style: normal; margin-inline-end: .30em; }
.wordmark i:last-of-type { margin-inline-end: 0; }
.wordmark i.m { transform: scaleX(-1); }
.wordmark .reg { font-style: normal; font-weight: 700; font-size: .34em; margin-inline-start: .14em; align-self: flex-start; transform: translateY(.04em); }
.wordmark--foot { font-size: 26px; }
.foot__lockup { padding-block-end: var(--s-7); }
.soonpage__knot { width: clamp(100px, 15vw, 180px); padding: 8px; }
.soonpage__knot svg { overflow: visible; }
}
@layer components {
@media (min-width: 1024px) { .tiles--row > .tile:only-child { grid-column: span 2; } }
}
@layer components {
.player {
position: relative;
width: 100%;
background: var(--c-void);
isolation: isolate;
outline: none;
aspect-ratio: auto;
cursor: default;
}
.player:focus-visible { box-shadow: var(--e-focus); }
.player__stage {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--c-iron);
overflow: hidden;
}
.player__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__cover {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
aspect-ratio: 16 / 9;
width: 100%;
display: block;
padding: 0;
cursor: pointer;
text-align: left;
z-index: 2;
}
.player__img { --ar: 16 / 9; }
.player__img img { transition: transform 1.2s var(--ease-out); }
.player__cover:hover .player__img img { transform: scale(1.02); }
.player__cover::after {
content: "";
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.05) 50%);
pointer-events: none;
}
.player[data-state="loading"] .player__cover { cursor: progress; }
.player[data-state="loading"] .player__btn { opacity: .6; }
.player__bar {
display: flex;
align-items: center;
gap: var(--s-3);
min-height: 56px;
padding: var(--s-2) var(--s-3);
background: var(--c-void);
border-block-start: 1px solid var(--c-rule);
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: .12em;
color: var(--c-smoke);
user-select: none;
}
.player__ctl {
width: 44px; height: 44px;
display: grid; place-items: center;
color: var(--c-paper);
flex: none;
transition: color var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-soft);
}
.player__ctl:hover { transform: translateY(-1px); }
.player__ctl svg { width: 18px; height: 18px; }
.player__ico { display: grid; place-items: center; }
[data-act="play"] .player__ico--pause, [data-act="play"][data-on="1"] .player__ico--play { display: none; }
[data-act="play"][data-on="1"] .player__ico--pause { display: grid; }
[data-act="mute"] .player__ico--muted, [data-act="mute"][data-on="1"] .player__ico--sound { display: none; }
[data-act="mute"][data-on="1"] .player__ico--muted { display: grid; }
.player__time { white-space: nowrap; color: var(--c-paper); font-variant-numeric: tabular-nums; flex: none; }
.player__sep { color: var(--c-ash); margin-inline: 6px; }
.player__seek {
flex: 1 1 auto;
height: 24px;
display: grid; align-items: center;
cursor: pointer;
touch-action: none;
}
.player__seek::before { content: ""; grid-area: 1 / 1; height: 2px; background: rgba(255,255,255,.18); }
.player__fill { grid-area: 1 / 1; height: 2px; width: 0; background: var(--c-paper); pointer-events: none; }
.player__seek:hover::before { background: rgba(255,255,255,.3); }
.player__seek:focus-visible { outline: none; box-shadow: var(--e-focus); }
.player[data-buffering="1"] .player__fill { opacity: .55; }
.player__error {
padding: var(--s-4) 0;
font-size: var(--t-small);
color: var(--c-smoke);
}
.player:fullscreen { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100vh; background: var(--c-void); }
.player:fullscreen .player__stage { aspect-ratio: auto; height: 100%; }
.player:fullscreen .player__stage iframe { object-fit: contain; }
@media (max-width: 559px) {
.player__bar { gap: var(--s-2); padding-inline: var(--s-2); }
.player__time { font-size: 10px; }
}
}
@layer components {
.player[data-started="1"] .player__cover { opacity: 0; pointer-events: none; transition: opacity var(--d-slow) var(--ease-soft); }
.player[data-started="1"][data-state="paused"] .player__cover,
.player[data-started="1"][data-state="ended"] .player__cover { opacity: 1; pointer-events: auto; }
.player[data-started="1"] .player__cover::after { background: rgba(0,0,0,.62); }
.player[data-started="1"] .player__tag { display: none; }
}
@layer components {
.langs {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
color: var(--c-ash);
}
.langs a {
display: inline-grid; place-items: center;
min-width: 32px; min-height: 44px; padding-inline: 4px;
color: var(--c-smoke);
border-block-end: 1px solid transparent;
transition: color var(--d-fast) var(--ease-soft), border-color var(--d-fast) var(--ease-soft);
}
.langs a:hover { color: var(--c-paper); }
.langs a[aria-current="true"] { color: var(--c-paper); border-block-end-color: var(--c-paper); pointer-events: none; }
.langs--inline { text-transform: none; letter-spacing: .16em; font-size: 10px; }
.langs--inline a { min-height: 24px; min-width: 0; }
.drawer__top .langs { text-transform: none; letter-spacing: .08em; }
}
@layer components {
.slate, .scrollcue, .heroplay, .onair { font-size: 11px; }
.ticker__run { font-size: 11px; }
@media (max-width: 699px) { .slate { font-size: 9px; } }
.wordmark { font-size: 16px; }
.wordmark i { margin-inline-end: .16em; }
.band__title {
position: absolute;
inset-block-start: var(--s-5);
inset-inline-start: var(--s-gutter);
z-index: 2;
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(18px, 2.6vw, 34px);
letter-spacing: -.015em;
line-height: 1;
text-transform: uppercase;
color: var(--c-paper);
text-shadow: 0 1px 18px rgba(0,0,0,.45);
pointer-events: none;
}
.wear { border-block-end: 1px solid var(--c-rule); }
@media (min-width: 900px) {
.wear { grid-template-columns: 1.15fr .85fr; }
.wear__media { min-height: min(84svh, 720px); overflow: hidden; }
.wear__media .fade, .wear__media .fade:first-child { position: absolute; inset: 0; }
.wear__media .media { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; --ar: auto; }
.wear__media .media img { width: 100%; height: 100%; object-fit: cover; }
}
.wear__body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 18px;
padding: clamp(34px, 6vw, 72px) var(--s-gutter);
border-inline-start: 1px solid var(--c-rule);
}
.wear__slate { margin-block-end: 0; min-width: 0; }
.wear__title {
margin: 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -.015em;
font-size: clamp(30px, 4.6vw, 58px);
line-height: .95;
color: var(--c-paper);
}
.wear__shop {
margin-block-start: 8px;
font-size: 12px;
letter-spacing: .2em;
padding-block-end: 7px;
border-block-end: 1px solid var(--c-rule-hi);
min-height: 24px;
transition: border-color .3s, letter-spacing .5s var(--ease-soft), color .3s;
}
.wear__shop:hover { color: var(--c-paper); border-color: var(--c-paper); letter-spacing: .28em; }
.foot__grid { grid-template-columns: 1fr; gap: var(--s-6) 34px; }
@media (min-width: 560px) { .foot__grid { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); } }
.foot h2 {
font-family: var(--f-display);
font-size: 11px;
font-weight: 700;
letter-spacing: .2em;
color: var(--c-paper);
margin-block-end: 12px;
}
.foot__grid a, .foot__grid span {
font-family: var(--f-mono);
font-size: 12px;           
letter-spacing: .13em;
text-transform: uppercase;
line-height: 1.6;
color: var(--c-ash);
}
.foot__grid a:hover { color: var(--c-paper); }
.knot--trace path { stroke-linejoin: miter; stroke-linecap: square; }
.knot--trace.is-done path { stroke: none; }
@media (prefers-reduced-motion: reduce) { .knot--trace path { stroke: none; } }
.concept__text { max-width: 30ch; }
.concept__text h1 {
font-size: clamp(22px, 3.4vw, 46px);
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.05;
text-transform: uppercase;
text-wrap: balance;
}
.concept__sub { font-size: var(--t-h4); color: var(--c-smoke); }
.phero__inner--row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.tag-az {
display: inline-grid;
place-items: center;
width: 56px;
height: 56px;
flex: none;
background: var(--c-paper);
color: var(--c-void);
font-family: var(--f-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: .08em;
line-height: 1;
}
.card__title, .artistpage h1, .crumbs [aria-current] { text-transform: uppercase; }
.booking__cta { margin-block-start: var(--s-2); }
.phero__sub--caps {
font-family: var(--f-mono);
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-smoke);
}
.nl__title { text-transform: uppercase; font-size: var(--t-h3); letter-spacing: .02em; }
.imprint { display: grid; gap: var(--s-5); margin-block-end: var(--s-7); }
.imprint p { margin: 0; line-height: 1.6; }
.imprint strong { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-smoke); margin-block-end: 4px; }
.player__img {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
width: 100%;
aspect-ratio: 16 / 9;
z-index: 1;
transition: opacity var(--d-slow) var(--ease-soft);
}
.player__cover { background: transparent; }
.player:hover .player__img img { transform: scale(1.02); }
.player[data-started="1"] .player__img { opacity: 0; pointer-events: none; }
.player[data-started="1"][data-state="paused"] .player__img,
.player[data-started="1"][data-state="ended"] .player__img { opacity: 1; }
.ticker__run, .ticker__run span { font-size: 12px; }
.foot__legal { font-size: 12px; }
.hero__foot { justify-content: flex-end; }
.band__title { font-size: clamp(26px, 4.4vw, 54px); letter-spacing: -.015em; }
.knot--trace path { fill: var(--c-paper); stroke: none; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.knot--trace.is-in path { animation: none; }
.knot--trace { clip-path: inset(100% 0 0 0); }
.knot--trace.is-in { animation: knotfill 2.5s var(--ease-out) forwards; }
@keyframes knotfill { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
.knot--trace, .knot--trace.is-in { clip-path: none; animation: none; }
}
@media (min-width: 900px) {
.concept__text { max-width: 58ch; }
.concept__text h1 { font-size: clamp(30px, 3.6vw, 52px); }
}
.drawer__list a { text-transform: uppercase; }
.artistpage__grid--one { grid-template-columns: 1fr; }
.index__row .nw { white-space: nowrap; }
.index__row .t-label { text-align: end; min-width: 0; }
.index__row .t-label.nw { flex: none; }
.index__row .t-h4 { min-width: 0; }
@media (max-width: 599px) { .index__series { display: none; } .index__row .t-label { flex: none; } }
@media (max-width: 359px) { .index__row { gap: var(--s-3); } .index__row .t-label { letter-spacing: .1em; } }
.booking__cta .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 359px) {
.booking__cta .btn, .cookiebar .btn { letter-spacing: .1em; padding-inline: var(--s-3); }
}
.cookiebar__inner > * { min-width: 0; }
}
@layer components {
.phero--m { padding-block-end: var(--s-6); }
.mh {
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 500;
letter-spacing: var(--t-label-ls);
text-transform: uppercase;
color: var(--c-smoke);
line-height: 1.4;
}
.mbox { max-width: 560px; display: grid; gap: var(--s-5); }
.mlead { color: var(--c-smoke); max-width: 52ch; }
.mfine { font-size: var(--t-small); color: var(--c-ash); }
.mopt { text-transform: none; letter-spacing: .04em; color: var(--c-ash); }
.mlink { color: var(--c-paper); text-decoration: underline; text-decoration-color: var(--c-stroke); text-underline-offset: 3px; transition: text-decoration-color var(--d-fast) var(--ease-soft); }
.mlink:hover { text-decoration-color: var(--c-paper); }
.mlink--mono {
display: inline-flex; align-items: center; min-height: 44px;
font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
text-decoration: none; color: var(--c-smoke);
}
.mlink--mono:hover { color: var(--c-paper); }
.mload { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--c-ash); }
.mload::after { content: ""; display: inline-block; width: 1.4em; text-align: start; animation: mdots 1.2s steps(4) infinite; }
@keyframes mdots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.mnote { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--c-rule); background: var(--c-ink); }
.mnote[hidden] { display: none; }
.merr { grid-column: 1 / -1; font-size: var(--t-small); color: var(--c-paper); padding-inline-start: var(--s-3); border-inline-start: 2px solid var(--c-paper); }
.mmsg { font-size: var(--t-small); color: var(--c-paper); }
.mmsg:not(:empty) { padding: var(--s-3) var(--s-4); border-inline-start: 2px solid var(--c-paper); background: var(--c-iron); }
.mmsg.is-ok { border-inline-start-color: var(--c-stroke); color: var(--c-bone); }
.mempty { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-6) 0; color: var(--c-smoke); border-block-start: 1px solid var(--c-rule); }
.mempty[hidden] { display: none; }
.mform { display: grid; gap: var(--s-5); max-width: 560px; }
.mform--wide { max-width: 760px; }
.mform[hidden], [data-c][hidden], .mblock[hidden] { display: none; }
.mform .field[data-state="error"] input, .mform [aria-invalid="true"] { border-color: var(--c-paper); }
.mform input[readonly] { background: transparent; border-style: dashed; color: var(--c-smoke); }
.mform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-smoke) 50%), linear-gradient(135deg, var(--c-smoke) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: var(--s-7); }
.mform .check input, .mradio input { accent-color: var(--c-paper); }
.check a { position: relative; z-index: 1; }
@media (min-width: 560px) { .mform > .btn, .mfb > .btn { justify-self: start; } }
.mrow-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.mrow-act[hidden] { display: none; }
.btn--solid.is-busy .btn__label::after { content: " …"; }
.mradio { display: grid; gap: var(--s-3); border: 0; padding: 0; margin: 0; }
.mradio legend { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--c-smoke); margin-block-end: var(--s-3); }
.mblock { display: grid; gap: var(--s-4); justify-items: start; margin-block-start: var(--s-7); }
.mblock--rule { padding-block-start: var(--s-7); border-block-start: 1px solid var(--c-rule); max-width: 560px; }
.mblock .mform { justify-items: stretch; width: 100%; }
.topmember {
display: inline-flex; align-items: center; min-height: 44px;
font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
color: var(--c-smoke);
border-block-end: 1px solid transparent;
transition: color var(--d-fast) var(--ease-soft);
white-space: nowrap;
}
.topmember:hover, .topmember[aria-current="page"] { color: var(--c-paper); }
.topmember + .langs { padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--c-rule); }
@media (max-width: 359px) { .topmember { letter-spacing: .12em; } .topact { gap: var(--s-2); } }
.plans { display: grid; gap: var(--g-gap); }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan {
display: grid; gap: var(--s-4); align-content: start;
padding: clamp(var(--s-5), 3vw, var(--s-7));
border: 1px solid var(--c-rule);
transition: border-color var(--d-base) var(--ease-soft);
}
.plan { background: transparent; }
.plan__price [data-price] { font-family: var(--f-display); font-size: inherit; letter-spacing: inherit; color: inherit; }
.plan:hover, .plan.is-current { border-color: var(--c-stroke); }
.plan__name { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--c-smoke); }
.plan__price { font-weight: 700; font-size: clamp(40px, 5.6vw, 72px); letter-spacing: -.03em; line-height: 1; color: var(--c-paper); white-space: nowrap; }
.plan__price--s { font-size: var(--t-h2); }
.plan__per { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ash); }
.plan__off { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--c-bone); padding-block-end: var(--s-2); }
.plans + .mfine { margin-block-start: var(--s-4); }
.mcols { display: grid; gap: var(--s-8) var(--g-gap); margin-block-start: var(--s-9); }
@media (min-width: 900px) { .mcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mcols .mh, .msec > .mh { padding-block-end: var(--s-3); border-block-end: 1px solid var(--c-rule); }
.mlist { list-style: none; margin: 0; padding: 0; }
.mlist li {
display: flex; gap: var(--s-5); align-items: baseline;
min-height: 56px; padding-block: var(--s-4);
border-block-end: 1px solid var(--c-rule);
font-weight: 700; text-transform: uppercase; letter-spacing: -.005em;
font-size: var(--t-h4); color: var(--c-paper);
}
.mlist__n { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 400; letter-spacing: .14em; color: var(--c-ash); flex: none; }
.mprose { display: grid; gap: var(--s-4); padding-block-start: var(--s-4); color: var(--c-smoke); max-width: 52ch; }
.msec { margin-block-start: var(--s-9); }
.msec .acc { margin-block-start: 0; border-block-start: 0; }
.mbanner { display: grid; gap: var(--s-2); padding: var(--s-5); margin-block-end: var(--s-6); border: 1px solid var(--c-stroke); }
.mbanner[hidden] { display: none; }
.mbanner:focus { outline: none; }
.mbanner p:last-child { color: var(--c-paper); }
.mtabs { display: flex; align-items: end; gap: var(--s-4); border-block-end: 1px solid var(--c-rule); margin-block-end: var(--s-7); }
.mtabs__list { display: flex; gap: var(--s-5); overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.mtabs__list::-webkit-scrollbar { display: none; }
.mtab {
flex: none; min-height: 48px; padding: 0;
font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
color: var(--c-ash);
border-block-end: 1px solid transparent; margin-block-end: -1px;
transition: color var(--d-fast) var(--ease-soft), border-color var(--d-fast) var(--ease-soft);
}
.mtab:hover { color: var(--c-paper); }
.mtab[aria-selected="true"] { color: var(--c-paper); border-block-end-color: var(--c-paper); }
.mtab[hidden] { display: none; }
.mtabs__out { flex: none; }
@media (max-width: 599px) {
.mtabs { gap: var(--s-3); }
.mtabs__list { gap: var(--s-4); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-inline-end: var(--s-5); }
.mtabs__out { padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--c-rule); letter-spacing: .14em; }
}
.mpanel:focus-visible { outline: none; box-shadow: var(--e-focus); }
.mdl { display: grid; gap: 0; border-block-start: 1px solid var(--c-rule); max-width: 760px; }
.mdl > div { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; min-height: 56px; padding-block: var(--s-3); border-block-end: 1px solid var(--c-rule); }
.mdl > div[hidden] { display: none; }
.mdl dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--c-ash); }
.mdl dd { margin: 0; font-weight: 700; text-transform: uppercase; color: var(--c-paper); text-align: end; }
.mdl__total dd { font-size: var(--t-h3); }
.mpick { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.mpick__grid { display: grid; gap: var(--s-3); }
@media (min-width: 600px) { .mpick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mpick__opt {
position: relative; display: grid; gap: var(--s-2); padding: var(--s-5);
border: 1px solid var(--c-rule); cursor: pointer;
transition: border-color var(--d-fast) var(--ease-soft), background var(--d-fast) var(--ease-soft);
}
.mpick__opt:hover { border-color: var(--c-stroke); }
.mpick__opt:has(input:checked) { border-color: var(--c-paper); background: var(--c-ink); }
.mpick__opt:has(input:focus-visible) { box-shadow: var(--e-focus); }
.mpick__opt input { position: absolute; inset-block-start: var(--s-5); inset-inline-end: var(--s-5); width: 20px; height: 20px; accent-color: var(--c-paper); }
.mpick__name { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--c-smoke); }
.mpick__price { font-weight: 700; font-size: var(--t-h3); color: var(--c-paper); }
.mpick__off { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ash); }
.mlock { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-7) var(--s-5); border: 1px solid var(--c-rule); }
.mlock[hidden] { display: none; }
.mlock > svg { width: 18px; height: 18px; color: var(--c-smoke); }
.mlock p:not(.mh) { color: var(--c-smoke); }
.mrows { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--c-rule); }
.mrow { display: grid; gap: var(--s-4); padding-block: var(--s-5); border-block-end: 1px solid var(--c-rule); }
@media (min-width: 700px) { .mrow { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .mrow--demo { grid-template-columns: minmax(0, 1fr); } }
.mrow__main { display: grid; gap: var(--s-2); min-width: 0; color: var(--c-smoke); }
.mrow__t { font-weight: 700; text-transform: uppercase; font-size: var(--t-h4); color: var(--c-paper); overflow-wrap: anywhere; }
.mrow__meta { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ash); overflow-wrap: anywhere; }
.mrow__fb { padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--c-stroke); color: var(--c-bone); }
.mrow__act { display: flex; gap: var(--s-3); align-items: center; }
.mrows > .mload, .mrows > .mmsg { padding-block: var(--s-5); }
.mtag { display: inline-flex; align-items: center; min-height: 32px; padding-inline: var(--s-3); border: 1px solid var(--c-stroke); font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-smoke); white-space: nowrap; }
.mtag--on { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-void); }
.mfb { display: grid; gap: var(--s-4); margin-block-start: var(--s-3); max-width: 560px; }
.mfb textarea { min-height: 96px; }
.mrate { display: flex; gap: var(--s-2); border: 0; padding: 0; margin: 0; flex-wrap: wrap; }
.mrate legend { width: 100%; margin-block-end: var(--s-2); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--c-smoke); }
.mrate label { position: relative; }
.mrate input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mrate span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--c-stroke); font-family: var(--f-mono); font-size: 12px; color: var(--c-smoke); }
.mrate input:checked + span { background: var(--c-paper); color: var(--c-void); border-color: var(--c-paper); }
.mrate input:focus-visible + span { box-shadow: var(--e-focus); }
.mfavs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.mfav { position: relative; }
.mfav__a { display: grid; gap: var(--s-3); }
.mfav__a img { transition: transform 1.2s var(--ease-out); }
.mfav__a:hover img { transform: scale(1.02); }
.mfav__tx { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--c-smoke); }
.mfav .favbtn { position: absolute; inset-block-start: var(--s-2); inset-inline-end: var(--s-2); background: rgba(0,0,0,.55); }
.mpass { display: grid; gap: var(--s-3); padding: var(--s-6); margin-block-end: var(--s-7); border: 1px solid var(--c-paper); max-width: 560px; }
.mpass[hidden], [data-inbox][hidden], [data-accept][hidden] { display: none; }
.mpass__label { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--c-smoke); }
.mpass__name { font-weight: 800; text-transform: uppercase; font-size: var(--t-h2); letter-spacing: -.02em; line-height: 1; color: var(--c-paper); }
.mpass__dl { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); margin: 0; }
.mpass__dl dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-ash); }
.mpass__dl dd { margin: 0; color: var(--c-paper); }
.mpass__code { font-family: var(--f-mono); letter-spacing: .12em; }
.msettings { display: grid; gap: var(--s-3); padding-block: var(--s-4) var(--s-5); max-width: 560px; }
.msettings__page { margin-block-start: var(--s-3); }
.mswitch { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; cursor: pointer; color: var(--c-paper); position: relative; }
.mswitch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.mswitch__ui { width: 40px; height: 22px; border: 1px solid var(--c-stroke); position: relative; flex: none; transition: border-color var(--d-fast) var(--ease-soft); }
.mswitch__ui::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 14px; height: 14px; background: var(--c-smoke); transition: transform var(--d-base) var(--ease-out), background var(--d-fast); }
.mswitch input:checked + .mswitch__ui { border-color: var(--c-paper); }
.mswitch input:checked + .mswitch__ui::after { transform: translateX(18px); background: var(--c-paper); }
.mswitch input:focus-visible + .mswitch__ui { box-shadow: var(--e-focus); }
.mfilter { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin-block: var(--s-5) var(--s-4); }
.mfilter__b { flex: none; white-space: nowrap; min-height: 40px; padding-inline: var(--s-4); border: 1px solid var(--c-rule); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--c-smoke); transition: border-color var(--d-fast), color var(--d-fast); }
.mfilter__b:hover { color: var(--c-paper); border-color: var(--c-stroke); }
.mfilter__b[aria-pressed="true"] { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-void); }
.sesshead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.sesshead h1 { min-width: 0; overflow-wrap: anywhere; }
.favbtn {
flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px;
border: 1px solid var(--c-stroke); color: var(--c-paper);
transition: border-color var(--d-fast) var(--ease-soft), background var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-soft);
}
.favbtn[hidden] { display: none; }
.favbtn:hover { border-color: var(--c-paper); transform: translateY(-1px); }
.favbtn svg { width: 20px; height: 20px; }
.favbtn[aria-pressed="true"] { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-void); }
.mfav .favbtn[aria-pressed="true"] { background: var(--c-paper); }
.tracklist { border-block-start: 1px solid var(--c-rule); padding-block-start: var(--s-5); }
.tracklist__h { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--c-smoke); margin-block-end: var(--s-4); }
.tracklist__lock { position: relative; display: grid; }
.tracklist__fake { display: grid; gap: var(--s-3); filter: blur(4px); opacity: .5; user-select: none; pointer-events: none; padding-block: var(--s-2); }
.tracklist__fake span { display: flex; gap: var(--s-4); align-items: center; }
.tracklist__fake i { width: 42px; height: 10px; background: var(--c-graphite); flex: none; }
.tracklist__fake b { height: 12px; background: linear-gradient(90deg, var(--c-graphite), var(--c-steel)); }
.tracklist__cta {
position: absolute; inset: 0;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: var(--s-4) 0;
background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.4) 100%);
}
.tracklist__cta p { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--c-bone); max-width: 46ch; }
.tracklist__cta svg { width: 16px; height: 16px; flex: none; color: var(--c-smoke); }
@media (max-width: 559px) { .tracklist__cta { position: relative; inset: auto; background: none; } .tracklist__fake { position: absolute; inset: 0; opacity: .25; overflow: hidden; } }
.tracklist__list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--c-rule); }
.tracklist__list li {
display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-1) var(--s-4);
padding-block: var(--s-3); border-block-end: 1px solid var(--c-rule); align-items: baseline;
}
@media (min-width: 760px) { .tracklist__list li { grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .8fr); } }
.tracklist__t { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em; color: var(--c-ash); font-variant-numeric: tabular-nums; }
.tracklist__a { font-weight: 700; text-transform: uppercase; color: var(--c-paper); }
.tracklist__ti { color: var(--c-bone); }
.tracklist__l { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ash); }
@media (max-width: 759px) { .tracklist__ti, .tracklist__l { grid-column: 2; } }
.tracklist__soon { color: var(--c-smoke); }
.mcart {
display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--c-smoke);
white-space: nowrap;
}
.mcart:hover { color: var(--c-paper); }
.mcart svg { width: 18px; height: 18px; }
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7) var(--g-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard.is-wide { grid-column: 1 / -1; }
.pcard.is-wide .media { --ar: 4 / 5; }
@media (min-width: 900px) {
.pgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pcard { grid-column: span 2; }
.pcard.is-wide { grid-column: span 2; }
.pcard.is-half { grid-column: span 3; }
.pcard.is-solo { grid-column: 2 / span 4; }
}
@media (max-width: 899px) { .pcard.is-solo { grid-column: 1 / -1; } }
.pcard a { display: grid; gap: var(--s-3); }
.pcard img { transition: transform 1.2s var(--ease-out); }
.pcard a:hover img { transform: scale(1.02); }
.pcard__name { font-weight: 700; text-transform: uppercase; font-size: var(--t-h4); color: var(--c-paper); margin-block-start: var(--s-2); }
.pcard__price, .pitem__price { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--c-bone); display: flex; flex-wrap: wrap; gap: 0 var(--s-3); align-items: baseline; }
.pcard__price s, .pitem__price s { color: var(--c-ash); }
.pmember { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-ash); }
.pitem-wrap { padding-block-start: calc(var(--s-bar) + var(--s-6)); }
.pitem { display: grid; gap: var(--s-7) var(--s-8); }
.pitem[hidden] { display: none; }
@media (min-width: 900px) { .pitem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .pitem__info { position: sticky; inset-block-start: calc(var(--s-bar) + var(--s-5)); } }
.pitem__gallery { display: grid; gap: var(--s-3); max-width: 640px; }
.pitem__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.pthumb { padding: 0; border: 1px solid transparent; opacity: .6; transition: opacity var(--d-fast), border-color var(--d-fast); }
.pthumb[aria-pressed="true"], .pthumb:hover { opacity: 1; border-color: var(--c-paper); }
.pitem__info { display: grid; gap: var(--s-5); align-content: start; }
.pitem__price { font-size: 14px; }
.pitem__desc { color: var(--c-smoke); max-width: 52ch; white-space: pre-line; }
.psizes { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.psizes__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.psize { position: relative; }
.psize input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.psize span { display: inline-grid; place-items: center; min-width: 52px; min-height: 48px; padding-inline: var(--s-3); border: 1px solid var(--c-stroke); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-paper); transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast); }
.psize span small { font-size: 9px; color: var(--c-ash); letter-spacing: .14em; }
.psize input:checked + span { background: var(--c-paper); color: var(--c-void); border-color: var(--c-paper); }
.psize input:disabled + span { color: var(--c-ash); border-style: dashed; cursor: not-allowed; }
.psize input:focus-visible + span { box-shadow: var(--e-focus); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-stroke); width: max-content; }
.qty__b { width: 48px; height: 48px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 16px; color: var(--c-paper); }
.qty__b:disabled { color: var(--c-graphite); cursor: not-allowed; }
.qty__n { min-width: 36px; text-align: center; font-family: var(--f-mono); font-size: 13px; color: var(--c-paper); font-variant-numeric: tabular-nums; }
.qty--s .qty__b { width: 44px; height: 44px; }
.pcart { display: grid; gap: var(--s-7) var(--s-8); }
.pcart[hidden] { display: none; }
@media (min-width: 900px) { .pcart { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; } .pcart__sum { position: sticky; inset-block-start: calc(var(--s-bar) + var(--s-5)); } }
.pcart__lines { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--c-rule); }
.pline { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--s-4); padding-block: var(--s-5); border-block-end: 1px solid var(--c-rule); align-items: start; }
.pline.is-bad { box-shadow: inset 2px 0 0 var(--c-paper); padding-inline-start: var(--s-3); }
.pline__info { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; }
.pline__name { font-weight: 700; text-transform: uppercase; color: var(--c-paper); overflow-wrap: anywhere; }
.pline__end { display: grid; justify-items: end; gap: var(--s-2); }
.pline__tot { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--c-paper); white-space: nowrap; }
@media (max-width: 479px) { .pline { grid-template-columns: 72px minmax(0, 1fr); } .pline__end { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: space-between; width: 100%; } }
.pcart__sum { display: grid; gap: var(--s-5); padding: var(--s-5); border: 1px solid var(--c-rule); }
.mdl--sum { border-block-start: 0; }
.mdl--sum > div { min-height: 44px; }
.mdl--sum dd { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .1em; }
.mdl--sum .mdl__total dd { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); letter-spacing: 0; }
}
@layer components {
.mwd { display: grid; gap: var(--s-4); width: 100%; max-width: 560px; margin-block-start: var(--s-2); }
.mwd[hidden], [data-wd-open][hidden] { display: none; }
.mblock .mdl { width: 100%; }
}
html.has-js .mform.js-only:not([hidden]) { display: grid; }