/* ============================================================
   SOI — Section Styles
   23 sections in page order. Requires tokens.css + components.css loaded first.
   Section CSS uses the section-NN-* class naming convention.
   ============================================================ */


/* ============================================================
   Section 01: 01-homa-hero
   ============================================================ */
/* ============================================================
   Section: HOMA PAGE / hero (1 of 6)
   Section-local styles ONLY. No re-declaration of .c-hero / .c-cta-pill / .c-hero__link base rules.
   ============================================================ */

/* (CL.9 promotion: centering now on .c-hero base — no section override needed) */

/* HOMA hero title = giant "SOI" display lockup — section-scoped override of c-hero__title.
   Kept section-local because no other hero on the site uses this display size; if a second
   one appears later, promote to a c-hero__title--display modifier in components.css. */
.section-homa-hero .c-hero__title {
  font-size: var(--font-size-display-128);   /* 128px display (base 70) */
  font-weight: var(--font-weight-extrabold); /* 800 (heavier than base 700) */
  color: var(--color-primary);               /* yellow #FCCB00 */
  line-height: var(--line-height-solid);
  letter-spacing: 0.02em;
}

/* Meta line: MESSINA (white) at left end · date (yellow) at right end of an 853px white rule */
.section-homa-hero__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 853px;
  max-width: 100%;
  margin: 0;
  padding-bottom: var(--space-2xs);
  border-bottom: 3px solid var(--color-text-inverse);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);         /* 30px */
  line-height: var(--line-height-solid);
}
.section-homa-hero__meta-location { color: var(--color-text-inverse); }  /* white */
.section-homa-hero__meta-date     { color: var(--color-primary); }       /* yellow #FCCB00 */

/* Tagline below divider — Nunito Sans Regular 24 white UPPERCASE */
.section-homa-hero__tagline {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);          /* 24px */
  line-height: var(--line-height-solid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
}

/* Mobile ≤480: title shrinks, CTAs stack, meta collapses to column, rule disappears */
@media (max-width: 480px) {
  .section-homa-hero .c-hero__title { font-size: var(--font-size-hero); }   /* 128 → 70 */
  .section-homa-hero .c-hero__actions { flex-direction: column; align-items: stretch; }
  .section-homa-hero__meta {
    flex-direction: column;
    width: auto;
    gap: var(--space-2xs);
    border-bottom: none;
  }
}

/* ============================================================
   Section 02: 02-homa-stats-strip
   ============================================================ */
/* ============================================================
   Section: HOMA PAGE / stats-strip (2 of 6)
   Section-local only — no components reused (HOMA-unique pattern).
   ============================================================ */

.section-homa-stats {
  background: var(--color-section-green);          /* #40915A */
  padding: var(--space-2xl) var(--space-lg);       /* 96px ≈ frame's ~104px */
}

.section-homa-stats__list {
  --circle-size: 76px;        /* SECTION-LOCAL: 76 is not in tokens (HOMA-only) */
  --stat-label-max: 360px;    /* SECTION-LOCAL: phrase label column width */
  display: flex;
  flex-direction: column;     /* mobile-first: stacked */
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-homa-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

/* Decorative outline circle — empty, no content */
.section-homa-stats__circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-text-inverse);     /* 1px white */
  background: transparent;
}

.section-homa-stats__label {
  margin: 0;
  max-width: var(--stat-label-max);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);               /* 30px */
  line-height: var(--line-height-solid);
  color: var(--color-text-inverse);                /* white */
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Tablet+ : 3-across centered cluster */
@media (min-width: 641px) {
  .section-homa-stats__list {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-2xl);
  }
}

/* Desktop (canonical 1920) */
@media (min-width: 1025px) {
  .section-homa-stats__list { gap: var(--space-2xl); }
}

/* ============================================================
   Section 03: 03-homa-about-soi
   ============================================================ */
/* ============================================================
   Section: HOMA PAGE / about-SOI (3 of 6)
   c-cta-pill referenced by class; only TYPE (font-size + color)
   overridden section-scoped. No component CSS redefinition.
   ============================================================ */

.section-homa-about {
  background: var(--color-surface);
  padding: var(--space-2xl) var(--space-lg);
}

.section-homa-about__inner {
  --about-max: 1280px;          /* SECTION-LOCAL layout container — matches theme.json wideSize */
  --portrait-w: 476px;          /* SECTION-LOCAL portrait box width (Figma frame) */
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--about-max);
  margin-inline: auto;
}

.section-homa-about__figure { margin: 0; }

.section-homa-about__portrait {
  display: block;
  width: 100%;
  max-width: var(--portrait-w);
  aspect-ratio: 476 / 702;       /* Figma frame crop box */
  object-fit: cover;
  margin-inline: auto;
}

.section-homa-about__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);        /* 50px */
  line-height: var(--line-height-tight); /* 55/50 = 1.1 */
  color: var(--color-accent-blue);       /* #00A0E9 */
  text-transform: uppercase;
  text-wrap: balance;
}

