/* ==========================================================================
   ASRAYA HOMESTAY
   Darjeeling, West Bengal

   Concept — "The Portal"
   Every room photograph in this house is composed around a sliding glass
   balcony door. The arch is not decoration borrowed from a moodboard; it is
   a description of the building. It recurs at every scale: hero, room
   portraits, gallery hover, and shrunk to a bullet.

   Contents
     01  Fonts
     02  Tokens
     03  Reset
     04  Base typography
     05  Layout primitives
     06  Components
     07  Header & navigation
     08  Footer
     09  Floating WhatsApp
     10  Utilities & motion
   ========================================================================== */


/* 01  FONTS ================================================================
   Both faces are variable — one 46KB + one 26KB file covers every weight.
   Bodoni Moda: a true Didone. Chosen over Playfair/Cormorant because the
   existing Asraya wordmark already *is* a high-contrast serif, and because
   Didone is the shared language of film title cards and fashion houses —
   which is exactly where a homestay named after screen actors sits.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-var-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-var-latin.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}


/* 02  TOKENS =============================================================== */

:root {
  /* ---- colour ---------------------------------------------------------- */
  --white:      #FFFFFF;   /* true white, not cream — sharper, more couture */
  --bone:       #FBFAF7;   /* alternate band, barely-there warmth           */
  --ink:        #0A0A0A;   /* full-bleed dark sections, display type        */
  --ink-soft:   #4A4844;   /* body text                                     */
  --gold:       #C9A227;   /* DECORATION ONLY — 2.4:1 on white, fails AA    */
  --gold-deep:  #8A6D1F;   /* gold text on white — 5.0:1, passes AA         */
  --gold-light: #E8D9A8;   /* gold text on ink   — 11:1, passes AAA         */

  --line:       rgba(10, 10, 10, .12);   /* hairline on light */
  --line-dark:  rgba(232, 217, 168, .22); /* hairline on ink  */

  --gold-leaf: linear-gradient(135deg,
                #BF953F 0%, #FCF6BA 22%, #B38728 45%,
                #FBF5B7 70%, #AA771C 100%);

  /* ---- type ------------------------------------------------------------ */
  --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Bodoni's hairlines vanish under 28px — nothing below --fs-h3 uses it. */
  /* Sized to fit a half-width column. 7vw/6.5rem overflowed: "to Relaxation"
     in a Didone runs ~6.2x the font size, wider than the column allows. */
  --fs-hero:    clamp(2.5rem, 4.6vw, 5rem);
  --fs-h1:      clamp(2.5rem, 5.2vw, 4.25rem);
  --fs-h2:      clamp(2rem, 4vw, 3.25rem);
  --fs-h3:      clamp(1.75rem, 2.6vw, 2.125rem);
  --fs-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9375rem;
  --fs-eyebrow: .75rem;
  --fs-chip:    .6875rem;

  --track-eyebrow: .28em;
  --track-billing: .18em;   /* room names — the title-card treatment */
  --track-chip:    .16em;
  --track-nav:     .2em;

  /* ---- space ----------------------------------------------------------- */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --maxw:    1320px;
  --measure: 62ch;
  --section: clamp(5rem, 10vw, 9rem);

  /* ---- form ------------------------------------------------------------ */
  --arch:   999px 999px 0 0;   /* semicircular top, straight sides & foot */
  --mount:  16px;              /* how far the gold mount sits out of register */
  --header: 88px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 760px) {
  :root { --header: 68px; --mount: 10px; }
}


/* 03  RESET ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 1.5rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold-light); color: var(--ink); }


/* 04  BASE TYPOGRAPHY ====================================================== */

.display {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  line-height: .98;
  letter-spacing: -.02em;
  font-optical-sizing: auto;
}

.display--hero { font-size: var(--fs-hero); line-height: .95; }
.display--h1   { font-size: var(--fs-h1); }
.display--h2   { font-size: var(--fs-h2); }
.display--h3   { font-size: var(--fs-h3); line-height: 1.1; }

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.65;
  max-width: 46ch;
}

.prose  { max-width: var(--measure); }
.prose p + p { margin-top: 1.25em; }

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* On ink, gold text must switch to the light tint to stay readable. */
.on-ink .eyebrow { color: var(--gold-light); }
.on-ink .display { color: var(--white); }
.on-ink          { color: rgba(255, 255, 255, .74); }


/* 05  LAYOUT PRIMITIVES ==================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 940px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .62); }
.section--bone  { background: var(--bone); }
.section--ink   { background: var(--ink); }


/* 06  COMPONENTS =========================================================== */

/* ---- 6.1  Star & rule ----------------------------------------------------
   The four-pointed star is lifted from the Asraya wordmark, not invented.
   Four points, four rooms. It replaces every generic bullet and divider.
   ------------------------------------------------------------------------ */

.star {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--star-shape) center / contain no-repeat;
          mask: var(--star-shape) center / contain no-repeat;
}

:root {
  --star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 2C32 19 37 27 62 32C37 37 32 45 32 62C32 45 27 37 2 32C27 27 32 19 32 2Z'/%3E%3C/svg%3E");
}

/* rule with the star set into it */
.rule {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--gold);
}
.rule::before,
.rule::after {
  content: '';
  height: 1px;
  flex: 1;
  background: currentColor;
  opacity: .5;
}
.rule .star { font-size: .6rem; }

.rule--left { justify-content: flex-start; }
.rule--left::before { display: none; }
.rule--left::after  { max-width: 88px; }

.on-ink .rule { color: var(--gold-light); }

/* Short hairline under an eyebrow. Uses the metallic gradient rather than
   flat gold — at 1px it reads as a struck line of leaf, not a coloured rule. */
.tick {
  display: block;
  width: 64px;
  height: 1px;
  margin-top: .9rem;
  background: var(--gold-leaf);
}
.on-ink .tick { background: var(--gold-light); opacity: .8; }


/* ---- 6.2  Buttons -------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 2.2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease);
}

.btn:hover {
  --btn-bg: var(--gold-deep);
  --btn-bd: var(--gold-deep);
  --btn-fg: var(--white);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
}
.btn--ghost:hover {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-bd: var(--ink);
}

/* the CALL NOW pill in the header — black + gold */
.btn--call {
  --btn-bg: var(--ink);
  --btn-fg: var(--gold-light);
  --btn-bd: var(--gold);
  padding: .85rem 1.6rem;
}
.btn--call:hover {
  --btn-bg: var(--gold-deep);
  --btn-fg: var(--white);
  --btn-bd: var(--gold-deep);
}

.btn--on-ink {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-bd: var(--white);
}
.btn--on-ink:hover {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: var(--gold);
}

/* quiet text link with a gold underline that wipes in */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: .35rem;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .5s var(--ease), color .4s var(--ease);
}
.tlink:hover { background-size: 100% 1px; color: var(--gold-deep); }
.tlink__arrow { transition: transform .4s var(--ease); }
.tlink:hover .tlink__arrow { transform: translateX(5px); }

.on-ink .tlink { color: var(--white); }
.on-ink .tlink:hover { color: var(--gold-light); }


/* ---- 6.3  The arch -------------------------------------------------------
   Signature element. A photograph inside a semicircular-topped frame, with a
   1px gold hairline arch offset 16px down-and-right — a passe-partout mount
   slightly out of register. The image parallaxes inside the fixed frame, so
   you read it as looking *through* an opening rather than at a picture.
   ------------------------------------------------------------------------ */

.arch {
  position: relative;
  isolation: isolate;
}

.arch__frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 100%;          /* lets an aspect-ratio on .arch actually govern */
  border-radius: var(--arch);
  background: var(--bone);
}

.arch__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* room for the parallax drift without exposing an edge */
  scale: 1.08;
  will-change: transform;
}

/* the offset gold mount */
.arch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate(var(--mount), var(--mount));
  border: 1px solid var(--gold);
  border-radius: var(--arch);
  pointer-events: none;
}

.arch--no-mount::after { display: none; }

/* a single stroked gold arc, set behind and larger — echoes the arch */
.arc {
  position: absolute;
  border: 1px solid var(--gold);
  border-radius: 999px;
  opacity: .32;
  pointer-events: none;
  z-index: -1;
}


/* ---- 6.4  Chips (room features) ------------------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.chip .star { font-size: .45rem; color: var(--gold); }

.on-ink .chip { color: rgba(255, 255, 255, .7); }
.on-ink .chip .star { color: var(--gold-light); }


/* ---- 6.5  Billing block (room name, title-card treatment) ---------------- */

.billing__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: var(--track-billing);
  text-transform: uppercase;
  color: var(--ink);
}
.on-ink .billing__name { color: var(--white); }


/* 07  HEADER & NAVIGATION ================================================== */

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .9rem 1.6rem;
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  transition: transform .3s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header);
  display: flex;
  align-items: center;
  transition: background .45s var(--ease), box-shadow .45s var(--ease);
}

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* transparent at the top, solid once scrolled */
.header--solid {
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
}

/* The drawer is a full-screen ink panel sitting *under* the header, so while
   it is open the header must go transparent and invert its type to white —
   otherwise ink-on-ink makes the logo and burger disappear. */
.header--open {
  background: transparent;
  box-shadow: none;
}
.header--open .logo,
.header--open .burger,
.header--open .nav__link { color: var(--white); }

/* ---- logo ---------------------------------------------------------------
   The supplied wordmark is white-only, so it is used as a CSS mask and
   tinted with currentColor. That lets one file be white over the hero and
   ink over the scrolled header. Visually-hidden text keeps it readable if
   the mask fails.
   ------------------------------------------------------------------------ */

/* Header type is ink on every page: the heroes are white, so white nav type
   would vanish. The header earns its separation from a shadow on scroll,
   not from a colour flip. */
.logo {
  display: block;
  color: var(--ink);
  transition: color .45s var(--ease);
}

.logo__mark {
  display: block;
  width: 112px;
  height: 53px;
  background-color: currentColor;
  -webkit-mask: url('../img/brand/logo.svg') left center / contain no-repeat;
          mask: url('../img/brand/logo.svg') left center / contain no-repeat;
}

@media (max-width: 760px) {
  .logo__mark { width: 88px; height: 42px; }
}

/* ---- nav ---------------------------------------------------------------- */

.nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.75rem); }

.nav__link {
  position: relative;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ink);
  padding-block: .4rem;
  transition: color .45s var(--ease);
}
.nav__link:hover { color: var(--gold-deep); }

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 1rem; }

/* ---- hamburger ---------------------------------------------------------- */

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--ink);
}
/* the drawer sits behind the header, so the burger stays ink while open */

.burger__box { display: block; width: 24px; height: 12px; position: relative; }
.burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger__box span:first-child { top: 0; }
.burger__box span:last-child  { bottom: 0; }

.header--open .burger__box span:first-child { transform: translateY(5.5px) rotate(45deg); }
.header--open .burger__box span:last-child  { transform: translateY(-5.5px) rotate(-45deg); }

/* ---- mobile drawer ------------------------------------------------------ */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  gap: 0;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.drawer[data-open='true'] { opacity: 1; visibility: visible; }

.drawer__list { text-align: center; }

.drawer__link {
  display: block;
  padding: 1rem 2rem;
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  transition: color .35s var(--ease);
}
.drawer__link:hover,
.drawer__link[aria-current='page'] { color: var(--gold-light); }

.drawer__foot {
  margin-top: 2.5rem;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}

@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: grid; }
}


/* 08  FOOTER =============================================================== */

.footer { background: var(--ink); color: rgba(255, 255, 255, .68); }

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.footer__logo {
  display: block;
  width: 132px;
  height: 62px;
  background-color: var(--white);
  -webkit-mask: url('../img/brand/logo.svg') left center / contain no-repeat;
          mask: url('../img/brand/logo.svg') left center / contain no-repeat;
}

.footer__title {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.4rem;
}

.footer__list { display: grid; gap: .7rem; font-size: var(--fs-small); }
.footer__list a { transition: color .3s var(--ease); }
.footer__list a:hover { color: var(--gold-light); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-chip);
  letter-spacing: .06em;
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__legal a:hover { color: var(--gold-light); }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr; gap: 2.75rem; }
}


/* 09  FLOATING WHATSAPP ====================================================
   Black + gold rather than WhatsApp green, so it reads as part of the design
   instead of a bolted-on widget. On the gallery page it shifts up to clear
   the filter pill (see .wa--raised).
   ------------------------------------------------------------------------ */

.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 4px 0 0;
  background: var(--ink);
  color: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: 999px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              visibility .45s, gap .45s var(--ease), padding .45s var(--ease);
}
.wa[data-visible='true'] { opacity: 1; visibility: visible; transform: none; }

.wa__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
}
.wa__icon svg { width: 25px; height: 25px; fill: currentColor; }

.wa__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  transition: max-width .45s var(--ease);
}

.wa:hover, .wa:focus-visible { gap: .25rem; padding-right: 1.5rem; }
.wa:hover .wa__label, .wa:focus-visible .wa__label { max-width: 170px; }

/* soft gold ring, breathing */
.wa__ring {
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: ring 3.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes ring {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.28); }
  100% { opacity: 0;   transform: scale(1.28); }
}

.wa--raised { bottom: calc(clamp(1rem, 3vw, 2rem) + 76px); }


/* 10  UTILITIES & MOTION =================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* scroll reveal — JS adds [data-reveal] then flips to is-in */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

/* locks scroll behind the drawer and lightbox */
.is-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-stagger] > * { opacity: 1; transform: none; }

  .arch__frame img { scale: 1; }
  .wa__ring { display: none; }
}


/* ==========================================================================
   11  HOMEPAGE
   The page walks through a day at Asraya. It opens in true white — crisp and
   airy — and resolves into full-bleed ink for the night photography and the
   closing booking band. The photo set falls that way naturally: midday
   valley, golden hour, dusk, town lights.
   ========================================================================== */

/* ---- 11.1  Hero ---------------------------------------------------------- */

.hero {
  padding-top: calc(var(--header) + clamp(2rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}

/* Even halves: copy left, portal right, with real air between them. */
.hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

/* No max-width here: the grid column is the measure. A ch-based cap was
   throttling the column to ~256px and forcing the headline to overflow. */
.hero__intro {
  min-width: 0;
  container-type: inline-size;
}

/* Sized against the column rather than the viewport, so "to Relaxation"
   can never outrun its half of the grid at any width. Browsers without
   cqw drop this line and fall back to the vw-based --fs-hero. */
.hero__title {
  margin-top: 2rem;
  font-size: clamp(2.25rem, 15cqw, 5rem);
  overflow-wrap: break-word;
}
.hero__lead { margin-top: 1.75rem; max-width: 34ch; }

.hero__cta {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.hero__arch {
  width: 100%;
  aspect-ratio: 4 / 4.5;
  /* keeps the portal from running past the fold on short/wide screens */
  max-height: min(76svh, 700px);
}
.hero__arch .arch__frame { height: 100%; }
.hero__arch img { object-position: 56% 55%; }

/* the single stroked arc, tucked behind the portal on its own side */
.hero__arc {
  width: 94%;
  aspect-ratio: 1;
  right: -15%;
  bottom: -11%;
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .hero__arch {
    aspect-ratio: 4 / 4.1;
    max-width: 440px;
    max-height: none;
    margin-inline: auto;
  }
  .hero__arc { width: 86%; right: -10%; bottom: -8%; }
}


/* ---- 11.3  The mount ------------------------------------------------------
   Same out-of-register gold hairline as the arch, on a square-cornered
   image. A variation on the signature rather than a fourth repeat of it.
   ------------------------------------------------------------------------ */

.mount { position: relative; isolation: isolate; }
.mount__frame { position: relative; z-index: 1; overflow: hidden; height: 100%; }
.mount__frame img { width: 100%; height: 100%; object-fit: cover; scale: 1.06; will-change: transform; }
.mount::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate(var(--mount), var(--mount));
  border: 1px solid var(--gold);
  pointer-events: none;
}
.mount--flip::after { transform: translate(calc(var(--mount) * -1), var(--mount)); }


/* ---- 11.4  Split (image + prose) ----------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.split__media { aspect-ratio: 4 / 3.2; }
.split__body .display--h2 { margin-top: 1.5rem; }
.split__body .prose { margin-top: 1.75rem; }
.split__body .tlink { margin-top: 2.25rem; }

/* reverse column order without breaking DOM/reading order */
.split--reverse .split__media { order: 2; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse .split__media { order: 0; }
}


/* ---- 11.5  Section heading ----------------------------------------------- */

.shead { max-width: 58ch; }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .tick { margin-inline: auto; }
.shead__title { margin-top: 1.5rem; }
.shead__sub { margin-top: 1.25rem; }

.shead--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  max-width: none;
}


/* ---- 11.6  Room cards ----------------------------------------------------- */

.rooms-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.rcard { display: block; }
.rcard__media { aspect-ratio: 3 / 4; --mount: 10px; }
.rcard__media img { transition: scale 1.1s var(--ease); }
.rcard:hover .rcard__media img { scale: 1.14; }

.rcard__name {
  margin-top: 1.5rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.rcard__note {
  margin-top: .75rem;
  font-size: var(--fs-small);
  line-height: 1.6;
}
.rcard__more {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.rcard:hover .rcard__more { color: var(--ink); }

@media (max-width: 1024px) { .rooms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .rooms-grid { grid-template-columns: 1fr; } .rcard__media { aspect-ratio: 4/3.4; } }


/* ---- 11.7  Facilities ----------------------------------------------------- */

.fac-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.fac {
  background: var(--white);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2vw, 2rem);
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  transition: background .5s var(--ease);
}
.fac:hover { background: var(--bone); }
.section--bone .fac { background: var(--bone); }
.section--bone .fac:hover { background: var(--white); }

.fac__icon { width: 34px; height: 34px; color: var(--gold-deep); }
.fac__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; }

.fac__name {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}

@media (max-width: 900px) { .fac-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .fac-grid { grid-template-columns: 1fr; } }


/* ---- 11.8  Mosaic (homepage gallery strip) -------------------------------- */

/* Row height set 20% below the 215px that would give a 2x2 tile its native
   4:3. The big tiles crop to a gentle 1.66 landscape instead — still generous,
   but the strip no longer dominates the page. */
.mosaic {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(104px, 13.2vw, 172px);
  gap: clamp(.5rem, 1vw, .875rem);
}

.mtile {
  position: relative;
  overflow: hidden;
  background: var(--bone);
}
.mtile img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.mtile:hover img { scale: 1.07; }

.mtile--tall { grid-row: span 2; }
.mtile--wide { grid-column: span 2; }

/* the arch draws down over the tile on hover */
.mtile__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.62), rgba(10,10,10,0) 55%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.mtile:hover .mtile__veil { opacity: 1; }

