/* Gather & Glow, noir edition
   One candlelit night at the opera house, shot like film noir: black rooms,
   one red pool of light, real candle flame, old sheet music torn and burnt,
   and gold that catches the light. */

:root {
  --cream: #F2E8D8;
  --paper: #F6EFE3;
  --paper-shade: #E7D9C2;
  --gold: #B99A65;
  --gold-light: #E2CB97;
  --gold-deep: #7A5C2E;
  --wine: #651D2B;
  --wine-deep: #3A0F19;
  --wine-night: #2A0A12;
  --plum: #393039;
  --plum-deep: #231C24;
  --ink: #171519;
  --stage: #171519;
  --char: #0f0d10;
  --jo-red: #9C2329;
  --jo-red-deep: #5E1117;

  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;

  --fs-hero: clamp(2.5rem, 1.1rem + 4.4vw, 5.3rem);
  --fs-h2: clamp(2.1rem, 1.25rem + 2.9vw, 4.1rem);
  --fs-h3: clamp(1.4rem, 1.1rem + 1vw, 1.95rem);
  --fs-lede: clamp(1.08rem, 1rem + .35vw, 1.3rem);

  --gutter: clamp(16px, 4.5vw, 56px);
  --wrap: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-curtain: cubic-bezier(.62, .02, .26, 1);
  --header-h: 84px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--stage);
  color: var(--cream);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* decorations may hang over a scene's edge, but never widen the page */
main > section, .site-footer { overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.06; letter-spacing: -.01em; }
em { font-style: italic; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--cream); color: var(--ink); padding: 10px 16px; text-decoration: none; border-radius: 4px; transition: top .2s; }
.skip-link:focus { top: 12px; }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font: 500 italic clamp(1rem, .95rem + .2vw, 1.15rem)/1.2 var(--display);
  letter-spacing: .01em; color: var(--gold);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ''; width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: url(../img/art/star.svg) center / contain no-repeat; mask: url(../img/art/star.svg) center / contain no-repeat;
}
.h2 { font-size: var(--fs-h2); }
.h2 em { color: var(--gold-light); }
.lede { font-size: var(--fs-lede); line-height: 1.6; max-width: 40em; }
.ornament {
  display: block; width: min(320px, 70%); aspect-ratio: 8 / 1; margin: 0 auto;
  background: currentColor;
  -webkit-mask: url(../img/art/ornament.svg) center / contain no-repeat; mask: url(../img/art/ornament.svg) center / contain no-repeat;
}
.text-link {
  display: inline-flex; align-items: center; gap: .55em;
  font: 600 .82rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--gold-light);
  padding: .9em 0; border-bottom: 1px solid currentColor;
  transition: color .25s, gap .25s;
}
.text-link:hover { color: var(--cream); gap: .85em; }
.text-link--ink { color: var(--wine); }
.text-link--ink:hover { color: var(--ink); }

/* The quiet button: a thin gold frame, used everywhere except the one loud seal */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.6em;
  font: 600 .82rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--gold-light);
  border: 0; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 25, .25), inset 0 0 0 4px var(--gold-light), inset 0 0 0 5px rgba(122, 92, 46, .55);
  transition: background .25s, transform .25s var(--ease);
}
.btn:hover { background: #ecd8aa; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--gold-light); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(185, 154, 101, .45); }
.btn--outline:hover { background: rgba(185, 154, 101, .12); }
.btn--wine { background: var(--wine); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 4px var(--wine), inset 0 0 0 5px rgba(226, 203, 151, .5); }
.btn--wine:hover { background: #7a2536; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header-h);
  background: linear-gradient(#0f0d10, #151316);
  border-bottom: 1px solid rgba(185, 154, 101, .3);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 10px 30px rgba(0, 0, 0, .35);
  transition: height .4s var(--ease);
}
.nav { position: relative; height: 100%; width: min(1320px, 100% - var(--gutter) * 2); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav__side { display: flex; gap: clamp(18px, 3vw, 46px); list-style: none; margin: 0; padding: 0; }
.nav__side--right { justify-content: flex-end; }
.nav__side a {
  position: relative; text-decoration: none;
  font: 500 .8rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 232, 216, .86);
  padding: 10px 0; transition: color .25s;
}
.nav__side a::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.nav__side a:hover, .nav__side a[aria-current="page"] { color: var(--gold-light); }
.nav__side a:hover::after, .nav__side a[aria-current="page"]::after { opacity: 1; transform: none; }
.nav__phone { letter-spacing: .1em !important; }

/* The crest: the logo on a dark plaque that hangs from the header.
   It sits in its own column so the links stay centred in the bar. On scroll the
   plaque draws up into the bar and the logo settles small, centred in the bar. */
.nav__crest { position: relative; align-self: stretch; width: 160px; display: block; }
.nav__crest::before {
  content: ''; position: absolute; left: -6px; right: -6px; top: -1px; height: 178px;
  background: radial-gradient(120% 90% at 50% 30%, #1d1a1f, #0f0d10 72%);
  border: 1px solid var(--gold); border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 26% 26%;
  box-shadow: inset 0 0 0 4px #0f0d10, inset 0 0 0 5px rgba(185, 154, 101, .45), 0 14px 26px rgba(0, 0, 0, .6), 0 0 26px rgba(226, 203, 151, .1);
  transform-origin: 50% 0;
  transition: transform .55s cubic-bezier(.6, 0, .3, 1), opacity .4s .15s;
}
.nav__crest img {
  position: absolute; z-index: 1; left: 50%; top: 12px; width: 148px; height: auto; max-width: none;
  transform: translate(-50%, 0);
  transition: width .55s cubic-bezier(.6, 0, .3, 1), top .55s cubic-bezier(.6, 0, .3, 1), transform .55s cubic-bezier(.6, 0, .3, 1), filter .55s;
}
.nav__toggle, .nav__call { display: none; }

.is-scrolled .site-header { --header-h: 68px; }
.is-scrolled .nav__crest::before { transform: scaleY(0); opacity: 0; }
.is-scrolled .nav__crest img { width: 60px; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 8px rgba(226, 203, 151, .35)); }

.menu { display: none; }

/* ---------- The one loud thing: a sealed envelope ---------- */
.seal-btn {
  --w: 300px;
  position: relative; display: inline-block; flex: none;
  width: var(--w); aspect-ratio: 3 / 2;
  text-decoration: none; color: var(--ink); cursor: pointer;
  border: 0; padding: 0; background: none;
  transform: rotate(-2deg);
  transition: transform .45s var(--ease), filter .45s var(--ease);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)) drop-shadow(0 16px 22px rgba(0, 0, 0, .42));
  -webkit-tap-highlight-color: transparent;
}
.seal-btn__paper { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal-btn__seal {
  position: absolute; left: 50%; top: 45%; width: 25%; aspect-ratio: 252 / 301;
  transform: translate(-50%, -50%) rotate(-6deg);
  filter: drop-shadow(0 1.5px 1px rgba(60, 35, 10, .6)) drop-shadow(0 6px 7px rgba(40, 20, 5, .35));
  transition: transform .45s var(--ease);
}
.seal-btn__seal img { width: 100%; height: 100%; }
.seal-btn__seal::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 248, 225, .75) 46%, transparent 60%) -120% 0 / 220% 100% no-repeat;
  -webkit-mask: url(../img/board/seal.webp) center / contain no-repeat; mask: url(../img/board/seal.webp) center / contain no-repeat;
  mix-blend-mode: soft-light; opacity: .9;
  transition: background-position .9s var(--ease);
}
.seal-btn__label {
  position: absolute; left: 0; right: 0; bottom: 10%;
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
}
.seal-btn__words { font: 600 italic calc(var(--w) * .074)/1 var(--display); color: var(--wine); letter-spacing: 0; }
.seal-btn__small { font: 600 calc(var(--w) * .034)/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: rgba(23, 21, 25, .62); }
.seal-btn:hover { transform: rotate(-1deg) translateY(-6px); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)) drop-shadow(0 26px 30px rgba(0, 0, 0, .45)); }
.seal-btn:hover .seal-btn__seal { transform: translate(-50%, -52%) rotate(4deg); }
.seal-btn:hover .seal-btn__seal::after { background-position: 120% 0; }
.seal-btn:active { transform: rotate(-1.5deg) translateY(-1px) scale(.985); transition-duration: .12s; }
.seal-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 10px; }
.seal-btn--lg { --w: clamp(280px, 30vw, 380px); }

