/* ============================================================
   Aslin Projects — site styles
   Colors & fonts come from theme.css, generated from content/theme.json

   Type scale (desktop maxima — deliberately calm):
     hero towers / cyclorama title ... viewport-scaled display (home only)
     spine page titles ............. <= 4rem   (vertical on desktop)
     score work titles ............. <= 2.5rem
     event titles .................. <= 2rem
     section headings .............. <= 2rem
     body .......................... 1.0625rem
     mono labels / metadata ........ 0.72–0.8rem
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The header is fixed, so anything jumped to by id — #documents from the
   About page, a work linked directly — would otherwise land underneath it. */
[id] { scroll-margin-top: 6rem; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

/* The films are silent scenery, never a player. iOS draws a large play button
   over any paused video, so a phone that declines to autoplay (Low Power Mode,
   for one) turns the homepage into what looks like a broken video. Suppress
   the overlay: if playback really cannot start, the poster frame stands in,
   which is the intended still anyway. */
[data-hero-video]::-webkit-media-controls,
[data-hero-video]::-webkit-media-controls-start-playback-button,
[data-hero-video]::-webkit-media-controls-panel,
[data-hero-video]::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}
[data-hero-video] { pointer-events: none; }

/* A film that cannot play steps aside for its poster, swapped in by JS as a
   real <img> — the guaranteed version of the suppression above, since iOS
   only draws its play button on <video>. The img carries the video's own
   classes, so it takes the same size and place in every layout. */
[data-hero-video].is-resting { display: none; }
.ambient-poster { pointer-events: none; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 400);
  line-height: 1.1;
  margin: 0;
}

a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--color-surface); color: var(--color-text);
  padding: 0.5rem 1rem; z-index: 100; transition: top 0.15s;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

::selection { background: var(--color-accent); color: var(--color-background); }

/* The whole site runs dark: ink ground, bone ink — set in content/theme.json. */

/* ---------- Header: top bar ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  color: var(--color-text);
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid,
.site-header.is-open {
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--color-line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header.is-solid, .site-header.is-open { background: var(--color-background); }
}

/* Over the homepage stage the bar stays transparent with light text */
.page-home .site-header:not(.is-solid):not(.is-open) { color: #ede8e3; }
.page-home .site-header:not(.is-solid):not(.is-open) :focus-visible { outline-color: #ede8e3; }

/* The whole bar is one gesture in the top-right corner: the mark with its
   three lines, and the index that unfolds to the LEFT of it along a rail.
   The left of the bar stays empty — that corner belongs to ASLIN.
   DOM order is button-then-nav so the keyboard reaches the toggle first;
   `order` mirrors it visually. */
.site-header__inner {
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.site-header__brand {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0.35rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
  order: 2;
}

/* three lines: the affordance. On open the outer two fold into the middle,
   which carries on as the rail the index rides out along. */
.site-header__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
  transition: width 0.42s cubic-bezier(.16, .84, .36, 1);
}
/* open: the surviving middle line stretches into the rail the index rides */
.site-header__brand[aria-expanded="true"] .site-header__bars { width: 46px; }
.site-header__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.34s cubic-bezier(.16, .84, .36, 1), opacity 0.24s ease;
}
.site-header__brand:hover .site-header__bars span { background: var(--color-accent); }
.site-header__brand[aria-expanded="true"] .site-header__bars span:first-child {
  transform: translateY(6.5px);
  opacity: 0;
}
.site-header__brand[aria-expanded="true"] .site-header__bars span:last-child {
  transform: translateY(-6.5px);
  opacity: 0;
}
.site-header__brand[aria-expanded="true"] .site-header__bars span:nth-child(2) {
  background: var(--color-accent);
}
.site-header__name {
  font-family: var(--font-heading);
  font-weight: var(--wordmark-weight, 400);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the index itself — a rail draws out to the left, then the items arrive
   along it, nearest the mark first. Content is packed to the right so the
   reveal grows away from the mark rather than sliding past it. */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  order: 1;
  transition: max-width 0.5s cubic-bezier(.16, .84, .36, 1),
              opacity 0.3s ease,
              visibility 0s linear 0.5s;
}
.site-header.is-open .site-nav {
  max-width: 62rem;
  opacity: 1;
  visibility: visible;
  transition: max-width 0.5s cubic-bezier(.16, .84, .36, 1),
              opacity 0.3s ease,
              visibility 0s linear 0s;
}
/* no separate rail: the mark's folded middle line is the rail, so the
   numbers just need clearance from where it begins */
.site-nav__list {
  list-style: none;
  margin: 0 1.15rem 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.9vw, 1.9rem);
}
/* each item: its index number, then where it goes */
.site-nav__link {
  display: block;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.34s ease, transform 0.38s cubic-bezier(.16, .84, .36, 1),
              border-color 0.2s, color 0.2s;
}
.site-header.is-open .site-nav__link { opacity: 1; transform: translateX(0); }
.site-nav__link:hover { color: var(--color-accent); }
.site-nav__num { letter-spacing: 0.12em; }
/* every item names itself — the number indexes it, the word says where it
   goes, so nothing depends on hovering to be understood */
