/* ============================================================
   jakesong.com — shared stylesheet (Compound-look prototype)
   ------------------------------------------------------------
   Reference values extracted live from compoundplanning.com
   (2026-06-11, via Chrome — site blocks scrapers):
     body bg        rgb(255,255,255)
     ink            rgb(23,23,23)   #171717
     muted text     #858585 (eyebrows/captions), mid ~#525252
     hairline       ~#e8e8e8 / 0.67px borders on pills
     cards          #f9f9f9 light · #181818 dark · radius 12px
     section bands  #f8f8f8 / #fcfcfc
     type           Monument Grotesk — ONE family, w400 even for
                    H1 (60/66px), w500 sparingly; no letterspaced
                    eyebrows (plain uppercase, gray)
     buttons        pill r9999, ink bg, white text, hairline border
     accent         (highlighter accent removed by request — site is
                    fully monochrome)
   Free stand-in for Monument Grotesk: Inter (one family, true
   italics, already licensed/loaded on this site).
   ============================================================ */

:root {
  /* surfaces */
  --paper: #ffffff;
  --paper-band: #f4f4f4;      /* alternating sections — deepened so the band is actually felt */
  --card: #f9f9f9;            /* light card */
  --card-dark: #181818;       /* dark card */
  /* ink scale */
  --ink: #171717;
  --ink-2: #525252;
  --ink-3: #6b6b6b;           /* was #858585 (~3.5:1, fails WCAG AA) — now ~5:1 */
  /* lines */
  --rule: rgba(0, 0, 0, 0.09);
  --rule-strong: rgba(0, 0, 0, 0.22);
  /* inversion */
  --inverse-bg: #161616;
  --inverse-fg: #fcfcfc;
  /* shape */
  --radius-card: 12px;
  --radius-pill: 9999px;

  /* legacy aliases — lets old token names degrade gracefully on
     pages migrated later (monochrome instead of broken) */
  --cream: var(--paper);
  --cream-dark: var(--paper-band);
  --navy: var(--ink);
  --navy-light: #404040;
  --ember: var(--ink);
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- type ------------------------------------------------- */
/* One family at quiet weights: "display" is now a size/weight
   treatment, not a different typeface (Compound's system). */
.font-display {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero-headline { line-height: 1.04; letter-spacing: -0.022em; font-weight: 400; }
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
}
.num-display { font-feature-settings: 'lnum' 1, 'tnum' 1; }
.ornament { display: inline-block; width: 32px; height: 1px; background: var(--ink); opacity: 0.18; vertical-align: middle; }

/* keyword emphasis — restored as monochrome weight contrast (Inter 600 is
   already loaded). Re-lands the load-bearing word in each headline that the
   copy was written around, without breaking the monochrome system. */
.hl { font-weight: 600; }

/* ---- components ------------------------------------------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(45deg); }
.chev { transition: transform 0.2s ease; }

/* flat cards — border whisper on hover, no lift, no shadow */
.card-hover { transition: border-color 0.2s ease, background-color 0.2s ease; }
.card-hover:hover { border-color: var(--rule-strong); }
.featured { position: relative; }
.featured::before {
  content: '';
  position: absolute; inset: -1px;
  border: 1px solid var(--ink);
  border-radius: inherit;
  pointer-events: none;
}

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

.benefit-card { background: var(--card); border: 1px solid var(--rule); transition: border-color 0.2s ease; }
.benefit-card:hover { border-color: var(--rule-strong); }
.benefit-icon-wrap { width: 44px; height: 44px; border-radius: 999px; background: var(--paper-band); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* primary CTA: ink pill (was ember) */
.accent-cta {
  background: var(--ink);
  color: #ffffff;
  border: 0.67px solid rgba(0, 0, 0, 0.08);
}
.accent-cta:hover { background: #000000; }

/* keyboard focus — site previously had none (fails WCAG 2.4.7). Monochrome
   ink ring on light surfaces; inverted parchment ring on dark surfaces. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.accent-cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}
.bg-ink a:focus-visible,
.bg-navy a:focus-visible,
.section-navy a:focus-visible,
footer a:focus-visible,
.bg-ink summary:focus-visible {
  outline-color: #fcfcfc;
}

.container-page { max-width: 1180px; margin: 0 auto; padding: 0 24px; }


/* ember-named accents inside dark sections render as parchment
   (guards against ink-on-ink invisibility after the monochrome remap) */
.bg-navy .text-ember, .bg-ink .text-ember, .section-navy .text-ember, footer .text-ember { color: rgba(252, 252, 252, 0.92); }
.bg-navy [class*="border-ember"], .bg-ink [class*="border-ember"], .section-navy [class*="border-ember"] { border-color: rgba(252, 252, 252, 0.3); }
.bg-navy [class*="bg-ember"], .bg-ink [class*="bg-ember"] { background-color: rgba(252, 252, 252, 0.12); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-hover, .benefit-card, .chev { transition: none; }
}

@media (max-width: 767px) {
  body { padding-bottom: 80px; }
}