/* =============================================================
   Campaign landing page: celebrations + waitlist
   (template-lp-celebration.php, template-lp-waitlist.php)

   Serves /stay/micro-weddings/, /stay/elopements/, /stay/girls-weekends/,
   /stay/reunions/ and /stay/mainstreet/.

   Same lineage as lp-prop.css and lp-fall.css: a copy of the approved
   Silver Lake Haus stylesheet with the namespace moved .fa -> .ce and
   --fa-* -> --ce-*. Nothing above the ENQUIRY FORM block has been changed,
   so a fix to the shared design lands here by the same copy.

   Both templates render inside .ce, which is why one stylesheet covers
   five pages. The additions at the bottom are the enquiry form (these
   pages ask for a note rather than a booking) and the small waitlist
   status list. */

.ce{
  /* brand, from theme.json */
  --ce-rust:#D38F4C;
  --ce-rust-dark:#B87334;
  --ce-tan:#E1B07F;
  --ce-tan-soft:#EAC9A6;
  --ce-cream:#F7F0E6;
  --ce-cream-deep:#EFE5D6;
  --ce-charcoal:#2B2723;
  --ce-ink:#17140F;
  --ce-white:#fff;

  /* drawn from the lake itself and the blue-and-white rooms */
  --ce-slate:#3E5C6B;
  --ce-slate-deep:#24343D;
  --ce-slate-pale:#B9CBD3;

  --ce-f-display:"Cormorant Garamond",Georgia,serif;
  --ce-f-sans:"Rosario",system-ui,-apple-system,sans-serif;
  --ce-f-script:"Maleah",Georgia,serif;

  --ce-wrap:1240px;
  --ce-pad:clamp(20px,5vw,64px);
  --ce-rail:clamp(78px,11vw,148px);
}

.ce *,.ce *::before,.ce *::after{box-sizing:border-box}
/* Only loaded on the landing pages, so this is page-local by construction.
   scroll-padding-top keeps #day / #stays anchors clear of the sticky offer bar. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.ce{
  margin:0;
  background:var(--ce-cream);
  color:var(--ce-ink);
  font-family:var(--ce-f-display);
  font-size:clamp(1.05rem,.42vw + .96rem,1.24rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.ce img{max-width:100%;display:block}
.ce a{color:inherit}

.ce .wrap{max-width:var(--ce-wrap);margin-inline:auto;padding-inline:var(--ce-pad)}

/* ---------- utility type ---------- */
.ce .eyebrow{
  font-family:var(--ce-f-sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ce-rust);
  margin:0 0 1.1em;
}
.ce .eyebrow--pale{color:var(--ce-tan)}

/* main.css sets an explicit colour and family on h1-h4 globally, which beats
   inheritance from the section. Restate both here so dark sections work. */
.ce h1,.ce h2,.ce h3,.ce h4{
  color:inherit;font-family:var(--ce-f-display);
  font-weight:400;line-height:1.04;margin:0;letter-spacing:-.015em;
}
.ce h1{font-size:clamp(2.9rem,7.6vw,6rem)}
.ce h2{font-size:clamp(2.1rem,4.6vw,3.5rem)}
.ce h3{font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.18}

.ce .lede{font-size:clamp(1.16rem,.7vw + 1rem,1.5rem);line-height:1.5}

/* ---------- buttons ---------- */
.ce .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--ce-f-sans);font-size:.83rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  padding:1.02em 2em;border:1px solid transparent;border-radius:2px;
  background:var(--ce-rust);color:#fff;
  transition:background .18s ease,transform .18s ease,color .18s ease,border-color .18s ease;
}
.ce .btn:hover{background:var(--ce-rust-dark)}
.ce .btn:active{transform:translateY(1px)}
/* The primary booking action. Bigger than a nav button on purpose: this is
   the one thing the page is asking anyone to do. */
.ce .btn--big{font-size:.92rem;padding:1.18em 2.6em;letter-spacing:.16em}
.ce .btn--ghost{background:transparent;color:var(--ce-ink);border-color:rgba(23,20,15,.28)}
.ce .btn--ghost:hover{background:rgba(23,20,15,.06);border-color:rgba(23,20,15,.5)}
.ce .btn--onink{background:transparent;color:var(--ce-cream);border-color:rgba(247,240,230,.4)}
.ce .btn--onink:hover{background:rgba(247,240,230,.12);border-color:var(--ce-cream)}

