/* ==========================================================================
   one h.ohm — private immersion
   Palette: Kacey Hart, 2026-09-08, drawn from the textiles and statuary
   in the Remembership House at 33 Ho'olawa Rd.
   Built by Kahu. #ai-generated
   ========================================================================== */

/* Larken — licensed from Ellen Luff Type Foundry, order ELT-ISYT-C8FO-C8PB,
   2026-09-11. Shipped exactly as delivered: NOT subsetted, not re-encoded, not
   modified in any way, because the licence forbids it. Two cuts only, Thin and
   Regular, and there is no italic. Licence files live beside the fonts in
   Project files/33 Ho'olawa Rd/Aumakua Website + Interior Design/Larken font. */
@font-face{
  font-family:"Larken";
  src:url("fonts/Larken-Thin.woff2") format("woff2"),
      url("fonts/Larken-Thin.woff") format("woff");
  font-weight:100;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Larken";
  src:url("fonts/Larken-Regular.woff2") format("woff2"),
      url("fonts/Larken-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- Kacey's six, verbatim ------------------------------------------- */
  --rose:      #A68E87;   /* Dusty rose        · bundle-dyed silk base     */
  --sage:      #8A837A;   /* Muted moss / sage · embroidered vine stems    */
  --gold:      #998562;   /* Aged gold         · gilt bronze statue faces  */
  --bronze:    #6A665E;   /* Weathered bronze  · oxidized statue patina    */
  --oxblood:   #8D655E;   /* Oxblood / maroon  · temple textile robes      */
  --pine:      #7C7B6F;   /* Deep pine / green · textile background stripes*/

  /* Added by Cecil 2026-09-11 as an accent, alongside Kacey's six rather than
     replacing any of them: a brighter, more saturated gold for the foot of
     the page, buttons and highlights. The three steps below are one hue at
     three values, which is what makes the band read as metal and not paint. */
  --sage-light:  #9B9388;   /* Cecil 2026-09-11 — the terms band; a lighter
                               step of Kacey's muted moss #8A837A */
  /* The inquire and cottage bands, Cecil 2026-09-15. #5B4230 is dark, so the
     ink on it is light — the reverse of the gold it replaces. Alphas chosen so
     every one clears 4.5:1 composited on the brown: .82 = 6.20:1, .70 = 5.03:1,
     .64 = 4.50:1. */
  --brown:       #5B4230;
  --on-brown:    #F6F2EC;
  --on-brown-2:  rgba(246,242,236,.82);
  --on-brown-3:  rgba(246,242,236,.70);
  --line-brown:  rgba(246,242,236,.26);

  --gold-bright: #C4954A;
  --gold-pale:   #E3C489;
  --gold-deep:   #B6863F;   /* the sweep's darkest point, chosen so even
                               there the ink clears 4.5:1 — on a phone the
                               page padding shrinks and text sits on it */
  --on-gold:     #2B2318;   /* text on gold — 6.0:1 against the base */
  --on-gold-2:   rgba(43,35,24,.74);
  --on-gold-3:   rgba(43,35,24,.62);
  --line-gold:   rgba(43,35,24,.22);

  /* --- Grounds and inks, derived from the six by value only ------------ */
  --paper:     #F6F2EC;   /* warm bone — the page ground                   */
  --paper-2:   #EFE9E0;   /* alternating band                              */
  --paper-3:   #E6DFD4;   /* placeholder tiles, wells                      */
  --night:     #1F1D1A;   /* weathered bronze, deepened — full-bleed dark  */
  --night-2:   #2B2823;
  --ink:       #2E2B26;   /* body text                                     */
  --ink-2:     #5C5850;   /* secondary                                     */
  --ink-3:     #8A8378;   /* captions, eyebrows                            */

  --line:      rgba(106,102,94,.20);
  --line-2:    rgba(153,133,98,.42);
  --line-lite: rgba(246,242,236,.26);

  /* --- Type -------------------------------------------------------------
     Larken carries the headings and the reading copy; a geometric sans
     carries the small letterspaced labels, which is the pairing the site
     started with and the one Cecil preferred. Larken's x-height is 0.497em
     — normal proportions — so the sizes below need no compensation.       */
  --f-display: "Larken","Hoefler Text","Iowan Old Style",Palatino,Georgia,serif;
  --f-body:    "Larken","Hoefler Text","Iowan Old Style",Palatino,Georgia,serif;
  --f-ui:      "Avenir Next","Avenir",Futura,"Gill Sans",system-ui,
               -apple-system,"Segoe UI",sans-serif;

  --vgrid-ratio: 3/4;   /* shared by .vgrid img and its placeholder tile */
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --gap: clamp(4.5rem, 10vw, 9.5rem);
  --nav-h: 74px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

/* The footer is white and is the last thing on the page. Painting the root
   white too means that on a window taller than the content, the strip below
   the footer matches it instead of showing the body's bone. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:#FFFFFF }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.94rem + .28vw,1.125rem);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* --- shared primitives ---------------------------------------------------- */
.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:860px}

.eyebrow{
  font-family:var(--f-ui);
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 1.4rem;
  font-weight:500;
}
.eyebrow--light{color:rgba(246,242,236,.66)}

/* "@33" carries the same tracking as the letters around it, which leaves the
   numerals adrift from the @. Pull them back in — Kacey, 2026-09-18.
   The amount has to be per-context because each of these sets its own
   tracking; there is no CSS way to say "a bit less than whatever is inherited". */
.at33{letter-spacing:.04em}
.hero__sub .at33{letter-spacing:.06em}
.portal__foot .at33{letter-spacing:.05em}
h1 .at33,h2 .at33{letter-spacing:-.012em}

h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0}
h1{font-size:clamp(2.4rem,1.2rem + 5.2vw,5rem);line-height:1.03;letter-spacing:-.012em}
h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);line-height:1.12;letter-spacing:-.008em}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.25}

p{margin:0 0 1.4em}
.lede{font-size:clamp(1.18rem,1.02rem + .7vw,1.55rem);line-height:1.6;color:var(--ink)}
.muted{color:var(--ink-2)}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* letterspaced hairline button — the one button shape on the site */
.btn{
  display:inline-block;
  font-family:var(--f-ui);
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  padding:1.05rem 2.4rem;
  border:1px solid var(--line-2);
  background:transparent;
  cursor:pointer;
  transition:background .5s var(--ease), color .5s var(--ease),
             border-color .5s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--paper)}
.btn--light{color:var(--paper);border-color:var(--line-lite)}
.btn--light:hover,.btn--light:focus-visible{background:var(--paper);border-color:var(--paper);color:var(--night)}

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

/* --- wordmark ------------------------------------------------------------- */
.mark{
  font-family:var(--f-display);
  font-weight:400;
  letter-spacing:.12em;
  text-transform:lowercase;
  white-space:nowrap;
}
/*.mark .dot{color:var(--gold)}*/

