/* Layout: a printed season programme. One lit stage at the top, then wide ruled spreads of heavy serif type on paper. */
:root {
  --paper: #F5EFE3;
  --sand: #EBE1CC;
  --card: #FBF8F1;
  --ink: #14141C;
  --ink-soft: #45423B;
  --ink-mute: #6C6759;
  --rule: rgba(20, 20, 28, .16);
  --gold: #B58A2C;
  --gold-deep: #84601A;
  --ember: #D4521C;
  --cream: #F3EAD8;
  --mark: url("data:image/png;base64,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");

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --label: "Space Grotesk", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(18px, 4.4vw, 72px);
  --max: 1480px;
  --section: clamp(88px, 12vw, 190px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--cream); }

.wrap { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--sand { background: var(--sand); }
[id] { scroll-margin-top: 92px; }

/* ---------- Type ---------- */
.label {
  display: inline-flex; align-items: center; gap: 14px;
  font: 600 .76rem/1.2 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep);
}
.label::before {  /* the corner tick from the printed profile */
  content: ""; width: 42px; height: 9px; flex: none;
  border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor;
  transform: translateY(4px);
}
.label--plain::before { content: none; }
.h-mega, .h-xl, .h-lg, .h-md, .hero__title, .vision, .footer__word {
  font-family: var(--display); font-weight: 900; letter-spacing: -.035em; word-spacing: .07em; text-wrap: balance;
  font-variation-settings: "opsz" 144;
}
.h-mega { font-size: clamp(3.6rem, 15.5vw, 16.5rem); line-height: .84; letter-spacing: -.05em; }
.h-xl { font-size: clamp(2.7rem, 7.4vw, 7.6rem); line-height: .93; }
.h-lg { font-size: clamp(2.1rem, 4.6vw, 4.4rem); line-height: .98; }
.h-md { font-size: clamp(1.5rem, 2.3vw, 2.15rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; }
.h-xl em, .h-lg em, .h-mega em, .hero__title em { font-style: italic; font-weight: 500; letter-spacing: -.03em; }
.lead { font: 500 clamp(1.2rem, 1.75vw, 1.6rem)/1.38 var(--display); font-variation-settings: "opsz" 36; color: var(--ink); letter-spacing: -.01em; }
.copy { color: var(--ink-soft); max-width: 62ch; }
.copy + .copy { margin-top: 1.1em; }
.small { font-size: .9rem; color: var(--ink-mute); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 24px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--cream);
  font: 700 .8rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn--light { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.arrow { display: inline-block; width: 18px; height: 10px; flex: none; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; z-index: 50;
  top: calc(18px + env(safe-area-inset-top, 0px)); left: 50%;
  width: min(calc(100% - 36px), calc(var(--max) - 2 * var(--gutter) + 44px));
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 12px 10px 16px;
  border-radius: 20px; border: 1px solid transparent;
  color: var(--cream);
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), color .4s var(--ease), padding .5s var(--ease);
}
.nav.is-scrolled {
  color: var(--ink);
  background: rgba(245, 239, 227, .58);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border-color: rgba(20, 20, 28, .09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 14px 40px -22px rgba(20, 20, 28, .38);
}
.nav__progress {
  position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px;
  background: var(--gold); transform: scaleX(var(--progress, 0)); transform-origin: left;
  opacity: 0; transition: opacity .4s; border-radius: 2px;
}
.nav.is-scrolled .nav__progress { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand__mark {
  width: 40px; height: 40px; flex: none; background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  transition: transform .8s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-12deg); }
.brand__name { font: 700 .78rem/1.15 var(--label); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.nav__links { position: relative; display: flex; align-items: center; gap: clamp(4px, 1.4vw, 18px); }
.nav__link {
  position: relative; padding: 12px 14px; border-radius: 999px;
  font: 600 .92rem/1 var(--body); letter-spacing: -.005em; text-decoration: none;
  opacity: .82; transition: opacity .3s;
}
.nav__link:hover, .nav__link.is-active { opacity: 1; }
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__dot {
  position: absolute; bottom: 0; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); opacity: 0; transform: translateX(var(--x, 0px));
  transition: transform .6s var(--ease), opacity .3s;
}
.nav__dot.is-on { opacity: 1; }
.nav__cta { padding: 13px 20px; font-size: .72rem; border-color: currentColor; background: transparent; color: inherit; }
.nav.is-scrolled .nav__cta { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.nav__cta:hover, .nav.is-scrolled .nav__cta:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.nav__toggle {
  display: none; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px;
  border: 1.5px solid currentColor; background: transparent; cursor: pointer;
  font: 700 .72rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase;
}
.nav__toggle i { width: 16px; height: 8px; border-block: 1.5px solid currentColor; transition: transform .4s var(--ease), height .4s var(--ease); }
.nav.is-open .nav__toggle i { height: 0; border-bottom: 0; transform: rotate(180deg); }

.sheet {
  position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column; justify-content: flex-end; gap: 34px;
  padding: 120px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); color: var(--ink);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet a { display: block; text-decoration: none; }
.sheet__link { font: 900 clamp(2.6rem, 13vw, 5rem)/1.02 var(--display); letter-spacing: -.04em; padding-block: 6px; border-bottom: 1px solid var(--rule); }
.sheet__link span { display: block; transform: translateY(40px); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.sheet.is-open .sheet__link span { transform: none; opacity: 1; }

/* ---------- Hero ---------- */
.hero { padding: 10px 10px 0; }
.hero__stage {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(580px, 93svh, 1080px);
  border-radius: 26px; background: #0b0b10; color: var(--cream);
}
.hero__media { position: absolute; inset: -6% 0; z-index: -2; will-change: transform; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 8, 12, .5) 0%, rgba(8, 8, 12, 0) 24%),
    linear-gradient(0deg, rgba(8, 8, 12, .86) 0%, rgba(8, 8, 12, .34) 38%, rgba(8, 8, 12, 0) 66%);
}
.hero__content {
  position: absolute; inset: auto 0 0 0;
  padding: 0 clamp(18px, 4.2vw, 68px) clamp(92px, 11vh, 128px);
  display: grid; gap: clamp(18px, 2.6vw, 34px);
}
.hero__eyebrow { color: var(--cream); opacity: .92; }
.hero__eyebrow.label::before { border-color: var(--gold); }
.hero__title { font-size: clamp(2.9rem, 8.2vw, 9.2rem); line-height: .9; letter-spacing: -.04em; max-width: 13.5em; }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; }
.hero__sub { max-width: 34ch; font: 500 clamp(1.05rem, 1.45vw, 1.35rem)/1.42 var(--body); color: rgba(243, 234, 216, .9); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn--ghost { color: var(--cream); border-color: rgba(243, 234, 216, .55); }
.hero__actions .btn--ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

.cue {
  position: absolute; left: clamp(18px, 4.2vw, 68px); right: clamp(18px, 4.2vw, 68px); bottom: clamp(20px, 3vh, 34px);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 22px;
  font: 600 .72rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase;
}
.cue__live { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cue__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(212, 82, 28, .7); animation: pulse 2s infinite; }
.is-paused .cue__live i { animation: none; background: rgba(243, 234, 216, .5); }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(212, 82, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 82, 28, 0); } }
.cue__bar { display: flex; gap: 5px; min-width: 0; }
.cue__seg {
  position: relative; flex: var(--w) 1 0; height: 18px; padding: 0; border: 0; background: none; cursor: pointer;
}
.cue__seg::before, .cue__seg::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 2px; }
.cue__seg::before { background: rgba(243, 234, 216, .28); }
.cue__seg::after { background: var(--cream); transform: scaleX(var(--p, 0)); transform-origin: left; }
.cue__seg:hover::before { background: rgba(243, 234, 216, .5); }
.cue__now { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; }
.cue__title { display: inline-block; min-width: 23ch; text-align: right; transition: opacity .35s, transform .35s var(--ease); }
.cue__title.is-swapping { opacity: 0; transform: translateY(6px); }
.cue__btn {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid rgba(243, 234, 216, .55); background: rgba(8, 8, 12, .25); cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
}
.cue__btn:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.cue__btn svg { width: 12px; height: 12px; fill: currentColor; }
.cue__btn .ic-play { display: none; }
.is-paused .cue__btn .ic-play { display: block; }
.is-paused .cue__btn .ic-pause { display: none; }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; padding-block: clamp(26px, 3.6vw, 52px); border-bottom: 1px solid var(--rule); }
.ticker__track { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker__set { display: flex; align-items: center; flex: none; }
.ticker__item { font: 900 clamp(2.2rem, 5.6vw, 5.4rem)/1 var(--display); letter-spacing: -.04em; white-space: nowrap; font-variation-settings: "opsz" 144; }
.ticker__item:nth-child(4n + 3) { font-style: italic; font-weight: 500; }
.ticker__ring { width: clamp(16px, 2vw, 30px); aspect-ratio: 1; margin-inline: clamp(22px, 3.4vw, 54px); border: 3px solid var(--gold); border-radius: 50%; flex: none; }
@keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Intro / services ---------- */
.intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 48px); }
.intro__head { grid-column: 1 / span 7; grid-row: 1; display: grid; gap: 26px; }
.intro__text { grid-column: 9 / -1; grid-row: 1; display: grid; gap: 22px; align-self: end; padding-bottom: .6em; }
.services { margin-top: clamp(56px, 8vw, 120px); border-top: 1px solid var(--ink); }
.service {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; align-items: center; gap: 18px clamp(20px, 4vw, 64px);
  padding: clamp(26px, 3.4vw, 48px) 0; border-bottom: 1px solid var(--rule); text-decoration: none; isolation: isolate;
}
.service::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -.5); z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); border-radius: 14px; }
.service:hover::before, .service:focus-visible::before { transform: scaleY(1); }
.service__name { font: 900 clamp(2rem, 5vw, 4.8rem)/.96 var(--display); letter-spacing: -.04em; font-variation-settings: "opsz" 144; transition: color .4s, transform .55s var(--ease); }
.service__desc { color: var(--ink-soft); max-width: 46ch; transition: color .4s; }
.service__go { width: 58px; height: 58px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; transition: background .4s, border-color .4s, color .4s, transform .55s var(--ease); }
.service:hover .service__name, .service:focus-visible .service__name { color: var(--cream); transform: translateX(14px); }
.service:hover .service__desc, .service:focus-visible .service__desc { color: rgba(243, 234, 216, .78); }
.service:hover .service__go, .service:focus-visible .service__go { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateX(-14px) rotate(-45deg); }

