* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #e2e8da;
  --ink-dim: #a8b8a2;
  --ink-faint: #71806c;
  --gold: #96c7a0;
  --sea: #7fb3a4;
  /* Poster type: the title is set in Chemre (pre-rendered artwork, /img/title.png).
     Body copy on the poster is SIMPLIFICA, whose licence forbids web embedding —
     Jost Light stands in for it. Swap --ui here if a licence is obtained. */
  --ui: 'Jost', 'Avenir Next', 'Helvetica Neue', sans-serif;
}

html { scroll-behavior: smooth; background: #070a07; }

body {
  /* the kelp forest: green dusk → deep water → the void */
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(40, 72, 44, 0.14), transparent 60%),
    radial-gradient(130% 50% at 50% 58%, rgba(22, 60, 64, 0.16), transparent 65%),
    radial-gradient(130% 55% at 50% 100%, rgba(24, 84, 58, 0.16), transparent 65%),
    linear-gradient(180deg, #0a0d09 0%, #081110 34%, #06120e 62%, #050b0a 100%);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 300;
  line-height: 1.8;
  font-size: 1.08rem;
  overflow-x: hidden;
}

/* oceanic bubble texture, laid under the water across the whole page,
   rising almost imperceptibly */
.oceantex {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/img/bubbles.webp') 0 0 / 2000px auto repeat;
  opacity: 0.15;
  filter: saturate(0.85) brightness(0.92);
  animation: texrise 650s linear infinite;
}
@keyframes texrise { to { background-position: 0 -2500px; } } /* one tile height = seamless loop */
@media (max-width: 720px) { .oceantex { background-size: 1150px auto; } }
@media (prefers-reduced-motion: reduce) { .oceantex { animation: none; } }

/* foreboding vignette closing in from the edges */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(125% 125% at 50% 42%, transparent 58%, rgba(2, 6, 4, 0.55) 100%);
}

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  z-index: 3;
}

a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(130, 190, 150, 0.35); transition: border-color 0.3s; }
a:hover { border-bottom-color: var(--gold); }

.wrap { max-width: 40rem; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 2; }

/* ---------- hero ---------- */
header {
  /* Not centred, and no min-height. Syx needs a lot of room above the type and
     none below it, so centring the block bought that room twice over and left
     a third of a screen of empty water before The Show. The top padding IS that
     room; the header is otherwise only as tall as its contents. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 17.8rem 1.5rem 2.5rem;
  position: relative;
  overflow: hidden;
}
header > * { position: relative; z-index: 2; }

/* Ouranos, sneaking out of the shadows — centered and large on desktop */
.hero-art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(74vw, 940px);
  background-image: url('/img/hero.webp');
  background-size: auto 138%;
  background-position: 46% 20%;
  background-repeat: no-repeat;
  filter: contrast(1.06) saturate(0.92) brightness(0.9);
  -webkit-mask-image: radial-gradient(75% 88% at 50% 42%, #000 40%, transparent 78%);
  mask-image: radial-gradient(75% 88% at 50% 42%, #000 40%, transparent 78%);
  /* well back now: Syx is the near figure and two of them at full strength
     just make mud. See the .syx block below. */
  --heroLo: 0.22;
  --heroHi: 0.30;
  animation: lurk 19s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}
@keyframes lurk {
  from { opacity: var(--heroLo, 0.42); transform: translateY(8px); }
  to { opacity: var(--heroHi, 0.60); transform: translateY(0); }
}
/* ?notext=1: pure hero render for screenshots */
header.notext > *:not(.hero-art) { display: none; }
header.notext::after { display: none; }

/* dark water between Ouranos and the words */
header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(64% 34% at 50% 41%, rgba(4, 8, 7, 0.68), transparent 86%);
}
.tagline, .premiere, .credits { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 0, 0, 0.5); }
.credits {
  margin-top: 1.7rem;
  font-size: 0.98rem;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}
.credits span { display: block; margin-top: 0.2rem; font-size: 1.24rem; letter-spacing: 0.08em; color: var(--ink); }
@media (max-width: 720px) {
  .hero-art {
    top: -14px;
    width: 100vw;
    background-position: 44% 20%;
    filter: contrast(1.08) saturate(0.9) brightness(0.72);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
  }
}
h1 {
  width: min(78vw, 640px);
  margin: 0 auto;
  filter: drop-shadow(0 0 44px rgba(110, 190, 140, 0.28)) drop-shadow(0 2px 16px rgba(0, 0, 0, 0.75));
}
h1 img { display: block; width: 100%; height: auto; }
.tagline {
  margin-top: 1.4rem;
  font-family: var(--ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 3.8vw, 1.8rem);
  color: var(--ink-dim);
}
.premiere {
  margin-top: 3rem;
  font-size: 0.98rem;
  letter-spacing: 0.2em;
  text-transform: none;
  color: var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.premiere::before, .premiere::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(130, 190, 150, 0.55), transparent);
}
.premiere::before { margin-bottom: 0.9rem; }
.premiere::after { margin-top: 0.9rem; }
.premiere span { margin-top: 0.2rem; font-size: 1.3rem; letter-spacing: 0.1em; color: var(--ink); }

/* the La MaMa Puppet Festival lockup, upper left, per their style guide */
header > .lamama {
  width: min(78vw, 640px);   /* matches the title block, so it sits at its left edge */
  margin: 0 auto 1.2rem;
  text-align: left;
  border-bottom: none;
}
.lamama .lockup { display: inline-block; width: min(34vw, 190px); }
.lamama img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.75));
}
.lamama .presents {
  display: block;
  width: 94%;              /* sits half a word-width past the wordmark's right edge */
  margin-top: -0.28rem;
  text-align: right;
  font-family: 'Bricolage Grotesque', var(--ui);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.lamama:hover .presents { color: var(--gold); }
@media (max-width: 720px) {
  header > .lamama { width: min(86vw, 640px); margin-bottom: 1rem; }
  .lamama img { width: min(46vw, 175px); }
  .lamama .presents { font-size: 0.82rem; }
}

/* funding credit, poster wording, ruled off at the foot of The Show */
.funding {
  margin-top: 2.4rem;
  padding-top: 1.3rem;
  border-top: 1px dotted rgba(232, 224, 204, 0.14);
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  max-width: 34rem;
}


/* ---------- Syx ---------------------------------------------------------
   The promo photographs, keyed to real alpha (public/img/syx{1,2,3}-*.webp,
   built by promo-src/make-syx.sh from a hand-finished matte). No colour
   treatment: the photographs ship exactly as masked.

   In the hero she sits behind the title — her head and raised arm clear the
   type and ENDLESS FORMS falls across her chest — with Ouranais still lurking
   behind her at low opacity. */
header .syx {
  position: absolute;
  z-index: 1;                /* under the type, over the water */
  left: 52%;
  /* Put her so the title's midline crosses 41% down her body — the same place
     at every viewport height. A plain percentage top does not do this: the
     header scales with vh while her size is capped, so on a short laptop the
     type ended up crossing her collarbone instead of her chest. The title's
     midline is now a fixed distance from the top of the page, so this no
     longer has to chase the viewport height. 0.6842 is 0.52 x her aspect
     ratio: the title crosses just under her ribs, with her chest and head
     clear above it. Raising her any further means the top padding has to grow
     with it — her raised fingertip is only 1% down the frame, so there is
     almost no slack between her hand and the top of the page. */
  /* the 80vh term is what keeps her raised hand inside the frame on a short
     laptop, where she would otherwise be taller than the header itself */
  --syx-w: min(96vw, 770px, 80vh);
  width: var(--syx-w);
  top: calc(32.7rem - 0.6842 * var(--syx-w));  /* 32.7rem is where the title's midline lands */
  margin: 0;
  line-height: 0;
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 0 60px rgba(50, 140, 175, 0.30));
  -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 66%, transparent 99%);
  animation: syxdrift 21s ease-in-out infinite alternate;
}
header .syx img { display: block; width: 100%; height: auto; }
@keyframes syxdrift {
  from { transform: translateX(-50%) translateY(14px) rotate(-0.6deg); }
  to   { transform: translateX(-50%) translateY(-14px) rotate(0.4deg); }
}
h1 { filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 18px rgba(0, 0, 0, 0.85)); }
/* She is mirrored by default, facing right: her raised arm then leads into the
   title rather than away from it, and her face reads far better than it does
   competing with the La MaMa lockup on the left. ?syxflip=0 restores the
   original facing. */
html:not(.syxnoflip) header .syx { animation-name: syxdrift-flip; }
@keyframes syxdrift-flip {
  from { transform: translateX(-50%) scaleX(-1) translateY(14px) rotate(0.6deg); }
  to   { transform: translateX(-50%) scaleX(-1) translateY(-14px) rotate(-0.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.syxnoflip) header .syx { transform: translateX(-50%) scaleX(-1); }
}

/* The Ouranais sketch is off: Syx carries the hero now, and the two figures
   over each other only ever made mud. ?hero=on brings it back. */
.hero-art { display: none; }
html.showhero .hero-art { display: block; }

@media (max-width: 720px) {
  /* The block below the title is taller here, so its midline sits further up.
     The header also comes down from 128vh: with the sketch gone there was
     nothing filling the gap and the first text block sat a screen and a half
     down the page. */
  header { padding-top: 9.5rem; }
  header .syx { --syx-w: 112vw; top: calc(20rem - 0.6842 * var(--syx-w)); }
}

/* ?smoke=dark — the water darkens the page instead of lighting it. Multiply
   against a backdrop this dark is heavy, so the palette is lifted to suit. */
html.smokedark body > canvas { mix-blend-mode: multiply; }

/* Between the coral slabs, one in each gap, centred and in its own space. */
.syxband {
  position: relative;
  z-index: 1;
  margin: 1rem auto 1.6rem;
  text-align: center;
  pointer-events: none;
  filter: drop-shadow(0 0 60px rgba(50, 140, 175, 0.22));
}
.syxband img {
  display: inline-block;
  width: min(32vw, 380px);
  height: auto;
  opacity: 0.88;
  -webkit-mask-image: radial-gradient(78% 76% at 50% 48%, #000 58%, transparent 98%);
  mask-image: radial-gradient(78% 76% at 50% 48%, #000 58%, transparent 98%);
}
@keyframes syxband-float      { from { transform: translateY(9px); }            to { transform: translateY(-9px); } }
@keyframes syxband-float-flip { from { transform: scaleX(-1) translateY(9px); } to { transform: scaleX(-1) translateY(-9px); } }
.syxband.right img { animation: syxband-float 23s ease-in-out infinite alternate; }
.syxband.left img  { animation: syxband-float-flip 26s ease-in-out infinite alternate; }
@media (max-width: 720px) {
  .syxband { margin: 0.5rem auto 1rem; }
  .syxband img { width: 74vw; }
}
@media (prefers-reduced-motion: reduce) {
  header .syx { animation: none; transform: translateX(-50%); }
  .syxband img { animation: none; }
  .syxband.left img { transform: scaleX(-1); }
}

/* ---------- sections: coral slabs ---------- */
section { padding: 4.2rem 0; position: relative; z-index: 2; }
section.wrap {
  padding: 4.2rem 2rem;
  margin: 3.6rem auto;
  background:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(170, 210, 170, 0.09), transparent 100%),
    radial-gradient(1.5px 1.5px at 67% 74%, rgba(170, 210, 170, 0.07), transparent 100%),
    radial-gradient(1px 1px at 38% 88%, rgba(190, 215, 190, 0.08), transparent 100%),
    radial-gradient(1px 1px at 84% 18%, rgba(160, 200, 165, 0.08), transparent 100%),
    radial-gradient(120% 90% at 18% 0%, rgba(40, 80, 50, 0.16), transparent 55%),
    radial-gradient(110% 85% at 85% 100%, rgba(20, 64, 44, 0.26), transparent 60%),
    rgba(8, 12, 9, 0.68);
  background-size: 90px 110px, 130px 90px, 70px 120px, 150px 140px, 100% 100%, 100% 100%, 100% 100%;
  border: 1px solid rgba(130, 180, 140, 0.10);
  border-top: 1px solid rgba(160, 210, 170, 0.20);
  border-radius: 28px 74px 24px 88px / 62px 28px 80px 32px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.62), inset 0 0 70px rgba(14, 38, 26, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow: hidden;
}
section.wrap:nth-of-type(even) {
  border-radius: 84px 26px 70px 24px / 30px 74px 26px 66px;
}

/* algae wash inside each slab — one large image, a different crop per
   slab, kept subtle beneath the stone tints */
section.wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/img/algae.webp') 30% 18% / cover no-repeat;
  opacity: 0.24;
}
section.wrap:nth-of-type(2)::before { background-position: 72% 62%; }
section.wrap:nth-of-type(3)::before { background-position: 46% 88%; }

/* reef rim: wobbly inner outline + coral knobs + pores (drawn by script) */
.reefrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
section.wrap:last-of-type { padding-bottom: 5rem; }
section.wrap h2 { transform: rotate(-0.8deg); }
section.wrap:nth-of-type(even) h2 { transform: rotate(0.6deg); }

/* barnacle rings along slab edges */
.barn { position: absolute; border: 1px solid rgba(210, 190, 160, 0.15); border-radius: 50%; pointer-events: none; }
.barn::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 1px solid rgba(210, 190, 160, 0.09); }

