/* ============================================================
   The Studio by Linds & Lace — design system
   A Sundae Software Solutions build.
   Vibe: elegant, vintage-romantic. Cream + sage + dusty rose,
   high-contrast serif display, delicate script accents.
   ============================================================ */
:root{
  /* ---- Brand palette (from the Studio brand board) ------------------
     #EDEADF cream · #72635E taupe · #C0C2A4 sage · #000000 black.
     Those four are the whole brand. Everything below is a tint or shade
     of one of them, so nothing on the page is off-brand.               */
  --cream:#EDEADF;      --cream-2:#F5F3EC;   --paper:#ffffff;
  --taupe:#72635E;      --taupe-deep:#584C48; --taupe-soft:#B9AEAA;
  --sage:#C0C2A4;       --sage-deep:#8E9174;  --sage-soft:#DCDDCA;
  --ink:#000000;        --ink-soft:#72635E;   --line:#DCD7C9;

  /* Legacy aliases. The old palette had a rose accent that is not in the
     brand board; these keep older markup rendering on-brand instead of
     leaving stray pink around the site. */
  --rose:#72635E;       --rose-deep:#584C48;  --rose-soft:#DCD7C9;
  --gold:#C0C2A4;

  --shadow:0 22px 60px rgba(114,99,94,.16);
  --shadow-sm:0 10px 26px rgba(114,99,94,.12);
  --radius:4px;         --radius-lg:10px;
  /* Tan Winkle is the brand display face. It is a licensed font, so it is
     only used if it has been installed/self-hosted; otherwise this falls
     back to the closest available high-contrast serif. */
  --font-display:"Tan Winkle","TAN Winkle","Cormorant Garamond",Georgia,serif;
  --font-script:"Pinyon Script", cursive;
  --font-body:"Montserrat", system-ui, -apple-system, sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);background:var(--cream);
  line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;font-size:16px;
}
img{max-width:100%;display:block}
a{color:var(--sage-deep);text-decoration:none;transition:color .2s}
a:hover{color:var(--rose-deep)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

/* Type */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;color:var(--ink);margin:0 0 .4em;line-height:1.12}
h1{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:.01em}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.5rem}
p{margin:0 0 1.1em}
.script{font-family:var(--font-script);font-weight:400;color:var(--rose-deep);line-height:1}
.eyebrow{font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.32em;
  font-size:.72rem;color:var(--sage-deep)}
.lead{font-size:1.16rem;color:var(--ink-soft)}
.center{text-align:center}
.muted{color:var(--ink-soft)}

/* Buttons */
.btn{display:inline-block;font-family:var(--font-body);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:.76rem;padding:15px 34px;border:1px solid var(--sage-deep);
  border-radius:var(--radius);cursor:pointer;transition:all .22s;background:none;color:var(--sage-deep)}
.btn:hover{background:var(--sage-deep);color:var(--cream-2)}
.btn-solid{background:var(--sage-deep);color:var(--cream-2);border-color:var(--sage-deep)}
.btn-solid:hover{background:var(--rose-deep);border-color:var(--rose-deep);color:#fff}
.btn-rose{background:var(--rose-deep);border-color:var(--rose-deep);color:#fff}
.btn-rose:hover{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff}
.btn-ghost-light{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--ink)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(237,234,223,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand .mark{height:44px;width:auto}
.brand .bname{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.brand .bname small{display:block;font-family:var(--font-script);font-size:1rem;letter-spacing:0;
  text-transform:none;color:var(--rose-deep);margin-top:2px}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;color:var(--ink)}
.nav-links a:hover{color:var(--rose-deep)}
.nav-links .btn{padding:11px 22px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);display:block}

/* Hero */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden;background:var(--sage-deep)}
.hero .hero-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;filter:brightness(.82)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(50,46,40,.35),rgba(50,46,40,.5))}
.hero .in{position:relative;z-index:2;padding:60px 24px;max-width:820px}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero h1{color:#fff;font-weight:500;margin:.2em 0}
.hero .script{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem);display:block;margin:-.1em 0 .1em}
.hero p{color:rgba(255,255,255,.92);font-size:1.15rem;max-width:600px;margin:1em auto 1.6em}
.hero .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Sections */
section{padding:clamp(64px,9vw,120px) 0}
.section-head{max-width:680px;margin:0 auto 54px;text-align:center}
.section-head .eyebrow{display:block;margin-bottom:14px}
.divider{width:54px;height:1px;background:var(--rose-deep);margin:18px auto;opacity:.7}
.bg-cream2{background:var(--cream-2)}
.bg-sage{background:var(--sage-deep);color:var(--cream-2)}
.bg-sage h1,.bg-sage h2,.bg-sage h3{color:var(--cream-2)}
.bg-sage .eyebrow{color:var(--sage-soft)}
.bg-rose-soft{background:var(--rose-soft)}

/* Intro split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.split.reverse .split-media{order:2}
.split-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;
  aspect-ratio:4/5;object-fit:cover}
.split-media.frame{position:relative}
.split-media.frame::before{content:"";position:absolute;inset:16px -16px -16px 16px;
  border:1px solid var(--rose);border-radius:var(--radius-lg);z-index:-1}

/* Cards grid */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .card-body{padding:26px}
.card h3{margin-bottom:.3em}
.card .price{font-family:var(--font-display);font-size:2rem;color:var(--sage-deep)}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}

/* Amenities list */
.amenity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px}
.amenity{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.amenity .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--rose-deep);margin-top:9px}
.amenity b{font-weight:600;letter-spacing:.02em}

/* Feature (monthly setup) */
.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);background:var(--paper)}
.feature img{height:100%;object-fit:cover;min-height:340px}
.feature .feature-body{padding:clamp(30px,5vw,56px);display:flex;flex-direction:column;justify-content:center}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius);cursor:pointer;transition:opacity .2s}
.gallery img:hover{opacity:.9}
.gallery .tall{grid-row:span 2;aspect-ratio:1/2}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:step}
.step{text-align:center}
.step .num{font-family:var(--font-display);font-size:2.4rem;color:var(--rose-deep);
  width:70px;height:70px;border:1px solid var(--rose);border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin:0 auto 16px}

/* CTA band */
.cta-band{text-align:center}
.cta-band h2{margin-bottom:.2em}

/* Location */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.loc iframe{width:100%;height:100%;min-height:360px;border:0}
.loc .loc-body{padding:clamp(30px,5vw,56px);background:var(--paper)}
.loc .loc-body p{margin-bottom:.4em}

