/* ==========================================================================
   EZEEMABI HUB: PAGE SECTIONS
   Hero · story · halls · amenities · gallery · shortlets · booking · contact
   ========================================================================== */

/* ------------------------------------------------------------------ HERO
   A split composition: type on the left, one photograph in a framed panel on
   the right. This is not a stylistic preference, it is what the photography
   can carry. A full-bleed hero needs a ~2400px source; a panel at 45% of the
   viewport needs about 1300px, which is exactly what a phone produces once
   it has survived being sent around. Real photography beats a bigger stock
   photograph on a venue's own home page.                                    */
.hero{
  position:relative;overflow:hidden;overflow:clip;
  padding-block:clamp(5.5rem,11vh,8rem) clamp(1.25rem,2.6vh,2.25rem);
}
.hero__grid{display:grid;gap:clamp(2.5rem,1.5rem + 4vw,5rem);align-items:center}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
}
.hero__eyebrow{margin-bottom:clamp(1rem,2.6vh,2rem)}
/* Half the width means the display size has to come down, or the second
   line wraps badly at every desktop size. */
.hero__title{margin-bottom:clamp(1rem,2.6vh,2rem);
             font-size:clamp(2.3rem,1rem + 4.1vw,4.3rem)}
.hero__sub{max-width:34rem;color:var(--ivory-60);font-size:var(--fs-lead);line-height:1.6}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.75rem,3.4vh,2.75rem)}

/* The photograph, with a gold frame stepped out behind it and a fact card
   breaking its lower edge. Both devices sit outside the image, so nothing
   is ever printed over the picture itself. */
.hero__panel{position:relative}
.hero__fig{
  position:relative;z-index:1;border-radius:var(--radius);
  box-shadow:var(--edge),var(--shadow-lift);
  /* Landscape, and capped by viewport height. A portrait panel looks striking
     in isolation but pushes the calls to action and the stat rail below the
     fold at every laptop size, which costs more than it gains. */
  aspect-ratio:4/3;
  max-height:min(66vh,40rem);
}
@media (max-width:899px){ .hero__fig{aspect-ratio:16/11;max-height:none} }
.hero__frame{
  position:absolute;z-index:0;
  right:clamp(-1.1rem,-.9vw,-.6rem);bottom:clamp(-1.1rem,-.9vw,-.6rem);
  width:54%;height:62%;
  border:1px solid var(--gold-30);border-radius:var(--radius);
  pointer-events:none;
}
.hero__badge{
  position:absolute;z-index:2;left:clamp(-.75rem,-1vw,-.5rem);bottom:clamp(1.5rem,3vw,2.75rem);
  display:flex;align-items:center;gap:.9rem;padding:.95rem 1.4rem;
  background:var(--ink-800);border:1px solid var(--gold-30);border-radius:var(--radius);
  box-shadow:var(--edge),var(--shadow-card);
}
.hero__badge b{
  font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);color:var(--gold-pale);line-height:1;
}
.hero__badge span{
  font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--ivory-45);max-width:9ch;line-height:1.35;
}

/* Bottom rail: three facts and a scroll cue, full width under the split. */
.hero__rail{
  border-top:1px solid var(--line);margin-top:clamp(1.75rem,1rem + 3vw,3.25rem);
  padding-top:clamp(1rem,2vh,1.6rem);
  display:grid;gap:1.5rem;align-items:center;
}
@media (min-width:760px){ .hero__rail{grid-template-columns:repeat(3,1fr) auto} }
.hero__fact b{display:block;font-family:var(--ff-display);font-weight:var(--fw-display);
              font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
              color:var(--gold-pale);line-height:1}
.hero__fact span{display:block;margin-top:.5rem;font-size:var(--fs-eyebrow);text-transform:uppercase;
                 letter-spacing:var(--ls-eyebrow);color:var(--ivory-45)}
.hero__scroll{display:none;align-items:center;gap:.85rem;font-size:var(--fs-eyebrow);
              text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--ivory-45)}
@media (min-width:760px){ .hero__scroll{display:flex} }
.hero__scroll i{display:block;width:1px;height:44px;background:linear-gradient(var(--gold),transparent);
                position:relative;overflow:hidden}
.hero__scroll i::after{content:'';position:absolute;inset:0;background:var(--gold);
                       animation:scrollcue 2.2s var(--ease-io) infinite}
@keyframes scrollcue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* Compact header for the interior pages. A photograph pushed well back:
   heavily darkened by --grade-deep and then a scrim on top, because this is a
   backdrop for a page title and nothing else. */
.phero{
  position:relative;padding-block:clamp(9rem,6.5rem + 9vw,14rem) clamp(3rem,2rem + 3vw,5rem);
  overflow:hidden;overflow:clip;isolation:isolate;border-bottom:1px solid var(--line);
}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover;filter:var(--grade-deep)}
.phero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,5,6,.86),rgba(5,5,6,.6) 45%,rgba(8,8,10,.96));
}
.phero__crumb{display:flex;align-items:center;gap:.7rem;font-size:var(--fs-xs);
              color:var(--ivory-30);margin-bottom:1.6rem}
.phero__crumb a:hover{color:var(--gold-pale)}
.phero__title{margin-bottom:1.4rem}
.phero__sub{max-width:44rem;color:var(--ivory-60);font-size:var(--fs-lead)}

/* ----------------------------------------------------------------- STORY */
.story{display:grid;gap:clamp(2.5rem,1.6rem + 3.4vw,5rem);align-items:center}
@media (min-width:960px){
  .story{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .story--flip .story__media{order:2}
}
.story__media{position:relative}
.story__media .fig{border-radius:var(--radius)}
/* Small offset plate behind the photo: depth without a drop shadow. */
.story__plate{position:absolute;inset:auto auto -1.75rem -1.75rem;width:58%;height:52%;
              border:1px solid var(--gold-30);border-radius:var(--radius);z-index:-1}
.story__badge{
  position:absolute;right:-1rem;top:-1rem;width:clamp(6.5rem,5rem + 4vw,9rem);aspect-ratio:1;
  display:grid;place-items:center;text-align:center;gap:.2rem;
  background:var(--ink-800);border:1px solid var(--gold-30);border-radius:50%;
  box-shadow:var(--edge),var(--shadow-card);
}
.story__badge b{font-family:var(--ff-display);font-weight:var(--fw-display);
                font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
                color:var(--gold-pale);line-height:1}
.story__badge span{font-size:.5625rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ivory-45);
                   max-width:8ch;line-height:1.4}

/* Full-bleed story. The photograph runs off the edge of the screen while the
   copy stays on the container grid. Breaking out of the centred box once,
   deliberately, is what stops a page reading as a template. */
@media (min-width:1000px){
  .story--bleed{
    margin-inline:calc(50% - 50vw);
    grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
    gap:0;
    align-items:center;
  }
  /* Height is capped rather than stretched to the copy. Stretching made the
     frame taller than the viewport, so the photograph could never be seen
     whole, and forced the browser to upscale a 1280px source past its
     resolution. Capped, it is seen at once and rendered below native size. */
  .story--bleed .story__media .fig{
    aspect-ratio:4/3;height:auto;max-height:min(84vh,46rem);min-height:24rem;border-radius:0;
  }
  .story--bleed .story__plate{display:none}
  .story--bleed .story__badge{right:-2.75rem}
  .story--bleed .story__body{
    align-self:center;
    padding-block:clamp(2rem,1rem + 4vw,5rem);
    padding-left:clamp(2.5rem,4vw,5.5rem);
    padding-right:max(var(--gutter),calc(50vw - var(--maxw) / 2 + var(--gutter)));
  }
}
.story__body{--flow:1.5rem}
.story__list{display:grid;gap:1.1rem;margin-top:2.25rem}
.story__list li{display:flex;gap:1rem;align-items:flex-start;color:var(--ivory-60);font-size:var(--fs-sm)}
.story__list svg{width:16px;height:16px;flex:none;margin-top:.35rem;stroke:var(--gold);fill:none;stroke-width:1.5}

/* ----------------------------------------------------------------- HALLS */
.hall{display:grid;gap:clamp(2rem,1.4rem + 2.6vw,4rem);align-items:center;
      padding-block:clamp(3rem,2rem + 3.4vw,5.5rem);border-bottom:1px solid var(--line)}
.hall:last-child{border-bottom:0}
@media (min-width:960px){
  .hall{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
  .hall--flip .hall__media{order:2}
}
.hall__head{display:flex;align-items:baseline;gap:1.25rem;margin-bottom:1.25rem}
.hall__num{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--gold);letter-spacing:.16em;flex:none}
.hall__text{color:var(--ivory-60);margin-bottom:2rem;max-width:46ch}
.spec{border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
          padding:.95rem 0;border-bottom:1px solid var(--line)}
.spec dt{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
         color:var(--ivory-45)}
.spec dd{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.15rem;
         color:var(--gold-pale);text-align:right}
