Sillage

import { SillageView } from "./sillage-view"

import "./sillage.css"

/* -------------------------------------------------------------------------
   SILLAGE — a night-blooming fragrance house on a scroll-scrubbed film.

   The 30s take runs dusk → deep night; its native warm grade is held cool
   and dark by fixed overlays so the whole thing reads as a night garden.
   The one orchestrated moment is a silver-jade bloom that swells behind the
   type as the night-jasmine beat reaches centre, then recedes. Below the
   film the page becomes a real fragrance house: the composition, the bottle,
   where the jasmine is grown, the rest of the house.

   A whole page, not a component: `.lmRoot` is the single wrapper every rule
   in sillage.css hangs off, so the sheet touches nothing else in the app.
   The film and the six stills ship as real bytes under /sillage/.
------------------------------------------------------------------------- */

export const metadata = {
  title: "Sillage — night-blooming eau de parfum",
  description:
    "A night-blooming botanical fragrance house on a scroll-scrubbed film: bergamot to night jasmine to oud, dusk into deep night.",
}

export default function SillagePage() {
  return <SillageView />
}

"use client"

import { useEffect, useRef, useState } from "react"

/* -------------------------------------------------------------------------
   SILLAGE — LUMEN view. LUMINESCENCE direction: botanical night.

   MECHANIC (reused from ../sillage/sillage-view.tsx, visual layer replaced):
   dependency-free native `video.currentTime` scrubbing eased by a
   requestAnimationFrame loop toward a scroll-derived target, CSS sticky
   stage, duration captured with the cached-load readyState guard, and a
   prefers-reduced-motion static fallback.

   The film runs 30s / dusk → deep night. Its native grade drifts warm/amber
   at the base beats; we hold it COOL and DARK with fixed overlays so the
   whole thing reads as a night garden.

   The signature is ONE orchestrated luminous moment: as the HEART beat
   (night jasmine) reaches center, a soft silver-jade radial glow blooms
   behind the type — a single reveal tied to the scrub position, peaking at
   mid-scroll then receding. Everything else is kept quiet and dark.
------------------------------------------------------------------------- */

type Beat = {
  key: string
  /* delicate italic descriptor, in place of a tracked-out caps eyebrow */
  note: string
  title: string
  body: string
  still: string
}

/* Copy is written, not lorem — the real arc of the fragrance, dusk into
   deep night: bergamot (first light) → night jasmine (the bloom, the
   emotional center) → oud & amber (the warm trail that lingers). */
const HERO = {
  wordmark: "sillage",
  tagline: "the trail a scent keeps in a room after you have gone",
  meta: "A night-blooming botanical. Eau de parfum, opened at dusk."
}

const BEATS: Beat[] = [
  {
    key: "top",
    note: "the first light",
    title: "Bergamot, cold-pressed",
    body: "Green rind and a thread of oil, bright for a breath before the dark takes it back.",
    still: "/sillage/still-2.jpg"
  },
  {
    key: "heart",
    note: "the bloom, opening in the dark",
    title: "Night jasmine",
    body: "Sambac unfurling in the warm hours, saffron drawn through it like a wire. The flower the night is named for.",
    still: "/sillage/still-3.jpg"
  },
  {
    key: "base",
    note: "what lingers",
    title: "Oud and amber",
    body: "Aged wood and resin kept low against the skin, the warmth that stays long after the flowers have gone quiet.",
    still: "/sillage/still-4.jpg"
  }
]

const CLOSING = {
  line: "What remains is the sillage.",
  cta: "read the composition"
}

/* ---- content below the film: the complete site ------------------------- *
   The scrub film is the ouverture. Once it releases, the page becomes a real
   fragrance house: the composition read plainly, the bottle you can buy, where
   the jasmine is grown, the rest of the house, and the ground matter. All of it
   holds the same night — deep ink, one silver-jade light, serif voice. */

/* the olfactory pyramid, stated as reference rather than re-narrated */
type Accord = { note: string; matter: string }
const COMPOSITION: { tier: string; accord: Accord[] }[] = [
  {
    tier: "Top",
    accord: [
      { note: "Bergamot", matter: "cold-pressed, Calabria" },
      { note: "Green mandarin", matter: "leaf and rind" }
    ]
  },
  {
    tier: "Heart",
    accord: [
      { note: "Sambac jasmine", matter: "night-picked, Grasse" },
      { note: "Saffron", matter: "a single thread" }
    ]
  },
  {
    tier: "Base",
    accord: [
      { note: "Oud", matter: "aged twelve years" },
      { note: "Amber", matter: "labdanum resin" },
      { note: "Musk", matter: "kept close to the skin" }
    ]
  }
]

const PRODUCT = {
  kicker: "Eau de parfum",
  name: "Sillage",
  subtitle: "No. 1 — Night Jasmine",
  copy:
    "A night-blooming botanical, composed to be opened at dusk. It wears close for the first hour, then leaves the room slowly — the trail it keeps is the point.",
  concentration: "24% · extrait strength",
  sizes: [
    { ml: "50 ml", price: "$220" },
    { ml: "100 ml", price: "$340" }
  ],
  cta: "add to bag",
  still: "/sillage/still-5.jpg"
}

const PROVENANCE = {
  note: "where it begins",
  title: "Picked in the dark, in Grasse",
  body:
    "Sambac jasmine gives up the most of itself in the hours before dawn, so it is harvested by hand between three and sunrise, while the flower is still open. It takes roughly eight thousand blossoms to draw a single gram of the absolute at the heart of this scent.",
  figure: "/sillage/still-6.jpg",
  stat: [
    { value: "8,000", label: "blossoms to the gram" },
    { value: "03:00", label: "harvest, before first light" },
    { value: "Grasse", label: "the only fields we use" }
  ]
}

