/* The pages around the moves (the moves, the book, the chapter) and the editor. Plain controls in the page's own
   colors; no blur behind them (a blurred fixed layer is redrawn on every frame of a scroll). */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}   /* a phone, or the browser inside Facebook's app, never enlarges the words of its own accord */
.pages{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin:0 0 28px; color:var(--soft)}
.pages a{color:var(--soft); text-decoration:none}
/* the seal and the name first, so an artist arriving from loupe knows they are in stanza (his word, 2026-10-11); the
   wordmark takes the look's face (looks/<id>.css, laid after this file), not the nav's capitals */
:where(.pages) .wordmark{display:inline-flex; align-items:center; gap:.4em; margin-right:14px; text-transform:none;
  letter-spacing:.01em; font-variant-caps:normal}
.pages a.wordmark{color:var(--ink)}
.pages .wordmark .seal{flex:none; width:auto; height:1.2em}
/* the writer's own site, by name, after stanza's mark and a hairline, as loupe's bar has it (his word, 2026-10-13: "site link, yes") */
:where(.pages) .ident{padding-left:14px; border-left:1px solid color-mix(in srgb,var(--ink) 24%,transparent); font:400 1.02rem/1.2 var(--display);
  text-transform:none; letter-spacing:.01em; font-variant-caps:normal; color:var(--ink); max-width:28ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
:where(.pages) .ident:hover{color:var(--accent)}
.pages a[aria-current]{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
/* Writing's three kinds, under its title (build.py → writing_tabs; his word, 2026-10-13: "1 ok") */
.tabs{display:flex; flex-wrap:wrap; gap:6px 22px; margin:0 0 26px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase}
.tabs a{color:var(--soft); text-decoration:none; padding-bottom:3px}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current]{color:var(--ink); border-bottom:1px solid var(--ink)}
/* the way to Examples, from the moves page (his "follow your recs", 2026-10-13): Examples left the bar */
.vocab .head .go{margin:18px 0 0}
.vocab .head .go a{color:var(--accent); font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
/* the account, online, apart at the bar's right, in the look's own face as the wordmark is, not the bar's capitals (his
   word, 2026-10-12: "set in a different treatment and aligned right") */
:where(.pages) .acct{margin-left:auto; display:inline-flex; flex-wrap:wrap; gap:4px 18px; font:italic 400 1.02rem/1.2 var(--display);
  text-transform:none; letter-spacing:.01em; font-variant-caps:normal}
h1{font:italic 400 clamp(2.4rem,6vw,3.8rem)/1.05 var(--display); margin:0 0 14px}
.lede{max-width:44rem; margin:0 0 34px; font-size:1.12rem; color:var(--soft); text-wrap:balance}   /* a short lede never leaves a word alone */
.new{display:inline-block; margin-left:.5em; padding:2px 6px 1px; border-radius:9px; vertical-align:2px; font:500 9.5px/1.3 var(--mono);
  letter-spacing:.08em; text-transform:uppercase; font-style:normal; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}

/* "Add to my toolkit": one mark on the move itself (a heart, as Squarespace saves a section) */
.keep{display:inline-flex; align-items:center; gap:.45em; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  padding:9px 13px 9px 11px; border-radius:20px; cursor:pointer; color:var(--ink); white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); background:color-mix(in srgb,var(--ground) 94%,transparent)}
.keep .heart{font:400 15px/1 var(--display); color:var(--accent)}
.keep.on{background:var(--accent); border-color:var(--accent); color:var(--ground)}
.keep.on .heart{color:var(--ground)}

/* ── the moves: families of cards, each with its preview ────────────────────────────────────────────── */
.vocab{max-width:1320px; margin:0 auto; padding:44px var(--pad) 90px}
/* ── a phone (his "your recs", 2026-10-14, of six fixes to My poems on his iPhone): the bar the mark, the page you're on and Menu, which
   opens the rest as a list; the page starting at the top; Writing's tabs leading its pages, the heading that repeats the bar folded
   away; each piece's first lines, Read on beneath (library.js); room at the foot for Compose; Make a manuscript a quiet link ─────── */
.pages .menu{display:none}
@media (max-width:640px){
  .vocab:not(.public){padding-top:14px; padding-bottom:120px}   /* the app's pages; stanza.pictures/moves as it was */
  .pages:has(.menu){flex-wrap:wrap; column-gap:16px; row-gap:0; margin-bottom:20px}
  .pages:has(.menu) > :not(.wordmark):not(.menu):not([aria-current]){display:none}
  .pages:has(.menu) .wordmark{margin-right:0}
  .pages .menu{display:inline-block; margin-left:auto; order:9; padding:8px 0 8px 12px; background:none; border:0; color:var(--ink); cursor:pointer;
    font:inherit; letter-spacing:inherit; text-transform:inherit}
  .pages:has(.menu).open > :not(.wordmark):not(.menu){display:flex; order:10; flex:0 0 100%; padding:13px 0; margin:0; border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
  .pages:has(.menu).open > :not(.wordmark):not(.menu):first-of-type{margin-top:12px}
  .pages.open .ident{padding-left:0; border-left:0; max-width:none}
  .pages.open .acct{gap:4px 22px}
  body:is([data-page="poems"],[data-page="essays"],[data-page="notes"],[data-page="books"],[data-page="readings"]) .vocab > h1{display:none}
  .library .row button.ms-open{background:none; border:0; border-bottom:1px solid currentColor; border-radius:0; padding:0 0 2px; color:var(--accent)}
  .mine > li:not(.whole) > [data-mine]{max-height:15.5em; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent); mask-image:linear-gradient(to bottom,#000 72%,transparent)}
}
.read-on{display:none}
@media (max-width:640px){
  .read-on:not([hidden]){display:inline-block; width:max-content; justify-self:start; align-self:flex-start; text-align:left; margin:6px 0 4px; padding:0 0 2px; background:none; border:0; border-bottom:1px solid currentColor; color:var(--accent);
    font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer}
}
.vocab.public, .book-head.public{padding-top:clamp(96px,14vh,140px)}   /* below the site's strip of links */
.toolkit{margin:0 0 54px; padding:22px 0 24px; border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.tk-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.tk-head h2{font:italic 400 1.7rem/1.1 var(--display); margin:0}
.tk-head .count{color:var(--soft)}
.tk-head .go{margin-left:auto; font:italic 400 1.15rem/1.2 var(--display); color:var(--accent)}
.toolkit .empty{margin:0; color:var(--soft)}
.chips{list-style:none; margin:0; padding:2px 0 8px; display:flex; gap:12px; overflow-x:auto}
.chips a{display:grid; gap:6px; width:150px; text-decoration:none; font:italic 400 .98rem/1.2 var(--display)}
.chips .pv{width:150px; aspect-ratio:3/2; object-fit:cover; border-radius:4px; background:color-mix(in srgb,var(--ink) 8%,transparent)}
.family{margin:0 0 56px}
.family h2{font:italic 400 clamp(1.7rem,3vw,2.2rem)/1.1 var(--display); margin:0 0 4px}
.family .fam-about{margin:0 0 20px; color:var(--soft)}
/* the visitor's moves page: six doors, each family folded until its door or its heading is opened (his pick, 2026-10-14: "B for the public
   moves page"; sketches/2026-10-14-moves-grouped) */
.vocab .doors{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 22px; margin:6px 0 64px}
.vocab .doors a{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--ink)}
.vocab .doors img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:5px; background:color-mix(in srgb,var(--ink) 8%,transparent)}
.vocab .doors a:is(:hover, :focus-visible) img{outline:2px solid var(--accent); outline-offset:3px}
.vocab .doors a:focus-visible{outline:none}
.vocab .doors .c{font:500 .72rem/1.3 var(--mono, monospace); letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}
.vocab .doors .n{font:italic 400 1.45rem/1.15 var(--display)}
.vocab .doors .ab{color:var(--soft); font-size:.95rem; line-height:1.4}
.vocab details.fold{margin:0 0 28px; border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent); padding-top:18px}
.vocab details.fold > summary{list-style:none; cursor:pointer}
.vocab details.fold > summary::-webkit-details-marker{display:none}
.vocab details.fold:not([open]) .fam-head{margin-bottom:0}
.vocab details.fold > summary:hover h2{color:var(--accent)}
@media (max-width:700px){ .vocab .doors{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px} .vocab .doors .ab{display:none} }
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:30px 22px}
.card{display:flex; flex-direction:column; gap:8px}
.card .look{display:block; position:relative; text-decoration:none}
.card .pv{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:5px; background:color-mix(in srgb,var(--ink) 8%,transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pv.none{visibility:hidden}
.card .look:hover .pv{outline:2px solid var(--accent); outline-offset:3px}
.card .name{margin:4px 0 0; font:italic 400 1.35rem/1.15 var(--display)}
.card .feel, .card .what{margin:0}
.card .feel{font-style:italic}
.card .feel i{font-size:1.02rem}
.card .what{font-size:.93rem; line-height:1.45; color:var(--soft); flex:1}
.card .keep{align-self:flex-start; margin-top:4px}
.card.kept .pv{outline:3px solid var(--accent); outline-offset:3px}

/* ── the book: every move, full size, under a heading that names it ─────────────────────────────────── */
.book-head{max-width:1320px; margin:0 auto; padding:44px var(--pad) 10px}
.book-head .families a{color:var(--soft)}
.book-head .go{margin:14px 0 20px}   /* Whitman's home, a writer's (his word, 2026-10-13: "link the whitman page on the examples page") */
.book-head .go a{color:var(--accent); font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
h2.fam{margin:0; padding:clamp(60px,10vh,110px) var(--pad) 10px; font:italic 400 clamp(2rem,4vw,3rem)/1 var(--display); color:var(--ink)}
.spec{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:0 auto; max-width:1320px;
  padding:clamp(40px,7vh,80px) var(--pad) 14px; border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.spec h3{margin:0 0 4px; font:italic 400 1.6rem/1.15 var(--display)}
.spec p{margin:0; max-width:46rem; color:var(--soft)}
.spec p i{color:var(--ink)}
body[data-page="book"] .label{display:none}
/* the list of plates, and the sheet and the key, without a heading open on a rule of their own: in the book the move's head rules
   it off already, and the two stood one above the other (his note, 2026-10-15: "a bit awkward here with the double rules") */
body[data-page="book"] .plates-head:has(> .head[data-empty])::after{content:none}
.book-end{padding:80px var(--pad) 90px; text-align:center; font:italic 400 1.15rem/1.4 var(--display)}
/* Make a room (his words, 2026-10-15: "build it … 2 button with try on"): the poem in each move that can hold it, each on the ground its
   room would open on, under its name and the button that begins the room with it (build.py → tryon_page) */
.try-top .try-kicker{margin:30px 0 6px; color:var(--soft)}
.try-top .lede{max-width:44rem}
.try-top .try-room{margin:12px 0 0}
.try-top .try-room a, .try-top .go a{color:var(--accent)}
.try-one{padding-bottom:clamp(30px,6vh,70px)}
.try-head .begin{font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:11px 15px; border-radius:20px; cursor:pointer;
  background:var(--accent); border:1px solid var(--accent); color:var(--ground)}
.try-head .begin:hover:not(:disabled){filter:brightness(1.08)}
.try-head .begin:disabled{opacity:.6; cursor:progress}
/* a move whose pictures move only as the page scrolls (build.py → SCROLLED), left out where they can't, its count with it */
.try-top .n-still{display:none}
@supports not (animation-timeline: view()){ .try-one.try-scrolled, .try-top .n-all{display:none} .try-top .n-still{display:inline} }
@media (prefers-reduced-motion:reduce){ .try-one.try-scrolled, .try-top .n-all{display:none} .try-top .n-still{display:inline} }
.try-said{max-width:1320px; margin:10px auto 0; padding:0 var(--pad); color:var(--rubric)}
/* the ways into the room, after the moves that hold the piece, under a heading of their own as the book heads a family (h2.fam); a line
   beneath the lede leads down to them (build.py → tryon_page; moves.py → opens) */
.try-top .try-to-ways{margin:12px auto 0; max-width:44rem; color:var(--soft); text-wrap:balance}
.try-top .try-to-ways a{color:var(--accent)}
.try-ways-head{max-width:1320px; margin:0 auto; padding:clamp(60px,10vh,110px) var(--pad) 6px}
.try-ways-head h2{margin:0; font:italic 400 clamp(2rem,4vw,3rem)/1 var(--display); color:var(--ink)}
.try-ways-head p{margin:10px 0 0; max-width:44rem; color:var(--soft)}
.try-head .opens{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); padding:11px 0}   /* the way in the room has */

/* ── the chapter, and its tools ─────────────────────────────────────────────────────────────────────── */
.tools{position:fixed; z-index:30; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); display:flex; gap:8px; align-items:center}
.tools button, .tools .tool-link, .blank a.fill, .ch .acts button, .chapters-page .row button, .library .acts button, .library .row button, .sheet .row button, .dock button, .movebar button, .addhere button, .blank button, .poets-panel button{font:500 11px/1 var(--mono);
  letter-spacing:.06em; text-transform:uppercase; padding:10px 13px; border-radius:20px; cursor:pointer; color:var(--ink); text-decoration:none;
  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"], .blank .add-first, .dock .go, .poets-panel .go, .poets-panel .choices button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--ground)}
.blank{min-height:86svh; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; padding:60px var(--pad)}
.blank p{margin:0; color:var(--soft)}
.blank .row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:14px 0 8px}

.hintbar{position:fixed; z-index:30; left:0; right:0; margin:0 auto; width:max-content; max-width:calc(100vw - 24px);
  top:calc(14px + env(safe-area-inset-top,0px)); font:italic 400 1.02rem/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); text-align:center}

/* each move, while editing: its name and what can be done to it, top left */
.movebar{display:none}
body.editing .movebar{display:flex; position:absolute; z-index:12; top:12px; left:12px; right:12px; flex-wrap:wrap; gap:6px; align-items:center; pointer-events:none}
body.editing .movebar > *{pointer-events:auto}
/* a poem and its room stay joined (his words, 2026-10-15): its poem reads differently now, said on the move's bar, with its two answers */
.movebar .drift{flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px}
.movebar .drift-say{font:italic 400 .95rem/1.2 var(--display); padding:7px 12px; border-radius:16px; background:var(--accent); color:var(--ground)}
.movebar .mname{font:italic 400 1.02rem/1 var(--display); padding:8px 13px; border-radius:20px; background:var(--ink); color:var(--ground)}
.movebar button{padding:8px 11px; background:var(--ground); box-shadow:0 2px 10px -4px rgba(0,0,0,.35)}
.movebar button:disabled{opacity:.4; cursor:default}
body.editing .mv{outline:1px dashed color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:-1px}
body.editing .mv.lit{outline:3px solid var(--accent); outline-offset:-3px; transition:outline-color 1.2s}

/* between moves, while editing: a place to add one */
.addhere{display:none}
body.editing .addhere{display:flex; align-items:center; gap:12px; padding:14px var(--pad); background:var(--ground)}
/* a turn with no room after it says, while the room is edited, what would open its door (build.py → LAST_DOOR) */
.mv-turn .door-say{display:none}
body.editing .mv-turn .door-say{display:block; max-width:28em; margin:14px auto 0; text-align:center; font-style:italic; color:var(--ink); opacity:.7}
.addhere::before, .addhere::after{content:""; flex:1; border-top:1px dashed color-mix(in srgb,var(--ink) 35%,transparent)}
.addhere button{background:var(--ground)}

body.editing img[data-n]{cursor:pointer; outline:2px dashed color-mix(in srgb,var(--accent) 75%,transparent); outline-offset:4px}
body.editing img[data-n]:hover{outline:3px solid var(--accent)}
body.editing .mv-detail img[data-n]{outline:none; cursor:grab; touch-action:none; user-select:none; -webkit-user-drag:none}
body.editing .mv-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 .mv-detail .drag-hint{display:block; 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}
.mv-detail img.dragging{cursor:grabbing}

/* while editing, the stacked and moving moves lay themselves out so every picture can be clicked */
body.editing .mv-flip{height:auto; padding:clamp(56px,9vh,100px) var(--pad)}
body.editing .mv-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 .mv-flip img{grid-area:auto; width:100%; animation:none; opacity:1}
/* the reveal while editing lays itself out still: its name's page above the picture (or beneath it, as it is set), so the name can be
   clicked and rewritten, and the whole picture beneath it, its outline shown (his words, 2026-10-16: "i couldn't figure out how to edit "a
   new room" text anywhere" · "I couldnt find any way to replace the picture here") */
body.editing .mv-reveal{height:auto; padding-top:12px}
body.editing .mv-reveal > .movebar{position:relative; top:0; left:0; right:0; margin:0 12px}   /* its bar in the flow: on a phone it wraps, never over the name */
body.editing .mv-reveal .stage{position:static; height:auto; overflow:visible; display:flex; flex-direction:column; align-items:center;
  gap:6svh; padding:8svh var(--pad) 9svh}
body.editing .mv-reveal .stage > img{width:auto; height:auto; max-width:100%; max-height:76svh}
body.editing .mv-reveal .shade, body.editing .mv-reveal .still{display:none}
body.editing .mv-reveal .named .shade.top:has(.tp), body.editing .mv-reveal .named .shade.bottom:has(.tp){display:block; position:static;
  width:100%; height:auto; background:none; animation:none; translate:none}
body.editing .mv-reveal .stage .shade.top, body.editing .mv-reveal .stage > .tp[data-empty]{order:-1}
body.editing .mv-reveal .stage .tp{display:grid; position:static; padding:0}
body.editing .mv-reveal .stage > .tp[data-empty]{translate:none}
/* the round window's moves while editing lay themselves out still as well (his yes, 2026-10-21: "yes on a, b and c"): the reveal's round
   window as the straight one, its name's page above the whole picture (or beneath it); the iris its picture whole and its color beneath;
   the colophon closing on the room's first picture that picture, then the colophon, its words and mark to click */
body.editing .stage.round{container-type:normal}
body.editing .stage.round .win, body.editing .stage.round .win img{animation:none; scale:none; will-change:auto}
body.editing .mv-reveal .stage.round .win{position:static; width:auto; height:auto; border-radius:0; overflow:visible}
body.editing .mv-reveal .stage.round .win img{position:static; display:block; width:auto; height:auto; max-width:100%; max-height:76svh}
body.editing .mv-reveal .round .page:has(.tp){display:block; position:static; width:100%; height:auto; animation:none; translate:none; opacity:1}
body.editing .mv-reveal .round .page.top{order:-1}
body.editing .mv-iris{height:auto}
body.editing .mv-iris .stage{position:relative}
body.editing .mv-iris .turn{animation:none; opacity:0}
body.editing .mv-iris .still{display:block}
body.editing .mv-colophon.closes{height:auto}
body.editing .mv-colophon.closes .stage{position:static; height:auto; overflow:visible}
body.editing .mv-colophon.closes .win{position:relative; left:auto; top:auto; width:auto; height:60svh; border-radius:0}
body.editing .mv-colophon.closes .win img{position:static; width:100%; height:100%; opacity:1}
body.editing .mv-colophon.closes .colo{position:static; height:auto; padding:clamp(60px,10vh,110px) var(--pad); text-align:center}
body.editing .mv-colophon.closes :is(.ring, .device, .colo > *){animation:none; opacity:1; translate:none}
body.editing .mv-colophon.closes .ring{display:none}
body.editing .mv-colophon.closes .device{position:static; width:auto; height:auto; margin-top:2em}
body.editing .mv-colophon.closes .device .mark{font-size:1rem}

/* words, while editing: every block can be clicked; an empty one offers to take words */
body.editing [data-words]{cursor:text; outline:2px dashed color-mix(in srgb,var(--accent) 75%,transparent); outline-offset:6px}
body.editing [data-words]:hover{outline:3px solid var(--accent)}
body.editing [data-empty]{display:block; min-height:2.6em; min-width:12rem}
body.editing .words:has(> [data-empty]){display:block}
body.editing [data-empty]::before{content:"Click to add words"; font:italic 400 1rem/2.6 var(--display); opacity:.55; padding:0 .6em}
body.editing .mv-pin .passes[data-empty]{min-height:2.6em; margin-top:40svh}
[data-words].writing{outline:3px solid var(--accent) !important; outline-offset:6px; cursor:auto}
.writing .write, .writing .write-title{outline:none; caret-color:var(--accent); white-space:pre-wrap; tab-size:4}
.writing .write{min-height:3em}
.writing .write .sc{font-variant-caps:small-caps; letter-spacing:.04em}
.writing .write .md{font-weight:600}
.writing .write .uc{text-transform:uppercase; letter-spacing:.06em}   /* the poem's own type, as it will be drawn */
.writing .write .ls{letter-spacing:.16em}
/* the palette (his note, 2026-10-12: "more refined than a collection of pills"): one strip of glyphs in the display face,
   hairlines between its groups, the type the selection has filled in ink */
.dock .palette{display:inline-flex; align-items:stretch; border:1px solid color-mix(in srgb,var(--ink) 28%,transparent); border-radius:9px;
  overflow:hidden; background:var(--ground); flex:none}
.dock .palette .sep{width:1px; background:color-mix(in srgb,var(--ink) 22%,transparent)}
.dock .palette button.fmt{border:0; border-radius:0; margin:0; padding:0 9px; min-width:34px; height:32px; background:transparent; color:var(--ink);
  font:400 16px/1 var(--display); letter-spacing:0; text-transform:none; cursor:pointer}
.dock .palette button.fmt:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.dock .palette button.fmt[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
.dock .palette .fmt.b{font-weight:700} .dock .palette .fmt.i{font-style:italic}
.dock .palette .fmt.u{text-decoration:underline; text-underline-offset:3px}
.dock .palette .fmt.sc{font-variant-caps:small-caps; font-size:15px}
.dock .palette .fmt.uc{font-size:12px; letter-spacing:.06em}
.dock .palette .fmt.md{font-weight:600}
.dock .palette .fmt.ls{letter-spacing:.18em; font-size:13px}
.dock .palette .fmt.sup, .dock .palette .fmt.sub{font-size:15px}
/* in the edit box too, a line that wraps hangs as it will on the page (six spaces' width), where the browser can hang each
   line; the indents are the typed spaces themselves, so what is typed is what is drawn */
@supports (text-indent: 1em each-line) { .writing .write{padding-left:1.62em; text-indent:-1.62em each-line} }
.writing .write-title{font-style:normal; font-weight:400; font-size:.83em; line-height:1.3; text-transform:uppercase; letter-spacing:.07em; color:var(--ink); margin:0; text-align:center}   /* as it is drawn (.poem-title) */
.writing .write-title[data-align="left"]{text-align:left} .writing .write-title[data-align="right"]{text-align:right}   /* as the writer set it (2026-10-25; moves.css) */
.poem.writing .write{min-width:min(24ch,100%)}   /* an empty poem still has room to write in */
.writing .write-title:not(.write-line) + .write{margin-top:1.1em; margin-top:.72lh}
.writing .write-title:empty::before{content:"Add a title"; opacity:.5}
.writing > :not(.write):not(.write-title), .writing .verse, .writing img{display:none}
body.editing .writing[data-empty]::before{content:none}
.writing .write:empty::before{content:"Write here, or choose other words"; opacity:.5}

/* the dock: the controls for words being rewritten, and a moment to undo */
.dock{position:fixed; z-index:31; left:0; right:0; margin:0 auto; width:max-content; max-width:calc(100vw - 24px);
  bottom:calc(14px + env(safe-area-inset-bottom,0px)); display:flex; flex-wrap:wrap; justify-content:center; gap:8px; align-items:center;
  padding:7px 7px 7px 16px; border-radius:26px; background:var(--ground); color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); box-shadow:0 8px 28px -10px rgba(0,0,0,.4); font:italic 400 1rem/1.3 var(--display)}
.dock .small{font:500 11px/1.4 var(--mono); font-style:normal; letter-spacing:.05em; text-transform:uppercase; color:var(--soft)}
.dock .autocorrect{display:inline-flex; align-items:center; gap:6px; font:500 11px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ink); cursor:pointer; white-space:nowrap}
.dock .autocorrect input{margin:0; accent-color:var(--accent)}
@media (max-width:900px){ .dock{bottom:calc(64px + env(safe-area-inset-bottom,0px)); padding:10px 12px} }
.dock .losses{flex-basis:100%; margin:4px 0 6px; padding-left:1.1em; font-size:.95rem; max-width:40rem}   /* what won't show on a loupe site yet */
.dock .losses li{margin:2px 0}
.dock:has(.losses){border-radius:14px; padding:12px 14px 12px 18px; justify-content:flex-start}

