/* ==========================================================================
   Ceren Bozkurt, cerenbozkurt.org
   Tokens lifted straight from the v4 design file so the built site matches the
   prototype rather than approximating it.
   ========================================================================== */

:root {
  --bg:        #dde2e7;
  --bg-2:      #d9dfe4;
  --bg-3:      #d5dbe0;
  --panel:     #e9edf0;
  --field:     #f6f8f9;

  --ink:       #171b20;
  --ink-70:    #3c454f;
  --ink-60:    #4c5661;
  --ink-45:    rgba(76, 86, 97, 0.85);

  --gold:      #a8862f;
  --gold-dk:   #8a6d22;

  --dark:      #151a21;
  --dark-2:    #1a212a;
  --cool:      #9fb4c6;
  --cool-lt:   #c9d5df;
  --cool-mid:  #aab5c0;
  --cool-dim:  #8d99a6;
  --paper:     #eef1f4;
  --paper-2:   #f2f4f6;

  --line:      rgba(23, 27, 32, 0.16);
  --line-soft: rgba(23, 27, 32, 0.10);

  --display: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  --sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:  1200px;
  --pad:   36px;
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------ reset */

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

html {
  scroll-behavior: smooth;
  /* Fixed nav is 72px tall, so anchors must not land under it. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold-dk); }

button { font: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: 0.002em; margin: 0; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--paper-2); }

:focus-visible {
  outline: 2px solid var(--gold-dk);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 14px 22px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

/* ----------------------------------------------------------------- shared */

.kicker {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--gold-dk); margin-bottom: 18px;
}
.kicker--cool { color: var(--cool); }

.sec__head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px; align-items: end; margin-bottom: 38px;
}
.sec__head h2 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; }
.sec__lead { font-size: 15.5px; line-height: 1.9; color: var(--ink-60); }
/* A section that is just a heading over its cards, with no kicker and no lead. */
.sec__head--tight { margin-bottom: 20px; }

.rule { display: flex; align-items: center; gap: 16px; margin-bottom: 64px; }
.rule span { flex: 1; height: 1px; background: rgba(23, 27, 32, 0.18); }

/* A single tuned string under a heading. Hovering it plucks a note. */
.gut { position: relative; height: 16px; max-width: 340px; margin-top: 14px; cursor: pointer; }
.gut i {
  position: absolute; inset: 7.5px 0 auto 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(168, 134, 47, 0));
}

.btn {
  display: inline-block; border-radius: 2px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 16px 30px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-align: center;
}
.btn--solid { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn--solid:hover { background: var(--gold-dk); border-color: var(--gold-dk); color: var(--paper-2); }
.btn--ghost {
  background: rgba(246, 248, 249, 0.4); color: var(--ink);
  border: 1px solid rgba(23, 27, 32, 0.4); font-weight: 500;
}
.btn--ghost:hover { border-color: var(--gold-dk); color: var(--gold-dk); }

/* -------------------------------------------------------------------- nav */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 4vw, var(--pad));
  background: rgba(221, 226, 231, 0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__mark img { height: 55px; width: 174px; object-fit: contain; opacity: 0.92; }
.nav__list { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }
.nav__link {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-70);
}
.nav__right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.lang { display: flex; align-items: center; gap: 2px; }
.lang__btn {
  padding: 5px 7px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
  color: rgba(76, 86, 97, 0.55);
}
.lang__btn.is-on { color: var(--ink); }
.lang__sep { color: rgba(23, 27, 32, 0.3); font-size: 12px; }

.burger {
  display: none; background: none; border: 1px solid rgba(23, 27, 32, 0.3);
  border-radius: 2px; cursor: pointer; width: 42px; height: 38px; margin-left: 8px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.burger span { display: block; width: 18px; height: 1.6px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.mmenu {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(221, 226, 231, 0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 100px 32px 44px; overflow-y: auto;
}
.mmenu[hidden] { display: none; }
.mmenu__list a {
  font-family: var(--display); font-size: 28px; padding: 15px 4px;
  border-bottom: 1px solid rgba(23, 27, 32, 0.12); display: block;
}
.mmenu__cta { display: block; margin-top: 30px; }
.mmenu__social { margin-top: 26px; display: flex; justify-content: center; gap: 26px; }
.mmenu__social a { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }

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

.hero {
  position: relative; min-height: 100svh; overflow: hidden; cursor: crosshair;
  background: linear-gradient(172deg, #b9c3cb 0%, #c9d1d7 44%, var(--bg) 100%);
}
.hero__media, .hero__media picture, .hero__media img { position: absolute; inset: 0; height: 100%; width: 100%; }
.hero__media img { object-fit: cover; object-position: 62% 24%; }
/* With no tagline the hero text stops at about a quarter of the viewport, so the
   veil only has to carry the name and the two buttons. Fading it out early
   leaves more of the photograph visible. */
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(193, 203, 211, 0.94) 0%,
    rgba(193, 203, 211, 0.60) 24%,
    rgba(193, 203, 211, 0) 48%);
}
.hero__veil--v {
  background: linear-gradient(180deg, rgba(199, 208, 215, 0.88) 0%, rgba(199, 208, 215, 0) 20%,
    rgba(205, 212, 218, 0) 72%, rgba(221, 226, 231, 0.9) 100%);
}
.hero__strings { position: absolute; inset: auto 0 0 0; width: 100%; height: 44%; pointer-events: none; z-index: 1; }
.hero__inner {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
  padding: 136px var(--pad) 0; pointer-events: none;
}
.hero__name {
  font-size: clamp(58px, 8.6vw, 116px); line-height: 0.96; margin: 0;
  animation: fadeUp 0.9s var(--ease) 0.25s both;
}
.hero .kicker { animation: fadeUp 0.9s var(--ease) both; }
.hero__tagline {
  font-size: clamp(16px, 1.7vw, 19px); color: #414b56; margin-top: 26px;
  max-width: 460px; line-height: 1.8; animation: fadeUp 0.9s var(--ease) 0.5s both;
}
.hero__cta {
  display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap;
  pointer-events: auto; animation: fadeUp 0.9s var(--ease) 0.7s both;
}
.hero__cue {
  position: absolute; inset: auto 0 22px 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
}
.hero__hint {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-70); background: rgba(246, 248, 249, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(23, 27, 32, 0.16); border-radius: 999px; padding: 9px 20px;
  animation: hintGlow 2.6s ease-in-out infinite;
}
.hero__line {
  width: 1px; height: 32px;
  background: linear-gradient(180deg, rgba(23, 27, 32, 0.6), transparent);
  animation: cuePulse 2.2s ease-in-out infinite;
}

/* ------------------------------------------------------------------ story */

.story { max-width: var(--wrap); margin: 0 auto; padding: 110px var(--pad) 90px; }
.story__head { max-width: 760px; }
.story__head h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.04; margin-bottom: 6px; }
.story__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px; margin-top: 44px; align-items: start;
}
.story__text { max-width: 620px; }
.story__text p { font-size: 16.5px; line-height: 2; color: var(--ink-70); margin-bottom: 22px; }
.story__more {
  border-left: 2px solid rgba(168, 134, 47, 0.4); padding-left: 24px; margin: 30px 0 6px;
  animation: fadeUp 0.8s var(--ease) both;
}
.story__more[hidden] { display: none; }
.story__more p { font-size: 15.5px; color: var(--ink-60); }

