/* ============================================================
   v22.1 — Visual Precision & Layout Refinement
   Final browser-led refinement of proportions, containment,
   card rhythm, typography, header/footer consistency and scanning.
   ============================================================ */
:root {
  --max: 1240px;
  --radius: 24px;
  --brand-plaque-max: 292px;
  --brand-plaque-max-mobile: 272px;
  --brand-plaque-max-height: 382px;
  --brand-plaque-top-space: 12px;
  --display-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

html { color-scheme: dark; }
body {
  font-size: 16px;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3,
.section-head h2,
.closing strong,
.footer-brand,
.proof-body strong {
  font-family: var(--display-serif);
  font-weight: 600;
}

.shell {
  width: min(var(--max), calc(100% - 40px));
}

/* ---------- Header ---------- */
.topbar { backdrop-filter: blur(18px); }
.topbar-inner {
  min-height: 78px;
  gap: 22px;
}
.brand {
  flex: 0 0 auto;
  gap: 12px;
}
.mark {
  width: 50px;
  height: 50px;
  border-radius: 15px;
}
.brand-copy { min-width: 0; }
.brand-copy strong {
  font-size: .9rem;
  line-height: 1.2;
  letter-spacing: .075em;
}
.brand-copy span {
  margin-top: 4px;
  font-size: .66rem;
  line-height: 1.35;
  letter-spacing: .11em;
  white-space: nowrap;
}
.nav {
  flex-wrap: nowrap;
  gap: 4px;
}
.nav a {
  min-height: 40px;
  padding: 9px 11px;
  font-size: .84rem;
  line-height: 1;
  white-space: nowrap;
}
.nav .cta { margin-left: 4px; }

/* ---------- Homepage hero ---------- */
.hero { padding: 64px 0 20px; }
.hero-grid {
  grid-template-columns: minmax(0, 1.07fr) minmax(360px, .93fr);
  gap: 22px;
}
.hero-copy,
.hero-visual {
  min-width: 0;
  border-radius: 28px;
}
.hero-copy { padding: clamp(30px, 3.4vw, 42px); }
.hero-copy h1 {
  margin-top: 18px;
  max-width: 8ch;
  font-size: clamp(3rem, 5.45vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.eyebrow,
.label,
.strip-label,
.note-type,
.proof-meta-pill,
.brand-badge {
  letter-spacing: .13em;
}
.role-line {
  margin-top: 14px;
  max-width: 44ch;
  font-size: .84rem;
  line-height: 1.6;
  letter-spacing: .14em;
}
.tagline {
  margin-top: 20px;
  font-size: clamp(1.18rem, 2vw, 1.48rem);
}
.hero-kicker {
  margin-top: 14px;
  padding: 10px 14px;
  font-size: .86rem;
}
.intro {
  margin-top: 17px;
  max-width: 60ch;
  font-size: .96rem;
  line-height: 1.72;
}
.hero-actions {
  gap: 10px;
  margin-top: 24px;
}
.btn {
  min-height: 44px;
  padding: 11px 16px;
  font-size: .9rem;
}
.hero-signals {
  gap: 10px;
  margin-top: 18px;
}
.signal {
  min-height: 104px;
  padding: 13px 14px;
  border-radius: 17px;
}
.signal strong { font-size: .82rem; }
.signal span { font-size: .84rem; line-height: 1.45; }

.hero-visual {
  padding: 18px;
  gap: 14px;
}
.brand-plaque-shell { padding: 20px 18px 14px; }
.brand-plaque { filter: drop-shadow(0 14px 28px rgba(0,0,0,.3)); }
.brand-badge {
  top: 16px;
  left: 16px;
  padding: 7px 11px;
  font-size: .67rem;
}
.profile-meta { padding: 18px 20px 20px; }
.profile-meta strong { font-size: 1.12rem; }
.profile-meta span { font-size: .68rem; }
.profile-meta p { font-size: .9rem; line-height: 1.62; }
.hero-brand-line { margin-top: 15px; }
.meta-chip { padding: 8px 10px; font-size: .72rem; }
.hero-status-board { padding: 16px; border-radius: 20px; }
.hero-status-head { gap: 10px; }
.hero-status-head strong { font-size: 1rem; }
.hero-status-grid { gap: 8px; margin-top: 12px; }
.status-tile { min-height: 78px; padding: 11px 12px; border-radius: 14px; }
.status-tile span { font-size: .66rem; }
.status-tile strong { font-size: .84rem; }

/* ---------- Banner & section rhythm ---------- */
.founder-banner { padding-bottom: 18px; }
.founder-banner-card {
  max-width: 1180px;
  margin-inline: auto;
  border-radius: 24px;
}
section { padding-block: clamp(26px, 3.2vw, 40px); }
.section-head {
  align-items: flex-start;
  gap: clamp(18px, 3vw, 34px);
  margin-bottom: clamp(20px, 2.4vw, 28px);
  padding-bottom: 0;
}
.section-head > div { max-width: 760px; }
.section-head h2 {
  margin-top: 7px;
  padding-bottom: 12px;
  font-size: clamp(1.85rem, 3.3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.section-head h2::after { width: 72px; }
.section-head p {
  max-width: 58ch;
  font-size: .95rem;
  line-height: 1.68;
}

/* Prevent grid children and long labels from stretching containers. */
.summary-grid > *,
.ecosystem-grid > *,
.authority-grid > *,
.notes-grid > *,
.contact-grid > *,
.recognition-grid > *,
.case-summary-grid > *,
.founder-media-grid > *,
.focus-lane-grid > *,
.writing-lane-grid > *,
.truth-grid > *,
.backfill-grid > *,
.footer-nav-groups > * {
  min-width: 0;
}

.card,
.ecosystem-card,
.recognition-card,
.note-card,
.contact-card,
.surface-card,
.layer-card,
.footprint-card,
.approach-card,
.purpose-card,
.public-channel-card,
.media-lane,
.focus-lane-card,
.writing-lane-card,
.truth-card,
.backfill-step,
.case-study,
.timeline-entry,
.founder-note-entry {
  border-radius: 21px;
}

.summary-grid,
.ecosystem-grid,
.authority-grid,
.notes-grid,
.contact-grid { gap: 16px; }
.card,
.approach-card,
.purpose-card { padding: 21px; }
.card h3 { font-size: 1.12rem; line-height: 1.18; }
.card p,
.approach-card p,
.purpose-card p { line-height: 1.64; }

/* Remove artificial height where CSS Grid already equalises a row. */
.strip-card { min-height: 148px; }
.note-card,
.note-card--feature,
.note-card--compact { min-height: 0; }
.media-lane { min-height: 282px; }
.focus-lane-card { min-height: 282px; }
.case-field { min-height: 0; }
.identity-tier { min-height: 148px; }

/* ---------- Homepage split modules ---------- */
.now-home-grid,
.founder-story-home-grid,
.founder-media-home-grid,
.build-record-grid,
.contact-grid--executive { gap: 16px; }
.now-home-feature,
.founder-story-home-feature,
.founder-media-home-feature,
.build-record-feature { padding: clamp(24px, 3.4vw, 36px); }
.now-home-lanes,
.founder-story-home-principles,
.founder-media-home-types,
.build-record-side { padding: 18px; }
.now-home-lanes > div,
.founder-story-home-principles > div,
.founder-media-home-type,
.build-record-rule { border-radius: 14px; }

/* ---------- Secondary page heroes ---------- */
.selected-builds-hero,
.founder-story-hero,
.founder-media-hero,
.founder-notes-hero,
.now-hero {
  padding: 4rem 0 2rem;
  gap: 20px;
}
.selected-builds-hero h1,
.founder-story-hero h1,
.founder-media-hero h1,
.founder-notes-hero h1,
.now-hero h1 {
  font-size: clamp(2.65rem, 5.25vw, 4.55rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.selected-builds-hero-copy,
.founder-story-hero-copy,
.founder-media-hero-copy,
.founder-notes-hero-copy,
.now-hero-copy {
  padding: clamp(28px, 4vw, 46px);
  border-radius: 27px;
}
.founder-story-principle,
.notes-standard-panel,
.now-status-panel,
.media-console,
.case-standard-panel { border-radius: 24px; }
.ecosystem-page-main { padding-top: 44px; }
.ecosystem-page-hero {
  padding: clamp(28px, 4.3vw, 48px);
  border-radius: 27px;
}
.ecosystem-page-hero h1 {
  font-size: clamp(2.55rem, 5.4vw, 4.65rem);
  line-height: 1;
}
.legal-main { padding: 58px 0 54px; }
.legal-hero { padding: 30px; border-radius: 26px; }
.legal-hero h1 { font-size: clamp(2.25rem, 5vw, 3.7rem); }

/* Recognition pages are governed by recognition-system.css; this layer
   normalises their scale with the rest of the founder site. */
.recognition-page { padding-bottom: 3.5rem; }
.recognition-hero {
  max-width: 920px;
  padding: 4rem 0 2rem;
}
.recognition-hero h1 {
  font-size: clamp(2.55rem, 5.3vw, 4.55rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.recognition-band {
  margin: 1.25rem 0 2.2rem;
  padding: 1rem 1.1rem;
  border-radius: 15px;
}
.recognition-grid { gap: 14px; }
.recognition-card {
  padding: 1.2rem;
  border-radius: 16px;
}
.recognition-home-section {
  padding: clamp(32px, 4vw, 52px) 0;
  border-top: 0;
}

/* ---------- Case studies, timelines, archive cards ---------- */
.case-study-head { padding: clamp(24px, 3.5vw, 34px); }
.case-study-head h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.case-field { padding: 21px; }
.focus-lane-card { padding: clamp(21px, 2.6vw, 27px); }
.timeline-entry { padding: 21px; }
.journey-chapter { padding: 21px; }
.founder-note-entry { overflow: hidden; }
.media-lane { padding: 23px; }

/* ---------- Closing ---------- */
.closing {
  margin-top: 34px;
  padding: clamp(23px, 3vw, 30px);
  border-radius: 22px;
}
.closing strong { font-size: clamp(1.45rem, 3vw, 2rem); }
.closing p { max-width: 62ch; line-height: 1.62; }

/* ---------- Refined global footer ---------- */
.site-footer {
  margin-top: 18px;
  padding: 0 0 30px;
}
.footer-main--refined {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.7fr);
  align-items: start;
  gap: clamp(34px, 5vw, 62px);
  padding: 32px 0 24px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer-intro { max-width: 39ch; }
.footer-brand {
  margin-bottom: 8px;
  font-size: 1.28rem;
}
.footer-copy {
  max-width: 39ch;
  font-size: .9rem;
  line-height: 1.65;
}
.footer-copy::after { display: none; }
.footer-motto {
  margin: 12px 0 0;
  color: var(--gold-soft);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-nav-groups {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr .75fr;
  gap: 24px;
}
.footer-group { min-width: 0; }
.footer-group > strong {
  display: block;
  margin-bottom: 10px;
  color: var(--gold-soft);
  font-size: .68rem;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.footer-group a {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 5px 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: color var(--ease), transform var(--ease);
}
.footer-group a:hover,
.footer-group a:focus-visible {
  color: var(--text);
  transform: translateX(2px);
}
.footer-line {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.055);
  font-size: .82rem;
}

@media (max-width: 1120px) {
  .brand-copy span { white-space: normal; }
  .nav a { white-space: normal; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: none; }
  .hero-visual { max-width: 760px; width: 100%; }
  .footer-main--refined { grid-template-columns: 1fr; gap: 26px; }
  .footer-intro { max-width: 58ch; }
  .footer-nav-groups { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .shell { width: min(var(--max), calc(100% - 24px)); }
  .topbar-inner { min-height: 66px; }
  .mark { width: 44px; height: 44px; border-radius: 13px; }
  .brand-copy strong { font-size: .84rem; }
  .brand-copy span { font-size: .61rem; }

  .hero { padding: 38px 0 12px; }
  .hero-copy,
  .hero-visual { border-radius: 22px; }
  .hero-copy { padding: 24px 21px; }
  .hero-copy h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .role-line { font-size: .77rem; letter-spacing: .11em; }
  .hero-signals { grid-template-columns: 1fr; }
  .signal { min-height: 0; }
  .hero-visual { padding: 15px; }
  .brand-plaque-shell { padding: 18px 14px 12px; }

  section { padding-block: 26px; }
  .section-head { gap: 8px; margin-bottom: 18px; }
  .section-head h2 { font-size: clamp(1.7rem, 8.6vw, 2.2rem); }
  .section-head p { font-size: .91rem; }

  .selected-builds-hero,
  .founder-story-hero,
  .founder-media-hero,
  .founder-notes-hero,
  .now-hero { padding-top: 2.8rem; }

  .founder-story-section,
  .founder-media-section,
  .now-focus,
  .journey-timeline,
  .founder-notes-intro,
  .founder-notes-archive,
  .writing-lanes,
  .selected-builds-intro,
  .selected-builds-cases { margin-top: 3rem; }

  .strip-card,
  .media-lane,
  .focus-lane-card,
  .identity-tier { min-height: 0; }

  .footer-nav-groups { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 18px; }
  .footer-line { align-items: flex-start; }
}

@media (max-width: 520px) {
  .brand-copy span { display: none; }
  .footer-nav-groups { grid-template-columns: 1fr; }
  .footer-group { padding-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-group a:hover,
  .footer-group a:focus-visible { transform: none; }
}