/* ==========================================================================
   The Hmong Inc. — home page, v1 draft
   Design system: wiki/clients/the-hmong-inc/the-hmong-inc-brand.md
   Register: LIGHT / INSTITUTIONAL throughout. Photography is the only dark.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
  /* light register — verified WCAG 2.x sRGB, see brand note */
  --ground:      #E6EAE9;   /* pewter. deliberately not warm cream (Sacramento owns it) */
  --raised:      #F4F6F5;
  --card:        #FFFFFF;   /* only for cards that physically float over photography */
  --ink:         #1A1A1A;   /* 14.35:1 on ground */
  --secondary:   #4F5559;   /* 6.22:1 */
  --green:       #077641;   /* the artwork fill. structure colour — 4.71:1 */
  --green-ink:   #055229;   /* 7.71:1 AAA — all green TYPE uses this */
  --green-deep:  #043B1E;
  --crimson:     #B3123A;   /* auspicious triad. white label 6.85:1 */

  --hair:        rgba(26,26,26,.13);
  --hair-strong: rgba(26,26,26,.28);

  --shell: 1416px;
  --gut: clamp(20px, 5vw, 64px);

  /* Archivo display is ONLY ever wdth 62–72 / wght 800–900.
     Archivo at wdth >= 90 is banned above 24px. That rule is the
     differentiation from Sacramento, which ships Archivo Black. */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Faustina", Georgia, "Times New Roman", serif;

  /* Latin leading. The 1.30 Vietnamese floor is restored by :lang(vi) below. */
  --lh-display: 1.12;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: var(--green-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }

::selection { background: var(--green); color: #fff; }

:focus-visible {
  outline: 3px solid var(--green-ink);
  outline-offset: 3px;
}

/* --- primitives ----------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.measure { max-width: 62ch; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 14px 20px; font-family: var(--ui);
}
.skip:focus { left: 12px; top: 12px; }

/* Display type. Condensed, heavy, tight tracking to hold together at lh 1.30. */
.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 62, "wght" 900;
  line-height: var(--lh-display);
  letter-spacing: -.012em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
/* balance evens the line widths — on a 4-word display headline that means MORE
   lines, not fewer. The hero sets its breaks by hand instead. */
.d1 { font-size: clamp(3.05rem, 8.2vw, 7.6rem); letter-spacing: -.018em; text-wrap: pretty; line-height: 1.06; }
.d2 { font-size: clamp(2.3rem, 5.1vw, 4.35rem); line-height: 1.10; }
.d3 { font-size: clamp(1.65rem, 2.9vw, 2.5rem); font-variation-settings: "wdth" 68, "wght" 850; line-height: 1.16; }
.d4 { font-size: clamp(1.18rem, 1.6vw, 1.42rem); font-variation-settings: "wdth" 72, "wght" 800; letter-spacing: -.004em; }

/* Serif voice — the institutional register speaks in Faustina. */
.lede {
  font-family: var(--body);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  line-height: 1.34;
  font-weight: 400;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: pretty;
}
.lede em { font-style: italic; }

.eyebrow {
  font-family: var(--ui);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .745rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 1.15rem;
  color: var(--secondary);
  font-variant-numeric: lining-nums tabular-nums;
}
.eyebrow--green { color: var(--green-ink); }
.eyebrow--onDark { color: rgba(255,255,255,.82); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.body-sm { font-size: 1rem; line-height: 1.58; color: var(--secondary); }

/* The double rule. Taken from the logo, which brackets the wordmark between
   two full-width rules. It is the one ornament this site uses. */
.rule2 { border: 0; margin: 0; height: 5px; position: relative; background: none; }
.rule2::before, .rule2::after {
  content: ""; position: absolute; left: 0; right: 0; background: var(--ink);
}
.rule2::before { top: 0; height: 2px; }
.rule2::after  { bottom: 0; height: 1px; opacity: .42; }
.rule2--light::before { background: var(--green); }
.rule2--light::after  { background: var(--ink); }
.rule2--onDark::before { background: #fff; }
.rule2--onDark::after  { background: #fff; opacity: .5; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--ui);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .875rem; letter-spacing: .085em; text-transform: uppercase;
  padding: 1.02em 1.7em; border-radius: 4px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn__arrow { transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary   { background: var(--green); color: #fff; border-color: var(--green); }      /* 5.71:1 */
.btn--primary:hover { background: var(--green-ink); border-color: var(--green-ink); }
.btn--crimson   { background: var(--crimson); color: #fff; border-color: var(--crimson); }  /* 6.85:1 */
.btn--crimson:hover { background: #8E0E2E; border-color: #8E0E2E; }
.btn--ghost     { background: transparent; color: var(--ink); border-color: var(--hair-strong); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(26,26,26,.045); }
.btn--onDark    { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--onDark:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--sm { padding: .82em 1.25em; font-size: .78rem; }

.linkish {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-ink); text-decoration: none;
  border-bottom: 2px solid var(--green); padding-bottom: 4px;
  display: inline-flex; gap: .5em; align-items: center;
}
.linkish:hover { color: var(--ink); border-color: var(--ink); }

/* --- utility bar ---------------------------------------------------------- */
.util {
  background: var(--green-deep); color: rgba(255,255,255,.9);
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 500;
  font-size: .795rem; letter-spacing: .05em;
  position: relative; z-index: 60;
}
.util .shell { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; min-height: 44px; flex-wrap: wrap; }
.util__when { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.util__flag {
  font-variation-settings: "wdth" 100, "wght" 800; letter-spacing: .13em;
  text-transform: uppercase; font-size: .7rem; color: #fff;
  background: var(--crimson); padding: .34em .62em; border-radius: 3px;
}
.util__links { display: flex; gap: 1.4rem; }
.util a { color: rgba(255,255,255,.9); text-decoration: none; }
.util a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 800px) { .util__links { display: none; } }

/* --- masthead ------------------------------------------------------------- */
.mast {
  position: sticky; top: 0; z-index: 50;
  transition: background-color .25s ease, box-shadow .25s ease;
  border-bottom: 0;
}
.mast .shell { display: flex; align-items: center; gap: 2rem; min-height: 84px; }
.mast__brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; margin-right: auto; }
.mast__logo { width: 54px; height: 54px; object-fit: contain; }
.mast__logo--dark { display: none; }
.mast__word {
  font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase; font-size: 1.02rem; letter-spacing: .04em; line-height: 1.15;
  color: #fff;
}
.mast__word span { display: block; font-variation-settings: "wdth" 100, "wght" 500; font-family: var(--ui);
  font-size: .66rem; letter-spacing: .17em; opacity: .8; margin-top: 3px; }

.nav { display: flex; gap: 1.9rem; align-items: center; }
.nav a {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .875rem; letter-spacing: .02em; text-decoration: none; color: #fff;
  padding: .4em 0; border-bottom: 2px solid transparent;
}
.nav a:hover { border-color: currentColor; }
@media (max-width: 1080px) { .nav { display: none; } }

/* solid state, set by JS once the hero is scrolled past */
.mast.is-solid { background: var(--ground); box-shadow: 0 1px 0 var(--hair), 0 1px 24px rgba(26,26,26,.07); }
.mast.is-solid .mast__word { color: var(--ink); }
.mast.is-solid .nav a { color: var(--ink); }
.mast.is-solid .mast__logo--light { display: none; }
.mast.is-solid .mast__logo--dark { display: block; }
.mast.is-solid .btn--onDark { color: var(--ink); border-color: var(--hair-strong); }
.mast.is-solid .btn--onDark:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.burger {
  display: none; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff;
  width: 46px; height: 42px; border-radius: 4px; cursor: pointer;
}
.mast.is-solid .burger { border-color: var(--hair-strong); color: var(--ink); }
.burger span { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px auto; }
@media (max-width: 1080px) { .burger { display: block; } }

/* --- hero ----------------------------------------------------------------- */
.hero { position: relative; margin-top: -84px; }
/* the photograph is the BACKDROP — .hero__inner is what sets the height.
   these must be layered, not stacked. */
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* two-stop scrim: legibility without turning the photograph grey */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(8,12,10,.88) 0%, rgba(8,12,10,.66) 38%, rgba(8,12,10,.22) 62%, rgba(8,12,10,.58) 88%, rgba(8,12,10,.68) 100%),
    linear-gradient(to bottom, rgba(8,12,10,.60) 0%, rgba(8,12,10,0) 34%, rgba(8,12,10,0) 62%, rgba(8,12,10,.55) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  min-height: min(94vh, 940px);
  display: flex; align-items: flex-end;
  padding-top: 172px; padding-bottom: clamp(48px, 7vw, 96px);
}
.hero__grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(32px, 5vw, 80px); align-items: end; width: 100%; }
/* NB: never size this in `ch` — ch resolves against the inherited body font,
   not the display font, and silently crushes the headline into a column. */
.hero__copy { max-width: min(780px, 100%); }
.hero .d1 { color: #fff; }
.hero .d1 .accent { color: #F0523C; }  /* fire — the one dark-register accent, 5.35:1 on night */
.hero__sub { color: rgba(255,255,255,.94); margin-top: 1.5rem; max-width: 34ch; }
.hero__ctas { display: flex; gap: .8rem; margin-top: 2.2rem; flex-wrap: wrap; }

.statrail { display: grid; gap: 1.5rem; min-width: 232px; }
.stat__k {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .68rem; letter-spacing: .175em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin: 0 0 .35rem;
}
.stat__v {
  font-family: var(--display); font-variation-settings: "wdth" 68, "wght" 850;
  text-transform: uppercase; font-size: 1.62rem; line-height: 1.3; color: #fff; margin: 0;
  font-variant-numeric: lining-nums;
}
.stat__v small { font-size: .62em; opacity: .8; display: block; font-variation-settings: "wdth" 100, "wght" 600; font-family: var(--ui); letter-spacing: .04em; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: none; }
  .statrail { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; }
}

/* --- generic section ------------------------------------------------------ */
.sec { padding-block: clamp(72px, 9vw, 136px); position: relative; }
.sec--raised { background: var(--raised); }
.sec--tight { padding-block: clamp(56px, 6vw, 88px); }
.sec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.sec__head--stack { grid-template-columns: 1fr; max-width: 42ch; }
@media (max-width: 880px) { .sec__head { grid-template-columns: 1fr; } }

.label-row { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2.6rem; }
.label-row .eyebrow { margin: 0; white-space: nowrap; }
.label-row .line { flex: 1; height: 1px; background: var(--hair-strong); }

/* --- mission -------------------------------------------------------------- */
.mission { background: var(--raised); overflow: hidden; }
.mission .sec__head { align-items: center; }
/* the photograph runs off the left edge of the viewport — the left column of an
   editorial grid should carry weight, not act as a margin. */
.mission__figure { position: relative; margin-left: calc(-1 * (max(0px, (100vw - var(--shell))) / 2 + var(--gut))); }
.mission__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 52% 42%; }
.mission__figure figcaption {
  position: absolute; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px);
  background: rgba(255,255,255,.94); padding: .7rem .95rem; border-radius: 4px; max-width: 60%;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .72rem; letter-spacing: .05em; color: var(--secondary); line-height: 1.4;
}
.mission__label { margin-bottom: 1.6rem; }
@media (max-width: 880px) {
  .mission__figure { margin-left: 0; margin-inline: calc(var(--gut) * -1); }
  .mission__figure img { aspect-ratio: 16 / 10; }
}
.mission__stmt {
  font-size: clamp(1.72rem, 3.35vw, 3.05rem); line-height: 1.27; letter-spacing: -.012em;
  margin: 0 0 2.4rem; max-width: 24ch;
}

.mission__side { border-left: 2px solid var(--green); padding-left: 1.9rem; }
.mission__side dt {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink);
}
.mission__side dd { margin: .35rem 0 1.5rem; color: var(--secondary); font-size: 1.02rem; line-height: 1.5; }
.mission__side dd:last-child { margin-bottom: 0; }

/* --- OVERLAP A: full-bleed photo band with a card overhanging its edge ----- */
.bleed { position: relative; }
.bleed__img { position: relative; height: clamp(360px, 52vw, 620px); overflow: hidden; background: var(--ink); }
.bleed__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.bleed__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,12,10,.42) 0%, rgba(8,12,10,0) 45%);
}
.bleed__tag {
  position: absolute; z-index: 3; top: clamp(20px, 4vw, 44px); left: 0; right: 0;
  color: #fff;
}
.bleed__tag .eyebrow { color: rgba(255,255,255,.86); margin: 0; }

/* the card physically overhangs the photo and lands in the section below */
.overhang { margin-top: clamp(-190px, -19vw, -110px); position: relative; z-index: 4; }
.card-panel {
  background: var(--card);
  padding: clamp(30px, 4.2vw, 60px);
  box-shadow: 0 30px 70px -30px rgba(10,20,15,.42), 0 2px 6px rgba(10,20,15,.06);
  border-radius: 4px;
  max-width: 780px;
}
.card-panel--wide { max-width: none; }

.whenwhere { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: 2rem; }
.whenwhere dt {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase; color: var(--secondary); margin-bottom: .5rem;
}
.whenwhere dd { margin: 0; font-family: var(--display); font-variation-settings: "wdth" 70, "wght" 800;
  text-transform: uppercase; font-size: 1.28rem; line-height: 1.3; font-variant-numeric: lining-nums; }
.whenwhere dd span { display: block; font-family: var(--body); font-variation-settings: normal; text-transform: none;
  font-size: .92rem; font-weight: 400; color: var(--secondary); letter-spacing: 0; margin-top: .3rem; line-height: 1.45; }

/* --- four days ------------------------------------------------------------ */
.days { border-top: 1px solid var(--hair-strong); margin-top: clamp(48px, 6vw, 82px); }
.day {
  display: grid; grid-template-columns: 92px 210px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 44px); align-items: baseline;
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--hair);
  text-decoration: none; color: inherit;
  transition: background-color .16s ease;
}
.day:hover { background: rgba(7,118,65,.045); }
.day:hover .day__go { color: var(--green-ink); transform: translateX(4px); }
.day__n {
  font-family: var(--display); font-variation-settings: "wdth" 62, "wght" 900;
  font-size: clamp(2.6rem, 4.4vw, 3.9rem); line-height: 1; color: var(--green);
  font-variant-numeric: lining-nums; letter-spacing: -.03em;
}
.day__when { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.day__when span { display: block; font-variation-settings: "wdth" 100, "wght" 500; color: var(--secondary);
  letter-spacing: .13em; font-size: .72rem; margin-top: .38rem; }
.day__what { color: var(--secondary); font-size: 1.02rem; line-height: 1.5; }
.day__what b { color: var(--ink); font-weight: 600; }
.day__go { font-family: var(--ui); font-size: 1.1rem; color: var(--hair-strong); transition: transform .18s ease, color .18s ease; }
@media (max-width: 820px) {
  .day { grid-template-columns: 62px 1fr; gap: 12px 20px; }
  .day__n { font-size: 2.4rem; grid-row: span 2; }
  .day__what { grid-column: 2; }
  .day__go { display: none; }
}

/* --- OVERLAP B: image column that breaks the section seam ----------------- */
.split { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr); }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
/* pull the photo up out of its own section so it sits across the seam */
.split__media--breakout { margin-block: clamp(-268px, -18.5vw, -110px) 0; }
.split__note {
  position: absolute; right: clamp(-14px, -1vw, 0px); bottom: clamp(-22px, -2vw, -14px);
  background: var(--card); padding: 1.1rem 1.35rem; border-radius: 4px; max-width: 290px;
  box-shadow: 0 20px 44px -22px rgba(10,20,15,.45);
  font-size: .93rem; line-height: 1.45; color: var(--secondary);
}
.split__note b { color: var(--ink); display: block; font-family: var(--ui);
  font-variation-settings: "wdth" 100, "wght" 700; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: .4rem; }
