/* =========================================================================
   Indigo — 5 tales of being
   Ground: beige. Content: white panels floating over full-bleed chapter
   covers. Chrome: mono labels in difference blend so they invert over any
   image. One display face, used once per chapter, at a size that overlaps
   its own letterforms.
   ========================================================================= */

/* ------------------------------------------------------------- tokens --- */

:root {
  --beige: #f4f3eb;
  --black: #030303;
  --white: #ffffff;
  --indaco: #b1b3c3;
  --purple: #6a15ff;

  --black-70: #030303b3;
  --black-50: #03030380;
  --black-30: #0303034d;

  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-mosaic: "Palette Mosaic", var(--font-sans);

  /* One fluid step: 20px at 1440, capped at 1920. Every gap is a multiple. */
  --gutter: clamp(20px, 1.3889vw, 24px);
  --edge: clamp(20px, 9.7222vw, 167px);
  --max: 1640px;

  /* Type ramp, transcribed from the reference's fluid scale. */
  --t-mono-sm: clamp(14px, 0.9722vw, 16.7px);
  --t-mono: clamp(16px, 1.1111vw, 19.1px);
  --t-body: clamp(18px, 1.25vw, 21.5px);
  --lh-body: clamp(24px, 1.6667vw, 28.7px);
  --t-lead: clamp(22px, 1.5278vw, 26.3px);
  --lh-lead: clamp(30px, 2.0833vw, 35.8px);
  --t-quote: clamp(30px, 2.0833vw, 35.8px);
  --lh-quote: clamp(36px, 2.5vw, 43px);
  --t-display: clamp(50px, 6.9444vw, 119px);
  --lh-display: clamp(44px, 6.25vw, 107px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.4s;
}

/* --------------------------------------------------------------- base --- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Lenis drives the scroll; without this the browser fights it on anchors. */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  margin: 0;
  background: var(--beige);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: -0.06em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

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

a {
  color: inherit;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

::selection {
  background: var(--purple);
  color: var(--white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

/* ------------------------------------------------------ shared pieces --- */

.label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 400;
}

.label--sm {
  font-size: var(--t-mono-sm);
}

/* Pill actions. Black on white panels, white where they sit over imagery. */
.btn {
  display: inline-block;
  padding: 0.5em 1.1em;
  border: 0;
  border-radius: 100px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn:hover {
  background: var(--purple);
  color: var(--white);
}

.btn--light {
  background: var(--white);
  color: var(--black);
}
.btn--light:hover {
  background: var(--purple);
  color: var(--white);
}

.btn--lg {
  font-size: var(--t-mono);
  padding: 0.6em 1.3em;
}

/* Image frame: holds the aspect box, clips the reveal, and gives the inner
   <img> room to travel for parallax without exposing an edge. */
.frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ar, 3 / 4);
  background: color-mix(in srgb, var(--indaco) 35%, transparent);
}
.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The inner image is oversized so a ±8% parallax never shows the frame. */
.frame--parallax > img {
  height: 118%;
  margin-top: -9%;
}

/* --------------------------------------------------------- top chrome --- */

.hdr {
  position: fixed;
  inset: clamp(20px, 1.3889vw, 24px) 0 auto;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-inline: var(--gutter);
  color: var(--white);
  mix-blend-mode: difference;
  pointer-events: none;
}
.hdr > * {
  pointer-events: auto;
}

.hdr__side {
  flex-basis: clamp(82px, 5.6944vw, 98px);
}
.hdr__side:last-child {
  text-align: right;
}

.hdr__link {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.hdr__link:hover {
  border-bottom-color: currentColor;
}

.hdr__logo {
  display: block;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  width: clamp(180px, 22.9vw, 440px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hdr__logo svg {
  width: 100%;
  height: auto;
}

/* Retracts once the reader is past the hero so the wordmark stops competing
   with the chapter titles. */
.hdr.is-tucked .hdr__logo {
  opacity: 0;
  transform: translateY(-40%);
  pointer-events: none;
}

/* Chapter rail — one segment per tale, filling as the reader moves. */
.rail {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: none;
}
.rail__track {
  position: relative;
  display: flex;
  height: 24px;
  background: var(--white);
  box-shadow: 0 -1px 12px #0000001f;
}
.rail__fill {
  position: absolute;
  inset: 0;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.rail__seg {
  flex: 1;
  position: relative;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
.rail__seg + .rail__seg::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--black-30);
  mix-blend-mode: difference;
}
.rail__name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--white);
  mix-blend-mode: difference;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .rail {
    display: block;
  }
}

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  height: 100svh;
  min-height: clamp(500px, 48.6vw, 836px);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__index {
  position: absolute;
  left: 50%;
  bottom: clamp(32px, 2.2222vw, 38px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  mix-blend-mode: difference;
}

.hero__pretitle {
  margin-bottom: clamp(24px, 1.6667vw, 29px);
}

/* Each entry masks its own line so the load-in reads as type rising. */
.hero__index li:not(.hero__pretitle) {
  overflow: hidden;
}

.hero__chapter {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  transition: opacity var(--dur) var(--ease-out);
}
.hero__chapter:hover {
  opacity: 0.55;
}

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: var(--gutter);
  width: 1px;
  height: 64px;
  background: #ffffff4d;
  overflow: hidden;
}
.hero__scroll span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
  transform-origin: top;
}

/* -------------------------------------------------------------- intro --- */

.intro {
  position: relative;
  padding: clamp(160px, 19.4vw, 280px) var(--gutter) clamp(120px, 11.1vw, 160px);
}

.intro__inner {
  position: relative;
  z-index: 1;
  max-width: clamp(460px, 31.94vw, 549px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  row-gap: clamp(18px, 1.25vw, 21.5px);
  text-align: center;
}

.intro__title {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: 900;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  padding-block: clamp(24px, 1.6667vw, 29px);
}

.intro__abstract {
  font-size: var(--t-quote);
  line-height: var(--lh-quote);
  text-align: left;
}

.intro__caption {
  text-align: left;
  color: var(--black-70);
}

/* Two verticals pinned to the outer margins, drifting against the copy. */
.intro__sides {
  position: absolute;
  inset: clamp(80px, 8vw, 140px) var(--gutter) auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.intro__sides .frame {
  width: clamp(96px, 15.3vw, 220px);
  --ar: 500 / 698;
}

/* ------------------------------------------------------------- chapter --- */

.tale {
  position: relative;
  /* Beige runway between chapters — the cover of the next tale rises into it. */
}
.tale::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 100vh;
  background: var(--beige);
}

/* Darkens the whole chapter as the next one takes over. One composited
   layer, so the hand-off costs an opacity tween rather than a repaint. */
.tale__scrim {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: var(--black);
  opacity: 0;
  pointer-events: none;
}

/* Cover: sticks for the length of the chapter while the white panels ride
   over it. Sticky rather than a ScrollTrigger pin because .tale itself is
   transformed during the chapter hand-off, which would break a fixed pin. */
.cover {
  position: sticky;
  top: 0;
  height: 100lvh;
  width: 100%;
  overflow: hidden;
}
.cover__img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  margin-top: -8%;
  will-change: transform;
}

/* Chapter name mirrored on both margins, riding up as the cover clears. */
.cover__name {
  position: absolute;
  bottom: 50%;
  z-index: 1;
  color: var(--white);
  mix-blend-mode: difference;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}
.cover__name--l {
  left: var(--edge);
}
.cover__name--r {
  right: var(--edge);
}

/* Shared shell for every white panel inside a chapter. */
.panel {
  position: relative;
  padding-inline: var(--gutter);
}
.panel__inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  background: var(--white);
}

/* ---------------------------------------------------------- head spread --- */

.head {
  overflow: hidden;
}
.head .panel__inner {
  padding-block: clamp(40px, 2.7778vw, 48px) clamp(96px, 11.1111vw, 191px);
}

.head__pre {
  display: flex;
  justify-content: space-between;
  padding-inline: var(--edge);
}

.head__title {
  font-family: var(--font-mosaic);
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  /* The signature: tracking tight enough that the mosaic glyphs interlock. */
  font-size: clamp(64px, 16.6vw, 240px);
  letter-spacing: -0.22em;
  /* -0.22em of tracking pulls the block left of centre; push it back. */
  padding-left: 0.22em;
}

.head__abstract {
  max-width: clamp(300px, 33.33vw, 573px);
  margin: clamp(12px, 1.1vw, 16px) auto 0;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  text-align: center;
}

.head__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--edge);
  margin-top: clamp(48px, 3.3333vw, 57px);
}

