/* ═══════════════════════════════════════════════════════════
   Amberlight Court Banquets — South Kolkata, Kolkata
   Palette and marks are taken from the hall's own visiting card:
   crimson filigree butterfly, script wordmark, cream stock.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Cormorant';src:url(fonts/cormorant-var.woff2) format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}
/* The real italic. Without this the browser fakes it by slanting the roman,
   which is the single clearest tell of a cheap-looking page — and every one of
   this site's biggest headlines ends in an italic phrase. */
@font-face{font-family:'Cormorant';src:url(fonts/cormorant-italic-var.woff2) format('woff2');
  font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url(fonts/jost-var.woff2) format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Great Vibes';src:url(fonts/greatvibes-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* ground */
  --ink:        #120A0C;
  --ink-2:      #1A0F12;
  --ink-3:      #241519;
  --line:       rgba(233,206,150,.16);

  /* brand, from the card */
  --red:        #A32330;
  --red-deep:   #6E1020;
  --gold:       #C9A227;
  --gold-lt:    #E8CE86;
  --gold-dim:   #8A6A22;
  --cream:      #F1E7D7;
  --cream-2:    rgba(241,231,215,.76);
  --cream-3:    rgba(241,231,215,.56);
  --cream-4:    rgba(241,231,215,.50);   /* legal line only */

  /* butterfly instance colours (overridden per placement) */
  --bf-red:     var(--gold);
  --bf-ink:     var(--gold-dim);
  --bf-body:    var(--gold-lt);

  --glass:      rgba(241,231,215,.055);
  --glass-line: rgba(241,231,215,.14);

  --f-disp: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-ui:   'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-scr:  'Great Vibes', 'Cormorant', cursive;

  --ease: cubic-bezier(.22,1,.36,1);
  --slow: cubic-bezier(.16,1,.3,1);
  --pad:  clamp(20px, 5vw, 84px);
  --maxw: 1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--f-ui);font-weight:300;font-size:clamp(15px,1.03vw,17px);
  line-height:1.72;letter-spacing:.008em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
.svgdefs{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:var(--red);color:var(--cream)}

/* a warm vignette behind everything */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(163,35,48,.16), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(201,162,39,.07), transparent 65%);
}
main{position:relative;z-index:1}

/* ───────── type scale ───────── */
.h-display{
  font-family:var(--f-disp);font-weight:300;
  font-size:clamp(2.15rem,5.4vw,4.7rem);line-height:1.03;
  letter-spacing:-.018em;margin:0;color:var(--cream);
}
.h-display em{font-style:italic;color:var(--gold-lt);font-weight:300}
.kicker{
  font-family:var(--f-ui);font-weight:400;font-size:.66rem;
  letter-spacing:.44em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1.5rem;display:flex;align-items:center;gap:.9em;
}
.kicker::after{content:'';flex:1;max-width:78px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.sec-head{max-width:820px;margin:0 auto clamp(48px,6vw,92px);padding:0 var(--pad)}
.sec-head--center{text-align:center}
.sec-head--center .kicker{justify-content:center}
.sec-head--center .kicker::after{display:none}
.sec-head__note{color:var(--cream-3);max-width:48ch;margin:1.6rem 0 0;font-size:.94rem}

/* ───────── buttons ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-ui);font-weight:400;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;padding:1.05em 2em;border-radius:2px;border:1px solid transparent;
  cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.btn svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);transition:transform .55s var(--slow);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateY(0)}
.btn--gold{background:var(--gold);color:#1A0F12;isolation:isolate}
.btn--gold::after{background:var(--gold-lt)}
.btn--glass,.btn--ghost{
  background:var(--glass);border-color:var(--glass-line);color:var(--cream);
  isolation:isolate;
}
/* blur only where there is actually a photograph behind the button */
.hero .btn--glass{
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
}
.btn--glass::after,.btn--ghost::after{background:rgba(241,231,215,.13)}
.btn--glass:hover,.btn--ghost:hover{border-color:var(--gold)}
.btn:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}

/* ═══════════ PRELOADER ═══════════ */
/* Without JavaScript none of this may hide the page. The preloader is a
   full-screen opaque overlay that only main.js lifts, and .reveal starts at
   opacity:0 - so a blocked or failed script left a black screen with no way
   to reach the hall's phone numbers. Everything that hides content is now
   behind the .js class set inline in <head>. */
html:not(.js) .preloader{display:none}
html:not(.js) .reveal{opacity:1;transform:none}
html:not(.js) .hero__title .ln>span{transform:none}
html:not(.js) .hero__lede,
html:not(.js) .hero__acts,
html:not(.js) .hero__rating{opacity:1;transform:none}