.section-homa-about__body {
  margin: 0 0 var(--space-xl);
  max-width: 543px;                       /* SECTION-LOCAL: Figma body column width */
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-lg);   /* 25px */
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

/* "ABOUT SOI" pill — c-cta-pill base geometry (yellow, h92, r80, content-width).
   Section-scoped overrides for the two TYPE deltas only. */
.section-homa-about .c-cta-pill {
  font-size: var(--font-size-body-lg);   /* 25px (base 30) */
  color: var(--color-text);              /* black (base navy) */
}

/* Tablet/desktop ≥769: portrait left, content right */
@media (min-width: 769px) {
  .section-homa-about__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .section-homa-about__figure  { grid-column: 1; grid-row: 1; }
  .section-homa-about__content { grid-column: 2; grid-row: 1; }
}

/* ============================================================
   Section 04: 04-homa-latest-news
   ============================================================ */
/* ============================================================
   Section: HOMA PAGE / latest-news (4 of 6)
   Section-local only. min-height:559px + margin-top:auto on Read more
   keeps all three cards visually identical regardless of body length.
   ============================================================ */

.section-homa-news {
  background: var(--color-band-olive-light);     /* #E6EBCB (CORRECTED from audit's "white") */
  padding: var(--space-2xl) var(--space-lg);
}

.section-homa-news__title {
  margin: 0 0 var(--space-2xl);
  text-align: center;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);                /* 50px */
  line-height: var(--line-height-solid);
  color: var(--color-text-dark-navy);            /* #041E41 */
}

.section-homa-news__grid {
  --card-w: 406px;          /* SECTION-LOCAL card width */
  --card-min-h: 559px;      /* SECTION-LOCAL: enforce identical card height */
  --thumb-size: 148px;      /* SECTION-LOCAL thumbnail box */
  display: grid;
  gap: var(--space-sm);
  justify-content: center;
  max-width: 1280px;
  margin-inline: auto;
}

.section-homa-news__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--card-w);
  min-height: var(--card-min-h);                 /* identical sibling heights */
  margin-inline: auto;
  padding: var(--space-xl) var(--space-md);
  background: var(--color-surface);              /* white card on olive */
}

.section-homa-news__thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  object-fit: contain;
  align-self: center;
}

.section-homa-news__card-title {
  margin: 0;
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-title);             /* 30px serif */
  line-height: var(--line-height-name);
  color: var(--color-text);
}

.section-homa-news__card-body {
  margin: 0;
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-sm);           /* 20px */
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

/* Read more pinned to the card bottom → aligned across all 3 cards */
.section-homa-news__readmore {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  width: max-content;
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-bold);
  font-style: italic;
  font-size: var(--font-size-link-italic);       /* 22px */
  line-height: var(--line-height-solid);
  color: var(--color-section-green);             /* #40915A */
  text-decoration: none;
  transition: color 0.15s ease;
}
.section-homa-news__readmore-icon {
  width: var(--space-sm);                         /* 24px */
  height: var(--space-sm);
  flex: none;
}
.section-homa-news__readmore:hover  { color: color-mix(in srgb, var(--color-section-green) 90%, black); }
.section-homa-news__readmore:active { color: color-mix(in srgb, var(--color-section-green) 95%, black); }
.section-homa-news__readmore:focus-visible {
  outline: 2px solid var(--color-text-dark-navy);
  outline-offset: 2px;
}

/* Tablet/desktop ≥769: 3-up grid of fixed-width cards */
@media (min-width: 769px) {
  .section-homa-news__grid { grid-template-columns: repeat(3, var(--card-w)); }
}

/* ============================================================
   Section 05: 05-homa-partners
   ============================================================ */
/* ============================================================
   Section: HOMA PAGE / partners (5 of 6)
   Section-local only.
   ============================================================ */

.section-homa-partners {
  background: var(--color-surface);              /* white */
  padding: var(--space-2xl) var(--space-lg);
}

.section-homa-partners__title {
  margin: 0 0 var(--space-2xl);
  text-align: center;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);                /* 50px */
  line-height: var(--line-height-solid);
  color: var(--color-text);                      /* #000000 */
  text-transform: uppercase;                     /* render all-caps; DOM keeps verbatim "PARTNERS & sponsor" */
}

