/* =============================================================================
   ITALIAN MUFFINS — 2026
   Art direction: SCALE.
   A two-bite object (≈6cm) set against the world's biggest stages. The type is
   enormous and mechanically precise; the product is small, warm and exact. That
   contrast is the whole identity, so the system is built to hold two registers:

     DISPLAY   Archivo, expanded + heavy, tight tracking, uppercase.
               Reads as stadium livery / motorsport signage.
     TELEMETRY IBM Plex Mono, small, wide tracking. Indexes, coordinates,
               counters, timecodes — the language of a timing screen.

   Warm black is the dominant ground; cream is punctuation, not the page. Gold is
   demoted to hairlines only (at the volume the old draft used it, the site read
   as a wedding invitation). Signal red is a flag, never a fill.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  /* brand — locked */
  --red:        #E1112C;
  --red-deep:   #A80C21;
  /* Brand red is only AA-compliant at display sizes. Small labels get a
     tone-aware variant: lifted on dark grounds, deepened on light ones. */
  --accent-sm:  #FF5C6B;
  --green:      #00A24B;
  --gold:       #C9A227;
  --gold-soft:  #E3C766;
  --ink:        #0B0A09;
  --cream:      #FBF8F1;

  /* derived grounds */
  --ink-2:      #121010;
  --ink-3:      #1B1817;
  --paper:      #F2EDE2;

  /* tone-aware text — flipped per section by [data-tone] */
  --fg:         var(--cream);
  --fg-2:       rgba(251,248,241,.62);
  --fg-3:       rgba(251,248,241,.36);
  --rule:       rgba(251,248,241,.14);
  --rule-2:     rgba(251,248,241,.28);
  --ground:     var(--ink);

  /* type */
  --f-display:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono:     'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* layout */
  --max:        1560px;
  --gut:        clamp(18px, 4.2vw, 76px);
  --sec:        clamp(86px, 10vw, 190px);
  --rail:       34px;   /* telemetry rail height */
  --head:       140px;  /* header height — sized to carry the wordmark */

  --ease:       cubic-bezier(.16, 1, .3, 1);
  --ease-io:    cubic-bezier(.65, 0, .35, 1);
}
@media (max-width: 900px) { :root { --rail: 0px; --head: 96px; } }

[data-tone="light"] {
  --accent-sm: var(--red-deep);
  --fg:     var(--ink);
  --fg-2:   rgba(11,10,9,.66);
  --fg-3:   rgba(11,10,9,.40);
  --rule:   rgba(11,10,9,.13);
  --rule-2: rgba(11,10,9,.26);
  --ground: var(--cream);
}
[data-tone="paper"] {
  --accent-sm: var(--red-deep);
  --fg:     var(--ink);
  --fg-2:   rgba(11,10,9,.66);
  --fg-3:   rgba(11,10,9,.40);
  --rule:   rgba(11,10,9,.13);
  --rule-2: rgba(11,10,9,.26);
  --ground: var(--paper);
}

/* ----------------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html[data-navlock], html[data-navlock] body { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
/* <picture> is a source-selection wrapper, not a layout box. Letting it generate
   a box collapsed every `height:100%` image inside a sized frame (the picture was
   auto-height, so the img had nothing to resolve against). display:contents makes
   the <img> a direct layout child of whatever wraps it. Note that this fixes
   LAYOUT only — selector matching still walks the DOM, so every `> img` rule
   below also needs its `> picture > img` twin. */
picture { display: contents; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 1px;
}

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--red); color: #fff; padding: 12px 20px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  transition: transform 240ms var(--ease);
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------------ 3. type */
.d1, .d2, .d3, .d4 {
  font-family: var(--f-display);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
/* Tracking tightens as size grows — large expanded caps need negative sidebearing
   to stop reading as a wall of separate letters. */
.d1 {
  font-size: min(clamp(40px, 8.4vw, 132px), 14.5vh);
  font-variation-settings: 'wdth' 118, 'wght' 780;
  line-height: .84;
  letter-spacing: -.028em;
}
.d2 {
  font-size: clamp(30px, 5vw, 76px);
  font-variation-settings: 'wdth' 115, 'wght' 760;
  line-height: .88;
  letter-spacing: -.022em;
}
.d3 {
  font-size: clamp(26px, 3.4vw, 52px);
  font-variation-settings: 'wdth' 110, 'wght' 700;
  line-height: .96;
  letter-spacing: -.014em;
}
.d4 {
  font-size: clamp(19px, 1.9vw, 27px);
  font-variation-settings: 'wdth' 106, 'wght' 640;
  line-height: 1.1;
  letter-spacing: -.006em;
}
.d1 em, .d2 em, .d3 em {
  font-style: normal;
  color: var(--red);
}
/* outline word — used once per page, never twice */
.hollow {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  paint-order: stroke fill;
}
[data-tone] .hollow { -webkit-text-stroke-color: var(--fg-3); }

.lede {
  font-size: clamp(17px, 1.32vw, 21px);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  line-height: 1.58;
  color: var(--fg-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.body { font-size: clamp(15.5px, 1.05vw, 17px); line-height: 1.66; color: var(--fg-2); text-wrap: pretty; }
.body + .body { margin-top: 1.1em; }

/* telemetry layer */
.mono, .eyebrow, .idx {
  font-family: var(--f-mono);
  font-weight: 400;
  text-transform: uppercase;
  font-feature-settings: 'tnum' 1;
}
.eyebrow {
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .26em;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::before {
  content: ''; width: clamp(22px, 3vw, 52px); height: 1px;
  background: var(--red); flex: none;
}
.eyebrow--plain::before { display: none; }
/* On a photographic chapter the quiet eyebrow grey disappears into the image */
.ch__scene .eyebrow, .scrub__stage .eyebrow { color: rgba(251,248,241,.76); }
.eyebrow em { font-style: normal; color: var(--gold-soft); }
.mono { font-size: clamp(10.5px, .8vw, 12.5px); letter-spacing: .2em; color: var(--fg-3); }
.idx  { font-size: clamp(11px, .85vw, 13px); letter-spacing: .18em; color: var(--accent-sm); }

/* -------------------------------------------------------------- 4. layout */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sec  { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: calc(var(--sec) * .62); }
.bleed { width: 100%; position: relative; }
.tone { background: var(--ground); color: var(--fg); }

.grid2 {
  display: grid;
  gap: clamp(32px, 5vw, 92px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grid2--wide-l { grid-template-columns: 1.15fr .85fr; }
  .grid2--wide-r { grid-template-columns: .85fr 1.15fr; }
  .grid2--flip > :first-child { order: 2; }
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --------------------------------------------------------------- 5. media */
.frame { position: relative; overflow: hidden; background: var(--ink-2); }
.frame > img, .frame > video, .frame > picture > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ar-3-4  { aspect-ratio: 3 / 4; }
.ar-4-5  { aspect-ratio: 4 / 5; }
.ar-1-1  { aspect-ratio: 1 / 1; }
.ar-4-3  { aspect-ratio: 4 / 3; }
.ar-3-2  { aspect-ratio: 3 / 2; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-21-9 { aspect-ratio: 21 / 9; }

.zoom > img, .zoom > picture > img { transition: transform 1400ms var(--ease); }
.zoom:hover > img, .zoom:hover > picture > img { transform: scale(1.06); }

/* A parallax layer MUST be overscanned inside its clipping frame, or the frame
   edge shows through as a drifting band as the layer travels. */
.par { position: absolute; inset: -14% 0; height: 128%; will-change: transform; }
.par > img, .par > picture > img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------- 6. chrome: rail */
.rail {
  position: relative; z-index: 90;
  height: var(--rail);
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 40px);
  background: #000;
  border-bottom: 1px solid rgba(251,248,241,.08);
  font-family: var(--f-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251,248,241,.78);
  padding-inline: var(--gut);
  overflow: hidden; white-space: nowrap;
}
.rail b { font-weight: 400; color: var(--gold-soft); }
.rail a { color: #fff; }
.rail a:hover { color: #fff; }
.rail span.dot { color: var(--accent-sm); }
@media (max-width: 900px) { .rail { display: none; } }

/* ------------------------------------------------------ 7. chrome: header */
.hdr {
  position: sticky; top: 0; z-index: 80;
  height: var(--head);
  display: flex; align-items: center;
  padding-inline: var(--gut);
  background: rgba(11,10,9,0);
  border-bottom: 1px solid transparent;
  transition: background 520ms var(--ease), border-color 520ms var(--ease), height 520ms var(--ease);
  backdrop-filter: blur(0px);
}
.hdr[data-tight="1"] {
  background: rgba(11,10,9,.86);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom-color: var(--rule);
  height: calc(var(--head) - 40px);
}
.hdr__in {
  width: 100%; max-width: var(--max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hdr__logo { display: flex; align-items: center; flex: none; }
.hdr__logo img {
  height: clamp(66px, 9.4vw, 134px); width: auto;
  transition: height 520ms var(--ease);
}
.hdr[data-tight="1"] .hdr__logo img { height: clamp(50px, 6.8vw, 96px); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 38px); }
.nav a {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(251,248,241,.74);
  position: relative; padding-block: 6px;
  transition: color 380ms var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 460ms var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--gold-soft); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--gold-soft); opacity: .5; }
@media (max-width: 1000px) { .nav--main { display: none; } }
/* the desktop shrink is too aggressive for the smaller mobile header — the
   wordmark ended up with 3px of clearance */
@media (max-width: 900px) { .hdr[data-tight="1"] { height: calc(var(--head) - 22px); } }

/* ------------------------------------------------------------ 8. buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--f-mono); font-size: clamp(11px, .85vw, 13px);
  letter-spacing: .2em; text-transform: uppercase;
  padding: 17px 34px; border-radius: 999px;
  border: 1px solid transparent;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 460ms var(--ease), color 460ms var(--ease), border-color 460ms var(--ease), background-color 460ms var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); }
.btn--red { background: var(--red); color: #fff; }
/* the fill wipes rather than cross-fades — mechanical, matches the motion system */
.btn--red::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--red-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 560ms var(--ease);
}
.btn--red:hover::before { transform: scaleX(1); }
.btn--ghost { border-color: var(--rule-2); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--solid { background: var(--ink); color: var(--cream); }
.btn--sm { padding: 13px 24px; }

/* text link with drawn underline */
.ul { position: relative; display: inline-block; }
.ul::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 460ms var(--ease);
}
.ul:hover::after { transform: scaleX(1); }
/* Pointer target size: these inline links are 15-18px tall. A transparent
   pseudo-element grows the hit area to ~30px without moving anything. */
.ul, .alink, .rail a, .foot__links a { position: relative; }
.ul::before, .alink::before, .rail a::before, .foot__links a::before {
  content: ''; position: absolute; inset: -7px -5px;
}

/* arrow link */
.alink {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: var(--f-mono); font-size: clamp(11px, .85vw, 13px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg);
}
.alink i { font-style: normal; transition: transform 460ms var(--ease); color: var(--red); }
.alink:hover i { transform: translateX(7px); }

/* -------------------------------------------------------- 9. scroll rails */
.prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--red), var(--gold));
  z-index: 100; pointer-events: none;
}

/* --------------------------------------------------------- 10. mobile nav */
.burger {
  display: none; width: 48px; height: 48px; flex: none;
  align-items: center; justify-content: center; position: relative;
}
@media (max-width: 1000px) { .burger { display: inline-flex; } }
.burger span {
  position: absolute; left: 13px; width: 22px; height: 1.5px; background: var(--cream);
  transition: transform 400ms var(--ease), opacity 260ms var(--ease);
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }
.burger[data-open="1"] span:nth-child(1) { transform: rotate(45deg); }
.burger[data-open="1"] span:nth-child(2) { opacity: 0; }
.burger[data-open="1"] span:nth-child(3) { transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 79;
  background: rgba(11,10,9,.975);
  backdrop-filter: blur(24px);
  padding: calc(env(safe-area-inset-top) + var(--head) + 28px) var(--gut) calc(env(safe-area-inset-bottom) + 34px);
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease), visibility 0s 400ms;
}
.drawer[data-open="1"] { opacity: 1; visibility: visible; transform: none; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.drawer nav { display: flex; flex-direction: column; gap: clamp(4px, 1.4vw, 12px); }
.drawer nav a {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(34px, 9.5vw, 62px);
  font-variation-settings: 'wdth' 112, 'wght' 720;
  line-height: 1; letter-spacing: -.02em;
  opacity: 0; transform: translateY(18px);
  transition: opacity 540ms var(--ease), transform 540ms var(--ease), color 400ms var(--ease);
  padding-block: 4px;
}
.drawer[data-open="1"] nav a { opacity: 1; transform: none; }
.drawer[data-open="1"] nav a:nth-child(1) { transition-delay: 90ms; }
.drawer[data-open="1"] nav a:nth-child(2) { transition-delay: 150ms; }
.drawer[data-open="1"] nav a:nth-child(3) { transition-delay: 210ms; }
.drawer[data-open="1"] nav a:nth-child(4) { transition-delay: 270ms; }
.drawer nav a[aria-current="page"] { color: var(--gold-soft); }
.drawer__foot { border-top: 1px solid rgba(227,199,102,.24); padding-top: 24px; display: grid; gap: 18px; }
.drawer__foot .btn { width: 100%; }
.drawer__foot .meta { display: flex; flex-direction: column; gap: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.drawer__foot .meta a { color: var(--fg-2); }

/* ----------------------------------------------------- 11. reveal system */
/* Resting state is VISIBLE. The observer opts elements into the hidden state on
   load and releases them on intersect, so a JS failure can never blank the page. */
.rv > *, .rt > * { }
[data-anim="on"] .rv { opacity: 0; transform: translateY(28px); }
[data-anim="on"] .rv.in { opacity: 1; transform: none; }
.rv { transition: opacity 900ms var(--ease), transform 1000ms var(--ease); }

[data-anim="on"] .rt > * { opacity: 0; transform: translateY(24px); }
[data-anim="on"] .rt.in > * { opacity: 1; transform: none; }
.rt > * { transition: opacity 860ms var(--ease), transform 940ms var(--ease); }
.rt.in > *:nth-child(1) { transition-delay: 0ms; }
.rt.in > *:nth-child(2) { transition-delay: 80ms; }
.rt.in > *:nth-child(3) { transition-delay: 160ms; }
.rt.in > *:nth-child(4) { transition-delay: 240ms; }
.rt.in > *:nth-child(5) { transition-delay: 320ms; }
.rt.in > *:nth-child(6) { transition-delay: 400ms; }
.rt.in > *:nth-child(7) { transition-delay: 480ms; }

/* media reveal: the image settles out of a slow push-in */
[data-anim="on"] .rvm > img, [data-anim="on"] .rvm > picture > img, [data-anim="on"] .rvm > video { transform: scale(1.1); opacity: .001; }
[data-anim="on"] .rvm.in > img, [data-anim="on"] .rvm.in > picture > img, [data-anim="on"] .rvm.in > video { transform: none; opacity: 1; }
.rvm > img, .rvm > picture > img, .rvm > video { transition: transform 1600ms var(--ease), opacity 900ms ease; }

/* per-line hero cascade */
[data-anim="on"] .cascade > span { opacity: 0; transform: translateY(.34em) rotate(1.2deg); display: inline-block; }
[data-anim="on"] .cascade.in > span { opacity: 1; transform: none; }
.cascade > span { transition: opacity 1000ms var(--ease), transform 1100ms var(--ease); display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  [data-anim="on"] .rv, [data-anim="on"] .rt > *, [data-anim="on"] .cascade > span { opacity: 1 !important; transform: none !important; }
  [data-anim="on"] .rvm > img, [data-anim="on"] .rvm > picture > img, [data-anim="on"] .rvm > video { opacity: 1 !important; transform: none !important; }
  .zoom:hover > img, .zoom:hover > picture > img { transform: none; }
}

/* The first section of every page runs full-bleed BEHIND the rail and header,
   so the film owns the whole viewport and the chrome floats on top of it. */
.hero-pull { margin-top: calc(-1 * (var(--rail) + var(--head))); }

/* ------------------------------------------------- 12. MECHANIC: scrub hero */
.scrub { position: relative; }
.scrub__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0;
  background: var(--ink);
}
.scrub__pin > video, .scrub__pin > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* protect the type: a scrim weighted to the bottom third and the top rail */
.scrub__pin::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(11,10,9,.9) 0%, rgba(11,10,9,.44) 36%, rgba(11,10,9,0) 64%),
    linear-gradient(to bottom, rgba(11,10,9,.66) 0%, rgba(11,10,9,0) 28%),
    /* the headline sits bottom-left; weight that side so the film can keep its
       subject right-of-centre without fighting the type */
    /* the film's hero product sits centre-right, so this wash has to carry the
       headline across the left two-thirds without dimming the muffin itself */
    linear-gradient(to right, rgba(11,10,9,.82) 0%, rgba(11,10,9,.55) 34%, rgba(11,10,9,.18) 58%, rgba(11,10,9,0) 76%);
}
.scrub__flow { position: relative; z-index: 2; margin-top: -100svh; pointer-events: none; }
.scrub__flow a, .scrub__flow button { pointer-events: auto; }
.scrub__pad { height: 210vh; }
@media (max-width: 900px) { .scrub__pad { height: 150vh; } }
.scrub__stage {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--head) + 20px) var(--gut) clamp(34px, 6vh, 76px);
  max-width: var(--max); margin-inline: auto;
  width: 100%;
}
.scrub__stage > .stack { width: 100%; }
/* Video heroes carry a subject in frame, so the headline runs a size down from
   the photographic heroes — it has to clear the product, not sit on it. */
