/* ==========================================================================
   AURELIA HOUSE — heritage boutique hotel, est. 1927
   Quiet grandeur · perfect symmetry · gold hairlines on charcoal
   ========================================================================== */

:root {
  --charcoal: #101314;
  --ivory: #F4EFE6;
  --gold: #C7A867;
  --bronze: #8C734B;
  --slate: #9BA0A3;

  --charcoal-raise: #15191a;
  --gold-soft: rgba(199, 168, 103, 0.45);
  --gold-faint: rgba(199, 168, 103, 0.22);
  --gold-ghost: rgba(199, 168, 103, 0.10);
  --ivory-dim: rgba(244, 239, 230, 0.82);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Jost', 'Avenir Next', 'Century Gothic', sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-time: 1.1s;
}

/* ---------- Reset & base ---------- */

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

html {
  scroll-behavior: smooth;
  /* Clears the fixed header (4.6rem mobile / 5.2rem desktop) on every anchor
     jump. Applied to the scrollport, so it covers all targets at once —
     adding scroll-margin-top to the targets as well would double the offset. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--charcoal);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

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

/* The house keeps its own list rhythm, so the markers go. WebKit reads a
   marker-less list as decorative and drops the list/listitem roles along with
   them, so the three lists whose extent is genuinely information carry an
   explicit role="list" in the markup: the mobile menu (the only navigation at
   that width), the fact row (three statistics that would otherwise run
   together as one unbroken sentence), and the heritage timeline (five
   milestones read in order). The two .nav-links halves deliberately do not —
   they are one menu split around the brand for symmetry, so "list, 3 items"
   twice would describe the layout rather than the content, and each child is
   a link announced in its own right inside an already-named landmark. */
ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

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

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* ---------- Typography ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ivory);
}

h2 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  letter-spacing: 0.04em;
}

h3 {
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  letter-spacing: 0.03em;
}

.label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Layout scaffolding ---------- */

.container {
  width: min(100% - 2.5rem, 1160px);
  margin-inline: auto;
  text-align: center; /* the house rule: perfect symmetry */
}

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

.section {
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
  position: relative;
}

.section-head {
  margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
}

.section-lede {
  max-width: 42rem;
  margin: 1.4rem auto 0;
  color: var(--slate);
}

/* ---------- Ornamental divider: hairline + diamond ---------- */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(100%, 240px);
  margin: 1.6rem auto 0;
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}

.ornament::after {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}

.ornament .gem {
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

.ornament--small {
  width: min(100%, 140px);
  margin-block: 1.1rem;
}

/* Draw-in on scroll — initial states only when JS can undo them */
html:not(.no-js) .reveal-rule::before {
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 1.3s var(--ease-out) 0.25s;
}

html:not(.no-js) .reveal-rule::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s var(--ease-out) 0.25s;
}

html:not(.no-js) .reveal-rule .gem {
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition: opacity 0.8s ease 0.1s, transform 0.8s var(--ease-out) 0.1s;
}

.reveal-rule.is-visible::before,
.reveal-rule.is-visible::after {
  transform: scaleX(1);
}

.reveal-rule.is-visible .gem {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* ---------- Scroll-reveal primitives ---------- */

html:not(.no-js) .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--reveal-time) var(--ease-out) var(--d, 0ms),
    transform var(--reveal-time) var(--ease-out) var(--d, 0ms);
}

html:not(.no-js) .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Headings fade in while their letter-spacing expands */
html:not(.no-js) .reveal-title {
  opacity: 0;
  letter-spacing: -0.03em;
  transition:
    opacity 1.2s var(--ease-out),
    letter-spacing 1.5s var(--ease-out);
}

html:not(.no-js) .reveal-title.is-visible {
  opacity: 1;
  letter-spacing: 0.04em;
}

html:not(.no-js) .reveal-label {
  opacity: 0;
  letter-spacing: 0.02em;
  transition:
    opacity 1.2s var(--ease-out),
    letter-spacing 1.6s var(--ease-out);
}

html:not(.no-js) .reveal-label.is-visible {
  opacity: 1;
  letter-spacing: 0.25em;
}

