/*
 * Opened articles: a quiet scholarly field note on the existing Lokta sheet.
 * This file is intentionally scoped to article pages; it must not establish a
 * second page frame, global navigation system, or environmental layer.
 */

.single.blog {
  /* The centered measure and left rail resolve against the theme's 992 px
   * paper. Their combined geometry remains inside the paper at the rail
   * breakpoint, leaving a real gutter rather than borrowing from prose. At
   * wide sizes the TOC text lands on the title inset while marginalia remains
   * free to pass beyond the right crop mark. */
  --article-measure: 36rem;
  --article-breakout: 42rem;
  --article-rail-width: 8.25rem;
  /* With the narrower prose measure, a 2.25 rem interval registers the rail's
   * left edge exactly with the title/crop inset and leaves the same quiet
   * interval between the outline and right-growing technical matter. */
  --article-rail-gap: 2.25rem;
  --article-note-width: clamp(13.25rem, calc(50vw - 23.25rem), 16.5rem);
  --article-marginal-gap: 2.6rem;
  --article-note-offset: calc(var(--article-note-width) + var(--article-marginal-gap));
  --article-ink: #202622;
  --article-green: #173d31;
  --article-blue: #173f51;
  --article-wine: #6f3b3f;
  --article-muted: rgba(32, 38, 34, 0.62);
  --article-faint: rgba(32, 38, 34, 0.42);
  --article-quiet-ink: rgba(32, 38, 34, 0.72);
  --article-rule: rgba(83, 76, 95, 0.28);
  --article-rule-strong: rgba(78, 71, 88, 0.42);
  --article-block: rgba(233, 221, 207, 0.34);
  --article-block-strong: rgba(224, 208, 194, 0.48);
  --article-code-ink: #23322d;
  --article-dropcap-ink: #173d31;
  --article-dropcap-ornament: rgba(111, 59, 63, 0.32);
  --article-focus-paper: rgba(245, 242, 232, 0.965);
  --article-focus-backdrop: rgba(24, 31, 27, 0.56);
}

.single.blog.sunset {
  --article-ink: #20231f;
  --article-green: #213d2f;
  --article-blue: #253f48;
  --article-wine: #704044;
  --article-muted: rgba(32, 35, 31, 0.64);
  --article-faint: rgba(32, 35, 31, 0.44);
  --article-quiet-ink: rgba(32, 35, 31, 0.74);
  --article-rule: rgba(92, 72, 72, 0.3);
  --article-rule-strong: rgba(92, 72, 72, 0.44);
  --article-block: rgba(217, 190, 151, 0.25);
  --article-block-strong: rgba(202, 174, 139, 0.34);
  --article-code-ink: #292d26;
  --article-dropcap-ink: #263d30;
  --article-dropcap-ornament: rgba(112, 64, 68, 0.22);
  --article-focus-paper: rgba(231, 211, 178, 0.955);
  --article-focus-backdrop: rgba(28, 31, 24, 0.58);
}

/* The environmental sheet and the reading matter must be sibling paint
 * planes. With the scene at a negative z-index behind a transparent root,
 * Chromium can fold both into one large raster surface and checkerboard the
 * type during a fast fling. These explicit planes change no visible stacking. */
.single.blog #sunlit-scene {
  z-index: 0;
}

.single.blog .nav-top,
.single.blog .article-shell,
.single.blog footer {
  position: relative;
  z-index: 1;
}

.single.blog .crop-h,
.single.blog .crop-v,
.single.blog .crop-c {
  z-index: 2;
}

.single.blog .article-shell {
  flex-grow: 1;
  color: var(--article-ink);
}

.single.blog .article-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  z-index: 1000;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--article-rule-strong);
  background: var(--article-focus-paper);
  color: var(--article-blue);
  font-family: Jost, sans-serif;
  font-size: 0.76rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -150%);
}

