/* The vocabulary: every move, each scoped .mv-<id>, each with its phone form (at the foot of its block).
   A page sets --ground, --ink, --soft and --accent, measured from its opening picture by tools/build.py; a color
   turn starts a .stretch with its own. Every scroll-linked effect is an extra: without support, or with reduced
   motion, each move is complete and still. Ported from sketches/2026-10-10-six-moves and -more-moves. */
@view-transition { navigation: auto; }
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0; background:var(--ground); color:var(--ink); font:17px/1.55 var(--text)}
:root{--display:"Newsreader","Iowan Old Style",Georgia,serif; --text:var(--display); --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --orn:"Room Marks","Room Fleurons","Room Fleurons 1766","Room Fleurons 1860","EB Garamond","Apple Symbols","Segoe UI Symbol",serif; --pad:clamp(16px,4vw,64px); --rubric:#9a3324}
body.dark{--rubric:#e48d70}   /* a dark page's red, lighter, as Unseen buds had it */
/* ET Book, for the Commonplace look: stanza's own copy (src/fonts/et-book, MIT); a browser fetches it only when used */
@font-face{font-family:"ET Book"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/et-book/et-book-roman-old-style-figures.woff") format("woff")}
@font-face{font-family:"ET Book"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/et-book/et-book-display-italic-old-style-figures.woff") format("woff")}
@font-face{font-family:"ET Book"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/et-book/et-book-bold-line-figures.woff") format("woff")}
/* the printers' marks and the flowers, in faces of stanza's own (src/fonts/room), the same on every reader's device: Stanza Marks
   (tools/marks_font.py), the composer's fleurons (fleurons_font.py), Caslon's of 1766 (fleurons_1766.py) and Whitman's of 1860
   (fleurons_1860.py), each fetched only for a
   mark a page sets. The kit declares them as its own, by these ranges (tools/kit.py → mark_faces) */
@font-face{font-family:"Room Marks"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/room/marks.woff2") format("woff2");
  unicode-range:U+0020,U+002A,U+00A7,U+00B6,U+203B,U+2042,U+205C,U+2234,U+2619,U+261C,U+261E,U+2723-2724,U+2726,U+273F-2741,U+2766-2767}
@font-face{font-family:"Room Fleurons"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/room/fleurons.woff2") format("woff2"); unicode-range:U+E900-E9FF}
@font-face{font-family:"Room Fleurons 1766"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/room/fleurons-1766.woff2") format("woff2"); unicode-range:U+EA00-EAFF}
@font-face{font-family:"Room Fleurons 1860"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/room/fleurons-1860.woff2") format("woff2"); unicode-range:U+EB00-EBFF}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
figure{margin:0}
.mv{position:relative}
.stretch{background:var(--ground); color:var(--ink)}
.label{position:absolute; z-index:5; top:14px; left:16px; font:500 11px/1.3 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--soft)}
body.nolabels .label{display:none}
.mono{font:500 11px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.mark{font-family:var(--orn); line-height:1; color:var(--ink); font-style:normal}
.mark.red{color:var(--rubric)}
.mark.none{visibility:hidden}
/* the drawn marks: the lines and longer pieces (moves.py DRAWN), sized by the page, not by the mark's type */
.m-swelled{display:inline-block; width:min(15rem,56vw); height:7px; vertical-align:middle; color:currentColor}
.m-double{display:inline-block; width:min(13rem,50vw); border-top:2.5px solid currentColor; padding-top:3px; vertical-align:middle}
.m-double::after{content:""; display:block; border-top:.75px solid currentColor}
.m-rule{display:inline-block; width:3.4rem; border-top:1px solid currentColor; vertical-align:middle}
.m-head{display:inline-block; font-size:.62em; letter-spacing:.28em; margin-right:-.28em; white-space:nowrap}
/* the composer's flowers (moves.py → FLOWERS, ROWS): one alone a little larger, its face drawing every flower on less ground than
   Garamond's leaf; a row as many whole repeats as its width holds, edge to edge as cast (the rest wrap out of sight) */
.m-fl{font-size:1.13em}
.m-run{display:inline-flex; flex-wrap:wrap; justify-content:center; width:9em; max-width:100%; height:1em; overflow:hidden; font-size:.62em;
  line-height:1; letter-spacing:0; vertical-align:middle}
.m-finis{display:inline-grid; justify-items:center; gap:.9rem; vertical-align:middle}
.m-finis .m-word{font:500 .8rem/1 var(--display, Georgia), serif; letter-spacing:.32em; margin-right:-.32em; text-transform:uppercase; font-style:normal}
.m-device{display:inline-grid; place-items:center; width:3.2rem; height:3.2rem; border:1.5px solid currentColor; border-radius:50%;
  outline:.75px solid currentColor; outline-offset:3px; vertical-align:middle}
.m-device span{font:italic 400 1.5rem/1 var(--display, Georgia), serif}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* a poem, whole: its title, then its lines and stanzas; a long line wraps under itself, indented */
/* its title as Whitman's books set one (his word, 2026-10-12: "use titles as his book set them"; the 1891–92 Leaves of
   Grass, p. 388, "AFTER THE DAZZLE OF DAY."): roman capitals a size below the poem (its capitals .83 the height of the
   poem's, measured on the scan), a little letterspaced, in the poem's own face and ink. The looks with a title of their
   own keep it */
/* centered over the poem, as the page centers it (his word, 2026-10-12: "yes center them everywhere"): the poem takes a
   column as wide as its longest line, or its measure where a line turns over, and the title and its headnote center on
   it, wherever the move places the poem */
.poem{display:grid; grid-template-columns:fit-content(100%); justify-content:start}
.poem-title, .poem-note{text-align:center}
.poem-title{margin:0; font-style:normal; font-weight:400; font-size:.83em; line-height:1.3; text-transform:uppercase; letter-spacing:.07em; color:var(--ink)}
/* and the white beneath it as the book leaves it (his word: "widen to match the book"): the poem's first baseline 1.64 of
   its own lines below the title's, measured on p. 388; in lines (lh), so it holds however a move leads its poem */
.poem-title + .verse, .poem-note + .verse{margin-top:1.1em; margin-top:.72lh}
/* whose words, when another's (2026-10-15): beneath the title in small capitals, as an anthology prints them, the book and the translator
   under them, quieter; the white the title leaves, under them (moves.py → by_p) */
.poem-by{margin:.4em 0 0; text-align:center; font-size:.8em; line-height:1.35; color:var(--ink); opacity:.78}
.poem-by .nm{display:block; font-variant-caps:all-small-caps; letter-spacing:.1em}
.poem-by .src{display:block; font-size:.9em}
.poem-by + :is(.verse, .poem-note){margin-top:1.1em; margin-top:.72lh}
.essay .poem-by{margin:-1.5em 0 2.1em; text-align:left}
/* a title the writer set Left, Center or Right (his words, 2026-10-25: "make center and right work on titles"; his pick, "a"; moves.py →
   title_p): worn over the room's centering and a look's own (Lowercase's flush left), on the poem's column; its name and headnote with it.
   Untouched, it centers as above */
.poem-title[data-align="left"], .poem-title[data-align="left"] ~ :is(.poem-by:not(.at-foot), .poem-note){text-align:left}
.poem-title[data-align="center"], .poem-title[data-align="center"] ~ :is(.poem-by:not(.at-foot), .poem-note){text-align:center}
.poem-title[data-align="right"], .poem-title[data-align="right"] ~ :is(.poem-by:not(.at-foot), .poem-note){text-align:right}
/* a headnote under the title, as the page prints one (Spirit That Form'd This Scene: "Written in Platte Cañon,
   Colorado."), in a smaller size of the poem's face, in its own type (words.json → note) */
.poem-note{margin:1.85em 0 0; font-size:.68em; line-height:1.35; color:var(--ink)}   /* measured on p. 368: its capitals .85 of the title's, its baseline 1.42 lines below the title's */
.verse{margin:0}
/* a line exactly as typed (his word, 2026-10-11): its indent is its own spaces and tabs (a tab, four spaces), as the
   edit box shows them, and so are the spaces inside it. A turnover hangs six spaces in, or past the poem's own indents
   where one stands near (hang-N, N spaces' width: moves.py hang_of), so a line that wraps never starts where a line the
   poet set in starts */
.verse > span{display:block; white-space:pre-wrap; tab-size:4; --hang:calc(var(--hang-cols, 6) * .27em); padding-inline-start:var(--hang); text-indent:calc(-1 * var(--hang))}
/* a poem's own type within a line (his words, 2026-10-12): italic, bold, underline, small caps */
.verse .ul{text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.16em}
.verse .sc{font-variant-caps:small-caps; letter-spacing:.04em}
.verse .uc{text-transform:uppercase; letter-spacing:.06em}   /* all capitals, the letters kept as typed (2026-10-14) */
:is(.verse, .poem-title) .md{font-weight:600}   /* M, a medium weight a step short of bold (2026-10-14) */
/* and, for poets: a word spaced out, raised or lowered; a poem's figures old-style, its ligatures rich (the joined ct, st) */
.verse .ls{letter-spacing:.16em}
.verse .sup, .verse .sub{font-size:.66em; line-height:0; position:relative}
.verse .sup{vertical-align:baseline; top:-.6em} .verse .sub{vertical-align:baseline; top:.25em}
.poem.fig-old{font-variant-numeric:oldstyle-nums}
.poem.lig-rich{font-variant-ligatures:common-ligatures discretionary-ligatures historical-ligatures}
.verse.hang-7{--hang-cols:7} .verse.hang-8{--hang-cols:8} .verse.hang-9{--hang-cols:9} .verse.hang-10{--hang-cols:10} .verse.hang-11{--hang-cols:11} .verse.hang-12{--hang-cols:12} .verse.hang-13{--hang-cols:13}
.verse.hang-14{--hang-cols:14} .verse.hang-15{--hang-cols:15} .verse.hang-16{--hang-cols:16} .verse.hang-17{--hang-cols:17} .verse.hang-18{--hang-cols:18} .verse.hang-19{--hang-cols:19} .verse.hang-20{--hang-cols:20}
.verse.hang-21{--hang-cols:21} .verse.hang-22{--hang-cols:22} .verse.hang-23{--hang-cols:23} .verse.hang-24{--hang-cols:24} .verse.hang-25{--hang-cols:25} .verse.hang-26{--hang-cols:26} .verse.hang-27{--hang-cols:27}
.verse.hang-28{--hang-cols:28} .verse.hang-29{--hang-cols:29} .verse.hang-30{--hang-cols:30} .verse.hang-31{--hang-cols:31} .verse.hang-32{--hang-cols:32} .verse.hang-33{--hang-cols:33} .verse.hang-34{--hang-cols:34}
.verse.hang-35{--hang-cols:35} .verse.hang-36{--hang-cols:36} .verse.hang-37{--hang-cols:37} .verse.hang-38{--hang-cols:38} .verse.hang-39{--hang-cols:39} .verse.hang-40{--hang-cols:40}
/* half a column more, for a depth a page sets between two (Whitman's: 2.8 ems on the 1881 plates, 2 in the annexes) */
.verse.hang-6h{--hang-cols:6.5} .verse.hang-7h{--hang-cols:7.5} .verse.hang-8h{--hang-cols:8.5} .verse.hang-9h{--hang-cols:9.5} .verse.hang-10h{--hang-cols:10.5} .verse.hang-11h{--hang-cols:11.5} .verse.hang-12h{--hang-cols:12.5}
.verse.hang-13h{--hang-cols:13.5} .verse.hang-14h{--hang-cols:14.5} .verse.hang-15h{--hang-cols:15.5} .verse.hang-16h{--hang-cols:16.5} .verse.hang-17h{--hang-cols:17.5} .verse.hang-18h{--hang-cols:18.5} .verse.hang-19h{--hang-cols:19.5}
.verse.hang-20h{--hang-cols:20.5} .verse.hang-21h{--hang-cols:21.5} .verse.hang-22h{--hang-cols:22.5} .verse.hang-23h{--hang-cols:23.5} .verse.hang-24h{--hang-cols:24.5} .verse.hang-25h{--hang-cols:25.5} .verse.hang-26h{--hang-cols:26.5}
.verse.hang-27h{--hang-cols:27.5} .verse.hang-28h{--hang-cols:28.5} .verse.hang-29h{--hang-cols:29.5} .verse.hang-30h{--hang-cols:30.5} .verse.hang-31h{--hang-cols:31.5} .verse.hang-32h{--hang-cols:32.5} .verse.hang-33h{--hang-cols:33.5}
.verse.hang-34h{--hang-cols:34.5} .verse.hang-35h{--hang-cols:35.5} .verse.hang-36h{--hang-cols:36.5} .verse.hang-37h{--hang-cols:37.5} .verse.hang-38h{--hang-cols:38.5} .verse.hang-39h{--hang-cols:39.5} .verse.hang-40h{--hang-cols:40.5}
.verse + .verse{margin-top:1.1em}
[data-empty]{display:none}
.words:has(> [data-empty]){display:none}

/* ── one picture ─────────────────────────────────────────────────────────────────────────────────── */
/* the bleed — one picture to every edge, a line in its calmest corner */
.mv-bleed{height:100svh; min-height:420px; overflow:hidden}
.mv-bleed .fill{width:100%; height:100%; object-fit:cover}
.mv-bleed .calm{position:absolute; z-index:2; max-width:min(34rem, calc(100% - 2 * var(--pad))); color:var(--calm-ink)}
.mv-bleed .calm.at-top{top:clamp(28px,7vh,72px)} .mv-bleed .calm.at-bottom{bottom:clamp(28px,7vh,72px)}
.mv-bleed .calm.at-left{left:clamp(20px,5vw,72px); text-align:left} .mv-bleed .calm.at-right{right:clamp(20px,5vw,72px); text-align:right}
.mv-bleed .calm.at-right .poem{justify-content:end}   /* its column keeps to the right, as its lines do */
.mv-bleed .name{margin:0; font:italic 400 clamp(1.6rem,3.4vw,2.6rem)/1.08 var(--display)}
.mv-bleed .calm .poem{font:400 clamp(1.05rem,1.6vw,1.4rem)/1.45 var(--display); text-shadow:0 1px 16px rgba(0,0,0,.45)}
.mv-bleed .calm .poem-title{color:var(--calm-ink); opacity:.85}
.mv-bleed.opening .fill{view-transition-name:opening}   /* where the last chapter's door lands */

/* the reveal — a window onto the picture opens to the whole screen; four ground-colored panels slide away
   (transforms only: a clip-path here repainted the whole screen on every frame) */
.mv-reveal{height:170svh; view-timeline-name:--reveal}
.mv-reveal .stage{position:sticky; top:0; height:100svh; overflow:hidden}
.mv-reveal img{width:100%; height:100%; object-fit:cover}
.mv-reveal .shade{display:none}
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .mv-reveal .shade{display:block; position:absolute; z-index:2; background:var(--ground); animation:linear both;
    animation-timeline:--reveal; animation-range:contain 0% contain 75%}
  .mv-reveal .shade.top{left:0; right:0; top:0; height:30%; animation-name:shade-up}
  .mv-reveal .shade.bottom{left:0; right:0; bottom:0; height:18%; animation-name:shade-down}
  .mv-reveal .shade.left{left:0; top:0; bottom:0; width:46%; animation-name:shade-left}
  .mv-reveal .shade.right{right:0; top:0; bottom:0; width:22%; animation-name:shade-right}
  @keyframes shade-up{to{translate:0 -101%}} @keyframes shade-down{to{translate:0 101%}}
  @keyframes shade-left{to{translate:-101% 0}} @keyframes shade-right{to{translate:101% 0}}
  @media (max-width:700px){ .mv-reveal .shade.top{height:31%} .mv-reveal .shade.bottom{height:27%}
    .mv-reveal .shade.left{width:21%} .mv-reveal .shade.right{width:21%} }
}}

/* a title page's words: the frontispiece, the title wall and the named reveal (moves.py → title_page): the room's name large, a line or two
   beneath it, after a blank line the imprint in small capitals */
.tp{display:grid; justify-items:center; text-align:center}
.tp-name{margin:0; font:italic 400 clamp(2.6rem,6.2vw,6.4rem)/1 var(--display); color:var(--ink); text-wrap:balance}
.tp-lines{margin:1em 0 0; max-width:36ch; font-size:1.06rem; line-height:1.5; color:var(--ink); text-wrap:balance}
.tp-mark{margin:1.5em 0 0; font-size:1.5rem; line-height:1}
.tp-imprint{margin:2.8em 0 0; font-variant-caps:all-small-caps; letter-spacing:.14em; line-height:1.6; color:var(--soft)}

/* the reveal, named: the room's name on the page above the centred window (or beneath it), lifted away with that page as the window opens,
   never over the picture; where nothing moves, the name stands on its page above the picture */
.mv-reveal .stage .tp{display:none; position:absolute; left:0; right:0; padding:0 var(--pad)}
.mv-reveal .stage .tp-lines{font-variant-caps:all-small-caps; letter-spacing:.16em; font-size:1rem; color:var(--soft)}
.mv-reveal .shade.top .tp{bottom:5.5svh} .mv-reveal .shade.bottom .tp{top:5svh}
.mv-reveal .stage > .tp[data-empty]{position:absolute; z-index:4; top:18svh; left:50%; right:auto; translate:-50% 0; padding:0}
.mv-reveal .still{display:none; position:absolute; z-index:3; left:0; right:0; top:0; padding:10svh var(--pad) 5svh; background:var(--ground)}
.mv-reveal .still .tp{display:grid; position:static; padding:0}
.mv-reveal .still .tp-name{font-size:clamp(2.4rem,5vw,4.6rem)}
@supports not (animation-timeline: view()){ .mv-reveal .named .still{display:block} }
@media (prefers-reduced-motion:reduce){ .mv-reveal .named .still{display:block} }
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .mv-reveal .shade .tp{display:grid}
  .mv-reveal .named .shade.top, .mv-reveal .named .shade.bottom{z-index:3}   /* the named page over the side panels: the name whole */
  .mv-reveal .named.above .shade.top{height:46%} .mv-reveal .named.above .shade.bottom{height:11%}
  .mv-reveal .named.above .shade.left, .mv-reveal .named.above .shade.right{width:29%}
  .mv-reveal .named.below .shade.top{height:9%} .mv-reveal .named.below .shade.bottom{height:44%}
  .mv-reveal .named.below .shade.left, .mv-reveal .named.below .shade.right{width:27%}
  @media (max-width:700px){
    .mv-reveal .named.above .shade.top{height:47%} .mv-reveal .named.above .shade.bottom{height:10%}
    .mv-reveal .named.below .shade.top{height:9%} .mv-reveal .named.below .shade.bottom{height:46%}
    .mv-reveal .named .shade.left, .mv-reveal .named .shade.right{width:13%}
    .mv-reveal .stage .tp-name{font-size:2.5rem} .mv-reveal .stage .tp-name.long{font-size:2rem}
  }
}}

/* a round window onto a picture: the iris closes one, the reveal's round window opens one, and the colophon closes the room's first picture
   into its device (his yes, 2026-10-21: "yes on a, b and c"; research/2026-10-21-the-times-reveal.md). The window is a circle as wide as
   the screen's diagonal about (--cx, --cy), scaled; the picture inside it is scaled back by as much about the same point, so the picture
   holds still while its window moves. Transforms alone (a clip-path repainted the whole screen on every frame: the reveal), the two scales
   keyframed in steps (below; app/tools/iris_frames.py), since a room on a loupe site takes no @property to carry one number to both. The
   stage is a container, so the picture is sized to the stage, never to its window; where nothing moves it is the whole stage, still */
.stage.round{container-type:size; --cx:50cqw; --cy:50cqh; --d:calc(2 * hypot(50cqw, max(var(--cy), 100cqh - var(--cy))))}
.stage.round .win{position:absolute; z-index:1; left:calc(var(--cx) - var(--d) / 2); top:calc(var(--cy) - var(--d) / 2); width:var(--d); height:var(--d);
  border-radius:50%; overflow:hidden}
.stage.round .win img{position:absolute; left:calc(var(--d) / 2 - var(--cx)); top:calc(var(--d) / 2 - var(--cy)); width:100cqw; height:100cqh;
  max-width:none; object-fit:cover; transform-origin:var(--cx) var(--cy)}
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .stage.round .win, .stage.round .win img{will-change:scale}   /* each use sets its animation, then its timeline: a shorthand after resets it */
}}
/* the round window's steps: app/tools/iris_frames.py */
@keyframes iris-close-win{0%{scale:1} 6%{scale:1} 7.5%{scale:0.94763} 9%{scale:0.89667} 10.5%{scale:0.84712} 12%{scale:0.79898}
  13.5%{scale:0.75225} 15%{scale:0.70692} 16.5%{scale:0.66301} 18%{scale:0.6205} 19.5%{scale:0.5794} 21%{scale:0.5397}
  22.5%{scale:0.50142} 24%{scale:0.46454} 25.5%{scale:0.42908} 27%{scale:0.39502} 28.5%{scale:0.36236} 30%{scale:0.33112}
  31.5%{scale:0.30129} 33%{scale:0.27286} 34.5%{scale:0.24584} 36%{scale:0.22023} 37.5%{scale:0.19603} 39%{scale:0.17324}
  40.5%{scale:0.15185} 42%{scale:0.13188} 43.5%{scale:0.11331} 45%{scale:0.09615} 46.5%{scale:0.0804} 48%{scale:0.06605}
  49.5%{scale:0.05312} 51%{scale:0.04159} 52.5%{scale:0.03147} 54%{scale:0.02276} 55.5%{scale:0.01546} 57%{scale:0.00956}
  58.5%{scale:0.00508; opacity:1} 60%{scale:0.002; opacity:0} 100%{scale:0.002; opacity:0}}
@keyframes iris-close-pic{0%{scale:1} 6%{scale:1} 7.5%{scale:1.05526} 9%{scale:1.11523} 10.5%{scale:1.18046} 12%{scale:1.25159}
  13.5%{scale:1.32935} 15%{scale:1.41458} 16.5%{scale:1.50828} 18%{scale:1.61161} 19.5%{scale:1.72594} 21%{scale:1.85287}
  22.5%{scale:1.99434} 24%{scale:2.15265} 25.5%{scale:2.33059} 27%{scale:2.53154} 28.5%{scale:2.75965} 30%{scale:3.02004}
  31.5%{scale:3.31909} 33%{scale:3.66487} 34.5%{scale:4.06764} 36%{scale:4.54065} 37.5%{scale:5.10123} 39%{scale:5.77241}
  40.5%{scale:6.58532} 42%{scale:7.58287} 43.5%{scale:8.82553} 45%{scale:10.401} 46.5%{scale:12.439} 48%{scale:15.14} 49.5%{scale:18.827}
  51%{scale:24.045} 52.5%{scale:31.776} 54%{scale:43.937} 55.5%{scale:64.694} 57%{scale:104.566} 58.5%{scale:196.946} 60%{scale:500}
  100%{scale:500}}
@keyframes iris-open-win{0%{scale:0.24} 4.16667%{scale:0.27167} 8.33333%{scale:0.30333} 12.5%{scale:0.335} 16.667%{scale:0.36667}
  20.833%{scale:0.39833} 25%{scale:0.43} 29.167%{scale:0.46167} 33.333%{scale:0.49333} 37.5%{scale:0.525} 41.667%{scale:0.55667}
  45.833%{scale:0.58833} 50%{scale:0.62} 54.167%{scale:0.65167} 58.333%{scale:0.68333} 62.5%{scale:0.715} 66.667%{scale:0.74667}
  70.833%{scale:0.77833} 75%{scale:0.81} 79.167%{scale:0.84167} 83.333%{scale:0.87333} 87.5%{scale:0.905} 91.667%{scale:0.93667}
  95.833%{scale:0.96833} 100%{scale:1}}
@keyframes iris-open-pic{0%{scale:4.16667} 4.16667%{scale:3.68098} 8.33333%{scale:3.2967} 12.5%{scale:2.98507} 16.667%{scale:2.72727}
  20.833%{scale:2.51046} 25%{scale:2.32558} 29.167%{scale:2.16606} 33.333%{scale:2.02703} 37.5%{scale:1.90476} 41.667%{scale:1.79641}
  45.833%{scale:1.69972} 50%{scale:1.6129} 54.167%{scale:1.53453} 58.333%{scale:1.46341} 62.5%{scale:1.3986} 66.667%{scale:1.33929}
  70.833%{scale:1.2848} 75%{scale:1.23457} 79.167%{scale:1.18812} 83.333%{scale:1.14504} 87.5%{scale:1.10497} 91.667%{scale:1.06762}
  95.833%{scale:1.0327} 100%{scale:1}}
@keyframes iris-seal-win{0%{scale:1} 6%{scale:1} 7.71429%{scale:0.94679} 9.42857%{scale:0.89504} 11.143%{scale:0.84475}
  12.857%{scale:0.79591} 14.571%{scale:0.74852} 16.286%{scale:0.70258} 18%{scale:0.65811} 19.714%{scale:0.61508} 21.429%{scale:0.57351}
  23.143%{scale:0.53339} 24.857%{scale:0.49473} 26.571%{scale:0.45753} 28.286%{scale:0.42177} 30%{scale:0.38747} 31.714%{scale:0.35463}
  33.429%{scale:0.32324} 35.143%{scale:0.2933} 36.857%{scale:0.26482} 38.571%{scale:0.2378} 40.286%{scale:0.21222} 42%{scale:0.18811}
  43.714%{scale:0.16544} 45.429%{scale:0.14423} 47.143%{scale:0.12448} 48.857%{scale:0.10618} 50.571%{scale:0.08933}
  52.286%{scale:0.07394} 54%{scale:0.06} 100%{scale:0.06}}
@keyframes iris-seal-pic{0%{scale:1} 6%{scale:1} 7.71429%{scale:1.05619} 9.42857%{scale:1.11726} 11.143%{scale:1.18379}
  12.857%{scale:1.25643} 14.571%{scale:1.33597} 16.286%{scale:1.42332} 18%{scale:1.51951} 19.714%{scale:1.6258} 21.429%{scale:1.74365}
  23.143%{scale:1.87478} 24.857%{scale:2.02129} 26.571%{scale:2.18567} 28.286%{scale:2.37094} 30%{scale:2.58082} 31.714%{scale:2.81984}
  33.429%{scale:3.09367} 35.143%{scale:3.40942} 36.857%{scale:3.7761} 38.571%{scale:4.20527} 40.286%{scale:4.712} 42%{scale:5.31616}
  43.714%{scale:6.04441} 45.429%{scale:6.93325} 47.143%{scale:8.03359} 48.857%{scale:9.41828} 50.571%{scale:11.194} 52.286%{scale:13.525}
  54%{scale:16.667} 100%{scale:16.667}}
/* end of the round window's steps */

/* the reveal, round: a circle on the page beneath the room's name (or above it), opening to the whole screen as the straight window does;
   the name's page lifted away as it opens, never over the picture; where nothing moves, the name on its page above the picture, as now */
.mv-reveal .stage.round{background:var(--ground)}
.mv-reveal .round.named.above{--cy:60cqh} .mv-reveal .round.named.below{--cy:40cqh}
.mv-reveal .round .page{display:none}
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .mv-reveal .round .page{display:block; position:absolute; z-index:3; left:0; right:0; animation:page-up linear both}
  .mv-reveal .round .win{animation:iris-open-win linear both} .mv-reveal .round .win img{animation:iris-open-pic linear both}
  .mv-reveal .round .win, .mv-reveal .round .win img, .mv-reveal .round .page{animation-timeline:--reveal; animation-range:contain 0% contain 75%}
  .mv-reveal .round .page.top{top:0; height:calc(var(--cy) - var(--d) * .12)}
  .mv-reveal .round .page.bottom{bottom:0; height:calc(100cqh - var(--cy) - var(--d) * .12); animation-name:page-down}
  .mv-reveal .round .page .tp{display:grid}
  .mv-reveal .round .page.top .tp{bottom:4.5svh} .mv-reveal .round .page.bottom .tp{top:4.5svh}
  /* the name's page rides the circle's edge as the straight window's panel rides its own: the window's radius grows by .38 of --d over
     the range (iris_frames.py: from .24 to 1 of it, evenly), and the page by as much, so the name is never over the picture */
  @keyframes page-up{to{translate:0 calc(var(--d) * -.38)}}
  @keyframes page-down{to{translate:0 calc(var(--d) * .38)}}
}}

/* the frontispiece — a picture facing the room's title page, as a book opens: the plate on the left, the page on the right; on a phone,
   the plate, then the page */
.mv-frontis{min-height:100svh; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4vw; padding:7svh var(--pad)}
.mv-frontis .plate{margin:0; display:grid; justify-items:end}
.mv-frontis .plate img{display:block; max-width:100%; max-height:84svh; width:auto; height:auto; box-shadow:0 18px 40px -26px rgba(0,0,0,.5)}
.mv-frontis .tp{max-width:30rem; justify-self:center}
.mv-frontis .tp-name{font:400 clamp(2.4rem,4.6vw,4.4rem)/1.04 var(--head, var(--display)); letter-spacing:-.005em}
.mv-frontis .tp-lines{margin-top:1.3em; font-variant-caps:all-small-caps; letter-spacing:.14em; font-size:1.1rem}
@media (max-width:700px){
  .mv-frontis{grid-template-columns:1fr; gap:7svh; padding:4svh var(--pad) 10svh}
  .mv-frontis .plate{justify-items:center} .mv-frontis .plate img{max-height:62svh}
}

/* the title wall — words first, as a gallery's wall says what is inside: the room's name large, a line beneath it; the picture rises in
   as the reader scrolls to it */
.mv-wall .wall{min-height:100svh; display:grid; place-items:center; padding:12svh var(--pad)}
.mv-wall .tp{max-width:min(92vw,60rem)}
.mv-wall .tp-name{font-size:clamp(3rem,9vw,8.4rem); line-height:.98}
.mv-wall .tp-lines{margin-top:1.5em; max-width:34ch; font-size:clamp(1.05rem,1.5vw,1.3rem)}
.mv-wall .tp-imprint{margin-top:3.4em; letter-spacing:.16em}
/* a long name (over forty letters: a poem's title or first line, as the try-on names a room) set smaller on every title page, so the wall,
   the reveal's page and the frontispiece hold it in three or four lines, never a screen of it (moves.py → title_page) */
