/* Direction B · Cobalt Mural — shared by the homepage and the Gather page */
body { background: var(--white); }

/* ---------- bar ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.bar__logo img { height: 66px; width: auto; }
.bar nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 38px); }
.bar nav a:not(.btn) { text-decoration: none; }
.bar nav a:not(.btn):hover, .bar nav a:not(.btn)[aria-current] { color: var(--rust); }
.bar__logo img { transition: height .4s ease; }
.bar { transition: padding .4s ease; }

/* Fixed bar: clear over the film, solid midnight once you scroll */
.topbar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; color: var(--cream); transition: background-color .4s ease; }
.topbar nav a:not(.btn):hover { color: var(--sand); }
.topbar .btn--line:hover { background: var(--cream); color: var(--midnight); border-color: var(--cream); }
.topbar.is-stuck { background: var(--midnight); }
/* Light version for pages without a film: sticks in white */
.topbar--light { position: sticky; background: var(--white); color: var(--midnight); }
.topbar--light nav a:not(.btn):hover { color: var(--rust); }
.topbar--light.is-stuck { background: var(--white); box-shadow: 0 1px 0 rgba(25,50,133,.14); }
.topbar.is-stuck .bar { padding-block: 10px; }
.topbar.is-stuck .bar__logo img { height: 50px; }
[id] { scroll-margin-top: 80px; }

