:root{
  --green:#31a768; --green-d:#1f7a49; --green-l:#e4f4ea;
  --pink:#fa97f1; --pink-d:#c85dbd; --yellow:#f7f43f;
  --red:#ef3e4a; --red-d:#c62f3a;
  --bg:#F8F6F0; --surface:#fff; --ink:#17281E; --muted:#63705F; --line:#E5E1D6;
  --dark:13,23,18;
  /* One typeface must own a whole line. Cantarell has no Thai/CJK glyphs, so
     with it first the browser mixed faces mid-sentence (Thai in Sarabun,
     Latin AND DIGITS in Cantarell) — visibly different sizes in one
     paragraph. Body text: Sarabun serves Thai + Latin with one set of
     metrics; Chinese pages put Noto Sans SC first for the same reason.
     Display faces below are swapped per page language too. */
  --display:'Chonburi','Josefin Sans','Cantarell','Noto Sans SC',Georgia,serif;
  --body:'Sarabun','Noto Sans SC',system-ui,sans-serif;
  --headH:88px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html[lang^="en"]{--display:'Cantarell','Josefin Sans','Chonburi','Noto Sans SC',Georgia,serif;--body:'Cantarell','Sarabun',system-ui,sans-serif}
html[lang^="zh"]{--display:'Noto Sans SC','Chonburi',Georgia,serif;--body:'Noto Sans SC','Sarabun',system-ui,sans-serif}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:88px}
.brand{display:flex;align-items:center;gap:13px;flex:none;text-decoration:none}
.brand img{height:64px;width:64px;display:block}
.brand .wm b{display:block;font-family:var(--display);font-weight:500;font-size:20px;line-height:1.2}
.brand .wm span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.topsearch{flex:1;max-width:440px;margin:0 auto;display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.topsearch input{flex:1;border:0;background:transparent;padding:11px 16px;font-size:15px;outline:none;color:var(--ink)}
.topsearch button{border:0;background:transparent;color:var(--green-d);padding:0 15px 0 6px;height:44px;cursor:pointer;display:grid;place-items:center}
.actions{display:flex;align-items:center;gap:12px;flex:none}
.langsw{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.langsw a{padding:8px 13px;font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none}
.langsw a.on{background:var(--green);color:#fff}
.btn{border:0;border-radius:999px;padding:12px 21px;font-size:15px;font-weight:600;background:var(--green);color:#fff;display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--green-d)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}

/* mobile: logo + search + compact language switch. The switch used to be
   hidden entirely here, which left phone users no way to change language. */
/* the short "Add story" label is phone-only */
.tell-label-short{display:none}

@media (max-width:820px){
  :root{--headH:66px}
  .topbar .wrap{height:66px;gap:8px}
  .brand img{height:46px;width:46px}
  .brand .wm{display:none}
  .langsw a{padding:8px 8px;font-size:13px}
  /* no search box on phones — the prominent red "+ Add story" button takes
     its place as the thing the eye lands on */
  .topsearch{display:none}
  .tell-label{display:none}
  .tell-label-short{display:inline}
  .tell-btn{background:var(--red);color:#fff;padding:12px 18px;font-size:16px;font-weight:800;
    box-shadow:0 6px 16px rgba(239,62,74,.35);margin-left:auto}
  .tell-btn:hover{background:var(--red-d)}
}

/* ---------- category rail ---------- */
.cats{border-bottom:1px solid var(--line);background:var(--surface)}
.cats .wrap{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;padding:18px 20px;scrollbar-width:thin}
.cat{flex:none;width:84px;text-align:center;text-decoration:none;color:var(--ink)}
.cat .ring{display:block;width:70px;height:70px;border-radius:50%;background:conic-gradient(from 210deg,var(--pink),var(--yellow),var(--green),var(--pink));padding:3px;margin:0 auto 8px}
.cat .inner{display:grid;width:100%;height:100%;border-radius:50%;background:var(--surface);place-items:center}
.cat .glyph{width:100%;height:100%;border-radius:50%;background:var(--green-l);display:grid;place-items:center}
.cat .glyph svg{width:29px;height:29px;fill:none;stroke:var(--green-d);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cat .lbl{display:block;font-size:14px;font-weight:500;line-height:1.4}
.cat.on .ring{background:var(--green)}
.cat.on .glyph{background:var(--green)}
.cat.on .glyph svg{stroke:#fff}
.cat.on .lbl{font-weight:700;color:var(--green-d)}

/* ---------- events strip ---------- */
.evbar{position:sticky;top:var(--headH);z-index:55;background:#FFFDF4;border-bottom:1px solid var(--line)}
.evbar .wrap{display:flex;align-items:stretch;height:48px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.evbar .wrap::-webkit-scrollbar{display:none}
.evlabel{flex:none;display:flex;align-items:center;gap:8px;padding-right:18px;margin-right:6px;border-right:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-d);white-space:nowrap}
.evlabel i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.evitem{flex:none;display:flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none;color:var(--ink);padding:0 15px;font-size:14.5px;position:relative}
.evitem + .evitem::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--line)}
.evitem b{color:var(--green-d);font-weight:700;font-size:12.5px}
.evmore{flex:none;position:sticky;right:0;margin-left:auto;display:flex;align-items:center;padding:0 2px 0 40px;background:linear-gradient(90deg,rgba(255,253,244,0),#FFFDF4 42%)}
.evmore a{border:1px solid var(--line);background:var(--surface);color:var(--green-d);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:700;white-space:nowrap;text-decoration:none}
@media (max-width:820px){.evlabel{display:none}}

/* ---------- gallery ---------- */
main{padding:34px 0 90px}
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.head-row h1{font-family:var(--display);font-weight:500;font-size:clamp(22px,3vw,30px);margin:0}
.head-row p{margin:0;color:var(--muted);font-size:14.5px}
.grid{columns:2;column-gap:24px}
@media (max-width:760px){.grid{columns:1}}
.card{break-inside:avoid;margin:0 0 24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:block;text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(23,40,30,.10)}
.media{position:relative;display:block;background:var(--green-l)}
.media img{display:block;width:100%;height:auto}
.media.tall img{height:400px;object-fit:cover}
.media.short img{height:230px;object-fit:cover}
.badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;background:rgba(var(--dark),.72);color:#fff;border-radius:999px;padding:6px 13px 6px 10px;font-size:12.5px;font-weight:600}
.badge svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.badge.audio{background:rgba(250,151,241,.94);color:#4a1544}
.wavetile{display:grid;place-items:center;padding:26px}
.cardbody{display:block;padding:16px 18px 18px}   /* display:block is load-bearing: it's a <span> holding h3/p */
.cardbody h3{font-family:var(--display);font-weight:500;font-size:18px;margin:0 0 3px;line-height:1.5}
.cardbody .excerpt{margin:0 0 2px;font-size:14.5px;line-height:1.65;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cardbody .cardmore{display:inline-block;margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--green-d)}
a.card:hover .cardmore{text-decoration:underline}
.meta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-top:2px}
.meta .who{font-weight:600;color:var(--ink)}
.meta .tag{background:var(--green-l);color:var(--green-d);border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:600}
.meta .tag:first-of-type{margin-left:auto}   /* only the first tag pushes right, so two tags sit together */
@media (max-width:760px){.cardbody{padding:14px 16px 16px}}   /* after the base rule: same specificity, source order decides */

/* ---------- story page ---------- */
.story-hero{position:relative;background:#0d1712;color:#fff}
.story-hero .photo{width:100%;max-height:64vh;object-fit:cover;display:block}
.story-wrap{max-width:820px;margin:0 auto;padding:26px 20px 80px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-d);margin:22px 0 8px}
.story-wrap h1{font-family:var(--display);font-weight:500;font-size:clamp(24px,4vw,38px);line-height:1.4;margin:0 0 6px}
.story-sub{color:var(--muted);font-size:18px;margin:0 0 22px}
.story-body{font-size:18px;line-height:1.95}
.story-body p{margin:0 0 14px}
.byline{display:flex;align-items:center;gap:11px;margin:22px 0;font-size:14.5px;color:var(--muted);flex-wrap:wrap}
.byline .av{width:34px;height:34px;border-radius:50%;background:var(--pink);color:#4a1544;display:grid;place-items:center;font-weight:700}
.player{display:flex;align-items:center;gap:14px;max-width:560px;margin:18px 0;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 18px 10px 10px}
.player audio{width:100%}
.gallery-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:20px 0}
.gallery-imgs img{width:100%;height:150px;object-fit:cover;border-radius:10px}
.embed{margin:18px 0}
.embed.yt iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px}
.embed-link{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:10px 18px;text-decoration:none;color:var(--green-d);font-weight:600;margin:6px 8px 6px 0}
.mapbox{height:280px;border-radius:14px;overflow:hidden;margin:20px 0;border:1px solid var(--line)}
.dir-btn{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;border-radius:999px;padding:10px 18px;text-decoration:none;font-weight:600}

/* ---------- forms / submit ---------- */
.panel{max-width:680px;margin:30px auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.panel h1{font-family:var(--display);font-weight:500;font-size:26px;margin:0 0 6px}
.panel .lead{color:var(--muted);margin:0 0 22px}
.field{margin-bottom:18px}
label{display:block;font-size:14.5px;font-weight:600;margin-bottom:6px}
label em{font-style:normal;font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],select,textarea{
  width:100%;font-size:15px;padding:12px 14px;border-radius:11px;border:1.5px solid var(--line);background:#fdfdfb;color:var(--ink)}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--green);outline:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.note{background:var(--green-l);border-radius:12px;padding:14px 16px;font-size:14.5px;color:#26543c;line-height:1.7}
.err{background:#fbe9e7;color:#a3231f;border-radius:10px;padding:12px 14px;font-size:14px;margin-bottom:16px}
.ok{background:var(--green-l);color:#1f7a49;border-radius:10px;padding:12px 14px;font-size:14px;margin-bottom:16px}

/* recorder */
.recorder{border:1.5px dashed var(--line);border-radius:14px;padding:20px;text-align:center;margin-bottom:12px}
.recorder.recording{border-color:var(--pink-d);background:#fff5fd}
.rec-btn{width:64px;height:64px;border-radius:50%;background:var(--pink);border:0;cursor:pointer;display:inline-grid;place-items:center}
.rec-btn svg{width:26px;height:26px;fill:#4a1544}
.rec-time{font-variant-numeric:tabular-nums;font-weight:700;margin:10px 0 4px}
.rec-hint{font-size:14px;color:var(--muted)}
.filelist{font-size:14.5px;color:var(--muted);margin-top:8px}

.site-foot{border-top:1px solid var(--line);padding:30px 0 46px;color:var(--muted);font-size:14.5px}
.site-foot b{color:var(--ink)}

/* submit page (.panel is submit-only): no text below 17px */
.panel{font-size:17px}
.panel .lead,.panel label,.panel label em,.panel .note,.panel .err,.panel .ok,.panel .rec-hint,.panel .filelist{font-size:17px}
.panel input,.panel select,.panel textarea{font-size:17px}
.panel .rec-time{font-size:18px}
.panel .btn{font-size:17px}

/* ---------- submit: collapsible sections ---------- */
.drop{border:0;margin-bottom:14px}
.drop > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;background:var(--green);color:#fff;border-radius:999px;padding:12px 20px;font-size:16px;font-weight:700}
.drop > summary::-webkit-details-marker{display:none}
.drop > summary::before{content:'+';font-size:22px;color:#fff;line-height:1;width:16px;text-align:center;flex:none}
.drop[open] > summary::before{content:'\2013'}
.drop[open] > summary{border-radius:14px 14px 0 0}
.drop-body{border:1.5px solid var(--green);border-top:0;border-radius:0 0 14px 14px;padding:16px}
.drop-body .field:last-child{margin-bottom:0}

/* ---------- voice recorder (V10: red mic circle + attached label card) ---------- */
.vr-field .voicerec{border:1.5px dashed var(--line);border-radius:16px;background:var(--surface);padding:22px 18px;min-height:150px;display:flex;align-items:center;justify-content:center}
.vr-stage{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.vr-caption{font-size:15px;color:var(--muted);text-align:center}

/* the numbered how-to above the button */
.vr-steps{margin:0 0 14px;padding:0;list-style:none;counter-reset:vrs}
.vr-steps li{counter-increment:vrs;display:flex;gap:10px;align-items:flex-start;margin:8px 0;font-size:15.5px;line-height:1.6}
.vr-steps li::before{content:counter(vrs);flex:none;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;margin-top:1px}

/* the whole shape — circle AND label card — is one press target */
.vr10{display:flex;align-items:center;border:0;background:transparent;padding:0;margin:6px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;text-align:left}
.vr10-circle{width:104px;height:104px;border-radius:50%;background:#ef3e4a;color:#fff;display:grid;place-items:center;flex:none;position:relative;z-index:1;box-shadow:0 6px 16px rgba(239,62,74,.35)}
.vr10-circle svg{width:46px;height:46px}
.vr10-card{background:var(--surface);border:2px solid #ef3e4a;border-left:0;border-radius:0 16px 16px 0;padding:13px 18px 13px 26px;margin-left:-14px;line-height:1.4;min-width:150px}
.vr10-t1{display:block;font-size:18px;font-weight:700;color:var(--ink)}
.vr10-t2{display:block;font-size:13px;color:var(--muted)}
.vr10:active .vr10-circle,.vr10.rec:active .vr10-circle{transform:scale(.96)}
.vr10.rec .vr10-circle{animation:vr10pulse 1.4s ease-out infinite}
.vr10.rec .vr10-t1{font-variant-numeric:tabular-nums;color:#ef3e4a}
@keyframes vr10pulse{0%{box-shadow:0 0 0 0 rgba(239,62,74,.45)}100%{box-shadow:0 0 0 22px rgba(239,62,74,0)}}

/* the "too short" flash */
.vr-flash{margin-top:10px;background:#FDECEC;border:2px solid #ef3e4a;color:#B4232E;border-radius:12px;padding:10px 14px;font-weight:700;font-size:15.5px;text-align:center}

/* saved: large, unmistakable confirmation. Big green badge + heading, a Play
   row, and a clearly-separated Delete placed well below Play so the two are
   never mis-tapped; Delete also asks for confirmation (in JS). */
.vr-saved{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--green-l);border:2px solid var(--green);border-radius:18px;padding:22px 18px}
.vr-saved-badge{width:66px;height:66px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin-bottom:10px;box-shadow:0 6px 16px rgba(49,167,104,.35)}
.vr-saved-badge svg{width:38px;height:38px}
.vr-saved-head{font-size:22px;font-weight:800;color:var(--green-d)}
.vr-saved-sub{font-size:15px;color:var(--muted);margin-top:2px}
.vr-saved-player{display:flex;align-items:center;gap:14px;margin:16px 0 4px}
.vr-play{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--green);background:#fff;color:var(--green-d);border-radius:999px;padding:12px 26px;font-size:17px;font-weight:700;cursor:pointer}
.vr-play svg{width:22px;height:22px}
.vr-saved-time{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--green-d)}
.vr-delete{margin-top:22px;display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
.vr-delete svg{width:16px;height:16px}
.vr-delete:hover{border-color:var(--red);color:var(--red)}
.vr-note{color:var(--muted);font-size:15px;text-align:center}

/* auto-grow story box starts around four lines */
#story{min-height:112px}

/* ---------- submit: two-column layout, recorder featured on the right ---------- */
.submit-wrap{max-width:1040px;margin:30px auto;padding:0 20px;font-size:17px}
.submit-wrap h1{font-family:var(--display);font-weight:500;font-size:28px;margin:0 0 6px}
.submit-wrap .lead{color:var(--muted);margin:0 0 22px;font-size:17px}
.submit-wrap label,.submit-wrap input,.submit-wrap select,.submit-wrap textarea,.submit-wrap .note,.submit-wrap .btn{font-size:17px}
/* bolder, larger field labels in the submission form (both the /submit.php page
   and the inline share form), matching the approved mockup */
.submit-grid label{font-size:17.5px;font-weight:700}

/* two columns: left = fields+main-photo (main) then collapsibles (more) then
   submit (foot); right = recorder (side, sticky). Full-bleed: the left column
   has no card chrome of its own — the cards inside it (main-photo, recorder,
   collapsibles) carry the structure. */
.submit-grid{display:grid;grid-template-columns:1fr 340px;
  grid-template-areas:"main side" "more side" "foot side";gap:24px;align-items:start}
.submit-main{grid-area:main}
.drop-group{grid-area:more}
.submit-side{grid-area:side;position:sticky;top:104px}
.submit-foot{grid-area:foot}
.submit-main .field:last-child{margin-bottom:0}
/* no gap below the last collapsible before the submit area */
.drop-group .drop:last-child{margin-bottom:0}

.vr-card{background:linear-gradient(165deg,#ffffff,var(--green-l));border:1.5px solid #cfe9d8;border-radius:18px;padding:20px 20px 22px;box-shadow:0 10px 28px rgba(31,122,73,.12)}
.vr-card-head h2{font-family:var(--display);font-weight:500;font-size:21px;margin:0 0 4px;color:var(--green-d)}
.vr-card-head p{margin:0 0 6px;font-size:15px;color:var(--muted)}
.vr-card .voicerec{border:0;background:transparent;padding:12px 0 4px;min-height:auto}

@media(max-width:860px){
  /* stack order: fields+main photo → recorder → add photos/links + location → submit */
  .submit-grid{grid-template-columns:1fr;grid-template-areas:"main" "side" "more" "foot"}
  .submit-side{position:static}
}

/* ---------- submit: required markers, counters, file feedback ---------- */
.req{color:#c0392b;font-weight:800}
.req-legend{font-size:14px;color:var(--muted);margin:0 0 16px}
.char-count{font-size:14px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.char-count.short{color:#c0392b}

.filepick-list{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.filepick-item{display:flex;align-items:center;gap:8px;background:var(--green-l);border:1px solid #cfe9d8;border-radius:10px;padding:7px 11px;font-size:15px}
.filepick-ok{color:var(--green-d);font-weight:800;flex:none}
.filepick-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#26543c}
.filepick-del{flex:none;border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.filepick-del:hover{color:#c0392b}

.vr-card .vr-upload{margin:16px 0 0;padding-top:14px;border-top:1px solid #cfe9d8}
.vr-card .vr-upload label{font-size:15px}

/* ---------- main-photo card ---------- */
.mp-card{border:2px solid var(--green);border-radius:16px;background:var(--green-l);padding:18px 20px;margin-top:4px}
.mp-card h3{font-family:var(--display);font-weight:700;font-size:21px;margin:0 0 4px;color:var(--green-d)}
.mp-card .mp-sub{margin:0 0 14px;color:var(--muted);font-size:15px}

/* ---------- big, obvious file-picker buttons ---------- */
/* the native <input type=file> is visually hidden but stays in the DOM so
   submit.js still enhances it (thumbnail + name + remove render below); the
   <label for> is a sibling, not an ancestor, so clicks in that list can't
   re-open the picker. */
.bigfile{display:block}
.sr-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.bf-btn{display:flex;align-items:center;gap:12px;width:100%;background:var(--surface);
  border:2px solid var(--green);color:var(--green-d);border-radius:14px;padding:16px 18px;
  font-size:17px;font-weight:700;cursor:pointer}
.bf-btn svg{width:24px;height:24px;stroke:var(--green-d);flex:none}
.bf-btn:hover{background:var(--green-l)}
.mp-card .bf-btn:hover{background:#fff}

/* ---------- foot: Facebook opt-in + wide red Submit ---------- */
.submit-foot .fbline{display:flex;gap:10px;align-items:flex-start;font-size:16px;cursor:pointer}
.submit-foot .fbline input{margin-top:4px;flex:none}
.btn-submit{margin-top:18px;width:100%;background:var(--red,#ef3e4a);color:#fff;border:0;border-radius:14px;
  padding:18px 24px;font-size:20px;font-weight:700;cursor:pointer;font-family:var(--body,inherit);
  box-shadow:0 8px 20px rgba(239,62,74,.28);letter-spacing:.01em}
.btn-submit:hover{background:var(--red-d,#c62f3a)}
.btn-submit:active{transform:scale(.99)}
.submit-foot .note{margin-top:14px;text-align:center;color:var(--muted)}


/* ---------- public pager ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:28px 0 8px}
.pager-num{color:var(--muted);font-size:14.5px}

/* ---------- events list (was inline styles in events.php) ---------- */
.ev-list{display:grid;gap:14px;max-width:820px}
.ev-row{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.ev-when{font-weight:700;color:var(--green-d);line-height:1.55}
.ev-title{font-family:var(--display);font-size:19px;margin-bottom:4px}
.ev-where{color:var(--muted);font-size:13.5px;margin-bottom:7px}
.ev-note{font-size:15px;line-height:1.8}
@media(max-width:560px){.ev-row{grid-template-columns:1fr;gap:6px}}

/* ---------- "Share a story" modal ---------- */
/* ---------- "Share a story" inline panel ----------
   Pre-loaded in the page, hidden until the header button reveals it. It's a
   normal in-flow <section> — never a <dialog>/showModal — so it renders and
   behaves identically in every browser and the on-screen keyboard scrolls it
   like any page content. */
/* ---------- "Share a story" native <details> disclosure ----------
   The browser owns open/closed via the element's own [open] attribute — no
   hidden attribute, no display toggle in JS. The <summary> is collapsed to
   zero height because the header button is the only visible trigger; it stays
   in the DOM as the no-JS fallback (clicking it natively opens the form). */
.share-d{border:0;margin:0;background:var(--surface)}
/* closed: no chrome at all, so nothing sits under the header on load.
   open: the border + shadow appear. */
.share-d[open]{border-bottom:2px solid var(--line);box-shadow:0 16px 28px rgba(0,0,0,.10)}
.share-d>summary{list-style:none;height:0;overflow:hidden;padding:0;margin:0}
.share-d>summary::-webkit-details-marker{display:none}
.share-d-inner{max-width:1040px;margin:0 auto;padding:8px 20px 24px;animation:share-d-in .18s ease}
/* opacity-only reveal: a transform here (even ending at none) makes this box the
   containing block for position:fixed descendants, which trapped the sending
   overlay inside the form instead of over the viewport. */
@keyframes share-d-in{from{opacity:0}to{opacity:1}}
.share-d-head{display:flex;align-items:center;justify-content:space-between;padding:14px 0 12px;font-family:var(--display);font-size:28px}
.share-d-close{border:1.5px solid var(--line);background:var(--surface);width:44px;height:44px;border-radius:50%;
  font-size:26px;line-height:1;color:var(--ink);cursor:pointer;padding:0;display:grid;place-items:center;flex:none}
.share-d-close:hover{border-color:var(--green);color:var(--green-d)}
.share-d-close:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.share-d-inner{animation:none}}
@media(max-width:820px){.share-d-inner{padding:4px 14px 18px}}

/* ---------- file-picker previews ---------- */
.filepick-item{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.filepick-thumb{width:88px;height:66px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.filepick-size{color:var(--muted);font-size:12.5px}

/* ---------- microphone help panel ---------- */
.vr-help{background:#FFF6E8;border:2px solid #E7A93C;border-radius:12px;padding:16px 18px;text-align:left;font-size:14.5px;line-height:1.75}
.vr-help-title{font-weight:700;font-size:16px;margin-bottom:6px}
.vr-help ol{margin:8px 0 10px;padding-left:22px}
.vr-help li{margin:4px 0}
.vr-help-note{color:var(--muted);font-size:13px;margin:0 0 10px}

/* ============================================================
   Story page — magazine split ("V3")
   ============================================================ */
.pv-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--green);z-index:200}
.pv-split{display:grid;grid-template-columns:minmax(320px,44%) 1fr;align-items:start}
.pv-rail{position:sticky;top:var(--headH);height:calc(100vh - var(--headH));overflow:hidden}
.pv-rail img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;right:0;bottom:0;left:0;transition:opacity .8s}
.pv-rail img.off{opacity:0}
.pv-railfall{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(160deg,var(--green-d),#123524 70%);display:grid;place-items:center;align-content:center;gap:26px;padding:30px}
.pv-railfall img{position:static;width:min(46%,220px);height:auto}
.pv-railfall svg{width:min(70%,340px);height:auto;opacity:.5}
.pv-railcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:44px 22px 18px;background:linear-gradient(transparent,rgba(var(--dark),.72));color:#fff;font-size:13.5px}
.pv-railtitle{position:absolute;left:0;right:0;bottom:0;z-index:3;display:none;padding:90px 20px 22px;background:linear-gradient(transparent,rgba(var(--dark),.9));color:#fff}
.pv-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-d);margin:0 0 4px}
.pv-railtitle .pv-eyebrow{color:var(--yellow)}
.pv-mtitle{color:#fff;font-family:var(--display);font-size:clamp(26px,7.4vw,34px);line-height:1.4;margin:6px 0 3px;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.pv-msub{color:rgba(255,255,255,.88);margin:0;font-size:14.5px}
.pv-txt{padding:40px clamp(20px,5vw,64px) 34px;min-width:0}
.pv-pagehead h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.4;margin:6px 0 4px}
.pv-sub{color:var(--muted);margin:0 0 18px}
.pv-story{font-size:16.5px;line-height:1.9}
.pv-story p{margin:0 0 22px}
/* audio pill */
.pv-player{display:flex;align-items:center;gap:14px;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 9px;margin:0 0 22px}
.pv-player audio{display:none}
.pv-pp{width:44px;height:44px;border-radius:50%;background:var(--pink);border:0;display:grid;place-items:center;flex:none;cursor:pointer}
.pv-pp::before{content:'';border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #4a1544;margin-left:3px}
.pv-player.playing .pv-pp::before{border-style:double;border-width:0 0 0 13px;height:16px}
.pv-wf{flex:1;height:34px;display:flex;align-items:flex-end;gap:2px;cursor:pointer}
.pv-wf i{flex:1;background:var(--line);border-radius:1px;transition:background .2s}
.pv-wf i.done{background:var(--green)}
.pv-t{font-size:13px;font-variant-numeric:tabular-nums;font-weight:600;flex:none;color:var(--muted)}
/* full-width gallery */
.pv-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;padding:8px}
.pv-gal figure{margin:0;position:relative}
.pv-gal img{width:100%;height:300px;object-fit:cover;border-radius:6px;display:block}
.pv-gal figure.wide,.pv-gal figure:first-child{grid-column:span 2}
.pv-gal figure:first-child img{height:380px}
.pv-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 9px;font-size:12.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));border-radius:0 0 6px 6px}
/* media sections */
.pv-medsec{max-width:900px;margin:0 auto;padding:30px 20px 0}
.pv-medsec.wide{max-width:1120px}
.pv-secttl{font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-d);margin:0 0 12px}
.pv-video{width:100%;border-radius:16px;display:block;margin:0 0 14px;background:#000}
.pv-yt{position:relative;display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);cursor:pointer;aspect-ratio:16/9;background:#000;margin:0 0 14px}
.pv-yt img{width:100%;height:100%;object-fit:cover;display:block}
.pv-yt iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}
.pv-play{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}
.pv-play i{width:84px;height:58px;background:#f00;border-radius:14px;display:grid;place-items:center}
.pv-play i::before{content:'';border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.pv-yt.live .pv-play{display:none}
.pv-ytcap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 13px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:15px}
.pv-linkcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pv-lc{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.pv-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:none;background:var(--green)}
.pv-lc.fb .pv-ic{background:#1877f2}
.pv-lc.ig .pv-ic{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.pv-lc b{display:block;font-size:14.5px;line-height:1.4}
.pv-host{font-size:12.5px;color:var(--muted)}
.pv-mapfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 2px 0}
.pv-mapcap{font-size:16px;line-height:1.7;color:var(--ink);text-align:right;flex:1;min-width:220px}
/* byline + next/back navigation */
.pv-endrow{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:34px 0 50px}
.pv-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
.pv-av{width:40px;height:40px;border-radius:50%;background:var(--pink);color:#4a1544;display:grid;place-items:center;font-weight:700;flex:none}
.pv-navcol{display:grid;gap:10px;justify-items:center}
.pv-navcol img{width:120px;height:auto;margin-bottom:4px}
.pv-btn{display:inline-block;text-align:center;border:0;border-radius:999px;padding:13px 26px;font-weight:700;font-size:15.5px;background:var(--green);color:#fff;text-decoration:none;min-width:210px;cursor:pointer}
.pv-btn:hover{background:var(--green-d)}
.pv-btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);font-weight:600}
.pv-btn.ghost:hover{background:var(--green-l);border-color:var(--green)}
/* more stories strip */
.pv-more{background:rgb(var(--dark));color:#fff;padding:40px 0 56px;margin-top:20px}
.pv-morehead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.pv-morehead h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,26px)}
.pv-allbtn{margin-left:auto;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;text-decoration:none}
.pv-allbtn:hover{background:rgba(255,255,255,.12)}
.pv-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pv-mc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;text-decoration:none;color:#fff;position:relative;display:block}
.pv-mc img{width:100%;height:130px;object-fit:cover;display:block}
.pv-mcwave{display:grid;place-items:center;height:130px;background:var(--green-l);padding:16px}
.pv-mcbadge{position:absolute;top:8px;left:8px;background:rgba(var(--dark),.72);color:#fff;border-radius:999px;padding:5px 8px;display:grid;place-items:center}
.pv-mcb{display:block;padding:10px 13px 13px}
.pv-mcb b{font-family:var(--display);font-weight:400;font-size:15.5px;line-height:1.5;display:block}
.pv-mcb span{display:block;font-size:12.5px;opacity:.7;margin-top:3px}
@media (max-width:880px){
  .pv-split{grid-template-columns:1fr}
  .pv-rail{position:relative;top:0;height:60vh}
  .pv-railtitle{display:block}
  .pv-railcap{display:none}
  .pv-pagehead{display:none}
  .pv-txt{padding:24px 26px 34px}   /* text only — gallery/hero/map are outside this column */
}
@media (max-width:700px){
  .pv-gal figure.wide,.pv-gal figure:first-child{grid-column:span 1}
  .pv-gal img,.pv-gal figure:first-child img{height:240px}
  .pv-endrow{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px}
}

/* ============================================================
   Dark mode — token swap plus overrides for hardcoded colours.
   theme.js sets html[data-theme] before first paint; the header
   button toggles it and the choice persists in localStorage.
   ============================================================ */
:root{color-scheme:light}
.themebtn{width:42px;height:42px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none;padding:0}
.themebtn:hover{background:var(--green-l);border-color:var(--green)}
.themebtn svg{width:19px;height:19px;display:block}
.themebtn .ic-sun{display:none}
html[data-theme="dark"] .themebtn .ic-moon{display:none}
html[data-theme="dark"] .themebtn .ic-sun{display:block}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101A14;
  --surface:#18251D;
  --ink:#ECEFE8;
  --muted:#9BAB9A;
  --line:#2B3A30;
  --green:#3CB877;
  --green-d:#63CF97;      /* also used as text on the background, so lighter here */
  --green-l:#1D3226;
  --pink-d:#E07AD2;
}
/* events strip (hardcoded cream in light mode) */
html[data-theme="dark"] .evbar{background:#151F18}
html[data-theme="dark"] .evmore{background:linear-gradient(90deg,rgba(21,31,24,0),#151F18 42%)}
/* form controls and drop zones (hardcoded near-white) */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{background:#121D16;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .drop-body{background:#121D16}
html[data-theme="dark"] .vr-item{background:#16231B}
html[data-theme="dark"] .vr-card{background:linear-gradient(165deg,#18251D,#14231A);border-color:#2F5A41;box-shadow:0 10px 28px rgba(0,0,0,.35)}
html[data-theme="dark"] .vr-help{background:#2A2213;border-color:#8A6A24}
html[data-theme="dark"] .err{background:#3A1512;color:#FFB4AE}
html[data-theme="dark"] .recorder.recording{background:#2A1526}
/* the dark "more stories" strip needs a seam against a dark page */
html[data-theme="dark"] .pv-more{border-top:1px solid var(--line)}
/* photos read slightly hot on dark backgrounds */
html[data-theme="dark"] .card img,
html[data-theme="dark"] .pv-gal img,
html[data-theme="dark"] .pv-rail img{filter:brightness(.94)}

/* ============================================================
   Story-page lightbox: one photo big, the rest one tap away
   ============================================================ */
.pv-gal figure img,.pv-rail img{cursor:zoom-in}
.pv-railfall img{cursor:default}
body.pv-lb-open{overflow:hidden}
.pv-lb{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:rgba(var(--dark),.95);display:none;flex-direction:column;align-items:center;justify-content:center;padding:16px}
body.pv-lb-open .pv-lb{display:flex}
.pv-lb-stage{display:grid;place-items:center;max-width:100%;min-height:0;flex:1}
.pv-lb-stage img{max-width:94vw;max-height:72vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.pv-lb-cap{color:rgba(255,255,255,.9);font-size:14px;padding:10px 20px 0;text-align:center;max-width:820px}
.pv-lb-count{color:rgba(255,255,255,.55);font-size:12.5px;padding:4px 0 8px;font-variant-numeric:tabular-nums}
.pv-lb-x{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:#444;font-size:26px;font-weight:700;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.35);display:grid;place-items:center}
.pv-lb-x:hover{color:#111}
.pv-lb-x:hover{background:rgba(255,255,255,.2)}
.pv-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2;display:grid;place-items:center;padding-bottom:4px}
.pv-lb-nav:hover{background:rgba(255,255,255,.2)}
.pv-lb-nav.prev{left:14px}
.pv-lb-nav.next{right:14px}
.pv-lb-thumbs{display:flex;gap:8px;overflow-x:auto;max-width:94vw;padding:6px 4px 2px;scrollbar-width:thin}
.pv-lb-thumbs button{flex:none;width:74px;height:52px;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;background:none;cursor:pointer;opacity:.55;transition:opacity .15s}
.pv-lb-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.pv-lb-thumbs button.on{border-color:var(--green);opacity:1}
.pv-lb-thumbs button:hover{opacity:1}
@media (max-width:700px){
  .pv-lb{padding:10px}
  .pv-lb-stage img{max-height:64vh}
  .pv-lb-nav{width:44px;height:44px;font-size:26px}
  .pv-lb-nav.prev{left:6px}.pv-lb-nav.next{right:6px}
  .pv-lb-thumbs button{width:60px;height:44px}
}

/* ---------- mobile refinements (approved draft v4) ---------- */
@media (max-width:820px){
  /* smaller category row: 70px rings feel oversized on a phone */
  .cats .wrap{gap:14px;padding:10px 16px 9px}
  .cat{width:58px}
  .cat .ring{width:44px;height:44px;padding:2px;margin-bottom:5px}
  .cat .glyph svg{width:19px;height:19px}
  .cat .lbl{font-size:11px}
  /* no dark-mode button on phones; the theme still follows the device's
     system setting automatically (theme.js) — only the manual toggle goes */
  .themebtn{display:none}
}

/* dark mode: the new recorder pieces */
html[data-theme="dark"] .vr10-card{border-color:#ef3e4a}
html[data-theme="dark"] .vr-attached{border-color:#2F5A41}
html[data-theme="dark"] .vr-flash{background:#3A1518;border-color:#ef3e4a;color:#FFB4BA}

/* ---------- submit-form additions (one delta) ---------- */
/* clear the sticky header when the <details> share form scrolls into view */
.share-d{scroll-margin-top:calc(var(--headH) + 12px)}
.share-d-head{scroll-margin-top:calc(var(--headH) + 12px)}

/* #3 photo count */
.filepick-count{margin-top:8px;font-size:14px;font-weight:700;color:var(--green-d)}
/* #7 wrong-type + inline field errors */
.filetype-err,.field-err{color:var(--red,#ef3e4a);font-size:14px;font-weight:600;margin:8px 0 0}
/* the form now carries novalidate, so these are the only validation messages —
   the browser's own bubble anchored to the field and the sticky header covered
   it, which made it look as though it pointed at the language switch. Fields
   keep clear of the header when scrolled to. */
.submit-grid .field,.submit-grid .mp-card,.submit-grid .contact-card{scroll-margin-top:calc(var(--headH) + 16px)}
.filepick-busy{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--green-d)}

/* every submit failure is reported here, directly under the button, and it
   always leads with "not sent yet" so the message cannot be mistaken for a
   remark on a post that already went through */
.submit-errs{display:none}
.submit-errs.on{display:block;margin:12px 0 0;padding:14px 16px;border-radius:12px;
  background:#fdecec;border:2px solid var(--red,#ef3e4a)}
.submit-errs-head{margin:0 0 4px;font-weight:800;font-size:16px;color:var(--red-d,#c62f3a)}
.submit-errs-msg{margin:0;font-size:15.5px;line-height:1.6;color:#7a2b2b}

/* "(or LINE ID)" beside a contact label */
.opt{font-weight:400;font-size:14px;color:var(--muted)}
.field.invalid input,.field.invalid textarea{border-color:var(--red,#ef3e4a);box-shadow:0 0 0 3px rgba(239,62,74,.14)}
.mp-card.invalid{border-color:var(--red,#ef3e4a)}

/* #10 drag-over state on the picker buttons */
.bigfile.dragover .bf-btn{background:var(--green-l);border-style:dashed;box-shadow:0 0 0 3px rgba(49,167,104,.18)}

/* #9 link recognition chips */
.embed-tag{font-size:13px;font-weight:700;margin:6px 0 0;min-height:16px}
.embed-tag.ok{color:var(--green-d)}
.embed-tag.bad{color:var(--red,#ef3e4a)}

/* submit button sending state */
.btn-submit.is-sending{opacity:.7;cursor:progress}

/* #6 sending progress — IN the form at the button, nothing position:fixed */
.btn-submit.is-sending{opacity:.9;cursor:progress}
.nc-spin-inline{display:inline-block;width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;vertical-align:-3px;animation:nc-spin 1s linear infinite}
.nc-pct-inline{font-variant-numeric:tabular-nums}
.nc-inline-bar{height:12px;border-radius:999px;background:var(--green-l);overflow:hidden;margin-top:10px}
.nc-inline-bar>i{display:block;height:100%;width:0;background:var(--green);border-radius:999px;transition:width .2s ease}
@keyframes nc-spin{to{transform:rotate(360deg)}}
/* "almost done": the upload is complete, the server is still saving — pulse the
   label and shimmer the full bar so it reads as activity, not a stall */
.nc-almost{animation:nc-pulse 1.1s ease-in-out infinite}
.nc-inline-bar.is-almost>i{width:100% !important;background:linear-gradient(90deg,var(--green) 0%,#7fd3a3 50%,var(--green) 100%);background-size:200% 100%;animation:nc-shimmer 1.2s linear infinite}
@keyframes nc-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes nc-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.nc-spin-inline,.nc-almost,.nc-inline-bar.is-almost>i{animation:none}}

/* success panel (XHR + no-JS share the .submit-ok look) */
.submit-ok{text-align:center;padding:26px 20px}
.submit-ok .ok-check{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;font-size:34px;line-height:64px;margin:0 auto 12px}
.submit-success{animation:share-d-in .2s ease}

/* ==================== .com: post menu, kinds, listings ==================== */
/* the header post menu (a <details>; the summary is the existing green/red button) */
.tell-menu{position:relative}
.tell-menu>summary{list-style:none}
.tell-menu>summary::-webkit-details-marker{display:none}
.tell-menu-list{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column}
.tell-menu-list a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--ink)}
.tell-menu-list a:hover{background:var(--green-l)}
.tell-menu-list a b{display:block;font-size:16px}
.tell-menu-list a span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
@media(max-width:820px){.tell-menu-list{position:fixed;left:12px;right:12px;top:calc(var(--headH) + 6px);min-width:0}}

/* the kind field groups: only the chosen kind is shown (submit.js) */
.kind-group[hidden],[data-kind][hidden]{display:none !important}
.kind-group{margin:4px 0 6px}

/* contact card sits above the main photo card, same weight */
.contact-card{border:2px solid var(--line);border-radius:16px;background:var(--surface);padding:18px 20px;margin-top:4px}
.contact-card h3{font-family:var(--display);font-weight:700;font-size:21px;margin:0 0 4px;color:var(--ink)}
.contact-card .mp-sub{margin:0 0 14px;color:var(--muted);font-size:15px}
.submit-grid select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:17px;background:var(--surface);color:var(--ink);font-family:inherit}

/* success panel: expiry line + the private manage link */
.submit-ok .ok-expiry{font-weight:700;color:var(--green-d);margin:10px 0 0}
.ok-manage{margin:18px auto 6px;max-width:560px;text-align:left;background:var(--green-l);border:2px solid var(--green);border-radius:14px;padding:14px 16px}
.ok-manage strong{display:block;font-size:17px;margin-bottom:4px}
.ok-manage p{margin:0 0 10px;font-size:15px}
.ok-manage-url{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;padding:10px 12px;border:1.5px solid var(--green);border-radius:10px;background:#fff;color:var(--ink)}

/* manage page */
.manage-wrap{max-width:720px}
.manage-card{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;margin:16px 0}
.manage-state{font-size:18px;font-weight:700;margin:0 0 14px}
.manage-state.live{color:var(--green-d)}
.manage-state.pending{color:#a06a00}
.manage-state.sold,.manage-state.off{color:var(--muted)}
.manage-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.manage-actions form{margin:0}
.btn.ghost{background:var(--surface);color:var(--green-d);border:2px solid var(--green)}
.btn.danger.ghost{color:var(--red);border-color:var(--red)}

/* ==================== .com: list pages, cards, listing page ==================== */
.list-page .wrap{max-width:1120px;margin:0 auto;padding:22px 20px 40px}
.list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.list-head h1{font-family:var(--display);font-weight:500;font-size:30px;margin:0 0 4px}
.list-head h1 .q{color:var(--green-d)}
.list-head .lead{margin:0;color:var(--muted);font-size:16px;max-width:640px}
.list-cta{flex:none}
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.cat-tabs a{display:inline-block;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600}
.cat-tabs a.on{background:var(--green);border-color:var(--green);color:#fff}
.list-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.list-filters input[type=search]{flex:1;min-width:200px;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px;font-size:16px;background:var(--surface);color:var(--ink)}
.list-filters select{border:1.5px solid var(--line);border-radius:999px;padding:11px 14px;font-size:15px;background:var(--surface);color:var(--ink)}
.list-count{color:var(--muted);font-size:14px;margin:0 0 10px}
.list-empty{background:var(--surface);border:1.5px dashed var(--line);border-radius:16px;padding:28px;text-align:center;color:var(--muted);font-size:17px}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.pager a{padding:8px 13px;border-radius:10px;border:1.5px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600}
.pager a.on{background:var(--green);border-color:var(--green);color:#fff}

/* directory tiles */
.dir-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:8px 0 18px}
.dir-tile{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:18px 12px;text-decoration:none;color:var(--ink)}
.dir-tile:hover{border-color:var(--green)}
.dir-ico{width:52px;height:52px;border-radius:50%;background:var(--green-l);color:var(--green-d);display:grid;place-items:center}
.dir-ico svg{width:26px;height:26px}
.dir-tile b{font-size:15px;line-height:1.3}
.dir-n{font-size:13px;color:var(--muted)}

/* listing cards */
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.lc{display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink)}
.lc:hover{border-color:var(--green);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.lc-pinned{border-color:var(--green)}
.lc-img{position:relative;aspect-ratio:4/3;background:var(--green-l);overflow:hidden}
.lc-img img{width:100%;height:100%;object-fit:cover;display:block}
.lc-noimg{width:100%;height:100%;display:grid;place-items:center;color:var(--green-d)}
.lc-noimg svg{width:44px;height:44px}
.lc-price{position:absolute;left:10px;bottom:10px;background:var(--red);color:#fff;font-weight:800;font-size:16px;padding:5px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(239,62,74,.35)}
.lc-pin{position:absolute;right:10px;top:10px;background:#fff;border-radius:999px;padding:3px 8px;font-size:13px}
.lc-body{padding:12px 14px 14px}
.lc-when{margin:0 0 4px;color:var(--green-d);font-weight:700;font-size:14px}
.lc-title{margin:0 0 4px;font-size:17px;line-height:1.35;font-weight:700}
/* the details sit at the left, the category chip at the right of the same row;
   it wraps under only when the card is too narrow for both */
.lc-meta{margin:0 0 6px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lc-meta-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.lc-meta-l > span + span::before{content:'· ';color:var(--line)}
.lc-cat{margin-left:auto;flex:none;background:var(--green-l);color:var(--green-d);border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:600}
.lc-snip{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
@media(max-width:640px){.lc-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.lc-body{padding:10px 12px 12px}.lc-title{font-size:15.5px}.lc-snip{display:none}}

/* listing page: state banner, facts, contact, report */
.ls-banner{border-radius:12px;padding:10px 14px;font-weight:800;font-size:16px;margin:0 0 16px}
.ls-banner.sold{background:var(--green-l);color:var(--green-d)}
.ls-banner.off{background:#f1efe8;color:var(--muted)}
.ls-facts{display:flex;flex-direction:column;gap:6px;margin:0 0 20px;padding:14px 16px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px}
.ls-price{font-size:30px;font-weight:800;color:var(--red);margin-bottom:4px}
.ls-fact{display:flex;gap:12px;font-size:15.5px}
.ls-fact span{flex:none;width:96px;color:var(--muted)}
.ls-fact b{font-weight:600}
.ls-contact{margin:24px 0 8px;padding:18px 20px;background:var(--green-l);border:2px solid var(--green);border-radius:16px}
.ls-contact h2{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 12px;color:var(--green-d)}
.ls-who{color:var(--ink);font-weight:700}
.ls-crow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.ls-clbl{flex:none;width:64px;color:var(--muted);font-weight:600}
.ls-cval{font-size:20px;font-weight:800;color:var(--ink);text-decoration:none}
a.ls-cval{color:var(--green-d)}
.ls-reveal{background:var(--green);color:#fff;border:0;border-radius:999px;padding:10px 20px;font-size:16px;font-weight:700;cursor:pointer}
.ls-qr{width:140px;height:140px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px}
.ls-posted{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.ls-report{max-width:1040px;margin:8px auto 0;padding:0 20px}
.ls-report summary{cursor:pointer;color:var(--muted);font-size:14px}
.ls-report-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.ls-report-form select{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:15px;background:var(--surface)}
/* events page: the upcoming/past switch sits above the category tabs */
.ev-tabs{margin-bottom:6px}
.ev-tabs a{font-size:16px;padding:10px 18px}
.lc-xs{color:var(--green-d)}

/* ==================== .com: home page ==================== */
/* weather / AQI strip */
.wx{background:var(--surface);border-bottom:1px solid var(--line)}
.wx .wrap{max-width:1120px;margin:0 auto;padding:8px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:14.5px}
.wx-temp{font-weight:800;font-size:17px}
.wx-txt{color:var(--muted)}
.wx-aqi{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.wx-aqi i{width:10px;height:10px;border-radius:50%;background:var(--aqi,#999)}
.wx-at{margin-left:auto;color:var(--muted);font-size:13px}

.home{padding-bottom:40px}
.hs{padding:26px 0 8px}
.hs .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.hs-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.hs-head h2{font-family:var(--display);font-weight:500;font-size:26px;margin:0}
.hs-head h2 span{font-family:var(--body);font-weight:400;font-size:15px;color:var(--muted)}
.hs-more{font-weight:700;color:var(--green-d);text-decoration:none;white-space:nowrap}
.hs-cta{margin:16px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* new pages row: horizontal scroll of small cards, pinned first */
.new-row{display:flex;gap:14px;overflow-x:auto;padding:4px 0 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.np{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;text-decoration:none;color:var(--ink);position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:12px 10px}
.np:hover{border-color:var(--green)}
.np-pin{border-color:var(--green);background:var(--green-l)}
.np-img{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--green-l);display:grid;place-items:center;color:var(--green-d)}
.np-img img{width:100%;height:100%;object-fit:cover}
.np-img svg{width:34px;height:34px}
.np b{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np-kind{font-size:12px;color:var(--muted)}
.np-new{position:absolute;top:8px;right:8px;background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}

/* the eight tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:16px 16px 14px;text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--green);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.tile-ico{width:44px;height:44px;border-radius:12px;background:var(--green-l);color:var(--green-d);display:grid;place-items:center;margin-bottom:6px}
.tile-ico svg{width:24px;height:24px}
.tile b{font-size:16px}
.tile span{font-size:13px;color:var(--muted);line-height:1.4}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}

.cat-tabs.small a{padding:6px 12px;font-size:13.5px}

/* cross-link to the .org */
.org-link{display:flex;align-items:center;gap:16px;background:var(--green-l);border:2px solid var(--green);border-radius:18px;padding:18px 20px;text-decoration:none;color:var(--ink)}
.org-link b{display:block;font-family:var(--display);font-weight:500;font-size:22px;color:var(--green-d);margin-bottom:2px}
.org-ico{flex:none;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.org-ico svg{width:30px;height:30px}

/* events on the home page */
.ev-list.home{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.ev-list.home .ev-row{grid-template-columns:120px 1fr;padding:14px 16px}
a.ev-row{text-decoration:none;color:inherit;display:grid}
a.ev-row:hover .ev-title{color:var(--green-d)}
.ev-when small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}

/* links list */
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 28px}
.links-group h3{font-family:var(--display);font-weight:500;font-size:17px;margin:6px 0 4px;color:var(--green-d)}
.links-group ul{list-style:none;margin:0;padding:0}
.links-group li a{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);margin-bottom:6px;font-weight:600}
.links-group li a:hover{border-color:var(--green)}
.links-group li a span{color:var(--muted);font-weight:400}

/* video block: bordered, one main + up to three on the right */
/* five on the front page: two in the left column, three in the right */
.vbox{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:18px}
.vmain{display:flex;flex-direction:column;gap:16px}
.vmain .pv-yt,.vs .pv-yt{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;cursor:pointer}
.vmain .pv-yt img,.vs .pv-yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.pv-yt iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}
.vtitle{margin:8px 0 0;font-weight:700;font-size:17px;line-height:1.35}
.vnote{margin:4px 0 0;font-size:15.5px;color:var(--muted)}
.vside{display:flex;flex-direction:column;gap:12px}
.vs .vtitle{font-size:16px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
@media(max-width:820px){.vbox{grid-template-columns:1fr}.vside{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.vs .vtitle{font-size:12.5px}}
@media(max-width:480px){.vside{grid-template-columns:1fr}}

/* honeypot: off-screen for humans; still in the DOM for bots */
.hp-wrap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ==================== .com: mobile pass ==================== */
@media(max-width:640px){
  .list-page .wrap,.hs .wrap{padding-left:14px;padding-right:14px}
  .list-head h1{font-size:25px}
  .list-head .list-cta{width:100%;justify-content:center}
  .hs-head h2{font-size:22px}
  .hs-head h2 span{display:block;margin-top:2px}
  /* tab strips scroll sideways instead of wrapping into a tall block */
  .cat-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .cat-tabs a{flex:none}
  .list-filters input[type=search]{min-width:0;width:100%}
  .list-filters select,.list-filters .btn{flex:1}
  .ls-facts{padding:12px 14px}
  .ls-fact{flex-direction:column;gap:0}
  .ls-fact span{width:auto;font-size:13px}
  .ls-price{font-size:26px}
  .ls-contact{padding:14px}
  .ls-crow{gap:8px}
  .ls-cval{font-size:18px}
  .ls-qr{width:120px;height:120px}
  .org-link{flex-direction:column;text-align:center;padding:16px}
  .ev-list.home{grid-template-columns:1fr}
  .ev-list.home .ev-row{grid-template-columns:1fr;gap:4px}
  .wx .wrap{font-size:13.5px;gap:10px}
  .wx-at{width:100%;margin-left:0}
  .submit-grid .row2{grid-template-columns:1fr}
  .manage-actions{flex-direction:column;align-items:stretch}
  .manage-actions .btn{width:100%;justify-content:center}
  .ok-manage-url{font-size:13px}
}

/* ============================================================================
 * .com HOME — the approved mockup. Colours are the exact values sampled from
 * it: page #31a768, clouds #87cca7, card bands #eaf7ec, the board band and the
 * post button #ffd23f, section titles #0a5a20, prices and event dates #0a7a2e,
 * links #1f5fd0, "New!" #d63b3b, the stories card #e4f4ea.
 * ==========================================================================*/
body.cx{background:#31a768;color:#17281E}
body.cx .topbar,body.cx .cats,body.cx .evbar{display:none}   /* the .org chrome is not used here */

/* decorative clouds */
/* Layering, in one place, because it went wrong twice.
   The clouds are background art at z-index 0. The page's content wrappers sit
   at 1, so they paint over the clouds. The header sits at 50 so that the post
   menu inside it opens over the content, and the language switch at 55.
   Each wrapper is named explicitly — an earlier blanket rule on every child of
   <body> used :not(), whose specificity beat the header's own z-index and
   pinned the header level with the content, so the menu opened behind it. */
.cx-clouds{position:absolute;top:0;right:0;bottom:0;left:0 0 auto 0;height:1100px;overflow:hidden;pointer-events:none;z-index:0}
.cx-main,.cx-foot,
.cx .share-d,.cx .submit-wrap,.cx .manage-wrap,.cx .list-page,.cx .pv-shell,.cx main > .pv-wrap,
.cx main > article{position:relative;z-index:1}
.cx-top{position:relative;z-index:50}
.cx-lang{z-index:55}
.cx .tell-menu-list{z-index:60}
.cx-clouds .cl{position:absolute;background:#87cca7;border-radius:999px;filter:blur(.2px)}
.cx-clouds .cl::before,.cx-clouds .cl::after{content:"";position:absolute;background:#87cca7;border-radius:50%}
.cx-clouds .cl1{width:230px;height:78px;left:-40px;top:150px}
.cx-clouds .cl1::before{width:110px;height:110px;left:30px;top:-46px}
.cx-clouds .cl1::after{width:80px;height:80px;left:120px;top:-30px}
.cx-clouds .cl2{width:190px;height:66px;right:-30px;top:110px}
.cx-clouds .cl2::before{width:96px;height:96px;left:24px;top:-40px}
.cx-clouds .cl2::after{width:70px;height:70px;left:100px;top:-26px}
.cx-clouds .cl3{width:150px;height:52px;left:60px;top:640px;opacity:.85}
.cx-clouds .cl3::before{width:76px;height:76px;left:20px;top:-32px}
.cx-clouds .cl4{width:170px;height:58px;right:40px;top:900px;opacity:.8}
.cx-clouds .cl4::before{width:84px;height:84px;left:22px;top:-36px}
.cx-clouds .cl5{width:210px;height:70px;left:-60px;top:1180px;opacity:.7}
.cx-clouds .cl5::before{width:100px;height:100px;left:30px;top:-42px}
@media(max-width:820px){.cx-clouds .cl3,.cx-clouds .cl4,.cx-clouds .cl5{display:none}}

/* language switch, top-right */
.cx-lang{position:absolute;top:18px;right:18px;display:flex;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.cx-lang a{padding:9px 16px;font-size:17px;font-weight:600;color:#17281E;text-decoration:none}
.cx-lang a.on{background:#eaf7ec;color:#0a5a20}
.cx-lang a+a{border-left:1px solid #e6ece7}

/* wordmark + subtitle */
.cx-top{position:relative;text-align:center;padding:48px 20px 0}
.cx-logo{display:block;line-height:0}
/* the wordmark only (the pale Thai baked into the original art is cropped off;
   the white subtitle below is set in CSS, as in the mockup) */
.cx-logo img{width:min(430px,58vw);height:auto;display:block;margin:0 auto}
.cx-sub{margin:6px 0 0;font-family:var(--display);font-size:clamp(20px,3.2vw,30px);color:#fff;letter-spacing:.06em;line-height:1.2}

/* weather line */
.cx-wx{margin:12px 0 0;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;color:#fff;font-size:17.5px}
.cx-wx-line{opacity:.97}
.cx-aqi{display:inline-flex;align-items:center;gap:8px;background:#4eb37d;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:5px 14px;font-weight:600;font-size:16.5px}
.cx-aqi i{width:11px;height:11px;border-radius:50%;display:inline-block}

/* search + create row */
.cx-tools{margin:16px auto 0;display:flex;gap:12px;justify-content:center;align-items:stretch;flex-wrap:wrap;max-width:1000px}
.cx-search{display:flex;gap:12px;flex:1;min-width:280px;max-width:640px}
.cx-search input{flex:1;border:2.5px solid #111;border-radius:14px;padding:14px 18px;font-size:16.5px;background:#fff;color:#17281E;font-family:inherit}
.cx-searchbtn{border:2.5px solid #111;border-radius:14px;background:#fff;color:#17281E;padding:14px 24px;font-size:16.5px;font-weight:700;cursor:pointer;font-family:inherit;flex:none}
.cx-menu{position:relative;flex:none}
.cx-post{list-style:none;display:inline-flex;align-items:center;gap:9px;background:#C0392B;border:2.5px solid #111;border-radius:14px;padding:14px 22px;font-size:16.5px;font-weight:800;color:#FFEB3B;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.cx-post:hover{background:#A32F23}
/* a slow breath on the create-page button — a small scale and a widening glow,
   never a colour change, so the label stays legible throughout. Pauses while
   the menu is open or the button is hovered, and stops altogether for anyone
   who has asked for reduced motion. */
@keyframes cx-post-pulse{
  0%,70%,100%{transform:scale(1);box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 0 rgba(192,57,43,0)}
  35%{transform:scale(1.028);box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 10px rgba(192,57,43,0)}
  12%{transform:scale(1.028);box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 0 rgba(192,57,43,.45)}
}
.cx-post{animation:cx-post-pulse 3.4s ease-in-out 1.5s infinite;transform-origin:center}
.cx-post:hover,.cx-menu[open] .cx-post{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.cx-post{animation:none}}
.cx-post::-webkit-details-marker{display:none}
.cx-post .plus{font-size:19px;line-height:1}
.cx-menu .tell-menu-list{right:0;top:calc(100% + 10px)}
@media(max-width:820px){.cx-tools{padding:0 4px}.cx-search{min-width:0;width:100%}.cx-menu,.cx-post{width:100%;justify-content:center}
  /* the .com has no sticky header: the menu drops from its button, not from a fixed spot */
  .cx .cx-menu .tell-menu-list{position:absolute;left:0;right:0;top:calc(100% + 8px);min-width:0}}

/* ---- cards: white, rounded, pale-green title band ---- */
.cx-main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:26px 20px 40px}
.cxc{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.10);margin:0 0 22px}
.cxc-band{margin:0;background:#eaf7ec;color:#0a5a20;font-family:var(--display);font-weight:500;font-size:19px;padding:15px 24px}
.cxc-band.yellow{background:#ffd23f;color:#3a2a00;font-weight:700}
.cxc-body{padding:20px 24px 22px}
.cxc-all{margin:16px 0 0;text-align:center;font-weight:700}
.cxc-all a{color:#1f5fd0;text-decoration:none}
.cx-empty{margin:0;color:var(--muted);text-align:center;padding:18px 0}
.cx-note{margin:14px 0 0;font-size:16.5px;color:var(--muted);line-height:1.6}
.cx-note a{color:#1f5fd0;font-weight:700;text-decoration:none}

/* new pages row */
.np-row{display:flex;gap:16px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.cx .np{flex:0 0 118px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#17281E;background:none;border:0;padding:0}
.np-tile{position:relative;width:118px;height:150px;border-radius:14px;overflow:hidden;background:#eaf7ec;border:2px solid #d6efda;display:grid;place-items:center;color:#0a5a20}
.np-tile img{width:100%;height:100%;object-fit:cover}
.np-tile svg{width:44px;height:44px}
.np-pin{position:absolute;top:6px;right:6px;font-size:13px;background:#fff;border-radius:999px;padding:1px 6px}
.np-cap{font-size:15.5px;line-height:1.35;text-align:center;font-weight:600}
.np .np-new,.np-new{display:none}              /* everything in that row is new; .np b outranks a lone class */

/* directory list */
.dir-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px}
.dir-item{display:block;text-decoration:none;color:#17281E;padding:10px 0;border-radius:8px}
.dir-item b{display:block;font-size:17px;margin-bottom:2px}
.dir-item span{display:block;font-size:16px;color:var(--muted);line-height:1.5}
.dir-item:hover b{color:#0a5a20}
@media(max-width:640px){.dir-cols{grid-template-columns:1fr}}

/* notice board rows */
.bd-cats{margin:0 0 14px;font-size:16.5px;line-height:1.9}
.bd-cats a{color:#1f5fd0;text-decoration:none}
.bd-list{display:flex;flex-direction:column}
.bd-row{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid #eef1ec;text-decoration:none;color:#17281E}
.bd-row:first-child{border-top:0}
.bd-img{flex:none;width:74px;height:58px;border-radius:10px;overflow:hidden;background:#eaf7ec;display:grid;place-items:center;color:#0a5a20}
.bd-img img{width:100%;height:100%;object-fit:cover}
.bd-img svg{width:26px;height:26px}
.bd-txt b{display:block;font-size:16px;line-height:1.4}
.bd-txt span{display:block;font-size:16px;color:var(--muted);margin-top:2px}
.bd-price{color:#0a7a2e;font-style:normal;font-weight:800}

/* stories cross-link */
.cx-org{display:flex;align-items:center;gap:22px;background:#e4f4ea;border-radius:18px;padding:16px 20px;margin:0 0 22px;text-decoration:none;color:#17281E;box-shadow:0 6px 22px rgba(0,0,0,.10)}
.cx-org img{flex:none;width:78px;height:78px;object-fit:contain;border-radius:12px;background:#fff;margin-right:6px}
.cx-org span{font-size:17.5px;line-height:1.55;font-weight:600}

/* events mini list */
.ev-mini a{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-top:1px solid #eef1ec;text-decoration:none;color:#17281E}
.ev-mini a:first-child{border-top:0}
.ev-mini b{flex:none;width:64px;color:#0a7a2e;font-weight:800;font-size:17px}
.ev-mini span{font-size:17.5px;line-height:1.45}
.ev-mini a:hover span{color:#0a5a20}

/* online links */
/* the group heading has to read as a heading, not as another link: bold, dark,
   underlined, and tight to the list it introduces */
.lk-h{margin:12px 0 1px;font-family:var(--body);font-weight:800;font-size:15px;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;letter-spacing:.01em;line-height:1.3}
.links-group:first-child .lk-h{margin-top:0}
.lk-list{list-style:none;margin:0;padding:0}
.lk-list li{padding:0;border-top:0}
.lk-list a{color:#1f5fd0;text-decoration:none;font-size:16.5px;line-height:1.3;display:inline-flex;align-items:center;gap:6px;padding:2px 0}
/* this card carries a list, so it does not need the roomy body padding */
.hs-online .cxc-body,#online .cxc-body{padding-top:12px;padding-bottom:14px}
#online .links-grid{gap:6px 28px}
#online .cx-note{margin-top:10px}
.lk-fb,.lk-yt,.lk-ext{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;font-size:13px;font-weight:800;color:#fff}
.lk-fb{background:#1877f2}
.lk-yt{background:#ff0000;font-size:11px}
.lk-ext{background:none;color:var(--muted);font-weight:600}

/* two columns */
.cx-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start}
@media(max-width:900px){.cx-cols{grid-template-columns:1fr}}

/* footer on the green */
.cx-foot{position:relative;z-index:1;text-align:center;color:#eaf6f0;font-size:16px;padding:8px 20px 34px;opacity:.95}

/* ---- the .com inner pages wear the same design as the home page ---- */
/* every page's content becomes a white card on the green, with the pale-green
   title band; the .org's header/rails are not used anywhere on the .com */
.cx .list-page{position:relative;z-index:1}
.cx .list-page > .wrap,
.cx .submit-wrap,
.cx .manage-wrap{max-width:1180px;margin:22px auto 34px;background:#fff;border-radius:20px;box-shadow:0 6px 22px rgba(0,0,0,.10);padding:0 0 24px;overflow:hidden}
/* overflow:hidden makes the panel a scroll container, which disables the
   voice card's position:sticky — clip keeps the rounded-corner clipping
   without breaking sticky (falls back to hidden where unsupported) */
.cx .submit-wrap{overflow:hidden;overflow:clip}
.cx .list-head,
.cx .submit-wrap > h1,
.cx .manage-wrap > h1{margin:0;background:#eaf7ec;padding:16px 24px}
.cx .list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cx .list-head h1,
.cx .submit-wrap > h1,
.cx .manage-wrap > h1{font-family:var(--display);font-weight:500;font-size:22px;color:#0a5a20;margin:0}
.cx .list-head .lead{margin:4px 0 0;color:var(--muted);font-size:16px}
.cx .list-page > .wrap > *:not(.list-head):not(.lc-grid):not(.dir-tiles),
.cx .submit-wrap > *:not(h1),
.cx .manage-wrap > *:not(h1){margin-left:24px;margin-right:24px}
.cx .lc-grid,.cx .dir-tiles,.cx .vgrid{margin:18px 24px 0}
.cx .cat-tabs,.cx .list-filters{margin-left:24px;margin-right:24px}
.cx .cat-tabs{margin-top:16px}
.cx .list-empty{background:transparent;border:0}
.cx .lc,.cx .dir-tile{border-color:#e6ece7}
.cx .lc:hover,.cx .dir-tile:hover{border-color:#31a768}

/* the listing / story page */
.cx .pv-wrap,.cx .pv-hero,.cx .pv-split{position:relative;z-index:1}
.cx main > .pv-wrap,
.cx .pv-shell{max-width:1180px;margin:22px auto 34px;background:#fff;border-radius:20px;box-shadow:0 6px 22px rgba(0,0,0,.10);overflow:hidden}
.cx .pv-txt{padding-left:24px;padding-right:24px}
.cx .ls-report{padding:0 24px 20px}

/* links keep the mockup's blue everywhere on the .com */
/* :not(.on) so an active tab keeps its own white-on-green — this rule's
   specificity was beating the tab rule and painting the label blue */
.cx a:not(.btn):not(.tell-btn):not(.lc):not(.np):not(.dir-item):not(.bd-row):not(.tile):not(.cx-org):not(.cx-logo):not(.on):not(.evr-ribbon):not(.evr-title):not(.dir-cat):not(.rr):not(.btn-contact){color:#1f5fd0}
.cx .cxc-all a,.cx .cx-note a,.cx .lk-list a,.cx .bd-cats a{color:#1f5fd0}
.cx .cat-tabs a{color:#17281E}
.cx .cat-tabs a.on{color:#fff}

@media(max-width:640px){
  .cx .list-page > .wrap,.cx .submit-wrap,.cx .manage-wrap,.cx main > .pv-wrap{border-radius:16px;margin:16px 0 24px}
  .cx .list-head,.cx .submit-wrap > h1,.cx .manage-wrap > h1{padding:14px 16px}
  .cx .list-page > .wrap > *:not(.list-head):not(.lc-grid):not(.dir-tiles),
  .cx .submit-wrap > *:not(h1),.cx .manage-wrap > *:not(h1),
  .cx .cat-tabs,.cx .list-filters{margin-left:16px;margin-right:16px}
  .cx .lc-grid,.cx .dir-tiles,.cx .vgrid{margin:16px}
  .cx .pv-txt{padding-left:18px;padding-right:18px}
}

/* ---------- share row on a listing or story ----------
   Neutral class names on purpose: anything containing "share", "facebook" or
   "social" is matched by blocker filter lists, which is what hid the two
   branded buttons in Firefox-strict.

   Three presentations, by width:
     ≥1100px  a vertical rail floating at the right of the viewport, out of the
              flow — the story runs straight into the photos with nothing
              between, so the row can't be mistaken for the end
     821px–1099px  back in the flow as labelled pills, with the signpost
     ≤820px   a bar fixed to the bottom of the screen, with the signpost
   The signpost names what is still below (photos, video, map). */
.sendrow{margin:22px 0 4px}
.sendrow-h{font-family:var(--display);font-weight:500;font-size:16px;color:var(--muted);margin:0 0 10px}
.sendrow-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sendrow-cap{display:none}
.s-short{display:none}                       /* the full names are the default */
.sx{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:11px 20px;font-size:15.5px;font-weight:700;font-family:inherit;color:#fff;cursor:pointer}
.sx svg{width:19px;height:19px;flex:none}
.sx-a{background:#1877f2}
.sx-a:hover{background:#1465d8}
.sx-b{background:#06C755}
.sx-b:hover{background:#05b04b}
.sx-c{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.sx-c:hover{border-color:var(--green)}
.sx-c.is-done{background:var(--green-l);border-color:var(--green);color:var(--green-d)}

/* the signpost: "8 more photos and a map below" */
.sendrow-more{display:flex;align-items:center;gap:9px;margin:12px 0 0;padding:10px 14px;background:var(--green-l);border-radius:12px;color:var(--green-d);font-weight:700;font-size:15px}
.sendrow-more svg{width:18px;height:18px;flex:none;animation:sendrow-nudge 1.9s ease-in-out infinite}
@keyframes sendrow-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.sendrow-more svg{animation:none}}

/* ---- desktop: the floating rail ----
   Icon-only circles. The names live in aria-label for screen readers, not as
   visible text: a label reading "Share on Facebook" is the last thing left in
   the markup that a blocker's text-matching filter could catch, and that is
   what made the Facebook button vanish while LINE survived. The logos carry
   the meaning. The text column reserves the rail's width so they never
   overlap. */
@media(min-width:1000px){
  .sendrow{margin:0}
  .sendrow-h,.sendrow-more{display:none}          /* nothing interrupts the story */
  .pv-txt{padding-right:110px}                    /* room for the rail */
  .sendrow-btns{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:65;
    flex-direction:column;align-items:center;gap:10px;background:var(--surface);
    border:1.5px solid var(--line);border-radius:999px;padding:12px 9px;
    box-shadow:0 6px 20px rgba(0,0,0,.12)}
  .sendrow-cap{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.03em;margin-bottom:1px}
  .sendrow-btns .sx{width:46px;height:46px;padding:0;border-radius:50%;justify-content:center}
  .sendrow-btns .sx svg{width:20px;height:20px}
  .sendrow-btns .sx span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sendrow-btns .sx-c{background:var(--bg)}
  /* the copy confirmation still says so in words: the button widens for its
     two seconds rather than confirming silently */
  .sendrow-btns .sx-c.is-done{width:auto;padding:0 18px;border-radius:999px;gap:8px}
  .sendrow-btns .sx-c.is-done .s-short{position:static;width:auto;height:auto;clip:auto;display:inline;font-size:14px}
  .sendrow-btns .sx-c.is-done .s-long{display:none}
}

/* ---- phones: the bar fixed to the bottom, and the signpost in the flow ---- */
@media(max-width:820px){
  .sendrow-h{display:none}
  .sendrow{margin:0}
  /* the short labels here: "Share on Facebook" will not fit three across on a
     phone, so each button shows its short name and all three stay equal */
  .s-long{display:none}
  .s-short{display:inline}
  .sendrow-btns{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:8px;
    background:var(--surface);border-top:1.5px solid var(--line);padding:10px calc(10px + env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-right));
    box-shadow:0 -6px 18px rgba(0,0,0,.10)}
  .sendrow-btns .sx{flex:1 1 0;min-width:0;justify-content:center;gap:7px;padding:12px 4px;font-size:14.5px;border-radius:12px;white-space:nowrap}
  .sendrow-btns .sx svg{width:18px;height:18px}
  .sx-c{background:var(--bg)}
  .sendrow-more{margin:18px 0 0}
  .pv-mini,.site-foot{padding-bottom:78px}
}
/* very narrow phones: everything scales down together — all three buttons keep
   their label and stay the same width as each other */
@media(max-width:360px){
  .sendrow-btns{gap:6px;padding-left:8px;padding-right:8px}
  .sendrow-btns .sx{font-size:13px;gap:5px;padding:12px 2px}
  .sendrow-btns .sx svg{width:16px;height:16px}
}

/* the copy button confirms in words: the icon becomes a tick and the label
   reads "คัดลอกแล้ว / Link copied / 已复制" for two seconds */
.sx-c.is-done svg{display:none}
.sx-c.is-done::before{content:'\2713';font-size:17px;font-weight:800;line-height:1}

/* ---------- the new-posts feed: type marks, and the full page ---------- */
.np-ico{display:grid;place-items:center;width:100%;height:100%;color:var(--green-d)}
.np-ico svg{width:38px;height:38px}
.np-badge{position:absolute;left:6px;bottom:6px;width:24px;height:24px;border-radius:7px;
  background:rgba(255,255,255,.94);color:var(--green-d);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.np-badge svg{width:15px;height:15px}
.np-video .np-badge{color:#c4302b}
.np-event .np-badge{color:#4b2a8a}
.np-link  .np-badge{color:#1f5fd0}
.np-pinned .np-tile{border-color:var(--green)}
.np-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:16px}
.np-grid .np{flex:none;width:auto}
.np-grid .np-tile{width:100%;height:auto;aspect-ratio:3/4}
.cx-count{margin:0 0 12px;color:var(--muted);font-size:14.5px}

/* ---------- suggest a video ---------- */
.vsuggest{margin:0 0 4px}
.vsuggest>summary{list-style:none;cursor:pointer;width:100%;justify-content:center;font-size:15px}
.vsuggest>summary::-webkit-details-marker{display:none}
.vsuggest>summary::marker{content:'';font-size:0}
.vsuggest-form{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px;
  background:var(--green-l);border:1.5px solid var(--green);border-radius:12px}
.vsuggest-form label{font-weight:700;font-size:14.5px;color:var(--green-d)}
.vsuggest-form input{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px;background:#fff;color:var(--ink);font-family:inherit}
.vsuggest-form .hint{margin:0;font-size:13.5px}

/* ---------- OpenStreetMap box (moderators only) ---------- */
.osm-box{margin:22px 0 8px;padding:16px 18px;background:#f3f7fb;border:2px solid #b9cfe6;border-radius:14px}
.osm-box h3{margin:0 0 6px;font-family:var(--display);font-weight:500;font-size:19px;color:#1b4f9c}
.osm-mod{font-family:var(--body);font-weight:700;font-size:12px;background:#1b4f9c;color:#fff;border-radius:999px;padding:2px 9px;vertical-align:middle;margin-left:6px}
.osm-box p{margin:0 0 12px;font-size:15px;color:var(--muted);line-height:1.6}
.osm-act{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.osm-tags{margin:0;padding:12px 14px;background:#fff;border:1px solid #cfdcea;border-radius:10px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.7;white-space:pre-wrap;color:#25303a;overflow-x:auto}
@media(max-width:640px){.osm-act .btn{flex:1;justify-content:center}}

/* ============================================================================
 * .com on a phone. The site is read on phones far more than on desktops, so
 * this is a deliberate pass over every page rather than a few patches: the
 * header stacks, the two columns become one, cards lose their wide padding,
 * tap targets grow, and nothing scrolls sideways.
 * ==========================================================================*/
@media(max-width:720px){
  /* ---- header ---- */
  .cx-top{padding:76px 14px 0}                 /* the logo starts below the language switch */
  .cx-lang{top:10px;right:10px;left:auto}
  .cx-lang a{padding:8px 12px;font-size:15px}
  .cx-logo img{width:min(300px,74vw)}
  .cx-sub{font-size:clamp(18px,5.4vw,24px)}
  .cx-wx{font-size:14.5px;gap:8px;flex-direction:column}
  .cx-wx-line{text-align:center;line-height:1.5}
  .cx-tools{margin-top:14px;gap:8px;flex-direction:column}
  .cx-search{order:1;flex-wrap:nowrap;gap:8px;width:100%;max-width:none}
  .cx-search input{flex:0 0 70%;width:auto;min-width:0}
  .cx-searchbtn{flex:1 1 30%;padding:13px 8px}
  .cx-menu{order:2;width:100%}
  .cx-search input{width:100%;font-size:16px;padding:13px 15px}   /* 16px: iOS will not zoom */
  .cx-searchbtn{flex:1;padding:13px 16px;font-size:16px}
  .cx-post{width:100%;justify-content:center;padding:14px 18px;font-size:16px}
  .cx-main{padding:18px 12px 30px}

  /* ---- cards ---- */
  .cxc{border-radius:16px;margin-bottom:16px}
  .cxc-band{font-size:17px;padding:13px 16px;line-height:1.4}
  .cxc-body{padding:16px}
  .cxc-all{font-size:16px}
  .cx-cols{gap:16px}

  /* ---- the new-posts row and page ---- */
  .np-row{gap:12px;padding-bottom:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    margin:0 -16px;padding-left:16px;padding-right:16px}    /* slides across; bleeds to the card edge */
  .np-row .np{scroll-snap-align:start}
  .np{flex:0 0 104px}
  .np-tile{width:104px;height:132px}
  .np-cap{font-size:13px}
  .np-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}

  /* ---- directory list ---- */
  .dir-item{padding:12px 0;border-bottom:1px solid #eef1ec}
  .dir-item:last-child{border-bottom:0}
  .dir-item b{font-size:17px}
  .dir-item span{font-size:15px}

  /* ---- notice board rows ---- */
  .bd-cats{font-size:15.5px;line-height:2}
  .bd-row{padding:12px 0}
  .bd-img{width:64px;height:52px}
  .bd-txt b{font-size:16px}
  .bd-txt span{font-size:14.5px}

  /* ---- events, links, the stories card ---- */
  .ev-mini a{padding:11px 0}
  .ev-mini b{width:56px;font-size:16px}
  .ev-mini span{font-size:16px}
  .cx-org{padding:16px 18px;gap:20px}
  .cx-org img{width:64px;height:64px;flex:none}
  .cx-org span{font-size:16px}
  .lk-list a{font-size:17px;padding:6px 0}     /* a comfortable tap target */

  /* ---- videos ---- */
  .vbox{padding:12px;gap:12px}
  .vmain{gap:12px}
  .vside{display:flex !important;flex-direction:column;gap:12px}   /* the 820px grid rule would otherwise win */
  .vside .vsuggest{order:99;margin-top:4px}    /* the button goes after the videos */
  .vsuggest>summary{padding:13px;font-size:16px}

  /* ---- list pages (board, directory, events, videos, search, new) ---- */
  .cx .list-page > .wrap,.cx .submit-wrap,.cx .manage-wrap{margin:14px 0 24px;border-radius:16px}
  .cx .list-head{padding:14px 16px}
  .cx .list-head h1{font-size:22px}
  .cx .list-head .lead{font-size:15.5px}
  .cx .list-cta{width:100%;justify-content:center;padding:13px;font-size:16px}
  .cat-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none}
  .cat-tabs::-webkit-scrollbar{display:none}
  .cat-tabs a{flex:none;font-size:15px;padding:9px 15px}
  .list-filters{gap:8px}
  .list-filters input[type=search]{width:100%;font-size:16px}
  .list-filters select,.list-filters .btn{flex:1;font-size:16px;padding:12px}
  .lc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .dir-tiles{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}

  /* ---- the post form ---- */
  .submit-grid label{font-size:16.5px}
  .submit-grid input,.submit-grid select,.submit-grid textarea{font-size:16px}
  .contact-card,.mp-card{padding:14px}
  .btn-submit{font-size:18px;padding:16px}

  /* ---- footer ---- */
  .cx-foot{font-size:14.5px;padding:6px 14px 26px;line-height:1.6}
}

@media(max-width:420px){
  .cx-top{padding-top:72px}
  .cx-logo img{width:82vw}
  .np{flex:0 0 92px}
  .np-tile{width:92px;height:118px}
  .lc-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cxc-body{padding:14px}
}

/* ---------- search results: one per line ---------- */
.rr-list{display:flex;flex-direction:column}
.rr{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid #eef1ec;text-decoration:none;color:var(--ink)}
.rr:first-child{border-top:0}
.rr:hover h3{color:var(--green-d)}
.rr-txt{flex:1;min-width:0}
.rr-txt h3{margin:0 0 4px;font-size:21px;line-height:1.32;font-weight:700}
.rr-price{color:var(--red);font-style:normal;font-weight:800}
.rr-meta{margin:0 0 7px;font-size:15px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.rr-kind{color:var(--green-d);font-weight:700}
.rr-body{margin:0;font-size:17px;line-height:1.6;color:#2c3b31}
.rr-pics{flex:none;display:grid;grid-template-columns:repeat(4,100px);gap:8px}
.rr-pics img{width:100px;height:100px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block}
@media(max-width:720px){
  .rr{flex-direction:column;gap:10px;padding:14px 0}
  .rr-pics{grid-template-columns:repeat(4,1fr);width:100%;gap:6px}
  .rr-pics img{width:100%;height:80px}
  .rr-txt h3{font-size:18.5px}
  .rr-body{font-size:16px}
}

/* ---------- the events box: category links and the past divider ---------- */
.cxc-sub{font-family:var(--body);font-weight:400;font-size:15px;color:var(--muted)}
.bd-cats a.on{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.ev-sep{margin:12px 0 4px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ev-mini a.is-past b{color:var(--muted)}
.ev-mini a.is-past{opacity:.75}

/* ---------- the events box: thumbnail, date, name ---------- */
.ev-mini a{display:grid;grid-template-columns:44px auto 1fr;gap:12px;align-items:center}
.ev-mini b{white-space:nowrap;width:auto}
.ev-thumb{width:44px;height:44px;border-radius:9px;overflow:hidden;background:var(--green-l);
  color:var(--green-d);display:grid;place-items:center;flex:none}
.ev-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ev-thumb svg{width:20px;height:20px}
.ev-mini .ev-name{font-size:16px;line-height:1.35}
.ev-x{font-style:normal;color:var(--muted)}
@media(max-width:720px){
  .ev-mini a{grid-template-columns:40px 1fr;gap:10px;row-gap:2px;padding:10px 0}
  .ev-thumb{width:40px;height:40px;grid-row:span 2}
  .ev-mini b{width:auto;font-size:14.5px}
  .ev-mini .ev-name{font-size:15.5px}
}

/* ---------- the อีแต๋น along the bottom of the page ----------
   Pure CSS: the truck crosses the screen on a loop, the wheels turn, the body
   bounces on the road and the exhaust puffs. Anyone who has asked their device
   for reduced motion gets it parked, still, at the left. */
.etaen-road{position:relative;z-index:1;height:150px;overflow:hidden;pointer-events:none;margin-top:6px}
.etaen-road::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 40px,transparent 40px 70px)}
.etaen{position:absolute;bottom:-8px;left:0;width:360px;height:172px;z-index:1;
  animation:et-drive 36s linear infinite;will-change:transform}   /* above the road line */
.etaen-road::after{z-index:0}
.etaen svg{display:block;width:360px;height:172px}
/* it faces left, so it drives right-to-left and the wheels turn anticlockwise */
.et-wheel{animation:et-spin .7s linear infinite reverse}
.et-smoke circle{fill:rgba(255,255,255,.55);animation:et-puff 1.6s ease-out infinite}
.et-smoke circle:nth-child(2){animation-delay:.5s}
.et-smoke circle:nth-child(3){animation-delay:1s}
@keyframes et-drive{from{transform:translateX(calc(100vw + 40px))}to{transform:translateX(-400px)}}
@keyframes et-spin{to{transform:rotate(360deg)}}
@keyframes et-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes et-puff{0%{opacity:.7;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(14px,-26px) scale(1.5)}}
@media(max-width:720px){
  .etaen-road{display:none}                    /* phones: the animation does not render reliably */
}
@media(prefers-reduced-motion:reduce){
  .etaen,.et-wheel,.et-smoke circle{animation:none}
  .etaen{left:auto;right:16px;transform:none}
  .et-smoke{display:none}
}

/* the three "add yours" buttons at the head of the directory, notice board
   and events pages are the site's main calls to action — red, like Submit */
.cx .list-cta{background:var(--red);border-color:var(--red);color:#fff}
.cx .list-cta:hover{background:var(--red-d,#c62f3a);border-color:var(--red-d,#c62f3a)}

/* ---------- the location card: link or map ---------- */
.loc-choice{display:flex;gap:8px;margin:0 0 12px}
.loc-tab{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 10px;
  font-size:15px;font-weight:700;font-family:inherit;color:var(--ink);cursor:pointer}
.loc-tab.on{background:var(--green);border-color:var(--green);color:#fff}
.loc-pane[hidden]{display:none}
#map_url_hint.ok{color:var(--green-d);font-weight:700}
#map_url_hint.err{color:var(--red);font-weight:600}

/* ---------- the directory card: categories, sub-categories, direct pages ---------- */
.dir-item{padding:10px 0;border-bottom:1px solid #eef1ec}
.dir-item:last-child{border-bottom:0}
.dir-cat{display:inline-block;font-size:17px;font-weight:800;color:var(--ink);text-decoration:none}
.dir-cat em{font-style:normal;font-weight:600;font-size:13px;color:var(--muted);margin-left:4px}
.dir-cat:hover{color:var(--green-d)}
.dir-subs{display:block;margin-top:3px;font-size:15px;line-height:1.7;color:var(--muted)}
.dir-subs a{color:#1f5fd0;text-decoration:none}
.dir-subs a+a::before{content:" · ";color:var(--line)}
.dir-subs .dir-page{color:var(--ink)}

/* ---------- the events page: one row per event, "date ribbon" ---------- */
.evr-list{display:flex;flex-direction:column;margin-top:14px}
.evr{display:grid;grid-template-columns:62px 1fr;gap:16px;padding:16px 0;border-top:1px solid #eef1ec}
.evr:first-child{border-top:0}
.evr-ribbon{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:var(--green-d);color:#fff;border-radius:12px;padding:12px 4px;text-decoration:none;align-self:stretch}
.evr-ribbon b{font-size:28px;line-height:1;font-weight:800}
.evr-ribbon span{font-size:12.5px;font-weight:700;margin-top:3px}
.evr-ribbon small{font-size:11px;opacity:.85;margin-top:6px}
.evr.is-past .evr-ribbon{background:#8fb8a0}
.evr.is-past{opacity:.85}
.evr-body{min-width:0}
.evr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 2px}
.evr-head h3{margin:0;font-size:19px;line-height:1.35;font-weight:700}
.evr-head h3 a.evr-title{color:var(--ink);text-decoration:none}
.evr-head h3 a.evr-title:hover{color:var(--green-d)}
.evr-cat{flex:none;background:var(--green-l);color:var(--green-d);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.evr-meta{margin:0 0 6px;font-size:14.5px;color:var(--muted)}
.evr-meta .evr-past{font-weight:700}
.evr-text{margin:0 0 10px;font-size:15.5px;line-height:1.6;color:#2c3b31}
.evr-strip{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scroll-snap-type:x proximity;scrollbar-width:thin}
.evr-strip a{flex:0 0 128px;scroll-snap-align:start}
.evr-strip img{width:128px;height:88px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
@media(max-width:720px){
  .evr{grid-template-columns:50px 1fr;gap:12px;padding:14px 0}
  .evr-ribbon{padding:10px 2px;border-radius:10px}
  .evr-ribbon b{font-size:22px}
  .evr-head h3{font-size:17px}
  .evr-strip{margin-right:-16px;padding-right:16px}    /* bleeds to the card edge so the last photo peeks */
  .evr-strip a{flex:0 0 112px}
  .evr-strip img{width:112px;height:78px}
}

/* ---------- photos of an event from other people ---------- */
.pv-contrib{margin:18px 0 0;padding:16px 18px 8px;background:#f2f7f3;border-top:3px solid var(--green-l)}
.pv-contrib h2{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:19px;color:var(--green-d)}
.pv-gal-contrib{padding:0}
.pv-addphotos{padding:18px 0 6px}
.addph>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.addph>summary::-webkit-details-marker{display:none}
.addph>summary::marker{content:'';font-size:0}
.addph-form{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:16px;max-width:520px;
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px}
.addph-form label{font-weight:700;font-size:15px}
.addph-form input[type=text]{border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font-size:16px;font-family:inherit}
.addph-form input[type=file]{font-size:15px}
.addph-form .hint{margin:4px 0 0}
.btn-red{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
.btn-red:hover{background:var(--red-d,#c62f3a)!important;border-color:var(--red-d,#c62f3a)!important}

/* ---------- editing your post: the kept-photo grid ---------- */
.keep-card{margin-bottom:14px}
.keep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.keep-ph{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid var(--line);cursor:pointer}
.keep-ph img{width:100%;height:100%;object-fit:cover;display:block}
.keep-ph input{position:absolute;opacity:0;width:1px;height:1px}
.keep-ph span{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:800}
.keep-ph:has(input:not(:checked)){opacity:.4;border-color:var(--red)}
.keep-ph:has(input:not(:checked)) span{background:var(--red);content:'×'}
.edit-wrap{margin-top:10px}

/* ---------- the queue: an edit or a contribution says what it is ---------- */
.edit-chip{background:#e8f0ff;color:#1b4f9c;border-radius:999px;padding:2px 9px;font-size:12.5px;font-weight:700}

/* the main photo in the keep grid */
.keep-ph.is-lead{border-color:var(--green)}
.keep-ph.is-lead::after{content:'Main';position:absolute;left:6px;bottom:6px;background:var(--green);color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px}

/* editing: the current main photo, shown in the Main photo card */
.lead-now{display:flex;align-items:center;gap:14px;margin:10px 0 14px;padding:12px;background:var(--surface);border:2px solid var(--green);border-radius:12px}
.lead-now img{width:96px;height:96px;object-fit:cover;border-radius:10px;flex:none}
.lead-now strong{font-size:16px;color:var(--green-d)}

/* imported from OpenStreetMap: the attribution the licence asks for */
.osm-credit{margin:14px 0 0;font-size:13px;color:var(--muted)}
.osm-credit a{color:var(--muted)}

/* directory card: pages filed directly under a category, one per line */
.dir-pages{list-style:none;margin:4px 0 0;padding:0}
.dir-pages li{padding:3px 0 3px 14px;position:relative;font-size:15.5px;line-height:1.45}
.dir-pages li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--green)}
.dir-pages a{color:#1f5fd0;text-decoration:none}
.dir-pages a:hover{text-decoration:underline}

/* ---------- listing pages: no story furniture ---------- */
.pv-railfall-listing{background:linear-gradient(160deg,var(--green-l),#cfe9d8);color:var(--green-d);display:grid;place-items:center}
.pv-railfall-listing svg{opacity:.55;width:72px;height:72px;position:static}
.pv-endrow-listing{justify-content:flex-end}
.cx .pv-more{background:#eaf7ec;color:var(--ink)}
.cx .pv-more h3{color:var(--green-d)}
.cx .pv-mc{background:var(--surface);color:var(--ink)}
.cx .pv-mc .pv-mcb b{color:var(--ink)}
.pv-mcglyph{display:grid;place-items:center;background:var(--green-l);color:var(--green-d)}
/* a listing with no photo: a short tile, not a full-height column */
/* the rail's children are absolutely positioned, so the rail itself needs a height */
.pv-rail:has(.pv-railfall-listing){height:220px;min-height:220px}
@media(max-width:720px){.pv-rail:has(.pv-railfall-listing){height:150px;min-height:150px}}

/* ---------- the map of everything ---------- */
.allmap{height:min(72vh,640px);border-radius:16px;border:1.5px solid var(--line);overflow:hidden;background:#e9efe9}
/* the map's view switch: one joined bar, a single choice */
.map-views.seg{display:inline-flex;border:1.5px solid var(--green-d);border-radius:12px;overflow:hidden;margin:0;max-width:100%}
.map-views.seg button{font:inherit;font-size:15px;font-weight:700;padding:11px 18px;border:0;border-left:1.5px solid var(--green-d);background:#fff;color:var(--green-d);cursor:pointer;white-space:nowrap}
.map-views.seg button:first-child{border-left:0}
.map-views.seg button.on{background:var(--green-d);color:#fff}
.map-views.seg button.on .mv-n{opacity:.85}
@media(max-width:720px){.map-views.seg{display:flex}.map-views.seg button{flex:1;padding:10px 6px;font-size:13.5px;white-space:normal}}
.mv-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.mv-story{background:#1f7a49}.mv-place{background:#c20d84}
.mv-n{opacity:.7;font-weight:600;margin-left:2px}
.pin-pop{font-family:var(--body);font-size:14px;line-height:1.4;min-width:180px}
.pin-pop img{width:100%;height:120px;object-fit:cover;border-radius:8px;display:block;margin:0 0 8px}
.pin-pop b{font-size:15px;display:block}
.pin-cat,.pin-addr{color:var(--muted);font-size:13px}
.pin-pop a{display:inline-block;margin-top:6px;font-weight:700;color:#1f5fd0}
@media(max-width:720px){.allmap{height:62vh}}

.cxc-band-link{float:right;font-family:var(--body);font-weight:700;font-size:14px;color:#1f5fd0;text-decoration:none}
.list-map{margin-right:8px}

.allmap-home{height:420px}
@media(max-width:720px){.allmap-home{height:340px}}
.cxc-map .cat-tabs{margin:0 0 12px}

/* the submit button carrying the reason it did not send */
.btn-submit.is-error{background:#b3261e;color:#fff;animation:none}

/* the private-contact button above the footer, on every page */
.foot-contact{position:relative;z-index:1;margin:0 0 14px;text-align:center}
.btn-contact{display:inline-block;padding:14px 22px;border:2px solid #fff;border-radius:6px;background:transparent;color:#fff;font-weight:700;font-size:16px;text-decoration:none}
.btn-contact:hover{background:#fff;color:var(--green-d)}
.submit-single{grid-template-columns:1fr;max-width:720px}
.submit-single .vr-card{margin:8px 0 18px}

/* the flyer card in Links */
.pv-lc.pdf{background:#c20d84;border-color:#c20d84;color:#fff}
.pv-lc.pdf .pv-ic{background:rgba(255,255,255,.18);color:#fff}
.pv-lc.pdf b,.pv-lc.pdf .pv-host{color:#fff}
.pv-lc.pdf:hover{filter:brightness(.93)}

/* ---------- inner pages: a white column on the green (F) ----------
   The page stays green with the same header as the home page; the content
   sits in one white sheet with green margins either side, full width on
   phones. The home page is unaffected: its column is transparent. */
body.cx:not(.cx-home) .cx-col{max-width:1180px;margin:40px auto 0;padding:0 24px}
body.cx:not(.cx-home) .cx-colin{background:#fff;border-radius:18px 18px 0 0;padding:8px 0 24px;min-height:40vh;box-shadow:0 -6px 24px rgba(0,0,0,.08)}
body.cx:not(.cx-home) .cx-colin .list-page{padding-top:8px}
body.cx:not(.cx-home) .cx-colin .list-page > .wrap{margin-top:0}
body.cx:not(.cx-home) .pv-split{margin-top:0}
body.cx:not(.cx-home) .pv{border-radius:18px 18px 0 0;overflow:hidden}
body.cx:not(.cx-home) .cx-footband{margin-top:0;padding-top:8px}
@media(max-width:720px){body.cx:not(.cx-home) .cx-col{padding:0;margin-top:20px} body.cx:not(.cx-home) .cx-colin{border-radius:0}}
/* the Directions pill on a listing: white text on green */
.dir-btn{color:#fff!important}
/* 1) the contact button: white, gold on hover — and never painted blue by the link rule */
.btn-contact{background:#fff;border-color:#fff;color:var(--green-d)}
.btn-contact:hover{background:var(--yellow,#ffd23f);border-color:var(--yellow,#ffd23f);color:var(--ink)}
/* 4) the strip's See all, larger */
.cx .pv-allbtn{font-size:17px;padding:10px 18px}

/* the Map / Satellite switch in the map's corner */
.base-switch{display:inline-flex;border:1.5px solid var(--green-d);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.base-switch button{font:inherit;font-size:13.5px;font-weight:700;padding:7px 12px;border:0;border-left:1.5px solid var(--green-d);background:#fff;color:var(--green-d);cursor:pointer}
.base-switch button:first-child{border-left:0}
.base-switch button.on{background:var(--green-d);color:#fff}

/* the map's teardrop pins */
.pin-drop{background:none;border:0}
.pin-drop svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}

/* the third segment: Nearby is a separate switch, so it wears the site's yellow when on */
.base-switch button.near{color:var(--ink)}
.base-switch button.near.on{background:var(--yellow,#ffd23f);color:var(--ink)}
.base-switch button.near[disabled]{opacity:.6}
.pin-other svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}

/* the location picker: square, so a village block fills it rather than a strip */
.mapbox.pickmap-square{width:100%;height:700px;max-height:80vh}
@media(max-width:720px){.mapbox.pickmap-square{height:420px}}
/* the headphone badge sits outside the pin's box; keep it from being clipped */
.pin-drop.has-audio svg{overflow:visible}

/* the location fields, folded into one line once a pin is placed */
.loc-set{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0;padding:12px 14px;background:var(--green-l);border:1.5px solid #cfe9d8;border-radius:12px;font-size:16px;font-weight:700;color:var(--green-d)}
.loc-set b{font-weight:600;color:var(--ink);margin-left:6px}
.loc-set-edit{font:inherit;font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;border:1.5px solid var(--green-d);background:#fff;color:var(--green-d);cursor:pointer}
.loc-set[hidden],.loc-fields[hidden]{display:none}

/* the row above the map: the view switch left, "+ Add yours (free)" right */
.map-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 12px}
.map-add{position:relative;z-index:1100}   /* above Leaflet's panes (400) and controls (1000) */
.map-add-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:12px;background:var(--green-d);color:#fff;font-weight:800;font-size:15px;white-space:nowrap}
.map-add-btn::-webkit-details-marker{display:none}
.map-add-btn:hover{filter:brightness(1.08)}
.map-add-list{position:absolute;right:0;top:calc(100% + 8px);z-index:1100;min-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:6px}
.map-add-list a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--ink)}
.map-add-list a:hover{background:var(--green-l)}
.map-add-list a b{display:block;font-size:16px;color:var(--ink)}
.map-add-list a span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
@media(max-width:720px){.map-row{flex-direction:column;align-items:stretch}.map-add{width:100%}.map-add-btn{width:100%;justify-content:center;box-sizing:border-box}.map-add-list{left:0;right:0}}


/* ============ Community Ideas (💡) ============ */
.cxc-band.band-idea{background:#fff3cf;color:#6a4d00}
.id-spot{border:1.5px solid #f2c7e6;border-radius:14px;overflow:hidden;margin-bottom:6px}
.id-bphoto{display:block;position:relative;height:150px;background:linear-gradient(160deg,#7ec8a0,#3f9d6b 55%,#2b6b4a)}
.id-bphoto img{width:100%;height:100%;object-fit:cover;display:block}
.id-bphoto.fall{display:grid;place-items:center;font-size:52px;text-decoration:none}
.id-tag{position:absolute;top:10px;left:10px;background:#c20d84;color:#fff;font-size:12.5px;font-weight:800;border-radius:99px;padding:3px 11px}
.id-binfo{display:flex;gap:12px;align-items:center;padding:10px 12px;background:#fdf2fa}
.id-list{display:flex;flex-direction:column}
.id-row{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid #eef1ec}
.id-row:first-child{border-top:0}
.id-list-page .id-row{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px;border-top:1.5px solid var(--line)}
.id-ph{flex:none;width:78px;height:78px;border-radius:12px;overflow:hidden;background:#eaf7ec;display:grid;place-items:center;text-decoration:none}
.id-ph img{width:100%;height:100%;object-fit:cover;display:block}
.id-fall{font-size:32px}
.id-txt{min-width:0;flex:1;text-decoration:none;color:var(--ink)}
.id-txt b{display:block;font-size:16px;line-height:1.4}
.id-meter{display:block;height:8px;border-radius:99px;background:#f0d5d5;margin-top:6px;overflow:hidden;max-width:270px}
.id-meter[data-empty]{background:#eceee9}
.id-meter i{display:block;height:100%;background:var(--green)}
.id-mrow{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.id-chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;border-radius:99px;padding:2px 10px;vertical-align:2px;margin-left:6px;white-space:nowrap}
.id-chip.prog{background:#fff3cf;color:#6a4d00;border:1px solid #f0dfa0}
.id-chip.done{background:#e4f4ea;color:#0a5a20;border:1px solid #bfe4cd}
.id-up{flex:none;border:1.5px solid #cfe9d8;background:#f2faf5;color:#0a5a20;border-radius:99px;padding:7px 13px;font-weight:800;font-size:15px;cursor:pointer;display:flex;gap:6px;align-items:center;font-family:inherit;position:relative}
.id-up.on,.id-up:disabled.on{background:var(--green);border-color:var(--green);color:#fff}
.id-up:disabled{cursor:default;opacity:.9}
.id-plus1{position:absolute;top:-6px;right:6px;font-weight:800;color:var(--green-d);font-size:15px;pointer-events:none;opacity:0}
.id-up.bump .id-plus1{animation:id-rise .9s ease-out}
@keyframes id-rise{0%{opacity:0;transform:translateY(2px)}15%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
@media (prefers-reduced-motion: reduce){.id-up.bump .id-plus1{animation:none}}
.id-sbox{display:flex;gap:8px;margin-top:16px}
.id-sbox input[type=text]{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;font:inherit;font-size:15.5px;background:#fbfaf6;min-width:0}
.id-sbox button{border:0;background:var(--green);color:#fff;font-weight:800;font-size:15.5px;border-radius:12px;padding:10px 20px;cursor:pointer;font-family:inherit;flex:none}
/* the idea page's vote strip */
.id-strip{margin:18px 0 6px}
.id-strip-row{display:flex;align-items:center;gap:14px;background:#f2faf5;border:1.5px solid #cfe9d8;border-radius:14px;padding:12px 16px;flex-wrap:wrap}
.id-strip-row .id-up{font-size:16px;padding:9px 18px}
.id-who{font-weight:800;color:#0a5a20;font-size:17px}
.id-strip-row .id-meter{flex:1;max-width:none;min-width:120px;margin-top:0}
.id-strip-row .id-mrow{display:none}
.id-dn{font-size:13.5px;color:var(--muted);margin:8px 2px 0}
.id-dn .id-down{border:0;background:none;color:#9aa596;cursor:pointer;font:inherit;text-decoration:underline;padding:0}
.id-dn .id-down:disabled{cursor:default;text-decoration:none}
/* the map's idea segment dot */
.mv-dot.mv-idea{background:#a8d4f2}

/* related posts under the body */
.rel-wrap{margin:22px 0 6px;padding-top:16px;border-top:1px solid var(--line,#E5E1D6)}
.rel-head{font-family:var(--display,inherit);font-weight:500;font-size:18px;margin:0 0 10px}
.rel-list{display:flex;flex-direction:column;gap:12px}
.rel-item{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit}
.rel-ph{flex:none;width:88px;height:66px;border-radius:10px;overflow:hidden;background:#eaf7ec;display:grid;place-items:center}
.rel-ph img{width:100%;height:100%;object-fit:cover;display:block}
.rel-fall{width:26px;height:26px;border-radius:50%;background:#cfe4d4;display:block}
.rel-txt{min-width:0}
.rel-txt b{display:block;font-size:16px;line-height:1.4}
.rel-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;color:var(--muted,#63705F);margin-top:2px}
@media(max-width:520px){.rel-ph{width:70px;height:54px}}

/* the Record card: video or voice */
.vr-choice{display:flex;gap:8px;margin:0 0 12px}
.vr-tab{flex:1;border:1.5px solid var(--line);background:var(--surface,#fff);border-radius:12px;padding:11px 10px;font-size:15px;font-weight:700;font-family:inherit;color:var(--ink);cursor:pointer}
.vr-tab.on{background:var(--green);border-color:var(--green);color:#fff}
.vr-pane[hidden]{display:none}
.vr-hint{font-size:14px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.vr-note{font-size:15px;color:var(--muted);line-height:1.6;margin:6px 0 10px}
.vr-live{position:relative;border-radius:14px;overflow:hidden;background:#12211a;margin-bottom:12px}
.vr-preview{display:block;width:100%;max-height:280px;object-fit:cover;background:#12211a}
.vr-count{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700;border-radius:99px;padding:3px 10px;font-variant-numeric:tabular-nums}
.vr-stage.ending .vr10-t1{color:#ef3e4a}
.vr-stage.ending .vr-count{background:#ef3e4a}
.vr-playback{display:block;width:100%;max-height:280px;border-radius:12px;background:#12211a;margin:10px 0 6px}
.vr-saved-meta{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:10px}
.vr10.vid .vr10-circle{background:#ef3e4a}
.pv-video-lead{display:block;width:100%;max-height:460px;border-radius:14px;background:#12211a;margin:0 0 14px}

/* a link card's address is one line, ellipsised rather than wrapped, and the
   PDF card's longer wording gets normal line spacing instead of the loose
   leading it inherited from the host line */
.pv-lc .pv-host{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45}
.pv-lc b{display:block;line-height:1.35}
/* the PDF card carries a sentence rather than a short label, so it may run to
   two or three lines and must not be forced onto one */
.pv-lc.pdf{align-items:flex-start}
.pv-lc.pdf .pv-host{white-space:normal;overflow:visible;text-overflow:clip}

/* the private link and its Copy button */
.ok-manage-row{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.ok-manage-row .ok-manage-url{flex:1;min-width:0}
.ok-copy{flex:none;white-space:nowrap;cursor:pointer}
.ok-copy.is-copied{background:var(--green-d,#1f7a49);border-color:var(--green-d,#1f7a49);color:#fff}
@media(max-width:520px){.ok-manage-row{flex-direction:column}}