/* ==========================================================================
   Orcheum editorial landing
   Design authority: Figma "Landing" (s9DDi1MDXq9mXXytPwkEUP).
   Movement → frame map:
     1 Overture      → frame "1"  (1:890)
     2 Redefinition  → frame "4"  (4:256)
     3 One prompt    → frame "2"  (4:224)
     4 Orchestration → editorial extension of the approved story
     5 Pause         → frame "6"  (4:273)
     6 Studios       → editorial extension
     7 Pause         → frame "7"  (4:279)
     8 The mark      → frames "3" (4:236) + "5" (4:286)
     9 Finale        → founder narrative ("The center holds")
   Motion law: opacity, masking, gentle vertical movement. No bounce, no
   elastic, no float, no decorative loops. Stillness is a state.
   ========================================================================== */

:root {
  /* Surface — Figma linear-gradient #fbf7ef → #ffe2ca */
  --lp-ivory: #fbf7ef;
  --lp-peach: #ffe2ca;
  --lp-peach-mid: #fff3ea;

  /* Ink.
     ink-soft (body copy) and ink-mute (small labels) carry information, so they
     are set to clear WCAG AA against the warmest end of the page gradient
     (#ffe2ca): 5.07:1 and 5.15:1 respectively. The *display* inks below were
     raised from their Figma alphas to clear the 3:1 large-text bar; see
     DESIGN.md §3.1 for the measured table. */
  --lp-ink: #2a1d16;                      /* Approachable Intelligence AAA standard */
  --lp-ink-soft: rgba(42, 29, 22, 0.94);
  --lp-ink-mute: rgba(42, 29, 22, 0.68);
  --lp-ink-display: rgba(42, 29, 22, 0.7);  /* Figma 1:893, raised for contrast */
  --lp-ink-ghost: rgba(42, 29, 22, 0.55);     /* Figma 4:257, raised for contrast */
  --lp-ink-struck: rgba(42, 29, 22, 0.46);    /* Figma 4:266 — ARTIFICIAL */

  --lp-charcoal: #221c19;
  --lp-dark: #32241e;            /* Figma frames “6”/“7” — warm brown, not black */
  --lp-ivory-on-dark: #fef2e9;

  /* Brand orange — the Sun is #FC9B4C and is only ever the canonical asset */
  --lp-orange: #f6984a;                   /* Figma 4:269 — the struck rule */
  --lp-orange-soft: rgba(239, 147, 72, 0.7);  /* Figma 4:262 */
  --lp-orange-ai: rgba(249, 153, 75, 0.5);    /* Figma 4:259 */
  --lp-cursor: #4190ff;                   /* Figma 1:900 — caret */

  /* Sans comes from the shared token layer. The serif does NOT: the Landing
     frames specify Libre Baskerville (Figma 1:893, 4:256, 4:266), and the
     landing is held to its own Figma, not to the platform display face. */
  --lp-sans: var(--font-sans);
  --lp-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;

  --lp-max: 1120px;
  --lp-wide: 1180px;

  /* The brand reveal and universal Composer share the expanded prompt stage. */
  --lp-stage-h: 144px;

  /* One easing for the whole page — editorial deceleration, never elastic */
  --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Focus (DESIGN.md §10.2) ────────────────────────────────────────────
     A pencil line, not a ring. 1px of thinned ink, held 2px off the element.

     Thickness is the lever that costs nothing: WCAG 2.2 SC 1.4.11 constrains
     the indicator's COLOUR, not its weight, so a 1px line is exactly as
     compliant as a 4px one and half as loud. Alpha then takes it as far as it
     can go — 0.7 measures 3.11:1 on the warm floor, 3.49:1 on the composer.
     Below α 0.68 it drops under 3:1 and stops being an indicator at all.

     Two louder versions were built and rejected first (2026-07-22): a two-tone
     orange+ink ring, and a 2px full-strength ink line. Compliance is a floor,
     not a brief. The accent marks *meaning* — a live state, the struck rule,
     the Sun; focus is chrome, and chrome recedes (Constitution 8.2). */
  --lp-focus-ink: rgba(129, 73, 59, 0.7);
  --lp-focus-width: 1px;

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  background: var(--lp-ivory);
}

