/* 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). */
.pages{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 28px; color:var(--soft)}
.pages a{color:var(--soft); text-decoration:none}
.pages a[aria-current]{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
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)}
.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}
.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)}
.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)}
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}
.book-end{padding:80px var(--pad) 90px; text-align:center; font:italic 400 1.15rem/1.4 var(--display)}

/* ── 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{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 .fill, .dock .go{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}
.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)}
.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}
body.editing .mv-reveal .shade{display:none}

/* 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}
.writing .write{min-height:3em}
.writing .write-title{font:italic 400 .88em/1.3 var(--display); color:var(--soft); margin:0 0 .8em}
.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)}
@media (max-width:900px){ .dock{bottom:calc(64px + env(safe-area-inset-bottom,0px)); padding:10px 12px} }

/* 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}
.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}
.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}
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 .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}
.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)}
.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)}

/* 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}