/* ================================================================
   THE RESIDENT SUITE  ·  v2
   Palette supplied by Caitlyn, eyedropped from her own photographs.
   ================================================================ */

:root {
  /* ---- primary ---- */
  --cream:      #FDF8F2;
  --cream-2:    #F6EFE5;
  --cream-3:    #EDE4D6;

  /* ---- secondary, from IMG_8462 ---- */
  --aqua:       #A9D1D0;
  --aqua-soft:  #D3E6E5;
  --teal:       #137D7F;
  --teal-deep:  #0D5B5C;

  /* ---- text, from the leaf shadows in IMG_8428 ---- */
  --ink:        #1D2000;
  --ink-70:     rgba(29, 32, 0, 0.72);
  --ink-45:     rgba(29, 32, 0, 0.48);
  --line:       rgba(29, 32, 0, 0.14);

  --white:      #FFFFFF;
  --white-80:   rgba(255, 255, 255, 0.82);
  --white-55:   rgba(255, 255, 255, 0.58);

  /* ---- type ---- */
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --script:  'Pinyon Script', 'Bodoni Moda', cursive;
  --body:    'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ---- rhythm ---- */
  --wrap:    min(1240px, 100% - 2 * var(--gutter));
  --wrap-wide: min(1560px, 100% - 2 * var(--gutter));
  --gutter:  clamp(1.15rem, 3.6vw, 3.25rem);
  --section: clamp(3.2rem, 6vw, 6.5rem);

  --s--2: clamp(0.68rem, 0.66rem + 0.1vw, 0.75rem);
  --s--1: clamp(0.84rem, 0.81rem + 0.16vw, 0.94rem);
  --s-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --s-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.55rem);
  --s-2:  clamp(1.65rem, 1.4rem + 1.1vw, 2.5rem);
  --s-3:  clamp(2.2rem, 1.7rem + 2.2vw, 3.9rem);
  --s-4:  clamp(2.8rem, 1.9rem + 4vw, 5.8rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--s-0);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.skip {
  position: absolute; left: .5rem; top: -100px; z-index: 300;
  background: var(--teal); color: #fff; padding: .7rem 1.1rem;
  font-size: var(--s--2); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: .5rem; }

/* ---------- layout ---------- */
.wrap  { width: var(--wrap); margin-inline: auto; }
.wrapw { width: var(--wrap-wide); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2rem, 3.5vw, 3.2rem); }
.booking { background: var(--teal); color: var(--cream); }
.booking .muted { color: rgba(253,248,242,.80); }
.booking .booking a { color: var(--cream); }
.booking .field label { color: rgba(253,248,242,.86); }
/* Field colours are measured against the teal panel, not guessed.
   Background is an ink wash rather than a cream wash: the old 10% cream put
   cream text at 3.94:1, under the 4.5:1 minimum. A 25% ink wash reads 6.41:1. */
.booking .field input, .booking .field textarea, .booking .field select {
  background: rgba(29,32,0,.25); border-color: rgba(253,248,242,.55); color: var(--cream);
}
.booking .field input:focus, .booking .field textarea:focus, .booking .field select:focus { border-color: var(--aqua); }
.booking .field input::placeholder, .booking .field textarea::placeholder { color: rgba(253,248,242,.80); }
.booking .btn { background: var(--cream); color: var(--ink); }
.booking .btn:hover { background: #fff; }
.booking .faq details { border-bottom-color: rgba(253,248,242,.24); }
.booking .faq summary::after { color: var(--aqua); }
.booking .notice { border-color: var(--aqua); background: rgba(169,209,208,.12); color: rgba(253,248,242,.86); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.06; text-wrap: balance; }
h1 { font-size: var(--s-4); }
h2 { font-size: var(--s-3); }
h3 { font-size: var(--s-1); }
.caps { text-transform: uppercase; letter-spacing: .07em; line-height: 1.14; }
.script { font-family: var(--script); font-size: var(--s-2); line-height: 1.3; text-transform: none; letter-spacing: 0; }

p { text-wrap: pretty; max-width: 64ch; }
.lede { font-size: var(--s-1); line-height: 1.5; }
.muted { color: var(--ink-70); }

/* the treatment from the hero subcopy, reused site-wide */
.eyeline {
  font-family: var(--body); font-weight: 400;
  font-size: var(--s--1); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-45);
}
.booking .eyeline { color: rgba(253,248,242,.72); }
.eyeline--sm { font-size: var(--s--2); letter-spacing: .26em; }

.center { text-align: center; }
/* p carries a global max-width of 64ch. Without an auto inline margin that box
   pins to the left, so centered text centers inside the box and not on the page.
   p.center covers a paragraph that is itself the centered element. */
.center p, .center .lede, p.center { margin-inline: auto; }
.stack > * + * { margin-top: 1.05rem; }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 1.7rem; }
.mt-l { margin-top: clamp(1.8rem, 3.4vw, 2.9rem); }


/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem var(--gutter);
  transition: background .34s var(--ease), border-color .34s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(253, 248, 242, .94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.brand {
  font-family: var(--display); font-size: var(--s--1);
  letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.9rem); }
.nav__links a {
  text-decoration: none; font-size: var(--s--2); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-70);
  transition: color .2s var(--ease);
}
.nav__links a:hover { color: var(--teal); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links .navcta { color: inherit; }
.nav__links .navcta:hover { color: var(--teal); }
.nav--over .brand, .nav--over .nav__links a { color: var(--white); }
.nav--over .nav__links a:hover { color: var(--aqua); }
.nav--over.scrolled .brand { color: var(--ink); }
.nav--over.scrolled .nav__links a { color: var(--ink-70); }
.nav--over.scrolled .nav__links a:hover { color: var(--teal); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.6rem; background: var(--teal); color: #fff;
  font-size: var(--s--2); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { background: var(--teal-deep); transform: translateY(-1px); }
.btn--line { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--line:hover { background: var(--cream-3); border-color: var(--ink-45); }
.btn--onimg { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.72); }
.btn--onimg:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--lg { padding: 1rem 2.1rem; font-size: var(--s--1); }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .35rem; }
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 4.5px 0; transition: transform .26s var(--ease), opacity .2s; }
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav--over .nav__toggle { color: #fff; }
  .nav--over.scrolled .nav__toggle, .nav.open .nav__toggle { color: var(--ink); }
  .nav__links {
    position: fixed; inset: 58px 0 auto 0; flex-direction: column;
    align-items: flex-start; gap: 0;
    background: rgba(253,248,242,.985); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.5rem;
    transform: translateY(-125%); transition: transform .34s var(--ease);
  }
  .nav.open .nav__links { transform: translateY(0); }
  .nav--over .nav__links a, .nav__links a { color: var(--ink-70) !important; }
  .nav__links a:hover { color: var(--teal) !important; }
  .nav__links a { padding: .9rem 0; font-size: var(--s-0); letter-spacing: .12em; width: 100%; }
  .nav__links .btn { margin-top: .75rem; color: #fff !important; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,50,52,.42) 0%, rgba(13,50,52,.16) 40%, rgba(13,45,47,.62) 100%);
}
.hero__inner { position: relative; z-index: 1; width: var(--wrap); margin-inline: auto; text-align: center; color: #fff; padding-block: 6rem 3rem; }
.hero h1 { color: #fff; max-width: 22ch; margin-inline: auto; }
.hero .sub {
  /* sits optically centered between the headline and the buttons: equal gap above and below */
  margin-top: 1.9rem; color: var(--white-80);
  font-size: var(--s--1); letter-spacing: .3em; text-transform: uppercase;
  /* clear the global 64ch paragraph cap so the line centers on the page, and pull
     back the trailing letter-space that would otherwise push it left by half a space */
  max-width: none; margin-inline: auto; text-indent: .3em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.9rem; }

/* ---------- framed image ---------- */
.frame { position: relative; padding: .55rem; background: var(--white); border: 1px solid var(--line); }
.frame img { width: 100%; }

/* ---------- split ---------- */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center; }
@media (min-width: 920px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--l { grid-template-columns: 1.15fr 1fr; }
  .split--r { grid-template-columns: 1fr 1.15fr; }
}

/* ---------- THE ROOMS: hover cards ---------- */
.rooms {
  display: grid; gap: clamp(.7rem, 1.6vw, 1.15rem);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.room {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4; text-decoration: none; color: #fff;
  background: var(--cream-3);
}
.room img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .85s var(--ease), filter .5s var(--ease);
}
.room::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,45,47,.78) 0%, rgba(13,45,47,.12) 55%, rgba(13,45,47,.04) 100%);
  transition: opacity .4s var(--ease);
}
.room:hover img, .room:focus-visible img { transform: scale(1.055); }
.room:hover::after { opacity: .82; }
.room__label {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 1.6rem 1.15rem 1.25rem; text-align: center;
}
.room__label b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--s-1); letter-spacing: .09em; text-transform: uppercase;
}
.room__label span {
  display: inline-block; margin-top: .55rem;
  font-size: var(--s--2); letter-spacing: .2em; text-transform: uppercase;
  color: var(--white-80);
  border-bottom: 1px solid var(--white-55); padding-bottom: 2px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.room:hover .room__label span, .room:focus-visible .room__label span { opacity: 1; transform: none; }

/* ---------- gallery, three per row, every frame identical ---------- */
.floatgrid {
  display: grid; gap: clamp(.8rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-items: start;
}
@media (min-width: 860px) { .floatgrid { grid-template-columns: repeat(3, 1fr); } }
.floatgrid figure { margin: 0; }
/* picture is inline by default, which leaves a baseline gap under each image
   and makes otherwise identical frames measure differently */
.floatgrid picture { display: block; }
.floatgrid img {
  width: 100%; background: var(--cream-3);
  /* every frame is the same shape whatever the source file: four of the scenics
     are native 2:3 portraits, the two landscapes are center cropped to match */
  aspect-ratio: 2 / 3; height: auto; object-fit: cover; object-position: center;
  display: block;
  transition: transform .45s var(--ease), box-shadow .4s var(--ease);
}
.floatgrid figure:hover img { transform: translateY(-6px); box-shadow: 0 18px 38px -18px rgba(29,32,0,.34); }
/* six-up gallery: smaller frames so a full grid reads as a set, not six billboards */
.floatgrid--sm { gap: clamp(.6rem, 1.2vw, 1rem); }
@media (min-width: 860px) {
  .floatgrid--sm { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin-inline: auto; }
}

/* ---------- key tag pricing cards ---------- */
.tags {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.tag {
  position: relative; background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px 4px 92px 92px / 4px 4px 36px 36px;
  padding: 2.6rem 1.4rem 2rem; text-align: center;
  display: flex; flex-direction: column;
  transition: border-color .26s var(--ease), transform .26s var(--ease);
}
.tag::before {
  content: ""; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--ink-45); background: var(--cream-2);
}
.tag:hover { border-color: var(--teal); transform: translateY(-3px); }
.tag h3 { font-size: var(--s-1); letter-spacing: .06em; text-transform: uppercase; }
.tag__price { font-family: var(--display); font-size: var(--s-2); margin-top: .55rem; line-height: 1; }
.tag__price small { font-size: var(--s--1); font-family: var(--body); letter-spacing: .1em; color: var(--ink-45); display: block; margin-top: .4rem; text-transform: uppercase; }
.tag ul { list-style: none; margin: 1.15rem 0 1.35rem; padding: 0; font-size: var(--s--1); color: var(--ink-70); text-align: left; }
.tag li { padding: .34rem 0; border-bottom: 1px solid var(--line); }
.tag li:last-child { border-bottom: 0; }
.tag .btn { margin-top: auto; }

/* ---------- steps, one horizontal row ---------- */
.steps {
  list-style: none; counter-reset: s; margin: 0; padding: 0;
  display: grid; gap: clamp(1.1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.steps li { counter-increment: s; border-top: 1px solid var(--teal); padding-top: .85rem; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  display: block; font-family: var(--display); font-size: var(--s-1);
  color: var(--teal); line-height: 1; margin-bottom: .5rem;
}
.steps h3 { font-size: var(--s-0); letter-spacing: .09em; text-transform: uppercase; margin-bottom: .35rem; }
.steps p { font-size: var(--s--1); line-height: 1.6; color: var(--ink-70); }

/* ---------- guestbook ---------- */
.guests {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.guest {
  background: var(--white); border: 1px solid var(--line);
  padding: 1.7rem 1.4rem 1.35rem; position: relative;
}
.guest::before {
  content: "\201C"; position: absolute; top: .2rem; left: 1rem;
  font-family: var(--display); font-size: 3.1rem; color: var(--aqua); line-height: 1;
}
.guest p { font-size: var(--s--1); line-height: 1.66; padding-top: 1.35rem; color: var(--ink-70); }
.guest cite { display: block; margin-top: .9rem; font-style: normal; font-size: var(--s--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); }

/* ---------- detail rows ---------- */
.details { border-top: 1px solid var(--line); }
.detail { display: flex; justify-content: space-between; gap: 1.4rem; padding: .78rem 0; border-bottom: 1px solid var(--line); font-size: var(--s--1); }
.detail b { font-weight: 600; letter-spacing: .04em; }
.detail span { color: var(--ink-70); text-align: right; }

/* ---------- form ---------- */
.form { display: grid; gap: .9rem; }
.field label { display: block; font-size: var(--s--2); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); margin-bottom: .38rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .78rem .9rem; background: var(--white);
  border: 1px solid var(--line); color: var(--ink); font-size: var(--s-0);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--teal); outline: none; }
.field textarea { min-height: 92px; resize: vertical; }

/* The option list is drawn by the operating system, not by this stylesheet, and
   it does not inherit the select's dark backdrop. Left alone it took the cream
   text colour onto a white system popup, which measured 1.06:1 and was
   unreadable. Both colours are stated explicitly, and color-scheme pins the
   popup to light rendering so an OS in dark mode cannot invert it. */
.field select { color-scheme: light; }
.field select option,
.field select optgroup {
  color: var(--ink);
  background-color: var(--cream);
}
.form__row { display: grid; gap: .9rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }

/* ---------- faq ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: .9rem 2.4rem .9rem 0; position: relative; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); color: var(--teal); font-size: 1.25rem; transition: transform .24s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 1.1rem; font-size: var(--s--1); color: var(--ink-70); }

/* ---------- page head ---------- */
.pagehead { padding-block: clamp(6.5rem, 12vw, 9rem) clamp(2.2rem, 4vw, 3.4rem); }

/* ---------- footer ---------- */
.foot { background: var(--teal-deep); color: rgba(253,248,242,.76); padding-block: clamp(2.6rem, 5vw, 4rem) 1.6rem; }
.foot a { color: rgba(253,248,242,.86); text-decoration: none; }
.foot a:hover { color: var(--aqua); }
.foot .brand { color: var(--cream); }
.foot__grid { display: grid; gap: 1.9rem; }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot h4 { font-family: var(--body); font-size: var(--s--2); letter-spacing: .2em; text-transform: uppercase; color: var(--aqua); margin-bottom: .8rem; font-weight: 600; }
.foot ul { list-style: none; padding: 0; margin: 0; font-size: var(--s--1); }
.foot li { padding: .26rem 0; }
.foot__base {
  margin-top: 2.1rem; padding-top: 1.2rem; border-top: 1px solid rgba(253,248,242,.18);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: center;
  font-size: var(--s--2); letter-spacing: .05em;
}

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ---------- utilities ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.notice { border: 1px dashed var(--teal); background: rgba(19,125,127,.06); padding: .75rem .95rem; font-size: var(--s--2); color: var(--ink-70); }

/* inquiry form status line */
.formnote {
  margin-top: 1rem; padding: .7rem .9rem; max-width: none;
  font-size: var(--s--2); line-height: 1.55;
  border-left: 2px solid var(--aqua);
  background: rgba(169,209,208,.14);
  color: rgba(253,248,242,.88);
}
.formnote a { color: var(--aqua); }
.formnote--warn { border-left-color: var(--cream); background: rgba(253,248,242,.14); }
/* honeypot: reachable by bots, invisible and unfocusable for people */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }