/* =============================================================================
   gaichon.com — Article & chrome stylesheet
   "The Heritage Field Guide" — Thai-first heritage reading system.
   Restrained: warm stone ground, ink body, one oxblood accent (<=10%).
   Layers on top of pure-min.css (content blobs use .pure-g / .pure-u-* grids).
   ============================================================================= */

/* ----- Design tokens ------------------------------------------------------- */
:root {
    /* Color — OKLCH, tinted toward the oxblood hue (never generic cream). */
    --stone:          oklch(0.966 0.010 45);   /* page ground */
    --stone-sunk:     oklch(0.945 0.013 45);   /* recessed panels, ad wells */
    --surface:        oklch(0.992 0.004 60);   /* raised cards / drawer */
    --ink:            oklch(0.245 0.012 40);   /* body text  ~13:1 on stone */
    --ink-soft:       oklch(0.355 0.018 40);   /* strong secondary text */
    --muted:          oklch(0.420 0.020 40);   /* captions/meta ~5:1 on stone */
    --oxblood:        oklch(0.400 0.110 32);   /* the one voice ~5.7:1 on stone */
    --oxblood-deep:   oklch(0.300 0.090 32);   /* header / footer ground */
    --oxblood-hover:  oklch(0.340 0.110 30);
    --gold:           oklch(0.720 0.110 78);   /* rare warm highlight (header) */
    --hairline:       oklch(0.880 0.012 45);   /* borders / rules */
    --hairline-soft:  oklch(0.915 0.010 45);
    --on-dark:        oklch(0.960 0.012 70);   /* text on oxblood grounds */
    --on-dark-soft:   oklch(0.840 0.020 70);

    /* Type */
    --font-display: 'Trirong', Georgia, 'Noto Serif Thai', serif;
    --font-body:    'Noto Sans Thai Looped', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --measure:      64ch;

    /* Space — modular, breathes on larger viewports */
    --s-1: 0.5rem;
    --s-2: 0.75rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2rem;
    --s-6: clamp(2.5rem, 5vw, 4rem);
    --s-7: clamp(4rem, 8vw, 6.5rem);

    --radius:   6px;
    --radius-lg: 12px;

    /* Semantic z-index scale — never arbitrary 9999 */
    --z-sticky:  100;
    --z-drawer-backdrop: 200;
    --z-drawer:  210;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */
}

/* ----- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--stone);
    color: var(--ink);
    font-family: var(--font-body);
    /* Thai reads better a touch larger; comfortable measure line-height. */
    font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
    line-height: 1.55;                 /* global; article overrides to ~1.8 */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga" 1, "kern" 1;
}

img { max-width: 100%; height: auto; }
.pure-img-responsive { max-width: 100%; height: auto; display: block; }

a { color: var(--oxblood); text-decoration: none; }
a:hover { color: var(--oxblood-hover); text-decoration: underline; text-underline-offset: 0.16em; }

:focus-visible {
    outline: 2.5px solid var(--oxblood);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 400;
    background: var(--oxblood-deep); color: var(--on-dark);
    padding: 0.7em 1.2em; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ----- Site header (slim sticky top bar) ----------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: var(--oxblood-deep);
    color: var(--on-dark);
    border-bottom: 1px solid oklch(0.26 0.08 32);
    transition: box-shadow 0.25s var(--ease-out);
}
.site-header__bar {
    max-width: 72rem; margin: 0 auto;
    display: flex; align-items: center; gap: var(--s-4);
    padding: 0.85rem clamp(1rem, 4vw, 2rem);
}
/* Scroll response is a shadow lift only — cheap to composite, no layout thrash. */
.site-header.is-scrolled { box-shadow: 0 2px 16px oklch(0.30 0.09 32 / 0.28); }

.brand {
    display: inline-flex; align-items: baseline; gap: 0.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--on-dark);
    letter-spacing: -0.01em;
}
.brand:hover { color: var(--on-dark); text-decoration: none; }
.brand__mark { color: var(--gold); }
.brand__tag {
    font-family: var(--font-body); font-weight: 400; font-size: 0.7rem;
    color: var(--on-dark-soft); letter-spacing: 0.02em;
    align-self: center;
}

.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }
.primary-nav a {
    color: var(--on-dark-soft);
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 0.45rem 0.7rem; border-radius: var(--radius);
    font-size: 0.98rem;
    transition: color 0.18s, background 0.18s;
}
.primary-nav a:hover { color: var(--on-dark); background: oklch(1 0 0 / 0.08); text-decoration: none; }
.primary-nav a[aria-current="page"] { color: var(--on-dark); box-shadow: inset 0 -2px 0 var(--gold); }

.topics-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 44px;
    background: oklch(1 0 0 / 0.10); color: var(--on-dark);
    border: 1px solid oklch(1 0 0 / 0.18);
    padding: 0.5rem 0.9rem; border-radius: var(--radius);
    font-family: var(--font-body); font-size: 0.96rem; cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s;
}
.topics-btn:hover { background: oklch(1 0 0 / 0.18); border-color: oklch(1 0 0 / 0.32); text-decoration: none; }
.topics-btn svg { width: 1.05em; height: 1.05em; }

/* ----- Topics drawer (native <dialog>) ------------------------------------- */
.topics-dialog {
    margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh;
    width: min(24rem, 90vw); max-width: 90vw;
    border: none; padding: 0;
    background: var(--surface); color: var(--ink);
    box-shadow: -14px 0 40px oklch(0.30 0.09 32 / 0.20);
}
.topics-dialog::backdrop {
    background: oklch(0.24 0.03 40 / 0.55);
    backdrop-filter: blur(2px);
}
.topics-dialog[open] { animation: drawer-in 0.32s var(--ease-out); }
.topics-dialog[open]::backdrop { animation: fade-in 0.32s var(--ease-out); }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* No-JS fallback: the trigger is an <a href="#topics-dialog">, so :target reveals
   the panel as a fixed drawer even when nav.js never runs. */
.topics-dialog:target {
    display: block; position: fixed; inset: 0 0 0 auto; z-index: var(--z-drawer);
}

.drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--hairline);
    position: sticky; top: 0; background: var(--surface);
}
.drawer__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0; }
.drawer__close {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    background: none; border: none; cursor: pointer; color: var(--muted);
    font-size: 1.6rem; line-height: 1; border-radius: var(--radius);
    text-decoration: none;
}
.drawer__close:hover { color: var(--oxblood); background: var(--stone-sunk); text-decoration: none; }

.drawer__body { padding: 1rem 1.4rem 2.5rem; overflow-y: auto; height: calc(100dvh - 4.4rem); }
.drawer__group { margin-bottom: 1.6rem; }
.drawer__group h3 {
    font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
    color: var(--oxblood); margin: 0 0 0.5rem;
    letter-spacing: 0.01em;
}
.drawer__group ul { list-style: none; margin: 0; padding: 0; }
.drawer__group li + li { margin-top: 0.15rem; }
.drawer__group a {
    display: flex; align-items: center; min-height: 44px;
    color: var(--ink); padding: 0.35rem 0.6rem;
    border-radius: var(--radius); font-size: 1.02rem;
    transition: background 0.15s, color 0.15s;
}
.drawer__group a:hover { background: var(--stone-sunk); color: var(--oxblood); text-decoration: none; }
.drawer__group a[aria-current="page"] { background: var(--stone-sunk); color: var(--oxblood); font-weight: 600; }

/* ----- Reading layout: content-grid with breakout figures ------------------ */
.page-main { padding-bottom: var(--s-7); }

.breadcrumb { max-width: var(--measure); margin: var(--s-4) auto 0; padding: 0 var(--s-3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0;
    font-size: 0.86rem; color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.45rem; }
.breadcrumb li + li::before { content: "›"; color: var(--hairline); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--oxblood); }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); }

