/* Typography Version 2 (rules of 2026-10-12): Newsreader speaks, Onest explains, Geist Mono specifies.
   A layer on top of site.css. Remove its <link> in index.html to return to Version 1 (see docs/typography.md). */
:root {
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  --muted: #5E5D58;
}
/* the wordmark is a logo, not text: it keeps its own face */
.lockup b { font-family: 'Instrument Serif', Georgia, serif; }

/* ── Display: Newsreader Italic, opsz 72 · hero, case covers, page heads ── */
.info h1, .case-head h2, .case.dark .case-head h2, .ab-head h2, .pr-head h2, .frame .lbl {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: 'opsz' 72;
  letter-spacing: 0; line-height: 0.9; text-wrap: balance;
}
/* the one accent inside an italic Display is a roman word */
.case-head h2 em, .ab-head h2 em, .pr-head h2 em, .info h1 em { font-style: normal; }
.info h1 { font-size: clamp(64px, 8.5vw, 170px); } /* home: as large as fits beside the trail without covering the arriving work */
.info { max-width: min(46vw, 900px); }
.case-head h2, .case.dark .case-head h2 { font-size: clamp(64px, 13.9vw, 240px); margin-top: 0; }
/* the tag line sits under the cover title */
.case-head .ctag { display: block; margin-top: 24px; }
.case-head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
/* the facts row runs the full width of the page, every fact (Behance included) in one row, so its rules reach both edges */
.case-head .facts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width: none; width: 100%; }
.case-head .facts .ext { grid-column: auto; }
.ab-head h2, .pr-head h2 { font-size: clamp(64px, 11vw, 200px); }

/* ── Headline: Newsreader Regular, opsz 36 · section heads, the contact line ── */
.talk h3, .st-text h3, .ai h3 {
  font-family: var(--serif); font-style: normal; font-weight: 400; font-variation-settings: 'opsz' 36;
  font-size: 48px; line-height: 1.05; letter-spacing: -0.01em;
}
.talk h3 em, .st-text h3 em, .ai h3 em { font-style: italic; }

/* ── Lead: Newsreader Regular, opsz 36 · the brief under a case cover ── */
.lead-brief p, .case.dark .lead-brief p {
  font-family: var(--serif); font-style: normal; font-variation-settings: 'opsz' 36;
  font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; letter-spacing: -0.01em; max-width: 30ch; text-wrap: pretty;
}

/* ── Title list: Newsreader Italic, opsz 36 · project names in lists, next project, big result numbers ── */
.row h2, .backto h3, .next h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: 'opsz' 36;
  font-size: clamp(34px, 3.3vw, 48px); line-height: 1; letter-spacing: -0.01em;
}
.next h3 em, .backto h3 em, .row h2 em { font-style: italic; }
.stat b { font-family: var(--serif); font-style: italic; font-variation-settings: 'opsz' 72; letter-spacing: 0; }

/* ── Body: Onest Regular 20 / 1.5 (phones 18) ── */
.chap-txt p, .brief p, .ab-body p, .st-text p, .lede, .tools ul, .ai ul {
  font-family: var(--sans); font-size: 20px; line-height: 1.5; letter-spacing: 0; max-width: 720px;
}
.ab-head .role { font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; } /* Subhead */

/* ── Navigation, buttons, film controls and the cursor stay in Geist Mono capitals, as in Version 1 ── */
/* the two large links on the showreel page are text links, set in Onest */
.reel-links button { font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; }

/* ── Data: Geist Mono 13 · credits, specs ── */
.credits ul { font-family: var(--mono); font-size: 13px; line-height: 1.4; letter-spacing: 0; }
.clock, #clock { font-variant-numeric: tabular-nums; }

/* phone menu: the same Geist Mono capitals as the desktop navigation, just larger for the thumb */
.mmenu-links button { font-family: var(--mono); font-weight: 400; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; padding: 20px 0; }

