:root{
  --bg:#0b0b0a;
  --bg-alt:#111110;
  --ink:#f3f1ea;
  --ink-dim:#a8a49a;
  --gold:#cfa86a;
  --line:rgba(243,241,234,0.12);
  --nav-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{
  scroll-behavior:smooth;
  /* Menu links land sections just below the fixed header */
  scroll-padding-top:var(--nav-h);
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
h1,h2,.loader-name{font-family:'Cormorant Garamond',serif;}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s ease, transform .9s ease;
}
.loader-inner{
  display:flex; flex-direction:column; align-items:center; gap:28px;
  width:min(90vw, 520px);
}
.loader-wave{
  display:flex; align-items:flex-end; gap:6px; height:26px;
}
.loader-wave span{
  width:3px; background:var(--gold); opacity:.85;
  animation:waveBar 1.2s ease-in-out infinite;
  border-radius:2px;
}
.loader-wave span:nth-child(1){height:40%; animation-delay:0s;}
.loader-wave span:nth-child(2){height:70%; animation-delay:.1s;}
.loader-wave span:nth-child(3){height:100%; animation-delay:.2s;}
.loader-wave span:nth-child(4){height:55%; animation-delay:.3s;}
.loader-wave span:nth-child(5){height:85%; animation-delay:.4s;}
.loader-wave span:nth-child(6){height:35%; animation-delay:.5s;}
.loader-wave span:nth-child(7){height:65%; animation-delay:.6s;}
@keyframes waveBar{
  0%,100%{ transform:scaleY(.4); }
  50%{ transform:scaleY(1); }
}

.loader-text{display:flex; flex-direction:column; align-items:center; gap:6px;}
.loader-name{
  font-size:clamp(20px,3vw,26px);
  letter-spacing:.12em;
  color:var(--ink);
}
.loader-tag{
  font-size:11px; letter-spacing:.35em; text-transform:uppercase;
  color:var(--ink-dim);
}

.loader-bar{
  width:180px; height:1px; background:var(--line); position:relative; overflow:hidden;
}
.loader-bar-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:var(--gold);
  animation:barFill 2.6s ease forwards;
}
@keyframes barFill{
  0%{ width:0%; }
  100%{ width:100%; }
}

body.loaded .loader{
  opacity:0;
  transform:scale(1.04);
  pointer-events:none;
}

/* ---------- Site reveal ---------- */
.site{
  opacity:0;
  transition:opacity 1s ease;
}
body.loaded .site{
  opacity:1;
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  /* Solid bar that sits above the hero image, not over it */
  height:var(--nav-h);
  padding:0 5%;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:background .4s ease, backdrop-filter .4s ease;
}
.nav.scrolled{
  background:rgba(11,11,10,.85);
  backdrop-filter:blur(10px);
}
.nav-brand{
  white-space:nowrap;
  font-family:'Cormorant Garamond',serif;
  color:var(--gold); text-decoration:none;
  font-size:26px; letter-spacing:.06em;
}
.nav-links{display:flex; gap:34px; margin-left:auto;}