type Companion = { name: string; note: string; mood: string; still: string }
const COLLECTION: Companion[] = [
  {
    name: "Brume",
    note: "No. 2 — Cold Morning",
    mood: "Iris and wet stone, the fog before the sun burns it off.",
    still: "/sillage/still-1.jpg"
  },
  {
    name: "Cendre",
    note: "No. 3 — After the Fire",
    mood: "Birch smoke and warm ash, the room once the flame is out.",
    still: "/sillage/still-4.jpg"
  },
  {
    name: "Sel",
    note: "No. 4 — Low Tide",
    mood: "Salt, driftwood and skin, the coast at the turn of the night.",
    still: "/sillage/still-2.jpg"
  }
]

const FOOTER = {
  statement: "A small house making night-blooming botanicals in Grasse.",
  columns: [
    { head: "Shop", links: ["The fragrance", "Discovery set", "Refills", "Gift cards"] },
    { head: "House", links: ["Our story", "The atelier", "Sourcing", "Journal"] },
    { head: "Care", links: ["Shipping", "Returns", "Contact", "Stockists"] }
  ],
  newsletterNote: "Word before each release. Nothing else.",
  fine: "© Sillage Parfums — Grasse & New York"
}

/** smoothstep — soft ends so the beats trade cleanly */
function smooth(t: number) {
  const x = Math.min(1, Math.max(0, t))
  return x * x * (3 - 2 * x)
}

export function SillageView() {
  const [reduced, setReduced] = useState(false)
  const [decided, setDecided] = useState(false)

  // detect prefers-reduced-motion after mount so SSR stays deterministic
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)")
    const apply = () => setReduced(mq.matches)
    apply()
    setDecided(true)
    mq.addEventListener?.("change", apply)
    return () => mq.removeEventListener?.("change", apply)
  }, [])

  if (decided && reduced) return <LumenStatic />
  return <LumenMotion />
}

/* ---- motion mode -------------------------------------------------------- */

