/* ===========================================================================
   ORA SWISS — global tokens + reset
   Palette sampled directly from the source footage:
     deepest ground rgb(0,10,26) · field rgb(21,39,61) · dial rgb(27,50,80)
   Layout metrics measured off the reference screenshot (994px wide ≈ 1440
   viewport, scale factor 1.449).
   ======================================================================== */

:root {
  /* ground — near-black with the footage's blue cast so page chrome and
     frames meet without a seam */
  --ink-000: #04070e;
  --ink-050: #070b14;
  --ink-100: #0b1220;
  --ink-200: #101a2c;
  --ground: #000a1a; /* darkest pixel in the footage; canvas fallback */

  /* the footage's own blues */
  --field: #15273d;
  --dial: #1b3250;
  --lume: #6ea3e0; /* bezel highlight, used sparingly */

  /* type — warm ivory, not pure white (matches the reference headline) */
  --ivory: #f2efe9;
  --ivory-80: rgba(242, 239, 233, 0.8);
  --ivory-55: rgba(242, 239, 233, 0.55);
  --ivory-38: rgba(242, 239, 233, 0.38);
  --ivory-14: rgba(242, 239, 233, 0.14);
  --ivory-08: rgba(242, 239, 233, 0.08);

  --paper: #f4f2ee; /* the light "New Collection" panel */
  --paper-ink: #12151b;

  --serif: 'Bodoni Moda', 'Didot', 'Playfair Display', Georgia, serif;
  --sans: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* gutter: reference hamburger sits 84px in at 1440 → 5.85vw, clamped */
  --gutter: clamp(1.25rem, 5.85vw, 5.25rem);
  --maxw: 88rem;

  /* one knob for display type, one for UI text — never share a multiplier,
     shrinking 12px labels by 20% makes them unreadable */
  --scale: 1;
  --ui-scale: 1;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

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

* {
  margin: 0;
}

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

body {
  background: var(--ink-000);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* the page is a long scroll — never let a stray child widen it */
#root {
  overflow-x: clip;
  isolation: isolate;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}

:focus-visible {
  outline: 1px solid var(--lume);
  outline-offset: 4px;
}

/* --- shared primitives ---------------------------------------------------- */

/* small caps label: reference uses ~12px at 0.22em tracking throughout */
.eyebrow {
  font-family: var(--sans);
  font-size: calc(0.688rem * var(--ui-scale));
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ivory-55);
}

/* ghost CTA — measured from the reference: 445×80 at 1440, 12px/0.22em text */
.ghost-btn {
  --btn-line: var(--ivory-38);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-width: min(100%, calc(24rem * var(--ui-scale)));
  padding: calc(1.5rem * var(--ui-scale)) calc(2.25rem * var(--ui-scale));
  border: 1px solid var(--btn-line);
  font-size: calc(0.75rem * var(--ui-scale));
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory);
  overflow: hidden;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease);
}

/* fill wipes in from the left on hover */
.ghost-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ivory);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
  z-index: -1;
}

.ghost-btn > * {
  position: relative;
  z-index: 1;
}

.ghost-btn:hover {
  border-color: var(--ivory);
  color: var(--ink-000);
}

.ghost-btn:hover::before {
  transform: scaleX(1);
}

.ghost-btn__arrow {
  width: 2.5rem;
  flex: none;
}

/* solid counterpart to the ghost button - a light block against the footage,
   for the one action on screen that should read as primary */
.solid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(1.15rem * var(--ui-scale)) calc(1.6rem * var(--ui-scale));
  background: var(--ivory);
  color: var(--ink-000);
  font-size: calc(0.6875rem * var(--ui-scale));
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--ivory);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}

.solid-btn:hover {
  background: transparent;
  color: var(--ivory);
}

.solid-btn__arrow {
  width: 2.25rem;
  flex: none;
  transition: transform 0.45s var(--ease);
}

.solid-btn:hover .solid-btn__arrow {
  transform: translateX(4px);
}

/* hairline rule used between sections */
.hairline {
  height: 1px;
  background: var(--ivory-08);
  border: 0;
}

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

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
.preloader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  padding: clamp(2rem, 6vh, 4rem) var(--gutter);
  background: var(--ink-000);
  transition: transform 1.05s var(--ease), opacity 0.7s ease 0.25s;
}

.preloader.is-lifting {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.preloader__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
}

.preloader__mark {
  font-family: var(--serif);
  font-size: calc(clamp(1.1rem, 1.8vw, 1.6rem) * var(--ui-scale));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-indent: 0.2em;
}

.preloader__city {
  font-size: calc(0.5rem * var(--ui-scale));
  letter-spacing: 0.52em;
  text-transform: uppercase;
  text-indent: 0.52em;
  color: var(--ivory-38);
}

.preloader__meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: min(100%, 30rem);
}

.preloader__count {
  font-family: var(--serif);
  font-size: calc(clamp(3.5rem, 11vw, 8rem) * var(--scale));
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.preloader__track {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ivory-14);
}

.preloader__fill {
  display: block;
  height: 100%;
  background: var(--ivory);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.35s linear;
}

.preloader__note {
  align-self: end;
  text-align: center;
}
/* Reference: hamburger left at the page gutter, wordmark optically centred,
   search + bag right. Nav centreline sits at 7.4% of the viewport height. */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(1.1rem, 2.2vh, 1.9rem) var(--gutter);
  transition: background-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease),
    border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-lifted {
  background: rgba(4, 7, 14, 0.62);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--ivory-08);
}