.site-nav__word {
  margin-left: 0.55rem;
  white-space: nowrap;
}
.site-nav__link[aria-current="page"] { border-bottom-color: var(--color-accent); }

.site-nav__list { order: 1; }
.page-home .site-header:not(.is-solid) .site-nav__link[aria-current="page"] {
  border-bottom-color: #ede8e3;
}
/* the item nearest the mark arrives first, so the index unspools leftward */
.site-nav__list li:nth-child(7) .site-nav__link { transition-delay: 0.04s; }
.site-nav__list li:nth-child(6) .site-nav__link { transition-delay: 0.085s; }
.site-nav__list li:nth-child(5) .site-nav__link { transition-delay: 0.13s; }
.site-nav__list li:nth-child(4) .site-nav__link { transition-delay: 0.175s; }
.site-nav__list li:nth-child(3) .site-nav__link { transition-delay: 0.22s; }
.site-nav__list li:nth-child(2) .site-nav__link { transition-delay: 0.265s; }
.site-nav__list li:nth-child(1) .site-nav__link { transition-delay: 0.31s; }

@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav__link, .site-header__bars span { transition-duration: 0.01s; }
  .site-nav__link { transition-delay: 0s; }
}

/* Cyclorama home: chrome compresses toward the upper right corner */
.home--cyclorama .site-header__inner { min-height: 3.5rem; align-items: flex-start; padding-top: 0.9rem; }

/* Phones: the index drops as a sheet instead of running sideways */
@media (max-width: 47.99rem) {
  .site-nav {
    position: fixed;
    inset: 4.25rem 0 auto 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* base rule centres; a column sheet must not */
    justify-content: flex-start;  /* base packs right; that becomes 'bottom' here */
    background: color-mix(in srgb, var(--color-background) 96%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-line);
    transform: translateY(-0.5rem);
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s linear 0.22s;
  }
  .site-header.is-open .site-nav {
    max-width: none;
    transform: translateY(0);
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s linear 0s;
  }
  .site-nav::after { display: none; }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0 1.25rem 1.5rem;
  }
  .site-nav__link {
    display: flex;
    align-items: baseline;
    font-size: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text);
    transform: none;
    transition-delay: 0s !important;
  }
  /* the label sits in line with its number — no hover here to reveal it */
  .site-nav__word { margin-left: 1.1rem; }
  .site-nav__link[aria-current="page"] { border-bottom-color: var(--color-accent); }
}

/* ---------- Home A: the proscenium ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  background: var(--color-stage, #161310);
  overflow: hidden;
}

.hero--proscenium { display: grid; place-items: center; }

.stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vh, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  max-width: 110rem;
  margin: 0 auto;
}

.stage__opening {
  width: min(100%, 74vw);
  min-width: 0;
  display: flex;
  justify-content: center;
}
.stage__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 66vh;
  object-fit: cover;
  background: #0c0a08;
}

/* the wordmark is a link to About; it must not move, so hovering eases
   the ink rather than shifting anything */
.stage__tower {
  display: block;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 400);
  color: #ede8e3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.9;
  white-space: nowrap;
  user-select: none;
  position: absolute;
  z-index: 2;
  transition: color 0.25s ease;
}
.stage__tower:hover,
.stage__tower:focus-visible { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
  .stage__tower { transition: none; }
}
/* glyphs carry a slight vertical stretch at every size */
.stage__letter {
  display: inline-block;
  transform: scaleY(1.12);
  transform-origin: center;
}

/* Desktop: the words ride their corners on a 30° diagonal, crossing the film —
   ASLIN out of the top left, PROJECTS into the bottom right */