body.oc-editorial-landing {
  margin: 0;
  min-height: 100vh;
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(180deg, var(--lp-ivory) 0%, var(--lp-peach-mid) 52%, var(--lp-peach) 100%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; cursor: pointer; background: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* Every focusable surface answers the keyboard. Components may override, but
   nothing is ever left without a visible ring.

   A real outline, not a box-shadow: it needs no per-element shadow stack to be
   preserved, it follows the element's own shape, and forced-colors mode
   repaints it in the system highlight colour for free. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: var(--lp-focus-width) solid var(--lp-focus-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 14px;
  background: var(--lp-charcoal);
  color: var(--lp-ivory-on-dark);
}
.lp-skip:focus { left: 12px; top: 12px; }

.lp-shell {
  width: min(var(--lp-max), calc(100% - 48px));
  margin: 0 auto;
}

/* ── The Sun ───────────────────────────────────────────────────────────────
   Constitution 7.6: the canonical asset only. Never redrawn, recolored,
   ringed, cropped, or nested inside another circle. Always a perfect circle. */
.lp-sun {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.16em;
  vertical-align: baseline;
  flex: none;
}

/* ══ Header ═══════════════════════════════════════════════════════════════ */
.lp-header {
  position: relative;
  z-index: 40;
  padding: 18px 0 10px;
  /* Non-sticky — avoids an ivory bar washing over the dark brand pauses */
  background: transparent;
}

.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(var(--lp-wide), calc(100% - 48px));
  margin: 0 auto;
  min-height: 44px;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lp-serif);
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--lp-ink);
}

.lp-brand__mark { width: 22px; height: 22px; flex: none; }

.lp-nav__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: background 0.25s var(--lp-ease), color 0.25s var(--lp-ease);
}

.lp-btn:focus-visible {
  outline: var(--lp-focus-width) solid var(--lp-focus-ink);
  outline-offset: 2px;
}

.lp-btn--ghost {
  color: var(--lp-ink-soft);
  padding-inline: 14px;
}
.lp-btn--ghost:hover { color: var(--lp-ink); }

.lp-btn--primary {
  background: var(--lp-charcoal);
  color: var(--lp-ivory-on-dark);
  margin-left: 6px;
}
.lp-btn--primary:hover { background: #100e0c; }

/* ══ Shared rhythm ════════════════════════════════════════════════════════ */
.lp-section {
  position: relative;
  /* Movements are separated by silence, not by rules */
  padding: clamp(112px, 18vh, 208px) 0;
  overflow: clip;
  scroll-margin-top: 72px;
}

.lp-h2 {
  margin: 0;
  font-family: var(--lp-serif);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--lp-ink);
}

.lp-lede {
  margin: 18px 0 0;
  max-width: 36rem;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--lp-ink-soft);
}

/* ══ Motion primitives ════════════════════════════════════════════════════
   Progressive enhancement: everything is visible by default. The hidden
   start-state exists only when JS is present (html.lp-js).                  */

/* Fade + gentle rise */
.lp-reveal { opacity: 1; transform: none; }

html.lp-js .lp-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.85s var(--lp-ease), transform 0.85s var(--lp-ease);
}
html.lp-js .lp-reveal.is-in { opacity: 1; transform: none; }

/* Masked typographic reveal — the line rises out of its own measure */
/* The mask must clear the descender, not the line box. Libre Baskerville
   drops ~0.27em below the baseline, and a 0.94 line-height pulls the box in
   tighter still — 0.06em was cutting the tail off every g, p, y and j. */
.lp-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}
.lp-mask__in { display: block; }

/* 130% clears the taller mask (line box + descender room) at every
   line-height on the page, so nothing peeks before it is revealed. */
html.lp-js .lp-mask__in {
  transform: translateY(130%);
  opacity: 0;
  transition:
    transform 1s var(--lp-ease),
    opacity 0.8s var(--lp-ease);
  will-change: transform;
}
html.lp-js .lp-mask.is-in .lp-mask__in {
  transform: none;
  opacity: 1;
  will-change: auto;
}

/* Sibling masks cascade — the eye is led down the stanza */
html.lp-js .lp-mask.is-in:nth-of-type(2) .lp-mask__in { transition-delay: 0.1s; }
html.lp-js .lp-mask.is-in:nth-of-type(3) .lp-mask__in { transition-delay: 0.2s; }

/* Restrained parallax — engravings only, ≤ 26px of travel.
   --pbleed lets a plate that sits on its own dark ground opt into extra
   scale; plates on the open page keep scale 1 so the crop stays exact. */
[data-parallax] img {
  transform: translate3d(0, var(--pxy, 0px), 0) scale(var(--pbleed, 1));
  will-change: transform;
}

/* ══ Movement 1 — Overture · Figma frame “1” ══════════════════════════════ */
.lp-overture {
  position: relative;
  min-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 7vh, 88px) 0 clamp(72px, 12vh, 132px);
  /* Composer rails overlay downward — keep visible below the stage */
  overflow: visible;
}

