/* ==========================================================================
   THE HUG PROJECT — v3
   Palette rebuilt from the supplied logo. Previous values came from the
   Buddy Bear style sheet and did not match the organisation's real identity.

   Measured from hug-logo-in-text-blue.png:
     wordmark  #0F7593   (48% of the mark)
     circle    #ED1C25
     heart     #F3F3F4 light plane / #CDCCCC shadow plane

   The dark grounds are the brand teal darkened, not an unrelated navy, so
   the whole site descends from the logo rather than sitting beside it.
   ========================================================================== */
*, *::before, *::after{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:inherit}
h1, h2, h3{text-wrap:balance}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red-ink);color:#fff;
  padding:.85rem 1.4rem;font-family:var(--meta);font-size:.7rem;letter-spacing:.06em}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--teal-light)}
/* --- Grid: marginal label column + content column ---------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.cols{display:grid;gap:1.25rem}
.on-dark .label{color:var(--teal-light)}
/* --- Utility bar -------------------------------------------------------- */
.util{background:var(--ink);color:rgba(251,248,242,.74);font-size:var(--t-sm)}
.util a{text-decoration:none}
.util a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.util__right{margin-left:auto;display:flex;gap:1.1rem;align-items:center}
/* --- Masthead ----------------------------------------------------------- */
/* LOGO
   Reversed lockup on dark grounds. The teal wordmark is 2.91:1 against --ink
   and must never be placed on it. Clear space equals the height of the red
   circle, enforced by the padding below. Native ratio 2.498:1. */
.logo{display:block;flex:none;line-height:0;padding:.7rem 0}
.logo img{height:44px;width:auto}
.nav{display:flex;gap:.15rem;margin-left:auto;align-items:center}
.nav a:hover{color:var(--paper);border-bottom-color:var(--rule-dark)}
.nav a[aria-current]{color:var(--paper);border-bottom-color:var(--teal-light)}
.help-btn:hover{background:var(--red)}
.menu-toggle{display:none}
/* --- Hero --------------------------------------------------------------- */
.hero{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,7vw,5.5rem)}
.kicker{font-family:var(--meta);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal-light);margin:0 0 1.4rem}
.hero h1{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:var(--t-3xl);line-height:1.04;letter-spacing:-.021em;margin:0 0 1.5rem;max-width:19ch}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.btn--help{background:var(--red-ink);color:#fff}
.btn--help:hover{background:var(--red)}
.btn--ghost{border:1px solid var(--rule-dark);color:var(--paper)}
.btn--ghost:hover{border-color:var(--teal-light);color:var(--teal-light)}
/* --- Credentials: deliberately dense ------------------------------------ */
.creds{background:var(--deep);color:var(--paper);padding-block:2.25rem}
.creds__list{display:grid;margin:0;padding:0;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.creds dd{margin:0;font-size:var(--t-md);line-height:1.5;color:rgba(251,248,242,.9)}
/* --- Editorial sections -------------------------------------------------- */
.sec{padding-block:clamp(2.75rem,6vw,4.5rem)}
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--sand{background:var(--sand)}
.sec h2{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:var(--t-2xl);line-height:1.1;letter-spacing:-.018em;margin:0 0 1rem;max-width:22ch}
.sec p{margin:0 0 1.15rem;max-width:62ch}
.sec--dark p{color:rgba(251,248,242,.84)}
.sec p:last-child{margin-bottom:0}
.pull{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:400;
  font-size:clamp(1.35rem,1.05rem + 1.3vw,2rem);line-height:1.32;letter-spacing:-.012em;
  max-width:30ch;margin:0 0 1.75rem}
.sec--dark .pull{color:var(--paper)}
.sec--dark .more, .sec--deep .more{color:var(--teal-light)}
.more:hover{border-bottom-width:2px}
.duo{display:grid;gap:1.5rem 3rem}
.duo p{max-width:44ch}
/* --- Method: the petrol ladder, night to daylight ------------------------ */
.stage--1{background:var(--ink);color:var(--paper);border-top:1px solid var(--rule-dark)}
.stage--2{background:var(--deep);color:var(--paper);border-top:1px solid var(--rule-dark)}
.stage--3{background:var(--sand);color:var(--ink);border-top:1px solid var(--rule-light)}
.stage--1 .stage__num, .stage--2 .stage__num{color:var(--teal-light)}
.stage--3 .stage__num{color:var(--teal)}
.stage__num b{display:block;font-weight:400;opacity:.6;margin-top:.3em}
.stage p{margin:0 0 1.2rem;max-width:58ch}
.stage--1 p, .stage--2 p{color:rgba(251,248,242,.84)}
.stage--3 li{border-top-color:var(--rule-light)}
.stage a.more{margin-top:1.25rem}
/* --- Resources ------------------------------------------------------------ */
.docs{border-top:1px solid var(--rule-light);margin-top:1.5rem}
.doc{display:grid;gap:.4rem 2rem;padding:1.1rem 0;border-bottom:1px solid var(--rule-light);
  text-decoration:none;color:inherit;grid-template-columns:minmax(0,1fr)}
.doc:hover{background:rgba(255,255,255,.65)}
.doc h3{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:var(--t-lg);line-height:1.25;letter-spacing:-.014em;margin:0 0 .2rem}
.doc p{margin:0;font-size:var(--t-md);color:rgba(11,58,73,.75);max-width:56ch}
/* --- Quote: opening mark hangs into the margin, as set in print ---------- */
.quote{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,7vw,5rem)}
.quote p{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.35rem);line-height:1.28;letter-spacing:-.015em;
  margin:0 0 1.5rem;text-indent:-.42em}
.quote cite{font-style:normal;font-family:var(--meta);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-light)}
.quote cite span{display:block;text-transform:none;letter-spacing:.02em;
  color:rgba(251,248,242,.62);margin-top:.4rem}
/* --- Help ---------------------------------------------------------------- */
.help{background:var(--red-ink);color:#fff;padding-block:clamp(2.5rem,5.5vw,3.75rem)}
.help h2{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:var(--t-2xl);line-height:1.1;letter-spacing:-.018em;margin:0 0 .8rem;max-width:20ch}
.help p{margin:0 0 1.5rem;max-width:48ch;color:rgba(255,255,255,.93)}
.help .label{color:rgba(255,255,255,.78)}
.lines{display:grid;margin-top:.5rem}
.lines a{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding:.8rem 0;border-top:1px solid rgba(255,255,255,.3);text-decoration:none;color:#fff}
.lines a:hover{background:rgba(0,0,0,.18);padding-inline:.6rem}
.lines span{font-size:var(--t-md);color:rgba(255,255,255,.88);text-align:right}
/* --- Footer -------------------------------------------------------------- */
.foot__grid{display:grid;gap:2.25rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding-bottom:2.25rem;border-bottom:1px solid var(--rule-dark)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:.3rem 0}
.foot a{color:rgba(251,248,242,.84);text-decoration:none}
.foot a:hover{color:var(--teal-light);text-decoration:underline;text-underline-offset:3px}
.foot__brand p{color:rgba(251,248,242,.68);max-width:32ch;margin:1rem 0 0}
.foot__base a{color:rgba(251,248,242,.58)}
/* ==========================================================================
   THAI TYPOGRAPHY
   Display face swaps per language in snippets/header.php. Thai has no true
   italic, needs more leading, and breaks under the negative tracking the
   Latin display face uses: the tracking pulls tone marks off their vowels.
   ========================================================================== */
html[lang="th"]{--display:'Noto Serif Thai','IBM Plex Sans Thai',serif}
html[lang="th"] body{line-height:1.85}
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] .pull, html[lang="th"] .quote p{letter-spacing:0; line-height:1.32; font-variation-settings:normal;}
html[lang="th"] .label, html[lang="th"] .kicker, html[lang="th"] .stage__num, html[lang="th"] .foot .foot__h{letter-spacing:.03em; text-transform:none;   /* Thai has no case */}
/* ==========================================================================
   LOGO — two lockups, never interchangeable
   The teal wordmark is 2.91:1 against --ink and must not sit on dark grounds.
   ========================================================================== */
/* ==========================================================================
   PROSE — output of the blocks field
   ========================================================================== */
/* ==========================================================================
   GRAPHIC SYSTEM
   ========================================================================== */
/* Duotone. Applied to every photograph unless explicitly disabled per file. */
.shot{position:relative;background:var(--deep);overflow:hidden;margin:0}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--wide{aspect-ratio:16/7}
.shot--tall{aspect-ratio:4/5}
.shot__cap{font-family:var(--meta);font-size:.7rem;color:rgba(11,58,73,.62);
  margin:.6rem 0 0;letter-spacing:.03em}
/* The shelf. HUG's publications are the organisation's visual asset. */
/* Library grid */
.lib{display:grid;gap:1.75rem 1.5rem;margin-top:1.75rem;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.lib a{text-decoration:none;color:inherit;display:block}
.lib .cover{width:100%;height:auto;box-shadow:0 6px 18px -8px rgba(11,58,73,.45);
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.lib a:hover .cover{transform:translateY(-5px)}
.lib h3{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:1rem;line-height:1.28;letter-spacing:-.012em;margin:.85rem 0 .25rem}
.lib p{font-family:var(--meta);font-size:.7rem;color:rgba(11,58,73,.62);margin:0}
/* Diagrams */
.model figure{margin:1.75rem 0 0}
.model svg, .model img{width:100%;height:auto;display:block}
.model figcaption{font-family:var(--meta);font-size:.7rem;color:rgba(11,58,73,.62);
  margin-top:.9rem;max-width:70ch;line-height:1.7}
/* Partner marks */
/* ==========================================================================
   v5 — PHOTO-FORWARD ADDITIONS
   ========================================================================== */
.hero--banner{position:relative;isolation:isolate;min-height:min(88vh,760px);
  display:flex;align-items:flex-end;color:var(--paper)}
.hero--banner .hero__img{position:absolute;inset:0;z-index:-2}
.hero--banner .kicker, .hero--banner h1, .hero--banner .standfirst{text-shadow:0 1px 12px rgba(8,42,54,.6)}
.btn--solid{background:var(--paper);color:var(--ink)}
.btn--solid:hover{background:#fff}
.lang{display:flex;gap:.35rem}
.lang a{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  padding:.22rem .55rem;border:1px solid transparent;border-radius:2px;
  color:rgba(251,248,242,.68);font-size:var(--t-sm)}
.lang a:hover{color:var(--paper);border-color:var(--rule-dark)}
.lang a[aria-current]{color:var(--paper);border-color:var(--teal-light)}
.lang svg{width:20px;height:14px;flex:none;border-radius:1.5px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.stage__grid{display:grid;gap:1.75rem}
.stage figure{margin:0}
.stage .shot--tall{aspect-ratio:5/4}
/* ==========================================================================
   RESOURCES PAGE
   ========================================================================== */
.phead{background:var(--ink);color:var(--paper);padding-block:clamp(2.5rem,6vw,4rem)}
.phead h1{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;font-size:var(--t-3xl);line-height:1.05;letter-spacing:-.021em;margin:0 0 1.1rem;max-width:16ch}
.phead .standfirst{margin-bottom:0;text-shadow:none}
/* Filter bar */
.filters{position:sticky;top:84px;z-index:30;background:var(--sand);
  border-bottom:1px solid var(--rule-light)}
.filters__inner{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;padding-block:.9rem}
.fgroup{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.chip{font-family:var(--body);font-size:var(--t-sm);font-weight:500;background:transparent;
  border:1px solid rgba(11,58,73,.28);padding:.34rem .85rem;cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--teal)}
/* Document rows: cover left, substance middle, files right */
.dlist{display:grid;gap:1.25rem;padding-block:clamp(2rem,5vw,3.5rem)}
.dcard{background:#fff;border:1px solid var(--rule-light);
  display:grid;gap:1.25rem clamp(1.25rem,3vw,2rem);padding:clamp(1.1rem,2.5vw,1.6rem);
  grid-template-columns:minmax(0,1fr)}
.dcard__cover{width:128px;max-width:40vw}
.dcard__cover svg{width:100%;height:auto;display:block;
  box-shadow:0 6px 18px -8px rgba(11,58,73,.45)}
.dcard h2 a{text-decoration:none}
.dcard h2 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--teal)}
.dcard__body>p{margin:0 0 .9rem;font-size:var(--t-md);color:rgba(11,58,73,.78);max-width:56ch}
.aud{display:flex;flex-wrap:wrap;gap:.35rem;margin:0}
.aud span{font-family:var(--meta);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(11,58,73,.07);padding:.24rem .5rem;color:rgba(11,58,73,.66)}
.dcard__files{display:grid;gap:.5rem;align-content:start}
.file{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  border:1px solid rgba(11,58,73,.22);padding:.6rem .8rem;text-decoration:none;color:var(--ink)}
.file:hover{background:var(--sand);border-color:var(--teal)}
.file b{font-family:var(--meta);font-size:.7rem;font-weight:500;letter-spacing:.06em;
  display:flex;align-items:center;gap:.5rem}
.file b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.file small{font-family:var(--meta);font-size:.68rem;color:rgba(11,58,73,.55);white-space:nowrap}
.file--missing b::before{background:rgba(11,58,73,.3)}
.dcard__stamp{font-family:var(--meta);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(11,58,73,.5);margin:.2rem 0 0}
.empty{display:none;padding:2.5rem 0;max-width:44ch}
.empty h2{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:1.4rem;margin:0 0 .6rem}
.empty p{color:rgba(11,58,73,.72);margin:0 0 1.2rem}
.empty button{background:var(--ink);color:var(--paper);border:0;font-family:var(--body);
  font-weight:600;font-size:var(--t-md);padding:.7rem 1.2rem;cursor:pointer}
/* Reuse note band */
.reuse{background:var(--sand);padding-block:2rem;border-top:1px solid var(--rule-light)}
.reuse p{margin:0;max-width:62ch;font-size:var(--t-md);color:rgba(11,58,73,.8)}
/* ==========================================================================
   INNER STAGE PAGE
   ========================================================================== */
.stagehead{position:relative;color:var(--paper);isolation:isolate;
  min-height:min(56vh,480px);display:flex;align-items:flex-end}
.stagehead__img{position:absolute;inset:0;z-index:-2}
.stagehead__img img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.stagehead__inner{width:100%;padding-block:clamp(2.25rem,5vw,3.5rem)}
.stagehead .crumb{font-family:var(--meta);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-light);margin:0 0 1.1rem;
  text-shadow:0 1px 8px rgba(8,42,54,.6)}
.stagehead .crumb a{text-decoration:none;opacity:.8}
.stagehead .crumb a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.stagehead h1{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:var(--t-3xl);line-height:1.05;letter-spacing:-.021em;margin:0 0 1rem;max-width:16ch;
  text-shadow:0 2px 18px rgba(8,42,54,.55)}
.stagehead .standfirst{margin-bottom:0;max-width:50ch}
/* Sequential nav across the three stages */
.stagenav{background:var(--deep);color:var(--paper);border-top:1px solid var(--rule-dark)}
.stagenav ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.stagenav a{display:block;text-decoration:none;padding:1rem var(--gut);
  border-left:1px solid var(--rule-dark);color:rgba(251,248,242,.7)}
.stagenav li:first-child a{border-left:0}
.stagenav a:hover{background:rgba(255,255,255,.05);color:var(--paper)}
.stagenav b{display:block;font-family:var(--meta);font-size:.7rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem;color:var(--teal-light)}
.stagenav span{font-family:var(--display);font-variation-settings:var(--fr-serious);
  font-weight:600;font-size:1.05rem}
.stagenav [aria-current]{background:var(--ink);color:var(--paper)}
/* Article body */
.article h2{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:var(--t-xl);line-height:1.14;letter-spacing:-.018em;margin:0 0 .8rem;max-width:26ch}
.article p:last-child{margin-bottom:0}
.article figure{margin:1.75rem 0 0}
.article .shot--wide{aspect-ratio:16/8}
/* Fact strip inside the article */
.facts{display:grid;gap:0;margin:1.75rem 0 0;border-top:1px solid var(--rule-light);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.facts>div{padding:1rem 1.5rem 1rem 0;border-bottom:1px solid var(--rule-light)}
.facts dt{font-family:var(--meta);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal);margin-bottom:.3rem}
.facts dd{margin:0;font-size:var(--t-md);line-height:1.5;color:rgba(11,58,73,.82)}
/* Related resources strip */
.related{background:var(--sand);padding-block:clamp(2.5rem,5.5vw,3.75rem)}
.related h2{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:var(--t-xl);line-height:1.14;letter-spacing:-.018em;margin:0 0 .4rem}
.related .sub{margin:0 0 1.5rem;font-size:var(--t-md);color:rgba(11,58,73,.72);max-width:52ch}
.rel{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rel a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:1rem;align-items:center;
  text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--rule-light);padding:1rem}
.rel a:hover{border-color:var(--teal)}
.rel svg{width:64px;height:auto;display:block;box-shadow:0 4px 12px -6px rgba(11,58,73,.4)}
.rel h3{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:.98rem;line-height:1.25;letter-spacing:-.01em;margin:0 0 .2rem}
.rel p{font-family:var(--meta);font-size:.66rem;color:rgba(11,58,73,.6);margin:0;letter-spacing:.05em}
/* ==========================================================================
   FORMS + NOTICES
   ========================================================================== */
.notice{background:var(--red-ink);color:#fff;padding-block:1.1rem}
.notice p{margin:0;font-size:var(--t-md);max-width:70ch}
.notice a{color:#fff;font-weight:600}
.notice .label{color:rgba(255,255,255,.8)}
.formwrap{max-width:560px}
.field{margin-bottom:1.25rem}
.field label{display:block;font-weight:600;font-size:var(--t-md);margin-bottom:.4rem}
.field label span{font-weight:400;color:rgba(11,58,73,.55)}
.field input, .field select, .field textarea{width:100%;font-family:var(--body);font-size:var(--t-base);color:var(--ink);
  background:#fff;border:1px solid rgba(11,58,73,.32);padding:.7rem .85rem;border-radius:0}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.field [aria-invalid="true"]{border-color:var(--red-ink)}
.err{margin:.35rem 0 0;font-size:var(--t-sm);color:var(--red-ink)}
.form-error{background:var(--red-ink);color:#fff;padding:.8rem 1rem;margin:0 0 1.25rem;font-size:var(--t-md)}
.form-ok h2{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:var(--t-xl);margin:0 0 .6rem}
.privacy{font-size:var(--t-sm);color:rgba(11,58,73,.62);max-width:52ch;margin:0 0 1.4rem}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.give{display:grid;gap:.8rem;max-width:560px}
.give a{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:#fff;border:1px solid var(--rule-light);padding:1.05rem 1.3rem;
  text-decoration:none;color:var(--ink)}
.give a:hover{border-color:var(--teal)}
.give b{font-weight:600}
.give small{display:block;font-weight:400;font-size:var(--t-sm);color:rgba(11,58,73,.62);margin-top:.15rem}
.give svg{flex:none;color:var(--teal)}
/* ==========================================================================
   ABOUT: founder band + timeline
   ========================================================================== */
.founder{background:var(--ink);color:var(--paper);padding-block:clamp(2.75rem,6vw,4.5rem)}
.founder__grid{display:grid;gap:2rem}
.founder h2{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:var(--t-2xl);line-height:1.08;letter-spacing:-.018em;margin:.4rem 0 .3rem}
.founder__role{font-family:var(--meta);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-light);margin:0 0 1.1rem}
.founder p{max-width:56ch;color:rgba(251,248,242,.86)}
.honours{margin:1.5rem 0 0;display:grid;gap:0}
.honours>div{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;
  padding:.7rem 0;border-top:1px solid var(--rule-dark)}
.honours dt{font-family:var(--meta);font-size:var(--t-sm);color:var(--teal-light)}
.honours dd{margin:0;font-size:var(--t-md);color:rgba(251,248,242,.88)}
.tline{padding-block:clamp(2.75rem,6vw,4.5rem)}
.tline__list::before{content:"";position:absolute;left:2.1rem;top:.4rem;bottom:.4rem;
  width:2px;background:var(--rule-light)}
.tline__list li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1.5rem;
  padding-block:.9rem;position:relative}
.tline__list li::before{content:"";position:absolute;left:calc(2.1rem - 4px);top:1.35rem;
  width:10px;height:10px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 3px var(--paper)}
.tline__year{font-family:var(--meta);font-size:var(--t-sm);color:var(--teal);
  margin:0;padding-top:.15rem;text-align:right;padding-right:1.4rem}
.tline__list p{margin:0;font-size:var(--t-md);color:rgba(11,58,73,.75);max-width:56ch}
/* ==========================================================================
   PLAIN-PHP BUILD ADDITIONS
   Mobile navigation, the animation layer, and small responsive fixes.
   ========================================================================== */
/* --- <picture> inside shots and heroes ----------------------------------- */
.shot picture, .hero__img picture, .stagehead__img picture{display:block;width:100%;height:100%}
.shot picture img, .hero__img picture img, .stagehead__img picture img{width:100%;height:100%;object-fit:cover}
.hero__img picture img{object-position:center 38%}
.stagehead__img picture img{object-position:center 40%}
.quote .shot{aspect-ratio:1/1}
/* Shared section heading used across the PHP pages */
.article{padding-block:clamp(2.75rem,6vw,4.5rem)}
.article .cols + .cols{margin-top:clamp(2.25rem,5vw,3.5rem)}
.article p{margin:0 0 1.1rem;max-width:62ch}
.article ul.marks{list-style:none;margin:0 0 1.1rem;padding:0;max-width:62ch}
.article ul.marks li{padding:.55rem 0 .55rem 1.35rem;border-top:1px solid var(--rule-light);position:relative}
.article ul.marks li::before{content:"";position:absolute;left:0;top:1.05rem;width:8px;height:8px;
  border-radius:50%;background:var(--teal)}
.youth{background:var(--sand);padding:clamp(1.25rem,3vw,2rem);border-left:3px solid var(--red-ink)}
.youth p{max-width:58ch}
.prose-page .label{color:var(--teal)}
.crumb a{text-decoration:none;opacity:.75}
.crumb a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
/* ==========================================================================
   MOBILE NAVIGATION
   ========================================================================== */
.menu-toggle{align-items:center;gap:.55rem}
.menu-toggle__bars{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.menu-toggle__bars i{display:block;height:2px;background:currentColor;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),opacity .2s}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none;position:absolute;top:calc(100% + 8px);right:var(--gut);
  width:min(300px,calc(100vw - 2*var(--gut)));background:var(--ink);
  border:1px solid var(--rule-dark);border-radius:2px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.6);
  padding:.4rem .9rem .9rem;z-index:60;transform-origin:top right}
.mnav[data-open]{display:block;animation:mnav-in .22s cubic-bezier(.2,.7,.3,1)}
@keyframes mnav-in{
from{opacity:0;transform:scale(.96) translateY(-6px)}
to{opacity:1;transform:none}
}
.mnav a{display:flex;align-items:center;min-height:44px;padding:.35rem .25rem;
  text-decoration:none;color:rgba(251,248,242,.85);font-size:1rem;font-weight:500;
  border-bottom:1px solid var(--rule-dark)}
.mnav a:hover{color:var(--paper)}
.mnav a[aria-current]{color:var(--teal-light)}
.mnav__meta{display:grid;gap:.1rem;padding-top:.7rem;font-family:var(--meta);font-size:var(--t-sm)}
.mnav__meta a{border:0;min-height:40px;color:rgba(251,248,242,.65)}
/* Sticky masthead compresses slightly once scrolled */
.masthead{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--rule-dark);position:sticky;top:0;z-index:50;transition:box-shadow .25s}
.masthead .wrap{position:relative}
.masthead.is-stuck{box-shadow:0 8px 30px -12px rgba(0,0,0,.55)}
.logo img{transition:height .25s cubic-bezier(.2,.7,.3,1)}
/* ==========================================================================
   ANIMATION LAYER
   One reveal pattern, one hero drift, stagger on grids. Always on,
   per client direction (no reduced-motion handling).
   ========================================================================== */
