/* Asterism: a printed show programme over one fixed violet sky. Doto for the name, the cue numbers
   and every computed figure (round "lights" at 20 px and up, square "print" below); Syne for
   everything a visitor reads. The sky carries the scale; the HTML stays small and precise. */
@font-face { font-family: "Doto"; src: url("/assets/fonts/specimen/doto-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Syne"; src: url("/assets/fonts/specimen/syne-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

body.spec-asterism { margin: 0; background: #1F0838; }
.as-page {
  --as-sky: #1F0838; --as-sky-hi: #140428; --as-sky-lo: #2B0D4C; --as-sky-lift: #3A1466;
  --as-ink: #F1ECFF; --as-ink-2: rgba(241, 236, 255, .88); --as-ink-3: rgba(241, 236, 255, .72);
  --as-rule: rgba(241, 236, 255, .16); --as-accent: #FFD89A; --as-support: #8FE3FF;
  --as-doto: "Doto", ui-monospace, "Courier New", monospace; --as-syne: "Syne", "Segoe UI", system-ui, sans-serif;
  --as-t-name: clamp(2rem, 1.55rem + 1.5vw, 3rem); --as-t-cue: clamp(1.75rem, 1.3rem + 1.6vw, 3rem);
  --as-t-fig: clamp(1.75rem, 1.45rem + 1vw, 2.5rem); --as-t-code: clamp(.8125rem, .78rem + .1vw, .875rem);
  --as-t-h2: clamp(1.5rem, 1.25rem + .9vw, 2rem); --as-t-lead: clamp(1rem, .96rem + .2vw, 1.0625rem); --as-t-body: clamp(.9375rem, .92rem + .1vw, 1rem);
  --as-col: 144px; --as-w: 416px; --as-nav-h: 48px;
  position: relative; color: var(--as-ink); font: 400 var(--as-t-body)/1.6 var(--as-syne);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
.as-page *, .as-page *::before, .as-page *::after { box-sizing: border-box; }
.as-page :where(h1, h2, h3, p, ul, ol, dl, dd, figure, table) { margin: 0; }
.as-page :where(ul, ol) { padding: 0; list-style: none; }
.as-page img { display: block; width: 100%; height: auto; }
.as-page a { color: inherit; }
.as-page :focus-visible { outline: 2px solid var(--as-accent); outline-offset: 3px; }
.as-page button, .as-page input, .as-page select, .as-page textarea { font: inherit; color: inherit; }
.as-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.as-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.as-page:not(.as-js) .as-jsonly, .as-nosky .as-jsonly { display: none !important; }
[hidden].as-page, .as-page [hidden] { display: none !important; }

/* the rail's hairline and tick tape, down the whole page (not on phones) */
.as-page::before {
  content: ""; position: absolute; z-index: 1; top: var(--as-nav-h); bottom: 0; left: 40px; width: 13px; pointer-events: none;
  background: linear-gradient(90deg, var(--as-rule) 0 1px, transparent 1px) no-repeat,
    repeating-linear-gradient(180deg, var(--as-rule) 0 1px, transparent 1px 8px) 0 0 / 5px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--as-rule) 0 1px, transparent 1px 64px) 0 0 / 13px 100% no-repeat;
}

/* ── the sky ─────────────────────────────────────────────────────────────────────────────────── */
.as-sky {
  position: fixed; inset: 0; z-index: 0; contain: strict; overflow: hidden;
  background: radial-gradient(560px circle at 62% 48%, rgba(58, 20, 102, .35), transparent 100%), linear-gradient(180deg, #140428, #1F0838 55%, #2B0D4C);
}
.as-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.as-poster { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s; }
.as-poster-tall { display: none; }
@media (max-aspect-ratio: 1/1) { .as-poster-wide { display: none; } .as-poster-tall { display: block; } }
.as-live .as-poster { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.as-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.as-trace path { fill: none; stroke: var(--as-support); stroke-linecap: round; stroke-linejoin: round; }
.as-route path { stroke-width: 1.2; }
.as-trail path { stroke-width: 1; }
.as-ring { fill: none; stroke: var(--as-support); stroke-width: 1; opacity: 0; }
.as-following .as-ring { opacity: 1; }
.as-tag { position: absolute; left: 0; top: 0; display: grid; gap: 2px; font: 400 .75rem/1.3 var(--as-syne); color: var(--as-support); white-space: nowrap; opacity: 0; pointer-events: none; }
.as-following .as-tag { opacity: 1; }
.as-tag-n { font: 900 .75rem/1 var(--as-doto); font-variation-settings: "ROND" 0; letter-spacing: .06em; }
.as-tag.is-left { justify-items: end; text-align: right; }

/* ── type ────────────────────────────────────────────────────────────────────────────────────── */
.as-label, .as-rf, .as-page th, .as-btn, .as-oh { font: 700 .6875rem/1.45 var(--as-syne); letter-spacing: .16em; text-transform: uppercase; }
.as-label { color: var(--as-ink-3); }
.as-h1 { display: grid; gap: 8px; font-weight: 400; }
.as-h1-name { font: 800 var(--as-t-name)/1 var(--as-doto); font-variation-settings: "ROND" 100; letter-spacing: .04em; text-transform: uppercase; color: var(--as-accent); }
.as-h1-line { font: 700 clamp(1.1875rem, 1rem + .7vw, 1.625rem)/1.15 var(--as-syne); letter-spacing: -.01em; max-width: 18ch; }
.as-h2 { font: 800 var(--as-t-h2)/1.12 var(--as-syne); letter-spacing: -.015em; max-width: 22ch; }
.as-h3 { display: flex; align-items: baseline; gap: 12px; font: 700 1.0625rem/1.3 var(--as-syne); }
.as-sn { font: 900 var(--as-t-code)/1 var(--as-doto); font-variation-settings: "ROND" 0; color: var(--as-accent); }
.as-lead { font-size: var(--as-t-lead); line-height: 1.65; color: var(--as-ink-2); }
.as-copy p:not(.as-dir, .as-label), .as-steps p { color: var(--as-ink-2); }
.as-dir { font-size: .9375rem; line-height: 1.5; color: var(--as-support); }
.as-dir b { font-weight: 700; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; margin-right: .35em; }
.as-note, .as-small, .as-help, .as-page figcaption { font-size: .75rem; line-height: 1.5; color: var(--as-ink-3); }
.as-fig, .as-fig-s, .as-page td, .as-ct, .as-nn, .as-rt, .as-clock, .as-strip-n, .as-strip-c { font-family: var(--as-doto); font-weight: 900; font-variation-settings: "ROND" 0; letter-spacing: .06em; }
.as-page td, .as-rt, .as-ct, .as-nn, .as-fig-s { font-size: var(--as-t-code); line-height: 1.7; }
.as-link { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: none; }
.as-link > span { position: relative; padding-bottom: 5px; background: radial-gradient(circle, rgba(255, 216, 154, .45) 1px, transparent 1.5px) 0 100% / 5px 4px repeat-x; }
.as-link > span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: radial-gradient(circle, var(--as-accent) 1.1px, transparent 1.6px) 0 0 / 5px 4px repeat-x; transition: width .18s steps(8); }
.as-link:hover > span::after, .as-link:focus-visible > span::after { width: 100%; }
.as-long > span, .as-short > span { background: none; }
.as-link svg, .as-btn svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.as-link svg { color: var(--as-accent); }

/* buttons and fields: square, hairline, 44 px */
.as-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(241, 236, 255, .4); border-radius: 0; background: transparent; color: var(--as-ink); cursor: pointer; transition: background-color .12s; }
.as-btn:hover:not(:disabled) { background: rgba(241, 236, 255, .1); }
.as-btn-p { border-color: var(--as-accent); color: var(--as-accent); }
.as-btn-p:hover:not(:disabled) { background: rgba(255, 216, 154, .1); }
.as-btn:disabled { opacity: .45; cursor: default; }
.as-btn-s { min-height: 44px; padding: 0 12px; }
.as-ib { width: 44px; padding: 0; }
.as-field { width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(241, 236, 255, .4); border-radius: 0; background: transparent; font-size: 1rem; }
.as-field:focus-visible { outline-offset: 2px; }
select.as-field { appearance: none; padding-right: 24px; background: linear-gradient(45deg, transparent 50%, var(--as-ink-3) 50%) calc(100% - 11px) 55% / 6px 6px no-repeat, linear-gradient(135deg, var(--as-ink-3) 50%, transparent 50%) calc(100% - 5px) 55% / 6px 6px no-repeat, var(--as-sky); }
.as-page option { background: var(--as-sky); color: var(--as-ink); }
textarea.as-field { resize: vertical; min-height: 104px; line-height: 1.5; }

/* panels: the sky, thickened */
.as-panel { background: rgba(31, 8, 56, .86); border: 1px solid var(--as-rule); padding: 24px; }

/* ── nav ─────────────────────────────────────────────────────────────────────────────────────── */
.as-nav { position: sticky; top: var(--bar-h, 45px); z-index: 20; display: flex; align-items: center; gap: 24px; height: var(--as-nav-h); padding: 0 24px 0 var(--as-col); }
.as-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-bottom: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.as-nav.is-scrolled::before { background: rgba(31, 8, 56, .94); border-color: var(--as-rule); }
@supports (backdrop-filter: blur(12px)) { .as-nav.is-scrolled::before { background: rgba(31, 8, 56, .72); backdrop-filter: blur(12px); } }
.as-mark { position: absolute; left: 16px; font: 800 .9375rem/1 var(--as-doto); font-variation-settings: "ROND" 100; letter-spacing: .08em; text-transform: uppercase; color: var(--as-accent); text-decoration: none; padding: 12px 0; }
.as-navcues { display: flex; gap: 20px; margin-right: auto; }
.as-navcues a { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 0; font: 600 .8125rem/1 var(--as-syne); text-decoration: none; color: var(--as-ink-2); }
.as-navcues a:hover, .as-navcues a[aria-current] { color: var(--as-ink); }
.as-navcues a[aria-current] .as-nn { color: var(--as-accent); }
.as-nn { color: var(--as-ink-3); font-size: .8125rem; line-height: 1; }
.as-tx { display: flex; align-items: center; gap: 8px; }
.as-tx .as-btn { min-height: 40px; }
.as-clock { font-size: .875rem; color: var(--as-ink-2); padding: 0 8px; white-space: nowrap; }
.as-cues-btn, .as-cues-panel .as-cuelist { display: none; }
.as-cues-clock { display: none; }
/* the orbit control sits at the foot of the rail on wide screens */
.as-orbit { position: fixed; left: 8px; bottom: 16px; z-index: 12; display: grid; grid-template-columns: repeat(2, 48px); gap: 4px; }
.as-orbit-l { grid-column: 1 / -1; white-space: nowrap; font: 700 .625rem/1.3 var(--as-syne); letter-spacing: .1em; text-transform: uppercase; color: var(--as-ink-3); }
.as-orbit .as-ib { width: auto; }
.as-orbit .as-btn { background: rgba(31, 8, 56, .7); }
.as-orbit:focus-visible { outline-offset: 4px; }

/* the playhead: fixed at 45% of the window, across the rail */
.as-playhead { position: fixed; z-index: 11; left: 0; top: 45%; width: 104px; height: 20px; margin-top: -10px; pointer-events: none; }
.as-playhead::before { content: ""; position: absolute; left: 22px; top: 9px; width: 40px; height: 1px; background: var(--as-accent); box-shadow: 0 0 6px rgba(255, 216, 154, .7); }
.as-strip { display: none; }

/* ── cues ────────────────────────────────────────────────────────────────────────────────────── */
.as-cue, .as-foot { position: relative; z-index: 2; min-height: 120svh; padding: 96px 24px 96px var(--as-col); pointer-events: none; }
.as-cue > *, .as-foot > * { pointer-events: none; }
.as-in { position: relative; display: grid; gap: 32px; justify-items: start; }
.as-in > * { pointer-events: auto; }
.as-copy { position: relative; display: grid; gap: 16px; width: var(--as-w); max-width: 100%; }
.as-copy::before { content: ""; position: absolute; z-index: -1; inset: -48px -56px; background: radial-gradient(closest-side, rgba(31, 8, 56, .7), rgba(31, 8, 56, 0)); pointer-events: none; }
.as-copy > .as-h2 { margin-bottom: 4px; }
.as-cue-h { scroll-margin-top: 45vh; }
.as-rail { position: absolute; top: 0; right: calc(100% + 40px); width: 96px; display: grid; justify-items: end; gap: 4px; text-align: right; pointer-events: none; }
.as-rn { font: 700 var(--as-t-cue)/1 var(--as-doto); font-variation-settings: "ROND" 100, "wght" 700; color: rgba(241, 236, 255, .4); transition: font-variation-settings .3s steps(5), color .3s steps(5); }
.as-page:not(.as-js) .as-rn, .is-current .as-rn { color: var(--as-accent); font-variation-settings: "ROND" 100, "wght" 900; }
.as-rt { color: var(--as-ink-2); }
.as-rf { max-width: 60px; font-size: .625rem; letter-spacing: .08em; color: var(--as-ink-3); }

/* the hero: the programme block at the foot of the first screen, the name overhead */
.as-hero { min-height: 0; padding-top: 0; padding-bottom: 96px; }
.as-hero > .as-in:first-child { min-height: calc(100svh - var(--bar-h, 45px) - var(--as-nav-h)); align-content: end; padding-bottom: 72px; }
.as-hero-copy { gap: 16px; justify-items: start; }
.as-rail-hero { right: calc(100% + 40px); }
.as-hero-copy::before { inset: -120px -200px -80px -120px; background: radial-gradient(closest-side, rgba(31, 8, 56, .7), rgba(31, 8, 56, 0)); }
.as-label-n { display: none; }
.as-links { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.as-short { display: none; }
.as-hero-still { padding-top: 0; }

/* stills and photographs: the programme's tipped-in prints */
.as-still { width: 240px; display: grid; gap: 8px; }
.as-still svg { display: block; width: 240px; height: 240px; border: 1px solid var(--as-rule); background: rgba(31, 8, 56, .6); }
.as-still-d { fill: none; stroke: var(--as-accent); stroke-width: 2.4; stroke-linecap: round; }
.as-still-cool { stroke: var(--as-support); }
.as-still figcaption { font: 900 var(--as-t-code)/1.7 var(--as-doto); font-variation-settings: "ROND" 0; letter-spacing: .06em; text-transform: uppercase; color: var(--as-ink-3); }
.as-photo { display: grid; gap: 8px; width: var(--as-w); max-width: 100%; }
.as-photo picture { display: block; border: 1px solid var(--as-rule); }
.as-duo { display: flex; flex-wrap: wrap; align-items: start; gap: 32px; }
.as-hint { width: var(--as-w); max-width: 100%; font-size: .875rem; color: var(--as-ink-3); display: grid; gap: 12px; justify-items: start; }

/* cue 02: the anatomy of a cue */
.as-anat { width: 560px; max-width: 100%; display: grid; gap: 16px; }
.as-anat-row { display: grid; grid-template-columns: 2.2fr 5fr 5.6fr 3.6fr 3fr; align-items: end; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--as-rule); font: 900 1.25rem/1 var(--as-doto); font-variation-settings: "ROND" 0; letter-spacing: .06em; text-transform: uppercase; color: var(--as-accent); }
.as-anat-row span { position: relative; }
.as-anat-row span::after { content: ""; position: absolute; left: .2em; top: calc(100% + 12px); width: 1px; height: 14px; background: var(--as-rule); }
.as-anat-notes { display: grid; grid-template-columns: 2.2fr 5fr 5.6fr 3.6fr 3fr; gap: 12px; padding-top: 12px; font-size: .75rem; line-height: 1.45; color: var(--as-ink-3); }
.as-anat-notes b { display: block; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .6875rem; color: var(--as-ink); }

/* cue 03: follow one light */
.as-follow { display: grid; gap: 16px; width: 560px; max-width: 100%; }
.as-follow-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.as-num { display: flex; align-items: center; gap: 4px; }
.as-num label { font: 700 .6875rem/1 var(--as-syne); letter-spacing: .16em; text-transform: uppercase; color: var(--as-ink-3); margin-right: 8px; }
.as-num-f { width: 72px; text-align: center; font: 900 1rem/1 var(--as-doto); font-variation-settings: "ROND" 0; -moz-appearance: textfield; }
.as-num-f::-webkit-inner-spin-button, .as-num-f::-webkit-outer-spin-button { -webkit-appearance: none; }
.as-follow-live { color: var(--as-support); }

/* cue 04: occasions */
.as-occ { width: 560px; max-width: 100%; display: grid; gap: 16px; padding: 8px 24px 20px; }
.as-page table { width: 100%; border-collapse: collapse; }
.as-page th, .as-page td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--as-rule); vertical-align: middle; }
.as-occ-t thead th, .as-ro-t thead th { color: var(--as-ink-3); font-size: .625rem; }
.as-occ-t tbody th { text-transform: none; letter-spacing: 0; font: 700 .9375rem/1.3 var(--as-syne); color: var(--as-ink); }
.as-occ-t td { font: 400 .9375rem/1.4 var(--as-syne); letter-spacing: 0; color: var(--as-ink-2); }
.as-occ-t td:last-child, .as-occ-t th:last-child { text-align: right; padding-right: 0; }
.as-occ-t .as-btn { min-height: 40px; }
.as-occ-t tr.is-flying th, .as-occ-t tr.is-flying td { color: var(--as-accent); }
.as-try-live { color: var(--as-support); }
.as-copy-after { gap: 12px; }

/* cue 05: the plan diagram */
.as-plan-fig { width: var(--as-w); max-width: 100%; display: grid; gap: 12px; }
.as-plan-fig svg { display: block; width: 100%; height: auto; border: 1px solid var(--as-rule); background: rgba(31, 8, 56, .6); }
.as-key { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.as-key li { display: inline-flex; align-items: center; gap: 8px; }
.as-key i { width: 18px; height: 6px; background: radial-gradient(circle, currentColor 1.4px, transparent 1.8px) 0 50% / 6px 6px repeat-x; }
.as-k1 { color: var(--as-ink); } .as-k2 { color: var(--as-accent); } .as-k3 { color: var(--as-ink-3); }

/* cue 06: the editor */
.as-editor { width: 896px; max-width: 100%; display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 32px; }
.as-pad-w { display: grid; gap: 8px; align-content: start; }
.as-pad { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; touch-action: none; cursor: crosshair; border: 1px solid var(--as-rule);
  background: radial-gradient(circle, rgba(241, 236, 255, .1) 1px, transparent 1.5px) 6px 6px / 12px 12px, rgba(31, 8, 56, .6); }
.as-pad:focus-visible { outline-color: var(--as-support); }
.as-cap { color: var(--as-ink-2); }
.as-ed-side { display: grid; gap: 12px; align-content: start; }
.as-word { font: 900 1.25rem/1 var(--as-doto); font-variation-settings: "ROND" 0; letter-spacing: .12em; text-transform: uppercase; color: var(--as-support); }
.as-presets-l { margin-top: 8px; }
.as-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.as-presets .as-btn { padding: 0 4px; letter-spacing: .1em; white-space: nowrap; }
.as-presets .as-btn[aria-pressed="true"] { border-color: var(--as-support); color: var(--as-support); }
.as-ed-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.as-readout { display: grid; margin: 8px 0 0; border-top: 1px solid var(--as-rule); }
.as-readout > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--as-rule); }
.as-readout dt { font: 700 .6875rem/1.4 var(--as-syne); letter-spacing: .16em; text-transform: uppercase; color: var(--as-ink-3); }
.as-readout dd { margin: 0; text-align: right; }
.as-readout .as-fig { font: 700 var(--as-t-fig)/1 var(--as-doto); font-variation-settings: "ROND" 100; letter-spacing: 0; color: var(--as-support); }
.as-of, .as-u { font-size: .75rem; color: var(--as-ink-3); }
.as-u { margin-left: 6px; }
.as-of span { font: 900 .8125rem/1 var(--as-doto); font-variation-settings: "ROND" 0; }