/* algae fronds leaking off the slabs (drawn as SVG ribbons by script) */
.algaerow { max-width: 40rem; margin: -3.6rem auto 3.6rem; position: relative; z-index: 1; height: 0; pointer-events: none; }
.frond { animation: sway ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-3.5deg); } to { transform: rotate(4deg); } }

/* drifting smoke — veils, never hides */
.mist {
  position: fixed;
  z-index: 3;
  pointer-events: none;
  width: 64vmax;
  height: 36vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(104, 148, 118, 0.10), transparent 70%);
  filter: blur(28px);
  animation: mistdrift linear infinite;
}
.mist.m1 { top: 16%; animation-duration: 95s; }
.mist.m2 { top: 54%; animation-duration: 135s; animation-delay: -68s; background: radial-gradient(closest-side, rgba(84, 128, 128, 0.09), transparent 70%); }
@keyframes mistdrift { from { transform: translateX(-70vmax); } to { transform: translateX(120vw); } }

/* ink-wash blooms (populated by script) */
.blob {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  filter: blur(46px);
  opacity: 0.5;
  animation: blobm ease-in-out infinite alternate;
}
@keyframes blobm { to { transform: translate(34px, -24px) scale(1.14) rotate(9deg); } }

h2 {
  font-weight: 300;
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(130, 190, 150, 0.35), transparent);
}

p + p { margin-top: 1.2rem; }

/* drop cap */
.lede::first-letter {
  font-family: var(--ui);
  font-weight: 400;
  float: left;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--gold);
}

/* ---------- performances ---------- */
.festival { margin-bottom: 2.2rem; }
.festival .presented {
  margin: 0 0 0.9rem;
  font-size: 1.02rem;
  color: var(--ink);
}
.festival blockquote {
  margin: 0 0 1.4rem;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(160, 210, 170, 0.34);
  font-size: 0.93rem;
  line-height: 1.75;
  font-style: italic;
  color: var(--ink-dim);
}
.festival-link {
  display: inline-block;
  padding: 0.95rem 2.8rem;
  border: 1px solid rgba(190, 230, 200, 0.6);
  border-top-color: rgba(215, 245, 225, 0.85);
  border-radius: 5px 22px 7px 26px / 20px 6px 24px 7px;
  background: rgba(150, 199, 160, 0.2);
  box-shadow: 0 0 24px rgba(120, 200, 150, 0.15), inset 0 1px 0 rgba(220, 250, 230, 0.12);
  color: #eaf5e8;
  font-size: 1.02rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.festival-link:hover {
  background: rgba(160, 215, 175, 0.32);
  border-color: rgba(220, 250, 230, 0.95);
  box-shadow: 0 0 32px rgba(130, 215, 165, 0.3), inset 0 1px 0 rgba(220, 250, 230, 0.2);
  color: #ffffff;
  transform: translateY(-1px);
}
.performances { list-style: none; }
.performances li {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(232, 224, 204, 0.1);
}
.performances li:first-child { border-top: 1px solid rgba(232, 224, 204, 0.1); }
.performances .date {
  font-family: var(--ui);
  font-size: 1.35rem;
  font-weight: 400;
  min-width: 9.5rem;
  color: var(--ink);
}
.performances .time { color: var(--ink-dim); }
.performances .note { margin-left: auto; padding-left: 0.4rem; color: var(--gold); font-style: italic; font-size: 0.9rem; white-space: nowrap; }
.venue { margin-top: 1.6rem; color: var(--ink-dim); font-style: italic; }

.tickets { margin-top: 2rem; }
.tickets a {
  display: inline-block;
  padding: 0.95rem 2.8rem;
  border: 1px solid rgba(180, 225, 190, 0.6);
  border-top-color: rgba(205, 240, 215, 0.85);
  border-radius: 6px 26px 8px 30px / 24px 7px 26px 8px;
  background: rgba(150, 199, 160, 0.2);
  box-shadow: 0 0 26px rgba(120, 200, 150, 0.16), inset 0 1px 0 rgba(220, 250, 230, 0.12);
  color: #eaf5e8;
  font-size: 1.02rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.tickets a:hover {
  background: rgba(160, 215, 175, 0.32);
  border-color: rgba(215, 245, 225, 0.95);
  box-shadow: 0 0 34px rgba(130, 215, 165, 0.3), inset 0 1px 0 rgba(220, 250, 230, 0.2);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ---------- team ---------- */
.team { list-style: none; columns: 1; }
.team li {
  padding: 0.5rem 0;
  border-bottom: 1px dotted rgba(232, 224, 204, 0.12);
}
.team summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}
.team summary::-webkit-details-marker { display: none; }
.team summary::after {
  content: "bio +";
  flex: 0 0 auto;
  color: var(--gold);
  opacity: 0.7;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.1rem;
}
.team summary:hover::after { opacity: 1; }
.team details[open] summary::after { content: "bio −"; opacity: 1; }
.team .name { font-family: var(--ui); font-size: 1.15rem; font-weight: 400; white-space: nowrap; }
.team .role { color: var(--ink-faint); font-style: italic; font-size: 0.92rem; text-align: right; margin-left: auto; }
.team .bio { margin: 0.65rem 0 0.5rem; font-size: 0.92rem; line-height: 1.7; color: var(--ink-dim); }
.team .bio.placeholder { font-style: italic; color: var(--ink-faint); }

/* ---------- footer ---------- */
footer {
  padding: 0 1.5rem 5rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.linkbox {
  max-width: 24rem;
  margin: 0 auto;
  padding: 1.5rem 1.6rem;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(40, 80, 50, 0.16), transparent 55%),
    rgba(8, 12, 9, 0.74);
  border: 1px solid rgba(130, 180, 140, 0.14);
  border-top: 1px solid rgba(160, 210, 170, 0.26);
  border-radius: 20px 48px 22px 54px / 42px 22px 46px 24px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.linkbox a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: #c6d9c0;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  border-bottom: none;
}
.linkbox a svg { flex: 0 0 auto; color: var(--gold); }
.linkbox a img { flex: 0 0 auto; height: 24px; width: auto; }
    .linkbox a.lm { justify-content: center; }
    .linkbox a.lm img { height: 40px; }
.linkbox a:hover { color: var(--gold); }

/* ---------- mobile ---------- */
@media (max-width: 600px) {
  .premiere { font-size: 0.78rem; letter-spacing: 0.2em; }
  .premiere span { letter-spacing: 0.16em; }
  section { padding: 3rem 0; }
  section.wrap { padding: 3rem 1.4rem; margin: 2.4rem 0.8rem; }
  .algaerow { margin: -2.4rem 0.8rem 2.4rem; max-width: none; }
  .performances .date { min-width: 7.4rem; font-size: 1.2rem; }
  .performances li { gap: 0.8rem; }
  .team summary { flex-wrap: wrap; gap: 0.2rem 0.6rem; }
  .team .role { text-align: left; margin-left: 0; flex-basis: 100%; order: 2; }
  .team summary::after { order: 1; margin-left: auto; }
  footer a { letter-spacing: 0.14em; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art, .blob, .frond, .mist { animation: none; }
  html { scroll-behavior: auto; }
}