.nav__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  justify-self: center;
}

/* measured: ~32px cap-height serif at 1440, generous tracking */
.nav__mark {
  font-family: var(--serif);
  font-size: calc(clamp(1.05rem, 1.55vw, 1.5rem) * var(--ui-scale));
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  /* tracking adds a trailing gap that breaks the optical centre */
  text-indent: 0.18em;
}

.nav__city {
  font-size: calc(0.5rem * var(--ui-scale));
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--ivory-38);
  line-height: 1;
  text-indent: 0.52em;
}

.nav__menu {
  justify-self: start;
}

.nav__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.35rem);
}

.nav__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem;
  color: var(--ivory);
  transition: opacity 0.35s var(--ease);
}

.nav__icon:hover {
  opacity: 0.6;
}

.nav__glyph {
  width: calc(1.375rem * var(--ui-scale));
  height: calc(1.375rem * var(--ui-scale));
}

.nav__count {
  position: absolute;
  top: 0.35rem;
  right: 0.3rem;
  font-size: 0.5rem;
  letter-spacing: 0;
  color: var(--ivory-55);
}

/* --- full-screen menu ----------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2.2vh, 1.9rem) var(--gutter)
    clamp(1.5rem, 4vh, 3rem);
  background: rgba(4, 7, 14, 0.97);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease),
    visibility 0.55s;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu__links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.25rem, 1.2vh, 0.9rem);
}

.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 0.35rem;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
    color 0.35s var(--ease);
  transition-delay: calc(var(--i) * 55ms);
  color: var(--ivory-55);
}

.menu.is-open .menu__links a {
  opacity: 1;
  transform: none;
}

.menu__links a:hover {
  color: var(--ivory);
}

.menu__no {
  font-size: calc(0.625rem * var(--ui-scale));
  letter-spacing: 0.2em;
  color: var(--ivory-38);
}

.menu__label {
  font-family: var(--serif);
  font-size: calc(clamp(1.75rem, 6vw, 3.75rem) * var(--scale));
  line-height: 1.12;
}

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ivory-08);
}

@media (max-width: 720px) {
  /* keep the wordmark from colliding with the icons on narrow screens */
  .nav {
    grid-template-columns: auto 1fr auto;
  }

  .nav__brand {
    align-items: center;
  }
}
/* ===========================================================================
   The pinned frame-sequence stage.

   Geometry taken off the reference screenshot (994px wide render standing in
   for a 1440 viewport, scale 1.449):
     headline cap height 52px -> 75px actual -> ~107px type -> 7.4vw
     two baselines 72px apart -> 104px -> line-height 0.97
     CTA box 307x55 -> 445x80
     slide counter baseline at 91.9% of the viewport height
   ======================================================================== */

.stage {
  position: relative;
  background: var(--ground);
}

.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* sampled darkest pixel of the footage: no white flash before frame one */
  background: var(--ground);
}

/* overall progress through the 10s clip */
.stage__progress {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--ivory-08);
  z-index: 6;
}

.stage__progress span {
  display: block;
  height: 100%;
  background: var(--ivory-55);
  transform: scaleX(0);
  transform-origin: left;
}

/* --- chapters ------------------------------------------------------------- */

.chapter {
  position: absolute;
  inset: 0;
  display: flex;
  padding-inline: var(--gutter);
  opacity: 0;
  will-change: opacity, transform;
  z-index: 2;
}

/* each chapter gets its own scrim, tuned to where the watch sits in that
   2.5s stretch of footage - a shared gradient would either wash out the
   product or leave the type unreadable */
.chapter::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.chapter__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.chapter__title {
  font-size: calc(clamp(2rem, 4.6vw, 4.25rem) * var(--scale));
  line-height: 1;
  letter-spacing: -0.005em;
  margin-block: 1.1rem 1.5rem;
}

.chapter__title span {
  display: block;
}

.chapter__body {
  max-width: 34ch;
  font-size: calc(clamp(0.9rem, 1.05vw, 1.0625rem) * var(--ui-scale));
  line-height: 1.75;
  color: var(--ivory-80);
}

/* ---------------------------------------------------------------- 01 hero -- */
/* Watch sits right of centre for the whole first 2.5s, so the whole column
   lives in the dark left third: eyebrow, display line, lede, two spec rows and
   the actions all share one left edge at the page gutter.

   The display line comes down from 7.4vw to 6.2vw to buy vertical room for the
   rows underneath - at 7.4vw the column overflowed a 900px viewport. */
.chapter--hero::before {
  background:
    linear-gradient(
      100deg,
      rgba(2, 6, 14, 0.95) 0%,
      rgba(2, 6, 14, 0.82) 34%,
      rgba(2, 6, 14, 0.3) 62%,
      rgba(2, 6, 14, 0) 84%
    ),
    linear-gradient(to top, rgba(2, 6, 14, 0.62) 0%, rgba(2, 6, 14, 0) 26%);
}

.chapter--hero {
  align-items: center;
}

.chapter--hero .chapter__inner {
  padding-top: 4vh;
  align-items: flex-start;
  max-width: min(var(--maxw), 100%);
}

/* --- eyebrow: rule, glyph, label ----------------------------------------- */

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: calc(0.625rem * var(--ui-scale));
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ivory-80);
}

.hero__eyebrow-rule {
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: 1px;
  background: var(--ivory-38);
}