/* Footer */
.site-footer{background:var(--ink);color:#D9D1C4;padding:64px 0 30px}
.site-footer a{color:#D9D1C4}
.site-footer a:hover{color:var(--rose)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.site-footer h4{color:#fff;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--font-body);font-weight:600;margin-bottom:16px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.footer-brand .bname{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.footer-brand .script{color:var(--rose);font-size:1.5rem}
.sister{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;text-align:center;
  font-size:.78rem;color:#9c9384}
.socials{display:flex;gap:14px}
.socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.socials svg{width:17px;height:17px;fill:currentColor}

/* helpers / inner pages */
.ph{background:linear-gradient(135deg,var(--sage-soft),var(--rose-soft))}
.pagehead{padding:clamp(70px,8vw,110px) 0 0;text-align:center}
.pagehead .eyebrow{display:block;margin-bottom:14px}
.pagehead p{max-width:620px;margin:0 auto}
.tag{display:inline-block;background:var(--rose-soft);color:var(--rose-deep);padding:5px 14px;
  border-radius:999px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.prose p{font-size:1.05rem}
.prose h3{margin-top:1.5em;color:var(--sage-deep)}
.list-check{list-style:none;padding:0;margin:0}
.list-check li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line)}
.list-check li::before{content:"";position:absolute;left:2px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--rose-deep)}
.faq-item{border-bottom:1px solid var(--line);padding:24px 0}
.faq-item:last-child{border-bottom:0}
.faq-item h3{margin:0 0 .3em;font-size:1.35rem;color:var(--ink)}
.pricebox{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:40px 32px;text-align:center;box-shadow:var(--shadow-sm)}
.pricebox.featured{border-color:var(--rose);box-shadow:var(--shadow)}
.pricebox .price{font-family:var(--font-display);font-size:3rem;color:var(--sage-deep);line-height:1}

/* Booking widget */
.booking{max-width:620px;margin:0 auto}
.bk-step{margin-bottom:32px}
.bk-step .step-label{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
.booking .chips{justify-content:center}
.cal{margin:0 auto}
.bk-step .step-label .n{width:28px;height:28px;border-radius:50%;background:var(--rose-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;flex:none}
.bk-step .step-label h3{margin:0;font-size:1.3rem}
.cal{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);max-width:440px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head strong{font-family:var(--font-display);font-size:1.3rem;font-weight:500}
.cal-head button{background:none;border:1px solid var(--line);border-radius:var(--radius);width:36px;height:36px;cursor:pointer;font-size:1.1rem;color:var(--ink)}
.cal-head button:hover{border-color:var(--sage)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:4px 0}
.cal-day{aspect-ratio:1;border:1px solid transparent;border-radius:var(--radius);background:var(--cream);cursor:pointer;
  font-family:var(--font-body);font-size:.92rem;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:all .15s}
.cal-day:hover{border-color:var(--sage)}
.cal-day.sel{background:var(--sage-deep);color:#fff}
.cal-day.disabled{opacity:.28;cursor:default;background:transparent}
.cal-day.empty{background:transparent;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:10px 18px;cursor:pointer;font-size:.9rem;transition:all .15s}
.chip:hover{border-color:var(--sage)}
.chip.sel{background:var(--rose-deep);color:#fff;border-color:var(--rose-deep)}
.summary{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px}
.summary .row{display:flex;justify-content:space-between;padding:5px 0}
.summary .total{font-family:var(--font-display);font-size:1.6rem;color:var(--sage-deep);border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:6px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--font-body);font-size:1rem;background:var(--paper);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage)}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:0}
.note{background:var(--rose-soft);border-radius:var(--radius);padding:13px 16px;font-size:.86rem;color:var(--rose-deep)}
.confirm{background:var(--paper);border:1px solid var(--sage);border-radius:var(--radius-lg);padding:clamp(30px,5vw,48px);text-align:center;box-shadow:var(--shadow)}
.confirm .check{width:64px;height:64px;border-radius:50%;background:var(--sage-deep);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:1.8rem}
.muted-sm{font-size:.82rem;color:var(--ink-soft)}
.hidden{display:none}
.bk-status{min-height:1.2em;font-weight:500;margin-top:8px}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:900px){
  .grid-3,.amenity-grid,.steps{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .split,.feature,.loc{grid-template-columns:1fr}
  .split.reverse .split-media{order:0}
  .feature img{min-height:260px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav-links{position:fixed;inset:78px 0 auto 0;background:var(--cream-2);flex-direction:column;
    align-items:flex-start;gap:0;padding:10px 24px 24px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-sm);display:none}
  .nav-links.open{display:flex}
  .nav-links li{width:100%;padding:10px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:flex}
  .grid-3,.grid-2,.amenity-grid,.steps,.footer-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

/* ===================== Owner admin ===================== */
.admin-wrap{max-width:1060px;margin:0 auto;padding:26px 24px 90px}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.admin-top .brand .bname{font-size:1rem}
.admin-login{max-width:400px;margin:70px auto;text-align:center}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:26px;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 16px;cursor:pointer;
  font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;color:var(--ink-soft)}
.tabs button.active{color:var(--sage-deep);border-color:var(--sage-deep)}
.panel{display:none}.panel.active{display:block}
.acal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.acal-head strong{font-family:var(--font-display);font-size:1.5rem;font-weight:500}
.acal-head button{background:none;border:1px solid var(--line);border-radius:var(--radius);width:36px;height:36px;cursor:pointer;font-size:1.1rem}
.acal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.acal .dow{text-align:center;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:4px 0}
.acell{min-height:96px;border:1px solid var(--line);border-radius:var(--radius);padding:7px;background:var(--paper);cursor:pointer;transition:border-color .15s}
.acell:hover{border-color:var(--sage)}
.acell.empty{background:transparent;border:0;cursor:default}
.acell.today .dn{color:var(--rose-deep);font-weight:700}
.acell.sel{outline:2px solid var(--sage-deep);outline-offset:-1px}
.acell.blocked{background:repeating-linear-gradient(45deg,#f4ede1,#f4ede1 6px,#e9dcc9 6px,#e9dcc9 12px)}
.acell .dn{font-weight:600;font-size:.82rem;color:var(--ink)}
.pill-mini{display:block;font-size:.64rem;background:var(--sage-soft);color:var(--sage-deep);border-radius:4px;
  padding:1px 5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill-mini.hold{background:var(--rose-soft);color:var(--rose-deep)}
.pill-mini.blk{background:#e9dcc9;color:#8a7a58}
.drawer{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;margin-top:20px;box-shadow:var(--shadow-sm)}
.drawer h3{margin:0 0 4px}
.brow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brow:last-of-type{border-bottom:0}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.68rem;font-weight:700;text-transform:capitalize}
.b-pending{background:#f3ecd6;color:#8a7a3f}.b-confirmed{background:#dbeadb;color:#3f7a46}
.b-cancelled{background:#f1e2e0;color:#a35a52}.b-manual{background:var(--rose-soft);color:var(--rose-deep)}
.mini-btn{border:1px solid var(--line);background:var(--paper);border-radius:var(--radius);padding:6px 11px;font-size:.74rem;cursor:pointer;color:var(--ink)}
.mini-btn:hover{border-color:var(--sage)}
.mini-btn.danger{color:#a3352a;border-color:#e3c9c4}
.mini-btn.go{background:var(--sage-deep);color:#fff;border-color:var(--sage-deep)}
.atable{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.atable th,.atable td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.atable th{background:var(--cream-2);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);white-space:nowrap}
.atable tr:last-child td{border-bottom:0}
.hold-form{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;margin-top:14px}
.hold-form .field{margin:0}
.setgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:640px}
@media(max-width:720px){.hold-form,.setgrid{grid-template-columns:1fr 1fr}.acell{min-height:74px}}

/* Membership plan picker (join.html) */
.planpick{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;width:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 22px 24px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.planpick:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.planpick:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.planpick.on{border-color:var(--rose);box-shadow:var(--shadow)}
.planpick.on::after{content:"Selected";position:absolute;top:14px;right:16px;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--rose-deep)}
.planpick .tag{align-self:flex-start;margin-bottom:6px}
.planpick .pname{font-family:var(--font-display);font-size:1.5rem;line-height:1.15;color:var(--ink)}
.planpick .pprice{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--sage-deep)}
.planpick .pprice small{font-family:var(--font-body);font-size:.8rem;color:var(--ink-soft);margin-left:4px}
.planpick .pdesc{font-size:.86rem;margin-top:4px}

/* Inline form error */
.formerr{background:#FBEDED;border:1px solid #E4C4C4;color:#8E4B4B;
  border-radius:var(--radius);padding:10px 14px;font-size:.86rem;margin:0 0 14px}

@media (max-width:640px){
  .planpick{padding:18px}
  .planpick .pprice{font-size:2rem}
}

/* Member pricing on the booking summary */
.summary .row.member{color:var(--sage-deep);font-weight:600}
.member-banner{background:#EFF3EC;border:1px solid var(--sage-soft);border-left:3px solid var(--sage-deep);
  border-radius:var(--radius);padding:11px 14px;font-size:.86rem;color:var(--ink);margin:0 0 18px;line-height:1.5}
.member-banner strong{color:var(--sage-deep)}

/* ---- Props grid (the-space.html #props) --------------------------------
   Each figure degrades gracefully: if the photo is missing, .noimg hides
   the broken image and leaves a soft sage tile so the page still reads. */
.props-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:26px}
.prop{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.prop:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.prop img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sage-soft)}
.prop.noimg img{display:none}
.prop.noimg::before{content:"";display:block;aspect-ratio:4/5;
  background:linear-gradient(140deg,var(--sage-soft),var(--cream))}
.prop figcaption{padding:14px 16px 18px;display:flex;flex-direction:column;gap:4px}
.prop figcaption b{font-family:var(--font-display);font-size:1.12rem;font-weight:500;color:var(--ink)}
.prop figcaption span{font-size:.83rem;line-height:1.5;color:var(--ink-soft)}
@media (max-width:520px){
  .props-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .prop figcaption{padding:11px 12px 14px}
  .prop figcaption b{font-size:1rem}
  .prop figcaption span{font-size:.78rem}
}

/* ---- Form card (join.html) ---------------------------------------------
   .card gets its padding from .card-body, which a bare <form> does not
   have, so the fields were running flush to the border. This gives the
   form real breathing room and loosens the vertical rhythm. */
.form-card{padding:clamp(26px,4.2vw,48px)}
.form-card .field{margin-bottom:22px}
.form-card .field.row2{gap:20px;margin-bottom:22px}
.form-card .field.row2 .field{margin-bottom:0}
.form-card label{margin-bottom:9px}
.form-card input,.form-card select,.form-card textarea{padding:14px 16px}
.form-card textarea{min-height:112px;resize:vertical}
.form-card .btn{margin-top:10px;padding:17px 34px}
.form-card .formerr{margin-bottom:18px}
@media (max-width:600px){
  .form-card .field.row2{grid-template-columns:1fr;gap:0}
  .form-card .field.row2 .field{margin-bottom:22px}
}
/* A form should not lift on hover the way a clickable card does. */
.form-card:hover{transform:none;box-shadow:var(--shadow-sm)}

/* ---- Rate card (book.html #rates) --------------------------------------
   Read-only price list. Informational only: nothing here is clickable, so
   browsing the rates never starts a booking. */
.ratecard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.rate-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;
  padding:16px 22px;border-bottom:1px solid var(--line)}
.rate-row:last-child{border-bottom:0}
.rate-row.best{background:var(--cream-2)}
.rate-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.rate-name b{font-family:var(--font-display);font-size:1.22rem;font-weight:500;color:var(--ink)}
.rate-tag{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--sage-deep);background:var(--sage-soft);border-radius:100px;padding:4px 10px;white-space:nowrap}
.rate-per{font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.rate-price{font-family:var(--font-display);font-size:1.5rem;color:var(--sage-deep);
  text-align:right;min-width:84px}
@media (max-width:560px){
  .rate-row{grid-template-columns:1fr auto;gap:4px 14px;padding:14px 16px}
  .rate-name{grid-column:1;grid-row:1}
  .rate-price{grid-column:2;grid-row:1;font-size:1.3rem;min-width:0}
  .rate-per{grid-column:1/-1;grid-row:2;font-size:.75rem}
}

/* Amenity card with no photo yet: draw a branded tile rather than leave a
   white gap where the image should be. Matches the props-grid behaviour. */
.card.noimg img{display:none}
.card.noimg::before{content:"";display:block;aspect-ratio:3/2;
  background:linear-gradient(140deg,var(--sage-soft),var(--cream))}

/* ---- Discount code field (booking form) -----------------------------------
   The Apply button sits on the same row as the input and is sized to match
   the input's height exactly, so the pair reads as one control rather than
   two stacked things.                                                       */
.promo-field{margin-bottom:16px}
.promo-row{display:flex;gap:10px;align-items:stretch}
.promo-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.06em}
/* Placeholder stays sentence case; only typed codes are uppercased. */
.promo-row input::placeholder{text-transform:none;letter-spacing:0}
.promo-row .btn{flex:0 0 auto;padding:12px 20px;font-size:.7rem;white-space:nowrap}
.promo-note{margin:8px 0 0;font-size:.85rem;line-height:1.5}
.promo-note.ok{color:var(--sage-deep);font-weight:600}
.promo-note.warn{color:var(--rose-deep)}

/* Calendar: dim the grid while a month's availability is loading, so days
   don't flash from clickable to greyed as the answer arrives. */
.cal-grid.cal-loading{opacity:.45;pointer-events:none;transition:opacity .15s}

/* A day that exists but is too short for the chosen length reads as
   unavailable rather than absent -- it still shows its number. */
.cal-day.disabled{cursor:not-allowed}

/* ---- Rate card rows are the length picker ---------------------------------
   These used to be <div>s. They're <button>s now, so the browser's default
   button styling has to be unwound before the original grid layout applies.
   Everything below either resets a button default or adds the affordance
   that tells you it's clickable.                                            */
.rate-row{
  width:100%;
  font:inherit;
  color:inherit;
  text-align:left;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);   /* restated: the reset above kills it */
  cursor:pointer;
  position:relative;
  transition:background .18s,box-shadow .18s;
}
.rate-row:hover{background:var(--cream-2)}
.rate-row.best:hover{background:var(--sage-soft)}
.rate-row:focus-visible{outline:2px solid var(--sage-deep);outline-offset:-3px}

/* "Select →" hint. Hidden until hover on a mouse, and permanently visible on
   touch, where there is no hover to reveal it and the row would otherwise
   look like static text. */
.rate-go{
  grid-column:1/-1;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--sage-deep);
  margin-top:2px;
  opacity:0;transition:opacity .18s;
}
@media (hover:hover){
  .rate-row:hover .rate-go,.rate-row:focus-visible .rate-go{opacity:1}
}
@media (hover:none){
  .rate-go{opacity:.75}
}

/* Chosen block. The left bar survives the sage fill, which the tag and the
   price would otherwise blend into. */
.rate-row.sel,.rate-row.sel.best{background:var(--sage-deep)}
.rate-row.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--taupe-deep)}
.rate-row.sel .rate-name b,
.rate-row.sel .rate-per,
.rate-row.sel .rate-price,
.rate-row.sel .rate-go{color:var(--cream-2)}
.rate-row.sel .rate-tag{background:rgba(255,255,255,.22);color:var(--cream-2)}
.rate-row.sel .rate-go{opacity:1}

/* ---- Instagram handle, homepage monthly set-up ----------------------------
   The handle itself is the call to action. A button reading "See what's live
   now" told nobody what account to look for.                                */
.ig-follow{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:4px;padding:12px 20px 12px 14px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);
  text-decoration:none;
  transition:border-color .22s,background .22s,transform .22s;
}
.ig-follow:hover,.ig-follow:focus-visible{
  border-color:var(--sage-deep);
  background:var(--cream-2);
  transform:translateY(-1px);
}
.ig-follow:focus-visible{outline:2px solid var(--sage-deep);outline-offset:2px}

.ig-mark{
  flex:0 0 auto;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--sage-deep);
}
.ig-mark svg{width:20px;height:20px;fill:var(--cream-2)}

.ig-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.ig-kicker{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--sage-deep);
}
/* Display serif so the handle reads as a name rather than a URL. Wraps rather
   than overflowing: it is a long handle and the feature column is narrow. */
.ig-handle{
  font-family:var(--font-display);
  font-size:1.18rem;line-height:1.2;color:var(--ink);
  overflow-wrap:anywhere;
}
@media (max-width:520px){
  .ig-follow{gap:11px;padding:11px 15px 11px 11px}
  .ig-mark{width:33px;height:33px}
  .ig-mark svg{width:17px;height:17px}
  .ig-handle{font-size:1rem}
}

/* ---- Recent Instagram posts (homepage) ------------------------------------
   Square tiles under the handle. Hidden entirely until JS has real photos, so
   an unconnected or empty feed leaves no gap in the page.                   */
.ig-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:20px;
  max-width:420px;
}
.ig-grid[hidden]{display:none}

.ig-tile{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--cream-2);      /* holds the square while the image loads */
}
.ig-tile img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  /* Match the restrained feel of the rest of the page: posts sit back until
     you look at one. */
  filter:saturate(.92);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .3s;
}
.ig-tile:hover img,.ig-tile:focus-visible img{transform:scale(1.06);filter:saturate(1)}
.ig-tile:focus-visible{outline:2px solid var(--sage-deep);outline-offset:2px}

/* Play marker for video posts, since the tile shows a still frame. */
.ig-vid{
  position:absolute;right:7px;bottom:6px;
  font-size:.6rem;line-height:1;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
  pointer-events:none;
}

@media (max-width:520px){
  .ig-grid{gap:6px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .ig-tile img{transition:none}
  .ig-tile:hover img{transform:none}
}