/* ============================================================================
   TYPE — the Manrope / DM Sans / Roboto Mono system, applied site-wide.

   Loads LAST on every page, including the light Capacity Risk Index, because
   type scale and masthead layout are brand-wide and have no colour opinion.
   The faces themselves are declared in css/v2.css as --serif / --sans / --mono.

   Colour that only makes sense on the dark ground (the gold masthead) lives in
   css/marquee.css instead, which the Capacity page deliberately does not load.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   The faces. Declared here rather than in css/v2.css on purpose: this file is
   the whole type system, so reverting it means removing one <link> instead of
   unpicking token edits inside the base stylesheet.

   The display token no longer holds a serif. Manrope is a geometric sans, so
   Fraunces leaves the site entirely. The Claude Design guideline cards and
   .claude/rules/repos/personal-brand.md still name Fraunces as the display face
   and say it is roman only. This supersedes that, and those cards need the same
   update so the system stops disagreeing with the site.
   --------------------------------------------------------------------------- */
:root {
  --serif: "Manrope", system-ui, -apple-system, sans-serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace;
}

/* v2 scopes the display face to named selectors, so headings inside generated
   article bodies fell back to the body face. Bind them explicitly. */
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); }


/* Fraunces carried an optical-size axis and the whole marquee pass turns on
   forcing it to 144. Manrope has no opsz axis, so that declaration is now dead
   weight pointing at a face that cannot answer it. Reset it everywhere rather
   than leaving a rule that reads as load-bearing and is not. */
.brand,
.page-hero h1,
.section-title,
.punch,
.bento-card h3,
.card-mark,
.story-count strong,
.story-panel h3,
.answer-card h3,
.topic-title,
.faq-list summary,
.disclosure-box h3,
.result-body h3,
.closing,
.footer-grid > div:first-child h4,
[data-page="answer"] #main-content h1,
[data-page="answer"] #main-content .section-title.small {
  font-optical-sizing: auto;
  font-variation-settings: normal;
}

/* A geometric sans at display size needs weight to do what a display serif did
   with contrast, and it wants looser tracking than Fraunces' -0.05em, which was
   tuned for a high-contrast face. */
.page-hero h1,
.section-title,
.bento-card h3,
.story-panel h3,
.answer-card h3,
.topic-title,
.footer-grid > div:first-child h4,
[data-page="answer"] #main-content h1 {
  font-weight: 700;
  letter-spacing: -0.032em;
}

.brand { font-weight: 800; letter-spacing: -0.03em; }
.punch,
.closing { font-weight: 600; letter-spacing: -0.015em; }

/* Roboto Mono is wider than IBM Plex Mono at the same size. The chips already
   needed a nowrap guard once; hold the tracking in rather than re-earn it. */
.status { letter-spacing: 0.08em; }

/* ---------------------------------------------------------------------------
   2. Header type, +50%
   Every value is the live one multiplied by 1.5. The nav's min-height and the
   hero's top padding both have to grow with it: the masthead is
   position:absolute, so it does not push the hero down on its own and larger
   type inside it would otherwise overlap the fold.
   --------------------------------------------------------------------------- */
.brand { font-size: clamp(2.1rem, 3.45vw, 2.93rem); }        /* was 1.4 / 2.3vw / 1.95 */
.credentials { font-size: 0.83rem; }                          /* was 0.55 */
.nav-links a { font-size: 1.11rem; }                          /* was 0.74 */
.trust-rail { font-size: 1.05rem; }                           /* was 0.70 */
.pill-link { font-size: 1.16rem; padding: 0.8rem 1.4rem; min-height: 54px; }

.nav { min-height: 132px; }                                   /* was 94 */
.hero-inner { padding-block: clamp(17rem, 31vh, 22rem) clamp(5rem, 11vh, 8rem); }

/* ---------------------------------------------------------------------------
   5. Fallout from the larger masthead
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { min-height: 104px; }
  .brand { font-size: clamp(1.9rem, 5vw, 2.4rem); }
  .hero-inner { padding-block: 13rem 5rem; }
}

@media (max-width: 620px) {
  .nav { min-height: 92px; }
  .brand { font-size: 1.75rem; }
  .credentials { font-size: 0.7rem; }
  .hero-inner { padding-block: 11rem 4.5rem; }
}

/* ---------------------------------------------------------------------------
   6. Numerals go to the data face
   "Roboto Mono: metrics, scores, labels, and operational data." The card marks,
   the story counter and the story numbers are exactly that, and they were
   inheriting the display face because v2 built them out of --serif.
   --------------------------------------------------------------------------- */
.card-mark,
.story-count strong,
.story-number,
.tier-badge .tier-score,
.ledger dd {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   7. Wrap defects the +50% masthead introduces
   Found by rendering, not by arithmetic. At 1440 the enlarged type breaks three
   things that fit fine at the live size: the brand wraps to "John / DeLucchi",
   the credentials line wraps mid-phrase, and the CTA becomes two lines.
   The nav grid is 1fr auto 1fr, so nowrap lets the outer columns claim the
   width they now need instead of folding.
   --------------------------------------------------------------------------- */
.brand { white-space: nowrap; }
.credentials { white-space: nowrap; }
.pill-link.nav-action { white-space: nowrap; }
.nav { gap: 1.4rem; }

/* credentials at the full +50% is 0.83rem mono, which is wider than the brand
   above it. Held at a size that still reads as a sub-label. */
.credentials { font-size: 0.72rem; letter-spacing: 0.14em; }

/* ---------------------------------------------------------------------------
   8. Masthead layout — name left, nav centred, CTA right
   (John, 2026-08-09, off the tuned render)

   Two separate problems, and only one of them is spacing.

   a) Everything sat inside .wrap, which is capped at 1240px and centred, so at
      1440 the brand started 156px in and the CTA stopped 156px short of the
      right edge. The header now runs full width on its own padding while the
      page body keeps the 1240 measure, because a masthead is chrome and body
      copy is a reading column. They should not share a constraint.

   b) The nav was NOT centred, and margins would not have fixed it. .nav is a
      1fr auto 1fr grid, and a grid track's default min-width is auto, so the
      brand at 47px with nowrap forced column 1 wider than its 1fr share and
      shoved the centre column right. Absolute-centring the nav makes it
      independent of how wide the name or the button ever get.
   --------------------------------------------------------------------------- */
.site-header .wrap {
  width: 100%;
  max-width: none;
  padding-inline: clamp(1.25rem, 2.4vw, 2.4rem);
}

/* Absolute centring only where there is room for it. Measured: at 1120 the
   centred nav overlaps the brand and the CTA, because the sides are now wider
   at +50% and the mobile menu does not take over until 1080. Between those two
   numbers the nav sits in normal flex flow instead, which is not dead-centre
   but does not collide. */
@media (min-width: 1081px) {
  .nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .nav-action { justify-self: auto; margin-left: auto; }
  .nav-links { margin: 0; }
}

/* Sized from measurement, not from a round number. Masthead width budget at
   the full +50%, brand column + nav + CTA against the available width:
       1100  need 1027 of 1048   slack  21
       1300  need 1185 of 1238   slack  53
       1400  need 1203 of 1332   slack 129
       1440  need 1206 of 1370   slack 164
   Absolute centring needs more than total slack: the CENTRED nav has to clear
   the brand on its own side. At 1300 that clearance is 5px, at 1440 it is 54px.
   So centring starts at 1400 and everything below it runs the shrink band.

   ---------------------------------------------------------------------------
   BAND EXTENDED 1399 -> 1559 on 2026-08-20, when the nav went from six items to
   seven (Production). Same method as the paragraph above, re-measured on the
   seven-item masthead rather than reasoned from it:

       1400   centred nav clears the brand by  -15px   COLLIDES
       1440   centred nav clears the brand by    2px   touching
       1460                                      10px
       1500                                      27px
       1560                                      53px  <- matches the 54px the
                                                          six-item nav had at 1440

   The seventh item widens the centred block by about 100px, so it reaches back
   into the wordmark exactly where the six-item version had its 54px of comfort.
   Centring therefore starts at 1560 now, and the shrink band covers everything
   below it. Verified: worst inline clearance across 1100-1920 is 24px, and the
   collision at 1400-1460 is gone.

   COST, stated because it is real: widths 1400-1559 now run the shrink band
   instead of a dead-centred nav on EVERY page. Slightly smaller wordmark, tighter
   nav, nav sitting between brand and CTA rather than centred on the masthead.
   That is the same trade this band already makes from 1081 up, extended to cover
   the width a seventh item costs.

   Three alternatives were built and measured before this one, and are recorded so
   nobody re-runs them: leaving it alone collides at -15px; tightening only the
   centred nav's gap still leaves 15px at 1400; tightening gap AND shrinking the
   nav font to 0.7rem gives 122px of room but changes the masthead's type at every
   width above 1400, which is a bigger visual change than this one for no gain.
   --------------------------------------------------------------------------- */
@media (min-width: 1081px) and (max-width: 1559px) {
  .brand { font-size: 1.8rem; }
  .credentials { font-size: 0.62rem; }
  .nav-links { gap: 0.75rem; }
  .nav-links a { font-size: 0.9rem; }
  .pill-link { font-size: 0.9rem; padding: 0.65rem 1rem; min-height: 44px; }
}

/* dead centre of the masthead, not centre of the leftover space.
   Threshold raised 1400 -> 1560 with the seven-item nav; see the band above. */
@media (min-width: 1560px) {
  .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* spacing: the credentials were tight under a 47px brand, and the trust rail
   needed room to read as its own band rather than a footnote to the nav */
.credentials { margin-top: 0.55rem; }
.trust-rail { padding-block: 0.95rem; }

/* ---------------------------------------------------------------------------
   9. The hero lede
   It appears under the headline on every page and was running 19px at 1.82
   leading, which reads as a second headline rather than a subhead. Brought down
   and tightened so it supports the title instead of competing with it.
   --------------------------------------------------------------------------- */
.hero-lede {
  max-width: 620px;
  margin-top: 1.6rem;
  font-size: clamp(0.95rem, 1.12vw, 1.05rem);
  line-height: 1.72;
}

/* ---------------------------------------------------------------------------
   10. Split heroes with nothing in the second column
   .page-hero.split reserves a 0.9fr right column for a screenshot. Straight
   Answers has no screenshot, so its headline was being squeezed into 667px with
   an empty column beside it, which is why it ran seven lines. Pre-existing on
   the live site; the larger type just made it obvious. Collapse to one column
   when there is only one child.
   --------------------------------------------------------------------------- */
.page-hero.split .hero-inner:has(> div:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------------------
   Headline sizes, set from a measured sweep rather than a multiplier.
   Each page rendered at 56/64/72/80/88/96px and scored on line count, fold
   height, and whether the lede still landed inside a 900px viewport.
   Result on every page: 3-5 lines, fold under 900, lede visible.
   --------------------------------------------------------------------------- */
.page-hero h1          { font-size: clamp(2.55rem, 5.3vw, 4.9rem); }   /* ~76px @1440 */
.page-hero.compact h1  { font-size: clamp(2.35rem, 4.7vw, 4.4rem); }   /* ~68px */
.page-hero.split h1    { font-size: clamp(2.25rem, 4.6vw, 4.3rem); }   /* ~66px */
[data-page="answer"] #main-content h1 { font-size: clamp(1.95rem, 3.1vw, 2.6rem); }

/* ---------------------------------------------------------------------------
   Subpage headers
   Keep the homepage's editorial hero composition intact while giving every
   interior page the same centered opening treatment.
   --------------------------------------------------------------------------- */
.page-hero.subpage-hero .hero-inner {
  text-align: center;
}

.page-hero.subpage-hero .repair-mark,
.page-hero.subpage-hero .hero-actions {
  justify-content: center;
}

.page-hero.subpage-hero h1,
.page-hero.subpage-hero .hero-lede {
  margin-inline: auto;
}

.page-hero.subpage-hero.split .hero-inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.page-hero.subpage-hero .hero-shot {
  width: min(100%, 760px);
  text-align: left;
}

.article-hero > .repair-mark {
  justify-content: center;
}

.article-hero > h1,
.article-hero > .answer-short,
.article-hero > .answer-meta {
  margin-inline: auto;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   The data role, site-wide
   "Roboto Mono: metrics, scores, labels, and operational data."

   This assignment used to live in css/marquee.css, which the light Capacity
   Risk Index does not load, so its eyebrows and table labels were falling back
   to the body face while every dark page used mono. Type roles are brand-wide
   and carry no colour opinion, so they belong here.
   --------------------------------------------------------------------------- */
.eyebrow,
.credentials,
.status,
.card-kicker,
.story-count,
.trust-rail,
.capture-note,
.answer-meta,
.shot-meta,
.section-index,
.tier-badge .tier-score,
.risk-table th,
.weights-table th,
.vintage-table th,
.tool-field label,
.footer-bottom {
  font-family: var(--mono);
  font-weight: 400;
}