/* Composition v1. Final, shared presentation layer for the 13 main shells.
   Source ratios, route handlers, story text and audio state remain independent.
   The 8px rhythm and readable roles replace legacy 6–11px content overrides. */
:root {
  --composition-gutter:clamp(16px,2.5vw,40px);
  --composition-space:24px;
  --control-line:#79806e;
}
html {
  scroll-padding-top:calc(var(--archive-header-height,84px) + var(--quick-access-height,0px) + 16px);
  scroll-padding-bottom:calc(var(--audio-dock-height,0px) + 16px);
}
body { font-size:16px;line-height:1.75; }
button,input,select,textarea { letter-spacing:normal; }
:where(main,section,article,figure,header,footer,nav,dialog,div) { min-width:0; }
:where(button,a,input,select,textarea,summary):focus-visible { outline-width:3px;outline-offset:3px; }
:where(button,a,input,select,textarea,summary) { scroll-margin-block:16px; }
html[lang=ko] :where(h1,h2,h3,h4,p,li,dd) { word-break:keep-all;overflow-wrap:anywhere; }
html[lang=ko] :where(h1,h2,h3,h4) { letter-spacing:0;line-height:1.35; }
.eyebrow { font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.1em; }
.button,.text-link,.clear-button,.category-button,.episode-link,.episode-references {
  min-height:44px;font-size:14px;line-height:1.5;letter-spacing:0;white-space:normal;
}
.button,.category-button.active { font-weight:600; }
.button-outline,.search-wrap,.sort-label select,.reader-options button,.icon-button { border-color:var(--control-line); }
.icon-button { min-width:44px;min-height:44px; }

