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

:root {
  /* Matches stacked banner (title + subtitle); logo column uses full height (no vertical banner padding) */
  --banner-height: 5.75rem;
}

/* ── 2.4.1 Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  padding: 10px 18px;
  background: #0a0a0a;
  color: #ffe044;
  font-family: 'Now', system-ui, sans-serif;
  font-size: 15px;
  font-weight: bold;
  text-decoration: underline;
  border: 3px solid #ffe044;
  border-radius: 4px;
  z-index: 9999;
}
.skip-link:focus { top: 8px; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Now', system-ui, sans-serif;
  background: #0a0a0a;
}

#main-content:focus {
  outline: none;
}

/* ── BANNER ── */
.banner {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  min-height: var(--banner-height);
  background: #ffffff;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1.25rem 0 1.25rem;
  z-index: 10;
}

.banner-brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  justify-content: center;
  padding: 0.5rem 0 0.55rem 0;
}

.banner-logo-slot {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

.banner-logo {
  display: block;
  height: 100%;
  width: auto;
  max-width: min(58vw, 22rem);
  object-fit: contain;
  object-position: right center;
  flex-shrink: 0;
}

/* #111 on #fff = 18.1:1 contrast — passes AAA */
.banner-title {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.08em;
  color: #111111;
  text-transform: uppercase;
}

.banner-subtitle {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(0.95rem, 2.1vw, 1.15rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #111111;
  text-transform: uppercase;
}

.banner-site-link {
  color: inherit;
  text-decoration: none;
}

.banner-site-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.banner-site-link:focus-visible {
  outline: 2px solid #343cff;
  outline-offset: 3px;
}

/* Seeds subpage: site title left, section title right — no logo */
.banner--split-branding {
  justify-content: flex-start;
  gap: clamp(1.25rem, 4vw, 2.75rem);
}

.banner--split-branding .banner-brand--page {
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
}

/* Split subpage + black CAC in banner (e.g. Team) */
.banner--split-branding.banner--with-cac-logo .banner-logo-slot {
  margin-left: auto;
  flex-shrink: 0;
}

/* Team: sit page title beside site title; CAC stays right */
.banner--split-branding.banner--team {
  gap: clamp(0.35rem, 1.25vw, 0.65rem);
}

.banner--split-branding.banner--team .banner-brand--page {
  padding-left: 0;
}

/* Top-align TEAM with “Conflict Transformation” (not vertically centered vs two-line site block) */
.banner--team .banner-brand--site,
.banner--team .banner-brand--page {
  justify-content: flex-start;
}

.banner--team .banner-title,
.banner--team .banner-page-title {
  margin: 0;
}

/* Subpage header (e.g. Seeds) — accent on white banner */
.banner-page-title {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.08em;
  color: #343cff;
  text-transform: uppercase;
}

.banner-page-subtitle {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(0.95rem, 2.1vw, 1.15rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #343cff;
  text-transform: uppercase;
}

/* Scrollable inner page below banner (no map) */
.page-content {
  position: fixed;
  top: var(--banner-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--banner-height));
  overflow-y: auto;
  padding: 2rem 1.25rem 3rem;
  color: #e8e8e8;
  max-width: 42rem;
  margin: 0 auto;
}

.page-content a {
  color: #ffe044;
  text-underline-offset: 2px;
}

.page-content a:hover {
  color: #fff0a0;
}

.page-content a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.page-content__lead {
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* Seeds: fill viewport below banner — no outer padding (fixes % height + grid 1fr + overflow clip hiding logo) */
.page-content.page-content--split {
  overflow: hidden;
  padding: 0;
  max-width: none;
  width: 100%;
  height: calc(100vh - var(--banner-height));
  box-sizing: border-box;
}

.page-content--split {
  --page-split-bg: #343cff;
  --page-split-fg: #ffffff;
  display: grid;
  grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  align-content: stretch;
  gap: clamp(1.25rem, 4vw, 2.75rem);
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--page-split-bg);
  color: var(--page-split-fg);
  box-sizing: border-box;
}

.page-content--split .page-content__lead,
.page-content--split .page-content__main {
  color: var(--page-split-fg);
}

/* Aside: column flex; heading grows from 0 flex-basis; logo pinned to bottom (never clipped by fr sizing) */
.page-content__aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  overflow: visible;
}

/* Matches root .banner-title rhythm; white on blue — fills space above logo */
.page-content__aside-heading {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 0;
  width: 100%;
  padding-top: clamp(1rem, 2.75vw, 1.85rem);
  box-sizing: border-box;
  text-align: center;
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.08em;
  color: var(--page-split-fg);
  text-transform: uppercase;
}

.page-content__aside-brand {
  flex: none;
  width: 100%;
  padding: clamp(2rem, 4.5vw, 3rem) clamp(0.65rem, 2vw, 1.25rem) clamp(1.75rem, 3.5vw, 2.5rem);
  box-sizing: border-box;
}

.page-content__aside-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.page-content__main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: clamp(2.35rem, 5.5vw, 3.75rem) clamp(1.75rem, 4.5vw, 3.25rem) clamp(2.25rem, 5vw, 3.75rem) clamp(1.75rem, 4.5vw, 3rem);
}

