/* =============================================================
   Campaign landing page: fall at Letchworth (template-lp-fall.php)
   Serves /stay/fall/.

   Same lineage as lp-prop.css: a copy of the approved Silver Lake Haus
   stylesheet with the namespace moved .lk -> .fa and --lk-* -> --fa-*.
   The fall page is a routing page rather than a single-property page, so
   the additions at the bottom are the property chooser and the peak-color
   panel. Everything is scoped under .fa. */

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

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

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

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

.fa *,.fa *::before,.fa *::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}}

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

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

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

/* ---------- utility type ---------- */
.fa .eyebrow{
  font-family:var(--fa-f-sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--fa-rust);
  margin:0 0 1.1em;
}
.fa .eyebrow--pale{color:var(--fa-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. */
.fa h1,.fa h2,.fa h3,.fa h4{
  color:inherit;font-family:var(--fa-f-display);
  font-weight:400;line-height:1.04;margin:0;letter-spacing:-.015em;
}
.fa h1{font-size:clamp(2.9rem,7.6vw,6rem)}
.fa h2{font-size:clamp(2.1rem,4.6vw,3.5rem)}
.fa h3{font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.18}

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

/* ---------- buttons ---------- */
.fa .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--fa-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(--fa-rust);color:#fff;
  transition:background .18s ease,transform .18s ease,color .18s ease,border-color .18s ease;
}
.fa .btn:hover{background:var(--fa-rust-dark)}
.fa .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. */
.fa .btn--big{font-size:.92rem;padding:1.18em 2.6em;letter-spacing:.16em}
.fa .btn--ghost{background:transparent;color:var(--fa-ink);border-color:rgba(23,20,15,.28)}
.fa .btn--ghost:hover{background:rgba(23,20,15,.06);border-color:rgba(23,20,15,.5)}
.fa .btn--onink{background:transparent;color:var(--fa-cream);border-color:rgba(247,240,230,.4)}
.fa .btn--onink:hover{background:rgba(247,240,230,.12);border-color:var(--fa-cream)}

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

/* alt booking route — visible, quiet */
.fa .alt-book{
  font-family:var(--fa-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. */
.fa .alt-book a,
.fa .beat__body p a,
.fa .faq a,
.fa .aside a{
  text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;
}
.fa .btn{text-decoration:none}

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

/* ============================================================
   HERO
   ============================================================ */
.fa .hero{position:relative;isolation:isolate;background:var(--fa-ink);color:var(--fa-cream)}
.fa .hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;z-index:-2;
}
.fa .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%);
}
.fa .hero__in{
  max-width:var(--fa-wrap);margin-inline:auto;padding:clamp(4.5rem,16vh,9rem) var(--fa-pad) clamp(2rem,5vw,3rem);
  min-height:clamp(620px,92svh,940px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.fa .hero__place{
  font-family:var(--fa-f-sans);font-size:.7rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--fa-tan-soft);
  margin:0 0 1.15em;text-shadow:0 1px 14px rgba(0,0,0,.75);
}
.fa .hero h1{max-width:14ch;text-shadow:0 2px 34px rgba(0,0,0,.42)}
.fa .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)}
.fa .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:2rem}
.fa .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){
  .fa .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 */
.fa .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(--fa-f-sans);font-size:.79rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fa-tan-soft);
}

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

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

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

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

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


/* ============================================================
   THE DAY — time rail (the signature)
   ============================================================ */
.fa .day{background:var(--fa-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. */
.fa .day__head{
  padding:clamp(4rem,8vw,6rem) var(--fa-pad) clamp(2rem,4vw,3rem)
          calc(var(--fa-pad) + var(--fa-rail) + clamp(1.4rem,2.4vw,2.6rem));
}
@media (max-width:720px){
  .fa .day__head{padding-left:calc(var(--fa-pad) + 1.9rem)}
}

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

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

/* honest aside — the things a good host says out loud */
.fa .aside{
  margin:1.6rem 0 0;padding:.9rem 0 .9rem 1.2rem;
  border-left:2px solid var(--fa-tan);
  font-size:.96em;font-style:italic;opacity:.85;
}
.fa .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. */
.fa .beat--table .beat__body{max-width:none}
.fa .beat--table .beat__body p{max-width:56ch}
.fa .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)}
.fa .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);
}
.fa .nearby dt,.fa .nearby b{
  font-family:var(--fa-f-sans);font-weight:600;font-size:.82rem;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.5;
}
.fa .nearby span{font-size:.98em;opacity:.86}
@media (max-width:620px){.fa .nearby li{grid-template-columns:1fr;gap:.2rem}}

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