/* A legible identity between the two existing, independent banner controls. */
html .masthead,html[data-scene-mode=true] .masthead {
  height:var(--archive-header-height);min-height:var(--archive-header-height);
}
html .masthead .brand-archive-note,
html[data-scene-mode=true] .masthead .brand-archive-note {
  font-size:12px;line-height:1.35;letter-spacing:0;color:#c5a775;
}
html .masthead .header-tools>button,
html[data-scene-mode=true] .masthead .language-toggle,
html[data-scene-mode=true] .masthead .menu-toggle {
  font-size:14px;line-height:1.35;font-weight:500;padding:4px;min-height:44px;
}
.masthead nav .nav-group[data-menu-group] .nav-group-title {
  font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.04em;margin-bottom:8px;
}
.masthead nav a.dossier-link>span,.masthead nav a.nav-opening>span,
html[lang=ko] .masthead nav a.dossier-link>span,html[lang=ko] .masthead nav a.nav-opening>span {
  font:500 14px/1.5 var(--sans);letter-spacing:0;
}
.masthead nav a.is-current,.masthead nav a.is-current>span {
  color:#e9e5d9;background-color:#c5a77516;border-color:#c5a775;
}
.masthead nav a.is-current { box-shadow:inset 3px 0 #c5a775; }
@media(min-width:1100px) {
  .masthead nav,.masthead nav.is-open,
  html[data-scene-mode=true] .masthead nav,html[data-scene-mode=true] .masthead nav.is-open {
    top:var(--archive-header-height);bottom:var(--audio-dock-height);
    max-height:calc(var(--visual-viewport-height,100svh) - var(--archive-header-height) - var(--audio-dock-height));
    width:248px;gap:24px;scroll-padding-block:16px;
  }
}
@media(max-width:1099px) {
  .masthead nav.is-open {
    top:100%;max-height:calc(var(--visual-viewport-height,100svh) - var(--archive-header-height) - var(--audio-dock-height));
    scroll-padding-block:16px;
  }
}
@media(max-width:760px) {
  html .masthead .brand-archive-note,
  html[data-scene-mode=true] .masthead .brand-archive-note { font-size:11px; }
}
.basic-access-bar { font-size:14px; }
.basic-access-bar span { font-size:12px; }
.quick-access { gap:8px; }
.quick-access a { font-size:14px;font-weight:500;border-color:var(--control-line); }

/* The opening has independent media and invitation columns. A full-width identity row
   centers the logo above both columns; phones keep logo → film → letter → action.
   All idle content is in normal flow and may scroll above the real dock. */
#entry-scene {
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:0;padding:24px max(var(--composition-gutter),calc(var(--safe-right,0px) + 12px)) 32px max(var(--composition-gutter),calc(var(--safe-left,0px) + 12px));
  padding-top:max(24px,calc(var(--safe-top,0px) + 12px));
  overflow-y:auto;overflow-x:hidden;scroll-padding-block:24px;
}
#entry-scene .entry-welcome { display:contents; }
#entry-scene .entry-topline { z-index:7;align-self:stretch;width:100%; }
#entry-scene .entry-top-actions { gap:8px; }
#entry-scene .entry-top-actions .entry-skip,
#entry-scene .entry-top-actions .language-toggle,
#entry-scene .basic-entry-link {
  min-height:44px;font:500 14px/1.4 var(--sans);padding:8px 12px;border-color:#79806e;
}
#entry-scene .entry-welcome .entry-wordmark,
#entry-scene .entry-welcome .entry-textmark {
  position:relative;z-index:6;order:1;width:min(100%,320px);max-width:100%;
  height:auto;margin:24px auto 0;text-align:center;
}
#entry-scene .entry-welcome .entry-textmark { font:400 36px/1.2 var(--serif); }
#entry-scene .entry-textmark small { font:500 12px/1.5 var(--sans);letter-spacing:.1em; }
#entry-scene:not(.looking):not([data-playback-active=true]) .entry-stage {
  order:2;position:relative;inset:auto;top:auto;left:auto;transform:none;
  width:100%;max-width:100%;margin:24px 0 0;aspect-ratio:3/2;align-self:center;
}
#entry-scene .entry-frame { object-fit:contain; }
#entry-scene .entry-welcome-copy {
  order:3;position:relative;z-index:6;flex:0 0 auto;width:min(100%,46ch);
  max-width:46ch;margin:24px auto 0;text-align:left;text-shadow:none;
  font:400 17px/1.8 var(--serif);color:#e9e5d9;
}
html[lang=ko] #entry-scene .entry-welcome-copy { font:400 16px/1.8 var(--sans);word-break:keep-all;overflow-wrap:anywhere; }
#entry-scene .entry-welcome-copy p+p { margin-top:16px; }
#entry-scene .entry-welcome-signature {
  order:4;position:relative;z-index:6;flex:0 0 auto;width:min(100%,46ch);
  margin:24px auto 0;text-align:left;font:400 13px/1.6 var(--sans);color:#c5a775;text-shadow:none;
}
#entry-scene .entry-welcome-signature::before { margin:0 0 12px;width:32px;background:#c5a775; }
#entry-scene .entry-welcome-signature strong,
html[lang=ko] #entry-scene .entry-welcome-signature strong { font-size:18px;line-height:1.5;font-weight:400;letter-spacing:0;color:#e9e5d9; }
#entry-scene .entry-bottomline {
  order:5;position:relative;inset:auto;z-index:7;width:min(100%,46ch);
  margin:24px auto 0;text-align:left;
}
#entry-scene .entry-action {
  min-height:48px;padding:12px 24px;border:1px solid #c5a775;background:#c5a775;color:#141714;
  font:600 16px/1.5 var(--sans);text-shadow:none;letter-spacing:.02em;
}
#entry-scene .entry-action:hover { background:#dac294;color:#141714; }
#entry-scene .entry-status { max-width:46ch;margin:12px 0 0;font-size:14px;line-height:1.6;letter-spacing:0;color:#a4a79a; }
#entry-scene .entry-bottomline #opening-quote { font-size:14px;line-height:1.75; }
#entry-scene .entry-epigraph {
  order:6;position:relative;z-index:6;flex:0 0 auto;width:min(100%,76ch);
  margin:32px auto 0;padding-top:24px;border-top:1px solid #41453a;
  font:400 14px/1.8 var(--serif);color:#a4a79a;text-align:center;
}
#entry-scene .entry-epigraph blockquote,#entry-scene .entry-epigraph p { margin:0; }
#entry-scene .entry-epigraph figcaption { margin-top:8px;font:400 12px/1.6 var(--sans); }
#entry-scene .entry-epigraph a { display:inline-flex;align-items:center;min-height:44px;color:#c5a775;text-decoration:underline;text-underline-offset:4px; }
#entry-scene .entry-epigraph cite { font-style:normal; }
html[lang=ko] #entry-scene .entry-epigraph blockquote { font-family:var(--sans);word-break:keep-all;overflow-wrap:anywhere; }
#entry-scene .entry-preview-note { order:7;font-size:12px;line-height:1.6;color:#a4a79a; }
/* Preserve the fixed native-ratio action stage and the existing manual-play,
   skip and history controls. Text must disappear even with display:contents. */
