/* Golden-ratio composition, with readable text and touch targets as constraints. */
:root {
  --phi: 1.618034;
  --space-1: 8px;
  --space-2: 13px;
  --space-3: 21px;
  --space-4: 34px;
  --space-5: 55px;
  --space-6: 89px;
  --page-gutter: clamp(21px, 3.4vw, 55px);
  --scene-font: clamp(18px, 1.46vw, 21px);
  --touch-size: 44px;
}

.visual-header {
  min-height: 76px;
  padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--page-gutter), env(safe-area-inset-right)) var(--space-2) max(var(--page-gutter), env(safe-area-inset-left));
  gap: var(--space-2);
}
.visual-header-actions { gap: var(--space-3); }
.visual-brand, .visual-languages a, .sound-menu summary, .chapter-menu summary {
  min-width: var(--touch-size);
  min-height: var(--touch-size);
}
.visual-languages { gap: 0; }
.visual-header .sound-menu summary { width: auto; }

/* The column widths are 38.1966% and 61.8034% after the gutter. */
.scene-stage:not(.is-intro) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618034fr);
  align-items: center;
  gap: var(--space-5);
  max-width: 1597px;
  min-height: 0;
  padding: var(--space-5) max(var(--page-gutter), env(safe-area-inset-right)) var(--space-5) max(var(--page-gutter), env(safe-area-inset-left));
}
.scene-stage:not(.is-intro) .scene-art {
  aspect-ratio: auto;
  width: 100%;
  background: transparent;
}
.scene-stage:not(.is-intro) .scene-image {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.scene-stage:not(.is-intro) .scene-caption {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}
.scene-stage:not(.is-intro) h1 {
  font-size: calc(var(--scene-font) * var(--phi));
  line-height: 1.18;
  max-width: 21ch;
  margin-bottom: var(--space-3);
}
.scene-stage:not(.is-intro) .scene-copy {
  max-width: 34ch;
  font-size: var(--scene-font);
  line-height: var(--phi);
}
.scene-copy p { margin-bottom: var(--space-2); }
.scene-kicker { font-size: 11px; margin-bottom: var(--space-3); }
.scene-kicker > span { margin-bottom: var(--space-2); }
.visual-ending { font-size: var(--scene-font); line-height: var(--phi); margin-top: var(--space-4); }
.art-open { min-width: var(--touch-size); min-height: var(--touch-size); right: var(--space-2); bottom: var(--space-2); }

.scene-stage.is-intro {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: var(--space-5) max(var(--space-6), env(safe-area-inset-right)) var(--space-5) max(var(--space-6), env(safe-area-inset-left));
}
.is-intro .scene-art { z-index: 0; }
.is-intro::after { z-index: 1; }
.intro-caption { position: relative; z-index: 2; width: 100%; max-width: 610px; margin: 0; padding: 0; }
.is-intro h1 span { font-size: clamp(34px, 3.4vw, 55px); }
.is-intro h1 em { font-size: clamp(44px, 4.6vw, 72px); }
.intro-caption .scene-copy { font-size: var(--scene-font); line-height: var(--phi); }
.fiction-label { margin-bottom: var(--space-3); }
.visual-begin { margin-top: var(--space-3); }
.visual-format { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.fiction-note { line-height: var(--phi); }

.visual-navigation {
  min-height: var(--space-6);
  gap: var(--space-3);
  padding: var(--space-2) max(var(--page-gutter), env(safe-area-inset-right)) max(var(--space-2), env(safe-area-inset-bottom)) max(var(--page-gutter), env(safe-area-inset-left));
}
.scene-previous, .scene-next { min-height: var(--touch-size); min-width: var(--touch-size); }
.nav-novella { min-height: var(--touch-size); margin-top: 0; font-size: 11px; }
.scene-position { min-width: 0; }
.scene-page { font-size: 18px; }
.chapter-menu nav, .sound-panel {
  right: max(var(--page-gutter), env(safe-area-inset-right));
  max-width: calc(100vw - max(var(--page-gutter), env(safe-area-inset-left)) - max(var(--page-gutter), env(safe-area-inset-right)));
  max-height: calc(100svh - 110px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.scene-list { column-gap: var(--space-3); }
.scene-list a { padding-block: var(--space-2); gap: var(--space-2); }
.art-dialog {
  padding: calc(76px + env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
}
.art-dialog img { max-height: calc(100dvh - 165px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.art-close { top: max(var(--space-3), env(safe-area-inset-top)); right: max(var(--space-3), env(safe-area-inset-right)); }

/* Fade in place: a full-width phone page must not move beyond the viewport. */
@keyframes scene-arrives { from { opacity: 0; } to { opacity: 1; } }

/* Portrait tablets have a full-width illustration and a centered reading measure. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .scene-stage:not(.is-intro) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
  }
  .scene-stage:not(.is-intro) .scene-art { flex: none; }
  .scene-stage:not(.is-intro) .scene-caption {
    width: 61.8034%;
    max-width: 610px;
    margin-inline: auto;
  }
  .scene-stage:not(.is-intro) .scene-copy { max-width: 55ch; }
  .scene-kicker > span { display: inline; font: inherit; margin: 0 var(--space-2) 0 0; }
  .scene-stage.is-intro { padding-inline: var(--page-gutter); }
  .scene-stage:not(.is-intro) { --scene-font: 21px; }
}

/* A phone uses the scale for type and spacing instead of narrow columns. */
@media (max-width: 600px) {
  :root { --page-gutter: 21px; }
  .visual-header { min-height: 68px; gap: var(--space-1); padding-block: max(var(--space-1), env(safe-area-inset-top)) var(--space-1); }
  .visual-brand > span:last-child, .visual-languages > span, .sound-menu summary > span { display: none; }
  .visual-header-actions { gap: var(--space-1); }
  .visual-header .sound-menu summary { width: var(--touch-size); justify-content: center; }
  .visual-header .chapter-menu summary { gap: var(--space-1); }
  .scene-stage:not(.is-intro) { --scene-font: 18px; gap: var(--space-3); padding: 0 0 var(--space-4); justify-content: flex-start; }
  .scene-stage:not(.is-intro) .scene-art { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .scene-stage:not(.is-intro) .scene-caption { width: 100%; padding-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right)); margin-block: auto; }
  .scene-stage:not(.is-intro) h1 { font-size: calc(var(--scene-font) * var(--phi)); }
  .scene-kicker { font-size: 10px; margin-bottom: var(--space-2); }
  .visual-ending { margin-top: var(--space-3); }
  .scene-stage.is-intro { padding: calc(100vw / var(--phi)) var(--page-gutter) var(--space-4); }
  .is-intro .scene-art { height: calc(100vw * var(--phi)); max-height: 490px; }
  .is-intro h1 span { font-size: clamp(25px, 7.1vw, 34px); }
  .is-intro h1 em { font-size: clamp(33px, 9.6vw, 46px); }
  .intro-caption .scene-copy { font-size: 18px; }
  .scene-previous .nav-word { display: none; }
  .visual-navigation { gap: var(--space-1); padding-top: var(--space-1); padding-bottom: max(var(--space-1), env(safe-area-inset-bottom)); }
  .scene-next { gap: var(--space-1); font-size: 11px; }
  .scene-next .nav-word { max-width: 84px; line-height: var(--phi); }
  .scene-list { grid-template-columns: 1fr; }
  .chapter-menu nav { padding: var(--space-3); }
}
@media (max-width: 350px) {
  :root { --page-gutter: 13px; }
}

/* Short landscape windows stay in normal document flow; the image remains whole. */
@media (orientation: landscape) and (max-height: 600px) {
  .scene-stage:not(.is-intro) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618034fr); gap: var(--space-4); padding: var(--space-4) max(var(--space-3), env(safe-area-inset-right)) var(--space-4) max(var(--space-3), env(safe-area-inset-left)); --scene-font: 18px; }
  .scene-stage:not(.is-intro) .scene-caption { width: 100%; padding: 0; }
  .scene-stage.is-intro { padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right)) var(--space-4) max(var(--space-4), env(safe-area-inset-left)); }
  .is-intro .scene-art { inset: 0; height: 100%; max-height: none; }
  .is-intro .scene-image { width: 100%; left: 0; }
  .is-intro::after { background: linear-gradient(90deg, #07101aee, #07101ab3 38.2%, #07101a22 100%); }
  .visual-navigation { position: relative; }
}

/* Shared proportions carry through to the novella's cover and reading margins. */
.cover-copy { padding-inline: max(var(--space-6), env(safe-area-inset-left)) max(var(--space-6), env(safe-area-inset-right)); }
.cover-line { line-height: var(--phi); }
.masthead { padding-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right)); }
.masthead .chapter-menu nav { right: 0; }
.masthead .reading-panel { right: max(var(--page-gutter), env(safe-area-inset-right)); }
.book-mode.scroll-reading .reader-shell {
  max-width: 760px;
  padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right));
}
@media (max-width: 900px) {
  .cover-copy { padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right)); }
}
@media (max-width: 600px) {
  .cover-copy, .book-mode.scroll-reading .reader-shell { padding-inline: max(var(--space-3), env(safe-area-inset-left)) max(var(--space-3), env(safe-area-inset-right)); }
}