@media (min-width: 48rem) {
  /* each word centers on the film's actual edge: (viewport - video height) / 2,
     where video height = min(66svh, 74vw × 9/16) */
  .stage__tower--left {
    font-size: clamp(5rem, 15.5vw, 13.5rem);
    left: 0.4vw;
    top: calc((100svh - min(66svh, 41.625vw)) / 2);
    /* sits on the film's top edge, eased down to clear the A|P mark */
    transform: translateY(-36%);
  }
  .stage__tower--right {
    font-size: clamp(5rem, 15.5vw, 13.5rem);
    right: 0.4vw;
    bottom: calc((100svh - min(66svh, 41.625vw)) / 2);
    /* mirrors ASLIN's easing: sits on the film's bottom edge, clear of the dates line */
    transform: translateY(28%);
  }
}

.stage__marquee {
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 232, 227, 0.85);
  text-decoration: none;
  text-align: center;
}
.stage__marquee:hover {
  color: #ede8e3;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(237, 232, 227, 0.6);
}
@media (min-width: 48rem) {
  .stage__marquee {
    position: absolute;
    left: clamp(1.5rem, 3vw, 3rem);
    bottom: 1.4rem;
    z-index: 2;
    text-align: left;
  }
}

@media (max-width: 47.99rem) {
  /* Mobile: the film fills the page; the name sits centered on a 30° diagonal */
  .hero--proscenium .stage { display: block; padding: 0; }
  .hero--proscenium .stage__opening { position: static; z-index: auto; }
  .hero--proscenium .stage__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .hero--proscenium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(12, 10, 8, 0.42), rgba(12, 10, 8, 0.26) 40%, rgba(12, 10, 8, 0.5));
  }
  .hero--proscenium .stage__tower {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    z-index: 2;
    writing-mode: horizontal-tb;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(3.4rem, 19vw, 5.5rem);
    line-height: 0.9;
  }
  .hero--proscenium .stage__tower--left {
    transform: translate(-50%, -50%) translate(0, -0.52em);
  }
  .hero--proscenium .stage__tower--right {
    font-size: clamp(3.4rem, 19vw, 5.5rem);
    transform: translate(-50%, -50%) translate(0, 0.52em);
  }
  /* centred and a step larger so it doesn't slip past people on a phone;
     padded to a proper touch target rather than a 22px line of type */
  .hero--proscenium .stage__marquee {
    position: absolute;
    left: 1rem; right: 1rem; bottom: 0.6rem;
    padding: 0.65rem 0;
    z-index: 2;
    font-size: clamp(0.74rem, 3.5vw, 0.88rem);
    letter-spacing: 0.05em;   /* tracking is what pushes it onto two lines */
    text-align: center;
    color: #ede8e3;
  }
}

/* ---------- Home B: the cyclorama (name in front of the film) ---------- */

.hero--cyclorama { }