.hero__eyebrow-glyph {
  width: calc(0.9375rem * var(--ui-scale));
  height: calc(0.9375rem * var(--ui-scale));
  color: var(--ivory-55);
}

/* --- display ------------------------------------------------------------- */

.hero__title {
  margin-top: clamp(1rem, 2.4vh, 1.75rem);
  font-size: calc(clamp(2.5rem, 6.2vw, 6.5rem) * var(--scale));
  line-height: 0.95;
  /* Bodoni is already tight at display size - a touch of negative tracking
     keeps the two lines reading as one block */
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-wrap: nowrap;
}

.hero__title span {
  display: block;
}

.hero__lede {
  margin-top: clamp(1.1rem, 2.4vh, 1.65rem);
  max-width: 38ch;
  font-size: calc(clamp(0.875rem, 1.02vw, 1rem) * var(--ui-scale));
  line-height: 1.75;
  color: var(--ivory-55);
}

/* --- spec rows ----------------------------------------------------------- */

.hero__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  width: min(100%, 34rem);
  margin: clamp(1.5rem, 3.4vh, 2.5rem) 0 0;
  padding: clamp(1.25rem, 2.6vh, 1.75rem) 0 0;
  border-top: 1px solid var(--ivory-14);
  list-style: none;
}

.hero__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.hero__feature-icon {
  width: calc(1.25rem * var(--ui-scale));
  height: calc(1.25rem * var(--ui-scale));
  flex: none;
  margin-top: 0.1rem;
  color: var(--ivory-80);
}

.hero__features h2 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(0.625rem * var(--ui-scale));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory);
}

.hero__features p {
  margin-top: 0.5rem;
  font-size: calc(0.75rem * var(--ui-scale));
  line-height: 1.65;
  color: var(--ivory-38);
}

/* --- actions ------------------------------------------------------------- */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(1.5rem, 3.4vh, 2.5rem);
}

.hero__cta {
  min-width: min(100%, calc(20rem * var(--ui-scale)));
}

.hero__film {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: calc(0.625rem * var(--ui-scale));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-55);
  transition: color 0.4s var(--ease);
}

.hero__film:hover {
  color: var(--ivory);
}

.hero__film-icon {
  width: calc(1.5rem * var(--ui-scale));
  height: calc(1.5rem * var(--ui-scale));
  transition: transform 0.4s var(--ease);
}

.hero__film:hover .hero__film-icon {
  transform: scale(1.1);
}

/* --- scroll cue, bottom-right -------------------------------------------- */

.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: 8.1vh;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: calc(0.625rem * var(--ui-scale));
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ivory-38);
}

.hero__cue i {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(to right, var(--ivory-38), transparent);
  position: relative;
  overflow: hidden;
}

.hero__cue i::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 40%;
  background: var(--ivory);
  animation: cue-slide 2.6s var(--ease-io) infinite;
}

@keyframes cue-slide {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translateX(250%);
    opacity: 0;
  }
}

/* The column is tall now. On short viewports shed the optional rows from the
   bottom up rather than letting it collide with the 01-04 rail. */
@media (max-height: 820px) and (min-width: 721px) {
  .hero__lede {
    display: none;
  }
}

@media (max-height: 700px) and (min-width: 721px) {
  .hero__features {
    display: none;
  }
}

/* --------------------------------------------------------- 02 construction -- */
/* screws are flying off around the centre here, so hold the type low-left */
.chapter--seal::before {
  background:
    linear-gradient(
      95deg,
      rgba(2, 6, 14, 0.9) 0%,
      rgba(2, 6, 14, 0.6) 28%,
      rgba(2, 6, 14, 0.1) 55%,
      rgba(2, 6, 14, 0) 75%
    ),
    linear-gradient(to top, rgba(2, 6, 14, 0.72) 0%, rgba(2, 6, 14, 0) 42%);
}

.chapter--seal {
  align-items: flex-end;
}

.chapter--seal .chapter__inner {
  align-items: flex-start;
  padding-bottom: 16vh;
}

.spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.spec-chips li {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ivory-14);
  border-radius: 999px;
  font-size: calc(0.625rem * var(--ui-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-80);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------- 03 architecture -- */
/* the exploded stack reads left-to-right across the frame, so the type moves
   to the right edge to sit in the darker corner */
.chapter--layers::before {
  background:
    linear-gradient(
      260deg,
      rgba(2, 6, 14, 0.92) 0%,
      rgba(2, 6, 14, 0.7) 26%,
      rgba(2, 6, 14, 0.12) 56%,
      rgba(2, 6, 14, 0) 78%
    ),
    linear-gradient(to top, rgba(2, 6, 14, 0.5) 0%, rgba(2, 6, 14, 0) 30%);
}

.chapter--layers {
  align-items: center;
  justify-content: flex-end;
}

.chapter--layers .chapter__inner {
  align-items: flex-end;
  text-align: right;
}

.chapter--layers .chapter__title span {
  display: block;
}

.layer-list {
  width: min(100%, 24rem);
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ivory-14);
}

.layer-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--ivory-08);
  text-align: right;
}

.layer-list__no {
  grid-row: span 2;
  font-family: var(--serif);
  font-size: calc(0.75rem * var(--ui-scale));
  color: var(--ivory-38);
  order: 2;
}

.layer-list__name {
  font-size: calc(0.9375rem * var(--ui-scale));
  letter-spacing: 0.04em;
  color: var(--ivory);
}

.layer-list__meta {
  grid-column: 1;
  font-size: calc(0.6875rem * var(--ui-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-38);
}

/* ------------------------------------------------------------ 04 calibre -- */
/* full exploded view fills the frame diagonally; only the bottom band stays
   dark enough to carry type, so this chapter becomes a footer-style band */
.chapter--calibre::before {
  background: linear-gradient(
    to top,
    rgba(2, 6, 14, 0.94) 0%,
    rgba(2, 6, 14, 0.82) 22%,
    rgba(2, 6, 14, 0.3) 46%,
    rgba(2, 6, 14, 0) 68%
  );
}

.chapter--calibre {
  align-items: flex-end;
}

.chapter--calibre .chapter__inner {
  padding-bottom: 15vh;
  gap: 2.25rem;
}

.calibre__head .chapter__title {
  margin-bottom: 0;
}

.calibre__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--ivory-08);
  border: 1px solid var(--ivory-08);
}

.calibre__stat {
  padding: 1.4rem 1.5rem 1.25rem;
  background: rgba(4, 7, 14, 0.45);
  backdrop-filter: blur(10px);
}

.calibre__stat dt {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--serif);
  font-size: calc(clamp(1.5rem, 2.6vw, 2.5rem) * var(--scale));
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
}

.calibre__stat dt em {
  font-style: normal;
  font-size: 0.45em;
  color: var(--ivory-55);
}

.calibre__stat dd {
  margin: 0.7rem 0 0;
  font-size: calc(0.625rem * var(--ui-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-55);
}

/* --- HUD ------------------------------------------------------------------ */

/* the reference's "01 —— 03" slide counter, promoted to drive all four
   chapters: baseline at 91.9% of the viewport, aligned to the page gutter */
.rail {
  position: absolute;
  left: var(--gutter);
  bottom: 8.1vh;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: calc(0.6875rem * var(--ui-scale));
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-55);
  z-index: 5;
}

.rail__index {
  color: var(--ivory);
}

.rail__track {
  position: relative;
  display: block;
  width: clamp(5rem, 16vw, 15rem);
  height: 1px;
  background: var(--ivory-14);
}

.rail__fill {
  position: absolute;
  inset: 0;
  background: var(--ivory);
  transform: scaleX(0);
  transform-origin: left;
}

/* timecode readout - a watch site should show you the movement of the clip */
.readout {
  position: absolute;
  right: var(--gutter);
  bottom: 8.1vh;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: calc(0.625rem * var(--ui-scale));
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-38);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

/* the hero owns the bottom-right corner with its scroll cue, so the readout
   only appears from chapter 02 onward */
.stage:not([data-chapter='1']) .readout {
  opacity: 1;
}

.stage:not([data-chapter='1']) .hero__cue {
  opacity: 0;
}

.hero__cue {
  transition: opacity 0.5s var(--ease);
}

.readout__time {
  color: var(--ivory-80);
}

.readout__sep {
  width: 1.5rem;
  height: 1px;
  background: var(--ivory-14);
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .calibre__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .chapter--layers {
    justify-content: flex-start;
  }

  .chapter--layers .chapter__inner {
    align-items: flex-start;
    text-align: left;
  }

  .chapter--layers .layer-list li {
    text-align: left;
    grid-template-columns: 1fr auto;
  }

  .chapter--layers .layer-list__no {
    order: 0;
    grid-column: 2;
  }

  .chapter--layers::before {
    background:
      linear-gradient(
        95deg,
        rgba(2, 6, 14, 0.92) 0%,
        rgba(2, 6, 14, 0.66) 34%,
        rgba(2, 6, 14, 0.1) 70%
      ),
      linear-gradient(to top, rgba(2, 6, 14, 0.7) 0%, rgba(2, 6, 14, 0) 40%);
  }
}

@media (max-width: 720px) {
  .hero__title {
    /* two long words cannot hold one line on a phone - let them wrap */
    text-wrap: wrap;
    font-size: calc(clamp(2.5rem, 13vw, 4.5rem) * var(--scale));
  }

  .chapter--hero .chapter__inner,
  .chapter--seal .chapter__inner,
  .chapter--calibre .chapter__inner {
    padding-bottom: 22vh;
  }

  .chapter--hero {
    align-items: flex-end;
  }

  .chapter--hero .chapter__inner {
    padding-top: 0;
  }

  .chapter--hero::before {
    background: linear-gradient(
      to top,
      rgba(2, 6, 14, 0.94) 0%,
      rgba(2, 6, 14, 0.78) 34%,
      rgba(2, 6, 14, 0.2) 64%,
      rgba(2, 6, 14, 0) 88%
    );
  }

  .hero__cta {
    min-width: 100%;
  }

  /* the phone column can carry the eyebrow, display and one action - the lede
     and the two spec rows would push the block past the fold */
  .hero__lede,
  .hero__features {
    display: none;
  }

  .hero__actions {
    width: 100%;
    gap: 1.25rem;
  }

  .hero__eyebrow {
    letter-spacing: 0.28em;
  }

  .hero__cue,
  .readout {
    display: none;
  }

  .chapter--layers {
    align-items: flex-end;
  }

  .chapter--layers .chapter__inner {
    padding-bottom: 20vh;
  }

  .layer-list li {
    padding: 0.75rem 0;
  }

  .calibre__stat {
    padding: 1rem 1.1rem;
  }

  .rail {
    bottom: 6vh;
  }
}

/* frame scrubbing is scroll-coupled, so it stays - it is the content, and the
   user drives it. The unprompted motion is what goes. */
