/* Poem pages: the transmission (founder, 2026-10-24 night, option M-2 on docs/concept-2026-10-24/09-poem-mono.html;
   the petrol, vellum and letter versions from earlier that day are in _archive/). Petrol ground, the poem in
   Space Mono in cream, every stanza numbered in the margin, pulled lines and the closing line in citron caps,
   the title in Big Shoulders citron. Matches the Instagram carousel. No decoration beyond the numbers, no blur,
   no grain, no handwriting. Contrast: cream #F7F4EC on petrol #122629 is 15.1:1; citron #D9F14E on petrol 11.6:1. */

.poem-page{position:relative;min-width:0;isolation:isolate}

.poem{max-width:720px;margin:0 auto;padding:40px 0 0;min-width:0}
.poem__head{margin-bottom:48px}
.poem__meta{font:700 10px/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.poem h1{font:900 clamp(64px,13vw,150px)/.85 var(--f-cond);text-transform:uppercase;letter-spacing:.01em;color:var(--lime);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.poem__body{display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:1.5em;font:400 clamp(15px,1.8vw,17.5px)/1.75 var(--f-mono);color:var(--cream);overflow-wrap:break-word}
.poem__body p{margin:0;grid-column:2}
.poem__body .n{grid-column:1;font:700 10px/1.75 var(--f-mono);letter-spacing:.14em;color:var(--lime);opacity:.8;padding-top:.35em;user-select:none}
.poem__body em,.poem__body i{font-style:italic}
.poem__body strong,.poem__body b{font-weight:700}
.poem__body a{text-decoration-thickness:2px;text-underline-offset:3px}
.poem__body a:hover,.poem__body a:focus-visible{background:var(--lime);color:var(--ink)}
/* one-line stanzas the poem leans on: mark them <p class="pull"> in the body; the last line <p class="end"> */
.poem__body .pull{font:700 clamp(20px,3vw,27px)/1.25 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--lime)}
.poem__body .end{font:700 clamp(40px,8vw,66px)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.02em;color:var(--lime);margin-top:.2em}
/* Attribution that stays on screen while scrolling, so a phone screenshot of any part of the poem carries the
   name (founder, 2026-10-24 night). Decoration for sighted readers; the footer carries the name for everyone else. */
.poem__mark{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));margin:0;font:700 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream);background:var(--ink);padding:6px 8px;opacity:.85;pointer-events:none;z-index:2}

.post__more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;border-top:1px solid var(--cream);padding-top:14px;margin-top:70px;max-width:720px;margin-inline:auto}
.post__more .cap{flex:0 0 auto}
.post__more a{font:700 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream);text-decoration:none;border:1.5px solid var(--cream);padding:8px 12px}
.post__more a:hover,.post__more a:focus-visible{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.poem-page .attachment{margin:56px auto 0}
.foot{border-top-color:var(--cream)}

@media (max-width:699.98px){
  .poem__head{margin-bottom:36px}
  .poem__body{grid-template-columns:30px 1fr;column-gap:10px;row-gap:1.4em}
  .poem__body .n{font-size:9px}
}
