/* The Nancy Pelosi Institute at UC Berkeley
   Hand-authored static CSS — no build step. */


/* ============================================================
   Fonts (self-hosted)
   ============================================================ */

/* Self-hosted UCB brand faces — replaces the Google Fonts <link> (no third-party
   request, visitor IPs stay off Google, renders if Google is blocked). Only the
   faces actually used are shipped: Inter (body/UI), Source Serif 4 (headings +
   italic quotes), Barlow Condensed 700 (h3/h4). Inter and Source Serif 4 are
   variable (one file spans the weight axis); Barlow Condensed is static 700.
   latin + latin-ext subsets only — latin-ext covers the "ć" in donor names; the
   browser fetches it solely when such a glyph appears.
   To re-generate / add a face, edit the FAMILIES list in scripts/fetch-fonts.py
   and re-run it (downloads the woff2s + prints the @font-face blocks). If pillar
   figcaptions are un-hidden later, add an Inter italic 400 face. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-100-900-normal-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-100-900-normal-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;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-200-900-italic-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;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-200-900-italic-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;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-200-900-normal-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;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4-200-900-normal-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;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-normal-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;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-normal-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;
}


/* ============================================================
   Reset
   ============================================================ */

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

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd,
figure, blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  padding: 0;
  list-style: none;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, picture, svg, video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}


/* ============================================================
   Tokens
   ============================================================ */

:root {

  /* UCB primary palette */
  --berkeley-blue:   #002676;
  --california-gold: #FDB515;
  --heritage-gold:   #C09748;

  /* UCB secondary blues */
  --blue-dark:   #010133;
  --blue-medium: #004AAE;
  --blue-light:  #9FD1FF;

  /* UCB secondary golds */
  --gold-dark:   #FC9313;
  --gold-medium: #FFC31B;
  --gold-light:  #FFE88D;

  /* Neutrals */
  --white:      #FFFFFF;
  --black:      #000000;
  --grey-dark:  #808080;
  --grey-light: #F2F2F2;

  /* Ink — near-black with a faint cool tint so body copy harmonizes with the Berkeley Blue brand without itself reading as chromatic */
  --ink:       #1a1d29;
  --ink-muted: #4a4f5c;

  /* Semantic surfaces */
  --color-bg:         var(--white);
  --color-text:       var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-accent:     var(--california-gold);
  --color-link:       var(--blue-medium);
  --color-rule:       var(--grey-light);

  /* Typography */
  --font-sans:    "Inter", Arial, sans-serif;
  --font-serif:   "Source Serif 4", Times, serif;
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  /* Fluid type scale (Utopia clamp() — 360 → 1440 viewport, variable ratio: subtle jumps near body, bigger jumps for display from step-3 up) */
  --step--1: clamp(0.875rem,  0.83rem + 0.19vw,  1rem);      /* 14   → 16 */
  --step-0:  clamp(0.9375rem, 0.9rem  + 0.19vw,  1.0625rem); /* 15   → 17 */
  --step-1:  clamp(1rem,      0.93rem + 0.29vw,  1.195rem);  /* 16   → 19.1 */
  --step-2:  clamp(1.125rem,  1.02rem + 0.46vw,  1.435rem);  /* 18   → 23 */
  --step-3:  clamp(1.5rem,    1.36rem + 0.61vw,  1.91rem);   /* 24   → 30.6 */
  --step-4:  clamp(1.76rem,   1.49rem + 1.18vw,  2.55rem);   /* 28.1 → 40.8 */
  --step-5:  clamp(2rem,      1.53rem + 2.07vw,  3.4rem);    /* 32   → 54.4 */

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  clamp(0.5rem,  0.45rem + 0.22vw, 0.75rem);
  --space-sm:  clamp(0.75rem, 0.65rem + 0.44vw, 1.125rem);
  --space-md:  clamp(1rem,    0.85rem + 0.66vw, 1.5rem);
  --space-lg:  clamp(1.5rem,  1.25rem + 1.1vw,  2.5rem);
  --space-xl:  clamp(2rem,    1.55rem + 2vw,    3.5rem);
  --space-2xl: clamp(3rem,    2.25rem + 3.3vw,  5.5rem);
  --space-3xl: clamp(4rem,    3rem    + 4.4vw,  7rem);

  /* Layout */
  --measure:        65ch;
  --container-max:  72rem;
  --header-height:  5rem;
  --page-gutter:    var(--space-md);

  /* Shape */
  --radius: 4px;
  --curve-height: clamp(6.25rem, 28vw, 25rem);
}


