/* ══════════════════════════════════════════════════════════
   BAIRILLE & EMBER — coming soon
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:#0C0A08;
  --ink-2:#14110D;
  --ink-3:#1B1712;
  --paper:#EFE8DA;
  --paper-dim:#CFC6B4;
  --muted:#968E82;
  --faint:#857D71; /* raised from #635C52 to clear WCAG AA (4.6:1+) on both surfaces */
  --gold:#C6A15B;
  --gold-lit:#E0B463;
  --bronze:#7A5A22;
  --rule:rgba(198,161,91,.22);

  --d:"Cormorant Garamond",Cormorant,Georgia,serif;
  --b:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;

  --pad:clamp(1.25rem,5vw,5.5rem);
  --sec:clamp(4rem,8vw,7.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--b);font-weight:300;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit}
::selection{background:var(--bronze);color:var(--paper)}

.sr-only,.sr-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

:where(a,button,input):focus-visible{
  outline:1px solid var(--gold-lit);outline-offset:3px;border-radius:2px;
}

/* ── shared type ───────────────────────────────────────── */
.eyebrow{
  margin:0;font-size:clamp(.76rem,1.05vw,.82rem);font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
}
.h2{
  margin:.55em 0 0;font-family:var(--d);font-weight:300;
  font-size:clamp(1.9rem,4.6vw,3.35rem);line-height:1.1;
  letter-spacing:.005em;color:var(--paper);
}
.lede{
  margin:1.35rem 0 0;max-width:46ch;color:var(--paper-dim);
  font-size:clamp(.95rem,1.35vw,1.06rem);line-height:1.75;
}
.amp{font-family:var(--d);font-style:italic;color:var(--gold);font-weight:400}

.mark{display:inline-block;width:34px;color:var(--gold)}
.mark svg{width:100%;height:auto;display:block}
.mark--sm{width:24px}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 1.75rem;border:0;cursor:pointer;text-decoration:none;
  font-size:.775rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn--solid{background:var(--gold);color:#120E08}
.btn--solid:hover{background:var(--gold-lit)}
.btn--ghost{
  background:transparent;color:var(--muted);
  border:1px solid rgba(198,161,91,.28);
}
.btn--ghost:hover{color:var(--paper);border-color:var(--gold)}

/* ══════════ AGE GATE ══════════ */
.gate{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:var(--pad);background:#080706;
  transition:opacity .7s ease,visibility .7s ease;
}
.gate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 44%,rgba(198,161,91,.085),transparent 72%);
}
.gate.is-out{opacity:0;visibility:hidden}
.gate__inner{position:relative;z-index:1;max-width:33rem;text-align:center}
.gate__eyebrow{
  margin:1.5rem 0 0;font-size:.78rem;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold)
}
.gate__h{
  margin:.9rem 0 0;font-family:var(--d);font-weight:300;
  font-size:clamp(1.75rem,5.2vw,2.6rem);line-height:1.15;color:var(--paper)
}
.gate__body{margin:.85rem 0 0;color:var(--paper-dim);font-size:1rem}
.gate__acts{
  margin:2.3rem 0 0;display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap
}
.gate__fine{
  margin:1.9rem 0 0;font-size:.79rem;line-height:1.7;color:var(--faint);
  max-width:30rem;margin-inline:auto
}

/* ══════════ PAGE REVEAL ══════════ */
.page{opacity:0;transition:opacity .9s ease .1s}
.page.is-in{opacity:1}

/* ══════════ HERO ══════════ */
.hero{
  position:relative;padding:clamp(2.25rem,5vw,3.75rem) var(--pad) clamp(2.25rem,4vw,3.25rem);
  display:flex;flex-direction:column;align-items:center;min-height:100svh;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 60% at 50% 48%,rgba(198,161,91,.07),transparent 70%);
}
.hero__head{position:relative;text-align:center;max-width:56rem}
.wordmark{
  margin:.75rem 0 0;font-family:var(--d);font-weight:300;
  font-size:clamp(2.55rem,7.4vw,5.5rem);line-height:1.04;letter-spacing:.055em;
  text-transform:uppercase;color:var(--paper);
}
.wordmark .amp{
  text-transform:none;letter-spacing:0;font-size:.82em;
  padding:0 .06em;vertical-align:baseline;
}
.tagline{
  margin:1.15rem 0 0;font-family:var(--d);font-weight:300;font-style:italic;
  font-size:clamp(1rem,2.15vw,1.45rem);line-height:1.45;color:var(--gold);
  letter-spacing:.012em;
}

