/* Latest comp: Dia biography, moving link footnotes, and a quiet writing index. */
.site-footer { pointer-events: none; }
.film-card.is-pointer-return:focus-visible { outline: none; }
.site-footer :is(button, time) { pointer-events: auto; }
body:not([data-route="home"]) .more-films { pointer-events: none; }

body[data-route="home"][data-ambient="cycle"] .site-shell {
  --identity-secondary: hsl(from var(--ambient-bg) calc(h + 1.35) 12.3% 58.4%);
}

.inline-name {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .07em;
}

.about-copy :is(a, .inline-name) {
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.about-copy :is(a, .inline-name):hover { color: #606b9d; }

.inline-preview {
  background: #151619;
  color: white;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: fixed;
  transform: translateY(10px) scale(.97);
  transform-origin: bottom left;
  transition: opacity 180ms ease, transform 380ms var(--ease-out), visibility 180ms;
  visibility: hidden;
  width: clamp(240px, 19vw, 340px);
  z-index: 80;
}

.inline-preview.is-visible { opacity: 1; transform: none; visibility: visible; }
.preview-caption { display: flex; justify-content: space-between; font: 10px/1.4 "Autoscape Round", "Space Mono", monospace; padding: 0 1px 8px; }
.preview-caption span:last-child { font-family: "Space Mono", monospace; }
.inline-preview :is(video, img) { aspect-ratio: 16/9; display: block; object-fit: cover; width: 100%; }
.inline-preview.is-portrait img { aspect-ratio: 3/2; }

/* The archive is an independent route; no document pages load on the homepage. */
body[data-route="scripts"] .site-shell { --utility-grey: #767970; background: #f0f0ec; color: #181a18; }
body[data-route="scripts"] :is(.identity-line, .site-nav, .site-footer) { font-family: "Autoscape Round", "Space Mono", monospace; }
body[data-route="scripts"] :is(.identity-cycle, .more-films) { visibility: hidden; }
body[data-route="scripts"] .identity-cycle { display: none; }
body[data-route="scripts"] .wordmark { font-size: clamp(14px, 1.1vw, 19px); font-weight: 400; letter-spacing: 0; line-height: normal; text-transform: uppercase; }
body[data-route="scripts"] .wordmark:hover { text-decoration: underline; text-underline-offset: 5px; }
body[data-route="scripts"] :is(.site-header, .site-footer) { padding-inline: clamp(20px, 1.91vw, 33px) clamp(20px, 2.14vw, 37px); }
body[data-route="scripts"] .site-nav :is(a, button):is(:hover, :focus-visible, [aria-current="page"]) { color: #181a18; }
body[data-route="scripts"] .nav-cluster::before { right: -18px; }
body[data-route="scripts"] .clock-location { color: #181a18; }
body[data-route="scripts"] #app { overflow-y: auto; scrollbar-width: thin; }

.scripts-page { height: auto; min-height: 100%; padding: 0 var(--gutter) 44px; }
.archive-loading { font-family: "Space Mono", monospace; font-size: 12px; margin: 20vh var(--gutter); }
.archive-intro { padding-top: clamp(64px, 12.3vh, 160px); margin-bottom: clamp(24px, 2.7vh, 32px); }
.archive-kicker, .script-table-head, .script-number, .script-format, .script-date, .script-pages, .script-actions { font-family: "Space Mono", monospace; font-size: clamp(10px, .7vw, 12px); font-weight: 400; }
.archive-kicker { letter-spacing: .045em; margin: 0; }
.script-table { --script-artwork-width: clamp(234px, 23.66vw, 494px); --script-header-height: 44px; border-top: 1px solid #30342e; position: relative; }
.script-table-head, .script-row { align-items: center; display: grid; gap: clamp(12px, 1.2vw, 20px); grid-template-columns: 48px minmax(180px, 1fr) minmax(76px, 8vw) repeat(3, minmax(88px, 8vw)); }
.script-details { display: contents; }
.script-table-head > :nth-child(n+4), .script-date { text-align: center; }
.script-actions { justify-content: center; }
.script-table-head { color: inherit; height: var(--script-header-height); text-transform: uppercase; }
.script-row { border-top: 1px solid #c4c8be; min-height: clamp(80px, 9vh, 112px); position: relative; transition: border-color 250ms ease; }
.script-row:last-child { border-bottom: 1px solid #30342e; }
.script-number { align-self: center; color: inherit; white-space: nowrap; }
.script-name-cell { padding: 18px 0; }
.script-title { cursor: pointer; display: block; font: 400 clamp(24px, 2.2vw, 39px)/1.1 "Dia", Arial, sans-serif; letter-spacing: -.035em; text-align: left; }
/* Stretch the native title button across its row; the download stays independent. */
.script-title::after { content: ""; cursor: pointer; inset: 0; position: absolute; z-index: 1; }
.script-title-arrow { display: inline-block; font-family: "Space Mono", monospace; font-size: .6em; margin-left: .65em; opacity: 0; transform: translate(-6px, 5px); transition: opacity 180ms ease, transform 350ms var(--ease-out); }
.script-row:hover .script-title-arrow, .script-row:focus-within .script-title-arrow { opacity: 1; transform: none; }
.script-format { white-space: nowrap; }
.script-pages, .script-pages-heading { text-align: center; white-space: nowrap; }
.script-date sup { margin-left: 2px; }
.script-actions { align-items: center; display: flex; gap: clamp(14px, 1.3vw, 23px); white-space: nowrap; }
.script-actions :is(button, a) { cursor: pointer; padding-block: 14px; transition: color 180ms ease; }
.script-actions a { position: relative; z-index: 2; }
.script-actions :is(button, a):hover { color: #606b9d; }
.script-actions span { display: inline-block; transition: transform 250ms ease; }
.script-actions button:hover span { transform: translate(2px,-2px); }
.script-actions a:hover span { transform: translateY(3px); }
.script-cover-peek { background: white; border: 1px solid #d3d5cc; left: 48%; opacity: 0; padding: 4px; pointer-events: none; position: absolute; top: 50%; transform: translate(-30%, -50%) rotate(-4deg) scale(.94); transition: opacity 180ms ease, transform 400ms var(--ease-out); visibility: hidden; width: clamp(120px, 11vw, 180px); z-index: 4; }
.script-cover-peek img { display: block; width: 100%; }
.script-row:hover .script-cover-peek, .script-row:has(:focus-visible) .script-cover-peek { opacity: 1; transform: translate(-30%, -50%) rotate(-3deg) scale(1); visibility: visible; }

/* Add hoverImage to any script entry for this shared 16:9 artwork treatment.
   Entries without artwork keep their existing PDF-cover preview. */
.script-artwork-peek {
  aspect-ratio: 16 / 9;
  background: transparent;
  border: 0;
  left: 44%;
  padding: 0;
  transform: translate(-50%, calc(-50% + 8px)) scale(.98);
  width: var(--script-artwork-width);
}
.script-artwork-peek img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.script-row:hover .script-artwork-peek, .script-row:has(:focus-visible) .script-artwork-peek {
  transform: translate(-50%, -50%) scale(1);
}
/* The first preview crosses the archive's top rule, with at least 18px of overlap.
   .28125 is half the height of a 16:9 image, relative to its width. */
.script-table-head + .script-row .script-artwork-peek {
  top: min(50%, calc(var(--script-artwork-width) * .28125 - var(--script-header-height) - 18px));
}
.mobile-page-label { display: none; }

/* Full-page reader: only the current page and one page ahead are loaded. */
.script-reader { background: #e2e3dd; border: none; color: #171a16; height: 100dvh; inset: 0; margin: 0; max-height: none; max-width: none; padding: 0; width: 100%; }
.script-reader[open] { display: grid; grid-template-rows: 82px minmax(0,1fr) 72px; }
.script-reader::backdrop { background: #161915; }
.reader-header { align-items: center; border-bottom: 1px solid #b9bdb2; display: flex; justify-content: space-between; padding: 0 var(--gutter); }
.reader-header h2 { font: 400 clamp(20px, 1.6vw, 28px)/1.1 "Dia", Arial, sans-serif; letter-spacing: -.025em; margin: 0; }
.reader-close { align-items: center; cursor: pointer; display: flex; font: 11px "Space Mono", monospace; gap: 14px; min-height: 44px; }
.reader-close span { font-size: 26px; transition: transform 350ms var(--ease-out); }
.reader-close:hover span { transform: rotate(90deg); }
.reader-canvas { min-height: 0; overflow: auto; padding: 24px; scrollbar-width: thin; text-align: center; }
.reader-page { background: white; display: block; height: 100%; margin: 0 auto; max-width: 100%; object-fit: contain; transition: opacity 120ms ease; width: auto; }
.script-reader.is-loading .reader-page { opacity: .25; }
.script-reader[data-zoom="full"] .reader-page { height: auto; max-height: none; max-width: none; width: 850px; }
.reader-controls { align-items: center; border-top: 1px solid #b9bdb2; display: flex; font: 11px "Space Mono", monospace; gap: 24px; justify-content: space-between; padding: 0 var(--gutter); }
.reader-pagination, .reader-zoom, .reader-links { align-items: center; display: flex; gap: 20px; }
.reader-controls button, .reader-controls a { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: transform 240ms var(--ease-out); }
.reader-controls :is(button, a, input):focus-visible { outline: none; }
.reader-controls button:not(:disabled):hover, .reader-controls a:hover { transform: scale(1.08); }
.reader-pagination button:not(:disabled):hover { transform: scale(1.16); }
.script-reader[data-input="keyboard"] .reader-controls :is(button, a):focus-visible { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.script-reader[data-input="keyboard"] .reader-page-input:focus-visible { border-bottom: 2px solid currentColor; }
.reader-pagination button { font-size: 20px; width: 40px; }
.reader-pagination button:disabled { cursor: default; opacity: .2; }
.reader-page-input { background: transparent; border: 0; border-bottom: 1px solid #a9aea1; border-radius: 0; font: inherit; height: 32px; padding: 0; text-align: center; width: 32px; appearance: textfield; }
.reader-page-input::-webkit-inner-spin-button, .reader-page-input::-webkit-outer-spin-button { appearance: none; }
.reader-zoom button { color: inherit; }
.reader-error { font: 14px "Dia", Arial, sans-serif; }

@media (hover: none) {
  .script-cover-peek { display: none; }
  .film-card:hover { flex-basis: 78vw; width: 78vw; }
}

@media (max-width: 760px) {
  body[data-route="about"] #app { overflow-y: auto; }
  .about-page { min-height: 100%; height: auto; padding: max(80px, 13vh) 20px 28px; }
  .about-copy { bottom: auto; font-size: clamp(18px, 4.7vw, 23px); left: auto; line-height: 1.3; overflow: visible; padding: 0; position: relative; top: auto; width: 100%; }
  .film-strip { --film-gap: 20px; left: var(--home-gutter); padding-right: var(--home-gutter); top: min(48%, calc(100% - 43.875vw - 65px)); }
  .inline-preview { max-width: calc(100vw - 32px); width: 260px; }
  .scripts-page { padding: 0 20px 28px; }
  .archive-intro { padding-top: 72px; margin-bottom: 24px; }
  .archive-kicker { font-size: 9px; }
  .script-table-head { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .script-row { gap: 0 12px; grid-template-columns: 42px minmax(0,1fr) auto; min-height: 132px; padding: 22px 0 16px; }
  .script-number { font-size: 10px; grid-column: 1; grid-row: 1 / 4; }
  .script-name-cell { grid-column: 2 / 4; grid-row: 1; padding: 0 0 14px; }
  .script-title { font-size: clamp(24px, 6vw, 32px); }
  .script-title-arrow { display: none; }
  .script-format { font-size: 10px; grid-column: 2; grid-row: 2; }
  .script-date { font-size: 10px; grid-column: 2; grid-row: 3; }
  .script-pages { align-self: end; color: #73776b; font-size: 10px; grid-column: 3; grid-row: 2; }
  .mobile-page-label { display: inline; }
  .script-actions { align-self: center; flex-direction: row; font-size: 9px; gap: 18px; grid-column: 3; grid-row: 3; }
  .script-actions :is(button,a) { padding: 12px 0 8px; }
  .script-cover-peek { display: none; }
  body[data-route="scripts"] .site-nav { background: rgba(240,240,236,.96); }
  .script-reader[open] { grid-template-rows: 72px minmax(0,1fr) 112px; }
  .reader-header { padding-inline: 18px; }
  .reader-canvas { padding: 16px; }
  .reader-page { height: auto; max-height: 100%; max-width: 100%; }
  .reader-controls { flex-wrap: wrap; gap: 0; padding: 6px 16px; }
  .reader-pagination { gap: 8px; }
  .reader-zoom { font-size: 9px; gap: 14px; }
  .reader-links { border-top: 1px solid #c4c8be; font-size: 10px; justify-content: space-between; width: 100%; }
}

@media (max-width: 420px) {
  .reader-header h2 { max-width: 225px; }
  .site-footer { gap: 18px; }
  .clock-time { font-size: 9px; }
}