/* stanza.pictures — the links at the top and the bottom of every page; the experience is everything between */
.site-top{position:absolute; z-index:6; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center;
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) 0}
.site-bottom{position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:16px 18px;
  padding:28px var(--pad) calc(30px + env(safe-area-inset-bottom,0px)); border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.site-top a, .site-bottom a{color:var(--ink); text-decoration:none}
/* a room opens with its labels shown (his word, 2026-10-11): the first move's label sits below the strip, never under the
   seal and the name (his phone, 2026-10-11: "problem with overlap between logo and move names") */
#chapter > section.mv:first-of-type > .label{top:calc(64px + env(safe-area-inset-top,0px))}   /* of-type: the editor at 8780 adds its own first */
/* on a phone, an opening's words at the top start below that label, however long their line (his "Sky—Days and
   Nights—Happiness", 2026-10-12, reached across it) */
@media (max-width:700px){ body:not(.nolabels) #chapter > section.mv-bleed:first-of-type .calm.at-top{top:calc(94px + env(safe-area-inset-top,0px))} }
/* and a frontispiece's plate starts below the strip (whitman/grass on a phone, 2026-10-15: the seal and "the frontispiece" lay over the top
   of its picture), and below that label when it shows (the first move beneath its label, next) */
@media (max-width:700px){ #chapter > section.mv-frontis:first-of-type{padding-top:calc(60px + env(safe-area-inset-top,0px))} }
/* ── the first move beneath its label ── while labels show, a room's first move begins below its label (his words, 2026-10-16: "let's
   watch the labels don't overlap": the frontispiece's plate reached up into "the frontispiece" at 1500 wide, and on a phone a pair's
   pictures and a panorama's band into theirs). These moves pad their tops for the strip alone (60px, or a tenth of the screen) and the
   first label sits at 64px, where their pictures and words begin: the move is let down 36px (44px on a phone), all of it together, by a
   clear border at its top (its own ground shows through), its label kept where it was. The moves that fill the screen from the top (the
   bleed, the overprint, the detail, the reveal's stage, the grid) keep their label over the picture, as before. Measured with every move
   as a room's first, in Chromium at 1000, 1320 and 1500 wide and in WebKit as an iPhone 13: nothing within 8px of a label's words. A new
   move that can open a room is measured the same way, and named here if it needs letting down */
body:not(.nolabels) #chapter > section.mv:first-of-type:is(.mv-arch, .mv-film, .mv-frontis, .mv-gatefold, .mv-inset, .mv-jump, .mv-margin, .mv-offset, .mv-overlap, .mv-pair, .mv-panorama, .mv-row, .mv-sheet, .mv-spectrum, .mv-stair, .mv-triptych, .mv-verso, .mv-vignette){border-top:calc(36px + env(safe-area-inset-top,0px)) solid transparent}
body:not(.nolabels) #chapter > section.mv:first-of-type:is(.mv-arch, .mv-film, .mv-frontis, .mv-gatefold, .mv-inset, .mv-jump, .mv-margin, .mv-offset, .mv-overlap, .mv-pair, .mv-panorama, .mv-row, .mv-sheet, .mv-spectrum, .mv-stair, .mv-triptych, .mv-verso, .mv-vignette) > .label{top:28px}
@media (min-width:701px){ body:not(.nolabels) #chapter > section.mv-frontis:first-of-type .plate img{max-height:calc(84svh - 36px)} }   /* its plate still whole on the first screen */
@media (max-width:700px){   /* on a phone 44px: some moves begin higher there, at 53px */
  body:not(.nolabels) #chapter > section.mv:first-of-type:is(.mv-arch, .mv-film, .mv-frontis, .mv-gatefold, .mv-inset, .mv-jump, .mv-margin, .mv-offset, .mv-overlap, .mv-pair, .mv-panorama, .mv-row, .mv-sheet, .mv-spectrum, .mv-stair, .mv-triptych, .mv-verso, .mv-vignette, .mv-around, .mv-books, .mv-fracture, .mv-ovals, .mv-publications, .mv-salon, .mv-scatter, .mv-spread, .mv-stars){border-top:calc(44px + env(safe-area-inset-top,0px)) solid transparent}
  body:not(.nolabels) #chapter > section.mv:first-of-type:is(.mv-arch, .mv-film, .mv-frontis, .mv-gatefold, .mv-inset, .mv-jump, .mv-margin, .mv-offset, .mv-overlap, .mv-pair, .mv-panorama, .mv-row, .mv-sheet, .mv-spectrum, .mv-stair, .mv-triptych, .mv-verso, .mv-vignette, .mv-around, .mv-books, .mv-fracture, .mv-ovals, .mv-publications, .mv-salon, .mv-scatter, .mv-spread, .mv-stars) > .label{top:20px}
}
/* ── end of the first move beneath its label ── */
.site-top a:hover, .site-bottom a:hover{text-decoration:underline; text-underline-offset:3px}
/* the wordmark: its own name, so it never touches the printers' marks (.mark) on the pages */
.wordmark{font:italic 400 1.35rem/1 var(--display); letter-spacing:.01em}
/* the seal beside the name (app/tools/mark.py), the link home in every strip as loupe's tile is in its bar (his word,
   2026-10-11): the name's color, a little taller than the name, centered on it */
.site-top .wordmark{display:inline-flex; align-items:center; gap:.4em}
.wordmark .seal{flex:none; width:auto; height:1.2em}
/* the seal alone above the landing page's title, in rubric red */
.about .device{display:block; height:60px; width:auto; color:var(--rubric,#9a3324); margin:0 0 18px}
@media (max-width:700px){ .about .device{height:46px; margin-bottom:14px} }
/* the first screen, a title page (his pick, 2026-10-17: "2 the title page please"; the design review's o2, its rules as drawn): all of it
   centred on the cream, the seal in rubric, Bodoni for the name and its line, Caslon for who it is for, Franklin capitals for the two ways
   in, each with the pointing hand; the essay begins below the first screen */
.title-page{min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:88px var(--pad) 56px}
.title-page .device{display:block; height:56px; width:auto; color:var(--rubric,#9a3324); margin:0 0 26px}
.title-page h1{font:400 clamp(3.8rem,10vw,6.8rem)/.95 var(--modern); letter-spacing:-.02em; margin:0 0 20px}
.title-page .lede{font:italic 400 clamp(1.5rem,2.8vw,2.05rem)/1.3 var(--modern); color:var(--ink); margin:0 0 20px; max-width:17em; text-wrap:balance}
.title-page .who{font:400 1.14rem/1.55 var(--text); color:var(--soft); margin:0 0 38px; max-width:30rem; text-wrap:balance}
.title-page .onward{display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:14px 34px; margin:0}
.title-page .onward a{font:600 .8rem/1 var(--plain); text-transform:uppercase; letter-spacing:.18em; color:var(--rubric,#9a3324); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,currentColor 38%,transparent); padding-bottom:6px; white-space:nowrap}
.title-page .onward a.quiet{color:var(--ink)}
.title-page .onward a:hover{border-bottom-color:currentColor}
.title-page .onward .hand{font:1.3em/0 var(--orn); letter-spacing:0; margin-left:.4em; position:relative; top:.06em}
@media (max-width:520px){ .title-page .onward{flex-direction:column; align-items:center; gap:24px} }
.title-page + main.about{padding-top:clamp(56px,9vh,96px)}
/* the essay opens on its first four words in capitals, letterspaced, in the text's own ink (his words, 2026-10-17: "instead of the drop
   cap w lets' try small or allcaps for 'What a poem says'" · "b the all caps"; tools/site.py wraps them) */
.about .first-words{text-transform:uppercase; letter-spacing:.08em}
.site-top nav, .site-bottom nav{display:flex; gap:20px; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
/* the foot (his words, 2026-10-19: "could we improve the footer's formatting?"): the credit on a line of its own, in full, then the
   wordmark and the links on the last line, level with the Labels button; the links wrap as a group, each kept whole. Each of the
   credit's phrases is kept whole too (tools/site.py → CREDIT), and a book's title never breaks; on a phone, a phrase to a line */
.site-bottom .credit{order:-1; flex-basis:100%; font:500 11px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
.site-bottom .credit > span:not(.sep){display:inline-block; text-wrap:balance}
.site-bottom .credit i{white-space:nowrap}
.site-bottom nav{flex-wrap:wrap; justify-content:flex-end; row-gap:14px}
.site-bottom nav a{white-space:nowrap}
@media (max-width:700px){ .site-bottom nav{justify-content:flex-start}
  .site-bottom .credit > span:not(.sep){display:block} .site-bottom .credit .sep{display:none} }

/* the About page */
main.about{max-width:36rem; margin:0 auto; padding:clamp(110px,18vh,190px) var(--pad) clamp(70px,12vh,120px)}
.about h1{font:italic 400 clamp(3rem,9vw,5rem)/1 var(--display); margin:0 0 10px}
.about .lede{font:400 clamp(1.35rem,2.6vw,1.75rem)/1.35 var(--display); margin:0 0 30px}
.about p{margin:0 0 18px; font-size:1.12rem; line-height:1.6}
.about .room{color:var(--soft); font-style:italic}
/* For poets (his word, 2026-10-12), below the About paragraphs: a hairline, a title in the display face's italic */
/* the poets who claimed both, folded under "Some poets" (his words, 2026-10-14: "fold it under whne it's not needed"), a line to each,
   the name in small capitals; then what stanza gives in place of a press, a quiet list */
.about a[href="#poets"]{color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; cursor:pointer}
.about .fold{margin:-6px 0 24px; padding-left:16px; border-left:1px solid color-mix(in srgb,var(--ink,#222) 16%,transparent); color:var(--soft)}
.about .fold ul, .about .lines ul{list-style:none; margin:0; padding:0}
.about .fold li{margin:0 0 10px; font-size:.98rem; line-height:1.5}
.about .fold b{font-weight:inherit; font-variant-caps:all-small-caps; letter-spacing:.06em; color:var(--ink)}
.about .lines ul{margin:4px 0 26px}
.about .lines li{margin:0 0 8px; padding-left:1.1em; text-indent:-1.1em; font-size:1.12rem; line-height:1.6}
.about .lines li::before{content:"·"; display:inline-block; width:1.1em; text-indent:0; color:var(--soft)}
body.x-editing .about .fold[hidden]{display:block}   /* the site editor shows it, to be rewritten */
/* what stanza gives a writer, a line to each, above the doors (tools/site.py → about_gives): its lead-in in small capitals, its example a link */
.about .gives{margin:46px 0 0}
.about .gives h2{margin:0 0 16px; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--soft)}
.about .gives ul{list-style:none; margin:0; padding:0}
.about .gives li{margin:0 0 12px; padding-left:1.1em; text-indent:-1.1em; font-size:1.08rem; line-height:1.55}
.about .gives li::before{content:"·"; display:inline-block; width:1.1em; text-indent:0; color:var(--soft)}
.about .gives b{font-weight:inherit; font-variant-caps:all-small-caps; letter-spacing:.06em}
.about .gives a{color:var(--ink); white-space:nowrap}
.about .gives .held{margin:0 0 18px; padding:10px 12px; border:1px dashed color-mix(in srgb,var(--ink) 30%,transparent); border-radius:3px; font-size:.9rem; color:var(--soft)}
/* a picture of stanza's own, large over the landing page (about.html's script), its others a click or an arrow away */
.shot-over{position:fixed; inset:0; z-index:90; background:rgba(14,15,13,.94); display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; padding:52px 6px 44px}
.shot-over[hidden]{display:none}
.shot-over img{grid-row:1; grid-column:2; justify-self:center; max-width:100%; max-height:calc(100svh - 104px); border-radius:4px; box-shadow:0 20px 60px -20px #000}
.shot-over .go{grid-row:1; font:300 42px/1 system-ui, sans-serif; color:#e9e6dd; background:none; border:0; cursor:pointer; padding:12px 14px}
.shot-over .go[hidden]{display:block; visibility:hidden}
.shot-over .prev{grid-column:1} .shot-over .next{grid-column:3}
.shot-over .x{position:absolute; top:8px; right:14px; font:300 34px/1 system-ui, sans-serif; color:#e9e6dd; background:none; border:0; cursor:pointer; padding:4px 10px}
.shot-over .n{position:absolute; left:0; right:0; bottom:14px; margin:0; text-align:center; color:#e9e6dd; opacity:.7;
  font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase}
html.shot-open{overflow:hidden}
.about .go a{color:var(--accent); font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
/* the ways on: three doors, as a room ends (his pick, 2026-10-13: "1", of sketches/2026-10-13-landing-foot; before it, a menu
   bar turned over, his word of 2026-10-12): a picture, a small line with the hand, the name in large italic; then the room
   line, the page's last word, centered */
.about .doors{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; align-items:start;
  width:min(54rem, calc(100vw - 48px)); margin:72px 0 0 calc(50% - min(27rem, 50vw - 24px))}   /* wider than the words, centred under them */
.about .door{display:grid; justify-items:center; gap:12px; color:var(--ink); text-decoration:none; text-align:center}
.about .door img{height:clamp(120px,13vw,168px); width:auto; max-width:100%; margin-bottom:8px; box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
.about .door .eyebrow{display:flex; align-items:center; gap:.55em; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase}
.about .door .eyebrow .word{opacity:.7}
.about .door .hand{font:1.35rem/1 var(--orn, serif); margin-top:-.08em}
.about .door .name{font:italic 400 clamp(1.3rem,2.1vw,1.7rem)/1.15 var(--display); border-bottom:1px solid currentColor}
.about .door:hover img{outline:2px solid var(--ink); outline-offset:4px}
.about .doors + .room{text-align:center; margin:64px 0 0}
/* five, with the essay (his word, 2026-10-16: "your rec"): wider, so each keeps a fourth's width; three over two below that.
   A picture wider than its door is cropped by the frame, never squeezed */
.about .door img{object-fit:cover}
.about .doors.five{grid-template-columns:repeat(5,1fr); gap:24px; width:min(72rem, calc(100vw - 48px)); margin-left:calc(50% - min(36rem, 50vw - 24px))}
@media (min-width:1241px){ .about .doors.five .door .name{font-size:clamp(1.2rem,1.55vw,1.45rem); white-space:nowrap} }   /* five across: each name on one line (his pick, "C") */
@media (max-width:1240px){ .about .doors.five{grid-template-columns:repeat(6,1fr); gap:44px 32px}
  .about .doors.five .door{grid-column:span 2} .about .doors.five .door:nth-child(4){grid-column:2 / span 2} }
@media (max-width:640px){ .about .doors, .about .doors.five{grid-template-columns:1fr; gap:48px; width:auto; margin-left:0}
  .about .doors.five .door, .about .doors.five .door:nth-child(4){grid-column:auto} }
.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 case study, "Whitman, as printed" */

/* room for the strip above the opening title, and for the Labels button beside the bottom links */
.site-bottom{padding-right:calc(var(--pad) + 104px)}
.site-bottom.home{padding-right:var(--pad)}   /* the landing page has no Labels button: its foot square at both edges */
@media (max-width:700px){ .site-bottom{padding-right:var(--pad); padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))} }

/* the landing page: no About at the top; at the foot, its own line, after the experience (his word, 2026-10-10) */
.site-bottom.first{flex-wrap:wrap; padding-top:clamp(56px,10vh,110px)}
.site-bottom.first .about-go{order:-1; flex-basis:100%; text-align:center; margin-bottom:clamp(44px,8vh,90px);
  font:italic 400 clamp(1.5rem,2.6vw,2.05rem)/1.2 var(--display); color:var(--ink)}
.site-bottom.first .credit{text-align:right}
@media (max-width:700px){ .site-bottom.first .credit{text-align:left} }

/* a chapter's opening words, when they sit in a top corner, clear the strip of links */
.mv-bleed .calm[style^="top:"]{margin-top:30px}
/* the privacy page and the terms: the About page's measure and type, the choices not yet made in marked boxes, as loupe's
   own drafts mark theirs (his word, 2026-10-12: "a publishable draft, understanding its a draft and marking it as such") */
.legal{max-width:38rem; margin:0 auto; padding:clamp(80px,13vh,140px) var(--pad) clamp(70px,12vh,120px)}
.legal h1{font:italic 400 clamp(2.6rem,7vw,4rem)/1 var(--display); margin:0 0 12px}
.legal .changed{margin:0 0 30px; color:var(--soft); font-style:italic}
.legal h2{font:italic 400 clamp(1.45rem,3vw,1.8rem)/1.2 var(--display); margin:0 0 14px}
.legal h3{font:italic 400 1.3rem/1.25 var(--display); margin:0 0 12px}
.legal section{margin:38px 0 0; padding-top:24px; border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.legal section.sub{margin-top:26px; padding-top:0; border-top:0}
.legal p, .legal li{font-size:1.06rem; line-height:1.6}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 18px; padding-left:1.2em}
.legal li{margin:0 0 10px}
.legal li::marker{color:var(--soft)}
.legal a{color:var(--accent); text-underline-offset:3px}
.legal mark.open{background:color-mix(in srgb,#e8c547 34%,transparent); color:inherit; padding:0 3px; border-radius:2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
.legal .draft{margin:0 0 34px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); border-radius:3px;
  font-size:.98rem; line-height:1.55; background:color-mix(in srgb,var(--ink) 3%,transparent)}
@media (max-width:640px){ .legal p, .legal li{font-size:1rem} }
/* the prices page (site/prices.html): two plans side by side with a rule between, never on cards; one above the other on a phone */
.prices{max-width:46rem}
.prices .lede{font-size:1.25rem; line-height:1.5; margin:0 0 38px}
.prices .plans{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent); margin:0 0 28px}
.prices section.plan{margin:0; border-top:0; padding:26px 28px 6px 0; min-width:0}   /* not the privacy page's ruled sections */
.prices .plan li{overflow-wrap:anywhere}
.prices section.plan + .plan{padding:26px 0 6px 28px; border-left:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.prices .plan h2{margin:0 0 6px}
.prices .price{margin:0 0 18px; color:var(--accent); font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.prices .plan li{margin:0 0 8px}
.prices .after{color:var(--soft)}
.prices .start{margin:26px 0 8px}
.prices .start a{color:var(--accent); font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent); padding-bottom:3px}
.prices .loupe{color:var(--soft); font-size:.98rem}
.prices .more-h{margin:44px 0 14px; padding-top:24px; border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.prices .held{margin:0 0 30px; padding:12px 14px; border:1px dashed color-mix(in srgb,var(--ink) 30%,transparent); border-radius:3px;
  font:500 12px/1.5 var(--mono); letter-spacing:.04em; color:var(--soft)}
@media (max-width:640px){
  .prices .plans{grid-template-columns:1fr}
  .prices section.plan, .prices section.plan + .plan{padding:22px 0 4px; border-left:0}
  .prices section.plan + .plan{border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
}