:root {
  --bg: #080807;
  --bg-soft: #12100d;
  --panel: #19130f;
  --panel-strong: #241915;
  --white: #fffdf5;
  --white-soft: rgba(255, 253, 245, 0.86);
  --white-faint: rgba(255, 253, 245, 0.68);
  --line: rgba(255, 253, 245, 0.16);
  --gold: #d8a84f;
  --ember: #e2572c;
  --venom: #b9f264;
  --crimson: #7b161e;
  --radius-xl: 2rem;
  --radius-lg: 1.25rem;
  --pad: 1rem;
  --shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.48);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--gold) var(--bg);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 0.875rem; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--ember));
  border: 0.25rem solid var(--bg);
  border-radius: 999rem;
}

body {
  margin: 0;
  min-width: 20rem;
  background:
    radial-gradient(circle at 20% 0%, rgba(226, 87, 44, 0.18), transparent 24rem),
    radial-gradient(circle at 90% 18%, rgba(216, 168, 79, 0.18), transparent 18rem),
    linear-gradient(180deg, #0d0b09 0%, #080807 44%, #100c0a 100%);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
}

body.is-nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

p { color: var(--white-soft); margin: 0; }

h1, h2, h3 { margin: 0; color: var(--white); letter-spacing: -0.055em; line-height: 0.92; }

h1 { font-size: clamp(3.4rem, 15vw, 10rem); }
h2 { font-size: clamp(2.5rem, 10vw, 7.25rem); }
h3 { font-size: clamp(1.65rem, 6vw, 3.5rem); }

button, input, textarea { font: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 0.1875rem solid var(--venom);
  outline-offset: 0.25rem;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  padding: 0.85rem 1rem;
  background: var(--venom);
  color: #071006;
  border-radius: 999rem;
  font-weight: 900;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.section-shell { padding: 5rem var(--pad); }

.kicker {
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.12rem, 4vw, 1.5rem);
  line-height: 1.35;
  color: var(--white);
}

.button,
.play-button,
.header-action {
  min-height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 0.0625rem solid var(--line);
  border-radius: 999rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  color: #080807;
  font-weight: 950;
  letter-spacing: -0.025em;
  transition: transform 220ms ease, background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.button:hover,
.play-button:hover,
.header-action:hover { transform: translateY(-0.18rem); background: var(--gold); }

.button--large { width: 100%; min-height: 4.25rem; font-size: 1.15rem; }
.button--ghost { background: transparent; color: var(--white); }
.button--ghost:hover { color: #080807; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 950;
  border-bottom: 0.125rem solid var(--gold);
  padding-bottom: 0.35rem;
}
.text-link::after { content: "↗"; color: var(--gold); }
.text-link--light { border-color: var(--venom); }
.text-link--light::after { color: var(--venom); }

.play-button { background: var(--venom); border-color: transparent; color: #071006; text-align: left; }
.play-button small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.play-button__icon {
  width: 1.55rem;
  height: 1.55rem;
  background: linear-gradient(135deg, #071006 0 50%, transparent 50% 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.6rem;
  padding: 0.75rem var(--pad);
  background: rgba(8, 8, 7, 0.78);
  border-bottom: 0.0625rem solid var(--line);
  backdrop-filter: blur(1.25rem);
}

.brand { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 950; letter-spacing: -0.04em; }
.brand__sigil {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--bg);
  font-size: 0.8rem;
  letter-spacing: -0.05em;
}
.brand__text { font-size: 1.1rem; }

.nav-toggle {
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: 999rem;
  background: transparent;
  color: var(--white);
}
.nav-toggle span { width: 1.25rem; height: 0.125rem; background: currentColor; display: block; transition: transform 220ms ease; }
.nav-toggle span + span { margin-top: -0.75rem; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(0.28rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-0.28rem) rotate(-45deg); }

.main-nav {
  position: fixed;
  inset: 4.6rem 0 auto;
  z-index: 40;
  display: none;
  min-height: calc(100vh - 4.6rem);
  padding: 1rem;
  background: rgba(8, 8, 7, 0.97);
}
.main-nav.is-open { display: grid; align-content: start; gap: 0.35rem; }
.nav-link {
  display: block;
  padding: 1.25rem;
  border: 0.0625rem solid var(--line);
  border-radius: 1.1rem;
  font-size: 1.35rem;
  font-weight: 950;
  color: var(--white);
}
.nav-link.is-active,
.nav-link:hover { background: var(--white); color: var(--bg); }
.header-action { display: none; }

.hero {
  min-height: 100svh;
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-top: 2.5rem;
}
.hero__copy { display: grid; gap: 1.35rem; }
.hero__actions { display: grid; gap: 1rem; align-items: center; }
.hero__visual {
  position: relative;
  min-height: 31rem;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero__visual::before {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ember), rgba(226, 87, 44, 0));
  filter: blur(0.8rem);
  opacity: 0.75;
  z-index: -1;
}
.phone-shot,
.portrait-card,
.stack-card,
.monster-card,
.page-hero__image,
.flow-item__image,
.fan-card,
.choice-panel__image,
.contact-hero__image {
  border-radius: 1.65rem;
  border: 0.0625rem solid rgba(255, 253, 245, 0.22);
  box-shadow: var(--shadow);
  background: var(--panel);
  object-fit: cover;
}
.phone-shot--main { width: min(76vw, 20rem); transform: rotate(2deg); }
.phone-shot--float-one { position: absolute; width: min(36vw, 9rem); left: 0; bottom: 0; transform: rotate(-11deg); }
.phone-shot--float-two { position: absolute; width: min(52vw, 15rem); right: 0; top: 2rem; transform: rotate(8deg); }
.wide-shot { border-radius: 1.4rem; border: 0.0625rem solid var(--line); box-shadow: var(--shadow); }
.hero__stats {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 245, 0.05);
}
.hero__stats span { color: var(--white-soft); font-size: 1.05rem; }
.hero__stats strong { color: var(--white); }

.marquee { overflow: hidden; border-block: 0.0625rem solid var(--line); background: var(--crimson); }
.marquee__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee span { padding: 1.2rem 1rem; color: var(--white); font-size: clamp(2rem, 10vw, 5.5rem); font-weight: 1000; letter-spacing: -0.075em; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

.split-showcase { display: grid; gap: 2rem; }
.split-showcase__media { min-height: 32rem; position: relative; }
.portrait-card { position: absolute; width: min(67vw, 18rem); }
.portrait-card--tilt-left { left: 0; top: 0; transform: rotate(-8deg); }
.portrait-card--tilt-right { right: 0; bottom: 0; transform: rotate(7deg); }
.split-showcase__copy { display: grid; gap: 1.25rem; align-content: center; }

.section-heading { display: grid; gap: 1rem; padding: 0 var(--pad) 2rem; }
.section-heading--wide { padding-inline: 0; }
.section-heading .lead { max-width: 54rem; }

.cards-lab { display: grid; gap: 2rem; }
.cards-lab__stack { min-height: 34rem; position: relative; }
.stack-card { position: absolute; width: min(58vw, 17rem); }
.stack-card--one { left: 0; top: 2rem; transform: rotate(-10deg); }
.stack-card--two { left: 50%; top: 0; transform: translateX(-50%) rotate(3deg); z-index: 2; }
.stack-card--three { right: 0; bottom: 0; transform: rotate(12deg); }
.cards-lab__notes { display: grid; gap: 1rem; }
.cards-lab__notes article,
.story-card,
.flow-item,
.choice-panel,
.contact-note {
  padding: 1.25rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 245, 0.055);
}
.cards-lab__notes span,
.story-card span,
.flow-item span {
  display: block;
  margin-bottom: 2rem;
  color: var(--gold);
  font-size: 3.2rem;
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: 0.8;
}
.cards-lab__notes h3 { margin-bottom: 0.75rem; }

.combat-stage {
  margin: 2rem var(--pad);
  display: grid;
  gap: 1.5rem;
  padding: 1.25rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #17110e, #260f0d 58%, #070706);
  overflow: hidden;
}
.combat-stage__copy { display: grid; gap: 1.15rem; align-content: center; }
.combat-stage__grid { display: grid; gap: 1rem; }
.combat-image { border-radius: 1.25rem; border: 0.0625rem solid var(--line); box-shadow: var(--shadow); object-fit: cover; }

.monster-band { display: grid; gap: 2rem; }
.monster-band__copy { display: grid; gap: 1rem; }
.monster-band__visuals { min-height: 38rem; position: relative; }
.monster-card { position: absolute; }
.monster-card--large { width: min(64vw, 18rem); left: 0; top: 0; }
.monster-card--small { width: min(45vw, 13rem); right: 0; top: 6rem; transform: rotate(9deg); }
.monster-card--line { width: min(48vw, 14rem); left: 30%; bottom: 0; transform: rotate(-5deg); }

.gallery-river { padding: 5rem 0; overflow: hidden; }
.gallery-river__track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding-inline: var(--pad); }
.gallery-tile { margin: 0; border: 0.0625rem solid var(--line); border-radius: 1.35rem; overflow: hidden; background: rgba(255, 253, 245, 0.055); }
.gallery-tile__image { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; }
.gallery-tile--2 { transform: translateY(1.5rem); }
.gallery-tile--4 { transform: translateY(-0.75rem); }
.gallery-tile figcaption,
.gallery-page__item figcaption,
.beast-card figcaption { padding: 0.85rem; color: var(--white); font-size: 0.95rem; font-weight: 850; }
.gallery-river__action { padding: 3rem var(--pad) 0; }