/* ── the stage: cigar + clock ── */
.stage{ /* full-bleed cinematic band — the cigar spans the viewport */
  position:relative;align-self:stretch;width:auto;max-width:none;
  margin:clamp(1rem,2.4vw,1.9rem) calc(-1 * var(--pad)) 0;
  container-type:inline-size;
}
.stage__img{
  width:100%;height:auto;
  /* feather the band into the page so there is no hard photo edge */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 88%,transparent 100%);
}
.stage::after{ /* soft scrim so gold numerals hold contrast on the leaf */
  content:"";position:absolute;left:33%;right:6%;top:10%;bottom:20%;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(50% 62% at 50% 50%,rgba(6,4,3,.52),rgba(6,4,3,.24) 60%,transparent 78%);
}

.ember{
  position:absolute;left:88%;top:51.6%;width:11cqw;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,138,40,.42),rgba(255,96,20,.16) 42%,transparent 70%);
  animation:glow 4.2s ease-in-out infinite;
}
.ember.is-tick{animation:flare .85s ease-out}
@keyframes glow{0%,100%{opacity:.68}50%{opacity:1}}
@keyframes flare{0%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}}

.bandmark{
  position:absolute;left:27.8%;top:41.7%;
  transform:translate(-50%,-50%) rotate(2.3deg);
  font-family:var(--d);font-weight:400;color:var(--gold-lit);
  font-size:2cqw;letter-spacing:.24em;line-height:1;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none;
}
.bandmark i{font-style:italic;letter-spacing:.06em}

.clock{position:absolute;inset:0;pointer-events:none}
.unit{
  position:absolute;left:var(--ux);top:var(--uy);
  transform:translate(-50%,-50%) rotate(2.3deg);
  font-size:4.4cqw;line-height:1;
}
.unit__n{
  display:block;font-family:var(--d);font-weight:300;font-size:1em;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  color:#F6EEDC;
  text-shadow:
    0 .02em .05em rgba(0,0,0,.95),
    0 0 .3em rgba(0,0,0,.7),
    0 0 .55em rgba(224,180,99,.42);
}
.unit__b{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  font-size:.2em;margin-top:.8em;
  display:flex;flex-direction:column;align-items:center;gap:.85em;
}
.unit__tick{width:1px;height:4em;background:linear-gradient(to bottom,rgba(198,161,91,.06),rgba(198,161,91,.72))}
.unit__l{
  font-family:var(--b);font-style:normal;font-weight:500;font-size:1em;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);white-space:nowrap;
}

.hero__foot{
  position:relative;margin-top:auto;padding-top:clamp(1.75rem,4vw,3rem);
  display:flex;flex-direction:column;align-items:center;gap:clamp(1.5rem,3.5vw,2.5rem);
}
.opens{
  margin:0;text-align:center;font-size:clamp(.72rem,1.25vw,.82rem);
  font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-dim);
}
.opens span{color:var(--gold);margin-right:.5em}
.opens b{font-weight:inherit;letter-spacing:inherit}
.opens i{font-style:normal;color:var(--faint);padding:0 .35em}
.opens abbr{text-decoration:none;border:0}
.cue{
  display:inline-flex;align-items:center;gap:.85rem;text-decoration:none;
  font-size:.75rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);transition:color .35s ease;
}
.cue:hover{color:var(--gold-lit)}
.cue svg{width:9px;height:16px;animation:drift 2.8s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(-2px);opacity:.55}50%{transform:translateY(3px);opacity:1}}

