/* ============================================================
   ANDREY BURKOVSKIY — site styles
   Deep-blue vérité treatment. Display: Archivo (var. width/weight)
   Serif accent: Instrument Serif (about quote + loader only)
   ============================================================ */

:root {
  /* dark green & gold — deep forest, champagne, gold */
  --blue-bright:  #1a1611;   /* headline / nav (warm ink)        */
  --accent:       #8a6d3b;   /* bronze — small highlights        */
  --blue-loader:  #ddd3ba;   /* loader field (soft beige)        */
  --blue-deep:    #cfc3a5;   /* deeper beige                     */
  --blue-mid:     #e6ddc7;   /* midtone                          */
  --bg:           #f1ebdc;   /* page background (light beige)    */
  --bg-raise:     #e9e1cd77; /* raised panels                    */
  --paper:        #f8f4ea;   /* ticket paper (cream)             */
  --ink:          #1a1611;   /* warm near-black on paper         */
  --body:         #6d675c;   /* body copy (warm grey)            */
  --line:         #d5cab0;   /* hairlines                        */
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-name:    "Bodoni Moda", "Didot", Georgia, serif;
  --font-serif:   "Instrument Serif", Georgia, serif;
}

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

html { scroll-behavior: smooth; }

html, body {
  background: var(--bg);
  overscroll-behavior: none;
}

body {
  font-family: var(--font-display);
  color: var(--blue-bright);
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

::selection { background: var(--blue-bright); color: var(--ink); }

/* ============================================================
   LANGUAGE SWITCHING
   ============================================================ */

html[lang="en"] [data-lang="ru"],
html[lang="ru"] [data-lang="en"] { display: none !important; }

/* compact dropdown — shows only the active language until clicked,
   so the rest of the menu always has room (this was cramped on mobile
   when both "EN" and "RU" sat spelled out in the bar at once) */
.lang {
  position: relative;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.lang__toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  color: currentColor;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.lang__toggle:hover { opacity: 1; }

.lang__caret {
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1);
  opacity: 0.7;
}

.lang.is-open .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 64px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 14px 34px rgba(20, 16, 10, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0.25s;
  z-index: 5;
}

.lang.is-open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.22, 1, .36, 1);
}

.lang__btn {
  background: none;
  border: 0;
  padding: 9px 14px;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--ink);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.lang__btn:hover { opacity: 1; background: var(--bg-raise); }

.lang__btn.is-active {
  opacity: 1;
  color: var(--accent);
  font-weight: 900;
}

/* toggle over the hero photo stays light; its dropdown stays on paper */
.hero .lang__toggle { color: #f2eee3; }

/* ============================================================
   LOADER — progress bar shaped as a ticket stub
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  background:
    radial-gradient(120% 150% at 50% 18%,
      #eae3cf 0%, var(--blue-loader) 46%, #d0c5a7 78%, #c6b998 100%);
  transition: clip-path 1.1s cubic-bezier(.87, 0, .13, 1);
  clip-path: inset(0 0 0 0);
}

/* silk grain + soft vignette for a rich, tactile field */
.loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.13;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%,
              rgba(0, 0, 0, 0) 46%,
              rgba(120, 108, 86, 0.25) 100%);
  pointer-events: none;
}

.loader.is-done {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

.loader__bar-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%) rotate(-4deg);
}

/* ---- vintage ticket ---------------------------------------- */

.tkt {
  position: relative;
  display: flex;
  width: min(66vw, 560px);
  aspect-ratio: 2.1 / 1;
  color: var(--ink);
}

.loader__bar-wrap { filter: none; }

/* progress: an ink wash sweeping across the main body */
.tkt__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(201, 162, 94, 0.3);
  pointer-events: none;
  z-index: 2;
}