.rise.in{opacity:1;transform:none}
/* Hero: very slow drift on the banner photograph */
@keyframes hero-drift{
from{transform:scale(1)}
to{transform:scale(1.055)}
}
/* Timeline dots pop as they reveal */
.tline__list li.rise::before{transform:scale(0);transition:transform .4s cubic-bezier(.34,1.4,.5,1) .25s}
.tline__list li.rise.in::before{transform:scale(1)}
/* Link arrows nudge on hover */
.give a, .rel a, .file{transition:border-color .18s,transform .18s}
.give a:hover, .rel a:hover{transform:translateX(3px)}
/* ==========================================================================
   MOBILE REFINEMENTS
   ========================================================================== */
/* ==========================================================================
   UPLIFT: film strip, video grid, press list, contact side, short banners
   ========================================================================== */
/* Short photo banner variant for section landing pages */
.stagehead--short{min-height:min(46vh,420px)}
/* --- Film strip: continuous drift, pauses on hover ------------------------ */
.film{background:var(--ink);padding-block:2.25rem 1.5rem;overflow:hidden}
.film__track{display:flex;gap:14px;width:max-content;animation:film-drift 48s linear infinite}
.film:hover .film__track{animation-play-state:paused}
.film__frame{flex:none;width:clamp(200px,26vw,300px);aspect-ratio:4/3;overflow:hidden;
  border-radius:2px}
.film__frame picture, .film__frame img{width:100%;height:100%;object-fit:cover;display:block}
.film__frame img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.film__frame:hover img{transform:scale(1.05)}
@keyframes film-drift{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* --- YouTube facade grid --------------------------------------------------- */
.yt__play{position:absolute;inset:0;display:grid;place-items:center}
.yt:hover .yt__play::before{background:var(--red);transform:scale(1.06)}
.yt__play::after{content:"";position:absolute;width:0;height:0;
  border:10px solid transparent;border-left:16px solid #fff;transform:translateX(4px)}
.yt__title{position:absolute;left:0;right:0;bottom:0;padding:2rem .8rem .6rem;
  font-family:var(--body);font-size:var(--t-sm);font-weight:500;color:#fff;line-height:1.35;
  background:linear-gradient(transparent,rgba(8,42,54,.92))}
.yt--live{aspect-ratio:16/9}
.yt--live iframe{width:100%;height:100%;border:0;display:block}
/* --- Press list ------------------------------------------------------------ */
.press{display:grid;gap:.8rem;max-width:640px}
.press a:hover{border-color:var(--teal);transform:translateX(3px)}
/* --- PSA videos ------------------------------------------------------------ */
.psa{display:grid;gap:1.75rem;margin-top:1.5rem}
.psa figure{margin:0}
.psa video{width:100%;aspect-ratio:16/9;background:var(--ink);border-radius:2px;display:block}
.psa figcaption{font-family:var(--meta);font-size:.7rem;color:rgba(11,58,73,.62);
  margin-top:.6rem;letter-spacing:.04em}
/* --- Contact page grid ----------------------------------------------------- */
.contact-grid{display:grid;gap:2.5rem}
.contact-side .shot{margin-bottom:1.5rem}
.contact-facts{margin:0;display:grid}
.contact-facts>div{display:grid;grid-template-columns:5rem 1fr;gap:1rem;
  padding:.7rem 0;border-top:1px solid var(--rule-light)}
.contact-facts dt{font-family:var(--meta);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);padding-top:.15rem}
.contact-facts dd{margin:0;font-size:var(--t-md)}
.contact-facts a{color:var(--ink);text-decoration:none}
.contact-facts a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--teal)}
/* ==========================================================================
   THAI TYPOGRAPHY LAYER
   Fraunces has no Thai glyphs; Noto Serif Thai is the display face for Thai.
   Thai script carries vowel and tone marks above and below the baseline, so
   tight leading and negative tracking, which make the Latin design feel
   sharp, actively break Thai. These rules keep both languages first-class.
   ========================================================================== */
:lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) .pull, :lang(th) .sec-h, :lang(th) blockquote p, h1:lang(th), h2:lang(th), h3:lang(th){font-family:var(--body);font-weight:600;
  letter-spacing:0;                 /* negative tracking clips Thai marks   */
  line-height:1.42;                 /* room for upper and lower vowel marks */
  font-variation-settings:normal;}
:lang(th) body, body:lang(th), :lang(th) p, :lang(th) li{line-height:1.85;}
:lang(th) .label, :lang(th) .kicker{letter-spacing:.04em;text-transform:none}
:lang(th) .hero--banner h1{line-height:1.3}
/* ==========================================================================
   VISUAL RICHNESS LAYER
   ========================================================================== */
/* Brand selection color: the site feels branded even when you highlight text */
::selection{background:var(--teal);color:#fff}
.on-dark ::selection{background:var(--red);color:#fff}
/* Reading progress bar, brand red, on every page */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red-ink);
  z-index:100;transition:width .1s linear}
/* Heart-mark watermarks: large, faint, structural */
.sec--sand, .help, .foot{position:relative;overflow:hidden}
.sec--sand::before, .help::before, .foot::before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-120px;
  background:url('../img/hug-mark.svg') no-repeat center/contain;
  opacity:.06;pointer-events:none}
.help::before{opacity:.08;right:auto;left:-160px;top:auto;bottom:-180px}
.foot::before{opacity:.045;right:-120px;top:40px}
.sec--sand>.wrap, .help>.wrap, .foot>.wrap{position:relative}
/* Nav links: underline draws in from the left */
.nav a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.35rem;height:2px;
  background:var(--teal-light);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.nav a:hover::after, .nav a[aria-current]::after{transform:scaleX(1)}
/* Publication covers: lift and tilt like picking a book off a shelf */
.lib a svg, .dcard__cover svg{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.lib a:hover svg{transform:translateY(-7px) rotate(-1.6deg);
  box-shadow:0 18px 32px -12px rgba(11,58,73,.55)}
.dcard:hover .dcard__cover svg{transform:rotate(-1.2deg) translateY(-3px)}
/* Buttons: arrow slides in on hover */
.btn::after{content:"→";position:absolute;right:.9rem;opacity:0;
  transform:translateX(-8px);transition:opacity .22s,transform .22s}
.btn:hover{padding-right:2.3rem}
.btn:hover::after{opacity:1;transform:none}
/* Impact numbers band */
.impact{background:var(--deep);color:var(--paper);padding-block:clamp(2.25rem,5vw,3.5rem);
  position:relative;overflow:hidden}
.impact::before{content:"";position:absolute;width:640px;height:640px;left:-220px;top:-200px;
  background:url('../img/hug-mark.svg') no-repeat center/contain;opacity:.05;pointer-events:none}
.impact__grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  position:relative}
/* Hero headline: words rise one by one (JS splits; no-JS shows static) */
.h1-word{display:inline-block;opacity:0;transform:translateY(.55em)}
.in .h1-word, .h1-word.in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
/* Timeline: the spine draws downward as you scroll into it */
.tline__list::before{transform:scaleY(0);transform-origin:top;
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.tline__list.in::before{transform:scaleY(1)}
/* ==========================================================================
   LIVE-SITE FIX PASS
   ========================================================================== */
/* BUG FIX: the library filters set the hidden attribute, but .dcard's
   display:grid was overriding it, so filtering appeared dead. */
[hidden]{display:none!important}
/* BUG FIX: the hero Ken Burns scale pushed the image wider than the viewport,
   creating the horizontal scrollbar and the white strip on the right. */
html, body{overflow-x:clip}
.hero--banner, .stagehead{overflow:hidden}
/* De-mono: monospace was bleeding into reading surfaces and made whole
   sections read like a terminal. Mono now lives only in small labels. */
.shot__cap, .model figcaption, .psa figcaption{font-family:var(--body);font-size:.875rem;
  font-style:italic;letter-spacing:0;color:rgba(11,58,73,.66)}
.on-dark .shot__cap{color:rgba(251,248,242,.6)}
.foot__base{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;padding-top:1.5rem;font-family:var(--body);font-size:var(--t-sm);letter-spacing:.04em;color:rgba(251,248,242,.48)}
.film__cap{font-family:var(--body);font-size:.7rem;letter-spacing:.02em;color:rgba(251,248,242,.5);margin:1.25rem auto 0;font-style:italic}
.phead__note{margin-top:1.6rem;font-size:var(--t-md);color:rgba(251,248,242,.66);border-left:2px solid var(--teal-light);padding-left:1rem;max-width:52ch}
.crumb{font-family:var(--meta);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-light);margin:0 0 1.3rem}
/* Section headings get a short brand-red accent bar */
.on-dark .sec-h::before{background:var(--teal-light)}
.phead .sec-h::before, .stagehead .sec-h::before{display:none}
/* Footer: brand accent line across the top */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(2.75rem,6vw,4rem) 1.75rem;font-size:var(--t-md);border-top:3px solid var(--red-ink)}
/* Cards get a left accent that appears on hover */
.give a, .press a, .rel a{border-left:3px solid transparent}
.give a:hover, .press a:hover, .rel a:hover{border-left-color:var(--red-ink)}
/* Stronger, unmistakable reveal animation */
.rise{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.stagger>.rise:nth-child(2){transition-delay:.12s}
.stagger>.rise:nth-child(3){transition-delay:.24s}
.stagger>.rise:nth-child(4){transition-delay:.36s}
.stagger>.rise:nth-child(5){transition-delay:.48s}
.stagger>.rise:nth-child(6){transition-delay:.6s}
@keyframes hero-drift{
from{transform:scale(1.02)}
to{transform:scale(1.1)}
}
.hero--banner .hero__img img{width:100%;height:100%;object-fit:cover;object-position:center 38%;animation:hero-drift 18s ease-out forwards}
/* Turnstile widget spacing */
.cf-turnstile{margin-bottom:1.4rem}
/* Numbered steps (Report it! Don't Share it!) */
.steps{list-style:none;counter-reset:step;margin:1.25rem 0 1.5rem;padding:0;max-width:60ch}
.steps li{counter-increment:step;position:relative;padding:.9rem 0 .9rem 3.4rem;
  border-top:1px solid var(--rule-light);line-height:1.6}
.steps li::before{content:counter(step);position:absolute;left:0;top:.95rem;
  width:2.3rem;height:2.3rem;display:grid;place-items:center;
  background:var(--red-ink);color:#fff;font-family:var(--display);font-weight:600;
  font-size:1.15rem;border-radius:50%}
.steps b{font-weight:600}
/* ==========================================================================
   FIX PASS 2
   ========================================================================== */
/* --- TIMELINE: the dot was landing on top of the year. Rebuilt. ----------- */
.tline__list{list-style:none;margin:0;padding:0;position:relative}
.tline__list::before{left:6.4rem;width:2px;background:rgba(11,58,73,.18)}
.tline__list li{grid-template-columns:5.4rem minmax(0,1fr);gap:0 2.6rem;
  padding-block:1.1rem;align-items:start}
.tline__list li::before{left:calc(6.4rem - 5px);top:1.55rem;width:12px;height:12px;
  background:var(--red-ink);box-shadow:0 0 0 4px var(--paper)}
.tline__year{font-family:var(--display);font-variation-settings:var(--fr-serious);
  font-weight:600;font-size:1.35rem;line-height:1.2;letter-spacing:-.01em;
  color:var(--teal);text-align:right;padding:0;margin:0}
.tline__list h3{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;font-size:var(--t-lg);line-height:1.2;letter-spacing:-.014em;margin:0 0 .3rem;margin-top:-.1rem}
/* --- CONTRAST: text over photographs was unreadable ----------------------- */
.stagehead .crumb, .hero .crumb{color:#fff;opacity:.9;
  text-shadow:0 1px 10px rgba(8,42,54,.85),0 0 26px rgba(8,42,54,.6)}
.stagehead .crumb a, .hero .crumb a{color:#fff;opacity:.9}
.stagehead .crumb a:hover, .hero .crumb a:hover{opacity:1}
.stagehead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(178deg,
  rgba(8,42,54,.62) 0%,rgba(8,42,54,.40) 34%,rgba(8,42,54,.74) 74%,rgba(8,42,54,.96) 100%)}
.hero--banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(176deg,
  rgba(8,42,54,.55) 0%,rgba(8,42,54,.28) 30%,rgba(8,42,54,.70) 70%,rgba(8,42,54,.96) 100%)}
.stagehead .kicker, .stagehead .label{color:#fff;opacity:.92;
  text-shadow:0 1px 8px rgba(8,42,54,.8)}
.hero__cred{font-family:var(--body);font-size:var(--t-sm);letter-spacing:.02em;color:rgba(255,255,255,.82);margin:2.2rem 0 0;text-shadow:0 1px 8px rgba(8,42,54,.8)}
/* Eyebrow labels in the margin column were too faint on paper */
.label{font-family:var(--meta);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin:0;padding-top:.35em;opacity:1}
.sec--sand .label, .model .label, .article .label, .tline .label{color:var(--red-ink)}
.on-dark .label b{color:rgba(251,248,242,.6)}
/* --- THAI TYPOGRAPHY: sizing and wrapping -------------------------------- */
:lang(th) h1, :lang(th) h2, :lang(th) h3{word-break:normal;overflow-wrap:break-word}
:lang(th) .sec-h{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);line-height:1.4;max-width:28ch}
:lang(th) .standfirst{line-height:1.75;max-width:56ch}
:lang(th) .pull{font-size:clamp(1.2rem,1rem + .9vw,1.6rem);line-height:1.55;max-width:36ch}
:lang(th) .stage__num, :lang(th) .dcard__stamp{letter-spacing:0}
:lang(th) blockquote p{font-size:clamp(1.2rem,1rem + .9vw,1.65rem);line-height:1.55}
:lang(th) .impact b{font-family:var(--body);font-weight:600;letter-spacing:0;font-size:clamp(2rem,1.5rem + 2vw,3rem)}
:lang(th) .btn{letter-spacing:0}
:lang(th) .tline__year{font-family:var(--body);font-weight:600;font-size:1.15rem}
/* --- Resource filter chips: make the language filter obviously a filter --- */
.fgroup>span{font-family:var(--meta);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,58,73,.55);margin-right:.2rem;font-weight:500}
.chip[aria-pressed="true"]{background:var(--red-ink);border-color:var(--red-ink);color:#fff}
.count{margin-left:auto;font-family:var(--body);font-size:var(--t-sm);color:rgba(11,58,73,.7)}
/* Missing-file state on library rows */
.file--missing{opacity:.55;pointer-events:none;border-style:dashed}
/* ==========================================================================
   CONTENT RESTORATION: giving blocks, vision/values, letter, scale, quotes
   ========================================================================== */
/* Donation options */
.giveblocks{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.giveblock{background:#fff;border:1px solid var(--rule-light);border-left:3px solid var(--red-ink);
  padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.giveblock h2::before{display:none}
.bank>div{display:grid;grid-template-columns:8.5rem 1fr;gap:.8rem;padding:.5rem 0;
  border-top:1px solid var(--rule-light);font-size:var(--t-md)}
.bank strong{font-family:var(--meta);font-size:1.05rem;letter-spacing:.03em}
.bank .lat{font-size:.85em;color:rgba(11,58,73,.6)}
/* Vision / mission / values */
.vmv{margin:1.25rem 0 0;display:grid;gap:0}
.vmv>div{padding:1rem 0;border-top:1px solid var(--rule-light)}
.vmv dd{margin:0;color:rgba(11,58,73,.8);max-width:60ch}
/* Founder letter */
.letter{background:var(--sand);padding-block:clamp(2.75rem,6vw,4.5rem);position:relative;overflow:hidden}
.letter::before{content:"";position:absolute;width:520px;height:520px;right:-150px;bottom:-170px;
  background:url('../img/hug-mark.svg') no-repeat center/contain;opacity:.07;pointer-events:none}
.letter>.wrap{position:relative}
.letter__body p{max-width:60ch;margin:0 0 1.1rem}
.letter__sign{margin-top:1.5rem;font-family:var(--display);font-variation-settings:var(--fr-serious);
  font-weight:600;font-size:1.25rem;color:var(--ink)}
.letter__sign span{display:block;font-family:var(--body);font-weight:400;font-size:var(--t-md);
  color:rgba(11,58,73,.7);margin-top:.2rem}
/* Scale figures (OSEC) */
.on-dark .scale li{border-top-color:var(--rule-dark)}
.on-dark .scale b{color:var(--teal-light)}
.on-dark .scale span{color:rgba(251,248,242,.85)}
.src{font-size:var(--t-sm);color:rgba(11,58,73,.62);font-style:italic;max-width:60ch}
.src-inline{font-size:.9em;color:rgba(11,58,73,.62);font-style:italic}
.subh{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;
  font-size:1.1rem;margin:1.5rem 0 .5rem}
/* Testimonial quotes */
.testimony{margin:0 0 1.75rem;padding-left:1.25rem;border-left:3px solid var(--teal-light);max-width:58ch}
.testimony p{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:400;
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.45;margin:0 0 .6rem}
.testimony cite{font-style:normal;font-family:var(--body);font-size:var(--t-sm);
  color:rgba(251,248,242,.7)}
.quote--plain{padding-block:clamp(2.5rem,5vw,3.5rem)}
.quote--plain blockquote{max-width:62ch}
.quote--plain blockquote p{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.5;
  text-indent:0;margin-bottom:.9rem}
.quote--plain cite{font-family:var(--body);font-size:var(--t-sm);text-transform:none;
  letter-spacing:0;color:rgba(251,248,242,.7)}
/* Social icon row */
.social{display:flex;gap:.65rem;margin-top:1rem;flex-wrap:wrap}
.social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--rule-dark);
  border-radius:50%;color:rgba(251,248,242,.8);text-decoration:none;transition:all .2s}
.social a:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.social svg{width:17px;height:17px;fill:currentColor}
:lang(th) .giveblock h2, :lang(th) .vmv dt, :lang(th) .letter__sign{font-family:var(--body);font-weight:600;letter-spacing:0}
/* ==========================================================================
   TYPE SYSTEM v2  — replaces Fraunces / Noto Serif Thai / IBM Plex Mono
   ==========================================================================
   Reasoning: the old stack needed three families and still could not set a
   Thai headline and a Latin headline in the same voice, because Fraunces has
   no Thai glyphs. Anuphan carries Latin and Thai in one design, so a Thai
   page and an English page are now typographically identical, not merely
   similar. Instrument Serif is used only for large display moments, where
   its contrast does real work. Monospace is gone entirely: it was reading
   as terminal output on a child-protection site.
   ========================================================================== */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--t-base);line-height:1.68;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums;letter-spacing:0}
/* Headlines: serif display, tight, high contrast */
h1, h2, h3, .sec-h, .pull, blockquote p, .stagehead h1, .hero h1, .phead h1{font-family:var(--display);font-weight:400;font-variation-settings:normal;
  letter-spacing:-.015em;line-height:1.08;font-feature-settings:"kern" 1,"liga" 1;}
.hero--banner h1, .stagehead h1, .phead h1{font-size:var(--t-3xl);line-height:1.02;max-width:19ch}
.sec-h{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;font-size:var(--t-2xl);line-height:1.1;letter-spacing:-.018em;margin:0 0 1rem;max-width:24ch;position:relative;padding-top:1rem}
.article .sec-h{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);line-height:1.14}
h3{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem)}
/* Thai: same family, adjusted metrics. Thai has no case and needs air. */
:lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) .sec-h, :lang(th) .pull, :lang(th) blockquote p{font-family:var(--body);font-weight:600;letter-spacing:0;line-height:1.4;}
:lang(th) .hero--banner h1, :lang(th) .stagehead h1, :lang(th) .phead h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);line-height:1.32;max-width:22ch}
:lang(th) body, :lang(th) p, :lang(th) li{line-height:1.9}
/* Eyebrow labels: small caps, letterspaced, in the body face (no mono) */
.label, .kicker, .stage__num, .crumb, .dcard__stamp, .count, .fgroup>span{font-family:var(--meta);font-weight:600;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.4;}
:lang(th) .label, :lang(th) .kicker, :lang(th) .stage__num, :lang(th) .crumb{letter-spacing:.02em;text-transform:none;font-size:.82rem}
.label b{display:block;font-weight:400;opacity:.62;margin-top:.3em;letter-spacing:.06em;color:rgba(11,58,73,.7)}
/* Body copy: comfortable measure, real hierarchy */
p{text-wrap:pretty;max-width:68ch}
.standfirst{font-size:clamp(1.1rem,1.02rem + .5vw,1.32rem);line-height:1.6;color:rgba(251,248,242,.84);max-width:54ch;margin:0 0 2.2rem;font-family:var(--body);font-weight:400}
.pull{font-size:clamp(1.5rem,1.15rem + 1.7vw,2.4rem);line-height:1.22;max-width:24ch;
  font-style:italic}