/* Ratios, not widths: with flex-basis 0 the column gaps come out of the
   container first and the 17 / 50 / 17 proportion survives any viewport. */
.head__main {
  flex: 50 1 0;
  --ar: 1400 / 1866;
}
.head__side {
  flex: 17 1 0;
  will-change: transform;
}
.head__side .frame {
  --ar: 400 / 530;
}

/* Two mono words set against the spread, drifting in opposite directions. */
.head__word {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--black-70);
  pointer-events: none;
}
.head__word--l {
  left: 4%;
  top: clamp(120px, 11.8vw, 203px);
}
.head__word--r {
  right: 4%;
  bottom: clamp(120px, 13.33vw, 229px);
}

/* Rings that trail the pointer across the spread. Desktop, fine pointer only. */
.trail {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: none;
  pointer-events: none;
  opacity: 0;
}
.trail img {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(120px, 16.6vw, 240px);
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0;
  will-change: transform;
}

/* The same rings, resting in a scattered arc, for touch. */
.head__cluster {
  position: absolute;
  left: -8%;
  bottom: 4%;
  width: 140px;
  height: 140px;
  z-index: 5;
  pointer-events: none;
}
.head__cluster img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* ------------------------------------------------------------ lookbook --- */

.look .panel__inner {
  display: flex;
  column-gap: clamp(48px, 11.6667vw, 200px);
  padding-bottom: clamp(96px, 11.6667vw, 200px);
  overflow: hidden;
}

.look__side {
  order: 2;
  flex: 40 1 0;
}
.look__main {
  flex: 60 1 0;
}
.look__main .frame,
.look__side .frame {
  --ar: 1150 / 1540;
}

.look__quote {
  max-width: 256px;
  margin: clamp(28px, 4.7vw, 68px) 0 0 20px;
}

/* ---------------------------------------------------- product overview --- */

.overview .panel__inner {
  color: var(--white);
  z-index: 2;
}

/* The name bar sticks to the top edge while the full-height shot slides
   beneath it — the one moment the product is bigger than the page. */
.overview__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  text-align: center;
  padding: clamp(28px, 4.6vw, 66px) var(--gutter) clamp(10px, 0.7vw, 12px);
  font-size: clamp(50px, 3.4722vw, 59.7px);
  line-height: clamp(44px, 3.0556vw, 52.6px);
  font-weight: 400;
  letter-spacing: -0.06em;
}

.overview__media {
  position: relative;
}
.overview__media .frame {
  --ar: 1920 / 2140;
  min-height: 100svh;
}

.overview__tags {
  position: absolute;
  left: 50%;
  bottom: clamp(80px, 5.5556vw, 96px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: clamp(12px, 1.3889vw, 24px);
  width: 100%;
}
.overview__tags li {
  background: var(--white);
  color: var(--black);
  padding: 0.35em 0.9em;
  width: fit-content;
  max-width: 90%;
  text-align: center;
}

.overview__request {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 3;
}

/* --------------------------------------------------------------- story --- */

.story .panel__inner {
  padding-bottom: clamp(64px, 6.6667vw, 115px);
}

.story__cols {
  display: flex;
  column-gap: clamp(48px, 18.3333vw, 315px);
  row-gap: clamp(64px, 6vw, 104px);
  padding: clamp(64px, 7.7778vw, 134px) var(--edge) clamp(72px, 8.3333vw, 143px);
}
.story__col {
  flex: 1 1 0;
}
.story__col p {
  margin-top: clamp(16px, 1.1111vw, 19px);
}

.song {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: clamp(16px, 1.3889vw, 20px);
  padding: 0 var(--gutter) clamp(48px, 5vw, 80px);
  text-align: center;
}

.song__title {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: 900;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

/* A cadence strip, not a player: two identical tick rows stacked, the darker
   one revealed left-to-right by the reader's progress through the passage.
   No audio sits behind this, so there is no transport control to fake. */
.song__strip {
  position: relative;
  width: 100%;
  max-width: clamp(280px, 27.7778vw, 478px);
  height: clamp(28px, 1.9444vw, 33px);
  margin-top: clamp(8px, 1vw, 16px);
}

.song__ticks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.song__ticks i {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--indaco);
  transform-origin: bottom;
  transform: scaleY(0.35);
}

.song__ticks--played {
  clip-path: inset(0 100% 0 0);
}
.song__ticks--played i {
  background: var(--black);
}

/* ------------------------------------------------------------- gallery --- */

.gallery .panel__inner {
  padding-block: clamp(48px, 4vw, 72px);
}

/* --len is the track's horizontal overflow, written by the gallery module.
   The stage borrows that much extra height, and the viewport sticks through
   it — so one pixel of vertical scroll buys one pixel of lateral travel. */
.gallery__stage {
  height: calc(100svh + var(--len, 0px));
}

.gallery__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.gallery__title {
  max-width: clamp(300px, 30.5556vw, 526px);
  margin: 0 auto clamp(32px, 2.7778vw, 48px);
  text-align: center;
}

/* Half a viewport of lead-in on each end, so the first and last pieces can
   still reach the centre — where the scrub scales them up. */
.gallery__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2222vw, 38px);
  padding-inline: calc(50vw - clamp(120px, 12vw, 190px));
  width: max-content;
  will-change: transform;
}

