/* ------------------------------------------------------------------
   Matty A.D. — site.css
   Palette from the brand swatches: orange, yellow, green, blue,
   off-black and off-white. Type: Instrument Serif + Instrument Sans.
------------------------------------------------------------------- */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/vendor/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/vendor/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/vendor/fonts/space-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/vendor/fonts/space-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  --orange: #e5601c;
  --yellow: #d8ca1e;
  --green: #188453;
  --blue: #1a95be;
  --black: #1b1919;
  --cream: #e3dbce;
  --cream-70: rgba(227, 219, 206, 0.7);
  --cream-40: rgba(227, 219, 206, 0.4);
  --cream-15: rgba(227, 219, 206, 0.15);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Space Mono", "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 2.2vw, 32px);

  /* card size for the 3D stack */
  --card: clamp(200px, min(50vh, 31vw), 560px);
  --left-col: 36%;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--black); color: var(--cream); }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -200vw; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--cream); color: var(--black); padding: .5rem 1rem; }

/* ---------- top bar ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: calc(var(--gutter) * 0.9) var(--gutter);
  pointer-events: none;
}
.menu-btn {
  pointer-events: auto; z-index: 70; position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif); letter-spacing: -2px; font-size: clamp(22px, 2vw, 30px); line-height: 1;
  color: var(--cream); padding: .25rem .1rem;
}
.menu-btn__label { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.menu-btn__word { display: block; height: 1em; line-height: 1; }
.menu-btn__word--close { position: absolute; left: 0; top: 0; transform: translateY(110%); }
.menu-btn__label { min-width: 2.6em; text-align: right; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; }

/* three bars: breathe on hover, fold into an X when the menu is open */
.burger { position: relative; display: inline-block; width: 1.05em; height: 1em; }
.burger i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transform-origin: 50% 50%;
}
.burger i:nth-child(1) { top: 22%; }
.burger i:nth-child(2) { top: 50%; margin-top: -1px; }
.burger i:nth-child(3) { top: 78%; margin-top: -2px; }

/* ---------- main grid ---------- */
.grid {
  display: grid;
  grid-template-columns: var(--left-col) 1fr;
  height: 100svh;
  width: 100%;
}

/* ---------- blocks ---------- */
.blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  height: 100%;
}
.block {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  background: var(--c);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  outline-offset: -4px;
}
.block:focus-visible { outline: 2px solid var(--cream); }
.block--substack { grid-column: 1 / 3; grid-row: 1 / 3; }
.block--shop     { grid-column: 1 / 2; grid-row: 3 / 5; }
.block--contact  { grid-column: 2 / 3; grid-row: 3 / 4; }
.block--about    { grid-column: 2 / 3; grid-row: 4 / 5; }

/* photo slot: multiplied b/w image, as in the mockup. Set via --img in JS. */
.block__img {
  position: absolute; inset: 0; z-index: 0;
  background: var(--img, none) center / cover no-repeat;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;
  opacity: .7;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out), opacity .7s ease;
}
/* on hover the plate recedes so the ink label has contrast against the flat color */
.block:hover .block__img { transform: scale(1.06); opacity: .3; }
/* the water plate is dark; lift it so the blue stays blue */
.block--contact .block__img { filter: grayscale(1) contrast(1.05) brightness(1.6); }
.block__grain {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  filter: url(#grain); opacity: .28; mix-blend-mode: multiply;
}
/* subtle hover darken so the ink blot has contrast */
.block::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--black);
  opacity: 0; transition: opacity .6s;
}
.block:hover::before { opacity: .08; }

.block__label {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--black);
}
.ink-text {
  display: inline-block; font-family: var(--serif); letter-spacing: -2px; font-size: clamp(34px, 4.2vw, 72px); line-height: 1; white-space: nowrap;
}
.ink-text { position: relative; }
.ink-layer { display: inline-block; white-space: nowrap; }
.ink-layer--flow { display: inline; white-space: normal; }
.ink-word { display: inline-block; white-space: nowrap; }
.ink-layer--flow { word-spacing: .16em; }
.ink-layer--ink { position: relative; opacity: 0; }
.ink-letter { display: inline-block; opacity: 0; will-change: transform, filter, opacity; }
.block__label > small {
  font-size: clamp(10px, .75vw, 12px); letter-spacing: .08em; text-transform: uppercase;
  margin-top: .8em; opacity: 0; transform: translateY(6px); color: var(--black);
}

