/* ============================================================================
   TIER shared component styles (#393)
   Extracted from the approved landing artifact. These are the components that
   appear on EVERY page — base typography, nav, cards, footer, reveal.
   Page-unique components (the hero instrument, the lineage timeline, etc.)
   live in a small inline <style> on the one page that uses them, to keep this
   file free of cross-page duplication.

   Load order per page:  tokens.css  ->  site.css  ->  (optional inline tweaks)
   ========================================================================== */

/* ---- base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ink); color: var(--fg);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { border-top: 1px solid var(--line); }
h1,h2,h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.12; margin: 0 0 .5em; }
h3 { font-size: 1.18rem; margin: 0 0 .4em; letter-spacing: 0; }
p { max-width: var(--measure); }
/* Plain links use the accent (flips per theme via --yield-deep). Kept at low
   specificity so component text colors (.btn, .btn.solid) always win. */
a:not(.btn) { color: var(--yield-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:root[data-theme="dark"] a:not(.btn) { color: var(--yield); }
@media (prefers-color-scheme: dark){ :root:not([data-theme]) a:not(.btn) { color: var(--yield); } }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--yield-deep); margin: 0 0 1.1rem;
}
:root[data-theme="dark"] .eyebrow { color: var(--yield); }
.section-pad { padding: 92px 0; }
.lede { font-size: 1.16rem; color: var(--fg-soft); max-width: 60ch; }
.kicker { font-family: var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--fg-mute); }

/* ---- interior-page hero (content shells + lineage lede spacing) ---- */
.page-hero { padding: 78px 0 40px; }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.06; margin: .4rem 0 1rem; max-width: 20ch; }
.page-hero .lede { max-width: 60ch; }

/* ---- nav ---- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-in { display:flex; align-items:center; justify-content:space-between; height: 62px; }
.brand { display:flex; align-items:baseline; gap:.6rem; font-family:var(--serif); font-weight:600; font-size:1.2rem; letter-spacing:-.01em; }
.brand .mark { font-family:var(--mono); font-weight:700; letter-spacing:-.02em; color:var(--yield-deep); }
:root[data-theme="dark"] .brand .mark { color: var(--yield); }
.brand .by { font-family:var(--sans); font-weight:400; font-size:.72rem; color:var(--fg-mute); letter-spacing:0; }
.nav-links { display:flex; align-items:center; gap:1.6rem; }
.nav-links a { color: var(--fg-soft); text-decoration:none; font-size:.94rem; }
.nav-links a:hover { color: var(--fg); }
.btn {
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans);
  font-size:.94rem; font-weight:500; padding:.6rem 1.05rem; border-radius:var(--r);
  border:1px solid var(--line-strong); color:var(--fg); text-decoration:none; background:transparent;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.btn:hover { border-color: var(--yield-deep); transform: translateY(-1px); }
.btn.solid { background: var(--yield-deep); border-color: var(--yield-deep); color: #f7fffb; }
:root[data-theme="dark"] .btn.solid { background: var(--yield); border-color: var(--yield); color:#04140d; }
.btn.solid:hover { filter: brightness(1.06); }

/* ---- mobile nav (hamburger) ----
   Below 720px the horizontal link row doesn't fit, so it collapses behind an
   accessible toggle. The collapsed panel is the DEFAULT at this width (no
   flash-of-expanded-nav on load), and site.js wires the button's aria-expanded
   + .open state. With JS disabled there is no toggle to operate, so each page's
   <noscript> block re-shows the links as a wrapped row and hides the dead
   button — the same progressive-enhancement contract as the .reveal fallback. */
.nav-toggle {
  display: none;                 /* desktop: no hamburger (shown at <=720px) */
  flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r); cursor: pointer; color: var(--fg);
}
.nav-toggle-bar {
  display: block; height: 2px; width: 100%; background: currentColor;
  border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .nav-toggle-bar { transition: none; } }

@media (max-width: 720px){
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 28px 14px;
    background: color-mix(in srgb, var(--ink) 97%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
    display: none;               /* collapsed until .open */
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .85rem .2rem; font-size: 1rem; border-top: 1px solid var(--line); }
  .nav-links a.btn { justify-content: center; margin-top: .9rem; border-top: none; }
}

/* ---- cards (reusable: audiences, improve, shell content blocks) ---- */
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
@media (max-width: 820px){ .cards { grid-template-columns: 1fr; } }
.card { background: var(--panel); border:1px solid var(--line); border-radius:8px; padding: 26px 26px 28px; transition: border-color .15s ease, transform .15s ease; }
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card .role { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--yield-deep); }
:root[data-theme="dark"] .card .role { color: var(--yield); }
.card h3 { margin:.7rem 0 .5rem; }
.card p { color: var(--fg-soft); font-size:.95rem; }
.card .metric { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--mono); font-size:.82rem; color:var(--fg-mute); }
.card .metric b { color: var(--fg); }

/* ---- footer ---- */
footer { border-top:1px solid var(--line); padding: 44px 0 56px; color: var(--fg-mute); }
.foot-in { display:flex; justify-content:space-between; gap: 24px; flex-wrap:wrap; align-items:flex-start; }
footer .honest { max-width: 44ch; font-size:.92rem; }
footer .by-in { font-family:var(--serif); color: var(--fg-soft); }
footer a { color: var(--fg-soft); text-decoration:none; font-size:.92rem; }
footer a:hover { color: var(--fg); }
.foot-links { display:flex; gap:1.4rem; flex-wrap:wrap; }

/* ---- motion ---- */
.reveal { opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }
:focus-visible { outline: 2px solid var(--yield); outline-offset: 3px; border-radius: 2px; }