/* LumaNorm Studio: page layout for the hero, chapters, media and finale. */
.luma-hero {
  --cinematic-progress: 0;
  --cinematic-visibility: 0;
  position: relative;
  padding: 0;
  overflow: clip;
  isolation: isolate;
}

.luma-hero-media,
.luma-hero-accent {
  position: absolute;
  inset: 0;
}

.luma-hero-media {
  z-index: 0;
}

.luma-cinematic-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #020406;
  transition: opacity var(--motion-medium) var(--ease-standard);
}

.luma-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.luma-hero-grid {
  position: relative;
  z-index: 3;
  min-height: inherit;
  display: grid;
  gap: 1.4rem;
}

.luma-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.68rem;
  min-height: 40px;
  color: rgba(247, 251, 255, 0.9);
}

.luma-hero-status-icon {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(186, 248, 255, 0.98), rgba(111, 231, 247, 0.9));
  box-shadow: 0 0 12px #93e9de70;
}

.luma-hero-status-label {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.luma-hero-title {
  margin: 0;
  align-items: baseline;
  max-width: 100%;
  white-space: nowrap;
  color: #fbfdff;
}

.luma-hero-title-word {
  display: inline-block;
}

.js .luma-hero-copy[data-reveal] .luma-hero-status,
.js .luma-hero-copy[data-reveal] .luma-hero-title-word {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition:
    opacity var(--motion-settle) ease,
    transform 0.76s cubic-bezier(0.22, 0.7, 0.14, 1),
    filter 0.82s ease;
}

.js .luma-hero-copy.is-visible .luma-hero-status,
.js .luma-hero-copy.is-visible .luma-hero-title-word {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.js .luma-hero-copy.is-visible .luma-hero-status {
  transition-delay: 0.02s;
}

.js .luma-hero-copy.is-visible .luma-hero-title-word:nth-of-type(1) {
  transition-delay: 0.08s;
}

.js .luma-hero-copy.is-visible .luma-hero-title-word:nth-of-type(2) {
  transition-delay: 0.18s;
}

.luma-hero-download {
  display: inline-flex;
  align-items: center;
}

.js .luma-hero-copy[data-reveal] .luma-hero-download {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition:
    opacity var(--motion-settle) ease,
    transform 0.76s cubic-bezier(0.22, 0.7, 0.14, 1),
    filter 0.82s ease;
}

.js .luma-hero-copy.is-visible .luma-hero-download {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition-delay: 0.54s;
}

.luma-hero-accent {
  inset: auto 0 0;
  height: 140px;
  background: linear-gradient(0deg, #030708, transparent);
  z-index: 2;
  pointer-events: none;
}

.theme-lumanorm :is(.luma-interface, .luma-multiframe, .luma-recipe, .luma-luts, .luma-analysis, .luma-create, .luma-export, .luma-performance, .luma-finale) {
  position: relative;
  overflow: clip;
}

/* The finale's light pools at its top edge. */
.theme-lumanorm .luma-finale::before {
  content: "";
  position: absolute;
  inset: 0 -12% auto -12%;
  height: min(18vw, 220px);
  background: radial-gradient(circle at 50% 8%, rgba(111, 231, 247, 0.05), transparent 36%);
  pointer-events: none;
  z-index: 0;
}

.theme-lumanorm :is(.luma-interface, .luma-multiframe, .luma-recipe, .luma-luts, .luma-analysis, .luma-create, .luma-export, .luma-performance, .luma-finale) > .container {
  position: relative;
  z-index: 1;
}

.luma-media-frame {
  margin: 0;
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}

.luma-media-frame img,
.luma-media-wide img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(16px, 1.7vw, 24px);
  box-shadow: none;
}

.luma-media-frame--soft img {
  opacity: 0.95;
}

.luma-media-wide {
  margin: 0;
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  isolation: isolate;
  margin-inline: clamp(-2.8rem, -4.4vw, -1rem);
}

.luma-media-rail {
  --luma-rail-column: clamp(18rem, 72vw, 43.75rem);
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--luma-rail-column);
  gap: clamp(1rem, 1.5vw, 1.35rem);
  align-items: stretch;
  margin: 0;
  padding: 0 var(--rail-edge-pad, clamp(1rem, 3vw, 2rem)) 1rem;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--rail-edge-pad, clamp(1rem, 3vw, 2rem));
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.luma-media-rail::-webkit-scrollbar {
  display: none;
}

.luma-media-rail > * {
  width: var(--luma-rail-column);
  min-width: var(--luma-rail-column);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.luma-media-rail .luma-media-wide {
  margin-inline: 0;
}

.luma-media-rail .luma-media-frame {
  display: flex;
  align-items: stretch;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  border-radius: clamp(20px, 1.9vw, 28px);
  background: transparent;
  box-shadow: none;
}

.luma-media-rail .luma-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.luma-media-rail--duo {
  --luma-rail-column: clamp(18rem, 70vw, 45rem);
}

.luma-media-rail--trio {
  --luma-rail-column: clamp(18rem, 68vw, 42.5rem);
}

.luma-media-rail--quad {
  --luma-rail-column: clamp(18rem, 66vw, 38.75rem);
}

.luma-media-rail--dense {
  --luma-rail-column: clamp(16rem, 52vw, 26.25rem);
}

.luma-interface-media,
.luma-multiframe-media {
  display: grid;
  gap: 1.35rem;
}

.luma-interface-media > :nth-child(2),
.luma-export-media > :nth-child(2) {
  margin-inline-start: 0;
}

.luma-multiframe-media > :nth-child(2) {
  margin-inline-end: 0;
}

.luma-multiframe-media > :nth-child(3) {
  margin-inline-start: 0;
}

.luma-recipe-stack,
.luma-depth-stack {
  display: grid;
  gap: 1.5rem;
}

.luma-video .luma-media-wide,
.luma-segmentation .luma-media-wide {
  margin-inline: 0;
}

.luma-recipe-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: none;
}

.luma-luts-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: none;
}