/* --- nav ------------------------------------------------------------------ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  /* Grid rather than flex so a centre element can be laid out BETWEEN the
     wordmark and the links if one is ever wanted again — absolute centring
     cannot see its neighbours and silently overlaps them. With the middle
     track empty this behaves exactly like space-between. */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-inline:var(--pad);
  transition:background .55s var(--ease), border-color .55s var(--ease),
             backdrop-filter .55s var(--ease);
  border-bottom:1px solid transparent;
}
.nav a{text-decoration:none}
.nav .mark{font-size:1.0625rem;color:var(--paper);transition:color .55s var(--ease)}
.nav-links{display:flex;gap:clamp(1.1rem,2.6vw,2.6rem);align-items:center}
.nav-links a{
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(246,242,236,.82);font-weight:500;
  padding-block:.5rem;position:relative;transition:color .5s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after,
.nav-links a.is-current::after{transform:scaleX(1)}

/* One page, several destinations. The nav is fixed, so an anchor jump
   would otherwise tuck the heading underneath it — this keeps the
   section title clear of the bar by the bar's own height. */
/* Any section the nav can scroll to, on either site — naming ids one by one
   meant the main site's sections landed under the bar because nobody
   remembered to add them. */
section[id],.hero[id],div[id],article[id]{scroll-margin-top:calc(var(--nav-h) + .9rem)}
/* The section straight after the hero is the exception. That .9rem of breathing
   room is a gap between the nav and the target, and whatever sits above the
   target shows through it — here that is the dark bottom edge of the hero
   photograph, which reads as a black bar under the menu. Landing flush with
   the nav closes it. The section's own padding gives the words their room. */
.hero + section[id]{scroll-margin-top:var(--nav-h)}

/* The nav floats over whatever photograph the page opens with, and a light
   hero leaves near-white links on near-white sky. Measured over the offerings
   header that is 1.00:1 — invisible. This lays a short gradient behind the
   bar so the links always have a ground, whatever the image does. It fades
   out downward, so it reads as the top of the photograph darkening rather
   than as a toolbar. */
.nav::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:calc(var(--nav-h) + 3rem);
  background:linear-gradient(to bottom,
    rgba(20,17,14,.62) 0%, rgba(20,17,14,.34) 55%, rgba(20,17,14,0) 100%);
  pointer-events:none;
  z-index:-1;
  transition:opacity .55s var(--ease);
}
.nav.is-solid::before{opacity:0}

.nav.is-solid{background:rgba(246,242,236,.94);border-bottom-color:var(--line);backdrop-filter:saturate(140%) blur(10px)}
.nav.is-solid .mark{color:var(--ink)}
.nav.is-solid .nav-links a{color:var(--ink-2)}
.nav.is-solid .nav-links a:hover{color:var(--ink)}

/* The title sits centred on the bar. Absolute rather than a third flex child:
   the wordmark (90px) and the links (~300px) are nowhere near equal, so
   space-between would put the "centre" well off to the left.
   It is not a link — the wordmark beside it already goes to the top — and
   pointer-events:none keeps it from swallowing clicks as it spans the bar. */
.nav .mark{justify-self:start}
.nav-links{justify-self:end}
@media (max-width:640px){
  .nav-links{gap:1rem}
  .nav-links a{font-size:.625rem;letter-spacing:.14em}
}

/* --- ken burns stage (stands in for the video loop) ----------------------- */
.stage{position:absolute;inset:0;overflow:hidden;background:var(--night)}
/* Slides stack rather than swap. The outgoing one STAYS opaque underneath
   while the incoming fades in on top of it, so the black stage is never
   visible between them — previously both were mid-transition at once and
   roughly a quarter of the black ground showed through, which read as a
   black frame in the loop. --kb-under is the one the JS parks beneath. */
.kb-slide{position:absolute;inset:0;opacity:0;z-index:0;
  transition:opacity 2200ms ease}
.kb-slide.is-under{opacity:1;z-index:1;transition:none}
.kb-slide.is-on{opacity:1;z-index:2}
.kb-slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 11000ms linear;
}
.kb-slide.is-on img{transform:scale(1.16)}
.kb-slide:nth-child(2n) img{transform-origin:70% 40%}
.kb-slide:nth-child(3n) img{transform-origin:30% 65%}
.scrim{
  position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(ellipse 78% 58% at 50% 46%,
                    rgba(24,22,20,.36) 0%, rgba(24,22,20,.16) 48%,
                    rgba(24,22,20,0) 78%),
    linear-gradient(to bottom, rgba(24,22,20,.36) 0%, rgba(24,22,20,.12) 30%,
                    rgba(24,22,20,.18) 68%, rgba(24,22,20,.5) 100%);
}
@media (prefers-reduced-motion:reduce){
  .kb-slide{transition:opacity 600ms ease}
  .kb-slide.is-under{transition:none}
  .kb-slide img,.kb-slide.is-on img{transition:none;transform:scale(1.04)}
}

/* --- hero ----------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.hero__inner{position:relative;z-index:3;text-align:center;padding:var(--nav-h) var(--pad) 0;color:var(--paper)}
.hero .mark{font-size:clamp(2rem,1rem + 4.4vw,4.25rem);color:var(--paper);display:block;
  text-shadow:0 2px 26px rgba(24,22,20,.42)}
.hero__sub{
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(246,242,236,.88);margin-top:1.9rem;
  text-shadow:0 1px 14px rgba(24,22,20,.55);
}
.scrollcue{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:2;
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,242,236,.78);text-shadow:0 1px 12px rgba(24,22,20,.5);text-decoration:none;display:grid;justify-items:center;gap:.7rem;
}
.scrollcue span:not([data-e]){display:block;width:1px;height:46px;background:linear-gradient(rgba(246,242,236,.7),rgba(246,242,236,0));animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.scrollcue span:not([data-e]){animation:none}}

/* page header for the inner pages */
.pagehead{position:relative;min-height:62svh;display:grid;place-items:end start;overflow:hidden;isolation:isolate}
.pagehead__inner{position:relative;z-index:3;color:var(--paper);padding:0 var(--pad) clamp(2.5rem,6vw,4.5rem);max-width:1240px;width:100%;margin:0 auto}
/* The typeface already matches the cottage page exactly — Larken, weight 100,
   the same proportional tracking. What made it read differently was treatment:
   at 80px in solid paper-white over a photograph it sits heavier than the same
   face does as dark ink on paper. Opened the tracking slightly and took the
   white off full strength (Kacey, 2026-09-18). Both are easy to tune. */
.pagehead h1{
  color:rgba(246,242,236,.92);
  letter-spacing:.012em;
  max-width:16ch;
  text-shadow:0 2px 26px rgba(24,22,20,.42);
}

/* --- sections ------------------------------------------------------------- */
.section{padding-block:var(--gap)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.band{background:var(--paper-2)}
.band--brown{
  position:relative;
  background:var(--rose);
  color:var(--on-brown-2);
}
.band--brown h2,.band--brown h3{color:var(--on-brown)}
.band--brown .rule{background:var(--line-brown)}

/* editorial two-column: display line left, prose right */
.editorial{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,4.5vw,5rem);align-items:start}
/* Stack sooner than before. Between ~900 and 1100 the two columns were
   still side by side while the display size had not come down much, which
   is exactly where the title line broke. */
@media (max-width:1000px){.editorial{grid-template-columns:1fr;gap:2.2rem}}
.editorial__body p{max-width:60ch}

.sectionhead{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,3.4vw,3rem)}

/* --- gallery rail --------------------------------------------------------- */
.rail-wrap{position:relative}
.rail{
  display:flex;gap:clamp(.7rem,1.3vw,1.35rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-inline:var(--pad);padding-bottom:1.6rem;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail figure{flex:0 0 auto;margin:0;scroll-snap-align:center}
.rail button.tile{
  display:block;padding:0;border:0;background:none;cursor:zoom-in;
}
.rail img{
  height:clamp(300px,50vh,540px);width:auto;max-width:none;
  object-fit:cover;background:var(--paper-3);
  transition:opacity .5s var(--ease);
}
.rail button.tile:hover img{opacity:.88}
.rail figcaption{
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.9rem;
}
.railnav{display:flex;gap:.35rem}
.railnav button{
  font-family:var(--f-ui);font-size:1.1rem;line-height:1;
  width:2.9rem;height:2.9rem;display:grid;place-items:center;
  background:none;border:1px solid var(--line);color:var(--ink-2);cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.railnav button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* --- placeholder tile (photograph not yet taken) -------------------------- */
.pending{
  background:var(--paper-3);
  border:1px solid var(--line);
  display:grid;place-content:center;text-align:center;gap:.55rem;
  padding:2rem 1.4rem;color:var(--ink-3);
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
}
.pending strong{
  display:block;font-family:var(--f-display);font-size:1.05rem;letter-spacing:0;
  text-transform:none;color:var(--ink-2);font-weight:400;
}
.rail .pending{height:clamp(300px,50vh,540px);width:clamp(240px,26vw,340px)}

/* --- spec list ------------------------------------------------------------ */
.specs{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(2rem,5vw,4.5rem)}
@media (max-width:640px){.specs{columns:1}}
.specs li{
  break-inside:avoid;padding-block:.85rem;border-bottom:1px solid var(--line);
  font-size:1.02rem;
}
.factline{display:flex;gap:1.2rem;flex-wrap:wrap;font-family:var(--f-ui);font-size:.6875rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.factline span{white-space:nowrap}

/* --- terms ---------------------------------------------------------------- */
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(1.6rem,3.4vw,3rem)}
.terms dt{font-family:var(--f-ui);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem}
.terms dd{margin:0;font-family:var(--f-display);font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.3}
.terms dd small{display:block;font-family:var(--f-body);font-size:.9rem;color:var(--ink-2);margin-top:.5rem;line-height:1.6}

/* --- offerings checklist -------------------------------------------------- */
.offer-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:clamp(1.6rem,3vw,2.8rem);align-items:start}
.offer-group{margin:0}
.offer-group > .rule{margin-bottom:.4rem}
.offer{
  display:flex;gap:1rem;align-items:flex-start;
  padding-block:1.05rem;border-bottom:1px solid var(--line);cursor:pointer;
  transition:padding-inline-start .45s var(--ease);
}
.offer:hover{padding-inline-start:.5rem}
.offer input{position:absolute;opacity:0;width:0;height:0}
.box{
  flex:0 0 auto;width:16px;height:16px;margin-top:.5rem;
  border:1px solid var(--line-2);position:relative;transition:background .35s var(--ease),border-color .35s var(--ease);
}
.box::after{
  content:"";position:absolute;left:4px;top:0px;width:5px;height:10px;
  border:solid var(--paper);border-width:0 1.5px 1.5px 0;transform:rotate(42deg) scale(.4);
  opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.offer input:checked ~ .box{background:var(--gold);border-color:var(--gold)}
.offer input:checked ~ .box::after{opacity:1;transform:rotate(42deg) scale(1)}
.offer input:focus-visible ~ .box{outline:2px solid var(--gold);outline-offset:3px}
.offer span.label{font-family:var(--f-display);font-size:1.08rem;line-height:1.45}
.offer input:checked ~ span.label{color:var(--ink)}

.selected-bar{
  position:sticky;bottom:0;z-index:40;
  background:rgba(246,242,236,.95);backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--line);
  padding:1.1rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  transform:translateY(110%);transition:transform .6s var(--ease);
}
.selected-bar.is-up{transform:translateY(0)}
.selected-bar p{margin:0;font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}

/* --- form ----------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.5rem,3vw,2.6rem)}
.field{display:block}
.field label{
  display:block;font-family:var(--f-ui);font-size:.625rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem;
}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  font-family:var(--f-display);font-size:1.12rem;color:var(--ink);
  padding:.55rem 0 .75rem;border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.6;font-size:1.02rem}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.7}
.field--full{grid-column:1/-1}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .4rem;padding:0;list-style:none}
.chips li{
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--ink-2);padding:.5rem .85rem;
}
.chips li.empty{border-style:dashed;color:var(--ink-3)}

.sent{border:1px solid var(--line-2);padding:clamp(2rem,5vw,3.4rem);text-align:center}
.sent h3{margin-bottom:.8rem}

/* --- visual grid (booking) ------------------------------------------------ */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(.7rem,1.4vw,1.3rem)}
.vgrid figure{margin:0;position:relative;overflow:hidden}
.vgrid img{width:100%;height:auto;aspect-ratio:var(--vgrid-ratio);object-fit:cover;
  transition:transform 1.1s var(--ease)}
.vgrid figure:hover img{transform:scale(1.045)}
.vgrid .pending{aspect-ratio:var(--vgrid-ratio)}
.vgrid figcaption{
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.75rem;
}

/* --- full-bleed image band ------------------------------------------------ */
.bleed{position:relative;height:clamp(320px,62vh,620px);overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover}
/* cover crops from the centre, which suits a horizon but loses anything
   low in the frame — the horses in the pasture shot stand about 70% of
   the way down and were being cut off at shorter viewport heights.
   Bias the crop downward: sky is the part we can afford to lose. */
.bleed--low img{object-position:50% 82%}

/* --- footer --------------------------------------------------------------- */
.foot{
  background:#FFFFFF;
  color:var(--ink-2);
  padding-block:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--line);
}
.foot .mark{font-size:1.35rem;color:var(--ink)}
/* the dot is gold — it reads fine on brown and on the white foot */
.band--brown .mark .dot{color:var(--on-brown)}
.foot-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-end}
.foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .4s var(--ease),color .4s var(--ease)}
.foot a:hover{color:var(--ink);border-bottom-color:var(--line)}
.foot-links{display:flex;gap:1.6rem;flex-wrap:wrap;font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase}
.foot small{display:block;font-family:var(--f-ui);font-size:.625rem;letter-spacing:.14em;color:var(--ink-3);margin-top:2.6rem;line-height:2;max-width:78ch}

/* --- scroll reveal -------------------------------------------------------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* --- lightbox ------------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:90;background:rgba(20,19,17,.96);
  display:grid;grid-template-rows:1fr auto;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
  padding:clamp(1rem,4vw,3rem);
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox img{max-width:100%;max-height:78svh;width:auto;object-fit:contain}
.lightbox figcaption{
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,242,236,.6);padding-top:1.4rem;text-align:center;
}
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{
  position:absolute;background:none;border:0;color:rgba(246,242,236,.7);
  font-family:var(--f-ui);cursor:pointer;padding:1rem;line-height:1;
  transition:color .35s var(--ease);
}
.lightbox .lb-close:hover,.lightbox .lb-prev:hover,.lightbox .lb-next:hover{color:var(--paper)}
.lightbox .lb-close{top:clamp(.4rem,2vw,1.4rem);right:clamp(.4rem,2vw,1.4rem);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase}
.lightbox .lb-prev{left:clamp(.2rem,1.6vw,1.2rem);top:50%;transform:translateY(-50%);font-size:1.6rem}
.lightbox .lb-next{right:clamp(.2rem,1.6vw,1.2rem);top:50%;transform:translateY(-50%);font-size:1.6rem}

/* --- mock notice ---------------------------------------------------------- */
.mocknote{
  position:fixed;left:var(--pad);bottom:1.1rem;z-index:80;
  display:flex;align-items:center;gap:.7rem;
  background:rgba(31,29,26,.88);color:rgba(246,242,236,.8);
  border:1px solid rgba(246,242,236,.18);
  padding:.6rem .85rem;backdrop-filter:blur(8px);
  font-family:var(--f-ui);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
}
.mocknote button{background:none;border:0;color:rgba(246,242,236,.55);cursor:pointer;
  font-family:inherit;font-size:.75rem;line-height:1;padding:.2rem}