.scrub__stage .d1 { font-size: min(clamp(36px, 7vw, 104px), 13vh); }
.scrub__hint {
  position: absolute; right: var(--gut); bottom: clamp(34px, 6vh, 76px); z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(251,248,241,.6);
}
.scrub__hint .bar { width: 1px; height: 40px; background: rgba(251,248,241,.3); position: relative; overflow: hidden; }
.scrub__hint .bar::after {
  content: ''; position: absolute; inset: 0; background: var(--red);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .scrub__hint .bar::after { animation: none; transform: none; } }

/* film timecode readout */
.tc {
@media (max-width: 768px) { .tc { display: none !important; } }
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--f-mono); font-size: clamp(11px, .8vw, 13px);
  letter-spacing: .18em; color: var(--gold-soft);
}
.tc .n { font-variant-numeric: tabular-nums; }

/* ------------------------------------------- 13. MECHANIC: photo chapters */
.ch { position: relative; }
.ch__bg { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0; }
.ch__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
/* seam fades — no hard edge where a chapter meets the section above or below */
.ch__bg::before, .ch__bg::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.ch__bg::before { top: 0; height: 30vh; background: linear-gradient(to bottom, var(--ink), rgba(11,10,9,0)); }
.ch__bg::after  { bottom: 0; height: 42vh; background: linear-gradient(to top, var(--ink) 8%, rgba(11,10,9,0)); }
.ch__flow { position: relative; z-index: 2; margin-top: -100svh; }
.ch__scene { min-height: 100svh; display: flex; align-items: center; padding-block: 12vh; }
.hero-pull .ch__scene { padding-top: calc(var(--head) + var(--rail) + 6vh); }
/* Anchor copy into the seam fades — the middle of a chapter photo is its
   brightest, busiest area and type sat on it is hard to read. */
