/* ============================================================
   Mak Fai — makfai.org PORTAL
   Modern editorial redesign over the original hybrid-band site.

   System: warm ivory + near-black carry the interface; deep jade,
   muted gold and a restrained red appear only as accents; the
   photography supplies the colour. Inter carries the site, headings
   included (one .disp system) and the split-hero LION DANCE / KUNG FU
   poster type, which is the site's identity; Fraunces is the serif for
   numerals and the italic taglines.

   Band rhythm kept from the original: dark hero → dark values → ivory
   intro / traditions → dark community story + gallery (video
   thumbnails want a dark ground) → dark booking band → ivory
   contact → near-black footer. The neon flicker on "still
   shining" is the one surviving piece of C-ID sign language.
   ============================================================ */
/* Fonts are self-hosted (assets/fonts/) so every visitor, on every device and
   browser, gets the identical font files, and a slow fonts.googleapis.com can
   no longer hold the first paint. They are the woff2 files and @font-face
   rules Google Fonts served to macOS/Android/Linux Chrome and Firefox for
   Fraunces 400-600 (opsz), Inter 400/500/600/700/900 and Poppins 600. Google
   used to serve Windows Chrome/Edge a slightly different build of each file
   (same design, different hinting data), so Windows small text may differ by
   a hair from how it looked before; never checked on a real Windows machine.
   All three families are SIL Open Font License (see assets/fonts/OFL.txt). */
/* fraunces vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/fraunces-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* fraunces latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* inter cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* inter cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* inter greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* inter greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* inter vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* inter cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* inter cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* inter greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* inter greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* inter vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* inter cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* inter cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* inter greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* inter greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* inter vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* inter cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* inter cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* inter greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* inter greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* inter vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* inter cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* inter cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* inter greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* inter greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* inter vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* poppins devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/poppins-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* poppins latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/poppins-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* poppins latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/poppins-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*{box-sizing:border-box}
:root{
  /* dark ground */
  --bg:#0B0708;
  --panel:#171013;
  --ink:#F6EFE8;
  --muted:#B3A69E;
  --line:rgba(242,180,65,.16);
  --line-soft:rgba(246,239,232,.09);

  /* accents — used sparingly */
  --red:#E63B52;        /* dark-ground action        4.7:1 on --bg  */
  --gold:#F2B441;       /* dark-ground highlight    10.4:1          */

  /* ivory ground */
  --paper:#FAF6EF;
  --card:#FFFFFF;
  --ink-l:#221A15;      /* 14.9:1 on paper */
  --muted-l:#6B5E55;    /*  5.6:1          */
  --jade:#1E5A44;       /*  7.3:1 on paper — the editorial accent   */
  /* The same green at display weight, for dark grounds only: --jade is
     2.5:1 on --bg and disappears there. Currently unreferenced: the hero
     DANCE word and the Donate fills use #006837 (white text on it is 7.7:1). */
  --jade-bright:#39B44A;
  --red-l:#C8102E;      /*  5.0:1          */
  --bronze:#8A5E0C;     /*  4.9:1          */
  --line-l:rgba(34,26,21,.16);
  --line-l-soft:rgba(34,26,21,.09);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.24,1);
  --sec:clamp(96px,11vw,150px);   /* section rhythm */
}
html{scroll-behavior:smooth}
/* Horizontal lock. This used to be overflow-x:clip on body alone, which
   needs Safari 16+; on older iOS it degrades to visible and the decorative
   glows -- which deliberately run ~50px past each edge -- let the whole page
   pan sideways. hidden is honoured everywhere, so it goes first as the
   floor; clip upgrades it where supported because, unlike hidden, it clips
   without turning the root into a scroll container. Both html and body are
   pinned so neither can end up the sideways scroller. */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* "Opens in a new tab" mark. Was a bare U+2197; iOS gives that codepoint
   emoji presentation by default, so it rendered as a blue-and-white emoji
   tile in the footer instead of a hairline arrow. Drawn instead of typed,
   so it can't be substituted by any platform's emoji font. */
.ext{display:inline-block;width:.58em;height:.58em;margin-left:.3em;
  vertical-align:baseline;position:relative;top:-.3em;opacity:.72}
.ext svg{width:100%;height:100%;display:block}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(22px,4vw,48px)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid currentColor;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink-l);
  color:#fff;padding:10px 18px;font-size:13px;letter-spacing:.08em;
  transition:top .25s var(--ease)}
.skip:focus-visible{top:16px}
/* <main tabindex="-1"> takes focus from the skip link (and Back to top);
   it is a landing point, not a control, so no ring */
main:focus{outline:none}
/* keep a control reached by Tab clear of the fixed header (105px tall;
   88px at 720 and under). Element-level, so section anchor offsets
   (scroll-margin on the sections) aren't doubled. */
:where(a,button,input,textarea,select,summary){scroll-margin-top:120px}
/* invisible landing pads for the pre-redesign section ids */
.anchor{display:block;position:relative;top:-96px;visibility:hidden;height:0}

main,footer{position:relative;z-index:1}
header{position:relative;z-index:60}

/* ============================ NAV ============================
   Transparent over the hero, ivory once scrolled. Every element that
   needs to swap colour gets an explicit `.nav.scrolled X{...}` rule --
   this used to be
   driven by two custom properties (--nav-ink/--nav-line) read via
   var(), which is the more elegant version of this, but it could not
   be made to reliably repaint in testing here, so it's written out
   the plain way instead: verbose, but every value is traceable to an
   exact selector instead of an inherited variable. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),
             box-shadow .4s var(--ease);
}
.nav.scrolled{
  background:rgba(250,246,239,.92);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom-color:var(--line-l-soft);
  box-shadow:0 8px 30px rgba(24,16,10,.08);
}
.nav-in{display:flex;align-items:center;gap:30px;height:104px;
  max-width:1400px;margin:0 auto;padding:0 clamp(20px,2.4vw,36px)}
/* .brand, .nav-social and .nav-donate are positioned with z-index:56, a
   holdover from the retired full-screen mobile menu (it painted at z-55).
   Kept as-is: harmless, and removing it is not worth re-testing stacking. */
.brand{position:relative;z-index:56;
  display:flex;align-items:center;gap:13px;margin-right:auto}
/* height-locked, width auto -- the crest (assets/branding/mak-fai-crest-3.png) isn't a
   perfect circle/square like the old crest, so a fixed square box would
   squash it. */
.brand img{width:auto;height:70px}
/* Wordmark and calligraphy stack centred on each other. The negative right
   margin cancels the tracking after the final letter, which would otherwise
   push MAK FAI's optical centre left of the calligraphy's. */
.brand-t{display:flex;flex-direction:column;align-items:center}
.brand-t b{margin-right:-.2em}
.brand-t b{display:block;color:#fff;font-size:24px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.2;
  white-space:nowrap;
  transition:color .4s var(--ease)}
.nav.scrolled .brand-t b{color:var(--ink-l)}
/* calligraphy-final.png is white artwork on transparency -- correct as-is
   against the dark hero nav, but the light
   .nav.scrolled ivory bar needs it flattened dark instead, same
   fix used elsewhere in this project for the same asset. */
.brand .brand-calli{display:block;width:auto;height:23px;margin-top:5px;
  transition:filter .4s var(--ease)}
.nav.scrolled .brand-calli{filter:brightness(0)}
.nav-links{display:flex;align-items:center;gap:30px}
/* Measured dead-centre on .nav-in (both at the exact same y as the crest),
   but a flat row of icons next to the taller brand block (crest + two lines
   of type) reads as sitting low regardless -- optical centring needs a
   small nudge up that mathematical centring doesn't. */
/* Donate CTA -- the hero's DANCE green, #006837, with white text (7.7:1).
   Ordered so it lands far right, after the social icons. */
.nav-donate{order:2;position:relative;z-index:56;transform:translateY(-5px);
  display:inline-flex;align-items:center;flex-shrink:0;
  padding:11px 20px;border-radius:999px;
  background:#006837;color:#fff;
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:background .25s var(--ease),transform .25s var(--ease),
             box-shadow .25s var(--ease)}
.nav-donate:hover,.nav-donate:focus-visible{
  transform:translateY(-8px);
  box-shadow:0 8px 24px rgba(0,104,55,.2746),0 0 16px rgba(0,104,55,.18)}
.nav-donate:active{transform:translateY(-5px) scale(.98)}
.brand{order:0}
.nav-links{order:1}
.nav-social{display:flex;align-items:center;gap:5px;transform:translateY(-5px)}
/* No circle, no fill by default -- just the skinny glyph. .ico-ring is a
   decorative ring that draws itself on hover/focus (an SVG circle whose
   stroke-dasharray equals its own circumference, animating dashoffset from
   full to 0), with a soft frosted "glass" disc blooming in behind it. */
.nav-social a{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;color:#fff;
  transition:color .4s var(--ease),transform .3s var(--ease)}
.nav-social a:hover,.nav-social a:focus-visible{transform:translateY(-2px)}
.nav.scrolled .nav-social a{color:var(--ink-l)}
/* Soft dark disc behind each glyph while the nav is transparent over the
   hero photo -- at 1920 the icons sit on a white banner in the kung fu
   shot and all but vanished. Fades out once the paper nav takes over. */
.nav-social a::before{content:"";position:absolute;inset:8%;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(11,7,8,.5) 0,rgba(11,7,8,.3) 58%,rgba(11,7,8,0) 100%);
  transition:opacity .4s var(--ease)}
.nav.scrolled .nav-social a::before{opacity:0}
.ico-ring{position:absolute;inset:0;pointer-events:none}
.ico-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:scale(.5);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.nav.scrolled .ico-ring::before{
  background:rgba(34,26,21,.08)}
.ico-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ico-ring circle{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.9;
  stroke-dasharray:119.4;stroke-dashoffset:119.4;
  transition:stroke-dashoffset .6s var(--ease)}
.nav-social a:hover .ico-ring::before,.nav-social a:focus-visible .ico-ring::before{
  opacity:1;transform:scale(1)}
.nav-social a:hover .ico-ring circle,.nav-social a:focus-visible .ico-ring circle{
  stroke-dashoffset:0}
/* Rendered a good bit larger than the old 17px + shape-rendering:geometricPrecision
   so the thin (1.1 stroke) glyphs anti-alias cleanly instead of looking soft --
   a skinny line at a tiny pixel size is exactly what reads as "blurry". */
.ico-glyph{position:relative;width:21px;height:21px;shape-rendering:geometricPrecision}

/* ========================= BUTTONS / CTAS =========================
   Two voices: .btn — filled, squared, uppercase; .cta — a bare text
   link over a hairline. Both share the arrow that turns ↗ on hover. */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:16px 28px;border-radius:2px;font-family:var(--sans);
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;border:1px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .25s var(--ease),
             box-shadow .3s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink-l);color:var(--paper)}
.btn-ink:hover{background:#000;transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(24,16,10,.22)}
.btn-paper{background:var(--paper);color:var(--ink-l)}
.btn-paper:hover{background:#fff;transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.4)}
/* Why Donate CTA: the hero/nav Donate green so the ask stands out on the
   dark band. White on #006837 is 7.7:1. */
.btn-paper.btn-donate{background:#006837;color:#fff}
.btn-paper.btn-donate:hover{background:#007A41;color:#fff}
.cta{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:4px 0 10px;font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-l);border-bottom:1px solid var(--line-l);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.cta:hover{border-bottom-color:currentColor}
.cta-light{color:var(--ink);border-bottom-color:var(--line-soft)}
/* arrow that swaps → for ↗ */
.arr{position:relative;width:15px;height:15px;overflow:hidden;flex:none}
.arr svg{position:absolute;inset:0;width:15px;height:15px;
  transition:transform .32s var(--ease),opacity .32s var(--ease)}
.arr .a2{transform:translate(-10px,10px);opacity:0}
.btn:hover .arr .a1,.cta:hover .arr .a1{transform:translate(10px,-10px);opacity:0}
.btn:hover .arr .a2,.cta:hover .arr .a2{transform:none;opacity:1}
/* click ripple (span injected by JS) */
.ripple{position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.3);transform:scale(0);opacity:.7;
  animation:rip .6s var(--ease) forwards}
@keyframes rip{to{transform:scale(3.2);opacity:0}}

/* ============================ HERO ============================
   The identity: lion dance left, crest on the seam, kung fu right.
   Split system unchanged — each panel spans the whole hero and is
   clipped to its half, so each image is sized to the VISIBLE half
   and pinned to its own side (at width:100% `cover` would crop
   against the full-width box and frame the wrong part entirely). */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--bg)}
/* Container for the split-photo identity moment (photos, crest, both
   wordmarks, the hanzi watermarks). On desktop this just fills .hero exactly
   like its contents always did; on mobile .hero grows to 136svh and .hero-cta
   (Support us + the nonprofit line) overlays the bottom of the photo. */
.hero-visual{position:absolute;inset:0}
.hero-split{position:absolute;inset:0;z-index:0}
.hero-split-panel{position:absolute;inset:0;z-index:1}
.hero-split-lion{clip-path:inset(0 50% 0 0);background:#0A1F14}
.hero-split-kungfu{clip-path:inset(0 0 0 50%);background:#241804}
.hero-split-panel img{position:absolute;top:0;width:50%;height:100%;
  object-fit:cover;object-position:center}
.hero-split-lion img{left:0}
.hero-split-kungfu img{right:0}
/* evens the daylight kung fu shot against the dark indoor lion stage */
.hero-split-kungfu::after{content:"";position:absolute;inset:0;
  background:rgba(11,7,8,.24);pointer-events:none}
/* scrim: only where something sits on top — the outer edges hold the
   type, the top strip holds the nav, the bottom holds tag + scroll hint */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,7,8,.55) 0%,rgba(11,7,8,.14) 24%,transparent 40%),
    linear-gradient(270deg,rgba(11,7,8,.55) 0%,rgba(11,7,8,.14) 24%,transparent 40%),
    linear-gradient(180deg,rgba(11,7,8,.5) 0%,transparent 22%,
                    transparent 64%,rgba(11,7,8,.74) 100%);
}
/* the poster type — Inter 900, squeezed for the tall narrow cut */
.hero-word{position:absolute;z-index:2;top:50%;margin:0;
  color:#fff;text-transform:uppercase;
  font-family:var(--sans);font-weight:900;
  font-size:clamp(42px,8.7vw,128px);line-height:.82;letter-spacing:-.035em;
  white-space:nowrap;pointer-events:none;
  text-shadow:0 6px 34px rgba(0,0,0,.45)}
.hero-word span{display:block}
.hw-green{color:#006837}
.hw-gold{color:#F4B21E}
.hero-word-lion{left:clamp(24px,2.6vw,38px);text-align:left;
  transform:translateY(-50%) scaleX(.78);transform-origin:left center}
.hero-word-kungfu{right:clamp(24px,2.6vw,38px);text-align:right;
  transform:translateY(-50%) scaleX(.78);transform-origin:right center}
/* Corner "Learn more" links -- desktop only (see the media query below),
   underlined by default; hover draws in a second line just under the
   first rather than just changing colour. */
/* One line, not two: no persistent text-decoration underline -- just the
   ::after line, which draws in on hover/focus and draws back out when you
   leave, so it "reappears" each time rather than stacking a second line
   under an always-on one. */
.hero-learn{position:absolute;z-index:2;bottom:36px;
  font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
  padding-bottom:6px}
.hero-learn-lion{left:clamp(24px,2.6vw,38px)}
.hero-learn-kungfu{right:clamp(24px,2.6vw,38px)}
.hero-learn::after{content:"";position:absolute;left:0;right:100%;
  bottom:0;height:1px;background:currentColor;
  transition:right .4s var(--ease)}
.hero-learn:hover::after,.hero-learn:focus-visible::after{right:0}
/* Watermark hanzi -- sits behind the LION/DANCE and KUNG/FU type (z-index:1,
   same layer as the split photos, painted after them so it's above the
   photo but under the word), big and black but low-opacity so it reads as
   a quiet texture, not a competing headline.
   The hairline white outline lifts the glyphs off the darkest parts of the
   photo, where a black-on-black watermark otherwise disappears entirely.
   Width is in em, not px, so it stays a hairline at every clamp size
   instead of turning into a thick rim on mobile. paint-order puts the
   stroke behind the fill so only its outer half shows -- browsers without
   it just get a stroke straddling the edge, which still reads as a border. */
.hero-cjk{position:absolute;z-index:1;top:50%;transform:translateY(-50%);
  margin:0;color:#000;opacity:.63;font-weight:700;line-height:.88;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",var(--sans);
  font-size:clamp(120px,16.5vw,290px);pointer-events:none;user-select:none;
  -webkit-text-stroke:.014em rgba(255,255,255,.52);
  paint-order:stroke fill;
  text-shadow:0 0 .07em rgba(255,255,255,.14)}
.hero-cjk-lion{left:clamp(20px,4vw,64px);text-align:left}
.hero-cjk-kungfu{right:clamp(20px,4vw,64px);text-align:right}
/* centred bottom of the hero -- .btn-paper (ivory) reads clearly against
   both the dark lion stage and the kung fu half. Shorter/squarer than the
   shared .btn default, lighter weight, and softly rounded rather than the
   site-wide near-sharp 2px corner. */
.hero-support{position:absolute;z-index:2;left:50%;bottom:62px;
  transform:translateX(-50%);
  padding:14px 22px;border-radius:999px;font-weight:400}
/* Same lift-and-glow as .nav-donate, tinted to this button's own ivory
   rather than the Donate green. The transform has to restate the
   translateX(-50%) that centres it, or hovering would knock it off-centre. */
.btn-paper.hero-support:hover,.btn-paper.hero-support:focus-visible{
  transform:translate(-50%,-3px);
  box-shadow:0 8px 24px rgba(250,246,239,.2609),0 0 16px rgba(250,246,239,.171)}
.btn-paper.hero-support:active{transform:translate(-50%,0) scale(.98)}
/* Demoted to a quiet caption under the button now that "Training the next
   generation of leaders" carries the headline on its own. */
.hero-nonprofit{position:absolute;z-index:2;left:50%;bottom:23px;
  transform:translateX(-50%);margin:0;white-space:nowrap;
  font-family:'Poppins',var(--sans);font-weight:600;
  font-size:clamp(11px,1.06vw,12.5px);letter-spacing:.04em;
  color:rgba(246,239,232,.75)}
/* staggered entrance */
.hero [data-stagger]{opacity:0;animation:rise .9s var(--ease) forwards}
.hero .hero-word[data-stagger]{animation-name:rise-word}
@keyframes rise{from{opacity:0;transform:translate(-50%,-44%)}
  to{opacity:1;transform:translate(-50%,-50%)}}
.hero .hero-support,.hero .hero-nonprofit{animation-name:rise-tag}
@keyframes rise-tag{from{opacity:0;transform:translate(-50%,10px)}
  to{opacity:1;transform:translate(-50%,0)}}
@keyframes rise-word{from{opacity:0}to{opacity:1}}
[data-stagger="2"]{animation-delay:.35s}
[data-stagger="3"]{animation-delay:.5s}
[data-stagger="5"]{animation-delay:.95s}
[data-stagger="8"]{animation-delay:1.05s}
/* the words keep their own transforms, so they only fade */
.hero-word[data-stagger]{animation-duration:1.1s}

/* ========================= SECTION PRIMITIVES ========================= */
section{padding:var(--sec) 0;scroll-margin-top:104px}
#bookform{scroll-margin-top:128px}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin:0 0 20px}
.band-light .eyebrow{color:var(--jade)}
/* Bold uppercase grotesque -- the "Who we are" treatment (see .intro-title),
   now the shared heading voice for every section instead of just that one.
   .disp-rule is the short line that goes with it, standing in for what used
   to be a plain margin under the serif version. */
.disp{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,4.4vw,54px);line-height:1;letter-spacing:-.01em;
  margin:0;color:#fff}
.band-light .disp{color:var(--ink-l)}
.disp-xl{font-size:clamp(36px,5.6vw,72px)}
/* One green, one gold, split by ground rather than by section: the accent
   rules go --gold on the dark bands and --jade on paper. No single hex can
   do both -- the bright hero green measures 2.5:1 on --paper and --jade
   only 2.5:1 on --bg -- so the pair is the unification, not a compromise. */
.disp-rule{display:block;width:36px;height:2px;margin:26px 0 30px;
  background:var(--gold);border-radius:1px}
.band-light .disp-rule{background:var(--jade)}
.lede{color:var(--muted);font-size:18px;max-width:56ch;margin:0}
.band-light .lede{color:var(--muted-l)}
.band-light{background:var(--paper);color:var(--ink-l)}
.band-light p{color:#453B33}
/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}
/* the one surviving neon: flickers like a real C-ID sign */
.n-gold{color:var(--gold);
  text-shadow:0 0 10px rgba(242,180,65,.7),0 0 34px rgba(242,180,65,.32)}
@keyframes flicker{
  0%,56.8%,58.2%,58.9%,60.4%,100%{opacity:1}
  57.2%{opacity:.55}
  57.7%{opacity:.92}
  59.6%{opacity:.7}
}
.flick{animation:flicker 9s linear infinite}
.flick.d2{animation-duration:12s;animation-delay:3.4s}

/* ============================ INTRO ============================ */
.sec-intro{padding-bottom:calc(var(--sec) * .3)}
/* Named areas so mobile can restack copy/photo/cta in a different order
   than desktop without fighting grid auto-placement or DOM order. */
/* The photo column carries more of the width than it used to (was .92fr with
   a 96px gap). The group panorama is short for its width, so at the old size
   the faces got very small -- giving the column more room scales the whole
   photo up without distorting it. The copy column still lands around 480px,
   a comfortable measure for 17px body text. */
.intro-grid{display:grid;grid-template-columns:1fr 1.2fr;
  grid-template-areas:"copy photo" "cta photo";
  column-gap:clamp(32px,4.5vw,64px);row-gap:14px;align-items:start}
.intro-copy{grid-area:copy}
.intro-photo{grid-area:photo}
/* The 1974/50+ facts used to float centred beneath the whole grid as an
   unattached third row -- reads as an afterthought. Folded into the copy
   column's own close instead: a hairline, the two facts, then Learn more,
   so it reads as one editorial unit (story, then vitals, then the link)
   rather than a stray banner. */
.intro-close{grid-area:cta;align-self:start;display:flex;
  flex-direction:column;gap:26px;padding-top:26px;
  border-top:1px solid var(--line-l-soft)}
.statline{display:flex;flex-wrap:wrap;text-align:left;
  gap:clamp(28px,4vw,44px)}
.stat b{display:block;font-family:var(--serif);font-weight:520;
  font-size:clamp(22px,2.2vw,28px);line-height:1;color:var(--ink-l);
  letter-spacing:-.01em}
.stat i{font-style:normal;display:block;margin-top:6px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-l)}
/* Bold uppercase grotesque, a variant of the site's .disp heading --
   a plainer, more graphic heading voice for this one intro, closer to a
   wordmark than a headline. The short rule underneath stands in for the
   eyebrow label that used to sit above it. */
.intro-title-row{display:flex;align-items:center;gap:22px;margin:0}
/* Stays on one line, and is sized as large as that allows. nowrap enforces
   the single line; the ceiling is what keeps it inside the column, which the
   wider photo narrowed to ~480px. Measured limit before the title collides
   with the calligraphy beside it is ~61px at desktop and ~50px at 1024, so
   58px / 4.6vw sits just under both with a few px of margin. Raising either
   number further pushes the row out of the column rather than wrapping it. */
.intro-title{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,58px);line-height:1;letter-spacing:-.01em;
  white-space:nowrap;margin:0;color:var(--ink-l)}
