/* Typography system. Loaded last: one scale, one rhythm, readable everywhere.

   Scale (desktop → phone), ratio ≈ 1.33
   display   H1 statements          80 → 40   lh 1.10  w300
   h2        section titles         60 → 32   lh 1.08  w300
   lead      big lead paragraphs    40 → 26   lh 1.15  w300
   h3        side titles            38 → 26   lh 1.12  w300
   title     card / item titles     26 → 22   lh 1.20  w500
   body      paragraphs             20 → 17   lh 1.55  w300
   small     notes, meta            15        lh 1.45
   label     mono labels            12        tracking .08–.12em, uppercase
   Nothing below 12px; light weights (200) only at display sizes.          */

:root {
  --mute: #71665d;      /* was #8a7f76 (3.8:1); now 5.5:1 on paper, 5.2:1 on paper-2 */
  --ember-ink: #b34a00; /* ember for small text and for fills behind small light text: 5.3:1 */
  /* Mentorship orange used as text or as a fill behind small text (not the section gradient):
     was #DF5A06 (3.5–3.8:1), now 4.7–5.0:1 on white and both paper tones */
  --id-mentor-solid: #bd4c00;
}

/* ---------- readability defaults ---------- */
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, .h2, .h3, .cta__title, .letterbox__title, .bigquote__text, .below__text, .footer__line, .bio__lead, .editorial__big, .bench__big, .start__big { text-wrap: balance; }
p, li, dd, .qa__a p { text-wrap: pretty; }

/* ---------- display: every H1 statement, landing included ---------- */
.hq__title, .phero__title, .rhero__title, .lhero__title, .chero__title, .ahead__title, .xhead__title { font-weight: 300; }
.hq__title strong, .phero__title strong, .rhero__title strong, .lhero__title strong, .chero__title strong, .ahead__title strong, .xhead__title strong { font-weight: 600; }

/* ---------- section titles ---------- */
.h2, .cta__title, .feature h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 300; max-width: 18ch; }
.h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 300; }
.letterbox__title { font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }
.year__label { font-size: clamp(36px, 3.8vw, 56px); font-weight: 300; line-height: 1; }

/* ---------- leads: big paragraphs sit below the section title, above body ---------- */
.bio__lead, .editorial__big, .bench__big { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 300; }
.start__big { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; }
.editorial__coda { line-height: 1.3; }
.tslide p { line-height: 1.4; }
.bigquote__text, .below__text { line-height: 1.08; }