.ch__scene--low  { align-items: flex-end;   padding-bottom: clamp(56px, 11vh, 130px); }
.ch__scene--high { align-items: flex-start; padding-top: clamp(90px, 16vh, 190px); }

/* Where a chapter's copy sits over a bright photograph, the seam fades alone
   aren't enough. These wash the side the copy is on and leave the other side —
   which is where the product is — at full brightness. */
.ch--wash-l .ch__bg::after,
.ch--wash-r .ch__bg::after { inset: 0; height: auto; }
.ch--wash-l .ch__bg::after {
  background:
    linear-gradient(to top, var(--ink) 3%, rgba(11,10,9,0) 42%),
    linear-gradient(to right, rgba(11,10,9,.9) 0%, rgba(11,10,9,.66) 30%, rgba(11,10,9,.2) 58%, rgba(11,10,9,0) 76%);
}
.ch--wash-r .ch__bg::after {
  background:
    linear-gradient(to top, var(--ink) 3%, rgba(11,10,9,0) 42%),
    linear-gradient(to left, rgba(11,10,9,.9) 0%, rgba(11,10,9,.66) 30%, rgba(11,10,9,.2) 58%, rgba(11,10,9,0) 76%);
}

/* --------------------------------------- 14. MECHANIC: brand-hue wash band */
.wash { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.wash__bed { position: absolute; inset: -18%; z-index: 0; will-change: transform; }
.wash__bed img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(60px) saturate(1.45); opacity: .42; transform: scale(1.25);
}
.wash > *:not(.wash__bed) { position: relative; z-index: 2; }

