/* ==========================================================================
   Home page — section layout (desktop first; tablet/mobile at the end)
   Frame: Figma "Dev ready - Website 2026", Home * - desktop. Positions are
   the 1440 frame values; the grid (12 col / 40 margin / 12 gutter) carries
   them at other widths.
   ========================================================================== */

/* ---- 1. Opening ---------------------------------------------------------- */
.hero {
  height: 1080px;
  background: linear-gradient(180deg, var(--c-mist) 30.4%, #fdffcb 100%);
}
.hero .section__inner { height: 100%; }
.hero .nav { align-items: flex-start; }
.nav__announce {
  position: absolute;
  right: var(--grid-margin);
  top: 12px;
  width: 342px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav__announce .nav__pill { width: 100%; justify-content: flex-start; }
.announce {
  position: relative;
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 12px;
  padding: 4px;
  min-height: 132px;
  border-radius: var(--r-md);
  background: var(--c-lilac);
}
.announce img { width: 124px; height: 124px; border-radius: var(--r-sm); object-fit: cover; }
.announce__text { padding: 13px 28px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.announce__text .t-meta { color: var(--c-ink-60); }
.announce__arrow { position: absolute; right: 12px; bottom: 12px; width: 12px; height: 12px; }

.hero__content { position: relative; height: 100%; }
.hero__title {
  position: absolute;
  left: 123px;
  top: 160px;
  font-size: 90px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.hero__title-indent { display: inline-block; padding-left: 128px; }
.hero__lead {
  position: absolute;
  left: calc(50% - 451px);      /* flush with the video's left edge */
  top: 426px;
  width: 560px;
  color: var(--c-black);
}
.hero__video {
  position: absolute;
  left: 50%;
  top: 484px;
  width: 903px;                /* 8 columns; Figma had 674 (6 columns), Kim asked for bigger (16 Sep) */
  height: 400px;
  transform: translateX(-50%);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__logos {
  position: absolute;
  left: 0; right: 0;
  top: 916px;
  display: flex;
  flex-direction: column;
  gap: 28px;   /* Ira, 21 Sep: 28px between logo rows */
}

/* ---- 2. Intro ------------------------------------------------------------ */
.intro {
  padding: 40px 0 60px;
  background: linear-gradient(180deg, #fdffcb 0%, var(--c-mist) 69.6%);
}
.intro .grid { row-gap: var(--grid-gutter); }
.intro__copy { grid-column: 3 / 9; }
.intro__copy p + p { margin-top: 18px; }
.intro__names {
  grid-column: 3 / 9;
  margin-top: 28px;
  margin-bottom: 145px;
}
.intro__metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}
.intro__metrics--bottom { grid-column: 1 / 10; grid-template-columns: repeat(9, 1fr); }
.intro__photo {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-lilac-soft);
}
.intro__photo img { width: 100%; height: 100%; object-fit: cover; }
.intro__photo--s { height: 372px; }
.intro__photo--l { height: 502px; }

/* ---- 3. Advisory --------------------------------------------------------- */
.advisory {
  padding-bottom: 68px;
  background: linear-gradient(180deg, var(--c-mist) 30.4%, #bdd8fe 62%, #eeeeee 100%);
}
.advisory .section-title { margin-bottom: 47px; }
.advisory .grid { row-gap: 20px; margin-top: 60px; }
.story-card {
  position: relative;
  display: block;
  height: 546px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-white);
}
.story-card img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 40%; }
.story-card .cta-card {
  position: absolute;
  left: 12px; bottom: 12px;
  width: 352px;
  min-height: 140px;
}
.advisory__quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
}

/* ---- 4. Events ----------------------------------------------------------- */
.events {
  padding-bottom: 100px;
  background: linear-gradient(180deg, #edeeef 5%, #cee9ee 28.4%, #fdffcb 43.3%, #eeeeee 70.2%);
}
.section-title--narrow { max-width: 714px; }
.events .section-title { margin-bottom: 59px; }
.events .grid { row-gap: var(--grid-gutter); }

.events__band {
  margin-top: 53px;                 /* 1115 − (450 + 600 + 12) */
  height: 43px;
  border-radius: var(--r-sm);
  background: var(--c-lilac);
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--c-black);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.events__band-track {
  display: inline-flex;
  white-space: nowrap;
  animation: logo-scroll 60s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .events__band-track { animation: none; } }

.upcoming {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) minmax(0, 871px);
  min-height: 498px;
  margin-top: -8px;                 /* 1162 − (1115 + 43 + 12) */
  padding: 4px;
  border-radius: var(--r-xl);
  background: var(--c-white);
  overflow: hidden;
}
.upcoming__body { padding: 36px 36px 36px 36px; display: flex; flex-direction: column; }
.upcoming__title { margin-top: 48px; max-width: 405px; }
.upcoming__blurb { margin-top: 20px; max-width: 405px; }
.upcoming__actions { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.upcoming__actions .btn { width: 100%; max-width: 405px; }
/* One primary action, then three equal secondary ones on one grid: speaking
   and the Forum page side by side, partnering on its own line (Tereza, 21 Sep).
   The live dot sits inside "Apply to speak", where the call to action is. */
.upcoming__more { width: 100%; max-width: 405px; display: grid; grid-template-columns: 1fr; gap: 8px; }
.upcoming__more .micro-btn { padding: 8px 12px; }
.upcoming__title-link { color: inherit; text-decoration: none; }
.upcoming__title-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.upcoming__live { display: inline-flex; align-items: center; gap: 8px; }
.upcoming__more .nav__pill-dot { width: 8px; height: 8px; }
.upcoming__media {
  display: block;
  align-self: center;
  aspect-ratio: 1920 / 1080;          /* the whole poster, never cropped */
  border-radius: var(--r-lg);
  overflow: hidden;
}
.upcoming__media img { width: 100%; height: 100%; object-fit: cover; }

.events__text { margin-top: 100px; max-width: 640px; }   /* starts level with the metrics */
.events__text p + p { margin-top: 24px; }
.events__label { color: var(--c-ink-50); margin: 0 0 20px; }
.events__metrics {
  grid-column: 7 / -1;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
}
.events__counts, .events__reach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
.events__stay { height: 64px; }

.timeline { margin-top: 32px; }
.timeline__label { color: var(--c-black); }   /* black, so the fresco has a title that reads (Tereza, 21 Sep) */
.timeline__years {
  display: flex;
  justify-content: space-between;
  margin-top: 19px;
  color: var(--c-ink-60);
}
.timeline__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.timeline__all { flex: none; }
.timeline__strip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin-top: 12px;
  padding-bottom: 44px;              /* room for the year markers */
}
/* Dock: height reserved for the magnified poster so nothing below moves */
.timeline__strip.is-dock { height: 196px; }
/* The title and "See all past events" sit inside that reserved space, just
   above the posters at rest, instead of floating 100px higher. A poster
   magnified under the cursor may pass over them; the strip lets clicks through
   everywhere except on the posters themselves. */
.timeline__head:has(+ .timeline__strip.is-dock),
.timeline__head.is-docked { position: relative; z-index: 1; margin-bottom: -88px; }
.timeline__strip.is-dock { position: relative; z-index: 2; pointer-events: none; }
.timeline__strip.is-dock .thumb { pointer-events: auto; }
/* Taller posters in the dock (4:5): the row reads larger at rest and the
   targets are easier to hit; the crop only trims the poster edges */
.timeline__strip.is-dock .thumb { aspect-ratio: 4 / 5; }
.timeline__strip.is-dock .thumb { transition: flex-grow 200ms ease-out; }
.timeline__strip.is-dock .thumb:hover, .timeline__strip.is-dock .thumb:focus-visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .timeline__strip.is-dock .thumb { transition: none; } }
.thumb__year {
  position: absolute;
  left: 0; top: calc(100% + 20px);
  padding-left: 6px;
  border-left: 1px solid rgba(0, 0, 0, 0.35);
  color: var(--c-ink-60);
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}
.thumb {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  overflow: visible;
  background: #d9d9d9;
  cursor: pointer;
  transition: transform 160ms ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); display: block; }
