/* Scene-owned layout only. Without successful JS initialization, authored content stays in flow. */
:root {
  --fs-surface: #ffffff;
  --fs-ink: #172638;
  --fs-border: #52677d;
  --fs-focus: #095aaf;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fs-surface: #17212d;
    --fs-ink: #f2f6fc;
    --fs-border: #a1b5cc;
    --fs-focus: #8ec9ff;
  }
}
:root[data-theme="dark"] {
  --fs-surface: #17212d;
  --fs-ink: #f2f6fc;
  --fs-border: #a1b5cc;
  --fs-focus: #8ec9ff;
}
[data-scene-kind] { min-width: 0; }
[data-scene-id] img, [data-scene-id] video,
[data-scene-kind] img, [data-scene-kind] video { max-width: 100%; height: auto; }
[data-scene-kind] [data-scene-copy],
[data-scene-kind="text"] [data-scene-item],
[data-scene-kind="story"] [data-scene-item],
[data-scene-kind="gallery"] [data-scene-item] {
  color: var(--fs-ink);
  background-color: var(--fs-surface);
  opacity: 1;
  isolation: isolate;
}
[data-scene-kind] [data-scene-copy] { padding: .75rem 1rem; border-radius: .65rem; }
[data-scene-kind="hero"] [data-scene-item] { transform-origin: 50% 60%; opacity: 1; }
[data-scene-kind="story"][data-scene-state="ready"],
[data-scene-kind="three"][data-scene-layout="sticky"][data-scene-state="ready"],
[data-scene-kind="gallery"][data-scene-state="ready"] {
  position: relative;
  min-height: var(--fs-scroll-vh, 260vh);
}
.fs-story-stage, .fs-gallery-viewport {
  position: sticky;
  top: var(--fs-sticky-top, 16px);
  padding-block: 2.5rem;
}
/* The scroll reservation belongs to the scene root, not its content tracks.
   Authored grids may stretch implicit rows across 260vh; never let that turn
   the measured stage into its own sticky/flow sizing feedback loop. */
[data-scene-kind="story"][data-scene-state="ready"] {
  align-content: start;
  align-items: start;
}
.fs-story-stage {
  grid-column: 1 / -1;
  align-self: start;
  height: max-content;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}