.tkt__main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 5% 4% 5% 5%;
  min-width: 0;
  /* drop an image at assets/ticket-loader.jpeg to replace the plain paper;
     sized so the picture runs continuously across main body and stub */
  background:
    linear-gradient(rgba(248, 244, 234, 0.12), rgba(248, 244, 234, 0.12)),
    url("assets/ticket-loader.jpeg") center / cover no-repeat,
    var(--paper);
  border-radius: 8px 0 0 8px;
  /* punched corner notches + perforation half-holes, cut for real */
  -webkit-mask:
    radial-gradient(circle 9px at 0 0,       transparent 8px, #000 9px),
    radial-gradient(circle 9px at 0 100%,    transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% 0,    transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% 100%, transparent 8px, #000 9px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 9px at 0 0,       transparent 8px, #000 9px),
    radial-gradient(circle 9px at 0 100%,    transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% 0,    transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% 100%, transparent 8px, #000 9px);
  mask-composite: intersect;
}

/* printed inner frame, like the reference */
.tkt__frame {
  position: absolute;
  inset: 4% 2.5% 4% 3.5%;
  border: 2px solid var(--blue-loader);
  border-radius: 10px;
  opacity: 0.75;
  pointer-events: none;
}

.tkt__serial {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 900;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  flex: 0 0 auto;
}

.tkt__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
  text-align: center;
  min-width: 0;
}

/* A—B mark, same as the menu bar */
.tkt__logo {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.tkt__loadrow {
  display: flex;
  justify-content: space-between;
  width: min(78%, 220px);
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.tkt__loadrow b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* tear-off stub: seat / row / screen print */
.tkt__stub {
  flex: 0 0 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px dashed rgba(26, 22, 17, 0.5);
  border-radius: 0 8px 8px 0;
  background:
    linear-gradient(rgba(248, 244, 234, 0.12), rgba(248, 244, 234, 0.12)),
    url("assets/ticket-loader.jpeg") right center / cover no-repeat,
    var(--paper);
  transform-origin: left bottom;
  transition: transform 0.7s cubic-bezier(.34, 1.1, .4, 1),
              opacity 0.55s ease 0.2s;
  -webkit-mask:
    radial-gradient(circle 9px at 0 0,       transparent 8px, #000 9px),
    radial-gradient(circle 9px at 0 100%,    transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% 0,    transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% 100%, transparent 8px, #000 9px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 9px at 0 0,       transparent 8px, #000 9px),
    radial-gradient(circle 9px at 0 100%,    transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% 0,    transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% 100%, transparent 8px, #000 9px);
  mask-composite: intersect;
}

.tkt__stub-info {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.7vw, 8px);
  width: 72%;
}

.tkt__stub-info span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: clamp(7px, 0.85vw, 9px);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.tkt__stub-info i {
  font-style: normal;
  opacity: 0.6;
}

.tkt__stub-info b {
  font-size: clamp(9px, 1.1vw, 12px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* at 100% the stub tears away and vanishes */
.loader.is-torn .tkt__stub {
  transform: rotate(18deg) translate(34%, 16%);
  opacity: 0;
}

.loader__meta {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
  text-align: center;
}

.loader__row {
  display: flex;
  justify-content: space-between;
  width: clamp(180px, 22vw, 260px);
  margin: 0 auto 2.2vh;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.85;
}

.loader__count { font-variant-numeric: tabular-nums; }

.loader__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ============================================================
   STICKY MENU
   ============================================================ */

.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 3vw, 48px);
  background: rgba(241, 235, 220, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 800;
  letter-spacing: 0.16em;
  transform: translateY(-101%);
  transition: transform 0.5s cubic-bezier(.22, 1, .36, 1);
}

.sticky-nav.is-visible { transform: translateY(0); }

.sticky-nav a {
  color: var(--blue-bright);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}

/* bronze rule under every menu item — full strength on hover */
.sticky-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  opacity: 0.35;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.sticky-nav a:hover { color: var(--accent); }

.sticky-nav a:hover::after { opacity: 1; }

.sticky-nav__name { font-weight: 800; font-size: clamp(16px, 1.2vw, 18px); }

.sticky-nav__links {
  display: flex;
  gap: clamp(18px, 4vw, 56px);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #eae2ce;
}

.hero__media {
  position: absolute;
  inset: 0;
  transform: scale(1.12);
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
}

.hero.is-revealed .hero__media { transform: scale(1); }

/* full-screen photo, pulled into the blue world */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__light {
  position: absolute;
  border-radius: 50%;
  filter: blur(2vw);
}

.hero__light--a {
  width: 80vw;
  height: 110vh;
  right: -18vw;
  top: -22vh;
  background: radial-gradient(ellipse at 45% 42%,
              rgba(206, 172, 110, 0.35) 0%,
              rgba(120, 94, 48, 0.25) 40%,
              rgba(10, 8, 5, 0) 74%);
}

.hero__light--b {
  width: 70vw;
  height: 95vh;
  left: -20vw;
  top: 8vh;
  background: radial-gradient(ellipse at 58% 42%,
              rgba(170, 140, 90, 0.28) 0%,
              rgba(80, 62, 32, 0.2) 48%,
              rgba(8, 6, 4, 0) 78%);
}

.hero__duotone {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
              rgba(44, 37, 26, 0.55) 0%,
              rgba(20, 16, 10, 0.78) 55%,
              rgba(7, 6, 4, 0.92) 100%);
  mix-blend-mode: multiply;
}

/* no tint over a real photo — it shows in its natural colour */
.hero__photo ~ .hero__duotone { display: none; }
.hero__photo ~ .hero__light { display: none; }

.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%,
              rgba(0, 0, 0, 0) 40%,
              rgba(2, 4, 12, 0.55) 100%);
}

.hero__grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.09;
  animation: grain 0.9s steps(4) infinite;
  pointer-events: none;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4%, 3%); }
  50%  { transform: translate(3%, -2%); }
  75%  { transform: translate(-2%, -4%); }
  100% { transform: translate(0, 0); }
}

