/* ==========================================================================
   The Arith Collection — design system
   Gentle elegance: cream ground, sage structure, gold as jewelry.
   ========================================================================== */

:root{
  /* brand */
  --gold:        #C9A84C;
  --gold-soft:   #E0C77E;
  --gold-text:   #7A6020;   /* AA-safe gold for small text on cream */
  --sage:        #5F7050;
  --sage-deep:   #4A5940;
  --green-on-gold: #343E2C;   /* sage, darkened to clear 4.5:1 on gold */
  --sage-light:  #8FA37B;
  --cream:       #F4EDDE;
  --cream-deep:  #EBE1CD;
  --paper:       #FBF7EE;
  --ink:         #1F1C17;
  --ink-soft:    #4A4438;
  --ink-mute:    #6E6656;

  /* type */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 11vw, 9rem);
  --measure: 68ch;
  --maxw: 1200px;
  --narrow: 780px;

  --radius-arch: 999px 999px 8px 8px;
  --shadow-soft: 0 1px 2px rgba(31,28,23,.04), 0 12px 32px -12px rgba(31,28,23,.16);
  --shadow-lift: 0 2px 4px rgba(31,28,23,.05), 0 28px 60px -20px rgba(31,28,23,.24);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.005em;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{ font-size:clamp(2.6rem, 1.6rem + 4.4vw, 5rem); }
h2{ font-size:clamp(2rem, 1.35rem + 2.7vw, 3.35rem); }
h3{ font-size:clamp(1.4rem, 1.2rem + .9vw, 1.85rem); }
h4{ font-size:clamp(1.15rem, 1.05rem + .5vw, 1.35rem); font-family:var(--body); font-weight:700; letter-spacing:.01em; line-height:1.4; }

p{ margin:0 0 1.15em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

a{ color:var(--sage-deep); text-decoration-thickness:1px; text-underline-offset:.22em; }
a:hover{ color:var(--ink); }

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

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

.skip-link{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--ink); color:var(--cream);
  padding:.7rem 1.15rem; border-radius:3px; font-size:.85rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:.75rem; color:var(--cream); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--narrow); }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(3rem,7vw,5.5rem); }

.section--sage{ background:var(--sage); color:var(--cream); }
.section--sage h1,.section--sage h2,.section--sage h3,.section--sage h4{ color:var(--paper); }
.section--sage a:not(.btn){ color:var(--gold-soft); }

.section--ink{ background:var(--ink); color:#D9D3C6; }
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{ color:var(--paper); }
/* :not(.btn) matters. Without it this rule (0,1,1) outranks .btn--gold
   (0,1,0) and paints the button’s letters gold on a gold ground. */
.section--ink a:not(.btn){ color:var(--gold); }

.section--paper{ background:var(--paper); }

/* ---------- shared type helpers ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold-text);
  margin:0 0 1.15rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::after{ content:""; flex:0 0 2.6rem; height:1px; background:var(--gold); opacity:.7; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ content:""; flex:0 0 2.6rem; height:1px; background:var(--gold); opacity:.7; }
.section--sage .eyebrow,.section--ink .eyebrow{ color:var(--gold-soft); }

.lede{
  font-family:var(--display);
  font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:56ch;
}
.section--sage .lede,.section--ink .lede{ color:#E6E0D2; }

.center{ text-align:center; }
.center p,.center .lede{ margin-inline:auto; }
.center .eyebrow{ justify-content:center; }
.center .eyebrow::before{ content:""; flex:0 0 2.6rem; height:1px; background:var(--gold); opacity:.7; }

.script-accent{ font-family:var(--display); font-style:italic; color:var(--gold-text); }
.section--sage .script-accent,.section--ink .script-accent{ color:var(--gold-soft); }

/* ornament: gold rule with a centre diamond, echoing the logo */
.ornament{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin:2.25rem auto; max-width:16rem; }
.ornament::before,.ornament::after{ content:""; flex:1; height:1px; background:var(--gold); opacity:.5; }
.ornament span{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--body); font-size:.78rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2.1rem; border:1px solid transparent; border-radius:2px;
  cursor:pointer; transition:all .3s var(--ease); line-height:1;
}
.btn--primary{ background:var(--sage); color:var(--paper); border-color:var(--sage); }
.btn--primary:hover{ background:var(--sage-deep); border-color:var(--sage-deep); color:var(--paper); transform:translateY(-2px); box-shadow:var(--shadow-soft); }

/* Letters in the deep green of the sage section below. That green at full
   strength (#5F7050) is only 2.35:1 on gold, so this is the same hue taken
   down until it clears 4.5:1. */
.btn--gold{ background:var(--gold); color:var(--green-on-gold); border-color:var(--gold); }
.btn--gold:hover{ background:var(--gold-soft); border-color:var(--gold-soft); color:var(--green-on-gold); transform:translateY(-2px); box-shadow:var(--shadow-soft); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:rgba(31,28,23,.28); }
.btn--ghost:hover{ border-color:var(--ink); background:rgba(31,28,23,.04); color:var(--ink); transform:translateY(-2px); }

.section--sage .btn--ghost,.section--ink .btn--ghost{ color:var(--paper); border-color:rgba(244,237,222,.45); }
.section--sage .btn--ghost:hover,.section--ink .btn--ghost:hover{ background:rgba(244,237,222,.1); border-color:var(--paper); color:var(--paper); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.center .btn-row,.hero-inner .btn-row{ justify-content:center; }
/* once the row wraps, each line justifies on its own — without this the
   buttons stack flush left inside a centred block */
@media (max-width:520px){
  .hero-inner .btn-row .btn{ flex:1 1 100%; }
}

/* text link with arrow */
.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.76rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  text-decoration:none; color:var(--sage-deep);
  border-bottom:1px solid rgba(95,112,80,.35); padding-bottom:.35rem;
  transition:all .28s var(--ease);
}
.link-arrow::after{ content:"\2192"; transition:transform .28s var(--ease); }
.link-arrow:hover{ color:var(--ink); border-bottom-color:var(--gold); }
.link-arrow:hover::after{ transform:translateX(4px); }
.section--sage .link-arrow,.section--ink .link-arrow{ color:var(--gold-soft); border-bottom-color:rgba(224,199,126,.4); }
.section--sage .link-arrow:hover,.section--ink .link-arrow:hover{ color:var(--paper); border-bottom-color:var(--gold); }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(244,237,222,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(201,168,76,.24);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 1px 24px -6px rgba(31,28,23,.16); background:rgba(244,237,222,.95); }

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:76px; padding-block:.6rem;
}
.nav-brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto; }
.nav-brand img{ height:44px; width:auto; }


.nav-brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.nav-brand-text b{ font-family:var(--display); font-size:1.22rem; font-weight:500; color:var(--ink); letter-spacing:.02em; }
.nav-brand-text span{ font-size:.55rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-text); font-weight:700; margin-top:.18rem; }

.nav-links{ display:flex; align-items:center; gap:2.1rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; position:relative; padding-block:.4rem;
  white-space:nowrap; /* never let a squeezed row wrap a label onto two lines */
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--ink); }

.nav-actions{ display:flex; align-items:center; gap:1.35rem; flex:0 0 auto; }
.nav-cta{ flex:0 0 auto; padding:.85rem 1.5rem; font-size:.72rem; }

.nav-phone{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav-phone svg{ width:15px; height:15px; color:var(--gold-text); flex:0 0 auto; }
.nav-phone:hover{ color:var(--sage-deep); }
.nav-phone:hover svg{ color:var(--sage); }
/* Tighten the row rather than hiding the number — a bare phone icon reads as
   ambiguous, and the number is the point. Below this the row can't hold
   brand + 4 links + phone + CTA, so the hamburger takes over (see below). */
@media (max-width:1320px){
  .nav-links{ gap:1.5rem; }
  .nav-actions{ gap:1rem; }
  .nav-cta{ padding:.85rem 1.15rem; }
  .nav-brand-text span{ display:none; }
}

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:.5rem;
  width:44px; height:44px; align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:24px; height:1.5px; background:var(--ink); position:relative; transition:background .2s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:24px; height:1.5px; background:var(--ink);
  transition:transform .28s var(--ease), top .28s var(--ease);
}
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---------- nav: middle band ----------
   Tablets and scaled laptops. Everything under 1100px used to collapse to
   the hamburger, which gave these visitors less than everyone else. They now
   get the full bar. The only thing given up is the written phone number: the
   icon stays, set in a gold ring so it reads as a call button, and the link
   still carries the number as its accessible name and tooltip.
   Nothing at 1100px and above is touched by this block. */
@media (max-width:1100px){
  .nav-links{ gap:1.15rem; }
  .nav-actions{ gap:.8rem; }
  .nav-brand-text b{ font-size:1.1rem; }
  .nav-phone span{ display:none; }
  .nav-phone{
    width:38px; height:38px; flex:0 0 38px; justify-content:center;
    border:1px solid rgba(201,168,76,.55); border-radius:50%;
    transition:border-color .25s var(--ease), background .25s var(--ease);
  }
  .nav-phone:hover{ border-color:var(--gold); background:rgba(201,168,76,.08); }
  .nav-phone svg{ width:16px; height:16px; }
}

/* On desktop the wrapper is transparent to layout, so .nav-links and
   .nav-actions sit directly in the nav flex row. On mobile it becomes the
   single dropdown panel, which avoids stacking two absolute panels. */
.nav-menu{ display:contents; }

@media (max-width:979px){
  .nav-toggle{ display:flex; }
  .nav{ min-height:66px; }
  .nav-brand img{ height:38px; }
  .nav-brand-text span{ display:block; }

  .nav-menu{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:var(--cream); border-bottom:1px solid rgba(201,168,76,.3);
    padding:.5rem var(--gutter) 1.75rem;
    box-shadow:0 20px 40px -20px rgba(31,28,23,.3);
    max-height:calc(100svh - 66px); overflow-y:auto;
  }
  .nav-menu.is-open{ display:block; }

  .nav-links{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-links li{ border-bottom:1px solid rgba(31,28,23,.08); }
  .nav-links li:last-child{ border-bottom:0; }
  .nav-links a{ display:block; padding:1.05rem 0; font-size:.82rem; }
  .nav-links a::after{ display:none; }

  .nav-actions{ flex-direction:column; align-items:stretch; gap:1rem; margin-top:1.35rem; }
  .nav-cta{ width:100%; }
  .nav-phone{
    justify-content:center; padding:.9rem 0; font-size:.95rem;
    border:1px solid rgba(31,28,23,.18); border-radius:2px;
    /* undo the middle band's round icon button */
    width:auto; height:auto; flex:initial;
  }
  .nav-phone span{ display:inline; }
}

/* ---------- hero ----------
   Light hero: the same cream ground as the header, so the top of the page
   reads as one surface. No photograph and no scrim behind it. */
/* A pool of warm light behind the plate, falling off to a deeper sand at
   the edges. Flat colour was what made this read as paper. */
.hero{
  position:relative; color:var(--ink); overflow:hidden; isolation:isolate;
  background:
    /* the corners fall into real bronze, not another shade of sand */
    radial-gradient(125% 92% at 50% 36%,
      #FFFAF0 0%,
      #F9EEDA 22%,
      #F0E1C4 45%,
      #E2CDA6 70%,
      #CDB183 100%);
}
/* a second, tighter pool centred on the plate, so the light reads as
   coming from the doorway rather than being an even wash */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 44%,
    rgba(255,246,224,.85) 0%,
    rgba(255,242,214,.38) 42%,
    rgba(255,238,205,0) 72%);
}
.hero-media{ display:none; }
.hero::after{ content:none; }

/* ---------- the hero plate ----------
   Three across inside one frame: the headline on the left, the door in the
   middle, the subhead on the right. The words used to sit on top of the door,
   which read as crammed; now nothing overlaps it.

   Below 1060px there isn't room for three columns at a readable size, so the
   plate stacks: headline, door, subhead. Same idea turned on its side, with
   the door still between the two. */
