/* Every value comes from assets/tokens.css (the design system). One page-only colour remains: */
    :root {
      --teal-mist: #BFE0DC;  /* pastel teal ground (FAQ), kept as built (design system) */
    }

    /* Type styles. The old copy names map onto the rulebook: xl and l → Lead, m → Body, s and xs → Small */
    .t-h4 { font: 400 var(--h4-size)/var(--h4-line) var(--serif); letter-spacing: -0.01em; }
    .t-h5 { font: 600 var(--h5-size)/var(--h5-line) var(--sans); }
    .t-h6 { font: 600 var(--h6-size)/var(--h6-line) var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
    .t-xl, .t-l { font-size: var(--lead-size); line-height: var(--lead-line); font-weight: 400; }
    .t-m  { font-size: var(--body-size);  line-height: var(--body-line);  font-weight: 500; }
    .t-s, .t-xs { font-size: var(--small-size); line-height: var(--small-line); font-weight: 500; }
    /* Regular reading copy is Instrument Sans Medium everywhere it appears */
    .teach .copy p:not(.pull):not(.lead), .teach .ask, .faq__a p, .faq__ask { font-weight: 500; }
    /* The eyebrow: H6 with a 32px hairline before it. Gold on dark grounds, Gold ink on light ones (the same rule as
       assets/dance.css): the light FAQ sets it */
    .eyebrow { display: flex; align-items: center; gap: var(--space-16); }
    .eyebrow::before { content: ""; width: var(--space-32); height: 1px; background: var(--eyebrow-rule, var(--gold)); flex: none; }
    .faq { --eyebrow-rule: var(--gold-ink); }
    * { box-sizing: border-box; }
    html, body { margin: 0; }
    body {
      background: var(--house); color: var(--ivory);
      font-family: var(--sans); font-size: 15px; line-height: 20px;
      -webkit-font-smoothing: antialiased; overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    picture { display: contents; }   /* Astro's photos come wrapped in <picture>: it must not change the layout around the <img> (as in dance.css) */
    /* The focus ring: 2px Ivory inside, 2px House outside, on any background. Fields use their own line instead */
    :focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
    h1, h2, p { margin: 0; }

    /* ---------- Hero: a full-screen looping film. It scrolls away like any section. ---------- */
    .hero { position: relative; height: 100vh; height: 100svh; min-height: 760px; overflow: hidden; }
    .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    /* One small pocket of shadow where the words sit. The rest of the frame stays clean. */
    .pocket {
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 50% 60% at 0% 100%, var(--veil-55) 0%, transparent 100%),
        linear-gradient(to top, var(--veil-75) 0%, var(--veil-20) 28%, transparent 52%),
        linear-gradient(to bottom, var(--veil-40) 0%, transparent 18%);
    }

    /* Top bar, band, menu and footer: assets/shell.css. Here only what the homepage does differently */
    .top { z-index: 5; }   /* under the film's play button */
    :root { --band: 72px; }   /* the band has no breadcrumb strip on the homepage */

    /* Lower third: tagline on the left, the dance now on stage on the right, sharing one baseline. The headline sits
       bottom left on every page of the site (flipped 28 Sep) */
    .lower {
      position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--hero-bottom); z-index: 4;
      display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; gap: var(--space-40);
    }

    /* Right: the dance now on stage, set to the right edge */
    .now { flex: 0 1 auto; min-width: 0; text-align: right; }
    .now .label, .now .cuts { justify-content: flex-end; }
    .now.is-empty .label, .now.is-empty .cuts, .now.is-empty .name { opacity: 0; }
    /* Gold eyebrow label, shared by "Now on stage" and the tagline eyebrow */
    .label {
      display: flex; align-items: center; gap: var(--space-16);
      font: 600 var(--h6-size)/var(--h6-line) var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ivory); text-shadow: 0 1px 12px var(--veil-85), 0 0 2px var(--veil-55);
      margin-bottom: var(--space-8);
      transition: opacity var(--t-short) var(--ease-standard);
    }
    .label .rule { width: var(--space-32); height: 1px; background: var(--gold); flex: 0 0 auto; }
    .now .name {
      font: italic 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em;
      color: var(--ivory); text-shadow: 0 2px 40px var(--veil-55);
      opacity: 0.85;
      transition: opacity var(--t-short) var(--ease-standard), transform var(--t-short) var(--ease-glide);
    }
    .now .name.is-out { opacity: 0; transform: translateY(12px); }

    /* The clip tracker, between the label and the dance name */
    .cuts {
      display: flex; gap: var(--space-8); margin-bottom: var(--space-16);
      transition: opacity var(--t-short) var(--ease-standard);
    }
    .cuts span { width: 32px; height: 2px; background: var(--ivory-40); display: block; transition: background var(--t-short) var(--ease-standard); }
    .cuts span.is-on { background: var(--gold); }

    /* Left: the tagline. No panel; a soft shadow in the corner keeps it readable over the film. */
    .tagline { flex: 0 0 auto; width: 660px; padding-bottom: var(--space-8); }   /* 660: the hero headline column (two lines). Not a rulebook width yet */
    .tagline__eyebrow { margin-bottom: var(--space-20); }
    .tagline__head {
      font: 400 var(--h1-size)/var(--h1-line) var(--serif); letter-spacing: -0.02em;
      color: var(--ivory); text-shadow: 0 2px 32px var(--veil-55);
    }
    .tagline__head em { font-style: italic; color: var(--gold); }
    .tagline__body {
      margin-top: var(--space-20); max-width: var(--w-hero-line);
      font-size: var(--lead-size); line-height: var(--lead-line); color: var(--ivory-92);
      text-shadow: 0 1px 16px var(--veil-75);
    }
    /* Arrival: rises in with the first dance — eyebrow, then headline, then paragraph */
    .tagline__eyebrow, .tagline__head, .tagline__body {
      opacity: 0; transform: translateY(16px);
      transition: opacity var(--t-long) var(--ease-standard), transform var(--t-long) var(--ease-glide);
    }
    .tagline__head { transition-delay: 120ms; }
    .tagline__body { transition-delay: 240ms; }
    .hero.is-started .tagline__eyebrow, .hero.is-started .tagline__head, .hero.is-started .tagline__body { opacity: 1; transform: none; }

    /* Scroll cue: a thin line with a gold light gliding down it */
    .cue {
      position: absolute; left: 50%; bottom: var(--space-16); z-index: 5;
      transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
      min-width: 64px; min-height: var(--target); padding: var(--space-4) var(--space-8);
      color: var(--ivory-85);
      font: 600 12px/16px var(--sans); letter-spacing: 0.2em; text-transform: uppercase;
      text-shadow: 0 1px 10px var(--veil-85);
      transition: color var(--t-quick) var(--ease-standard);
    }
    .cue:hover, .cue:focus-visible { color: var(--gold); }
    .cue__label { padding-left: 0.2em; }
    .cue__line {
      position: relative; display: block; width: 1px; height: 32px; overflow: hidden;
      background: var(--ivory-40);
    }
    .cue__line::after {
      content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px;
      background: var(--gold);
      animation: cue-drop var(--t-ambient) var(--ease-steady) infinite;
    }
    @keyframes cue-drop {
      from { transform: translateY(-14px); }
      to   { transform: translateY(32px); }
    }

    /* If autoplay is refused, a way in */
    .play {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 6;
      display: none; align-items: center; justify-content: center;
      width: 96px; height: 96px; border-radius: 50%;
      background: var(--veil-55); border: 1px solid var(--line-on-dark); color: var(--ivory);
      font: 600 12px/16px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
    }
    .play.is-shown { display: inline-flex; }
    .play:hover { border-color: var(--gold); color: var(--gold); }

    body.watch-open { overflow: hidden; }

    /* ---------- Section: Registration is open (18 Oct 2026). A short band: the words left, ghungroo bells in grayscale
       filling the right and fading into the dark behind them ---------- */
    .enroll { position: relative; overflow: hidden; background: var(--sindoor); color: var(--ivory); padding: var(--space-96) var(--gutter); }
    .enroll__pic { position: absolute; top: 0; right: 0; bottom: 0; width: 64%;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
    .enroll__pic img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
    .enroll__pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--sindoor) 0%, transparent 70%); }   /* fades into the ground, not a black veil */
    .enroll__in { position: relative; }   /* starts at the page margin, like every homepage section */
    .enroll__txt { max-width: var(--w-narrow); }
    .enroll h2 { font: 400 var(--h3-size)/var(--h3-line) var(--serif); letter-spacing: -0.015em; }
    .enroll h2 em { color: var(--gold); }
    .enroll__line { margin-top: var(--heading-gap); color: var(--ivory-92); }
    /* The studios: serif italic with small gold dots between, as in the footer */
    .enroll__studios { margin-top: var(--space-24); font: italic 400 var(--h4-size)/var(--h4-line) var(--serif); letter-spacing: -0.01em; }
    .enroll__studios span { display: inline-block; }
    .enroll__studios span:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 0 var(--space-16); vertical-align: middle; }
    .enroll__acts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-32); margin-top: var(--space-40); }
    .enroll__cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: var(--r-pill); background: var(--gold); color: var(--house); font: 600 var(--h6-size)/var(--h6-line) var(--sans); letter-spacing: 0.14em; text-transform: uppercase; transition: background var(--t-quick) var(--ease-standard); }   /* the pill button */
    .enroll__cta:hover { background: var(--ivory); }
    .enroll__link { display: inline-flex; align-items: center; min-height: var(--target); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .enroll__link:hover { text-decoration-thickness: 2px; }
    @media (max-width: 767px) {
      .enroll { padding: 0 0 var(--space-64); }
      .enroll__pic { position: relative; width: 100%; height: 260px;
        -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 40%); mask-image: linear-gradient(0deg, transparent 0%, #000 40%); }
      .enroll__pic::after { background: linear-gradient(0deg, var(--sindoor) 0%, transparent 60%); }
      .enroll__in { padding: 0 var(--gutter); margin-top: calc(var(--space-40) * -1); }
    }

    /* ---------- Section: We teach ---------- */
    .teach {
      background: var(--ivory); color: var(--house);
      font-size: var(--body-size); line-height: var(--body-line);
      padding: min(var(--section-pad), var(--space-120)) 0;   /* 120 on desktop (shorter than the usual 160); tablet and phone as usual */
      overflow: hidden;
    }
    .teach__text {
      padding: 0 var(--gutter);
      display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-24); row-gap: var(--space-96);
    }
    .teach h2 {
      grid-column: 1 / span 5;   /* beside the copy on desktop, not above it, to keep the section short */
      font: 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em;
      text-wrap: balance;
    }
    .teach h2 em { color: var(--gold-ink); }
    .teach .copy { grid-column: 7 / span 6; max-width: var(--w-narrow); }
    .teach .copy p + p { margin-top: var(--space-24); }
    .teach .lead { font-size: var(--lead-size); line-height: var(--lead-line); }
    .teach a { color: var(--gold-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .teach a:hover { text-decoration-thickness: 2px; }
    .teach .ask { grid-column: 7 / span 6; max-width: var(--w-narrow); margin-top: calc(-1 * var(--space-56)); color: var(--soft); border-top: 1px solid var(--line-on-light); padding-top: var(--space-24); }

    /* Fade-and-rise for anything below the hero, staggered with --d */
    .rise { opacity: 0; transform: translateY(24px); transition: opacity var(--t-long) var(--ease-standard) var(--d, 0ms), transform var(--t-long) var(--ease-standard) var(--d, 0ms); }
    .rise.is-in { opacity: 1; transform: none; }

    /* The paragraph performs: opening sentence as a pull-quote, closing line in gold italic */
    .teach .pull { font: italic 400 var(--h4-size)/var(--h4-line) var(--serif); letter-spacing: -0.01em; text-wrap: pretty; }   /* H4, not H3: the headline beside it is the one big moment (21 Oct 2026) */
    .teach .copy .pull + p { margin-top: var(--space-40); }
    .teach .copy em { font: italic 400 1.12em/1 var(--serif); color: var(--gold-ink); }

    /* The roll call: every form we teach as one flowing line (from the dance list), a gold spotlight walking through */
    .roll { padding: 0 var(--gutter); margin-top: var(--content-gap); }
    .roll__names { font: italic 400 var(--h4-size)/calc(var(--h4-line) + var(--space-12)) var(--serif); letter-spacing: -0.01em; color: var(--soft); text-wrap: pretty; }
    .roll__names span { display: inline-block; opacity: 0; transform: translateY(12px); transition: opacity var(--t-long) var(--ease-standard) var(--d, 0ms), transform var(--t-long) var(--ease-standard) var(--d, 0ms), color var(--t-short) var(--ease-standard); }
    .roll.is-in .roll__names span { opacity: 1; transform: none; }
    .roll__names span:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-ink); opacity: 0.55; margin: 0 var(--space-20); vertical-align: middle; }
    .roll__names span.is-lit, .roll__names span:hover { color: var(--gold-ink); }
    .roll__link { display: inline-flex; align-items: center; min-height: var(--target); margin-top: var(--space-40); font: 600 var(--h6-size)/var(--h6-line) var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .roll__link:hover { text-decoration-thickness: 2px; }

    /* Addresses: only the address is a link, to Google Maps in a new tab. Underlined; on hover the underline
       thickens. Used by every show on the page. */
    .map-link { display: inline-flex; align-items: center; min-height: var(--target); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .map-link:hover { text-decoration-thickness: 2px; }

    /* ---------- Section: Booker T. Washington performance ----------
       The film arrives as three offset panels (stage flats) that slide into one full-screen picture as you scroll,
       then the caption rises in. The film is drawn into a canvas; the video element itself stays hidden. */
    .booker { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ash); }
    .bt__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    .bt__src { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
    .bt__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--veil-85) 0%, var(--veil-55) 36%, transparent 64%); }
    .bt__caption { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--space-80); max-width: var(--w-content); color: var(--ivory); }
    .bt__eyebrow { color: var(--gold); margin-bottom: var(--space-20); }
    .bt__head { font: 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em; text-wrap: balance; text-shadow: 0 2px 32px var(--veil-55); }
    .bt__head em { font-style: italic; color: var(--gold); }
    .bt__watch {
      display: inline-flex; align-items: center; gap: var(--space-16); margin-top: var(--space-40);
      min-height: 56px; padding: 0 28px 0 var(--space-8); border-radius: var(--r-pill);   /* 28px: the pill's side, per the rulebook */
      border: 1px solid var(--line-on-dark); background: var(--veil-40); color: var(--ivory); cursor: pointer;
      font: 600 var(--h6-size)/var(--h6-line) var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
      transition: border-color var(--t-quick) var(--ease-standard), color var(--t-quick) var(--ease-standard);
    }
    .bt__watch:hover { border-color: var(--gold); color: var(--gold); }
    .bt__play { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); }
    .bt__play::after { content: ""; position: absolute; left: 16px; top: 13px; border-left: 11px solid var(--house); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

    /* The full performance: YouTube in a dark full-screen overlay, loaded only when opened */
    .watch { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--space-96) var(--gutter) var(--space-40); border: 0; background: transparent; color: var(--ivory); }
    .watch[open] { display: flex; align-items: center; justify-content: center; }
    .watch::backdrop { background: var(--veil-85); }
    .watch__close { position: absolute; top: var(--space-32); right: var(--gutter); }
    .watch__frame { width: 100%; max-width: var(--w-wide); aspect-ratio: 16 / 9; max-height: 100%; }
    .watch__frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--r-photo); }

    @media (max-width: 767px) {
      .bt__caption { bottom: var(--space-40); }
      .bt__watch { margin-top: var(--space-24); }
    }


    /* ---------- Section: FAQ. Pastel teal ground, everything on it in the dark ink ---------- */
    .faq {
      position: relative; overflow: hidden;
      background: var(--teal-mist); color: var(--house);
      font-size: var(--body-size); line-height: var(--body-line);
      padding: var(--section-pad) 0;
    }
    /* One oversized rangoli, fine lines a shade darker than the ground, anchored top-left and running off the edge.
       Pinned to the top of the section, so it never moves when an answer opens. */
    .faq__rangoli {
      position: absolute; left: -360px; top: -360px; width: 1000px; height: 1000px;
      color: var(--peacock); opacity: 0.2; pointer-events: none;
    }
    @media (max-width: 767px) {
      .faq__rangoli { left: -240px; top: -240px; width: 620px; height: 620px; }
    }
    .faq__grid {
      position: relative; padding: 0 var(--gutter);
      display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-24); align-items: start;
    }
    .faq__side { grid-column: 1 / span 4; position: sticky; top: var(--space-120); }
    .faq__side h2 { margin-top: var(--space-20); font: 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
    .faq__side .t-xl { margin-top: var(--heading-gap); }
    .faq__ask { margin-top: var(--space-32); padding-top: var(--space-24); border-top: 1px solid var(--veil-20); }
    .faq a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .faq a:hover { text-decoration-thickness: 2px; }
    .faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--veil-20); }
    .faq__item { border-bottom: 1px solid var(--veil-20); }
    .faq__item h3 { margin: 0; }
    .faq__q {
      width: 100%; min-height: 88px; padding: var(--space-24) 0; gap: var(--space-24);
      display: flex; align-items: center; justify-content: space-between;
      background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
      font: 600 var(--h5-size)/var(--h5-line) var(--sans);
    }
    /* Round plus that turns into a minus */
    .faq__icon {
      flex: 0 0 auto; position: relative; width: var(--target); height: var(--target); border-radius: 50%;
      border: 1.5px solid var(--house);
      transition: background var(--t-short) var(--ease-standard), color var(--t-short) var(--ease-standard), transform var(--t-medium) var(--ease-glide);
    }
    .faq__icon::before, .faq__icon::after {
      content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px;
      background: currentColor; transition: transform var(--t-medium) var(--ease-glide);
    }
    .faq__icon::after { transform: rotate(90deg); }
    .faq__q:hover .faq__icon { background: var(--veil-20); }
    .faq__item.is-open .faq__icon { background: var(--house); color: var(--teal-mist); transform: rotate(180deg); }
    .faq__item.is-open .faq__icon::after { transform: rotate(0deg); }
    .faq__a {
      display: grid; grid-template-rows: 0fr; visibility: hidden;
      transition: grid-template-rows var(--t-medium) var(--ease-glide), visibility 0s var(--t-medium);
    }
    .faq__item.is-open .faq__a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
    .faq__a > div { overflow: hidden; }
    .faq__a p {
      max-width: var(--w-reading); padding: 0 var(--space-64) var(--space-32) 0;
      opacity: 0; transform: translateY(-8px); transition: opacity var(--t-medium) var(--ease-standard) 100ms, transform var(--t-medium) var(--ease-standard) 100ms;
    }
    .faq__item.is-open .faq__a p { opacity: 1; transform: none; }
    @media (max-width: 1199px) {
      .faq__side { grid-column: 1 / span 12; position: static; max-width: var(--w-reading); }
      .faq__list { grid-column: 1 / span 12; margin-top: var(--space-64); }
    }
    @media (max-width: 767px) {
      .faq__q { min-height: 72px; padding: var(--space-20) 0; gap: var(--space-16); }
      .faq__a p { padding-right: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .faq__icon, .faq__icon::before, .faq__icon::after, .faq__a, .faq__a p { transition: none; }
    }

    /* ---------- Section: Upcoming Shows ----------
       Deep kumkum maroon. Every show comes from the Google Sheet (see the script): up to five, earliest first.
       A timeline runs down the left: past shows sit on it as solid dots and are marked "Performed", upcoming
       shows are open rings, the next one is gold, and a gold "Today" marker sits between past and upcoming,
       moving on its own as dates pass. The line draws itself down once as the section arrives. */
    .bill { background: var(--sindoor); color: var(--ivory); padding: var(--section-pad) 0; }
    .bill__grid { padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-24); align-items: start; }
    .bill__side { grid-column: 1 / span 4; position: sticky; top: var(--space-120); }
    .bill__side h2 { margin-top: var(--space-20); font: 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em; }
    .bill__side .t-xl { margin-top: var(--heading-gap); }   /* same rhythm as the FAQ's label, headline and intro */
    .bill__side h2 em { color: var(--gold); }
    .bill__list { grid-column: 6 / span 7; position: relative; margin: 0; padding: 0; list-style: none; }
    /* The line */
    .bill__list::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--ivory-40); transform-origin: top; }
    .bill.is-armed .bill__list::before { transform: scaleY(0); }
    .bill.is-armed.is-in .bill__list::before { transform: none; transition: transform var(--t-ambient) var(--ease-sway); }
    /* A show: the date on the left, the details beside it. The dot sits on the line, level with the date. */
    .bill__show {
      --pad: var(--space-40); --day-size: var(--h2-size); --day-line: var(--h2-line);
      position: relative; margin-left: var(--space-48); padding: var(--pad) 0;
      display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--space-32);
      border-top: 1px solid var(--ivory-40);
    }
    .bill__list > li:first-child, .bill__today + .bill__show { border-top: 0; }
    .bill__show::before {
      content: ""; position: absolute; left: calc(-1 * var(--space-48)); top: calc(var(--pad) + var(--day-line) / 2 - 7px);
      width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ivory); background: var(--sindoor);
    }
    .bill__show.is-past::before { background: var(--ivory); }
    .bill__show.is-next::before { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 6px rgba(217,184,114,0.25); }
    .bill__date { display: flex; flex-direction: column; }
    .bill__day { font: 400 var(--day-size)/var(--day-line) var(--serif); letter-spacing: -0.02em; }
    .bill__month { margin-top: var(--space-8); color: var(--gold); }
    .bill__info { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-8); }
    .bill__tag { color: var(--gold); margin-bottom: var(--space-4); }
    .bill__name { margin: 0 0 var(--space-8); font: 400 var(--h3-size)/var(--h3-line) var(--serif); letter-spacing: -0.015em; }
    .bill__show.is-past .bill__name { font-style: italic; }
    .bill__show.is-past .bill__tag { color: var(--ivory); }
    .bill__when { color: var(--ivory-85); }
    /* Today: a short gold stroke across the line, labelled with the date */
    .bill__today { position: relative; margin-left: var(--space-48); padding: var(--space-20) 0; color: var(--gold); }
    .bill__today::before { content: ""; position: absolute; left: calc(-1 * var(--space-48)); top: 50%; width: 36px; height: 2px; margin-top: -1px; background: var(--gold); }
    .bill__empty { margin-left: var(--space-48); padding: var(--space-8) 0; }
    /* Arrival: after the line starts drawing, the shows rise in one after another */
    .bill.is-armed .bill__list > li { opacity: 0; transform: translateY(24px); }
    .bill.is-armed.is-in .bill__list > li { opacity: 1; transform: none; transition: opacity var(--t-long) var(--ease-standard) var(--d, 0ms), transform var(--t-long) var(--ease-standard) var(--d, 0ms); }
    @media (max-width: 1199px) {
      .bill__side { grid-column: 1 / span 12; position: static; }
      .bill__list { grid-column: 1 / span 12; margin-top: var(--space-64); }
    }
    @media (max-width: 767px) {
      .bill__show { --pad: var(--space-32); --day-size: var(--h3-size); --day-line: var(--h3-line); margin-left: var(--space-40); grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-16); }
      .bill__show::before { left: calc(-1 * var(--space-40)); }
      .bill__today, .bill__empty { margin-left: var(--space-40); }
      .bill__today::before { left: calc(-1 * var(--space-40)); width: 32px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .bill.is-armed .bill__list::before, .bill.is-armed .bill__list > li { transform: none; opacity: 1; transition: none; }
    }

    /* ---------- Tablet & phone ---------- */
    @media (max-width: 1199px) {
      .tagline { width: 440px; }
      .teach h2 { grid-column: 1 / span 12; }
      .teach .copy, .teach .ask { grid-column: 3 / span 10; }    }
    @media (max-width: 767px) {
      :root { --gutter: 20px; }
      .top { padding: var(--space-20) var(--gutter); }
      .cue { display: none; }   /* the hero words run full width and would touch it; as on every page */
      .pocket { background: linear-gradient(to top, var(--veil-85) 0%, var(--veil-40) 36%, transparent 60%), linear-gradient(to bottom, var(--veil-40) 0%, transparent 20%); }
      /* Phones: tagline on top, the dance below it */
      .lower { flex-direction: column-reverse; align-items: stretch; gap: var(--space-32); }
      .now { text-align: left; }
      .now .label, .now .cuts { justify-content: flex-start; }
      .tagline__eyebrow { margin-bottom: var(--space-12); }
      .cuts { margin-bottom: var(--space-12); }
      .cuts span { width: 24px; }
      .tagline { width: auto; padding-bottom: 0; }
      .teach__text { display: block; }
      .teach .copy, .teach .ask { max-width: none; margin-top: var(--space-40); }
      .roll { margin-top: var(--space-80); }
      .roll__names span:not(:last-child)::after { margin: 0 var(--space-16); }
    }
    @media (prefers-reduced-motion: reduce) {
      .now .label, .now .name, .cuts, .tagline__eyebrow, .tagline__head, .tagline__body { transition: none; }
      .cue__line::after { animation: none; transform: translateY(9px); }
      .rise { opacity: 1; transform: none; transition: none; }
      .roll__names span { opacity: 1; transform: none; transition: none; }    }

    /* ---------- Moving between pages: the page being left fades down into the dark, the next rises in from it.
       The same rule as assets/dance.css ---------- */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: var(--t-short) var(--ease-standard) both page-out; }
    ::view-transition-new(root) { animation: var(--t-medium) var(--ease-glide) 120ms both page-in; }
    @keyframes page-out { to { opacity: 0; } }
    @keyframes page-in { from { opacity: 0; transform: translateY(16px); } }
    @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }