/* User Provided Stylesheet */

/* Generated by code/theme.py from econ-ark-myst/theme.css and content/theme/local.css. */
/* The website's half of the Econ-ARK house style; econ-ark.typ holds the PDF's half, sharing the
 * palette, Fira family, tables, captions, and the four-curve rule. Fonts live in fonts/ beside this
 * file, named under static_files in myst.yml with a system-sans fallback; both themes reach the text through article.article. */

/* Temml's own rules draw the MathML parts Chromium leaves undrawn; without them an \underline loses
 * its rule. Placed first so everything below can override it, since an @import must lead anyway. */
@import url("fonts/temml.css");

/* The PDF's own typefaces, subset to Latin and served beside this file (Fira Math whole: see
 * scripts/fonts.sh). Ask only for a weight declared here, as econ-ark.typ does: CSS answers an
 * undeclared weight with a neighbour, so 600 would silently get Bold. Emphasis is 500, bold 700. */
@font-face {
  font-family: "Fira Math";
  src: url("fonts/FiraMath-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* The landing's own weight. Without this face a request for 600 resolves to 700, which is two
   steps above the 500 the paper and the PDF set their headings at. */
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Mono";
  src: url("fonts/FiraMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The weight a class or function name takes in a listing, on both halves */
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/FiraMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Econ-ARK brand palette. The blue is the one econ-ark.org sets throughout its own stylesheet */
  --ark-blue: #1f476b;
  --ark-grey: #676470;
  /* The four logo curves as the Econ-ARK design guidelines name them, in the order the rule under
     the front matter shows them. The logo EPS authors them in CMYK, 0/35/85/0, 0/95/20/0,
     75/0/100/0 and 100/0/0/0, and these are that set converted */
  --ark-curve-1: #fbaf3f;
  --ark-curve-2: #ed2a7b;
  --ark-curve-3: #00adef;
  --ark-curve-4: #38b449;
  /* The four in a row, which closes the front matter on a paper and the hero on a landing. Named
     so those two cannot drift when the order or the stops change. Each site sets its own height */
  --ark-curve-rule: linear-gradient(
    to right,
    var(--ark-curve-1) 0 25%,
    var(--ark-curve-2) 0 50%,
    var(--ark-curve-3) 0 75%,
    var(--ark-curve-4) 0
  );
  /* The lines a paper figure is drawn with: --ark-blue at hue 267 and chroma 25, its lightness
     moved to L* 66, 48, 29 and 12, steps of 17 or more because a thin line is read by lightness
     before hue. sRGB runs out under the darkest, which lands 10 degrees off at chroma 24 */
  --ark-line-1: #82a3cd;
  --ark-line-2: #52759c;
  --ark-line-3: #1f476b;
  --ark-line-4: #002040;
  /* Lighter than all four, for a reference path under them */
  --ark-datum: #c3bfcd;
  /* The field the banner artwork is drawn on. Held apart from --ark-blue, which switches to a
     light blue under html.dark, while the artwork's own field does not change with the theme */
  --ark-banner-field: #1f476b;
  /* Ink on a curve fill, held apart from --ark-ink for the same reason: the fills do not change
     with the theme, so the numeral over them must not lighten under html.dark */
  --ark-on-curve: #111;
  /* The artwork behind a landing hero, resolved against this stylesheet rather than the server
     root: a Pages site under /DemARK/ made a leading slash mean econ-ark.github.io/banner.svg,
     which 404s, and the hero painted flat. A site serving it elsewhere overrides this one line */
  --ark-hero-image: none;
  /* Paper, then the fills that stay visible on it. Pure white glares in a lit room, so the
     page takes the brand blue at the top of its lightness range and the fills step down far
     enough to hold the separation the PDF has between its white paper and its tint. */
  --ark-paper: #f5f7f9;
  --ark-tint: #e8edf2;
  --ark-rule: #a4a2a9;
  --ark-ink: #000;
  --ark-sans: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --ark-serif: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --ark-mono: "Fira Mono", ui-monospace, "DejaVu Sans Mono", monospace;
  --ark-math: "Fira Math", math;
  /* The blue label on a front matter part. The summary's label is drawn by a pseudo-element, which
     cannot inherit a size from the heading it replaces, so both read this rather than a number */
  --ark-fm-label: 0.95rem;
}

/* myst-theme recolours its chrome through --myst-color-* vars (#843, 2026-06-18). 1.4.0 is the
 * first release to declare all 55 and paint through them, where 1.3.1 wrote Tailwind classes.
 * check_token_coverage fails on a painted token left to the theme. */
:root {
  --myst-color-link: var(--ark-blue);
  --myst-color-link-hover: var(--ark-blue);
  --myst-color-link-underline: var(--ark-rule);
  --myst-color-focus-ring: var(--ark-blue);
  --myst-color-focus-outline: var(--ark-blue);
  /* The theme sets button text to white and the fill to this, so the fill has to carry white.
     --ark-banner-field does in both themes; --ark-blue turns light under html.dark and would not */
  --myst-color-primary: var(--ark-banner-field);
  --myst-color-primary-hover: #163550;
  /* Ink, then the greys under it. The theme carries two body greys and two rule greys where this
     palette has one of each, so each pair resolves to the same value here. */
  --myst-color-text: var(--ark-ink);
  --myst-color-text-secondary: var(--ark-grey);
  --myst-color-text-tertiary: var(--ark-grey);
  --myst-color-border: var(--ark-rule);
  --myst-color-border-strong: var(--ark-rule);
  /* The fills that step off the page: a secondary surface and a hover both take the tint the PDF
     puts behind code, and the hover steps one notch toward the rule so the two stay apart. */
  --myst-color-bg-secondary: var(--ark-tint);
  --myst-color-surface: var(--ark-tint);
  --myst-color-surface-hover: color-mix(in srgb, var(--ark-tint) 82%, var(--ark-rule));
  /* The contents entry a reader is on: the theme marks it in its own accent over a pale wash of
     the same, where this palette carries the wash as the tint and the mark as the blue. */
  --myst-color-active: var(--ark-blue);
  --myst-color-active-bg: var(--ark-tint);
}

/* The page colour every other surface is derived from: the theme reads this token for the header
 * bar at four fifths opacity and the outline panel at nineteen twentieths, so softening it here
 * reaches both. --ark-paper has no night value, the themes' own dark surfaces standing in. */
html:not(.dark) {
  --myst-color-bg: var(--ark-paper);
}

html.dark {
  --ark-blue: #8ab4d8;
  --ark-grey: #a9a5b3;
  --ark-tint: #1b2530;
  --ark-rule: #4a4750;
  --ark-ink: #e7e9ec;
}

/* The page and the search dialog, which the themes reach as elements rather than through a class.
 * Every other surface they paint now derives from --myst-color-bg, set below. */
html:not(.dark) body,
html:not(.dark) dialog {
  background-color: var(--ark-paper);
}

/* book-theme's search box is a shade off its own white; keep it a shade off this one */
html:not(.dark) .myst-search-bar {
  background-color: var(--ark-tint);
}

/* preserveAspectRatio="none" on purpose: the four curves fan from the lower left to the right edge,
 * so the artwork fills any shape, where holding ratio would letterbox it. The fallback is
 * banner.svg's own literal, since --ark-blue flips under html.dark. The ancestor beats bg-cover. */
.myst-article-header .myst-article-header-background {
  background-color: var(--ark-banner-field);
  background-size: 100% 100%;
}

/* article-theme shows no site logo beside a paper, so the paper carries the mark the PDF prints
 * at the top of its margin: the wide lockup at 528px, embedded so no file can go missing, standing
 * over the title because the margin is too narrow at most widths. White wordmark at night. */
.myst-article-header-fm::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 176px;
  height: 44px;
  margin-bottom: 0.9rem;
  background: url("data:image/png;base64,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") no-repeat left center / contain;
}

html.dark .myst-article-header-fm::before {
  background-image: url("data:image/png;base64,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");
}


/* The site title and its contents list stay inside the sidebar column. A machine whose fonts are
 * wider than the theme expects otherwise runs the title over the paper beside it, which is what a
 * reader sees when the site's fonts are missing. */
.myst-primary-sidebar-nav,
.myst-primary-sidebar-toc,
.myst-toc {
  min-width: 0;
  max-width: 100%;
}

/* book-theme shows its own "Made with MyST" lockup unless the site supplies a
 * primary_sidebar_footer part; supplying one gets raw markdown in its place, a 256px mark and
 * body-sized text. This rule restores the part to the badge's own proportions. */
.myst-primary-sidebar-footer p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

/* The mark and words read as one lockup, matching how the badge this replaces was set. The
 * underline and MyST's off-site arrow both go: a footer lockup is understood to leave the site,
 * and the badge it stands in for carried no arrow either. */
.myst-primary-sidebar-footer p > a {
  text-decoration: none;
}

.myst-primary-sidebar-footer p > a > svg {
  display: none;
}

/* The mark reaches the link's span in a picture where MyST wrote a webp beside it and as a bare img
 * where it could not, so both take the size; inline-block keeps either on one line, where a block
 * would drop the words to their own. The theme's `.article p > a img` had flattened the favicon. */
.myst-primary-sidebar-footer picture,
.article.myst-primary-sidebar-footer img {
  display: inline-block;
  vertical-align: -0.28em;
  width: 1.15rem;
  height: 1.15rem;
  max-width: none;
  max-height: none;
  margin: 0 0.18rem 0 0;
  border-radius: 3px;
}

/* The sidebar runs to the line where the paper's text begins, so a column wider than the space left
 * for it lands on the paper; pin it to the margin band instead, which ends one column earlier. */
@media (min-width: 1280px) {
  .myst-primary-sidebar-pointer {
    grid-column: page-start / body-outset-start;
    min-width: 0;
    max-width: 100%;
  }

  /* A landing carries its own navigation, so the rail comes off where it would overlay the
   * full-width blocks. Not through `hide_toc`, which drops the contents from the page, and on a
   * phone that element is the drawer: taking the rail off here leaves the drawer its links. */
  body:has(.ark-hero) .myst-primary-sidebar-pointer {
    display: none;
  }
}

.myst-toc a {
  overflow-wrap: anywhere;
}

/* Every face on the page is one of the three the PDF sets. `font-system` names a monospace stack
 * (Menlo, Consolas, monospace) and carries Jupyter stream and error output, so it belongs here. */
.font-mono,
.font-system,
code,
pre,
.myst-code-body,
.sphinx-desc-signature,
p[data-line-number].line::before {
  font-family: var(--ark-mono);
}

/* The contents panel marks the section being read with a left rule and a tinted strip, both from
 * the theme's own blue. The rule takes brand blue and the strip the house tint, so the panel
 * agrees with the four-colour rule under the front matter and introduces no fifth blue. */
.myst-outline .myst-outline-header {
  font-family: var(--ark-sans);
  letter-spacing: 0.06em;
  color: var(--ark-grey);
}

.myst-outline .myst-outline-item {
  border-left-color: var(--ark-rule);
}

.myst-outline .myst-outline-item-active {
  border-left-color: var(--ark-blue);
  background-color: var(--ark-tint);
}

.myst-outline .myst-outline-item-active a {
  color: var(--ark-blue);
}

/* Keywords sit under the front matter, where the label is the only part a reader scans for, so it
 * takes the blue and the terms stay in body ink. */
.myst-keywords {
  font-family: var(--ark-sans);
  font-size: 0.87rem;
}

.myst-keywords-label {
  color: var(--ark-blue);
}

.myst-keywords-item {
  color: var(--ark-grey);
}

/* The previous and next links close every page of a book. The theme gives each a rounded box with a
 * shadow, the one filled-box idiom this stylesheet drops everywhere else, since a filled box on
 * these pages means code; they take the flat card instead, and brand blue on hover. */
.myst-footer-links .myst-footer-link {
  border-color: var(--ark-rule);
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--ark-sans);
}