.hero-plate{
  /* the opening, plus the pool of light the lantern throws down onto its
     floor. Two planes of light, not one flat wash. */
  background:
    radial-gradient(64% 26% at 50% 86%,
      rgba(255,232,176,.42) 0%,
      rgba(255,226,164,.16) 44%,
      rgba(255,222,158,0) 76%),
    radial-gradient(92% 78% at 50% 44%,
      rgba(255,253,247,.92) 0%,
      rgba(255,250,238,.50) 46%,
      rgba(255,248,235,0) 78%);
  /* one margin for everything inside the frame */
  --pad-y:clamp(2.2rem,4vw,3.4rem);
  --pad-x:clamp(1.25rem,3.6vw,3rem);
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  row-gap:clamp(1.1rem,3vw,1.9rem);
  width:min(100%,1240px);
  padding:var(--pad-y) var(--pad-x);
  border:1px solid var(--gold);
  /* gold that catches light: brighter along the top edge, deeper at the
     foot, so the frame has a direction instead of being a flat rule */
  border-image:linear-gradient(160deg,#F2E2AF 0%,#D9BA6A 26%,#C9A84C 52%,#9C7B28 100%) 1;
  margin-bottom:clamp(1.8rem,3vw,2.6rem);
  /* thickness. A highlight where the light lands along the top inner
     edge, a shadow along the bottom where it does not, and a cast shadow
     lifting the whole plate off the wall. */
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.95),
    inset 0 12px 26px -18px rgba(255,255,255,.9),
    inset 0 -16px 30px -22px rgba(122,84,28,.30),
    0 1px 0 rgba(255,250,236,.7),
    0 26px 54px -30px rgba(104,72,26,.34),
    0 6px 16px -10px rgba(104,72,26,.16);
}
.hero-plate::before{
  content:""; position:absolute; inset:5px; z-index:3;
  border:1px solid var(--gold); opacity:.42; pointer-events:none;
}
.hero-plate > i{
  position:absolute; left:50%; width:9px; height:9px; z-index:4;
  transform:translateX(-50%) rotate(45deg);
  background:#F2E7D2; border:1px solid var(--gold);
}
.hero-plate > i:first-child{ top:-5px; }
.hero-plate > i:last-child{ bottom:-5px; }

/* stacked order: headline, door, subhead */
.hero-plate > h1,
.hero-plate > p{ position:relative; z-index:2; margin:0; }
.hero-plate > h1{ grid-row:1; }
.hero-door{ grid-row:2; }
.hero-plate > .hero-sub{ grid-row:3; }

/* The door, and the lantern glow that belongs to it. The glow hangs off the
   door rather than the plate so it stays on the lantern in every layout. */
.hero-door{
  position:relative; z-index:1; isolation:isolate; display:block;
  pointer-events:none; user-select:none;
}
.hero-watermark{
  display:block; width:auto;
  height:clamp(200px,34vw,300px);
  /* its own shadow onto the plate floor, so it sits in the frame rather
     than being printed flat on it */
  filter:drop-shadow(0 10px 14px rgba(116,80,28,.20))
         drop-shadow(0 2px 3px rgba(116,80,28,.14));
}
/* the lantern is lit. The mark already hangs a lamp in the arch, so the
   glow has a source in the artwork rather than floating arbitrarily. */
.hero-door::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:31%;
  width:136%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(255,226,150,.46) 0%,
    rgba(255,214,128,.24) 32%,
    rgba(252,204,116,.09) 58%,
    rgba(250,198,106,0) 76%);
  animation:lanternBreathe 9s var(--ease) infinite;
}
@keyframes lanternBreathe{
  0%,100%{ opacity:.82; transform:translate(-50%,-50%) scale(.97); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.04); }
}
@media (prefers-reduced-motion:reduce){
  .hero-door::before{ animation:none; }
}

/* Three across. The plate is allowed wider than the page's text column so
   the headline keeps its size beside the door. */
@media (min-width:1060px){
  .hero-inner{ max-width:none; }
  .hero-plate{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    column-gap:clamp(1.5rem,2.6vw,2.6rem);
  }
  /* each side leans in toward the door */
  .hero-plate > h1{
    grid-column:1; grid-row:1; justify-self:end; text-align:right;
    /* capped where the plate stops growing (1240px), or the widest screens
       push "Where every stay" onto a third line */
    font-size:clamp(2.5rem,4.1vw,3.5rem);
  }
  .hero-door{ grid-column:2; grid-row:1; }
  .hero-watermark{ height:clamp(260px,24vw,320px); }
  .hero-plate > .hero-sub{
    grid-column:3; grid-row:1; justify-self:start; text-align:left;
    font-size:clamp(1.05rem,1.5vw,1.35rem); max-width:none; text-wrap:balance;
  }
  /* the forced line break was set for a centred block; in a column it
     strands a single word, so the lines balance themselves instead */
  .hero-plate > .hero-sub br{ display:none; }
}
@media (max-width:700px){
  .hero-plate{ --pad-y:1.5rem; --pad-x:1.15rem; }
}

.hero-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:min(88svh,780px);
  padding-top:clamp(5rem,12vw,8rem);
  /* The scroll cue is pinned 1.75rem off the bottom of the hero and is about
     61px tall, so the bottom padding has to clear roughly 7.25rem or the
     buttons land on it. That was hidden while the hero had spare height; the
     stacked plate on narrower screens uses it all. */
  padding-bottom:max(clamp(5rem,12vw,8rem),7.25rem);
}
.hero .eyebrow{ color:var(--gold-text); }

/* Light gold-brown. Kept at 3.4:1 on cream, which clears the WCAG bar for
   large text; a lighter tone than this stops being readable. */
.hero h1{ color:#9C7C33; text-shadow:none; }
.hero h1 em{ font-style:italic; color:#96742D; }

.hero-sub{
  font-family:var(--display); font-size:clamp(1.2rem,1rem + 1vw,1.6rem);
  line-height:1.55; color:var(--ink-soft); max-width:46ch; margin:0 auto;
  text-shadow:none;
}

.hero-scroll{
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%);
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
  display:flex; flex-direction:column; align-items:center; gap:.6rem; text-decoration:none;
}
.hero-scroll::after{ content:""; width:1px; height:34px; background:linear-gradient(var(--gold-text),transparent); }

/* arch-topped media frame — the logo motif */
.arch{ border-radius:var(--radius-arch); overflow:hidden; position:relative; background:var(--cream-deep); }
.arch img{ width:100%; height:100%; object-fit:cover; }
.arch--outlined::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius-arch);
  border:1px solid rgba(201,168,76,.55); pointer-events:none;
}
.arch-offset{ position:relative; }
.arch-offset::before{
  content:""; position:absolute; inset:1.35rem -1.35rem -1.35rem 1.35rem;
  border:1px solid rgba(201,168,76,.45); border-radius:var(--radius-arch); z-index:0;
}
.arch-offset > .arch{ position:relative; z-index:1; }
/* The offset frame reaches past its box by design. Below this width there is
   no gutter left to hold it, so it would clip rather than decorate. */
@media (max-width:700px){ .arch-offset::before{ display:none; } }

/* ---------- grids ---------- */
.grid{ display:grid; gap:clamp(1.5rem,3.5vw,2.75rem); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.split--wide-left{ grid-template-columns:1.15fr .85fr; }
.split--wide-right{ grid-template-columns:.85fr 1.15fr; }
@media (max-width:860px){
  .split,.split--wide-left,.split--wide-right{ grid-template-columns:1fr; }
  .split .split-media{ order:-1; }
}

/* ---------- property cards ---------- */
.home-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.home-card .arch{ aspect-ratio:4/5; margin-bottom:1.5rem; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.home-card:hover .arch{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.home-card .arch img{ transition:transform .8s var(--ease); }
.home-card:hover .arch img{ transform:scale(1.05); }
.home-card-meta{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-text); font-weight:700; margin-bottom:.6rem; }
.home-card h3{ margin-bottom:.4rem; }
.home-card p{ color:var(--ink-soft); font-size:.97rem; margin-bottom:1.1rem; }
.home-card .link-arrow{ align-self:flex-start; margin-top:auto; }

.badge{
  display:inline-block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; padding:.4rem .8rem; border:1px solid var(--gold); color:var(--gold-text);
  border-radius:2px; background:rgba(201,168,76,.1);
}

/* sleeps / from-price line that makes a card decision-ready */
.home-card-facts{
  display:flex; align-items:center; flex-wrap:wrap; gap:.55rem .85rem;
  margin:0 0 1.05rem; padding-top:.95rem;
  border-top:1px solid rgba(201,168,76,.35);
  font-size:.85rem; color:var(--ink-soft);
}
.home-card-facts .fact{ display:inline-flex; align-items:center; gap:.42rem; }
.home-card-facts .fact svg{ width:15px; height:15px; color:var(--gold-text); flex:0 0 auto; }
.home-card-facts .sep{ width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:.7; }
.home-card-facts .rate{ font-weight:700; color:var(--ink); }
.home-card-facts .rate small{ font-weight:400; color:var(--ink-mute); font-size:.82em; }

/* ---------- book direct ---------- */
.direct-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:clamp(1.75rem,3.5vw,2.5rem); margin-top:clamp(2.5rem,5vw,3.5rem); }
.perk{ text-align:left; }
.perk-icon{
  width:46px; height:46px; border:1px solid rgba(201,168,76,.55); border-radius:50%;
  display:grid; place-items:center; margin-bottom:1.15rem; color:var(--gold);
}
.perk-icon svg{ width:20px; height:20px; }
.perk h4{ margin-bottom:.45rem; }
.perk p{ font-size:.94rem; margin:0; }
.section--sage .perk p,.section--ink .perk p{ color:#DCD6C7; }

/* ---------- google rating ---------- */
.google-rating{
  display:inline-flex; align-items:center; gap:1.1rem; flex-wrap:wrap; justify-content:center;
  background:var(--paper); border:1px solid rgba(201,168,76,.4); border-radius:2px;
  padding:1rem 1.6rem; box-shadow:var(--shadow-soft);
}
.google-rating .score{ font-family:var(--display); font-size:2.1rem; line-height:1; color:var(--ink); }
.google-rating .detail{ text-align:left; }
.google-rating .stars{ margin-bottom:.2rem; font-size:.82rem; }
.google-rating .count{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; }
.google-rating .g-mark{ font-weight:700; letter-spacing:.02em; color:var(--ink-soft); font-size:.88rem; }

/* Anything still awaiting real content from the client.
   Visible on purpose so a placeholder cannot quietly ship. */
[data-needs-content]{
  outline:1px dashed rgba(160,60,40,.5); outline-offset:3px;
  position:relative;
}
[data-needs-content]::after{
  content:"NEEDS REAL CONTENT";
  position:absolute; top:0; right:0; transform:translateY(-100%);
  font-size:.55rem; font-weight:700; letter-spacing:.14em;
  background:#A03C28; color:#fff; padding:.15rem .4rem; border-radius:2px 2px 0 0;
}
body.is-launch [data-needs-content]{ outline:none; }
body.is-launch [data-needs-content]::after{ display:none; }

/* ---------- values ---------- */
.value{ padding-top:1.75rem; border-top:1px solid rgba(201,168,76,.4); }
.value-num{ font-family:var(--display); font-size:1.1rem; color:var(--gold-soft); letter-spacing:.1em; display:block; margin-bottom:.85rem; }
.value h4{ margin-bottom:.5rem; }
.value p{ font-size:.94rem; margin:0; }
.section--sage .value p{ color:#DCD6C7; }

/* ---------- timeline ---------- */
.timeline{ position:relative; margin:0; padding:0 0 0 clamp(1.75rem,4vw,3rem); list-style:none; }
.timeline::before{ content:""; position:absolute; left:0; top:.55rem; bottom:.55rem; width:1px; background:linear-gradient(transparent,var(--gold) 12%,var(--gold) 88%,transparent); opacity:.6; }
.timeline li{ position:relative; padding-bottom:clamp(2rem,4vw,2.85rem); }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:calc(clamp(1.75rem,4vw,3rem) * -1); top:.62rem;
  width:9px; height:9px; background:var(--cream); border:1px solid var(--gold);
  transform:translateX(-4px) rotate(45deg);
}
.timeline .t-year{ font-family:var(--display); font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem); color:var(--gold-text); display:block; line-height:1.2; margin-bottom:.3rem; }
.timeline p{ margin:0; color:var(--ink-soft); }

/* ---------- reviews ---------- */
.review{
  background:var(--paper); border:1px solid rgba(201,168,76,.3); border-radius:2px;
  padding:clamp(1.75rem,3.5vw,2.5rem); display:flex; flex-direction:column;
  box-shadow:var(--shadow-soft);
}
.stars{ color:var(--gold); letter-spacing:.22em; font-size:.9rem; margin-bottom:1.15rem; }
.review blockquote{ margin:0 0 1.5rem; font-family:var(--display); font-size:clamp(1.15rem,1.05rem + .5vw,1.35rem); line-height:1.55; color:var(--ink); }
.review cite{ font-style:normal; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; margin-top:auto; }
.review cite span{ display:block; letter-spacing:.06em; text-transform:none; font-weight:400; color:var(--gold-text); margin-top:.3rem; font-size:.8rem; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#B8B2A4; padding-block:clamp(3.5rem,7vw,5.5rem) 0; }
.site-footer h4{ color:var(--paper); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.25rem; font-weight:700; font-family:var(--body); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(2rem,5vw,3.5rem); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-logo{ width:240px; margin-bottom:1.5rem; }
.site-footer p{ font-size:.92rem; line-height:1.7; }
.footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.footer-list a{ color:#B8B2A4; text-decoration:none; font-size:.92rem; transition:color .25s var(--ease); }
.footer-list a:hover{ color:var(--gold); }
.socials{ display:flex; gap:.75rem; margin-top:1.25rem; }
.socials a{
  width:40px; height:40px; border:1px solid rgba(201,168,76,.4); border-radius:50%;
  display:grid; place-items:center; color:var(--gold); transition:all .28s var(--ease);
}
.socials a:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); transform:translateY(-2px); }
.socials svg{ width:17px; height:17px; }
.footer-bottom{
  margin-top:clamp(2.75rem,6vw,4rem); padding-block:1.75rem;
  border-top:1px solid rgba(201,168,76,.2);
  display:flex; flex-wrap:wrap; gap:1rem 1.75rem; align-items:center; justify-content:space-between;
  font-size:.8rem; color:#8A8474;
}
.footer-bottom a{ color:#8A8474; text-decoration:none; }
.footer-bottom a:hover{ color:var(--gold); }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.35rem; }
.field label{ font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); }
.field .req{ color:var(--gold-text); }
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid rgba(31,28,23,.18); border-radius:2px;
  padding:.95rem 1.05rem; width:100%; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(95,112,80,.14);
}
.field textarea{ resize:vertical; min-height:130px; line-height:1.65; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.25rem; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-note{ font-size:.84rem; color:var(--ink-mute); margin-top:1rem; }
.form-status{ margin-top:1.25rem; padding:1rem 1.15rem; border-radius:2px; font-size:.92rem; display:none; }
.form-status.is-ok{ display:block; background:rgba(95,112,80,.12); border:1px solid var(--sage); color:var(--sage-deep); }
.form-status.is-err{ display:block; background:rgba(160,60,40,.08); border:1px solid #A03C28; color:#8A3320; }

/* ---------- reveal on scroll ----------
   Scoped to .js so the site is fully readable if JavaScript never runs.
   Without this guard a script failure would render every section invisible. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; } }

/* ==========================================================================
   Property, explore and stay pages
   ========================================================================== */

/* ---------- page header ---------- */
.page-head{ padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem); }

/* ---------- gallery ---------- */
.gallery{
  display:grid; gap:.85rem;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(110px,14vw,190px);
}
.gallery a{ overflow:hidden; border-radius:2px; background:var(--cream-deep); display:block; position:relative; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery a:hover img{ transform:scale(1.05); }
.gallery a:first-child{ grid-column:span 2; grid-row:span 2; border-radius:var(--radius-arch); }
@media (max-width:760px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery a:first-child{ grid-column:span 2; }
}
.gallery-more{
  display:grid; place-items:center; background:var(--sage); color:var(--paper);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  text-decoration:none; text-align:center; padding:1rem;
}
.gallery-more:hover{ background:var(--sage-deep); color:var(--paper); }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(20,18,15,.95); padding:clamp(1rem,4vw,3rem);
}
.lightbox.is-open{ display:grid; grid-template-rows:auto 1fr auto; gap:1rem; }
.lightbox img{ max-width:100%; max-height:100%; margin:auto; object-fit:contain; border-radius:2px; }
.lightbox-bar{ display:flex; justify-content:space-between; align-items:center; color:#D9D3C6; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.lightbox button{
  background:none; border:1px solid rgba(224,199,126,.4); color:var(--gold);
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1.15rem; line-height:1;
  transition:all .25s var(--ease);
}
.lightbox button:hover{ background:var(--gold); color:var(--ink); }
.lightbox-nav{ display:flex; gap:.75rem; justify-content:center; }

/* ---------- fact strip ---------- */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:1px; background:rgba(201,168,76,.35);
  border:1px solid rgba(201,168,76,.35); border-radius:2px; overflow:hidden;
  margin:0;
}
.facts > div{ background:var(--cream); padding:1.35rem 1.15rem; text-align:center; }
.section--paper .facts > div{ background:var(--paper); }
.facts dt{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text); font-weight:700; margin-bottom:.45rem; }
.facts dd{ margin:0; font-family:var(--display); font-size:clamp(1.2rem,1.1rem + .5vw,1.55rem); color:var(--ink); line-height:1.2; }

