/* Avon Labs Outlook: series guide (about.html) and essay pages (essays/*).
   Every rule is scoped to .essays so nothing reaches other pages. Palette and
   type follow css/butterflies.css and the earlier Outlook edition. */
.essays {
  --line: #b9b5a7;
  --quiet: #56594e;
  --print: #403f34;
  --copper: #753b29;
  --panel: #e8e5d7;
  --track: #dcd6c7;
  --mark: #7d7a6b;
  --highlight: #e6d9c5;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --round: Comfortaa, var(--sans);
  --wrap: 1376px;
  --measure: 660px;
  --gutter: clamp(28px, 4vw, 64px);
}
.essays :is(a, button, summary):focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.essays [hidden] { display: none !important; }
.essays .skip { position: fixed; top: 12px; left: 12px; z-index: 40; padding: 12px; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.essays .skip:focus { transform: none; }
.essays .chrome { padding-inline: 5%; }
.essays .masthead { max-width: var(--wrap); margin-inline: auto; }
.essays .landing-nav a[aria-current="location"] { text-decoration: underline; text-underline-offset: 6px; }
.essays .kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.essays .kicker > * + *::before { content: '\00b7'; margin: 0 .8em; color: var(--line); }
.essays .kicker a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- Series guide ---------- */
.essays .series-index { display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 29vw, 400px); grid-template-rows: auto 1fr; column-gap: 7%; width: min(90%, var(--wrap)); margin: 0 auto; padding: clamp(20px, 4vh, 48px) 0 56px; }
.essays .series-hero { grid-column: 1; grid-row: 1; padding-bottom: 44px; }
.essays .ladder-wrap { grid-column: 2; grid-row: 1 / span 2; }
.essays .series { grid-column: 1; grid-row: 2; }
.essays .series:focus { outline: none; }
.essays .series-hero h1 { margin: 22px 0 26px; font: 400 clamp(64px, 9.5vw, 128px)/.92 var(--serif); letter-spacing: -.055em; }
.essays .series-lede { margin: 0 0 32px; max-width: 28em; font: 400 clamp(20px, 1.9vw, 25px)/1.45 var(--serif); color: var(--print); text-wrap: pretty; }
.essays .series-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin: 0; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
.essays .begin { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 15px/1 var(--round); letter-spacing: 0; text-transform: none; color: var(--copper); }
.essays .begin span { display: inline-block; }
.essays .begin:hover { text-decoration: underline; text-underline-offset: 6px; }
.essays .ladder { position: sticky; top: 40px; margin: 34px 0 0; width: 100%; }
.essays .ladder svg { display: block; width: 100%; height: auto; overflow: visible; }
.essays .ladder figcaption { margin-top: 12px; text-align: center; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.essays .rung { fill: none; stroke: var(--lit-stroke, var(--mark)); stroke-width: var(--lit-width, 1); vector-effect: non-scaling-stroke; }
.essays .rung-dot { fill: var(--lit-stroke, var(--mark)); }
.essays .rung-label { font: 500 10.5px var(--mono); letter-spacing: .12em; text-anchor: middle; fill: var(--lit-stroke, var(--quiet)); }
.essays .rung-knock { fill: var(--paper); }
.essays .ladder :is(.rung, .rung-dot, .rung-label) { opacity: var(--lit-opacity, 1); }
.essays .series-index:has(.entry:is(:hover, :focus-visible)) .ladder :is(.rung, .rung-dot, .rung-label) { --lit-opacity: .4; }
.essays .series-index:has([data-part="1"] > .entry:is(:hover, :focus-visible)) .ladder [data-part="1"],
.essays .series-index:has([data-part="2"] > .entry:is(:hover, :focus-visible)) .ladder [data-part="2"],
.essays .series-index:has([data-part="3"] > .entry:is(:hover, :focus-visible)) .ladder [data-part="3"],
.essays .series-index:has([data-part="4"] > .entry:is(:hover, :focus-visible)) .ladder [data-part="4"],
.essays .series-index:has([data-part="5"] > .entry:is(:hover, :focus-visible)) .ladder [data-part="5"],
.essays .series-index:has([data-part="6"] > .entry:is(:hover, :focus-visible)) .ladder [data-part="6"],
.essays .series-index:has([data-part="7"] > .entry:is(:hover, :focus-visible)) .ladder [data-part="7"] { --lit-stroke: var(--copper); --lit-width: 2; --lit-opacity: 1; }
.essays .series-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.essays .series-entry { border-bottom: 1px solid var(--line); }
.essays .entry { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; grid-template-areas: "no rung time" "no title title" "no thesis thesis"; gap: 9px 20px; align-items: baseline; padding: 26px 0 28px; }
.essays .entry-no { grid-area: no; font: 400 34px/1 var(--serif); letter-spacing: -.02em; color: var(--copper); }
.essays .entry-rung { grid-area: rung; font: 500 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
.essays .entry-title { grid-area: title; margin: 0; font: 400 clamp(27px, 2.6vw, 36px)/1.1 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.essays .entry-thesis { grid-area: thesis; margin: 0; max-width: 46em; font: 16px/1.55 var(--sans); color: var(--print); text-wrap: pretty; }
.essays .entry-time { grid-area: time; font: 500 11px/1.6 var(--mono); letter-spacing: .06em; color: var(--quiet); white-space: nowrap; }
.essays .entry-time::after { content: '\2192'; display: inline-block; margin-left: 10px; color: var(--copper); }
.essays .entry:is(:hover, :focus-visible) .entry-title { color: var(--copper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }

/* ---------- Essay frame ---------- */
.essays .essay-head,
.essays .essay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr); column-gap: var(--gutter); width: min(90%, var(--wrap)); margin-inline: auto; }
.essays .essay-head { padding: clamp(20px, 5vh, 64px) 0 0; }
.essays .essay-head > * { grid-column: 2 / 4; }
.essays .essay-head h1 { margin: 22px 0 0; max-width: 15em; font: 400 clamp(44px, 6.2vw, 80px)/1.0 var(--serif); letter-spacing: -.048em; text-wrap: balance; }
.essays .dek { margin: 24px 0 0; max-width: 33em; font: 400 clamp(19px, 1.75vw, 23px)/1.45 var(--serif); color: var(--print); text-wrap: pretty; }
.essays .essay-meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-top: 38px; padding-top: 12px; border-top: 1px solid var(--ink); }
.essays .essay-meta > p { display: flex; gap: 0; margin: 0 0 4px; font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.essays .essay-meta > p > * + *::before { content: '\00b7'; margin: 0 .8em; color: var(--line); }
.essays .series-strip ol { position: relative; display: flex; align-items: flex-end; margin: 0; padding: 0; list-style: none; }
.essays .series-strip a { display: grid; place-items: end center; width: 28px; height: 32px; padding-bottom: 6px; }
.essays .series-strip a::before { content: ''; width: calc(6px + var(--n) * 2.2px); height: calc(6px + var(--n) * 2.2px); border: 1.5px solid var(--mark); border-radius: 50%; box-sizing: border-box; }
.essays .series-strip a[aria-current="page"]::before { background: var(--copper); border-color: var(--copper); }
.essays .series-strip a:hover::before { border-color: var(--copper); }
.essays .series-strip a::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 6px); padding: 6px 9px; background: var(--ink); color: var(--paper); font: 12px/1.3 var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; }
.essays .series-strip a:is(:hover, :focus-visible)::after { opacity: 1; }
.essays .essay-grid { padding-bottom: 24px; }
.essays .rail { grid-column: 1; grid-row: 1; align-self: start; justify-self: end; position: sticky; top: 64px; width: min(100%, 236px); max-height: calc(100vh - 88px); overflow: auto; padding: 48px 4px 16px 0; }
.essays .rail-label { margin: 0 0 10px; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.essays .rail-label a { color: var(--copper); }
.essays .rail ol { margin: 0; padding: 0; list-style: none; }
.essays .rail-parts > li > a { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); padding: 5px 0; font: 13px/1.35 var(--sans); color: var(--quiet); }
.essays .rail-parts .n { font: 500 10.5px/1.75 var(--mono); }
.essays .rail-parts a:hover { color: var(--copper); }
.essays .rail-parts > .is-current > a { color: var(--ink); font-weight: 700; }
.essays .rail-sections { margin: 2px 0 10px 2.1em !important; border-left: 1px solid var(--line); }
.essays .rail-sections a { display: block; margin-left: -1px; padding: 4px 0 4px 11px; border-left: 2px solid transparent; font: 12.5px/1.35 var(--sans); color: var(--quiet); }
.essays .rail-sections a[aria-current] { color: var(--copper); border-left-color: var(--copper); }
.essays .essay-body { grid-column: 2; grid-row: 1; min-width: 0; }
.essays .essay-body:focus { outline: none; }
.essays .essay-hero { width: min(90%, var(--wrap)); margin: 32px auto 0; }
.essays .essay-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.essays .essay-hero figcaption { margin-top: 10px; font: 10px/1.5 var(--mono); letter-spacing: .06em; color: var(--quiet); }
.essays .graphic-link { display: block; margin-top: 18px; color: var(--copper); }
.essays .graphic-link img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.essays .graphic-open { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font: 12px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.essays .fig-source a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }
.essays .graphic-text { margin-top: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 15px/1.6 var(--sans); color: var(--print); }
.essays .graphic-text summary { padding: 12px 0; cursor: pointer; color: var(--copper); }
.essays .graphic-text p { margin: 0 0 14px; }

/* ---------- Reading typography ---------- */
.essays .essay-opening { padding-top: 46px; }
.essays :is(.essay-opening, .essay-section) > p,
.essays .points li { margin: 0 0 1.05em; font: 400 20px/1.66 var(--serif); color: var(--ink); text-wrap: pretty; hanging-punctuation: first; }
.essays .essay-opening > p:first-child { font-size: 23.5px; line-height: 1.52; letter-spacing: -.01em; }
.essays .essay-body strong { font-weight: 700; color: var(--copper); }
.essays .essay-body .fig strong { color: inherit; }
.essays :is(.essay-opening, .essay-section) > :is(p, ul) a:not([data-fn]) { color: var(--copper); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #b98c77; text-underline-offset: 3px; }
.essays :is(.essay-opening, .essay-section) > :is(p, ul) a:not([data-fn]):hover { text-decoration-color: currentColor; }
.essays .essay-section { padding-top: 54px; }
.essays .overline { display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.essays .overline::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.essays .essay-section h2 { margin: 16px 0 22px; font: 400 clamp(28px, 2.6vw, 35px)/1.13 var(--serif); letter-spacing: -.03em; text-wrap: balance; scroll-margin-top: 76px; }
.essays .points { margin: 0 0 1.3em; padding: 0; list-style: none; }
.essays .points li { position: relative; margin-bottom: .6em; padding-left: 1.5em; }
.essays .points li::before { content: ''; position: absolute; left: 0; top: .83em; width: .8em; height: 1px; background: var(--copper); }
.essays .essay-body :is(p.statement, p.coda) { margin: 1.25em 0 1.05em; font: 400 clamp(27px, 2.75vw, 35px)/1.2 var(--serif); letter-spacing: -.028em; color: var(--copper); text-wrap: balance; }
.essays .essay-body :is(p.statement, p.coda) strong { font-weight: 700; }
.essays .essay-body p.coda { margin: 1.3em 0 .4em; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.1; }
.essays .essay-body h2 + p.statement { margin-top: .2em; }
.essays .keystat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 30px; margin: 38px 0 40px; padding: 24px 0 22px; border-top: 2px solid var(--copper); border-bottom: 1px solid var(--line); }
.essays .keystat-n { margin: 0; font: 700 clamp(56px, 7.4vw, 92px)/.92 var(--serif); letter-spacing: -.05em; color: var(--copper); white-space: nowrap; font-variant-numeric: lining-nums; }
.essays .keystat-label { margin: 0; max-width: 24em; font: 400 18px/1.5 var(--serif); color: var(--print); text-wrap: pretty; }
.essays .pull { margin: 36px 0 40px; padding: 2px 0 2px 26px; border-left: 2px solid var(--copper); }
.essays .pull p { margin: 0; font: italic 400 clamp(29px, 3.2vw, 40px)/1.16 var(--serif); letter-spacing: -.025em; color: var(--copper); text-wrap: balance; }
.essays .pull footer { margin-top: 14px; font: 500 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
.essays .pull footer em { font-style: normal; }
.essays .fn-ref { font: 700 .6em/0 var(--sans); vertical-align: super; }
.essays .fn-ref a { padding: .3em .14em; color: var(--copper); text-decoration: none; border-radius: 2px; scroll-margin-top: 96px; }
.essays .fn-ref a:hover, .essays .fn-ref a[aria-describedby] { background: var(--highlight); }
.essays .fn-ref a:target { background: var(--highlight); }

/* ---------- Figures ---------- */
.essays .fig { margin: 44px 0 50px; scroll-margin-top: 72px; }
.essays .fig-head { display: flex; align-items: baseline; gap: 14px; padding-top: 12px; border-top: 1px solid var(--ink); }
.essays .fig-no { flex: none; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.essays .fig-title { margin: 0; font: 400 20px/1.3 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.essays .fig-body { margin-top: 14px; padding: 24px 24px 20px; background: var(--panel); }
.essays .fig-caption { display: grid; gap: 6px; margin-top: 12px; }
.essays .fig-caption p { margin: 0; max-width: 46em; font: 14px/1.5 var(--sans); color: var(--quiet); }
.essays .fig-caption .fig-source { font-size: 12.5px; }
.essays .fig-note { margin-left: 4px; white-space: nowrap; padding: 2px 0; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }
.essays .fig-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 16px 0 0; font: 11px/1.4 var(--mono); letter-spacing: .03em; color: var(--quiet); }
.essays .key { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.essays .sw { display: inline-block; flex: none; width: 11px; height: 11px; }
.essays .tone-copper { background: var(--copper); }
.essays .tone-mark { background: var(--mark); }
.essays .tone-hatch { background: repeating-linear-gradient(135deg, var(--copper) 0 1.6px, transparent 1.6px 4.5px); box-shadow: inset 0 0 0 1.25px var(--copper); }
.essays .sw-marker { width: 0; height: 13px; border-left: 1.5px dashed var(--ink); }
.essays .sw-ghost { border: 1px dashed var(--quiet); }

.essays .bars { display: grid; gap: 16px; }
.essays .bar-row { display: grid; grid-template-columns: minmax(8.5rem, 12.5rem) minmax(0, 1fr); gap: 6px 18px; align-items: center; }
.essays .bars.is-stacked .bar-row { grid-template-columns: minmax(0, 1fr); }
.essays .bar-label { font: 13.5px/1.35 var(--sans); color: var(--ink); }
.essays .bar-area { position: relative; height: 18px; margin-right: 6.2em; }
.essays .bar { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: var(--w); min-width: 1.5px; transform-origin: left center; }
.essays .bar-area > .bar:not([class*="tone-"]) { background: var(--copper); }
.essays .bar-value { position: absolute; z-index: 3; top: 50%; left: calc(var(--w) + 7px); transform: translateY(-50%); padding: 2px 3px; background: var(--panel); font: 600 13px/1 var(--mono); color: var(--ink); white-space: nowrap; }
.essays .bar-value.is-inside { left: auto; right: calc(100% - var(--w) + 6px); background: none; color: var(--paper); }
.essays .bar-ghost { position: absolute; top: -4px; bottom: -4px; left: 0; width: var(--g); border: 1px dashed var(--quiet); }
.essays .bar-ghost::after { content: ''; position: absolute; top: -3px; bottom: -3px; right: -1px; width: 1.5px; background: var(--ink); z-index: 2; }
.essays .bar-marker { position: absolute; top: -8px; bottom: -8px; left: var(--m); border-left: 1.5px dashed var(--ink); z-index: 2; }
.essays .fig-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.essays .stat-n { margin: 0 0 10px; font: 400 30px/1 var(--serif); letter-spacing: -.02em; }
.essays .stat-t { margin: 0; font: 13.5px/1.45 var(--sans); color: var(--print); }
.essays .meter { position: relative; display: block; height: 6px; margin-bottom: 10px; background: var(--track); }
.essays .meter > span { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--copper); transform-origin: left center; }
.essays .meter.is-years { background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 2px), var(--panel) calc(100% / 6 - 2px) calc(100% / 6)), var(--track); }
.essays .meter.is-years > span { background: repeating-linear-gradient(90deg, var(--copper) 0 calc(100% / 6 * 72 / 61 - 2px), var(--panel) calc(100% / 6 * 72 / 61 - 2px) calc(100% / 6 * 72 / 61)); }
.essays .meter-scale { display: flex; justify-content: space-between; margin: -4px 0 10px; font: 10px/1 var(--mono); color: var(--quiet); }

.essays .tl-plot { position: relative; height: 150px; overflow: hidden; }
.essays .tl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.essays .tl-svg :is(path, polyline, line) { fill: none; }
.essays .tl-flat { stroke: var(--mark); stroke-width: 2.5; }
.essays .tl-rise { stroke: var(--copper); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.essays .tl-grid { stroke: var(--mark); stroke-width: 1; stroke-dasharray: 3 4; }
.essays .tl-base { stroke: var(--ink); stroke-width: 1; }
.essays .tl-call { position: absolute; width: 22px; height: 22px; margin: -34px 0 0 -11px; border: 1px solid var(--copper); border-radius: 50%; background: var(--panel); color: var(--copper); font: 600 11px/20px var(--mono); text-align: center; }
.essays .tl-wipe { position: absolute; inset: 0 -2px 0 0; background: var(--panel); transform: translateX(101%); }
.essays .tl-axis { position: relative; height: 18px; margin-top: 7px; font: 11px/1.4 var(--mono); color: var(--quiet); }
.essays .tl-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.essays .tl-axis span:first-child { transform: none; }
.essays .tl-axis span:last-child { transform: translateX(-100%); }
.essays .tl-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line); }
.essays .tl-key li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font: 13.5px/1.5 var(--sans); color: var(--print); }
.essays .tl-key b { width: 22px; height: 22px; border: 1px solid var(--copper); border-radius: 50%; color: var(--copper); font: 600 11px/20px var(--mono); text-align: center; }
.essays .tl-key strong { color: var(--ink); }

.essays .squares { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px 32px; align-items: end; }
.essays .sq-svg { display: block; width: 100%; height: auto; }
.essays rect.sq-a { fill: var(--track); stroke: var(--mark); stroke-width: 1; }
.essays rect.sq-b { fill: var(--mark); }
.essays rect.sq-c { fill: var(--copper); }
.essays .sq-ring { fill: none; stroke: var(--copper); stroke-width: 1.5; }
.essays .sq-key { display: grid; gap: 14px; margin: 0; padding: 0 0 6px; list-style: none; }
.essays .sq-key li, .essays .units-key li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: start; font: 14px/1.4 var(--sans); color: var(--print); }
.essays .sq-key .sw { margin-top: 5px; }
.essays .sq-key b, .essays .units-key b { display: block; font: 400 24px/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.essays .sw.sq-a { background: var(--track); box-shadow: inset 0 0 0 1px var(--mark); }
.essays .sw.sq-b { background: var(--mark); }
.essays .sw.sq-c { background: var(--copper); }

.essays .years { display: grid; gap: 6px; }
.essays .yr-label { margin: 6px 0 2px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.essays .yr-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.essays .yr-row li { display: grid; gap: 5px; }
.essays .yr { font: 10.5px/1.2 var(--mono); color: var(--quiet); }
.essays .yr-cell { padding: 13px 4px; background: var(--copper); color: var(--paper); font: 600 13px/1 var(--mono); text-align: center; }
.essays .yr-train { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; height: 38px; }
.essays .train-bar { grid-column: 1 / 5; display: flex; align-items: center; padding: 0 12px; background: var(--ink); color: var(--paper); font: 13px/1.2 var(--sans); white-space: nowrap; overflow: hidden; transform-origin: left center; }
.essays .train-tail { grid-column: 5; border: 1.5px dashed var(--ink); display: flex; align-items: center; justify-content: center; font: 11px/1.2 var(--mono); color: var(--quiet); }

.essays .units { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px 32px; align-items: center; }
.essays .units-head { grid-column: 1 / -1; margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.essays .units-svg { display: block; width: 100%; height: auto; }
.essays .dot-patched { fill: var(--copper); }
.essays .dot-found { fill: none; stroke: var(--copper); stroke-width: 1.5; }
.essays .dot-real { fill: var(--ink); }
.essays .units-key { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.essays .units-key .sw { margin-top: 5px; border-radius: 50%; }
.essays .sw-found { box-shadow: inset 0 0 0 1.5px var(--copper); }
.essays .sw-patched { background: var(--copper); }
.essays .units-key .sw-real { border-radius: 0; background: var(--ink); }

.essays .space { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; align-items: start; }
.essays .panel-head { margin: 0 0 10px; font: 13.5px/1.4 var(--sans); color: var(--print); }
.essays .panel-head b { margin-right: 4px; font: 400 24px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.essays .dots-svg { display: block; width: 100%; max-width: 270px; height: auto; }
.essays .dot-fill { fill: var(--copper); }
.essays .dot-gap { fill: var(--panel); stroke: var(--mark); stroke-width: .9; }
.essays .sw-dot { border-radius: 50%; background: var(--copper); }
.essays .sw-gap { border-radius: 50%; box-shadow: inset 0 0 0 1px var(--mark); }
.essays .space > .fig-scale { grid-column: 1 / -1; margin-top: 0; }
.essays .space-bar { grid-column: 1 / -1; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.essays .space-bar + .fig-scale { margin-top: -2px; }

.essays .cascade { margin: 36px 0 42px; padding: 22px 24px 20px; background: var(--panel); border-top: 2px solid var(--copper); }
.essays .cascade-title { margin: 0 0 18px; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.essays .cascade-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.essays .cascade-steps li { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 18px; align-items: baseline; }
.essays .step-weight { display: block; align-self: start; margin-top: 8px; width: calc((var(--i) + 1) * 22px); height: 13px; background: repeating-linear-gradient(90deg, var(--copper) 0 18px, transparent 18px 22px); transform-origin: left center; }
.essays .step-text { font: 18.5px/1.5 var(--serif); color: var(--ink); }
.essays .step-arrow { color: var(--copper); }
.essays .cascade-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font: italic 18px/1.5 var(--serif); color: var(--print); }
.essays .callout { margin: 32px 0; padding: 20px 24px; background: var(--panel); border-top: 2px solid var(--copper); }
.essays .callout-title { margin: 0 0 10px; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.essays .callout p:not(.callout-title) { margin: 0 0 .6em; font: 18px/1.55 var(--serif); }

/* ---------- Series navigation, sources, footer ---------- */
.essays .series-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 16px; margin-top: 64px; }
.essays .sn-link { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; border-top: 1px solid var(--ink); }
.essays .sn-next { border-top: 2px solid var(--copper); background: var(--panel); }
.essays .sn-link:hover { background: var(--highlight); }
.essays .sn-dir { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.essays .sn-title { font: 400 23px/1.18 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.essays .sn-next .sn-title { font-size: 29px; }
.essays .sn-thesis { font: 14.5px/1.5 var(--sans); color: var(--print); text-wrap: pretty; }
.essays .sources { margin-top: 72px; }
.essays .sources h2 { margin: 14px 0 16px; font: 400 30px/1.1 var(--serif); letter-spacing: -.025em; scroll-margin-top: 76px; }
.essays .sources-note { margin: 0 0 24px; max-width: 42em; font: 15px/1.6 var(--serif); color: var(--quiet); }
.essays .sources-note a { color: var(--copper); }
.essays .notes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.essays .notes > li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 8px; padding: 15px 8px 15px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.essays .notes > li:target { background: var(--highlight); }
.essays .note-no { font: 600 12px/1.95 var(--mono); color: var(--copper); }
.essays .note-body p { margin: 0; font: 15px/1.6 var(--serif); color: var(--print); overflow-wrap: break-word; }
.essays .note-body a { color: inherit; text-decoration: underline; text-decoration-color: #a28c79; text-underline-offset: 3px; }
.essays .note-body a:hover { color: var(--copper); }
.essays .note-back a { display: inline-block; padding: 0 5px; color: var(--copper); text-decoration: none; font: 14px/1 var(--sans); }
.essays .note-back sup { font-size: 10px; }
.essays .essays-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(90%, var(--wrap)); margin: 40px auto 0; padding: 20px 0 36px; border-top: 1px solid var(--ink); }
.essays .essays-footer .to-top { display: flex; align-items: center; gap: 6px; min-height: 44px; font: 12px var(--mono); color: var(--quiet); }
.essays .essays-footer .to-top:hover { color: var(--copper); }

/* ---------- Reader bar, progress and note previews (script only) ---------- */
.essays .reader-bar { position: fixed; inset: 0 0 auto; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); transform: translateY(-101%); }
.essays .reader-bar.is-shown { transform: none; }
.essays .rb-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(90%, var(--wrap)); height: 48px; margin: 0 auto; }
.essays .rb-where { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0; }
.essays .rb-where a { font: 700 13px/1 var(--round); color: var(--copper); }
.essays .rb-part { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); white-space: nowrap; }
.essays .rb-title { min-width: 0; overflow: hidden; font: 16px/1.2 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.essays .rb-step { display: flex; margin: 0; }
.essays .rb-step a { display: grid; place-items: center; width: 44px; height: 44px; font: 17px/1 var(--sans); }
.essays .rb-step a:hover { color: var(--copper); }
.essays .read-progress { position: fixed; inset: 0 0 auto; z-index: 31; height: 2px; pointer-events: none; }
.essays .read-progress span { display: block; height: 100%; background: var(--copper); transform: scaleX(0); transform-origin: left center; }
.essays .fn-pop { position: absolute; z-index: 35; max-width: calc(100vw - 32px); padding: 14px 16px 15px; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--copper); box-shadow: 0 14px 30px #292d2924; }
.essays .fn-pop .fn-pop-no { margin: 0 0 6px; font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.essays .fn-pop p { margin: 0; font: 14.5px/1.55 var(--serif); color: var(--print); }
.essays .fn-pop a { color: var(--ink); text-decoration: underline; text-decoration-color: #a28c79; text-underline-offset: 3px; }
.essays .fn-pop-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.essays .fn-pop-actions :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--copper); cursor: pointer; text-decoration: none; }

/* ---------- Motion (transform and opacity only) ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  .essays .rung, .essays .rung-dot { transform-box: view-box; transform-origin: 160px 318px; animation: rung-in .9s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i) * 85ms + 120ms); }
  .essays .rung-label { animation: fade-in .6s ease-out both; animation-delay: calc(var(--i) * 85ms + 520ms); }
  .essays .ladder :is(.rung, .rung-dot, .rung-label) { transition: opacity .25s ease; }
  .essays .entry-time::after { transition: transform .2s ease; }
  .essays .entry:is(:hover, :focus-visible) .entry-time::after { transform: translateX(4px); }
  .essays .series-strip a::after { transition: opacity .15s ease; }
  .essays .reader-bar { transition: transform .28s ease; }
  .essays .fn-pop { animation: pop-in .16s ease-out; }

  html.essays-js .essays [data-reveal]:not(.is-visible) :is(.bar, .meter > span, .train-bar, .step-weight) { transform: scaleX(0); }
  html.essays-js .essays [data-reveal]:not(.is-visible) :is(.bar-value, .bar-ghost, .bar-marker, .tl-call, .sq-ring, .yr-cell, .units-svg, .dots-svg, .stat-n) { opacity: 0; }
  html.essays-js .essays [data-reveal]:not(.is-visible) :is(.yr-cell, .units-svg, .dots-svg) { transform: translateY(6px); }
  html.essays-js .essays [data-reveal]:not(.is-visible) .sq { transform: scale(0); }
  html.essays-js .essays [data-reveal]:not(.is-visible) .tl-wipe { transform: none; }
  .essays [data-reveal].is-visible :is(.bar, .meter > span, .step-weight) { transition: transform .95s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * 150ms + 120ms); }
  .essays [data-reveal].is-visible .seg-b { transition-delay: calc(var(--i, 0) * 150ms + 650ms); }
  .essays [data-reveal].is-visible :is(.bar-value, .bar-ghost, .bar-marker, .stat-n) { transition: opacity .5s ease calc(var(--i, 0) * 150ms + 700ms); }
  .essays [data-reveal].is-visible .tl-wipe { transition: transform 1.6s cubic-bezier(.45, .05, .35, 1) .15s; }
  .essays [data-reveal].is-visible .tl-call { transition: opacity .5s ease 1.2s; }
  .essays .sq { transform-box: fill-box; transform-origin: 0 100%; }
  .essays [data-reveal].is-visible .sq { transition: transform 1s cubic-bezier(.22, .61, .36, 1) calc(var(--i) * 260ms + 100ms); }
  .essays [data-reveal].is-visible .sq-ring { transition: opacity .6s ease 1.05s; }
  .essays [data-reveal].is-visible .yr-cell { transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i) * 260ms + 150ms); }
  .essays [data-reveal].is-visible .train-bar { transition: transform 1.5s cubic-bezier(.45, .05, .35, 1) .2s; }
  .essays [data-reveal].is-visible :is(.units-svg, .dots-svg) { transition: opacity .7s ease .1s, transform .7s ease .1s; }
  .essays [data-reveal].is-visible .dots-panel + .dots-panel .dots-svg { transition-delay: .35s; }
  @keyframes rung-in { from { opacity: 0; transform: scale(.82); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes pop-in { from { opacity: 0; transform: translateY(4px); } }
}

/* ---------- Responsive ---------- */
@media (min-width: 1180px) {
  .essays .fig { margin-inline: -44px; }
}
@media (max-width: 1179px) {
  .essays .essay-head, .essays .essay-grid { grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
  .essays .essay-head > *, .essays .essay-meta, .essays .essay-body { grid-column: 1; }
  .essays .rail { display: none; }
}
@media (max-width: 900px) {
  .essays .series-index { display: block; }
  .essays .series-hero { padding-bottom: 8px; }
  .essays .ladder { position: static; width: min(100%, 340px); margin: 0 0 36px; }
  .essays .entry { grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 8px 18px; }
}
@media (max-width: 760px) {
  .essays .keystat { grid-template-columns: minmax(0, 1fr); padding: 20px 0 18px; }
  .essays .keystat-n { white-space: normal; }
  .essays .pull { padding-left: 18px; }
  .essays .essay-head h1 { font-size: clamp(38px, 10.5vw, 52px); letter-spacing: -.04em; }
  .essays .essay-meta { margin-top: 30px; }
  .essays .essay-opening { padding-top: 34px; }
  .essays :is(.essay-opening, .essay-section) > p, .essays .points li { font-size: 18.5px; line-height: 1.62; }
  .essays .essay-opening > p:first-child { font-size: 20.5px; line-height: 1.5; }
  .essays .essay-section { padding-top: 42px; }
  .essays .fig { margin: 36px 0 40px; }
  .essays .fig-head { flex-direction: column; gap: 4px; }
  .essays .fig-title { font-size: 18.5px; }
  .essays .fig-body { margin-inline: -5vw; padding: 20px 5vw 18px; }
  .essays .bar-row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .essays .fig-stats, .essays .tl-key, .essays .squares, .essays .units, .essays .space { grid-template-columns: minmax(0, 1fr); }
  .essays .squares .sq-svg { max-width: 240px; }
  .essays .units-svg { max-width: 330px; }
  .essays .tl-plot { height: 120px; }
  .essays .yr-cell { font-size: 11.5px; padding-inline: 2px; }
  .essays .cascade { margin-inline: -5vw; padding: 20px 5vw; }
  .essays .cascade-steps li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .essays .step-text { font-size: 17.5px; }
  .essays .series-nav { grid-template-columns: minmax(0, 1fr); }
  .essays .sn-next { order: -1; }
  .essays .sn-next .sn-title { font-size: 25px; }
  .essays .rb-part { display: none; }
  .essays .essay-head .kicker > :last-child { flex-basis: 100%; }
  .essays .essay-head .kicker > :last-child::before { content: none; }
  .essays .series-strip { margin-left: -9px; }
  .essays .entry { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no rung time" "title title title" "thesis thesis thesis"; gap: 8px 12px; padding: 22px 0 24px; }
  .essays .entry-no { font: 600 12px/1.6 var(--mono); }
  .essays .entry-thesis { font-size: 15px; }
  .essays .series-hero h1 { margin: 16px 0 18px; }
}
@media (max-width: 400px) {
  .essays .rb-where { gap: 10px; }
  .essays .essay-meta { flex-direction: column; align-items: flex-start; }
}

@media print {
  .essays { --paper: #fff; }
  .essays .chrome, .essays .skip, .essays .reader-bar, .essays .read-progress, .essays .rail, .essays .series-strip, .essays .series-nav, .essays .essays-footer, .essays .note-back, .essays .fn-pop { display: none !important; }
  .essays .essay-head, .essays .essay-grid { display: block; width: 100%; }
  .essays .essay-head h1 { font-size: 34pt; }
  .essays :is(.essay-opening, .essay-section) > p, .essays .points li { font-size: 11pt; line-height: 1.5; orphans: 3; widows: 3; }
  .essays .essay-opening > p:first-child { font-size: 13pt; }
  .essays .essay-section h2 { font-size: 18pt; break-after: avoid; }
  .essays :is(.fig, .cascade, .keystat, .pull, .notes > li) { break-inside: avoid; }
  .essays .essay-body :is(p.statement, p.coda) { font-size: 17pt; break-inside: avoid; }
  .essays .keystat-n { font-size: 40pt; }
  .essays .fig { margin-inline: 0; }
  .essays .essay-hero { width: 100%; break-inside: avoid; }
  .essays .graphic-open { display: none; }
  .essays .note-body a[href^="http"]::after { content: ' (' attr(href) ')'; font: 8pt var(--sans); overflow-wrap: anywhere; }
}