/* MERIDIAN — Theatre. One axis, five acts, nothing else (v3 rebuild) */

@font-face {
  font-family: "Boska";
  src: url("../assets/fonts/Boska-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Boska";
  src: url("../assets/fonts/Boska-VariableItalic.woff2") format("woff2");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

:root {
  --night: #0b100d;
  --night-2: #101613;
  --ink: #ece7db;
  --ink-2: #9aa39a;
  --ink-3: #667065;
  --gold: #cbb27a;
  --hair: rgba(236, 231, 219, 0.13);
  --serif: "Boska", Georgia, serif;
  --sans: "Switzer", "Helvetica Neue", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--night); }

.mark {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- The axis every act hangs from ---------- */
.axis {
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--hair) 12%, var(--hair) 88%, transparent);
  z-index: 0;
  pointer-events: none;
}

/* Minimal corner marks — no nav bar */
.corner {
  position: fixed;
  z-index: 30;
  padding: clamp(16px, 2.4vw, 28px);
}
.corner-tl { top: 0; left: 0; }
.corner-tr { top: 0; right: 0; }
.corner-tr a { transition: color 0.3s ease; }
.corner-tr a:hover { color: var(--gold); }

/* ---------- Acts ---------- */
.act {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(76px, 12vh, 140px) clamp(20px, 5vw, 60px);
  gap: clamp(18px, 3vh, 34px);
}

.act-no {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Act I — the name */
.name {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(3.2rem, 12vw, 10rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
}
.piece {
  width: clamp(190px, 26vw, 340px);
  margin: clamp(8px, 2vh, 22px) auto;
}
.piece img {
  width: 100%;
  filter: contrast(1.06) brightness(1.02);
}
.whisper {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  color: var(--ink-2);
  max-width: 34ch;
}
.coords {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(10px, 2vh, 26px);
}
.coords i { display: block; width: clamp(40px, 8vw, 90px); height: 1px; background: var(--hair); }

/* Act II — the calibre, annotated along the axis */
.calibre-figure {
  position: relative;
  width: min(100%, 720px);
}
.calibre-figure img {
  width: 100%;
  filter: contrast(1.08) saturate(0.92);
}
.headline {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(1.9rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.headline em { font-style: italic; color: var(--gold); }

.readings {
  display: flex;
  justify-content: center;
  gap: clamp(26px, 6vw, 88px);
  flex-wrap: wrap;
  padding-top: clamp(10px, 2vh, 20px);
}
.reading b {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 7px;
}

/* Act III — the dial selector (signature) */
.theatre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vh, 30px);
  width: 100%;
}

.stage {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
}
.stage img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage img.is-on { opacity: 1; transform: none; }

.dial {
  position: relative;
  width: 132px; height: 132px;
  border: 1px solid var(--hair);
  border-radius: 50%;
}
.dial::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(236, 231, 219, 0.06);
  border-radius: 50%;
}
.dial-btn {
  position: absolute;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: none;
  background: none;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.3s ease;
}
.dial-btn::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: background 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.dial-btn:hover::before { background: var(--ink-2); transform: scale(1.35); }
.dial-btn[aria-selected="true"]::before { background: var(--gold); transform: scale(1.9); }
.dial-btn.p1 { left: 50%; top: 8%; }
.dial-btn.p2 { left: 88%; top: 68%; }
.dial-btn.p3 { left: 12%; top: 68%; }

.dial-hand {
  position: absolute;
  left: 50%; top: 50%;
  width: 1px;
  height: 46px;
  background: var(--gold);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg);
  transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.4, 1);
  opacity: 0.75;
}

.plaque { min-height: 96px; }
.plaque .card { display: none; }
.plaque .card.is-on { display: block; animation: lift 0.6s ease both; }
@keyframes lift { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.plaque h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.plaque p { color: var(--ink-2); font-size: 14.5px; }
.plaque .chf {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 1.16rem;
  color: var(--gold);
}

/* Act IV — two plates and a line */
.plates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 42px);
  width: min(100%, 1080px);
}
.plates figure { overflow: hidden; }
.plates img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: contrast(1.05) brightness(0.96);
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.plates figure:hover img { transform: scale(1.035); }
.plates figcaption { padding-top: 11px; text-align: left; }

.said {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(1.3rem, 3vw, 2.3rem);
  line-height: 1.32;
  max-width: 26ch;
}
.said cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 18px;
}

/* Act V — appointment */
.invite {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.invite em { font-style: italic; color: var(--gold); }
.book {
  display: inline-block;
  margin-top: clamp(14px, 3vh, 28px);
  border: 1px solid var(--hair);
  padding: 15px 34px;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color 0.35s ease, color 0.35s ease;
}
.book:hover { border-color: var(--gold); color: var(--gold); }

.foot {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 44px);
  flex-wrap: wrap;
  padding-top: clamp(30px, 6vh, 60px);
}
.foot a:hover { color: var(--gold); }

/* ---------- Entrance ---------- */
.veil { opacity: 0; transform: translateY(20px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.veil.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .veil { opacity: 1; transform: none; transition: none; }
  .stage img, .dial-hand, .plates img { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .axis { display: none; }
  .act { min-height: auto; padding: clamp(64px, 14vh, 110px) 20px; }
  .plates { grid-template-columns: 1fr; }
  .readings { gap: 26px; }
  .corner { padding: 14px 16px; }
}