/* =============================================================
   Project 168 — The Jindal Winter School of Performing Arts
   Art direction: the stage manager's prompt book.
   Paper, ink, and the two pencils every prompt book is marked in:
   red and blue (the deck's own red and JGU blue).
   ============================================================= */

@property --sx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --ta { syntax: "<number>"; inherits: true; initial-value: 0; } /* the ticket sheen */

:root {
  --paper: #FFFFFF;
  --paper-2: #F4F4F2;
  --sheet: #FBFBFA;
  --stock: #0E4A8B;
  --ink: #111111;
  --ink-2: #545454;
  --ink-3: #8C8C8C;
  --rule: rgba(17, 17, 17, .12);
  --maroon: #C62B26;            /* accent red (deck / SJPA) */
  --maroon-deep: #A11F1A;
  --maroon-light: #F6C9C3;
  --blue: #0E4A8B;              /* JGU blue */
  --blue-deep: #0A3264;
  --blue-light: #EAF0FA;
  --tint: #F6F5F2;
  --highlight: rgba(14, 74, 139, .14);
  --night: #071E3D;

  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --hand: "Instrument Serif", Georgia, serif;

  --bar-h: 76px;
  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right)); /* clear of the notch when a phone is held sideways */
  --margin: clamp(170px, 17vw, 240px);
  --y: clamp(80px, 11vw, 160px);

  --out: cubic-bezier(.16, 1, .3, 1);
  --in-out: cubic-bezier(.7, 0, .2, 1);
  --draw: cubic-bezier(.45, .05, .25, 1);

  --grain: none;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 8px); }
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
a, button, input, select, textarea, label { touch-action: manipulation; } /* no double-tap zoom on controls */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--highlight); color: var(--ink); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 400; padding: 10px 14px; background: var(--ink); color: var(--paper); font-family: var(--mono); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.mono { font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.hand { font-family: var(--hand); font-style: italic; font-weight: 400; line-height: 1.1; }
.hand--red { color: var(--maroon); }
.hand--blue { color: var(--blue); }
/* a part number, white in a red disc (Campus, Takeaway) */
.disc { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--maroon); color: #fff; font-family: var(--body); font-size: .95rem; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }

.title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.4vw, 5rem);
  line-height: .98;
  letter-spacing: -.035em;
  max-width: 18ch;
  text-wrap: balance;
}
.title--page { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.02; max-width: none; }
/* "from Script to the Stage" is ~10.2em long: on a phone the title scales down so it still holds two lines */
.title--steps { font-size: min(clamp(2.3rem, 5.4vw, 5rem), calc((100vw - 2 * var(--gutter)) / 10.4)); }
.lede { font-family: var(--serif); font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.18; max-width: 30ch; }
.smallcaps { font-family: var(--body); text-transform: uppercase; font-size: .5em; letter-spacing: .14em; font-weight: 500; vertical-align: .3em; color: var(--blue); }
.direction { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 1.3rem; line-height: 1.35; max-width: 46ch; }

/* ---------- Cue labels (margin notes) ---------- */
.cue { display: inline-flex; align-items: baseline; gap: .7em; font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cue b {
  display: inline-block;
  font-family: var(--hand);
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  color: var(--maroon);
}
.cue--light b { color: var(--maroon-light); }

/* ---------- Pencil marks ---------- */
.pencil { max-width: none; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: url(#pencil); pointer-events: none; }
.pencil--red { stroke: var(--maroon); }
.pencil--blue { stroke: var(--blue); }
.pencil--ink { stroke: var(--ink); }
.js .pencil path { stroke-dasharray: 1 2; stroke-dashoffset: 1.06; }
.js .is-drawn .pencil:not(.manual) path, .js .pencil.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 1.1s) var(--draw) var(--delay, 0s); }
.js .is-drawn .pencil:not(.manual) path:nth-child(2), .js .pencil.is-drawn path:nth-child(2) { --delay: calc(var(--d0, 0s) + .55s); }

/* ---------- Scene-change blackout ---------- */
.blackout {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--night);
  color: var(--paper);
  transform: translateY(101%);
  pointer-events: none;
  visibility: hidden;
}
.blackout__call { font-family: var(--mono); font-weight: 500; font-size: clamp(.9rem, 1.6vw, 1.1rem); letter-spacing: .3em; text-transform: uppercase; display: flex; gap: 1.2em; align-items: baseline; }
.blackout__call [data-bo-cue] { font-family: var(--hand); font-style: italic; font-size: 2.8em; letter-spacing: 0; color: var(--maroon-light); text-transform: none; }
.blackout__call .is-go { color: var(--maroon-light); font-family: var(--display); font-weight: 800; font-size: 2.6em; letter-spacing: -.02em; line-height: .8; }


/* ---------- Top bar ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bar a { text-decoration: none; }
.bar__brand { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.bar__brand { height: 100%; }
.bar__logo { display: block; width: auto; max-height: calc(100% - 16px); }
.bar__logo--jgu { height: 50px; }
.bar__logo--sjpa { height: 45px; }
.bar__rule { width: 1px; height: 36px; background: var(--rule); }
.bar__clock { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar__clock b { color: var(--blue); font-weight: 700; }
.bar__nav { display: flex; gap: clamp(10px, 1.6vw, 22px); margin-left: auto; }
.bar__nav a, .bar__book {
  position: relative;
  white-space: nowrap;
  background: linear-gradient(var(--blue), var(--blue)) no-repeat 0 100% / 0 1.5px;
  padding-bottom: 2px;
  transition: background-size .45s var(--out), color .2s;
}
.bar__nav a.is-active { background-size: 100% 1.5px; }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { background-size: 100% 1.5px; } }
.bar__nav a.is-active { color: var(--blue); }
.bar__book { padding: 11px 18px; font-weight: 700; color: #fff; background: var(--maroon); transition: background .3s; }
@media (hover: hover) and (pointer: fine) { .bar__book:hover { background: var(--maroon-deep); } }
.bar__index { display: none; width: 44px; height: 44px; margin-right: -10px; place-items: center; }
/* hamburger: three rules that cross into an X, the middle one shorter like a cue line */
.burger { position: relative; display: block; width: 26px; height: 16px; }
.burger i { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--ink); transition: top .35s var(--in-out) .2s, transform .35s var(--in-out), width .4s var(--out), opacity .2s; }
.burger i:nth-child(2) { top: 7px; width: 66%; }
.burger i:nth-child(3) { top: 14px; }
@media (hover: hover) and (pointer: fine) { .bar__index:hover .burger i:nth-child(2) { width: 100%; } }
.bar__index[aria-expanded="true"] .burger i { top: 7px; transition: top .35s var(--in-out), transform .35s var(--in-out) .25s, width .3s, opacity .2s; }
.bar__index[aria-expanded="true"] .burger i:nth-child(1) { transform: rotate(45deg); }
.bar__index[aria-expanded="true"] .burger i:nth-child(2) { width: 0; opacity: 0; }
.bar__index[aria-expanded="true"] .burger i:nth-child(3) { transform: rotate(-45deg); }

/* mobile booking ticket (shown under 600px) */
.dock { display: none; }

/* ---------- Title page ---------- */
.title-page {
  position: relative;
  max-width: 1440px;
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--bar-h) + 22px) var(--gutter) 28px;
  isolation: isolate;
}
/* Backdrop: the full-bleed photo at full colour under a light, pale black wash
   (a touch deeper at the foot), with the title page set in white over it. */
.title-page__bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; overflow: hidden; transform: translateX(-50%); background: #0B0B0C; }
.title-page__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; }
.title-page__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 10, 16, .46) 0, rgba(8, 10, 16, .4) 45%, rgba(8, 10, 16, .52) 78%, rgba(8, 10, 16, .74) 100%);
}
.js .title-page__bg img { opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 3s var(--out); }
.js .is-ready .title-page__bg img { opacity: 1; transform: none; }
.title-page__body { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: clamp(24px, 4vw, 40px); }
.title-page__school { font-family: var(--mono); font-weight: 700; font-size: clamp(.62rem, 2.7vw, .95rem); letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; color: var(--blue); }
/* the school's name on one line, picked out with a red marker band that sweeps in */
.title-page__mark { display: inline-block; padding: .62em calc(1em - .16em) .58em 1em; background: linear-gradient(var(--maroon), var(--maroon)) no-repeat 0 0 / 100% 100%; color: #fff; }
.js .title-page__mark { background-size: 0% 100%; transition: background-size .9s var(--draw) .45s; }
.js .is-ready .title-page__mark { background-size: 100% 100%; }
/* the red pen ring stays red over the photograph */
/* The flyer's Project 168 lockup: a blue bar over PROJECT over 168, each line justified to one width
   (Anton, squeezed to the flyer's proportions by textLength). --lock is that width. */
.title-page__title {
  --lock: clamp(150px, min(30vw, calc((100svh - 450px) / 1.56)), 460px);
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--lock);
  margin-top: clamp(18px, 3vw, 34px);
  font-weight: 700; /* the weight it had as the h1: Anton draws a touch heavier at 700, the look the lockup was tuned to */
}
.title-page__title text { font-family: Anton, "Arial Narrow", Impact, sans-serif; font-size: 100px; }
/* upright tablets have room for a bigger lockup; phones held sideways need a smaller one to fit above the fold */
@media (orientation: portrait) and (min-width: 601px) { .title-page__title { --lock: clamp(150px, min(40vw, calc((100svh - 450px) / 1.56)), 460px); } }
@media (orientation: landscape) and (max-height: 500px) {
  .title-page__title { --lock: min(118px, 30vw); margin-top: 12px; }
  .title-page__body { padding-block: 10px; }
  .title-page__tag { margin-top: 12px; }
}
.title-page__bar { display: block; height: calc(var(--lock) * .04); margin-bottom: calc(var(--lock) * .035); background: #22468A; }
.title-page__project, .title-page__num { display: block; }
.title-page__project svg, .title-page__digits { display: block; width: 100%; height: auto; overflow: visible; }
.title-page__project text { fill: var(--ink); }
.title-page__num { position: relative; margin-top: calc(var(--lock) * .045); }
.title-page__digits text { fill: #E3352D; }
.title-page__tag { margin-top: clamp(18px, 3vw, 30px); font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.9vw, 2.5rem); }
.title-page__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.producers__rule { width: 1px; height: 40px; background: var(--rule); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 40px; justify-content: flex-start; }
.facts dt { font-family: var(--mono); font-weight: 500; font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.facts dd { font-size: 1.05rem; }
.call { text-align: right; font-family: var(--mono); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.call__label { display: block; color: var(--ink-3); }
.call__clock { display: flex; justify-content: flex-end; gap: clamp(10px, 1.4vw, 18px); margin-top: 6px; text-transform: none; letter-spacing: 0; }
.call__clock > span { display: flex; align-items: baseline; gap: 4px; }
.call__clock b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.call__clock b[data-unit="d"] { font-weight: 700; color: var(--blue); }
.call__clock small { font-family: var(--mono); font-weight: 500; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* entrance */
.js .title-page__school, .js .title-page__project, .js .title-page__num, .js .title-page__tag, .js .facts > div, .js .call {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--out), transform 1.1s var(--out);
}
.js .is-ready .title-page__school { opacity: 1; transform: none; transition-delay: .05s; }
.js .is-ready .title-page__project { opacity: 1; transform: none; transition-delay: .15s; }
.js .is-ready .title-page__num { opacity: 1; transform: none; transition-delay: .25s; }
.js .is-ready .title-page__tag { opacity: 1; transform: none; transition-delay: 1.1s; }
.js .is-ready .facts > div, .js .is-ready .call { opacity: 1; transform: none; transition-delay: 1.3s; }

/* ---------- Plate ---------- */
.plate__img { position: relative; overflow: hidden; height: clamp(260px, 38vw, 640px); background: var(--blue); }
.plate__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
@media (max-width: 900px) { .plate__img { height: auto; aspect-ratio: 2000 / 711; } } /* phones and tablets: the whole ensemble, nobody cropped */
.js .plate__img { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--in-out); }
.js .plate__img img { transform: scale(1.12); transition: transform 2.2s var(--out); }
.js .plate.is-in .plate__img { clip-path: inset(0 0 0 0); }
.js .plate.is-in .plate__img img { transform: scale(1); }
.plate + .scene { padding-top: calc(var(--y) * .6); }

/* ---------- Scene layout ---------- */
.scene {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--margin) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  padding: var(--y) var(--gutter);
  border-top: 1px solid var(--rule);
  overflow-x: clip; /* contains the 3D page-open and slide-in transforms */
}

/* the Journey and the Residential scene sit closer: half the usual gap across that one rule */
.scene--close-below { padding-bottom: calc(var(--y) * .5); }
.scene--close-above { padding-top: calc(var(--y) * .5); }

.scene__cue { position: sticky; top: calc(var(--bar-h) + 26px); align-self: start; padding-top: .5rem; }
.scene__body { min-width: 0; grid-column: -2 / -1; } /* always the content column, with or without a cue beside it */
/* a scene without a cue sits centred on desktop, the same space either side */
@media (min-width: 901px) { .scene--solo > .scene__body { grid-column: 1 / -1; width: 100%; max-width: 1100px; margin-inline: auto; } }
.scene__body > .title + * { margin-top: clamp(24px, 3vw, 40px); }
.js .scene .title { clip-path: inset(0 0 100% 0); transform: translateY(.25em); transition: clip-path 1.1s var(--out), transform 1.1s var(--out); }
.js .scene.is-in .title { clip-path: inset(-10% -5% -10% -5%); transform: none; }

/* ---------- Q1 Open call ---------- */
/* the questions, with the running tally in a narrow column beside them */
.opencall {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(192px, 17vw, 210px);
  column-gap: clamp(36px, 5vw, 70px);
  align-items: start;
}
.tally { position: sticky; top: calc(var(--bar-h) + 28px); padding-top: 12px; }
.tally__label { color: var(--ink-3); }
.tally__marks { display: flex; gap: 12px; min-height: 96px; padding: 20px 0 16px; }
.tally__marks svg { width: 44px; height: 52px; stroke-width: 2.6; }
.tally__note { font-family: var(--serif); font-style: italic; color: var(--maroon); font-size: clamp(1.35rem, 1.7vw, 1.55rem); line-height: 1.12; text-wrap: balance; min-height: 2.24em; } /* two lines kept, so the button never jumps */
.tally__cta { margin-top: 34px; padding: 16px 26px; }
/* phones: the count is a card floating over the questions, just above the booking ticket;
   the button stays in the page, after the last question */
@media (max-width: 760px) {
  .opencall { grid-template-columns: minmax(0, 1fr); }
  .tally { position: static; padding-top: 0; }
  .tally__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 22px;
    margin-top: 26px;
    padding: 14px 18px 12px;
    background: var(--sheet);
    border: 1px solid var(--rule);
  }
  .tally__label { grid-column: 1 / -1; }
  .tally__marks { min-height: 0; gap: 8px; padding: 10px 0 2px; }
  .tally__marks svg { width: 34px; height: 42px; }
  .tally__note { font-size: 1.22rem; }
  .js .tally__card {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 180; /* under the open menu and the booking ticket */
    margin: 0;
    box-shadow: 0 14px 30px rgba(17, 17, 17, .14);
    transition: transform .6s var(--out), opacity .4s, visibility 0s;
  }
  .js .tally__card.is-away { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .6s var(--out), opacity .4s, visibility 0s .6s; }
}
@media (max-width: 600px) { .js .tally__card { bottom: calc(96px + env(safe-area-inset-bottom)); } } /* clear of the dock */
.callsheet { border-top: 1px solid var(--rule); }
.callsheet button {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 38px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 15px 4px 15px 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.45;
  transition: padding .45s var(--out);
}
@media (hover: hover) and (pointer: fine) { .callsheet button:hover { padding-left: 8px; } }
.callsheet .n { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.callsheet .q > span {
  background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 72% / 0% 62%;
  transition: background-size .7s var(--out);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 2px;
}
.callsheet button[aria-pressed="true"] .q > span { background-size: 100% 62%; }
.callsheet .box {
  position: relative;
  align-self: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
}
.callsheet .box svg { position: absolute; left: -4px; top: -10px; width: 30px; height: 30px; stroke-width: 3; }

/* ---------- Q2 Programme ---------- */
/* the lede runs the full width of the content column, out to the photo's right edge below it;
   'pretty' (not 'balance') so the first line fills the measure instead of splitting in half */
.prog__text { display: block; }
.prog__text .lede { max-width: none; text-wrap: pretty; }
.prog .smallcaps { display: block; margin-bottom: .7em; vertical-align: baseline; }
/* The seven building blocks as a cue sheet, beside a reel of performance photos.
   Each stage is called in turn: its cue light comes on blue and a blue hairline runs along its
   rule for as long as it holds. Stages already called stay lit in ink, the ones to come wait in
   grey, so the sheet fills up from Text to Performance; then the call goes back to Text. A click
   calls any stage. The photos run on their own clock, in a shuffled order, and every change uses
   the next transition in the set (no photo belongs to a word). The waiting/lit states only apply
   once main.js has armed it (data-armed); without it the sheet shows in ink beside the last photo. */
/* --swap is the words' beat (colour and cue light); --reel is the photo transition's */
.showcase {
  --swap: 1.05s;
  --reel: 1.4s;
  container-type: inline-size; /* the words are sized to the sheet, so the longest stays on one line */
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head ." "list frame";
  column-gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 5.5vw, 76px);
}
.showcase__head { grid-area: head; padding-bottom: 14px; font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
/* an ink head rule, then a hairline under every stage */
.crescendo { grid-area: list; display: flex; flex-direction: column; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / 100% 1px; }
.crescendo li { position: relative; flex: 1 1 auto; display: flex; background: linear-gradient(var(--rule), var(--rule)) no-repeat 0 100% / 100% 1px; }
.crescendo li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.crescendo li.is-timing::after { animation: cueTime var(--hold, 2.6s) linear both; }
@keyframes cueTime { to { transform: scaleX(1); } }
.crescendo button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .55em;
  min-height: 40px;
  padding: .22em 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3.1cqi, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  white-space: nowrap;
  transition: color var(--swap) var(--in-out);
}
/* the cue light: an empty ring while a stage waits, ink once it has been called, blue while it is on */
.crescendo__lamp { flex: none; width: max(8px, .3em); height: max(8px, .3em); border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color var(--swap) var(--in-out), box-shadow var(--swap) var(--in-out); }
.showcase[data-armed] .crescendo button { color: var(--ink-3); }
.showcase[data-armed] .crescendo .is-done button { color: var(--ink); }
.crescendo .is-done .crescendo__lamp { background: var(--ink); }
.showcase .crescendo .is-on button { color: var(--blue); }
.crescendo .is-on .crescendo__lamp { background: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 5px rgba(14, 74, 139, .14); }
@media (hover: hover) and (pointer: fine) {
  .showcase .crescendo li:not(.is-on) button:hover { color: var(--ink); transition-duration: .25s; }
  .crescendo li:not(.is-on) button:hover .crescendo__lamp { box-shadow: inset 0 0 0 1.5px var(--blue); transition-duration: .25s; }
}
.showcase__frame { grid-area: frame; position: relative; overflow: hidden; aspect-ratio: 3 / 2; height: 100%; background: var(--blue-deep); } /* the photos' own 3:2, or as tall as the sheet if that runs longer */
.showcase__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.showcase[data-armed] .showcase__frame img { visibility: hidden; }
.showcase[data-armed] .showcase__frame img.is-prev { visibility: visible; z-index: 1; }
/* the incoming photo plays over the last one; main.js names a different transition (--fx) each time */
.showcase[data-armed] .showcase__frame img.is-on { visibility: visible; z-index: 2; animation: var(--fx, fxRise) var(--reel) var(--in-out) both; }
@property --blind { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes fxRise { from { clip-path: inset(100% 0 0 0); scale: 1.08; } to { clip-path: inset(0 0 0 0); scale: 1; } }               /* wipes up from the floor */
@keyframes fxFly { from { clip-path: inset(0 0 100% 0); scale: 1.08; } to { clip-path: inset(0 0 0 0); scale: 1; } }                /* flown in from above */
@keyframes fxCurtain { from { clip-path: inset(0 50% 0 50%); scale: 1.06; } to { clip-path: inset(0 0 0 0); scale: 1; } }           /* parts from the centre */
@keyframes fxWipe { from { clip-path: inset(0 100% 0 0); translate: -4% 0; } to { clip-path: inset(0 0 0 0); translate: 0 0; } }   /* wipes across, left to right */
@keyframes fxIris { from { clip-path: circle(0% at 50% 50%); scale: 1.1; } to { clip-path: circle(75% at 50% 50%); scale: 1; } }    /* a follow spot opening up */
@keyframes fxDiagonal { from { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); } to { clip-path: polygon(100% 100%, -100% 100%, 100% -100%); } } /* from the far corner */
@keyframes fxDissolve { from { opacity: 0; scale: 1.12; } to { opacity: 1; scale: 1; } }                                            /* a slow cross-fade */
@keyframes fxShutter { from { --blind: 0%; } to { --blind: 100%; } }                                                                 /* louvres opening */
.showcase__frame img.is-on[style*="fxShutter"] {
  -webkit-mask: linear-gradient(90deg, #000 var(--blind), transparent var(--blind)) 0 0 / calc(100% / 7 + .5px) 100% repeat-x;
  mask: linear-gradient(90deg, #000 var(--blind), transparent var(--blind)) 0 0 / calc(100% / 7 + .5px) 100% repeat-x;
}
/* entrance: the rules draw across, the stages slide in after them, the frame wipes up */
.js .crescendo { background-size: 0% 1px; transition: background-size 1.1s var(--in-out); }
.js .scene.is-in .crescendo { background-size: 100% 1px; }
.js .crescendo li { background-size: 0% 1px; transition: background-size 1.1s var(--in-out) calc(var(--i) * 80ms); }
.js .scene.is-in .crescendo li { background-size: 100% 1px; }
.js .crescendo button { opacity: 0; transform: translateX(-18px); transition: opacity .8s var(--out) calc(var(--i) * 80ms + .15s), transform 1s var(--out) calc(var(--i) * 80ms + .15s), color var(--swap) var(--in-out); }
.js .scene.is-in .crescendo button { opacity: 1; transform: none; }
.js .showcase__frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--in-out) .2s; }
.js .scene.is-in .showcase__frame { clip-path: inset(0 0 0 0); }
/* phones: the photo first, the whole sheet under it, both on one screen */
@media (max-width: 760px) {
  .showcase { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "frame" "list"; }
  .showcase__head { padding-bottom: 12px; }
  .crescendo { margin-top: 20px; }
  .crescendo button { min-height: 46px; font-size: 1.25rem; }
}
/* About the Academy, then the callback, under the sheet and lined up with it: the button
   closes the line on the right on big screens and drops under the paragraph on phones */