.section-homa-partners__list {
  --logo-h: 116px;          /* SECTION-LOCAL logo height (from 207×116 box) */
  --logo-max-w: 207px;      /* SECTION-LOCAL logo max width */
  display: flex;
  flex-direction: column;    /* mobile-first: stacked */
  align-items: center;
  gap: var(--space-2xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-homa-partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Height-fixed sizing preserves real-logo aspect ratios while aligning visually by height.
   Real partner sections typically have logos of varying widths; locking to a 207×116 box
   would distort them. */
.section-homa-partners__logo {
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: var(--logo-max-w);
  object-fit: contain;
}

/* Tablet/desktop ≥769: centered row */
@media (min-width: 769px) {
  .section-homa-partners__list {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-3xl);
  }
}

/* ============================================================
   Section 06: 06-about-mine-hero
   ============================================================ */
/* ============================================================
   Section: ABOUT MINE / hero (1 of 4) — first page after HOMA
   c-hero variants: --solid --green --solid-tall (884px green, no overlay).
   c-cta-pill, c-hero__link referenced — not redefined.
   ============================================================ */

/* (CL.9 promotion: centering on .c-hero base. CL.4 promotion: nowrap on .c-hero__link base.) */

/* 3-part heading lockup: WELCOME to / SOI / conference */
.section-about-mine-hero .c-hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  font-size: initial;            /* neutralize 70px base; spans drive their own sizes */
  text-transform: uppercase;
  line-height: var(--line-height-solid);
  white-space: nowrap;
}
.section-about-mine-hero__welcome {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);          /* ~40px */
  color: var(--color-primary);             /* yellow */
}
.section-about-mine-hero__soi {
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-display-128); /* ~128px giant */
  color: var(--color-text-inverse);        /* white */
}
.section-about-mine-hero__conference {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);          /* ~50px */
  color: var(--color-primary);             /* yellow */
}

/* (CL.9 promotion: subtitle text-align: center on base. margin-inline: auto becomes redundant when parent has align-items: center.) */

/* Mobile ≤480: shrink lockup + stack CTAs */
@media (max-width: 480px) {
  .section-about-mine-hero__welcome    { font-size: var(--font-size-title); }   /* 40 → 30 */
  .section-about-mine-hero__soi        { font-size: var(--font-size-hero); }    /* 128 → 70 */
  .section-about-mine-hero__conference { font-size: var(--font-size-h3); }      /* 50 → 40 */
  .section-about-mine-hero .c-hero__actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Section 07: 07-about-mine-topics
   ============================================================ */
/* ============================================================
   Section: ABOUT MINE / TOPICS (2 of 4)
   Section-local only. First practical use of --color-band-olive-light
   + --color-band-olive-mid + --radius-card-topic tokens.
   ============================================================ */

.section-about-mine-topics {
  background: var(--color-surface);              /* white */
  padding: var(--space-2xl) var(--space-lg);
}

.section-about-mine-topics__inner {
  --topics-max: 1126px;       /* SECTION-LOCAL card/content width (matches Figma frame) */
  --card1-min-h: 382px;       /* SECTION-LOCAL: airy General Sessions card height */
  max-width: var(--topics-max);
  margin-inline: auto;
}

.section-about-mine-topics__title {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);                /* 50px */
  line-height: var(--line-height-solid);
  color: var(--color-text-dark-navy);            /* #041E41 */
  text-transform: uppercase;
}

.section-about-mine-topics__subtitle {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-family-serif);
  font-size: var(--font-size-body-lg);           /* 25px */
  line-height: var(--line-height-base);
  color: var(--color-text-dark-navy);
}

.section-about-mine-topics__card {
  border-radius: var(--radius-card-topic);       /* 33px */
  padding: var(--space-lg) var(--space-xl);
}
.section-about-mine-topics__card + .section-about-mine-topics__card {
  margin-top: var(--space-sm);                   /* ≈22px gap between cards */
}
.section-about-mine-topics__card--general {
  background: var(--color-band-olive-light);     /* #E6EBCB */
  min-height: var(--card1-min-h);                /* preserve airy General card */
}
.section-about-mine-topics__card--special {
  background: var(--color-band-olive-mid);       /* #BED28A */
}

.section-about-mine-topics__card-heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h4);                /* 32px */
  line-height: var(--line-height-solid);
  color: var(--color-text);                      /* black */
}

.section-about-mine-topics__list {
  margin: 0;
  padding-left: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-family: var(--font-family-serif);
  font-size: var(--font-size-body-sm);           /* 20px */
  line-height: var(--line-height-base);
  color: var(--color-text-dark-navy);
}
.section-about-mine-topics__list li { padding-left: var(--space-2xs); }

/* Single-column layout at all widths — no media query needed.
   __inner caps at 1126px on desktop, falls to 100%-minus-padding below. */

/* ============================================================
   Section 08: 08-about-mine-venue
   ============================================================ */
/* ============================================================
   Section: ABOUT MINE / Venue (3 of 4)
   First practical use of c-stat-tile (×3) + decorative Inter "SOI"
   letters at --font-size-display-soi.
   ============================================================ */

.section-about-mine-venue {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1194;                  /* preserve Figma frame proportions */
  background: url('./assets/about-mine/venue-bg.png') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-xl) var(--space-lg) 0;
  overflow: hidden;
}

/* SOI letters + stat tiles + address share one grid cell so the tiles
   visually overlap the SOI brandmark (blue tile bg over yellow letters → green). */
.section-about-mine-venue__lockup {
  display: grid;
  place-items: center;
}

.section-about-mine-venue__soi {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-family-display);    /* Inter */
  font-weight: var(--font-weight-black);       /* 900 — heavy */
  font-size: min(var(--font-size-display-soi), 38vw); /* 700px cap, fluid below to prevent mobile overflow */
  line-height: var(--line-height-solid);
  color: var(--color-decorative-yellow);       /* #FFED00 */
  text-align: center;
  user-select: none;
}

.section-about-mine-venue__overlay {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.section-about-mine-venue__tiles {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.section-about-mine-venue__address {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);           /* 30px */
  line-height: var(--line-height-name);
  color: var(--color-accent-blue);             /* #00A0E9 */
  text-align: center;
  text-transform: uppercase;
  font-style: normal;                           /* reset <address> default italics */
}

/* (CL.8 promotion: stat-tile label uppercase now on .c-stat-tile__label base.) */

/* Mobile: stack tiles vertically, relax the fixed aspect-ratio */
@media (max-width: 640px) {
  .section-about-mine-venue {
    aspect-ratio: auto;
    min-height: 70vh;
  }
  .section-about-mine-venue__tiles {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================================
   Section 09: 09-about-mine-committees
   ============================================================ */
/* ============================================================
   Section: ABOUT MINE / commitens (4 of 4 — ABOUT MINE complete)
   Heading file text is "Committees" (rendered uppercase) — "commitens"
   was only the Figma layer name. First use of c-person-card --committee.
   ============================================================ */

.section-about-mine-committees {
  background: var(--color-primary);              /* yellow #FCCB00 */
  padding: var(--space-2xl) var(--space-lg);
}

.section-about-mine-committees__inner {
  --committees-max: 1080px;       /* SECTION-LOCAL header/divider width */
  max-width: var(--committees-max);
  margin-inline: auto;
}

.section-about-mine-committees__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.section-about-mine-committees__title {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);                /* 50px */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-transform: uppercase;
}
.section-about-mine-committees__board {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-title);             /* 30px */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-transform: uppercase;
}

.section-about-mine-committees__divider {
  margin: var(--space-sm) 0 var(--space-2xl);
  border: 0;
  border-top: 1px solid var(--color-text);       /* 1px black rule */
}

.section-about-mine-committees__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3xl);                          /* ≈128 px — frame shows ~139 */
}

/* Caption: eyebrow (chair role) + name + affiliation, block flow with margins.
   max-width = committee photo size so the name wraps to 2 lines like the frame. */
.section-about-mine-committees .c-person-card figcaption {
  text-align: center;
  max-width: var(--person-card-committee-size); /* 382 px */
  margin-inline: auto;
}
.section-about-mine-committees__chair {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);              /* 24px */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-transform: uppercase;
}
.section-about-mine-committees .c-person-card__name {
  margin: 0 0 var(--space-2xs);
  /* (CL.6 promotion: name uppercase now on .c-person-card__name base.) */
}

@media (max-width: 768px) {
  .section-about-mine-committees__cards { gap: var(--space-2xl); }
}

/* ============================================================
   Section 10: 10-key-dates
   ============================================================ */
/* ============================================================
   Section: KEY DATES (1 of 1) — complete page in one block
   Green band with title + lorem description + vertical timeline + CTAs.
   c-cta-pill and c-hero__link referenced; everything else section-local.
   ============================================================ */

.section-key-dates {
  background: var(--color-section-green);          /* #40915A */
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
}
.section-key-dates__inner { max-width: 1280px; margin-inline: auto; }

.section-key-dates__title {
  margin: 0 0 var(--space-lg);
  text-align: center;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-hero);                /* 70px */
  line-height: var(--line-height-solid);
  color: var(--color-primary);                     /* yellow */
}

.section-key-dates__desc {
  margin: 0 auto var(--space-3xl);
  max-width: 933px;
  text-align: center;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-body-lg);             /* 25px */
  line-height: var(--line-height-relaxed);
  color: var(--color-text-inverse);
}

/* ---- Vertical timeline ---- */
.section-key-dates__timeline {
  --marker-size: 78px;
  --event-gap: var(--space-3xl);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--event-gap);
}
/* Central 2px white line — single decorative element */
.section-key-dates__timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--color-text-inverse);
}

.section-key-dates__event {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--marker-size) 1fr;
  align-items: center;
  column-gap: var(--space-lg);
}
.section-key-dates__marker {
  grid-column: 2;
  width: var(--marker-size);
  height: var(--marker-size);
  box-sizing: border-box;
  border-radius: var(--radius-full);
  background: var(--color-decorative-yellow);      /* #FFED00 */
  border: 10px solid var(--color-text-inverse);    /* 10px white ring */
  z-index: 1;
}
.section-key-dates__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 518px;
}
.section-key-dates__event--right .section-key-dates__content { grid-column: 3; text-align: left;  margin-right: auto; }
.section-key-dates__event--left  .section-key-dates__content { grid-column: 1; text-align: right; margin-left: auto; }

