/*
  EwanSimpson.org Build 2 — shared visual system
  Source of truth: AI-OS Build 1.
  Loaded after each page's legacy CSS by /site-nav.js so it can normalize
  the accumulated standalone builds without rewriting their content.
*/

:root {
  --ink: #182130 !important;
  --mid: #56606f !important;
  --soft: #7b8492 !important;
  --rule: #dde2e8 !important;
  --line: #dde2e8 !important;
  --bg: #f7f8fa !important;
  --paper: #ffffff !important;
  --card: #ffffff !important;
  --navy: #102b49 !important;
  --accent: #102b49 !important;
  --accent-dark: #0b2038 !important;
  --blue: #2d67b2 !important;
  --pale: #edf3f9 !important;
  --gold: #b98024 !important;
  --green: #28725d !important;
  --red: #a84a4f !important;
  --serif: 'Lora', Georgia, serif !important;
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  --max: 1180px !important;
  --shadow: 0 18px 50px rgba(16,43,73,.08) !important;
  --radius: 16px !important;
}

html.site-v2 { scroll-behavior: smooth; }
body.site-v2-body {
  margin: 0 !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 16px;
  line-height: 1.65;
}
body.site-v2-body *, body.site-v2-body *::before, body.site-v2-body *::after { box-sizing: border-box; }
body.site-v2-body img { max-width: 100%; }
body.site-v2-body a { text-underline-offset: 3px; }