.fs-story-stage > [data-scene-item], .fs-story-stage > .fs-motion-shell {
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid var(--fs-border);
  border-radius: 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
  box-shadow: inset 0 -1px 0 var(--fs-border);
}
.fs-story-stage > [data-scene-current="true"] { outline: 2px solid var(--fs-focus); outline-offset: 3px; }
.fs-motion-shell { min-width: 0; }
.fs-story-stage[data-scene-layout="frames"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-story-stage[data-scene-layout="frames"] > :first-child { grid-column: 1 / -1; }
[data-scene-kind="gallery"][data-scene-gallery-stack][data-scene-state="ready"] { min-height: 0; }
[data-scene-gallery-stack] .fs-gallery-viewport { position: static; overflow: visible; }
[data-scene-gallery-stack] .fs-gallery-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-gallery-viewport { overflow: hidden; }
.fs-gallery-track { position: relative; display: flex; gap: var(--fs-gap, 24px); align-items: stretch; width: 100%; }
.fs-gallery-track > [data-scene-item], .fs-gallery-track > .fs-motion-shell {
  flex: 0 0 min(76vw, 48rem);
  min-width: 0;
  margin: 0;
  border: 1px solid var(--fs-border);
  border-radius: 1rem;
  overflow-wrap: anywhere;
}
.fs-gallery-track figcaption { padding: 1rem; }
[data-scene-text] {
  white-space: pre-wrap; overflow-wrap: anywhere;
  padding-block: calc(.75em + var(--fs-text-travel, 22px));
  padding-inline: calc(.5em + var(--fs-text-travel, 22px));
}
.fs-text-visual { display: block; line-height: inherit; }
.fs-text-part { display: inline-block; max-width: calc(100% / var(--fs-text-scale, 1)); white-space: pre-wrap; overflow-wrap: anywhere; opacity: 1; transform-origin: left center; }
.fs-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* One stable visual slot throughout all three story beats, including fallback/loader states. */
.fs-three-stage {
  position: sticky;
  top: var(--fs-sticky-top, 16px);
  box-sizing: border-box;
  min-width: 0;
  display: flow-root;
}
[data-scene-kind="three"][data-scene-layout="sticky"] { display: block; overflow: visible; }
[data-scene-stage="three"] [data-scene-visual="three"] {
  position: relative;
  height: var(--fs-canvas-height, 420px);
  min-height: 0;
  width: 100%;
}
[data-scene-stage="three"] [data-scene-visual="three"] [data-scene-canvas-host] {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  width: 100%;
}
[data-scene-stage="three"] [data-scene-fallback] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
[data-scene-kind="three"] [data-scene-stage="three"] [data-scene-visual="three"][data-scene-canvas-host] {
  height: var(--fs-canvas-height, 420px);
  min-height: 0;
}
[data-scene-stage="three"] .fs-scene-canvas { overflow-anchor: none; }
[data-scene-kind="three"][data-scene-mode="still"][data-scene-state="ready"] { min-height: 0; }
[data-scene-mode="still"] .fs-three-stage { position: static; }
[data-scene-canvas-host] { position: relative; width: 100%; height: var(--fs-canvas-height, 420px); min-height: 160px; }
[data-scene-canvas-host]:empty,
[data-scene-canvas-host]:not(:has(.fs-scene-canvas:not([hidden]))) { height: auto; min-height: 0; }
.fs-scene-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
/* Deliberately outranks generic svg { display:block } and inherited fallback styling. */
[data-scene-id][data-scene-kind="three"] [data-scene-fallback][hidden],
[data-scene-id][data-scene-kind="three"] .fs-scene-canvas[hidden] {
  display: none !important;
  visibility: hidden !important;
}
[data-scene-kind] [data-scene-action] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  min-height: 44px;
  padding: .6rem .9rem;
  border: 1px solid var(--fs-border);
  border-radius: .5rem;
  color: var(--fs-ink);
  background: var(--fs-surface);
  opacity: 1;
  cursor: pointer;
}
[data-scene-kind] [data-scene-action]:focus-visible,
[data-scene-kind]:focus-visible, .fs-scene-canvas:focus-visible { outline: 3px solid var(--fs-focus); outline-offset: 3px; }
[data-scene-mode="still"][data-scene-kind] { min-height: 0; }
[data-scene-mode="still"] .fs-story-stage,
[data-scene-mode="still"] .fs-gallery-viewport { position: static; }
[data-scene-mode="still"] .fs-gallery-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); transform: none; }
@media (max-width: 768px) {
  [data-scene-kind="gallery"][data-scene-state="ready"] { min-height: 0; }
  .fs-gallery-viewport { position: static; overflow: visible; padding-block: 1rem; }
  .fs-gallery-track { display: grid; grid-template-columns: minmax(0, 1fr); transform: none; }
  .fs-story-stage, .fs-story-stage[data-scene-layout="frames"], [data-scene-gallery-stack] .fs-gallery-track { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .fs-story-stage > [data-scene-item], .fs-story-stage > .fs-motion-shell { padding: 1rem; }
  [data-scene-kind="story"][data-scene-state="ready"] { min-height: max(var(--fs-scroll-vh, 260vh), 100%); }
  [data-scene-canvas-host] { height: min(var(--fs-canvas-height, 420px), 70vh); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="normal"]) [data-scene-kind="story"][data-scene-state="ready"],
  :root:not([data-motion="normal"]) [data-scene-kind="three"][data-scene-layout="sticky"][data-scene-state="ready"],
  :root:not([data-motion="normal"]) [data-scene-kind="gallery"][data-scene-state="ready"] { min-height: 0; }
  :root:not([data-motion="normal"]) .fs-story-stage, :root:not([data-motion="normal"]) .fs-gallery-viewport, :root:not([data-motion="normal"]) .fs-three-stage { position: static; }
  :root:not([data-motion="normal"]) .fs-gallery-track { display: grid; grid-template-columns: minmax(0, 1fr); transform: none; }
  :root:not([data-motion="normal"]) .fs-text-visual { display: none; }
  :root:not([data-motion="normal"]) [data-scene-text] .fs-text-base {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    white-space: inherit !important;
  }
}

/* Oversized authored content remains in normal flow, never clipped to fake clearance. */
.fs-three-stage[data-scene-clearance="flow"],
.fs-story-stage[data-scene-clearance="flow"],
.fs-gallery-viewport[data-scene-clearance="flow"] { position: static; }