.single.blog .article-skip-link:focus {
  opacity: 1;
  outline: 1px solid var(--article-wine);
  outline-offset: 0.14rem;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.single.blog .article-prose-start {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  scroll-margin-top: 1rem;
}

.single.blog .article-prose-start:focus {
  outline: none;
}

.single.blog .article-header.article-meta {
  margin: clamp(1.8rem, 4vw, 3.2rem) 0 2.2rem;
  padding: 0;
  border: 0;
}

.single.blog .article-title.title {
  max-width: 27ch;
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 2.6rem);
  font-weight: normal;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.single.blog .article-title.title::before {
  top: -0.43em;
  left: -0.17em;
  font-size: 6.6em;
  line-height: 1;
  opacity: 0.055;
}

.single.blog .article-subtitle.subtitle {
  max-width: 50ch;
  margin: 0.65rem 0 0;
  color: var(--article-muted);
  font-size: clamp(1.08rem, 2vw, 1.22rem);
  font-style: italic;
  font-weight: normal;
  line-height: 1.35;
  text-wrap: pretty;
}

.single.blog .article-date {
  margin: 0.9rem 0 0;
  color: var(--article-muted);
  font-family: Jost, sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.025em;
  font-variant-numeric: oldstyle-nums;
}

.single.blog .article-body {
  position: relative;
  width: min(100%, var(--article-measure));
  margin-right: auto;
  margin-left: auto;
  padding-top: 0;
  /* Sidenotes are numbered by their rendered order, so they keep a CSS counter
     that works before and without JavaScript. Equations and statements take
     their section-scoped labels from the build and need no counter. */
  counter-reset: sidenote;
  font-size: 1.055rem;
  line-height: 1.61;
}

.single.blog .article-body > p:first-of-type {
  font-size: 1.08rem;
  line-height: 1.59;
}

/* A two-ink opening initial. The foreground letter remains real text; the
 * aria-hidden ornamental layer sits behind it and stays out of copy or speech.
 * Its painted square and its three-line float exclusion are separate pieces of
 * geometry: the former stays registered to the first line while the latter
 * reserves exactly three lines of the invariant opening prose. This avoids a
 * transformed float and a second, conflicting mobile calibration. */
.single.blog .article-body > p:first-of-type:has(> .article-dropcap:first-child) {
  margin-top: 0;
}

/* The opening initial is the EB Garamond Initials pair used as designed: F1 is a
 * floral ground with no letter in it, F2 is the letter. The ground is sized to
 * the three-line block and the letter nests inside it, so the floral reads as a
 * frame rather than as texture behind the ink.
 *
 * The ground's ink spans from the TOP OF THE TALLEST INK ON THE FIRST LINE to
 * the third line's baseline.
 *
 * All the constants below are read from the font binaries with fontTools, not
 * from canvas measurement: `TextMetrics.fontBoundingBox*` reports 0.900/0.250
 * for these faces, which is neither their hhea nor their OS/2 metric, and
 * trusting it put the square 12.5px low. Take glyph extents from the font.
 *
 *   F1 'T'     ink y +0.0050..+0.9950 (0.9900 tall), advance 1.0000em
 *   F2 'T'     ink y +0.0800..+0.8950 (0.8150 tall), ink x +0.1190..+0.9000,
 *              advance 1.0060em
 *   Linden Hill  ascender ink 0.7261em ('h', 'l'), the tallest on a normal line
 *
 * The two SIZES are derived; the two TOP offsets are calibrated against the
 * rendered page and must not be recomputed from font metrics. Where the baseline
 * sits inside a line-height:1 box is not predictable for these faces: canvas
 * reports ascent/descent 0.900/0.250 (which implies 0.825em), the binaries
 * declare hhea 1.000/-0.014 (which implies 0.993em), and a metric-free strut
 * probe in the laid-out page measures 0.810em. Only the last one is what the
 * browser actually does, so measure it, do not derive it.
 *
 * Measured from the laid-out page with Range rectangles over plain prose, all
 * relative to the float's top edge:
 *
 *   first baseline   18.500px
 *   third baseline   73.453px          (3 x 27.4752 leading)
 *   tallest ink top  18.500 - 12.547   =  5.953px
 *   square side      73.453 - 5.953    = 67.500px
 *
 * ground em          67.500 / 0.9900   = 68.1818px -> 4.2614rem
 * letter ink         0.77 x 67.500     = 51.975px
 * letter em          51.975 / 0.8150   = 63.7730px -> 3.9858rem
 * letter band        (67.500 - 51.975) / 2           =  7.7625px above and below
 *
 * ground top         calibrated to 19.2396px -> 1.2025rem
 * letter top         calibrated to 19.7954px -> 1.2372rem
 *
 * The ground's ink begins 0.341px inside the float, so the float takes no
 * negative left margin: a hard-edged square must register with the measure,
 * where a letter's side bearings would have absorbed a small hang.
 *
 * Re-derive all four numbers if the opening's size or leading changes. Measure
 * the page rather than assuming a grid, and take font extents from the binary:
 * the leading is only even because sup and sub are kept out of the line box. */
.single.blog .article-dropcap {
  --article-dropcap-size: 4.2614rem;
  --article-dropcap-top: 1.2025rem;
  --article-dropcap-letter-size: 3.9858rem;
  --article-dropcap-letter-top: 1.2372rem;
  /* Three lines at the opening's 1.08rem size and 1.59 leading. */
  --article-dropcap-exclusion: 5.1516rem;
  position: relative;
  float: left;
  display: block;
  width: var(--article-dropcap-size);
  height: var(--article-dropcap-exclusion);
  margin: 0 0.44rem 0 0;
  color: var(--article-dropcap-ink);
  line-height: 1;
  text-align: center;
  user-select: text;
}

/* Both layers hang from the float's top edge and centre in its width. Only their
   size and offset differ, and each is derived above. */
.single.blog .article-dropcap-ornament,
.single.blog .article-dropcap-letter {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: uppercase;
}

.single.blog .article-dropcap-ornament {
  top: var(--article-dropcap-top);
  color: var(--article-dropcap-ornament);
  font-family: "EB Garamond Initials F1", serif;
  font-size: var(--article-dropcap-size);
  pointer-events: none;
  user-select: none;
}

.single.blog .article-dropcap-ornament::before {
  content: attr(data-letter);
}

.single.blog .article-dropcap-letter {
  top: var(--article-dropcap-letter-top);
  color: inherit;
  font-family: "EB Garamond Initials F2", "Linden Hill", Palatino, serif;
  font-size: var(--article-dropcap-letter-size);
}

.single.blog .article-body p {
  margin: 0.9em 0;
  text-wrap: pretty;
}

/* A reference mark must not open the leading of the line that carries it.
 * `vertical-align: super` raises the whole inline box, and its line-height then
 * pushes that line apart from its neighbours: a paragraph with one footnote was
 * measuring 30.2px between two baselines where the rest of the page measured
 * 27.5px. A zero line-height with an explicit offset keeps the grid even. The
 * sidenote markers already worked this way; ordinary Markdown footnotes did not. */
.single.blog .article-body :is(sup, sub) {
  position: relative;
  line-height: 0;
  vertical-align: baseline;
}

.single.blog .article-body sup {
  top: -0.435em;
}

.single.blog .article-body sub {
  bottom: -0.2em;
}

.single.blog .article-body h2,
.single.blog .article-body h3,
.single.blog .article-body h4,
.single.blog .article-body h5,
.single.blog .article-body h6 {
  position: relative;
  scroll-margin-top: 1.5rem;
  text-wrap: balance;
}

.single.blog .article-body h2 {
  margin: 2.55rem 0 0.82rem;
  padding: 0;
  border: 0;
  color: var(--article-green);
  font-size: clamp(1.35rem, 2.4vw, 1.55rem);
  font-weight: normal;
  line-height: 1.25;
}

.single.blog .article-body h3 {
  margin: 2.15rem 0 0.82rem;
  color: var(--article-blue);
  font-size: 1.08rem;
  font-variant: small-caps;
  font-weight: normal;
  letter-spacing: 0.055em;
  line-height: 1.35;
  text-align: center;
}

.single.blog .article-body h4 {
  margin: 1.9rem 0 0.68rem;
  color: var(--article-green);
  font-size: 1rem;
  font-style: italic;
  font-weight: normal;
}

/* The article's deepest authored heading sets the visual range. Notes with
 * only major sections can spend more size on h2. Deeper notes preserve room
 * for h3 and h4 instead of making every level compete at display size. */
.single.blog .article-depth-2 .article-body h2 {
  margin-top: 2.85rem;
  margin-bottom: 0.9rem;
  font-size: clamp(1.48rem, 2.65vw, 1.7rem);
  letter-spacing: -0.008em;
  line-height: 1.2;
}

.single.blog :is(.article-depth-4, .article-depth-5, .article-depth-6) .article-body h2 {
  font-size: clamp(1.3rem, 2.25vw, 1.48rem);
}

.single.blog :is(.article-depth-4, .article-depth-5, .article-depth-6) .article-body h3 {
  margin-top: 1.95rem;
  font-size: 1.03rem;
}

.single.blog :is(.article-depth-5, .article-depth-6) .article-body h4 {
  font-size: 0.96rem;
}

.single.blog .section-anchor {
  position: absolute;
  right: calc(100% + 0.48rem);
  width: 1em;
  border: 0;
  color: var(--article-wine);
  font-family: Jost, sans-serif;
  font-size: 0.72em;
  font-style: normal;
  font-variant: normal;
  line-height: 1.75;
  opacity: 0;
  text-align: right;
  transform: none;
  transition: opacity 120ms ease;
}

.single.blog .article-body h2:hover > .section-anchor,
.single.blog .article-body h3:hover > .section-anchor,
.single.blog .article-body h4:hover > .section-anchor,
.single.blog .article-body h5:hover > .section-anchor,
.single.blog .article-body h6:hover > .section-anchor,
.single.blog .section-anchor:focus-visible {
  opacity: 0.72;
}

.single.blog .section-anchor:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.18rem;
}

.single.blog .article-contents {
  margin: 0.35rem 0 2.15rem;
  padding: 0.58rem 0 0.68rem;
  border-top: 1px solid var(--article-rule);
  border-bottom: 1px solid var(--article-rule);
  background: transparent;
}

.single.blog .article-contents summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 0.8rem;
  align-items: center;
  gap: 0.62rem;
  color: var(--article-green);
  cursor: pointer;
  font-family: Jost, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  list-style: none;
  text-transform: uppercase;
}

.single.blog .article-contents summary::-webkit-details-marker {
  display: none;
}

.single.blog .article-contents summary:focus {
  outline: none;
}

.single.blog .article-contents summary:focus-visible {
  outline: 1px solid var(--article-wine);
  outline-offset: 0.22rem;
}

.single.blog .article-contents-count {
  color: var(--article-faint);
  font-size: 0.86em;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0.055em;
  text-transform: lowercase;
}

.single.blog .article-contents-disclosure {
  position: relative;
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  color: var(--article-wine);
}

.single.blog .article-contents-disclosure::before,
.single.blog .article-contents-disclosure::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 1px solid currentColor;
  content: "";
  transform-origin: center;
  transition: transform 120ms ease;
}

.single.blog .article-contents-disclosure::after {
  transform: rotate(90deg);
}

.single.blog .article-contents[open] .article-contents-disclosure::after {
  transform: rotate(90deg) scaleX(0);
}

.single.blog .article-contents-return {
  display: none;
}

/* The reading rule is now the register's Trace: a graduated scale with a
   travelling index and a figure in the machine voice. It reports and never
   opens, which is why it carries no mark. */
.single.blog .article-contents-progress {
  display: none;
}

.single.blog .article-contents-progress .instrument-trace__index {
  background: var(--article-wine);}

.single.blog .article-contents-trace {
  display: none;
}

.single.blog .article-contents-list {
  padding: 0.68rem 0 0.08rem;
}

.single.blog #TableOfContents {
  padding: 0;
  background: transparent;
}

.single.blog #TableOfContents ul,
.single.blog #TableOfContents > ul,
.single.blog #TableOfContents > ul > li > ul {
  display: block;
  margin: 0;
  padding: 0;
  counter-reset: article-toc;
  list-style: none;
}

.single.blog #TableOfContents ul ul {
  margin: 0.18rem 0 0.32rem 0.92rem;
}

.single.blog #TableOfContents li {
  position: relative;
  margin: 0.22rem 0;
  padding: 0;
  counter-increment: article-toc;
  line-height: 1.4;
}

.single.blog #TableOfContents li::before {
  position: absolute;
  top: 0.2rem;
  left: 0.08rem;
  width: 1.35rem;
  color: var(--article-faint);
  content: counters(article-toc, ".");
  font-family: Jost, sans-serif;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.4;
  text-align: right;
  transition: color 120ms ease;
}

