/* ============================================================
   HEART TO MISSION — Production Stylesheet 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,700;0,800;1,400&family=Inter:wght@300;400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Design Tokens ---------- */
:root {
  --htm-black:    #000000;
  --htm-ink:      #0D0D0D;
  --htm-bone:     #FFFFFF;
  --htm-paper:    #FFFFFF;
  --htm-navy:     #0A192F;
  --htm-brown:    #704214;
  --htm-copper:   #B8860B;
  --htm-copper-hi:#D9A32A;
  --htm-copper-lo:#8A6408;
  --htm-stone:    #6B6B6B;
  --htm-line:     rgba(0,0,0,0.14);
  --htm-line-inv: rgba(255,255,255,0.18);

  --bg:          var(--htm-bone);
  --fg:          var(--htm-black);
  --fg-muted:    var(--htm-stone);
  --fg-accent:   var(--htm-copper);

  --font-display: "Inter Tight", system-ui, -apple-system, Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, Arial, sans-serif;
  --font-serif:   "Libre Baskerville", "Iowan Old Style", Georgia, serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, "Inter Tight", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--htm-bone);
  color: var(--htm-black);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; margin: 0; }
input, button { font-family: inherit; }

/* ---------- Stage Cards (Close the Gap) ---------- */
.stage-card { cursor: default; transition: background 0.2s; }
.stage-card:hover { background: #111 !important; }
.stage-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}
.stage-card:hover .stage-desc {
  max-height: 100px;
  opacity: 1;
}

/* ---------- Hover Utilities ---------- */
.h-cop-hi:hover  { color: var(--htm-copper-hi) !important; }
.h-cop:hover     { color: var(--htm-copper) !important; }
.h-white:hover   { color: #fff !important; }
.h-bg-cop-hi:hover { background: var(--htm-copper-hi) !important; }
.h-bg-ink:hover  { background: #0D0D0D !important; }
.h-bg-white:hover { background: #fff !important; color: #000 !important; }

/* ---------- Mobile Nav ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: all 0.2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  nav.site-nav {
    display: none !important;
    position: fixed;
    inset: 0;
    top: 62px;
    background: #000;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 24px;
    gap: 0 !important;
    z-index: 100;
    margin-left: 0 !important;
  }
  nav.site-nav.open { display: flex !important; }
  nav.site-nav a {
    font-size: 22px !important;
    color: #fff !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    width: 100%;
  }
  nav.site-nav a:last-child {
    margin-top: 24px;
    border: none;
    font-size: 16px !important;
  }

  /* Collapse grids to single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:1.6fr 1fr 1fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns:0.8fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:140px 1fr"],
  [style*="grid-template-columns:160px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Reduce section padding on mobile */
  section[style*="padding:128px 0"] { padding: 72px 0 !important; }
  section[style*="padding:120px 0"] { padding: 64px 0 !important; }
  section[style*="padding:110px 0"] { padding: 56px 0 !important; }
  section[style*="padding:96px 0"]  { padding: 48px 0 !important; }

  /* Hero height */
  section[style*="min-height:92vh"] { min-height: 85vh !important; }

  /* Image placeholders full width on mobile */
  .img-placeholder, [style*="height:520px"] { height: 280px !important; }
  [style*="height:760px"] { height: 600px !important; }

  /* Footer 3-col → 1-col */
  footer > div > div[style*="grid-template-columns:1.6fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hide "text-wrap:balance" on mobile - it's fine */
}

@media (max-width: 600px) {
  [style*="padding:0 24px"] { padding: 0 16px !important; }
  [style*="padding:24px"] { padding: 16px !important; }
}