/* touch devices and narrow screens: no hover, so show a quiet corner label instead */
@media (hover: none), (max-width: 1023px), (orientation: portrait) {
  .block__label { inset: auto auto 0 0; padding: 12px 14px; align-items: flex-start; transform: none !important; }
  .ink-text { font-size: clamp(22px, 5.5vw, 32px); }
  .ink-layer--ink { opacity: 1 !important; filter: none !important; }
  .ink-letter { opacity: 1 !important; filter: none !important; transform: none !important; }
  .block__label > small { display: none; }
}

/* ---------- stage (releases) ---------- */
.stage {
  position: relative; overflow: hidden; background: var(--black);
  touch-action: pan-y;
}
.stack {
  position: absolute; inset: 0;
  perspective: 1400px; perspective-origin: 62% 50%;
  cursor: grab; user-select: none;
}
.stack.is-dragging { cursor: grabbing; }
.stack__cards { position: absolute; inset: 0; transform-style: preserve-3d; }

.card {
  position: absolute; left: 50%; top: 50%;
  width: var(--card); height: var(--card);
  margin: calc(var(--card) / -2) 0 0 calc(var(--card) / -2);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  text-decoration: none; display: block;
  outline: none;
  transform: translate3d(0, 0, -2000px) rotateY(-16deg);
  opacity: 0;
  pointer-events: none; /* hit-testing is done in JS, see stack.js */
}
.stack.is-over { cursor: pointer; }
.card__art {
  position: absolute; inset: 0;
  background: var(--black) center / cover no-repeat;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(27,25,25,.6);
}
.card__art img { width: 100%; height: 100%; object-fit: cover; }
.card__halo {
  position: absolute; inset: -14px; border-radius: 6px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px rgba(227,219,206,.5), 0 0 60px 10px rgba(227,219,206,.18), 0 40px 80px -20px rgba(27,25,25,.7);
}
.card__frame {
  position: absolute; inset: -15px; border: 2px solid var(--cream); border-radius: 3px;
  pointer-events: none; opacity: 0;
}
.card__corners { position: absolute; inset: -15px; pointer-events: none; }
.card__corners i {
  position: absolute; width: 22%; height: 22%; opacity: 0;
  border: 2.5px solid var(--cream);
}
.card__corners i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.card__corners i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.card__corners i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.card__corners i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.card__tag {
  position: absolute; left: 0; bottom: 100%; margin-bottom: 12px;
  font-family: var(--serif); letter-spacing: -2px; font-size: clamp(16px, 1.3vw, 22px); color: var(--cream);
  white-space: nowrap; opacity: 0; transform: translateY(6px);
  pointer-events: none;
}
.card:focus-visible .card__art { outline: 2px solid var(--cream); outline-offset: 4px; }

.stage__ui {
  position: absolute; left: var(--gutter); bottom: var(--gutter); z-index: 5;
  display: flex; flex-direction: column; gap: 10px; max-width: 46%;
}
.stage__meta { display: flex; flex-direction: column; }
.stage__eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-70); }
.stage__title { font-family: var(--serif); letter-spacing: -2px; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.05; margin-top: 4px; }
.stage__date { font-size: 12px; color: var(--cream-70); margin-top: 4px; }
.stage__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.stage__row .stage__date { margin-top: 0; }
.stage__open {
  display: inline-flex; align-items: center; gap: 6px; align-self: center;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--cream);
  border-bottom: 1px solid var(--cream-40); padding-bottom: 2px; transition: border-color .3s;
}
.stage__open:hover { border-color: var(--cream); }
.stage__nav { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.nav-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cream-40);
  display: grid; place-items: center; font-size: 16px; transition: background .3s, color .3s, border-color .3s;
}
.nav-btn:hover, .nav-btn:focus-visible { background: var(--cream); color: var(--black); border-color: var(--cream); }
.stage__count { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--cream-70); letter-spacing: .08em; }
.stage__hint { margin: 0; font-size: 11px; color: var(--cream-40); letter-spacing: .04em; }

/* ---------- logo ---------- */
.logo {
  position: absolute; right: var(--gutter); bottom: var(--gutter); z-index: 5;
  width: clamp(220px, 22vw, 410px); aspect-ratio: 1.55;
  overflow: visible;
  pointer-events: none;
}
.logo canvas { position: absolute; width: 240%; height: 240%; left: -70%; top: -70%; display: block; }
.logo__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: invert(1) sepia(.2) brightness(1.05); opacity: 0; }
.logo.no-webgl canvas { display: none; }
.logo.no-webgl .logo__fallback { opacity: .95; }

/* ---------- full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--black);
  display: flex; flex-direction: column;
  padding: calc(var(--gutter) * 3) var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0);
}
.menu[hidden] { display: none; }
.menu__close {
  position: absolute; top: calc(var(--gutter) * 0.9); right: var(--gutter);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif); letter-spacing: -2px; font-size: clamp(22px, 2vw, 30px); line-height: 1;
}
.menu__list {
  list-style: none; margin: auto 0; padding: 0;
  display: flex; flex-direction: column;
}
.menu__list li { overflow: hidden; }
.menu__list a {
  display: inline-flex; align-items: baseline; gap: .15em; text-decoration: none;
  /* scales with both axes so six lines always fit above the footer */
  font-family: var(--serif); letter-spacing: -2px; font-size: clamp(36px, min(13vw, 9.5svh), 118px); line-height: 1.02;
  color: var(--cream); position: relative; transition: color .5s;
}
.menu__list a:hover, .menu__list a:focus-visible { color: transparent; }
.menu__list a:hover .menu__ext, .menu__list a:focus-visible .menu__ext { color: var(--c); }
/* chrome: a second copy of the word with a metallic gradient clipped to the
   glyphs, built from the item's own color, with a sheen that keeps sweeping */
.menu__list a::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  pointer-events: none; opacity: 0; transition: opacity .5s ease;
  color: transparent;
  background-image: linear-gradient(105deg,
    color-mix(in srgb, var(--c) 55%, var(--black)) 0%,
    var(--c) 18%,
    color-mix(in srgb, var(--c) 35%, var(--cream)) 30%,
    var(--cream) 36%,
    color-mix(in srgb, var(--c) 45%, var(--cream)) 42%,
    var(--c) 55%,
    color-mix(in srgb, var(--c) 45%, var(--black)) 70%,
    var(--c) 85%,
    color-mix(in srgb, var(--c) 30%, var(--cream)) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
}
.menu__list a:hover::after, .menu__list a:focus-visible::after { opacity: 1; animation: chrome-sheen 4.5s linear infinite; }
@keyframes chrome-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.menu__list a > .menu__ext { position: relative; z-index: 1; transition: color .5s; }
@media (prefers-reduced-motion: reduce) { .menu__list a:hover::after { animation: none; } }
.menu__ext .icon { width: .55em; height: .55em; vertical-align: 0; }
.menu__foot {
  flex: 0 0 auto; margin-top: clamp(16px, 3svh, 32px); padding-top: 16px;
  border-top: 1px solid var(--cream-15);
  display: flex; flex-wrap: wrap; gap: 10px clamp(16px, 2.5vw, 32px);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.menu__foot a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--cream-70); white-space: nowrap; transition: color .3s; }
.menu__foot a .icon { width: 16px; height: 16px; }
.menu__foot a:hover { color: var(--cream); }

/* ---------- popup sheet (about / shop / contact / release) ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(27, 25, 25, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; }
.sheet__panel {
  position: absolute; left: 50%; bottom: 0;
  width: min(100%, 980px); max-height: calc(100svh - 56px);
  background: var(--cream); color: var(--black);
  border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -20px 60px rgba(27,25,25,.35);
}
.sheet__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(20px, 4vw, 48px) 0;
  flex: 0 0 auto;
}
.sheet__crumb { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(27,25,25,.55); }
.sheet__close { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); letter-spacing: -2px; font-size: 22px; line-height: 1; padding: 6px 2px; position: relative; }
.sheet__close .icon { width: 20px; height: 20px; }
.sheet__close::after { content: ""; position: absolute; left: 2px; right: 30px; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.sheet__close:hover::after { transform: scaleX(1); transform-origin: left; }
.sheet__body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 24px clamp(20px, 4vw, 48px) clamp(32px, 5vw, 64px);
  flex: 1 1 auto;
}

.sheet h1 { font-family: var(--serif); letter-spacing: -2px; font-weight: 400; font-size: clamp(38px, 5.6vw, 76px); line-height: .98; margin: 0 0 .35em;  }
.sheet h2 { font-family: var(--serif); letter-spacing: -2px; font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; margin: 1.6em 0 .5em; }
.sheet p { font-size: clamp(13px, .95vw, 15px); line-height: 1.65; margin: 0 0 1em; max-width: 64ch; }
.sheet .about-copy h2:first-of-type { margin-top: 1.2em; }
.about-list { margin: 0 0 1.2em; padding-left: 1.2em; font-size: clamp(13px, .95vw, 15px); line-height: 1.6; max-width: 64ch; }
.about-list li { margin: 2px 0; }
.about-list--num li { margin: 8px 0; padding-left: 4px; }
.about-list--num li::marker { font-weight: 700; }
.ig-embed { position: sticky; top: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(27,25,25,.18); background: var(--cream); max-width: 420px; justify-self: end; width: 100%; }
.ig-embed iframe { display: block; width: 100%; height: 760px; border: 0; }
/* interim: crop Instagram's header (avatar/handle) and footer (likes, caption) out of the frame */
.ig-embed--cropped .ig-embed__clip { height: 800px; overflow: hidden; position: relative; } /* ends just under "View more on Instagram" at 420px wide; adjust if IG shifts */
.ig-embed--cropped iframe { margin-top: -54px; height: 1200px; pointer-events: auto; }
.vid-note, .ig-note { font-size: 11px; letter-spacing: .04em; color: rgba(27,25,25,.6); margin: 10px 0 0; }
/* self-hosted video: no chrome at all */
.vid { position: sticky; top: 0; border-radius: 8px; overflow: hidden; background: var(--black); max-width: 420px; width: 100%; justify-self: end; aspect-ratio: 9 / 16; }
.vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.credits { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; line-height: 1.6; color: rgba(27,25,25,.7); }
.btn .icon { width: 14px; height: 14px; }
.sheet .lede { font-family: var(--serif); letter-spacing: -2px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; max-width: 32ch; }
.sheet a { color: var(--black); }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(27,25,25,.55); margin-bottom: 10px; display: block; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 18px; padding: 0; list-style: none; }
.tags li { font-size: 12px; letter-spacing: .04em; border: 1px solid rgba(27,25,25,.25); border-radius: 999px; padding: 3px 10px; }

/* About */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.about-photos { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; align-content: start; }
.about-photos figure { margin: 0; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--cream) 85%, var(--black)); position: relative; }
.about-photos figure.is-wide { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.about-photos figure.is-tall { aspect-ratio: 4 / 5; }
.about-photos img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; transition: filter .6s; }
.about-photos figure:hover img { filter: grayscale(0); }
.about-photos figure::after { content: ""; position: absolute; inset: 0; background: var(--c, var(--green)); mix-blend-mode: screen; opacity: .0; pointer-events: none; }
.about-ad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin-top: 8px; }
.about-ad span { font-family: var(--serif); letter-spacing: -2px; font-size: clamp(20px, 1.8vw, 26px); }

/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: 8px; }
.product { display: flex; flex-direction: column; text-decoration: none; }
.product__img { display: block; aspect-ratio: 1; background: color-mix(in srgb, var(--cream) 85%, var(--black)) center / cover no-repeat; border-radius: 6px; overflow: hidden; position: relative; }
.product__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.product:hover .product__img img { transform: scale(1.04); }
.product__kind { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(27,25,25,.55); margin-top: 14px; }
.product h3 { font-family: var(--serif); letter-spacing: -2px; font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); margin: 4px 0 6px; line-height: 1.05; }
.product p { font-size: 13px; margin: 0 0 10px; }
.product ul { margin: 0 0 14px; padding-left: 1.1em; font-size: 14px; color: rgba(27,25,25,.75); }
.product ul li { margin: 2px 0; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: var(--black); color: var(--cream) !important; text-decoration: none;
  padding: 12px 18px; border-radius: 999px; font-size: 14px; letter-spacing: .02em;
  transition: background .3s, transform .3s var(--ease-out);
}
.btn:hover { background: var(--black); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--black) !important; border: 1px solid rgba(27,25,25,.3); }
.btn--ghost:hover { background: rgba(27,25,25,.06); transform: none; }

/* Contact */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 12px; max-width: 760px; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(27,25,25,.6); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--black);
  background: rgba(227,219,206,.55); border: 1px solid rgba(27,25,25,.25); border-radius: 8px;
  padding: 12px 14px; outline: none; transition: border-color .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--black); background: rgba(227,219,206,.9); }
.field textarea { min-height: 150px; resize: vertical; }
.topic { display: flex; flex-wrap: wrap; gap: 8px; }
.topic input { position: absolute; opacity: 0; pointer-events: none; }
.topic label { text-transform: none; letter-spacing: 0; color: inherit; }
.topic span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(27,25,25,.3); font-size: 14px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.topic input:checked + span { background: var(--black); color: var(--cream); border-color: var(--black); }
.topic input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.licensing { display: none; }
.form.is-licensing .licensing { display: flex; }
.form-note { font-size: 13px; color: rgba(27,25,25,.6); grid-column: 1 / -1; margin: 0; }
.form-status { grid-column: 1 / -1; font-family: var(--serif); letter-spacing: -2px; font-size: 20px; min-height: 1.4em; }
.hp { position: absolute; left: -9999px; }

/* Payout chart */
.chart { display: grid; gap: 8px; margin: 14px 0 10px; max-width: 64ch; }
.chart__group { --accent: var(--black); padding: 7px 10px 7px 12px; border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; }
.chart__group--flag { background: color-mix(in srgb, var(--orange) 10%, transparent); }
.chart__row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; font-size: 12px; }
.chart__name { letter-spacing: .04em; color: var(--accent); }
.chart__group--flag .chart__name { font-weight: 700; }
.chart__track { position: relative; height: 14px; background: rgba(27,25,25,.08); border-radius: 3px; overflow: hidden; }
.chart__base { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.chart__bar { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 0 3px 3px 0; }
.chart__val { font-variant-numeric: tabular-nums; white-space: nowrap; color: rgba(27,25,25,.75); }
.chart__note { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--accent) 80%, var(--black)); margin: 6px 0 0 !important; }
.chart__note .icon { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.chart__foot { font-size: 11px; color: rgba(27,25,25,.6); margin-top: 6px !important; }
.chart__bc { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; padding: 12px 14px; border: 1px solid rgba(27,25,25,.2); border-radius: 8px; background: rgba(227,219,206,.5); }
.chart__bc .icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }

/* Accordion */
.acc { border-top: 1px solid rgba(27,25,25,.18); max-width: 64ch; }
.acc__item { border-bottom: 1px solid rgba(27,25,25,.18); }
.acc__sum { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-family: var(--serif); letter-spacing: -0.5px; font-size: clamp(20px, 1.8vw, 24px); }
.acc__sum::-webkit-details-marker { display: none; }
.acc__chev { display: inline-flex; width: 18px; height: 18px; transform: rotate(45deg); transition: transform .35s var(--ease-out); opacity: .7; }
.acc__chev .icon { width: 18px; height: 18px; }
.acc__item[open] .acc__chev { transform: rotate(0deg); }
.acc__body { padding: 0 0 16px; }
.acc__body p { font-size: 13px; }
.acc__links { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; font-size: 13px; }
.acc__links a { text-decoration: none; }
.acc__links a strong { text-decoration: underline; text-underline-offset: 3px; }
.acc__links .icon { width: 12px; height: 12px; }

/* Videos on a release page */
.videos { display: grid; gap: 18px; margin: 8px 0 4px; max-width: 64ch; }
.video { margin: 0; }
.video__frame { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--black); border: 1px solid rgba(27,25,25,.2); }
.video__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; font-size: 12px; }
.video figcaption strong { font-family: var(--serif); letter-spacing: -0.5px; font-weight: 400; font-size: 20px; }
.video figcaption span { letter-spacing: .08em; text-transform: uppercase; font-size: 10px; color: rgba(27,25,25,.55); }

