/* /tvc in the site's design: styles.css keeps every figure, table and card
   rule; this file swaps in the site's faces and greys, sets the masthead the
   way the note sets its title, and styles the shared header and footer.
   Data colors stay as styles.css sets them. */
@font-face { font-family: "Mona Sans"; src: url(/assets/fonts/mona-sans-latin-wdth-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Mona Sans"; font-style: italic; src: url(/assets/fonts/mona-sans-latin-wdth-wght-italic.woff2) format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Inter Fallback"; src: url(/assets/fonts/inter-fallback-opsz-wght-normal.woff2) format("woff2"); unicode-range: U+00B5, U+03B2; font-weight: 100 900; font-display: swap; }

:root {
  --ground: #fbfbf9;
  --fill: #f1f0ec;
  --fill-2: #e8e7e2;
  --wash: #dddcd6;
  --ink: #111110;
  --note: #55544f;
  --muted: #67655f;
  --code-ink: #1f1f1d;
  --sans: "Mona Sans", "Symbols", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --serif: "Mona Sans", "Symbols", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --t-prose: 1.1875rem;
  --lh-prose: 1.8;
  --rule: #e6e5e0;
  --link-line: #c9c7c0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0b0b;
    --fill: #161615;
    --fill-2: #232322;
    --wash: #2e2d2b;
    --ink: #f3f2ee;
    --note: #a7a59f;
    --muted: #8f8d87;
    --code-ink: #e8e7e3;
    --rule: #232322;
    --link-line: #4d4c49;
  }
}
body { font-variant-numeric: normal; }
.tvc-page .essay p, .tvc-page .essay li { color: var(--note); }

/* H's header and footer, as on the other H pages. */
.hbar, .hfoot { width: 100%; max-width: 46rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; font-family: var(--sans); }
.hbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; padding-top: 2.2rem; }
.home-link { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; padding: .55rem 0; }
.hbar nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; font-size: .95rem; letter-spacing: .01em; }
.hbar nav a { color: var(--muted); text-decoration: none; font-weight: 450; padding: .55rem 0; }
.hbar nav a:hover, .hbar nav a.is-here { color: var(--ink); }
.hbar a:focus-visible, .hfoot a:focus-visible, .skip:focus-visible { outline-color: var(--ink); }
.tvc-page .hbar, .tvc-page .hfoot { max-width: calc(40rem + 3rem); }
.hfoot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 2rem; padding-top: 6rem; padding-bottom: 2.6rem; font-size: .95rem; color: var(--muted); }
.hfoot p { margin: 0; }
.hfoot a { color: var(--muted); text-decoration: none; font-weight: 450; }
.hfoot a:hover { color: var(--ink); }
.hfoot-links { display: flex; gap: 0 1.4rem; flex-wrap: wrap; }
.hfoot-links a { padding: .55rem 0; }

/* The masthead reads like the note's: left-aligned on H's column. */
.tvc-page .masthead.wrap { max-width: calc(40rem + 3rem); padding: 5.5rem 1.5rem 0; text-align: left; align-items: flex-start; }
.tvc-page .cat { font-size: .92rem; font-weight: 450; color: var(--muted); }
.tvc-page .masthead h1 { margin-top: 1.4rem; max-width: none; font-size: clamp(2.9rem, 8.4vw, 5rem); line-height: .98; font-weight: 760; letter-spacing: -.048em; margin-left: -.04em; text-wrap: balance; }
.tvc-page .deck { margin-top: 1.8rem; max-width: none; font: 420 1.28rem/1.55 var(--sans); color: var(--ink); }
.tvc-page .actions { justify-content: flex-start; gap: 0 1.4rem; margin-top: 1.4rem; }
.tvc-page .pill, .tvc-page .pill.is-quiet { min-height: 0; padding: .55rem 0; border-radius: 0; background: none; color: var(--ink); font: 500 .95rem/1.4 var(--sans); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: .28em; }
.tvc-page .pill:hover { background: none; color: var(--ink); text-decoration-color: var(--ink); }

@media (max-width: 40rem) {
  .hbar, .hfoot { padding-left: 1.15rem; padding-right: 1.15rem; font-size: 18px; line-height: 1.72; }
  .tvc-page .masthead.wrap { padding: 3.6rem 1.15rem 0; }
}