.mocknote button:hover{color:var(--paper)}
.mocknote[hidden]{display:none}
@media (max-width:560px){.mocknote{font-size:.5rem;left:.6rem;right:.6rem;bottom:.6rem}}

/* --- portal --------------------------------------------------------------- */
.portal{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.portal__inner{position:relative;z-index:2;text-align:center;padding:var(--pad);width:min(700px,100%)}
.portal .mark{font-size:clamp(2.1rem,1rem + 4.8vw,4.5rem);color:var(--paper);display:block;
  text-shadow:0 2px 26px rgba(24,22,20,.42)}
.portal__tag{
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(246,242,236,.82);margin-top:1.6rem;
  text-shadow:0 1px 14px rgba(24,22,20,.55);
}
.portal__gate{margin-top:clamp(2.6rem,6vw,4.2rem)}
.gateform{display:grid;gap:1.5rem;justify-items:center}
.gateform .field{width:min(330px,100%)}
.gateform label{color:rgba(246,242,236,.6)}
.gateform input{
  color:var(--paper);border-bottom-color:rgba(246,242,236,.38);
  text-align:center;letter-spacing:.14em;
}
.gateform input:focus{border-bottom-color:var(--gold)}
.gateform input::placeholder{color:rgba(246,242,236,.32)}
.gatemsg{
  min-height:1.3em;font-family:var(--f-ui);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rose);
}
.shake{animation:shake .45s var(--ease)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-7px)}
  38%{transform:translateX(6px)}
  58%{transform:translateX(-4px)}
  78%{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){.shake{animation:none}}
.portal__foot{
  position:absolute;left:0;right:0;bottom:clamp(1.4rem,4vw,2.6rem);z-index:2;text-align:center;
  font-family:var(--f-ui);font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(246,242,236,.34);
}

/* --- dark band details ---------------------------------------------------- */
.band--brown .terms dt{color:var(--on-brown-3)}
/* The headline terms — the price, the minimum stay, the occupancy — are
   pure white rather than the warm bone used elsewhere, so the numbers a
   guest is actually weighing sit forward of everything around them. */
.band--brown .terms dd{color:#FFFFFF}
.band--brown .terms dd small{color:#FFFFFF;font-size:.95rem}   /* was on-brown-2 at .9rem — lost against the brown (Kacey) */
.band--brown .specs li{border-bottom-color:var(--line-brown)}
.band--brown .factline{color:var(--on-brown-3)}
.band--brown .eyebrow--light{color:var(--on-brown-3)}
/* back to a light outline button, the way it reads on any dark ground */
.band--brown .btn--light{color:var(--on-brown);border-color:var(--line-brown)}
.band--brown .btn--light:hover,.band--brown .btn--light:focus-visible{
  background:var(--on-brown);border-color:var(--on-brown);color:var(--brown);
}

/* --- lightbox figure ------------------------------------------------------ */
.lightbox .lb-fig{margin:0;display:grid;place-items:center;grid-row:1/-1}
.btn + .btn{margin-left:.6rem}
@media (max-width:480px){.btn + .btn{margin-left:0;margin-top:.7rem}}
.cta-row{margin-top:clamp(2.8rem,6vw,4.5rem);display:flex;flex-wrap:wrap;gap:.6rem}
.cta-row .btn + .btn{margin-left:0}
.eyebrow--tight{margin-bottom:.7rem}
.factline--spaced{margin-top:1.8rem}
.foot-blurb{margin:1.2rem 0 0;max-width:34ch;font-size:.95rem}
.offer-group{border:0;padding:0;margin:0;min-width:0}
.offer-group legend{padding:0;margin-bottom:1.4rem}
.form-block{margin-top:clamp(2.4rem,5vw,3.6rem)}
.fine{font-size:.9rem;margin:.8rem 0 0}
.sent p:last-child{margin:0}
.intro{max-width:56ch;margin-bottom:clamp(2.6rem,5.5vw,4.5rem)}

/* ==========================================================================
   LARKEN CALIBRATION
   Two cuts only — Thin (100) and Regular (400) — and no italic. Thin is the
   display voice: at large sizes its fine strokes are the whole point, and it
   is what makes the wordmark sit the way it does. Regular carries everything
   at reading size, where Thin would go weak.

   The small letterspaced labels are NOT Larken. They are the geometric sans,
   which is the pairing this site started with — uppercase at 11px with wide
   tracking is a job for a sans, and Larken has no weight above 400 to hold it.
   ========================================================================== */

/* Display — Thin, and tighter, since Thin opens up the fit. */
h1,h2{font-weight:100;letter-spacing:-.005em}
h1{line-height:1.05}
h3{font-weight:400}
.mark{font-weight:100}
.hero .mark,.portal .mark{font-weight:100}
.lede{font-weight:400}
.terms dd{font-weight:100}
.pending strong{font-weight:400}

/* Larken has no italic cut, so nothing should ask for one — the browser would
   slant the roman, and it slants badly. */
em,i,cite,address{font-style:normal}
.h-sub{display:inline-block;font-size:.66em;color:var(--ink-2);letter-spacing:0}
.aside{color:var(--ink-3)}

/* Larken ships one set of figures, so no numeral feature is needed —
   "$7,500 a week" and "1 king bed" are already lining. */

/* ==========================================================================
   EDIT MODE
   Deliberately plain and a little utilitarian — it should never be mistaken
   for part of the design, and it disappears entirely when not editing.
   ========================================================================== */
.ed-toggle,.ed-btn{
  font-family:var(--f-ui);font-size:.78rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;border:1px solid rgba(246,242,236,.28);
  background:rgba(31,29,26,.9);color:rgba(246,242,236,.9);padding:.6rem 1rem;
  border-radius:0;transition:background .3s var(--ease),color .3s var(--ease);
}
.ed-toggle{position:fixed;right:var(--pad);bottom:1.1rem;z-index:85;backdrop-filter:blur(8px)}
.ed-toggle:hover,.ed-btn:hover{background:var(--paper);color:var(--night)}
body.is-editing .ed-toggle{display:none}

.ed-bar{
  /* Above .ed-picker (z-index 100), deliberately. The status line lives in
     this bar, and with the bar underneath the picker every upload message
     — including "Uploaded" and any failure reason — was painted behind the
     overlay. You uploaded, saw nothing, and concluded it had failed. */
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.8rem var(--pad);
  background:rgba(24,22,20,.96);backdrop-filter:blur(10px);
  border-top:1px solid rgba(246,242,236,.18);
}
.ed-page{
  font-family:var(--f-ui);font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
}
.ed-status{
  font-family:var(--f-ui);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  color:rgba(246,242,236,.6);margin-right:auto;
}
.ed-status.is-good{color:#9FBF9A}
.ed-status.is-bad{color:var(--rose)}
.ed-bar.has-changes .ed-btn--go{background:var(--gold);border-color:var(--gold);color:var(--night)}
/* Bold and italic. Set in the display face so the B and I read as what they
   do, not as two more uppercase labels. */
.ed-format{display:inline-flex;gap:.35rem}
.ed-fmt{min-width:2.4rem;padding:.6rem .7rem;text-transform:none;letter-spacing:0;
  font-family:var(--f-display);font-size:1rem}
body.is-editing{padding-bottom:4.5rem}
body.is-editing .mocknote{display:none}

/* The inquiry header has two states — the invitation, and what it says once
   someone has written. A bare `hidden` on a span is not always enough once
   other display rules are in play, so it is stated here.
   In edit mode BOTH are revealed, along with the thank-you panel: copy you
   cannot see is copy you cannot change, and all of it is editable text. */
[data-head-ask][hidden],
[data-head-sent][hidden]{display:none}
body.is-editing [data-head-sent][hidden]{display:inline}
body.is-editing .sent[hidden]{display:block}

/* the editable runs themselves */
body.is-editing [data-e]{
  outline:1px dashed rgba(153,133,98,.5);outline-offset:3px;
  cursor:text;border-radius:2px;transition:background .2s ease;
}
body.is-editing [data-e]:hover{background:rgba(153,133,98,.12)}
body.is-editing [data-e]:focus{
  outline:2px solid var(--gold);outline-offset:3px;
  background:rgba(153,133,98,.16);
}
body.is-editing .band--brown [data-e],
body.is-editing .hero [data-e],
body.is-editing .pagehead [data-e],
body.is-editing .foot [data-e]{outline-color:rgba(153,133,98,.5)}

/* per-photograph swap control */
.ed-swap{
  position:absolute;left:.5rem;top:.5rem;z-index:6;
  font-family:var(--f-ui);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;border:0;
  background:rgba(24,22,20,.86);color:var(--paper);padding:.45rem .7rem;
}
.ed-swap:hover{background:var(--gold)}
.ed-will-replace{background-size:cover;background-position:center;opacity:.75}

/* the picker */
.ed-picker{
  position:fixed;inset:0;z-index:100;background:rgba(20,19,17,.9);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.ed-picker.is-open{opacity:1;pointer-events:auto}
.ed-panel{
  background:var(--paper);width:min(1000px,100%);max-height:84svh;
  display:flex;flex-direction:column;border:1px solid var(--line);
}
.ed-panel-head{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:1rem 1.2rem;border-bottom:1px solid var(--line);
}
.ed-panel-head strong{font-family:var(--f-display);font-weight:400;font-size:1.2rem;margin-right:auto}
.ed-panel-head .ed-btn{background:var(--ink);border-color:var(--ink)}
.ed-upload{
  font-family:var(--f-ui);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;border:1px solid var(--line-2);
  padding:.6rem 1rem;color:var(--ink);
}
.ed-upload:hover{background:var(--gold);border-color:var(--gold);color:var(--paper)}
.ed-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.7rem;padding:1.2rem;overflow-y:auto;
}
.ed-thumb{border:1px solid transparent;background:none;padding:0;cursor:pointer;text-align:left}
.ed-thumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--paper-3)}
.ed-thumb span{
  display:block;font-family:var(--f-ui);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:.45rem .2rem;
}
.ed-thumb:hover{border-color:var(--gold)}
.ed-thumb:hover span{color:var(--ink)}
.ed-empty{font-family:var(--f-body);color:var(--ink-2);padding:1rem}

/* ==========================================================================
   THE DUSTY ROSE CAST
   Cecil, 2026-09-15 — every photograph on the site carries a rose tint so the
   images read as one set rather than a folder of phone pictures.

   It is an overlay, not a CSS filter(). filter:sepia() — the obvious tool —
   goes golden-brown and cannot be steered to rose; hue-rotate only makes it
   muddy. A flat #A68E87 laid over the image is what reads as dusty rose.

   ON THE BLEND MODE, because it decides whether the dial does anything.
   This began as soft-light, which is gentle by nature: Cecil set the veil to
   .9 and could not see a difference from .42, and he was right — across that
   whole range soft-light moves the red channel about four percentage points.
   The mode is now `color`, which maps the tint's hue and saturation onto the
   photograph's luminance, so the number below spans a real range from
   untouched to a full dusty-rose duotone.

   NOTHING IS BAKED INTO THE FILES. This is a layer the browser draws at serve
   time; what the swap interface imports and stores is the photograph exactly as
   given, untouched. Turn the veil off and the originals are simply there, which
   is what makes the strength safe to change at any point.

   The whole strength lives in --rose-veil below. .28 on the `color` blend is
   the mild cast Cecil asked for; it is NOT comparable to the old soft-light
   numbers (.42 there was far weaker than .28 here). 0 is off, .5 is strong,
   .75 and up is a heavy duotone where the land stops reading as land.

   Note for anyone judging this by eye: if a photograph looks WRECKED rather
   than tinted, check the file before touching this number. An upload that
   came through as a multi-frame webp animates between the picture and its
   grey HDR gain map, which looks like a tint problem and is not one. See the
   2026-09-15 entry in the project note.

   The overlay is scoped to the LARGE images only — the portal loop, the page
   heroes and the full-bleed bands. Gallery tiles, offering tiles and the
   lightbox are deliberately left true; see the note further down.
   ========================================================================== */
:root{
  --rose:       #A68E87;
  --rose-veil:  .28;      /* 0 = off · .28 mild · .5 strong · .75+ heavy */
  --rose-blend: color;    /* see the note above before changing this */
}

/* These need to be containing blocks for their ::after veil. .kb-slide is
   deliberately NOT in this list — it is already position:absolute (which is
   itself a containing block), and setting it relative here dropped the portal
   and hero slides out of their overlay and stacked them down the page. */
.bleed{ position:relative; }

.bleed:not(.bleed--true)::after,
.kb-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--rose);
  mix-blend-mode:var(--rose-blend);
  opacity:var(--rose-veil);
  pointer-events:none;
}

/* The photographs themselves lose a little colour first, so the veil has
   something muted to sit on rather than fighting a saturated image. */
.bleed:not(.bleed--true) img,
.kb-slide img{ filter:saturate(.86) sepia(.06) brightness(1.01); }

/* .bleed--true opts a full-bleed photograph out of the wash entirely. The
   horses at dusk are the case it was made for: the filter flattened exactly
   the light that made the picture worth using (Kacey, 2026-09-18). */

/* The small photographs stay true. The veil is atmosphere for the images you
   fall into — the portal loop, the heroes, the full-bleed bands. A gallery
   tile or an offering tile is something you are reading, and at that size a
   wash of rose reads as muddiness rather than mood. The lightbox goes with
   them: it is a rail tile enlarged, and a photograph must not change colour
   just because you opened it.
   Nothing is deleted here — .rail, .vgrid and .lb-shade simply no longer
   opt in. Add them back to the two lists above to restore the tint. */
.ed-thumb img{ filter:none; }

.lb-shade{display:block;line-height:0}

/* Remove sits under Swap on the same tile. */
.ed-rm{top:2.6rem;background:rgba(93,36,30,.86)}
.ed-rm:hover{background:#7A2B22}
.ed-removing{outline:2px solid #7A2B22;outline-offset:-2px;opacity:.45}
.ed-removing::before{
  content:"Removing on save";position:absolute;inset:auto 0 0 0;z-index:7;
  background:#7A2B22;color:var(--paper);text-align:center;
  font-family:var(--f-ui);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:.4rem;
}

/* Honeypot. Hidden from people and from screen readers, but present in the
   DOM where an automated form-filler will find it and complete it — which is
   how we know the submission is not a person. Never use display:none: some
   bots skip those. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}
.formerr{min-height:1.4em;margin:.6rem 0 0;color:var(--oxblood);
  font-family:var(--f-ui);font-size:.8rem;font-weight:600;letter-spacing:.04em}

/* The offerings shown as a plain list on the offerings page. Same content and
   same grouping as the checklist on the inquiry page — this one is for reading,
   that one is for choosing. */
.offer-list{list-style:none;margin:0;padding:0}
.offer-list li{
  font-family:var(--f-display);font-size:1.22rem;line-height:1.45;
  padding-block:1.05rem;border-bottom:1px solid var(--line);
}

/* ==========================================================================
   ROSE GOLD — the offerings header image only
   Cecil, 2026-09-17. A heavier, warmer tint than the site-wide dusty rose:
   rose gold sits between Kacey's #A68E87 and Cecil's #C4954A. Scoped to this
   one header so it reads as a deliberate treatment rather than an
   inconsistency; the veil everywhere else is unchanged.

   Two layers stacked on the same image. `color` maps the hue onto the
   photograph's luminance, and a lighter `overlay` pass on top puts the metal
   back — colour alone goes flat and chalky at this strength.
   ========================================================================== */
:root{
  --rosegold:        #C08A72;
  --rosegold-lift:   #E3C489;
  --rosegold-veil:   .28;   /* the hue pass. Started at .62, which turned the
                               whole photograph one rose-brown tone — the leaves
                               stopped being green. .28 keeps a warm cast while
                               the foliage and flowers stay their own colours. */
  --rosegold-sheen:  .22;   /* the warm highlight pass */
}
.pagehead--rosegold .kb-slide::after{
  background:var(--rosegold);
  mix-blend-mode:color;
  opacity:var(--rosegold-veil);
}
.pagehead--rosegold .kb-slide img{
  /* Full strength again. The image was muted hard for a while to make the
     heading legible; once the text got its own backing (below) that was no
     longer what was holding the contrast, so the photograph came back. This
     is the argument for the backing in one line: legibility is pinned to the
     words, so the picture is free to be a picture. */
  filter:saturate(1.12) brightness(1.03) contrast(1.05);
}

/* A backing directly behind the words.

   Darkening the whole photograph until its single brightest pixel complied
   would have left a grey rectangle — and still would not guarantee anything,
   because the next photograph dropped in here could be brighter again. This
   pins a dark ground to the text block itself, so legibility holds whatever
   image sits behind it. That is the difference between tuning for one
   photograph and building something that keeps working.                    */
.pagehead--rosegold .pagehead__inner::before{
  content:"";
  position:absolute;
  /* Generous bleed on every side. A tighter box left the gradient still
     partly opaque where it ended, which read as a grey rectangle pasted over
     the photograph — the edge has to fall outside the visible area, not at
     it. */
  inset:-14rem -50vw -6rem -50vw;
  z-index:-1;
  background:radial-gradient(78% 88% at 30% 76%,
    rgba(20,16,13,.88) 0%,
    rgba(20,16,13,.74) 40%,
    rgba(20,16,13,.30) 72%,
    rgba(20,16,13,0)   100%);
  pointer-events:none;
}
/* The sheen. A second pseudo-element is not available on .kb-slide, so it
   rides on the slide's parent stage, which covers exactly the same box. */
.pagehead--rosegold .stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,
    var(--rosegold-lift) 0%, transparent 45%,
    transparent 60%, var(--rosegold) 100%);
  mix-blend-mode:overlay;
  opacity:var(--rosegold-sheen);
  pointer-events:none;
  /* Below the scrim, not above it. At z-index 3 this sat over the scrim and,
     being an overlay blend with a pale gold at its top-left, brightened the
     exact corner the nav links sit in — darkening the scrim did nothing
     because this was painting back over it. The sheen is part of the image
     treatment and belongs under the scrim with it. */
  z-index:1;
}