.ce :where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ce-rust);outline-offset:3px;border-radius:2px;
}

/* alt booking route — visible, quiet */
.ce .alt-book{
  font-family:var(--ce-f-sans);font-size:.86rem;letter-spacing:.02em;
  margin:1.05em 0 0;opacity:.82;
}
/* main.css strips underlines from every link site-wide. Inside running prose
   that removes the only affordance a text link has, so put it back. Buttons
   and the section nav opt out below. */
.ce .alt-book a,
.ce .beat__body p a,
.ce .faq a,
.ce .aside a{
  text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;
}
.ce .btn{text-decoration:none}

/* ============================================================
   OFFER BAR
   ============================================================ */
.ce .offerbar{
  position:sticky;top:0;z-index:60;
  background:var(--ce-ink);color:var(--ce-cream);
  border-bottom:1px solid rgba(225,176,127,.22);
}
.ce .offerbar__in{
  max-width:var(--ce-wrap);margin-inline:auto;padding:.72rem var(--ce-pad);
  display:flex;align-items:center;justify-content:center;gap:.65rem 1.4rem;flex-wrap:wrap;
  font-family:var(--ce-f-sans);font-size:.83rem;letter-spacing:.03em;text-align:center;
}
.ce .offerbar strong{font-weight:600;color:var(--ce-tan)}
/* promo code chip, in the offer bar and the CTA strips */
.ce .code{
  font-weight:600;letter-spacing:.2em;
  border:1px dashed rgba(225,176,127,.55);
  padding:.24em .7em;border-radius:2px;white-space:nowrap;
}
.ce .offerbar .btn{padding:.66em 1.35em;font-size:.72rem}
@media (max-width:640px){
  .ce .offerbar__in{font-size:.76rem;gap:.5rem .8rem;padding:.6rem 16px}
  .ce .offerbar .btn{padding:.6em 1.1em;font-size:.66rem}
}

/* ============================================================
   HERO
   ============================================================ */
.ce .hero{position:relative;isolation:isolate;background:var(--ce-ink);color:var(--ce-cream)}
.ce .hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;z-index:-2;
}
.ce .hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    /* left-hand scrim so the headline block stays readable over bright water */
    linear-gradient(to right,rgba(23,20,15,.62) 0%,rgba(23,20,15,.34) 38%,rgba(23,20,15,0) 68%),
    linear-gradient(to bottom,rgba(23,20,15,.5) 0%,rgba(23,20,15,.08) 26%,rgba(23,20,15,.12) 42%,rgba(23,20,15,.84) 88%,rgba(23,20,15,.96) 100%);
}
.ce .hero__in{
  max-width:var(--ce-wrap);margin-inline:auto;padding:clamp(4.5rem,16vh,9rem) var(--ce-pad) clamp(2rem,5vw,3rem);
  min-height:clamp(620px,92svh,940px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.ce .hero__place{
  font-family:var(--ce-f-sans);font-size:.7rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ce-tan-soft);
  margin:0 0 1.15em;text-shadow:0 1px 14px rgba(0,0,0,.75);
}
.ce .hero h1{max-width:14ch;text-shadow:0 2px 34px rgba(0,0,0,.42)}
.ce .hero .lede{max-width:44ch;margin:1.1rem 0 0;color:rgba(247,240,230,.94);text-shadow:0 1px 20px rgba(0,0,0,.5)}
.ce .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:2rem}
.ce .hero .alt-book{width:100%;margin-top:.2rem;color:rgba(247,240,230,.8)}

/* narrow screens have no room for a side scrim, so darken the whole frame */
@media (max-width:760px){
  .ce .hero::after{
    background:linear-gradient(to bottom,
      rgba(23,20,15,.58) 0%,rgba(23,20,15,.4) 26%,rgba(23,20,15,.58) 52%,
      rgba(23,20,15,.88) 86%,rgba(23,20,15,.97) 100%);
  }
}

/* fact strip riding the bottom of the hero */
.ce .facts{
  list-style:none;padding:1.15rem 0 0;
  border-top:1px solid rgba(225,176,127,.28);
  margin:clamp(2.4rem,6vw,3.6rem) 0 0;
  display:flex;flex-wrap:wrap;gap:.5rem 2.6rem;
  font-family:var(--ce-f-sans);font-size:.79rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ce-tan-soft);
}

/* ============================================================
   BOOKING PROMPTS
   Repeated at each stopping point so the action is always within reach.
   ============================================================ */
.ce .ctastrip{
  background:var(--ce-tan-soft);
  border-block:1px solid rgba(23,20,15,.14);
  padding:clamp(2.2rem,5vw,3.2rem) 0;
}
.ce .ctastrip__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.4rem 2.6rem;
}
.ce .ctastrip__line{
  margin:0;max-width:26ch;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.25;
}
.ce .ctastrip__act{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.ce .ctastrip__code{
  margin:0;font-family:var(--ce-f-sans);font-size:.78rem;
  letter-spacing:.04em;opacity:.8;
}
.ce .ctastrip__code .code{
  border-color:rgba(23,20,15,.4);font-size:.78rem;
}

/* section-internal prompt, on the dark house panel */
.ce .inlinecta{margin:clamp(2.6rem,5vw,3.4rem) 0 0}

@media (max-width:720px){
  .ce .ctastrip__in{flex-direction:column;align-items:flex-start}
  .ce .ctastrip__act{width:100%}
  .ce .ctastrip__act .btn{width:100%}
  .ce .inlinecta .btn{width:100%}
}

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.ce .section{padding:clamp(4.5rem,11vw,8rem) 0}
.ce .section--cream{background:var(--ce-cream)}
.ce .section--deep{background:var(--ce-cream-deep)}
.ce .section--ink{background:var(--ce-ink);color:var(--ce-cream)}
.ce .section--ink .eyebrow{color:var(--ce-tan)}
.ce .section--slate{background:var(--ce-slate-deep);color:var(--ce-cream)}
.ce .section--slate .eyebrow{color:var(--ce-slate-pale)}

/* measure each element against its OWN font size, not the parent's */
.ce .sechead{margin-bottom:clamp(2.4rem,5vw,3.4rem)}
.ce .sechead h2{max-width:22ch}
.ce .sechead p{margin:.9rem 0 0;opacity:.82;max-width:52ch}
.ce .day__head h2{max-width:30ch}


/* ============================================================
   THE DAY — time rail (the signature)
   ============================================================ */
.ce .day{background:var(--ce-cream);position:relative}
/* Line the section head up with the beat copy rather than the page gutter, so
   the whole day reads as one column hanging off the time rail. */
.ce .day__head{
  padding:clamp(4rem,8vw,6rem) var(--ce-pad) clamp(2rem,4vw,3rem)
          calc(var(--ce-pad) + var(--ce-rail) + clamp(1.4rem,2.4vw,2.6rem));
}
@media (max-width:720px){
  .ce .day__head{padding-left:calc(var(--ce-pad) + 1.9rem)}
}

.ce .beats{position:relative;max-width:var(--ce-wrap);margin-inline:auto;padding-inline:var(--ce-pad)}
/* the rail: dawn tan at the top, lake slate by afternoon, near-black by night */
.ce .beats::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--ce-pad) + var(--ce-rail));width:1px;
  background:linear-gradient(to bottom,
    var(--ce-tan) 0%, var(--ce-rust) 22%, var(--ce-slate) 58%, var(--ce-slate-deep) 82%, var(--ce-ink) 100%);
  opacity:.55;
}