.section-key-dates__date {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);           /* Light 40 */
  font-size: var(--font-size-h3);                  /* 40px */
  line-height: var(--line-height-solid);
  color: var(--color-primary);                     /* yellow */
}
.section-key-dates__event-title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-h3);                  /* 40px */
  line-height: var(--line-height-solid);
  color: var(--color-text-inverse);
  text-wrap: balance;
}

/* ---- Bottom CTAs + POWER POINT ---- */
.section-key-dates__actions {
  margin-top: var(--space-3xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}
.section-key-dates__powerpoint { margin-top: var(--space-lg); text-align: center; }

/* ---- Responsive: single-side timeline ≤768 ---- */
@media (max-width: 768px) {
  .section-key-dates__timeline { --event-gap: var(--space-2xl); }
  .section-key-dates__timeline::before { left: calc(var(--marker-size) / 2); }
  .section-key-dates__event { grid-template-columns: var(--marker-size) 1fr; }
  .section-key-dates__marker { grid-column: 1; }
  .section-key-dates__event--right .section-key-dates__content,
  .section-key-dates__event--left  .section-key-dates__content {
    grid-column: 2; text-align: left; margin: 0;
  }
  .section-key-dates__date,
  .section-key-dates__event-title { font-size: var(--font-size-title); }   /* 40 → 30 */
}
@media (max-width: 480px) {
  .section-key-dates__title { font-size: var(--font-size-h3); }            /* 70 → 40 */
  .section-key-dates__actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Section 11: 11-submission-hero
   ============================================================ */
/* ============================================================
   Section: SUBMISSION / hero (1 of 3)
   Standard c-hero --md photo + overlay. Centering inherited from
   .c-hero base (CL.9). Only mobile title shrink is section-local.
   ============================================================ */

@media (max-width: 480px) {
  .section-submission-hero .c-hero__title { font-size: var(--font-size-h3); } /* 70 → 40 */
}

/* ============================================================
   Section 12: 12-submission-body-intro
   ============================================================ */
/* ============================================================
   Section: SUBMISSION / body-intro (2 of 3)
   White wrapper + centered serif paragraph.
   ============================================================ */

.section-submission-body {
  background: var(--color-surface);              /* white */
  padding: var(--space-2xl) var(--space-lg);
}

.section-submission-body__text {
  --max-content-width: 1038px;   /* SECTION-LOCAL content cap (Figma frame width) */
  max-width: var(--max-content-width);
  margin: 0 auto;
  font-family: var(--font-family-serif);         /* Tinos */
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);              /* 24px */
  line-height: var(--line-height-relaxed);       /* 1.7 — 1.0 from file would be claustrophobic */
  color: var(--color-text);                      /* #000000 */
  text-align: left;
}

@media (max-width: 480px) {
  .section-submission-body__text { font-size: var(--font-size-body-sm); } /* 24 → 20 */
}

/* ============================================================
   Section 13: 13-submission-templates-block
   ============================================================ */
/* ============================================================
   Section: SUBMISSION / templates-block (3 of 3 — SUBMISSION complete)
   First practical use of c-tag-pill (--cyan --w-sm + --neutral --w-sm).
   ============================================================ */

.section-submission-templates {
  background: var(--color-band-olive-light);     /* #E6EBCB */
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}

.section-submission-templates__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2);                /* 50px */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-transform: uppercase;
}

.section-submission-templates__subtitle {
  margin: 0 auto var(--space-xl);
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);              /* 24px */
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.section-submission-templates__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

@media (max-width: 480px) {
  .section-submission-templates__pills { flex-direction: column; align-items: center; }
}

/* ============================================================
   Section 14: 14-registration-fees-hero
   ============================================================ */
/* ============================================================
   Section: registration & fees / hero (1 of 3)
   c-hero --md photo + overlay. Centering inherited from .c-hero base (CL.9).
   Same composition as ABOUT MINE hero with title + subtitle + 1 CTA.
   ============================================================ */

@media (max-width: 480px) {
  .section-registration-hero .c-hero__title { font-size: var(--font-size-h3); } /* 70 → 40 */
}

/* ============================================================
   Section 15: 15-registration-fees-table
   ============================================================ */
/* ============================================================
   Section: registration & fees / fees-pricing-table (2 of 3)
   Resolves audit § 7 Blocking #5 (table layout) via screenshot.
   Semantic <table> with proper scope; horizontal scroll on mobile.
   ============================================================ */

.section-registration-fees-table {
  background: var(--color-section-green);          /* #40915A */
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
}
.section-registration-fees-table__inner {
  --fees-max: 1076px;        /* SECTION-LOCAL content/table width (Figma frame) */
  max-width: var(--fees-max);
  margin-inline: auto;
}

.section-registration-fees-table__title {
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-primary);   /* yellow rule under FEES */
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2);                  /* 50px */
  line-height: var(--line-height-solid);
  color: var(--color-primary);                     /* yellow */
  text-transform: uppercase;
}
.section-registration-fees-table__subtitle {
  margin: var(--space-sm) 0 var(--space-2xl);
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);                /* 24px */
  line-height: var(--line-height-base);
  color: var(--color-text-inverse);
}

/* ---- Pricing table ---- */
.section-registration-fees-table__scroll { overflow-x: auto; }   /* mobile horizontal scroll */
.section-registration-fees-table__table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;     /* separate → cells can have border-radius (rounded tabs) */
  border-spacing: 0;
  table-layout: fixed;
}

/* Header: rounded-top yellow tabs, separated by green gaps */
.section-registration-fees-table__table thead th {
  background: var(--color-primary);                /* yellow */
  color: var(--color-text);                        /* black */
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-lg);             /* 25px */
  line-height: var(--line-height-solid);
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: 18px 18px 0 0;                    /* SECTION-LOCAL: 18px not in token scale */
  border-left: var(--space-3xs) solid var(--color-section-green);
  border-right: var(--space-3xs) solid var(--color-section-green);
}

/* Body cells (td values + th row-labels): white text, interior yellow lines */
.section-registration-fees-table__table tbody td,
.section-registration-fees-table__table tbody th {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-lg);             /* 25px */
  line-height: var(--line-height-base);
  color: var(--color-text-inverse);                /* white */
  text-align: left;
  padding: var(--space-lg);
  border-right: 1px solid var(--color-primary);    /* interior vertical line */
  border-bottom: 1px solid var(--color-primary);   /* interior horizontal line */
}
/* outer blue frame — owned by edge cells to avoid border doubling */
.section-registration-fees-table__table tbody tr:first-child > * { border-top: 2px solid var(--color-accent-blue); }
.section-registration-fees-table__table tbody tr:last-child  > * { border-bottom: 2px solid var(--color-accent-blue); }
.section-registration-fees-table__table tbody > tr > *:first-child { border-left: 2px solid var(--color-accent-blue); }
.section-registration-fees-table__table tbody > tr > *:last-child  { border-right: 2px solid var(--color-accent-blue); }

.section-registration-fees-table__cta {
  margin-top: var(--space-2xl);
  display: flex;
  justify-content: center;
}

/* Screen-reader-only utility for <caption> */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Section 16: 16-registration-cancellation-policy
   ============================================================ */
/* ============================================================
   Section: registration & fees / cancellation-policy (3 of 3 — page complete)
   ============================================================ */

.section-registration-cancellation {
  background: var(--color-band-olive-light);     /* #E6EBCB */
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.section-registration-cancellation__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2);                /* 50px */
  line-height: var(--line-height-solid);
  color: var(--color-text);                      /* black */
  text-transform: uppercase;
}

.section-registration-cancellation__body {
  margin: 0 auto;
  max-width: 1066px;
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);              /* 24px */
  line-height: var(--line-height-base);
  color: var(--color-text);
}

@media (max-width: 480px) {
  .section-registration-cancellation__title { font-size: var(--font-size-h4); } /* 50 → 32 */
}

/* ============================================================
   Section 17: 17-program-hero
   ============================================================ */
/* ============================================================
   Section: Program / hero (1 of 3)
   c-hero --solid --green --solid-md (649 px). Uniform "SOI PROGRAM"
   title (Bold via CL.7 base). Centering inherited from CL.9 base.

   PG1.1 (two-size lockup) REVERTED — title is uniform 70 px.
   PG1.4 (Bold) RE-CONFIRMED — handled at CL.7 component base.
   ============================================================ */

@media (max-width: 480px) {
  .section-program-hero .c-hero__title { font-size: var(--font-size-h3); }   /* 70 → 40 */
  .section-program-hero .c-hero__actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Section 18: 18-program-speakers
   ============================================================ */
/* ============================================================
   Section: Program / speakers-band (2 of 3)
   Yellow band + 8 c-person-card --speaker arranged 3+3+2 centered.
   First multi-instance use of c-person-card; triggered CL.6 promotion
   (text-transform: uppercase on .c-person-card__name base).
   ============================================================ */

.section-program-speakers {
  background: var(--color-primary);            /* yellow #FCCB00 */
  padding: var(--space-2xl) var(--space-lg);
}

.section-program-speakers__title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);              /* 50px — render-trust (per-instance override on a 30px-base text component) */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-align: center;
  margin: 0 0 var(--space-2xl);
}

/* 3+3+2 layout: flex-wrap + center so the trailing 2-card row centers itself.
   Plain CSS grid would left-align the last row. */
.section-program-speakers__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-2xl);                /* updated from --space-xl per file center-to-center spacing ~528px */
  row-gap: var(--space-2xl);
}

.section-program-speakers__grid > li {
  flex: 0 1 var(--person-card-speaker-size);   /* 363px track, may shrink */
  display: flex;
  justify-content: center;
}

/* Constrain the caption measure so role text wraps within the column */
.section-program-speakers figcaption {
  max-width: var(--person-card-speaker-size);  /* 363px */
  margin-top: var(--space-xs);
}

/* Country sits on its own line under the name — file renders name + country
   as two stacked bold lines. Inherits uppercase from .c-person-card__name (CL.6 base). */
.section-program-speakers__country {
  display: block;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  /* 2-up; shrink portraits */
  .section-program-speakers__grid > li { flex-basis: 280px; }
  .section-program-speakers .c-person-card { --photo-size: 280px; }
  .section-program-speakers figcaption { max-width: 280px; }
}

@media (max-width: 480px) {
  /* 1-up; portrait scales to viewport */
  .section-program-speakers__grid {
    column-gap: var(--space-lg);
    row-gap: var(--space-xl);
  }
  .section-program-speakers__grid > li { flex-basis: 100%; }
  .section-program-speakers .c-person-card { --photo-size: min(80vw, 363px); }
  .section-program-speakers figcaption { max-width: 80vw; }
  .section-program-speakers__title { font-size: var(--font-size-h3); }   /* 50 → 40 */
}

/* ============================================================
   Section 19: 19-program-schedule
   ============================================================ */
/* ============================================================
   Section: Program / schedule (3 of 3 — Program complete)
   Section-local pattern (audit § 5 exclusion). No c-* components.
   Vertical timeline with day-labels left + yellow dots + blue date cards.
   ============================================================ */

.section-program-schedule {
  background: var(--color-surface-subtle);     /* #FCFCFB off-white */
  padding: var(--space-2xl) var(--space-lg);

  /* SECTION-LOCAL literals (off-scale Figma values) */
  --dot-size: 46px;
  --timeline-line-width: 3px;
  --schedule-card-min-h: 103px;
}

.section-program-schedule__title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2);              /* 50px */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-transform: uppercase;                   /* DOM "schedule overview" → caps */
  text-align: center;
  margin: 0 0 var(--space-2xl);
}

.section-program-schedule__timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 60rem;                            /* centers the ~973 px day+dot+card cluster */
}

/* Each row: [day label] [dot] [card] in a 3-col grid.
   Per-row ::before line segments join into one continuous vertical line through the dots. */
.section-program-schedule__row {
  position: relative;
  display: grid;
  grid-template-columns: 7rem var(--dot-size) 1fr;
  align-items: center;
  column-gap: var(--space-lg);                 /* 48 px */
  padding-block: var(--space-md);              /* 32 px — drives gap between dots */
}

/* Continuous vertical timeline line, centered on the dot column */
.section-program-schedule__row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* center of dot column = col1(7rem) + gap(48px) + half dot */
  left: calc(7rem + var(--space-lg) + (var(--dot-size) / 2) - (var(--timeline-line-width) / 2));
  width: var(--timeline-line-width);
  background: var(--color-text);               /* black */
  z-index: 0;
}

.section-program-schedule__day {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);           /* 30 px */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-transform: uppercase;                   /* DOM "1 day" → "1 DAY" */
  text-align: right;
}

.section-program-schedule__dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-full);
  background: var(--color-primary);            /* #FCCB00 yellow, decorative empty */
  justify-self: center;
  position: relative;
  z-index: 1;                                  /* on top of the line */
}

/* Blue day card: date (left, italic) + body (right, serif) */
.section-program-schedule__card {
  display: grid;
  grid-template-columns: minmax(7rem, 14rem) 1fr;
  align-items: center;
  column-gap: var(--space-lg);
  min-height: var(--schedule-card-min-h);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-card-schedule);  /* 22 px */
  background: var(--color-accent-blue);        /* #00A0E9 */
}

.section-program-schedule__date {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);       /* 300 italic */
  font-style: italic;
  font-size: var(--font-size-body-sm);         /* 20 px */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-transform: uppercase;                   /* DOM "July06 (Mon.)" → caps */
  text-align: right;
}

.section-program-schedule__body {
  font-family: var(--font-family-serif);       /* Tinos */
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-sm);         /* 20 px */
  line-height: var(--line-height-base);
  color: var(--color-text);
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  /* Stack: [day][dot] top row, card full-width below. Hide the line. */
  .section-program-schedule__row {
    grid-template-columns: auto var(--dot-size);
    column-gap: var(--space-sm);
    row-gap: var(--space-sm);
    padding-block: var(--space-sm);
  }
  .section-program-schedule__row::before { display: none; }
  .section-program-schedule__day { text-align: left; }
  .section-program-schedule__card { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  /* Card stacks date over body */
  .section-program-schedule__card {
    grid-template-columns: 1fr;
    row-gap: var(--space-2xs);
  }
  .section-program-schedule__date { text-align: left; }
  .section-program-schedule__title { font-size: var(--font-size-h3); } /* 50 → 40 */
}

/* ============================================================
   Section 20: 20-publication-hero
   ============================================================ */
/* ============================================================
   Section: PUBLICATION OPPORTUNITES / hero (1 of 2)
   c-hero --solid --green --solid-sm (634 px). First practical use of --solid-sm.
   Centering inherited from CL.9 base. Title Bold via CL.7 base.
   ============================================================ */

