/* ============================================================
   P.S. essay shell v2.1 ("Maison, refined")
   Loaded after each essay's inline styles. Every selector starts
   with body, so it outranks the inline .pxe-essay rules (0,1,0).
   The essay inherits the site's tokens, so it follows all 17 themes.
   ============================================================ */

body { overflow-x: clip; }
body article { padding: 10px var(--gutter) 0; }
/* the skip link lands here: focus moves, the landmark wears no ring */
body main#main:focus { outline: none; }

/* the essay reads the theme instead of its own fixed palette */
body .pxe-essay {
  --ink: inherit; --ink-2: inherit; --muted: inherit;
  --surface: var(--card); --grid: var(--line-2); --baseline: var(--line);
  --border: var(--hair); --blue: color-mix(in srgb, var(--ink) 58%, var(--card)); --red: var(--accent);
  color: var(--ink); max-width: var(--measure); padding: 24px 0 56px;
  font-size: var(--fs-body); line-height: 1.72;
}
@media (max-width: 600px) { body .pxe-essay { line-height: 1.64; } }

/* ---------- the folio: number, month, minutes, byline ---------- */
body .ehead {
  display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 auto;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  padding: clamp(40px, 7vw, 88px) var(--gutter) 0; gap: 10px 0;
  font-variant-numeric: lining-nums tabular-nums;
}
body .ehead .tag + .tag { margin-left: 18px; padding-left: 18px; border-left: var(--hair-w) solid var(--hair); }
body .ehead .tag.dim { font-family: var(--num); font-variant-numeric: lining-nums tabular-nums; }
/* the byline signs the folio from the right edge */
body .ehead .tag:last-child { margin-left: auto; padding-left: 18px; border-left: 0; }
/* a fine rule closes the folio and hands off to the title */
body .ehead::after {
  content: ""; flex-basis: 100%; height: 0; order: 99;
  border-top: var(--hair-w) solid var(--hair); margin-top: 14px;
}
@media (max-width: 480px) {
  /* a touch tighter, so the three meta items share the first line on a phone */
  body .ehead { gap: 6px 14px; }
  body .ehead .tag { letter-spacing: .12em; }
  body .ehead .tag + .tag, body .ehead .tag:last-child { margin-left: 0; padding-left: 0; border-left: 0; }
  /* the byline always takes its own second line, above the closing rule */
  body .ehead .tag:last-child { flex-basis: 100%; order: 98; }
  body .ehead::after { margin-top: 8px; }
}

/* ---------- display type ---------- */
body .pxe-essay h1 {
  font-size: var(--fs-d2); font-weight: 400; line-height: 1.02; letter-spacing: -.026em;
  margin: 0 0 clamp(16px, 2vw, 24px);
}
/* the two long titles step down a size so they set in three lines, not five */
body .pxe-essay h1.long { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -.022em; }
@media (max-width: 600px) {
  body .pxe-essay h1 { letter-spacing: -.016em; line-height: 1.06; }
}
body .pxe-essay .kicker {
  font-size: var(--fs-lede); line-height: 1.5; max-width: 34em;
  margin-bottom: clamp(28px, 4vw, 44px); text-align: left; hyphens: manual; text-wrap: pretty;
}
/* a short engraved rule between the standfirst and the first line of prose */
body .pxe-essay .kicker::after {
  content: ""; display: block; width: 48px; border-top: 1px solid var(--hair-strong);
  margin-top: clamp(28px, 4vw, 44px);
}
@media (max-width: 600px) {
  body .pxe-essay .kicker { font-size: 18px; line-height: 1.52; }
}

/* the opening letter: a drop cap three lines deep */
body .pxe-essay .kicker + p::first-letter {
  float: left; font-size: 4.05em; line-height: .8; padding: .08em .16em 0 0;
  font-weight: 400; font-variant-caps: normal; letter-spacing: 0; color: var(--ink);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  body .pxe-essay .kicker + p::first-letter {
    float: none; font-size: inherit; line-height: inherit; padding: 0 .16em 0 0;
    -webkit-initial-letter: 3; initial-letter: 3;
  }
}
/* desktop: the opening line runs in small capitals, the old book-house way in */
@media (min-width: 601px) {
  body .pxe-essay .kicker + p::first-line {
    font-variant-caps: all-small-caps; font-synthesis-small-caps: auto; letter-spacing: .02em; word-spacing: -.04em;
  }
}

body .pxe-essay h2 {
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.12; letter-spacing: -.016em;
  margin: clamp(64px, 9vw, 104px) 0 18px;
}
/* the foil rule: 32 x 1, above essay h2s only */
body .pxe-essay h2::before {
  content: ""; display: block; width: 32px; height: 1px; background: var(--accent); margin-bottom: 20px;
}

/* ---------- first load: the header settles in, in reading order ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root:not(.vt-in) body .ehead,
  :root:not(.vt-in) body .pxe-essay > h1,
  :root:not(.vt-in) body .pxe-essay > .kicker,
  :root:not(.vt-in) body .pxe-essay > .kicker + p {
    animation: psFadeUp var(--d-4) var(--ease-out) both;
  }
  :root:not(.vt-in) body .pxe-essay > h1 { animation-delay: var(--stagger); }
  :root:not(.vt-in) body .pxe-essay > .kicker { animation-delay: calc(2 * var(--stagger)); }
  :root:not(.vt-in) body .pxe-essay > .kicker + p { animation-delay: calc(3 * var(--stagger)); }
}

/* ---------- prose ---------- */
body .pxe-essay p {
  hyphenate-limit-chars: 6 3 2; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 2;
  hyphenate-limit-lines: 2; -webkit-hyphenate-limit-lines: 2; hyphenate-limit-last: always;
  hanging-punctuation: first allow-end; font-variant-numeric: oldstyle-nums proportional-nums;
}
/* one line of air between paragraphs: the rhythm is the leading */
body .pxe-essay p:where(:not(.sources, .kicker)) { margin: 0 0 1.72em; margin: 0 0 1lh; }
/* phones set ragged-right, so hyphenation only where the author put it */
@media (max-width: 600px) {
  body .pxe-essay p { text-align: left; hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }
}
/* the end mark: a small square of ink closes the last paragraph */
body .pxe-essay p:has(+ hr)::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .38em;
  vertical-align: .04em; background: var(--ink); border-radius: var(--r-paper);
}

body .pxe-essay a:not(.ps-cap) {
  color: inherit; text-decoration: underline 1px var(--foil-soft);
  text-underline-offset: .22em; text-decoration-skip-ink: auto;
  transition: color var(--d-1) var(--ease-out), text-decoration-color var(--d-1) var(--ease-out);
}
@media (hover: hover) {
  body .pxe-essay a:not(.ps-cap):hover { color: var(--accent); text-decoration-color: var(--accent); }
}

/* the hazard segment before the sources (one of the sanctioned places) */
body .pxe-essay hr {
  border: 0; width: 56px; height: 4px; margin: 72px auto;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 4px, transparent 4px 8px);
}