/* ---------- the doors ---------- */
.doors { background: var(--kelp); color: var(--cream); padding-block: clamp(80px, 10vw, 140px); }
.doors__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.doors h2 { font-size: clamp(2.8rem, 5.4vw, 5.2rem); }
.doors h2 em { color: var(--sand); }
.doors__head p { max-width: 24rem; }
.door-row { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(14px, 1.8vw, 28px); }
.door-row li { position: relative; }
.door-row li:hover, .door-row li:focus-within { z-index: 2; }
.door { display: block; text-decoration: none; }
.door .script { display: block; text-align: center; font-size: clamp(2.4rem, 3.4vw, 3.4rem); height: 1.1em; margin-bottom: 14px; transition: color .4s ease, transform .4s ease; }
.door__frame { position: relative; padding: 9px 9px 0; border: 1px solid rgba(249,242,237,.6); border-bottom: 0; perspective: 900px; perspective-origin: 30% 50%; }
.door__frame::after { content: ''; position: absolute; left: -10px; right: -10px; bottom: -4px; height: 4px; background: var(--cream); }
.door__room { position: relative; aspect-ratio: 1 / 2.05; overflow: hidden; background: var(--midnight); }
.door__room img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.3s cubic-bezier(.2,.7,.2,1); }
.door__leaf {
  position: absolute; inset: 9px 9px 0; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1.45fr 1fr; gap: 7% 10%;
  padding: 9% 13% 15%;
  background: var(--door, var(--cream));
  border: 1px solid rgba(25,50,133,.14);
  transform-origin: left center;
  transition: transform 1.05s cubic-bezier(.32,.72,.16,1);
  backface-visibility: visible;
}
.door__leaf::before { content: ''; position: absolute; inset: 0; background: #5c4636; opacity: 0; transition: opacity 1.05s ease; pointer-events: none; }
.door__leaf i { border: 1px solid rgba(25,50,133,.2); box-shadow: inset 0 0 0 5px var(--door, var(--cream)), inset 0 0 0 6px rgba(25,50,133,.12); }
.door__leaf b { position: absolute; right: 11%; top: 50%; width: 5px; height: 26px; background: #C79C78; }
.door__leaf b::after { content: ''; position: absolute; right: 0; top: 4px; width: 16px; height: 4px; background: #C79C78; }
/* the room's name, painted on the top rail of the door */
.door__name { grid-column: 1 / -1; font-family: var(--script); font-size: clamp(2rem, 2.9vw, 2.9rem); line-height: 1; text-align: center; color: var(--kelp); white-space: nowrap; transition: opacity .3s ease .4s; }
.door:hover .door__name, .door:focus-visible .door__name, .door.is-open .door__name { opacity: 0; }
.door .label { display: block; text-align: center; margin-top: 16px; color: rgba(249,242,237,.85); font-size: .68rem; transition: color .4s ease; }
.door .label span { display: none; }
.door:hover .door__leaf, .door:focus-visible .door__leaf, .door.is-open .door__leaf { transform: rotateY(-104deg); }

/* Option 2: the door swings to edge-on, vanishes, and comes back to close */
.door-row--vanish .door__frame { perspective-origin: 9px 50%; }
.door-row--vanish .door__leaf { transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity 0s; }
.door-row--vanish .door:hover .door__leaf, .door-row--vanish .door:focus-visible .door__leaf, .door-row--vanish .door.is-open .door__leaf {
  transform: rotateY(-90deg); opacity: 0;
  transition: transform .75s cubic-bezier(.4,0,.2,1), opacity 0s .75s;
}

/* Option 3: no doors, just the rooms */
.room { display: block; text-decoration: none; }
.room .script { display: block; text-align: center; font-size: clamp(2.4rem, 3.4vw, 3.4rem); height: 1.1em; margin-bottom: 14px; transition: color .4s ease, transform .4s ease; }
.room__photo { position: relative; aspect-ratio: 1 / 2.05; overflow: hidden; background: var(--midnight); outline: 1px solid rgba(249,242,237,.6); outline-offset: 8px; }
.room__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.room .label { display: block; text-align: center; margin-top: 18px; color: rgba(249,242,237,.85); font-size: .68rem; transition: color .4s ease; }
.room .label span { display: none; }
.room:hover .room__photo img, .room:focus-visible .room__photo img { transform: scale(1.07); }
.room:hover .script, .room:focus-visible .script { color: var(--sand); transform: translateY(-4px); }
.room:hover .label, .room:focus-visible .label { color: var(--sand); }
.room:hover .label span, .room:focus-visible .label span { display: inline; }
.room:hover .label em, .room:focus-visible .label em { display: none; }
.room:focus-visible { outline: none; }
.room:focus-visible .room__photo { outline: 2px solid var(--sand); }

/* comparison labels between the options */
.option-tag { display: inline-block; background: var(--rust); color: #fff; padding: 8px 14px; margin-bottom: 36px; }
.doors + .doors { border-top: 1px solid rgba(249,242,237,.28); }
.door:hover .door__leaf::before, .door:focus-visible .door__leaf::before, .door.is-open .door__leaf::before { opacity: .26; }
.door:hover .door__room img, .door:focus-visible .door__room img, .door.is-open .door__room img { transform: scale(1); }
.door:hover .script, .door:focus-visible .script, .door.is-open .script { color: var(--sand); transform: translateY(-4px); }
.door:hover .label, .door.is-open .label { color: var(--sand); }
.door:hover .label span, .door.is-open .label span { display: inline; }
.door:hover .label em, .door.is-open .label em { display: none; }
.door:focus-visible { outline: none; }
.door:focus-visible .door__frame { outline: 2px solid var(--sand); outline-offset: 4px; }
.doors__foot { display: flex; gap: 32px; margin-top: 64px; justify-content: center; flex-wrap: wrap; }
.doors .link:hover { color: var(--sand); }

/* ---------- the Next Door row: bottom of each suite page, option 4 on the homepage ---------- */
.others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.others--all { grid-template-columns: repeat(7, 1fr); }
.others a { display: block; text-decoration: none; }
.others .ph { overflow: hidden; }
.others img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.others a:hover img { transform: scale(1.05); }
.others .script { display: block; font-size: 2.6rem; color: var(--kelp); margin-top: 12px; }
.others a:hover .script { color: var(--rust); }
.others .label { display: block; color: var(--rust); font-size: .64rem; }
@media (max-width: 1000px) { .others { grid-template-columns: repeat(3, 1fr); } .others--all { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .others, .others--all { grid-template-columns: repeat(2, 1fr); } }

/* ---------- footer ---------- */
.foot { background: var(--midnight); color: var(--cream); padding-block: 88px 120px; position: relative; overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; position: relative; z-index: 1; }
.foot__logo { width: 230px; }
.foot h3 { margin-bottom: 18px; color: var(--sand); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--sand); }
.foot .tendril { color: var(--kelp); width: 470px; height: 210px; left: -50px; bottom: -40px; }

@media (max-width: 1100px) {
  .door-row { grid-template-columns: repeat(7, 170px); overflow-x: auto; padding: 10px 10px 16px; scroll-snap-type: x mandatory; }
  .door-row li { scroll-snap-align: start; }
  .door__name { font-size: 2.6rem; }
}
@media (max-width: 900px) { .bar nav a:not(.btn) { display: none; } }
@media (max-width: 760px) {
  .bar__logo img { height: 48px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- page hero (Stay, Layout, St John, Gallery, Reserve) ---------- */
.p-hero { background: var(--kelp); color: var(--cream); position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 128px) clamp(88px, 10vw, 140px); }
.p-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; position: relative; z-index: 1; }
.p-hero .label { color: var(--sand); }
.p-hero h1 { font-size: clamp(3.2rem, 6.6vw, 6.8rem); line-height: .92; margin: 22px 0 26px; }
.p-hero h1 em { color: var(--sand); display: block; }
.p-hero__lede { max-width: 32rem; font-size: 1.15rem; }
.p-hero__media { position: relative; padding: 0 0 16% 12%; }
.p-hero__media .a { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p-hero__media .b { position: absolute; left: 0; bottom: 0; width: 42%; aspect-ratio: 4 / 5; object-fit: cover; border: 8px solid var(--kelp); }
/* the vine stays behind both photos, showing past the lower right corner */
.p-hero__media .tendril { color: var(--cream); width: 150px; height: 294px; right: -40px; bottom: -80px; z-index: -1; transform: rotate(8deg); }
.p-hero > .tendril { color: rgba(249,242,237,.08); width: 520px; height: 300px; left: -90px; top: -60px; transform: rotate(-10deg); }
@media (max-width: 860px) {
  .p-hero__grid { grid-template-columns: 1fr; }
  .p-hero__media .tendril { width: 84px; height: 165px; right: -6px; bottom: -44px; }
}

/* ---------- shared section scaffolding ---------- */
.sec { padding-block: clamp(80px, 10vw, 140px); }
.sec--pale { background: var(--pale); }
.sec--linen { background: var(--linen); }
.sec--kelp { background: var(--kelp); color: var(--cream); }
.sec--midnight { background: var(--midnight); color: var(--cream); }
.sec__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 64px); }
.sec__head h2 { font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: .95; }
.sec__head h2 em { color: var(--kelp); }
.sec--kelp .sec__head h2 em, .sec--midnight .sec__head h2 em { color: var(--sand); }
.sec__head > p { max-width: 30rem; }
.sec__head .label { color: var(--rust); margin-bottom: 18px; }
.sec--kelp .sec__head .label, .sec--midnight .sec__head .label { color: var(--sand); }

/* ---------- page transitions ---------- */
/* Browsers that support cross-page view transitions (Chrome, Edge, Safari 18) glide between
   pages with the top bar held still. Others get the short fade in concepts.js. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
::view-transition-old(root) { animation: page-out .42s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: page-in .75s cubic-bezier(.2,.7,.2,1) .08s both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(22px); } }
html.is-leaving body { opacity: 0; transition: opacity .32s ease; }
html.is-entering body { animation: page-fade .6s ease both; }
@keyframes page-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- phone menu ---------- */
/* Below 900px the nav links fold into a Menu button (added by concepts.js) that opens a full-screen list. */
.menu-toggle { display: none; background: none; border: 1px solid currentColor; color: inherit; padding: 10px 14px; cursor: pointer; font-size: .7rem; }
@media (max-width: 900px) {
  .menu-toggle { display: inline-block; }
  .topbar.is-menu { position: fixed; inset: 0; z-index: 120; background: var(--midnight); color: var(--cream); overflow-y: auto; }
  .topbar.is-menu .bar { flex-wrap: wrap; }
  .topbar.is-menu .bar__logo img { filter: brightness(0) invert(.96) sepia(.08); }
  .topbar.is-menu nav { order: 3; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 40px 0 32px; }
  .topbar.is-menu nav a:not(.btn) { display: block; font-family: var(--serif); font-size: 2.3rem; letter-spacing: 0; text-transform: none; padding: 6px 0; }
  .topbar.is-menu nav a[aria-current] { color: var(--sand); }
  .topbar.is-menu nav .btn { margin-top: 18px; border-color: var(--cream); color: var(--cream); background: transparent; }
}