/* Atomic Rocket Seeders — site styles
   Palette taken from "ARS logo 02": paper grey, black ink, hairline grey. */

:root {
  --paper: #e6e6e6;
  --paper-deep: #d9d9d9;
  --ink: #000000;
  --ink-soft: #2a2a2a;
  --muted: #5e5e5e;
  --line: #b8b8b8;
  --line-faint: #cfcfcf;

  --font: "Jost", "Helvetica Neue", Arial, sans-serif;
  --track: 0.18em;

  --gutter: 16px;
  --measure: 62ch;
  --header-h: 64px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 76px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Scroll anchoring fights the stacked sticky pages: when a phone's address bar
   shows on the way up, the browser "corrects" the scroll position by the shift
   of a sticky page and throws the reader back a whole section. */
html, body { overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100;
}
.skip:focus { top: 12px; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.1; }
.title {
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-size: clamp(1.45rem, 1.15rem + 1.6vw, 2.2rem);
  text-align: center;
}
.lede {
  max-width: var(--measure);
  margin: 0 auto;
  text-align: center;
  color: var(--ink-soft);
}
p { margin: 0 0 1em; }
.prose { max-width: var(--measure); margin: 0 auto; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- Ornament: the spear-and-dot line from the logo ---------- */
.ornament {
  display: block;
  width: min(260px, 60%);
  height: 14px;
  margin: 0 auto;
  color: var(--ink);
}
.section-head { display: grid; gap: 20px; justify-items: center; margin-bottom: clamp(32px, 6vw, 56px); }

/* ---------- Flower-of-life field (from the logo background) ---------- */
.field { position: relative; isolation: isolate; }
.field::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='124.7' viewBox='0 0 72 124.7'><g fill='none' stroke='%23b8b8b8' stroke-width='1'><circle cx='0' cy='0' r='72'/><circle cx='72' cy='0' r='72'/><circle cx='0' cy='124.7' r='72'/><circle cx='72' cy='124.7' r='72'/><circle cx='36' cy='62.35' r='72'/><circle cx='-36' cy='62.35' r='72'/><circle cx='108' cy='62.35' r='72'/><circle cx='36' cy='-62.35' r='72'/><circle cx='36' cy='187.05' r='72'/></g></svg>");
  background-size: 72px 124.7px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
  opacity: .55;
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px;
  border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font: inherit; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.875rem;
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--ink-soft); }
.btn-wide { min-width: 240px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Header + slide-out menu ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--paper);
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .4s var(--ease); }
.site-header.is-solid, .site-header.on-paper {
  background: rgba(230, 230, 230, .92);
  color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line-faint);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 30px; width: auto; transition: filter .3s var(--ease); }
.site-header:not(.is-solid):not(.on-paper) .brand img { filter: invert(1); }
.brand span { font-size: 0.8rem; letter-spacing: var(--track); text-transform: uppercase; }
@media (max-width: 480px) { .brand span { display: none; } }

.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 4px; background: none; border: 0; color: inherit;
  font: inherit; font-size: 0.8rem; letter-spacing: var(--track); text-transform: uppercase; cursor: pointer;
}
.menu-btn .bars { position: relative; width: 26px; height: 12px; }
.menu-btn .bars::before, .menu-btn .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
}
.menu-btn .bars::before { top: 0; } .menu-btn .bars::after { top: 10px; }

.menu {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--paper); color: var(--ink);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
}
.menu[data-open="true"] { transform: translateY(0); visibility: visible; transition-delay: 0s; }
@media (min-width: 768px) {
  .menu { inset: 0 0 0 auto; width: min(420px, 100%); transform: translateX(100%); box-shadow: -1px 0 0 var(--line-faint); }
  .menu[data-open="true"] { transform: translateX(0); }
}
.menu-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); }
.menu-top .brand img { height: 30px; }
.close-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 0.8rem; letter-spacing: var(--track); text-transform: uppercase; gap: 10px; }
.close-btn svg { width: 22px; height: 22px; }

.menu-list { list-style: none; margin: 0; padding: 24px var(--gutter); display: grid; align-content: center; gap: 4px; }
.menu-list a {
  display: block; padding: 14px 0;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); text-transform: uppercase; letter-spacing: 0.12em;
  text-decoration: none; border-bottom: 1px solid var(--line-faint);
  transition: padding .25s var(--ease);
}
.menu-list a:hover { padding-left: 10px; }
.menu-list a[aria-current="page"] { color: var(--muted); }
.menu-foot { padding: 24px var(--gutter) 32px; display: grid; gap: 16px; }
.menu-foot .ornament { width: 160px; }

.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.scrim[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }
body[data-menu-open="true"] { overflow: hidden; }

/* ---------- Social icon rows ---------- */
.socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
  color: inherit; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.socials a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.socials svg { width: 18px; height: 18px; }
.socials.on-dark a { border-color: rgba(230,230,230,.5); }
.socials.on-dark a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- Hero ---------- */
/* The hero is exactly the photo: full width, the photo's own 3:2 proportions, nothing cropped. */
.hero {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  color: var(--paper); overflow: hidden; background: #111;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.45), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,.55));
}
/* Logo 02 (wordmark on the flower-of-life circles), inverted to white on the photo.
   The circles may reach up over the faces (top 40% of the photo); the wordmark itself
   starts 24% down the image, so it sits at 45% of the hero and below. */
.hero-logo {
  position: absolute; z-index: 1; left: 50%; top: 28%; transform: translateX(-50%);
  height: 70%; width: auto; max-width: 90%; object-fit: contain;
  filter: invert(1);
}
.hero-cue { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; width: 44px; height: 64px; display: grid; justify-items: center; align-items: end; }
.hero-cue span { display: block; width: 1px; height: 44px; background: linear-gradient(to bottom, transparent, var(--paper)); transform-origin: top; }
/* On narrow screens the photo is short, so the scroll cue would sit on the wordmark. */
@media (max-width: 720px) { .hero-cue { display: none; } }


/* ---------- Stacked pages ----------
   Pages are sticky and stack: the next page simply slides over the current one.
   A page taller than the viewport gets a negative top from js/main.js, so it
   scrolls until its bottom is in view before it pins and gets covered. */
.page { position: sticky; top: 0; min-height: 100svh; background: var(--paper); }
.page.hero { background: #111; min-height: 0; }
.page.section { display: grid; align-content: center; }
.section-pin { background: var(--paper); position: relative; z-index: 1; }
.merch.page { min-height: 100svh; }
.page-end { display: grid; grid-template-rows: 1fr auto; }
.page-end .contact { align-self: center; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 10vw, 128px) var(--gutter); }
.section-deep { background: var(--paper-deep); }
.wrap { max-width: 1180px; margin: 0 auto; }

/* Videos: pinned horizontal rail.
   The section is taller than the viewport; a sticky stage stays put while
   the scroll position drives the rail sideways (see js/main.js). */
.section-pin { position: relative; --slides: 3; height: calc(100svh * (var(--slides) + 0.5)); }
.pin-stage {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: calc(var(--header-h) + 16px) 0 24px; overflow: hidden;
}
.pin-stage .section-head { margin-bottom: 0; }
.rail {
  --slide-w: min(86vw, 780px, calc((100svh - 300px) * 16 / 9));
  --gap: 24px;
  display: flex; gap: var(--gap); align-items: flex-start; width: 100%;
  padding-left: calc((100% - var(--slide-w)) / 2);
  will-change: transform;
}
.rail .video { flex: 0 0 var(--slide-w); width: var(--slide-w); display: grid; gap: 14px;
  opacity: .45; transform: scale(.94); transition: opacity .5s var(--ease), transform .5s var(--ease);
  /* Each slide keeps its own layer; creating and dropping one per transition flickers on phones. */
  will-change: transform, opacity; backface-visibility: hidden; }