/* ---------- Buttons & text links ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1.05rem 2.3rem 1rem;
  border: 1px solid var(--gold);
  transition:
    background-color 0.45s var(--ease-out),
    color 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out),
    letter-spacing 0.45s var(--ease-out);
}

.btn--gold {
  background: var(--gold);
  color: var(--charcoal);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: transparent;
  color: var(--gold);
  letter-spacing: 0.3em;
}

.btn--ghost {
  background: transparent;
  color: var(--ivory);
  border-color: var(--gold-soft);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
  letter-spacing: 0.3em;
}

.text-link {
  display: inline-block;
  position: relative;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.45rem;
}

.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0.35);
  transform-origin: center;
  opacity: 0.5;
  transition: transform 0.5s var(--ease-out), opacity 0.5s ease;
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

/* ---------- Gold-ruled image frames ---------- */

.frame {
  border: 1px solid var(--gold-soft);
  padding: 0.6rem;
}

.frame-inner {
  position: relative;
  overflow: hidden;
  outline: 1px solid var(--gold-faint);
  outline-offset: -1px;
}

.frame-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--charcoal-raise);
  transform: scale(1.001);
  transition: transform 1.8s var(--ease-out);
}

.frame-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 19, 20, 0.05) 45%, rgba(16, 19, 20, 0.55) 100%);
  pointer-events: none;
}

.frame:hover .frame-inner img {
  transform: scale(1.06);
}

/* The gallery is a showpiece: a heavier rule and a deeper mount */
.frame--gallery {
  padding: 0.9rem;
  border-color: var(--gold-faint);
}

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(16, 19, 20, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--gold-faint);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.6rem;
  width: min(100% - 2.5rem, 1160px);
  margin-inline: auto;
}

.nav-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  line-height: 1.1;
}

.nav-brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
}

.nav-brand-est {
  font-size: 0.55rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav-links {
  display: none;
}

.nav-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  transition: transform 0.4s var(--ease-out), opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* Mobile overlay menu — a sibling of .site-header, so the viewport stays
   its containing block and the header's blur can never shrink it. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45; /* under the header bar (50), over the page */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center; /* overflow spills downward, never off the top */
  gap: 2.5rem;
  padding: 6rem 1.25rem 3rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(16, 19, 20, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}

.mobile-menu-links a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory);
  transition: color 0.35s ease, letter-spacing 0.5s var(--ease-out);
}

.mobile-menu-links a:hover,
.mobile-menu-links a:focus-visible {
  color: var(--gold);
  letter-spacing: 0.14em;
}

.mobile-menu-foot {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: center;
  padding-inline: 1.5rem;
}

body.menu-locked {
  overflow: hidden;
}

/* Landscape phones: draw the menu in so it fits without scrolling */
@media (max-height: 560px) {
  .mobile-menu {
    gap: 1.5rem;
    padding-top: 5rem;
  }

  .mobile-menu-links {
    gap: 1rem;
  }

  .mobile-menu-links a {
    font-size: 1.45rem;
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 6.5rem 1.25rem 5rem;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--charcoal-raise);
  animation: kenburns 28s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(16, 19, 20, 0.25) 0%, rgba(16, 19, 20, 0.72) 100%),
    linear-gradient(180deg, rgba(16, 19, 20, 0.62) 0%, rgba(16, 19, 20, 0.25) 40%, rgba(16, 19, 20, 0.88) 100%);
}

/* The whole hero sits inside a gold-ruled frame — the house signature */
.hero::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(199, 168, 103, 0.35);
  pointer-events: none;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}

.hero-title {
  font-size: clamp(3rem, 11vw, 6.5rem);
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 1.4rem;
  text-wrap: balance;
}

html:not(.no-js) .hero-title.reveal-title.is-visible {
  letter-spacing: 0.1em;
}

.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--ivory-dim);
  margin-top: 1.8rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: 2.6rem;
}

.br-wide {
  display: none;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 2.1rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.hero-scroll-word {
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2.6s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.55); opacity: 0.5; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* ==========================================================================
   INTRO STATEMENT
   ========================================================================== */

.intro-statement {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 400;
  margin-top: 1.3rem;
  text-wrap: balance;
}

.intro-copy {
  color: var(--slate);
  max-width: 40rem;
  margin: 2rem auto 0;
}

.fact-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 3.2rem;
}

.fact-row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.4rem 2.8rem;
}

.fact-row li + li {
  border-top: 1px solid var(--gold-faint);
}

