/* Éclore hero: layout and UI over the Glass Bloom scroll player. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: 'Tektur';
  src: url('fonts/tektur.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;

  /* primitives (sampled from the bloom frames and the reference screenshot) */
  --indigo-950: #121530;
  --indigo-900: #1b1f3b;
  --indigo-800: #343b6f;
  --indigo-600: #4b57a0;
  --indigo-500: #5d63a8;
  --lavender-300: #9e9ad7;
  --white: #ffffff;

  /* semantic */
  --text-1: var(--white);
  --text-2: rgba(255, 255, 255, 0.88);
  --text-on-light: var(--indigo-900);
  --text-on-pill: var(--indigo-950);
  --surface-pill: var(--white);
  --surface-glass: rgba(27, 31, 59, 0.42);
  --surface-glass-strong: rgba(18, 21, 48, 0.62);
  --border-glass: rgba(255, 255, 255, 0.5);
  --accent: var(--indigo-600);
  --accent-foreground: var(--white);
  --focus: #ffffff;
  --focus-halo: var(--indigo-950);

  /* type (fluid, rem + vw so zoom still scales; anchors 360px to 1680px) */
  --font-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Tektur', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --step-body: clamp(0.8125rem, 0.7784rem + 0.1515vw, 0.9375rem); /* 13 to 15px */
  --step-ui: 0.875rem; /* 14px */
  --step-meta: 0.75rem; /* 12px floor */
  --step-title: min(clamp(2.375rem, 1.3182rem + 4.697vw, 6.25rem), 1rem + 8.4svh);

  /* space */
  --pad: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --gap: clamp(0.75rem, 0.55rem + 0.8vw, 1.5rem);
  --nav-h: 4.5rem;

  /* radii */
  --r-pill: 999px;
  --r-card: 1.375rem;
  --r-thumb: 1rem;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
}

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

html {
  background: var(--indigo-800);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-1);
  background: var(--indigo-800);
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 50;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-pill);
  background: var(--surface-pill);
  color: var(--text-on-pill);
  font-weight: 600;
  font-size: var(--step-ui);
  text-decoration: none;
  transform: translateY(-200%);
}

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

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

/* ---------- hero shell ---------- */
.hero.gbs {
  /* Long scroll so the bloom opens slowly. */
  --gbs-scroll-length: 460vh;
  --gbs-bg-top: #343b6f;
  --gbs-bg-bottom: #aca9d9;
}

.hero__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Without JavaScript: a static poster with the same layout. */
.hero:not(.gbs) {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(180deg, #343b6f 0%, #6a6d9c 55%, #aca9d9 100%);
}

/* These controls need the script (film dialog, menu panel). */
html:not(.js) [data-film-open],
html:not(.js) .nav__toggle,
html:not(.js) .hero__caption span {
  display: none;
}

/* The UI layer: a grid that also decides where the flower lives (.hero__slot). */
.hero__ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: var(--pad) minmax(0, 1fr) var(--pad);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    'nav nav nav'
    '. copy .'
    '. stage .'
    '. actions .'
    'mark mark mark';
  padding-block-end: env(safe-area-inset-bottom);
  pointer-events: none;
}

.hero__ui > * {
  pointer-events: auto;
}

.hero__slot {
  grid-area: stage;
  min-height: 0;
  margin-block: 0.5rem;
  pointer-events: none;
}

/* ---------- navigation ---------- */
.nav {
  grid-area: nav;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: var(--nav-h);
  padding-block: max(0.75rem, env(safe-area-inset-top)) 0.75rem;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
  background: linear-gradient(180deg, rgba(18, 21, 48, 0.42), rgba(18, 21, 48, 0));
}

.nav__toggle {
  /* No logo in the bar: the menu button keeps the right edge on its own. */
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 0.5rem 0 1.1rem;
  border: 1px solid var(--border-glass);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--step-ui);
  font-weight: 500;
  cursor: pointer;
}

.nav__toggle-icon {
  display: grid;
  place-content: center;
  gap: 4px;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-pill);
}

