/* ==========================================================================
   Abracabazza — above-the-fold prototype
   Tokens first so they can move straight into a framework theme later.
   ========================================================================== */

:root {
  /* Colour */
  --bg: #050404;
  --bg-raised: #141113;
  --ink: #f5efe4; /* warm white */
  --ink-soft: rgba(245, 239, 228, 0.82);
  --line: rgba(245, 239, 228, 0.14);
  --gold: #d6ad62;
  --gold-light: #f0d28f;
  --gold-deep: #b5873f;
  --red: #b3121e; /* 6.9:1 with white text */
  --red-hover: #c91a27;

  /* Type */
  --font-display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-brand: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --header-h: 64px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 900px) {
  :root {
    --header-h: 84px;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  /* Keep jump-link and focus targets clear of the pinned header. */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

/* On the homepage, smooth scrolling waits until the page is past the hero:
   a smooth scroll away from the hero would set off the card transition and
   land on The Magic instead of the link's target. main.js adds the class
   (see "Jump links and the hero transition"); pages without the hero get it
   at once, and without JavaScript scrolling is simply smooth. */
.js:not(.is-past-hero) {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.btn--primary {
  background-color: var(--red);
  color: #fff;
  box-shadow:
    0 14px 32px -16px rgba(179, 18, 30, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn--primary:hover {
  background-color: var(--red-hover);
}

.btn--primary:active {
  transform: translateY(1px);
}

.btn--small {
  min-height: 44px;
  padding-inline: 1.6rem;
}

.btn--large {
  min-height: 58px;
  padding-inline: 2.1rem;
  font-size: 0.8125rem;
}

.btn--block {
  display: flex;
  width: 100%;
  min-height: 54px;
}

/* Secondary button: gold hairline on charcoal, for the less urgent CTA. */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(214, 173, 98, 0.65);
}

.btn--ghost:hover {
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1px var(--gold-light);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* The header stays pinned on every page. Over the hero it starts see-through,
   then turns solid once the page scrolls (.is-stuck, set in main.js). */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  background: linear-gradient(to bottom, rgba(5, 4, 4, 0.88), rgba(5, 4, 4, 0));
  transition: background-color 0.2s ease;
}

.site-header.is-stuck {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}

/* Pages without the hero: the header sits in the flow on a solid background. */
.site-header--page {
  position: sticky;
  top: 0;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}

.primary-nav__link[aria-current="page"] {
  color: var(--gold-light);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
  padding-inline: var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  font-family: var(--font-brand);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--gold);
  background: linear-gradient(180deg, var(--gold-light) 15%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}

.primary-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.primary-nav__link:hover {
  color: var(--gold-light);
}

.menu-toggle {
  display: none;
}

/* Phone: gold outline handset (same gradient as the wordmark) and Barry's
   number in the nav's small caps, as a tel: link. */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin: 0;
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}

.header-phone:hover {
  color: var(--gold-light);
}

.header-phone__icon {
  width: 24px;
  height: 24px;
  flex: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}

/* The menu panel's copy of the phone line (compact widths only, see below). */
.primary-nav__phone {
  display: none;
}

/* Off-screen but read by assistive tech. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Desktop navigation */
@media (min-width: 1024px) {
  .primary-nav__list {
    display: flex;
    gap: clamp(1.75rem, 2.8vw, 3rem);
  }

  .primary-nav__link {
    white-space: nowrap;
  }

  .primary-nav__cta-item {
    display: none;
  }

  /* The phone sits between FAQ and ENQUIRE like a fifth nav item: the links' own
     gap on its left (the header's 1rem gap is topped up to match), a touch more
     than the header gap before the button. Everything stays on one line from
     1024px up: the wordmark's auto margin absorbs the slack, and the number's
     letter-spacing is a little tighter than the links' so it reads as one unit. */
  .header-phone {
    margin-left: calc(clamp(1.75rem, 2.8vw, 3rem) - 1rem);
    margin-right: 0.25rem;
  }

  .header-phone__icon {
    width: clamp(22px, 1.7vw, 26px);
    height: clamp(22px, 1.7vw, 26px);
  }
}

/* Narrow desktop (1024 to 1199px): the phone number needs the room the icon
   didn't, so the links and the number sit a little closer until the header
   has space to spare. Nothing wraps or overflows here; checked at 1024. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .primary-nav__list {
    gap: 1.25rem;
  }

  .primary-nav__link {
    letter-spacing: 0.18em;
  }

  .header-phone {
    margin-left: 0.25rem;
    letter-spacing: 0.14em;
  }
}

/* Compact header: hamburger + panel */
@media (max-width: 1023.98px) {
  .header-cta {
    display: none;
  }

  /* Only the handset shows in the bar, just left of the hamburger; tighter gaps
     keep both full size at 320px. The number itself is a line in the menu panel. */
  .site-header__inner {
    gap: 0.25rem;
  }

  .header-phone {
    justify-content: center;
    width: 44px;
    gap: 0;
    margin-right: -0.25rem;
  }

  .header-phone__number {
    display: none;
  }

  .js .menu-toggle {
    order: 1;
    flex: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }

  .menu-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition:
      transform 0.25s var(--ease-out),
      opacity 0.2s ease;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .js .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.25rem var(--gutter) 1.75rem;
    background: #0e0b0c;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 0.2s ease,
      transform 0.2s var(--ease-out),
      visibility 0s linear 0.2s;
  }

  .site-header.is-menu-open {
    background: #0e0b0c;
  }

  .site-header.is-menu-open .primary-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .primary-nav__list li:not(.primary-nav__cta-item) {
    border-bottom: 1px solid var(--line);
  }

  .primary-nav__link {
    min-height: 56px;
    font-size: 0.875rem;
  }

  /* The phone number as a gold line above the ENQUIRE button. */
  .js .primary-nav__phone {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
    color: var(--gold);
  }

  .primary-nav__phone-link {
    display: flex;
    flex: 1;
    align-items: center;
    gap: inherit;
    min-height: inherit;
    color: inherit;
    text-decoration: none;
  }

  .primary-nav__phone .header-phone__icon {
    width: 22px;
    height: 22px;
  }

  .primary-nav__cta-item {
    margin-top: 1.5rem;
  }

  /* Without JavaScript the links stay visible as a simple row. */
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    height: auto;
    padding-block: 0.5rem;
  }

  html:not(.js) .primary-nav {
    width: 100%;
  }

  html:not(.js) .primary-nav__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
  }

  html:not(.js) .primary-nav__cta-item {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 1.75rem) var(--gutter) 0;
  overflow: clip;
  /* Flat, and identical to the photo's black, so the photo has no visible edge. */
  background: var(--bg);
}

/* Copy */

.hero__content {
  position: relative;
  z-index: 2;
}



.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 10.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.hero__title-line {
  display: block;
  text-wrap: balance;
}

.hero__title-line--gold {
  margin-top: 0.08em;
  color: var(--gold);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1.75rem;
}

/* Photo */

.hero__media {
  /* Moment Barry lets go: the wind-up frame fades out and the cards leave. */
  --release: 1s;
  position: relative;
  z-index: 1;
  container-type: inline-size;
  pointer-events: none;
}

.hero__photos {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__windup {
  position: absolute;
  inset: 0;
  will-change: opacity, filter;
  /* Hidden by default so reduced-motion / no-animation shows the final frame. */
  opacity: 0;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Blend the rectangular photo into the charcoal background. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 5%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 76%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 5%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 76%, transparent 96%);
  mask-composite: intersect;
}

/* Flying cards */

.flying-cards {
  position: absolute;
  inset: 0;
}

.card {
  --w: 8.5cqi;
  --r: 0deg;
  --rx: 0deg;
  --ry: 0deg;
  --blur: 0px;
  --sheen: 135deg;
  position: absolute;
  width: var(--w);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--w) * 0.056);
  /* Paper edge + contact shadow. The soft cast shadow is on .card__shadow. */
  box-shadow:
    0 0 0 0.5px rgba(40, 30, 20, 0.35),
    0 0.12cqi 0.2cqi rgba(0, 0, 0, 0.45);
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--r));
  /* Static filter: only transform animates, so the throw stays on the GPU
     compositor with no per-frame repaints. */
  filter: blur(var(--blur)) brightness(0.97) sepia(0.06);
  will-change: transform;
  --delay: var(--release);
  --r0: 18deg;
  --spin: 360deg;
  /* Hidden until release (the deck is in the photo); every card appears at once
     as one pile, then each flies out of it. */
  animation:
    card-hide var(--release) linear,
    card-throw 1s cubic-bezier(0.12, 0.72, 0.22, 1) var(--delay) both;
}

/* Soft cast shadow, drawn behind the card art. It starts shrunk inside the
   card so the held pile casts no shadow onto the cards beneath it or onto
   Barry's fingers, then grows to full size as the card lifts away. */
.card__shadow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow:
    0 1cqi 1.6cqi -0.2cqi rgba(0, 0, 0, 0.45),
    0 2.6cqi 4.5cqi -1cqi rgba(0, 0, 0, 0.5);
  will-change: transform;
  animation: card-shadow 1s cubic-bezier(0.12, 0.72, 0.22, 1) var(--delay) both;
}

.card__art {
  display: block;
  width: 100%;
  height: 100%;
}

/* Light falling across slightly bowed card stock, plus fine paper grain. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      var(--sheen),
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.08) 30%,
      rgba(0, 0, 0, 0) 55%,
      rgba(0, 0, 0, 0.1) 80%,
      rgba(0, 0, 0, 0.22) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 100% 100%, 140px 140px;
  mix-blend-mode: soft-light;
}

/* Thin bright rim where the light catches the card edge. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0.08cqi 0 rgba(255, 255, 255, 0.7),
    inset 0 -0.08cqi 0 rgba(0, 0, 0, 0.12);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Every card launches from Barry's throwing hand and flies towards the viewer,
   settling at (--x, --y). Positions are in cqi of the square photo box, so the
   launch offset is derived automatically from the hand position. */
.flying-cards {
  /* Centre of the squared deck in the wind-up photo. */
  --hand-x: 21.2cqi;
  --hand-y: 34.3cqi;
}

.card {
  left: var(--x);
  top: var(--y);
  --fx: calc(var(--hand-x) - var(--x) - var(--w) / 2);
  --fy: calc(var(--hand-y) - var(--y) - var(--w) * 0.7);
}

.card--1 {
  --sheen: 160deg;
  --x: 24cqi;
  --y: 7cqi;
  --w: 7cqi;
  --r: -24deg;
  --rx: 18deg;
  --ry: -22deg;
  --spin: -360deg;
  --s0: 1.15;
  --r0: 17deg;
  --delay: calc(var(--release) + 0.02s);
}

.card--2 {
  --sheen: 120deg;
  --x: 2cqi;
  --y: 50cqi;
  --w: 8.5cqi;
  --r: 14deg;
  --rx: -12deg;
  --ry: 26deg;
  --spin: 360deg;
  --s0: 0.947;
  --r0: 19deg;
  --delay: calc(var(--release) + 0.03s);
}

.card--3 {
  --sheen: 100deg;
  --x: 35cqi;
  --y: 1cqi;
  --w: 6cqi;
  --r: 32deg;
  --rx: 30deg;
  --ry: 10deg;
  --blur: 0.4px;
  --spin: 360deg;
  --s0: 1.342;
  --r0: 16.5deg;
  --delay: calc(var(--release) + 0s);
}

.card--4 {
  --sheen: 150deg;
  --x: 15cqi;
  --y: 62cqi;
  --w: 11cqi;
  --r: -12deg;
  --rx: 14deg;
  --ry: -18deg;
  --blur: 0.6px;
  --spin: -360deg;
  --s0: 0.732;
  --r0: 18.5deg;
  --delay: calc(var(--release) + 0.04s);
}

.card--5 {
  --sheen: 115deg;
  --x: 30cqi;
  --y: 43cqi;
  --w: 13cqi;
  --r: 22deg;
  --rx: -16deg;
  --ry: 20deg;
  --blur: 1.5px;
  --spin: 360deg;
  --s0: 0.619;
  --r0: 17.5deg;
  --delay: calc(var(--release) + 0.02s);
}

.card--6 {
  --sheen: 175deg;
  --x: 3cqi;
  --y: 14cqi;
  --w: 8cqi;
  --r: -34deg;
  --rx: 10deg;
  --ry: 24deg;
  --spin: -360deg;
  --s0: 1.006;
  --r0: 19.5deg;
  --delay: calc(var(--release) + 0.01s);
}

.card--7 {
  --sheen: 145deg;
  --x: 44cqi;
  --y: 69cqi;
  --w: 15cqi;
  --r: -18deg;
  --rx: 20deg;
  --ry: -14deg;
  --blur: 2.4px;
  --spin: 360deg;
  --s0: 0.537;
  --r0: 18deg;
  --delay: calc(var(--release) + 0.05s);
}

/* --------------------------------------------------------------------------
   Mobile / tablet stack (copy first, Barry beneath)
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {
  .hero__title {
    max-width: 11em;
  }

  .hero__media {
    align-self: center;
    width: calc(100% + var(--gutter) * 2);
    max-width: 680px;
    aspect-ratio: 1;
    margin-top: 1rem;
  }

  .hero__photo {
    -webkit-mask-image:
      linear-gradient(#000, #000),
      linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 94%);
    mask-image:
      linear-gradient(#000, #000),
      linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 94%);
  }

}

@media (max-width: 479.98px) {
  /* Compact CTA on phones: clear, but secondary to the headline and Barry.
     No glow; the ::after keeps a 44px tap target around the 38px button. */
  .btn--large {
    position: relative;
    min-height: 38px;
    padding-inline: 0.875rem;
    font-size: 0.65625rem;
    letter-spacing: 0.1em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .btn--large::after {
    content: "";
    position: absolute;
    inset: -3px 0;
  }
}

/* --------------------------------------------------------------------------
   Desktop composition (copy left, Barry right)
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .hero {
    padding-top: var(--header-h);
  }

  .hero__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(42vw, 50rem);
    padding-block: clamp(1.5rem, 5vh, 4rem);
  }

  .hero__title {
    font-size: clamp(2.6rem, 4.3vw, 5.4rem);
    max-width: 11em;
  }


  .hero__actions {
    margin-top: clamp(1.75rem, 4.5vh, 2.75rem);
  }

  .hero__media {
    position: absolute;
    right: -3vw;
    bottom: 0;
    width: min(58vw, calc(100vh - var(--header-h)), 1180px);
    width: min(58vw, calc(100svh - var(--header-h)), 1180px);
    aspect-ratio: 1;
  }
}

/* --------------------------------------------------------------------------
   Section basics (shared by the sections below the hero)
   -------------------------------------------------------------------------- */

.eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-title {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Barry in action: photos and video
   Slot shapes come from the modifier class, not the order:
   --feature (16:9), --portrait (3:4), --landscape (3:2).
   Phones: two columns, wide slots full width, portraits in pairs.
   Desktop: twelve columns, each row one wide slot (8) + one portrait (4).
   The portrait stretches to the wide slot's height.
   -------------------------------------------------------------------------- */

.media {
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(4.5rem, 12vw, 9rem) var(--gutter);
  /* Clear the pinned header, plus breathing room. */
  padding-top: calc(var(--header-h) + clamp(1.75rem, 5vw, 4rem));
  background: #8e111a;
  color: var(--ink);
  scroll-margin-top: calc(-1 * var(--header-h));
}

.media > * {
  max-width: 1320px;
  margin-inline: auto;
}

.media__intro {
  display: grid;
  gap: 1rem;
}

.media__lede {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  color: rgba(245, 239, 228, 0.84);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.media-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-raised);
}

.media-item--feature,
.media-item--landscape {
  grid-column: 1 / -1;
}

.media-item--feature {
  aspect-ratio: 16 / 9;
}

.media-item--landscape {
  aspect-ratio: 3 / 2;
}

.media-item--portrait {
  aspect-ratio: 3 / 4;
}

.media-item > :is(picture, img, video, .media-placeholder) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.media-item img {
  object-fit: cover;
  /* Crop focus. Override per photo, e.g. style="--focus: 50% 20%" on the <figure>. */
  object-position: var(--focus, 50% 35%);
}

/* Never crop the showreel; letterbox it instead. */
.media-item video {
  object-fit: contain;
  background: #000;
}

.media-item video:focus-visible {
  outline-offset: -3px;
}

.media-item__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(5, 4, 4, 0.85), rgba(5, 4, 4, 0));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Placeholder until Barry's real photo or video is dropped in. Viewfinder
   corners mark it as a photo slot rather than a finished panel. */
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.25rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(245, 239, 228, 0.045), rgba(245, 239, 228, 0) 70%),
    var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line);
}

.media-placeholder::before {
  --c: rgba(214, 173, 98, 0.5);
  --l: clamp(12px, 2.2vw, 22px);
  content: "";
  position: absolute;
  inset: clamp(8px, 1.4vw, 16px);
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l);
  background-repeat: no-repeat;
}

.media-placeholder p {
  margin: 0;
}

.media-placeholder__tag {
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(214, 173, 98, 0.5);
  border-radius: 2px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.media-placeholder__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.media-placeholder__hint {
  max-width: 26ch;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.media__copyright {
  max-width: 1320px;
  margin: clamp(0.85rem, 2vw, 1.25rem) auto 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(245, 239, 228, 0.72);
}

.media__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(245, 239, 228, 0.3);
}

.media__cta-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  text-transform: uppercase;
}

/* Site footer: every rule lives in the "Footer" block of sections.css. */

/* Privacy policy page */
.legal {
  max-width: 68ch;
  padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
  color: var(--ink-soft);
  line-height: 1.65;
}

.legal h2 {
  margin: 2.5rem 0 0.5rem;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
}

.legal p,
.legal ul {
  margin: 0 0 1rem;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 0.5rem;
}

.legal a {
  color: var(--gold-light);
  text-underline-offset: 0.2em;
}

.legal strong {
  color: var(--ink);
}

