/* Version E's type hierarchy (suggested, 12 Oct 2026): one face (Schibsted Grotesk), five sizes in two groups, two
   weights, one ink and one grey, three trackings. Every text on the page takes one of these roles; nothing else.

     Display  48 at 1440   500  1.08   -0.025em   How I work's claim, the email at the foot
     Title    23           500  1.35   -0.012em   the piece in the popup, About's first line, How I work's paragraphs
     Body     18           400  1.55    0         About's paragraphs, Owen's name
     Label    16           400  1.45    0         the words beside the work, the popup's context, the history rail, the whole chat
     Small    14           400  1.4     0         nav, status, counter, Read more, meta, email, buttons, chips

   Nothing outside the live pieces is smaller than 14px. Emphasis is weight 500 in ink; secondary text is the same size in grey. Sizes are fluid between 360 and 1440. */
:root {
  --t-display: clamp(2rem, 0.9rem + 2.3vw, 3.25rem);
  --t-title: clamp(1.15rem, 0.95rem + 0.55vw, 1.45rem);
  --t-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --t-label: clamp(0.9375rem, 0.92rem + 0.08vw, 1rem);
  --t-small: 0.875rem;   /* 14px: the smallest text anywhere on the site (Owen, 12 Oct 2026) */
  --lh-display: 1.08; --lh-title: 1.35; --lh-body: 1.55; --lh-label: 1.45; --lh-small: 1.4;
  --tr-display: -0.025em; --tr-title: -0.012em;
  --grey: #5f5e5a;   /* one grey for secondary text in light mode (dark mode keeps its own) */
}

/* ---- Small ---- */
.tool, .status, .count, .m-cap-where, .m-cap-visit, .m-meta, .m-count, .st-meta, .st-count, .st-nav button, .st-nav a, .m-nav button, .m-nav a, .br, .br .address, .copy-btn, .seg-b, .ab-side .mono, .r-row .y,
.ab-body .go, .ask-head .mono, .ask-start, .ask-chip, .ask-note, .mono, .skip {
  font-size: var(--t-small) !important; line-height: var(--lh-small) !important; letter-spacing: 0 !important;
}
/* ---- Label ---- */
.label .name, .label .detail, .where, .where .proj, .m-about, .st-about, .m-cap-name, .m-cap-detail, .m-cap-story, .ab-body .r-row p, .way h2,
.ask-head b, .ask-msg, .ask-msg *, .ask-form input, #ask-pill-label, .ask-face-label {
  font-size: var(--t-label) !important; line-height: var(--lh-label) !important; letter-spacing: 0 !important;
}
.label .detail { color: var(--grey) !important; }
/* ---- Body ---- */
.who, .ab-body p:not(.mono), .ab-body .big, .mt-more {
  font-size: var(--t-body) !important; line-height: var(--lh-body) !important; letter-spacing: 0 !important;
}
/* ---- Title ---- */
.m-title, .st-title, .ab-body h2, .way .words, .close .say {
  font-size: var(--t-title) !important; line-height: var(--lh-title) !important; letter-spacing: var(--tr-title) !important;
}
.ab-body h2 .g, .m-title .g, .st-title .g, .way .words .g { font-weight: 400 !important; }
/* ---- Display ---- */
.hw-claim, .mail, .close .mail {
  font-size: var(--t-display) !important; line-height: var(--lh-display) !important; letter-spacing: var(--tr-display) !important;
}
.hw-claim .g { font-weight: 500 !important; }
/* two weights only */
b, strong, .who, .label .name, .where .proj, .m-proj, .m-title b, .copy-btn, .ab-body .go, .ask-head b { font-weight: 500 !important; }

/* the floor: the system's smallest step, the chat's smallest text and a browser frame's address are all 14px */
:root { --step-n1: 0.875rem; --text-xs: 0.875rem; --text-s: 0.875rem; }
.browser .bar .url { font-size: var(--t-small) !important; }
.browser .bar { height: 2.1rem !important; }