/* Language picker: small dropdown to the right of the menu */
.lang{position:relative; order:2; margin-left:34px;}
.lang summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  padding:6px 12px;
  border:1px solid var(--line); border-radius:999px;
  color:var(--gold); font-size:13px; letter-spacing:.14em;
  transition:border-color .3s ease;
}
.lang summary::-webkit-details-marker{display:none;}
.lang summary::after{
  content:''; width:5px; height:5px; margin-top:-3px;
  border:solid var(--gold); border-width:0 1px 1px 0;
  transform:rotate(45deg);
  transition:transform .3s ease;
}
.lang[open] summary::after{transform:rotate(-135deg); margin-top:3px;}
.lang summary:hover,
.lang[open] summary{border-color:var(--gold);}
.lang ul{
  position:absolute; right:0; top:calc(100% + 10px);
  list-style:none; min-width:160px;
  background:var(--bg-alt); border:1px solid var(--line);
  padding:8px 0;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.8);
}
.lang a{
  display:block; padding:9px 18px;
  color:var(--ink-dim); text-decoration:none;
  font-size:14px; letter-spacing:.06em;
  transition:color .2s ease, background .2s ease;
}
.lang a:hover{color:var(--ink); background:rgba(207,168,106,.08);}
.lang a[aria-current]{color:var(--gold);}
.nav-toggle{order:3;}
.nav-links a{
  color:var(--gold); text-decoration:none;
  font-size:15px; letter-spacing:.14em; text-transform:uppercase;
  position:relative; display:inline-block;
  transition:color .3s ease, transform .3s ease, text-shadow .3s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.nav-links a:hover{
  color:var(--ink);
  transform:translateY(-3px);
  text-shadow:0 0 12px rgba(207,168,106,.6);
}
.nav-links a:hover::after{transform:scaleX(1);}

.nav-toggle{
  display:none; position:relative; z-index:2;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:none; cursor:pointer;
}
/* Three lines that fold into a cross when the menu is open */
.nav-toggle span{
  position:absolute; left:11px; width:22px; height:1.5px; border-radius:2px;
  background:var(--ink);
  transition:transform .45s cubic-bezier(.7,0,.2,1), opacity .25s ease, top .45s cubic-bezier(.7,0,.2,1), background .3s ease;
}
.nav-toggle span:nth-child(1){top:15px;}
.nav-toggle span:nth-child(2){top:21.25px;}
.nav-toggle span:nth-child(3){top:27.5px;}
.nav-toggle:hover span{background:var(--gold);}
.nav-toggle.is-open span:nth-child(1){top:21.25px; transform:rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0; transform:scaleX(0);}
.nav-toggle.is-open span:nth-child(3){top:21.25px; transform:rotate(-45deg);}
.nav-toggle:focus-visible{outline:1px solid var(--gold); outline-offset:2px; border-radius:50%;}

.nav-backdrop{
  position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s;
}
.menu-open .nav-backdrop{opacity:1; visibility:visible;}
/* Page behind the open menu holds still */
.menu-open, .menu-open body{overflow:hidden;}

/* ---------- Hero ---------- */
.hero{
  /* Stays pinned while the next sections slide up over it */
  position:sticky; top:var(--nav-h); z-index:0;
  margin-top:var(--nav-h);
  height:calc(100vh - var(--nav-h)); height:calc(100svh - var(--nav-h)); min-height:500px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  /* Lets the photo below size itself from the hero's width and height */
  container-type:size;
}
/* The photo is sized so the whole person is always in view, whatever the
   screen shape: its height is the hero's height, but never so wide that the
   figure (the middle ~40% of the picture) runs off the sides. Whatever space
   is left is filled with a blurred copy of the same photo. */
.hero-bg{
  position:absolute; inset:0;
  /* ~40 KB instead of the 1.7 MB PNG; the browser takes the first format it knows */
  --portrait:image-set(
    url('assets/portrait.avif') type('image/avif'),
    url('assets/portrait.webp') type('image/webp'),
    url('assets/portrait.jpg') type('image/jpeg'));
  /* Photo is 1672 × 941 */
  --ratio:1.7768;
  --photo-h:min(100cqh, 129cqw);
  --photo-w:calc(var(--photo-h) * var(--ratio));
  background:#1b1c1d;
}
.hero-bg::before,
.hero-bg::after{
  content:''; position:absolute;
  background-image:url('assets/portrait.jpg');
  background-image:var(--portrait);
  background-repeat:no-repeat;
}
.hero-bg::before{
  inset:-60px;
  background-size:cover; background-position:center;
  filter:blur(32px) brightness(.62) saturate(.9);
}
.hero-bg::after{
  /* Without container units (old browsers): the classic full-cover photo */
  inset:0;
  background-size:cover; background-position:54% 20%;
}
@supports (width:1cqw){
  .hero-bg::after{
    inset:auto;
    top:0; height:var(--photo-h); width:var(--photo-w);
    left:calc((100cqw - var(--photo-w)) * .54);
    background-size:100% 100%;
    /* Soft edges where the photo meets the blurred fill */
    -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom, #000 82%, transparent), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-composite:intersect;
  }
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,11,10,.35) 0%, rgba(11,11,10,.15) 35%, rgba(11,11,10,.85) 100%),
    linear-gradient(90deg, rgba(11,11,10,.55) 0%, rgba(11,11,10,0) 45%);
}
.hero-content{
  position:relative; z-index:2;
  padding:0 5% 8%;
  width:100%;
}
.hero-eyebrow{
  font-size:12px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.hero-name{
  font-size:clamp(48px, 10vw, 128px);
  line-height:.94;
  font-weight:500;
  color:var(--ink);
}
.scroll-cue{
  position:absolute; right:5%; bottom:-4px;
  display:flex; align-items:center; justify-content:center;
  width:1px; height:70px;
}
.scroll-cue-line{
  width:1px; height:100%; background:var(--ink-dim);
  position:relative; overflow:hidden; display:block;
}
.scroll-cue-line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--gold);
  animation:cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