function LumenMotion() {
  const stageRef = useRef<HTMLDivElement>(null)
  const videoRef = useRef<HTMLVideoElement>(null)
  const panelsRef = useRef<HTMLDivElement>(null)
  const bloomRef = useRef<HTMLDivElement>(null)
  const cueRef = useRef<HTMLDivElement>(null)

  const durationRef = useRef(0)
  const targetTimeRef = useRef(0)
  const rafRef = useRef(0)
  const runningRef = useRef(false)
  const idleFramesRef = useRef(0)

  useEffect(() => {
    const video = videoRef.current
    const stage = stageRef.current
    if (!video || !stage) return

    const captureDuration = () => {
      const d = video.duration
      if (Number.isFinite(d) && d > 0) durationRef.current = d
    }
    // GOTCHA: on a cached/fast load, loadedmetadata can fire before this
    // effect runs. Read readyState immediately as well as listening.
    if (video.readyState >= 1) captureDuration()
    video.addEventListener("loadedmetadata", captureDuration)

    /* one frame: ease currentTime toward the scroll target, then write the
       panel opacities and the single jasmine bloom from scroll position. */
    const tick = () => {
      const dur = durationRef.current
      const vh = window.innerHeight
      const rect = stage.getBoundingClientRect()
      const travel = rect.height - vh
      const progress = travel > 0 ? Math.min(1, Math.max(0, -rect.top / travel)) : 0

      // ---- video scrub (eased) ----
      if (dur > 0) {
        const target = Math.min(dur - 0.05, progress * dur)
        targetTimeRef.current = target
        const cur = video.currentTime
        const diff = target - cur
        if (Math.abs(diff) > 0.012) {
          const next = cur + diff * 0.18 // ease ~18% of the gap per frame
          if (video.readyState >= 1 && !video.seeking) {
            try {
              video.currentTime = Math.min(dur - 0.05, Math.max(0, next))
            } catch {
              /* seeking can throw mid-load; the next tick retries */
            }
          }
          idleFramesRef.current = 0
        } else {
          idleFramesRef.current += 1
        }
      }

      // ---- panels: hero, 3 beats, closing — crossfade on their centers ----
      // 5 panels across the scroll; the HEART panel sits dead center (0.5).
      const panels = panelsRef.current?.children
      if (panels) {
        const n = panels.length
        const seg = 1 / n
        for (let i = 0; i < panels.length; i++) {
          const el = panels[i] as HTMLElement
          const center = (i + 0.5) * seg
          const d = Math.abs(progress - center) / seg
          let o = 1 - smooth((d - 0.34) / 0.16)
          // hold the hero at the very top and the closing at the very bottom
          if (i === 0 && progress < center) o = 1
          if (i === n - 1 && progress > center) o = 1
          el.style.opacity = o.toFixed(3)
          el.style.transform = `translate3d(0, ${((1 - o) * 20).toFixed(1)}px, 0)`
          el.style.visibility = o < 0.01 ? "hidden" : "visible"
        }
      }

      // ---- THE signature: one luminous bloom, centered on the heart beat ----
      // Panels are [hero, top, heart, base, closing] → heart center = 2.5/5 = 0.5.
      // A single smooth hump peaks at 0.5 and falls away either side; the glow
      // exists (dim) at rest and swells to full exactly as jasmine opens.
      const bloom = bloomRef.current
      if (bloom) {
        const dist = Math.abs(progress - 0.5) / 0.24 // full within ~0.12 of center
        const hump = 1 - smooth(dist) // 1 at center → 0 by ~0.24 away
        const intensity = 0.14 + hump * 0.86 // never fully dark: a resting ember
        bloom.style.opacity = intensity.toFixed(3)
        bloom.style.transform = `translate(-50%, -50%) scale(${(0.82 + hump * 0.42).toFixed(3)})`
      }

      // ---- scroll cue fades once scrubbing begins ----
      if (cueRef.current) {
        cueRef.current.style.opacity = Math.max(0, 1 - progress * 9).toFixed(3)
      }

      if (idleFramesRef.current < 6) {
        rafRef.current = requestAnimationFrame(tick)
      } else {
        runningRef.current = false
      }
    }

    const kick = () => {
      idleFramesRef.current = 0
      if (!runningRef.current) {
        runningRef.current = true
        rafRef.current = requestAnimationFrame(tick)
      }
    }

    // paint the initial frame (progress 0) even before duration is known
    kick()
    // once metadata/first frame land, sync the film to the loaded scroll pos
    video.addEventListener("loadeddata", kick)

    window.addEventListener("scroll", kick, { passive: true })
    window.addEventListener("resize", kick)

    return () => {
      cancelAnimationFrame(rafRef.current)
      runningRef.current = false
      window.removeEventListener("scroll", kick)
      window.removeEventListener("resize", kick)
      video.removeEventListener("loadedmetadata", captureDuration)
      video.removeEventListener("loadeddata", kick)
    }
  }, [])

  return (
    <div className="lmRoot" id="top">
      <div className="lmStage" ref={stageRef}>
        <div className="lmSticky">
          <video
            className="lmVideo"
            ref={videoRef}
            src="/sillage/journey.mp4"
            poster="/sillage/poster.jpg"
            muted
            playsInline
            preload="auto"
            aria-hidden="true"
          />
          {/* grade the warm film COOL + DARK so it reads as night */}
          <div className="lmTint" aria-hidden="true" />
          <div className="lmDeepen" aria-hidden="true" />

          {/* the one luminous moment — a soft silver-jade bloom behind the type */}
          <div className="lmBloom" ref={bloomRef} aria-hidden="true" />

          <div className="lmPanels" ref={panelsRef}>
            <section className="lmPanel lmPanel--hero" aria-label="Sillage">
              <div className="lmPanelInner">
                <h1 className="lmWordmark">{HERO.wordmark}</h1>
                <p className="lmTagline">{HERO.tagline}</p>
                <p className="lmMeta">{HERO.meta}</p>
              </div>
            </section>

            {BEATS.map((b) => (
              <section
                className={`lmPanel lmPanel--${b.key}`}
                key={b.key}
                aria-label={b.title}
              >
                <div className="lmPanelInner">
                  <p className="lmNote">{b.note}</p>
                  <h2 className="lmTitle">{b.title}</h2>
                  <p className="lmBody">{b.body}</p>
                </div>
              </section>
            ))}

            <section className="lmPanel lmPanel--closing" aria-label="What remains">
              <div className="lmPanelInner">
                <p className="lmClosing">{CLOSING.line}</p>
                <a className="lmCta" href="#top">
                  {CLOSING.cta}
                </a>
              </div>
            </section>
          </div>

          <div className="lmCue" ref={cueRef} aria-hidden="true">
            <span className="lmCueWord">scroll into the dark</span>
            <span className="lmCueLine" />
          </div>
        </div>
      </div>

      <LumenSite />
    </div>
  )
}

/* ---- reduced-motion / static mode --------------------------------------
   No scrubbing, no rAF. The poster carries the hero; each beat is a still.
   The jasmine bloom is CSS-only here (does not depend on motion) so the
   signature still reads. */

function LumenStatic() {
  return (
    <div className="lmRoot lmRoot--static" id="top">
      <header className="lmHeroStatic">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img className="lmHeroStaticImg" src="/sillage/poster.jpg" alt="" />
        <div className="lmTint" aria-hidden="true" />
        <div className="lmDeepen" aria-hidden="true" />
        <div className="lmPanelInner lmHeroStaticInner">
          <h1 className="lmWordmark">{HERO.wordmark}</h1>
          <p className="lmTagline">{HERO.tagline}</p>
          <p className="lmMeta">{HERO.meta}</p>
        </div>
      </header>

      <div className="lmSections">
        {BEATS.map((b) => (
          <section
            className={`lmSection lmSection--${b.key}`}
            key={b.key}
            aria-label={b.title}
          >
            <figure className="lmSectionFig">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={b.still} alt={`${b.title}, ${b.note}`} loading="lazy" decoding="async" />
              <span className="lmSectionGrade" aria-hidden="true" />
              {/* the heart keeps its bloom, CSS-only, so the signature survives */}
              {b.key === "heart" ? <span className="lmBloom lmBloom--static" aria-hidden="true" /> : null}
            </figure>
            <div className="lmSectionText">
              <p className="lmNote">{b.note}</p>
              <h2 className="lmTitle">{b.title}</h2>
              <p className="lmBody">{b.body}</p>
            </div>
          </section>
        ))}
      </div>

      <section className="lmClosingStatic" aria-label="What remains">
        <p className="lmClosing">{CLOSING.line}</p>
        <a className="lmCta" href="#composition">
          {CLOSING.cta}
        </a>
      </section>

      <LumenSite />
    </div>
  )
}

