/* Limestone Hollow — brand tokens */
:root {
  --sage: #56644A;
  --sage-deep: #3F4B36;
  --stone: #C9BFAE;
  --stone-light: #E2DCD0;
  --cream: #F6F3EE;
  --char: #2E2F2A;
  --char-soft: #3A3B35;
  --clay: #B08968;
  --ink: var(--char);
  --paper: var(--cream);
  --font: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gutter: clamp(20px, 5vw, 72px);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: var(--char); --paper: var(--cream); } }
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
body { font-family: var(--font); font-weight: 300; color: var(--ink); background: var(--paper); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
h1, h2, h3 { font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 7vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 400; }
p { max-width: 62ch; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.section { padding: clamp(72px, 11vw, 150px) var(--gutter); }
.section-head { display: grid; gap: 18px; max-width: 900px; margin-bottom: clamp(36px, 5vw, 64px); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 400; font-size: .95rem; letter-spacing: .01em; transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s; border: 1px solid transparent; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--sage); color: var(--cream); }
.btn-primary:hover { background: var(--sage-deep); }
.btn-ghost { border-color: currentColor; }
.btn-ghost:hover { background: rgba(46,47,42,.06); }
.btn-light { background: var(--cream); color: var(--char); }
.btn-outline-light { border-color: rgba(246,243,238,.5); color: var(--cream); }
.btn-outline-light:hover { border-color: var(--cream); }
.btn:disabled { opacity: .5; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* content switched off in js/site-data.js stays off, whatever display its class sets */
[hidden] { display: none !important; }

/* nav */
.nav { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); transition: background .4s, backdrop-filter .4s, box-shadow .4s; }
.nav.scrolled { background: rgba(246,243,238,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(46,47,42,.08); }
.nav.on-dark:not(.scrolled) { color: var(--cream); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 42px; height: 42px; }
.brand-word { display: grid; line-height: 1; font-size: 1.05rem; }
.brand-word b { font-weight: 400; }
.brand-word small { font-size: .55rem; letter-spacing: .28em; margin-top: 4px; opacity: .7; }
.nav-links { display: none; gap: 30px; font-weight: 400; font-size: .95rem; }
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .35s var(--ease); }
.nav-links a:hover::after { right: 0; }
.nav-cta { display: none; }
.menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; }
.menu-btn span { width: 18px; height: 1.5px; background: currentColor; position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--sage); color: var(--cream); display: grid; align-content: center; gap: 22px; padding: var(--gutter); font-size: 2rem; font-weight: 300; transform: translateY(-100%); transition: transform .55s var(--ease); }
.menu-open .mobile-menu { transform: none; }
.mobile-menu a { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s var(--ease); }
.menu-open .mobile-menu a { opacity: 1; transform: none; }
.menu-open .mobile-menu a:nth-child(2) { transition-delay: .06s; } .menu-open .mobile-menu a:nth-child(3) { transition-delay: .12s; } .menu-open .mobile-menu a:nth-child(4) { transition-delay: .18s; } .menu-open .mobile-menu a:nth-child(5) { transition-delay: .24s; }
@media (min-width: 900px) { .nav-links, .nav-cta { display: inline-flex; } .menu-btn { display: none; } }

/* hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 0 var(--gutter) clamp(40px, 7vw, 90px); color: var(--cream); overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media .photo { position: absolute; inset: 0; will-change: transform; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,47,42,.35) 0%, rgba(46,47,42,0) 35%, rgba(46,47,42,.72) 100%); }
.hero-inner { display: grid; gap: 22px; max-width: 980px; }
.hero h1 { max-width: 12ch; }
.hero .lede { max-width: 48ch; color: rgba(246,243,238,.88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-meta { position: absolute; right: var(--gutter); bottom: clamp(40px, 7vw, 90px); display: none; gap: 6px; text-align: right; font-size: .85rem; color: rgba(246,243,238,.75); }
@media (min-width: 900px) { .hero-meta { display: grid; } }
/* transition banner (site-data.js `banner`): in the hero's flow, just above the headline, so it never covers text */
/* padding-top = the fixed nav (72px) + 16px: only matters on short screens, where the hero's content
   is taller than the viewport and would otherwise start under the nav (the banner's close button with it) */
.hero { align-content: end; padding-top: 88px; }
.hero h1:focus { outline: none; }
.banner { justify-self: start; display: flex; align-items: center; gap: 4px; max-width: 100%; margin-bottom: 22px; padding: 0 4px 0 16px; border-radius: 18px; background: rgba(46,47,42,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .9rem; font-weight: 400; color: var(--cream); }
.banner p { padding: 10px 0; }
.banner button { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; }
.banner button:hover { background: rgba(246,243,238,.14); }
/* hero video (site-data.js hero.heroVideo): fades in over the photo once it plays; the photo is its
   poster and fallback. Its pause button joins the hero's buttons, so it never covers text. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
.hero-video.playing { opacity: 1; }
.hero-pause { width: 54px; height: 54px; padding: 0; justify-content: center; }
.hero-pause::before { content: ""; box-sizing: border-box; width: 12px; height: 14px; border-left: 4px solid; border-right: 4px solid; }
.hero-pause.paused::before { width: 0; height: 0; margin-left: 3px; border: 7px solid transparent; border-right: 0; border-left: 12px solid currentColor; }
/* page-load reveal (the one orchestrated moment) */
.hero .reveal { opacity: 0; transform: translateY(26px); animation: rise 1s var(--ease) forwards; }
.hero .reveal:nth-child(2) { animation-delay: .15s; } .hero .reveal:nth-child(3) { animation-delay: .3s; } .hero .reveal:nth-child(4) { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }
/* The third line dips below the 34px box into the gap under it; a browser clips an inline svg to its box by default */
.strata-draw { overflow: visible; }
.strata-draw path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.6s var(--ease) forwards; }
.strata-draw path:nth-child(2) { animation-delay: .2s; } .strata-draw path:nth-child(3) { animation-delay: .4s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* photo placeholders — swap by dropping files in assets/img and adding style="background-image:url(...)" */
.photo { background: var(--stone-light); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.photo::before { content: attr(data-photo); position: absolute; left: 14px; bottom: 12px; font-size: .7rem; letter-spacing: .08em; color: rgba(46,47,42,.55); }
.photo.has-img::before { display: none; }
.photo.ph-hero { background: radial-gradient(120% 70% at 30% 90%, #6E7A5E 0%, #56644A 38%, #3F4B36 70%, #2E2F2A 100%); }
.photo.ph-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(201,191,174,.18)); }
.photo.ph-sage { background: linear-gradient(160deg, #6E7A5E, #56644A); }
.photo.ph-stone { background: linear-gradient(160deg, #D8D1C3, #C9BFAE); }
.photo.ph-clay { background: linear-gradient(160deg, #C4A07F, #B08968); }
.photo.ph-char { background: linear-gradient(160deg, #4A4B44, #2E2F2A); }

/* four words strip */
.strip { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--gutter); border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); font-weight: 400; letter-spacing: .06em; font-size: clamp(.85rem, 1.6vw, 1.1rem); }

/* intro */
.intro { display: grid; gap: 40px; align-items: center; }
.intro .photo { aspect-ratio: 4/5; border-radius: 18px; }
.intro-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 28px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--stone); }
.intro-facts b { display: block; font-size: 1.6rem; font-weight: 300; }
.intro-facts span { font-size: .9rem; opacity: .75; }
@media (min-width: 900px) { .intro { grid-template-columns: 1.1fr .9fr; gap: 72px; } }

/* stays — the dark, modern villa rail */
.stays { background: var(--char); color: var(--cream); padding: clamp(72px, 11vw, 150px) 0; }
.stays .section-head { padding: 0 var(--gutter); }
.stays .lede { color: rgba(246,243,238,.72); }
.rail-wrap { position: relative; }
.rail { display: flex; gap: 18px; padding: 8px var(--gutter) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.villa { flex: 0 0 min(82vw, 440px); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: var(--char-soft); transform: scale(.96); opacity: .85; transition: transform .6s var(--ease), opacity .6s; }
.villa.active { transform: scale(1); opacity: 1; }
.villa .photo { aspect-ratio: 4/3; }
.villa .photo::before { color: rgba(246,243,238,.55); }
.villa-body { padding: 22px 22px 26px; display: grid; gap: 12px; align-content: start; }
.villa-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.villa-top span { font-size: .85rem; color: var(--stone); white-space: nowrap; }
.villa p { color: rgba(246,243,238,.72); font-size: .95rem; }
.villa ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.villa li { font-size: .78rem; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(246,243,238,.22); }
.villa .access { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(246,243,238,.14); font-size: .88rem; color: rgba(246,243,238,.72); }
.villa .access b { font-weight: 400; color: var(--cream); }
.villa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
/* chip lists outside the cabin cards: every-cabin features, amenities, nearby */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; max-width: 900px; }
.chips li { font-size: .88rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--stone); }
.stays .chips li { border-color: rgba(246,243,238,.28); }
.text-link { display: inline-block; padding: 10px 0; text-decoration: underline; text-underline-offset: 3px; }
.rail-ctl { display: flex; align-items: center; gap: 14px; padding: 8px var(--gutter) 0; }
.rail-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(246,243,238,.35); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.rail-ctl button:hover { background: rgba(246,243,238,.1); border-color: var(--cream); }
.rail-progress { flex: 1; height: 1px; background: rgba(246,243,238,.18); position: relative; }
.rail-progress i { position: absolute; left: 0; top: -1px; height: 3px; width: 25%; background: var(--clay); border-radius: 2px; transition: transform .35s var(--ease), width .35s; }
.whole { margin: clamp(48px, 7vw, 90px) var(--gutter) 0; padding: clamp(28px, 4vw, 48px); border-radius: 22px; border: 1px solid rgba(246,243,238,.16); display: grid; gap: 18px; }
.whole p { color: rgba(246,243,238,.72); }
@media (min-width: 900px) { .whole { grid-template-columns: 1fr auto; align-items: center; } }

/* land */
.land-grid { display: grid; gap: 18px; }
.land-item { display: grid; gap: 14px; }
.land-item .photo { aspect-ratio: 3/2; border-radius: 18px; }
.land-item p { font-size: .98rem; }
@media (min-width: 760px) { .land-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } .land-item:nth-child(2) { margin-top: 48px; } }
/* One tile left (showTrailsAndCreek off): photo beside its words, so the row doesn't sit two-thirds empty */
@media (min-width: 760px) { .land-item:only-child { grid-column: 1 / -1; grid-template-columns: 2fr 1fr; column-gap: 28px; } .land-item:only-child .photo { grid-row: span 2; } .land-item:only-child h3 { align-self: end; } }
.land-more { display: grid; gap: 28px; margin-top: clamp(40px, 6vw, 72px); }
.land-more h3 { margin-bottom: 14px; }
@media (min-width: 760px) { .land-more { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* events */
.events { background: var(--sage); color: var(--cream); }
.events .lede { color: rgba(246,243,238,.86); }
.events-grid { display: grid; gap: 40px; }
.includes { display: grid; gap: 0; border-top: 1px solid rgba(246,243,238,.25); }
.includes div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(246,243,238,.25); font-size: .98rem; }
.includes div span:last-child { color: var(--stone-light); }
.includes + .note { margin-top: 18px; color: rgba(246,243,238,.86); opacity: 1; }
.rules-title { margin: 32px 0 12px; }
.rules { display: grid; gap: 8px; padding-left: 1.1em; font-size: .98rem; color: rgba(246,243,238,.86); }
.insurance { margin-top: 24px; display: grid; gap: 14px; justify-items: start; font-size: .98rem; color: rgba(246,243,238,.86); }
@media (min-width: 900px) { .events-grid { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; } }

/* planner (front-end only; sending is switched in js/main.js) */
.planner { background: var(--cream); color: var(--char); border-radius: 22px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 22px; }
.planner-steps { display: flex; gap: 6px; }
.planner-steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--stone-light); transition: background .3s; }
.planner-steps i.done { background: var(--sage); }
.step { display: none; gap: 18px; }
.step.active { display: grid; animation: rise .45s var(--ease); }
.step h3 { font-weight: 300; font-size: 1.5rem; }
.step h3:focus { outline: none; }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choice { padding: 16px 14px; border-radius: 14px; border: 1px solid var(--stone); text-align: left; display: grid; gap: 4px; transition: border-color .25s, background .25s, transform .3s var(--ease); }
.choice small { opacity: .7; font-size: .8rem; }
.choice:hover { transform: translateY(-2px); border-color: var(--sage); }
.choice.selected { background: var(--sage); color: var(--cream); border-color: var(--sage); }
.choice.selected small { opacity: .86; }
.field { display: grid; gap: 6px; font-size: .9rem; }
.field input, .field textarea, .field select { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--stone); background: #fff; color: var(--char); min-width: 0; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--sage); border-color: transparent; }
/* WebKit ignores padding on a native select, so it would sit at half an input's height; the arrow is drawn back in */
.field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232E2F2A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; }
/* planner: cabins needed yes/no */
.yn { border: 0; min-width: 0; }
.yn legend { padding: 0; margin-bottom: 6px; }
.yn-opts { display: flex; gap: 10px; }
.yn-opts label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--stone); background: #fff; cursor: pointer; }
.yn-opts label:has(:checked) { border-color: var(--sage); box-shadow: inset 0 0 0 1px var(--sage); }
.yn-opts input { width: 18px; height: 18px; padding: 0; border: 0; background: none; accent-color: var(--sage); }
/* minmax(0, …): inputs have a ~20-character intrinsic width that otherwise pushes the pair past a 320px screen */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* below 360px a date field is too narrow to show a full date, so the pair stacks */
@media (max-width: 359.98px) { .planner .grid-2, .contact-form .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.planner-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.planner-nav .back { opacity: .7; }
.summary { display: grid; gap: 8px; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--stone-light); font-size: .95rem; }
.summary div { display: flex; justify-content: space-between; gap: 12px; }
.summary div span:first-child { opacity: .7; }
.summary div span:last-child { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.summary div.stack { display: grid; gap: 4px; }
.summary div.stack span:last-child { text-align: left; white-space: pre-line; }
.note { font-size: .85rem; opacity: .7; }
.note a { text-decoration: underline; text-underline-offset: 3px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: 10px; }
.gallery .photo { aspect-ratio: 1; border-radius: 14px; }
.gallery .wide { grid-column: span 2; aspect-ratio: 2/1; }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 14px; } .gallery .tall { grid-row: span 2; aspect-ratio: auto; } }

/* policies (site-data.js `policies`; TBD items read "To be confirmed.") */
.policy-list { display: grid; max-width: 900px; border-top: 1px solid var(--stone); }
.policy-list div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--stone); }
.policy-list dt { font-weight: 400; }
.policy-list dd { max-width: 62ch; }
.policy-list dd a { text-decoration: underline; text-underline-offset: 3px; }
.policy-list .tbd { opacity: .7; font-style: italic; }
@media (min-width: 760px) { .policy-list div { grid-template-columns: 16em 1fr; gap: 24px; } }

/* contact + footer */
.contact { display: grid; gap: 36px; }
.contact-form { display: grid; gap: 12px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; gap: 72px; } }
.addr { display: grid; gap: 10px; font-size: 1.05rem; }
.addr a:hover { text-decoration: underline; }
footer { background: var(--char); color: var(--stone); padding: 48px var(--gutter) 40px; display: grid; gap: 28px; font-size: .9rem; }
footer .brand { color: var(--cream); }
footer .brand svg path[stroke], footer .brand svg polygon, footer .brand svg rect { stroke: var(--cream); fill: var(--cream); }
footer .brand svg path[stroke] { fill: none; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer nav a:hover { color: var(--cream); }
.foot-info { display: grid; gap: 6px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(246,243,238,.14); font-size: .8rem; }

/* scroll reveal — used on section heads only, not every card; hidden only when JS runs (html.js) */
.js .in { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .in.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero .reveal, .js .in { opacity: 1; transform: none; }
  .strata-draw path { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* Under a card's Book on Airbnb button (js/render.js) */
.villa-listing { flex-basis: 100%; font-size: .85rem; color: var(--stone-light); }

/* Availability calendar, in the contact form, only with real dates (js/availability.js) */
.availability { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--stone); border-radius: 12px; background: #fff; color: var(--char); }
.availability-title { font-size: .9rem; }
.availability-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.availability-tabs button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--stone); border-radius: 999px; font-size: .9rem; }
.availability-tabs button[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); color: var(--cream); }
.availability-panel { display: grid; gap: 10px; }
.availability-panel .btn { justify-self: start; }
.availability-month { display: flex; align-items: center; justify-content: space-between; }
.availability-month button { width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem; line-height: 1; }
.availability-month button:disabled { opacity: .3; cursor: default; }
.availability-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.availability-days span { padding: 4px 0; font-size: .75rem; }
.availability-days button { aspect-ratio: 1; min-width: 0; border-radius: 10px; font-size: .9rem; }
.availability-days button:hover:not(:disabled, .picked) { background: var(--stone-light); }
.availability-days button:disabled { color: #6B6B64; cursor: default; opacity: .55; }
.availability-days .booked, .availability-days .booked:disabled { background: var(--stone-light); color: #6B6B64; opacity: 1; text-decoration: line-through; }
.availability-days .between { background: rgba(86, 100, 74, .16); }
.availability-days .picked, .availability-days .picked:disabled { background: var(--sage); color: var(--cream); opacity: 1; text-decoration: none; }