/* ---------------------------------------- 15. MECHANIC: horizontal ride */
.ride { position: relative; }
.ride__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ride__track { display: flex; height: 100%; will-change: transform; }
.ride__panel { flex: 0 0 100vw; position: relative; height: 100%; overflow: hidden; }
.ride__panel > img, .ride__panel > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ride__panel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,10,9,.9) 2%, rgba(11,10,9,.15) 46%, rgba(11,10,9,.4));
}
.ride__plate {
  position: absolute; z-index: 3; left: var(--gut); bottom: clamp(72px, 12vh, 132px);
  max-width: min(560px, 82vw); display: grid; gap: 16px;
}
.ride__plate .num {
  font-family: var(--f-display); font-size: clamp(56px, 8vw, 128px);
  font-variation-settings: 'wdth' 118, 'wght' 800; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px rgba(251,248,241,.42);
}
.ride__stage::before, .ride__stage::after {
  content: ''; position: absolute; left: 0; right: 0; height: 16vh; z-index: 4; pointer-events: none;
}
.ride__stage::before { top: 0; background: linear-gradient(to bottom, var(--ink), transparent); }
.ride__stage::after { bottom: 0; background: linear-gradient(to top, var(--ink), transparent); }
.ride__meter {
  position: absolute; z-index: 5; left: var(--gut); right: var(--gut); bottom: clamp(34px, 5vh, 54px);
  height: 1px; background: rgba(251,248,241,.18);
}
.ride__meter i { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(0); }
.ride__count {
  position: absolute; z-index: 5; right: var(--gut); bottom: clamp(50px, 7vh, 78px);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; color: rgba(251,248,241,.7);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce), (max-width: 860px) {
  .ride { height: auto !important; }
  .ride__stage { position: relative; height: auto; }
  .ride__track { flex-direction: column; }
  .ride__panel { flex: none; width: 100%; height: 76svh; }
  .ride__stage::before, .ride__stage::after, .ride__meter, .ride__count { display: none; }
}