/* ---- the complete site, below the hero (shared by both modes) ----------- *
   These sections scroll normally after the cinematic opening. They keep the
   night — deep ink ground, one silver-jade accent, Fraunces/Instrument serifs —
   and spend no second bold moment: no cards, no shadows, no numbered chrome,
   just graded imagery, generous space, and the type doing the work. */

function LumenSite() {
  return (
    <div className="lmSite">
      {/* THE COMPOSITION — the pyramid, read plainly, not re-narrated */}
      <section className="lmComposition" id="composition" aria-label="The composition">
        <div className="lmCompHead">
          <p className="lmNote">how it is built</p>
          <h2 className="lmCompTitle">The composition</h2>
        </div>
        <ol className="lmPyramid">
          {COMPOSITION.map((tier) => (
            <li className="lmTier" key={tier.tier}>
              <span className="lmTierName">{tier.tier}</span>
              <div className="lmTierNotes">
                {tier.accord.map((a) => (
                  <p className="lmAccord" key={a.note}>
                    <span className="lmAccordNote">{a.note}</span>
                    <span className="lmAccordMatter">{a.matter}</span>
                  </p>
                ))}
              </div>
            </li>
          ))}
        </ol>
      </section>

      {/* THE BOTTLE — the object you can buy. Graded still, price as quiet
          text, a hairline CTA — no e-commerce card. */}
      <section className="lmProduct" id="fragrance" aria-label={PRODUCT.name}>
        <figure className="lmProductFig">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={PRODUCT.still}
            alt="Sillage No. 1, Night Jasmine — the bottle at dusk"
            loading="lazy"
            decoding="async"
          />
          <span className="lmSectionGrade" aria-hidden="true" />
        </figure>
        <div className="lmProductText">
          <p className="lmNote">{PRODUCT.kicker}</p>
          <h2 className="lmProductName">{PRODUCT.name}</h2>
          <p className="lmProductSub">{PRODUCT.subtitle}</p>
          <p className="lmProductCopy">{PRODUCT.copy}</p>
          <p className="lmProductConc">{PRODUCT.concentration}</p>
          <div className="lmPrices">
            {PRODUCT.sizes.map((s) => (
              <p className="lmPrice" key={s.ml}>
                <span className="lmPriceMl">{s.ml}</span>
                <span className="lmPriceValue">{s.price}</span>
              </p>
            ))}
          </div>
          <button className="lmBuy" type="button">
            {PRODUCT.cta}
          </button>
        </div>
      </section>

      {/* PROVENANCE — where the jasmine comes from. Full-bleed graded still,
          text over the deepened frame, three quiet figures. */}
      <section className="lmProvenance" aria-label={PROVENANCE.title}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          className="lmProvImg"
          src={PROVENANCE.figure}
          alt=""
          aria-hidden="true"
          loading="lazy"
          decoding="async"
        />
        <div className="lmTint" aria-hidden="true" />
        <div className="lmProvScrim" aria-hidden="true" />
        <div className="lmProvInner">
          <p className="lmNote">{PROVENANCE.note}</p>
          <h2 className="lmProvTitle">{PROVENANCE.title}</h2>
          <p className="lmProvBody">{PROVENANCE.body}</p>
          <dl className="lmStats">
            {PROVENANCE.stat.map((s) => (
              <div className="lmStat" key={s.label}>
                <dt className="lmStatValue">{s.value}</dt>
                <dd className="lmStatLabel">{s.label}</dd>
              </div>
            ))}
          </dl>
        </div>
      </section>

      {/* THE HOUSE — companion scents, an editorial list, not a card grid.
          Each is a full-width row: large graded still, name in serif. */}
      <section className="lmCollection" id="house" aria-label="The house">
        <div className="lmCollHead">
          <p className="lmNote">the rest of the house</p>
          <h2 className="lmCompTitle">Four scents, one night</h2>
        </div>
        <ul className="lmCompanions">
          {COLLECTION.map((c) => (
            <li className="lmCompanion" key={c.name}>
              <a className="lmCompanionLink" href="#fragrance">
                <figure className="lmCompanionFig">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={c.still}
                    alt={`${c.name} — ${c.note}`}
                    loading="lazy"
                    decoding="async"
                  />
                  <span className="lmSectionGrade" aria-hidden="true" />
                </figure>
                <div className="lmCompanionText">
                  <p className="lmNote">{c.note}</p>
                  <h3 className="lmCompanionName">{c.name}</h3>
                  <p className="lmCompanionMood">{c.mood}</p>
                  <span className="lmCompanionCue" aria-hidden="true">
                    smell it
                  </span>
                </div>
              </a>
            </li>
          ))}
        </ul>
      </section>

      {/* FOOTER — brand ground matter and the one form on the page */}
      <footer className="lmFooter" aria-label="Footer">
        <div className="lmFootTop">
          <div className="lmFootBrand">
            <span className="lmFootMark">sillage</span>
            <p className="lmFootStatement">{FOOTER.statement}</p>
          </div>
          <nav className="lmFootNav">
            {FOOTER.columns.map((col) => (
              <div className="lmFootCol" key={col.head}>
                <p className="lmFootHead">{col.head}</p>
                <ul>
                  {col.links.map((l) => (
                    <li key={l}>
                      <a href="#fragrance">{l}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </div>

        <form
          className="lmSignup"
          aria-label="Release notices"
          onSubmit={(e) => e.preventDefault()}
        >
          <label className="lmSignupLabel" htmlFor="lm-email">
            {FOOTER.newsletterNote}
          </label>
          <div className="lmSignupRow">
            <input
              id="lm-email"
              className="lmSignupInput"
              type="email"
              inputMode="email"
              autoComplete="email"
              placeholder="your email"
            />
            <button className="lmSignupBtn" type="submit">
              join
            </button>
          </div>
        </form>

        <p className="lmFine">{FOOTER.fine}</p>
      </footer>
    </div>
  )
}

/* -------------------------------------------------------------------------
   SILLAGE — LUMEN. LUMINESCENCE direction: a botanical night, glowing.

   Everything is prefixed `lm` and scoped under `.lmRoot`. No rule here
   touches html, body, :root, or any bare element outside `.lmRoot`, and the
   background is set on `.lmRoot` only — so this shares the bare origin with
   its neighbours without either leaking.

   Boldness is spent in exactly ONE place: the silver-jade bloom that opens
   behind the jasmine heart. Everything else is deep, cool and still.
------------------------------------------------------------------------- */

.lmRoot {
  /* --- palette: deep ink-blue night + a single luminous silver-jade --- */
  --lm-void: #080d14; /* deep ink-blue black — the night */
  --lm-void-2: #0b121c; /* a half-tone up, for section seams */
  --lm-jade: #bfe3d0; /* the one accent — moonlit silver-jade */
  --lm-jade-soft: rgba(191, 227, 208, 0.5);
  --lm-ivory: #f2efe6; /* luminous ivory — the type */
  --lm-ivory-dim: rgba(242, 239, 230, 0.72);
  --lm-ivory-faint: rgba(242, 239, 230, 0.46);

  /* grading layers used to hold the warm film cool + dark */
  --lm-tint: #0a2230; /* cool teal-blue wash over the film */
  --lm-sink: 4, 8, 14; /* rgb of near-void, for scrims */

  --lm-gut: clamp(1.35rem, 6vw, 4rem);
  --lm-measure: 40ch;

  box-sizing: border-box;
  min-height: 100vh;
  background: var(--lm-void);
  color: var(--lm-ivory);
  color-scheme: dark;
  font-family: var(--font-geist), "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lmRoot *,
.lmRoot *::before,
.lmRoot *::after {
  box-sizing: inherit;
}

.lmRoot :where(h1, h2, h3, p, figure, figcaption) {
  margin: 0;
}

.lmRoot :where(a) {
  color: inherit;
  text-decoration: none;
}

.lmRoot :where(a):focus-visible,
.lmRoot :where(video):focus-visible {
  outline: 2px solid var(--lm-jade);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------- *
   MOTION MODE — sticky stage, scroll-scrubbed film
 * --------------------------------------------------------------------- */

/* 5 panels across the scroll → ~520vh, inside the 450–550vh brief */
.lmStage {
  position: relative;
  height: 520vh;
}

.lmSticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--lm-void);
}

/* the film, full-bleed. Its native grade drifts warm/amber; we darken and
   desaturate it here, then recolour it cool with the tint layer above. */
.lmVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.66) saturate(0.5) contrast(1.06);
}

/* GRADE 1 — a cool teal-blue wash. `color` blend takes this layer's hue over
   the (now desaturated) film, pulling the whole frame toward night. */
.lmTint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #0c2b3a 0%, #0a1f30 48%, #081524 100%);
  mix-blend-mode: color;
  opacity: 0.62;
  pointer-events: none;
}

/* GRADE 2 — sink the frame into the void: a soft central veil for type
   legibility, deepening hard to near-black at the edges. */
.lmDeepen {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(
      130% 100% at 50% 42%,
      rgba(var(--lm-sink), 0.28) 0%,
      rgba(var(--lm-sink), 0.52) 52%,
      rgba(var(--lm-sink), 0.86) 100%
    ),
    linear-gradient(180deg, rgba(var(--lm-sink), 0.5) 0%, rgba(var(--lm-sink), 0) 26%);
  pointer-events: none;
}

/* THE SIGNATURE — one luminous bloom. Silver-jade radial light that swells
   behind the type as the jasmine heart opens. `screen` adds light to the
   night; JS drives opacity + scale from the scrub position. */
.lmBloom {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 3;
  width: min(150vh, 148vw);
  height: min(150vh, 148vw);
  transform: translate(-50%, -50%) scale(0.82);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(191, 227, 208, 0.9) 0%,
    rgba(160, 214, 196, 0.42) 24%,
    rgba(120, 180, 180, 0.16) 46%,
    rgba(80, 140, 160, 0.05) 62%,
    rgba(8, 13, 20, 0) 74%
  );
  mix-blend-mode: screen;
  filter: blur(14px);
  opacity: 0.12;
  pointer-events: none;
  will-change: opacity, transform;
}

/* panels, stacked and centred; JS crossfades them on their scroll centres */
.lmPanels {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.lmPanel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh var(--lm-gut) 14vh;
  will-change: opacity, transform;
  /* PRE-JS STATE — the fix for the pile-up. The scrub loop assigns each
     panel's opacity from scroll position, but until it first runs (SSR'd
     markup, the paint before hydration, a resting preview frame) every panel
     would otherwise sit at its default opacity of 1 and stack on top of the
     hero. Start them hidden; the hero below overrides itself back to visible,
     so the resting state already matches scroll progress 0 — only "sillage"
     shows, and JS takes it from there. */
  opacity: 0;
  visibility: hidden;
}

/* the hero is the one panel visible at rest (progress 0), so it is the one
   panel that opts back in before the scrub loop touches anything */
.lmPanel--hero {
  opacity: 1;
  visibility: visible;
}

.lmPanelInner {
  width: 100%;
  max-width: var(--lm-measure);
  text-align: center;
}

/* --- hero --- */
.lmWordmark {
  font-family: var(--font-fraunces), Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 330;
  font-size: clamp(3.6rem, 17vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--lm-ivory);
  /* legibility over film — a faint luminous halo, not decoration */
  text-shadow: 0 1px 60px rgba(191, 227, 208, 0.14), 0 2px 30px rgba(var(--lm-sink), 0.6);
}

.lmTagline {
  margin-top: clamp(1.1rem, 2.4vw, 1.9rem);
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: 0.002em;
  color: var(--lm-ivory);
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(var(--lm-sink), 0.7);
}

.lmMeta {
  margin-top: clamp(1.6rem, 3.4vw, 2.6rem);
  font-size: clamp(0.82rem, 1.5vw, 0.95rem);
  line-height: 1.6;
  color: var(--lm-ivory-faint);
  text-shadow: 0 1px 18px rgba(var(--lm-sink), 0.7);
}

/* --- beats (top / heart / base) --- */
.lmNote {
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2.3vw, 1.35rem);
  line-height: 1.4;
  color: var(--lm-jade);
  letter-spacing: 0.004em;
}

.lmTitle {
  margin-top: clamp(0.5rem, 1.4vw, 0.9rem);
  font-family: var(--font-fraunces), Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
  font-weight: 360;
  font-size: clamp(2.3rem, 8.5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--lm-ivory);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(var(--lm-sink), 0.6);
}

.lmBody {
  margin: clamp(1.1rem, 2.6vw, 1.7rem) auto 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.65;
  color: var(--lm-ivory-dim);
  text-wrap: pretty;
  text-shadow: 0 1px 22px rgba(var(--lm-sink), 0.72);
}

/* the heart title gets the light — a touch of the accent in its halo, in
   concert with the bloom behind it (the one bold moment) */
.lmPanel--heart .lmTitle {
  text-shadow: 0 0 46px rgba(191, 227, 208, 0.3), 0 2px 40px rgba(var(--lm-sink), 0.5);
}

/* --- closing --- */
.lmClosing {
  font-family: var(--font-fraunces), Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  font-weight: 340;
  font-size: clamp(1.9rem, 6.5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--lm-ivory);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(var(--lm-sink), 0.6);
}

.lmCta {
  display: inline-block;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  padding-bottom: 0.35rem;
  font-size: clamp(0.9rem, 1.7vw, 1rem);
  letter-spacing: 0.05em;
  color: var(--lm-jade);
  border-bottom: 1px solid var(--lm-jade-soft);
  transition: border-color 0.4s ease, color 0.4s ease;
}

.lmCta:hover {
  color: var(--lm-ivory);
  border-color: var(--lm-ivory);
}

/* --- scroll cue --- */
.lmCue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.6rem, 4vh, 3rem);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  color: var(--lm-ivory-faint);
  pointer-events: none;
}

