/* A post (server/templates/post.html, post.js): the design system's paper (the AMA's table),
   the editor's ink and highlighter, the red pencil. The text and its margin notes are in EB
   Garamond (data-write="garamond"), in blue-black ink. Mustafa chose this on 2026-11-06, from
   the directions in the session's notes; architecture.md, "Posts on the design system". */

/* The page is the AMA's table: --bg-sunken, with the paper's grain. Everything drawn in paper
   colour (the highlighter's slanted ends and felt edges, ink.js's dry-ink cover) reads
   --bg-canvas, so on this page --bg-canvas is that paper. Raised paper (slips, the ask note)
   is the AMA's note paper, between surface and sunken (a token in production). */
:root[data-ds] { --bg-canvas: var(--bg-sunken); --paper-raised: color-mix(in oklab, var(--bg-surface) 60%, var(--bg-sunken)); }
:focus, :focus-visible { outline: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, html * { scrollbar-width: none; }
html::-webkit-scrollbar, html *::-webkit-scrollbar { display: none; }
body { margin: 0; min-height: 100vh; background: var(--bg-sunken); color: var(--fg-default); font-family: var(--font-text); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--paper-texture) 0 0 / var(--paper-texture-size) repeat;
  filter: var(--paper-texture-filter); mix-blend-mode: var(--paper-texture-blend); opacity: var(--paper-texture-opacity);
}
::selection { background: var(--selection); }
a { color: inherit; }
[hidden] { display: none !important; }

/* ── The column: always in the middle of the page ── */
/* The type scale, phone to desktop (Mustafa, 2026-11-06: a phone isn't a small desktop). Each
   size slides with the window's width between a phone's and a desktop's, so nothing jumps:
   - the text, ~18.8px on a phone (EB Garamond's small x-height reads as a 17px sans, Apple's
     reading size), ~20.6px on a desktop, at the same leading
   - the title, ~1.75× the text on a phone, ~2.4× on a desktop: two or three lines on a phone,
     not five; headings ~1.2× the text on a phone, ~1.36× on a desktop
   The column itself is his: about 42 letters a line on a phone, wider on a desktop (+25%, his call) */
.page {
  --rail: 15rem; --gap: 2.75rem; --text-size: clamp(1.125rem, 1.03rem + 0.45vw, 1.25rem);
  font-size: calc(var(--text-size) * var(--write-scale, 1)); line-height: 1.62;
  width: min(49rem, 100% - 2.5rem); margin-inline: auto;
}
@media (min-width: 1280px) { .page { width: 51rem; } }
/* A title of two or three short lines on a phone breathes a little more */
@media (max-width: 700px) { .post-title { line-height: 1.1; } }

.post-head { text-align: center; margin: 5.5rem 0 2.6rem; }
@media (max-width: 700px) { .post-head { margin-top: 3.5rem; } }
.post-title { margin: 0; padding-bottom: 0.2em; font-weight: var(--write-h1-weight, 700); font-size: clamp(2.05rem, 1.4rem + 2.7vw, 3.1rem); line-height: 1.05; letter-spacing: -0.012em; color: var(--text-ink); text-wrap: balance; }
/* The title's last line hangs its descenders below its tight leading: the byline keeps clear of them (padding above) */
.post-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 0.45em; margin: 0.3rem 0 0; font: 400 var(--text-ui)/1.4 var(--font-ui); color: var(--fg-muted); }
.post-meta > span::after { content: "·"; margin-left: 0.45em; }

.post-body { position: relative; color: var(--text-ink); font-kerning: normal; font-variant-ligatures: common-ligatures; }
.post-body p { position: relative; margin: 0 0 1em; }
/* A heading runs the column's width, as the text does; only a lone last word is kept from its line (pretty) */
.post-body h1, .post-body h2, .post-body h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); line-height: 1.2; font-weight: var(--write-heading-weight, 600); margin: 1.9em 0 0.55em; text-wrap: pretty; }
.post-body h3 { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); }
.post-body p.is-centered { text-align: center; }
.post-body figure { margin: 1.8em 0; }
/* A picture in the text is as wide as the column, and never taller than most of the screen: a tall one narrows, centred */
.post-body figure img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; margin: 0 auto; }
.post-body img { display: block; width: 100%; height: auto; }
.post-body blockquote { margin: 1.2em 0; padding-left: 1em; border-left: 1px solid var(--border-strong); color: var(--fg-muted); }

/* The decorated initial: a Goudy glyph, a box 0.8em tall standing on the baseline, from the
   first line's cap height to the third line's baseline. Its size and drop are worked out from
   the text face's own metrics (book.js, fitInitial), so it fits each of the five faces. */
.initial { float: left; font: 400 4.94em/0.95 "Goudy Initial", var(--font-text); height: 0.8em; margin: 0.05em 0.12em 0 -0.02em; color: var(--text-ink); }
.initial-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── The highlighter: the editor's own stroke ── */
@property --hl-wet { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --hl-reach { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.hl, .np {
  --hl: var(--hl-green, oklch(0.9 0.075 140 / 0.72));
  --hl-deep: var(--hl-green-deep, var(--hl));
  --hl-cap: var(--hl-green-cap, transparent);
  --hl-grain: var(--hl-green-grain);
  --hl-now: color-mix(in oklab, var(--hl), var(--hl-deep) calc(var(--hl-wet) * 55% + var(--hl-lift, 0%)));
  --hl-top: calc(0.1em + var(--hl-jitter, 0em));
  --hl-height: calc(1.16em + var(--hl-swell, 0em));
  color: inherit;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0.1em 0.12em; margin: 0 -0.12em;
  background-color: transparent;
  background-image:
    linear-gradient(104deg, var(--bg-canvas) 0.08em, transparent 0.1em),
    linear-gradient(104deg, transparent calc(100% - 0.1em), var(--bg-canvas) calc(100% - 0.08em)),
    var(--hl-edge, linear-gradient(transparent, transparent)),
    linear-gradient(90deg, var(--hl-cap) 0, var(--hl-cap) 0.06em, transparent 0.42em, transparent calc(100% - 0.42em), var(--hl-cap) calc(100% - 0.06em), var(--hl-cap) 100%),
    var(--hl-grain, linear-gradient(transparent, transparent)),
    linear-gradient(var(--hl-now), var(--hl-now));
  background-repeat: no-repeat;
  background-size: 0.3em var(--hl-height), 0.3em var(--hl-height), var(--hl-reach) var(--hl-height), var(--hl-reach) var(--hl-height), var(--hl-reach) var(--hl-height), var(--hl-reach) var(--hl-height);
  background-position: 0 var(--hl-top), 100% var(--hl-top), 0 var(--hl-top), 0 var(--hl-top), 0 var(--hl-top), 0 var(--hl-top);
}
.np {
  --hl: var(--hl-yellow, oklch(0.94 0.09 98 / 0.72));
  --hl-deep: var(--hl-yellow-deep, var(--hl));
  --hl-cap: var(--hl-yellow-cap, transparent);
  --hl-grain: var(--hl-yellow-grain);
}
.np.is-near, .np[aria-expanded="true"] { --hl-lift: 25%; }
:is(.hl, .np):nth-of-type(4n+1) { --hl-edge: var(--hl-edge-1); --hl-jitter: -0.02em; --hl-swell: 0.03em; }
:is(.hl, .np):nth-of-type(4n+2) { --hl-edge: var(--hl-edge-2); --hl-jitter: 0.02em; --hl-swell: -0.03em; }
:is(.hl, .np):nth-of-type(4n+3) { --hl-edge: var(--hl-edge-3); --hl-jitter: 0.01em; --hl-swell: 0.02em; }
:is(.hl, .np):nth-of-type(4n) { --hl-edge: var(--hl-edge-4); --hl-jitter: -0.01em; --hl-swell: -0.02em; }
.np { cursor: pointer; }

/* Pencil marks are drawn on a layer in each paragraph, never inside the text */
.marks { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; mix-blend-mode: var(--markup-blend); z-index: 1; }
.marks path { fill: none; stroke: var(--pencil-ink, var(--accent)); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.marks .is-near { stroke-width: 1.9; }

/* ── Notes ── */
.sn { display: none; }
/* A selection in the text never takes the note beside it (Mustafa, 2026-11-06): asking about or
   sharing a noted phrase is about its words */
.post-body .sn, .post-body .talk-hands, .post-body .talk-margin .ask-close { -webkit-user-select: none; user-select: none; }
.sn-body { display: block; }
html { --note-font: var(--font-text); --note-size: 0.8em; --note-line: 1.45; --note-style: normal; --note-ink: color-mix(in oklab, var(--text-ink) 80%, var(--bg-canvas)); }
.sn-body { font-family: var(--note-font); font-size: var(--note-size); line-height: var(--note-line); font-style: var(--note-style); color: var(--note-ink); font-optical-sizing: auto; transition: color var(--dur-fast) var(--ease-out); }
.sn-body.is-near { color: var(--text-ink); }

@media (min-width: 1380px) {
  html:not([data-open="text"]) .sn { display: block; float: right; clear: right; width: var(--rail); margin: 0.32em calc(-1 * (var(--rail) + var(--gap))) 1.2em 0; }
  html:not([data-open="text"]) .sn[data-at="left"] { float: left; clear: left; margin: 0.32em 0 1.2em calc(-1 * (var(--rail) + var(--gap))); }
}

/* What a note carries: a glimpse in the margin */
.sn-glimpse { display: block; cursor: pointer; }
.sn-film { position: relative; width: 5.75rem; }
.post-body .sn-film img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-raised); }
.sn-time { position: absolute; left: 0.4rem; bottom: 0.35rem; font: 500 var(--text-micro)/1 var(--font-ui); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.55); font-variant-numeric: tabular-nums; }
.sn-quote { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; quotes: none; }
.sn-quote::before { content: "“"; } .sn-quote::after { content: "”"; }
.post-body .sn-pic { display: block; width: 100%; height: auto; margin-bottom: 0.45rem; }
/* A picture a note carries is a small print in the margin, as a reel's first frame is; it opens over the page */
.post-body .sn-excerpt .sn-pic { width: 6.5rem; box-shadow: var(--shadow-raised); }
.sn-source { display: block; margin-top: 0.35rem; font: 400 var(--text-micro)/1.35 var(--font-ui); font-style: normal; color: var(--fg-subtle); }
.sn-source a { color: var(--fg-muted); text-decoration: none; }
.sn-source a:hover { color: var(--fg-default); }
.sn-source cite { font-style: normal; }
.sn-carries.is-open .sn-glimpse { opacity: 0.45; }

