:root {
  --bg: #1a1612;
  --cream: #f0ead6;
  --gold: #c9a961;
  --warm-gray: #c9c2b2;
  --warm-gray-low: rgba(201, 194, 178, 0.55);

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --hero-pad-x: clamp(1.25rem, 4vw, 4rem);
  --hero-pad-y: clamp(1.5rem, 4vh, 3rem);
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

main {
  display: block;
}

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

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

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
}

/* --- Media layer ------------------------------------------------ */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--bg);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the warm pool of light to the left third on wide screens. */
  object-position: 25% center;
  display: block;
  pointer-events: none;
  will-change: opacity;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(26, 22, 18, 0.72) 0%,
      rgba(26, 22, 18, 0.18) 18%,
      rgba(26, 22, 18, 0) 38%,
      rgba(26, 22, 18, 0) 62%,
      rgba(26, 22, 18, 0.28) 82%,
      rgba(26, 22, 18, 0.78) 100%
    ),
    /* Right-side wash so the typography sits on a calmer field. */
    linear-gradient(
      to left,
      rgba(26, 22, 18, 0.55) 0%,
      rgba(26, 22, 18, 0.18) 45%,
      rgba(26, 22, 18, 0) 70%
    );
  pointer-events: none;
}

/* --- Content layer ---------------------------------------------- */

.hero__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Type lives on the right two-thirds on wide screens. */
  grid-template-columns: 1fr;
  padding: var(--hero-pad-y) var(--hero-pad-x);
  gap: 1rem;
}

.hero__eyebrow {
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
}

.hero__eyebrow span {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.hero__headline {
  grid-row: 2;
  align-self: center;
  justify-self: end;
  margin: 0;
  max-width: min(62ch, 66%);
  text-align: left;

  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  color: var(--cream);
  font-size: clamp(2rem, 5.2vw, 5rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.hero__headline em {
  font-style: italic;
  color: var(--gold);
}

.hero__attribution {
  grid-row: 3;
  display: flex;
  justify-content: flex-end;
}

.hero__attribution span {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--warm-gray);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* --- Scroll affordance ------------------------------------------ */

.hero__scroll {
  position: absolute;
  bottom: calc(var(--hero-pad-y) * 0.6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--warm-gray-low);
  text-transform: uppercase;
  letter-spacing: 0.32em;

  transition: color 240ms ease, transform 240ms ease;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  color: var(--gold);
  outline: none;
}

.hero__scroll-chevron {
  animation: chevron-drift 2.4s ease-in-out infinite;
}

@keyframes chevron-drift {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-chevron { animation: none; }
}

/* ============================================================
   SUBLINE — quiet question between hero and architecture
   ------------------------------------------------------------
   A single small-serif sentence that lives on its own dark
   field. As the section travels through the viewport, the line
   fades up from below, holds in the middle of the view, then
   fades up and away — a passing thought that lands, lingers,
   then yields to the architecture animation that follows.
   ============================================================ */

.subline {
  position: relative;
  width: 100%;
  min-height: 80svh;
  display: grid;
  place-items: center;
  padding: var(--hero-pad-y) var(--hero-pad-x);
  background-color: var(--bg);
}

.subline__text {
  margin: 0;
  max-width: 28ch;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--cream);
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Floats in as the section enters the viewport, holds while it's
   centered, then floats out as it exits. Without view() timeline
   support the keyframes never run, so the line just appears in
   its natural state — graceful degradation. */
@keyframes subline-pass {
  0%,  5%   { transform: translateY(28px); opacity: 0; }
  35%, 65%  { transform: translateY(0);    opacity: 1; }
  95%, 100% { transform: translateY(-16px); opacity: 0; }
}

@supports (animation-timeline: view()) {
  .subline__text {
    animation: subline-pass linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subline__text {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   ARCHITECTURE — scroll-tied video scrub
   ------------------------------------------------------------
   Outer wrapper is 4× viewport tall. Inside it, a sticky pin
   of 100svh stays fixed for 3× viewport of scroll, during
   which JS maps scroll progress (0..1) to video.currentTime.
   ============================================================ */

.scrub {
  position: relative;
  width: 100%;
  height: 400svh;
  /* Fallback for browsers without svh — use vh so layout still works. */
  height: 400vh;
  height: 400svh;
  background-color: var(--bg);
}

.scrub__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bg);

  /* Two-column split — animation lives left, type lives clean on
     the right third on its own dark field instead of overlaid on
     the moving frame. Promotes the pin to its own paint layer so
     scroll-driven canvas updates don't repaint surrounding content. */
  display: grid;
  grid-template-columns: 2fr 1fr;
  contain: paint;
}

.scrub__media {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: #000;
}

.scrub__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Letterbox the 16:9 source so nothing is cropped — top/bottom
     bars blend into the black media-column background. */
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  /* Force GPU compositor — drawImage updates blit, no layout repaint. */
  transform: translateZ(0);
}

.scrub__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Hidden on desktop — the right-third type column has its own bg
     so we don't need to darken the canvas for legibility. Re-enabled
     in the mobile media query where the type overlays the canvas. */
  display: none;
}

.scrub__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--hero-pad-y) clamp(1.5rem, 2.4vw, 2.75rem);
  gap: 1rem;
  background-color: var(--bg);
  /* Hairline gold seam between media and text column. */
  border-left: 1px solid rgba(201, 169, 97, 0.10);
}