@media (max-width: 880px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split__media--breakout { margin-block: 0; }
  .split__note { position: static; max-width: none; margin-top: 1rem; box-shadow: none; border: 1px solid var(--hair); }
}

/* --- programme pillars ---------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(18px, 2.2vw, 32px); }
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .pillars { grid-template-columns: 1fr; } }
.pillar { text-decoration: none; color: inherit; display: block; }
.pillar__img { position: relative; overflow: hidden; border-radius: 4px; background: var(--ink); }
.pillar__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pillar__n {
  position: absolute; left: 0; top: 0; z-index: 2;
  background: var(--green); color: #fff; padding: .5rem .85rem;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 800;
  font-size: .72rem; letter-spacing: .16em; font-variant-numeric: lining-nums;
}
.pillar__t { margin: 1.15rem 0 .45rem; }
.pillar__d { color: var(--secondary); font-size: .97rem; line-height: 1.5; margin: 0; }
.pillar__go { margin-top: .9rem; display: inline-block; font-family: var(--ui);
  font-variation-settings: "wdth" 100, "wght" 700; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-ink); border-bottom: 2px solid var(--green); padding-bottom: 3px; }
.pillar:hover .pillar__go { color: var(--ink); border-color: var(--ink); }

/* --- support band (the one non-photographic dark moment — brand green) ----- */
.support { background: var(--green-deep); color: #fff; position: relative; overflow: hidden; }
.support .eyebrow { color: rgba(255,255,255,.72); }
.support__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
@media (max-width: 900px) { .support__grid { grid-template-columns: 1fr; } }
.support .d2 { color: #fff; }
.support__p { color: rgba(255,255,255,.86); margin-top: 1.4rem; max-width: 46ch; }
.support__ctas { display: flex; gap: .8rem; margin-top: 2.1rem; flex-wrap: wrap; }
.trustbox {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px; padding: clamp(22px, 3vw, 34px);
}
.trustbox h3 { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; margin: 0 0 1.1rem; color: rgba(255,255,255,.78); }
.trustbox ul { list-style: none; margin: 0; padding: 0; }
.trustbox li { padding-block: .78rem; border-top: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.9); font-size: 1rem; line-height: 1.45; }
.trustbox li:first-child { border-top: 0; padding-top: 0; }
.trustbox .tick { color: #2BC4A9; flex: none; font-family: var(--ui); }  /* turquoise 8.57:1 */

/* --- news ----------------------------------------------------------------- */
.chips { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.chip {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .78rem; letter-spacing: .05em; padding: .58em 1em; border-radius: 999px;
  border: 1px solid var(--hair-strong); color: var(--secondary); text-decoration: none; background: transparent;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 2.6vw, 38px); }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr; } }
.post { text-decoration: none; color: inherit; display: block; }
.post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.post__meta { display: flex; gap: .7rem; align-items: center; margin: 1.05rem 0 .55rem;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary);
  font-variant-numeric: lining-nums; }
.post__meta .cat { color: var(--green-ink); font-variation-settings: "wdth" 100, "wght" 800; }
.post__meta .dot { color: var(--hair-strong); }
.post h3 { font-family: var(--body); font-size: 1.32rem; line-height: 1.32; font-weight: 600; margin: 0 0 .5rem; letter-spacing: -.005em; }
.post:hover h3 { text-decoration: underline; text-underline-offset: .16em; }
.post p { color: var(--secondary); font-size: .97rem; line-height: 1.5; margin: 0; }

/* --- quote ---------------------------------------------------------------- */
.quote__q { font-size: clamp(1.35rem, 2.35vw, 2.05rem); line-height: 1.38; letter-spacing: -.008em; margin: 0 0 1.8rem; }
.quote__by { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700; font-size: .82rem;
  letter-spacing: .05em; margin: 0; }
.quote__by span { display: block; font-variation-settings: "wdth" 100, "wght" 500; color: var(--secondary);
  letter-spacing: .12em; font-size: .72rem; text-transform: uppercase; margin-top: .35rem; }
.quote__img img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 4px; filter: grayscale(1) contrast(1.04); }

/* --- sponsor wall --------------------------------------------------------- */
.sponsors { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.sponsor {
  background: var(--raised); min-height: 118px; display: grid; place-items: center; padding: 1.2rem;
  text-align: center;
  font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase; font-size: .96rem; line-height: 1.3; letter-spacing: .01em; color: var(--ink);
}
.sponsor span { display: block; font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 500;
  font-size: .68rem; letter-spacing: .15em; color: var(--secondary); margin-top: .45rem; }

/* --- newsletter ----------------------------------------------------------- */
.signup { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 880px) { .signup { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--secondary); }
.field input {
  font: inherit; font-size: 1rem; padding: .82em .9em; border: 1px solid var(--hair-strong);
  border-radius: 4px; background: #fff; color: var(--ink); width: 100%;
}
.field input:focus { border-color: var(--green); outline: 2px solid rgba(7,118,65,.28); outline-offset: 1px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .9rem; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-fine { font-size: .82rem; color: var(--secondary); margin: .9rem 0 0; }

/* --- footer --------------------------------------------------------------- */
.foot { background: var(--raised); border-top: 1px solid var(--hair); padding-block: clamp(56px, 6vw, 84px) 0; }
.foot__grid { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__brand { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.5rem; }
.foot__brand img { width: 60px; height: 60px; object-fit: contain; }
.foot__h { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; margin: 0 0 1.15rem; color: var(--ink); font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .62rem; }
.foot a { color: var(--secondary); text-decoration: none; font-size: 1rem; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot address { font-style: normal; color: var(--secondary); font-size: 1rem; line-height: 1.55; }
.foot__legal {
  margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hair); padding-block: 1.5rem;
  display: flex; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 500; font-size: .8rem; color: var(--secondary);
}
.foot__legal a { font-size: .8rem; }
.foot__legal nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }

/* --- post-audit adjustments (anti-ai-slop pass) --------------------------- */
h2.eyebrow, h3.eyebrow { font-size: .745rem; margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* the mission statement is an h2 now — keep it in the body voice, not display */
h2.mission__stmt { font-weight: 400; }

/* the label-row rule should meet the label, not float away from it */
.label-row .line { align-self: center; }

/* pillar cards: the "view section" links were landing on four different
   baselines because the descriptions run to different lengths */
.pillar { display: flex; flex-direction: column; height: 100%; }
.pillar__d { margin-bottom: 1rem; }
.pillar__go { margin-top: auto; }

/* Vietnamese sets uppercase diacritics in a second tier above the cap height
   (Ấ Ế Ộ Ữ). Below 1.29 they collide with the line above, so the floor is
   restored wherever Vietnamese is actually rendered. */
:lang(vi) .d1, :lang(vi) .d2, :lang(vi) .d3, :lang(vi) .d4,
.d1:lang(vi), .d2:lang(vi), .d3:lang(vi), .d4:lang(vi) { line-height: 1.30; }
:lang(vi) .lede, .lede:lang(vi) { line-height: 1.40; }

/* ==========================================================================
   Polish pass
   ========================================================================== */

/* --- 1. news cards had zero gap under the image --------------------------
   `.post p { margin: 0 }` (0,1,1) was out-specifying `.post__meta` (0,1,0)
   and killing its top margin, so the category line sat flush on the photo. */
.post .post__meta { margin: 1.2rem 0 .6rem; }
.post .post__excerpt { margin: 0; }

/* --- 2. link underlines --------------------------------------------------
   `.pillar__go` was a flex item in a column card, so it stretched to the full
   card width and dragged its 2px border across the whole card. Underlines now
   size to the text and the green bar wipes in on hover, which is the only
   motion on the page that means anything: "this one navigates". */
.linkish, .pillar__go {
  border-bottom: 0;
  width: fit-content;
  align-self: start;
  padding-bottom: 6px;
  background-image:
    linear-gradient(var(--green), var(--green)),
    linear-gradient(var(--hair-strong), var(--hair-strong));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0 2px, 100% 1px;
  transition: background-size .34s cubic-bezier(.2,.72,.28,1), color .16s ease;
}
.linkish:hover, .linkish:focus-visible,
.pillar:hover .pillar__go, .pillar:focus-visible .pillar__go {
  background-size: 100% 2px, 100% 1px;
  color: var(--green-ink);
}

/* the same treatment on dark, in the support band's link if one lands there */
.support .linkish {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35));
  color: #fff;
}
.support .linkish:hover { color: #fff; }

/* --- 3. the "why it matters" split read as broken ------------------------
   Three different bottom edges: image, a caption card dangling below it, and
   a text column ending 150px lower. The breakout is now sized so the two
   columns finish together, and the caption sits ON the photograph instead of
   hanging off its corner. */
.split__media--breakout { margin-block: clamp(-150px, -9vw, -72px) 0; }

.split__note {
  right: auto; bottom: auto;
  left: clamp(16px, 2vw, 28px);
  top: auto;
  inset-block-start: auto;
  max-width: min(330px, 62%);
}
.split__media--breakout .split__note {
  position: absolute;
  bottom: clamp(16px, 2vw, 28px);
  box-shadow: 0 18px 40px -22px rgba(10,20,15,.55);
}
.split > div > .body-sm { max-width: 58ch; }

/* --- 4. the day-row arrow was almost invisible at rest ------------------- */
.day__go { color: var(--secondary); opacity: .45; }
.day:hover .day__go { opacity: 1; }

/* the date column was 210px holding an 82px word, so the description floated
   a third of the row away from the date it belongs to */
.day { grid-template-columns: 92px 150px minmax(0, 1fr) auto; }

/* --- program cards: the lifted-print hover ------------------------------- 
   The playbook flags image rotate-on-hover as a generated signature, so this
   has to carry meaning. It does: every card is a real photograph, and the
   gesture is a print being picked up off a stack. Hence the hinge at the
   bottom edge, the lift, and the shadow arriving with it. The angle stays
   under 1.5deg on purpose — these are portraits of people in ceremonial
   dress, and anything jauntier would read as flippant.

   Transform and box-shadow only. Nothing here touches layout. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pillar__img {
    transform-origin: 50% 100%;          /* hinged on the table, not spun in place */
    transition:
      transform   .44s cubic-bezier(.2,.72,.28,1),
      box-shadow  .44s cubic-bezier(.2,.72,.28,1);
  }
  .pillar:hover .pillar__img,
  .pillar:focus-visible .pillar__img {
    transform: translateY(-9px) rotate(-1.4deg);
    box-shadow: 0 26px 44px -22px rgba(10, 20, 15, .48);
  }
  /* a loose stack, not a template: alternate cards lean the other way */
  .pillar:nth-child(even):hover .pillar__img,
  .pillar:nth-child(even):focus-visible .pillar__img {
    transform: translateY(-9px) rotate(1.4deg);
  }
  /* rhythm: the card leads, the underline follows it in */
  .pillar:hover .pillar__go,
  .pillar:focus-visible .pillar__go { transition-delay: .07s; }
}

/* Reduced motion still needs an affordance, just not a moving one. */
@media (prefers-reduced-motion: reduce) {
  .pillar:hover .pillar__img,
  .pillar:focus-visible .pillar__img {
    outline: 3px solid var(--green);
    outline-offset: 4px;
  }
}

/* ==========================================================================
   Day-by-day, rebuilt
   The 01/02/03 numeral rail was the generic pattern regardless of whether the
   ordinals were "earned". The marker is now the calendar date itself, which is
   what a visitor actually scans for, and it lets 2026 turn into 2027 in plain
   sight between the first row and the second. A hairline spine runs behind the
   date chips so the four days read as one continuous run rather than four
   detached cards.
   ========================================================================== */
.days {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  position: relative;
  border-top: 1px solid var(--hair-strong);
}
.days > li { border-bottom: 1px solid var(--hair); }

/* the spine, behind the chips */
.days::before {
  content: ""; position: absolute; z-index: 0;
  left: 39px; top: 0; bottom: 0; width: 1px;
  background: var(--hair-strong);
}

.day {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 78px 130px minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 36px);
  align-items: center;
  /* the hover plate needs air on BOTH axes. The negative margin keeps the
     content on the same left edge it had before the padding existed. */
  padding: clamp(20px, 2.4vw, 30px) clamp(14px, 1.6vw, 24px);
  margin-inline: calc(-1 * clamp(14px, 1.6vw, 24px));
  text-decoration: none; color: inherit;
  border-radius: 4px;
  transition: background-color .22s ease;
}
.day:hover, .day:focus-visible { background: rgba(7, 118, 65, .055); }

/* --- the date chip -------------------------------------------------------- */
.day__date {
  grid-column: 1;
  display: grid; place-items: center; gap: 0;
  width: 78px; padding: .5rem 0 .55rem;
  background: var(--ground);              /* masks the spine behind it */
  border: 1px solid var(--hair-strong);
  border-radius: 4px;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.day__date b {
  font-family: var(--display); font-variation-settings: "wdth" 68, "wght" 850;
  font-size: 1.72rem; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--ink);
  transition: color .22s ease;
}
.day__date i {
  font-family: var(--ui); font-style: normal;
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .64rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--secondary); margin-top: .28rem;
  transition: color .22s ease;
}
.day:hover .day__date, .day:focus-visible .day__date {
  background: var(--green); border-color: var(--green);
}
.day:hover .day__date b, .day:hover .day__date i,
.day:focus-visible .day__date b, .day:focus-visible .day__date i { color: #fff; }

/* --- weekday + year ------------------------------------------------------- */
.day__when {
  grid-column: 2;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .875rem; letter-spacing: .03em; text-transform: none; color: var(--ink);
}
.day__when span {
  display: block; margin-top: .3rem;
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: .72rem; letter-spacing: .15em; color: var(--secondary);
  font-variant-numeric: lining-nums tabular-nums;
}

.day__what { grid-column: 3; color: var(--secondary); font-size: 1.02rem; line-height: 1.55; }
.day__what b { color: var(--ink); font-weight: 600; }

/* --- the cue -------------------------------------------------------------
   A bare arrow does not say where it goes. A labelled cue does, and it reuses
   the one hover language the rest of the page already speaks: green wipes in. */
.day__cue {
  grid-column: 4;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--secondary); white-space: nowrap; padding-bottom: 5px;
  background-image:
    linear-gradient(var(--green), var(--green)),
    linear-gradient(var(--hair-strong), var(--hair-strong));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0 2px, 100% 1px;
  transition: background-size .34s cubic-bezier(.19,1,.22,1) .05s, color .2s ease;
}
.day:hover .day__cue, .day:focus-visible .day__cue {
  background-size: 100% 2px, 100% 1px; color: var(--green-ink);
}

@media (max-width: 860px) {
  .days::before { display: none; }
  .day { grid-template-columns: 78px minmax(0, 1fr); gap: 14px 20px; align-items: start; }
  .day__date { grid-row: span 2; }
  .day__when { grid-column: 2; }
  .day__what { grid-column: 2; }
  .day__cue  { grid-column: 2; justify-self: start; margin-top: .4rem; }
}

/* ==========================================================================
   Hover motion, corrected
   ==========================================================================
   ALIASING: the jagged outline around the tilted photo was `overflow: hidden`
   on the element being rotated. Chrome rasterises a clip rect on a composited,
   transformed layer without antialiasing it, so the clip edge shows as hard
   stair-stepping. Nothing clips here any more — the radius moves onto the <img>
   itself, which the compositor antialiases correctly, and the container keeps
   a matching radius purely so the box-shadow takes the right shape.

   CURVE: was one symmetric 440ms cubic-bezier(.2,.72,.28,1) in both directions,
   which is why it felt soft. Now asymmetric, per GSAP's standard easing set:
     enter  expo.out    cubic-bezier(.19, 1, .22, 1)     420ms
     exit   power2.out  cubic-bezier(.215, .61, .355, 1) 240ms
   expo.out covers most of the distance in the first third and settles into
   rest, which is what makes a hover feel answered rather than dragged. The
   exit is deliberately shorter — with four cards in a row you sweep across
   them, and a long tail on the way out leaves three cards still moving.
   The shadow trails the transform by ~100ms so the lift leads and the depth
   catches up, which is the order those two things happen physically.
   ========================================================================== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pillar__img {
    overflow: visible;                    /* was the aliasing */
    border-radius: 4px;                   /* shapes the shadow only */
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    transition:
      transform  .24s cubic-bezier(.215, .61, .355, 1),
      box-shadow .24s cubic-bezier(.215, .61, .355, 1);
  }
  .pillar__img img {
    border-radius: 4px;
    backface-visibility: hidden;
    transform: translateZ(0);             /* clean layer, only 4 of them */
  }
  .pillar:hover .pillar__img,
  .pillar:focus-visible .pillar__img {
    transform: translateY(-9px) rotate(-1.4deg);
    box-shadow: 0 26px 44px -22px rgba(10, 20, 15, .46);
    transition:
      transform  .42s cubic-bezier(.19, 1, .22, 1),
      box-shadow .52s cubic-bezier(.19, 1, .22, 1) .06s;
  }
  .pillar:nth-child(even):hover .pillar__img,
  .pillar:nth-child(even):focus-visible .pillar__img {
    transform: translateY(-9px) rotate(1.4deg);
  }
}