.single.blog #TableOfContents a {
  position: relative;
  display: block;
  padding: 0.1rem 0.72rem 0.1rem 1.72rem;
  border: 0;
  color: var(--article-muted);
  overflow-wrap: break-word;
  text-wrap: pretty;
  transition: color 120ms ease;
}

.single.blog #TableOfContents a::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.48rem;
  border-top: 1px solid var(--article-wine);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right center;
  transition: opacity 120ms ease, transform 120ms ease;
}

.single.blog #TableOfContents a:hover,
.single.blog #TableOfContents a:focus-visible {
  color: var(--article-blue);
}

.single.blog #TableOfContents a:hover::after,
.single.blog #TableOfContents a:focus-visible::after {
  opacity: 0.48;
  transform: scaleX(1);
}

.single.blog #TableOfContents li.is-current-branch::before {
  color: var(--article-wine);
}

.single.blog #TableOfContents li.is-current-branch > a {
  color: var(--article-green);
}

.single.blog #TableOfContents a.is-current,
.single.blog #TableOfContents a[aria-current="location"] {
  color: var(--article-green);
}

.single.blog #TableOfContents a.is-current::after,
.single.blog #TableOfContents a[aria-current="location"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.single.blog #TableOfContents > ul > li > a {
  color: var(--article-green);
  font-variant: small-caps;
  letter-spacing: 0.02em;
}

.single.blog #TableOfContents ul ul a {
  color: var(--article-muted);
  font-size: 0.94em;
}

@media (prefers-reduced-motion: reduce) {
  .single.blog #TableOfContents a,
  .single.blog #TableOfContents a::after,
  .single.blog #TableOfContents li::before,
  .single.blog .article-contents-disclosure::before,
  .single.blog .article-contents-disclosure::after,
  .single.blog .article-contents-return,
  .single.blog .sidenote-ref,
  .single.blog .sidenote,
  .single.blog .article-link-mark {
    transition: none;
  }
}

/* Explicit Tufte-style sidenotes. They occupy the right margin only when the
 * viewport can carry marginalia without narrowing or covering the prose. */

.single.blog .sidenote-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
}

.single.blog .sidenote-ref {
  position: relative;
  counter-increment: sidenote;
  margin-left: 0.08em;
  border: 0;
  color: var(--article-wine);
  font-family: Jost, sans-serif;
  font-size: 0.68em;
  font-style: normal;
  font-variant-numeric: oldstyle-nums;
  line-height: 0;
  vertical-align: super;
  cursor: pointer;
  transition: color 120ms ease, opacity 120ms ease;
}

.single.blog .sidenote-ref-number::before,
.single.blog .sidenote-number::before {
  content: counter(sidenote);
}

.single.blog .sidenote-ref-number[data-number-ready="true"]::before,
.single.blog .sidenote-number[data-number-ready="true"]::before {
  content: none;
}

.single.blog .sidenote-toggle:focus-visible + .sidenote-ref {
  outline: 1px solid currentColor;
  outline-offset: 0.18rem;
}

.single.blog .sidenote {
  position: relative;
  display: none;
  width: calc(100% - 1.25rem);
  margin: 0.9rem 0 1.1rem 1.25rem;
  padding: 0.06rem 0 0.06rem 1rem;
  border-left: 1px solid var(--article-rule-strong);
  background: transparent;
  color: var(--article-muted);
  font-family: inherit;
  font-size: 0.86rem;
  font-style: normal;
  line-height: 1.48;
  letter-spacing: 0;
  text-wrap: pretty;
  transition: color 140ms ease, opacity 140ms ease;
}

.single.blog .sidenote-ref.is-corresponding {
  color: var(--article-green);
}

.single.blog .sidenote.is-corresponding {
  color: var(--article-ink);
}

.single.blog .sidenote-toggle:checked + .sidenote-ref + .sidenote {
  display: block;
}

.single.blog .sidenote-number {
  position: absolute;
  top: 0.02rem;
  right: calc(100% + 0.45rem);
  margin: 0;
  color: var(--article-wine);
  font-family: Jost, sans-serif;
  font-size: 0.78em;
  font-variant-numeric: oldstyle-nums;
  line-height: 1.2;
}

/* Reading vocabulary */

.single.blog .article-body ::selection {
  background: rgba(143, 58, 65, 0.18);
}

.single.blog .article-body a:focus-visible,
.single.blog .article-end-link:focus-visible {
  outline: 1px solid var(--article-blue);
  outline-offset: 0.2rem;
}

/* A deliberately small link grammar. Marks describe academic formats and
 * same-page movement; ordinary external links remain ordinary prose links. */
.single.blog .article-link-mark {
  display: inline-block;
  margin-left: 0.28em;
  border: 0;
  color: var(--article-faint);
  font-family: Jost, sans-serif;
  font-size: 0.56em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: 0.045em;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  vertical-align: 0.38em;
  white-space: nowrap;
  opacity: 0.78;
  transition: color 120ms ease, opacity 120ms ease;
}

.single.blog .article-link:hover .article-link-mark,
.single.blog .article-link:focus-visible .article-link-mark {
  color: var(--article-wine);
  opacity: 1;
}

.single.blog .article-link--section .article-link-mark {
  margin-left: 0.22em;
  color: var(--article-wine);
  font-size: 0.64em;
  letter-spacing: 0;
  opacity: 0.66;
}

.single.blog .article-link-kind-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.single.blog #TableOfContents .article-link-mark,
.single.blog #TableOfContents .article-link-kind-sr {
  display: none;
}

.single.blog .article-body ul,
.single.blog .article-body ol {
  margin: 1.1rem 0;
  padding-left: 1.55rem;
}

.single.blog .article-body li {
  margin: 0.34rem 0;
  padding-left: 0.12rem;
}

.single.blog .article-body li::marker {
  color: var(--article-wine);
  font-variant-numeric: oldstyle-nums;
}

.single.blog .article-body dl {
  margin: 1.45rem 0;
}

.single.blog .article-body dt {
  margin-top: 0.85rem;
  color: var(--article-green);
  font-style: italic;
}

.single.blog .article-body dd {
  margin: 0.2rem 0 0.75rem 1.45rem;
}

.single.blog .article-body blockquote {
  margin: 1.8rem 0 1.8rem 0.2rem;
  padding: 0.18rem 0 0.18rem 1.25rem;
  border-left: 2px solid var(--article-rule-strong);
  background: transparent;
  color: rgba(32, 38, 34, 0.82);
  font-size: 1.045rem;
  font-style: italic;
}

.single.blog.sunset .article-body blockquote {
  color: rgba(32, 35, 31, 0.84);
}

.single.blog .article-body blockquote p {
  margin: 0.6rem 0;
}

.single.blog .article-body blockquote cite,
.single.blog .article-body blockquote footer {
  display: block;
  margin-top: 0.7rem;
  color: var(--article-muted);
  font-family: Jost, sans-serif;
  font-size: 0.76rem;
  font-style: normal;
  letter-spacing: 0.025em;
  text-align: right;
}

/* Epigraphs are opening pauses, not decorated quotation cards. Unequal paired
 * marks hold the quotation without making a symmetrical frame around it. */
.single.blog .article-epigraph {
  position: relative;
  width: min(100%, 29.75rem);
  margin: 0.2rem 0 2.9rem auto;
  padding: 0.25rem 1.2rem 0 1.7rem;
}

.single.blog .article-epigraph blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(32, 38, 34, 0.84);
  font-size: 1.07rem;
  font-style: italic;
  line-height: 1.52;
}

.single.blog.sunset .article-epigraph blockquote {
  color: rgba(32, 35, 31, 0.86);
}

.single.blog .article-epigraph-text {
  position: relative;
}

.single.blog .article-epigraph-mark {
  position: absolute;
  color: var(--article-wine);
  font-family: "Linden Hill", Palatino, serif;
  font-style: normal;
  line-height: 1;
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
}

.single.blog .article-epigraph-mark--open {
  top: -1.08rem;
  left: -0.05rem;
  font-size: 4.9rem;
}

.single.blog .article-epigraph-mark--close {
  right: -1rem;
  bottom: -1.02rem;
  font-size: 3.45rem;
  opacity: 0.12;
}

.single.blog.sunset .article-epigraph-mark {
  opacity: 0.12;
}

.single.blog.sunset .article-epigraph-mark--close {
  opacity: 0.095;
}

