/* ============================================================ ละอองเมตตา — main stylesheet Palette: ก่อนบิณฑบาต (warmed) · soothing, cool-neutral ground, clay accent used once per screen. No framework, no build step. Tokens first, components after. ============================================================ */ /* ---------- tokens ---------- */ :root{ /* ground */ --paper:#ECEFEA; --surface:#E3E7E1; --sunk:#D9DED7; /* Text ramp. Every value here clears WCAG AA 4.5:1 against --sunk, the DARKEST surface it can land on — not against --paper. Tuning against the lightest surface is what put --faint and --accent below AA in cards, the footer and the practice box while they still passed on the page background. */ --ink:#1B2320; --muted:#4A534E; /* 5.83:1 on sunk */ --faint:#5B635F; /* 4.53:1 on sunk — one step below muted, and no further */ /* accents — clay appears once per screen, teal carries links */ --accent:#92502B; /* 4.52:1 on sunk; white on it is 6.17:1 */ --accent-wash:#E7DBD0; --teal:#33534F; --teal-wash:#DCE4E0; /* label colour for text sitting ON the accent, which is dark in light mode and light in dark mode — white on the dark-mode clay is only 2.54:1 */ --on-accent:#FFFFFF; /* structure */ --line:#B6BFB5; --line-soft:#D3DAD1; /* type */ --serif:"Noto Serif Thai","Newsreader",Georgia,serif; --serif-lat:"Newsreader","Noto Serif Thai",Georgia,serif; --body:"Sarabun","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; /* metrics — Thai needs 1.9+ or vowel marks collide with the line above */ --lh-thai:1.95; --measure:34rem; --wrap:70rem; --pad:clamp(1.15rem,4vw,2.5rem); --gap:clamp(2.6rem,6vw,4.2rem); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#121714; --surface:#1A211C; --sunk:#202823; --ink:#E8EDE7; --muted:#9BA69D; /* 6.00:1 on sunk */ --faint:#868F88; /* 4.53:1 on sunk */ --accent:#D79366; --accent-wash:#2C211A; --teal:#8FBAB0; --teal-wash:#1A2522; --on-accent:#121714; --line:#3D4840; --line-soft:#2A332D; } } :root[data-theme="dark"]{ --paper:#121714; --surface:#1A211C; --sunk:#202823; --ink:#E8EDE7; --muted:#9BA69D; /* 6.00:1 on sunk */ --faint:#868F88; /* 4.53:1 on sunk */ --accent:#D79366; --accent-wash:#2C211A; --teal:#8FBAB0; --teal-wash:#1A2522; --on-accent:#121714; --line:#3D4840; --line-soft:#2A332D; } /* Visually hidden but still announced. Used by the search form's label and by core markup; without it those labels render as stray visible text. */ .screen-reader-text{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0; } .screen-reader-text:focus{ position:static;width:auto;height:auto;margin:0;clip-path:none; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:var(--lh-thai); -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0} ul{padding:0;list-style:none} a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} button{font:inherit;cursor:pointer} h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.45;text-wrap:balance} .lat{font-family:var(--serif-lat)} /* skip link */ .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:99} .skip:focus{left:.5rem;top:.5rem} /* ---------- layout ---------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .flow>*+*{margin-top:1.1rem} .section{padding-block:var(--gap)} .section+.section{border-top:1px solid var(--line-soft)} .eyebrow{ font-family:var(--mono);font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.9rem; } .section-h{font-size:clamp(1.3rem,3vw,1.7rem);margin-bottom:1.6rem} /* ---------- site header ---------- */ .site-head{border-bottom:1px solid var(--line);background:var(--paper)} .site-head .wrap{ display:flex;align-items:center;justify-content:space-between; gap:1.5rem;padding-block:1.1rem;flex-wrap:wrap; } .wordmark{display:flex;flex-direction:column;gap:.1rem;text-decoration:none;color:inherit} .wordmark .mark{font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.3;color:var(--ink)} .wordmark .descriptor{font-size:.76rem;color:var(--muted);line-height:1.5} .nav{display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap} /* wp_nav_menu emits bare
  • with items_wrap '%3$s'. Outside a