#entry-scene.looking .entry-welcome>*,#entry-scene.looking .entry-epigraph,
#entry-scene[data-playback-active=true] .entry-welcome>*,#entry-scene[data-playback-active=true] .entry-epigraph { visibility:hidden;opacity:0;pointer-events:none; }
#entry-scene.looking .entry-stage,#entry-scene[data-playback-active=true] .entry-stage {
  position:fixed;left:50%;top:calc((var(--visual-viewport-height,100svh) - var(--audio-dock-height))/2);
  transform:translate(-50%,-50%);width:min(100vw,calc((var(--visual-viewport-height,100svh) - var(--audio-dock-height))*1.5));
  max-width:none;margin:0;
}
@media(min-width:761px) {
  #entry-scene {
    display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);
    grid-template-rows:auto auto auto auto auto auto;column-gap:32px;row-gap:16px;
    align-content:start;align-items:start;
  }
  #entry-scene .entry-topline { grid-column:1 / -1;grid-row:1;align-self:center; }
  #entry-scene .entry-top-actions { justify-content:flex-end; }
  #entry-scene .entry-welcome .entry-wordmark,
  #entry-scene .entry-welcome .entry-textmark { grid-column:1 / -1;grid-row:2;justify-self:center;align-self:center;margin:0; }
  #entry-scene:not(.looking):not([data-playback-active=true]) .entry-stage { grid-column:1;grid-row:3 / 6;align-self:start;margin:8px 0 0; }
  #entry-scene .entry-welcome-copy { grid-column:2;grid-row:3;width:100%;margin:8px 0 0; }
  #entry-scene .entry-welcome-signature { grid-column:2;grid-row:4;width:100%;margin:0; }
  #entry-scene .entry-bottomline { grid-column:2;grid-row:5;width:100%;margin:0; }
  #entry-scene .entry-bottomline #opening-quote { width:100%;max-width:none;margin:0 0 10px;text-align:left; }
  #entry-scene .entry-epigraph { grid-column:1 / -1;grid-row:6;margin-top:8px; }
  #entry-scene .entry-preview-note { grid-column:1 / -1; }
}
@media(max-width:760px) {
  #entry-scene { padding-top:max(16px,calc(var(--safe-top,0px) + 12px)); }
  #entry-scene .entry-top-actions { justify-content:center;gap:8px; }
  #entry-scene .entry-welcome .entry-wordmark { width:min(100%,280px);margin-top:24px; }
  #entry-scene .entry-welcome-copy { font-size:16px; }
  #entry-scene .entry-bottomline { text-align:center; }
  #entry-scene .entry-action { width:100%; }
  #entry-scene .entry-status { margin-inline:auto;text-align:center; }
}

/* Rooms: retain the complete source image at its exact ratio; establish one
   readable header, then 24/16px to art and 16px to the outside caption. */
html[data-scene-mode=true] { --room-gutter:var(--composition-gutter); }
html[data-scene-mode=true] .room-scroll-section {
  min-height:0;scroll-margin-top:calc(var(--archive-header-height) + var(--quick-access-height,68px) + 16px);
}
html[data-scene-mode=true] #site-content .interactive-study,
html[data-scene-mode=true] .room-scroll-preview {
  padding:32px max(var(--room-gutter),var(--safe-right,0px)) 48px max(var(--room-gutter),var(--safe-left,0px));
}
html[data-scene-mode=true] #site-content .interactive-study {
  display:block;
}
.interactive-study .study-heading,.room-scroll-preview .room-scroll-preview-heading {
  margin-bottom:24px;padding:0;gap:16px;min-height:0;
}
html[data-scene-mode=true] .interactive-study .study-heading h1,
html[data-scene-mode=true] .room-scroll-preview h2 {
  font-size:clamp(32px,3vw,40px);line-height:1.2;font-weight:400;letter-spacing:0;
}
html[lang=ko][data-scene-mode=true] .interactive-study .study-heading h1,
html[lang=ko][data-scene-mode=true] .room-scroll-preview h2 { line-height:1.35;letter-spacing:0; }
.interactive-study .study-heading p:last-child,.room-scroll-preview .room-scroll-preview-heading p {
  margin:8px 0 0;font-size:16px;line-height:1.75;
}
.interactive-study .study-toolbar { gap:8px; }
.interactive-study .study-toolbar .button { font-size:14px;line-height:1.5;font-weight:500;padding:10px 16px; }
.interactive-study .study-frame { display:grid;grid-template-columns:minmax(0,1fr);gap:16px; }
.interactive-study .study-caption-rail { grid-column:auto;width:100%;max-width:none;text-align:center; }
.interactive-study .study-caption-rail .button,.interactive-study #study-main-action,
.room-scroll-preview button.room-scroll-preview-caption { font-size:14px;min-height:48px;padding:12px 24px;line-height:1.5;font-weight:600; }
.room-scroll-preview button.room-scroll-preview-caption { margin-top:16px; }
.interactive-study .study-actions { padding:16px 0 0;gap:12px 16px;justify-content:center;text-align:center; }
.interactive-study .study-actions>p:first-child { flex:1 1 100%;max-width:68ch;font-size:16px;line-height:1.75; }
.interactive-study .study-object-caption,.interactive-study #study-skip-action,
.interactive-study #study-manual-play { font-size:14px;line-height:1.5;padding:10px 16px; }
.interactive-study .study-actions #study-status { font-size:14px;line-height:1.6; }
@media(max-width:760px) {
  html[data-scene-mode=true] #site-content .interactive-study,
  html[data-scene-mode=true] .room-scroll-preview { padding-top:24px;padding-bottom:32px; }
  .interactive-study .study-heading,.room-scroll-preview .room-scroll-preview-heading { margin-bottom:16px;padding-bottom:0; }
  /* Keep the inactive room’s heading footprint aligned with the 44px toolbar. */
  .room-scroll-preview .room-scroll-preview-heading { padding-bottom:60px; }
  html[data-scene-mode=true] .interactive-study .study-heading h1,
  html[data-scene-mode=true] .room-scroll-preview h2 { font-size:30px; }
}