.single.blog .article-epigraph-text > :first-child {
  margin-top: 0;
}

.single.blog .article-epigraph-text > :last-child {
  margin-bottom: 0;
}

.single.blog .article-epigraph figcaption {
  margin: 0.72rem 0 0;
  color: var(--article-muted);
  font-family: "Linden Hill", Palatino, serif;
  font-size: 0.84rem;
  line-height: 1.35;
  text-align: right;
}

.single.blog .article-epigraph-dash {
  margin-right: 0.22em;
  color: var(--article-wine);
}

.single.blog .article-epigraph-source {
  font-style: italic;
}

.single.blog .article-body hr {
  width: 7rem;
  margin: 2.8rem auto;
  border: 0;
  border-top: 1px solid var(--article-rule);
}

.single.blog .article-body code,
.single.blog .article-body kbd,
.single.blog .article-body samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.84em;
}

.single.blog .article-body :not(pre) > code {
  padding: 0.08em 0.25em;
  border: 1px solid var(--article-rule);
  background: var(--article-block);
  color: var(--article-code-ink);
  white-space: break-spaces;
}

.single.blog .article-body kbd {
  padding: 0.05em 0.28em;
  border: 1px solid var(--article-rule-strong);
  border-bottom-width: 2px;
  background: rgba(251, 247, 240, 0.45);
}

.single.blog .article-body pre {
  margin-top: 1.45rem;
  margin-bottom: 1.45rem;
  border-block: 1px solid var(--article-rule);
  background: var(--article-block);
  box-shadow: none;
  color: var(--article-code-ink);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  tab-size: 2;
}

.single.blog .article-body pre code,
.single.blog .article-body pre code:hover {
  display: block;
  min-width: max-content;
  padding: 1rem 1.1rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.55;
  white-space: pre;
  word-break: normal;
  overflow: visible;
}

.single.blog .article-body .highlight {
  position: relative;
  margin-top: 1.45rem;
  margin-bottom: 1.45rem;
  border-block: 1px solid var(--article-rule);
  background: var(--article-block);
  color: var(--article-code-ink);
  overflow: hidden;
}

.single.blog .article-body .highlight pre {
  width: auto;
  margin: 0;
  border: 0;
  background: transparent;
}

.single.blog .article-body .highlight pre code,
.single.blog .article-body .highlight pre code:hover {
  padding: 1.85rem 1.1rem 1rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

.single.blog .article-code-tools {
  position: absolute;
  top: 0.43rem;
  right: 0.68rem;
  left: 1.1rem;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--article-faint);
  font-family: Jost, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.single.blog .article-copy-button {
  padding: 0 0 0.12rem;
  border: 0;
  border-bottom: 1px dotted currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--article-muted);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.single.blog .article-copy-button:hover,
.single.blog .article-copy-button:focus-visible,
.single.blog .article-copy-button[data-state="copied"] {
  color: var(--article-blue);
}

.single.blog .article-copy-button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.2rem;
}

/* Quiet server-rendered Chroma palette: ink, moss, wine, and old paper. */
.single.blog .chroma {
  color: var(--article-code-ink);
  background: transparent;
}

.single.blog .chroma .err,
.single.blog .chroma .gr,
.single.blog .chroma .gt {
  color: #8a343d;
}

.single.blog .chroma .c,
.single.blog .chroma .ch,
.single.blog .chroma .cm,
.single.blog .chroma .c1,
.single.blog .chroma .cs,
.single.blog .chroma .cp,
.single.blog .chroma .cpf {
  color: #657465;
  font-style: italic;
}

.single.blog .chroma .k,
.single.blog .chroma .kc,
.single.blog .chroma .kd,
.single.blog .chroma .kn,
.single.blog .chroma .kp,
.single.blog .chroma .kr,
.single.blog .chroma .kt,
.single.blog .chroma .ow {
  color: #743f49;
}

.single.blog .chroma .s,
.single.blog .chroma .sa,
.single.blog .chroma .sb,
.single.blog .chroma .sc,
.single.blog .chroma .dl,
.single.blog .chroma .sd,
.single.blog .chroma .s1,
.single.blog .chroma .s2,
.single.blog .chroma .se,
.single.blog .chroma .sh,
.single.blog .chroma .si,
.single.blog .chroma .sx,
.single.blog .chroma .sr,
.single.blog .chroma .ss {
  color: #765a2f;
}

.single.blog .chroma .m,
.single.blog .chroma .mb,
.single.blog .chroma .mf,
.single.blog .chroma .mh,
.single.blog .chroma .mi,
.single.blog .chroma .il,
.single.blog .chroma .mo {
  color: #4b5e86;
}

.single.blog .chroma .na,
.single.blog .chroma .nb,
.single.blog .chroma .bp,
.single.blog .chroma .nc,
.single.blog .chroma .nd,
.single.blog .chroma .ne,
.single.blog .chroma .nf,
.single.blog .chroma .fm,
.single.blog .chroma .nn,
.single.blog .chroma .nt,
.single.blog .chroma .nv,
.single.blog .chroma .vc,
.single.blog .chroma .vg,
.single.blog .chroma .vi,
.single.blog .chroma .vm {
  color: #235969;
}

.single.blog .chroma .gd {
  color: #8a343d;
  background: rgba(138, 52, 61, 0.08);
}

.single.blog .chroma .gi {
  color: #2d6549;
  background: rgba(45, 101, 73, 0.08);
}

.single.blog .article-body table {
  display: table;
  width: 100%;
  margin: 1.45rem 0 1.65rem;
  border-collapse: collapse;
  border-top: 1px solid var(--article-rule-strong);
  border-bottom: 1px solid var(--article-rule-strong);
  background: transparent;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  table-layout: auto;
}

.single.blog .article-body thead,
.single.blog .article-body tfoot,
.single.blog .article-body tr,
.single.blog .article-body tr:nth-child(even) {
  background: transparent;
}

.single.blog .article-body th {
  border-bottom: 1px solid var(--article-rule-strong);
  color: var(--article-green);
  font-family: Jost, sans-serif;
  font-size: 0.82em;
  font-weight: normal;
  letter-spacing: 0.055em;
  text-align: left;
  text-transform: uppercase;
}

.single.blog .article-body th,
.single.blog .article-body td {
  padding: 0.46rem 0.55rem;
  border-right: 0;
  border-left: 0;
}

.single.blog .article-body tbody tr + tr td {
  border-top: 1px solid rgba(83, 76, 95, 0.14);
}

.single.blog .article-figure {
  margin: 1.85rem auto;
}

.single.blog .article-figure img,
.single.blog .article-media {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.single.blog .article-figure--ink .article-media {
  opacity: 0.93;
  filter: saturate(0.72) contrast(1.06);
  /* Transparent diagrams already expose the paper. A live multiply blend
   * forces the browser to sample the environmental plane while scrolling. */
  mix-blend-mode: normal;
}

.single.blog.sunset .article-figure--ink .article-media {
  opacity: 0.88;
  filter: saturate(0.62) contrast(1.04);
}

.single.blog .article-figure-link {
  display: block;
  border: 0;
}

.single.blog .article-figure-focus-link {
  position: relative;
  display: block;
  border: 0;
  color: inherit;
  cursor: zoom-in;
}

.single.blog .article-figure-focus-link:focus-visible {
  outline: 1px solid var(--article-blue);
  outline-offset: 0.35rem;
}

.single.blog .article-figure figcaption {
  max-width: 58rem;
  margin: 0.65rem auto 0;
  color: var(--article-muted);
  font-family: Jost, sans-serif;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
}

.single.blog .article-figure-title {
  color: var(--article-green);
  letter-spacing: 0.025em;
}

.single.blog .article-figure-title + .article-figure-caption::before {
  content: " — ";
  color: var(--article-faint);
}

.single.blog .article-figure-attribution {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9em;
}

/* One article-local image viewer. The square secondary sheet echoes the page's
 * crop grammar while the translucent veil leaves the environmental light
 * legible behind it. The source image link remains useful without JavaScript. */
.single.blog .article-figure-focus {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(1.25rem, 4vw, 3.5rem);
  border: 0;
  background: transparent;
  color: var(--article-ink);
  overflow: auto;
}

.single.blog .article-figure-focus[open] {
  display: grid;
  place-items: center;
}

.single.blog .article-figure-focus::backdrop {
  background: var(--article-focus-backdrop);
  -webkit-backdrop-filter: blur(5px) saturate(0.72);
  backdrop-filter: blur(5px) saturate(0.72);
}

.single.blog .article-figure-focus-sheet {
  position: relative;
  width: min(100%, 78rem);
  margin: auto;
  padding: clamp(1.2rem, 3vw, 2.5rem);
  background-color: var(--article-focus-paper);
  background-image:
    linear-gradient(var(--article-rule-strong), var(--article-rule-strong)),
    linear-gradient(var(--article-rule-strong), var(--article-rule-strong)),
    linear-gradient(var(--article-rule-strong), var(--article-rule-strong)),
    linear-gradient(var(--article-rule-strong), var(--article-rule-strong)),
    linear-gradient(var(--article-focus-paper), var(--article-focus-paper)),
    url("../textures/lokta-fibres.svg");
  background-position:
    left 1rem top,
    left top 1rem,
    right 1rem bottom,
    right bottom 1rem,
    center,
    center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: 1rem 1px, 1px 1rem, 1rem 1px, 1px 1rem, cover, 340px auto;
  box-shadow: 0 1.6rem 5rem color-mix(in srgb, var(--article-ink) 30%, transparent);
}

.single.blog .article-figure-focus-sheet > figure {
  margin: 0;
}

.single.blog .article-figure-focus-close {
  position: absolute;
  top: 0.62rem;
  right: 0.82rem;
  z-index: 1;
  margin: 0;
}

.single.blog .article-figure-focus-close button {
  padding: 0 0 0.1rem;
  border: 0;
  border-bottom: 1px dotted currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--article-muted);
  font-family: Jost, sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
}