.nav__toggle-icon i {
  display: block;
  width: 12px;
  height: 1.5px;
  background: var(--text-on-pill);
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-icon i:first-child {
  transform: translateY(2.75px) rotate(45deg);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-icon i:last-child {
  transform: translateY(-2.75px) rotate(-45deg);
}

/* Compact: the links live in a panel under the bar. */
.nav__panel {
  position: absolute;
  top: calc(100% - 0.25rem);
  right: max(var(--pad), env(safe-area-inset-right));
  left: max(var(--pad), env(safe-area-inset-left));
  z-index: 10;
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-card);
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.nav.is-open .nav__panel {
  display: flex;
}

.nav__links {
  display: grid;
  gap: 0.5rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 2.75rem;
  width: 100%;
  padding: 0 0.4rem 0 1.1rem;
  border: 1px solid var(--border-glass);
  border-radius: var(--r-pill);
  color: var(--text-1);
  font-size: var(--step-ui);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.pill__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.pill__arrow svg,
.cta__circle svg,
.social svg,
.title__mark svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill__arrow svg {
  width: 1rem;
  height: 1rem;
}

.pill__arrow--dark {
  border-color: var(--text-on-pill);
}

@media (hover: hover) and (pointer: fine) {
  .pill:hover {
    background: var(--surface-pill);
    color: var(--text-on-pill);
  }

  .social:hover {
    background: var(--surface-pill);
    color: var(--text-on-pill);
  }

  .nav__cta:hover,
  .cta:hover {
    background: #e6e8f6;
  }

  .cta:hover .cta__circle {
    transform: rotate(45deg);
  }

}

.nav__social {
  display: flex;
  gap: 0.5rem;
}

.social {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border-glass);
  border-radius: 50%;
  color: var(--text-1);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.social svg {
  width: 1.25rem;
  height: 1.25rem;
}

.social .dot,
.social .fill {
  fill: currentColor;
  stroke: none;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0 0.4rem 0 1.1rem;
  border-radius: var(--r-pill);
  background: var(--surface-pill);
  color: var(--text-on-pill);
  font-size: var(--step-ui);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}

/* ---------- copy ---------- */
.hero__copy {
  grid-area: copy;
  display: grid;
  gap: clamp(0.75rem, 0.4rem + 1.2svh, 1.5rem);
  align-content: start;
  padding-block-start: clamp(0.25rem, 1.5svh, 1.5rem);
}

.title {
  position: relative;
  /* Shrink to the longest line so the indented second line ends under the
     first one instead of drifting to the far edge on wide stacked screens. */
  width: fit-content;
  max-width: 100%;
}

.title__text {
  margin: 0;
  font-size: var(--step-title);
  font-weight: 500;
  font-stretch: 88%;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  outline: none;
}

.title__line {
  display: block;
  white-space: nowrap;
}

.title__line--indent {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding-inline-start: 0.2em;
}

.title__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 0.72em;
  height: 0.72em;
  margin-inline-end: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.title__mark svg {
  width: 52%;
  height: 52%;
  stroke-width: 2;
}

/* Rotating film badge: sits to the right of the short third line on the split
   layout. On stacked layouts the title is too wide for it, so the same control
   moves next to the main button as .film-chip. */
.badge {
  display: none;
  position: absolute;
  right: 0;
  bottom: -0.25rem;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--r-pill);
}

.film-chip {
  display: grid;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

.badge__thumb {
  display: none;
  width: 4.75rem;
  height: 3.6rem;
  margin-inline-end: -1.5rem;
  border-radius: var(--r-thumb);
  object-fit: cover;
}

.badge__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.badge__ring > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: badge-spin 18s linear infinite;
}

.badge__ring text {
  fill: var(--text-1);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.badge__play {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent);
}

.badge__play svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: var(--accent-foreground);
  transform: translateX(1px);
}

@keyframes badge-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero__body {
  max-inline-size: 38rem;
  font-size: var(--step-body);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-1);
  text-wrap: pretty;
}

.hero__body strong {
  color: var(--text-1);
  font-weight: 700;
}

/* ---------- primary action ---------- */
.hero__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.cta {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 4.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
  border-radius: var(--r-pill);
  background: var(--surface-pill);
  color: var(--text-on-pill);
  text-decoration: none;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.cta__label {
  font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1.0625rem);
  font-weight: 700;
  font-stretch: 92%;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.cta__circle {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  transition: transform 220ms var(--ease-out);
}

.cta__circle svg {
  width: 45%;
  height: 45%;
  stroke-width: 1.6;
}

/* ---------- caption (wide screens) ---------- */
.hero__caption {
  display: none;
  justify-self: start;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-thumb);
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--step-meta);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-1);
}

.hero__caption span {
  font-weight: 500;
}

/* ---------- giant wordmark ---------- */
/* Sits along the bottom edge, flush right. The script sizes the band to the
   inked word (--wordmark-h), lifts the word so its ink starts at the band's top
   edge (--wordmark-shift) and nudges it so the ink of the last letter ends on
   the right padding line (--wordmark-dx); the band clips the entrance rise. */