.premium-cta__panel {
  display: grid;
  gap: 1.5rem;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--white);
  color: var(--bg);
}
.premium-cta__image { width: 100%; border-radius: 1.45rem; object-fit: cover; }
.premium-cta__copy { display: grid; gap: 1.15rem; align-content: center; padding: 0.5rem; }
.premium-cta__copy h2,
.premium-cta__copy p { color: var(--bg); }
.premium-cta__copy .kicker { color: var(--crimson); }

.page-hero { display: grid; gap: 2rem; padding-top: 3rem; }
.page-hero__copy { display: grid; gap: 1.25rem; }
.page-hero__media { position: relative; min-height: 32rem; }
.page-hero__image { position: absolute; width: min(62vw, 17rem); }
.page-hero__image:first-child { left: 0; top: 0; transform: rotate(-7deg); }
.page-hero__image--offset { right: 0; bottom: 0; transform: rotate(6deg); }
.page-hero__media--wide { min-height: auto; }
.wide-feature { border-radius: var(--radius-xl); border: 0.0625rem solid var(--line); box-shadow: var(--shadow); }

.story-grid,
.mechanic-flow,
.choice-panels,
.beast-grid,
.contact-grid { display: grid; gap: 1rem; }
.story-card { display: grid; gap: 1rem; min-height: 16rem; }
.story-card__image { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; border-radius: 1rem; }