@media (prefers-reduced-motion: reduce) {
  .hero__cue i::after {
    animation: none;
    opacity: 0.6;
  }

  .chapter {
    transform: none !important;
  }
}
/* Reference: "FEATURED TIMEPIECES" serif left, "VIEW ALL →" right, then a row
   of hairline-bordered product cards - plate, brand, model, reference, price,
   and an availability / arrow footer.

   Here the row is a pinned rail: vertical scroll through the section drives it
   right-to-left, with the watermark and the cards moving at different rates so
   it reads as depth rather than one sliding plane. */

.featured {
  position: relative;
  background: var(--ink-000);
}

/* left edge of the centred shell, so the rail starts flush with the title */
.featured__pin {
  --edge: max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter));
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  overflow: hidden;
  padding-block: clamp(4rem, 9vh, 6rem) clamp(2rem, 5vh, 3.5rem);
}

/* oversized watermark drifting behind the rail at a third of its speed */
.featured__wash {
  position: absolute;
  top: 50%;
  left: 4vw;
  translate: 0 -50%;
  font-family: var(--serif);
  font-size: 26vw;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(242, 239, 233, 0.022);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.featured__head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.featured__title {
  font-size: calc(clamp(1.5rem, 2.6vw, 2.35rem) * var(--scale));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}

.featured__all {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: calc(0.625rem * var(--ui-scale));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-55);
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}

.featured__all:hover {
  color: var(--ivory);
}

.featured__all-arrow {
  width: 2rem;
  transition: transform 0.4s var(--ease);
}

.featured__all:hover .featured__all-arrow {
  transform: translateX(4px);
}

/* --- the rail ------------------------------------------------------------- */

.featured__viewport {
  position: relative;
  overflow: hidden;
}

.featured__track {
  display: flex;
  gap: clamp(0.75rem, 1.4vw, 1.35rem);
  margin: 0;
  padding: 0.75rem var(--edge);
  list-style: none;
  width: max-content;
  will-change: transform;
}

.featured__progress {
  height: 1px;
  background: var(--ivory-08);
}

.featured__progress span {
  display: block;
  height: 100%;
  background: var(--ivory-55);
  transform: scaleX(0);
  transform-origin: left;
}

/* --- product card --------------------------------------------------------- */

.p-card {
  display: flex;
  flex-direction: column;
  flex: none;
  width: clamp(14.5rem, 21vw, 19.5rem);
  padding: clamp(0.85rem, 1.1vw, 1.15rem);
  border: 1px solid var(--ivory-08);
  border-radius: 10px;
  background: linear-gradient(
    to bottom,
    rgba(242, 239, 233, 0.035),
    rgba(242, 239, 233, 0.012)
  );
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease);
  will-change: transform;
}

.p-card:hover {
  border-color: var(--ivory-14);
}

.p-card__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  /* matches the corner pixel of the supplied plates (rgb 14,16,20), so any
     sub-pixel gap at the edges is invisible */
  background: #0e1014;
}

/* the art is already 4:5 with its own ground baked in, so it fills the plate
   edge to edge - no padding, nothing to letterbox */
.p-card__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.p-card:hover .p-card__plate img {
  transform: scale(1.06);
}

.p-card__index {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  font-family: var(--serif);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--ivory-38);
  /* sits over the artwork now rather than a flat plate */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.p-card__body {
  padding-top: clamp(1rem, 1.6vh, 1.4rem);
}

/* measured: 11px caps at ~0.14em tracking */
.p-card__brand {
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(0.6875rem * var(--ui-scale));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
}

.p-card__model {
  margin-top: 0.55rem;
  font-size: calc(0.8125rem * var(--ui-scale));
  color: var(--ivory-55);
}

.p-card__ref {
  margin-top: 0.15rem;
  font-size: calc(0.75rem * var(--ui-scale));
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-38);
  overflow-wrap: anywhere;
}

.p-card__price {
  margin-top: clamp(0.85rem, 1.4vh, 1.25rem);
  font-family: var(--serif);
  font-size: calc(1.125rem * var(--ui-scale));
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
}

.p-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: clamp(1rem, 1.8vh, 1.5rem);
}

.p-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: calc(0.5625rem * var(--ui-scale));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-55);
}

.p-card__status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.p-card__status.is-ok i {
  background: #5fd39a;
  box-shadow: 0 0 8px rgba(95, 211, 154, 0.6);
}

.p-card__status.is-warn i {
  background: #d8a24a;
  box-shadow: 0 0 8px rgba(216, 162, 74, 0.5);
}

.p-card__status.is-mute i {
  background: var(--ivory-38);
}

.p-card__go {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
  border: 1px solid var(--ivory-14);
  border-radius: 50%;
  color: var(--ivory-55);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease),
    background-color 0.4s var(--ease);
}

.p-card__go-arrow {
  width: 1.1rem;
}

.p-card:hover .p-card__go {
  border-color: var(--ivory);
  background: var(--ivory);
  color: var(--ink-000);
}

/* --- static fallback ------------------------------------------------------ */
/* Narrow screens and reduced-motion get a plain swipeable row: the pin is
   released, the section collapses to its natural height, and the rail scrolls
   under the user's own finger. */