/* The day rate is the bottom line of the spec table, so it is weighted
   like one. Its value is printed from assets/js/spaces.js. */
.spec__rate dt{color:var(--gold)}
.spec__rate dd{font-size:1.4rem}
.hall__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem}

/* ------------------------------------------------------------- AMENITIES */
.amen{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
      overflow:hidden;box-shadow:var(--edge),var(--shadow-card)}
@media (min-width:600px){ .amen{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .amen{grid-template-columns:repeat(3,1fr)} }
.amen__i{background:var(--ink-800);padding:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);
         display:flex;gap:1.15rem;align-items:flex-start;
         transition:background-color var(--dur-2) var(--ease-luxe)}
.amen__i:hover{background:var(--ink-700)}
.amen__i svg{width:22px;height:22px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.2;margin-top:.15rem;
             transition:scale var(--dur-2) var(--ease-luxe)}
.amen__i:hover svg{scale:1.14}
.amen__i b{display:block;font-family:var(--ff-display);font-weight:var(--fw-display);
           font-size:1.2rem;margin-bottom:.4rem}
.amen__i span{font-size:var(--fs-sm);color:var(--ivory-45);line-height:1.7}

/* --------------------------------------------------------------- GALLERY */
.gfilter{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
         margin-bottom:clamp(2.5rem,1.8rem + 2.4vw,4rem)}
.ggrid{display:grid;gap:clamp(.75rem,.5rem + .9vw,1.25rem);grid-template-columns:repeat(2,1fr);
       grid-auto-flow:dense}
@media (min-width:760px){ .ggrid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1200px){ .ggrid{grid-template-columns:repeat(4,1fr)} }
.gitem{
  position:relative;display:block;overflow:hidden;overflow:clip;border-radius:var(--radius);
  background:var(--ink-800);aspect-ratio:4/5;z-index:0;
  transition:opacity var(--dur-2) var(--ease-luxe),transform var(--dur-2) var(--ease-luxe),
             translate var(--dur-2) var(--ease-luxe),box-shadow var(--dur-2) var(--ease-luxe);
}
.gitem:hover{
  translate:0 -4px;z-index:2;
  box-shadow:0 0 0 1px var(--gold-30),var(--shadow-lift),var(--glow);
}
/* Editorial rhythm: some tiles span two columns / two rows. */
@media (min-width:760px){
  .gitem--wide{grid-column:span 2;aspect-ratio:16/10}
  .gitem--tall{grid-row:span 2;aspect-ratio:auto}
}
.gitem img{width:100%;height:100%;object-fit:cover;
  filter:var(--grade);
  transition:transform 1s var(--ease-luxe),filter var(--dur-3) var(--ease-luxe)}
.gitem:hover img{transform:scale(1.06);filter:var(--grade-hover)}
.gitem__cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.25rem 1.1rem;
  background:linear-gradient(180deg,transparent,rgba(5,5,6,.9));
  font-size:var(--fs-xs);color:var(--ivory-80);letter-spacing:.04em;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-2) var(--ease-luxe),transform var(--dur-2) var(--ease-luxe);
}
.gitem:hover .gitem__cap{opacity:1;transform:none}
@media (hover:none){ .gitem__cap{opacity:1;transform:none} }
.gitem.is-out{opacity:0;transform:scale(.96);pointer-events:none;position:absolute;visibility:hidden}

/* -------------------------------------------------------------- SHORTLETS */
.slet{
  position:relative;overflow:hidden;overflow:clip;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--ink-750);box-shadow:var(--edge),var(--shadow-card);
  transition:translate var(--dur-2) var(--ease-luxe),box-shadow var(--dur-2) var(--ease-luxe),
             border-color var(--dur-2) var(--ease-luxe);
}
.slet:hover{
  translate:0 var(--lift);border-color:var(--gold-30);
  box-shadow:var(--edge),var(--shadow-lift),var(--glow);
}
.slet__media{aspect-ratio:4/3}
.slet__body{padding:clamp(1.5rem,1.1rem + 1.3vw,2.25rem)}
.slet__row{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.1rem;
           font-size:var(--fs-xs);color:var(--ivory-45)}
.slet__row span{display:flex;align-items:center;gap:.5rem}
.slet__row svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.4}
.slet__price{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
             display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.slet__price b{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.5rem;
               color:var(--gold-pale)}
.slet__price span{font-size:var(--fs-xs);color:var(--ivory-30)}
/* "Coming soon" veil sits over the whole card without hiding the photography. */
.slet--soon .slet__media::after{
  content:'';position:absolute;inset:0;background:rgba(5,5,6,.45);backdrop-filter:blur(1.5px)}
.slet__flag{position:absolute;top:1rem;left:1rem;z-index:2}

.waitlist{
  background:var(--ink-750);border:1px solid var(--gold-30);border-radius:var(--radius);
  box-shadow:var(--edge),var(--shadow-card);
  padding:clamp(1.75rem,1.3rem + 2vw,3rem);
}
.waitlist__form{display:grid;gap:.85rem;margin-top:1.75rem}
@media (min-width:640px){ .waitlist__form{grid-template-columns:1fr auto} }

/* ------------------------------------------------------------- CTA BAND */
.ctaband{position:relative;overflow:hidden;overflow:clip;isolation:isolate;text-align:center}
[data-theme="light"] .ctaband{border-block:1px solid rgba(201,162,39,.3)}
[data-theme="light"] .phero{border-bottom-color:rgba(201,162,39,.3)}
.ctaband__media{position:absolute;inset:0;z-index:-2}
.ctaband__media img{width:100%;height:100%;object-fit:cover;filter:var(--grade-deep) brightness(.42)}
.ctaband__scrim{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 70% at 50% 50%,rgba(8,8,10,.55),rgba(5,5,6,.94))}
.ctaband__in{padding-block:clamp(5rem,3.4rem + 7vw,9rem);max-width:44rem;margin-inline:auto}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.5rem}

/* --------------------------------------------------------------- CONTACT */
.cinfo{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
       overflow:hidden;box-shadow:var(--edge),var(--shadow-card)}
@media (min-width:700px){ .cinfo{grid-template-columns:repeat(3,1fr)} }
.cinfo__i{background:var(--ink-800);padding:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)}
.cinfo__i svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.3;margin-bottom:1.2rem}
.cinfo__i b{display:block;font-size:var(--fs-eyebrow);text-transform:uppercase;
            letter-spacing:var(--ls-eyebrow);color:var(--gold);margin-bottom:.9rem}
.cinfo__i p,.cinfo__i a{color:var(--ivory-60);font-size:var(--fs-sm);line-height:1.8;display:block}
.cinfo__i a:hover{color:var(--gold-pale)}
.map{aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
     background:var(--ink-800);position:relative}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg)}
/* The invert above is what makes a Google map look dark. Undo it in light mode. */
[data-theme="light"] .map iframe{filter:grayscale(.35) contrast(1.02)}
.map__ph{position:absolute;inset:0;display:grid;place-items:center;gap:.75rem;text-align:center;
         color:var(--ivory-30);font-size:var(--fs-sm);padding:2rem}
.map__open{
  position:absolute;right:1rem;bottom:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.6em;padding:.7rem 1.15rem;
  background:var(--ink-800);border:1px solid var(--gold-30);border-radius:var(--radius);
  box-shadow:var(--edge),var(--shadow-card);
  font-size:var(--fs-eyebrow);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-caps);color:var(--gold-pale);
  transition:all var(--dur-2) var(--ease-luxe);
}
.map__open svg{width:1em;height:1em;flex:none}
.map__open:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-900);
                 translate:0 var(--lift-sm)}

/* --------------------------------------------------------------- BOOKING */
.book{display:grid;gap:clamp(2rem,1.4rem + 2.4vw,3.5rem)}
@media (min-width:1000px){ .book{grid-template-columns:minmax(0,1fr) 22rem;align-items:start} }

/* Progress rail */
.brail{display:flex;gap:.5rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}
.brail__i{flex:1;display:grid;gap:.75rem}
.brail__bar{height:2px;background:var(--ivory-14);position:relative;overflow:hidden}
.brail__bar::after{content:'';position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--ease-luxe)}
.brail__i.is-done .brail__bar::after,.brail__i.is-now .brail__bar::after{transform:scaleX(1)}
.brail__lbl{font-size:.625rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ivory-30);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brail__i.is-now .brail__lbl{color:var(--gold)}
.brail__i.is-done .brail__lbl{color:var(--ivory-60)}

.bstep{display:none}
.bstep.is-active{display:block;animation:qfade .55s var(--ease-luxe)}
.bstep__h{margin-bottom:.75rem}
.bstep__p{color:var(--ivory-45);font-size:var(--fs-sm);margin-bottom:2rem;max-width:52ch}
.bstep__nav{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.5rem;
            padding-top:2rem;border-top:1px solid var(--line)}