/* ---- hero navigation -------------------------------------- */

.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr auto;
  align-items: start;
  gap: 0 clamp(12px, 2vw, 32px);
  padding: 26px clamp(20px, 3vw, 48px) 0;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 800;
  letter-spacing: 0.16em;
}

.nav__link {
  color: var(--blue-bright);
  text-decoration: none;
  position: relative;
  justify-self: start;
  padding-bottom: 2px;
}

.nav__slot--2 { justify-self: center; }
.nav__slot--4 { justify-self: center; }
.nav__slot--5 { justify-self: end; }
.nav__lang { justify-self: end; }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--blue-bright);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__logo {
  justify-self: center;
  text-align: center;
  color: var(--blue-bright);
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(19px, 1.5vw, 22px);
  letter-spacing: 0.04em;
}

.nav .nav__slot {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22, 1, .36, 1);
}

.hero.is-revealed .nav__slot { opacity: 1; transform: translateY(0); }
.hero.is-revealed .nav__slot--1 { transition-delay: 0.55s; }
.hero.is-revealed .nav__slot--2 { transition-delay: 0.65s; }
.hero.is-revealed .nav__slot--3 { transition-delay: 0.45s; }
.hero.is-revealed .nav__slot--4 { transition-delay: 0.75s; }
.hero.is-revealed .nav__slot--5 { transition-delay: 0.85s; }

/* hero nav sits over the photo — keep it light there */
.hero .nav__link,
.hero .nav__logo { color: #f2eee3; }
.hero .nav__link::after { background: #f2eee3; }

/* ---- hero bottom headline: ANDREY / BURKOVSKIY ------------- */

.hero__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 0 clamp(16px, 2.2vw, 40px) clamp(10px, 2vh, 28px);
}

/* both tags stacked on the left, Theatre above Acting School */
.hero__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 1.4vh;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 800;
  letter-spacing: 0.16em;
}

.hero__tag {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 1s, transform 0.6s ease 1s;
}

.hero.is-revealed .hero__tag { opacity: 1; transform: translateY(0); }

/* over the hero photo the type stays bone-light, even in the light theme */
.headline {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 92%;
  color: #f2eee3;
  line-height: 0.84;
  letter-spacing: -0.02em;
}

.headline__line {
  display: block;
  overflow: hidden;
  /* headroom so Cyrillic breves/diaereses (Й, Ё) aren't clipped */
  padding-top: 0.14em;
  margin-top: -0.14em;
}

.headline__line--first  { font-size: clamp(58px, 15vw, 280px); }
.headline__line--second { font-size: clamp(40px, 10.2vw, 190px); }

.headline__line .char { display: inline-block; }

.headline__word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}

.hero.is-revealed .headline__word { transform: translateY(0); }
.hero.is-revealed .headline__line--first  .headline__word { transition-delay: 0.3s; }
.hero.is-revealed .headline__line--second .headline__word { transition-delay: 0.5s; }

/* ============================================================
   SECTIONS — shared
   ============================================================ */

.section {
  position: relative;
  padding: clamp(28px, 4vh, 44px) clamp(20px, 3vw, 48px) clamp(48px, 7vh, 88px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 56px;
}

.about { scroll-margin-top: 56px; }

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(14px, 2vh, 24px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--blue-bright);
}

.section__index { opacity: 0.6; }

.section__title {
  font-size: clamp(48px, 9vw, 170px);
  font-weight: 900;
  font-stretch: 92%;
  line-height: 0.85;
  letter-spacing: -0.015em;
  color: var(--blue-bright);
  margin-bottom: clamp(22px, 3.5vh, 44px);
}

/* single long word — sized so it always fits one line, never hyphenates */
.section__title--wide {
  font-size: clamp(30px, 7.6vw, 150px);
  white-space: nowrap;
  hyphens: none;
}

[data-fade] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

[data-fade].in-view { opacity: 1; transform: translateY(0); }

/* ============================================================
   ABOUT — the quote lands straight after the name
   ============================================================ */

.about {
  position: relative;
  padding: clamp(36px, 6vh, 72px) clamp(20px, 3vw, 48px) clamp(40px, 7vh, 80px);
}

.about__statement {
  font-size: clamp(24px, 3vw, 50px);
  font-weight: 700;
  font-stretch: 92%;
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.about__line { display: block; }

/* ============================================================
   TICKETS — vertical stubs, square corners, second one peeking
   ============================================================ */

.projects__hint {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--body);
  margin-bottom: 26px;
}

.tickets { position: relative; }

/* stacked vertically, one above the other */
.tickets__track {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 34px);
  list-style: none;
  padding: 4px 0 8px;
}

.tickets__controls { display: none; }

.ticket {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  transition: transform 0.45s cubic-bezier(.22, 1, .36, 1),
              box-shadow 0.45s ease;
}

/* crisp printed outline, drawn above the photo so the edge always reads */
.ticket::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 1.5px solid rgba(26, 22, 17, 0.55);
  pointer-events: none;
  transition: border-color 0.4s ease;
}

/* lift + a soft warm halo, no dark drop shadow */
.ticket:hover, .ticket:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 0 34px rgba(255, 248, 232, 0.95);
  outline: none;
}

.ticket:hover::after, .ticket:focus-visible::after { border-color: var(--accent); }

@media (max-width: 760px) {
  .ticket { aspect-ratio: 1.75 / 1; }
}

/* optional photo background — textured, kept in the paper world */
.ticket__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) saturate(1.45);
}

/* the wide ticket crop would cut his head off — anchor to the top */
.ticket[data-project="alpha"] .ticket__photo { object-position: center top; }

/* light paper tint + grain over the photo — photo stays clearly visible */
.ticket__texture {
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* soft plate behind the text zones when a photo is present —
   top scrim for the title, bottom scrim for the project/form/run row */
.ticket__photo ~ .ticket__body {
  background:
    linear-gradient(180deg,
      rgba(248, 244, 234, 0.78) 0%,
      rgba(248, 244, 234, 0.42) 42%,
      rgba(248, 244, 234, 0) 68%),
    linear-gradient(0deg,
      rgba(248, 244, 234, 0.8) 0%,
      rgba(248, 244, 234, 0.3) 22%,
      rgba(248, 244, 234, 0) 42%);
  text-shadow: 0 0 12px rgba(248, 244, 234, 0.85);
}

/* Alpha Centauri's photo is dark: its type flips to cream over a dark scrim */
.ticket[data-project="alpha"] .ticket__photo ~ .ticket__body {
  color: #f4efe4;
  background:
    linear-gradient(180deg,
      rgba(16, 13, 9, 0.68) 0%,
      rgba(16, 13, 9, 0.34) 42%,
      rgba(16, 13, 9, 0) 68%),
    linear-gradient(0deg,
      rgba(16, 13, 9, 0.72) 0%,
      rgba(16, 13, 9, 0.28) 22%,
      rgba(16, 13, 9, 0) 42%);
  text-shadow: 0 0 14px rgba(10, 8, 5, 0.75);
}

.ticket__photo ~ .ticket__stub { background: rgba(248, 244, 234, 0.7); }

.ticket__body {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ticket__admit {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  opacity: 0.65;
}

.ticket__title {
  font-size: clamp(40px, 6vw, 74px);
  font-weight: 900;
  font-stretch: 88%;
  line-height: 0.88;
  letter-spacing: -0.01em;
}

.ticket__sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.7;
}

.ticket__meta {
  margin-top: auto;
  display: flex;
  gap: clamp(16px, 2.4vw, 36px);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.75;
  line-height: 1.5;
}

.ticket__meta b { font-size: 11px; }

/* vertical stub strip on the right */
.ticket__stub {
  position: relative;
  z-index: 1;
  flex: 0 0 clamp(56px, 7vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 30px) 0;
  border-left: 2px dashed rgba(26, 22, 17, 0.35);
}

/* punch notches at the top & bottom of the perforation */
.ticket__stub::before,
.ticket__stub::after {
  content: "";
  position: absolute;
  left: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  z-index: 2;
}

.ticket__stub::before { top: -12px; }
.ticket__stub::after  { bottom: -12px; }

.ticket__barcode {
  width: 26px;
  height: 46%;
  background: repeating-linear-gradient(
    to bottom,
    var(--ink) 0 2px,
    transparent 2px 5px,
    var(--ink) 5px 9px,
    transparent 9px 12px
  );
  opacity: 0.85;
}

.ticket__serial {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}

.tickets__controls {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.tickets__arrow {
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--blue-bright);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.tickets__arrow:hover {
  background: var(--blue-bright);
  color: var(--ink);
}

/* ============================================================
   SCHOOL
   ============================================================ */

.school { background: var(--bg-raise); }

.school__lede {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  font-stretch: 92%;
  line-height: 1.25;
  color: var(--blue-bright);
  text-transform: uppercase;
  max-width: 46ch;
}

/* FOR ADULTS / FOR KIDS side by side */
.school__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 72px);
  margin-bottom: clamp(28px, 4vh, 48px);
}

.school__col p,
.school__body p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--body);
  text-transform: uppercase;
  margin-bottom: 26px;
  max-width: 62ch;
}

/* audience headings — full-strength headings, not small labels */
.school__sub {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  font-stretch: 92%;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--accent);
}

/* ---- photo gallery — swipeable rail ------------------------ */

.gallery-wrap {
  position: relative;
  margin: clamp(24px, 4vh, 44px) 0 clamp(32px, 5vh, 56px);
}

.gallery {
  display: flex;
  gap: 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery::-webkit-scrollbar { display: none; }
.gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.gallery__item {
  position: relative;
  /* only ~2.5 photos visible — the rest invite a swipe */
  flex: 0 0 auto;
  width: min(38%, 420px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--bg-raise);
  box-shadow: inset 0 0 0 1px var(--line);
}

@media (max-width: 760px) {
  .gallery__item { width: 78%; }
}

.gallery__controls {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.gallery__arrow {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--blue-bright);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.gallery__arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.gallery__arrow:disabled { opacity: 0.3; cursor: default; }
.gallery__arrow:disabled:hover { background: transparent; color: var(--blue-bright); border-color: var(--line); }

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}

.gallery__item:hover img { transform: scale(1.04); }

/* empty slot — shows where a photo goes, never a broken image */
.gallery__item.is-empty img { display: none; }

.gallery__item.is-empty::after {
  content: "PHOTO";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  opacity: 0.5;
}

/* "coming soon" announcements under each audience block */
/* one rule above the whole stack, however many lines are shown */
.school__soon-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* specificity has to beat ".school__col p", which sets a 26px margin */
.school__soon-list .school__soon {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  max-width: none;
}

.school__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.school__contact-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 4px;
}

.school__contact a {
  color: var(--blue-bright);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.school__contact a:hover { border-color: var(--blue-bright); }

/* Instagram glyph replaces the handle */
.school__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-bright);
  border-bottom: 0 !important;
  transition: color 0.3s ease, transform 0.3s ease;
}

.school__ig:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

/* ============================================================
   CONTACTS
   ============================================================ */

.contacts__title {
  font-size: clamp(56px, 11vw, 200px);
  font-weight: 900;
  font-stretch: 92%;
  line-height: 0.85;
  letter-spacing: -0.015em;
  margin-bottom: clamp(36px, 6vh, 80px);
}

.contacts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: clamp(48px, 9vh, 110px);
}

.contacts__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contacts__k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--body);
}

.contacts__block a {
  color: var(--blue-bright);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.contacts__block a:hover { border-color: var(--blue-bright); }

.footer {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--body);
}

/* ============================================================
   MODAL — video first, single typeface
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}

.modal.is-open { display: flex; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 35, 25, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal__ticket {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  padding: 0;
  animation: modalIn 0.55s cubic-bezier(.22, 1, .36, 1);
  scrollbar-width: none;
}

.modal__ticket::-webkit-scrollbar { display: none; }

@keyframes modalIn {
  from { transform: translateY(48px) rotate(1deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0);        opacity: 1; }
}

.modal__close {
  position: sticky;
  top: 0;
  float: right;
  margin-bottom: 8px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(248, 244, 234, 0.4);
  border-radius: 50%;
  background: rgba(3, 7, 18, 0.5);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.modal__close:hover { background: var(--paper); color: var(--ink); }

.modal__title {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 900;
  font-stretch: 88%;
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

/* video first — clean, borderless, edge to edge */
.modal__video {
  position: relative;
  clear: both;
  aspect-ratio: 16 / 9;
  background: #1a1611;
  overflow: hidden;
}

