/* Drumlight: screens in cinema's shapes, on the foyer's daylight. */
@font-face { font-family: "Vina Sans"; src: url("/assets/fonts/specimen/vina-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/assets/fonts/specimen/spectral-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/assets/fonts/specimen/spectral-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "dl-narrow"; src: local("Arial Narrow"), local("Roboto Condensed"), local("Liberation Sans Narrow"); size-adjust: 86%; }

body.spec-drumlight { margin: 0; background: #E4E4E0; }

.spec-drumlight {
  --dl-ground: #E4E4E0;
  --dl-screen: #F7F7F3;
  --dl-ink: #1A1717;
  --dl-ink-2: #4A4545;
  --dl-orchid: #8E2FD0;
  --dl-orchid-deep: #6A1FA0;
  --dl-bulb: #F7D14A;
  --dl-bulb-off: #E9DFA8;
  --dl-cream: #EFE8D8;
  --dl-hair: rgba(26, 23, 23, .16);
  --dl-display: "Vina Sans", "dl-narrow", "Arial Narrow", sans-serif;
  --dl-text: "Spectral", Georgia, serif;
  --dl-t-poster: clamp(5.5rem, .58rem + 20.2vw, 19rem);
  --dl-t-mega: clamp(4.5rem, .6rem + 16vw, 15rem);
  --dl-t-h2: clamp(2.5rem, 1.75rem + 3.05vw, 4.5rem);
  --dl-t-title: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --dl-t-h1: clamp(1.75rem, 1.47rem + 1.14vw, 2.5rem);
  --dl-t-time: clamp(1.5rem, 1.27rem + .95vw, 2.125rem);
  --dl-t-btn: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --dl-t-lede: clamp(1.25rem, 1.11rem + .57vw, 1.625rem);
  --dl-t-body: clamp(1.0625rem, 1.016rem + .19vw, 1.1875rem);
  --dl-t-small: clamp(.875rem, .85rem + .1vw, .9375rem);
  --dl-m: clamp(16px, 4.4vw, 64px);
  --dl-g: clamp(12px, 2.2vw, 32px);
  --dl-content: min(1600px, calc(100vw - 2 * var(--dl-m)));
  --dl-col: calc((var(--dl-content) - 11 * var(--dl-g)) / 12);
  --dl-edge: calc((100vw - var(--dl-content)) / 2);
  --dl-ease: linear(0, .139 6.25%, .264 12.5%, .378 18.75%, .481 25%, .573 31.25%, .656 37.5%, .729 43.75%, .793 50%, .848 56.25%, .894 62.5%, .932 68.75%, .962 75%, .983 81.25%, .995 87.5%, 1 93.75%, 1);
}

.dl-page { background: var(--dl-ground); color: var(--dl-ink); font-family: var(--dl-text); font-size: var(--dl-t-body); line-height: 1.55; font-variant-numeric: oldstyle-nums proportional-nums; overflow-x: clip; }
.dl-page *, .dl-page *::before, .dl-page *::after { box-sizing: border-box; }
.dl-page h1, .dl-page h2, .dl-page h3 { font-family: var(--dl-display); font-weight: 400; text-transform: uppercase; }
:where(.dl-page) :where(h1, h2, h3, p) { margin: 0; }
.dl-page a { color: inherit; }
.dl-page :focus-visible { outline: 2px solid var(--dl-orchid); outline-offset: 3px; }
.dl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------ nav */
.dl-nav { position: sticky; top: var(--bar-h, 40px); z-index: 50; height: 56px; display: flex; align-items: center; gap: 36px; padding: 0 var(--dl-m); background: var(--dl-ground); border-bottom: 1px solid var(--dl-hair); font-family: var(--dl-display); text-transform: uppercase; letter-spacing: .08em; font-size: var(--dl-t-btn); line-height: 1; font-variant-numeric: lining-nums; }
.dl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; letter-spacing: .06em; font-size: 22px; font-family: var(--dl-display); text-transform: uppercase; }
.dl-mk { width: 34px; height: 34px; flex: none; }
.dl-links { display: flex; gap: 28px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.dl-links a, .dl-book { text-decoration: none; padding: 8px 0; }
.dl-links a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.dl-book { color: var(--dl-orchid); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-decoration-thickness 180ms var(--dl-ease); }
.dl-book:hover { text-decoration-thickness: 2px; }
.dl-menu { display: none; position: relative; }
.dl-menu summary { list-style: none; cursor: pointer; padding: 8px 0; }
.dl-menu summary::-webkit-details-marker { display: none; }
.dl-menu ul { position: absolute; right: 0; top: calc(100% + 12px); list-style: none; margin: 0; padding: 12px 24px; background: var(--dl-ground); border: 1px solid var(--dl-hair); min-width: 200px; }
.dl-menu li a { display: block; padding: 12px 0; text-decoration: none; }

/* ------------------------------------------------ the foyer: a 1.33 screen with the drum on it, its caption and controls flush beside it */
.dl-foyer { --dl-sx: calc(var(--dl-edge) + var(--dl-col) + var(--dl-g)); --dl-sh: max(420px, calc(100svh - var(--bar-h, 40px) - 56px - 132px)); padding: 24px 0 72px; }
.dl-stage { display: flex; align-items: flex-end; gap: 28px; margin-left: var(--dl-sx); margin-right: var(--dl-edge); }
.dl-hero { position: relative; flex: none; width: min(calc(var(--dl-sh) * 1.33), calc(100vw - var(--dl-sx) - var(--dl-edge) - 300px)); aspect-ratio: 1.33 / 1; }
.dl-drum { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 42%, #FBFBF8, #F0F0EB); box-shadow: 0 1px 0 rgba(26, 23, 23, .07); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.dl-drum:active { cursor: grabbing; }
.dl-drum:focus-visible { outline-offset: 4px; }
.dl-poster, .dl-poster img, .dl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dl-poster img { object-fit: cover; object-position: 38% 55%; }
.dl-canvas { opacity: 0; }
.dl-live-on .dl-canvas { opacity: 1; }
.dl-live-on .dl-poster, .dl-live-on .dl-strip-still { visibility: hidden; }
/* the strip, laid out beside the photograph when nothing runs */
.dl-strip-still { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(12, 1fr); background: var(--dl-cream); border-top: 5px solid var(--dl-orchid); border-bottom: 5px solid var(--dl-orchid); }
.dl-strip-still svg { width: 100%; height: auto; display: block; fill: #2B2426; }

.dl-h1 { position: absolute; top: 28px; right: 32px; z-index: 2; text-align: right; font-size: var(--dl-t-h1); line-height: .96; letter-spacing: .04em; pointer-events: none; }
.dl-h1 span { display: block; white-space: nowrap; }

/* the caption: what the eye sees, then the two controls and the keys, one group */
.dl-cap { flex: 1 1 0; min-width: 0; max-width: 300px; padding-bottom: 2px; display: grid; gap: 22px; visibility: hidden; }
.dl-live-on .dl-cap { visibility: visible; }
.dl-live { font-style: italic; font-size: var(--dl-t-lede); line-height: 1.25; display: flex; align-items: baseline; gap: 12px; min-height: 2.5em; }
.dl-fbulb { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--dl-bulb-off); box-shadow: 0 0 0 1px rgba(26, 23, 23, .12); transform: translateY(-1px); transition: background-color 300ms var(--dl-ease), box-shadow 300ms var(--dl-ease); }
.dl-rate { margin-top: 6px; padding-left: 24px; font-size: var(--dl-t-small); color: var(--dl-ink-2); }
.dl-fused .dl-fbulb { background: var(--dl-bulb); box-shadow: 0 0 6px var(--dl-bulb); }
.dl-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; padding-top: 20px; border-top: 1px solid var(--dl-hair); }
.dl-spin, .dl-stop { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0; border: 0; background: none; color: var(--dl-ink); font: 400 var(--dl-t-time)/1 var(--dl-display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.dl-spin span, .dl-stop { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: rgba(26, 23, 23, .35); transition: text-decoration-color 180ms var(--dl-ease); }
.dl-spin:hover span, .dl-stop:hover { text-decoration-color: var(--dl-orchid); }
.dl-ring { width: 44px; height: 44px; flex: none; fill: var(--dl-ink); will-change: transform; }
.dl-spin:active .dl-ring { fill: var(--dl-orchid); }
.dl-stop { font-size: var(--dl-t-btn); color: var(--dl-ink-2); }
.dl-hint { font-size: var(--dl-t-small); line-height: 1.45; color: var(--dl-ink-2); font-style: italic; max-width: 30ch; }

/* under the screen's foot: no box, no rule */
.dl-under { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--dl-g); width: var(--dl-content); margin: 24px auto 0; align-items: start; }
.dl-lede { grid-column: 2 / 8; font-style: italic; font-size: var(--dl-t-lede); line-height: 1.35; max-width: 40ch; }
.dl-today { grid-column: 8 / 12; display: grid; grid-template-columns: 12px 1fr; column-gap: 12px; row-gap: 6px; text-decoration: none; font-family: var(--dl-display); text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.05; font-variant-numeric: lining-nums; }
.dl-tdot { width: 12px; height: 12px; margin-top: .08em; border-radius: 50%; background: var(--dl-bulb); box-shadow: 0 0 0 1px rgba(26, 23, 23, .1); }
.dl-today > span:not(.dl-tdot) { grid-column: 2; }
.dl-today-l { font-family: var(--dl-text); text-transform: none; font-style: italic; letter-spacing: 0; font-size: var(--dl-t-lede); line-height: 1; margin-bottom: 4px; }
.dl-today:hover .dl-today-t { text-decoration: underline; text-decoration-color: var(--dl-orchid); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ------------------------------------------------ the sections: screens in cinema's shapes */
.dl-sec { position: relative; width: var(--dl-content); margin: var(--dl-gap, 96px) auto 0; }
.dl-sec h2 { font-size: var(--dl-t-h2); line-height: .9; letter-spacing: .01em; }
.dl-lead { font-style: italic; font-size: var(--dl-t-lede); line-height: 1.35; max-width: 42ch; }
.dl-scr { position: relative; background: radial-gradient(ellipse 70% 60% at 50% 42%, #FBFBF8, #F0F0EB); box-shadow: 0 1px 0 rgba(26, 23, 23, .07); }
.dl-scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(26, 23, 23, .03) .7px, transparent .8px); background-size: 3px 3px; }
.dl-scr img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* what's on */
.dl-sessions { --dl-gap: 96px; scroll-margin-top: calc(var(--bar-h, 40px) + 72px); }
.dl-sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--dl-g); align-items: end; margin-bottom: 48px; }
.dl-sec-head h2 { grid-column: 1 / 6; position: relative; }
.dl-sec-head h2:focus { outline: none; }
.dl-sec-head .dl-lead { grid-column: 7 / 12; }
/* each film in its own shape inside the house screen, the masking closed in round the narrower ones */
.dl-frow { --house: 2.39; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--dl-g); align-items: start; }
.dl-frow-flat { --house: 1.66; --n: 3; }
.dl-frow + .dl-frow { margin-top: 72px; }
.dl-film { min-width: 0; }
.dl-film-screen { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: var(--house); container-type: size; padding: 0; border: 0; border-radius: 0; background: linear-gradient(180deg, #BDBCB6, #C9C8C2 45%, #BDBCB6); box-shadow: inset 0 0 0 1px rgba(26, 23, 23, .06); overflow: hidden; cursor: pointer; color: var(--dl-ink); }
.dl-film-pic { width: min(100cqw, 100cqh * var(--r)); height: min(100cqh, 100cqw / var(--r)); box-shadow: 0 0 0 1px rgba(26, 23, 23, .08), 0 0 18px rgba(26, 23, 23, .16); transition: filter 180ms var(--dl-ease); }
.dl-film-screen:hover .dl-film-pic { filter: brightness(1.05); }
.dl-film:has(.dl-film-screen:hover) h3 { text-decoration: underline; text-decoration-color: var(--dl-orchid); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.dl-film-text { padding-top: 16px; display: grid; gap: 8px; max-width: 58ch; }
.dl-film h3 { font-size: var(--dl-t-title); line-height: .92; letter-spacing: .02em; }
.dl-why { font-style: italic; }
.dl-meta, .dl-when, .dl-next { font-family: var(--dl-display); text-transform: uppercase; letter-spacing: .06em; font-size: var(--dl-t-btn); line-height: 1.15; font-variant-numeric: lining-nums; color: var(--dl-ink-2); }
.dl-next { color: var(--dl-ink); }
.dl-times summary { cursor: pointer; font-family: var(--dl-display); text-transform: uppercase; letter-spacing: .08em; }
.dl-times p { font-family: var(--dl-display); text-transform: uppercase; letter-spacing: .04em; font-size: var(--dl-t-btn); font-variant-numeric: lining-nums; }
.dl-js .dl-film .dl-note, .dl-js .dl-times, .dl-js .dl-nojs { display: none; }
.dl-page:not(.dl-js) .dl-next { display: none; }
.dl-nojs { margin-top: 36px; font-style: italic; max-width: 60ch; }

/* a still cut from its sheet: the sheet slides up behind a window the film's shape */
.dl-still { position: relative; display: block; overflow: hidden; background: #2B2426; }
.dl-still picture { position: absolute; inset: 0; display: block; }
.dl-page .dl-still img { position: absolute; left: 0; top: var(--t); width: 100%; height: auto; max-width: none; object-fit: fill; }

/* the booking screen, 1.85 */
.dl-bk { position: relative; aspect-ratio: 1.85; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--dl-g); align-items: start; padding: clamp(24px, 3.3vw, 48px); background: radial-gradient(ellipse 70% 60% at 50% 42%, #FBFBF8, #F0F0EB); box-shadow: 0 1px 0 rgba(26, 23, 23, .07); font-variant-numeric: lining-nums; }
.dl-bk[hidden], .dl-book-form[hidden], .dl-films[hidden] { display: none; }
.dl-bk-l { grid-column: 1 / 6; display: grid; gap: 12px; justify-items: start; min-width: 0; }
.dl-bk-r { grid-column: 7 / 13; min-width: 0; }
.dl-bk-seats .dl-bk-l { grid-column: 1 / 5; }
.dl-bk-seats .dl-bk-r { grid-column: 5 / 13; align-self: center; }
.dl-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--dl-ink); font: 400 var(--dl-t-btn)/1 var(--dl-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.dl-back svg { width: 20px; height: 20px; }
.dl-back:hover { text-decoration: underline; text-decoration-color: var(--dl-orchid); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.dl-bk-screen { position: relative; width: min(100%, calc(210px * var(--r))); aspect-ratio: var(--r); overflow: hidden; background: var(--dl-screen); box-shadow: 0 0 0 1px rgba(26, 23, 23, .1); margin-top: 8px; }
.dl-bk-screen .dl-still, .dl-far .dl-still { position: absolute; inset: 0; }
.dl-bk-title { font-size: var(--dl-t-title); line-height: .92; letter-spacing: .02em; margin-top: 12px; }
.dl-bk-title:focus { outline: none; }
.dl-bk .dl-note { max-width: 48ch; }
.dl-bk-lead { font-style: italic; font-size: var(--dl-t-lede); line-height: 1.3; margin-top: 52px; }
.dl-days { margin-top: 24px; display: grid; gap: 16px; }
.dl-day { display: grid; grid-template-columns: minmax(7rem, 1fr) 3fr; column-gap: var(--dl-g); align-items: start; }
.dl-day-n { display: flex; align-items: center; gap: 10px; font-style: italic; font-size: var(--dl-t-lede); line-height: 1; padding-top: 12px; }
.dl-day ul { list-style: none; margin: 0; padding: 0; display: grid; }
.dl-session { display: block; width: 100%; min-height: 48px; padding: 10px 0 8px; border: 0; border-bottom: 1px solid var(--dl-hair); background: none; color: var(--dl-ink); text-align: left; font: 400 var(--dl-t-time)/1 var(--dl-display); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.dl-session:hover { text-decoration: underline; text-decoration-color: var(--dl-orchid); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.dl-sess-h { font-family: var(--dl-display); text-transform: uppercase; font-size: var(--dl-t-time); line-height: 1; letter-spacing: .04em; margin-top: 8px; }
.dl-bk-seats .dl-bk-title { font-size: var(--dl-t-btn); letter-spacing: .08em; color: var(--dl-ink-2); margin-top: 0; }
.dl-sum { font-style: italic; font-size: var(--dl-t-lede); line-height: 1.3; min-height: 2.6em; margin-top: 16px; }
.dl-sfnote { display: flex; align-items: center; gap: 8px; font-size: var(--dl-t-small); color: var(--dl-ink-2); }
.dl-sfnote svg, .dl-sfi { width: 20px; height: 20px; flex: none; color: var(--dl-ink-2); }
.dl-rowhint, .dl-rowback { display: none; }

/* the room from the back: the far screen takes the film's shape */
.dl-roomv { container-type: inline-size; display: flex; flex-direction: column; align-items: center; }
.dl-far { position: relative; height: 72px; aspect-ratio: var(--r); overflow: hidden; background: var(--dl-screen); box-shadow: 0 0 0 1px rgba(26, 23, 23, .12), 0 10px 30px rgba(26, 23, 23, .07); }
.dl-seats { --base: clamp(24px, calc((100cqi - 56px) / 22.6), 40px); width: 100%; min-width: 0; margin: 36px 0 0; padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; }
.dl-room-small .dl-seats { --base: clamp(28px, calc((100cqi - 56px) / 11), 40px); }
.dl-srow { --sw: max(24px, calc(var(--base) * var(--k))); position: relative; display: flex; align-items: center; gap: calc(var(--sw) * .4); margin-top: calc(var(--sw) * .3); }
.dl-room-small .dl-srow { margin-top: calc(var(--sw) * .75); }
.dl-sr { display: flex; gap: calc(var(--sw) * .18); }
.dl-seat { -webkit-appearance: none; appearance: none; flex: none; margin: 0; width: var(--sw); height: calc(var(--sw) * .8); border: 1.5px solid var(--dl-orchid); border-radius: 44% 44% 16% 16% / 52% 52% 16% 16%; background: var(--dl-screen); cursor: pointer; transform: translateY(calc(var(--sw) * var(--n) * .032 * (1 - var(--u) * var(--u)))); transition: background-color 180ms var(--dl-ease); }
.dl-seat:hover { background: rgba(142, 47, 208, .14); }
.dl-seat:checked { background: var(--dl-orchid); }
.dl-seat:focus-visible { outline: 2px solid var(--dl-ink); outline-offset: 2px; }
.dl-rl { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 1.2em; font-family: var(--dl-display); font-size: max(15px, calc(var(--sw) * .5)); line-height: 1; color: var(--dl-ink-2); }
.dl-rowpick { display: none; }

/* the booking form, under the room */
.dl-book-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--dl-g); margin-top: 36px; align-items: start; font-variant-numeric: lining-nums; }
.dl-book-form > :nth-child(odd) { grid-column: 5 / 9; }
.dl-book-form > :nth-child(even) { grid-column: 9 / 13; }
.dl-f { display: grid; gap: 6px; font-size: var(--dl-t-small); color: var(--dl-ink-2); }
.dl-f input, .dl-f select, .dl-f textarea { font: inherit; font-size: var(--dl-t-body); color: var(--dl-ink); min-height: 44px; padding: 8px 2px; border: 0; border-bottom: 1px solid rgba(26, 23, 23, .4); border-radius: 2px; background: transparent; width: 100%; }
.dl-f input:focus, .dl-f select:focus, .dl-f textarea:focus { outline: none; border-bottom: 2px solid var(--dl-orchid); padding-bottom: 7px; }
.dl-f input[readonly] { color: var(--dl-ink-2); font-style: italic; }
.dl-fhint { font-style: italic; }
.dl-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--dl-t-body); }
.dl-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--dl-orchid); }
.dl-btn { justify-self: start; min-height: 48px; padding: 14px 28px 12px; border: 0; border-radius: 2px; background: var(--dl-ink); color: var(--dl-screen); font: 400 var(--dl-t-btn)/1 var(--dl-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.dl-btn:hover { background: var(--dl-orchid-deep); }
.dl-status { min-height: 1.5em; font-style: italic; align-self: center; }
.dl-hold { grid-column: 5 / 13 !important; font-style: italic; color: var(--dl-ink-2); max-width: 56ch; }

/* view transitions: the run-down easing, 460 ms */
::view-transition-group(dl-screen), ::view-transition-group(dl-title), ::view-transition-group(dl-row), ::view-transition-group(dl-list), ::view-transition-group(dl-rowz) { animation-duration: 460ms; animation-timing-function: linear(0, .139 6.25%, .264 12.5%, .378 18.75%, .481 25%, .573 31.25%, .656 37.5%, .729 43.75%, .793 50%, .848 56.25%, .894 62.5%, .932 68.75%, .962 75%, .983 81.25%, .995 87.5%, 1 93.75%, 1); }
::view-transition-old(dl-list), ::view-transition-new(dl-list), ::view-transition-old(dl-title), ::view-transition-new(dl-title), ::view-transition-old(dl-row), ::view-transition-new(dl-row) { animation-duration: 200ms; }
::view-transition-old(dl-screen), ::view-transition-new(dl-screen) { height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

/* the counter, 1.66 */
.dl-counter { --dl-gap: 144px; }
.dl-counter-screen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: var(--dl-g); aspect-ratio: 1.66; }
.dl-sec .dl-words { grid-column: 1 / 8; min-height: 0; overflow: hidden; margin: 0; padding: clamp(24px, 3.3vw, 48px); display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--dl-orchid); font-size: clamp(3rem, 7.4vw, 8rem); line-height: .84; letter-spacing: .005em; }
.dl-words > span { display: block; white-space: nowrap; }
.dl-words .dl-p { font-size: .42em; }
.dl-counter-pic { grid-column: 8 / 13; display: block; min-height: 0; overflow: hidden; }
.dl-counter-pic img { object-position: 45% 55%; }
.dl-counter-copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--dl-g); margin-top: 36px; align-items: start; }
.dl-counter-copy .dl-lead { grid-column: 1 / 6; font-size: var(--dl-t-title); line-height: 1.1; }
.dl-counter-copy p:last-child { grid-column: 8 / 13; max-width: 46ch; }

/* the hall, 2.39: the photograph, then the name set large and clear beneath it */
.dl-hall { --dl-gap: 72px; --dl-hfs: clamp(4.5rem, .6rem + 13.5vw, 13rem); }
.dl-hall-screen { aspect-ratio: 2.39; overflow: hidden; }
.dl-hall-screen picture { position: absolute; inset: 0; }
.dl-hall-screen img { object-position: 50% 58%; }
.dl-sec .dl-hall-title { font-size: var(--dl-hfs); line-height: .8; letter-spacing: .005em; margin: .16em 0 0 -.03em; }
.dl-hall-title span { display: block; white-space: nowrap; }
.dl-rooms { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--dl-g); row-gap: 48px; margin-top: 72px; }
.dl-room:nth-child(1) { grid-column: 1 / 6; }
.dl-room:nth-child(2) { grid-column: 8 / 13; }
.dl-room h3 { display: grid; gap: 8px; margin-bottom: 16px; }
.dl-room-n { font-size: var(--dl-t-h2); line-height: .9; letter-spacing: .01em; }
.dl-room-s { font-size: var(--dl-t-time); line-height: 1; letter-spacing: .04em; color: var(--dl-orchid); }
.dl-room p { max-width: 44ch; }
.dl-hall-p { grid-column: 1 / 7; font-style: italic; font-size: var(--dl-t-lede); line-height: 1.35; max-width: 40ch; }

/* the box: the photograph fills a 1.85 screen, its name on the white brick; the words below in three measures */
.dl-box { --dl-gap: 144px; }
.dl-box-screen { aspect-ratio: 1.85; overflow: hidden; }
.dl-box-pic { position: absolute; inset: 0; display: block; }
.dl-box-pic img { object-position: 50% 50%; }
.dl-sec .dl-box-screen h2 { position: absolute; z-index: 1; bottom: 6%; right: 4%; font-size: calc(var(--dl-t-h2) * 1.45); line-height: .86; text-align: right; }
.dl-box-screen h2 span { display: block; white-space: nowrap; }
.dl-box-copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--dl-g); margin-top: 32px; align-items: start; }
.dl-box-copy p:nth-child(1) { grid-column: 1 / 5; }
.dl-box-copy p:nth-child(2) { grid-column: 5 / 9; }
.dl-box-copy .dl-aside { grid-column: 9 / 13; font-style: italic; font-size: var(--dl-t-lede); line-height: 1.35; max-width: 30ch; }

/* Sunday: a reel. The screen holds still while you scroll, and the film runs through its title cards and shots */
.dl-sunday { --dl-gap: 144px; }
.dl-sunday-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: 36px; }
.dl-sunday-head h2 { max-width: 14ch; }
.dl-when { color: var(--dl-ink); }
.dl-reel-screen { position: relative; width: min(100%, 980px); margin: 0 auto; aspect-ratio: 1.33; overflow: hidden; background: var(--dl-screen); box-shadow: 0 1px 0 rgba(26, 23, 23, .07); }
.dl-rf { position: absolute; inset: 0; }
.dl-rf-it, .dl-rf-still:not(.dl-rf-last) { display: none; }
.dl-rf-pic { position: absolute; inset: 0; }
.dl-rf-close .dl-rf-pic { transform: scale(1.75); transform-origin: 30% 74%; }
.dl-rf-it { place-items: center; align-content: center; gap: 28px; padding: 12%; text-align: center; background: radial-gradient(ellipse 70% 60% at 50% 42%, #FBFBF8, #F0F0EB); }
.dl-rf-it::before { content: ""; position: absolute; inset: 5%; border: 1px solid var(--dl-ink); outline: 1px solid var(--dl-ink); outline-offset: -7px; opacity: .8; pointer-events: none; }
.dl-rf-it em { font-style: normal; }
.dl-rf-it p { font-style: italic; font-size: clamp(1.375rem, .9rem + 2vw, 2.75rem); line-height: 1.22; max-width: 24ch; }
.dl-rf-it svg { width: clamp(40px, 5vw, 64px); height: auto; fill: var(--dl-ink); }
.dl-sunday-copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--dl-g); row-gap: 20px; margin-top: 40px; align-items: start; }
.dl-sunday-copy > p { grid-column: 3 / 8; max-width: 52ch; }
.dl-sunday-copy .dl-lead { grid-column: 9 / 13; }

/* Walking Pace: a 1.37 hairline on the ground; the first word sits on its top rule, knocked out of it */
.dl-seasons { --dl-gap: 144px; --dl-wpp: clamp(20px, 3.3vw, 48px); }
.dl-kicker { font-style: italic; font-size: var(--dl-t-lede); line-height: 1.3; margin: 0 0 calc(var(--dl-t-poster) * .4 + 12px) var(--dl-wpp); }
.dl-wp-frame { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--dl-g); align-content: start; aspect-ratio: 1.37; padding: 0 var(--dl-wpp) var(--dl-wpp); }
.dl-hairline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dl-hairline rect { fill: none; stroke: var(--dl-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dl-sec .dl-wp-frame h2 { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 1; margin-top: calc(var(--dl-t-poster) * -.4); font-size: var(--dl-t-poster); line-height: .8; letter-spacing: .005em; }
.dl-wp { display: block; width: max-content; }
.dl-wp-1 { background: var(--dl-ground); padding: 0 .1em; margin-left: -.1em; }
.dl-wp-lead { grid-column: 1 / 6; grid-row: 2; align-self: start; margin-top: 36px; }
.dl-billing { grid-column: 8 / 13; grid-row: 1 / span 2; list-style: none; margin: calc(var(--dl-t-poster) * .4 + 40px) 0 0; padding: 0; display: grid; gap: 28px; align-content: start; font-variant-numeric: lining-nums; }
.dl-billing li { display: grid; gap: 6px; }
.dl-billing em { max-width: 40ch; }
.dl-bt { display: block; font-family: var(--dl-display); text-transform: uppercase; line-height: .92; letter-spacing: .02em; }
.dl-b1 .dl-bt { font-size: calc(var(--dl-t-title) * 1.35); }
.dl-b2 .dl-bt { font-size: var(--dl-t-title); }
.dl-b3 .dl-bt { font-size: var(--dl-t-time); }
.dl-b3 em { font-size: var(--dl-t-small); }
.dl-now::before { content: ""; display: block; width: 48px; height: 3px; background: var(--dl-orchid); margin-bottom: 8px; }

/* before the lights go down: open ground */
.dl-visit { --dl-gap: 144px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--dl-g); align-items: start; }
.dl-visit h2 { grid-column: 1 / 5; position: sticky; top: calc(var(--bar-h, 40px) + 56px + 36px); max-width: 8ch; }
.dl-visit-body { grid-column: 6 / 13; }
.dl-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 36px var(--dl-g); margin: 0; }
.dl-qa div { border-top: 1px solid var(--dl-hair); padding-top: 16px; }
.dl-qa dt { font-family: var(--dl-display); text-transform: uppercase; letter-spacing: .04em; font-size: var(--dl-t-time); line-height: 1; }
.dl-qa dd { margin: 10px 0 0; max-width: 40ch; }
.dl-ask { margin-top: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--dl-g); }
.dl-ask h3 { grid-column: 1 / -1; font-size: var(--dl-t-h2); line-height: .9; }
.dl-ask-p { grid-column: 1 / -1; font-style: italic; font-size: var(--dl-t-lede); line-height: 1.35; max-width: 40ch; margin-top: -8px !important; }
.dl-f-wide, .dl-ask .dl-btn, .dl-ask .dl-status { grid-column: 1 / -1; }
.dl-f textarea { resize: vertical; min-height: 120px; }

/* the foot: the drum's strip, unrolled */
.dl-foot { --dl-gap: 96px; width: var(--dl-content); margin: var(--dl-gap) auto 0; padding-bottom: 72px; }
.dl-flyer { width: 120px; aspect-ratio: 6.54 / 6.84; overflow: clip; margin-bottom: 16px; }
.dl-flyer-row { display: flex; width: 1200%; transform: translateX(-25%); }
.dl-flyer-row svg, .dl-strip-row svg { flex: 1 1 0; min-width: 0; height: auto; display: block; fill: #2B2426; }
.dl-strip { overflow: clip; background: var(--dl-cream); border-top: 6px solid var(--dl-orchid); border-bottom: 6px solid var(--dl-orchid); }
.dl-strip-row { display: flex; width: calc(100% * 13 / 12); }
.dl-foot-lead { margin-top: 36px; font-style: italic; font-size: var(--dl-t-title); line-height: 1.1; max-width: 30ch; }
.dl-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--dl-hair); }
.dl-foot-row .dl-links { margin: 0; font-family: var(--dl-display); text-transform: uppercase; letter-spacing: .08em; font-size: var(--dl-t-btn); }
.dl-foot-row p { font-size: var(--dl-t-small); color: var(--dl-ink-2); margin-left: auto; max-width: 36ch; }

/* the masking moves, the hairline draws, the reel runs, the swift flies: all on scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dl-mask { animation: dl-mask linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
    .dl-hairline rect { stroke-dasharray: 1 1; animation: dl-draw linear both; animation-timeline: --dl-wp; animation-range: entry 10% cover 45%; }
    .dl-foot { view-timeline: --dl-ft block; }
    .dl-flyer { animation: dl-fly linear both; animation-timeline: --dl-ft; animation-range: entry 0% exit 0%; }
    .dl-flyer-row { animation: dl-flap steps(12) both 5; animation-timeline: --dl-ft; animation-range: entry 0% exit 0%; }
    .dl-strip-row { animation: dl-drift linear both; animation-timeline: --dl-ft; animation-range: entry 0% exit 0%; }
    /* the reel: six frames, a cut between each, while the screen holds still under the nav */
    .dl-reel { height: calc(var(--dl-rh) + 330svh); view-timeline: --dl-reel block; --dl-rh: min(calc((100vw - 2 * var(--dl-m)) / 1.33), 736px, calc(100svh - var(--bar-h, 40px) - 56px - 48px)); }
    .dl-reel-stage { position: sticky; top: calc(var(--bar-h, 40px) + 56px + 24px); }
    .dl-reel-screen { width: calc(var(--dl-rh) * 1.33); }
    .dl-rf-it { display: grid; }
    .dl-rf-still:not(.dl-rf-last) { display: block; }
    .dl-rf { opacity: 0; animation: dl-cut linear both; animation-timeline: --dl-reel; }
    .dl-rf:nth-child(1) { animation-name: dl-cut-first; animation-range: contain 0% contain 17%; }
    .dl-rf:nth-child(2) { animation-range: contain 16% contain 34%; }
    .dl-rf:nth-child(3) { animation-range: contain 33% contain 51%; }
    .dl-rf:nth-child(4) { animation-range: contain 50% contain 68%; }
    .dl-rf:nth-child(4) .dl-rf-pic { animation: dl-push linear both; animation-timeline: --dl-reel; animation-range: contain 50% contain 68%; }
    .dl-rf:nth-child(5) { animation-range: contain 67% contain 85%; }
    .dl-rf:nth-child(6) { animation-name: dl-cut-last; animation-range: contain 84% contain 100%; }
    .dl-sunday-p1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
}
@keyframes dl-mask { from { clip-path: inset(var(--dl-my) var(--dl-mx)); } to { clip-path: inset(0 0); } }
@keyframes dl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dl-fly { from { transform: translateX(0); } to { transform: translateX(calc(var(--dl-content) - 120px)); } }
@keyframes dl-flap { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes dl-drift { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 13)); } }
@keyframes dl-cut-first { 0%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dl-cut { 0% { opacity: 0; } 6%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dl-cut-last { 0% { opacity: 0; } 6%, 100% { opacity: 1; } }
@keyframes dl-push { from { transform: scale(1.5); } to { transform: scale(1.8); } }

/* ------------------------------------------------ widths */
@media (max-width: 1180px) {
  .dl-foyer { --dl-sx: var(--dl-edge); }
  .dl-hero { width: min(calc(var(--dl-sh) * 1.33), calc(100vw - 2 * var(--dl-edge) - 270px)); }
  .dl-stage { gap: 24px; }
  .dl-lede { grid-column: 1 / 8; }
  .dl-today { grid-column: 8 / 13; }
  .dl-links { gap: 20px; }
  .dl-bk-seats .dl-bk-l { grid-column: 1 / 13; gap: 6px; }
  .dl-bk-seats .dl-bk-l .dl-sum { min-height: 0; margin-top: 4px; }
  .dl-bk-seats .dl-bk-r { grid-column: 1 / 13; margin-top: 12px; }
  .dl-book-form > :nth-child(odd) { grid-column: 1 / 7; }
  .dl-book-form > :nth-child(even) { grid-column: 7 / 13; }
  .dl-hold { grid-column: 1 / 13 !important; }
  .dl-visit h2 { grid-column: 1 / 13; position: relative; top: auto; max-width: none; margin-bottom: 48px; }
  .dl-visit-body { grid-column: 1 / 13; }
  .dl-ask { max-width: 760px; }
  .dl-billing { grid-column: 7 / 13; }
  .dl-b1 .dl-bt { font-size: calc(var(--dl-t-title) * 1.2); }
  .dl-sunday-copy > p { grid-column: 1 / 8; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .dl-stage { display: block; margin-right: var(--dl-m); }
  .dl-hero { width: 100%; }
  .dl-cap { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 32px; margin-top: 16px; }
  .dl-live-wrap { grid-column: 1; grid-row: 1 / span 2; }
  .dl-live { min-height: 0; }
  .dl-ctl { grid-column: 2; grid-row: 1; border-top: 0; padding-top: 0; }
  .dl-hint { grid-column: 2; grid-row: 2; }
  .dl-under { margin-top: 56px; }
  .dl-lede { grid-column: 1 / 13; }
  .dl-today { grid-column: 1 / 13; margin-top: 24px; }
  .dl-frow-flat { --n: 2; }
  .dl-frow-flat .dl-film:last-child { grid-column: 1 / -1; width: calc(50% - var(--dl-g) / 2); }
  .dl-bk-sessions .dl-bk-l { grid-column: 1 / 7; }
  .dl-bk-sessions .dl-bk-r { grid-column: 7 / 13; }
  .dl-bk-lead { margin-top: 44px; }
  .dl-day { grid-template-columns: 1fr; }
  .dl-sec .dl-words { grid-column: 1 / 8; }
  .dl-counter-copy .dl-lead { grid-column: 1 / 13; }
  .dl-counter-copy p:last-child { grid-column: 1 / 13; margin-top: 16px; }
  .dl-box-copy p:nth-child(1) { grid-column: 1 / 7; }
  .dl-box-copy p:nth-child(2) { grid-column: 7 / 13; }
  .dl-box-copy .dl-aside { grid-column: 1 / 10; margin-top: 24px; }
  .dl-sunday-copy > p { grid-column: 1 / 10; }
  .dl-sunday-copy .dl-lead { grid-column: 1 / 13; }
  .dl-billing { grid-column: 1 / 13; grid-row: 3; margin-top: 48px; }
  .dl-wp-lead { grid-column: 1 / 9; }
}
@media (max-width: 900px) {
  .dl-links { display: none; }
  .dl-menu { display: block; margin-left: auto; }
  .dl-nav { gap: 24px; }
}
@media (max-width: 700px) {
  .dl-nav { gap: 16px; }
  .dl-brand { font-size: 20px; }
  .dl-mk { width: 30px; height: 30px; }
  .dl-foyer { padding: 20px 0 48px; }
  .dl-stage { display: block; margin: 0; }
  .dl-hero { display: flex; flex-direction: column; width: 100%; aspect-ratio: auto; }
  .dl-page .dl-h1 { position: static; order: -1; align-self: flex-end; margin: 0 16px 16px; font-size: clamp(22px, 7vw, 28px); }
  .dl-drum { position: relative; inset: auto; aspect-ratio: 1.33 / 1; }
  .dl-cap { max-width: none; margin: 0 16px; padding-top: 16px; gap: 14px; }
  .dl-live { font-size: 18px; gap: 10px; min-height: 0; }
  .dl-rate { padding-left: 22px; }
  .dl-ctl { padding-top: 12px; gap: 4px 28px; }
  .dl-ring { width: 40px; height: 40px; }
  .dl-hint { display: none; }
  .dl-under { width: auto; margin: 28px 16px 0; display: grid; grid-template-columns: 1fr; gap: 24px; }
  .dl-lede, .dl-today { grid-column: 1; }
  .dl-lede { font-size: 20px; }

  .dl-sec { --dl-gap: 72px !important; }
  .dl-sec-head { display: block; margin-bottom: 36px; }
  .dl-sec-head .dl-lead { margin-top: 16px; }
  .dl-frow, .dl-frow-flat { --house: 1.85; display: block; }
  .dl-frow-flat .dl-film:last-child { width: auto; }
  .dl-film + .dl-film, .dl-frow + .dl-frow { margin-top: 56px; }
  .dl-bk { display: block; aspect-ratio: auto; padding: 20px 16px 28px; }
  .dl-bk-l { gap: 10px; }
  .dl-bk-screen { width: 100%; }
  .dl-bk-lead { margin-top: 32px; }
  .dl-day { grid-template-columns: 1fr; row-gap: 4px; margin-top: 8px; }
  .dl-bk-seats .dl-bk-l { display: grid; grid-template-columns: 1fr; }
  .dl-bk-seats .dl-bk-r { margin-top: 20px; }
  .dl-far { height: 48px; }
  .dl-seats { margin-top: 20px; }
  .dl-rowmode .dl-rowhint { display: block; font-style: italic; }
  .dl-rowmode .dl-srow { --sw: calc(var(--base) * var(--k)); min-height: 44px; margin-top: 0; }
  .dl-rowmode .dl-seats { --base: calc((100cqi - 56px) / 22.6); }
  .dl-room-small.dl-rowmode .dl-seats { --base: calc((100cqi - 56px) / 11); }
  .dl-rowmode .dl-seat { border-width: 1px; pointer-events: none; }
  .dl-rowmode .dl-rowpick { display: block; position: absolute; inset: 0 -8px; width: calc(100% + 16px); padding: 0; border: 0; border-radius: 2px; background: transparent; cursor: pointer; color: transparent; }
  .dl-rowmode .dl-rowpick:hover, .dl-rowmode .dl-rowpick:focus-visible { background: rgba(142, 47, 208, .08); }
  .dl-rowzoom .dl-rowback { display: block; }
  .dl-rowzoom .dl-srow:not(.dl-zoom) { display: none; }
  .dl-zoom { --sw: 44px; flex-direction: column; margin-top: 8px; width: 100%; }
  .dl-zoom .dl-rl:last-of-type { display: none; }
  .dl-zoom .dl-rl { font-size: 28px; }
  .dl-zoom .dl-sr { flex-wrap: wrap; justify-content: center; gap: 10px 8px; }
  .dl-zoom .dl-seat { transform: none; height: 40px; }
  .dl-book-form { display: grid; grid-template-columns: 1fr; }
  .dl-book-form > :nth-child(odd), .dl-book-form > :nth-child(even), .dl-hold { grid-column: 1 !important; }

  .dl-counter-screen { display: block; aspect-ratio: auto; background: none; box-shadow: none; }
  .dl-counter-screen::after { display: none; }
  .dl-sec .dl-words { aspect-ratio: 1.66; padding: 20px 24px; background: radial-gradient(ellipse 70% 60% at 50% 42%, #FBFBF8, #F0F0EB); box-shadow: 0 1px 0 rgba(26, 23, 23, .07); }
  .dl-counter-pic { aspect-ratio: 4 / 5; margin-top: 16px; }
  .dl-counter-copy { display: block; }
  .dl-counter-copy p:last-child { margin-top: 16px; }

  .dl-hall { --dl-hfs: min(72px, 20vw); }
  .dl-rooms { grid-template-columns: 1fr; margin-top: 48px; row-gap: 36px; }
  .dl-room:nth-child(1), .dl-room:nth-child(2), .dl-hall-p { grid-column: 1; }

  .dl-box-screen { overflow: visible; aspect-ratio: auto; background: none; box-shadow: none; }
  .dl-box-screen::after { display: none; }
  .dl-box-pic { position: relative; aspect-ratio: 1.85; }
  .dl-box-pic img { position: absolute; inset: 0; }
  .dl-sec .dl-box-screen h2 { position: static; text-align: left; font-size: var(--dl-t-h2); margin-top: 24px; }
  .dl-box-screen h2 span { display: inline; }
  .dl-box-copy { display: block; margin-top: 16px; }
  .dl-box-copy p + p { margin-top: 16px; }

  .dl-sunday-head { display: block; margin-bottom: 24px; }
  .dl-sunday-head .dl-when { margin-top: 12px; }
  .dl-rf-it { padding: 10%; gap: 14px; }
  .dl-rf-it::before { outline-offset: -5px; }
  .dl-rf-it p { font-size: clamp(1.0625rem, .6rem + 3.4vw, 1.5rem); }
  .dl-sunday-copy { display: block; margin-top: 28px; }
  .dl-sunday-copy > * + * { margin-top: 16px; }

  .dl-kicker { margin-left: 0; }
  .dl-wp-frame { display: block; aspect-ratio: auto; padding: 0 16px 24px; }
  .dl-seasons { --dl-t-poster: min(88px, 24vw); }
  .dl-wp-lead { margin-top: 20px; }
  .dl-billing { margin-top: 36px; gap: 24px; }
  .dl-b1 .dl-bt, .dl-b2 .dl-bt, .dl-b3 .dl-bt { font-size: var(--dl-t-title); }
  .dl-b3 em { font-size: inherit; }

  .dl-visit { display: block; }
  .dl-visit h2 { margin-bottom: 36px; }
  .dl-qa { grid-template-columns: 1fr; gap: 28px; }
  .dl-ask { grid-template-columns: 1fr; margin-top: 72px; }
  .dl-foot { padding-bottom: 48px; }
  .dl-flyer { width: 88px; }
  @keyframes dl-fly { from { transform: translateX(0); } to { transform: translateX(calc(100vw - 32px - 88px)); } }
  .dl-foot-row { gap: 20px 32px; }
  .dl-foot-row .dl-links { flex-wrap: wrap; gap: 12px 20px; }
  .dl-foot-row p { margin-left: 0; }
}
@media (max-width: 700px) and (max-height: 640px) {
  .dl-page .dl-h1 { position: absolute; top: 12px; right: 16px; z-index: 2; margin: 0; font-size: 22px; max-width: 18ch; }
  .dl-h1 span { display: inline; }
  .dl-h1 span:nth-child(2)::after { content: ""; display: block; }
  .dl-foyer { padding-top: 0; }
}
@media (max-width: 380px) {
  .dl-book-x { display: none; }
  .dl-nav { gap: 14px; }
  .dl-brand { font-size: 19px; gap: 8px; }
}
@media (hover: none) { .dl-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .dl-page *, .dl-page *::before, .dl-page *::after { transition: none !important; animation: none !important; }
  ::view-transition-group(dl-screen), ::view-transition-group(dl-title), ::view-transition-group(dl-row), ::view-transition-group(dl-list), ::view-transition-group(dl-rowz) { animation: none; }
}