/* Warm temple palette — mulberry paper, lacquer red, temple gold. Everything
   below already drew its colour from these variables, so retuning them moves
   the whole site at once rather than leaving the homepage a stranger to it.
   Retuned 2026-08-01 to the values Nan picked out of the Claude Design study:
   creamier paper, a brighter lacquer red, a real marigold gold. The names did
   not move, so every rule written against them came along.
   --link and --visited deliberately stay blue and purple. The study made links
   red like everything else; this is a directory, and which shelves you have
   already opened is information the reader is owed. */
:root{--paper:#faf5ea;--ink:#2a1e16;--ant:#c13a2e;--ant-dark:#8f2a21;
--link:#14479b;--visited:#6B3FA0;--soft:#e3d5bc;--mute:#a08b6c;
--day:#c13a2e;
--card:#fffdf7;--card-alt:#f8f0dd;--ink-soft:#544636;--gloss:#8a755b;
--gold:#c08a2d;--gold-light:#f3c34b;--gold-pale:#f9e2a4;
--marigold-a:#f9dc93;--marigold-b:#f3c34b;--marigold-ink:#6d5411;
--jade-a:#cfe3d2;--jade-b:#b8d4bd;--jade-ink:#26402c;--jade:#1f6b57;
--warm-border:#e3d5bc;--dashed:#c4b28d;--row-hover:#fcf3dc;
--shadow:#e3d5bc;--shadow-dark:#c9b074;--on-dark:#f7eeda;--on-dark-mute:#b6a68c;
/* after dark — the one place the site is allowed to be a nightclub */
--night-a:#3a1b4f;--night-b:#1e0f30;--night-c:#160a24;--neon:#ff6ec7;
--neon-gold:#ffd24a;--night-mute:#d8c7ee;}
/* สีประจำวัน — md.js sets --day from the baked fortune, so the page
   quietly wears the colour of the weekday, as a Thai calendar does. */
.masthead{border-bottom:3px solid var(--day)}
.wtile h3{border-left:3px solid var(--day);padding-left:.4rem}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
font:19px/1.65 -apple-system,"Thonburi","Sarabun","Noto Sans Thai",sans-serif;}
main{max-width:960px;margin:0 auto;padding:1rem 1.2rem 4rem}
a{color:var(--link)} a:visited{color:var(--visited)}
a:hover{text-decoration-thickness:3px;text-decoration-color:var(--ant)}
header.site{border-bottom:4px double var(--ant);padding:.8rem 0 .7rem;margin-bottom:.6rem}
.masthead{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.logo{font-size:2rem;font-weight:800;color:var(--ant);text-decoration:none;letter-spacing:.5px}
.logo:visited{color:var(--ant)} .logo .ant{display:inline-block;transition:transform .35s}
.logo:hover .ant{transform:rotate(-20deg) translateY(-3px)}
.tagline{color:var(--ant-dark);font-size:.95rem}
.langgroup{margin-left:auto;display:flex;flex:0 0 auto;border:2px solid var(--ink);
border-radius:14px;overflow:hidden;box-shadow:0 2px 0 var(--shadow)}
.langbtn{border:0;border-right:2px solid var(--ink);background:var(--card);color:var(--ink);
font:inherit;font-size:.85rem;font-weight:600;padding:.3rem .8rem;cursor:pointer;min-height:44px}
.langbtn:last-child{border-right:0}
.langbtn:hover{background:var(--row-hover)}
.langbtn[aria-pressed="true"]{background:var(--ink);color:var(--gold-light)}
.langbtn[aria-pressed="true"]:hover{background:var(--ant)}
form.seek{display:flex;gap:.5rem;margin:.7rem 0 .2rem}
form.seek input{flex:1;max-width:26rem;font:inherit;padding:.25rem .6rem;
border:2px solid var(--ant-dark);border-radius:.4rem;background:#fff;color:var(--ink)}
form.seek button{font:inherit;border:2px solid var(--ant);background:var(--ant);color:#fff;
border-radius:.4rem;padding:.25rem .9rem;cursor:pointer}
form.seek button:hover{background:var(--ant-dark)}
.svcbar{font-size:.9rem;margin:.2rem 0 0;color:var(--ant-dark)}
/* Three ways to read the page: Thai alone, both together, or English alone.
   The " · " that joins them lives inside the .en span but is itself marked
   .th, so it shows only when both languages do and never strands itself at
   the front of a lone English gloss. */
.en{display:none}
body.lang-both .en{display:inline}
body.lang-en .en{display:inline} body.lang-en .th{display:none}
h1{font-size:1.6rem;margin:.4rem 0} h2{font-size:1.25rem;border-bottom:2px solid var(--soft);
padding-bottom:.2rem;margin-top:1.6rem}
ul.dir{list-style:none;padding:0;column-width:22rem;column-gap:2.5rem}
ul.dir li{margin:.28rem 0;break-inside:avoid}
/* 🐜N chips sleep until the reader sorts by completeness (.ranked, set by
   md.js) — in every other order a score beside a business name would read
   as a rating of the business. Full listings wear a touch of gold. */
.antchip{display:none;font-size:.7rem;color:var(--gloss);
border:1px solid var(--warm-border);border-radius:999px;
padding:.02rem .42rem;margin-left:.35rem;white-space:nowrap;
vertical-align:.08rem;background:var(--card)}
ul.dir.ranked .antchip{display:inline-block}
.antchip[data-r="8"],.antchip[data-r="9"]{color:var(--marigold-ink);
border-color:var(--gold-light);background:var(--gold-pale)}
.antchip[data-r="0"],.antchip[data-r="1"]{border-style:dashed}
ul.cats{list-style:none;padding:0;column-width:26rem;column-gap:2.5rem}
ul.cats li{margin:.1rem 0 .8rem;break-inside:avoid}
ul.cats .teaser{display:block;font-size:.88rem;color:var(--mute)}
.count{color:var(--ant-dark);font-size:.9rem}
.shelf{color:var(--mute)} .shelf .soon{font-size:.8rem;background:var(--soft);
border-radius:.5rem;padding:0 .5rem;white-space:nowrap}
.badge{background:var(--soft);border-radius:.5rem;padding:0 .5rem;font-size:.8rem;white-space:nowrap}
.badge.pin{background:#F6D9CE;color:var(--ant-dark)}
.grow{color:var(--ant-dark);font-size:.9rem;font-style:italic}
/* Plan (route) toggle — a small ring on every listing row, a labelled pill
   on the place page itself. Same data-plan key drives both. */
.planbtn{border:1.5px solid var(--warm-border);background:#fff;border-radius:50%;
width:23px;height:23px;padding:0;margin-left:.35rem;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;vertical-align:-6px}
.planbtn:hover{border-color:var(--ant)}
.planbtn .planicon{color:var(--gloss);width:14px;height:14px}
.planbtn.on{background:var(--ant);border-color:var(--ant-dark)}
.planbtn.on .planicon{color:#fff}
.planbtn-lg{border-radius:.6rem;width:auto;height:auto;padding:.5rem .95rem;gap:.45rem;
margin:.5rem 0 .2rem;font:inherit;font-weight:700;border:2px solid var(--ant)}
.planbtn-lg .planicon{width:18px;height:18px}
.planbtn-lg:not(.on){color:var(--ant-dark)}
.planbtn-lg.on{color:#fff}
.planbtn-lg .off-label,.planbtn-lg.on .on-label{display:inline}
.planbtn-lg .on-label,.planbtn-lg.on .off-label{display:none}
.chip .plancount{background:var(--ant);color:#fff;border-radius:1rem;font-size:.72rem;
font-weight:700;padding:.05rem .42rem;margin-left:-.1rem}
.chip.dark .plancount{background:var(--gold);color:var(--ink)}
.subshelf{background:#fff;border:1px solid var(--soft);border-radius:.7rem;
padding:.6rem 1rem;margin:.6rem 0 1rem}
.subshelf b a{font-weight:700}
.toolbar{display:flex;gap:.5rem;align-items:center;font-size:.9rem;margin:.4rem 0 .6rem;flex-wrap:wrap}
.toolbar button{font:inherit;font-size:.85rem;border:1.5px solid var(--ant-dark);
background:none;color:var(--ant-dark);border-radius:999px;padding:.05rem .7rem;cursor:pointer}
.toolbar button.on,.toolbar button:hover{background:var(--ant-dark);color:var(--paper)}
.dist{color:var(--ant-dark);font-size:.85rem}
/* Ant rank drives sort order only now (data-rank, invisible) — never a
   visible count or bar next to a business's name; see build.py ant_panel(). */
.antlegend{margin:-.3rem 0 .7rem;opacity:.75}
.antgap{margin:.6rem 0 0;font-size:.9rem}
.licence{display:block;margin:.35rem 0 .2rem;opacity:.7;font-size:.82rem}
.ourchannels{margin:1rem 0;padding:.7rem .9rem .8rem;border:1px solid var(--soft);
border-radius:.8rem;background:#fff}
.ourchannels ul{margin:.35rem 0 .5rem;padding-left:1.1rem}
.ourchannels li{margin-bottom:.2rem}
/* Honours — a temple's grade and the food marks people here already trust.
   Deliberately quieter than the ant rank: standing is stated, not shouted. */
.hons{white-space:normal}
.hon{display:inline-block;font-size:.72rem;line-height:1.5;margin-left:.35rem;
padding:0 .45rem;border-radius:999px;vertical-align:.08em}
.hon.royal{background:#F3E7C9;color:#7A5A12;border:1px solid #DFC98C}
.hon.food{background:#FBE3DA;color:#8F2E13;border:1px solid #EFC1AF}
.honpanel{margin:.9rem 0;padding:.7rem .9rem .8rem;border-radius:.8rem;
border:1px solid #DFC98C;background:linear-gradient(180deg,#FDF6E6,#FBF6EE)}
.honpanel ul{margin:.35rem 0 .5rem;padding-left:1.1rem}
.honpanel li{margin-bottom:.4rem}
.honverb,.honsrc{display:block;font-size:.85rem;opacity:.8}
.honsrc a{font-size:.82rem}
/* Facets — what this branch of the chain actually has. Solid-bordered when a
   person confirmed it, dashed when it was joined by distance from a map point:
   the border IS the provenance, readable before the tooltip is opened. */
.facets{white-space:normal}
.facet{display:inline-block;font-size:.72rem;line-height:1.6;margin-left:.3rem;
padding:0 .45rem;border-radius:999px;vertical-align:.08em;cursor:help;
background:#E8F0E2;color:#3C5A2E;border:1px solid #C3D8B6}
.facet.near{border-style:dashed;opacity:.85}
.facet.field{background:#DCEFD2;border-color:#8FBF77;font-weight:600}
.facets:not(.small) .facet{font-size:.86rem;line-height:2;margin:.15rem .3rem .15rem 0;
padding:.1rem .7rem}
.facetpanel{margin:.9rem 0;padding:.7rem .9rem .8rem;border-radius:.8rem;
border:1px solid #C3D8B6;background:linear-gradient(180deg,#F3F8EF,#F8FAF5)}
.facetpanel .facetlede{margin:.15rem 0 .5rem}
.facetbar{margin-top:.4rem}
.fchip{cursor:pointer}
.fchip.on{background:var(--ant);color:#fff;border-color:var(--ant)}
.fchip.clear{opacity:.7}
.dir li.fhide{display:none}
.facetticks{margin:.9rem 0;padding:.6rem .8rem .8rem;border:1px solid #C3D8B6;
border-radius:.8rem;background:#F7FAF4}
.facetticks legend{font-weight:700;padding:0 .35rem}
.facetticks .tick{display:inline-flex;align-items:center;gap:.35rem;
margin:.2rem .5rem .2rem 0;padding:.25rem .6rem;border:1px solid #C3D8B6;
border-radius:999px;background:#fff;cursor:pointer;font-size:.9rem}
.facetticks .tick:has(input:checked){background:#DCEFD2;border-color:#8FBF77;font-weight:600}
.facetticks input{width:1.05rem;height:1.05rem;accent-color:#5C8A44}
.lineoa{margin:.9rem 0;padding:.7rem .9rem .8rem;border:1.5px dashed #06C755;border-radius:.8rem;
background:rgba(6,199,85,.05)}
.lineoa p{margin:.3rem 0}
.lineoa .lineid{font-weight:700;color:#06914a;margin-left:.4rem}
.lineoa .lineqr{margin-top:.4rem;border:1px solid var(--soft);border-radius:.4rem;background:#fff}
.featured{border:2px solid var(--ant);border-radius:.8rem;padding:.9rem 1.1rem;margin:1rem 0;
background:#fff;box-shadow:3px 3px 0 var(--soft);transition:transform .18s,box-shadow .18s}
.featured:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--soft)}
.featured .star{color:var(--ant)}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1.2rem}
dt{color:var(--ant-dark);font-weight:600} dd{margin:0;overflow-wrap:anywhere}
/* Reach block — the channels that actually answer, ranked, above the facts. */
.reach{margin:1.1rem 0 .4rem;padding:.75rem .9rem .85rem;border-radius:.8rem;
border:1px solid var(--soft);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6));
backdrop-filter:blur(6px);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 10px rgba(42,30,22,.05)}
.reach .row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-start;margin-top:.45rem}
.reachlabel{font-size:.9rem;color:var(--ant-dark);font-weight:700;letter-spacing:.02em}
.reach .tinynote{margin-left:.5rem}
.tinynote{font-size:.8rem;color:var(--mute)}
/* Birth chart — the four pillars. Computed in the reader's own browser, so the
   page has nowhere to send a birth date even if it wanted to. */
.chartform{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin:1rem 0 .4rem;
padding:.9rem 1rem;border-radius:.9rem;border:1px solid var(--soft);
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6));
backdrop-filter:blur(6px);box-shadow:0 2px 12px rgba(42,30,22,.06)}
.chartform label{display:flex;flex-direction:column;gap:.25rem;font-size:.86rem;color:var(--ant-dark)}
.chartform input{font:inherit;padding:.42rem .6rem;border:1px solid var(--soft);border-radius:.55rem;
background:#fff;color:var(--ink)}
.chartform button{font:inherit;font-weight:600;padding:.5rem 1.3rem;border:2px solid var(--ink);
border-radius:999px;background:var(--ant);color:#fff;cursor:pointer;
transition:transform .13s cubic-bezier(.34,1.56,.64,1),box-shadow .13s}
.chartform button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(42,30,22,.18)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.7rem;margin:1rem 0}
.pillar{text-align:center;padding:.85rem .5rem;border-radius:.8rem;border:1px solid var(--soft);
background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.65));
box-shadow:0 2px 10px rgba(42,30,22,.05)}
.pillar .zh{font-size:2.1rem;line-height:1.15;color:var(--ink)}
.pillar .pin{font-size:.82rem;color:var(--mute)}
.pillar .who{font-size:.8rem;color:var(--ant-dark);font-weight:700;letter-spacing:.02em}
.pillar.unknown{opacity:.55;border-style:dashed}
.elements{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 0}
.elements span{padding:.28rem .8rem;border-radius:999px;border:1px solid var(--soft);font-size:.86rem}
.elements .none{opacity:.5}
.chartnote{margin:.5rem 0 0;font-size:.85rem;color:var(--mute)}
.chartout[hidden]{display:none}
/* Privacy — plain rows, no clever layout. Someone reading this wants answers. */
.privrow{margin:1rem 0;padding:.85rem 1rem;border-radius:.8rem;border:1px solid var(--soft);
background:rgba(255,255,255,.7)}
.privrow h3{margin:0 0 .3rem;font-size:1rem;color:var(--ant-dark)}
.privrow p{margin:.2rem 0}
.chwrap{display:inline-flex;flex-direction:column;gap:.15rem}
.reach .pill{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .9rem;
border-radius:999px;text-decoration:none;font-size:.9rem;color:#fff;font-weight:500;
transition:transform .13s cubic-bezier(.34,1.56,.64,1),box-shadow .13s,filter .13s}
.reach .pill:visited{color:#fff}
.reach .pill:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.reach .pill:active{transform:translateY(0) scale(.97)}
.reach .pill b{font-weight:700}
.reach .chico{font-size:.95em;line-height:1}
.reach .chlabel{opacity:.85;font-size:.82em}
.reach .pill.phone{background:var(--ant)}
.reach .pill.line{background:#06C755}
.reach .pill.facebook{background:#1877F2}
.reach .pill.instagram{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.reach .pill.whatsapp{background:#25D366}
.reach .pill.web{background:#3B5A4A}
.reach .pill.email{background:var(--ant-dark)}
.reach .pill.x{background:#111} .reach .pill.tiktok{background:#111}
.reach .pill.youtube{background:#FF0000} .reach .pill.line b{letter-spacing:.01em}
.chbadge{font-size:.74rem;color:var(--mute);padding-left:.55rem}
.retired{margin:.5rem 0 .2rem;padding:.6rem .9rem;border-radius:.7rem;
border:1px dashed var(--soft);background:rgba(234,223,206,.35);font-size:.88rem}
.retired ul{margin:.3rem 0 .35rem;padding-left:1.1rem}
.retired li{margin:.15rem 0}
.oldsite{color:var(--mute);text-decoration:line-through;text-decoration-thickness:1px}
.ofrecord{margin:.5rem 0;padding:.55rem .9rem;border-radius:.7rem;font-size:.9rem;
background:var(--soft)}
.share{margin-top:1.2rem}
.share .sharelabel{font-size:.9rem;color:var(--ant-dark);font-weight:600;display:block;margin-bottom:.4rem}
.share .row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.share .pill{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .85rem;
border-radius:999px;text-decoration:none;font-weight:600;font-size:.88rem;color:#fff;
border:none;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .12s}
.share .pill:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.18)}
.share .pill:visited{color:#fff}
.share .pill.native{background:var(--ant)}
.share .pill.line{background:#06C755}
.share .pill.whatsapp{background:#25D366}
.share .pill.telegram{background:#229ED9}
.share .pill.copy{background:var(--ant-dark)}
.qrbox{display:flex;align-items:center;gap:.8rem;margin-top:.7rem;background:#fff;
border:1px solid var(--soft);border-radius:.7rem;padding:.6rem .9rem;max-width:26rem}
.qrbox img{width:76px;height:76px;image-rendering:pixelated;flex-shrink:0}
.qrbox p{margin:0;font-size:.85rem;color:var(--mute)}
.adbox{border:1px solid var(--ant);border-radius:.6rem;background:#fff;
padding:.5rem .9rem;margin:1.1rem 0;font-size:.95rem}
.adbox .adlabel{display:block;font-size:.72rem;letter-spacing:.12em;color:var(--mute);
text-transform:uppercase;margin-bottom:.1rem}
.adbox .adsell{font-size:.78rem;margin-left:.6rem;color:var(--mute)}
.related{margin:1.1rem 0}
.related h2{font-size:.95rem;margin:0 0 .4rem}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .7rem}
.related li{font-size:.88rem}
.myhint{background:var(--soft);border-radius:.6rem;padding:.5rem .9rem;font-size:.9rem}
#bmform input{font:inherit;font-size:.9rem;padding:.2rem .5rem;border:1.5px solid var(--soft);
border-radius:.4rem;margin-right:.4rem;max-width:11rem}
#bmform button{font:inherit;font-size:.9rem;border:1.5px solid var(--ant);background:none;
color:var(--ant);border-radius:.4rem;padding:.15rem .7rem;cursor:pointer}
.bmdel{border:none;background:none;color:var(--mute);cursor:pointer;font-size:.8rem}
#mynotes{width:100%;min-height:7rem;font:inherit;font-size:.95rem;border:1.5px solid var(--soft);
border-radius:.5rem;padding:.5rem;background:#fff;color:var(--ink)}
#pinpick label{display:inline-block;margin:.15rem .9rem .15rem 0;font-size:.92rem;cursor:pointer}
.topicwidget{background:#fff;border:1px solid var(--soft);border-radius:.7rem;
padding:.6rem 1rem;margin:.6rem 0}
.topicwidget h4{margin:0 0 .2rem;font-size:1.02rem}
.topicwidget h4 a{text-decoration:none} .topicwidget h4 a:hover{text-decoration:underline}
.topicwidget .preview{list-style:none;padding:0;margin:.3rem 0 0;font-size:.88rem}
.topicwidget .preview li{margin:.1rem 0}
.topicwidget .unpin{float:right;border:none;background:none;color:var(--mute);
cursor:pointer;font-size:.85rem}
.highlights{display:flex;gap:.9rem;overflow-x:auto;padding:.3rem 0 .8rem;margin:.4rem 0}
.highlights::-webkit-scrollbar{height:8px}
.hicard{flex:0 0 auto;width:11rem;background:#fff;border:1px solid var(--soft);
border-radius:.7rem;overflow:hidden;text-decoration:none;color:var(--ink);
box-shadow:2px 2px 0 var(--soft);transition:transform .15s}
.hicard:hover{transform:translateY(-3px)} .hicard:visited{color:var(--ink)}
.hicard img{width:100%;height:7rem;object-fit:cover;display:block;background:var(--soft)}
.hicard .cap{padding:.4rem .55rem;font-size:.85rem;font-weight:600;line-height:1.3}
.hicard .cat{display:block;font-weight:400;color:var(--mute);font-size:.78rem}
.widgetgallery{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0}
.widgetgallery button{font:inherit;font-size:.85rem;border:1.5px solid var(--ant-dark);
background:none;color:var(--ant-dark);border-radius:999px;padding:.2rem .8rem;cursor:pointer}
.widgetgallery button:hover{background:var(--ant-dark);color:var(--paper)}
.widgetgallery button:disabled{opacity:.45;cursor:default;background:none;color:var(--mute);
border-color:var(--soft)}
.widgetbox{border:1px solid var(--soft);border-radius:.7rem;overflow:hidden;margin:.6rem 0;background:#fff}
.widgetbox .wtitle{display:flex;justify-content:space-between;align-items:center;
padding:.35rem .8rem;background:var(--soft);font-size:.85rem;font-weight:600;color:var(--ant-dark)}
.widgetbox .wtitle button{border:none;background:none;color:var(--mute);cursor:pointer;font-size:.9rem}
.widgetbox iframe{width:100%;height:22rem;border:none;display:block}
#addwidgetform input{font:inherit;font-size:.9rem;padding:.2rem .5rem;border:1.5px solid var(--soft);
border-radius:.4rem;margin-right:.4rem;max-width:11rem}
#addwidgetform button{font:inherit;font-size:.9rem;border:1.5px solid var(--ant);background:none;
color:var(--ant);border-radius:.4rem;padding:.15rem .7rem;cursor:pointer}
#fxamount{font:inherit;font-size:1.1rem;padding:.25rem .6rem;border:1.5px solid var(--ant-dark);
border-radius:.5rem;width:8rem;background:#fff;color:var(--ink)}
.fxrows{display:grid;grid-template-columns:auto auto;gap:.15rem 1rem;margin:.5rem 0 0;font-size:.95rem}
.fxrows b{color:var(--ant-dark)}
.goldrow{display:flex;justify-content:space-between;gap:1rem;margin:.15rem 0;font-size:.95rem}
.goldrow .lbl{color:var(--mute)} .goldrow .val{font-weight:700}
.goldchange{font-size:.85rem;margin-left:.4rem}
.goldchange.up{color:#0f6b3f} .goldchange.down{color:#a31f1f}
.financecap{color:var(--mute);font-size:.78rem;margin:.4rem 0 0}
.moonmodule{display:flex;gap:.8rem;align-items:center}
.moonmodule svg.dial{width:88px;height:88px;flex-shrink:0}
.moonwhat{font-size:.82rem;border:1px solid var(--ant-dark);color:var(--ant-dark);
border-radius:999px;padding:0 .55rem;text-decoration:none;white-space:nowrap}
.moonwhat:hover{background:var(--ant-dark);color:var(--paper)}
.share button{font:inherit;font-size:.9rem;border:none;background:none;color:var(--link);
cursor:pointer;text-decoration:underline;padding:0}
.prov{color:var(--ant-dark);font-size:.85rem;border-top:1px dashed var(--soft);
margin-top:1.6rem;padding-top:.5rem}
footer{border-top:4px double var(--ant);margin-top:3rem;padding-top:.7rem;font-size:.85rem;
color:var(--ant-dark);position:relative;overflow:hidden}
.crumbs{font-size:.9rem;margin-bottom:.4rem}
#scurry{position:absolute;bottom:2px;left:-2rem;font-size:1.1rem;pointer-events:none}
#scurry.go{animation:scurry 3.5s linear}
@keyframes scurry{from{left:-2rem}to{left:105%}}
.module{border:1px solid var(--soft);border-radius:.7rem;background:#fff;
padding:.5rem 1rem;margin:.7rem 0}
.module h3{margin:.1rem 0 .3rem;font-size:1rem;color:var(--ant-dark)}
.tickerwrap{overflow:hidden;white-space:nowrap}
.ticker{display:inline-block;padding-left:100%;animation:tick 55s linear infinite;
animation-delay:-9s}
.tickerwrap:hover .ticker{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.ticker a{margin-right:2.5rem}
.ticker .src{color:var(--mute);font-size:.8rem}
#daycolor .swatch{display:inline-block;width:1em;height:1em;border-radius:50%;
vertical-align:-.15em;margin-right:.35em;border:1px solid var(--soft)}
.persona{font-size:.85rem;text-align:right}
.persona details{display:inline-block;text-align:left}
.persona label{display:block;cursor:pointer}
.photo{max-width:100%;height:auto;max-height:280px;border-radius:.6rem;border:1px solid var(--soft);
margin:.6rem 0;display:block;background:#fff}
.phototag{color:var(--mute);font-size:.8rem;margin:-.4rem 0 .6rem}
.phototag.quiet{opacity:.45;font-size:.72rem}
.photodesc{color:var(--mute);font-style:italic}
.chartlegend{font-size:.9rem;margin:.4rem 0}
.chartlegend .swatch{display:inline-block;width:.9em;height:.9em;border-radius:3px;
vertical-align:-.1em;margin-right:.3em}
.chartcap{color:var(--mute);font-size:.82rem;margin-top:-.3rem}
.tilerow{display:flex;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
.tile{background:#fff;border:1px solid var(--soft);border-radius:.7rem;padding:.6rem 1.2rem;
text-align:center;min-width:7rem}
.tile b{display:block;font-size:1.7rem;color:var(--ant);line-height:1.3}
.tile span{font-size:.78rem;color:var(--mute)}
.missionbar{position:relative;background:var(--soft);border-radius:999px;height:28px;
overflow:hidden;margin:.6rem 0}
.missionfill{background:linear-gradient(90deg,#F6D9CE,var(--ant));height:100%;border-radius:999px}
.missionlabel{position:absolute;top:0;left:.8rem;line-height:28px;font-weight:700;
color:var(--ink);font-size:.9rem}
.festgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.9rem;margin:.6rem 0 1.2rem}
.festcard{background:#fff;border:1px solid var(--soft);border-radius:.8rem;padding:.9rem 1.1rem}
.festwhen{display:inline-block;background:var(--soft);color:var(--ant-dark);border-radius:.5rem;
font-size:.78rem;padding:.1rem .5rem;margin:.2rem .3rem .4rem 0}
.festprov{display:inline-block;border:1px solid var(--ant);color:var(--ant-dark);border-radius:.5rem;
font-size:.78rem;padding:.1rem .5rem;margin:.2rem 0 .4rem}
.festausp{font-size:.85rem;color:var(--ant-dark);border-top:1px dashed var(--soft);
margin-top:.5rem;padding-top:.4rem}
/* ---- widget wall: square tiles ---- */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
gap:1rem;margin:1rem 0 1.4rem}
.wtile{position:relative;aspect-ratio:1/1;background:#fff;border:1px solid var(--soft);
border-radius:1rem;padding:.85rem .95rem;display:flex;flex-direction:column;
overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.wtile:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(42,30,22,.11)}
.wtile h3{margin:0 0 .4rem;font-size:1rem;display:flex;align-items:center;gap:.3rem}
.wtile.feature{grid-column:span 2;aspect-ratio:2/1;border:2px solid var(--ant)}
@media (max-width:34rem){.wtile.feature{grid-column:span 1;aspect-ratio:1/1}}
.wfoot{margin-top:auto;font-size:.7rem;color:var(--mute);line-height:1.35;padding-top:.35rem}
.wcog{position:absolute;top:.6rem;right:.6rem;border:none;background:none;cursor:pointer;
font-size:1rem;color:var(--mute);line-height:1}
.wcog:hover{color:var(--ant)}
.wpick{position:absolute;inset:0;background:#fff;border-radius:1rem;padding:.8rem .9rem;
overflow-y:auto;z-index:3;display:flex;flex-direction:column;gap:.1rem}
.wpickhead{margin:0 0 .35rem;font-weight:700;font-size:.85rem}
.wpick label{font-size:.83rem;display:flex;gap:.35rem;align-items:center}
/* weather */
.wxpanes{flex:1;display:flex;flex-direction:column;justify-content:center}
.wxpane{display:flex;flex-direction:column;align-items:center;gap:.05rem}
.wxcity{font-size:.9rem;font-weight:700}
.wxicon{font-size:2.6rem;line-height:1.1}
.wxtemp{font-size:2rem;font-weight:800;color:var(--ant);line-height:1}
.wxtemp sup{font-size:.9rem;font-weight:600}
.wxcond{font-size:.8rem;color:var(--mute)}
.wxdays{display:flex;gap:.5rem;margin-top:.25rem;font-size:.75rem;color:var(--ant-dark)}
.wxday b{font-weight:400;margin-right:.1rem}
.wxmore{font-size:.72rem;color:var(--mute);text-align:center}
/* clocks */
.tzrows{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.15rem;overflow-y:auto}
.tzrow{display:flex;align-items:baseline;gap:.4rem;font-size:.88rem}
.tzcity{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tztime{font-weight:800;color:var(--ant);font-variant-numeric:tabular-nums}
.tzday{font-size:.7rem;color:var(--mute);min-width:2.2rem}
.tzshift{font-size:.75rem;display:flex;align-items:center;gap:.3rem;color:var(--mute)}
.tzshift input{flex:1;accent-color:var(--ant)}
/* toilets: the tier order, read cold, so it is already known when needed */
.loowlist{list-style:none;margin:.1rem 0 .5rem;padding:0;flex:1;min-height:0;
display:flex;flex-direction:column;gap:.18rem;overflow:hidden}
.loowlist li{display:flex;align-items:center;gap:.35rem;font-size:.82rem;line-height:1.3}
.loowem{flex:0 0 auto;font-size:1rem}
.loowcost{margin-left:auto;flex:0 0 auto;font-size:.7rem;padding:.1rem .4rem;
border-radius:2rem;background:var(--wash);border:1px solid var(--soft);white-space:nowrap}
.loowgo{display:block;text-align:center;text-decoration:none;font-weight:700;
font-size:.9rem;padding:.5rem .6rem;border-radius:.6rem;color:#fff;
background:linear-gradient(160deg,#D4552C,#A8371A)}
.loowgo:hover{filter:brightness(1.06)}
/* sky: lunation + jupiter, dark so the discs carry the tile */
.wtile.sky{background:#0d0a08;border-color:#3a2b20;align-items:center}
.skyslides{flex:1;position:relative;width:100%;min-height:0}
.skyslide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:.3rem}
.skyslide[hidden]{display:none}
.skyart{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}
.skyart svg{max-width:100%;max-height:100%;height:auto;width:auto;border-radius:.5rem}
.skycap{font-size:.8rem;color:#e8d9bd;text-align:center;line-height:1.3}
.moonfoot{color:#c9b9a8;text-align:center}
.moonfoot a{color:#eb9c7a}
/* maha lap: gold, and a yantra turning slowly behind the words */
.wtile.maha{background:linear-gradient(150deg,#fff8e6 0%,#f7e6b8 45%,#e9cd83 100%);
border:1px solid #d9b455;color:#4a3410;overflow:hidden}
.wtile.maha h3{color:#7a5410}
.wtile.maha::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 66%);
background-size:280% 100%;animation:shimmer 7s ease-in-out infinite}
@keyframes shimmer{0%{background-position:180% 0}60%,100%{background-position:-80% 0}}
.yantra{position:absolute;width:132%;height:132%;top:-16%;left:-16%;color:#b9922f;
opacity:.16;pointer-events:none;animation:turn 90s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.yantra{animation:none}.wtile.maha::after{animation:none}}
.wtile.maha .wfoot{color:#8a6a24}
/* today's day-colour tile */
.foday{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;z-index:1}
.fodayname{font-size:1.15rem;font-weight:800}
.foswatch{width:1rem;height:1rem;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.focolour{font-size:.85rem}
.fobuddha{margin:.3rem 0 0;font-size:.9rem;font-weight:600;z-index:1}
.foplanet{margin:.15rem 0 0;font-size:.82rem;z-index:1}
.folucky{margin-top:auto;padding-top:.4rem;z-index:1}
.foluckylabel{display:block;font-size:.72rem;color:#8a6a24}
.fonums{font-size:1.5rem;font-weight:800;letter-spacing:.06em;color:#7a5410;
font-variant-numeric:tabular-nums}
/* katha */
.kacards{flex:1;display:flex;align-items:center;z-index:1;min-height:0}
.kacard{width:100%}
.kath{margin:0;font-size:1.02rem;font-weight:700;line-height:1.55}
.karom{margin:.25rem 0 0;font-size:.78rem;font-style:italic;color:#8a6a24}
.kagloss{margin:.3rem 0 0;font-size:.78rem;line-height:1.4}
/* horoscope */
.hotabs{display:flex;gap:.25rem;margin-bottom:.35rem}
.hotab{border:1px solid var(--soft);background:none;border-radius:.45rem;padding:.1rem .45rem;
font:inherit;font-size:.76rem;cursor:pointer;color:var(--ant-dark)}
.hotab.on{background:var(--ant);color:#fff;border-color:var(--ant)}
.hopane{flex:1;overflow-y:auto;font-size:.85rem;line-height:1.45}
.hopane p{margin:.25rem 0}
.hopick{width:100%;font:inherit;font-size:.78rem;padding:.15rem .3rem;border-radius:.4rem;
border:1px solid var(--soft);margin-bottom:.3rem}
.hoaspect{font-weight:700;color:var(--ant-dark)}
.hopillar{font-size:1.1rem;font-weight:700;color:var(--ant-dark)}
/* hexagram */
.hxlines{display:flex;flex-direction:column;gap:.22rem;align-items:center;margin:.3rem 0 .4rem}
.hxline{display:block;width:4.4rem;height:.4rem;border-radius:1px;position:relative}
.hxline.yang{background:var(--ink)}
.hxline.yin{background:linear-gradient(90deg,var(--ink) 0 42%,transparent 42% 58%,var(--ink) 58% 100%)}
.hxline.moving::after{content:"○";position:absolute;right:-1rem;top:-.45rem;font-size:.7rem;
color:var(--ant)}
.hxname{margin:.1rem 0 0;text-align:center;font-size:1.05rem}
.hxen{margin:.05rem 0 0;text-align:center;font-weight:700;color:var(--ant-dark);font-size:.9rem}
.hxgloss{margin:.2rem 0 0;font-size:.8rem;line-height:1.4;text-align:center}
/* cinema */
.cnpick{width:100%;font:inherit;font-size:.8rem;padding:.2rem .3rem;border-radius:.4rem;
border:1px solid var(--soft);margin-bottom:.35rem;background:#fff}
.cnlist{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto;font-size:.82rem}
.cnlist li{margin:.25rem 0;line-height:1.3}
.cnmin{color:var(--mute);font-size:.72rem;margin-left:.3rem}
.cntimes{display:block;color:var(--ant-dark);font-variant-numeric:tabular-nums;font-size:.78rem}
.cnt{margin-right:.36rem;display:inline-block}
.cnt.past{opacity:.32}
.cnmore{margin-top:.3rem;font-size:.78rem}
.wstale{color:var(--mute);font-style:italic}
.cnnone{color:var(--mute)}
/* events tile */
.evslides{flex:1;position:relative;overflow:hidden;border-radius:.6rem}
.evslide{position:absolute;inset:0;display:flex;flex-direction:column;text-decoration:none;
color:var(--ink)}
.evslide[hidden]{display:none}
.evslide img{width:100%;flex:1;object-fit:cover;background:var(--soft);min-height:0}
.evslide img.evplaceholder{object-fit:contain;padding:.3rem;opacity:.75}
.evslidecap{padding:.35rem .15rem 0;font-size:.86rem;line-height:1.3}
.evslidewhen,.evslidewhere{display:block;font-weight:400;font-size:.75rem;color:var(--mute)}
.evdots{display:flex;gap:.25rem;justify-content:center;padding:.35rem 0 .15rem}
.evdot{width:.45rem;height:.45rem;border-radius:50%;border:none;padding:0;cursor:pointer;
background:var(--soft)}
.evdot.on{background:var(--ant)}
.tilepartner{margin:0}
.evpartnerbtn.small{font-size:.78rem;padding:.2rem .55rem;border-radius:.5rem}
.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem;margin:.5rem 0 1.4rem}
.evcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--soft);
border-radius:.9rem;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.evcard:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(42,30,22,.10)}
.evpic img{width:100%;height:8.5rem;object-fit:cover;display:block;background:var(--soft)}
.evpic img.evplaceholder{object-fit:contain;padding:.4rem;opacity:.75}
.evbody{padding:.7rem .9rem .9rem;display:flex;flex-direction:column;gap:.28rem;flex:1}
.evbody h3{margin:0;font-size:1.02rem;line-height:1.3}
.evwhen,.evwhere{margin:0;font-size:.88rem}
.evvenue{font-weight:600}
.evvenue.plain{font-weight:600;color:var(--ant-dark)}
.evapprox{color:var(--mute);font-size:.78rem;font-weight:400}
.evchan{display:flex;flex-wrap:wrap;gap:.3rem;margin:.15rem 0}
.evchan .ch{font-size:.78rem;background:var(--soft);border-radius:.5rem;padding:.05rem .45rem;
text-decoration:none;color:var(--ant-dark)}
.evdesc{margin:.2rem 0 0;font-size:.86rem;color:#4a3a2e}
.evmeta{margin:.35rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.evcost{background:var(--ant);color:#fff;border-radius:.5rem;font-size:.76rem;
font-weight:700;padding:.05rem .45rem}
.evrepeat{font-size:.76rem;color:var(--ant-dark)}
.evsrc{font-size:.72rem;color:var(--mute);margin-left:auto}
.evacts{margin:.5rem 0 0;display:flex;gap:.5rem;flex-wrap:wrap}
.evcal,.evmore{font-size:.8rem;border:1px solid var(--ant);border-radius:.5rem;
padding:.12rem .5rem;text-decoration:none;color:var(--ant-dark)}
.evcal:hover,.evmore:hover{background:var(--ant);color:#fff}
.evcal.small{border:none;padding:0}
.evday{margin:.9rem 0 .2rem;font-size:1rem;color:var(--ant-dark)}
.evfilters{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.8rem 0}
.evfilters button{border:2px solid var(--ant);background:none;color:var(--ant-dark);
border-radius:.6rem;padding:.15rem .6rem;cursor:pointer;font:inherit;font-size:.85rem}
.evfilters button.on{background:var(--ant);color:#fff}
.evics{margin-left:auto;font-size:.85rem}
.evseeall{font-size:.85rem;font-weight:400;margin-left:.4rem}
.evmapwrap{background:#fff;border:1px solid var(--soft);border-radius:.8rem;padding:.4rem;overflow-x:auto}
.evmap{display:block;min-width:22rem}
/* ---- errands: kinds of place, not named ones ------------------------- */
.planerr{background:var(--card,#fff);border:1px solid var(--soft);border-radius:.8rem;
padding:.8rem 1rem;margin:.9rem 0}
.planerr h2{margin:.1rem 0 .3rem;font-size:1.05rem}
.planerrrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0}
.planerrrow select{flex:1 1 14rem;min-height:2.6rem;font-size:1rem;padding:.3rem .4rem}
.planerrrow button{min-height:2.6rem}
.planerrlist{list-style:none;padding-left:0;margin:.4rem 0;display:flex;
flex-wrap:wrap;gap:.4rem}
.planerrlist li{background:var(--soft);border-radius:999px;padding:.2rem .5rem .2rem .7rem}
.errdel{border:0;background:none;cursor:pointer;font-size:.9rem;padding:0 .2rem}
.planerrout{margin-top:.6rem}
.errtotal{font-size:1.15rem;margin:.3rem 0}
.errsaved{color:var(--ant-dark,#8F2E13);font-weight:600;margin:.2rem 0}
ol.errpicks{margin:.4rem 0 .6rem 1.2rem}
ol.errpicks li{padding:.15rem 0}
/* ---- ไหว้พระ ๙ วัด ----------------------------------------------------- */
.meritcard{background:#fff;border:1px solid var(--soft);border-radius:.8rem;
padding:.9rem 1.1rem;margin:1rem 0}
.meritcard h2{margin:.1rem 0 .2rem}
.meritdist{color:var(--muted);margin:.1rem 0 .6rem}
.meritmap{display:block;min-width:20rem;margin:.3rem 0}
.merithint{font-size:.9rem;color:var(--muted);margin:.35rem 0}
/* Numbered because the walk is ordered, gold rather than brand red because the
   round is a merit-making one. Not a scoreboard — the page says so in words
   and the numbers are deliberately the same size as each other. */
ol.meritstops{list-style:none;counter-reset:mrt;padding-left:0;margin:.5rem 0}
ol.meritstops>li{counter-increment:mrt;position:relative;padding:.22rem 0 .22rem 2.3rem}
ol.meritstops>li::before{content:counter(mrt);position:absolute;left:0;top:.2rem;
width:1.7rem;height:1.7rem;border-radius:50%;background:#C9A227;color:#fff;
font-size:.8rem;font-weight:700;display:inline-flex;align-items:center;
justify-content:center}
.meritplan{margin:.6rem 0 .1rem}
.meritrule{font-weight:600}
.meritdays{background:#fff;border:1px solid var(--soft);border-radius:.8rem;
padding:.8rem 1rem;margin:1rem 0}
.meritdays ul{list-style:none;padding-left:0;margin:.5rem 0 0;
display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.6rem}
.meritdays li{line-height:1.45}
.daydot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;
margin-right:.4rem;vertical-align:baseline;border:1px solid rgba(0,0,0,.2)}
/* ---- read more elsewhere --------------------------------------------- */
/* Quiet by design. These links leave the site, so they sit below the facts
   and above the contribute doors, and they do not compete with the contact
   pills — those are how you reach someone, this is where you read. */
.elsewhere{margin:1rem 0;padding:.7rem .9rem;background:#fff;
border:1px solid var(--soft);border-radius:.8rem}
.elsewhere h2{margin:0 0 .35rem;font-size:1rem}
.elsewhere ul{list-style:none;padding-left:0;margin:.2rem 0}
.elsewhere li{padding:.22rem 0;line-height:1.5}
/* Yahoo's sunglasses, 1997, for the links worth the trip. Not decorative —
   it has a title, and the legend under the list says what earns it. */
.cool{font-style:normal;cursor:help}
.elsewhere .tinynote{margin:.4rem 0 0}
/* ---- the soi tier: a road, its sois, and what stands on it ----------- */
.soifig{margin:.8rem 0;background:#fff;border:1px solid var(--soft);border-radius:.8rem;
padding:.4rem;overflow-x:auto}
.soimap{display:block;min-width:20rem}
.soifig figcaption{font-size:.85rem;color:var(--muted);padding:.25rem .5rem .1rem}
.soisub{color:var(--muted);margin:.1rem 0 .7rem}
.soilen{white-space:nowrap}
.soiparent{margin:.2rem 0 .6rem}
/* The walking order is the point of the page, so the numbers are shown rather
   than being an invisible property of the list. Counter, not <ol> markers,
   because the rows already carry the star and the badges. */
ol.soidir{list-style:none;counter-reset:soi;padding-left:0}
ol.soidir>li{counter-increment:soi;position:relative;padding-left:2.4rem}
ol.soidir>li::before{content:counter(soi);position:absolute;left:0;top:.15rem;
min-width:1.7rem;height:1.7rem;border-radius:50%;background:var(--brand);color:#fff;
font-size:.8rem;font-weight:700;display:inline-flex;align-items:center;
justify-content:center;padding:0 .3rem}
/* A matched-by-position distance is quiet: it is a caveat, not a feature. */
.soidist{font-size:.75rem;color:var(--muted);margin-left:.4rem;white-space:nowrap}
.soimethod{font-size:.9rem;color:var(--muted);background:#fff;border:1px solid var(--soft);
border-radius:.6rem;padding:.5rem .7rem;margin:.5rem 0}
.soicross,.soialso,.soiabout{margin:1.1rem 0}
.soicross p,.soialso p{line-height:2}
.soiindex{list-style:none;padding-left:0;columns:2;column-gap:1.6rem}
.soiindex li{break-inside:avoid;padding:.3rem .1rem}
.soikids{display:block;font-size:.85rem;color:var(--muted);margin-left:.9rem;line-height:1.9}
.soikids a{color:var(--muted)}
.soiflag{font-size:.8rem}
.soiabout{background:#fff;border:1px solid var(--soft);border-radius:.8rem;padding:.8rem 1rem}
/* ---- plan.html: the errand-run planner ------------------------------- */
/* The hero. This is the best thing on the site, so it gets the space and the
   words to say what it does rather than a one-line tease. */
.planhero{border:2px solid var(--ink);border-radius:18px;overflow:hidden;
margin:1rem 0 1.6rem;background:var(--card);box-shadow:0 4px 0 var(--shadow-dark)}
.planhero .hh{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
padding:.7rem 1.2rem;border-bottom:2px solid var(--ink);
background:linear-gradient(var(--marigold-a),var(--marigold-b))}
.planhero .hh h2{margin:0;border:0;padding:0;font-size:1.3rem}
.planhero .hh .en{font-size:1rem;color:var(--marigold-ink);font-weight:400}
.planhero .hh .newflag{margin-left:auto;background:var(--ant);color:#fff;font-size:.72rem;
font-weight:700;border-radius:1rem;padding:.15rem .6rem;letter-spacing:.03em;white-space:nowrap}
.planhero .hbody{display:flex;gap:1.3rem;padding:1.2rem;flex-wrap:wrap;align-items:flex-start}
.planhero .hgif{flex:0 0 auto;width:200px;height:200px;border-radius:14px;
border:1px solid var(--warm-border);background:#FBF6EE}
.planhero .htext{flex:1 1 17rem;min-width:0}
.planhero .hlede{margin:0 0 .7rem;font-size:1.02rem;line-height:1.5}
.planhero ul.hpts{list-style:none;margin:0 0 .9rem;padding:0;font-size:.92rem}
.planhero ul.hpts li{margin:.3rem 0;padding-left:1.5rem;position:relative;color:var(--ink-soft)}
.planhero ul.hpts li::before{content:"🐜";position:absolute;left:0;font-size:.85rem}
.planhero .hnum{background:var(--soft);border-radius:.7rem;padding:.55rem .85rem;
font-size:.88rem;margin:0 0 .9rem;color:var(--ink)}
.planhero .hnum .hcap{display:block;font-weight:700;color:var(--ant-dark);margin-bottom:.25rem}
.planhero .hnum table{border-collapse:collapse;width:100%;max-width:22rem}
.planhero .hnum td{padding:.1rem .3rem;vertical-align:baseline}
.planhero .hnum td.hg{width:1.4rem}
.planhero .hnum td.hv{text-align:right;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.planhero .hnum tr.crow td{color:var(--mute)}
.planhero .hnum tr.crow td.hv{text-decoration:line-through;font-weight:400}
.planhero .hnum tr.foot td.hv{color:var(--ant-dark)}
.planhero .hnum tr.ride td.hv{color:#1c5aa8}
.planhero .hnum .hwhy{display:block;margin-top:.3rem;font-size:.82rem;color:var(--gloss)}
.planhero .hcta{display:inline-block;background:var(--ant);color:#fff;border:2px solid var(--ink);
border-radius:.7rem;padding:.6rem 1.3rem;font-weight:700;text-decoration:none;font-size:1.02rem;
box-shadow:0 3px 0 var(--shadow-dark)}
.planhero .hcta:hover{background:var(--ant-dark);text-decoration:none}
.planhero .hcta:visited{color:#fff}
.planhero .hfoot{margin:.6rem 0 0;font-size:.82rem;color:var(--gloss)}
@media (max-width:34rem){
.planhero .hbody{justify-content:center}
.planhero .hgif{width:100%;height:auto;max-width:260px}}
.plantools{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0 1rem}
.plantools button{border:2px solid var(--ant);background:none;color:var(--ant-dark);
border-radius:.6rem;padding:.35rem .8rem;cursor:pointer;font:inherit;font-size:.9rem}
.plantools button:hover{background:var(--ant);color:#fff}
.plantools button.on{background:var(--ant);color:#fff}
.plantotal{background:var(--card);border:2px solid var(--ink);border-radius:14px;
padding:.7rem 1rem;margin:0 0 1rem;font-size:.95rem;box-shadow:0 3px 0 var(--shadow-dark)}
.plantotal b{color:var(--ant-dark)}
.planbanner{background:var(--marigold-a);border:2px solid var(--gold);border-radius:.8rem;
padding:.7rem 1rem;margin:0 0 1rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.planbanner button{border:2px solid var(--ink);background:var(--ant);color:#fff;
border-radius:.5rem;padding:.3rem .8rem;font:inherit;font-weight:700;cursor:pointer}
.planmapwrap{background:#fff;border:1px solid var(--soft);border-radius:.8rem;padding:.4rem;
overflow-x:auto;margin-bottom:1rem}
.planmap{display:block;min-width:22rem}
.planempty{background:var(--soft);border-radius:.8rem;padding:1.2rem;text-align:center;
color:var(--ink-soft)}
.plansteps{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:0}
.planstop{display:flex;gap:.7rem;background:#fff;border:1px solid var(--soft);
border-radius:.9rem;padding:.7rem .9rem;align-items:flex-start}
.plannum{flex:0 0 auto;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--ant);
color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;
font-size:.95rem}
.planbody{flex:1;min-width:0}
.planbody h3{margin:0;font-size:1.02rem;line-height:1.35}
.planbody h3 a{text-decoration:none} .planbody h3 a:hover{text-decoration:underline}
.plancat{font-size:.82rem;color:var(--ant-dark)}
.planaddr{margin:.15rem 0 0;font-size:.85rem;color:var(--gloss)}
.planchan{display:flex;flex-wrap:wrap;gap:.3rem;margin:.3rem 0 0}
.planchan a{font-size:.78rem;background:var(--soft);border-radius:.5rem;padding:.05rem .45rem;
text-decoration:none;color:var(--ant-dark)}
.planacts{flex:0 0 auto;display:flex;flex-direction:column;gap:.2rem;align-items:center}
.planacts button{border:1px solid var(--warm-border);background:#fff;border-radius:.4rem;
width:1.9rem;height:1.9rem;cursor:pointer;font-size:.95rem;line-height:1;padding:0}
.planacts button:hover{border-color:var(--ant)}
.planacts button:disabled{opacity:.3;cursor:default}
.planacts .plandel{color:var(--ant-dark)}
.planleg{display:flex;align-items:center;gap:.6rem;padding:.25rem 0 .25rem 2.55rem;
font-size:.82rem;color:var(--mute)}
.planleg::before{content:"";flex:0 0 2px;align-self:stretch;background:var(--dashed);
min-height:1rem}
.planvia{display:block;color:#1c5aa8;font-weight:600;margin-top:.1rem;font-size:.85rem}
.planvia a{color:#1c5aa8}
/* Two networks, two readings. The mode you picked is the emphatic one; the
   other stays legible, because the comparison is the useful part. */
.planmodes{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.8rem 0 .2rem}
.pmlabel{font-size:.9rem;color:var(--ant-dark);font-weight:600;margin-right:.2rem}
.pmbtn{font:inherit;font-size:.9rem;border:2px solid var(--ink);background:var(--card);
color:var(--ink);border-radius:.6rem;padding:.32rem .85rem;cursor:pointer;min-height:44px}
.pmbtn:hover{background:var(--row-hover)}
.pmbtn.on{background:var(--ink);color:var(--gold-light);border-color:var(--ink)}
.pleg,.pmode{display:inline-flex;align-items:center;gap:.3rem;margin-right:.7rem;
font-size:.88rem;white-space:nowrap}
.pleg.foot,.pmode.foot{color:var(--ant-dark);font-weight:600}
.pleg.ride,.pmode.ride{color:#1c5aa8;font-weight:600}
.pleg.none{color:var(--mute);font-weight:400}
body:not(.mode-ride) .pleg.ride,body:not(.mode-ride) .pmode.ride{font-weight:400;opacity:.72}
body.mode-ride .pleg.foot,body.mode-ride .pmode.foot{font-weight:400;opacity:.72}
.planleg.out{color:var(--mute);flex-wrap:wrap}
.planosm{font-size:.8rem;border:1px solid var(--ant);border-radius:.5rem;
padding:.05rem .45rem;text-decoration:none;color:var(--ant-dark);white-space:nowrap}
.planosm:hover{background:var(--ant);color:#fff}
.plandl{display:inline-block;margin-top:.2rem;font-size:.85rem}
.plandemo{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:1rem 0 1.3rem;
background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:.8rem 1rem;
box-shadow:0 3px 0 var(--shadow-dark)}
.plandemo img{flex:0 0 auto;width:200px;height:200px;border-radius:12px;
border:1px solid var(--warm-border);background:#FBF6EE}
.plandemo figcaption{flex:1 1 15rem;font-size:.9rem;color:var(--ink-soft);margin:0}
@media (max-width:34rem){.plandemo{justify-content:center;text-align:center}}
.evgap{background:var(--soft);border-radius:.8rem;padding:.7rem 1rem;margin:1rem 0}
.evgaplist{font-weight:600;color:var(--ant-dark)}
.evpartner{display:flex;align-items:center;gap:.5rem;margin:.8rem 0;flex-wrap:wrap}
.evpartnerbtn{display:inline-block;background:var(--ant);color:#fff;border-radius:.7rem;
padding:.4rem .9rem;text-decoration:none;font-weight:700}
.evpartnerbtn:hover{background:var(--ant-dark)}
.evtip{position:relative;cursor:help;color:var(--ant-dark);font-weight:700;
border:1px solid var(--ant);border-radius:50%;width:1.4rem;height:1.4rem;
display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}
.evtiptext{visibility:hidden;opacity:0;transition:opacity .15s;position:absolute;
z-index:9;left:50%;transform:translateX(-50%);bottom:130%;width:min(20rem,72vw);
background:#2A1E16;color:#fff;border-radius:.6rem;padding:.5rem .7rem;font-size:.8rem;
font-weight:400;line-height:1.45;text-align:left}
.evtip:hover .evtiptext,.evtip:focus .evtiptext{visibility:visible;opacity:1}
.whatson{background:#fff;border:2px solid var(--ant);border-radius:.9rem;
padding:.8rem 1rem;margin:1.1rem 0}
.whatson h2{margin:0 0 .4rem;font-size:1.05rem}
.whatson ul{margin:0;padding-left:1.1rem}
.whatson li{margin:.3rem 0}
.ssbody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:.3rem;z-index:1;min-height:0;overflow:hidden}
.sstube{width:2.6rem;height:4rem;border-radius:.3rem .3rem .9rem .9rem;
background:linear-gradient(180deg,#a8763a,#7d5122);position:relative;display:flex;
align-items:flex-end;justify-content:center;gap:.14rem;padding-bottom:.2rem;
box-shadow:inset 0 -6px 10px rgba(0,0,0,.25)}
.sstube .ssstick{width:.22rem;height:2.4rem;background:#f3e3c2;border-radius:1px;
transform-origin:bottom center}
.sstube.shaking{animation:shake .28s ease-in-out 3}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg)}
75%{transform:rotate(13deg)}}
.ssout{text-align:center}
.ssnum{display:block;font-size:1.5rem;font-weight:800;color:#7a5410;line-height:1.1}
.ssverdict{display:inline-block;font-size:.72rem;font-weight:700;border-radius:.5rem;
padding:.02rem .45rem;margin:.1rem 0}
.ssverdict.v-good{background:#2f7d4f;color:#fff}
.ssverdict.v-mid{background:#b98a2a;color:#fff}
.ssverdict.v-care{background:#a33; color:#fff}
.ssdoor{display:block;margin-top:.45rem;font-size:.84rem;line-height:1.5;
color:var(--ant-dark);text-decoration:none;border:1px dashed var(--dashed);
border-radius:.7rem;padding:.3rem .6rem;background:var(--card)}
.ssdoor:hover{border-style:solid;background:var(--row-hover)}
.sstext{margin:.2rem 0 0;font-size:.84rem;line-height:1.4}
.ssshake{border:none;background:#7a5410;color:#fff;border-radius:.6rem;padding:.28rem .8rem;
font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;z-index:1;margin-top:.2rem}
.ssshake:active{transform:scale(.95)}
.dayart{margin:.4rem 0 0;z-index:1}
.dayart img{width:100%;max-height:6rem;object-fit:cover;border-radius:.5rem;display:block}
.dayart figcaption{font-size:.62rem;color:#8a6a24;margin-top:.15rem;line-height:1.3}
@media (prefers-reduced-motion:reduce){.sstube.shaking{animation:none}}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem;margin:1rem 0}
.door{display:flex;flex-direction:column;gap:.2rem;background:#fff;border:2px solid var(--soft);
border-radius:.9rem;padding:.85rem 1rem;text-decoration:none;color:var(--ink);
transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.door:hover{transform:translateY(-2px);border-color:var(--ant);box-shadow:0 6px 16px rgba(42,30,22,.10)}
.door b{font-size:1.05rem}
.door span{font-size:.85rem;color:var(--mute);line-height:1.4}
.door.own{border-color:var(--ant);background:linear-gradient(160deg,#fff,#fff6f1)}
.lineqr{display:flex;gap:1rem;align-items:center;background:#fff;border:2px solid #06C755;
border-radius:.9rem;padding:.9rem 1rem;margin:1rem 0;flex-wrap:wrap}
.lineqr img{border-radius:.5rem;flex:0 0 auto}
.lineqr div{display:flex;flex-direction:column;gap:.15rem}
.lineqr b{font-size:1.05rem}
.lineqr span{font-size:.85rem;color:var(--mute)}
.door.line{border-color:#06C755}
.helpline{background:var(--soft);border-radius:.7rem;padding:.55rem .9rem;margin:.9rem 0;font-size:.9rem}
.helpline b{color:var(--ant-dark)}
.festplan{margin-top:.5rem;padding-top:.45rem;border-top:1px dashed var(--soft)}
.festmark{display:inline-block;background:var(--ant);color:#fff;border-radius:.5rem;
font-size:.76rem;font-weight:700;padding:.1rem .5rem;margin:0 .3rem .3rem 0}
.festplannote{display:block;font-size:.8rem;color:var(--mute)}
table.sortable{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.92rem}
table.sortable th,table.sortable td{padding:.35rem .6rem;text-align:right;
border-bottom:1px solid var(--soft)}
table.sortable th:first-child,table.sortable td:first-child{text-align:left}
table.sortable thead th{background:var(--soft);color:var(--ant-dark);cursor:pointer;
user-select:none}
table.sortable thead th:hover{background:#dfcfae}
table.sortable thead th.sorted::after{content:" ▾"}
table.sortable thead th.sorted.asc::after{content:" ▴"}
.reqform label{display:block;margin:.7rem 0 .2rem;font-weight:600;color:var(--ant-dark)}
.reqform input,.reqform select,.reqform textarea{font:inherit;font-size:.95rem;padding:.35rem .6rem;
border:1.5px solid var(--soft);border-radius:.5rem;background:#fff;color:var(--ink);
width:100%;max-width:28rem;box-sizing:border-box}
.reqform textarea{min-height:6rem}
.reqform button{margin-top:.9rem;font:inherit;border:2px solid var(--ant);background:var(--ant);
color:#fff;border-radius:.5rem;padding:.4rem 1.2rem;cursor:pointer}
.reqform button:hover{background:var(--ant-dark)}
@media(max-width:600px){body{font-size:18px} ul.dir,ul.cats{column-width:auto}}
.claimstep{margin-top:1rem}
.claimpick{list-style:none;padding:0;margin:.4rem 0;max-height:16rem;overflow-y:auto}
.claimpick li{margin:0}
.claimpick button{display:block;width:100%;text-align:left;font:inherit;font-size:.95rem;
background:none;border:1px solid var(--soft);border-radius:.5rem;padding:.45rem .7rem;
margin:.25rem 0;cursor:pointer;color:var(--ink)}
.claimpick button:hover{border-color:var(--ant);background:var(--soft)}
.claimwho{background:#fff;border:1px solid var(--soft);border-radius:.7rem;padding:.7rem 1rem;margin:.6rem 0}
.claimwho b{color:var(--ant-dark)}
.claimagain{background:none;border:none;color:var(--link);text-decoration:underline;
cursor:pointer;font:inherit;font-size:.85rem;padding:0;margin-top:.3rem}
.claimcard{border:1px solid var(--soft);border-radius:.9rem;padding:1.1rem 1.2rem;
margin-top:1rem;background:#fff}
.claimcard .url-text{font:.85rem ui-monospace,monospace;word-break:break-all;
background:var(--soft);border-radius:.4rem;padding:.4rem .6rem;margin:.5rem 0}

/* ===================== homepage & shared chrome ======================= */
/* Shadows here are hard offsets with no blur. That is deliberate: it reads as
   printed paper with a second colour slightly out of register, which is what
   the whole site is pretending to be. */

/* Icons take their colour from the row they sit in, so one hover rule tints
   the label and its icon together. */
/* A class that sets `display` outranks the UA's [hidden] rule, so a widget
   that hides panes by setting .hidden was drawing all of them at once — the
   weather tile was rendering eight stacked forecasts. One rule, once. */
[hidden]{display:none !important}

.rowicon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
stroke-linejoin:round;flex:0 0 auto}

/* Present for a screen reader, absent for everyone else. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--ant);outline-offset:3px;border-radius:6px}
.skiplink{position:absolute;left:-9999px;top:.5rem;background:var(--ink);color:#fdf3dd;
padding:.7rem 1.1rem;border-radius:8px;font-weight:600;z-index:50;text-decoration:none}
.skiplink:focus{left:1rem}

/* --- masthead ---------------------------------------------------------- */
body.home main{max-width:1280px}
header.site{border-bottom:0;padding:.9rem 0 0;margin-bottom:0;
/* Morning light on the masthead: a gold pool from the upper right, a faint
   answering blush of ant-red low on the left. The same warmth the heroglow
   already casts, arriving one screen earlier. */
background:
 radial-gradient(640px 340px at 88% -30%,rgba(243,195,75,.22),transparent 70%),
 radial-gradient(560px 320px at -6% 130%,rgba(193,58,46,.09),transparent 70%)}
.masthead{align-items:center;gap:1.1rem}
.logo{display:flex;align-items:center;gap:.7rem;font-size:1.9rem;line-height:1}
.logo:hover{text-decoration:none}
.logomark{width:62px;height:62px;border-radius:16px;background:var(--ant);
border:2px solid var(--ant-dark);box-shadow:0 0 0 2px var(--gold-light) inset;
display:grid;place-items:center;flex:0 0 auto;font-size:32px;line-height:1}
.logo:hover .logomark{transform:rotate(-6deg)}
.logotext{display:flex;flex-direction:column;line-height:1.05;gap:.15rem}
.logoth{font-weight:800;letter-spacing:-.01em;font-size:2rem}
.logorom{font-size:.8rem;color:var(--mute);letter-spacing:.18em;font-weight:600}

form.seek{gap:0;margin:.9rem 0 .2rem;border:2px solid var(--ink);border-radius:14px;
overflow:hidden;background:#fff;min-height:60px;box-shadow:0 2px 0 var(--shadow);max-width:none;
transition:box-shadow .25s ease,border-color .25s ease}
/* The bar answers the touch: a gold ring blooms the moment the field wakes. */
form.seek:focus-within{border-color:var(--ant);
box-shadow:0 2px 0 var(--shadow),0 0 0 4px rgba(243,195,75,.4)}
form.seek input{flex:1;max-width:none;border:0;border-radius:0;background:transparent;
padding:0 1.1rem;font-size:1.02rem;min-width:0}
form.seek input:focus{outline:0}
form.seek button{border:0;border-radius:0;background:var(--ant);color:#fff;font-weight:600;
padding:0 1.4rem;display:flex;align-items:center;gap:.5rem;font-size:1.02rem;
transition:background .2s ease}
form.seek button:hover{background:var(--ant-dark)}

/* Seven things people actually came to do get a real target; everything else
   stays reachable on the quiet row underneath. The pills sit on glass —
   the masthead's glow reads through them — and answer the hand: lift on
   approach, a soft squish on press. */
.chipbar{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 .2rem}
.chip{display:flex;align-items:center;gap:.55rem;min-height:50px;padding:.35rem .95rem;
border:1.5px solid var(--warm-border);border-radius:999px;
background:rgba(255,253,247,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
color:var(--ink);font-weight:600;font-size:.93rem;text-decoration:none;
transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.chip:visited{color:var(--ink)}
.chip .rowicon{color:var(--ant)}
.chip:hover{border-color:var(--ant);background:var(--row-hover);text-decoration:none;
box-shadow:0 4px 12px rgba(42,30,22,.12)}
.chip .en{font-weight:400;color:var(--gloss)}
.chip.dark{background:var(--ink);border-color:var(--ink);color:#fdf3dd}
.chip.dark:visited{color:#fdf3dd}
.chip.dark .rowicon{color:var(--gold-light)}
.chip.dark .en{color:#e8dcc4}
.chip.dark:hover{background:var(--ant);border-color:var(--ant)}
@media (prefers-reduced-motion:no-preference){
.chip{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,
transform .18s cubic-bezier(.34,1.56,.64,1)}
.chip:hover{transform:translateY(-2px)}
.chip:active{transform:translateY(0) scale(.96)}
form.seek button:active{transform:scale(.97)}
.langbtn:active{transform:scale(.94)}
}
/* The quiet row: family it belongs to, not the front door. Warm ink instead
   of hyperlink blue, bare until the hand arrives — thirteen doors reachable
   without thirteen shouts. */
.svcbar{font-size:.84rem;margin:.55rem 0 0;color:var(--mute);line-height:1.9}
.svcbar a{color:var(--ant-dark);text-decoration:none}
.svcbar a:visited{color:var(--ant-dark)}
.svcbar a:hover{color:var(--ant);text-decoration:underline;
text-decoration-thickness:2px;text-decoration-color:var(--gold)}

/* A band of temple-eave beads, purely decorative. */
.beadrule{height:10px;margin-top:.9rem;
background-image:radial-gradient(circle at 9px 10px,var(--gold) 0 3.5px,transparent 3.6px);
background-size:18px 10px;background-color:var(--ink)}
.taglineband{background:var(--ink);color:#f2e6d0;padding:.85rem 1.15rem;font-size:.98rem}
.taglineband .en{color:var(--on-dark-mute)}
.goldrule{height:6px;background:linear-gradient(90deg,var(--gold),var(--gold-light) 40%,var(--gold))}

/* --- the two-column home ---------------------------------------------- */
/* Three areas, not two columns: the day's card is separable so it can move
   above the directory when everything stacks. Desktop keeps it at the top of
   the right-hand column, exactly where the sidebar would have put it. */
.homegrid{display:grid;grid-template-columns:minmax(0,1fr) 350px;
grid-template-areas:"main today" "main side";column-gap:2rem;row-gap:1.3rem;
align-items:start;margin-top:1.6rem}
.sidetop{grid-area:today;min-width:0}
.homemain{grid-area:main;display:flex;flex-direction:column;gap:1.7rem;min-width:0}
.homeside{grid-area:side;display:flex;flex-direction:column;gap:1.3rem;min-width:0}

.card{background:var(--card);border:2px solid var(--ink);border-radius:18px;
overflow:hidden;box-shadow:0 3px 0 var(--shadow)}
.cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
padding:1rem 1.25rem;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.cardhead h2{margin:0;border:0;padding:0;font-size:1.6rem;line-height:1.15}
.cardhead h2 .en{font-size:1.15rem;color:var(--marigold-ink)}
.cardhead .pill{font-weight:600;font-size:.9rem;background:var(--ink);
padding:.2rem .8rem;border-radius:999px;white-space:nowrap}
.card.cm .cardhead{background:linear-gradient(var(--marigold-a),var(--marigold-b))}
.card.cm .cardhead .pill{color:var(--marigold-b)}
.card.cr .cardhead{background:linear-gradient(var(--jade-a),var(--jade-b))}
.card.cr .cardhead h2 .en{color:var(--jade-ink)}
.card.cr .cardhead .pill{color:var(--jade-b)}

ul.catrows{list-style:none;margin:0;padding:.6rem;display:grid;
grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:2px}
ul.catrows li{margin:0}
.catrow{display:flex;align-items:center;gap:.85rem;padding:.7rem .85rem;border-radius:12px;
min-height:60px;color:var(--ink);text-decoration:none}
.catrow:visited{color:var(--ink)}
.catrow:hover{background:var(--row-hover);text-decoration:none}
.catrow .rowicon{color:var(--mute)}
.catrow:hover .rowicon{color:var(--ant)}
/* A flex column, not display:block on the children — flex blockifies its items
   whatever their display is, so the language toggle can still hide one with
   display:none without a specificity fight (and without !important). */
.catrow .lbl{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.catrow .lbl b{font-weight:600;font-size:1rem;color:var(--link)}
.catrow .lbl .en{font-size:.82rem;color:var(--gloss);font-weight:400}
.catrow .n{font-variant-numeric:tabular-nums;color:var(--mute);font-size:.86rem}
.catrow.soon{cursor:default}
.catrow.soon .lbl b{color:var(--mute)}
@media (prefers-reduced-motion:no-preference){
.catrow,.sidelink{transition:background .12s ease}}

.cardfoot{padding:.8rem 1.25rem 1rem;border-top:1px solid var(--soft);
display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;font-size:.88rem;color:var(--gloss)}
.soonchip{font-size:.85rem;padding:.3rem .8rem;border:1px dashed var(--dashed);
border-radius:999px;color:var(--gloss);display:inline-flex;align-items:center;gap:.4rem}
.soonchip .rowicon{color:var(--mute)}

/* --- today's picks ----------------------------------------------------- */
.pickgrid{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.pickgrid a{display:flex;flex-direction:column;gap:.5rem;color:var(--ink);text-decoration:none}
.pickgrid a:hover{text-decoration:none}
.pickgrid img{width:100%;height:124px;object-fit:cover;border-radius:14px;
border:1px solid var(--warm-border);background:var(--card-alt);display:block}
.pickgrid .nm{font-weight:600;font-size:.98rem;color:var(--link);line-height:1.3}
.pickgrid .sub{font-size:.82rem;color:var(--gloss)}
.pickgrid a:hover .nm{text-decoration:underline;text-decoration-color:var(--ant)}

/* --- sidebar ----------------------------------------------------------- */
.sidecard{background:var(--card);border:2px solid var(--ink);border-radius:18px;
overflow:hidden;box-shadow:0 3px 0 var(--shadow)}
.sidecard>h2,.sidecard>h3{margin:0;padding:.75rem 1rem;border-bottom:2px solid var(--ink);
font-size:1.1rem;display:flex;align-items:center;gap:.55rem;border-radius:0}
.sidecard>h2 .en,.sidecard>h3 .en{font-size:.92rem;color:var(--gloss);font-weight:400}
.sidecard .body{padding:.9rem 1rem}
.sidecard.dark{background:var(--ink);color:var(--on-dark);box-shadow:0 3px 0 var(--shadow-dark)}
.sidecard.dark>h2,.sidecard.dark>h3{border-bottom-color:#453a2d}
.sidecard.dark>h2 .rowicon,.sidecard.dark>h3 .rowicon{color:var(--gold-light)}
.sidecard.dark>h2 .en,.sidecard.dark>h3 .en{color:var(--on-dark-mute)}
.sidecard.dark a{color:var(--gold-light)}
.sidecard.gold>h2,.sidecard.gold>h3{background:linear-gradient(var(--marigold-a),var(--marigold-b))}
.sidecard.gold>h2 .rowicon,.sidecard.gold>h3 .rowicon{color:var(--ant-dark)}
.sidecard.gold>h2 .en,.sidecard.gold>h3 .en{color:var(--marigold-ink)}
.sidelink{display:flex;flex-direction:column;gap:.1rem;align-items:flex-start;
padding:.65rem .8rem;border-radius:12px;color:var(--ink);text-decoration:none}
.sidelink:visited{color:var(--ink)}
.sidelink:hover{background:var(--row-hover);text-decoration:none}
.sidelink b{font-weight:600;color:var(--link);font-size:1rem}
.sidelink .en{font-size:.85rem;color:var(--gloss)}
.whenpill{display:inline-block;margin-top:.3rem;font-size:.8rem;background:#f3ecdc;
padding:.15rem .6rem;border-radius:999px;color:var(--ink-soft)}
/* The sidebar borrows the fortune tile whole — same markup, same data-fo hooks,
   so it still tells the right day tomorrow without a rebuild — and only changes
   its clothes: no square crop, no card of its own, gold on ink. */
.sidecard.dark .wtile{aspect-ratio:auto;background:none;border:0;border-radius:0;
box-shadow:none;overflow:visible;padding:0;color:var(--on-dark)}
.sidecard.dark .wtile:hover{transform:none;box-shadow:none}
.sidecard.dark .wtile::after{display:none}
.sidecard.dark .wtile h3{color:var(--gold-light);border-left:0;padding:.75rem 1rem;
margin:0 0 .2rem;font-size:1.1rem;border-bottom:1px solid #453a2d}
.sidecard.dark .wtile>:not(h3):not(.yantra){padding-left:1rem;padding-right:1rem}
.sidecard.dark .wtile>:last-child{padding-bottom:.9rem}
.sidecard.dark .yantra{color:var(--gold);opacity:.16}
.sidecard.dark .foluckylabel,.sidecard.dark .wfoot,.sidecard.dark .foplanet{color:var(--on-dark-mute)}
.sidecard.dark .fonums{color:var(--gold-light)}
.sidecard.dark .folucky{margin-top:.5rem}
.sidecard.dark .fobuddha,.sidecard.dark .foday{color:var(--on-dark)}

.sponsorcard{border:2px dashed var(--dashed);border-radius:18px;padding:.9rem 1rem;
background:var(--card-alt)}
.sponsorcard .adlabel{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--mute);display:block;margin-bottom:.4rem}

/* --- everything below the fold keeps its old shape, new colours -------- */
.morehome{margin-top:2.2rem}
.morehome>h2:first-child{margin-top:0}

/* --- narrow screens ---------------------------------------------------- */
/* The handouts send people here from a LINE QR, so the phone is the common
   case, not the exception. Nothing shrinks below a comfortable target. */
@media (max-width:900px){
/* Day first, then the directory, then the rest of the almanac. */
.homegrid{grid-template-columns:minmax(0,1fr);
grid-template-areas:"today" "main" "side";row-gap:1.4rem}
body.home main{max-width:100%}
}
@media (max-width:600px){
.logomark{width:50px;height:50px;font-size:26px;border-radius:13px}
.logoth{font-size:1.6rem}
.masthead{gap:.7rem}
/* The hero eyebrow says the same thing two swipes better; on a phone the
   tagline's row is worth more than its words. */
.tagline{display:none}
.langgroup{margin-left:auto}
.langbtn{padding:.35rem .55rem;font-size:.85rem}
/* One row, not three: the field keeps the line and the button folds to its
   magnifier. Stacked full-width, search alone was two thumbs of chrome. */
form.seek{min-height:54px}
form.seek input{min-height:54px;padding:0 .9rem}
form.seek button{padding:0 1.1rem}
form.seek button .bi{display:none}
/* Two abreast instead of seven stacked — the whole rack in four rows, the
   flagship keeping a full row of its own. This is the difference between a
   phone arriving on the directory and a phone arriving on furniture. */
.chipbar{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.chip{min-height:52px;padding:.4rem .75rem;font-size:.88rem;border-radius:16px;
justify-content:flex-start}
.chip.dark{grid-column:1/-1;border-radius:999px}
/* Thai above, English beneath — two even lines instead of a mid-phrase wrap
   with its separator stranded. Same move the hero title makes. */
.chip .bi .en{display:block;font-size:.78rem;line-height:1.25}
.chip .bi .en>.th{display:none}
/* The secondary links ran to seven stacked lines on a phone, pushing the
   directory itself below two screens of chrome — and a phone is how most
   people arrive, straight off a QR code. One swipeable row instead, the same
   way the highlights already scroll. */
.svcbar{display:flex;align-items:center;gap:.5rem;overflow-x:auto;white-space:nowrap;
padding-bottom:.35rem;line-height:1.5;-webkit-overflow-scrolling:touch;
scrollbar-width:none}
.svcbar::-webkit-scrollbar{display:none}
.svcbar a{flex:0 0 auto;padding:.2rem 0}
/* Interior pages: the same chips, one swipeable row — the svcbar's own move.
   Someone tapping a shared LINE link lands a thumb-flick from the place name
   instead of a screen and a half below it. The hub pages (home, my.html)
   keep the full two-abreast rack above. */
.site.slim .chipbar{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.45rem;
margin:.55rem 0 .1rem;padding-bottom:.3rem;-webkit-overflow-scrolling:touch;
scrollbar-width:none}
.site.slim .chipbar::-webkit-scrollbar{display:none}
.site.slim .chip{flex:0 0 auto;min-height:42px;padding:.25rem .75rem;font-size:.82rem}
.site.slim .chip.dark{border-radius:999px}
/* Matched on body.lang-* like the herotitle rules, so Thai-only mode keeps
   its right to hide English entirely. The nested .th is the " · " separator,
   hidden for the two-line chips above but needed again on one line. */
body.lang-both .site.slim .chip .bi .en,
body.lang-en .site.slim .chip .bi .en{display:inline;font-size:.78rem}
body.lang-both .site.slim .chip .bi .en>.th{display:inline}
.site.slim .tagline{display:none}
ul.catrows{grid-template-columns:minmax(0,1fr);padding:.4rem}
.soiindex li{padding:.5rem .1rem}
.soikids{display:block;margin-left:0}
.cardhead{padding:.85rem 1rem}
.cardhead h2{font-size:1.35rem}
.pickgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
.pickgrid img{height:104px}
}

/* ======================================================================
   THE DESIGN LAYER — ported from the Claude Design study Nan picked out.
   Kept as one block at the end so it overrides by order rather than by a
   specificity war, and so the whole look can be read (or lifted out) in
   one piece. Nothing here removes a module; it only changes their clothes.
   ====================================================================== */

/* --- type ----------------------------------------------------------------
   Three faces, all SIL Open Font Licence, all served from our own domain:
   the site promises it follows no one around, and a font from someone else's
   CDN is a request that reader never asked to make. Licences sit beside the
   files in assets/fonts/. 132 KB for the lot, split by unicode-range so a
   Thai reader never downloads the Latin cut.
   Chonburi is a display face and stays one — headings, never running text.
   Nothing below 1rem wears it. */
@font-face{font-family:'Chonburi';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/chonburi-400-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Chonburi';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/chonburi-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Chonburi';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/chonburi-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prompt-400-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prompt-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prompt-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/prompt-600-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/prompt-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/prompt-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sriracha';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sriracha-400-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Sriracha';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sriracha-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sriracha';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sriracha-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

body{font-family:'Prompt',-apple-system,"Thonburi","Sarabun","Noto Sans Thai",sans-serif}
h1,h2,h3,.logoth,.cardhead h2,.herotitle,.sectiontitle{
font-family:'Chonburi','Prompt',-apple-system,"Thonburi",serif;font-weight:400;
letter-spacing:.01em;line-height:1.35}
/* Chonburi has one weight and no bold. Anything that used to lean on <b> for
   emphasis inside a heading would silently flatten, so those keep Prompt. */
h1 b,h2 b,h3 b,h1 .en,h2 .en,h3 .en{font-family:'Prompt',sans-serif}
.hand{font-family:'Sriracha',cursive;font-weight:400}
::selection{background:var(--gold-light);color:var(--ink)}

/* --- the ribbon ----------------------------------------------------------
   A woven awning stripe. It opens the page, divides the big movements and
   closes the footer, which is most of what makes the whole thing read as one
   object rather than a stack of cards. --gap is whatever it is lying on. */
.ribbon{height:8px;--gap:var(--paper);
background:repeating-linear-gradient(90deg,var(--ant) 0 44px,var(--gap) 44px 52px,
var(--gold) 52px 60px,var(--gap) 60px 68px)}
.ribbon.tall{height:12px}
.ribbon.ondark{--gap:var(--ink)}
.ribbon.onnight{--gap:var(--night-c)}

/* --- the sticker system --------------------------------------------------
   A hard offset shadow instead of a soft blur, and on hover the thing steps
   towards you while its shadow grows: the squishy, pressable feel Nan wants
   on everything. Held to cards you can actually click. */
.card,.sidecard,.sponsorcard,.planhero{box-shadow:5px 5px 0 var(--shadow)}
.sidecard.dark{box-shadow:5px 5px 0 var(--shadow-dark)}
.hicard,.wtile,.moodcard,.pickgrid a,.chip,.citychip{
box-shadow:4px 4px 0 var(--shadow)}
@media (prefers-reduced-motion:no-preference){
.hicard,.wtile,.moodcard,.pickgrid a,.chip,.citychip{
transition:transform .15s ease,box-shadow .15s ease}
.hicard:hover,.wtile:hover,.moodcard:hover,.pickgrid a:hover,.chip:hover,.citychip:hover{
transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--gold-light)}
.hicard:active,.moodcard:active,.chip:active,.citychip:active{
transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shadow)}
}
.chip.dark:hover,.wtile:hover{box-shadow:7px 7px 0 var(--gold)}
form.seek{box-shadow:6px 6px 0 var(--gold-light)}
form.seek:focus-within{box-shadow:6px 6px 0 var(--ant)}

/* Glass belongs where there is something behind it to blur — over a
   photograph, not over flat paper, where it would cost a repaint and show
   nothing. So: labels sitting on images, and nowhere else. */
.glass{background:rgba(255,253,247,.72);backdrop-filter:blur(10px) saturate(1.4);
-webkit-backdrop-filter:blur(10px) saturate(1.4)}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
gap:2.4rem;align-items:center;margin:.4rem 0 2.2rem}
.heroglow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.heroglow.a{top:-90px;right:-140px;width:440px;height:440px;
background:radial-gradient(circle,rgba(243,195,75,.42),rgba(243,195,75,0) 68%)}
.heroglow.b{bottom:-120px;left:-160px;width:460px;height:460px;
background:radial-gradient(circle,rgba(193,58,46,.14),rgba(193,58,46,0) 70%)}
.herocopy{position:relative;z-index:1;min-width:0}
.heroeyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold);
font-size:1rem;margin-bottom:.5rem}
.heroeyebrow::before{content:"";width:8px;height:8px;border-radius:50%;
background:var(--ant);flex:0 0 auto}
.herotitle{font-size:clamp(1.8rem,4vw,2.8rem);margin:0 0 .5rem;line-height:1.25}
.herotitle .accent{color:var(--ant)}
/* The English gloss cannot ride at display size. Set at the same weight as the
   Thai it follows, a two-language headline ran to four lines and pushed the
   whole page down. It gets its own line, at half the size, in the body face —
   which is also how it reads as a gloss rather than as a second headline.
   Matched on body.lang-* so it beats the `body.lang-both .en{display:inline}`
   rule that governs every other gloss on the site. */
body.lang-both .herotitle .en,body.lang-en .herotitle .en{
display:block;font-family:'Prompt',sans-serif;font-size:.42em;font-weight:400;
line-height:1.4;color:var(--gloss);margin-top:.1em}
body.lang-both .herotitle .accent .en,body.lang-en .herotitle .accent .en{
color:var(--ant-dark)}
/* The " · " that joins the pair is a Thai-marked span; on its own line it is
   just a stray dot. */
body.lang-both .herotitle .en>.th,body.lang-en .herotitle .en>.th{display:none}
.herosub{color:var(--gloss);margin:0 0 1.1rem;font-size:1.02rem}
.heroart{position:relative;height:min(62vw,430px);z-index:1;min-width:0}
.heroart img{position:absolute;object-fit:cover;border:3px solid var(--card);
border-radius:18px;background:var(--card-alt);display:block}
.heroart .a{top:0;right:0;width:78%;height:76%;transform:rotate(2deg);
box-shadow:0 18px 44px rgba(42,30,22,.22)}
.heroart .b{bottom:0;left:0;width:52%;height:44%;
box-shadow:0 14px 34px rgba(42,30,22,.25)}
.heroart .c{bottom:14%;right:2%;width:31%;height:32%;transform:rotate(4deg);
box-shadow:0 10px 26px rgba(42,30,22,.22)}
.herosticker{position:absolute;top:-14px;left:22px;z-index:2;
background:var(--gold-light);color:var(--ink);font-family:'Sriracha',cursive;
font-size:.95rem;padding:.45rem 1.1rem;border-radius:999px;transform:rotate(-5deg);
box-shadow:0 4px 12px rgba(42,30,22,.18)}
@media (prefers-reduced-motion:no-preference){
.heroart .b{animation:mdfloat 7s ease-in-out infinite}
@keyframes mdfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}
@media (max-width:900px){.heroart{height:min(78vw,360px)}}

/* --- mood cards ---------------------------------------------------------- */
.moodgrid{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:1rem}
.moodcard{display:block;border:2px solid var(--ink);border-radius:18px;
overflow:hidden;background:var(--card);text-decoration:none;color:var(--ink)}
.moodcard:visited{color:var(--ink)}
.moodcard:hover{text-decoration:none}
.moodcard img{width:100%;height:118px;object-fit:cover;display:block;
background:var(--card-alt)}
.moodcard .lbl{padding:.6rem .8rem .75rem}
.moodcard .lbl b{display:block;font-weight:600;font-size:1.02rem;line-height:1.3}
.moodcard .lbl .en{font-size:.78rem;color:var(--mute);letter-spacing:.11em;
text-transform:uppercase;font-weight:600}
.moodcard .n{font-variant-numeric:tabular-nums;color:var(--gloss);font-size:.84rem}

/* --- after dark ----------------------------------------------------------
   The one section that leaves the daytime palette. Everything else on this
   site is paper and lacquer; the night is neon, because that is what the
   night actually looks like here. */
.afterdark{position:relative;overflow:hidden;margin:2.4rem 0 0;border-radius:22px;
border:2px solid var(--ink);
background:radial-gradient(900px 420px at 50% -80px,var(--night-a) 0%,
var(--night-b) 55%,var(--night-c) 100%);color:var(--night-mute)}
.afterdark .inner{position:relative;z-index:1;padding:2.6rem 1.4rem 2.2rem}
.afterdark .adglow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.afterdark .adglow.a{top:20px;left:-140px;width:420px;height:420px;
background:radial-gradient(circle,rgba(255,110,199,.20),rgba(255,110,199,0) 70%)}
.afterdark .adglow.b{bottom:-90px;right:-110px;width:400px;height:400px;
background:radial-gradient(circle,rgba(255,210,74,.15),rgba(255,210,74,0) 70%)}
.afterdark .adeyebrow{font-family:'Sriracha',cursive;color:var(--neon-gold);
font-size:1.05rem;margin-bottom:.4rem;text-shadow:0 0 16px rgba(255,210,74,.6)}
.afterdark h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:0;border:0;padding:0;
color:var(--neon);text-shadow:0 0 18px rgba(255,110,199,.9),0 0 60px rgba(255,110,199,.5)}
.afterdark h2 .en{color:var(--night-mute);text-shadow:none;font-size:.95rem;
letter-spacing:.24em;text-transform:uppercase}
.afterdark .adhead{text-align:center;margin-bottom:1.8rem}
.adgrid{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.adcard{position:relative;display:block;border-radius:18px;overflow:hidden;
border:1.5px solid rgba(255,110,199,.45);text-decoration:none}
.adcard img{width:100%;height:250px;object-fit:cover;display:block;filter:saturate(1.15)}
.adcard .cap{position:absolute;inset:0;display:flex;flex-direction:column;
justify-content:flex-end;padding:1.1rem;
background:linear-gradient(180deg,rgba(22,10,36,0) 40%,rgba(22,10,36,.93) 100%)}
.adcard .cap b{font-family:'Chonburi',serif;font-weight:400;font-size:1.3rem;
color:#fffdf7;text-shadow:0 0 14px rgba(255,110,199,.5)}
.adcard .cap .en,.adcard .cap span{color:var(--night-mute);font-size:.9rem}
.adcard .n{color:var(--neon-gold);font-size:.85rem;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
.adcard{transition:box-shadow .2s ease,transform .15s ease}
.adcard:hover{box-shadow:0 0 34px rgba(255,110,199,.45);transform:translateY(-3px)}
.afterdark h2{animation:mdglow 3.2s ease-in-out infinite}
@keyframes mdglow{0%,100%{text-shadow:0 0 18px rgba(255,110,199,.9),0 0 60px rgba(255,110,199,.5)}
50%{text-shadow:0 0 28px rgba(255,110,199,1),0 0 90px rgba(255,110,199,.7)}}
}
.adbtn{display:inline-block;margin-top:1.8rem;color:var(--neon-gold);
border:2px solid var(--neon-gold);border-radius:999px;padding:.75rem 2rem;
font-weight:600;text-decoration:none;
box-shadow:0 0 22px rgba(255,210,74,.25) inset,0 0 18px rgba(255,210,74,.2)}
.adbtn:visited{color:var(--neon-gold)}
.adbtn:hover{background:rgba(255,210,74,.14);text-decoration:none}

/* --- the gold band -------------------------------------------------------
   The claim door, said loudly and once. The gemba walk found eight ways in
   and no reason to walk through any of them; this is the reason, in the one
   place a shop owner scrolling past cannot miss it. */
.goldband{background:var(--gold-light);border:2px solid var(--ink);
border-radius:20px;margin:2.4rem 0 0;padding:1.6rem 1.4rem;display:flex;
align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
box-shadow:5px 5px 0 var(--gold)}
.goldband h2{margin:0 0 .3rem;border:0;padding:0;font-size:1.55rem}
.goldband p{margin:0;color:#6b5322;font-size:1rem}
.goldbandcta{flex:0 0 auto;background:var(--ink);color:var(--gold-light);
padding:.9rem 2rem;border-radius:999px;font-weight:600;text-decoration:none;
box-shadow:0 3px 0 #160f0a}
.goldbandcta:visited{color:var(--gold-light)}
.goldbandcta:hover{background:var(--ant);color:var(--paper);text-decoration:none}

/* --- the sky tiles: photographs of real instruments --------------------- */
.skyshot{display:block;line-height:0;border-radius:12px;overflow:hidden}
.skyshot img{width:100%;height:100%;object-fit:contain;display:block;
background:transparent}
.wtile.sky{background:var(--ink);color:var(--on-dark)}
.wtile.sky h3{color:var(--gold-light)}
.wtile.sky .skycap{color:var(--on-dark-mute);font-size:.85rem}
.shotdate{color:var(--on-dark-mute);font-variant-numeric:tabular-nums;font-size:.78rem}
@media (prefers-reduced-motion:no-preference){
.skyshot img{transition:transform .3s ease}
.skyshot:hover img{transform:scale(1.03)}}
/* Cast your own — the day's hexagram is everybody's; a real casting is not. */
.castown{display:inline-block;margin:.4rem 0 0;font-weight:600;font-size:.9rem;
border:1.5px solid var(--gold);border-radius:999px;padding:.25rem .8rem;
color:var(--ant-dark);text-decoration:none;background:var(--card)}
.castown:visited{color:var(--ant-dark)}
.castown:hover{background:var(--gold-light);text-decoration:none}

/* --- where there is no photograph --------------------------------------
   The site holds 11,000 places and 145 photographs, so most cards have no
   picture — and filling every one of them with the same wat drawing put
   twenty identical temples on the front page and told the reader nothing
   about twenty different places. The placeholder still earns its keep on a
   place's OWN page, where it holds the frame beside "send us a photo". In a
   grid it is replaced by this: the shelf's own glyph on a tinted panel,
   which does not pretend to be a picture of anything. */
.nopic{display:flex;align-items:center;justify-content:center;
width:100%;height:124px;border-radius:14px;font-size:1.5rem;
background:linear-gradient(160deg,var(--card-alt),var(--row-hover));
border:1px dashed var(--dashed);color:var(--mute);flex:0 0 auto}
.nopic .rowicon{color:var(--mute);opacity:.7}
/* A card with nothing to show gives its whole height to its words instead of
   reserving a frame for a picture that does not exist. */
.hicard.textonly{background:linear-gradient(160deg,var(--card),var(--card-alt));
border-top:4px solid var(--gold-light)}
.hicard.textonly .cap{padding-top:.9rem}
.evslide.textonly{display:flex;align-items:flex-end;
background:linear-gradient(160deg,var(--card-alt),var(--row-hover))}
.evslide.textonly .evslidecap{position:static;background:none;color:var(--ink);
width:100%;text-shadow:none}
.evslide.textonly .evslidewhen,.evslide.textonly .evslidewhere{color:var(--gloss)}
/* The one place a placeholder helps: quieter than it was, and no longer the
   loudest thing on a page whose whole ask is "send us a photograph". */
.placeholderpic{opacity:.55;filter:saturate(.55)}
.placeholderpic:hover{opacity:.8;filter:none}

/* --- sections, credits, and the note that points at them ---------------- */
.moodsec{margin:2.4rem 0 0}
.sectiontitle{font-size:clamp(1.5rem,3vw,2.1rem);border:0;padding:0;margin:0 0 1rem}
.picturenote{margin:2rem 0 0;font-size:.9rem;color:var(--gloss)}
table.credits{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem}
table.credits th{text-align:left;border-bottom:2px solid var(--ink);padding:.5rem .6rem}
table.credits td{border-bottom:1px solid var(--soft);padding:.55rem .6rem;
vertical-align:top}
.credshot{width:120px;height:80px;object-fit:cover;border-radius:9px;
border:1px solid var(--warm-border);display:block}
.credmeta{color:var(--mute);font-size:.84rem}
@media (max-width:600px){
.credshot{width:76px;height:54px}
table.credits{font-size:.84rem}
table.credits td,table.credits th{padding:.4rem .3rem}
/* The collage becomes one band on a phone. The pictures are worth keeping;
   two screens of them before the day's colour are not. The type comes down
   with it for the same reason — everything above the almanac is rent, and the
   person this page is really for opens it to see what colour the day is.
   (The route-planner promo above the grid is 1,600 px on this width and is
   the bigger cost by far. That is not this block's to fix.) */
.hero{gap:1.1rem;margin:.2rem 0 1.4rem}
.herotitle{font-size:1.55rem;margin-bottom:.35rem}
body.lang-both .herotitle .en,body.lang-en .herotitle .en{font-size:.5em}
.heroeyebrow{font-size:.86rem;margin-bottom:.3rem}
.herosub{font-size:.94rem;margin-bottom:.6rem}
.heroart{height:150px}
.heroart .b,.heroart .c{display:none}
.heroart .a{width:100%;height:100%;transform:none}
.herosticker{left:auto;right:10px;top:-12px}
.moodgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}
.moodcard img{height:96px}
.goldband{padding:1.2rem 1rem}
.afterdark .inner{padding:2rem 1rem 1.6rem}
.adcard img{height:200px}
}

/* --- motion -------------------------------------------------------------
   md.js reveals these on scroll. The rule is scoped to .js-reveal, a class
   md.js adds to <html> itself, so with scripting off or broken nothing is
   ever left invisible — the commonest way a reveal effect eats a page. */
@media (prefers-reduced-motion:no-preference){
.js-reveal [data-reveal]{opacity:0;transform:translateY(26px);
transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.js-reveal [data-reveal].shown{opacity:1;transform:none}
}