/* The shared .page, .masthead and .footer are the main-page shell. */
.poem-main{width:100%;margin:auto 0;padding:8px 0 12px}
.poem-heading{position:relative;text-align:center;margin:0 0 12px}
.poem-kicker{margin:0 0 5px;color:var(--accent);text-transform:uppercase;font:clamp(7px,.7vw,10px)/1.3 "Courier New",Courier,monospace;letter-spacing:.1em}
.poem-heading h1{font-size:clamp(18px,2vw,28px);line-height:1.12;font-weight:400;letter-spacing:-.025em;margin:0}
.poem-text{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(8px,2vw,32px);width:100%;font-size:clamp(3px,min(calc((100vw - 160px)/110),calc((100svh - 220px)/60)),14px);line-height:1.28}
.poem-column{min-width:0}
.poem-stanza{margin:0 0 .55em;color:var(--ink);font:inherit}
.poem-stanza:last-child{margin-bottom:0}
.poem-line{display:block;white-space:nowrap}
.poem-uncertain{text-decoration:underline dotted;text-decoration-color:var(--muted);text-underline-offset:.22em}
.poem-ending{display:flex;align-items:center;justify-content:center;gap:16px;min-height:24px;margin-top:10px}
.poem-transcription-note{color:var(--muted);font:clamp(6px,.6vw,8px)/1.35 "Courier New",Courier,monospace;margin:0}
.poem-back{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:24px;padding:2px 0;color:var(--muted);text-decoration:none;font:clamp(7px,.7vw,10px)/1.4 "Courier New",Courier,monospace;white-space:nowrap}
.poem-back span{color:var(--accent);font-size:1.3em}
.poem-back:hover{color:var(--ink)}.poem-back:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.poem-back-top{position:absolute;inset:0 auto auto 0}
/* Phones retain readable text and natural vertical scrolling. */
@media(max-width:699px){
 .poem-main{margin:0;padding:22px 0 30px}.poem-heading{margin-bottom:32px}.poem-kicker{font-size:9px;margin-bottom:12px}.poem-heading h1{font-size:clamp(27px,8vw,38px)}
 .poem-text{grid-template-columns:1fr;font-size:16px;line-height:1.7;column-gap:0}.poem-stanza{margin-bottom:24px}.poem-column:not(:last-child){margin-bottom:24px}.poem-line{white-space:normal;overflow-wrap:anywhere;padding-left:1.1em;text-indent:-1.1em}
 .poem-back{min-height:44px;font-size:10px}.poem-back-top{position:static;margin-bottom:18px}.poem-ending{flex-direction:column;gap:8px;margin-top:24px}.poem-transcription-note{font-size:8px;max-width:300px;text-align:center}
}
/* A small desktop window still uses the complete four-column composition. */
@media(min-width:600px) and (max-width:699px) and (hover:hover) and (pointer:fine){
 .poem-main{margin:auto 0;padding:8px 0 12px}.poem-heading{margin-bottom:12px}.poem-kicker{font-size:7px;margin-bottom:5px}.poem-heading h1{font-size:18px}.poem-text{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(8px,2vw,32px);font-size:clamp(3px,min(calc((100vw - 160px)/110),calc((100svh - 220px)/60)),14px);line-height:1.28}.poem-stanza{margin-bottom:.55em}.poem-stanza:last-child{margin-bottom:0}.poem-column:not(:last-child){margin-bottom:0}.poem-line{white-space:nowrap;padding:0;text-indent:0}.poem-back{min-height:24px;font-size:7px}.poem-back-top{position:absolute;margin:0}.poem-ending{flex-direction:row;gap:16px;min-height:24px;margin-top:10px}.poem-transcription-note{font-size:6px;max-width:none}
}
/* Touch tablets / landscape phones use two readable columns. */
@media(min-width:700px) and (max-width:999px) and (hover:none){
 .poem-main{margin:0;padding:22px 0 30px}.poem-text{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;font-size:14px;line-height:1.6}.poem-stanza{margin-bottom:22px}.poem-line{white-space:normal;overflow-wrap:anywhere}.poem-back{min-height:44px;font-size:10px}.poem-transcription-note{font-size:8px}
}