.fact-num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.fact-label {
  font-size: 0.66rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ==========================================================================
   ROOMS & SUITES
   ========================================================================== */

.room-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  max-width: 420px;
  margin-inline: auto;
}

.room-card h3 {
  margin-top: 1.6rem;
}

.room-detail {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate); /* 7.07:1 — bronze fails AA at this size */
  margin-top: 0.7rem;
}

.room-desc {
  color: var(--slate);
  font-size: 0.95rem;
  margin-top: 1rem;
}

.room-rate {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin: 1.3rem 0 1.1rem;
}

.room-rate strong {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.04em;
  padding-inline: 0.25rem;
}

/* ==========================================================================
   AMENITIES — alternating centered rows
   ========================================================================== */

.amenity-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  align-items: center;
  max-width: 560px;
  margin-inline: auto;
}

.amenity-row + .amenity-row {
  margin-top: clamp(3.5rem, 8vw, 6rem);
}

.amenity-text p:not(.label):not(.amenity-meta) {
  color: var(--slate);
  max-width: 30rem;
  margin-inline: auto;
}

.amenity-text h3 {
  margin-top: 0.9rem;
}

.amenity-meta {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 1.4rem;
}

/* ==========================================================================
   HERITAGE TIMELINE
   ========================================================================== */

.timeline {
  position: relative;
  padding-block: 1rem 0;
}

/* the central gold thread */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--gold-soft) 8%, var(--gold-soft) 92%, transparent);
}

html:not(.no-js) .timeline::before {
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform 2.4s var(--ease-out);
}

html:not(.no-js) .timeline.is-visible::before {
  transform: translateX(-50%) scaleY(1);
}

.milestone {
  position: relative;
  background: var(--charcoal);
  max-width: 520px;
  margin-inline: auto;
  padding: 2.4rem 1.4rem;
}

.milestone + .milestone {
  margin-top: clamp(1.6rem, 4vw, 2.8rem);
}

.milestone-gem {
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold);
  background: var(--charcoal);
  transform: rotate(45deg);
  margin: 0 auto 1.5rem;
}

.milestone-year {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.14em;
  line-height: 1;
}

.milestone h3 {
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 0.8rem;
}

.milestone p:last-child {
  color: var(--slate);
  font-size: 0.95rem;
  margin-top: 1rem;
}

.milestone em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05em;
  color: var(--ivory-dim);
}

/* ==========================================================================
   GALLERY — crossfade slideshow
   ========================================================================== */

.gallery-shell {
  max-width: 980px;
  margin-inline: auto;
}

.slideshow {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 72vh;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.slide.is-active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--charcoal-raise);
}

/* Was `.slide figcaption`. ARIA in HTML allows no role but `figure` on a
   <figure> that has a <figcaption>, so role="tabpanel" — which the slide dots
   genuinely need, they are a real tablist — was invalid on all four slides.
   The caption is a <p class="label"> now and the <figure> keeps its role. The
   two testimonial figures still use figcaption; they override no role. Explicit
   margin because a <p> carries a UA margin and this box is positioned. */
.slide .label {
  position: absolute;
  margin: 0;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 1;
  width: max-content;
  max-width: 88%;
  text-align: center;
  color: var(--ivory);
  text-shadow: 0 1px 8px rgba(16, 19, 20, 0.8);
  font-size: 0.62rem;
}

.slide-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  min-height: 26px;
}

/* 26px box keeps the WCAG 2.5.8 target size; the diamond stays 7px */
.slide-dot {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
}

.slide-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: background-color 0.4s ease, transform 0.4s var(--ease-out);
}

.slide-dot:hover::before {
  transform: rotate(45deg) scale(1.25);
}

.slide-dot[aria-selected="true"]::before {
  background: var(--gold);
  transform: rotate(45deg) scale(1.15);
}

/* Pause / play — same 26px target, centred on the house axis */
.slide-pause {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0.7rem auto 0;
  opacity: 0.75;
  transition: opacity 0.4s ease;
}

.slide-pause:hover,
.slide-pause:focus-visible {
  opacity: 1;
}

.slide-pause::before {
  content: "";
  width: 8px;
  height: 10px;
  border-left: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
}

.slide-pause.is-paused::before {
  width: 0;
  height: 0;
  border-left: 9px solid var(--gold);
  border-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 2px;
}

/* ==========================================================================
   GUEST WORDS
   ========================================================================== */