/* cue 07: the steps */
.as-steps { display: grid; gap: 40px; width: var(--as-w); max-width: 100%; counter-reset: none; }
.as-steps li { display: grid; gap: 12px; }
.as-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; position: relative; }
.as-inset { position: absolute; right: -176px; top: 0; width: 160px; }
.as-inset picture { border-color: rgba(241, 236, 255, .3); }

/* cue 08: the running order and the ribbon */
.as-ro { width: 1152px; max-width: 100%; display: grid; gap: 16px; padding: 8px 24px 20px; }
.as-ro-t td, .as-ro-t tbody th { height: 40px; padding-top: 0; padding-bottom: 0; }
.as-ro-t td { text-align: right; color: var(--as-ink); }
.as-ro-t td:nth-child(3) { text-align: left; font: 600 .875rem/1.3 var(--as-syne); letter-spacing: 0; }
.as-ro-t tbody th { font: 900 var(--as-t-code)/1 var(--as-doto); font-variation-settings: "ROND" 0; color: var(--as-accent); letter-spacing: .06em; }
.as-ro-t thead th:nth-child(n+4), .as-ro-t thead th:nth-child(2) { text-align: right; }
.as-ro-t tr.is-current td, .as-ro-t tr.is-current th { color: var(--as-accent); }
.as-ribbon-w { width: 1152px; max-width: 100%; display: grid; gap: 12px; }
.as-ribbon-c { display: flex; gap: 8px; flex-wrap: wrap; }
.as-ribbon { position: relative; display: flex; height: 12px; }
.as-ribbon i { display: block; height: 100%; }
.as-rib-h { background: rgba(241, 236, 255, .14); }
.as-rib-m { background: repeating-linear-gradient(90deg, var(--as-accent) 0 1px, transparent 1px 4px); opacity: .8; }
.as-rib-ph { position: absolute; top: -6px; bottom: -6px; left: 0; width: 1px; background: var(--as-accent); box-shadow: 0 0 6px var(--as-accent); opacity: 0; }
.is-playing .as-rib-ph { opacity: 1; }