.lp-overture__inner {
  width: min(var(--lp-wide), calc(100% - 48px));
  margin: 0 auto;
  /* The overture is the one symmetrical moment on the page. It states the
     theme cleanly; every movement after it is asymmetric. */
  text-align: center;
}

/* ── The stage ─────────────────────────────────────────────────────────────
   Two elements share one slot: the cinematic brand reveal, then the real
   composer. The composer sits in flow and defines the stage height, so the
   handoff costs no reflow. The brand field floats above it and never moves
   layout. */
.lp-stage {
  position: relative;
  width: min(100%, 720px);
  /* Locked to the composer's resting height. Rails overlay (absolute), so
     opening options does not grow this box or re-center the hero. */
  min-height: var(--lp-stage-h);
  /* Slightly closer to the copy block above */
  margin: clamp(22px, 3.4vh, 40px) auto 0;
  display: flex;
  align-items: center;
  overflow: visible;
}

/* ── The brand field · Figma 1:891 ─────────────────────────────────────────
   A brand element, not a control. No input, no submit, no focus, no hover —
   `pointer-events: none` and `aria-hidden` keep it out of both the pointer
   and the accessibility tree. */
.lp-brandfield {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--lp-stage-h);
  padding-inline: 20px;
  border-radius: 20px;
  /* Match the new composer pill so the handoff is one material */
  background: rgba(0, 0, 0, 0.14);
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.lp-brandfield__word {
  display: flex;
  align-items: center;
  gap: 0.1em;
}

.lp-brandfield__typed {
  font-family: var(--lp-serif);
  font-weight: 700;
  /* Sized to remain legible inside the expanded prompt stage. */
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1;
  letter-spacing: -0.023em;
  color: var(--lp-ink);
  white-space: pre;
}

/* Natural cursor: solid while a letter is landing, blinking when it rests. */
.lp-brandfield__caret {
  width: 3px;
  height: 18px;
  border-radius: 10px;
  background: var(--lp-cursor);
  flex: none;
}

/* ── The handoff ───────────────────────────────────────────────────────────
   The brand field yields; the composer takes the same ground. Opacity and a
   few pixels of lift — nothing overshoots. */
html.lp-js .lp-brandfield {
  transition:
    opacity 0.62s var(--lp-ease),
    transform 0.62s var(--lp-ease);
}

html.lp-js .lp-stage.is-handed .lp-brandfield {
  opacity: 0;
  transform: translateY(calc(-50% - 8px));
}

.lp-composer-host { width: 100%; }

.lp-composer-host .oc-composer {
  min-height: var(--lp-stage-h);
}

/* The composer is inert until the brand moment ends — visibility:hidden also
   keeps it out of the tab order, so nothing is reachable before it arrives. */
html.lp-js .lp-composer-host {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.78s var(--lp-ease),
    transform 0.78s var(--lp-ease),
    visibility 0.78s;
}

/* The composer arrives LAST. The name dissolves, the promise rises above the
   empty slot, and only then does the invitation take the name's place. The
   beat of emptiness is the point — do not close it. */
html.lp-js .lp-stage.is-handed .lp-composer-host {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.6s;
}

/* No host overrides. The composer was migrated onto the warm system
   (2026-07-22), so its own defaults are now correct on this page — the host
   owns outer width and nothing else (Constitution 6.2). */

/* The host owns only the universal Composer's outer width. */
.lp-composer-host { width: 100%; }

/* ── The headline. Below and offset right — it answers the field. ──────── */
.lp-overture__title {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--lp-serif);
  font-weight: 700;
  font-size: clamp(38px, 5.31vw, 80px);
  line-height: 0.94;
  letter-spacing: -0.037em;          /* Figma −3px @ 80px */
  color: var(--lp-ink-display);      /* rgba(129,73,59,0.5) */
}

/* “A” and “I” hold full ink — the acronym lives inside the words */
.lp-overture__title .lp-ai {
  font-style: normal;
  color: var(--lp-ink);
  letter-spacing: -0.023em;
}

