/* 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:"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 */
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}
.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 */
.poem-title{margin:0 0 .8em; font:italic 400 .88em/1.3 var(--display); color:var(--soft)}
.verse{margin:0}
.verse span{display:block; padding-left:1.6em; text-indent:-1.6em}
.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 .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%} }
}}

/* 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 .verse span{padding-left:0; text-indent:0}

/* 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:2 / 7; 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:8 / 12; 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} }

/* ── 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(26rem,34%); margin:-14% 0 0 5%; font:400 clamp(1rem,1.35vw,1.2rem)/1.55 var(--display)}
@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:26px 0 0} }

/* 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 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)}
.mv-stair .steps{position:relative; max-width:1240px; margin:0 auto; 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:absolute; left:2%; bottom:0; width:min(24rem,40%); font:400 clamp(1rem,1.35vw,1.2rem)/1.55 var(--display)}
@media (max-width:700px){ .mv-stair .steps{aspect-ratio:4/5} .mv-stair img{left:var(--px); top:var(--py); width:44%}
  .mv-stair .words{position:static; 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} }

/* ── 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:34ch; font:400 clamp(1.45rem,2.9vw,2.45rem)/1.35 var(--display)}
@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:44ch; font:400 clamp(1.15rem,1.85vw,1.5rem)/1.5 var(--display)}
.mv-initial :is(.poem-title + .verse, .poem > .verse:first-child) span:nth-child(-n+2){padding-left:0; text-indent:0}
.mv-initial :is(.poem-title + .verse, .poem > .verse:first-child) span:first-child::first-letter{float:left; font-size:3.9em; line-height:.8; padding:.08em .1em 0 0; color:var(--rubric)}
.mv-initial :is(.poem-title + .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:italic 400 clamp(1.05rem,1.4vw,1.3rem)/1.45 var(--display)}
@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 img{float:left; width:44%; aspect-ratio:1; object-fit:cover; clip-path:circle(50%); shape-outside:circle(50%); shape-margin:1.4rem; margin:0 1.2rem .6rem 0}
.mv-around .poem{font:400 clamp(1.1rem,1.6vw,1.35rem)/1.55 var(--display)}
.mv-around :is(.poem-title + .verse, .poem > .verse:first-child) span{padding-left:0; text-indent:0}   /* beside the float, lines start flush */
.mv-around .wrap::after{content:""; display:block; clear:both}
@media (max-width:700px){ .mv-around img{width:48%; shape-margin:.8rem} }

/* 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(38ch, 62%); 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:1fr 1px 1fr; align-items:center; max-width:1240px; 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:28rem; 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:italic 400 clamp(1rem,1.3vw,1.15rem)/1.55 var(--display)}
.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; letter-spacing:.06em; color:var(--soft)}
.mv-epigraph .poem-title::before{content:"— "}
@media (max-width:700px){ .mv-epigraph .poem{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 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:62%; top:64%; width:min(26rem, 32%); 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}
.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 .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}

[hidden]{display:none!important}