.prog__aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px clamp(28px, 4vw, 64px); margin-top: clamp(36px, 4.5vw, 60px); }
.prog__about { max-width: 64ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 760px) { .prog__aside { grid-template-columns: minmax(0, 1fr); } }
.js .prog__about { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--out) .75s, transform 1s var(--out) .75s; }
.js .scene.is-in .prog__about { opacity: 1; transform: none; }

/* ---------- Q3 The number ---------- */
.number { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.number__sum { font-family: var(--mono); font-weight: 300; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.12; letter-spacing: -.03em; text-align: right; font-variant-numeric: tabular-nums; }
.number__sum p { display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; }
.number__sum small { font-size: .6em; margin-right: .35em; color: var(--ink-2); }
.number__sum i { font-style: normal; font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); width: 5.2em; text-align: left; }
.sum-rule { width: 100%; height: 12px; margin: 6px 0 10px; stroke-width: 2.2; --dur: .6s; }
.number__total { font-weight: 800; }
.ringed { position: relative; display: inline-block; }
.ringed .loop { position: absolute; left: -22%; top: -24%; width: 144%; height: 148%; stroke-width: 2.4; --d0: .5s; --delay: .5s; }
.verbs { margin-top: 30px; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.05; letter-spacing: -.035em; }
.verbs span:last-child { color: var(--maroon); }

.ledger { max-width: 860px; margin-top: clamp(48px, 7vw, 96px); }
.ledger__cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; color: var(--ink-2); }
.ledger__readout { color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger__grid { display: grid; grid-template-columns: 70px repeat(24, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.ledger__day { align-self: stretch; display: flex; align-items: center; font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ledger__cell { position: relative; min-width: 0; aspect-ratio: 1; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); cursor: pointer; }
.ledger__day + .ledger__cell { border-left: 1px solid var(--rule); }
.ledger__cell::before { content: ""; position: absolute; inset: 1px; opacity: 0; transition: opacity .4s ease; }
.ledger__cell.on::before { background: repeating-linear-gradient(45deg, var(--blue) 0 1.2px, transparent 1.2px 4.5px); }
.ledger__cell.half::before { background: repeating-linear-gradient(45deg, var(--blue) 0 1.2px, transparent 1.2px 4.5px) 0 0 / 50% 100% no-repeat; }
.ledger__cell.lit::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .ledger__cell:hover { background: rgba(17, 17, 17, .07); } }
.ledger__cell.is-pin::after {
  content: "";
  position: absolute;
  inset: -55%;
  border: 2px solid var(--maroon);
  border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%;
  animation: pin .5s var(--out) both;
  z-index: 2;
}
@keyframes pin { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ledger__axis { display: flex; justify-content: space-between; margin: 8px 0 0 70px; color: var(--ink-3); font-size: .7rem; }
.ledger__key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-top: 16px; color: var(--ink-2); font-size: .74rem; }
.ledger__key span { display: inline-flex; align-items: center; gap: 10px; }
.key { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--rule); }
.key--on { background: repeating-linear-gradient(45deg, var(--blue) 0 1.2px, transparent 1.2px 4px); }

/* ---------- Q4 Process ---------- */
.process { border-top: 1px solid var(--rule); }
.process li { position: relative; z-index: 0; }
.process button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  isolation: isolate;
}
.process button::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--gutter));
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .55s var(--out);
  z-index: -1;
}
.process__n { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); transition: color .3s; padding-left: 4px; }
.process__word { position: relative; justify-self: start; font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.035em; transition: transform .5s var(--out), color .3s; }
.process__text { font-size: 1.08rem; color: var(--ink-2); transition: color .3s; padding-right: 8px; }
@media (hover: hover) and (pointer: fine) { .process button:hover .process__word { transform: translateX(10px); } }
@media (hover: hover) and (pointer: fine) { .process button:hover::before { transform: scaleY(1); } }
@media (hover: hover) and (pointer: fine) { .process button:hover .process__word, .process button:hover .process__text { color: var(--paper); } }
@media (hover: hover) and (pointer: fine) { .process button:hover .process__n { color: var(--maroon-light); } }
.process .strike { position: absolute; left: -4%; top: 38%; width: 108%; height: .3em; stroke-width: 2.6; --dur: .55s; }
.process button[aria-pressed="true"] .process__word,
@media (hover: hover) and (pointer: fine) { .process button[aria-pressed="true"]:hover .process__word { color: var(--ink-3); } }

/* ---------- Q5 The week ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(28px, 4vw, 48px); }
.day button {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: clamp(300px, 30vw, 400px);
  display: flex;
  flex-direction: column;
  padding: 16px clamp(10px, 1.2vw, 18px) 22px;
  border-left: 1px solid var(--rule);
  overflow: hidden;
}
.day:first-child button { border-left: 0; }
.day button::before {
  content: "";
  position: absolute;
  inset: -10% -40% 0;
  z-index: -1;
  background: radial-gradient(ellipse 58% 78% at 50% 0%, rgba(14, 74, 139, .30), rgba(14, 74, 139, .12) 45%, transparent 75%), linear-gradient(to bottom, var(--blue-light), transparent 75%);
  opacity: 0;
  transform: translateY(-14%);
  transition: opacity .5s ease, transform .9s var(--out);
}
.day button[aria-pressed="true"]::before { opacity: 1; transform: none; animation: lamp .9s steps(1) both; }
@keyframes lamp { 0% { opacity: .2; } 12% { opacity: .9; } 22% { opacity: .35; } 34% { opacity: 1; } }
.day__date { color: var(--ink-3); }
.day__n { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 6vw, 6rem); line-height: .86; letter-spacing: -.05em; margin-top: 18px; transition: color .35s, transform .7s var(--out); }
.day__title { margin-top: 30px; min-height: 2em; display: flex; align-items: flex-end; font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.08; letter-spacing: -.02em; }
.day__text { margin-top: 10px; font-size: .98rem; line-height: 1.4; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .day button:hover .day__n { transform: translateY(-6px); } }
.day button[aria-pressed="true"] .day__n { color: var(--maroon); }
.day--show button { background: var(--maroon); color: #fff; }
.day--show .day__date, .day--show .day__text { color: rgba(255, 255, 255, .7); }
.day--show .day__n { color: #fff; }
.day--show button::before { background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 255, 255, .28), transparent 70%); }
.week__note { max-width: none; margin-top: 26px; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.35; text-wrap: balance; }

/* ---------- Q6 Credits ---------- */
.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 80px); margin-top: 22px; counter-reset: credit; }
.credits button::before {
  counter-increment: credit;
  content: counter(credit);
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transition: background .35s var(--out), transform .5s var(--out);
}
@media (hover: hover) and (pointer: fine) { .credits button:hover::before { transform: scale(1.12); } }
.credits button.is-signed::before { background: var(--maroon); transform: scale(1.12); }
.credits button {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 13px 0 11px;
  border-bottom: 1px solid var(--rule);
}
.credits span { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: -.02em; line-height: 1.1; transition: transform .45s var(--out); }
.credits i { flex: 1; min-width: 20px; }
.credits em {
  position: relative;
  flex: none;
  width: 5.2em;
  height: 1.4em;
  font-family: var(--hand);
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--maroon);
}
.credits em::after {
  content: "you";
  position: absolute;
  left: .5em;
  bottom: .02em;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s cubic-bezier(.6, 0, .4, 1);
}
.credits button.is-signed em::after { clip-path: inset(-20% -10% -20% -10%); }
@media (hover: hover) and (pointer: fine) { .credits button:hover span { transform: translateX(6px); } }
.credits__foot { margin-top: 20px; color: var(--ink-3); }

/* ---------- Q7 Spaces ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.plan { border-left: 1px solid var(--rule); padding: 20px clamp(12px, 1.6vw, 24px) 22px; }
.plan:first-child { border-left: 0; padding-left: 0; }
.plan__draw { display: block; width: 100%; padding: 6px; transition: background .3s; }
@media (hover: hover) and (pointer: fine) { .plan__draw:hover { background: rgba(17, 17, 17, .04); } }
.plan svg { width: 100%; height: auto; aspect-ratio: 160 / 120; overflow: visible; }
.ln { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linecap: round; }
.ln--wall { stroke-width: 1.4; }
.ln--dash { stroke-dasharray: .02 .02; stroke-width: .8; }
.ln--seats { stroke-width: 2.6; stroke-dasharray: 0 4.6; stroke: var(--blue); }
.fill-hatch { fill: url(#hatch); }
.js .plan .ln:not(.ln--dash):not(.ln--seats) { stroke-dasharray: 1 2; stroke-dashoffset: 1.06; }
.js .plan .ln--dash, .js .plan .ln--seats, .js .plan .fill-hatch { opacity: 0; }
.js .plan.is-drawn .ln:not(.ln--dash):not(.ln--seats) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--draw) calc(var(--k, 0) * 70ms); }
.js .plan.is-drawn .ln--dash, .js .plan.is-drawn .ln--seats, .js .plan.is-drawn .fill-hatch { opacity: 1; transition: opacity .5s ease calc(.5s + var(--k, 0) * 90ms); }
.plan figcaption { margin-top: 14px; font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.25rem); letter-spacing: -.02em; line-height: 1.1; }
.plan figcaption .mono { display: block; margin-bottom: 6px; color: var(--ink-3); font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .12em; }
.spaces__aims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); } /* two halves, lined up with the plan columns above */
.spaces__aims li { padding: 18px clamp(12px, 1.6vw, 24px) 20px; border-left: 1px solid var(--rule); font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.2; }
.spaces__aims li:first-child { border-left: 0; padding-left: 0; }

