/* ==========================================================================
   NSDA — the shared stylesheet for the dance pages and the main pages. A page carries only its own words and
   photos; the hero parts, set pieces, Taught at NSDA, performance and Explore are styled here, and the top bar,
   band, menu and footer in shell.css (built by dance.js). Every value comes from tokens.css, the design system.
   ========================================================================== */
@import url("tokens.css");
@import url("shell.css");

:root {
  /* Old copy names, kept so the option and review pages still work: text-l → Lead, text-m → Body, text-s → Small */
  --text-l-size: var(--lead-size); --text-l-line: var(--lead-line);
  --text-m-size: var(--body-size); --text-m-line: var(--body-line);
  --text-s-size: var(--small-size); --text-s-line: var(--small-line);
}
.t-h2 { font: 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em; }
.t-h3 { font: 400 var(--h3-size)/var(--h3-line) var(--serif); letter-spacing: -0.015em; }
.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-h2 em, .t-h3 em, .t-h4 em { font-style: italic; }
.t-h6 { font: 600 var(--h6-size)/var(--h6-line) var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.t-l, .t-xl { font-size: var(--lead-size); line-height: var(--lead-line); font-weight: 400; }   /* xl retired into Lead */
.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; }   /* xs retired into Small */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--house); color: var(--ivory); font-family: var(--sans); font-size: var(--small-size); line-height: var(--small-line); -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> */
h1, h2, h3, p, figure, dl, dd { margin: 0; }
em { font-style: italic; }
/* 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); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: none; }
/* The eyebrow: H6 with a 32px hairline before it, 16px between. The hairline is Gold on dark grounds and Gold ink on
   light ones (Gold vanishes on ivory): any light section carries the class on-light, and every eyebrow line follows */
:root { --eyebrow-rule: var(--gold); }
.on-light { --eyebrow-rule: var(--gold-ink); }
.eyebrow, .bt__eyebrow { display: flex; align-items: center; gap: var(--space-16); }
.eyebrow::before, .bt__eyebrow::before { content: ""; width: var(--space-32); height: 1px; background: var(--eyebrow-rule); flex: none; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-24); }
.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 hero label (the top bar, band, breadcrumb and menu are in shell.css) ---------- */
.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; }
.label .rule { width: var(--space-32); height: 1px; background: var(--eyebrow-rule); flex: none; }

/* ======================================================================
   THE HERO: the dance's home. Name, line and facts on the left; India in fine lines on the right with the
   dance's state in gold, and a round photo pinned to it from the sea by a thin gold line.
   ====================================================================== */
.ha { position: relative; min-height: max(100svh, 760px); background: var(--house); color: var(--ivory); padding: var(--space-144) var(--gutter) var(--hero-bottom); display: flex; align-items: stretch; }
/* The words sit at the bottom, 80px up, like every hero on the site; the map stays centred beside them */
.ha__grid { width: 100%; align-items: end; }
.ha__text { grid-column: 1 / span 6; }
/* The hero headline and its line: the homepage's tagline sizes, the same on every page */
.ha__name { margin: var(--space-20) 0 0; max-width: 660px; font: 400 var(--h1-size)/var(--h1-line) var(--serif); letter-spacing: -0.02em; }   /* 660px: the homepage's tagline column, so it breaks onto a second line the same way. Not a rulebook width yet */
.ha__name em { font-style: italic; color: var(--gold); }   /* a word or two of the tagline in gold, as on the homepage */
.ha__blurb { margin-top: var(--space-20); max-width: var(--w-hero-line); color: var(--ivory-92); }
.facts { margin-top: var(--space-56); max-width: var(--w-narrow); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-24); }
.facts div { border-top: 1px solid var(--gold); padding-top: var(--space-16); }
.facts dt { color: var(--muted); }
.facts dd { margin-top: var(--space-8); font: 400 var(--h5-size)/var(--h5-line) var(--serif); letter-spacing: -0.01em; }
.ha__mapwrap { grid-column: 7 / span 6; align-self: center; position: relative; height: min(760px, calc(100svh - 216px)); min-height: 520px; }
.ha__map { position: absolute; inset: 0; }
.ha__mapwrap:not(.is-ready) .pin { visibility: hidden; }   /* unseen until the map is in and it has its place, so it never flashes */
.map svg { display: block; width: 100%; height: 100%; overflow: visible; }
.map path { fill: none; stroke: currentColor; stroke-opacity: 0.38; stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.map path.is-lit { fill: var(--gold); stroke: var(--gold); stroke-opacity: 1; }
.ring { position: absolute; color: var(--gold); pointer-events: none; }
.pin { position: absolute; z-index: 3; width: 168px; height: 168px; translate: -50% -50%; }
.pin__disc { position: absolute; inset: 14px; border-radius: 50%; overflow: hidden; }
.pin__disc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pin .ring { inset: 0; width: 100%; height: 100%; }
.pin__label { position: absolute; left: 50%; top: calc(100% + var(--space-8)); translate: -50% 0; white-space: nowrap; text-align: center; line-height: var(--small-line); color: var(--gold); }
.lead-line { position: absolute; z-index: 2; height: 1px; background: var(--gold); transform-origin: 0 50%; }
.lead-dot { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 3px var(--gold); translate: -50% -50%; }
/* The scroll cue at the foot of every hero: the homepage's. Fades out over the first 160px of scrolling (dance.js) */
.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); } }
@media (prefers-reduced-motion: reduce) { .cue__line::after { animation: none; transform: translateY(9px); } }

/* ---------- The hero photo: House lights, exactly as Contact had it (every main page but Home and Folk Dances; built
   by components/HeroPhoto.astro, moved by dance.js). Seen first in gold and black, then the colour rises from the
   stage floor ---------- */
.hl { position: absolute; inset: 0; overflow: hidden; }
.hl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hl-pos, 50% 50%); display: block; }
.hl__gold { filter: grayscale(1) sepia(1) saturate(1.5) hue-rotate(-8deg) brightness(0.62) contrast(1.05); }
.hl__colour { -webkit-mask-image: linear-gradient(to top, var(--house) var(--p, 100%), transparent calc(var(--p, 100%) + 26%));
  mask-image: linear-gradient(to top, var(--house) var(--p, 100%), transparent calc(var(--p, 100%) + 26%)); }

@media (max-width: 1199px) {
  .ha__name { max-width: 440px; }   /* the homepage's tablet tagline width */
  .ha__text { grid-column: 1 / span 12; }
  .ha__mapwrap { grid-column: 2 / span 10; margin-top: var(--space-64); height: 640px; }
}

/* The photo after the hero: 60% of the screen. Each page sets what the crop keeps (object-position) */
.fs-photo { height: 60vh; height: 60svh; min-height: 480px; overflow: hidden; background: var(--house); }
.fs-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

/* ======================================================================
   THE DANCE, TOLD. Spacious and grand: one idea at a time, the knowledge set large, the photos given room,
   captions directly under them. Near a statement, everything else stays quiet.
   ====================================================================== */
/* Iteration 1 ("tell"): only its eyebrow, names and set pieces live on, used by the dance pages (the section
   itself was cleared 18 Oct) */
/* The centred eyebrow over a part of the dance: the eyebrow's 32px hairline, mirrored either side */
.tell__eyebrow { display: flex; align-items: center; justify-content: center; gap: var(--space-16); color: var(--accent); }
.tell__eyebrow::before, .tell__eyebrow::after { content: ""; width: var(--space-32); height: 1px; background: var(--eyebrow-rule); flex: none; }
.tell__eyebrow .n { color: var(--soft); }

/* Set piece — a short list of names (other names, home regions, practices), kept quiet */
.names { text-align: center; }
.names__label { color: var(--soft); }
.names__list { margin-top: var(--space-16); font: italic 400 var(--h4-size)/var(--h4-line) var(--serif); letter-spacing: -0.01em; }
.names__list span { display: inline-block; }
.names__list span:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--space-20); border-radius: 50%; background: var(--accent); vertical-align: middle; }
.names__note { margin-top: var(--space-20); color: var(--soft); }

/* Drawings (the circle of dancers) take their colours from the ground */
.art-line { fill: none; stroke: var(--accent); stroke-opacity: 0.45; stroke-width: 0.8; }
.art-dancer { fill: currentColor; }
.art-lamp { fill: var(--accent); }