.thumb:hover, .thumb:focus-visible { transform: translateY(-3px); }
.thumb.is-on img { box-shadow: 0 0 0 2px var(--c-black); }
/* Pointer under the selected thumb: a small black triangle aimed at it */
.thumb.is-on::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -14px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--c-black);
  border-top: 0;
}
.thumb:focus-visible { outline: 2px solid var(--c-black); outline-offset: 2px; }

.event {
  display: grid;
  grid-template-columns: 445px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--grid-gutter);
  margin-top: 48px;
  min-height: 509px;
}
.event__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.event__body { display: flex; flex-direction: column; padding-top: 60px; }
.event__title { max-width: 445px; }
.event__blurb { margin-top: 16px; max-width: 445px; }
.event__actions { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 8px; }
.event__actions .btn-big { width: 100%; }
.event__media {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  /* Stretches to whatever the button stack needs, so the poster stays flush
     with the last button instead of stopping short. */
  min-height: 509px;
  align-self: stretch;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-lilac-soft);
}
.event__media--video .video-pill { left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* Absolute, so the poster fills the panel instead of setting its height. */
.event__media--video .yt__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.event__media.yt { background: var(--c-lilac-soft); }
.event__poster-bg {
  position: absolute; inset: -40px;
  width: calc(100% + 80px); height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(40px) saturate(0.8);
  opacity: 0.7;
}
.event__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 20px;
}
.events__partners-line {
  margin: 80px auto 0;
  max-width: 501px;
  text-align: center;
  color: var(--c-ink-60);
}
.logo-row--marquee { margin-top: 28px; }

/* ---- 5. Fundraising ------------------------------------------------------ */
.fundraising {
  padding-bottom: 60px;
  background: linear-gradient(180deg, #eeeeee 15.5%, #d2e7d2 32.3%, var(--c-mist) 55.7%);
}
.fundraising .section-title { margin-bottom: 47px; }
.fundraising .logo-row { margin-bottom: 60px; }
.fundraising .grid { row-gap: 20px; }
.fundraising__copy {
  grid-column: 3 / 9;
  margin: 80px 0;
}
.fundraising__copy p + p { margin-top: 18px; }

.project {
  position: relative;
  display: grid;
  grid-template-columns: 442px 1fr;
  grid-template-rows: 252px 1fr;
  height: 570px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--c-white);
  overflow: hidden;
}
.project--offset { grid-column: 5 / -1; border-radius: 16px; }
.project__image { width: 442px; height: 252px; border-radius: var(--r-md); object-fit: cover; }
.project__text { padding: 35px 20px 0 24px; display: flex; flex-direction: column; gap: 20px; }
.project__text .t-meta { max-width: 405px; }
.project__metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 56px;
  padding: 0 4px;
  align-self: start;
}
.project__btn { position: absolute; right: 12px; bottom: 12px; }

