/* headings, labels, captions, tables */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-light-webfont.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-it-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-semibold-webfont.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/myriadpro-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* eyebrows */
@font-face {
  font-family: "Myriad Pro Condensed";
  src: url("../fonts/myriadpro-semiboldcond-webfont.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* everything read at length */
@font-face {
  font-family: "Adobe Caslon Pro";
  src: url("../fonts/acaslonpro-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Caslon Pro";
  src: url("../fonts/acaslonpro-italic-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Caslon Pro";
  src: url("../fonts/acaslonpro-semibold-webfont.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Caslon Pro";
  src: url("../fonts/acaslonpro-semibolditalic-webfont.woff2")
    format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
  /* Families */
  --font-sans: "Myriad Pro", "Segoe UI", system-ui, sans-serif;
  --font-sans-condensed:
    "Myriad Pro Condensed", "Myriad Pro", system-ui, sans-serif;
  --font-serif: "Adobe Caslon Pro", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code only */

  /* Inks and grounds, light theme: cool blue-grey with a deep teal accent.
     Ink and ink-soft hold 7:1 (AAA) on both grounds; faint and rubric hold 4.5:1. */
  --paper: #f4f6f8; /* page background */
  --paper-sunk: #e6eaee; /* table header rows, recessed fields */
  --ink: #141a21; /* headings and body */
  --ink-soft: #36404b; /* lead paragraphs, secondary text */
  --ink-faint: #56616d; /* captions and metadata only */
  --rule: #cdd4db; /* hairlines, decorative only */
  --rubric: #0d6463; /* eyebrows, link underlines, focus ring */
  --selection: #c9e3e0; /* selected-text wash */
  color-scheme: light;

  /* Vertical rhythm */
  --space-1: 0.5rem; /* eyebrow to heading; figure to caption */
  --space-2: 1rem; /* heading to its first paragraph */
  --space-3: 1.5rem; /* between paragraphs, lists, figures, quotes */
  --space-4: 3rem; /* above an h2 or h3 in running text */

  /* Measure, in em of the text it constrains */
  --measure-body: 30em; /* about 65 to 70 characters of Caslon */
  --measure-lead: 26em;

  /* Sizes that change below 640px (desktop values here, compact values below) */
  --display-size: 4rem;
  --display-leading: 1.05;
  --display-tracking: -0.02em;
  --h1-size: 3rem;
  --h1-tracking: -0.015em;
  --h2-size: 2.5rem;
  --h2-tracking: -0.01em;
  --h3-size: 2rem;
  --h3-leading: 1.22;
  --h3-tracking: -0.005em;
  --h4-size: 1.5rem;
  --h4-leading: 1.28;
  --lead-size: 1.5rem;
  --body-size: 1.25rem;
}

/* Compact step: the design system's -compact styles, applied under 640px */
@media (width < 40rem) {
  :root {
    --display-size: 2.75rem;
    --display-leading: 1.08;
    --display-tracking: -0.015em;
    --h1-size: 2.25rem;
    --h1-tracking: -0.01em;
    --h2-size: 1.875rem;
    --h2-tracking: -0.005em;
    --h3-size: 1.5rem;
    --h3-leading: 1.25;
    --h3-tracking: 0em;
    --h4-size: 1.3125rem;
    --h4-leading: 1.3;
    --lead-size: 1.3125rem;
    --body-size: 1.125rem;
  }
}

/* Dark theme: follows the OS unless data-theme="light" is set on <html> */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12161b;
    --paper-sunk: #1b2128;
    --ink: #e3e8ed;
    --ink-soft: #b4bdc7;
    --ink-faint: #8c97a3;
    --rule: #2d353e;
    --rubric: #5fbfb4;
    --selection: #1c4744;
    color-scheme: dark;
  }
}
/* Explicit dark choice, same values */
:root[data-theme="dark"] {
  --paper: #12161b;
  --paper-sunk: #1b2128;
  --ink: #e3e8ed;
  --ink-soft: #b4bdc7;
  --ink-faint: #8c97a3;
  --rule: #2d353e;
  --rubric: #5fbfb4;
  --selection: #1c4744;
  color-scheme: dark;
}

/* ==========================================================================
   3. Base elements
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--body-size);
  line-height: 1.6;
  font-weight: 400;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  /* Never fake a weight or italic: a style missing from /fonts/ shows up in review instead of shipping synthesized. */
  font-synthesis: none;
}

/* Strong emphasis is Semibold everywhere; Caslon Bold is not part of the system. */
b,
strong {
  font-weight: 600;
}

/* Form controls inherit, then take Interface styles below. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Inputs stay at 16px so iOS Safari doesn't zoom on focus. */
input,
select,
textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  font-variant-numeric: lining-nums proportional-nums;
}

:focus-visible {
  outline: 2px solid var(--rubric);
  outline-offset: 2px;
}

::selection {
  background: var(--selection);
  color: var(--ink);
}

/* ==========================================================================
   4. Type styles
   Semantic elements map to their style by default; a class always wins over
   the element (an <h2 class="h4"> looks like an h4).
   ========================================================================== */

/* ---- Headings: Myriad Pro ---- */

h1,
h2,
h3,
h4,
h5,
h6,
.display,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-sans);
  font-kerning: normal;
  font-variant-numeric: lining-nums proportional-nums;
  text-wrap: balance;
}

/* One per landing page. Light only at this size. */
.display {
  font-size: var(--display-size);
  line-height: var(--display-leading);
  font-weight: 300;
  letter-spacing: var(--display-tracking);
}

/* Page title, one per page */
h1,
.h1 {
  font-size: var(--h1-size);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: var(--h1-tracking);
}

/* Major sections */
h2,
.h2 {
  font-size: var(--h2-size);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: var(--h2-tracking);
}

/* Subsections */
h3,
.h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-leading);
  font-weight: 600;
  letter-spacing: var(--h3-tracking);
}

/* Card titles; lowest heading inside running text */
h4,
.h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-leading);
  font-weight: 600;
  letter-spacing: 0;
}

/* Run-in heads, sidebar titles. Bold so it separates from 20px Caslon. */
h5,
h6,
.h5 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}

/* Above an h1 to h3, naming the section or content type */
.eyebrow {
  font-family: var(--font-sans-condensed);
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums proportional-nums;
  color: var(--rubric);
}

/* ---- Reading: Adobe Caslon Pro ---- */

.lead,
.body,
.body-sm,
.pull-quote {
  font-family: var(--font-serif);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

/* First paragraph under the h1, once per page */
.lead {
  font-size: var(--lead-size);
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: var(--measure-lead);
}

/* All running text. Body is also the <body> default. */
.body {
  font-size: var(--body-size);
  line-height: 1.6;
  font-weight: 400;
}

/* Footnotes and asides. The smallest Caslon is ever set. */
.body-sm {
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
}

/* Caslon Italic, at most one per article */
.pull-quote {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 400;
  font-style: italic;
  max-width: var(--measure-lead);
}

/* ---- Interface: Myriad Pro at small sizes ---- */

/* Buttons, navigation, form labels, tabs, table headers */
button,
label,
th,
.label {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums proportional-nums;
}

/* Captions, bylines, dates, metadata */
figcaption,
caption,
.caption {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: lining-nums proportional-nums;
  color: var(--ink-faint);
}

/* Table cells and any column of numbers */
td,
.data {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ==========================================================================
   5. Running text
   Wrap articles and long page bodies in .mc-prose for measure, rhythm and links.
   ========================================================================== */

.mc-prose > * {
  margin-block: 0;
}
.mc-prose > * + * {
  margin-block-start: var(--space-3);
}
.mc-prose > :is(h2, h3, .h2, .h3) {
  margin-block-start: var(--space-4);
}
.mc-prose > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-block-start: var(--space-2);
}
.mc-prose > .eyebrow + :is(h1, h2, h3) {
  margin-block-start: var(--space-1);
}

.mc-prose
  > :is(p:not(.lead, .pull-quote), ul, ol, dl, blockquote:not(.pull-quote)) {
  max-width: var(--measure-body);
}
.mc-prose p {
  text-wrap: pretty;
  hanging-punctuation: first;
}

.mc-prose :is(ul, ol) {
  padding-inline-start: 1.25em;
}
.mc-prose li + li {
  margin-block-start: var(--space-1);
}
.mc-prose li::marker {
  color: var(--ink-soft);
}

.mc-prose blockquote {
  margin-inline: var(--space-3) 0;
}
.mc-prose blockquote:not(.pull-quote) {
  color: var(--ink-soft);
}

.mc-prose figure {
  margin-inline: 0;
}
.mc-prose figcaption {
  margin-block-start: var(--space-1);
}

.mc-prose hr {
  border: 0;
  border-block-start: 1px solid var(--rule);
}

/* Links keep the text color; the rubric underline marks them. */
.mc-prose a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--rubric);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.mc-prose a:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   6. Utilities
   ========================================================================== */