.myst-footer-links .myst-footer-link:hover {
  border-color: var(--ark-blue);
  color: var(--ark-blue);
  box-shadow: none;
}

.myst-footer-links .myst-footer-link-group {
  color: var(--ark-grey);
}

/* Tabs, where the theme underlines the open one in its own blue. The set keeps its row rule in
 * house grey so the brand blue marks one thing only: which tab is open. */
article.article .myst-tab-set-row {
  border-bottom-color: var(--ark-rule);
}

article.article .myst-tab-item-header {
  font-family: var(--ark-sans);
  color: var(--ark-grey);
}

article.article .myst-tab-item-header-active {
  color: var(--ark-blue);
  border-bottom-color: var(--ark-blue);
}

/* A dropdown and an exercise are the two remaining filled boxes, and both take the rule an
 * admonition takes. The exercise keeps a colour of its own, since it asks the reader to do
 * something rather than to note something. */
article.article :is(details, aside).myst-dropdown,
article.article :is(details, aside).myst-exercise {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--ark-blue);
  border-radius: 0;
  box-shadow: none;
}

article.article :is(details, aside).myst-exercise {
  border-left-color: var(--ark-curve-3);
}

article.article .myst-dropdown-header,
article.article .myst-exercise-header,
article.article .myst-exercise-title {
  background: transparent;
  border: 0;
  font-family: var(--ark-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ark-blue);
}

article.article .myst-exercise-title {
  color: var(--ark-curve-3);
}

/* A margin note takes the label treatment alone; its fill is left to the theme, which gives one to
 * the `topic` kind and none to a margin note. The two cannot be told apart here: aside.tsx writes
 * 'myst-aside-${kind}' in single quotes, so every aside carries that literal string as a class. */
article.article .myst-aside-title {
  font-family: var(--ark-sans);
  color: var(--ark-blue);
}

/* Every face on the page is the house sans, chrome included. This once spared the nav, sidebar and
 * search box, lest a wider font run the site title onto the paper; the columns above now carry
 * min-width: 0 for exactly that, so the exemption had outlived itself. Set at the root. */
body,
[class*="myst-fm-"],
.myst-supporting-documents {
  font-family: var(--ark-sans);
}

/* Reading text: text, tables, equations and code share the theme's column, as they share the text
 * block of the PDF. Fira Sans reads large for its size, so 1.05rem sets that column near the 80
 * characters the paper holds; a sans also needs less leading than the serif it replaced. */
article.article {
  font-family: var(--ark-serif);
  font-size: 1.05rem;
  line-height: 1.58;
  color: var(--ark-ink);
}

/* Equations, in the companion face to the body text. Only MathML reaches this, which is what
 * plugins/fira-math.mjs produces; an equation it could not parse stays KaTeX and is left alone.
 * Temml sets on the small side of the surrounding text, hence the size bump. */
article.article math {
  font-family: var(--ark-math);
  font-size: 1.08em;
  color: var(--ark-ink);
}

/* A raw `\begin{align}` comes back from Temml numbered from a counter in fonts/temml.css, beside
 * the number MyST gives the same equation and a cross-reference resolves to. Two printed together.
 * Temml's goes; docs/known-gaps.md carries what that costs a multi-line environment. */
article.article .tml-eqn::before {
  content: none;
}


@media (min-width: 640px) {
  article.article p {
    text-align: justify;
    hyphens: auto;
  }

  /* Justification suits the body measure; a card in a landing grid is a quarter of it, 173px on a
   * three-column row, where four words open gaps that read as rivers. Ragged right comes via
   * .myst-landing-block; a card is listed too, since a grid of them sits outside that ancestor. */
  article.article .myst-card p,
  article.article .myst-landing-block p,
  article.article .myst-landing-block li {
    text-align: left;
    hyphens: manual;
  }
}

/* The keyboard route through the paper stays visible */
article.article a:focus-visible,
.myst-top-nav a:focus-visible,
.myst-toc a:focus-visible {
  outline: 2px solid var(--myst-color-focus-outline);
  outline-offset: 2px;
}

/* Links leave the document, so they carry the blue, and so do citations. The button is excluded
 * because styles/button.css sets its label white over the fill, the card because the theme makes
 * the whole card an anchor that asks for body ink. Both lost to this; see docs/known-gaps.md. */
article.article a:not(.button):not(.myst-card),
article.article cite:not(.button) a {
  color: var(--myst-color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Title block */
.myst-fm-block-title {
  font-weight: 500;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ark-ink);
}

.myst-fm-block-subtitle {
  font-weight: 400;
  color: var(--ark-grey);
}

/* The four curves close the front matter, where the PDF draws them. A page with no abstract, key
 * points or summary has no parts block, so the rule falls to the anchor in its place, and the
 * colours show whichever fields an author fills in. */
.myst-fm-parts::after,
#skip-to-article:not(:has(+ .myst-fm-parts))::after {
  content: "";
  display: block;
  height: 2px;
  margin: 2rem 0 1.4rem;
  background: var(--ark-curve-rule);
}

/* A landing hides its title block, so it reaches the fallback above with no front matter to close:
 * it drew a 678px fragment across a 1428px page, above a hero that bleeds to both edges, for 54px
 * of margin. The hero carries the same four colours full width along its own bottom edge. */
article.article:has(.ark-hero) #skip-to-article::after {
  content: none;
}

/* Abstract, key points and summary: the blue label carries them, as it does in the PDF, and the
 * theme's box is dropped so a filled block means one thing on the page: code. */
article.article .myst-abstract-title {
  font-family: var(--ark-sans);
  font-size: var(--ark-fm-label);
  font-weight: 500;
  color: var(--ark-blue);
  margin-bottom: 0.4rem;
}

article.article .myst-abstract-box {
  background: transparent;
  padding: 0;
}

/* Key points take the blue bullet they have in the margin of the PDF */
article.article .myst-abstract-box li::marker {
  color: var(--ark-blue);
}