/* the tray: pictures, moves or words to choose from, sliding up from the bottom */
.sheet{position:fixed; z-index:40; left:0; right:0; bottom:0; height:min(70svh,640px); 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)}
.sheet .body{overflow-y:auto; padding:4px}
.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)}
.sheet h3{font:italic 400 1.2rem/1.2 var(--display); margin:16px 0 10px}
.sheet h3:first-child{margin-top:0}
/* Add pictures in a picture tray (his words, 2026-10-15): above the library, a line beside it saying what happens */
.sheet .tray-add-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 12px}
.sheet .tray-add{font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:9px 13px; border-radius:20px; cursor:pointer;
  background:var(--accent); border:1px solid var(--accent); color:var(--ground)}
.sheet .tray-add-said{color:var(--soft); font-size:.88rem; flex:1 1 14rem}
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; align-content:start}
.thumbs button{position:relative; 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}
.thumbs .on-page{position:absolute; left:6px; bottom:6px; font:500 9px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  background:var(--ink); color:var(--ground); padding:2px 5px; border-radius:6px}
.picks{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px 14px; align-content:start}
.picks button, .verses button, .thumbs button{font:inherit}
.picks button{display:grid; gap:6px; padding:0; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer}
.picks .pv{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:5px; background:color-mix(in srgb,var(--ink) 8%,transparent)}
.picks button:hover .pv, .picks button:focus-visible .pv{outline:3px solid var(--accent); outline-offset:2px}
.picks b{font:italic 400 1.12rem/1.15 var(--display)}
.picks span{font-size:.88rem; line-height:1.35; color:var(--soft)}
.verses{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; align-content:start}
.verses button{display:grid; gap:4px; text-align:left; padding:12px 14px; border-radius:8px; cursor:pointer; color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); background:color-mix(in srgb,var(--ink) 4%,transparent)}
.verses button:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.verses button[aria-current="true"]{outline:3px solid var(--accent)}
.verses b{font:italic 400 1.08rem/1.2 var(--display)}
.verses span{font-size:.92rem; line-height:1.4; color:var(--soft)}
.verses .mono{color:var(--soft)}
@media (max-width:700px){ .thumbs{grid-template-columns:repeat(3,minmax(0,1fr))} .picks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hintbar{font-size:.95rem} .tools{gap:6px} .tools .tool-link{display:none} }
@media (prefers-reduced-motion:reduce){ .sheet{transition:none} }