/* one easing vocabulary across every wipe on the page */
.linkish, .pillar__go {
  transition: background-size .32s cubic-bezier(.19, 1, .22, 1), color .18s ease;
}

/* --- small screens -------------------------------------------------------
   At 390px the wordmark was wrapping to three lines and colliding with the
   Support Us button, and the label-row's connector rule collapsed to ~30px. */
@media (max-width: 620px) {
  .mast .shell { gap: .7rem; min-height: 72px; }
  .mast__logo { width: 42px; height: 42px; }
  .mast__word { font-size: .92rem; white-space: nowrap; }
  .mast__word span { display: none; }
  .label-row { flex-wrap: wrap; gap: .6rem 1rem; }
  .label-row .line { display: none; }
}

/* ==========================================================================
   Sponsor wall
   Logos never share a bounding box, so matching their heights makes the wide
   ones shout and the stacked ones vanish. Each tile is normalised by OPTICAL
   size instead: horizontal wordmarks cap lower, stacked lockups cap higher,
   and every file is trimmed of its own whitespace first so the cap applies to
   the mark rather than to the padding it shipped with.
   ========================================================================== */
.sponsors {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 1px; background: var(--hair);
  border: 1px solid var(--hair); border-radius: 4px; overflow: hidden;
}
.sponsor {
  background: var(--raised);
  min-height: 138px;
  display: grid; place-items: center;
  padding: 1.5rem 1.35rem;
  text-align: center;
}
.sponsor img { width: auto; height: auto; object-fit: contain; max-width: 82%; }
.sponsor--wide  img { max-height: 38px; }   /* ratio > 2.4  */
.sponsor--stack img { max-height: 64px; }   /* ratio < 1.8  */

/* the typeset state — same tile, same optical weight, obviously not artwork */
.sponsor--set span {
  font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase; font-size: .95rem; line-height: 1.25;
  letter-spacing: .012em; color: var(--ink);
}
.sponsor--set em {
  display: block; font-style: normal; margin-top: .42rem;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 500;
  font-size: .66rem; letter-spacing: .15em; color: var(--secondary);
}

/* Gap-as-hairline needs every cell filled or the container colour shows
   through as grey slabs. Borders live on the tiles instead, so an unfilled
   cell is simply empty surface. Sized so seven sponsors land on one row at
   full width and degrade cleanly below it. */
.sponsors {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  background: var(--raised);
  border: 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.sponsor {
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 1.4rem 1.1rem;
}
.sponsor--stack img { max-height: 72px; }
.sponsor img { max-width: 88%; }

/* Seven marks, four shapes. Optical caps by aspect so a wide wordmark and a
   round badge carry the same weight in the row. */
.sponsor--wide  img { max-height: 34px; }   /* long horizontal lockups */
.sponsor--stack img { max-height: 60px; }   /* stacked / squarer lockups */
.sponsor--disc  img { max-height: 66px; }   /* circular badges read small   */
.sponsor img { max-width: 84%; }

/* Symbol-only marks (no wordmark beside them) need more height than a lockup
   to hold the same optical weight, and the thin-stroke ones need more still. */
.sponsor--mark img { max-height: 72px; }
.sponsor--disc img { max-height: 72px; }

/* --- support band texture -------------------------------------------------
   A flat, hand-drawn field of paj-ntaub-adjacent geometry, generated via the
   /ai-logo pipeline and then reduced to a pure alpha mask so the band keeps
   its exact #043B1E and the weight is set here, not baked into the file.
   White at 6% over green-deep lands about one step lighter, which is all it
   should ever be. It sits behind everything and never under body copy at a
   strength that could touch legibility.

   NOT CLEARED FOR SHIP: this is generated geometry, not a reproduction, and
   the paj ntaub artisan review on the brand note now covers it. */
.support > .shell { position: relative; z-index: 1; }
.support::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--support-pattern, url("img/pattern-diamond.png"));
  background-size: cover;
  background-position: 50% 50%;
  opacity: .06;
  pointer-events: none;
}

/* --- newsletter band texture ---------------------------------------------
   A different motif family from the green band on purpose: two sections
   should not wear the same texture. Elephant-foot nested squares, which is
   genuine paj ntaub vocabulary, as a dark mask on the pewter ground.
   A light ground shows a pattern far more readily than a dark one, so this
   runs at 4.5% against the green band's 5%.
   Same artisan-review gate as the green band. */
.sec--texture { position: relative; overflow: hidden; }
.sec--texture > .shell { position: relative; z-index: 1; }
.sec--texture::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--news-pattern, url("img/pattern-elephant.png"));
  background-size: cover;
  background-position: 50% 50%;
  opacity: .045;
  pointer-events: none;
}
/* user note: subtle. Dialled the green band back a step too. */
.support::before { opacity: .05; }