.preloader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center;padding:24px}
.preloader__mark{
  width:clamp(90px,13vw,140px);margin:0 auto 18px;
  --bf-red:var(--gold);--bf-ink:var(--gold-dim);--bf-body:var(--gold-lt);
  animation:flutter 3.4s var(--ease) infinite;transform-origin:50% 60%;
}
@keyframes flutter{0%,100%{transform:scaleX(1) translateY(0)}50%{transform:scaleX(.9) translateY(-7px)}}
.preloader__word{font-family:var(--f-scr);font-size:clamp(3rem,7vw,4.6rem);color:var(--cream);line-height:1}
.preloader__sub{
  font-size:.62rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);
  margin-top:.5rem;padding-left:.5em;
}
.preloader__bar{width:150px;height:1px;background:rgba(241,231,215,.14);margin:28px auto 0;overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s linear}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
  padding:clamp(14px,1.8vw,24px) var(--pad);
  transition:background .55s var(--ease), backdrop-filter .55s var(--ease),
             border-color .55s var(--ease), padding .55s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(18,10,12,.72);border-bottom-color:var(--line);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  padding-top:11px;padding-bottom:11px;
}
.nav.is-hidden{transform:translateY(-100%)}
.nav{transition:transform .5s var(--ease), background .55s var(--ease),
                backdrop-filter .55s var(--ease), border-color .55s var(--ease), padding .55s var(--ease)}

.nav__brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.nav__mark{width:clamp(34px,3.4vw,44px);--bf-red:var(--gold);--bf-ink:var(--gold-dim);--bf-body:var(--gold-lt);
  transition:transform .6s var(--ease)}
.nav__brand:hover .nav__mark{transform:scale(1.08) rotate(-3deg)}
.nav__names{display:flex;flex-direction:column;line-height:1}
.nav__word{font-family:var(--f-scr);font-size:clamp(1.45rem,2.4vw,1.95rem);color:var(--cream)}
.nav__sub{font-size:.5rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-top:.3em;padding-left:.2em}

.nav__links{display:flex;gap:clamp(18px,2.4vw,38px)}
.nav__links a{
  font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2);
  position:relative;padding:.35em 0;transition:color .4s var(--ease);
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--slow);
}
.nav__links a:hover{color:var(--cream)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__cta{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.73rem;letter-spacing:.14em;color:var(--gold-lt);
  border:1px solid var(--line);padding:.7em 1.15em;border-radius:2px;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav__cta svg{width:.95em;height:.95em;fill:currentColor}
.nav__cta:hover{border-color:var(--gold);background:rgba(201,162,39,.09)}

.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.nav__burger i{display:block;width:24px;height:1.5px;background:var(--cream);transition:transform .45s var(--ease), opacity .3s}
.nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* drawer */
.drawer{
  position:fixed;inset:0;z-index:110;background:rgba(18,10,12,.985);
  display:flex;flex-direction:column;justify-content:center;gap:40px;padding:clamp(28px,8vw,72px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease), visibility .5s;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer__links{display:flex;flex-direction:column;gap:.15em}
.drawer__links a{
  font-family:var(--f-disp);font-weight:300;font-size:clamp(2rem,10vw,3.2rem);
  line-height:1.28;display:flex;align-items:baseline;gap:.7em;
  opacity:0;transform:translateY(24px);
}
.drawer.is-open .drawer__links a{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--d,0s), transform .6s var(--ease) var(--d,0s)}
.drawer__links a:nth-child(1){--d:.06s}.drawer__links a:nth-child(2){--d:.12s}
.drawer__links a:nth-child(3){--d:.18s}.drawer__links a:nth-child(4){--d:.24s}
.drawer__links em{font-family:var(--f-ui);font-style:normal;font-size:.62rem;letter-spacing:.3em;color:var(--gold)}
.drawer__foot{display:flex;flex-wrap:wrap;gap:12px}

/* ═══════════ HERO ═══════════ */
/* min-height, NOT height. With a fixed height and align-items:flex-end, a short
   browser window makes the content overflow upwards and collide with the nav.
   Letting the hero grow instead means the text can never reach the header. */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.hero__gl,.hero__fallback{position:absolute;inset:0;width:100%;height:100%}
.hero__fallback img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__gl{opacity:0;transition:opacity 1.1s var(--ease);z-index:1}
.hero__gl.is-live{opacity:1}
.hero__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    /* keeps the headline and the nav legible over any photograph */
    linear-gradient(to top,
      rgba(18,10,12,.97) 0%, rgba(18,10,12,.72) 30%,
      rgba(18,10,12,.26) 55%, rgba(18,10,12,.46) 80%, rgba(18,10,12,.86) 100%),
    linear-gradient(to right, rgba(18,10,12,.74) 0%, rgba(18,10,12,.34) 38%, transparent 68%),
    radial-gradient(85% 65% at 22% 78%, rgba(18,10,12,.55), transparent 72%);
}
.hero__grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the top padding reserves room for the fixed header */
.hero__body{
  position:relative;z-index:5;width:100%;max-width:960px;
  padding:clamp(104px,15vh,168px) var(--pad) clamp(88px,11vh,140px);
}
.hero__eyebrow{
  display:flex;align-items:center;gap:.9em;margin:0 0 1.5rem;
  font-size:.66rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);
}
.hero__eyebrow i{width:34px;height:1px;background:var(--gold);opacity:.55}
.hero__title{
  font-family:var(--f-disp);font-weight:300;margin:0;
  font-size:clamp(2.9rem,9.2vw,7.6rem);line-height:.95;letter-spacing:-.028em;
}
/* overflow:hidden is what makes the line slide up out of nothing — but it also
   slices the descender and swash off Cormorant's italic "g". So it is lifted the
   moment the entrance finishes (main.js adds .is-settled). */
.hero__title .ln{display:block;overflow:hidden}
body.is-settled .hero__title .ln{overflow:visible}
.hero__title .ln>span{display:block;transform:translateY(102%);transition:transform 1.1s var(--slow) var(--d,0s)}
.hero__title .ln:nth-child(2)>span{--d:.1s;font-style:italic;color:var(--gold-lt)}
body.is-ready .hero__title .ln>span{transform:none}
.hero__lede{
  max-width:46ch;margin:1.9rem 0 0;color:var(--cream-2);font-size:clamp(.95rem,1.25vw,1.09rem);
  opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .42s, transform .9s var(--ease) .42s;
}
.hero__acts{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:2.4rem;
  opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .54s, transform .9s var(--ease) .54s;
}
body.is-ready .hero__lede,body.is-ready .hero__acts,body.is-ready .hero__rating{opacity:1;transform:none}
.hero__rating{
  display:inline-flex;align-items:center;gap:.7em;margin-top:2rem;
  font-size:.8rem;color:var(--cream-3);
  opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .66s, transform .9s var(--ease) .66s, color .4s;
}
.hero__rating:hover{color:var(--cream-2)}
.hero__rating b{color:var(--gold-lt);font-weight:500;font-size:.95rem}
.stars{display:inline-flex;gap:2px}
.stars i{
  width:12px;height:12px;background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.stars i.half{background:linear-gradient(90deg,var(--gold) 50%, rgba(201,162,39,.28) 50%)}

.hero__rail{position:absolute;right:var(--pad);bottom:clamp(88px,11vh,140px);z-index:5;display:flex;flex-direction:column;gap:11px}
.hero__rail .dot{
  width:7px;height:7px;padding:0;border-radius:50%;border:1px solid rgba(241,231,215,.4);
  background:none;cursor:pointer;transition:all .5s var(--ease);
}
.hero__rail .dot.is-on{background:var(--gold);border-color:var(--gold);transform:scale(1.35)}

.hero__scroll{
  position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--cream-3);
  transition:opacity .5s var(--ease);
}
/* it has done its job the instant the page moves — otherwise it hangs around
   mid-page and reads as a stray label */
body.is-scrolled .hero__scroll{opacity:0;pointer-events:none}
.hero__scroll i{display:block;width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:drop 2.3s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
                46%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ═══════════ reveal utility ═══════════ */
.reveal{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ═══════════ INTRO ═══════════ */
.intro{position:relative;padding:clamp(90px,13vw,180px) 0 clamp(70px,9vw,120px);overflow:hidden}
.intro__watermark{
  position:absolute;right:-9%;top:8%;width:min(58vw,720px);opacity:.045;pointer-events:none;
  --bf-red:var(--gold);--bf-ink:var(--gold);--bf-body:var(--gold);
}
.intro__grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2.5fr);gap:clamp(24px,5vw,72px);
}
.intro__grid .kicker{margin-top:.9rem;align-self:start}
.intro__text p{color:var(--cream-2);max-width:54ch;margin:1.55rem 0 0}
.intro__text .h-display{margin-bottom:.35em}
.intro__sign{font-size:.92rem;color:var(--cream-3)!important;margin-top:2.1rem!important}
.intro__sign b{color:var(--cream);font-weight:400}
.intro__sign a{color:var(--gold-lt);border-bottom:1px solid rgba(201,162,39,.42);padding-bottom:1px;transition:border-color .35s}
.intro__sign a:hover{border-color:var(--gold-lt)}

.marks{
  list-style:none;margin:clamp(56px,7vw,96px) auto 0;padding:clamp(28px,3.4vw,44px) var(--pad);
  max-width:var(--maxw);display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;
}
.marks li{display:flex;flex-direction:column;gap:.35em}
.marks b{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.9rem,4vw,3.1rem);color:var(--gold-lt);line-height:1}
.marks span{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-3)}

/* ═══════════ OCCASIONS ═══════════ */
.occ{padding:clamp(80px,11vw,150px) 0}
.occ__grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(16px,2vw,26px);
}
.occ__card{
  position:relative;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;
  transform-style:preserve-3d;will-change:transform;
  transition:border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.occ__card:hover{border-color:rgba(201,162,39,.44);box-shadow:0 26px 60px -28px rgba(0,0,0,.85)}
.occ__media{aspect-ratio:16/9;overflow:hidden;position:relative}
.occ__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(18,10,12,.85), transparent 58%);
}
.occ__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--slow), filter .8s}
.occ__card:hover .occ__media img{transform:scale(1.075)}
.occ__body{padding:clamp(20px,2.2vw,30px);transform:translateZ(28px)}
.occ__body h3{
  font-family:var(--f-disp);font-weight:300;font-size:clamp(1.45rem,2.3vw,1.95rem);
  margin:0 0 .5rem;color:var(--cream);letter-spacing:-.01em;
}
.occ__body p{margin:0;color:var(--cream-3);font-size:.9rem;line-height:1.68}

/* ═══════════ SPACES ═══════════ */
.spaces{padding:clamp(70px,9vw,120px) 0}
.space{
  max-width:var(--maxw);margin:0 auto clamp(70px,9vw,140px);padding:0 var(--pad);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:center;
}
.space--flip .space__media{order:2}
.space__media{overflow:hidden;position:relative;border:1px solid var(--line)}
.space__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transform:scale(1.16) translateY(var(--py,0px));will-change:transform;
}
.space__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(18,10,12,.4), transparent 55%);
}
/* now carries a floor name rather than a number, so it is set as a small
   letterspaced label with a rule, not as a display numeral */
.space__no{
  font-family:var(--f-ui);font-weight:400;font-size:.6rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:.9em;margin-bottom:1.2rem;
}
.space__no::after{content:'';flex:1;max-width:56px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.space__text h3{
  font-family:var(--f-disp);font-weight:300;font-size:clamp(1.9rem,3.6vw,3rem);
  margin:0 0 1rem;letter-spacing:-.018em;
}
.space__text p{color:var(--cream-2);margin:0;max-width:44ch}
.ticks{list-style:none;padding:0;margin:1.9rem 0 0;display:flex;flex-direction:column;gap:.72rem}
.ticks li{
  position:relative;padding-left:1.7em;font-size:.86rem;color:var(--cream-3);
  letter-spacing:.02em;
}
.ticks li::before{
  content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--gold);
}

/* ═══════════ GALLERY ═══════════ */
.gal{padding:clamp(70px,9vw,120px) 0 clamp(80px,11vw,150px)}
.gal__grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.2vw,16px);
}
.tile{
  position:relative;overflow:hidden;cursor:pointer;background:var(--ink-2);
  border:1px solid transparent;padding:0;
  transition:border-color .5s var(--ease);
  opacity:0;transform:translateY(30px) scale(.985);
}
.tile.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s), border-color .5s var(--ease)}
.tile:hover,.tile:focus-visible{border-color:rgba(201,162,39,.5);outline:none}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--slow), filter .7s var(--ease)}
.tile:hover img{transform:scale(1.08)}
.tile::after{
  content:'';position:absolute;inset:0;background:rgba(18,10,12,.28);
  opacity:0;transition:opacity .6s var(--ease);
}
.tile:hover::after{opacity:1}
.tile__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.3em 1.4em;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
  background:linear-gradient(to top, rgba(18,10,12,.9), transparent);
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.tile:hover .tile__cap,.tile:focus-visible .tile__cap{opacity:1;transform:none}
/* the mosaic */
.tile:nth-child(1){grid-column:span 7;aspect-ratio:16/9}
.tile:nth-child(2){grid-column:span 5;aspect-ratio:4/3}
.tile:nth-child(3){grid-column:span 4;aspect-ratio:3/4}
.tile:nth-child(4){grid-column:span 4;aspect-ratio:3/4}
.tile:nth-child(5){grid-column:span 4;aspect-ratio:3/4}
.tile:nth-child(6){grid-column:span 5;aspect-ratio:4/3}
.tile:nth-child(7){grid-column:span 7;aspect-ratio:16/9}
.tile:nth-child(8){grid-column:span 6;aspect-ratio:16/10}
.tile:nth-child(9){grid-column:span 6;aspect-ratio:16/10}
.tile:nth-child(10){grid-column:span 4;aspect-ratio:1}
.tile:nth-child(11){grid-column:span 4;aspect-ratio:1}
.tile:nth-child(12){grid-column:span 4;aspect-ratio:1}
.tile:nth-child(n+13){grid-column:span 4;aspect-ratio:4/3}