/* Section headings, which MyST sets one level down from the markdown: a first-level heading in the
 * paper is an h2 here. Sans and blue, then sans and black, then italic serif, as in the PDF. The
 * :has() picks out headings written in the text, leaving the theme's own parts alone. */
article.article h2:has(> .heading-text) {
  font-family: var(--ark-sans);
  /* 1.18 of the 1.05rem body, the ratio ark/typography.typ sets with 13pt over 11pt. A flat
     1.4rem was 1.33 and gave the site a scale the PDF of the same paper does not have. */
  font-size: 1.24rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ark-blue);
  margin-top: 2.2em;
}

/* Both sit at body size, as in the PDF: ark/typography.typ sets level 1 at 13pt over an 11pt body
 * and leaves levels 2 and 3 at 11pt, separating them by weight and italic rather than by size. The
 * 1.12 and 1.06 here were a step of 5 percent that matched neither the PDF nor a reader's eye. */
article.article h3:has(> .heading-text) {
  font-family: var(--ark-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ark-ink);
  margin-top: 1.8em;
}

article.article h4:has(> .heading-text) {
  font-family: var(--ark-serif);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  color: var(--ark-ink);
}

/* Tables, which the PDF sets booktabs: horizontal rules only, heavier at the top and foot than
 * under the header, and no verticals. ark/tables.typ draws that with arkGrey at 0.75pt and 0.5pt,
 * so the same two weights and the same grey here, over the theme's own boxed grey-200 grid. */
article.article table {
  border-collapse: collapse;
  border-top: 1.5px solid var(--ark-grey);
  border-bottom: 1.5px solid var(--ark-grey);
}

article.article table th {
  font-family: var(--ark-sans);
  font-weight: 500;
  border-bottom: 1px solid var(--ark-grey);
}

article.article table td,
article.article table tr {
  border: 0;
}

/* MyST prints an equation it cannot parse as a bare `pre` holding the parser's message and the TeX
 * behind it, and the theme paints that stone-800: a near-black slab, the loudest thing on the page,
 * where nine of them sit across three DemARK notebooks. Pink is the palette's error colour. */
article.article pre[title] {
  background: var(--ark-tint);
  color: var(--ark-code-ink);
  border-left: 2px solid var(--ark-curve-2);
  border-radius: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.86em;
}

/* A card carries a hairline in the house grey and no shadow, the one filled-and-shadowed box left
 * in a stylesheet where a filled box means code. The theme writes border-gray-100 and a Tailwind
 * blue on hover, both one class, so these take the border at two classes and an element. */
article.article .myst-card {
  border-color: var(--ark-rule);
  box-shadow: none;
}

article.article .myst-card:hover {
  border-color: var(--ark-blue);
}

/* Captions: sans and small, with the number in blue, set left under a figure and over a table */
article.article figcaption {
  font-family: var(--ark-sans);
  font-size: 0.87rem;
  line-height: 1.45;
  text-align: left;
  color: var(--ark-grey);
}

article.article figcaption a[href^="#"] {
  color: var(--ark-blue);
  font-weight: 500;
}

/* Tables: horizontal rules only, a heavy rule top and bottom and a light one under the header */
article.article figure table {
  font-family: var(--ark-sans);
  font-size: 0.87rem;
  font-variant-numeric: tabular-nums lining-nums;
  border-collapse: collapse;
  border-top: 1.5px solid var(--ark-grey);
  border-bottom: 1.5px solid var(--ark-grey);
}

article.article figure table th {
  font-weight: 500;
  text-align: left;
  vertical-align: bottom;
  color: var(--ark-ink);
  border: 0;
  border-bottom: 1px solid var(--ark-grey);
  padding: 0.35em 0.75em;
}

article.article figure table td {
  color: var(--ark-ink);
  border: 0;
  padding: 0.3em 0.75em;
}

/* Both themes rule every row; the rules that carry the table are the three set above */
article.article figure table tr {
  border: 0;
}

/* Code, in the mono face that pairs with the body serif and the PDF's pale blue block */
code,
pre code {
  font-family: var(--ark-mono);
}

/* Code in a sentence takes the colour of the sentence, as it does in the PDF */
article.article :not(pre) > code {
  font-size: 0.92em;
  color: inherit;
}

article.article .myst-code {
  background: var(--ark-tint);
  color: var(--ark-code-ink);
  border: 0;
  border-radius: 2px;
  box-shadow: none;
}

article.article .myst-code-body {
  background: transparent;
}

/* Syntax colours. The theme ships XCode for light and Dark+ for dark, 17 token groups from neither
 * palette. Four roles stay and the rest fall back to body ink, since a listing with every accent
 * lit fights the four-curve mark. brand/code.tmTheme carries the same four for the PDF. */
:root {
  --ark-code-keyword: var(--ark-blue);
  --ark-code-comment: var(--ark-grey);
  /* curve-2 deepened until it clears 4.5 to 1 on --ark-tint; the identity pink reads 3.42 there */
  --ark-code-string: #ce1160;
  /* curve-4 deepened the same way, for the numbers a calibration listing is read for. The identity
     green reads 2.29 on --ark-tint; this is 4.58, and green keeps it clear of the blue keyword */
  --ark-code-number: #1f7a33;
  /* Everything unscoped, in arkGrey's own hue. Body ink reads 17.8 on --ark-tint against the blue
     keyword's 8.2, so a listing set in it put its least meaningful token on top, and a bold name
     in it more so. At 7.9 the name is marked by weight and sits level with the keyword. */
  --ark-code-ink: #48464e;
}

html.dark {
  /* On the dark tint the identity pink is 3.85, so this one lightens instead. The other two
     tokens follow --ark-blue and --ark-grey, which already flip. */
  --ark-code-string: #f04f92;
  /* The identity green needs no deepening here: it reads 5.76 on the dark tint */
  --ark-code-number: var(--ark-curve-4);
  /* Lightened instead, to 7.2 against the dark keyword's 7.1 */
  --ark-code-ink: #b2b0b8;
}