.lmCueWord {
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: clamp(0.85rem, 1.6vw, 0.98rem);
  letter-spacing: 0.01em;
}

.lmCueLine {
  width: 1px;
  height: clamp(2.2rem, 6vh, 3.4rem);
  background: linear-gradient(180deg, var(--lm-jade-soft), rgba(191, 227, 208, 0));
}

/* --------------------------------------------------------------------- *
   REDUCED-MOTION / STATIC MODE — poster hero + stills, bloom preserved
 * --------------------------------------------------------------------- */

.lmHeroStatic {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh var(--lm-gut);
  overflow: hidden;
}

.lmHeroStaticImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.66) saturate(0.5) contrast(1.06);
}

.lmHeroStaticInner {
  position: relative;
  z-index: 4;
}

.lmSections {
  /* seams a half-tone up from the void so the sections breathe */
  background: linear-gradient(180deg, var(--lm-void) 0%, var(--lm-void-2) 50%, var(--lm-void) 100%);
}

.lmSection {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 9rem) var(--lm-gut);
  display: grid;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 820px) {
  .lmSection {
    grid-template-columns: 1fr 1fr;
  }
  .lmSection--heart {
    /* keep the heart image on the left so its bloom leads the eye */
    direction: ltr;
  }
}

.lmSectionFig {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
}