/* ═══════════ AMENITIES ═══════════ */
.glass{
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
}
.amen{padding:clamp(70px,9vw,120px) 0}
.amen__inner{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.amen__grid{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:clamp(12px,1.4vw,18px);
}
.amen__grid li{
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:.4rem;border-radius:2px;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.amen__grid li:hover{border-color:rgba(201,162,39,.4);transform:translateY(-4px)}
.amen__grid svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.2;margin-bottom:.9rem}
.amen__grid b{font-family:var(--f-disp);font-weight:400;font-size:1.22rem;color:var(--cream);letter-spacing:.005em}
.amen__grid span{font-size:.8rem;color:var(--cream-3)}
.amen__note{
  text-align:center;margin:clamp(36px,4vw,54px) auto 0;max-width:58ch;
  color:var(--cream-3);font-size:.92rem;
}
.amen__note a{color:var(--gold-lt);border-bottom:1px solid rgba(201,162,39,.42)}

/* ═══════════ VISIT ═══════════ */
.visit{padding:clamp(70px,9vw,120px) 0 clamp(80px,10vw,140px)}
.visit__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:stretch;
}
.visit__panel{padding:clamp(30px,4vw,60px);border-radius:2px}
.visit__lede{color:var(--cream-2);margin:1.7rem 0 0;max-width:44ch}
.visit__addr{
  font-style:normal;margin:2.2rem 0 0;color:var(--cream-3);font-size:.92rem;line-height:1.85;
  padding-left:1.2em;border-left:1px solid var(--line);
}
.visit__addr b{display:block;color:var(--cream);font-weight:400;font-size:1rem;margin-bottom:.35em;font-family:var(--f-disp)}
/* the three people who answer the phone */
.people{list-style:none;padding:0;margin:2.1rem 0 0;display:flex;flex-wrap:wrap;gap:10px}
.people a{
  display:flex;flex-direction:column;gap:.15em;padding:.7em 1.15em;
  border:1px solid var(--line);border-radius:2px;transition:all .4s var(--ease);
}
.people b{font-family:var(--f-ui);font-weight:400;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.people span{font-size:.92rem;color:var(--cream-2);letter-spacing:.02em}
.people a:hover{border-color:var(--gold);background:rgba(201,162,39,.08)}
.people a:hover span{color:var(--cream)}

.visit__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.3rem}
.visit__wa{margin:2.6rem 0 .9rem;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{
  font-size:.78rem;padding:.62em 1.1em;border:1px solid var(--line);border-radius:99px;
  color:var(--cream-2);transition:all .4s var(--ease);
}
.chips a:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(201,162,39,.08)}
.visit__map{position:relative;min-height:420px;border:1px solid var(--line);overflow:hidden;border-radius:2px}
.visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(90%) hue-rotate(180deg) saturate(.5) contrast(.9)}

/* ═══════════ FOOTER ═══════════ */
.foot{
  position:relative;z-index:1;text-align:center;
  padding:clamp(60px,8vw,110px) var(--pad) clamp(30px,4vw,48px);
  border-top:1px solid var(--line);background:var(--ink-2);
}
.foot__mark{width:clamp(64px,7vw,92px);margin:0 auto 14px;
  --bf-red:var(--gold);--bf-ink:var(--gold-dim);--bf-body:var(--gold-lt);opacity:.9}
.foot__word{font-family:var(--f-scr);font-size:clamp(2.4rem,5vw,3.4rem);color:var(--cream);line-height:1}
.foot__sub{font-size:.58rem;letter-spacing:.48em;text-transform:uppercase;color:var(--gold);margin-top:.5rem;padding-left:.5em}
.foot__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(24px,3vw,44px);max-width:1000px;margin:clamp(46px,5vw,72px) auto 0;text-align:left;
}
.foot__cols h4{
  font-family:var(--f-ui);font-weight:400;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem;
}
.foot__cols p{margin:0;color:var(--cream-3);font-size:.87rem;line-height:1.85}
.foot__cols a{color:var(--cream-2);border-bottom:1px solid transparent;transition:border-color .35s,color .35s}
.foot__cols a:hover{color:var(--gold-lt);border-bottom-color:rgba(201,162,39,.5)}
.foot__fine{
  margin:clamp(44px,5vw,68px) 0 0;padding-top:26px;border-top:1px solid var(--line);
  font-size:.72rem;color:var(--cream-4);letter-spacing:.05em;
}

/* ═══════════ LIGHTBOX ═══════════ */
.lb{
  position:fixed;inset:0;z-index:180;background:rgba(10,5,7,.975);
  display:grid;place-items:center;padding:clamp(16px,4vw,60px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease), visibility .5s;
}
.lb.is-open{opacity:1;visibility:visible}
.lb__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:14px;align-items:center}
.lb__fig img{
  max-width:100%;max-height:78vh;object-fit:contain;
  transform:scale(.94);opacity:0;transition:transform .7s var(--slow), opacity .5s var(--ease);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
}
.lb.is-open .lb__fig img{transform:none;opacity:1}
.lb__fig figcaption{font-size:.78rem;letter-spacing:.13em;color:var(--cream-3);text-align:center;max-width:60ch}
.lb__x,.lb__nav{
  position:absolute;background:none;border:1px solid var(--line);color:var(--cream);
  cursor:pointer;border-radius:50%;display:grid;place-items:center;
  transition:all .4s var(--ease);
}
.lb__x{top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);width:46px;height:46px;font-size:26px;line-height:1}
.lb__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px;line-height:1}
.lb__nav--prev{left:clamp(10px,2vw,28px)}
.lb__nav--next{right:clamp(10px,2vw,28px)}
.lb__x:hover,.lb__nav:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(201,162,39,.1)}
.lb__nav:hover{transform:translateY(-50%) scale(1.07)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1020px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__cta span{display:none}
  .nav__cta{padding:.7em .8em}
  .intro__grid{grid-template-columns:1fr}
  .space,.space--flip{grid-template-columns:1fr;gap:26px}
  .space--flip .space__media{order:0}
  .space__media img{transform:scale(1.06) translateY(var(--py,0px))}
  .visit__inner{grid-template-columns:1fr}
  .visit__map{min-height:340px}
}
/* A laptop with a short browser window (bookmarks bar, taskbar) leaves very
   little height. Shrink the hero type rather than letting it crowd the header. */
