/* The moves, 7–24. Each page sets its own --ground, --ink, --soft and --accent (measured from its pictures by
   tools/build.py); everything below draws from those. Every scroll-linked effect is an extra: without support, or
   with reduced motion, each move is complete and still. */
@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(--display)}
:root{--display:"Newsreader","Iowan Old Style",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --hand:"Caveat","Bradley Hand","Segoe Print",cursive; --pad:clamp(16px,4vw,64px)}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
section{position:relative}
.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}
/* the tools, bottom right. No backdrop blur: a blurred fixed layer is redrawn on every frame of a scroll. */
.tools{position:fixed; z-index:9; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); display:flex; gap:8px}
.tools button, .sheet .row button{font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:10px 13px;
  border-radius:20px; cursor:pointer; color:var(--ink); border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
  background:color-mix(in srgb,var(--ground) 94%,transparent)}
.tools .change[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--ground)}
button:focus-visible, a:focus-visible, .strip:focus-visible, img[data-slot]:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.mono{font:500 11px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase}

/* a poem, whole: its title, then its lines and stanzas as the poet broke them. A line longer than the measure wraps
   under itself with a hanging indent, the way verse is printed, so a line is never mistaken for two. */
.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}

/* the words that move down the page with the pictures */
.pair-words{grid-column:1 / -1; max-width:42rem; margin:clamp(26px,5vh,52px) auto 0; font:400 clamp(1.05rem,1.5vw,1.3rem)/1.55 var(--display)}
/* pictures may lean; words stand upright on the page itself — a tilted paper card is the scrapbook's (RESERVE.md) */
.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)}
.jump-words{max-width:30rem; font:400 clamp(1.05rem,1.5vw,1.3rem)/1.5 var(--display)}
.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)}
.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)}
.overlap-words{grid-column:1 / 6; grid-row:2; margin-top:clamp(24px,4vh,44px); font:400 clamp(1.05rem,1.5vw,1.3rem)/1.5 var(--display)}

/* printers' marks (research/2026-10-10-printers-marks.md): type, upright, in ink or rubric red, one to a pause.
   Crisp letters throughout — the worn Fell revivals are in RESERVE.md. */
:root{--rubric:#9a3324}
body[data-page="b"]{--rubric:#e48d70}
.mark{font-family:"EB Garamond","Apple Symbols","Segoe UI Symbol",var(--display),serif; line-height:1; color:var(--ink)}
.pause{display:grid; place-items:center}
.pause .fleuron{font-size:2.3rem}
.turn .leaves{font-size:1.55rem; letter-spacing:.4em; margin:0 -.4em clamp(18px,3vh,30px) 0}
.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)}
.mark-pause{min-height:36svh; display:grid; place-items:center}
.mark-pause .asterism{font-size:2.5rem}
.colophon-end{display:grid; justify-items:center; text-align:center; padding:clamp(90px,16vh,170px) var(--pad) clamp(40px,8vh,90px)}
.colophon-end .double{width:min(13rem,42%); border-top:2.5px solid var(--ink); padding-top:3px; margin-bottom:1.8em}
.colophon-end .double::after{content:""; display:block; border-top:.75px solid var(--ink)}
.colophon-end .poem{max-width:27rem; font:400 clamp(.92rem,1.1vw,1.02rem)/1.65 var(--display)}
.colophon-end .verse span{padding-left:0; text-indent:0}
.colophon-end .device{display:grid; justify-items:center; gap:.55em; margin-top:2em}
.colophon-end .roundel{width:3.6rem; height:3.6rem; border:1.5px solid var(--ink); border-radius:50%; display:grid; place-items:center;
  outline:.75px solid var(--ink); outline-offset:3px}
.colophon-end .roundel span{font:italic 400 1.9rem/1 var(--display); margin-top:-.1em}
.colophon-end .device .mark{font-size:1rem}

/* 7 · the reveal — a window onto the picture opens to the whole screen as you scroll */
.reveal{height:170svh; view-timeline-name:--reveal}
.reveal .stage{position:sticky; top:0; height:100svh; overflow:hidden}
.reveal img{width:100%; height:100%; object-fit:cover}
.reveal .shade{display:none}
/* the window opens by sliding four ground-colored panels away: transforms only, which the graphics chip moves
   without redrawing the picture (a clip-path here repainted the whole screen on every frame) */
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .reveal .shade{display:block; position:absolute; z-index:2; background:var(--ground); animation:linear both;
    animation-timeline:--reveal; animation-range:contain 0% contain 75%}
  .reveal .shade.top{left:0; right:0; top:0; height:30%; animation-name:shade-up}
  .reveal .shade.bottom{left:0; right:0; bottom:0; height:18%; animation-name:shade-down}
  .reveal .shade.left{left:0; top:0; bottom:0; width:46%; animation-name:shade-left}
  .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}}
  @keyframes fade-away{to{opacity:0}}
}}

/* 8 · the drop initial — the words open like a book */
.initial{padding:clamp(80px,16vh,180px) var(--pad); display:grid; justify-items:center}
.initial .poem{max-width:44ch; font:400 clamp(1.15rem,1.85vw,1.5rem)/1.5 var(--display)}
/* lines beside a float start flush: a hanging indent would pull them under the letter or the picture */
.initial .poem-title + .verse span:nth-child(-n+2), .around .verse span{padding-left:0; text-indent:0}   /* only the first stanza meets the letter */
.around .verse + .verse span{padding-left:1.6em; text-indent:-1.6em}   /* the second stanza is clear of the picture */
.initial .poem-title + .verse span:first-child::first-letter{float:left; font-size:3.9em; line-height:.8; padding:.08em .1em 0 0; color:var(--rubric)}
.initial .poem-title + .verse span:first-child::first-line{font-variant-caps:all-small-caps; letter-spacing:.07em; font-weight:500}   /* the small-capital lead-in */

/* 9 · the pair — two read as one */
.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)}

/* 10 · the scatter — prints dealt on a table */
.scatter{padding:clamp(56px,10vh,110px) var(--pad)}
.table{position:relative; max-width:1280px; margin:0 auto; aspect-ratio:16/9}
.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)}

/* 11 · the marginal note — words beside the picture, carrying half of it */
.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)}
.margin figure{grid-column:1/10; margin:0}
.margin .note{grid-column:10/13; align-self:end; margin:0; padding-top:14px; border-top:1px solid var(--soft);
  font:italic 400 clamp(1.05rem,1.4vw,1.3rem)/1.45 var(--display)}

/* 12 · the salon hang — many sizes at many heights, no one masterpiece */
.salon{display:flex; flex-direction:column; align-items:center; gap:1.8vw; padding:clamp(60px,10vh,120px) var(--pad)}
.salon .row{display:flex; justify-content:center; align-items:center; gap:1.8vw}
.salon img{height:var(--h); width:auto}

/* 13 · the long pause */
.pause{min-height:95svh}

/* 14 · the scale jump */
.jump{display:grid; justify-items:center; gap:12svh; padding:clamp(40px,8vh,80px) var(--pad) 26svh}
.jump .big{width:min(100%,1080px)}
.jump .small{width:clamp(64px,7vw,96px)}

/* 15 · the detail — the same picture, close */
.detail{height:86svh; overflow:hidden}
.detail img{width:100%; height:100%; object-fit:cover; scale:2.7; transform-origin:var(--fx) var(--fy); object-position:var(--fx) var(--fy)}

/* 16 · the turn — a small picture grows into the next page */
.turn{min-height:80svh; display:grid; place-content:center; justify-items:center; gap:18px; padding:60px var(--pad); text-align:center}
.turn a{display:grid; justify-items:center; gap:14px; text-decoration:none}
.turn img{width:clamp(120px,14vw,190px); view-transition-name:opening}
.turn .next{font:italic 400 1.4rem/1.2 var(--display)}

/* the opening of chapter II — the turn lands here */
.open{height:100svh; min-height:420px; overflow:hidden}
.open img{width:100%; height:100%; object-fit:cover; view-transition-name:opening}
.open .title{position:absolute; margin:0; color:var(--calm-ink); max-width:min(34rem, calc(100% - 2 * var(--pad)));
  font:400 clamp(1.05rem,1.6vw,1.4rem)/1.45 var(--display); text-shadow:0 1px 16px rgba(0,0,0,.45)}
.open .title .poem-title{color:var(--calm-ink); opacity:.85}

/* 17 · the drift — layers travel at different speeds */
.drift{height:165svh; max-width:1400px; margin:0 auto; view-timeline-name:--drift}
.drift img{position:absolute; left:var(--x); top:var(--y); width:var(--w)}
@media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .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)}}
}}

/* 18 · the overprint — the words inside the picture */
.over{height:100svh; min-height:440px; overflow:hidden}
.over img{width:100%; height:100%; object-fit:cover}
/* a whole poem set into the picture: a shade from the left edge keeps it legible without a box */
.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%)}
.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)}
.over .poem-title{color:var(--over-ink); opacity:.85}

/* 19 · the run-around — the words wrap the picture's outline */
.around{max-width:68ch; margin:0 auto; padding:clamp(70px,12vh,140px) var(--pad)}
.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}
.around .poem{font:400 clamp(1.1rem,1.6vw,1.35rem)/1.55 var(--display)}
.around::after{content:""; display:block; clear:both}

/* 20 · the overlap — one picture laid across another */
.overlap{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); max-width:1240px; margin:0 auto; padding:clamp(60px,10vh,120px) var(--pad)}
.overlap .a{grid-column:1/8; grid-row:1}
.overlap .b{grid-column:6/12; grid-row:1; margin-top:22%; outline:clamp(6px,.8vw,12px) solid var(--ground); position:relative}

/* 21 · the filmstrip — a sideways aside */
.film{padding:clamp(56px,9vh,100px) 0}
.film .hint{padding:0 var(--pad) 12px; color:var(--soft)}
.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}
.strip img{height:62svh; width:auto; max-width:none; scroll-snap-align:center; flex:none}

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

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

/* 24 · the scrapbook layer — prints taped to the page, a note in hand */
.book{background:var(--paper); color:#2b2620; padding:clamp(70px,12vh,140px) var(--pad)}
.book .label{color:#7b7062}
.book .leaf{position:relative; max-width:1100px; margin:0 auto; aspect-ratio:16/10}
.book figure{position:absolute; margin:0; left:var(--x); top:var(--y); width:var(--w); rotate:var(--r); background:#fbf8f2; padding:clamp(6px,.8vw,12px);
  box-shadow:0 1px 2px rgba(0,0,0,.15), 0 8px 18px -10px rgba(0,0,0,.4)}
.book figure::before, .book figure::after{content:""; position:absolute; width:34%; height:clamp(14px,1.8vw,24px);
  background:rgba(232,220,188,.72); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.book figure::before{top:-2%; left:-6%; rotate:-38deg}
.book figure::after{bottom:-1%; right:-6%; rotate:-34deg}
.book .hand{position:absolute; left:var(--x); top:var(--y); margin:0; rotate:-4deg; max-width:30ch; font:500 clamp(1.05rem,1.6vw,1.4rem)/1.15 var(--hand); color:#3a3128}

/* the end */
.end{min-height:70svh; display:grid; align-items:end; padding:0 var(--pad) 56px}
.end p{margin:0; max-width:62ch; font:500 11px/1.8 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
.end a{color:var(--accent)}

/* the phone forms, authored once */
@media (max-width:700px){
  .scatter-words{width:auto; margin:26px 0 0}
  .drift-words{left:var(--pad); right:var(--pad); width:auto; top:auto; bottom:6%}
  .drift .catchword{bottom:1.2%}
  .overlap-words{grid-column:1 / 13}
  .pair{gap:10px; padding-inline:12px}
  .table{aspect-ratio:3/4}
  .print{left:var(--px); top:var(--py); width:var(--pw); rotate:var(--pr)}
  .margin figure{grid-column:1/13}
  .margin .note{grid-column:4/13; margin-top:18px}
  .salon{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px}
  .salon .row{display:contents}
  .salon .desk{display:none}
  .salon img{height:var(--ph)}
  .detail{height:70svh}
  .drift{height:150svh}
  .drift img{left:var(--px); top:var(--py); width:var(--pw)}
  .around img{width:48%; shape-margin:.8rem}
  .overlap .a{grid-column:1/11}
  .overlap .b{grid-column:4/13; margin-top:34%}
  .strip img{height:52svh}
  .fracture img{width:56%; margin-left:14%}
  .fracture .after{padding-left:8%}
  .over .poem{max-width:none; right:var(--pad); top:auto; bottom:9svh; translate:none}
  .over::before{background:linear-gradient(0deg, rgba(10,6,4,.7) 0%, rgba(10,6,4,.4) 55%, rgba(10,6,4,0) 85%)}
  .book .leaf{aspect-ratio:3/4}
  .book figure{left:var(--px); top:var(--py); width:var(--pw)}
  .book .hand{left:var(--hx); top:var(--hy)}
}

/* ── changing pictures: the first, plainest editor ───────────────────────────────────────────────── */
body.editing img[data-slot]{cursor:pointer; outline:2px dashed color-mix(in srgb,var(--accent) 75%,transparent); outline-offset:4px}
body.editing img[data-slot]:hover{outline:3px solid var(--accent)}
.hintbar{position:fixed; z-index:9; left:50%; top:calc(14px + env(safe-area-inset-top,0px)); translate:-50% 0; margin:0;
  font:italic 400 1.05rem/1.3 var(--display); background:var(--ink); color:var(--ground); padding:9px 18px; border-radius:22px;
  box-shadow:0 6px 24px -8px rgba(0,0,0,.4); white-space:nowrap}
.sheet{position:fixed; z-index:10; left:0; right:0; bottom:0; height:min(62svh,560px); background:var(--ground); color:var(--ink);
  border-radius:18px 18px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.28); padding:18px var(--pad) calc(14px + env(safe-area-inset-bottom,0px));
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; translate:0 105%; transition:translate .28s ease; visibility:hidden}
.sheet.open{translate:0 0; visibility:visible}
.sheet h2{font:italic 400 1.6rem/1.1 var(--display); margin:0}
.sheet .sub{margin:4px 0 0; color:var(--soft)}
.thumbs{overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; align-content:start; padding:4px}
.thumbs button{padding:6px; border:0; border-radius:6px; cursor:pointer; aspect-ratio:1; display:grid; place-items:center;
  background:color-mix(in srgb,var(--ink) 7%,transparent)}
.thumbs button:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.thumbs button[aria-current="true"]{outline:3px solid var(--accent)}
.thumbs img{max-width:100%; max-height:100%; width:auto; height:auto}
.sheet .row{display:flex; align-items:center; gap:10px}
.sheet .row .status{flex:1; color:var(--soft)}
.sheet .row .done{background:var(--accent); border-color:var(--accent); color:var(--ground)}
@media (prefers-reduced-motion:reduce){ .sheet{transition:none} }

/* on a phone the page opens on a small window in the middle of the ground, nothing else */
@media (max-width:700px){ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){
  .reveal .shade.top{height:31%} .reveal .shade.bottom{height:27%} .reveal .shade.left{width:21%} .reveal .shade.right{width:21%}
}}}

/* while editing, the flipbook lays its pages side by side: stacked, only the top picture could be clicked */
body.editing .flip{height:auto; padding:clamp(56px,9vh,100px) var(--pad)}
body.editing .flip .frame{position:static; height:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:1100px; margin:0 auto; place-items:stretch}
body.editing .flip img{grid-area:auto; width:100%; animation:none; opacity:1}

/* ── rewriting words: every block of words can be clicked and rewritten in place ─────────────────────── */
body.editing [data-text]{cursor:text; outline:2px dashed color-mix(in srgb,var(--accent) 75%,transparent); outline-offset:6px}
body.editing [data-text]:hover{outline:3px solid var(--accent)}
body.editing [data-text] .poem-title[hidden]{display:block}
body.editing [data-text] .poem-title:empty::before{content:"Add a title"; opacity:.5}
[data-text].writing{outline:3px solid var(--accent); outline-offset:6px; cursor:auto}
.writing .poem-title, .writing .write{outline:none; caret-color:var(--accent)}
.writing .write{white-space:pre-wrap; min-height:3em}
.writing .verse, .writing img{display:none}
.writebar{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:16px}
.writebar .hint{flex:1; font:500 11px/1.4 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--soft)}
.writebar button{font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:9px 12px; border-radius:20px; cursor:pointer;
  color:var(--ink); border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); background:color-mix(in srgb,var(--ground) 94%,transparent)}
.writebar .keep{background:var(--accent); border-color:var(--accent); color:var(--ground)}
.over .writebar .hint, .open .writebar .hint{color:var(--over-ink, var(--ink))}
@media (max-width:700px){ .thumbs{grid-template-columns:repeat(3,minmax(0,1fr))} .hintbar{font-size:.95rem; white-space:normal; width:max-content; max-width:90vw} }

/* the detail's crop, moved by hand while changing pictures */
.detail .drag-hint{display:none; position:absolute; z-index:4; left:50%; bottom:18px; translate:-50% 0; margin:0;
  background:var(--ink); color:var(--ground); padding:8px 14px; border-radius:18px; white-space:nowrap}
body.editing .detail .drag-hint{display:block}
body.editing .detail img{cursor:grab; touch-action:none; user-select:none; -webkit-user-drag:none}
body.editing .detail img.dragging{cursor:grabbing}
body.editing .detail::after{content:""; position:absolute; inset:6px; z-index:3; pointer-events:none;
  border:2px dashed color-mix(in srgb,var(--accent) 75%,transparent)}
body.editing .detail img[data-slot]{outline:none}

[hidden]{display:none!important}