.lmSectionFig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) saturate(0.55) contrast(1.05);
}

.lmSectionGrade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0c2b3a 0%, #081524 100%);
  mix-blend-mode: color;
  opacity: 0.55;
  pointer-events: none;
}

/* the signature survives without motion: a CSS-only bloom on the heart still */
.lmBloom--static {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(191, 227, 208, 0.8) 0%,
    rgba(160, 214, 196, 0.36) 26%,
    rgba(120, 180, 180, 0.12) 48%,
    rgba(8, 13, 20, 0) 68%
  );
  mix-blend-mode: screen;
  filter: blur(10px);
  opacity: 1;
  pointer-events: none;
}

.lmSectionText {
  max-width: var(--lm-measure);
}

.lmSection .lmBody {
  margin-left: 0;
  margin-right: 0;
  text-shadow: none;
}

.lmSection .lmNote,
.lmSection .lmTitle,
.lmClosingStatic .lmClosing {
  text-shadow: none;
}

.lmClosingStatic {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 14vh, 10rem) var(--lm-gut);
}

/* ===================================================================== *
   THE COMPLETE SITE — sections below the hero, shared by both modes.
   Deep ink ground, one silver-jade light, serif voice. No cards, no
   shadows, no numbered chrome — graded imagery, space, and type.
 * ===================================================================== */