.legal__updated {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.legal__status {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: var(--bg-raised);
}

@media (max-width: 479.98px) {
  .media-placeholder {
    padding: 0.75rem;
  }

  .media-placeholder__hint {
    font-size: 0.75rem;
  }

  .media__cta .btn {
    width: 100%;
    letter-spacing: 0.14em;
  }
}

@media (min-width: 900px) {
  .media__intro {
    grid-template-columns: 1fr minmax(0, 26rem);
    align-items: end;
    gap: 2rem;
  }

  .media-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .media-item--feature,
  .media-item--landscape {
    grid-column: span 8;
  }

  /* Takes its height from the wide slot beside it; the min-height keeps a
     portrait that ends up on a row of its own from collapsing. */
  .media-item--portrait {
    grid-column: span 4;
    aspect-ratio: auto;
    min-height: 20rem;
  }
}

/* One-off scroll transition: the cards that finished the hero throw lift off,
   a larger pack flies at the viewer, and the photo section's red blooms through. */
.scroll-fx {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  perspective: 1200px;
  overflow: hidden;
  visibility: hidden;
}

.scroll-fx.is-active {
  visibility: visible;
}

.scroll-fx__pack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

@property --bloom-r {
  syntax: "<length>";
  inherits: false;
  initial-value: -100vmax;
}

.scroll-fx__wipe {
  --bloom-x: 50%;
  --bloom-y: 50%;
  --bloom-soft: 30vmax;
  position: absolute;
  inset: 0;
  background: #8e111a;
  -webkit-mask-image: radial-gradient(
    circle at var(--bloom-x) var(--bloom-y),
    #000 var(--bloom-r),
    transparent calc(var(--bloom-r) + var(--bloom-soft))
  );
  mask-image: radial-gradient(
    circle at var(--bloom-x) var(--bloom-y),
    #000 var(--bloom-r),
    transparent calc(var(--bloom-r) + var(--bloom-soft))
  );
}

.fly-card {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 5 / 7;
  border-radius: 5.6% / 4%;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(40, 30, 20, 0.3),
    0 24px 60px -20px rgba(0, 0, 0, 0.75);
  will-change: transform, opacity;
  opacity: 0;
}

.fly-card svg {
  display: block;
  width: 100%;
  height: 100%;
}

.media.is-revealed > * {
  animation: media-rise 0.7s var(--ease-out) both;
}

.media.is-revealed > :nth-child(2) {
  animation-delay: 0.08s;
}

.media.is-revealed > :nth-child(3) {
  animation-delay: 0.16s;
}

@keyframes media-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* --------------------------------------------------------------------------
   Anchor targets for future sections (non-visual)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Entrance motion — plays once, then everything stays still.
   -------------------------------------------------------------------------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes card-hide {
  from,
  to {
    opacity: 0;
  }
}

@keyframes windup-release {
  0%,
  34% {
    opacity: 1;
    filter: blur(0);
  }
  58% {
    opacity: 0.82;
    filter: blur(0.35px);
  }
  82% {
    opacity: 0.3;
    filter: blur(0.8px);
  }
  100% {
    opacity: 0;
    filter: blur(1.2px);
  }
}

/* One continuous move: from the squared deck in Barry's hand straight to its
   resting spot. The extra full turn in --spin gives
   the spin without a mid keyframe, so the motion never pauses. */
@keyframes card-throw {
  from {
    transform: translate(var(--fx), var(--fy)) perspective(700px) rotateX(0deg) rotateY(-26deg)
      rotate(var(--r0)) scale(var(--s0));
  }
  to {
    transform: translate(0, 0) perspective(700px) rotateX(var(--rx)) rotateY(var(--ry))
      rotate(calc(var(--r) + var(--spin))) scale(1);
  }
}

@keyframes card-shadow {
  from {
    transform: scale(0.3);
  }
}

.hero__content > * {
  animation: rise 0.8s var(--ease-out) both;
}

.hero__title {
  animation-delay: 0.18s;
}
.hero__actions {
  animation-delay: 0.4s;
}

.hero__photos {
  animation: fade 0.6s ease-out both;
}

.hero__windup {
  /* Begin a fraction before the cards release and cross-fade to the open-hand
     frame. Nothing moves, so the shoulder and arm stay still. The brief blur
     reads as motion and softens the two photographed hand poses into one gesture. */
  animation: windup-release 0.28s cubic-bezier(0.22, 0.72, 0.2, 1)
    calc(var(--release) - 0.1s) both;
}

/* Hold the photo + throw sequence until both frames are decoded (js/main.js),
   so the throw is never missed on a slow connection. */
.js .hero:not(.is-ready) :is(.hero__photos, .hero__windup, .card, .card__shadow) {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}