/* ==========================================================================
   NSDA — the site's shell: the top bar, desktop links, the pinned band with its breadcrumb strip, the menu and the
   footer. One copy for every page: the shared pages get it through dance.css; the homepage and Folk Dances link it.
   Every value comes from tokens.css, the design system. (Merged from three copies, 18 Oct 2026)
   ========================================================================== */
/* No widows in headlines (Raj, 21 Oct 2026): every heading balances its lines, so a last line is never a single word.
   :where keeps it weakest, so a heading that sets its own text-wrap keeps it */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:root { --band: 128px; }   /* the fixed header: 72px logo row + 56px breadcrumb strip. The homepage has no strip: 72px */

/* ---------- Top bar: logo, links, Menu button ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: var(--space-32) var(--gutter); }
.logo { display: inline-flex; align-items: center; min-height: var(--target); }
.logo img { width: 156px; height: 32px; display: block; }
.menu-btn { display: inline-flex; align-items: center; gap: var(--space-12); min-height: var(--target); padding: 0 var(--space-4) 0 var(--space-16); background: none; border: 0; color: inherit; cursor: pointer; font: 600 12px/16px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.menu-btn:hover { color: var(--gold); }
/* Two lines that cross into an X: first they slide together, then they turn. Uncrossing runs the other way */
.menu-btn .burger { position: relative; display: block; width: 32px; height: 10px; }
.menu-btn .burger::before, .menu-btn .burger::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: top var(--t-quick) var(--ease-sway) var(--t-quick), transform var(--t-quick) var(--ease-sway); }
.menu-btn .burger::before { top: 0; }
.menu-btn .burger::after { top: 9px; }
.menu-btn.is-x .burger::before, .menu-btn.is-x .burger::after { top: 4.5px; transition: top var(--t-quick) var(--ease-sway), transform var(--t-quick) var(--ease-sway) var(--t-quick); }
.menu-btn.is-x .burger::before { transform: rotate(45deg); }
.menu-btn.is-x .burger::after { transform: rotate(-45deg); }

/* Desktop navigation: every page one click away, in the Menu button's small spaced capitals; Register as the one gold
   button. The page you are on is gold and underlined (never colour alone). Tablets and phones keep the Menu button */
.bar__end { display: flex; align-items: center; gap: var(--space-24); }
.nav { display: none; align-items: center; gap: var(--space-40); }
.nav__list { position: relative; display: flex; align-items: center; gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.nav__list a { display: inline-flex; align-items: center; min-height: var(--target); font: 600 12px/16px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 8px; text-shadow: 0 1px 10px var(--veil-55); transition: color var(--t-quick) var(--ease-standard), text-decoration-color var(--t-quick) var(--ease-standard); }
.nav__list a:hover, .nav__list a:focus-visible, .nav__list a[aria-current] { color: var(--gold); }
.nav__list a[aria-current] { text-decoration-color: currentColor; }   /* the page you are on (until the follow-spot takes over) */
/* The follow-spot: one gold hairline that rests under the page you are on, glides to whichever link you point at and
   stretches to fit the word, then slides back home (placed by script; the homepage has no current page, so it shows
   only while pointing) */
.nav__spot { position: absolute; left: 0; bottom: 7px; width: 0; height: 0.5px; background: var(--gold); opacity: 0; pointer-events: none;
  transition: transform var(--t-medium) var(--ease-sway), width var(--t-medium) var(--ease-sway), opacity var(--t-short) var(--ease-standard); }
.nav__spot.is-on { opacity: 1; }
.nav.has-spot .nav__list a[aria-current] { text-decoration-color: transparent; }
/* Register: a compact pill for the header */
.nav .nav__cta { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--space-24); border-radius: var(--r-pill); background: var(--gold); color: var(--house); font: 600 12px/16px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; transition: background var(--t-quick) var(--ease-standard); }
.nav .nav__cta:hover { background: var(--ivory); }
@media (min-width: 1200px) { .nav { display: flex; } .bar__end .menu-btn { display: none; } }
/* In the hero the links sit in a dark glass pill, so they read over any photo or film (ivory on it stays above 4.5:1
   even over white). The band is already a dark bar, so it needs none */
.top .nav { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-32); border-radius: var(--r-pill); background: var(--veil-75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--ivory-40); }
.top .nav__list a { text-shadow: none; }