.single.blog .article-figure-focus-close button:hover,
.single.blog .article-figure-focus-close button:focus-visible {
  color: var(--article-blue);
}

.single.blog .article-figure-focus-close button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.22rem;
}

.single.blog .article-figure-focus-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 10rem);
  margin: auto;
  border: 0;
  object-fit: contain;
}

.single.blog .article-figure-focus figcaption {
  max-width: 50rem;
  margin: 0.75rem auto 0;
  color: var(--article-muted);
  font-family: Jost, sans-serif;
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: center;
}

html.article-figure-is-open {
  overflow: hidden;
}

.single.blog .smallcaps {
  font-variant-caps: all-small-caps;
  hyphens: none;
  letter-spacing: 0.055em;
}

/* Mathematics is typeset into the sheet at build time. It has no panel,
 * border, or paper-coloured veil: only ink, measure, and a quiet gutter. */

.single.blog .article-body .math-inline {
  color: inherit;
  /* Hold ordinary mathematics at its previous optical size while the Linden
   * Hill prose grows slightly. Contexts with their own type size opt back in
   * below so headings and marginalia retain their existing proportions. */
  font-size: 0.952em;
}

.single.blog .article-body :is(h2, h3, h4, h5, h6) .math-inline,
.single.blog .article-body #TableOfContents .math-inline,
.single.blog .article-body table .math-inline,
.single.blog .article-body figcaption .math-inline,
.single.blog .article-body .sidenote .math-inline,
.single.blog .article-body .footnotes .math-inline {
  font-size: 0.99em;
}

.single.blog .article-body .math-display,
.single.blog .article-body .math-equation {
  margin: 1.45rem 0;
  padding: 0.18rem 0 0.3rem;
  color: var(--article-ink);
  break-inside: avoid;
}

.single.blog .article-body .math-display .katex,
.single.blog .article-body .math-equation .katex {
  font-size: 1.005em;
}

/* Trace, mounted on an overflowing formula. Hidden until the formula is actually
   scrollable and the reader is engaged with it: an ambient readout should report,
   not decorate. */
.single.blog .math-scroll-trace {
  position: absolute;
  right: 2.6rem;
  bottom: 0.1rem;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--instrument-quick) var(--instrument-ease);
}

.single.blog .math-equation:has(.math-scroll.is-scrollable):is(:hover, :focus-within)
  .math-scroll-trace {
  opacity: 1;
}

.single.blog .math-scroll-trace .instrument-trace__index {
  background: var(--article-wine);
}

.single.blog .article-body .math-scroll {
  padding: 0.12rem 0.08rem 0.26rem;
  scroll-padding-inline: 1.35rem;
}

.single.blog .article-body .katex-display,
.single.blog .article-body .math-scroll > .katex {
  margin: 0;
}

/* The number takes a narrow optical gutter on the right, so a centred formula
 * and its number share one line as they do in a book. Reserving the space below
 * instead dropped every number a full line clear of its formula. The gutter
 * matches the interval the marginal notes keep from the measure. */
.single.blog .article-body .math-equation {
  min-height: 2.05rem;
  padding-right: 2.6rem;
}

.single.blog .equation-number {
  position: absolute;
  top: 50%;
  right: 0;
  min-width: 2.4ch;
  transform: translateY(-50%);
  border: 0;
  color: var(--article-muted);
  font-family: Jost, sans-serif;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.015em;
  line-height: 1;
  text-align: right;
}

.single.blog .equation-ref,
.single.blog .statement-ref {
  border-bottom: 1px dotted rgba(23, 63, 81, 0.36);
  color: var(--article-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A reference into another note carries its title, so it must be allowed to
   break across lines like ordinary prose. */
.single.blog .reference--external {
  white-space: normal;
}

.single.blog .reference-source {
  font-variant-numeric: normal;
}

.single.blog .reference-source cite {
  font-style: italic;
}

.single.blog .equation-ref:hover,
.single.blog .equation-ref:focus-visible,
.single.blog .statement-ref:hover,
.single.blog .statement-ref:focus-visible {
  border-bottom-color: currentColor;
}

.single.blog .equation-ref-value {
  display: inline-block;
  min-width: 2.2ch;
  text-align: center;
}

.single.blog .math-equation,
.single.blog .math-statement {
  scroll-margin-top: 1.5rem;
}

.single.blog .math-statement {
  margin: 1.65rem 0;
  padding: 0;
  break-inside: avoid;
}


.single.blog .article-body .statement-heading {
  margin: 0 0 0.26rem;
  color: var(--article-green);
  font-family: Jost, sans-serif;
  font-size: 0.74rem;
  font-style: normal;
  font-variant-caps: all-small-caps;
  font-weight: normal;
  letter-spacing: 0.075em;
  line-height: 1.35;
}

.single.blog .statement-permalink {
  border: 0;
  color: inherit;
}

.single.blog .statement-title {
  font-family: "Linden Hill", Palatino, serif;
  font-size: 1.08em;
  font-style: italic;
  font-variant-caps: normal;
  letter-spacing: 0;
}

.single.blog .statement-body > :first-child,
.single.blog .proof-body > :first-child {
  margin-top: 0;
}

.single.blog .statement-body > :last-child,
.single.blog .proof-body > :last-child {
  margin-bottom: 0;
}

.single.blog .math-statement--theorem .statement-body,
.single.blog .math-statement--lemma .statement-body,
.single.blog .math-statement--proposition .statement-body,
.single.blog .math-statement--corollary .statement-body {
  font-style: italic;
}

.single.blog .math-statement--definition .statement-body,
.single.blog .math-statement--remark .statement-body,
.single.blog .math-statement--example .statement-body {
  font-style: normal;
}

.single.blog .math-statement--example .statement-heading {
  color: var(--article-wine);
}

.single.blog .math-proof {
  position: relative;
  margin: 1.55rem 0;
  padding: 0 0 0.2rem;
  break-inside: avoid;
}

.single.blog .article-body .proof-heading {
  float: left;
  margin: 0 0.38em 0 0;
  color: var(--article-green);
  font-style: italic;
}

.single.blog .math-proof::after {
  display: block;
  clear: both;
  content: "";
}

.single.blog .proof-end {
  float: right;
  margin-top: -1.28rem;
  margin-left: 0.6em;
  color: var(--article-muted);
  font-size: 0.88em;
  line-height: 1;
}

/* Optional calculations are set as folds in the sheet, not panels placed on
 * top of it. The summary forms one printer's corner and a rule that fades into
 * the measure. Opening the fold continues that corner down the working, so the
 * relationship between label and derivation remains visible without a box,
 * fill, shadow, or second interface language. Native details supplies the
 * interaction and keyboard semantics; no script or animated height is needed. */
.single.blog .article-calculation {
  position: relative;
  margin: 1.5rem 0 1.65rem;
  padding: 0;
  color: var(--article-ink);
}

.single.blog .article-calculation__summary {
  position: relative;
  display: grid;
  grid-template-columns: 0.9rem auto minmax(0, 1fr) 0.85rem;
  align-items: baseline;
  gap: 0.48rem;
  padding: 0.43rem 0 0.52rem;
  color: var(--article-muted);
  cursor: pointer;
  list-style: none;
}

.single.blog .article-calculation__summary::-webkit-details-marker {
  display: none;
}

.single.blog .article-calculation__summary::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0.9rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--article-rule-strong) 0,
    var(--article-rule) 58%,
    transparent 100%
  );
  content: "";
}

.single.blog .article-calculation__summary:hover {
  color: var(--article-green);
}

.single.blog .article-calculation__summary:focus {
  outline: none;
}

.single.blog .article-calculation__summary:focus-visible {
  color: var(--article-blue);
}

.single.blog .article-calculation__summary:focus-visible::after {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--article-blue) 0,
    color-mix(in srgb, var(--article-blue) 62%, transparent) 58%,
    transparent 100%
  );
}

.single.blog .article-calculation__summary:focus-visible
  :is(.article-calculation__fold, .article-calculation__state) {
  color: var(--article-blue);
}

.single.blog .article-calculation__fold {
  position: relative;
  top: 0.06rem;
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  color: var(--article-wine);
}

.single.blog .article-calculation__fold::before,
.single.blog .article-calculation__fold::after {
  position: absolute;
  top: 0;
  left: 0;
  background: currentColor;
  content: "";
  transform-origin: top left;
  transition: opacity 130ms ease, transform 130ms ease;
}

.single.blog .article-calculation__fold::before {
  width: 0.72rem;
  height: 1px;
}

.single.blog .article-calculation__fold::after {
  width: 1px;
  height: 0.72rem;
  transform: scaleY(0.45);
}

.single.blog .article-calculation[open] .article-calculation__fold::after {
  transform: scaleY(1);
}

.single.blog .article-calculation__label {
  color: var(--article-wine);
  font-family: Jost, sans-serif;
  font-size: 0.68rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.09em;
  line-height: 1.35;
}

.single.blog .article-calculation__title {
  min-width: 0;
  color: inherit;
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.35;
  text-wrap: pretty;
}

.single.blog .article-calculation__state {
  position: relative;
  top: 0.05rem;
  display: block;
  width: 0.68rem;
  height: 0.68rem;
  color: var(--article-faint);
}

.single.blog .article-calculation__state::before,
.single.blog .article-calculation__state::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.62rem;
  height: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
  transition: opacity 130ms ease, transform 130ms ease;
}

.single.blog .article-calculation__state::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.single.blog .article-calculation[open] .article-calculation__state::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.single.blog .article-calculation__body {
  position: relative;
  margin: 0;
  padding: 0.78rem 0 0.15rem 1.38rem;
}

.single.blog .article-calculation__body::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.43rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    var(--article-rule-strong) 0,
    var(--article-rule) 68%,
    transparent 100%
  );
  content: "";
}

.single.blog .article-calculation__body > :first-child {
  margin-top: 0;
}

.single.blog .article-calculation__body > :last-child {
  margin-bottom: 0;
}

.single.blog .article-calculation__body p {
  color: var(--article-quiet-ink);
  font-size: 0.96em;
  line-height: 1.56;
}

.single.blog .article-calculation__body .math-display {
  margin-top: 1.12rem;
  margin-bottom: 1.12rem;
}

@media (prefers-reduced-motion: reduce) {
  .single.blog .article-calculation__fold::before,
  .single.blog .article-calculation__fold::after,
  .single.blog .article-calculation__state::before,
  .single.blog .article-calculation__state::after {
    transition: none;
  }
}

/* Citations are compiled into the sheet, not layered on as a widget. Their
 * author-year voice stays slightly quieter than prose; the bibliography uses
 * a hanging printer's rule instead of cards, badges, or numbered chrome. */
.single.blog .article-citation {
  color: var(--article-muted);
  font-size: 0.88em;
  font-variant-numeric: oldstyle-nums;
  white-space: normal;
}

.single.blog .article-citation a {
  border-bottom: 1px dotted rgba(111, 59, 63, 0.42);
  color: var(--article-green);
}

.single.blog .article-citation a:hover,
.single.blog .article-citation a:focus-visible {
  border-bottom-color: currentColor;
  color: var(--article-wine);
}

.single.blog .article-references {
  margin: 0.8rem 0 0;
  padding: 0;
}

.single.blog .article-reference-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.single.blog .article-reference-list > li {
  position: relative;
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
  color: var(--article-muted);
  font-size: 0.88rem;
  line-height: 1.48;
}

.single.blog .article-reference-list > li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 0.72rem;
  border-top: 1px solid var(--article-wine);
  opacity: 0.54;
}

.single.blog .article-reference-authors {
  color: var(--article-ink);
}

.single.blog .article-reference-title {
  color: var(--article-ink);
}

.single.blog .article-reference-identifier {
  font-family: Jost, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.single.blog .article-reference-backlinks {
  margin-left: 0.35em;
  font-family: Jost, sans-serif;
  font-size: 0.72rem;
  white-space: nowrap;
}

.single.blog .article-reference-backlinks a {
  border: 0;
  color: var(--article-wine);
}

.single.blog [role="doc-biblioentry"]:target {
  background: linear-gradient(90deg, var(--article-block), transparent 92%);
}

.single.blog .article-body .footnotes {
  margin-top: 3.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--article-rule);
  color: var(--article-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.single.blog .article-body .footnotes::before {
  content: "Notes";
  display: block;
  margin-bottom: 0.7rem;
  color: var(--article-green);
  font-family: Jost, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.single.blog .article-body .footnotes > hr {
  display: none;
}

.single.blog .article-body .footnotes ol {
  margin: 0;
  padding-left: 1.35rem;
}

/* A note is one short passage, not a body paragraph. Goldmark wraps each note in
 * a <p>, which was inheriting the prose margin and opening ~29px between two
 * 20px lines — more air between the notes than inside them. The interval is now
 * set on the item, deliberately a little under one line, and a note that really
 * runs to two paragraphs still separates them. */
.single.blog .article-body .footnotes li {
  padding: 0.12rem 0.25rem;
}

.single.blog .article-body .footnotes li + li {
  margin-top: 0.42rem;
}

.single.blog .article-body .footnotes li > p {
  margin: 0;
}

.single.blog .article-body .footnotes li > p + p {
  margin-top: 0.5rem;
}

.single.blog .article-body .footnotes li:target {
  background: var(--article-block);
}

.single.blog .article-body .footnote-backref {
  margin-left: 0.22em;
  color: var(--article-wine);
}

.single.blog .article-end {
  margin-top: 3.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--article-rule);
  font-family: Jost, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.035em;
  text-align: left;
}

/* The record is two lines of quiet type in the ending's Jost register: a
   labelled revision date and a bibliographic self-citation. No fill, no button,
   no clipboard control. */
.single.blog .article-record {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  column-gap: 1rem;
  row-gap: 0.24rem;
  margin: 0 0 1.05rem;
  color: var(--article-faint);
}

.single.blog .article-record dt {
  margin: 0;
  color: var(--article-faint);
  font-family: Jost, sans-serif;
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.single.blog .article-record dd {
  margin: 0;
  color: var(--article-muted);
}

.single.blog .article-citation {
  font-family: "Linden Hill", Palatino, serif;
  font-size: 0.94rem;
  letter-spacing: 0;
  line-height: 1.4;
}

.single.blog .article-citation-locator {
  color: var(--article-faint);
  font-family: Jost, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  word-break: break-word;
}

.single.blog .article-end-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
}

.single.blog .article-end-link {
  border-bottom: 1px dotted rgba(39, 63, 57, 0.34);
  color: var(--article-muted);
}

.single.blog .article-end-link:hover,
.single.blog .article-end-link:focus-visible {
  border-bottom-color: currentColor;
  color: var(--article-blue);
}

.single.blog > footer > hr {
  display: none;
}

@media (min-width: 768px) {
  .single.blog .article-body .highlight {
    width: min(var(--article-breakout), calc(100vw - 5rem));
    margin-left: calc((100% - min(var(--article-breakout), calc(100vw - 5rem))) / 2);
  }

  .single.blog .article-figure--wide {
    width: min(var(--article-breakout), calc(100vw - 5rem));
    margin-left: calc((100% - min(var(--article-breakout), calc(100vw - 5rem))) / 2);
  }

}

/* Once the page is wide enough to have a real gutter, the number leaves the
 * measure and hangs beside it, so the formula gets the whole column back and no
 * interior padding is reserved for it. */
@media (min-width: 860px) {
  .single.blog .article-body .math-equation {
    padding-right: 0;
    padding-bottom: 0.3rem;
  }

  .single.blog .equation-number {
    top: 50%;
    right: auto;
    bottom: auto;
    left: calc(100% + 0.45rem);
    width: 1.45rem;
    transform: translateY(-50%);
    text-align: left;
  }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .single.blog .article-contents[open] .article-contents-list {
    padding-top: 0.82rem;
  }

  .single.blog #TableOfContents > ul {
    column-gap: 2.4rem;
    column-rule: 1px solid var(--article-rule);
    columns: 2;
  }

  .single.blog #TableOfContents > ul > li {
    break-inside: avoid;
    margin: 0 0 0.38rem;
  }
}

@media (min-width: 1180px) {
  /* The contents rail occupies the left gutter. Let the few deliberately wide
   * article objects spend the available right gutter instead of expanding back
   * through that rail. Their full 42rem measure still fits inside the
   * 992 px paper, while prose retains a clear registration gap to the outline. */
  .single.blog .article-body .highlight,
  .single.blog .article-figure--wide {
    clear: right;
    width: min(var(--article-breakout), calc(100% + 6rem));
    margin-left: 0;
  }

  .single.blog .article-contents-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(0rem - var(--article-rail-width) - var(--article-rail-gap));
    width: var(--article-rail-width);
  }

  .single.blog .article-contents {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
  }

  .single.blog .article-contents[open] {
    display: flex;
    flex-direction: column;
  }

  .single.blog .article-contents summary {
    display: block;
    padding: 0 2rem 0.38rem 0;
    cursor: default;
    font-size: 0.72rem;
    line-height: 1.35;
    list-style: none;
  }

  .single.blog .article-contents.is-managed summary {
    pointer-events: none;
  }

  .single.blog .article-contents summary::-webkit-details-marker {
    display: none;
  }

  .single.blog .article-contents-count,
  .single.blog .article-contents-disclosure {
    display: none;
  }

  .single.blog .article-contents-return {
    position: absolute;
    top: -0.28rem;
    right: 0;
    display: block;
    width: 1.75rem;
    min-height: 1.4rem;
    padding: 0.25rem 0 0.35rem;
    border: 0;
    color: var(--article-quiet-ink);
    font-family: Jost, sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.07em;
    line-height: 1.35;
    text-align: right;
    text-decoration: none;
    text-transform: uppercase;
    opacity: 0.8;
    transition: color 120ms ease, opacity 120ms ease;
  }

  .single.blog .article-contents-return:hover,
  .single.blog .article-contents-return:focus-visible {
    color: var(--article-blue);
    opacity: 1;
  }

  .single.blog .article-contents-return:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 0.14rem;
  }

  .single.blog .article-contents-list {
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .single.blog .article-contents-progress {
    display: block;
    flex: 0 0 auto;
    margin: 0 0 0.52rem;
  }

  .single.blog .article-contents-trace {
    display: block;
    flex: 0 0 auto;
    margin: 0 0 0.68rem;
    padding: 0.02rem 0.3rem 0.08rem 1.72rem;
    text-wrap: pretty;
  }

  .single.blog .article-contents-trace-current {
    position: relative;
    display: block;
    color: var(--article-green);
    font-family: "Linden Hill", Palatino, serif;
    font-size: 0.77rem;
    font-style: italic;
    line-height: 1.28;
  }

  .single.blog .article-contents-trace-current::before {
    position: absolute;
    top: 0.58em;
    right: calc(100% + 0.45rem);
    width: 0.8rem;
    border-top: 1px solid var(--article-wine);
    content: "";
  }

  .single.blog #TableOfContents ul ul {
    margin: 0.13rem 0 0.3rem 0.68rem;
  }

  .single.blog #TableOfContents li {
    margin: 0.16rem 0;
    padding: 0;
    font-family: "Linden Hill", Palatino, serif;
    font-size: 0.8rem;
    line-height: 1.3;
    hyphens: none;
  }

  .single.blog #TableOfContents > ul > li > a {
    color: var(--article-quiet-ink);
    font-size: 1.035em;
    font-variant: small-caps;
    letter-spacing: 0.025em;
  }

  .single.blog #TableOfContents ul ul li {
    font-size: 0.74rem;
  }

  .single.blog #TableOfContents ul ul a {
    color: var(--article-quiet-ink);
  }
}

/* On a genuinely wide screen the crop marks become the edge of a real sheet:
 * the contents rail moves wholly into the outer desk space while prose receives
 * one small, continuous extension. The paired query is geometric rather than
 * device-based: it delays the exterior composition when a reader's enlarged
 * default type would leave too little physical room for the full rail. */
@media (min-width: 1360px) and (min-width: 85rem) {
  .single.blog {
    /* At the default type size this grows from 36rem at 1360px to 37.5rem at
     * 1440px, removing the old one-pixel reflow at the mode change. */
    --article-measure: clamp(36rem, calc(30vw + 10.5rem), 37.5rem);
    --article-rail-exterior-gap: 1.5rem;
    --article-toc-sticky-inset: clamp(2.5rem, 7vh, 4.5rem);
    --article-toc-sticky-inset: clamp(2.5rem, 7dvh, 4.5rem);
  }

  /* A real right marginal field changes the optical center of the article.
   * Preserve the already approved outer positions of the TOC and marginalia,
   * then weight their channels by visual density rather than making them equal:
   * the darker TOC receives more air, while the quieter sidenote remains tied
   * to its sentence. Never create the triad when either outer field is absent. */
  .single.blog.has-article-marginalia:has(.article-contents-rail) {
    --article-toc-prose-gap: 10rem;
    --article-prose-marginal-gap: calc(25.1rem - var(--article-measure) / 2);
    --article-weighted-prose-inset: calc(var(--article-toc-prose-gap) - 4rem);
    --article-marginal-gap: var(--article-prose-marginal-gap);
  }

  .single.blog.has-article-marginalia:has(.article-contents-rail) .article-body {
    margin-right: auto;
    margin-left: var(--article-weighted-prose-inset);
  }

  .single.blog .article-contents-rail {
    /* Begin in the same subtitle/date–epigraph hinge as the approved centered
     * composition. Once the article moves, the contents can travel upward and
     * settle into the more useful upper reading band below. The horizontal
     * expression resolves from the rail's actual containing-block width, so the
     * crop interval survives both the fluid measure and enlarged reader type. */
    top: -4.25rem;
    left: calc(
      50%
      - (var(--body-width) / 2)
      - var(--article-rail-exterior-gap)
      - var(--article-rail-width)
    );
  }

  .single.blog.has-article-marginalia:has(.article-contents-rail) .article-contents-rail {
    left: calc(
      0rem
      - var(--article-rail-width)
      - var(--article-toc-prose-gap)
    );
  }

  /* A reader's instrument belongs in an upper working band, not permanently at
   * decorative dead center. Removing the visual transform also keeps its true
   * box inside the article-local wrapper at both article boundaries. */
  .single.blog .article-contents {
    top: var(--article-toc-sticky-inset);
    max-height: calc(
      100vh
      - var(--article-toc-sticky-inset)
      - var(--article-toc-sticky-inset)
    );
    max-height: calc(
      100dvh
      - var(--article-toc-sticky-inset)
      - var(--article-toc-sticky-inset)
    );
    transform: none;
  }
}