.scrub__eyebrow {
  grid-row: 1;
  display: flex;
  justify-content: flex-start;
}

.scrub__eyebrow span {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* Lines stack in the same visual cell — JS controls which one is
   visible by setting opacity on the .scrub__band element. The
   wrapper stretches to fill grid-row 2 so each absolute line has
   a stable container to vertically center within. */
.scrub__lines {
  grid-row: 2;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.scrub__line {
  /* Vertical-center via top:50% + translateY(-50%) so the inline
     <em> stays inline with the surrounding text. Using flex here
     would split each text node and the <em> into separate flex
     children, breaking the line into vertical columns. */
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  text-align: left;

  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  color: var(--cream);
  font-size: clamp(1.4rem, 2.2vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.scrub__line em {
  font-style: italic;
  color: var(--gold);
}

/* All bands start fully transparent; the controller raises opacity
   based on the user's scroll progress through the pin. Without JS,
   the eyebrow and the first line stay visible as a graceful state. */
.scrub__band {
  opacity: 0;
  will-change: opacity;
  transition: opacity 120ms linear;
}

/* No-JS safety: if scripting is disabled, surface the content
   stacked rather than leaving a black void. */
.no-js .scrub__band { opacity: 1; transition: none; }
.no-js .scrub__line { position: relative; inset: auto; margin-bottom: 1.2em; }

/* ============================================================
   OUTRO
   ============================================================ */

.outro {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 38svh;
  background-color: var(--bg);
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vh, 6rem) var(--hero-pad-x);
}

.outro__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1rem;
}

.outro__eyebrow span {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.outro__line {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--warm-gray);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.55;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: keep right-aligned typography but loosen widths. */
@media (max-width: 1024px) {
  .hero__headline {
    max-width: 78%;
    font-size: clamp(1.9rem, 4.8vw, 3.6rem);
  }
}

/* Mid-width: split column gets cramped under ~960px; keep the
   2fr/1fr ratio but pull the headline size down a bit more. */
@media (max-width: 960px) {
  .scrub__line {
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  }
}

/* Mobile: center type stack, video stays as background. */
@media (max-width: 720px) {
  .hero__video {
    /* Pull the warm pool toward center on narrow screens
       so it sits behind the centered type without clipping. */
    object-position: 35% center;
  }

  .hero__overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(26, 22, 18, 0.78) 0%,
        rgba(26, 22, 18, 0.30) 22%,
        rgba(26, 22, 18, 0.30) 78%,
        rgba(26, 22, 18, 0.85) 100%
      );
  }

  .hero__content {
    grid-template-rows: auto 1fr auto;
    text-align: center;
    padding-inline: clamp(1.25rem, 6vw, 2rem);
  }

  .hero__eyebrow,
  .hero__attribution {
    justify-content: center;
  }

  .hero__eyebrow span {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
  }

  .hero__attribution span {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
  }

  .hero__headline {
    justify-self: center;
    text-align: center;
    max-width: 22ch;
    font-size: clamp(1.7rem, 8.5vw, 2.6rem);
    line-height: 1.14;
  }

  /* --- Scrub: collapse to single column, type overlays canvas --- */

  .scrub__pin {
    grid-template-columns: 1fr;
  }

  .scrub__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--bg);
  }

  .scrub__canvas {
    /* On mobile the column is narrow and we want the action to
       fill the frame, so cover instead of letterbox. */
    object-fit: cover;
  }

  .scrub__overlay {
    display: block;
    background:
      linear-gradient(
        to bottom,
        rgba(26, 22, 18, 0.78) 0%,
        rgba(26, 22, 18, 0.40) 22%,
        rgba(26, 22, 18, 0.40) 78%,
        rgba(26, 22, 18, 0.85) 100%
      );
  }

  .scrub__content {
    position: relative;
    z-index: 1;
    padding-inline: clamp(1.25rem, 6vw, 2rem);
    background: transparent;
    border-left: none;
  }

  .scrub__eyebrow {
    justify-content: center;
  }

  .scrub__eyebrow span {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
  }

  .scrub__lines {
    justify-self: center;
    width: 100%;
    max-width: 28ch;
  }

  .scrub__line {
    text-align: center;
    font-size: clamp(1.55rem, 7.5vw, 2.4rem);
    line-height: 1.16;
  }

  .outro__eyebrow span {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
  }
}

@media (max-width: 380px) {
  .hero__headline {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  .hero__attribution span {
    font-size: 0.56rem;
  }

  .scrub__line {
    font-size: clamp(1.35rem, 7vw, 1.85rem);
  }
}