/* Set piece — beats that quicken, and clap patterns (Garba) */
.tempo__ends { display: flex; justify-content: space-between; margin-top: var(--space-12); color: var(--muted); }
.claps { display: flex; gap: var(--space-56); margin-top: var(--space-56); }
.clap__dots { display: flex; gap: var(--space-12); margin-bottom: var(--space-16); }
.clap__dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.clap__name { font: italic 400 var(--h4-size)/var(--h4-line) var(--serif); }
.tempo__note { margin-top: var(--space-32); color: var(--muted); }

/* Set piece — two side by side (men's and women's dress; sword dance and spear dance) */
.pair { max-width: var(--w-content); margin: var(--content-gap) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--column-gap); }
.pair__who { color: var(--accent); }
.pair__name { margin-top: var(--space-12); font: italic 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em; }
.pair__text { margin-top: var(--space-20); }

/* Set piece — a timeline of years (Thang-Ta's history) */
.timeline { max-width: var(--w-content); margin: var(--content-gap) auto 0; position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--space-32); }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--accent); opacity: 0.5; }
.tl__dot { position: relative; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); }
.tl__year { margin-top: var(--space-32); font: 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em; color: var(--accent); }
.tl__what { margin-top: var(--space-12); }

/* ======================================================================
   THE DANCE, READ (iteration 2 — on Garba first). The write-up is the star: one large opening line for the
   whole page, then each part with a modest heading in a narrow left column and the reading beside it,
   left-aligned at an easy measure. Set pieces stay small and sit inside the reading. Grand through space.
   ====================================================================== */
.story { --accent: var(--gold-ink); background: var(--ivory); color: var(--house); padding: var(--section-pad) var(--gutter); }
.story--dark { --accent: var(--gold); background: var(--house); color: var(--ivory); }
.story__wrap { max-width: var(--w-wide); margin: 0 auto; }
.story__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-24); align-items: start; }
.story__rail { grid-column: 1 / span 4; }
.story__head { margin-top: var(--space-12); font: 400 var(--h3-size)/var(--h3-line) var(--serif); letter-spacing: -0.015em; }
.story__body { grid-column: 5 / span 7; max-width: var(--w-reading); }
.story__body > * + * { margin-top: var(--space-32); }
.story__body em { font: italic 400 1.12em/1 var(--serif); color: var(--accent); }
.story--dark .story__body .t-l { color: var(--ivory-92); }
.story figcaption { margin-top: var(--space-16); color: var(--caption-on-light); }
.story--dark figcaption { color: var(--caption-on-dark); }
/* A quiet number beside its label (Garba's nine days) */
.stat { display: flex; align-items: flex-end; gap: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--gold-ink-40); }
.stat__num { font: 400 var(--h1-size)/0.78 var(--serif); letter-spacing: -0.02em; color: var(--accent); }
.stat__sub { margin-top: var(--space-4); color: var(--soft); }
.story--dark .stat { border-top-color: var(--ivory-40); }
.story--dark .stat__sub { color: var(--muted); }
.stat__word { font: italic 400 var(--h3-size)/var(--h3-line) var(--serif); letter-spacing: -0.015em; color: var(--accent); }   /* a name, where the number would be */
/* A timeline sized to sit inside the reading (Thang-Ta's history) */
.story .timeline { max-width: none; margin: 0; column-gap: var(--space-16); }
.story .tl__year { margin-top: var(--space-20); font-size: var(--h4-size); line-height: var(--h4-line); }
.story .tl__what { margin-top: var(--space-8); }
/* Clap patterns and quickening beats, sized to sit inside the reading */
.beat svg { display: block; width: 100%; height: auto; }
.story .claps { margin-top: var(--space-32); }
.story .clap__name { font-size: var(--h5-size); line-height: var(--h5-line); }
/* On dark grounds the quiet text is Muted, never Soft (Soft is for light: 2.7:1 on House fails AA). 2 Oct, from a
   contrast check of every dance page */
