/* Canonical page frame and navigation geometry. Keep every page change visually stable. */
:root{
  --site-frame-width:var(--site-nav-width);
  --site-frame-margin:56px auto;
  --site-nav-width:min(1120px,calc(100% - 42px));
  --site-nav-height:58px;
  --font-ui:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --font-wordmark:Georgia,"Times New Roman",serif;
}

/* Canonical site typography. Keep this here so every page inherits one system. */
body{font-family:var(--font-ui)!important;font-weight:400!important}
body :where(nav,.site-nav,.site-menu,.site-footer,.nav-link,.nav-cta,.eyebrow,.kicker,.hero-eyebrow,.site-footer-links,.site-footer-meta){font-family:var(--font-ui)!important;font-weight:400!important;font-size:clamp(10px,1vw,12px)!important}
body :where(.serif,.wordmark,.nav-brand,.footer-brand,.site-footer-brand){font-family:var(--font-wordmark)!important}
body :where(.hero h1,.hero .h1,header.hero h1,.splash-middle h1){font-family:var(--font-ui)!important;font-size:clamp(1.5rem,2.2vw,2.2rem)!important;font-weight:400!important}
body :where(.hero .lede-phrase,.hero-sub,.hero-lede,.lede){font-family:var(--font-ui)!important;font-size:11px!important;font-weight:400!important}
body :where(.h2,.slide-h2-sentence,main>section>h2,.section-heading,.section-title){font-family:var(--font-ui)!important;font-size:clamp(1.6rem,3vw,2.8rem)!important;font-weight:400!important}

/* Shared keyboard affordances. Keep the skip target and focus treatment
   independent of any individual route's visual treatment. */