:lang(th) .pull{font-style:normal}
/* Numerals read as data, not decoration */
.impact b, .tline__year, .lines b, .bank strong{font-family:var(--body);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* ==========================================================================
   LAYOUT v2 — kill the empty margin column, widen the content
   ==========================================================================
   The label column reserved 9rem on every section and left a large empty
   gutter that made pages look unfinished. Labels now sit above the content
   as overlines, and the content column gets the full measure.
   ========================================================================== */
.wrap{max-width:1240px}
.article .cols+.cols{margin-top:clamp(2.5rem,5vw,4rem)}
/* Section headings: accent rule sits above, not floating left */
.sec-h::before{content:"";position:absolute;top:0;left:0;width:56px;height:4px;background:var(--red-ink)}
/* ==========================================================================
   DONATE v2 — the four options were cramped into narrow columns and wrapped
   account numbers across three lines. Two columns, generous, no wrapping.
   ========================================================================== */
.giveblocks{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:1.5rem}
.giveblock{padding:1.9rem 2rem;border-left-width:4px;gap:.9rem}
:lang(th) .giveblock h2{font-family:var(--body);font-weight:600;font-size:1.45rem;letter-spacing:0}
.bank>div{grid-template-columns:9.5rem minmax(0,1fr);align-items:baseline;padding:.65rem 0}
.bank strong{font-size:1.35rem;white-space:nowrap;letter-spacing:.01em}
/* Buttons: less shouty, better proportion */
.btn{display:inline-flex;align-items:center;text-decoration:none;font-weight:600;font-size:1rem;padding:.95rem 1.6rem;position:relative;overflow:hidden;transition:background .2s,color .2s,padding .25s cubic-bezier(.2,.7,.3,1);font-family:var(--body);letter-spacing:0;border-radius:2px}
.help-btn, .nav a, .more, .file b, .chip{font-family:var(--body);letter-spacing:0}
.help-btn{background:var(--red-ink);color:#fff;text-decoration:none;font-weight:600;font-size:var(--t-md);padding:.7rem 1.15rem;flex:none;border-radius:2px}
.more{display:inline-block;margin-top:1.5rem;font-weight:600;font-size:1rem;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.1rem;color:var(--teal);transition:border-bottom-width .15s}
/* Masthead nav in the new face */
.util__inner{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;align-items:center;padding-block:.55rem;font-family:var(--body);letter-spacing:.02em;font-size:.84rem}
.foot .foot__h{font-family:var(--meta);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,248,242,.52);margin:0 0 .9rem;font-weight:600}
:lang(th) .foot .foot__h{letter-spacing:.02em;text-transform:none;font-size:.85rem}
/* Timeline + impact in the new face */
.tline__year{font-size:1.5rem}
.impact b{display:block;font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;font-size:clamp(2.4rem,1.7rem + 2.6vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--paper);font-variant-numeric:tabular-nums}
.dcard h2{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;font-size:1.45rem;line-height:1.14;letter-spacing:-.012em;margin:0 0 .45rem}
:lang(th) .dcard h2{font-family:var(--body);font-weight:600;font-size:1.25rem;letter-spacing:0}
.letter__sign, .vmv dt, .giveblock h2{font-family:var(--display);font-weight:400}
.vmv dt{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:.3rem}
:lang(th) .vmv dt, :lang(th) .letter__sign{font-family:var(--body);font-weight:600;letter-spacing:0}
.letter__body p:first-child::first-letter{float:left;font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;font-size:4rem;line-height:.86;padding:.1rem .55rem 0 0;color:var(--red-ink)}
/* Donation lead quote band */
.giftquote{background:var(--ink);color:var(--paper);padding-block:clamp(2rem,4.5vw,3rem)}
.giftquote p{font-family:var(--display);font-style:italic;
  font-size:clamp(1.35rem,1.05rem + 1.5vw,2.1rem);line-height:1.28;letter-spacing:-.012em;
  max-width:34ch;margin:0;color:var(--paper)}
:lang(th) .giftquote p{font-family:var(--body);font-style:normal;font-weight:500;line-height:1.5}
/* Founder portrait beside the quote: was taking a third of a full-bleed band.
   Now a restrained, fixed-scale portrait so the words lead, not the picture. */
.quote .shot{aspect-ratio:4/5;max-width:240px;border-radius:2px}
.quote blockquote{margin:0;max-width:40ch}
/* Same restraint on the About founder band */
.founder .shot{aspect-ratio:4/5;max-width:260px}
/* ==========================================================================
   DONATE v3 — the four options were reading as disconnected boxes on a large
   empty field. Now a two-column pair with the Thailand methods first, clear
   numbering, and a filled card treatment so the section holds together.
   ========================================================================== */
.giveblocks{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1.25rem;
  counter-reset:give}
.giveblock{position:relative;background:#fff;border:1px solid rgba(11,58,73,.14);
  border-left:4px solid var(--red-ink);padding:1.75rem 1.9rem 1.9rem;
  box-shadow:0 1px 2px rgba(11,58,73,.04);counter-increment:give}
.bank>div{border-top-color:rgba(11,58,73,.14)}
.bank>div:first-child{border-top:0}
.bank strong{font-size:1.3rem;color:var(--ink)}
/* Section framing so the options sit on a defined field, not floating */
.givewrap{background:linear-gradient(180deg,var(--paper) 0%,#F3EEE3 100%);
  padding-block:clamp(2.5rem,5vw,3.75rem)}
/* ==========================================================================
   DONATE v4
   Problems visible in the live page: four cards flowed 3 + 1, leaving an
   orphan on its own row and two-thirds of a row empty; cards were equal
   height so the shortest (GlobalGiving) held a large void; the CTA was
   pushed to the bottom by margin-top:auto, which created that void.
   Fix: a fixed 2 x 2 grid so the four options balance, content sized to
   itself instead of stretched, and the CTA sitting directly under its text.
   ========================================================================== */
.giveblock{align-content:start;gap:.75rem;padding:1.6rem 1.75rem}
.giveblock .btn{align-self:start;margin-top:.6rem;width:auto;justify-content:center;padding:.8rem 1.4rem}
.giveblock .more{margin-top:.4rem}
.giveblock h2{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;font-size:1.4rem;line-height:1.1;letter-spacing:-.015em;margin:0;padding:0;padding-right:2rem;margin-bottom:.1rem}
.giveblock__note{font-size:.94rem;color:rgba(11,58,73,.72);margin:0;max-width:42ch;line-height:1.55}
/* Payment marks: consistent size, aligned, not floating in space */
.paylogo{max-width:120px;height:auto;margin-top:.5rem;opacity:.9}
/* Bank panel: tighter, and the number is the point */
.bank{margin:0;display:grid;gap:0;background:var(--sand);padding:.85rem 1rem;margin-top:.2rem}
.bank>div{grid-template-columns:7.5rem minmax(0,1fr);padding:.5rem 0;gap:.7rem}
.bank dt{color:rgba(11,58,73,.6);font-size:.78rem;letter-spacing:.02em}
.bank dd{margin:0;white-space:normal;font-size:.95rem;line-height:1.4}
.bank strong{font-size:1.22rem;display:inline-block}
.postal{font-style:normal;font-size:.9rem;line-height:1.5;color:rgba(11,58,73,.85);background:var(--sand);padding:.75rem .9rem;margin-top:.2rem}
/* The closing note should not sit alone on a wide empty field */
.givewrap .privacy{max-width:64ch;padding-top:1.25rem;border-top:1px solid rgba(11,58,73,.14)}
/* Seven nav items now (Home added). Tighten spacing and raise the point at
   which the desktop nav collapses so it never crowds the Get help button. */
.nav a{text-decoration:none;font-size:.98rem;font-weight:500;padding:.55rem .75rem;color:rgba(251,248,242,.82);border-bottom:0!important;position:relative}
/* Inline explanatory figures (charts, pattern diagrams, step cards) */
.fig{margin:1.75rem 0;max-width:100%}
.fig svg{width:100%;height:auto;display:block;border-radius:2px}
.fig figcaption{font-family:var(--body);font-size:.85rem;font-style:italic;
  color:rgba(11,58,73,.62);margin-top:.7rem;max-width:66ch;line-height:1.55}
.fig--dark figcaption, .on-dark .fig figcaption{color:rgba(251,248,242,.6)}
.article .fig{margin-block:2rem}
/* ==========================================================================
   PROPORTION FIXES
   ========================================================================== */
/* Logo was undersized against a 7-item nav and a full-bleed hero. */
.logo img{height:56px}
.masthead.is-stuck .logo img{height:42px}
.masthead__inner{display:flex;align-items:center;gap:2rem;min-height:96px;transition:min-height .25s cubic-bezier(.2,.7,.3,1)}
.masthead.is-stuck .masthead__inner{min-height:74px}
/* PromptPay QR was 190px, too small to scan comfortably from a laptop screen.
   A Thai QR needs roughly 260px+ for a phone to lock on at arm's length. */
.qr img, .qr picture{width:100%;height:auto;display:block}
/* Diagrams on dark bands should read as part of the band, not a pasted panel */
.fig--dark svg{border-radius:3px}
.sec--dark .fig, .on-dark .fig{margin-block:2rem}
/* ==========================================================================
   POLISH
   ========================================================================== */
/* The pull quote was running the full width and losing its force. */
.pull{max-width:26ch}
/* Two-column body text: give the columns a hairline so they read as a pair */
/* Credentials band: give each item a rule so it reads as a set of facts */
.creds dt{font-family:var(--meta);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-light);margin-bottom:.45rem}
/* Stage bands: heavier separation and a number that carries weight */
.stage__num{font-family:var(--meta);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin:0;padding-top:.35em}
.stage h3{font-family:var(--display);font-variation-settings:var(--fr-serious);font-weight:600;font-size:var(--t-xl);line-height:1.14;letter-spacing:-.018em;margin:0 0 .8rem;margin-bottom:1rem}
.stage ul{list-style:none;margin:0;padding:0;font-size:var(--t-md);margin-top:1.25rem}
.stage li{padding:.65rem 0;border-top:1px solid var(--rule-dark)}
/* Section rhythm: more air between major bands */
.sec, .article, .model, .tline, .letter{padding-block:clamp(3rem,6.5vw,5rem)}
.stage{padding-block:clamp(2.75rem,6vw,4.5rem)}
/* Help band: make the numbers unmistakable */
.lines b{font-family:var(--meta);font-size:1.6rem;font-weight:500;letter-spacing:.02em}
.lines a{padding:1rem 0}
/* Buttons in the hero: equal visual weight, clearer hierarchy */
.hero .actions .btn{padding:1rem 1.7rem;font-size:1.02rem}
/* Logo served as <picture>; constrain the footer instance */
.logo picture{display:block;line-height:0}
.logo picture img{height:56px;width:auto}
.masthead.is-stuck .logo picture img{height:42px}
.foot__brand .logo picture img{height:40px}
/* ==========================================================================
   CONTRAST FIX
   --teal-light on the deep band measured 3.21:1, which fails WCAG AA for the
   small uppercase labels that use it. A lighter tint is introduced for those
   surfaces only; the original stays where it passes (on --ink, 5.09:1).
   ========================================================================== */
:root{/* --- Petrol ladder, all derived from the brand teal ---------------- */
  --ink:        #0B3A49;/* deepest. dominant dark ground              */
  --deep:       #0F5A70;/* mid. second stage                          */
  --teal:       #0F7593;/* BRAND, exact. 4.97:1 on paper — body-safe  */
  --teal-light: #62B2C9;/* 5.09:1 on ink — body-safe on dark          */

  /* --- Red, rationed to the help path and the mark ------------------- */
  --red:      #ED1C25;/* BRAND, exact. graphic use only            */
  --red-ink:  #C8121A;/* 5.90:1 with white — grounds carrying text */

  /* --- Warm relief --------------------------------------------------- */
  --paper: #FBF8F2;--sand:  #F5E6C8;/* --- Heart planes, available as a quiet UI accent ------------------ */
  --fold-light: #F3F3F4;--fold-shade: #CDCCCC;--rule-dark:  rgba(251,248,242,.18);--rule-light: rgba(11,58,73,.16);/* --- Type ---------------------------------------------------------- */
  --display:'Instrument Serif','Anuphan',Georgia,serif;--body:'Anuphan','IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;--meta:'Anuphan',system-ui,sans-serif;--fr-serious:normal;--t-xs:.75rem;--t-sm:.8125rem;--t-md:.9375rem;--t-base:1.0625rem;--t-lg:1.25rem;--t-xl:1.625rem;--t-2xl:clamp(2rem,1.4rem + 2.3vw,3rem);--t-3xl:clamp(2.5rem,1.6rem + 3.4vw,4.4rem);--gut:clamp(1.25rem,4vw,3rem);--maxw:1180px;--label-col:9rem;--display:'Instrument Serif','Anuphan',Georgia,serif;--teal-pale:#9BD6E5}
/* 4.84:1 on --deep, 6.9:1 on --ink */
.creds dt, .stage--2 .stage__num, .sec--deep .label, .impact span, .creds__list>div{color:var(--teal-pale)}
.creds__list>div{padding:.9rem 1.5rem .9rem 0;border-top:2px solid var(--teal-light);padding-top:1rem;border-top-color:var(--teal-pale)}
.impact span{display:block;margin-top:.45rem;font-size:var(--t-md);color:rgba(251,248,242,.86);max-width:22ch}
.impact__grid>div{border-left:2px solid var(--teal-light);padding-left:1.1rem;border-left-color:var(--teal-pale)}
.stage--2 .more{color:var(--teal-pale)}
/* Build version in the footer: present but quiet */
.ver{display:inline-block;margin-left:.6rem;padding:.1rem .5rem;border-radius:2px;
  background:rgba(251,248,242,.08);color:rgba(251,248,242,.45);
  font-size:.72rem;letter-spacing:.03em;font-variant-numeric:tabular-nums;cursor:default}
/* PromptPay QR: white surround so the quiet zone is preserved on the sand
   card background, and a size a phone can lock onto from arm's length. */
.qr picture, .qr img{display:block;width:100%;height:auto}
.qr figcaption{font-size:.82rem;color:rgba(11,58,73,.62);text-align:center;margin-top:.6rem;font-style:normal}
.giveblock .bank strong{font-size:1.1rem;letter-spacing:.02em}
/* ==========================================================================
   VIDEO LIBRARY
   14 identical tiles with titles burned over the thumbnails was unreadable and
   gave no sense of what any film was. Now: one featured film, then grouped
   sets with the title and source as real text below each thumbnail.
   ========================================================================== */
.feature{display:grid;gap:1.5rem;margin-top:1.5rem}
.feature__player .yt{border-radius:3px}
.feature__meta h3{font-family:var(--display);font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);
  line-height:1.15;margin:0 0 .6rem}
:lang(th) .feature__meta h3{font-family:var(--body);font-weight:600;line-height:1.4}
.feature__meta p{margin:0 0 .5rem;color:rgba(11,58,73,.78);max-width:42ch}
.feature__year{font-size:.8rem;font-weight:600;letter-spacing:.1em;color:var(--teal);
  text-transform:uppercase}
.grouph{font-family:var(--body);font-weight:400;font-size:1.02rem;
  color:rgba(11,58,73,.72);margin:0 0 1.25rem;max-width:52ch;line-height:1.6}
.vcard{margin:0;display:grid;gap:.65rem}
.vcard figcaption{display:grid;gap:.15rem}
.vcard figcaption b{font-weight:600;font-size:.97rem;line-height:1.35;color:var(--ink)}
.vcard figcaption span{font-size:.82rem;color:rgba(11,58,73,.6)}
.ytgrid{display:grid;gap:1.75rem 1.5rem;margin-top:1.75rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
/* Thumbnail: no burned-in title now that captions sit below */
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:var(--ink);cursor:pointer;overflow:hidden;border-radius:3px;text-align:left}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.94;transition:opacity .25s,transform .5s cubic-bezier(.2,.7,.3,1)}
.yt:hover img{opacity:1;transform:scale(1.04)}
.yt__play::before{content:"";width:56px;height:40px;background:var(--red-ink);border-radius:8px;transition:background .2s,transform .2s}
/* Press list: outlet, headline and a line of context, not a bare link */
.press a{display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:.2rem 1rem;align-items:start;background:var(--paper);border:1px solid var(--rule-light);padding:1.1rem 1.3rem;text-decoration:none;color:var(--ink);transition:border-color .18s,transform .18s}
.press b{font-family:var(--meta);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);grid-column:1}
.press span{font-size:1.02rem;font-weight:600;grid-column:1;line-height:1.35}
.press small{grid-column:1;font-size:.86rem;color:rgba(11,58,73,.62);line-height:1.5}
.press svg{grid-row:1/4;grid-column:2;color:var(--teal);align-self:center}
/* ==========================================================================
   MOBILE FIX PASS
   ========================================================================== */