.article-head { max-width: var(--measure); margin: var(--s-3) auto 0; padding: 0 var(--s-3); }
.article-head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2rem, 1.4rem + 3.2vw, 3.15rem);
    line-height: 1.14; letter-spacing: -0.015em;
    margin: 0.2em 0 0; color: var(--ink);
    text-wrap: balance;
}
.article-head .lede {
    font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft);
    margin: var(--s-3) 0 0; text-wrap: pretty;
}
.article-head__rule { max-width: var(--measure); margin: var(--s-4) auto 0; padding: 0 var(--s-3); }
.article-head__rule hr { border: none; border-top: 2px solid var(--oxblood); width: 3.5rem; margin: 0; }

/* Content grid — normal flow sits in the measure; figures/galleries break out. */
.article {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--s-3), 1fr)
        [wide-start] minmax(0, 6rem)
        [content-start] min(var(--measure), 100% - var(--s-4) * 2) [content-end]
        minmax(0, 6rem) [wide-end]
        minmax(var(--s-3), 1fr) [full-end];
    margin-top: var(--s-5);
    line-height: 1.82;
}
.article > * { grid-column: content; margin-top: 0; margin-bottom: 0; }
.article > * + * { margin-top: var(--s-4); }
.article > .pure-g,
.article > figure.wide,
.article > .wide { grid-column: wide; }
.article > figure.full,
.article > .full { grid-column: full; }

/* Article typography */
.article p { margin: 0; text-wrap: pretty; }
.article h2 {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); line-height: 1.25;
    letter-spacing: -0.01em; color: var(--ink);
    margin-top: var(--s-6); margin-bottom: 0; text-wrap: balance;
}
.article h2.title { /* legacy content class */ }
.article h3 {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.3rem; line-height: 1.3; color: var(--ink-soft);
    margin-top: var(--s-5); margin-bottom: 0;
}
/* h4 = detail sub-level; sans-bold to distinguish from the serif h2/h3. */
.article h4 {
    font-family: var(--font-body); font-weight: 700;
    font-size: 1.02rem; line-height: 1.4; color: var(--ink);
    margin-top: var(--s-4);
}
.article strong, .article b { font-weight: 600; color: var(--ink); }
.article a { text-decoration: underline; text-underline-offset: 0.15em;
    text-decoration-color: oklch(0.40 0.11 32 / 0.4); }
.article a:hover { text-decoration-color: currentColor; }

.article ul, .article ol { padding-left: 1.4em; }
.article li + li { margin-top: 0.4em; }

.article blockquote {
    margin: var(--s-5) 0; padding: var(--s-3) var(--s-4);
    background: var(--stone-sunk); border-radius: var(--radius);
    color: var(--ink-soft); font-size: 1.08rem;
}
.article blockquote p + p { margin-top: var(--s-3); }

.article img { border-radius: var(--radius); }
.article figure { margin: 0; }
.article figure img { width: 100%; }
.article figcaption, .photo-box-caption {
    margin-top: 0.6rem; font-size: 0.86rem; color: var(--muted);
    line-height: 1.5;
}
.article figure.wide figcaption, .article figure.full figcaption {
    max-width: var(--measure); margin-left: auto; margin-right: auto;
    padding: 0.6rem var(--s-3) 0;
}