.lp-overture__title .lp-mask__in {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-overture__title .lp-sun {
  width: 0.934em;                    /* Figma 75px @ 80.264px */
  height: 0.934em;
  margin-left: 0.2em;
}

.lp-overture__support {
  /* Tighter under the headline — one unit with the title */
  margin: clamp(10px, 1.4vw, 16px) auto 0;
  max-width: 30rem;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
}

/* Intentional scroll cue — stem + chevron, not a stray hairline */
.lp-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4.5vh, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 16px;
  margin-left: -8px;
  pointer-events: none;
  transform-origin: top center;
}
.lp-scroll-hint__stem {
  display: block;
  width: 1.5px;
  height: clamp(28px, 4.2vh, 44px);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(129, 73, 59, 0.42) 0%,
    rgba(129, 73, 59, 0.12) 78%,
    transparent 100%
  );
}
.lp-scroll-hint__chev {
  display: block;
  width: 7px;
  height: 7px;
  margin-top: -2px;
  border-right: 1.5px solid rgba(129, 73, 59, 0.4);
  border-bottom: 1.5px solid rgba(129, 73, 59, 0.4);
  transform: rotate(45deg);
}
html.lp-js .lp-scroll-hint {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.9s var(--lp-ease), transform 1.1s var(--lp-ease);
}
html.lp-js .lp-scroll-hint.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Opening choreography ──────────────────────────────────────────────────
   CSS-driven so it begins at first paint rather than waiting on deferred JS.
   Total ≈ 2.5s. Every beat is opacity, mask, or ≤10px of vertical travel.   */
/* Beats: field drawn (0.26) → “O” lands (0.90) → “Orcheum” types (JS, from
   the wipe’s animationend) → holds → handoff (JS adds .is-handed) → the
   composer and the headline arrive together. Chrome comes last. */
@media (prefers-reduced-motion: no-preference) {
  html.lp-js .lp-brandfield {
    animation: lp-field-in 0.76s var(--lp-ease) 0.24s both;   /* drawn by 1.00s */
  }
  html.lp-js .lp-brandfield__typed { animation: lp-lift 0.5s var(--lp-ease) 0.58s both; }
  html.lp-js .lp-brandfield__caret { animation: lp-fade 0.3s var(--lp-ease) 0.9s both; }

  /* The caret rests only when nothing is being typed */
  html.lp-js .lp-stage.is-resting .lp-brandfield__caret {
    animation: lp-blink 1.1s steps(1) infinite;
  }

  html.lp-js .lp-header { animation: lp-fade 0.9s var(--lp-ease) 2.2s both; }
  html.lp-js .lp-scroll-hint { animation: lp-hint 1.1s var(--lp-ease) 3.2s both; }
}

/* The headline answers the composer, so it waits for the handoff. JS releases
   the masks on a stagger; the Sun settles last. A bloom, never a bounce. */
@media (prefers-reduced-motion: no-preference) {
  html.lp-js .lp-overture__title .lp-sun {
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.8s var(--lp-ease), transform 0.8s var(--lp-ease);
  }
  html.lp-js .lp-overture__title.is-lit .lp-sun {
    opacity: 1;
    transform: none;
    transition-delay: 0.44s;
  }
}

/* The field is drawn, left to right — the page writing its own invitation.
   Clip only: the filled `both` mode must not pin opacity, or the handoff’s
   fade-out would have nothing left to animate. */
@keyframes lp-field-in {
  from { clip-path: inset(0 100% 0 0 round 120px); }
  to   { clip-path: inset(0 0 0 0 round 120px); }
}
@keyframes lp-rise {
  from { transform: translateY(104%); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}
@keyframes lp-lift {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-blink { 50% { opacity: 0; } }
/* A bloom, not a bounce — the mark settles into place and stops */
@keyframes lp-sun-in {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: none; }
}
@keyframes lp-hint {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ Movement 2 — The redefinition · Figma frame “4” ══════════════════════ */
.lp-redefine__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.lp-redefine__art {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1;
  max-height: 520px;
}

.lp-redefine__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0.68;
  mix-blend-mode: multiply;
  filter: sepia(0.18) contrast(1.04) brightness(1.02);
  /* Soft edge — the plate dissolves into the canvas rather than sitting on it */
  mask-image: radial-gradient(ellipse 92% 90% at 38% 44%, #000 46%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 92% 90% at 38% 44%, #000 46%, transparent 80%);
}

.lp-redefine__stack {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 0.8vw, 12px);
  line-height: 0.94;
}

/* ~~ARTIFICIAL~~ */
.lp-strike {
  position: relative;
  display: inline-block;
  font-family: var(--lp-sans);
  font-weight: 500;
  font-size: clamp(28px, 4.2vw, 62px);
  letter-spacing: -0.045em;
  color: var(--lp-ink-struck);
}

.lp-strike__rule {
  position: absolute;
  left: -0.03em;
  right: -0.03em;
  top: 52%;
  height: clamp(4px, 0.6vw, 9px);
  border-radius: 2px;
  background: var(--lp-orange);
  transform-origin: left center;
}

html.lp-js .lp-strike__rule {
  transform: scaleX(0);
  transition: transform 0.72s var(--lp-ease) 0.24s;
}
/* Driven by the parent stanza's reveal — no observer of its own */
html.lp-js .lp-redefine__stack.is-in .lp-strike__rule { transform: scaleX(1); }

.lp-redefine__swap {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 2vw, 30px);
}

.lp-redefine__more {
  font-family: var(--lp-serif);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 62px);
  letter-spacing: -0.13em;             /* Figma −11.413px @ 88px */
  color: var(--lp-ink-ghost);
}

.lp-redefine__ai {
  font-family: var(--lp-sans);
  font-weight: 500;
  font-size: clamp(40px, 6.1vw, 90px);  /* Figma 128 : 88 */
  letter-spacing: 0.02em;
  color: var(--lp-orange-ai);
}

.lp-redefine__resolve {
  font-family: var(--lp-sans);
  font-weight: 500;
  font-size: clamp(26px, 4.2vw, 62px);
  letter-spacing: -0.01em;
  color: var(--lp-orange-soft);
}

html.lp-js .lp-redefine__stack > span {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--lp-ease), transform 0.8s var(--lp-ease);
}
html.lp-js .lp-redefine__stack.is-in > span { opacity: 1; transform: none; }
html.lp-js .lp-redefine__stack.is-in > span:nth-child(2) { transition-delay: 0.42s; }
html.lp-js .lp-redefine__stack.is-in > span:nth-child(3) { transition-delay: 0.62s; }

.lp-redefine__copy .lp-lede { margin-top: clamp(22px, 2.6vw, 34px); }

/* ══ Movement 3 — One prompt · Figma frame “2” ════════════════════════════ */
.lp-reach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 96px);
  align-items: start;
  margin: 0;
  font-weight: 400;
}

.lp-reach__half {
  display: block;
  font-family: var(--lp-serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--lp-ink-display);
}

.lp-reach__half--l { text-align: right; }
.lp-reach__half--r { text-align: left; padding-top: clamp(18px, 4vw, 62px); }

.lp-reach__glyph {
  display: block;
  margin-bottom: clamp(14px, 2vw, 26px);
  color: rgba(129, 73, 59, 0.34);
}
.lp-reach__glyph svg {
  width: clamp(26px, 3vw, 40px);
  height: clamp(26px, 3vw, 40px);
  display: inline-block;
}
.lp-reach__half--l .lp-reach__glyph { text-align: right; }

.lp-reach__explain {
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(44px, 7vh, 76px);
  text-align: center;
}

/* The refrain — “more approachable intelligence●”. It recurs, so it resolves.
   The two lines share a left edge (Figma) while the block itself centres. */
.lp-refrain {
  margin: clamp(52px, 9vh, 96px) auto 0;
  width: max-content;
  max-width: 100%;
  text-align: left;
  font-family: var(--lp-serif);
  font-weight: 400;
  line-height: 0.94;
}

/* The size lives on the mask, not the inner span: the mask's descender
   padding is an em value, so it has to resolve against the display size. */
.lp-refrain .lp-mask { display: block; }
.lp-refrain .lp-mask:nth-of-type(1) { font-size: clamp(26px, 4.2vw, 62px); }
.lp-refrain .lp-mask:nth-of-type(2) { font-size: clamp(32px, 5.25vw, 78px); }  /* Figma 110 : 88 */

.lp-refrain__soft {
  letter-spacing: -0.13em;
  color: var(--lp-ink-ghost);
}

.lp-refrain__hard {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  letter-spacing: -0.13em;
  color: var(--lp-ink);
}

.lp-refrain__hard .lp-sun {
  width: 0.78em;                          /* Figma 86px @ 110px */
  height: 0.78em;
  margin-left: 0.3em;
}

/* ══ Movement 4 — Many flowers. One arrangement. ══════════════════════════
   The plate is atmosphere, not illustration: it sits behind the type at low
   opacity so the section reads as one field of colour rather than a picture
   next to a paragraph. Figma 12:309 — colour-burn at 16%. */
#orchestration { position: relative; }

.lp-orch__plate {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(680px, 76vw);
  margin: 0;
  /* Anchored to the top of the movement so the bouquet keeps company with the
     heading and is spent well before the sequence below it. */
  transform: translate(-12%, -1%);
  pointer-events: none;
  z-index: 0;
}