/* --------------------------------------------------------- 16. marquee */
.mq { overflow: hidden; border-block: 1px solid var(--rule); padding-block: clamp(14px, 1.6vw, 22px); background: var(--ink); }
.mq__track { display: flex; width: max-content; animation: mq 44s linear infinite; }
.mq__track > span {
  display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 46px);
  padding-right: clamp(20px, 3vw, 46px);
  font-family: var(--f-mono); font-size: clamp(11px, .95vw, 14px);
  letter-spacing: .28em; text-transform: uppercase; color: rgba(251,248,241,.55);
  white-space: nowrap;
}
.mq__track i { font-style: normal; color: var(--red); }
@keyframes mq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.mq:hover .mq__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mq__track { animation: none; } }

/* --------------------------------------------------- 17. the SCALE block */
/* The concept, stated literally: a huge number, a tiny object. */
.scale { text-align: center; display: grid; justify-items: center; gap: clamp(22px, 3vw, 40px); }
.scale__fig {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(96px, 24vw, 400px);
  font-variation-settings: 'wdth' 122, 'wght' 820;
  line-height: .76; letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: clamp(1px, .12vw, 2px) var(--fg-3);
  position: relative;
}
.scale__obj {
  width: clamp(215px, 29vw, 455px); height: auto; margin-inline: auto;
  /* overlap the numerals by roughly their lower quarter — any more and the
     packshot eats the "C", which is the one word the block exists to say */
  margin-top: clamp(-78px, -7vw, -38px);
  /* A genuine alpha cutout, so drop-shadow follows the silhouette instead of
     boxing it. Two layers: a wide soft one for lift, a tight one for contact. */
  filter:
    drop-shadow(0 34px 44px rgba(0, 0, 0, .72))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .55));
}
.scale__cap { max-width: 40ch; }