/* Topics index (sitemap.html) — responsive columns of grouped links. */
.article > .topics-index { grid-column: wide; }
.topics-index {
    display: grid; gap: var(--s-5) var(--s-6);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.topics-index section { break-inside: avoid; }
.article .topics-index h2 {
    margin: 0 0 var(--s-2); padding-bottom: var(--s-1);
    font-size: 1.3rem; color: var(--oxblood);
    border-bottom: 2px solid var(--hairline);
}
.topics-index ul { list-style: none; margin: 0; padding: 0; }
.topics-index li { margin: 0; }
.topics-index a {
    display: block; padding: 0.5rem 0; color: var(--ink);
    border-bottom: 1px solid var(--hairline-soft);
    transition: color 0.15s, transform 0.15s var(--ease-out);
}
.topics-index a:hover { color: var(--oxblood); transform: translateX(0.35rem); text-decoration: none; }

/* Legacy image-gallery blobs (punkai breed thumbnails) */
.article .pure-g { margin-top: var(--s-4); row-gap: var(--s-4); }
.article .pure-g [class*="pure-u"] { padding: 0 0.4rem; }
.photo-box-caption { display: block; text-align: center; }
.photo-box-caption span { font-weight: 500; color: var(--ink-soft); }
.article .pure-g a img {
    border-radius: var(--radius); width: 100%;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.article .pure-g a:hover img {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px oklch(0.30 0.09 32 / 0.18);
}

/* Ported legacy .photo-box (overlaid caption) — kept for older blobs */
.photo-box, .text-box { overflow: hidden; position: relative; text-align: center; border-radius: var(--radius); }
.photo-box img { width: 100%; height: auto; }
.photo-box aside {
    position: absolute; bottom: 0; right: 0; width: 100%;
    padding: 1.4em 0.6em 0.6em; color: #fff; font-size: 80%; text-align: right;
    background: linear-gradient(to bottom, oklch(0.2 0.03 40 / 0), oklch(0.18 0.03 40 / 0.85) 90%);
}

/* ----- Ad slot (AdSense) — bounded, reserved, subordinate ------------------ */
/* Bare ad slots — no label, no box. Collapse entirely when AdSense reports the
   unit unfilled, so an empty slot never leaves a gap. */
.ad-slot {
    max-width: 728px; margin: var(--s-6) auto; padding: 0 var(--s-3);
    text-align: center;
}
.ad-slot ins { display: block; width: 100%; }
.ad-slot--mid { margin-top: var(--s-5); margin-bottom: var(--s-5); }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }

/* Desktop-only sticky rail ad — lives in the empty right gutter, injected by
   nav.js only above 86rem so it can never overlap the reading column. */
.rail-ad {
    position: fixed; z-index: 80;
    top: 50%; transform: translateY(-50%);
    right: clamp(1rem, 2.5vw, 3rem);
    width: 160px; text-align: center;
}
.rail-ad ins { display: inline-block; }
@media (max-width: 85.99rem) { .rail-ad { display: none; } }

/* ----- Comments region (kept flexible even though FB removed) --------------- */
.article-foot { max-width: var(--measure); margin: var(--s-7) auto 0; padding: 0 var(--s-3); }

/* ----- Footer -------------------------------------------------------------- */
.site-footer {
    background: var(--oxblood-deep); color: var(--on-dark-soft);
    margin-top: var(--s-7); padding: var(--s-6) 0 var(--s-5);
}
.site-footer__inner {
    max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem);
    display: grid; gap: var(--s-5);
    grid-template-columns: minmax(0, 1fr);
}
.site-footer__brand .brand { color: var(--on-dark); }
.site-footer__brand p { margin: 0.8rem 0 0; max-width: 32ch; font-size: 0.95rem; line-height: 1.7; }
.footer-cols { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.footer-cols h4 { font-family: var(--font-body); font-size: 0.8rem; color: var(--gold);
    margin: 0 0 0.6rem; letter-spacing: 0.02em; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li + li { margin-top: 0.35rem; }
.footer-cols a { color: var(--on-dark-soft); font-size: 0.95rem; }
.footer-cols a:hover { color: var(--on-dark); text-decoration: none; }
.site-footer__base {
    max-width: 72rem; margin: var(--s-5) auto 0; padding: var(--s-4) clamp(1rem, 4vw, 2rem) 0;
    border-top: 1px solid oklch(1 0 0 / 0.12);
    font-size: 0.85rem; color: var(--on-dark-soft);
}

/* ----- Responsive ---------------------------------------------------------- */
@media (min-width: 60rem) {
    .site-footer__inner { grid-template-columns: 20rem 1fr; align-items: start; }
}
@media (max-width: 44rem) {
    .primary-nav a:not(.topics-btn) { display: none; } /* collapse links into drawer */
    .brand__tag { display: none; }
}

/* ----- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .topics-dialog[open], .topics-dialog[open]::backdrop { animation: none; }
}