/* ═══════════════════════════════════════════════════════════
   Masquerave — Rhianna Yates
   Palette is red / black / gold. Cream text never sits on gold.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0b0708;
  --ink-2:#140c0e;
  --ink-3:#1c1113;
  --blood:#7d0d17;
  --red:#c31b28;
  --red-hot:#e12b39;
  --gold:#e0b04a;
  --gold-lt:#f6d894;
  --cream:#f7ece0;
  --muted:#c0a49a;

  --shell:min(1180px, 92vw);
  --display:"Abril Fatface", "Bodoni MT", Georgia, serif;
  --cond:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-curtain:cubic-bezier(.62,.02,.2,1);
  --swag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 190' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v96c-120 54-240 78-360 72-120-6-180-48-240-48s-120 42-240 48C240 174 120 150 0 96Z' fill='%23000'/%3E%3C/svg%3E");
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font:400 clamp(1rem,.96rem + .2vw,1.1rem)/1.65 var(--body);
  overflow-x:clip;
}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--gold-lt)}

.skip-link{
  position:fixed;top:0;left:0;z-index:2000;
  display:inline-flex;align-items:center;min-height:44px;padding:.7rem 1.1rem;background:var(--gold);color:var(--ink);
  font:600 .95rem var(--body);text-decoration:none;
  transform:translateY(-130%);transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--gold-lt);outline-offset:3px;border-radius:2px;
}
/* the heading is focused programmatically after the curtain lifts, so that
   screen readers land on the page — it should not draw a ring for that */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

/* ───────── shared bits ───────── */
.eyebrow{
  font:600 .8rem/1 var(--cond);letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.1rem;
}
.eyebrow span{color:var(--red-hot)}
.section-head{max-width:56ch;margin:0 auto 3.4rem;text-align:center}
.section-head h2{font-size:clamp(2.3rem,1.5rem + 3.4vw,4rem);color:var(--cream)}
.section-sub{margin-top:1.1rem;color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:2px;border:2px solid transparent;
  font:600 .82rem/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}
.btn--primary{background:var(--gold);color:var(--ink);box-shadow:0 0 0 rgba(224,176,74,0)}
.btn--primary:hover{background:var(--gold-lt);transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(224,176,74,.75)}
.btn--ghost{border-color:rgba(224,176,74,.5);color:var(--gold-lt);background:transparent}
.btn--ghost:hover{border-color:var(--gold);background:rgba(224,176,74,.1);transform:translateY(-2px)}
.btn.is-placeholder{
  background:transparent;border:2px dashed rgba(224,176,74,.55);color:var(--gold-lt);
  cursor:default;letter-spacing:.14em;
}

/* ═════════ CURTAIN ═════════ */
.curtain{position:fixed;inset:0;z-index:1000;overflow:hidden;background:transparent}
.curtain[hidden]{display:none}

.curtain__stagelight{
  position:absolute;z-index:0;left:50%;top:-14%;width:120vmax;height:120vmax;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 34%,rgba(255,208,130,.28),rgba(255,150,60,.09) 38%,transparent 66%);
  opacity:0;transition:opacity 1.6s ease 1s;
}
.curtain.is-open .curtain__stagelight{opacity:1}

.curtain__panel{
  position:absolute;top:0;bottom:0;width:54%;
  transform-origin:50% -10%;
  will-change:transform;
}
.curtain__panel--left{left:0}
.curtain__panel--right{right:0;z-index:2;filter:drop-shadow(-12px 0 16px rgba(0,0,0,.78))}
.curtain__panel--left{z-index:1}

.curtain__travel{
  position:absolute;inset:0;
  transform:scaleX(1);
  transition:transform 2500ms var(--ease-curtain);
  will-change:transform;
}
.curtain__panel--left  .curtain__travel{transform-origin:0% 50%}
.curtain__panel--right .curtain__travel{transform-origin:100% 50%}