/* Small caps, opt-in only: <span class="mc-sc">HTML</span>. Acronyms in running
   text otherwise stay in full capitals; spell uncommon ones out on first use. */
.mc-sc {
  font-variant-caps: all-small-caps;
  font-variant-numeric: oldstyle-nums proportional-nums;
  letter-spacing: 0.05em;
  text-decoration: none;
}

/* Tables of figures: <table class="mc-table">, numeric cells get .mc-num */
table {
  border-collapse: collapse;
}
caption {
  caption-side: bottom;
  text-align: start;
  padding-block-start: var(--space-1);
}
.mc-table {
  width: 100%;
  max-width: var(--measure-body);
}
.mc-table th {
  text-align: start;
  background: var(--paper-sunk);
}
.mc-table :is(th, td) {
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-block-end: 1px solid var(--rule);
  vertical-align: baseline;
}
.mc-table :is(th, td):first-child {
  padding-inline-start: var(--space-1);
}
.mc-table .mc-num {
  text-align: end;
}

/* ==========================================================================
   7. Page layout
   ========================================================================== */

/* Page body: <main class="mc-prose sheet">. Sides line up with the header and footer. */
.sheet {
  padding: var(--space-3) var(--space-4) var(--space-4);
}
@media (width < 40rem) {
  .sheet {
    padding-inline: var(--space-2);
  }
}

/* Post index: title left, date right; date under the title below 640px. */
.post-list {
  list-style: none;
}
.mc-prose .post-list {
  padding-inline-start: 0;
}
.post-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-2);
}
@media (width < 40rem) {
  .post-list li {
    flex-direction: column;
  }
}

/* ==========================================================================
   8. Post elements
   Used by the blog post templates in /templates/.
   ========================================================================== */

/* Code: system monospace on paper-sunk. Blocks scroll sideways rather than wrap. */
code,
pre {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}
:not(pre) > code {
  font-size: 0.85em;
  padding: 0.1em 0.3em;
  border-radius: 2px;
  background: var(--paper-sunk);
}
pre {
  box-sizing: border-box;
  max-width: 40em; /* the body measure, re-expressed at code size */
  padding: var(--space-2);
  overflow-x: auto;
  font-size: 0.9375rem;
  line-height: 1.5;
  background: var(--paper-sunk);
  tab-size: 2;
}

/* Note: an aside set on paper-sunk, opened by a label. */
.note {
  box-sizing: border-box;
  max-width: var(--measure-body);
  padding: var(--space-2) var(--space-3);
  background: var(--paper-sunk);
}
.note > * {
  margin-block: 0;
}
.note > * + * {
  margin-block-start: var(--space-1);
}

/* Table of contents for long tutorials, inline above the first section. */
.toc ol {
  margin-block: var(--space-1) 0;
  padding-inline-start: 1.25em;
}
.toc li + li {
  margin-block-start: 0;
}

/* Footnotes: body-sm, after a rule at the end of the post. */
.footnotes {
  max-width: var(--measure-body);
}
.footnotes li + li {
  margin-block-start: var(--space-1);
}

/* Previous / next links at the very end of a post. */
.post-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  max-width: var(--measure-body);
}

/* Figures and rules keep to the body measure; images scale down to fit. */
.mc-prose > :is(figure, hr) {
  max-width: var(--measure-body);
}
.mc-prose > hr {
  margin-inline: 0;
}
.mc-prose img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Footnote markers don't open up the line spacing. */
sup {
  line-height: 0;
}

.toc .label {
  margin: 0;
}