/* ---------- amenities ---------- */
.amenities{ list-style:none; margin:0; padding:0; columns:2; column-gap:2.5rem; }
@media (min-width:900px){ .amenities{ columns:3; } }
@media (max-width:520px){ .amenities{ columns:1; } }
.amenities li{
  break-inside:avoid; padding:.5rem 0 .5rem 1.6rem; position:relative;
  font-size:.94rem; color:var(--ink-soft);
}
.amenities li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
}

/* ---------- availability calendar ---------- */
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.cal-head h3{ margin:0; }
.cal-nav{ display:flex; gap:.5rem; }
.cal-nav button{
  width:38px; height:38px; border:1px solid rgba(31,28,23,.2); background:var(--paper);
  border-radius:50%; cursor:pointer; color:var(--ink); font-size:1rem; line-height:1;
  transition:all .25s var(--ease);
}
.cal-nav button:hover:not(:disabled){ border-color:var(--sage); color:var(--sage-deep); }
.cal-nav button:disabled{ opacity:.35; cursor:not-allowed; }

.cal-months{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(1.5rem,3vw,2.5rem); }
.cal-month h4{ text-align:center; font-family:var(--display); font-weight:400; font-size:1.3rem; margin-bottom:.85rem; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-grid .dow{ font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); text-align:center; padding-bottom:.4rem; font-weight:700; }
.cal-day{
  aspect-ratio:1; display:grid; place-items:center; font-size:.82rem;
  border-radius:2px; color:var(--ink-soft); background:var(--paper);
  border:1px solid rgba(31,28,23,.07);
}
.cal-day.is-empty{ background:none; border:0; }
.cal-day.is-past{ color:rgba(31,28,23,.25); background:none; border-color:transparent; }
.cal-day.is-booked{ background:var(--cream-deep); color:rgba(31,28,23,.32); text-decoration:line-through; border-color:transparent; }
/* Past the host’s booking window: not booked, just not open yet. Hatched
   and never struck through, so it can’t be read as a full house. */