.fundraising__close {
  grid-column: 5 / span 4;     /* under the Artizen card, as Ira designed it (21 Sep: beside it, the button got lost) */
  margin-top: 48px;
}
.fundraising__close .t-label { margin-top: 30px; }
.fundraising__close .btn { margin-top: 32px; }

/* ---- 6. Publishing (hidden while paused) --------------------------------- */
.publishing { padding-bottom: 100px; background: var(--c-mist); }
.publishing .section-title { margin-bottom: 47px; }

/* ---- 7. Newsletter ------------------------------------------------------- */
.newsletter {
  padding: 60px 0;
  background: linear-gradient(180deg, #ced3d6 30.4%, #fdffcb 100%);
}
.feature--nl .feature__headline { font-weight: 500; max-width: 563px; }
.nl-form { display: flex; gap: 12px; margin-top: 40px; align-items: stretch; }
.nl-form .btn { margin-top: 0; height: 56px; }
.nl-form__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 365px;
  padding: 16px 28px;
  border: 1px solid var(--c-border-blue);
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--f-sans);
  line-height: 1.2;
  height: 64px;
}
.nl-form__input::placeholder { color: var(--c-ink-50); }
.nl-form__input:focus-visible { outline: 2px solid var(--c-black); outline-offset: 2px; }
.nl-form__btn { flex: none; width: 174px; justify-content: center; white-space: nowrap; }

/* ---- 8. Partners --------------------------------------------------------- */
.partners {
  padding-bottom: 100px;
  background: linear-gradient(180deg, var(--c-mist) 11%, #d5edf3 39.6%, #ced3d6 73.3%);
}
.partners .section-title { margin-bottom: 59px; }
.partners .grid { row-gap: 40px; }
.logo-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gutter);
}
.wall-tile {
  height: 105px;
  border-radius: var(--r-md);
  background: var(--c-card-70);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}
.wall-tile img { max-height: 48px; max-width: 160px; object-fit: contain; }
.wall-tile--ph { color: var(--c-ink-60); }
.story {
  display: grid;
  grid-template-columns: 1fr 564px;
  width: 1132px;
  max-width: 100%;
  min-height: 442px;
  margin: 0 auto;
  border-radius: var(--r-md);
  background: var(--c-white);
  overflow: hidden;
}
.story__text { display: flex; flex-direction: column; padding: 28px 20px 20px; }
.story__org { }
.story__name { margin-top: 60px; }
.story__role { opacity: 0.3; }
.story__quote { margin-top: 20px; max-width: 513px; }
.story__text .micro-btn { margin-top: auto; align-self: flex-end; }
.story__media { position: relative; min-height: 442px; border-radius: var(--r-sm); overflow: hidden; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__media .video-pill { left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* Stacked variant: video on top, quote below (Fundraising, beside the Tor campaign card) */
.story--stack {
  grid-template-columns: 1fr;
  grid-template-rows: 250px 1fr;
  width: auto;
  height: 570px;
  min-height: 0;
  margin: 0;
  padding: 4px;
}
.story--stack .story__media { grid-row: 1; min-height: 0; height: 242px; border-radius: var(--r-md); }
.story--stack .story__text { padding: 24px 8px 8px 12px; }   /* button lines up with "View the campaign" (12px from the card edge) */
.story--stack .story__name { margin-top: 0; }
.story--stack .story__quote { margin-top: 16px; max-width: none; }
.story--stack .story__org { display: none; }

/* ---- 9. Commons Lab ------------------------------------------------------ */
.lab { padding: 0 0 120px; background: var(--c-mist); }
.lab .section__inner { padding-top: 180px; }   /* the band sits in this space, above the card */
.lab .grid { row-gap: 20px; }
.lab__copy { grid-column: 3 / 9; margin-bottom: 94px; }
.lab__copy p + p { margin-top: 18px; }

/* ---- 10. Footer ---------------------------------------------------------- */
.footer { background: var(--c-mist); }
.footer__top { padding-top: 183px; row-gap: 0; }
.footer__logo { margin-top: -3px; }
.footer__logo img { width: 210px; height: 48px; }
.footer__col { display: flex; flex-direction: column; }
.footer__heading { margin-bottom: 12px; }
.footer__link {
  font: 400 18px/1.4 var(--f-sans);
  color: var(--c-black);
  opacity: 0.7;
  padding: 6px 0;
}
.footer__link:hover { opacity: 1; }
.footer__social { display: flex; gap: 40px; }
.footer__social a { display: block; width: 24px; height: 24px; }
.footer__social svg { width: 24px; height: 24px; display: block; }
.footer__nl { margin-top: 48px; max-width: 288px; }
.footer__side { min-width: 0; }
.footer__side .btn { width: 100%; max-width: 288px; box-sizing: border-box; }
.footer__social { flex-wrap: wrap; column-gap: clamp(16px, 2.6vw, 40px); }
.footer__side .btn--small { width: 100%; max-width: 288px; margin-top: 20px; }
.footer__legal {
  margin-top: 120px;
  padding-bottom: 12px;
  font-size: 14px;
  color: var(--c-black);
}
.footer__copy, .footer__legal-links { opacity: 0.8; }
.footer__legal-links { display: flex; gap: 20px; justify-content: flex-end; }
.footer__black {
  position: relative;
  height: 430px;
  background: var(--c-black);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: -1px;
}
.footer__black::before {
  /* the mist above curves into the black: rounded corners on the black block */
  content: none;
}
.footer__sign {
  position: absolute;
  left: 0; right: 0;
  top: 116px;
  text-align: center;
  color: var(--c-white);
  font-size: 90px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

/* ---- Newsletter pop-up --------------------------------------------------- */
.nl-popup {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 40;
  width: 400px;
  max-width: calc(100% - 24px);
  padding: 20px 20px 20px;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  display: none;
  flex-direction: column;
  gap: 12px;
}
.nl-popup[data-open="true"] { display: flex; }
.nl-popup .t-meta { color: var(--c-ink-60); }
.nl-popup__close {
  position: absolute; right: 12px; top: 12px;
  width: 28px; height: 28px;
  border: 0; padding: 0;
  border-radius: var(--r-sm);
  background: var(--c-mist);
  cursor: pointer;
}
.nl-popup__close::before, .nl-popup__close::after {
  content: ""; position: absolute; left: 7px; top: 13px;
  width: 14px; height: 2px; background: var(--c-black);
}
.nl-popup__close::before { transform: rotate(45deg); }
.nl-popup__close::after { transform: rotate(-45deg); }
.nl-form--popup { margin-top: 4px; gap: 8px; }
.nl-form--popup .nl-form__input { flex: 1 1 auto; width: auto; height: 56px; padding: 0 16px; }   /* same height as the Sign up button */

/* ---- Dropdown in the top nav --------------------------------------------- */
.dropdown { position: relative; }
.dropdown button { border: 0; cursor: pointer; }
.dropdown__panel {
  position: absolute;
  left: 0; top: calc(100% + 8px);
  min-width: 220px;
  padding: 6px;
  white-space: nowrap;           /* one line per item: "FtC Forum San Francisco, 7–8 Nov" */
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  display: none;
  flex-direction: column;
}
.dropdown[data-open="true"] .dropdown__panel { display: flex; }
.dropdown__link { display: block; padding: 10px 12px; border-radius: var(--r-sm); }
.dropdown__link:hover { background: var(--c-mist); }

/* ==========================================================================
   Tablet (700–1024) and mobile (≤699): first pass from the shared rules;
   Ira's tablet/mobile Home frames come in the next round.
   ========================================================================== */
@media (max-width: 1024px) {
  .nav__announce { display: none; }
  .nav__menu { display: none; }
  .hero { height: auto; padding-bottom: 60px; }
  .hero__content { height: auto; padding: 200px var(--grid-margin) 0; }
  .hero__title { position: static; font-size: 56px; white-space: normal; }
  .hero__title-indent { padding-left: 0; }
  .hero__lead { position: static; width: auto; max-width: 560px; margin-top: 40px; }
  .hero__video { position: static; transform: none; width: 100%; height: auto; aspect-ratio: 674 / 321; margin-top: 40px; }
  .hero__logos { position: static; margin-top: 60px; }
  .intro__copy, .intro__names, .fundraising__copy, .lab__copy { grid-column: 1 / -1; }
  .intro__metrics { grid-template-columns: repeat(2, 1fr); }
  .intro__metrics--bottom { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
  .intro__photo, .story-card, .advisory__quotes, .events__text, .events__metrics, .project, .tweet, .fundraising__close, .cta-card { grid-column: 1 / -1; }
  .intro__photo--s, .intro__photo--l { height: auto; aspect-ratio: 4 / 3; }
  .feature, .feature--flip { grid-template-columns: 1fr; height: auto; }
  .feature--flip .feature__media { order: 0; }
  .feature__media { height: auto; min-height: 0; aspect-ratio: 670 / 592; }   /* min-height 592 + aspect-ratio was forcing the card image to 670px wide on phones, cropped by the card */
  .feature__body { padding: 28px 24px 24px; }
  .feature__headline { margin-top: 40px; }
  .feature__footer { margin-top: 40px; }
  .advisory__proof { width: auto; padding-inline: var(--grid-margin); }
  .advisory__quotes { grid-template-columns: 1fr; }
  .upcoming { grid-template-columns: 1fr; height: auto; margin-top: 0; }
  .upcoming__media { height: auto; aspect-ratio: 871 / 490; order: -1; }
  .upcoming__body { padding: 24px; }
  .upcoming__actions .btn { width: 100%; }
  .events__text { margin-top: 60px; max-width: none; }
  .events__metrics { margin-top: 0; }
  .event { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .event__media { grid-column: 1; grid-row: auto; height: auto; aspect-ratio: 4 / 3; margin-top: 20px; }
  .event__title, .event__blurb { max-width: none; }
  .project { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; padding-bottom: 60px; }
  .project--offset { grid-column: 1 / -1; }
  .project__image { width: 100%; height: auto; aspect-ratio: 442 / 252; }
  .project__text { padding: 24px 12px 0; }
  .project__metrics { grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
  .fundraising__close { margin-top: 20px; }
  .fundraising__copy { margin: 60px 0; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .story { grid-template-columns: 1fr; width: 100%; }
  .story__media { min-height: 0; aspect-ratio: 16 / 9; }
  .footer__top { padding-top: 100px; row-gap: 40px; }
  .footer__logo, .footer__col, .footer__side { grid-column: 1 / -1; }
  .footer__legal { margin-top: 60px; row-gap: 12px; }
  .footer__copy, .footer__legal-links { grid-column: 1 / -1; }
  .footer__legal-links { justify-content: flex-start; }
  .footer__sign { font-size: 48px; top: 80px; padding-inline: var(--grid-margin); }
  .footer__black { height: 300px; }
  .nl-form { flex-wrap: wrap; }
  .nl-form__input { width: 100%; }
}
@media (min-width: 700px) and (max-width: 1024px) {
  .footer__col { grid-column: span 2; }
  .footer__logo { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .hero__content { padding-top: 160px; }
  .hero__title { font-size: 44px; }
  .intro__metrics, .intro__metrics--bottom, .events__counts, .events__reach { grid-template-columns: repeat(2, 1fr); }
  .metric__value { font-size: 36px; }
  .metric--bare .metric__value { font-size: 32px; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .footer__sign { font-size: 36px; }
  .nl-popup { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* Plain list of past events under the timeline (pre-rendered by tools/prerender_home.py) */
.timeline__list { margin-top: 24px; }
.timeline__list summary { cursor: pointer; color: var(--c-ink-60); list-style: none; }
.timeline__list summary::-webkit-details-marker { display: none; }
.timeline__list summary::before { content: "+ "; }
.timeline__list[open] summary::before { content: "− "; }
.timeline__ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--grid-gutter); }
.timeline__ol li { padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, 0.14); }
.timeline__li-title a:hover { text-decoration: underline; }
.timeline__li-meta, .timeline__li-links { display: block; color: var(--c-ink-60); margin-top: 4px; }
.timeline__li-blurb { display: block; margin-top: 4px; color: var(--c-ink-70); }
.timeline__li-links a { text-decoration: underline; }
@media (max-width: 699px) { .timeline__ol { grid-template-columns: 1fr; } }

/* Timeline on tablet and phone: bigger posters in one row that scrolls sideways */
@media (max-width: 1024px) {
  .timeline__strip { gap: 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-top: 4px; }
  .timeline__strip::-webkit-scrollbar { display: none; }
  .thumb { flex: 0 0 96px; scroll-snap-align: start; }
}

/* Dropdown: section labels and a hairline between groups; opens on hover too */
.dropdown__label { margin: 8px 12px 2px; color: var(--c-ink-40); font-size: 12px; }
.dropdown__label:first-child { margin-top: 4px; }
.dropdown__sep { height: 1px; margin: 6px 8px; background: rgba(0, 0, 0, 0.08); }
@media (hover: hover) {
  .dropdown:hover .dropdown__panel { display: flex; }
  .dropdown__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
}
.dropdown--nojs:focus-within .dropdown__panel { display: flex; }
.intro__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.intro__all { margin-top: 18px; }
.dropdown__stat { display: block; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: var(--c-ink-60); white-space: nowrap; }
.dropdown__stat:hover { color: var(--c-black); }


/* A quote's name links to the person without announcing itself. */
.quote__link { color: inherit; text-decoration: none; }
.quote__link:hover, .quote__link:focus-visible { text-decoration: underline; }


/* The forum card: out of the way until you have read the top of the page. */
.forum-pop {
  position: fixed; right: 20px; bottom: 20px; z-index: 950;
  width: 340px; max-width: calc(100vw - 40px);
  background: var(--c-white); border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.forum-pop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.forum-pop__link { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; text-decoration: none; color: inherit; }
.forum-pop__link img { border-radius: var(--r-sm); display: block; }
.forum-pop__text { display: flex; flex-direction: column; gap: 4px; }
.forum-pop__text .t-meta { color: var(--c-ink-60); }
.forum-pop__close {
  position: absolute; top: 6px; right: 8px; z-index: 1;
  border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--c-ink-40); padding: 4px;
}
.forum-pop__close:hover { color: var(--c-black); }
@media (prefers-reduced-motion: reduce) { .forum-pop { transition: none; } }


/* Commons Lab: a different place on the page, so it reads as a different organization. */
.lab--dark { background: var(--c-black); color: var(--c-white); padding-bottom: 96px; }
.lab--dark .band, .lab--dark .band__item { color: var(--c-white); }
.lab--dark .band__mark img { filter: invert(1); }
.lab--dark .lab__copy { margin: 0 0 8px; }
.lab--dark .section__inner { padding-top: 120px; }
/* Commons Lab has no official mark, so the section carries a typographic one
   built from the Lab's own fortress language rather than from our logo. */
.lab__mark { display: flex; align-items: center; justify-content: center; gap: 12px; }
.lab__mark-icon { width: 26px; height: 26px; fill: var(--c-white); flex: none; }
.lab__wordmark { font: 500 26px/1 var(--f-sans); letter-spacing: -0.02em; }
.lab__wordmark-thin { font-weight: 300; margin-left: 0.28em; color: rgba(255,255,255,.7); }
.lab__eyebrow { margin: 16px 0 0; text-align: center; color: rgba(255,255,255,.7); }
.lab__intro { display: grid; grid-template-columns: 7fr 5fr; gap: 12px 64px; margin-top: 72px; align-items: start; }
/* Who it is for, stacked on the left; "What it is" as a side box on the right (Kim, 21 Sep) */
.lab__routes { display: grid; gap: 0; }
.lab__route { border-top: 1px solid rgba(255,255,255,.25); padding: 22px 0 26px; }
.lab__what { background: var(--c-white); color: var(--c-black); border-radius: var(--r-xl); padding: 32px 36px 36px; }
.lab__what-label { margin: 0 0 18px; color: #56675d; }
.lab__what-text { margin: 0; font: 450 26px/1.25 var(--f-sans); letter-spacing: -0.015em; }
.lab__what .cl__hl { color: #56675d; }
.lab--dark .cl { margin-top: 96px; }
.lab__route h3 { margin: 0 0 10px; }
.lab__route p { color: rgba(255,255,255,.75); margin: 0; }
.lab__route .lab__offer { margin-top: 16px; color: var(--c-white); }
.lab__cta { margin-top: 56px; max-width: 420px; }
.btn--light { background: var(--c-white); color: var(--c-black); }
@media (max-width: 1024px) {
  .lab__routes { grid-template-columns: 1fr 1fr; }
}


/* --- Commons Lab thesis carousel ----------------------------------------
   The Lab's deck argument, rebuilt in our own type rather than embedded as
   screenshots, so it stays crisp and stays editable.                       */
.cl {
  --cl-sage: #56675d;
  --cl-cream: #f4f2ec;
  --cl-stone: #e2ddd1;
  --cl-mint: #e7edea;
  --cl-line: rgba(0,0,0,.12);
  margin-top: 48px;
}
.cl__track {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; outline: none;
}
.cl__track::-webkit-scrollbar { display: none; }
.cl__track::after { content: ""; flex: 0 0 96px; }   /* lets the last slide snap to the left edge */
.cl__slide.is-current { opacity: 1; cursor: auto; }
.cl__track:focus-visible { outline: 2px solid var(--c-white); outline-offset: 4px; border-radius: var(--r-xl); }
.cl__slide {
  flex: 0 0 calc(100% - 120px); scroll-snap-align: start;   /* the next slide peeks in on the right */
  cursor: pointer; opacity: .45; transition: opacity .3s ease;
  background: var(--c-white); color: var(--c-black);
  border-radius: var(--r-xl); padding: 44px 52px 48px;
  min-height: 520px; display: flex; flex-direction: column;
}
.cl__eyebrow { margin: 0 0 16px; color: var(--cl-sage); }
.cl__title { margin: 0; max-width: 32ch; }
.cl__sub { margin: 14px 0 0; max-width: 64ch; color: var(--c-ink-60); line-height: 1.45; }
.cl__figure { margin-top: auto; padding-top: 40px; }

.cl__slide--statement { justify-content: flex-start; }
.cl__statement {
  font: 450 36px/1.18 var(--f-sans); letter-spacing: -0.02em;   /* below the section title in the hierarchy */
  margin: auto 0; max-width: 32ch;
}
.cl__hl { color: var(--cl-sage); }

/* A fortress: an institution that holds its own systems. The crenellations are
   drawn as an SVG so the row starts and ends on a merlon at any width. */
.cl-crenel {
  position: absolute; left: 0; width: 100%; display: block;
  fill: var(--cl-cream); color: var(--cl-cream);
}
.cl-castle { position: relative; background: var(--cl-cream); padding: 26px 32px 46px; max-width: 900px; margin: 0 auto; }
.cl-castle > .cl-crenel { top: -20px; height: 20px; }
.cl-castle::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 48px; height: 42px; background: var(--cl-stone); border-radius: 24px 24px 0 0;
}
.cl-castle__label { display: block; text-align: center; color: var(--c-ink-50); margin: 0 0 22px; }
.cl-castle__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 116px; }
.cl-tile {
  margin: 0; background: var(--c-white); border: 1px solid var(--cl-line);
  border-radius: 10px; padding: 13px 16px; text-align: center;
}
.cl-ground { border-top: 1px solid var(--cl-line); }

/* Two fortresses with the neutral ground between them. */
.cl-coord { position: relative; display: grid; grid-template-columns: 1fr 48px 1.5fr 48px 1fr; align-items: end; }
.cl-keep {
  position: relative; background: var(--cl-cream); height: 176px;
  display: grid; place-items: center; padding: 0 14px; text-align: center;
}
.cl-keep span { color: var(--c-ink-50); }
.cl-keep > .cl-crenel { top: -18px; height: 18px; }
/* The two-way traffic between a fortress and the neutral ground. */
.cl-conn { align-self: end; margin-bottom: 30px; width: 48px; height: 10px; fill: rgba(0,0,0,.5); color: rgba(0,0,0,.5); }
.cl-keep::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 34px; height: 30px; background: var(--cl-stone); border-radius: 17px 17px 0 0;
}
.cl-neutral {
  position: relative; background: var(--cl-mint);
  border: 1px dashed rgba(0,0,0,.35); border-radius: 14px; padding: 18px 20px 20px;
}
.cl-neutral__label { display: block; text-align: center; color: var(--cl-sage); margin-bottom: 14px; }
.cl-pill {
  margin: 7px 0 0; background: rgba(255,255,255,.8); border-radius: 8px;
  padding: 8px 14px; text-align: center;
}

/* The seven tests. */
.cl-values__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cl-values__row--3 { grid-template-columns: repeat(3, 1fr); }
.cl-legend { margin: 0 0 10px; color: var(--cl-sage); }
.cl-values__row + .cl-legend { margin-top: 22px; }
.cl-value { background: var(--cl-cream); border-radius: 12px; padding: 16px 18px; }
.cl-value--sage { background: var(--cl-mint); }
.cl-value h4 { margin: 0 0 6px; }
.cl-value p { margin: 0; color: var(--c-ink-60); line-height: 1.35; }

.cl__controls { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
.cl__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
.cl__tab {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  background: none; color: rgba(255,255,255,.75); font-size: 14px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cl__tab:hover { color: var(--c-white); border-color: var(--c-white); }
.cl__tab[aria-selected="true"] { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); }
.cl__tab-n { opacity: .55; margin-right: 4px; }
.cl__controls .cl__arrow--next { width: auto; padding: 0 18px 0 20px; gap: 12px; display: inline-flex; border-radius: 999px; background: var(--c-white); color: var(--c-black); border-color: var(--c-white); }
.cl__controls .cl__arrow--next:hover { background: #eff4f5; }
.cl__next-label { font-size: 14px; white-space: nowrap; }
.cl__arrow {
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255,255,255,.35); background: none; color: var(--c-white);
  cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, color .15s ease;
}
.cl__arrow:hover { background: var(--c-white); color: var(--c-black); }
.cl__arrow[disabled] { opacity: .3; cursor: default; }
.cl__arrow[disabled]:hover { background: none; color: var(--c-white); }
.cl__dots { display: flex; gap: 8px; margin-left: auto; }
.cl__dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; border: 0;
  background: rgba(255,255,255,.3); cursor: pointer;
}
.cl__dot[aria-selected="true"] { background: var(--c-white); }

@media (max-width: 1024px) {
  .cl__slide { padding: 36px 32px 40px; min-height: 0; }
  .cl__statement { font-size: 30px; }
  .cl-castle__grid { grid-template-columns: 1fr; gap: 10px; }
  .cl-castle::after, .cl-keep::after { display: none; }
  .cl-coord { grid-template-columns: 1fr; gap: 20px; }
  .cl-keep { height: 96px; }
  .cl-conn { display: none; }
  .cl-values__row, .cl-values__row--3 { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cl__track { scroll-behavior: auto; } }


/* The mechanisms list runs wider so the last item does not hang alone. */
.feature__list--wide { max-width: none; column-gap: 18px; }
/* The yellow band's copy sits in from the edge instead of hugging it. */
.events__text { padding-right: 32px; }
/* "Write with us" is an invitation, not a feature: one compact band, the
   question on the left, what to send and where on the right (Tereza, 21 Sep). */
.submit { min-height: 0; grid-template-columns: 1fr; margin-top: 24px; }
.submit .feature__body {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: end;
  padding: 36px 40px 40px 36px;
}
.submit .feature__label { grid-column: 1 / -1; }
.submit .feature__headline { margin-top: 16px; }
.submit .feature__footer { margin: 0; padding: 0; }
.submit .feature__footer .btn { margin-top: 24px; }

/* "Where to start": two readings set like a short bibliography, title on one
   line and who wrote it on the next, in the same size and grey as the
   mechanisms list above, with the same air above its label. */
.reading__label { margin-top: 32px; color: var(--c-ink-60); }   /* a footnote under the call button (Ira #9) */
.reading { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; max-width: 760px; }
.reading li { display: flex; flex-direction: column; gap: 4px; font: 400 14px/1.45 var(--f-mono); }
.reading__title { color: var(--c-black); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-ink-20); }
.reading__title:hover { text-decoration-color: currentColor; }
.reading__by { color: var(--c-ink-60); }

/* Commons Lab headline on two lines, not three (Tereza, 21 Sep). */
.lab--dark .lab__copy { grid-column: 1 / -1; }
/* A branded section like the others: centred mark, then the serif section title
   in two tones (Kim, 21 Sep). */
.lab__title { padding-top: 56px; color: var(--c-white); }
.lab__title-soft { color: rgba(255,255,255,.5); }
.advisory .logo-row { flex-wrap: nowrap; gap: 44px; }   /* Ira: one row */

/* ---- Round of 22 Sep (Kim) ------------------------------------------------ */
/* Speaker list: short "name (org)" pairs never break; the button sits below */
.intro__who { white-space: nowrap; }
.intro__names { grid-column: 3 / 10; }
.intro__all { display: flex; width: max-content; margin-top: 20px; }

/* Fundraising: the "why" paragraph now follows the logos */
.fundraising__copy--lead { margin: 8px 0 72px; }
.feature__footer .reading__label { color: var(--c-black); }

/* Artizen runs the full width and stays compact: image, text, and figures in one band */
.project--wide {
  grid-column: 1 / -1;
  grid-template-columns: 442px minmax(0, 1fr);
  grid-template-rows: auto auto;
  height: auto;
  padding-bottom: 56px;   /* room for the button, bottom right */
  border-radius: var(--r-md);
}
.project--wide .project__image { grid-row: 1 / 3; }
.project--wide .project__text .t-meta { max-width: 640px; }
.project--wide .project__metrics { grid-column: 2; margin-top: 28px; padding: 0 20px 0 24px; }
.fundraising__close { grid-column: 1 / span 6; margin-top: 64px; }
.fundraising__close .btn { width: 405px; margin-top: 28px; }

.nl-note { margin-top: 12px; font-size: 13px; color: var(--c-ink-60); }

/* Commons Lab: the older, more institutional sibling. Deep navy into a bank blue. */
.lab--dark { background: linear-gradient(180deg, #06142b 0%, #0b2a55 42%, #0f4a8a 78%, #1560a8 100%); }
.lab__all { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.85); }

/* Second upcoming card: the El Salvador Fellowship, image on the left (22 Sep) */
.upcoming--second { grid-template-columns: minmax(0, 700px) minmax(380px, 1fr); min-height: 0; margin-top: 16px; }
.upcoming--second .upcoming__media { aspect-ratio: 1300 / 732; }
.upcoming--second .upcoming__title { margin-top: 24px; }
.upcoming--second .upcoming__actions { padding-top: 28px; }
@media (max-width: 1024px) { .upcoming--second { grid-template-columns: 1fr; } }

/* ==========================================================================
   Phone and tablet, second pass (22 Sep). Rules written after the first
   media block were winning at every width, so several sections were still
   sitting on the desktop grid: the intro text in a 48px column with the
   names on top of it, metric labels broken letter by letter, the Commons
   Lab routes in three columns. This block comes last, so it holds.
   ========================================================================== */
@media (max-width: 1024px) {
  .intro__copy, .intro__names, .fundraising__copy, .fundraising__copy--lead,
  .lab__copy, .lab__intro, .lab__cta, .intro__metrics, .intro__metrics--bottom { grid-column: 1 / -1; }
  .intro__who { white-space: normal; }
  .intro__names { margin-bottom: 48px; }
  .intro__metrics, .intro__metrics--bottom { grid-template-columns: 1fr 1fr; }
  .intro__metrics > * { grid-column: span 1; }
  .cta-card { grid-column: 1 / -1; min-height: 96px; }
  .lab__intro { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  .lab__routes { grid-template-columns: 1fr; }
  .lab__what { padding: 24px 24px 28px; }
  .lab__what-text { font-size: 22px; }
  .lab__cta { max-width: none; }
  .lab__cta .btn { width: 100%; }
  .cl__slide { flex: 0 0 82vw; }
  .cl__title { font-size: 26px; }
  .feature--nl .feature__body, .submit .feature__body { padding: 24px; grid-template-columns: 1fr; gap: 16px; }
  .feature--nl .feature__footer { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .feature--nl .btn, .btn--auto { width: 100%; min-width: 0; }
  .nl-form { flex-wrap: wrap; gap: 8px; }
  .nl-form__input { flex: 1 1 100%; }
  .nl-form__btn { width: 100%; }
  .section-title, .section-title--narrow { max-width: none; }
}
@media (max-width: 1024px) {
  /* anything positioned by hard column numbers goes full width; the
     col-span helpers already clamp themselves to the 4-column tablet grid */
  .section .grid > *:not([class*="col-span-"]) { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .section .grid > * { grid-column: 1 / -1; }
  .intro { padding-top: 24px; }
  .intro__metrics, .intro__metrics--bottom { grid-template-columns: 1fr; }
  .intro__photo--s, .intro__photo--l { aspect-ratio: 3 / 2; }
  .section-title, .section-title--narrow { font-size: 34px; }
  .hero__title { font-size: 40px; }
  .feature__headline { font-size: 24px; }
  /* comfortable targets on a touch screen */
  .micro-btn, .cl__tab, .footer__link, .pill { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__link { padding-block: 4px; }
}

/* On a phone the two floating cards covered a third of the screen at once.
   The newsletter pop-up goes (the page carries a full sign-up section), and
   the Forum card becomes a single compact row at the bottom. */
@media (max-width: 699px) {
  .nl-popup { display: none !important; }
  .forum-pop { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; padding: 8px; }
  .forum-pop__link { grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; }
  .forum-pop__link img { width: 56px; height: 56px; }
  .forum-pop__text .t-menu { font-size: 15px; line-height: 1.2; }
  .forum-pop__text .t-meta { font-size: 11px; }
}
/* The definition comes before the three doors on a phone (Kim, 22 Sep) */
@media (max-width: 1024px) { .lab__what { order: -1; } }