/* ---------- Gold that catches the light ---------- */
.gilt {
  background: linear-gradient(100deg, #8a6b39 0%, #c9ac74 22%, #f6e4b4 38%, #fff6dc 44%, #e2cb97 52%, #b99a65 70%, #8a6b39 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(226, 203, 151, .22));
  animation: gilt 9s ease-in-out infinite;
}
@keyframes gilt { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* film grain over the whole night */
body::after { content: ''; position: fixed; inset: -50%; z-index: 90; pointer-events: none; background: var(--grain); opacity: .09; mix-blend-mode: overlay; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------- One red pool of light (from the brand board's spotlit curtain) ---------- */
.spot { position: absolute; left: 50%; top: 50%; width: min(1180px, 110vw); aspect-ratio: 1.25; transform: translate(-50%, -50%); pointer-events: none; z-index: -2; }
.spot::before { content: ''; position: absolute; inset: 0;
  background: url(../img/art/curtain.svg) 0 0 / 11% 100%;
  filter: blur(7px) brightness(1.45) saturate(1.5);
  -webkit-mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, .62) 55%, transparent 97%); mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, .62) 55%, transparent 97%);
  opacity: .72; animation: spot 9s ease-in-out infinite alternate; }
.spot::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 28, 48, .28), rgba(101, 29, 43, .1) 55%, transparent); }
@keyframes spot { to { opacity: .5; transform: scale(1.03); } }

/* ---------- The candelabra from the brand board, with live flames ---------- */
.candelabra { position: absolute; aspect-ratio: 334 / 638; width: 200px; pointer-events: none; }
.candelabra img { width: 100%; height: 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .7)) sepia(.18) brightness(.82) contrast(1.08); }
.candelabra::before { content: ''; position: absolute; left: -90%; right: -90%; top: -32%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 178, 96, .26), rgba(255, 150, 70, .08) 45%, transparent 75%); animation: halo 3.2s ease-in-out infinite alternate; }
@keyframes halo { 0% { opacity: .85; } 40% { opacity: 1; } 70% { opacity: .78; } 100% { opacity: .95; } }
.flame {
  position: absolute; left: var(--x); top: var(--y); width: 6.5%; aspect-ratio: 1 / 2.2;
  transform: translate(-50%, -62%); transform-origin: 50% 90%;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(60% 44% at 50% 74%, #fffef4 0 24%, #ffe7ad 42%, #ffb457 64%, rgba(255, 120, 30, 0) 78%);
  mix-blend-mode: screen; filter: blur(.4px);
  animation: flame 1.7s infinite alternate ease-in-out;
}
.flame::before { content: ''; position: absolute; left: 50%; top: 55%; width: 1100%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 186, 100, .3), rgba(255, 150, 60, .07) 42%, transparent 68%); }
.flame:nth-of-type(2) { animation-delay: -.6s; animation-duration: 1.9s; }
.flame:nth-of-type(3) { animation-delay: -1.1s; animation-duration: 1.45s; }
@keyframes flame {
  0% { transform: translate(-50%, -62%) scale(1, 1) skewX(0); }
  30% { transform: translate(-50%, -62%) scale(.93, 1.1) skewX(2.5deg); }
  65% { transform: translate(-50%, -62%) scale(1.05, .94) skewX(-3deg); }
  100% { transform: translate(-50%, -62%) scale(.97, 1.05) skewX(1deg); }
}
.smoke { position: absolute; pointer-events: none; }
.smoke--edge { left: 0; top: clamp(-300px, -22vw, -180px); width: 100%; height: clamp(230px, 26vw, 340px); z-index: 3; }

/* ---------- Edges: old paper torn and burnt where it meets the dark ---------- */
.paper-scene { position: relative; isolation: isolate; color: var(--ink); background: #efe3cb url(../img/paper/paper.webp) 0 0 / 1100px auto; }
.paper-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 70% at 50% 50%, transparent 55%, rgba(120, 82, 40, .16)); }
.burnt-edge { position: absolute; left: 0; right: 0; height: clamp(54px, 7vw, 110px); z-index: 4; pointer-events: none; background: url(../img/paper/edge-top.webp) 50% 0 / 100% 100% no-repeat; }
.burnt-edge--top { top: -1px; }
.burnt-edge--bottom { bottom: -1px; background-image: url(../img/paper/edge-bottom.webp); }
/* the second paper scene on a page tears differently */
.paper-scene ~ .paper-scene .burnt-edge, .attractions .burnt-edge, .expo .burnt-edge { transform: scaleX(-1); }
.edge { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 5; }
/* a hairline of gold between two dark rooms */
.edge--gilt { top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(185, 154, 101, .2) 15%, var(--gold-light) 50%, rgba(185, 154, 101, .2) 85%, transparent); box-shadow: 0 0 18px rgba(226, 203, 151, .35); }
.edge--gilt::after { content: ''; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: var(--gold-light); box-shadow: 0 0 12px rgba(226, 203, 151, .8); }
/* Envelope flap (With Love, From Jo) */
.edge--flap { top: 1px; height: clamp(60px, 9vw, 130px); transform: translateY(-100%);
  background: linear-gradient(var(--edge), var(--edge));
  clip-path: polygon(0 100%, 0 0, 50% 92%, 100% 0, 100% 100%);
  filter: drop-shadow(0 -4px 6px rgba(0, 0, 0, .25)); }