.gallery__item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 24vw, 380px);
  cursor: pointer;
  /* Off-centre items sit back; the scrub brings the centred one forward. */
  transform: scale(0.67);
  transform-origin: center;
}
.gallery__item .frame {
  --ar: 1610 / 2148;
}
.gallery__item h3 {
  margin-top: 12px;
  text-align: center;
}

.gallery__shop {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gallery__item:hover .gallery__shop,
.gallery__shop:focus-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------- outro --- */

/* The tall transparent lead-in lets the sticky cover surface one last time
   before the chapter closes on the maker. */
.outro {
  position: relative;
  padding: max(100svh, 500px) var(--gutter) 0;
}

.outro__inner {
  position: relative;
  display: flex;
  column-gap: 30px;
  max-width: var(--max);
  min-height: clamp(500px, 43.0556vw, 741px);
  margin-inline: auto;
  padding-block: clamp(32px, 2.2222vw, 38px);
  background: var(--beige);
  overflow: hidden;
}

.outro__head {
  flex-basis: 33.333%;
  padding-left: var(--gutter);
  padding-top: clamp(32px, 2.2222vw, 38px);
}
.outro__head p {
  font-size: var(--t-quote);
  line-height: var(--lh-quote);
}
.outro__head .btn {
  margin-top: clamp(20px, 1.3889vw, 24px);
}

.outro__media {
  display: flex;
  flex-direction: column;
  flex-basis: 33.333%;
  margin-left: auto;
}
.outro__media .frame {
  --ar: 934 / 1204;
}
.outro__caption {
  margin-top: 10px;
  text-align: center;
  color: var(--black-70);
}

.outro__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-basis: 33.333%;
  align-self: flex-end;
  row-gap: clamp(8px, 0.5556vw, 10px);
  margin-bottom: clamp(18px, 1.25vw, 21.5px);
  text-align: right;
}

/* -------------------------------------------------------------- footer --- */

.ftr {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100lvh;
  padding: clamp(120px, 8.3333vw, 143px) var(--gutter) clamp(12px, 0.8333vw, 14px);
  row-gap: clamp(64px, 8.3333vw, 143px);
  background: var(--black);
  color: var(--white);
}

.ftr__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: clamp(40px, 2.7778vw, 48px);
  text-align: center;
}
.ftr__statement {
  width: min(100%, 50ch);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: 900;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.ftr__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 24px;
}
.ftr__row > * {
  display: flex;
  gap: clamp(16px, 1.6vw, 28px);
  width: 33.333%;
}
.ftr__row > *:nth-child(2) {
  justify-content: center;
}
.ftr__row > *:last-child {
  justify-content: flex-end;
}

.ftr a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.ftr a:hover {
  border-bottom-color: currentColor;
}

.ftr__legal {
  margin-top: clamp(40px, 2.7778vw, 48px);
  color: #ffffff80;
}

/* ==========================================================================
   Animation start states. Applied only when the runtime confirms it will
   animate (js-anim on <html>), so a failed script leaves everything visible.
   ========================================================================== */

/* Text waits for SplitText to wrap it in line masks; revealing it before the
   split would show one unmasked frame of fully-formed copy. */
.js-anim [data-split] {
  opacity: 0;
}

.js-anim [data-anim="fade"] {
  opacity: 0;
}
.js-anim [data-anim="wipe"] {
  clip-path: inset(0 0 100% 0);
}
.js-anim [data-anim="wipe-x"] {
  clip-path: inset(0 100% 0 0);
}