/* ---------- Media ---------- */
.media { position: relative; overflow: hidden; border-radius: 14px; background: #0f0f15; aspect-ratio: var(--ratio, 3 / 2); max-width: 100%; }
.media__in { position: absolute; inset: -8% 0; will-change: transform; }
.media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.media--poster { background: none; border-radius: 6px; box-shadow: 0 30px 60px -34px rgba(20, 20, 28, .6); }
.media--poster .media__in { inset: 0; }
figcaption, .caption { margin-top: 12px; font: 500 .7rem/1.5 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------- Section heads ---------- */
.head { display: grid; gap: 24px; margin-bottom: clamp(48px, 7vw, 110px); }
.head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: clamp(20px, 3vw, 48px); }
.head--split > :first-child { grid-column: 1 / span 8; display: grid; gap: 24px; }
.head--split > :last-child { grid-column: 9 / -1; }

/* ---------- Productions ---------- */
.prod + .prod { margin-top: clamp(96px, 13vw, 210px); }
.prod__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 32px; padding-bottom: clamp(18px, 2.4vw, 34px); border-bottom: 1px solid var(--ink); }
.prod__meta { display: grid; gap: 6px; margin-left: auto; text-align: right; font: 600 .76rem/1.4 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: clamp(6px, 1.6vw, 26px); }
.prod__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px) clamp(20px, 3vw, 48px); margin-top: clamp(26px, 3.4vw, 52px); align-items: start; }
.prod__main { grid-column: 1 / span 7; }
.prod__body { grid-column: 8 / -1; display: grid; gap: 26px; align-content: start; }
.prod--flip .prod__main { grid-column: 6 / -1; grid-row: 1; }
.prod--flip .prod__body { grid-column: 1 / span 5; grid-row: 1; }
.prod__strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 4vw, 60px); align-items: end; }
.prod__strip > :nth-child(1) { grid-column: 1 / span 5; }
.prod__strip > :nth-child(2) { grid-column: 6 / span 4; }
.prod__strip > :nth-child(3) { grid-column: 10 / -1; }
.prod--flip .prod__strip > :nth-child(1) { grid-column: 1 / span 3; }
.prod--flip .prod__strip > :nth-child(2) { grid-column: 4 / span 6; }
.prod--flip .prod__strip > :nth-child(3) { grid-column: 10 / -1; }

.facts { display: grid; border-top: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: minmax(96px, 9.5em) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 600 .7rem/1.6 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); padding-top: 3px; }
.facts dd { font-weight: 600; line-height: 1.45; }
.facts dd span { display: block; font-weight: 400; color: var(--ink-soft); }

.credits { border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.credits summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font: 700 .76rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; }
.credits summary::-webkit-details-marker { display: none; }
.credits summary i { position: relative; width: 14px; height: 14px; flex: none; }
.credits summary i::before, .credits summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: currentColor; transition: transform .4s var(--ease); }
.credits summary i::after { transform: rotate(90deg); }
.credits[open] summary i::after { transform: rotate(0deg); }
.credits__body { padding: 4px 22px 22px; display: grid; gap: 18px; }
.credits h4 { font: 700 .7rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; font-weight: 600; font-size: .92rem; background: var(--paper); }
.roles > div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 9px 0; border-bottom: 1px dashed var(--rule); font-size: .95rem; }
.roles > div:last-child { border-bottom: 0; }
.roles dt { font: 500 .68rem/1.5 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.roles dd { font-weight: 600; text-align: right; }

/* ---------- Artists ---------- */
.roster { border-top: 1px solid var(--ink); columns: 2; column-gap: clamp(28px, 5vw, 88px); }
.roster li { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 20px; padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--rule); transition: opacity .35s, padding-left .45s var(--ease); cursor: default; }
.roster__name { font: 800 clamp(1.45rem, 2.5vw, 2.5rem)/1.05 var(--display); letter-spacing: -.03em; font-variation-settings: "opsz" 96; }
.roster__role { font: 600 .7rem/1.5 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); text-align: right; }
.roster__in { grid-column: 1 / -1; font-size: .9rem; color: var(--ink-soft); }
@media (hover: hover) {
  .roster:hover li { opacity: .34; }
  .roster li:hover { opacity: 1; padding-left: 14px; }
}
.peek { position: fixed; z-index: 30; top: 0; left: 0; width: 250px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(.86) rotate(-3deg); transition: opacity .35s var(--ease), scale .35s var(--ease); box-shadow: 0 34px 70px -30px rgba(20, 20, 28, .7); }
.peek.is-on { opacity: 1; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1) rotate(-3deg); }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.peek img.is-on { opacity: 1; }
.agency { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(56px, 8vw, 110px); }
.agency > div { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--ink); }

/* ---------- Festivals ---------- */
.fest__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px) clamp(20px, 3vw, 48px); align-items: start; }
.fest__body { grid-column: 1 / span 6; display: grid; gap: 26px; }
.fest__media { grid-column: 8 / -1; }
.honour { position: relative; padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 44px); border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 14px 14px 0; display: grid; gap: 14px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(48px, 7vw, 100px); background: rgba(243, 234, 216, .16); border-radius: 18px; overflow: hidden; }
.stat { background: var(--ink); color: var(--cream); padding: clamp(24px, 3.4vw, 52px) clamp(18px, 2.4vw, 40px); display: grid; gap: 14px; align-content: space-between; min-height: clamp(170px, 20vw, 280px); }
.stat__num { font: 900 clamp(3rem, 8vw, 8rem)/.82 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 144; }
.stat__num sup { font-size: .5em; font-weight: 700; color: var(--gold); vertical-align: top; position: relative; top: .04em; margin-left: .05em; }
.stat__label { font: 600 .7rem/1.5 var(--label); letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 234, 216, .72); }
.programme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 88px); margin-top: clamp(48px, 7vw, 100px); border-top: 1px solid var(--ink); }
.programme > div { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--rule); }
.season { margin-top: clamp(64px, 9vw, 130px); }
.season__list { margin-top: 28px; border-top: 1px solid var(--ink); }
.season__row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 4fr) minmax(0, 4fr) minmax(0, 1.8fr); align-items: baseline; gap: 6px clamp(16px, 2.4vw, 40px); padding: clamp(18px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--rule); }
.season__date { font: 600 .78rem/1.5 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.season__name { font: 800 clamp(1.4rem, 2.6vw, 2.5rem)/1.05 var(--display); letter-spacing: -.03em; font-variation-settings: "opsz" 96; }
.season__venue { color: var(--ink-soft); }
.season__work { font: 600 .72rem/1.5 var(--label); letter-spacing: .16em; text-transform: uppercase; text-align: right; }

/* ---------- About ---------- */
.vision { font-size: clamp(1.9rem, 4.9vw, 5rem); line-height: 1.06; font-weight: 500; font-style: italic; letter-spacing: -.03em; max-width: 19em; }
.vision strong { font-weight: 900; font-style: normal; }
.about__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 5vw, 80px) clamp(20px, 3vw, 48px); margin-top: clamp(56px, 8vw, 120px); align-items: start; }
.about__media { grid-column: 1 / span 5; }
.about__body { grid-column: 7 / -1; display: grid; gap: 22px; }
.members { margin-top: 10px; border-top: 1px solid var(--rule); }
.members li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); font-weight: 600; }
.members li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--gold); transform: rotate(45deg) translateY(-2px); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(64px, 9vw, 130px); }
.pillars > div { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--ink); }
.triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(64px, 9vw, 130px); }
.triad p { color: var(--ink-soft); max-width: 30ch; }
.triad .h-lg { display: block; margin-bottom: 8px; }

/* ---------- Partners & contact ---------- */
.partners { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 28px; }
.partners li { padding: 14px 22px; border: 1px solid rgba(20, 20, 28, .3); border-radius: 999px; font-weight: 700; font-size: clamp(.95rem, 1.25vw, 1.15rem); background: var(--paper); transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease); }
.partners li:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-3px); }
.contact { margin-top: clamp(72px, 10vw, 150px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px) clamp(20px, 3vw, 48px); align-items: end; }
.contact__head { grid-column: 1 / span 8; display: grid; gap: 26px; }
.contact__card { grid-column: 9 / -1; display: grid; gap: 18px; padding: clamp(24px, 2.8vw, 38px); border-radius: 18px; background: var(--ink); color: var(--cream); }
.contact__card .label { color: var(--gold); }
.contact__card p { color: rgba(243, 234, 216, .8); font-size: .98rem; }
.contact__card .contact__who { font: 800 clamp(1.7rem, 2.5vw, 2.3rem)/1.05 var(--display); letter-spacing: -.03em; color: var(--cream); }

/* ---------- Footer ---------- */
.footer { padding: clamp(56px, 7vw, 100px) 0 calc(34px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); overflow: hidden; }
.footer__word { font-size: clamp(2.5rem, 12.4vw, 13.6rem); line-height: .84; letter-spacing: -.05em; white-space: nowrap; margin-left: -.03em; }
.footer__word em { font-style: italic; font-weight: 500; color: var(--gold-deep); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 40px; margin-top: clamp(36px, 5vw, 70px); padding-top: 26px; border-top: 1px solid var(--rule); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 26px; font-weight: 600; }
.footer__links a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease); padding-bottom: 3px; }
.footer__links a:hover { background-size: 100% 1.5px; }
.footer .brand { color: var(--ink); }