/* ══════════ INVITATION ══════════ */
.invite{
  padding:var(--sec) var(--pad);border-top:1px solid rgba(198,161,91,.1);
  background:linear-gradient(to bottom,#0A0806,var(--ink-2));
}
.invite__wrap{max-width:38rem;margin:0 auto;text-align:center}
.invite .lede{margin-inline:auto}
.form{margin:2.6rem 0 0}
.field{
  display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap;justify-content:center;
}
.field input{
  flex:1 1 17rem;min-width:0;padding:1rem 1.15rem;
  background:rgba(255,252,245,.035);color:var(--paper);
  border:1px solid rgba(198,161,91,.26);border-radius:0;
  font-size:.925rem;letter-spacing:.01em;
  transition:border-color .35s ease,background .35s ease;
}
.field input::placeholder{color:var(--faint)}
.field input:hover{border-color:rgba(198,161,91,.45)}
.field input:focus{outline:0;border-color:var(--gold);background:rgba(255,252,245,.06)}
.field input[aria-invalid="true"]{border-color:#B4574F}
.form__note{
  margin:1.15rem 0 0;font-size:.79rem;letter-spacing:.055em;color:var(--faint);
  transition:color .3s ease;
}
.form__note.is-bad{color:#D08A82}
.form__note.is-good{color:var(--gold-lit)}

/* ══════════ THREE ROOMS ══════════ */
.rooms{padding:var(--sec) var(--pad);background:var(--ink-2)}
.rooms__head{text-align:center;max-width:40rem;margin:0 auto}
.rooms__grid{
  margin:clamp(2.75rem,6vw,4.5rem) auto 0;max-width:1180px;
  display:grid;gap:clamp(1.75rem,3.5vw,2.75rem);
  grid-template-columns:repeat(3,1fr);
}
.room__img{overflow:hidden;background:#0A0806;aspect-ratio:4/3}
.room__img img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter 1.1s ease;
  filter:saturate(.94)
}
.room:hover .room__img img{transform:scale(1.07);filter:saturate(1.06)}
.room__h{
  margin:1.5rem 0 0;font-family:var(--d);font-weight:400;
  font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:.075em;
  text-transform:uppercase;color:var(--gold-lit);line-height:1.2;
}
.room__p{
  margin:.7rem 0 0;font-size:.925rem;line-height:1.75;color:var(--paper-dim);
  max-width:32ch;
}

/* ══════════ EMBER BREAK ══════════ */
.break{position:relative;background:#070605;overflow:hidden}
.break__img{
  width:100%;height:clamp(22rem,52vw,38rem);object-fit:cover;
  object-position:58% 42%;opacity:.82
}
.break::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(7,6,5,.95) 0%,rgba(7,6,5,.72) 42%,rgba(7,6,5,.2) 74%,transparent 100%);
}
.break__q{
  position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);
  z-index:1;margin:0;max-width:26rem;
}
.break__q p{
  margin:0;font-family:var(--d);font-weight:300;
  font-size:clamp(1.65rem,4.4vw,3rem);line-height:1.18;color:var(--paper);
}
.break__q span{color:var(--gold);font-style:italic}

/* ══════════ WHISPER ══════════ */
.whisper{
  padding:clamp(3.75rem,7vw,6rem) var(--pad);text-align:center;
  background:var(--ink);border-top:1px solid rgba(198,161,91,.08);
}
.whisper__t{
  margin:0;font-family:var(--d);font-weight:300;
  font-size:clamp(.85rem,2.1vw,1.2rem);letter-spacing:.52em;
  text-transform:uppercase;color:#8A7C63; /* 4.6:1 on --ink — a whisper that still passes AA */
}

/* ══════════ FOOTER ══════════ */
.foot{
  padding:clamp(3rem,6vw,4.5rem) var(--pad) clamp(2.5rem,5vw,3.5rem);
  background:#080706;border-top:1px solid rgba(198,161,91,.1);
}
.foot__wrap{max-width:40rem;margin:0 auto;text-align:center}
.foot__brand{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.foot__wm{
  margin:0;font-family:var(--d);font-weight:300;font-size:1.05rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--paper-dim);
}
.foot__wm .amp{letter-spacing:0;font-size:.95em}
.foot__line{margin:1.5rem 0 0;font-size:.8rem;letter-spacing:.14em;color:var(--muted)}
.foot__line a{text-decoration:none;border-bottom:1px solid rgba(198,161,91,.3);padding-bottom:1px;transition:color .3s ease,border-color .3s ease}
.foot__line a:hover{color:var(--gold-lit);border-color:var(--gold-lit)}
.foot__line + .foot__line{margin-top:.5rem}
.foot__fine{margin:2rem 0 0;font-size:.75rem;line-height:1.8;color:var(--faint)}

/* ══════════ REVEAL ══════════ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.room.reveal:nth-child(2){transition-delay:.12s}
.room.reveal:nth-child(3){transition-delay:.24s}

/* ══════════════════════════════════════════════════════════
   MOBILE / TABLET — vertical cigar, clock runs down it
   ══════════════════════════════════════════════════════════ */
/* short desktop viewports: keep the whole hero above the fold */
@media (min-width:861px) and (max-height:880px){
  .hero{padding-top:1.75rem;padding-bottom:1.75rem}
  .wordmark{font-size:clamp(2.4rem,5.6vw,4.5rem)}
  .tagline{margin-top:.8rem;font-size:clamp(.95rem,1.7vw,1.2rem)}
  .stage{margin-top:1rem}
  .hero__foot{margin-top:1.4rem}
}

@media (max-width:860px){
  .hero{padding-bottom:clamp(1.1rem,4vw,2.25rem)}
  /* tighten the tracking so the locality line holds one line on a phone
     instead of orphaning the year — size stays above the 12px floor */
  .eyebrow{font-size:.76rem;letter-spacing:.155em;white-space:nowrap}
  .stage{margin-top:clamp(.4rem,2.4vw,1.2rem)}
  .stage__img{
    /* vertical plate: keep the ember crisp at the top, dissolve the stick at the foot */
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 89%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0,#000 89%,transparent 100%);
  }
  .stage::after{left:21%;right:21%;top:12%;bottom:22%}

  /* break the opening line on its own terms instead of mid-date */
  .opens{display:flex;flex-direction:column;align-items:center;gap:.4em;line-height:1.5}
  .opens span{margin-right:0}

  .ember{left:49%;top:8.5%;width:32cqw}
  .bandmark{left:51.5%;top:80.5%;transform:translate(-50%,-50%) rotate(0deg);font-size:3.4cqw}

  .unit{font-size:12.2cqw;transform:translate(-50%,-50%)}
  .unit:nth-child(1){left:48.4%;top:21.6%}
  .unit:nth-child(2){left:49.2%;top:36.9%}
  .unit:nth-child(3){left:50%;  top:52.3%}
  .unit:nth-child(4){left:50.6%;top:67.6%}

  .unit__b{
    left:100%;top:50%;transform:translateY(-50%);

    margin:0 0 0 .55em;font-size:.185em;
    flex-direction:row;align-items:center;gap:.75em;
  }
  .unit__tick{width:2.4em;height:1px;background:linear-gradient(to right,rgba(198,161,91,.72),rgba(198,161,91,.3))}
  .unit__l{letter-spacing:.24em}

  .rooms__grid{grid-template-columns:1fr;max-width:32rem;gap:clamp(2.25rem,7vw,3rem)}
  .room__p{max-width:none}
  .room.reveal:nth-child(n){transition-delay:0s}

  .break__img{height:clamp(24rem,86vw,32rem);object-position:62% 42%}
  .break::after{background:linear-gradient(to bottom,rgba(7,6,5,.5) 0%,rgba(7,6,5,.78) 45%,rgba(7,6,5,.96) 100%)}
  .break__q{
    left:var(--pad);right:var(--pad);top:auto;bottom:clamp(2rem,7vw,3.5rem);
    transform:none;max-width:none
  }
  .field{flex-direction:column}
  .field input,.field .btn{width:100%}
  .gate__acts .btn{flex:1 1 13rem}
}

@media (max-width:420px){
  .unit{font-size:11.4cqw}
  .unit__b{font-size:.2em;margin-left:.45em}
  .unit__l{letter-spacing:.16em}
}

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* ── tablet (601–860px): vertical cigar, but never taller than the fold ── */
@media (min-width:601px) and (max-width:860px){
  .stage{align-self:center;width:min(100%,42svh);margin-inline:auto}
}

/* ── short phones: tighten the head so the clock and CTA stay above the fold ── */
@media (max-width:860px) and (max-height:700px){
  .hero{padding-top:1.1rem;padding-bottom:1.25rem}
  .wordmark{font-size:2.05rem}
  .eyebrow{font-size:.75rem;letter-spacing:.115em}
  .tagline{margin-top:.55rem;font-size:.92rem}
  .stage{align-self:center;width:min(100%,40svh);margin-inline:auto;margin-top:.4rem}
  .hero__foot{margin-top:1rem}
}