.lmSite {
  position: relative;
  z-index: 1;
  background: var(--lm-void);
}

/* shared section rhythm */
.lmSite section,
.lmSite footer {
  padding-inline: var(--lm-gut);
}

/* --- THE COMPOSITION — the pyramid, read plainly --- */
.lmComposition {
  max-width: 60rem;
  margin: 0 auto;
  padding-block: clamp(5rem, 16vh, 11rem);
  border-top: 1px solid rgba(191, 227, 208, 0.1);
}

.lmCompHead {
  margin-bottom: clamp(2.4rem, 6vh, 4.5rem);
}

.lmCompTitle {
  margin-top: clamp(0.5rem, 1.4vw, 0.9rem);
  font-family: var(--font-fraunces), Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  font-weight: 340;
  font-size: clamp(2.1rem, 6.5vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.014em;
  color: var(--lm-ivory);
  text-wrap: balance;
}

.lmPyramid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lmTier {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 2rem;
  padding-block: clamp(1.5rem, 4vh, 2.6rem);
  border-top: 1px solid rgba(242, 239, 230, 0.09);
}
.lmTier:last-child {
  border-bottom: 1px solid rgba(242, 239, 230, 0.09);
}

@media (min-width: 680px) {
  .lmTier {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
  }
}

.lmTierName {
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--lm-jade);
  letter-spacing: 0.004em;
}

.lmTierNotes {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.lmAccord {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
}

.lmAccordNote {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 40;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  color: var(--lm-ivory);
  letter-spacing: -0.008em;
}

.lmAccordMatter {
  font-size: clamp(0.86rem, 1.5vw, 0.98rem);
  color: var(--lm-ivory-faint);
  font-style: italic;
  font-family: var(--font-instrument), Georgia, serif;
}

/* --- THE BOTTLE — object + price + one buy action --- */
.lmProduct {
  max-width: 78rem;
  margin: 0 auto;
  padding-block: clamp(4rem, 12vh, 8rem);
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .lmProduct {
    grid-template-columns: 1fr 1fr;
  }
}

.lmProductFig {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
}

.lmProductFig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(0.55) contrast(1.05);
}

.lmProductName {
  margin-top: clamp(0.5rem, 1.4vw, 0.9rem);
  font-family: var(--font-fraunces), Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 330;
  font-size: clamp(3rem, 9vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--lm-ivory);
}

.lmProductSub {
  margin-top: 0.6rem;
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  color: var(--lm-jade);
}

.lmProductCopy {
  margin-top: clamp(1.3rem, 3vh, 2rem);
  max-width: 42ch;
  font-size: clamp(1rem, 1.9vw, 1.12rem);
  line-height: 1.65;
  color: var(--lm-ivory-dim);
  text-wrap: pretty;
}

.lmProductConc {
  margin-top: clamp(1rem, 2.4vh, 1.6rem);
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: clamp(0.9rem, 1.6vw, 1.02rem);
  color: var(--lm-ivory-faint);
}

.lmPrices {
  display: flex;
  gap: clamp(1.6rem, 4vw, 2.8rem);
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
}

.lmPrice {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lmPriceMl {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--lm-ivory-faint);
}

.lmPriceValue {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--lm-ivory);
}

/* the one buy action: hairline at rest, fills with light on hover */
.lmBuy {
  margin-top: clamp(1.8rem, 4.5vh, 2.8rem);
  padding: 0.85rem 2.2rem;
  font: inherit;
  font-size: clamp(0.9rem, 1.7vw, 1rem);
  letter-spacing: 0.05em;
  color: var(--lm-jade);
  background: transparent;
  border: 1px solid var(--lm-jade-soft);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.lmBuy:hover {
  background: var(--lm-jade);
  border-color: var(--lm-jade);
  color: var(--lm-void);
}

.lmBuy:focus-visible {
  outline: 2px solid var(--lm-jade);
  outline-offset: 4px;
}

/* --- PROVENANCE — full-bleed graded still, text over the frame --- */
.lmProvenance {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 20vh, 13rem);
  padding-inline: var(--lm-gut);
}

.lmProvImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.5) saturate(0.5) contrast(1.05);
}

/* reuse the cool tint; deepen for legibility */
.lmProvScrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 120% at 30% 50%, rgba(var(--lm-sink), 0.55) 0%, rgba(var(--lm-sink), 0.82) 70%),
    linear-gradient(90deg, rgba(var(--lm-sink), 0.7) 0%, rgba(var(--lm-sink), 0.1) 60%);
  pointer-events: none;
}

.lmProvInner {
  position: relative;
  z-index: 3;
  max-width: 46rem;
}

.lmProvTitle {
  margin-top: clamp(0.5rem, 1.4vw, 0.9rem);
  font-family: var(--font-fraunces), Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  font-weight: 340;
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.014em;
  color: var(--lm-ivory);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(var(--lm-sink), 0.6);
}

.lmProvBody {
  margin-top: clamp(1.2rem, 3vh, 1.9rem);
  max-width: 46ch;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.7;
  color: var(--lm-ivory-dim);
  text-wrap: pretty;
  text-shadow: 0 1px 22px rgba(var(--lm-sink), 0.7);
}

