/* /book page — Lodgify booking widget (added 2026-09-21) + its graceful-
   degrade fallback (see pages.js's bookingWidgetFallback). #lodgify-booking
   holds the real Lodgify search-bar embed, which renders itself into place
   via its own deferred script; .booking-fallback stays visible until that
   script actually populates #lodgify-search-bar (or forever, if the script
   fails to load — e.g. a static/local preview with no network access). */
.booking-widget-wrap{max-width:820px;margin:0 auto}
.booking-fallback{border:1px solid color-mix(in srgb,var(--sand) 22%,transparent);background:var(--pine);border-radius:2px;padding:clamp(1.8rem,4vw,2.8rem);text-align:center}
.booking-fallback h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3vw,2rem);margin:.6rem 0 1rem}
.booking-fallback p{color:color-mix(in srgb,var(--birch) 88%,transparent);margin:0 0 1.4rem}
.booking-fallback .contact-list{text-align:left;max-width:340px;margin:0 auto 1.6rem}
.booking-note{text-align:center;max-width:60ch;margin:2.2rem auto 0;color:color-mix(in srgb,var(--sand) 90%,transparent)}
.booking-note a{color:var(--lantern)}

/* Rate callout, added 2026-09-24 — sits above the booking widget. Leads with
   the 2+-night rate (what we want guests to book) and puts the single-night
   rate in small print underneath, rather than letting Lodgify's own "from
   $X/night" badge (which quotes off the 1-night minimum-stay price) be the
   first number a guest sees. Pure marketing copy — doesn't touch the actual
   Lodgify rates, which live in the Lodgify dashboard. */
.rate-callout{text-align:center;max-width:40ch;margin:0 auto 2.4rem}
.rate-callout-price{margin:0;line-height:1;font-family:var(--display);font-weight:300;color:var(--lantern)}
.rate-callout-amount{font-size:clamp(2.2rem,5vw,3rem)}
.rate-callout-unit{font-family:var(--sans);font-size:.95rem;font-weight:400;letter-spacing:.04em;color:color-mix(in srgb,var(--birch) 80%,transparent)}
.rate-callout-terms{margin:.4rem 0 0;font-size:.95rem;color:color-mix(in srgb,var(--birch) 85%,transparent)}
.rate-callout-fine{margin:.85rem 0 0;font-size:.78rem;letter-spacing:.02em;color:color-mix(in srgb,var(--birch) 55%,transparent)}

/* Plan Your Trip accordion (Services page, under the "What we offer" tiles) */
.plan-trip{margin-top:clamp(2.5rem,6vw,4rem);max-width:900px;margin-inline:auto}
.plan-trip-head{max-width:60ch;margin:0 auto 1.75rem;text-align:center}
.plan-trip-head h3{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);margin:.6rem 0 .8rem}
.plan-trip-head p{color:color-mix(in srgb,var(--birch) 82%,transparent);margin:0}
.trip-panel{border:1px solid color-mix(in srgb,var(--sand) 22%,transparent);background:var(--pine);border-radius:2px;padding:0}
.trip-panel + .trip-panel{margin-top:1rem}
.trip-panel summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.6rem;font-family:var(--display);font-size:1.15rem;font-weight:400;color:var(--birch)}
.trip-panel summary::-webkit-details-marker{display:none}
.trip-panel summary:hover,.trip-panel summary:focus-visible{color:var(--lantern)}
.trip-icon{position:relative;width:18px;height:18px;flex:0 0 auto}
.trip-icon::before,.trip-icon::after{content:"";position:absolute;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.trip-icon::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.trip-icon::after{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.trip-panel[open] .trip-icon::after,.amenity-category[open] .trip-icon::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.trip-panel-body{padding:0 1.6rem 1.6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem 2rem}
.trip-col h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lantern);margin:0 0 .6rem}
.trip-col ul{margin:0;padding-left:1.1rem;font-size:1.02rem;color:color-mix(in srgb,var(--birch) 88%,transparent)}
.trip-col ul li{margin-bottom:.5rem}
.trip-col ul li::marker{color:var(--lantern)}
.trip-panel-body--list{display:block}
.trip-lede{color:color-mix(in srgb,var(--birch) 85%,transparent);margin:0 0 1.2rem}
/* Local amenities — each category is its own small nested accordion
   (reuses .trip-icon for the same chevron language as the outer panels,
   just sized down) instead of one flat list, so a much longer roster of
   real vendors doesn't turn into an overwhelming wall of text. */
.amenities-list{margin:0 0 .2rem}
.amenity-category{border-top:1px solid color-mix(in srgb,var(--sand) 20%,transparent)}
.amenity-category:last-child{border-bottom:1px solid color-mix(in srgb,var(--sand) 20%,transparent)}
.amenity-category summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;font-family:var(--sans);font-size:1.02rem;font-weight:400;color:var(--birch)}
.amenity-category summary::-webkit-details-marker{display:none}
.amenity-category summary:hover,.amenity-category summary:focus-visible{color:var(--lantern)}
.amenity-category .trip-icon{width:14px;height:14px}
.amenity-category-body{padding:0 0 1.2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem 1.6rem}
.amenity-vendor{font-size:.98rem}
.amenity-name{margin:0 0 .25rem;color:var(--lantern);font-weight:500}
.amenity-detail{margin:0;color:color-mix(in srgb,var(--birch) 85%,transparent);font-size:.9rem;line-height:1.55}
.amenity-detail a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--sand) 45%,transparent);text-underline-offset:.15em}
.amenity-detail a:hover,.amenity-detail a:focus-visible{color:var(--lantern)}
.amenity-hours{margin-top:.3rem}
.amenity-hours .amenity-detail{line-height:1.4}
.trip-note{font-size:.95rem;color:color-mix(in srgb,var(--sand) 90%,transparent);border-top:1px solid color-mix(in srgb,var(--sand) 18%,transparent);padding:1rem 1.6rem 1.6rem;margin:0}
@media (max-width:820px){.trip-panel summary{padding:1.1rem 1.2rem;font-size:1.05rem}.trip-panel-body{padding:0 1.2rem 1.2rem}.trip-note{padding:1rem 1.2rem 1.4rem}}
@media (prefers-reduced-motion: reduce){.trip-icon::before,.trip-icon::after{transition:none}.photo img,.tile-image{transition:none!important;transform:none!important;scale:1!important;translate:0 0!important}}

/* "What to bring" print/PDF button + isolated print output. Clicking it
   adds body.printing-checklist and calls window.print(); the browser's
   own "Save as PDF" destination is the download — no PDF file to keep in
   sync with the checklist copy, and it always reflects the live list. */
.trip-print-bar{grid-column:1/-1;display:flex;justify-content:flex-end;margin:-.3rem 0 .2rem}
.trip-print-head{display:none}
.trip-print-btn{display:inline-flex;align-items:center;gap:.55rem;background:none;border:1px solid color-mix(in srgb,var(--sand) 35%,transparent);color:var(--sand);font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.6rem .95rem;border-radius:2px;cursor:pointer;transition:border-color .25s ease,color .25s ease}
.trip-print-btn:hover,.trip-print-btn:focus-visible{border-color:var(--lantern);color:var(--lantern)}
.trip-print-btn svg{width:14px;height:14px;flex:none}
@media print{
  /* Rather than the usual "hide everything, show one element" visibility
     trick (which leaves the rest of the page's layout height behind and
     prints a run of blank pages after it), explicitly collapse every
     sibling along the path down to #what-to-bring with display:none —
     nothing else is left in flow to paginate. */
  body.printing-checklist{--spruce:#fff;--pine:#fff;--lake:#fff;--birch:#161616;--lantern:#6b4f1d;--cedar:#6b4f1d;--sand:#555;--ink:#161616;background:#fff}
  body.printing-checklist > header,
  body.printing-checklist > .flyout-scrim,
  body.printing-checklist > aside,
  body.printing-checklist > footer,
  body.printing-checklist main > .waterline,
  body.printing-checklist main > section.light,
  body.printing-checklist .section-head,
  body.printing-checklist .grid,
  body.printing-checklist .plan-trip-head,
  body.printing-checklist .trip-panel:not(#what-to-bring){display:none}
  /* section{padding-block:clamp(4.5rem,10vh,8rem)} (the base rule every
     section gets) was the actual source of the big empty band above the
     checklist and the extra page after it — zero it out here along with
     the wrap/plan-trip's own spacing, and lay the six columns out 3-wide
     instead of 2 so the whole thing is short enough to stay on one page. */
  body.printing-checklist main > section{padding-block:0}
  body.printing-checklist .wrap{padding-inline:0}
  body.printing-checklist .plan-trip{margin-top:0;max-width:none}
  body.printing-checklist #what-to-bring{border:0;background:#fff}
  body.printing-checklist #what-to-bring .trip-panel-body{grid-template-columns:repeat(3,1fr);gap:1rem 1.4rem;padding:0 0 .8rem}
  body.printing-checklist #what-to-bring .trip-note{padding:.7rem 0 0}
  body.printing-checklist #what-to-bring:not([open]) > *:not(summary){display:block}
  body.printing-checklist #what-to-bring summary,
  body.printing-checklist .trip-print-bar{display:none}
  body.printing-checklist .trip-print-head{display:block;grid-column:1/-1;margin:0 0 1rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#555;border-bottom:1px solid #ccc;padding-bottom:1rem}
  body.printing-checklist .trip-print-head strong{display:block;font-family:var(--display);font-size:1.3rem;letter-spacing:0;text-transform:none;color:#161616;margin-bottom:.3rem}
}

/* Preserve the full stacked footer lockup instead of cropping it into a square. */
.footer-branding img{width:180px;height:auto;max-height:180px;object-fit:contain}
@media (max-width:820px){.footer-branding img{width:150px;height:auto;max-height:150px}}
.footer-branding img{border:0}.footer-branding .btn{width:180px}
@media (max-width:820px){.footer-branding .btn{width:150px}}
.getting-here{background:var(--pine)}
.getting-here-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:stretch}
.getting-here-copy{display:flex;flex-direction:column;justify-content:center}
.getting-here-copy h2{font-family:var(--display);font-weight:300;line-height:1.05;font-size:clamp(2rem,4vw,3.4rem);margin:.8rem 0 1.4rem}
.getting-here-copy p{color:color-mix(in srgb,var(--birch) 82%,transparent);margin:0 0 1.3rem}
.getting-here-address{border-top:1px solid color-mix(in srgb,var(--sand) 25%,transparent);padding-top:1rem;color:var(--sand)}
.getting-here-address strong{display:block;color:var(--lantern);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.getting-here-address a,.getting-here-coordinates a{color:inherit;text-decoration:none;transition:color .25s ease}
.getting-here-address a:hover,.getting-here-address a:focus-visible,.getting-here-coordinates a:hover,.getting-here-coordinates a:focus-visible{color:var(--lantern)}
.getting-here-map{min-height:360px;border:1px solid color-mix(in srgb,var(--sand) 22%,transparent);background:var(--lake)}
.getting-here-map iframe{display:block;width:100%;height:100%;min-height:360px;border:0;filter:saturate(.7) contrast(.95)}
@media (max-width:820px){.getting-here-layout{grid-template-columns:1fr}.getting-here-map,.getting-here-map iframe{min-height:300px}}
.getting-here{padding-block:clamp(6rem,13vh,10rem);background:linear-gradient(120deg,var(--pine),var(--lake))}.getting-here-layout{grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,8vw,7rem)}.getting-here-copy h2{font-size:clamp(2.6rem,5vw,4.6rem);max-width:9ch}.getting-here-copy p{max-width:44ch}.getting-here-address,.getting-here-coordinates{font-size:.95rem}.getting-here-coordinates{color:var(--sand)!important}.getting-here-coordinates strong{display:block;color:var(--lantern);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}.getting-here-map{min-height:480px;overflow:hidden;border-color:rgba(255,255,255,.4);box-shadow:0 1.5rem 3rem rgba(9,15,12,.22)}.getting-here-map iframe{height:125%;min-height:480px;transform:translateY(-20%)}
@media (max-width:820px){.getting-here{padding-block:5rem}.getting-here-layout{grid-template-columns:1fr;gap:2.5rem}.getting-here-copy h2{font-size:clamp(2.4rem,12vw,3.8rem);max-width:10ch}.getting-here-map,.getting-here-map iframe{min-height:340px}.getting-here-copy .btn,.copy .btn{display:block;width:fit-content;margin-inline:auto}}
/* Keep the primary flyout focused on the main routes; the lodge is featured within Services. */
.reserve-pill{position:relative;isolation:isolate;border-radius:6px;transition:transform .25s ease}
/* Fill is two rounded shapes behind the text instead of one clip-path polygon (whose vertices are
   always sharp): ::before is the body, ::after a rounded block skewed about its centre to form the
   angled end (16.7deg ~ atan(6/20) for the ~40px pill — top-right 12px in, bottom-right flush).
   Hover animates to the mirror skew, so the slant still flips and every corner stays rounded. */
.reserve-pill::before,.reserve-pill::after{content:"";position:absolute;top:0;bottom:0;z-index:-1;background:var(--lantern);transition:transform .35s ease,background .35s ease}
.reserve-pill::before{left:0;right:18px;border-radius:6px 0 0 6px}
.reserve-pill::after{right:6px;width:36px;border-radius:6px;transform:skewX(16.7deg)}
.reserve-pill:hover,.reserve-pill:focus-visible{transform:translateY(-1px)}
.reserve-pill:hover::before,.reserve-pill:focus-visible::before,.reserve-pill:hover::after,.reserve-pill:focus-visible::after{background:var(--birch)}
.reserve-pill:hover::after,.reserve-pill:focus-visible::after{transform:skewX(-16.7deg)}
.menu-btn{position:relative;transition:transform .25s ease,color .25s ease}.menu-btn:hover,.menu-btn:focus-visible{color:var(--lantern)}.menu-btn:active{transform:translateX(-1px)}.bars span{transition:transform .4s ease,width .35s ease,opacity .25s ease,top .35s ease,right .35s ease,left .35s ease}.bars span:first-child{left:0;width:75%}.bars span:last-child{right:0;left:auto;width:75%}.menu-btn:hover .bars span:first-child,.menu-btn:focus-visible .bars span:first-child{transform:translateX(6.5px)}.menu-btn:hover .bars span:last-child,.menu-btn:focus-visible .bars span:last-child{transform:translateX(-6.5px)}body.menu-open .menu-btn{transform:translateX(-1px)}body.menu-open .menu-btn .bars span:first-child{top:7px;left:0;width:100%;transform:rotate(45deg)}body.menu-open .menu-btn .bars span:nth-child(2){opacity:0}body.menu-open .menu-btn .bars span:last-child{bottom:auto;top:7px;left:0;right:auto;width:100%;transform:rotate(-45deg)}
.flyout{border:0;border-left:1px solid rgba(255,255,255,.65);box-shadow:-24px 0 60px -30px rgba(0,0,0,.6)}
/* Flyout photo lives on the panel's own background (see the .flyout rule below) instead of an absolutely-
   positioned ::before, which only covered the first screen and scrolled away on short viewports. A scroll
   container's own background stays stationary while its content scrolls. The 65% birch wash reproduces
   the old ::before's opacity:.35 over birch. */
.fly-link{transition:color .3s ease,padding-left .3s ease}.fly-link:hover,.fly-link:focus-visible{color:var(--cedar);padding-left:.6rem}.flyout-close svg{width:16px;height:16px;display:block}
:root{--spruce:#16241E;--pine:#24382F;--lake:#33535A;--birch:#ECE6D8;--cedar:#9B6B45;--lantern:#CBA24C;--ink:#171A16;--sand:#CFC6B4;--display:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--measure:1800px;--gutter:clamp(1.25rem,5vw,4rem);--promo-offset:0px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--spruce);color:var(--birch);font-family:var(--sans);font-weight:300;font-size:clamp(1.1rem,.6vw + 1rem,1.2rem);line-height:1.75;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit}.top{position:absolute;top:var(--promo-offset,0px);left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:1.6rem var(--gutter)}.brand-link{text-decoration:none;display:block}.top-actions{display:flex;align-items:center;gap:clamp(1rem,2vw,1.6rem)}.brand img{height:56px;width:auto}.reserve-pill{text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--spruce);padding:.62rem 1.4rem .62rem 1.2rem}.menu-btn{display:inline-flex;align-items:center;gap:.85rem;background:none;border:0;cursor:pointer;color:inherit;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.5rem 0}.bars{position:relative;width:26px;height:16px}.bars span{position:absolute;height:2px;background:currentColor;border-radius:1px;left:0;width:100%}.bars span:first-child{top:0}.bars span:nth-child(2){top:7px}.bars span:last-child{bottom:0}.flyout-scrim{position:fixed;inset:0;z-index:39;background:rgba(9,15,12,.28);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}.flyout{position:fixed;top:0;right:0;bottom:0;height:100%;z-index:40;width:min(360px,100%);display:flex;flex-direction:column;padding:7rem clamp(1.75rem,4vw,3.2rem) 1.6rem;overflow-y:auto;color:#2b3d34;background:linear-gradient(rgba(236,230,216,.65),rgba(236,230,216,.65)),url("assets/images/marina-reich.jpg") center/cover no-repeat,var(--birch);transform:translateX(100%);visibility:hidden;transition:transform .55s cubic-bezier(.22,.61,.36,1),visibility 0s linear .55s}.flyout-nav{margin-top:.5rem}.fly-link{display:block;text-decoration:none;font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,3.2vw,1.85rem);line-height:1.1;color:#2b3d34;padding:1.05rem .2rem;border-bottom:1px solid rgba(20,30,24,.14)}.fly-link[aria-current=page]{color:var(--lantern)}.flyout-close{position:absolute;top:1.4rem;right:1.4rem;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;color:#2b3d34;cursor:pointer;padding:0;line-height:0;display:grid;place-items:center}.flyout-foot{margin-top:auto;padding-top:1.6rem}.flyout-foot .btn{color:var(--spruce);padding:.62rem 1.4rem;font-size:.72rem;width:195px;text-align:center}.fly-social{display:flex;gap:.9rem;margin-top:1.1rem}.fly-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(20,30,24,.22);color:#2b3d34;display:grid;place-items:center}.fly-social svg{width:16px;height:16px}body.menu-open .flyout{transform:translateX(0);visibility:visible;transition:transform .55s cubic-bezier(.22,.61,.36,1),visibility 0s}body.menu-open .flyout-scrim{opacity:1;visibility:visible;transition:opacity .5s ease}.btn{font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;padding:1rem 1.9rem;border-radius:6px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .25s ease,background .3s ease,color .3s ease,border-color .3s ease;display:inline-block}.btn-primary{background:var(--lantern);color:var(--spruce);font-weight:500;box-shadow:0 0 0 0 color-mix(in srgb,var(--lantern) 60%,transparent)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px color-mix(in srgb,var(--lantern) 55%,transparent)}.btn-ghost{border-color:color-mix(in srgb,var(--birch) 50%,transparent);color:var(--birch)}.btn-ghost:hover{border-color:var(--lantern);color:var(--lantern)}.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--lantern);margin:0}.light .eyebrow{color:var(--cedar)}.hero{min-height:min(72svh,760px);display:flex;align-items:flex-end;padding:0 var(--gutter) clamp(3rem,9vh,6rem);position:relative;overflow:hidden;background:linear-gradient(180deg,#0e1813,#29413b 65%,#16241E)}.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 68% 58%,color-mix(in srgb,var(--lantern) 38%,transparent),transparent 30%),linear-gradient(180deg,rgba(9,15,12,.6),transparent 46%,rgba(9,15,12,.7))}.hero-inner{position:relative;z-index:1;max-width:var(--measure);width:100%;margin-inline:auto}.hero h1{font-family:var(--display);font-size:clamp(3rem,8vw,6.8rem);font-weight:300;line-height:.98;max-width:11ch;margin:.75rem 0 1.6rem}.hero .lede{max-width:48ch;margin:0;color:color-mix(in srgb,var(--birch) 92%,transparent)}section{padding-block:clamp(4.5rem,10vh,8rem)}.wrap{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}.waterline{display:flex;align-items:center;gap:1.1rem;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);color:var(--sand)}.waterline::before,.waterline::after{content:"";height:1px;flex:1;background:color-mix(in srgb,var(--sand) 60%,transparent)}.waterline span{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;opacity:.85}.dot{width:6px;height:6px;border-radius:50%;background:var(--lantern);flex:0 0 auto}.intro-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}.copy h2,.section-head h2{font-family:var(--display);font-weight:300;line-height:1.05;font-size:clamp(2rem,4vw,3.4rem);margin:.8rem 0 1.4rem}.copy p{color:color-mix(in srgb,var(--birch) 88%,transparent);margin:1.3rem 0 0}.photo{aspect-ratio:4/5;overflow:hidden;border:1px solid color-mix(in srgb,var(--sand) 22%,transparent)}.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,.8,.24,1);transform:scale(1.06) translate3d(-1%,1%,0)}
/* Pan-in reveal: .photo is already an overflow:hidden frame, so scaling the
   <img> itself (rather than the frame) reads as the photo panning into its
   resting position as it scrolls into view. JS adds .in-view on first
   intersection (see pages.js). */
.photo.in-view img{transform:scale(1) translate3d(0,0,0)}.section-head{text-align:center;max-width:var(--measure);margin:0 auto 3rem;padding-inline:var(--gutter)}.section-head h2{margin:.8rem auto 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.tile{position:relative;isolation:isolate;overflow:hidden;background:var(--pine);border:1px solid color-mix(in srgb,var(--sand) 20%,transparent);padding:1.7rem;min-height:18rem}.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,36,30,.48),rgba(22,36,30,.94) 82%)}.tile-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.48;filter:saturate(.75) contrast(.92);transition:transform .6s ease,opacity .6s ease,scale 1.1s cubic-bezier(.16,.8,.24,1),translate 1.1s cubic-bezier(.16,.8,.24,1);scale:1.06;translate:-1% 1%}
/* Pan-in reveal via the standalone scale/translate properties (not the
   `transform` shorthand) so it composes independently from the existing
   hover zoom above, which still animates .tile-image's `transform` on its
   own quick .6s timing without the two fighting over one property. */
.tile.in-view .tile-image{scale:1;translate:0 0}.tile:hover .tile-image,.tile:focus-within .tile-image{transform:scale(1.04);opacity:.58}.tile h3{font-family:var(--display);font-size:1.55rem;font-weight:300;margin:.45rem 0 .7rem}.tile p{margin:0;color:color-mix(in srgb,var(--birch) 78%,transparent);font-size:.95rem}.tile .num{color:var(--lantern);font-family:var(--display)}.light{background:var(--birch);color:var(--ink)}.light .copy p,.light .tile p{color:color-mix(in srgb,var(--ink) 76%,transparent)}.light .tile{background:transparent;border-color:color-mix(in srgb,var(--ink) 16%,transparent)}
.light .btn-ghost{border-color:color-mix(in srgb,var(--ink) 40%,transparent);color:var(--ink)}
.light .btn-ghost:hover,.light .btn-ghost:focus-visible{border-color:var(--cedar);color:var(--cedar)}.form-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,7vw,6rem);max-width:1180px;margin-inline:auto}.contact-list{list-style:none;padding:0;margin:2rem 0 0}.contact-list li{border-top:1px solid color-mix(in srgb,var(--sand) 25%,transparent);padding:1rem 0}.contact-list strong{display:block;color:var(--lantern);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}.contact-list a{color:var(--sand);text-decoration:none;transition:color .25s ease}.contact-list a:hover,.contact-list a:focus-visible{color:var(--lantern)}.form{display:grid;gap:1rem}.form label{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}.form input,.form select,.form textarea{display:block;width:100%;margin-top:.4rem;padding:.9rem 1rem;border:1px solid color-mix(in srgb,var(--sand) 32%,transparent);border-radius:2px;background:rgba(236,230,216,.06);color:var(--birch);font:inherit}.form textarea{min-height:150px;resize:vertical}.form option{color:var(--ink)}footer{background:var(--pine);color:var(--sand);padding:3.5rem 0 0;font-size:1rem;font-weight:500;letter-spacing:.04em} @media(max-width:820px){.intro-grid,.form-layout{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.photo{max-height:520px}.hero{min-height:340px;display:block;padding:7rem var(--gutter) 3rem}.hero h1{font-size:clamp(3rem,15vw,5rem)}.reserve-pill{display:none}.flyout{padding-top:5.5rem}}
body.menu-open .top{background:rgba(14,20,16,.92)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}.footer-inner{width:90%;max-width:var(--measure);margin:0 auto;padding:0 0 3rem;display:grid;grid-template-columns:1.1fr 1fr .75fr;gap:3rem;align-items:start}.footer-branding img{width:180px;height:auto;max-height:180px;object-fit:contain;margin-bottom:1.25rem}.footer-branding .btn{display:block;width:180px;margin-top:1.25rem;padding:.55rem 1rem;line-height:1.2;text-align:center}.footer-social{display:flex;justify-content:space-between;width:180px;margin-top:1.25rem}.footer-social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:grid;place-items:center;color:var(--sand);text-decoration:none;font-size:.72rem;transition:color .25s ease,border-color .25s ease}.footer-social a:hover,.footer-social a:focus-visible{color:var(--lantern);border-color:var(--lantern)}.footer-social svg{width:14px;height:14px}.footer-inner p{margin:0;max-width:52ch}.footer-heading{color:var(--cedar);font-size:.82rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin:0 0 1rem}.footer-links,.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}.footer-contact{justify-self:end}.footer-links{justify-self:center}.footer-links a,.footer-contact a{color:var(--sand);text-decoration:none;transition:color .25s ease}.footer-links a:hover,.footer-links a:focus-visible,.footer-contact a:hover,.footer-contact a:focus-visible{color:var(--lantern)}.footer-bottom{background:var(--spruce);width:100%;padding:1rem var(--gutter);display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;font-weight:500;letter-spacing:.04em}.footer-bottom a{color:var(--sand);text-decoration:none}.footer-bottom a:hover,.footer-bottom a:focus-visible{color:var(--lantern)}@media (max-width:820px){.footer-inner{width:100%;grid-template-columns:1fr;text-align:center;gap:2rem}.footer-branding img{width:150px;height:auto;max-height:150px;margin-inline:auto}.footer-branding .btn{width:150px;margin-inline:auto}.footer-links,.footer-contact{align-items:center;justify-self:center}.footer-bottom{flex-direction:column;align-items:center;text-align:center}.footer-social{width:150px;margin-inline:auto}}footer{border-top:1px solid color-mix(in srgb,var(--sand) 18%,transparent)}.footer-branding img{width:180px;height:auto;max-height:180px;object-fit:contain;border:0}@media (max-width:820px){.footer-branding img{width:150px;height:auto;max-height:150px}}.photo-tile h3{color:var(--birch)}.photo-tile p{color:color-mix(in srgb,var(--birch) 82%,transparent)!important}main > section:not(.light):not(.getting-here):last-of-type{background:var(--lake)}.top{position:fixed;transition:transform .35s ease,opacity .35s ease,background .4s ease,backdrop-filter .4s ease}.top.header-hidden{transform:translateY(-110%);opacity:0;pointer-events:none}.top.header-scrolled{background:rgba(14,20,16,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}body.menu-open .top.header-hidden{transform:none;opacity:1}
/* No reserved scrollbar gutter at all, in either state — a permanently
   reserved gutter needs its paint colour actively kept in sync with
   whatever's visually behind it (the flyout's birch when open, the current
   section's own background when closed), and in practice that never quite
   lined up pixel-for-pixel, which is what kept showing up as a thin seam at
   the true right edge. Scrolling itself is unaffected — this only removes
   the browser's own scrollbar chrome/space, not the ability to scroll
   (wheel, keys, touch, drag-select all still work). A non-reserving,
   full-height position:fixed track (.scroll-track) sits along the true
   right edge and fades in on hover or while actively scrolling (driven by
   the scroll listener in pages.js), fading back out at rest — so there's
   still a discoverable, draggable stand-in for a real scrollbar without
   ever occupying layout space. The draggable thumb (.scroll-thumb) lives
   inside it, sized/positioned to match scroll progress; grabbing and
   dragging it scrolls the page. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
.scroll-track{position:fixed;top:0;right:0;width:14px;height:100%;z-index:70;opacity:0;transition:opacity .3s ease}
.scroll-track:hover,.scroll-track.is-visible,.scroll-track.is-dragging{opacity:1}
body.menu-open .scroll-track{opacity:0!important;pointer-events:none}
.scroll-thumb{position:absolute;right:4px;width:4px;border-radius:4px;background:color-mix(in srgb, var(--sand) 55%, transparent);cursor:grab;touch-action:none;transition:background .2s ease,width .2s ease,right .2s ease}
.scroll-track:hover .scroll-thumb,.scroll-thumb.is-dragging{background:color-mix(in srgb, var(--lantern) 75%, transparent);width:6px;right:3px}
.scroll-thumb.is-dragging{cursor:grabbing}
/* Both labels stay in the DOM permanently, stacked in the same grid cell, so
   the button's rendered width is always max("Menu","Close") — crossfade
   between them via opacity, driven by body.menu-open, rather than swapping
   textContent (which resized the button and shifted the Reserve pill/search
   icon to its left whenever the label text changed length). */
.menu-btn-label{position:relative;display:inline-grid}
.menu-btn-label span{grid-area:1/1;transition:opacity .25s ease}
.menu-btn-label .close-label{opacity:0}
body.menu-open .menu-btn-label .menu-label{opacity:0}
body.menu-open .menu-btn-label .close-label{opacity:1}

/* Promo bar — sitewide announcement strip, fed by /api/promo (see
   loadPromoBar() in pages.js). Sits in normal document flow above <header>,
   so the page's own layout pushes the header/hero down to meet it;
   --promo-offset (set by that same script) shifts the *fixed* .top nav down
   by the same amount so the two line up. */
.promo-bar{
  position:relative; z-index:61;
  display:flex; align-items:center; justify-content:center;
  gap:.5rem 1rem; flex-wrap:wrap; text-align:center;
  padding:.7rem calc(var(--gutter) + 2.2rem);
  background:var(--lantern); color:var(--spruce);
  font-family:var(--sans); font-size:.85rem; font-weight:500;
}
.promo-bar a{ color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.promo-bar-close{
  position:absolute; top:50%; right:calc(var(--gutter) - .5rem); transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center;
  background:none; border:0; color:inherit; opacity:.7; cursor:pointer; padding:0;
  transition:opacity .2s ease;
}
.promo-bar-close:hover,.promo-bar-close:focus-visible{ opacity:1; }
.promo-bar-close svg{ width:15px; height:15px; }
@media (max-width:560px){ .promo-bar{ padding:.7rem 2.6rem; font-size:.78rem; } }