/* ---------------------------------------------------------------
       Fonts
       Trajan 3 Pro is a paid Adobe font. Drop the files into assets/fonts/
       and the @font-face below will pick them up.  Until then we fall
       back to Cinzel which has the same Roman-capital character.
    --------------------------------------------------------------- */
    @font-face {
      font-family: "Trajan Pro 3";
      src: local("Trajan Pro 3 Regular"),
           local("TrajanPro3-Regular"),
           url("../assets/fonts/TrajanPro3-Regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Trajan Pro 3";
      src: local("Trajan Pro 3 Bold"),
           local("TrajanPro3-Bold"),
           url("../assets/fonts/TrajanPro3-Bold.woff2") format("woff2");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    /* ---------------------------------------------------------------
       Design tokens
    --------------------------------------------------------------- */
    :root {
      /* palette */
      --ink:          #000000;        /* page background, full black */
      --ink-soft:     #0a0807;        /* slightly lighter for layered sections */
      --bone:         #ece3d2;        /* primary readable text on dark */
      --bone-muted:   #9a8e7c;        /* secondary text on dark */
      --bone-dim:     #6b6052;        /* tertiary / disclaimer */
      --heading:      #d4d4d4;        /* all headings (Trajan caps) */
      --crimson:      #8E0910;        /* primary brand red */
      --crimson-hi:   #ab1219;        /* hover red */
      --crimson-deep: #5e060b;        /* shadow / border red */
      --parchment:    #d9c69b;        /* parchment background */
      --parchment-dk: #b89a64;        /* parchment shadow */
      --ink-warm:     #2a1f12;        /* text on parchment */

      /* typography */
      --font-heading: "Trajan Pro 3", "Cinzel", "Trajan Pro", "Times New Roman", serif;
      --font-body:    "Cormorant Garamond", "Garamond", "Georgia", serif;

      /* fluid type scale -- targets 1920px ref for max values
         Headings 64px, body 24px, eyebrow 20px, small 16px. */
      --fs-eyebrow:  clamp(0.72rem, 0.7rem + 0.45vw, 1.25rem);   /* up to 20px */
      --fs-body:     clamp(1.02rem, 1rem + 0.4vw,    1.5rem);    /* up to 24px */
      --fs-small:    clamp(0.86rem, 0.85rem + 0.2vw, 1rem);
      --fs-h3:       clamp(1.6rem,  1.55rem + 2vw,   4rem);      /* up to 64px */
      --fs-h2:       clamp(2rem,    1.95rem + 2vw,   4rem);      /* up to 64px */
      --fs-h1:       clamp(2.2rem,  2.15rem + 1.9vw, 4rem);      /* up to 64px */
      --fs-num:      clamp(1.2rem,  1.05rem + 1.2vw, 2.25rem);

      /* spacing — gutter reaches 150px on 1920px wide screens */
      --gutter:      clamp(1.25rem, 7.8vw, 150px);
      --section-y:   clamp(4rem, 2.5rem + 6vw, 8rem);
      --stack-sm:    clamp(0.5rem,  0.4rem + 0.4vw, 0.75rem);
      --stack-md:    clamp(1rem,    0.85rem + 0.8vw, 1.5rem);
      --stack-lg:    clamp(1.5rem,  1.2rem + 1.4vw, 2.5rem);
      --stack-xl:    clamp(2.5rem,  1.8rem + 2.8vw, 4rem);

      /* containers — none-capped on desktop so the 150px gutter
         (= margin from viewport edge) is what actually defines the
         content width. Specific blocks (parchment etc.) cap themselves. */
      --container:   none;
      --container-narrow: 720px;

      /* effects */
      --radius:      2px;            /* sharp / luxury */
      --radius-lg:   4px;
      --shadow-soft: 0 30px 60px -20px rgba(0,0,0,.7);
      --shadow-cta:  0 18px 40px -12px rgba(142, 9, 16, .55);
      --ease:        cubic-bezier(.2, .7, .2, 1);
    }

    /* ---------------------------------------------------------------
       Reset / base
    --------------------------------------------------------------- */
    *, *::before, *::after { box-sizing: border-box; }
    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      /* Firefox */
      scrollbar-color: var(--crimson) #000;
      scrollbar-width: thin;
    }
    /* WebKit (Chrome, Edge, Safari) */
    ::-webkit-scrollbar             { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track       { background: #000; }
    ::-webkit-scrollbar-thumb       { background: var(--crimson); border-radius: 2px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--crimson-hi); }
    body {
      margin: 0;
      background: var(--ink);
      color: var(--bone);
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: 1.65;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    img, svg, video { display: block; max-width: 100%; height: auto; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    h1, h2, h3, h4 {
      font-family: var(--font-heading);
      font-weight: 400;
      letter-spacing: 0.04em;
      line-height: 1.12;
      margin: 0;
      color: var(--heading);
      text-transform: uppercase;
    }
    /* Asymmetric multi-line title support.
       Each line is wrapped in <span class="line line-N"> and offset
       via translateX so it works regardless of text-align (some
       headings are centered, some left). */
    .line {
      display: block;
    }
    .line-1 { transform: translateX(0);     }
    .line-2 { transform: translateX(1.2em); }
    .line-3 { transform: translateX(0.4em); }
    .line-4 { transform: translateX(1.8em); }
    p { margin: 0; }

    ::selection { background: var(--crimson); color: var(--bone); }

    /* ---------------------------------------------------------------
       Reusable atoms
    --------------------------------------------------------------- */
    .container {
      width: 100%;
      max-width: var(--container);     /* "none" by default */
      margin-inline: auto;
      padding-inline: var(--gutter);
    }
    .container--narrow { max-width: var(--container-narrow); }

    .eyebrow {
      display: inline-block;
      font-family: var(--font-heading);
      font-size: var(--fs-eyebrow);
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: var(--bone-muted);
      margin-bottom: var(--stack-md);
    }

    .lead {
      font-size: var(--fs-body);
      line-height: 1.7;
      color: var(--bone);
    }

    .muted   { color: var(--bone-muted); }
    .dim     { color: var(--bone-dim); }

    .note,
    .warning {
      font-style: italic;
      color: var(--bone-muted);
      margin-top: var(--stack-md);
      font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.25rem);  /* up to 20px */
    }
    .note strong,
    .warning strong {
      font-style: normal;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--bone);
      margin-right: 0.4em;
      font-weight: 500;
    }

    /* ---------------------------------------------------------------
       Buttons
    --------------------------------------------------------------- */
    .btn {
      --bg:     var(--crimson);
      --bg-hi:  var(--crimson-hi);
      --fg:     var(--bone);
      --bd:     transparent;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6em;
      padding: 1.05em 2.2em;
      background: var(--bg);
      color: var(--fg);
      border: 1px solid var(--bd);
      border-radius: var(--radius);
      font-family: var(--font-heading);
      font-size: var(--fs-small);
      letter-spacing: normal;
      text-transform: uppercase;
      text-decoration: none;
      transition: background-color .25s var(--ease),
                  color .25s var(--ease),
                  border-color .25s var(--ease),
                  box-shadow .25s var(--ease);
      box-shadow: 0 10px 24px -14px rgba(0,0,0,.7);
    }
    .btn:hover,
    .btn:focus-visible {
      background: var(--bg-hi);
      box-shadow: var(--shadow-cta);
    }
    .btn:focus-visible {
      outline: 2px solid var(--bone);
      outline-offset: 3px;
    }
    .btn--ghost {
      --bg: transparent;
      --bg-hi: rgba(236, 227, 210, 0.06);
      --bd: rgba(236, 227, 210, 0.4);
      color: var(--bone);
    }
    .btn--ghost:hover {
      --bd: var(--bone);
    }
    .btn .arrow {
      display: inline-block;
      transition: transform .25s var(--ease);
    }
    .btn:hover .arrow { transform: translateX(4px); }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--stack-md);
      justify-content: center;
    }
    @media (min-width: 900px) {
      .hero__cta-row {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 24px;
        width: 100%;
        max-width: 720px;
      }
      .hero__cta-row .btn {
        flex: 1 1 0;             /* equal width */
        min-width: 0;
      }
    }

    /* ---------------------------------------------------------------
       Section wrapper
    --------------------------------------------------------------- */
    section {
      position: relative;
      padding-block: var(--section-y);
    }

    /* ---------------------------------------------------------------
       HERO — cinematic full-viewport, layered composition
    --------------------------------------------------------------- */
    .hero {
      position: relative;
      height: 100svh;              /* exact viewport height — no scroll inside hero */
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;   /* push content to lower portion — faces stay visible */
      align-items: center;
      text-align: center;
      overflow: hidden;
      isolation: isolate;
      padding: clamp(1rem, 3vw, 3rem) var(--gutter) clamp(110px, 13vh, 150px);
    }
    /* background layer (image fills entire hero) */
    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: -2;
    }
    .hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 22%;
    }
    /* atmospheric overlay — vignette + heavy fade-to-ink in lower
       half so the title/CTAs overlay reads cleanly */
    .hero__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 50% 28%,
          transparent 25%,
          rgba(0,0,0,0.5) 65%,
          rgba(0,0,0,0.9) 100%),
        linear-gradient(to bottom,
          rgba(0,0,0,0.2) 0%,
          rgba(0,0,0,0) 25%,
          rgba(0,0,0,0) 42%,
          rgba(0,0,0,0.55) 58%,
          rgba(0,0,0,0.92) 72%,
          #000 84%,
          #000 100%);
      pointer-events: none;
      z-index: -1;
    }
    /* extra hard fade-to-black at the very bottom that EXTENDS past
       the bg image edge, so the next section's mask top sits on pure
       ink with zero visible seam. z-index -1 keeps it ABOVE the bg
       image but BELOW the text content (which has default z-index 0
       inside the .hero isolation context). */
    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: clamp(120px, 18vh, 220px);
      background: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.85) 55%,
        #000 100%);
      pointer-events: none;
      z-index: -1;
    }

    /* Hero is one flex column — logo above the title block. */
    .hero__top {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
    }
    .hero__logo {
      width: clamp(230px, 28vw, 480px);
      max-width: 75vw;
      filter: drop-shadow(0 14px 50px rgba(0,0,0,0.85))
              drop-shadow(0 4px 20px rgba(0,0,0,0.6));
    }

    .hero__copy {
      max-width: 1100px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(0.75rem, 1.2vw, 1.5rem);
    }
    .hero__title {
      font-size: var(--fs-h1);
    }
    @media (min-width: 900px) {
      /* keep BECOME PART OF THIS WORLD on a single line on desktop */
      .hero__title { white-space: nowrap; }
    }
    .hero__sub {
      font-size: var(--fs-body);
      color: var(--bone);
      max-width: 880px;            /* forces 2 lines on desktop at 24px body */
      line-height: 1.55;
    }
    .hero__cta-row {
      margin-top: clamp(0.5rem, 1vw, 1rem);
    }
    .hero__disclaimer {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 880px;
      padding-inline: var(--gutter);
      text-align: center;
      font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.25rem);  /* up to 20px */
      color: var(--bone-dim);
      font-style: italic;
      line-height: 1.55;
      margin: 0;
    }

    /* ---------------------------------------------------------------
       AMBITION — parallax: Leszy bg between two black masks
       (top: ink splatter, bottom: tangled vines) that fade the section
       seamlessly into the surrounding ink-black page.
    --------------------------------------------------------------- */
    .ambition {
      position: relative;
      background: var(--ink);
      isolation: isolate;
      overflow: hidden;
      /* enough height so the parallax has room to move */
      min-height: clamp(680px, 90vh, 1080px);
      display: flex;
      align-items: center;
      padding-block: clamp(8rem, 12vw, 14rem);
    }

    /* parallax bg layer — Leszy image. JS translates this on scroll. */
    .ambition__parallax {
      position: absolute;
      inset: -15% 0;          /* extra height for parallax travel */
      z-index: 0;
      background-image: url("../assets/images/Leszy_4k.webp");
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      will-change: transform;
    }

    /* Top + bottom mask frames — sit above parallax, below content.
       They're black on transparent PNGs that bleed the red bg into
       the surrounding ink. */
    .ambition__mask {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
      pointer-events: none;
      width: 100%;
      height: auto;
      display: block;
    }
    .ambition__mask--top {
      top: -1px;                /* belt-and-braces, no seam */
    }
    .ambition__mask--bottom {
      bottom: -1px;
    }

    /* Subtle inner darkening so text on the red bg stays readable
       on the left side regardless of parallax position */
    .ambition::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to right,
          rgba(0,0,0,0.85) 0%,
          rgba(0,0,0,0.55) 40%,
          rgba(0,0,0,0.1) 70%,
          rgba(0,0,0,0.4) 100%);
    }

    .ambition__inner {
      position: relative;
      z-index: 2;
      display: grid;
      gap: var(--stack-md);    /* match the eyebrow→title spacing used elsewhere on the page */
      max-width: 38rem;
    }
    @media (min-width: 768px) {
      /* widened so "AMBITION GREATER" fits on one line at 64px */
      .ambition__inner { max-width: 58%; }
    }
    .ambition__title { font-size: var(--fs-h2); }
    /* keep each line of the ambition title on a single row — no auto wrap */
    .ambition__title .line { white-space: nowrap; }

    @media (prefers-reduced-motion: reduce) {
      .ambition__parallax { transform: none !important; }
    }

    /* ---------------------------------------------------------------
       PACKAGE INTRO
    --------------------------------------------------------------- */
    .package-intro {
      position: relative;
      z-index: 2;
      text-align: center;
      padding-block: var(--section-y) clamp(80px, 8vw, 120px);
    }
    .package-intro .eyebrow {
      display: block;        /* span → block so text-align:center applies cleanly */
      text-align: center;
    }
    .package-intro__title {
      font-size: var(--fs-h2);
      margin-inline: auto;
      text-align: center;
    }
    /* override .line translateX so the centered title stays visually centered */
    .package-intro__title .line { transform: none; }

    /* ---------------------------------------------------------------
       PACKAGE ITEM (numbered)
    --------------------------------------------------------------- */
    .item {
      padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem);
    }
    .item__grid {
      display: grid;
      gap: var(--stack-xl);
      grid-template-columns: 1fr;
      align-items: center;
    }
    @media (min-width: 900px) {
      .item__grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 1rem + 4vw, 5rem);
      }
      .item--reverse .item__grid > .item__copy { order: 2; }
      .item--reverse .item__grid > .item__visual { order: 1; }
    }
    /* Two-column layout: red number sits flush at the layout's left
       edge; title + paragraphs sit in a second column to its right.
       Number does NOT escape the main page gutter. */
    .item__copy {
      display: flex;
      align-items: flex-start;
      gap: 24px;
    }
    .item__text { flex: 1 1 auto; min-width: 0; max-width: 62ch; }
    .item__title {
      font-size: var(--fs-h3);
      margin-bottom: var(--stack-md);
    }
    .item__num {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.7em;
      height: 1.7em;
      font-size: var(--fs-num);
      background: var(--crimson);
      color: var(--bone);
      border-radius: 999px;
      font-family: var(--font-heading);
      letter-spacing: 0;
      padding-left: 0.05em; /* visual centering for "1." */
      box-shadow: 0 10px 28px -10px rgba(142, 9, 16, .55);
    }
    .item__visual {
      position: relative;
      min-height: clamp(240px, 28vw, 420px);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--ink-soft);
    }
    .item__visual img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .item__copy .lead + .lead { margin-top: var(--stack-md); }

    /* ---------------------------------------------------------------
       BESTIARY (item 1)
       Desktop: oversized cover lives on the section background
       (absolute, anchored to the right edge — no empty gap, image
       can comfortably overlap the text since it's on z-index 0).
       Text + pages sit on top on z-index 1 (left ~55% of container).
       Mobile: cover collapses into normal flow above the pages.
    --------------------------------------------------------------- */
    .item--bestiary {
      position: relative;
      overflow: visible;
      padding-block: 0;
      margin-top: 0;
      margin-bottom: 60px;   /* subtle breathing room before item 2 */
    }
    .item--prequel  { margin-bottom: 60px; }   /* and before item 3 */
    /* generic .item__grid is overridden for this item */
    .item--bestiary .item__grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "text"
        "cover"
        "pages";
      gap: var(--stack-xl);
    }
    .item--bestiary .item__copy   { grid-area: text; position: relative; z-index: 1; }
    .item--bestiary .bestiary__cover { grid-area: cover; }
    .item--bestiary .bestiary__pages { grid-area: pages; position: relative; z-index: 1; }

    .bestiary__pages {
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 24px 36px rgba(0,0,0,0.6));
    }

    /* Cover wrapper — no clipping, no background.
       On mobile this is just a normal grid cell.
       On desktop (overridden below) it becomes an absolute
       background layer anchored to the right edge of the section. */
    .bestiary__cover {
      position: relative;
      width: 100%;
      overflow: hidden;        /* clip parallax overshoot */
      background: #000;
    }
    .bestiary__cover-img {
      display: block;
      width: 100%;
      height: auto;
      max-width: none;
      will-change: transform;
    }
    /* Static fade-to-ink mask on top + bottom of every bg wrapper.
       Sits above the parallaxing image — as the image translates and
       exposes its hard edge, the gradient mask covers that edge so the
       sections always blend seamlessly into the surrounding ink. */
    .bestiary__cover::before, .bestiary__cover::after,
    .prequel__bg::before,     .prequel__bg::after,
    .credits__bg::before,     .credits__bg::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: clamp(80px, 12vh, 160px);
      z-index: 2;              /* above the img inside */
      pointer-events: none;
    }
    .bestiary__cover::before, .prequel__bg::before, .credits__bg::before {
      top: 0;
      background: linear-gradient(to bottom, #000 0%, transparent 100%);
    }
    .bestiary__cover::after, .prequel__bg::after, .credits__bg::after {
      bottom: 0;
      background: linear-gradient(to top, #000 0%, transparent 100%);
    }

    @media (min-width: 900px) {
      .item--bestiary .item__grid {
        /* one column constrained to left side; cover floats on right */
        grid-template-columns: minmax(0, 55%);
        grid-template-areas:
          "text"
          "pages";
        gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
      }
      /* Section height locked to image aspect ratio → adjacent
         sections touch perfectly. Bg image fills section via
         width:100%/height:100%/object-fit:cover (no distortion
         because aspect matches). Container overlays via grid 1/1. */
      .item--bestiary {
        display: grid;
        grid-template-columns: 1fr;
        aspect-ratio: 3840 / 2000;
      }
      .item--bestiary > .bestiary__cover {
        position: static;
        grid-area: 1 / 1;
        transform: none;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }
      .item--bestiary > .container {
        grid-area: 1 / 1;
        align-self: center;
        z-index: 1;
      }
      .bestiary__cover-img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .bestiary__cover-img { transform: none !important; }
    }

    /* ---------------------------------------------------------------
       PREQUEL (item 2) — mirror of bestiary.
       Oversized Rulf illustration anchored to the LEFT edge of the
       section on z-index 0. Text + looping video sit on the right
       half on z-index 1. Parallax on the background image.
    --------------------------------------------------------------- */
    .item--prequel {
      position: relative;
      overflow: visible;
      padding-block: 0;
      min-height: 0;
    }
    .item--prequel .item__grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "text"
        "bg"
        "video";
      gap: var(--stack-xl);
    }
    .item--prequel .item__copy { grid-area: text;  position: relative; z-index: 1; }
    .item--prequel .prequel__bg    { grid-area: bg; }
    .item--prequel .prequel__video { grid-area: video; position: relative; z-index: 1; }

    .prequel__bg { position: relative; width: 100%; overflow: hidden; background: #000; }
    .prequel__bg-img {
      display: block;
      width: 100%;
      height: auto;
      max-width: none;
      will-change: transform;
    }

    .prequel__video {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 2 / 1;   /* reserve the box (video is 3292×1646) so it doesn't
                                resize from the default 150px when autoplay starts */
      border-radius: var(--radius-lg);
      background: var(--ink-soft);
    }

    @media (min-width: 900px) {
      .item--prequel .item__grid {
        grid-template-columns: minmax(0, 55%);
        grid-template-areas:
          "text"
          "video";
        justify-content: end;          /* push the text/video column to the right */
        gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
      }
      .item--prequel {
        display: grid;
        grid-template-columns: 1fr;
        aspect-ratio: 4060 / 1880;
      }
      .item--prequel > .prequel__bg {
        position: static;
        grid-area: 1 / 1;
        transform: none;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }
      .item--prequel > .container {
        grid-area: 1 / 1;
        align-self: center;
        z-index: 1;
      }
      .prequel__bg-img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .prequel__bg-img { transform: none !important; }
    }

    /* ---------------------------------------------------------------
       CREDITS (item 3) — mirror of prequel, anchored to RIGHT edge
       (matches bestiary alignment). Text on the left, oversized
       background illustration drifts in with light parallax.
    --------------------------------------------------------------- */
    .item--credits {
      position: relative;
      overflow: visible;
      padding-block: 0;
      min-height: 0;
    }
    .item--credits .item__grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "text"
        "bg";
      gap: var(--stack-xl);
    }
    .item--credits .item__copy { grid-area: text; position: relative; z-index: 1; }
    .item--credits .credits__bg { grid-area: bg; }

    .credits__bg { position: relative; width: 100%; overflow: hidden; background: #000; }
    .credits__bg-img {
      display: block;
      width: 100%;
      height: auto;
      max-width: none;
      will-change: transform;
    }

    @media (min-width: 900px) {
      .item--credits .item__grid {
        grid-template-columns: minmax(0, 55%);
        grid-template-areas: "text";
        gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
      }
      .item--credits {
        display: grid;
        grid-template-columns: 1fr;
        aspect-ratio: 4048 / 1808;
      }
      .item--credits > .credits__bg {
        position: static;
        grid-area: 1 / 1;
        transform: none;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }
      .item--credits > .container {
        grid-area: 1 / 1;
        align-self: center;
        z-index: 1;
      }
      .credits__bg-img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .credits__bg-img { transform: none !important; }
    }

    /* item 2 has an additional video placeholder */
    .item__video {
      margin-top: var(--stack-lg);
      aspect-ratio: 16 / 9;
      width: 100%;
      background: linear-gradient(135deg, #1a1612, #0f0c0a);
      border: 1px solid rgba(236,227,210,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bone-muted);
      letter-spacing: 0.32em;
      text-transform: uppercase;
      font-family: var(--font-heading);
      font-size: var(--fs-small);
      border-radius: var(--radius-lg);
      position: relative;
      cursor: pointer;
      transition: border-color .25s var(--ease), color .25s var(--ease);
    }
    .item__video:hover { border-color: rgba(236,227,210,0.3); color: var(--bone); }
    .item__video::before {
      content: "";
      width: 0; height: 0;
      border-style: solid;
      border-width: 14px 0 14px 22px;
      border-color: transparent transparent transparent currentColor;
      margin-right: 0.9em;
    }

    /* ---------------------------------------------------------------
       FINAL CTA — parchment with gold ornate borders (image background)
    --------------------------------------------------------------- */
    .final {
      padding-block: var(--section-y);
    }
    .parchment {
      position: relative;
      max-width: clamp(760px, 90vw, 1420px);
      margin-inline: auto;
      /* parchment + ornate gold borders are baked into final_bg.png */
      background: url("../assets/images/apla.webp") center / 100% 100% no-repeat;
      color: var(--ink-warm);
      text-align: center;
      /* padding scales with the image's natural edge thickness so the
         content sits comfortably inside the gold borders */
      padding: clamp(6rem, 12vw, 13rem) clamp(2.5rem, 6vw, 6rem);
    }
    .parchment .eyebrow   { color: #000; font-weight: 500; }
    .parchment__title {
      color: var(--ink-warm);
      font-size: var(--fs-h2);
      margin-bottom: var(--stack-md);
      text-align: center;
    }
    .parchment__title .line { transform: none; }
    .parchment__copy {
      color: #000;
      font-weight: 600;
      max-width: 850px;
      margin: 0 auto var(--stack-lg);
      line-height: 1.7;
    }
    .parchment .btn {
      --bg: var(--crimson);
      --bg-hi: var(--crimson-hi);
      color: var(--bone);
    }

    /* ---------------------------------------------------------------
       FAQ — minimalist accordion using <details>/<summary>
    --------------------------------------------------------------- */
    .faq {
      background: #000;
      padding-block: clamp(4rem, 2.5rem + 6vw, 8rem);
    }
    .faq__title {
      font-size: var(--fs-h2);
      text-align: center;
      margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    }
    .faq__list {
      max-width: 1100px;
      margin-inline: auto;
    }
    .faq__item {
      border-bottom: 1px solid #222;
    }
    .faq__item[open] { background: rgba(255,255,255,0.015); }
    /* remove default browser markers */
    .faq__q {
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: clamp(1.25rem, 1rem + 1vw, 2rem) 0;
      background: none;
      border: 0;
      text-align: left;
      font-family: var(--font-heading);
      font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
      letter-spacing: 0.04em;
      color: var(--heading);
      text-transform: uppercase;
      transition: color .25s var(--ease);
    }
    .faq__q-text { flex: 1 1 auto; }
    .faq__q:hover { color: var(--crimson); }
    .faq__q:hover .faq__icon { border-color: var(--crimson); color: var(--crimson); }
    /* Custom indicator — perfectly centered + / − */
    .faq__icon {
      flex: 0 0 auto;
      width: 2.2em;
      height: 2.2em;
      border: 1px solid currentColor;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: transform .35s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
    }
    .faq__icon::before {
      content: "+";
      font-family: var(--font-body);
      font-size: 1.05em;
      font-weight: 500;
      line-height: 1;
      display: block;
      transform: translateY(-0.06em);
    }
    .faq__item.active .faq__icon::before { content: "−"; transform: translateY(-0.12em); }
    .faq__item.active .faq__icon { transform: rotate(180deg); }

    /* Smooth open/close — JS sets max-height to scrollHeight */
    .faq__panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s var(--ease);
    }
    .faq__a {
      padding: 0 0 clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
      max-width: 920px;
      color: var(--bone-muted);
      font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.25rem);
      line-height: 1.75;
      margin: 0;
    }
    .faq__a a { color: var(--bone); }

    /* ---------------------------------------------------------------
       FOOTER
    --------------------------------------------------------------- */
    .footer {
      background: #000;
      text-align: center;
      padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--gutter);
      border-top: 1px solid #161616;
    }
    .footer__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.9rem;
    }
    .footer__links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.6rem 1.1rem;
    }
    .footer__links a {
      color: #888;
      font-size: 16px;
      letter-spacing: 0.02em;
      text-decoration: none;
      transition: color .25s var(--ease);
    }
    .footer__links a:hover { color: var(--crimson); }
    .footer__sep { color: #444; font-size: 15px; user-select: none; }
    .footer__copy {
      color: #777;
      font-size: 15px;
      letter-spacing: 0.02em;
    }

    /* ---------------------------------------------------------------
       Accessibility
    --------------------------------------------------------------- */
    :focus-visible {
      outline: 2px solid var(--bone);
      outline-offset: 3px;
      border-radius: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
      }
    }

    /* ===============================================================
       RESPONSIVE — desktop code above is untouched; everything below
       is layered on top via max-width media queries only.
       =============================================================== */

    /* ---------------- TABLET  (≤1199px) ---------------------------- */
    @media (max-width: 1199px) {
      :root { --gutter: clamp(2.5rem, 5vw, 60px); }

      /* Package items → single column, text on top, media below.
         Override the desktop overlay (which kicks in at ≥900px). */
      .item--bestiary,
      .item--prequel,
      .item--credits {
        display: block;
        aspect-ratio: auto;
        margin-bottom: 0;
      }
      .item--bestiary > .bestiary__cover,
      .item--prequel  > .prequel__bg,
      .item--credits  > .credits__bg {
        position: static;
        width: 100%;
        height: auto;
        margin-top: var(--stack-lg);
      }
      .bestiary__cover-img,
      .prequel__bg-img,
      .credits__bg-img { height: auto; }

      /* reorder: text (container) first, bg illustration after */
      .item--bestiary,
      .item--prequel,
      .item--credits { display: flex; flex-direction: column; }
      .item--bestiary > .container,
      .item--prequel  > .container,
      .item--credits  > .container { order: 1; }
      .item--bestiary > .bestiary__cover,
      .item--prequel  > .prequel__bg,
      .item--credits  > .credits__bg { order: 2; }

      /* inner grids → plain block stacking (reset named grid-areas
         so children don't collide in a single cell) */
      .item--bestiary .item__grid,
      .item--prequel  .item__grid,
      .item--credits  .item__grid {
        display: block;
      }
      .item--bestiary .item__copy,
      .item--prequel  .item__copy,
      .item--credits  .item__copy,
      .item--bestiary .bestiary__pages,
      .item--prequel  .prequel__video { grid-area: auto; }
      .item--bestiary .bestiary__pages { display: block; margin-top: var(--stack-lg); }
      .item--prequel  .prequel__video { margin-top: var(--stack-lg); }

      /* video keeps ratio, full width */
      .prequel__video { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }

      .ambition__inner { max-width: 80%; }
      /* let the hero title wrap below desktop so it never overflows */
      .hero__title { white-space: normal; }
      /* package-intro title must wrap on tablet (the inline nowrap on
         line-1 overflows otherwise) */
      .package-intro__title .line { white-space: normal !important; transform: none; }

      /* parchment copy — a little extra side breathing room */
      .parchment__copy { max-width: 90%; margin-inline: auto; padding: 0 15px; }

      /* --- SECTION 1: single flattened full-bleed image (book + cards) --- */
      .item--bestiary .bestiary__pages { display: none; }   /* hide floating cards */
      .item--bestiary > .bestiary__cover {
        position: static;
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);   /* full-bleed regardless of parent padding */
        height: auto;                  /* full natural height — no crop */
        margin-top: var(--stack-lg);
        overflow: visible;
        background: none;
        background-color: #000;
      }
      /* swap the desktop book photo for the flattened mobile composite,
         shown at its full height so it blends cleanly into the black */
      .item--bestiary .bestiary__cover-img {
        display: block;
        width: 100%;
        height: auto;
        content: url("../assets/images/ebook_mobile.webp");
        /* kill JS parallax here — the mobile cover is a full-height,
           unclipped, mask-less full-bleed image, so any vertical
           translate just shifts it out of its box and exposes a gap */
        transform: none !important;
      }
      .item--bestiary .bestiary__cover::before,
      .item--bestiary .bestiary__cover::after { content: none; }

      /* --- SECTION 2: text on top, then a full-bleed clean Rulf image
         with the looping video overlaid on its right 60%. --- */
      .item--prequel {
        position: relative;
        margin-top: 70px;          /* breathing room from the ebook image */
      }
      .item--prequel .item__copy { position: relative; z-index: 10; }
      /* media zone: clean full-bleed image, no overlay, no crop */
      .item--prequel > .prequel__bg {
        position: relative;
        width: 100vw;
        margin-left: calc(50% - 50vw);   /* full bleed inside any padding */
        margin-top: var(--stack-lg);
        background: none;
        overflow: visible;
        z-index: 1;
      }
      .item--prequel .prequel__bg::before,
      .item--prequel .prequel__bg::after { content: none; }
      .item--prequel .prequel__bg-img {
        display: block;
        width: 100%;
        height: auto;
        filter: none;
        object-fit: fill;
        /* kill JS parallax transform here so the Rulf image and the
           video stay perfectly in sync (they scroll together) */
        transform: none !important;
      }
      /* video overlaid on the right 60% (the dark side of the image),
         right edge aligned with the text block (one gutter in) */
      .item--prequel .prequel__video {
        display: block;
        position: absolute;
        right: var(--gutter);
        bottom: 0;
        width: 60vw;
        max-width: calc(100vw - 2 * var(--gutter));
        margin: 0;
        z-index: 5;
        aspect-ratio: 16 / 9;
        height: auto;
      }

      /* --- SECTION 3: text on top, then a clean full-bleed illustration
         with the same light fixed-parallax used in section 1. --- */
      .item--credits {
        position: relative;
        margin-top: 90px;          /* breathing room from section 2 */
      }
      .item--credits .item__copy { position: relative; z-index: 10; }
      .item--credits > .credits__bg {
        position: static;
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        height: auto;                  /* full natural height — no crop */
        margin-top: var(--stack-lg);
        overflow: visible;
        background: none;
        background-color: #000;
      }
      .item--credits .credits__bg-img {
        display: block;
        width: 100%;
        height: auto;
        content: url("../assets/images/credits_mobile.webp");
        /* kill JS parallax here — same reason as the bestiary cover above */
        transform: none !important;
      }
      .item--credits .credits__bg::before,
      .item--credits .credits__bg::after { content: none; }
    }

    /* ---------------- MOBILE  (≤767px) ---------------------------- */
    @media (max-width: 767px) {
      :root {
        --gutter: 18px;
        --fs-h1:  clamp(2rem, 7vw + 1rem, 2.5rem);   /* ~36–40px */
        --fs-h2:  clamp(1.95rem, 6vw + 1rem, 2.4rem);
        --fs-h3:  1.75rem;                           /* ~28px */
        --fs-body: 1.0625rem;                        /* 17px */
        --fs-eyebrow: 0.9rem;                        /* ~15px */
        --fs-num: 1.6rem;
      }

      /* CTAs full-width, stacked */
      .cta-row .btn,
      .parchment .btn { width: 100%; }
      .hero__cta-row {
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        max-width: none;
        gap: 12px;
      }
      .hero__cta-row .btn { flex: 0 0 auto; width: 100%; }

      /* HERO */
      .hero { padding-bottom: clamp(90px, 22vh, 150px); }
      .hero__logo { width: 68vw; }
      .hero__title { white-space: normal; }
      .hero__sub { max-width: 100%; }
      .hero__disclaimer {
        bottom: 18px;
        font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.25rem);  /* match .note */
        text-transform: none;
        max-width: 100%;
      }

      /* AMBITION — centered, full width, monster centered behind */
      .ambition__parallax { background-position: center center; }
      .ambition__inner {
        max-width: 100%;
        text-align: center;
        justify-items: center;
      }
      .ambition__title .line { transform: none; white-space: normal; }
      .ambition__inner .lead { margin-inline: auto; max-width: 100%; }

      /* PACKAGE ITEMS — number always inline beside the title block */
      .item__copy {
        display: flex;
        align-items: flex-start;
        gap: 15px;
      }
      .item__num {
        position: static;
        flex: 0 0 auto;
        width: 1.5em;
        height: 1.5em;
        font-size: var(--fs-num);
      }
      /* clean, left-aligned titles on mobile (drop the desktop step offset) */
      .item__title .line { transform: none; }
      /* text always on top, fully opaque */
      .item__copy { position: relative; z-index: 10; }

      /* Sections 1 & 3 graphics handled by the full-bleed images in
         the ≤1199 block — nothing extra needed here. */

      /* PACKAGE INTRO title — kill nowrap so it can reflow */
      .package-intro__title .line { white-space: normal !important; }

      /* FAQ */
      .faq__q { font-size: 1.05rem; gap: 1rem; }
      .faq__icon { flex-shrink: 0; }
      .faq__a { font-size: 1rem; }

      /* PARCHMENT — dedicated portrait bg for mobile. Texture stretches
         to 100% 100% so it always covers the full (auto) height behind
         text + button; padding keeps content off the torn edges. */
      /* near-full-width parchment: only a hair of margin so it never
         touches the phone bezel */
      .final > .container { padding-inline: 0; }
      .parchment {
        width: 97%;
        max-width: none;
        margin: 0 auto;
        height: auto;
        background: url("../assets/images/apla_mobile.webp") center center / 100% 100% no-repeat;
        padding: clamp(4.5rem, 17vw, 6.5rem) clamp(2.25rem, 9vw, 3.25rem);
      }
      /* extra side breathing room so copy clears the torn edges */
      .parchment__copy { max-width: 88%; margin-inline: auto; }
      /* slightly narrower, centered CTA for breathing room */
      .parchment .btn {
        width: 85%;
        max-width: 320px;
        margin: 0 auto;
      }

      /* FOOTER — links in a row, copyright under */
      .footer__links { gap: 0.4rem 0.8rem; }
      .footer__links a, .footer__sep, .footer__copy { font-size: 14px; }
    }

    /* ---- SECTION 2 video guarantee for portrait/landscape tablets ---- */
    @media (min-width: 900px) and (max-width: 1200px) {
      /* section is the positioning context for the video */
      .item--prequel { position: relative !important; overflow: visible; }
      .item--prequel > .prequel__bg { overflow: visible; }
      /* dissolve the container's stacking context so the video can
         position against the whole section (text keeps its own z-index) */
      .item--prequel > .container { position: static !important; z-index: auto !important; }
      /* overlay the video onto the Rulf bg, pinned to the section's
         bottom-right (where the illustration sits) */
      .item--prequel .prequel__video {
        display: block !important;
        position: absolute !important;
        left: auto;
        top: auto;
        bottom: 0 !important;
        right: var(--gutter) !important;
        width: 60%;
        max-width: 560px;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 0 !important;
        z-index: 99 !important;
      }
    }

    /* ---------------- EXTRA-SMALL  (≤430px) ----------------------- */
    @media (max-width: 430px) {
      /* keep generous padding so content stays inside the torn edges */
      .parchment { padding: clamp(4rem, 16vw, 5.5rem) clamp(1.75rem, 7vw, 2.5rem); }
      .faq__q { font-size: 1rem; }
    }

    /* ---------------------------------------------------------------
       SCROLL REVEAL — TEXT ONLY (blur + rise on enter).
       Graphics, the embedded video, hero and footer are NOT animated.
       Only active when JS adds .js-reveal to <html>, so no-JS users
       always see content. Disabled under prefers-reduced-motion.
    --------------------------------------------------------------- */
    .js-reveal .reveal {
      opacity: 0;
      filter: blur(12px);
      transform: translateY(26px);
      will-change: opacity, filter, transform;
      transition:
        opacity 0.9s var(--ease),
        filter  0.9s var(--ease),
        transform 0.9s var(--ease);
      transition-delay: var(--rd, 0s);
    }
    .js-reveal .reveal.in {
      opacity: 1;
      filter: blur(0);
      transform: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .js-reveal .reveal {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* ---------------------------------------------------------------
       Lenis smooth scroll — recommended base styles. Native CSS
       smooth-scroll is disabled while Lenis is active so they don't
       fight each other.
    --------------------------------------------------------------- */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }

    /* ---------------------------------------------------------------
       HERO INTRO — premium staggered entrance on first load.
       Sequence: logo → background → title → sub → CTAs → disclaimer.
       Gated by .hero-intro on <html> (added by JS only when motion is
       allowed), so no-JS / reduced-motion users see the hero instantly.
    --------------------------------------------------------------- */
    .hero-intro .hero__bg,
    .hero-intro .hero__logo,
    .hero-intro .hero__title,
    .hero-intro .hero__sub,
    .hero-intro .hero__cta-row,
    .hero-intro .hero__disclaimer { opacity: 0; }

    @keyframes heroLogoIn {
      from { opacity: 0; transform: translateY(14px) scale(1.05); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes heroBgIn {
      from { opacity: 0; transform: scale(1.12); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes heroUp {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes heroFade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* 1 — logo first (on the empty black) */
    .hero-intro .hero__logo {
      animation: heroLogoIn 0.85s var(--ease) 0.1s both;
    }
    /* 2 — background fades + slow settle-zoom behind the logo */
    .hero-intro .hero__bg {
      animation: heroBgIn 1.3s var(--ease) 0.5s both;
    }
    /* 3 — copy rises in, gently staggered */
    .hero-intro .hero__title      { animation: heroUp 0.7s var(--ease) 1.05s both; }
    .hero-intro .hero__sub        { animation: heroUp 0.7s var(--ease) 1.2s both; }
    .hero-intro .hero__cta-row    { animation: heroUp 0.7s var(--ease) 1.35s both; }
    /* disclaimer is centered via translateX(-50%) — fade only, no transform */
    .hero-intro .hero__disclaimer { animation: heroFade 0.8s var(--ease) 1.5s both; }

    @media (prefers-reduced-motion: reduce) {
      .hero-intro .hero__bg,
      .hero-intro .hero__logo,
      .hero-intro .hero__title,
      .hero-intro .hero__sub,
      .hero-intro .hero__cta-row,
      .hero-intro .hero__disclaimer {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
      }
    }