.wordmark {
  grid-area: mark;
  position: relative;
  z-index: -1;
  display: flex;
  justify-content: flex-end;
  height: var(--wordmark-h, auto);
  padding-inline: var(--pad);
  margin-block: clamp(0.5rem, 2svh, 1.25rem) clamp(0.5rem, 1.5svh, 1rem);
  overflow: hidden;
  pointer-events: none;
  line-height: 0.74;
}

.wordmark__text {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6.25rem, 0.7955rem + 24.2424vw, 26.25rem);
  letter-spacing: -0.04em;
  white-space: nowrap;
  transform: translate(var(--wordmark-dx, 0px), var(--wordmark-shift, 0px));
  color: #f2f3fa;
  background-color: #f2f3fa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .38 0 0 0 0 .55 0 0 0 2.4 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ffffff 0%, #eceef8 55%, #c9cbe3 100%);
  background-size: 220px 220px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Film grain over everything: fixed, cheap, never intercepts input. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 20;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- film dialog ---------- */
.film {
  width: min(92vw, 70rem);
  max-height: 92svh;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--indigo-950);
  color: var(--text-1);
  overflow: hidden;
}

.film::backdrop {
  background: rgba(12, 14, 32, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.film__frame {
  position: relative;
}

.film__video {
  display: block;
  width: 100%;
  max-height: 92svh;
  aspect-ratio: 16 / 9;
  background: var(--indigo-950);
}

.film.is-portrait {
  width: min(92vw, 26rem);
}

.film.is-portrait .film__video {
  aspect-ratio: 9 / 16;
}

.film__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-pill);
  color: var(--text-on-pill);
  font-size: var(--step-ui);
  font-weight: 600;
  cursor: pointer;
}

/* ---------- entry choreography ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero.gbs:not(.is-entered) .hero__ui .reveal {
    opacity: 0;
    transform: translateY(18px);
  }

  .js .hero__ui .reveal {
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }

  .js .wordmark__text {
    transition: transform 1200ms var(--ease-out) 150ms;
  }

  .js .hero.gbs:not(.is-entered) .wordmark__text {
    transform: translate(var(--wordmark-dx, 0px), calc(var(--wordmark-shift, 0px) + 0.8em));
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge__ring > svg {
    animation: none;
  }

  .cta__circle,
  .nav__toggle-icon i {
    transition: none;
  }
}

/* ---------- wide: inline navigation ---------- */
@media (min-width: 68rem) {
  .nav__toggle {
    display: none;
  }

  .nav__panel {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Links start at the left edge of the bar, in line with the copy. */
  .nav__panel > nav {
    margin-inline: 0;
  }

  .nav__links {
    display: flex;
    gap: 0.5rem;
  }

  .pill {
    width: auto;
    background: rgba(255, 255, 255, 0.06);
  }

  .nav__social {
    margin-inline-start: auto;
  }
}

/* ---------- split composition: copy left, flower right ---------- */
@media (min-width: 36rem) and (min-aspect-ratio: 11/10) {
  .hero.gbs {
    --gbs-scroll-length: 560vh;
  }

  .hero__ui {
    grid-template-columns: var(--pad) minmax(0, 1fr) minmax(0, 1.08fr) var(--pad);
    /* Copy centred on the screen's height, left column. The last row mirrors
       the menu row and the wordmark rises from it into the empty space at the
       bottom right, so it no longer pushes the copy up. The script sets
       --nav-row to the menu's real height and, if the copy would touch the
       word, grows the last row (--mark-clear) just enough to lift it clear. */
    --mark-band: calc(var(--wordmark-h, 0px) + clamp(0.5rem, 2svh, 1.25rem) + clamp(0.5rem, 1.5svh, 1rem));
    grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr) max(var(--nav-row, var(--nav-h)), var(--mark-clear, 0px));
    grid-template-areas:
      'nav nav nav nav'
      '. . stage .'
      '. copy stage .'
      '. actions stage .'
      '. . stage .'
      'mark mark mark mark';
    --col-gap: clamp(1rem, 2vw, 2.5rem);
    column-gap: var(--col-gap);
  }

  /* The copy column starts one gap in from the side padding; the menu
     starts at the same line so the two read as one left edge. */
  .nav {
    padding-inline-start: max(calc(var(--pad) + var(--col-gap)), env(safe-area-inset-left));
  }

  .hero__slot {
    grid-row: 2 / 7;
    margin-block: 0.25rem;
    /* The flower area still ends where the wordmark band starts. */
    margin-block-end: calc(var(--mark-band) + 0.25rem);
  }

  .wordmark {
    grid-row: 5 / 7;
    align-self: end;
  }

  .hero__copy {
    padding-block-start: 0;
  }

  .title__line--indent {
    padding-inline-start: 0;
  }

  .title__mark {
    margin-inline-end: 0;
  }

  .hero__actions {
    padding-block-start: clamp(0.75rem, 3.2svh, 2.25rem);
    align-items: flex-start;
  }

  .cta {
    width: auto;
    min-width: min(100%, 22rem);
    min-height: clamp(4.5rem, 2.5rem + 6svh, 6.75rem);
    padding-inline-start: 2.5rem;
  }

  .cta__circle {
    width: clamp(3.5rem, 1.5rem + 5svh, 5.5rem);
    height: clamp(3.5rem, 1.5rem + 5svh, 5.5rem);
  }

  .badge {
    display: flex;
  }

  .film-chip {
    display: none;
  }

  .cta {
    flex: 0 1 auto;
  }

  .badge__thumb {
    display: block;
  }

  /* Never taller than the third line, so it never reaches "that blooms". */
  .badge {
    bottom: 0;
  }

  .badge__ring {
    width: clamp(4.5rem, calc(var(--step-title) * 0.82), 5.5rem);
    height: clamp(4.5rem, calc(var(--step-title) * 0.82), 5.5rem);
  }
}