/* --------------------------------------------------------- 18. quote slabs */
.quotes { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 760px)  { .quotes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  background: var(--ink); padding: clamp(28px, 3.2vw, 46px);
  display: flex; flex-direction: column; gap: 18px;
  transition: background 560ms var(--ease);
}
.quote:hover { background: var(--ink-3); }
.quote__stars { color: var(--gold-soft); font-size: 13px; letter-spacing: .3em; }
.quote__t {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(17px, 1.5vw, 23px);
  font-variation-settings: 'wdth' 106, 'wght' 660;
  line-height: 1.12; letter-spacing: -.01em; color: var(--cream);
}
.quote__b { font-size: 15px; line-height: 1.62; color: var(--fg-2); flex: 1; }
.quote__f {
  /* grid, not space-between: a short attribution used to pull the event tag up
     onto the same line, so cards in one row disagreed about their baseline */
  display: grid; gap: 7px; justify-items: start;
  padding-top: 16px; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.quote__f .who { color: var(--fg-2); }
.quote__f .tag { color: var(--accent-sm); }

/* ------------------------------------------------------ 19. package tiers */
.tiers { display: grid; gap: 1px; background: var(--rule); }
@media (min-width: 700px)  { .tiers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
.tier {
  position: relative; display: block; overflow: hidden; background: var(--ink);
  min-height: clamp(440px, 46vw, 620px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(24px, 2.4vw, 36px);
  isolation: isolate;
}
.tier > img, .tier > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 1400ms var(--ease);
}
.tier::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(11,10,9,.94) 6%, rgba(11,10,9,.3) 54%, rgba(11,10,9,.55));
  transition: opacity 700ms var(--ease);
}
.tier:hover > img, .tier:hover > picture > img { transform: scale(1.07); }
.tier__letter {
  position: absolute; top: clamp(14px, 1.6vw, 26px); right: clamp(18px, 2vw, 32px);
  font-family: var(--f-display); font-size: clamp(84px, 9vw, 150px);
  font-variation-settings: 'wdth' 120, 'wght' 820; line-height: .74;
  color: transparent; -webkit-text-stroke: 1.5px rgba(251,248,241,.24);
  transition: -webkit-text-stroke-color 620ms var(--ease);
}
.tier:hover .tier__letter { -webkit-text-stroke-color: var(--gold-soft); }
.tier__body { display: grid; gap: 12px; }
.tier__name { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-3); }
.tier__price {
  font-family: var(--f-display); font-size: clamp(40px, 4.4vw, 74px);
  font-variation-settings: 'wdth' 114, 'wght' 760; line-height: .9; letter-spacing: -.025em;
}
.tier__qty { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.tier__sub { font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }

/* --------------------------------------------------------- 20. step cards */
.steps { display: grid; gap: clamp(18px, 2vw, 30px); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
/* align-content:start — the default `stretch` distributed the card's leftover
   height into the row gap, so a card with a one-line title dropped its caption
   ~12px below its neighbours. */
.step { display: grid; gap: 18px; align-content: start; }
.step__f { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-2); }
.step__f img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.step:hover .step__f img { transform: scale(1.06); }
.step__n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .24em; color: var(--accent-sm); }
.step__t { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(17px, 1.5vw, 22px); font-variation-settings: 'wdth' 108, 'wght' 680; line-height: 1.1; letter-spacing: -.008em; }
.step__d { font-size: 14.5px; line-height: 1.58; color: var(--fg-2); }

/* -------------------------------------------------------- 21. numbered rows */
.rows { display: grid; }
.row {
  display: grid; gap: clamp(10px, 2vw, 40px); align-items: start;
  grid-template-columns: auto 1fr;
  padding-block: clamp(26px, 3vw, 44px);
  border-top: 1px solid var(--rule);
}
.rows .row:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) { .row { grid-template-columns: 90px 1fr 1.15fr; } }
.row__n { font-family: var(--f-mono); font-size: clamp(12px, 1vw, 14px); letter-spacing: .18em; color: var(--accent-sm); padding-top: .35em; }
.row__t { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(19px, 2vw, 30px); font-variation-settings: 'wdth' 108, 'wght' 680; line-height: 1.05; letter-spacing: -.012em; }
.row__d { font-size: 15.5px; line-height: 1.62; color: var(--fg-2); }

