/* =====================================================================
   one of one: the website, matched to the business card.

   The card's look, carried over:
     Newsreader, light, for headlines and the voice; the "of" in teal italic
     Work Sans for text, labels and contact lines
     black (#0A1012) and white grounds, one teal (#00C2B2 on dark, #00907F on light)
     the teal fingerprint, from the corner, fading out before the words

   Loaded AFTER each page's own <style>, so it wins at equal specificity.
   Built by research/site/reskin.py (the font names and weights inside each page's
   own CSS are mapped there); this file holds everything that is new.
   ===================================================================== */

/* one accent, like the card: the old coral folds into the teal (errors stay red, below) */
:root, .band, .chapter, .band.dark, .chapter.k-teal .panel {
  --warm: var(--teal); --warm-soft: var(--teal); --signal: var(--teal); --signal-lift: var(--teal);
}
.chapter.k-teal .ch-note b { color: var(--ink); }
.sub-msg.err, .apply-status.err, .err { color: #B3261E; }
.band.dark .sub-msg.err, .band.dark .err { color: #FF8A80; }

:root {
  --t-mega: clamp(2.8rem, 5.7vw, 4.7rem);
  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --f-sans:  "Work Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --teal-on-dark: #00C2B2;
}

/* ---------- type ---------- */
body { font-family: var(--f-sans); font-weight: 400; letter-spacing: 0; }
h1, h2, h3, .display {
  font-family: var(--f-serif); font-weight: 300; letter-spacing: -.018em; line-height: 1.06;
}
h2, h3 { font-weight: 400; }
h1 em, h2 em, h3 em, .display em { font-style: italic; font-weight: 300; }
.hero h1 { font-weight: 300; letter-spacing: -.022em; line-height: 1.03; }
.hero h1 em { font-style: italic; color: var(--teal); }

/* labels: spaced capitals in Work Sans, the way the card sets "Website" and its top line */
.mono, .kicker, .hero .eyebrow, .channel .ch-text .now {
  font-family: var(--f-sans); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.kicker, .hero .eyebrow { font-weight: 600; }
.kicker, .mono, .hero .eyebrow { font-style: normal; }   /* Work Sans has no italic loaded: never fake one */
.btn, .top nav a, .qrail a, .faq summary { font-family: var(--f-sans); font-weight: 600; letter-spacing: 0; }
.fld input, .fld select, .fld textarea, .sub input { font-family: var(--f-sans); }

/* big numerals and counters take the serif, light */
.stat b, .ch-num, .ch-thumb, .whynow-facts .fig, .q-verdict { font-family: var(--f-serif); font-weight: 300; letter-spacing: -.02em; }

/* ---------- the wordmark: one of one ---------- */
.wm {
  display: inline-flex; align-items: baseline; gap: .24em; white-space: nowrap; line-height: 1;
  font-family: var(--f-serif); font-weight: 300; font-style: normal; letter-spacing: -.015em; text-transform: none;
  color: var(--ink);
}
.wm .of { font-style: italic; color: var(--teal); }
.band.dark .wm, .dark .wm { color: #fff; }
.band.dark .wm .of, .dark .wm .of { color: var(--teal-on-dark); }

/* header: the wordmark, then the card's top line in small spaced capitals */
.stamp { gap: 1rem; align-items: baseline; }
.stamp .wm { font-size: 1.75rem; transform: translateY(2px); }
.stamp .logotag {
  font-family: var(--f-serif); font-size: .7rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
@media (max-width: 62rem) { .stamp .logotag { display: none; } }
.top nav a { font-size: .85rem; }
.top nav a.nav-cta { font-weight: 600; }

/* ---------- ground: black and white, no grain, no glow ---------- */
body::after { display: none; }
.band.dark, .chapter.k-dark {
  --teal: var(--teal-on-dark); --teal-lift: var(--teal-on-dark); --acc: var(--teal-on-dark);
}
.chapter.k-dark { --key: var(--teal-on-dark); }
.band.dark::before { background: none; }

/* ---------- the fingerprint ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/fingerprint.svg") right top / min(980px, 78%) auto no-repeat;
  -webkit-mask-image: radial-gradient(115% 105% at 100% 0%, #000 0%, rgba(0,0,0,.62) 42%, transparent 76%);
          mask-image: radial-gradient(115% 105% at 100% 0%, #000 0%, rgba(0,0,0,.62) 42%, transparent 76%);
  opacity: .62;
}
@media (max-width: 62rem) { .hero::before { background-size: 150% auto; background-position: right -30px top; opacity: .3; } }

/* on the dark chapters and the dark footer the print is the card front's: faint, from the corner */
.chapter.k-dark, footer.band.dark { position: relative; isolation: isolate; }
.chapter.k-dark::before, footer.band.dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/fingerprint.svg") right top / min(900px, 80%) auto no-repeat;
  opacity: .34;
  -webkit-mask-image: radial-gradient(110% 100% at 100% 0%, #000 0%, rgba(0,0,0,.55) 40%, transparent 74%);
          mask-image: radial-gradient(110% 100% at 100% 0%, #000 0%, rgba(0,0,0,.55) 40%, transparent 74%);
}

/* ---------- buttons: the same pills, without the glow ---------- */
.btn { letter-spacing: 0; }
.btn-solid { box-shadow: none; }
.btn-solid:hover { box-shadow: 0 8px 20px rgba(0,194,178,.28); }

/* ---------- footer ---------- */
.foot-in { font-family: var(--f-sans); font-size: .88rem; }
.foot-in .wm { font-size: 1.3rem; }
.foot-in .tag {
  font-family: var(--f-serif); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}

/* ---------- small pages that carry their own back link or home mark ---------- */
a.back .wm, a.home .wm, a.stamp .wm { font-size: 1.25rem; }
.mast .wm { font-size: 1.1rem; }

/* ---------- fit: Work Sans runs a little wider than Archivo did, so a touch less leading keeps every panel inside its fixed screen ---------- */
.chapter .page { line-height: 1.5; }
.chapter .step { padding: .55rem 0; }
.chapter .step h3 { margin-bottom: .2rem; }

/* the old boxed 1/1 stamp: the wordmark needs no box */
.top .home, .bar .stamp, .map .mast .stamp, a.home, a.stamp { border: 0; padding: 0; }
.top .home .wm, .bar .stamp .wm, .map .mast .stamp .wm { font-size: 1.3rem; }

/* ---------- the bio page (proof chapter, page 1): the card back, in a panel ---------- */
.bio { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: .7rem; align-items: center; }
.bio-ph { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 3px solid var(--acc); display: block; background: #AFCCBF; }
.bio-id { display: grid; gap: .2rem; min-width: 0; }
.bio-id b { font-family: var(--f-serif); font-weight: 400; font-size: 1.4rem; line-height: 1.05; letter-spacing: -.012em; color: var(--ink); }
.bio-id span { font-family: var(--f-serif); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.bio p { grid-column: 1 / -1; margin: 0; }
/* the panel's own rules lay paragraphs out as flex rows and make <strong> a block (that is why "Eternal Wellness" broke the line); inside the bio they are plain text */
.chapter .panel .page .bio p { display: block; }
.chapter .panel .page .bio p strong { display: inline; }