/* ============================================================
   THE HOUSE — gallery
   ============================================================ */
.fa .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);
}
.fa .specs li{background:var(--fa-ink);padding:1.5rem 1.4rem}
.fa .specs b{
  display:block;font-family:var(--fa-f-sans);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fa-tan);margin-bottom:.5rem;
}
.fa .specs span{font-size:1.02rem;line-height:1.45;opacity:.93}

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

/* lightbox */
.fa .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);
}
.fa .lb[open],.fa .lb.is-open{display:flex}
.fa .lb img{max-width:100%;max-height:88svh;width:auto;height:auto;border-radius:2px}
.fa .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(--fa-cream);
  font-family:var(--fa-f-sans);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.6em 1.1em;cursor:pointer;border-radius:2px;
}
.fa .lb__close:hover{background:rgba(247,240,230,.12)}

/* ============================================================
   ENHANCEMENTS
   ============================================================ */
.fa .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)}
.fa .enh li{padding:1.5rem 0;border-bottom:1px solid rgba(23,20,15,.15)}
.fa .enh h3{font-size:1.3rem;margin-bottom:.35rem}
.fa .enh p{margin:0;font-size:.99rem;opacity:.82;line-height:1.5}
.fa .enh .price{
  display:block;margin-top:.6rem;font-family:var(--fa-f-sans);
  font-size:.78rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fa-rust-dark);
}

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

/* ============================================================
   CLOSING OFFER
   ============================================================ */
.fa .close{text-align:center}
.fa .close h2{max-width:18ch;margin-inline:auto}
.fa .close .lede{max-width:46ch;margin:1.4rem auto 0;opacity:.9}
.fa .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;
}
.fa .close__code b{
  font-family:var(--fa-f-sans);font-size:clamp(1.5rem,3.2vw,2.1rem);
  font-weight:600;letter-spacing:.24em;color:var(--fa-tan);line-height:1;
}
.fa .close__code small{
  font-family:var(--fa-f-sans);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;opacity:.72;
}
.fa .close .alt-book{color:rgba(247,240,230,.78)}

/* ============================================================
   FAQ
   ============================================================ */
.fa .faq{max-width:74ch}
.fa .faq details{border-bottom:1px solid rgba(23,20,15,.15)}
.fa .faq summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.4rem 1.25rem 0;position:relative;
  font-size:1.14rem;
}
.fa .faq summary::-webkit-details-marker{display:none}
.fa .faq summary::after{
  content:"";position:absolute;right:.5rem;top:1.75rem;
  width:9px;height:9px;border-right:1px solid var(--fa-rust);border-bottom:1px solid var(--fa-rust);
  transform:rotate(45deg);transition:transform .2s ease;
}
.fa .faq details[open] summary::after{transform:rotate(-135deg)}
.fa .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 .fa .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js-anim .fa .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .fa .reveal{opacity:1;transform:none;transition:none}
  .fa .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.
   ============================================================ */
.fa .props{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1.8rem;
  margin:3rem 0 0;
  padding:0;
  list-style:none;
}
.fa .prop{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--fa-white);
  border:1px solid rgba(23,20,15,.10);
  overflow:hidden;
}
.fa .prop img{aspect-ratio:3/2;object-fit:cover;width:100%}
.fa .prop__in{display:flex;flex-direction:column;gap:.7rem;padding:1.6rem 1.6rem 1.8rem;flex:1}
.fa .prop h3{margin:0;font-size:clamp(1.2rem,1.7vw,1.45rem)}
.fa .prop__for{
  margin:0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fa-rust-dark);
}
.fa .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);
}
.fa .prop p{margin:0;font-size:.98rem;line-height:1.6}
.fa .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. */
.fa .prop__link{position:absolute;inset:0;z-index:1}
.fa .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. */
.fa .prop:hover .btn,.fa .prop:focus-within .btn{background:var(--fa-ink);color:var(--fa-cream)}

@media (prefers-reduced-motion:no-preference){
  .fa .prop{transition:transform .3s ease,box-shadow .3s ease}
  .fa .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.
   ============================================================ */
.fa .peak{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:2rem 3rem;
  margin-top:2.6rem;
}
.fa .peak > div > h3{margin:0 0 .8rem}
.fa .peak ol{margin:0;padding-left:1.2rem;display:grid;gap:.9rem}
.fa .peak li{line-height:1.6}
.fa .peak li b{display:block}