/* นำบุญ — Design C "Bold" (neo-brutalist, warm) */
:root {
  --bg: #fffdf6;
  --ink: #241a10;
  --ink-soft: #4a3416;
  --brown: #6b5638;
  --tan: #d8cbb4;
  --sand: #f2ede0;
  --orange: #ff8a1e;
  --orange-deep: #c14d00;
  --orange-dark: #8f3900;
  --yellow: #ffc93d;
  --yellow-soft: #fff3c4;
  --peach: #ffe9d1;
  --green: #178a44;
  --green-deep: #0f6b32;
  --green-bright: #35c06c;
  --mint: #d9f2e2;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans Thai", "Leelawadee UI", "Thonburi", sans-serif;
  font-size: 17px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
}
h1, h2, h3, .brand { font-family: "Anuphan", "Sarabun", "Noto Sans Thai", sans-serif; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.3; margin: 0.8rem 0 0.4rem; font-weight: 700; }
h2 { font-size: 1.6rem; line-height: 1.35; margin: 2rem 0 1rem; font-weight: 700; }
a { color: var(--orange-deep); }
a:hover { color: var(--orange-dark); }
code { background: var(--peach); border: 1.5px solid var(--ink); border-radius: 6px;
  padding: 0.05em 0.4em; font-size: 0.92em; white-space: nowrap; }
.container { max-width: 1040px; margin: 0 auto; padding: 0 1.2rem; }
.narrow { max-width: 840px; }
.muted { color: var(--brown); font-size: 0.92em; font-weight: 600; }
.nb { white-space: nowrap; }
.ht { display: none; }
.lead { font-size: 1.05rem; max-width: 46em; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(-4deg); }
}

/* ---------- header ---------- */
.site-header { background: var(--bg); position: sticky; top: 0; z-index: 5;
  border-bottom: 2px solid var(--ink); }
.header-row { max-width: 1040px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 0.75rem 1.2rem; }
.brand { font-size: 1.5rem; font-weight: 700; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-tile { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: var(--orange); border: 2px solid var(--ink);
  border-radius: 12px; box-shadow: 2px 2px 0 var(--ink); flex-shrink: 0; }
.site-nav { display: flex; align-items: center; gap: 1.2rem; }
.site-nav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.nav-cta { font-family: "Anuphan", sans-serif; font-weight: 700; background: var(--yellow);
  border: 2px solid var(--ink); border-radius: 999px; padding: 0.35rem 1.1rem;
  box-shadow: 2px 2px 0 var(--ink); transition: transform 0.12s, box-shadow 0.12s; }
.nav-cta:hover { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* ---------- footer ---------- */
.site-footer { margin-top: 3rem; background: var(--yellow); border-top: 2px solid var(--ink);
  padding: 2rem 0 2.4rem; font-size: 0.9rem; color: var(--ink); }
.site-footer p { margin: 0 0 0.6rem; max-width: 46em; }
.site-footer a { color: var(--ink); }
.footer-title { font-family: "Anuphan", sans-serif; font-weight: 700; font-size: 1.05rem; }
.footer-links { margin-top: 0.8rem; font-weight: 600; }

/* ---------- hero (home) ---------- */
.hero { background: var(--orange); border-bottom: 2px solid var(--ink); overflow: hidden; }
.hero-inner { max-width: 1040px; margin: 0 auto; padding: 3.4rem 1.2rem 3.8rem; position: relative; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.25; margin: 0;
  max-width: 15em; color: var(--ink); }
.hero h1 .dot { color: var(--bg); }
.hero-sub { font-size: 1.15rem; max-width: 34em; margin: 1.2rem 0 2rem; color: var(--ink-soft); }
.hero-sticker { position: absolute; top: 2.2rem; right: 8%; background: var(--bg);
  border: 2px solid var(--ink); border-radius: 999px; padding: 0.3rem 1rem;
  font-family: "Anuphan", sans-serif; font-weight: 700; font-size: 0.9rem;
  transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--ink);
  animation: floaty 4.5s ease-in-out infinite; }
.hero-note { margin: 1.6rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.hero-note a { color: var(--ink); }
.chip-new { background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px;
  padding: 0.15rem 0.6rem; margin-right: 0.5rem; font-family: "Anuphan", sans-serif;
  font-weight: 700; white-space: nowrap; }

/* hero illustration (desktop) */
.hero-art { position: absolute; right: 0.5rem; top: 6.4rem; width: 330px;
  pointer-events: none; }
.hero-art svg { width: 100%; height: auto; display: block; }
.ha-scan { animation: ha-scan 2.6s ease-in-out infinite alternate; }
@keyframes ha-scan { from { transform: translateY(0); } to { transform: translateY(168px); } }
.ha-coin, .ha-seal { transform-box: fill-box; transform-origin: center;
  animation: ha-bob 5s ease-in-out infinite; }
.ha-seal { animation-duration: 4s; animation-delay: 1.2s; }
@keyframes ha-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-10px) rotate(4deg); } }
.ha-lotus { transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(4px 5px 0 var(--ink));
  animation: ha-float 6.4s ease-in-out infinite 0.6s; }