.tp-name.long{font-size:clamp(2.2rem,4.6vw,4.6rem)}
.mv-wall .tp-name.long{font-size:clamp(2.4rem,5.4vw,5.2rem); line-height:1.02}
.mv-frontis .tp-name.long{font-size:clamp(2rem,3.4vw,3.2rem)}
.mv-reveal .still .tp-name.long{font-size:clamp(2.2rem,4.2vw,3.8rem)}
.mv-wall .arrive{height:100svh; overflow:hidden}
.mv-wall .arrive img{display:block; width:100%; height:100%; object-fit:cover}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
  .mv-wall .arrive img{animation:wall-rise linear both; animation-timeline:view(); animation-range:entry 0% cover 45%}
  @keyframes wall-rise{from{opacity:0; transform:scale(.9)} to{opacity:1; transform:none}}
}}

/* the scale jump — huge, then tiny: one picture, twice */
.mv-jump{display:grid; justify-items:center; gap:12svh; padding:clamp(40px,8vh,80px) var(--pad) 26svh}
.mv-jump .big{width:min(100%,1080px)}
.mv-jump .small{width:clamp(64px,7vw,96px)}
.mv-jump .words{max-width:30rem; font:400 clamp(1.05rem,1.5vw,1.3rem)/1.5 var(--display)}

/* the detail — a picture again, close; the crop point is dragged by hand */
.mv-detail{height:86svh; overflow:hidden}
.mv-detail .close{width:100%; height:100%; object-fit:cover; scale:2.7; transform-origin:var(--fx) var(--fy); object-position:var(--fx) var(--fy)}
.mv-detail .drag-hint{display:none}
@media (max-width:700px){ .mv-detail{height:70svh} }

/* the island — one small picture alone in a wide field */
.mv-island{min-height:110svh; display:grid; align-items:center; padding:14svh var(--pad)}
.mv-island figure{margin-left:58%; width:clamp(150px,22vw,320px)}
.mv-island .line{margin:16px 0 0; font:italic 400 1.02rem/1.4 var(--display); color:var(--soft)}
@media (max-width:700px){ .mv-island figure{margin-left:40%; width:52%} }

/* the vignette — the edges fade into the page, as in an engraved book */
.mv-vignette{display:grid; justify-items:center; gap:clamp(16px,3vh,32px); padding:clamp(60px,10vh,120px) var(--pad)}
.mv-vignette img{width:min(100%,900px); -webkit-mask-image:radial-gradient(ellipse closest-side, #000 72%, transparent 100%);
  mask-image:radial-gradient(ellipse closest-side, #000 72%, transparent 100%)}
.mv-vignette .words{max-width:30rem; text-align:center; font:400 clamp(1.05rem,1.45vw,1.25rem)/1.55 var(--display)}
.mv-vignette .poem{display:inline-grid; text-align:left}   /* centered under the picture, its lines flush left and hung, as the page sets a poem */

/* the arch — the picture through an arched window, words beside */
.mv-arch{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,2.4vw,40px); align-items:center;
  max-width:1240px; margin:0 auto; padding:clamp(60px,10vh,120px) var(--pad)}
.mv-arch .window{grid-column:1 / 6; aspect-ratio:3/4; overflow:hidden; border-radius:50% 50% 0 0 / 37.5% 37.5% 0 0}
.mv-arch .window img{width:100%; height:100%; object-fit:cover}
.mv-arch .words{grid-column:6 / 13; font:400 clamp(1.05rem,1.45vw,1.25rem)/1.55 var(--display)}
.mv-arch:has(.words > [data-empty]) .window{grid-column:4 / 10}
@media (max-width:700px){ .mv-arch .window, .mv-arch:has(.words > [data-empty]) .window{grid-column:2 / 12}
  .mv-arch .words{grid-column:1 / 13; margin-top:28px} }

/* the panorama — a long band; the picture slides sideways as you scroll */
.mv-panorama{padding:clamp(60px,10vh,120px) 0; view-timeline-name:--pan}
.mv-panorama .band{height:clamp(180px,30vw,520px); overflow:hidden}
.mv-panorama .band img{width:130%; max-width:none; height:100%; object-fit:cover; translate:-11.5% 0}
.mv-panorama .line{margin:16px 0 0; padding:0 var(--pad); text-align:right; font:italic 400 clamp(1.02rem,1.4vw,1.2rem)/1.4 var(--display); color:var(--soft)}
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .mv-panorama .band img{animation:pan linear both; animation-timeline:--pan; animation-range:cover 10% cover 90%}
  @keyframes pan{from{translate:0 0} to{translate:-23.08% 0}}
}}
@media (max-width:700px){ .mv-panorama .band{height:52vw} .mv-panorama .band img{width:180%; translate:-22.2% 0}
  @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){ @keyframes pan{from{translate:0 0} to{translate:-44.4% 0}} }} }

/* ── two pictures ────────────────────────────────────────────────────────────────────────────────── */
/* the pair — two read as one */
.mv-pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,3vw,48px); max-width:1180px; margin:0 auto;
  padding:clamp(60px,10vh,120px) var(--pad)}
.mv-pair .words{grid-column:1 / -1; max-width:42rem; width:100%; margin:clamp(26px,5vh,52px) auto 0; font:400 clamp(1.05rem,1.5vw,1.3rem)/1.55 var(--display)}
@media (max-width:700px){ .mv-pair{gap:10px; padding-inline:12px} }

/* the offset pair — unequal, tops not aligned; the words sit in the room the offset leaves */
.mv-offset{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(14px,2vw,28px);
  padding:clamp(40px,8vh,96px) var(--pad) clamp(60px,12vh,140px); max-width:1400px; margin:0 auto}
.mv-offset .a{grid-column:1 / 8}
.mv-offset .b{grid-column:9 / 13; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding-top:4px}
.mv-offset .b figure{margin-top:auto; transform:translateY(22%)}
.mv-offset .note{font:400 1.15rem/1.45 var(--display); max-width:26ch}
@media (max-width:700px){ .mv-offset{gap:0 12px; padding-inline:16px}
  .mv-offset .a{grid-column:1 / 12; grid-row:1} .mv-offset .b{display:contents}
  .mv-offset .b figure{grid-column:4 / 13; grid-row:2; transform:none; margin-top:36px}
  .mv-offset .note{grid-column:1 / 13; grid-row:3; margin-top:22px; max-width:none; font-size:1.05rem} }

/* the overlap — one picture laid across another */
.mv-overlap{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); max-width:1240px; margin:0 auto; padding:clamp(60px,10vh,120px) var(--pad)}
.mv-overlap .a{grid-column:1 / 8; grid-row:1}
.mv-overlap .b{grid-column:6 / 12; grid-row:1; margin-top:22%; outline:clamp(6px,.8vw,12px) solid var(--ground); position:relative}
.mv-overlap .words{grid-column:1 / 7; grid-row:2; margin-top:clamp(24px,4vh,44px); font:400 clamp(1.05rem,1.5vw,1.3rem)/1.5 var(--display)}
@media (max-width:700px){ .mv-overlap .a{grid-column:1 / 11} .mv-overlap .b{grid-column:4 / 13; margin-top:34%} .mv-overlap .words{grid-column:1 / 13} }

/* the inset — a small picture set into the corner of a large one */
.mv-inset{max-width:1240px; margin:0 auto; padding:clamp(60px,10vh,120px) var(--pad)}
.mv-inset .frame{position:relative; margin-bottom:clamp(48px,9vw,130px)}
.mv-inset .a{width:100%}
.mv-inset .b{position:absolute; right:5%; bottom:-12%; width:24%; outline:clamp(6px,.8vw,12px) solid var(--ground);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.mv-inset .words{max-width:min(30rem,62%); font:400 clamp(1.05rem,1.5vw,1.3rem)/1.5 var(--display)}
@media (max-width:700px){ .mv-inset .b{width:40%; right:4%; bottom:-16%} .mv-inset .words{max-width:none; margin-top:12vw} }

/* the verso and the gatefold (his words, 2026-10-14: "the gatefold"; "use the tooling we have as a model in scrapbook and heroes to flip to the alternate image" · "the
   verso"): one picture turned over to a second, as heroes turns a print: about its own middle, as a hand would, in 560 ms; a cross-fade
   under reduced motion. Both faces share one place, each whole in it. No script: the leaf stays turned while *Turn over* holds the
   focus (moves.py → turned), so it turns on a loupe site too. A book's back turns the same way (the books, below). */
:is(.mv-verso, .mv-gatefold){max-width:1180px; margin:0 auto; padding:clamp(60px,10vh,120px) var(--pad); display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); gap:clamp(28px,5vw,80px); align-items:center}
:is(.mv-verso, .mv-gatefold) figure{margin:0}
:is(.mv-verso, .mv-gatefold) .words{max-width:30rem; font:400 clamp(1.05rem,1.5vw,1.3rem)/1.5 var(--display)}
@media (max-width:700px){ :is(.mv-verso, .mv-gatefold){grid-template-columns:minmax(0,1fr)} :is(.mv-verso, .mv-gatefold) figure{width:86%; justify-self:center} }
:is(.mv-verso, .mv-gatefold, .mv-books) .leaf{position:relative; display:block}
:is(.mv-verso, .mv-gatefold, .mv-books) .faces{display:grid; transform-style:preserve-3d; transform:perspective(2400px) rotateY(0deg); transition:transform 560ms cubic-bezier(.45,.05,.3,1)}
:is(.mv-verso, .mv-gatefold, .mv-books) .face{grid-area:1/1; width:100%; height:100%; object-fit:contain; backface-visibility:hidden; -webkit-backface-visibility:hidden}
:is(.mv-verso, .mv-gatefold, .mv-books) .face.back{transform:rotateY(180deg)}
:is(.mv-verso, .mv-gatefold, .mv-books) .leaf:not(.opens):has(.turn-over:focus) .faces{transform:perspective(2400px) rotateY(180deg)}
:is(.mv-verso, .mv-gatefold, .mv-books) :is(.turn-over, .turn-back){position:absolute; left:10px; bottom:10px; padding:7px 10px 6px; border-radius:2px; cursor:pointer;
  background:color-mix(in srgb,var(--ground) 92%,transparent); color:var(--ink); font:500 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  transition:opacity 160ms linear; -webkit-tap-highlight-color:transparent}
:is(.mv-verso, .mv-gatefold, .mv-books) :is(.turn-over, .turn-back):focus:not(:focus-visible){outline:none}
:is(.mv-verso, .mv-gatefold, .mv-books) .turn-back, :is(.mv-verso, .mv-gatefold, .mv-books) .leaf:has(.turn-over:focus) .turn-over{opacity:0; pointer-events:none}
:is(.mv-verso, .mv-gatefold, .mv-books) .leaf:has(.turn-over:focus) .turn-back{opacity:1; pointer-events:auto}
/* a book's title page beneath its cover, the cover opened at its spine onto it (his pick, 2026-10-14: "Two kinds for a book"):
   it swings open about its left edge, as a book's does, and is gone once it stands edge-on (moves.py → opened) */
:is(.mv-verso, .mv-gatefold, .mv-books) .leaf.opens .faces{transform:none; transform-style:flat}   /* flat: the cover drawn over the page, never through it */
:is(.mv-verso, .mv-gatefold, .mv-books) .leaf.opens .face.lid{transform-origin:0 50%; transform:perspective(1600px) rotateY(0deg); transition:transform 620ms cubic-bezier(.45,.05,.3,1), opacity 0s}
:is(.mv-verso, .mv-gatefold, .mv-books) .leaf.opens:has(.turn-over:focus) .face.lid{transform:perspective(1600px) rotateY(-88deg); opacity:0; transition:transform 620ms cubic-bezier(.45,.05,.3,1), opacity 0s linear 600ms}
@media (prefers-reduced-motion:reduce){
  :is(.mv-verso, .mv-gatefold, .mv-books) .faces, :is(.mv-verso, .mv-gatefold, .mv-books) .leaf:has(.turn-over:focus) .faces{transition:none; transform:none}
  :is(.mv-verso, .mv-gatefold, .mv-books) .face{backface-visibility:visible; -webkit-backface-visibility:visible; transition:opacity 200ms linear}
  :is(.mv-verso, .mv-gatefold, .mv-books) .face.back{transform:none; opacity:0}
  :is(.mv-verso, .mv-gatefold, .mv-books) .leaf:has(.turn-over:focus) .face.back{opacity:1}
  :is(.mv-verso, .mv-gatefold, .mv-books) .leaf:not(.opens):has(.turn-over:focus) .face:not(.back){opacity:0}
  :is(.mv-verso, .mv-gatefold, .mv-books) .leaf.opens .face.lid, :is(.mv-verso, .mv-gatefold, .mv-books) .leaf.opens:has(.turn-over:focus) .face.lid{transform:none; transition:opacity 200ms linear}
  :is(.mv-verso, .mv-gatefold, .mv-books) .leaf.opens:has(.turn-over:focus) .face.lid{opacity:0}
}
/* while editing, both faces lie side by side, flat, so either can be clicked to change */
body.editing :is(.mv-verso, .mv-gatefold, .mv-books) .faces{transform:none; grid-template-columns:1fr 1fr; gap:8px}
body.editing :is(.mv-verso, .mv-gatefold, .mv-books) .face{grid-area:auto; backface-visibility:visible; -webkit-backface-visibility:visible}
body.editing :is(.mv-verso, .mv-gatefold, .mv-books) .face.back{transform:none}
body.editing :is(.mv-verso, .mv-gatefold, .mv-books) .leaf.opens .face.lid{order:-1; transform:none; opacity:1}
body.editing :is(.mv-verso, .mv-gatefold, .mv-books) :is(.turn-over, .turn-back){display:none}