/* ---------------------------------------------------------- 22. stat block */
.stats { display: grid; gap: clamp(24px, 3vw, 52px); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.stat { display: grid; gap: 10px; border-top: 1px solid var(--rule-2); padding-top: 20px; }
.stat__n {
  font-family: var(--f-display); font-size: clamp(52px, 7vw, 118px);
  font-variation-settings: 'wdth' 116, 'wght' 780; line-height: .82; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.stat__n sup { font-size: .42em; vertical-align: super; color: var(--red); }
.stat__l { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); }

/* ------------------------------------------------------------- 23. gallery */
.gal { display: grid; gap: clamp(12px, 1.4vw, 22px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 980px) { .gal { grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(80px, 9vw, 130px); } }
@media (min-width: 980px) {
  .gal > :nth-child(1) { grid-column: span 5; grid-row: span 4; }
  .gal > :nth-child(2) { grid-column: span 7; grid-row: span 3; }
  .gal > :nth-child(3) { grid-column: span 4; grid-row: span 3; }
  .gal > :nth-child(4) { grid-column: span 3; grid-row: span 4; }
  .gal > :nth-child(5) { grid-column: span 5; grid-row: span 3; }
}
.gal > * { position: relative; overflow: hidden; background: var(--ink-2); min-height: 180px; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1500ms var(--ease); }
.gal > *:hover img { transform: scale(1.06); }

/* ---------------------------------------------------------------- 24. form */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 9px; }
.field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; color: var(--fg);
  border: 0; border-bottom: 1px solid var(--rule-2);
  padding: 13px 2px; font-size: 16px; font-family: var(--f-display);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  transition: border-color 420ms var(--ease);
  border-radius: 0; appearance: none;
}
.field textarea { resize: vertical; min-height: 104px; }
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 13px) 22px, calc(100% - 8px) 22px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.field select option { background: var(--ink); color: var(--cream); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--red); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); }
.field[data-invalid="1"] input, .field[data-invalid="1"] select, .field[data-invalid="1"] textarea { border-bottom-color: var(--red); }
.field .err { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); display: none; }
.field[data-invalid="1"] .err { display: block; }
.form__note { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); line-height: 1.7; }
.form__status { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; min-height: 1.2em; }
.form__status[data-state="ok"]  { color: var(--green); }
.form__status[data-state="err"] { color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 640px) { .form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } }

/* --------------------------------------------------------- 25. contact list */
.clist { display: grid; }
.clist > * {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-block: clamp(18px, 2vw, 26px); border-top: 1px solid var(--rule);
}
.clist > *:last-child { border-bottom: 1px solid var(--rule); }
.clist .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-3); }
.clist .v { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(17px, 1.7vw, 26px); font-variation-settings: 'wdth' 108, 'wght' 660; letter-spacing: -.01em; }
.clist a.v { transition: color 380ms var(--ease); }
.clist a:hover .v, a.clist-row:hover .v { color: var(--red); }

/* --------------------------------------------------------------- 26. footer */
.foot { background: #000; padding-top: clamp(56px, 6vw, 92px); }
.foot__top { display: grid; gap: clamp(28px, 4vw, 60px); align-items: end; }
@media (min-width: 900px) { .foot__top { grid-template-columns: 1fr auto; } }
.foot__links { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 34px); font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,248,241,.62); }
.foot__links a:hover { color: #fff; }
.foot__mark {
  margin-top: clamp(40px, 5vw, 74px);
  font-family: var(--f-display); text-transform: uppercase; text-align: center;
  font-size: min(8.5vw, 148px);
  font-variation-settings: 'wdth' 120, 'wght' 800;
  line-height: .8; letter-spacing: -.032em;
  color: transparent; -webkit-text-stroke: 1px rgba(251,248,241,.26);
  white-space: nowrap; overflow: hidden;
  user-select: none;
}
.foot__bar {
  margin-top: clamp(28px, 3vw, 46px);
  border-top: 1px solid rgba(251,248,241,.12);
  padding-block: 22px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(251,248,241,.42);
}
.foot__bar b { font-weight: 400; color: var(--gold-soft); }

/* ------------------------------------------------------------ 27. utilities */
.stack   { display: grid; gap: clamp(18px, 2vw, 30px); align-content: start; justify-items: start; }
.stack--c { justify-items: center; text-align: center; }
.cluster { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.mt-s { margin-top: clamp(14px, 1.6vw, 22px); }
.mt-m { margin-top: clamp(26px, 3vw, 44px); }
.mt-l { margin-top: clamp(44px, 5vw, 80px); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.dim { color: var(--fg-2); }