@media (min-width:761px) and (max-height:820px){
  .hero__title{font-size:clamp(2.5rem,6.2vw,4.4rem)}
  .hero__lede{margin-top:1.3rem;font-size:.95rem}
  .hero__acts{margin-top:1.6rem}
  .hero__rating{margin-top:1.3rem}
  .hero__body{padding-bottom:clamp(58px,8vh,96px)}
  .hero__scroll{display:none}
}
@media (min-width:761px) and (max-height:640px){
  .hero__title{font-size:clamp(2.1rem,5vw,3.2rem)}
  .hero__eyebrow{margin-bottom:1rem}
}

@media (max-width:760px){
  .marks{grid-template-columns:repeat(2,1fr);gap:30px 16px}
  .hero__rail{display:none}
  .hero{min-height:560px}
  .hero__body{padding-bottom:clamp(64px,10vh,96px)}
  /* one wide tile, then a pair of tall ones, repeating — never leaves a hole */
  .gal__grid{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(n){grid-column:span 1;aspect-ratio:3/4}
  .tile:nth-child(3n+1){grid-column:span 2;aspect-ratio:16/10}
  .lb__nav{width:44px;height:44px;font-size:24px}
  .foot__cols{text-align:center}
}
@media (max-width:420px){
  .btn{width:100%;padding:1.05em 1.2em}
  .hero__acts{flex-direction:column;align-items:stretch}
}


/* ═══════════════════════════════════════════════════════════════════════════
   REFINEMENTS
   Everything below overrides a rule above it, so source order matters — do not
   move this block. Each group says what it is for.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Touch. A real press state, and no blue flash on Android taps ─────────── */
*{-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.1s}
.chips a:active,.people a:active,.nav__cta:active,.lb__nav:active,.lb__x:active{transform:scale(.975)}
.lb__nav:active{transform:translateY(-50%) scale(.975)}
.tile:active img{transition-property:transform;transition-duration:.14s;transform:scale(1.03)}

/* ── Line breaking. Stops a one-word last line in a headline ──────────────── */
/* deliberately NOT .hero__title — its two lines are authored, and balancing
   them adds a third, which brings back the short-window collision */
.h-display,.occ__body h3,.space__text h3,.amen__grid b{text-wrap:balance}
p,.ticks li,.sec-head__note{text-wrap:pretty}

/* ── One left spine. Every section head now starts at the same x as the grid
      beneath it, instead of being centred on the viewport ──────────────────── */
.sec-head{max-width:var(--maxw);padding:0 var(--pad)}
.sec-head > *{max-width:820px}
.sec-head--center > *{margin-inline:auto}

/* ── Gold by function. One gold was doing four jobs; the hairline gold now sits
      lower so the rules stop competing with the text they sit under ────────── */
:root{--gold-line:rgba(201,162,39,.42)}
.kicker::after,.space__no::after{background:linear-gradient(90deg,var(--gold-line),transparent)}
.ticks li::before{background:var(--gold-line)}

/* ── Small caps. Six labels sat under 10px, where letterspacing stops reading
      as elegance and starts reading as noise. Trailing letter-space is also
      optically off-centre, so the padding-left cancels it ───────────────────── */
.nav__sub   {font-size:.58rem;letter-spacing:.38em;padding-left:.38em}
.hero__scroll{font-size:.62rem;letter-spacing:.3em}
.foot__sub  {font-size:.66rem;letter-spacing:.44em;padding-left:.44em}
.space__no  {font-size:.66rem}
.foot__cols h4{font-size:.66rem;letter-spacing:.28em}
.people b   {font-size:.66rem}

/* ── Captions are prose, not labels. Uppercase + tracking on a sentence is a
      label; these are sentences ──────────────────────────────────────────────── */
.tile__cap{
  font-family:var(--f-disp);font-size:1.02rem;font-weight:400;
  letter-spacing:.005em;text-transform:none;line-height:1.35;
  background:linear-gradient(to top, rgba(18,10,12,.94) 0%, rgba(18,10,12,.72) 42%, transparent 100%);
  padding:2.2em 1.3em 1.15em;
}
.lb__fig figcaption{
  font-family:var(--f-disp);font-size:1.06rem;letter-spacing:.005em;
  color:var(--cream-2);text-transform:none;
}

/* ── Measure and leading on the two longest running paragraphs ────────────── */
.amen__note{max-width:44ch;line-height:1.62}
.visit__addr{line-height:1.62}

/* ── Figures. Old-style numerals hide inside lowercase; these are statistics
      and want to stand at cap height ────────────────────────────────────────── */
.marks b,.amen__grid b{font-variant-numeric:lining-nums tabular-nums}

/* ── Glass. The backdrop behind these panels is a flat gradient, so the blur
      cost a full-viewport GPU pass and showed nothing. Two painted layers give
      the same read for free; only the enquiry panel gets the lit top edge —
      eight amenity cards in two rows would read as a ruled table ────────────── */
.glass{
  background:
    linear-gradient(rgba(241,231,215,.055), rgba(241,231,215,.015)),
    var(--ink-2);
  border:1px solid var(--glass-line);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.visit__panel{
  border-top-color:rgba(241,231,215,.2);
  box-shadow:inset 0 1px 0 rgba(241,231,215,.05);
}

/* ── Photographs. Taken on a phone across many evenings under many different
      lights. A single light grade pulls them into one set. Nothing is added or
      removed — only saturation, contrast and level ───────────────────────────── */
.tile img,.occ__media img{filter:saturate(1.05) contrast(1.04) brightness(.985)}

/* ── Lit edges. A single hairline catching light along the top of a framed
      image reads as depth; on more than three elements it reads as a border ─── */
.occ__card,.visit__map,.space__media{border-top-color:rgba(241,231,215,.19)}
.space__media{box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}

/* ── The four hall photographs. They were the only large images on the page that
      did nothing when you approached them. Now the frame leans a little toward
      the pointer, the picture eases in, and a slow band of light crosses it —
      the way light moves over a framed photograph when you walk past it.

      The zoom uses `scale:` rather than transform:scale() on purpose: the scroll
      parallax already owns this element's `transform`, and the two would fight. */
.space__media{
  transform-style:preserve-3d;
  transition:box-shadow .7s var(--ease), border-color .7s var(--ease);
}
.space__media img{scale:1;transition:scale 1.3s var(--slow)}
.space__media:hover img{scale:1.055}
.space__media:hover{
  border-color:rgba(201,162,39,.5);
  box-shadow:0 46px 100px -44px rgba(0,0,0,.96);
}
/* the travelling highlight */
.space__media::before{
  content:'';position:absolute;inset:-10% -30%;z-index:2;pointer-events:none;
  background:linear-gradient(102deg,
    transparent 42%, rgba(241,231,215,.10) 49%, rgba(241,231,215,.03) 53%, transparent 60%);
  transform:translateX(-70%);opacity:0;
  transition:transform 1.5s var(--slow), opacity .5s var(--ease);
}
.space__media:hover::before{transform:translateX(70%);opacity:1}

/* ── Pace. Every section had roughly the same gap above it, which reads as a
      list. The gallery and the closing section are the two moments that earn a
      longer breath before them ─────────────────────────────────────────────── */
.gal,.visit{padding-top:clamp(98px,13vw,190px)}
.spaces{padding-bottom:clamp(36px,4.5vw,64px)}
.occ{padding-bottom:clamp(56px,7vw,100px)}

/* ── The ending. The footer wordmark was smaller than the section headings
      above it, so the page trailed off instead of closing ───────────────────── */
.visit__inner{grid-template-columns:1.15fr .85fr}
.foot__mark{margin-bottom:22px}
.foot__word{font-size:clamp(3rem,7.6vw,5.2rem);line-height:1.08}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important}
  .reveal,.tile{opacity:1!important;transform:none!important}
  .space__media img{scale:1!important}
  .space__media::before{display:none}
  .hero__title .ln>span{transform:none!important}
  .hero__lede,.hero__acts,.hero__rating{opacity:1!important;transform:none!important}
  .space__media img{transform:none!important}
}