/* ── many pictures ───────────────────────────────────────────────────────────────────────────────── */
/* the scatter — prints dealt on a table; pictures may lean, words never do */
.mv-scatter{padding:clamp(56px,10vh,110px) var(--pad)}
.mv-scatter .table{position:relative; max-width:1280px; margin:0 auto; aspect-ratio:16/9}
.mv-scatter .print{position:absolute; left:var(--x); top:var(--y); width:var(--w); rotate:var(--r); background:#f7f4ee; padding:clamp(5px,.7vw,10px);
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 10px 24px -8px rgba(0,0,0,.35)}
.mv-scatter .words{position:relative; z-index:2; width:min(38rem,44%); margin:var(--lift,-14%) 0 0 5%; font:400 clamp(1rem,1.35vw,1.2rem)/1.55 var(--display)}   /* left of the prints at 50%; drawn up only as far as the prints allow (moves.py → d_scatter) */
@media (max-width:700px){ .mv-scatter .table{aspect-ratio:3/4} .mv-scatter .print{left:var(--px); top:var(--py); width:var(--pw); rotate:var(--pr)}
  .mv-scatter .words{width:auto; margin:calc(26px + var(--drop,0%)) 0 0} }   /* below the lowest print, however tall (moves.py → d_scatter) */

/* the salon hang — many sizes at many heights */
.mv-salon{display:flex; flex-direction:column; align-items:center; gap:1.8vw; padding:clamp(60px,10vh,120px) var(--pad)}
.mv-salon .row{display:flex; justify-content:center; align-items:center; gap:1.8vw}
.mv-salon img{height:var(--h); width:auto}
@media (max-width:700px){ .mv-salon{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px}
  .mv-salon .row{display:contents} .mv-salon img{height:var(--ph)} .mv-salon .desk{display:none} }

/* the contact sheet — on film's own black, frame numbers on the rebate */
.mv-sheet{background:#111210; color:#d4a24c; padding:clamp(48px,8vh,88px) var(--pad)}
.mv-sheet .label{color:#d4a24c}
.mv-sheet .strip{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; max-width:1400px; margin:0 auto; padding:22px 10px; background:
  repeating-linear-gradient(90deg, transparent 0 14px, #2a2a26 14px 24px) top / 100% 7px no-repeat,
  repeating-linear-gradient(90deg, transparent 0 14px, #2a2a26 14px 24px) bottom / 100% 7px no-repeat}
.mv-sheet .frame img{width:100%; aspect-ratio:4/3; object-fit:cover}
.mv-sheet .edge{display:block; font:500 10px/1 var(--mono); letter-spacing:.08em; margin:0 0 6px 2px}
.mv-sheet .edge i{font-style:normal; margin:0 6px; opacity:.7}
@media (max-width:700px){ .mv-sheet .strip{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 8px} }

/* the plate: a book of plates, as the first photographic books set out a sequence (Muybridge, 1887); on the page
   itself, inside a pressed plate mark, each frame in a hairline and numbered beneath in old-style figures */
.mv-plate{display:grid; justify-items:center; padding:clamp(64px,11vh,130px) var(--pad)}
.mv-plate .platemark{width:min(100%,1180px); padding:clamp(22px,3.2vw,48px) clamp(18px,3vw,44px) clamp(16px,2.4vw,34px);
  border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
  box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--ink) 4%,transparent), inset 1px 1px 4px rgba(0,0,0,.07)}
.mv-plate .frames{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px) clamp(10px,1.3vw,20px)}
.mv-plate figure{margin:0}
.mv-plate img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; outline:1px solid color-mix(in srgb,var(--ink) 60%,transparent); outline-offset:-1px}
.mv-plate figcaption{margin-top:8px; text-align:center; font:400 .98rem/1 var(--display); font-variant-numeric:oldstyle-nums; color:var(--soft)}
@media (max-width:700px){ .mv-plate .frames{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px} }

/* the ovals: an album leaf of the 1880s, each picture in an oval window ruled round like an engraved mount */
.mv-ovals{display:grid; justify-items:center; padding:clamp(64px,11vh,130px) var(--pad)}
.mv-ovals .leaf{width:min(100%,1180px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,2.6vw,38px) clamp(14px,2.2vw,30px)}
.mv-ovals .oval{margin:0; padding:clamp(4px,.45vw,7px); border:1px solid color-mix(in srgb,var(--ink) 45%,transparent); border-radius:50%;
  outline:1px solid color-mix(in srgb,var(--ink) 20%,transparent); outline-offset:3px}
.mv-ovals img{display:block; width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:50%}
@media (max-width:700px){ .mv-ovals .leaf{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px} }

/* the filmstrip — a sideways aside */
.mv-film{padding:clamp(56px,9vh,100px) 0}
.mv-film .hint{padding:0 var(--pad) 12px; color:var(--soft)}
.mv-film .strip{display:flex; gap:clamp(10px,1.4vw,20px); overflow-x:auto; scroll-snap-type:x proximity; padding:0 var(--pad) 14px; scrollbar-width:thin}
.mv-film img{height:62svh; width:auto; max-width:none; scroll-snap-align:center; flex:none}
@media (max-width:700px){ .mv-film img{height:52svh} }

/* the flipbook — the same place, turned over as you scroll */
.mv-flip{padding:clamp(56px,9vh,100px) var(--pad)}
.mv-flip .frame{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:1100px; margin:0 auto}
.mv-flip img{width:100%; aspect-ratio:1; object-fit:cover}
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .mv-flip{height:290svh; padding:0; view-timeline-name:--flip}
  .mv-flip .frame{position:sticky; top:0; height:100svh; display:grid; place-items:center; grid-template-columns:1fr; max-width:none}
  .mv-flip img{grid-area:1/1; width:min(78vh,86vw); animation:fade linear both; animation-timeline:--flip}
  .mv-flip img:nth-child(2){animation-range:contain 28% contain 40%}
  .mv-flip img:nth-child(3){animation-range:contain 60% contain 72%}
  .mv-flip img:nth-child(1){animation:none}
  @keyframes fade{from{opacity:0} to{opacity:1}}
}}

/* the triptych — three tall panels, read as one */
.mv-triptych{padding:clamp(60px,10vh,120px) var(--pad)}
.mv-triptych .panels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(5px,.9vw,14px); max-width:1100px; margin:0 auto}
.mv-triptych img{width:100%; aspect-ratio:2/3; object-fit:cover}
.mv-triptych .line{max-width:1100px; margin:20px auto 0; text-align:center; font:italic 400 clamp(1.05rem,1.5vw,1.3rem)/1.4 var(--display)}

/* the stair — stepping down the page; the words take the room the steps leave */
.mv-stair{padding:clamp(60px,10vh,120px) var(--pad)}
/* the flight holds the pictures at its own 16 : 10, whatever the words do; the steps at least as tall, taller when the words run on: they
   sit at its foot, never higher than just under the second step (38% of the width: 61% of the flight), left of the third (2026-10-15) */
.mv-stair .steps{position:relative; max-width:1240px; margin:0 auto; aspect-ratio:16/10; display:flex; flex-direction:column; justify-content:flex-end}
.mv-stair .flight{position:absolute; inset:0 0 auto 0; aspect-ratio:16/10}
.mv-stair img{position:absolute; left:var(--x); top:var(--y); width:24%; aspect-ratio:1; object-fit:cover}
.mv-stair .words{position:relative; margin:38% 0 0 2%; width:min(24rem,46%); font:400 clamp(1rem,1.35vw,1.2rem)/1.55 var(--display)}
@media (max-width:700px){ .mv-stair .steps{display:block; aspect-ratio:auto} .mv-stair .flight{aspect-ratio:4/5} .mv-stair img{left:var(--px); top:var(--py); width:44%}
  .mv-stair .words{position:static; margin:0; width:auto; padding-top:calc(125% + 20px)} }

/* the constellation — small pictures far apart on an open field */
.mv-stars{padding:clamp(60px,10vh,120px) var(--pad)}
.mv-stars .field{position:relative; max-width:1320px; margin:0 auto; aspect-ratio:16/10}
.mv-stars img{position:absolute; left:var(--x); top:var(--y); width:var(--w)}
.mv-stars .line{position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(22rem,70%); margin:0; text-align:center;
  font:italic 400 clamp(1.05rem,1.5vw,1.3rem)/1.45 var(--display)}
@media (max-width:700px){ .mv-stars .field{aspect-ratio:3/4} .mv-stars img{left:var(--px); top:var(--py); width:var(--pw)}
  .mv-stars .line{top:50%} }

/* the spectrum — a band of pictures in the order of their colors */
.mv-spectrum{padding:clamp(60px,10vh,120px) var(--pad)}
.mv-spectrum .band{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; max-width:1320px; margin:0 auto}
.mv-spectrum img{width:100%; aspect-ratio:9/16; object-fit:cover}
@media (max-width:700px){ .mv-spectrum .band{grid-template-columns:repeat(4,minmax(0,1fr))} .mv-spectrum img{aspect-ratio:3/4} }

/* the route — a route from Strava or AllTrails on its service's own map, in a frame stanza draws (no script of theirs runs
   in the page), its name beneath in the person's words: an AllTrails map across the column, a Strava card at its own width
   (554, as Strava sets it) and height (650, its starting height; no script fits it) */
.mv-route{padding:clamp(48px,8vh,96px) var(--pad)}
.mv-route .route{max-width:900px; margin:0 auto}
.mv-route iframe{display:block; width:100%; height:400px; border:0; background:color-mix(in srgb,var(--ink) 6%,transparent)}
.mv-route iframe.strava{width:min(100%,560px); height:650px; margin:0 auto}
.mv-route figcaption{margin:16px auto 0; max-width:36rem; text-align:center; font-style:italic; color:var(--soft)}
.mv-route figcaption:empty{margin:0}
.mv-route .route-empty{display:none}

/* the row — one to four pictures whole, at one height, never cropped (loupe's Story galleries: "on its own · a row of two ·
   three · four"): each place as wide as its picture's shape (--w, its width over its height), the row as wide as the page
   allows and no taller than most of the screen (its --w, their sum). On a phone a row of three or four stands one above
   another, each whole */
.mv-row{padding:clamp(48px,8vh,96px) var(--pad)}
.mv-row .places{display:flex; align-items:flex-start; gap:clamp(8px,1.2vw,18px); width:min(100%, 1320px, calc(84svh * var(--w))); margin:0 auto}
.mv-row .place{position:relative; flex:var(--w) 1 0%; min-width:0; margin:0}
.mv-row .place img{width:100%; height:auto}
@media (max-width:700px){ .mv-row .places{width:min(100%, calc(80svh * var(--w)))}
  .mv-row .places.n-3, .mv-row .places.n-4{flex-direction:column; align-items:center; width:100%}
  .mv-row .places.n-3 .place, .mv-row .places.n-4 .place{flex:none; width:min(100%, calc(76svh * var(--w)))} }

/* the grid — any number of pictures in square places, three across, no place left empty (his word in loupe: "fill every
   gap"); a place one across, two, two by two or the whole row, and what its frame shows the person's (--x, --y). As
   "6,684 Feet" drew it (sketches/2026-10-10-mt-mitchell): edge to edge, a 3px gap; two across on a phone */
.mv-grid{padding:clamp(48px,8vh,96px) 0}   /* edge to edge, as the sketch has it */
.mv-grid .grid-box{container-type:inline-size}
.mv-grid .places{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; grid-auto-rows:calc((100cqw - 6px) / 3); grid-auto-flow:row dense}
.mv-grid .place{position:relative; margin:0; overflow:hidden; background:color-mix(in srgb,var(--ink) 7%,transparent)}
.mv-grid .place img{width:100%; height:100%; object-fit:cover; object-position:var(--x,50%) var(--y,50%)}
.mv-grid .s-two{grid-column:span 2}
.mv-grid .s-big{grid-column:span 2; grid-row:span 2}
.mv-grid .s-row{grid-column:1 / -1}
.mv-grid .fill-2{grid-column:span 2}   /* the picture that closes a row's empty end (moves.py → fills) */
.mv-grid .fill-3{grid-column:1 / -1}
/* a stack: one place holding a group (his word, 2026-10-10), its top picture shown with a small mark of three cards and a
   count, as "6,684 Feet" drew it; the others wait unseen in its place for the enlargement (build.py → behind) */