/* ---------- Overture (the intro) ---------- */
.overture { display: none; }
/* Keep the overlay mounted while it dissolves, after intro-on is removed. */
.intro-on .overture, .overture.is-leaving {
  display: block; position: fixed; inset: 0; z-index: 100;
  background: #000; opacity: 1; will-change: opacity; transform: translateZ(0);
  transition: opacity 3.2s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 3.2s;
}
.intro-on body { overflow: hidden; }
.overture canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.overture__cam { position: absolute; inset: 0; will-change: transform; }
.overture__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; opacity: 0; transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1); }
.overture.is-film .overture__logo { -webkit-mask-image: none; mask-image: none; opacity: 0; }
.overture.is-film .overture__glow { -webkit-mask-image: none; mask-image: none; }
.overture.is-film .overture__cam { transform: none !important; }
.overture.is-film .overture__film { opacity: 1; -webkit-mask-image: radial-gradient(ellipse farthest-side, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse farthest-side, #000 72%, transparent 100%); -webkit-mask-size: 100% 100%; }
.overture.is-film canvas { display: none; }
.overture__logo, .overture__glow { position: absolute; -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r, 0px) * .7), transparent var(--r, 0px)); mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r, 0px) * .7), transparent var(--r, 0px)); }
.overture__glow { filter: blur(6px) brightness(1.4); opacity: 0; mix-blend-mode: screen; }
.overture__tag {
  position: absolute; left: 0; right: 0; margin: 0; text-align: center; opacity: 0;
  font: 400 clamp(1.9rem, 1.4rem + 1.8vw, 3rem)/1.3 'Pinyon Script', var(--display); color: var(--gold-light); letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(226, 203, 151, .35);
  /* written in by a moving pen: a soft edge sweeps left to right */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--w, 0%) - 4%), transparent calc(var(--w, 0%) + 2%));
  mask-image: linear-gradient(90deg, #000 calc(var(--w, 0%) - 4%), transparent calc(var(--w, 0%) + 2%));
}
.overture__tag span { display: inline-block; }
.overture__skip {
  position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  background: none; border: 1px solid rgba(226, 203, 151, .35); color: rgba(242, 232, 216, .7);
  font: 500 .72rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; padding: 12px 16px; border-radius: 2px; cursor: pointer;
}
.overture__skip:hover { color: var(--cream); border-color: var(--gold); }
.overture.is-leaving { opacity: 0; visibility: hidden; }

/* ---------- Scene 1: the stage, noir ---------- */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(700px, 100svh); padding: calc(var(--header-h) + clamp(90px, 9vw, 140px)) 0 clamp(150px, 14vw, 200px);
  display: grid; place-items: center;
  background: radial-gradient(90% 70% at 50% 45%, #1d1a1f, var(--ink) 60%, var(--char));
}
.stage .spot { top: 47%; }
.stage__haze { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at 22% 78%, rgba(255, 176, 100, .1), transparent 70%), radial-gradient(70% 50% at 50% 110%, rgba(0, 0, 0, .7), transparent 70%); }
.stage__vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 4, 6, .78)); }
.stage .candelabra { left: clamp(-10px, 5vw, 110px); bottom: clamp(30px, 6vw, 80px); width: clamp(150px, 15vw, 240px); z-index: 2; }
.stage .smoke { inset: 0; width: 100%; height: 100%; z-index: 2; }
.stage__content { position: relative; z-index: 4; text-align: center; width: min(1060px, 100% - var(--gutter) * 2); }
.stage__eyebrow { font: 600 .78rem/1.5 var(--body); letter-spacing: .26em; text-transform: uppercase; color: rgba(226, 203, 151, .8); margin-bottom: 1.6rem; }
.stage h1 { font-size: var(--fs-hero); font-weight: 500; line-height: 1.02; color: var(--cream); text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, .65); }
.stage h1 em { display: block; font-weight: 500; }
.stage__lede { margin: 1.5rem auto 2.2rem; font-size: var(--fs-lede); color: rgba(242, 232, 216, .82); max-width: 34em; text-wrap: pretty; }
.stage__actions { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap; }
.stage__actions .seal-btn { --w: clamp(240px, 19vw, 280px); }
.motes { position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; }