/* ── my chapters: in the order a visitor meets them ─────────────────────────────────────────────────── */
.chs{list-style:none; margin:0 0 34px; padding:0; display:grid; gap:24px}
.ch{display:grid; grid-template-columns:minmax(0,280px) 1fr; gap:26px; align-items:center; padding-bottom:24px;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.ch .open img, .ch .none{display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:5px; background:color-mix(in srgb,var(--ink) 8%,transparent)}
.ch .open:hover img{outline:2px solid var(--accent); outline-offset:3px}
.ch .num{margin:0; color:var(--soft)}
.ch .cname{margin:4px 0 12px; font:italic 400 clamp(1.6rem,3vw,2.3rem)/1.1 var(--display); cursor:text}
.ch .cname:hover{text-decoration:underline dashed color-mix(in srgb,var(--ink) 40%,transparent); text-underline-offset:7px}
.ch .cname.naming{outline:2px solid var(--accent); outline-offset:6px; text-decoration:none}
.ch .acts{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0}
.ch .acts .go{font:italic 400 1.2rem/1 var(--display); color:var(--accent); margin-right:10px}
.ch .acts button:disabled{opacity:.4; cursor:default}
.ch .acts .at{flex-basis:100%; order:9; font:500 11px/1.4 var(--mono); letter-spacing:.04em; color:var(--soft); text-underline-offset:3px}   /* a writer's published room: where it is */
.chapters-page .row{display:flex; gap:10px; flex-wrap:wrap}
.chapters-page .publish{background:var(--accent); border-color:var(--accent); color:var(--ground)}
.chapters-page .empty{color:var(--soft)}
@media (max-width:700px){ .ch{grid-template-columns:1fr; gap:14px} }

/* ── my pictures and my poems ───────────────────────────────────────────────────────────────────────── */
.library .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 30px}
.library .row button{background:var(--accent); border-color:var(--accent); color:var(--ground)}
.library .row .mono{color:var(--soft)}
.library .acts{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0}
.library .acts .mono{color:var(--soft)}
.library .acts button{padding:7px 10px}
.pics{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:26px 18px}
.pics li{display:grid; gap:7px; align-content:start}
.pics img{width:100%; aspect-ratio:1; object-fit:contain; border-radius:4px; background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pics .desc{margin:0; min-height:1.35em; font:italic 400 .98rem/1.35 var(--display); cursor:text}
.pics .desc:empty::before{content:"Say what it shows"; opacity:.45}
.pics .desc:hover{text-decoration:underline dashed color-mix(in srgb,var(--ink) 35%,transparent); text-underline-offset:4px}
.pics .desc[contenteditable]{outline:2px solid var(--accent); outline-offset:3px; text-decoration:none}
/* what each picture shows, as the person chooses (build.py → SHOWS): a quiet line, cut short (the default); in italic, whole;
   or only in the panel a click on the picture opens, a picture still without words saying so */
.pics.shows-line .desc{font:400 .8rem/1.35 var(--text); color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pics.shows-line .desc[contenteditable]{white-space:normal; overflow:visible; color:var(--ink)}
.pics.shows-panel .desc{display:none}
.pics.shows-panel li:has(.desc:empty) .acts .mono::after{content:" · no words yet"; color:var(--accent)}
.shows-choice{display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:-10px 0 26px}
.shows-choice .mono{margin-right:10px; color:var(--soft)}
.shows-choice button{padding:6px 10px; border:1px solid color-mix(in srgb,var(--ink) 24%,transparent); margin-left:-1px; background:none; color:var(--ink);
  font:500 11px/1 var(--mono); letter-spacing:.04em; cursor:pointer}
.shows-choice button:first-of-type{border-radius:999px 0 0 999px; margin-left:0} .shows-choice button:last-of-type{border-radius:0 999px 999px 0}
.shows-choice button[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
@media (max-width:700px){ .shows-choice .mono{flex-basis:100%; margin:0 0 8px} }   /* the choices in one row */
body.dropping main{outline:3px dashed var(--accent); outline-offset:-14px}
.mine{list-style:none; margin:0; padding:0; display:grid; gap:30px; max-width:46rem}
.mine li{display:grid; gap:12px; padding-bottom:26px; border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.mine .poem{font:400 clamp(1.05rem,1.5vw,1.25rem)/1.55 var(--display); cursor:text}
.mine .poem[data-empty]{display:block; min-height:2.6em}
.mine .poem[data-empty]::before{content:"An empty page: click to write"; font-style:italic; opacity:.5}
.mine .poem:hover{outline:1px dashed color-mix(in srgb,var(--accent) 60%,transparent); outline-offset:8px}
.mine .poem.writing{outline:2px solid var(--accent); outline-offset:8px}
.mine .poem.writing[data-empty]::before{content:none}
.mine .empty{color:var(--soft); border:0}

/* ── the marks, while editing: each can be clicked; an empty place shows where one could go ────────────── */
body.editing #chapter [data-mark]{cursor:pointer; outline:2px dashed color-mix(in srgb,var(--accent) 75%,transparent); outline-offset:6px; border-radius:4px}
body.editing #chapter [data-mark]:hover{outline:3px solid var(--accent)}
body.editing #chapter .mark.none{visibility:visible; min-width:1.4em; min-height:1em; display:inline-block}
body.editing #chapter .mark.none::before{content:"＋"; opacity:.45; font-family:var(--mono)}
.marks{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; align-content:start}
.marks button{display:grid; justify-items:center; gap:6px; padding:12px 8px 10px; border-radius:8px; cursor:pointer; font:inherit; color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); background:color-mix(in srgb,var(--ink) 4%,transparent)}
.marks button:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.marks button[aria-current="true"]{outline:3px solid var(--accent)}
.marks .g{font:1.9rem/1 var(--orn); min-height:1.9rem}
.marks .g{display:grid; place-items:center; min-height:2.6rem}
.marks .g .m-swelled, .marks .g .m-double{width:5.6rem}
.marks .g .m-device{width:2.3rem; height:2.3rem} .marks .g .m-device span{font-size:1.05rem}
.marks .g .m-finis{gap:.5rem}
.marks .g .m-head{font-size:.55em; letter-spacing:.14em; margin-right:-.14em}
.marks .g .m-run{width:5.6em; font-size:.55em}
/* the flowers, folded beneath the marks, grouped by what they look like */
.mark-fold{margin:18px 0 0; border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent); padding-top:12px}
.mark-fold summary{cursor:pointer; font:500 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.mark-fold .mark-gl{margin:14px 0 8px; font:italic 400 .95rem/1.2 var(--display); color:var(--soft)}
.marks .n{font:italic 400 .85rem/1.2 var(--display); color:var(--soft); text-align:center}
.sheet .tone{display:flex; gap:8px; margin:0 0 14px}
/* Place a recording (edit.js → openVoices; step 113): each of hers a row, what it reads and when, Play beside it */
.sheet .voices{display:grid; margin:0 0 12px; max-width:44rem}
.sheet .vp{display:flex; align-items:center; gap:14px; border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.sheet .vp-pick{flex:1; min-width:0; display:grid; gap:2px; text-align:left; padding:9px 4px; background:none; border:0; color:var(--ink); cursor:pointer; font:inherit}
.sheet .vp-pick b{font:italic 400 1.05rem/1.25 var(--display)}
.sheet .vp-pick span{color:var(--soft); font-size:.86rem}
.sheet .vp-pick[aria-current] b::after{content:" · placed here"; font-style:normal; color:var(--accent)}
.sheet .vp-pick:hover b, .sheet .vp-pick:focus-visible b{text-decoration:underline; text-underline-offset:.15em}
.sheet .vp-play{flex:none; background:none; border:0; border-bottom:1px solid currentColor; color:var(--ink); cursor:pointer; padding:2px 0; font:inherit; font-size:.9rem}
.sheet .vp-play[aria-pressed="true"]{color:var(--accent)}
.sheet .tone 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:transparent}
.sheet .tone button[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
body[data-chapter="book"] .movebar, body[data-chapter="book"] .addhere{display:none !important}

/* the moves page's optional details: off here, shown by the looks that want them (src/looks/) */
.vocab .head h1{margin:0 0 14px}
.no, .pil, .see, .fam-num, .fam-count, .leaf, .kicker, .head .rule{display:none}
.family .fam-head{margin-bottom:20px}
.family .fam-head h2{margin:0 0 4px}

/* ── the look: type and paper the site wears, chosen on My chapters ─────────────────────────────────────── */
.looks{margin:0 0 40px; padding:20px 0 26px; border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.looks h2{margin:0 0 4px; font:italic 400 1.7rem/1.1 var(--display)}
.looks-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px}
.looks-more{appearance:none; background:none; border:0; padding:0; cursor:pointer; color:var(--accent);
  font:500 10.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.looks-more:hover{text-decoration:underline; text-underline-offset:3px}
.look-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-top:16px}
.look-choice{display:grid; gap:6px; text-align:left; padding:16px 18px; border-radius:8px; cursor:pointer; color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); background:color-mix(in srgb,var(--ink) 3%,transparent)}
.look-choice:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.look-choice[aria-pressed="true"]{outline:3px solid var(--accent); outline-offset:2px}
.look-choice b{font-size:1.9rem; font-weight:400; line-height:1.05}
.look-choice span{font-size:.95rem; line-height:1.4; color:var(--soft)}
.look-choice .mono{font:500 10.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
/* each card in its own look's type, on its own paper (build.py sets the card's --ground, --ink, --soft, --accent): the
   name as the look sets its heads, the line as it sets what is read, the label as it sets its small parts */
.look-choice[style]{background:var(--ground); color:var(--ink)}
.look-choice[style]:hover{background:color-mix(in srgb,var(--ink) 5%,var(--ground))}
.look-choice[data-look="specimen"] b{font:400 2.1rem/1.05 "Libre Caslon Display","Libre Caslon Text",Georgia,serif}
.look-choice[data-look="specimen"] span{font:400 .98rem/1.45 "Libre Caslon Text",Georgia,serif; font-variant-numeric:oldstyle-nums}
.look-choice[data-look="specimen"] .mono{font:600 .66rem/1.3 "Libre Franklin","Helvetica Neue",Arial,sans-serif; letter-spacing:.2em; text-transform:uppercase}
.look-choice[data-look="gallery"] b{font:300 2.3rem/1 "Fraunces",Georgia,serif; font-variation-settings:"opsz" 144; letter-spacing:-.03em}
.look-choice[data-look="gallery"] span{font:400 .98rem/1.45 "Fraunces",Georgia,serif; font-variation-settings:"opsz" 14}
.look-choice[data-look="gallery"] .mono{font:italic 400 1rem/1.3 "Fraunces",Georgia,serif; letter-spacing:0; text-transform:none}
.look-choice:is([data-look="rubric"], [data-look="ribbon"], [data-look="typescript"]) b{font:700 1.75rem/1.05 "Courier Prime","Courier New",Courier,monospace; letter-spacing:-.02em; color:var(--accent)}
.look-choice:is([data-look="rubric"], [data-look="ribbon"], [data-look="typescript"]) span{font:400 .92rem/1.5 "Courier Prime","Courier New",Courier,monospace}
.look-choice:is([data-look="rubric"], [data-look="ribbon"], [data-look="typescript"]) .mono{font:400 .74rem/1.3 "Courier Prime","Courier New",Courier,monospace; letter-spacing:.06em; text-transform:uppercase}
.look-choice[data-look="nocturne"] b{font:italic 400 2.2rem/1 "Alegreya",Georgia,serif}
.look-choice[data-look="nocturne"] span{font:400 1rem/1.5 "Alegreya",Georgia,serif; font-variant-numeric:oldstyle-nums}
.look-choice[data-look="nocturne"] .mono{font:500 .95rem/1.3 "Alegreya SC","Alegreya",serif; letter-spacing:.1em; text-transform:none}
.look-choice[data-look="compositor"] b{font:900 2.1rem/1 "Besley",Georgia,serif; letter-spacing:-.02em; padding:6px 0 5px;
  border-top:3px solid var(--ink); border-bottom:1px solid var(--ink)}
.look-choice[data-look="compositor"] span{font:400 1rem/1.45 "Old Standard TT",Georgia,serif}
.look-choice[data-look="compositor"] .mono{font:600 .64rem/1.3 "Work Sans","Helvetica Neue",Arial,sans-serif; letter-spacing:.2em; text-transform:uppercase}
.look-choice[data-look="recto"] b{font:300 2.1rem/1.05 "Source Serif 4",Georgia,serif; font-variation-settings:"opsz" 60}
.look-choice[data-look="recto"] span{font:400 .98rem/1.5 "Source Serif 4",Georgia,serif}
.look-choice[data-look="recto"] .mono{font:500 .8rem/1.3 "Schibsted Grotesk","Helvetica Neue",Arial,sans-serif; letter-spacing:.01em; text-transform:none;
  color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--ink) 28%,transparent)}
.look-choice[data-look="lapidary"] b{font:400 1.65rem/1.1 "Marcellus SC","Marcellus",serif; text-transform:uppercase; letter-spacing:.18em}
.look-choice[data-look="lapidary"] span{font:400 1.02rem/1.45 "Cardo",Georgia,serif}
.look-choice[data-look="lapidary"] .mono{font:400 .8rem/1.3 "Marcellus SC","Marcellus",serif; letter-spacing:.2em; text-transform:none}
.look-choice[data-look="commonplace"] b{font:italic 400 2.1rem/1.05 "ET Book",Palatino,Georgia,serif}
.look-choice[data-look="commonplace"] span{font:400 1.05rem/1.45 "ET Book",Palatino,Georgia,serif}
.look-choice[data-look="commonplace"] .mono{font:400 .74rem/1.3 "ET Book",Palatino,Georgia,serif; letter-spacing:.14em; text-transform:uppercase}
.look-choice[data-look="lowercase"] b{font:500 2.3rem/1 "Jost","Futura",sans-serif; letter-spacing:-.04em; text-transform:lowercase}
.look-choice[data-look="lowercase"] b::before{content:""; display:block; width:3.2rem; height:6px; margin-bottom:10px; background:var(--accent)}
.look-choice[data-look="lowercase"] span{font:400 .98rem/1.45 "Jost","Futura",sans-serif}
.look-choice[data-look="lowercase"] .mono{font:500 .95rem/1.3 "Jost","Futura",sans-serif; letter-spacing:0; text-transform:lowercase}
.look-choice[data-look="mincho"] b{font:500 1.8rem/1.2 "Shippori Mincho",serif; letter-spacing:.08em}
.look-choice[data-look="mincho"] span{font:400 .92rem/1.8 "Shippori Mincho",serif; letter-spacing:.02em}
.look-choice[data-look="mincho"] .mono{font:500 .78rem/1.3 "Shippori Mincho",serif; letter-spacing:.14em; text-transform:none}
.look-choice[data-look="gazetteer"] b{font:300 2.3rem/1 "Cormorant Garamond",Garamond,Georgia,serif; letter-spacing:-.005em}
.look-choice[data-look="gazetteer"] span{font:300 .98rem/1.55 "Spectral",Georgia,serif}
.look-choice[data-look="gazetteer"] .mono{font:400 .64rem/1.3 "Overpass","Helvetica Neue",Arial,sans-serif; letter-spacing:.22em; text-transform:uppercase}
.look-choice[data-look="chapbook"] b{font:600 2.1rem/1.05 "Hanken Grotesk","Helvetica Neue",Arial,sans-serif; letter-spacing:-.035em}
.look-choice[data-look="chapbook"] span{font:400 .98rem/1.55 "Hanken Grotesk","Helvetica Neue",Arial,sans-serif}
.look-choice[data-look="chapbook"] .mono{font:500 .8rem/1.3 "Hanken Grotesk","Helvetica Neue",Arial,sans-serif; letter-spacing:.01em; text-transform:none}
.look-choice[data-look="silverpoint"] b{font:400 2.1rem/1.05 "Newsreader",Georgia,serif; font-variation-settings:"opsz" 60; letter-spacing:-.015em}
.look-choice[data-look="silverpoint"] span{font:400 .98rem/1.5 "Newsreader",Georgia,serif}
.look-choice[data-look="silverpoint"] .mono{font:500 .8rem/1.3 "Schibsted Grotesk","Helvetica Neue",Arial,sans-serif; letter-spacing:.01em; text-transform:none}
.look-choice[data-look="concrete"] b{font:500 1.9rem/1.05 "IBM Plex Mono",ui-monospace,Menlo,monospace; letter-spacing:-.05em}
.look-choice[data-look="concrete"] span{font:400 .98rem/1.55 "Hanken Grotesk","Helvetica Neue",Arial,sans-serif}
.look-choice[data-look="concrete"] .mono{font:400 .78rem/1.3 "IBM Plex Mono",ui-monospace,Menlo,monospace; letter-spacing:0; text-transform:none}
.look-choice[data-look="graphite"] b{font:400 2rem/1.05 "Libre Baskerville",Baskerville,Georgia,serif; letter-spacing:-.01em}
.look-choice[data-look="graphite"] span{font:400 .95rem/1.55 "Libre Baskerville",Baskerville,Georgia,serif}
.look-choice[data-look="graphite"] .mono{font:500 .68rem/1.3 "Libre Franklin","Helvetica Neue",Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase}
/* small (the default): a pill for each look, its name alone in its own type on its own paper; the cards open on
   "Expand them" (chapters.js) */
.looks.small .look-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.looks.small .look-choice{display:inline-flex; align-items:center; padding:6px 15px 7px; border-radius:999px}
.looks.small .look-choice span{display:none}
.looks.small .look-choice[aria-pressed="true"]{outline-width:2px}
.looks.small .look-choice[data-look] b{font-size:1.2rem; line-height:1.15; padding:0; white-space:nowrap}
.looks.small .look-choice[data-look="lapidary"] b{font-size:.95rem}
.looks.small .look-choice[data-look="mincho"] b{font-size:1.05rem}
.looks.small .look-choice[data-look="compositor"] b{padding:1px 0 2px; border-top-width:2px}
.looks.small .look-choice[data-look="lowercase"] b::before{display:inline-block; width:.8rem; height:4px; margin:0 .35em 0 0; vertical-align:.3em}
/* which ways to open or tuck show in each state (chapters.js → lay): full, small, or settled, one line saying the look;
   "Tuck them away" only once a look has been chosen */
.looks .looks-more{display:none}
.looks:not(.small) .looks-more[data-in="full"], .looks.small:not(.settled) .looks-more[data-in="small"],
.looks[data-answered="yes"]:not(.settled) .looks-more[data-in="open"], .looks.settled .looks-more[data-in="settled"]{display:inline}
.looks-more[data-in="open"]::before, .looks-more[data-in="settled"][data-lay="full"]::before{content:"·"; display:inline-block;
  margin:0 .6em; color:var(--soft)}
.looks-ways{white-space:nowrap}
/* settled (scrapbook's settled settings, its #123): the heading, the look's own pill and the ways to change it, on one
   line; a click on the pill opens them small */
.looks.settled{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:14px 0 16px}
.looks.settled .looks-head{display:contents}
.looks.settled h2{order:1; margin:0}
.looks.settled .look-row{order:2; margin:0}
.looks.settled .looks-ways{order:3}
.looks.settled .fam-about, .looks.settled .look-choice:not([aria-pressed="true"]){display:none}
.looks.settled .look-choice[aria-pressed="true"]{outline:0}

/* a picture dragged to a new place in its move: it lifts, a copy follows the pointer, a bar shows where it will land */
body.editing #chapter img.lifting{opacity:.3}
body.editing #chapter img.drop-before{box-shadow:-6px 0 0 var(--accent)}
body.editing #chapter img.drop-after{box-shadow:6px 0 0 var(--accent)}
body.editing #chapter section.down img.drop-before{box-shadow:0 -6px 0 var(--accent)}
body.editing #chapter section.down img.drop-after{box-shadow:0 6px 0 var(--accent)}
.drag-ghost{position:fixed; z-index:80; width:96px; height:96px; object-fit:cover; pointer-events:none; translate:-50% -60%;
  border-radius:3px; box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:.95}

/* the grid while editing (edit.js → the grid): a picture is chosen with a click, ringed, with Bigger · Smaller · Change ·
   Take out on it; inside it, a drag moves what its frame shows; Add pictures is a place of its own at the grid's end. A
   place clips what it holds, so where a dragged picture will land is drawn inside it */
.add-place{display:none}
body.editing :is(.mv-grid, .mv-row) .add-place{display:grid; place-items:center; padding:12px; border:1px dashed color-mix(in srgb,var(--ink) 40%,transparent);
  background:transparent; color:var(--soft); font:500 11px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer}
body.editing :is(.mv-grid, .mv-row) .add-place:hover{border-color:var(--ink); color:var(--ink)}
body.editing .mv-grid .place.chosen img{cursor:move; touch-action:none}
body.editing :is(.mv-grid, .mv-row) .place.chosen::after, body.editing :is(.mv-grid, .mv-row) .place:has(> img.drop-before)::after,
body.editing :is(.mv-grid, .mv-row) .place:has(> img.drop-after)::after{content:""; position:absolute; inset:0; pointer-events:none}
body.editing :is(.mv-grid, .mv-row) .place.chosen::after{box-shadow:inset 0 0 0 3px var(--accent)}
body.editing :is(.mv-grid, .mv-row) .place:has(> img.drop-before)::after{box-shadow:inset 6px 0 0 var(--accent)}
body.editing :is(.mv-grid, .mv-row) .place:has(> img.drop-after)::after{box-shadow:inset -6px 0 0 var(--accent)}
body.editing #chapter :is(.mv-grid, .mv-row) img.drop-before, body.editing #chapter :is(.mv-grid, .mv-row) img.drop-after{box-shadow:none}
/* a picture dragged into another's middle stacks them (step 3): the place says so while it waits */
body.editing .mv-grid .place.target-stack::after{content:"Stack"; position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  box-shadow:inset 0 0 0 4px var(--accent); background:color-mix(in srgb,var(--accent) 24%,transparent); color:#fff;
  font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase}
/* The stack: its pictures in order, the one on top first, each with what can be done to it */
.stack-pics{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:14px 10px; align-content:start}
.stack-pics figure{margin:0; display:grid; gap:6px; align-content:start}
.stack-pics img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:3px}
.stack-pics figcaption{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 10px}
.stack-pics button, .st-all button{padding:4px 2px; border:0; background:none; color:var(--accent); font:500 11px/1.2 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer}
.stack-pics button:hover, .st-all button:hover{text-decoration:underline}
.stack-pics figcaption span{font:italic 400 1rem/1.2 var(--display); color:var(--soft)}
.st-all{margin:12px 0 0; text-align:right}
/* a film (step 4): its link pasted at the top of Add pictures; its title and date rewritten where they stand */
.film-add{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 18px}
.film-add label{display:flex; flex:1; min-width:260px; align-items:center; gap:12px; font:italic 400 1.05rem/1.3 var(--display); color:var(--soft)}
.film-add input{flex:1; min-width:180px; padding:9px 12px; border:1px solid color-mix(in srgb,var(--ink) 28%,transparent); border-radius:6px;
  background:transparent; color:var(--ink); font:400 15px/1.3 var(--text)}
body.editing .mv-grid .film-words [data-film-words]{pointer-events:auto; cursor:text; border-radius:2px; outline:none}
body.editing .mv-grid .film-words [data-film-words]:hover, body.editing .mv-grid .film-words [data-film-words][contenteditable="plaintext-only"]{background:rgba(255,255,255,.16)}
body.editing .mv-grid .film-words [data-film-words]:empty{display:block; min-width:6em; min-height:1em}
body.editing .mv-grid .film-words [data-film-words="title"]:empty::before{content:"add a title"; opacity:.6}
body.editing .mv-grid .film-words [data-film-words="date"]:empty::before{content:"add a date"; opacity:.6}
.sheet .status button{padding:0; border:0; background:none; color:var(--accent); font:inherit; letter-spacing:inherit; text-transform:inherit; text-decoration:underline;
  text-underline-offset:3px; cursor:pointer}
body.editing .mv-row .add-place{flex:0 0 clamp(90px,12vw,170px); align-self:stretch; min-height:120px}
.grid-acts{position:absolute; z-index:3; left:8px; right:8px; top:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; pointer-events:none}
.grid-acts button{pointer-events:auto; 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:var(--ground);
  box-shadow:0 2px 10px -4px rgba(0,0,0,.35)}
.grid-acts button:disabled{opacity:.4; cursor:default}
/* the route while editing: the place for its map before it has one, and the way to paste or change its link */
body.editing .mv-route .route-empty{display:grid; place-items:center; height:240px; margin:0; border:1px dashed color-mix(in srgb,var(--ink) 40%,transparent);
  font:italic 400 1.05rem/1.3 var(--display); color:var(--soft)}
.route-set{display:none}
/* a room's own look: chosen while editing, from the room's bar (edit.js → the look) */
body:not(.editing) .tools .room-look{display:none}
.sheet .look-row{margin-top:4px}
body.editing .mv-route .route-set{display:block; margin:14px auto 0; 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:var(--ground)}
/* Where it leads (edit.js → openLeads): the writer's rooms as pictures, the next in Rooms first, then a page on the web by its address */
.thumbs.leads-rooms{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px 18px}
.leads-rooms button{aspect-ratio:auto; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:0; background:none; color:var(--ink); text-align:left}
.leads-rooms button:hover{background:none}
.leads-rooms button[aria-current="true"]{outline:0}
.leads-rooms img, .leads-rooms .no-pic{width:100%; aspect-ratio:4/3; max-height:none; object-fit:cover; border-radius:4px; background:color-mix(in srgb,var(--ink) 8%,transparent)}
.leads-rooms button:hover img, .leads-rooms button:focus-visible img{outline:2px solid color-mix(in srgb,var(--ink) 40%,transparent); outline-offset:2px}
.leads-rooms button[aria-current="true"] img, .leads-rooms button[aria-current="true"] .no-pic{outline:3px solid var(--accent); outline-offset:3px}
.leads-rooms b{font:italic 400 1.2rem/1.2 var(--display); display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:4px}
.leads-rooms .next-tag{font:500 9px/1.2 var(--mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; background:var(--ink); color:var(--ground);
  padding:3px 6px; border-radius:6px}
.leads-rooms .note{font-size:.92rem; line-height:1.35; color:var(--soft)}
.leads-rooms button:disabled{cursor:default; opacity:.5}
/* which rooms the doors open (step 148): three ways as a row of choices, each its name and what it means; the way chosen marked */
.door-ways{display:flex; flex-wrap:wrap; gap:10px 12px; margin:0 0 6px}
.door-ways button{display:flex; flex-direction:column; align-items:flex-start; gap:3px; flex:1 1 12rem; max-width:18rem; padding:10px 14px; cursor:pointer; text-align:left;
  color:var(--ink); background:none; border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:6px}
.door-ways button:hover{border-color:color-mix(in srgb,var(--ink) 55%,transparent)}
.door-ways button[aria-current="true"]{border:2px solid var(--accent); padding:9px 13px}
.door-ways b{font:italic 400 1.15rem/1.2 var(--display)}
.door-ways .note{font-size:.88rem; line-height:1.35; color:var(--soft)}
.link-pages{display:flex; flex-wrap:wrap; gap:10px 12px}
.link-pages button{font:italic 400 1.1rem/1.2 var(--display); padding:9px 16px; cursor:pointer; color:var(--ink); background:none;
  border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:20px}
.link-pages button[aria-current="true"]{border:2px solid var(--accent); padding:8px 15px}
.leads-web{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.leads-web input{flex:0 1 26rem; min-width:0; font:inherit; font-size:1rem; padding:10px 14px; border-radius:22px; color:var(--ink); background:var(--ground);
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.leads-web .go{font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:10px 16px; border-radius:20px; cursor:pointer;
  background:var(--accent); border:1px solid var(--accent); color:var(--ground)}
.leads-web p{flex:1 1 16rem; margin:0; color:var(--soft)}
@media (max-width:700px){ .thumbs.leads-rooms{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px} .leads-web input{flex:1 1 100%} }
body.editing .mv-turn [data-door-name]{cursor:text}
body.editing .mv-turn [data-door-name][contenteditable]{outline:1px dashed currentColor; outline-offset:4px; border-bottom-color:transparent}
.route-form{display:grid; gap:12px}
.route-form textarea{width:100%; min-height:110px; padding:10px 12px; font:400 .9rem/1.45 var(--mono); color:var(--ink); background:var(--ground);
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius:6px; resize:vertical}
.route-form p{margin:0; color:var(--soft); font:italic 400 1rem/1.4 var(--display)}
.route-form .go, .film-add .go{justify-self:start; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:10px 16px; border-radius:20px;
  cursor:pointer; background:var(--accent); border:1px solid var(--accent); color:var(--ground)}

/* the person's library in loupe (loupe.js): a search, a gallery, a page of pictures at a time */
.loupe-find{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px}
.loupe-find input, .loupe-find select{font:inherit; font-size:.95rem; padding:7px 10px; border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
  border-radius:6px; background:var(--ground); color:var(--ink)}
.loupe-find input{flex:1 1 220px; min-width:0}
.loupe-said{margin:0 0 10px; color:var(--soft)}
.loupe-pics{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; margin:0 0 14px}
.loupe-pics figure{margin:0}
.loupe-pics img{display:block; width:100%; aspect-ratio:1; object-fit:contain; background:color-mix(in srgb,var(--ink) 6%,transparent)}
.loupe-pics figcaption{margin-top:6px; font-size:.9rem; color:var(--soft)}
.loupe-more{margin:4px 0 26px; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:9px 13px;
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius:20px; background:none; color:var(--ink); cursor:pointer}
.library .loupe-library{margin:0 0 40px}
/* the Pictures page's second heading, under its library: a section's, flush with the page (it had worn the moves book's chapter
   heading, set in from the margin with a page's space above it; his word, 2026-10-14: "is the extra space here intentional") */
.library > h2.fam{padding:0; margin:clamp(36px,6vh,60px) 0 8px; font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.1}
.loupe-pics img[data-pic]{cursor:zoom-in}   /* opens enlarged (viewer.js) */
/* deleting from the library (his words, 2026-10-15): Delete a small mark in the picture's corner, shown when the picture is pointed at
   or reached by the keyboard, faint but there on a phone, as most tooling has it ("can we fold it in more subtly"); Select, then a click on
   each, and the bar beneath them deletes those chosen. Details, beside Select, shows each picture's size, shape and file beneath it */
.loupe-pics figure{position:relative}
.loupe-pics .pic-delete{position:absolute; top:8px; right:8px; z-index:2; width:30px; height:30px; display:grid; place-items:center; padding:0;
  border:0; border-radius:50%; cursor:pointer; color:var(--ink); background:color-mix(in srgb,var(--ground) 90%,transparent);
  box-shadow:0 2px 10px -3px rgba(0,0,0,.4); opacity:0; transition:opacity .15s}
.loupe-pics .pic-delete svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.loupe-pics figure:hover .pic-delete, .loupe-pics figure:focus-within .pic-delete, .loupe-pics .pic-delete:focus-visible{opacity:1}
.loupe-pics .pic-delete:hover{background:var(--ink); color:var(--ground)}
@media (hover:none){ .loupe-pics .pic-delete{opacity:.72; width:28px; height:28px; top:6px; right:6px} }
.loupe-pics .pic-info{display:none; margin:6px 0 0; font:500 10px/1.5 var(--mono); letter-spacing:.03em; text-transform:none; color:var(--soft); overflow-wrap:anywhere}
.details .loupe-pics .pic-info{display:block}
.loupe-find .loupe-select{font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:10px 14px; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius:6px; background:var(--ground); color:var(--ink)}
.loupe-find .loupe-select[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--ground)}
.choosing .loupe-pics figure{cursor:pointer}
.choosing .loupe-pics img[data-pic]{cursor:pointer}
.choosing .loupe-pics .pic-delete{visibility:hidden}
.loupe-pics figure.chosen img{outline:3px solid var(--accent); outline-offset:-3px; opacity:.72}
.loupe-pics figure.chosen::after{content:"✓"; position:absolute; top:8px; left:8px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font:600 14px/1 var(--mono); background:var(--accent); color:var(--ground)}
.loupe-chosen{position:sticky; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin:0 0 14px; padding:10px 14px; border-radius:8px; background:var(--ground);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent), 0 10px 26px -14px rgba(0,0,0,.35)}
.loupe-chosen[hidden]{display:none}
.loupe-chosen .mono{color:var(--soft); font-size:.72rem; letter-spacing:.06em; margin-right:auto}
.loupe-chosen button{font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:9px 13px; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius:20px; background:none; color:var(--ink)}
.loupe-chosen button.go{background:var(--accent); border-color:var(--accent); color:var(--ground)}
.loupe-chosen button[hidden]{display:none}
@media (max-width:640px){ .loupe-chosen{bottom:calc(78px + env(safe-area-inset-bottom))} }   /* above a phone's Compose */
/* doubles (his words, 2026-10-15: "yes on 1"): a quiet line above the pictures when some look the same; Compare sets each group side by
   side, Keep this one under each */
.loupe-doubles{margin:0 0 16px; padding:12px 14px; border-radius:8px; background:color-mix(in srgb,var(--ink) 5%,transparent)}
.loupe-doubles[hidden]{display:none}
.dbl-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:0}
.dbl-head span{flex:1 1 16rem}
.loupe-doubles button{font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius:20px; background:var(--ground); color:var(--ink)}
.loupe-doubles .dbl-keep{background:var(--accent); border-color:var(--accent); color:var(--ground); margin-top:8px}
.loupe-doubles .dbl-differ{align-self:center; background:none}
.dbl-list{display:grid; gap:14px; margin-top:12px}
.dbl-list[hidden]{display:none}
.dbl-group{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; padding-top:12px; border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.dbl-group figure{margin:0; width:min(220px,calc(50% - 7px)); display:grid; justify-items:start}
.dbl-group img{width:100%; aspect-ratio:1; object-fit:contain; background:color-mix(in srgb,var(--ink) 6%,transparent)}
.dbl-group figcaption{margin-top:6px; font-size:.9rem; color:var(--soft); overflow-wrap:anywhere}
.dbl-group .mono{font-size:.7rem; color:var(--soft); letter-spacing:.04em}

/* For poets (his words, 2026-10-11): the switch on My words, and the panel for versions and type, a sheet at the right
   (the whole width on a phone), over the dock, closed by Done or Escape */
/* My words: a poem's buttons (Delete, its versions) stand aside while it is open for writing (his word, 2026-10-11) */
.mine li:has(.writing) .acts button{visibility:hidden}
.for-poets{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:-14px 0 30px}
.for-poets label{display:inline-flex; align-items:center; gap:8px; font:italic 400 1.15rem/1.2 var(--display); cursor:pointer}
.for-poets input{accent-color:var(--accent); width:1rem; height:1rem; margin:0}
.for-poets .mono, .poets-panel .small{font:500 11px/1.5 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--soft)}
.poets-panel{position:fixed; z-index:40; top:0; right:0; bottom:0; width:min(30rem, 100vw); overflow:auto; padding:20px 22px 60px;
  background:var(--ground); color:var(--ink); box-shadow:-10px 0 34px rgba(0,0,0,.16); font:400 1rem/1.5 var(--display)}
.poets-panel header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px}
.poets-panel h2{margin:0; font:italic 400 1.5rem/1.2 var(--display)}
.poets-panel .choices{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:14px 0}
.poets-panel .choices .small{flex-basis:100%}
.poets-panel .this-line{margin:14px 0 0; font-style:italic}
.poets-panel .versions{list-style:none; margin:16px 0 0; padding:0}
.poets-panel .versions > li{border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent); padding:12px 0}
.poets-panel .versions b{display:block; font:500 11px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.poets-panel .versions .first{display:block; margin:4px 0 8px; font-style:italic; color:var(--soft)}
.poets-panel .versions .acts{display:flex; flex-wrap:wrap; gap:6px}
.poets-panel .beside{margin-top:10px}
.library .acts .first-in{font:italic 400 1rem/1.3 var(--display); color:var(--soft)}   /* where it first appeared (For poets) */
.library .acts .first-in i{font-style:normal}
/* My notes: a line to a note, smaller type, so a great many fit a screen (his word, 2026-10-13: "a template for this page that uses
   smaller fonts to accommodate a large number of notes"); found by a word; what can be done shown on pointing at a note */
.notes-page .find{font:400 .95rem/1.2 var(--text); padding:7px 14px; min-width:min(320px, 70vw); border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);
  border-radius:18px; background:transparent; color:var(--ink)}