.lp-orch__plate img {
  width: 100%;
  height: auto;
  opacity: 0.52;
  mix-blend-mode: color-burn;
  /* Weighted high and faded early — the flowers must never sit under the
     sequence text, which has to stay perfectly readable. */
  mask-image: radial-gradient(ellipse 66% 46% at 52% 34%, #000 26%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse 66% 46% at 52% 34%, #000 26%, transparent 68%);
}

.lp-orch {
  position: relative;
  z-index: 1;
}

/* The copy holds the left column; the bouquet blooms past it to the right */
.lp-orch__copy { max-width: min(560px, 62%); }

/* Product proof — editorial, never a SaaS card */
.lp-proof {
  margin-top: clamp(48px, 8vh, 72px);
  padding: clamp(24px, 3.5vw, 36px) 0 0;
  border-top: 1px solid rgba(129, 73, 59, 0.12);
  background: transparent;
  border-radius: 0;
}

.lp-proof__note {
  margin: 0 0 22px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-ink-mute);
}

.lp-proof__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-ink-mute);
}

.lp-proof__prompt p,
.lp-proof__result p {
  margin: 0;
  /* A readable measure — and it keeps the sequence clear of the bouquet */
  max-width: 34rem;
  font-family: var(--lp-serif);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.45;
  color: var(--lp-ink);
}

/* The capabilities are what Orcheum engages — they are not peers of it, and
   synthesis is not one of them: it is the answer they become (Ch. 4.3). */
.lp-proof__engaged { margin: 28px 0; }

.lp-proof__steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.lp-proof__steps li {
  font-size: 15px;
  color: var(--lp-ink-soft);
  opacity: 1;
}

html.lp-js .lp-proof__steps li {
  opacity: 0.3;
  transform: translateY(4px);
  transition: opacity 0.5s var(--lp-ease), transform 0.5s var(--lp-ease);
}
html.lp-js .lp-proof.is-active .lp-proof__steps li.is-on { opacity: 1; transform: none; }

.lp-proof__steps li strong {
  font-family: var(--lp-serif);
  font-weight: 700;
  color: var(--lp-ink);
  margin-right: 0.35em;
}

.lp-proof__result {
  padding-top: 18px;
  border-top: 1px solid rgba(129, 73, 59, 0.1);
  opacity: 1;
}

html.lp-js .lp-proof__result {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.55s var(--lp-ease), transform 0.55s var(--lp-ease);
}
html.lp-js .lp-proof .lp-proof__result.is-on { opacity: 1; transform: none; }

/* ══ Movements 5 & 7 — Dark pauses · Figma frames “6” and “7” ═════════════ */
.lp-pause {
  /* The frames carry a faint faceted light across the dark field */
  background:
    linear-gradient(114deg, rgba(255, 255, 255, 0.022) 0%, transparent 38%),
    linear-gradient(292deg, rgba(255, 255, 255, 0.018) 0%, transparent 42%),
    var(--lp-dark);
  color: var(--lp-ivory-on-dark);
  min-height: min(52vh, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(80px, 13vh, 132px) 24px;
}

.lp-pause p {
  margin: 0;
  font-family: var(--lp-sans);
  font-size: clamp(24px, 3.6vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  font-weight: 400;
  color: var(--lp-ivory-on-dark);
}

.lp-pause .mute { color: rgba(254, 242, 233, 0.62); }
.lp-pause .joy {
  font-family: var(--lp-serif);
  font-style: italic;
  color: var(--lp-ivory-on-dark);
}

.lp-pause--tactile p {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
  font-size: clamp(22px, 3.2vw, 38px);
}

/* ══ Movement 6 — Studios ═════════════════════════════════════════════════ */
.lp-studios {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: min(54vh, 520px);
}

.lp-studios__copy h2 {
  font-size: clamp(34px, 4.4vw, 54px);
  letter-spacing: -0.035em;
}

.lp-studios__places {
  margin: 26px 0 0;
  font-family: var(--lp-serif);
  font-size: clamp(15px, 1.3vw, 17px);
  letter-spacing: -0.01em;
  color: var(--lp-ink-mute);
}

/* Rembrandt, The Shell (1650) — a single form with many chambers, which is
   what a Studio is. Given as a real plate: framed, printed, sitting on the
   page rather than ghosted into it. */
.lp-studios__art {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  /* Warm parchment ground that sits harmoniously on the ivory page */
  background: #f2ebdc;
  box-shadow: 0 12px 44px rgba(70, 40, 24, 0.12);
}

.lp-studios__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The only plate sitting on its own ground, so it is the only one that
     can show a gap when parallax shifts it. 18% covers ±26px at every width. */
  --pbleed: 1.18;
  /* Warm the ink lines into the page's own ink tone */
  filter: sepia(0.24) contrast(1.06) brightness(1.02);
  /* Integrated transparent line-art treatment: blend naturally, soft opacity, and radial vignette fade */
  mix-blend-mode: multiply;
  opacity: 0.82;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 52%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 52%, transparent 90%);
}

