/* ============ YUU · อยู่ ============ */
:root{
  --bg:#fbf7f0; --bg2:#f2ebdf; --paper:#fffdfa; --ink:#231a14; --ink2:#5b4b3f; --ink3:#8a7767;
  --line:#e6dac6; --line2:#cdbca2;
  --sea:#1d5a5c; --sea2:#2b7f82; --sea-w:#e3efee;
  --terra:#b8492a; --terra-w:#fae7e0;
  --gold:#c08a1e; --gold-w:#fbf0d7;
  --ok:#3f7d3a; --ok-w:#e6f1e3;
  --r:14px; --r-l:22px; --max:1200px;
  --fd:"Fraunces",Georgia,serif; --ff:"Inter",system-ui,-apple-system,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sh:0 1px 2px rgba(35,26,20,.05),0 14px 38px -18px rgba(35,26,20,.30);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#14100c; --bg2:#1c1712; --paper:#1e1913; --ink:#f2ebe1; --ink2:#c3b5a5; --ink3:#8a7767;
  --line:#332a21; --line2:#493c2f;
  --sea:#5fb5b7; --sea2:#7ecacb; --sea-w:#16302f;
  --terra:#e8795a; --terra-w:#361b13;
  --gold:#d9a92b; --gold-w:#302512;
  --ok:#7fc178; --ok-w:#1c2d1a;
  --sh:0 1px 2px rgba(0,0,0,.4),0 14px 38px -18px rgba(0,0,0,.7);
}}
[data-theme="dark"]{
  --bg:#14100c; --bg2:#1c1712; --paper:#1e1913; --ink:#f2ebe1; --ink2:#c3b5a5; --ink3:#8a7767;
  --line:#332a21; --line2:#493c2f;
  --sea:#5fb5b7; --sea2:#7ecacb; --sea-w:#16302f;
  --terra:#e8795a; --terra-w:#361b13;
  --gold:#d9a92b; --gold-w:#302512;
  --ok:#7fc178; --ok-w:#1c2d1a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);font-size:16px;line-height:1.6;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--gold-w)}
.w{max-width:var(--max);margin:0 auto;padding-inline:20px}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.up{font-family:var(--fm);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
h1,h2,h3{font-family:var(--fd);font-weight:600;letter-spacing:-.028em;line-height:1.08;margin:0}

/* nav */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
 backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header .w{display:flex;align-items:center;gap:22px;height:100px}
.logo{text-decoration:none;display:flex;align-items:center;flex:0 0 auto}
.logo .lg{display:block;height:60px;width:auto}
.logo.lgf .lg{height:48px}
/* One mark, two inks. The navy is the brand colour and reads on the paper
   theme; the dark theme gets the same artwork in the theme's own ink so the
   logo never sits in a white box or fades into the background. */
.lg-l{display:none}
:root:not([data-theme="dark"]) .lg-d{display:block}
:root:not([data-theme="dark"]) .lg-l{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lg-d{display:none}
  :root:not([data-theme="light"]) .lg-l{display:block}
}
:root[data-theme="dark"] .lg-d{display:none}
:root[data-theme="dark"] .lg-l{display:block}
:root[data-theme="light"] .lg-d{display:block}
:root[data-theme="light"] .lg-l{display:none}
@media (max-width:900px){ header .w{height:80px} .logo .lg{height:46px} }
@media (max-width:560px){ header .w{height:68px} .logo .lg{height:38px} }
nav.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.tabs button{background:none;border:0;cursor:pointer;padding:8px 13px;border-radius:99px;font-size:14px;
 color:var(--ink2);transition:.16s}
nav.tabs button:hover{background:var(--bg2);color:var(--ink)}
nav.tabs button.on{background:var(--ink);color:var(--bg);font-weight:600}
.icon-btn{background:none;border:1px solid var(--line2);border-radius:99px;width:36px;height:36px;
 cursor:pointer;display:grid;place-items:center;font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;text-decoration:none;
 border:1px solid transparent;border-radius:99px;padding:11px 20px;font-weight:600;font-size:14.5px;
 transition:.18s;background:none;white-space:nowrap}
.btn.p{background:var(--terra);color:#fff}
.btn.p:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.d{background:var(--sea);color:#fff}
.btn.s{border-color:var(--line2);color:var(--ink)}
.btn.s:hover{background:var(--bg2)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* panels */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh)}
section.view{display:none;padding:40px 0 80px}
section.view.on{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sh{margin-bottom:26px}
.sh h2{font-size:clamp(26px,4vw,42px)}
.sh p{margin:12px 0 0;color:var(--ink2);max-width:66ch}

/* hero */
.hero{padding:40px 0 26px}
.hero h1{font-size:clamp(34px,5.2vw,58px);max-width:18ch;line-height:1.02;margin:14px 0 0}
.hero h1 .n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--sea)}
.hero h1 em{font-style:italic;color:var(--terra)}
.hero p{font-size:clamp(15px,1.5vw,17px);color:var(--ink2);max-width:66ch;margin:16px 0 26px;line-height:1.55}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);
 border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:34px}