.lmStats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.8rem, 5vw, 3.4rem);
  margin: clamp(2.4rem, 6vh, 4rem) 0 0;
}

.lmStat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lmStatValue {
  font-family: var(--font-fraunces), Georgia, serif;
  font-variation-settings: "opsz" 72;
  font-weight: 350;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  line-height: 1;
  color: var(--lm-ivory);
}

.lmStatLabel {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: clamp(0.85rem, 1.5vw, 0.98rem);
  color: var(--lm-jade);
}

/* --- THE HOUSE — companion scents, editorial rows --- */
.lmCollection {
  max-width: 82rem;
  margin: 0 auto;
  padding-block: clamp(5rem, 16vh, 11rem);
}

.lmCollHead {
  margin-bottom: clamp(2.4rem, 7vh, 5rem);
}

.lmCompanions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 5vh, 3.2rem);
}

.lmCompanionLink {
  display: grid;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 4vh, 2.4rem);
  border-top: 1px solid rgba(242, 239, 230, 0.09);
}
.lmCompanion:last-child .lmCompanionLink {
  border-bottom: 1px solid rgba(242, 239, 230, 0.09);
}

@media (min-width: 760px) {
  .lmCompanionLink {
    grid-template-columns: 26rem 1fr;
  }
  /* alternate the image side for rhythm */
  .lmCompanion:nth-child(even) .lmCompanionFig {
    order: 2;
  }
}

.lmCompanionFig {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 2px;
}

.lmCompanionFig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.66) saturate(0.5) contrast(1.05);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s ease;
}

.lmCompanionLink:hover .lmCompanionFig img,
.lmCompanionLink:focus-visible .lmCompanionFig img {
  transform: scale(1.03);
  filter: brightness(0.78) saturate(0.62) contrast(1.05);
}

.lmCompanionName {
  margin-top: clamp(0.4rem, 1.2vw, 0.8rem);
  font-family: var(--font-fraunces), Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  font-weight: 336;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.016em;
  color: var(--lm-ivory);
}

.lmCompanionMood {
  margin-top: clamp(0.7rem, 1.8vh, 1.1rem);
  max-width: 40ch;
  font-size: clamp(0.98rem, 1.8vw, 1.1rem);
  line-height: 1.6;
  color: var(--lm-ivory-dim);
  text-wrap: pretty;
}

.lmCompanionCue {
  display: inline-block;
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
  padding-bottom: 0.25rem;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--lm-jade);
  border-bottom: 1px solid var(--lm-jade-soft);
  transition: border-color 0.4s ease, color 0.4s ease;
}
.lmCompanionLink:hover .lmCompanionCue,
.lmCompanionLink:focus-visible .lmCompanionCue {
  color: var(--lm-ivory);
  border-color: var(--lm-ivory);
}

/* --- FOOTER --- */
.lmFooter {
  border-top: 1px solid rgba(191, 227, 208, 0.12);
  padding-block: clamp(4rem, 12vh, 7rem);
  background: var(--lm-void-2);
}

.lmFootTop {
  max-width: 82rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(2.4rem, 6vw, 4rem);
}

@media (min-width: 780px) {
  .lmFootTop {
    grid-template-columns: 1.2fr 2fr;
  }
}

.lmFootMark {
  font-family: var(--font-fraunces), Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  font-weight: 330;
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: -0.02em;
  color: var(--lm-ivory);
}

.lmFootStatement {
  margin-top: 0.9rem;
  max-width: 34ch;
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.5;
  color: var(--lm-ivory-dim);
}

.lmFootNav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 4vw, 2.5rem);
}

@media (max-width: 520px) {
  .lmFootNav {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lmFootHead {
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--lm-jade);
  margin-bottom: 0.9rem;
}

.lmFootCol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lmFootCol a {
  font-size: 0.95rem;
  color: var(--lm-ivory-dim);
  transition: color 0.3s ease;
}
.lmFootCol a:hover {
  color: var(--lm-ivory);
}

.lmSignup {
  max-width: 82rem;
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  padding-top: clamp(2.4rem, 6vh, 3.6rem);
  border-top: 1px solid rgba(242, 239, 230, 0.09);
}

.lmSignupLabel {
  display: block;
  font-family: var(--font-instrument), Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--lm-ivory-dim);
  margin-bottom: 1.1rem;
}

.lmSignupRow {
  display: flex;
  gap: 0.75rem;
  max-width: 30rem;
  align-items: stretch;
}

.lmSignupInput {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 0;
  font: inherit;
  color: var(--lm-ivory);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(242, 239, 230, 0.24);
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.lmSignupInput::placeholder {
  color: var(--lm-ivory-faint);
}
.lmSignupInput:focus {
  outline: none;
  border-bottom-color: var(--lm-jade);
}

.lmSignupBtn {
  padding: 0 1.6rem;
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  color: var(--lm-jade);
  background: transparent;
  border: 1px solid var(--lm-jade-soft);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.lmSignupBtn:hover {
  background: var(--lm-jade);
  border-color: var(--lm-jade);
  color: var(--lm-void);
}
.lmSignupBtn:focus-visible {
  outline: 2px solid var(--lm-jade);
  outline-offset: 3px;
}

.lmFine {
  max-width: 82rem;
  margin: clamp(3rem, 8vh, 4.5rem) auto 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--lm-ivory-faint);
}

/* --------------------------------------------------------------------- *
   reduced motion: neutralise any transitions if this class tree is shown
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lmRoot * {
    transition: none !important;
    animation: none !important;
  }
}