/* ---------- Q8 Masterclass ---------- */
/* How you'll learn: a numbered list beside the photograph. */
.master {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  grid-template-areas: "title photo" "how photo";
  column-gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.master__title { grid-area: title; }
.master > .master__photo { grid-area: photo; margin-top: 0; position: relative; overflow: hidden; }
.master__photo img { width: 100%; filter: saturate(.92) contrast(1.04); }
.js .master__photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--in-out); }
.js .scene.is-in .master__photo { clip-path: inset(0); }

.master__sub { display: flex; flex-direction: column; gap: 8px; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1; letter-spacing: -.03em; }
.master__sub .mono { color: var(--ink-3); letter-spacing: .14em; }

.master__how { grid-area: how; margin-top: clamp(36px, 4.5vw, 60px); }
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: clamp(20px, 3vw, 40px); margin-top: 20px; }
.formats li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid var(--rule); font-weight: 600; font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.25; letter-spacing: -.01em; }
.formats li span { flex: none; width: 1.6em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15em; color: var(--maroon-light); }

/* ---------- Q9 Campus ---------- */
.campus__sub { font-style: italic; max-width: none; }
.campus__intro { margin-top: clamp(22px, 2.6vw, 34px); font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--ink-2); }
.offstage { margin-top: 26px; border-top: 1px solid var(--rule); }
.offstage li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--body);
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}

/* ---------- Q10 Takeaway ---------- */
.contents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--rule); }
.contents section { padding: 22px clamp(14px, 2vw, 32px) 10px; border-left: 1px solid var(--rule); }
.contents section:first-child { border-left: 0; padding-left: 0; }
.contents h3 { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.02; letter-spacing: -.03em; }
.contents ul { margin-top: 18px; }
.contents li { padding: 9px 0; border-bottom: 1px dotted var(--rule); font-size: 1.1rem; }
.contents li:last-child { border-bottom: 0; }

/* ---------- Q11 Spread ---------- */
.spread { display: grid; grid-template-columns: 1fr 1fr; perspective: 2200px; filter: drop-shadow(0 22px 26px rgba(17, 17, 17, .16)); }
.spread__page { background: var(--sheet) var(--grain); padding: clamp(26px, 4vw, 56px); transition: transform 1.2s var(--out), opacity .9s ease; }
.spread__page--left { background-image: linear-gradient(to left, rgba(17, 17, 17, .1), transparent 7%), var(--grain); transform-origin: right center; border-radius: 3px 0 0 3px; }
.spread__page--right { background-image: linear-gradient(to right, rgba(17, 17, 17, .12), transparent 8%), var(--grain); transform-origin: left center; border-radius: 0 3px 3px 0; }
.js .spread__page--left { opacity: 0; transform: translateX(-28px); }
.js .spread__page--right { opacity: 0; transform: translateX(28px); }
.js .scene.is-in .spread__page { transform: none; opacity: 1; }
.spread__folio { color: var(--ink-3); margin-bottom: 18px; }
.promises { margin-top: 26px; counter-reset: p; }
.promises li { counter-increment: p; display: grid; grid-template-columns: 34px 1fr; padding: 13px 0; border-top: 1px solid var(--rule); }
.promises li::before { content: counter(p, decimal-leading-zero); font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--maroon); padding-top: .25em; }
.promises h3 { font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; letter-spacing: -.015em; }
.promises p { grid-column: 2; margin-top: 2px; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--blue); }
.matters { margin-top: 26px; }
.matters > div { padding: 13px 0; border-top: 1px solid var(--rule); }
.matters dt { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.03em; }
.matters dd { margin-top: 4px; color: var(--ink-2); }

.can-hl { cursor: pointer; }
.hl {
  background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 78% / 0% 58%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .7s var(--out);
}
.is-hl .hl { background-size: 100% 58%; }
@media (hover: hover) and (pointer: fine) { .can-hl:hover .hl { background-size: 14% 58%; } }
@media (hover: hover) and (pointer: fine) { .is-hl:hover .hl { background-size: 100% 58%; } }

/* ---------- Once: slide 14's line, told as a short film ----------
   A title sequence on a dark stage, one shot per phrase, hard cuts on the beat:
   168 (red, rising) → "hours can change" over the smoke → "how you see", the word pulled into
   focus over the dancer → "performance" over a quick montage → the whole line as the end frame
   (the 168 fills red, the lines rise, a stage light passes). It plays by itself and loops while
   on screen. main.js (11b) sets data-shot (a–e). Without
   the script (or with reduced motion) only the end frame shows, complete. */
.once {
  --lit: #E3352D;
  --h: min(52svh, 28.5vw, 540px);               /* height of the end frame's numerals */
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  max-width: none;
  min-height: calc(100svh - var(--bar-h));
  padding: clamp(48px, 8vh, 96px) var(--gutter);
  overflow: hidden;
  border-top: 0;
  background: #0A0A0B;
  color: #fff;
}
.once + .scene { border-top: 0; }
/* the floor light the numerals stand in */
.once::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(56% 52% at 50% 104%, rgba(227, 53, 45, .32), rgba(227, 53, 45, .08) 55%, transparent 78%),
    radial-gradient(48% 40% at 50% -6%, rgba(255, 255, 255, .07), transparent 72%);
}

/* ---- the film ---- */
.once__film { position: absolute; inset: 0; z-index: 0; visibility: hidden; pointer-events: none; }
.once[data-armed] .once__film { visibility: visible; }
.film__pics { position: absolute; inset: 0; overflow: hidden; }
.film__pic { position: absolute; inset: 0; background: #0A0A0B center / cover no-repeat; opacity: 0; }
.film__pic.is-on { opacity: 1; animation: film-push 3.2s linear both; }
/* grade: the house kept dark so the words read */
.film__pics::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(10, 10, 11, .3), rgba(10, 10, 11, .78) 100%),
    linear-gradient(rgba(10, 10, 11, .25), rgba(10, 10, 11, .35) 60%, rgba(10, 10, 11, .9));
}
.film__shot {
  position: absolute;
  inset: clamp(40px, 7vh, 80px) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--serif);
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
  visibility: hidden;
}
.once[data-armed][data-shot="a"] .film__shot--num,
.once[data-armed][data-shot="b"] .film__shot--hours,
.once[data-armed][data-shot="c"] .film__shot--see,
.once[data-armed][data-shot="d"] .film__shot--perf { visibility: visible; }

/* a: 168 rises red out of the dark */
.film__shot--num svg { width: auto; height: min(58svh, 46vw); overflow: visible; }
.film__shot--num text { font-family: Anton, "Arial Narrow", Impact, sans-serif; font-size: 100px; fill: var(--lit); }
.once[data-shot="a"] .film__shot--num svg { animation: film-fill .8s cubic-bezier(.65, 0, .25, 1) .1s both, film-drift 1.9s linear both; }
/* b: the words land one by one */
.film__shot--hours { flex-direction: row; justify-content: center; align-items: center; gap: .26em; font-size: min(12.5vw, 19svh); }
.film__shot--hours span { display: inline-block; }
.once[data-shot="b"] .film__shot--hours span { animation: film-word .75s var(--out) both; }
.once[data-shot="b"] .film__shot--hours span:nth-child(2) { animation-delay: .38s; }
.once[data-shot="b"] .film__shot--hours span:nth-child(3) { animation-delay: .76s; }
/* c: "see" pulled into focus */
.film__how { font-size: min(5.4vw, 8svh); color: rgba(255, 255, 255, .82); }
.film__see { font-size: min(34vw, 50svh); font-style: italic; line-height: .86; padding: 0 .12em; }
.once[data-shot="c"] .film__how { animation: film-word .7s var(--out) .05s both; }
.once[data-shot="c"] .film__see { animation: film-focus 1.2s cubic-bezier(.2, .7, .2, 1) .4s both; }
/* d: performance, letter by letter, over the montage */
.film__perf { font-size: min(14.5vw, 22svh); }
.film__perf i { display: inline-block; font-style: normal; }
.once[data-shot="d"] .film__perf i { animation: film-letter .6s var(--out) calc(.12s + var(--i, 0) * 45ms) both; }