.notes-page .find:focus{outline:none; border-color:var(--ink)}
.notes-page .row{margin-bottom:10px}
.notes-page .day h2{margin:22px 0 4px; font-size:.86rem; color:var(--soft)}
.notes-page ol.notes{list-style:none; margin:0; padding:0}
.notes-page li[data-poem]{position:relative; display:grid; grid-template-columns:4.6em minmax(0,1fr) auto; column-gap:14px; align-items:baseline;
  padding:6px 0; border-top:1px solid color-mix(in srgb,var(--ink) 11%,transparent)}
.notes-page a.note{grid-column:1 / 3; display:grid; grid-template-columns:4.6em minmax(0,1fr); column-gap:14px; align-items:baseline; color:var(--ink); text-decoration:none; min-width:0}
.notes-page .when{font-size:10.5px; color:var(--soft)}
.notes-page .words{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:400 .94rem/1.45 var(--text)}
.notes-page .words .rest{color:var(--soft)}
/* a thin space where a face's italic has none (Hanken's): that character alone drawn from the system's sans, or WebKit shows a box in the
   index's and Find's italic lines (his Whitman's "thou ?", 2026-10-15) */
@font-face{font-family:"Stanza Thin Space"; src:local("Helvetica Neue"), local("Helvetica"), local("Arial"); unicode-range:U+2009, U+200A, U+202F}
/* One Find (his words, 2026-10-15: "1a"): the words found marked in the rubric; beneath a note, the line it was found in, and how */
.notes-page mark, .vocab.library:not(.public) mark{background:none; color:var(--accent)}
.notes-page .found{grid-column:2; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:italic 400 .84rem/1.4 "Stanza Thin Space", var(--text); color:var(--soft)}
.notes-page .found .how{font-style:normal}
.notes-page .none-found{margin:4px 0 10px; color:var(--soft); font-style:italic}
.notes-page .none-found button{font:inherit; font-style:normal; color:var(--ink); background:none; border:0; border-bottom:1px solid currentColor; padding:0; cursor:pointer}
.notes-page .none-found[hidden]{display:none}
.notes-page a.note:hover .first{text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent); text-underline-offset:3px}
.notes-page .n{font-size:10.5px; color:var(--soft); white-space:nowrap}
.notes-page .acts{position:absolute; right:0; top:50%; translate:0 -50%; display:flex; gap:6px; margin:0; padding-left:14px; background:var(--ground);
  opacity:0; pointer-events:none; transition:opacity .12s}
.notes-page .acts button{padding:5px 8px; font-size:10px}
.notes-page li[data-poem]:hover .acts, .notes-page li[data-poem]:focus-within .acts{opacity:1; pointer-events:auto}
.notes-page li.empty, .notes-page .none-left{font-style:italic; color:var(--soft)}
/* a notebook among the notes (his pick, 2026-10-14: "notebook"): its name where a note's words would be, its count, opening in place to
   its notes, set in from the time's column; Rename and Delete on pointing, as a note's acts */
.notes-page li[data-book]{border-top:1px solid color-mix(in srgb,var(--ink) 11%,transparent)}
.notes-page .book-row{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; align-items:baseline; padding:6px 0}
.notes-page .book-row .open{display:flex; align-items:baseline; gap:0; padding:0; border:0; background:none; text-align:left; color:var(--ink);
  font:400 .94rem/1.45 var(--text); text-transform:none; letter-spacing:0; cursor:pointer; min-width:0}
.notes-page .book-row .caret{flex:none; width:calc(4.6em + 14px); font-size:.7rem; color:var(--soft); transition:rotate .12s; transform-origin:.35em 55%}
.notes-page .book-row .open[aria-expanded="true"] .caret{rotate:90deg}
.notes-page .book-row .name{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-style:italic}
.notes-page .book-row .open:hover .name{text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent); text-underline-offset:3px}
.notes-page .book-row .rename{font:italic 400 .94rem/1.3 var(--text); margin-left:calc(4.6em + 14px); padding:2px 8px; min-width:min(280px, 60vw);
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius:3px; background:transparent; color:var(--ink)}
.notes-page .book-row .rename:focus{outline:none; border-color:var(--ink)}
.notes-page .book-row:hover .acts, .notes-page .book-row:focus-within .acts{opacity:1; pointer-events:auto}
.notes-page ol.in-book{margin:0 0 6px calc(4.6em + 14px)}
.notes-page ol.in-book li.empty{padding:4px 0 8px; font-size:.9rem}
@media (hover:none), (max-width:640px){
  .notes-page li[data-poem]{grid-template-columns:4em minmax(0,1fr) auto}
  .notes-page a.note{grid-template-columns:4em minmax(0,1fr)}
  .notes-page .acts{position:static; translate:none; grid-column:2 / -1; opacity:1; pointer-events:auto; padding:4px 0 2px; background:none; flex-wrap:wrap}
  .notes-page .book-row .caret{width:calc(4em + 14px)}
  .notes-page .book-row .rename{margin-left:calc(4em + 14px)}
  .notes-page ol.in-book{margin-left:1em}
  .notes-page .book-row .acts{grid-column:1 / -1; padding-left:calc(4em + 14px)}
}
.poets-panel .places a, .poets-panel .places .rights{display:block; margin:0 0 8px}
.poets-panel .places .first{font-style:normal; color:var(--ink)}
.poets-panel .places .first i{font-style:italic}
.poets-panel .place-form{display:flex; flex-wrap:wrap; gap:10px 12px; margin:14px 0 0; padding:14px 0 0; border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.poets-panel .place-form label{display:flex; flex-direction:column; gap:4px; flex:1 1 11rem}
.poets-panel .place-form label.wide{flex-basis:100%}
.poets-panel .place-form label.check{flex-direction:row; align-items:center; gap:8px; flex-basis:100%}
.poets-panel .place-form :is(input[type=text], input[type=url], select){font:inherit; padding:8px 10px; border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius:4px; background:var(--ground); color:var(--ink)}
/* the version that ran in a place, and the place a version ran in (2026-10-25; poets.js → ran) */
.poets-panel .versions .ran{display:block; margin:-4px 0 8px; color:var(--soft)}
.poets-panel .versions .ran i{font-style:italic}
.poets-panel .place-form .naming{flex-basis:100%; margin:0}
.poets-panel .place-add{margin-top:14px}
.poets-panel .diff{white-space:pre-wrap; tab-size:4; padding:12px 14px; border-radius:4px; background:color-mix(in srgb,var(--ink) 5%,var(--ground))}
.poets-panel .diff del{color:var(--rubric, #9b2d20); text-decoration:line-through}
.poets-panel .diff ins{text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px}
.poets-panel .naming{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.poets-panel .naming input{flex:1; min-width:12rem; font:inherit; padding:8px 10px; border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
  border-radius:4px; background:var(--ground); color:var(--ink)}

/* Readers (rooms not yet shared, his words, 2026-10-12): the panel shares the poets' sheet; a reader's page says, small,
   that the room was shared with them and is not published */
.readers-panel > p{margin:0 0 12px}
.readers-panel .said{font-style:italic; color:var(--accent)}
.readers-panel .versions b{text-transform:none; letter-spacing:.02em; font-size:13px}   /* an address as it is typed */
.reading-strip{position:fixed; z-index:30; top:12px; left:12px; margin:0; padding:8px 13px; border-radius:20px;
  font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  background:color-mix(in srgb,var(--ground) 90%,transparent); border:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.reading-strip a{color:inherit}

/* the Type panel's choices as segmented controls, the choice made lit (his note, 2026-10-12) */
.poets-panel .choices .seg{display:inline-flex; flex-wrap:wrap; border:1px solid color-mix(in srgb,var(--ink) 28%,transparent); border-radius:9px; overflow:hidden}
.poets-panel .choices .seg button{border:0; border-radius:0; margin:0; padding:9px 12px; background:transparent; color:var(--ink);
  font:500 11px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase}
.poets-panel .choices .seg button + button{border-left:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.poets-panel .choices .seg button:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.poets-panel .choices .seg button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}

/* the bar while words are written: tools at the left (the palette, Type, auto-correct), a gap, then the quieter ways out
   as plain words and Keep, the one filled button */
.dock .tool{border-radius:9px; padding:9px 12px}
.dock .gap{flex:1 1 12px; min-width:12px}
.dock .quiet{border-color:transparent; background:transparent; padding:9px 8px; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.dock .quiet:hover{text-decoration-color:currentColor}

/* while the poets' panel is open (it takes the right of the screen), the bar centers in what is left, so Keep is never
   under it; on a phone the panel takes the whole width, and Done is its way back */
body:has(> .poets-panel) .dock{right:min(30rem, 100vw); max-width:calc(100vw - min(30rem, 100vw) - 24px)}

/* an essay, written in place (prose.js): the box shows the paragraphs as the page will (indents, a passage set apart, a
   title, the drop initial's red letter); its title is set as the line above */
.writing .write.essay-write{white-space:normal; padding-left:0; text-indent:0; min-height:6em}
.essay .essay-write > p:first-child, .essay .essay-write > p.apart, .essay .essay-write > p.head, .essay .essay-write > p.apart + p,
.essay .essay-write > p.head + p, .essay .essay-write > p.subhead, .essay .essay-write > p.subhead + p,
.essay .essay-write > p.quote + p:not(.quote){text-indent:0}
/* a passage quoted, and a smaller title, as the page sets them (moves.css) */
.essay .essay-write > p.quote{margin:1.2em 0; padding:0 1.6em; text-indent:0; font-size:.92em; line-height:1.62}
.essay .essay-write > p.quote + p.quote{margin-top:-1.2em; text-indent:1.6em}
.essay .essay-write > p.subhead{margin:1.9em 0 .8em; text-align:center; font:italic 400 1.2em/1.3 var(--display)}
.essay .essay-write > p.volta{margin:1.05em 0; text-indent:0; font-size:1.33em; line-height:1.3; font-weight:500}   /* a volta (moves.css) */
.essay .essay-write > p.head{margin:1.6em 0 1.1em; text-align:center; font:500 1.5em/1.2 var(--display); letter-spacing:.16em; text-transform:uppercase}
.essay .essay-write > p:only-child:has(> br:only-child)::before{content:"Write here, or paste your essay"; opacity:.5}
.mv-initial .essay .essay-write > p:not(.apart):not(.head):not(.quote):not(.subhead):not(.volta):first-child::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}
.mv-initial .essay .essay-write > p:not(.apart):not(.head):not(.quote):not(.subhead):not(.volta):first-child::first-line{font-variant-caps:all-small-caps; letter-spacing:.06em}
.writing .write-line{display:block; text-align:start; margin:0 0 2.1em; font:500 .66rem/1.3 var(--plain, var(--text)); font-style:normal; letter-spacing:.28em;
  text-transform:uppercase; color:var(--soft)}
.writing .write-line:empty::before{content:"A title, set as the line above: a date or a place"; letter-spacing:.12em; opacity:.6}
/* My essays: each essay as a room sets it, smaller */
.mine .essay{max-width:35rem; margin:0; font-size:1rem; cursor:text}
.mine .essay:hover{outline:1px dashed color-mix(in srgb,var(--accent) 60%,transparent); outline-offset:8px}
.mine .essay.writing{outline:2px solid var(--accent); outline-offset:8px}
.mine .essay[data-empty]{display:block; min-height:2.6em}
.mine .essay[data-empty]::before{content:"An empty page: click to write, or paste an essay"; font-style:italic; opacity:.5}
.mine .essay.writing[data-empty]::before{content:none}
.dock > .sep{align-self:stretch; width:1px; margin:4px 2px; background:color-mix(in srgb,var(--ink) 22%,transparent)}
.dock .tool[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}

/* My rooms: a room's captions, a row of choices, the one chosen lit (as Type's are) */
.ch .capmode{display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:10px 0 0}
.ch .capmode .mono{margin-right:10px; color:var(--soft)}
.ch .capmode button{padding:6px 10px; border:1px solid color-mix(in srgb,var(--ink) 24%,transparent); margin-left:-1px; background:none; color:var(--ink);
  font:500 11px/1 var(--mono); letter-spacing:.04em; cursor:pointer}
.ch .capmode button:first-of-type{border-radius:999px 0 0 999px; margin-left:0} .ch .capmode button:last-of-type{border-radius:0 999px 999px 0}
.ch .capmode button[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.tools .captions-switch[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}

/* My pictures: a picture enlarged with its fields beside it (fields.js; his word, 2026-10-12), on the enlargement's dark
   ground; the fields beneath the picture on a phone */
.pics li[data-pic] > img{cursor:zoom-in}
.pf{position:fixed; inset:0; z-index:100; display:grid; grid-template-columns:minmax(0,1fr) 360px; background:#121110; color:#f3eee3}
.pf[hidden]{display:none}
.pf-stage{position:relative; display:grid; place-items:center; min-height:0; cursor:zoom-out}
.pf-stage figure{margin:0; display:grid; justify-items:start; gap:12px}
.pf-stage img{display:block; object-fit:contain; box-shadow:0 12px 50px rgba(0,0,0,.45)}
.pf-stage figcaption{font:400 .98rem/1.45 var(--text); color:rgba(255,255,255,.88); text-wrap:pretty}
.pf-stage figcaption[hidden]{display:none}
.pf-stage figcaption .t, .pf-stage figcaption .by{display:block; max-width:42rem}
.pf-stage figcaption .by{margin-top:8px; font:500 .62rem/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.pf-stage figcaption .t:empty, .pf-stage figcaption .by:empty{display:none}
.pf button{border:0; background:none; color:rgba(255,255,255,.72); font:300 1.7rem/1 Georgia,serif; padding:14px 18px; cursor:pointer}
.pf button:hover{color:#fff}
.pf-prev, .pf-next{position:absolute; top:50%; translate:0 -50%} .pf-prev{left:6px} .pf-next{right:6px}
.pf-count{position:absolute; bottom:14px; left:0; right:0; margin:0; text-align:center; font:500 .62rem/1 var(--mono); letter-spacing:.2em; color:rgba(255,255,255,.5)}
.pf-fields{position:relative; overflow:auto; padding:64px 28px 40px; border-left:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.025)}
.pf-close{position:fixed; z-index:2; top:6px; right:8px; font-size:2rem !important}
.pf .f{display:grid; gap:7px; margin:0 0 26px}
.pf .k, .pf .facts dt{font:500 .6rem/1.2 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.pf textarea, .pf input{width:100%; padding:9px 11px; border:1px solid rgba(255,255,255,.2); border-radius:6px; background:rgba(255,255,255,.04); color:#fff;
  font:400 .98rem/1.45 var(--text); resize:vertical}
.pf textarea:focus, .pf input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.pf textarea::placeholder, .pf input::placeholder{color:rgba(255,255,255,.35)}
.pf .h{font:400 .78rem/1.4 -apple-system,"Helvetica Neue",sans-serif; color:rgba(255,255,255,.5)}
.pf .facts{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:6px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.1)}
.pf .facts dd{margin:0; font:400 .9rem/1.3 var(--text); color:rgba(255,255,255,.85)}
.pf .facts .from{margin-left:8px; font:400 .74rem/1 -apple-system,"Helvetica Neue",sans-serif; color:rgba(255,255,255,.45)}
.pf-kept{min-height:1em; margin:18px 0 0; font:500 .6rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6)}
@media (max-width:760px){
  .pf{grid-template-columns:1fr; grid-template-rows:minmax(52vh,auto) auto; overflow:auto}
  .pf-fields{overflow:visible; border-left:0; border-top:1px solid rgba(255,255,255,.1); padding:24px 18px 80px}
  .pf-prev, .pf-next, .pf-count{display:none}
}

/* Recently deleted (deleted.html): a line to each, what it was and its first words, the days it has left; Put it back, Delete now */
.bin-page ol.binned{list-style:none; margin:0; padding:0; max-width:56rem}
.bin-page ol.binned > li:is([data-poem], [data-pic]){display:grid; grid-template-columns:4.2em minmax(0,1fr) auto; gap:2px 16px; align-items:baseline; padding:11px 0 10px;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.bin-page .kind{color:var(--soft); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase}
.bin-page .words{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.02rem}
.bin-page .words .rest{color:var(--soft)}
.bin-page ol.binned > li[data-pic]{align-items:center}   /* a picture deleted on Pictures: small, beside what it shows */
.bin-page .binned-pic{display:inline-block; height:2.6em; width:auto; max-width:4.6em; object-fit:cover; vertical-align:middle; margin-right:12px}
.bin-page .left{color:var(--soft); opacity:.8; font-size:.7rem; white-space:nowrap}
.bin-page .acts{grid-column:2 / -1; display:flex; gap:18px; margin:3px 0 0}
.bin-page .acts button{background:none; border:0; border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent); padding:0; color:var(--ink);
  font:500 11px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer}
.bin-page .acts button.sure, .bin-page .purge-all.sure{color:var(--accent); border-color:var(--accent)}
.bin-page .told{color:var(--soft); font-style:italic}
.bin-page .row{margin-top:26px}
.to-bin{margin:34px 0 0}
.to-bin a{color:var(--soft); font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent); padding-bottom:3px}
.to-bin a:hover{color:var(--ink); border-color:var(--ink)}
.vocab.bin-page .lede{margin-bottom:26px}   /* the look sets a page lede with no space beneath */
.bin-page .row .purge-all{background:none; border:0; border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:0; padding:0; color:var(--soft);
  font:500 11px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase}   /* for good, so never the button that looks like the way on */

/* My poems and My essays, indexes: a piece opens in the composer (his word, 2026-10-13) */
.mine [data-mine]{cursor:pointer}
.mine [data-mine]:hover{outline:1px dashed color-mix(in srgb,var(--ink) 25%,transparent); outline-offset:6px}

/* ── About you: a writer's words for their home (build.py → about_page, about.js; his picks, 2026-10-13: "3b", "4a") ─────── */
.about-you h1{margin:0 0 10px}
.about-you .lab{display:block; font:500 10.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin:0 0 6px}
.about-you .hint{display:block; margin-top:6px; font:400 .86rem/1.4 var(--text); color:var(--soft)}
.ay-lede{max-width:44rem; margin:0 0 34px; font:400 1.02rem/1.5 var(--text); color:var(--soft)}
.ay-lede a, .ay-name a, .ay-guide a{color:var(--accent)}
.ay-who{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:26px 36px; max-width:72rem; margin:0 0 44px}
.ay-name{grid-column:1 / -1; margin:0; font:400 1.02rem/1.4 var(--text)}
.ay-name .nm{font:400 1.5rem/1.2 var(--display); margin-right:14px}
.ay-name a{font-size:.9rem}
.about-you input[data-field], .about-you textarea{width:100%; box-sizing:border-box; font:400 1.05rem/1.55 var(--text); color:var(--ink);
  background:color-mix(in srgb,var(--ground) 70%,#fff); border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); border-radius:3px; padding:9px 12px}
.about-you input[data-field]:focus, .about-you textarea:focus{outline:none; border-color:var(--ink)}
.about-you textarea{resize:vertical}
.ay-bio{max-width:72rem}
.ay-bio h2{margin:0 0 10px; font:400 1.6rem/1.2 var(--display)}
.ay-guide{max-width:46rem; margin:0 0 22px; font:400 1rem/1.55 var(--text); color:var(--ink)}
.ay-facts{margin:0 0 26px; padding:14px 16px; border-left:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 5%,transparent)}
.ay-facts .hint{margin:0 0 10px}
.ay-facts .chips{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.ay-facts .chip{font:400 .95rem/1.35 var(--text); text-align:left; color:var(--ink); background:var(--ground); cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:16px; padding:6px 14px}
.ay-facts .chip:hover{border-color:var(--accent); color:var(--accent)}
.ay-facts .chip::before{content:"+ "; color:var(--accent)}
.ay-boxes{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.25fr); gap:26px; align-items:start}
.ay-box{display:block}
.ay-box .for{display:block; margin:-2px 0 8px; font:italic 400 .92rem/1.35 var(--text); color:var(--soft)}
.ay-box .count{display:block; margin-top:6px; font-size:10.5px; color:var(--soft)}
.ay-box .count.long{color:var(--accent)}
.ay-voice{margin:30px 0 0; max-width:34rem}   /* a recording on About (step 113; build.py → about_voice) */
.ay-voice select{width:100%; font:inherit; padding:8px 10px; color:var(--ink); background:var(--sheet, transparent); border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:3px}
.ay-state{min-height:1.2em; margin:22px 0 0; font-size:10.5px; color:var(--soft)}
.about-you textarea{overflow:hidden; min-height:5.5em}
@media (max-width:900px){ .ay-boxes, .ay-who{grid-template-columns:1fr} }

/* ── Your typefaces: a writer's own licensed faces (build.py → typefaces_page, typefaces.js; his picks, 2026-10-13) ──────── */
.typefaces-page h1{margin:0 0 10px}
.tf-lede{max-width:44rem; margin:0 0 30px; font:400 1.02rem/1.5 var(--text); color:var(--soft)}
.tf-add{max-width:44rem; margin:0 0 40px; padding:16px 18px; border-left:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 5%,transparent)}
.tf-tick, .tf-web{display:flex; gap:10px; align-items:baseline; font:400 1rem/1.45 var(--text); color:var(--ink); cursor:pointer}
.tf-add .row{margin:14px 0 8px}
.tf-add .row button[disabled]{opacity:.45; cursor:default}
.tf-add .hint{margin:0; font:400 .86rem/1.4 var(--text); color:var(--soft)}
.tf-said{color:var(--soft)}
.tf-list{list-style:none; margin:0; padding:0; max-width:52rem}
.tf-list > li{padding:22px 0 24px; border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.tf-list > li.empty{font-style:italic; color:var(--soft); border:0}
.tf-sample{margin:0 0 6px; font-size:1.7rem; line-height:1.25; color:var(--ink)}
.tf-name{margin:0 0 4px; font:500 10.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.tf-facts, .tf-lic{margin:0 0 8px; font:400 .92rem/1.45 var(--text); color:var(--ink)}
.tf-lic{color:var(--soft); font-size:.84rem}
.tf-lic a{color:var(--accent)}
.tf-web{margin:6px 0 10px; font-size:.95rem}
.tf-files{list-style:none; margin:0 0 10px; padding:0}
.tf-files li{display:flex; gap:12px; align-items:baseline; padding:3px 0; font:400 .92rem/1.4 var(--text)}
.tf-files .mono{font-size:10.5px; color:var(--soft)}
.tf-files button{margin-left:auto; padding:5px 9px; font:500 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:none; border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:12px; cursor:pointer}

/* Add a move here (his words, 2026-10-14: "It's brillian. shipt it"): a few for this place, then every move folded by family */
.sheet .why{margin:-4px 0 10px; color:var(--soft); font-size:.9rem; font-style:italic}
.sheet .every-head{margin-top:26px}
.sheet details.fam-fold{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.sheet details.fam-fold:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.sheet details.fam-fold > summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; justify-content:space-between; padding:12px 2px}
.sheet details.fam-fold > summary::-webkit-details-marker{display:none}
.sheet details.fam-fold > summary .n{font:italic 400 1.15rem/1.2 var(--display)}
.sheet details.fam-fold > summary .c{font:500 11px/1 var(--mono); letter-spacing:.14em; color:var(--soft)}
.sheet details.fam-fold > summary:hover .n{color:var(--accent)}
.sheet details.fam-fold[open] > .picks{padding:4px 0 16px}
/* My poems and My essays as an index (his words, 2026-10-15: "2a"): a line to each piece, as My notes is: the year it was begun, its title in
   its own title face, its first line quieter, its length, where it is kept and where it first appeared; what can be done, on pointing;
   As set shows each whole, as before. Found by One Find ("1a"): the words found marked, the line found beneath (mine.js) */
.library .mine-tools{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:0 0 14px}
.library .mine-tools .find{font:400 .95rem/1.2 var(--text); padding:7px 14px; min-width:min(300px, 70vw); border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);
  border-radius:3px; background:transparent; color:var(--ink)}
.library .mine-tools .find:focus{outline:none; border-color:var(--ink)}
.library .mine-tools [role="group"]{display:flex; gap:12px}
.library .mine-tools [role="group"] button{padding:0 0 2px; background:none; border:0; border-bottom:1px solid transparent; border-radius:0; color:var(--soft)}
.library .mine-tools [role="group"] button[aria-pressed="true"]{color:var(--ink); border-bottom-color:currentColor}
.library .mine-tools [role="group"] button:hover{color:var(--ink)}
.library .none-found{margin:0 0 12px; color:var(--soft); font-style:italic}
.library .none-found button{font:inherit; font-style:normal; color:var(--ink); background:none; border:0; border-bottom:1px solid currentColor; padding:0; cursor:pointer}
.library .none-found[hidden]{display:none}
.mine.index{gap:0; max-width:none}
.mine.index > li{position:relative; display:block; padding:7px 0; border-bottom:0; border-top:1px solid color-mix(in srgb,var(--ink) 11%,transparent)}
.mine.index > li > :is([data-mine], .read-on){display:none}
.mine:not(.index) > li > .line{display:none}
.mine .line{display:grid; grid-template-columns:3.2em minmax(0,1fr) auto; column-gap:14px; align-items:baseline; color:var(--ink); text-decoration:none; min-width:0}
.mine .line .yr{font-size:10.5px; color:var(--soft); font-variant-numeric:tabular-nums}
.mine .line .words{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:400 1rem/1.45 "Stanza Thin Space", var(--words, var(--text)); min-width:0}
.mine .line .t{font-family:var(--titles, var(--words)); font-size:1.06em}
.mine .line .first{color:var(--soft); font-size:.92em}
.mine .line .n{font-size:10.5px; color:var(--soft); white-space:nowrap}
.mine .line .f{grid-column:2 / -1; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:italic 400 .86rem/1.4 "Stanza Thin Space", var(--words, var(--text)); color:var(--soft)}
.mine .line .f .how{font-style:normal}
.mine .line:hover .t{text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent); text-underline-offset:3px}
.mine.index > li > .acts{position:absolute; right:0; top:4px; gap:6px; padding-left:14px; background:var(--ground); opacity:0; pointer-events:none; transition:opacity .12s}
.mine.index > li > .acts > :is(.mono, .first-in){display:none}   /* said on the line itself */
.mine.index > li.group-start{margin-top:18px; border-top-color:color-mix(in srgb,var(--ink) 34%,transparent)}   /* Worth a look: each group of pieces that read almost alike */
.mine.index > li > .acts > button[data-op="kind"]{display:none}   /* made another kind in the composer (his words, 2026-10-15: "I do't know that make it an essay and make it a note are needed here"); As set keeps them */
.mine.index > li > .acts button{padding:5px 8px; font-size:10px}
.mine.index > li:hover > .acts, .mine.index > li:focus-within > .acts{opacity:1; pointer-events:auto}
@media (hover:none), (max-width:640px){
  .mine .line{grid-template-columns:2.6em minmax(0,1fr); row-gap:1px}
  .mine .line .n{grid-column:2}
  .mine.index > li > .acts{position:static; opacity:1; pointer-events:auto; padding:4px 0 2px calc(2.6em + 14px); background:none; flex-wrap:wrap}
  .mine.index > li > .acts > button:not([data-op="share"]){display:none}   /* Share a tap away (2026-10-14); the rest As set, folded under */
}
/* the ways in (his words, 2026-10-15: "start on the ways in"; find.js → waysIn): a row to each kind of knowing, its name in the labels'
   small capitals, each choice in words with how many a click would leave; the one chosen in ink, underlined; type alone, no boxes */
.library .ways{display:grid; gap:4px; margin:0 0 16px}
.library .ways[hidden]{display:none}
.library .way{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; margin:0; font:400 .9rem/1.5 var(--text)}
.library .way .way-name{flex:0 0 12em; white-space:nowrap; font:500 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.library .way button{padding:0 0 1px; background:none; border:0; border-bottom:1px solid transparent; border-radius:0; color:var(--soft);
  font:inherit; letter-spacing:0; text-transform:none; cursor:pointer; font-variant-numeric:oldstyle-nums}
.library .way button .k{color:color-mix(in srgb,var(--soft) 70%,transparent); font-size:.85em}
.library .way button:hover{color:var(--ink)}
.library .way button[aria-pressed="true"]{color:var(--ink); border-bottom-color:currentColor}
.library .way button.sub::before{content:"› "; color:color-mix(in srgb,var(--soft) 70%,transparent)}   /* a collection, after its heading (step 79) */
@media (max-width:640px){ .library .way .way-name{flex-basis:100%; margin-top:6px} }
/* the Index in groups, as the composer's shelf keeps them (step 79; mine.js → named): a heading in the labels' small capitals, each
   collection under it in the titles' face, set in to the titles' column, with how many; each a way in to it; the line's own "under …"
   let go while the groups say it */
.mine.index > li.group{padding:0; border-top:0}
.mine.index > li.g-head{margin-top:26px; padding-bottom:7px}
.mine.index > li.g-head:first-child{margin-top:2px}
.mine.index > li.g-coll{margin-top:12px; padding:0 0 5px calc(3.2em + 14px)}
.mine.index > li.g-head + li.g-coll{margin-top:0}
.mine.index > li.group > :is(button, span){padding:0 0 1px; background:none; border:0; border-bottom:1px solid transparent; border-radius:0; color:var(--soft); cursor:default}
.mine.index > li.g-head > :is(button, span){font:500 10.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.mine.index > li.g-coll > :is(button, span){font:italic 400 1.06rem/1.3 var(--titles, var(--words)); letter-spacing:0; text-transform:none}
.mine.index > li.g-coll > button{color:var(--ink)}
.mine.index > li.group > button{cursor:pointer}
.mine.index > li.group > button:hover, .mine.index > li.group > button[aria-pressed="true"]{color:var(--ink); border-bottom-color:currentColor}
.mine.index > li.group .k{font:400 10.5px/1 var(--mono); font-style:normal; letter-spacing:0; color:var(--soft)}
.mine.index > li.group[hidden]{display:none}
.mine.index.grouped .line .u{display:none}
@media (hover:none), (max-width:640px){ .mine.index > li.g-coll{padding-left:calc(2.6em + 14px)} }
/* the index of titles and first lines (his words, 2026-10-15: "index of titles and first lines."): as a Collected Poems prints it, A to Z
   under each letter, a first line in italic with its title beside it, a title in roman with its year, a dotted leader between (mine.js) */
.mine[hidden], .first-lines[hidden], .library .mine-tools .mine-order[hidden]{display:none}
.first-lines{max-width:46rem; margin:4px 0 0; font:400 1rem/1.5 "Stanza Thin Space", var(--words, var(--text))}
.first-lines h2.letter{margin:26px 0 8px; font:italic 400 1.35rem/1 var(--titles, var(--words)); color:var(--soft)}
.first-lines h2.letter:first-child{margin-top:6px}
.first-lines ol{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.first-lines a{display:flex; align-items:baseline; gap:8px; color:var(--ink); text-decoration:none; min-width:0}
.first-lines .k{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.first-lines .k.fl{font-style:italic}
.first-lines .dots{flex:1 1 2rem; min-width:1rem; border-bottom:1px dotted color-mix(in srgb,var(--soft) 60%,transparent); transform:translateY(-.3em)}
.first-lines .r{flex:0 1 auto; min-width:0; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--soft); font-size:.92em}
.first-lines .r.yr{flex:none; font:500 10.5px/1 var(--mono); font-variant-numeric:tabular-nums}
.first-lines .r:empty, .first-lines .dots:has(+ .r:empty){display:none}
.first-lines a:hover .k{text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent); text-underline-offset:3px}
@media (max-width:640px){
  .first-lines a{flex-wrap:wrap; row-gap:0}
  .first-lines .k{white-space:normal}
  .first-lines .dots{display:none}
  .first-lines .r{flex-basis:100%; max-width:none; padding-left:1.2em}
}
/* At a glance (his words, 2026-10-15: "a birds eye view of their work" · "much more subdued" · "orderly" · "elegant" · "literary" · "my pick
   is v=b"): the whole as a colophon, a few lines centered, the look's own face at reading sizes, one printers' mark, the ink alone (glance.js) */
.glance{display:grid; gap:26px; max-width:38rem; margin:10px 0 48px; font:400 1rem/1.6 var(--text); color:var(--ink)}
.glance a{color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.glance a:hover{border-bottom-color:currentColor}
.glance p{margin:0}
.glance .gl-none, .glance .gv-quiet{color:var(--soft); font-style:italic; font-size:.95rem}
.glance .gv-quiet a{font-style:normal}
.gv-colophon{display:grid; gap:6px; justify-items:center; text-align:center; padding:8px 0}
.gv-c1{font:400 clamp(1.3rem,2.2vw,1.55rem)/1.4 var(--display); font-variant-numeric:oldstyle-nums}
.gv-c2{font-style:italic; color:var(--soft); font-variant-numeric:oldstyle-nums}
.gv-mark{margin:14px 0 !important; font:400 1.2rem/1 var(--display); color:var(--ink)}
.gv-c3{font-variant-numeric:oldstyle-nums}
.gv-colophon .gv-years{list-style:none; margin:10px 0; padding:0; display:grid; gap:2px; font-size:.95rem; color:var(--soft); font-variant-numeric:oldstyle-nums}
.gv-colophon .gv-years .y{font-variant-caps:normal; color:var(--ink)}
/* the firsts and the longests, folded under */
.gv-more summary{cursor:pointer; list-style:none; width:max-content; font-variant-caps:all-small-caps; letter-spacing:.07em; color:var(--soft)}
.gv-more summary::-webkit-details-marker{display:none}
.gv-more summary::before{content:"▸"; display:inline-block; margin-right:.5em; font-size:.75em; transition:rotate .12s}
.gv-more[open] summary::before{rotate:90deg}
.gv-more summary:hover{color:var(--ink)}
.gv-more dl{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 22px; margin:12px 0 0; font-variant-numeric:oldstyle-nums}
.gv-more dt{color:var(--soft)}
.gv-more dd{margin:0}
.gv-more .gv-t{font-style:italic}
.gv-more .how{color:var(--soft); margin-left:.6em}
@media (max-width:640px){ .gv-more dl{grid-template-columns:1fr; gap:0} .gv-more dd{margin-bottom:8px} }