/* Ofman Pediatrics — shared editorial styles, Direction A
   Deep forest green + ivory + brass. Cormorant + Inter + JetBrains Mono. */

:root{
  --bg:        #F4F1EA;
  --paper:     #FBF8F2;
  --ink:       #1F2A24;
  --green:     #2C3A33;
  --green-2:   #34423A;
  --brass:     #A78A52;
  --brass-2:   #C2A66B;
  --rule:      rgba(31,42,36,0.18);
  --mute:      rgba(31,42,36,0.62);
  --mute-2:    rgba(31,42,36,0.42);
  --on-green:  #F4F1EA;
}

*{ box-sizing:border-box; }
html, body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}

.serif{
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.italic{ font-style: italic; }
.mono{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

a{ color: inherit; text-decoration: none; }

.wrap{ max-width: 1320px; margin: 0 auto; padding: 0 56px; }

/* nav */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  padding: 22px 40px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky; top:0; z-index: 50;
}
.brand{ display:flex; align-items:baseline; gap:10px; flex-shrink:0; }
.brand .word{
  font-family:'Cormorant Garamond', serif; font-style: italic;
  font-size: 26px; color: var(--green); letter-spacing:-0.01em;
}
.brand .meta{ color: var(--mute); font-size:10px; }
.nav-links{ display:flex; gap:28px; color: var(--ink); flex:1; justify-content:center; }
.cta-pill{
  background: var(--green); color: var(--on-green);
  padding: 10px 18px; border-radius: 999px;
  display:inline-flex; align-items:center; gap:8px;
  flex-shrink:0; white-space:nowrap;
}
.cta-outline{
  border: 1px solid var(--ink); color: var(--ink);
  padding: 13px 22px; border-radius: 999px;
  display:inline-flex; align-items:center; gap:8px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}
.cta-solid{
  background: var(--green); color: var(--on-green);
  padding: 14px 24px; border-radius: 999px;
  display:inline-flex; align-items:center; gap:8px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

/* generic */
.kicker{
  color: var(--brass);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.rule{ height:1px; background: var(--rule); width:100%; }
.section{ border-top: 1px solid var(--rule); }
.section .inner{ padding: 80px 56px; max-width: 1320px; margin: 0 auto; }

/* image frame */
.ph{
  position: relative; overflow:hidden;
  background:#1F2A24;
}
.ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(0.92) contrast(1.02);
}
.ph .ph-meta{
  position:absolute;
  color: var(--on-green); opacity:.85;
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:.08em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.ph .ph-meta--bottom-left{ left:18px; bottom:14px; }
.ph .ph-meta--bottom-right{ right:18px; bottom:14px; text-align:right; }
.ph .ph-meta--top-left{ left:18px; top:14px; }
.ph .ph-meta--top-right{ right:18px; top:14px; text-align:right; }
.ph .ph-frame{
  position:absolute; inset:18px;
  border: 1px solid rgba(244,241,234,.45);
  pointer-events:none;
}

/* footer */
.foot{
  background: var(--green); color: var(--on-green);
  padding: 80px 56px 40px;
}
.foot a{ color: var(--on-green); }


/* ─────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE LAYER
   The site is built with inline-style grids and large headlines.
   These media queries override the relevant inline styles via
   attribute selectors + !important so the site reflows cleanly
   on phones and small tablets.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 900px){
  /* NAV — let the link row scroll horizontally below brand+pill */
  .nav{
    padding: 14px 16px !important;
    gap: 10px !important;
    flex-wrap: wrap;
  }
  .brand .word{ font-size: 22px !important; }
  .brand .meta{ display: none; }
  .nav-links{
    order: 3;
    width: 100%;
    flex: none !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    padding: 6px 0 2px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 10.5px !important;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar{ display: none; }
  .nav-links a{ white-space: nowrap; }
  .cta-pill{
    padding: 9px 14px !important;
    font-size: 10px !important;
  }

  /* CTA BUTTONS — slightly smaller */
  .cta-solid, .cta-outline{
    padding: 12px 18px !important;
    font-size: 10.5px !important;
  }

  /* SECTION CONTAINER PADDING */
  .section .inner{ padding: 56px 20px !important; }

  /* WRAP HELPER (legacy) */
  .wrap{ padding: 0 20px !important; }

  /* ALL INLINE-STYLED GRIDS → single column.
     Catches Hero, Doctor split, Footer, Tenets (4-col),
     Journal cards (2-col), credentials, NICU strip, etc. */
  div[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* KILL OVERSIZED MIN-HEIGHTS on inline-styled blocks */
  div[style*="min-height: 760px"],
  div[style*="min-height: 720px"],
  div[style*="min-height: 680px"]{
    min-height: 0 !important;
  }

  /* PHOTOS — drop min-height; let aspect-ratio carry the size.
     Auto-ratio photos (the hero) get a portrait fallback. */
  .ph{
    min-height: 0 !important;
    height: auto !important;
  }
  .ph[style*="height:100%"],
  .ph[style*="height: 100%"]{
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
  }
  .ph .ph-frame{ inset: 12px !important; }
  .ph .ph-meta{
    font-size: 9px !important;
    left: 12px !important; right: 12px !important; bottom: 10px !important;
  }

  /* TYPOGRAPHY — cap the editorial display sizes */
  h1{
    font-size: clamp(38px, 9.5vw, 60px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
  }
  h2{
    font-size: clamp(28px, 7.2vw, 48px) !important;
    line-height: 1.08 !important;
  }
  h3{
    font-size: clamp(22px, 5.4vw, 32px) !important;
    line-height: 1.15 !important;
  }
  p{ font-size: 16px !important; }

  /* STICKY columns shouldn't stick once stacked */
  div[style*="position:sticky"],
  div[style*="position: sticky"]{
    position: static !important;
    top: auto !important;
  }

  /* FOOTER */
  .foot{ padding: 48px 20px 32px !important; }
  .foot .serif{ font-size: 36px !important; }

  /* Form fields — keep them tappable */
  input, textarea, button, select{
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* Don't let any element force horizontal scroll */
  html, body{ overflow-x: hidden; }
  img{ max-width: 100%; }
}

@media (max-width: 480px){
  /* PHONES — even tighter */
  .section .inner{ padding: 44px 16px !important; }
  .foot{ padding: 40px 16px 24px !important; }
  .nav{ padding: 12px 14px !important; }
  .brand .word{ font-size: 20px !important; }
  .nav-links{ font-size: 10px !important; gap: 14px !important; }
  .cta-pill{ padding: 8px 12px !important; font-size: 9.5px !important; }
  h1{ font-size: clamp(30px, 11vw, 48px) !important; }
  h2{ font-size: clamp(24px, 8vw, 36px) !important; }
  div[style*="grid-template-columns"]{ gap: 22px !important; }
}