.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:100000;
  padding:10px 14px;
  border-radius:8px;
  background:var(--ink,#e8e3db);
  color:var(--deep,#1f1b16);
  font:500 12px/1.2 "IBM Plex Mono",monospace;
  text-decoration:none;
  transform:translateY(-180%);
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--terra,#c96e47);outline-offset:3px}
:where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--terra,#c96e47);outline-offset:3px}

.site-frame,
body.give-page .give-frame,
body.give-page .join-frame{
  width:var(--site-frame-width)!important;
  margin:var(--site-frame-margin)!important;
  min-height:0!important;
  border-radius:24px!important;
}

/* Footer panels must end with their content. A full viewport minimum here
   creates an empty screen of dark background after the footer on small pages. */
.site-frame:has(> .site-footer),
body.give-page .give-frame:has(> .site-footer),
body.give-page .join-frame:has(> .site-footer){min-height:0!important}

/* Split panels are content-height panels. Keeping the page-level viewport
   minimum on them leaves an empty slab after a short section or reel. */
.site-frame--continuation{min-height:0!important}

.site-nav,
body.give-page .site-nav{
  box-sizing:border-box!important;
  width:var(--site-nav-width)!important;
  height:var(--site-nav-height)!important;
  min-height:var(--site-nav-height)!important;
  margin:12px auto 0!important;
  padding:0 16px!important;
  top:12px!important;
  border-radius:14px!important;
}
.site-nav-logo img,
body.give-page .site-nav-logo img{height:34px!important;max-width:160px!important}
.site-nav-actions,
body.give-page .site-nav-actions{gap:12px!important}

/* One hero lede scale everywhere: pages may vary in content, never in type hierarchy. */
body .hero h1,
body .hero .h1,
body header.hero h1,
body .hero .lede-phrase,
body .splash-middle h1{
  font-size:clamp(1.4rem,2.25vw,1.85rem)!important;
  font-weight:500!important;
  line-height:1.14!important;
  letter-spacing:-.02em!important;
}

/* Cap only display styles that would otherwise exceed the Home lede.
   .h2 and .slide-h2-sentence are governed by lede-tuning.css's responsive
   scale; capping them here as a flat max-width value fought that scale. */
body .pilot-feature-lede{font-size:min(clamp(1.35rem,2.35vw,2rem),1.85rem)!important}
body .studio-spotlight h2{font-size:min(clamp(1.65rem,4vw,3rem),1.85rem)!important}
body .venture-spotlight-card h3{font-size:min(clamp(1.5rem,2.75vw,1.95rem),1.85rem)!important}

/* The opening offset is shared so each hero eyebrow begins at the same visual point. */
.site-frame .hero,
body.give-page .give-frame .hero,
body.give-page .join-frame .hero,
body > main > .hero,
body > .hero{
  padding-top:clamp(52px,6vw,76px)!important;
}

/* Eyebrows are one system-wide label style, regardless of the page-specific class name. */
body [class*="eyebrow"],
body [class*="kicker"]{
  font-family:"IBM Plex Mono",monospace!important;
  font-size:10px!important;
  font-weight:500!important;
  line-height:1.25!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}

@media (max-width:760px){
  :root{
    --site-frame-width:var(--site-nav-width);
    --site-frame-margin:16px auto;
    --site-nav-width:calc(100% - 24px);
    --site-nav-height:54px;
  }
  .site-frame,
  body.give-page .give-frame,
  body.give-page .join-frame{
    min-height:0!important;
    border-radius:16px!important;
  }
  .site-nav,
  body.give-page .site-nav{
    margin:8px auto 0!important;
    padding:0 12px!important;
    top:8px!important;
    border-radius:12px!important;
  }
  .site-nav-logo img,
  body.give-page .site-nav-logo img{height:30px!important;max-width:142px!important}
  .site-nav-actions,
  body.give-page .site-nav-actions{gap:8px!important}
  body .hero h1,
  body .hero .h1,
  body header.hero h1,
  body .hero .lede-phrase,
  body .splash-middle h1{
    font-size:clamp(1.35rem,6.5vw,1.8rem)!important;
  }
  body .pilot-feature-lede{font-size:min(clamp(1.35rem,2.35vw,2rem),1.8rem)!important}
  body .studio-spotlight h2{font-size:1.8rem!important}
  body .venture-spotlight-card h3{font-size:min(clamp(1.5rem,2.75vw,1.95rem),1.8rem)!important}
  body [class*="eyebrow"],
  body [class*="kicker"]{
    font-size:9px!important;
    letter-spacing:.15em!important;
  }
  .site-frame .hero,
  body.give-page .give-frame .hero,
  body.give-page .join-frame .hero,
  body > main > .hero,
  body > .hero{
    padding-top:52px!important;
  }

  /* Mobile ledes share a single centered reading axis across every page. */
  body .hero-copy,
  body .hero-copy--center,
  body .hero .hero-copy,
  body .hero .hero-sub,
  body .hero-sub,
  body .hero h1,
  body .hero .h1,
  body header.hero h1,
  body .hero .lede-phrase,
  body .splash-middle h1{
    text-align:center!important;
    align-items:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body .hero h1,
  body .hero .h1,
  body header.hero h1,
  body .hero .lede-phrase,
  body .splash-middle h1{
    max-width:20ch!important;
    text-wrap:balance;
  }
}

/* Shared page rhythm: every top-level panel begins its eyebrow at exactly the
   same inset.  The panel owns that spacing; nested wrappers add none. */
:root{--birthright-eyebrow-inset:48px}
body .site-frame > :is(.hero,header.hero,.section,section),
body.give-page .give-frame > :is(.hero,header.hero,.section,section),
body.give-page .join-frame > :is(.hero,header.hero,.section,section){
  padding-top:var(--birthright-eyebrow-inset)!important;
}
body .site-frame > :is(.hero,header.hero,.section,section) > .wrap,
body.give-page .give-frame > :is(.hero,header.hero,.section,section) > .wrap,
body.give-page .join-frame > :is(.hero,header.hero,.section,section) > .wrap{
  padding-top:0!important;
}
@media(max-width:760px){
  :root{--birthright-eyebrow-inset:32px}
}

/* Canonical section rhythm. Page-local values must not leave one section
   with a billboard-sized tail while the next is tightly packed. */
:root{
  --birthright-section-inset:48px;
  --birthright-eyebrow-gap:16px;
}
body .site-frame main > section,
body.give-page .give-frame > section,
body.give-page .join-frame > section,
body > main > section{
  padding-top:var(--birthright-section-inset)!important;
  padding-bottom:var(--birthright-section-inset)!important;
}
body main > section :is(.eyebrow,.priority-kicker,.build-chain-kicker,.labs-part-kicker,.hero-eyebrow):first-child{
  margin-top:0!important;
  margin-bottom:var(--birthright-eyebrow-gap)!important;
}
body main > section > :is(.wrap,.section-inner,.section-head,.priority-head,.build-chain-head,.labs-part-head,.groundwork-block,.faq-inner,.impact-drawer-inner) > p:last-child{
  margin-bottom:0!important;
}
@media(max-width:760px){
  :root{--birthright-section-inset:32px;--birthright-eyebrow-gap:14px}
}

/* Every intentional break in the inset page system uses the same soft edge.
   This is limited to seam carriers so unified nav/hero panels stay continuous. */
:root{--birthright-seam-radius:24px}
body :is(.home-seam,.page-seam,.about-seam)::before,
body :is(.home-seam,.page-seam),
body .site-frame--continuation,
body.give-page .join-frame{
  border-radius:var(--birthright-seam-radius)!important;
}
body :is(.home-seam,.page-seam,.site-frame--continuation){overflow:clip}
@media(max-width:760px){
  :root{--birthright-seam-radius:16px}
}