/* Everything the two themes colour and this palette does not: back to the body ink it sits in */
article.article .hljs-tag,
article.article .hljs-attribute,
article.article .hljs-attr,
article.article .hljs-selector-tag,
article.article .hljs-selector-id,
article.article .hljs-selector-class,
article.article .hljs-variable,
article.article .hljs-template-variable,
article.article .hljs-regexp,
article.article .hljs-link,
article.article .hljs-title,
article.article .hljs-symbol,
article.article .hljs-bullet,
article.article .hljs-number,
article.article .hljs-section,
article.article .hljs-meta,
article.article .hljs-type,
article.article .hljs-built_in,
article.article .hljs-params,
article.article .hljs-subst,
article.article .hljs-class .hljs-title,
article.article .hljs-title.class_ {
  color: inherit;
}

article.article .hljs-keyword,
article.article .hljs-literal,
article.article .hljs-name {
  color: var(--ark-code-keyword);
}

article.article .hljs-comment,
article.article .hljs-quote,
article.article .hljs-doctag {
  color: var(--ark-code-comment);
}

article.article .hljs-string,
article.article .hljs-code,
article.article .hljs-meta .hljs-string {
  color: var(--ark-code-string);
}

/* The numbers a reader checks a listing against the calibration table for */
article.article .hljs-number {
  color: var(--ark-code-number);
}

/* Class and function names are the structure a reader scans a listing for, and colour is spent at
 * four roles, so weight carries this one. brand/code.tmTheme sets bold on the same scopes for the
 * PDF. Keywords keep one weight: they already hold the strongest colour in the palette. */
article.article .hljs-title,
article.article .hljs-title.class_,
article.article .hljs-title.function_,
article.article .hljs-built_in,
article.article .hljs-type {
  font-weight: 700;
}

/* These three carry a background rather than a colour, so they survive the block above and arrive
 * in XCode's own greens and pinks. The diff pair keeps its meaning and takes the palette's. */
article.article .hljs-formula {
  background-color: var(--ark-tint);
}

article.article .hljs-addition {
  background-color: rgb(from var(--ark-curve-4) r g b / 0.18);
}

article.article .hljs-deletion {
  background-color: rgb(from var(--ark-curve-2) r g b / 0.18);
}

/* The line a reader is pointed at, and the numbers beside it, both ship a blue of their own */
article.article pre > code > span[data-highlight="true"]::after {
  background: var(--ark-blue);
}

article.article pre > code > span > .linenumber {
  color: var(--ark-rule);
}

article.article pre > code > span[data-highlight="true"] > .linenumber {
  color: var(--ark-blue);
}

/* A notebook page, which book-theme carries. The theme styles the code a reader writes and stops
 * at the kernel's output: that ships with Tailwind's `font-system` and `font-thin`, so the answer
 * arrived in Menlo at weight 100 beside a question in Fira Mono. Both classes sit on it. */
.myst-jp-stream-output.jupyter-output,
.myst-jp-safe-output-text.jupyter-output {
  font-family: var(--ark-mono);
  font-weight: 400;
  font-size: 0.86em;
  /* The same ink as the cell above it, where the answer arrived in pure black against the code's
     own #48464e. A question and its answer sit adjacent, so the two inks were visible together. */
  color: var(--ark-code-ink);
  background: var(--ark-tint);
  border-radius: 2px;
  padding: 0.6rem 0.8rem;
}

/* The control that starts the kernel. Stock, it is a stone glyph at 60% opacity, which reads as
 * disabled on the one page where running the code is the point; it already carries its own label
 * for a screen reader, so the work here is to let it look as available as it is. */
.myst-jp-nb-toolbar .myst-jp-nb-toolbar-inner {
  border-color: var(--ark-rule);
  background: var(--ark-paper);
}

/* --ark-paper does not follow the theme, so the box stayed light while the glyph on it went to a
   bright blue, which left the control at about 2.4 to 1 against its own ground */
html.dark .myst-jp-nb-toolbar .myst-jp-nb-toolbar-inner {
  background: var(--ark-tint);
}

.myst-jp-nb-toolbar-inner .myst-jp-nb-toolbar-power-btn {
  color: var(--ark-blue);
  opacity: 1;
}

html.dark .myst-jp-nb-toolbar-inner .myst-jp-nb-toolbar-power-btn {
  color: var(--ark-curve-3);
}

/* Four chrome surfaces the theme paints with a bg-white utility rather than a token, which left a
 * white header bar, contents box, skip link and cell-toolbar plate on a --ark-paper page. Each
 * keeps the theme's alpha; light only, since --ark-paper does not follow the theme. */
html:not(.dark) .myst-top-nav {
  background-color: rgb(from var(--ark-paper) r g b / 0.8);
}

html:not(.dark) .myst-outline {
  background-color: rgb(from var(--ark-paper) r g b / 0.95);
}

html:not(.dark) .myst-skip-to-article {
  background-color: var(--ark-paper);
}

/* The drawer the menu button opens, which React writes at run time rather than into the page, so
 * the static checks never see its bg-white. It paints over a --ark-paper page on a phone. */
html:not(.dark) .myst-primary-sidebar-pointer {
  background-color: var(--ark-paper);
}

/* book-theme prints the menu button whether or not a page has a table of contents, so a page
 * without one opened a 281px drawer holding nothing at all. Hidden where the drawer has no link
 * to offer, which only ever subtracts: the theme keeps deciding the widths the button appears at. */
@supports selector(:has(a)) {
  body:not(:has(.myst-primary-sidebar-nav a)) .myst-top-nav-menu-button {
    display: none;
  }
}

html:not(.dark) .myst-jp-nb-block > div.bg-white {
  background-color: var(--ark-paper);
}

/* Theorems and proofs, run against a blue edge rather than the theme's banded box */
article.article :is(aside, details).myst-proof {
  background: transparent;
  border-left: 2px solid var(--ark-blue);
  border-radius: 0;
  box-shadow: none;
}

article.article .myst-proof-header {
  background: transparent;
  border: 0;
  padding-bottom: 0;
}

/* The statement follows its label, as it runs on from the label in the PDF */
article.article .myst-proof-body > :first-child {
  margin-top: 0.3em;
}

article.article .myst-proof-title {
  font-family: var(--ark-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ark-blue);
}

/* Admonitions, against a rule in the palette rather than a filled box, as in the PDF. MyST's ten
 * kinds take four colours: the brand blue, then three of the logo curves. Specificity stays at one
 * class here so the per-kind colours below, which tie with it, keep winning on source order. */
:is(aside, details).myst-admonition {
  --ark-admonition: var(--ark-blue);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--ark-admonition);
  border-radius: 0;
  box-shadow: none;
}

/* Under html.dark the theme refills the box and puts the shadow back, both at two classes, which
 * outranks the rule above. The twin carries an ancestor, so it clears them and leaves colour be. */
html.dark :is(aside, details).myst-admonition {
  background: transparent;
  box-shadow: none;
}

:is(aside, details).myst-admonition-tip,
:is(aside, details).myst-admonition-hint,
:is(aside, details).myst-admonition-seealso {
  --ark-admonition: var(--ark-curve-4);
}

:is(aside, details).myst-admonition-attention,
:is(aside, details).myst-admonition-caution,
:is(aside, details).myst-admonition-warning {
  --ark-admonition: var(--ark-curve-1);
}

:is(aside, details).myst-admonition-danger,
:is(aside, details).myst-admonition-error {
  --ark-admonition: var(--ark-curve-2);
}

:is(aside, details).myst-admonition .myst-admonition-header,
:is(aside, details).myst-admonition .myst-admonition-header-text,
:is(aside, details).myst-admonition .myst-admonition-header-icon {
  background: transparent;
  border: 0;
  padding-bottom: 0;
  font-family: var(--ark-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ark-admonition);
}

:is(aside, details).myst-admonition .myst-admonition-body > :first-child {
  margin-top: 0.3em;
}

/* A quotation takes the admonition's rule in grey, so it reads a step quieter, as in the PDF */
article.article blockquote {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--ark-rule);
  border-radius: 0;
  padding: 0 0 0 0.9em;
  font-style: normal;
}

/* Definition lists run the term into its definition in the margin's label style, as in the PDF. The
 * theme sets dt and dd as blocks, so the run-in is rebuilt here: inline both, then a dd::after
 * carries the gap that the lost block margin used to give. */
article.article dl dt {
  display: inline;
  font-family: var(--ark-sans);
  font-weight: 500;
  color: var(--ark-blue);
}

article.article dl dt::after {
  content: "\2002";
}

article.article dl dd {
  display: inline;
  margin: 0;
}

article.article dl dd::after {
  content: "";
  display: block;
  margin-bottom: 0.7em;
}

/* Back matter: acknowledgments and the rest, then the footnotes and the references */
article.article .myst-backmatter-title,
.myst-footnotes-header,
.myst-bibliography-header {
  font-family: var(--ark-sans);
  color: var(--ark-blue);
  /* The theme asks for 600, which this family has no face for and the browser rounds up to Bold,
     leaving these headings heavier than the Medium section headings above them */
  font-weight: 500;
}

.myst-footnotes {
  font-family: var(--ark-serif);
  font-size: 0.87rem;
  color: var(--ark-ink);
}

.myst-bibliography-list {
  font-family: var(--ark-serif);
  font-size: 0.87rem;
  color: var(--ark-ink);
}

.myst-footnotes-header,
.myst-bibliography-header,
.myst-footnotes hr,
.myst-bibliography hr {
  border-color: var(--ark-rule);
}

/* MyST's `summary` part. The theme hardcodes "Plain Language Summary", which, like the PDF's old
 * "Non-technical", tells a reader they are the one needing it simplified; both now say "Summary".
 * check-examples.sh fails if the id this hangs on stops being written. */
article.article h2#summary {
  font-size: 0;
}

article.article h2#summary::before {
  content: "Summary";
  font-size: var(--ark-fm-label);
}

article.article h2#summary > a {
  font-size: var(--ark-fm-label);
}

/* MyST's `declaration` part, which the theme gives no backmatter slot and so leaves as a bare
 * paragraph. plugins/part-wrapper.mjs writes the class; the rules below reproduce the theme's own
 * backmatter row. check-examples.sh fails if the class stops being written. */
article.article .ark-part-declaration {
  display: grid;
  width: 100%;
}

article.article .ark-part-declaration::before {
  content: "Declarations";
  align-self: flex-start;
  font-family: var(--ark-sans);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: var(--ark-blue);
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

/* A grid rather than a row of flex items, because the part holds however many paragraphs the
 * declarations need, each a child of this div. As flex items they became columns beside the label,
 * touching, and each column read correctly on its own, which is what hid the bug. */
@media (min-width: 768px) {
  article.article .ark-part-declaration {
    grid-template-columns: 200px 1fr;
  }

  article.article .ark-part-declaration::before {
    grid-column: 1;
    grid-row: 1;
    width: 200px;
  }

  article.article .ark-part-declaration > * {
    grid-column: 2;
  }
}

/* MyST's `dedication` and `epigraph`, two more parts the theme leaves as body text. The PDF centres
 * the one and sets the other in from the right; these do the same so a reader meets them the same
 * way in both. plugins/part-wrapper.mjs writes both classes. */
article.article .ark-part-dedication {
  margin: 1.5rem 0;
  text-align: center;
  font-style: italic;
}

article.article .ark-part-epigraph {
  margin: 1.5rem 0 1.5rem auto;
  max-width: 72%;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ark-grey);
}

/* With no logo_text set, the theme puts "Made with MyST" in the home link, hidden from the page and
 * read aloud, where the logo's alt text already names the site. A site that does set logo_text
 * renders the same span without the class, so that text goes on showing. */
.myst-home-link > span.sr-only {
  display: none;
}