.cal-day.is-closed{
  color:rgba(31,28,23,.3); border-color:rgba(31,28,23,.06);
  background:repeating-linear-gradient(135deg, rgba(201,168,76,.16) 0 1px, transparent 1px 7px);
}
.cal-day.is-today{ outline:1px solid var(--gold); outline-offset:-1px; font-weight:700; color:var(--ink); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1.5rem; font-size:.8rem; color:var(--ink-mute); }
.cal-legend span{ display:inline-flex; align-items:center; gap:.5rem; }
.cal-legend i{ width:14px; height:14px; border-radius:2px; display:inline-block; }
.cal-legend .k-open{ background:var(--paper); border:1px solid rgba(31,28,23,.15); }
.cal-legend .k-booked{ background:var(--cream-deep); }
.cal-legend .k-closed{
  border:1px solid rgba(31,28,23,.12);
  background:repeating-linear-gradient(135deg, rgba(201,168,76,.5) 0 1px, transparent 1px 4px);
}
.cal-status{ font-size:.82rem; color:var(--ink-mute); margin-top:1rem; }
.cal-status.is-err{ color:#8A3320; }

/* ---------- sticky booking rail ---------- */
.stay-layout{ display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:960px){ .stay-layout{ grid-template-columns:1fr; } }
.book-rail{
  background:var(--paper); border:1px solid rgba(201,168,76,.4); border-radius:2px;
  padding:clamp(1.5rem,3vw,2.15rem); box-shadow:var(--shadow-soft);
}
@media (min-width:961px){ .book-rail{ position:sticky; top:104px; } }
.book-rail .rate{ font-family:var(--display); font-size:2rem; color:var(--ink); line-height:1; }
.book-rail .rate small{ font-family:var(--body); font-size:.82rem; color:var(--ink-mute); }
.book-rail hr{ border:0; border-top:1px solid rgba(201,168,76,.35); margin:1.35rem 0; }
.book-rail .btn{ width:100%; }
.book-rail .btn + .btn{ margin-top:.75rem; }
.book-rail .rail-note{ font-size:.82rem; color:var(--ink-mute); margin-top:1rem; }

/* ---------- map ---------- */
.map-frame{ border:1px solid rgba(201,168,76,.4); border-radius:2px; overflow:hidden; background:var(--cream-deep); }
.map-frame iframe{ width:100%; height:clamp(280px,38vw,420px); border:0; display:block; }
.map-placeholder{ display:grid; place-items:center; height:clamp(280px,38vw,420px); text-align:center; padding:2rem; color:var(--ink-mute); font-size:.9rem; }

/* ---------- explore ---------- */
.spot{ display:flex; flex-direction:column; height:100%; }
.spot .arch{ aspect-ratio:3/2; margin-bottom:1.25rem; border-radius:var(--radius-arch); }
.spot .kicker{ font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text); font-weight:700; margin-bottom:.5rem; }
.spot h4{ margin-bottom:.4rem; }
.spot p{ font-size:.93rem; color:var(--ink-soft); margin:0; }
.section--ink .spot p,.section--sage .spot p{ color:#C9C3B4; }
.section--ink .spot .kicker,.section--sage .spot .kicker{ color:var(--gold-soft); }
.spot .dist{ margin-top:.85rem; font-size:.78rem; color:var(--ink-mute); letter-spacing:.03em; }
.section--ink .spot .dist,.section--sage .spot .dist{ color:#9A9484; }

/* ---------- policies ---------- */
.policy-list{ margin:0; }
.policy{ padding:1.5rem 0; border-top:1px solid rgba(201,168,76,.35); display:grid; grid-template-columns:.35fr .65fr; gap:1.5rem; }
@media (max-width:640px){ .policy{ grid-template-columns:1fr; gap:.5rem; } }
.policy dt{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold-text); }
.policy dd{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* ---------- 404 ---------- */
.notfound{ min-height:68svh; display:grid; place-items:center; text-align:center; }

/* ---------- Airbnb category ratings ---------- */
.ratings{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,135px),1fr));
  gap:1px; background:rgba(201,168,76,.35);
  border:1px solid rgba(201,168,76,.35); border-radius:2px; overflow:hidden;
  margin:0 auto; max-width:960px;
}
.ratings > div{ background:var(--paper); padding:1.4rem .9rem; text-align:center; }
.ratings .score{
  font-family:var(--display); font-size:clamp(1.75rem,1.5rem + .9vw,2.2rem);
  line-height:1; color:var(--ink); display:block; margin-bottom:.4rem;
}
.ratings .label{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700; display:block;
}
.ratings-source{
  font-size:.78rem; color:var(--ink-mute); letter-spacing:.04em;
  margin-top:1.1rem; text-align:center;
}

/* ---------- click-to-load map ---------- */
.map-load{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  width:100%; height:clamp(280px,38vw,420px);
  background:
    repeating-linear-gradient(45deg, rgba(201,168,76,.05) 0 12px, transparent 12px 24px),
    var(--cream-deep);
  border:0; cursor:pointer; padding:2rem; text-align:center;
  font-family:var(--body); color:var(--ink-soft);
  transition:background .3s var(--ease);
}
.map-load:hover{ background:var(--cream); }
.map-load-icon{ color:var(--gold); }
.map-load-icon svg{ width:34px; height:34px; }
.map-load-text{
  font-size:.78rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--sage-deep);
}
.map-load small{ font-size:.8rem; color:var(--ink-mute); max-width:34ch; line-height:1.5; }

/* ==========================================================================
   Clickable town cards. The image is a button; clicking reveals where we send
   guests to eat. No animation on the card itself — the panel simply opens.
   ========================================================================== */
.spot-toggle{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:pointer; text-align:left; position:relative;
}
.spot-toggle:focus-visible{ outline:2px solid var(--sage); outline-offset:4px; border-radius:2px; }
.spot-toggle .arch{ display:block; aspect-ratio:3/2; }
.spot-toggle .arch img{ transition:transform .6s var(--ease); }
.spot-toggle:hover .arch img{ transform:scale(1.04); }

.spot-hint{
  position:absolute; left:50%; bottom:.9rem; transform:translateX(-50%);
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--ink); background:rgba(244,237,222,.94);
  padding:.45rem .8rem; border-radius:2px; white-space:nowrap;
  transition:background .25s var(--ease);
}
.spot-toggle:hover .spot-hint{ background:var(--gold); }

/* Grid-rows accordion: animates cleanly without hard-coding a height. */
.spot-panel{
  display:grid; grid-template-rows:1fr; /* open by default, JS closes it */
  transition:grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease);
  margin-top:1.25rem;
}
.js .spot-panel{ grid-template-rows:0fr; opacity:0; margin-top:0; }
.js .spot-panel.is-open{ grid-template-rows:1fr; opacity:1; margin-top:1.25rem; }
.spot-panel > div{ overflow:hidden; }

