: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}
/* the author sits at the left, the category chips at the right of the same
   row; the chips wrap under only when the card is too narrow for both */
.meta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-top:2px;flex-wrap:wrap}
.meta-tags{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.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:0;background:none;font-size:28px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 10px}
.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}
/* the mark is white and a size larger; a triangle's weight sits right of its box,
   so it is nudged 3px to read as centred — 2px on phones */
.pv-pp::before{content:'';border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:4px}
.pv-player.playing .pv-pp::before{border-style:double;border-width:0 0 0 14px;height:17px;margin-left:0}
@media(max-width:720px){.pv-pp{width:40px;height:40px}.pv-pp::before{border-width:8px 0 8px 13px;margin-left:3px}}
.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)}
.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}

/* events page rows are links to the event's page (on the .com) */
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}
.head-row .btn{margin-left:auto}

/* ---------- audio on story cards: the photo is the player (D2) ---------- */
.media .aud-shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(23,40,30,.62),rgba(23,40,30,0) 55%);pointer-events:none}
.media .bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.96);color:#4a1544;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:2;transition:transform .15s}
.media .bigplay svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
a.card:hover .bigplay{transform:translate(-50%,-50%) scale(1.06)}
.media .wave{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:flex-end;gap:3px;height:28px;z-index:2;pointer-events:none}
.media .wave i{flex:1;background:var(--pink);border-radius:2px;opacity:.95}
.media .wave-lbl{position:absolute;right:14px;bottom:46px;color:#fff;font-weight:800;font-size:14px;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none}
@media(max-width:640px){.media .bigplay{width:76px;height:76px}.media .bigplay svg{width:34px;height:34px}.media .wave-lbl{font-size:15px}}

/* the story page player pulses for two seconds when arrived at via a card's play button */
.pv-player.pv-pulse{animation:pv-pulse 1s ease-in-out 2}
@keyframes pv-pulse{0%,100%{box-shadow:0 0 0 0 rgba(250,151,241,0);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(250,151,241,.55);transform:scale(1.03);border-color:var(--pink)}}
@media(prefers-reduced-motion:reduce){.pv-player.pv-pulse{animation:none;box-shadow:0 0 0 6px rgba(250,151,241,.55)}}

/* ---------- share row on a 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 confirmed state, wherever the button is: a tick replaces the icon and the
   label reads "คัดลอกแล้ว / Link copied / 已复制" for two seconds. At the icon-only
   rail the button widens for those two seconds so the words are readable
   there too — the confirmation is never silent. */
.sx-c.is-done svg{display:none}
.sx-c.is-done::before{content:'✓';font-size:17px;font-weight:800;line-height:1}

/* ---------- 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}
.manage-wrap{max-width:900px;margin:0 auto;padding:24px 20px 40px}
.ok-manage{margin:14px 0 0;padding:14px;background:var(--green-l);border-radius:12px}
.ok-manage-url{width:100%;margin-top:8px;padding:10px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;font-family:ui-monospace,monospace}

/* 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)}

/* arriving from the flyer's QR with sound refused: keep the player pulsing and say what to do */
.pv-taphint{display:inline-block;margin:8px 0 0;padding:8px 14px;border-radius:999px;background:var(--red);color:#fff;font-weight:800;font-size:15px;cursor:pointer;animation:pv-pulse 1.4s ease-in-out infinite}

/* the flyer card in Links: it is the one to notice */
.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 .pv-host{opacity:.9}
.pv-lc.pdf:hover{filter:brightness(.93)}

/* the private-contact button in the footer: square, plain, on every page */
.foot-contact{margin:0 0 18px;text-align:center}
.btn-contact{display:inline-block;padding:14px 22px;border:2px solid var(--green);border-radius:6px;background:var(--surface);color:var(--green-d);font-weight:700;font-size:16px;text-decoration:none}
.btn-contact:hover{background:var(--green);color:#fff}

/* ---------- 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 contact form: one column, the voice card in the flow */
.submit-single{grid-template-columns:1fr;max-width:720px}
.submit-single .vr-card{margin:8px 0 18px}

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

/* ---------- maps: the Satellite / Map switch, the pin, the square picker ---------- */
.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}
.pin-drop{background:none;border:0}
.pin-drop svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
/* the share form's picker: square, the width of its column */
.mapbox.pickmap-square{aspect-ratio:1/1;height:auto;min-height:260px;max-height:none;width:100%}
@supports not (aspect-ratio:1/1){.mapbox.pickmap-square{height:420px}}

/* 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}

/* under the categories: two thin underlined links to the .com */
.cat-links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:14px 20px 4px}
.cat-links a{display:inline-flex;align-items:center;gap:7px;padding:6px 2px;color:var(--green-d);font-weight:700;font-size:15px;text-decoration:none;border-bottom:2.5px solid var(--green)}
.cat-links a:hover{border-bottom-color:var(--green-d)}
@media(max-width:720px){.cat-links{flex-direction:column;align-items:center;gap:10px;padding-top:10px}}

.pin-drop.has-audio svg{overflow:visible}

/* the "New!" tag on the portal link */
.cat-links .new-tag{display:inline-block;background:var(--red,#e63946);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:999px;text-transform:uppercase;line-height:1.5}

/* the storyteller's name repeated directly under the story text, where the
   reader finishes reading — the end-row byline stays as it was */
.pv-byline-story{margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--line,#E5E1D6)}

/* 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-your-story 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);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}

/* a recorded video plays above the story text, like the voice player */
.pv-video-lead{display:block;width:100%;max-height:460px;border-radius:14px;background:#12211a;margin:0 0 14px}
/* a video card with no cover photo uses the clip's own first frame */
.media .vidposter{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.media .wave-lbl.vid-lbl{bottom: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}}