/* ============================================================
   V4 GLOBAL UTILITIES
   Source: apps/web/.design-ref/evolved-home-v3.html + nav.js
   All body.light / body:not(.light) selectors translated to
   :root.light / :root:not(.light) to match the app's theme system.

   NOTE: .label is intentionally omitted — already defined
   globally in type.css (font-size:11px; letter-spacing:0.14em;
   color:var(--tone-soft); display:inline-block). The reference
   specifies 11.5px / 0.18em / var(--text-3) — near-identical;
   since type.css loads after this file and would override it, we
   leave .label in type.css. See Task-3 report for details.
   ============================================================ */

/* ---- layout utilities (evolved-home-v3.html ~104–113) ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.accent { color: var(--accent); }
.i { font-style: italic; }
.nums { font-feature-settings: "onum" 1, "tnum" 1, "kern" 1; }
.skip { position: absolute; left: -9999px; }

/* Heading weight reset (evolved-home-v3.html ~99). Newsreader headings are 400
   in the reference; without this, bare h1/h2/h3 fall back to the UA bold (700)
   and read far too thick. Component classes with explicit weights still win. */
h1, h2, h3 { font-weight: 400; text-wrap: balance; }

/* Anchor reset (evolved-home-v3.html ~98). Without it, bare links (e.g. the
   book-title <a>, the author "full profile" link) fall back to UA blue +
   underline. Components style links per-element; this is the inherit baseline. */
a { color: inherit; text-decoration: none; }
.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 100;
  background: var(--bg-2);
  font-family: var(--ui);
  font-size: 13px;
  padding: 10px 14px;
  border: 1px solid var(--line);
}

/* ---- section frame (evolved-home-v3.html ~220–227) ---- */
.section { padding-block: clamp(72px, 11vh, 150px); }
.s-head {
  text-align: center;
  padding-bottom: clamp(24px, 3vh, 34px);
  border-bottom: 1px solid var(--hair-color);
  margin-bottom: clamp(40px, 7vh, 80px);
}
.s-head h2 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -.02em; line-height: 1.05; }
.s-head .label { display: block; margin-top: 14px; color: var(--text-3); }

/* ---- reveal — no-JS safe (evolved-home-v3.html ~345–348) ---- */
/* Separate from [data-reveal]/.is-visible system in reveals.css — coexist, do not override. */
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---- scroll-driven section tint (nav.js ~102–113, body→:root translated) ---- */
/* Mark a block .tint-on-scroll (add .tint--half for softer level); brightens to a cool tint
   when centered in the viewport, reverts as the next block takes over. Full-bleed via ::before. */
.tint-on-scroll { position: relative; isolation: isolate; transition: color .55s ease; }
.tint-on-scroll::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: transparent;
  transition: background-color .55s ease;
  z-index: -1;
}
/* dark mode: token overrides + full tint level — HLW warm cream panel */
:root:not(.light) .tint-on-scroll.tint-on {
  --bg-2: #F0E7D6;
  --text: #2A1D1A;
  --text-2: #5C5044;
  --text-3: #6E6253;
  --line: #E0D8C8;
  --line-2: #D2C8B5;
  --accent: #9E5226;
  --hair-color: color-mix(in srgb, #7A6A55 62%, transparent);
  color: var(--text);
}
:root:not(.light) .tint-on-scroll.tint-on::before { background: #F3EADC; }
/* dark mode half-level (softer) */
:root:not(.light) .tint-on-scroll.tint--half.tint-on::before { background: #E9DDC8; }
/* light mode: deepen the active section to warm sand */
:root.light .tint-on-scroll.tint-on::before { background: #E7DCC6; }
:root.light .tint-on-scroll.tint--half.tint-on::before { background: #F0E8D8; }

/* ---- authors section tint level override (evolved-home-v3.html ~273–277) ---- */
/* #authors starts at half tint; .lvl-full escalates to full when .author reaches center.
   Toggle managed by v4-motion.js authors-level observer. */
:root:not(.light) #authors.tint-on::before { background: #E9DDC8; }
:root:not(.light) #authors.tint-on.lvl-full::before { background: #F3EADC; }
:root.light #authors.tint-on::before { background: #F0E8D8; }
:root.light #authors.tint-on.lvl-full::before { background: #E7DCC6; }

/* ---- reduced motion (evolved-home-v3.html ~413–417 + nav.js ~113) ---- */
@media (prefers-reduced-motion: reduce) {
  .tint-on-scroll,
  .tint-on-scroll::before { transition: none; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- about / authors page hero (about.html ~119–128, authors.html ~210–218) ---- */
/* Shared by /about and /authors. All colours via custom properties; no body.light selectors. */
.ah-hero {
  text-align: center;
  padding-block: clamp(64px, 13vh, 150px) clamp(40px, 7vh, 78px);
  padding-inline: var(--pad);
}
/* V4 [197]: page eyebrow bigger + bold */
.ah-hero .label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: clamp(16px, 2.4vh, 24px);
}
.ah-hero__rule-top {
  width: 54px;
  height: var(--hair);
  background: var(--hair-color);
  margin: 0 auto clamp(26px, 4vh, 40px);
}
/* V4 [261]: hero h1 on one line (wraps on phones, see responsive below) */
.ah-hero h1 {
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.022em;
  margin-inline: auto;
  white-space: nowrap;
}
.ah-hero__rule {
  width: 64px;
  height: var(--hair);
  background: var(--hair-color);
  margin: clamp(30px, 5vh, 46px) auto 0;
}
/* .ah-hero__sub — authors page subheadline variant (authors.html ~215–216) */
.ah-hero__sub {
  font-style: italic;
  color: var(--text-2);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.4;
  max-width: 44ch;
  margin: clamp(18px, 2.6vh, 26px) auto 0;
}

/* responsive: h1 wraps on small screens (about.html ~196, authors.html ~380) */
@media (max-width: 860px) {
  .ah-hero h1 { font-size: clamp(30px, 8.5vw, 52px); white-space: normal; }
}