.mv-grid .place img[data-behind]{display:none}
.mv-grid .stack-mark{position:absolute; z-index:1; top:9px; right:9px; display:inline-flex; align-items:center; gap:5px; padding:4px 8px 4px 6px;
  border-radius:999px; background:rgba(18,20,22,.62); color:#fff; font:500 11px/1 var(--mono); letter-spacing:.04em; pointer-events:none;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.mv-grid .stack-mark svg{width:13px; height:13px}
/* a film (his word, 2026-10-10: "sized like the pictures"): its still in a place like a picture's, its title and date over
   it and the mark to play, as "6,684 Feet" drew it; enlarged, it plays (viewer.js) */
.mv-grid .place.film .film-words{position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
  padding:clamp(10px,1.8vw,22px) clamp(12px,2.2vw,28px); background:linear-gradient(to top, rgba(14,18,22,.72), rgba(14,18,22,0)); color:#fff; pointer-events:none}
.mv-grid .film-words p{margin:0; min-width:0}
.mv-grid .film-words .t{display:block; font:italic 400 clamp(1.05rem,1.9vw,1.6rem)/1.15 var(--display)}
.mv-grid .film-words .d{display:block; margin-top:6px; font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; opacity:.82}
.mv-grid .film-words [data-film-words]:empty{display:none}
.mv-grid .film-words .play{flex:none; width:clamp(30px,3.2vw,44px); height:auto; color:#fff}
.mv-grid .place.film.s-one .film-words .t{font-size:1rem}
@media (max-width:700px){ .mv-grid .places{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:calc((100cqw - 3px) / 2)}
  .mv-grid .fill-2, .mv-grid .fill-3{grid-column:auto}
  .mv-grid .s-two, .mv-grid .pfill-2{grid-column:1 / -1} }

/* ── words with pictures ─────────────────────────────────────────────────────────────────────────── */
/* the line alone */
.mv-alone{min-height:85svh; display:grid; align-items:center; padding:0 clamp(20px,8vw,140px)}
.mv-alone .poem{max-width:60ch; font:400 clamp(1.3rem,2.2vw,1.9rem)/1.35 var(--display)}   /* wider, toward the page's own measure (his word, 2026-10-12: "keep the wider measures") */
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .mv-alone .poem{animation:rise linear both; animation-timeline:view(); animation-range:entry 10% cover 45%}
  @keyframes rise{from{opacity:.08; translate:0 4vh} to{opacity:1; translate:0 0}}
}}
@media (max-width:700px){ .mv-alone .poem{max-width:none} }

/* the drop initial — a red versal, the first line in small capitals */
.mv-initial{padding:clamp(80px,16vh,180px) var(--pad); display:grid; justify-items:center}
.mv-initial .poem{max-width:48ch; font:400 clamp(1.15rem,1.85vw,1.5rem)/1.5 var(--display)}
/* the large red letter, three lines deep: its top level with the first line's small capitals, its foot on the third
   line's baseline (his note, 2026-10-10: "is the placement of the A here intentional?" — it sat between lines). Where
   the browser sets a drop letter itself (Chrome) it does; elsewhere (Safari, Firefox) a float measured to the same marks.
   Where the browser sets it, the letter is a capital, never a small capital: taking the first line's small capitals, it
   sank a line in Chrome (his note, 2026-10-11, of the essay's versal: "what's wrong with this dropcap?"; the A here had
   sunk the same way). The float is measured to the small capital it has always been.
   The measure is wide enough that the first line stands whole beside it at his window */
.mv-initial :is(.poem-title + .verse, .poem-note + .verse, .poem > .verse:first-child) span:nth-child(-n+3){padding-left:0; text-indent:var(--hang) hanging}   /* beside the letter, a turnover still hangs, from the letter */
.mv-initial :is(.poem-title + .verse, .poem-note + .verse, .poem > .verse:first-child) span:first-child{text-indent:0}   /* the letter's own line: Safari's float would take the indent */
.mv-initial :is(.poem-title + .verse, .poem-note + .verse, .poem > .verse:first-child) span:first-child::first-letter{float:left; font-size:6.4em; line-height:.72;
  padding:0 .07em 0 0; margin:-.075em 0 -.1em; color:var(--rubric)}
@supports (initial-letter: 3) {
  .mv-initial :is(.poem-title + .verse, .poem-note + .verse, .poem > .verse:first-child) span:first-child::first-letter{float:none; initial-letter:3; font-size:inherit;
    line-height:inherit; padding:0; margin:0 .1em 0 0; font-variant-caps:normal; letter-spacing:0}
}
.mv-initial :is(.poem-title + .verse, .poem-note + .verse, .poem > .verse:first-child) span:first-child::first-line{font-variant-caps:all-small-caps; letter-spacing:.07em; font-weight:500}

/* the marginal note — words beside the picture, carrying half of it */
.mv-margin{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(14px,2vw,32px); max-width:1320px; margin:0 auto; padding:clamp(60px,10vh,120px) var(--pad)}
.mv-margin figure{grid-column:1 / 10}
.mv-margin .note{grid-column:10 / 13; align-self:end; padding-top:14px; border-top:1px solid var(--soft); font:400 clamp(1.05rem,1.4vw,1.3rem)/1.45 var(--display)}   /* roman: a poem's own italics stand (his word, 2026-10-12) */
@media (max-width:700px){ .mv-margin figure{grid-column:1 / 13} .mv-margin .note{grid-column:4 / 13; margin-top:18px} }

/* the run-around — the words wrap the picture's outline */
.mv-around{max-width:68ch; margin:0 auto; padding:clamp(70px,12vh,140px) var(--pad)}
.mv-around{--line:calc(1.55 * clamp(1.1rem,1.6vw,1.35rem))}   /* one line of the poem, as the picture's drop is measured */
.mv-around img{float:left; width:36%; aspect-ratio:1; object-fit:cover; clip-path:circle(50%); shape-outside:circle(50%) border-box; shape-margin:1rem; margin:calc(3.1 * var(--line)) .9rem .6rem 0}   /* border-box: the round is the picture's own, so the lines above its top margin run the full measure */
  /* 2026-10-20, his ask on /iii ("follow it more elegantly"): the picture sits a few lines down, so the title and the first line run the
     full measure, the next lines curve in round the picture's shoulder, and the poem closes beneath it; a third of the width, so Whitman's
     long lines turn over once; the words closer to the round */
.mv-around .poem{display:block; font:400 clamp(1.1rem,1.6vw,1.35rem)/1.55 var(--display)}   /* a block, so its lines wrap around the picture; its title centers beside it */
.mv-around .verse > span{padding-left:0; --hang-cols:3; text-indent:var(--hang) hanging}   /* beside the float, lines start flush and a turnover still hangs, from the float: three spaces here, so the hang doesn't fight the curve */
.mv-around .wrap::after{content:""; display:block; clear:both}
@media (max-width:700px){ .mv-around img{width:48%; shape-margin:.8rem; margin-top:calc(1.6 * var(--line))} }

/* the overprint — the words inside the picture; a shade from the left keeps them legible without a box */
.mv-over{height:100svh; min-height:440px; overflow:hidden}
.mv-over .fill{width:100%; height:100%; object-fit:cover}
.mv-over::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,6,4,.62) 0%, rgba(10,6,4,.38) 38%, rgba(10,6,4,0) 68%)}
.mv-over .poem{position:absolute; z-index:2; left:var(--pad); top:50%; translate:0 -50%; max-width:min(64ch, 74%); color:var(--over-ink);
  font:400 clamp(1.1rem,1.9vw,1.65rem)/1.45 var(--display); text-shadow:0 1px 14px rgba(0,0,0,.35)}
.mv-over .poem-title{color:var(--over-ink); opacity:.85}
@media (max-width:700px){ .mv-over .poem{max-width:none; right:var(--pad); top:auto; bottom:9svh; translate:none}
  .mv-over::before{background:linear-gradient(0deg, rgba(10,6,4,.7) 0%, rgba(10,6,4,.4) 55%, rgba(10,6,4,0) 85%)} }

/* the pin-and-pass — the picture holds still while lines pass it */
.mv-pin{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 clamp(16px,2vw,32px); padding:0 var(--pad)}
.mv-pin .held{grid-column:1 / 8; position:sticky; top:0; height:100svh; display:grid; align-items:center; align-self:start}
.mv-pin .held img{width:100%; max-height:82svh; object-fit:contain}
.mv-pin .passes{grid-column:9 / 13; display:block}
.mv-pin .pass{min-height:90svh; display:grid; align-items:center}
.mv-pin .pass:first-child{min-height:100svh}
.mv-pin .pass .poem{font:400 clamp(1.35rem,2vw,1.85rem)/1.35 var(--display); max-width:22ch}
@media (max-width:700px){ .mv-pin{display:block; padding:0}
  .mv-pin .held{position:sticky; top:0; height:auto; z-index:2; background:var(--ground); padding:44px 0 10px}
  .mv-pin .held img{max-height:none} .mv-pin .passes{padding:0 22px}
  .mv-pin .pass, .mv-pin .pass:first-child{min-height:62svh; align-items:start; padding-top:18svh} }

/* the fracture — a picture breaks the poem */
.mv-fracture{max-width:1100px; margin:0 auto; padding:clamp(70px,12vh,140px) var(--pad)}
.mv-fracture .poem{font:400 clamp(1.35rem,2.4vw,2.15rem)/1.3 var(--display)}
.mv-fracture img{width:clamp(180px,30%,340px); margin:.7em auto .7em 18%}
.mv-fracture .after{padding-left:30%}
@media (max-width:700px){ .mv-fracture img{width:56%; margin-left:14%} .mv-fracture .after{padding-left:8%} }

/* the spread — a book lying open: words on the left page, the picture on the right, a gutter between */
.mv-spread{display:grid; grid-template-columns:1.8fr 1px 1fr; align-items:center; max-width:1400px; min-height:88svh; margin:0 auto; padding:clamp(60px,10vh,110px) var(--pad)}
.mv-spread .page{padding:0 clamp(24px,4vw,64px)}
.mv-spread .gutter{align-self:stretch; background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--ink) 24%,transparent) 14%, color-mix(in srgb,var(--ink) 24%,transparent) 86%, transparent)}
.mv-spread .left .poem{max-width:46rem; margin-left:auto; font:400 clamp(1.02rem,1.4vw,1.22rem)/1.62 var(--display)}
.mv-spread .right img{max-height:72svh; width:auto; margin:0 auto}
@media (max-width:700px){ .mv-spread{grid-template-columns:1fr; min-height:0; gap:26px}
  .mv-spread .right{order:-1; padding:0} .mv-spread .gutter{height:1px; align-self:auto; background:color-mix(in srgb,var(--ink) 24%,transparent)}
  .mv-spread .left{padding:0} .mv-spread .left .poem{max-width:none} }

/* the gloss — a poem down the middle, small pictures in its margins */
.mv-gloss{display:grid; grid-template-columns:1fr minmax(0,32rem) 1fr; gap:clamp(20px,4vw,64px); max-width:1240px; margin:0 auto; padding:clamp(70px,12vh,140px) var(--pad)}
.mv-gloss .poem{grid-column:2; grid-row:1; font:400 clamp(1.05rem,1.5vw,1.25rem)/1.62 var(--display)}
.mv-gloss .side{grid-row:1; display:flex; flex-direction:column; gap:24px}
.mv-gloss .l{grid-column:1; justify-content:space-between; align-items:flex-end}
.mv-gloss .r{grid-column:3; justify-content:center; align-items:flex-start}
.mv-gloss .side img{width:min(200px,100%)}
@media (max-width:700px){ .mv-gloss{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
  .mv-gloss .poem{grid-column:1 / -1; margin-bottom:18px} .mv-gloss .side{display:contents}
  .mv-gloss .side img{grid-row:2; width:100%; aspect-ratio:1; object-fit:cover}
  .mv-gloss .l img:first-child{grid-column:1} .mv-gloss .r img{grid-column:2} .mv-gloss .l img:last-child{grid-column:3} }

/* the epigraph — a few lines, small and high, and where they come from */
.mv-epigraph{min-height:72svh; padding:22svh var(--pad) 10svh}
.mv-epigraph .poem{max-width:24rem; margin:0 8% 0 auto; font:400 clamp(1rem,1.3vw,1.15rem)/1.55 var(--display)}   /* roman: a poem's own italics stand */
.mv-epigraph .poem-title{margin:.9em 0 0; text-align:right; font:400 .95em/1.3 var(--display); font-style:normal;
  font-variant-caps:all-small-caps; text-transform:none; letter-spacing:.06em; color:var(--soft)}   /* its source, not a title */
.mv-epigraph .poem-title::before{content:"— "}
/* a link after its source (step 148): a page of the writer's home or of the web, beneath the source, in its small capitals */
.mv-epigraph .src-after{max-width:24rem; margin:.4em 8% 0 auto; text-align:right; font:400 clamp(1rem,1.3vw,1.15rem)/1.3 var(--display)}
.mv-epigraph .src-go{font-size:.95em; font-variant-caps:all-small-caps; letter-spacing:.06em; color:var(--ink); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.mv-epigraph .src-go:hover{text-decoration-color:var(--ink)}
@media (max-width:700px){ .mv-epigraph .poem, .mv-epigraph .src-after{margin-right:0} }

/* an essay — prose, held by a move that suits reading at length (moves.py → PROSE; his words, 2026-10-11: "if poems
   aren't a move then why is prose?"), as "6,684 Feet" set it first: its title as the line above, with a hairline
   running from it; paragraphs indented as a book sets them (none after the line above, a title or a passage set apart);
   the reading face for the prose, the display face in italic for what is set apart */
.essay{max-width:35rem; margin:0 auto; text-align:left; font:400 clamp(1.02rem,1.2vw,1.1rem)/1.8 var(--text)}
.essay p{margin:0; text-indent:1.6em}
.essay p.first, .essay p.apart{text-indent:0}
.essay .dateline{display:flex; align-items:center; gap:18px; margin:0 0 2.1em; text-indent:0; font:500 .66rem/1.3 var(--plain, var(--text));
  letter-spacing:.28em; text-transform:uppercase; color:var(--soft)}
.essay .dateline::after{content:""; flex:1; height:1px; background:color-mix(in srgb,var(--ink) 18%,transparent)}
.essay p.apart{margin:1.5em 0; padding-left:1.05em; border-left:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
  font:italic 400 1.38em/1.45 var(--display)}
/* a passage quoted from someone else (his word, 2026-10-13: "Block quotations, a second level of titles"): set in from both
   sides, a size down, in the reading face, as a book sets one; a quotation of several paragraphs reads as one block, each
   paragraph after the first indented; the words after it run on without an indent */
.essay p.quote{margin:1.2em 0; padding:0 1.6em; text-indent:0; font-size:.92em; line-height:1.62}
.essay p.quote + p.quote{margin-top:-1.2em; text-indent:1.6em}
/* a volta, the line the essay turns on (his word, 2026-10-16: "1 your pick", of a volta for writers, after "6,684 Feet" tried it): on a line of its own, larger, in the reading face’s medium
   weight; the paragraph after it keeps its indent */
.essay p.volta{margin:1.05em 0; text-indent:0; font-size:1.33em; line-height:1.3; font-weight:500}
.essay .essay-mark{margin:2.6em 0 0; text-align:center; text-indent:0}
.essay .essay-mark .mark{font-size:1rem}
.essay .essay-head{margin:.9em 0 1.1em; text-align:center; font:500 1.5em/1.2 var(--display); letter-spacing:.16em; margin-right:-.16em;
  text-transform:uppercase}
/* a smaller title, under a title: alone, in italic, with no printer's leaf */
.essay .essay-subhead{margin:1.9em 0 .8em; text-align:center; text-indent:0; font:italic 400 1.2em/1.3 var(--display)}
.essay .ul{text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.16em}
.essay .sc{font-variant-caps:small-caps; letter-spacing:.04em}
.essay .uc{text-transform:uppercase; letter-spacing:.06em}
.essay .md{font-weight:600}
.essay .ls{letter-spacing:.16em}
.essay .sup, .essay .sub{font-size:.66em; line-height:0; position:relative}
.essay .sup{vertical-align:baseline; top:-.6em} .essay .sub{vertical-align:baseline; top:.25em}
/* in the line alone: a page of prose */
.mv-alone:has(> .essay){min-height:0; display:block; padding:clamp(72px,12vh,130px) var(--pad)}
/* in the drop initial: the essay opens on the red letter, three lines deep, its first line in small capitals; the letter
   a capital, never the first line's small capital (that sank it a line: his note, 2026-10-11) */
.mv-initial .essay{width:100%}
.mv-initial .essay p.opening::first-letter{float:left; font-size:4.9em; line-height:.8; padding:.08em .1em 0 0; font-family:var(--display);
  font-style:normal; font-weight:500; color:var(--rubric); font-variant-caps:normal; letter-spacing:0}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .mv-initial .essay p.opening::first-letter{float:none; initial-letter:3; -webkit-initial-letter:3; font-size:inherit; line-height:inherit;
    padding:0 .12em 0 0}
}
.mv-initial .essay p.opening::first-line{font-variant-caps:all-small-caps; letter-spacing:.06em}
/* beside a picture: the marginal note, the spread, the gloss, as their poems are set */
.mv-margin .note .essay{max-width:none; font:400 clamp(.95rem,1.1vw,1.05rem)/1.65 var(--text)}
.mv-margin .note .essay p.apart{font-size:1.2em}
.mv-spread .left .essay{max-width:28rem; margin-left:auto; font:400 clamp(.98rem,1.2vw,1.08rem)/1.72 var(--text)}
.mv-spread:has(.left .essay){grid-template-columns:1fr 1px 1fr; max-width:1240px}   /* an essay keeps its reading measure */
.mv-gloss .essay{grid-column:2; grid-row:1; max-width:none}
/* the epigraph: a passage set small and high, and where it comes from */
.mv-epigraph .essay{max-width:24rem; margin:0 8% 0 auto; font:italic 400 clamp(1rem,1.3vw,1.15rem)/1.55 var(--display)}
.mv-epigraph .essay p{text-indent:0}
.mv-epigraph .essay p + p{margin-top:.6em}
@media (max-width:700px){ .essay{font-size:1rem; line-height:1.72} .essay p.apart{font-size:1.24em} .essay .essay-head{font-size:1.3em}
  .essay p.quote{padding:0 1em} .essay .essay-subhead{font-size:1.12em}
  .mv-spread .left .essay{max-width:none} .mv-gloss .essay{grid-column:1 / -1; margin-bottom:18px} .mv-epigraph .essay{margin-right:0} }

/* ── turns and pauses ────────────────────────────────────────────────────────────────────────────── */
.mv-pause{min-height:95svh; display:grid; place-items:center}
.mv-pause .fleuron{font-size:2.3rem}
.mv-asterism{min-height:36svh; display:grid; place-items:center}
.mv-asterism .asterism{font-size:2.5rem}

/* the color turn — the ground turns to the picture's color, and keeps it */
.mv-colorturn{background:linear-gradient(to bottom, var(--ground) 0, var(--turn) 55svh); color:var(--turn-ink);
  padding:55svh var(--pad) clamp(60px,10vh,120px)}
.mv-colorturn figure{margin:0 auto; max-width:1100px; width:min(100%, 78vw)}
@media (max-width:700px){ .mv-colorturn figure{width:100%} }

/* the iris — the picture fills the screen, then closes through a circle to a point as you scroll (a round window, above): through a lozenge,
   the circle wider than the screen, to a circle, the last of it lingering; then the page takes the picture's color where the reader stands,
   and keeps it (a .stretch after it, as after the color turn: build.py). Held on the scroll itself, so a jump, a link or a reload lands on
   the right color. Where nothing moves, the picture whole and its color laid in beneath it, as the color turn lays it */
.mv-iris{height:230svh; view-timeline-name:--iris; background:var(--ground)}
.mv-iris .stage{position:sticky; top:0; height:100svh; overflow:hidden}
.mv-iris .turn{position:absolute; z-index:2; inset:0; background:var(--turn); opacity:0; pointer-events:none}
.mv-iris .still{display:none; height:45svh; background:linear-gradient(to bottom, var(--ground), var(--turn))}
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .mv-iris .win{animation:iris-close-win linear both} .mv-iris .win img{animation:iris-close-pic linear both} .mv-iris .turn{animation:iris-turn linear both}
  .mv-iris .win, .mv-iris .win img, .mv-iris .turn{animation-timeline:--iris; animation-range:contain 0% contain 100%}
  @keyframes iris-turn{0%, 62%{opacity:0; animation-timing-function:cubic-bezier(.25,.46,.45,.94)} 92%, 100%{opacity:1}}
}}
@supports not (animation-timeline: view()){ .mv-iris{height:auto} .mv-iris .stage{position:relative} .mv-iris .still{display:block} }
@media (prefers-reduced-motion:reduce){ .mv-iris{height:auto} .mv-iris .stage{position:relative} .mv-iris .still{display:block} }

/* the drift — layers travel at different speeds */
.mv-drift{height:165svh; max-width:1400px; margin:0 auto; view-timeline-name:--drift}
.mv-drift img{position:absolute; left:var(--x); top:var(--y); width:var(--w)}
.mv-drift .words{position:absolute; z-index:2; left:56%; top:64%; width:min(38rem, 41%); font:400 clamp(1rem,1.35vw,1.2rem)/1.55 var(--display)}
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .mv-drift img{animation:float linear both; animation-timeline:--drift; animation-range:cover 0% cover 100%}
  @keyframes float{from{translate:0 var(--from)} to{translate:0 var(--to)}}
}}
/* the catchword: the next words' first word at the foot, as a printer set it for the binder */
.mv-drift .catchword{position:absolute; z-index:2; right:var(--pad); bottom:3%; font:italic 400 clamp(1.05rem,1.4vw,1.25rem)/1 var(--display); color:var(--soft)}
@media (max-width:700px){ .mv-drift{height:150svh} .mv-drift img{left:var(--px); top:var(--py); width:var(--pw)}
  .mv-drift .words{left:var(--pad); right:var(--pad); width:auto; top:auto; bottom:6%} .mv-drift .catchword{bottom:1.2%} }

/* the endpaper — a screen of plain color, like the paper inside a book's cover */
.mv-endpaper{min-height:100svh; background:var(--paper)}

/* the turn — the door into the next chapter: its opening picture, small, "next ☞", its name; one link. After a
   color turn it brings the page back to its own ground. */
.mv-turn{min-height:90svh; display:grid; place-content:center; justify-items:center; gap:18px; padding:60px var(--pad); text-align:center;
  background:linear-gradient(to bottom, var(--from-ground) 0, var(--ground) 60svh)}   /* back to the room's own ground at the door */
.mv-turn .words{max-width:34rem; margin-bottom:clamp(24px,4vh,44px); text-align:left; font:400 clamp(1.05rem,1.5vw,1.3rem)/1.5 var(--display)}
.mv-turn .leaves-row{margin:0 0 clamp(10px,2vh,20px)}
.mv-turn .leaves{display:inline-block; font-size:1.55rem; letter-spacing:.4em; margin-right:-.4em}
.mv-turn .door{display:grid; justify-items:center; gap:12px; color:var(--ink); text-decoration:none}
.mv-turn .door img{width:clamp(130px,15vw,200px); margin-bottom:8px; box-shadow:0 10px 26px -14px rgba(0,0,0,.45); view-transition-name:opening}
.mv-turn .eyebrow{display:flex; align-items:center; gap:.55em; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase}
.mv-turn .eyebrow .word{opacity:.7}
/* the manicule, the printer's pointing hand (research/2026-10-10-printers-marks.md, 20): look here, this way */
.mv-turn .hand{font:1.45rem/1 var(--orn); letter-spacing:0; margin-top:-.08em}
.mv-turn .name{font:italic 400 clamp(1.6rem,3vw,2.2rem)/1.1 var(--display); border-bottom:1px solid currentColor}
.mv-turn .where{margin-top:-4px; font:500 11px/1 var(--mono); letter-spacing:.08em; opacity:.7}   /* a door to a page on the web: its site */
.mv-turn .door:hover img{outline:2px solid var(--ink); outline-offset:4px}
.mv-turn .endnote{margin:12px 0 0; font:400 .95rem/1.5 var(--display); opacity:.75}

/* the colophon — under a double rule, ending on a printer's leaf */
.mv-colophon{display:grid; justify-items:center; text-align:center; padding:clamp(90px,16vh,170px) var(--pad) clamp(60px,10vh,110px)}
.mv-colophon .double{width:min(13rem,42%); border-top:2.5px solid var(--ink); padding-top:3px; margin-bottom:1.8em}
.mv-colophon .double::after{content:""; display:block; border-top:.75px solid var(--ink)}
.mv-colophon .poem{max-width:27rem; font:400 clamp(.92rem,1.1vw,1.02rem)/1.65 var(--display)}
.mv-colophon .verse span{padding-left:0; text-indent:0}
.mv-colophon .device{margin-top:2em}
.mv-colophon .device .mark{font-size:1rem}
/* the colophon, closing (its option: moves.py → closes_first): the room's first picture comes back and closes through a circle (a round
   window, above) toward the foot of the screen, to a roundel the size of a printer's device (6 in a hundred of the window: about 115px at his
   window, 60 to 80 on a phone); it fades there as the device's double ring is drawn, the colophon's mark sets in the ring, and the double
   rule and its words rise above. The room opened on this picture and ends on it. Where nothing moves, the picture, then the colophon */
.mv-colophon.closes{display:block; justify-items:normal; height:230svh; padding:0; view-timeline-name:--colophon}   /* its stage stretched, never centred to nothing */
.mv-colophon.closes .stage{position:sticky; top:0; height:100svh; overflow:hidden; --cy:74cqh}
.mv-colophon.closes .ring{display:none}
.mv-colophon.closes .colo{display:grid; justify-items:center}
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .mv-colophon.closes .colo{position:absolute; z-index:3; left:0; right:0; top:0; height:calc(var(--cy) - var(--d) * .03 - 6svh); align-content:end; padding:0 var(--pad)}
  .mv-colophon.closes :is(.ring, .device){position:absolute; z-index:4; left:calc(var(--cx) - var(--d) * .03); top:calc(var(--cy) - var(--d) * .03);
    width:calc(var(--d) * .06); height:calc(var(--d) * .06); margin:0}
  .mv-colophon.closes .ring{display:block; border:1.5px solid var(--ink); border-radius:50%; outline:.75px solid var(--ink); outline-offset:3px}
  .mv-colophon.closes .device{display:grid; place-items:center}
  .mv-colophon.closes .device .mark{font-size:calc(var(--d) * .026); line-height:1}
  .mv-colophon.closes .win{animation:iris-seal-win linear both} .mv-colophon.closes .win img{animation:iris-seal-pic linear both, iris-fade linear both}
  .mv-colophon.closes .ring{animation:iris-ring linear both} .mv-colophon.closes .device{animation:iris-mark linear both}
  .mv-colophon.closes .colo > .double, .mv-colophon.closes .colo > .poem{animation:iris-words linear both}
  .mv-colophon.closes .win, .mv-colophon.closes .win img, .mv-colophon.closes .ring, .mv-colophon.closes .device,
  .mv-colophon.closes .colo > .double, .mv-colophon.closes .colo > .poem{animation-timeline:--colophon; animation-range:contain 0% contain 100%}
  @keyframes iris-fade{0%, 54%{opacity:1} 66%, 100%{opacity:0}}
  @keyframes iris-ring{0%, 56%{opacity:0} 68%, 100%{opacity:1}}
  @keyframes iris-mark{0%, 64%{opacity:0} 74%, 100%{opacity:1}}
  @keyframes iris-words{0%, 70%{opacity:0; translate:0 2svh} 88%, 100%{opacity:1; translate:0 0}}
}}
@supports not (animation-timeline: view()){ .mv-colophon.closes{height:auto} .mv-colophon.closes .stage{position:static; height:auto; overflow:visible; container-type:normal}
  .mv-colophon.closes .win{position:relative; left:auto; top:auto; width:auto; height:100svh; border-radius:0}
  .mv-colophon.closes .win img{position:static; width:100%; height:100%}
  .mv-colophon.closes .colo{padding:clamp(90px,16vh,170px) var(--pad) clamp(60px,10vh,110px); text-align:center} }
@media (prefers-reduced-motion:reduce){ .mv-colophon.closes{height:auto} .mv-colophon.closes .stage{position:static; height:auto; overflow:visible; container-type:normal}
  .mv-colophon.closes .win{position:relative; left:auto; top:auto; width:auto; height:100svh; border-radius:0}
  .mv-colophon.closes .win img{position:static; width:100%; height:100%}
  .mv-colophon.closes .colo{padding:clamp(90px,16vh,170px) var(--pad) clamp(60px,10vh,110px); text-align:center} }

/* the list of plates — every picture of the room, small and numbered as the enlargement counts them, with its caption and
   credit, as a book of photographs gathers them at its end (his words, 2026-10-12: "I like the idea of a list of
   plates"). Two ways (his pick of the comps: "first choice the ledger second the sheet and the key"): the ledger, each
   picture at one height with its caption beside it, two columns at a wide window; and the sheet and the key, a contact
   sheet of the pictures and beneath it their captions, numbered to match. A heading only if the person writes one */
:is(.mv-plates,.mv-plateskey){padding:clamp(72px,12vh,130px) var(--pad) clamp(40px,7vh,80px)}
:is(.mv-plates,.mv-plateskey) .plates-head{max-width:78rem; margin:0 auto clamp(26px,4vh,40px); display:flex; align-items:center; gap:18px}
:is(.mv-plates,.mv-plateskey) .plates-head::after{content:""; flex:1; height:1px; background:color-mix(in srgb,var(--ink) 18%,transparent)}
:is(.mv-plates,.mv-plateskey) .head{margin:0; font:500 11px/1.3 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--soft)}
:is(.mv-plates,.mv-plateskey) .n{font:400 1rem/1.2 var(--display); color:var(--soft); font-variant-numeric:lining-nums tabular-nums}
:is(.mv-plates,.mv-plateskey) .by{display:block; margin-top:4px; font:500 .58rem/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
:is(.mv-plates,.mv-plateskey) [data-plate-of]{cursor:zoom-in}
.mv-plates .plates-list{max-width:78rem; margin:0 auto; columns:2 30rem; column-gap:clamp(36px,4.4vw,72px)}
.mv-plates .pl{break-inside:avoid; display:grid; grid-template-columns:2rem 140px minmax(0,1fr); gap:0 16px; align-items:start; margin:0; padding:0 0 22px}
.mv-plates .pl .n{text-align:right}
.mv-plates .pl img{display:block; width:auto; height:auto; max-width:140px; max-height:96px}
.mv-plates figcaption{font:400 .86rem/1.45 var(--text); text-wrap:pretty}
.mv-plateskey .plates-sheet{max-width:78rem; margin:0 auto; display:flex; flex-wrap:wrap; align-items:flex-end; gap:22px 14px}
.mv-plateskey .plates-sheet figure{margin:0}
.mv-plateskey .plates-sheet img{display:block; width:auto; height:104px; max-width:100%; object-fit:contain}
.mv-plateskey .plates-sheet .n{display:block; margin-top:5px; font-size:.8rem}
.mv-plateskey .plates-key{max-width:78rem; margin:clamp(40px,6vh,64px) auto 0; padding-top:clamp(24px,4vh,36px); border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  columns:3 18rem; column-gap:clamp(28px,3.4vw,56px)}
.mv-plateskey .plates-key p{break-inside:avoid; display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:0 .8rem; margin:0; padding:0 0 10px; font:400 .86rem/1.45 var(--text); text-wrap:pretty}
.mv-plateskey .plates-key .n{text-align:right; font-size:.86rem; line-height:1.45}
/* the publications — where the writer's poems and essays appeared, a line to each, as a writer's site lists them (his "a",
   2026-10-13): the title in the room's own type, the journal in italic, the date and issue quieter; what is still to come
   marked; a heading only if the person writes one, ruled as the list of plates is */
.mv-publications{padding:clamp(72px,12vh,130px) var(--pad) clamp(40px,7vh,80px)}
.mv-publications .pubs-head{max-width:46rem; margin:0 auto clamp(26px,4vh,40px); display:flex; align-items:center; gap:18px}
.mv-publications .pubs-head::after{content:""; flex:1; height:1px; background:color-mix(in srgb,var(--ink) 18%,transparent)}
.mv-publications .head{margin:0; font:500 11px/1.3 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--soft)}
.mv-publications .pubs-list{max-width:46rem; margin:0 auto}
.mv-publications .pub{margin:0; padding:0 0 18px; font:400 1.04rem/1.45 var(--text); text-wrap:pretty}
.mv-publications .pub .t{display:block}
.mv-publications .pub .where{display:block; color:var(--soft); font-size:.92em}
.mv-publications .pub .where i{color:var(--ink)}
.mv-publications .pub .soon{font:500 .6rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent, var(--soft)); margin-left:.4em}
.mv-publications .pub .then{display:block; font-style:italic; font-size:.92em}
.mv-publications .pub.none{color:var(--soft); font-style:italic}
.mv-publications .there{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent); font-style:normal}   /* where a poem appeared, on its own site */
.mv-publications .there:hover{text-decoration-color:var(--ink)}
/* the books — the writer's books, a line to each, the year beside the title in italic, the publisher and a note quieter, where to buy it
   (his "yes go ahead", 2026-10-13); ruled as the publications are */