/* Deploy sits beside Edit. Visually quieter than Edit until it is doing
   something — Edit is the everyday action, Deploy is the occasional one. */
.ed-deploy{
  position:fixed;right:calc(var(--pad) + 5.2rem);bottom:1.1rem;z-index:85;
  font-family:var(--f-ui);font-size:.78rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;
  border:1px solid rgba(246,242,236,.28);
  background:rgba(31,29,26,.9);color:rgba(246,242,236,.9);
  padding:.6rem 1rem;backdrop-filter:blur(8px);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.ed-deploy:hover:not(:disabled){background:var(--paper);color:var(--night)}
.ed-deploy:disabled{cursor:default;opacity:.85}
.ed-deploy.is-busy{background:var(--gold);border-color:var(--gold);color:var(--night)}
.ed-deploy.is-good{background:#4F6B48;border-color:#4F6B48;color:var(--paper)}
.ed-deploy.is-bad{background:#7A2B22;border-color:#7A2B22;color:var(--paper)}
body.is-editing .ed-deploy{display:none}

/* The photograph you just uploaded, marked so it is findable in a long grid. */
.ed-thumb.is-new{outline:2px solid var(--gold);outline-offset:2px}
.ed-thumb.is-new span{color:var(--gold)}



/* ==========================================================================
   THE MAIN SITE (web/main/index.html)
   Shares this stylesheet with the private immersion deliberately — one
   palette, one typeface, one set of components, so the two read as one
   place. Everything below is additions the main page needs; nothing here
   changes how the immersion looks.

   The remaining Pantone values from Kacey's palette, which the immersion
   only used --rose from. Drawn from the textiles and statuary at 33.
   ========================================================================== */
:root{
  --sage:    #8A837A;   /* embroidered vine stems      */
  --gold-a:  #998562;   /* gilt bronze statue faces    */
  --bronze:  #6A665E;   /* oxidised statue patina      */
  --oxblood: #8D655E;   /* antique temple textile robe */
  --pine:    #7C7B6F;   /* temple textile stripes      */
}

/* --- hero: the claim under the place ------------------------------------- */
.hero__claim{
  font-family:var(--f-display);font-weight:100;
  font-size:clamp(1.15rem,1rem + 1vw,1.7rem);
  color:rgba(246,242,236,.92);margin-top:1.1rem;
  text-shadow:0 2px 22px rgba(24,22,20,.5);
}

/* --- the people ----------------------------------------------------------
   <details> rather than a scripted modal: the blurb opens in place, keyboard
   and screen-reader behaviour come for free, and with no JavaScript at all
   every card is simply readable rather than silently empty. */
/* Six dreamers, one row of six — fixed rather than auto-fit, which would fit
   four or five across on some screens and strand the rest on a short row.
   Six divides cleanly at every step down: two rows of three, then three rows
   of two before the tiles get too narrow to read. (Was two rows of four while
   there were eight.) */
.people{
  display:grid;gap:clamp(1rem,2.2vw,1.8rem);
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:1100px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{
  border:0;border-bottom:1px solid var(--line);padding:0 0 1.2rem;
  background:none;text-align:left;cursor:pointer;font:inherit;color:inherit;
  display:grid;gap:.55rem;
}
.person__shot{aspect-ratio:3/4;width:100%}
/* once a real photograph lands in a tile it crops like the placeholder */
img.person__shot{display:block;height:auto;object-fit:cover}
.person__name{
  font-family:var(--f-display);font-size:1.15rem;font-weight:400;color:var(--ink);
}
.person__role{
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.person::after{
  content:"Read more";font-family:var(--f-ui);font-size:.5625rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-a);
}
.person:hover::after,.person:focus-visible::after{color:var(--ink)}

/* --- support: the invitation and the five verbs -------------------------- */
.invitation{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem);
  color:var(--ink);margin-top:2rem;
}
.verbs{
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-a);margin-top:1.2rem;line-height:2.2;
}
/* Each verb jumps to its pillar, and wipes in the same underline the nav
   links use — same 1px, same origin, same easing, so the two read as one
   gesture. The rule is drawn on the inner span (the editable word) rather
   than the anchor, so the separator dot stays outside it. The dots are
   punctuation, not copy, so they are drawn here and never reach the editor. */
.verbs a{color:inherit;text-decoration:none}
.verbs a + a::before{content:"\00b7";margin-inline:.55em;opacity:.7}
.verbs a > span{position:relative}
.verbs a > span::after{
  content:"";position:absolute;left:0;right:0;bottom:-.18rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.verbs a:hover > span::after,.verbs a:focus-visible > span::after{transform:scaleX(1)}

/* --- the five pillars ----------------------------------------------------- */
.pillars .wrap{display:grid;gap:clamp(3rem,7vw,5.5rem)}
.pillar{max-width:60ch}

/* Each pillar carries a photograph on its right. The text column keeps the
   60ch measure it reads best at; the picture takes what is left, capped so it
   never dwarfs the words. Narrow enough and the two stack, picture last —
   which is also the source order, so nothing is reordered for a screen
   reader. */
.pillar:has(> .pillar__img){
  max-width:none;display:grid;align-items:start;
  grid-template-columns:minmax(0,60ch) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);
}
/* height:auto is load-bearing, not tidying. A swapped-in photograph carries
   width= and height= attributes, and those act as presentational hints on the
   CSS height — so an image sized only by width + aspect-ratio takes the file's
   own pixel height instead of the ratio, and stands taller than its neighbours.
   Declaring height here is what keeps every tile the same shape. */
.pillar__img{
  width:100%;height:auto;max-width:26rem;justify-self:end;
  display:block;aspect-ratio:4/5;object-fit:cover;
}
@media (max-width:900px){
  .pillar:has(> .pillar__img){grid-template-columns:minmax(0,1fr)}
  .pillar__img{aspect-ratio:3/2;height:auto;margin-top:1.8rem;max-width:34rem;justify-self:start}
}
.pillar h3{
  font-family:var(--f-display);font-weight:100;
  font-size:clamp(1.6rem,1.1rem + 1.9vw,2.6rem);
  line-height:1.15;margin:.2rem 0 1.1rem;color:var(--ink);
}
.pillar p{margin:0 0 1rem}
.pillar__cta{margin-top:1.6rem}
.pillar .eyebrow--tight{color:var(--sage)}

/* the brown band carries the closing invitation, so its heading needs the
   light treatment the immersion's terms band already defines */
.band--brown .invitation,.band--brown p{color:var(--on-brown-2)}



/* --- the person dialog ----------------------------------------------------
   Opening a bio must not move the page. This sits above everything on its own
   backdrop; the grid behind it is untouched. Dismissed by the backdrop, the
   Close button, or Escape. */
.person-modal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(20,19,17,.82);
  opacity:0;transition:opacity .26s var(--ease);
}
.person-modal.is-open{opacity:1}
.person-modal[hidden]{display:none}
.person-modal__panel{
  position:relative;background:var(--paper);color:var(--ink);
  max-width:56ch;width:100%;max-height:82svh;overflow:auto;
  padding:clamp(1.8rem,4vw,3rem);
  transform:translateY(8px);transition:transform .26s var(--ease);
}
.person-modal.is-open .person-modal__panel{transform:none}
.person-modal__close{
  position:absolute;top:clamp(.7rem,2vw,1.2rem);right:clamp(.7rem,2vw,1.2rem);
  background:none;border:0;cursor:pointer;
  font-family:var(--f-ui);font-size:.5625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.person-modal__close:hover{color:var(--ink)}
.person-modal__role{
  font-family:var(--f-ui);font-size:.5625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .5rem;
}
.person-modal__name{
  font-family:var(--f-display);font-weight:100;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);margin:0 0 1.2rem;
}
.person-modal__bio{font-size:.95rem;line-height:1.8;color:var(--ink-2)}
/* Locking the page behind the dialog removes the scrollbar, which on a
   platform with classic (non-overlay) scrollbars would shift the whole layout
   sideways — the very thing the dialog exists to avoid. Reserving the gutter
   keeps the width constant whether the bar is there or not. */
html{scrollbar-gutter:stable}
body.is-modal{overflow:hidden}

/* --- a strip of photographs, butted edge to edge -------------------------
   Equal shares of the full width with no gaps between them. The images are
   different shapes, so a fixed height plus object-fit:cover is what makes
   the row read as one band rather than a ragged line.
   On a phone five across would be 78px slivers, so the strip scrolls instead
   of shrinking — each frame keeps a width you can actually see. */
.imgbar{display:flex;margin-block:clamp(2.2rem,5vw,3.6rem)}
.imgbar img{
  flex:1 1 0;min-width:0;width:100%;display:block;
  height:clamp(160px,20vw,300px);object-fit:cover;
}

/* When the strip closes a section, the space under it would otherwise be its
   own margin plus two section pads stacked — four times the space above it.
   Drop both pads and let the strip's own margin carry the gap, so it sits with
   the same breathing room above and below. */
section:has(> .imgbar:last-child){padding-bottom:0}
section:has(> .imgbar:last-child) + section{padding-top:0}
@media (max-width:700px){
  .imgbar{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .imgbar::-webkit-scrollbar{display:none}
  .imgbar img{flex:0 0 auto;width:38vw;height:34vw;min-height:150px}
}

/* === giving ==============================================================
   A donation page is a persuasion, so it is built the way the rest of the
   site is: the words first, the figures quiet, nothing shouting. The only
   saturated thing on the page is the filled part of the progress bar, and
   even that is the house gold rather than a progress-bar green.
   Everything here degrades to legible text if the live data never arrives. */

/* The tone change belongs with the heading it introduces, not pressed up
   against the donate button. The ask finishes in the lighter ground with room
   to breathe; the band then starts close enough to "What your giving builds"
   to read as that section beginning. */
.give-top{padding-bottom:clamp(2.6rem,5vw,4rem)}
.give-top + .band{padding-top:clamp(1.8rem,3.5vw,2.6rem)}
.give-top .lede{margin-bottom:clamp(2rem,4vw,3rem)}

/* --- the progress bar ---------------------------------------------------- */
.give-meter{margin-block:clamp(1.6rem,3vw,2.4rem)}
.give-meter__bar{
  height:3px;background:var(--paper-3);overflow:hidden;
}
.give-meter__fill{
  display:block;height:100%;width:0;background:var(--gold);
  /* grows into place on load rather than snapping, so the number beside it
     reads as something that moved */
  transition:width 1.1s var(--ease);
}
@media (prefers-reduced-motion:reduce){.give-meter__fill{transition:none}}
.give-meter__figures{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin:.9rem 0 0;
}
.give-meter__figures strong{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);color:var(--ink);
}
.give-meter__figures span{
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
/* What the headline figure is made of. It has to be read, not squinted at —
   this is the honesty line under a number that includes matched money. */
.give-meter__split{
  font-family:var(--f-ui);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);font-weight:500;
  margin:.7rem 0 0;line-height:1.7;
}
.give-meter__state{
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin:.6rem 0 0;
}
/* before the hub answers there is nothing honest to show, so the bar and its
   figures stay out of the way rather than sitting at a false zero */
.give-meter:not([data-give-live]) .give-meter__bar,
.give-meter:not([data-give-live]) .give-meter__figures{display:none}
/* Someone who has asked for less motion gets the right length, not the growth. */
@media (prefers-reduced-motion:reduce){.give-meter__fill{transition:none}}

.give-cta{margin:clamp(1.4rem,3vw,2.2rem) 0 0;display:flex;align-items:center;
  gap:1.4rem;flex-wrap:wrap}
.btn--give:disabled{opacity:.55;cursor:default}
.btn--give:disabled:hover{background:transparent;color:var(--ink);border-color:var(--line-2)}
.give-cta__alt{
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
  text-decoration:none;border-bottom:1px solid var(--line);
}
.give-cta__alt:hover{color:var(--ink)}

/* The match is the reason to give today, so it is given its own weight —
   display type rather than the small uppercase label it was, set off by a
   gold rule. It sits between the opening paragraph and the figures. */
/* A full-bleed band, not a box: it breaks out of the narrow column to the
   viewport edges. 100vw counts the scrollbar gutter (html has
   scrollbar-gutter:stable), so .give-top clips the few px of overhang
   rather than letting the page scroll sideways. */
.give-top{overflow-x:clip}
.give-match{
  width:100vw;margin:clamp(1.6rem,3vw,2.2rem) 0 0 calc(50% - 50vw);
  padding:clamp(1rem,2.2vw,1.45rem) var(--pad);
  text-align:center;
  background:var(--paper-3);
  /* The site's label voice: the UI sans, capitals, tracked out. Demi rather
     than full bold — firm without shouting across the full width. */
  font-family:var(--f-ui);font-weight:600;
  font-size:clamp(.8rem,.7rem + .35vw,1rem);
  line-height:1.6;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
}
.give-match [data-give-pool]{color:var(--gold-a)}
/* When the band closes the section, it meets the next one flush: no section
   padding below it, so the cream runs straight into "What your giving builds". */
.give-top:has(> .give-match:last-child:not(.is-empty)),
body.is-editing .give-top:has(> .give-match:last-child){padding-bottom:0}
/* No amount yet ("$—"): give.js marks the line empty. Visitors never see
   "a grant of $—"; in Edit it shows so the amount can be filled in. */
.give-match.is-empty{display:none}
body.is-editing .give-match.is-empty{display:block}

/* --- the budget ---------------------------------------------------------- */
.give-budget{list-style:none;margin:2rem 0 0;padding:0}
.give-budget li{
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  padding:.95rem 0;border-bottom:1px solid var(--line);
}
.give-budget__line{font-size:.95rem;color:var(--ink-2)}
.give-budget__amt{
  font-family:var(--f-ui);font-size:.75rem;letter-spacing:.1em;
  color:var(--ink);white-space:nowrap;
}
/* The total is set off by ONE rule. The row above it must stop drawing its
   own bottom border, or that border plus this one plus the gap between them
   read as a double line. The selectors below carry a tag so they outrank
   `.give-budget li`, which otherwise wins and puts a line under the total. */
.give-budget li:has(+ .give-budget__total){border-bottom:0}
.give-budget li.give-budget__total{
  border-top:2px solid var(--ink-3);
  border-bottom:0;
  margin-top:0;
  padding-top:1.15rem;
}
.give-budget__total .give-budget__line{color:var(--ink)}

/* --- the stretch ladder --------------------------------------------------- */
.give-stretch{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.4rem}
.give-stretch li{
  display:grid;gap:.3rem;padding-left:1.6rem;position:relative;
  /* A tier not yet reached is still a thing to read, so it stays legible.
     Reaching one is marked by the dot filling, not by the words appearing. */
  opacity:.88;transition:opacity .5s var(--ease);
}
.give-stretch li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:7px;height:7px;border:1px solid var(--line-2);border-radius:50%;
}
.give-stretch li.is-next{opacity:1}
.give-stretch li.is-reached{opacity:1}
.give-stretch li.is-reached::before{background:var(--gold);border-color:var(--gold)}
.give-stretch__at{
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-a);
}
.give-stretch__label{
  font-family:var(--f-display);font-size:1.15rem;color:var(--ink);
}
.give-stretch__note{font-size:.95rem;color:var(--ink-2)}