.cyc__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cyc__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 10, 8, 0.5), transparent 35%, transparent 70%, rgba(12, 10, 8, 0.55));
}
.cyc__title {
  position: absolute;
  left: clamp(0.5rem, 2vw, 2rem);
  bottom: clamp(3.25rem, 9vh, 5rem);
  color: #ede8e3;
  user-select: none;
}
.cyc__line {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 400);
  font-size: clamp(4.5rem, 14vw, 12rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.cyc__marquee {
  position: absolute;
  left: clamp(0.75rem, 2.2vw, 2.25rem);
  bottom: 1.1rem;
  text-align: left;
}

@media (max-width: 47.99rem) {
  .cyc__title { bottom: 4rem; left: 1rem; right: 1rem; }
  .cyc__line { font-size: clamp(3.5rem, 19vw, 5.5rem); }
  .cyc__marquee { left: 1rem; right: 1rem; font-size: 0.62rem; }
}

/* ---------- Interior pages: spine titles ---------- */

.page-intro {
  max-width: 84rem;
  margin: 0 auto;
  padding: 6.5rem 1.25rem 0;
  min-height: 7.5rem;
}
.page-intro__title {
  font-size: clamp(2.2rem, 9vw, 3rem);
  font-weight: var(--heading-weight, 400);
  letter-spacing: var(--heading-tracking, 0.02em);
  text-transform: var(--heading-transform, uppercase);
  line-height: 0.95;
}
.page-intro__lede {
  max-width: 44rem;
  margin: 1.25rem 0 0;
  font-size: 1.05rem;
  color: var(--color-text-muted);
}
.page-intro__lede a { color: var(--color-text); }

/* Desktop: the title turns vertical and lives in the left margin (the spine);
   the intro block itself stays in flow so ledes read normally. */
@media (min-width: 48rem) {
  body:not(.page-home) main {
    position: relative;
    max-width: 84rem;
    margin: 0 auto;
    padding-left: clamp(4.5rem, 7vw, 7rem);
  }
  body:not(.page-home) .page-intro { max-width: none; margin: 0; }
  /* the spine is a window the title is drawn down through, so it can
     arrive out of the A|P mark on load; it sits just clear of the
     tether rail that runs down from the mark */
  body:not(.page-home) .page-intro__spine {
    position: absolute;
    left: calc(clamp(0.75rem, 1.5vw, 1.75rem) + 0.8rem);
    top: 6.5rem;
    overflow: hidden;
    /* the spine and its rail stay in front of any full-bleed media the
       page runs behind them (the Works wall of film) */
    z-index: 3;
  }
  body:not(.page-home) .page-intro__title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(2.6rem, 6vh, 4rem);
    line-height: 1;
  }

  /* On arrival: a hairline drops out of the mark down to where the title
     begins, then the title rides down it. Type moves once, on entrance,
     and never again. The rail spans mark-bottom to title-top — a fixed
     run, so it reads identically on every page whatever the word. */
  body:not(.page-home) .page-intro::before {
    content: "";
    position: absolute;
    left: clamp(0.75rem, 1.5vw, 1.75rem);
    top: 3.5rem;
    width: 1px;
    height: 3rem;   /* mark's underside down to the title's first glyph */
    background: var(--color-line);
    transform-origin: top;
    z-index: 3;
    /* 'backwards', not 'both': the resting state is the element's own
       style, so if the animation never runs the title is simply there */
    animation: spine-tether 320ms cubic-bezier(.16, .84, .36, 1) backwards;
  }
  body:not(.page-home) .page-intro__title {
    animation: spine-ride 560ms cubic-bezier(.16, .84, .36, 1) 240ms backwards;
  }
}
@keyframes spine-tether {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes spine-ride {
  from { transform: rotate(180deg) translateY(100%); opacity: 0.25; }
  to   { transform: rotate(180deg) translateY(0); opacity: 1; }
}
/* motion sensitivity: the title is simply already there */
@media (prefers-reduced-motion: reduce) {
  body:not(.page-home) .page-intro::before,
  body:not(.page-home) .page-intro__title { animation: none; }
}

main > :last-child { margin-bottom: clamp(4rem, 10vh, 7rem); }
.page-home main > :last-child { margin-bottom: 0; }

/* ---------- About: mission at scale ---------- */

.mission {
  max-width: 84rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 0;
}
.mission__label {
  margin: 0 0 1.75rem;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* with the film gone the sentence is the set: it takes the whole page */
.mission__statement {
  font-size: clamp(2.4rem, 8vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transform: scaleY(1.1);
  transform-origin: left top;
  margin: 0 0 clamp(2.5rem, 6vw, 5rem);
}
.mission__rest {
  margin: 0 0 1.5rem;
  /* keep the measure readable (~55 characters) */
  max-width: 36rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.mission__rest:last-of-type { margin-bottom: 0; }

/* the photograph holds the left of the lower block, the paragraphs the
   right — the indent the text used to carry alone is now the picture */
/* stacked below 62rem, so the picture needs room before the text */
.mission__figure { margin: 2rem 0 1.75rem; }
.mission__figure img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 62rem) {
  .mission__lower {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: center;   /* the text sits on the photograph's midline */
  }
  /* no margin side by side: any margin sits inside the grid row and pushes
     the photograph's midline off the row's, so centring misses by half it */
  .mission__figure { margin: 0; }
}

.about-founding {
  max-width: 84rem;
  margin: 3rem auto 0;
  padding: 0 1.25rem;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* the 501(c)(3) line on About, now pointing at Support for the documents */
.about-documents {
  max-width: 84rem;
  margin: 1.1rem auto 0;
  padding: 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ---------- Support: donor benefits ---------- */
/* Six levels whose benefits overlap almost entirely, so each opens on
   demand — native <details>, which brings its own keyboard and screen
   reader behaviour. */

.benefits {
  max-width: 84rem;
  margin: clamp(3.5rem, 8vw, 5.5rem) auto 0;
  padding: 0 1.25rem;
}
.benefits__heading {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: var(--heading-tracking, 0.02em);
  text-transform: var(--heading-transform, uppercase);
}
.benefits__intro {
  max-width: 44rem;
  margin: 0.75rem 0 1.75rem;
  color: var(--color-text-muted);
}

.tier {
  border-top: 1px solid var(--color-line);
  max-width: 52rem;
}
.tier:last-of-type { border-bottom: 1px solid var(--color-line); }
.tier__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;              /* hide the default disclosure triangle */
}
.tier__summary::-webkit-details-marker { display: none; }
.tier__summary:hover .tier__level { color: var(--color-accent); }
.tier__level {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.2s;
}
.tier__impact {
  grid-column: 1;
  max-width: 40rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
/* the same +/− the events and works use */
.tier__mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.9rem;
  color: var(--color-accent);
}
.tier__mark::before { content: "+"; }
.tier[open] .tier__mark::before { content: "−"; }
.tier[open] .tier__level { color: var(--color-accent); }

.tier__items {
  list-style: none;
  margin: 0;
  padding: 0 0 1.4rem;
  max-width: 40rem;
}
.tier__item {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.tier__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.45rem;
  height: 1px;
  background: var(--color-accent);
}
.tier__item:last-child { margin-bottom: 0; }

/* ---------- Documents ---------- */

.documents {
  max-width: 84rem;
  margin: 3.5rem auto 0;
  padding: 0 1.25rem;
}
.documents__heading {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: var(--heading-tracking, 0.02em);
  text-transform: var(--heading-transform, uppercase);
}
.documents__intro {
  max-width: 44rem;
  color: var(--color-text-muted);
  margin: 0.75rem 0 1.75rem;
}
/* stands in for the list while no documents are published */
.documents__empty {
  max-width: 44rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--color-text);
  color: var(--color-text-muted);
}
.documents__list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 2px solid var(--color-text);
  max-width: 44rem;
}
.documents__item { border-bottom: 1px solid var(--color-line); }
.documents__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0.25rem;
  text-decoration: none;
  transition: background-color 0.15s;
}
.documents__link:hover { background: var(--color-surface); }
.documents__label { text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 4px; }
.documents__link:hover .documents__label { text-decoration-color: var(--color-accent); }
.documents__meta {
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---------- Works: a wall of film ---------- */
/* The three clip-bearing works are full-bleed scenes stacked seam to seam;
   each work's entry sits directly on its own footage. Works without film
   (Recognition) stand as type alone on the ink below. */

.works {
  max-width: 84rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
}
.work-scene {
  /* distance from the works container's content edge to each viewport edge;
     the negative margins pull the film full-bleed */
  --page-l: 1.25rem;
  --page-r: 1.25rem;
  position: relative;
  margin-left: calc(-1 * var(--page-l));
  margin-right: calc(-1 * var(--page-r));
  margin-bottom: 0.3rem;
}
@media (min-width: 48rem) {
  .work-scene {
    --page-l: calc(1.25rem + clamp(4.5rem, 7vw, 7rem) + max(0px, (100vw - 84rem) / 2));
    --page-r: calc(1.25rem + max(0px, (100vw - 84rem) / 2));
  }
}
.work-scene video,
.work-scene .ambient-poster {
  width: 100%;
  max-width: none;
  /* phones get a taller 4:3 crop of the footage so the entry fits on the
     film; the true 16:9 frame returns with room to spare at 48rem+ */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #0c0a08;
}
@media (min-width: 48rem) {
  .work-scene video,
  .work-scene .ambient-poster { aspect-ratio: 16 / 9; }
}
/* phones: the taller crop can pull bright stage floor up behind the entry,
   so the film dims toward its top edge; the wide desktop frame doesn't
   need it and stays untouched */
.work-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(12, 10, 8, 0.72), rgba(12, 10, 8, 0.4) 58%, rgba(12, 10, 8, 0) 88%);
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 48rem) {
  .work-scene::before { content: none; }
}