/* BUG: .pull had no mobile sizing. 26ch at 1.5rem is wider than a 360px
   viewport, so the quote ran off the right edge of the screen. */
/* Responsive diagrams: wide version on desktop, vertical on phones.
   Replaces the horizontal-scroll behaviour, which hid half the diagram
   behind an edge with no indication there was more to see. */
.dgm__tall{display:none}
.dgm__wide svg, .dgm__tall svg{width:100%;height:auto;display:block}
/* Anything still wide enough to need scrolling gets a visible cue */
/* Belt and braces against horizontal overflow on small screens */
/* ==========================================================================
   DONATE v5 — hierarchy by intent
   Most people arriving at a donate page want to give online now, so card
   payment leads. Thailand-local giving sits beside it, since PromptPay and
   bank transfer are one decision, not two. US cheque and Cord sit below,
   because that route is a minority and needs the least urgency.
   ========================================================================== */
.giveblocks{grid-template-columns:minmax(0,1fr);gap:1.25rem}
.giveblock--lead{border-left-width:5px}
.giveblock--lead h2{font-size:1.5rem}
.giveblock__fine{margin:.4rem 0 0;font-size:.82rem;color:rgba(11,58,73,.55)}
.giveblock--wide{border-left-color:var(--teal)}
.giveblock--wide h2{font-size:1.35rem}
.giveblock--wide::before{content:none}
.giveblock__col{display:grid;gap:.75rem;align-content:start}
.giveblock__col .btn{justify-self:start;margin-top:.4rem}
.giveblock__col .paylogo{margin-top:.2rem}
/* Numbering removed: the order now carries the meaning, not the count. */
.giveblock::before{content:none;position:absolute;top:1.3rem;right:1.4rem;font-family:var(--display);font-size:2.1rem;line-height:1;color:rgba(11,58,73,.09)}
/* The QR already prints the account name and Biller ID beneath the code,
   so repeating them in a panel underneath was redundant. */
.qr{margin:.4rem 0 .2rem;max-width:270px;background:#fff;padding:.9rem;border:1px solid rgba(11,58,73,.14);border-radius:3px;width:100%;margin-inline:auto}
.giveblock .bank{margin-top:.9rem}
/* ==========================================================================
   GIVE BUTTON IN THE MASTHEAD
   Deliberately secondary to Get help. On a child-protection site the help
   route must remain the loudest thing on the page: a child or a worried adult
   in difficulty should never have to distinguish it from a fundraising ask.
   So Give is an outlined teal button and Get help stays solid red. Distinct,
   findable, and clearly not competing.
   ========================================================================== */
.give-btn{display:inline-flex;align-items:center;flex:none;text-decoration:none;
  font-family:var(--body);font-weight:600;font-size:var(--t-md);
  padding:.68rem 1.15rem;border:1.5px solid var(--teal-pale);border-radius:2px;
  color:var(--teal-pale);background:transparent;margin-right:.6rem;
  transition:background .2s,color .2s,border-color .2s}
.give-btn:hover{background:var(--teal-pale);color:var(--ink);border-color:var(--teal-pale)}
/* Give inside the mobile menu, above the contact details */
.mnav__give{display:flex;align-items:center;justify-content:center;min-height:48px;
  margin:.9rem 0 .2rem;border:1.5px solid var(--teal-pale);border-radius:2px;
  color:var(--teal-pale);font-weight:600;text-decoration:none}
.mnav__give:hover{background:var(--teal-pale);color:var(--ink)}
/* Give now: the primary action on the donate page itself */
.btn--give{background:var(--teal);color:#fff;gap:.6rem;font-size:1.08rem;
  padding:1.05rem 1.9rem;box-shadow:0 6px 18px -8px rgba(15,117,147,.8)}
.btn--give:hover{background:#0d6885;transform:translateY(-1px)}
.btn--give::after{content:none}
.btn--give svg{flex:none}
/* ==========================================================================
   RESPONSIVE LAYER
   Every media query now lives at the end of the file, in its original order.
   Previously some were declared before later top-level rules that reset the
   same properties, so ten of them never applied: the timeline grid, the
   donate card layout, the bank detail rows and the logo height all kept their
   desktop values on a phone. Cascade order is the whole fix.
   ========================================================================== */
@media (min-width:880px){
.cols{grid-template-columns:var(--label-col) minmax(0,1fr);gap:0 3.5rem;align-items:start}
}
@media (max-width:620px){
.logo img{height:34px}
}
@media (max-width:1080px){
.nav{display:none}
.menu-toggle{display:inline-flex;margin-left:auto;background:none;border:1px solid var(--rule-dark);
    color:var(--paper);font-family:var(--meta);font-size:.7rem;letter-spacing:.1em;
    padding:.55rem .85rem;cursor:pointer;text-transform:uppercase}
}
@media (min-width:720px){
.duo{grid-template-columns:1fr 1fr}
}
@media (min-width:820px){
.doc{grid-template-columns:5.5rem minmax(0,1fr) 12rem;align-items:baseline}
}
@media (min-width:820px){
.stage__grid{grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.stage--2 .stage__grid>figure{order:-1}
}
@media (min-width:820px){
.stage .shot--tall{aspect-ratio:4/3}
}
@media (min-width:840px){
.dcard{grid-template-columns:128px minmax(0,1fr) 230px}
}
@media (max-width:640px){
.stagenav b{font-size:.62rem}
.stagenav span{font-size:.9rem}
}
@media (min-width:820px){
.founder__grid{grid-template-columns:.36fr 1fr;gap:3rem;align-items:center}
}
@media (min-width:1081px){
.mnav{display:none!important}
}
@media (max-width:640px){
.util__hours, .util__mail{display:none}
.hero--banner{min-height:78svh}
.hero--banner h1{font-size:clamp(2rem,9vw,2.6rem)}
.actions .btn{flex:1 1 100%;justify-content:center;min-height:48px}
.stage__grid, .quote__grid, .founder__grid{gap:1.25rem}
.dcard{grid-template-columns:minmax(0,1fr)}
.dcard__cover{width:96px}
.stagenav b{font-size:.58rem}
.stagenav span{font-size:.85rem}
.stagenav a{padding:.8rem .6rem;min-height:44px}
.tline__list::before{left:1.6rem}
.tline__list li{grid-template-columns:3.2rem minmax(0,1fr);gap:1rem}
.tline__list li::before{left:calc(1.6rem - 4px)}
.tline__year{padding-right:.8rem}
.filters{top:68px}
.chip{min-height:36px}
.lines a{min-height:48px;align-items:center}
}
@media (max-width:400px){
.lang{display:none}
}
@media (min-width:760px){
.psa{grid-template-columns:1fr 1fr}
}
@media (min-width:880px){
.contact-grid{grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);
  gap:3.5rem;align-items:start}
}
@media (max-width:640px){
.film__frame{width:64vw}
.stagehead--short{min-height:40svh}
}
@media (max-width:640px){
.tline__list::before{left:4.2rem}
.tline__list li{grid-template-columns:3.4rem minmax(0,1fr);gap:0 1.6rem}
.tline__list li::before{left:calc(4.2rem - 5px)}
.tline__year{font-size:1.1rem}
}
@media (min-width:820px){
.vmv--3{grid-template-columns:repeat(3,1fr);gap:0 2rem}
.vmv--3>div{border-top:2px solid var(--red-ink)}
}
@media (min-width:880px){
.cols{grid-template-columns:minmax(0,1fr);gap:0}
.cols>.label{margin-bottom:1.1rem;padding-top:0;
    display:flex;align-items:center;gap:.7rem}
.cols>.label::after{content:"";flex:1;height:1px;background:currentColor;opacity:.22;
    max-width:180px}
.cols>.label b{display:inline;margin:0 0 0 .5rem}
}
@media (max-width:520px){
.giveblock{padding:1.4rem 1.35rem}
.bank>div{grid-template-columns:minmax(0,1fr);gap:.15rem}
.bank strong{font-size:1.2rem}
}
@media (min-width:820px){
.quote__grid{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:3.5rem;align-items:center}
}
@media (max-width:819px){
.quote .shot{max-width:180px}
}
@media (min-width:820px){
.founder__grid{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:3.5rem}
}
/* superseded: the two-column donate layout now starts at 900px */
@media (min-width:1180px){
.giveblocks{gap:1.5rem}
}
@media (max-width:1080px){
.nav{display:none}
.menu-toggle{display:inline-flex;margin-left:auto}
}
@media (min-width:1081px){
.nav{display:flex}
.menu-toggle{display:none}
}
@media (max-width:700px){
/* Wide diagrams scroll horizontally on phones rather than shrinking to
     unreadable type. */
  .fig{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fig svg{min-width:660px}
}
@media (max-width:1180px){
.logo img{height:48px}
}
@media (max-width:620px){
.logo img{height:38px}
}
@media (min-width:820px){
/* Give the PromptPay card room for the larger code. */
  .giveblock:first-child{grid-row:span 1}
}
@media (min-width:1100px){
.pull{max-width:30ch}
}
@media (min-width:760px){
.duo{column-gap:3.5rem}
.duo p:last-child{position:relative}
.duo p:last-child::before{content:"";position:absolute;left:-1.75rem;top:.35em;bottom:.35em;
    width:1px;background:currentColor;opacity:.16}
}
@media (max-width:1180px){
.logo picture img{height:48px}
}
@media (max-width:620px){
.logo picture img{height:38px}
}
@media (max-width:520px){
.ver{display:block;margin:.4rem 0 0}
}
@media (min-width:820px){
.feature{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.5rem;align-items:center}
}
@media (max-width:700px){
.pull{font-size:clamp(1.25rem,1.05rem + 1.4vw,1.6rem);line-height:1.3;
    max-width:100%;hyphens:auto}
:lang(th) .pull{font-size:clamp(1.1rem,1rem + 1vw,1.35rem);line-height:1.55}
}
@media (max-width:760px){
.dgm__wide{display:none}
.dgm__tall{display:block}
/* the scroll fallback is no longer needed for diagrams that have a
     vertical variant */
  .fig .dgm{overflow:visible}
.fig .dgm svg{min-width:0}
}
@media (max-width:700px){
.fig{position:relative}
.fig svg{min-width:0}
}
@media (max-width:700px){
.wrap{overflow-x:hidden}
h1, h2, h3, .sec-h, .pull, .standfirst, p, li{overflow-wrap:anywhere;word-break:normal}
.lines a{flex-wrap:wrap}
.lines span{text-align:left;width:100%}
.bank>div{grid-template-columns:minmax(0,1fr)}
.steps li{padding-left:2.9rem}
.steps li::before{width:2rem;height:2rem;font-size:1rem}
.contact-facts>div{grid-template-columns:4.5rem minmax(0,1fr)}
}
@media (min-width:900px){
.giveblocks{grid-template-columns:repeat(2,minmax(0,1fr))}
.giveblock--wide{grid-column:1 / -1}
}
@media (min-width:760px){
.giveblock--wide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:2rem;align-items:start}
}
@media (max-width:1080px){
.give-btn{display:none}
}
/* ==========================================================================
   PRINT
   People in this field print things: a helpline card for a staff room wall,
   an article to read away from a screen. Printing the site as-is wastes ink
   on dark bands and prints navigation nobody can click.
   ========================================================================== */
@media print{
*{background:#fff!important;color:#000!important;box-shadow:none!important}
.util, .masthead, .mnav, .menu-toggle, .give-btn, .help-btn, .lang, .film, .progress, .yt, .ytgrid, .foot__grid, .social, .filters, .btn--ghost, .stagehead__img, .hero__img{display:none!important}
body{font-size:11pt;line-height:1.45}
.wrap{max-width:none;padding:0}
h1{font-size:20pt}
h2, .sec-h{font-size:14pt;page-break-after:avoid}
h3{font-size:12pt;page-break-after:avoid}
p, li{orphans:3;widows:3}
.sec, .article, .stage, .model, .tline{padding-block:.6rem;page-break-inside:auto}
figure, .fig, .dgm, table{page-break-inside:avoid}
.dgm__wide{display:none}
.dgm__tall{display:block}
/* The helplines are the reason to print. Make them the loudest thing. */
  .help{border:2pt solid #000;padding:10pt;page-break-inside:avoid}
.lines b{font-size:16pt;font-weight:700}
.lines a{border-top:1pt solid #666}
/* Show link targets so a printed page is still usable */
  .article a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
.foot::after{content:"hugproject.org · +66 092 599 8799 · connect@hugproject.org";
    display:block;font-size:9pt;padding-top:6pt;border-top:1pt solid #999}
}
/* ==========================================================================
   DONATE v6 — remove the dead space
   The grid stretched both cards to match the taller one, so the card with
   less in it held a large void. Cards now size to their own content, and the
   lead card carries a short list of what a gift funds, which is useful in
   itself rather than filler.
   ========================================================================== */
.giveblocks{align-items:start}
.giveblock{height:auto}
.givelist{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:0}
.givelist li{padding:.8rem 0;border-top:1px solid rgba(11,58,73,.14);
  font-size:.94rem;line-height:1.55;color:rgba(11,58,73,.78)}
.givelist b{display:block;font-family:var(--body);font-weight:600;font-size:.98rem;
  color:var(--ink);margin-bottom:.12rem}
:lang(th) .givelist li{line-height:1.75}
/* The US card sat in a wide box with a lot of air on the right */
.giveblock--wide{padding-block:1.5rem}
@media (min-width:760px){
.giveblock--wide{grid-template-columns:minmax(0,1fr) minmax(0,320px);
    gap:2.5rem;align-items:center}
}
.giveblock--wide .postal{margin:0}
/* Stage headings on the overview page are h2 for correct document outline,
   but keep the visual weight of the h3 they replaced. */
.stage .stage-h{font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);line-height:1.14;
  letter-spacing:-.018em;margin:0 0 1rem;padding-top:0}
.stage .stage-h::before{content:none}
:lang(th) .stage .stage-h{font-family:var(--body);font-weight:600;line-height:1.4;letter-spacing:0}

/* Form error summary */
.form-error ul{margin:.5rem 0 0;padding-left:1.1rem}
.form-error li{margin:.25rem 0}
.form-error a{color:#fff;text-underline-offset:3px}
.form-error a:hover{text-decoration-thickness:2px}
.form-error:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ==========================================================================
   DONATE v7 — tighten the rhythm
   Faults in v6: the two cards ended at very different heights, leaving a
   ragged bottom edge; the QR sat in its own bordered box inside an already
   bordered card, a box within a box; and loose vertical gaps made the cards
   read as a list of parts rather than one offer each.
   Fix: the QR and the bank details now sit side by side inside the Thailand
   card, which roughly halves its height and brings the pair into balance.
   Spacing is set once, on the card, instead of per element.
   ========================================================================== */
.giveblock{gap:.85rem;padding:1.75rem 1.9rem 1.6rem}
.giveblock>*{margin:0}
.giveblock__note{max-width:44ch}

/* QR beside the account details */
.paypair{display:grid;gap:1.25rem;align-items:start;margin-top:.35rem}
@media (min-width:520px){
  .paypair{grid-template-columns:auto minmax(0,1fr);gap:1.5rem}
}
.paypair .qr{width:168px;max-width:168px;margin:0;padding:0;border:0;background:none}
.paypair .qr img{border:1px solid rgba(11,58,73,.16);border-radius:2px;background:#fff}
.paypair .qr figcaption{margin-top:.45rem;font-size:.78rem;text-align:center;
  color:rgba(11,58,73,.6)}
.paypair .bank{margin:0;background:none;padding:0}
.paypair .bank>div{grid-template-columns:minmax(0,1fr);gap:.1rem;padding:.45rem 0;
  border-top:1px solid rgba(11,58,73,.14)}
.paypair .bank>div:first-child{border-top:0;padding-top:0}
.paypair .bank dt{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(11,58,73,.55)}
.paypair .bank dd{font-size:.98rem;line-height:1.4}
.paypair .bank strong{font-size:1.25rem;letter-spacing:.02em;color:var(--ink)}

/* The lead card: list sits closer to the button it explains */
.givelist{margin-top:.5rem}
.givelist li{padding:.7rem 0}
.giveblock .btn{margin-top:.3rem;width:auto;align-self:start}
.giveblock__fine{margin-top:.15rem}
.giveblock .paylogo{margin:.15rem 0 .2rem;max-width:135px}

/* US card: no longer needs the wide treatment now the pair above is balanced */
.giveblock--wide{padding:1.75rem 1.9rem 1.6rem}
@media (min-width:760px){
  .giveblock--wide{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:2rem}
}

/* What your gift supports: a band under the routes, not cargo inside one card.
   Keeps the two lead cards the same height and gives the three programmes
   equal weight, which is also the honest reading: a gift funds all three. */
.supports{margin-top:1.75rem;padding-top:1.5rem;border-top:2px solid rgba(11,58,73,.16)}
.supports__h{font-family:var(--display);font-weight:400;font-size:1.4rem;
  letter-spacing:-.012em;margin:0 0 1rem;padding-top:0}
.supports__h::before{content:none}
:lang(th) .supports__h{font-family:var(--body);font-weight:600;letter-spacing:0;font-size:1.2rem}
.givelist--row{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){
  .givelist--row{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem}
}
.givelist--row li{border-top:3px solid var(--red-ink);padding:.8rem 0 0}
.givelist--row li:nth-child(2){border-top-color:var(--teal)}
.givelist--row li:nth-child(3){border-top-color:var(--teal-pale)}