/* --- the donor wall -------------------------------------------------------- */
.give-wall{list-style:none;margin:2rem 0 0;padding:0;
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.give-wall li{display:grid;gap:.25rem}
.give-wall__name{font-family:var(--f-display);font-size:1.05rem;color:var(--ink)}
.give-wall__note{font-size:.9rem;line-height:1.7;color:var(--ink-2)}
.give-wall__empty{
  margin:1.6rem 0 0;font-size:.95rem;line-height:1.8;color:var(--ink-3);max-width:46ch;
}
.give-wall__anon{
  margin-top:1.8rem;font-family:var(--f-ui);font-size:.625rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}

/* --- gifts in kind ---------------------------------------------------------
   Named in the same breath as the people who gave money, and set apart just
   enough that nobody reads a value here as cash in the account.

   The whole block hides itself until some row has a name in it, and every
   blank row hides itself too. That is what makes the Edit panel enough to add
   and remove people: type a name into a spare row and they appear, clear the
   name and they are gone. `:has()` does the hiding rather than a script, so it
   holds with JavaScript off, and `body.is-editing` lifts it so the blanks are
   reachable while editing. */
.give-inkind{display:none;margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.give-inkind:has(.give-wall__name span:not(:empty)){display:block}
body.is-editing .give-inkind{display:block}
.give-inkind__head{
  margin:0;font-family:var(--f-ui);font-size:.625rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.give-wall--inkind{margin-top:1.6rem}
.give-inkind li:has(.give-wall__name span:empty){display:none}
.give-wall__gift{font-size:.9rem;line-height:1.7;color:var(--ink-2)}
.give-wall__value{
  font-family:var(--f-ui);font-size:.75rem;letter-spacing:.1em;color:var(--gold-a);
}
.give-inkind__sum{
  margin:2rem 0 0;font-family:var(--f-ui);font-size:.625rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
/* While editing, a blank row has to be findable and clickable — an empty span
   collapses to nothing on screen — so each field gets a resting label. These
   are pseudo-elements, so they are never part of what gets typed or saved. */
body.is-editing .give-inkind li{
  display:grid;padding:.55rem 0;border-bottom:1px dotted var(--line);
}
body.is-editing .give-wall__name span:empty::before{content:"Name"}
body.is-editing .give-wall__gift span:empty::before{content:"what they gave"}
body.is-editing .give-wall__value span:empty::before{content:"value"}
body.is-editing .give-inkind span:empty::before{color:var(--ink-3);font-style:italic}

@media (max-width:640px){
  .give-wall{grid-template-columns:1fr}
  .give-budget li{gap:1rem}
}

/* The preview banner. Loud on purpose — it exists so a sample total can
   never be mistaken for a real one in a screenshot. */
.give-preview-note{
  margin:0;padding:.7rem var(--pad);background:var(--gold);color:var(--paper);
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;text-align:center;position:relative;z-index:70;
}

/* While editing, a dreamer tile is a div rather than a button, so it is
   text to be typed into — not something to press. */
body.is-editing .person{cursor:text}
body.is-editing .person::after{display:none}

/* --- the other programmes, at the foot of a donation page ----------------
   Someone who has just read one case is the likeliest person to care about
   another, so the page ends by offering the rest rather than sending them
   back to find their place in the support section. Five across on a wide
   screen, scrolling sideways on a phone the way the imgbar does. */
.give-more__head{
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
  margin:0 0 clamp(1.4rem,3vw,2rem);
}
.give-more__row{display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(5,minmax(0,1fr))}
.give-more__item{text-decoration:none;color:inherit;display:grid;gap:.6rem}
.give-more__item img{
  width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.92);transition:filter .5s var(--ease),opacity .5s var(--ease);
  opacity:.9;
}
.give-more__item:hover img,.give-more__item:focus-visible img{filter:none;opacity:1}
.give-more__name{
  font-family:var(--f-display);font-size:1rem;line-height:1.3;color:var(--ink-2);
  transition:color .4s var(--ease);
}
.give-more__item:hover .give-more__name{color:var(--ink)}
.give-more__all{margin:clamp(1.8rem,3vw,2.4rem) 0 0}
.give-more__all a{
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.give-more__all a:hover{color:var(--ink)}

@media (max-width:860px){
  .give-more__row{
    display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .give-more__row::-webkit-scrollbar{display:none}
  .give-more__item{flex:0 0 auto;width:46vw;max-width:230px}
}