/* ══ Movement 8 — The mark · Figma frames “3” + “5” ═══════════════════════ */
.lp-brandmoment {
  padding: clamp(120px, 20vh, 220px) 0 clamp(72px, 10vh, 110px);
  overflow: clip;
}

.lp-brandmoment__inner { text-align: center; }

.lp-brandmoment__over {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.01em;
  color: var(--lp-ink-mute);
}

.lp-brandmoment__mark {
  position: relative;
  isolation: isolate;          /* own stacking context, so the bloom can sit behind */
  margin: clamp(12px, 1.6vw, 20px) 0 0;
  font-family: var(--lp-serif);
  font-weight: 700;
  font-size: clamp(52px, 9vw, 132px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

/* The wordmark carries the warm gradient (Figma 4:244). The clip lives on the
   inner span so the bloom can be layered beneath the letterforms. */
.lp-brandmoment__mark .lp-mask {
  position: relative;
  z-index: 1;
}

.lp-brandmoment__mark .lp-mask__in {
  background: linear-gradient(96deg, #c2551a 0%, #f6984a 42%, #ffb264 58%, #c2551a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* A light source behind the wordmark — never a ring on the Sun (7.6). */
.lp-bloom {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 1.5em;
  height: 1.5em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 252, 244, 1) 0%,
    rgba(255, 233, 190, 0.82) 24%,
    rgba(255, 206, 140, 0.34) 48%,
    rgba(255, 196, 120, 0) 72%
  );
  pointer-events: none;
  z-index: 0;
}

html.lp-js .lp-bloom {
  opacity: 0;
  transition: opacity 1.4s var(--lp-ease) 0.3s;
}
html.lp-js .lp-brandmoment__mark.is-in .lp-bloom { opacity: 1; }

.lp-brandmoment__form {
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  font-family: var(--lp-sans);
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing: -0.025em;
  color: var(--lp-ink-soft);
}

/* ══ Movement 9 — Finale ══════════════════════════════════════════════════ */
.lp-final {
  text-align: center;
  padding: clamp(56px, 8vh, 88px) 0 clamp(88px, 12vh, 120px);
}

.lp-final__title {
  margin: 0;
  font-family: var(--lp-serif);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

/* ── “The center h●lds.” ──────────────────────────────────────────────────
   The lowercase o gives way to the Sun. The letter itself stays in the DOM,
   so the heading still reads “The center holds.” to assistive tech, and the
   advance width is unchanged — baseline and kerning never move. */
.lp-holds {
  position: relative;
  display: inline-block;
}

.lp-holds__o { transition: opacity 0.6s var(--lp-ease); }

.lp-holds__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: 0.125em;             /* line box centre → x-height centre */
  width: 0.48em;
  height: 0.48em;
  transform: translate(-50%, -50%);
  background: url("../assets/icons/logo-orcheum.svg") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--lp-ease);
}

.lp-final__title.is-held .lp-holds__o { opacity: 0; }
.lp-final__title.is-held .lp-holds__dot { opacity: 1; }

/* One breath, then stillness. Never loops. */
@keyframes lp-holds-settle {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.06); }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-final__title.is-held .lp-holds__dot {
    animation: lp-holds-settle 1.1s var(--lp-ease) 0.62s 1 both;
  }
}

.lp-final__lede {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* The line lands, then a long breath, then the only thing left to do. */
.lp-final__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 8vh, 88px);
}

/* ══ Footer ═══════════════════════════════════════════════════════════════ */
.lp-footer {
  border-top: 1px solid rgba(129, 73, 59, 0.1);
  padding: 28px 0 40px;
  color: var(--lp-ink-mute);
  font-size: 13px;
}

.lp-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lp-footer nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* WCAG 2.2 target size — the links carry their own 24px of height */
.lp-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: 4px;
}

.lp-footer__sep { opacity: 0.55; }
.lp-footer a:hover { color: var(--lp-ink); }

/* ══ Responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .lp-overture { min-height: 0; }
  .lp-stage { width: 100%; }

  .lp-overture__title { font-size: clamp(40px, 8.4vw, 64px); max-width: none; }

  .lp-redefine__grid,
  .lp-studios {
    grid-template-columns: 1fr;
  }

  /* Narrow: the bouquet centres behind the type instead of blooming right,
     and drops in opacity so the heading stays the strongest thing on screen */
  .lp-orch__copy { max-width: none; }
  .lp-orch__plate {
    width: min(520px, 94vw);
    transform: translate(-50%, -6%);
  }
  .lp-orch__plate img {
    opacity: 0.3;
    mask-image: radial-gradient(ellipse 70% 52% at 50% 40%, #000 24%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 52% at 50% 40%, #000 24%, transparent 72%);
  }

  .lp-redefine__art {
    max-height: 320px;
    margin: 0 auto;
    order: -1;
  }

  .lp-reach__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 48px);
    text-align: center;
  }
  .lp-reach__half--l,
  .lp-reach__half--r { text-align: center; padding-top: 0; }
  .lp-reach__glyph { margin-inline: auto; width: max-content; }

  .lp-studios__art {
    order: -1;
    max-width: 420px;
    margin: 0 auto;          /* centre the plate once the column collapses */
  }

  /* The bouquet steps back so the copy over it stays readable */
  .lp-orch__plate img { opacity: 0.12; }
}