.page-content__main .page-content__lead {
  margin-top: 0;
}

.page-content__prose p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
}

.page-content__prose p:last-child {
  margin-bottom: 0;
}

/* ── Podcast (/library/podcast/) — wide: left Vimeo; right: episodes vertically centered, CAC at column foot ── */
.page-content--split.page-content--podcast {
  --page-split-bg: #252525;
  --page-split-fg: #ffffff;
  background: #252525;
  color: #e8e8e8;
  grid-template-columns: minmax(14rem, 1.7fr) minmax(11rem, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 4vw, 2.75rem);
}

/* ── Convergence (/library/convergence/) — full #252525 split; left titles + CAC; right journey-style lead + kapisanan accordion (white on dark) ── */
.page-content--split.page-content--convergence {
  --page-split-bg: #252525;
  --page-split-fg: #ffffff;
  background: #252525;
  color: #e8e8e8;
  grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 4vw, 2.75rem);
  align-items: stretch;
}

.page-content__aside--convergence {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  align-self: stretch;
  align-items: stretch;
}

.page-content__aside--convergence .convergence-aside__intro {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding-top: clamp(1rem, 2.75vw, 1.85rem);
  padding-left: clamp(0.65rem, 2vw, 1.25rem);
  padding-right: clamp(0.65rem, 2vw, 1.25rem);
  box-sizing: border-box;
  gap: 0.35rem;
}

.convergence-aside__title {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}

.convergence-aside__dates {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f7ac32;
  margin: 0;
}

.convergence-aside__venue {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(0.8rem, 1.9vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

.convergence-aside__meta {
  white-space: pre-line;
  margin: 0;
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(0.8rem, 1.9vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
}

.page-content__main--convergence {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  align-self: stretch;
  background: #252525;
  color: #ffffff;
}

.page-content--convergence .page-content__main--convergence .page-content__lead {
  color: #f0f0f0;
}

.page-content--convergence .page-content__main--convergence a {
  color: #ffe044;
}

.page-content--convergence .page-content__main--convergence a:hover {
  color: #fff0a0;
}

.page-content--convergence .page-content__main--convergence a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.page-content--convergence .accordion--kapisanan .accordion__summary {
  color: #ffffff;
}

.page-content--convergence .accordion--kapisanan .accordion__summary::before {
  color: #ffffff;
}

.page-content--convergence .accordion--kapisanan .accordion__item[open] > .accordion__summary::before {
  color: #ffffff;
}

.page-content--convergence .accordion--kapisanan .accordion__panel p {
  color: #e0e0e0;
}

.page-content--convergence .accordion--kapisanan .accordion__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #252525, 0 0 0 5px #ffffff;
  border-radius: 4px;
}

.page-content__aside--convergence .page-content__aside-brand {
  align-self: stretch;
}

.page-content__aside--convergence .page-content__aside-logo {
  max-width: min(14rem, 100%);
  margin-left: 0;
  margin-right: auto;
  object-position: left center;
}

.page-content__aside--podcast-video {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.75rem, 2vw, 1.25rem);
  box-sizing: border-box;
  background: #f7ac32;
}

.podcast-vimeo-slot {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #f7ac32;
}

.podcast-vimeo-slot__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(70vh, 100%);
  margin: 0 auto;
  background: #0a0a0a;
  border: 2px dashed rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.podcast-vimeo-slot__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.page-content__podcast-right {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
  background: #252525;
}

.page-content__podcast-right .podcast-episode-nav {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.5rem, 3.5vw, 2.1rem) clamp(0.75rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1rem);
  box-sizing: border-box;
}