/* ---------- item titles ---------- */
.scope__card h3, .process__steps h3 { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
.prose__h2 { line-height: 1.2; }
.prose h3 { line-height: 1.3; }

/* ---------- landing: the question and the card lines read at a glance ---------- */
.hq__question { font-weight: 300; line-height: 1.1; }
.hq__sym { font-weight: 300; line-height: 1.15; }
.hq__card--clarity-a .hq__sym strong, .hq__card--clarity-b .hq__sym strong, .hq__card--clarity-c .hq__sym strong { color: var(--ember-ink); }

/* ---------- body and small text ---------- */
.body { line-height: 1.55; }
.door__note, .hq__sub, .byline__bio, .rel__ex, .toc a { font-size: 15px; line-height: 1.45; }

/* ---------- labels: never below 12px, small ember text uses the deeper ember ---------- */
.eyebrow { color: var(--ember-ink); }
.tag, .facts dt, .field > span, .field legend, .status, .inpractice__grid dt, .fit-summary dt, .fit-opt .mono, .layer span { font-size: 12px; }
.chips-list li span, .filter sup, .ring span, .note-card .mono, .nav__ext small { font-size: 11px; }
.tag { color: var(--ember-ink); border-color: rgba(179, 74, 0, .35); }
.facts dt, .pn .mono, .rel .mono, .prose__h2 .mono, .entry__cat, .editorial__coda strong { color: var(--ember-ink); }
.hq__card--clarity-a .hq__k, .hq__card--clarity-b .hq__k, .hq__card--clarity-c .hq__k { color: var(--ember-ink); }
.hq__card:hover .hq__k, .hq__card:focus-visible .hq__k, .hq__card.is-on .hq__k { opacity: 1; }
/* dark surfaces: labels stay light and legible */
.footer .footer__meta span, .footer .footer__base span, .footer .footer__col span { color: inherit; }
.lhero__hud { color: rgba(255,253,249,.6); }
body[data-page="lab"] .tag, body[data-page="experiment"] .tag { color: var(--id-lab-accent); border-color: rgba(232,125,51,.4); }
.exp h3 { line-height: 1.2; }
.xnote__text { line-height: 1.35; }
.door .door__num { color: var(--ember-ink); }

/* fills behind small light text */
.note__chips input:checked + span, .names li:hover, .threads span:hover, .tool[aria-pressed="true"] .tool__icon { background: var(--ember-ink); }

/* ---------- fixes ---------- */
/* Contact: the old light footer rule painted the dark footer's background light */
body[data-page="contact"] .footer { background: var(--ink); }
/* the big quote is light on dark even before its words are split by script */
.bigquote__text { color: var(--paper); }

/* ---------- phones ---------- */
@media (max-width: 1000px) {
  .hq__sym { font-weight: 300; }
  .body { font-size: 17px; }
}

/* ---------- second pass ---------- */
/* footer small text on dark: legacy ".footer .mono" painted it with the light-surface grey */
.footer .footer__base, .footer .footer__base.mono, .footer .footer__meta, .footer .footer__meta.mono, .footer .footer__tag { color: rgba(255,253,249,.72); }
/* Mentorship's light ghost buttons must not override the dark variant used on paper (fit assessment result) */
body[data-page="mentorship"] .btn--ghost-ink { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
body[data-page="mentorship"] .btn--ghost-ink:hover { color: var(--paper); }
/* decorative layer label on ember */
.layer span { font-size: 12px; }
.layer--3 { background: var(--ember-ink); }

/* ---------- portrait + copy sections (About bio, Mentorship letter): more air ---------- */
/* portrait keeps 4 columns; copy starts one empty column later, on column 6 */
.bio, .letter__grid { column-gap: calc(var(--col) + var(--gap) * 2); }
.bio { padding-block: clamp(112px, 13vw, 200px); align-items: center; }
.letter { padding-block: clamp(112px, 13vw, 200px); }
/* a quieter, shorter lead, then clear steps down to the body */
.bio .bio__lead, .letter .bio__lead { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.22; max-width: 24ch; margin: 0 0 clamp(32px, 3.4vw, 48px); }
.letter .eyebrow { margin-bottom: clamp(24px, 2.4vw, 32px); }
.bio .body, .letter .body { max-width: 52ch; line-height: 1.65; margin-bottom: 1.3em; }
.bio .body:last-of-type, .letter .body:last-of-type { margin-bottom: 0; }
/* facts table: room above, roomier rows */
.bio .facts { margin-top: clamp(48px, 5vw, 72px); max-width: 640px; column-gap: var(--gap); }
.bio .facts div { padding: 22px 0; }
.bio .facts dd { line-height: 1.4; }
.bio__portrait figcaption, .letter .bio__portrait figcaption { margin-top: 18px; line-height: 1.6; max-width: 40ch; }
@media (max-width: 900px) {
  .bio, .letter__grid { row-gap: 48px; }
  .bio .facts { max-width: none; }
}

/* ---------- About: "one level below" pinned section ---------- */
/* words are coloured by the scroll itself; a CSS transition only made them trail behind */
.below__text .sw { transition: none; }
@media (min-width: 901px) {
  /* statement on columns 1-7, one empty column, the card stack on 9-12: they never meet */
  .below__pin { display: grid; grid-template-columns: var(--w7) minmax(0, 1fr); column-gap: calc(var(--col) + var(--gap) * 2); align-content: center; align-items: center; }
  .below__pin .eyebrow { grid-column: 1; }
  .below__text { grid-column: 1; max-width: none; font-size: clamp(36px, 4vw, 64px); }
  .below__layers { position: relative; right: auto; bottom: auto; grid-column: 2; grid-row: 2; width: 100%; max-width: 440px; justify-self: end; }
}
@media (max-width: 900px) {
  .below__layers { position: relative; right: auto; bottom: auto; width: 100%; max-width: 300px; margin-top: 48px; }
}

/* ---------- phones and portrait tablets: the desktop hero frame, with phone-sized type ---------- */
@media (max-width: 1000px) {
  /* same airy frame as desktop: full screen (small-viewport height, so the copy never hides behind browser bars),
     copy anchored at the bottom; if the copy is taller than the screen the hero just grows */
  .phero, .lhero, .rhero, .chero, .ahead, .xhead { min-height: 100svh; justify-content: flex-end; padding: clamp(112px, 14vw, 140px) var(--gutter) clamp(48px, 8vw, 72px); }
}
@media (max-width: 700px) {
  .phero__title, .rhero__title, .lhero__title, .chero__title, .ahead__title, .xhead__title { font-size: clamp(32px, 9.4vw, 40px); }
  .phero__lede, .lhero__lede, .ahead__lede, .xhead__lede { font-size: 17px; line-height: 1.5; }
  .phero__foot { gap: 24px; }
}

/* ---------- buttons and text links ---------- */
/* button labels stay on one line (a wrapped label pushed the arrow past the pill's edge) */
.btn { white-space: nowrap; }
/* a mono text-link that is a <button>: ".linkbtn { font: inherit }" reset it to the body size and buttons centre text */
.linkbtn.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; line-height: 1.5; text-align: left; }
@media (max-width: 700px) {
  /* hero actions stack: the primary button, then the quiet link under it */
  .phero__actions { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* portrait sections: phone-sized padding (the desktop padding left a blank gap after the hero) */
  .bio, .letter { padding-block: 56px 72px; }
}

/* ---------- Mentorship: the orange block split in two ---------- */
/* proof on the identity orange; fit on a deeper burnt orange that slides over it like a second sheet */
body[data-page="mentorship"] .mentor--fit {
  position: relative; z-index: 1; margin-top: calc(-1 * clamp(28px, 4vw, 56px));
  background: linear-gradient(160deg, #b84a00 0%, #9c3d00 55%, #7a2f00 100%);
}
body[data-page="mentorship"] .mentor--fit .fit { margin-top: 0; }
body[data-page="mentorship"] .mentor--voices .mentor__inner { padding-bottom: calc(clamp(96px, 14vw, 180px) + clamp(28px, 4vw, 56px)); }
.mentor--voices .section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.mentor--voices .section-head .h2 strong { font-weight: 600; }

/* ---------- sideways chip rows on phones: Mentorship reviewer names, Insights and Lab topic filters ---------- */
@media (max-width: 900px) {
  /* the column must not grow to its widest child, or the row never scrolls */
  .twall { grid-template-columns: minmax(0, 1fr); }
  .twall__side, .twall__stage { min-width: 0; }
  .twall__side .rating .mono { overflow-wrap: anywhere; }
  .twall__side .names {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter);
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .twall__side .names::-webkit-scrollbar { display: none; }
  .twall__side .names li { flex: none; scroll-snap-align: start; scroll-margin-inline: var(--gutter); }
  .names__btn { white-space: nowrap; }
}
@media (max-width: 900px) {
  /* column without wrapping: a wrapping column sizes itself to its widest item (the whole filter row) */
  .archive__bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .filters {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter);
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; white-space: nowrap; scroll-snap-align: start; scroll-margin-inline: var(--gutter); }
}

/* ---------- articles: restored original covers and images ---------- */
.cover--photo { padding: 0; background: var(--paper-2); }
.cover--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover--photo .cover__cat { position: absolute; left: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 28px); padding: 8px 14px; border-radius: 999px; background: rgba(255,253,249,.88); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.prose__fig { margin: 2em 0; }
.prose__fig img { width: 100%; height: auto; border-radius: 20px; background: var(--paper-2); }

/* ---------- article heroes with an original photo as the background ---------- */
/* the photo fills the hero; a paper wash rises from the bottom so the copy sits on near-solid paper */
.ahead--photo { position: relative; isolation: isolate; overflow: hidden; }
.ahead__bg { position: absolute; inset: 0; z-index: -1; }
.ahead__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: saturate(.85); }
.ahead__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(255,253,249,.78) 0, rgba(255,253,249,0) 160px),           /* keeps the nav legible */
    linear-gradient(to top, var(--paper) 0%, var(--paper) 38%, rgba(255,253,249,.9) 52%, rgba(255,253,249,.35) 74%, rgba(255,253,249,.08) 100%);
}
/* wide screens: the copy lives on the left, so the wash also leans left and the photo breathes on the right */
@media (min-width: 1001px) {
  .ahead__bg::after {
    background:
      linear-gradient(to bottom, rgba(255,253,249,.78) 0, rgba(255,253,249,0) 160px),
      linear-gradient(to top, var(--paper) 0%, rgba(255,253,249,.94) 30%, rgba(255,253,249,0) 72%),
      linear-gradient(to right, var(--paper) 0%, rgba(255,253,249,.92) 42%, rgba(255,253,249,.2) 78%, rgba(255,253,249,0) 100%);
  }
}
.ahead--photo .ahead__meta .tag { background: var(--paper); }
@media (prefers-reduced-transparency: reduce) { .ahead__bg { opacity: .35; } }

/* ---------- Insights archive: hover preview shows the article's photo ---------- */
.peek__img { display: none; margin: -6px -8px 14px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: rgba(255,253,249,.06); }
.peek__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peek.has-img .peek__img { display: block; }
/* photographer credit for stock heroes: quiet, top-right, out of the copy's way */
.ahead__credit { position: absolute; right: var(--gutter); top: clamp(96px, 11vw, 132px); z-index: 1; color: var(--ink-2); font-size: 11px; letter-spacing: .06em; padding: 6px 10px; border-radius: 999px; background: rgba(255,253,249,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .3s; }
.ahead__credit:hover { color: var(--ember-ink); }
@media (max-width: 700px) { .ahead__credit { top: auto; bottom: 14px; right: var(--gutter); } }

/* home statement: the longer, curious line runs a little wider so it settles into four lines on desktop */
@media (min-width: 1001px) { .hq__title { max-width: 21ch; } }
@media (min-width: 1001px) and (max-height: 780px) { .hq__title { font-size: clamp(40px, 4.2vw, 58px); } }