/* michaelgord.com — design system
 *
 * Warm paper / ink / bronze, EB Garamond throughout, one accent used as a rule
 * and a mark. Palette and type are lifted from the design doc (round 1 §System,
 * with the dark values taken from mockups 1i and 2f).
 */

/* Self-hosted rather than loaded from Google Fonts: the doc calls for the
 * production build to serve its own subset, and a personal site should not hand
 * a third party a request log of everyone who reads it. Latin subset only —
 * arrows and other glyphs outside it fall back to the system serif. */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/eb-garamond.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/eb-garamond-italic.woff2') format('woff2');
}

:root {
  --paper: #f4f0e8;
  --ground: #f4f0e8;
  --ink: #0f0e0c;
  --bronze: #8c7a5a;
  --bronze-text: #6e5f44;

  --ink-84: rgba(15, 14, 12, 0.84);
  --ink-72: rgba(15, 14, 12, 0.72);
  --ink-60: rgba(15, 14, 12, 0.6);
  --ink-50: rgba(15, 14, 12, 0.5);
  --rule: rgba(15, 14, 12, 0.16);
  --rule-faint: rgba(15, 14, 12, 0.09);
  --bronze-rule: rgba(140, 122, 90, 0.45);
  --bronze-wash: rgba(140, 122, 90, 0.07);
  --bronze-wash-edge: rgba(140, 122, 90, 0.28);
  --ink-wash: rgba(15, 14, 12, 0.045);

  --measure: 34em;
  --gutter: 64px;
  --shell: 1240px;

  color-scheme: light;
}

/* The dark ground is a real state in the doc, not an inversion: bronze lifts to
 * #9C8862 for rules and #B59A6E for text so it holds contrast on ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0f0e0c;
    --ground: #0f0e0c;
    --ink: #f4f0e8;
    --bronze: #9c8862;
    --bronze-text: #b59a6e;

    --ink-84: rgba(244, 240, 232, 0.9);
    --ink-72: rgba(244, 240, 232, 0.78);
    --ink-60: rgba(244, 240, 232, 0.6);
    --ink-50: rgba(244, 240, 232, 0.5);
    --rule: rgba(244, 240, 232, 0.18);
    --rule-faint: rgba(244, 240, 232, 0.12);
    --bronze-rule: rgba(156, 136, 98, 0.5);
    --bronze-wash: rgba(156, 136, 98, 0.12);
    --bronze-wash-edge: rgba(156, 136, 98, 0.4);
    --ink-wash: rgba(244, 240, 232, 0.05);

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper: #0f0e0c;
  --ground: #0f0e0c;
  --ink: #f4f0e8;
  --bronze: #9c8862;
  --bronze-text: #b59a6e;

  --ink-84: rgba(244, 240, 232, 0.9);
  --ink-72: rgba(244, 240, 232, 0.78);
  --ink-60: rgba(244, 240, 232, 0.6);
  --ink-50: rgba(244, 240, 232, 0.5);
  --rule: rgba(244, 240, 232, 0.18);
  --rule-faint: rgba(244, 240, 232, 0.12);
  --bronze-rule: rgba(156, 136, 98, 0.5);
  --bronze-wash: rgba(156, 136, 98, 0.12);
  --bronze-wash-edge: rgba(156, 136, 98, 0.4);
  --ink-wash: rgba(244, 240, 232, 0.05);

  color-scheme: dark;
}

/* ---------------------------------------------------------------- base ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 21px/1.6 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--bronze-text);
}

a:hover {
  color: var(--ink);
}

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

h1,
h2,
h3 {
  font-weight: 400;
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--bronze);
  font: italic 400 23px/1.55 'EB Garamond', Georgia, serif;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--paper);
  padding: 10px 14px;
  border: 1px solid var(--rule);
}

/* ------------------------------------------------------------ masthead ---- */

/* The ruled letterhead: 2px ink rule over a 1px bronze hairline. That pair is
 * the house mark and it repeats on every page. */
.masthead {
  padding-top: 34px;
}

.masthead__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}

.masthead__name {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.masthead__meta {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-text);
}

.masthead__divider {
  width: 1px;
  height: 12px;
  background: var(--bronze-rule);
}

.masthead__rules {
  margin-top: 16px;
}

.masthead__rules::before,
.masthead__rules::after {
  content: '';
  display: block;
}

.masthead__rules::before {
  height: 2px;
  background: var(--ink);
}

.masthead__rules::after {
  margin-top: 1px;
  height: 1px;
  background: var(--bronze);
}

.theme-toggle {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--ink);
}

/* ----------------------------------------------------------------- nav ---- */

.nav {
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--rule);
}

.nav__items {
  display: flex;
  gap: 36px;
  align-items: baseline;
}

.nav__link {
  font-size: 18px;
  line-height: 1;
  color: var(--ink-60);
  text-decoration: none;
  padding-bottom: 4px;
}

.nav__link:hover {
  color: var(--ink);
  border-bottom: 1px solid var(--bronze);
}

.nav__link--current {
  color: var(--ink);
  border-bottom: 2px solid var(--bronze);
}

.nav__toggle {
  display: none;
}

/* --------------------------------------------------------------- pages ---- */

/* Display sizes are fluid rather than fixed-plus-a-breakpoint. The doc's sizes
 * are the upper bound; the lower bound is what fits a 320px column without
 * breaking a long word like "companies" across the measure. */
.hero {
  padding-top: 78px;
}

.hero__title {
  margin: 0;
  font-size: clamp(34px, 5.6vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.hero__intro {
  margin: 34px 0 0;
  max-width: 31em;
  font-size: clamp(19px, 1.8vw, 22px);
  color: var(--ink-84);
}

.hero__record {
  margin: 30px 0 0;
  font-size: 18px;
  color: var(--ink-60);
}

.page-title {
  margin: 22px 0 28px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.section-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.016em;
}

.body-lede {
  margin: 0 0 20px;
  max-width: 33em;
  font-size: clamp(18px, 1.7vw, 21px);
  color: var(--ink-84);
}

.lede {
  padding-top: 64px;
  max-width: 900px;
}

.lede h1 {
  margin: 0 0 22px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.lede p {
  margin: 0;
  max-width: 33em;
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink-84);
}

.eyebrow {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze-text);
}

.section {
  padding-top: 66px;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
}

.section__head h2 {
  margin: 0;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.split {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 70px;
  align-items: start;
}

.rail {
  border-left: 1px solid var(--bronze-rule);
  padding-left: 24px;
}

.rail__block + .rail__block {
  margin-top: 20px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.rail p {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-72);
}

/* The ledger — treatment i from mockup 1d, used for every dated list on the
 * site. Year column, subject, trailing note; hairline between rows. */
.ledger {
  display: flex;
  flex-direction: column;
}

.ledger__row {
  display: grid;
  grid-template-columns: 150px 1fr 220px;
  gap: 40px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--rule-faint);
  text-decoration: none;
  color: inherit;
}

.ledger__row:first-child {
  border-top-color: var(--rule);
}

.ledger__row:last-child {
  border-bottom: 1px solid var(--rule-faint);
}

a.ledger__row:hover .ledger__title {
  border-bottom: 1px solid var(--bronze);
}

.ledger__when {
  font-size: 17px;
  line-height: 1.4;
  color: var(--bronze-text);
}

.ledger__when span {
  color: var(--ink-50);
}

.ledger__title {
  display: inline-block;
  font-size: 32px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}

.ledger__note {
  display: block;
  max-width: var(--measure);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-72);
}

.ledger__tags {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-50);
}

/* A year the canonical record does not carry shows a bronze rule, never a
 * guess. This is a content rule from the doc, expressed in CSS. */
.unknown-year {
  display: inline-block;
  width: 2.2em;
  height: 1px;
  background: var(--bronze);
  vertical-align: 0.35em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  margin-top: 24px;
  border: 1px solid var(--rule);
}

.card {
  background: var(--paper);
  padding: 26px 24px 30px;
  text-decoration: none;
  display: block;
  color: inherit;
}

.card__kicker {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-text);
}

.card__title {
  margin: 14px 0 10px;
  font-size: 27px;
  line-height: 1.14;
  color: var(--ink);
}

.card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-72);
}

.card:hover .card__title {
  border-bottom: 1px solid var(--bronze);
  display: inline-block;
}