/* mak-kwoon.png is a real alpha-transparent cutout of mak-kwoon.jpg's ink
   strokes (the JPG has no alpha; a mix-blend-mode:multiply was tried
   instead but flashed white during the .reveal fade-in -- an ancestor's
   animated opacity isolates blend compositing per spec, so the multiply
   blended against transparent instead of the page background mid-transition.
   A real cutout sidesteps the whole class of bug.) */
.intro-calli{height:clamp(88px,11vw,132px);width:auto;flex-shrink:0}
.intro-rule{display:block;width:36px;height:2px;margin:30px 0 34px;
  background:var(--jade);border-radius:1px}
.intro-copy p{margin:0 0 20px;max-width:58ch}
/* the photo rides lower than the text — deliberate asymmetry -- and nudged
   right within its own column so it doesn't read flush/off-centre against
   the wider text column beside it. */
/* Left indent dropped (was clamp(16px,3vw,40px)) so the photo starts at the
   column edge and keeps that width for itself. */
.intro-photo{margin:clamp(24px,4vw,72px) 0 0 0}
/* Ratio matches assets/about-section/assoc-group.jpg natively (1024x544), not
   the 4/3.1 this frame used to hold. A group photo is the one case where a
   crop costs something real -- at 4/3.1 roughly a third of the width goes,
   taking the lion and the dragon head at either edge with it. Update this if
   the photo is swapped.
   height:auto is required, not tidiness: the img carries width/height
   attributes (which reserve space and stop layout shift), and those map to a
   presentational height. That makes the box definite and cancels
   aspect-ratio outright -- the frame renders 457x544 instead of 16:8.5. */
.intro-photo img{width:100%;height:auto;aspect-ratio:1024/544;object-fit:cover}
/* Slightly larger photo on the two-column layout, without narrowing the copy
   column (the one-line headline is sized to it): the figure grows the same
   amount into the gap between the columns and into the page margin, ~8%.
   Single-column layouts (<=960px) are unchanged. */
@media (min-width:961px){
  .intro-photo{--grow:clamp(0px,1.9vw,24px);
    width:calc(100% + var(--grow) * 2);margin-left:calc(var(--grow) * -1);margin-right:calc(var(--grow) * -1)}
}
.intro-photo figcaption{margin-top:14px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-l);
  display:flex;align-items:center;gap:8px}
.intro-photo figcaption .pin{flex-shrink:0;color:var(--red-l)}
/* WHAT WE DO -- its own dark band now, same treatment as Values (gold
   eyebrow/seal on black) rather than a light section. */
.sec-programs{background:var(--bg);color:var(--ink);
  border-top:1px solid rgba(242,180,65,.16)}
.runs-intro{margin-top:0;text-align:center}
.runs-intro .disp{margin-inline:auto}
.runs-intro .v-divide{margin-bottom:0}

/* What we do -- one row per program, photo side alternating. Kept apart
   from Traditions' floating photo + text: here each row is one white sheet
   the photo bleeds into, so the three read as a set rather than as more
   Traditions rows. Rows run wider than .wrap and stay short, so they read
   as bands rather than blocks. */
.runs{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(44px,5.5vw,72px);
  width:min(1320px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}
.run{display:grid;grid-template-columns:5fr 7fr;min-height:clamp(220px,17vw,260px);
  background:var(--card);border-radius:2px;overflow:hidden}
.run:nth-child(odd) .run-photo{order:2}
.run:nth-child(odd){grid-template-columns:7fr 5fr}
.run-photo{position:relative;background:var(--panel);
  display:flex;align-items:center;justify-content:center}
.run-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.run-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:clamp(26px,2.6vw,38px) clamp(28px,4vw,64px)}
.run-title{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,2.6vw,34px);line-height:1;letter-spacing:-.01em;
  margin:0 0 10px;color:var(--ink-l);text-wrap:balance}
.run-line{font-family:var(--serif);font-style:italic;font-weight:450;
  font-size:17px;color:var(--bronze);margin:0 0 12px}
.run-body{margin:0;max-width:64ch;color:var(--muted-l);line-height:1.65}

/* ========================= TRADITIONS ========================= */
.sec-trad{padding-top:calc(var(--sec) * .5);padding-bottom:0}
/* Separates this section from About above it now that the gap between
   them has been tightened up. */
.trad-intro{border-top:1px solid var(--line-l);padding-top:clamp(40px,5vw,64px)}
.trad{padding:clamp(56px,7vw,104px) 0}
.trad:last-child{padding-bottom:var(--sec)}
.trad-grid{display:grid;grid-template-columns:7fr 4fr;
  gap:clamp(36px,5.5vw,88px);align-items:center}
.trad-rev .trad-grid{grid-template-columns:4fr 7fr}
.trad-rev .trad-photo{order:2}
.trad-rev .trad-copy{order:1}
.trad-photo{position:relative;margin:0;overflow:hidden}
.trad-photo > img{width:100%;height:auto;aspect-ratio:16/10.5;object-fit:cover}
.trad-copy{position:relative}
.trad-kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--jade);font-weight:600;margin:0 0 10px}
.trad-title{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,40px);line-height:1;letter-spacing:-.01em;
  margin:0 0 14px;color:var(--ink-l)}
.trad-line{font-family:var(--serif);font-style:italic;font-weight:450;
  font-size:17.5px;color:var(--bronze)!important;margin:0 0 16px}
.trad-copy > p:not(.trad-kicker):not(.trad-line):not(.trad-domain){
  margin:0 0 24px;max-width:44ch}