/* Shared reading and collection rhythm, including the standalone fallback. */
.hero,.archive-section,.episodes-section,.about-section,
.info-page,.archive-notebook .info-page,.archive-notebook .utility-page,
.archive-notebook .archive-section,.archive-notebook .episodes-section {
  padding:48px var(--composition-gutter);
}
.hero h1,.info-page h1,html[lang=ko] .info-page h1,.archive-notebook .info-page h1,
.reading-title h1,.story-gate h1,html[lang=ko] .story-gate h1 {
  font:400 clamp(44px,4vw,56px)/1.2 var(--serif);letter-spacing:0;margin:16px 0 24px;
}
.utility-page h1 { font-size:clamp(44px,4vw,56px)!important; }
html[lang=ko] .info-page h1,html[lang=ko] .story-gate h1,
html[lang=ko] .archive-notebook .info-page h1 { line-height:1.35; }
.section-heading { align-items:start;gap:24px;margin-bottom:24px; }
.section-heading h2,.about-section h2,.archive-notebook .section-heading h2 { font-size:36px;line-height:1.25;letter-spacing:0; }
.section-heading>p,.hero-description,.info-page>p,.utility-section p,
.archive-notebook .utility-section p,.notebook-page .content-lead,.notebook-page .content-main p,
.editorial-page p,.editorial-page li,.about-copy,.archive-notebook .design-notes p {
  font-size:17px;line-height:1.8;
}
.editorial-page p,.info-page>p,.utility-section,.about-copy { max-width:68ch; }
.editorial-page .editorial-lead { font-size:clamp(24px,2.5vw,30px);line-height:1.6; }
.editorial-page h2 { margin:48px 0 16px;font-size:32px;line-height:1.3;font-weight:400; }
.editorial-page h3,.editorial-page .gallery-card h3 { font-size:22px;line-height:1.4;font-weight:400; }
.editorial-page .editorial-note,.editorial-page .interview-editorial-note,
.editorial-page .gallery-card p,.soundtrack-player .soundtrack-status { font-size:14px;line-height:1.75; }
.archive-controls,.filter-row { gap:16px; }
.search-wrap { max-width:100%;min-width:0; }
.search-wrap input,.archive-notebook .search-wrap input { font-size:16px;min-height:24px; }
.spoiler-control { min-height:44px;font-size:14px;line-height:1.5; }
.spoiler-control small,.category-button span,.sort-label,.result-line p { font-size:12px;line-height:1.5; }
.sort-label select { min-height:44px;font-size:14px;border:1px solid var(--control-line); }
.category-filters { gap:8px 16px; }
.reference-card h3,.archive-notebook .card-name { font-size:24px;line-height:1.3; }
.reference-card .card-description { font-size:16px;line-height:1.75; }
.card-meta { align-items:start;flex-wrap:wrap;gap:4px 8px;font-size:12px;line-height:1.5;letter-spacing:.03em; }
.card-status,.card-number,.card-coverage,.collection-note { font-size:12px;line-height:1.6;letter-spacing:0; }
.card-status { white-space:normal; }
.collection-note { margin-top:24px;padding-top:16px; }
.episode-meta { font-size:12px;line-height:1.5;letter-spacing:.03em; }
.episode-card h3 { font-size:20px;line-height:1.4;font-weight:500; }
.episode-references,.episode-link { display:inline-flex;align-items:center; }
.detail-text>p,.archive-notebook .detail-text p { font-size:16px;line-height:1.8; }
.detail-text .eyebrow,.detail-image-actions span { font-size:12px;line-height:1.6; }
.detail-text .detail-help { font-size:12px!important;line-height:1.6; }
.detail-text dt { font-size:12px;line-height:1.5; }
.detail-text dd,.design-notes p,.story-entry p { font-size:16px;line-height:1.8; }
.detail-text .button,.detail-episode-link { font-size:14px;line-height:1.5;min-height:44px; }
.design-notes h3 { font-size:20px;line-height:1.4; }
.archive-notebook .design-notes p { color:var(--muted); }
.channel-banner-copy>.eyebrow { font-size:12px;line-height:1.5; }
.channel-banner-copy>span:not(.eyebrow),.channel-banner-copy>strong { font-size:16px;line-height:1.7; }
.info-page .credits-record { font-size:16px;line-height:1.8; }
.gallery,.gallery-grid { gap:32px 24px; }
@media(max-width:760px) {
  .hero,.archive-section,.episodes-section,.about-section,
  .info-page,.archive-notebook .info-page,.archive-notebook .utility-page,
  .archive-notebook .archive-section,.archive-notebook .episodes-section { padding:32px var(--composition-gutter); }
  .hero h1,.info-page h1,html[lang=ko] .info-page h1,.archive-notebook .info-page h1,
  .reading-title h1,.story-gate h1,html[lang=ko] .story-gate h1,
  html[lang=ko] .archive-notebook .story-gate h1,html[lang=ko] .archive-notebook .info-page h1 { font-size:36px; }
  .utility-page h1 { font-size:36px!important; }
  .section-heading { flex-direction:column;gap:8px; }
  .section-heading h2,.about-section h2,.archive-notebook .section-heading h2 { font-size:30px; }
  .section-heading>p,.hero-description,.info-page>p,.utility-section p,
  .archive-notebook .utility-section p,.editorial-page p,.editorial-page li,.about-copy { font-size:16px; }
  .editorial-page h2 { font-size:28px;margin-top:32px; }
  .archive-controls,.filter-row { flex-wrap:wrap; }
  .search-wrap { width:100%; }
  .archive-notebook .gallery,.gallery { grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px; }
  .reference-card h3,.archive-notebook .card-name { font-size:22px; }
  .episode-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px; }
}
@media(max-width:480px) {
  .archive-notebook .gallery,.gallery { grid-template-columns:minmax(0,1fr); }
}

/* Paper controls need a slightly darker boundary than #7c7d6b on the existing
   #ddd5c2 input / #ded5bf toolbar surfaces (3.22:1 instead of 2.87:1).
   Paper uses its own contrast-safe tokens. In particular, card descriptions,
   state labels and notes must not retain pale hardcoded dark-theme colors. */
.paper-mode,.archive-notebook:not(.reader-night-mode) {
  --ink:#e8e1cf;--ink-2:#ddd5c2;--paper:#292d26;--muted:#565b4b;--brass:#70592f;--control-line:#747563;
}
.archive-notebook.reader-night-mode { --control-line:#79806e; }
.archive-notebook .reference-card .card-description,
.archive-notebook .card-status,.archive-notebook .card-meta,.archive-notebook .card-coverage,
.archive-notebook .collection-note { color:var(--muted); }
.archive-notebook .card-name { color:var(--paper); }
.archive-notebook .notebook-tools button { border-color:var(--control-line);font-size:14px;line-height:1.4; }
.archive-notebook .notebook-wordmark { font-size:12px;line-height:1.5;letter-spacing:.06em; }
.archive-notebook .notebook-toolbar h2 { font-size:28px;line-height:1.3; }
.archive-notebook .notebook-preview-note { font-size:12px;line-height:1.5;color:var(--muted); }
.archive-notebook .notebook-scroll { scroll-padding-top:88px;scroll-padding-bottom:24px; }
.archive-notebook .notebook-index span { font-size:24px;line-height:1.4; }
.archive-notebook .notebook-index small { font-size:14px;line-height:1.6;color:var(--muted); }
.reader-layout,.archive-notebook .reader-layout { grid-template-columns:minmax(160px,210px) minmax(0,760px);gap:32px;padding-inline:var(--composition-gutter); }
.reading-area { width:100%;max-width:760px; }
.chapter p,.archive-notebook .chapter p { max-width:68ch;font-size:var(--reader-text-size,18px);line-height:1.85; }
.chapter h2,.archive-notebook .chapter h2 { font-size:36px;line-height:1.25; }
.reading-area:lang(ko) .chapter h2 { line-height:1.35; }
.reader-toolbar { gap:12px;padding:12px var(--composition-gutter); }
.reader-return,.reader-back,.toc summary,.toc summary span[data-i18n=contents],
.toc a,.archive-notebook .toc a,#chapter-select,.archive-notebook #chapter-select,
.reader-options button,.archive-notebook .reader-options button { font-size:14px;line-height:1.5;min-height:44px; }
.toc a { display:flex;align-items:center; }
.toc a span,.toc summary span,.reading-edition,.byline,.chapter-footer,.archive-notebook .chapter-footer { font-size:12px;line-height:1.6; }
.reader-return,.reader-back,.chapter-footer a { display:inline-flex;align-items:center;min-height:44px; }
.story-gate>p:not(.eyebrow),.story-gate .spoiler-warning p { font-size:16px;line-height:1.8; }
.story-gate .spoiler-warning .source-note { font-size:12px; }
@media(max-width:1000px) {
  .reader-layout,.archive-notebook .reader-layout { display:block; }
  .toc,.archive-notebook .toc { position:static;max-height:none;margin-top:24px;padding-right:0; }
  .toc nav { max-height:40vh;overflow-y:auto; }
  .reading-area { margin-inline:auto; }
}
@media(max-width:760px) {
  .archive-notebook .notebook-toolbar { min-height:124px;gap:8px;padding:12px 16px; }
  .archive-notebook .notebook-toolbar h2 { font-size:24px; }
  .archive-notebook .notebook-tools { flex-wrap:wrap;gap:8px; }
  .archive-notebook .notebook-tools button { font-size:14px;padding:8px; }
  .chapter h2,.archive-notebook .chapter h2 { font-size:30px; }
  .reader-toolbar { flex-wrap:wrap; }
}

/* Footer and soundtrack controls share readable roles without changing the
   118px desktop / 58px collapsed / 240px expanded dock state contracts. */
.site-footer { padding:32px var(--composition-gutter);gap:24px 32px;font-size:14px;line-height:1.6; }
.footer-project .footer-brand,.footer-project p,.site-footer>.entry-replay { font-size:14px;line-height:1.6; }
.footer-links { gap:8px 24px; }
.other-content-eyebrow,.other-content-note,.soundtrack-player figcaption,.music-credits summary { font-size:14px;line-height:1.6; }
.site-footer .music-credits p,.site-footer [data-visit-counter] { font-size:12px;line-height:1.75; }
html .warden-audio .warden-audio__toggle,html .warden-audio .warden-audio__stop,
html .warden-audio .warden-audio__volume,.warden-audio__effects-volume,
.warden-audio__ambience button { font-size:14px;line-height:1.35; }
html .warden-audio .warden-audio__status,.warden-audio__ambience p { font-size:12px;line-height:1.4; }
html .warden-audio .warden-audio__stop,.warden-audio__transport button,
.warden-audio .warden-audio__expand,.warden-audio__ambience button { border-color:#79806e; }
@media(max-width:760px) {
  html[data-audio-dock-mobile=true] .warden-audio .warden-audio__toggle,
  html[data-audio-dock-mobile=true] .warden-audio .warden-audio__stop { font-size:14px;padding:2px 4px;gap:4px; }
  .warden-audio__ambience .warden-audio__effects-volume { font-size:12px; }
}
@media(forced-colors:active) {
  :root,.paper-mode,.archive-notebook:not(.reader-night-mode),.archive-notebook.reader-night-mode { --control-line:ButtonText; }
  #entry-scene .entry-action { background:ButtonFace;color:ButtonText;border-color:ButtonText; }
  #entry-scene .entry-welcome-copy,#entry-scene .entry-welcome-signature,#entry-scene .entry-welcome-signature strong,
  #entry-scene .entry-status,#entry-scene .entry-epigraph { color:CanvasText; }
  #entry-scene .entry-epigraph a { color:LinkText; }
}

/* Pending/playback owns a viewport-sized layout, with actual control regions
   outside the fixed film. Native hidden is authoritative during fade/recovery. */
#entry-scene[data-playback-active=true],#entry-scene.looking {
  --entry-controls-top:calc(80px + var(--safe-top,0px));--entry-controls-bottom:80px;
  display:flex;justify-content:space-between;overflow:hidden;gap:0;
}
#entry-scene[data-playback-active=true]:has(#entry-manual-play:not([hidden])),
#entry-scene.looking:has(#entry-manual-play:not([hidden])) { --entry-controls-bottom:160px; }
#entry-scene[data-playback-active=true] .entry-topline,#entry-scene.looking .entry-topline { flex:0 0 auto; }
#entry-scene[data-playback-active=true] .entry-bottomline,#entry-scene.looking .entry-bottomline {
  flex:0 0 auto;width:min(100%,680px);margin:0 auto;text-align:center;
}
#entry-scene[data-playback-active=true] .entry-status,#entry-scene.looking .entry-status { max-width:none;margin:8px auto 0; }
#entry-scene[data-playback-active=true] .entry-stage,#entry-scene.looking .entry-stage {
  --entry-film-height:max(0px,calc(var(--visual-viewport-height,100svh) - var(--audio-dock-height) - var(--entry-controls-top) - var(--entry-controls-bottom)));
  position:fixed;left:50%;top:calc(var(--entry-controls-top) + var(--entry-film-height)/2);
  width:min(100vw,calc(var(--entry-film-height)*1.5));max-width:none;margin:0;
  transform:translate(-50%,-50%);
}
#entry-scene [hidden] { display:none!important; }
@media(max-width:760px) {
  #entry-scene[data-playback-active=true],#entry-scene.looking { --entry-controls-top:calc(128px + var(--safe-top,0px));--entry-controls-bottom:96px; }
  #entry-scene[data-playback-active=true]:has(#entry-manual-play:not([hidden])),
  #entry-scene.looking:has(#entry-manual-play:not([hidden])) { --entry-controls-bottom:144px; }
}