/* ── A paragraph that makes room: Pretext lays it out, line by line, around what opens in it.
   Each line is its own element where Pretext puts it; the browser never wraps them. */
.fl { position: absolute; left: 0; top: 0; white-space: pre; }
.post-body p.is-flowing > .sn { position: absolute; float: none; margin: 0; left: calc(100% + var(--gap)); width: var(--rail); }
.post-body p.is-flowing > .sn[data-at="left"] { left: auto; right: calc(100% + var(--gap)); }
.post-body p.is-flowing > .initial { position: absolute; left: 0; top: 0; float: none; margin: 0; }
.ob { position: absolute; overflow: hidden; z-index: 2; }
.ob-in { position: absolute; left: 0; top: 0; }
.ob-film { position: absolute; inset: 0 0 1.5rem 0; }
.ob-film video, .ob-film img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ob-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5rem; padding-top: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 var(--text-micro)/1.35 var(--font-ui); color: var(--fg-muted); }
.ob-cap a { color: var(--fg-default); text-decoration: none; }
.ob-note { padding: 0 0 0 0.9em; border-left: 1px solid var(--border-strong); white-space: normal; font-family: var(--note-font); font-size: var(--note-size); line-height: var(--note-line); font-style: var(--note-style); color: var(--note-ink); }

/* ── The end of the post ── */
.post-foot { margin: 2.6rem 0 0; }
.fin { display: block; width: 3.2rem; height: auto; margin: 0 auto 2.6rem; overflow: visible; mix-blend-mode: var(--markup-blend); }
.fin path { fill: none; stroke: var(--fg-subtle); stroke-width: 1.3; stroke-linecap: round; }