.rows {
  display: flex;
  flex-direction: column;
}

.row {
  display: grid;
  grid-template-columns: 110px 1fr 130px;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-faint);
  text-decoration: none;
  color: inherit;
}

.row__when {
  font-size: 16px;
  line-height: 1.4;
  color: var(--bronze-text);
}

.row__title {
  font-size: 23px;
  line-height: 1.3;
  color: var(--ink);
}

a.row:hover .row__title {
  border-bottom: 1px solid var(--bronze);
}

.row__tag {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-50);
}

.note {
  margin: 16px 0 0;
  font: italic 400 16px/1.5 'EB Garamond', Georgia, serif;
  color: var(--ink-50);
}

/* Marks a block whose copy has to come from Michael. Deliberately visible —
 * an unmarked placeholder is how invented text ships. */
.pending {
  margin: 34px 0 0;
  padding: 22px 24px;
  background: var(--bronze-wash);
  border: 1px solid var(--bronze-wash-edge);
}

.pending p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-72);
}

.pending .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.panel {
  background: var(--bronze-wash);
  border: 1px solid var(--bronze-wash-edge);
  padding: 26px 24px;
}

.panel--ink {
  background: var(--ink-wash);
  border-color: var(--rule);
}

.panel p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-72);
}

.panel p:last-child {
  margin-bottom: 0;
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--bronze-wash-edge);
  text-decoration: none;
  color: inherit;
}

.stack__item span:first-child {
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
}

.stack__item span:last-child {
  font-size: 15px;
  line-height: 1;
  color: var(--bronze-text);
  white-space: nowrap;
}

.defs {
  display: flex;
  flex-direction: column;
}

.def {
  padding: 18px 0;
  border-top: 1px solid var(--rule-faint);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}

.def:last-child {
  border-bottom: 1px solid var(--rule-faint);
}

.def__term {
  font-size: 17px;
  line-height: 1.5;
  color: var(--bronze-text);
}

.def__desc {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}

/* Column sets live here rather than in inline styles so the narrow-view rules
 * below can actually override them — an inline grid-template-columns wins over
 * any stylesheet rule and silently forces the page wider than the viewport. */
.table {
  display: grid;
  gap: 0 40px;
}

.table--authority {
  grid-template-columns: 230px 1fr 250px;
}

.ledger--appearances .ledger__row {
  grid-template-columns: 130px 1fr 220px;
}

.ledger--media .ledger__row {
  grid-template-columns: 120px 1fr 210px 130px;
}

.ledger__row.is-dead {
  opacity: 0.62;
}

.table__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-faint);
}

.table__row--head {
  padding: 16px 0;
  border-bottom-color: var(--rule);
}

.table__row--head span {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze-text);
}

.table__row--mine {
  background: var(--bronze-wash);
}

.table__subject {
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
}

.table__cell {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-72);
}

.table__cell--quiet {
  font-size: 17px;
  color: var(--ink-60);
}

/* ------------------------------------------------------------- article ---- */

.article {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 66px;
  align-items: start;
  padding-top: 52px;
}

.article__body {
  max-width: var(--measure);
}

.article__body h1 {
  margin: 24px 0 16px;
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.016em;
}

.article__meta {
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-50);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}

.article__body p {
  margin: 22px 0 0;
  font-size: 21px;
  line-height: 1.7;
}

.article__body p:first-of-type {
  margin-top: 26px;
}

.article__rail {
  margin-top: 92px;
}

.article__rail section {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  margin-bottom: 28px;
}

.article__rail .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.article__rail p,
.article__rail div:not(.tags) {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-72);
  margin: 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  font-size: 15px;
  line-height: 1;
  color: var(--bronze-text);
  text-decoration: none;
  border: 1px solid var(--bronze-rule);
  padding: 6px 10px;
}

.tag:hover {
  border-color: var(--bronze);
  color: var(--ink);
}

.backlink {
  font-size: 16px;
  line-height: 1;
  color: var(--bronze-text);
  text-decoration: none;
}

/* ---------------------------------------------------------------- misc ---- */

.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--ink-wash);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-50);
}

.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  padding-top: 44px;
}

.faq__item {
  padding: 22px 0;
  border-top: 1px solid var(--rule-faint);
}

.faq__item:first-child {
  border-top-color: var(--rule);
}

.faq__q {
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 8px;
}

.faq__a {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-72);
}

.chart {
  border: 1px solid var(--rule);
  padding: 38px 40px 42px;
  display: grid;
  /* minmax(0,…) rather than the default auto: an auto track is sized to the
   * widest node's max-content and will push the whole page wider than the
   * viewport on a narrow screen instead of letting the labels wrap. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.chart__node {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 14px 26px;
  text-align: center;
  max-width: 100%;
}

.chart__node--parent {
  border-color: var(--bronze);
  background: var(--bronze-wash);
  padding: 16px 30px;
}

.chart__node--held {
  border-style: dashed;
}

.chart__node strong {
  display: block;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}

.chart__node--parent strong {
  font-size: 24px;
}

.chart__node span {
  font-size: 15px;
  line-height: 1.3;
  color: var(--bronze-text);
}

.chart__stem {
  width: 1px;
  height: 34px;
  background: var(--bronze);
}

.chart__branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  width: 100%;
  position: relative;
}

.chart__branches::before {
  content: '';
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0;
  border-top: 1px solid var(--bronze);
}

.chart__branch {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart__branch .chart__stem {
  height: 26px;
}

/* The ecosystem's own properties, one tier below it. */
.chart__leaves {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.chart__leaf {
  border: 1px solid var(--rule-faint);
  background: var(--paper);
  padding: 9px 14px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.chart__leaf:hover {
  border-color: var(--bronze);
}

.chart__leaf strong {
  display: block;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
}

.chart__leaf span {
  font-size: 13px;
  line-height: 1.3;
  color: var(--bronze-text);
}

.chart__caption {
  margin: 30px 0 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-50);
}

pre {
  margin: 0;
  font: 400 14px/1.7 ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink);
  white-space: pre-wrap;
  font-variant-numeric: normal;
}

code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85em;
  font-variant-numeric: normal;
}

/* -------------------------------------------------------------- footer ---- */

.footer {
  margin-top: 74px;
  border-top: 1px solid var(--rule);
  padding: 26px 0 46px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-50);
}

.footer a {
  display: block;
  font-size: 16px;
  line-height: 1;
  color: var(--bronze-text);
  text-decoration: none;
  margin-bottom: 7px;
}

.footer a:hover {
  color: var(--ink);
}

/* --------------------------------------------------------- narrow-view ---- */

@media (max-width: 900px) {
  :root {
    --gutter: 24px;
  }

  body {
    font-size: 19px;
  }

  .lede {
    padding-top: 40px;
  }

  .lede h1 {
    font-size: 36px;
  }

  .split,
  .article,
  .faq {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .rail,
  .article__rail {
    margin-top: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 24px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .ledger__row,
  .ledger--appearances .ledger__row,
  .ledger--media .ledger__row,
  .row,
  .def {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .table,
  .table--authority {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .table__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .table__row--head {
    display: none;
  }

  .chart {
    padding: 24px 16px 28px;
  }

  .chart__branches {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .masthead__top {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .chart__branches::before {
    display: none;
  }

  .article__body h1 {
    font-size: 34px;
  }

  .footer {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Four items, unchanged — only the treatment moves. The bar becomes a
   * disclosure and the items stack at reading size. */
  .nav {
    flex-direction: column;
    gap: 0;
    padding: 0 0 8px;
  }

  /* One label, naming the action — the mockup's mobile sheet puts "Close" on
   * the right of the same row the name sits on. */
  .nav__toggle {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    width: 100%;
    padding: 18px 0;
    font: inherit;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bronze-text);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .nav__toggle:hover {
    color: var(--ink);
  }

  .nav__items {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .nav[data-open='true'] .nav__items {
    display: flex;
  }

  .nav__link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 0;
    font-size: 26px;
    border-top: 1px solid var(--rule-faint);
    border-bottom: 0;
  }

  .nav__link::after {
    content: attr(data-index);
    font-size: 13px;
    color: var(--bronze-text);
  }

  .nav__link--current {
    border-bottom: 0;
    color: var(--ink);
  }
}

@media print {
  .nav,
  .theme-toggle {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}