.flow-item { display: grid; gap: 1rem; overflow: hidden; }
.flow-item__image { width: 100%; max-height: 34rem; object-fit: cover; }

.fan-deck { min-height: 32rem; position: relative; }
.fan-card { position: absolute; width: min(58vw, 17rem); }
.fan-card--a { left: 0; top: 1rem; transform: rotate(-12deg); }
.fan-card--b { left: 50%; top: 0; transform: translateX(-50%) rotate(2deg); z-index: 2; }
.fan-card--c { right: 0; bottom: 0; transform: rotate(12deg); }
.choice-panel { display: grid; gap: 1rem; align-content: center; }
.choice-panel__image { width: 100%; max-height: 34rem; object-fit: cover; }

.monster-poster { display: grid; gap: 1rem; }
.monster-poster__wide,
.monster-poster__card { border-radius: var(--radius-lg); border: 0.0625rem solid var(--line); box-shadow: var(--shadow); object-fit: cover; }
.beast-card { margin: 0; overflow: hidden; border: 0.0625rem solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 253, 245, 0.055); }
.beast-card__image { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; }
.beast-card--wide .beast-card__image { aspect-ratio: 16 / 10; }

.gallery-page { padding-top: 4rem; }
.gallery-page__grid { display: grid; gap: 0.85rem; }
.gallery-page__item { margin: 0; overflow: hidden; border-radius: var(--radius-lg); border: 0.0625rem solid var(--line); background: rgba(255, 253, 245, 0.055); }
.gallery-page__image { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; }
.gallery-page__item--3 .gallery-page__image,
.gallery-page__item--4 .gallery-page__image { aspect-ratio: 16 / 11; }

