/* =========================================================
   TBC — Cinematic layer + Running Rail (marquee) system
   Loaded last. Purely additive.
   ========================================================= */

/* ---------- 0. Split-word reveal fix (no clipped glyphs) ---------- */
.scroll-luxe .sl-w{
  line-height:1.06;
  padding:.10em .02em .18em;
  margin-bottom:-.16em;
}

/* ---------- 1. CINEMATIC GRADE ---------- */
:root{
  --cine-warm: rgba(253,155,21,.14);
  --cine-cool: rgba(74,163,255,.10);
}

/* Fixed vignette + subtle anamorphic bloom over the whole film frame */
.cine-vignette{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 42%, transparent 42%, rgba(0,0,0,.42) 88%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 16%, transparent 84%, rgba(0,0,0,.45));
  mix-blend-mode:multiply;
  opacity:.9;
}
.cine-bloom{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 12% 18%, var(--cine-warm), transparent 68%),
    radial-gradient(42vw 42vw at 88% 78%, var(--cine-cool), transparent 70%);
  filter:blur(30px);
  opacity:.55;
}

/* Letterbox bars — they retract after the film "starts" */
.cine-bar{
  position:fixed; left:0; right:0; height:9vh; z-index:9996; pointer-events:none;
  background:#000;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.cine-bar.top{ top:0; transform:translateY(0); }
.cine-bar.bottom{ bottom:0; transform:translateY(0); }
.cine-rolling .cine-bar.top{ transform:translateY(-100%); }
.cine-rolling .cine-bar.bottom{ transform:translateY(100%); }

/* Cinematic hero — slow push-in on the frame */
.page-hero-bg img, .hero-bg img{
  animation:cineDrift 26s ease-in-out infinite alternate;
}
@keyframes cineDrift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{ transform:scale(1.14) translate3d(-1.2%, -1.4%, 0); }
}

/* Aperture reveal on framed media */
.cine-armed .cine-reveal{ clip-path:inset(0 0 100% 0); opacity:0; }
.cine-armed .cine-reveal.is-in{
  clip-path:inset(0 0 0% 0); opacity:1;
  transition:clip-path 1.25s cubic-bezier(.16,1,.3,1), opacity .9s ease;
}

/* Widescreen framing for editorial media */
.img-frame{ box-shadow:0 40px 90px -50px rgba(0,0,0,.95); }
.img-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.28), transparent 38%, transparent 62%, rgba(0,0,0,.42));
}

/* Headline light-leak */
.page-hero h1, .foot-cta h2{ text-shadow:0 0 60px rgba(253,155,21,.12); }

/* ---------- 2. RUNNING RAIL (per-page marquee band) ---------- */
.rail{
  position:relative; overflow:hidden; isolation:isolate;
  padding:22px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 55%),
    var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  --rail-accent:var(--orange);
}
.rail[data-accent="cyan"]{ --rail-accent:var(--cyan); }
.rail[data-accent="gold"]{ --rail-accent:var(--orange-soft); }

.rail::before, .rail::after{
  content:""; position:absolute; top:0; bottom:0; width:min(22vw,240px); z-index:3; pointer-events:none;
}
.rail::before{ left:0;  background:linear-gradient(90deg, var(--bg) 6%, transparent); }
.rail::after { right:0; background:linear-gradient(270deg, var(--bg) 6%, transparent); }

.rail-row{ overflow:hidden; white-space:nowrap; }
.rail-row + .rail-row{ margin-top:12px; }
.rail-track{ display:inline-flex; align-items:center; gap:0; will-change:transform; }

.rail-item{
  display:inline-flex; align-items:center; gap:14px;
  padding:0 34px;
  font-family:'Clash Display',sans-serif;
  font-size:clamp(15px,2.1vw,30px); font-weight:600;
  letter-spacing:.01em; text-transform:uppercase;
  color:rgba(244,241,235,.30);
  transition:color .45s var(--ease), opacity .45s var(--ease);
}
.rail-item i{ font-style:normal; font-size:.42em; color:var(--rail-accent); opacity:.85; transform:translateY(-.15em); }
.rail-item em{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400; text-transform:none;
  color:var(--rail-accent); letter-spacing:0;
}
.rail-item b{ color:rgba(244,241,235,.86); font-weight:600; }
.rail-item small{
  font-family:'Inter',sans-serif; font-size:.38em; font-weight:500;
  letter-spacing:.22em; color:rgba(244,241,235,.34); text-transform:uppercase;
}

/* Outline row — the counter-running line reads as a film credit strip */
.rail-row.is-alt .rail-item{
  font-size:clamp(13px,1.4vw,20px);
  color:transparent;
  -webkit-text-stroke:1px rgba(244,241,235,.28);
}
.rail-row.is-alt .rail-item b{ -webkit-text-stroke:1px var(--rail-accent); color:transparent; }
.rail-row.is-alt .rail-item em, .rail-row.is-alt .rail-item small{ -webkit-text-stroke:0; }

/* Hover slows the reel and lights it up */
.rail:hover .rail-item{ color:rgba(244,241,235,.62); }
.rail:hover .rail-row.is-alt .rail-item{ -webkit-text-stroke-color:rgba(253,155,21,.55); }

/* Compact variant for the footer strip */
.rail.rail-slim{ padding:14px 0; }
.rail.rail-slim .rail-item{ font-size:clamp(12px,1.1vw,15px); letter-spacing:.14em; font-weight:500; padding:0 26px; }

/* Hero rail sits inside the page flow with no chrome */
.rail.rail-bare{ background:transparent; border-bottom:none; }

@media (max-width:720px){
  .rail{ padding:16px 0; }
  .rail-row.is-alt{ display:none; }
  .cine-bar{ height:6vh; }
}

@media (prefers-reduced-motion: reduce){
  .rail-track{ animation:none !important; }
  .page-hero-bg img, .hero-bg img{ animation:none !important; }
  .cine-reveal{ clip-path:none; opacity:1; }
  .cine-bar{ display:none; }
}

/* ---------- 3. ABOUT page structure fixes ---------- */
.about-split{
  display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px); align-items:center; margin-top:clamp(40px,6vw,72px);
}
.about-split .img-frame{ aspect-ratio:4/5; border-radius:3px; }
.about-split-copy p{ max-width:52ch; font-size:16px; line-height:1.85; color:var(--text-mute); }
.about-split-copy p + p{ margin-top:18px; }
.about-split-copy .lead{
  font-family:'Fraunces',serif; font-style:italic; font-size:clamp(20px,2.2vw,28px);
  line-height:1.4; color:var(--text); max-width:22ch;
}
@media (max-width:900px){
  .about-split{ grid-template-columns:1fr; }
  .about-split .img-frame{ aspect-ratio:16/11; }
}