/* ---------- figures ---------- */
/* photographs break out of the measure; drawn diagrams (SVG) and column photos stay on it */
body .pxe-essay figure.photo:not(.narrow):not(.column):not(:has(img[src$=".svg"])) {
  --w: min(960px, 100vw - 2 * var(--gutter));
  width: var(--w); max-width: none; margin-inline: calc((100% - var(--w)) / 2);
}
body .pxe-essay figure { margin-block: clamp(40px, 5.5vw, 64px); }
/* a paper-toned plate holds the frame while the photograph is still on its way */
body .pxe-essay .photo img {
  border: 0; border-radius: var(--r-paper); box-shadow: 0 0 0 1px var(--hair); background: var(--line-2);
}
body .pxe-essay figcaption {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5; letter-spacing: .01em; color: var(--ink-2);
  max-width: min(var(--measure), 100%); margin: 12px auto 0; text-wrap: pretty;
}
/* the credit line: set apart, the way a museum label signs off */
body .pxe-essay figcaption .credit {
  display: block; margin-top: 6px; font: 600 10px/1.4 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
/* drawn diagrams sit on a card plate, like a print in a mount */
body .pxe-essay figure.photo img[src$=".svg"] {
  background: var(--card); padding: clamp(12px, 2vw, 24px); box-shadow: 0 0 0 1px var(--hair);
}
/* narrow figures: the caption keeps to the photograph's own width */
@media (max-width: 899px) {
  body .pxe-essay figure.photo.narrow figcaption { max-width: min(380px, 100%); }
  body .pxe-essay figure.photo.narrow:has(img[src*="Monty_open_door"]) figcaption { max-width: min(420px, 100%); }
  /* a tall portrait stays a figure on a phone, not the whole screen */
  body .pxe-essay figure.photo.narrow img:not([src$=".svg"]) { width: auto; max-width: min(100%, 380px); max-height: 60svh; margin-inline: auto; }
}
/* wide screens: the caption steps beside the narrow figure, under an engraved rule */
@media (min-width: 900px) {
  body .pxe-essay figure.photo.narrow {
    display: grid; grid-template-columns: minmax(0, 380px) 1fr; column-gap: 28px; align-items: end;
  }
  body .pxe-essay figure.photo.narrow:has(img[src*="Monty_open_door"]) { grid-template-columns: minmax(0, 420px) 1fr; }
  body .pxe-essay figure.photo.narrow img { margin: 0; }
  body .pxe-essay figure.photo.narrow figcaption {
    margin: 0; max-width: 260px; padding-top: 14px; border-top: 1px solid var(--hair);
  }
}
/* the punch card's scanned white matte: printed into the paper in light rooms, dimmed in dark ones */
body .pxe-essay figure.photo img[src*="Punch_card"] { mix-blend-mode: multiply; background: transparent; box-shadow: none; }
:root[data-tone="dark"] body .pxe-essay figure.photo img[src*="Punch_card"] {
  mix-blend-mode: normal; filter: brightness(.86); box-shadow: 0 0 0 1px var(--hair); }
/* dark rooms: diagrams turn to chalk on the room's own paper; photographs are hung a touch lower */
:root[data-tone="dark"] body .pxe-essay figure.photo img[src$=".svg"] {
  filter: invert(.9) hue-rotate(180deg); background: transparent;
  /* drawn dark so the inversion turns it into a light hairline on the dark room */
  box-shadow: 0 0 0 1px rgb(0 0 0 / .2);
}
:root[data-tone="dark"] body .pxe-essay figure.photo img:not([src$=".svg"]):not([src*="Punch_card"]) {
  opacity: .86; transition: opacity var(--d-3) var(--ease-out);
}
@media (hover: hover) {
  :root[data-tone="dark"] body .pxe-essay figure.photo img:not([src$=".svg"]):not([src*="Punch_card"]):hover { opacity: 1; }
}
/* photographs rise into place as they scroll in: opacity and transform only, so the compositor runs it */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body .pxe-essay figure.photo img {
      animation: psImgCurtain linear both; animation-timeline: view(); animation-range: entry 0% cover 30%;
    }
  }
}
@keyframes psImgCurtain { from { opacity: .001; transform: translateY(24px); } }

/* ---------- charts: paper plates in the theme's own inks ---------- */
body .pxe-essay .chart-card {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-paper);
  padding: clamp(16px, 2.4vw, 28px); font-family: var(--sans); line-height: 1.4;
}
body .pxe-essay .chart-card svg { font-variant-numeric: lining-nums tabular-nums; }
body .pxe-essay .chart-card svg text { font-family: var(--num); }
body .pxe-essay .chart-card svg text[font-weight] { font-weight: 600; }
body .pxe-essay .chart-card h3 {
  font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.01em;
  line-height: 1.25; margin-bottom: 6px; text-wrap: balance;
}
body .pxe-essay .chart-card .sub {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin-bottom: 18px;
  max-width: 52ch; text-wrap: balance; text-align: left; hyphens: manual; -webkit-hyphens: manual;
}
body .pxe-essay .chart-label { fill: var(--ink-2); }
body .pxe-essay .chart-value { font-weight: 600; letter-spacing: .01em; }
/* the answer: each chart marks the one figure it argues for, in foil */
body .pxe-essay { --hl: var(--accent); }
/* riso and play print a light foil: pressed a touch deeper so a foil bar still reads at 3:1 on the card */
:root:is([data-theme="riso"], [data-theme="play"]) body .pxe-essay {
  --hl: color-mix(in srgb, var(--accent) 90%, var(--ink)); --red: var(--hl); }
body .pxe-essay .chart-card [data-hl] { fill: var(--hl); }
/* a knockout label on the foil mark reads in the foil capsule's own dark ink */
body .pxe-essay .chart-card [data-hl] + text[fill="#ffffff"] { fill: color-mix(in srgb, var(--dark) 70%, #000); }
/* a plain bar that carries a knockout label is pressed one step deeper, so the paper-coloured figure holds 4.5:1 */
body .pxe-essay .chart-card .bar:not([data-hl]):has(+ text[fill="#ffffff"]) { fill: color-mix(in srgb, var(--ink) 74%, var(--card)); }
/* line charts: hollow stations on a finer line, the last one stamped */
body .pxe-essay .chart-card circle[r="4.5"] { fill: var(--card); stroke: var(--blue); stroke-width: 1.5; }
body .pxe-essay .chart-card circle[r="4.5"][data-hl] { fill: var(--hl); stroke: var(--hl); }
body .pxe-essay .chart-card polyline { stroke-width: 1.75; }
body .pxe-essay .chart-card rect[rx="4"] { rx: 1px; }
/* bars rise from their baseline as the plate scrolls in: the individual scale property, never transform */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body .pxe-essay .chart-card .bar {
      transform-box: fill-box; transform-origin: 50% 100%;
      animation: psBar linear both; animation-timeline: view(); animation-range: entry 10% cover 40%;
    }
    body .pxe-essay .chart-card .bar--h { transform-origin: 0 50%; animation-name: psBarH; }
    body .pxe-essay .chart-card .bar--neg { transform-origin: 100% 50%; animation-name: psBarH; }
  }
}
@keyframes psBar { from { scale: 1 0; } }
@keyframes psBarH { from { scale: 0 1; } }
/* a phone-only drawing waits off stage everywhere wider */
body .pxe-essay .chart-card svg.chart-phone { display: none; }
@media (max-width: 560px) {
  body .pxe-essay .chart-card { margin-inline: -12px; border-inline: 0; border-radius: 0; padding: 14px 10px; }
  /* phones: the whole drawing stays in view, scaled to the column */
  body .pxe-essay .chart-card svg { width: 100%; height: auto; min-width: 0; }
  /* labels are set in SVG units: 19 of them read as ten real pixels at 375 */
  body .pxe-essay .chart-card:not(.chart-card--wide) :is(.chart-label, .chart-cat) { font-size: 19px; }
  body .pxe-essay .chart-card:not(.chart-card--wide) .chart-value { font-size: 20px; }
  /* the first year on a line chart steps right, clear of the zero in the corner */
  body .pxe-essay .chart-card:not(.chart-card--wide) text.chart-label[x="70"][text-anchor="middle"] { text-anchor: start; }
  /* charts too dense to shrink keep their size and slide sideways under a sticky title */
  body .pxe-essay .chart-card--wide {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  body .pxe-essay .chart-card--wide::-webkit-scrollbar { display: none; }
  body .pxe-essay .chart-card--wide svg { min-width: 600px; }
  body .pxe-essay .chart-card--wide :is(h3, .sub) { position: sticky; left: 0; max-width: calc(100vw - 64px); }
  /* a chart with its own phone drawing swaps to it: labels over the bars, the answer in view without a swipe */
  body .pxe-essay .chart-card:has(svg.chart-phone) svg:not(.chart-phone) { display: none; }
  body .pxe-essay .chart-card svg.chart-phone { display: block; min-width: 0; }
  body .pxe-essay .chart-card svg.chart-phone .chart-cat { font-size: 12px;
    paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
  body .pxe-essay .chart-card svg.chart-phone .chart-label { font-size: 11px; }
  body .pxe-essay .chart-card svg.chart-phone .chart-value { font-size: 12px; }
}
/* knockout labels and the old blue ramp, remapped to theme inks (hex spellings as written in the essays) */
body .pxe-essay svg [fill="#ffffff"], body .pxe-essay .chart-value[fill="#ffffff"] { fill: var(--paper); }
body .pxe-essay svg [fill="#86b6ef"] { fill: color-mix(in srgb, var(--ink) 28%, var(--card)); }
body .pxe-essay svg [fill="#5598e7"] { fill: color-mix(in srgb, var(--ink) 50%, var(--card)); }
body .pxe-essay svg [fill="#2a78d6"] { fill: color-mix(in srgb, var(--ink) 74%, var(--card)); }
body .pxe-essay svg [fill="#184f95"] { fill: var(--accent); }
body .pxe-essay svg [fill="#b9b8b0"] { fill: color-mix(in srgb, var(--ink) 30%, var(--card)); }
/* void's foil is white, the same as its ink: keep two chart series apart with a grey */
:root[data-theme="void"] body .pxe-essay { --blue: color-mix(in srgb, var(--ink) 58%, var(--card)); }

/* ---------- sources ---------- */
body .pxe-essay .sources {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
  max-width: 60ch; text-wrap: pretty; font-variant-numeric: lining-nums;
}
body .pxe-essay .sources > em:first-child {
  display: block; margin-bottom: 12px; font: 600 var(--lbl-s)/1.2 var(--sans); letter-spacing: var(--trk-s);
  text-transform: uppercase; color: var(--ink);
}
body .pxe-essay .sources a:not(.ps-cap) { text-decoration-color: var(--hair-strong); }
@media (hover: hover) {
  body .pxe-essay .sources a:not(.ps-cap):hover { color: var(--foil-text); text-decoration-color: var(--accent); }
}

/* ---------- the lab link: the essay's machine, one door down ---------- */
body .e-lab {
  max-width: var(--measure); margin: 56px auto 0; padding-top: 22px;
  border-top: var(--hair-w) solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
body .e-lab .ps-cap { color: var(--ink); }
@media (max-width: 480px) {
  body .e-lab .ps-cap { flex: 1 1 100%; }
}

/* ---------- previous / next: a ledger of two ---------- */
body .enav {
  max-width: min(960px, 100% - 2 * var(--gutter)); width: auto; margin: clamp(48px, 7vw, 88px) auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0;
  border-top: 1px solid var(--ink);
}
body .enav a { display: block; padding: 28px 0 32px; min-height: 44px; max-width: none; text-decoration: none; font-family: var(--sans); }
body .enav a.prev { padding-right: 28px; }
body .enav a.next { grid-column: 2; text-align: right; border-left: var(--hair-w) solid var(--hair); padding-left: 28px; }
body .enav .dir {
  display: block; text-transform: uppercase;
  font-size: var(--lbl-s); font-weight: 600; letter-spacing: var(--trk-s); color: var(--dim);
  margin-bottom: 12px; transition: translate var(--d-2) var(--ease-out), color var(--d-1) var(--ease-out);
}
body .enav .t {
  font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; line-height: 1.15;
  letter-spacing: -.014em; color: var(--ink); text-wrap: balance;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px;
  transition: background-size var(--d-2) var(--ease-out);
}
body .enav a.next .t { background-position: 100% 100%; }
/* hover and keyboard focus: the title underlines itself in ink, the direction steps the way you're going */
@media (hover: hover) {
  body .enav a:hover .t { background-size: 100% 1px; }
  body .enav a:hover .dir { color: var(--ink); }
}
body .enav a:focus-visible .t { background-size: 100% 1px; }
body .enav a:focus-visible .dir { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  body .enav a:not(.next):focus-visible .dir { translate: -4px 0; }
  body .enav a.next:focus-visible .dir { translate: 4px 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body .enav a:not(.next):hover .dir { translate: -4px 0; }
  body .enav a.next:hover .dir { translate: 4px 0; }
}
@media (max-width: 560px) {
  body .enav { grid-template-columns: 1fr; }
  body .enav a.prev { padding-right: 0; }
  body .enav a.next { grid-column: auto; border-left: 0; padding-left: 0; }
  body .enav a + a { border-top: var(--hair-w) solid var(--hair); }
}

/* ---------- the reading hairline: the compositor draws it ---------- */
@keyframes psReadEssay { 0% { transform: scaleX(0); opacity: 1; } 96% { opacity: 1; } 100% { transform: scaleX(1); opacity: .45; } }
@supports (animation-timeline: scroll()) {
  body::after {
    content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--accent);
    transform-origin: 0 50%; animation: psReadEssay linear both; animation-timeline: scroll(root);
    z-index: var(--z-progress); pointer-events: none;
  }
  /* desktop: the hairline rides the underside of the glass bar */
  @media (min-width: 701px) {
    body:has(.pxe-essay) .nav--glass::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--accent);
      transform-origin: 0 50%; transform: scaleX(0); animation: psReadEssay linear both;
      animation-timeline: scroll(root); pointer-events: none;
    }
    body::after { display: none; }
  }
}
/* where it can, the bar measures the essay itself, not the whole page */
@supports (timeline-scope: --a) {
  body { timeline-scope: --essay; }
  body .pxe-essay { view-timeline: --essay block; }
  body::after, body:has(.pxe-essay) .nav--glass::after { animation-timeline: --essay; animation-range: contain 0% contain 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body::after, body:has(.pxe-essay) .nav--glass::after { display: none; }
}

/* ---------- phase 2: the title flight (new-page side) ---------- */
:root.vt-in:not(.vt-out) body .pxe-essay h1 { view-transition-name: essay-title; width: fit-content; max-width: 100%; }
::view-transition-group(essay-title) { animation-duration: 820ms; animation-timing-function: var(--ease-out); }
::view-transition-old(essay-title), ::view-transition-new(essay-title) { height: 100%; object-fit: none; object-position: left top; }
::view-transition-old(essay-title) { animation-duration: 200ms; }
::view-transition-new(essay-title):only-child { animation: psCurtainUp var(--d-page) var(--ease-curtain) 60ms both; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body .enav .dir, body .enav .t { transition: none; }
  :root[data-tone="dark"] body .pxe-essay figure.photo img { transition: none; }
}

/* ---------- print: the essay as a clean sheet ---------- */
@media print {
  html:root, html:root[data-theme] {
    --paper: #fff; --card: #fff; --ink: #000; --ink-2: #333; --muted: #666;
    --line: #ccc; --line-2: #e5e5e5; --accent: #C43A00;
  }
  @page { margin: 18mm 20mm 20mm; }
  body { background: #fff !important; font-size: 11pt; }
  .nav, .footer, .enav, .e-lab, .stripe, .skip-link, #themeBtn, #themePanel, #themeBg, #themeFx, body::after { display: none !important; }
  body *, body *::before, body *::after { animation: none !important; transition: none !important; }
  body article { padding-inline: 0; }
  body .ehead { padding: 0 0 12pt; max-width: none; }
  body .pxe-essay { max-width: none; padding: 0; font-size: 11.5pt; line-height: 1.55; }
  body .pxe-essay h1, body .pxe-essay h1.long { font-size: 30pt; }
  body .pxe-essay h2 { font-size: 16pt; margin-top: 24pt; break-after: avoid; }
  body .pxe-essay p { orphans: 3; widows: 3; }
  body .pxe-essay figure, body .pxe-essay .chart-card { break-inside: avoid; }
  body .pxe-essay figure.photo img { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  body .pxe-essay figure.photo:not(.narrow) { width: 100% !important; margin-inline: 0 !important; }
  body .pxe-essay p a[href^="http"]::after { content: " (" attr(href) ")"; font: 8pt var(--sans); color: #555; word-break: break-all; }
  body .pxe-essay p.sources a[href]::after { content: none; }
  body article::after {
    content: "P.S. \00B7 pedrumshokouhi.com"; display: block; margin-top: 18pt;
    font: 600 8pt var(--sans); letter-spacing: .16em; text-transform: uppercase;
  }
  *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; }
}