@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@400;500;600;700&display=swap');

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

:root {
  /* ── Hearth tokens ── */
  --h-bg:      #FBF5EB;
  --h-surface: #FFFCF6;
  --h-ivory:   #F6EFE0;
  --h-accent:  #C67B5C;
  --h-accent-deep: #B56A4C;
  --h-heart:   #E53E3E;
  --h-text:    #2B2520;
  --h-muted:   #7A6F65;
  --h-line:    #EDE8E1;
  --h-teal:    #4EC5B5;
  --h-radius:  16px;
  --h-shadow-1: 0 1px 1px rgba(43,37,32,0.04), 0 2px 4px rgba(43,37,32,0.04), 0 8px 16px rgba(43,37,32,0.05), 0 16px 32px rgba(43,37,32,0.04);
  --h-shadow-2: 0 1px 2px rgba(43,37,32,0.05), 0 4px 8px rgba(43,37,32,0.05), 0 12px 24px rgba(43,37,32,0.06), 0 28px 56px rgba(43,37,32,0.07);
  --h-shadow-warm: 0 2px 4px rgba(198,123,92,0.06), 0 8px 18px rgba(198,123,92,0.08), 0 24px 48px rgba(43,37,32,0.08);

  /* ── Atrium tokens ── */
  --a-bg:      #FFFFFF;
  --a-surface: #F4F8FB;
  --a-ivory:   #F9FBFD;
  --a-grad:    linear-gradient(135deg, #2B6CB0 0%, #2C8FB8 28%, #2BB5A4 55%, #5DC196 82%, #7BC97B 100%);
  --a-heart:   #E53E3E;
  --a-text:    #0F1E2E;
  --a-muted:   #5A7080;
  --a-border:  #E5EEF5;
  --a-accent:  #2B6CB0;
  --a-accent-2:#2BB5A4;
  --a-radius:  6px;
  --a-shadow-1: 0 1px 1px rgba(15,30,46,0.04), 0 2px 4px rgba(15,30,46,0.04), 0 8px 20px rgba(15,30,46,0.05);
  --a-shadow-2: 0 1px 2px rgba(15,30,46,0.05), 0 6px 14px rgba(15,30,46,0.06), 0 18px 40px rgba(15,30,46,0.08);

  /* ── Type ── */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Modular scale (≈ 1.25 major third, fluid) ── */
  --fs-eyebrow:  11px;
  --fs-meta:     12.5px;
  --fs-body:     clamp(15px, 0.92vw + 12.5px, 17px);
  --fs-lede:     clamp(17px, 0.6vw + 15px, 19px);
  --fs-h4:       clamp(18px, 0.4vw + 17px, 21px);
  --fs-h3:       clamp(22px, 1.0vw + 19px, 28px);
  --fs-h2:       clamp(30px, 2.4vw + 22px, 48px);
  --fs-h1:       clamp(38px, 3.6vw + 18px, 62px);

  /* ── Motion ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);    /* expo-out — entrances, hovers */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);     /* color/opacity */
  --dur-fast:  180ms;
  --dur-med:   260ms;
  --dur-slow:  600ms;

  /* ── Spacing (8px scale) ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(96px, 12vh, 160px);
  --container: 1120px;
}

/* ── Brand wordmark placeholder (pending final Arrowleaf Pediatrics logo) ── */
.brandmark { display: inline-flex; align-items: baseline; line-height: 1; text-decoration: none; }
.brandmark-text { display: flex; flex-direction: row; align-items: baseline; gap: 0.3em; }
.brandmark-name, .brandmark-sub { font-size: 25px; font-weight: 600; letter-spacing: -0.015em; }
.brandmark--footer { margin-bottom: 24px; }
.brandmark--footer .brandmark-name { color: #fff; }

html {
  font-family: var(--font-sans);
  font-size: 16px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* ── Global wrapping defaults ── */
h1, h2, h3 { text-wrap: balance; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
p { text-wrap: pretty; max-width: 64ch; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ── Numerics ── */
.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* ── Focus ring (concept overrides in their own files) ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset var(--dur-fast) var(--ease-out);
}

/* ── Selection — concept overrides in body classes ── */
::selection { background: rgba(26,26,26,0.14); color: inherit; }

/* ── Thin custom scrollbar ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }
html { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.22) transparent; }

/* ── Grain overlay (SVG fractal noise, applied on body::after of concept pages via .grain class) ── */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ── Hairline divider — gradient fade, not flat 1px ── */
.hairline {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.10) 18%, rgba(0,0,0,0.10) 82%, transparent 100%);
  max-width: var(--container);
  margin: 0 auto;
}

/* ── Sticky header treatment (applies to both .site-header and .site-nav) ── */
.site-header, .site-nav {
  transition: box-shadow var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-soft);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.site-header.is-scrolled, .site-nav.is-scrolled {
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.05);
}

/* ── Animated underline reveal for inline links ── */
.link-reveal {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--dur-med) var(--ease-out);
  text-underline-offset: 0.18em;
}
.link-reveal:hover { background-size: 100% 1px; }

/* ── Eyebrow w/ accent rule (concepts color it) ── */
.eyebrow-rule { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow-rule::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* ── Utility ── */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .grain::after { display: none; }
}