/* ==========================================================
   Ballast — Shared site styles
   Layered on top of ds/colors_and_type.css (brand tokens, fonts).
   Loaded on every page. Page-specific styles stay inline.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--bl-text); font-weight: 300; }
body { overflow-x: hidden; background: var(--bl-ink); color: var(--bl-paper); }
a, a:link, a:visited, a:hover, a:active { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; color: inherit; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

:root {
  --pad-x: 64px;
  --pad-y: 112px;
}
@media (max-width: 720px) {
  :root { --pad-x: 28px; --pad-y: 72px; }
}

/* ───────── SURFACE TOKENS ───────── */
.ink   { background: var(--bl-ink);   color: var(--bl-paper); }
.paper { background: var(--bl-paper); color: var(--bl-ink); }
.steel { background: #2a2a26;         color: var(--bl-paper); }

.ink,   .ink *   { --rule: rgba(244,242,239,0.18); --soft: rgba(244,242,239,0.7);  --softer: rgba(244,242,239,0.5);  --kicker: #8a8a7a; --fg: #f4f2ef; }
.paper, .paper * { --rule: #d0cec8;                --soft: #3a3a36;                --softer: #6a6a60;                --kicker: #6a6a60; --fg: #0a0a0a; }
.steel, .steel * { --rule: rgba(244,242,239,0.16); --soft: rgba(244,242,239,0.7);  --softer: rgba(244,242,239,0.45); --kicker: #a8a89a; --fg: #f4f2ef; }

/* ───────── NAV ───────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--pad-x);
  background: rgba(10,10,10,0.95);
  border-bottom: 1px solid rgba(244,242,239,0.18);
  color: var(--bl-paper);
}
.nav .mark {
  font-family: var(--bl-display); font-weight: 900; font-size: 22px;
  letter-spacing: .04em; text-transform: uppercase; line-height: .9;
  display: inline-flex; align-items: baseline; color: #f4f2ef;
}
.nav .mark .a { letter-spacing: .04em; }
.nav .mark .b { letter-spacing: .01em; }
.nav .mark .p { margin-left: -.02em; }
.nav ul {
  list-style: none; display: flex; gap: 36px; margin: 0; padding: 0;
  font-family: var(--bl-display); font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
}
.nav ul a, .nav ul a:visited { color: rgba(244,242,239,0.72); transition: color 120ms linear; }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: #f4f2ef; }
.nav .right {
  font-family: var(--bl-display); font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: #8a8a7a;
}
@media (max-width: 900px) { .nav ul { display: none; } }

/* ───────── SECTION FRAME ───────── */
section { padding: var(--pad-y) var(--pad-x); position: relative; }
.sec-head {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: baseline;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 64px;
}
.sec-head .num,
.sec-head .label {
  font-family: var(--bl-display); font-weight: 700; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--kicker);
}
.sec-head .label { text-align: right; }
.sec-head h2 {
  font-family: var(--bl-display); font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: .03em; text-transform: uppercase; margin: 0; text-align: center;
  color: var(--fg);
}
@media (max-width: 720px) {
  .sec-head { grid-template-columns: 1fr; text-align: left; gap: 12px; }
  .sec-head h2 { text-align: left; font-size: 28px; }
  .sec-head .label { text-align: left; }
}

/* ───────── BUTTONS ───────── */
.btn {
  font-family: var(--bl-display); font-weight: 700; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 18px 26px; border: 1px solid; border-radius: 0;
  transition: background var(--bl-motion-fast), color var(--bl-motion-fast), border-color var(--bl-motion-fast);
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px;
}
.btn .arrow { display: inline-block; transition: transform var(--bl-motion-fast); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.primary-ink   { background: #f4f2ef; color: #0a0a0a; border-color: #f4f2ef; }
.btn.primary-ink:hover   { background: transparent; color: #f4f2ef; }
.btn.ghost-ink     { background: transparent; color: #f4f2ef; border-color: rgba(244,242,239,.5); }
.btn.ghost-ink:hover     { border-color: #f4f2ef; }
.btn.primary-paper { background: #0a0a0a; color: #f4f2ef; border-color: #0a0a0a; }
.btn.primary-paper:hover { background: transparent; color: #0a0a0a; }
.btn.ghost-paper   { background: transparent; color: #0a0a0a; border-color: rgba(10,10,10,.4); }
.btn.ghost-paper:hover   { border-color: #0a0a0a; }
.btn:focus-visible { outline: 2px solid #8a8a7a; outline-offset: 3px; }

/* ───────── STUB PAGE (for in-development pages) ───────── */
.stub-hero {
  min-height: 82vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad-y) var(--pad-x);
  position: relative;
}
.stub-hero .eyebrow {
  font-family: var(--bl-display); font-weight: 700; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--kicker);
  margin-bottom: 56px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
}
.stub-hero h1 {
  font-family: var(--bl-display); font-weight: 900;
  font-size: clamp(56px, 9vw, 144px); line-height: .82; letter-spacing: .015em;
  text-transform: uppercase; margin: 0;
  text-wrap: balance; color: var(--fg);
}
.stub-hero h1 em {
  font-family: var(--bl-edit); font-style: italic; font-weight: 300;
  text-transform: none; letter-spacing: 0;
}
.stub-hero .sub {
  font-family: var(--bl-edit); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.45;
  color: var(--soft); max-width: 720px;
  margin: 56px 0;
  padding-top: 36px; border-top: 1px solid var(--rule);
  text-wrap: pretty;
}
.stub-hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.stub-hero .watermark {
  position: absolute; right: -40px; bottom: -80px;
  font-family: var(--bl-display); font-weight: 900; font-size: 420px;
  line-height: .8; color: var(--fg); opacity: 0.04;
  pointer-events: none; user-select: none;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .stub-hero .watermark { font-size: 240px; }
}

/* ───────── FOOTER ───────── */
footer.site-footer {
  background: var(--bl-ink); color: var(--bl-paper);
  padding: 56px var(--pad-x) 36px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  font-family: var(--bl-display); font-weight: 400; font-size: 12px;
  letter-spacing: .04em; text-transform: none; color: rgba(244,242,239,0.7);
  border-top: 1px solid rgba(244,242,239,0.18);
}
footer.site-footer .col h5 {
  font-family: var(--bl-display); font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: #f4f2ef;
  margin: 0 0 16px;
}
footer.site-footer .col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
footer.site-footer .col ul a,
footer.site-footer .col ul a:visited {
  font-family: var(--bl-text); font-weight: 300; font-size: 14px;
  color: rgba(244,242,239,0.72); transition: color 120ms linear;
}
footer.site-footer .col ul a:hover { color: #f4f2ef; }
footer.site-footer .tagline {
  font-family: var(--bl-display); font-weight: 900; font-size: 22px;
  letter-spacing: .04em; text-transform: uppercase; color: #f4f2ef;
  margin-bottom: 14px;
}
footer.site-footer .tagline .p { margin-left: -.02em; }
footer.site-footer .desc {
  font-family: var(--bl-edit); font-style: italic; font-weight: 300;
  font-size: 14px; line-height: 1.55; color: rgba(244,242,239,0.7);
  max-width: 280px;
}
.footer-bottom {
  background: var(--bl-ink);
  padding: 24px var(--pad-x) 56px;
  border-top: 1px solid rgba(244,242,239,0.18);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--bl-display); font-weight: 400; font-size: 11px;
  letter-spacing: .12em; color: #8a8a7a;
}
.footer-bottom .right { font-family: var(--bl-text); font-weight: 300; font-style: italic; letter-spacing: 0; font-size: 13px; }
@media (max-width: 900px) { footer.site-footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  footer.site-footer { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}