/* ============================================================
   CORE ENGINE - shared by every brand page.
   Owns layout, motion, and component structure only.
   Colour and type come from each brand's own css/brand.css,
   which sets the tokens this file reads. Never hardcode a
   brand colour in here; two copies of a palette always drift.
   ============================================================ */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1440px;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
dl { padding: 0; }

::selection { background: var(--accent); color: var(--ink); }

/* ---------- shared type utilities ---------- */

.label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   LOADER
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity 700ms var(--ease), visibility 700ms;
}

.loader__label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding-bottom: 1.1rem;
}

.loader__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: loaderBar 1.5s var(--ease) forwards;
}

@keyframes loaderBar { to { transform: scaleX(1); } }

body.is-loaded .loader { opacity: 0; visibility: hidden; }

/* ============================================================
   PAGE WIPE  (covers the screen while navigating between pages)
   ============================================================ */

.wipe {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--accent);
  pointer-events: none;
  transform: scaleY(1);
  transform-origin: top;
}

body.is-loaded .wipe {
  transform: scaleY(0);
  transition: transform 750ms var(--ease) 120ms;
}

body.is-wiping .wipe {
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 550ms var(--ease);
}

/* ============================================================
   REVEAL  (staggered entrance, driven by --d on each element)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition:
    opacity 900ms var(--ease) var(--d, 0ms),
    transform 900ms var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}

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

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem var(--gutter);
  transition: transform 500ms var(--ease), background-color 400ms linear;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
  z-index: -1;
  transition: opacity 400ms linear;
}

.nav.is-hidden { transform: translateY(-110%); }

.nav.is-stuck {
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.nav.is-stuck::before { opacity: 0; }

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-wordmark, var(--font-display));
  font-size: 1.15rem;
  font-weight: var(--wordmark-weight, var(--display-weight, 300));
  letter-spacing: var(--brand-tracking, -.01em);
  white-space: nowrap;
}

.nav__mark { height: 1.35em; width: auto; }

.nav__brand sup {
  font-size: .5em;
  vertical-align: super;
  color: var(--accent);
}

.nav__pill {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav__link {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .5rem .85rem;
  border-radius: 999px;
  transition: color 300ms var(--ease), background-color 300ms var(--ease);
}

.nav__link:hover { color: var(--paper); }

/* The chapter numbers are the first thing to go when the pill runs
   out of room. Dropping them keeps every label readable instead of
   letting the last link slide off the right edge. */
.nav__num { margin-right: .5em; }

.nav__link.is-active {
  color: var(--ink);
  background: var(--paper);
}

.nav__index {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .nav { padding: 1rem var(--gutter); }
  .nav__index { display: none; }
  .nav__link { padding: .45rem .6rem; font-size: .5625rem; letter-spacing: .12em; }
}

@media (max-width: 620px) {
  .nav__num { display: none; }
  .nav__pill { gap: 0; padding: .3rem; }
  .nav__brand { font-size: 1rem; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--hero-fallback);
  background-size: 200% 200%;
  animation: heroDrift 26s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { background-position: 0% 40%; }
  to   { background-position: 100% 60%; }
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1200ms var(--ease);
}

.hero__video.is-playing { opacity: 1; }

/* Scrim: darkens the footage so the type always clears contrast.
   Two stops, because a single flat overlay kills the highlights. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top, var(--scrim-strong) 0%, transparent 62%),
    linear-gradient(to bottom, var(--scrim-soft) 0%, transparent 45%);
}

.hero__noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.hero__content {
  max-width: 62ch;
  margin-top: auto;
  padding-bottom: clamp(2rem, 6vw, 4.5rem);
}

.hero__kicker {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 300);
  font-size: clamp(2.6rem, 7.2vw, 6.2rem);
  line-height: .98;
  letter-spacing: var(--display-tracking, -.025em);
  margin-bottom: 1.6rem;
}

.hero__title em {
  font-style: italic;
  color: var(--accent-soft, var(--paper));
}

.hero__sub {
  max-width: 46ch;
  color: var(--paper-dim);
  margin-bottom: 2.4rem;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 720px) {
  .hero__meta > span:nth-child(2) { display: none; }
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--paper-dim);
}

.scroll-cue__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: cuePulse 2.2s var(--ease) infinite;
}

@keyframes cuePulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50%      { opacity: .25; transform: translateY(4px); }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color 350ms var(--ease), color 350ms var(--ease);
}

.btn:hover { background: var(--accent); color: var(--ink); }

.btn__arrow { transition: transform 350ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Two classes on the modifier so it always beats the base rule,
   regardless of which one is written later in the file. */
.btn.btn--ghost {
  background: transparent;
  color: var(--paper);
  padding: .95rem 0;
  border-radius: 0;
}

.btn.btn--ghost:hover { background: transparent; color: var(--accent); }

.btn__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 420ms var(--ease);
}

.btn.btn--ghost:hover .btn__line {
  transform: scaleX(0);
  transform-origin: right;
}

/* ============================================================
   CHAPTER SECTIONS
   ============================================================ */

main { position: relative; z-index: 1; background: var(--ink); }

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(5rem, 12vw, 10rem) var(--gutter);
  border-top: 1px solid var(--line);
}

.chapter__label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: .5rem;
}

.chapter__heading {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 300);
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.14;
  letter-spacing: var(--display-tracking, -.02em);
  max-width: 22ch;
  margin-bottom: 1.75rem;
}

.chapter__heading em { font-style: italic; color: var(--accent-soft, var(--paper)); }

.chapter__body {
  max-width: 60ch;
  color: var(--paper-dim);
}

.chapter__body + .chapter__body { margin-top: 1.25rem; }

@media (max-width: 860px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter__label { padding-top: 0; }
}

/* ---------- spec list ---------- */

.spec { margin-top: clamp(2.5rem, 5vw, 4rem); }

.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 1rem 2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}

.spec__row:last-child { border-bottom: 1px solid var(--line); }

.spec__row dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .2rem;
}

.spec__row dd { color: var(--paper); }

@media (max-width: 560px) {
  .spec__row { grid-template-columns: 1fr; gap: .35rem; }
}

/* ============================================================
   NEXT  (full-bleed link to the sibling page)
   ============================================================ */

.next {
  display: block;
  padding: clamp(4.5rem, 11vw, 9rem) var(--gutter);
  border-top: 1px solid var(--line);
  text-align: center;
  transition: background-color 500ms var(--ease);
}

.next:hover { background: var(--ink-2); }

.next__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.next__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 300);
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: var(--display-tracking, -.025em);
  margin-bottom: 1.25rem;
  transition: color 400ms var(--ease);
}

.next:hover .next__title { color: var(--accent); }

.next__arrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  padding: 2rem var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--ink);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   REDUCED MOTION
   Kill drift, pulse and parallax. Keep opacity so nothing is
   left invisible when transitions are disabled.
   ============================================================ */

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

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .hero__video { opacity: 1; }
  .wipe { display: none; }
}