.bstep__nav .btn--back{margin-right:auto}

/* Selectable option card (event type / hall) */
.opt{
  position:relative;display:block;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
  background:var(--ink-800);box-shadow:var(--edge),var(--shadow-card);
  transition:all var(--dur-2) var(--ease-luxe);
}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt__in{padding:1.4rem 1.5rem;display:flex;gap:1.1rem;align-items:flex-start}
.opt svg{width:22px;height:22px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.2;margin-top:.15rem;
         transition:transform var(--dur-2) var(--ease-luxe)}
.opt b{display:block;font-family:var(--ff-display);font-weight:var(--fw-display);
       font-size:1.2rem;margin-bottom:.3rem}
.opt span{font-size:var(--fs-xs);color:var(--ivory-45);line-height:1.65}
.opt:hover{border-color:var(--gold-30);background:var(--ink-750);
           translate:0 var(--lift-sm);box-shadow:var(--edge),var(--shadow-card),var(--glow)}
.opt:has(input:checked){border-color:var(--gold);background:var(--gold-08)}
.opt:has(input:checked) svg{transform:scale(1.1)}
.opt:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.opt__tick{position:absolute;top:1rem;right:1rem;width:18px;height:18px;border-radius:50%;
           border:1px solid var(--line-strong);display:grid;place-items:center;
           transition:all var(--dur-2) var(--ease-luxe)}
.opt__tick::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--gold);
                  transform:scale(0);transition:transform var(--dur-2) var(--ease-luxe)}
.opt:has(input:checked) .opt__tick{border-color:var(--gold)}
.opt:has(input:checked) .opt__tick::after{transform:scale(1)}

/* Calendar */
.cal{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
     background:var(--ink-800);box-shadow:var(--edge),var(--shadow-card)}
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
           padding:1.1rem 1.25rem;border-bottom:1px solid var(--line)}
.cal__title{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.35rem}
.cal__nav{display:flex;gap:.5rem}
.cal__btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-strong);
          border-radius:var(--radius);color:var(--ivory-60);transition:all var(--dur-1)}
.cal__btn:hover:not([disabled]){border-color:var(--gold-50);color:var(--gold);background:var(--gold-08);
                                translate:0 var(--lift-sm)}
.cal__btn[disabled]{opacity:.25;cursor:not-allowed}
.cal__btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);padding:.85rem .6rem .35rem;gap:2px}
.cal__dow span{text-align:center;font-size:.5625rem;text-transform:uppercase;letter-spacing:.14em;
               color:var(--ivory-30)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:.35rem .6rem .85rem}
.cal__day{
  /* Square at narrow widths, but capped so a wide calendar does not become
     a grid of huge empty boxes. */
  aspect-ratio:1;max-height:46px;
  display:grid;place-items:center;position:relative;
  font-size:var(--fs-sm);color:var(--ivory-60);border-radius:var(--radius);
  font-variant-numeric:tabular-nums lining-nums;
  border:1px solid transparent;
  transition:all var(--dur-1) var(--ease-luxe);
}
.cal__day:hover:not(:disabled):not(.is-off){border-color:var(--gold-50);color:var(--ivory)}
.cal__day.is-off{color:var(--ivory-14);pointer-events:none}
.cal__day:disabled{color:var(--ivory-14);cursor:not-allowed}
.cal__day.is-taken{color:var(--ivory-14);cursor:not-allowed;text-decoration:line-through}
.cal__day.is-taken::after{content:'';position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;
                          background:var(--danger);opacity:.6}
.cal__day.is-today{border-color:var(--line-strong)}
.cal__day.is-today::after{content:'';position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;
                          background:var(--ivory-30)}
.cal__day.is-sel{background:var(--gold);color:var(--ink-900);border-color:var(--gold);font-weight:500}
.cal__day.is-sel::after{background:var(--ink-900)}
.cal__key{display:flex;flex-wrap:wrap;gap:1rem;padding:.9rem 1.25rem;border-top:1px solid var(--line);
          font-size:var(--fs-xs);color:var(--ivory-30)}
.cal__key span{display:flex;align-items:center;gap:.5rem}
.cal__key i{width:9px;height:9px;border-radius:2px;flex:none}
.cal__note{flex-basis:100%;margin-top:.4rem;color:var(--ivory-45);line-height:1.5}

/* Guest stepper */
.stepper{display:flex;align-items:center;gap:1.25rem;
         border:1px solid var(--line-strong);border-radius:var(--radius);
         background:var(--ink-800);padding:.6rem .75rem;width:fit-content}
.stepper button{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line-strong);
                border-radius:var(--radius);color:var(--gold);font-size:1.1rem;transition:all var(--dur-1)}
.stepper button:hover:not([disabled]){border-color:var(--gold-50);background:var(--gold-08);
                                      translate:0 var(--lift-sm)}
.stepper button[disabled]{opacity:.3;cursor:not-allowed}
.stepper output{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.9rem;
                min-width:4.5ch;text-align:center;color:var(--gold-pale)}

/* Summary aside */
.bsum{
  background:var(--ink-750);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--edge),var(--shadow-card);
  padding:clamp(1.5rem,1.2rem + 1.2vw,2rem);position:sticky;top:6.5rem;
}
.bsum__h{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
         color:var(--gold);padding-bottom:1.25rem;border-bottom:1px solid var(--line);margin-bottom:1.25rem}
.bsum__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.6rem 0}
.bsum__row dt{font-size:var(--fs-xs);color:var(--ivory-45);text-transform:uppercase;letter-spacing:.1em}
.bsum__row dd{font-size:var(--fs-sm);color:var(--ivory);text-align:right;max-width:60%}
.bsum__row dd.is-empty{color:var(--ivory-14)}
.bsum__total{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--gold-30);
             display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.bsum__total dt{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--gold)}
.bsum__total dd{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.75rem;
                color:var(--gold-pale)}
.bsum__note{margin-top:1.25rem;font-size:var(--fs-xs);color:var(--ivory-30);line-height:1.7}

/* Success / result panel */
.bdone{text-align:center;padding:clamp(2rem,1.5rem + 2vw,3.5rem) 0}
.bdone__ico{width:76px;height:76px;margin:0 auto 2rem;border-radius:50%;display:grid;place-items:center;
            border:1px solid var(--gold-30);background:var(--gold-08)}
.bdone__ico svg{width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.3}
.bref{display:inline-flex;align-items:center;gap:.75rem;margin-top:1.75rem;padding:.85rem 1.4rem;
      border:1px dashed var(--gold-30);border-radius:var(--radius);
      font-family:var(--ff-mono);font-size:var(--fs-sm);color:var(--gold-pale);letter-spacing:.1em}


/* ==========================================================================
   SCROLL-DRIVEN MOTION
   Native CSS scroll timelines. These run off the main thread, need no
   JavaScript and no library, and simply do not apply in browsers without
   support, where the site behaves exactly as it did before.

   This is what separates a page that animates once from a page that feels
   alive: the photography drifts against its frame as it passes, so the site
   has depth instead of sliding past as one flat plane.
   ========================================================================== */

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    /* The image is taller than its frame and travels from top-flush to
       bottom-flush across the time it is on screen. */
    /* Absolutely positioned on purpose. In normal flow a percentage height
       resolves against a parent whose own height the image then influences,
       so `116%` silently collapsed back to 100% and the upward drift exposed
       the frame beneath. Out of flow, the percentage resolves against the
       frame's definite height and the image is genuinely taller than its box. */
    .fig img,
    .space__media img,
    .phero__media img,
    .ctaband__media img{
      position:absolute;inset:0 0 auto 0;
      height:116%;
      /* Rest at the MIDDLE of the travel. If the animation is ever not running
         the frame still shows the centre of the photograph rather than a crop
         pinned to its top edge. The animation overrides this when it ticks. */
      translate:0 -6.9%;
      animation:ez-parallax linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    /* Gallery tiles are small and densely packed, so they get a shorter throw
       or the grid starts to shimmer. */
    .gitem img{
      position:absolute;inset:0 0 auto 0;
      height:109%;
      translate:0 -4.1%;
      animation:ez-parallax-sm linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes ez-parallax    { from{translate:0 0} to{translate:0 -13.8%} }
    @keyframes ez-parallax-sm { from{translate:0 0} to{translate:0 -8.2%}  }
  }
}

@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){

  }
}

/* Scroll progress: a single gold hairline across the very top of the page.
   Hidden entirely where scroll timelines are unsupported, so it can never
   sit there as a permanently full bar. */
.progress{display:none}
@supports (animation-timeline:scroll()){
  .progress{
    display:block;position:fixed;inset:0 0 auto 0;height:2px;
    z-index:calc(var(--z-nav) + 1);pointer-events:none;
    background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-bright));
    transform-origin:0 50%;
    animation:ez-progress linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes ez-progress{ from{scale:0 1} to{scale:1 1} }
}