@keyframes ha-float { 0%, 100% { transform: translateY(4px) rotate(3deg); }
  50% { transform: translateY(-9px) rotate(-4deg); } }
.ha-tw { transform-box: fill-box; transform-origin: center;
  animation: ha-tw 3.4s ease-in-out infinite; }
.ha-tw2 { animation-delay: 1.1s; } .ha-tw3 { animation-delay: 2.2s; }
@keyframes ha-tw { 0%, 100% { opacity: 0.25; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.15); } }
/* Mobile: art becomes a faded backdrop behind the hero text (z-index -1
   paints above .hero's orange but under the content), tucked upper-right so
   the headline's ink stays readable; animations keep running. */
@media (max-width: 1000px) {
  .hero-inner { z-index: 0; }  /* stacking context so -1 stays inside the hero */
  .hero-art { z-index: -1; opacity: 0.26; right: -4rem; top: 5.5rem;
    width: min(290px, 76vw); }
}

/* ---------- search form (hero + /search) ---------- */
.search-form { display: flex; gap: 0.6rem; max-width: 600px; flex-wrap: wrap; margin: 1rem 0; }
.search-form input { flex: 1; min-width: 260px; padding: 1rem 1.4rem; font-size: 1.05rem;
  font-family: inherit; border: 2px solid var(--ink); border-radius: 16px;
  background: var(--bg); box-shadow: 3px 3px 0 var(--ink); outline: none; }
.search-form input:focus { background: #fff; }
.search-form button { padding: 1rem 2.2rem; font-size: 1.05rem;
  font-family: "Anuphan", sans-serif; font-weight: 700; border: 2px solid var(--ink);
  border-radius: 16px; background: var(--ink); color: var(--yellow); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink); }