/* Release */
.release { display: grid; grid-template-columns: minmax(220px, 420px) 1fr; gap: clamp(20px, 3.4vw, 48px); align-items: start; }
.release__side { position: sticky; top: 0; }
.release__art { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--cream) 85%, var(--black)); }
.player { margin-top: 12px; border: 1px solid rgba(27,25,25,.2); border-radius: 8px; overflow: hidden; background: var(--cream); }
.player iframe { display: block; border: 0; width: 100%; height: 42px; }
.player iframe[src*='size=large'] { height: 470px; }
.release__art img { width: 100%; height: 100%; object-fit: cover; }
.release h1 { font-size: clamp(34px, 4.6vw, 64px); }
.links { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.links li { display: flex; }
.links__wide { grid-column: 1 / -1; }
.links__nospot { border-style: dashed !important; color: rgba(27,25,25,.7); }
.links__nospot:hover { border-style: solid !important; }
.sheet__close:focus-visible, .menu-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; border-radius: 4px; }
.links a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  text-decoration: none; padding: 0 12px 0 14px; min-height: 56px; width: 100%; gap: 8px; border: 1px solid rgba(27,25,25,.25); border-radius: 10px;
  font-size: 13px; white-space: nowrap; transition: background .25s, border-color .25s;
}
.links a:hover { background: var(--black); color: var(--cream); border-color: var(--black); }
.links a small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; text-align: right; white-space: nowrap; flex: 0 0 auto; }
.links__name { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; min-width: 0; }
.links__name .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.release__pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(27,25,25,.18);
  font-family: var(--sans); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.release__pager a { text-decoration: none; color: rgba(27,25,25,.75); transition: color .25s; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.release__pager a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.release__pager > :last-child { text-align: right; }
.release__all { justify-self: center; border: 1px solid rgba(27,25,25,.25); border-radius: 999px; padding: 8px 14px; }
.release__all:hover { background: var(--black); color: var(--cream) !important; text-decoration: none !important; }

/* Releases index (from menu) */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; margin-top: 8px; }
.rel-grid a { text-decoration: none; }
.rel-grid .thumb { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--cream) 85%, var(--black)); }
.rel-grid .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.rel-grid a:hover .thumb img { transform: scale(1.05); }
.rel-grid h3 { font-family: var(--serif); letter-spacing: -2px; font-weight: 400; font-size: 20px; margin: 10px 0 0; line-height: 1.1; }
.rel-grid time { font-size: 12px; color: rgba(27,25,25,.55); }

/* ---------- preloader ---------- */
.preload {
  position: fixed; inset: 0; z-index: 95; background: var(--black);
  display: grid; place-items: center;
}
.preload[hidden] { display: none; }
.preload__logo { width: clamp(120px, 19vw, 276px); aspect-ratio: 1.55; }
.preload__logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.preload__logo path { fill: var(--cream); fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; stroke: var(--cream); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- TV static over everything ---------- */
.static {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  width: 100%; height: 100%;
  opacity: .16; image-rendering: pixelated; mix-blend-mode: normal;
}

/* ---------- responsive ---------- */
@media (max-width: 1023px), (orientation: portrait) {
  :root { --card: clamp(170px, 46vw, 300px); }
  .grid { grid-template-columns: 1fr; height: auto; }
  .stage { order: -1; height: 100svh; min-height: 560px; }
  .blocks { height: auto; grid-template-rows: repeat(4, minmax(22vw, 1fr)); min-height: 100vw; }
  .stack { perspective: 1100px; perspective-origin: 70% 40%; }
  .stage__ui { max-width: 60%; }
  .logo { width: clamp(172px, 38vw, 250px); }
  .about-grid, .release { grid-template-columns: 1fr; }
  .release__side { position: static; max-width: 420px; }
  .ig-embed, .vid { position: static; justify-self: start; }
  .form { grid-template-columns: 1fr; }
  .sheet__panel { max-height: calc(100svh - 24px); border-radius: 18px 18px 0 0; }
}
@media (max-width: 600px) {
  .stage { min-height: 520px; }
  .stage__ui { max-width: 100%; right: var(--gutter); }
  .stage__title { font-size: 26px; }
  .logo { bottom: auto; top: calc(var(--gutter) * 0.75); left: var(--gutter); right: auto; width: 150px; }
  .stage__hint { display: none; }
  .blocks { min-height: 120vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}