.ce .beat{position:relative;padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(2.2rem,5vw,3.6rem) calc(var(--ce-rail) + clamp(1.4rem,2.4vw,2.6rem))}
.ce .beat__time{
  position:absolute;left:0;top:clamp(2.2rem,5vw,3.6rem);
  width:var(--ce-rail);padding-right:1.4rem;text-align:right;
  font-family:var(--ce-f-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ce-charcoal);
}
.ce .beat__time span{display:block;font-weight:400;opacity:.55;letter-spacing:.1em;margin-top:.25em}
.ce .beat__dot{
  position:absolute;left:calc(var(--ce-rail) - 4px);top:calc(clamp(2.2rem,5vw,3.6rem) + .38em);
  width:9px;height:9px;border-radius:50%;
  background:var(--ce-cream);border:1px solid var(--ce-rust);
}
.ce .beat__body{max-width:56ch}
.ce .beat__body p{margin:.85rem 0 0}
.ce .beat__body p:first-of-type{margin-top:1rem}
.ce .beat figure{margin:2rem 0 0}
.ce .beat figure img{width:100%;height:auto;border-radius:2px}
.ce .beat figcaption{
  font-family:var(--ce-f-sans);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;opacity:.55;margin-top:.75rem;
}
.ce .beat--wide .beat__body{max-width:none}
.ce .beat--wide figure{max-width:none}

/* honest aside — the things a good host says out loud */
.ce .aside{
  margin:1.6rem 0 0;padding:.9rem 0 .9rem 1.2rem;
  border-left:2px solid var(--ce-tan);
  font-size:.96em;font-style:italic;opacity:.85;
}
.ce .aside p{margin:0}

/* the afternoon block deliberately has no photograph: everything in it
   is off-property, and we are not going to fake a picture of it */
/* the list is table-shaped, so it earns more width than the prose column.
   The beat body has to release its measure for the list to use it. */
.ce .beat--table .beat__body{max-width:none}
.ce .beat--table .beat__body p{max-width:56ch}
.ce .nearby{list-style:none;margin:1.9rem 0 0;padding:0;max-width:64rem;
  display:grid;gap:0;border-top:1px solid rgba(23,20,15,.14)}
.ce .nearby li{
  display:grid;grid-template-columns:minmax(0,13rem) 1fr;gap:.3rem 2rem;
  padding:1.05rem 0;border-bottom:1px solid rgba(23,20,15,.14);
}
.ce .nearby dt,.ce .nearby b{
  font-family:var(--ce-f-sans);font-weight:600;font-size:.82rem;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.5;
}
.ce .nearby span{font-size:.98em;opacity:.86}
@media (max-width:620px){.ce .nearby li{grid-template-columns:1fr;gap:.2rem}}

@media (max-width:720px){
  .ce .beats::before{left:5px}
  .ce .beat{padding-left:1.9rem}
  .ce .beat__time{position:static;width:auto;text-align:left;padding:0 0 .2rem;display:flex;gap:.7rem;align-items:baseline}
  .ce .beat__time span{margin:0}
  .ce .beat__dot{left:1px;top:calc(clamp(2.2rem,5vw,3.6rem) + .55em)}
}

/* ============================================================
   THE HOUSE — gallery
   ============================================================ */
.ce .specs{
  list-style:none;margin:0 0 clamp(2.6rem,5vw,3.6rem);padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:rgba(247,240,230,.18);border:1px solid rgba(247,240,230,.18);
}
.ce .specs li{background:var(--ce-ink);padding:1.5rem 1.4rem}
.ce .specs b{
  display:block;font-family:var(--ce-f-sans);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ce-tan);margin-bottom:.5rem;
}
.ce .specs span{font-size:1.02rem;line-height:1.45;opacity:.93}

.ce .gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,14px)}
.ce .gallery button{
  padding:0;border:0;background:none;cursor:zoom-in;display:block;
  overflow:hidden;border-radius:2px;
}
.ce .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ce .gallery button:hover img{transform:scale(1.035)}
.ce .g-a{grid-column:span 7;aspect-ratio:3/2}
.ce .g-b{grid-column:span 5;aspect-ratio:3/2}
.ce .g-c{grid-column:span 4;aspect-ratio:1/1}
.ce .g-d{grid-column:span 4;aspect-ratio:1/1}
.ce .g-e{grid-column:span 4;aspect-ratio:1/1}
.ce .g-f{grid-column:span 5;aspect-ratio:3/2}
.ce .g-g{grid-column:span 7;aspect-ratio:3/2}
@media (max-width:760px){
  .ce .g-a,.ce .g-b,.ce .g-f,.ce .g-g{grid-column:span 12;aspect-ratio:3/2}
  .ce .g-c,.ce .g-d,.ce .g-e{grid-column:span 4;aspect-ratio:1/1}
}