/* ---------- Scene 2: the programme, old paper ---------- */
.programme { padding: clamp(120px, 13vw, 190px) 0 clamp(140px, 14vw, 210px); }
.programme__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.programme .eyebrow { color: var(--wine); }
.programme h2 { font-size: var(--fs-h2); color: var(--ink); text-wrap: balance; }
.programme h2 em { color: var(--wine); }
.programme__intro { font-size: var(--fs-lede); margin: 1.6rem 0 1.4rem; color: #2b2329; }
.programme__body p { color: #3b3238; max-width: 36em; }
.programme__dropcap::first-letter { float: left; font: 500 4.6em/.8 var(--display); color: var(--wine); margin: .06em .1em 0 -.03em; }
.prints { position: relative; aspect-ratio: 4 / 5; }
.prints__sheet { position: absolute; width: 86%; right: -14%; top: -12%; transform: rotate(7deg); opacity: .96; filter: drop-shadow(0 12px 20px rgba(60, 30, 10, .28)); z-index: 0; }
.print {
  position: absolute; margin: 0; background: #fbf7f0; padding: 12px 12px 46px; z-index: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 18px 34px rgba(40, 20, 10, .28);
}
.print img { width: 100%; height: 100%; object-fit: cover; }
.print figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; text-align: right; font: 500 italic 1rem/1.2 var(--display); color: #5a4a50; }
.print--a { width: 70%; height: 76%; right: 2%; top: 2%; transform: rotate(2.2deg); }
.print--b { width: 46%; height: 50%; left: 0; bottom: -2%; transform: rotate(-4deg); }
.print--b figcaption { text-align: left; }
.print::before, .print::after { content: ''; position: absolute; width: 30px; height: 30px; z-index: 1; background: linear-gradient(135deg, var(--ink) 50%, transparent 50%); opacity: .9; }
.print::before { left: 4px; top: 4px; }
.print::after { right: 4px; top: 4px; transform: scaleX(-1); }
.rose { position: absolute; width: 38%; left: 46%; bottom: -21%; transform: rotate(-32deg); z-index: 3; filter: drop-shadow(-6px 16px 14px rgba(40, 10, 10, .42)); pointer-events: none; }
.sprig { position: absolute; width: 230px; aspect-ratio: 260 / 250; background: var(--gold-deep); opacity: .7; -webkit-mask: url(../img/art/laurel.svg) center / contain no-repeat; mask: url(../img/art/laurel.svg) center / contain no-repeat; pointer-events: none; }
.pullquote { margin: clamp(90px, 10vw, 140px) auto 0; text-align: center; max-width: 920px; color: var(--wine); }
.pullquote blockquote { margin: 1.4rem 0 0; font: 500 italic clamp(1.9rem, 1.2rem + 2.4vw, 3.3rem)/1.15 var(--display); color: var(--ink); text-wrap: balance; }
.pullquote blockquote span { color: var(--wine); }

/* ---------- Scene 3: the gallery wall ---------- */
.salon {
  position: relative; isolation: isolate; padding: clamp(110px, 12vw, 170px) 0 clamp(120px, 12vw, 170px);
  background: var(--ink);
  color: var(--cream);
}
.salon__wall { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.salon__wall::before { content: ''; position: absolute; inset: -80px 0; background: url(../img/art/damask.svg) 0 0 / 150px auto; filter: grayscale(1) brightness(.55); opacity: .35; }
.salon__wall::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(44% 30% at 50% 34%, rgba(255, 196, 130, .12), transparent 70%),
  radial-gradient(70% 60% at 50% 45%, transparent 35%, rgba(6, 5, 7, .7)),
  linear-gradient(rgba(0, 0, 0, .4), transparent 18%, transparent 82%, rgba(0, 0, 0, .5)); }
.salon__head { text-align: center; margin-bottom: clamp(50px, 6vw, 80px); }
.salon__head .eyebrow { color: var(--gold-light); }
.salon__head .lede { margin: 1.2rem auto 0; color: rgba(242, 232, 216, .82); }
.salon__frames { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 2.2vw, 30px) clamp(18px, 2.4vw, 34px); }
.salon__break { flex-basis: 100%; height: 0; }
.frame {
  --b: clamp(12px, 1.4vw, 20px);
  position: relative; display: block; padding: 0; margin: 0; cursor: zoom-in;
  width: var(--fw); aspect-ratio: var(--ar);
  border: var(--b) solid transparent;
  border-image: url(../img/textures/gilt-frame.webp) 128 round;
  background: #1a0d10;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4), 0 20px 30px -6px rgba(15, 2, 6, .7);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.frame--lg { --b: clamp(14px, 1.7vw, 26px); }
.frame--sm { --b: clamp(9px, 1vw, 14px); }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 6px 10px rgba(0, 0, 0, .45), inset 0 -2px 6px rgba(0, 0, 0, .2); pointer-events: none; }
.frame--mat { background: #f4ecdd; padding: clamp(10px, 1.4vw, 22px); }
.frame--mat img { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0,0,0,.2); }
.frame:hover { transform: translateY(-4px) rotate(var(--tilt, 0deg)); box-shadow: 0 2px 3px rgba(0, 0, 0, .4), 0 30px 40px -8px rgba(0, 0, 0, .85), 0 0 40px rgba(226, 203, 151, .12); }
/* a glint of light travels across the glass and gilt on hover */
.frame::before { content: ''; position: absolute; inset: calc(var(--b) * -1); z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 205, .32) 48%, transparent 60%) 160% 0 / 250% 100% no-repeat; mix-blend-mode: screen; transition: background-position 1.1s var(--ease); }
.frame:hover::before { background-position: -60% 0; }
.frame { transform: rotate(var(--tilt, 0deg)); }
.picture-light { position: absolute; left: 50%; top: calc(var(--b) * -1 - 26px); width: 46%; height: 14px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  background: linear-gradient(#f3dfae, #b99a65 45%, #6d5128); border-radius: 7px 7px 4px 4px; box-shadow: 0 3px 4px rgba(0, 0, 0, .5); }
.picture-light::before { content: ''; position: absolute; left: 50%; top: 12px; width: 4px; height: 14px; margin-left: -2px; background: linear-gradient(90deg, #6d5128, #e2cb97, #6d5128); }
.picture-light::after { content: ''; position: absolute; left: -30%; right: -30%; top: 12px; height: 220%; min-height: 160px; background: radial-gradient(50% 60% at 50% 0, rgba(255, 222, 160, .3), transparent 70%); }
.salon__note { text-align: center; margin-top: clamp(50px, 6vw, 70px); color: rgba(242, 232, 216, .7); font: 500 italic 1.15rem/1.4 var(--display); }

/* Lightbox */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: var(--cream); }
.lightbox::backdrop { background: rgba(8, 4, 6, .92); }
.lightbox__inner { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 64px 70px 26px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.lightbox__cap { margin: 16px 0 0; font: 500 italic 1.2rem/1.3 var(--display); color: var(--gold-light); text-align: center; }
.lightbox button { position: absolute; background: rgba(23, 21, 25, .6); border: 1px solid rgba(226, 203, 151, .4); color: var(--cream); width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.4rem; line-height: 1; }
.lightbox button:hover { border-color: var(--gold-light); background: rgba(101, 29, 43, .7); }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- Scene 4: four acts (services) ---------- */
.acts { position: relative; isolation: isolate; padding: clamp(110px, 11vw, 160px) 0 clamp(150px, 14vw, 210px); background: linear-gradient(var(--ink), #1d1a1f 50%, var(--ink)); }
.acts .spot { top: 22%; width: min(900px, 100vw); opacity: .55; }
.acts__head { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 80px; align-items: end; margin-bottom: clamp(46px, 6vw, 76px); }
.acts__head .lede { color: rgba(242, 232, 216, .78); margin: 0; }
.acts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.act {
  min-width: 0; width: 100%;
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(#211d23, #19161b);
  border-radius: 999px 999px 4px 4px;
  padding: 10px 10px 26px;
  box-shadow: inset 0 0 0 1px rgba(185, 154, 101, .55), inset 0 0 0 6px #1d1a1f, inset 0 0 0 7px rgba(185, 154, 101, .22), 0 24px 40px rgba(0, 0, 0, .45);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.act:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(226, 203, 151, .9), inset 0 0 0 6px #1d1a1f, inset 0 0 0 7px rgba(226, 203, 151, .4), 0 24px 40px rgba(0, 0, 0, .45), 0 0 34px rgba(226, 203, 151, .14); }
.act__photo { position: relative; flex: none; min-width: 0; border-radius: 999px 999px 0 0; overflow: hidden; aspect-ratio: 3 / 3.6; margin: 6px 6px 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.act__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); filter: saturate(.92) contrast(1.04); }
.act:hover .act__photo img { transform: scale(1.05); }
.act__num { display: block; margin: 20px 18px 4px; font: 500 italic 1.1rem/1 var(--display); color: var(--gold); }
.act h3 { margin: 0 18px 14px; font-size: clamp(1.3rem, 1.05rem + .7vw, 1.7rem); color: var(--cream); }
.act ul { list-style: none; margin: 0 18px; padding: 0; font-size: .95rem; color: rgba(242, 232, 216, .78); }
.act li { position: relative; padding: 5px 0 5px 20px; border-top: 1px solid rgba(185, 154, 101, .16); }
.act li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 10px; background: var(--gold); -webkit-mask: url(../img/art/star.svg) center / contain no-repeat; mask: url(../img/art/star.svg) center / contain no-repeat; }
.act__more { margin: 14px 18px 0; font: 500 italic 1rem/1.3 var(--display); color: var(--gold-light); text-decoration: none; }
.act__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.acts__foot { margin-top: clamp(46px, 6vw, 70px); display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid rgba(185, 154, 101, .25); }
.acts__foot p { margin: 0; font: 500 italic clamp(1.25rem, 1.05rem + .8vw, 1.7rem)/1.3 var(--display); }
.acts__foot strong { font-weight: 600; }

/* ---------- Scene 5: coming attractions ---------- */
.attractions { padding: clamp(130px, 13vw, 190px) 0 clamp(150px, 15vw, 220px); }
.attractions__head { text-align: center; margin-bottom: clamp(46px, 6vw, 80px); }
.attractions__head .eyebrow { color: var(--wine); }
.attractions__head h2 em { color: var(--wine); }
.posters { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; max-width: 1080px; margin: 0 auto; }
.poster { position: relative; margin: 0; }
.poster__frame { position: relative; border: clamp(12px, 1.4vw, 18px) solid transparent; border-image: url(../img/textures/gilt-frame.webp) 128 round; box-shadow: 0 2px 3px rgba(0, 0, 0, .3), 0 24px 40px -8px rgba(40, 20, 10, .4); background: #fbf6ec; }
.poster--expo .poster__frame { transform: rotate(-1.2deg); }
.poster--jo .poster__frame { transform: rotate(1.4deg); background: #ece5da; }
.playbill { aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8% 9%; background: #f3e8d2 url(../img/paper/paper.webp) 30% 40% / 700px auto; position: relative; }
.playbill::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(185, 154, 101, .8); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(185, 154, 101, .5); pointer-events: none; }
.playbill__pre { font: 600 .7rem/1.4 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); }
.playbill__title { margin: .5em 0 .25em; font: 500 clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem)/.95 var(--display); color: var(--wine); }
.playbill__title em { display: block; font-size: .5em; color: var(--ink); margin-top: .35em; }
.playbill__tag { font: 500 italic 1.1rem/1.35 var(--display); color: #4a3d43; max-width: 20em; margin: .6em 0 1.2em; }
.playbill .ornament { color: var(--gold); width: 62%; margin-bottom: 1.2em; }
.playbill__when { font: 600 .9rem/1.6 var(--body); letter-spacing: .08em; color: var(--ink); margin: 0; }
.playbill__when span { display: block; font-weight: 400; letter-spacing: .02em; color: #5b4f55; }
.poster video, .poster__frame > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.poster figcaption { margin-top: 26px; text-align: center; }
.poster figcaption h3 { font-size: var(--fs-h3); color: var(--ink); }
.poster figcaption p { margin: .5em auto 1em; max-width: 30em; color: #4a3d43; }

/* ---------- Scene 6: curtain call, one pool of light ---------- */
.curtain-call { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(170px, 16vw, 230px) 0 clamp(130px, 12vw, 180px); background: radial-gradient(90% 70% at 50% 50%, #1d1a1f, var(--ink) 62%, var(--char)); }
.curtain-call .spot { top: 52%; }
.curtain-call .candelabra { right: clamp(-20px, 6vw, 140px); bottom: 40px; width: clamp(130px, 13vw, 210px); z-index: 1; }
.curtain-call .smoke { inset: 0; width: 100%; height: 100%; z-index: 1; }
.curtain-call__inner { position: relative; z-index: 3; width: min(720px, 100% - var(--gutter) * 2); margin: 0 auto; }
.curtain-call .eyebrow { justify-content: center; color: var(--gold-light); }
.curtain-call h2 { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.2rem); color: var(--cream); }
.curtain-call p { margin: 1.3rem auto 2.6rem; max-width: 32em; color: rgba(242, 232, 216, .82); font-size: var(--fs-lede); }
.curtain-call__contact { margin-top: 2.8rem !important; font-size: 1rem !important; color: rgba(242, 232, 216, .7) !important; }
.curtain-call__contact a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(226, 203, 151, .4); }
.curtain-call__contact a:hover { border-color: var(--gold-light); }

/* ---------- After the show (footer) ---------- */
.site-footer { position: relative; overflow: hidden; background: radial-gradient(80% 60% at 50% 0, #1d1a1f, var(--char) 70%); color: rgba(242, 232, 216, .8); padding: 90px 0 36px; border-top: 1px solid rgba(185, 154, 101, .22); }
.sky { position: absolute; inset: 0; pointer-events: none; }
.sky i { position: absolute; width: var(--s, 10px); aspect-ratio: 1; background: var(--gold-light); opacity: .0; -webkit-mask: url(../img/art/star.svg) center / contain no-repeat; mask: url(../img/art/star.svg) center / contain no-repeat; animation: twinkle var(--d, 5s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes twinkle { 0%, 100% { opacity: .08; } 50% { opacity: .55; } }
.footer__grid { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; }
.footer__logo { width: 190px; margin: 0 auto; }
.footer__tag { text-align: center; margin-top: 16px; font: 500 italic 1.25rem/1.3 var(--display); color: var(--gold-light); }
.footer__col h3 { font: 600 .74rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a { text-decoration: none; color: rgba(242, 232, 216, .85); }
.footer__col a:hover { color: var(--gold-light); }
.footer__col--right { text-align: right; }
.footer__base { position: relative; margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(185, 154, 101, .16); display: flex; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; font-size: .84rem; color: rgba(242, 232, 216, .5); }

/* ---------- Inner page headers ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: calc(var(--header-h) + clamp(110px, 11vw, 160px)) 0 clamp(150px, 13vw, 200px); background: radial-gradient(90% 80% at 50% 50%, #1d1a1f, var(--ink) 60%, var(--char)); }
.page-hero .spot { top: 54%; width: min(980px, 110vw); }
.page-hero h1 { font-size: clamp(2.8rem, 1.5rem + 4.6vw, 5.8rem); color: var(--cream); }
.page-hero .eyebrow { justify-content: center; color: var(--gold-light); }
.page-hero .lede { margin: 1.4rem auto 0; color: rgba(242, 232, 216, .82); text-wrap: pretty; }
.page-hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: 2.4rem; }
/* the page links are scraps of torn, burnt sheet music */
.chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 30px;
  text-decoration: none; font: 600 italic 1.12rem/1.1 var(--display); color: #1d130d;
  background: url(../img/paper/scrap-1.webp) 50% 50% / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55));
  transform: rotate(var(--r, -1.5deg)); transition: transform .35s var(--ease), filter .35s var(--ease);
}
.chip:nth-child(2) { background-image: url(../img/paper/scrap-2.webp); --r: 1.2deg; }
.chip:nth-child(3) { background-image: url(../img/paper/scrap-3.webp); --r: -.8deg; }
.chip:nth-child(4) { background-image: url(../img/paper/scrap-4.webp); --r: 1.8deg; }
.chip:nth-child(5) { background-image: url(../img/paper/scrap-5.webp); --r: -2deg; }
.chip:nth-child(6) { background-image: url(../img/paper/scrap-6.webp); --r: 1deg; }
.chip span { position: relative; padding: 5px 14px; font-weight: 600; color: #1d130d; text-shadow: 0 0 6px rgba(250, 242, 226, .9), 0 0 2px rgba(250, 242, 226, 1); background: radial-gradient(farthest-side, rgba(246, 237, 219, .97) 55%, rgba(246, 237, 219, .75) 80%, transparent); border-radius: 40%; }
.chip:hover { transform: rotate(0) translateY(-3px) scale(1.03); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(226, 203, 151, .25)); }

/* ---------- Services page ---------- */
.programme--services { padding-bottom: clamp(140px, 14vw, 200px); }
.service { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: center; padding: clamp(50px, 6vw, 80px) 0; }
.service + .service { border-top: 0; }
.service:nth-of-type(even) { grid-template-columns: 1.1fr .9fr; }
.service:nth-of-type(even) .service__photo { order: 2; }
.service__photo { position: relative; }
.service__photo .print { position: relative; padding: 12px 12px 14px; transform: rotate(-1.6deg); }
.service:nth-of-type(even) .service__photo .print { transform: rotate(1.6deg); }
.service__photo .print img { aspect-ratio: 4 / 5; height: auto; }
.service__num { font: 500 italic 1.25rem/1 var(--display); color: var(--wine); }
.service h2 { margin: 10px 0 16px; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); color: var(--ink); }
.service__intro { color: #3b3238; font-size: 1.08rem; max-width: 34em; }
.ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; columns: 2; column-gap: 34px; }
.ticks li { position: relative; break-inside: avoid; padding: 8px 0 8px 24px; border-top: 1px solid rgba(101, 29, 43, .14); color: #2b2329; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 12px; background: var(--wine); -webkit-mask: url(../img/art/star.svg) center / contain no-repeat; mask: url(../img/art/star.svg) center / contain no-repeat; }
.service-rule { color: var(--wine); opacity: .7; }

.bill { position: relative; isolation: isolate; padding: clamp(110px, 12vw, 170px) 0; color: var(--ink); background: var(--ink); }
.bill .spot { top: 40%; opacity: .7; }
.bill__card { position: relative; max-width: 900px; margin: 0 auto; border: clamp(16px, 2vw, 24px) solid transparent; border-image: url(../img/textures/gilt-frame.webp) 128 round; box-shadow: 0 30px 60px rgba(0, 0, 0, .7), 0 0 60px rgba(226, 203, 151, .08); }
.bill__paper { background: #f3e8d2 url(../img/paper/paper.webp) 0 0 / 900px auto; padding: clamp(36px, 6vw, 70px) clamp(22px, 6vw, 76px); position: relative; }
.bill__paper::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(185, 154, 101, .7); pointer-events: none; }
.bill__head { text-align: center; margin-bottom: 36px; }
.bill__head .eyebrow { color: var(--wine); justify-content: center; }
.bill__head h2 { font-size: clamp(2.3rem, 1.4rem + 2.8vw, 3.8rem); color: var(--ink); }
.bill__head p { margin: 12px auto 0; color: #5b4f55; max-width: 32em; }
.bill__feature { text-align: center; padding: 22px; margin: 0 auto 34px; max-width: 560px; border: 1px solid rgba(101, 29, 43, .25); background: rgba(101, 29, 43, .05); }
.bill__feature h3 { font-size: 1.6rem; color: var(--wine); }
.bill__feature p { margin: 6px 0 0; color: #3b3238; }
.bill__feature strong { font: 600 1.5rem/1 var(--display); color: var(--ink); }
.bill__group { margin-top: 30px; }
.bill__group h3 { font: 500 italic 1.45rem/1.2 var(--display); color: var(--wine); text-align: center; margin-bottom: 10px; }
.bill__group h3::after { content: ''; display: block; width: 46px; height: 1px; background: var(--gold); margin: 10px auto 0; }
.bill__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; }
.price { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(23, 21, 25, .08); }
.price__name { font-weight: 600; color: var(--ink); }
.price__dots { border-bottom: 1px dotted rgba(23, 21, 25, .35); transform: translateY(-4px); }
.price__cost { font: 600 1.05rem/1 var(--display); color: var(--wine); white-space: nowrap; }
.price__note { grid-column: 1 / -1; font-size: .88rem; color: #6a5d63; margin-top: -2px; }
.bill__foot { margin-top: 34px; text-align: center; font-size: .9rem; color: #6a5d63; }

/* ---------- Events page ---------- */
.expo { padding: clamp(130px, 13vw, 190px) 0 clamp(150px, 15vw, 220px); }
.expo__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.expo .eyebrow { color: var(--gold-deep); }
.expo h2 { font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5rem); color: var(--wine); }
.expo h2 span { display: block; margin-top: .4em; font: 500 .95rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.expo__tag { margin: 1.4rem 0; font: 500 italic clamp(1.3rem, 1.1rem + .8vw, 1.8rem)/1.3 var(--display); color: var(--ink); }
.expo p { color: #3b3238; max-width: 36em; }
.ticket {
  position: relative; display: grid; grid-template-columns: repeat(3, auto); gap: 18px 34px; justify-content: start;
  margin: 2rem 0; padding: 22px 28px; background: var(--wine); color: var(--cream);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
}
.ticket::before { content: ''; position: absolute; inset: 7px; border: 1px dashed rgba(226, 203, 151, .45); pointer-events: none; }
.ticket dt { font: 600 .68rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 7px; }
.ticket dd { margin: 0; font: 500 1.15rem/1.25 var(--display); }
.booths { margin: 2.4rem 0 2rem; }
.booths h3 { font: 500 italic 1.5rem/1.2 var(--display); color: var(--wine); margin-bottom: 8px; }
.booths ul { list-style: none; margin: 0; padding: 0; }
.booths li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(23, 21, 25, .1); }
.booths li span:last-child { font: 600 1.05rem/1.4 var(--display); color: var(--wine); white-space: nowrap; }
.expo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.expo__photos { position: relative; aspect-ratio: 4 / 5.4; }
.expo__photos .frame { position: absolute; cursor: default; }
.expo__photos .frame:hover { transform: rotate(var(--tilt, 0deg)); }
.expo__photos .f1 { --fw: 74%; --ar: 3 / 4; right: 0; top: 0; --tilt: 1.5deg; }
.expo__photos .f2 { --fw: 52%; --ar: 3 / 4; left: 0; bottom: 0; --tilt: -3deg; }
.rose--expo { left: 30%; bottom: -10%; width: 40%; transform: rotate(24deg) scaleX(-1); }

.jo { position: relative; isolation: isolate; color: var(--cream); padding: clamp(80px, 9vw, 130px) 0 clamp(80px, 8vw, 110px);
  background: linear-gradient(var(--jo-red) 0, var(--jo-red) 6%, var(--jo-red-deep)); }
.jo::before { content: ''; position: absolute; inset: 12% 0 0; z-index: -3; background: radial-gradient(60% 46% at 28% 30%, rgba(196, 64, 72, .55), transparent 70%); pointer-events: none; }
.jo .edge--flap { --edge: var(--jo-red); }
.jo__paper { position: absolute; inset: 0; z-index: -2; opacity: .08; background: url(../img/textures/jo-script-paper.webp) 0 0 / 900px auto; mix-blend-mode: screen; }
.jo__snow { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.jo__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.jo__letter { position: relative; margin: 0; transform: rotate(-2deg); }
.jo__letter video, .jo__letter img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 3px 4px rgba(0, 0, 0, .3), 0 30px 50px rgba(30, 4, 8, .55); }
.jo__letter figcaption { margin-top: 16px; text-align: center; font: 500 italic 1rem/1.3 var(--display); color: rgba(242, 232, 216, .8); }
.jo .eyebrow { color: #f4d9a8; }
.jo h2 { font-size: clamp(2.6rem, 1.4rem + 3.8vw, 5.2rem); color: #fff8ee; }
.jo h2 em { color: #f4d9a8; }
.jo h2 span { display: block; margin-top: .5em; font: 500 .9rem/1.4 var(--body); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 238, 220, .8); }
.jo__tag { margin: 1.4rem 0; font: 500 italic clamp(1.3rem, 1.1rem + .8vw, 1.8rem)/1.3 var(--display); }
.jo p { color: rgba(255, 244, 232, .9); max-width: 36em; }
.jo__memory { font: 500 italic 1.05rem/1.4 var(--display); color: #f4d9a8 !important; }
.tags { position: relative; margin: clamp(50px, 6vw, 80px) 0 0; padding-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3vw, 40px); }
.tags::before { content: ''; position: absolute; left: -4%; right: -4%; top: 0; height: 40px; border-top: 2px solid #c9a880; border-radius: 50% 50% 0 0 / 30px 30px 0 0; transform: scaleY(-1); transform-origin: 50% 0; opacity: .9; filter: drop-shadow(0 2px 1px rgba(0,0,0,.3)); }
.tag { position: relative; transform-origin: 50% -30px; animation: sway 6s ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.tag:nth-child(2) { margin-top: 18px; }
.tag::before { content: ''; position: absolute; left: 50%; top: -30px; width: 1.5px; height: 46px; background: #c9a880; transform: translateX(-50%); }
.tag__card {
  position: relative; padding: 52px 18px 24px; text-align: center; color: var(--ink);
  background: linear-gradient(170deg, #fbf6ee, #efe3d1);
  clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  filter: drop-shadow(0 10px 12px rgba(30, 4, 8, .45));
}
.tag__card::before { content: ''; position: absolute; left: 50%; top: 16px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle, var(--jo-red-deep) 0 4px, #c9a880 4.5px 7px, #8c6a44 7.5px); }
.tag__num { font: 500 italic 1rem/1 var(--display); color: var(--jo-red); }
.tag h3 { margin: 6px 0 8px; font-size: 1.3rem; color: var(--jo-red-deep); }
.tag p { margin: 0; font-size: .92rem; color: #4a3d43 !important; }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.jo__actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 2.4rem; }
.jo .btn--outline { color: #fff2e0; box-shadow: inset 0 0 0 1px #f4d9a8, inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(244, 217, 168, .45); }
.jo__closing { margin-top: clamp(50px, 6vw, 80px); text-align: center; font: 500 italic clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem)/1.3 var(--display); color: #fff8ee; }

/* ---------- Contact page ---------- */
.rsvp { position: relative; isolation: isolate; padding: clamp(40px, 5vw, 80px) 0 clamp(110px, 12vw, 170px); background: var(--ink); }
.rsvp .spot { top: 30%; left: 34%; opacity: .6; }
.rsvp .candelabra { right: clamp(-20px, 3vw, 60px); bottom: 30px; width: clamp(120px, 11vw, 180px); opacity: .9; }
.rsvp .smoke { inset: 0; width: 100%; height: 100%; }
.rsvp .wrap { position: relative; z-index: 2; }
.rsvp__grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.card { position: relative; background: #f3e8d2 url(../img/paper/paper.webp) 0 0 / 1000px auto; color: var(--ink); padding: clamp(28px, 5vw, 60px); box-shadow: 0 2px 3px rgba(0, 0, 0, .3), 0 30px 60px rgba(15, 2, 6, .55); }
.card::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(185, 154, 101, .75); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(185, 154, 101, .4); pointer-events: none; }
.card h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: var(--ink); }
.card h2 em { color: var(--wine); }
.card__lede { color: #4a3d43; margin: 12px 0 30px; }
.form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font: 600 .74rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--wine); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 2px;
  border: 1px solid rgba(23, 21, 25, .22); background: #fffdf9; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(101, 29, 43, .14); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 6px; }
.checks label { display: flex; gap: 10px; align-items: flex-start; font: 400 .98rem/1.35 var(--body); letter-spacing: 0; text-transform: none; color: #2b2329; cursor: pointer; }
.checks input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; accent-color: var(--wine); flex: none; }
.form__send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: 18px; }
.form__send .seal-btn { --w: 260px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)) drop-shadow(0 14px 18px rgba(58, 15, 25, .3)); }
.form__note { flex: 1 1 220px; font-size: .9rem; color: #6a5d63; margin: 0; }
.form__status { grid-column: 1 / -1; margin: 0; font-weight: 600; color: var(--wine); min-height: 1.4em; }
.hp { position: absolute !important; left: -9999px !important; }
.details { position: relative; color: var(--cream); padding: 10px 0; }
.details h3 { font-size: 1.6rem; color: var(--gold-light); margin-bottom: 14px; }
.details dl { margin: 0; }
.details dt { font: 600 .7rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 22px; }
.details dd { margin: 8px 0 0; font: 500 1.25rem/1.35 var(--display); }
.details a { text-decoration: none; border-bottom: 1px solid rgba(226, 203, 151, .4); }
.details a:hover { color: var(--gold-light); border-color: var(--gold-light); }
.details .ornament { color: var(--gold); margin: 34px 0; width: 220px; }
.details p { color: rgba(242, 232, 216, .78); font-size: .98rem; }

/* 404 */
.lost { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 140px var(--gutter) 80px; background: var(--ink); }
.lost h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem); }
.lost p { margin: 1rem auto 2rem; max-width: 30em; color: rgba(242, 232, 216, .8); }

/* ---------- Motion helpers ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
[data-speed] { will-change: transform; }

/* ---------- Responsive ---------- */
/* short laptop screens: keep the envelope above the fold */
@media (min-width: 901px) and (max-height: 860px) {
  .stage { padding-top: calc(var(--header-h) + 70px); padding-bottom: 110px; }
  .stage__eyebrow { margin-bottom: 1rem; }
  .stage h1 { font-size: min(var(--fs-hero), 9.2vh); }
  .stage__lede { margin: 1rem auto 1.5rem; }
  .stage__actions .seal-btn { --w: min(250px, 31vh); }
  .stage .candelabra { width: min(15vw, 30vh); }
}
@media (max-width: 1080px) {
  .acts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__side { display: none; }
  .nav__crest { width: 112px; grid-column: 2; justify-self: center; }
  .nav__crest::before { height: 124px; }
  .nav__crest img { width: 100px; top: 8px; }
  .is-scrolled .nav__crest img { width: 50px; }
  .nav__toggle {
    display: inline-flex; grid-column: 3; justify-self: end; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
    font: 600 .74rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); padding: 12px 0 12px 12px; min-height: 44px;
  }
  .nav__toggle i { position: relative; width: 22px; height: 1.5px; background: currentColor; transition: background .2s; }
  .nav__toggle i::before, .nav__toggle i::after { content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
  .nav__toggle i::before { top: -7px; } .nav__toggle i::after { top: 7px; }
  .menu-open .nav__toggle i { background: transparent; }
  .menu-open .nav__toggle i::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .nav__toggle i::after { transform: translateY(-7px) rotate(-45deg); }
  .nav__call { grid-column: 1; justify-self: start; font: 600 .74rem/1 var(--body); letter-spacing: .14em; color: var(--gold-light); text-decoration: none; padding: 12px 12px 12px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .menu {
    display: flex; flex-direction: column; justify-content: center; gap: 6px; position: fixed; inset: 0; z-index: 55; padding: 110px 32px 40px;
    background: radial-gradient(70% 50% at 50% 40%, rgba(101, 29, 43, .35), transparent 70%), var(--char);
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
  }
  .menu-open .menu { opacity: 1; visibility: visible; transition: opacity .35s; }
  .menu a { font: 500 2.1rem/1.25 var(--display); color: var(--cream); text-decoration: none; padding: 8px 0; border-bottom: 1px solid rgba(185, 154, 101, .2); }
  .menu a[aria-current="page"] { color: var(--gold-light); font-style: italic; }
  .menu__meta { margin-top: 26px; font-size: 1rem; color: rgba(242, 232, 216, .75); }
  .menu__meta a { font: inherit; border: 0; color: var(--gold-light); }
  .menu-open { overflow: hidden; }

  .stage { padding-top: calc(var(--header-h) + 90px); padding-bottom: 170px; }
  .stage .candelabra { width: 118px; left: -14px; bottom: 26px; opacity: .9; }
  .stage__content { width: calc(100% - 40px); }
  .stage__eyebrow { font-size: .68rem; letter-spacing: .2em; }
  .curtain-call .candelabra { width: 104px; right: -16px; bottom: 18px; }
  .programme__grid, .expo__grid, .jo__grid, .rsvp__grid, .acts__head { grid-template-columns: 1fr; }
  .prints { max-width: 520px; margin: 10px auto 0; width: 100%; }
  .sprig { width: 150px; }
  .prints__sheet { right: -8%; top: -8%; }
  .programme .rose { width: 36%; left: 48%; bottom: -20%; }
  .service, .service:nth-of-type(even) { grid-template-columns: 1fr; }
  .service:nth-of-type(even) .service__photo { order: 0; }
  .service__photo { max-width: 460px; }
  .posters { grid-template-columns: 1fr; max-width: 520px; }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__col--right { text-align: center; }
  .footer__grid > div:nth-child(2) { order: -1; }
  .expo__photos { max-width: 520px; width: 100%; margin: 20px auto 0; }
  .jo__letter { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .acts__grid { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 420px; margin: 0 auto; }
  .salon__frames { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .salon__break { display: none; }
  .salon__frames .frame { width: 100% !important; --tilt: 0deg !important; align-self: start; }
  .salon__frames .frame--wide { grid-column: 1 / -1; }
  .picture-light { display: none; }
  .ticks { columns: 1; }
  .bill__cols { grid-template-columns: 1fr; }
  .form, .checks { grid-template-columns: 1fr; }
  .tags { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
  .tags::before { display: none; }
  .tag:nth-child(2) { margin-top: 0; }
  .ticket { grid-template-columns: 1fr; padding: 22px 30px; }
  .stage__actions { flex-direction: column; gap: 22px; }
  .seal-btn { --w: min(300px, 82vw); }
  .print--a { width: 76%; }
  .lightbox__inner { padding: 64px 12px 20px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 14px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Carry the paper edge's charcoal into adjacent scenes without a hard seam. */
.stage::after { content: ''; position: absolute; inset: auto 0 0; height: 90px; z-index: 3; pointer-events: none; background: linear-gradient(transparent, var(--ink)); }
.salon__wall { -webkit-mask-image: linear-gradient(transparent, #000 90px, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(transparent, #000 90px, #000 calc(100% - 90px), transparent); }
.burnt-edge { height: clamp(70px, 8vw, 120px); }
.burnt-edge--top { filter: drop-shadow(0 10px 12px rgba(23, 21, 25, .25)); }
.burnt-edge--bottom { filter: drop-shadow(0 -10px 12px rgba(23, 21, 25, .25)); }
@media (max-width: 640px) {
  .act__photo { aspect-ratio: 1 / 1; }
  .programme .prints { margin-bottom: 40px; }
}