/* The existing approved horizontal logo is the top banner; no new artwork. */
:root { --archive-header-height:calc(84px + var(--safe-top,0px));--audio-dock-height:calc(70px + var(--safe-bottom,0px)); }
html[data-scene-mode=true] .masthead {
  position:sticky;
  top:0;
  z-index:30;
  width:100%;
  max-width:none;
  height:var(--archive-header-height);
  min-height:var(--archive-header-height);
  margin:0;
  padding:calc(7px + var(--safe-top,0px)) max(20px,var(--safe-right,0px)) 7px max(20px,var(--safe-left,0px));
  gap:12px;
  flex-wrap:nowrap;
  border-bottom:1px solid #c5a77566;
  background:linear-gradient(90deg,#1c211a,#141914 64%,#111610);
}
html[data-scene-mode=true] .masthead .brand { flex:0 1 auto;min-width:0;max-width:360px;gap:3px; }
html[data-scene-mode=true] .masthead .approved-logo { width:300px;max-width:100%;height:auto;max-height:55px;object-fit:contain; }
html[data-scene-mode=true] .masthead .brand-archive-note { font-size:8px;line-height:1.4;letter-spacing:1px;overflow-wrap:anywhere; }
html[data-scene-mode=true] .masthead .header-tools { flex:0 0 auto;max-width:none;gap:8px;flex-wrap:nowrap; }
html[data-scene-mode=true] .masthead .language-toggle,
html[data-scene-mode=true] .masthead .menu-toggle { min-width:78px;min-height:44px;max-width:100%; }
@media(min-width:1100px) {
  html[data-scene-mode=true] .masthead nav,
  html[data-scene-mode=true] .masthead nav.is-open {
    position:fixed;
    left:0;
    right:auto;
    top:var(--archive-header-height);
    bottom:var(--audio-dock-height);
    width:var(--room-sidebar-width,248px);
    max-height:calc(var(--visual-viewport-height,100svh) - var(--archive-header-height) - var(--audio-dock-height));
    padding:16px 14px max(20px,var(--safe-bottom,0px));
    gap:16px;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#111711;
  }
}
@media(max-width:1099px) {
  html[data-scene-mode=true] .masthead .brand { flex:1 1 auto; }
  html[data-scene-mode=true] .masthead nav.is-open {
    position:absolute;
    top:100%;
    max-height:calc(var(--visual-viewport-height,100svh) - var(--archive-header-height) - var(--audio-dock-height));
    padding-bottom:max(20px,var(--safe-bottom,0px));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}
@media(max-width:760px) {
  html[data-scene-mode=true] .masthead { padding-left:max(12px,var(--safe-left,0px));padding-right:max(12px,var(--safe-right,0px));gap:10px; }
  html[data-scene-mode=true] .masthead .brand { min-width:0; }
  html[data-scene-mode=true] .masthead .approved-logo { width:195px;max-width:100%;max-height:44px; }
  html[data-scene-mode=true] .masthead .brand-archive-note { font-size:6px;letter-spacing:.35px; }
  html[data-scene-mode=true] .masthead .header-tools { gap:6px; }
  html[data-scene-mode=true] .masthead .language-toggle,
  html[data-scene-mode=true] .masthead .menu-toggle { font-size:10px;padding:7px; }
}
@media(forced-colors:active) {
  html[data-scene-mode=true] .masthead { background:Canvas;border-color:CanvasText; }
}

/* Persistent soundtrack dock. Layout reserves its height; controls never float
   inside a scene. A modal gets its own manager-bound panel in normal flow. */
html body { padding-bottom:var(--audio-dock-height); }
html body>.warden-audio,
html[data-scene-mode=true] body>.warden-audio,
html[data-entry-open=true] body>.warden-audio,
html .archive-notebook>.warden-audio {
  display:grid;
  grid-template-columns:minmax(110px,180px) auto minmax(80px,1fr) minmax(180px,280px);
  grid-template-areas:"toggle stop status volume";
  align-items:center;
  gap:8px 18px;
  visibility:visible;
  position:fixed;
  z-index:120;
  inset:auto 0 0;
  width:100%;
  height:var(--audio-dock-height);
  min-width:0;
  margin:0;
  padding:10px max(20px,var(--safe-right,0px)) calc(10px + var(--safe-bottom,0px)) max(20px,var(--safe-left,0px));
  border:0;
  border-top:1px solid #b49a6766;
  border-radius:0;
  background:#111710;
  box-shadow:none;
}
html .warden-audio .warden-audio__toggle { grid-area:toggle;width:auto;min-width:44px;min-height:44px;margin:0;padding:6px 4px;font-size:12px;line-height:1.35; }
html .warden-audio .warden-audio__stop { grid-area:stop;width:auto;min-width:44px;min-height:44px;margin:0;padding:6px 10px;border:1px solid #b49a6766;color:var(--audio-ivory);background:transparent;font:inherit;font-size:12px; }
html .warden-audio .warden-audio__status { grid-area:status;min-width:0;min-height:0;max-height:44px;overflow:auto;margin:0;font-size:11px;line-height:1.4; }
html .warden-audio .warden-audio__volume { grid-area:volume;display:flex;min-width:0;min-height:44px;margin:0;gap:10px;font-size:11px; }
html .warden-audio .warden-audio__volume input { display:block;min-width:44px;min-height:44px;width:100%; }
html .warden-audio .warden-audio__volume>span { flex-shrink:0; }
html .warden-audio button:focus-visible,
html .warden-audio input:focus-visible { outline:3px solid #f0e7d3;outline-offset:2px; }
html[data-notebook-open=true] body>.warden-audio { display:none; }
html .archive-notebook>.warden-audio {
  position:static;
  inset:auto;
  z-index:auto;
  flex:0 0 var(--audio-dock-height);
  min-height:var(--audio-dock-height);
  padding-left:15px;
  padding-right:15px;
}
html .archive-notebook .notebook-scroll { min-height:0; }
html .entry-scene {
  bottom:var(--audio-dock-height);
  height:calc(var(--visual-viewport-height,100svh) - var(--audio-dock-height));
  max-height:calc(var(--visual-viewport-height,100svh) - var(--audio-dock-height));
}
@media(min-width:761px) {
  html .entry-scene .entry-stage { width:min(100%,calc((var(--visual-viewport-height,100svh) - var(--audio-dock-height) - 140px)*1.5)); }
}
@media(max-width:760px) {
  :root { --audio-dock-height:calc(105px + var(--safe-bottom,0px)); }
  html body>.warden-audio,
  html[data-scene-mode=true] body>.warden-audio,
  html[data-entry-open=true] body>.warden-audio,
  html .archive-notebook>.warden-audio {
    grid-template-columns:minmax(0,1fr) auto minmax(100px,1fr);
    grid-template-rows:44px minmax(0,1fr);
    grid-template-areas:"toggle stop volume" "status status status";
    gap:2px 8px;
    padding:7px max(12px,var(--safe-right,0px)) calc(7px + var(--safe-bottom,0px)) max(12px,var(--safe-left,0px));
  }
  html .warden-audio .warden-audio__toggle { font-size:11px;gap:5px; }
  html .warden-audio .warden-audio__stop { font-size:11px;padding:6px; }
  html .warden-audio .warden-audio__status { align-self:center;max-height:38px;font-size:10px; }
  html .warden-audio .warden-audio__volume { gap:5px;font-size:10px; }
}
@media(forced-colors:active) {
  html body>.warden-audio,
  html .archive-notebook>.warden-audio { background:Canvas;color:CanvasText;border-color:CanvasText; }
}

/* One native home anchor covers the banner. Controls are siblings above it,
   never nested links; their clicks retain their own menu/language actions. */
html .masthead,
html[data-scene-mode=true] .masthead { isolation:isolate;min-height:var(--archive-header-height); }
html .masthead .brand,
html[data-scene-mode=true] .masthead .brand {
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
  max-width:none;
  margin:0;
  padding:calc(7px + var(--safe-top,0px)) max(112px,calc(112px + var(--safe-left,0px)),calc(112px + var(--safe-right,0px))) 7px;
  gap:3px;
  text-align:center;
}
html .masthead .brand:focus-visible { outline:3px solid #f0e7d3;outline-offset:-4px; }
html .masthead .brand .approved-logo { width:300px;max-width:100%;max-height:55px;height:auto;object-fit:contain; }
html .masthead .brand-archive-note { max-width:100%;text-align:center;overflow-wrap:anywhere; }
html .masthead .header-tools,
html[data-scene-mode=true] .masthead .header-tools { display:contents; }
html .masthead .header-tools>.edition { display:none; }
html .masthead .header-tools>button {
  position:absolute;
  z-index:2;
  top:calc(50% + var(--safe-top,0px)/2);
  transform:translateY(-50%);
  min-height:44px;
  width:88px;
  min-width:0;
  max-width:88px;
}
html .masthead .header-tools>[data-menu-toggle] { left:max(20px,var(--safe-left,0px));right:auto; }
html .masthead .header-tools>[data-language-toggle] { right:max(20px,var(--safe-right,0px));left:auto; }
@media(max-width:760px) {
  html .masthead .brand,
  html[data-scene-mode=true] .masthead .brand {
    padding-left:max(100px,calc(100px + var(--safe-left,0px)),calc(100px + var(--safe-right,0px)));
    padding-right:max(100px,calc(100px + var(--safe-left,0px)),calc(100px + var(--safe-right,0px)));
  }
  html .masthead .brand .approved-logo { width:195px;max-width:100%;max-height:44px; }
  html .masthead .header-tools>button { width:78px;min-width:0;max-width:78px;padding:7px;font-size:10px; }
  html .masthead .header-tools>[data-menu-toggle] { left:max(12px,var(--safe-left,0px)); }
  html .masthead .header-tools>[data-language-toggle] { right:max(12px,var(--safe-right,0px)); }
}