/* ── phones ── */
@media (max-width: 700px) {
  .info h1 { font-size: min(80px, 20vw); line-height: .9; }
  .info { max-width: calc(100vw - 2 * var(--gut)); }
  .case-head h2, .case.dark .case-head h2 { font-size: min(80px, 19vw); }
  .case-head .facts { grid-template-columns: 1fr 1fr; }
  .ab-head h2, .pr-head h2 { font-size: min(80px, 19vw); }
  .talk h3, .st-text h3, .ai h3 { font-size: 32px; }
  .lead-brief p, .case.dark .lead-brief p { font-size: 26px; }
  .row h2, .backto h3, .next h3 { font-size: 28px; }
  .chap-txt p, .brief p, .ab-body p, .st-text p, .lede, .tools ul, .ai ul { font-size: 18px; }
  .ab-head .role { font-size: 19px; }
}

/* italic Newsreader reaches further out of its box than Instrument Serif did (tall ascenders, slanted serifs):
   the word masks get more room on every side so nothing is clipped */
.w { padding: .2em .22em .24em .14em; margin: -.2em -.22em -.24em -.14em; }
/* the word starts fully below its (taller) mask, so it rises out of nothing: line height + bottom padding + glyph overshoot */
.split .wi { transform: translateY(calc(100% + .6em)); }
.split.in .wi { transform: none; }

/* 2026-10-12: headings are roman everywhere (no italic), accents included; the home title is a step smaller */
.info h1, .case-head h2, .case.dark .case-head h2, .ab-head h2, .pr-head h2, .frame .lbl,
.row h2, .backto h3, .next h3, .stat b, .talk h3, .st-text h3, .ai h3,
.info h1 em, .case-head h2 em, .ab-head h2 em, .pr-head h2 em, .row h2 em, .backto h3 em, .next h3 em, .talk h3 em, .st-text h3 em, .ai h3 em { font-style: normal; }
.info h1 { font-size: clamp(56px, 7vw, 136px); }
@media (max-width: 700px) { .info h1 { font-size: min(66px, 17vw); } }
/* About: "Hi, I’m Alex." a step smaller, the name in italic */
.ab-head h2 { font-size: clamp(56px, 7vw, 128px); }
.ab-head h2 em { font-style: italic; }
@media (max-width: 700px) { .ab-head h2 { font-size: min(64px, 16vw); } }

/* the contact line is set as large as "Hi, I’m Alex.", its last word in italic */
.talk h3 { font-family: var(--serif); font-size: clamp(56px, 7vw, 128px); font-variation-settings: 'opsz' 72; line-height: .95; letter-spacing: 0; text-wrap: balance; }
.talk h3 em { font-style: italic; }
@media (max-width: 700px) { .talk h3 { font-size: min(56px, 13vw); } }

/* menus (2026-10-15): the top navigation and the phone menu are set in Onest Regular, sentence case */
.nav, .nav .btn { font-family: var(--sans); font-weight: 400; font-size: 16px; letter-spacing: -0.005em; text-transform: none; }
.mmenu-btn { font-family: var(--sans) !important; font-weight: 400 !important; font-size: 19px !important; letter-spacing: 0 !important; text-transform: none !important; }
.mmenu-links button { font-family: var(--sans); font-weight: 400; font-size: 34px; letter-spacing: -0.015em; text-transform: none; line-height: 1.15; padding: 16px 0; }

/* rule (2026-10-15): what you click is Onest Regular; Geist Mono only describes (tags, captions, facts, timecodes, clock, scroll hint).
   Film controls and the case counter stay mono. */
#avail, .mmenu-foot .btn, #c-close, .social a, .talk .mail, .v-rounds .rtabs button {
  font-family: var(--sans); font-weight: 400; text-transform: none; letter-spacing: -0.005em; font-size: 16px;
}
.social a { font-size: 17px; }
.talk .mail { font-size: 18px; }