/* ---------- Sections ---------- */
.section{
  position:relative; z-index:1;
  background:var(--bg);
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 5%;
  border-top:1px solid var(--line);
}
.section-alt{background:var(--bg-alt);}
.section-inner{max-width:760px; margin:0 auto; width:100%;}
.section-num{
  display:block; color:var(--gold);
  font-size:12px; letter-spacing:.3em; margin-bottom:14px;
}
.section-title{
  font-size:clamp(30px,4vw,44px);
  margin-bottom:24px;
  font-weight:500;
}
.section-text{
  color:var(--ink-dim); font-size:17px; line-height:1.8;
  max-width:60ch;
}

/* ---------- Slider (flashcards) ---------- */
.section-wide{max-width:1040px;}
[hidden]{display:none !important;}
.section-text + .slider{margin-top:40px;}
.slider{outline:none; max-width:880px;}
.slider-reviews{max-width:720px;}
.slider-viewport{
  overflow:hidden;
  touch-action:pan-y;
  transition:height .45s ease;
}
.slider-track{
  display:flex; align-items:flex-start;
  transition:transform .6s cubic-bezier(.7,0,.2,1);
}
.slider-slide{flex:0 0 100%; min-width:0; padding:2px;}

.card{
  background:var(--bg-alt);
  border:1px solid var(--line);
  display:grid;
}
.section-alt .card{background:var(--bg);}
.card-has-image{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
.card-media{background:#000; position:relative; min-height:260px;}
/* Photo fills its half of the card, however tall the text makes it */
.card-media img{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  object-fit:cover;
}
.card-has-image:not(:has(.card-body)){grid-template-columns:1fr;}
.card-has-image:not(:has(.card-body)) .card-media{min-height:0;}
.card-has-image:not(:has(.card-body)) .card-media img{position:static; object-fit:contain; max-height:52vh;}
.card-body{
  padding:30px 34px;
  display:flex; flex-direction:column; gap:14px;
  min-width:0;
}
.card-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(22px,2.2vw,28px); font-weight:500;
  color:var(--ink); line-height:1.2;
}
.card-text{
  color:var(--ink-dim); font-size:16px; line-height:1.75;
  white-space:pre-line; overflow-wrap:anywhere;
  /* Long texts scroll inside the card so the card keeps a sensible size */
  max-height:34vh; overflow-y:auto;
  padding-right:10px;
  scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
}

.slider-controls{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:20px;
}
.slider-dots{display:flex; align-items:center; gap:12px;}
.slider-dot{
  width:9px; height:9px; padding:0;
  border:1px solid var(--gold); border-radius:50%;
  background:transparent; cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.slider-dot.more{transform:scale(.6);}
.slider-dot.active{background:var(--gold); transform:scale(1.15);}
.slider-dot:hover{background:rgba(207,168,106,.45);}
.slider-arrow{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .3s ease, opacity .3s ease;
}
.slider-arrow svg{width:18px; height:18px; fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.slider-arrow:hover:not(:disabled){border-color:var(--gold);}
.slider-arrow:disabled{opacity:.3; cursor:default;}
.slider:focus-visible .slider-viewport{outline:1px solid var(--gold); outline-offset:4px;}

/* ---------- Events (Calendar) ---------- */
.events{margin-top:16px;}
.section-text + .events{margin-top:40px;}
.events-list{border-top:1px solid var(--line);}
.event{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto;
  align-items:center; gap:36px;
  padding:34px 0;
  border-bottom:1px solid var(--line);
  transition:background .4s ease;
}
.event-has-image{grid-template-columns:96px 180px minmax(0,1fr) auto;}
.event:hover{background:linear-gradient(90deg, rgba(207,168,106,.05), transparent 70%);}
.event-date{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; line-height:1;
  padding-right:28px; border-right:1px solid var(--line);
  align-self:stretch; justify-content:center;
}
.event-day{
  font-family:'Cormorant Garamond',serif;
  font-size:52px; font-weight:500; color:var(--gold);
}
.event-month{
  margin-top:8px;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink);
}
.event-year{margin-top:6px; font-size:11px; letter-spacing:.2em; color:var(--ink-dim);}
.event-media{aspect-ratio:4/3; overflow:hidden; background:#000;}
.event-media img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.event:hover .event-media img{transform:scale(1.05);}
.event-body{display:flex; flex-direction:column; gap:10px; min-width:0;}
.event-meta{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.event-meta::first-letter{text-transform:uppercase;}
.event-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(24px,2.6vw,32px); font-weight:500; line-height:1.15;
  color:var(--ink);
}
.event-place{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:15px; line-height:1.6;}
.event-venue{color:var(--ink);}
.event-address{
  color:var(--ink-dim); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.event-address:hover{color:var(--gold); border-color:var(--gold);}
.event-text{
  color:var(--ink-dim); font-size:15px; line-height:1.7;
  white-space:pre-line; overflow-wrap:anywhere;
}
.event-tickets{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  border:1px solid var(--gold); border-radius:999px;
  color:var(--gold); text-decoration:none; white-space:nowrap;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  transition:color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.event-tickets::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.event-tickets svg{
  width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s ease;
}
.event-tickets:hover,
.event-tickets:focus-visible{
  color:var(--bg);
  transform:translateY(-3px);
  box-shadow:0 10px 30px -12px rgba(207,168,106,.55);
  outline:none;
}
.event-tickets:hover::before,
.event-tickets:focus-visible::before{transform:translateY(0);}
.event-tickets:hover svg{transform:translate(2px,-2px);}
.events-empty{padding:34px 0; color:var(--ink-dim); font-size:16px; border-bottom:1px solid var(--line);}

.events-past{margin-top:36px;}
.events-past summary{
  display:inline-flex; align-items:center; gap:12px;
  cursor:pointer; list-style:none;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim);
  padding:8px 0; margin-bottom:18px;
  transition:color .3s ease;
}
.events-past summary::-webkit-details-marker{display:none;}
.events-past summary::after{
  content:''; width:7px; height:7px;
  border:solid currentColor; border-width:0 1px 1px 0;
  transform:rotate(45deg) translateY(-3px);
  transition:transform .3s ease;
}
.events-past[open] summary::after{transform:rotate(-135deg) translateY(-1px);}
.events-past summary:hover{color:var(--gold);}
.event-past{opacity:.55;}
.event-past .event-day{color:var(--ink-dim);}

/* ---------- Motion ---------- */
.motion .hero-bg{transform:scale(1.06);}
/* Only with html.motion (set before first paint when the visitor hasn't
   asked for reduced motion), so without JS everything is simply visible */
.motion .hero-bg{transition:transform 2.6s cubic-bezier(.2,.7,.2,1);}
.motion body.loaded .hero-bg{transform:scale(1);}
.motion .hero-eyebrow,
.motion .hero-name{
  opacity:0; transform:translateY(34px);
  transition:opacity 1.1s ease, transform 1.3s cubic-bezier(.2,.7,.2,1);
}
.motion .hero-name{transition-delay:.15s;}
.motion body.loaded .hero-eyebrow,
.motion body.loaded .hero-name{opacity:1; transform:none;}

/* Sections, cards and event rows rise into place as they scroll into view */
.motion .reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.motion .reveal.in{opacity:1; transform:none;}

/* Photos fade in once they have loaded instead of popping in */
.motion .fade-img{opacity:0; transition:opacity .8s ease;}
.motion .fade-img.is-loaded{opacity:1;}

/* The cards beside the current one dim while sliding */
.slider-slide{transition:opacity .6s ease;}
.slider-slide[aria-hidden="true"]{opacity:.25;}
.slider-track.dragging{transition:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ---------- Reviews ---------- */
.reviews{margin-top:88px; padding-top:56px; border-top:1px solid var(--line);}
.reviews-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px;
  margin-bottom:32px;
}
.reviews-title{font-family:'Cormorant Garamond',serif; font-size:clamp(26px,3vw,34px); font-weight:500;}
.reviews-summary{display:flex; align-items:center; gap:14px;}
.reviews-avg{font-family:'Cormorant Garamond',serif; font-size:40px; line-height:1; color:var(--gold);}
.reviews-count{color:var(--ink-dim); font-size:14px;}

/* Stars: a dim row with a gold row clipped on top, so 4.3 shows as 4.3 */
.stars{
  position:relative; display:inline-block;
  font-size:20px; letter-spacing:3px; line-height:1;
  color:rgba(243,241,234,.18);
}
.stars::before{content:'★★★★★';}
.stars-fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  overflow:hidden; white-space:nowrap; color:var(--gold);
}
.stars-fill::before{content:'★★★★★';}

.review-card{
  background:var(--bg-alt); border:1px solid var(--line);
  padding:26px 30px;
  display:flex; flex-direction:column; gap:14px;
}
.review-comment{
  color:var(--ink); font-size:16px; line-height:1.7;
  white-space:pre-line; overflow-wrap:anywhere;
  max-height:28vh; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
}
.review-meta{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; letter-spacing:.08em;}
.review-name{color:var(--gold); text-transform:uppercase; letter-spacing:.2em;}
.review-date{color:var(--ink-dim);}

.review-form{
  margin-top:56px; max-width:620px;
  display:flex; flex-direction:column; gap:24px;
}
.review-form-title{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:400;
  color:var(--gold);
}
.star-picker{border:none;}
.star-picker legend{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:8px;
}
.star-picker.invalid legend{color:#d98a7a;}
/* Reversed row lets "~" light up every star up to the hovered/chosen one */
.star-picker-row{display:inline-flex; flex-direction:row-reverse; gap:4px;}
.star-picker input{position:absolute; opacity:0; width:1px; height:1px;}
.star-picker label{
  font-size:32px; line-height:1; cursor:pointer;
  color:rgba(243,241,234,.18);
  transition:color .2s ease, transform .2s ease;
}
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label{color:var(--gold);}
.star-picker label:hover{transform:scale(1.12);}
.star-picker input:focus-visible + label{outline:1px solid var(--gold); outline-offset:2px;}

/* ---------- Enquiry form ---------- */
.enquiry-form{
  /* Gold card with black text; local tokens re-theme the fields inside it
     (accents turn black, and --bg becomes gold for text on black fills) */
  --ink:#0b0b0a;
  --ink-dim:#2e2a22;
  --line:rgba(11,11,10,0.35);
  --gold:#0b0b0a;
  --bg:#cfa86a;
  margin:40px 0 56px;
  padding:40px 36px;
  background:#cfa86a; color:var(--ink);
  border-radius:4px;
  box-shadow:0 20px 50px -25px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:28px;
}
.enquiry-form .field.invalid label,
.enquiry-form .star-picker.invalid legend,
.enquiry-form .form-status.error{color:#7a1f10;}
.enquiry-form .field.invalid input,
.enquiry-form .field.invalid textarea,
.enquiry-form .consent.invalid .consent-box{border-color:#7a1f10;}
.enquiry-form .form-submit:hover,
.enquiry-form .form-submit:focus-visible{box-shadow:0 10px 30px -12px rgba(0,0,0,.5);}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.field{display:flex; flex-direction:column; gap:10px;}
.field label{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim);
  transition:color .3s ease;
}
.field input,
.field textarea{
  width:100%;
  background:transparent; color:var(--ink);
  border:none; border-bottom:1px solid var(--line); border-radius:0;
  padding:8px 0 12px;
  font:300 17px/1.6 'Jost',sans-serif;
  outline:none; resize:vertical;
  transition:border-color .3s ease;
}
.field textarea{min-height:120px;}
.field:focus-within label{color:var(--gold);}
.field input:focus,
.field textarea:focus{border-color:var(--gold);}
.field.invalid label{color:#d98a7a;}
.field.invalid input,
.field.invalid textarea{border-color:#d98a7a;}

.consent{
  position:relative;
  display:flex; align-items:flex-start; gap:14px;
  color:var(--ink-dim); font-size:14px; line-height:1.6;
  cursor:pointer;
}
.consent input{position:absolute; opacity:0; width:18px; height:18px; margin:0;}
.consent-box{
  flex:none; width:18px; height:18px; margin-top:2px;
  border:1px solid var(--line);
  position:relative;
  transition:border-color .3s ease, background .3s ease;
}
.consent-box::after{
  content:''; position:absolute; left:5px; top:1px;
  width:5px; height:10px;
  border:solid var(--bg); border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .25s ease;
}
.consent input:checked + .consent-box{background:var(--gold); border-color:var(--gold);}
.consent input:checked + .consent-box::after{transform:rotate(45deg) scale(1);}
.consent input:focus-visible + .consent-box{border-color:var(--gold);}
.consent.invalid .consent-box{border-color:#d98a7a;}

.form-submit{
  position:relative; overflow:hidden; isolation:isolate;
  align-self:flex-start;
  padding:17px 44px;
  background:transparent; color:var(--gold);
  border:1px solid var(--gold); border-radius:999px;
  font:400 12px 'Jost',sans-serif; letter-spacing:.3em; text-transform:uppercase;
  cursor:pointer;
  transition:color .4s ease, transform .4s ease, box-shadow .4s ease, opacity .3s ease;
}
.form-submit::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.form-submit:hover,
.form-submit:focus-visible{
  color:var(--bg);
  transform:translateY(-3px);
  box-shadow:0 10px 30px -12px rgba(207,168,106,.55);
  outline:none;
}
.form-submit:hover::before,
.form-submit:focus-visible::before{transform:translateY(0);}
.form-submit:disabled{opacity:.5; cursor:wait; transform:none;}

.form-status{font-size:15px; color:var(--ink-dim); min-height:1.5em;}
.form-status.success{color:var(--gold);}
.form-status.error{color:#d98a7a;}

.social{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:48px;
}
.social li{flex:1 1 150px;}
.social-btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 18px;
  border:1px solid var(--line); border-radius:999px;
  color:var(--ink); text-decoration:none;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  transition:color .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
/* Gold fill that rises from the bottom on hover */
.social-btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.social-btn svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:var(--gold); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .4s ease, transform .4s ease;
}
.social-btn:hover,
.social-btn:focus-visible{
  color:var(--bg); border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 10px 30px -12px rgba(207,168,106,.55);
  outline:none;
}
.social-btn:hover::before,
.social-btn:focus-visible::before{transform:translateY(0);}
.social-btn:hover svg,
.social-btn:focus-visible svg{stroke:var(--bg); transform:scale(1.1);}

/* Last section: footer sits in the flow so it's always reachable */
.section-last{padding-bottom:0;}
.section-last .section-inner{margin-top:auto; margin-bottom:auto;}
.footer{
  margin:80px -5.5% 0;
  padding:30px 5%;
  border-top:1px solid var(--line);
  color:var(--ink-dim); font-size:12px; letter-spacing:.1em;
  text-align:center;
}

/* ---------- Contact layout: fits on one screen ---------- */
.contact-grid{
  max-width:1100px;
  display:grid; grid-template-columns:1fr 1.15fr; gap:72px;
  align-items:start;
}
.contact-info .section-text{font-size:16px;}
.contact-name{
  margin:28px 0 18px;
  font-family:'Cormorant Garamond',serif;
  font-size:26px; font-weight:500; color:var(--ink);
  display:flex; flex-direction:column; gap:4px;
}
.contact-name span{
  font-family:'Jost',sans-serif;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
}
.contact-grid .social{margin-top:32px; gap:10px;}
.contact-grid .social li{flex:1 1 calc(50% - 5px);}
.contact-grid .social-btn{padding:12px 14px; font-size:11px;}
.contact-grid .enquiry-form{margin:0; gap:22px; padding:36px 32px;}
.contact-grid .field textarea{min-height:96px;}
.section-last{padding-top:100px;}
.section-last .footer{margin-top:40px; padding:22px 5%;}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr; gap:48px; max-width:760px;}
  .contact-grid .enquiry-form{padding:28px 20px;}
}

/* ---------- Responsive ---------- */

/* Large monitors: a little more room */
@media (min-width:1600px){
  .section-inner{max-width:860px;}
  .section-wide{max-width:1180px;}
  .slider{max-width:960px;}
}

/* Hover effects only where there is a mouse, so taps don't leave them stuck */
@media (hover:none){
  .nav-links a:hover{transform:none; text-shadow:none;}
  .event:hover{background:none;}
  .event:hover .event-media img{transform:none;}
}

/* Tablets and below: burger menu. Longer menu words (German, Russian) need it early */
@media (max-width:1100px){
  .nav-links{
    position:fixed; top:0; right:0; z-index:1;
    height:100vh; height:100dvh; width:min(82vw,340px);
    background:var(--bg-alt);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:calc(var(--nav-h) + 12px) 40px 40px; gap:26px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .5s cubic-bezier(.7,0,.2,1);
    border-left:1px solid var(--line);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.8);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:18px; letter-spacing:.18em;}
  /* Links slide in one after another */
  .nav-links a{opacity:0; transform:translateX(24px); transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1), color .3s ease;}
  .nav-links.open a{opacity:1; transform:none;}
  .nav-links.open a:nth-child(1){transition-delay:.12s;}
  .nav-links.open a:nth-child(2){transition-delay:.17s;}
  .nav-links.open a:nth-child(3){transition-delay:.22s;}
  .nav-links.open a:nth-child(4){transition-delay:.27s;}
  .nav-links.open a:nth-child(5){transition-delay:.32s;}
  .nav-links.open a:nth-child(6){transition-delay:.37s;}
  .nav-toggle{display:block;}
  .lang{margin-left:auto; margin-right:10px;}
  .section{padding:104px 6%;}
}

@media (max-width:760px){
  :root{--nav-h:64px;}
  .nav{padding:0 20px;}
  .nav-brand{font-size:22px;}
  .hero-content{padding:0 20px 36px;}
  .hero-eyebrow{font-size:11px; letter-spacing:.3em; margin-bottom:10px;}
  .hero-name{font-size:clamp(44px,13vw,72px);}
  .scroll-cue{display:none;}
  /* Content decides the height on phones, so short sections aren't mostly empty */
  .section{min-height:0; padding:80px 20px;}
  .section-last{padding-top:80px;}
  .section-text{font-size:16px;}
  .section-text + .slider{margin-top:28px;}
  .social{margin-top:40px;}
  .social li{flex-basis:calc(50% - 7px);}
  .field-row{grid-template-columns:1fr;}
  .card-has-image{grid-template-columns:1fr;}
  .card-media{min-height:0;}
  .card-media img{position:static; height:auto; max-height:30vh;}
  .card-body{padding:22px 20px;}
  .card-text{max-height:30vh; font-size:15px;}
  .review-card{padding:22px 20px;}
  .review-comment{font-size:15px;}
  .reviews{margin-top:64px; padding-top:44px;}
  .event,
  .event-has-image{grid-template-columns:64px minmax(0,1fr); gap:10px 22px; align-items:start; padding:28px 0;}
  .event-date{padding-right:18px; grid-row:span 3;}
  .event-day{font-size:38px;}
  .event-month{letter-spacing:.2em;}
  .event-media{grid-column:2; aspect-ratio:16/9;}
  .event-body,
  .event-action{grid-column:2;}
  .event-action{margin-top:8px;}
  .footer{margin:56px -20px 0;}
}

/* Small phones */
@media (max-width:420px){
  .nav{padding:0 16px;}
  .nav-brand{font-size:20px; letter-spacing:.04em;}
  .lang summary{padding:5px 10px; font-size:12px;}
  .hero-content{padding:0 16px 28px;}
  .section{padding:72px 16px;}
  .section-title{margin-bottom:18px;}
  .social li{flex-basis:100%;}
  .contact-grid .social li{flex-basis:100%;}
  .form-submit{align-self:stretch; text-align:center;}
  .star-picker label{font-size:36px;}
  .event,
  .event-has-image{grid-template-columns:52px minmax(0,1fr); gap:10px 16px;}
  .event-date{padding-right:14px;}
  .event-day{font-size:32px;}
  .event-tickets{width:100%; justify-content:center;}
  .slider-controls{gap:12px;}
  .slider-dots{gap:10px;}
  .footer{margin:48px -16px 0;}
}

/* Phones held sideways: very little height */
@media (max-height:520px) and (orientation:landscape){
  :root{--nav-h:56px;}
  .hero{min-height:0;}
  .hero-content{padding-bottom:22px;}
  .hero-name{font-size:clamp(34px,7vw,56px);}
  .hero-eyebrow{margin-bottom:6px;}
  .section{min-height:0; padding:64px 5%;}
  .nav-links{justify-content:flex-start; gap:16px; padding-top:calc(var(--nav-h) + 8px);}
  .nav-links a{font-size:15px;}
  .card-media img{max-height:60vh;}
  .card-text{max-height:50vh;}
}