.moreBtn {
  display: flex; align-items: center; gap: 16px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 14px 0 10px;
}
.moreBtn__line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168, 134, 47, 0), var(--gold)); }
.moreBtn__line:last-child { background: linear-gradient(90deg, var(--gold), rgba(168, 134, 47, 0)); }
.moreBtn__txt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-dk); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px;
}

.story__frame { border: 1px solid var(--line); padding: 10px; background: var(--panel); }
.story__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 12%; }
.story__fig { margin: 0; max-width: 430px; width: 100%; justify-self: end; }
.story__fig figcaption {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-45); text-align: center; margin-top: 14px;
}

/* Scroll reveal.
   Gated on .js so the hidden state only ever exists while JavaScript is running.
   Unscoped, a script that fails to load would leave the whole biography at
   opacity 0 with no way back. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- marquee */

.marq {
  overflow: hidden; padding: 22px 0; background: var(--bg-3);
  border-block: 1px solid var(--line-soft);
}
.marq__track { display: flex; gap: 64px; width: max-content; animation: marquee 36s linear infinite; }
.marq__set { display: flex; gap: 64px; align-items: center; }
.marq__w { font-family: var(--display); font-size: 26px; color: #59636e; }

/* ------------------------------------------------------------ instruments */

.insts { background: var(--bg-2); border-bottom: 1px solid var(--line-soft); }
.insts .wrap { padding-block: 116px; }
.insts h2 { font-size: clamp(34px, 4.6vw, 54px); }
.playhint {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-dk); margin-bottom: 38px;
}
/* Five instruments, which auto-fit lands as a single row on a desktop width and
   reflows to two and then one as the viewport narrows. No orphan row. */
.inst__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.inst { position: relative; display: flex; }

.inst__card {
  position: relative; overflow: hidden; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid rgba(23, 27, 32, 0.14);
  padding: 26px 24px 22px; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px; min-height: 240px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.inst__card:hover {
  border-color: rgba(168, 134, 47, 0.7); transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(23, 27, 32, 0.10);
}
.inst__card.is-playing { border-color: var(--gold); }

/* Engraved instrument plates sit behind the card text.
   These values were set against the real artwork: the plates are already pale
   line work on flat paper, so the heavy wash a placeholder needed buried them
   completely. The wash is strongest at the top, where the name sits, and eases
   off towards the bottom where there is less text to protect. */
.inst__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0.60; transition: opacity 0.45s, transform 0.6s var(--ease);
  z-index: 0;
}
.inst__card:hover .inst__bg { opacity: 0.82; transform: scale(1.04); }
.inst__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(233, 237, 240, 0.88) 0%,
    rgba(233, 237, 240, 0.70) 42%,
    rgba(233, 237, 240, 0.44) 100%);
}
.inst__bg--empty { background: none; opacity: 1; }
.inst__bg--empty::after {
  background: radial-gradient(ellipse 120% 80% at 80% 0%, rgba(168, 134, 47, 0.10), transparent 70%);
}

.inst__card > *:not(.inst__bg) { position: relative; z-index: 1; }
.inst__top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.inst__num { font-size: 11px; font-weight: 600; color: rgba(138, 109, 34, 0.9); letter-spacing: 0.1em; }
.inst__eq { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.inst__card.is-playing .inst__eq { display: flex; }
.inst__eq i {
  width: 3px; height: 100%; background: var(--gold); transform-origin: bottom;
  animation: eqBar 0.5s ease-in-out infinite alternate;
}
.inst__eq i:nth-child(2) { animation-delay: 0.14s; }
.inst__eq i:nth-child(3) { animation-delay: 0.27s; }
.inst__eq i:nth-child(4) { animation-delay: 0.40s; }

.inst__name { font-family: var(--display); font-size: clamp(24px, 2.4vw, 31px); line-height: 1.06; }
.inst__desc { font-size: 13.5px; line-height: 1.7; color: var(--ink-60); flex: 1; }
.inst__play { font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dk); }

/* The in-card player. One stage exists at a time; it covers the whole card
   and hands off to the next card on hover (local clips) or click. */
.inst__stage { position: absolute; inset: 0; z-index: 4; background: #0e1217; display: block; }
.inst__stage video, .inst__stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.inst__stage video { object-fit: cover; cursor: pointer; }
.inst__stop {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  border-radius: 999px; border: 1px solid rgba(238, 241, 244, 0.5);
  background: rgba(14, 18, 23, 0.65); color: var(--paper);
  cursor: pointer; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.inst__stop:hover { border-color: #fff; }
.inst.is-live .inst__card { border-color: var(--gold); }

/* ------------------------------------------------------------------ quote */

.quote { background: var(--bg); }
.quote__in { max-width: 940px; margin: 0 auto; padding: 100px var(--pad); text-align: center; }
.quote__in svg { margin: 0 auto 26px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--display); font-size: clamp(28px, 4.4vw, 50px); line-height: 1.3; }
.quote__by {
  margin-top: 26px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-dk);
}

/* ---------------------------------------------------------------- theater */

.curtain { position: relative; height: clamp(520px, 88vh, 800px); overflow: hidden; background: #c6cdd3; }
.curtain picture, .curtain img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Ceren sits in the bottom third of this frame with a lot of sky above her.
   In a band this wide and short the crop keeps only about half the height, so
   anchoring near the bottom is what puts her and the bağlama in shot instead of
   filling the band with empty sky and cutting her off at the shoulders. */
.curtain img { object-fit: cover; object-position: 50% 92%; }
.curtain__top { position: absolute; inset: 0 0 auto 0; height: 90px; background: linear-gradient(180deg, var(--bg), rgba(221, 226, 231, 0)); }
.curtain__bot {
  position: absolute; inset: auto 0 0 0; height: 21%;
  background: linear-gradient(180deg, rgba(21, 26, 33, 0) 0%, rgba(21, 26, 33, 0.6) 70%, var(--dark) 100%);
}
.curtain__cap {
  position: absolute; inset: auto 0 22px 0; text-align: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(223, 230, 236, 0.9);
}

.theater {
  position: relative; overflow: hidden; color: var(--paper);
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 44%, var(--dark) 100%);
}
.theater::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 1000px 540px at 22% 4%, rgba(223, 230, 236, 0.07), transparent 62%);
}
.theater__grid {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 60px; align-items: start; padding-block: 110px 120px;
}
.theater h2 { font-size: clamp(38px, 5vw, 62px); line-height: 1.02; color: var(--paper); }
.theater__lead { font-size: 15.5px; line-height: 1.95; color: var(--cool-mid); margin: 26px 0 0; max-width: 470px; }
.theater__hint {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: #6d7986; margin-top: 30px;
}

.thtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.thtab {
  background: none; border: 1px solid rgba(201, 213, 223, 0.28); border-radius: 2px;
  padding: 9px 14px; cursor: pointer; text-align: left; color: var(--cool);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.thtab:hover { border-color: rgba(201, 213, 223, 0.6); color: var(--cool-lt); }
.thtab.is-on { border-color: var(--paper); color: var(--paper); background: rgba(223, 230, 236, 0.06); }
.thtab__city { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.thtab__name { display: block; font-size: 10px; color: var(--cool-dim); margin-top: 2px; }

.thpanels {
  margin-top: 24px; background: rgba(20, 25, 32, 0.7);
  border: 1px solid rgba(223, 230, 236, 0.14); padding: 28px; min-height: 340px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.thpanel[hidden] { display: none; }
.thpanel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.thpanel__head h3 { font-size: clamp(22px, 2.2vw, 28px); color: var(--paper); }
.thpanel__head p { font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cool); }
.thpanel__link {
  display: inline-block; margin-top: 18px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cool);
}
.thpanel__link:hover { color: var(--paper); }

.prod { border-top: 1px solid rgba(223, 230, 236, 0.12); padding: 16px 0; }
.prod__title { font-size: 19px; line-height: 1.25; color: var(--paper); }
.prod__sub { font-family: var(--sans); font-size: 12px; font-weight: 300; color: var(--cool-dim); }
.prod__credit { font-size: 12px; line-height: 1.7; color: var(--cool-dim); margin: 6px 0 0; }
.prod__honour {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #c9a13f;
}
.prod__role { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cool); margin: 8px 0 10px; }
.prod__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.prod__tags li {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cool); border: 1px solid rgba(159, 180, 198, 0.45); border-radius: 999px; padding: 3px 10px;
}

.map3d { perspective: 1300px; }
.map__plane {
  position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 62 / 72;
  transform-style: preserve-3d; transform: rotateX(9deg);
  transition: transform 0.25s ease-out; will-change: transform;
}
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }

.mapnode {
  position: absolute; transform: translate(-50%, -50%);
  background: none; border: none; cursor: pointer; padding: 14px; z-index: 3;
  /* Coordinates are set by JS once the projection is known. */
  left: 50%; top: 50%;
}
.mapnode__ring {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 999px; border: 1px solid rgba(238, 241, 244, 0.7); opacity: 0;
}
.mapnode.is-on .mapnode__ring { opacity: 1; animation: nodePulse 2.6s ease-out infinite; }
.mapnode__dot {
  display: block; width: 9px; height: 9px; border-radius: 999px; background: var(--cool);
  box-shadow: 0 0 8px rgba(159, 180, 198, 0.5); transition: background 0.3s, box-shadow 0.3s, width 0.3s, height 0.3s;
}
.mapnode.is-on .mapnode__dot {
  width: 13px; height: 13px; background: var(--paper);
  box-shadow: 0 0 18px rgba(238, 241, 244, 0.9), 0 0 6px rgba(238, 241, 244, 0.9);
}
.mapnode__lab { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.mapnode__city { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cool); }
.mapnode.is-on .mapnode__city { color: var(--paper); }
.mapnode__th { display: block; font-size: 10px; letter-spacing: 0.06em; color: #7d8996; margin-top: 2px; }

.map__note {
  display: flex; justify-content: space-between; gap: 14px; max-width: 620px; margin: 18px auto 0;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #5f6b78;
}

/* --------------------------------------------------------------- releases */

.rels { background: var(--bg); border-top: 1px solid var(--line-soft); }
.rels .wrap { padding-block: 116px; }
.rel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.rel {
  background: var(--panel); border: 1px solid var(--line); padding: 30px 28px 26px;
  display: flex; flex-direction: column; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.rel:hover { border-color: rgba(168, 134, 47, 0.7); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(23, 27, 32, 0.10); }
.rel__meta { font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-dk); }
.rel__title { font-size: 26px; line-height: 1.15; margin: 10px 0 6px; }
.rel__tracks { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45); }
.rel__list { margin: 16px 0 0; flex: 1; }
.rel__list li {
  font-size: 13.5px; color: var(--ink-60); padding: 6px 0;
  border-top: 1px solid rgba(23, 27, 32, 0.10);
}
.rel__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.rel__links a { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dk); }

/* ----------------------------------------------------------------- videos */

.vids { background: var(--bg-2); border-top: 1px solid var(--line-soft); }
.vids .wrap { padding-block: 116px; }
.vid__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.vid[hidden] { display: none; }
.vid__link {
  display: block; background: var(--panel); border: 1px solid rgba(23, 27, 32, 0.14);
  transition: border-color 0.3s, transform 0.3s; height: 100%;
}
.vid__link:hover { border-color: rgba(168, 134, 47, 0.65); transform: translateY(-3px); }
.vid__thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #ccd4da; }
.vid__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75); transition: filter 0.3s; }
.vid__link:hover .vid__thumb img { filter: none; }
.vid__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(246, 248, 249, 0.85);
  background: rgba(23, 27, 32, 0.55); color: var(--paper-2);
  display: flex; align-items: center; justify-content: center; font-size: 13px; padding-left: 3px;
}
.vid__title { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-60); padding: 10px 12px; min-height: 38px; }
.vids__foot { display: flex; justify-content: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ music */

.music { background: var(--bg-3); border-top: 1px solid var(--line-soft); }
.music__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 64px; align-items: center; padding-block: 116px;
}
.music h2 { font-size: clamp(34px, 4.6vw, 54px); margin-bottom: 4px; }
.music__lead { font-size: 15.5px; line-height: 1.95; color: var(--ink-60); margin: 22px 0 32px; max-width: 460px; }
.music__player { border: 1px solid rgba(23, 27, 32, 0.2); background: var(--ink); padding: 12px; }
.music__player iframe { border: none; border-radius: 8px; width: 100%; height: 420px; }

/* -------------------------------------------------------------- instagram */

.ig { background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.ig .wrap { padding-block: 96px; }
.ig__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.ig__head h2 { font-size: clamp(26px, 3.4vw, 40px); }
.ig__follow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dk); }
.ig__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 225px; gap: 12px; }
.ig__tile { display: block; overflow: hidden; }
.ig__tile picture, .ig__tile img { width: 100%; height: 100%; }
.ig__tile img { object-fit: cover; transition: transform 0.4s; }
.ig__tile:hover img { transform: scale(1.04); }
.ig__tile--cta {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
  background: rgba(23, 27, 32, 0.05); border: 1px solid rgba(23, 27, 32, 0.2); text-align: center; padding: 16px;
}
.ig__tile--cta:hover { background: rgba(168, 134, 47, 0.12); }
.ig__ctaTitle { font-family: var(--display); font-size: 21px; }
.ig__ctaSub { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dk); }

/* ------------------------------------------------------------------ dates */

.dates { background: var(--bg); }
.dates .wrap { padding-block: 116px 60px; }
.dates h2 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; }
.dates__lead { margin: 20px 0 28px; max-width: 560px; }
.dt__list { border-top: 1px solid var(--line); }
.dt {
  display: grid; grid-template-columns: minmax(160px, 240px) 1fr auto; gap: 24px; align-items: center;
  padding: 22px 12px; border-bottom: 1px solid var(--line); transition: background 0.2s;
}
.dt:hover { background: rgba(168, 134, 47, 0.07); }
.dt__when { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-dk); }
.dt__prod { font-family: var(--display); font-size: 23px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dt__badge {
  font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-dk); border: 1px solid rgba(168, 134, 47, 0.6); border-radius: 999px; padding: 3px 9px;
}
.dt__venue { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-60); margin-top: 4px; }
.dt__tix {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-60); border: 1px solid rgba(76, 86, 97, 0.35); padding: 8px 14px; border-radius: 2px; white-space: nowrap;
}
.dt__tix:hover { border-color: var(--gold-dk); color: var(--gold-dk); }
.dates__empty, .dates__note { font-size: 13px; color: var(--ink-45); margin-top: 16px; }

/* ---------------------------------------------------------------- booking */