/* ═══════════ PRINT ═══════════ */
@media print{
  .nav,.drawer,.hero__gl,.hero__rail,.hero__scroll,.lb,.preloader,.visit__map{display:none!important}
  body{background:#fff;color:#000}
  .h-display,.hero__title{color:#000}
}

/* ---------- document page (privacy and terms) ------------------------
   Amberlight Court had no legal page at all until 25 Aug, which made it the most
   exposed of the four personal builds: a live site naming a real place,
   showing real guests and inviting real phone calls, with nothing on it
   saying what it did or did not do. These are the only styles that page
   needs; it reuses the nav and the footer. */
.doc{max-width:74ch;margin:0 auto;
  padding:clamp(96px,14vh,150px) var(--pad) clamp(72px,10vh,120px)}
.doc__back{display:inline-block;margin-bottom:26px;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);text-decoration:none}
.doc h1{font-family:var(--display,inherit);font-size:clamp(32px,5vw,50px);
  line-height:1.06;letter-spacing:-.02em;color:var(--cream);margin:0 0 12px}
.doc__updated{color:var(--cream-4);font-size:14.5px;margin:0 0 44px}
.doc h2{font-size:clamp(19px,2.2vw,23px);letter-spacing:-.01em;color:var(--gold-lt);
  margin:42px 0 12px;font-weight:500}
.doc p{color:var(--cream-2);line-height:1.75;margin:0 0 14px;font-size:16.5px}
.doc p b{color:var(--cream);font-weight:600}
.doc a{color:var(--gold-lt)}
@media (hover:hover) and (pointer:fine){ .doc a:hover{color:var(--gold)} }

/* ---------- questions ------------------------------------------------
   Native <details>, so every answer is in the DOM for a crawler and for
   an assistant reading the page, and it all still works with JavaScript
   off. The marker is drawn with a pseudo-element rather than the default
   triangle so it can rotate. */
.faq{max-width:var(--maxw,1180px);margin:0 auto;padding:0 var(--pad) clamp(70px,9vw,120px)}
.faq__list{max-width:860px;margin:0 auto;border-top:1px solid rgba(241,231,215,.16)}
.qa{border-bottom:1px solid rgba(241,231,215,.16)}
.qa summary{
  list-style:none;cursor:pointer;position:relative;
  padding:22px 46px 22px 0;color:var(--cream);
  font-size:clamp(16.5px,1.9vw,19px);line-height:1.4;font-weight:500;
  transition:color 220ms cubic-bezier(.16,1,.3,1)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);
  transition:transform 240ms cubic-bezier(.16,1,.3,1)}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.qa__a{padding:0 46px 22px 0}