/* Three photographs read together as chapters, not one full-width image above
   an unreachably tall frame stack. Only runtime-recognized figures are affected.
   Media height depends on viewport chrome, NEVER on its own rendered height. */
[data-scene-kind="story"] .fs-story-stage[data-scene-story="photos"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding-block: 20px;
  align-items: start;
}
[data-scene-kind="story"] .fs-story-stage[data-scene-story="photos"] > .fs-motion-shell {
  grid-column: auto;
  padding: .75rem;
  box-sizing: border-box;
}
[data-scene-kind="story"] [data-scene-story-figure] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin: 0;
  min-width: 0;
}
[data-scene-kind="story"] [data-scene-story-media] { min-width: 0; margin: 0; }
[data-scene-kind="story"] [data-scene-story-photo] {
  display: block;
  width: 100%;
  height: clamp(5rem, calc(var(--fs-sticky-available, 640px) / 2), 16rem);
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
[data-scene-kind="story"] [data-scene-story-label] {
  min-width: 0;
  margin: 0;
  padding: .55rem .65rem;
  font-size: inherit;
  line-height: 1.5;
  color: var(--fs-ink);
  background-color: var(--fs-surface);
  border-block-start: 1px solid var(--fs-border);
  opacity: 1;
  overflow-wrap: anywhere;
}
[data-scene-kind="story"][data-scene-clearance="unverified"][data-scene-state="ready"] { min-height: 0; }
@media (max-width: 768px) {
  [data-scene-kind="story"] .fs-story-stage[data-scene-story="photos"] { grid-template-columns: minmax(0, 1fr); }
  [data-scene-kind="story"] [data-scene-story-figure] {
    grid-template-columns: clamp(4.5rem, 24%, 6rem) minmax(0, 1fr);
    column-gap: .6rem;
  }
  [data-scene-kind="story"] [data-scene-story-media] { grid-column: 1; grid-row: 1 / span 12; }
  [data-scene-kind="story"] [data-scene-story-photo] {
    height: clamp(4.5rem, calc(var(--fs-sticky-available, 600px) / 6), 7.5rem);
  }
  [data-scene-kind="story"] [data-scene-story-label] {
    grid-column: 2;
    padding-inline: 0;
    border-block-start: 0;
  }
}

:root[data-motion="reduced"] [data-scene-kind]{min-height:0!important}:root[data-motion="reduced"] .fs-text-visual{display:none}:root[data-motion="reduced"] .fs-text-base{position:static!important;width:auto!important;height:auto!important;clip-path:none!important}

/* Reusable focus rail: the image-only mask moves; associated captions and
   controls remain outside it. No showcase class or authored wrapper required. */
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"][data-scene-state="ready"]:not([data-scene-mode="still"]):not([data-scene-gallery-flow]) {
  min-height: var(--fs-scroll-vh, 240vh);
}
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"] .fs-gallery-viewport {
  overflow: visible;
  padding-block: 1rem;
  min-width: 0;
}
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"] .fs-gallery-track {
  display: flex;
  gap: 0;
  width: 100%;
  align-items: start;
}
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"] .fs-gallery-track > .fs-motion-shell {
  flex: 0 0 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  margin: 0;
  min-width: 0;
}
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"] [data-scene-item] { margin: 0; }
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"] .fs-gallery-track img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(52vh, 28rem);
  object-fit: contain;
  margin-inline: auto;
}
[data-scene-kind="gallery"] [data-scene-gallery-captions-ready] {
  display: grid;
  gap: .75rem;
  margin-block-start: 1rem;
  padding: .75rem 1rem;
  color: var(--fs-ink);
  background: var(--fs-surface);
  opacity: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
[data-scene-kind="gallery"] [data-scene-gallery-captions-ready] > * { margin: 0; }
[data-scene-kind="gallery"] [data-scene-gallery-captions-ready] > [hidden] { display: none; }
[data-scene-kind="gallery"] [data-scene-gallery-controls] {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: 1rem;
}
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"][data-scene-mode="still"],
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"][data-scene-gallery-flow] { min-height: 0; }
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"][data-scene-mode="still"] .fs-gallery-track,
[data-scene-kind="gallery"][data-scene-gallery-layout="focus"][data-scene-gallery-flow] .fs-gallery-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}