/* Londons.ai — The Flagship. Every colour, font and spacing value comes from
   the tokens in styles.css. This file only composes them. */

:root {
  --gutter: clamp(var(--space-4), 4vw, calc(var(--space-8) * 2));
  --section-pad: clamp(calc(var(--space-8) * 2), 10vh, calc(var(--space-8) * 4));
  --ink-40: color-mix(in srgb, var(--color-text) 40%, transparent);
  --ground-40: color-mix(in srgb, var(--color-bg) 40%, transparent);
  --ground-70: color-mix(in srgb, var(--color-bg) 70%, transparent);
}

html { scroll-behavior: auto; }
html, body { background: var(--color-text); } /* film ground behind everything */
body { overflow-x: hidden; }

::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ————————————————————————————— type ————————————————————————————— */

.display-1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(44px, 7.4vw, 118px);
  line-height: 0.98; letter-spacing: -0.02em; margin: 0;
}
.display-2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 4.6vw, 68px);
  line-height: 1.04; letter-spacing: -0.02em; margin: 0;
}
.eyebrow {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 var(--space-4);
}

/* ————————————————————————————— nav ————————————————————————————— */

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--gutter);
  color: var(--color-bg);
  transition: background 0.35s, color 0.35s, border-color 0.35s;
  border-bottom: 2px solid transparent;
}
.site-nav.on-ground {
  background: var(--color-bg); color: var(--color-text);
  border-bottom-color: var(--color-divider);
}
.brand-lockup {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-right: auto; text-decoration: none; color: inherit;
}
.brand-lockup .mark { height: 22px; width: auto; display: block; color: inherit; }
.brand-lockup .word {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; letter-spacing: -0.015em; line-height: 1;
}
.brand-lockup .word .ai { color: var(--color-accent); }
.site-nav a.nav-link {
  color: inherit; text-decoration: none; font-size: 14px;
  font-family: var(--font-heading); font-weight: 600;
}
.site-nav a.nav-link:hover { color: var(--color-accent); }

/* ————————————————————— the descent (desktop scrub) ————————————————————— */

.film-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block; background: var(--color-text);
}
.film-canvas.parked { visibility: hidden; }

#descent { position: relative; z-index: 1; }
/* 990vh = 130+130+145+130 (clips 1-4) + 170 (THE WARNING pause) + 145+140 (clips 5-6) — see main.js SEG_VH */
.descent-track { height: 990vh; position: relative; }

/* fixed flush-left zone label */
.zone-label {
  position: fixed; left: var(--gutter); bottom: calc(var(--space-8) * 1.5);
  z-index: 30; color: var(--color-bg);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: var(--space-3);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.zone-label.live { opacity: 1; }
.zone-label .zl-rule { width: 34px; height: 2px; background: var(--color-accent); align-self: center; }
.zone-label .zl-index { color: var(--ground-70); }

/* scroll progress rule — a thin accent line climbing the left edge */
.descent-progress {
  position: fixed; left: 0; top: 0; bottom: 0; width: 2px; z-index: 30;
  transform-origin: top; transform: scaleY(0);
  background: var(--color-accent); pointer-events: none;
  opacity: 0; transition: opacity 0.4s;
}
.descent-progress.live { opacity: 1; }

/* pinned copy per zone */
.zone-copy {
  position: fixed; left: var(--gutter); right: var(--gutter);
  top: 50%; transform: translateY(-50%);
  z-index: 20; color: var(--color-bg);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.zone-copy .display-2 { max-width: 18ch; text-wrap: balance; }
.zone-copy .zc-sub {
  margin-top: var(--space-4); font-size: 15px; line-height: 1.55;
  color: var(--ground-70); max-width: 44ch;
}
.zone-copy--hero { top: auto; bottom: 10vh; transform: none; }
.zone-copy--hero .display-1 {
  font-size: clamp(22px, 2.6vw, 40px); line-height: 1.12; max-width: 26ch;
  margin-top: var(--space-6);
}
/* the lockup IS the hero: display-grade mark + wordmark, flush-left */
.hero-lockup {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: clamp(var(--space-3), 1.6vw, var(--space-8));
  margin-bottom: 0;
}
.hero-lockup .mark {
  height: clamp(32px, 7.2vw, 118px); width: auto; color: var(--color-bg);
}
.hero-lockup .word {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 10vw, 164px); letter-spacing: -0.02em; line-height: 1;
  min-width: 0; /* let a flex item actually shrink/wrap instead of overflowing */
}
.hero-lockup .word .ai { color: var(--color-accent); }
.scroll-cue {
  margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-3);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 600; color: var(--ground-70);
}
.scroll-cue .cue-rule { width: 2px; height: 34px; background: var(--color-accent); }

/* legibility scrim behind pinned lines — ink, never a colour */
.film-scrim {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-text) 42%, transparent) 0%,
    transparent 34%,
    transparent 58%,
    color-mix(in srgb, var(--color-text) 48%, transparent) 100%);
  opacity: 0; transition: opacity 0.4s;
}
.film-scrim.live { opacity: 1; }

/* THE WARNING — the one light-ground pause inside the descent. Occludes the
   held film frame without cutting it: frame progress freezes on clip 4's
   last frame for the duration of this beat, then resumes into clip 5. */
.zone-warning {
  position: fixed; inset: 0; z-index: 25;
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  background: var(--color-bg); color: var(--color-text);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.zone-warning-inner { max-width: 62ch; }
.zone-warning .eyebrow { margin-bottom: var(--space-6); }
.zone-warning h2 { max-width: 16ch; margin: 0 0 var(--space-6); }
.zone-warning p {
  font-size: 17px; line-height: 1.6; max-width: 52ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 0 0 var(--space-4);
}
.zone-warning .zw-line {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.015em;
  margin-top: var(--space-6); max-width: 30ch;
}

/* ————————————————————— the descent (mobile loops) ————————————————————— */

.descent-mobile { display: none; }
.descent-mobile .m-zone { position: relative; background: var(--color-text); }
.descent-mobile video { width: 100%; height: auto; display: block; }
.descent-mobile .m-copy {
  padding: var(--space-6) var(--gutter) calc(var(--space-8) * 1.5);
  color: var(--color-bg); background: var(--color-text);
}
.descent-mobile .m-copy .display-2 { font-size: clamp(28px, 8vw, 44px); }
.descent-mobile .m-kicker {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ground-70); margin-bottom: var(--space-4);
}
.descent-mobile .m-kicker .zl-rule { width: 28px; height: 2px; background: var(--color-accent); }
.descent-mobile .m-copy .zc-sub { margin-top: var(--space-3); color: var(--ground-70); font-size: 15px; }
.descent-mobile .m-zone--hero .m-copy { padding-top: var(--space-8); }
.descent-mobile .hero-lockup { gap: var(--space-3); }
.descent-mobile .hero-lockup .mark { height: clamp(30px, 8.5vw, 54px); }
.descent-mobile .hero-lockup .word { font-size: clamp(42px, 11.8vw, 76px); }
.descent-mobile .m-zone--hero .display-2 {
  font-size: clamp(18px, 5vw, 26px); margin-top: var(--space-4);
  color: var(--ground-70);
}
/* THE WARNING, mobile — a plain light-ground block between clip 4 and clip 5 */
.descent-mobile .m-warning {
  background: var(--color-bg); color: var(--color-text);
  padding: calc(var(--space-8) * 1.5) var(--gutter);
}
.descent-mobile .m-warning h2 { font-size: clamp(28px, 8vw, 40px); max-width: 14ch; margin: 0 0 var(--space-4); }
.descent-mobile .m-warning p { font-size: 15px; line-height: 1.6; max-width: 44ch; margin: 0 0 var(--space-3); color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.descent-mobile .m-warning .zw-line {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(18px, 5vw, 22px); margin-top: var(--space-4);
}

/* nav brand steps aside while the display lockup is on screen */
.site-nav .brand-lockup { transition: opacity 0.3s; }

/* ————————————————————————— main content ————————————————————————— */

.main-content { position: relative; z-index: 2; background: var(--color-bg); }
.section { padding: var(--section-pad) var(--gutter); border-top: 2px solid var(--color-divider); }
.section:first-child { border-top: 0; }

/* SERVICES */
.cells { display: grid; border-top: 2px solid var(--color-divider); }
.cells--6 { grid-template-columns: repeat(6, 1fr); }
.cells--3 { grid-template-columns: repeat(3, 1fr); }
.cell {
  padding: var(--space-6) var(--space-4) calc(var(--space-8) * 1.75) 0;
  border-left: 2px solid var(--color-divider);
  padding-left: var(--space-4);
}
.cell:first-child { border-left: 0; padding-left: 0; }
.cell-kicker {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 var(--space-4); min-height: 3.9em;
}
.cell-index { display: block; color: var(--color-accent); margin-bottom: var(--space-2); }
.cell p { font-size: 14px; line-height: 1.55; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.section-head { margin-bottom: calc(var(--space-8) * 1.25); }
.section-head .display-2 { max-width: 20ch; }

/* BEYOND FASHION */
.beyond .beyond-row {
  display: grid; grid-template-columns: minmax(200px, 4fr) 8fr;
  gap: var(--space-6); padding: var(--space-5) 0;
  border-top: 2px solid var(--color-divider); align-items: baseline;
}
.beyond-row h3 {
  font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.02em; margin: 0;
}
.beyond-row p { margin: 0; font-size: 15px; }
.beyond-coda {
  padding-top: var(--space-8); font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.015em; max-width: 34ch;
}

/* PROOF */
.proof .counter-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--color-divider); }
.counter { padding: var(--space-6) var(--space-4) var(--space-8) 0; border-left: 2px solid var(--color-divider); padding-left: var(--space-4); }
.counter:first-child { border-left: 0; padding-left: 0; }
.counter .num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(44px, 5.6vw, 88px); line-height: 1; letter-spacing: -0.02em;
  display: block; margin-bottom: var(--space-3);
}
.counter .num .accent { color: var(--color-accent); }
.counter .what { font-size: 14px; margin: 0 0 var(--space-2); }
.counter .who {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 0;
}
.proof-attribution {
  margin-top: var(--space-6); font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); max-width: 62ch;
}

