/* =========================================================
   site_fixes.css — readability + phone fixes (Oct 2026 audit)
   ---------------------------------------------------------
   Loaded last on every page, so it overrides the design-system
   kit without editing _ds/. Overrides only; no new look.
   ========================================================= */

:root {
  /* --brass is 2.5:1 on cream, too faint for text. Keep it for
     rules and dots; use this for brass-coloured words (5.0:1). */
  --brass-ink: #7f6126;
  /* --sage is 4.1:1 on --forest; this lighter step is 5.8:1. */
  --sage-ink: #a9b9a9;
}

/* ---------- brass / sage used as text ---------- */
.eidx-no, .hm-role-no, .fn-no, .atl-no, .atl-before .cred b, .drawer .done .k,
.rs-no, .spk-no, .plates .fig-cap .no, .nf-code { color: var(--brass-ink); }
/* the hero coordinate readout sits on the cream-deep end of the hero grade */
.hm-coord { color: var(--ink-soft); }
.rs-diss-photo figcaption, .rs-diss-meta .row { color: var(--sage-ink); }

/* ---------- small-text floor: 12px (kit labels were 9–11px) ---------- */
.ph-nav a, .ph-meta, .hero-tag, .btn, .kicker, .eidx-no, .eidx-date,
.reader-back, .reader-kicker, .reader-byline, .reader-body .sub,
.bio-k, .bio-affils, .cred-line, .spk-k, .spk-cred, .eco-role, .pf .m,
.drawer-k, .drawer-close, .drawer label, .drawer .done .k,
.venue .n, .venue .d { font-size: 12px; }

/* ---------- phone masthead ---------- */
@media (max-width: 860px) {
  .ph { padding: 14px 20px; }
  .ph-inner { flex-wrap: wrap; justify-content: flex-start; gap: 6px 20px; }
  .ph-mark { white-space: nowrap; flex: 1 0 100%; }
  .ph-meta { display: none; }
  .ph-nav { flex: 1 0 100%; flex-wrap: wrap; gap: 2px 18px; }
  .ph-nav a { white-space: nowrap; letter-spacing: 0.14em; }
}

/* ---------- index rows: stop the 3-column squeeze on phones ---------- */
@media (max-width: 860px) {
  .eidx-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .eidx-ttl { font-size: 22px; }
  .eidx-date { text-align: left; }

  .hm-role-row { grid-template-columns: 52px 1fr; gap: 6px 16px; }
  .hm-role-meta { grid-column: 2; text-align: left; }

  .affil-row { grid-template-columns: 64px 1fr; gap: 10px 18px; align-items: start; }
  .affil-logo { width: 64px; height: 44px; }
  .affil-meta { grid-column: 2; }
  .affil-name { font-size: 20px; }

  .atl-h { font-size: 32px; }
  .abt-pq { font-size: 21px; }
}

/* ---------- skip link (first focusable element on every page) ---------- */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--forest); color: var(--cream);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;
  padding: 12px 18px; text-decoration: none;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* ---------- phone tap targets: 44px hit areas, same look ---------- */
@media (max-width: 860px) {
  .ph-nav a { display: inline-block; padding-block: 13px; }
  .hm-hero-link, .pf .m a, .pf-mail, .fn-src, .fn-more, .atl-link, .rs-diss-meta .row a,
  .pt-kicker a, .spk-conv-link, .rs-card .m a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* map pins are focusable controls (experience_maps.js) */
svg [role="button"]:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }