/* ===== Kuma Condo — "Airtable · Cozy Home" theme =====
   Layered on top of css/style.css (load after it).
   Base system: VoltAgent/awesome-design-md → design-md/airtable/DESIGN.md (MIT).
   Kept from Airtable: near-black primary CTA, white canvas hero with no gradient, weights 400/500 only,
   12px/10px/6px radius hierarchy, hairline borders instead of shadows, signature colour-block surfaces.
   Cozy adaptation: warm linen page, cream results band, peach/mint/cream "home corner" tiles, coral CTA band. */
:root{
  --ink:#181d26;--ink-2:#333840;--ink-3:#41454d;
  --border:#e6dfd5;--bg:#fcfaf6;--surface:#fff;
  --brand-900:#181d26;--brand-800:#181d26;--brand-700:#181d26;--brand-600:#181d26;--brand-500:#458fff;
  --brand-200:#e6dfd5;--brand-100:#f5e9d4;--brand-50:#f7f2ea;
  --coral:#aa2d00;--forest:#0a2e0e;--cream:#f5e9d4;--peach:#fcab79;--mint:#a8d8c4;--yellow:#f4d35e;--mustard:#d9a441;
  --link:#1b61c9;
  --font:'Inter','IBM Plex Sans Thai','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fs-hero:clamp(2rem,8vw,3.25rem);
  --r-sm:6px;--r-md:10px;--r-lg:12px;--r-xl:12px;
  --sh-1:none;--sh-2:0 1px 2px rgba(24,29,38,.06);--sh-3:none;
}

/* weights: 400 / 500 only — emphasis from size and colour, never bold */
h1,h2,h3,.brand,.lang,.eyebrow,.hero-stat,.f-label,.search legend,.chip span,.field,.more summary,.btn,.badge,.media-count,
.code,.card-title,.price b,.pill,.steps li::before,.back,.gal-count,.facts b,.calc-lbl,.stepper output,.calc-total span,.box .map-link,b,strong{font-weight:500}
body{color:var(--ink-2)}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--brand-500)}

/* top nav: white, hairline, 64px */
.topbar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--border)}
.topbar-in{min-height:64px}
.brand{color:var(--ink)}
.lang{border:1px solid var(--border);border-radius:var(--r-md);color:var(--ink)}

/* buttons: near-black primary + white hairline secondary (Airtable's signature pair); LINE stays green */
.btn{border-width:1px;border-radius:var(--r-lg)}
.btn-primary{background:var(--ink);color:#fff}.btn-primary:active,.btn-primary:hover{background:#0d1218}
.btn-ghost,.btn-outline{background:#fff;border-color:var(--border);color:var(--ink)}
.btn-ghost:hover,.btn-outline:hover{background:#fff;border-color:var(--ink-3)}
.btn-white{color:var(--ink)}
.btn-lg{border-radius:var(--r-lg)}
.link-btn{color:var(--link)}

/* hero: white canvas, calm type, home-corner tiles */
.hero{background:#fff;padding:var(--s6) 0 var(--s6)}
@media(min-width:900px){.hero{padding:72px 0}}
.hero-grid{display:grid;gap:var(--s6)}
.hero-grid>*{min-width:0}
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:56px}}
.eyebrow{background:none;padding:0;color:var(--ink-3);font-size:var(--fs-sm)}
.hero h1{color:var(--ink);letter-spacing:-.02em;line-height:1.15}
.hero h1 span{color:var(--coral)}
.lead{color:var(--ink-2)}
.hero-stat{color:var(--ink)}
.search{box-shadow:none;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff}
.chip span{border:1px solid var(--border);border-radius:var(--r-md);color:var(--ink-2)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.field select,.field input,.sort select{border:1px solid #dddddd;border-radius:var(--r-sm)}
.field select:focus,.field input:focus,.sort select:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(69,143,255,.18)}
.more summary{color:var(--ink)}

.home-tiles{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,62%);gap:var(--s3);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*var(--s4));padding-inline:var(--s4)}
.home-tiles::-webkit-scrollbar{display:none}
.home-tiles li{scroll-snap-align:start;border-radius:var(--r-md);padding:var(--s4);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3);
  color:var(--ink);font-weight:500;font-size:var(--fs-md);line-height:1.4}
.home-tiles svg{width:100%;max-width:150px;height:auto;align-self:center}
.tile-peach{background:var(--peach)}.tile-mint{background:var(--mint)}.tile-cream{background:var(--cream)}
@media(min-width:900px){
  .home-tiles{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "a c";overflow:visible;margin:0;padding:0}
  .home-tiles li:nth-child(1){grid-area:a;padding:var(--s5)}.home-tiles li:nth-child(2){grid-area:b}.home-tiles li:nth-child(3){grid-area:c}
  .home-tiles li:nth-child(1) svg{max-width:220px}
}

/* results: cream signature band, white content cards */
.results{position:relative;background:var(--cream);box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax);padding-top:var(--s6);padding-bottom:var(--s7)}
.results-head h2{color:var(--ink)}
.count{color:var(--ink-3)}
.notice{border-radius:var(--r-md);background:#fff7ea;border-color:#ecd3a4}
.card{border:1px solid var(--border);border-radius:var(--r-md);box-shadow:none}
@media(hover:hover){.card:hover{transform:none;box-shadow:none;border-color:var(--ink-3)}}
.card:nth-child(3n+1) .card-media{background:var(--peach)}
.card:nth-child(3n+2) .card-media{background:var(--mint)}
.card:nth-child(3n) .card-media{background:var(--cream)}
.card-title a{color:var(--ink)}
.price b{color:var(--ink)}
.code{background:var(--cream);color:var(--ink);border-radius:var(--r-sm)}
.badge{background:#fff;color:var(--ink);box-shadow:none;border-radius:var(--r-sm);padding:3px 8px}
.badge::before{width:8px;height:8px;opacity:1;background:#9297a0}
.badge-available::before{background:#39bf45}.badge-reserved::before{background:var(--mustard)}.badge-rented::before{background:#9297a0}
.badge-available,.badge-reserved,.badge-rented{background:#fff}
.badge-static{border:1px solid var(--border)}
.media-count,.gal-count{background:rgba(24,29,38,.78);border-radius:var(--r-sm)}
.pill{border-radius:var(--r-sm);background:#f1f2f4;color:var(--ink-2)}
.pill-ok{background:var(--mint);color:var(--forest)}
.pill-date{background:var(--cream);color:var(--ink)}
.state{border:1px solid var(--border);border-radius:var(--r-md)}
.sk-card{border-radius:var(--r-md)}
.sk{background:linear-gradient(90deg,#efe7da 25%,#f8f3ea 50%,#efe7da 75%);background-size:200% 100%}

/* how it works: demo-grid tiles of uneven height on white */
.section{padding-block:var(--s7)}
.section h2,.cta-band h2,.similar h2{font-size:clamp(1.5rem,5vw,2rem);letter-spacing:-.01em}
.steps{gap:var(--s3);align-items:start}
.steps li{box-shadow:none;border-radius:var(--r-md);padding:var(--s5) var(--s5) var(--s5) 72px}
.steps li:nth-child(1){background:var(--peach)}
.steps li:nth-child(2){background:var(--mint)}
.steps li:nth-child(3){background:var(--cream)}
@media(min-width:760px){.steps li:nth-child(2){margin-top:var(--s6)}.steps li:nth-child(3){margin-top:var(--s3)}}
.steps li::before{background:var(--ink);color:#fff;left:var(--s5);top:var(--s5)}
.steps h3{color:var(--ink);font-size:var(--fs-lg)}
.steps p{color:var(--ink-2)}

/* CTA: coral signature card, white secondary button on it */
.cta-band{background:var(--coral);border-radius:var(--r-lg);padding:var(--s7) var(--s5)}
.cta-band p{opacity:1;color:#fff}

.foot{border-top:1px solid var(--border)}
.foot .areas{color:var(--ink)}

/* detail page */
.back{color:var(--ink)}
.gallery-wrap{border-radius:var(--r-lg);background:var(--peach)}
.gal-btn{box-shadow:none;border:1px solid var(--border)}
.thumbs button{border-radius:var(--r-sm)}
.thumbs button[aria-current="true"]{border-color:var(--ink)}
.d-title{color:var(--ink);letter-spacing:-.01em}
.code-chip{border-radius:var(--r-sm)}
.facts li{background:#fff;border:1px solid var(--border);border-radius:var(--r-md)}
.facts .ic{color:var(--coral)}
.box{box-shadow:none;border:1px solid var(--border);border-radius:var(--r-lg)}
.box h2 .ic{color:var(--coral)}
.chips li{background:var(--cream);color:var(--ink);border-radius:var(--r-sm)}
.stepper{border:1px solid var(--border);border-radius:var(--r-md)}
.stepper button{color:var(--ink)}
.calc-total b{color:var(--ink)}
.dist-list .ic{color:var(--coral)}
.box .map-link{color:var(--link)}
.buybar{box-shadow:none;border-top:1px solid var(--border)}
.buybar b{color:var(--ink)}
.toast{background:var(--ink);border-radius:var(--r-md)}