.booking .wrap { padding-block: 40px 116px; }
.bk {
  background: var(--panel); border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.bk__media { position: relative; min-height: 400px; overflow: hidden; }
.bk__media picture, .bk__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk__media img { object-fit: cover; object-position: 64% 18%; }
.bk__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 26, 33, 0.05), rgba(21, 26, 33, 0.86)); }
.bk__copy { position: absolute; inset: auto 32px 32px 32px; color: var(--paper-2); }
.bk__copy h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; color: var(--paper-2); }
.bk__copy p { font-size: 14px; line-height: 1.8; color: #c3ccd4; margin-top: 16px; }

.bk__form { padding: 44px 40px; display: flex; flex-direction: column; gap: 18px; }
.bk__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bk__form label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60);
}
.bk__form abbr { text-decoration: none; color: var(--gold-dk); }
.bk__form input, .bk__form textarea {
  font-family: var(--sans); font-size: 14px; font-weight: 400; width: 100%;
  background: var(--field); border: 1px solid rgba(23, 27, 32, 0.2); color: var(--ink);
  padding: 13px 14px; border-radius: 2px; outline: none; transition: border-color 0.2s;
}
.bk__form input:focus, .bk__form textarea:focus { border-color: var(--gold-dk); }
.bk__form textarea { resize: vertical; }
.bk__form input[aria-invalid="true"], .bk__form textarea[aria-invalid="true"] { border-color: #a4442f; }
.bk__hint { font-size: 11px; color: var(--ink-45); }
.bk__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk__send { margin-top: 6px; border: none; }
.bk__send[disabled] { opacity: 0.6; cursor: progress; }
.bk__status:empty { display: none; }
.bk__status { font-size: 13px; line-height: 1.7; padding: 12px 14px; border-radius: 2px; }
.bk__status.is-ok { background: rgba(101, 138, 74, 0.14); color: #3f5c2c; }
.bk__status.is-err { background: rgba(164, 68, 47, 0.12); color: #8a3a26; }
.bk__mail { font-size: 12px; color: var(--ink-45); }
.bk__mail a { color: var(--gold-dk); }

/* ---------------------------------------------------------------- support */

.support .wrap { padding-block: 0 90px; }
.support h2 { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.1; }
.tier__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tier {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: var(--panel); border: 1px solid var(--line); padding: 30px 28px 26px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.tier:hover { border-color: rgba(168, 134, 47, 0.75); transform: translateY(-5px); box-shadow: 0 18px 38px rgba(23, 27, 32, 0.12); }
.tier__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tier__amt { font-family: var(--display); font-size: 42px; line-height: 1; }
.tier__name { font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-dk); }
.tier__desc { font-size: 13.5px; line-height: 1.65; color: var(--ink-60); min-height: 48px; margin-top: 6px; flex: 1; }
.tier__lines { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tier__lines i { display: block; background: linear-gradient(90deg, var(--gold), rgba(168, 134, 47, 0.15)); border-radius: 1px; }
.tier__cta { font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dk); margin-top: 14px; }

/* -------------------------------------------------------------------- faq */

.faq { background: var(--bg-3); border-top: 1px solid var(--line-soft); }
.faq .wrap { padding-block: 96px; }
.faq h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 36px; }
.faq__list { max-width: 860px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer; padding: 22px 40px 22px 0; position: relative; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.5; display: inline; }
.faq__item summary::after {
  content: '+'; position: absolute; right: 6px; top: 20px;
  font-size: 22px; color: var(--gold-dk); transition: transform 0.25s;
}
.faq__item[open] summary::after { content: '\2013'; }
.faq__item p { font-size: 15px; line-height: 1.9; color: var(--ink-60); padding: 0 40px 24px 0; }

/* ----------------------------------------------------------------- footer */

.foot { border-top: 1px solid rgba(23, 27, 32, 0.12); background: var(--bg-3); }
.foot__in { padding-block: 70px 96px; text-align: center; }
.foot__sig { width: min(484px, 80vw); height: auto; margin: 0 auto 28px; opacity: 0.92; }
.foot__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 36px; }
.foot__links { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-bottom: 30px; }
.foot__links a { font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.foot__note { font-size: 12px; color: rgba(76, 86, 97, 0.7); }

/* Made-by credit with the real beonbrand SVG mark. */
.madeby {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: center; margin-top: 34px;
  padding-top: 26px; border-top: 1px solid rgba(23, 27, 32, 0.10);
  width: 100%;
}
.madeby__label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(76, 86, 97, 0.7);
}
.madeby__logo { height: 30px; width: auto; display: block; transition: opacity 0.2s; }
.madeby:hover .madeby__logo { opacity: 0.72; }
.madeby:hover .madeby__label { color: var(--ink-60); }

/* -------------------------------------------------- announcement strip
   Written by Ceren in /admin/, rendered under the fixed nav. Dark so it is
   unmistakably a notice, gold link, dismissible per session. */
.announce {
  position: fixed; left: 0; right: 0; z-index: 59;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 46px 10px 18px;
  background: rgba(23, 27, 32, 0.92); color: #eef1f4;
  font-size: 12.5px; letter-spacing: 0.02em; text-align: center; line-height: 1.5;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.announce a { color: #e8c96a; font-weight: 600; }
.announce a:hover { color: #f2d98a; }
.announce button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: rgba(238, 241, 244, 0.7);
  font-size: 13px; cursor: pointer; padding: 8px;
}
.announce button:hover { color: #fff; }

/* -------------------------------------------------------------- HUD + FAB */

.hud {
  position: fixed; left: 28px; bottom: 22px; z-index: 55; width: 280px;
  pointer-events: none; opacity: 0; transition: opacity 0.6s;
}
.hud.is-on { opacity: 0.95; }
.hud__staff {
  position: relative; height: 25px;
  background: repeating-linear-gradient(180deg, rgba(23, 27, 32, 0.22) 0 1px, transparent 1px 6px);
}
.hud__note { position: absolute; left: 3%; top: -9px; font-size: 26px; line-height: 1; color: var(--gold-dk); transition: left 0.15s linear; }
.hud__row {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-45);
}

.fab {
  position: fixed; right: 26px; bottom: 24px; z-index: 56;
  background: var(--ink); color: var(--paper);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 2px; box-shadow: 0 10px 34px rgba(23, 27, 32, 0.3);
  transform: translateY(90px); opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s, background 0.2s;
}
.fab.is-on { transform: none; opacity: 1; }
.fab:hover { background: var(--gold-dk); color: var(--paper-2); }

/* -------------------------------------------------------------- lightbox */

.lb { position: fixed; inset: 0; z-index: 100; animation: lightsDown 0.4s ease both; }
.lb[hidden] { display: none; }
.lb__scrim { position: absolute; inset: 0; background: rgba(14, 18, 23, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lb__inner {
  position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center;
  max-width: 1140px; margin: 0 auto; padding: clamp(12px, 2.5vh, 26px) clamp(14px, 3vw, 32px);
}
.lb__bar { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; }
.lb__now { font-size: 10.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cool-lt); flex: 1; }
.lb__eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.lb__eq i { width: 3px; height: 100%; background: var(--cool); transform-origin: bottom; animation: eqBar 0.5s ease-in-out infinite alternate; }
.lb__eq i:nth-child(2) { animation-delay: 0.16s; }
.lb__eq i:nth-child(3) { animation-delay: 0.30s; }
.lb__x {
  background: rgba(23, 27, 32, 0.6); border: 1px solid rgba(223, 230, 236, 0.3); color: var(--paper);
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.lb__x:hover { border-color: var(--cool); color: var(--cool); }
.lb__stage {
  align-self: center; width: min(100%, calc((100vh - 260px) * 1.7778));
  background: #000; border: 1px solid rgba(223, 230, 236, 0.18);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75); animation: playerIn 0.55s var(--ease) 0.08s both;
}
.lb__stage iframe, .lb__stage video { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; }
.lb__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 2px 10px; align-self: center; width: min(100%, calc((100vh - 260px) * 1.7778));
}
.lb__title { font-size: 14px; font-weight: 500; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lb__nav button {
  background: none; border: 1px solid rgba(223, 230, 236, 0.35); color: var(--paper);
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer; font-size: 20px;
  display: flex; align-items: center; justify-content: center; padding: 0 0 2px;
}
.lb__nav button:hover { border-color: var(--cool); color: var(--cool); }
.lb__count { font-size: 11.5px; letter-spacing: 0.14em; color: var(--cool-dim); min-width: 58px; text-align: center; }
.lb__esc { text-align: center; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(141, 153, 166, 0.6); padding-top: 12px; }

/* Instrument clips. These are Shorts style, so the frame must follow the file
   rather than force 16:9: width and height stay auto and the video sizes itself
   from its own dimensions, capped by the viewport. Portrait and landscape both
   land correctly with no per-clip configuration. */
.lb.is-local .lb__nav, .lb.is-local .lb__count { display: none; }
.lb.is-local .lb__stage,
.lb.is-local .lb__foot { width: auto; max-width: 100%; min-width: 0; }
.lb.is-local .lb__stage { display: flex; justify-content: center; background: #000; }
/* Defaults to 9:16 because that is the format these clips are shot in, so a
   Shorts clip is correctly shaped on the very first frame. JS overwrites
   aspect-ratio from the real metadata once it arrives, which fixes any
   landscape clip without anyone configuring it. Relying on width:auto alone
   does not work: a video with no metadata yet falls back to 300x150. */
.lb.is-local .lb__stage video {
  aspect-ratio: 9 / 16;
  height: min(76vh, 900px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.lb.is-local .lb__foot { justify-content: center; }
.lb.is-local .lb__title { white-space: normal; text-align: center; }

/* Instagram post in the lightbox: a tall phone-shaped frame. */
.lb.is-ig .lb__nav, .lb.is-ig .lb__count, .lb.is-ig .lb__esc { display: none; }
.lb.is-ig .lb__stage, .lb.is-ig .lb__foot { width: auto; max-width: 100%; min-width: 0; }
.lb.is-ig .lb__stage { display: flex; justify-content: center; background: #000; }
.lb.is-ig .lb__stage iframe {
  aspect-ratio: auto;
  width: min(92vw, 400px);
  height: min(80vh, 700px);
}
.lb.is-ig .lb__foot { justify-content: center; }

body.is-locked { overflow: hidden; }

/* Floating note glyphs spawned on interaction. */
.floatnote { position: fixed; z-index: 80; pointer-events: none; font-family: Georgia, serif; color: var(--gold-dk); }

/* ---------------------------------------------------- render performance
   Everything below the hero renders lazily: the browser skips layout and
   paint for sections still far off-screen, which is most of this long page.
   The intrinsic-size placeholder keeps the scrollbar honest. */
.insts, .theater, .rels, .vids, .music, .ig, .gbook, .dates, .booking, .faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ------------------------------------------------------------- animations */

@keyframes fadeUp    { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes cuePulse  { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes eqBar     { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes hintGlow  { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes lightsDown { from { opacity: 0; } to { opacity: 1; } }
@keyframes playerIn  { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes nodePulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .hud { display: none; }
}

@media (max-width: 880px) {
  :root { --pad: 22px; }
  .nav__list { display: none; }
  .burger { display: flex; }
  .hero { cursor: default; }
  /* Name at the top, buttons at the bottom: the middle of the frame, where
     her face sits, stays completely clear. */
  .hero__inner {
    display: flex; flex-direction: column;
    min-height: 100svh;
    padding-top: 118px;
    padding-bottom: 118px;
  }
  .hero__cta { margin-top: auto; gap: 10px; }
  .hero__cta .btn { flex: 1 1 0; padding: 15px 10px; font-size: 10px; white-space: nowrap; }
  .hero__media img { object-position: 60% 18%; }
  /* The engraving becomes a stamp along the right edge instead of a
     cover-zoomed crop; the text keeps the left side to itself. */
  .inst__card { min-height: 210px; }
  .inst__bg {
    background-size: auto 88%;
    background-position: right -24px center;
    background-repeat: no-repeat;
    opacity: 0.85;
  }
  /* Horizontal wash on mobile: the left side stays paper for the text, the
     right side lets the engraving breathe. The engravings are pale line art,
     so the vertical desktop wash was drowning them entirely. */
  .inst__bg::after {
    background: linear-gradient(90deg,
      rgba(233, 237, 240, 0.94) 0%,
      rgba(233, 237, 240, 0.55) 52%,
      rgba(233, 237, 240, 0.06) 100%);
  }
  .inst__card:hover .inst__bg { opacity: 1; transform: none; }
  .inst__desc, .inst__name { max-width: 76%; }
  .story { padding-block: 80px 70px; }
  .insts .wrap, .rels .wrap, .vids .wrap, .faq .wrap { padding-block: 84px; }
  .music__grid { padding-block: 84px; gap: 40px; }
  .theater__grid { padding-block: 84px 90px; gap: 44px; }
  .thpanels { padding: 22px 18px; }
  .bk__form { padding: 32px 24px; }
  .bk__row { grid-template-columns: 1fr; }
  .dt { grid-template-columns: 1fr; gap: 10px; }
  .dt__tix { justify-self: start; }
  .fab { right: 14px; bottom: 14px; padding: 13px 20px; font-size: 10.5px; }
  .lb__stage, .lb__foot { width: 100%; }
  .lb__esc { display: none; }
  .ig__grid { grid-auto-rows: 170px; }
  .story__fig { justify-self: start; }
}

@media (max-width: 520px) {
  .hero__name { font-size: clamp(46px, 13vw, 72px); }
  .foot__links { gap: 18px; }
  .marq__w { font-size: 21px; }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marq__track { animation: none; }
  .hero .kicker, .hero__name, .hero__tagline, .hero__cta { animation: none; }
}

/* ------------------------------------------------------------------ print */

@media print {
  .nav, .mmenu, .fab, .hud, .lb, .hero__strings, .music__player, .marq { display: none !important; }
  body { background: #fff; color: #000; }
  .story__more { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* -------------------------------------------------------------- guestbook
   An open, thick-covered book. Cream paper against the site's cool slate is
   deliberate: the book should read as an object from another time. */

.gbook { background: var(--bg-2); border-top: 1px solid var(--line-soft); }
.gbook .wrap { padding-block: 116px; }
.gbook h2 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; }
.gbook__lead { margin: 20px 0 52px; max-width: 560px; }

.book { position: relative; max-width: 1060px; margin: 0 auto; perspective: 2400px; }

/* The cover: a slab of near-black board with a blind gold tooling line,
   proud of the page block on every side, thickest at the fore-edge. */
.book::before {
  content: ''; position: absolute; inset: -16px -20px -24px;
  background: linear-gradient(140deg, #242b34 0%, #171b20 52%, #212831 100%);
  border-radius: 4px 12px 12px 4px;
  box-shadow: 0 36px 70px rgba(23, 27, 32, 0.35), 0 8px 20px rgba(23, 27, 32, 0.25);
}
.book::after {
  content: ''; position: absolute; inset: -9px -12px -16px;
  border: 1px solid rgba(168, 134, 47, 0.45);
  border-radius: 2px 9px 9px 2px;
  pointer-events: none;
}

/* The page block. The layered shadows on the right and bottom are the stacked
   leaves of the closed part of the book. */
.book__spread {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 30px 1fr;
  background: #f5f1e6;
  box-shadow:
    2px 0 0 #eae5d4, 4px 0 0 #f2eddd, 6px 0 0 #ddd6c2, 8px 0 0 #efe9d8,
    0 2px 0 #eae5d4, 0 4px 0 #f2eddd, 0 6px 0 #ddd6c2, 0 8px 0 #e6dfcc, 0 10px 0 #d3cbb4;
}
/* Paper grain, generated inline so it costs no request. */
.book__spread::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.book__page {
  position: relative; padding: 42px 44px 46px; min-height: 560px;
  display: flex; flex-direction: column;
}
/* Each page darkens gently toward the spine, the way real paper curves away. */
.book__page--left { background: linear-gradient(270deg, rgba(23, 27, 32, 0.07), transparent 16%); }
.book__page--right { background: linear-gradient(90deg, rgba(23, 27, 32, 0.07), transparent 16%); }
/* The classic notebook margin rule on the writing page. */
.book__page--left::after {
  content: ''; position: absolute; left: 30px; top: 24px; bottom: 24px; width: 1px;
  background: rgba(168, 134, 47, 0.28);
}

/* The gutter: a soft valley with visible stitching. */
.book__spine {
  position: relative;
  background: linear-gradient(90deg, rgba(23, 27, 32, 0.12), rgba(23, 27, 32, 0.02) 34%, rgba(23, 27, 32, 0.02) 66%, rgba(23, 27, 32, 0.12));
}
.book__spine::after {
  content: ''; position: absolute; left: 50%; top: 28px; bottom: 28px; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(23, 27, 32, 0.35) 0 12px, transparent 12px 27px);
}

/* Small letterpress running heads. */
.book__head {
  font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(104, 84, 37, 0.75); margin: 0 0 26px;
}

/* A gold ribbon marker hanging over the cover edge. */
.book__ribbon {
  position: absolute; top: -17px; right: 46px; width: 26px; height: 116px; z-index: 3;
  background: linear-gradient(180deg, #c59d3c, #a8862f 55%, #8a6d22);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
  box-shadow: 0 6px 12px rgba(23, 27, 32, 0.25);
}

/* ----- writing in ink on the left page ----- */

.ink__field { display: block; margin-bottom: 18px; }
.ink__label {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(76, 86, 97, 0.75); margin-bottom: 2px;
}
.ink__label abbr { color: var(--gold-dk); text-decoration: none; }

.ink__input {
  width: 100%; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px dotted rgba(23, 27, 32, 0.4);
  padding: 2px 2px 6px;
  font: 500 21px/1.4 Caveat, 'Segoe Script', cursive;
  color: #262b33; caret-color: var(--gold-dk); outline: none;
}
.ink__input:focus { border-bottom: 1px solid var(--gold-dk); }
.ink__input[aria-invalid="true"] { border-bottom: 1px solid #a4442f; }

/* The ruled page itself. The rules live on the textarea with
   background-attachment: local, so they scroll with the writing and the pen
   always sits on a line. */
.ink__paper {
  width: 100%; height: 225px;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(23, 27, 32, 0.13) 31px 32px);
  background-attachment: local;
  border: 0; border-radius: 0; padding: 0 2px;
  font: 500 21px/32px Caveat, 'Segoe Script', cursive;
  color: #262b33; caret-color: var(--gold-dk);
  resize: none; outline: none;
}
.ink__field--msg .ink__label { margin-bottom: 8px; }
.ink__paper[aria-invalid="true"] { box-shadow: inset 0 -2px 0 #a4442f; }

.book__signrow { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.book__sigline { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168, 134, 47, 0), rgba(168, 134, 47, 0.55)); }
.book__send { padding: 13px 24px; font-size: 10.5px; }
.book__send[disabled] { opacity: 0.6; cursor: progress; }

.gb__status:empty { display: none; }
.gb__status { font-size: 13px; line-height: 1.7; padding: 11px 13px; border-radius: 2px; margin-top: 14px; }
.gb__status.is-ok { background: rgba(101, 138, 74, 0.14); color: #3f5c2c; }
.gb__status.is-err { background: rgba(164, 68, 47, 0.12); color: #8a3a26; }

/* ----- reading the right page ----- */

.book__flip { flex: 1; transform-origin: left center; }
.book__flip.is-turn { animation: pageTurn 0.5s var(--ease); }
@keyframes pageTurn {
  from { transform: rotateY(-58deg); opacity: 0.15; }
  to { transform: none; opacity: 1; }
}

.ink__entry { padding: 13px 2px 11px; }
.ink__entry + .ink__entry { border-top: 1px solid rgba(23, 27, 32, 0.08); }
.ink__entry p {
  font: 500 19px/1.55 Caveat, 'Segoe Script', cursive;
  color: #262b33; margin: 0; white-space: pre-line;
}
/* Different visitors, different pens: alternate ink warmth and a faint slant. */
.ink__entry:nth-child(even) p { color: #33302a; }
.ink__entry:nth-child(odd) p { transform: rotate(-0.3deg); }
.ink__entry:nth-child(even) p { transform: rotate(0.25deg); }
.ink__entry footer {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 5px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.ink__entry footer b { color: var(--gold-dk); font-weight: 600; }
.ink__entry footer time { color: rgba(76, 86, 97, 0.7); font-weight: 500; letter-spacing: 0.1em; }

.ink__empty {
  font: 500 21px/1.6 Caveat, 'Segoe Script', cursive;
  color: rgba(76, 86, 97, 0.95); padding: 26px 2px;
}
.ink__empty::before {
  content: ''; display: block; width: 11px; height: 11px; margin: 0 0 14px 2px;
  background: var(--gold); transform: rotate(45deg); opacity: 0.7;
}

.book__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.book__nav[hidden] { display: none; }
.book__nav button {
  background: none; border: 1px solid rgba(23, 27, 32, 0.25); border-radius: 999px;
  width: 34px; height: 34px; cursor: pointer; font-size: 16px; color: var(--ink-60);
  display: flex; align-items: center; justify-content: center; padding: 0 0 2px;
}
.book__nav button:disabled { opacity: 0.35; cursor: default; }
.book__nav button:not(:disabled):hover { border-color: var(--gold-dk); color: var(--gold-dk); }
.book__pageno { font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(104, 84, 37, 0.8); }

/* A dog-eared corner that turns to the next page. */
.book__corner {
  position: absolute; right: 0; bottom: 0; width: 54px; height: 54px;
  border: 0; padding: 0; cursor: pointer; background: none;
}
.book__corner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(315deg, var(--bg-2) 0 50%, transparent 50%);
}
.book__corner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(315deg, transparent 0 50%, #e9e3d1 50%, #f8f4ea 96%);
  box-shadow: -3px -3px 6px rgba(23, 27, 32, 0.10);
  clip-path: polygon(0 100%, 100% 0, 0 0);
  transition: transform 0.25s var(--ease);
}
.book__corner:hover::after { transform: translate(-3px, -3px); }
.book__corner[hidden] { display: none; }

.gb__noscript { font-size: 13px; color: var(--ink-45); margin-top: 10px; }

/* Share panel after a note is submitted. */
.gbshare { position: fixed; inset: 0; z-index: 110; animation: lightsDown 0.3s ease backwards; }
.gbshare[hidden] { display: none; }
.gbshare__scrim { position: absolute; inset: 0; background: rgba(14, 18, 23, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gbshare__panel {
  position: relative; max-width: 420px; margin: 4vh auto 0; max-height: 92vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); padding: 28px 26px 24px;
  animation: playerIn 0.5s var(--ease) 0.05s backwards;
}
.gbshare__panel h3 { font-size: 24px; padding-right: 44px; }
.gbshare__panel > p { font-size: 13.5px; color: var(--ink-60); margin: 8px 0 18px; }
.gbshare__canvas {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(23, 27, 32, 0.25);
}
.gbshare__btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.gbshare__btns .btn { padding: 13px 20px; font-size: 10.5px; }
.gbshare__x, .gbshare__wa {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-dk); padding: 8px 4px;
}
.gbshare__close { position: absolute; right: 14px; top: 14px; background: rgba(23, 27, 32, 0.08); border-color: rgba(23, 27, 32, 0.25); color: var(--ink); }

/* Optional photo on a calendar row, set from the admin panel. */
.dt--ph { grid-template-columns: 64px minmax(140px, 200px) 1fr auto; }
.dt__ph { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); background: var(--panel); }

@media (max-width: 880px) {
  .gbook .wrap { padding-block: 84px; }
  .book::before { inset: -10px -12px -16px; }
  .book::after { inset: -5px -7px -11px; }
  .book__spread { grid-template-columns: 1fr; }
  .book__spine { display: none; }
  .book__page { min-height: 0; padding: 30px 24px 34px; }
  .book__page--left, .book__page--right { background: none; }
  .book__page--right { border-top: 1px dashed rgba(23, 27, 32, 0.16); }
  .book__ribbon { top: -11px; right: 24px; width: 22px; height: 86px; }
  .gbshare__panel { margin: 2vh 14px 0; }
  .dt--ph { grid-template-columns: 56px 1fr; }
  .dt__ph { width: 56px; height: 56px; }
}

/* Form labels are flex columns, which stranded the required-field star on its
   own line. Text and star share the first row; the field wraps to a full-width
   second row. */
.bk__form label, .gb__form label {
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
}
.bk__form label input, .bk__form label textarea,
.gb__form label input, .gb__form label textarea {
  flex: 1 1 100%; margin-top: 4px;
}