:root{
  --kram:#1F3F5B;--kram-deep:#172F44;--kram-tint:#E7EDF2;
  --khrang:#9E3B2B;--khrang-tint:#F6E7E3;
  --doi:#3F6B4A;--doi-tint:#E6EFE8;
  --thong:#B8902F;--phuka:#D98BA3;
  --mok:#F7F4EE;--card:#FFFFFF;--ink:#2A2420;--stone:#6B635B;
  --line:#E6DFD4;--line-strong:#D8D0C4;
  --season:var(--doi);
  --radius:14px;--radius-sm:10px;
  --font-body:"Noto Sans Thai Looped","Noto Sans Lao",system-ui,sans-serif;
  --font-head:"Anuphan","Noto Sans Thai Looped",system-ui,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --kram:#8FB4D4;--kram-deep:#1B2A36;--kram-tint:#1C2A36;
    --khrang:#E08A76;--khrang-tint:#3A211C;
    --doi:#8FC49B;--doi-tint:#1B2A20;
    --thong:#D9B75E;--phuka:#E7A9BC;
    --mok:#141A1F;--card:#1C2329;--ink:#EDE7DD;--stone:#A89F95;
    --line:#2A333B;--line-strong:#36424C;
  }
}
:root[data-theme="dark"]{
  --kram:#8FB4D4;--kram-deep:#1B2A36;--kram-tint:#1C2A36;
  --khrang:#E08A76;--khrang-tint:#3A211C;
  --doi:#8FC49B;--doi-tint:#1B2A20;
  --thong:#D9B75E;--phuka:#E7A9BC;
  --mok:#141A1F;--card:#1C2329;--ink:#EDE7DD;--stone:#A89F95;
  --line:#2A333B;--line-strong:#36424C;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mok);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.75;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.35;margin:0 0 .4em}
h1{font-size:clamp(1.6rem,4.5vw,2.3rem)}
h2{font-size:clamp(1.25rem,3.2vw,1.55rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
a{color:var(--kram);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--thong);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:var(--card);padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.topbar{background:var(--kram-deep);color:#F7F4EE}
:root:not([data-theme="dark"]) .topbar{background:#1F3F5B}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand-mark{width:34px;height:34px;flex:none}
.brand-name{font-family:var(--font-head);font-size:1.3rem;font-weight:600;letter-spacing:.2px}
.brand-sub{font-size:.75rem;opacity:.8;display:block;line-height:1.2}
.topnav{display:flex;gap:4px;flex-wrap:wrap}
.topnav a{color:inherit;text-decoration:none;font-size:.92rem;padding:6px 10px;border-radius:8px}
.topnav a:hover,.topnav a[aria-current="page"]{background:rgba(255,255,255,.12)}
@media (max-width:1180px){.topbar .wrap{flex-wrap:wrap;padding-top:8px}.topnav{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.topnav a{white-space:nowrap;background:rgba(255,255,255,.08)}}

.wave{display:block;width:100%;height:10px;color:var(--thong)}

.today{background:var(--kram-deep);color:#F7F4EE;padding:22px 0 30px}
:root:not([data-theme="dark"]) .today{background:#1F3F5B}
.today-label{font-size:.85rem;opacity:.8;margin:0}
.today-line{font-family:var(--font-head);font-size:clamp(1.35rem,4vw,2rem);font-weight:600;line-height:1.35;margin:.15em 0 .5em;max-width:24em}
.today-facts{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.95rem;margin:0;padding:0;list-style:none}
.today-facts li{display:flex;align-items:center;gap:6px}
.today-facts svg{width:18px;height:18px;flex:none;opacity:.9}
.today-note{font-size:.78rem;opacity:.7;margin:.8em 0 0}

.search{margin-top:-26px;position:relative;z-index:2}
.search form{display:flex;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:1.05rem;padding:14px 16px}
.search input:focus{outline:none}
.search form:focus-within{border-color:var(--kram);box-shadow:0 0 0 3px color-mix(in srgb,var(--kram) 22%,transparent)}
.search button{border:0;background:var(--kram);color:var(--mok);font:inherit;font-weight:600;padding:0 18px;cursor:pointer}
.results{list-style:none;margin:8px 0 0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.results:empty{display:none}
.results li a{display:block;padding:10px 16px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
.results li:first-child a{border-top:0}
.results li a:hover,.results li a:focus{background:var(--kram-tint)}
.results small{color:var(--stone);display:block;font-size:.8rem}

.section{padding:34px 0 8px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.section-head p{color:var(--stone);margin:0;font-size:.95rem}
.lede{color:var(--stone);max-width:40em}

.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.door{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 14px;display:flex;flex-direction:column}
.door h2{display:flex;align-items:center;gap:10px;margin-bottom:.3em}
.door h2 svg{width:26px;height:26px;flex:none}
.door.trip h2{color:var(--doi)}
.door.gov h2{color:var(--kram)}
.door p{color:var(--stone);font-size:.95rem}
.door ul{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:2px}
.door li a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 2px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.door li a:hover{color:var(--kram)}
.door li a span.tag{font-size:.75rem;color:var(--stone)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;margin:0;padding:0;list-style:none}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.stat b{display:block;font-family:var(--font-head);font-size:1.8rem;line-height:1.2;color:var(--kram)}
.stat span{font-size:.9rem;color:var(--stone)}
.source{font-size:.8rem;color:var(--stone);margin-top:8px}
.source a{color:inherit}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--kram-tint)}
.card .ph{aspect-ratio:16/10;background:var(--doi-tint);display:flex;align-items:center;justify-content:center;color:var(--doi);font-family:var(--font-head);font-size:1.3rem}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.card-body h3{margin:0}
.card-body h3 a{color:var(--ink);text-decoration:none}
.card-body h3 a:hover{color:var(--kram)}
.card-body p{font-size:.92rem;color:var(--stone);margin:0}
.chip{display:inline-block;font-size:.75rem;padding:1px 10px;border-radius:999px;background:var(--doi-tint);color:var(--doi);align-self:flex-start}
.card-foot{margin-top:auto;padding-top:8px;font-size:.85rem}

.lao{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:grid;gap:6px}
.lao .lo{font-family:"Noto Sans Lao",var(--font-body);font-size:1.15rem;font-weight:600;color:var(--kram)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;background:var(--kram-tint);color:var(--kram);font-weight:600;font-size:.88rem}
td small{color:var(--stone)}
.district-group{margin-top:22px}
.district-group h2{display:flex;align-items:baseline;gap:10px}
.district-group h2 small{font-size:.85rem;color:var(--stone);font-weight:400}
.filter{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.filter input,.filter select{font:inherit;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--card);color:var(--ink);min-width:0;flex:1 1 220px}

.crumbs{font-size:.85rem;color:var(--stone);padding:14px 0 0}
.crumbs a{color:inherit}
.page-head{padding:10px 0 6px}

.footer{margin-top:0;background:var(--kram-deep);color:#E9E4DA;padding:28px 0 36px;font-size:.92rem}
:root:not([data-theme="dark"]) .footer{background:#1F3F5B}
.footer a{color:#F7F4EE}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:22px}
.footer h2{font-size:1rem;color:#F7F4EE}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.footer .fine{opacity:.75;font-size:.8rem;margin-top:22px}
.hotline{display:flex;justify-content:space-between;gap:10px}
.hotline b{font-family:var(--font-head);font-size:1.05rem;color:#F7F4EE}
tr:target td,.district-group:target h2{background:color-mix(in srgb,var(--thong) 22%,transparent)}
tr[id],.district-group{scroll-margin-top:16px}
td.nowrap{white-space:nowrap;width:1%}
.toc{font-size:.95rem}
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.place{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;scroll-margin-top:16px}
.place:target{outline:3px solid color-mix(in srgb,var(--thong) 55%,transparent)}
.place h3{color:var(--kram)}
.place p{font-size:.95rem}
.facts{margin:0 0 .6em;display:grid;gap:4px;font-size:.9rem}
.facts div{display:grid;grid-template-columns:5.5em 1fr;gap:8px}
.facts dt{color:var(--stone)}
.facts dd{margin:0}
.acts{font-size:.92rem;font-weight:600}
.note{font-size:.85rem;background:color-mix(in srgb,var(--thong) 14%,transparent);border-left:3px solid var(--thong);padding:6px 10px;margin:.4em 0 .6em;border-radius:0}

/* ===== ภาพหัวเว็บ น่านวันนี้ ===== */
.hero{--sky-top:#7FB6D9;--sky-bottom:#E3F1F7;--hero-ink:#16324A;--hero-sub:#2F5670;--sun:#FFE08A;--sun-glow:rgba(255,224,138,.35);
  --m-far:#A9C3D2;--m-mid:#6C977D;--m-near:#3F6B4A;--river-top:#5B93B2;--river-bottom:#2E5E7C;--mist:rgba(255,255,255,.75);
  --t-wall:#F4EBDD;--t-roof:#8E3A2A;--t-roof2:#A8483A;--t-door:#6B3A22;--tree:#2F5A3B;--bird:#2A3A48;--star:0;
  position:relative;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-top) 25%,var(--sky-bottom) 72%);color:var(--hero-ink);overflow:hidden}
.hero[data-time="dawn"],.hero[data-time="dusk"]{--sky-top:#E9A27F;--sky-bottom:#FCE4C6;--hero-ink:#3A1F17;--hero-sub:#6A3B2B;--sun:#FFC27A;--sun-glow:rgba(255,170,110,.4);
  --m-far:#C7A7B2;--m-mid:#6D7A63;--m-near:#435A43;--river-top:#D39A7B;--river-bottom:#6E5566;--mist:rgba(255,236,220,.7);--bird:#3A1F17}
.hero[data-time="night"]{--sky-top:#0E1B2B;--sky-bottom:#2A4460;--hero-ink:#F7F4EE;--hero-sub:#C9D6E2;--sun:#F4EBD0;--sun-glow:rgba(244,235,208,.18);
  --m-far:#263E53;--m-mid:#1C3140;--m-near:#132631;--river-top:#23445E;--river-bottom:#0D2232;--mist:rgba(180,200,220,.25);
  --t-wall:#3B3A3A;--t-roof:#4A2A24;--t-roof2:#5A3129;--t-door:#FFB54D;--tree:#0F2029;--bird:transparent;--star:1}
.hero-text{position:relative;z-index:2;padding:22px 0 6px}
.hero .today-label{color:var(--hero-sub);opacity:1}
.hero .today-line{color:var(--hero-ink)}
.hero .today-facts{color:var(--hero-ink)}
.hero .today-note{color:var(--hero-sub);opacity:1}
.scene{display:block;width:100%;height:auto}
.sky-top{stop-color:var(--sky-top)}.sky-bottom{stop-color:var(--sky-bottom)}
.river-top{stop-color:var(--river-top)}.river-bottom{stop-color:var(--river-bottom)}
.m-far{fill:var(--m-far)}.m-mid{fill:var(--m-mid)}.m-near{fill:var(--m-near)}.trees{fill:var(--tree)}
.mist ellipse{fill:var(--mist)}
.sun-disc{fill:var(--sun)}.sun-glow{fill:var(--sun-glow)}
.stars{opacity:var(--star)}
.bird{stroke:var(--bird)}
.t-base{fill:#D8CBB6}.t-wall{fill:var(--t-wall)}.t-door{fill:var(--t-door)}.t-roof{fill:var(--t-roof)}.t-roof2{fill:var(--t-roof2)}
.t-chofa,.t-naga{fill:none;stroke:#C99A2E;stroke-width:3;stroke-linecap:round}
.ripples{stroke:rgba(255,255,255,.45)}
.hull{fill:#7A2E22}.naga-head,.naga-tail{fill:#C99A2E}
.rowers circle{fill:#F2C9A0}.rowers path{stroke:#F7F4EE;stroke-width:3;stroke-linecap:round}
.rowers .oar{stroke:#E8D3A8}
.petal{fill:#E7A9BC;opacity:0}
.hot{cursor:pointer;outline:none}
.hot:hover .m-far,.hot:focus-visible .m-far{fill:color-mix(in srgb,var(--m-far) 80%,#fff)}
.hot:hover>g,.hot:focus-visible>g{filter:drop-shadow(0 0 10px rgba(255,230,150,.9))}
.ping{fill:#FFF3C4;stroke:#C99A2E;stroke-width:2;transform-box:fill-box;transform-origin:center}
.scene-hint{position:absolute;right:12px;bottom:38px;z-index:3;font-size:.78rem;background:rgba(20,30,40,.55);color:#fff;padding:3px 10px;border-radius:999px}
@media (min-width:821px){
  .hero-text{position:absolute;inset:0 0 auto 0;background:none;padding-top:26px}
  .hero-text .today-line{max-width:18em}
}
@media (prefers-reduced-motion:no-preference){
  .m1{animation:drift 22s ease-in-out infinite alternate}
  .m2{animation:drift 30s ease-in-out infinite alternate-reverse}
  .birds{animation:fly 38s linear infinite}
  .bird{animation:flap .9s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
  .b2{animation-delay:.3s}.b3{animation-delay:.6s}
  .boat{animation:row 48s linear infinite}
  .boat-bob{animation:bob 2.6s ease-in-out infinite}
  .oar{animation:stroke 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:top}
  .ripples path{animation:shimmer 4s ease-in-out infinite alternate}
  .ripples path+path{animation-delay:2s}
  .glint{animation:glint 3.5s ease-in-out infinite}
  .ping{animation:ping 2.2s ease-out infinite}
  .stars circle{animation:twinkle 3s ease-in-out infinite alternate}
  .stars circle:nth-child(3n){animation-delay:1s}.stars circle:nth-child(3n+1){animation-delay:2s}
  .hero[data-season="phuka"] .petal{animation:fall var(--d) linear var(--delay) infinite}
  .card,.door,.place,.stat{transition:transform .25s ease,box-shadow .25s ease}
  .card:hover,.door:hover,.place:hover{transform:translateY(-4px);box-shadow:0 12px 28px -14px rgba(31,63,91,.45)}
  .card img{transition:transform .5s ease}.card:hover img{transform:scale(1.04)}
}
@keyframes drift{from{transform:translateX(-50px)}to{transform:translateX(60px)}}
@keyframes fly{from{transform:translate(-120px,120px)}to{transform:translate(1320px,60px)}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.4)}}
@keyframes row{from{transform:translate(-220px,396px)}to{transform:translate(1420px,396px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(3px) rotate(.6deg)}}
@keyframes stroke{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(22deg)}}
@keyframes shimmer{from{opacity:.25;transform:translateX(-10px)}to{opacity:.8;transform:translateX(10px)}}
@keyframes glint{0%,70%,100%{opacity:0}80%{opacity:1}}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes twinkle{from{opacity:.3}to{opacity:1}}
@keyframes fall{0%{transform:translate(var(--x),-20px) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translate(calc(var(--x) + 120px),470px) rotate(540deg);opacity:0}}
.boat{transform:translate(620px,396px)}
.birds{transform:translate(700px,90px)}

/* ไอคอนประตู และตัวเลข */
.door h2 .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.door.trip h2 .ico{background:var(--doi-tint)}
.door.gov h2 .ico{background:var(--kram-tint)}
.door h2 .ico svg{width:26px;height:26px}
.stat b{font-variant-numeric:tabular-nums}
.edge{display:block;width:100%;height:46px;color:var(--kram-deep)}
:root:not([data-theme="dark"]) .edge{color:#1F3F5B}

/* ===== กระซิบรักจากวัดภูมินทร์ ===== */
.phumin-card{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:22px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;position:relative;overflow:hidden}
.phumin-card::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:color-mix(in srgb,var(--thong) 14%,transparent)}
.phumin-art svg{width:100%;height:auto}
.kicker{color:var(--khrang);font-weight:600;font-size:.85rem;letter-spacing:.3px;margin:0 0 .2em}
.phumin h2{font-size:clamp(1.5rem,4vw,2rem);color:var(--khrang)}
.phumin-facts{list-style:none;padding:0;margin:0 0 .8em;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.phumin-facts li{background:var(--mok);border-radius:12px;padding:10px 12px}
.phumin-facts b{display:block;font-family:var(--font-head);color:var(--kram);font-size:1.15rem}
.phumin-facts span{font-size:.85rem;color:var(--stone);line-height:1.5;display:block}
@media (max-width:640px){.phumin-card{grid-template-columns:1fr}.phumin-art{max-width:180px;margin:0 auto}}
@media (prefers-reduced-motion:no-preference){.phumin-art circle[fill="var(--thong)"]{animation:twinkle 1.6s ease-in-out infinite alternate}}

/* ===== แผนที่เที่ยวทั่วน่าน ===== */
.map-wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.map-wrap{grid-template-columns:1fr}}
.map-stage{background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--doi) 12%,var(--card)),var(--card));border:1px solid var(--line);border-radius:22px;padding:10px}
.nanmap{width:100%;height:auto;display:block;font-family:var(--font-head)}
.sticker-edge path{fill:#fff;stroke:#fff;stroke-width:18;stroke-linejoin:round}
.d{stroke:#fff;stroke-width:2.2;stroke-linejoin:round;cursor:pointer;transition:filter .2s,transform .2s;transform-box:fill-box;transform-origin:center}
.d:hover,.d:focus-visible{filter:brightness(.93) saturate(1.4);outline:none}
.d.on{fill:var(--thong)!important;filter:saturate(1.1)}
.d.sel{stroke:var(--khrang);stroke-width:4}
.dl{font-size:13px;fill:#3A3129;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:3px}
.pl{font-size:11.5px;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3.5px;font-weight:600}
.pin{cursor:pointer}
.pin-halo{fill:rgba(255,255,255,.55)}
.pin-big .pl{font-size:13px;fill:var(--khrang)}
.park text{font-size:11px;fill:var(--doi);font-weight:600;paint-order:stroke;stroke:rgba(255,255,255,.8);stroke-width:3px}
.park .tree{fill:var(--doi)}
.lao{font-size:16px;fill:var(--stone);font-weight:600;letter-spacing:1px}
.lao-sub{font-size:11px;letter-spacing:0;font-weight:400}
@media (prefers-reduced-motion:no-preference){
  .pin-halo{animation:ping 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
  .pin:hover>g{transform-box:fill-box}
  .d.pop{animation:pop .5s ease}
}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.map-panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;position:sticky;top:12px}
.stamp-count{margin:0;font-size:.95rem;color:var(--stone)}
.stamp-count b{font-family:var(--font-head);font-size:1.8rem;color:var(--khrang)}
.stamp-bar{height:10px;border-radius:99px;background:var(--mok);overflow:hidden;margin:4px 0 14px}
.stamp-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--thong),var(--khrang));border-radius:99px;transition:width .6s ease}
#dpanel h3{color:var(--kram);font-size:1.3rem}
#dpanel dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.92rem;margin:0 0 10px}
#dpanel dt{color:var(--stone)}#dpanel dd{margin:0}
#dpanel .slogan{font-size:.92rem;background:var(--mok);border-radius:12px;padding:10px 12px;font-style:normal}
.stamp-btn{font:inherit;font-weight:600;border:0;border-radius:999px;padding:10px 18px;background:var(--khrang);color:#fff;cursor:pointer}
.stamp-btn[aria-pressed="true"]{background:var(--doi)}
.stamps{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.stamp{font-size:.75rem;border:2px dashed var(--khrang);color:var(--khrang);border-radius:10px;padding:2px 8px;transform:rotate(-3deg)}
.stamp:nth-child(2n){transform:rotate(2deg)}
.done-msg{background:linear-gradient(90deg,var(--thong),var(--khrang));color:#fff;border-radius:12px;padding:10px 12px;font-weight:600}
.place.wide{grid-column:1/-1}
.place h4{font-family:var(--font-head);font-size:1rem;margin:.8em 0 .3em;color:var(--kram)}
.place ul,.place ol{margin:0 0 .8em;padding-left:1.2em;font-size:.95rem}
.timeline{list-style:none;padding-left:0!important;border-left:3px solid var(--thong);margin-left:4px!important}
.timeline li{padding:0 0 8px 14px;position:relative}
.timeline li::before{content:"";position:absolute;left:-8px;top:.55em;width:13px;height:13px;border-radius:50%;background:var(--card);border:3px solid var(--thong)}
.steps li{margin-bottom:6px}
.warn{background:var(--khrang-tint);border-left:3px solid var(--khrang);padding:8px 10px;font-size:.9rem}
.hotgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px}
.hot-item a{display:grid;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink);height:100%}
.hot-item b{font-family:var(--font-head);font-size:1.6rem;color:var(--khrang);line-height:1.2}
.hot-item span{font-weight:600;font-size:.95rem}
.hot-item small{color:var(--stone);font-size:.78rem}
.hot-item a:hover{border-color:var(--khrang)}
.linklist{columns:2 260px;padding-left:1.1em}
.linklist li{margin-bottom:6px;break-inside:avoid}
p.chip{display:inline-block;margin:0 0 .4em}

/* ================= v2 · editorial photographic design ================= */
:root{--font-display:"Noto Serif Thai","Anuphan",serif}
.display{font-family:var(--font-display);font-weight:800;font-size:clamp(3.4rem,11vw,7.5rem);line-height:1;letter-spacing:-1px;margin:.05em 0 .15em}
.display-2{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,5.5vw,3.6rem);line-height:1.12;margin:.1em 0 .4em}
.display-3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.8vw,2.4rem);line-height:1.2;margin:0}
.eyebrow{text-transform:none;letter-spacing:2px;font-size:.8rem;font-weight:600;margin:0;opacity:.9}
.section-head a{font-weight:600;text-decoration:none}

/* hero */
.hero2{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0d1720}
.hero2-media{position:absolute;inset:0}
.hero2-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero2 .hero-night{display:none}
.hero2[data-time="night"] .hero-day{display:none}.hero2[data-time="night"] .hero-night{display:block}
.hero2 span.hero-night{display:none}.hero2[data-time="night"] span.hero-night{display:inline}.hero2[data-time="night"] span.hero-day{display:none}
.hero2-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,30,.15) 0%,rgba(10,20,30,.05) 35%,rgba(10,20,30,.72) 78%,rgba(10,20,30,.9) 100%)}
.hero2[data-time="dusk"] .hero2-media::after,.hero2[data-time="dawn"] .hero2-media::after{background:linear-gradient(180deg,rgba(120,50,20,.25),rgba(40,20,20,.1) 35%,rgba(30,15,15,.78) 80%,rgba(20,10,10,.92))}
.hero2-inner{position:relative;z-index:2;padding-top:120px;padding-bottom:56px;width:100%}
.hero2-lede{font-size:clamp(1.05rem,2.4vw,1.35rem);max-width:34em;opacity:.95;margin:0 0 22px}
.today-card{background:rgba(255,255,255,.12);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:16px 20px;max-width:620px}
.today-card .today-label{color:#FCE9C8;margin:0;font-size:.85rem}
.today-card .today-line{color:#fff;font-family:var(--font-display);font-size:clamp(1.15rem,3vw,1.5rem);margin:.2em 0 .5em}
.today-card .today-facts{color:#fff}
.today-card .today-note{color:rgba(255,255,255,.75);margin-top:.6em}
.hero-search{position:relative;margin-top:16px;max-width:620px;display:flex;background:#fff;border-radius:999px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.hero-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.05rem;padding:15px 22px;color:#2A2420;border-radius:999px}
.hero-search input:focus{outline:none}
.hero-search button{border:0;background:var(--khrang);color:#fff;border-radius:999px;margin:6px;width:48px;display:grid;place-items:center;cursor:pointer}
.hero-search button svg{width:22px;height:22px}
.hero-search .results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;margin:0;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.photo-credit{position:absolute;right:14px;bottom:8px;z-index:3;margin:0;font-size:.7rem;color:rgba(255,255,255,.7)}
.photo-credit a{color:inherit}
.mist-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mist-layer i{position:absolute;left:-30%;width:90%;height:28%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);filter:blur(10px)}
.mist-layer i:nth-child(1){top:38%}.mist-layer i:nth-child(2){top:52%;left:10%;width:70%}.mist-layer i:nth-child(3){top:30%;left:40%;width:60%;opacity:.7}
.hero2[data-time="night"] .mist-layer{opacity:.35}

/* quick nav */
.quick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:-34px;position:relative;z-index:5}
.quick a{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 6px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.9rem;box-shadow:0 14px 30px -22px rgba(31,63,91,.6)}
.quick a svg{width:26px;height:26px;color:var(--kram)}
.quick a.q-red svg{color:var(--khrang)}
@media (max-width:560px){.quick{grid-template-columns:repeat(6,minmax(64px,1fr));overflow-x:auto;gap:8px}.quick a{font-size:.78rem;padding:12px 4px}}

/* whisper */
.whisper{margin-top:56px;background:#4A1E16;color:#F8EBDD;padding:56px 0;position:relative;overflow:hidden}
.whisper::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(184,144,47,.35),transparent 45%),radial-gradient(circle at 10% 90%,rgba(158,59,43,.6),transparent 50%)}
.whisper-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:800px){.whisper-grid{grid-template-columns:1fr;gap:24px}}
.whisper-fig{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transform:rotate(-1.2deg)}
.whisper-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.whisper-fig figcaption{font-size:.72rem;padding:6px 12px;background:rgba(0,0,0,.35);color:rgba(255,255,255,.75)}
.whisper .eyebrow{color:#E8C27A}
.whisper h2{color:#fff}
.whisper-text p{font-size:1.05rem}
.whisper-facts{list-style:none;padding:0;margin:18px 0 6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.whisper-facts li{border:1px solid rgba(232,194,122,.35);border-radius:16px;padding:12px}
.whisper-facts b{display:block;font-family:var(--font-display);font-size:1.5rem;color:#E8C27A;line-height:1.2}
.whisper-facts span{font-size:.8rem;opacity:.85;line-height:1.45;display:block}
.fine-note{font-size:.75rem!important;opacity:.7}
.btn-light{display:inline-block;margin-top:8px;background:#F8EBDD;color:#4A1E16;font-weight:600;padding:12px 22px;border-radius:999px;text-decoration:none}
.btn-light:hover{background:#fff}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;gap:12px}
.tile{position:relative;border-radius:22px;overflow:hidden;display:block;color:#fff;text-decoration:none;background:#223}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}
.tile-text{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:grid}
.tile-text b{font-family:var(--font-display);font-size:1.25rem;line-height:1.25}
.tile-text small{opacity:.85;font-size:.82rem}
.tile.xl{grid-column:span 2;grid-row:span 2}.tile.xl .tile-text b{font-size:1.9rem}
.tile.tall{grid-row:span 2}.tile.wide{grid-column:span 2}
.tile:hover img{transform:scale(1.07)}
@media (max-width:860px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}.tile.xl{grid-column:span 2}.tile.wide{grid-column:span 2}}

/* seasons */
.seasons{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px max(16px,calc((100vw - 1080px)/2 + 16px)) 16px;scrollbar-width:thin}
.season{flex:0 0 min(78vw,300px);scroll-snap-align:start;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/4;color:#fff;text-decoration:none}
.season img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.season:hover img{transform:scale(1.06)}
.season::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.78))}
.season span{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;display:grid;gap:2px}
.season em{font-style:normal;font-size:.8rem;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);justify-self:start;padding:2px 10px;border-radius:999px}
.season b{font-family:var(--font-display);font-size:1.6rem}
.season small{opacity:.9}

/* numbers */
.numbers{background:var(--kram-deep);color:#EDE7DD;padding:48px 0;margin-top:40px}
:root:not([data-theme="dark"]) .numbers{background:#1F3F5B}
.numbers h2{color:#fff;margin-bottom:18px}
.numbers .stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.numbers .stat b{color:#E8C27A;font-family:var(--font-display);font-size:2.2rem}
.numbers .stat span{color:#C9D6E2}
.numbers .source{color:#AFC0CF}.numbers .source a{color:inherit}

/* doors v2 */
.door2{position:relative;border-radius:24px;overflow:hidden;min-height:280px;display:flex;align-items:flex-end;text-decoration:none;color:#fff}
.door2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.door2:hover img{transform:scale(1.05)}
.door2.trip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(20,40,30,.85))}
.door2>span{position:relative;z-index:2;padding:22px;display:grid;gap:4px}
.door2 em{font-style:normal;color:#E8C27A;font-size:.85rem;font-weight:600}
.door2 b{font-family:var(--font-display);font-size:1.8rem;line-height:1.2}
.door2.gov{background:linear-gradient(135deg,#1F3F5B,#2E5E7C);align-items:stretch}
.door2.gov ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:2px}
.door2.gov a{color:#fff;text-decoration:none;display:block;padding:8px 0;border-top:1px solid rgba(255,255,255,.18);font-weight:600}
.door2.gov a:hover{color:#E8C27A}

/* reveal on scroll */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
  .mist-layer i{animation:mistdrift 26s ease-in-out infinite alternate}
  .mist-layer i:nth-child(2){animation-duration:34s;animation-direction:alternate-reverse}
  .mist-layer i:nth-child(3){animation-duration:40s}
  .hero2-media img{animation:kenburns 30s ease-in-out infinite alternate}
}
@keyframes mistdrift{from{transform:translateX(-8%)}to{transform:translateX(28%)}}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}

/* photos in places + credits page */
.place-photo{margin:-16px -18px 12px;height:190px;overflow:hidden;border-radius:14px 14px 0 0}
.place-photo img{width:100%;height:100%;object-fit:cover}
.credits{list-style:none;padding:0;display:grid;gap:12px}
.credits li{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px}
.credits img{width:120px;height:80px;object-fit:cover;border-radius:10px}
.credits small{display:block;color:var(--stone)}
.section.wrap{padding-left:16px;padding-right:16px}
.warn-inline{color:var(--khrang)}
.alert{background:var(--khrang-tint);border:1px solid var(--khrang);border-radius:16px;padding:14px 16px;margin:10px 0 6px}
.alert b{color:var(--khrang)}
.alert p{margin:.3em 0;font-size:.93rem}
h3.sub{font-family:var(--font-head);margin:22px 0 10px;color:var(--kram)}