.search-form button:hover { background: #3a2c1a; }

/* ---------- stats band (home) ---------- */
.stats-band { border-bottom: 2px solid var(--ink); background: var(--bg); }
.stats-row { max-width: 1040px; margin: 0 auto; padding: 0 1.2rem;
  display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.2rem; }
.stat + .stat { border-left: 2px solid var(--ink); }
.stat-n { font-family: "Anuphan", sans-serif; font-weight: 700; font-size: 2rem;
  color: var(--orange-deep); }
.stat-green .stat-n { color: var(--green); }
.stat-l { font-size: 0.92rem; font-weight: 600; color: var(--brown); }

/* ---------- section headings ---------- */
.h2-lg { font-size: 1.9rem; margin: 3rem 0 1.2rem; }
.h2-chip { font-family: "Anuphan", sans-serif; font-size: 1rem; font-weight: 700;
  background: var(--mint); color: var(--green); border: 2px solid var(--green);
  border-radius: 999px; padding: 0.15rem 0.8rem; vertical-align: middle; margin-left: 0.4rem;
  white-space: nowrap; }

/* ---------- photo cards (featured) ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.photo-card { display: flex; flex-direction: column; background: var(--bg);
  border: 2px solid var(--ink); border-radius: 20px; overflow: hidden;
  text-decoration: none; color: var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s; }
.photo-card:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink); }
.photo-wrap { position: relative; }
.photo-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  border-bottom: 2px solid var(--ink); }
.photo-fallback { aspect-ratio: 16 / 10; display: flex; align-items: center;
  justify-content: center; background: var(--peach); color: var(--orange-deep);
  border-bottom: 2px solid var(--ink); }
.photo-sticker { position: absolute; top: 10px; left: 10px; font-size: 0.75rem;
  font-weight: 700; font-family: "Anuphan", sans-serif; padding: 0.2em 0.75em;
  background: var(--mint); color: var(--green-deep); border: 2px solid var(--ink);
  border-radius: 999px; transform: rotate(-3deg); }
.photo-card-body { display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.9rem 1.1rem 1.1rem; }
.photo-card-body strong { font-family: "Anuphan", sans-serif; font-size: 1.05rem;
  line-height: 1.4; }

/* ---------- how strip (home) ---------- */
.how-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin: 1.2rem 0; }
.how-step { border: 2px solid var(--ink); border-radius: 20px; padding: 1.4rem 1.5rem;
  box-shadow: 4px 4px 0 var(--ink); }
.how-step:nth-child(1) { background: var(--peach); }
.how-step:nth-child(2) { background: var(--yellow-soft); }
.how-step:nth-child(3) { background: var(--mint); }
.how-num { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--ink);
  font-family: "Anuphan", sans-serif; font-weight: 700; font-size: 1.3rem; }
.how-step:nth-child(1) .how-num { background: var(--orange); }
.how-step:nth-child(2) .how-num { background: var(--yellow); }
.how-step:nth-child(3) .how-num { background: var(--green-bright); }
.how-title { font-family: "Anuphan", sans-serif; font-weight: 700; font-size: 1.15rem;
  margin: 0.7rem 0 0.2rem; }
.how-step p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- dark trust band ---------- */
.band { background: var(--ink); border-radius: 24px; padding: 2.2rem 2.4rem;
  margin: 3.4rem 0; color: var(--bg); }
.band h2 { margin: 0 0 1.4rem; font-size: 1.9rem; color: var(--yellow); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.trust-grid strong { display: block; font-family: "Anuphan", sans-serif; font-weight: 700;
  font-size: 1.1rem; margin: 0 0 0.3rem; color: var(--orange); }
.trust-grid p { margin: 0; font-size: 0.95rem; color: var(--tan); }

/* ---------- province / district chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.8rem 0 1.2rem; }
.chip { display: inline-flex; align-items: baseline; gap: 0.45rem; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: 0.95rem; background: var(--bg);
  border: 2px solid var(--ink); border-radius: 999px; padding: 0.4rem 1.1rem;
  box-shadow: 2px 2px 0 var(--ink); }
.chip:hover { background: var(--peach); color: var(--ink); }
.chip .n { font-size: 0.8em; color: var(--orange-deep); font-weight: 700; }
.chip-dark { display: inline-flex; align-items: center; text-decoration: none;
  color: var(--bg); font-family: "Anuphan", sans-serif; font-weight: 700; font-size: 0.95rem;
  background: var(--ink); border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.4rem 1.1rem; box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
  list-style: none; }
.chip-dark::-webkit-details-marker { display: none; }
.chip-dark:hover { color: var(--yellow); }
.prov-more { display: inline; }
.prov-more[open] { display: block; }
.prov-more[open] > summary { margin-bottom: 1rem; }
.chip-row > .prov-more[open] { flex-basis: 100%; }
.count { color: var(--orange-deep); font-family: "Anuphan", sans-serif; font-weight: 700; }

/* ---------- unit list (province/district/search/nearby) ---------- */
.unit-list { list-style: none; padding: 0; margin: 0.8rem 0;
  display: flex; flex-direction: column; gap: 0.7rem; }
.unit-list li { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap;
  background: var(--bg); border: 2px solid var(--ink); border-radius: 16px;
  padding: 0.85rem 1.2rem; box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s; }
.unit-list li:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.unit-list li > a { font-family: "Anuphan", sans-serif; font-weight: 700; font-size: 1.05rem;
  text-decoration: none; color: var(--ink); }
.unit-list li > a::after { content: ""; position: absolute; inset: 0; }
.unit-list li { position: relative; }
.unit-list .muted { margin-left: auto; font-size: 0.88em; }
.unit-list .badge { position: relative; z-index: 1; }

/* ---------- badges ---------- */
.badge { display: inline-block; font-size: 0.75rem; font-weight: 700;
  font-family: "Anuphan", sans-serif; padding: 0.18em 0.75em; border: 1.5px solid var(--ink);
  border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.badge-verified { background: var(--mint); color: var(--green-deep); }

/* ---------- article cards ---------- */
.article-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 0.8rem 0; }
.article-card { display: flex; flex-direction: column; gap: 0.4rem; background: var(--bg);
  border: 2px solid var(--ink); border-radius: 20px; padding: 1.4rem 1.6rem;
  text-decoration: none; color: var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s; }
.article-card:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink); }
.article-card strong { font-family: "Anuphan", sans-serif; font-size: 1.15rem; line-height: 1.45; }
.article-card .read-more, .article-featured .read-more { font-weight: 700;
  font-size: 0.92rem; margin-top: auto; padding-top: 0.5rem; }
.tag { align-self: flex-start; font-family: "Anuphan", sans-serif; font-weight: 700;
  font-size: 0.78rem; border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0.12rem 0.7rem; }
.tag-peach { background: var(--peach); }
.tag-mint { background: var(--mint); }
.tag-yellow { background: var(--yellow-soft); }

/* featured article hero card */
.article-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr;
  text-decoration: none; color: var(--ink); background: var(--orange);
  border: 2px solid var(--ink); border-radius: 24px; overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink); transition: transform 0.12s, box-shadow 0.12s; }
.article-featured:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink); }
.article-featured-body { padding: 2rem 2.2rem; display: flex; flex-direction: column;
  justify-content: center; gap: 0.5rem; }
.article-featured-body .tag { background: var(--bg); border-width: 2px; transform: rotate(-2deg); }
.article-featured-body strong { font-family: "Anuphan", sans-serif; font-size: 1.6rem;
  line-height: 1.35; }
.article-featured-body .desc { color: var(--ink-soft); font-size: 0.98rem; }
.article-featured-img { border-left: 2px solid var(--ink); min-height: 260px; }
.article-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- breadcrumb / pagination ---------- */
.breadcrumb { font-size: 0.85rem; font-weight: 600; color: var(--brown); margin-top: 1.4rem; }
.pagination { display: flex; gap: 1rem; justify-content: center; align-items: center;
  margin: 2rem 0 3rem; font-weight: 700; }
.pagination span { font-family: "Anuphan", sans-serif; }
.pagination a { text-decoration: none; color: var(--ink); font-family: "Anuphan", sans-serif;
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.35rem 1.2rem; box-shadow: 2px 2px 0 var(--ink); }
.pagination a:hover { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink);
  display: inline-block; }

/* ---------- wat page ---------- */
.wat-head h1 { margin-bottom: 0.15rem; font-size: clamp(1.9rem, 4vw, 2.7rem); }
.wat-loc { font-size: 1.05rem; margin: 0.4rem 0 0; font-weight: 600; color: var(--ink-soft); }
.wat-loc .icon-pin { color: var(--orange); }
.wat-loc .loc-maps { font-size: 0.9rem; margin-left: 0.5rem; white-space: nowrap; }
.same-name { background: var(--yellow-soft); border: 2px dashed var(--ink);
  border-radius: 14px; padding: 0.7rem 1rem; margin: 1rem 0; font-size: 0.92rem; }

.qr-card { display: grid; grid-template-columns: 340px 1fr; gap: 2rem;
  background: var(--mint); border: 2px solid var(--ink); border-radius: 24px;
  padding: 1.8rem; margin: 1.6rem 0; box-shadow: 5px 5px 0 var(--ink); }
.qr-img { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.qr-art { display: block; width: 100%; max-width: 360px; height: auto;
  border-radius: 13px; border: 2px solid var(--ink); background: #fff; }
.qr-caption { display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: "Anuphan", sans-serif; font-weight: 700; font-size: 0.9rem;
  color: var(--green-deep); background: var(--bg); border: 2px solid var(--ink);
  border-radius: 999px; padding: 0.25rem 0.9rem; transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink); }
.qr-download { font-weight: 700; font-size: 0.92rem; text-decoration: none;
  color: var(--ink); background: var(--yellow); border: 2px solid var(--ink);
  border-radius: 999px; padding: 0.4rem 1.2rem; box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s; }
.qr-download:hover { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink);
  color: var(--ink); }
.qr-info h2 { margin: 0.2rem 0 1rem; }
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column;
  gap: 0.9rem; }
.steps li { display: flex; gap: 0.9rem; align-items: baseline; margin: 0; }
.step-n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--ink);
  font-family: "Anuphan", sans-serif; font-weight: 700; }
.steps li:nth-child(1) .step-n { background: var(--orange); }
.steps li:nth-child(2) .step-n { background: var(--yellow); }
.steps li:nth-child(3) .step-n { background: var(--green-bright); }
.post-donate { margin: 1.4rem 0 0; font-size: 0.95rem; font-weight: 600;
  background: var(--bg); border: 2px solid var(--ink); border-radius: 14px;
  padding: 0.8rem 1.1rem; }

.noqr-card { background: var(--bg); border: 2px solid var(--ink); border-radius: 24px;
  padding: 1.4rem 1.8rem; margin: 1.6rem 0; box-shadow: 5px 5px 0 var(--ink); }
.noqr-card h2 { margin-top: 0.4rem; }
.temple-cta { background: var(--yellow-soft); border: 2px solid var(--ink);
  border-radius: 14px; padding: 0.8rem 1.1rem; margin-top: 1rem; font-size: 0.95rem; }

.wat-lead { max-width: none; }
.about p { white-space: pre-line; }
.wat-photo { margin: 0.4rem 0 1rem; position: relative; }
.wat-photo img { width: 100%; max-height: 400px; object-fit: cover;
  border: 2px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink);
  display: block; }
.img-credit { position: absolute; right: 14px; bottom: 14px; text-align: right; }
.img-credit summary { list-style: none; cursor: pointer; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255,253,246,0.92); border: 1.5px solid var(--ink); color: var(--brown);
  font-size: 0.8rem; margin-left: auto; }
.img-credit summary::-webkit-details-marker { display: none; }
.img-credit span { display: inline-block; margin-top: 4px; background: rgba(255,253,246,0.95);
  border: 1.5px solid var(--ink); border-radius: 8px; padding: 0.15rem 0.6rem;
  font-size: 0.72rem; color: var(--brown); }

.map-always iframe, .map-embed iframe { border: 2px solid var(--ink); border-radius: 20px;
  margin-top: 0.6rem; display: block; background: #fff; }
.map-embed summary { cursor: pointer; color: var(--orange-deep); font-weight: 600;
  margin: 0.4rem 0; }

/* facts table */
.facts { border-collapse: collapse; width: 100%; background: var(--bg);
  border: 2px solid var(--ink); border-radius: 20px; overflow: hidden;
  border-style: hidden; box-shadow: 0 0 0 2px var(--ink); }
.facts th, .facts td { text-align: left; padding: 0.7rem 1.2rem;
  border: 2px solid var(--ink); vertical-align: top; }
.facts th { width: 32%; min-width: 200px; color: var(--brown); font-weight: 700;
  font-size: 0.92rem; background: var(--yellow-soft); }

/* ---------- alerts ---------- */
.alert { border: 2px solid var(--ink); border-radius: 20px; padding: 1.1rem 1.4rem;
  margin: 2rem 0; font-size: 0.98rem; box-shadow: 4px 4px 0 var(--ink); }
.alert-warn { background: var(--peach); }
.alert-info { background: var(--yellow-soft); }

/* ---------- forms (report) ---------- */
.report-form { max-width: 560px; display: flex; flex-direction: column; gap: 1rem; }
.report-form label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 700; }
.report-form input, .report-form select, .report-form textarea {
  font: inherit; font-weight: 400; padding: 0.7rem 1rem; border: 2px solid var(--ink);
  border-radius: 12px; background: var(--bg); box-shadow: 2px 2px 0 var(--ink); }
.report-form input:focus, .report-form textarea:focus, .report-form select:focus {
  outline: none; background: #fff; }
.report-form button { align-self: flex-start; padding: 0.7rem 1.8rem; font-size: 1rem;
  font-family: "Anuphan", sans-serif; font-weight: 700; border: 2px solid var(--ink);
  border-radius: 14px; background: var(--ink); color: var(--yellow); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink); }
.report-form button:hover { background: #3a2c1a; }
.report-form .hp { position: absolute; left: -9999px; height: 0; width: 0; }

/* ---------- faq / articles body / misc ---------- */
.faq-item { background: var(--bg); border: 2px solid var(--ink); border-radius: 16px;
  padding: 0.85rem 1.2rem; margin: 0.7rem 0; box-shadow: 3px 3px 0 var(--ink); }
.faq-item summary { cursor: pointer; font-weight: 700; font-family: "Anuphan", sans-serif; }
.faq-item p { margin: 0.6rem 0 0.2rem; }
.article-body { max-width: 46em; }
.article-body h2 { margin-top: 1.8rem; font-size: 1.45rem; }
.article-body blockquote { border-left: 4px solid var(--orange); margin: 1rem 0;
  padding: 0.5rem 1.1rem; background: var(--peach); border-radius: 0 12px 12px 0; }
.article-body img { max-width: 100%; }
.notfound { text-align: center; padding: 2.5rem 0; }
.notfound .search-form { margin: 1rem auto; justify-content: center; }
.notfound .lead { margin-left: auto; margin-right: auto; }

/* legacy generic cards (e-donation page etc.) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem; margin-top: 0.8rem; }
.card { display: flex; flex-direction: column; gap: 0.3rem; background: var(--bg);
  border: 2px solid var(--ink); border-radius: 16px; padding: 0.9rem 1.1rem;
  text-decoration: none; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.card:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.how ol { padding-left: 1.2rem; }
.how li { margin: 0.5rem 0; }
.trust-list { padding-left: 1.2rem; }
.trust-list li { margin: 0.45rem 0; }
.hero-icon, .divider-lotus { display: flex; justify-content: center; color: var(--orange);
  margin: 2.4rem 0 0.4rem; }
.footer-bell { display: none; }

/* province list fallback (text columns) */
.province-list { list-style: none; padding: 0; columns: 3; column-gap: 1.5rem; }
.province-list li { padding: 0.15rem 0; break-inside: avoid; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .photo-grid, .how-strip, .trust-grid { grid-template-columns: 1fr 1fr; }
  .qr-card { grid-template-columns: 1fr; }
  .article-featured { grid-template-columns: 1fr; }
  .article-featured-img { border-left: 0; border-top: 2px solid var(--ink); min-height: 200px; }
  .facts th { min-width: 130px; }
}
@media (max-width: 640px) {
  .photo-grid, .how-strip, .trust-grid, .article-list { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 2px solid var(--ink); }
  .stat { align-items: center; text-align: center; }
  .province-list { columns: 2; }
  .band { padding: 1.6rem 1.4rem; }
  .hero-inner { padding: 2.4rem 1.2rem 2.8rem; }
  .hero-sticker { position: static; display: inline-block; margin-bottom: 1.2rem; }
  .nav-hide-sm { display: none; }
  .header-row { padding: 0.6rem 1rem; }
  .brand { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sticker, .ha-scan, .ha-coin, .ha-seal, .ha-tw, .ha-lotus { animation: none; }
  .photo-card, .article-card, .unit-list li, .nav-cta, .qr-download, .card,
  .article-featured { transition: none; }
}