@media (min-width: 36rem) and (min-aspect-ratio: 11/10) {
  /* Soft shade behind the copy column: the field lightens toward the bottom and
     glass highlights can drift under the body copy. */
  .gbs__sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* The copy sits at mid height, where the field is lighter than at the
       top: a soft pool of shade behind it keeps the body copy readable. */
    background:
      radial-gradient(ellipse 48% 42% at 22% 56%, rgba(18, 21, 48, 0.22), rgba(18, 21, 48, 0) 100%),
      linear-gradient(270deg, rgba(18, 21, 48, 0) 42%, rgba(18, 21, 48, 0.34) 72%, rgba(18, 21, 48, 0.4) 100%);
  }
}

/* Narrow split (phones on their side, 200% zoom): the copy column is about
   half the screen, so the headline scales with the width too. */
@media (min-width: 36rem) and (max-width: 51.99rem) and (min-aspect-ratio: 11/10) {
  .hero__ui {
    --step-title: min(clamp(1.75rem, 5.2vw, 2.75rem), 1rem + 8.4svh);
    /* A little more width for the copy so the main button stays on two lines. */
    grid-template-columns: var(--pad) minmax(0, 1.25fr) minmax(0, 1fr) var(--pad);
  }

  .hero__actions {
    padding-block-start: 0.75rem;
  }
}

/* Without JavaScript in the split layout: keep the still flower in the right
   column, out from under the copy, and fade its left edge into the field. */
@media (min-width: 36rem) and (min-aspect-ratio: 11/10) {
  .hero__poster img {
    left: auto;
    right: 0;
    width: 56%;
    -webkit-mask-image: linear-gradient(270deg, #000 80%, transparent);
    mask-image: linear-gradient(270deg, #000 80%, transparent);
  }
}

/* Split layout with room for the caption. */
@media (min-width: 60rem) and (min-aspect-ratio: 11/10) and (min-height: 38rem) {
  .hero__caption {
    display: block;
    grid-row: 2 / 3;
    grid-column: 3;
    align-self: start;
    justify-self: end;
    position: relative;
    z-index: 2;
    margin-block-start: 0.5rem;
  }
}

/* Short landscape screens (phones on their side): trim to the essentials. */
@media (max-height: 30rem) and (min-aspect-ratio: 11/10) {
  .hero__body {
    display: none;
  }

  .nav {
    min-height: 3.5rem;
    padding-block: max(0.5rem, env(safe-area-inset-top)) 0.25rem;
  }

  /* No room for the badge beside the title: the round film button sits next
     to the main button instead, as on phones held upright. */
  .badge {
    display: none;
  }

  .film-chip {
    display: grid;
  }

  .cta {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3.75rem;
  }

  .cta__circle {
    width: 2.9rem;
    height: 2.9rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav__toggle,
  .nav__panel,
  .badge__ring,
  .title__mark {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--indigo-900);
  }
}

@media (forced-colors: active) {
  .wordmark__text {
    -webkit-text-fill-color: CanvasText;
    background: none;
  }

  .grain {
    display: none;
  }
}