.mv-books{padding:clamp(72px,12vh,130px) var(--pad) clamp(40px,7vh,80px)}
.mv-books .books-head{max-width:46rem; margin:0 auto clamp(26px,4vh,40px); display:flex; align-items:center; gap:18px}
.mv-books .books-head::after{content:""; flex:1; height:1px; background:color-mix(in srgb,var(--ink) 18%,transparent)}
.mv-books .head{margin:0; font:500 11px/1.3 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--soft)}
.mv-books .books-list{max-width:46rem; margin:0 auto}
.mv-books .book{display:grid; grid-template-columns:4.2rem minmax(0,1fr); gap:0 18px; margin:0; padding:0 0 20px; font:400 1.04rem/1.45 var(--text)}
.mv-books .year{color:var(--soft); font-variant-numeric:lining-nums tabular-nums}
.mv-books .about > *{display:block}
.mv-books .meta, .mv-books .note{color:var(--soft); font-size:.92em}
.mv-books .note{font-style:italic}
.mv-books .there{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; font-size:.92em;
  text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.mv-books .book.none{display:block; color:var(--soft); font-style:italic}
/* the doors (step 148): the writer's published rooms, each its opening picture and its name, one click into it, as a home's cards are;
   three across, two side by side and four two by two, one alone wide; on a phone two across, one alone the column's width */
.mv-doors{padding:clamp(72px,12vh,130px) var(--pad) clamp(40px,7vh,80px)}
.mv-doors .doors-head{max-width:72rem; margin:0 auto clamp(22px,3.4vh,36px); display:flex; align-items:center; gap:18px}
.mv-doors .doors-head::after{content:""; flex:1; height:1px; background:color-mix(in srgb,var(--ink) 18%,transparent)}
.mv-doors .head{margin:0; font:500 11px/1.3 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--soft)}
.mv-doors .doors-list{max-width:72rem; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,34px) clamp(14px,2vw,26px)}
.mv-doors .doors-list.two{max-width:48rem; grid-template-columns:repeat(2,minmax(0,1fr))}
.mv-doors .doors-list.one{max-width:34rem; grid-template-columns:minmax(0,1fr)}
.mv-doors .dr{display:block; color:var(--ink); text-decoration:none}
.mv-doors .dr-pic{display:block; overflow:hidden; background:color-mix(in srgb,var(--ink) 8%,transparent)}
.mv-doors .dr-pic img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.mv-doors .dr-name{display:block; margin-top:10px; font:400 clamp(1.05rem,1.4vw,1.2rem)/1.3 var(--display); text-wrap:balance}
.mv-doors a.dr:hover .dr-name{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.mv-doors .aloud{display:block; margin-top:4px; font:500 10px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.mv-doors .dr-none{grid-column:1 / -1; margin:0; color:var(--soft); font:italic 400 1rem/1.45 var(--text)}
.mv-doors.none:not(:has(.dr-none)){display:none}   /* nothing to open: a visitor sees nothing; the editor says why */
@media (max-width:700px){ .mv-doors .doors-list, .mv-doors .doors-list.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mv-doors .doors-list.one{grid-template-columns:minmax(0,1fr)} }
/* coming up (step 148): the writer's next reading, when in small capitals, what in the face of the room's words, where quieter; ruled as
   the books are */
.mv-coming{padding:clamp(72px,12vh,130px) var(--pad) clamp(40px,7vh,80px)}
.mv-coming .coming-head{max-width:46rem; margin:0 auto clamp(22px,3.4vh,36px); display:flex; align-items:center; gap:18px}
.mv-coming .coming-head::after{content:""; flex:1; height:1px; background:color-mix(in srgb,var(--ink) 18%,transparent)}
.mv-coming .head{margin:0; font:500 11px/1.3 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--soft)}
.mv-coming .coming-list{max-width:46rem; margin:0 auto}
.mv-coming .next{margin:0; font:400 1.04rem/1.45 var(--text)}
.mv-coming .next[hidden]{display:none}
.mv-coming .when{display:block; font:500 12px/1.3 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}
.mv-coming .what{display:block; margin-top:8px; font:400 clamp(1.4rem,2.6vw,2rem)/1.2 var(--display); color:var(--ink); text-wrap:balance}
.mv-coming .where{display:block; margin-top:6px; color:var(--soft)}
.mv-coming .next.none{color:var(--soft); font-style:italic}
.mv-coming.none:not(:has(.next.none)){display:none}   /* nothing to come: a visitor sees nothing; the editor says how */
.mv-coming .way-on{max-width:46rem; margin:clamp(10px,1.8vh,18px) auto 0; font:400 .96rem/1.4 var(--text)}
.mv-coming .way-on .on{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)}
/* the lists' way on (step 148): showing part, the way to the whole list on the writer's home, beneath it, as a home's "All books" */
:is(.mv-books, .mv-publications) .way-on{max-width:46rem; margin:clamp(4px,1vh,12px) auto 0; font:400 .96rem/1.4 var(--text)}
:is(.mv-books, .mv-publications) .way-on .on{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)}
:is(.mv-books, .mv-publications) .way-on .on:hover{text-decoration-color:var(--ink)}
.mv-books .one + .way-on{text-align:center}
/* covers, one of the writer's pictures to a book (his picks, 2026-10-14; sketches/2026-10-14-book-covers): cut to a book's shape about
   the picture's focus, flat, nothing drawn as a book. In rows that fit the count, each book two of the list's rows (its cover, its words),
   so a row's words stand level and a book with no cover keeps its words level with its neighbours' */
.mv-books .book .cover{display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; background:color-mix(in srgb,var(--ink) 8%,transparent)}
.mv-books .covers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 34px; align-items:start}
.mv-books .covers.pair{max-width:40rem; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 40px}
.mv-books .covers .book{grid-row:span 2; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr); gap:14px 0; padding:0}
.mv-books .covers :is(.cover, .leaf){grid-row:1}
.mv-books .covers .about{grid-row:2}
.mv-books .covers .year{font-size:.92em}
/* a writer's one book, given its due ("think how important that presentation is to the author who just published it and has only
   one"): the year in small capitals, the title set large, the words at a reading size; as a title page, side by side, or side by side
   in its cover's colors (the section's own --ground, --ink, --soft and --accent, set by build.py from the cover) */
.mv-books .one{max-width:none}
.mv-books .one .book{grid-template-columns:minmax(0,1fr); padding:0}
.mv-books .one .year{font:500 12px/1.3 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--soft)}
.mv-books .one .t{font-size:clamp(2.2rem,4.2vw,3.4rem); line-height:1.08; margin:14px 0 18px; color:var(--ink)}
.mv-books .one .meta, .mv-books .one .note{font-size:1.12rem; line-height:1.5}
.mv-books .one .note{margin-top:6px}
.mv-books .one .there{display:inline-block; margin-top:22px; font-size:1.05rem}
.mv-books:has(.one){padding-bottom:clamp(80px,14vh,150px)}
.mv-books .one-page .book{justify-items:center; text-align:center; gap:clamp(28px,5vh,48px)}
.mv-books .one-page .cover{width:auto; height:min(66vh,36rem); max-width:100%}
.mv-books .one-page .about{max-width:34rem}
.mv-books:has(.one-side, .one-color) .books-head, .mv-books :is(.one-side, .one-color){max-width:64rem}
.mv-books :is(.one-side, .one-color) .book:has(.cover){grid-template-columns:minmax(0,min(28rem,48vh)) minmax(0,1fr); gap:0 clamp(32px,5vw,72px); align-items:center}
.mv-books :is(.one-side, .one-color) .about{max-width:30rem}
.mv-books:has(.one-color){background:var(--ground); color:var(--ink)}
.mv-books .one-color .there{color:var(--accent)}
@media (max-width:640px){
  .mv-books .covers, .mv-books .covers.pair{grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 20px}
  .mv-books .one-page .cover{height:auto; width:78%}
  .mv-books :is(.one-side, .one-color) .book:has(.cover){grid-template-columns:minmax(0,1fr); gap:30px}
  .mv-books :is(.one-side, .one-color) .cover{width:78%}
}
:is(.mv-books .books-head, .mv-publications .pubs-head):has(> [data-empty], > [data-stanza-empty])::after{display:none}   /* no heading written: no rule beside it */
@media (max-width:700px){
  .mv-plates .pl{grid-template-columns:1.6rem 96px minmax(0,1fr); gap:0 12px}
  .mv-plates .pl img{max-width:96px; max-height:72px}
  .mv-plateskey .plates-sheet{gap:16px 10px}
  .mv-plateskey .plates-sheet img{height:72px}
}

/* captions on the page, as the room chooses (build.py → with_legend): beneath a move's pictures, numbered when it holds
   more than one; or only the numbers of its plates; or, "when a reader asks", hidden until they do (viewer.js). After a
   move that fills the screen, they follow it */
.legend{grid-column:1 / -1; justify-self:center; position:relative; z-index:2; width:fit-content; max-width:min(46rem,100%); margin:clamp(12px,2vh,20px) auto 0;
  font:400 .86rem/1.45 var(--text); color:var(--soft); text-wrap:pretty}
.legend p{margin:0 0 .35em}
/* where a room's own poem or essay first appeared, a line beneath it when the room asks (his word, 2026-10-12): in the
   captions' voice, the place's name in roman within the italic, as a title is set inside italic */
p.first-pub{margin:1.2em 0 0; padding:0; text-indent:0; font:italic 400 .86rem/1.45 var(--text); color:var(--soft); text-wrap:pretty}
.first-pub i{font-style:normal}
.first-pub a{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}   /* the publication's own link (2026-10-28) */
.first-pub a:hover{text-decoration-color:currentColor}
p.first-pub.after{width:fit-content; max-width:min(46rem,100%); margin:clamp(10px,1.6vh,16px) auto 0; padding:0 var(--pad) clamp(20px,4vh,40px)}
.legend .n{margin-right:.55em; font:500 .62rem/1 var(--mono); letter-spacing:.1em; color:var(--ink)}
.legend .by{margin-left:.7em; font:500 .58rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase}
.legend .nos{font:500 .62rem/1.2 var(--mono); letter-spacing:.14em}
.legend.after{padding:12px var(--pad) clamp(20px,4vh,40px)}
.legend.switch{display:none}
.show-captions .legend.switch{display:block}

[hidden]{display:none!important}

/* ── the enlargement: from here to its end, written out by app/tools/build.py as viewer.css too, for a page that wears none of the
   rooms' styles (Whitman, as printed); one source ── */