.curtain__velvet{
  position:absolute;inset:0;
  transition:filter 2500ms var(--ease-curtain);
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,0) 42%,rgba(255,120,120,.08) 78%,rgba(0,0,0,.34) 96%,rgba(0,0,0,.48) 100%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.62) 0px,rgba(0,0,0,.10) 11px,rgba(255,112,112,.15) 26px,
      rgba(0,0,0,.18) 42px,rgba(0,0,0,.66) 58px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.34) 0px,rgba(0,0,0,0) 37px,rgba(255,140,140,.10) 74px,
      rgba(0,0,0,0) 108px,rgba(0,0,0,.34) 139px),
    linear-gradient(180deg,#971220 0%,#7d0d17 34%,#5c0a12 68%,#2a040a 100%);
}
.curtain__panel--right .curtain__velvet{
  background-image:
    linear-gradient(270deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,0) 46%,rgba(255,128,128,.12) 90%,rgba(255,150,150,.16) 100%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.62) 0px,rgba(0,0,0,.10) 11px,rgba(255,112,112,.15) 26px,
      rgba(0,0,0,.18) 42px,rgba(0,0,0,.66) 58px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.34) 0px,rgba(0,0,0,0) 37px,rgba(255,140,140,.10) 74px,
      rgba(0,0,0,0) 108px,rgba(0,0,0,.34) 139px),
    linear-gradient(180deg,#971220 0%,#7d0d17 34%,#5c0a12 68%,#2a040a 100%);
}
/* woven texture — this is what stops it reading as flat CSS stripes */
.curtain__velvet::after{
  content:"";position:absolute;inset:0;
  background-image:var(--noise);background-size:240px 240px;
  opacity:.10;mix-blend-mode:overlay;pointer-events:none;
}
/* the gathered bunch darkens as the folds pack together */
.curtain.is-open .curtain__velvet{filter:brightness(.66) saturate(1.15)}

/* slack coming out of the pull line, then the travel */
.curtain.is-tugging .curtain__travel{transition-duration:190ms;transform:scaleX(1.012)}
.curtain.is-open .curtain__travel{transition-duration:2500ms;transform:scaleX(.13)}

/* the whole panel swings from its rail as it goes */
@media (prefers-reduced-motion:no-preference){
  .curtain.is-open .curtain__panel--left {animation:sway-l 3.1s var(--ease-curtain) forwards}
  .curtain.is-open .curtain__panel--right{animation:sway-r 3.1s var(--ease-curtain) forwards}
}
@keyframes sway-l{
  0%{transform:rotate(0)}22%{transform:rotate(1.25deg)}
  52%{transform:rotate(-.55deg)}76%{transform:rotate(.22deg)}100%{transform:rotate(0)}
}
@keyframes sway-r{
  0%{transform:rotate(0)}22%{transform:rotate(-1.25deg)}
  52%{transform:rotate(.55deg)}76%{transform:rotate(-.22deg)}100%{transform:rotate(0)}
}

/* pelmet stays put while the panels draw under it */
.curtain__valance{
  position:absolute;top:0;left:0;right:0;z-index:4;height:clamp(96px,17vh,180px);
  pointer-events:none;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));
}
.curtain__braid{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the swag's SHAPE stretches with the viewport, but its folds are in px, so
   they stay the same width as the folds on the panels underneath */
.curtain__swag{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.44) 0px,rgba(0,0,0,.06) 14px,rgba(255,122,122,.17) 32px,
      rgba(0,0,0,.12) 50px,rgba(0,0,0,.48) 68px),
    linear-gradient(180deg,#a2131f 0%,#851017 45%,#3d060b 100%);
  -webkit-mask-image:var(--swag);mask-image:var(--swag);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.curtain__swag::after{
  content:"";position:absolute;inset:0;
  background-image:var(--noise);background-size:240px 240px;
  opacity:.10;mix-blend-mode:overlay;
}

/* gold tiebacks, revealed once the panels are gathered */
.curtain__rope{
  position:absolute;z-index:3;top:34%;width:clamp(44px,5.5vw,78px);
  opacity:0;transition:opacity .8s ease 1.4s;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));
}
.curtain__rope .tassel{width:100%;height:auto}
.curtain__rope--left{left:clamp(4px,1.6vw,22px)}
.curtain__rope--right{right:clamp(4px,1.6vw,22px)}
.curtain.is-open .curtain__rope{opacity:1}

.curtain__card{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;justify-items:center;gap:.4rem;text-align:center;
  padding:0 1.5rem;width:min(560px,90vw);
  transition:opacity .5s ease,transform .6s ease;
}
.curtain.is-tugging .curtain__card,
.curtain.is-open .curtain__card{opacity:0;transform:translate(-50%,-60%);pointer-events:none}
.curtain__kicker{
  font:600 .78rem/1 var(--cond);letter-spacing:.44em;text-transform:uppercase;color:var(--gold)
}
.curtain__name{
  font-family:var(--display);font-size:clamp(2.6rem,1.4rem + 5.4vw,5.2rem);
  line-height:1;color:var(--cream);
  text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 44px rgba(255,190,120,.35);
  margin:.2rem 0 1.6rem;
}
.curtain__btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 2.1rem;border:2px solid var(--gold);border-radius:2px;
  background:rgba(11,7,8,.42);color:var(--gold-lt);cursor:pointer;
  font:600 .84rem/1 var(--cond);letter-spacing:.26em;text-transform:uppercase;
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.curtain__btn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.curtain__btn:hover .curtain__btn-star{color:var(--ink)}
.curtain__btn-star{color:var(--red-hot);transition:color .22s ease}
@media (prefers-reduced-motion:no-preference){
  .curtain__btn-star{animation:twinkle 2.4s ease-in-out infinite}
}
@keyframes twinkle{0%,100%{opacity:1;transform:rotate(0)}50%{opacity:.45;transform:rotate(90deg)}}

/* ═════════ ambient stage ═════════ */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient__beam{
  position:absolute;top:-40vh;left:50%;width:52vw;height:150vh;
  background:linear-gradient(180deg,rgba(255,196,120,.16),rgba(255,120,60,.05) 46%,transparent 76%);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  transform-origin:50% 0;opacity:.55;
}
.ambient__beam--a{margin-left:-46vw}
.ambient__beam--b{margin-left:-6vw;background:linear-gradient(180deg,rgba(255,110,110,.14),rgba(200,30,40,.05) 46%,transparent 76%)}
@media (prefers-reduced-motion:no-preference){
  .ambient__beam--a{animation:sweep-a 19s ease-in-out infinite alternate}
  .ambient__beam--b{animation:sweep-b 23s ease-in-out infinite alternate}
}
@keyframes sweep-a{from{transform:rotate(-11deg)}to{transform:rotate(9deg)}}
@keyframes sweep-b{from{transform:rotate(10deg)}to{transform:rotate(-8deg)}}
.ambient__embers{position:absolute;inset:0;width:100%;height:100%}
.ambient__vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 62% at 50% 42%,transparent 40%,rgba(6,3,4,.72) 100%);
}

/* ═════════ top bar ═════════ */
.topbar{position:relative;z-index:5}
.bulbs{display:flex;justify-content:space-between;gap:2px;padding:0 2vw;height:26px;align-items:center}
.bulb{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--gold-lt);
  box-shadow:0 0 10px 2px rgba(240,190,100,.7),0 0 26px 6px rgba(240,150,60,.28);
}
@media (prefers-reduced-motion:no-preference){
  .bulb{animation:bulb 2.6s ease-in-out infinite}
}
@keyframes bulb{0%,100%{opacity:1}50%{opacity:.28}}

.topbar__inner{
  width:var(--shell);margin:0 auto;padding:1rem 0 .5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-bottom:1px solid rgba(224,176,74,.16);
}
.brand{display:flex;align-items:center;gap:.65rem;min-height:44px;text-decoration:none;color:var(--cream)}
.brand__mark{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  background:var(--red);color:var(--cream);border:1.5px solid var(--gold);
  font:400 1.15rem/1 var(--display);border-radius:2px;
}
.brand__word{font:600 1rem/1 var(--cond);letter-spacing:.26em;text-transform:uppercase}
.nav{display:flex;gap:clamp(1rem,3vw,2.2rem)}
.nav a{
  color:var(--muted);text-decoration:none;
  font:600 .8rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--gold-lt);border-color:var(--gold)}

/* ═════════ hero ═════════ */
.hero{position:relative;z-index:2;display:grid;place-items:center;text-align:center;
  overflow:hidden;min-height:auto;padding:3rem 0 2rem}
.hero__ring{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(700px,86vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(224,176,74,.16);
  box-shadow:0 0 0 1px rgba(195,27,40,.12) inset,0 0 90px rgba(195,27,40,.14);
}
.hero__ring::after{
  content:"";position:absolute;top:-5px;left:50%;translate:-50% 0;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px 3px rgba(224,176,74,.6);
}
@media (prefers-reduced-motion:no-preference){
  .hero__ring{animation:ring 26s linear infinite}
}
@keyframes ring{to{rotate:360deg}}
.hero__inner{position:relative;width:var(--shell);max-width:44ch}
.hero h1{margin:0;display:grid;gap:.02em}
.hero__first{
  font-size:clamp(3.4rem,1.4rem + 9vw,8.5rem);color:var(--cream);
  text-shadow:0 0 60px rgba(255,180,120,.22);
}
.hero__last{
  font-size:clamp(3.4rem,1.4rem + 9vw,8.5rem);
  color:transparent;-webkit-text-stroke:2px var(--gold);
  paint-order:stroke fill;
}
@supports not ((-webkit-text-stroke:1px red)){ .hero__last{color:var(--gold)} }
.hero__stage{
  margin-top:1.1rem;font:500 .95rem/1 var(--cond);
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.hero__stage strong{color:var(--red-hot);font-weight:700}
.hero__blurb{margin-top:1.7rem;color:var(--muted);text-wrap:pretty}
.hero__cta{margin-top:2.4rem;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.hero__scroll{position:relative;margin:1.4rem auto 0;bottom:auto;left:50%;translate:-50% 0;width:1px;height:52px;background:linear-gradient(var(--gold),transparent)}
.hero__scroll span{position:absolute;top:0;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .hero__scroll span{animation:drop 2.6s ease-in-out infinite}
}
@keyframes drop{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:48px;opacity:0}}

/* ═════════ ticker ═════════ */
.ticker{
  position:relative;z-index:2;overflow:hidden;
  border-block:1px solid rgba(224,176,74,.22);
  background:linear-gradient(90deg,var(--blood),var(--red) 50%,var(--blood));
  padding:.85rem 0;
}
.ticker__track{display:flex;width:max-content}
.ticker__set{
  padding-right:.9rem;white-space:nowrap;color:var(--cream);
  font:600 1rem/1 var(--cond);letter-spacing:.34em;text-transform:uppercase;
}
@media (prefers-reduced-motion:no-preference){
  .ticker__track{animation:roll 34s linear infinite}
}
@keyframes roll{to{transform:translateX(-50%)}}

/* ═════════ gallery ═════════ */
.gallery{position:relative;z-index:2;width:var(--shell);margin:0 auto;padding:0 0 clamp(4.5rem,10vw,8rem)}
.gallery__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.gallery__empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 0}
.shot{
  position:relative;margin:0;overflow:hidden;border-radius:3px;
  border:1px solid rgba(224,176,74,.22);background:var(--ink-2);
}
.shot--wide{grid-column:span 2}
@media (max-width:640px){.shot--wide{grid-column:span 1}}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease;filter:saturate(.94)}
.shot--wide img{aspect-ratio:16/9}
.shot:hover img{transform:scale(1.045);filter:saturate(1.08)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem .9rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(9,5,6,.92));
  color:var(--cream);font:600 .74rem/1.4 var(--cond);
  letter-spacing:.18em;text-transform:uppercase;
}

/* ═════════ booking ═════════ */
.booking{
  position:relative;z-index:2;overflow:hidden;
  border-top:1px solid rgba(224,176,74,.2);
  background:radial-gradient(ellipse 70% 90% at 50% 100%,rgba(125,13,23,.5),transparent 70%);
  padding:clamp(4.5rem,10vw,8rem) 0;
}
.booking__tent{
  position:absolute;left:50%;bottom:-8%;translate:-50% 0;
  width:min(560px,84vw);opacity:.16;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 40%,transparent 92%);
  mask-image:linear-gradient(#000 40%,transparent 92%);
}
.booking__inner{position:relative;width:var(--shell);max-width:52ch;margin:0 auto;text-align:center}
.booking__inner h2{font-size:clamp(2.4rem,1.5rem + 3.6vw,4.2rem);color:var(--cream)}
.booking__blurb{margin-top:1.3rem;color:var(--muted);text-wrap:pretty}
.booking__cta{margin-top:2.2rem}
.booking__note{
  margin-top:2rem;color:var(--gold);opacity:.85;
  font:600 .7rem/1.7 var(--cond);letter-spacing:.18em;text-transform:uppercase;
}

/* ═════════ footer ═════════ */
.footer{position:relative;z-index:2;text-align:center;padding:3rem 1.5rem 3.4rem}
.footer__rule{
  height:8px;margin-bottom:2.4rem;
  background:repeating-linear-gradient(115deg,var(--red) 0 22px,var(--cream) 22px 44px);
  opacity:.75;
}
.footer__brand{font:400 1.6rem/1 var(--display);color:var(--gold-lt);margin-bottom:.9rem}
.footer__legal{color:var(--muted);font-size:.84rem;max-width:52ch;margin:0 auto}
.footer__legal--small{margin-top:.5rem;opacity:.7;font-size:.78rem}

/* ═════════ reduced motion ═════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .curtain__travel,.curtain__velvet{transition-duration:420ms}
  .ambient__embers{display:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

.hero--full{min-height:100vh}

/* ═════════ legal pages ═════════ */
.legal{position:relative;z-index:2;width:min(68ch,90vw);margin:0 auto;padding:clamp(3rem,8vw,6rem) 0}
.legal h1{font-size:clamp(2.6rem,1.6rem + 4vw,4.4rem);color:var(--cream);margin-bottom:2.4rem}
.legal h2{font-size:1.5rem;color:var(--gold-lt);margin:2.6rem 0 .8rem}
.legal p{color:var(--muted);margin-bottom:1rem}
.legal a{color:var(--gold-lt)}
.legal__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--gold)}
.legal__back{margin-top:3rem}
.footer__links{margin-top:.4rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.footer__links a{
  color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 .4rem;
  font:600 .72rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.footer__links a:hover{color:var(--gold-lt);border-color:var(--gold)}

/* ═════════ performance ═════════ */
.perf{position:relative;z-index:2;width:var(--shell);margin:0 auto;padding:0 0 clamp(4rem,9vw,7rem)}

.curtain__kicker--wide{letter-spacing:.28em;margin-top:.6rem}

/* ═════════ centred page rhythm ═════════ */
.u-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.topbar__inner{flex-direction:column;justify-content:center;text-align:center;gap:.2rem}
.nav{justify-content:center;flex-wrap:wrap}

/* ── hero portrait: a proscenium arch ── */
.hero__portrait{
  width:min(360px,72vw);margin:1.8rem auto .4rem;position:relative;
  border-radius:50% 50% 4px 4px / 42% 42% 4px 4px;
  overflow:hidden;border:2px solid var(--gold);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.9),0 0 70px rgba(224,176,74,.16);
}
.hero__portrait img{width:100%;height:auto;display:block}
.hero__portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(224,176,74,.10),transparent 34%,rgba(11,7,8,.55));
}
.hero{padding-block:clamp(2.5rem,5vw,4rem)}
.hero__inner{max-width:56ch}

/* ── about ── */
.about{position:relative;z-index:2;width:var(--shell);margin:0 auto;padding:clamp(4rem,9vw,7rem) 0}
.about__body{max-width:62ch;margin:0 auto;text-align:center}
.about__body p{color:var(--muted);margin-bottom:1.15rem;text-wrap:pretty}
.about__lead{
  font-family:var(--display);font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  line-height:1.3;color:var(--gold-lt);margin-bottom:1.6rem !important;
}
.about__attrib{
  color:var(--gold);font:600 .76rem/1 var(--cond);
  letter-spacing:.24em;text-transform:uppercase;margin-top:1.6rem;
}
.facts{
  list-style:none;margin:2.6rem auto 0;padding:1.6rem 1.2rem 0;max-width:52ch;
  border-top:1px solid rgba(224,176,74,.22);
  display:grid;gap:.85rem;text-align:center;
}
.facts li{display:grid;gap:.25rem}
.facts__k{color:var(--gold);font:600 .68rem/1 var(--cond);letter-spacing:.24em;text-transform:uppercase}
.facts__v{color:var(--cream);font-size:.95rem}

/* ── projects: image, then her own words, all centred ── */
.work-grid{display:grid;gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}
@media (max-width:820px){.work-grid{grid-template-columns:1fr}}
.proj{
  display:flex;flex-direction:column;width:100%;max-width:540px;
  border:1px solid rgba(224,176,74,.2);border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.proj:hover{border-color:rgba(224,176,74,.5);transform:translateY(-3px);
  box-shadow:0 26px 54px -32px rgba(195,27,40,.85)}
.proj__media{display:block;overflow:hidden;background:var(--ink);
  border-bottom:1px solid rgba(224,176,74,.18)}
/* natural proportions rather than one crop for everything */
.proj__media img{width:100%;height:auto;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease;filter:saturate(.95)}
.proj:hover .proj__media img{transform:scale(1.04);filter:saturate(1.1)}
.proj__body{padding:1.5rem 1.4rem 1.7rem;text-align:center;display:flex;
  flex-direction:column;flex:1}
.proj__title{font-size:1.5rem;color:var(--gold-lt);margin-bottom:.8rem;text-wrap:balance}
.proj__text{color:var(--muted);font-size:.96rem;text-wrap:pretty}
.proj__more{
  margin-top:auto;padding-top:1.3rem;color:var(--gold);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  font:600 .72rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;
}
.proj__more:hover{color:var(--gold-lt);text-decoration:underline;text-underline-offset:5px}

/* ── centre the remaining odds and ends ── */
.legal h1,.legal h2{text-align:center}
.legal__back{text-align:center}
.perf .section-head,.booking__inner,.section-head{margin-inline:auto}