.eat-list{ list-style:none; margin:0; padding:1.25rem 1.35rem; display:flex; flex-direction:column; gap:.85rem;
  background:var(--ink); border:1px solid rgba(201,168,76,.4); border-radius:2px; }
.eat-list li{ padding-bottom:.85rem; border-bottom:1px solid rgba(201,168,76,.2); }
.eat-list li:last-child{ border-bottom:0; padding-bottom:0; }
.eat-list b{ display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.05rem,1rem + .35vw,1.28rem); color:var(--paper); line-height:1.25; }
.eat-list span{ font-size:.82rem; color:#A39D8D; line-height:1.45; display:block; margin-top:.15rem; }
.eat-head{ font-family:var(--body); font-size:.6rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 .35rem; }


/* ---------- door reveal on the home cards ----------
   A sand panel with the arch on it sits over each photo, then dissolves as the
   card scrolls in. Scoped to .js so the photo is never hidden behind a panel
   that has nothing to remove it. */
.arch-door{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:#EFE4D2 url("/assets/img/logo-arch-warm.svg") center 46%/52% no-repeat;
  opacity:0;
}
.js .arch-door{ opacity:1; transition:opacity 1.6s var(--ease) .85s; }
.js .home-card.is-in .arch-door{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .js .arch-door{ transition:none; opacity:0; }
}

/* ---------- the framed brand plate ----------
   The lockup Ben's artwork frames: mark, rule, wordmark, inside a double
   border with a diamond centred on the top and bottom lines.

   The frame is CSS and the type is live text, deliberately. Baking this into
   an SVG would mean either shipping a font inside the file or falling back to
   a system serif, since an <img>-loaded SVG cannot borrow the page's webfont.
   Live text also stays selectable and picks up Cormorant Garamond exactly as
   the headings do.

   Everything scales from --plate-scale rather than from viewport units. The
   wordmark is nowrap, so the plate has a hard minimum width; driving that off
   vw meant a narrow column could cut the frame straight through the type.
   Each placement sets the scale it has room for instead.

   The plate is always cream inside, the way the artwork has it, including on
   the near-black footer, where that contrast is the whole point. */
.brand-plate{
  --plate-scale:1;
  --plate-ground:var(--paper);
  --plate-line:var(--gold);
  --plate-ink:var(--ink);
  --plate-quiet:var(--gold-text);
  --plate-sage:var(--sage);
  position:relative;
  display:inline-block;
  max-width:100%;
  padding:calc(1.7rem * var(--plate-scale)) calc(2.2rem * var(--plate-scale));
  background:var(--plate-ground);
  border:1px solid var(--plate-line);
}
/* the inner hairline */
.brand-plate::before{
  content:""; position:absolute; inset:5px;
  border:1px solid var(--plate-line); opacity:.55; pointer-events:none;
}
/* diamonds sitting on the top and bottom lines, with the ground showing
   through behind them so the border reads as broken rather than crossed */
.brand-plate::after,
.brand-plate .plate-foot{
  content:""; position:absolute; left:50%;
  width:9px; height:9px; transform:translateX(-50%) rotate(45deg);
  background:var(--plate-ground);
  border:1px solid var(--plate-line);
}
.brand-plate::after{ top:-4.5px; }
.brand-plate .plate-foot{ bottom:-4.5px; }

.brand-plate-inner{
  position:relative; z-index:1;
  display:flex; align-items:center;
  gap:calc(1.5rem * var(--plate-scale));
}
.brand-plate-mark{
  flex:0 0 auto; display:block;
  width:calc(150px * var(--plate-scale)); height:auto;
}
.brand-plate-rule{
  flex:0 0 auto; align-self:stretch;
  width:1px; background:var(--plate-line); opacity:.5;
  margin-block:.25rem;
}
.brand-plate-type{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; line-height:1;
}
.bp-the{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:calc(1.05rem * var(--plate-scale));
  color:var(--plate-sage); margin-bottom:.34em;
}
.bp-name{
  font-family:var(--display); font-weight:400;
  font-size:calc(2.1rem * var(--plate-scale));
  letter-spacing:.055em; text-transform:uppercase;
  color:var(--plate-ink); white-space:nowrap;
}
.bp-div{
  display:flex; align-items:center; gap:.5rem;
  width:100%; margin:.62em 0 .55em;
}
.bp-div i{ flex:1 1 auto; height:1px; background:var(--plate-line); opacity:.5; }
.bp-div b{
  flex:0 0 auto; width:5px; height:5px; transform:rotate(45deg);
  background:var(--plate-line);
}
.bp-tag{
  font-family:var(--display); font-weight:500;
  font-size:calc(.78rem * var(--plate-scale));
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--plate-quiet); padding-left:.3em;
}
.bp-dot{
  width:3px; height:3px; border-radius:50%;
  background:var(--plate-line); opacity:.7; margin:.85em 0;
}
.bp-homes{
  font-family:var(--display); font-weight:400;
  font-size:calc(.72rem * var(--plate-scale));
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--plate-sage); padding-left:.17em; white-space:nowrap;
}

/* Placements. The footer column is the tightest, so it runs smallest. */
.footer-plate{ margin-bottom:1.6rem; }
.footer-plate .brand-plate{ --plate-scale:.58; }

/* Phones: the mark beside the type squeezes the wordmark, so the plate stacks
   and the vertical rule turns horizontal. */
@media (max-width:560px){
  .brand-plate-inner{ flex-direction:column; gap:calc(1rem * var(--plate-scale)); }
  .brand-plate-rule{ align-self:auto; width:64px; height:1px; margin:0; }
  .brand-plate-mark{ width:calc(124px * var(--plate-scale)); }
  .footer-plate .brand-plate{ --plate-scale:.62; }
}


/* ---------- lit sections ----------
   The homepage alternates: sections 1, 3, 5, 7, 9 are lit and dimensional,
   the ones between them stay flat and quiet so the page has a pulse instead
   of being uniformly heavy. This is the shared treatment for the lit ones.

   Scoped to its own class rather than .section--paper, which nine pages use
   and which should stay plain everywhere else. */