.mtile__cap {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mtile:hover .mtile__cap { opacity: 1; transform: none; }

@media (max-width: 760px) {
  /* matching 20% reduction at 2 columns */
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(92px, 27vw, 192px); }
  .mtile--wide { grid-column: span 2; }
}


/* ---- 11.9  Ink feature band ---------------------------------------------- */

.feature { position: relative; overflow: hidden; }

.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.feature__media { aspect-ratio: 4 / 3; }
.feature__media .mount__frame { border: 1px solid rgba(232,217,168,.16); }
.feature .mount::after { border-color: var(--gold-light); opacity: .55; }

@media (max-width: 860px) {
  .feature__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}


/* ---- 11.10  Booking band -------------------------------------------------- */

.booking { border-top: 1px solid var(--line-dark); text-align: center; }
.booking__title { margin-top: 1.5rem; }
.booking__sub { margin-top: 1.25rem; margin-inline: auto; }

.booking__numbers {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem clamp(1.5rem, 4vw, 3.5rem);
}

.booking__num {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  letter-spacing: .04em;
  color: var(--white);
  padding-bottom: .3rem;
  background-image: linear-gradient(var(--gold-light), var(--gold-light));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .5s var(--ease), color .4s var(--ease);
}
.booking__num:hover { background-size: 100% 1px; color: var(--gold-light); }

.booking__cta {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
}


/* ---- 11.11  Hero load sequence -------------------------------------------
   The one orchestrated moment on the site: the arch opens from a slit while
   the headline lines rise behind it. All initial states are scoped under
   `.js`, which an inline head script sets — so with JavaScript disabled the
   hero simply renders, fully visible, with no animation and no flash.
   ------------------------------------------------------------------------ */

.js .hero__arch .arch__frame {
  clip-path: inset(0 44% 0 44%);
  transition: clip-path 1.15s var(--ease) .08s;
}
.js .hero__arch.is-open .arch__frame { clip-path: inset(0 0 0 0); }

.js .hero__arch::after,
.js .hero__arc {
  opacity: 0;
  transition: opacity .9s var(--ease) .7s;
}
.js .hero__arch.is-open::after { opacity: 1; }
.js .hero__arch.is-open .hero__arc { opacity: .32; }

