/* ═══════════════════════════════════════════════════════════════════════
   site.css — KHAO shared stylesheet
   Loaded by every page on the site. Contains:
     • CSS custom properties (design tokens)
     • Base resets
     • Layout utility (.wrap)
     • Sticky header stack (.site-top, .topbar, .brand, .topnav)
     • Date / category bar (.datebar, .cat-index)
     • Site footer (footer, .colophon, .colophon-logo)
     • Back-to-top button
     • Shared responsive breakpoints

   Page-specific styles live in each page's own <style> block or file.
   Story pages additionally load story.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────────── */
:root{
  /* Monochrome scale */
  --bg:#ffffff;
  --fg:#0a0a0a;
  --fg-weak:#333333;
  --muted:#5c5c5c;
  --muted-2:#8a8a8a;
  --line:#e5e5e5;
  --line-strong:#111;
  --hover:#f4f4f4;

  /* Brand accent — logo red only */
  --brand-red:#d1271c;

  /* Semantic accents, used sparingly */
  --acc-green:#0f8a3c;
  --acc-amber:#c98a1a;

  /* Typography */
  --serif:"Iowan Old Style","Palatino Linotype","Georgia",ui-serif,serif;
  --sans:ui-sans-serif,-apple-system,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Menlo",monospace;

  /* Layout — 1225px gives 2.3× original gutter on a 1440px viewport
     when paired with body{zoom:0.8}. Same ratio everywhere. */
  --max:1225px;
}

/* ── Base reset ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg)}
body{
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* 20% proportional shrink — every KHAO page renders at the same ratio. */
  zoom:0.8;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block}

/* ── Layout utility ─────────────────────────────────────────────────── */
/* Hard-coded so story pages (which override --max to 780px for content)
   still get a full-width footer. */
.wrap{max-width:1225px;margin:0 auto;padding:0 24px}

/* ── Sticky header stack ────────────────────────────────────────────── */
/* The whole stack is sticky. On scroll-down we slide it up by exactly the
   header height so the datebar moves into the header slot and stays visible.
   On scroll-up the header slides back in above the datebar. */
.site-top{
  position:sticky;top:0;z-index:30;
  background:var(--bg);
  transform:translateY(0);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.site-top.is-hidden{
  transform:translateY(calc(-1 * var(--header-h, 66px)));
}

.topbar{
  border-bottom:1px solid var(--line-strong);
  background:var(--bg);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:var(--max);margin:0 auto;gap:24px;
}
/* Topbar right-cluster — Sprint K10 (2026-05-11). Wraps topnav,
   lang-toggle, and the hamburger button so they form a single right-
   aligned group. On mobile the topnav collapses into a dropdown but
   the lang-toggle stays visible alongside the hamburger. */
.topbar-end{display:flex;align-items:center;gap:24px}
@media (max-width:640px){.topbar-end{gap:12px}}

/* ── Brand / logo ───────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:28px;height:28px;
  background:url('assets/khao-logo.svg') center/contain no-repeat;
  display:inline-block;flex:none;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
}
.brand-word{
  font-family:var(--serif);font-weight:700;font-size:26px;
  letter-spacing:.02em;line-height:1;
}
.brand small{
  font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;margin-left:10px;
  color:var(--muted);vertical-align:middle;
}

/* ── Thai word-wrap — prevent mid-syllable breaks ─────────────────────────
   Thai script has no inter-word spaces, so without a dictionary the browser
   falls back to UAX 14 "SA" class, which lets it break between any two Thai
   characters. Even modern ICU dictionaries don't recognise transliterated
   loanwords like "คริปโท" (crypto) and split them character-by-character,
   so the browser may render "ค" alone on a line and "ริปโท" on the next.

   `word-break: keep-all` (CSS Text L4) suppresses implicit soft-wrap
   opportunities between typographic letter units regardless of script.
   `overflow-wrap: break-word` gives a last-resort character break only if
   the word genuinely overflows the column. `line-break: strict` asks the
   browser to use the strictest Unicode line-break rules.
   ──────────────────────────────────────────────────────────────────────── */
:lang(th), :lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) h4,
:lang(th) p.dek, :lang(th) p.lede, :lang(th) .kicker,
:lang(th) .card h2, :lang(th) .card h3,
:lang(th) .hero h1, :lang(th) .hero .dek{
  word-break:keep-all;
  /* `anywhere`, NOT `break-word`: only `anywhere` is factored into an
     element's min-content intrinsic size, so a long unbreakable Thai run
     (e.g. the hyphen-joined "…เงินเฟ้อไทย-ตัวเลขจ้างงานสหรัฐฯ-เหตุตะวันออกกลาง"
     headline) can actually SHRINK to fit its column. WebKit/iOS Safari does
     NOT shrink min-content for `break-word`, so such titles ran off the right
     edge on iPhone even though Chromium handled them (operator-reported
     2026-05-31). keep-all still suppresses gratuitous mid-word breaks;
     anywhere only kicks in as the last-resort overflow escape. */
  overflow-wrap:anywhere;
  line-break:strict;
  hyphens:none;
}

/* ── Brand hover — red + underline on KHAO only, "AI Daily News" tagline unchanged ── */
.brand{text-decoration:none !important}
.brand:hover{text-decoration:none !important;color:inherit}
.brand-name{transition:color .15s ease}
.brand:hover .brand-name{
  color:var(--brand-red);
  text-decoration:underline;
  text-underline-offset:3px;
}
.brand:hover small{color:var(--muted)}

/* ── Top navigation ─────────────────────────────────────────────────── */
.topnav{display:flex;gap:22px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.topnav a{padding:6px 0;border-bottom:2px solid transparent}
.topnav a.active,.topnav a:hover{border-bottom-color:var(--fg);text-decoration:none}

/* ── Date / category bar ────────────────────────────────────────────── */
.datebar{background:var(--bg);border-bottom:1px solid var(--line)}
.datebar-inner{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:10px 24px;max-width:var(--max);margin:0 auto;
}

/* Category index chips */
.cat-index{
  display:flex;align-items:center;gap:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-weak);
}
.cat-index a{
  position:relative;
  color:var(--fg-weak);text-decoration:none;
  padding:4px 12px;border-bottom:1px solid transparent;
  background-clip:padding-box;
  transition:color .15s ease,background-color .15s ease,border-color .15s ease;
}
/* Sprint K17 (2026-05-12): selector switched from `a + a` to
   `a:not(:first-child)` because the DOM now interleaves
   <span class="cat-sep"> separator elements between anchors. The
   adjacent-sibling selector no longer matches with a span in
   between. The new selector keeps desktop's thin vertical divider
   on every chip except the first — identical visual result. */
.cat-index a:not(:first-child){border-left:1px solid var(--line)}
.cat-index a:hover{color:var(--fg);border-bottom-color:var(--fg)}
/* Separator span between chips. Hidden on desktop (border-left
   already draws the divider); shown on mobile inside the @640 block
   below, where it renders as a real `|` pipe OUTSIDE the anchor
   box, so the scroll-spy active backdrop hugs only the category
   word, never a leading pipe. */
.cat-sep{display:none}
.cat-index a.active{
  color:var(--bg);background:var(--fg);
  border-left-color:var(--fg);
  border-bottom-color:transparent;
}
.cat-index a.active::after{
  content:"";position:absolute;left:0;top:calc(100% + 3px);height:2px;
  width:var(--progress,0%);background:var(--fg);
  transition:width .12s linear;
}

/* ── Language toggle (EN / TH) ──────────────────────────────────────────
   Sprint K10 (2026-05-11) relocated the toggle from the datebar to the
   topbar nav, after the Archive link. Mono-style, two-letter codes
   separated by a thin vertical rule. Active language is filled (inverse);
   the inactive one is muted with a hover state. The base style has no
   left-border / padding-left now — those were a visual divider from the
   adjacent cat-index, which no longer sits next to the toggle. */
.datebar-right{
  display:flex;align-items:center;gap:14px;
}
/* Sprint LANG-DROPDOWN (2026-05-15) — replaces the inline `EN · TH`
   split with a single trigger button + popover menu. The wrapper
   `.lang-toggle` is now `position:relative` so `.lang-menu` can
   absolute-position underneath it. Old `.lang-sep` rule is dead but
   kept hidden as a defence in case a stale markup escapes. */
.lang-toggle{
  position:relative;display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;
}
/* Operator request 2026-05-15: EN button is black by default (same
   shape as the inverted public-page datebar chip) so the language
   picker reads as a primary control, not a placeholder. The
   aria-expanded state keeps the same colours but the caret rotation
   provides the open/closed affordance. */
.lang-current{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;color:var(--bg);
  background:var(--fg);border:1px solid var(--fg);
  padding:4px 8px 4px 10px;cursor:pointer;
  transition:opacity .15s,border-color .15s;
}
.lang-current:hover{opacity:.85}
.lang-current[aria-expanded="true"]{opacity:1}
.lang-caret{
  font-size:9px;line-height:1;display:inline-block;
  transition:transform .15s ease;
}
.lang-current[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}
.lang-menu{
  display:none;position:absolute;top:calc(100% + 4px);right:0;
  background:var(--bg);border:1px solid var(--line-strong,#222);
  z-index:200;min-width:72px;
  flex-direction:column;
}
.lang-toggle.open .lang-menu{display:flex}
.lang-menu a{
  display:block;padding:6px 14px;text-decoration:none;
  color:var(--fg-weak);font:inherit;
  transition:background-color .15s,color .15s;
}
.lang-menu a:hover{background:var(--hover,#f5f5f5);color:var(--fg)}
.lang-menu a.lang-active{background:var(--fg);color:var(--bg)}
.lang-sep{display:none}
@media (max-width:640px){
  /* Sprint K11 (2026-05-11): EN/TH lives in the topbar, so the datebar
     has only date + chips. On mobile, chips drop BELOW the date on a
     full-width second row. Font-size and letter-spacing are compressed
     so all 7 chips fit on a single row without scrolling, even on a
     375px iPhone viewport. */
  .datebar-inner{flex-wrap:wrap;align-items:center;min-width:0;row-gap:6px}
  .datebar-right{
    flex:1 1 100%;
    min-width:0;
    justify-content:flex-start;
  }
  .cat-index{
    flex-wrap:nowrap;           /* keep all 7 chips on ONE row */
    flex:1 1 auto;
    min-width:0;
    justify-content:space-between;
    gap:0;
    /* Text back to original 11px. Letter-spacing compressed so 7 chips
       + 6 pipes still fit at 391px cat-index. */
    font-size:11px;
    letter-spacing:.02em;
  }
  /* Inline-list with pipe separators. Each chip gets small horizontal
     padding so the active chip's black backdrop has breathing room —
     applied to ALL chips so layout doesn't shift when scroll-spy
     promotes a chip to .active. */
  .cat-index a{
    white-space:nowrap;flex-shrink:0;
    padding:2px 3px;
    border-left:0;
    border-bottom:0;
  }
  .cat-index a:not(:first-child){border-left:0}
  /* Sprint K17 (2026-05-12): pipe is now a real <span class="cat-sep">
     sibling in the DOM (built in build.py / build_th.py), not a
     `::before` pseudo on the anchor. Because the separator lives
     OUTSIDE the <a>, the scroll-spy `.active` state's black backdrop
     only paints the category word — no leading pipe gets tinted.
     Padding 0 3px keeps the same horizontal spacing the old pseudo
     produced. */
  .cat-sep{
    display:inline;
    color:var(--line);
    padding:0 3px;
    font-weight:300;
    user-select:none;
  }
  /* Active chip on mobile: same filled-black-rectangle treatment as
     desktop, with the scroll-progress bar growing 0→100% inside the
     chip as the reader scrolls through its category section. */
  .cat-index a.active{
    color:var(--bg);background:var(--fg);
    border-bottom-color:transparent;
  }
  .cat-index a.active::after{
    /* Match desktop: bar sits 3px BELOW the black chip, in the gap.
       Bar stays black (var(--fg)) — it lives outside the chip, not in it. */
    top:calc(100% + 3px);bottom:auto;
    height:2px;
    background:var(--fg);
  }
  /* Date column never truncates anymore — it has the full top row to
     itself. Reset any leftover ellipsis behavior. */
  .datebar-inner > time, .datebar-inner > #currentDate{
    flex-shrink:0;min-width:0;
    overflow:visible;text-overflow:clip;white-space:normal;
  }
}

/* ── Site footer ────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line-strong);margin-top:72px;padding:40px 0 60px}
footer .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 12px;
}
footer p{color:var(--muted);font-size:14px;margin:0}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:4px 0;font-size:14px}
footer a{color:inherit;text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer .foot-contact{
  display:inline-block;margin-top:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg);
  border-bottom:1px solid var(--fg);padding-bottom:1px;
  text-decoration:none;
}
footer .foot-contact:hover{text-decoration:none;opacity:.7}
footer .colophon{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;margin-top:32px;
  padding-top:20px;border-top:1px solid var(--line);
}
/* Colophon logo — KHAO mark scaled down to sit alongside 11px mono text */
.colophon-logo{
  width:20px;height:20px;
  vertical-align:middle;margin-right:8px;
  display:inline-block;flex:none;
}

/* ── Back-to-top button ─────────────────────────────────────────────── */
.back-to-top{
  position:fixed;right:20px;bottom:20px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--fg);border-radius:0;
  font:inherit;font-size:20px;line-height:1;font-weight:700;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .15s ease,background .15s ease,color .15s ease;
  z-index:40;
}
.back-to-top:hover{background:var(--fg);color:var(--bg)}
.back-to-top:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.back-to-top:active{transform:translateY(1px)}
.back-to-top .arrow{display:block;line-height:1}
.back-to-top .label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ── Shared grid ────────────────────────────────────────────────────── */
.grid{display:grid}
.grid.big-cards{
  grid-template-columns:repeat(3,1fr);grid-auto-flow:row dense;
  border-top:1px solid var(--line-strong);
  border-left:1px solid var(--line-strong);
}
.grid.big-cards .card{grid-column:auto}
.grid.big-cards .card h2{font-size:20px}
.grid.big-cards .card.wide{grid-column:span 2}
.grid.big-cards .card.wide h2{font-size:26px;line-height:1.15;-webkit-line-clamp:2}
.grid.big-cards .card.wide p{font-size:15.5px;-webkit-line-clamp:2}
.grid.big-cards .card.huge{grid-column:span 2;grid-row:span 2;padding:22px 22px 20px}
.grid.big-cards .card.huge h2{font-size:32px;line-height:1.1;letter-spacing:-.01em;-webkit-line-clamp:3}
.grid.big-cards .card.huge p{font-size:16.5px;line-height:1.55;-webkit-line-clamp:4}
.grid.big-cards .card.huge .tag{font-size:11px}
.grid.big-cards .card.huge .meta{font-size:11.5px}
.grid.big-cards .card.invert{grid-column:span 1}
.grid.big-cards .card.wide.invert{grid-column:span 2}
.grid.big-cards .card.huge.invert{grid-column:span 2;grid-row:span 2}
.grid.big-cards .card.tall{grid-row:span 2}
@media(max-width:700px){
  .grid.big-cards{grid-template-columns:1fr}
  .grid.big-cards .card.wide,
  .grid.big-cards .card.huge,
  .grid.big-cards .card.invert{grid-column:auto;grid-row:auto}
}

/* ── Card component — shared across index, news, archive ───────────── */
.card{
  border-right:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  padding:22px 22px 26px;background:var(--bg);
  display:flex;flex-direction:column;gap:10px;
  transition:background .15s ease;
  position:relative;
}
.card:hover{background:var(--hover)}
.card .tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg);
  padding:4px 8px;border:1px solid var(--fg);align-self:flex-start;
}
.card h2{
  font-family:var(--serif);font-size:22px;line-height:1.2;
  margin:6px 0 0;font-weight:700;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}
.card p{
  margin:0;color:#333;font-size:14.5px;line-height:1.55;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.card .meta{
  margin-top:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:14px;flex-wrap:wrap;
  padding-top:14px;border-top:1px dashed var(--line);
}
.card.wide{grid-column:1/-1}
.card.invert{background:var(--fg);color:var(--bg)}
.card.invert .tag{border-color:var(--bg);color:var(--bg)}
.card.invert p{color:#d0d0d0}
.card.invert .meta{color:#9a9a9a;border-top-color:#333}
.card.invert:hover{background:#111}

/* Also-covering chip row */
.card .also-covering{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;
}
.card .also-covering .also-label{color:var(--muted);margin-right:4px}
.card .also-covering .also-chip{
  color:var(--fg);text-decoration:none;
  padding:3px 7px;border:1px solid var(--line);border-radius:2px;
  background:var(--bg);
}
.card .also-covering .also-chip:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.card .also-covering .also-more{color:var(--muted)}
.card .meta .outlet-count{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--fg);color:var(--bg);
  padding:2px 6px;border-radius:2px;cursor:default;
}
.card.invert .meta .outlet-count{background:rgba(255,255,255,.92);color:var(--fg)}
/* S5 (platform-upgrade-jun10): '+N สำนักข่าว' anchor-cluster pill on TH
   day-page cards + hero — deep-links to the story's Full coverage panel.
   Same visual weight as .outlet-count but outlined (it's a link). */
.cluster-pill{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  color:var(--fg);border:1px solid var(--fg);
  padding:1px 6px;border-radius:2px;white-space:nowrap;
}
.cluster-pill:hover{background:var(--fg);color:var(--bg)}
.card.invert .cluster-pill{color:var(--bg);border-color:rgba(255,255,255,.7)}
.card.invert .cluster-pill:hover{background:rgba(255,255,255,.92);color:var(--fg)}
.hero-lead .byline .cluster-pill{margin-left:6px}
.card.invert .also-covering{border-top-color:rgba(255,255,255,.22)}
.card.invert .also-covering .also-label{color:rgba(255,255,255,.6)}
.card.invert .also-covering .also-chip{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
.card.invert .also-covering .also-chip:hover{background:#fff;color:var(--fg);border-color:#fff}
.card.invert .also-covering .also-more{color:rgba(255,255,255,.55)}

/* ── Inline entity links in news.html card ledes ─────────────────────────
   Subtle, not flashy. A 1px underline on hover is enough — readers know
   what's a link from context, and we don't want the lede to look like a
   wall of blue text. */
.card p[itemprop="description"] .ent-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(0,0,0,.18);
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  transition:text-decoration-color .15s ease;
}
.card p[itemprop="description"] .ent-link:hover{
  text-decoration-color:var(--fg);
}
.card.invert p[itemprop="description"] .ent-link{
  color:inherit;
  text-decoration-color:rgba(255,255,255,.30);
}
.card.invert p[itemprop="description"] .ent-link:hover{
  text-decoration-color:#fff;
}

/* UPDATE badge */
.update-badge{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  font-weight:700;text-transform:uppercase;
  background:var(--brand-red);color:#fff;
  padding:2px 6px;border-radius:2px;
  vertical-align:2px;margin-left:6px;cursor:default;
}
.card.invert .update-badge{background:#fff;color:var(--brand-red)}

/* Verification badge — monochrome only */
.card-verify{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:8px;letter-spacing:.04em;
  font-weight:600;text-transform:uppercase;
  padding:1px 4px;border-radius:2px;
  vertical-align:2px;margin-left:4px;
  cursor:default;white-space:nowrap;
}
.card-verify.verified{background:var(--fg);color:var(--bg)}
.card-verify.developing,
.card-verify.tier1{
  background:transparent;color:var(--muted);
  border:1px solid var(--line-strong);padding:0px 3px;
}
.card.invert .card-verify.verified{background:var(--bg);color:var(--fg)}
.card.invert .card-verify.developing,
.card.invert .card-verify.tier1{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.55)}

/* ── Shared responsive breakpoints ─────────────────────────────────── */
@media(max-width:900px){
  footer .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .topnav{display:none}
  /* Sprint K11 (2026-05-11): keep flex-wrap:wrap (set by the first
     @640 block) so chips drop below the date. The earlier nowrap
     override is gone now that EN/TH lives in the topbar. */
  .datebar-inner{font-size:10px;gap:6px}
  .back-to-top{right:14px;bottom:14px;width:40px;height:40px}
  .cat-index{font-size:10px;letter-spacing:.12em}
}
@media(max-width:600px){
  footer .foot-grid{grid-template-columns:1fr}
  footer .colophon{flex-direction:column;gap:8px;text-align:left;align-items:flex-start}
}

/* ── khao-search (platform-upgrade-jun10 S6) ──────────────────────────
   Injected by /assets/khao-search.js into .topbar-inner; panel is
   body-level fixed so it overlays content on every page depth. */
.ksearch-toggle{
  background:none;border:1px solid var(--line);
  border-radius:3px;color:var(--fg);cursor:pointer;
  font-size:22px;line-height:1;padding:8px 14px;flex:none;
}
/* jun11: ⌕ sits on the right side of the News page title, sized up and
   dropped toward the title baseline (operator-requested placement). */
.page-title.has-ksearch{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.page-title.has-ksearch .ksearch-toggle{
  align-self:flex-end;margin-bottom:10px;
}
.ksearch-toggle:hover,.ksearch-toggle.open{background:var(--fg);color:var(--bg)}
.ksearch-panel{
  position:fixed;top:64px;left:50%;transform:translateX(-50%);
  width:min(640px,92vw);z-index:300;
  background:var(--bg);border:1px solid var(--fg);border-radius:3px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);padding:10px;
}
.ksearch-input{
  width:100%;box-sizing:border-box;font:inherit;font-size:15px;
  padding:9px 12px;border:1px solid var(--line);border-radius:2px;
  background:var(--bg);color:var(--fg);outline:none;
}
.ksearch-input:focus{border-color:var(--fg)}
.ksearch-results{
  list-style:none;margin:8px 0 0;padding:0;max-height:55vh;overflow-y:auto;
}
.ksearch-results li{border-top:1px dashed var(--line)}
.ksearch-results li:first-child{border-top:none}
.ksearch-results a{
  display:block;padding:9px 6px;text-decoration:none;color:var(--fg);
}
.ksearch-results a:hover{background:rgba(0,0,0,.045)}
.ksearch-results .ks-t{display:block;font-size:14.5px;line-height:1.35}
.ksearch-results .ks-m{
  display:block;margin-top:2px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.ksearch-results .ks-empty{
  padding:12px 6px;color:var(--muted);font-size:13px;
}

/* ── khao-archive all-days index (platform-upgrade-jun10 S7) ────────── */
.arch-datelist-wrap{margin:48px 0 24px;border-top:2px solid var(--line-strong);padding-top:18px}
.arch-datelist-head{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px;
}
.arch-month{border-bottom:1px dashed var(--line)}
.arch-month>summary{cursor:pointer;list-style:none}
.arch-month>summary::-webkit-details-marker{display:none}
.arch-day-list{list-style:none;margin:0 0 14px;padding:0}
.arch-day{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;
  background:none;border:none;border-top:1px dashed var(--line);
  padding:8px 4px;cursor:pointer;font:inherit;color:var(--fg);text-align:left;
}
.arch-day:hover,.arch-day.open{background:var(--hover)}
.arch-day .ad-date{font-size:14.5px}
.arch-day .ad-count,.ads-src{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.arch-day-stories{list-style:none;margin:0 0 10px;padding:2px 4px 6px 18px}
.arch-day-stories li{padding:5px 0;border-top:1px dotted var(--line)}
.arch-day-stories li:first-child{border-top:none}
.arch-day-stories a{font-size:14px;line-height:1.4}
.arch-day-stories .ads-src{margin-left:10px}
.arch-day-stories .ads-empty{color:var(--muted);font-size:13px}