/* Asking: the AMA's note, torn from the same paper, its words in the AMA's face */
[data-theme="dark"] .ask { --note-shadow-near: oklch(0 0 0 / 0.55); --note-shadow-far: oklch(0 0 0 / 0.35); }
.ask { position: relative; isolation: isolate; padding: 0.85rem 0.45rem 0.45rem 1rem; rotate: -0.5deg;
  --note-shadow-near: oklch(0.2 0.02 60 / 0.16); --note-shadow-far: oklch(0.2 0.02 60 / 0.09); --tear-x: 97px; --tear-y: 41px;
  filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 4px 7px var(--note-shadow-far)); }
.ask-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-xs); }
.ask .field { min-height: calc(1.05em * 1.45 * 3); padding-bottom: 0.4rem; font: 400 1.05em/1.45 "EB Garamond", Georgia, serif; color: var(--text-ink); cursor: text; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask .field:empty::before { content: attr(data-placeholder); color: var(--text-ink-placeholder); text-shadow: none; pointer-events: none; }
.ask-quote { margin: 0 2rem 0.6rem 0; padding-left: 0.8rem; border-left: 1px solid var(--border-strong); font: 400 1.05em/1.45 "EB Garamond", Georgia, serif; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.plane { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--fg-subtle); cursor: pointer; }
.plane .ic { width: 19px; height: 19px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plane.is-ready { color: var(--fg-default); }
.plane:disabled { cursor: default; }
.plane.is-ready .body { fill: currentColor; }
.plane .crease { stroke-linecap: butt; }
.plane.is-ready .crease { stroke: var(--paper-raised); stroke-width: 2.1; }

/* Asking about a passage: the selection gets one icon, as anything over the text does */
.ask-pill { position: absolute; z-index: 40; display: flex; padding: 4px; background: var(--bg-surface); box-shadow: var(--shadow-overlay); corner-shape: var(--corner-shape); border-radius: var(--radius-sm); }
.ask-pill button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--icon-default); cursor: pointer; corner-shape: var(--corner-shape); border-radius: var(--radius-xs); }
.ask-pill button:hover { background: var(--bg-hover); color: var(--fg-default); }
.ask-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The same note, held at the foot of the window while the reader stays where they were */
.ask-dock { position: fixed; z-index: 45; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); width: min(36rem, 100% - 2rem); translate: -50% 0; font-size: 1.1875rem; }
.ask-dock .ask { rotate: 0.4deg; --note-shadow-far: oklch(0.2 0.02 60 / 0.16); }
.ask-close { position: absolute; right: 0.3rem; top: 0.3rem; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--fg-subtle); cursor: pointer; }
.ask-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.read-next { margin-top: 3rem; }
.read-next ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.read-next li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border-subtle); }
.read-next a { font: 400 1em/1.3 var(--font-text); color: var(--text-ink); text-decoration: none; text-wrap: balance; }
.read-next a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.read-next time { flex: none; font: 400 var(--text-meta)/1.4 var(--font-ui); color: var(--fg-subtle); }

/* ── How far through: a pencil line across the top of the window, ticked at the end ── */
.progress { position: fixed; z-index: 30; left: 0; top: 0; width: 100%; height: 12px; overflow: visible; pointer-events: none; mix-blend-mode: var(--markup-blend); }
.progress path { fill: none; stroke: var(--pencil-ink, var(--accent)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.progress-line { stroke-dashoffset: 1; }
.progress-tick { stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.progress.is-done .progress-tick { stroke-dashoffset: 0; }

/* ── A note written into the essay (phones) ──
   The same face and size as the text; it goes down in fresh ink and dries, step by step
   (nt-w5 wet … nt-w0 dry), to its own resting ink: blue-black rests a shade fresher than the
   text around it, carbon a shade paler, so the reader can still tell it was a note. */
.post-body p.is-flowing { clip-path: inset(-50vh -50vw 0 -50vw); }
html { --nt-dry: color-mix(in oklab, var(--text-ink) 58%, var(--ink-fresh, var(--text-ink))); }
html[data-ink="carbon"] { --nt-dry: color-mix(in oklab, var(--text-ink) 72%, var(--bg-canvas)); }
.nt { cursor: pointer; }
.nt-w0 { color: var(--nt-dry); }
.nt-w1 { color: color-mix(in oklab, var(--ink-fresh, var(--text-ink)) 20%, var(--nt-dry)); }
.nt-w2 { color: color-mix(in oklab, var(--ink-fresh, var(--text-ink)) 40%, var(--nt-dry)); }
.nt-w3 { color: color-mix(in oklab, var(--ink-fresh, var(--text-ink)) 60%, var(--nt-dry)); }
.nt-w4 { color: color-mix(in oklab, var(--ink-fresh, var(--text-ink)) 80%, var(--nt-dry)); text-shadow: 0.5px 1px 0 color-mix(in oklab, var(--ink-fresh, var(--text-ink)) 30%, transparent); }
.nt-w5 { color: var(--ink-fresh, var(--text-ink)); text-shadow: 0.5px 1px 0 color-mix(in oklab, var(--ink-fresh, var(--text-ink)) 45%, transparent); }
[data-theme="dark"] :is(.nt-w4, .nt-w5) { text-shadow: -0.5px -1px 0 color-mix(in oklab, white 25%, transparent); }

/* ── The viewer: over the page, on the AMA's torn paper ── */
.viewer { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--scrim); }
.sheet { position: relative; isolation: isolate; padding: 14px 14px 12px; max-width: calc(100vw - 4rem); transform-origin: center;
  --note-shadow-near: oklch(0.2 0.02 60 / 0.2); --note-shadow-far: oklch(0.2 0.02 60 / 0.14); --tear-x: 61px; --tear-y: 133px;
  filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 6px 14px var(--note-shadow-far)); }
[data-theme="dark"] .sheet { --note-shadow-near: oklch(0 0 0 / 0.55); --note-shadow-far: oklch(0 0 0 / 0.4); }
.sheet video { display: block; background: #000; }
.sheet-cap, .sheet-source { margin-top: 0.55rem; font: 400 var(--text-meta)/1.4 var(--font-ui); color: var(--fg-muted); }
.sheet-cap a, .sheet-source a { color: var(--fg-default); text-decoration: none; }
.sheet-source cite { font-style: normal; font-family: var(--font-text); font-size: 1.08em; }
.sheet.is-words { width: min(34rem, 100vw - 4rem); padding: 1.6rem 1.8rem 1.4rem; }
.sheet-pic { display: block; width: 100%; height: auto; margin-bottom: 1.1rem; }
.sheet-quote { font: 400 1.2rem/1.55 var(--font-text); color: var(--text-ink); quotes: "“" "”"; }
.sheet-quote::before { content: open-quote; } .sheet-quote::after { content: close-quote; }

/* ── The asker's own questions, pinned above the note they asked on ── */
.asked { display: grid; gap: 1.1rem; margin-bottom: 1.4rem; }
.ask.is-asked { rotate: 0.6deg; padding: 0.85rem 1rem 1rem; }
.asked .ask-quote { margin-right: 0; }
.asked-words { font: 400 1.05em/1.45 "EB Garamond", Georgia, serif; color: var(--text-ink); }
.ask-pill .plane { width: 28px; height: 28px; color: var(--icon-default); }
.ask-pill .plane .ic { width: 17px; height: 17px; }
.ask-pill .plane:hover { color: var(--fg-default); }

.nt-src { color: var(--fg-muted); text-decoration: none; }

/* An aside's brackets: the glyph keeps its place in the line; the red pencil draws over it */
.nt.nt-br { color: transparent; text-shadow: none; }
.marks path.br { stroke-dasharray: 1 1; stroke-width: 1.5; }

/* ── The viewer: the paper and the picture travel from where they were, and back ── */
.viewer { position: fixed; inset: 0; z-index: 50; display: block; background: none; }
.viewer-scrim { position: absolute; inset: 0; background: var(--scrim); }
.viewer-paper { position: absolute; isolation: isolate; --note-shadow-near: oklch(0.2 0.02 60 / 0.2); --note-shadow-far: oklch(0.2 0.02 60 / 0.14);
  filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 6px 14px var(--note-shadow-far)); cursor: zoom-out; }
[data-theme="dark"] .viewer-paper { --note-shadow-near: oklch(0 0 0 / 0.55); --note-shadow-far: oklch(0 0 0 / 0.4); }
.viewer-paper::before { content: ""; position: absolute; inset: 0; background: var(--paper-raised);
  -webkit-mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  -webkit-mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px; mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px;
  -webkit-mask-position: 0 0, var(--tear-x) 0, calc(0px - var(--tear-x)) 100%, 0 var(--tear-y), 100% calc(0px - var(--tear-y));
  mask-position: 0 0, var(--tear-x) 0, calc(0px - var(--tear-x)) 100%, 0 var(--tear-y), 100% calc(0px - var(--tear-y));
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y; mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-composite: source-out, source-over, source-over, source-over; mask-composite: subtract, add, add, add; }
.viewer-pic, .viewer-film { position: absolute; display: block; object-fit: cover; background: #000; }
.viewer-content { position: absolute; inset: 0; pointer-events: none; }
.viewer-content a { pointer-events: auto; }
.viewer-cap { position: absolute; font: 400 var(--text-meta)/1.4 var(--font-ui); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-cap a { color: var(--fg-default); text-decoration: none; }
.viewer-words { position: absolute; padding: 1.5rem 1.7rem 1.35rem; }
@media (max-width: 700px) { .viewer-words { padding: 1.1rem 1.15rem 1rem; } .viewer-words .sheet-quote { font-size: 1.1rem; } }

/* Asking about a passage: the note in the middle of what can be seen */
.ask-body { position: absolute; isolation: isolate; /* the ink's smears sit on the note, under its words */ padding: 0.9rem 0.5rem 0.5rem 1rem; font-size: 1.1875rem; }
.ask-body .ask-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-xs); }
.ask-body .field { min-height: calc(1.05em * 1.45 * 2); padding-bottom: 0.4rem; font: 400 1.05em/1.45 "EB Garamond", Georgia, serif; color: var(--text-ink); outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-body .field:empty::before { content: attr(data-placeholder); color: var(--text-ink-placeholder); pointer-events: none; }
.ask-body .asked-words { padding: 0 0.6rem 1.6rem 0; }
.ask-view .viewer-paper { cursor: default; }

/* ── The reader's markup: red pencil under what they asked about, their question by hand ── */
html { --hand: var(--font-hand); --hand-size: 1.18em; --hand-line: 0.98; }
.talk-marks { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; mix-blend-mode: var(--markup-blend); }
.talk-marks path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.talk-marks path.talk-arrow { stroke-width: 1.2; }
.talk-hands { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.talk-hand { position: absolute; pointer-events: auto; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 400 var(--hand-size)/var(--hand-line) var(--hand); color: var(--accent); mix-blend-mode: var(--markup-blend); }
.talk-hand.is-mark { right: calc(100% + 3px); font-size: calc(var(--hand-size) * 1.45); line-height: 1; rotate: 8deg; padding: 0 0.1em; }
/* Answered: the bear beside the passage, in the margin on a computer, the gutter on a phone */
.talk-hand.is-bear { width: 20px; mix-blend-mode: normal; right: calc(100% + 0.9rem); }
.talk-hand.is-bear img { display: block; width: 100%; height: auto; }
@media (max-width: 1379.98px) { .talk-hand.is-bear { right: calc(100% + 1px); width: 17px; } }
[data-theme="dark"] .talk-hand.is-bear img { filter: invert(0.9); }
.talk-hand.is-new img { animation: bear-arrives var(--dur-reflow, 600ms) var(--ease-out) both; }
@keyframes bear-arrives { from { opacity: 0; transform: translateY(-6px) rotate(-10deg); } }
/* The open thread, in the left margin: the AMA's notes, a size down */
.talk-margin { position: absolute; z-index: 4; right: calc(100% + 2.6rem); width: min(19rem, (100vw - 100%) / 2 - 3.4rem); display: grid; transform-origin: right top; }
/* Its words at the margin notes' size and leading, so a long exchange stays short */
.talk-margin .ask :is(.asked-words, .field) { font-size: var(--note-size); line-height: var(--note-line); }
.talk-margin .ask.theirs, .talk-margin .ask.yours { padding: 0.7rem 0.85rem 0.85rem; }
.talk-margin .ask.yours { padding-bottom: 1.9rem; }
.talk-margin .ask.write { padding: 0.7rem 0.4rem 0.4rem 0.85rem; }
.talk-margin .ask.theirs:has(> .ds-stamp) { padding-bottom: 2rem; }
.talk-margin > * + * { margin-top: 8px; }
.talk-margin > .ask:first-child { padding-right: 2rem; }
.talk-margin .ask.theirs, .talk-margin .ask.yours { width: 94%; }
.talk-margin .ask.write { margin-top: 12px; }
.talk-margin .ask .field { min-height: calc(var(--note-size) * var(--note-line) * 2); }
/* An answer waiting to be read: the reader's mark is circled */


/* ── A thread, open over the page: the AMA's notes on its table ── */
.thread { position: absolute; display: grid; align-content: start; gap: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 4px 10px; scrollbar-width: none; font-size: 1.1875rem; transform-origin: center; }
.thread .ask-quote { margin: 0 2rem 0.6rem 0; }
.thread .ask-close { position: absolute; right: 0.3rem; top: 0.3rem; z-index: 2; }
.ask.theirs, .ask.yours { width: 90%; }
.ask.theirs { justify-self: end; rotate: var(--tilt, -0.6deg); padding: 0.85rem 1rem 1.1rem; }
.ask.yours { justify-self: start; rotate: 0deg; padding: 0.85rem 1rem 2.2rem; }
.ask.yours .sig { position: absolute; right: 12px; bottom: 10px; width: 20px; height: auto; }
.thread > * + *, .talk-thread > * + * { margin-top: 10px; }
.ask.write { width: 100%; padding: 0.85rem 0.45rem 0.45rem 1rem; margin-top: 16px; }
.post-foot > .ask.write { margin-top: 0; }
.asked-words { font: 400 1.05em/1.45 "EB Garamond", Georgia, serif; color: var(--text-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask .field { font: 400 1.05em/1.45 "EB Garamond", Georgia, serif; }
.ask.is-sent .ask-row { grid-template-columns: minmax(0, 1fr); }
.ask.is-sent .plane { position: absolute; right: 0.45rem; bottom: 0.45rem; pointer-events: none; }
.asked .ask { cursor: pointer; }

/* ── Under the post: what he has published, grouped by the passage it's about ── */
.talk { display: grid; gap: 2.6rem; margin: 0 0 3rem; }
.talk-group { display: grid; gap: 0.9rem; }
.talk-passage { display: block; width: 100%; margin: 0; padding: 0 0 0 0.8rem; border: 0; border-left: 1px solid var(--fg-subtle); background: none; text-align: left; cursor: pointer; font: 400 1.05em/1.45 "EB Garamond", Georgia, serif; color: var(--fg-muted); -webkit-line-clamp: 3; }
.talk-thread { display: grid; }

/* The open thread takes the margin that's free beside its passage */
.talk-margin.is-right { right: auto; left: calc(100% + 2.6rem); transform-origin: left top; }
.talk-hand.is-bear.is-right { right: auto; left: calc(100% + 0.9rem); }

/* A stamped note keeps room under its words for the stamp */
.ask.theirs:has(> .ds-stamp) { padding-bottom: 2.3rem; }

/* The asker's own threads under the post: a gap between threads, notes close within one */
.asked { gap: 1.8rem; }
.asked .talk-thread > .write { margin-top: 12px; }

/* ── Notes and their phrases, kept together ── */
.leaders { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 2; }
.leaders path { fill: none; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.leaders path.is-rest { stroke: var(--fg-subtle); stroke-width: 0.9; opacity: 0.55; }
.leaders path.is-lit { stroke: var(--accent); stroke-width: 1.4; mix-blend-mode: var(--markup-blend); }
.sn { transition: opacity var(--dur-base) var(--ease-out); }
.post-body.is-pairing .sn:not(.is-lit) { opacity: 0.38; }
.sn.is-lit .sn-body { color: var(--text-ink); }
.sn:not(.sn-carries) { cursor: pointer; }
/* While a reader's thread is open in the left margin, his notes there step back */
.post-body:has(> .talk-margin:not([hidden])) .sn[data-at="left"] { opacity: 0.18; }

/* Day or night, the AMA's button in the same corner */
.theme { position: fixed; z-index: 20; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }

/* ── The selection's two icons: ask, share ── */
.ask-pill { gap: 2px; }
.ask-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Sharing a passage: the AMA's picture of it (card.js), the AMA's slip under it (paper.css) ── */
.share-picture { position: absolute; display: block; height: auto; cursor: zoom-out; filter: drop-shadow(0 2px 3px var(--note-shadow-near)) drop-shadow(0 10px 24px var(--note-shadow-far)); }
.share-slip { z-index: 60; padding-left: 10px; }
.share-slip .ds-icon-btn { text-decoration: none; }
.share-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--border-default); }
.talk-marks path.shared { stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* ── The bear, top left: every post ── */
.bear-index { position: fixed; z-index: 20; top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); width: 36px; height: 36px; padding: 2px; border: 0; background: none; cursor: pointer; }
.bear-index img { display: block; width: 100%; height: auto; }
[data-theme="dark"] .bear-index img { filter: url(#bear-feather) brightness(1.12); }
.index { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 1.4rem 1.6rem 1.2rem; }
.index-view .index { position: absolute; }
.index-year + .index-year { margin-top: 1.3rem; }
.index h2 { margin: 0 0 0.3rem; font: 500 var(--text-meta)/1.4 var(--font-ui); color: var(--fg-subtle); letter-spacing: 0.02em; }
.index ol { list-style: none; margin: 0; padding: 0; }
.index li a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.34rem 0; text-decoration: none; color: var(--text-ink); }
.index .index-title { position: relative; font: 400 1.08rem/1.3 "EB Garamond", Georgia, serif; text-wrap: balance; }
.index time { flex: none; font: 400 var(--text-meta)/1.4 var(--font-ui); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.index li a:hover .index-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* On a phone the bear and the moon sit at the top of the page and scroll away with it, as the AMA has them */
@media (max-width: 959.98px) { .bear-index, .theme { position: absolute; } }

/* Stamps on the asking notes and threads keep clear of the torn corner, as on the AMA homepage */
.ask > .ds-stamp-sm { right: 18px; bottom: 16px; }
.ask.theirs:has(> .ds-stamp) { padding-bottom: 3rem; }
.talk-margin .ask.theirs:has(> .ds-stamp) { padding-bottom: 2.7rem; }

/* ── Asking, for real: what the server said when it couldn't keep a note; the passage a published thread is about, a link to it ── */
.ask-error { margin: 0.35rem 2rem 0 0; font: 400 var(--text-meta)/1.4 var(--font-ui); color: var(--accent); }
.talk-passage { text-decoration: none; }
.asked[hidden] { display: none; }
/* His answers' prints and what he shared, at the note's width (ama/links.css) */
.ask .lks, .ask .mds { margin-right: 0.6rem; }

/* A slip: what a note carries, opened in the text on a phone, on a torn note (.paper.torn, ama/paper.css) */
.slip { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr; gap: 0 1rem; padding: 0.9rem 1.05rem 1rem; white-space: normal;
  --note-shadow-near: oklch(0.2 0.02 60 / 0.16); --note-shadow-far: oklch(0.2 0.02 60 / 0.09);
  filter: drop-shadow(0 1px 1px var(--note-shadow-near)) drop-shadow(0 4px 7px var(--note-shadow-far)); }
[data-theme="dark"] .slip { --note-shadow-near: oklch(0 0 0 / 0.55); --note-shadow-far: oklch(0 0 0 / 0.35); }
.slip.has-pic { grid-template-columns: 6.5rem 1fr; }
.slip-pic { display: block; width: 100%; height: auto; align-self: start; }
.slip-quote { margin: 0; padding: 0; border: 0; font: 400 0.84em/1.5 var(--font-text); color: var(--text-ink); quotes: "“" "”"; }
.slip-quote::before { content: open-quote; } .slip-quote::after { content: close-quote; }
.slip-source { margin: 0.5rem 0 0; font: 400 var(--text-meta)/1.4 var(--font-ui); color: var(--fg-muted); }
.slip-source a { color: var(--fg-default); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.slip-source cite { font-style: normal; font-family: var(--font-text); font-size: 1.08em; line-height: 0; } /* a taller face mustn't grow the line Pretext measures */

/* A preview's one line at the top: what it is, in small type, out of the way */
.preview-bar { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; margin: 0; text-align: center; pointer-events: none; font: 500 var(--text-meta)/1.4 var(--font-ui); letter-spacing: 0.02em; color: var(--accent); }