.js .hero__title .word {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.js .hero__title .word:nth-child(2) { transition-delay: .09s; }
.js .hero__title.is-open .word { opacity: 1; transform: none; }

.hero__title .word { display: block; }

@media (prefers-reduced-motion: reduce) {
  .js .hero__arch .arch__frame { clip-path: none; }
  .js .hero__arch::after { opacity: 1; }
  .js .hero__arc { opacity: .32; }
  .js .hero__title .word { opacity: 1; transform: none; }
}


/* ---- 11.12  Narrow-viewport header --------------------------------------
   At 360px the logo, Call Now pill and burger have to share one line.
   ------------------------------------------------------------------------ */

@media (max-width: 420px) {
  .btn--call { padding: .75rem 1.1rem; letter-spacing: .16em; font-size: .6875rem; }
  .header__inner { gap: .75rem; }
  .header__actions { gap: .35rem; }
}


/* ==========================================================================
   12  INNER PAGES
   ========================================================================== */

/* ---- 12.1  Page head ------------------------------------------------------
   A compact version of the hero: the arch stays, at roughly half scale, so
   inner pages read as the same house without repeating the full overture.
   ------------------------------------------------------------------------ */

.phead {
  padding-top: calc(var(--header) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.phead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
  align-items: end;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.phead__title { margin-top: 1.75rem; }
.phead__media { aspect-ratio: 4 / 4.3; }
.phead__lead  { margin-top: 1.75rem; }

@media (max-width: 980px) {
  .phead__grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
}

@media (max-width: 820px) {
  .phead__grid { grid-template-columns: 1fr; align-items: start; }
  .phead__media { max-width: 420px; aspect-ratio: 4 / 3.9; }
}


/* ---- 12.2  Namesakes ------------------------------------------------------ */

.names {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border-block: 1px solid var(--line-dark);
}

.name {
  background: var(--ink);
  padding: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 1.75rem);
  display: grid;
  gap: .9rem;
  align-content: start;
}

.name__star { font-size: .8rem; color: var(--gold-light); }

.name__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}

.name__note { font-size: var(--fs-small); line-height: 1.6; }

.name .rcard__more { color: var(--gold-light); }
.name .rcard__more:hover { color: var(--white); }

@media (max-width: 900px) { .names { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .names { grid-template-columns: 1fr; } }


/* ---- 12.3  Elevation list -------------------------------------------------
   The house sits between two landmarks. This is the one place on the site
   where ordering carries real information, so it is an <ol> and it is drawn
   as a vertical descent rather than a plain list.
   ------------------------------------------------------------------------ */

.elev {
  margin-top: 2rem;
  display: grid;
  gap: 0;
  border-left: 1px solid var(--line);
}

.elev__step {
  position: relative;
  padding: 1.1rem 0 1.1rem 2rem;
}
.elev__step::before {
  content: '';
  position: absolute;
  left: -4px; top: 1.55rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--gold);
}
.elev__step--here::before { background: var(--gold); }

.elev__label {
  display: block;
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.elev__place {
  display: block;
  margin-top: .25rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.elev__step--here .elev__place {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: var(--ink);
}


/* ---- 12.4  Room blocks ----------------------------------------------------
   Alternating full-width blocks. The name is set as a billing card: Didone
   caps, wide tracking, a gold hairline broken by the wordmark's star. No
   numbering — the rooms are not a sequence, so numbers would be decoration
   pretending to be information.
   ------------------------------------------------------------------------ */

.room__media { aspect-ratio: 3 / 3.6; }
.room__rule  { margin-top: 1.5rem; max-width: 260px; }
.room__prose { margin-top: 1.75rem; }
.room__chips { margin-top: 1.75rem; }
.room__btn   { margin-top: 2.25rem; }

@media (max-width: 860px) {
  .room__media { aspect-ratio: 4 / 3.6; max-width: 520px; }
}


/* ---- 12.5  Amenities list ------------------------------------------------- */

.amen {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem 2rem;
}

.amen__item {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .78);
}
.amen__item .star { font-size: .45rem; color: var(--gold-light); }

@media (max-width: 900px) { .amen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .amen { grid-template-columns: 1fr; } }


/* ==========================================================================
   13  GALLERY
   ========================================================================== */

.ghead {
  padding-top: calc(var(--header) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.ghead__title { margin-top: 1.75rem; }
.ghead__lead  { margin-top: 1.75rem; }

.gsection {
  padding-bottom: clamp(7rem, 12vw, 10rem);   /* clearance for the filter pill */
}


/* ---- 13.1  Mosaic ---------------------------------------------------------
   Columns of real aspect ratios rather than a uniform square grid, so a
   portrait room shot is not cropped to match a landscape view.
   ------------------------------------------------------------------------ */

/* A bento grid, not columns. The twelve tiles carry spans that total exactly
   20 cells — 4 columns x 5 rows — so the block resolves to a clean rectangle
   with flush edges on all four sides. CSS columns were leaving a ragged
   bottom, which is what made the earlier version look broken.

   The same spans also tile perfectly at 2 columns (20 cells = 2 x 10 rows).
   Row height tracks column width via 22vw, so 1x1 tiles stay square. */
.gmosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(110px, 22vw, 290px);
  gap: clamp(.5rem, 1vw, .875rem);
}

.gtile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: var(--bone);
  cursor: zoom-in;
  border-radius: 0;
}

/* tile sizes — the one portrait photograph gets the tall cell */
.g--2x2 { grid-column: span 2; grid-row: span 2; }
.g--1x2 { grid-row: span 2; }
.g--2x1 { grid-column: span 2; }

/* Filtering breaks any bento arrangement, so a filtered view drops every
   span and falls back to a tidy uniform grid rather than a gappy one. */
.gmosaic[data-filtered='true'] .gtile {
  grid-column: span 1;
  grid-row: span 1;
}

.gtile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.1s var(--ease), filter .6s var(--ease);
}
.gtile:hover img,
.gtile:focus-visible img { scale: 1.06; filter: saturate(.92); }

/* the arch draws down over the tile — the signature at its smallest scale */
.gtile__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.68), rgba(10,10,10,0) 58%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.gtile:hover .gtile__veil,
.gtile:focus-visible .gtile__veil { opacity: 1; }

.gtile__cap {
  position: absolute;
  left: 1rem; right: 1rem; bottom: .9rem;
  text-align: left;
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.gtile:hover .gtile__cap,
.gtile:focus-visible .gtile__cap { opacity: 1; transform: none; }

/* 2 columns: the same spans still total 20 cells, so it stays a rectangle. */
@media (max-width: 900px) {
  .gmosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(130px, 44vw, 300px);
  }
}

/* 1 column: spans are meaningless, so every photo gets an equal 4:3 cell. */
@media (max-width: 520px) {
  .gmosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .gtile { aspect-ratio: 4 / 3; }
  .g--2x2, .g--1x2, .g--2x1 { grid-column: span 1; grid-row: span 1; }
}


/* ---- 13.2  Floating filter pill ------------------------------------------- */

.filters {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  transform: translateX(-50%);
  z-index: 75;
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .35rem;
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(10, 10, 10, .88);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
}
.filters::-webkit-scrollbar { display: none; }

.filter {
  position: relative;
  z-index: 1;
  flex: none;
  padding: .7rem 1.15rem;
  border-radius: 999px;
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
  transition: color .35s var(--ease);
}
.filter:hover { color: var(--white); }
.filter[aria-pressed='true'] { color: var(--ink); }

/* the gold pill that slides behind the active filter */
.filter-ind {
  position: absolute;
  z-index: 0;
  top: .35rem;
  left: 0;
  height: calc(100% - .7rem);
  border-radius: 999px;
  background: var(--gold-light);
  transition: transform .45s var(--ease), width .45s var(--ease);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .filter-ind { transition: none; }
}


/* ---- 13.3  Lightbox -------------------------------------------------------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(6, 6, 6, .97);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.lb[data-open='true'] { opacity: 1; visibility: visible; }

.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
}

.lb__count {
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  color: var(--gold-light);
}

.lb__close {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--white);
  border: 1px solid var(--line-dark);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lb__close:hover { background: var(--white); color: var(--ink); }

.lb__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: 0 clamp(.5rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
  min-height: 0;
}

.lb__nav {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--white);
  border: 1px solid var(--line-dark);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lb__nav:hover { background: var(--gold-light); color: var(--ink); border-color: var(--gold-light); }

.lb__figure {
  display: grid;
  gap: 1rem;
  justify-items: center;
  min-height: 0;
  height: 100%;
  align-content: center;
}

.lb__img {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  width: auto;
  object-fit: contain;
}

.lb__cap {
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 620px) {
  .lb__nav { width: 40px; height: 40px; }
  .lb__img { max-height: calc(100vh - 210px); }
}


/* ==========================================================================
   14  CONTACT
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
}


/* ---- 14.1  Info blocks ---------------------------------------------------- */

.cblock { margin-top: 2.25rem; }

.cblock__title {
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .6rem;
}

.cblock__body { font-size: var(--fs-small); line-height: 1.8; display: grid; gap: .15rem; }

.clink {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--ease), color .3s var(--ease);
  color: var(--ink);
}
.clink:hover { background-size: 100% 1px; color: var(--gold-deep); }


/* ---- 14.2  Form ------------------------------------------------------------
   No backend: on submit this validates, formats a readable message and hands
   off to WhatsApp. Errors are inline, announced, and clear as soon as the
   guest starts fixing them.
   -------------------------------------------------------------------------- */

.form__intro {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 44ch;
}

#enquiry { margin-top: 2rem; }

.field { margin-bottom: 1.35rem; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
}
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}

.field__label {
  display: block;
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: var(--track-chip);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .55rem;
}

.field__input {
  width: 100%;
  padding: .95rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color .35s var(--ease);
  -webkit-appearance: none;
          appearance: none;
}
.field__input:hover  { border-bottom-color: rgba(10, 10, 10, .3); }
.field__input:focus  { outline: none; border-bottom-color: var(--gold-deep); }
.field__input:focus-visible { outline: none; }

.field__input--area { resize: vertical; min-height: 120px; padding-top: .75rem; }

.field__input::placeholder { color: rgba(74, 72, 68, .45); }

/* native date/select controls need a nudge to match the rest */
.field__input[type='date'] { min-height: 3.2rem; }
select.field__input {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
}

.field__error {
  margin-top: .4rem;
  font-size: var(--fs-chip);
  letter-spacing: .04em;
  color: #A03A2B;          /* 5.6:1 on white — passes AA */
  min-height: 1em;
}
.field--invalid .field__input { border-bottom-color: #A03A2B; }

.form__submit { margin-top: .75rem; width: 100%; }
.form__wa { width: auto; height: auto; }

.form__fallback,
.form__alt {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.form__fallback { color: #A03A2B; }


/* ---- 14.3  Map ------------------------------------------------------------- */

.mapframe {
  margin-top: clamp(2rem, 4vw, 3rem);
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border: 1px solid var(--line);
}
.mapframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(.95);
  transition: filter .6s var(--ease);
}
.mapframe:hover iframe { filter: none; }

@media (max-width: 700px) {
  .mapframe { aspect-ratio: 4 / 3; }
  .mapframe iframe { filter: none; }   /* no hover on touch — show it in colour */
}


/* ==========================================================================
   15  ANCHOR TARGETS & LOOSE ENDS
   ========================================================================== */

/* Deep links from the homepage room cards (#erick-avari etc.) must not land
   underneath the fixed header. */
.room { scroll-margin-top: calc(var(--header) + 2rem); }
#get-in-touch { scroll-margin-top: calc(var(--header) + 1rem); }

/* The contact details column tracks the form on tall desktop viewports. */
@media (min-width: 901px) {
  .contact__info { position: sticky; top: calc(var(--header) + 2.5rem); }
}
.contact__form { min-width: 0; }

/* Lightbox arrows sit either side of the stage; order is set by the grid,
   these keep them from shrinking on narrow screens. */
.lb__prev, .lb__next { flex: none; justify-self: center; }

/* Retracted once the mosaic scrolls out of view (set by main.js). */
.filters {
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.filters[data-away='true'] {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(16px);
}

/* Build credit, sitting between the copyright and the legal links. */
.footer__craft a {
  color: var(--gold-light);
  background-image: linear-gradient(var(--gold-light), var(--gold-light));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--ease);
}
.footer__craft a:hover { background-size: 100% 1px; }


/* ---- 14.4  Occupancy note -------------------------------------------------
   Three guests is a hard limit per room, so it is stated on every room block
   rather than buried in a policy page — it changes whether a family books.
   ------------------------------------------------------------------------ */

.note {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--bone);
  border-left: 2px solid var(--gold);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-soft);
}
.note strong { color: var(--ink); font-weight: 500; }
.note__star { font-size: .5rem; color: var(--gold-deep); position: relative; top: -.15em; }

/* the note sits on bone in alternating sections, so flip it there */
.section--bone .note { background: var(--white); }


/* ---- 14.5  Field annotations ---------------------------------------------- */

.field__opt,
.field__hint {
  margin-left: .5rem;
  font-size: var(--fs-chip);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(74, 72, 68, .6);
}

/* a disabled placeholder option should read as a prompt, not a value */
select.field__input:has(option[value=""]:checked) { color: rgba(74, 72, 68, .55); }