/* ==========================================================================
Bridge Consulting — Editorial stylesheet (Insights articles + index)
Pairs with the site's Tailwind CDN pages. Load AFTER Tailwind.
Site tokens are re-declared here so the file works standalone.
========================================================================== */
:root{
--accent:#2C5AD1;
--accent-dark:#1D3E96;
--accent-tint:rgba(44,90,209,.10);
--navy:#0A2463;
--ink:#0b1220;
--ink-60:rgba(11,18,32,.62);
--ink-45:rgba(11,18,32,.45);
--rule:rgba(11,18,32,.10);
--page:#f6f8fb;
--sheet:#ffffff;
/* Reading measure. 46rem at 20px type ≈ 70 characters per line, the upper
edge of the readable band (60–75ch). The sheet hugs the column (66rem, was
74) so the page does not read as empty margin — user feedback 2026-08-02. */
--measure:46rem; /* body text column ~736px */
--wide:60rem; /* exhibit break-out ~960px */
--sheet-max:66rem; /* white article sheet */
--font-en:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
--font-th:'IBM Plex Sans Thai','Plus Jakarta Sans',system-ui,sans-serif;
/* Exhibit palette — a blue ramp for the data plus ONE warm colour used only
for the series the exhibit is actually about. Never more than one warm. */
--ex-1:#0A2463; --ex-2:#2C5AD1; --ex-3:#7FA0E4; --ex-4:#C3D0E8;
--ex-grey:#DDE3ED; --ex-warn:#C2703A; --ex-axis:#B9C3D4; --ex-lab:#5A6782;
}
/* --------------------------------------------------------------------------
1. Language-aware typography
Thai is NOT Latin with different glyphs. Three rules that matter:
(a) more leading — vowels and tone marks stack above and below the baseline;
(b) never negative letter-spacing — it collides marks with their consonants;
(c) never uppercase / small-caps — Thai has no case.
-------------------------------------------------------------------------- */
body{ font-family:var(--font-en); color:var(--ink); background:var(--page); }
html[lang^="th"] body{ font-family:var(--font-th); }
/* Wrap a Thai compound or a number range in .nb so the browser's line-breaker
cannot split it: อัตรากำไร, ร้อยละ 10 ถึง 20 */
.nb{ white-space:nowrap; }
.display{ font-family:inherit; letter-spacing:-.022em; }
html[lang^="th"] .display{ letter-spacing:0; }
html[lang^="th"] .uppercase{ text-transform:none; letter-spacing:.02em; }
/* --------------------------------------------------------------------------
2. Reading-progress bar + article chrome
-------------------------------------------------------------------------- */
.progress{ position:fixed; top:0; left:0; height:3px; width:0;
background:linear-gradient(90deg,var(--accent),var(--accent-dark));
z-index:60; transition:width .1s linear; }
.artbar{ position:sticky; top:0; z-index:50;
background:rgba(255,255,255,.86); backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--rule); }
/* The artbar sits directly under the full site nav, so its logo would double
the one above it. It fades in only once the bar is actually stuck (scroll
past the nav) — wired by a scroll listener adding .show. */
.ablogo{ opacity:0; transform:translateX(-8px); transition:opacity .35s, transform .35s; }
.ablogo.show{ opacity:1; transform:none; }
.langtoggle{ display:inline-flex; border:1px solid var(--rule); border-radius:999px;
overflow:clip; font-size:.74rem; font-weight:700; letter-spacing:.04em; }
.langtoggle a{ padding:.34rem .78rem; color:var(--ink-45); transition:.2s; }
.langtoggle a[aria-current="true"]{ background:var(--navy); color:#fff; }
.langtoggle a:not([aria-current="true"]):hover{ color:var(--ink); background:rgba(11,18,32,.04); }
/* --------------------------------------------------------------------------
3. The article sheet
-------------------------------------------------------------------------- */
.sheet{ max-width:var(--sheet-max); margin:0 auto; background:var(--sheet);
box-shadow:0 24px 80px -40px rgba(10,36,99,.28); }
@media (min-width:1100px){ .sheet{ border-radius:1.75rem; margin-top:1.5rem; } }
.col{ max-width:var(--measure); margin-inline:auto; padding-inline:1.5rem; }
.col-wide{ max-width:var(--wide); margin-inline:auto; padding-inline:1.5rem; }
/* eyebrow / kicker */
.kicker{ display:inline-flex; align-items:center; gap:.55rem; font-size:.72rem;
font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-dark); }
.kicker .dot{ width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.5; }
html[lang^="th"] .kicker{ text-transform:none; letter-spacing:.04em; font-size:.8rem; }
h1.headline{ font-size:clamp(2.15rem,4.6vw,3.6rem); font-weight:800; line-height:1.08;
letter-spacing:-.025em; margin-top:1.1rem; }
html[lang^="th"] h1.headline{ line-height:1.34; letter-spacing:0; font-weight:700;
font-size:clamp(1.9rem,4vw,3.05rem); }
p.dek{ font-size:1.26rem; line-height:1.65; color:var(--ink-60); margin-top:1.25rem; max-width:43rem; }
html[lang^="th"] p.dek{ line-height:1.9; font-size:1.18rem; }
/* byline strip */
.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.5rem;
margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--rule);
font-size:.88rem; color:var(--ink-60); }
.byline img{ width:44px; height:44px; border-radius:50%; object-fit:cover;
background:var(--accent-tint); }
.byline .who{ color:var(--ink); font-weight:700; }
.byline .meta{ display:flex; align-items:center; gap:.5rem; }
.byline .sep{ width:3px; height:3px; border-radius:50%; background:var(--ink-45); }
/* hero image */
figure.heroimg{ margin-top:2.5rem; }
figure.heroimg img{ width:100%; aspect-ratio:16/7; object-fit:cover; }
@media (min-width:1100px){ figure.heroimg img{ border-radius:1.25rem; } }
figcaption{ font-size:.78rem; color:var(--ink-45); margin-top:.7rem; line-height:1.6; }
/* --------------------------------------------------------------------------
4. TL;DR — "The bottom line" / "สรุปสาระสำคัญ"
-------------------------------------------------------------------------- */
.tldr{ background:var(--accent-tint); border:1px solid rgba(44,90,209,.16);
border-radius:1.25rem; padding:1.85rem 1.9rem; margin-top:3rem; }
.tldr h2{ font-size:.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
color:var(--accent-dark); margin:0 0 1.05rem; }
html[lang^="th"] .tldr h2{ text-transform:none; letter-spacing:.03em; font-size:.95rem; }
.tldr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
/* Block + absolute marker, NOT flex: inline spans (.nb / .kw) inside a flex
li become separate flex items and the line shatters into columns. */
.tldr li{ display:block; position:relative; padding-left:1.55rem;
font-size:1.02rem; line-height:1.65; color:var(--ink); }
html[lang^="th"] .tldr li{ line-height:1.9; }
.tldr li::before{ content:""; position:absolute; left:.15rem; top:.62em; width:7px; height:7px;
border-radius:2px; background:var(--accent); transform:rotate(45deg); }
/* --------------------------------------------------------------------------
5. Body prose
-------------------------------------------------------------------------- */
.prose{ font-size:1.24rem; line-height:1.76; color:rgba(11,18,32,.86); }
html[lang^="th"] .prose{ font-size:1.17rem; line-height:2.0; }
.prose > p{ margin-top:1.5rem; text-wrap:pretty; }
.prose > p.lede{ font-size:1.4rem; line-height:1.6; color:var(--ink); font-weight:500; }
html[lang^="th"] .prose > p.lede{ font-size:1.28rem; line-height:1.85; }
.prose h2{ font-size:1.75rem; font-weight:800; line-height:1.28; letter-spacing:-.018em;
color:var(--ink); margin-top:3.4rem; }
html[lang^="th"] .prose h2{ font-size:1.55rem; line-height:1.55; letter-spacing:0; font-weight:700; }
.prose h3{ font-size:1.2rem; font-weight:700; color:var(--ink); margin-top:2.3rem; }
.prose a{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px;
text-decoration-thickness:1px; text-decoration-color:rgba(44,90,209,.35); }
.prose a:hover{ text-decoration-color:var(--accent); }
.prose strong{ color:var(--ink); font-weight:700; }
.prose ul,.prose ol{ margin-top:1.4rem; padding-left:1.35rem; display:grid; gap:.7rem; }
.prose ul{ list-style:disc; } .prose ol{ list-style:decimal; }
.prose li::marker{ color:var(--accent); }
/* numbered framework list — "the three pivots" pattern */
.framework{ list-style:none; padding:0; margin-top:2rem; display:grid; gap:1.4rem; counter-reset:fw; }
.framework > li{ counter-increment:fw; display:grid; grid-template-columns:auto 1fr;
gap:1.1rem; align-items:start; }
.framework > li::before{ content:counter(fw,decimal-leading-zero);
font-size:.9rem; font-weight:800; color:var(--accent); letter-spacing:.02em;
padding-top:.28em; font-family:var(--font-en); }
.framework h3{ margin:0 0 .3rem; font-size:1.14rem; }
/* pull quote */
.pullquote{ margin:3rem 0 0; padding-left:1.6rem; border-left:3px solid var(--accent);
font-size:1.5rem; line-height:1.45; font-weight:600; color:var(--navy);
letter-spacing:-.015em; }
html[lang^="th"] .pullquote{ font-size:1.3rem; line-height:1.8; letter-spacing:0; }
.pullquote cite{ display:block; margin-top:.9rem; font-size:.85rem; font-weight:600;
font-style:normal; color:var(--ink-45); letter-spacing:0; }
/* stat trio */
.statrow{ display:grid; gap:1.5rem; margin-top:2.75rem;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.statrow .stat{ border-top:2px solid var(--accent); padding-top:.9rem; }
.statrow .num{ font-family:var(--font-en); font-size:2.35rem; font-weight:800;
letter-spacing:-.03em; color:var(--navy); line-height:1; }
.statrow .lab{ font-size:.86rem; line-height:1.5; color:var(--ink-60); margin-top:.55rem; }
/* "In practice" sidebar */
.inpractice{ margin-top:2.75rem; border:1px solid var(--rule); border-radius:1.15rem;
padding:1.6rem 1.7rem; background:#fbfcfe; }
.inpractice h3{ margin:0 0 .7rem; font-size:.74rem; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; color:var(--accent-dark); }
html[lang^="th"] .inpractice h3{ text-transform:none; letter-spacing:.03em; font-size:.92rem; }
.inpractice p{ margin:0; font-size:1.02rem; line-height:1.72; color:var(--ink-60); }
html[lang^="th"] .inpractice p{ line-height:1.95; }
/* key-terms box — define jargon once, especially Thai/English hybrids */
.keyterms{ margin-top:2.5rem; border-radius:1.15rem; background:#f4f6fb;
padding:1.5rem 1.7rem; }
.keyterms h3{ margin:0 0 .9rem; font-size:.74rem; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; color:var(--ink-45); }
html[lang^="th"] .keyterms h3{ text-transform:none; letter-spacing:.03em; font-size:.9rem; }
.keyterms dl{ display:grid; gap:.7rem; margin:0; font-size:.96rem; line-height:1.7; }
.keyterms dt{ font-weight:700; color:var(--ink); }
.keyterms dd{ margin:0 0 .35rem; color:var(--ink-60); }
/* --------------------------------------------------------------------------
6. EXHIBITS — the component that separates a firm's article from a blog post.
Numbered. Titled with the takeaway. Sourced. Breaks out wider than the text.
-------------------------------------------------------------------------- */
.exhibit{ margin:3.25rem 0 0; }
/* Break-out uses margins, NOT transform — .reveal animates transform, and the
two would cancel each other (the exhibit table clipped off the sheet edge
until this was margin-based). */
@media (min-width:1024px){
.exhibit--wide{ width:var(--wide); margin-inline:calc((100% - var(--wide))/2); }
}
.exhibit .exhead{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap;
padding-bottom:.85rem; border-bottom:2px solid var(--navy); }
.exhibit .exnum{ font-family:var(--font-en); font-size:.72rem; font-weight:800;
letter-spacing:.13em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.exhibit .extitle{ font-size:1.08rem; font-weight:700; line-height:1.4; color:var(--ink);
letter-spacing:-.01em; }
html[lang^="th"] .exhibit .extitle{ line-height:1.7; letter-spacing:0; }
.exhibit .exbody{ padding:1.6rem 0 .5rem; }
.exhibit .exbody svg{ width:100%; height:auto; display:block; }
.exhibit .exfoot{ font-size:.75rem; line-height:1.6; color:var(--ink-45);
border-top:1px solid var(--rule); padding-top:.7rem; }
.exhibit .exfoot b{ color:var(--ink-60); font-weight:700; }
/* honesty marker for placeholder data — must be removed before publishing */
.exdemo{ display:inline-block; margin-bottom:.6rem; font-size:.7rem; font-weight:800;
letter-spacing:.08em; text-transform:uppercase; color:#8a5a00; background:#fff4d6;
border:1px solid #f0d79a; border-radius:.4rem; padding:.25rem .6rem; }
html[lang^="th"] .exdemo{ text-transform:none; letter-spacing:.02em; font-size:.78rem; }
/* standalone use (above a stat row, not inside a figure) needs its own top gap */
.prose > .exdemo{ margin-top:2.75rem; margin-bottom:.2rem; }
.prose > .exdemo + .statrow{ margin-top:.6rem; }
/* exhibit primitives */
.ex-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.ex-table th{ text-align:left; font-size:.72rem; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; color:var(--ink-45); padding:.65rem .8rem;
border-bottom:1px solid var(--rule); }
html[lang^="th"] .ex-table th{ text-transform:none; letter-spacing:.02em; font-size:.85rem; }
.ex-table td{ padding:.8rem; border-bottom:1px solid var(--rule); vertical-align:top;
line-height:1.6; color:var(--ink-60); }
.ex-table td:first-child{ color:var(--ink); font-weight:600; }
.ex-table tr:last-child td{ border-bottom:0; }
.ex-scroll{ overflow-x:auto; }
/* --------------------------------------------------------------------------
7. Close-out, author, related
-------------------------------------------------------------------------- */
.closebox{ margin-top:3.25rem; border-radius:1.35rem; background:var(--navy); color:#fff;
padding:2.1rem 2.1rem 2.2rem; }
.closebox h2{ font-size:1.25rem; font-weight:800; margin:0 0 1.1rem; color:#fff;
letter-spacing:-.01em; }
html[lang^="th"] .closebox h2{ letter-spacing:0; line-height:1.6; }
.closebox ol{ margin:0; padding-left:1.2rem; display:grid; gap:.8rem;
color:rgba(255,255,255,.78); font-size:1.02rem; line-height:1.7; }
html[lang^="th"] .closebox ol{ line-height:1.95; }
.closebox li::marker{ color:var(--accent); font-weight:700; }
.authorcard{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--rule);
display:flex; gap:1.35rem; align-items:flex-start; }
.authorcard img{ width:76px; height:76px; border-radius:50%; object-fit:cover;
flex:0 0 auto; background:var(--accent-tint); }
.authorcard .nm{ font-weight:800; font-size:1.05rem; }
.authorcard .rl{ font-size:.86rem; color:var(--accent-dark); font-weight:600; margin-top:.15rem; }
.authorcard p{ font-size:.98rem; line-height:1.72; color:var(--ink-60); margin-top:.7rem; }
html[lang^="th"] .authorcard p{ line-height:1.95; }
/* --------------------------------------------------------------------------
8. Insights index — cards, filters
-------------------------------------------------------------------------- */
.chip{ font-size:.82rem; font-weight:600; padding:.5rem 1.05rem; border-radius:999px;
border:1px solid var(--rule); color:var(--ink-60); background:#fff;
transition:.18s; white-space:nowrap; cursor:pointer; }
.chip:hover{ border-color:rgba(44,90,209,.4); color:var(--accent-dark); }
.chip[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.icard{ display:flex; flex-direction:column; background:#fff; border-radius:1.4rem;
overflow:clip; border:1px solid var(--rule); transition:transform .35s cubic-bezier(.2,.7,.2,1),
box-shadow .35s; }
.icard:hover{ transform:translateY(-4px); box-shadow:0 26px 48px -30px rgba(10,36,99,.45); }
.icard .ph{ aspect-ratio:16/10; overflow:clip; background:#eef2f9; }
.icard .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.icard:hover .ph img{ transform:scale(1.05); }
.icard .bd{ padding:1.5rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.icard h3{ font-size:1.12rem; font-weight:700; line-height:1.38; letter-spacing:-.012em;
margin-top:.75rem; flex:1; }
html[lang^="th"] .icard h3{ line-height:1.65; letter-spacing:0; }
.icard .ex{ font-size:.92rem; line-height:1.65; color:var(--ink-60); margin-top:.7rem; }
.icard .ft{ display:flex; align-items:center; gap:.6rem; margin-top:1.15rem;
padding-top:1rem; border-top:1px solid var(--rule); font-size:.8rem; color:var(--ink-45); }
.icard .ft img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.tagline{ display:flex; align-items:center; gap:.55rem; font-size:.72rem; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dark); }
html[lang^="th"] .tagline{ text-transform:none; letter-spacing:.03em; font-size:.82rem; }
.langbadge{ font-size:.64rem; font-weight:800; letter-spacing:.06em; padding:.16rem .42rem;
border-radius:.3rem; background:rgba(11,18,32,.06); color:var(--ink-45); }
/* --------------------------------------------------------------------------
9. Motion — disabled for headless screenshots via ?noanim=1 and for
users who ask for reduced motion.
-------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(24px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
html.noanim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce){
.reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* --------------------------------------------------------------------------
10. Print — consultants email articles as PDFs. Make that path clean.
-------------------------------------------------------------------------- */
@media print{
.artbar,.progress,.related,.ctaband,footer,.langtoggle{ display:none !important; }
body{ background:#fff; }
.sheet{ box-shadow:none; max-width:none; margin:0; border-radius:0; }
.exhibit--wide{ width:auto; margin-left:0; transform:none; }
.exhibit,.tldr,.inpractice,.closebox{ break-inside:avoid; }
.prose{ font-size:11pt; line-height:1.6; }
.closebox{ background:#fff; color:#000; border:1px solid #999; }
.closebox h2,.closebox ol{ color:#000; }
}
/* --------------------------------------------------------------------------
11. Refinements (user feedback 2026-08-02)
-------------------------------------------------------------------------- */
/* Avatars: the team photos are half-body cutouts, so a centered circle crop
shows the chest. Anchor the crop to the top so the face is what you see. */
.byline img,.authorcard img,.icard .ft img{ object-position:center top; }
/* "The Bridge view" / "มุมมองของ Bridge" — the stance block. Every article
carries one (or an implications section) — see article-anatomy.md. */
.take{ margin-top:2.9rem; border:1px solid rgba(44,90,209,.22); border-radius:1.25rem;
background:linear-gradient(180deg,#ffffff,#f2f6ff); padding:1.8rem 1.9rem;
box-shadow:0 14px 34px -26px rgba(10,36,99,.4); }
.take h3{ display:flex; align-items:center; gap:.6rem; margin:0 0 .8rem; font-size:.74rem;
font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-dark); }
.take h3::before{ content:""; width:22px; height:3px; border-radius:2px;
background:linear-gradient(90deg,var(--accent),var(--accent-dark)); }
html[lang^="th"] .take h3{ text-transform:none; letter-spacing:.03em; font-size:.95rem; }
.take p{ margin:0; font-size:1.06rem; line-height:1.75; color:rgba(11,18,32,.8); }
html[lang^="th"] .take p{ line-height:1.95; }
/* Motion layer. Every animation here is decorative and is killed by
html.noanim (?noanim=1, used for headless screenshots) and by
prefers-reduced-motion. Content never depends on it. */
html{ scroll-behavior:smooth; }
::selection{ background:rgba(44,90,209,.2); }
.gradword{ background:linear-gradient(92deg,var(--navy) 10%,var(--accent) 85%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; }
.blob{ position:absolute; border-radius:50%; filter:blur(72px); opacity:.3;
pointer-events:none; animation:blobfloat 16s ease-in-out infinite alternate; }
@keyframes blobfloat{ to{ transform:translate3d(34px,-26px,0) scale(1.07); } }
.march{ animation:march 1.15s linear infinite; } /* marching-ants dash */
@keyframes march{ to{ stroke-dashoffset:-20; } }
.chip:active{ transform:scale(.94); }
.chip[aria-pressed="true"]{ animation:chippop .32s cubic-bezier(.2,.7,.2,1); }
@keyframes chippop{ 50%{ transform:scale(1.07); } }
.framework > li.reveal:nth-child(2){ transition-delay:.1s; }
.framework > li.reveal:nth-child(3){ transition-delay:.2s; }
/* Liquid-glass card (Apple style) for text sitting on imagery — the treatment
from the original insights hero the user asked to keep, upgraded: saturation
boost behind the blur, a specular top light, and a sheen that sweeps across
on hover. White text goes inside; use over a dark gradient on the image. */
.lglass{ position:relative; border-radius:1.75rem; overflow:clip;
background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06) 55%,rgba(255,255,255,.11));
-webkit-backdrop-filter:blur(26px) saturate(170%);
backdrop-filter:blur(26px) saturate(170%);
border:1px solid rgba(255,255,255,.24);
box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.05),
0 28px 70px -34px rgba(3,10,35,.7); }
.lglass::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
background:radial-gradient(130% 65% at 10% 0%, rgba(255,255,255,.20), transparent 55%); }
.lglass::after{ content:""; position:absolute; top:-60%; bottom:-60%; left:-60%; width:45%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.17),transparent);
transform:skewX(-18deg); pointer-events:none; transition:left 1s cubic-bezier(.2,.7,.2,1); }
.feature-glass:hover .lglass::after{ left:135%; }
.feature-glass .bg{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.feature-glass:hover .bg{ transform:scale(1.035); }
html.noanim .lglass::after{ display:none; }
@media (prefers-reduced-motion:reduce){
.lglass::after{ display:none; }
.feature-glass .bg{ transition:none; }
}
html.noanim .blob, html.noanim .march, html.noanim .chip[aria-pressed="true"]{ animation:none !important; }
@media (prefers-reduced-motion:reduce){
.blob,.march,.chip[aria-pressed="true"]{ animation:none !important; }
html{ scroll-behavior:auto; }
}
/* --------------------------------------------------------------------------
12. Keyword highlights + play layer (user request 2026-08-04)
.kw marks a load-bearing term: accent-blue text over a marker-pen stroke
that draws itself in when the term scrolls into view. What may be marked
is governed by article-anatomy.md ("Keyword highlights") — 3–6 per
article, prose only. Fully drawn (static) under ?noanim=1 and
prefers-reduced-motion, so screenshots and sensitive users see the final
state, not a half-drawn stroke.
-------------------------------------------------------------------------- */
.kw{ font-weight:600; color:var(--accent-dark);
background-image:linear-gradient(100deg, rgba(44,90,209,.20), rgba(44,90,209,.12));
background-repeat:no-repeat; background-size:0% .56em; background-position:0 88%;
border-radius:.3em; padding:.02em .12em; margin-inline:-.03em;
transition:background-size .8s cubic-bezier(.2,.7,.2,1) .12s;
-webkit-box-decoration-break:clone; box-decoration-break:clone; }
.kw.in{ background-size:100% .56em; }
html.noanim .kw{ background-size:100% .56em !important; transition:none !important; }
@media (prefers-reduced-motion:reduce){
.kw{ background-size:100% .56em !important; transition:none !important; } }
/* TL;DR lines and stat tiles rise one after another when their parent
(which carries .reveal) comes into view. Children animate opacity and
transform of THEMSELVES — the .reveal-transform trap does not apply
because neither .tldr li nor .stat is positioned with transform. */
.tldr.reveal li{ opacity:0; transform:translateY(12px);
transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.tldr.reveal li:nth-child(2){ transition-delay:.09s; }
.tldr.reveal li:nth-child(3){ transition-delay:.18s; }
.tldr.reveal li:nth-child(4){ transition-delay:.27s; }
.tldr.reveal.in li{ opacity:1; transform:none; }
.statrow.reveal .stat{ opacity:0; transform:translateY(14px);
transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.statrow.reveal .stat:nth-child(2){ transition-delay:.1s; }
.statrow.reveal .stat:nth-child(3){ transition-delay:.2s; }
.statrow.reveal.in .stat{ opacity:1; transform:none; }
html.noanim .tldr.reveal li, html.noanim .statrow.reveal .stat{
opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce){
.tldr.reveal li, .statrow.reveal .stat{
opacity:1 !important; transform:none !important; transition:none !important; } }
/* 2×2 exhibit quadrants answer the pointer. Wrap each quadrant's labels in
with a transparent .qhit rect covering its area; hovering
anywhere in the quadrant tints it. Pure decoration — no content depends
on it, so it needs no noanim gate. */
.quad .qhit{ fill:transparent; pointer-events:all; transition:fill .3s; }
.quad:hover .qhit{ fill:rgba(44,90,209,.07); }
/* Hover definitions (user request 2026-08-04, replaces the key-terms box):
TERM gets a dotted underline and a
navy tooltip bubble on hover/tap/focus. For jargon a reader MIGHT need,
defined in place instead of a box up top. 3–5 per article; keep data-def
under ~160 characters. Tooltips are invisible to print and easy to miss:
never put load-bearing content in one — if the argument needs it, write
it in the paragraph. */
.def{ border-bottom:1px dotted rgba(44,90,209,.6); cursor:help; position:relative; }
.def::after{ content:attr(data-def); position:absolute; left:50%; bottom:calc(100% + 10px);
transform:translateX(-50%) translateY(4px); width:max-content; max-width:300px;
background:var(--navy); color:#fff; font-size:.82rem; line-height:1.55; font-weight:500;
letter-spacing:0; padding:.65rem .85rem; border-radius:.6rem; white-space:normal;
text-align:left; opacity:0; pointer-events:none; z-index:45;
box-shadow:0 14px 34px -18px rgba(3,10,35,.6);
transition:opacity .25s, transform .25s; }
.def::before{ content:""; position:absolute; left:50%; bottom:calc(100% + 4px);
transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--navy);
opacity:0; z-index:45; transition:opacity .25s; pointer-events:none; }
.def:hover::after, .def:focus::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.def:hover::before, .def:focus::before{ opacity:1; }
html[lang^="th"] .def::after{ line-height:1.8; }
@media print{ .def{ border-bottom:none; } }
/* Collapsible aside (user request 2026-08-04): with a
line and a .foldbody. For supporting lists the scanning reader
skips — never for content the argument depends on. */
.fold{ margin-top:2rem; border:1px solid var(--rule); border-radius:1rem;
background:#fbfcfe; overflow:clip; }
.fold summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:.65rem;
padding:1rem 1.3rem; font-size:.95rem; font-weight:700; color:var(--accent-dark);
transition:background .2s; }
.fold summary:hover{ background:rgba(44,90,209,.05); }
.fold summary::-webkit-details-marker{ display:none; }
.fold summary::before{ content:"+"; width:22px; height:22px; border-radius:50%;
background:var(--accent-tint); color:var(--accent-dark); display:block; text-align:center;
font-size:15px; line-height:21px; font-weight:800; flex:0 0 auto; }
.fold[open] summary::before{ content:"\2212"; }
.fold .foldbody{ padding:0 1.3rem 1.2rem; font-size:.98rem; line-height:1.7; color:var(--ink-60); }
html[lang^="th"] .fold .foldbody{ line-height:1.95; }
.fold .foldbody ul{ margin-top:.6rem; padding-left:1.2rem; display:grid; gap:.35rem; list-style:disc; }
.fold .foldbody li::marker{ color:var(--accent); }
.fold .foldbody .src{ margin-top:.8rem; font-size:.78rem; color:var(--ink-45); }
/* Share-button feedback: a small toast pill confirming the link was copied
(the clipboard fallback path is otherwise silent). */
.toast{ position:fixed; left:50%; bottom:2rem; transform:translate(-50%,12px);
background:var(--navy); color:#fff; font-size:.85rem; font-weight:600;
padding:.6rem 1.15rem; border-radius:999px; opacity:0; pointer-events:none;
box-shadow:0 12px 30px -12px rgba(10,36,99,.5); z-index:70;
transition:opacity .3s, transform .3s; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
/* --------------------------------------------------------------------------
13. Phones (added 2026-08-06). The desktop layout degraded badly below
~640px in three specific ways, all fixed here:
(a) exhibits — a 960-wide SVG squeezed into a 342px column renders its
labels at ~4px. Exhibits now scroll sideways inside their own box at
a legible minimum width, with a swipe hint. Never shrink an exhibit
to fit a phone; let the reader pan it.
(b) hover definitions — :hover does not exist on touch. .def is made
tappable (JS adds .on) and on a phone the bubble docks to the bottom
of the screen instead of floating above the word, where a 300px
bubble near the screen edge would be clipped by overflow-x:hidden.
(c) padding — the desktop box padding eats a third of a phone column.
-------------------------------------------------------------------------- */
/* (b) tap-to-open definitions — the class the script toggles. Kept outside the
media query so a tap works on tablets and touch laptops too. */
.def.on::after, .def.on::before{ opacity:1; }
.def.on::after{ transform:translateX(-50%) translateY(0); }
@media (max-width:640px){
/* (a) pan-able exhibits */
.exhibit .exbody{ overflow-x:auto; -webkit-overflow-scrolling:touch;
padding-bottom:.9rem; }
.exhibit .exbody svg{ min-width:820px; }
.exhibit .exbody::-webkit-scrollbar{ height:5px; }
.exhibit .exbody::-webkit-scrollbar-thumb{ background:rgba(11,18,32,.22); border-radius:3px; }
.exhibit .exhead::after{ content:"Swipe the exhibit sideways to see all of it";
flex-basis:100%; font-size:.72rem; font-weight:600; color:var(--ink-45);
letter-spacing:0; text-transform:none; }
html[lang^="th"] .exhibit .exhead::after{ content:"เลื่อนแผนภาพไปด้านข้างเพื่อดูทั้งหมด"; }
/* (b) definition bubble docks to the bottom of the viewport */
.def::after{ position:fixed; left:1rem; right:1rem; bottom:1rem; top:auto;
width:auto; max-width:none; transform:none; font-size:.88rem; }
.def.on::after{ transform:none; }
.def::before{ display:none; }
.def{ border-bottom-style:dashed; }
/* (c) breathing room back into the column */
.col,.col-wide{ padding-inline:1.25rem; }
.tldr{ padding:1.4rem 1.25rem; border-radius:1rem; }
.take{ padding:1.4rem 1.3rem; }
.closebox{ padding:1.6rem 1.4rem 1.7rem; border-radius:1.1rem; }
.inpractice{ padding:1.3rem 1.3rem; }
.fold summary{ padding:.9rem 1.1rem; }
.fold .foldbody{ padding:0 1.1rem 1.1rem; }
/* type: the desktop measure is generous; a phone wants a touch less */
.prose{ font-size:1.13rem; line-height:1.72; }
html[lang^="th"] .prose{ font-size:1.08rem; line-height:1.95; }
.prose > p.lede{ font-size:1.24rem; }
html[lang^="th"] .prose > p.lede{ font-size:1.16rem; }
.prose h2{ font-size:1.4rem; margin-top:2.6rem; }
html[lang^="th"] .prose h2{ font-size:1.3rem; }
h1.headline{ font-size:1.92rem; line-height:1.14; }
html[lang^="th"] h1.headline{ font-size:1.7rem; line-height:1.42; }
p.dek{ font-size:1.08rem; }
html[lang^="th"] p.dek{ font-size:1.04rem; }
.pullquote{ font-size:1.22rem; padding-left:1.1rem; }
html[lang^="th"] .pullquote{ font-size:1.12rem; }
.tldr li{ font-size:.98rem; }
.statrow{ gap:1.25rem; margin-top:2.2rem; }
.statrow .num{ font-size:2.05rem; }
/* a 16:7 hero is a letterbox slit on a phone */
figure.heroimg img{ aspect-ratio:3/2; }
figure.heroimg{ margin-top:1.75rem; }
/* author card: the 76px avatar left too little room for the text */
.authorcard{ gap:1rem; padding-top:1.6rem; margin-top:2.2rem; }
.authorcard img{ width:56px; height:56px; }
/* byline: let the date/read-time drop to its own line instead of squeezing */
.byline{ gap:.7rem 1rem; font-size:.84rem; }
.byline .meta{ margin-left:0; width:100%; }
}
/* Thai word units from thai-linebreak (thai_break.py): no break inside a unit;
ZWSP between units offers the only break points. */
.tkw{ white-space:nowrap; }