/* ---------- Breadcrumb ---------- */
.crumb { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-12); }
.crumb a { display: inline-flex; align-items: center; min-height: var(--target); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.crumb a:hover { text-decoration-thickness: 2px; }
.crumb .sep { color: var(--gold); }
.crumb [aria-current] { color: var(--muted); }

/* ---------- The band: logo and links, with the breadcrumb strip under them. Hidden while the hero's own top bar is on
   screen, so there are never two logos; slides down once scrolling starts ---------- */
.band {
  position: fixed; inset: 0 0 auto 0; z-index: 8; height: var(--band); display: flex; flex-direction: column;
  background: var(--veil-85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ivory-40); color: var(--ivory);
  transform: translateY(-100%); visibility: hidden;
  transition: transform var(--t-medium) var(--ease-glide), visibility 0s var(--t-medium);
}
.band.is-on { transform: none; visibility: visible; transition: transform var(--t-medium) var(--ease-glide); }
.band__row { flex: none; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); }
.band__crumb { flex: none; height: 56px; padding: 0 var(--gutter); background: var(--ash); font: 500 var(--small-size)/var(--small-line) var(--sans); }   /* a quiet lift from the logo row's dark: the raised dark panel */

/* ---------- Menu: the full-screen overlay (tablets and phones) ---------- */
.menu { position: fixed; inset: 0; z-index: 10; background: var(--house); color: var(--ivory); display: none; padding: var(--space-32) var(--gutter) var(--space-48); }
.menu.is-open { display: flex; flex-direction: column; }
.menu .top { position: static; padding: 0; }
.menu ul { list-style: none; margin: auto 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-40); }
.menu li a { display: inline-flex; align-items: baseline; gap: var(--space-20); min-height: var(--target); padding: var(--space-4) 0; font: italic 400 44px/52px var(--serif); letter-spacing: -0.02em; }   /* tablets; phones below. Desktop uses the header links */
.menu li a:hover { color: var(--gold); }
.menu .foot { font: 500 12px/16px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
body.menu-open { overflow: hidden; }

/* ---------- Footer ---------- */
.site-foot { position: relative; background: var(--house); color: var(--ivory); }
.site-foot__inner { padding: var(--space-96) var(--gutter) var(--space-120); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-24); row-gap: var(--space-80); align-items: end; }   /* air between the hanging ornaments and the logo */
.site-foot__brand { grid-column: 1 / span 7; }
.site-foot__brand .logo img { width: 187px; height: 38px; }
/* The three studios: an H4, well under a section headline, so the logo leads */
.site-foot__studios { margin-top: var(--space-48); font: italic 400 var(--h4-size)/var(--h4-line) var(--serif); letter-spacing: -0.02em; }
.site-foot__studios span { display: inline-block; }
.site-foot__studios span:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 0 var(--space-20); vertical-align: middle; }
.site-foot__social { display: flex; gap: var(--space-12); margin: var(--space-40) 0 0; padding: 0; list-style: none; }
.site-foot__social a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ivory-40); transition: color var(--t-quick) var(--ease-standard), border-color var(--t-quick) var(--ease-standard); }
.site-foot__social a:hover { color: var(--gold); border-color: var(--gold); }
.site-foot__social svg { width: 22px; height: 22px; display: block; }
.site-foot__nav { grid-column: 9 / span 4; }
/* Links flow into as many columns as fit, so new pages just join the list */
.site-foot__nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: var(--space-24); }
.site-foot__nav li a { display: inline-flex; align-items: center; min-height: var(--target); font-size: var(--body-size); line-height: var(--body-line); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--t-quick) var(--ease-standard), text-decoration-color var(--t-quick) var(--ease-standard); }
.site-foot__nav li a:hover { color: var(--gold); text-decoration-color: currentColor; }
/* Register: the pill button */
.site-foot__cta { display: inline-flex; align-items: center; min-height: 52px; margin-top: var(--space-32); 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); }
.site-foot__cta:hover { background: var(--ivory); }
.site-foot__base { margin: 0 var(--gutter); padding: var(--space-24) 0 var(--space-40); border-top: 1px solid var(--ivory-40); color: var(--muted); }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .site-foot__brand, .site-foot__nav { grid-column: 1 / span 12; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .menu ul { grid-template-columns: 1fr; }
  .menu li a { font-size: 32px; line-height: 40px; min-height: var(--target); }
  .site-foot__inner { padding: var(--space-80) var(--gutter) var(--space-80); row-gap: var(--space-48); }   /* was 16 under the toran (removed 8 Oct) */
  .site-foot__studios { margin-top: var(--space-32); }
  .site-foot__studios span:not(:last-child)::after { margin: 0 var(--space-16); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-btn .burger::before, .menu-btn .burger::after, .band, .band.is-on { transition: none; }
  .nav__spot { transition: opacity 150ms var(--ease-standard); }
}