/* cue 09: the route and the form */
.as-route-c { color: var(--as-support); font-size: .9375rem; }
.as-form { width: 560px; max-width: 100%; display: grid; gap: 20px; }
.as-form-h { color: var(--as-ink); }
.as-fr { display: grid; gap: 4px; }
.as-fr-2 { grid-template-columns: 1fr 1fr; gap: 20px; }
.as-fr-2 > div { display: grid; gap: 4px; }
.as-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.as-status { color: var(--as-support); font-size: .875rem; }

/* cue 10: the footer */
.as-foot { min-height: 0; padding-bottom: 64px; }
.as-foot-g { display: grid; grid-template-columns: 1.1fr .8fr 1.4fr; gap: 48px; width: 1152px; max-width: 100%; padding-top: 32px; border-top: 1px solid var(--as-rule); }
.as-foot-a { display: grid; gap: 12px; align-content: start; }
.as-foot-mark { font: 800 var(--as-t-name)/1 var(--as-doto); font-variation-settings: "ROND" 100; letter-spacing: .04em; text-transform: uppercase; color: var(--as-accent); }
.as-foot-line { font-weight: 700; }
.as-foot-cues ol { display: grid; gap: 2px; }
.as-foot-cues a { display: inline-flex; align-items: baseline; gap: 10px; min-height: 28px; font-size: .875rem; text-decoration: none; color: var(--as-ink-2); }
.as-foot-cues a:hover { color: var(--as-ink); }
.as-colo { display: grid; gap: 8px; align-content: start; font-size: .75rem; line-height: 1.5; color: var(--as-ink-3); }
.as-colo [data-calc] { color: var(--as-ink); }
.as-end { font: 900 var(--as-t-code)/1.7 var(--as-doto); font-variation-settings: "ROND" 0; letter-spacing: .06em; text-transform: uppercase; color: var(--as-accent); }

/* ── 1100 to 1359: the cue links fold into the Cues list; the orbit control stays on the rail ── */
@media (min-width: 1100px) and (max-width: 1359px) {
  .as-js:not(.as-nosky) .as-navcues { display: none; }
  .as-js:not(.as-nosky) .as-nav { justify-content: flex-end; }
  .as-cues-btn { display: inline-flex; }
  .as-cues-panel.is-open .as-cuelist { position: absolute; top: 100%; right: 24px; width: 464px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 4px 16px 12px; background: rgba(31, 8, 56, .97); border: 1px solid var(--as-rule); border-top: 0; }
  .as-cuelist a { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 12px 0; border-bottom: 1px solid var(--as-rule); text-decoration: none; font-weight: 600; font-size: .9375rem; }
  .as-ct { color: var(--as-ink-3); }
}
.as-navcues a { white-space: nowrap; }

/* ── at 1099 and under: the Cues disclosure, the playhead strip ─────────────────────────────── */
@media (max-width: 1099px) {
  .as-page { --as-col: 104px; --as-w: 416px; --as-nav-h: 44px; }
  .as-page::before { left: 20px; }
  .as-rail { right: calc(100% + 16px); width: 64px; }
  .as-rt { font-size: .6875rem; }
  .as-navcues, .as-orbit-go, .as-tx .as-clock:not(.as-cues-clock), .as-tx-l { display: none; }
  .as-nav { justify-content: flex-end; padding: 0 16px; }
  .as-tx .as-btn { min-height: 44px; }
  .as-tx-play, .as-tx-stop { width: 44px; padding: 0; }
  .as-cues-btn { display: inline-flex; }
  .as-cues-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 16px; padding: 16px; background: rgba(31, 8, 56, .97); border-bottom: 1px solid var(--as-rule); }
  .as-cues-panel:not(.is-open) { display: none; }
  .as-cues-panel .as-cuelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .as-cuelist a { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 12px 0; border-bottom: 1px solid var(--as-rule); text-decoration: none; font-weight: 600; font-size: .9375rem; }
  .as-ct { color: var(--as-ink-3); }
  .as-orbit { position: static; grid-template-columns: auto repeat(4, 44px); align-items: center; }
  .as-orbit-l { grid-column: auto; margin-right: 8px; }
  .as-strip { position: sticky; z-index: 19; top: calc(var(--bar-h, 45px) + var(--as-nav-h)); display: flex; align-items: center; gap: 12px; height: 32px; margin-top: 0; padding: 0 16px 0 var(--as-col); background: rgba(31, 8, 56, .96); border-bottom: 1px solid var(--as-rule); pointer-events: none; }
  @supports (backdrop-filter: blur(12px)) { .as-strip { backdrop-filter: blur(12px); } }
  .as-strip-n { font-size: .8125rem; color: var(--as-accent); }
  .as-strip-tape { position: relative; flex: 1; height: 12px; background: repeating-linear-gradient(90deg, var(--as-rule) 0 1px, transparent 1px 8px); }
  .as-strip-tape::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--as-accent); box-shadow: 0 0 6px var(--as-accent); }
  .as-strip-c { font-size: .8125rem; color: var(--as-ink-2); white-space: nowrap; }
  .as-playhead { width: 64px; }
  .as-playhead::before { left: 4px; width: 32px; }
  .as-editor { grid-template-columns: minmax(0, 1fr); width: 520px; }
  .as-ro, .as-ribbon-w, .as-foot-g { width: 100%; }
  /* without the script there is no disclosure: the cues sit in a plain row under the name */
  .as-page:not(.as-js) .as-nav { position: relative; top: auto; flex-wrap: wrap; height: auto; padding: var(--as-nav-h) 16px 4px; }
  .as-page:not(.as-js) .as-mark { top: 0; }
  .as-page:not(.as-js) .as-cues-panel { position: static; display: block; width: 100%; padding: 0; background: none; border: 0; }
  .as-page:not(.as-js) .as-cues-panel .as-cuelist { display: flex; flex-wrap: wrap; gap: 0 20px; padding-left: calc(var(--as-col) - 16px); }
  .as-page:not(.as-js) .as-cuelist a { border: 0; font-size: .875rem; }
  .as-page:not(.as-js) .as-cuelist .as-ct { display: none; }
  .as-foot-g { grid-template-columns: 1fr 1fr; }
  .as-colo { grid-column: 1 / -1; }
  .as-inset { position: static; width: 160px; }
}

/* ── phones: no gutter, the cue furniture in a row above each heading ──────────────────────── */
@media (max-width: 700px) {
  .as-page { --as-col: 16px; --as-w: 100%; }
  .as-page::before, .as-playhead { display: none; }
  .as-cue, .as-foot { min-height: 100svh; padding: 64px 16px; }
  .as-foot { min-height: 0; }
  .as-hero { min-height: 0; padding-top: 0; padding-bottom: 64px; }
  .as-rail { position: static; width: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; justify-items: start; text-align: left; margin-bottom: -16px; }
  .as-rn { font-size: .875rem; font-weight: 900; font-variation-settings: "ROND" 0, "wght" 900; color: var(--as-ink-3); }
  .as-rail > span + span::before { content: "· "; color: var(--as-ink-3); font-family: var(--as-syne); }
  .as-rf { max-width: none; font-size: .6875rem; letter-spacing: .16em; }
  .as-copy, .as-photo, .as-follow, .as-occ, .as-anat, .as-plan-fig, .as-form, .as-hint, .as-steps { width: 100%; }
  .as-copy::before { inset: -32px -16px; }
  .as-strip { padding-left: 16px; }
  .as-mark { left: 16px; }
  .as-hero > .as-in:first-child { padding-bottom: 24px; min-height: calc(100svh - var(--bar-h, 56px) - var(--as-nav-h) - 32px); }
  .as-hero .as-rail { display: none; }
  .as-hero-copy { gap: 12px; }
  .as-hero-copy::before { inset: -40px -16px -24px; background: linear-gradient(180deg, rgba(31, 8, 56, 0), rgba(31, 8, 56, .88) 110px); }
  .as-label-n { display: inline; }
  .as-links { display: grid; gap: 0; width: 100%; border-top: 1px solid var(--as-rule); }
  .as-links .as-link { justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--as-rule); background: none; }
  /* the anatomy stacked: the line as it reads in the running order, then what each part means */
  .as-anat { gap: 12px; }
  .as-anat-row { display: flex; flex-wrap: wrap; gap: 0 8px; padding-bottom: 10px; font-size: .9375rem; line-height: 1.4; }
  .as-anat-row span + span::before { content: "· "; color: var(--as-ink-3); }
  .as-anat-row span::after { content: none; }
  .as-anat-notes { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 0; }
  .as-anat-notes li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .as-anat-notes b { display: inline; }
  .as-duo { display: grid; gap: 24px; width: 100%; }
  .as-still, .as-still svg { width: 240px; height: auto; }
  .as-still svg { height: 240px; }
  .as-occ, .as-ro, .as-panel { padding-left: 16px; padding-right: 16px; }
  .as-occ-t thead { display: none; }
  .as-occ-t tr { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid var(--as-rule); }
  .as-occ-t th, .as-occ-t td { border: 0; padding: 0; }
  .as-occ-t td:first-of-type { grid-column: 1; }
  .as-occ-t td:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .as-ro-t thead { display: none; }
  .as-ro-t tbody tr { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--as-rule); }
  .as-ro-t td, .as-ro-t tbody th { height: auto; border: 0; padding: 0; text-align: left; }
  .as-ro-t td:nth-child(n+4) { grid-column: span 1; }
  .as-ro-t td[data-calc$="-lit"]::after { content: " lights"; }
  .as-ro-t td[data-calc$="-route"]::before { content: "longest "; }
  .as-ro-t td[data-calc$="-move"]::before { content: "move "; }
  .as-ro-t td[data-calc$="-hold"]::before { content: "hold "; }
  .as-ro-t td[data-calc$="-lit"], .as-ro-t td[data-calc$="-move"] { grid-column: 1 / span 2; }
  .as-editor { width: 100%; }
  .as-fr-2 { grid-template-columns: 1fr; }
  .as-steps { gap: 32px; }
  .as-inset { width: 96px; }
  .as-foot-g { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) and (max-height: 899px) { .as-s3 { display: none; } }
/* a short phone: composed for the shape, not squeezed */
@media (max-width: 700px) and (max-height: 640px) {
  .as-strip { display: none; }
  .as-cues-l, .as-label-n { display: none; }
  .as-cues-clock { display: inline; font-size: .8125rem; color: var(--as-ink-2); }
  .as-hero > .as-in:first-child { min-height: calc(100svh - var(--bar-h, 56px) - var(--as-nav-h)); padding-bottom: 16px; }
  .as-s2, .as-s3 { display: none; }
  .as-lead { font-size: .9375rem; line-height: 1.47; }
  .as-h1-name { font-size: 1.875rem; }
  .as-h1-line { font-size: 1.125rem; }
  .as-hero .as-now { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .as-links { grid-template-columns: 1fr 1fr; gap: 8px; border: 0; }
  .as-links .as-link { min-height: 44px; border: 1px solid rgba(241, 236, 255, .4); padding: 0 12px; font-size: .875rem; }
  .as-long { display: none; }
  .as-short { display: inline; }
}
/* the smallest phones (320, the reflow width): a tighter name and transport so neither touches */
@media (max-width: 359px) {
  .as-mark { font-size: .8125rem; letter-spacing: .04em; }
  .as-tx { gap: 4px; }
  .as-cues-btn { padding: 0 10px; gap: 6px; }
}
@media (max-width: 359px) and (max-height: 640px) {
  .as-links .as-link { gap: 6px; padding: 0 10px; font-size: .8125rem; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .as-page *, .as-page *::before, .as-page *::after { transition: none !important; animation: none !important; }
  .as-live .as-poster { visibility: hidden; }
}