/* ============================================================
   Accessibility baseline
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--california-gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}

:target,
:focus {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-md));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-md);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--berkeley-blue);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: var(--space-sm);
}


/* ============================================================
   Base typography
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
}

body {
  min-block-size: 100vh;
  font-size: var(--step-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--berkeley-blue);
}

h1, h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
}

h3, h4 {
  font-family: var(--font-display);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }

p {
  max-inline-size: var(--measure);
  text-wrap: pretty;
}

li {
  text-wrap: balance;
}

blockquote {
  font-family: var(--font-serif);
  font-style: italic;
}

ul, ol {
  padding-inline-start: 1.5em;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}


/* ============================================================
   Layout — centered content lanes
   ============================================================ */

/* Direct children of major layout regions get max width + inline padding.
   Sections handle their own block padding below. */
body > header > .header-inner,
body > footer > .footer-inner {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Full-bleed grid: each section is a 3-column grid with a centered content column.
   All direct children land in the content column at its left edge — wide elements
   (grids, photo rows) fill the column; text-heavy elements opt into a narrower max. */
body > main > section {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-gutter), 1fr)
    [content-start] minmax(0, var(--container-max)) [content-end]
    minmax(var(--page-gutter), 1fr) [full-end];
  padding-block: var(--space-2xl);
}

body > main > section > * {
  grid-column: content;
}

body > main > section > :is(h1, h2, h3, p, ul, blockquote) {
  max-inline-size: 40rem;
}

/* Sibling spacing inside sections */
body > main > section > * + * {
  margin-block-start: var(--space-md);
}

/* Tighter spacing after a heading — heading and the content it leads into read as a unit */
body > main > section > :is(h1, h2, h3, h4) + * {
  margin-block-start: var(--space-sm);
}


/* ============================================================
   Header
   ============================================================ */

body > header {
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--color-rule);
}

body > header > .header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
}

@media (min-width: 48em) {
  :root {
    --page-gutter: var(--space-lg);
  }

  body > header > .header-inner {
    justify-content: space-between;
  }
}

body > header img {
  block-size: clamp(5rem, 2.5rem + 4.5vw, 7rem);
  inline-size: auto;
}


/* ============================================================
   Footer
   ============================================================ */

body > footer {
  padding-block: var(--space-xl);
  color: var(--color-text-muted);
  font-size: var(--step-0);
}

.footer-inner {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
}

.footer-logo {
  block-size: clamp(4.5rem, 2.25rem + 3.5vw, 5.5rem);
  inline-size: auto;
}

.footer-meta {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
}

.footer-meta ul {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
}

body > footer a {
  color: inherit;
}

@media (min-width: 48em) {
  .footer-inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: stretch;
    text-align: start;
  }

  .footer-meta {
    justify-items: end;
    text-align: end;
  }

  .footer-meta ul {
    justify-content: flex-end;
  }
}


/* ============================================================
   Button
   ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  background: var(--gold-medium);
  color: var(--berkeley-blue);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color 0.15s ease;
}

.button:hover {
  background: var(--gold-light);
  text-decoration: none;
}


/* ============================================================
   Hero
   ============================================================ */

#hero {
  padding-block: 0 var(--space-3xl);
  background: var(--berkeley-blue);
  color: var(--white);
  text-align: center;
}

#hero > .hero-photo {
  grid-column: full-start / full-end;
  inline-size: 100%;
  block-size: clamp(28rem, 55vw, 50rem);

  --curve-height: clamp(6.25rem, 28vw, 25rem);

  mask-image:
    linear-gradient(#000, #000),
    url('../img/curve.svg');
  mask-size:
    100% calc(100% - var(--curve-height) + 1px),
    100% var(--curve-height);
  mask-position: top left, bottom left;
  mask-repeat: no-repeat;
  -webkit-mask-image:
    linear-gradient(#000, #000),
    url('../img/curve.svg');
  -webkit-mask-size:
    100% calc(100% - var(--curve-height) + 1px),
    100% var(--curve-height);
  -webkit-mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat;
}

#hero > .hero-photo picture {
  display: contents;
}

#hero > .hero-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

#hero > blockquote {
  margin-inline: auto;
  margin-block-start: var(--space-2xl);
}

/* At ≥48em, the blockquote overlays the photo instead of stacking below it.
   Both items occupy row 1 of the hero's grid; blockquote sits in the content column,
   vertically centered, with z-index above the photo. */
@media (min-width: 48em) {
  #hero {
    padding-block: 0;
    background: var(--white);  /* below the photo's curve shows white, matching the section that follows */
  }

  #hero > .hero-photo {
    grid-row: 1;
  }

  #hero > blockquote {
    grid-row: 1;
    grid-column: content;
    align-self: center;
    justify-self: start;
    margin-inline-start: 0;
    inline-size: 50%;
    max-inline-size: none;
    padding-inline: 0 var(--space-md);
    margin-block-start: 0;
    /* Slight upward offset toward optical center (curve eats the bottom-right). */
    translate: 0 calc(var(--curve-height) / -6);
    z-index: 1;
  }

}

/* The hero always ends with a curve (photo curve at desktop, section mask at mobile),
   so the following section drops its top padding at all viewports */
#hero + section {
  padding-block-start: 0;
}

/* At mobile, the hero needs its own curve at the bottom (below the blockquote area).
   At desktop overlay mode, the photo fills the hero and provides the curve itself. */
@media (max-width: 47.99em) {
  #hero + section {
    padding-block-start: var(--space-md);
  }

  #hero {
    --curve-height: clamp(6.25rem, 28vw, 25rem);
    padding-block-end: var(--curve-height);  /* push blockquote above the curve area */

    mask-image:
      linear-gradient(#000, #000),
      url('../img/curve.svg');
    mask-size:
      100% calc(100% - var(--curve-height) + 1px),
      100% var(--curve-height);
    mask-position: top left, bottom left;
    mask-repeat: no-repeat;
    -webkit-mask-image:
      linear-gradient(#000, #000),
      url('../img/curve.svg');
    -webkit-mask-size:
      100% calc(100% - var(--curve-height) + 1px),
      100% var(--curve-height);
    -webkit-mask-position: top left, bottom left;
    -webkit-mask-repeat: no-repeat;
  }
}

#hero blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-3);
  line-height: 1.3;
  max-inline-size: 32ch;
  margin-inline: auto;
  text-wrap: balance;
}

#hero blockquote footer {
  margin-block-start: var(--space-md);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--step-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--california-gold);
}


/* ============================================================
   Mission
   ============================================================ */

#mission p {
  font-size: var(--step-1);
}


.mission-grid {
  display: grid;
  gap: var(--space-xl);
}

.mission-main > * + * {
  margin-block-start: var(--space-md);
}

.mission-main > :is(h1, h2, h3, h4) + * {
  margin-block-start: var(--space-sm);
}

.mission-photos {
  display: none;
  gap: var(--space-md);
}

.mission-photos img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (min-width: 48em) {
  .mission-grid {
    /* Mirrors .support-grid so the photo stack aligns with the Founders Circle box width and x-position.
       Right padding (only) shrinks the grid to match Support's right inset; the 2fr column still starts at the content edge. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: start;
    padding-inline-end: var(--space-xl);
  }

  .mission-photos {
    display: grid;
    /* Compensate for Support having internal padding on BOTH sides: shift the 1fr column right by xl/3 so the
       photos' left edge meets the Founders Circle's left edge. */
    padding-inline-start: calc(var(--space-xl) / 3);
    /* Pull up so the photos overlap the hero's bottom curve.
       Interpolates from ~-2rem at 48em to ~-12.5rem at 100em+ so the overlap eases in with the viewport. */
    margin-block-start: clamp(-12.5rem, calc(7.5rem - 20vw), -2rem);
    position: relative;
    z-index: 1;
  }
}


/* ============================================================
   Support
   ============================================================ */

#support {
  background: var(--grey-light);
}

.support-grid {
  display: grid;
  /* Stacked (mobile): heading→content matches other section headings (--space-sm).
     The giving block restores its own separation from the Founders card via margin below. */
  gap: var(--space-sm);
}

/* Stacked only: keep the giving block visually separated from the Founders card.
   Reset on desktop, where the two sit in side-by-side grid columns. */
.support-giving {
  margin-block-start: var(--space-lg);
}

@media (min-width: 48em) {
  /* Desktop: bg moves from the full-bleed section to a contained box that respects the content column. */
  #support {
    background: transparent;
    padding-block-start: 0;
  }

  .support-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
      "heading giving"
      "main    giving";
    column-gap: var(--space-2xl);
    row-gap: var(--space-sm);
    align-items: start;
    background: var(--grey-light);
    padding: var(--space-xl);
    border-radius: var(--radius);
  }

  /* Right column spans both rows so its content top-aligns with the section heading. */
  .support-heading { grid-area: heading; }
  .support-main { grid-area: main; }
  .support-giving { grid-area: giving; margin-block-start: 0; }
}

.support-main > * + * {
  margin-block-start: var(--space-md);
}

.support-main > :is(h1, h2, h3, h4) + * {
  margin-block-start: var(--space-sm);
}

.support-main > p:first-child {
  font-size: var(--step-1);
}

.support-main > p:has(> .button) {
  text-align: start;
}

.support-giving > * + * {
  margin-block-start: var(--space-md);
}

.support-giving > :is(h1, h2, h3, h4) + * {
  margin-block-start: var(--space-sm);
}

.support-giving > p:has(> .button) {
  text-align: start;
}