/* compact description block sliding in under the video */
.modal__info {
  background: var(--paper);
  padding: clamp(20px, 3vw, 36px);
  animation: modalIn 0.55s cubic-bezier(.22, 1, .36, 1) 0.12s backwards;
}

.modal__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.25;
  margin-bottom: 18px;
  max-width: 30ch;
}

/* run dates — reads like a marquee line */
.modal__run {
  display: inline-block;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--accent);
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  padding: 8px 0;
  margin-bottom: 20px;
}

.modal__credits {
  list-style: none;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 22, 17, 0.18);
  margin-bottom: 26px;
}

.modal__credits li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.5;
}

.modal__credits span {
  flex: 0 0 clamp(120px, 15vw, 170px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.55;
  padding-top: 2px;
}

.modal__credits b { font-weight: 700; }

.modal__desc {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 22px;
  max-width: 62ch;
}

/* long-form synopsis — sentence case, set for reading */
.modal__desc--long,
.modal__prose p {
  text-transform: none;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.65;
  letter-spacing: 0;
  max-width: 68ch;
  font-weight: 500;
}

.modal__prose { margin-bottom: 26px; }
.modal__prose p + p { margin-top: 15px; }

.modal__list { list-style: none; }

.modal__list li {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid rgba(26, 22, 17, 0.15);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.modal__list li:last-child { border-bottom: 1px solid rgba(26, 22, 17, 0.15); }

.modal__list-venue { opacity: 0.65; }

.modal__list-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: opacity 0.3s ease;
}

.modal__list-link:hover { opacity: 0.6; }

/* link through to the full project page */
.modal__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 13px 30px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  border: 1px solid var(--ink);
  transition: background 0.3s ease, color 0.3s ease;
}

.modal__cta:hover { background: transparent; color: var(--ink); }

/* not on sale yet — reads as a status, not a button you can press */
.modal__cta--soon {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  cursor: default;
}

.modal__cta--soon:hover { background: transparent; color: var(--accent); }

.modal__note {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.6;
  margin-top: 16px;
}

body.modal-open { overflow: hidden; }

/* ============================================================
   CONTACT POPUP
   ============================================================ */

.cmodal {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  animation: modalIn 0.55s cubic-bezier(.22, 1, .36, 1);
}

.cmodal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(26, 22, 17, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.cmodal__close:hover { background: var(--ink); color: var(--paper); }

.cmodal__title {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 900;
  font-stretch: 88%;
  line-height: 0.9;
  margin-bottom: 24px;
  padding-right: 56px;
}

.cmodal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cmodal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmodal__field span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.65;
}

.cmodal__field input,
.cmodal__field textarea {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(26, 22, 17, 0.05);
  border: 1px solid rgba(26, 22, 17, 0.25);
  border-radius: 0;
  padding: 12px 14px;
  outline: none;
  resize: vertical;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.cmodal__field input:focus,
.cmodal__field textarea:focus {
  border-color: var(--ink);
  background: rgba(26, 22, 17, 0.02);
}

.cmodal__send {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 14px 40px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.cmodal__send:hover { background: transparent; color: var(--ink); }

.cmodal__send:disabled {
  opacity: 0.5;
  cursor: wait;
}

.cmodal__status {
  min-height: 1em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ============================================================
   SMALL SCREENS
   ============================================================ */

@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto 1fr auto; }
  .nav__slot--2, .nav__slot--4 { display: none !important; }
  .loader__bar-track { width: 56vw; }
  .sticky-nav { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .sticky-nav__links { gap: 8px; }
  .sticky-nav__links a,
  .sticky-nav__name,
  .sticky-nav__cta { font-size: 9px; white-space: nowrap; }
  .sticky-nav__cta { display: none; }
  .sticky-nav .lang { font-size: 9px; }
  .modal__list li { grid-template-columns: 1fr; gap: 4px; }
  .ticket { width: 100%; aspect-ratio: 1.75 / 1; }
}

/* ============================================================
   AMBER ACCENT TOUCHES
   ============================================================ */

.hero__tag,
.section__index,
.projects__hint,
.sticky-nav__name,
.contacts__k,
.hero__tags { color: var(--accent); }

.tickets__arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.cmodal__status { color: var(--accent); filter: brightness(0.6); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__grain { animation: none; }
  .modal__ticket { animation: none; }
  .loader, .hero__media, .headline__word, .nav .nav__slot,
  .hero__tag, .sticky-nav, [data-fade], .ticket {
    transition-duration: 0.01s !important;
  }
}