/* the entry on the film: each scene seats it over a quiet region of its
   own footage — 1 top-left, 2 top-right, 3 lower-left */
.work-scene .work {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  text-shadow: 0 1px 22px rgba(8, 6, 4, 0.55), 0 1px 5px rgba(8, 6, 4, 0.4);
}
.work-scene--1 .work { top: clamp(1.25rem, 4.5vw, 3.25rem); left: var(--page-l); }
.work-scene--2 .work {
  top: clamp(1.25rem, 4.5vw, 3.25rem);
  right: var(--page-r);
  text-align: right;
}
.work-scene--2 .work__meta-line { margin-left: auto; }
/* on film, the muted grey loses to bright footage — size does the
   hierarchy there, so the meta reads in full bone */
.work-scene .work__meta-line { color: var(--color-text); opacity: 0.92; }
.work-scene--3 .work { top: 30%; left: var(--page-l); }

/* film-less works: type alone on the ink */
.works > .work { padding: clamp(2.5rem, 7vw, 4.5rem) 0 0; }

/* the note that closes the page, in place of links out to the footage */
.works__footnote {
  margin: clamp(3rem, 8vw, 5rem) 0 0;
  max-width: 36rem;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------- Works: the description overlay ---------- */
/* the title opens a note about the work; the page stays faintly visible
   behind it so you keep your place in the wall of film */
.work-note {
  border: 0;
  padding: 0;
  background: none;
  color: var(--color-text);
  max-width: min(34rem, calc(100vw - 2.5rem));
  width: 100%;
}
.work-note::backdrop {
  background: rgba(12, 10, 8, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.work-note__panel {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-line);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  /* the note lives inside its work, so it inherits that scene's alignment
     and drop shadow — a right-aligned scene must not tip the note over */
  text-align: left;
  text-shadow: none;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .work-note__panel { background: var(--color-surface); }
}
.work-note__eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
.work-note__title {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.work-note__body {
  margin: 0 0 1.75rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 38ch;
}
.work-note__close {
  appearance: none;
  background: none;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.work-note__close:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* the spine title crosses the first film */
@media (min-width: 48rem) {
  /* stacking lives on .page-intro__spine (the positioned element) */
  body.page-works .page-intro__title {
    text-shadow: 0 1px 14px rgba(8, 6, 4, 0.65);
  }
}

/* at billboard scale the year stacks under the title instead of floating
   beside it on the baseline */
.work__header { display: block; }
.work__title {
  font-size: clamp(2.5rem, 8.5vw, 7rem);
  letter-spacing: 0.02em;
  line-height: 0.92;
}
/* a button now, not a link out — it opens the work's note */
.work__title-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.work__title-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.work__arrow {
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.4em;
  vertical-align: 0.9em;
  letter-spacing: 0;
  color: var(--color-accent);
}
.work__years {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.work__meta { margin-top: 0.75rem; }
.work__meta-line {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  max-width: 30rem;
}
.work__link-line { margin: 1rem 0 0; }

.text-link {
  color: var(--color-text);
  text-underline-offset: 4px;
  text-decoration-color: var(--color-accent);
  transition: color 0.15s;
}
.text-link:hover { color: var(--color-accent); }

/* ---------- Upcoming: the timeline score ---------- */

/* Vertical timeline: one spine, most imminent event first */
.events {
  max-width: 84rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 0;
}
.event {
  position: relative;
  border-left: 2px solid var(--color-text);
  padding: 0 0 3rem 2rem;
}
.event:last-child { padding-bottom: 0.75rem; }
.event::before {
  content: "";
  position: absolute;
  left: -5.5px;
  top: 0.2em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}
.event__date {
  margin: 0;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}
.event__title {
  margin-top: 0.5rem;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: 0.02em;
  line-height: 1;
}
.event__venue {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.event__tickets {
  margin: 1rem 0 0;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.event__tickets .text-link { text-transform: none; letter-spacing: 0.04em; }

/* clickable events */
.event__toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.event__toggle:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.event__toggle[aria-expanded="true"] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.event__indicator { margin-left: 0.5em; color: var(--color-accent); }
.event__indicator::before {
  content: "+";
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.5em;
  vertical-align: 0.6em;
}
.event__toggle[aria-expanded="true"] .event__indicator::before { content: "−"; }

.event__details { display: none; padding-top: 0.85rem; }
.event.is-open .event__details { display: block; }

/* Touch: the event title is the page's main control, so give it a target
   worth hitting. The title line is ~22px on its own — under the 24px
   minimum — so pad it out and pull the margin back to hold the rhythm. */
@media (max-width: 47.99rem) {
  .event__toggle { padding: 0.7rem 0; margin: -0.7rem 0; }
}
.event__location {
  margin: 0;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.event__description {
  margin: 0.6rem 0 0;
  max-width: 34rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}
/* short factual lines — time, admission, room — set like the location */
.event__line {
  margin: 0.3rem 0 0;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.event__line:first-of-type { margin-top: 0.9rem; }
/* a word from the artistic director */
.event__note {
  margin: 1.4rem 0 0;
  padding-left: 1rem;
  border-left: 1px solid var(--color-line);
  max-width: 34rem;
}
.event__note-text {
  margin: 0;
  color: var(--color-text);
  line-height: 1.7;
  font-style: italic;
}
.event__note-from {
  margin-top: 0.6rem;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Desktop: details live in a sticky panel on the right */
.event-panel { display: none; }
@media (min-width: 62rem) {
  .events--panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .events--panel .event { grid-column: 1; }
  .events--panel .event > .event__details { display: none; }
  .events--panel .event__indicator { display: none; }
  .events--panel .event-panel {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 99;
    position: sticky;
    top: 6rem;
    align-self: start;
    border-top: 2px solid var(--color-text);
    padding-top: 1.25rem;
  }
  .event-panel .event__details { display: block; padding-top: 1rem; }
}
.event-panel__title {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight, 400);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0.5rem 0 0.3rem;
}


/* ---------- People ---------- */

.people {
  max-width: 84rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 0;
}
.people__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 2.5rem 1.75rem;
}

/* ---------- People: leadership ---------- */
/* set quietly below the portraits — a roster, not a second gallery */
.leadership {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--color-line);
  max-width: 30rem;
}
.leadership__heading {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.leadership__list {
  list-style: none;
  margin: 0; padding: 0;
}
.leadership__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.leadership__name { color: var(--color-text); }
.leadership__role {
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
@media (max-width: 35.99rem) {
  .people__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}
.person__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
  background: var(--color-surface);
}
.person__name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 0.9rem;
}
.person__pronouns {
  margin: 0.15rem 0 0;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.person__role {
  margin: 0.35rem 0 0;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------- Support ---------- */

.support {
  max-width: 84rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}
.support__option {
  border: 1px solid var(--color-text);
  border-radius: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.support__heading {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  letter-spacing: var(--heading-tracking, 0.02em);
  text-transform: var(--heading-transform, uppercase);
}
.support__text { margin: 0; color: var(--color-text-muted); max-width: 30rem; flex: 1; }
.support__note {
  max-width: 84rem;
  margin: 2rem auto 0;
  padding: 0 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--color-text);
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--heading-weight, 400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.button:hover {
  background: var(--color-text);
  color: var(--color-background);
}

/* ---------- Contact ---------- */

.contact {
  max-width: 84rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 0;
}
.contact-form { max-width: 36rem; }
.contact-form__field { margin-bottom: 1.4rem; }
.contact-form__field label {
  display: block;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.45rem;
}
.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-text-muted);
  border-radius: 0;
  color: var(--color-text);
  font: inherit;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.2s;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
/* ...but a keyboard user needs more than a 1px border shift, and the rule
   above outranks the global :focus-visible ring, so restore it here */
.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form__status { margin: 1rem 0 0; color: var(--color-accent); min-height: 1.5em; }
.contact-form__status.is-error { color: var(--color-error); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}
.site-footer__inner {
  max-width: 84rem;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.site-footer p { margin: 0; }
.site-footer__brand {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.site-footer__brand > span { margin-right: 0.25rem; }
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.5rem 0;          /* keep the row's height, not the tap target's */
  color: var(--color-text-muted);
  transition: color 0.2s;
}
.site-footer__social:hover { color: var(--color-accent); }
.site-footer__credit,
.site-footer__legal {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- Pages added through the CMS ---------- */
/* A plain page: the same spine and lede as the built-in pages, with body
   copy set to the reading measure the mission text uses. */

.page-body {
  max-width: 84rem;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
}
.page-body__heading {
  max-width: 44rem;
  margin: 2.5rem 0 0.75rem;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: var(--heading-tracking, 0.02em);
  text-transform: var(--heading-transform, uppercase);
}
.page-body__heading:first-child { margin-top: 0; }
.page-body__text {
  max-width: 44rem;
  margin: 0 0 1.1rem;
  color: var(--color-text-muted);
}
.page-body__text:last-child { margin-bottom: 0; }

.documents__drive {
  max-width: 44rem;
  margin: 1.25rem 0 0;
  font-size: 0.92rem;
}