.qa__a p{color:var(--cream-2);line-height:1.75;margin:0;font-size:16px;max-width:66ch}
@media (hover:hover) and (pointer:fine){ .qa summary:hover{color:var(--gold-lt)} }
@media (max-width:700px){
  .qa summary{padding-right:36px}
  .qa__a{padding-right:0}
}

/* ---------- tap targets on a phone -----------------------------------
   Measured at 375px: fifteen interactive elements rendered under 40px
   tall, and the worst of them were the controls people actually use.
   The menu button was 31px, the call button 29px and the reviews link
   26px. WCAG 2.5.5 asks for 44px and both Apple and Google give the
   same figure; a 31px hamburger on a phone is a control that gets
   missed and tapped twice.

   The sizes below are floors, not paddings, so nothing in the layout
   moves on a desktop where these already clear the bar. */
@media (max-width:900px){
  .nav__burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .nav__cta{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center}
  .nav__brand{min-height:44px;display:inline-flex;align-items:center}
}
@media (pointer:coarse){
  .hero__rating{min-height:44px;display:inline-flex;align-items:center}
  .foot a,.qa summary{min-height:44px}
  .foot a{display:inline-flex;align-items:center}
  /* The number in the closing line of the intro is a real call button,
     not decoration, and it was the smallest target on the page at 23px. */
  .intro__sign a{min-height:44px;display:inline-flex;align-items:center}
  /* The WhatsApp topic chips sat at 39px, just under the bar. */
  .chips a{min-height:44px;display:inline-flex;align-items:center}
}

/* ===========================================================================
   COOKIE NOTICE, added 30 Aug 2026. Built by main.js so the wording cannot
   drift between index.html and legal.html. This hall's site sets nothing of
   its own, so the notice says that rather than inventing a choice.
   The build is dark and gold throughout with no light mode, so the bar is a
   raised dark surface with a gold hairline. Dark text on the gold chip is the
   pairing that passes; cream on #C9A227 does not.
   =========================================================================== */
.cookiebar{
  position:fixed; z-index:80;
  left:clamp(.5rem,2vw,1.25rem); right:clamp(.5rem,2vw,1.25rem);
  bottom:clamp(.5rem,2vw,1.25rem);
  max-width:46rem; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.15rem;
  padding:1rem 1.15rem;
  background:#241519; color:#D9CBB6;
  border:1px solid rgba(233,206,150,.26);
  border-left:3px solid #C9A227;
  border-radius:12px;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.8);
  transform:translateY(130%); opacity:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1), opacity .42s cubic-bezier(.16,1,.3,1);
}
.cookiebar--in{transform:none; opacity:1}
.cookiebar--out{transform:translateY(130%); opacity:0}
.cookiebar__text{
  flex:1 1 20rem; margin:0;
  font-family:var(--f-ui); font-weight:300;
  font-size:.88rem; line-height:1.55;
}
.cookiebar__text strong{color:#F1E7D7; font-weight:600}
.cookiebar__text a{color:#E8CE86; font-weight:500}
.cookiebar__btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:.6rem 1.4rem;
  border:0; border-radius:999px; cursor:pointer;
  background:#C9A227; color:#120A0C;
  font-family:var(--f-ui); font-size:.82rem; font-weight:600; letter-spacing:.02em;
  transition:transform .16s ease-out, filter .2s ease-out;
}
.cookiebar__btn:hover{filter:brightness(1.1)}
.cookiebar__btn:active{transform:scale(.97)}
.cookiebar__btn:focus-visible{outline:2px solid #F1E7D7; outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .cookiebar{transition:none; transform:none; opacity:1}
  .cookiebar--out{display:none}
}

/* Credit line, added 30 Aug 2026, to match the other four personal builds. */
.byline{
  margin:16px 0 0; text-align:center;
  font-family:var(--f-ui); font-weight:300;
  font-size:13px; letter-spacing:.04em;
  color:var(--cream-4,rgba(241,231,215,.50));
}

/* Concept-site additions. */
.map-stub{padding:28px 24px;border:1px solid currentColor;opacity:.75;font-size:.95em}