/* Toolbar height is content-owned: translated/wrapped controls consume their
   actual flex height; the notebook scroll region receives only the remainder. */
.archive-notebook[open] { display:flex;flex-direction:column; }
.archive-notebook .notebook-toolbar,.archive-notebook .notebook-preview-note { height:auto;flex:0 0 auto; }
.archive-notebook .notebook-scroll { flex:1 1 auto;min-height:0;height:auto!important;overflow:auto; }
@media(max-height:600px) {
  #entry-scene[data-playback-active=true],#entry-scene.looking {
    --entry-controls-top:calc(60px + var(--safe-top,0px));--entry-controls-bottom:56px;
    padding-top:max(8px,var(--safe-top,0px));padding-bottom:8px;
  }
  #entry-scene[data-playback-active=true]:has(#entry-manual-play:not([hidden])),
  #entry-scene.looking:has(#entry-manual-play:not([hidden])) { --entry-controls-bottom:112px; }
  #entry-scene[data-playback-active=true] .entry-top-actions .entry-skip,
  #entry-scene[data-playback-active=true] .entry-top-actions .language-toggle,
  #entry-scene[data-playback-active=true] .basic-entry-link { font-size:12px;padding:4px 8px; }
  #entry-scene[data-playback-active=true] .entry-status,#entry-scene.looking .entry-status { font-size:12px;line-height:1.5;margin-top:8px; }
  #entry-scene[data-playback-active=true] .entry-manual-play,#entry-scene.looking .entry-manual-play { min-height:44px;padding:8px 12px;margin:8px auto; }
}
@media(max-height:600px) and (max-width:760px) {
  #entry-scene[data-playback-active=true],#entry-scene.looking { --entry-controls-top:calc(112px + var(--safe-top,0px));--entry-controls-bottom:72px; }
  #entry-scene[data-playback-active=true]:has(#entry-manual-play:not([hidden])),
  #entry-scene.looking:has(#entry-manual-play:not([hidden])) { --entry-controls-bottom:120px; }
}
/* A very short phone landscape viewport (especially with the expanded dock)
   cannot hold film + fallback controls at once. Use honest scrolling in this
   exceptional state instead of shrinking the film to zero or covering pixels. */