@media (min-width: 1180px) {
  .single.blog .sidenote-ref {
    cursor: default;
  }

  .single.blog .sidenote {
    display: block;
    float: right;
    clear: right;
    width: var(--article-note-width);
    margin: 0.18rem calc(0rem - var(--article-note-offset)) 0.9rem var(--article-marginal-gap);
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.84rem;
    line-height: 1.42;
  }

  .single.blog .article-figure--margin {
    float: right;
    clear: right;
    width: var(--article-note-width);
    margin: 0.28rem calc(0rem - var(--article-note-offset)) 1.15rem var(--article-marginal-gap);
  }

  .single.blog .article-figure--margin .article-media {
    width: 100%;
    margin: 0;
  }

  .single.blog .article-figure--margin figcaption {
    margin-top: 0.48rem;
    font-size: 0.7rem;
    line-height: 1.4;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .single.blog .article-header.article-meta {
    margin-top: 1.75rem;
    margin-bottom: 2rem;
  }

  .single.blog .article-title.title {
    max-width: none;
    font-size: clamp(1.85rem, 8.7vw, 2.25rem);
  }

  .single.blog .article-title.title::before {
    top: -0.34em;
    left: -0.14em;
    font-size: 5.15em;
  }

  .single.blog .article-body {
    line-height: 1.58;
  }

  .single.blog .section-anchor {
    position: static;
    display: inline-block;
    width: 1.1em;
    margin-right: 0.08em;
    opacity: 0.42;
    text-align: left;
  }

  .single.blog .article-body h3 {
    text-align: left;
  }

  .single.blog .article-contents {
    margin-bottom: 2.15rem;
    padding-top: 0.52rem;
    padding-bottom: 0.6rem;
  }

  .single.blog .article-contents-list {
    padding-top: 0.62rem;
    padding-left: 0;
  }

  .single.blog .article-contents summary {
    font-size: 0.72rem;
  }

  .single.blog #TableOfContents ul ul {
    margin-left: 0.72rem;
  }

  .single.blog .article-calculation__summary {
    grid-template-columns: 0.78rem auto minmax(0, 1fr) 0.72rem;
    gap: 0.38rem;
  }

  .single.blog .article-calculation__title {
    font-size: 0.9rem;
  }

  .single.blog .article-calculation__body {
    padding-left: 1.08rem;
  }

  .single.blog .article-calculation__body::before {
    left: 0.32rem;
  }

  .single.blog .article-body pre code,
  .single.blog .article-body pre code:hover {
    padding: 1rem;
  }

  .single.blog .article-body .highlight pre code,
  .single.blog .article-body .highlight pre code:hover {
    padding: 1.8rem 1rem 0.95rem;
  }

  .single.blog .article-code-tools {
    right: 0.65rem;
    left: 1rem;
  }

  .single.blog .article-body table {
    display: block;
    width: 100%;
    margin-left: 0;
    font-size: 0.74rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .single.blog .article-body th,
  .single.blog .article-body td {
    padding: 0.38rem 0.25rem;
  }

  .single.blog .article-figure figcaption {
    text-align: left;
  }

  .single.blog .article-epigraph {
    width: calc(100% - 0.5rem);
    margin-bottom: 2.55rem;
    padding-right: 0.75rem;
    padding-left: 1.25rem;
  }

  .single.blog .article-epigraph-mark--open {
    top: -0.9rem;
    left: -0.15rem;
    font-size: 4.2rem;
  }

  .single.blog .article-epigraph-mark--close {
    right: -0.55rem;
    bottom: -0.72rem;
    font-size: 2.9rem;
  }

  .single.blog .article-figure-focus {
    padding: 0.72rem;
  }

  .single.blog .article-figure-focus-sheet {
    padding: 2rem 0.85rem 1rem;
  }

  .single.blog .article-figure-focus-image {
    max-height: calc(100dvh - 8rem);
  }

  .single.blog .article-figure-focus figcaption {
    text-align: left;
  }

}

@page {
  margin: 18mm 20mm 20mm;
}

@media print {
  .single.blog {
    max-width: none;
    margin: 0;
    padding: 0;
    color: #111;
  }

  .single.blog .nav-top,
  .single.blog #sunlit-scene,
  .single.blog #theme-toggle,
  .single.blog .crop-h,
  .single.blog .crop-v,
  .single.blog .crop-c,
  .single.blog > footer,
  .single.blog .article-skip-link,
  .single.blog .article-contents-return,
  .single.blog .article-code-tools,
  .single.blog .article-figure-focus,
  .single.blog .article-end-nav {
    display: none !important;
  }

  /* An offprint keeps its record. Screen navigation goes, but the revision date
     and the citation are exactly what a printed note should carry. */
  .single.blog .article-end {
    margin-top: 2.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid #999;
  }

  .single.blog .article-record {
    color: #333;
  }

  .single.blog .article-record dd,
  .single.blog .article-citation-locator {
    color: #333;
  }

  .single.blog .article-header.article-meta,
  .single.blog .article-body {
    width: auto;
    max-width: 42rem;
    margin-right: auto;
    margin-left: auto;
  }

  .single.blog .article-body p,
  .single.blog .article-body li {
    orphans: 3;
    widows: 3;
  }

  .single.blog .article-body > p:first-of-type {
    break-inside: avoid;
  }

  .single.blog .article-body :is(h2, h3, h4, h5, h6) {
    break-after: avoid;
  }

  .single.blog .article-dropcap {
    color: #111;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .single.blog .article-dropcap-ornament {
    color: #777;
  }

  .single.blog .article-contents:not([open]) > :not(summary) {
    display: block;
  }

  .single.blog .article-body pre,
  .single.blog .article-body table,
  .single.blog .article-body .highlight,
  .single.blog .article-figure,
  .single.blog .article-figure--wide,
  .single.blog .article-figure--margin,
  .single.blog .math-display,
  .single.blog .math-equation,
  .single.blog .math-statement,
  .single.blog .math-proof {
    width: auto;
    margin-right: 0;
    margin-left: 0;
    break-inside: avoid;
  }

  .single.blog .article-calculation {
    width: auto;
    margin-right: 0;
    margin-left: 0;
    break-inside: auto;
  }

  .single.blog .article-calculation:not([open]) > .article-calculation__body {
    display: block !important;
  }

  .single.blog .article-calculation__summary {
    break-after: avoid;
    color: #333;
  }

  .single.blog .article-calculation__summary::after,
  .single.blog .article-calculation__body::before {
    background: #999;
  }

  .single.blog .article-calculation__state {
    display: none;
  }

  .single.blog .article-body .highlight,
  .single.blog .article-body .highlight pre {
    break-inside: auto;
  }

  .single.blog .math-proof {
    break-inside: auto;
  }

  .single.blog .proof-heading {
    break-after: avoid;
  }

  .single.blog .article-body .highlight pre,
  .single.blog .article-body .highlight code {
    min-width: 0;
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .single.blog .article-figure,
  .single.blog .article-figure--margin {
    float: none;
    clear: both;
    max-width: 100%;
  }

  .single.blog .article-figure .article-media {
    max-width: 100%;
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
  }

  .single.blog .article-figure figcaption {
    break-before: avoid;
    color: #333;
    text-align: left;
  }

  .single.blog .article-body .math-equation {
    padding-right: 2.2rem;
    padding-bottom: 0.3rem;
  }

  .single.blog .equation-number {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    width: 2rem;
    transform: translateY(-50%);
    color: #444;
    text-align: right;
  }

  .single.blog .article-body .math-display .katex,
  .single.blog .article-body .math-equation .katex {
    font-size: 0.923em;
  }

  .single.blog .article-body .math-scroll.is-scrollable .katex,
  .single.blog .article-body .math-equation--wide .math-scroll .katex {
    font-size: 0.68em;
  }

  .single.blog .article-body .katex-display > .katex,
  .single.blog .article-body .math-scroll > .katex,
  .single.blog .article-body .math-scroll math[display="block"] {
    white-space: normal;
  }

  .single.blog .article-reference-backlinks {
    display: none;
  }

  .single.blog .article-body a {
    color: inherit;
  }

  .single.blog .article-body a[href^="http"]:not(.article-figure-link):not(.article-figure-focus-link):not(.article-reference-identifier):not(.section-anchor)::after {
    content: " (" attr(href) ")";
    font-family: Jost, sans-serif;
    font-size: 0.72em;
    overflow-wrap: anywhere;
  }

  .single.blog .article-link-mark,
  .single.blog .article-link-kind-sr {
    display: none;
  }

  .single.blog .article-epigraph {
    break-inside: avoid;
  }

  .single.blog .article-epigraph-mark {
    color: #777;
  }

  .single.blog .article-contents-rail {
    display: none;
  }

  .single.blog .sidenote-toggle {
    display: none;
  }

  .single.blog .sidenote {
    display: block;
    float: none;
    width: auto;
    margin: 0.6rem 0;
    padding: 0.5rem 0 0.5rem 0.8rem;
    border-left: 1px solid #888;
    background: transparent;
  }
}