.strip div{background:var(--paper);padding:17px}
.strip b{display:block;font-family:var(--fd);font-size:clamp(22px,3vw,32px);line-height:1;font-weight:600}
.strip span{display:block;font-size:12px;color:var(--ink2);margin-top:7px}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 20px}
.filters select,.filters input{border:1px solid var(--line2);border-radius:99px;padding:9px 14px;
 background:var(--paper);font-size:13.5px;outline:none}
.filters select:focus,.filters input:focus{border-color:var(--sea)}
.chip{border:1px solid var(--line2);background:var(--paper);border-radius:99px;padding:8px 14px;
 font-size:13px;cursor:pointer;transition:.15s}
.chip:hover{background:var(--bg2)}
.chip.on{background:var(--sea);color:#fff;border-color:var(--sea)}
.count{margin-left:auto;font-family:var(--fm);font-size:12.5px;color:var(--ink3)}

/* listing cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
 display:flex;flex-direction:column;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.embed{position:relative;aspect-ratio:4/3;background:var(--bg2);display:grid;place-items:center;
 cursor:pointer;overflow:hidden;border-bottom:1px solid var(--line)}
.embed .ph{text-align:center;padding:20px}
.embed .ph b{display:block;font-family:var(--fd);font-size:17px;margin-bottom:6px}
.embed .ph span{font-size:12.5px;color:var(--ink3)}
.embed .load{margin-top:12px;border:1px solid var(--line2);border-radius:99px;padding:7px 14px;font-size:12.5px;
 background:var(--paper);display:inline-block}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cb{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:16.5px;line-height:1.28}
.card .meta{font-size:12.5px;color:var(--ink2)}
.card .row{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;
 align-items:baseline;gap:9px;flex-wrap:wrap}
.card .price{font-family:var(--fm);font-size:20px;font-weight:600;letter-spacing:-.02em}
.tagrow{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-family:var(--fm);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
 border-radius:5px;padding:3px 7px}
.tag.sea{background:var(--sea-w);color:var(--sea)}
.tag.gold{background:var(--gold-w);color:var(--gold)}
.tag.terra{background:var(--terra-w);color:var(--terra)}
.tag.ok{background:var(--ok-w);color:var(--ok)}
.conf{font-family:var(--fm);font-size:11px;color:var(--ink3);margin-left:auto}

/* empty state */
.empty{text-align:center;padding:64px 24px;border:1px dashed var(--line2);border-radius:var(--r-l);
 background:var(--paper)}
.empty h3{font-size:23px;margin-bottom:10px}
.empty p{color:var(--ink2);max-width:52ch;margin:0 auto 18px}

/* stay engine */
.eng{display:grid;grid-template-columns:repeat(12,1fr);gap:15px;padding:24px}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-size:12.5px;font-weight:600;color:var(--ink2)}
.f select,.f input{border:1px solid var(--line2);border-radius:10px;padding:11px 12px;background:var(--bg);outline:none}
.f select:focus,.f input:focus{border-color:var(--sea);box-shadow:0 0 0 3px var(--sea-w)}
.f .h{font-size:11.5px;color:var(--ink3)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c12{grid-column:span 12}
.stats4{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:22px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:17px}
.stat .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.stat .v{font-family:var(--fd);font-size:30px;font-weight:600;line-height:1;margin-top:8px;letter-spacing:-.03em}
.stat .v small{font-size:14px;font-family:var(--ff);font-weight:400;color:var(--ink2)}
.stat .s{font-size:12.5px;color:var(--ink2);margin-top:7px}
.stat.hi{border-color:var(--terra);background:var(--terra-w)}
.rec{margin-top:16px;border:1px solid var(--sea);background:var(--sea-w);border-radius:var(--r);padding:20px 22px}
.rec h3{font-size:21px;margin-bottom:6px}
.rec p{margin:0;font-size:14.5px;color:var(--ink2)}
.watch{margin-top:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.watch h4{margin:0 0 11px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.watch ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.watch li{display:flex;gap:10px;font-size:14px;color:var(--ink2)}
.watch li::before{content:"";flex:0 0 5px;height:5px;border-radius:99px;background:var(--terra);margin-top:9px}

/* index bars */
.idx{display:grid;gap:9px}
.idxrow{display:grid;grid-template-columns:150px 1fr 92px;gap:13px;align-items:center;font-size:13.5px}
.idxbar{height:24px;background:var(--bg2);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.idxbar i{display:block;height:100%;background:linear-gradient(90deg,var(--sea),var(--sea2))}
.idxrow .v{font-family:var(--fm);text-align:right;font-weight:600;font-size:13px}

/* season grid */
.hgrid{display:grid;gap:4px;min-width:740px}
.hrow{display:grid;grid-template-columns:130px repeat(12,1fr);gap:4px;align-items:center}
.hm{font-family:var(--fm);font-size:10px;text-align:center;color:var(--ink3)}
.cell{aspect-ratio:1.5;border-radius:5px;display:grid;place-items:center;font-family:var(--fm);
 font-size:10.5px;font-weight:600}
.scroll{overflow-x:auto}

/* board */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.req{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px;
 display:flex;flex-direction:column;gap:10px}
.req .ask{font-family:var(--fd);font-size:18px;line-height:1.26}
.req .when{font-size:13px;color:var(--ink2)}
.req .foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line);display:flex;
 align-items:center;gap:10px;flex-wrap:wrap}
.req .bud{font-family:var(--fm);font-weight:600;font-size:16px;color:var(--sea)}

.note{border-left:3px solid var(--gold);background:var(--paper);padding:13px 16px;
 border-radius:0 10px 10px 0;font-size:13.5px;color:var(--ink2);margin:16px 0}
.err{border-left-color:var(--terra)}

footer{border-top:1px solid var(--line);padding:44px 0 40px;font-size:13px;color:var(--ink2)}
.fbot{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
 font-size:12px;color:var(--ink3)}

@media(max-width:760px){
  nav.tabs{order:3;width:100%;margin:0 0 10px;overflow-x:auto;flex-wrap:nowrap}
  header .w{height:auto;padding-block:12px;flex-wrap:wrap}
  .eng{grid-template-columns:repeat(2,1fr);padding:18px}
  .c3,.c4,.c6{grid-column:span 1}.c12{grid-column:span 2}
  .idxrow{grid-template-columns:96px 1fr 76px;gap:9px;font-size:12px}
}

.idxhead{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 10px}


/* ---- listing imagery ----
   .shot holds a photograph the OWNER supplied. It carries a credit and it
   hides itself if the file ever fails, so a dead image never leaves a grey
   rectangle on the page. Listings we have only indexed carry no photograph
   and use the tinted typographic panel below instead. */
.shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.gone{display:none}
.shot .cred{position:absolute;left:10px;bottom:9px;padding:3px 8px;border-radius:99px;
 background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px);
 font-family:var(--fm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.embed.t-condo{background:linear-gradient(160deg,var(--sea-w),var(--bg2))}
.embed.t-house{background:linear-gradient(160deg,var(--gold-w),var(--bg2))}
.embed.t-town {background:linear-gradient(160deg,var(--terra-w),var(--bg2))}
.embed.t-villa{background:linear-gradient(160deg,var(--sea-w),var(--gold-w))}
.embed.t-none {background:var(--bg2)}


/* Currency selector. Sits beside the theme control, same visual weight as a
   filter, never louder than the prices it governs. */
.cur-sel{background:none;border:1px solid var(--line2);border-radius:99px;
  padding:0 10px;height:36px;font:inherit;font-size:13px;color:var(--ink2);
  cursor:pointer;-webkit-appearance:none;appearance:none;text-align:center}
.cur-sel:hover{border-color:var(--ink3);color:var(--ink)}
.cur-sel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


/* Thai. Latin faces have no Thai glyphs, so the browser would fall back to a
   system font and the page would lose its voice in exactly the language half
   this market speaks. Noto Serif Thai carries the display line, Noto Sans Thai
   the body. Thai has no spaces between words and taller ascenders, so it needs
   a little more line height and no letter-spacing. */
html.th body, html.th .up, html.th .h, html.th label, html.th .btn,
html.th input, html.th select, html.th textarea{
  font-family:"Noto Sans Thai","Inter",system-ui,sans-serif;
  line-height:1.75;
}
html.th h1, html.th h2, html.th h3, html.th .price, html.th .v{
  font-family:"Noto Serif Thai","Fraunces",Georgia,serif;
  line-height:1.45;
}
html.th .up{letter-spacing:0;text-transform:none;font-size:13px}
html.th h1{letter-spacing:0}

.lang-btn{width:auto;padding:0 12px;font-size:13px;font-weight:600}


/* The hero carries the search itself, not an essay about the search. Filter
   bar sits inside it, the proof strip sits under it, and the first result row
   is reachable without scrolling on a laptop. */
.hero .filters{margin:0 0 18px}
.hero .strip{margin-top:0}
@media (max-width:560px){ .hero{padding:26px 0 20px} .hero p{margin-bottom:18px} }

/* =====================================================================
   The listing table.
   Almost nothing here carries a photograph, so a card grid would spend its
   height on empty tinted boxes. Rows put thirty listings on one screen and
   line the prices up in a single column, which is the comparison the site
   exists for. The kind tint survives as a 3px left edge rather than a
   full-bleed rectangle.
   ===================================================================== */
.tw{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
table.lst{width:100%;border-collapse:collapse;font-size:14px}
table.lst thead th{text-align:left;font-family:var(--fm);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink3);font-weight:500;padding:12px 16px;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--paper))}
table.lst tbody tr{border-bottom:1px solid var(--line);border-left:3px solid transparent}
table.lst tbody tr:last-child{border-bottom:0}
table.lst tbody tr:hover{background:color-mix(in srgb,var(--sea) 5%,var(--paper))}
table.lst td{padding:13px 16px;vertical-align:middle}

table.lst tr.t-villa{border-left-color:color-mix(in srgb,var(--terra) 55%,transparent)}
table.lst tr.t-house{border-left-color:color-mix(in srgb,var(--gold) 65%,transparent)}
table.lst tr.t-town {border-left-color:color-mix(in srgb,var(--sea) 45%,transparent)}
table.lst tr.t-condo{border-left-color:color-mix(in srgb,var(--ink3) 40%,transparent)}

.c-p{white-space:nowrap;width:1%}
.c-p b{font-family:var(--fd);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.c-p i{display:block;font-style:normal;font-size:11px;color:var(--ink3);margin-top:1px}
.c-x .sp{display:block;font-weight:600}
.c-x .k{font-size:12px;color:var(--ink3)}
.c-x .u{font-size:12px;color:var(--ink2);margin-left:7px;font-family:var(--fm)}
.c-w .pn{display:block;font-weight:500}
.c-w .pn i{color:var(--ink3);font-weight:400;font-size:13px}
.c-w .ar{font-size:12.5px;color:var(--ink2)}
.c-w .tg{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle}
.c-s{white-space:nowrap;width:1%}
.src{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:99px;padding:3px 9px;color:var(--ink2)}
.src.fw{border-color:color-mix(in srgb,var(--sea) 45%,var(--line2))}
.c-l{white-space:nowrap;width:1%;text-align:right}
.c-l a{font-size:13px;color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line2);
  padding-bottom:1px;white-space:nowrap}
.c-l a:hover{color:var(--ink);border-bottom-color:var(--ink3)}

/* Narrow screens: a five-column table stops being readable, so each row
   becomes its own block with the price on the right where the thumb is. */
@media (max-width:720px){
  table.lst thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.lst tbody tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px;
    border-left-width:4px}
  table.lst td{padding:0;border:0}
  .c-p{grid-column:2;grid-row:1/span 2;text-align:right;align-self:start}
  .c-x{grid-column:1;grid-row:1}
  .c-w{grid-column:1;grid-row:2}
  .c-s{grid-column:1;grid-row:3;margin-top:6px}
  .c-l{grid-column:2;grid-row:3;margin-top:6px}
}