/* ============================================================
   TOKENS — an engraved plate: forest-green ink on cream stock,
   gold leaf used only where something needs pointing at.
   ============================================================ */
:root{
  color-scheme:light;
  --paper:#F3EEE1;
  --paper-2:#E9E2D0;
  --paper-3:#DED5C0;
  --range:#D5D4BE;        /* hazy far range, light transitions */
  --range-dark:#3E5C49;   /* hazy far range, forest transitions */
  --forest:#1F3327;
  --forest-mid:#2F4A38;
  --forest-soft:#4A6350;
  --gold:#C08E2E;
  --gold-light:#D9AC53;
  --muted:#5F6A5C;
  --rule:rgba(31,51,39,.22);
  --rule-soft:rgba(31,51,39,.12);
  --rule-dark:rgba(243,238,225,.24);

  --display:"Bevan",Georgia,serif;
  --label:"Oswald",system-ui,sans-serif;
  --body:"Lora",Georgia,serif;

  --pad:clamp(1.15rem,4.5vw,4rem);
  --gap:clamp(3rem,7.5vw,6.5rem);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* fine horizontal engraver's hatching */
  --hatch:repeating-linear-gradient(0deg,rgba(31,51,39,.11) 0 1px,transparent 1px 4px);
  --hatch-fine:repeating-linear-gradient(0deg,rgba(31,51,39,.07) 0 1px,transparent 1px 3px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#F3EEE1;color-scheme:light}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--paper);color:var(--forest);font-family:var(--body);
  font-size:clamp(1rem,.5vw + .9rem,1.1rem);line-height:1.68;-webkit-font-smoothing:antialiased}
/* Paper tooth over the whole page.
   This was position:fixed with mix-blend-mode, which Safari composites
   badly: the overlay gets sized and placed against the wrong box and can
   add a viewport's worth of scrollable height below the footer. Anchored
   to body instead, it spans the document exactly and cannot extend it. */
body::after{content:"";position:absolute;inset:0;z-index:900;pointer-events:none;
  background-image:var(--grain);opacity:.05;mix-blend-mode:multiply}
/* The width/height HTML attributes are presentational hints that map to CSS
   width/height. Overriding width alone leaves the attribute height in force and
   stretches the image, so height is normalised here and set explicitly where needed. */
img{max-width:100%;display:block;height:auto}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}

/* ---- type roles ---- */
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:.94;
  letter-spacing:-.005em;text-transform:uppercase}
h1{font-size:clamp(3rem,11.5vw,6.6rem);line-height:.86}
h2{font-size:clamp(1.9rem,5vw,3.4rem);max-width:15ch}
h3{font-size:1.08rem;line-height:1.16;letter-spacing:.005em}
p{margin:0 0 1.15em}

.eyebrow{font-family:var(--label);font-weight:600;font-size:.76rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem}
.on-dark .eyebrow{color:var(--gold-light)}

.lede{font-size:clamp(1.22rem,1.5vw + 1rem,1.72rem);line-height:1.32;max-width:22ch;
  font-weight:500;color:var(--forest)}
.on-dark .lede{color:rgba(243,238,225,.94)}
.sub{max-width:44ch;color:var(--forest-soft);font-size:.98rem;line-height:1.62}
.on-dark .sub{color:rgba(243,238,225,.72)}

/* gold rule + caps, the mockup's signature sub-lockup */
.rule-caps{display:flex;align-items:center;gap:.8rem;font-family:var(--label);font-weight:600;
  font-size:clamp(1rem,2.4vw,1.55rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:.55rem 0 1.6rem}
.rule-caps::before,.rule-caps::after{content:"";height:2px;background:var(--gold);flex:0 0 clamp(18px,3vw,38px)}

.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:2}
section{padding-block:var(--gap);position:relative;background:var(--paper);color:var(--forest)}
.band-2{background:var(--paper-2)}
.band-dark{background:var(--forest);color:var(--paper)}
.band-dark h2,.band-dark h3{color:var(--paper)}

/* ============================================================
   RIDGELINES — the ranges sit ON TOP of the section above, so
   a photograph ends on a skyline instead of a straight cut.
   ============================================================ */
.ridge{--ridge-h:clamp(58px,9vw,132px);
  line-height:0;position:relative;z-index:5;pointer-events:none;
  margin-top:calc(-1 * var(--ridge-h))}
.ridge.tall{--ridge-h:clamp(74px,11.5vw,168px)}
/* One pixel taller than the box it occupies, pulled back with a negative
   margin, so the fill overlaps the next band. Without it the antialiased
   bottom edge of the SVG can leave a hairline of the page background showing
   between the skyline and the section below — most visible where the ridge
   meets the dark footer. */
.ridge{margin-bottom:-1px}
.ridge svg{display:block;width:100%;height:calc(var(--ridge-h) + 1px)}
.ridge path{stroke:var(--forest);stroke-width:2;vector-effect:non-scaling-stroke}
.ridge .far{fill:var(--far,var(--range));stroke-opacity:.5}
.ridge .near{fill:var(--near,var(--paper));stroke-opacity:.8}
.ridge.flip svg{transform:scaleX(-1)}
/* give whatever sits above room so the skyline never eats content */
section:has(+ .ridge){padding-bottom:calc(var(--gap) + clamp(58px,9vw,132px))}
section:has(+ .ridge.tall){padding-bottom:calc(var(--gap) + clamp(74px,11.5vw,168px))}
.ridge + section{padding-top:calc(var(--gap) * .6)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:60;background:rgba(243,238,225,.96);
  backdrop-filter:blur(8px);border-bottom:2px solid var(--forest)}
.nav-in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding-block:.6rem}
.mark{display:flex;align-items:center;text-decoration:none;flex:none}
.mark img{height:clamp(34px,4vw,52px);width:auto;flex:none}
.nav-links{display:flex;gap:clamp(1rem,2.4vw,2rem);align-items:center;margin-left:auto}
.nav-links a{font-family:var(--label);font-weight:500;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--forest);text-decoration:none;padding-block:.35rem;
  border-bottom:2px solid transparent;transition:border-color .16s,color .16s}
.nav-links a:hover{border-color:var(--gold);color:var(--gold)}
.nav-cta{font-family:var(--label);font-weight:600;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;background:var(--forest);color:var(--paper);
  padding:.78rem 1.3rem;text-decoration:none;white-space:nowrap;flex:none;
  transition:background .16s}
.nav-cta:hover{background:var(--forest-mid)}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--forest);
  color:var(--forest);padding:.4rem .7rem;font-family:var(--label);font-weight:600;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;cursor:pointer}
@media (max-width:1000px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;margin:0;background:var(--paper);
    border-bottom:2px solid var(--forest);padding:.4rem var(--pad) 1.1rem}
  .nav-links.open{display:flex}
  .nav-links a{padding-block:.8rem;width:100%;font-size:.92rem;border-bottom:1px solid var(--rule-soft)}
  .burger{display:block}.nav-cta{display:none}
}

/* ============================================================
   HERO — the engraved plate runs full bleed, the type sits on
   the cream side of it. No filter on this one: it is already
   an engraving, so it is shown exactly as drawn.
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--paper);isolation:isolate;
  padding-bottom:clamp(74px,11.5vw,168px)}
.hero-art{position:absolute;top:0;right:0;bottom:0;width:74%;z-index:1}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:66% 50%}
.hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 14%,rgba(243,238,225,.86) 30%,rgba(243,238,225,.28) 48%,transparent 66%)}
.hero-text{position:relative;z-index:3;max-width:min(50%,640px);
  padding:clamp(3rem,7vw,6.5rem) 0 clamp(3.5rem,7vw,6.5rem);
  padding-left:var(--pad);padding-right:clamp(1rem,2vw,2rem)}
.hero-inner{max-width:1240px;margin-inline:auto;position:relative;z-index:2}

.hero h1{margin-bottom:.1em}
.hero .lede{margin-bottom:1rem}
.hero .sub{margin-bottom:2rem;max-width:38ch}

@media (max-width:900px){
  .hero-art{position:relative;width:100%;aspect-ratio:3/2}
  .hero-art::after{background:linear-gradient(180deg,var(--paper) 0%,rgba(243,238,225,.55) 10%,transparent 30%)}
  .hero-text{max-width:none;padding-inline:var(--pad);padding-bottom:clamp(2rem,5vw,3rem)}
}

/* ---- buttons ---- */
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn{font-family:var(--label);font-weight:600;font-size:.82rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;padding:1rem 1.7rem;
  transition:background .16s,color .16s,border-color .16s}
.btn-primary{background:var(--forest);color:var(--paper);border:2px solid var(--forest)}
.btn-primary:hover{background:var(--forest-mid);border-color:var(--forest-mid)}
.btn-ghost{border:2px solid var(--forest);color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:var(--paper)}
.on-dark .btn-primary{background:var(--gold);border-color:var(--gold);color:var(--forest)}
.on-dark .btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light)}
.on-dark .btn-ghost{border-color:rgba(243,238,225,.55);color:var(--paper)}
.on-dark .btn-ghost:hover{background:var(--paper);color:var(--forest);border-color:var(--paper)}

/* ---- field data strip ---- */
.field{margin-top:clamp(2.2rem,5vw,3.4rem);border-top:2px solid var(--forest);padding-top:1.15rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
  font-family:var(--label);font-weight:400;font-size:.86rem;line-height:1.4}
.field dt{color:var(--muted);font-size:.62rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:.35rem}
.field dd{margin:0;color:var(--forest);font-weight:500}
.on-dark .field{border-color:var(--rule-dark)}
.on-dark .field dt{color:rgba(243,238,225,.6)}
.on-dark .field dd{color:var(--gold-light)}
@media (max-width:720px){.field{grid-template-columns:repeat(2,1fr);gap:1.2rem}}

/* ============================================================
   PHOTOGRAPHS
   Shown in their own colour. The frame and caption do the
   work of tying them to the page, not a filter.
   ============================================================ */
.plate{margin:0;position:relative;overflow:hidden;background:var(--paper-2);
  border:2px solid var(--forest);aspect-ratio:3/4}
.plate img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2;
  filter:saturate(1.02) contrast(1.03)}
.plate figcaption{position:absolute;left:0;bottom:0;right:0;z-index:7;
  font-family:var(--label);font-weight:500;font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--paper);padding:1.7rem .9rem .7rem;
  background:linear-gradient(180deg,transparent,rgba(18,32,24,.88))}
.plate-wide{aspect-ratio:4/3}
.plate-sq{aspect-ratio:1/1}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
@media (max-width:880px){.split,.split.rev{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.2vw,1rem);margin-top:3rem}
@media (max-width:920px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.gallery{grid-template-columns:1fr}}

/* ============================================================
   HIGHWAY 20
   ============================================================ */
.road{position:relative;margin-top:3rem;padding-block:1rem}
.road-line{position:absolute;left:0;right:0;top:calc(1rem + 8px);height:0;
  border-top:2px dashed var(--rule)}
.road-stops{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr}
.stop{padding-top:2.2rem;position:relative}
.stop::before{content:"";position:absolute;top:2px;width:14px;height:14px;border-radius:50%;
  background:var(--paper-2);border:2px solid var(--forest)}
.stop:nth-child(1)::before{left:0}
.stop:nth-child(2)::before{left:50%;transform:translateX(-50%);background:var(--gold);border-color:var(--forest);width:19px;height:19px;top:0}
.stop:nth-child(3)::before{right:0}
.stop:nth-child(2){text-align:center}
.stop:nth-child(3){text-align:right}
.stop b{display:block;font-family:var(--display);font-weight:400;font-size:.98rem;text-transform:uppercase}
.stop:nth-child(2) b{font-size:1.24rem}
.stop small{display:block;font-family:var(--label);font-size:.72rem;color:var(--muted);letter-spacing:.09em;margin-top:.3rem;text-transform:uppercase}
.road-note{font-family:var(--label);font-size:.78rem;color:var(--muted);margin-top:2rem;letter-spacing:.05em}
@media (max-width:660px){
  /* Stacked, the connector has to run dot-to-dot. Spanning the whole block
     ran it past Bella Coola and down through the note underneath, so each
     stop now draws its own segment to the next one and the last draws none. */
  .road-line{display:none}
  .road-stops{--rg:1.9rem;grid-template-columns:1fr;gap:var(--rg)}
  .stop::after{content:"";position:absolute;left:6px;top:18px;
    height:calc(100% + var(--rg) - 13px);
    border-left:2px dashed var(--rule)}
  .stop:last-child::after{content:none}
  .stop{padding:0 0 0 2.2rem;text-align:left!important}
  .stop::before{left:0!important;right:auto!important;top:4px;transform:none!important}
  .stop:nth-child(2)::before{left:-3px!important;top:2px}
}

/* ============================================================
   RATES — an engraved ledger
   ============================================================ */
.rates{width:100%;border-collapse:collapse;margin-top:3rem}
.rates caption{text-align:left;font-family:var(--label);font-weight:500;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-bottom:1rem}
.rates th,.rates td{text-align:left;padding:1.2rem .9rem;vertical-align:top;border-bottom:1px solid var(--rule-soft)}
.rates thead th{font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--forest);padding-block:.6rem;border-bottom:2px solid var(--forest)}
.rates tbody th{font-family:var(--display);font-weight:400;font-size:1.02rem;text-transform:uppercase;
  white-space:nowrap;padding-left:0;letter-spacing:0}
.rates td.desc{color:var(--forest-soft);font-size:.95rem;line-height:1.55}
.rates td.price{font-family:var(--label);font-weight:600;font-size:1rem;white-space:nowrap;
  text-align:right;padding-right:0;color:var(--gold)}
.rates tbody tr{transition:background .16s}
.rates tbody tr:hover{background:rgba(192,142,46,.13)}
@media (max-width:760px){
  .rates thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rates tbody th,.rates td{display:block;border:0;padding:.15rem 0}
  .rates tbody th{padding-top:1.6rem}
  .rates tbody tr{display:block;border-bottom:1px solid var(--rule-soft);padding-bottom:1.5rem}
  .rates td.price{text-align:left;padding-top:.7rem}
}
.rates-note{font-family:var(--label);font-size:.78rem;color:var(--muted);margin-top:1.5rem;line-height:1.75}

/* ============================================================
   ACTIVITY CARDS
   ============================================================ */
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0;margin-top:3rem;border:2px solid var(--rule-dark)}
.card{padding:2rem 1.5rem 2.3rem;border-right:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark);transition:background .2s}
.card:hover{background:rgba(192,142,46,.09)}
.card .n{font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-light);display:block;margin-bottom:1.5rem}
.card h3{margin-bottom:.75rem;color:var(--paper)}
.card p{color:rgba(243,238,225,.74);font-size:.95rem;line-height:1.6;margin:0}

.birds{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.8rem 0 0;padding:0}
.birds li{list-style:none;font-family:var(--label);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;border:1px solid var(--rule-dark);color:rgba(243,238,225,.82);padding:.42rem .8rem}

/* ============================================================
   LODGE FILMSTRIP
   One continuous landscape row. Native horizontal scrolling does
   the swiping, dragging and trackpad work; JS adds a slow passive
   drift and the seamless loop. To add a photograph, copy one
   .gitem block — the loop clones and the lightbox pick it up.
   ============================================================ */
.strip{position:relative;margin-top:3rem;
  --sg:clamp(.55rem,1.2vw,1rem);   /* gap between frames */
  --sw:78%}                        /* frame width: ~1.28 visible on phones */
@media (min-width:700px){ .strip{--sw:44%} }   /* ~2.3 visible */
@media (min-width:1000px){ .strip{--sw:31%} }  /* ~3.2 visible */

.strip-track{display:flex;gap:var(--sg);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-behavior:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.strip-track::-webkit-scrollbar{display:none}
.strip-track.is-dragging{cursor:grabbing;user-select:none}
.strip-track:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

.strip .gitem{flex:0 0 var(--sw);width:auto;margin:0;aspect-ratio:3/2}
.strip .gitem img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}

.strip-hint{font-family:var(--label);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:1.1rem}

/* ============================================================
   GALLERY FRAME (shared by the filmstrip)
   ============================================================ */
.gitem{display:block;width:100%;margin:0;padding:0;
  position:relative;overflow:hidden;background:var(--paper-2);
  border:2px solid var(--forest);cursor:zoom-in;font:inherit;color:inherit;text-align:left}
.gitem img{width:100%;height:auto;filter:saturate(1.02) contrast(1.03);
  transition:transform .5s ease}
.gitem:hover img,.gitem:focus-visible img{transform:scale(1.035)}
.gitem .cap{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--label);font-weight:500;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);padding:1.6rem .85rem .65rem;
  background:linear-gradient(180deg,transparent,rgba(18,32,24,.88))}
.gal-note{font-family:var(--label);font-size:.76rem;letter-spacing:.05em;
  color:var(--muted);margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){.gitem img{transition:none}
  .gitem:hover img,.gitem:focus-visible img{transform:none}}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(15,26,20,.95);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(1rem,3vw,2.5rem)}
.lb[open],.lb.open{display:flex}
.lb-fig{margin:0;max-width:min(1100px,100%);display:flex;flex-direction:column;align-items:center}
.lb-fig img{max-width:100%;max-height:78vh;width:auto;height:auto;border:2px solid var(--gold)}
.lb-cap{font-family:var(--label);font-weight:500;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);margin-top:1rem;text-align:center}
.lb-count{font-family:var(--label);font-size:.72rem;letter-spacing:.16em;color:var(--gold);margin-top:.4rem}
.lb-btn{position:absolute;background:none;border:2px solid rgba(243,238,225,.42);
  color:var(--paper);font-family:var(--label);font-weight:600;font-size:1rem;
  width:46px;height:46px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:border-color .16s,color .16s}
.lb-btn:hover{border-color:var(--gold);color:var(--gold)}
.lb-close{top:clamp(.8rem,2.5vw,1.6rem);right:clamp(.8rem,2.5vw,1.6rem)}
.lb-prev{left:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
@media (max-width:600px){
  .lb-prev,.lb-next{top:auto;bottom:clamp(.8rem,3vw,1.6rem);transform:none}
  .lb-fig img{max-height:66vh}
}

/* ============================================================
   SEASON HEADINGS + TRAVEL ROUTES
   ============================================================ */
.season{display:flex;align-items:center;gap:.9rem;margin:clamp(2.6rem,5vw,4rem) 0 0;
  font-family:var(--label);font-weight:600;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-light)}
.season::after{content:"";height:1px;background:var(--rule-dark);flex:1}
.season:first-of-type{margin-top:3rem}

.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:0;margin-top:3rem;border-top:2px solid var(--rule-dark)}
.route{padding:2rem 1.6rem 2.2rem;border-bottom:2px solid var(--rule-dark);
  border-right:1px solid var(--rule-dark)}
.route:last-child{border-right:0}
.route .num{display:block;font-family:var(--display);font-weight:400;font-size:1.9rem;
  line-height:1;color:var(--gold);margin-bottom:1.1rem}
.route h3{color:var(--paper);margin-bottom:.75rem}
.route p{color:rgba(243,238,225,.75);font-size:.95rem;line-height:1.6;margin:0 0 1rem}
.route .meta{font-family:var(--label);font-weight:500;font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-light);margin:0}

/* ============================================================
   MEALS
   ============================================================ */
.meal{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:baseline;
  padding-block:1.15rem;border-bottom:1px solid var(--rule-soft)}
.meal:first-of-type{border-top:2px solid var(--forest)}
.meal b{font-family:var(--display);font-weight:400;font-size:1rem;text-transform:uppercase}
.meal span{font-family:var(--label);font-size:.8rem;color:var(--muted);letter-spacing:.09em;text-transform:uppercase}
.meal i{font-style:italic;color:var(--forest-soft);font-size:.95rem}
@media (max-width:620px){.meal{grid-template-columns:1fr;gap:.3rem}.meal span{order:3}}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{margin:0 auto;max-width:36ch;text-align:center;font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.4;font-style:italic;color:var(--forest)}
.quote::before{content:"";display:block;width:52px;height:2px;background:var(--gold);margin:0 auto 1.6rem}
.quote footer{font-family:var(--label);font-weight:500;font-size:.74rem;font-style:normal;
  letter-spacing:.18em;color:var(--muted);margin-top:1.4rem;text-transform:uppercase}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:2.5rem;margin-top:3.2rem}
.contact-grid h3{font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-light);margin-bottom:1rem}
.contact-grid p{color:rgba(243,238,225,.85);font-size:.97rem;margin:0 0 .3rem}
.contact-grid a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--gold)}
.contact-grid a:hover{color:var(--gold-light)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:#16261C;color:rgba(243,238,225,.62);padding-block:3.2rem 2.4rem;
  font-family:var(--label);font-size:.8rem;line-height:1.85;letter-spacing:.03em}
.foot-in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot-mark{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);
  line-height:1;text-transform:uppercase;color:var(--paper);margin:0 0 1.2rem;letter-spacing:-.01em}
.foot-mark span{display:block;font-family:var(--label);font-weight:500;font-size:.68rem;
  letter-spacing:.2em;color:var(--gold);margin-top:.55rem}
.foot a{color:rgba(243,238,225,.88);text-decoration:none}
.foot a:hover{color:var(--gold-light)}
.foot .credits{max-width:50ch;font-size:.74rem;line-height:1.8}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin:0 0 1rem}
.foot-nav a{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:border-color .16s,color .16s}
.foot-nav a:hover{border-color:var(--gold)}

.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* --- page headers (every page except the home hero) --- */
.page-head{background:var(--paper);padding-block:clamp(2.4rem,5.5vw,4.6rem) clamp(1.8rem,3.5vw,2.8rem)}
.page-head h1{font-size:clamp(2.3rem,7vw,4.6rem);line-height:.92;max-width:14ch;
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.015em}
.page-head .lede{margin-top:1.5rem;max-width:40ch}

/* --- current page marker in the nav --- */
.nav-links a[aria-current="page"]{color:var(--gold);border-color:var(--gold)}
.foot-nav a[aria-current="page"]{color:var(--gold)}

/* --- guest reviews --- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(1.8rem,4vw,3.2rem);margin-top:3rem;align-items:start}
.review{margin:0;font-style:italic;font-size:clamp(1.04rem,1.3vw,1.2rem);
  line-height:1.55;color:var(--forest)}
.review::before{content:"";display:block;width:46px;height:2px;background:var(--gold);margin-bottom:1.3rem}
.review p{margin:0}
.review footer{font-family:var(--label);font-weight:500;font-size:.72rem;font-style:normal;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:1.2rem}

/* --- home page signposts --- */
.signposts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0;margin-top:3rem;border-top:2px solid var(--forest)}
.signpost{display:block;text-decoration:none;color:inherit;padding:2rem 1.5rem 2.2rem;
  border-bottom:2px solid var(--forest);border-right:1px solid var(--rule-soft);
  transition:background .2s}
.signpost:last-child{border-right:0}
.signpost:hover{background:rgba(192,142,46,.1)}
.signpost .n{font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.2rem}
.signpost h3{margin-bottom:.7rem}
.signpost p{color:var(--forest-soft);font-size:.95rem;line-height:1.6;margin:0 0 1.1rem}
.signpost .go{font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--forest);border-bottom:2px solid var(--gold);padding-bottom:2px}

/* --- booking: direct --- */
.bookgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(1rem,2vw,1.5rem);margin-top:3rem}
.bookcard{border:2px solid var(--forest);background:var(--paper);
  padding:2rem 1.7rem 2.1rem;display:flex;flex-direction:column}
.bookcard .n{font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.2rem}
.bookcard h3{font-size:1.45rem;margin-bottom:.8rem}
.bookcard p{color:var(--forest-soft);font-size:.95rem;line-height:1.6;margin:0 0 1.6rem}
.bookcard .big{margin-top:auto;align-self:flex-start;font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.1;color:var(--forest);
  text-decoration:none;border-bottom:3px solid var(--gold);padding-bottom:3px;
  word-break:break-word;transition:color .16s,border-color .16s}
.bookcard .big:hover{color:var(--gold)}
.bookcard .small{font-family:var(--label);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:.9rem 0 0}

/* --- booking: platforms --- */
.platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(.8rem,1.6vw,1.2rem);margin-top:2.8rem}
.platform{display:block;text-decoration:none;padding:1.7rem 1.5rem;
  border:2px solid var(--rule-dark);transition:border-color .18s,background .18s}
a.platform:hover{border-color:var(--gold);background:rgba(192,142,46,.08)}
.platform b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;
  text-transform:uppercase;color:var(--paper);letter-spacing:-.01em}
.platform span{display:block;font-family:var(--label);font-weight:500;font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-light);margin-top:.7rem}
.platform-soon{opacity:.6}
.platform-soon span{color:rgba(243,238,225,.6)}

/* --- closing call to action --- */
.cta{text-align:center}
.cta h2{margin-inline:auto;max-width:18ch}
.cta .lede{margin:1.5rem auto 2.2rem}
.cta .btn-row{justify-content:center}

/* ============================================================
   FIXES
   ============================================================ */

/* Page headers need the same clearance that sections get, or the
   skyline that follows rides up over the introduction. */
.page-head:has(+ .ridge){padding-bottom:calc(1.8rem + clamp(58px,9vw,132px))}
.page-head:has(+ .ridge.tall){padding-bottom:calc(1.8rem + clamp(74px,11.5vw,168px))}

/* Lead statement — the first thing read on a page. */
.statement{font-family:var(--body);font-weight:600;
  font-size:clamp(1.26rem,2.1vw,1.95rem);line-height:1.34;max-width:31ch;
  color:var(--forest);margin-top:1.5rem}

/* The document already ends at the footer — measured, every page, every
   viewport. What you can scroll into below it is the browser's overscroll
   bounce, which paints the canvas rather than any element. Two things here:

   1. overscroll-behavior stops the bounce outright, so the page simply will
      not move past the footer. This is not overflow:hidden — the scroll
      region is untouched, only the elastic overshoot past its end is off.
   2. Belt and braces: the canvas takes the footer's colour, so if any
      browser ignores the above, what shows is the footer continuing rather
      than a pale void. */
html{overscroll-behavior-y:none;background:#16261C}
body{overscroll-behavior-y:none;background:var(--paper);
  position:relative;   /* containing block for the grain overlay above */
  display:flow-root}   /* nothing's bottom margin can escape past the footer */

/* ============================================================
   LODGE CAROUSEL
   A native horizontal scroller with snap points: swipes on touch,
   arrows and dots for clicking, arrow keys when focused. Wears the
   same frame and caption as a .plate so it sits in the page as if
   it were a single photograph.
   To add a slide, copy one <figure class="cslide"> — the dots and
   buttons are built from whatever is in the track.
   ============================================================ */
.carousel{position:relative;border:2px solid var(--forest);background:var(--paper-2);
  overflow:hidden;isolation:isolate}
.carousel-track{display:flex;aspect-ratio:3/4;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.cslide{flex:0 0 100%;min-width:0;margin:0;position:relative;scroll-snap-align:center;scroll-snap-stop:always}
.cslide img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.03)}
.cslide figcaption{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--label);font-weight:500;font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--paper);padding:2.6rem .9rem .95rem;
  background:linear-gradient(180deg,transparent,rgba(18,32,24,.9))}

.cbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--label);font-weight:600;font-size:1.15rem;line-height:1;
  color:var(--paper);background:rgba(18,32,24,.45);
  border:2px solid rgba(243,238,225,.55);
  transition:background .16s,color .16s,border-color .16s}
.cbtn:hover{background:var(--gold);color:var(--forest);border-color:var(--gold)}
.cprev{left:.6rem}
.cnext{right:.6rem}

.cdots{position:absolute;right:.9rem;bottom:1rem;z-index:3;display:flex;gap:.4rem}
.cdot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;border:1.5px solid rgba(243,238,225,.8);transition:background .16s,border-color .16s}
.cdot[aria-current="true"]{background:var(--gold);border-color:var(--gold)}

@media (max-width:520px){
  .cbtn{width:38px;height:38px}
  .cslide figcaption{font-size:.62rem;padding:2.2rem .75rem .9rem}
}

/* ============================================================
   THINGS TO DO — editorial blocks
   ============================================================ */

/* Frame for a photograph we do not have yet. Reads as a plate
   waiting on its image rather than a broken box. Swap the whole
   <figure class="holder"> for a <figure class="plate"> when the
   photograph arrives. */
.holder{position:relative;margin:0;border:2px solid var(--forest);background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:16/9;
  background-image:repeating-linear-gradient(135deg,rgba(31,51,39,.045) 0 7px,transparent 7px 14px)}
.holder-tall{aspect-ratio:3/4}
.holder-sq{aspect-ratio:1/1}
.holder .glyph{color:var(--gold);display:block;margin:0 auto .9rem}
.holder span{display:block;font-family:var(--label);font-weight:500;font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted);padding:0 1.4rem;max-width:34ch}
.on-dark .holder{border-color:var(--rule-dark);background:rgba(243,238,225,.04);
  background-image:repeating-linear-gradient(135deg,rgba(243,238,225,.05) 0 7px,transparent 7px 14px)}
.on-dark .holder span{color:rgba(243,238,225,.62)}

/* A photograph that runs the full width of the column, with its label
   under it rather than burned into the image. */
.feature{margin:3rem 0 0}
.feature .plate,.feature .holder{aspect-ratio:21/9}
@media (max-width:700px){.feature .plate,.feature .holder{aspect-ratio:4/3}}
.feature figcaption,.feature-cap{font-family:var(--label);font-weight:500;font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-top:.9rem}

/* Section-leading line, bigger than body copy but not a heading. */
.h-lead{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.25rem,2.4vw,1.85rem);line-height:1.05;letter-spacing:-.01em;
  color:var(--forest);margin:0 0 .9rem}
.on-dark .h-lead{color:var(--paper)}

/* Small text-only activity notes, for variety between the photo blocks. */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(1.6rem,3.5vw,3rem);margin-top:3rem;padding-top:2.2rem;border-top:2px solid var(--forest)}
.on-dark .notes{border-color:var(--rule-dark)}
.note h3{margin-bottom:.7rem}
.note p{color:var(--forest-soft);font-size:.96rem;line-height:1.62;margin:0}
.on-dark .note p{color:rgba(243,238,225,.74)}
.note .glyph{color:var(--gold);display:block;margin-bottom:1rem}

/* Two seasons, side by side. */
.seasons{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--forest);margin-top:3rem}
.season-col{padding:2rem 1.7rem 2.2rem}
.season-col + .season-col{border-left:2px solid var(--forest)}
.season-col .n{font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.9rem}
.season-col h3{font-size:1.5rem}
.season-col ul{list-style:none;padding:0;margin:1.3rem 0 0;columns:2 130px;column-gap:1.5rem}
.season-col li{font-family:var(--label);font-size:.82rem;letter-spacing:.05em;
  padding:.3rem 0;color:var(--forest-soft);break-inside:avoid}
.season-col li::before{content:"—";color:var(--gold);margin-right:.5rem}
@media (max-width:700px){
  .seasons{grid-template-columns:1fr}
  .season-col + .season-col{border-left:0;border-top:2px solid var(--forest)}
  .season-col ul{columns:2 110px}
}

/* Three photographs in a row, mixed proportions. */
.gallery-3{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
  gap:clamp(.6rem,1.2vw,1rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
@media (max-width:760px){.gallery-3{grid-template-columns:1fr 1fr}
  .gallery-3 figure:last-child{grid-column:span 2}}
@media (max-width:460px){.gallery-3{grid-template-columns:1fr}
  .gallery-3 figure:last-child{grid-column:auto}}

/* A feature photograph that is portrait rather than panoramic. */
.feature-tall .plate,.feature-tall .holder{aspect-ratio:4/5;max-width:760px;margin-inline:auto}
@media (max-width:700px){.feature-tall .plate,.feature-tall .holder{aspect-ratio:3/4}}

/* ============================================================
   RESORT GALLERY — filterable masonry
   ============================================================ */
.gal-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.4rem}
.gal-filter{font-family:var(--label);font-weight:600;font-size:.74rem;letter-spacing:.15em;
  text-transform:uppercase;padding:.62rem 1.1rem;cursor:pointer;
  background:transparent;color:var(--forest);border:2px solid var(--rule);
  transition:background .16s,color .16s,border-color .16s}
.gal-filter:hover{border-color:var(--gold)}
.gal-filter[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.on-dark .gal-filter{color:var(--paper);border-color:var(--rule-dark)}
.on-dark .gal-filter[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--forest)}

.masonry{--mg:clamp(.5rem,1.2vw,1rem);columns:2 150px;column-gap:var(--mg);margin-top:2.4rem}
@media (min-width:700px){.masonry{columns:3 220px}}
@media (min-width:1100px){.masonry{columns:4 260px}}
.masonry .gitem{break-inside:avoid;margin:0 0 var(--mg);display:block}
.masonry .gitem img{width:100%;height:auto}
.gitem[hidden]{display:none}
.gal-count{font-family:var(--label);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:1.6rem}

/* ============================================================
   ACCOMMODATION CARDS
   ============================================================ */
/* The places to stay sit in a horizontal rail rather than a tall grid, so the
   whole set can be browsed without scrolling past it. Native scroll-snap does
   the swiping; the arrows are for mouse users. No custom drag handler here —
   the cards are links, and a drag handler would fight the click. */
.stay-rail{position:relative;margin-top:3rem;
  --cw:78%;--cg:clamp(1rem,2vw,1.6rem)}
@media (min-width:700px){.stay-rail{--cw:46%}}
@media (min-width:1080px){.stay-rail{--cw:31%}}
.stays{display:flex;gap:var(--cg);overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.4rem}
.stays::-webkit-scrollbar{display:none}
.stays:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.stays > .stay-card{flex:0 0 var(--cw);scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){.stays{scroll-behavior:auto}}

.rail-nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.4rem}
.rail-btn{width:46px;height:46px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--label);font-weight:600;font-size:1.1rem;line-height:1;
  color:var(--forest);background:transparent;border:2px solid var(--forest);
  transition:background .16s,color .16s,opacity .16s}
.rail-btn:hover:not(:disabled){background:var(--forest);color:var(--paper)}
.rail-btn:disabled{opacity:.28;cursor:default}
.on-dark .rail-btn{color:var(--paper);border-color:var(--rule-dark)}
.on-dark .rail-btn:hover:not(:disabled){background:var(--gold);color:var(--forest);border-color:var(--gold)}

.stay-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:transparent;transition:transform .3s ease;
  /* A cap so the card can never stretch to full width and turn its 4:3 frame
     into a thousand pixels of empty scroll if the rail layout ever fails. */
  max-width:460px}
.stay-card:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.stay-card,.stay-card:hover{transform:none;transition:none}}
.stay-card .shot{position:relative;overflow:hidden;border:2px solid var(--forest);
  background:var(--paper-2);aspect-ratio:4/3}
.stay-card .shot img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02) contrast(1.03);transition:transform .5s ease}
.stay-card:hover .shot img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.stay-card .shot img,.stay-card:hover .shot img{transform:none;transition:none}}
.stay-card .kind{position:absolute;top:0;left:0;z-index:2;font-family:var(--label);font-weight:600;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--forest);color:var(--paper);padding:.5rem .8rem}
.stay-card h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:1.2rem 0 .5rem}
.stay-card .meta{font-family:var(--label);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.on-dark .stay-card .meta{color:var(--gold-light)}
.stay-card p{color:var(--forest-soft);font-size:.97rem;line-height:1.6;margin:0 0 1rem}
.on-dark .stay-card p{color:rgba(243,238,225,.76)}
.stay-card .go{margin-top:auto;font-family:var(--label);font-weight:600;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--forest);
  border-bottom:2px solid var(--gold);padding-bottom:3px;align-self:flex-start}
.on-dark .stay-card .go{color:var(--paper)}

/* ============================================================
   ACCOMMODATION PAGES
   ============================================================ */
.stay-hero{position:relative;background:var(--forest);overflow:hidden}
.stay-hero img{width:100%;height:clamp(320px,52vh,620px);object-fit:cover;
  filter:saturate(1.02) contrast(1.03)}
.stay-hero .holder{height:clamp(320px,52vh,620px);border:0;aspect-ratio:auto}
.stay-hero-in{position:absolute;inset:auto 0 0 0;padding:clamp(2rem,5vw,3.4rem) 0;
  background:linear-gradient(180deg,transparent,rgba(18,32,24,.86))}
.stay-hero h1{color:var(--paper);font-size:clamp(2.2rem,6vw,4.2rem);line-height:.94;
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.015em}
.stay-hero .eyebrow{color:var(--gold-light)}
.stay-hero .lede{color:rgba(243,238,225,.9);margin-top:1rem;max-width:44ch;
  font-size:clamp(1.02rem,1.1vw,1.2rem);font-weight:400}

.quickinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;border:2px solid var(--forest);margin-top:3rem}
.quickinfo div{padding:1.4rem 1.3rem;border-right:1px solid var(--rule-soft)}
.quickinfo div:last-child{border-right:0}
.quickinfo dt{font-family:var(--label);font-weight:500;font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.quickinfo dd{margin:0;font-family:var(--display);font-weight:400;font-size:1.05rem;
  text-transform:uppercase;line-height:1.15}
@media (max-width:620px){
  .quickinfo{grid-template-columns:1fr 1fr}
  .quickinfo div{border-bottom:1px solid var(--rule-soft)}
  .quickinfo div:nth-child(2n){border-right:0}
}

.amenities{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.2rem 2rem;margin-top:2.2rem;padding:0;list-style:none}
.amenities li{font-family:var(--label);font-size:.86rem;letter-spacing:.04em;
  padding:.55rem 0;border-bottom:1px solid var(--rule-soft);color:var(--forest-soft)}
.amenities li::before{content:"—";color:var(--gold);margin-right:.6rem}

.stay-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule-dark);border-block:1px solid var(--rule-dark);margin-top:3rem}
.stay-nav a{background:var(--forest);padding:1.6rem 1.4rem;text-decoration:none;
  transition:background .2s}
.stay-nav a:hover{background:#163B33}
.stay-nav .dir{display:block;font-family:var(--label);font-weight:600;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin-bottom:.6rem}
.stay-nav .nm{font-family:var(--display);font-weight:400;font-size:1.15rem;
  text-transform:uppercase;color:var(--paper);line-height:1.1}
.stay-nav a:last-child{text-align:right}
@media (max-width:560px){.stay-nav{grid-template-columns:1fr}.stay-nav a:last-child{text-align:left}}

/* ============================================================
   PHOTOGRAPHIC HERO + FULL-BLEED IMAGES
   ============================================================ */
.hero-photo{position:relative;background:var(--forest);overflow:hidden}
.hero-photo img{width:100%;height:clamp(360px,66vh,760px);object-fit:cover;
  filter:saturate(1.02) contrast(1.03)}
.hero-photo-in{position:absolute;inset:auto 0 0 0;padding:clamp(2.4rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.4rem);
  background:linear-gradient(180deg,transparent,rgba(15,26,20,.55) 45%,rgba(15,26,20,.88))}
.hero-photo .eyebrow{color:var(--gold-light)}
.hero-photo h1{color:var(--paper);font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.94;
  font-size:clamp(2.2rem,6.5vw,4.6rem);max-width:15ch}
.hero-photo .lede{color:rgba(243,238,225,.92);margin-top:1rem;max-width:40ch;
  font-size:clamp(1.05rem,1.2vw,1.3rem);font-weight:400}

/* An image given the full width of the window to breathe. */
.bleed{margin:0;position:relative}
.bleed img{width:100%;height:clamp(280px,52vh,620px);object-fit:cover;display:block;
  filter:saturate(1.02) contrast(1.03)}
.bleed figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 0 1rem;
  background:linear-gradient(180deg,transparent,rgba(18,32,24,.8))}
.bleed figcaption span{display:block;max-width:1240px;margin-inline:auto;
  padding-inline:var(--pad);
  font-family:var(--label);font-weight:500;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(243,238,225,.92)}

/* The overlapping skyline needs clearance here too, or it rides up over the
   hero caption exactly as it did over the page headers. */
.hero-photo:has(+ .ridge) .hero-photo-in{padding-bottom:calc(1.6rem + clamp(58px,9vw,132px))}
.hero-photo:has(+ .ridge.tall) .hero-photo-in{padding-bottom:calc(1.6rem + clamp(74px,11.5vw,168px))}
.bleed:has(+ .ridge) figcaption{padding-bottom:calc(1rem + clamp(58px,9vw,132px))}
.bleed:has(+ .ridge.tall) figcaption{padding-bottom:calc(1rem + clamp(74px,11.5vw,168px))}