.luma-analysis-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: none;
}

.luma-export-media {
  display: grid;
  gap: 1.5rem;
}

.luma-create-stack {
  display: grid;
  gap: 1.5rem;
}

.luma-create-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: none;
}

.luma-finale-cta {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
}

.luma-document-grid {
  display: grid;
  gap: 1.2rem;
}

.luma-document-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.8rem;
  border-radius: 14px;
  border: 1px solid var(--luma-line);
  background: #0a1110;
  color: var(--color-ink);
  transition:
    translate var(--motion-settle) var(--ease-spring),
    border-color var(--motion-medium) var(--ease-standard),
    box-shadow var(--motion-medium) var(--ease-standard);
}

.luma-document-card h3 {
  margin: 0;
}

.luma-document-card p {
  margin: 0;
  color: var(--color-ink-muted);
}

/* Hover (fine pointers) and keyboard focus: the card lifts 2px on the spring and its hairline takes the study's
   light. The lift uses `translate`, so the shared press (`scale: .985`, main.css) composes with it. */
.luma-document-card:focus-visible {
  translate: 0 -2px;
  border-color: rgba(111, 231, 247, 0.45);
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.38);
}

@media (hover: hover) and (pointer: fine) {
  .luma-document-card:hover {
    translate: 0 -2px;
    border-color: rgba(111, 231, 247, 0.45);
    box-shadow: 0 30px 64px rgba(0, 0, 0, 0.38);
  }
}

@media (prefers-reduced-motion: reduce) {
  .luma-document-card:is(:hover, :focus-visible) {
    translate: none;
  }
}

.luma-document-card .text-link {
  width: fit-content;
}

.luma-document-type {
  margin: 0;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-accent);
  font-weight: 500;
}

.luma-legal .section-heading,
.luma-related .section-heading {
  max-width: 38rem;
}

.luma-legal .legal-link {
  background: linear-gradient(180deg, rgba(9, 15, 22, 0.78), rgba(7, 12, 18, 0.52));
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.luma-legal .legal-link:hover {
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
}

.luma-related .project-card {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
}

.luma-related .project-card:hover {
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .js .luma-hero-copy[data-reveal] .luma-hero-status,
  .js .luma-hero-copy[data-reveal] .luma-hero-title-word,
  .js .luma-hero-copy[data-reveal] .luma-hero-download {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

@media (max-width: 960px) {
  .luma-recipe-grid,
  .luma-luts-grid,
  .luma-analysis-grid,
  .luma-create-grid {
    grid-template-columns: 1fr;
  }

  .luma-interface-media > :nth-child(2),
  .luma-export-media > :nth-child(2),
  .luma-multiframe-media > :nth-child(2),
  .luma-multiframe-media > :nth-child(3) {
    margin-inline: 0;
  }

  .luma-media-rail {
    gap: clamp(0.95rem, 4vw, 1.15rem);
    margin-inline: 0;
    padding-inline: var(--rail-edge-pad, 0.9rem);
  }

  .luma-media-rail--duo,
  .luma-media-rail--trio,
  .luma-media-rail--quad {
    --luma-rail-column: clamp(17.5rem, 84vw, 26rem);
  }

  .luma-media-rail--dense {
    --luma-rail-column: clamp(15.5rem, 78vw, 21.5rem);
  }

  .luma-media-wide {
    margin-inline: 0;
  }

  .luma-interface-media,
  .luma-multiframe-media,
  .luma-export-media,
  .luma-create-grid {
    grid-template-columns: 1fr;
  }
}

/* LumaNorm: native scroll choreography and a bounded light study. */
.theme-lumanorm {
  --luma-header-height: 65px;
  --luma-chapter-height: 58px;
  --luma-sticky-top: calc(var(--luma-header-height) + var(--luma-chapter-height));
  --luma-paper: #edf2ee;
  --luma-muted: #a4b5b5;
  --luma-line: rgba(186, 213, 211, .16);
  --max-width: 1200px;
  background: #030708;
}
.theme-lumanorm main::before,
.theme-lumanorm main::after { display: none; }
.theme-lumanorm main > section { scroll-margin-top: calc(var(--luma-sticky-top) + 28px); }
/* Label tier (docs/styles.md): uppercase, 500, --text-label on --track-label. */
.theme-lumanorm .eyebrow {
  color: #a0c5c4;
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-shadow: none;
}
.theme-lumanorm .luma-hero {
  min-height: clamp(650px, calc(100svh - var(--luma-header-height)), 1040px);
  background: #030708;
}
.luma-hero .luma-hero-grid {
  align-items: end;
  padding-top: 12rem;
  padding-bottom: clamp(6rem, 12vh, 9rem);
}
.luma-hero .luma-hero-copy { max-width: 950px; }
.luma-hero .luma-hero-title {
  display: flex;
  flex-wrap: wrap;
  gap: .22em;
  font-weight: var(--display-weight);
  font-size: clamp(3.7rem, 7.25vw, 7rem);
  /* Fraunces' 144 optical size is already tight: at --track-display (-0.045em) u-m, a-N and r-m still touch in
     "LumaNorm", so both settings of the name use --track-title, the tightest tracking that keeps every join open. */
  letter-spacing: var(--track-title);
  font-kerning: normal;
  line-height: 1.02;
  text-shadow: 0 4px 34px #0005;
}
.luma-hero .luma-hero-status { margin-bottom: 1.15rem; }
.luma-hero .luma-hero-scrim {
  z-index: 1;
  background: linear-gradient(90deg, #020607c9 0%, #02060770 38%, #02060708 76%), linear-gradient(0deg, #030708 0%, #03070845 33%, transparent 66%);
}
.luma-hero-deck {
  color: #dde8e6;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.6;
  margin: 1.6rem 0 0;
  font-weight: 400;
}
/* One sentence per line; where a sentence must wrap (320–390px), it wraps balanced instead of leaving one word. */
.luma-hero-deck > span { display: block; text-wrap: balance; }
.luma-hero-actions { display: flex; gap: 2.4rem; align-items: center; margin-top: 1.8rem; }
.luma-explore-link, .luma-field-skip, .luma-all-projects, .luma-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 44px;
  color: #d5e5e1;
  font-size: .82rem;
  text-decoration: none;
  border-bottom: 1px solid #99beb04d;
  transition: color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard);
}
:is(.luma-explore-link, .luma-field-skip, .luma-all-projects, .luma-back-to-top):is(:hover, :focus-visible) { color: #fff; border-color: #bee9dd; }
.luma-hero-footnote {
  position: absolute;
  bottom: 1.7rem;
  /* The container's own gutters, so the footnote shares the copy's column edges at every width. */
  left: max(calc((100% - var(--max-width)) / 2), 1.25rem);
  right: max(calc((100% - var(--max-width)) / 2), 1.25rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #a0b6b5;
  font-size: max(var(--text-floor), .7rem);
  z-index: 4;
}
/* Control labels (Pause film, Pause motion) never fall below 11.5px. */
.luma-hero-footnote button, button[data-field-motion] {
  font: inherit;
  font-size: max(11.5px, .72rem);
  color: #c4d9d4;
  border: 1px solid #b7ddd333;
  border-radius: 100px;
  padding: .65rem 1rem;
  min-height: 44px;
  background: #0307088c;
  cursor: pointer;
}
/* The shared shell (project-experience.css: chapter bar, galleries, image dialog) reads these colours. */
.theme-lumanorm {
  --experience-paper: var(--luma-paper);
  --experience-muted: var(--luma-muted);
  --experience-accent: #b9decb;
  --experience-line: var(--luma-line);
  --experience-background: #030708;
  --experience-header-height: var(--luma-header-height);
}
.luma-chapters { z-index: 9; }
/* Short landscape windows: the chapter bar scrolls away (project-experience.css), so only the header is pinned. */
@media (max-height: 500px) and (orientation: landscape) {
  .theme-lumanorm { --luma-sticky-top: var(--luma-header-height); }
  /* The whole opening (status, name, deck, actions) fits the first screen of a phone held sideways (844 x 390:
     325px below the header), clear of the footnote row at the foot. */
  .theme-lumanorm .luma-hero { min-height: max(calc(100svh - var(--luma-header-height)), 320px); }
  .luma-hero .luma-hero-grid { padding-top: 1.75rem; padding-bottom: 4.6rem; }
  .luma-hero .luma-hero-status { margin-bottom: .5rem; }
  .luma-hero .luma-hero-title { font-size: clamp(2.6rem, 6.4vw, 3.4rem); }
  .luma-hero-deck { margin-top: .9rem; font-size: .95rem; line-height: 1.5; }
  .luma-hero-actions { margin-top: 1rem; }
}
.theme-lumanorm #light-study { scroll-margin-top: var(--luma-sticky-top); }
.luma-field { height: 240svh; position: relative; background: #030708; }
.luma-field-stage {
  position: sticky;
  top: var(--luma-sticky-top);
  height: calc(100svh - var(--luma-sticky-top));
  min-height: 560px;
  overflow: clip;
  isolation: isolate;
}
.luma-field-art { position: absolute; inset: 0; contain: strict; pointer-events: none; }
[data-field-canvas] { display: block; width: 100%; height: 100%; }
/* The poster (no WebGL, no script) fades in from the copy side instead of starting on a hard vertical seam. */
.luma-field-fallback {
  position: absolute; width: 70%; height: 100%; right: 0; object-fit: cover; opacity: .65;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%);
  mask-image: linear-gradient(90deg, transparent, #000 24%);
}
[data-field-renderer="webgl"] .luma-field-fallback { display: none; }
.luma-field-content { height: 100%; display: flex; align-items: center; position: relative; z-index: 2; pointer-events: none; }
.luma-field-copy { width: 38%; padding-block: 3rem 5rem; pointer-events: auto; }
.luma-field-copy h2 {
  font-size: clamp(3rem, 4.35vw, 4.7rem);
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: var(--track-title);
  margin: 1.3rem 0 1.6rem;
  color: var(--luma-paper);
}
.luma-field-intro { font-size: 1rem; line-height: 1.7; color: #a7b8b6; }
.luma-field-modes { display: flex; gap: 0; border-bottom: 1px solid var(--luma-line); margin-top: 2.5rem; width: max-content; max-width: 100%; }
.luma-field-modes[hidden] { display: none; }
.luma-field-modes button {
  display: flex; flex-direction: column; align-items: start; gap: .45rem;
  font: inherit; font-size: .72rem; color: #829a97; background: none; border: 0;
  border-bottom: 1px solid transparent; margin-bottom: -1px; padding: .7rem 1.15rem .9rem 0; min-height: 62px; cursor: pointer;
  transition: color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard);
}
.luma-field-modes button + button { padding-left: 1.15rem; }
.luma-field-modes button span { font-size: var(--text-floor); font-variant-numeric: tabular-nums; color: #6f8783; }
.luma-field-modes button:is([aria-pressed="true"], :hover, :focus-visible) span { color: #9fb9b2; }
.luma-field-modes button[aria-pressed="true"] { color: #e3f5ed; border-bottom-color: #b5dfd1; }
.luma-field-modes button:is(:hover, :focus-visible) { color: #fff; }
/* The study's honesty note is a .study-disclosure (project-experience.css): caption tier, never below the text
   floor. It keeps a quieter ink here: 8.2:1 on the stage and at least 5.6:1 where the fallback poster's teal reaches
   it (no WebGL, no script). */
.luma-field-caption { --study-disclosure-ink: #93a9a5; max-width: 44ch; margin: 1.15rem 0; }
.luma-field-skip { font-size: .75rem; border: 0; color: #bdd5ce; }
.luma-field-footer {
  position: absolute; bottom: 1.7rem; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: #8fa7a2; font-size: var(--text-floor); z-index: 3;
}
.luma-field-instruction { display: flex; align-items: center; gap: 2rem; }
.luma-field-coordinate { display: flex; gap: 1.5rem; font-size: var(--text-floor); letter-spacing: var(--track-label); }
.luma-field-coordinate [data-field-label] { color: #b7ccc5; text-transform: uppercase; }
/* Reduced motion and data saving: a status, not a dead button, in the control's place. */
.luma-field-still {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  color: #8fa7a3; letter-spacing: var(--track-label); text-transform: uppercase;
}
.luma-field-still::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.luma-field-still[hidden] { display: none; }
.luma-field:not([data-field-renderer="webgl"]) { height: auto; }
.luma-field:not([data-field-renderer="webgl"]) .luma-field-stage { position: relative; top: 0; }
.luma-field:not([data-field-renderer="webgl"]) .luma-field-instruction { visibility: hidden; }
.luma-introduction { padding: clamp(6rem, 12vw, 12rem) 0; border-top: 1px solid #a1c4bd14; }
.luma-introduction-inner { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 6rem; align-items: end; }
.luma-introduction .eyebrow { grid-column: 1/-1; margin-bottom: 2rem; }
.luma-introduction h2 { font-size: clamp(2.8rem, 4.2vw, 4.35rem); font-weight: var(--display-weight); letter-spacing: var(--track-title); line-height: 1.1; margin: 0; }
.luma-introduction p:last-child { max-width: 43ch; margin: 0 0 .4rem; color: var(--luma-muted); font-size: 1rem; line-height: 1.85; }
/* Image sequences unfold in a contained stage as the document scrolls. */
.theme-lumanorm :is(.luma-interface, .luma-multiframe, .luma-recipe, .luma-luts, .luma-analysis, .luma-create, .luma-export, .luma-performance) {
  padding: clamp(3.2rem, 6vw, 6rem) 0;
  overflow: clip;
}
.theme-lumanorm .luma-chapter-start { padding-top: clamp(4rem, 8vw, 8rem); border-top: 1px solid var(--luma-line); }
.theme-lumanorm .luma-section-heading { position: relative; max-width: none; margin-bottom: 2.8rem; padding-right: 1rem; }
.theme-lumanorm .luma-section-heading--immersive { display: grid; grid-template-columns: 1.25fr 1fr; gap: .8rem 5rem; align-items: end; }
.theme-lumanorm .luma-section-heading .eyebrow { grid-column: 1/-1; margin: 0 0 .3rem; }
.theme-lumanorm .luma-section-heading h2 { max-width: 18ch; font-weight: var(--display-weight); font-size: clamp(2.5rem, 3.7vw, 3.8rem); line-height: 1.08; letter-spacing: var(--track-title); margin: 0; }
.theme-lumanorm .luma-section-heading p:not(.eyebrow) { max-width: 42ch; font-size: .91rem; line-height: 1.75; color: var(--luma-muted); margin: 0 0 .2rem; }
.luma-chapter-start .luma-section-heading .eyebrow::before { content: "01 / "; color: #66807a; margin-right: .5rem; }
.luma-chapter-start[data-chapter-number="02"] .eyebrow::before { content: "02 / "; }
.luma-chapter-start[data-chapter-number="03"] .eyebrow::before { content: "03 / "; }
.luma-chapter-start[data-chapter-number="04"] .eyebrow::before { content: "04 / "; }
/* Rails before gallery-story.js runs, and without it; the enhanced rail and its cards follow project-experience.css. */
.theme-lumanorm .luma-media-rail[data-luma-gallery]:not(.gallery-rail) {
  --luma-rail-column: min(80%, 900px);
  display: flex;
  width: calc(100% + max(4vw, calc((100vw - 1200px) / 2)));
  gap: 1.5rem;
  padding: 0 max(4vw, calc((100vw - 1200px) / 2)) 0 0;
  margin: 0;
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  /* Perspective must never create an inner vertical wheel target. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  align-items: center;
}
.theme-lumanorm [data-luma-gallery] > .luma-media-frame:not(.gallery-card) {
  width: var(--luma-rail-column);
  min-width: 0;
  flex: 0 0 var(--luma-rail-column);
  border-radius: 12px;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  opacity: 1;
  transform: none;
  filter: none;
}
.theme-lumanorm .luma-media-frame img, .theme-lumanorm .luma-media-wide img {
  border-radius: 12px;
  opacity: 1;
  object-fit: contain;
}
.theme-lumanorm .luma-media-wide { margin-inline: 0; overflow: hidden; border-radius: 12px; background: #020404; }
.theme-lumanorm .luma-recipe-stack, .theme-lumanorm .luma-depth-stack, .theme-lumanorm .luma-create-stack { gap: 1.5rem; }
:is(.luma-hero-footnote button, button[data-field-motion]):is(:hover, :focus-visible) { color: #fff; border-color: #b6dace99; background: #132221; }
.theme-lumanorm [data-luma-gallery] > .luma-media-frame { overflow: visible; background: transparent; }
.theme-lumanorm :is(button, a, [tabindex="0"]):focus-visible { outline: 2px solid #baeede; outline-offset: 5px; }
.theme-lumanorm [data-luma-gallery]:focus-visible { outline-offset: 6px; }
.theme-lumanorm :is(button, .luma-explore-link, .luma-field-skip):active { opacity: .7; }
.theme-lumanorm .luma-finale { padding: clamp(6rem, 12vw, 12rem) 0; border-block: 1px solid var(--luma-line); margin-top: 3rem; background: radial-gradient(ellipse at 50% 55%, #10241d80, transparent 65%); }
.luma-finale-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
/* The squircle carries its own alpha; it rests on the stage like a Dock icon. */
.luma-finale-logo { display: block; margin-bottom: 2.2rem; filter: drop-shadow(0 14px 22px #000a) drop-shadow(0 2px 4px #0006); }
.luma-finale h2 { font-size: clamp(3.2rem, 6vw, 6rem); line-height: 1.06; font-weight: var(--display-weight); letter-spacing: var(--track-title); font-kerning: normal; margin: .8rem 0 2rem; }
.luma-back-to-top { margin-top: 2rem; border: 0; color: #91b2a7; font-size: .72rem; }
.theme-lumanorm .luma-legal { padding: 4rem 0; }
.theme-lumanorm .luma-legal h2, .theme-lumanorm .luma-related h2 { font-weight: var(--display-weight); letter-spacing: var(--track-title); }
.theme-lumanorm .luma-document-card h3 { font-size: 1.45rem; font-weight: var(--heading-weight); letter-spacing: var(--track-heading); line-height: 1.3; }
.theme-lumanorm .luma-related { border-top: 1px solid var(--luma-line); padding: 5rem 0 6rem; }
.theme-lumanorm .luma-related .project-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-lumanorm .luma-related .project-card { border-radius: 14px; border-color: var(--luma-line); background: #0a1110; }
.theme-lumanorm .luma-related .project-card h3 { font-weight: var(--heading-weight); letter-spacing: var(--track-heading); }
@media (max-width: 1000px) {
  .luma-field-copy { width: 42%; }
  .luma-field-copy h2 { font-size: clamp(2.6rem, 5vw, 4rem); }
  .luma-introduction-inner { column-gap: 3rem; }
  .theme-lumanorm .luma-section-heading--immersive { column-gap: 3rem; }
}
@media (max-width: 700px) {
  .theme-lumanorm { --luma-header-height: 77px; --luma-chapter-height: 49px; }
  .theme-lumanorm .container { width: calc(100% - 2.5rem); }
  .theme-lumanorm .luma-hero { min-height: clamp(660px, calc(100svh - var(--luma-header-height)), 850px); }
  .luma-hero .luma-hero-grid { padding-top: 17rem; padding-bottom: 7.5rem; }
  .luma-hero .luma-hero-title { display: block; font-size: clamp(3.4rem, 12.5vw, 5.4rem); line-height: .99; letter-spacing: var(--track-title); }
  .luma-hero .luma-hero-title-word { display: block; }
  .luma-hero .luma-hero-title-word + .luma-hero-title-word { margin-top: .04em; }
  .luma-hero .luma-cinematic-video { object-position: 56% center; }
  /* The portrait crop puts the lit silk behind the copy. The copy stands 400–440px tall above the hero's foot at
     320–390px, so the scrim is measured from the foot in px (not % of a hero whose height varies): the status line
     sits on about 0.68 of ink over the brightest frame, and the top of the light column stays clear. */
  .luma-hero .luma-hero-scrim { background: linear-gradient(0deg, #030708 0, #030708c7 240px, #030708a8 460px, #03070800 640px); }
  .luma-hero-deck { font-size: .95rem; margin-top: 1.4rem; }
  .luma-hero-actions { gap: 1.5rem; margin-top: 1.4rem; flex-wrap: wrap; }
  .luma-explore-link { font-size: .73rem; gap: .7rem; }
  .luma-hero-footnote { left: 1.25rem; right: 1.25rem; bottom: 1.1rem; font-size: var(--text-floor); gap: .8rem; }
  .luma-hero-footnote button { padding-inline: .8rem; }
  .luma-field { height: 180svh; }
  .luma-field-stage { min-height: 610px; }
  .luma-field-content { align-items: start; }
  .luma-field-copy { width: 100%; padding-top: 2rem; padding-bottom: 0; pointer-events: none; }
  .luma-field-copy > * { pointer-events: auto; }
  .luma-field-copy .eyebrow { margin: 0; }
  .luma-field-copy h2 { font-size: clamp(2.8rem, 8.6vw, 3.8rem); margin: 1rem 0 .7rem; }
  .luma-field-intro { font-size: .8rem; line-height: 1.65; margin: 0; }
  .luma-field-modes { margin-top: 1.1rem; }
  .luma-field-modes button { flex-direction: row; gap: .45rem; align-items: center; min-height: 44px; font-size: max(11.5px, .72rem); padding-block: .4rem; padding-right: .95rem; }
  .luma-field-modes button + button { padding-left: .95rem; }
  /* Caption and link share the column edges of the copy above (x = 20 and the right edge at 390). */
  .luma-field-caption { position: absolute; bottom: 4.6rem; left: 0; max-width: 24ch; margin: 0; pointer-events: none; }
  .luma-field-skip { position: absolute; bottom: 4.3rem; right: 0; }
  .luma-field-footer { bottom: .9rem; gap: .5rem; }
  .luma-field-coordinate { display: none; }
  .luma-field-instruction { gap: 1rem; }
  button[data-field-motion] { padding-inline: .8rem; }
  .luma-field-fallback {
    width: 100%; top: 28%; height: 70%; object-position: center;
    /* It also recedes at its foot, where the honesty caption and the skip link sit over it. */
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 52%, #0000 88%);
    mask-image: linear-gradient(180deg, transparent, #000 24%, #000 52%, #0000 88%);
  }
  .luma-introduction { padding: 5rem 0; }
  .luma-introduction-inner { display: block; }
  .luma-introduction .eyebrow { margin-bottom: 1.3rem; }
  .luma-introduction h2 { font-size: 2.6rem; margin-bottom: 1.7rem; }
  .luma-introduction p:last-child { font-size: .88rem; line-height: 1.8; }
  .theme-lumanorm .luma-section-heading--immersive { grid-template-columns: 1fr; gap: .9rem; padding: 0; margin-bottom: 2rem; }
  .theme-lumanorm .luma-section-heading h2 { font-size: 2.35rem; max-width: 19ch; }
  .theme-lumanorm .luma-section-heading p:not(.eyebrow) { font-size: .85rem; max-width: 43ch; }
  .theme-lumanorm .luma-media-rail[data-luma-gallery]:not(.gallery-rail) { --luma-rail-column: 91%; width: calc(100% + 1.25rem); padding-right: 1.25rem; gap: .85rem; }
  .theme-lumanorm [data-luma-gallery] > .luma-media-frame, .theme-lumanorm .luma-media-frame img, .theme-lumanorm .luma-media-wide img { border-radius: 8px; }
  .theme-lumanorm .luma-related .project-related-grid { grid-template-columns: 1fr; }
  .theme-lumanorm .luma-related .section-heading { gap: 1rem; }
  .luma-finale h2 { font-size: 3.2rem; letter-spacing: var(--track-title); }
  .theme-lumanorm .luma-legal { padding-block: 3rem; }
}
@media (max-height: 740px) and (max-width: 700px) {
  .luma-field-stage { min-height: 660px; position: relative; top: 0; }
  .luma-field { height: auto; }
  .luma-field-instruction { visibility: hidden; }
}
@media (max-width: 380px) {
  /* Below 380px each deck sentence wraps, so the copy stands about 530px above the hero's foot (415px at 390): the
     scrim's stops rise by the same 120px, keeping the status line on the same ink as at 390px. */
  .luma-hero .luma-hero-scrim { background: linear-gradient(0deg, #030708 0, #030708c7 360px, #030708a8 580px, #03070800 760px); }
  /* Separate the caption from the link without taking space from the artwork. */
  .luma-field-stage { min-height: 700px; }
  .luma-field-caption { left: 0; right: 0; bottom: 7.5rem; max-width: none; }
  .luma-field-skip { right: 0; }
}
@media (max-height: 690px) and (min-width: 701px) {
  .luma-field { height: auto; }
  .luma-field-stage { position: relative; top: 0; min-height: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  .luma-field { height: auto; }
  .luma-field-stage { position: relative; top: 0; }
  .luma-field-instruction { visibility: hidden; }
  .theme-lumanorm *, .theme-lumanorm *::before, .theme-lumanorm *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .luma-field-art { display: none; }
  .luma-field-modes button[aria-pressed="true"] { border-bottom: 3px solid Highlight; }
}

/* Explicit still views also apply to connection-saving and high-contrast modes. */
.luma-field[data-field-motion="reduced"] { height: auto; }
.luma-field[data-field-motion="reduced"] .luma-field-stage { position: relative; top: 0; }
.luma-field[data-field-motion="reduced"] .luma-field-instruction { visibility: hidden; }
@media (forced-colors: active) {
  .luma-field { height: auto; }
  .luma-field-stage { position: relative; top: 0; }
}
/* Quiet chapter color fades back to the same ink at each boundary. The shared
   edge atmosphere supplies continuity; these surfaces never animate. */
.theme-lumanorm :is(.luma-introduction, .luma-interface, .luma-multiframe, .luma-recipe, .luma-analysis, .luma-luts, .luma-create, .luma-export, .luma-performance) {
  background: radial-gradient(ellipse at var(--luma-chapter-light-x, 75%) 50%, var(--luma-chapter-light, #28494626), transparent 68%);
}
.theme-lumanorm :is(.luma-analysis, .luma-segmentation) { --luma-chapter-light-x: 25%; --luma-chapter-light: #314c3522; }
.theme-lumanorm .luma-depth { --luma-chapter-light-x: 75%; --luma-chapter-light: #30495825; }
.theme-lumanorm :is(.luma-luts, .luma-video) { --luma-chapter-light-x: 25%; --luma-chapter-light: #5a422526; }
.theme-lumanorm :is(.luma-create, .luma-export, .luma-performance) { --luma-chapter-light-x: 65%; --luma-chapter-light: #344d4022; }

/* Three small optical passages; the unchanged content stays above the artwork. */
.theme-lumanorm .luma-atmosphere-section { position: relative; isolation: isolate; overflow: clip; }
.luma-atmosphere-section > .container { position: relative; z-index: 1; }
/* Each slot rises above its section (--luma-atmos-top < 0), where the section's clip would cut the lens rings with
   a ruler-straight edge. A static mask dissolves the artwork to nothing at that edge instead. */
.luma-optical-atmosphere {
  --atmosphere-opacity: .12;
  --luma-atmos-top: -100px;
  width: 680px;
  right: -315px;
  top: var(--luma-atmos-top);
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(-1 * var(--luma-atmos-top)), #000 calc(-1 * var(--luma-atmos-top) + 24%));
  mask-image: linear-gradient(to bottom, transparent calc(-1 * var(--luma-atmos-top)), #000 calc(-1 * var(--luma-atmos-top) + 24%));
}
.luma-depth .luma-optical-atmosphere { left: -285px; right: auto; --luma-atmos-top: -90px; --atmosphere-opacity: .15; }
.luma-luts .luma-optical-atmosphere { right: -210px; --luma-atmos-top: -140px; --atmosphere-opacity: .18; }
@media (max-width: 1000px) {
  .luma-optical-atmosphere { width: 560px; right: -330px; --atmosphere-opacity: .12; }
  .luma-depth .luma-optical-atmosphere { left: -320px; }
  .luma-luts .luma-optical-atmosphere { right: -290px; --atmosphere-opacity: .15; }
}
@media (max-width: 700px) {
  .luma-optical-atmosphere { width: 400px; right: -260px; --luma-atmos-top: -120px; --atmosphere-opacity: .10; }
  .luma-depth .luma-optical-atmosphere { width: 380px; left: -250px; --luma-atmos-top: -80px; --atmosphere-opacity: .10; }
  .luma-luts .luma-optical-atmosphere { right: -250px; --luma-atmos-top: -115px; --atmosphere-opacity: .12; }
}
.luma-chapters:has(a[href="#analysis"][aria-current]) { border-bottom-color: #81b69838; }
.luma-chapters:has(a[href="#color-motion"][aria-current]) { border-bottom-color: #bca17345; }
.luma-chapters:has(a[href="#workflow"][aria-current]) { border-bottom-color: #84bba53d; }

.luma-finale-description { color: var(--luma-muted); font-size: 1rem; margin: -1rem 0 2rem; line-height: 1.7; }

/* Long in-page jumps (lumanorm-experience.js) cut through a View Transition: the page lifts away in the direction
   of travel and the destination rises into place on a critically damped spring, while the header holds still and
   the chapter bar glides between its in-flow and pinned positions. Only while html[data-luma-jump] is set. */
html[data-luma-jump] .site-header { view-transition-name: luma-header; }
html[data-luma-jump] .luma-chapters { view-transition-name: luma-chapters; }
html[data-luma-jump]::view-transition-group(luma-chapters) { animation-duration: var(--motion-settle); animation-timing-function: var(--ease-spring); }
html[data-luma-jump]::view-transition-old(root) { animation: luma-cut-out var(--motion-medium) var(--ease-standard) both; }
html[data-luma-jump]::view-transition-new(root) { animation: luma-cut-in var(--motion-settle) var(--ease-spring) both; }
html[data-luma-jump="up"]::view-transition-old(root) { animation-name: luma-cut-out-up; }
html[data-luma-jump="up"]::view-transition-new(root) { animation-name: luma-cut-in-up; }
@keyframes luma-cut-out { to { opacity: 0; translate: 0 -28px; } }
@keyframes luma-cut-in { from { opacity: 0; translate: 0 28px; } }
@keyframes luma-cut-out-up { to { opacity: 0; translate: 0 28px; } }
@keyframes luma-cut-in-up { from { opacity: 0; translate: 0 -28px; } }