/* Interaction and compact-layout layer. Desktop film-strip design stays in styles.css. */
.film-mobile-caption,
.script-mobile-detail,
.about-mobile-portrait,
.reader-compact-label,
.menu-label { display: none; }

.site-shell {
  --nav-idle: #aaa;
  --nav-current: #dedede;
  --nav-hover: #fff;
}
body[data-route="about"] .site-shell,
body[data-route="scripts"] .site-shell {
  --nav-idle: #696b65;
  --nav-current: #30322e;
  --nav-hover: #000;
}
.site-nav { gap: 0; visibility: hidden; }
.nav-cluster.is-open .site-nav { visibility: visible; }
body[data-route] .site-shell .site-nav :is(a, button) {
  align-items: center;
  color: var(--nav-idle);
  display: inline-flex;
  justify-content: flex-end;
  min-height: 30px;
  transition: color 180ms ease, transform 240ms var(--ease-out);
}
body[data-route] .site-shell .site-nav [aria-current="page"] { color: var(--nav-current); }
body[data-route] .site-shell .site-nav :is(a, button):is(:hover, :focus-visible) {
  color: var(--nav-hover);
  transform: translateX(-4px);
}
.site-nav :is(a, button)::after {
  background: currentColor;
  bottom: 4px;
  content: "";
  display: block;
  height: 1px;
  inset-inline: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms var(--ease-out);
}
.player-progress::-moz-range-track { background: #ffffff8c; height: 1px; }
.player-progress::-moz-range-thumb { background: #fff; border: 0; border-radius: 50%; height: 7px; width: 7px; }

/* Mobile comp, August 2026. All spatial changes live here; desktop is untouched.
   Native scrolling, one visible loop, no carousel package or full-screen menu. */
@media (max-width: 900px), (hover: none) and (max-width: 1200px) {
  body { background: #000; overflow-x: clip; overflow-y: auto; }
  body[data-route="scripts"] { background: #f0f0ec; }
  body:is(.player-open, .reader-open) { overflow: hidden; }
  .site-shell {
    --compact-left: max(24px, env(safe-area-inset-left));
    --compact-right: max(24px, env(safe-area-inset-right));
    --compact-header: calc(64px + env(safe-area-inset-top));
    --compact-surface: #000;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100svh;
  }
  body[data-route="home"] .site-shell,
  body[data-route="about"] .site-shell {
    --about-ink: #fff;
    --nav-idle: #838d8c;
    --nav-current: #dedede;
    --nav-hover: #fff;
    animation: none;
    background: #000;
    color: #fff;
  }
  body[data-route="scripts"] .site-shell { --compact-surface: #f0f0ec; }
  body[data-route="about"] :is(.wordmark, .nav-cluster) { color: #fff; }
  body[data-route] .site-header {
    background: var(--compact-surface);
    flex: 0 0 auto;
    height: var(--compact-header);
    padding: env(safe-area-inset-top) var(--compact-right) 0 var(--compact-left);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  body[data-route] .identity-line { overflow: visible; }
  body[data-route] .identity-cycle { display: none; }
  body[data-route] .wordmark {
    align-items: center;
    display: inline-flex;
    font-size: 17px;
    letter-spacing: 0;
    line-height: 1.2;
    min-height: 44px;
    transform: none;
  }
  body[data-route] .wordmark::before { display: none; }
  body[data-route] .wordmark:is(:hover, :focus-visible) { letter-spacing: 0; transform: none; }
  body[data-route] #app { flex: 1 0 auto; overflow: visible; }
  .page { height: auto; min-height: 0; transform: none; transition: opacity 180ms ease; }
  .page.is-leaving { transform: none; transition-duration: 140ms; }
  .nav-cluster { position: relative; }
  .nav-cluster::before { display: none; }
  body[data-route] .menu-toggle { gap: 0; height: 44px; min-width: 44px; transform: none; }
  .menu-toggle .menu-dot { height: 14px; width: 14px; }
  body[data-route] .site-nav {
    align-items: flex-end;
    backdrop-filter: none;
    background: var(--compact-surface);
    bottom: auto;
    gap: 0;
    height: auto;
    justify-content: flex-start;
    left: auto;
    max-height: calc(100svh - var(--compact-header) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 8px 16px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 100%;
    transform: translateY(-4px);
    transition-duration: 200ms;
    width: 170px;
    z-index: 3;
  }
  body[data-route] .nav-cluster.is-open .site-nav { transform: none; }
  body[data-route] .site-shell .site-nav :is(a, button) {
    border: 0;
    display: flex;
    flex: 0 0 auto;
    font: 400 14px/1.2 "Autoscape Round", "Space Mono", monospace;
    justify-content: flex-end;
    min-height: 44px;
    padding: 0;
    text-align: right;
    width: 100%;
  }
  body[data-route] .site-shell .site-nav :is(a, button):is(:hover, :focus-visible) { transform: translateX(-3px); }
  .site-nav :is(a, button)::after { display: none; }
  body[data-route] .site-footer { display: none; }

  .home-page {
    align-items: flex-end;
    display: flex;
    height: calc(100svh - var(--compact-header));
    min-height: 420px;
    padding: 0 0 max(24px, env(safe-area-inset-bottom));
  }
  .home-page::after { display: none; }
  .film-viewport {
    inset: auto;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    scroll-snap-type: x mandatory;
    width: 100%;
  }
  .film-strip { display: flex; flex-direction: row; gap: 0; left: auto; padding: 0; position: static; top: auto; width: 100%; }
  .home-page .film-card,
  .home-page .film-card:is(:hover, :focus-visible) {
    flex: 0 0 100%;
    height: auto;
    opacity: 1;
    padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: none;
    transition: none;
    width: 100%;
  }
  .home-page .film-card:focus-visible { outline-offset: -5px; }
  .film-media { aspect-ratio: auto; height: clamp(260px, 56svh, 720px); }
  .home-page .film-card video { display: block; inset: 0; position: absolute; transform: none; }
  .home-page .film-media::after { display: none; }
  .film-strip :is(.frame-markers, .film-divider, .film-play-cue, .film-meta), .film-card::before { display: none; }
  .film-mobile-caption {
    align-items: center;
    color: #fff;
    display: flex;
    font: 400 13px/1.3 "Autoscape Round", "Space Mono", monospace;
    gap: 8px;
    justify-content: space-between;
    min-height: 50px;
    padding: 4px 10px 0;
    text-align: left;
  }
  .film-mobile-action { align-items: center; display: flex; gap: 10px; }
  .film-mobile-arrow { font: 18px/1 "Space Mono", monospace; }
  .film-mobile-count { color: #838d8c; flex: 0 0 auto; font: 10px/1 "Space Mono", monospace; }
  .cursor, .inline-preview { display: none; }

  .about-page {
    align-items: flex-end;
    display: flex;
    min-height: calc(100svh - var(--compact-header));
    padding: clamp(160px, 28svh, 360px) var(--compact-right) max(28px, env(safe-area-inset-bottom)) var(--compact-left);
  }
  .about-copy { bottom: auto; color: #fff; font-size: clamp(15px, 3.94vw, 18px); left: auto; line-height: 1.3; max-width: 650px; padding: 0; position: relative; top: auto; transform: none; transition: none; width: 100%; }
  .about-copy p { margin-bottom: 1.3em; }
  .about-copy p:last-child { margin-bottom: 0; }
  .about-copy a { overflow-wrap: anywhere; }
  .about-copy :is(a, .inline-name):hover { color: #fff; }
  .about-copy .inline-name { text-decoration: none; }
  .about-mobile-portrait:not([hidden]) { display: block; margin: 0 0 24px; }
  .about-mobile-portrait img { aspect-ratio: 3 / 2; display: block; height: auto; object-fit: cover; width: 100%; }

  .scripts-page { min-height: 0; padding: max(88px, calc(32.4svh - var(--compact-header))) var(--compact-right) max(28px, env(safe-area-inset-bottom)) var(--compact-left); }
  .archive-intro { display: none; }
  .script-table { border: 0; }
  .script-table-head { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .script-row { align-items: center; border: 0; border-bottom: 1px solid #d5d5cf; gap: 0; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 32px; min-height: 0; padding: 0; }
  .script-row:last-child { border-bottom: 1px solid #d5d5cf; margin-bottom: 0; }
  .script-number { display: none; }
  .script-name-cell { grid-column: 1 / -1; grid-row: 1; min-width: 0; padding: 0 0 7px; }
  .script-title { font-size: clamp(16px, 3.94vw, 18px); letter-spacing: 0; line-height: 1.3; }
  .script-mobile-detail { display: inline; }
  .script-title-arrow { display: none; }
  .script-details { display: flex; flex-wrap: wrap; gap: 0 .5ch; grid-column: 1; grid-row: 3; }
  .script-details > span { align-self: auto; color: inherit; font-size: 11px; grid-column: auto; grid-row: auto; text-align: left; text-transform: uppercase; }
  .script-details .script-date { display: none; }
  .script-format::after { content: ","; }
  .mobile-page-label { display: inline; }
  .script-actions { align-self: center; font-size: 11px; grid-column: 2; grid-row: 3; justify-content: flex-end; }
  .script-actions a { align-items: center; border: 0; display: inline-flex; gap: 6px; justify-content: flex-end; min-height: 44px; min-width: 60px; padding: 0; }
  .script-actions a:hover { color: #000; }
  .script-row .script-cover-peek,
  .script-row:hover .script-cover-peek,
  .script-row:has(:focus-visible) .script-cover-peek {
    align-self: start;
    background: transparent;
    border: 0;
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    left: auto;
    opacity: 1;
    padding: 0;
    position: static;
    top: auto;
    transform: none;
    visibility: visible;
    width: 100%;
  }

  .script-reader[open] { grid-template-rows: auto minmax(0, 1fr) auto; }
  .reader-header { gap: 12px; min-height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .reader-header h2 { font-size: 20px; line-height: 1.2; max-width: none; }
  .reader-close { flex: 0 0 auto; gap: 8px; }
  .reader-canvas { padding: 12px; }
  .reader-page { height: 100%; max-height: 100%; max-width: 100%; width: auto; }
  .reader-controls { display: grid; gap: 4px 8px; grid-template-columns: minmax(0, 1fr) auto; padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .reader-pagination { gap: 2px; }
  .reader-pagination button { width: 44px; }
  .reader-total { font-size: 10px; white-space: nowrap; }
  .reader-page-input { font-size: 16px; height: 44px; width: 40px; }
  .reader-zoom { gap: 0; }
  .reader-zoom button { font-size: 10px; min-width: 44px; }
  .reader-desktop-label { display: none; }
  .reader-compact-label { display: inline; }
  .reader-links { border-top: 1px solid #b9bdb2; font-size: 10px; gap: 12px; grid-column: 1 / -1; justify-content: space-between; width: 100%; }

  .film-player { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left)); }
  .player-topline { height: 60px; inset: auto; position: relative; }
  .player-wordmark { font-size: 16px; }
  .player-close { height: 44px; transform: none; }
  .player-frame { height: 100%; inset: auto; min-height: 0; position: relative; width: 100%; }
  .player-video { object-fit: contain; }
  .player-controls { display: block; height: auto; inset: auto; padding: 12px 0 8px; position: relative; }
  .player-controls-main { display: grid; gap: 0 8px; grid-template-columns: 44px 44px minmax(0, 1fr) 44px; }
  .player-title { display: block; font-size: 11px; grid-column: 1 / -1; grid-row: 1; line-height: 1.5; max-width: none; overflow: visible; white-space: normal; }
  .player-progress { grid-column: 1 / -1; grid-row: 2; height: 44px; width: 100%; }
  .player-progress::-webkit-slider-thumb { height: 14px; margin-top: -6.5px; width: 14px; }
  .player-progress::-moz-range-thumb { height: 14px; width: 14px; }
  .player-controls button { height: 44px; width: 44px; }
  .player-play { grid-column: 1; grid-row: 3; }
  .player-mute { grid-column: 2; grid-row: 3; }
  .player-current { display: block; font-size: 11px; grid-column: 3; grid-row: 3; text-align: right; }
  .player-fullscreen { grid-column: 4; grid-row: 3; }
  .player-runtime { display: none; }
}

@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .home-page { height: auto; min-height: 0; padding-top: 36px; }
  .film-media { aspect-ratio: 16 / 9; height: auto; }
  .about-page { padding-top: 96px; }
  .player-topline { height: 44px; }
  .player-controls { padding-top: 4px; }
  .player-controls-main { gap: 0 8px; grid-template-columns: 44px 44px minmax(80px, 1fr) auto 44px; }
  .player-title { grid-column: 1 / -1; }
  .player-progress { grid-column: 3; }
  .player-current { grid-column: 4; grid-row: 2; }
  .player-fullscreen { grid-column: 5; grid-row: 2; }
  .player-play, .player-mute { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav :is(a, button), .site-nav :is(a, button)::after { transition: none; }
}