@media(max-height:420px) and (max-width:760px) {
  #entry-scene[data-playback-active=true],#entry-scene.looking {
    justify-content:flex-start;overflow-y:auto;gap:16px;padding-bottom:24px;
  }
  #entry-scene[data-playback-active=true] .entry-topline,#entry-scene.looking .entry-topline { order:0; }
  #entry-scene[data-playback-active=true] .entry-stage,#entry-scene.looking .entry-stage {
    order:2;position:relative;top:auto;left:auto;transform:none;
    width:100%;max-width:100%;margin:0;flex:0 0 auto;aspect-ratio:3/2;
  }
  #entry-scene[data-playback-active=true] .entry-bottomline,#entry-scene.looking .entry-bottomline { order:5; }
}

/* Expanded controls plus a short phone screen leave too little space even
   before a notch is counted. Keep the full film and controls in scroll flow. */
@media(max-height:600px) and (max-width:760px) {
  html[data-audio-dock-expanded=true] #entry-scene[data-playback-active=true],
  html[data-audio-dock-expanded=true] #entry-scene.looking {
    justify-content:flex-start;overflow-y:auto;gap:16px;padding-bottom:24px;
  }
  html[data-audio-dock-expanded=true] #entry-scene[data-playback-active=true] .entry-topline,
  html[data-audio-dock-expanded=true] #entry-scene.looking .entry-topline { order:0; }
  html[data-audio-dock-expanded=true] #entry-scene[data-playback-active=true] .entry-stage,
  html[data-audio-dock-expanded=true] #entry-scene.looking .entry-stage {
    order:2;position:relative;top:auto;left:auto;transform:none;
    width:100%;max-width:100%;margin:0;flex:0 0 auto;aspect-ratio:3/2;
  }
  html[data-audio-dock-expanded=true] #entry-scene[data-playback-active=true] .entry-bottomline,
  html[data-audio-dock-expanded=true] #entry-scene.looking .entry-bottomline { order:5; }
}

/* In the compact blocked-audio state, reserve space for both Continue and
   Stop instead of giving Stop its unwrapped max-content column. The icon is
   decorative; hiding it keeps the full readable label and all four controls
   inside the same 44px row / 58px dock even on a narrow, inset phone. */
@media(max-width:400px) {
  html[data-audio-dock-mobile=true] .warden-audio[data-audio-compact=true][data-audio-playlist=true]:has(>.warden-audio__stop:not([hidden])) {
    grid-template-columns:minmax(44px,1fr) 92px 52px 44px;
  }
  html[data-audio-dock-mobile=true] .warden-audio[data-audio-compact=true][data-audio-playlist=true]:has(>.warden-audio__stop:not([hidden])) .warden-audio__toggle { letter-spacing:normal; }
  html[data-audio-dock-mobile=true] .warden-audio[data-audio-compact=true][data-audio-playlist=true]:has(>.warden-audio__stop:not([hidden])) .warden-audio__icon { display:none; }
}

/* Reload hydration stays concealed only until its saved viewport is restored. */
html[data-reload-restoring="true"] #site-content,html[data-reload-restoring="true"] #archive-notebook{visibility:hidden}
html[data-reload-restoring="true"]{overflow-anchor:none}