@media (max-width: 900px) {
  .featured {
    height: auto !important;
  }

  .featured__pin {
    position: static;
    height: auto;
    padding-block: clamp(3.5rem, 8vh, 5rem) clamp(2rem, 5vh, 3rem);
  }

  .featured__wash {
    display: none;
  }

  .featured__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* let the rail bleed past the gutter the way a real carousel does */
    margin-inline: calc(var(--edge) * -1);
    padding-inline: 0;
  }

  .featured__viewport::-webkit-scrollbar {
    display: none;
  }

  .featured__track {
    transform: none !important;
  }

  .p-card {
    width: min(74vw, 17rem);
    scroll-snap-align: center;
  }

  .featured__progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured[data-static] {
    height: auto !important;
  }

  .featured[data-static] .featured__pin {
    position: static;
    height: auto;
  }

  .featured[data-static] .featured__viewport {
    overflow-x: auto;
  }

  .featured[data-static] .featured__track,
  .featured[data-static] .featured__wash,
  .featured[data-static] .p-card {
    transform: none !important;
  }
}
.marquee {
  overflow: hidden;
  background: var(--ink-000);
  border-bottom: 1px solid var(--ivory-08);
  padding-block: 1.35rem;
  /* fade the ends so the loop never reads as a hard cut */
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-run 48s linear infinite;
}

.marquee__run {
  display: flex;
  flex: none;
}

.marquee__word {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
  font-size: calc(0.625rem * var(--ui-scale));
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ivory-38);
}

.marquee__word i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ivory-14);
}

@keyframes marquee-run {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}
/* Reference: section title in serif at the left edge with a light sans
   sub-line, then a single row of six portrait cards with hairline borders. */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.maisons {
  position: relative;
  padding-block: clamp(4.5rem, 11vh, 9rem) clamp(4rem, 9vh, 7.5rem);
  background: var(--ink-000);
}

.maisons__head {
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.maisons__title {
  font-size: calc(clamp(1.5rem, 2.6vw, 2.35rem) * var(--scale));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}

.maisons__sub {
  margin-top: 0.85rem;
  font-size: calc(0.875rem * var(--ui-scale));
  letter-spacing: 0.06em;
  color: var(--ivory-55);
}

.maisons__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 1vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--ivory-08);
  background: var(--ink-050);
  display: grid;
  place-items: center;
  transition: border-color 0.5s var(--ease);
}

.m-card:hover {
  border-color: var(--ivory-14);
}

/* --- photographic card ---------------------------------------------------- */

.m-card--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter 0.8s var(--ease);
}

.m-card--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(4, 7, 14, 0.8) 0%,
    rgba(4, 7, 14, 0) 55%
  );
}

.m-card--image:hover img {
  transform: scale(1.08);
}

.m-card__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem;
  text-align: center;
  font-size: calc(0.5625rem * var(--ui-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-80);
}

/* --- wordmark card -------------------------------------------------------- */

/* the maison's own piece, held well back so the name still reads first */
.m-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: grayscale(0.45) contrast(1.05);
  transform: scale(1.04);
  transition: opacity 0.8s var(--ease), transform 1.2s var(--ease),
    filter 0.8s var(--ease);
}

/* scrim over the photo - without it the wordmark sits on bracelet highlights */
.m-card--mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(4, 7, 14, 0.62) 0%,
    rgba(4, 7, 14, 0.5) 45%,
    rgba(4, 7, 14, 0.88) 100%
  );
}

.m-card--mark:hover .m-card__bg {
  opacity: 0.52;
  transform: scale(1.09);
  filter: grayscale(0) contrast(1);
}

.m-card__mark {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}

.m-card__mark em {
  font-family: var(--serif);
  font-style: normal;
  /* "Delacourt Genève" has to fall to two lines at card width, as the longest
     mark does in the reference - so this is sized to wrap cleanly, not to fit
     on one */
  font-size: calc(clamp(0.9rem, 1.35vw, 1.25rem) * var(--ui-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-indent: 0.14em;
  line-height: 1.25;
  text-wrap: balance;
}

.m-card__mark small {
  font-size: calc(0.5rem * var(--ui-scale));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-indent: 0.3em;
  color: var(--ivory-38);
}

.m-card__hover {
  position: absolute;
  z-index: 2;
  bottom: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: calc(0.5625rem * var(--ui-scale));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-55);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.m-card__arrow {
  width: 1.75rem;
}

.m-card--mark:hover .m-card__mark {
  transform: translateY(-0.6rem);
}

.m-card--mark:hover .m-card__hover {
  opacity: 1;
  transform: none;
}

.maisons__cta {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

/* --- reveal --------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .maisons__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .maisons__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .maisons__cta {
    min-width: 100%;
  }
}
/* Reference: four centred columns between hairlines - thin-line icon, a caps
   label, then two short lines of muted copy. Generous vertical air. */

.assurances {
  background: var(--ink-000);
  border-block: 1px solid var(--ivory-08);
}

.assurances__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding-block: clamp(3rem, 8vh, 5.5rem);
  list-style: none;
}

.assurances__row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.assurances__icon {
  width: calc(2rem * var(--ui-scale));
  height: calc(2rem * var(--ui-scale));
  color: var(--ivory-80);
  margin-bottom: 1.35rem;
}

.assurances__label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(0.6875rem * var(--ui-scale));
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory);
}

.assurances__copy {
  margin-top: 0.85rem;
  font-size: calc(0.8125rem * var(--ui-scale));
  line-height: 1.7;
  color: var(--ivory-55);
}

@media (max-width: 720px) {
  .assurances__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.25rem;
  }
}
/* The one light section. Everything inside flips to paper ink - the dark
   tokens would be invisible here, so this block overrides them locally. */

.collection {
  position: relative;
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  align-items: stretch;
  background: var(--paper);
  color: var(--paper-ink);
  /* the reference curves the paper into the dark section above it */
  border-start-start-radius: clamp(2rem, 10vw, 11rem);
  overflow: hidden;
}

.collection__media {
  position: relative;
  min-height: clamp(24rem, 62vh, 44rem);
  background: var(--ground);
}

.collection__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the paper panel bulges left into the photo as a half-ellipse, which is what
   makes the reference's edge read as a curve rather than a crop */
.collection__media::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  width: 24%;
  background: var(--paper);
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

.collection__body {
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(3rem, 8vh, 6rem)
    clamp(1rem, 2vw, 2rem);
}

.collection__inner {
  width: min(100%, 36rem);
}

.collection__title {
  font-size: calc(clamp(1.75rem, 3vw, 2.75rem) * var(--scale));
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
}

.collection__note {
  margin: 1.75rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid rgba(18, 21, 27, 0.35);
}

.collection__note p {
  font-family: var(--serif);
  font-size: calc(clamp(0.9375rem, 1.1vw, 1.0625rem) * var(--ui-scale));
  line-height: 1.75;
  color: rgba(18, 21, 27, 0.78);
}

.collection__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2rem, 4vh, 2.75rem);
}

.collection__cards figure {
  margin: 0;
}

.collection__cards img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ground);
  transition: transform 0.9s var(--ease);
}

.collection__cards figure:hover img {
  transform: translateY(-4px);
}

.collection__cards figcaption {
  margin-top: 0.75rem;
  font-size: calc(0.5625rem * var(--ui-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(18, 21, 27, 0.55);
}

/* the shared ghost button is built for the dark ground - re-ink it for paper */
.collection__cta {
  --btn-line: rgba(18, 21, 27, 0.3);
  margin-top: clamp(2rem, 4vh, 2.75rem);
  color: var(--paper-ink);
}

.collection__cta::before {
  background: var(--paper-ink);
}

.collection__cta:hover {
  border-color: var(--paper-ink);
  color: var(--paper);
}

@media (max-width: 900px) {
  .collection {
    grid-template-columns: 1fr;
    border-start-start-radius: clamp(1.5rem, 8vw, 4rem);
    border-start-end-radius: clamp(1.5rem, 8vw, 4rem);
  }

  .collection__media {
    min-height: clamp(18rem, 44vh, 26rem);
  }

  /* the curve moves to the bottom edge once the columns stack */
  .collection__media::after {
    top: auto;
    left: -1px;
    right: -1px;
    bottom: -1px;
    width: auto;
    height: 18%;
    border-radius: 0 0 100% 100% / 0 0 50% 50%;
  }

  .collection__body {
    padding: clamp(2rem, 5vh, 3rem) var(--gutter) clamp(3rem, 7vh, 4.5rem);
  }

  .collection__inner {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .collection__cta {
    min-width: 100%;
  }
}
/* ===========================================================================
   The atelier stage - second frame sequence, two chapters.

   This clip is warm (sampled ground rgb 4,4,4, brass highlight rgb 74,62,49)
   where the hero clip is blue, so the scrims and the ivory are re-mixed warm
   here rather than reusing the hero stage's cool ones.

   Reference band (886x378): type starts at 4.7% from the left, four short
   lines at ~1.17 line-height, and a ghost button noticeably narrower than the
   hero's.
   ======================================================================== */

.atelier {
  position: relative;
  /* warm near-black, sampled from the clip's darkest corner */
  --warm: #070604;
  --warm-ivory: #f3ece2;
  --warm-ivory-70: rgba(243, 236, 226, 0.7);
  --warm-ivory-40: rgba(243, 236, 226, 0.4);
  --warm-ivory-14: rgba(243, 236, 226, 0.14);
  background: var(--warm);
}

.atelier__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.atelier__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--warm);
}

.a-chapter {
  position: absolute;
  inset: 0;
  display: flex;
  padding-inline: var(--gutter);
  opacity: 0;
  will-change: opacity, transform;
  color: var(--warm-ivory);
  z-index: 2;
}

.a-chapter::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.a-chapter__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.atelier__title {
  font-family: var(--serif);
  font-weight: 400;
  /* deliberately well under the hero's 7.4vw - this is a mid-page statement,
     and the reference sets it small and tight */
  font-size: calc(clamp(1.6rem, 3.9vw, 3.6rem) * var(--scale));
  line-height: 1.14;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: nowrap;
}

.atelier__title span {
  display: block;
}

.atelier__title--sm {
  font-size: calc(clamp(1.35rem, 3vw, 2.6rem) * var(--scale));
  margin-block: 1rem 1.75rem;
}

/* the shared ghost button is hero-sized - the reference's is much narrower */
.atelier__cta {
  min-width: min(100%, calc(19rem * var(--ui-scale)));
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-block: calc(1.15rem * var(--ui-scale));
  --btn-line: var(--warm-ivory-40);
  color: var(--warm-ivory);
}

.atelier__cta::before {
  background: var(--warm-ivory);
}

.atelier__cta:hover {
  border-color: var(--warm-ivory);
  color: var(--warm);
}

/* ------------------------------------------------------------ 01 creed ---- */
/* movement centre-frame, hand entering top-right: the left third is the only
   reliably dark area, so the scrim is a warm horizontal wipe */
.a-chapter--creed::before {
  background:
    linear-gradient(
      98deg,
      rgba(8, 6, 4, 0.94) 0%,
      rgba(8, 6, 4, 0.8) 26%,
      rgba(8, 6, 4, 0.34) 52%,
      rgba(8, 6, 4, 0) 76%
    ),
    linear-gradient(to top, rgba(8, 6, 4, 0.5) 0%, rgba(8, 6, 4, 0) 24%);
}

.a-chapter--creed {
  align-items: center;
}

/* ------------------------------------------------------------ 02 bench ---- */
/* dropped to the bottom-left over the out-of-focus bench, which stays dark for
   the whole clip */
.a-chapter--bench::before {
  background:
    linear-gradient(
      98deg,
      rgba(8, 6, 4, 0.9) 0%,
      rgba(8, 6, 4, 0.66) 30%,
      rgba(8, 6, 4, 0.16) 60%,
      rgba(8, 6, 4, 0) 82%
    ),
    linear-gradient(to top, rgba(8, 6, 4, 0.86) 0%, rgba(8, 6, 4, 0) 46%);
}

.a-chapter--bench {
  align-items: flex-end;
}

.a-chapter--bench .a-chapter__inner {
  padding-bottom: 13vh;
}

.bench-list {
  width: min(100%, 27rem);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--warm-ivory-14);
}

.bench-list li {
  display: flex;
  align-items: baseline;
  gap: 1.15rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(243, 236, 226, 0.08);
}

.bench-list__no {
  font-family: var(--serif);
  font-size: calc(0.75rem * var(--ui-scale));
  color: var(--warm-ivory-40);
}

.bench-list__text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.bench-list__text strong {
  font-weight: 400;
  font-size: calc(0.9375rem * var(--ui-scale));
  letter-spacing: 0.04em;
  color: var(--warm-ivory);
}

.bench-list__text small {
  font-size: calc(0.6875rem * var(--ui-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-ivory-40);
}

/* --- progress ------------------------------------------------------------- */

.atelier__progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: rgba(243, 236, 226, 0.1);
  z-index: 5;
}

.atelier__progress span {
  display: block;
  height: 100%;
  background: var(--warm-ivory-70);
  transform: scaleX(0);
  transform-origin: left;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 860px) {
  .atelier__title {
    /* four short lines fit a phone, but not at a nowrap 3.9vw */
    text-wrap: wrap;
    font-size: calc(clamp(1.6rem, 7.4vw, 2.75rem) * var(--scale));
  }

  .a-chapter--creed {
    align-items: flex-end;
  }

  .a-chapter--creed .a-chapter__inner {
    padding-bottom: 16vh;
  }

  .a-chapter--creed::before,
  .a-chapter--bench::before {
    background: linear-gradient(
      to top,
      rgba(8, 6, 4, 0.94) 0%,
      rgba(8, 6, 4, 0.78) 38%,
      rgba(8, 6, 4, 0.22) 68%,
      rgba(8, 6, 4, 0) 90%
    );
  }

  .atelier__cta {
    min-width: 100%;
  }

  .a-chapter--bench .a-chapter__inner {
    padding-bottom: 10vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a-chapter {
    transform: none !important;
  }
}
.footer {
  background: var(--ink-000);
  padding-block: clamp(4rem, 10vh, 7rem) clamp(2rem, 4vh, 3rem);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--ivory-08);
}

.footer__mark {
  display: block;
  font-family: var(--serif);
  font-size: calc(clamp(1.25rem, 2vw, 1.75rem) * var(--ui-scale));
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer__city {
  display: block;
  margin-top: 0.4rem;
  font-size: calc(0.5rem * var(--ui-scale));
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--ivory-38);
}

.footer__blurb {
  margin-top: 1.5rem;
  max-width: 30ch;
  font-size: calc(0.8125rem * var(--ui-scale));
  line-height: 1.8;
  color: var(--ivory-55);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.footer__cols ul {
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.footer__cols a {
  font-size: calc(0.8125rem * var(--ui-scale));
  color: var(--ivory-80);
  transition: color 0.35s var(--ease);
}

.footer__cols a:hover {
  color: var(--ivory);
}

/* --- newsletter ----------------------------------------------------------- */

.footer__signup {
  display: grid;
  gap: 1rem;
  max-width: 28rem;
  padding-block: clamp(2rem, 5vh, 3rem);
}

.footer__field {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--ivory-14);
  transition: border-color 0.4s var(--ease);
}

.footer__field:focus-within {
  border-bottom-color: var(--ivory);
}

.footer__field input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0;
  border: 0;
  background: none;
  color: var(--ivory);
  font: inherit;
  font-size: calc(0.875rem * var(--ui-scale));
}

.footer__field input::placeholder {
  color: var(--ivory-38);
}

.footer__field input:focus {
  outline: none;
}

.footer__field button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ivory-55);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}

.footer__field button:hover {
  color: var(--ivory);
  transform: translateX(3px);
}

.footer__arrow {
  width: 1.75rem;
}

/* --- legal ---------------------------------------------------------------- */

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(1.5rem, 3vh, 2rem);
  border-top: 1px solid var(--ivory-08);
  font-size: calc(0.6875rem * var(--ui-scale));
  letter-spacing: 0.08em;
  color: var(--ivory-38);
}

.footer__legal ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__legal a:hover {
  color: var(--ivory);
}

@media (max-width: 860px) {
  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }
}