/* ==========================================================================
   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);
  display:flex;align-items:center;justify-content:space-between;
  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{transform:scaleX(1)}

/* 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)}

@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,.62) 0%, rgba(24,22,20,.28) 48%,
                    rgba(24,22,20,0) 78%),
    linear-gradient(to bottom, rgba(24,22,20,.58) 0%, rgba(24,22,20,.24) 30%,
                    rgba(24,22,20,.34) 68%, rgba(24,22,20,.72) 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}

/* --- 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}

/* --- 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)}
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)}