@media (max-width: 480px) {
  .section-publication-hero .c-hero__title { font-size: var(--font-size-h3); }   /* 70 → 40 */
  .section-publication-hero .c-hero__actions { flex-direction: column; width: 100%; }
  .section-publication-hero .c-cta-pill { width: 100%; }
}

/* ============================================================
   Section 21: 21-publication-pills
   ============================================================ */
/* ============================================================
   Section: PUBLICATION OPPORTUNITES / pills-row (2 of 2 — page complete)
   References c-tag-pill ×3 (--neutral --w-sm / --yellow --w-lg / --green --w-md).
   First practical use of c-tag-pill --green and --w-lg/--w-md widths.
   Two documented section-scoped overrides on the component (see audit appendix).
   ============================================================ */

.section-publication-pills {
  background: var(--color-surface);            /* white */
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}

.section-publication-pills__headline {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);        /* file: Nunito Sans Bold 700 (confirmed, no ambiguity) */
  font-size: var(--font-size-title);           /* 30 px */
  line-height: var(--line-height-solid);
  color: var(--color-text);
  text-transform: uppercase;                   /* DOM verbatim; frame renders caps */
  max-width: 53rem;                            /* ~847 px — drives 2-line wrap */
  margin: 0 auto var(--space-2xl);
  text-wrap: balance;
}

.section-publication-pills__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-sm);                        /* ~24 px (canvas pill gaps ≈ 23 px) */
}

/* Override 1 — allow labels to wrap to 2 lines.
   Base c-tag-pill has white-space: nowrap (CL.5, defensive for content-width pills);
   these are fixed-width pills with multi-word labels that the frame wraps. */
.section-publication-pills .c-tag-pill {
  white-space: normal;
}

/* Override 2 — green pill label is BLACK in the file (PO2.4).
   The component `--green` default `--pill-fg: text-inverse` (white) is contradicted
   by the only `--green` usage in the entire file. Flagged for cleanup. */
.section-publication-pills .c-tag-pill--green {
  --pill-fg: var(--color-text);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .section-publication-pills__list {
    flex-direction: column;
    align-items: center;
  }
  /* Equal-width stacked pills, capped at the widest (--w-lg = 474 px) */
  .section-publication-pills .c-tag-pill {
    width: 100%;
    max-width: var(--pill-width-tag-lg);
  }
}

/* ============================================================
   Section 22: 22-hotel-hero
   ============================================================ */
/* ============================================================
   Section: Hotel & travel / hero (1 of 2)
   c-hero --sm (654 px photo + overlay). First practical use of c-cta-pill --cyan-md.
   Centering inherited from CL.9 base. Title Bold via CL.7 base.
   ============================================================ */

@media (max-width: 480px) {
  .section-hotel-hero .c-hero__title { font-size: var(--font-size-h3); }   /* 70 → 40 */
  .section-hotel-hero .c-cta-pill { width: 100%; }
}

/* ============================================================
   Section 23: 23-hotel-venue
   ============================================================ */
/* ============================================================
   Section: Hotel & travel / venue-block (2 of 2 — page + STEP 4 complete)
   Mirrors ABOUT MINE Venue §08. References c-stat-tile ×3.
   No tile overrides — CL.8 promoted uppercase __label to base.
   ============================================================ */

.section-hotel-venue {
  background-image: url('./assets/hotel-travel/venue-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1920 / 1194;                  /* desktop proportion (matches §08) */
  display: grid;
  align-content: start;
  justify-items: center;
  padding-block-start: 2%;
  padding-inline: var(--space-lg);
  overflow: hidden;
}

/* SOI brandmark + stat tiles share one grid cell (overlay technique mirrors §08) */
.section-hotel-venue__brandstack {
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
}

.section-hotel-venue__brand {
  grid-area: stack;
  font-family: var(--font-family-display);    /* Inter */
  font-weight: var(--font-weight-bold);       /* 700 */
  font-size: min(var(--font-size-display-soi), 38vw); /* 700 px, capped to viewport */
  line-height: var(--line-height-solid);
  color: var(--color-decorative-yellow);      /* #FFED00 */
  text-align: center;
  user-select: none;
}

.section-hotel-venue__tiles {
  grid-area: stack;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--space-md);                       /* ~32 px */
}

.section-hotel-venue__address {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);          /* 30 px */
  line-height: var(--line-height-name);
  color: var(--color-accent-blue);            /* #00A0E9 */
  text-transform: uppercase;
  text-align: center;
  max-width: 58rem;                           /* ~926 px file width */
  margin: var(--space-md) auto 0;
  font-style: normal;                          /* reset <address> default italics */
  text-wrap: balance;
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .section-hotel-venue {
    aspect-ratio: auto;
    min-height: 70vh;
    align-content: center;
    padding-block: var(--space-2xl);
  }
  .section-hotel-venue__brandstack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }
  .section-hotel-venue__brand,
  .section-hotel-venue__tiles { grid-area: auto; }
  .section-hotel-venue__tiles {
    flex-direction: column;
    align-items: center;
  }
}