@keyframes film-push { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes film-fill { from { clip-path: inset(100% -4% -4% -4%); } to { clip-path: inset(-4% -4% -4% -4%); } }
@keyframes film-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes film-word { from { opacity: 0; transform: translateY(.3em); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes film-focus { from { opacity: 0; transform: scale(1.3); filter: blur(28px); } 40% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes film-letter { from { opacity: 0; transform: translateY(.32em); } to { opacity: 1; transform: none; } }

/* ---- e: the end frame, the whole line ---- */
.once__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.once[data-armed]:not([data-shot="e"]) .once__in { visibility: hidden; }
.once__line { display: flex; align-items: flex-start; gap: clamp(22px, 3.2vw, 56px); font-weight: 400; }
.once__num { position: relative; display: block; flex: none; width: calc(var(--h) * 83 / 88); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.once__num svg { display: block; width: 100%; height: auto; overflow: visible; }
.once__num text { font-family: Anton, "Arial Narrow", Impact, sans-serif; font-size: 100px; }
.once__ghost text { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .3); stroke-width: .3; }
.once__lit { position: absolute; inset: 0; }
.once__lit text { fill: var(--lit); }
/* the stage light that passes across the numerals */
.once__view { position: absolute; inset: 0; pointer-events: none; }
.once__glint { opacity: 0; transform: skewX(-14deg); }
@keyframes once-glint {
  0% { opacity: 0; transform: translateX(0) skewX(-14deg); }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(150px) skewX(-14deg); }
}
/* the three lines stand exactly as tall as the numerals: the top of "hours" level with the top
   of the 168, "performance" on its baseline. Measured: the numerals' ink runs from the top of
   their box to 87/88 of it; Instrument Serif's ascent is .99em, descent .31em, and the tallest
   letters of the first line rise .74em. With a 1em line pitch, three lines span 2.74em of ink,
   so the type is (87/88) / 2.74 = .3608 of the numerals' height, lifted .12em. */
.once__words { display: flex; flex-direction: column; margin-top: -.12em; font-family: var(--serif); font-size: calc(var(--h) * .3608); line-height: 1; letter-spacing: -.012em; white-space: nowrap; }
.once__row { display: block; overflow: hidden; padding: .02em .1em .2em 0; margin-bottom: -.22em; }
.once__row > span { display: inline-block; }
.once__words em { font-style: italic; }
@keyframes once-row { from { transform: translateY(112%); } to { transform: none; } }
.once[data-shot="e"] .once__lit { animation: film-fill .9s cubic-bezier(.65, 0, .25, 1) .1s both; }
.once[data-shot="e"] .once__row > span { animation: once-row 1s var(--out) .45s both; }
.once[data-shot="e"] .once__row:nth-child(2) > span { animation-delay: .62s; }
.once[data-shot="e"] .once__row:nth-child(3) > span { animation-delay: .79s; }
.once[data-shot="e"] .once__glint { animation: once-glint 1.5s cubic-bezier(.6, 0, .3, 1) 1.5s both; }

@media (max-width: 760px) {
  .once { --h: min(44svh, 70vw); }
  .once__in { justify-self: start; }
  .once__line { flex-direction: column; align-items: flex-start; gap: clamp(14px, 3vh, 26px); }
  .once__words { margin-top: 0; font-size: min(14vw, 4.4rem); }
  /* an upright screen: the shots are set like a vertical film, the words stacked and large */
  .film__shot--num svg { height: min(46svh, 70vw); }
  .film__shot--hours { flex-direction: column; gap: 0; font-size: min(22vw, 12svh); line-height: .98; }
  .film__how { font-size: min(7vw, 8svh); }
  .film__see { font-size: min(44vw, 40svh); }
  .film__perf { font-size: min(17vw, 14svh); }
}

/* ---------- Q12 Frame ---------- */
/* The nine stages as a cue sheet that calls itself, printed as one plate (crop
   marks at its corners). An uncalled cue is outlined lettering on a grey cue line.
   When the stage manager calls it, its cue light comes on, a red rule burns along
   the line to the next cue and the word fills with red ink; once the call moves
   on, black ink wipes over the red in the same direction. Return is ringed and the
   note is written in. Wide: a 3 × 3 sheet read left to right. Narrow (measured on
   the container, not the window): one cue per line, threaded on a spine. */
.seq { container: seq / inline-size; --step: .34s; --c: min(28px, calc(var(--gutter) - 8px)); }
.title + .seq { margin-top: clamp(44px, 4.4vw, 60px); }
.seq__plate { position: relative; }
.seq__list { --fs: clamp(1.9rem, 5.2cqi, 3.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seq__cue { position: relative; }
.seq__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 18px 18px clamp(24px, 2.4vw, 32px) 0;
}
/* focus: a box around the numeral and the word, clear of the cue line and its light */
.seq__btn:focus-visible { outline: none; }
.seq__btn::after { content: ""; position: absolute; inset: 11px 8px 12px -8px; outline: 2px solid var(--blue); opacity: 0; pointer-events: none; }
.seq__btn:focus-visible::after { opacity: 1; }
.seq__cue--last .seq__btn::after { bottom: -8px; }

/* print crop marks: the whole journey sits in one frame */
.seq__crops { position: absolute; inset: 0; pointer-events: none; }
.seq__crop { position: absolute; width: var(--c); height: var(--c); overflow: visible; fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-linecap: butt; shape-rendering: crispEdges; }
.seq__crop path { stroke-dasharray: 1 2; vector-effect: non-scaling-stroke; }
.js .seq__crop path { stroke-dashoffset: 1.06; }
.js .seq.is-framed .seq__crop path { stroke-dashoffset: 0; }
.seq__crop--tl, .seq__crop--bl { left: calc(1px - var(--c)); }
.seq__crop--tr, .seq__crop--br { right: calc(1px - var(--c)); }
.seq__crop--tl, .seq__crop--tr { top: calc(1px - var(--c)); }
.seq__crop--bl, .seq__crop--br { bottom: calc(1px - var(--c)); }
.seq__crop--tr { transform: scaleX(-1); }
.seq__crop--bl { transform: scaleY(-1); }
.seq__crop--br { transform: scale(-1, -1); }

/* the printed cue line, the cue light and the rule that burns along it.
   The rule is half ink, half red: sliding it shows red, then wipes ink over it. */
.seq__track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.seq__fuse {
  --off: scaleX(0);
  --f-dir: 90deg;
  --f-size: 200% 100%;
  --f-red: 100% 0;
  --f-ink: 0 0;
  position: absolute;
  left: 0;
  top: -.5px;
  width: 100%;
  height: 2px;
  background: linear-gradient(var(--f-dir), var(--ink) 50%, var(--maroon) 50%) var(--f-ink) / var(--f-size) no-repeat;
  transform-origin: 0 50%;
  transition: transform var(--step) linear, background-position .6s var(--in-out);
}
.seq__node {
  position: absolute;
  left: 0;
  top: -5px;
  width: 11px;
  height: 11px;
  background: var(--maroon);
  border: 1.5px solid var(--maroon);
  transition: background-color .2s, border-color .2s;
}
.seq__q {
  margin-top: 4px;
  font-family: var(--hand);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--maroon);
  font-variant-numeric: lining-nums;
  transition: color .3s;
}

/* the word: real text sets the size (and is what assistive tech reads);
   an outline layer and an ink layer sit on top and trade places in one wipe */
.seq__word {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs);
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: transparent;
  transition: transform .5s var(--out);
}
.seq__line, .seq__ink { position: absolute; inset: 0; transition: clip-path .62s var(--out); }
.seq__line {
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink); /* painted under a paper fill: a clean 1px outline, no glyph overlaps */
  paint-order: stroke fill;
  clip-path: inset(-20% -6% -20% 106%);
}
/* the ink layer is a little larger than the word so the ink reaches every glyph edge */
.seq__ink {
  inset: -.16em -.12em -.16em -.06em;
  padding: .16em 0 0 .06em;
  color: transparent;
  background: linear-gradient(90deg, var(--ink) 50%, var(--maroon) 50%) 0 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  clip-path: inset(-10% -4% -10% -2%);
  transition: clip-path .62s var(--out), background-position .6s var(--in-out);
}
.seq__ring { position: absolute; left: -16%; top: -32%; width: 132%; height: 164%; stroke-width: 2; }
.js .seq__ring path { transition: stroke-dashoffset .3s var(--draw); }
.js .seq.is-ringed .seq__ring path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--draw); }
.seq__cue--last { display: flex; flex-direction: column; }
.seq__cue--last .seq__btn { height: auto; padding-bottom: 0; }
.seq__note {
  margin-top: 22px;
  padding-bottom: clamp(24px, 2.4vw, 32px);
  font-size: clamp(1.35rem, 3.2cqi, 1.8rem);
}
.js .seq__note { clip-path: inset(-30% 100% -30% 0); transition: clip-path .35s var(--in-out); }
.js .seq.is-noted .seq__note { clip-path: inset(-30% -6% -30% -2%); transition: clip-path 1.1s cubic-bezier(.6, 0, .4, 1); }

/* before a cue is called (only with JS; without it the sheet simply shows complete) */
.js .seq__cue:not(.is-lit) .seq__fuse { transform: var(--off); }
.js .seq__cue:not(.is-lit) .seq__node { background: var(--paper); border-color: var(--ink-3); }
.js .seq__cue:not(.is-lit) .seq__q { color: var(--ink-3); }
.js .seq__cue:not(.is-lit) .seq__line { clip-path: inset(-20% -6% -20% -3%); }
.js .seq__cue:not(.is-lit) .seq__ink { clip-path: inset(-10% 102% -10% -2%); }
/* the cue being called is red; the ink wipe follows once the call moves on */
.js .seq__cue.is-lit:not(.is-past) .seq__fuse { background-position: var(--f-red); transition: transform var(--step) linear, background-position 0s; }
.js .seq__cue.is-lit:not(.is-past) .seq__ink { background-position: 100% 0; transition: clip-path .62s var(--out), background-position 0s; }
.js .seq__cue.is-lit .seq__node { transition: none; animation: seqNode .6s var(--out); }
.js .seq.is-resetting .seq__fuse { transition: transform .22s var(--in-out), background-position 0s; }
.js .seq.is-resetting .seq__line, .js .seq.is-resetting .seq__ink { transition: clip-path .34s var(--in-out); }
@keyframes seqNode { 0% { transform: scale(1.9); } 100% { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) {
  .seq__btn:hover .seq__word { transform: translateX(6px); }
}
/* engines that ignore paint-order on HTML text get a thin clean outline instead */
@supports not (paint-order: stroke) {
  .seq__line { color: transparent; -webkit-text-stroke-width: 1px; }
}

/* the call line (a caption under the plate) */
.seq__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "status desc";
  align-items: center;
  gap: 6px 18px;
  margin-top: calc(var(--c) + 14px);
}
.seq__status { grid-area: status; justify-self: start; color: var(--maroon); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seq__desc { grid-area: desc; min-height: 1.3em; font-family: var(--serif); font-style: italic; font-size: 1.22rem; line-height: 1.3; color: var(--ink-2); }
/* on a short phone, a tapped stage repeats its line right under itself */
.seq__echo { display: block; overflow: hidden; text-align: left; font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.3; color: var(--ink-2); }
.seq__echo > span { display: block; padding: 4px 0 2px; }

/* narrow: one cue per line, threaded on a vertical spine */
@container seq (max-width: 560px) {
  .seq__plate, .seq__foot { --c: 16px; }
  .seq__list { --fs: clamp(1.75rem, 9.6cqi, 2.5rem); grid-template-columns: minmax(0, 1fr); }
  .seq__btn { display: grid; grid-template-columns: 30px 42px minmax(0, 1fr); align-items: baseline; padding: 9px 0; }
  .seq__btn::after { inset: 4px -6px 2px 62px; }
  .seq__cue--last .seq__btn::after { bottom: -6px; }
  .seq__q { grid-column: 1; margin: 0; font-size: 1.25rem; text-align: right; }
  .seq__word { grid-column: 3; justify-self: start; margin: 0; }
  .seq__echo { grid-column: 3; grid-row: 2; }
  .seq__line { -webkit-text-stroke-width: 1.5px; }
  .seq__track { left: 48px; right: auto; top: calc(9px + var(--fs) * .52); width: 1px; height: 100%; }
  .seq__fuse { --off: scaleY(0); --f-dir: 180deg; --f-size: 100% 200%; --f-red: 0 100%; left: -.5px; top: 0; width: 2px; height: 100%; transform-origin: 50% 0; }
  .seq__node { left: -5px; top: -5px; }
  .seq__cue--last .seq__track { height: 0; }
  .seq__ring { left: -11%; top: -40%; width: 124%; height: 176%; }
  .seq__note { margin: 14px 0 0 72px; padding-bottom: 0; font-size: 1.5rem; }
  .seq__crops { inset: -14px 14px -10px 14px; }
  .seq__foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "desc"; margin-top: calc(var(--c) + 22px); }
  .seq__desc { min-height: 2.6em; }
}

/* ---------- Q13 Box office ---------- */
.boxoffice { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; margin-top: clamp(32px, 4vw, 56px); }
.ticket {
  --notch: 12px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  max-width: 460px;
  filter: drop-shadow(0 16px 18px rgba(17, 17, 17, .2));
}
/* The ticket in the hand (main.js): it swings in as it arrives, then turns toward the
   pointer with a sheen that follows it, and settles flat when the pointer leaves.
   The box that turns is .boxoffice on desktop and .ticket below that. */
.boxoffice, .ticket { transition: transform .9s var(--out), rotate 1.3s var(--out), translate 1.3s var(--out), scale 1.3s var(--out), --ta .5s ease; }
.boxoffice.is-tilting, .ticket.is-tilting { transition: transform .2s ease-out, rotate 1.3s var(--out), translate 1.3s var(--out), scale 1.3s var(--out), --ta .5s ease; }
@media (min-width: 901px) { .js .boxoffice.is-waiting { rotate: -4deg; translate: 0 48px; scale: .95; } }
@media (max-width: 900px) { .js .boxoffice.is-waiting > .ticket { rotate: -6deg; translate: 0 40px; scale: .94; } }
.ticket__main {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  color: #fff;
  background: var(--stock) var(--grain);
  border-radius: 4px 0 0 4px;
  -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000) top right / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000) bottom right / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000) top right / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000) bottom right / 100% 51% no-repeat;
}
.ticket__main { cursor: pointer; } /* the face tears the stub too (the stub itself is the button) */
.ticket__row { display: flex; justify-content: space-between; gap: 12px; color: rgba(255, 255, 255, .72); font-size: .66rem; }
.ticket__row--foot { margin-top: 16px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .4); }
.ticket__show { margin-top: 14px; font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -.04em; }
.ticket__sub { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: rgba(255, 255, 255, .82); }
.ticket__price { margin-top: 18px; font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: .95; letter-spacing: -.05em; color: #fff; }
.ticket__inc { margin-top: 2px; letter-spacing: .2em; }
.ticket__stub {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--maroon) var(--grain);
  color: #fff;
  border-left: 2px dashed rgba(255, 255, 255, .55);
  border-radius: 0 4px 4px 0;
  transition: transform .8s var(--out);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000) top left / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000) bottom left / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000) top left / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000) bottom left / 100% 51% no-repeat;
}
.ticket__main, .ticket__stub { background-image: radial-gradient(460px circle at var(--tx, 50%) var(--ty, 50%), rgba(255, 255, 255, calc(var(--ta) * 1)), transparent 70%); }
.ticket__stub span { writing-mode: vertical-rl; font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.ticket.is-torn .ticket__stub { transform: translate(26px, 0); opacity: .9; }
.terms dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.terms dl > div:last-child { border-bottom: 1px solid var(--rule); }
.terms dt { font-family: var(--mono); font-weight: 500; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); padding-top: .2em; }
.terms dd { font-size: 1.1rem; line-height: 1.45; }
.terms strong { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; color: var(--blue); }
/* Desktop: the whole box office is one big ticket. The face, the terms and Book a seat
   are printed on the blue stock, and the red stub is at the far right. The ticket
   wrapper steps aside (display: contents) so its face and stub sit either side of the
   terms. Tablets and phones keep the small ticket with the terms underneath. */
@media (min-width: 901px) {
  .boxoffice { --notch: 14px; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr) 76px; gap: 0; align-items: stretch; filter: drop-shadow(0 22px 26px rgba(17, 17, 17, .22)); }
  .boxoffice > .ticket { --notch: 14px; display: contents; }
  .boxoffice .ticket__main { grid-column: 1; grid-row: 1; padding: clamp(26px, 3vw, 44px); border-radius: 6px 0 0 6px; -webkit-mask: none; mask: none; }
  .boxoffice .ticket__row { font-size: .7rem; }
  .boxoffice .ticket__show { margin-top: 22px; font-size: clamp(2.1rem, 3vw, 2.8rem); }
  .boxoffice .ticket__sub { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
  .boxoffice .ticket__price { margin-top: auto; padding-top: 32px; font-size: clamp(3rem, 4.6vw, 4.6rem); }
  .boxoffice .ticket__row--foot { margin-top: 22px; padding-top: 14px; }
  .boxoffice .ticket__stub { grid-column: 3; grid-row: 1; border-radius: 0 6px 6px 0; }
  .boxoffice .ticket__stub span { font-size: .74rem; }
  .boxoffice > .terms {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 48px);
    color: #fff;
    background: var(--stock) var(--grain);
    -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000) top right / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000) bottom right / 100% 51% no-repeat;
            mask: radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000) top right / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000) bottom right / 100% 51% no-repeat;
  }
  /* a printed rule between the face and the terms */
  .boxoffice > .terms::before { content: ""; position: absolute; left: 0; top: clamp(26px, 3vw, 44px); bottom: clamp(26px, 3vw, 44px); border-left: 1px solid rgba(255, 255, 255, .22); }
  .boxoffice > .terms dl > div { grid-template-columns: clamp(104px, 10vw, 150px) minmax(0, 1fr); gap: 12px; padding: 11px 0; border-color: rgba(255, 255, 255, .18); }
  .boxoffice > .terms dl > div:first-child { border-top: 0; padding-top: 0; }
  .boxoffice > .terms dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .boxoffice > .terms dt { color: rgba(255, 255, 255, .66); }
  .boxoffice > .terms dd { font-size: 1rem; line-height: 1.4; }
  .boxoffice > .terms strong { font-size: 1.3rem; color: #fff; }
  .boxoffice > .terms .btn { align-self: flex-start; margin-top: clamp(22px, 2.4vw, 32px); background: #fff; color: var(--maroon); }
  .boxoffice > .terms .btn::before { background: var(--blue-light); }
  .boxoffice > .terms { background-image: radial-gradient(460px circle at var(--tx, 50%) var(--ty, 50%), rgba(255, 255, 255, calc(var(--ta) * 1)), transparent 70%); }
}
/* smaller desktops: a narrower face and stub, so the terms keep enough width to stay short */
@media (min-width: 901px) and (max-width: 1180px) {
  .boxoffice { grid-template-columns: minmax(228px, .62fr) minmax(0, 1.38fr) 58px; }
  .boxoffice .ticket__main { padding: 24px 22px; }
  .boxoffice .ticket__row { flex-wrap: wrap; row-gap: 4px; }
  .boxoffice .ticket__price { padding-top: 24px; font-size: 2.6rem; }
  .boxoffice .ticket__stub span { font-size: .66rem; }
  .boxoffice > .terms { padding: 22px 24px; }
  .boxoffice > .terms::before { top: 22px; bottom: 22px; }
  .boxoffice > .terms dl > div { grid-template-columns: 92px minmax(0, 1fr); padding: 8px 0; }
  .boxoffice > .terms dd { font-size: .95rem; line-height: 1.35; }
  .boxoffice > .terms strong { font-size: 1.2rem; }
  .boxoffice > .terms .btn { margin-top: 18px; padding: 15px 26px; }
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 18px 30px;
  background: var(--maroon);
  color: #fff;
  font-family: var(--mono);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s var(--out), color .3s;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--maroon-deep); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--out); }
@media (hover: hover) and (pointer: fine) { .btn:hover::before { transform: scaleX(1); transform-origin: left; } }
.btn:active { transform: scale(.97); }
.btn--light { background: #fff; color: var(--blue); margin-top: 22px; }
.btn--light::before { background: var(--blue-light); }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { color: var(--blue); } }
.btn--sm { padding: 13px 20px; margin-top: 0; font-size: .72rem; }

/* ---------- GO · Curtain call ---------- */
.go {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
}
.go__stage { position: absolute; inset: 0; }
.go__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.go__lit { filter: saturate(1.08) contrast(1.05); }
.go__stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle 170vmax at 50% 42%, rgba(232, 238, 250, .14), transparent 70%), linear-gradient(to top, rgba(11, 21, 48, .97) 0%, rgba(11, 21, 48, .9) 30%, rgba(11, 21, 48, .5) 52%, transparent 72%); pointer-events: none; }
.go__text { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding: calc(var(--bar-h) + 80px) var(--gutter) clamp(36px, 5vw, 60px); pointer-events: none; }
.go__text a { pointer-events: auto; }
.go__small { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.8rem); }
.go__big { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 10.5vw, 9rem); line-height: .92; letter-spacing: -.055em; }
.go__meta { margin-top: 22px; color: rgba(255, 255, 255, .7); line-height: 1.7; }

/* registration form: a sign-in sheet at the stage door */
.regform { pointer-events: auto; cursor: auto; margin-top: clamp(32px, 4vw, 52px); }
.regform__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.regform__head h3 { color: #fff; font-size: .74rem; }
.regform__req { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: rgba(255, 255, 255, .6); }
.regform__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); } /* two rows: five fields, then four and the button */
.field { display: flex; flex-direction: column; padding-top: 18px; }
.field__label { font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); transition: color .3s; }
.field__box { position: relative; display: block; margin-top: 4px; }
.field input, .field select {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .34);
  border-radius: 0;
  color: #fff;
  font-family: var(--body);
  font-size: 1.12rem;
  line-height: 1.3;
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus, .field input:focus-visible, .field select:focus, .field select:focus-visible { outline: none; }
/* the class list: same underline field, a drawn chevron, a dim prompt until a class is chosen */
.field select { padding-right: 30px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat; }
.field select:invalid { color: rgba(255, 255, 255, .55); }
.field select:disabled { cursor: not-allowed; opacity: .55; } /* city, until a state is chosen */
.field select option { background-color: var(--night); color: #fff; }
.field input::-webkit-date-and-time-value { text-align: left; }
.field input::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 600000s 0s, color 600000s 0s; }
.field__ink { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--out), background-color .3s; }
.field:focus-within .field__label { color: #fff; }
.field:focus-within .field__ink { transform: scaleX(1); }
.field__err { min-height: 1.5em; padding-top: 4px; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.3; color: var(--maroon-light); }
.field.is-invalid .field__label { color: var(--maroon-light); }
.field.is-invalid .field__ink { transform: scaleX(1); background: var(--maroon-light); }
.regform__send { display: flex; align-items: flex-start; padding-top: calc(18px + .66rem * 1.6 + 4px); }
.regform__send .btn { width: 100%; min-height: 48px; justify-content: center; margin-top: 0; padding-inline: 12px; white-space: nowrap; } /* one line in a single column */
.regform.is-sending .btn { cursor: progress; opacity: .75; }
.regform [hidden] { display: none; }
.regform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.regform__status:not(:empty) { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: #fff; }
.regform__status.is-bad { color: var(--maroon-light); }
.regform__done { padding: 26px 0 8px; }
.regform__thanks { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; outline: none; }
.regform__next { margin-top: 10px; font-size: 1.1rem; color: rgba(255, 255, 255, .78); }
.regform__again { margin-top: 22px; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .5); color: #fff; transition: border-color .3s; }
@media (hover: hover) and (pointer: fine) { .regform__again:hover { border-color: #fff; } }

/* ---------- Back cover ---------- */
.back { padding: clamp(60px, 8vw, 110px) var(--gutter) 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.back__logos { display: flex; align-items: center; gap: 18px; }
.back__logo { display: block; width: auto; }
.back__logo--jgu { height: 54px; }
.back__logo--sjpa { height: 50px; }
.back__title { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.035em; line-height: 1; }
.back__title span { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: 0; font-size: 1.3rem; color: var(--ink-2); }
.back__line { color: var(--ink-3); font-size: .74rem; }

/* ---------- Opening, as the client's mockup runs it (15 Oct 2026) ----------
   1 the curtain rises · 2 the house, in black and white · 3 the crest · 4 the bill.
   Sizes follow the 16:9 mockup in container units, so each scene scales with the screen. */
.opening { display: none; }
.is-intro body { overflow: hidden; }
.is-intro .opening {
  --pleat: clamp(44px, 4.6vw, 64px);
  display: block;
  position: fixed;
  inset: 0;
  z-index: 400;
  overflow: hidden;
  container-type: size;
  background: #0B0B0C;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.op-scene { position: absolute; inset: 0; overflow: hidden; }
.op-scene img { max-width: none; }
.opening [data-beat], .op-crest, .op-bill, .op-house img { opacity: 0; }

/* 1 · The curtain. Closed, it is plain CSS so it covers the page from the first paint;
   the SVG drape (drawn by main.js) takes over once it starts to rise. */
.opening__curtain { position: absolute; inset: 0; z-index: 2; }
.opening__panel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, #7E1712 0 16px, transparent 16px),
    repeating-linear-gradient(90deg, #C62B26 0 calc(var(--pleat) * .5), #B0241F calc(var(--pleat) * .5) var(--pleat));
}
.opening__drape { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 2 · The house */
.op-house__chalk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* 3 · The crest, on the cream of the company photograph */
.op-crest { display: flex; flex-direction: column; align-items: center; padding-top: max(5.6cqh, 18px); background: #F1E9DA; color: #9C1D21; }
.op-crest__logos { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3cqw, 48px); }
.op-crest__jgu { width: auto; height: min(21cqh, 15cqw); }
.op-crest__rule { align-self: stretch; width: 1px; margin: 3cqh 0; background: rgba(156, 29, 33, .3); }
.op-crest__sjpa { width: auto; height: min(10.5cqh, 7.6cqw); }
.op-crest__school {
  margin-top: clamp(12px, 4.6cqh, 60px);
  padding: 0 var(--gutter);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, min(6.6cqh, 4.1cqw), 4.2rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: balance;
}
.op-crest__company { margin-top: auto; width: min(90.3cqw, 56.4cqh * 2.844); height: auto; }

/* 4 · The bill, on the red */
.op-bill { display: flex; flex-direction: column; align-items: center; padding: max(9cqh, 72px) var(--gutter) 4cqh; background: #C62B26; text-align: center; }
.op-bill__chalk { position: absolute; left: 0; top: 15.3%; width: 100%; height: 88.4%; object-fit: cover; object-position: 50% 30%; opacity: .06; pointer-events: none; }
.op-bill__line { position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(1.55rem, min(8.4cqw, 7.4cqh), 4.6rem); line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.op-bill__line--days { font-size: clamp(1.25rem, min(6.6cqw, 5.9cqh), 3.7rem); }
.op-bill__line + .op-bill__line { margin-top: 1.8cqh; }
.op-bill__stage { position: relative; display: flex; justify-content: center; flex: 1 1 0; width: 100%; min-height: 0; margin-top: 3.2cqh; }
.op-bill__mark { width: auto; height: 100%; max-width: 100%; overflow: visible; }
.op-mark__project, .op-mark__num { font-family: Anton, "Arial Narrow", Impact, sans-serif; }
.op-mark__bar, .op-mark__project, .op-mark__num { transform-box: fill-box; transform-origin: 0 100%; }
.op-mark__project { font-size: 77px; fill: #111; }
.op-mark__num { font-size: 195px; fill: #fff; }
.op-bill__date, .op-bill__orgs { position: relative; font-family: var(--body); font-weight: 500; font-size: clamp(.86rem, 3.9cqw, 1.05rem); line-height: 1.35; }
.op-bill__date { margin-top: 3cqh; }
.op-bill__orgs { margin-top: .5em; }
.op-bill__date sup { font-size: .6em; line-height: 0; }
/* Landscape: the mockup's own layout, the dates and the two houses flanking the mark */
@media (min-aspect-ratio: 4/3) {
  .op-bill { padding: 5.3cqh var(--gutter) 3.6cqh; }
  .op-bill__line { font-size: min(7.4cqh, 4.15cqw); }
  .op-bill__line--days { font-size: min(5.9cqh, 3.3cqw); }
  .op-bill__line + .op-bill__line { margin-top: 2.6cqh; }
  .op-bill__date, .op-bill__orgs { position: absolute; bottom: 8.6cqh; margin: 0; font-size: min(3.3cqh, 1.65cqw); text-align: left; }
  .op-bill__date { left: 9.3cqw; }
  .op-bill__orgs { left: 64cqw; }
}
/* Phones held sideways: the crests start below the buttons and everything is a size smaller */
@media (orientation: landscape) and (max-height: 500px) {
  .op-crest { padding-top: 62px; }
  .op-crest__jgu { height: min(16cqh, 12cqw); }
  .op-crest__sjpa { height: min(8cqh, 6cqw); }
  .op-crest__school { margin-top: 10px; }
  .op-crest__company { width: min(90.3cqw, 50cqh * 2.844); }
}
/* Portrait phones: the crests stack and the company is framed closer */
@media (max-aspect-ratio: 4/5) {
  .op-crest { padding-top: max(10cqh, 72px); }
  .op-crest__logos { gap: 4.5cqw; }
  .op-crest__jgu { width: min(42cqw, 200px); height: auto; }
  .op-crest__rule { margin: 1.5cqh 0; }
  .op-crest__sjpa { width: min(37cqw, 176px); height: auto; }
  .op-crest__school { margin-top: 4.5cqh; font-size: clamp(1.45rem, 7.2cqw, 2.4rem); }
  .op-crest__company { width: 100%; height: min(42cqh, 118cqw); object-fit: cover; object-position: 50% 100%; }
}

/* Top right, all through the opening: book straight away, or skip to the page */
.opening__actions {
  position: absolute;
  z-index: 3;
  top: max(14px, env(safe-area-inset-top));
  right: var(--gutter);
  display: flex;
  gap: 8px;
}
.opening__book {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid #fff;
  background: #fff;
  color: #C62B26;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s, border-color .3s, color .3s, transform .2s var(--out);
}
.opening__book:focus-visible { border-color: var(--blue); background: var(--blue); color: #fff; }
@media (hover: hover) and (pointer: fine) { .opening__book:hover { border-color: var(--blue); background: var(--blue); color: #fff; } }
.opening__book:active { transform: scale(.96); }
.opening[data-on="crest"] .opening__book { border-color: #C62B26; background: #C62B26; color: #fff; }
.opening[data-on="crest"] .opening__book:focus-visible { border-color: var(--blue); background: var(--blue); }
@media (hover: hover) and (pointer: fine) { .opening[data-on="crest"] .opening__book:hover { border-color: var(--blue); background: var(--blue); } }
.opening__skip {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(10, 10, 12, .3);
  color: #fff;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background-color .3s, border-color .5s, color .5s;
}
.opening__skip span { transition: transform .4s var(--out); }
.opening__skip:focus-visible { background: rgba(10, 10, 12, .55); }
@media (hover: hover) and (pointer: fine) { .opening__skip:hover { background: rgba(10, 10, 12, .55); } }
@media (hover: hover) and (pointer: fine) { .opening__skip:hover span { transform: translateX(4px); } }
.opening[data-on="crest"] .opening__skip { border-color: rgba(156, 29, 33, .4); background: transparent; color: #9C1D21; }
@media (hover: hover) and (pointer: fine) { .opening[data-on="crest"] .opening__skip:hover { background: rgba(156, 29, 33, .08); } }
@media (max-width: 420px) {
  .opening__actions { gap: 6px; }
  .opening__book, .opening__skip { padding: 10px 11px; letter-spacing: .16em; }
  .opening__skip-word { display: none; }
}

/* ---------- Colour bands (theme from the artifact) ---------- */
.band { --bg: transparent; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
.band--blue { --bg: var(--blue); }
.band--red { --bg: var(--maroon); }
.band--light { --bg: var(--blue-light); }
.band--tint { --bg: var(--tint); }
.band, .band + .scene, .cta-band + .scene { border-top: 0; }

/* light type on blue / red */
.on-color { color: #fff; --ink: #fff; --ink-2: rgba(255, 255, 255, .78); --ink-3: rgba(255, 255, 255, .62); --rule: rgba(255, 255, 255, .24); --highlight: rgba(255, 255, 255, .2); }
.on-color .cue b { color: var(--maroon-light); }
.on-color .pencil--red { stroke: var(--maroon-light); }
.on-color .pencil--blue { stroke: rgba(255, 255, 255, .85); }
.on-color .hand--red, .on-color .float-note { color: var(--maroon-light); }
.on-color .hand--blue { color: rgba(255, 255, 255, .88); }
.on-color .title-page__school { color: rgba(255, 255, 255, .8); }
.on-color .call__clock b[data-unit="d"] { color: var(--maroon-light); }
.on-color .verbs span:last-child { color: var(--maroon-light); }
.on-color .ledger__cell.on::before { background: repeating-linear-gradient(45deg, #fff 0 1.2px, transparent 1.2px 4.5px); }
.on-color .ledger__cell.half::before { background: repeating-linear-gradient(45deg, #fff 0 1.2px, transparent 1.2px 4.5px) 0 0 / 50% 100% no-repeat; }
@media (hover: hover) and (pointer: fine) { .on-color .ledger__cell:hover { background: rgba(255, 255, 255, .12); } }
.on-color .ledger__cell.is-pin::after { border-color: var(--maroon-light); }
.on-color .key--on { background: repeating-linear-gradient(45deg, #fff 0 1.2px, transparent 1.2px 4px); }
.on-color .btn:not(.btn--light) { background: #fff; color: var(--maroon); }
.on-color .btn:not(.btn--light)::before { background: var(--blue-light); }
/* the booklet pages on the blue Promise band stay paper-white with dark type */
.on-color .spread__page { color: #111; --ink: #111111; --ink-2: #545454; --ink-3: #8C8C8C; --rule: rgba(17, 17, 17, .12); --highlight: rgba(14, 74, 139, .14); }
.band--light .title { color: var(--blue); }

/* call-to-action band */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--maroon); color: #fff; }
/* empty seats, printed in the band's red */
.cta-band__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: grayscale(1) contrast(1.15) brightness(.95); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--maroon); mix-blend-mode: multiply; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(122, 18, 14, .55), rgba(122, 18, 14, .1) 70%); }
.cta-band__in { position: relative; max-width: 1440px; margin: 0 auto; padding: clamp(56px, 7vw, 92px) var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
/* "Seven days. One stage." always on one line: it is 10.24em wide, so on narrow phones the
   type shrinks to fit the screen (10.6em leaves a little air) */
.cta-band__line { font-family: var(--display); font-weight: 800; font-size: min(clamp(2.2rem, 4.6vw, 4rem), calc((100vw - 2 * var(--gutter)) / 10.6)); line-height: 1.02; letter-spacing: -.035em; max-width: 18ch; }
.cta-band__line > span { white-space: nowrap; }
.cta-band__line em { display: block; font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; white-space: nowrap; } /* "Your seat." on a line of its own */
.cta-band .btn { margin-top: 0; }
.scene__cta { margin-top: clamp(32px, 4vw, 48px); }

/* footer in deep blue, logos on a white plate */
.back { background: var(--blue-deep); color: #fff; }
.back__plate { background: #fff; padding: 12px 18px; }
.back__title span { color: rgba(255, 255, 255, .78); }
.back__line { color: rgba(255, 255, 255, .6); }

/* ---------- Venue photographs ---------- */
/* spaces: a three-photo look inside the auditorium */
.venue { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 16 / 8; }
.venue figure { position: relative; overflow: hidden; min-height: 0; background: #2a1d14; }
.venue__big { grid-row: 1 / span 2; }
.venue img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
@media (hover: hover) and (pointer: fine) { .venue figure:hover img { transform: scale(1.045); } }
.js .venue figure { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--in-out); }
.js .venue figure:nth-child(2) { transition-delay: .15s; }
.js .venue figure:nth-child(3) { transition-delay: .3s; }
.js .scene.is-in .venue figure { clip-path: inset(0 0 0 0); }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(3) { border-left: 0; padding-left: 0; }
  .plan:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* the full menu needs about 1150px (the hour clock another 130); below that it folds into the index menu */
@media (max-width: 1320px) { .bar__clock { display: none; } }
@media (max-width: 1180px) {
  /* backdrop-filter would make the bar the containing block of the fixed menu */
  .bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  .bar__index { display: grid; margin-left: auto; }
  .bar__nav {
    position: fixed;
    inset: var(--bar-h) 0 0;
    z-index: 190;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 18px var(--gutter) 40px;
    background: var(--paper) var(--grain);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .7s var(--in-out), visibility 0s .7s;
  }
  .bar__nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--in-out); }
  .bar__nav a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    background: none;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    letter-spacing: -.035em;
    text-transform: none;
    line-height: 1.05;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .7s var(--out);
  }
  .bar__nav a::before { content: attr(data-cue); min-width: 2.6em; font-family: var(--hand); font-style: italic; font-weight: 400; font-size: .7em; color: var(--maroon); text-transform: none; }
  .bar__nav.is-open a { opacity: 1; transform: none; }
  .bar__nav.is-open a:nth-child(1) { transition-delay: .25s; }
  .bar__nav.is-open a:nth-child(2) { transition-delay: .3s; }
  .bar__nav.is-open a:nth-child(3) { transition-delay: .35s; }
  .bar__nav.is-open a:nth-child(4) { transition-delay: .4s; }
  .bar__nav.is-open a:nth-child(5) { transition-delay: .45s; }
  .bar__nav.is-open a:nth-child(6) { transition-delay: .5s; }
  .bar__nav.is-open a:nth-child(7) { transition-delay: .55s; }
}

@media (max-width: 1000px) {
  .week { grid-template-columns: 1fr; }
  .day button { min-height: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; padding: 18px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .day:first-child button { border-top: 0; }
  .day--show button { padding-inline: 14px; }
  .day button::before { inset: -40% -10% -40% -10%; background: radial-gradient(ellipse 50% 80% at 12% 50%, rgba(14, 74, 139, .26), rgba(14, 74, 139, .08) 50%, transparent 75%); }
  .day__n { grid-row: 1 / span 3; margin-top: 0; font-size: 4rem; }
  .day__date { grid-column: 2; }
  .day__title { grid-column: 2; margin-top: 4px; min-height: 0; }
  .day__text { grid-column: 2; margin-top: 6px; }
}

@media (max-width: 900px) {
  .scene { grid-template-columns: 1fr; }
  .scene__cue { position: static; margin-bottom: 22px; }
  .title-page__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
  .facts { display: contents; }
  .call { text-align: left; font-size: .66rem; letter-spacing: .14em; color: var(--ink-3); line-height: 1.5; }
  .call__clock { justify-content: flex-start; gap: 7px; margin-top: 2px; }
  .call__clock > span { gap: 1px; }
  .call__clock b { font-size: 1.05rem; }
  .call__clock small[data-short] { font-size: 0; letter-spacing: 0; }
  .call__clock small[data-short]::after { content: attr(data-short); font-size: .8rem; text-transform: lowercase; color: var(--ink-3); }
  .number, .master, .boxoffice, .spread, .contents { grid-template-columns: 1fr; }
  .day__text { min-height: 0; }
  .number__sum { justify-self: center; width: max-content; max-width: 100%; padding-left: 1.4rem; font-size: clamp(2.6rem, 11vw, 3.8rem); }
  .contents section { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
  .spread__page--left, .spread__page--right { border-radius: 3px; background-image: var(--grain); }
  .js .spread__page--left, .js .spread__page--right { transform: translateY(24px); }
  .spread { gap: 14px; }
  .credits { grid-template-columns: 1fr; }
  .master { grid-template-areas: "title" "photo" "how"; }
  .regform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the photo stays behind the headline and fades to solid night before the form,
     so every field sits on a plain dark ground */
  .go__stage { bottom: auto; height: min(88svh, 720px); }
  .go__stage::after { background: linear-gradient(to bottom, rgba(7, 30, 61, .62) 0%, rgba(7, 30, 61, .74) 50%, var(--night) 100%); }
  .go__small, .go__big { text-shadow: 0 2px 18px rgba(7, 30, 61, .6); }
  .go__meta { color: rgba(255, 255, 255, .82); }
  .master > .master__photo { max-width: 460px; margin-top: clamp(24px, 3vw, 40px); }
  .ticket { justify-self: center; }
}

@media (max-width: 600px) {
  .venue { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; aspect-ratio: auto; }
  .venue__big { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .venue figure:not(.venue__big) { aspect-ratio: 1 / 1; }
  .bar__book { display: none; }
  /* after the last open-call question: a full-width way on to the form */
  .tally .tally__cta { display: flex; justify-content: center; width: 100%; min-height: 52px; margin-top: 24px; }
  .dock {
    --stub: 104px;
    position: fixed;
    left: 12px;
    right: 12px;
    /* lifted clear of the strip where Safari's collapsed toolbar lives: a tap there only brings the toolbar back */
    bottom: calc(28px + env(safe-area-inset-bottom));
    z-index: 210; /* above the open menu, below blackouts and the curtain */
    display: block;
    color: #fff;
    text-decoration: none;
    filter: drop-shadow(0 12px 18px rgba(17, 17, 17, .35));
    transition: transform .6s var(--out), opacity .4s;
  }
  .dock.is-away { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
  html:not(.js) .dock.is-away { transform: none; opacity: 1; pointer-events: auto; } /* without script it simply stays */
  .dock__ticket {
    display: flex;
    min-height: 56px;
    background: var(--maroon);
    /* the notches where the stub tears off */
    -webkit-mask: radial-gradient(circle 7px at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle 7px at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  }
  .dock__main { flex: 1; display: flex; align-items: center; gap: 12px; padding: 9px 18px; font-family: var(--mono); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
  .dock__label { display: flex; flex-direction: column; gap: 4px; line-height: 1.1; }
  .dock__label small { font-weight: 500; font-size: .68rem; letter-spacing: .12em; color: rgba(255, 255, 255, .85); }
  /* small print stays legible on phones (about 11px) */
  .mono, .facts dt, .call__label, .call__clock small, .field__label, .ledger__day { font-size: .7rem; }
  .dock__main::after { content: "→"; margin-left: auto; font-family: var(--body); font-size: 1.1rem; letter-spacing: 0; transition: transform .4s var(--out); }
  .dock:active .dock__main::after { transform: translateX(5px); }
  .dock__stub { display: flex; align-items: center; justify-content: center; width: var(--stub); border-left: 1.5px dashed rgba(255, 255, 255, .55); background: var(--maroon-deep); font-family: var(--serif); font-style: italic; font-size: 1.1rem; white-space: nowrap; }
  .title-page__school { font-size: clamp(.58rem, 2.6vw, .8rem); letter-spacing: .07em; }
  .title-page__title { --lock: min(46vw, 220px); }
  .title-page__mark { padding: .7em calc(.85em - .07em) .66em .85em; }
  :root { --bar-h: 62px; }
  .bar__brand { gap: 12px; }
  .bar__logo--jgu { height: 34px; }
  .bar__logo--sjpa { height: 31px; }
  .bar__rule { height: 28px; }
  .callsheet button { grid-template-columns: 26px 30px minmax(0, 1fr); }
  .process button { grid-template-columns: 30px minmax(0, 1fr); }
  .process__text { grid-column: 2; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan, .plan:first-child, .plan:nth-child(3) { padding: 16px 10px 18px; border-left: 0; }
  .plan:nth-child(even) { border-left: 1px solid var(--rule); }
  .plan:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .plan figcaption { font-size: 1rem; }
  .spaces__aims { grid-template-columns: 1fr; }
  .spaces__aims li { border-left: 0; padding: 14px 0 16px; }
  .spaces__aims li + li { border-top: 1px solid var(--rule); }
  .ledger__grid { grid-template-columns: 34px repeat(24, minmax(0, 1fr)); }
  .ledger__axis { margin-left: 34px; }
  .terms dl > div { grid-template-columns: 1fr; gap: 4px; }
  .credits em { width: 3.6em; }
  .formats { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .regform__grid { grid-template-columns: 1fr; }
  .regform__send { padding-top: 22px; }
  .field { padding-top: 14px; }
  .field__err { min-height: 0; padding-top: 0; }
  .field__err:not(:empty) { padding-top: 4px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .pencil path, .js .plan .ln { stroke-dashoffset: 0 !important; }
  .js .plan .ln--dash, .js .plan .ln--seats, .js .plan .fill-hatch { opacity: 1 !important; }
  .js .title-page__school, .js .title-page__project, .js .title-page__num, .js .title-page__tag, .js .facts > div, .js .call, .js .scene .title, .js .crescendo button, .js .prog__about, .js .master__photo, .js .spread__page { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .venue figure, .js .plate__img, .js .showcase__frame { clip-path: none !important; }
  .js .plate__img img { transform: none !important; }
  .js .crescendo, .js .crescendo li { background-size: 100% 1px !important; }
}

@media print {
  .bar, .blackout, .go__stage { display: none !important; }
  .go { min-height: 0; background: none; color: var(--ink); }
}