/* the picture, enlarged (viewer.js): a click opens it whole, a click on it closes it (his word, 2026-10-10) */
/* the magnifier only where a click opens it (viewer.js names the page's way: Whitman's views had shown it on pictures nothing opened) */
html[data-enlarges="all"] body:not(.editing) #chapter img[data-n]:not(a img), a[data-enlarge], a[data-enlarge] img{cursor:zoom-in}
.vw{position:fixed; inset:0; z-index:2147483600; display:grid; place-items:center; background:rgba(14,14,13,.95); cursor:zoom-out}   /* over every page's own bar (Whitman, as printed's stands at 2147483000): a dialog, the page beneath inert */
.vw[hidden]{display:none}
.vw-img{display:block; object-fit:contain; box-shadow:0 12px 50px rgba(0,0,0,.45)}   /* sized by viewer.js, from the picture's proportions */
.vw button{position:absolute; border:0; background:none; color:rgba(255,255,255,.72); font:300 1.7rem/1 Georgia, serif; padding:14px 18px; cursor:pointer}
.vw button:hover{color:#fff}
.vw-prev{left:6px; top:50%; translate:0 -50%} .vw-next{right:6px; top:50%; translate:0 -50%} .vw-close{top:6px; right:8px; font-size:2rem !important}
.vw-count{position:absolute; bottom:14px; left:0; right:0; margin:0; text-align:center; font:500 .62rem/1 ui-monospace, Menlo, monospace;
  letter-spacing:.2em; color:rgba(255,255,255,.5); pointer-events:none}
@media (max-width:700px){ .vw-prev, .vw-next{display:none} .vw-img{max-width:100vw} }
/* a stack's strip, beneath the picture enlarged: which of them it is, and each to click */
.vw-strip{position:absolute; left:50%; bottom:36px; translate:-50% 0; display:flex; align-items:center; gap:6px; padding:6px; border-radius:8px;
  background:rgba(255,255,255,.07); max-width:92vw; overflow-x:auto; cursor:default}
.vw-strip[hidden]{display:none}
/* a film enlarged: YouTube's player at the film's own proportions, in place of its still */
.vw-film{display:block; width:min(92vw, calc(84svh * 16 / 9)); height:auto; aspect-ratio:16 / 9; border:0; background:#000; cursor:auto}
.vw-img[hidden], .vw-film[hidden]{display:none}
.vw .vw-strip button{position:static; flex:none; width:46px; height:46px; padding:0; border-radius:3px; overflow:hidden; opacity:.5; translate:none}
.vw .vw-strip button[aria-current]{opacity:1; outline:2px solid rgba(255,255,255,.85); outline-offset:1px}
.vw-strip img{display:block; width:100%; height:100%; max-width:none; object-fit:cover}
.vw-strip .lab{padding:0 8px 0 4px; font:500 .62rem/1 ui-monospace, Menlo, monospace; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); white-space:nowrap}
.vw button:focus:not(:focus-visible){outline:none}
.vw-img{transition:filter .25s ease} .vw-img.rough{filter:blur(6px)}   /* the stand-in, softened until the sharp copy lands */
/* looked into closer (viewer.js → closer): a click on the picture goes in and comes out, beside it closes; looked into, the picture is
   placed by the script, and the caption keeps its place beneath on the enlargement's own ground, which the picture passes under */
.vw.closer{cursor:default; touch-action:none; -webkit-user-select:none; user-select:none}
.vw.closer .vw-img{cursor:zoom-in; -webkit-user-drag:none}
.vw.zoomed .vw-img{position:absolute; margin:0 !important; max-width:none; max-height:none; box-shadow:none; cursor:zoom-out}
.vw-foot{position:absolute; left:0; right:0; bottom:0; background:rgba(14,14,13,.95)}
.vw.zoomed .vw-prev, .vw.zoomed .vw-next{display:none}
.vw.closer .vw-close{top:10px; right:10px; padding:6px 13px 9px; border-radius:999px; background:rgba(14,14,13,.72)}   /* over a pale page (a phone's, at rest too), still seen */
@media (prefers-reduced-motion:reduce){ .vw-img{transition:none} }
/* the caption beneath it, in the page's reading face, the person's own words; who made it under that, in small capitals */
.vw-cap{position:absolute; margin:0; font:400 .98rem/1.45 var(--text, Georgia, serif); color:rgba(255,255,255,.88); text-wrap:pretty; pointer-events:none}
.vw-cap[hidden]{display:none}
.vw-cap .t, .vw-cap .by{display:block; max-width:42rem}
.vw-cap .by{margin-top:8px; font:500 .62rem/1.2 ui-monospace, Menlo, monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.vw-cap .t:empty, .vw-cap .by:empty{display:none}
.vw-cap .t:empty + .by{margin-top:0}
.vw [hidden]{display:none!important}   /* where no room's [hidden] rule is (viewer.css alone) */
/* ── the enlargement ends ── */

/* For poets: the fine type controls (his words, 2026-10-11: "let's build both"), last so they hold over each move's own
   type. A line centered or set right stands without its hang; the poem's leading set solid (as Whitman asked Osgood for,
   "brevier solid") or open; the poem leaning a little, or turned sideways, as Herbert's "Easter Wings" is printed, its
   lines running down the page (rotate composes with a move's own motion; vertical-rl keeps the room's flow). Each holds on
   My words too, outside a room's moves (his note, 2026-10-12) */
.verse > span.al-center{text-align:center; padding-inline-start:0; text-indent:0}
.verse > span.al-right{text-align:end; padding-inline-start:0; text-indent:0}
.poem.lead-solid, .poem.lead-solid .verse > span, .mv .poem.lead-solid, .mv .poem.lead-solid .verse > span{line-height:1.12}
.poem.lead-open, .poem.lead-open .verse > span, .mv .poem.lead-open, .mv .poem.lead-open .verse > span{line-height:1.85}
.poem.tilt-left{rotate:-3deg}
.poem.tilt-right{rotate:3deg}
.poem.tilt-sideways, .mv .poem.tilt-sideways{writing-mode:vertical-rl; max-width:none; max-height:80svh; width:fit-content; margin-left:auto; margin-right:auto}

/* a size of its own, on any letters (his word, 2026-10-13): two steps smaller, two larger (moves.py → STYLE_TAGS); two larger still,
   twice the size and two and a half times (his words, 2026-11-01, about 11:06 pm, of a Whitman flower: "Lets add two more, both larger
   than the largest existing one") */
.z-xs{font-size:.72em} .z-sm{font-size:.86em} .z-lg{font-size:1.25em} .z-xl{font-size:1.6em} .z-xxl{font-size:2em} .z-xxxl{font-size:2.5em}

/* a piece's own face, for its words (his words, 2026-10-15: "its own face as set"; serve.py → PIECE_FACE): the face a writer chose for
   it in the composer goes with it into a room, its words and its title in it, the title in a face of its own where it has one (tf-,
   below); a piece with no face of its own wears the look's. Its words keep each move's own size, leading and case. A script as in the
   composer: its letters as written, never spaced or in capitals, no bold or slant made up, small capitals in its companion */
.mv :is(.poem, .essay, .passes).wf-caslon{font-family:"Libre Caslon Text", Georgia, serif}
.mv :is(.poem, .essay, .passes).wf-garamond{font-family:"EB Garamond", Garamond, serif}
.mv :is(.poem, .essay, .passes).wf-baskerville{font-family:"Libre Baskerville", Baskerville, Georgia, serif}
.mv :is(.poem, .essay, .passes).wf-bembo{font-family:"ET Book", Palatino, serif}
.mv :is(.poem, .essay, .passes).wf-bodoni{font-family:"Bodoni Moda", Didot, "Bodoni 72", serif}
.mv :is(.poem, .essay, .passes).wf-times{font-family:Tinos, "Times New Roman", Times, serif}
.mv :is(.poem, .essay, .passes).wf-hanken{font-family:"Hanken Grotesk", sans-serif}
.mv :is(.poem, .essay, .passes).wf-futura{font-family:Jost, Futura, sans-serif}
.mv :is(.poem, .essay, .passes).wf-courier{font-family:"Courier Prime", "Courier New", Courier, monospace}
.mv :is(.poem, .essay, .passes).wf-pinyon{font-family:"Pinyon Script", "Libre Caslon Text", Georgia, serif}
.mv :is(.poem, .essay, .passes).wf-swash{font-family:"Garamond Swash", "EB Garamond", Garamond, serif}
.mv :is(.poem, .essay, .passes).wf-tangerine{font-family:"Tangerine", "EB Garamond", Garamond, serif}
.mv :is(.poem, .essay, .passes).wf-delafield{font-family:"Mrs Saint Delafield", "Libre Caslon Text", Georgia, serif}
.mv :is(.poem, .essay, .passes).wf-vibes{font-family:"Great Vibes", "Libre Caslon Text", Georgia, serif}
.mv .wf-caslon:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Libre Caslon Display", "Libre Caslon Text", Georgia, serif}
.mv .wf-garamond:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"EB Garamond", Garamond, serif}
.mv .wf-baskerville:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Libre Baskerville", Baskerville, Georgia, serif}
.mv .wf-bembo:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"ET Book", Palatino, serif}
.mv .wf-bodoni:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Bodoni Moda", Didot, "Bodoni 72", serif}
.mv .wf-times:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:Tinos, "Times New Roman", Times, serif}
.mv .wf-hanken:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Hanken Grotesk", sans-serif}
.mv .wf-futura:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:Jost, Futura, sans-serif}
.mv .wf-courier:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Courier Prime", "Courier New", Courier, monospace}
.mv .wf-pinyon:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Pinyon Script", "Libre Caslon Text", Georgia, serif}
.mv .wf-swash:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Garamond Swash", "EB Garamond", Garamond, serif}
.mv .wf-tangerine:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Tangerine", "EB Garamond", Garamond, serif}
.mv .wf-delafield:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Mrs Saint Delafield", "Libre Caslon Text", Georgia, serif}
.mv .wf-vibes:not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Great Vibes", "Libre Caslon Text", Georgia, serif}
.mv :is(.poem, .essay, .passes):is(.wf-pinyon, .wf-swash, .wf-tangerine, .wf-delafield, .wf-vibes), .mv :is(.poem, .essay, .passes):is(.wf-pinyon, .wf-swash, .wf-tangerine, .wf-delafield, .wf-vibes) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-synthesis:small-caps}
.mv :is(.wf-pinyon, .wf-swash, .wf-tangerine, .wf-delafield, .wf-vibes):not(.tf-set) :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-style:normal; text-transform:none; letter-spacing:normal; font-variant-caps:normal}
.mv :is(.poem, .essay, .passes).wf-delafield{word-spacing:.15em} .mv :is(.poem, .essay, .passes).wf-vibes{word-spacing:.12em}
.mv :is(.poem, .essay, .passes):is(.wf-pinyon, .wf-delafield, .wf-vibes) :is(.sc, .uc){font-family:"Libre Caslon Text", Georgia, serif; word-spacing:normal}
.mv :is(.poem, .essay, .passes):is(.wf-swash, .wf-tangerine) :is(.sc, .uc){font-family:"EB Garamond", Garamond, serif; word-spacing:normal}
/* small capitals in Courier (his pick, 2026-10-22; faces.css): it has none of its own; its capitals at 83 percent, the height of its
   small letters, each on a whole column, never the browser's at 70 percent */
.mv :is(.poem, .essay, .passes).wf-courier .sc, .f2-courier .f2 .sc{font-variant-caps:normal; text-transform:uppercase; font-size:.83em; letter-spacing:.123em}
/* a piece's own faces (his picks, 2026-10-13: "1 your rec"; research/2026-10-13-own-typefaces-and-several-faces.md): its titles in a
   face of their own (tf-), and its second face on chosen words (<f2>, f2-), the composer's eight by the kit's names; the look keeps
   each title's size and case. On a loupe site a face the look's kit lacks falls to the next in its list */
.tf-caslon :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Libre Caslon Display", "Libre Caslon Text", Georgia, serif}
.tf-garamond :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"EB Garamond", Garamond, serif}
.tf-baskerville :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Libre Baskerville", Baskerville, Georgia, serif}
.tf-bembo :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"ET Book", Palatino, serif}
.tf-bodoni :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Bodoni Moda", Didot, "Bodoni 72", serif}
.tf-times :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:Tinos, "Times New Roman", Times, serif}
.tf-hanken :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Hanken Grotesk", sans-serif}
.tf-futura :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:Jost, Futura, sans-serif}
.tf-courier :is(.poem-title, .dateline, .essay-head, .essay-subhead){font-family:"Courier Prime", "Courier New", Courier, monospace}
.f2-caslon .f2{font-family:"Libre Caslon Text", Georgia, serif}
.f2-garamond .f2{font-family:"EB Garamond", Garamond, serif}
.f2-baskerville .f2{font-family:"Libre Baskerville", Baskerville, Georgia, serif}
.f2-bembo .f2{font-family:"ET Book", Palatino, serif}
.f2-bodoni .f2{font-family:"Bodoni Moda", Didot, "Bodoni 72", serif}
.f2-times .f2{font-family:Tinos, "Times New Roman", Times, serif}
.f2-hanken .f2{font-family:"Hanken Grotesk", sans-serif}
.f2-futura .f2{font-family:Jost, Futura, sans-serif}
.f2-courier .f2{font-family:"Courier Prime", "Courier New", Courier, monospace}
/* the five scripts (his words, 2026-10-15: "set any text in any of those script fonts"; src/faces.css): a title in one, or words chosen,
   in stanza's own copies (kit/fonts.css; tools/kit.py → script_faces, each a size of its own there, for the small body of its letters,
   so a look's own face standing in for it on a loupe site is never scaled); a heading in small capitals stays in the look's face. Its
   letters as written, never spaced, in capitals or made bold or slanted where its maker drew none; small capitals in it in a book face;
   Mrs Saint Delafield's word spaces opened, and Great Vibes' */
.tf-pinyon :is(.poem-title, .dateline, .essay-subhead){font-family:"Pinyon Script", "Libre Caslon Text", Georgia, serif}
.tf-swash :is(.poem-title, .dateline, .essay-subhead){font-family:"Garamond Swash", "EB Garamond", Garamond, serif}
.tf-tangerine :is(.poem-title, .dateline, .essay-subhead){font-family:"Tangerine", "EB Garamond", Garamond, serif; font-weight:700}
.tf-delafield :is(.poem-title, .dateline, .essay-subhead){font-family:"Mrs Saint Delafield", "Libre Caslon Text", Georgia, serif}
.tf-vibes :is(.poem-title, .dateline, .essay-subhead){font-family:"Great Vibes", "Libre Caslon Text", Georgia, serif}
.f2-pinyon .f2{font-family:"Pinyon Script", "Libre Caslon Text", Georgia, serif}
.f2-swash .f2{font-family:"Garamond Swash", "EB Garamond", Garamond, serif}
.f2-tangerine .f2{font-family:"Tangerine", "EB Garamond", Garamond, serif}
.f2-delafield .f2{font-family:"Mrs Saint Delafield", "Libre Caslon Text", Georgia, serif}
.f2-vibes .f2{font-family:"Great Vibes", "Libre Caslon Text", Georgia, serif}
:is(.tf-pinyon, .tf-swash, .tf-tangerine, .tf-delafield, .tf-vibes) :is(.poem-title, .dateline, .essay-subhead){font-style:normal; text-transform:none; letter-spacing:normal; font-variant-caps:normal; font-synthesis:small-caps}
:is(.f2-pinyon, .f2-swash, .f2-tangerine, .f2-delafield, .f2-vibes) .f2{font-synthesis:small-caps}
.tf-delafield :is(.poem-title, .dateline, .essay-subhead), .f2-delafield .f2{word-spacing:.15em}
.tf-vibes :is(.poem-title, .dateline, .essay-subhead), .f2-vibes .f2{word-spacing:.12em}
:is(.tf-pinyon, .tf-delafield, .tf-vibes) :is(.poem-title, .dateline, .essay-subhead) :is(.sc, .uc), :is(.f2-pinyon, .f2-delafield, .f2-vibes) .f2 :is(.sc, .uc){font-family:"Libre Caslon Text", Georgia, serif; word-spacing:normal}
:is(.tf-swash, .tf-tangerine) :is(.poem-title, .dateline, .essay-subhead) :is(.sc, .uc), :is(.f2-swash, .f2-tangerine) .f2 :is(.sc, .uc){font-family:"EB Garamond", Garamond, serif; word-spacing:normal}
.tf-tangerine :is(.poem-title, .dateline, .essay-subhead) :is(.sc, .uc){font-weight:400}   /* a book face's own weight under its bold */

/* under the poem it reads, in its room (build.py → heard_under): at the foot of its words, on their own left edge, as the mock places it;
   or just after its move, where the words lie over a picture */
.heard-in{margin:clamp(22px,4vh,40px) 0 0; width:min(30rem, 100%); font-size:1rem; line-height:normal; text-align:left; padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
.heard-in .st-player{max-width:none}
.heard-under{margin:clamp(18px,3vh,32px) auto 0; width:min(30rem, calc(100% - 2 * var(--pad, 20px))); padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
.heard-under .st-player{max-width:none}