.page-content__podcast-right .page-content__podcast-cac {
  flex: 0 0 auto;
  width: 100%;
  background: var(--page-split-bg);
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(0.75rem, 2vw, 1rem) clamp(1.25rem, 3vw, 1.75rem);
  box-sizing: border-box;
}

.page-content__podcast-right .page-content__podcast-cac .page-content__aside-logo {
  width: auto;
  max-width: min(16rem, 88%);
  height: auto;
  margin: 0;
  object-position: left center;
}

.podcast-episode-nav__list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.podcast-episode-nav__link {
  display: block;
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #ffffff;
  padding: 0.5rem clamp(0.75rem, 2vw, 1rem);
  border-radius: 6px;
  line-height: 1.35;
}

.podcast-episode-nav__link:hover,
.podcast-episode-nav__link[aria-current="page"] {
  color: #ffffff;
}

.podcast-episode-nav__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ── Blog index (/blog/) — amber header, blue list column, dark article column ── */
.banner--blog {
  background: #f7ac32;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* Black CAC on amber; hidden ≤768px — mobile uses white mark in page footer */
.banner--blog .banner-logo-slot--blog-desktop {
  display: flex;
}

.banner-blog__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  min-width: 0;
  flex: 1;
}

.banner-brand--blog {
  flex: 1;
  min-width: 0;
}

.banner-blog__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(0.65rem, 2.5vw, 1.35rem);
  min-width: 0;
  width: 100%;
}

.banner--blog .banner-blog__title-row .banner-page-title {
  color: #343cff;
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
}

.banner--blog .banner-brand--site .banner-title {
  margin: 0;
}

.page-content--split.page-content--blog {
  --page-split-bg: #252525;
  --page-split-fg: #ffffff;
  background: #252525;
  color: #e8e8e8;
  /* Left: nav (scroll); right: article. CAC lives in .banner on wide viewports only */
  display: grid;
  grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 4vw, 2.75rem);
  align-items: stretch;
}

.page-content--blog .page-content__blog-cac {
  display: none;
  margin: 0;
}

.page-content--blog .page-content__blog-cac picture {
  display: block;
  width: 100%;
}

.page-content--blog .page-content__aside--blog {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  align-self: stretch;
}

.page-content--blog .page-content__main--blog {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  align-self: stretch;
}

.page-content__aside--blog {
  background: #343cff;
  color: #ffffff;
  align-items: stretch;
  justify-content: flex-start;
  padding: clamp(1rem, 2.5vw, 1.5rem) 0;
  box-sizing: border-box;
}

.blog-index-nav {
  width: 100%;
}

