/* Template: Residency — the editorial one.
   Deep brand bands alternating with pale ground, a crest hero, cards that lift.
   Reads as a hotel with a lobby. This is the original design, held as a pack. */

.sec+.sec{border-top:1px solid var(--line)}
.band{background:var(--band);color:var(--on-band);border-top:0}
.band h1,.band h2,.band h3{color:var(--on-band)}
.band p,.band .lede{color:var(--on-band-muted)}
.band .eyebrow{color:var(--accent-on-band)}
.band .card{background:transparent;border-color:var(--on-band-muted)}
.band .reasons li{color:var(--on-band-muted)}
.band .btn-ghost{border-color:var(--on-band-muted);color:var(--on-band)}
.band .stat span{color:var(--on-band-muted)}

.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .8rem}
.lede{font-size:1.1rem;color:var(--ink-2)}

/* hero: a full-bleed photograph, and the words underneath it.

   Two earlier arrangements are worth remembering. The first laid the
   photograph under the whole section at 42% opacity with the type on top: the
   picture was too dark to see the hotel in and the headline sat on whatever
   happened to be behind it. The second framed the picture beside the type,
   which fixed the reading but made each half share a page. This one gives the
   photograph the full width and gives the words their own band below, where
   measure and contrast are ours to set. */
.hero{position:relative;background:var(--band-deep);color:var(--on-band);overflow:hidden}

/* the picture: edge to edge, no type on it, sized by viewport rather than by
   the image so a tall or narrow original cannot dictate the page */
.hero-cover{padding:0;min-height:clamp(300px,54vh,600px);display:grid}
.hero-shot{position:relative;grid-area:1/1;min-height:inherit}
.hero-shot img,.hero-shot video{width:100%;height:100%;min-height:inherit;
  object-fit:cover;opacity:1}
/* the picture meets the band below rather than stopping at a hard edge */
.hero-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  pointer-events:none;background:linear-gradient(to bottom,transparent,
    color-mix(in oklab, var(--band-deep) 82%, transparent))}

/* the words: their own band directly under the picture */
.hero-intro{position:relative;background:var(--band-deep);color:var(--on-band);
  padding:clamp(34px,4.5vw,60px) 0 clamp(42px,6vw,78px)}
.hero-intro .hero-copy{max-width:60rem}
.hero-intro h1{color:var(--on-band);max-width:20ch}
.hero-intro .lede{color:var(--on-band-muted);max-width:60ch;margin-top:1rem}
.hero-intro+.sec{border-top:1px solid var(--line)}
.hero .room-meta,.hero-intro .room-meta{color:var(--on-band-muted)}

/* the second action is on a dark band, where the shared ghost button is ink on
   paper - it was there and unreadable. On the band it borrows the band's own
   contrast pair. */
.hero .btn-ghost,.hero-intro .btn-ghost{
  border-color:color-mix(in oklab, var(--on-band-muted) 70%, transparent);
  color:var(--on-band);background:transparent}
.hero .btn-ghost:hover,.hero-intro .btn-ghost:hover{border-color:var(--on-band);
  background:color-mix(in oklab, var(--on-band) 12%, transparent)}

/* a page that puts the booking widget in the hero keeps it out of the picture */
.hero .booking,.hero-intro .booking{position:relative;z-index:1;margin-top:2.4rem;
  max-width:840px;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}

/* room and offer detail pages still set their own type beside a framed still */
.hero-inner{position:relative;display:grid;gap:clamp(24px,3.5vw,48px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;
  padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(52px,7vw,96px)}
.hero-copy{position:relative;z-index:1}
.hero-inner .hero-copy{max-width:30rem}
.hero h1{color:var(--on-band)}
.hero-inner h1{max-width:17ch}
.hero .lede{color:var(--on-band-muted)}
.hero-inner .lede{max-width:38ch;margin-top:1rem}
.hero-media{position:relative;z-index:1;order:2;aspect-ratio:16/11;overflow:hidden;
  border-radius:calc(var(--radius) * 2);
  border:1px solid color-mix(in oklab, var(--on-band-muted) 42%, transparent);
  box-shadow:0 34px 64px -34px rgba(0,0,0,.75)}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:1}

/* no photograph: one column, the crest washing the band behind the type */
.hero-crest{
  background:
    radial-gradient(120% 90% at 78% 12%, color-mix(in oklab, var(--accent-on-band) 16%, transparent), transparent 60%),
    radial-gradient(90% 70% at 12% 92%, color-mix(in oklab, var(--band) 70%, transparent), transparent 65%),
    var(--band-deep);
}
.hero-crest .hero-inner{grid-template-columns:minmax(0,1fr)}
.hero-crest .hero-copy{max-width:44rem}
.hero-crest h1{max-width:20ch}
.hero-crest .lede{max-width:52ch}
.hero-crest::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 22px,
    color-mix(in oklab, var(--accent-on-band) 6%, transparent) 22px 23px);opacity:.5}
.crest{position:absolute;right:clamp(-40px,2vw,40px);top:50%;transform:translateY(-50%);
  width:min(42vw,430px);opacity:.16;pointer-events:none;z-index:0}
.crest img{width:100%;height:auto;mix-blend-mode:screen}

@media(max-width:860px){
  .hero-cover{min-height:clamp(240px,42vh,380px)}
  .hero-inner,.hero-crest .hero-inner{grid-template-columns:minmax(0,1fr);
    padding-top:44px;padding-bottom:44px}
  .hero-inner .hero-copy{max-width:none}
  .hero-media{order:0;aspect-ratio:16/10}
  .crest{right:-18%;width:74vw;opacity:.11}
  .hero .booking,.hero-intro .booking{margin-top:1.8rem}
}

/* cards: a lift, a push into the image, and an accent rule drawn along the
   bottom edge - the tell that the whole card is a link */
.card{position:relative;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.card img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.card:hover,.card:focus-within{transform:translateY(-4px);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.45)}
.card:hover::after,.card:focus-within::after{transform:scaleX(1)}
.card:hover img,.card:focus-within img{transform:scale(1.045)}
.card:hover h3 a{color:var(--accent)}

.offer-card .body{display:grid;gap:.2rem}
.offer-badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--accent);
  color:var(--surface);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.34em .7em;border-radius:2px;font-weight:600}
.offer-until{font-size:.82rem;color:var(--muted);margin-top:.35rem}
.offer-code{display:inline-block;margin-top:.5rem;font-family:var(--font-display);
  font-size:1.05rem;letter-spacing:.06em;color:var(--accent);
  border:1px dashed var(--accent);border-radius:3px;padding:.22em .6em}

.quote{border-left:2px solid var(--accent);padding-left:18px}
.quote p{font-family:var(--font-display);font-size:1.1rem;color:var(--ink)}
.quote cite{font-style:normal;font-size:.85rem;color:var(--muted)}

footer.site-foot{background:var(--band-deep);color:var(--on-band-muted)}
footer.site-foot a{color:var(--on-band);text-decoration:none}
footer.site-foot h3{color:var(--on-band);font-size:1rem;font-family:var(--font-body);font-weight:600}
.foot-legal{border-top:1px solid var(--on-band-muted);opacity:.85}

@media (prefers-reduced-motion:reduce){
  .card,.card img,.card::after{transition:none}
  .card:hover{transform:none}
  .card:hover img{transform:none}
}
@media(hover:none){
  .card:hover{transform:none;box-shadow:none}
  .card:hover img{transform:none}
}