/* ---------- Scroll reveal system ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translate3d(-44px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="rule"] { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal="rule"].is-in { transform: scaleX(1); }
/* The wipe lives on the inner layer: a fully clipped target would never register with the observer. */
.js [data-reveal="clip"] { opacity: 1; transform: none; background: none; }
.js [data-reveal="clip"] .media__in { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal="clip"].is-in .media__in { clip-path: inset(0 0 0 0); }
.js [data-reveal="clip"] img { transform: scale(1.16); transition: transform 1.8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal="clip"].is-in img { transform: none; }
.js [data-reveal="words"] { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .04em .2em; margin: -.06em -.04em -.2em; }
.w__i { display: inline-block; }
.js [data-reveal="words"] .w__i { transform: translate3d(0, 115%, 0) rotate(4deg); transform-origin: left bottom; transition: transform 1.05s var(--ease); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 46ms); }
.js [data-reveal="words"].is-in .w__i { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .intro__head, .intro__text, .head--split > :first-child, .head--split > :last-child,
  .prod__main, .prod__body, .prod--flip .prod__main, .prod--flip .prod__body,
  .fest__body, .fest__media, .about__media, .about__body, .contact__head, .contact__card { grid-column: 1 / -1; grid-row: auto; }
  .intro__text { padding-bottom: 0; }
  .fest__media { max-width: 520px; }
  .about__media { max-width: 560px; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .season__venue { grid-column: 2; }
  .season__work { grid-column: 2; text-align: left; }
}
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .sheet { display: flex; }
  .nav.is-open { color: var(--ink); background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .service { grid-template-columns: minmax(0, 1fr) auto; }
  .service__desc { grid-column: 1 / -1; grid-row: 2; }
  .roster { columns: 1; }
  .agency, .triad { grid-template-columns: 1fr; }
  .programme { grid-template-columns: 1fr; }
  .cue { grid-template-columns: auto 1fr; }
  .cue__bar { grid-column: 1 / -1; grid-row: 1; }
  .cue__now { justify-content: flex-end; }
  .cue__title { min-width: 0; }
  .hero__content { padding-bottom: 118px; }
  .prod__meta { text-align: left; }
}
@media (max-width: 640px) {
  .hero { padding: 6px 6px 0; }
  .hero__stage { border-radius: 20px; height: clamp(560px, 90svh, 820px); }
  .brand__name { font-size: .68rem; letter-spacing: .16em; }
  .prod__strip > *, .prod--flip .prod__strip > * { grid-column: 1 / -1 !important; }
  .prod__strip .media--poster { max-width: 240px; }
  .pillars { grid-template-columns: 1fr; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .roster li { grid-template-columns: 1fr; }
  .roster__role { text-align: left; }
  .season__row { grid-template-columns: 1fr; }
  .season__venue, .season__work { grid-column: 1; }
  .cue__title { font-size: .64rem; letter-spacing: .14em; }
  .stat { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track, .cue__live i { animation: none; }
  .js [data-reveal], .js [data-reveal] img, .js [data-reveal] .media__in, .js [data-reveal="words"] .w__i { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}
@media print {
  .js [data-reveal], .js [data-reveal] .media__in, .js [data-reveal="words"] .w__i { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .nav, .sheet, .peek { display: none !important; }
}

/* =====================================================================
   Multi-page additions: page shells, sound, gallery, contact, accounts
   ===================================================================== */
:root { --danger: #A3261B; --danger-soft: #FBECE9; --ok: #2B6A3C; --ok-soft: #E9F3EB; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Navigation on light pages, account button ---------- */
.nav--plain { color: var(--ink); }
.nav--plain .nav__cta { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.nav--plain .nav__cta:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 4px; }
.nav__cta { gap: 9px; }
.btn svg:not(.arrow) { width: 13px; height: 13px; flex: none; }
.nav__link[aria-current="page"] { opacity: 1; }
.sheet__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sheet__extra .btn { display: inline-flex; gap: 9px; }
@media (max-width: 900px) { .nav__actions { display: none; } }

/* ---------- Reel sound ---------- */
.cue__sound {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 14px; border-radius: 999px;
  border: 1.5px solid rgba(243, 234, 216, .55); background: rgba(8, 8, 12, .25); color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
}
.cue__sound:hover, .has-sound .cue__sound { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.cue__bars { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 12px; }
.cue__bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
.has-sound:not(.is-paused) .cue__bars i { animation: bars .9s ease-in-out infinite; }
.cue__bars i:nth-child(2) { animation-delay: -.3s; }
.cue__bars i:nth-child(3) { animation-delay: -.6s; }
.cue__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes bars { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.cue__now { gap: 10px; }
.cue__title { min-width: 0; margin-right: 6px; }
@media (max-width: 640px) {
  .cue { gap: 12px 10px; }
  .cue__word { display: none; }
  .cue__now { gap: 8px; min-width: 0; }
  .cue__title { margin-right: 2px; overflow: hidden; text-overflow: ellipsis; }
  .cue__sound { padding: 0 12px; }
  .cue__sound > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) { .cue__bars i { animation: none !important; } }

/* ---------- Entrance: shown only when the browser will not start sound by itself ---------- */
.gated { overflow: hidden; }
/* While the entrance is up, the stage behind shows only the moving picture: its own words wait until the visitor is in. */
.gated .nav, .gated .hero__content, .gated .cue { visibility: hidden; }
.gate {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--cream);
  background: linear-gradient(180deg, rgba(8, 8, 12, .72) 0%, rgba(8, 8, 12, .6) 50%, rgba(8, 8, 12, .98) 90%);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .6s var(--ease), transform 1s cubic-bezier(.7, 0, .2, 1);
}
.gate.is-on { opacity: 1; }
.gate.is-leaving { opacity: 1; transform: translate3d(0, -100%, 0); }
.gate__in { display: grid; gap: 22px; justify-items: center; max-width: 760px; }
.gate__mark { width: 72px; height: 72px; }
.gate__label { color: var(--gold); letter-spacing: .3em; }
.gate__title { font: 900 clamp(2.8rem, 9vw, 7.4rem)/.9 var(--display); letter-spacing: -.045em; word-spacing: .07em; font-variation-settings: "opsz" 144; text-wrap: balance; }
.gate__title em { font-style: italic; font-weight: 500; }
.gate__actions { display: grid; gap: 20px; justify-items: center; margin-top: 10px; }
.gate__enter { padding: 20px 30px; gap: 14px; font-size: .86rem; }
.gate__enter .cue__bars i { animation: bars .9s ease-in-out infinite; }
.gate .linkbtn { color: rgba(243, 234, 216, .72); }
.gate .linkbtn:hover { color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .gate { transition: none; } }

/* ---------- Films in the bar: Theatre, Dance and Cinema open out beneath it when the pointer arrives ---------- */
.nav__end { display: flex; align-items: center; gap: 6px; }
.nav__group { position: relative; display: flex; }
.nav__group > .nav__link { padding-right: 28px; }
.nav__group::after {   /* a small arrowhead: there is more under this one */
  content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; margin-top: -5px; pointer-events: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .75;
  transform: rotate(45deg); transition: transform .4s var(--ease), margin-top .4s var(--ease);
}
.nav__group:hover::after, .nav__group:focus-within::after { transform: rotate(225deg); margin-top: -1px; }
.nav__menu { position: absolute; top: 100%; left: 50%; display: flex; gap: 8px; padding-top: 16px; translate: -50% 0; visibility: hidden; pointer-events: none; transition: visibility 0s .45s; }
.nav__menu a {
  padding: 14px 20px; border-radius: 999px; border: 1px solid rgba(243, 234, 216, .3); background: var(--ink); color: var(--cream);
  box-shadow: 0 18px 36px -18px rgba(20, 20, 28, .75);
  font: 700 .74rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  opacity: 0; transition: transform .55s var(--ease) calc(var(--i) * 55ms), opacity .3s calc(var(--i) * 55ms), background .3s, color .3s, border-color .3s;
}
/* closed, the three sit together under the word; opened, they spread to left, middle and right */
.nav__menu a:nth-child(1) { transform: translate(105%, -16px) scale(.7); }
.nav__menu a:nth-child(2) { transform: translate(0, -16px) scale(.7); }
.nav__menu a:nth-child(3) { transform: translate(-105%, -16px) scale(.7); }
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nav__group:hover .nav__menu a, .nav__group:focus-within .nav__menu a { transform: none; opacity: 1; }
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.sheet__sub { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 12px 0 14px; border-bottom: 1px solid var(--rule); }
.sheet .sheet__sub a { font: 700 .76rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Search: the magnifying glass in the bar opens a box that looks through every page ---------- */
.nav__search { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .86; transition: background .3s, opacity .3s, transform .35s var(--ease); }
.nav__search:hover { opacity: 1; background: rgba(128, 128, 128, .2); transform: scale(1.06); }
.nav__search svg { width: 19px; height: 19px; }
@media (max-width: 480px) {   /* on a phone the menu button shrinks to its two lines, so the name, the glass and the button all fit */
  .nav__end { gap: 2px; }
  .nav__toggle { padding: 15px 14px; }
  .nav__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 345px) { .brand__name { display: none; } }   /* the very narrowest phones keep the mark alone */
.searching { overflow: hidden; }
.search {
  position: fixed; inset: 0; z-index: 80; display: grid; align-items: start; justify-items: center; padding: clamp(14px, 9vh, 104px) 16px 16px;
  background: rgba(12, 12, 18, .56); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.search.is-on { opacity: 1; }
.search__panel {
  width: min(100%, 780px); max-height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden;
  border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 90px -40px rgba(8, 8, 12, .85);
  transform: translateY(-14px) scale(.98); transition: transform .45s var(--ease);
}
.search.is-on .search__panel { transform: none; }
.search__bar { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--rule); transition: box-shadow .3s; }
.search__bar:focus-within { box-shadow: inset 0 -2px 0 var(--gold); }
.search__bar svg { width: 22px; height: 22px; flex: none; color: var(--gold-deep); }
.search__bar input { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: none; background: none; color: var(--ink); font: 600 clamp(1.1rem, 2.2vw, 1.5rem)/1.3 var(--display); letter-spacing: -.01em; }
.search__bar input::placeholder { color: var(--ink-mute); font-weight: 400; }
.search__bar input::-webkit-search-cancel-button { display: none; }
.search__close { padding: 11px 15px; border: 1.5px solid rgba(20, 20, 28, .25); border-radius: 999px; background: none; cursor: pointer; font: 700 .68rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.search__close:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.search__hint { padding: 16px 24px; color: var(--ink-mute); font-size: .93rem; }
.search__results { overflow-y: auto; overscroll-behavior: contain; }
.search__results li { border-top: 1px solid var(--rule); }
.search__results a { display: grid; gap: 5px; padding: 16px 24px; text-decoration: none; transition: background .2s; }
.search__results a:hover, .search__results a:focus-visible { background: var(--sand); outline: none; border-radius: 0; }
.search__where { font: 600 .68rem/1.3 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.search__title { font: 800 1.3rem/1.15 var(--display); letter-spacing: -.02em; }
.search__snip { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }
.search mark { padding: 0 1px; border-radius: 3px; background: rgba(181, 138, 44, .32); color: inherit; }
@media (prefers-reduced-motion: reduce) { .search, .search__panel, .nav__menu a { transition: none; } }

/* ---------- Films: a darkened room with three screens ---------- */
.films { background: #0d0d13; color: var(--cream); }
.films .label { color: var(--gold); }
.films .copy { color: rgba(243, 234, 216, .78); }
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.screen {
  display: grid; align-content: space-between; gap: 40px; min-height: clamp(300px, 34vw, 500px); padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid rgba(243, 234, 216, .16); border-radius: 22px; scroll-margin-top: 120px;
  background: radial-gradient(120% 72% at 50% -14%, rgba(243, 234, 216, .2), rgba(243, 234, 216, 0) 62%), #15151e;   /* the projector's light falling from above */
  transition: border-color .4s, box-shadow .5s, background-color .4s;
}
.screen:hover { border-color: rgba(243, 234, 216, .42); }
.screen:target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 30px 80px -42px rgba(181, 138, 44, .8); }   /* the one chosen from the bar */
.screen__no { font: 600 .74rem/1 var(--label); letter-spacing: .2em; color: var(--gold); }
.screen__name { font: 900 clamp(2.6rem, 5.4vw, 5.6rem)/.9 var(--display); letter-spacing: -.045em; font-variation-settings: "opsz" 144; }
.screen__what { margin-top: 14px; color: rgba(243, 234, 216, .74); }
.screen__state { display: inline-flex; align-items: center; gap: 10px; font: 600 .72rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 234, 216, .86); }
.screen__state i { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.films__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; margin-top: clamp(40px, 6vw, 84px); padding-top: 26px; border-top: 1px solid rgba(243, 234, 216, .2); }
.films__note .lead { color: var(--cream); }
@media (max-width: 900px) { .screens { grid-template-columns: 1fr; } .screen { min-height: 230px; } }

/* Film cards inside a screen, and the page of one film */
.filmcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.filmcards:empty { display: none; }
.filmcard { display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--cream); }
.filmcard__poster { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; background: #23232f; }
.filmcard__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.filmcard:hover .filmcard__poster img { transform: scale(1.05); }
.filmcard__poster b { font: 900 4rem/1 var(--display); color: rgba(243, 234, 216, .3); }
.filmcard__price { position: absolute; left: 8px; bottom: 8px; padding: 6px 10px; border-radius: 999px; background: var(--cream); color: var(--ink); font: 700 .66rem/1 var(--label); letter-spacing: .12em; font-style: normal; text-transform: uppercase; }
.filmcard__title { font: 800 1.15rem/1.15 var(--display); letter-spacing: -.02em; }
.filmcard__meta { font-size: .82rem; line-height: 1.4; color: rgba(243, 234, 216, .7); }
.filmpage { min-height: 100svh; }
.filmpage__stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(14px, 2vw, 26px); background: #000; }
.filmpage__stage video, .filmpage__stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
.filmpage__stage video { object-fit: contain; background: #000; }
.filmpage__stage img { object-fit: cover; filter: brightness(.5); }
.filmpage__stage b { font: 900 clamp(5rem, 16vw, 14rem)/1 var(--display); color: rgba(243, 234, 216, .16); }
.filmpage__lock { position: relative; padding: 12px 18px; border: 1px solid rgba(243, 234, 216, .5); border-radius: 999px; background: rgba(8, 8, 12, .5); font: 700 .74rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; }
.filmpage__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px) clamp(20px, 3vw, 48px); margin-top: clamp(28px, 4vw, 56px); align-items: start; }
.filmpage__words { grid-column: 1 / span 7; display: grid; gap: 20px; }
.filmpage__act { grid-column: 9 / -1; display: grid; gap: 16px; justify-items: start; padding: clamp(20px, 2.4vw, 32px); border: 1px solid rgba(243, 234, 216, .18); border-radius: 20px; background: #15151e; }
.filmpage__act > div { display: grid; gap: 14px; justify-items: start; }
.filmpage__act > div:empty { display: none; }
.filmpage__act .small { color: rgba(243, 234, 216, .72); }
.filmpage__act .more { color: var(--cream); }
.filmpage__price { font: 900 clamp(2rem, 3.4vw, 3rem)/1 var(--display); letter-spacing: -.03em; }
.filmpage__facts { font: 600 .78rem/1.5 var(--label); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 234, 216, .75); }
.filmpage__about { display: grid; gap: 1em; }
.films .btn[disabled] { opacity: .45; }

/* ---------- Members: tick boxes, lists of tickets and films, sending a film, the artists, paying ---------- */
.tick { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.tick input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.tick b { color: var(--ink); }
.rowlist { display: grid; border-top: 1px solid var(--rule); }
.rowlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rowlist li > div:first-child { display: grid; gap: 3px; min-width: 0; }
.rowlist b { font: 800 1.15rem/1.2 var(--display); letter-spacing: -.02em; }
.rowlist__acts { display: flex; gap: 8px; }
.rowlist__none { color: var(--ink-mute); }
.field input[type="file"] { padding: 12px; font-size: .9rem; }
.progress { height: 8px; border-radius: 999px; background: rgba(20, 20, 28, .12); overflow: hidden; }
.progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gold); transition: width .3s linear; }
.artistcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 28px; }
.artistcard { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 2.8vw, 40px); border: 1.5px solid var(--ink); border-radius: 22px; background: var(--card); }
.artistcard .more { justify-self: start; }
.artistcard__ask { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--rule); gap: 12px; justify-items: start; }
.artistcard__ask textarea { width: 100%; min-height: 84px; padding: 13px 14px; border: 1.5px solid rgba(20, 20, 28, .28); border-radius: 12px; background: var(--paper); font: 500 .98rem/1.4 var(--body); color: var(--ink); resize: vertical; }
.artistcard__ask textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(181, 138, 44, .3); }
.paypage__amount { font: 900 clamp(2.6rem, 6vw, 4.6rem)/1 var(--display); letter-spacing: -.04em; }
@media (max-width: 1080px) { .filmpage__words, .filmpage__act { grid-column: 1 / -1; } }
@media (max-width: 640px) { .artistcards { grid-template-columns: 1fr; } .filmcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- The bar folds into the menu once its links, the name and the buttons no longer fit side by side ---------- */
.nav__link, .nav__cta { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav__links, .nav__actions { display: none; }
  .nav__toggle { display: inline-flex; }
  .sheet { display: flex; }
  .nav.is-open { color: var(--ink); background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Word globe: the "Who we are" sentence on a turning ball ---------- */
.globe {
  position: relative; width: min(100%, 640px); aspect-ratio: 1; cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  opacity: 0; transform: scale(.9); transition: opacity 1.2s var(--ease), transform 1.6s var(--ease);
}
.globe.is-live { opacity: 1; transform: none; }
.globe:active { cursor: grabbing; }
.globe__float { position: absolute; inset: 0; pointer-events: none; animation: globe-bob 6.5s ease-in-out infinite; }
.globe__body {   /* the body of the ball: a pale glass sphere, lit from the upper left */
  position: absolute; inset: 7%; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 50% 50%, rgba(235, 225, 204, .22) 0%, rgba(235, 225, 204, .5) 70%, rgba(132, 96, 26, .17) 100%);
  box-shadow: inset -22px -30px 70px rgba(20, 20, 28, .09), inset 12px 16px 44px rgba(255, 255, 255, .55);
}
.globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe__shadow {   /* the ball floats: its shadow tightens and fades as it rises */
  position: absolute; left: 20%; right: 20%; bottom: -3%; height: 7%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(20, 20, 28, .3), rgba(20, 20, 28, 0) 70%); filter: blur(8px);
  animation: globe-shadow 6.5s ease-in-out infinite;
}
@keyframes globe-bob { 0%, 100% { transform: translate3d(0, 1.8%, 0); } 50% { transform: translate3d(0, -2.6%, 0); } }
@keyframes globe-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.84); opacity: .58; } }
@media (prefers-reduced-motion: reduce) { .globe__float, .globe__shadow { animation: none; } }
.globe__hint { position: absolute; right: 3%; top: 5%; font: 600 .68rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); pointer-events: none; }
.intro__grid:has(.globe.is-live) .intro__text { align-self: center; padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .globe { transition: none; } }