.story--dark .names__label, .story--dark .names__note { color: var(--muted); }
/* The closing thought: a quiet italic pull line, the rest beneath */
.story__quote { font: italic 400 var(--h3-size)/calc(var(--h3-line) + var(--space-4)) var(--serif); letter-spacing: -0.015em; }
.story__quote::before { content: ""; display: block; width: var(--space-48); height: 1px; margin-bottom: var(--space-32); background: var(--accent); }
@media (max-width: 1199px) {
  .story__rail, .story__body { grid-column: 1 / -1; }
  .story__body { margin-top: var(--space-32); }
}

/* ======================================================================
   THE DANCE, COMBINED (iteration 3 — Raj's picks from the five Garba variants). Type follows the scale: the
   hero name is the one display size; a part's opening line is h2 size (light) or h3 size (dark), part headings
   h3, names h4. Photos sit beside the copy as soft-cornered rectangles, sides swapping; never in circles.
   ====================================================================== */
.mx-text em, .mx-state em, .mx-bare em { font: italic 400 1.12em/1 var(--serif); color: var(--accent); }
.mx-state em, .mx-bare em { font-size: 1em; }
.mx-state { max-width: var(--w-content); margin: var(--space-56) auto 0; text-align: center; font: 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.mx-bare { max-width: var(--w-content); margin: var(--space-48) auto 0; text-align: center; font: 400 var(--h3-size)/var(--h3-line) var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.story .names { margin-top: var(--content-gap); }
.mx-row { margin-top: var(--content-gap-lg); }
.mx-row--mid { align-items: start; }   /* was centred; a photo now always starts level with the heading beside it (28 Sep) */
.mx-row--first { margin-top: var(--space-144); }
.mx-l { grid-column: 1 / span 6; grid-row: 1; }
.mx-r { grid-column: 8 / span 5; grid-row: 1; }
.mx-lw { grid-column: 1 / span 5; grid-row: 1; }
.mx-rw { grid-column: 7 / span 6; grid-row: 1; }
/* A photo on the left gets the same 6 columns as one on the right, so every photo beside copy is one size (18 Oct 2026) */
@media (min-width: 1200px) {
  .mx-lw.mx-photo { grid-column: 1 / span 6; }
  .mx-lw.mx-photo ~ .mx-rw { grid-column: 8 / span 5; }
}
/* .mx-drop (12 Oct 2026): no longer dropped. One rule everywhere: a photo beside copy starts level with the top of
   the copy (its heading, or the first line when there is no heading), as .mx-row--mid does */
.mx-text > * + * { margin-top: var(--space-32); }
.mx-text { max-width: var(--w-reading); }
.mx-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-photo); }
.mx-art { max-width: 420px; margin-left: auto; }
.mx-art svg { display: block; width: 100%; height: auto; }
.story--dark .mx-text .t-l { color: var(--ivory-92); }
.mx-close { grid-column: 3 / span 8; }
.mx-close > * + * { margin-top: var(--space-32); }
@media (max-width: 1199px) {
  .mx-l, .mx-r, .mx-lw, .mx-rw, .mx-close { grid-column: 1 / -1; grid-row: auto; }
  .mx-row > * + * { margin-top: var(--space-56); }
  .mx-art { margin-left: 0; }
}

/* DRAFT ONLY: a marked gap where a photo is still to come (the new dance pages, 29 Sep). Delete once the photos are in.
   .ph--fill fills a full-width photo band */
.ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: var(--space-24); border: 1px dashed var(--soft); border-radius: var(--r-photo); background: var(--linen); color: var(--soft); text-align: center; font: 600 var(--h6-size)/var(--h6-line) var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.story--dark .ph { border-color: var(--muted); background: var(--ash); color: var(--muted); }
.ph--fill { height: 100%; aspect-ratio: auto; border-radius: 0; border: 0; background: var(--ash); color: var(--muted); }

/* ---------- Taught at NSDA: who stands behind this knowledge (the same on every dance page) ---------- */
.taught { background: var(--house); color: var(--ivory); padding: var(--section-pad-set) var(--gutter); }
.taught__grid { max-width: var(--w-content); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--column-gap); align-items: center; }
.taught__photo { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; }
.taught__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; border-radius: 50%; }
.taught__photo .ring { inset: -10.25%; width: 120.5%; height: 120.5%; }
.taught__eyebrow { color: var(--gold); }
.taught__name { margin-top: var(--space-20); font: 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em; }
.taught__role { margin-top: var(--space-8); color: var(--muted); }
.taught__text { margin-top: var(--space-32); max-width: var(--w-reading); color: var(--ivory-92); }
.creds { margin-top: var(--space-56); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-32); }
.creds div { border-top: 1px solid var(--gold); padding-top: var(--space-16); }
.creds dt { font: 400 var(--h3-size)/var(--h3-line) var(--serif); color: var(--gold); }
.creds dd { margin: var(--space-8) 0 0; color: var(--ivory-85); }
/* The pill button: Gold, House words, 52px tall, 28px sides. Hover on dark → Ivory; on light → House with Ivory words */
.pill { 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), color var(--t-quick) var(--ease-standard); }
.pill:hover { background: var(--ivory); }
.on-light .pill:hover { background: var(--house); color: var(--ivory); }
.taught .pill { margin-top: var(--space-56); }

/* ---------- Performance: the homepage's Booker T. treatment, unchanged ----------
   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; }
.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 video, .watch__frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--r-photo); background: var(--house); }

/* ---------- Explore other folk dances: the dances that share this one's home first ---------- */
.ex { background: var(--ivory); color: var(--house); padding: var(--section-pad) var(--gutter); }
.ex__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-56); }
.ex__eyebrow { color: var(--gold-ink); margin-bottom: var(--space-16); }
.ex__head h2 { font: 400 var(--h2-size)/var(--h2-line) var(--serif); letter-spacing: -0.02em; }
.ex__head h2 em { color: var(--gold-ink); }
.ex__all { display: inline-flex; align-items: center; min-height: var(--target); font: 600 var(--h6-size)/var(--h6-line) var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ex__all:hover { text-decoration-thickness: 2px; }
.ex__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24); }
.ex__thumb { overflow: hidden; border-radius: var(--r-control); aspect-ratio: 4 / 3; background: var(--linen); }
.ex__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-medium) var(--ease-glide); }
.ex__name { margin-top: var(--space-20); font: 600 var(--h5-size)/var(--h5-line) var(--sans); transition: color var(--t-quick) var(--ease-standard); }   /* thumbnail titles in the sans (11 Oct): the serif is for headlines */
.ex__state { margin-top: var(--space-8); color: var(--soft); }
.ex__card:hover .ex__name { color: var(--gold-ink); }
.ex__card:hover .ex__thumb img { transform: scale(1.06); }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-48); }
  .timeline::before { display: none; }
  .creds { grid-template-columns: 1fr; row-gap: var(--space-24); }
  .ex__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-48); }
}

/* ---------- Phones: to be designed separately. For now everything simply stacks ---------- */
@media (max-width: 767px) {
  .cue { display: none; }   /* phones: the hero words run full width and would touch it; as on Folk Dances */
  .ha { padding: var(--space-120) var(--gutter) var(--hero-bottom); }
  .ha__name { max-width: none; }
  .facts { grid-template-columns: 1fr; row-gap: var(--space-20); }
  .ha__mapwrap { grid-column: 1 / span 12; height: 420px; min-height: 0; margin-top: var(--space-48); }
  .pin { width: 112px; height: 112px; }
  .pin__disc { inset: 10px; }
  .fs-photo { height: 60svh; min-height: 360px; }
  .pair, .taught__grid { grid-template-columns: 1fr; row-gap: var(--space-40); }
  .names__list span:not(:last-child)::after { margin: 0 var(--space-16); }
  .timeline { grid-template-columns: 1fr; row-gap: var(--space-32); }   /* one column: two were too narrow to read */
  .bt__caption { bottom: var(--space-40); }
  .bt__watch { margin-top: var(--space-24); }
  .ex__head { flex-direction: column; align-items: flex-start; }
  .ex__cards { grid-template-columns: 1fr 1fr; gap: var(--space-32) var(--space-16); }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .ex__thumb img { transition: none; }
}

/* ---------- Moving between pages: the page being left fades down into the dark, the next rises in from it, like a
   quick dip between scenes. The browser's own page transition (Chrome, Edge, Safari); others simply switch. The same
   rule sits in index.html and folk-dances.html ---------- */
@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; } }