.trad-domain{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-l)!important;margin:14px 0 0}

/* ========================== VALUES ==========================
   The one centred, decorated section on the page -- ink-and-paper scenery
   behind, brush rings around the icons. Everything here is scoped to
   .sec-values so the shared .disp / .eyebrow rules stay left-aligned
   everywhere else. */
/* No longer .band-light -- the whole section went black-and-gold, matching
   the theme already established inside the .values box, rather than
   leaving the heading/watermarks on paper around a dark box. */
.sec-values{position:relative;overflow:hidden;background:var(--bg);color:var(--ink);
  padding-top:calc(var(--sec) * .45);padding-bottom:calc(var(--sec) * .5);
  border-top:1px solid rgba(242,180,65,.16)}
/* ---- background scenery -- all retinted gold, was jade/ink for paper ---- */
.values-deco{position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden}
/* seigaiha (wave scale) corner, drawn with stacked radial gradients */
.deco-wave{position:absolute;top:-10px;right:0;
  width:clamp(200px,26vw,380px);height:clamp(150px,18vw,260px);
  background-image:radial-gradient(circle at 50% 100%,transparent 20%,
    rgba(242,180,65,.5) 21%,rgba(242,180,65,.5) 23%,transparent 24%,
    transparent 36%,rgba(242,180,65,.5) 37%,rgba(242,180,65,.5) 39%,
    transparent 40%,transparent 52%,rgba(242,180,65,.5) 53%,
    rgba(242,180,65,.5) 55%,transparent 56%);
  background-size:46px 23px;opacity:.16;
  -webkit-mask-image:linear-gradient(215deg,#000,transparent 72%);
  mask-image:linear-gradient(215deg,#000,transparent 72%)}
/* ---- centred header ---- */
.values-in{position:relative;z-index:1;text-align:center}
.sec-values .eyebrow{margin-bottom:14px}
.sec-values .disp{margin-inline:auto}
.v-divide{display:flex;align-items:center;justify-content:center;
  gap:18px;margin:26px auto clamp(46px,5.5vw,72px);max-width:340px}
.v-divide-line{flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,180,65,.35) 40%,rgba(242,180,65,.35))}
.v-divide-line:last-child{background:linear-gradient(270deg,transparent,rgba(242,180,65,.35) 40%,rgba(242,180,65,.35))}
.v-seal{width:30px;height:30px;flex-shrink:0;color:var(--gold);opacity:.85}

/* ---- one continuous box, no gaps -- only the slant line divides it ------
   Went through a "light frame + three separate rounded tiles" version
   first; Vincent wants the box itself back to one unbroken surface, the
   slanted gold line doing the only work of separating the three. So: zero
   grid gap, no per-tile radius (the outer .values radius + overflow:hidden
   rounds only the far left/right corners), tiles butt directly against
   each other and the gold line sits exactly on that shared edge. */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--bg);border:1px solid rgba(242,180,65,.28);
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(11,7,8,.35),inset 0 0 0 1px rgba(242,180,65,.06)}
.value{position:relative;aspect-ratio:3/4}
/* .value is also .reveal, which normally fades+slides in on scroll-in. But
   .value is the containing block for the absolutely positioned, clip-path'd
   .value-tile above, and this codebase has already hit this exact class of
   bug once (see the mix-blend-mode note on mak-kwoon.png): an ancestor's
   *animated opacity* forces the browser to isolate compositing for its
   descendants for the length of the transition, since the isolated layer
   can get rasterized from a stale pre-clip state. Killing just the
   transform (an earlier pass at this fix) wasn't enough -- the still-
   animating opacity alone was sufficient to trigger it, which is why the
   photos kept flashing their old straight edge on reload before snapping
   to the correct diagonal. Removing the whole .reveal effect here (opacity
   included, not just transform) leaves no animated property left to
   isolate compositing over. */
.value.reveal{opacity:1;transform:none;transition:none}
/* No plate -- text sits directly on the tile, anchored to the bottom edge
   (was dead-centre vertically) but still centred horizontally. aspect-ratio
   lives on .value (the grid cell) rather than here from 721px up, since at
   that width .value-tile goes position:absolute with its own left/right/
   top/bottom insets (see the diagonal-seam block below) and no longer has a
   free dimension for aspect-ratio to resolve against. */
.value-tile{position:relative;aspect-ratio:3/4;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  padding:clamp(20px,2.6vw,32px);text-align:center;
  background:radial-gradient(140% 110% at 28% 6%,#241a12 0%,var(--bg) 62%)}
/* Photo fills the tile behind the text; the radial-gradient above stays as
   the fallback base layer under it. A bottom-weighted scrim (same idea as
   .vthumb::after in the gallery) keeps the gold h3 / muted p legible over
   whatever the photo's own values are doing at the bottom edge. */
.value-photo{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover}
.value-tile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,7,8,.1) 0%,rgba(11,7,8,.32) 45%,
             rgba(11,7,8,.92) 100%)}
.value-plate{position:relative;z-index:2;width:100%}
.value-plate h3{font-family:var(--serif);font-weight:560;letter-spacing:.005em;
  font-size:clamp(20.5px,calc(1.9vw + 2.5px),25.5px);margin:0 0 10px;color:#F4B21E}
.value-plate p{margin:0 auto;max-width:24ch;font-size:14px;line-height:1.6;
  color:var(--muted)!important}
/* Slanted divider between the three -- a tilted hairline rather than the
   plumb-straight rule a plain grid seam would suggest, so the cut between
   values reads as a deliberate mark, not a leftover column boundary. Sits
   above the tiles (z-index) since the rotation drifts the ends sideways
   over the tile's full height, past the shared edge and into both
   neighbouring corners -- crossing over reads as a stitched seam rather
   than disappearing at the edge. */
.value + .value::before{content:"";position:absolute;z-index:10;
  left:0;top:-3%;bottom:-3%;width:1.5px;
  background:linear-gradient(180deg,transparent,rgba(242,180,65,.75) 14%,
             rgba(242,180,65,.75) 86%,transparent);
  transform:rotate(9deg);
  box-shadow:0 0 6px rgba(242,180,65,.35)}

/* The photos themselves used to butt together in a plumb-straight line,
   which fought with the slanted gold divider drawn on top of that same
   seam -- one straight cut, one slanted line, visibly not the same edge.
   From 721px (where the three sit side by side) each tile now overlaps its
   neighbour and is clipped along the *same* rotate(9deg) angle as the
   divider, so the photo seam itself is the slash rather than just an
   accent floating over a straight one. Math: the divider is a line
   rotated 9deg around the tile's own vertical centre; measured strictly
   between the tile's top and bottom edges (NOT the line's own -3%/+3%
   overshoot past them -- an earlier pass used the overshot 106% length
   here, which overshot the real drift and left the seam visibly off
   near the top/bottom), its two ends spread apart horizontally by
   tileHeight*sin(9deg) =~ 0.1564 * tile height; at this tile's fixed 3:4
   ratio that is ~20.86% of the tile's *width*, i.e. +-10.43% from the
   nominal seam. Left/right insets below give each tile that same 10.43%
   overlap into its neighbour, and the clip-path's bottom corner pulls
   back by the matching percentage of the now-wider box (81.1% / 82.7% --
   the two differ because tile 2 widens on both sides while tile 1 only
   widens on the right). Left untouched below 721px, where the tiles
   stack full-width and there's no side-by-side seam. */
@media (min-width:721px){
  /* aspect-ratio has to be reset here: with left+right AND top+bottom all
     definite this shouldn't matter per spec, but browsers were still
     deriving height from the (now 111%-wide) width via the ratio and
     overriding bottom:0, stretching every tile taller than .value and
     pushing the bottom-anchored text off past the visible box. */
  .value-tile{position:absolute;top:0;bottom:0;aspect-ratio:auto}
  .value:nth-child(1) .value-tile{left:0;right:-10.43%;z-index:3;
    clip-path:polygon(0 0,100% 0,81.1% 100%,0 100%)}
  .value:nth-child(2) .value-tile{left:-10.43%;right:-10.43%;z-index:2;
    clip-path:polygon(0 0,100% 0,82.7% 100%,0 100%)}
  .value:nth-child(3) .value-tile{left:-10.43%;right:0;z-index:1}
  /* Tiles 1 and 3 only widen on one side (into the neighbour they overlap),
     so .value-plate{width:100%} + justify-content:center (the shared base
     rule) centers text on the WIDENED box, not the true column underneath.
     Measured: Community's heading landed 19.5px right of its column's real
     centre, Courage's 20.5px left -- mirror images, matching the one-sided
     10.43% widening (Culture widens evenly both sides and measured 0px
     off, correctly). Fix: shrink the plate back to the true nominal width
     (100%/1.1043 =~ 90.55% of the widened box) and flush it to whichever
     edge is the tile's UNWIDENED side, instead of centering a full-width
     plate on a box that isn't actually centred on the column. A first pass
     tried correcting with a plain translateX() percentage instead -- close
     (~20px to ~3px) but not exact, since that % is relative to the plate's
     own box and doesn't account for .value-tile's padding shrinking the
     actual content width unevenly relative to the theoretical math. This
     approach doesn't depend on that assumption. */
  .value:nth-child(1) .value-tile{justify-content:flex-start}
  .value:nth-child(1) .value-plate{width:90.55%}
  .value:nth-child(3) .value-tile{justify-content:flex-end}
  .value:nth-child(3) .value-plate{width:90.55%}
}

/* ====================== COMMUNITY STORY ====================== */
.sec-story{padding:0;background:var(--bg)}
.story-photo{margin:0;position:relative;height:clamp(400px,72vh,680px);
  overflow:hidden}
.story-photo img{width:100%;height:100%;object-fit:cover;
  object-position:center 30%}
/* Fades all the way to fully solid var(--bg) right at the bottom edge
   (not just .82 opacity) so the photo dissolves into .story-body's solid
   background with no visible seam between them. */
.story-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,7,8,.22) 0%,transparent 32%,
             var(--bg) 100%)}
/* Pulled up to overlap the photo's already-faded-to-black bottom portion,
   so "Keeping tradition..." starts while the photo is still technically
   behind it -- reads as one continuous flow instead of two stacked blocks. */
.story-body{position:relative;z-index:1;
  margin-top:clamp(-212px,-18vw,-132px);
  padding:clamp(56px,7vw,96px) clamp(22px,4vw,48px) var(--sec)}
.story-copy{max-width:62ch;font-size:clamp(17px,1.6vw,19.5px);
  line-height:1.75;color:#E5DAD2;margin:0}
/* Single quote now (the second was removed) -- capped to a readable
   measure instead of stretching the pull-quote treatment full width. */
.story-quotes{margin-top:clamp(48px,6vw,80px)}
.squote{margin:0;max-width:60ch;padding:6px 0 6px clamp(20px,2.4vw,32px);
  border-left:1px solid rgba(242,180,65,.5)}
.squote p{margin:0;font-family:var(--serif);font-weight:450;
  font-size:clamp(19px,2.1vw,25px);line-height:1.45;color:var(--ink)}
.squote cite{font-style:normal;display:block;margin-top:16px;font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* ========================== GALLERY ========================== */
.sec-gallery{border-top:1px solid var(--line-soft)}
.g-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,4.5vw,56px)}
.g-head .lede{margin-top:4px}
/* ======================= DONATE PAGE (donate.html) =======================
   Shares every token and component with the portal -- this is the same site,
   not a microsite. Only the pieces that don't exist on the home page live
   here: the giving hero, the gift picker, and the "other ways" grid. */

/* --- giving hero: dark, no photo. The home page hero already spends the
   visitor's attention on imagery; this page needs them reading. --- */
/* The max() floor keeps the eyebrow clear of the 104px fixed nav's crest:
   below ~1280px .78 of --sec is only 75-88px, which tucked SUPPORT US
   under the logo. The 720px block sets its own floor for the 88px nav. */
.dhero{position:relative;overflow:hidden;
  padding-top:max(calc(var(--sec) * .78),110px);padding-bottom:calc(var(--sec) * .5)}
.dhero-glow{position:absolute;left:50%;top:-28%;transform:translateX(-50%);
  width:min(1200px,100%);height:96%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,
    rgba(242,180,65,.15),rgba(242,180,65,.05) 44%,transparent 72%)}
.dhero-in{position:relative;z-index:1}
/* constrain the text, not the container -- .dhero-in also carries .wrap,
   and setting max-width here would centre the whole block and break the
   left-aligned rhythm every other section on the site uses. */
.dhero-in h1,.dhero .lede{max-width:680px}
.dhero .lede{margin-top:4px}
.dstats{display:flex;flex-wrap:wrap;gap:clamp(26px,4.4vw,60px);margin-top:40px}
.dstat b{display:block;font-family:var(--serif);font-weight:500;
  font-size:clamp(26px,3vw,38px);line-height:1;color:var(--gold)}
.dstat i{display:block;margin-top:8px;font-style:normal;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* --- the gift picker ---------------------------------------------------- */
.sec-give{padding-top:calc(var(--sec) * .6);padding-bottom:calc(var(--sec) * .6)}
.give-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4.6vw,74px);align-items:start}
/* The give card: amount picker, then Zelle + Stripe. Larger and heavier
   than the side column so the ask carries the most visual weight. */
.give-card{background:var(--card);border:1px solid var(--line-l);
  border-radius:16px;padding:clamp(28px,3.4vw,44px);
  box-shadow:0 26px 70px rgba(34,26,21,.11)}
.give-title{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.1vw,27px);letter-spacing:-.005em;
  margin:0 0 26px;color:var(--ink-l)}
.give-label{margin:0 0 16px;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--muted-l)}
/* --- "where your gift goes" -------------------------------------------- */
.give-side .disp{font-size:clamp(24px,2.5vw,32px)}
.give-side .disp-rule{margin:20px 0 30px}
.give-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.give-list li{display:flex;gap:16px;align-items:flex-start}
.give-ico{flex-shrink:0;width:34px;height:34px;color:var(--jade);
  display:block;margin-top:1px}
.give-ico svg{width:100%;height:100%;display:block}
.give-list b{display:block;font-family:var(--sans);font-weight:700;
  font-size:15.5px;color:var(--ink-l);margin-bottom:5px}
.give-list p{margin:0;font-size:14px;line-height:1.6;color:var(--muted-l)}
.give-fine{margin:16px 0 0;font-size:12px;line-height:1.55;color:var(--muted-l)}
.give-fine a{color:var(--jade);font-weight:600}
.give-note{margin-top:34px;padding:20px 22px;border-radius:12px;
  background:rgba(30,90,68,.06);border:1px solid rgba(30,90,68,.16)}
.give-note p{margin:0;font-size:13.5px;line-height:1.6;color:#453B33}
.give-note b{color:var(--jade)}

/* --- payment methods -----------------------------------------------------
   These two options are the whole card now, so each gets real presence:
   an icon, a bigger heading, more air. Zelle carries the strongest
   treatment (thicker border, deeper tint, a bigger badge) since it's the
   one path that gets the full gift to the students. */
.pay{display:grid;gap:16px;margin:4px 0 0}
.pay-opt{padding:24px 26px;border-radius:14px;border:1.5px solid var(--line-l);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),
             transform .25s var(--ease)}
.pay-opt:hover{transform:translateY(-2px)}
.pay-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pay-ico{flex-shrink:0;width:26px;height:26px;display:block}
.pay-head b{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--ink-l)}
.pay-badge{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 11px;border-radius:6px;background:var(--jade);color:#fff;
  box-shadow:0 0 0 3px rgba(30,90,68,.14)}
/* Zelle is the house preference: it reads as the chosen path, not one of
   two -- a heavier border and a real tint, not just a hairline. */
.pay-zelle{border-width:2px;border-color:rgba(30,90,68,.5);
  background:rgba(30,90,68,.06);box-shadow:inset 0 0 0 1px rgba(30,90,68,.2)}
.pay-zelle:hover{border-color:rgba(30,90,68,.7);
  box-shadow:inset 0 0 0 1px rgba(30,90,68,.2),0 14px 34px rgba(30,90,68,.14)}
.pay-zelle .pay-ico{color:var(--jade)}
.pay-why{margin:11px 0 0;font-size:14px;line-height:1.55;color:var(--muted-l)}
.pay-to{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:16px 0 0;font-size:14.5px;color:var(--ink-l)}
.pay-to > span{color:var(--muted-l)}
.pay-to code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
/* Either value reaches the same Zelle-linked account -- solid fill and a
   heavier weight than the rest of the line so both are what the eye lands
   on, not the surrounding sentence. */
.pay-recipient{padding:8px 15px;border-radius:7px;
  border:1px solid rgba(30,90,68,.4);background:rgba(30,90,68,.14);
  color:var(--jade);font-weight:700;font-size:16px;letter-spacing:.01em}
/* "or" travels with the second address so it can't dangle at a line end */
.pay-alt{display:inline-flex;align-items:center;gap:10px}
.pay-or{color:var(--muted-l);font-size:13px;font-style:italic}
.pay-card{border-color:rgba(34,26,21,.16)}
.pay-card:hover{border-color:rgba(34,26,21,.28);
  box-shadow:0 14px 34px rgba(34,26,21,.08)}
.pay-card .pay-ico{color:var(--ink-l)}
.pay-cta{width:100%;justify-content:center;margin-top:17px;
  padding:16px 22px;font-size:13px}
.pay-note{margin:11px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted-l)}
.give-tierhint{text-wrap:balance;margin:16px 0 0;padding:12px 14px;border-radius:9px;
  background:rgba(242,180,65,.13);border:1px solid rgba(138,94,12,.28);
  font-size:13px;line-height:1.5;color:#5B4407}
.give-tierhint span{color:var(--bronze)}
.give-tierhint a{color:var(--bronze);font-weight:700}

/* --- sponsorship members ------------------------------------------------ */
/* shared shell for the dark bands: members, other ways to give, why donate, awards */
.sec-members,.sec-ways,.sec-why,.sec-awards{position:relative;overflow:hidden;
  border-top:1px solid rgba(242,180,65,.16);
  padding-top:calc(var(--sec) * .58);padding-bottom:calc(var(--sec) * .58)}
.sec-members .wrap,.sec-ways .wrap,.sec-why .wrap,.sec-awards .wrap{position:relative;z-index:1}
.members-in{max-width:820px}
.members-in .lede{margin-top:0}
.members-list{list-style:none;margin:clamp(34px,4vw,50px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px)}
.members-list li{display:flex;gap:15px;align-items:flex-start}
.members-num{flex-shrink:0;font-family:var(--sans);font-weight:700;
  font-size:12px;letter-spacing:.08em;color:var(--gold);
  padding-top:3px;opacity:.8}
.members-list b{display:block;font-family:var(--sans);font-weight:700;
  font-size:15.5px;color:#fff;margin-bottom:6px}
.members-list p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.members-fine{margin:clamp(30px,3.4vw,42px) 0 0;padding-top:22px;
  border-top:1px solid rgba(242,180,65,.18);
  max-width:62ch;font-size:12.5px;line-height:1.65;color:var(--muted)}
/* --- other ways to give (dark, reuses the awards card language) --------- */
.ways{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.5vw,20px);margin-top:clamp(36px,4.2vw,54px)}
.way{display:flex;flex-direction:column;padding:clamp(20px,2vw,26px);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  border:1px solid rgba(242,180,65,.22);
  transition:border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease)}
.way:hover{transform:translateY(-4px);border-color:rgba(242,180,65,.5);
  box-shadow:0 16px 44px rgba(0,0,0,.5)}
.way h3{margin:0 0 12px;font-family:var(--sans);font-weight:700;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.28;color:#fff}
.way p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.way-addr{color:var(--gold)!important;font-weight:500}
.way-link{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(242,180,65,.35);align-self:flex-start;
  transition:border-color .25s var(--ease)}
.way-link:hover{border-color:var(--gold)}

/* --- closing question band --------------------------------------------- */
/* Dark, like the band above it -- the gold hairline keeps the two from
   reading as one slab, same trick as .sec-awards and .sec-ways. The heading
   rule needs no rule of its own: .disp-rule already defaults to --gold and
   only turns jade under .band-light, which this section no longer carries. */
.sec-dask{border-top:1px solid rgba(242,180,65,.16);
  padding-top:calc(var(--sec) * .5);padding-bottom:calc(var(--sec) * .5)}
.dask{display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.dask .lede{margin-top:0}
.dask-links{display:flex;flex-direction:column;gap:10px;text-align:left}
.dask-links a{font-family:var(--sans);font-weight:700;
  font-size:clamp(17px,1.7vw,21px);color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(242,180,65,.34);
  transition:border-color .25s var(--ease)}
.dask-links a:hover{border-color:var(--gold)}
/* ---------- PRIVACY POLICY ----------------------------------------------
   Reuses the donate page's .dhero, then one paper band of reading copy.
   Children carry the measure, not .policy itself -- it also carries .wrap,
   and a max-width there would centre the block (same reason as .dhero-in). */
.policy-date{margin:18px 0 0;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.sec-policy{padding-top:calc(var(--sec) * .6);padding-bottom:calc(var(--sec) * .8)}
.policy > *{max-width:720px}
.policy h2{font-family:var(--sans);font-weight:700;font-size:20px;
  letter-spacing:-.01em;line-height:1.3;color:var(--ink-l);margin:44px 0 12px}
.policy h2:first-child{margin-top:0}
.policy p,.policy li{font-size:16.5px;line-height:1.7}
.policy p{margin:0 0 14px}
.policy ul{margin:0 0 16px;padding-left:20px}
.policy li{margin:0 0 10px;color:#453B33}
.policy li b{color:var(--ink-l)}
.policy a{color:var(--jade);text-decoration:underline;text-underline-offset:3px}
/* ---------- 404 PAGE ------------------------------------------------------
   Reuses .dhero; only the button row is new. */
.nf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:34px 0 0}
.nf-link{color:var(--gold);font-weight:600;text-decoration:underline;
  text-underline-offset:4px}
/* ---------- WHY DONATE ---------------------------------------------------
   Same problem .sec-awards solves one section down: this also sits between
   two dark sections (Community above, Awards below), so it borrows the
   identical fix -- gold hairline top border + one pool of warm light from
   above -- rather than inventing a second way to separate dark bands.
   Cards reuse .award's exact glass-panel/gold-hairline/hover-lift values;
   only the class names and column count (3, not 8-track) differ, since
   introducing a second card language here for the sake of it would be the
   thing worth avoiding, not a feature. */
.sec-why .lede{max-width:58ch}
.impact{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.5vw,20px);margin-top:clamp(38px,4.4vw,58px)}
.impact-card{display:flex;flex-direction:column;position:relative;
  padding:clamp(22px,2.2vw,28px);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  border:1px solid rgba(242,180,65,.22);
  transition:border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease),background .3s var(--ease)}
.impact-card:hover,.award:hover{transform:translateY(-4px);
  border-color:rgba(242,180,65,.52);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(242,180,65,.1)}
.impact-ico{flex-shrink:0;display:block;margin-bottom:16px;
  width:clamp(30px,2.6vw,34px);height:clamp(30px,2.6vw,34px);color:var(--gold)}
.impact-ico svg{width:100%;height:100%}
.impact-card h3{margin:0 0 10px;font-family:var(--sans);font-weight:700;
  font-size:clamp(16px,1.32vw,18.5px);line-height:1.28;
  letter-spacing:-.005em;color:#fff}
.impact-card p,.award p{margin:0;font-size:14px;line-height:1.62;color:var(--muted)}
.why-cta-row{margin-top:clamp(30px,3.4vw,44px);display:flex;
  align-items:center;flex-wrap:wrap;gap:18px 24px}
.why-fine{margin:0;font-size:13px;color:var(--muted)}

/* ---------- AWARDS / trophy case ----------------------------------------
   Sits between two dark sections, so without help it would read as one
   endless dark slab. A hairline gold top border plus a single pool of warm
   light from above does the separating -- a trophy case is lit from the
   top, not evenly, and that's the whole feeling this section is after. */
.awards-glow{position:absolute;left:50%;top:-14%;transform:translateX(-50%);
  width:min(1180px,100%);height:74%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,
    rgba(242,180,65,.14),rgba(242,180,65,.05) 42%,transparent 70%)}
.sec-awards .lede{max-width:52ch}
/* 8 tracks, each card spanning 2 -- reads as a clean 4-across single row
   with exactly 4 cards (the two CanAm competition cards moved down into
   .results-strip below, alongside the Can-Am championship placements they
   overlapped with). */
.awards{display:grid;grid-template-columns:repeat(8,1fr);
  gap:clamp(14px,1.5vw,20px);margin-top:clamp(38px,4.4vw,58px)}
.award{grid-column:span 2}
/* Cards are lit glass, not flat panels: a top-down white wash for the
   "display case" read, a gold hairline for the frame. */
.award{display:flex;flex-direction:column;position:relative;
  padding:clamp(20px,2vw,26px);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  border:1px solid rgba(242,180,65,.22);
  transition:border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease),background .3s var(--ease)}
.award-top{display:flex;align-items:center;gap:12px;margin-bottom:15px}
/* Vincent's own icon artwork, cut from one sheet and stored as alpha masks
   (assets/awards-section/award-*.png). Painted with currentColor through mask-image rather
   than shipped pre-tinted, so the icons stay tied to --gold instead of a
   baked-in hex -- change the token and they follow. */
.award-ico{flex-shrink:0;display:block;
  width:clamp(38px,3.7vw,46px);height:clamp(38px,3.7vw,46px);
  background-color:var(--gold);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ico-competition{-webkit-mask-image:url(assets/awards-section/award-competition.png);
  mask-image:url(assets/awards-section/award-competition.png)}
.ico-honor{-webkit-mask-image:url(assets/awards-section/award-honor.png);
  mask-image:url(assets/awards-section/award-honor.png)}
.ico-milestone{-webkit-mask-image:url(assets/awards-section/award-milestone.png);
  mask-image:url(assets/awards-section/award-milestone.png)}
.ico-city{-webkit-mask-image:url(assets/awards-section/award-city.png);
  mask-image:url(assets/awards-section/award-city.png)}
/* The "50" is a wide logotype, not a square badge -- letting it size to the
   same box makes it read small, so it gets a touch more room. */
.ico-milestone{-webkit-mask-size:112%;mask-size:112%}
.award-kind{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--gold);line-height:1.3}
.award-rule{display:block;width:26px;height:2px;border-radius:1px;
  background:var(--gold);opacity:.75;margin:0 0 16px}
.award h3{margin:0 0 12px;font-family:var(--sans);font-weight:700;
  font-size:clamp(16px,1.32vw,18.5px);line-height:1.28;
  letter-spacing:-.005em;color:#fff}
/* the one fact each card is actually about */
.award p b{color:var(--gold);font-weight:600}

/* Results strip: three panels in one row for the Can-Am placements. A big
   place number carries the fact at a glance; the italic line underneath is
   the one bit of context that number can't say on its own. */
.results-strip{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.5vw,20px);margin-top:clamp(14px,1.5vw,20px)}
.result-panel{display:flex;align-items:center;gap:20px;
  padding:clamp(18px,1.8vw,24px) clamp(22px,2.2vw,28px);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  border:1px solid rgba(242,180,65,.22);
  transition:border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease)}
.result-panel:hover{transform:translateY(-4px);border-color:rgba(242,180,65,.52);
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(242,180,65,.1)}
.result-place{flex-shrink:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,3.2vw,40px);line-height:1;color:var(--gold)}
.result-copy b{display:block;font-family:var(--sans);font-weight:700;
  font-size:clamp(14.5px,1.2vw,16px);line-height:1.32;color:#fff}
.result-copy i{display:block;margin-top:6px;font-style:normal;
  font-size:12.5px;line-height:1.5;color:var(--muted)}
.honors{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.6vw,40px);margin:0 0 clamp(44px,5.5vw,72px)}
.honor{border-top:1px solid var(--line);padding-top:18px}
.honor b{display:block;font-size:15px;color:var(--gold);letter-spacing:.01em;
  margin-bottom:6px;font-weight:600;line-height:1.4}
.honor i{font-style:normal;font-size:12px;color:var(--muted);
  letter-spacing:.06em}
/* editorial mosaic — films (lightbox), uneven on purpose */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(120px,auto);gap:clamp(14px,1.6vw,22px)}
.m-feature{grid-column:1/9;grid-row:span 2}
.m-half{grid-column:span 4}
.vcard{position:relative;overflow:hidden;cursor:pointer;
  border:0;background:var(--panel);padding:0;text-align:left;display:block;
  width:100%}
.vcard .vthumb{position:relative;overflow:hidden;height:100%;min-height:200px}
.vthumb img{width:100%;height:100%;object-fit:cover}
.vthumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(11,7,8,.9) 100%)}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;z-index:2;
  background:rgba(164,22,26,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(242,180,65,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease),background .35s var(--ease),
             box-shadow .35s var(--ease)}
/* The half-height cards are only ~170-200px tall, so a dead-centre button
   sat on a two-line title. Same 32% the mobile rule uses. */
.m-half .play{top:32%}
.play svg{margin-left:3px}
.vcard:hover .play{transform:translate(-50%,-50%) scale(1.1);
  background:var(--red);box-shadow:0 0 0 10px rgba(230,59,82,.15)}
.vmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,2vw,26px)}
.vtitle{display:block;margin:0;font-size:16px;font-weight:600;line-height:1.35;
  color:var(--ink)}
.m-feature .vtitle{font-size:clamp(19px,2.1vw,26px)}
.vmeta i{font-style:normal;display:block;margin-top:6px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  border:1px solid rgba(242,180,65,.45);color:var(--gold);
  padding:5px 12px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600}

/* ========================= BOOKING BAND ========================= */
.sec-book{position:relative;overflow:hidden;padding:calc(var(--sec) * 1.1) 0}
.book-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%;filter:brightness(.42) saturate(.92)}
.sec-book::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,7,8,.82) 0%,rgba(11,7,8,.5) 46%,
             rgba(11,7,8,.14) 100%)}
.book-in{position:relative;z-index:2}
.book-kinds{font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin:0 0 18px}
.book-copy{max-width:52ch;color:#E5DAD2;font-size:17.5px;margin:0 0 36px}
.book-ctas{display:flex;align-items:center;gap:clamp(20px,3vw,36px);
  flex-wrap:wrap}

/* ========================== CONTACT ========================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.12fr;
  gap:clamp(40px,5.5vw,88px);align-items:start}
.info-rows{margin-top:34px;display:grid;gap:2px}
.info-row{display:flex;gap:16px;align-items:flex-start;padding:18px 2px;
  border-bottom:1px solid var(--line-l-soft)}
.info-row svg{flex:none;margin-top:3px;color:var(--jade)}
.info-row b{display:block;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted-l);font-weight:600;margin-bottom:3px}
.info-row a:hover{color:var(--jade)}
/* Phone and email are the two things people actually tap in this section,
   and the bare line box left them ~20px tall -- under the 24px minimum.
   inline-block + padding grows the target; the negative margin keeps the
   text where it already sat so the row spacing is untouched. */
.info-row a{display:inline-block;padding:6px 0;margin:-6px 0}
.socials{display:flex;gap:12px;margin-top:30px}
.socials a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-l);
  display:flex;align-items:center;justify-content:center;color:var(--muted-l);
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background .25s var(--ease),transform .25s var(--ease)}
.socials a:hover{color:var(--paper);border-color:var(--ink-l);
  background:var(--ink-l);transform:translateY(-3px)}
.form{background:var(--card);border:1px solid var(--line-l-soft);
  padding:clamp(28px,3.4vw,44px);box-shadow:0 2px 20px rgba(24,16,10,.05)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-l);margin-bottom:8px;font-weight:600}
.field .opt{text-transform:none;letter-spacing:0}
.field input,.field textarea{
  width:100%;background:var(--paper);border:1px solid var(--line-l);
  border-radius:2px;padding:14px 16px;color:var(--ink-l);font:inherit;
  font-size:15px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--jade);
  box-shadow:0 0 0 3px rgba(30,90,68,.14)}
.field textarea{min-height:132px;resize:vertical}
.form-status{margin:18px 0 0;padding:12px 16px;font-size:14px;line-height:1.55;
  color:var(--ink-l);background:rgba(30,90,68,.07);border-left:2px solid var(--jade)}
.form-status a{color:var(--jade);text-decoration:underline;text-underline-offset:2px}
/* inline field errors -- existing daylight red token; .field raises it
   over .band-light p */
.field .field-err,.give-card .field-err{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--red-l)}
.form-note{font-size:13px;color:var(--muted-l);margin:16px 0 0}
.form-note a{color:var(--jade);text-decoration:underline;
  text-underline-offset:3px}

/* =========================== FOOTER =========================== */
footer{background:#080506;border-top:1px solid var(--line-soft);
  padding:clamp(56px,7vw,88px) 0 36px}
.f-top{display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;padding-bottom:clamp(32px,4vw,52px);
  border-bottom:1px solid var(--line-soft);margin-bottom:clamp(32px,4vw,52px)}
.f-brand{display:flex;align-items:center;gap:18px}
/* Was ".f-brand img", which also caught .f-calli below it and squashed the
   wide calligraphy banner into a distorted 58x58 square. Scoped to the
   crest specifically so .f-calli's own sizing rule actually wins. */
/* Height-only, like the header's .brand img. The crest is 900x747 (1.20:1);
   the old 58x58 forced it square and squashed it ~15% horizontally -- the
   same defect the calligraphy had, fixed there but not here. */
.f-logo{width:auto;height:58px}
/* Matches the header wordmark treatment (bold tracked-out uppercase sans +
   the calligraphy underneath) instead of the old serif name + text subtitle. */
.f-name{margin:0}
.f-name b{display:block;font-family:var(--sans);font-weight:700;
  font-size:22px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);line-height:1.2}
/* Same stack as the header: wordmark and the full calligraphy centred on
   each other (the negative margin cancels the tracking after the last
   letter). The calligraphy is wider than the old six-character one, so it
   is sized to sit under the wordmark rather than run past it. */
.f-name{display:flex;flex-direction:column;align-items:center}
.f-name b{margin-right:-.2em}
.f-calli{display:block;height:23px;width:auto;margin-top:5px}
.f-cols{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(26px,4vw,56px);padding-bottom:clamp(36px,5vw,60px)}
.f-h{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0 0 18px}
.f-col a,.f-here,.f-addr{display:block;font-size:14.5px;color:#D9CEC6;
  padding:5px 0;margin:0}
.f-col a{transition:color .25s var(--ease)}
.f-col a:hover{color:var(--gold)}
.f-here{color:var(--red)}
.f-addr{line-height:1.6}
.f-bottom{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;border-top:1px solid var(--line-soft);
  padding-top:26px}
.f-bottom p{margin:0;color:var(--muted);font-size:12.5px}
.f-legal{color:var(--muted);margin-left:14px;text-decoration:underline;
  text-underline-offset:2px;transition:color .25s var(--ease)}
.f-legal:hover{color:var(--gold)}
.f-bottom .top{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:8px;
  transition:color .25s var(--ease)}
.f-bottom .top:hover{color:var(--gold)}

/* ========================= LIGHTBOX ========================= */
.lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:5vw;background:rgba(6,3,4,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility .35s var(--ease)}
/* visibility flips instantly on open (opacity still fades) so the Close
   button can take focus the moment the player opens */
.lb.on{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
/* no overflow:hidden here -- it clipped the Close button, which sits above
   the frame (top:-52px), out of view */
.lb-frame{position:relative;width:min(1060px,100%);aspect-ratio:16/9;
  background:#000;
  border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.7);
  transform:scale(.96) translateY(12px);transition:transform .35s var(--ease)}
.lb.on .lb-frame{transform:none}
.lb-frame iframe{width:100%;height:100%;border:0;display:block}
.lb-close{position:absolute;top:-52px;right:0;background:none;border:0;
  color:var(--ink);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px}
.lb-close:hover{color:var(--red)}

/* ========================= RESPONSIVE ========================= */
@media (max-width:1080px){
  .trad-grid,.trad-rev .trad-grid{grid-template-columns:1fr;gap:30px}
  .trad-rev .trad-photo{order:1}
  .trad-rev .trad-copy{order:2}
  .trad-copy{max-width:60ch}
  /* stays 3-across -- the copy is short, and 2 columns would orphan the
     third value on its own row */
  .honors{grid-template-columns:1fr 1fr;gap:24px}
  .impact{grid-template-columns:1fr 1fr}
  /* three cards in two columns: let the odd one out take the full row */
  .impact-card:last-child:nth-child(odd){grid-column:1/-1}
  .awards{grid-template-columns:1fr 1fr}
  .award{grid-column:auto}
  .ways{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .give-grid{grid-template-columns:1fr;gap:44px}
  .contact-grid{grid-template-columns:1fr}
  /* Mobile order: heading/copy, then Learn more, then the photo (with its
     Chinatown-ID caption) at the very bottom -- different from desktop's
     copy+cta-beside-photo layout, so it gets its own template instead of
     just collapsing to one column. */
  .intro-grid{grid-template-columns:1fr;
    grid-template-areas:"copy" "cta" "photo"}
  .intro-close{margin-top:8px}
  .intro-photo{margin-top:24px}
  .mosaic{grid-template-columns:1fr 1fr}
  .m-feature{grid-column:1/-1;grid-row:auto}
  .m-half{grid-column:span 1}
  .vcard .vthumb{aspect-ratio:16/10;min-height:0}
}
@media (max-width:720px){
  :where(a,button,input,textarea,select,summary){scroll-margin-top:104px}
  /* Concept 1: taller mobile hero (136svh, not the original 100svh) with
     .hero-cta overlaid on the photo -- plain flat horizontal seam, lion top
     / kung fu bottom, same identity rotated from the desktop left/right. */
  .hero{min-height:136svh}
  .hero-learn{display:none}
  .hero-split-lion{clip-path:inset(0 0 50% 0)}
  .hero-split-kungfu{clip-path:inset(50% 0 0 0)}
  .hero-split-panel img{width:100%;height:50%}
  /* Plain cover-fit only had ~31px of vertical crop to work with either way
     (the box's aspect ratio is close to the photo's own), not enough range
     to both push the lion lower in frame and crop the pink competition
     banner out of view at the bottom. A modest zoom creates the extra
     overflow needed to do both at once. */
  .hero-split-lion img{left:0;top:0;transform:scale(1.18) translateY(25px)}
  .hero-split-kungfu img{right:0;top:auto;bottom:0}
  .hero-word{font-size:clamp(34px,10.5vw,50px);text-align:center;
    transform:translate(-50%,-50%) scaleX(.78);transform-origin:center}
  .hero-word-lion{left:50%;right:auto;top:24%}
  .hero-word-kungfu{left:50%;right:auto;top:74%}
  .hero-cjk{font-size:clamp(64px,24vw,120px);left:50%;right:auto;
    transform:translate(-50%,-50%);text-align:center}
  .hero-cjk-lion{top:24%}
  .hero-cjk-kungfu{top:74%}
  .hero-support{bottom:50px;padding:8px 14px;font-size:9px}
  /* the full "...to the extent allowed by law" line is ~410px on one line,
     wider than a phone -- let it wrap to two centred lines */
  .hero-nonprofit{bottom:9px;font-size:10px;white-space:normal;
    width:calc(100% - 40px);max-width:300px;text-align:center;line-height:1.45}
  @keyframes rise{from{opacity:0;transform:translate(-50%,-46%)}
    to{opacity:1;transform:translate(-50%,-50%)}}

  /* the bar is brand + social + donate here, so tighten the gap and the
     pill to keep everything off the brand at 390px */
  .nav-in{gap:8px;height:88px}
  .dhero{padding-top:92px}
  .nav-donate{padding:9px 12px;font-size:10px;letter-spacing:.08em}
  .brand{gap:9px}
  .brand img{height:52px}
  .brand-t b{font-size:17px;letter-spacing:.16em;margin-right:-.16em}
  .brand .brand-calli{height:16px;margin-top:4px}
  .nav-links{gap:0}
  /* Tap targets shrink from 46px to 36px: three of them plus the brand and
     the Donate pill will not fit a 390px bar otherwise. Still above the
     24px minimum, and the glyphs come down with them so they don't crowd. */
  .nav-social{gap:0;transform:translateY(-4px)}
  .nav-social a{width:36px;height:36px}
  .ico-glyph{width:19px;height:19px}

  .statline{gap:26px 40px}
  .frow{grid-template-columns:1fr}
  /* single column, still one continuous box: tiles stack flush (no row
     gap) and the divider becomes a short straight rule sitting exactly on
     the shared top edge between rows instead of beside columns. Vincent:
     the slant reads fine on desktop (kept there) but on a short stacked
     seam it just looked like a stray diagonal fragment -- flat and a bit
     shorter here instead. */
  .values{grid-template-columns:1fr}
  .value + .value::before{left:50%;top:0;bottom:auto;
    width:44px;height:1.5px;transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(242,180,65,.75) 20%,
               rgba(242,180,65,.75) 80%,transparent);
    box-shadow:0 0 6px rgba(242,180,65,.35)}
  .honors{grid-template-columns:1fr;gap:20px}
  .impact{grid-template-columns:1fr;gap:16px}
  .awards{grid-template-columns:1fr;gap:16px}
  .results-strip{grid-template-columns:1fr;gap:12px}
  .result-panel{gap:16px}
  .ways{grid-template-columns:1fr;gap:14px}
  .members-list{grid-template-columns:1fr;gap:22px}
  .dask{flex-direction:column;align-items:flex-start}
  .dask-links{text-align:left}
  .mosaic{grid-template-columns:1fr}
  .m-feature,.m-half{grid-column:1/-1}
  .g-head{align-items:flex-start;flex-direction:column}
  .f-cols{grid-template-columns:1fr 1fr}
  /* Footer links were ~20px tall -- under the 24px minimum and easy to
     mis-tap in a stacked column. Padding grows the target without moving
     the text, so the footer rhythm is unchanged. */
  /* Card height comes from the grid row, not the card. At 120px rows a
     two-line video title pushed the caption block up into the centred play
     button -- and the "Award-winning documentary" badge straight through it.
     Taller single rows give the caption room to clear the button, and the
     thumbnails read far better on a phone besides. */
  .runs{width:auto;left:auto;transform:none}
  .run,.run:nth-child(odd){grid-template-columns:1fr;min-height:0}
  .run:nth-child(odd) .run-photo{order:0}
  .run-photo{aspect-ratio:16/9}
  .run-copy{padding:24px 22px 26px}
  .mosaic{grid-auto-rows:minmax(240px,auto)}
  .m-feature{grid-row:auto}
  /* The caption block runs ~124px tall once it carries a badge and a
     two-line title, so a dead-centre button cannot clear it at any sane
     card height. Sitting it a third of the way down keeps it over open
     image and off the text. */
  .play{top:29%}
  .f-col a,.f-here{padding:9px 0}
  /* 9-9.5px uppercase is legible on a desktop monitor and squints on a
     phone. Only the two labels added in this build move; the hero sizes
     are Vincent's own tuning and stay put. */
  .award-kind{font-size:10.5px}
  .pay-badge{font-size:10px}
  .f-addr{padding-bottom:2px}
  .f-bottom{gap:14px}
  .f-legal{display:inline-block;padding:8px 0}
  .f-bottom .top{padding:8px 0}
  .f-top{flex-direction:column;align-items:flex-start}
  .book-ctas .btn{width:100%;justify-content:center}
  .story-photo{height:52vh}
}
/* The 720px bar only fits from ~390px up: at 375 MAK FAI ran 13px into the
   Instagram icon, at 320 57px across Instagram and Facebook. Step the brand
   block down on narrow phones; tap targets stay at 32px, above the minimum. */
@media (max-width:400px){
  .nav-in{padding-left:16px;padding-right:16px}
  .brand{gap:7px}
  .brand img{height:44px}
  .brand-t b{font-size:15px;letter-spacing:.12em;margin-right:-.12em}
  .brand .brand-calli{height:14px;margin-top:3px}
}
@media (max-width:350px){
  .nav-in{gap:4px;padding-left:12px;padding-right:12px}
  .brand{gap:6px}
  .brand img{height:38px}
  .brand-t b{font-size:13px;letter-spacing:.1em;margin-right:-.1em}
  .brand .brand-calli{height:12px}
  .nav-social a{width:32px;height:32px}
  .ico-glyph{width:17px;height:17px}
  .nav-donate{padding:8px 9px}
  /* the feature title wraps to more lines here, pushing its badge up */
  .m-feature .play{top:22%}
}
/* Under 360px the give card's content (the Zelle email pill is one
   unbreakable run) pushed the single column wider than the screen and got
   clipped by up to 36px. Pin the column to the screen, and below 340px
   let "or + email" break onto its own line. 360px and up are unchanged. */
@media (max-width:359px){
  .give-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:339px){
  .pay-alt{flex-wrap:wrap}
}
@media (max-width:420px){
  .f-cols{grid-template-columns:1fr}
  .stat b{font-size:26px}
}

/* Reduced motion: content appears, nothing moves. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero [data-stagger]{opacity:1}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   DONATE — amount picker
   Reinstated with one Stripe Payment Link per tier (a Payment
   Link takes no amount parameter, so a single flexible link
   cannot inherit a pre-picked figure). Chips sit above the two
   send-methods and drive both: the Zelle line echoes the figure,
   the Stripe button points at that tier's link.
   ============================================================ */
.amts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
.amt{
  appearance:none;cursor:pointer;padding:15px 10px;
  font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:.01em;
  color:var(--ink-l);background:var(--card);
  border:1.5px solid var(--line-l);border-radius:12px;
  transition:border-color .18s var(--ease),background .18s var(--ease),
             color .18s var(--ease),transform .12s var(--ease),
             box-shadow .18s var(--ease);
}
.amt:hover{border-color:var(--jade);transform:translateY(-1px)}
.amt:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.amt:active{transform:translateY(0)}
.amt.on{
  background:var(--jade);border-color:var(--jade);color:#fff;
  box-shadow:0 6px 18px rgba(30,90,68,.24);
}
/* $150 is the Sponsorship Member level: a small tag riding the chip's top
   edge, in the same voice as .pay-badge ("Preferred" on Zelle). The paper
   ring keeps it legible against the jade border when the chip is on. */
.amt-member{position:relative}
.amt-badge{position:absolute;top:-8px;right:8px;
  font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  line-height:1;padding:4px 7px;border-radius:5px;
  background:var(--jade);color:#fff;box-shadow:0 0 0 2px var(--paper)}
.amt-member.on .amt-badge{background:#F4B21E;color:var(--ink-l)}
.amt-other{font-size:15px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-l)}
.amt-other.on{color:#fff}

/* custom-amount field, revealed only by "Other" */
.amt-custom{position:relative;margin:0 0 14px}
.amt-cur{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--muted-l);font-weight:700;pointer-events:none}
.amt-custom input{
  width:100%;padding:14px 15px 14px 30px;
  font-family:var(--sans);font-size:16px;color:var(--ink-l);
  background:var(--card);border:1.5px solid var(--line-l);border-radius:12px;
}
.amt-custom input:focus{outline:none;border-color:var(--jade)}
/* the number spinners fight the layout and add nothing here */
.amt-custom input::-webkit-outer-spin-button,
.amt-custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amt-custom input[type=number]{-moz-appearance:textfield}

.amt-impact{margin:0 0 20px;min-height:1.2em;
  font-size:13.5px;line-height:1.5;color:var(--muted-l)}
.amt-impact:empty{margin-bottom:6px}

/* the Zelle echo — same weight as the recipient codes beside it */
#zelleamt{color:var(--jade);font-weight:700}

/* Phones: the stylesheet's own floor for small uppercase labels is ~10px
   (see .pay-badge / .award-kind), and in the 2-column grid the $150 chip
   sits directly under $25 -- the extra row gap and a shallower badge keep
   the tag clear of that chip and of its keyboard focus ring. These live
   after the base .amt-badge rule so they win the cascade. */
@media (max-width:720px){
  .amt-badge{font-size:10px;padding:4px 8px}
}
@media (max-width:560px){
  .amts{grid-template-columns:repeat(2,1fr);row-gap:16px}
  .amt-badge{top:-6px}
}