/* ---------- Global navigation ---------- */
.global-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1100 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  display: block !important;
  background: rgba(247,248,250,.94) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.global-nav-inner {
  width: min(var(--max), calc(100% - 48px));
  min-height: 62px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.global-nav .nav-name {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.global-nav .nav-links {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
}
.global-nav .nav-links a {
  position: relative;
  padding: 22px 0 20px !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--mid) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.global-nav .nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.global-nav .nav-links a:hover,
.global-nav .nav-links a.active { color: var(--navy) !important; }
.global-nav .nav-links a:hover::after,
.global-nav .nav-links a.active::after { transform: scaleX(1); }
.global-nav .nav-links .nav-contact {
  margin-left: 4px !important;
  padding: 11px 16px !important;
  border: 1px solid var(--navy) !important;
  border-radius: 999px !important;
  background: var(--navy) !important;
  color: #fff !important;
  letter-spacing: .065em !important;
  box-shadow: 0 6px 18px rgba(16,43,73,.10) !important;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.global-nav .nav-links .nav-contact::after { display: none !important; }
.global-nav .nav-links .nav-contact:hover {
  background: var(--accent-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(16,43,73,.14) !important;
}
.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font: 700 11px/1 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
}

/* ---------- Shared page grammar ---------- */
body.site-v2-body .eyebrow,
body.site-v2-body .meta-tag,
body.site-v2-body .card-label,
body.site-v2-body .section-label,
body.site-v2-body .arc-eyebrow,
body.site-v2-body .arc-band,
body.site-v2-body .exp-num,
body.site-v2-body .start-map-label {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}
body.site-v2-body h1,
body.site-v2-body h2,
body.site-v2-body .arc-title,
body.site-v2-body .arc-section h2,
body.site-v2-body .arc-panel h2 {
  font-family: var(--serif) !important;
  color: var(--navy) !important;
  letter-spacing: -.03em;
}
body.site-v2-body h3 { color: var(--navy); }
body.site-v2-body .lede,
body.site-v2-body .hero-body,
body.site-v2-body .hero-sub,
body.site-v2-body .gs-hero-body,
body.site-v2-body .section-sub,
body.site-v2-body .arc-subtitle,
body.site-v2-body .arc-section-intro { color: var(--mid) !important; }

body.site-v2-body .card,
body.site-v2-body .hero-panel,
body.site-v2-body .start-map,
body.site-v2-body .stat,
body.site-v2-body .edu-item,
body.site-v2-body .exp-step,
body.site-v2-body .form-card,
body.site-v2-body .gs-callout,
body.site-v2-body .outcome-card,
body.site-v2-body .arc-card,
body.site-v2-body .arc-panel:not(.dark),
body.site-v2-body .cta-block {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

body.site-v2-body .button,
body.site-v2-body .btn,
body.site-v2-body .profile-link,
body.site-v2-body .cv-link,
body.site-v2-body .arc-button {
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease !important;
}
body.site-v2-body .button:hover,
body.site-v2-body .btn:hover,
body.site-v2-body .profile-link:hover,
body.site-v2-body .cv-link:hover,
body.site-v2-body .arc-button:hover { transform: translateY(-1px); }

body.site-v2-body footer,
body.site-v2-body .arc-footer {
  border-top: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--soft) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  text-align: center;
  padding: 34px 24px !important;
}
body.site-v2-body footer a,
body.site-v2-body .arc-footer a { color: var(--mid) !important; text-decoration: none; }

/* ---------- Home ---------- */
body.page-home #home {
  width: min(var(--max), calc(100% - 48px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 88px 0 72px !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 72px !important;
}
body.page-home h1 {
  font-size: clamp(46px, 6vw, 72px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  color: var(--navy) !important;
  margin-bottom: 22px !important;
}
body.page-home .hero-subtitle {
  color: var(--gold) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  letter-spacing: .09em !important;
  margin: 0 0 22px !important;
}
body.page-home .hero-body { max-width: 760px !important; font-size: 17px !important; }
body.page-home .start-map {
  max-width: 820px !important;
  margin-top: 38px !important;
  padding: 28px !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow) !important;
}
body.page-home .start-map h2 { font-size: 24px !important; color: var(--navy) !important; }
body.page-home .start-grid { gap: 12px !important; }
body.page-home .start-item {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 15px 16px !important;
  background: var(--bg) !important;
}
body.page-home .start-item:hover { border-color: #c9d3df !important; transform: translateY(-1px); }
body.page-home .start-item strong { color: var(--navy) !important; }
body.page-home .stats {
  max-width: 820px !important;
  margin-top: 28px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  overflow: hidden;
}
body.page-home .stat { border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; }
body.page-home .stat:last-child { border-right: 0 !important; }
body.page-home .stat-num { color: var(--navy) !important; font-size: 27px !important; }
body.page-home .hero-photo-wrap { border-radius: 14px !important; box-shadow: var(--shadow) !important; }
body.page-home .home-note { width: min(var(--max), calc(100% - 48px)) !important; max-width: none !important; padding: 0 !important; }

/* ---------- Research ---------- */
body.page-research main {
  width: min(var(--max), calc(100% - 48px)) !important;
  max-width: none !important;
  padding: 82px 0 78px !important;
}
body.page-research h1 { font-size: clamp(46px, 6vw, 68px) !important; line-height: 1.04 !important; }
body.page-research .lede { max-width: 860px !important; font-size: 18px !important; }
body.page-research .research-map { border-radius: 18px !important; padding: 28px !important; box-shadow: var(--shadow) !important; }
body.page-research .research-map h2 { color: var(--navy) !important; font-size: 24px !important; }
body.page-research .quick-links a { border-radius: 999px !important; background: #fff !important; border-color: var(--line) !important; }
body.page-research .paper,
body.page-research .research-item,
body.page-research article { border-color: var(--line) !important; }

/* ---------- About ---------- */
body.page-about .about-hero,
body.page-about section,
body.page-about hr.rule {
  width: min(var(--max), calc(100% - 48px)) !important;
  max-width: none !important;
}
body.page-about .about-hero {
  padding: 82px 0 64px !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 72px !important;
}
body.page-about h1 { font-size: clamp(42px, 5vw, 60px) !important; line-height: 1.08 !important; }
body.page-about .photo-wrap { border-radius: 14px !important; box-shadow: var(--shadow) !important; }
body.page-about section { padding: 70px 0 !important; }
body.page-about h2 { font-size: 34px !important; }
body.page-about .edu-item { border-radius: 12px !important; padding: 20px 22px !important; }
body.page-about .tl-item { border-color: var(--line) !important; }

/* ---------- AI Matrix ---------- */
body.page-ai-matrix main {
  width: min(var(--max), calc(100% - 48px)) !important;
  max-width: none !important;
  padding: 84px 0 78px !important;
}
body.page-ai-matrix h1 { font-size: clamp(46px, 6vw, 68px) !important; line-height: 1.05 !important; max-width: 900px !important; }
body.page-ai-matrix .lede { max-width: 880px !important; }
body.page-ai-matrix .hero-panel { border-radius: 18px !important; padding: 30px !important; box-shadow: var(--shadow) !important; }
body.page-ai-matrix .hero-panel h2 { color: var(--navy) !important; font-size: 26px !important; }
body.page-ai-matrix .grid { gap: 14px !important; }
body.page-ai-matrix .card { border-radius: 14px !important; padding: 22px !important; }
body.page-ai-matrix .card h3 { color: var(--navy) !important; }
body.page-ai-matrix .button.primary { background: var(--navy) !important; border-color: var(--navy) !important; }
body.page-ai-matrix .button.secondary { color: var(--navy) !important; border-color: var(--line) !important; }

/* ---------- FARABI ---------- */
body.page-farabi .page { max-width: 820px !important; padding: 0 24px 84px !important; }
body.page-farabi .hero { padding: 72px 0 42px !important; }
body.page-farabi .hero h1 { font-size: clamp(42px, 6vw, 62px) !important; line-height: 1.06 !important; }
body.page-farabi .explainer { gap: 12px !important; }
body.page-farabi .exp-step { border-radius: 12px !important; padding: 18px !important; }
body.page-farabi .form-card { border-radius: 18px !important; padding: 30px !important; box-shadow: var(--shadow) !important; }
body.page-farabi .form-card h2 { color: var(--navy) !important; font-size: 24px !important; }
body.page-farabi .field input[type='email'],
body.page-farabi .field input[type='text'] { border-radius: 10px !important; background: #fff !important; border-color: var(--line) !important; }
body.page-farabi .upload-zone { border-radius: 12px !important; background: var(--bg) !important; border-color: var(--line) !important; }
body.page-farabi .submit-btn { border-radius: 999px !important; background: var(--navy) !important; }

/* ---------- Grey Swan ---------- */
body.page-grey-swan .gs-hero,
body.page-grey-swan section,
body.page-grey-swan hr.rule {
  width: min(var(--max), calc(100% - 48px)) !important;
  max-width: none !important;
}
body.page-grey-swan .gs-hero { padding: 82px 0 58px !important; }
body.page-grey-swan .gs-hero h1 { font-size: clamp(46px, 6vw, 68px) !important; line-height: 1.05 !important; max-width: 900px; }
body.page-grey-swan .gs-hero-body { max-width: 820px !important; }
body.page-grey-swan section { padding: 72px 0 !important; }
body.page-grey-swan h2 { font-size: 36px !important; }
body.page-grey-swan .run-meta { border-radius: 14px !important; border-color: var(--line) !important; max-width: 820px !important; }
body.page-grey-swan .run-meta-item { border-color: var(--line) !important; }
body.page-grey-swan .run-meta-num { color: var(--navy) !important; }
body.page-grey-swan .gs-callout { border-radius: 14px !important; border-left: 4px solid var(--navy) !important; padding: 24px !important; }
body.page-grey-swan .gs-callout-head { color: var(--navy) !important; }
body.page-grey-swan .outcome-card { border-radius: 14px !important; }

/* ---------- ARC ---------- */
body.page-arc {
  background: var(--bg) !important;
  background-image: none !important;
}
body.page-arc .arc-shell { width: min(var(--max), calc(100% - 48px)) !important; }
body.page-arc .arc-hero { padding: 82px 0 48px !important; }
body.page-arc .arc-title { color: var(--navy) !important; font-size: clamp(46px, 6vw, 68px) !important; line-height: 1.03 !important; }
body.page-arc .arc-subtitle { font-size: 18px !important; }
body.page-arc .arc-panel,
body.page-arc .arc-card,
body.page-arc .arc-callout { border-radius: 16px !important; box-shadow: none !important; }
body.page-arc .arc-panel.dark {
  background: linear-gradient(135deg, var(--navy), #173d66) !important;
  border-color: transparent !important;
}
body.page-arc .arc-panel.dark h2,
body.page-arc .arc-panel.dark h3 { color: #fff !important; }
body.page-arc .arc-panel.dark .arc-eyebrow { color: #d6b36b !important; }
body.page-arc .arc-section { padding: 52px 0 !important; }
body.page-arc .arc-section h2 { font-size: clamp(32px, 4vw, 46px) !important; color: var(--navy) !important; }
body.page-arc .arc-card h3 { color: var(--navy) !important; }
body.page-arc .arc-button { border-color: var(--navy) !important; color: var(--navy) !important; }
body.page-arc .arc-button.primary { background: var(--navy) !important; color: #fff !important; }
body.page-arc .arc-subnav { gap: 8px !important; }
body.page-arc .arc-subnav a { border-color: var(--line) !important; color: var(--mid) !important; background: #fff !important; }
body.page-arc .arc-subnav a:hover,
body.page-arc .arc-subnav a.active { border-color: var(--navy) !important; color: var(--navy) !important; }
body.page-arc .arc-callout { background: var(--pale) !important; border-color: #d6e1ec !important; }

/* ---------- The Second Teacher essay ---------- */
body.page-essay { background: var(--bg) !important; color: var(--ink) !important; }
body.page-essay .page { max-width: 780px !important; padding: 76px 24px 72px !important; }
body.page-essay .back-link { color: var(--mid) !important; }
body.page-essay h1 {
  color: var(--navy) !important;
  font-family: var(--serif) !important;
  font-size: clamp(40px, 5vw, 58px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
}
body.page-essay .dek { color: var(--mid) !important; font-size: 18px !important; font-style: normal !important; }
body.page-essay .rule { border-color: var(--line) !important; }
body.page-essay .essay-body { font-family: var(--serif) !important; font-size: 17px !important; line-height: 1.84 !important; }
body.page-essay .essay-body p { color: #364150 !important; }
body.page-essay .essay-body h2 {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin: 3.2rem 0 1.15rem !important;
}
body.page-essay .essay-body strong { color: var(--ink) !important; }
body.page-essay .essay-body em { color: var(--mid) !important; }
body.page-essay .btn { background: #fff !important; color: var(--navy) !important; border-color: var(--line) !important; }
body.page-essay .btn-accent { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
body.page-essay .cta-block { padding: 22px !important; }
body.page-essay .cta-block p,
body.page-essay .source-note { color: var(--mid) !important; }
body.page-essay .cta-block a { color: var(--navy) !important; }
body.page-essay .source-note { border-color: var(--line) !important; }

/* ---------- AI-OS ---------- */
body.page-ai-os { --accent: var(--navy) !important; }
body.page-ai-os footer { background: #fff !important; }

/* ---------- Generic fallback for any page already loading site-nav.js ---------- */
body.page-generic { background: var(--bg) !important; color: var(--ink) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .global-nav-inner { width: min(100% - 36px, var(--max)); min-height: 58px; flex-wrap: wrap; gap: 0; }
  .nav-toggle { display: inline-flex; }
  .global-nav .nav-links {
    display: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    align-items: flex-start !important;
    padding: 8px 0 16px !important;
    gap: 0 !important;
    flex-direction: column !important;
  }
  .global-nav .nav-links.open { display: flex !important; }
  .global-nav .nav-links a { width: 100%; padding: 10px 0 !important; }
  .global-nav .nav-links a::after { display: none; }
  .global-nav .nav-links .nav-contact {
    width: auto !important;
    margin: 10px 0 2px !important;
    padding: 11px 16px !important;
    align-self: flex-start !important;
  }
  body.page-home #home { grid-template-columns: 1fr 220px !important; gap: 42px !important; }
  body.page-about .about-hero { grid-template-columns: 1fr 240px !important; gap: 42px !important; }
}

@media (max-width: 680px) {
  body.page-home #home,
  body.page-research main,
  body.page-about .about-hero,
  body.page-about section,
  body.page-about hr.rule,
  body.page-ai-matrix main,
  body.page-grey-swan .gs-hero,
  body.page-grey-swan section,
  body.page-grey-swan hr.rule,
  body.page-arc .arc-shell,
  body.page-home .home-note { width: min(100% - 30px, var(--max)) !important; }

  body.page-home #home,
  body.page-about .about-hero { grid-template-columns: 1fr !important; }
  body.page-home #home { padding-top: 56px !important; }
  body.page-home h1,
  body.page-research h1,
  body.page-ai-matrix h1,
  body.page-grey-swan .gs-hero h1,
  body.page-arc .arc-title { font-size: clamp(38px, 12vw, 52px) !important; }
  body.page-home .hero-photo { position: static !important; max-width: 190px !important; }
  body.page-home .start-grid { grid-template-columns: 1fr !important; }
  body.page-home .stats { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  body.page-home .stat { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  body.page-home .stat:nth-child(odd) { border-right: 1px solid var(--line) !important; }
  body.page-home .stat:nth-last-child(-n+2) { border-bottom: 0 !important; }
  body.page-about .photo-col { position: static !important; }
  body.page-about .photo-wrap { max-width: 220px !important; }
  body.page-farabi .explainer { grid-template-columns: 1fr !important; }
  body.page-ai-matrix .grid,
  body.page-grey-swan .two-col,
  body.page-grey-swan .outcomes-grid,
  body.page-arc .arc-grid-2,
  body.page-arc .arc-grid-3,
  body.page-arc .arc-service-grid,
  body.page-arc .arc-hero-grid { grid-template-columns: 1fr !important; }
}