.section--lit{
  position:relative;
  background:
    radial-gradient(92% 64% at 50% 28%,
      #FFFDF7 0%,
      #FBF5E7 32%,
      #F4EBD8 64%,
      #EBDCC1 100%);
}

/* the arches stand on the page rather than being printed on it */
.section--lit .home-card .arch{
  box-shadow:
    0 24px 48px -26px rgba(104,72,26,.32),
    0 8px 18px -12px rgba(104,72,26,.16);
}
.section--lit .home-card:hover .arch{
  transform:translateY(-10px);
  box-shadow:
    0 42px 72px -30px rgba(104,72,26,.40),
    0 14px 26px -14px rgba(104,72,26,.20);
}

/* a vignette at the arch edge, so it reads as an opening you are looking
   into rather than a photo cut to an arch shape. Rides on the outline
   pseudo-element, which already sits above the picture. */
.section--lit .arch--outlined::after{
  box-shadow:inset 0 0 42px -12px rgba(88,58,18,.42);
}

/* light falling from the head of the arch. Screen blend so it lifts the
   photograph underneath instead of laying a milky film over it. */
.section--lit .arch::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:var(--radius-arch);
  background:radial-gradient(74% 48% at 50% 4%,
    rgba(255,234,186,.50) 0%,
    rgba(255,226,164,.22) 40%,
    rgba(255,220,150,0) 72%);
  mix-blend-mode:screen;
}
/* With JS the light comes up as the door dissolves, so the room lights up as
   the door opens. Without JS it is simply on, never stuck dark. */
.js .section--lit .arch::before{
  opacity:0; transition:opacity 1.5s var(--ease) 1.15s;
}
.js .section--lit .home-card.is-in .arch::before{ opacity:1; }
.js .section--lit .home-card:hover .arch::before{ opacity:1; transition-delay:0s; }

@media (prefers-reduced-motion:reduce){
  .js .section--lit .arch::before{ opacity:1; transition:none; }
}


/* ---------- cream-framed arches ----------
   For photographs on the dark sections. The same double-line-and-diamond
   device as the logo plate, so a framed photo reads as part of the system
   rather than as a picture with a heavy border round it.

   .arch is overflow:hidden so it can clip the photograph to the arch shape,
   which clips anything drawn outside it too. Hence the wrapper: the offset
   ring and the diamond hang on that, the solid frame sits inside the arch. */
.arch-frame{
  --ring:clamp(9px,1.15vw,17px);
  --frame:clamp(4px,.5vw,7px);
  position:relative;
}
/* the ring, offset outside the arch and following its shape */
.arch-frame::before{
  content:""; position:absolute; inset:calc(-1 * var(--ring));
  border:1px solid rgba(244,237,222,.55);
  border-radius:999px 999px 10px 10px;
  pointer-events:none;
}
/* a diamond at the crown, filled with the section ground so the ring reads as
   broken by it rather than crossing behind it */
.arch-frame::after{
  content:""; position:absolute; left:50%; z-index:1;
  top:calc(-1 * var(--ring) - 5.5px);
  width:11px; height:11px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--ink);
  border:1px solid var(--cream);
  pointer-events:none;
}

/* the solid frame, on the photograph's own edge */
.arch--cream{ border-radius:var(--radius-arch); overflow:hidden; position:relative; background:var(--cream-deep); }
.arch--cream::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:var(--radius-arch);
  border:var(--frame) solid var(--cream);
}

/* On a light ground the ring would disappear, so it takes the gold instead.
   Nothing uses this yet; it is here so the component is not silently broken
   the first time a framed arch lands on cream. */
.section--paper .arch-frame::before,
.section--lit .arch-frame::before{ border-color:rgba(201,168,76,.55); }
.section--paper .arch-frame::after,
.section--lit .arch-frame::after{ background:var(--paper); border-color:var(--gold); }


/* ---------- Rosemary's welcome note ----------
   A text message: her avatar in the corner, the bubble beside it with the
   tail pointing back at her. Not a modal, never blocks the page, takes no
   focus. Sits above the page but below the phone menu (200) and the photo
   lightbox (300).

   When the open bubble would cover the hero's buttons, it starts closed and
   only the avatar shows. See site.js. */
.welcome-note{
  position:fixed; z-index:150;
  right:clamp(.75rem,2vw,1.4rem);
  bottom:clamp(.75rem,2vw,1.4rem);
  display:flex; align-items:flex-end; gap:.55rem;
  /* narrow on purpose: the message runs taller rather than wider, which
     keeps it out of the hero buttons sitting centre-bottom */
  max-width:min(18.5rem, calc(100vw - 1.5rem));
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.welcome-note.is-in{ opacity:1; transform:none; pointer-events:auto; }

.welcome-avatar{
  flex:0 0 auto; width:46px; height:46px; padding:0;
  border-radius:50%; border:1px solid var(--gold); background:var(--cream);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(104,72,26,.55);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.welcome-avatar:hover{ transform:translateY(-2px); background:var(--paper); }
.welcome-avatar img{ width:24px; height:auto; display:block; }

.welcome-bubble{
  position:relative;
  background:var(--paper); border:1px solid var(--gold);
  /* the square corner is the one the tail comes out of */
  border-radius:20px 20px 6px 20px;
  padding:.95rem 1.1rem 1rem;
  box-shadow:0 20px 44px -22px rgba(104,72,26,.45), 0 3px 10px -6px rgba(104,72,26,.18);
}
.welcome-note:not(.is-open) .welcome-bubble{ display:none; }
/* the tail, pointing back at her */
.welcome-bubble::after{
  content:""; position:absolute; right:-7px; bottom:13px;
  width:12px; height:12px; background:var(--paper);
  border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:rotate(-45deg);
}

.welcome-greet{
  font-family:var(--display); font-size:1.15rem; line-height:1.25;
  color:var(--ink); margin:0 0 .45rem; padding-right:1.2rem;
}
.welcome-body{ font-size:.83rem; line-height:1.65; color:var(--ink-soft); margin:0; }

.welcome-close{
  position:absolute; top:.35rem; right:.5rem;
  width:26px; height:26px; padding:0; line-height:1;
  background:none; border:0; cursor:pointer;
  font-size:1.25rem; color:var(--ink-mute);
  transition:color .2s var(--ease);
}
.welcome-close:hover{ color:var(--ink); }

@media (max-width:520px){
  .welcome-bubble{ padding:.85rem .95rem .9rem; }
  .welcome-greet{ font-size:1.05rem; }
  .welcome-body{ font-size:.79rem; }
}
@media (prefers-reduced-motion:reduce){
  .welcome-note,.welcome-avatar{ transition:none; }
  .welcome-note{ transform:none; }
}


/* minimum stay and any short note under the rate, both filled from /api/rates */
.rate-min,.rate-note{ font-size:.82rem; color:var(--ink-mute); margin:.35rem 0 0; }
.rate-note{ color:var(--gold-text); }
.rate a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }