/* ==========================================================================
   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 card ----------
   Ben's logo card exactly as he supplied it (cropped from his PDF to the
   card's edge, nothing redrawn), lifted off the lit ground with a cast
   shadow like a card on a table.

   Sized by width AND by screen height, so on a short laptop the headline and
   both buttons still land above the fold. The image is 1409px wide, so it
   stays sharp on high-density screens up to ~700px displayed. */
.hero-inner{
  /* the card's width, shared with the words row beneath it */
  --card-w:max(420px, min(700px, calc((100svh - 360px) * 1.673)));
}
.hero-card{
  display:block;
  width:min(100%, var(--card-w));
  height:auto; aspect-ratio:1409 / 842;
  margin-bottom:clamp(1.6rem,3vw,2.4rem);
  border-radius:2px;
  box-shadow:
    0 1px 0 rgba(255,250,236,.8),
    0 34px 60px -32px rgba(96,64,20,.42),
    0 10px 22px -12px rgba(96,64,20,.20);
}

/* The words under the card. Phones and tablets: stacked and centred, the
   subhead in two lines. Wider: exactly the card's width, the headline on the
   left ending at a gold rule, the subhead on the right starting from it, both
   sized off the card so the two halves stay balanced at every width. The
   subhead's four lines are set by hand so they break on the phrases. */
.hero-words{
  display:grid; justify-items:center; gap:.9rem;
  width:min(100%, var(--card-w));
  margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.hero-words h1,
.hero-words .hero-sub{ margin:0; }
.hero-words h1{ font-size:clamp(2.1rem,1.4rem + 2.6vw,3rem); }
.hero-words-rule{ width:56px; height:1px; background:var(--gold); opacity:.7; }
.hero-sub .g{ display:block; }
/* phrases never split, so a narrow screen breaks between them, not inside */
.hero-sub .g > span{ white-space:nowrap; }

@media (min-width:900px){
  .hero-inner{ max-width:none; }
  .hero-words{
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
    align-items:center;
    column-gap:calc(var(--card-w) * .045);
  }
  .hero-words h1{
    justify-self:end; text-align:right;
    font-size:calc(var(--card-w) * .062);
    line-height:1.12;
  }
  .hero-words-rule{ width:1px; height:auto; align-self:stretch; }
  .hero-words .hero-sub{
    justify-self:start; text-align:left; max-width:none;
    font-size:max(1rem, calc(var(--card-w) * .0255));
    line-height:1.5;
  }
  .hero-sub .g,
  .hero-sub .g > span{ display:block; white-space:nowrap; }
}

@media (min-width:900px) and (max-height:860px){
  .hero-card{ margin-bottom:1.4rem; }
  .hero-words{ margin-bottom:1.5rem; }
  .hero .hero-inner{ padding-top:clamp(2.5rem,6vh,4rem); min-height:0; }
}

.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-door.webp") center 46%/auto 62% 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; }

/* ---------- choosing dates ----------
   The availability calendar doubles as the date picker, on each home's page
   and in the booking form (assets/js/stay-calendar.js). */
/* squares on phones, capped on wide screens so two months stay compact */
/* justify-self: a grid item with an aspect-ratio otherwise shrinks to its
   height once that is capped, so booked days came out narrower than open ones */
.cal-day{ max-height:46px; justify-self:stretch; }
.cal-grid{ gap:3px; }
.cal-months.is-single{ grid-template-columns:minmax(0,1fr); max-width:420px; margin-inline:auto; }
button.cal-day{
  font:inherit; font-size:.82rem; padding:0; cursor:pointer; width:100%;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
button.cal-day:hover,
button.cal-day:focus-visible{ border-color:var(--sage); color:var(--ink); background:#fff; }
button.cal-day:focus-visible{ outline:2px solid var(--sage); outline-offset:1px; }
/* a booked night that can still be the check-out morning */
button.cal-day.is-booked.can-out{ text-decoration:none; color:var(--ink-soft); }
.cal-day.is-short{ color:rgba(31,28,23,.28); cursor:not-allowed; }
.cal-day.is-range,
.cal-day.is-preview{ background:rgba(95,112,80,.16); border-color:transparent; color:var(--ink); }
.cal-day.is-start,
.cal-day.is-end,
button.cal-day.is-start:hover,
button.cal-day.is-end:hover{
  background:var(--sage); border-color:var(--sage); color:#fff; font-weight:700; text-decoration:none;
}
.cal-legend .k-stay{ background:var(--sage); }

.stay-summary{ font-size:.92rem; color:var(--ink-soft); margin:1.1rem 0 0; }
.stay-summary b{ color:var(--ink); font-weight:700; }
.stay-clear{
  background:none; border:0; padding:0; margin-left:.4rem; cursor:pointer;
  font:inherit; font-size:.82rem; color:var(--gold-text);
  text-decoration:underline; text-underline-offset:3px;
}

/* home page: the summary and the button on one line */
.avail-title{ margin:0; }
.stay-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem;
  flex-wrap:wrap; margin-top:1.25rem; padding-top:1.25rem;
  border-top:1px solid rgba(201,168,76,.35);
}
.stay-bar .stay-summary{ margin:0; }
.page-head-cta{ margin-top:1.5rem; }

/* booking form */
.stay-picker{
  margin:.25rem 0 1.4rem; padding:1.1rem 1.1rem 1.2rem;
  background:var(--paper); border:1px solid rgba(201,168,76,.4);
}
.stay-picker .cal-head{ margin-bottom:.9rem; }
.stay-picker .cal-month h4{ font-size:1.15rem; }
.stay-picker .cal-legend{ margin-top:1rem; gap:.9rem; }
/* matches .field label */
.field-label{
  margin:0; font-size:.7rem; letter-spacing:.17em; text-transform:uppercase;
  font-weight:700; color:var(--ink-soft);
}
.field-row[hidden],
.stay-picker[hidden]{ display:none; }

/* ---------- booking page (/book), terms, confirmation ---------- */
.book-step{ display:flex; align-items:center; gap:.75rem; font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem); margin:2.5rem 0 1.25rem; }
.book-form .book-step:first-child{ margin-top:0; }
.book-step span{
  display:inline-grid; place-items:center; width:2rem; height:2rem; flex:0 0 auto;
  border:1px solid var(--gold); border-radius:50%; font-family:var(--body);
  font-size:.85rem; font-weight:700; color:var(--gold-text);
}
.book-form .stay-picker{ margin-bottom:.5rem; }
.mode-banner{ max-width:none;
  margin:0 0 1.5rem; padding:.9rem 1.1rem; border:1px solid #E0C36A; background:#FFF4D6;
  color:var(--ink); font-size:.92rem; border-radius:2px;
}
.camera-note{
  padding:1rem 1.15rem; margin-bottom:1rem; background:var(--paper);
  border:1px solid rgba(201,168,76,.45); border-left:3px solid var(--gold); font-size:.95rem;
}
.camera-note p{ margin:0; }
.terms-box{
  max-height:340px; overflow:auto; padding:1.1rem 1.25rem; background:var(--paper);
  border:1px solid rgba(31,28,23,.18); border-radius:2px; font-size:.92rem; color:var(--ink-soft);
}
.terms-box:focus{ outline:2px solid var(--gold); outline-offset:2px; }
.terms-box h3,.terms-page h3{ font-size:1.25rem; margin:1.4rem 0 .45rem; color:var(--ink); }
.terms-box h3:first-child,.terms-page h3:first-of-type{ margin-top:0; }
.terms-box ul,.terms-page ul{ margin:0 0 1rem; padding-left:1.2rem; }
.terms-page{ font-size:1rem; color:var(--ink-soft); }
.accept-row{
  display:flex; gap:.75rem; align-items:flex-start; margin:1.5rem 0; cursor:pointer;
  font-size:.95rem; color:var(--ink); line-height:1.55;
}
.accept-row input{ width:1.2rem; height:1.2rem; margin-top:.15rem; flex:0 0 auto; accent-color:var(--sage); }
.book-pay[disabled]{ opacity:.45; cursor:not-allowed; }
.quote-lines{ width:100%; border-collapse:collapse; font-size:.92rem; }
.quote-lines td{ padding:.45rem 0; vertical-align:top; color:var(--ink-soft); }
.quote-lines td + td{ text-align:right; white-space:nowrap; padding-left:1rem; color:var(--ink); }
.quote-lines .is-deposit td{ color:var(--ink-mute); }
.quote-lines .is-total td{
  border-top:1px solid rgba(201,168,76,.45); padding-top:.75rem; font-weight:700; color:var(--ink); font-size:1rem;
}
.quote-err{ margin:0; color:#8A3320; font-size:.92rem; }
.confirm-card p{ color:var(--ink-soft); }
.pay-total{ margin:0 0 1rem; font-size:.95rem; color:var(--ink-soft); }
.pay-total b{ color:var(--ink); font-size:1.05rem; }