/* Founders Circle: highlighted callout card on the grey-light section bg */
.founders-circle {
  padding: var(--space-lg);
  background: var(--white);
  border-block-start: 4px solid var(--california-gold);
  border-radius: var(--radius);
}

.founders-circle > * + * {
  margin-block-start: var(--space-sm);
}

.founders-circle ul {
  padding-inline-start: 1.5em;
  display: grid;
  gap: var(--space-2xs);
  font-family: var(--font-serif);
  list-style-type: '★  ';
}

.founders-circle li::marker {
  color: var(--california-gold);
  font-size: var(--step--1);
}


/* ============================================================
   Pillars
   ============================================================ */

#pillars {
  background: var(--white);
}

#pillars > ol {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-xl);
}

/* Each li is a 2-row subgrid (heading, figure) that participates in the parent
   grid's row tracks — so heading row heights sync across columns, and images
   start at the same y regardless of heading line count. */
#pillars li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 0;
  background: var(--berkeley-blue);
  border-radius: var(--radius);
  overflow: hidden;
}

#pillars > p {
  max-inline-size: none;
  font-size: var(--step-1);
}

#pillars > ol,
#pillars > ol + p {
  margin-block-start: var(--space-xl);
}

#pillars h3 {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--step-3);
  color: var(--white);
  padding: var(--space-md);
  margin: 0;
  text-align: center;
}

@media (min-width: 48em) {
  #pillars > ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
}

#pillars figure img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--grey-light);
}

#pillars figcaption {
  margin-block-start: var(--space-sm);
  font-size: var(--step--1);
  color: var(--color-text-muted);
  font-style: italic;
  display: none;
}


/* ============================================================
   Impact
   ============================================================ */

#impact {
  background:
    linear-gradient(rgba(0, 38, 118, 0.85), rgba(0, 38, 118, 0.85)),
    url('../img/campanile-background.jpg') center / cover no-repeat;
  color: var(--white);
}

#impact h2 {
  color: var(--california-gold);
}

#impact ul {
  font-size: var(--step-0);
  list-style-type: '★  ';
}

#impact li::marker {
  color: var(--california-gold);
  font-size: var(--step--1);
}

#impact li + li {
  margin-block-start: var(--space-2xs);
}


/* ============================================================
   Curved-bottom section — the section itself ends in the curve.
   Content can sit close to the bottom and even visually extend
   into the curve's opaque area; only the transparent (lower-right)
   region of the curve cuts the section's visible area.
   ============================================================ */

.has-curve-bottom {
  position: relative;
  z-index: 1;  /* paint in front of the following section so the curve mask reveals it instead of being covered */
  padding-block-end: calc(var(--curve-height) / 2);

  /* Layer 1 (gradient) overlaps Layer 2 (curve) by 1px to bridge the subpixel seam */
  mask-image:
    linear-gradient(#000, #000),
    url('../img/curve.svg');
  mask-size:
    100% calc(100% - var(--curve-height) + 1px),
    100% var(--curve-height);
  mask-position: top left, bottom left;
  mask-repeat: no-repeat;
  -webkit-mask-image:
    linear-gradient(#000, #000),
    url('../img/curve.svg');
  -webkit-mask-size:
    100% calc(100% - var(--curve-height) + 1px),
    100% var(--curve-height);
  -webkit-mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat;
}

@media (max-width: 47.99em) {
  .has-curve-bottom {
    padding-block-end: var(--curve-height);
  }

  /* Extra breathing room above Impact's content on mobile (on top of the curve-height overlap padding) */
  #impact {
    padding-block-start: calc(var(--curve-height) + var(--space-xl));
  }
}

@media (min-width: 48em) {
  /* Extra trailing space on Pillars at desktop so its content clears the curve area comfortably */
  #pillars {
    padding-block-start: 0;
    padding-block-end: calc(var(--curve-height) / 2 + var(--space-xl));
  }

  /* Extra breathing room above Impact's heading at desktop (on top of the curve-overlap inset). */
  #impact {
    padding-block-start: calc(var(--curve-height) + var(--space-lg));
  }
}

/* Whatever follows a curved-bottom section overlaps the curve area with negative margin,
   so its own background fills the previous section's transparent curve zone — and compensates
   with positive padding so content position is unchanged. Sits behind the previous section
   (this rule comes AFTER .has-curve-bottom so its z-index: 0 wins on elements that have BOTH
   .has-curve-bottom AND follow another .has-curve-bottom — e.g. #impact). */
.has-curve-bottom + *,
main:has(> .has-curve-bottom:last-child) + * {
  position: relative;
  z-index: 0;
  margin-block-start: calc(-1 * var(--curve-height));
  padding-block-start: var(--curve-height);
}