/* FORMA — med concept · the walk is the site, full bleed
   Tokens ---------------------------------------------------------------- */
:root {
  --ink: #1B1E27;
  --gold: #B68D5B;
  --cream: #F7F2E9;
  --cream-soft: rgba(247, 242, 233, 0.78);
  --ink-soft: rgba(27, 30, 39, 0.62);
  --lift: 0 1px 14px rgba(10, 12, 16, 0.45);      /* dark glow under cream type on footage */
  --lift-ink: 0 1px 10px rgba(247, 242, 233, 0.5); /* light glow under ink type on sky */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  color-scheme: only light;
  background: var(--cream);
  /* Marketing asset — no scrollbar in captures or live showings */
  scrollbar-width: none;
}

html::-webkit-scrollbar { display: none; }

body {
  background: var(--cream);
  color: var(--cream);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* Scroll lock while frames preload (released by main.js) */
html.is-loading body {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

.noscript-poster {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Branded load moment — an opaque cream card that hands off to the film -- */
.load {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.load-mark {
  font-family: 'Italiana', serif;
  font-size: clamp(38px, 8vw, 56px);
  letter-spacing: 0.18em;
  text-indent: 0.18em; /* recenter tracked caps */
  color: var(--gold);
}

.load-field {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

html.is-ready .load {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease 0.15s, visibility 0s linear 0.9s;
}

/* Track + stage — the film is the page, every viewport ------------------ */
.track { height: 500vh; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.film { position: absolute; inset: 0; }

#cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Legibility scrims — cinematic gradients, not paper tints -------------- */
.scrim {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 8;
  pointer-events: none;
}

.scrim-top {
  top: 0;
  height: 16vh;
  background: linear-gradient(to bottom, rgba(16, 18, 24, 0.5), rgba(16, 18, 24, 0));
}

.scrim-bottom {
  bottom: 0;
  height: 24vh;
  background: linear-gradient(to top, rgba(16, 18, 24, 0.55), rgba(16, 18, 24, 0));
}

/* Leader lines — from each note to the material in the frame ------------ */
.leaders {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
}

.leaders g { filter: drop-shadow(0 1px 5px rgba(16, 18, 24, 0.55)); }

.leaders line {
  stroke: var(--gold);
  stroke-width: 1.2;
}

.leaders circle { fill: var(--gold); }

/* Fixed chrome — direct children of body -------------------------------- */
.chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 18px) 20px 0;
}

.mark {
  font-family: 'Italiana', serif;
  font-size: 22px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--gold);
  text-decoration: none;
  text-shadow: var(--lift);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.nav a {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  text-shadow: var(--lift);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav a:hover { color: var(--gold); }

.nav a:focus-visible,
.mark:focus-visible,
.note-cta:focus-visible,
.doc-cta:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* Material notes — placed into each frame's open air -------------------- */
.note {
  position: fixed;
  z-index: 9;
  max-width: 272px;
  opacity: 0;
  pointer-events: none;
  color: var(--cream);
}

/* Anchors — the stations move around the frame as the walk goes on */
.note--tl { top: calc(env(safe-area-inset-top) + 96px); left: 20px; }
.note--tr { top: calc(env(safe-area-inset-top) + 96px); right: 20px; left: auto; }
.note--ml { top: 40vh; left: 20px; }
.note--mr { top: 42vh; right: 20px; left: auto; }
.note--bl { bottom: calc(env(safe-area-inset-bottom) + 56px); left: 20px; }

/* Tone per station: cream by default; ink where the frame is open sky */
.note--ink { color: var(--ink); }
.note--ink .note-eyebrow,
.note--ink .note-list li,
.note--ink .note-text { text-shadow: var(--lift-ink); }

/* A soft breath of shadow behind cream notes on mid-tone plaster */
.note--veil { padding: 18px 22px 20px; }
.note--veil::before {
  content: "";
  position: absolute;
  inset: -44px -56px;
  z-index: -1;
  background: radial-gradient(ellipse at 42% 32%, rgba(16, 18, 24, 0.32), rgba(16, 18, 24, 0) 66%);
}

.note-eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: var(--lift);
}

/* Material swatch — a small mounted sample, portrait like the film */
.note-swatch {
  margin-top: 12px;
  width: 104px;
  height: 128px;
  overflow: hidden;
  border: 1px solid rgba(247, 242, 233, 0.38);
}

.note-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.note--ink .note-swatch { border-color: rgba(27, 30, 39, 0.28); }

.note-no {
  color: var(--gold);
  margin-right: 10px;
}

.note-list {
  margin-top: 12px;
  list-style: none;
}

.note-list li {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 7px;
  text-shadow: var(--lift);
}

/* Bullet = a small gold hairline, kin to the progress line */
.note-list li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 10px;
}

.note-text {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  text-shadow: var(--lift);
}

.note-cta {
  display: inline-block;
  margin-top: 2px;
  padding-bottom: 3px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.note-cta:hover {
  color: var(--gold);
  letter-spacing: 0.18em;
}

.note--contact.is-on .note-cta { pointer-events: auto; }

/* Voice lines — the studio speaking between the materials */
.voice { max-width: 250px; }

.voice p {
  font-family: 'Italiana', serif;
  font-size: 24px;
  line-height: 1.35;
  text-shadow: var(--lift);
}

/* Opening thesis — a .note for the progress engine, but its own geometry.
   Declared after .note so these rules win the cascade. */
.thesis {
  left: 20px;
  right: 76px;
  bottom: calc(env(safe-area-inset-bottom) + 112px);
  max-width: none;
}

.thesis p {
  font-family: 'Italiana', serif;
  font-size: 34px;
  line-height: 1.2;
  text-shadow: var(--lift);
}

.thesis .thesis-about {
  margin-top: 16px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  max-width: 32ch;
  text-shadow: var(--lift);
}

.thesis .thesis-est {
  margin-top: 16px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.note-services {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

/* Semantic materials section — screen-reader path in scrub mode,
   the real page for reduced-motion visitors ----------------------------- */
.notes-doc {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Load percentage — lives on the load card ------------------------------ */
.pct {
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Scroll cue — appears on handoff, retires on first scroll -------------- */
.cue {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 26px);
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
  pointer-events: none;
}

html.is-ready .cue { opacity: 1; }

html.is-scrolled .cue {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cue-label {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-soft);
  text-shadow: var(--lift);
}

.cue-line {
  width: 1px;
  height: 32px;
  background: var(--cream-soft);
  transform-origin: top;
  animation: cue-walk 2.4s ease-in-out infinite;
}

@keyframes cue-walk {
  0%       { transform: scaleY(0);   opacity: 0; }
  10%      { opacity: 1; }
  55%      { transform: scaleY(1);   opacity: 1; }
  85%,100% { transform: scaleY(1);   opacity: 0; }
}

/* The hairline — loads the film, then walks it -------------------------- */
.line {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  z-index: 10;
  background: rgba(247, 242, 233, 0.22);
  pointer-events: none;
}

.line-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s linear;
}

/* Once scrubbing, the line answers the finger — no easing lag */
html.is-ready .line-fill { transition: none; }

/* Station ticks — the line is a map of the walk */
.tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 7px;
  background: rgba(247, 242, 233, 0.45);
  transition: background 0.3s ease;
}

.tick--past { background: var(--gold); }

/* Desktop — same full-bleed film, more air ------------------------------ */
@media (min-width: 920px) {
  .chrome { padding: 28px 36px 0; }
  .mark { font-size: 28px; letter-spacing: 0.14em; }
  .nav { gap: 30px; }
  .nav a { letter-spacing: 0.16em; }

  .note { max-width: 320px; }
  .note-swatch { width: 118px; height: 146px; }
  .voice { max-width: 340px; }
  .voice p { font-size: 30px; }
  .note--tl { top: 17vh; left: 5vw; }
  .note--tr { top: 17vh; right: 5vw; }
  .note--ml { top: 42vh; left: 5vw; }
  .note--mr { top: 44vh; right: 5vw; }
  .note--bl { bottom: 12vh; left: 5vw; }

  .note-list li { font-size: 15px; }

  .thesis {
    left: 5vw;
    right: auto;
    max-width: 60vw;
    bottom: 14vh;
  }

  .thesis p { font-size: clamp(40px, 4.6vw, 58px); }
  .thesis .thesis-about { font-size: 15px; max-width: 44ch; }
}

/* Reduced motion — one still frame, then the materials as a page -------- */
@media (prefers-reduced-motion: reduce) {
  .track { height: auto; }
  .stage { position: relative; }
  .cue { display: none; }
  .cue-line { animation: none; }
  .line { display: none; }
  .pct { transition: none; }
  .line-fill { transition: none; }
  .thesis, .notes-overlay, .scrim, .load, .leaders { display: none; }

  .notes-doc {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    padding: 72px 24px 96px;
    max-width: 560px;
    margin: 0 auto;
    color: var(--ink);
  }

  .notes-doc h2 {
    font-family: 'Italiana', serif;
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 20px;
  }

  .notes-doc .doc-about {
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-soft);
  }

  .notes-doc ol {
    list-style: none;
    counter-reset: mat;
  }

  .notes-doc li {
    counter-increment: mat;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.7;
  }

  .notes-doc li::before {
    content: counter(mat, decimal-leading-zero);
    color: var(--gold);
    letter-spacing: 0.1em;
    margin-right: 12px;
  }

  .notes-doc strong { font-weight: 500; }

  .notes-doc p { margin-top: 40px; font-size: 15px; }

  .doc-cta {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
  }
}