/* Camera-only editorial scene; its WebGL canvas shares the page, without a viewer frame. */
.camera-page { --story-ink: #171c20; --story-paper: #e7ddd1; --story-coral: #d98470; --story-sky: #91b4c2; }
.camera-story { position: relative; background: var(--story-ink); }
.camera-story-frame { position: relative; height: 100svh; min-height: 0; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 76% 44%, #354146 0%, #20292d 32%, var(--story-ink) 72%); }
@media (prefers-reduced-motion: no-preference) {
  .js .camera-story:not(.is-story-fallback) { height: 340svh; }
  .js .camera-story:not(.is-story-fallback) .camera-story-frame { position: sticky; top: 0; }
}
.camera-story .product-studio { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; overflow: visible; isolation: auto; z-index: 2; pointer-events: none; }
.camera-story .product-studio::before { display: none; }
.camera-story .studio-canvas { cursor: default; touch-action: pan-y; }
.camera-story .studio-status { left: auto; right: 5vw; bottom: 36px; color: #b5b5b0; max-width: 420px; font-size: 11px; }
.camera-story .studio-poster { object-fit: contain; inset: 12% 2% 12% 38%; width: 60%; height: 76%; background: transparent; }
.camera-story .studio-status:not(:empty) { padding: 0; }
.camera-story-kicker { position: absolute; top: 116px; left: 5vw; right: 5vw; display: flex; justify-content: space-between; gap: 20px; color: var(--story-sky); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; z-index: 4; }
.camera-story-word { position: absolute; left: 3vw; right: 3vw; bottom: 4%; font-size: clamp(160px, 29vw, 440px); line-height: .8; font-family: var(--font-sans); font-weight: 900; letter-spacing: -.07em; color: rgba(231,221,209,.09); z-index: 1; user-select: none; pointer-events: none; }
.camera-story-copy { position: absolute; left: 5vw; top: 25%; width: min(37vw, 530px); z-index: 3; pointer-events: none; will-change: opacity, transform; }
.camera-story-copy h1, .camera-story-copy h2 { color: var(--story-paper); font-size: clamp(48px, 5.5vw, 88px); line-height: 1.13; font-weight: 500; letter-spacing: -.055em; margin: 14px 0 24px; }
.camera-story-copy p { max-width: 310px; color: #bcc0bd; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.8; margin: 0; }
.camera-story-copy .camera-story-label { color: var(--story-coral); font-size: 12px; letter-spacing: .12em; }
.camera-story-copy small { display: block; margin-top: 34px; font-family: var(--font-mono); color: var(--story-sky); font-size: 10px; letter-spacing: .1em; }
.camera-story-copy[data-story-copy='detail'] { top: 21%; width: 28%; opacity: 0; }
.camera-story-copy[data-story-copy='detail'] h2 { font-size: clamp(40px, 4vw, 62px); }
.camera-story-copy[data-story-copy='share'] { left: 62%; top: 29%; width: 32%; opacity: 0; }
.camera-story-copy[data-story-copy='share'] h2 { font-size: clamp(44px, 4.8vw, 74px); }
.camera-story-footer { position: absolute; left: 5vw; right: 5vw; bottom: 34px; z-index: 5; display: flex; align-items: center; gap: 22px; color: #cbc7c0; font-size: 11px; }
.camera-story-footer a { color: inherit; text-decoration: none; padding: 10px 0; }
.camera-story-footer a:hover { color: var(--story-coral); }
.camera-story-footer button { appearance: none; background: transparent; border: 1px solid #667074; border-radius: 24px; padding: 10px 16px; color: inherit; font: inherit; min-height: 44px; cursor: pointer; }
.camera-story-footer button:disabled { opacity: .7; cursor: default; }
.camera-story-footer button:focus-visible, .camera-story-footer a:focus-visible { outline: 2px solid var(--story-sky); outline-offset: 5px; }
.camera-story-hint { display: none; }
.is-story-ready:not(.is-motion-paused) .camera-story-hint { display: inline; }
.camera-story-track { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(231,221,209,.12); }
.camera-story-track::after { content: ''; display: block; height: 100%; background: var(--story-coral); transform: scaleX(var(--story-progress, 0)); transform-origin: left; }
.camera-page .camera-project-record { position: relative; z-index: 3; display: grid; grid-template-columns: 1.05fr 1fr; gap: 7vw; align-items: center; padding: 96px 5vw; background: #111518; scroll-margin-top: 100px; }
.camera-project-record figure { margin: 0; }
.camera-project-record img { width: 100%; height: auto; border-radius: 0; }
.camera-project-record figcaption { color: #959e9f; font-size: 11px; margin-top: 14px; }
.camera-project-record h2 { font-size: clamp(28px,3vw,44px); font-weight: 500; margin: 12px 0 20px; color: var(--story-paper); }
.camera-project-record p { color: #b4bab8; line-height: 1.8; max-width: 500px; }
.camera-project-record .evidence-panel { margin: 28px 0 0; padding: 24px 0 0; background: transparent; border-radius: 0; border-width: 1px 0 0; }
.camera-project-record .record-label { color: var(--story-sky); font-size: 12px; letter-spacing: .12em; }
@media (max-width: 759px), (max-width: 1100px) and (orientation: portrait) {
  .camera-story-frame { height: 100svh; min-height: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .js .camera-story:not(.is-story-fallback) { height: 300svh; }
  }
  .camera-story-kicker { top: 104px; left: 24px; right: 24px; font-size: 10px; }
  .camera-story-kicker span:last-child { display: none; }
  .camera-story-copy, .camera-story-copy[data-story-copy='detail'], .camera-story-copy[data-story-copy='share'] { left: 24px; top: 150px; width: calc(100% - 48px); }
  .camera-story-copy h1, .camera-story-copy h2, .camera-story-copy[data-story-copy='detail'] h2, .camera-story-copy[data-story-copy='share'] h2 { font-size: clamp(38px, 10vw, 58px); margin: 8px 0 13px; }
  .camera-story-copy p { max-width: 340px; font-size: 13px; }
  .camera-story-copy small { display: none; }
  .camera-story-word { bottom: 20%; font-size: 27vw; }
  .camera-story .studio-poster { inset: 45% 0 15%; width: 100%; height: 40%; }
  .camera-story .studio-status { left: 24px; right: 24px; bottom: 88px; max-width: none; font-size: 10px; text-align: left; }
  .camera-story-footer { left: 24px; right: 24px; bottom: 22px; gap: 14px; flex-wrap: wrap; }
  .camera-story-hint { font-size: 10px; }
  .camera-story-footer button { padding: 8px 12px; }
  .camera-page .camera-project-record { grid-template-columns: 1fr; gap: 36px; padding: 60px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .camera-story.is-story-ready { height: auto; }
  .camera-story.is-story-ready .camera-story-frame { position: relative; }
  .camera-story-copy { will-change: auto; }
}

.camera-story:not(.is-story-ready) [data-story-pause] { display: none; }

/* Keep short landscape screens usable without pushing controls below the viewport. */
@media (min-width: 760px) and (max-height: 600px) {
  .camera-story-frame { min-height: 0; height: 100svh; }
  .camera-story-kicker { top: 96px; font-size: 9px; }
  .camera-story-copy, .camera-story-copy[data-story-copy='detail'], .camera-story-copy[data-story-copy='share'] { top: 132px; }
  .camera-story-copy h1, .camera-story-copy h2, .camera-story-copy[data-story-copy='detail'] h2, .camera-story-copy[data-story-copy='share'] h2 { font-size: 32px; margin: 6px 0 10px; }
  .camera-story-copy p { font-size: 12px; line-height: 1.6; }
  .camera-story-copy small { display: none; }
  .camera-story-word { font-size: 24vw; }
  .camera-story-footer { bottom: 10px; }
  .camera-story .product-studio.is-ready .studio-status { display: none; }
}

@media (max-width: 759px) and (max-height: 700px) {
  .camera-story-copy, .camera-story-copy[data-story-copy='detail'], .camera-story-copy[data-story-copy='share'] { top: 126px; }
  .camera-story-copy h1, .camera-story-copy h2, .camera-story-copy[data-story-copy='detail'] h2, .camera-story-copy[data-story-copy='share'] h2 { font-size: 32px; margin: 8px 0 12px; }
  .camera-story-copy p { font-size: 12px; line-height: 1.6; }
  .camera-story .product-studio.is-ready .studio-status { display: none; }
}