/* lightbox */
.ce .lb{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:clamp(14px,4vw,48px);
  background:rgba(15,13,10,.94);
}
.ce .lb[open],.ce .lb.is-open{display:flex}
.ce .lb img{max-width:100%;max-height:88svh;width:auto;height:auto;border-radius:2px}
.ce .lb__close{
  position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  background:none;border:1px solid rgba(247,240,230,.35);color:var(--ce-cream);
  font-family:var(--ce-f-sans);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.6em 1.1em;cursor:pointer;border-radius:2px;
}
.ce .lb__close:hover{background:rgba(247,240,230,.12)}

/* ============================================================
   ENHANCEMENTS
   ============================================================ */
.ce .enh{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:0 clamp(2rem,4vw,3.4rem)}
.ce .enh li{padding:1.5rem 0;border-bottom:1px solid rgba(23,20,15,.15)}
.ce .enh h3{font-size:1.3rem;margin-bottom:.35rem}
.ce .enh p{margin:0;font-size:.99rem;opacity:.82;line-height:1.5}
.ce .enh .price{
  display:block;margin-top:.6rem;font-family:var(--ce-f-sans);
  font-size:.78rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ce-rust-dark);
}

/* ============================================================
   REVIEWS
   ============================================================ */
.ce .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(2rem,4vw,3.2rem)}
.ce .review p{
  margin:0;font-size:clamp(1.1rem,1.4vw,1.28rem);line-height:1.52;
  font-style:italic;
}
.ce .review cite{
  display:block;margin-top:1.1rem;font-style:normal;
  font-family:var(--ce-f-sans);font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ce-tan);
}
.ce .review::before{
  content:"";display:block;width:34px;height:1px;
  background:var(--ce-rust);margin-bottom:1.5rem;
}

/* ============================================================
   CLOSING OFFER
   ============================================================ */
.ce .close{text-align:center}
.ce .close h2{max-width:18ch;margin-inline:auto}
.ce .close .lede{max-width:46ch;margin:1.4rem auto 0;opacity:.9}
.ce .close__code{
  display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;
  margin:2.4rem 0 2rem;padding:1.5rem 2.6rem;
  border:1px dashed rgba(225,176,127,.5);border-radius:2px;
}
.ce .close__code b{
  font-family:var(--ce-f-sans);font-size:clamp(1.5rem,3.2vw,2.1rem);
  font-weight:600;letter-spacing:.24em;color:var(--ce-tan);line-height:1;
}
.ce .close__code small{
  font-family:var(--ce-f-sans);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;opacity:.72;
}
.ce .close .alt-book{color:rgba(247,240,230,.78)}

/* ============================================================
   FAQ
   ============================================================ */
.ce .faq{max-width:74ch}
.ce .faq details{border-bottom:1px solid rgba(23,20,15,.15)}
.ce .faq summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.4rem 1.25rem 0;position:relative;
  font-size:1.14rem;
}
.ce .faq summary::-webkit-details-marker{display:none}
.ce .faq summary::after{
  content:"";position:absolute;right:.5rem;top:1.75rem;
  width:9px;height:9px;border-right:1px solid var(--ce-rust);border-bottom:1px solid var(--ce-rust);
  transform:rotate(45deg);transition:transform .2s ease;
}
.ce .faq details[open] summary::after{transform:rotate(-135deg)}
.ce .faq details p{margin:0 0 1.5rem;max-width:62ch;opacity:.86;font-size:1.02rem}


/* ============================================================
   MOTION — one orchestrated reveal, nothing scattered
   ============================================================ */
/* Content is visible by default. The hidden state is only applied once JS
   confirms it can also un-hide it, so no-JS visitors and full-page capture
   tools never get a blank page. */
.js-anim .ce .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js-anim .ce .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .ce .reveal{opacity:1;transform:none;transition:none}
  .ce .gallery img{transition:none}
}


/* ============================================================
   PROPERTY CHOOSER
   The fall page sells the trip, then hands the visitor to whichever
   property fits the group. Each card links to that property's own
   campaign page, so the fall ad's traffic stays inside /stay/ and GA4
   can still see which property the fall audience self-selects into.
   ============================================================ */
.ce .props{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1.8rem;
  margin:3rem 0 0;
  padding:0;
  list-style:none;
}
.ce .prop{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--ce-white);
  border:1px solid rgba(23,20,15,.10);
  overflow:hidden;
}
.ce .prop img{aspect-ratio:3/2;object-fit:cover;width:100%}
.ce .prop__in{display:flex;flex-direction:column;gap:.7rem;padding:1.6rem 1.6rem 1.8rem;flex:1}
.ce .prop h3{margin:0;font-size:clamp(1.2rem,1.7vw,1.45rem)}
.ce .prop__for{
  margin:0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ce-rust-dark);
}
.ce .prop__specs{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:.3rem .85rem;
  font-size:.82rem;color:rgba(23,20,15,.55);
}
.ce .prop p{margin:0;font-size:.98rem;line-height:1.6}
.ce .prop .btn{margin-top:auto;align-self:flex-start}

/* Whole-card link target. The anchor covers the card so the whole thing
   is clickable, while the visible button keeps the affordance obvious. */
.ce .prop__link{position:absolute;inset:0;z-index:1}
.ce .prop__link span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* The button is a <span>, not a link: it must stay UNDER the card anchor or
   clicks land on a dead element. Hover state is driven from the card. */
.ce .prop:hover .btn,.ce .prop:focus-within .btn{background:var(--ce-ink);color:var(--ce-cream)}

@media (prefers-reduced-motion:no-preference){
  .ce .prop{transition:transform .3s ease,box-shadow .3s ease}
  .ce .prop:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(23,20,15,.14)}
}

/* ============================================================
   PEAK COLOR PANEL
   Two columns: what the park is doing through the season on one side,
   what to do about it on the other. No hard dates in the copy, per the
   fall campaign spec, so the timing language stays seasonal.
   ============================================================ */
.ce .peak{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:2rem 3rem;
  margin-top:2.6rem;
}
.ce .peak > div > h3{margin:0 0 .8rem}
.ce .peak ol{margin:0;padding-left:1.2rem;display:grid;gap:.9rem}
.ce .peak li{line-height:1.6}
.ce .peak li b{display:block}



/* ============================================================
   ENQUIRY FORM
   Celebration and waitlist traffic is not ready for a checkout. The
   ask on these pages is a note, so the form is the primary CTA and
   gets the weight a booking button gets on the property pages.

   Field chrome is defined here rather than inherited from main.css
   .dc-form, because that one is built for the cream contact page and
   goes invisible on .section--ink.
   ============================================================ */
.ce .lead{scroll-margin-top:6rem}
.ce .lead__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
@media (max-width:900px){.ce .lead__grid{grid-template-columns:1fr}}

.ce .lead__say p{margin:0 0 1rem;max-width:46ch}
.ce .lead__say ul{margin:1.4rem 0 0;padding:0;list-style:none;max-width:46ch}
.ce .lead__say li{
  font-family:var(--ce-f-sans);font-size:.95rem;line-height:1.5;
  padding:.7rem 0 .7rem 1.4rem;position:relative;
  border-top:1px solid rgba(247,240,230,.16);
}
.ce .lead__say li::before{
  content:"";position:absolute;left:0;top:1.35rem;
  width:6px;height:6px;background:var(--ce-rust);border-radius:50%;
}

.ce .dc-form{display:grid;gap:1rem}
.ce .dc-form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.ce .dc-form__row{grid-template-columns:1fr}}

.ce .dc-form label{
  display:block;margin:0 0 .35rem;
  font-family:var(--ce-f-sans);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ce-tan);
}
.ce .dc-form input,
.ce .dc-form select,
.ce .dc-form textarea{
  width:100%;padding:.78em .95em;
  border:1px solid rgba(247,240,230,.28);
  background:rgba(247,240,230,.06);color:var(--ce-cream);
  font-family:var(--ce-f-display);font-size:1.02rem;line-height:1.4;
  border-radius:0;appearance:none;
}
.ce .dc-form textarea{min-height:130px;resize:vertical}
.ce .dc-form select{
  /* Native arrow disappears against the dark field on Windows. */
  background-image:linear-gradient(45deg,transparent 50%,var(--ce-tan) 50%),linear-gradient(135deg,var(--ce-tan) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:2.6em;
}
.ce .dc-form input::placeholder,
.ce .dc-form textarea::placeholder{color:rgba(247,240,230,.45)}
.ce .dc-form input:focus,
.ce .dc-form select:focus,
.ce .dc-form textarea:focus{
  outline:2px solid var(--ce-rust);outline-offset:1px;
  background:rgba(247,240,230,.1);
}
.ce .dc-form button{justify-self:start;border:0;cursor:pointer}
.ce .dc-form__hp{display:none!important}
.ce .dc-form__fine{
  font-family:var(--ce-f-sans);font-size:.82rem;line-height:1.5;
  opacity:.7;margin:.2rem 0 0;max-width:52ch;
}

/* Post-submit confirmation, rendered in place of the form. */
.ce .lead__done{
  border:1px solid rgba(247,240,230,.28);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.ce .lead__done h3{margin:0 0 .6rem}
.ce .lead__done p{margin:0;max-width:48ch}
.ce .lead__err{
  font-family:var(--ce-f-sans);font-size:.9rem;font-weight:600;
  color:#F0B49A;margin:0 0 .4rem;
}

/* On a cream section the same form needs dark ink instead. */
.ce .section--cream .dc-form label{color:var(--ce-charcoal)}
.ce .section--cream .dc-form input,
.ce .section--cream .dc-form select,
.ce .section--cream .dc-form textarea{
  border-color:rgba(23,20,15,.22);background:#fff;color:var(--ce-ink);
}
.ce .section--cream .dc-form input::placeholder,
.ce .section--cream .dc-form textarea::placeholder{color:rgba(23,20,15,.42)}


/* ============================================================
   WAITLIST STATUS
   The Main Street page has no booking, no reviews and no gallery of
   finished rooms. What it has is honest progress, so the status list
   carries the page where a day-in-beats would normally sit.
   ============================================================ */
.ce .status{
  display:grid;gap:0;margin:2.4rem 0 0;padding:0;list-style:none;
  max-width:70ch;
}
.ce .status li{
  display:grid;grid-template-columns:minmax(9rem,auto) 1fr;
  gap:clamp(1rem,3vw,2.4rem);align-items:baseline;
  padding:1.15rem 0;border-top:1px solid rgba(23,20,15,.14);
}
.ce .status li:last-child{border-bottom:1px solid rgba(23,20,15,.14)}
.ce .status b{
  font-family:var(--ce-f-sans);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ce-rust);
}
.ce .status span{font-size:1.02rem;line-height:1.55}
@media (max-width:620px){
  .ce .status li{grid-template-columns:1fr;gap:.4rem}
}
.ce .section--ink .status li,
.ce .section--slate .status li,
.ce .section--deep .status li{border-top-color:rgba(247,240,230,.18)}
.ce .section--ink .status li:last-child,
.ce .section--slate .status li:last-child,
.ce .section--deep .status li:last-child{border-bottom-color:rgba(247,240,230,.18)}


/* ============================================================
   PLAIN HERO
   The waitlist page has no photograph worth running, so the hero is
   type on ink. Shorter than the photographic version, because a tall
   empty band reads as a broken image rather than a design decision.
   Delete this block the day Main Street has an exterior shot.
   ============================================================ */
.ce .hero--plain{background:var(--ce-ink)}
.ce .hero--plain::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(211,143,76,.18) 0%,rgba(211,143,76,0) 62%),
    linear-gradient(to bottom,rgba(23,20,15,0) 0%,rgba(23,20,15,.5) 100%);
}
.ce .hero--plain .hero__in{min-height:clamp(440px,62svh,640px)}
.ce .hero--plain h1,
.ce .hero--plain .lede,
.ce .hero--plain .hero__place{text-shadow:none}