/* ============================================================
   P.S. essay shell v4 ("Lit Paper")
   Each essay opens on its own lit object: a photograph that develops, a framed print, or one colossal figure.
   Then a 640px column of Georgia, with names and dates in the left margin, the quoted line in the right,
   figures drawn in the theme's own inks, and an end that hands you to the Lab and to the next essay.
   Every colour is a theme token, so all 16 themes hold. --e-tone (set per essay on body[data-essay]) tints
   figures, the opener and the lab card only; text never takes it.
   Motion: the opener plate develops once; figures Set as they arrive; the Planes bomber fills as you scroll.
   Nothing loops, and reduced motion gets the finished state at once.
   ============================================================ */

body { overflow-x: clip; }
body[data-essay] {
  --e-measure: 640px;
  --e-fs: clamp(18.5px, calc(.3vw + 16.4px), 20px);
  --e-pq-w: clamp(200px, 18vw, 260px);
  --e-mg-w: clamp(150px, 12.5vw, 184px);
  --e-wide: min(960px, 100vw - 2 * var(--gutter));
  --e-tone: var(--bronze);
  --e-deep: var(--espresso);
  --e-deep-sip: color-mix(in srgb, #8C1A14 70%, var(--dark));
  --e-deep-planes: color-mix(in srgb, var(--espresso) 52%, #2F3943);
}
body[data-essay="planes"] { --e-tone: color-mix(in srgb, var(--ink) 72%, #50606E); --e-deep: var(--e-deep-planes); }
body[data-essay="sip"] { --e-tone: color-mix(in srgb, #B3141B 70%, var(--ink)); --e-deep: var(--e-deep-sip); }
body[data-essay="referee"] { --e-tone: color-mix(in srgb, var(--bronze) 72%, var(--ink-2)); }

body article { padding: 0 var(--gutter); }
body main#main:focus { outline: none; }

body .pxe-essay {
  max-width: var(--e-measure); margin: 0 auto; padding: 0 0 clamp(40px, 6vw, 72px);
  color: var(--ink); font: 400 var(--e-fs)/1.62 var(--serif);
  counter-reset: e-part e-fig;
}

/* ============================================================
   THE OPENER. One per essay, never the same spread twice in a row.
   ============================================================ */
body .e-open {
  position: relative; width: 100vw; margin-inline: calc(50% - 50vw);
  color: var(--ink); isolation: isolate; overflow-x: clip;
}
body .e-open h1 {
  margin: 0; font: 400 var(--fs-d2)/1.02 var(--serif); letter-spacing: -.026em; color: var(--ink);
  text-wrap: balance; max-width: 16ch;
}
body .e-open h1.long { font-size: clamp(34px, 4.6vw, 58px); max-width: 20ch; letter-spacing: -.022em; }
body .e-open .kicker {
  margin: clamp(16px, 2vw, 24px) 0 0; max-width: 34em;
  font: italic 400 var(--fs-lede)/1.5 var(--serif); color: var(--ink-2); text-wrap: pretty; hyphens: manual;
}
@media (max-width: 600px) { body .e-open .kicker { font-size: 18px; line-height: 1.5; } }
/* the folio: one line under the dek */
body .e-folio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; margin: clamp(18px, 2.4vw, 28px) 0 0;
  font: var(--lbl-w) var(--lbl-s)/1.4 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase;
  color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums;
}
body .e-folio > span + span::before {
  content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%;
  background: currentColor; opacity: .55; vertical-align: .3em;
}
body .e-folio .no { color: var(--bronze); }
@media (max-width: 600px) {
  body .e-folio { gap: 4px 16px; }
  body .e-folio > span + span::before { content: none; }
}
body .e-open-no { margin: 0 0 14px; }
/* the caption under an opener plate */
body .e-open .e-cap { display: block; font: 400 13px/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty; }
body .e-open .credit2 { margin-top: 8px; }

/* the opener plate develops once, a beat after the page settles (a hero, so it does not wait for a hover) */
@media (prefers-reduced-motion: no-preference) {
  body .e-open .e-open-plate > img { animation: eDevelop var(--d-4) var(--ease-out) .9s both; }
}
@media (prefers-reduced-motion: reduce) {
  body .e-open .e-open-plate > img { filter: none; }
}
@keyframes eDevelop { from { filter: var(--plate-f); } to { filter: none; } }
body .e-open .plate--oil > img { animation: none; }

/* ---------- A: the photograph is the page ---------- */
body .e-open--a {
  display: grid; align-content: end; overflow: hidden;
  min-height: clamp(560px, calc(100svh - 81px), 980px);
  background-color: var(--paper);
}
body .e-open--a .e-open-plate { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; border-radius: 0; }
body .e-open--a .e-open-plate > img { object-position: var(--focal, 50% 40%); }
/* the scrim: the room's own dark rising from the floor, so the title always sits on shadow */
body .e-open--a .e-open-plate::after {
  opacity: 1; box-shadow: none;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--paper) 96%, transparent) 0%, color-mix(in srgb, var(--paper) 78%, transparent) 26%,
      color-mix(in srgb, var(--paper) 30%, transparent) 50%, transparent 72%),
    linear-gradient(to right, color-mix(in srgb, var(--paper) 74%, transparent) 0%, color-mix(in srgb, var(--paper) 42%, transparent) 34%, transparent 62%);
}
body .e-open h1 .nw { white-space: nowrap; }
body .e-open--a .e-open-in {
  width: min(var(--frame), 100% - 2 * var(--gutter)); margin: 0 auto;
  padding: 160px 0 clamp(44px, 5.4vw, 76px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 32px 56px; align-items: end;
}
body .e-open--a h1 { font-size: clamp(46px, 6.4vw, 100px); line-height: .98; letter-spacing: -.032em; max-width: 14ch; }
body .e-open--a .kicker { max-width: 31em; color: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
body .e-open--a .e-open-cap { margin: 0; padding-top: 14px; border-top: 1px solid var(--hair); }
/* a variant for photographs whose subject fills the middle: a cinematic band, the title set on the tarmac below it */
@media (min-width: 761px) {
  body .e-open--below { display: block; min-height: 0; }
  body .e-open--below .e-open-plate { position: relative; inset: auto; z-index: 0; aspect-ratio: 21 / 9; max-height: 60svh; width: 100%; }
  body .e-open--below h1 { max-width: 20ch; }
  body .e-open--below .e-open-plate::after {
    background: linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 60%, transparent) 16%, transparent 40%); }
  body .e-open--below .e-open-in { position: relative; z-index: 1; margin-top: -132px; padding-top: 0; }
}
/* a night photograph keeps its warm print: true colour there is sodium green */
body .e-open--mono .e-open-plate > img { animation: none; }
@media (max-width: 899px) {
  body .e-open--a .e-open-in { grid-template-columns: minmax(0, 1fr); }
  body .e-open--a .e-open-cap { max-width: 34em; }
}
@media (max-width: 760px) {
  body .e-open--a { display: block; min-height: 0; }
  body .e-open--a .e-open-plate { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 5; max-height: 66svh; width: 100%; }
  body .e-open--a .e-open-plate > img { object-position: var(--focal-m, var(--focal, 50% 40%)); }
  body .e-open--a .e-open-plate::after {
    background: linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 22%, transparent 48%); }
  body .e-open--a .e-open-in { position: relative; z-index: 1; margin-top: -96px; padding: 0 0 40px; gap: 28px; }
  body .e-open--a h1 { font-size: clamp(40px, 11.4vw, 52px); }
}

/* ---------- B: a print on the wall, its label card pinned over the corner ---------- */
body .e-open--b {
  display: grid; align-items: end;
  grid-template-columns: var(--frame-pad) minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: ". card plate" ". card cap";
  padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 104px);
  background-color: var(--vellum);
}
body .e-open--b .e-open-fig { display: contents; }
body .e-open--b .e-open-plate {
  grid-area: plate; align-self: start; justify-self: start; width: 100%; max-width: var(--plate-max, none);
  box-shadow: var(--elev-2); border-radius: 0;
}
body .e-open--b .e-open-fig figcaption {
  grid-area: cap; align-self: start; max-width: calc(var(--plate-max, 760px) + 124px);
  padding: 18px 0 0; padding-inline: 124px var(--gutter);
}
body .e-open--b .e-open-card {
  grid-area: card; z-index: 2; position: relative; align-self: end;
  margin-inline-end: -96px; padding: clamp(28px, 3.4vw, 48px) clamp(28px, 3.4vw, 52px) clamp(30px, 3.4vw, 44px);
  background: var(--paper); border-radius: var(--r-paper); box-shadow: var(--elev-3);
}
body .e-open--b .e-open-card h1 { font-size: clamp(38px, 4.4vw, 64px); }
@media (max-width: 899px) {
  body .e-open--b { display: flex; flex-direction: column; padding: 0 0 48px; }
  body .e-open--b .e-open-plate { order: 1; max-width: none; box-shadow: none; aspect-ratio: 4 / 3; }
  body .e-open--b .e-open-card { order: 2; margin: -56px var(--gutter) 0; }
  body .e-open--b .e-open-fig figcaption { order: 3; max-width: none; padding: 20px var(--gutter) 0; }
}

/* ---------- C: a framed print, hung under its title ---------- */
body .e-open--c {
  display: grid; justify-items: center; text-align: center;
  padding: clamp(40px, 4.4vw, 72px) var(--gutter) clamp(64px, 8vw, 112px);
}
body .e-open--c .e-open-tx { max-width: 1000px; display: grid; justify-items: center; }
body .e-open--c h1 { max-width: 20ch; }
body .e-open--c h1.long { max-width: 27ch; }
body .e-open--c .kicker { margin-inline: auto; }
body .e-open--c .e-folio { justify-content: center; }
body .e-open--c .e-open-fig { width: min(1120px, 100%); margin: clamp(28px, 3.6vw, 48px) 0 0; }
body .e-open--c figcaption { max-width: 640px; margin: 18px auto 0; text-align: left; }
body .e-open--c .frame-gilt { padding: 9px; }
body .e-open--c .frame-gilt::before { inset: 8px; }
@media (max-width: 760px) {
  body .e-open--c { text-align: left; justify-items: start; }
  body .e-open--c .e-open-tx { justify-items: start; }
  body .e-open--c .e-folio { justify-content: flex-start; }
  body .e-open--c .e-open-plate { aspect-ratio: 3 / 2; }
  body .e-open--c .kicker { margin-inline: 0; }
}
/* the painting beside its museum label */
body .e-open--side {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; justify-items: stretch; text-align: left;
  column-gap: clamp(36px, 5vw, 80px); padding-inline: var(--frame-pad);
}
body .e-open--side .e-open-fig { width: 100%; margin: 0; grid-row: 1; }
body .e-open--side .e-open-tx { justify-items: start; grid-row: 1; }
body .e-open--side .e-folio { justify-content: flex-start; }
body .e-open--side figcaption { margin: 18px 0 0; }
body .e-open--side .kicker { margin-inline: 0; }
@media (max-width: 899px) {
  body .e-open--side { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); row-gap: 36px; }
  body .e-open--side .e-open-tx { grid-row: 1; }
  body .e-open--side .e-open-fig { grid-row: 2; }
  body .e-open--side .e-open-plate { aspect-ratio: var(--ratio); }
}

/* ---------- TYPE: one colossal figure ---------- */
body .e-open--type { padding: clamp(48px, 6vw, 96px) var(--frame-pad) clamp(56px, 7vw, 104px); display: grid; }
body .e-stat {
  margin: 0; font-size: clamp(120px, 21vw, 300px); line-height: .82; color: var(--ink);
  letter-spacing: -.05em; font-family: var(--stat); font-weight: 200;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
body .e-stat .u {
  font: var(--lbl-w) max(11px, .075em)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin-inline-start: .12em; vertical-align: baseline;
}

/* 012: 2,851 miles under an arc from one coast to the other */
body .e-open--referee { justify-items: center; text-align: center;
  background-image: radial-gradient(56% 62% at 50% 40%, color-mix(in srgb, var(--vellum) 55%, #fff) 0%, transparent 72%); }
:root[data-tone="dark"] body .e-open--referee { background-image: radial-gradient(56% 62% at 50% 40%, color-mix(in srgb, var(--vellum) 88%, #fff) 0%, transparent 72%); }
body .e-open--referee .e-open-art { font-size: clamp(116px, 21vw, 300px); }
body .e-open--referee .e-span { position: relative; padding-top: .44em; }
body .e-open--referee .e-stat { font-size: 1em; }
body .e-arcbox { position: absolute; left: -.04em; right: -.04em; top: .06em; height: .38em; }
body .e-arc { display: block; width: 100%; height: 100%; overflow: visible; }
body .e-arc-p { fill: none; stroke: var(--e-tone); stroke-width: 1.25px; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
body .e-pin {
  position: absolute; bottom: 0.67%; display: inline-flex; align-items: center; gap: 10px;
  font: var(--lbl-w) 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
body .e-pin i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--e-tone); }
body .e-pin--a { left: 1.33%; transform: translate(calc(-100% + 4.5px), 50%); }
body .e-pin--b { left: 98.67%; transform: translate(-4.5px, 50%); }
body .e-arc-cap {
  display: none; justify-content: space-between; margin: 14px 0 0; font: var(--lbl-w) 11px/1.2 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-size: 11px;
}
body .e-open--referee .e-open-tx { display: grid; justify-items: center; margin-top: clamp(28px, 4vw, 48px); }
body .e-open--referee .kicker { margin-inline: auto; }
body .e-open--referee .e-folio { justify-content: center; }
@media (max-width: 600px) {
  body .e-open--referee .e-open-art { font-size: 29vw; }
  body .e-pin { font-size: 0; gap: 0; }
  body .e-pin--a { transform: translate(-4.5px, 50%); }
  body .e-pin--b { transform: translate(-4.5px, 50%); }
  body .e-arc-cap { display: flex; }
  body .e-open--referee { text-align: left; justify-items: start; }
  body .e-open--referee .e-open-art { justify-self: center; }
  body .e-open--referee .e-open-tx { justify-items: start; }
  body .e-open--referee .e-folio { justify-content: flex-start; }
  body .e-open--referee .kicker { margin-inline: 0; }
}

/* 005: two thirds, over three doors on a dark stage */
body .e-open--door {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 5vw, 88px);
}
body .e-open--door .e-open-art { display: grid; justify-items: start; }
body .e-open--door .e-stat { font-size: clamp(110px, 15vw, 220px); margin: 0 0 64px -.04em; }
body .e-slash { display: inline-block; margin: 0 -.06em; color: var(--ink-2); transform: translateY(-.02em); }
body .e-doors {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px);
  width: min(100%, 470px); padding-bottom: 52px; perspective: 900px;
}
body .e-door { position: relative; display: block; aspect-ratio: 5 / 11; }
/* the stage floor: a soft light pool the doors stand in */
body .e-doors::after {
  content: ""; position: absolute; left: -8%; right: -8%; top: calc(100% - 64px); height: 40px; z-index: -1;
  background: radial-gradient(50% 50% at 50% 30%, color-mix(in srgb, var(--on-dark) 14%, transparent), transparent 70%);
}
/* the frame is a recess in the wall; the leaf is lacquered wood with two sunk panels and a brass knob */
body .e-door::before {
  content: ""; position: absolute; inset: -6px -6px 0; border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--paper) 70%, #000); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}
body .e-door-leaf {
  position: absolute; inset: 0; display: block; border-radius: 2px 2px 0 0; transform-origin: 0 50%;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .10), transparent 30%, transparent 70%, rgba(0, 0, 0, .22)),
    linear-gradient(180deg, #6B4A33 0%, #4A3122 55%, #3A271B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 18px 30px -12px rgba(0, 0, 0, .6);
  transition: transform var(--d-3) var(--ease-out);
}
body .e-door-p {
  position: absolute; left: 16%; right: 16%; border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .12), 0 1px 0 rgba(255, 255, 255, .06);
}
body .e-door-p:nth-child(1) { top: 9%; height: 36%; }
body .e-door-p:nth-child(2) { top: 52%; height: 38%; }
body .e-door-k {
  position: absolute; right: 12%; top: 49%; width: 9%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F5D9A8, #B58756 55%, #6E4A24);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
body .e-door-n {
  position: absolute; left: 50%; top: -34px; translate: -50% 0;
  font: 400 18px/1 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums;
}
/* door three stands open on darkness; door two keeps a thread of light at its edge */
body .e-door--3 .e-door-leaf { transform: rotateY(-38deg); }
body .e-door--3::before { background: #050505; }
body .e-door--2::after {
  content: ""; position: absolute; right: -2px; top: 4%; bottom: 0; width: 2px; z-index: 2;
  background: var(--accent); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 60%, transparent); opacity: .9;
}
body .e-door-br {
  position: absolute; bottom: 0; padding-top: 14px; text-align: center;
  font: var(--lbl-w) 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  background: linear-gradient(var(--hair-strong), var(--hair-strong)) 0 0 / 100% 1px no-repeat;
}
body .e-door-br::before, body .e-door-br::after {
  content: ""; position: absolute; top: -6px; width: 1px; height: 7px; background: var(--hair-strong);
}
body .e-door-br::before { left: 0; } body .e-door-br::after { right: 0; }
body .e-door-br--1 { inset-inline-start: 0; width: calc((100% - 2 * clamp(12px, 1.6vw, 22px)) / 3); }
body .e-door-br--2 { inset-inline-end: 0; width: calc((100% - 2 * clamp(12px, 1.6vw, 22px)) * 2 / 3 + clamp(12px, 1.6vw, 22px)); color: var(--ink); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body .e-door--1:hover .e-door-leaf, body .e-door--2:hover .e-door-leaf { transform: rotateY(-14deg); }
}
@media (max-width: 899px) {
  body .e-open--door { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  body .e-doors { width: min(100%, 340px); }
  body .e-door-br { white-space: nowrap; letter-spacing: .05em; }
  body .e-open--door .e-stat { margin-bottom: 52px; }
}

/* 003: seventy-nine days, on cola red */
body .e-open--sip {
  grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 5vw, 80px); row-gap: clamp(36px, 4vw, 56px);
  background-image: radial-gradient(90% 120% at 22% 30%, color-mix(in srgb, var(--wall) 80%, #fff) 0%, transparent 60%),
    linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--wall) 70%, #000));
}
body .e-open--sip .e-open-art { display: contents; }
body .e-open--sip .e-stat { grid-column: 1; grid-row: 1; font-size: clamp(150px, 24vw, 340px); margin-left: -.05em; }
body .e-open--sip .e-open-tx { grid-column: 2; grid-row: 1; }
body .e-open--sip .e-open-tx { padding-bottom: .4em; }
body .e-days { grid-column: 1 / -1; grid-row: 2; }
body .e79 { display: block; width: 100%; height: auto; overflow: visible; }
body .e79 .d79 { fill: color-mix(in srgb, var(--ink) 26%, transparent); }
body .e79 .d79:first-child, body .e79 .d79:nth-child(79) { fill: var(--ink); }
body .e79 .d79-m { stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
body .e79 .d79-end { stroke: var(--ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
body .e79 .d79-l { fill: var(--ink-2); font: var(--lbl-w) 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
body .e79 .d79-br { fill: none; stroke: var(--ink-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
body .e79--phone { display: none; margin-top: 4px; }
@media (max-width: 760px) { body .e79--phone { display: block; } }
body .e-days-l {
  display: flex; justify-content: space-between; gap: 16px; margin: 12px 0 0;
  font: var(--lbl-w) var(--lbl-s)/1.4 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--ink);
}
@media (max-width: 760px) {
  body .e-open--sip { grid-template-columns: minmax(0, 1fr); }
  body .e-open--sip .e-open-tx { grid-column: 1; grid-row: 3; padding: 0; }
  body .e-open--sip .e-days { grid-row: 2; }
  body .e-open--sip .e-stat { font-size: 44vw; }
  /* phones get their own strip: one row per month, each day under its date, the type at 11px */
  body .e79:not(.e79--phone) { display: none; }
  body .e-days-l { flex-direction: column; gap: 4px; }
  body .e-days-l span:last-child { text-align: right; }
}

/* 008: twenty, struck in foil, over the card itself */
body .e-open--twenty { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 5vw, 88px); }
body .e-open--twenty .e-open-art { display: grid; }
body .e-open--twenty .e-stat { font-size: clamp(170px, 25vw, 360px); margin-left: -.06em; letter-spacing: -.06em; padding-right: .1em; }
body .e-open--twenty .e-stat-u { margin: 10px 0 0; color: var(--ink-2); }
body .e-open--twenty .e-open-tx { padding-bottom: 12px; }
body .e-strip { grid-column: 1 / -1; width: min(100%, 1120px); justify-self: center; margin: clamp(40px, 5vw, 64px) 0 0; }
body .e-strip .plate { box-shadow: var(--elev-3); border-radius: 2px; }
body .e-strip .plate > img { scale: 1.06; }
body .e-strip figcaption { max-width: 640px; margin-top: 16px; }
@media (max-width: 760px) {
  body .e-open--twenty { grid-template-columns: minmax(0, 1fr); }
  body .e-open--twenty .e-stat { font-size: 58vw; }
  body .e-open--twenty .e-open-art { margin-bottom: 24px; }
  body .e-strip .plate { aspect-ratio: 5 / 2; }
}

/* ============================================================
   THE COLUMN
   ============================================================ */
body .pxe-essay > .e-open { margin-bottom: clamp(56px, 7vw, 96px); }
body .pxe-essay p { hanging-punctuation: first; text-wrap: pretty; font-variant-numeric: oldstyle-nums proportional-nums; hyphens: manual; -webkit-hyphens: manual; }
body .pxe-essay > p, body .pxe-essay > .e-end p { margin: 0 0 1lh; }
body .pxe-essay > p { margin: 0 0 1.62em; margin: 0 0 1lh; }

/* the way in: a drop cap three lines deep, and the first five words set a touch larger */
body .pxe-essay .e-first::first-letter {
  float: left; font-size: 4.2em; line-height: .78; padding: .1em .12em 0 0; color: var(--ink); font-weight: 400;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  body .pxe-essay .e-first::first-letter {
    float: none; font-size: inherit; line-height: inherit; padding: 0 .14em 0 0;
    -webkit-initial-letter: 3; initial-letter: 3;
  }
}
body .pxe-essay .e-lead { font-size: 1.06em; letter-spacing: .02em; }

body .pxe-essay a:not(.ps-cap):not(.e-lab-card):not(.credit2 a) {
  color: inherit; text-decoration: underline 1px var(--hair-strong); text-underline-offset: 4px; text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--d-1) var(--ease-out);
}
@media (hover: hover) { body .pxe-essay p a:hover { text-decoration-color: currentColor; } }

/* the end mark: a small square of ink closes the last paragraph */
body .pxe-essay > p:has(+ hr)::after, body .pxe-essay > p:has(+ .pq + hr)::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .38em;
  vertical-align: .04em; background: var(--ink); border-radius: var(--r-paper);
}

/* part titles: a Georgia numeral in bronze, then the title */
body .pxe-essay > h2 {
  clear: both; margin: clamp(72px, 9vw, 112px) 0 24px; counter-increment: e-part;
  font: 400 var(--fs-h2)/1.12 var(--serif); letter-spacing: -.018em; text-wrap: balance; color: var(--ink);
}
body .pxe-essay > h2::before {
  content: counter(e-part, upper-roman); content: counter(e-part, upper-roman) / "";
  display: table; margin-bottom: 18px; padding-inline-end: 40px;
  font: 400 16px/1 var(--serif); letter-spacing: .14em; color: var(--bronze); font-variant-numeric: lining-nums;
  background: linear-gradient(var(--bronze), var(--bronze)) right 58% / 26px 1px no-repeat;
}

/* section breaks (Planes and Sip): an ornament and a numeral, no title */
body .e-break {
  clear: both; display: grid; justify-items: center; gap: 14px; margin: clamp(56px, 7vw, 88px) auto clamp(36px, 4.4vw, 52px);
}
body .pxe-essay > .e-open + .e-break { margin-top: clamp(48px, 6vw, 80px); }
body .e-orn {
  position: relative; display: block; width: 132px; height: 9px;
  background: linear-gradient(var(--hair-strong), var(--hair-strong)) left 50% / 52px 1px no-repeat,
              linear-gradient(var(--hair-strong), var(--hair-strong)) right 50% / 52px 1px no-repeat;
}
body .e-orn::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg;
  border: 1px solid var(--bronze);
}
body .e-roman { font: 400 18px/1 var(--serif); letter-spacing: .16em; color: var(--bronze); font-variant-numeric: lining-nums; }

/* ---------- pull quotes: a line from two paragraphs away ---------- */
body .pxe-essay .pq {
  display: block; margin: 8px 0 1lh; padding: 4px 0; padding-inline-start: 22px; border-inline-start: 2px solid var(--accent);
  font: italic 400 clamp(30px, 7.6vw, 34px)/1.2 var(--serif); letter-spacing: -.014em; color: var(--ink);
  text-wrap: balance; hanging-punctuation: first; font-variant-numeric: oldstyle-nums;
}
@media (max-width: 759px) { body .pxe-essay .pq--x { display: none; } }
body .pxe-essay .pq .pq-by {
  display: block; margin-top: 12px; font: var(--lbl-w) var(--lbl-s)/1.3 var(--sans); font-style: normal; letter-spacing: var(--trk-s);
  text-transform: uppercase; color: var(--ink-2);
}
@media (min-width: 760px) and (max-width: 1179px) { body .pxe-essay .pq { font-size: 32px; margin-inline-start: 1em; } }
@media (min-width: 1180px) {
  body .pxe-essay .pq {
    float: right; clear: right; width: var(--e-pq-w); margin: .35em calc(-1 * (var(--e-pq-w) + 52px)) 28px 0;
    padding: 16px 0 0; border-inline-start: 0; border-top: 2px solid var(--accent);
    font-size: clamp(22px, 1.85vw, 27px); line-height: 1.24;
  }
}

/* ---------- marginalia: names, dates and places, in the left margin ---------- */
body .mg { display: block; margin: 0 0 12px; font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); }
body .mg summary {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 24px; cursor: pointer; list-style: none;
  font: var(--lbl-w) var(--lbl-m)/1.4 var(--sans); letter-spacing: var(--trk-m); text-transform: uppercase; color: var(--ink-2);
}
body .mg summary::-webkit-details-marker { display: none; }
body .mg summary::before {
  content: "+"; font: 400 14px/1 var(--sans); color: var(--bronze); letter-spacing: 0; transition: rotate var(--d-2) var(--ease-out);
}
body .mg[open] summary::before { rotate: 45deg; }
body .mg .mg-b { display: block; padding: 2px 0; padding-inline-start: 20px; font-style: italic; font-family: var(--serif); font-size: 15px; }
body .mg--k { display: none; }
@media (min-width: 1180px) {
  body .mg, body .mg--k {
    display: block; float: left; clear: left; width: var(--e-mg-w);
    margin: .45em 0 20px calc(-1 * (var(--e-mg-w) + 52px)); padding-top: 10px; border-top: 1px solid var(--hair);
  }
  body .mg summary, body .mg--k > span {
    display: block; min-height: 0; cursor: default; pointer-events: none;
    font: var(--lbl-w) 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  }
  body .mg summary::before { content: none; }
  body .mg .mg-b { padding: 4px 0 0; font: 400 12.5px/1.45 var(--sans); font-style: normal; color: var(--ink-2); }
}

/* ---------- margin portraits ---------- */
/* a dark source (a deep print, a night photograph) is lifted so the warm mono never crushes it to black */
body .plate--lift { --plate-f: grayscale(1) sepia(.18) contrast(.86) brightness(1.3); }
body .pxe-essay .e-margin {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: center;
  margin: 0 0 1.4em; padding: 12px 0; border-block: 1px solid var(--hair);
}
body .pxe-essay .e-margin figcaption { margin: 0; }
body .pxe-essay .e-margin .plate { box-shadow: var(--elev-1); }

body .pxe-essay .e-margin .e-margin-n { display: block; font: var(--lbl-w) var(--lbl-m)/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
body .pxe-essay .e-margin .credit2 { margin-top: 4px; font-size: 11px; letter-spacing: .04em; }
@media (min-width: 1180px) {
  body .pxe-essay .e-margin { display: block; float: left; clear: left; width: 160px; margin: .4em 0 24px -212px; padding: 0; border: 0; }
  body .pxe-essay .e-margin figcaption { margin-top: 10px; }
}

/* ---------- figures ---------- */
body .pxe-essay > figure { margin: clamp(40px, 5.5vw, 64px) 0; }
body .pxe-essay .e-fig figcaption, body .pxe-essay figure > figcaption {
  margin-top: 14px; font: 400 13px/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty;
}
body .pxe-essay .e-fig .e-cap, body .pxe-essay .e-plan .e-cap { display: block; }
body .pxe-essay figure .credit2 { margin-top: 8px; }
body .pxe-essay figcaption .credit {
  display: block; margin-top: 6px; font: var(--lbl-w) var(--lbl-s)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
body .pxe-essay .e-fig--wide, body .pxe-essay .e-fig--bleed { clear: both; }
body .pxe-essay .e-fig--wide { width: var(--e-wide); margin-inline: calc((100% - var(--e-wide)) / 2); }
body .pxe-essay .e-fig--wide figcaption { max-width: var(--e-measure); margin-inline: auto; }
body .pxe-essay .e-fig--bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
body .pxe-essay .e-fig--bleed .plate { border-radius: 0; max-height: 86svh; }
body .pxe-essay .e-fig--bleed figcaption { width: min(var(--e-measure), 100vw - 2 * var(--gutter)); margin-inline: auto; }
body .pxe-essay .e-fig .frame-gilt .plate { border-radius: 0; }
@media (max-width: 760px) { body .pxe-essay .e-fig--bleed .plate { aspect-ratio: 4 / 3; } }
/* the narrow figure: the print beside its caption */
body .pxe-essay .e-fig--narrow { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 28px; align-items: end; }
body .pxe-essay .e-fig--narrow figcaption { margin: 0; padding-top: 14px; border-top: 1px solid var(--hair); }
body .pxe-essay .e-fig--narrow .plate { box-shadow: var(--elev-2); }
@media (max-width: 680px) {
  body .pxe-essay .e-fig--narrow { grid-template-columns: minmax(0, 1fr); }
  body .pxe-essay .e-fig--narrow .plate { width: min(100%, 320px); margin: 0 auto; }
  body .pxe-essay .e-fig--narrow figcaption { margin-top: 18px; }
}
/* a diagram or an object on a pale card: printed on paper in every room */
body .e-mat { background: #F7F5EF; }
body .e-mat > img { mix-blend-mode: multiply; filter: none; object-fit: contain; padding: 6%; }
body .e-fig--diagram .plate { box-shadow: var(--elev-1); }
/* the small inset (Planes) and the margin object (Sip) */
body .pxe-essay .e-inset { width: min(100%, 300px); margin: clamp(32px, 4vw, 48px) auto; }
body .pxe-essay .e-inset .plate { box-shadow: var(--elev-1); }
body .pxe-essay .e-object { float: right; clear: right; width: 96px; margin: .3em 0 12px 18px; }
body .pxe-essay .e-object .e-mat > img { padding: 4%; }
body .pxe-essay .e-object figcaption .e-cap, body .pxe-essay .e-inset figcaption .e-cap { font-size: 12px; }
body .pxe-essay .e-object .credit2 { font-size: 11px; letter-spacing: .04em; }
@media (min-width: 1180px) {
  body .pxe-essay .e-inset { float: right; clear: right; width: var(--e-pq-w); margin: .3em calc(-1 * (var(--e-pq-w) + 52px)) 24px 0; }
  body .pxe-essay .e-object { width: 150px; margin: .3em -202px 24px 0; }
}

/* ---------- the Planes plate: the bomber on a dark ground, filling with holes as you read ---------- */
body .pxe-essay .e-plan {
  clear: both; width: min(1100px, 92vw); margin-inline: calc((100% - min(1100px, 92vw)) / 2);
  padding: clamp(36px, 5vw, 72px) clamp(16px, 4vw, 64px) clamp(28px, 3.6vw, 48px);
  border-radius: var(--r-paper); box-shadow: var(--elev-3);
  background-image: radial-gradient(70% 70% at 50% 42%, color-mix(in srgb, var(--wall) 82%, #fff) 0%, transparent 70%);
  view-timeline: --plan block;
}
body .pxe-essay .e-plan svg { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; overflow: visible; }
body .pxe-essay .e-plan figcaption { max-width: var(--e-measure); margin: 24px auto 0; }
body .bomber .b-air { fill: color-mix(in srgb, var(--wall) 82%, var(--on-dark)); stroke: color-mix(in srgb, var(--on-dark) 70%, transparent); stroke-width: 1.2; stroke-linejoin: round; }
body .bomber .b-air * { vector-effect: non-scaling-stroke; }
body .bomber .b-d { fill: none; stroke-width: .75; opacity: .5; }
body .bomber .b-hit circle { fill: var(--on-dark); r: 1.6px; }
body .bomber .b-hatch-bg { fill: color-mix(in srgb, var(--wall) 70%, var(--on-dark)); }
body .bomber .b-hatch-ln { stroke: var(--accent); stroke-width: 2.2; }
body .bomber .b-eng rect { fill: url(#bHatch); stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
body .bomber .b-lead { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
body .bomber .b-no { fill: var(--on-dark); font: 400 18px var(--serif); font-style: italic; }
body .bomber .b-no2 { fill: var(--on-dark); font: 400 12.5px var(--sans); letter-spacing: .02em; }
@media (max-width: 760px) {
  body .bomber .b-hit circle { r: 2.4px; }
  /* the SVG draws at about .7 here: 27 and 18 units read near 19px and 13px */
  body .bomber .b-no { font-size: 27px; }
  body .bomber .b-no2 { font-size: 18px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body .pxe-essay .e-plan .b-hit circle { animation: eHole linear both; animation-timeline: --plan; transform-box: fill-box; transform-origin: center; }
    /* the holes land while the plate rises into view; the engines and the note finish with the label still well below the bar */
    body .pxe-essay .e-plan .b-hit--w circle { animation-range: entry 60% contain 0%; }
    body .pxe-essay .e-plan .b-hit--f circle { animation-range: contain 0% contain 10%; }
    body .pxe-essay .e-plan .b-hit--t circle { animation-range: contain 8% contain 18%; }
    body .pxe-essay .e-plan .b-eng, body .pxe-essay .e-plan .b-note { animation: eHatch linear both; animation-timeline: --plan; animation-range: contain 5% contain 30%; }
  }
}
@keyframes eHole { from { opacity: 0; scale: .2; } 60% { opacity: 1; scale: 1.25; } to { opacity: 1; scale: 1; } }
@keyframes eHatch { from { opacity: 0; } }

/* ---------- charts: no card, a 1px rule, a numbered label, the theme's own inks ---------- */
body .pxe-essay figure:has(> .chart-card) { counter-increment: e-fig; }
body .pxe-essay .chart-card {
  background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 14px 0 0;
  font-family: var(--sans); line-height: 1.4;
}
body .pxe-essay .chart-card::before {
  content: "Fig. " counter(e-fig); content: "Fig. " counter(e-fig) / "";
  display: block; margin-bottom: 18px; font: var(--lbl-w) 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze);
}
body .pxe-essay .chart-card h3 {
  margin: 0 0 6px; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
body .pxe-essay .chart-card .sub {
  margin: 0 0 22px; max-width: 52ch; font: 400 13px/1.45 var(--sans); color: var(--ink-2); text-wrap: balance;
}
body .pxe-essay .chart-card svg { display: block; width: 100%; height: auto; overflow: visible; font-variant-numeric: lining-nums tabular-nums; }
body .pxe-essay .chart-card svg text { font-family: var(--num); }
body .pxe-essay .chart-label { font-size: 12px; fill: var(--ink-2); }
body .pxe-essay .chart-value { font-size: 13px; font-weight: 600; letter-spacing: .01em; fill: var(--ink); }
body .pxe-essay .chart-cat { font-size: 13px; fill: var(--ink); }
body .pxe-essay .chart-card text[font-weight] { font-weight: 600; }
/* the inks */
body .pxe-essay { --blue: color-mix(in srgb, var(--ink) 58%, var(--paper)); --red: var(--e-tone); --grid: var(--hair); --baseline: var(--hair-strong);
  --hl: var(--accent); --muted: var(--ink-2); }
:root:is([data-theme="riso"], [data-theme="play"]) body .pxe-essay { --hl: color-mix(in srgb, var(--accent) 90%, var(--ink)); }
:root[data-theme="void"] body .pxe-essay { --blue: color-mix(in srgb, var(--ink) 58%, var(--paper)); }
body .pxe-essay .chart-card [data-hl] { fill: var(--hl); }
body .pxe-essay .chart-card [data-hl] + text[fill="#ffffff"] { fill: color-mix(in srgb, var(--dark) 70%, #000); }
:root[data-theme="riso"] body .pxe-essay .chart-card [data-hl] + text[fill="#ffffff"] { fill: #000; }
body .pxe-essay .chart-card .bar:not([data-hl]):has(+ text[fill="#ffffff"]) { fill: color-mix(in srgb, var(--ink) 74%, var(--paper)); }
body .pxe-essay .chart-card circle[r="4.5"] { fill: var(--paper); 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; }
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(--paper)); }
body .pxe-essay svg [fill="#5598e7"] { fill: color-mix(in srgb, var(--ink) 50%, var(--paper)); }
body .pxe-essay svg [fill="#2a78d6"] { fill: color-mix(in srgb, var(--ink) 74%, var(--paper)); }
body .pxe-essay svg [fill="#184f95"] { fill: var(--accent); }
body .pxe-essay svg [fill="#b9b8b0"] { fill: color-mix(in srgb, var(--ink) 30%, var(--paper)); }
/* the new figures' classes */
body .pxe-essay .chart-card svg text.f-big { font-family: var(--stat); font-weight: 200; fill: var(--ink); letter-spacing: -.03em; }
body .pxe-essay .f-base { stroke: var(--hair-strong); stroke-width: 1; fill: none; }
body .pxe-essay .f-grid { stroke: var(--hair); stroke-width: 1; }
body .pxe-essay .f-tick { stroke: var(--hair-strong); stroke-width: 1; }
body .pxe-essay .f-lead { stroke: var(--hair-strong); stroke-width: 1; stroke-dasharray: 2 3; }
body .pxe-essay .f-axis { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
body .pxe-essay .f-trend { fill: none; stroke: var(--e-tone); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
body .pxe-essay .chart-card circle.f-dot { fill: var(--paper); stroke: var(--e-tone); stroke-width: 1.75; }
body .pxe-essay .chart-card circle[data-hl] { fill: var(--hl); stroke: var(--hl); }
body .pxe-essay .f-yr { font-size: 15px; fill: var(--ink); font-weight: 600; }
body .pxe-essay .f-cell { fill: none; stroke: var(--hair-strong); stroke-width: 1; }
body .pxe-essay .f-cell.is-on { fill: var(--e-tone); stroke: none; }
body .pxe-essay .f-cell.is-on[data-hl] { fill: var(--hl); }
body .pxe-essay .f-band { fill: color-mix(in srgb, var(--e-tone) 13%, transparent); }
body .pxe-essay .f-band-edge { stroke: var(--e-tone); stroke-width: 1; stroke-dasharray: 3 4; }
body .pxe-essay .f-up { fill: var(--e-tone); }
body .pxe-essay .f-mid { fill: color-mix(in srgb, var(--ink) 30%, var(--paper)); }
body .pxe-essay .f-dn { fill: color-mix(in srgb, var(--ink) 66%, var(--paper)); }
/* riso's blue ink is light at 66%: the falling bars carry their own labels on phones, so they go deeper there */
:root[data-theme="riso"] body .pxe-essay .f-dn { fill: color-mix(in srgb, var(--ink) 80%, var(--paper)); }
body .pxe-essay .f-cas-body { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.25; }
body .pxe-essay .f-cas-win { fill: color-mix(in srgb, var(--e-tone) 40%, var(--paper)); }
body .pxe-essay .chart-card .f-brace, body .pxe-essay .chart-card .f-brace[data-hl] { fill: none; stroke: var(--hl); stroke-width: 1.5; }
body .pxe-essay .f-area { fill: color-mix(in srgb, var(--e-tone) 9%, transparent); stroke: none; }
body .pxe-essay .f-soft { fill: color-mix(in srgb, var(--ink) 12%, var(--paper)); }
body .pxe-essay .f-tone { fill: var(--e-tone); }
body .pxe-essay .f-ink { fill: var(--ink); }
body .pxe-essay .f-knock { fill: var(--paper); font-size: 13px; font-weight: 600; }
body .pxe-essay .f-zoom { fill: none; stroke: var(--hair-strong); stroke-width: 1; stroke-dasharray: 2 3; }
body .pxe-essay .f-stop-ink { stop-color: var(--e-tone); }
body .pxe-essay .f-stop-none { stop-color: var(--e-tone); stop-opacity: 0; }
body .pxe-essay .f-arrow { fill: var(--hl); }
body .pxe-essay .f-knock--s { font-size: 12px; }
/* a figure's one number, set above its drawing */
body .pxe-essay .chart-card .f-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 4px 0 26px; }
body .pxe-essay .chart-card .f-stat-n { font-size: clamp(76px, 9vw, 112px); line-height: .82; letter-spacing: -.05em; color: var(--ink); }
body .pxe-essay .chart-card .f-stat-l { max-width: 24ch; font: 400 15px/1.4 var(--sans); color: var(--ink-2); text-wrap: balance; }
/* Sip: the cup and the can */
body .pxe-essay .su-glass { fill: color-mix(in srgb, var(--ink) 4%, var(--paper)); stroke: var(--ink-2); stroke-width: 1.25; }
body .pxe-essay .su-liquid { fill: var(--e-tone); }
body .pxe-essay .su-rim { stroke: var(--ink); stroke-width: 1.5; }
body .pxe-essay .su-body { fill: var(--e-tone); }
body .pxe-essay .su-band { fill: color-mix(in srgb, var(--e-tone) 82%, #000); }
body .pxe-essay .su-lid { fill: color-mix(in srgb, var(--ink) 22%, var(--paper)); stroke: var(--ink-2); stroke-width: 1; }
body .pxe-essay .su-tab { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
/* Sip: the ladder. Brass rails lit from the left, a contact shadow on the floor; the rungs recede as they climb:
   the sip is solid and lit, the can flat, the habit hatched, and love hatched and faint, still there */
body .pxe-essay .lad-rail { stroke: color-mix(in srgb, var(--bronze) 80%, var(--ink)); stroke-linecap: round; }
body .pxe-essay .lad-rail-hi { stroke: color-mix(in srgb, var(--bronze) 50%, #fff); stroke-width: 1.75; stroke-linecap: round; opacity: .8; }
body .pxe-essay .lad-rail-lo { stroke: color-mix(in srgb, var(--bronze) 45%, #000); stroke-width: 2; stroke-linecap: round; opacity: .55; }
body .pxe-essay .lad-ground { stroke: var(--hair-strong); stroke-width: 1; }
body .pxe-essay .lad-sh0 { stop-color: #000; stop-opacity: .2; }
body .pxe-essay .lad-sh1 { stop-color: #000; stop-opacity: 0; }
:root[data-tone="dark"] body .pxe-essay .lad-sh0 { stop-opacity: .55; }
body .pxe-essay .lad-lit0 { stop-color: color-mix(in srgb, var(--e-tone) 58%, #fff); }
body .pxe-essay .lad-lit1 { stop-color: var(--e-tone); }
body .pxe-essay .lad-lit2 { stop-color: color-mix(in srgb, var(--e-tone) 68%, #000); }
body .pxe-essay .lad-h { stroke: var(--e-tone); stroke-width: 1.5; }
body .pxe-essay .lad-rung.f-r2 { fill: color-mix(in srgb, var(--e-tone) 52%, var(--paper)); stroke: color-mix(in srgb, var(--e-tone) 70%, var(--paper)); stroke-width: 1; }
body .pxe-essay .lad-rung.f-r3 { stroke: color-mix(in srgb, var(--e-tone) 70%, var(--paper)); stroke-width: 1; }
body .pxe-essay .lad-rung.f-r4 { stroke: var(--e-tone); stroke-width: 1.25; stroke-dasharray: 3 3; }
body .pxe-essay .lad-far { opacity: .35; }
body .pxe-essay .chart-card svg .lad-cat { font-size: 15px; }
@media (max-width: 560px) { body .pxe-essay .chart-card svg.chart-phone .lad-cat { font-size: 14px; } }
/* Ten-Minute Turn: two clocks and four planes */
body .pxe-essay .tt-face { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
body .pxe-essay .tt-tick { stroke: var(--ink-2); stroke-width: 1; }
body .pxe-essay .tt-tick--q { stroke: var(--ink); stroke-width: 1.5; }
body .pxe-essay .tt-w { fill: color-mix(in srgb, var(--e-tone) 78%, transparent); }
body .pxe-essay .tt-w2 { fill: color-mix(in srgb, var(--e-tone) 28%, transparent); }
body .pxe-essay .tt-w--hl { fill: var(--hl); }
body .pxe-essay .tt-p { fill: var(--ink); }
body .pxe-essay .tt-p--sold { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 2; }
/* Twenty Slots: the card itself */
body .pxe-essay .pc-card { fill: color-mix(in srgb, var(--e-tone) 12%, var(--paper)); stroke: var(--e-tone); stroke-width: 1.25; }
body .pxe-essay .pc-slot { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1; }
/* the card's imprint was set over slots 1 to 3; it prints along the free strip at the foot of the card instead,
   square with the first column of slots */
body .pxe-essay .chart-card .pc-t { transform: translate(10px, 132px); }
/* a ledger figure: two columns of words, set like a table of contents */
body .pxe-essay .e-ledger { border-top: 1px solid var(--hair-strong); }
body .pxe-essay .e-ledger > div { grid-template-columns: minmax(140px, 42%) minmax(0, 1fr); padding: 12px 0 13px; }
body .pxe-essay .e-ledger dt { font: 400 17px/1.4 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
body .pxe-essay .e-ledger dd { font: italic 400 17px/1.4 var(--serif); color: var(--ink-2); }
body .pxe-essay .e-ledger-h {
  display: grid; grid-template-columns: minmax(140px, 42%) minmax(0, 1fr); column-gap: 24px; padding-bottom: 10px;
  font: var(--lbl-w) var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--ink-2);
}
@media (max-width: 480px) {
  body .pxe-essay .e-ledger > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  body .pxe-essay .e-ledger dt, body .pxe-essay .e-ledger dd { font-size: 16px; }
  body .pxe-essay .e-ledger-h { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
}
/* phones: each chart keeps its labels at 12px or more */
body .pxe-essay .chart-card svg.chart-phone { display: none; }
@media (max-width: 560px) {
  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; }
  body .pxe-essay .chart-card svg.chart-phone .chart-label { font-size: 12px; }
  body .pxe-essay .chart-card svg.chart-phone .chart-cat { font-size: 13px; }
  body .pxe-essay .chart-card svg.chart-phone .chart-value { font-size: 13px; }
  /* drawings without a phone version scale to the column; their SVG units grow so the type stays near 12px */
  body .pxe-essay .chart-card:not(:has(svg.chart-phone)):not(.chart-card--wide) :is(.chart-label, .chart-cat) { font-size: 21px; }
  body .pxe-essay .chart-card:not(:has(svg.chart-phone)):not(.chart-card--wide) .chart-value { font-size: 22px; }
  body .pxe-essay .chart-card:not(:has(svg.chart-phone)):not(.chart-card--wide) .f-big { font-size: 44px; }
  body .pxe-essay .chart-card:not(.chart-card--wide) text.chart-label[x="70"][text-anchor="middle"] { text-anchor: start; }
  body .pxe-essay .chart-card--wide {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
    -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 - 2 * var(--gutter)); }
  body .pxe-essay .chart-card--wide::before { position: sticky; left: 0; }
}
/* a breakout chart (Referee's price sort) */
body .pxe-essay figure.e-chart--wide { width: min(960px, 92vw); margin-inline: calc((100% - min(960px, 92vw)) / 2); clear: both; }
body .pxe-essay figure.e-chart--wide figcaption { max-width: var(--e-measure); margin-inline: auto; }
@media (max-width: 560px) { body .pxe-essay figure.e-chart--wide { width: 100%; margin-inline: 0; } }
/* figures Set as they arrive: bars rise from their baseline (the 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; }
    body .pxe-essay .chart-card .f-cell.is-on { animation: eCell linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}
@keyframes psBar { from { scale: 1 0; } }
@keyframes psBarH { from { scale: 0 1; } }
@keyframes eCell { from { opacity: .15; } }

/* ---------- photographs in the column ---------- */
body .pxe-essay .e-fig .plate { box-shadow: 0 0 0 1px var(--hair); }
body .pxe-essay .e-fig--bleed .plate { box-shadow: none; }
body .pxe-essay .e-fig .frame-gilt { box-shadow: var(--elev-3); }

/* the asterism before the notes */
body .pxe-essay hr {
  clear: both; border: 0; width: auto; height: auto; background: none; overflow: visible;
  margin: clamp(64px, 8vw, 96px) auto; text-align: center; color: var(--ink-2);
}
body .pxe-essay hr::before { content: "*\2009*\2009*"; content: "*\2009*\2009*" / ""; display: block; font: 400 1.4em/1 var(--serif); letter-spacing: .08em; }

/* ============================================================
   THE END: notes, pictures, the Lab, the author
   ============================================================ */
body .e-end {
  width: var(--e-wide); margin-inline: calc((100% - var(--e-wide)) / 2);
  display: grid; gap: clamp(40px, 5vw, 56px); font-family: var(--sans);
}
body .e-end-h {
  margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--ink);
  font: var(--lbl-w) 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
body .e-notes, body .e-pics { list-style: none; margin: 0; padding: 0; counter-reset: e-note; }
body .e-notes li {
  counter-increment: e-note; position: relative; padding-inline-start: 30px; margin: 0 0 14px; break-inside: avoid;
  font: 400 14px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; font-variant-numeric: lining-nums;
}
body .e-notes li::before {
  content: counter(e-note); position: absolute; inset-inline-start: 0; top: .1em;
  font: 400 14px/1.5 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums tabular-nums;
}
body .e-notes a { color: var(--ink); text-decoration: underline 1px var(--hair-strong); text-underline-offset: 3px; }
@media (hover: hover) { body .e-notes a:hover { text-decoration-color: currentColor; } }
@media (min-width: 900px) { body .e-notes { columns: 2; column-gap: 48px; } }
body .e-pics { display: grid; gap: 0; }
@media (min-width: 900px) { body .e-pics { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
body .e-pics li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
  padding: 12px 0 13px; border-bottom: var(--hair-w) solid var(--hair);
}
body .e-pic-t { grid-column: 1; font: 400 15px/1.4 var(--serif); color: var(--ink); text-wrap: pretty; }
body .e-pic-a { grid-column: 1; font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
body .e-pic-l {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap;
  font: var(--lbl-w) var(--lbl-s)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze);
  text-decoration: none; padding: 12px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size var(--d-2) var(--ease-out);
}
@media (hover: hover) { body .e-pic-l:hover { background-size: 100% 1px; } }
body .e-pic-l:focus-visible { background-size: 100% 1px; }

/* the lab card: the essay's machine, one door down */
body .e-lab { clear: both; width: var(--e-wide); margin: clamp(56px, 7vw, 88px) calc((100% - var(--e-wide)) / 2) 0; }
body .e-lab-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch;
  background: var(--card); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--elev-2);
  color: var(--ink); text-decoration: none;
  transition: translate var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
body .e-lab-art { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; }
body .e-lab-tx { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(24px, 3vw, 40px); }
body .e-lab-k { color: var(--ink-2); }
body .e-lab-t { font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); letter-spacing: -.016em; color: var(--ink); text-wrap: balance; }
body .e-lab-d { font: 400 15px/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty; }
body .e-lab-go {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; padding: 0 22px;
  border: 1px solid var(--foil-line); border-radius: var(--r-pill); color: var(--ink);
  font: var(--lbl-w) var(--lbl-l)/1 var(--sans); letter-spacing: var(--trk-l); text-transform: uppercase;
  transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
@media (hover: hover) {
  body .e-lab-card:hover { translate: 0 -3px; box-shadow: var(--elev-3); }
  body .e-lab-card:hover .e-lab-go { background: var(--accent); border-color: var(--accent); color: color-mix(in srgb, var(--dark) 70%, #000); }
}
body .e-lab-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
body .e-lab-card:active { scale: .99; }
@media (max-width: 700px) { body .e-lab-card { grid-template-columns: minmax(0, 1fr); } }
/* the preview is drawn on espresso in every room */
body .e-lab-art { --la-bg: var(--espresso); --la-ink: color-mix(in srgb, #F3EFE6 88%, transparent); --la-soft: color-mix(in srgb, #F3EFE6 30%, transparent);
  --la-tone: #C99A63; }
body .e-lab-art .la-bg { fill: var(--la-bg); }
body .e-lab-art .la-air { fill: color-mix(in srgb, var(--la-bg) 80%, #fff); stroke: var(--la-ink); stroke-width: 2; }
body .e-lab-art .la-air .b-d { fill: none; opacity: .5; }
body .e-lab-art .la-dot { fill: var(--la-ink); }
body .e-lab-art .la-eng rect { fill: var(--accent); }
body .e-lab-art .la-fill-tone { fill: var(--la-tone); }
body .e-lab-art .la-ln { fill: none; stroke: var(--la-bg); stroke-width: 2; }
body .e-lab-art .la-ln--soft { stroke: var(--la-soft); stroke-width: 1.5; }
body .e-lab-art .la-disc { fill: color-mix(in srgb, #F3EFE6 86%, var(--la-bg)); }
body .e-lab-art .la-hole { fill: var(--la-bg); }
body .e-lab-art .la-fig { fill: var(--la-ink); font: 200 18px var(--stat); letter-spacing: .02em; }
body .e-lab-art .la-face { fill: color-mix(in srgb, var(--la-bg) 86%, #fff); stroke: var(--la-ink); stroke-width: 1.5; }
body .e-lab-art .la-hl { fill: var(--accent); }
body .e-lab-art .la-lot { fill: color-mix(in srgb, var(--la-bg) 90%, #fff); }
body .e-lab-art .la-dash { stroke: var(--la-ink); stroke-dasharray: 4 4; stroke-width: 1.25; }
body .e-lab-art .la-glass { fill: color-mix(in srgb, var(--la-bg) 88%, #fff); stroke: var(--la-ink); stroke-width: 1.5; }
body .e-lab-art .la-door { fill: color-mix(in srgb, var(--la-tone) 55%, var(--la-bg)); stroke: var(--la-soft); }
body .e-lab-art .la-knob { fill: var(--la-tone); }
body .e-lab-art .la-ajar { fill: #070605; stroke: var(--la-soft); }
body .e-lab-art .la-tr { stroke: var(--la-soft); stroke-width: 1.75; stroke-linecap: round; }
body .e-lab-art .la-tr--hl { stroke: var(--accent); }
body .e-lab-art .la-knob2 { fill: color-mix(in srgb, var(--la-bg) 80%, #fff); stroke: var(--la-ink); stroke-width: 1.5; }
body .e-lab-art .la-hl-dot { fill: var(--accent); }
body .e-lab-art .la-dot2 { fill: var(--la-soft); }
body .e-lab-art .la-ptr { stroke: var(--la-ink); stroke-width: 3; stroke-linecap: round; }
body .e-lab-art .la-card { fill: #E9DFC8; }
body .e-lab-art .la-slot { fill: color-mix(in srgb, #E9DFC8 70%, #000); }

/* the author: the About sentence, signed */
body .pxe-essay > .e-author {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start;
  max-width: var(--e-measure); margin: clamp(48px, 6vw, 72px) auto 0; padding-top: 24px; border-top: 1px solid var(--hair);
  font: italic 400 17px/1.55 var(--serif); color: var(--ink-2);
}
body .e-author-m {
  font: 700 24px/1 var(--serif); letter-spacing: .01em; color: var(--ink); text-decoration: none; padding: 2px 0 10px; min-height: 44px; display: inline-block;
}
body .e-author-m i { font-style: normal; color: var(--accent); margin-left: -.06em; }
body .e-author-m i:first-of-type { margin-right: -.02em; }

/* ============================================================
   PREVIOUS AND NEXT: two cards, the way the Lab hands you on
   ============================================================ */
body .enav {
  display: block; width: auto; max-width: none; margin: clamp(64px, 8vw, 112px) 0 0; padding: clamp(48px, 6vw, 88px) var(--gutter);
  background: var(--vellum); border: 0;
}
body .enav-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.6vw, 36px); }
body .enav-c {
  display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden;
  background: var(--paper); border-radius: var(--r-card); box-shadow: var(--elev-1);
  color: var(--ink); text-decoration: none;
  transition: translate var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
body .enav-art { display: block; aspect-ratio: 16 / 9; width: 100%; border-radius: 0; }
body .enav-art.plate > img { object-position: var(--focal, 50% 50%); }
body .enav-art--type { display: grid; place-items: center; overflow: hidden; }
body .enav-art--type .stat { font-size: clamp(64px, 9vw, 120px); line-height: 1; color: var(--ink); letter-spacing: -.05em; }
body .enav-tx { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 32px) clamp(24px, 2.8vw, 34px); }
body .enav .dir { font: var(--lbl-w) var(--lbl-s)/1.2 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--ink-2); }
body .enav-no { font: 400 15px/1 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums; margin-top: 6px; }
body .enav .t {
  font: 400 clamp(22px, 2.4vw, 30px)/1.15 var(--serif); letter-spacing: -.014em; color: var(--ink); text-wrap: balance;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; width: fit-content;
  transition: background-size var(--d-2) var(--ease-out);
}
body .enav .d { font: italic 400 16px/1.5 var(--serif); color: var(--ink-2); text-wrap: pretty; }
/* the card's picture is credited on the card: author and licence, as under every plate (the link is on the essay itself) */
body .enav-cr { margin-top: 4px; font: var(--lbl-w) var(--lbl-xs)/1.45 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
@media (hover: hover) {
  body .enav-c:hover { translate: 0 -3px; box-shadow: var(--elev-3); }
  body .enav-c:hover .t { background-size: 100% 1px; }
}
body .enav-c:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
body .enav-c:focus-visible .t { background-size: 100% 1px; }
body .enav-c:active { scale: .99; }
@media (max-width: 700px) {
  body .enav-in { grid-template-columns: minmax(0, 1fr); }
  body .enav-art { aspect-ratio: 2 / 1; }
}

/* ---------- 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;
  }
  @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; }
  }
}
@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; }
}

/* ---------- 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: psLeafIn var(--d-page) var(--ease-curtain) 40ms both; }
html:active-view-transition-type(back)::view-transition-new(essay-title):only-child { animation-name: psLeafInBack; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body .enav-c, body .e-lab-card, body .enav .t, body .e-door-leaf, body .mg summary::before { transition: none; }
  body .enav-c:hover, body .e-lab-card:hover { translate: none; }
}

/* ============================================================
   TOUCH: on a phone every control is a target of about 44px, and the column keeps its rhythm
   ============================================================ */
@media (pointer: coarse) and (max-width: 1179px) {
  /* a marginal note's label: the padding is the target, the negative margin hands the space back */
  body .mg summary { min-height: 44px; padding-block: 10px; margin-block: -10px; }
}
@media (pointer: coarse) {
  /* a note that is one source link: the link's box grows into the space around its line, never the line itself.
     A note with two links keeps plain boxes, so neither takes the other's taps. */
  body .e-notes li > a:only-of-type { padding-block: 13px; }
}
/* the signature mark is wide enough to tap in every script, and sits exactly where it did */
body .e-author-m { padding-inline: 6px; margin-inline: -6px; }

/* ============================================================
   PHONES AT 360: the phone charts are drawn 340 units wide, so a 360 screen sets them at .94. Their 12-unit
   labels take 12.75 there to stay at 12px; the days strip's capitals stay at 11px.
   ============================================================ */
@media (max-width: 374px) {
  body .pxe-essay .chart-card svg.chart-phone :is(.chart-label, .f-knock--s) { font-size: 12.75px; }
  body .e79--phone .d79-l { font-size: 11.5px; }
}
/* the drawings without a phone version scale to the column, so their 21-unit type reads 10.5px at 360 and 11.5px
   at 390: on the narrower phones the units grow again to hold 12px */
@media (max-width: 374px) {
  body .pxe-essay .chart-card:not(:has(svg.chart-phone)):not(.chart-card--wide) :is(.chart-label, .chart-cat) { font-size: 24px; }
  body .pxe-essay .chart-card:not(:has(svg.chart-phone)):not(.chart-card--wide) .chart-value { font-size: 25px; }
}
@media (min-width: 375px) and (max-width: 413px) {
  body .pxe-essay .chart-card:not(:has(svg.chart-phone)):not(.chart-card--wide) :is(.chart-label, .chart-cat) { font-size: 22.5px; }
  body .pxe-essay .chart-card:not(:has(svg.chart-phone)):not(.chart-card--wide) .chart-value { font-size: 23.5px; }
}
/* the punch card's numbers, grown, sit centred between the rows of slots */
@media (max-width: 413px) { body .pxe-essay .chart-card .pc-n { transform: translateY(3px); } }
/* the turn's line under the four airplanes, grown on phones, steps down clear of their wings */
@media (max-width: 560px) { body .pxe-essay .chart-card svg:has(.tt-p) text.chart-label { transform: translateY(8px); } }
/* the capex chart's 100% sits at x 48 and hangs past the column on phones: the drawing steps in by its overhang */
@media (max-width: 560px) {
  body .pxe-essay .chart-card svg:not(.chart-phone):has(> text[x="48"][text-anchor="end"]) { padding-left: 8px; }
}

/* ============================================================
   RIGHT TO LEFT (fa, ar)
   ============================================================ */
/* the drawings were drawn left to right and their labels are English, so they keep that direction and every label
   lands where it was drawn. The Lab card's art keeps the page's, so its translated line still reads number first. */
html[dir="rtl"] body .pxe-essay svg:not(.e-lab-art) { direction: ltr; }
/* what is laid along a drawing follows it: the arc's pins and city names, the two dates under the seventy-nine days */
html[dir="rtl"] body :is(.e-pin, .e-arc-cap, .e-days-l) { direction: ltr; }
html[dir="rtl"] body :is(.e-arc-cap, .e-days-l) > span { unicode-bidi: plaintext; }
html[dir="rtl"] body .e-days-l > span:first-child { text-align: left; }
/* two thirds is one number, written left to right in every language */
html[dir="rtl"] body .e-open--door .e-stat { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] body .pxe-essay > h2::before { background-position: left 58%; }
@media (max-width: 560px) {
  /* a wide chart scrolls from its first column; its number, title and dek still read right to left */
  html[dir="rtl"] body .pxe-essay .chart-card--wide { direction: ltr; }
  html[dir="rtl"] body .pxe-essay .chart-card--wide > :is(h3, .sub),
  html[dir="rtl"] body .pxe-essay .chart-card--wide::before { direction: rtl; }
}

/* ============================================================
   SCRIPTS WITHOUT CAPITALS (fa, ar, zh, ja)
   i18n.css sets the small labels untracked and in their own case there, so the 11px allowance for tracked capitals
   no longer holds: they read at 12px, and Arabic script, which sits small on its line, at 13px.
   ============================================================ */
html:is([lang="zh-CN"], [lang="ja"]) body :is(.e-folio, .mg summary, .mg--k > span, .e-margin-n, .e-days-l, .e-arc-cap,
  .e-door-br, .pq-by, .e-ledger-h, .e-pic-l, .e-stat-u, .e-lab-k, .enav .dir, .enav-cr, .pxe-essay .credit2,
  .pxe-essay figcaption .credit) { font-size: 12px; }
html:is([lang="ar"], [lang="fa"]) body :is(.e-folio, .mg summary, .mg--k > span, .e-margin-n, .e-days-l, .e-arc-cap,
  .e-door-br, .pq-by, .e-ledger-h, .e-pic-l, .e-stat-u, .e-lab-k, .enav .dir, .enav-cr, .pxe-essay .credit2,
  .pxe-essay figcaption .credit, .e-end-h) { font-size: 13px; }
@media (min-width: 601px) {
  html:is([lang="zh-CN"], [lang="ja"]) body .e-pin { font-size: 12px; }
  html:is([lang="ar"], [lang="fa"]) body .e-pin { font-size: 13px; }
}
/* the days strip's month names are English, and here they are not set in capitals */
html:is([lang="zh-CN"], [lang="ja"], [lang="ar"], [lang="fa"]) body .e79 .d79-l { font-size: 12px; }
/* Chinese and Japanese: full-width characters want more leading, and a justified edge, as in print */
html:is([lang="zh-CN"], [lang="ja"]) body .pxe-essay > p { line-height: 1.8; text-align: justify; }

/* ---------- 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; --vellum: #fff;
    --line: #ccc; --line-2: #e5e5e5; --accent: #C43A00;
  }
  @page { margin: 18mm 20mm 20mm; }
  body { background: #fff !important; font-size: 11pt; }
  .nav, .footer, .enav, .e-lab, .skip-link, #themeBtn, #themePanel, #themeBg, #themeFx, body::after, script,
  body .pxe-essay .pq, body .mg, body .e-open-plate, body .e-open .credit2, body .e-door-br, body .e-doors { display: none !important; }
  body *, body *::before, body *::after { animation: none !important; transition: none !important; }
  body article { padding-inline: 0; }
  body .e-open { width: auto; margin: 0 0 18pt; padding: 0 !important; min-height: 0 !important; display: block !important; background: none !important; color: #000; }
  body .e-open .e-open-in, body .e-open .e-open-card { padding: 0; margin: 0; transform: none; box-shadow: none; }
  body .pxe-essay { max-width: none; padding: 0; font-size: 11.5pt; line-height: 1.55; }
  body .pxe-essay h1, body .e-open h1 { font-size: 30pt; color: #000; }
  body .e-stat { font-size: 60pt !important; }
  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 .plate > img { animation: none !important; opacity: 1 !important; filter: none !important; }
  body .pxe-essay .e-fig--bleed, body .pxe-essay .e-fig--wide, body .pxe-essay .e-plan, body figure.e-chart--wide { 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 hr { margin: 18pt auto; }
  body .e-end { width: auto; margin: 0; }
  body article::after {
    content: "P.S. \00B7 pedrumshokouhi.com"; display: block; margin-top: 18pt;
    font: var(--lbl-w) 8pt var(--sans); letter-spacing: .12em; text-transform: uppercase;
  }
  *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; }
}

/* Shell pass (11 Nov 2026): labels that still hard-coded 11px step to the shared phone label size; the margin-note toggle is a control, so it gets a full tap target. */
body .e-pin, body .e-door-br { font-size: var(--lbl-s); letter-spacing: var(--trk-s); }
body .e79 .d79-l { font-size: var(--lbl-s); }
@media (min-width: 1180px) { body .mg summary, body .mg--k > span { font-size: var(--lbl-s); } }
body .pxe-essay :is(.e-margin, .e-object) .credit2 { font-size: 12px; }
@media (max-width: 640px) { body .mg summary { min-height: var(--tap); align-items: center; } }