.contact-hero { display: grid; gap: 2rem; padding-top: 3rem; }
.contact-hero__copy { display: grid; gap: 1.2rem; }
.contact-hero__card { display: grid; gap: 1rem; padding: 1rem; border-radius: var(--radius-xl); background: var(--panel-strong); border: 0.0625rem solid var(--line); }
.contact-hero__image { width: 100%; max-height: 38rem; object-fit: cover; }
.contact-hero address,
.footer__contact { display: grid; gap: 0.5rem; font-style: normal; }
.contact-form { display: grid; gap: 0.8rem; padding: 1rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-xl); background: rgba(255, 253, 245, 0.055); }
.contact-form label { color: var(--white); font-weight: 900; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0.0625rem solid var(--line);
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.28);
  color: var(--white);
  font-size: 1rem;
}
.contact-form textarea { min-height: 12rem; resize: vertical; }
.form-message { padding: 1rem; border-radius: 1rem; font-weight: 800; }
.form-message--success { background: rgba(185, 242, 100, 0.18); border: 0.0625rem solid rgba(185, 242, 100, 0.44); }
.form-message--error { background: rgba(226, 87, 44, 0.18); border: 0.0625rem solid rgba(226, 87, 44, 0.44); }

.legal-main { background: #0c0b0a; }
.legal { max-width: 58rem; display: grid; gap: 1.25rem; }
.legal h1 { font-size: clamp(3rem, 12vw, 7rem); }
.legal h2 { margin-top: 1rem; font-size: clamp(1.75rem, 6vw, 3rem); }
.legal a { color: var(--venom); text-decoration: underline; text-underline-offset: 0.25rem; }

.footer {
  display: grid;
  gap: 2rem;
  padding: 3rem var(--pad) 1.5rem;
  border-top: 0.0625rem solid var(--line);
  background: #050505;
}
.footer__brand { display: grid; gap: 1rem; }
.footer__logo { color: var(--white); font-size: 2rem; font-weight: 1000; letter-spacing: -0.07em; }
.footer__nav { display: grid; gap: 0.6rem; }
.footer strong { color: var(--gold); text-transform: uppercase; letter-spacing: 0.09em; }
.footer a,
.footer span { color: var(--white); }
.footer__bottom { display: grid; gap: 0.5rem; padding-top: 1.5rem; border-top: 0.0625rem solid var(--line); }

.cookie-banner {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  z-index: 80;
  display: none;
  gap: 1rem;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: 1.25rem;
  background: rgba(8, 8, 7, 0.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(1.25rem);
}
.cookie-banner.is-visible { display: grid; }
.cookie-banner p { margin-top: 0.4rem; font-size: 0.98rem; }
.cookie-banner__actions { display: grid; gap: 0.75rem; }

.reveal-up,
.reveal-scale { opacity: 0; transition: opacity 700ms ease, transform 700ms ease; }
.reveal-up { transform: translateY(1.8rem); }
.reveal-scale { transform: scale(0.96); }
.reveal-up.is-visible,
.reveal-scale.is-visible { opacity: 1; transform: none; }

@media (min-width: 640px) {
  :root { --pad: 1.5rem; }
  .hero__actions,
  .cookie-banner__actions { grid-template-columns: max-content max-content; }
  .button--large { width: max-content; padding-inline: 1.75rem; }
  .gallery-river__track,
  .gallery-page__grid { grid-template-columns: repeat(3, 1fr); }
  .story-grid,
  .mechanic-flow,
  .choice-panels,
  .beast-grid { grid-template-columns: repeat(2, 1fr); }
  .story-card--large,
  .beast-card--wide { grid-column: span 2; }
  .footer { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer__bottom { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
}

@media (min-width: 980px) {
  :root { --pad: 3rem; }
  .site-header { grid-template-columns: auto 1fr auto; min-height: 5.25rem; }
  .nav-toggle { display: none; }
  .main-nav { position: static; display: flex; min-height: auto; padding: 0; background: transparent; justify-content: center; gap: 0.3rem; }
  .nav-link { padding: 0.7rem 0.85rem; border: 0; border-radius: 999rem; font-size: 0.95rem; letter-spacing: -0.02em; color: var(--white-soft); }
  .header-action { display: inline-flex; }
  .hero { grid-template-columns: 1fr 0.82fr; gap: 3rem; padding-top: 5rem; }
  .hero__stats { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .phone-shot--main { width: min(29vw, 23rem); }
  .phone-shot--float-one { width: min(13vw, 11rem); left: -1rem; }
  .phone-shot--float-two { width: min(22vw, 18rem); right: -2rem; }
  .split-showcase { grid-template-columns: 0.9fr 1fr; gap: 4rem; }
  .split-showcase__media { min-height: 42rem; }
  .cards-lab { grid-template-columns: 1fr 1fr; align-items: center; }
  .cards-lab .section-heading { grid-column: 1 / -1; max-width: 70rem; }
  .cards-lab__stack { min-height: 42rem; }
  .cards-lab__notes { grid-template-columns: repeat(3, 1fr); grid-column: 1 / -1; }
  .combat-stage { grid-template-columns: 0.82fr 1.18fr; gap: 2rem; padding: 2rem; }
  .monster-band { grid-template-columns: 0.8fr 1.2fr; align-items: center; }
  .monster-band__visuals { min-height: 44rem; }
  .gallery-river__track { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
  .gallery-tile--1 { grid-column: span 2; }
  .gallery-tile--2 { grid-column: span 1; }
  .gallery-tile--3 { grid-column: span 2; }
  .gallery-tile--4 { grid-column: span 1; }
  .gallery-tile--5 { grid-column: span 2; }
  .premium-cta__panel { grid-template-columns: 0.58fr 1fr; padding: 1.25rem; }
  .premium-cta__image { max-height: 44rem; }
  .page-hero { grid-template-columns: 1fr 0.85fr; align-items: center; padding-top: 5rem; }
  .page-hero--wide { grid-template-columns: 0.8fr 1.2fr; }
  .page-hero--solo { grid-template-columns: 0.9fr 1.1fr; }
  .page-hero--monster { grid-template-columns: 0.78fr 1.22fr; }
  .page-hero__media { min-height: 42rem; }
  .page-hero__media--wide { min-height: auto; }
  .story-grid { grid-template-columns: 1.15fr 0.85fr 1fr; }
  .story-card--large { grid-row: span 2; grid-column: span 1; }
  .story-card--image { grid-row: span 2; }
  .mechanic-flow { grid-template-columns: repeat(3, 1fr); }
  .choice-panels { grid-template-columns: 1fr 0.8fr 1fr; }
  .monster-poster { grid-template-columns: 1.25fr 0.75fr; align-items: end; }
  .beast-grid { grid-template-columns: 0.8fr 1.4fr 0.8fr; align-items: stretch; }
  .beast-card--wide { grid-column: span 1; }
  .gallery-page__grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-page__item--3 { grid-column: span 2; }
  .contact-hero { grid-template-columns: 1fr 0.55fr; align-items: center; padding-top: 5rem; }
  .contact-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .contact-form { padding: 1.5rem; }
  .footer { grid-template-columns: 2fr 0.9fr 0.9fr 1fr; }
}

@media (min-width: 1280px) {
  :root { --pad: 4.5rem; }
  .section-shell { padding-top: 7rem; padding-bottom: 7rem; }
  .hero { padding-top: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-up, .reveal-scale { opacity: 1; transform: none; }
}

/* ── Brand logo ───────────────────────────────────────────────── */
.brand__logo { height: 2rem; width: auto; display: block; }

/* ── Footer disclaimer ────────────────────────────────────────── */
.footer__disclaimer { font-size: 0.8rem; color: var(--white-faint); margin-top: 0.35rem; }

/* ── Cookie banner: 3-button layout ──────────────────────────── */
@media (min-width: 640px) {
  .cookie-banner__actions { grid-template-columns: repeat(3, max-content); }
}

/* ── Premium notice band ──────────────────────────────────────── */
.premium-notice {
  padding: 2.5rem var(--pad);
  border-block: 0.0625rem solid var(--line);
  background: var(--panel);
}
.premium-notice__inner { display: grid; gap: 1.25rem; }
.premium-notice__label {
  display: block;
  color: var(--gold);
  font-size: clamp(2.8rem, 12vw, 7rem);
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: 0.84;
}
.premium-notice__inner p { max-width: 52rem; }
@media (min-width: 980px) {
  .premium-notice__inner { grid-template-columns: 0.38fr 1fr auto; align-items: center; gap: 4rem; }
}

/* ── Characters band ──────────────────────────────────────────── */
.chars-band { display: grid; gap: 2rem; }
.chars-band__copy { display: grid; gap: 1.25rem; align-content: start; }
.chars-band__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.char-card {
  border-radius: 1.5rem;
  border: 0.0625rem solid rgba(255, 253, 245, 0.22);
  object-fit: cover;
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 9 / 14;
  background: var(--panel);
}
.char-card--b { transform: translateY(1.75rem); }
.char-card--d { transform: translateY(-1rem); }
@media (min-width: 980px) {
  .chars-band { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: center; }
}

/* ── Deaths reel ──────────────────────────────────────────────── */
.deaths-reel { overflow: hidden; }
.deaths-reel .section-heading { padding-inline: var(--pad); }
.deaths-reel__grid {
  display: grid;
  grid-template-columns: repeat(5, min(58vw, 17rem));
  gap: 0.85rem;
  padding: 2rem var(--pad) 3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.deaths-reel__grid::-webkit-scrollbar { display: none; }
.death-card {
  border-radius: 1.5rem;
  border: 0.0625rem solid rgba(255, 253, 245, 0.22);
  object-fit: cover;
  scroll-snap-align: start;
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 9 / 14;
  background: var(--panel);
}
.death-card--a { transform: rotate(-3deg); }
.death-card--b { transform: rotate(5deg) translateY(-1.25rem); }
.death-card--c { transform: rotate(-2deg) translateY(0.5rem); }
.death-card--d { transform: rotate(4deg) translateY(-1.5rem); }
.death-card--e { transform: rotate(-1deg) translateY(0.75rem); }
@media (min-width: 980px) {
  .deaths-reel__grid { grid-template-columns: repeat(5, 1fr); overflow-x: visible; }
}

/* ── Feature cards ────────────────────────────────────────────── */
.feature-list { display: grid; gap: 2.5rem; }
.feature-list .section-heading { padding-inline: 0; }
.feature-list__grid { display: grid; gap: 1rem; }
.feat-card {
  padding: 1.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 245, 0.04);
  display: grid;
  gap: 0.65rem;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.feat-card:hover { background: rgba(255, 253, 245, 0.09); border-color: var(--gold); transform: translateY(-0.2rem); }
.feat-card > span {
  display: block;
  color: var(--gold);
  font-size: 3rem;
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: 0.82;
  margin-bottom: 0.75rem;
}
.feat-card h3 { font-size: clamp(1.4rem, 4vw, 1.85rem); }
@media (min-width: 640px) {
  .feature-list__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .feature-list__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Studio page ──────────────────────────────────────────────── */
.studio-hero { display: grid; gap: 2rem; padding-top: 3rem; }
.studio-hero__copy { display: grid; gap: 1.25rem; align-content: start; }
.studio-hero__media { position: relative; min-height: 32rem; }
.studio-hero__img { position: absolute; width: min(66vw, 19rem); border-radius: 1.65rem; border: 0.0625rem solid rgba(255, 253, 245, 0.22); box-shadow: var(--shadow); object-fit: cover; }
.studio-hero__img:first-child { left: 0; top: 0; transform: rotate(-6deg); }
.studio-hero__img--offset { right: 0; bottom: 0; transform: rotate(7deg); z-index: 2; }
.studio-mission { display: grid; gap: 1rem; }
.studio-mission__item {
  padding: 1.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 245, 0.04);
  display: grid;
  gap: 0.65rem;
}
.studio-mission__item span {
  display: block;
  color: var(--gold);
  font-size: 2.8rem;
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: 0.82;
  margin-bottom: 0.5rem;
}
.studio-credits { display: grid; gap: 1.25rem; }
.studio-credits__grid { display: grid; gap: 1rem; }
.credit-card { padding: 1.25rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 253, 245, 0.04); display: grid; gap: 0.5rem; }
.credit-card__role { color: var(--gold); font-size: 0.82rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; }
.studio-cta { display: grid; gap: 2rem; padding: 2rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(135deg, #17110e, #260f0d 60%, #070706); }
.studio-cta__copy { display: grid; gap: 1rem; }
.studio-cta__actions { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .studio-mission { grid-template-columns: repeat(2, 1fr); }
  .studio-credits__grid { grid-template-columns: repeat(3, 1fr); }
  .studio-cta__actions { grid-template-columns: max-content max-content; }
}
@media (min-width: 980px) {
  .studio-hero { grid-template-columns: 1fr 0.88fr; align-items: center; padding-top: 5rem; }
  .studio-hero__media { min-height: 42rem; }
  .studio-cta { grid-template-columns: 1fr auto; align-items: center; gap: 4rem; }
}

/* ── 404 page ─────────────────────────────────────────────────── */
.error-page {
  display: grid;
  place-items: center;
  min-height: 80svh;
  text-align: center;
  padding: 3rem var(--pad);
  gap: 0;
}
.error-page__inner { display: grid; gap: 1.5rem; max-width: 44rem; }
.error-page__code {
  font-size: clamp(7rem, 30vw, 18rem);
  font-weight: 1000;
  letter-spacing: -0.1em;
  color: var(--gold);
  line-height: 0.82;
}
.error-page__image {
  border-radius: 1.5rem;
  border: 0.0625rem solid rgba(255, 253, 245, 0.22);
  box-shadow: var(--shadow);
  width: min(74vw, 20rem);
  margin: 1rem auto;
  object-fit: cover;
}
.error-page__actions { display: grid; gap: 1rem; justify-items: center; margin-top: 0.5rem; }
@media (min-width: 640px) {
  .error-page__actions { grid-template-columns: max-content max-content; justify-content: center; }
}

/* ── Contact form: consent checkbox ──────────────────────────── */
.form-check { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; align-items: start; padding: 0.25rem 0; }
.form-check input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--venom); margin-top: 0.18rem; cursor: pointer; }
.form-check label { color: var(--white-soft); font-weight: 400; line-height: 1.45; cursor: pointer; }
.form-check label a { color: var(--venom); text-decoration: underline; text-underline-offset: 0.2rem; }

/* ── Gallery page: reveal animation ──────────────────────────── */
.gallery-page__item { opacity: 0; transform: translateY(1.25rem); transition: opacity 560ms ease, transform 560ms ease; }
.gallery-page__item.is-visible { opacity: 1; transform: none; }

/* ── Gallery improved captions ───────────────────────────────── */
.gallery-tile figcaption,
.gallery-page__item figcaption { font-size: 0.88rem; }

/* ── Header scrolled state ────────────────────────────────────── */
.site-header.is-scrolled { background: rgba(8, 8, 7, 0.94); }

/* ── Nav active state on desktop ─────────────────────────────── */
@media (min-width: 980px) {
  .nav-link.is-active { background: rgba(255, 253, 245, 0.12); color: var(--white); }
}

/* ── Studio: address + CTA address ───────────────────────────── */
.studio-cta__address { font-style: normal; display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.studio-cta__address a { color: var(--venom); }

/* ── Contact form heading ─────────────────────────────────────── */
.contact-form__heading { font-size: 1rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }

/* ── Contact note link ────────────────────────────────────────── */
.contact-note__link { color: var(--venom); text-decoration: underline; text-underline-offset: 0.2rem; }

/* ── Full-width grid column span ─────────────────────────────── */
.section-heading--full { grid-column: 1 / -1; }