.guest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  max-width: 460px;
  margin-inline: auto;
}

.testimonial {
  border: 1px solid var(--gold-faint);
  padding: clamp(2.2rem, 5vw, 3rem) clamp(1.4rem, 4vw, 2.6rem) 2.6rem;
  position: relative;
  transition: border-color 0.6s ease, transform 0.6s var(--ease-out);
}

.testimonial:hover {
  border-color: var(--gold-soft);
  transform: translateY(-4px);
}

.testimonial-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--gold);
  margin-bottom: 1.2rem;
}

.testimonial blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  line-height: 1.55;
  color: var(--ivory-dim);
}

.testimonial figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 2rem;
}

.portrait {
  display: inline-block;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  padding: 5px;
  margin-bottom: 0.7rem;
}

.portrait img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--charcoal-raise);
}

.testimonial cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--ivory);
}

.guest-meta {
  font-size: 0.64rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ==========================================================================
   SEASONAL OFFERS
   ========================================================================== */

.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  max-width: 440px;
  margin-inline: auto;
}

.offer-card {
  border: 1px solid var(--gold-faint);
  padding: 2.6rem 1.8rem 2.4rem;
  background: linear-gradient(180deg, var(--gold-ghost), transparent 45%);
  transition: border-color 0.6s ease, transform 0.6s var(--ease-out);
}

.offer-card:hover {
  border-color: var(--gold-soft);
  transform: translateY(-5px);
}

.offer-season {
  color: var(--slate);
  font-size: 0.64rem;
}

.offer-card h3 {
  margin-top: 0.9rem;
}

.offer-desc {
  color: var(--slate);
  font-size: 0.95rem;
}

.offer-rate {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin: 1.5rem 0 1.2rem;
}

.offer-rate strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.04em;
  padding-inline: 0.2rem;
}

/* ==========================================================================
   BOOKING ENQUIRY FORM
   ========================================================================== */

.enquiry-form {
  margin-top: 0.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  text-align: left;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.form-field label {
  font-size: 0.66rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}

.form-field .optional {
  color: var(--slate);
  text-transform: none;
  letter-spacing: 0.1em;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem; /* 16px — below this iOS Safari force-zooms on focus */
  letter-spacing: 0.02em;
  color: var(--ivory);
  background: rgba(244, 239, 230, 0.04);
  border: 1px solid var(--gold-faint);
  padding: 0.85rem 1rem;
  border-radius: 0;
  width: 100%;
  transition: border-color 0.4s ease, background-color 0.4s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 7rem;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(155, 160, 163, 0.85);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(244, 239, 230, 0.07);
}

/* This form had the same root cause the main site's focus ring did: a blanket
   `outline: none` on :focus, at (0,2,1), silently out-specifying the global
   `:focus-visible` ring at (0,1,0) — so the ring declared at the top of this
   file was deleted on exactly the thirteen controls that needed it most, and
   focus was left signalled by a 1px border tint alone.

   The border and background treatment above are untouched. This restores the
   house ring for keyboard focus only, so clicking a field still shows none.
   Same specificity as the rule above, later in the file, so it wins. */
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--gold);
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) 50%, calc(100% - 1rem) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-field input[type="date"] {
  color-scheme: dark;
}

.form-error {
  color: var(--gold); /* 8.20:1 — a house-voice correction, legibly stated */
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  margin-top: 1.4rem;
}

.form-submit {
  margin-top: 2.2rem;
}

.form-note {
  font-size: 0.8rem;
  color: var(--slate);
  margin-top: 1.6rem;
  letter-spacing: 0.04em;
}

.form-success {
  border: 1px solid var(--gold-soft);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
  margin-top: 1rem;
}

.form-success h3 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin-top: 1.6rem;
}

.form-success p {
  color: var(--slate);
  max-width: 34rem;
  margin: 1.2rem auto 0;
}

.form-success-sign {
  margin-top: 2rem;
}

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

.site-footer {
  border-top: 1px solid var(--gold-faint);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2.2rem;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-est {
  margin-top: 0.6rem;
  font-size: 0.6rem;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  margin-top: 3rem;
}

.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.66rem;
  margin-bottom: 0.9rem;
}

.footer-col p {
  color: var(--slate);
  font-size: 0.9rem;
  line-height: 2;
}