/* The Econ-ARK lockup is wide, four to one, so at the theme's own h-9 it takes 144px of a phone's
 * header; with the search box, theme toggle and action menu beside it, the row missed 375px and
 * the page scrolled sideways by 39px. The header holds one line, so the mark shrinks. */
@media (max-width: 30rem) {
  .myst-home-link-logo img {
    height: 1.6rem;
  }

  /* The heading stays centred; the paragraph under it does not. Centred body copy runs to five
     ragged lines at this width, and a reader loses the left edge between them. */
  article.article .ark-hero p {
    text-align: left;
  }
}

/* Landing pages, which book-theme renders from `+++ { "kind": ... }` blocks. The blocks arrive with
 * Tailwind colours of their own, so the rules below put them in the house palette. article-theme
 * carries no landing renderers, which is why the landing site is on book-theme. */
/* The hero: brand field with copy over it. col-screen makes it full bleed, and the artwork fills
 * the box behind the copy, taking no flow space. --ark-hero-image repoints it; the default wants
 * banner.svg at the site root. */
article.article .ark-hero {
  position: relative;
  background: var(--ark-banner-field);
  overflow: hidden;
}

/* The five values below are what article-theme gives a paper's banner, read off its own
 * .myst-article-header-background: the file at full strength, stretched to the box rather than
 * covering it, which is what preserveAspectRatio="none" in banner.svg is for. */
article.article .ark-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ark-hero-image) no-repeat center / 100% 100%;
}

/* On a phone the copy panel runs the full width, so artwork stretched over the whole hero hides its
 * curves behind the copy and leaves the strips above and below it on the empty corners of the file.
 * Banded at the top, the fan reads above the panel and through its upper edge. */
@media (max-width: 48rem) {
  article.article .ark-hero::before {
    bottom: auto;
    height: clamp(9rem, 40vw, 14rem);
  }
}

/* The copy sits in the card article-theme lays over that banner, down to its alpha, its blur and
 * its square corners, so a landing and a paper meet a reader the same way. It also gives the copy
 * a measure, which a full-bleed block otherwise runs the screen's width. */
article.article .ark-hero .myst-landing-centered-inner {
  position: relative;
  max-width: 46rem;
  margin: 3rem auto;
  padding: 2.5rem 2rem;
  background-color: rgb(from var(--ark-paper) r g b / 0.8);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
}

/* The four curves close the hero the way they close a title block in the PDF */
article.article .ark-hero::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--ark-curve-rule);
}

/* The hero headline needs rank. MyST demotes a landing's `#` to an h2, so without this rule it
 * opened the page at section size, a ratio of 1.00. The landing is a second register by choice:
 * 600 and negative tracking against the paper's 500 and none, for a reader still deciding. */
article.article .ark-hero h1,
article.article .ark-hero h2 {
  color: var(--ark-blue);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.6em;
}

/* A card written with a `^^^` separator renders as a header and a body, and the theme gives the
 * header a grey fill, a bottom rule, and 12px of left padding against the body's 16px; together
 * they read as two stacked boxes. The fill and rule come off and the padding lines up. */
article.article .myst-card-header {
  background: transparent;
  border-bottom: 0;
  padding: 1rem 1rem 0.35rem;
}

article.article .myst-card-body {
  padding: 0 1rem 1rem;
}

/* The body's first paragraph keeps a 21px top margin it inherits from running prose, which reopens
 * the gap the header fix just closed. Inside a card the title and the sentence under it are one
 * unit. */
article.article .myst-card-body > p:first-child {
  margin-top: 0.3rem;
}

/* The article grid holds a 208px column for the outline whether a page shows one or not, so a
 * landing that hides it left every section pinned left of an empty gutter while the hero, which
 * spans screen, stayed centred. On screen with a measure of its own, a section shares that axis. */
article.article .ark-section {
  grid-column: screen;
  max-width: 62rem;
  margin-inline: auto;
  /* The screen column runs to the viewport edge, where body-outset carried gutters of its own */
  padding-inline: 1rem;
}

/* A page whose title block is hidden still spends h1 and h2 on the title and hero, so a `##`
 * section arrives as h3 at 17.9px against 16.8px body text, legible only as bold. A landing opts
 * in with `ark-section` for the size, leaving h3 in an ordinary article at what its level earns. */
article.article .ark-section h3 {
  font-family: var(--ark-sans);
  /* The hero heading is itself clamped, and at 375px it lands on 30.4px. A flat 1.7rem section
   * heading came to 27.2px there, so the page had two sizes that read as one. This tracks it. */
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ark-blue);
  margin-bottom: 0.4rem;
  /* A landing block carries no padding of its own, so this margin is the only thing holding one
   * section off the last, and zeroing it sat the first heading on the hero's bottom edge at exactly
   * 703px to 703px. */
  margin-top: 3rem;
}

/* The hero is a full-bleed field of colour rather than a paragraph, and a section heading needs
 * more room to clear one than it does to clear a row of cards. */
article.article .ark-hero + .ark-section h3 {
  margin-top: 4.5rem;
}

/* A landing section is laid out for its cards, which want the outset width, and its standfirst
 * inherited it: 94 characters against the 87 a notebook paragraph reads at. The cards keep the
 * outset width, the sentence under the heading takes the measure of the prose it introduces. */
article.article .ark-section > p {
  max-width: 42.4rem;
}

/* The theme wraps heading text in its own span and sets size and colour there, so the rule above
 * reaches the box and not the letters without this. */
article.article .ark-section h3 .heading-text {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Two rows of cards on one page say two different things: the first a sequence that builds, the
 * second a set of parallel ways in. One box for both read as a single grid, so the steps take a
 * counter in the curve colours and the ways in trade the box for a rule in the same four. */
article.article .ark-steps .myst-card {
  counter-increment: ark-step;
  position: relative;
  padding-left: 2.2rem;
}

article.article .ark-steps {
  counter-reset: ark-step;
}

/* The four curve colours are chart fills: a numeral set in them measured amber at 1.73 to 1, cyan
 * at 2.38 and green at 2.51, three of four under the 3 to 1 a numeral this size is held to. Each
 * now fills a disc with the numeral near-black on top, 5.2 to 1 at worst and 11.3 at best. */
article.article .ark-steps .myst-card::before {
  content: counter(ark-step);
  position: absolute;
  left: 1rem;
  top: 0.85rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--ark-curve-1);
  font-family: var(--ark-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ark-on-curve);
}