/* POSTER CLOSE */
.poster {
  background: var(--color-accent); color: var(--color-bg);
  padding: calc(var(--section-pad) * 1.15) var(--gutter);
  border-top: 0;
}
.poster .eyebrow { color: var(--color-bg); }
.poster .display-1 { max-width: 14ch; }
.poster-actions {
  margin-top: calc(var(--space-8) * 1.5);
  display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-end;
}
.btn-ground {
  background: var(--color-bg); color: var(--color-text);
  justify-content: flex-start; text-align: left;
  padding: var(--space-3) calc(var(--space-8) * 1.5) var(--space-3) var(--space-4);
  font-size: 15px;
}
.btn-ground:hover { background: var(--color-neutral-200); }
.btn-ground:active { background: var(--color-neutral-300); }
.poster :focus-visible { outline-color: var(--color-bg); }
.capture { display: flex; flex-direction: column; gap: var(--space-2); min-width: min(360px, 100%); }
.capture label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 600;
}
.capture-row { display: flex; }
.capture .input {
  background: transparent; border: 2px solid var(--ground-70);
  color: var(--color-bg); border-radius: var(--radius-md); min-height: 44px;
}
.capture .input::placeholder { color: var(--ground-70); }
.capture .input:hover, .capture .input:focus-visible { border-color: var(--color-bg); }
.capture .btn { min-height: 44px; }
.capture-note { font-size: 11px; color: var(--ground-70); margin: 0; }

/* FOOTER */
.site-footer {
  background: var(--color-text); color: var(--color-bg);
  padding: calc(var(--space-8) * 2) var(--gutter);
}
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: start; }
.site-footer .brand-lockup .mark { height: 24px; }
.site-footer .brand-lockup .word { font-size: 21px; }
.footer-contact { text-align: left; font-size: 14px; line-height: 1.8; }
.footer-contact a { color: var(--color-bg); text-decoration: none; }
.footer-contact a:hover { color: var(--color-accent-500); }
.footer-rule { height: 2px; background: var(--ground-40); border: 0; margin: var(--space-8) 0 var(--space-4); }
.footer-legal { font-size: 11px; color: var(--ground-70); display: flex; justify-content: space-between; gap: var(--space-4); }

/* ——————————————————————————— reveals ——————————————————————————— */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s, transform 0.7s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ——————————————————————————— mobile ——————————————————————————— */

@media (max-width: 900px) {
  .cells--6, .cells--3, .proof .counter-strip { grid-template-columns: 1fr; }
  .cell, .counter { border-left: 0; padding-left: 0; border-top: 2px solid var(--color-divider); padding-bottom: var(--space-8); }
  .cell:first-child, .counter:first-child { border-top: 0; }
  .beyond .beyond-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .footer-grid { grid-template-columns: 1fr; }
  .site-nav a.nav-link { display: none; }
  .poster-actions { gap: var(--space-6); }
}

/* mobile / coarse-pointer film mode: stacked autoplay loops, no scrub */
html.film-loops .film-canvas,
html.film-loops .descent-track,
html.film-loops .zone-label,
html.film-loops .descent-progress,
html.film-loops .film-scrim,
html.film-loops .zone-copy,
html.film-loops .zone-warning { display: none; }
html.film-loops .descent-mobile { display: block; }