.footer-col a {
  transition: color 0.35s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--gold);
}

.footer-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-faint), transparent);
  margin-top: 3rem;
}

.footer-small {
  margin-top: 1.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.footer-small a {
  color: var(--gold); /* 8.20:1 — bronze fails AA at 0.72rem */
  transition: color 0.35s ease;
  /* Gold on slate is only a 1.9:1 luminance step, so inside this run of
     copyright text the three links were distinguishable by hue alone — the one
     cue a colour-blind reader does not get (WCAG 1.4.1). Every other link on
     the page sits on its own line or in its own cell and needs no rule; this is
     the only one embedded in a sentence, so the underline is scoped to it. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.footer-small a:hover,
.footer-small a:focus-visible {
  color: var(--ivory);
}

/* ==========================================================================
   BREAKPOINT: 768px
   ========================================================================== */

@media (min-width: 768px) {
  .br-wide {
    display: inline;
  }

  .hero::after {
    inset: 1.4rem;
  }

  .frame--gallery {
    padding: 1.1rem;
  }

  .fact-row {
    flex-direction: row;
  }

  .fact-row li + li {
    border-top: none;
    border-left: 1px solid var(--gold-faint);
  }

  .room-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    gap: 3rem 2.4rem;
  }

  /* Three cards in two columns: the third is centred, never orphaned left */
  .room-grid > .room-card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 1.2rem);
    margin-inline: auto;
  }

  .amenity-row {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    max-width: none;
  }

  /* the alternation: every second row swaps image and text */
  .amenity-row:nth-of-type(even) .amenity-media {
    order: 2;
  }

  .guest-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 940px;
    gap: 2.4rem;
  }

  .form-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem 1.6rem;
  }

  .form-field--full {
    grid-column: 1 / -1;
  }

  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .slide .label {
    font-size: 0.68rem;
    bottom: 1.8rem;
    white-space: nowrap;
  }
}

/* ==========================================================================
   BREAKPOINT: 900px — the offers only go three-across once there is room
   ========================================================================== */

@media (min-width: 900px) {
  .offer-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
    gap: 1.8rem;
  }
}

/* ==========================================================================
   BREAKPOINT: 1100px
   ========================================================================== */

@media (min-width: 1100px) {
  .nav-toggle,
  .mobile-menu {
    display: none;
  }

  .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 5.2rem;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 2.6rem;
  }

  .nav-links--left {
    justify-content: flex-end;
    padding-right: 3rem;
  }

  .nav-links--right {
    justify-content: flex-start;
    padding-left: 3rem;
  }

  .nav-links a {
    position: relative;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    padding-bottom: 0.4rem;
    transition: color 0.35s ease;
  }

  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s var(--ease-out);
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    color: var(--gold);
  }

  .nav-links a:hover::after,
  .nav-links a:focus-visible::after {
    transform: scaleX(1);
  }

  .room-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
    gap: 2.6rem;
  }

  /* three columns, three cards — the orphan rule is no longer needed */
  .room-grid > .room-card:last-child {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }

  .milestone {
    padding-inline: 3rem;
  }
}

/* ==========================================================================
   REDUCED MOTION — stillness for those who prefer it
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  .hero-media img {
    animation: none !important;
    transform: none !important;
  }

  .hero-scroll-line {
    animation: none !important;
    transform: scaleY(1);
    opacity: 0.8;
  }

  html:not(.no-js) .reveal,
  html:not(.no-js) .reveal-title,
  html:not(.no-js) .reveal-label {
    opacity: 1 !important;
    transform: none !important;
  }

  html:not(.no-js) .reveal-title {
    letter-spacing: 0.04em !important;
  }

  html:not(.no-js) .hero-title.reveal-title {
    letter-spacing: 0.1em !important;
  }

  html:not(.no-js) .reveal-label {
    letter-spacing: 0.25em !important;
  }

  .reveal-rule::before,
  .reveal-rule::after {
    transform: scaleX(1) !important;
  }

  .reveal-rule .gem {
    opacity: 1 !important;
    transform: rotate(45deg) scale(1) !important;
  }

  html:not(.no-js) .timeline::before {
    transform: translateX(-50%) scaleY(1) !important;
  }

  .frame:hover .frame-inner img {
    transform: none;
  }

  .testimonial:hover,
  .offer-card:hover {
    transform: none;
  }
}