/* By type, since hovering a card makes Remix inject prefetch links between the cards, moving every
 * nth-child match and repainting the other three discs. A card is an anchor and those nodes are
 * not, so nth-of-type holds. The numerals held throughout, a counter. docs/known-gaps.md. */
article.article .ark-steps .myst-card:nth-of-type(2)::before {
  background: var(--ark-curve-2);
}
article.article .ark-steps .myst-card:nth-of-type(3)::before {
  background: var(--ark-curve-3);
}
article.article .ark-steps .myst-card:nth-of-type(4)::before {
  background: var(--ark-curve-4);
}

article.article .ark-ways .myst-card {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-top: 3px solid var(--ark-curve-1);
  border-radius: 0;
}

/* By type, for the reason the step discs are. */
article.article .ark-ways .myst-card:nth-of-type(2) {
  border-top-color: var(--ark-curve-2);
}
article.article .ark-ways .myst-card:nth-of-type(3) {
  border-top-color: var(--ark-curve-3);
}
article.article .ark-ways .myst-card:nth-of-type(4) {
  border-top-color: var(--ark-curve-4);
}

article.article .ark-hero p {
  color: var(--ark-ink);
}

/* The fill, from --myst-color-primary above, which the theme now reads for itself. Its own white
 * label sits on this: the field colour carries that at about nine to one, where the theme's old
 * blue-500 carried 3.68. The selector list is the theme's, so this ties and wins on order. */
a.button,
button.button,
span.button,
cite.button a {
  background-color: var(--myst-color-primary);

  /* Nested, as the theme nests its own hover. `&` carries the specificity of the widest selector
   * in the list above, cite.button a, so this lands at two classes and two elements and ties the
   * theme's. A flat a.button:hover is one element short and loses however late it loads. */
  &:hover {
    background-color: var(--myst-color-primary-hover);
  }
}

article.article .ark-hero .button {
  border: 1px solid var(--myst-color-primary);
}

/* The general sibling combinator, because the adjacent one does not survive the page: Remix injects
 * a <link rel="prefetch"> between the two buttons when the first is hovered, and `+` stops matching
 * there, flashing this button to the filled brand colour. `~` ties it at the same specificity. */
article.article .ark-hero .button ~ .button {
  background: transparent;
  color: var(--ark-blue);
  border-color: var(--ark-blue);

  /* Nested to carry the four classes above: the transparent fill outranks the theme's own hover
     at two, which left this the one control on the page answering a pointer with nothing. A wash
     rather than a colour, because the card under it flips between the two modes. */
  &:hover {
    background: rgb(from var(--ark-blue) r g b / 0.12);
  }
}

/* The card has to follow the theme, because the ink on it does: --ark-paper holds one colour in
 * both modes while --ark-ink and --ark-blue each flip, so leaving the card alone put pale text on
 * a near-white ground at about 1.1 to 1 once the page went dark. The field behind is the art's. */
html.dark article.article .ark-hero .myst-landing-centered-inner {
  background-color: rgb(from var(--ark-tint) r g b / 0.9);
}

.myst-landing-block h1,
.myst-landing-block h2 {
  font-family: var(--ark-sans);
  color: var(--ark-blue);
  letter-spacing: -0.01em;
}

/* The eyebrow above a heading, which the block sets from the paragraph before it. The theme sets
 * it uppercase; tracking it out on top of that is the house style of every generated page, so the
 * case comes back off here and the word sits in the sentence case it was written in. */
.myst-landing-centered-subtitle,
.myst-landing-split-img-subtitle {
  font-family: var(--ark-sans);
  font-weight: 500;
  text-transform: none;
}

/* Only the centered variant: the split panel below sets a colour on every p inside it, at one
 * class and one element, which any colour named here would lose to. */
.myst-landing-centered-subtitle {
  color: var(--ark-grey);
}

/* The split panel ships as bg-stone-900, and the reading colour set on article.article lands inside
 * it, leaving near-black text on a near-black ground; both are set here instead. */
.myst-landing-split-img {
  background: var(--ark-blue);
}

.myst-landing-split-img-content,
.myst-landing-split-img-content h1,
.myst-landing-split-img-content h2,
.myst-landing-split-img-content p {
  color: var(--ark-paper);
}

/* Cyan on this field is 3.79 to 1, under the 4.5 body text needs, so it moves to the underline,
 * where the 3 to 1 for a non-text mark is the bar it has to clear. The label reads at 9 to 1 and
 * the link stays marked by more than its colour. */
.myst-landing-split-img-content a {
  color: var(--ark-paper);
  text-decoration: underline;
  text-decoration-color: var(--ark-curve-3);
  text-underline-offset: 0.15em;
}

/* The links that stand in for the buttons, since mystmd attaches no class to a link */
.myst-landing-block a {
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/*
 * The one rule this repository adds to the copied Econ-ARK sheet. The faces used to be declared
 * here too; theme.css now ships its own @font-face rules over the woff2 files in content/fonts,
 * so a second set for the same family would only fight it in the cascade.
 *
 * code/theme.py writes content/theme/site.css from theme.css and this file, because MyST's
 * style: option takes one path. This goes second, so it wins.
 */

/* A quiz is a page of its own in an iframe, which MyST sizes to a fixed aspect ratio. Give it
   the height its questions and chart need. The selector matched one paper's quiz by name until
   2026-09-18, which named that page in a sheet every cut carries. */
div:has(> iframe[src$="-quiz.html"]) {
  padding-bottom: 0 !important;
  height: 960px;
}