.rail .video.is-active { opacity: 1; transform: none; }
.video .frame { position: relative; aspect-ratio: 16 / 9; background: #0a0a0a; box-shadow: 0 0 0 1px var(--line); }
/* The active slide's drop shadow lives on a pseudo-element and fades with opacity,
   which the compositor can do mid-scroll; animating box-shadow itself repaints the whole frame. */
.rail .video .frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); opacity: 0; transition: opacity .4s var(--ease); }
.rail .video.is-active .frame::after { opacity: 1; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .song { text-align: center; font-size: 1rem; letter-spacing: 0.04em; }
.video .song small { display: block; color: var(--muted); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.videos-more { margin: 0; text-align: center; }
/* Where the browser supports scroll-driven animations, it moves the rail itself,
   on the compositor thread and in step with the scroll. The animation runs over
   exactly the stretch where the stage is stuck (section top at viewport top to
   section bottom at viewport bottom), so it matches the JS fallback, which then
   only marks the active slide (see js/main.js). */
@supports (animation-timeline: view()) {
  /* The bottom inset makes the timeline measure against a 100svh viewport, the
     stage's height, instead of the live one, which grows and shrinks with a
     phone's address bar and would make the rail bump when the bar settles. */
  .section-pin { view-timeline: --rail block; view-timeline-inset: 0 calc(100% - 100svh); }
  .rail {
    animation: rail-travel linear both;
    animation-timeline: --rail;
    animation-range: contain 0% contain 100%;
  }
  @keyframes rail-travel {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-1 * (var(--slides) - 1) * (var(--slide-w) + var(--gap))), 0, 0); }
  }
  .no-js .rail { animation: none; }
}
/* Without JS the rail is a plain horizontal scroller */
.no-js .section-pin { height: auto; }
.no-js .pin-stage { position: static; height: auto; }
.no-js .rail { overflow-x: auto; padding-right: var(--gutter); scroll-snap-type: x mandatory; }
.no-js .rail .video { opacity: 1; transform: none; scroll-snap-align: center; }

/* Listen */
.listen { text-align: center; display: grid; justify-items: center; gap: 24px; }
.listen .mark { width: clamp(96px, 16vw, 150px); }
.listen .album { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); letter-spacing: 0.04em; }
.listen .album small { display: block; font-size: 0.85rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* Platform chooser (listen.html) */
.platforms { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: grid; gap: 10px; width: 100%; }
.platforms a {
  display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; letter-spacing: 0.06em;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.platforms a:hover { background: var(--ink); color: var(--paper); }
.platforms svg { width: 22px; height: 22px; flex: none; }
.platforms span { flex: 1; text-align: left; }

/* Merch band */
.merch {
  position: relative; min-height: 70svh; display: grid; place-items: center; text-align: center;
  color: var(--paper); background: #111; overflow: hidden; padding: 96px var(--gutter);
}
.merch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: grayscale(1) contrast(.65) brightness(.7); }
.merch::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.merch .inner { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 24px rgba(0,0,0,.5); }
.merch .inner { position: relative; z-index: 1; display: grid; gap: 24px; justify-items: center; }
.merch .btn { border-color: var(--paper); color: var(--paper); }
.merch .btn:hover { background: var(--paper); color: var(--ink); }
.merch .ornament { color: var(--paper); }
.merch .title { color: var(--paper); }
.merch .lede { color: rgba(240,240,240,.95); }

/* Contact */
.contact { text-align: center; display: grid; gap: 12px; justify-items: center; }
.contact .mail { font-size: clamp(1rem, 0.7rem + 1.3vw, 1.5rem); letter-spacing: 0.02em; overflow-wrap: anywhere; max-width: 100%; }
.contact .role { color: var(--muted); letter-spacing: var(--track); text-transform: uppercase; font-size: 0.8rem; }

/* Footer */
.site-footer { padding: 48px var(--gutter) 40px; display: grid; gap: 24px; justify-items: center; border-top: 1px solid var(--line-faint); }
.site-footer .mark { width: 44px; }
.site-footer small { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; text-align: center; }
.site-footer nav a { margin: 0 10px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 719px) { .site-footer .socials { max-width: 252px; } }

/* ---------- Subpages ---------- */
.page-hero { padding: calc(var(--header-h) + 48px) var(--gutter) 40px; text-align: center; display: grid; gap: 20px; justify-items: center; }
.page-hero .title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }

.bio-photo { max-width: 1180px; margin: 0 auto 48px; }
.bio-photo img { filter: grayscale(1); box-shadow: 0 0 0 1px var(--line); }
.members { list-style: none; margin: 48px auto 0; padding: 0; max-width: 820px; display: grid; gap: 1px; background: var(--line-faint); border: 1px solid var(--line-faint); }
.members li { background: var(--paper); padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; }
.members .name { letter-spacing: 0.04em; }
.members .role { color: var(--muted); font-size: 0.8rem; letter-spacing: var(--track); text-transform: uppercase; }

.products { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 560px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .products { grid-template-columns: repeat(3, 1fr); } }
.product { display: grid; gap: 12px; text-decoration: none; }
.product .thumb { aspect-ratio: 4 / 5; background: var(--paper-deep); box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; overflow: hidden; }
.product .thumb img { width: 46%; opacity: .9; transition: transform .4s var(--ease); }
.product:hover .thumb img { transform: scale(1.06); }
.product .meta { display: flex; justify-content: space-between; gap: 12px; letter-spacing: 0.04em; }
.product .meta span:last-child { color: var(--muted); }
.store-note { text-align: center; color: var(--muted); max-width: var(--measure); margin: 40px auto 0; }

/* ---------- Motion ----------
   One page-load sequence on the hero, one reveal per section as it enters,
   a slow drift on the flower-of-life field, and staggered menu items.
   All of it is disabled under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-logo { animation: hero-logo 1.4s var(--ease) .45s both; }
  .site-header { animation: fade-in .8s var(--ease) 1.1s both; }
  @keyframes hero-photo { from { transform: scale(1.06); filter: brightness(.35); } to { transform: scale(1); filter: brightness(1); } }
  @keyframes hero-logo { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

  .field::before { animation: field-drift 90s linear infinite; }
  @keyframes field-drift { from { background-position: center 0; } to { background-position: center 124.7px; } }

  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-orn { transform: scaleX(0); transform-origin: center; transition: transform 1s var(--ease); }
  .reveal-orn.in { transform: scaleX(1); }
  .reveal[data-delay="1"] { transition-delay: .12s; }
  .reveal[data-delay="2"] { transition-delay: .24s; }
  .reveal[data-delay="3"] { transition-delay: .36s; }
  .reveal[data-delay="4"] { transition-delay: .48s; }

  .menu-list li { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .menu[data-open="true"] .menu-list li { opacity: 1; transform: none; }
  .menu[data-open="true"] .menu-list li:nth-child(1) { transition-delay: .15s; }
  .menu[data-open="true"] .menu-list li:nth-child(2) { transition-delay: .22s; }
  .menu[data-open="true"] .menu-list li:nth-child(3) { transition-delay: .29s; }
  .menu[data-open="true"] .menu-list li:nth-child(4) { transition-delay: .36s; }
  .menu-foot { opacity: 0; transition: opacity .5s var(--ease) .4s; }
  .menu[data-open="true"] .menu-foot { opacity: 1; }

  .btn { transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
  .btn:hover { transform: translateY(-1px); }
  .listen .mark { animation: mark-spin 40s linear infinite; }
  @keyframes mark-spin { to { transform: rotate(360deg); } }
  .hero-media { animation: hero-photo 1.8s var(--ease) both; }
  .hero-cue { animation: fade-in 1s var(--ease) 1.8s both; }
  .hero-cue span { animation: cue 2.2s var(--ease) infinite; }
  @keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
  .intro img { animation: intro-mark 1.1s var(--ease) both; }
  .intro { animation: intro-out .6s var(--ease) 1s both; }
  @keyframes intro-mark { from { opacity: 0; transform: scale(.6) rotate(-30deg); } 60% { opacity: 1; transform: scale(1) rotate(0); } to { opacity: 1; transform: scale(1.1) rotate(10deg); } }
  @keyframes intro-out { to { opacity: 0; visibility: hidden; } }
}

/* ---------- Intro, grain ---------- */
.intro { position: fixed; inset: 0; z-index: 120; background: var(--paper); display: grid; place-items: center; }
.intro img { width: clamp(72px, 12vw, 120px); }
.intro.is-done { display: none; }
.grain { position: fixed; inset: -50%; z-index: 110; pointer-events: none; opacity: .055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 300px 300px; }

/* ---------- Video posters ---------- */
.poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #0a0a0a; cursor: pointer; overflow: hidden; display: block; }
.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.poster:hover img { transform: scale(1.04); }
.play-ring { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(230,230,230,.9); background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: var(--paper); transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.play-ring svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.poster:hover .play-ring { transform: translate(-50%, -50%) scale(1.08); background: var(--paper); color: var(--ink); }
.poster:focus-visible { outline: 2px solid var(--paper); outline-offset: -6px; }

.platform-row { margin-top: 4px; }
.copy { background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.78rem; letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; padding: 10px 4px; min-height: 44px; }
.copy:hover, .copy.is-done { color: var(--ink); }

.pull { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem); line-height: 1.2; letter-spacing: 0.01em; text-align: center; max-width: 22ch; margin: clamp(48px, 8vw, 96px) auto; }
.pull::before, .pull::after { content: ""; display: block; width: 48px; height: 1px; background: var(--ink); margin: 0 auto 28px; }
.pull::after { margin: 28px auto 0; }