:root {
  --bg: #ffffff;
  --bg-2: #f7f3ee;
  --card: #ffffff;
  --ink: #1a1a1a;
  --muted: #7a6f63;
  --line: rgba(26, 26, 26, 0.08);
  --line-2: rgba(26, 26, 26, 0.14);
  /* brand pastel orange, from the orange-khaki watercolour */
  --accent: #f0a060;
  --accent-deep: #dd6f1c;
  --accent-text: #a9520f;
  --accent-ink: #1a1a1a;
  --khaki: #ab885b;
  --yt: #ff0033;
  --sp: #1ed760;
  --ap: #a35bff;
  --sc: #ff5500;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  /* tile titles: native SF Pro, readable at small sizes (Anton is kept for the one big headline) */
  --title: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Space Grotesk", system-ui, sans-serif;
  /* native iOS type for UI copy; brand faces stay on headlines and labels */
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 24px;
  --glass: rgba(255, 255, 255, 0.8);
  --glass-hi: rgba(255, 255, 255, 0.94);
  --glass-edge: rgba(26, 26, 26, 0.08);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(26, 26, 26, 0.04),
    0 8px 24px rgba(120, 70, 20, 0.08);
  --blur: blur(22px) saturate(180%);
  --gutter: 16px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* brand orange-khaki watercolour, faint over the white page.
   One static fixed layer: cheap; background-attachment: fixed janks on iOS. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("/assets/watercolour.webp") center / cover no-repeat;
  opacity: 0.06;
}

/* faint paper grain over everything */
.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  overflow-x: clip;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(40px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------ ticker */
.ticker {
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: calc(8px + env(safe-area-inset-top) * 0) 0 8px;
  padding-top: max(8px, env(safe-area-inset-top));
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.ticker__track span { padding: 0 14px; white-space: nowrap; }
.ticker__track span::after { content: "✶"; margin-left: 28px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ hero */
.hero {
  position: relative;
  text-align: center;
  padding: 56px 0 28px;
  isolation: isolate;
}

.logo {
  margin: 0 auto;
  width: min(80%, 416px);
}
/* The stencil wordmark, cut into its five letters (x ranges measured from the artwork where the outlines meet) so each can drop in on its own. */
.logo__word {
  position: relative;
  display: block;
  aspect-ratio: 1600 / 368;
}
.logo .l,
.logo__ghost {
  position: absolute;
  inset: 0;
}
.logo .l {
  background: url("/assets/wordmark-stencil-faded.webp") center / 100% 100% no-repeat;
  clip-path: inset(0 calc(100% - var(--x1)) 0 var(--x0));
  opacity: 0;
  transform: translateY(40%) rotate(-6deg) scale(1.1);
  animation: drop 0.9s var(--spring) forwards;
  animation-delay: calc(0.12s + var(--i) * 0.07s);
}
.logo .l:nth-child(1) { --x0: 0%; --x1: 18.75%; }
.logo .l:nth-child(2) { --x0: 18.75%; --x1: 37.5%; }
.logo .l:nth-child(3) { --x0: 37.5%; --x1: 61.75%; }
.logo .l:nth-child(4) { --x0: 61.75%; --x1: 80.8%; }
.logo .l:nth-child(5) { --x0: 80.8%; --x1: 100%; }
@keyframes drop {
  to { opacity: 1; transform: none; }
}

/* glitch: orange + cyan copies of the logo split apart and tear in horizontal slices */
.logo__ghost {
  opacity: 0;
  pointer-events: none;
  /* outline-only mask, so the colour shows as fringes rather than filling the letters */
  -webkit-mask: url("/assets/wordmark-stencil-ink.webp") center / 100% 100% no-repeat;
  mask: url("/assets/wordmark-stencil-ink.webp") center / 100% 100% no-repeat;
}
.logo__ghost--a { background: var(--accent-deep); }
.logo__ghost--b { background: #2ee6ff; }
.logo.glitch .logo__word { animation: glitch 0.5s steps(2) 1; }
/* multiply: over the dark logo the copies vanish, so only the offset fringes show colour */
.logo.glitch .logo__ghost { mix-blend-mode: multiply; }
.logo.glitch .logo__ghost--a { animation: tear-a 0.5s steps(1) 1; }
.logo.glitch .logo__ghost--b { animation: tear-b 0.5s steps(1) 1; }
@keyframes glitch {
  30% { transform: translate(-2px, 1px) skewX(-6deg); }
  60% { transform: translate(2px, -1px); }
  100% { transform: none; }
}
@keyframes tear-a {
  0% { opacity: 0.85; transform: translate(-6px, 0); clip-path: inset(10% 0 55% 0); }
  25% { opacity: 0.85; transform: translate(5px, 0); clip-path: inset(60% 0 8% 0); }
  50% { opacity: 0.85; transform: translate(-3px, 0); clip-path: inset(32% 0 40% 0); }
  75% { opacity: 0.6; transform: translate(4px, 0); clip-path: inset(0 0 80% 0); }
  100% { opacity: 0; transform: none; clip-path: inset(0); }
}
@keyframes tear-b {
  0% { opacity: 0.75; transform: translate(6px, 0); clip-path: inset(48% 0 22% 0); }
  25% { opacity: 0.75; transform: translate(-5px, 0); clip-path: inset(5% 0 70% 0); }
  50% { opacity: 0.75; transform: translate(4px, 0); clip-path: inset(70% 0 5% 0); }
  75% { opacity: 0.5; transform: translate(-4px, 0); clip-path: inset(25% 0 50% 0); }
  100% { opacity: 0; transform: none; clip-path: inset(0); }
}

.hero__handle {
  margin: 16px 0 2px;
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero__tag {
  margin: 10px 0 0;
  color: var(--ink);
  font: 600 13px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}
.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 17px;
  transition: transform 0.35s var(--spring), background 0.25s, color 0.25s, border-color 0.25s;
}
.socials a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-3px) rotate(-6deg); }
.socials a:active { transform: scale(0.9); }

/* ------------------------------------------------------------ latest */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: rgba(26, 26, 26, 0.2); }
.live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.live, .foot__sync .dot { position: relative; flex: none; }
.live::after, .foot__sync .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } }

.feature {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
}
.feature__media {
  position: relative;
  aspect-ratio: 16 / 9; /* YouTube thumbnail ratio: the whole image fits, nothing cropped */
  overflow: hidden;
  background: #000;
}
.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.feature__play {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
}
.feature__play span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 26px;
  padding-left: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s var(--spring), background 0.2s;
}
.feature__play:hover span { transform: scale(1.1); background: var(--accent); }
.feature__play:active span { transform: scale(0.92); }


/* rotating "new episode" sticker */
.sticker {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  width: 84px;
  height: 84px;
  pointer-events: none;
}
.sticker svg { width: 100%; height: 100%; animation: spin 12s linear infinite; }
.sticker text { font: 700 11.5px var(--mono); letter-spacing: 0.18em; fill: var(--accent-ink); }
.sticker circle { fill: var(--accent); }
.sticker b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 400 22px/1 var(--display);
  color: var(--accent-ink);
}
@keyframes spin { to { transform: rotate(360deg); } }

.feature__body { padding: 16px 18px 18px; position: relative; z-index: 1; }
.feature__meta { font: 600 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.feature__title button { font: inherit; text-transform: inherit; text-align: left; }
.feature__title {
  margin: 8px 0 16px;
  font: 400 clamp(44px, 14vw, 72px)/0.9 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
}

/* platform buttons */
.plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plat {
  --c: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  font: 600 13px/1 var(--body);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--spring), border-color 0.25s, color 0.25s;
}
.plat svg { font-size: 18px; color: var(--c); transition: color 0.25s; }
.plat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
}
.plat:hover::before, .plat:focus-visible::before { transform: translateY(0); }
.plat:hover, .plat:focus-visible { border-color: var(--c); color: #fff; }
.plat:hover svg, .plat:focus-visible svg { color: #fff; }
.plat:active { transform: scale(0.95); }
.plat--yt { --c: var(--yt); }
.plat--sp { --c: var(--sp); }
.plat--ap { --c: var(--ap); }
.plat--sc { --c: var(--sc); }
.plat--bc { --c: #1da0c3; }

/* ------------------------------------------------------------ sections */
.block { margin-top: 44px; }
.block[hidden] { display: none; }
.eyebrow__count { order: 2; margin-left: auto; padding-left: 10px; color: var(--ink); }
.eyebrow:has(.eyebrow__count)::after { order: 1; }

/* one row = one big tap target */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  padding: 8px 14px 8px 8px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  text-align: left;
  transition: border-color 0.25s, background 0.25s, transform 0.35s var(--spring);
}
.row__art { flex: none; width: 60px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.row__art--wide { width: 104px; aspect-ratio: 16 / 9; } /* YouTube ratio: whole thumbnail, no crop */
.row__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.row:hover .row__art img { transform: scale(1.08); }
.row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__meta { font: 400 10.5px/1.1 var(--mono); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.row__title { font: 600 18px/1.2 var(--title); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__plats { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.row__plats svg:nth-child(1) { color: var(--yt); }
.row__plats svg:nth-child(2) { color: var(--sp); }
.row__plats svg:nth-child(3) { color: var(--ap); }
.row__plats em { font: 400 10.5px/1 var(--mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 4px; }
.row__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  padding-left: 2px;
  transition: transform 0.35s var(--spring), background 0.25s;
}
.row__go--sc { background: var(--sc); color: #fff; font-size: 18px; padding: 0; }
.row:hover .row__go { transform: scale(1.1) rotate(-8deg); }

.more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.25s, transform 0.35s var(--spring);
}
.more[hidden] { display: none; }
.more svg { font-size: 16px; transform: rotate(135deg); transition: transform 0.35s var(--spring); }
.more:hover { background: var(--glass-hi); }
.more:hover svg { transform: rotate(135deg) translate(2px, -2px); }
.more:active { transform: scale(0.97); }

/* ------------------------------------------------------------ records */
.records { display: grid; gap: 14px; }
.rec {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.3s;
}
.rec:hover { border-color: var(--line-2); }
.rec__sleeve { display: block; position: relative; width: 104px; aspect-ratio: 1; }
.rec__sleeve img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 20px rgba(26, 26, 26, 0.18); }
/* vinyl slides out of the sleeve */
.rec__disc {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #0b0a09 0 3%, var(--accent) 3.5% 17%, #111 17.5% 19%, transparent 19.5%),
    conic-gradient(from 30deg, transparent 0 10%, rgba(255, 255, 255, 0.14) 14%, transparent 20% 60%, rgba(255, 255, 255, 0.1) 64%, transparent 70%),
    repeating-radial-gradient(circle, #2a2826 0 1px, #121110 1px 2.6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 16px rgba(26, 26, 26, 0.25);
  transition: transform 0.9s var(--spring);
}
.rec.is-in .rec__disc { transform: translateX(34%) rotate(200deg); }
.rec:hover .rec__disc { transform: translateX(40%) rotate(320deg); }
.rec__text { display: flex; flex-direction: column; min-width: 0; }
.rec__cat { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--accent-text); }
.rec__title { display: block; margin: 6px 0 2px; font: 700 20px/1.15 var(--title); letter-spacing: -0.015em; }
.rec__artist { display: block; margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.rec__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font: 600 12px/1 var(--body);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.rec__cta svg:first-child { color: #1da0c3; font-size: 15px; }
.rec:hover .rec__cta { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rec:active { transform: scale(0.98); }

/* ------------------------------------------------------------ vlogs */
.vlogs { display: grid; gap: 14px; }
.vlog { display: block; }
.vlog__media, .vlog__title, .vlog__meta { display: block; }
.vlog__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.vlog__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.vlog:hover .vlog__media img { transform: scale(1.05); }
.vlog__media .feature__play span { width: 56px; height: 56px; font-size: 20px; }
.vlog__title { margin: 10px 2px 0; font: 600 18px/1.2 var(--title); letter-spacing: -0.01em; }
.vlog__meta { margin: 4px 2px 0; font: 400 10.5px/1 var(--mono); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.empty { padding: 32px 0; text-align: center; color: var(--muted); font: 400 12px/1.4 var(--mono); }

/* ------------------------------------------------------------ team */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
.member { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; padding: 4px 0; }
.member__pic {
  position: relative;
  display: block;
  flex: none;
  /* explicit size: iOS Safari doesn't resolve the photo's height: 100% against an aspect-ratio height */
  width: 84px;
  height: 84px;
  border-radius: 50%;
  /* orange ring, like an Instagram story ring in the brand colours */
  padding: 3px;
  background: conic-gradient(from 200deg, var(--accent-deep), var(--accent), #f6d2b0, var(--accent-deep));
  transition: transform 0.4s var(--spring);
}
.member__pic img,
.member__initial {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--bg);
  object-fit: cover;
  background: var(--bg-2);
}
.member__initial { display: grid; place-items: center; font: 400 32px/1 var(--display); color: var(--muted); }
.member__ig {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  border: 2px solid var(--bg);
}
.member:hover .member__pic { transform: translateY(-3px) rotate(-4deg); }
.member:active .member__pic { transform: scale(0.94); }
.member__name { margin-top: 9px; max-width: 100%; font: 600 14px/1.2 var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member__handle { margin-top: 3px; max-width: 100%; font: 400 10px/1.2 var(--mono); letter-spacing: 0.04em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ links */
.links { margin-top: 44px; display: grid; gap: 10px; }
.cta { margin-top: 12px; display: grid; gap: 10px; }
.cta:empty { display: none; }
.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 18px 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s, border-color 0.3s, transform 0.3s var(--spring);
}
.link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s var(--ease);
}
.link:hover::before, .link:focus-visible::before { clip-path: inset(0 0 0 0); }
.link:hover, .link:focus-visible { color: var(--bg); border-color: var(--ink); }
.link:active { transform: scale(0.98); }
.link__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 18px;
  color: var(--ink);
}
.link__text { flex: 1; min-width: 0; }
.link__label { display: block; font: 600 17px/1.2 var(--title); letter-spacing: -0.01em; }
.link__sub { display: block; margin-top: 4px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.link__badge {
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
.link > svg { font-size: 20px; transition: transform 0.4s var(--spring); }
.link:hover > svg { transform: translate(3px, -3px) scale(1.1); }

/* ------------------------------------------------------------ footer */
.foot { margin-top: 56px; text-align: center; color: rgba(26, 26, 26, 0.75); }
.foot__mark {
  width: min(78%, 400px);
  filter: none;
  margin: 0 auto;
  aspect-ratio: 1600 / 368;
  background: url("/assets/wordmark-stencil-faded.webp") center / 100% 100% no-repeat;
  opacity: 0.18;
}
.foot__sync {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 6px;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foot__sync .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sp); }
.foot__copy { margin: 0; font-size: 12px; opacity: 0.7; }

/* ------------------------------------------------------------ sheet */
.sheet { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; transition: visibility 0s 0.5s; }
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  transform: translateY(105%);
  transition: transform 0.5s var(--spring);
  outline: none;
  box-shadow: 0 -20px 60px rgba(26, 26, 26, 0.2);
}
.sheet.is-open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { transform: translateY(var(--drag, 0px)); }
.sheet.is-dragging .sheet__panel { transition: none; }
.sheet__grab { width: 44px; height: 5px; margin: 10px auto 4px; border-radius: 5px; background: var(--line-2); flex: none; }
.sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass-hi);
  border: 1px solid var(--line-2);
  font-size: 16px;
}
.sheet__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
}
.sheet__media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; margin-top: 6px; }
.sheet__media iframe, .sheet__media img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.sheet__media--sc { aspect-ratio: auto; height: 166px; }
.sheet__meta { margin: 18px 0 0; font: 600 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.sheet__title { margin: 8px 0 16px; font: 700 28px/1.1 var(--title); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sheet__desc { margin-top: 20px; color: #4a443d; font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.sheet__desc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-deep); text-underline-offset: 3px; }
.sheet__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin-top: 10px;
  border-radius: 14px;
  border: 1px dashed var(--line-2);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s;
}
.sheet__share:hover { color: var(--ink); border-color: var(--ink); }
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 120;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translate(-50%, 150%);
  transition: transform 0.45s var(--spring);
}
.toast.is-in { transform: translate(-50%, 0); }

/* episode chooser */
.pick { display: flex; align-items: center; gap: 14px; padding-right: 44px; margin-top: 4px; }
.pick__art { width: 104px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; flex: none; }
.pick .sheet__meta { margin: 0; font-size: 10px; letter-spacing: 0.12em; }
.pick .sheet__title { margin: 6px 0 0; font-size: 24px; }
.pick__ask { margin: 22px 0 10px; font: 600 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.choices { display: grid; gap: 8px; }
.choice {
  --c: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: var(--card);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(14px);
  transition: transform 0.3s var(--spring), border-color 0.25s, color 0.25s;
}
.sheet.is-open .choice { animation: rise 0.5s var(--spring) forwards; }
.sheet.is-open .choice:nth-child(2) { animation-delay: 0.06s; }
.sheet.is-open .choice:nth-child(3) { animation-delay: 0.12s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.choice > svg:first-child { font-size: 26px; color: var(--c); transition: color 0.25s; }
.choice span { flex: 1; font: 600 18px/1.15 var(--title); letter-spacing: -0.01em; }
.choice small { display: block; margin-top: 3px; font: 400 13px/1.2 var(--body); letter-spacing: 0; color: var(--muted); transition: color 0.25s; }
.choice > svg:last-child { font-size: 18px; }
.choice::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: translateX(-101%); transition: transform 0.4s var(--ease); }
.choice:hover::before, .choice:focus-visible::before, .choice:active::before { transform: none; }
.choice:hover, .choice:focus-visible, .choice:active { border-color: var(--c); color: #fff; }
.choice:hover > svg, .choice:focus-visible > svg, .choice:active > svg, .choice:hover small, .choice:active small { color: #fff; }
.choice--yt { --c: var(--yt); }
.choice--sp { --c: var(--sp); }
.choice--ap { --c: var(--ap); }
.sheet__share + .sheet__media { margin-top: 22px; }

/* ------------------------------------------------------------ liquid glass */
.feature, .row, .link:not(.link--featured), .rec, .choice, .link__icon {
  background: var(--glass);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.row:hover, .row:focus-visible { background: var(--bg-2); border-color: var(--line-2); }
.row:active { background: #f1ebe3; transform: scale(0.97); }
.row, .choice { border-radius: 22px; }
.row__art { border-radius: 14px; }
.link__icon { border-radius: 14px; }
.link--featured { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 30px rgba(221, 111, 28, 0.28); }

/* floating controls get real refraction */
.socials a, .shop-chip, .sheet__close, .feature__play span, .sheet__panel {
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.socials a { background: var(--glass); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.feature__play span {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 30px rgba(26, 26, 26, 0.25);
}
.feature__play:hover span { background: var(--accent); color: var(--ink); }
.sheet__close { background: var(--glass-hi); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.sheet__panel {
  left: 8px;
  right: 8px;
  bottom: 8px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--glass-edge);
  border-radius: 34px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 -10px 50px rgba(26, 26, 26, 0.18);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet__scrim { background: rgba(26, 26, 26, 0.22); }


/* looping animations stop while their section is off screen (see app.js) */
.is-offscreen, .is-offscreen *, .is-offscreen::after, .is-offscreen *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------ reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--d, 0) * 60ms); }
.reveal.is-in { opacity: 1; transform: none; }

@media (min-width: 720px) {
  body { font-size: 16px; }
  .hero { padding-top: 80px; }
  .sheet__panel { bottom: 50%; border-radius: 34px; border-bottom: 1px solid var(--glass-edge); transform: translateY(calc(50% + 40px)) scale(0.96); opacity: 0; transition: transform 0.5s var(--spring), opacity 0.3s; max-height: 86dvh; }
  .sheet.is-open .sheet__panel { transform: translateY(50%); opacity: 1; }
  .sheet__grab { visibility: hidden; }
}

@media (hover: none) {
  .plat:hover::before { transform: translateY(101%); }
  .plat:hover { border-color: var(--line-2); color: inherit; }
  .plat:hover svg { color: var(--c); }
  .link:hover::before { clip-path: inset(0 100% 0 0); }
  .link:hover { color: inherit; border-color: var(--line-2); }
  .choice:hover:not(:active)::before { transform: translateX(-101%); }
  .choice:hover:not(:active) { color: inherit; border-color: var(--line-2); }
  .choice:hover:not(:active) > svg:first-child { color: var(--c); }
  .choice:hover:not(:active) small { color: var(--muted); }
  .choice:hover:not(:active) > svg:last-child { color: inherit; }
  .socials a:hover { background: var(--glass); color: inherit; border-color: var(--line-2); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .grain, .ticker__track { animation: none !important; }
  .logo .l { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .choice { opacity: 1; transform: none; }
}

/* featured link (shop) */
.link--featured { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); min-height: 76px; }
.link--featured .link__icon { background: var(--accent-ink); color: var(--accent); border-color: transparent; }
.link--featured .link__label { font-size: 19px; font-weight: 700; }
.link--featured::before { background: var(--ink); }
.link--featured:hover, .link--featured:focus-visible { color: var(--bg); }
.link--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shine 3.6s var(--ease) 1.5s infinite;
}
@keyframes shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (hover: none) { .link--featured:hover { color: var(--accent-ink); border-color: var(--accent); } }
.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.35s var(--spring), background 0.25s;
}
.shop-chip svg { font-size: 15px; }
.shop-chip:hover { background: var(--accent); transform: translateY(-2px) rotate(-2deg); }
.shop-chip:active { transform: scale(0.94); }