/* ---------- Inner pages ---------- */
.inner main > .section:first-child { padding-top: clamp(150px, 15vw, 236px); }
.band { margin-bottom: clamp(48px, 7vw, 110px); }
.band + .roster { margin-top: 0; }
.more { display: inline-flex; align-items: center; gap: 12px; font: 700 .8rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; }
.more .arrow { transition: transform .35s var(--ease); }
.more:hover .arrow { transform: translateX(6px); }

/* ---------- Gallery (The Quarry) ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 34vw, 560px); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(28px, 4vw, 60px); }
.gallery .media { aspect-ratio: auto; height: 100%; }
.gallery__a { grid-column: 1 / span 4; } .gallery__b { grid-column: 5 / -1; }
.gallery__c { grid-column: 1 / span 8; } .gallery__d { grid-column: 9 / -1; }
.gallery__e { grid-column: 1 / span 6; } .gallery__f { grid-column: 7 / -1; }
@media (max-width: 640px) {
  .gallery { grid-auto-rows: auto; }
  .gallery .media { grid-column: 1 / -1; aspect-ratio: var(--ratio); height: auto; }
}

/* ---------- Home: production cards, festival feature, doors ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 48px); }
.card { display: grid; gap: 20px; align-content: start; text-decoration: none; }
.card .media img { transition: transform 1.2s var(--ease); }
.card:hover .media img { transform: scale(1.045); }
.card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.card__title { font: 900 clamp(2.4rem, 6vw, 5.6rem)/.9 var(--display); letter-spacing: -.045em; font-variation-settings: "opsz" 144; }
.card__meta { font: 600 .74rem/1.5 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.card .service__go { flex: none; }
.card:hover .service__go { background: var(--ink); color: var(--cream); transform: rotate(-45deg); }
.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: end; padding: clamp(28px, 5vw, 76px); border-radius: 24px; background: var(--ink); color: var(--cream); }
.feature > :first-child { grid-column: 1 / span 7; display: grid; gap: 22px; }
.feature > :last-child { grid-column: 9 / -1; display: grid; gap: 20px; justify-items: start; }
.feature .label { color: var(--gold); }
.feature p { color: rgba(243, 234, 216, .8); }
.feature .btn { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.feature .btn:hover { background: var(--gold); border-color: var(--gold); }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.door { position: relative; display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3.2vw, 48px); border: 1.5px solid var(--ink); border-radius: 22px; background: var(--card); text-decoration: none; transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease); }
.door:hover { background: var(--ink); color: var(--cream); transform: translateY(-4px); }
.door:hover .copy { color: rgba(243, 234, 216, .8); }
.door:hover .label { color: var(--gold); }
.door .copy { transition: color .45s; }
.door__go { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font: 700 .78rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; }
.door:hover .arrow { transform: translateX(6px); }
.door .arrow { transition: transform .35s var(--ease); }

/* ---------- Closing call + footer with contact details ---------- */
.closing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px) clamp(20px, 3vw, 48px); align-items: end; }
.closing > :first-child { grid-column: 1 / span 8; display: grid; gap: 24px; }
.closing > :last-child { grid-column: 9 / -1; display: grid; gap: 16px; justify-items: start; }
.mail { font: 800 clamp(1.15rem, 1.7vw, 1.5rem)/1.2 var(--display); letter-spacing: -.02em; text-decoration: none; overflow-wrap: anywhere; user-select: all; }
.mail:hover { color: var(--gold-deep); }
.footer__cols { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); margin-top: clamp(36px, 5vw, 70px); padding-top: 30px; border-top: 1px solid var(--rule); }
.footer__cols h2 { font: 600 .72rem/1.2 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; }
.footer__cols address { font-style: normal; color: var(--ink-soft); line-height: 1.6; }
.footer__cols ul { display: grid; gap: 8px; font-weight: 600; }
.footer__cols a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease); padding-bottom: 2px; }
.footer__cols a:hover { background-size: 100% 1.5px; }
.linkbtn { border: 0; background: none; padding: 0; cursor: pointer; font: 600 .72rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 4px; }
.linkbtn:hover { color: var(--ink); }
.social { display: flex; gap: 10px; }
.social a { width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: none; padding: 0; transition: background .3s, color .3s, transform .35s var(--ease); }
.social a:hover { background: var(--ink); color: var(--cream); transform: translateY(-3px); background-size: 0; }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 40px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); }

/* ---------- Contact page ---------- */
.reach { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 5vw, 80px) clamp(20px, 3vw, 48px); align-items: start; }
.reach__main { grid-column: 1 / span 7; display: grid; gap: clamp(28px, 4vw, 52px); }
.reach__side { grid-column: 9 / -1; }
.reach__item { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--ink); }
.bigmail { font: 900 clamp(1.5rem, 4.2vw, 4rem)/1 var(--display); letter-spacing: -.04em; font-variation-settings: "opsz" 144; text-decoration: none; overflow-wrap: anywhere; user-select: all; }
.bigmail:hover { color: var(--gold-deep); }
.reach address { font: 500 clamp(1.15rem, 1.6vw, 1.45rem)/1.45 var(--display); font-style: normal; }
.reach__socials { display: grid; gap: 0; }
.reach__socials a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font: 800 clamp(1.3rem, 2vw, 1.9rem)/1 var(--display); letter-spacing: -.03em; transition: padding-left .4s var(--ease), color .3s; }
.reach__socials a:hover { padding-left: 12px; color: var(--gold-deep); }
.reach__socials span { font: 600 .72rem/1 var(--label); letter-spacing: .14em; color: var(--ink-mute); }

/* ---------- Accounts: sign in, profile, admin ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100svh; }
.auth__side { position: relative; isolation: isolate; overflow: hidden; margin: 10px; border-radius: 26px; background: #0b0b10; color: var(--cream); display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: clamp(24px, 3.4vw, 52px); min-height: 420px; }
.auth__side img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.auth__side::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 8, 12, .88), rgba(8, 8, 12, .1) 62%); }
.auth__side .label { color: var(--cream); }
.auth__side .label::before { border-color: var(--gold); }
.auth__main { display: grid; gap: 28px; align-content: start; padding: clamp(118px, 12vw, 168px) var(--gutter) 80px; max-width: 760px; width: 100%; }
.seg { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 5px; border: 1.5px solid var(--ink); border-radius: 999px; justify-self: start; }
.seg button { padding: 13px 20px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font: 700 .74rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; transition: background .3s, color .3s; }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--rule); }
.tabs button { padding: 0 0 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font: 800 clamp(1.3rem, 2vw, 1.7rem)/1 var(--display); letter-spacing: -.03em; color: var(--ink-mute); transition: color .3s, border-color .3s; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; align-content: start; }
.field label { font: 600 .72rem/1.3 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea { width: 100%; padding: 15px 16px; border: 1.5px solid rgba(20, 20, 28, .28); border-radius: 12px; background: var(--card); color: var(--ink); font: 500 1rem/1.4 var(--body); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 124px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(181, 138, 44, .3); }
.field small { color: var(--ink-mute); font-size: .84rem; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--sm { padding: 11px 16px; font-size: .68rem; }
.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.notice { padding: 15px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); font-size: .95rem; line-height: 1.5; }
.notice--error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.notice--ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.panel { display: grid; gap: 22px; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--rule); border-radius: 20px; background: var(--card); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: 18px; overflow: hidden; background: rgba(243, 234, 216, .16); }
.kpis .stat { min-height: 0; }
.kpis .stat__num { font-size: clamp(2.6rem, 6vw, 5.4rem); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.toolbar .field { min-width: min(100%, 300px); }
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 16px; background: var(--card); }
.table { width: 100%; min-width: 760px; border-collapse: collapse; }
.table th { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--ink); font: 600 .68rem/1.3 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.table td { padding: 16px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: .95rem; overflow-wrap: anywhere; }
.table tr:last-child td { border-bottom: 0; }
.table .who { font: 800 1.15rem/1.15 var(--display); letter-spacing: -.02em; }
.table .muted { color: var(--ink-mute); font-size: .86rem; }
.table .acts { white-space: nowrap; text-align: right; }
.table .acts .btn + .btn { margin-left: 6px; }
.empty { padding: 34px 18px; text-align: center; color: var(--ink-mute); }
.dl { display: grid; border-top: 1px solid var(--rule); }
.dl > div { display: grid; grid-template-columns: minmax(110px, 11em) minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.dl dt { font: 600 .7rem/1.6 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); padding-top: 3px; }
.dl dd { font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }

/* ---------- Floating headlines: every large headline drifts up and down a few pixels, as the word ball does ----------
   It moves with "translate", which is separate from "transform", so the entrance and hover movements still work.
   The sizes run at slightly different speeds so the headlines on a page never rise and fall in step. */
.hero__title, .h-mega, .h-xl, .h-lg, .vision, .gate__title, .card__title, .viewer__title, .screen__name { animation: headline-bob 6.5s ease-in-out infinite; }
.h-mega, .card__title, .viewer__title { animation-duration: 7.6s; animation-delay: -2.4s; }
.h-lg, .vision, .screen__name { animation-duration: 5.8s; animation-delay: -1.7s; }
@keyframes headline-bob { 0%, 100% { translate: 0 5px; } 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) {
  .hero__title, .h-mega, .h-xl, .h-lg, .vision, .gate__title, .card__title, .viewer__title, .screen__name { animation: none; }
}

/* ---------- Contact form ---------- */
.reach__side { display: grid; gap: clamp(28px, 4vw, 52px); }
.reach__side .reach__socials a { flex-wrap: wrap; }
.req { color: var(--danger); margin-left: 2px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* a field people never see: only a robot fills it in */
.field textarea#ct-message { min-height: 190px; }
.notice a { font-weight: 700; }
.table .msg { white-space: pre-line; min-width: 260px; }

/* ---------- Over X Theatre Company ---------- */
.ox__mark { width: clamp(64px, 7vw, 108px); height: auto; justify-self: start; }
.ox__intro { display: grid; gap: 22px; }
.ox__say { font: italic 500 clamp(1.3rem, 2vw, 1.85rem)/1.28 var(--display); letter-spacing: -.02em; padding-left: 18px; border-left: 3px solid var(--ember); }
.duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px) clamp(20px, 3vw, 48px); align-items: start; }
.duo > :first-child { grid-column: 1 / span 5; display: grid; gap: 24px; }
.duo > :last-child { grid-column: 7 / -1; }
.five { border-top: 1px solid var(--ink); }
.five li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: baseline; gap: 12px; padding: clamp(14px, 1.8vw, 24px) 0; border-bottom: 1px solid rgba(20, 20, 28, .22); }
.five span { font: 600 .74rem/1 var(--label); letter-spacing: .2em; color: var(--gold-deep); }
.five b { font: 900 clamp(1.6rem, 3.6vw, 3.5rem)/1 var(--display); letter-spacing: -.04em; font-variation-settings: "opsz" 144; }
.ox__mission { display: grid; gap: 20px; }
.aims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px) clamp(20px, 3vw, 48px); margin-top: clamp(56px, 8vw, 110px); }
.aims > div { display: grid; gap: 18px; align-content: start; padding-top: 22px; border-top: 1px solid var(--ink); }
.aims li { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.aims li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--gold); transform: rotate(45deg) translateY(-2px); }

/* The film: a still from the performance that becomes the player when pressed */
.watch { display: grid; gap: clamp(20px, 2.8vw, 40px); }
.viewer { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border-radius: clamp(16px, 2.2vw, 30px); background: #0b0b10; color: var(--cream); }
.viewer > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transition: transform 1.6s var(--ease); }
.viewer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 8, 12, .9), rgba(8, 8, 12, .16) 60%); }
.viewer:hover > img { transform: scale(1.035); }
.viewer__text { position: absolute; left: 0; bottom: 0; display: grid; gap: clamp(8px, 1.2vw, 16px); padding: clamp(16px, 3.2vw, 52px); pointer-events: none; }
.viewer__text .label { color: var(--cream); }
.viewer__text .label::before { border-color: var(--gold); }
.viewer__title { font: 900 clamp(2rem, 8.6vw, 8.6rem)/.86 var(--display); letter-spacing: -.05em; font-variation-settings: "opsz" 144; }
.viewer__meta { font: 600 .76rem/1.4 var(--label); letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 234, 216, .78); }
.viewer__play { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; }
.viewer__disc { position: relative; display: grid; place-items: center; width: clamp(68px, 9vw, 136px); aspect-ratio: 1; border-radius: 50%; background: var(--cream); color: var(--ink); transition: transform .5s var(--ease), background .3s; }
.viewer__disc svg { width: 30%; margin-left: 7%; fill: currentColor; }
.viewer__disc::before, .viewer__disc::after {   /* two rings that swell outward and fade, one after the other */
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--cream);
  animation: viewer-pulse 2.6s cubic-bezier(.2, .7, .1, 1) infinite;
}
.viewer__disc::after { animation-delay: 1.3s; }
.viewer__play:hover .viewer__disc, .viewer__play:focus-visible .viewer__disc { transform: scale(1.08); background: var(--gold); }
@keyframes viewer-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
.viewer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer.is-playing > :not(iframe) { display: none; }
.viewer.is-playing::after { content: none; }
.watch__under { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px clamp(20px, 3vw, 48px); align-items: start; }
.watch__under .lead { grid-column: 1 / span 7; }
.watch__links { grid-column: 9 / -1; display: grid; gap: 16px; justify-items: start; }
@media (prefers-reduced-motion: reduce) { .viewer__disc::before, .viewer__disc::after { animation: none; opacity: 0; } }

@media (max-width: 1080px) {
  .feature > :first-child, .feature > :last-child, .closing > :first-child, .closing > :last-child,
  .reach__main, .reach__side, .duo > :first-child, .duo > :last-child, .watch__under .lead, .watch__links { grid-column: 1 / -1; }
  .reach__side { max-width: 560px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: 1fr; }
  .auth__side { min-height: 300px; order: 2; }
  .auth__main { max-width: none; }
}
@media (max-width: 640px) {
  .cards, .doors, .form__row, .kpis, .aims { grid-template-columns: 1fr; }
  .viewer__text .label, .viewer__meta { display: none; }
  .five li { grid-template-columns: 2.4em minmax(0, 1fr); }
  .footer__cols { grid-template-columns: 1fr; }
  .dl > div { grid-template-columns: 1fr; gap: 2px; }
  .tabs { gap: 20px; }
}

/* ---------- Ankhi, the website guide (guide.js) ---------- */
.guide { --g-gold: #D8B05A; --g-ink: #14141C; position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70; display: grid; justify-items: end; gap: 12px; pointer-events: none; transition: transform .35s var(--ease); }
.guide > * { pointer-events: auto; }
.guide:not(.is-open) { transform: translateY(calc(var(--lift, 0px) * -1)); }
.gated .guide, .searching .guide, #sheet.is-open ~ .guide { visibility: hidden; }
.ankhi { display: block; width: 100%; height: 100%; overflow: visible; }
/* the Eye of Horus in neon: gold tubes with a white-hot core, a turquoise pupil; it switches on with a flicker,
   hums with the odd stutter, and glances about */
.ankhi { --neon: #F8BB4C; --neon-pupil: #3EE6DE; animation: neon-on 1.4s steps(1, end) both, neon-hum 9s 2s infinite; }
.ankhi .eye__tube { fill: none; stroke: var(--neon); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ankhi .eye__pupil { fill: var(--neon-pupil); }
.ankhi .eye__core path { fill: none; stroke: #FFF3D2; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.ankhi .eye__spark { fill: #E9FFFD; }
.ankhi .eye__pupil, .ankhi .eye__spark { animation: neon-glance 7s ease-in-out infinite; }
@keyframes neon-on { 0% { opacity: 0; } 12% { opacity: .8; } 18% { opacity: .1; } 30% { opacity: 1; } 38% { opacity: .35; } 46%, 100% { opacity: 1; } }
@keyframes neon-hum { 0%, 93%, 100% { opacity: 1; } 94% { opacity: .55; } 95% { opacity: 1; } 96.5% { opacity: .75; } 97.5% { opacity: 1; } }
@keyframes neon-glance { 0%, 30%, 100% { translate: 0 0; } 38%, 52% { translate: -2.2px 0; } 60%, 74% { translate: 2px .4px; } 82% { translate: 0 0; } }
@keyframes ankhi-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

.guide__launch {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 32% 26%, #2a2a36, var(--g-ink) 70%); color: var(--cream);
  box-shadow: 0 0 0 1.5px rgba(216, 176, 90, .55), 0 18px 40px -14px rgba(8, 8, 12, .75); transition: transform .4s var(--ease), box-shadow .4s;
}
.guide__launch:hover { transform: scale(1.07); box-shadow: 0 0 0 2px var(--g-gold), 0 22px 46px -14px rgba(8, 8, 12, .8); }
.guide__launch:hover .ankhi { filter: brightness(1.3) saturate(1.15); }
.guide__launch:focus-visible { outline: 3px solid var(--g-gold); outline-offset: 4px; }
.guide__launch .guide__face { width: 40px; height: 40px; animation: ankhi-float 3.6s ease-in-out infinite; transition: opacity .3s, transform .4s var(--ease); }
.guide__shut { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .3s, transform .4s var(--ease); }
.guide__shut svg { width: 22px; height: 22px; }
.guide.is-open .guide__launch .guide__face { opacity: 0; transform: scale(.5); }
.guide.is-open .guide__shut { opacity: 1; transform: none; }
.guide__launch i { position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--g-gold); opacity: 0; animation: guide-ring 3.4s ease-out 1.5s 3; pointer-events: none; }
.guide.is-open .guide__launch i { display: none; }
@keyframes guide-ring { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }

.guide__hello {
  position: relative; max-width: 270px; padding: 15px 40px 15px 17px; border-radius: 18px 18px 6px 18px; cursor: pointer;
  background: var(--paper); color: var(--ink); font-size: .93rem; line-height: 1.45; box-shadow: 0 0 0 1px var(--rule), 0 22px 44px -22px rgba(8, 8, 12, .6);
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right; transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.guide__hello.is-in { opacity: 1; transform: none; }
.guide__hello b { display: block; margin-bottom: 2px; font: 800 1.02rem/1.25 var(--display); }
.guide__hello-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-mute); cursor: pointer; }
.guide__hello-x:hover { background: var(--sand); color: var(--ink); }
.guide__hello-x svg { width: 14px; height: 14px; }

.guide__panel {
  width: min(390px, calc(100vw - 32px)); height: min(640px, calc(100svh - 112px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
  border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px rgba(20, 20, 28, .08), 0 40px 90px -36px rgba(8, 8, 12, .8);
  opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right; transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.guide__panel.is-in { opacity: 1; transform: none; }
.guide__head {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 20px 14px 22px 20px; color: var(--cream);
  background: radial-gradient(120% 140% at 0% 0%, rgba(216, 176, 90, .34), transparent 55%), linear-gradient(160deg, #1d1d28, var(--g-ink));
}
.guide__head::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--g-gold), transparent); opacity: .6; }
.guide__head .guide__face { width: 50px; height: 50px; padding: 5px; border-radius: 50%; background: rgba(243, 234, 216, .07); box-shadow: inset 0 0 0 1px rgba(216, 176, 90, .4); }
.guide__panel.is-in .guide__head .ankhi { animation: neon-on 1.2s steps(1, end) both, neon-hum 9s 2s infinite; }
.guide__kicker { margin: 0 0 4px; font: 600 .64rem/1.2 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--g-gold); }
.guide__title { margin: 0; font: 800 1.42rem/1.1 var(--display); letter-spacing: -.02em; }
.guide__x { align-self: start; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(243, 234, 216, .08); color: var(--cream); cursor: pointer; transition: background .25s; }
.guide__x:hover { background: rgba(243, 234, 216, .18); }
.guide__x svg { width: 16px; height: 16px; }
.guide__body { position: relative; overflow: hidden; display: grid; }
.guide__view { overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 20px; display: grid; align-content: start; gap: 12px; }
.guide__view[hidden] { display: none; }
.guide__label { margin: 6px 2px 0; font: 600 .66rem/1.3 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }

.guide__card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 16px 18px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 10px 24px -18px rgba(8, 8, 12, .5); transition: transform .3s var(--ease), box-shadow .3s;
}
.guide__card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--gold), 0 16px 30px -18px rgba(8, 8, 12, .5); }
.guide__card b { display: block; font: 800 1.05rem/1.2 var(--display); }
.guide__card span span { display: block; margin-top: 3px; color: var(--ink-mute); font-size: .86rem; line-height: 1.4; }
.guide__card > svg { width: 20px; height: 20px; flex: none; color: var(--gold-deep); }
.guide__find, .guide__ask { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 16px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); transition: box-shadow .25s; }
.guide__find:focus-within, .guide__ask:focus-within { box-shadow: 0 0 0 2px var(--gold); }
.guide__find input, .guide__ask input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: none; color: var(--ink); font: 500 .95rem/1.3 var(--body); }
.guide__find input::-webkit-search-cancel-button { display: none; }
.guide__find button, .guide__ask button { display: grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--cream); cursor: pointer; transition: background .25s, transform .3s var(--ease); }
.guide__find button:hover, .guide__ask button:hover { background: var(--gold-deep); transform: scale(1.06); }
.guide__find svg, .guide__ask svg { width: 17px; height: 17px; }
.guide__topics { display: grid; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; }
.guide__topics li + li { border-top: 1px solid var(--rule); }
.guide__topics button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 18px; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: 600 .95rem/1.3 var(--body); transition: background .2s, padding .3s var(--ease); }
.guide__topics button:hover, .guide__topics button:focus-visible { background: var(--sand); padding-left: 22px; outline: none; }
.guide__topics svg { width: 16px; height: 16px; flex: none; color: var(--gold-deep); }

.guide__view--chat { grid-template-rows: minmax(0, 1fr) auto; padding: 0; gap: 0; overflow: hidden; }
.guide__log { overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 14px; padding: 18px 16px; }
.guide__view--chat .guide__ask { margin: 0 14px 14px; }
.guide__msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: end; }
.guide__msg.is-new { animation: guide-in .45s var(--ease) both; }
@keyframes guide-in { from { opacity: 0; transform: translateY(8px); } }
.guide__mini { width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: var(--g-ink); grid-row: 1; }
.guide__bubble { padding: 12px 15px; border-radius: 18px 18px 18px 6px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); font-size: .93rem; line-height: 1.5; }
.guide__bubble p { margin: 0; white-space: pre-line; }
.guide__bubble p + p { margin-top: 8px; }
.guide__msg--me { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.guide__msg--me .guide__bubble { max-width: 85%; border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--cream); box-shadow: none; }
.guide__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.guide__link { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--cream); text-decoration: none; font: 700 .7rem/1.1 var(--label); letter-spacing: .08em; text-transform: uppercase; transition: background .25s; }
.guide__link:hover { background: var(--gold-deep); }
.guide__chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.guide__chip { padding: 8px 13px; border: 1.5px solid rgba(181, 138, 44, .55); border-radius: 999px; background: none; color: var(--gold-deep); cursor: pointer; font: 600 .82rem/1.15 var(--body); transition: background .25s, color .25s, border-color .25s; }
.guide__chip:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.guide__results { display: grid; gap: 6px; margin-top: 10px; }
.guide__result { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--paper); text-decoration: none; color: var(--ink); box-shadow: 0 0 0 1px var(--rule); transition: box-shadow .25s; }
.guide__result:hover { box-shadow: 0 0 0 1.5px var(--gold); }
.guide__result-where { font: 600 .62rem/1.2 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.guide__result b { font: 700 .98rem/1.25 var(--display); }
.guide__typing .guide__bubble { display: flex; gap: 5px; padding: 15px 16px; }
.guide__typing .guide__bubble span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: guide-dot 1s ease-in-out infinite; }
.guide__typing .guide__bubble span:nth-child(2) { animation-delay: .15s; }
.guide__typing .guide__bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes guide-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.guide__form { display: grid; gap: 9px; margin-top: 11px; }
.guide__form label { display: grid; gap: 4px; }
.guide__form label > span { font: 600 .64rem/1.2 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.guide__form input, .guide__form textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); font: 500 .92rem/1.4 var(--body); resize: vertical; }
.guide__form input:focus, .guide__form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(181, 138, 44, .25); }
.guide__send { justify-self: start; margin-top: 3px; padding: 11px 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--cream); cursor: pointer; font: 700 .72rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; transition: background .25s; }
.guide__send:hover { background: var(--gold-deep); }
.guide__send:disabled { opacity: .5; cursor: wait; }
.guide__note { margin: 0; color: var(--ember); font-size: .86rem; }

.guide__faq { display: grid; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; }
.guide__q + .guide__q { border-top: 1px solid var(--rule); }
.guide__q summary { position: relative; padding: 14px 44px 14px 18px; cursor: pointer; list-style: none; font: 700 .95rem/1.35 var(--body); transition: background .2s; }
.guide__q summary::-webkit-details-marker { display: none; }
.guide__q summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.8px solid var(--gold-deep); border-bottom: 1.8px solid var(--gold-deep); transform: rotate(45deg); transition: transform .3s var(--ease); }
.guide__q[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.guide__q summary:hover { background: var(--sand); }
.guide__a { padding: 0 18px 16px; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.guide__a p { margin: 0; white-space: pre-line; }
.guide__a p + p { margin-top: 8px; }
.guide__news { display: grid; gap: 10px; }
.guide__item { display: grid; gap: 4px; padding: 15px 17px; border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--rule); transition: transform .3s var(--ease), box-shadow .3s; }
.guide__item:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--gold); }
.guide__item .guide__label { margin: 0; }
.guide__item b { font: 800 1.08rem/1.2 var(--display); }
.guide__item > span:last-child:not(.guide__label) { color: var(--ink-mute); font-size: .88rem; line-height: 1.45; }

.guide__tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--card); }
.guide__tabs button { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 12px; background: none; color: var(--ink-mute); cursor: pointer; font: 600 .66rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; transition: color .25s, background .25s; }
.guide__tabs button:hover { color: var(--ink); background: var(--sand); }
.guide__tabs button[aria-selected="true"] { color: var(--ink); }
.guide__tabs button[aria-selected="true"]::before { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 2.5px; border-radius: 2px; background: var(--gold); }
.guide__tabs svg { width: 22px; height: 22px; }

@media (max-width: 520px) {
  .guide__panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; transform-origin: bottom center; }
  .guide.is-open .guide__launch { display: none; }
  .guide__head { padding-top: max(20px, env(safe-area-inset-top)); }
  .guide__launch { width: 58px; height: 58px; }
  .guide__launch .guide__face { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide, .guide *, .guide *::before, .guide *::after { animation: none !important; transition: none !important; }
}
@media print { .guide { display: none; } }

/* ---------- META Talents: Find Jobs and Find Talent ---------- */
/* two entries under META Talents in the bar: closed they sit together under the word, opened they part to either side */
.nav__menu--2 a:nth-child(1) { transform: translate(52%, -16px) scale(.7); }
.nav__menu--2 a:nth-child(2) { transform: translate(-52%, -16px) scale(.7); }

/* casting details on the profile forms */
.looks { display: grid; gap: 14px; margin: 4px 0 0; padding: 20px clamp(16px, 2vw, 24px) 22px; border: 1px dashed rgba(20, 20, 28, .3); border-radius: 16px; }
.looks legend { padding: 0 8px; font: 800 1.1rem/1 var(--display); letter-spacing: -.02em; }
.looks legend span { margin-left: 8px; font: 600 .62rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* the two tabs */
.ttabs { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(8px, 2vw, 20px) 0 clamp(24px, 3.4vw, 44px); scroll-margin-top: 110px; }
.ttabs button {
  display: inline-flex; align-items: center; gap: 14px; padding: 18px clamp(20px, 2.6vw, 34px); border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer; font: 800 clamp(1.25rem, 2.2vw, 1.9rem)/1 var(--display); letter-spacing: -.03em;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.ttabs button:hover { transform: translateY(-2px); }
.ttabs button[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.ttabs i { min-width: 30px; padding: 6px 9px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 .72rem/1 var(--label); font-style: normal; letter-spacing: .06em; text-align: center; }
.tpanel { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.tpanel[hidden] { display: none; }
.tnone { color: var(--ink-mute); }

/* what a visitor sees before signing in */
.tgate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px clamp(24px, 3.4vw, 52px); padding: clamp(24px, 3.4vw, 48px); border-radius: 24px; background: var(--ink); color: var(--cream); }
.tgate:not(:has(.tgate__num)) { grid-template-columns: minmax(0, 1fr) auto; }
.tgate[hidden] { display: none; }
.tgate .copy { color: rgba(243, 234, 216, .78); margin-top: 8px; }
.tgate__num { display: grid; justify-items: center; gap: 6px; padding-right: clamp(24px, 3.4vw, 52px); border-right: 1px solid rgba(243, 234, 216, .2); }
.tgate__num b { font: 900 clamp(3.2rem, 7vw, 6rem)/.9 var(--display); letter-spacing: -.05em; color: var(--gold); }
.tgate__num span { font: 600 .7rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; }
.tgate__acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.tgate .btn { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.tgate .btn--ghost { background: transparent; color: var(--cream); border-color: rgba(243, 234, 216, .5); }
.tgate .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* toolbars, chips and swatches */
.tbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span, .chip--btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px solid rgba(20, 20, 28, .22); border-radius: 999px; background: var(--card);
  color: var(--ink); font: 600 .9rem/1 var(--body); transition: background .25s, border-color .25s, color .25s;
}
.chip--btn { cursor: pointer; }
.chip:hover span, .chip--btn:hover { border-color: var(--ink); }
.chip input:checked + span, .chip--btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.swatch { display: inline-block; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(20, 20, 28, .25), 0 0 0 2px rgba(255, 255, 255, .6); }

/* Find Jobs */
.jobform { border: 1.5px solid var(--ink); }
.jobform[hidden], .jobsmine[hidden] { display: none; }
.jobsmine { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 28px); border-radius: 20px; background: var(--sand); }
.minerow { flex-wrap: wrap; }
.minerow .applicants { flex-basis: 100%; }
.jobcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.jobcard {
  position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--rule); border-radius: 22px; background: var(--card);
  scroll-margin-top: 120px; transition: border-color .35s, box-shadow .45s var(--ease), transform .45s var(--ease);
}
.jobcard:hover { border-color: rgba(20, 20, 28, .4); box-shadow: 0 26px 50px -36px rgba(20, 20, 28, .6); transform: translateY(-3px); }
.jobcard--mine { border-color: var(--gold); }
.jobcard.is-new { animation: job-arrive 1.6s var(--ease); }
@keyframes job-arrive { 0% { box-shadow: 0 0 0 0 rgba(181, 138, 44, .6); } 100% { box-shadow: 0 0 0 18px rgba(181, 138, 44, 0); } }
.jobcard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.jobcard__field { padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 700 .64rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; }
.jobcard__due { font: 600 .68rem/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.jobcard__title { font: 800 clamp(1.4rem, 2.2vw, 1.9rem)/1.08 var(--display); letter-spacing: -.03em; }
.jobcard__org { font-weight: 700; color: var(--ink-soft); }
.jobcard__facts { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.jobcard__facts div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; }
.jobcard__facts dt { font: 600 .66rem/1.7 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.jobcard__facts dd { font-weight: 600; overflow-wrap: anywhere; }
.jobcard__about { color: var(--ink-soft); white-space: pre-line; overflow-wrap: anywhere; }
.jobcard__about.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.jobcard__more { justify-self: start; }
.jobcard__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
.applied { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font: 700 .7rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.applied::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.applyform { display: grid; gap: 10px; flex-basis: 100%; }
.applyform[hidden] { display: none; }
.applyform textarea { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(20, 20, 28, .28); border-radius: 12px; background: var(--paper); font: 500 .96rem/1.45 var(--body); color: var(--ink); resize: vertical; }
.applyform textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(181, 138, 44, .3); }
.applyform .form__actions { margin: 0; }
.applyform__msg { color: var(--danger); }
.applicants { display: grid; gap: 10px; padding-top: 6px; }
.applicants[hidden] { display: none; }
.applicant { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); }
.applicant__img, .talentcard__img, .photoedit__img { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(150deg, #2a2a36, var(--ink)); color: var(--gold); }
.applicant__img { width: 64px; aspect-ratio: 4 / 5; border-radius: 12px; }
.applicant__img b, .talentcard__img b, .photoedit__img b { font: 900 1.4rem/1 var(--display); letter-spacing: -.03em; }
.applicant__img img, .talentcard__img img, .photoedit__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.applicant__main { display: grid; gap: 4px; min-width: 0; }
.applicant__main > b { font: 800 1.15rem/1.2 var(--display); letter-spacing: -.02em; }
.applicant__note { margin-top: 4px; padding-left: 12px; border-left: 2px solid var(--gold); color: var(--ink-soft); white-space: pre-line; }
.applicant__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.applicant__links .small { overflow-wrap: anywhere; }

/* Find Talent */
.tcount { font: 800 clamp(1.3rem, 2vw, 1.7rem)/1 var(--display); letter-spacing: -.03em; }
.filterbtn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer; font: 700 .74rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.filterbtn svg { width: 18px; height: 18px; }
.filterbtn:hover, .filterbtn[aria-expanded="true"], .filterbtn.is-on { background: var(--ink); color: var(--cream); }
.filterbtn b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 .72rem/1 var(--label); letter-spacing: 0; }
.filterbtn b[hidden] { display: none; }
.filters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(18px, 2.4vw, 32px); padding: clamp(20px, 2.8vw, 34px);
  border-radius: 22px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 30px 60px -44px rgba(20, 20, 28, .7);
  animation: filters-open .45s var(--ease);
}
.filters[hidden] { display: none; }
@keyframes filters-open { from { opacity: 0; transform: translateY(-8px); } }
.filters fieldset { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.filters legend { margin-bottom: 10px; padding: 0; font: 600 .72rem/1.3 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.filters__wide { grid-column: 1 / -1; }
.filters select, .range input { width: 100%; min-width: 0; padding: 13px 14px; border: 1.5px solid rgba(20, 20, 28, .28); border-radius: 12px; background: var(--paper); color: var(--ink); font: 500 1rem/1.3 var(--body); }
.filters select:focus, .range input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(181, 138, 44, .3); }
.range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.range span { font: 600 .68rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.filters__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.activefilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.activefilters[hidden] { display: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border: 0; border-radius: 999px; background: var(--sand); color: var(--ink); cursor: pointer; font: 600 .86rem/1 var(--body); transition: background .25s, color .25s; }
.pill::after { content: "\00d7"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(20, 20, 28, .12); font-size: .9rem; line-height: 1; }
.pill:hover { background: var(--ink); color: var(--cream); }
.talentcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.talentcard { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--rule); border-radius: 22px; background: var(--card); transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
.talentcard:hover { box-shadow: 0 30px 60px -40px rgba(20, 20, 28, .65); transform: translateY(-4px); }
.talentcard__img { aspect-ratio: 4 / 5; }
.talentcard__img b { font-size: clamp(3rem, 6vw, 4.6rem); color: rgba(216, 176, 90, .7); }
.talentcard__img img { transition: transform 1.1s var(--ease); }
.talentcard:hover .talentcard__img img { transform: scale(1.04); }
.talentcard__body { display: grid; gap: 10px; align-content: start; padding: clamp(18px, 2.2vw, 26px); }
.talentcard__what { font: 600 .68rem/1.4 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.talentcard__name { font: 800 clamp(1.4rem, 2vw, 1.75rem)/1.05 var(--display); letter-spacing: -.03em; }
.talentcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.talentcard__tags li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: var(--sand); font: 600 .82rem/1 var(--body); }
.talentcard__about { color: var(--ink-soft); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.talentcard .more { justify-self: start; }
.talentcard__ask { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule); }
.talentcard__ask summary { cursor: pointer; font: 700 .72rem/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.talentcard__ask summary:hover { color: var(--ink); }
.talentcard__ask .form { gap: 10px; margin-top: 12px; justify-items: start; }
.talentcard__ask textarea { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(20, 20, 28, .28); border-radius: 12px; background: var(--paper); font: 500 .95rem/1.4 var(--body); color: var(--ink); resize: vertical; }

/* an artist's photo on their profile page */
.photoedit { display: grid; grid-template-columns: clamp(110px, 16vw, 160px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.photoedit__img { aspect-ratio: 4 / 5; border-radius: 18px; }
.photoedit__img b { font-size: 2.6rem; }
.photoedit__side { display: grid; gap: 14px; justify-items: start; }

@media (max-width: 1080px) {
  .talentcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgate, .tgate:not(:has(.tgate__num)) { grid-template-columns: minmax(0, 1fr); }
  .tgate__num { justify-items: start; padding: 0 0 18px; border-right: 0; border-bottom: 1px solid rgba(243, 234, 216, .2); }
  .tgate__acts { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .jobcards { grid-template-columns: 1fr; }
  .form__row--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .talentcards, .filters { grid-template-columns: 1fr; }
  .ttabs button { flex: 1 1 auto; justify-content: center; }
  .photoedit { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .jobcard, .talentcard, .filters, .jobcard.is-new, .ttabs button { animation: none; transition: none; }
}

/* ---------- The House: three rooms, each behind an arched doorway ---------- */
.rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 40px); align-items: start; }
.room { display: grid; gap: 24px; align-content: start; text-decoration: none; color: inherit; }
.room:nth-child(2) { margin-top: clamp(0px, 5vw, 84px); }   /* the middle door set back, like doors along a corridor */
.room__door { position: relative; isolation: isolate; aspect-ratio: 3 / 4.2; overflow: hidden; border-radius: 999px 999px 22px 22px; background: var(--ink); }
.room__door img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88); transition: transform 1.4s var(--ease), filter .6s; }
.room__door::before {   /* the room is darker towards the threshold, so the number reads */
  content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 12, 18, .72), rgba(12, 12, 18, 0) 46%);
}
.room__door::after {    /* the door frame, drawn in gold when the pointer arrives */
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--gold); transition: box-shadow .55s var(--ease);
}
.room:hover .room__door::after, .room:focus-visible .room__door::after { box-shadow: inset 0 0 0 7px var(--gold); }
.room:hover .room__door img, .room:focus-visible .room__door img { transform: scale(1.06); filter: saturate(1.05); }
.room:focus-visible { outline: none; }
.room__no { position: absolute; left: 50%; bottom: clamp(16px, 2vw, 26px); translate: -50% 0; font: 900 clamp(2.4rem, 4vw, 3.8rem)/1 var(--display); letter-spacing: -.05em; color: var(--cream); }
.room__words { display: grid; gap: 12px; justify-items: start; }
.room__name { font: 800 clamp(1.6rem, 2.6vw, 2.5rem)/1.02 var(--display); letter-spacing: -.035em; }
.room__text { color: var(--ink-soft); max-width: 38ch; }
.room .door__go { margin-top: 4px; }
.room .arrow { transition: transform .35s var(--ease); }
.room:hover .arrow { transform: translateX(6px); }
@media (max-width: 900px) {
  .rooms { grid-template-columns: 1fr; gap: 26px; }
  .room { grid-template-columns: clamp(110px, 30vw, 200px) minmax(0, 1fr); align-items: center; gap: clamp(16px, 4vw, 30px); }
  .room:nth-child(2) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .room__door img, .room__door::after, .room .arrow { transition: none; } }