@media (max-width: 640px) {
  .lp-shell,
  .lp-nav,
  .lp-overture__inner { width: calc(100% - 32px); }

  .lp-brand { font-size: 20px; }
  .lp-brand__mark { width: 18px; height: 18px; }

  .lp-nav { gap: 12px; }
  .lp-nav__actions { gap: 0; flex-wrap: nowrap; }
  /* Touch targets grow on mobile, never shrink */
  .lp-btn--ghost { padding-inline: 10px; font-size: 13px; min-height: 44px; }
  .lp-btn--primary { padding-inline: 14px; min-height: 44px; margin-left: 2px; }

  /* Same locked height as every other breakpoint — no handoff jump */
  .lp-brandfield { padding-inline: 22px; }

  /* The 16px iOS-zoom floor now lives in the component itself, so the host
     no longer patches it here. */

  .lp-overture__title { font-size: clamp(36px, 11vw, 52px); }
  .lp-section { padding: clamp(76px, 12vh, 120px) 0; }
  .lp-pause { min-height: min(40vh, 340px); }
  .lp-brandmoment { padding: clamp(88px, 14vh, 140px) 0; }

  /* Tight tracking is an editorial choice, not a mobile one */
  .lp-refrain__soft,
  .lp-refrain__hard,
  .lp-redefine__more { letter-spacing: -0.08em; }

  .lp-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══ Narrow phones ════════════════════════════════════════════════════════
   Four tabs plus the lockup no longer fit on a 375px row, and the actions are
   deliberately `nowrap` — so something has to give. It is the wordmark, not
   the navigation: the Sun stays, the link keeps its accessible name, and every
   tab keeps its 44px target and 13px size rather than being shrunk toward
   illegibility. Above this width the header is untouched. */
@media (max-width: 430px) {
  .lp-brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .lp-nav { gap: 8px; }
}

/* ══ Print ════════════════════════════════════════════════════════════════
   Reveal-on-scroll never fires on a printed page, so the whole story is
   restored to its resting state. */
@media print {
  html.lp-js .lp-reveal,
  html.lp-js .lp-mask__in,
  html.lp-js .lp-header,
  html.lp-js .lp-composer-host,
  html.lp-js .lp-overture__title .lp-sun,
  html.lp-js .lp-overture__support,
  html.lp-js .lp-redefine__stack > span,
  html.lp-js .lp-bloom,
  html.lp-js .lp-proof__steps li,
  html.lp-js .lp-proof__result {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    clip-path: none !important;
  }
  html.lp-js .lp-strike__rule { transform: scaleX(1) !important; }
  /* The brand reveal is a screen moment; print gets the real composer only. */
  .lp-brandfield, .lp-scroll-hint { display: none !important; }
}

/* ══ Reduced motion ═══════════════════════════════════════════════════════
   Motion degrades to instant, meaning-preserving state. Every element that
   the choreography hides must be restored here.                            */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.lp-js .lp-reveal,
  html.lp-js .lp-mask__in,
  html.lp-js .lp-header,
  html.lp-js .lp-brandfield__typed,
  html.lp-js .lp-brandfield__caret,
  html.lp-js .lp-overture__title .lp-sun,
  html.lp-js .lp-overture__support,
  html.lp-js .lp-scroll-hint,
  html.lp-js .lp-redefine__stack > span,
  html.lp-js .lp-bloom,
  html.lp-js .lp-proof__steps li,
  html.lp-js .lp-proof__result {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    clip-path: none !important;
  }

  /* No brand reveal at all. Hidden from first paint — not after a deferred
     script runs — so there is no flash of the "O" before the handoff. */
  html.lp-js .lp-brandfield { display: none !important; }
  html.lp-js .lp-composer-host {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }

  html.lp-js .lp-strike__rule {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  /* The dot is simply already there — discovered, not performed */
  .lp-holds__o { opacity: 0 !important; }
  .lp-holds__dot {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }

  [data-parallax] img { transform: none !important; }
}