/* SplitText writes these; declaring them keeps layout stable pre-split. */
.split-line {
  display: block;
}
.split-line-mask {
  display: block;
  overflow: clip;
}

/* ==========================================================================
   Responsive. The reference is desktop-first for the editorial spreads;
   below 1024 every multi-column block becomes a single column and the
   horizontal gallery becomes an ordinary swipeable strip.
   ========================================================================== */

@media (max-width: 1023px) {
  :root {
    --edge: var(--gutter);
  }

  .hdr__logo {
    width: min(52vw, 320px);
  }

  .intro {
    padding-top: clamp(220px, 60vw, 320px);
  }
  .intro__sides {
    position: static;
    margin-bottom: 32px;
    gap: 24px;
  }
  .intro__sides .frame {
    width: calc(50% - 12px);
  }

  .head__pre {
    padding-inline: 12px;
  }
  .head__abstract {
    max-width: 80%;
  }
  .head__content {
    flex-wrap: wrap;
    gap: 48px 20px;
  }
  /* Stacked: the centre plate takes its own row, the two details share the
     next one. flex-basis returns to a real length — a basis of 0 only makes
     sense while these are side by side. */
  .head__main {
    order: 1;
    flex: 0 0 100%;
  }
  .head__side {
    flex: 0 0 calc(50% - 10px);
  }
  .head__word--l {
    display: none;
  }
  .head__word--r {
    right: 14px;
    bottom: clamp(280px, 40vw, 312px);
  }

  /* Column flow: a flex-basis of 0 would collapse these to zero height. */
  .look .panel__inner {
    flex-direction: column;
  }
  .look__main {
    flex: 0 0 auto;
  }
  .look__side {
    order: 2;
    flex: 0 0 auto;
    width: 66.667%;
    margin: clamp(64px, 20vw, 152px) auto 0;
  }
  .look__quote {
    max-width: none;
    margin: 14px 0 0;
    text-align: center;
  }

  .story__cols {
    flex-direction: column;
  }
  .story__col {
    flex: 0 0 auto;
  }

  /* Gallery falls back to a native snap strip the reader drives directly —
     the stage collapses, nothing sticks, nothing is scrubbed. */
  .gallery__stage {
    height: auto;
  }
  .gallery__viewport {
    position: static;
    height: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }
  .gallery__list {
    transform: none !important;
    padding-inline: 12vw;
  }
  .gallery__item {
    transform: none !important;
    width: 76vw;
    scroll-snap-align: center;
  }
  .gallery__shop {
    opacity: 1;
    transform: none;
  }

  .outro__inner {
    flex-direction: column;
  }
  .outro__head {
    order: 1;
    flex-basis: auto;
  }
  .outro__media {
    order: 2;
    width: 50%;
    flex-basis: auto;
  }
  .outro__links {
    order: 3;
    flex: 0 0 auto;
    align-self: stretch;
    align-items: stretch;
    margin-top: 40px;
  }
  .outro__links .btn {
    text-align: center;
  }

  .ftr__row > * {
    width: 100%;
    justify-content: space-between !important;
  }
}

@media (max-width: 640px) {
  .head__side {
    width: calc(50% - 10px);
  }
  .overview__bar {
    font-size: clamp(32px, 9vw, 50px);
    line-height: 1.05;
  }
}

/* Pointer trail only where there is a pointer to trail. */
@media (min-width: 1024px) and (pointer: fine) {
  .js-anim .trail {
    display: block;
  }
  .js-anim .head__cluster {
    display: none;
  }
  .js-anim .head,
  .js-anim .look {
    cursor: none;
  }
}

/* ==========================================================================
   Reduced motion. No smooth scroll, no scrubbing, no wipes, no trail —
   content sits in its final state and the gallery scrolls natively.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim],
  .js-anim [data-split] {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
  .trail,
  .head__cluster {
    display: none !important;
  }
  .gallery__stage {
    height: auto;
  }
  .gallery__viewport {
    position: static;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .gallery__list {
    transform: none !important;
    padding-inline: var(--gutter);
    width: auto;
  }
  .gallery__item {
    transform: none !important;
    scroll-snap-align: center;
  }
  .js-anim .head,
  .js-anim .look {
    cursor: auto;
  }
  html {
    scroll-behavior: auto;
  }
}