/* Match Seeds: nav fills column; scroll if needed so CAC stays visible at column bottom */
.page-content__aside--blog .blog-index-nav {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.blog-index-nav__list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.blog-index-nav__link {
  display: block;
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #ffffff;
  padding: 0.5rem clamp(0.75rem, 2vw, 1rem);
  border-radius: 6px;
  line-height: 1.35;
}

.blog-index-nav__link:hover {
  color: #ffe044;
  text-decoration: underline;
}

.blog-index-nav__link[aria-current="page"] {
  color: #ffe044;
}

.blog-index-nav__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.page-content__main--blog {
  background: #252525;
  color: #e0e0e0;
}

.page-content--blog.page-content--split .page-content__main {
  color: #e0e0e0;
}

.blog-post__title {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1.25rem;
}

.page-content--blog .blog-post__body p {
  color: #cfcfcf;
}

.page-content--blog .page-content__main a {
  color: #f7ac32;
}

.page-content--blog .page-content__main a:hover {
  color: #ffcf66;
}

.page-content--blog .page-content__main a:focus-visible {
  outline: 2px solid #f7ac32;
  outline-offset: 3px;
}

.page-content--split a {
  color: #ffe044;
}

.page-content--split a:hover {
  color: #fff0a0;
}

/* Split layout yellow links must not override stacked nav (Journey mobile, etc.) */
.page-content--split .nav-list-mobile__link,
.page-content--split .nav-list-mobile__link:hover {
  color: #ffffff;
}

.page-content--blog .blog-index-nav__link {
  color: #ffffff;
}

.page-content--blog .blog-index-nav__link:hover {
  color: #ffe044;
}

.page-content--blog .blog-index-nav__link[aria-current="page"] {
  color: #ffe044;
}

/* Journey: split above footer; desktop = white CAC in left column, mobile = black CAC in footer */
.page-main--journey {
  position: fixed;
  top: var(--banner-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--banner-height));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.page-main--journey > .page-content.page-content--split.page-content--journey {
  position: relative;
  top: 0;
  left: 0;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
}

.page-content__bottom-brand {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: clamp(0.85rem, 2.5vw, 1.35rem) clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.page-content__bottom-brand__logo {
  display: block;
  height: auto;
  width: auto;
  max-height: 3rem;
  max-width: min(14rem, 70vw);
  object-fit: contain;
}

/* Journey: map + logo column (narrower than before), white text column */
.page-content.page-content--split.page-content--journey {
  grid-template-columns: minmax(14rem, min(36%, 21rem)) minmax(0, 1fr);
  overflow: visible;
}

.page-content__map-col {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.75rem, 2vw, 1.25rem) 0;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
}

.page-content--journey .page-content__map-col .page-content__aside-brand--journey-desktop {
  flex: none;
  margin-top: auto;
  width: 100%;
}

/* Team: left column = co-creator lists; Seeds-blue panel + white type; no map / no in-column CAC */
.page-content--team .page-content__map-col--team,
.page-content--journey.page-content--team .page-content__map-col {
  background: #343cff;
  color: #ffffff;
  padding: clamp(1.1rem, 2.75vw, 1.65rem) clamp(1.1rem, 3.25vw, 2rem) clamp(1.1rem, 2.75vw, 1.65rem);
  box-sizing: border-box;
}

.page-content--team .team-co-creators {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.team-co-creators__heading {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.85rem;
}

.team-co-creators__subheading {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(0.82rem, 2vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 1.15rem 0 0.45rem;
}

.team-co-creators__section:first-of-type .team-co-creators__subheading {
  margin-top: 0;
}

.team-co-creators__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.team-co-creators__list li {
  font-size: clamp(0.9rem, 2vw, 0.98rem);
  line-height: 1.45;
  color: #ffffff;
}

@media (min-width: 769px) {
  .page-main--journey > .page-content__bottom-brand--journey-mobile {
    display: none;
  }
}

/* Map area grows; desktop CAC white logo sits in .page-content__aside-brand--journey-desktop */
.page-content__map-col-stage {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.page-content--journey .journey-map {
  position: static;
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 32rem);
  display: block;
}

.page-content--journey .page-content__main {
  background: #fff;
  color: #1a1a1a;
}

.page-content--journey .page-content__main .page-content__lead {
  color: #1a1a1a;
}

.page-content--journey .page-content__main a {
  color: #252eb8;
}

.page-content--journey .page-content__main a:hover {
  color: #343cff;
}

/* White article column: global .page-content a:focus uses white outline — invisible here */
.page-content--journey .page-content__main a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #111111;
  border-radius: 2px;
}

.page-content--journey .page-content__prose p {
  color: #2a2a2a;
}

.page-content__article-title {
  font-family: 'Now', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111111;
  margin: 1.25rem 0 1rem;
}

.page-content--journey .page-content__main .accordion__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #111111;
  border-radius: 4px;
}

/* Kapisanan-style accordion (<details>) — desktop: collapse; mobile: all open, static headings */
.accordion--kapisanan {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.accordion--kapisanan .accordion__item {
  background: transparent;
}

.accordion--kapisanan .accordion__summary {
  list-style: none;
  font-family: 'Now', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #111111;
  padding: 0.9rem 1.05rem 0.9rem 0;
  cursor: pointer;
  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.accordion--kapisanan .accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion--kapisanan .accordion__summary::marker {
  content: '';
}

.accordion--kapisanan .accordion__summary::before {
  content: '+';
  flex: none;
  width: 1.1rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: #111111;
  text-align: center;
  transition: color 0.15s ease;
}

.accordion--kapisanan .accordion__item[open] > .accordion__summary::before {
  content: '\2212';
  /* Unicode minus − (slightly wider than hyphen for “collapse” cue) */
}

.accordion--kapisanan .accordion__panel {
  padding: 0 0 1.1rem 0;
}

@media (min-width: 769px) {
  .accordion--kapisanan .accordion__item:not([open]) > .accordion__panel {
    display: none;
  }
}

.accordion--kapisanan .accordion__panel p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0 0 0.85rem;
}

.accordion--kapisanan .accordion__panel p:last-child {
  margin-bottom: 0;
}

.accordion--kapisanan .accordion__panel p:first-child {
  padding-top: 0.65rem;
}

/* Responsive: stacked sections as plain blocks — headings + body always visible */
@media (max-width: 768px) {
  .accordion--kapisanan .accordion__item {
    display: block;
  }

  /* UA + desktop rules hide closed <details> content; force visible for everyone */
  .accordion--kapisanan .accordion__item:not([open]) > .accordion__panel {
    display: block !important;
  }

  .accordion--kapisanan .accordion__panel {
    display: block !important;
    border-top: none;
    padding-top: 0.35rem;
    padding-left: 0;
  }

  /* Some UAs hide non-summary children of closed <details> on a wrapper — target directly */
  .accordion--kapisanan details.accordion__item > *:not(summary) {
    display: block !important;
  }

  .accordion--kapisanan .accordion__summary {
    pointer-events: none;
    cursor: default;
    user-select: text;
    padding-right: 1.05rem;
    padding-left: 0;
  }

  .accordion--kapisanan .accordion__summary::before {
    display: none;
  }

  .accordion--kapisanan .accordion__panel p:first-child {
    padding-top: 0;
  }
}

/* ── MAIN CONTAINER ── */
.container {
  position: fixed;
  top: var(--banner-height); left: 0;
  width: 100vw;
  height: calc(100vh - var(--banner-height));
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-stage {
  position: absolute;
  inset: 0;
}

/* Full-bleed map only on the home page (.map-stage). Journey etc. use .map-svg in-flow in a grid column. */
.map-stage .map-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* Hidden on large screens — shown only in mobile breakpoint below */
.nav-list-mobile {
  display: none;
}

.nav-list-mobile__list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-list-mobile__link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.9rem 1.25rem;
  font-family: 'Now', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: rgba(8, 8, 10, 0.82);
  border-radius: 10px;
  transition: background 0.2s, filter 0.2s;
}

.nav-list-mobile__link:hover {
  background: rgba(8, 8, 10, 0.92);
  color: #ffffff;
}

/* White + blue rings: visible on dark pills (home) and on white menu strip (Journey) */
.nav-list-mobile__link:focus-visible {
  position: relative;
  z-index: 1;
  outline: none;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 5px #343cff,
    0 0 0 8px #111111;
}

@media (max-width: 768px) {
  :root {
    /* Taller bar: headings stacked, logo row below */
    --banner-height: 10.5rem;
  }

  .banner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem 0.75rem;
    min-height: var(--banner-height);
  }

  .banner-brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0;
    gap: 0.35rem;
  }

  .banner-title,
  .banner-subtitle,
  .banner-page-title,
  .banner-page-subtitle {
    display: block;
    width: 100%;
    max-width: 20rem;
    text-align: center;
  }

  .banner--split-branding .banner-brand--page {
    padding-left: 0;
  }

  .banner-blog__lead {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .banner-blog__title-row {
    justify-content: center;
    text-align: center;
  }

  /* Stack: site title → subtitle → BLOG (full-width block); desktop row unchanged */
  .banner--blog .banner-blog__title-row {
    display: contents;
  }

  .banner-brand--blog .banner-title {
    order: 1;
  }

  .banner-brand--blog .banner-subtitle {
    order: 2;
  }

  .banner-brand--blog .banner-page-title {
    order: 3;
    width: 100%;
    max-width: 20rem;
    white-space: normal;
  }

  /* Same as Seeds: aside is display:contents — nav (order 0), main (1), CAC brand (2) at page bottom */
  .page-content--blog .blog-index-nav {
    flex: 0 0 auto;
    width: 100%;
    background: #343cff;
    padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1rem, 3vw, 1.25rem);
    box-sizing: border-box;
  }

  .page-content--blog .page-content__main.page-content__main--blog {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* CAC after article (white mark); header slot hidden on small screens */
  .page-content--blog .page-content__blog-cac {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    background: var(--page-split-bg);
  }

  .banner--blog .banner-logo-slot--blog-desktop {
    display: none;
  }

  .page-content--podcast .page-content__podcast-right {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .page-content--podcast .page-content__podcast-right .podcast-episode-nav {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(1.75rem, 5vw, 2.5rem) clamp(1rem, 3vw, 1.25rem) clamp(0.75rem, 2vw, 1rem);
  }

  .page-content--podcast .page-content__podcast-cac {
    flex: 0 0 auto;
    justify-content: center;
  }

  .page-content--podcast .page-content__podcast-cac .page-content__aside-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .page-content {
    position: relative;
    top: var(--banner-height);
    height: auto;
    min-height: calc(100vh - var(--banner-height));
  }

  /* Split pages: scrollable content; min-height fills viewport so aside-brand margin-top:auto pins CAC to bottom */
  .page-content.page-content--split {
    height: auto;
    min-height: calc(100vh - var(--banner-height));
    max-height: none;
    overflow: visible;
  }

  /* Stack: main first, CAC logo last; hide duplicate “Seeds” h3 (banner already names the page) */
  .page-content--split {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - var(--banner-height));
    width: 100%;
  }

  /* Blog desktop grid is (0,2,0); beats generic .page-content--split above — force single column here */
  .page-content--split.page-content--blog {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .page-content--blog .page-content__aside--blog,
  .page-content--blog .page-content__blog-cac,
  .page-content--blog .page-content__main--blog {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: none;
  }

  .page-content--split.page-content--convergence {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .page-content__aside--convergence,
  .page-content__main--convergence {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: none;
  }

  /*
   * Convergence: global aside uses display:contents — that made .convergence-aside__intro a flex child of the
   * split with flex:1 1 0 + min-height:0, so it shrank and clipped beside a tall accordion. Keep aside as a box:
   * titles + CAC as one band above the article (order 0 vs main 1).
   */
  .page-content__aside--convergence {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 0;
  }

  .page-content--convergence .convergence-aside__intro {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: auto;
    align-items: center;
    text-align: center;
    padding-bottom: clamp(0.5rem, 2vw, 1rem);
    padding-left: clamp(1rem, 3vw, 1.25rem);
    padding-right: clamp(1rem, 3vw, 1.25rem);
    width: 100%;
    box-sizing: border-box;
  }

  .page-content--convergence .page-content__aside--convergence .page-content__aside-brand {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: clamp(1rem, 4vw, 2rem);
    align-self: stretch;
    text-align: center;
  }

  .page-content--convergence .page-content__aside--convergence .page-content__aside-logo {
    margin-left: auto;
    margin-right: auto;
    object-position: center center;
  }

  .page-content--split.page-content--podcast {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: none;
    grid-template-rows: none;
    /* Fill area below fixed banner; flex column pins CAC to foot (main uses padding-top for banner — scroll stays correct) */
    min-height: calc(100vh - var(--banner-height));
    height: auto;
    /* Avoid split shell bottom padding — reads as a dark strip after the CAC block */
    padding-bottom: 0;
  }

  /*
   * Podcast: fixed banner + `position:relative; top: var(--banner-height)` on .page-content shifted paint
   * without growing scroll height the same way — scroll stopped at CAC while html/body (#0a0a0a) showed below.
   * Reserve banner space in flow on <main> and drop `top` on the split so the document scroll includes full content.
   */
  html:has(.page-content--podcast),
  html:has(.page-content--podcast) body {
    background: #252525;
  }

  #main-content:has(> .page-content.page-content--podcast) {
    padding-top: var(--banner-height);
    background: #252525;
    min-height: 100vh;
    box-sizing: border-box;
  }

  #main-content:has(> .page-content.page-content--podcast) > .page-content.page-content--podcast {
    top: 0;
    overflow: visible;
  }

  .page-content--podcast .page-content__aside--podcast-video,
  .page-content--podcast .page-content__podcast-right {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: none;
  }

  .page-content--podcast .page-content__aside--podcast-video {
    flex: 0 0 auto;
  }

  .page-content--podcast .podcast-vimeo-slot {
    margin: 0;
    padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
    width: 100%;
    box-sizing: border-box;
    background: #f7ac32;
  }

  /* Let 16:9 height follow full width; desktop max-height + overflow was clipping the bottom on narrow viewports */
  .page-content--podcast .podcast-vimeo-slot__frame {
    max-height: none;
  }

  .page-content__aside {
    display: contents;
  }

  .page-content__aside-heading {
    display: none;
  }

  .page-content__main {
    display: block;
    order: 1;
    flex: 0 1 auto;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .page-content__aside-brand {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
    padding: clamp(1.75rem, 5vw, 2.75rem) clamp(0.5rem, 3vw, 1rem) clamp(2rem, 6vw, 3.25rem);
    box-sizing: border-box;
  }

  .page-content__aside-logo {
    max-width: min(16rem, 75vw);
    margin: 0 auto;
    display: block;
  }

  .banner-logo-slot {
    align-self: center;
    height: auto;
    min-height: 2.5rem;
    max-height: 3.25rem;
    width: 100%;
    justify-content: center;
  }

  .banner-logo {
    height: 100%;
    max-height: 3rem;
    max-width: min(70vw, 14rem);
  }

  html, body {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100%;
    height: auto;
  }

  .container {
    position: relative;
    top: var(--banner-height);
    left: 0;
    width: 100%;
    min-height: calc(100vh - var(--banner-height));
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem 2.5rem;
  }

  .map-stage {
    display: none;
  }

  .nav-list-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 22rem;
  }

  /* Journey: no blue gap/padding between white map strip, article, and footer */
  .page-content.page-content--split.page-content--journey {
    gap: 0;
    padding-bottom: 0;
  }

  /* Journey: hide SVG map (like home .map-stage); show .nav-list-mobile stack instead */
  .page-content--journey .page-content__map-col-stage {
    display: none;
  }

  .page-content__aside-brand--journey-desktop {
    display: none;
  }

  .page-content--journey .page-content__map-col {
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    overflow: visible;
    background: #ffffff;
    padding-top: clamp(0.75rem, 2.5vw, 1.25rem);
    padding-bottom: clamp(0.75rem, 3vw, 1.25rem);
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page-content--journey.page-content--team .page-content__map-col {
    background: #343cff;
    color: #ffffff;
    padding: clamp(1.1rem, 2.75vw, 1.65rem) clamp(1.1rem, 3.25vw, 2rem) clamp(1.1rem, 2.75vw, 1.65rem);
    overflow: visible;
    min-height: auto;
    flex-shrink: 0;
  }

  /* Team co-creators: don’t use flex:1+min-height:0 on mobile (clips lists inside short flex parents) */
  .page-content--team .team-co-creators {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    max-height: none;
  }

  /* CAC in header on wide screens only; mobile uses page footer (matches Journey) */
  .banner--team .banner-logo-slot--team-desktop {
    display: none;
  }

  .page-content--journey .page-content__map-col .nav-list-mobile--journey {
    flex: 0 0 auto;
    justify-content: flex-start;
    align-items: stretch;
    margin-left: auto;
    margin-right: auto;
    padding: 0.25rem 0 0.25rem;
    box-sizing: border-box;
    max-width: 22rem;
    width: 100%;
    scroll-margin-top: calc(var(--banner-height) + 0.75rem);
  }

  /* Clear fixed banner without position:relative+top (avoids top clipping / flex shrink issues) */
  .page-main--journey {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding-top: var(--banner-height);
    box-sizing: border-box;
    overflow: visible;
  }

  .page-main--journey > .page-content.page-content--split.page-content--journey {
    flex: none;
    min-height: 0;
    width: 100%;
    top: 0;
  }
}

/* ── SVG interactive links ──
   .map-link-bg is sized to label text (+ padding) by script.js.
   Min hit area enforced in script to ~48×48 CSS px (2.5.8).
*/
.map-link-bg {
  fill: rgba(8, 8, 10, 0.82);
  stroke: none;
  cursor: pointer;
  transition: fill 0.2s, filter 0.2s;
}

.map-link:hover .map-link-bg {
  fill: rgba(8, 8, 10, 0.92);
}

/* 2.4.11 — focus without stroke: glow + fill shift */
.map-link:focus-visible .map-link-bg {
  fill: rgba(8, 8, 10, 0.96);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.55));
}

.map-link:focus { outline: none; }

.map-link-label {
  font-size: 32px;
  fill: #ffffff;
  font-family: 'Now', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  text-rendering: geometricPrecision;
}

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

/* ── 2.3.3 / prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .map-link-bg { transition: none; filter: none; }
  .map-link:focus-visible .map-link-bg {
    filter: none;
    fill: rgba(48, 48, 56, 0.98);
  }
}

/* Ghost Koenig card widths */
.kg-width-wide {
  position: relative;
  width: min(100%, 75rem);
  margin-left: auto;
  margin-right: auto;
}

.kg-width-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.gh-feature-image {
  margin: 1rem 0 0;
}

.gh-feature-image img {
  display: block;
  width: 100%;
  height: auto;
}

.gh-feature-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.85;
}