/* The look of the whole site: paper, ink, two Garamonds.
   Colors are named once here; every mark takes its color by name. */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-latin-ext-wght-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/eb-garamond-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;src:url("../fonts/eb-garamond-latin-ext-wght-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;src:url("../fonts/eb-garamond-latin-wght-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ground:#fcfaf5;      /* the page */
  --paper:#f6f1e6;       /* a plate */
  --ink:#1d1b18;
  --body:#2a2722;        /* running prose */
  --soft:#4a453c;        /* an unstressed syllable */
  --quiet:#6f675a;       /* labels, glosses, keys */
  --hair:#d3cab8;        /* hairlines */
  --red:#b3381e;
  --blue:#2b4c8c;
  --ochre:#9a7419;
  --green:#3f6b4f;
  --plum:#6d4a7c;
  --teal:#2a6c74;
  --umber:#7b4a2a;
  --slate:#5c6672;
  --edge:rgba(60,50,30,.12);
  --shade:rgba(120,100,60,.07);
  --tint:rgba(60,50,30,.07);       /* a quiet ground in a drawing */
  --display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --text:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--body);font-family:var(--text);font-size:18px;line-height:1.5;font-kerning:normal;font-variant-ligatures:common-ligatures;font-variant-numeric:oldstyle-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-line:underline;text-decoration-color:var(--hair);text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .2s,color .2s}
a:hover{text-decoration-color:var(--red)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:1px}
::selection{background:rgba(179,56,30,.16)}
.lab{font-style:normal;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560}

/* ---------- the page ---------- */
.top{display:flex;align-items:baseline;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;max-width:1220px;margin:0 auto;padding:18px clamp(16px,3vw,28px) 0}
.top a{text-decoration:none}
.top .name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6em;font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--ink)}
.top .name i{font-style:italic;text-transform:none;letter-spacing:.04em;font-size:14.5px;font-weight:420;color:var(--quiet);white-space:nowrap}
.top nav{display:flex;gap:clamp(14px,3vw,26px);font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:520;color:var(--quiet)}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--ink)}
/* (a finger's room around each word of the menu; nothing is drawn) */
.top nav a{position:relative;white-space:nowrap}
.top nav a::after{content:"";position:absolute;inset:-9px -7px -12px}
/* (on a phone under 390 px wide the four entries stand closer so that they keep one row, each entry whole; on
   one too narrow even for that, the row turns between two entries) */
@media (max-width:389.9px){
  .top nav{flex-wrap:wrap;gap:6px 13px;letter-spacing:.14em}
  .top nav a::after{inset:-9px -6px -12px}
}
@media (max-width:369.9px){
  .top nav{column-gap:12px;font-size:11.5px;letter-spacing:.1em}
}
main{display:block;min-height:70vh}
main:focus{outline:none}

.piece-hd{max-width:900px;margin:0 auto;padding:clamp(38px,7vw,84px) 20px clamp(30px,5vw,56px);text-align:center}
.kicker{margin:0 0 clamp(12px,2vw,18px);font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet);text-wrap:balance}
.kicker span,.ql{display:inline-block}
.piece-hd h1{margin:0;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:400;font-size:clamp(46px,9vw,92px);line-height:.98;letter-spacing:-.008em;color:var(--ink);text-wrap:balance}
.piece-hd .where{margin:clamp(12px,2vw,18px) 0 0;font-style:italic;font-size:clamp(16.5px,2vw,19px);color:var(--quiet);text-wrap:balance}
.lead{max-width:1120px;margin:0 auto;padding:0 20px clamp(36px,6vw,68px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,40px) 0}
.lead h2{margin:0 0 12px;color:var(--quiet)}
.lead p{margin:0;font-size:clamp(17.5px,1.6vw + 4px,19.5px);line-height:1.5;text-wrap:pretty}
.lead .said{margin:0}
.lead .said blockquote{font-size:clamp(23px,2.4vw + 4px,29px);margin-bottom:14px}
.lead .said .src{font-size:15px}
.lead .none{font-style:italic;color:var(--quiet)}
.lead-one{max-width:680px}
@media (min-width:860px){
  .lead{--g:clamp(30px,4.6vw,66px);grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .lead-about{padding-right:var(--g)}
  .lead-view{padding-left:var(--g);border-left:1px solid var(--hair)}
  .lead-one{grid-template-columns:minmax(0,1fr)}
  .lead-one .lead-about{padding-right:0}
}

.plates{max-width:1220px;margin:0 auto;padding:0 clamp(16px,2vw,20px);display:grid;gap:clamp(26px,5vw,60px)}

.sec{max-width:720px;margin:0 auto;padding:clamp(44px,7vw,84px) 20px 0}
.sec>h2{margin:0 0 clamp(18px,3vw,28px);font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet);display:flex;align-items:center;gap:16px}
.sec>h2::after{content:"";flex:1;border-top:1px solid var(--hair)}
/* a notice where a page should be (js/main.js): the address names no page, or the page did not come. The button
   to try again is set as a link is, with a finger's room around it */
.notice .retry{position:relative;appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration-line:underline;text-decoration-color:var(--hair);text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .2s}
.notice .retry::after{content:"";position:absolute;inset:-10px -7px}
.notice .retry:hover{text-decoration-color:var(--red)}
.notice .retry[aria-disabled="true"]{cursor:default;text-decoration-line:none}
.notice .keep{white-space:nowrap}
.said{margin:0 0 clamp(30px,5vw,46px)}
.said blockquote{margin:0 0 16px;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(24px,3.6vw,32px);line-height:1.2;color:var(--ink);text-wrap:balance;hanging-punctuation:first}
.said p{margin:0;font-size:clamp(17.5px,2vw,19px);text-wrap:pretty}
.said .src{margin-top:10px;font-size:15px;font-style:italic;color:var(--quiet);text-wrap:pretty}
/* a title inside a line that is itself italic stands upright */
.src i,.where i,.rec-say i{font-style:normal}
.said blockquote i{font-style:normal}
.readon a{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;padding:0 0 clamp(14px,2.4vw,20px);border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.readon a b{font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(23px,3.2vw,29px);line-height:1.1;text-wrap:balance}
.readon a span{font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:520;color:var(--quiet);transition:color .2s}
.readon a:hover span{color:var(--red)}
/* (one shape at each width, whatever the title's length: on a wide page the words "Read it here" keep the right of
   the row and a long title turns beside them; on a phone they stand under the title) */
.readon a span{flex:none;text-wrap:balance}
@media (min-width:620px){.readon a{flex-wrap:nowrap}.readon a b{min-width:0}.readon a span{white-space:nowrap}}
@media (max-width:619.9px){.readon a{flex-direction:column;align-items:flex-start;gap:7px}}
.readon p{margin:12px 0 0;font-size:15px;font-style:italic;color:var(--quiet)}
/* a work that cannot be printed here: where it can be found, and what stands here in its place */
.readon .readon-note{margin:0 0 clamp(16px,2.6vw,22px);font-size:clamp(17.5px,2vw,19px);font-style:normal;color:var(--body);text-wrap:pretty}
.readon-out a b{font-size:clamp(20px,2.7vw,25px);line-height:1.15}
.readon-out a+a{margin-top:clamp(13px,2.2vw,18px)}
.sources ul{margin:0;padding:0;list-style:none;font-size:15.5px;line-height:1.45;color:var(--quiet)}
.sources li{margin:0 0 7px;padding-left:1.2em;text-indent:-1.2em;text-wrap:pretty;overflow-wrap:break-word}
.sources li b{font-weight:560;color:var(--body)}
.sources details{margin-top:16px;font-size:15.5px;color:var(--quiet)}
.sources summary{cursor:pointer;font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:520;margin-bottom:10px;list-style-position:inside}
.sources summary:hover{color:var(--ink)}
.rec{display:flex;align-items:center;gap:14px;margin:10px 0;max-width:520px}
.rec audio{display:none}
.rec-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0 0 0 1px;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s}
.rec-btn:hover,.rec.is-on .rec-btn{background:var(--ink);color:var(--paper)}
.rec-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.rec.is-on .rec-btn{padding-left:0}
.rec-bar{flex:1;min-width:0;height:22px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;--at:0%}
.rec-bar::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,var(--ink) var(--at),var(--hair) var(--at))}
.rec-bar::-moz-range-track{height:1px;background:var(--hair)}
.rec-bar::-moz-range-progress{height:1px;background:var(--ink)}
.rec-bar::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--ink)}
.rec-bar::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--ink)}
.rec-bar:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.rec-bar:disabled{cursor:default}
.rec-bar:disabled::-webkit-slider-thumb{visibility:hidden}
.rec-bar:disabled::-moz-range-thumb{visibility:hidden}
.rec-time{flex:none;min-width:5.4em;font-size:14px;font-variant-numeric:lining-nums tabular-nums;color:var(--quiet);text-align:right}
.rec-time:empty{display:none}
.rec-say{margin:0 0 6px;font-size:15px;font-style:italic;color:var(--quiet)}
.rec-say:empty{display:none}
.record .rec-title{margin:0;font-family:var(--display);font-size:clamp(22px,3vw,27px);line-height:1.15;color:var(--ink);text-wrap:balance}
.record .src{margin:0;font-size:15px;font-style:italic;color:var(--quiet)}
.foot{max-width:1220px;margin:clamp(64px,10vw,128px) auto 0;padding:18px clamp(16px,3vw,28px) 44px;border-top:1px solid var(--hair);font-size:14.5px;color:var(--quiet);display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 28px}
.foot p{margin:0}

/* ---------- a plate ---------- */
.plate{--band:34px;--fs:38px;--w0:300;--w1:700;--wn:420;position:relative;container-type:inline-size;border-radius:6px;color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge),inset 0 0 90px var(--shade);font-family:var(--text);line-height:1.4;text-align:left}
.plate-in{padding:clamp(16px,3cqw,30px) clamp(18px,5.2cqw,64px) clamp(22px,4cqw,46px)}
.plate-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 18px;padding-bottom:clamp(9px,1.6cqw,13px);border-bottom:1px solid var(--hair);margin-bottom:clamp(22px,4.2cqw,42px)}
.plate-ttl{margin:0;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;text-wrap:balance}
.plate-ttl span{display:inline-block;color:var(--quiet);font-weight:420;letter-spacing:.06em;text-transform:none;font-style:italic;font-size:13.5px;margin-left:.7em}
/* a title in the place line stands upright in the italic line */
.plate-ttl span i{font-style:normal}
.plate-tabs{display:flex;flex-wrap:wrap;gap:8px clamp(14px,3cqw,24px)}
@container (max-width:319.9px){.plate-tabs{column-gap:10px}}
/* four tabs that would take a second row keep to one: they stand closer, and their letters a little closer
   (the kit measures the row and sets `close`; the second rule must outweigh `.plate button` below) */
.plate-tabs.close{column-gap:7px}
.plate .plate-tabs.close button{letter-spacing:.12em}
.plate-tabs.closer{column-gap:6px}
.plate .plate-tabs.closer button{letter-spacing:.11em}
.plate button{position:relative;appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;padding:2px 0 3px;margin:0;font:inherit;font-style:normal;font-size:11.5px;font-weight:520;letter-spacing:.17em;text-transform:uppercase;color:var(--quiet);cursor:pointer;border-bottom:1.5px solid transparent;transition:color .25s,border-color .25s;-webkit-tap-highlight-color:transparent}
.plate button::after{content:"";position:absolute;inset:-10px -7px}
.plate button:hover{color:var(--ink)}
.plate button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--red)}
/* the ways of reading again at the foot of a narrow plate (shown there only: see the narrow plate below) */
.plate-tabs-foot{display:none}
.plate{scroll-margin-top:10px}

.plate-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,2.4cqw,20px) 0;align-items:start}
.main{min-width:0}
.stage{position:relative;min-width:0;scroll-margin-top:14px}
/* the key to the marks, straight under the passage on a narrow plate (kit/plate.js, keyUp()) */
.near-key{margin-top:clamp(10px,3cqw,16px)}
.near-key[hidden],.aside[hidden]{display:none}
.near-key>:last-child{margin-bottom:0}
.key-last .near-key{margin-bottom:6px}
/* under a short passage: its keys and numbered remarks, in two columns */
.under{margin-top:clamp(16px,3cqw,26px);padding-top:16px;border-top:1px solid var(--hair)}
.under[hidden]{display:none}
.under .aside{border-top:0;padding-top:0}
.under .keys{columns:2 230px;column-gap:clamp(24px,4cqw,52px)}
.under .keys>*{break-inside:avoid}
/* with numbered remarks: the key on the left, the remarks on the right */
.under .keys:has(>.points){columns:auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:0 clamp(24px,4cqw,52px);align-items:start}
.under .keys:has(>.points)>*{grid-column:1}
.under .keys:has(>.points)>.points{grid-column:2;grid-row:1/span 40;margin:0}
/* remarks alone, with no key to stand beside, take the width in two columns */
.under .keys:has(>.points:only-child){display:block;columns:2 230px}
.under .keys>.points:only-child{break-inside:auto}
.under .keys>.points:only-child li{break-inside:avoid}
/* a figure: its name and what it means on the left, its colors on the right */
.under .keys:has(>.term){columns:2;column-gap:clamp(24px,4cqw,52px)}
.under .keys>.plain,.under .keys>.term:not(:has(+.plain)){break-after:column}
.under .keys:has(>.term)>.plain{margin-bottom:0}
.ov{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.poem{display:flow-root;position:relative}
.row{position:relative;padding-top:var(--lv,0px)}
/* where one stanza follows another with nothing between, a little space parts them (padding, not
   margin: the margins of the lines fold into each other, and a margin here would be lost in them) */
.row.stanza{padding-top:calc(var(--fs) * .5 + var(--lv,0px))}
/* rows that the edition sets deeper in, where the reading says so (`indent`) */
.row.in{padding-left:calc(var(--fs) * 2)}
.tx{margin:calc(var(--band) / -2) 0 calc(var(--band) / 2);font-family:var(--display);font-variant-numeric:lining-nums;font-size:var(--fs);font-weight:var(--wn);letter-spacing:.003em;line-height:calc(1.16em + var(--band));cursor:default}
/* a row of verse keeps its line whole; where the plate is too narrow it turns, and the turned part stands in.
   A row of prose runs on. A passage may hold both, so each row is set by its own kind. */
.tx.k-v{white-space:nowrap}
.turns .tx.k-v,.is-prose .tx.k-v{white-space:normal;padding-left:1.3em;text-indent:-1.3em}
.turns .tx.k-v{text-wrap:balance;padding-right:var(--end,0px)}
.tx.k-p{text-wrap:pretty}
/* a paragraph of prose among lines of verse, on a tab that does not mark it: its lines stand close, with the
   room of one line of verse after the last */
.tx.k-p.plain{margin:-.07em 0 calc(var(--band) - .07em);line-height:1.3em}
/* and where lines of verse turn, a line that the tab showing does not mark keeps its two parts close in the
   same way; a line that has not turned stands exactly where it did */
.turns .tx.k-v.plain,.is-twin.turns .beside .pr.k-v.plain{margin:-.07em 0 calc(var(--band) - .07em);line-height:1.3em}
/* and it is never set larger than a passage of prose is: short lines of verse are set large to fill the
   plate, and a sentence that leads into them is not */
.is-verse .tx.k-p{font-size:min(var(--fs),clamp(20px,1.6cqw + 14px,26px))}
/* but a speech of a few words that its edition sets as prose keeps the size of the verse round it: in two
   words a reader cannot tell prose from verse, and smaller type would read as a lower voice */
.is-verse .tx.k-p.brief{font-size:var(--fs)}
.row:has(>.tx.k-p)+.row>.tx.k-p{text-indent:1.3em}
/* where its reading says a line turns, each of the two parts keeps together */
.turns .keep,.is-prose .keep{white-space:nowrap}
.tx.free .keep{white-space:normal}
/* room under a row for a second level of glosses, where two of one line cannot stand side by side (the Word tab sets it) */
.tx,.pr{padding-bottom:var(--deep,0px)}
.w{white-space:nowrap;transition:opacity .3s,color .45s}
/* two words joined by a dash: each keeps together with its points, and where lines turn the two may part after the dash */
.wk{white-space:nowrap}
.turns .tx.k-v .wj,.is-prose .tx .wj,.tx.k-p .wj,.pr .wj{white-space:normal}
.is-twin:not(.turns):not(.is-prose) .beside .pr.k-v .wj,.run .wj{white-space:nowrap}
/* (the place where the two may part is a wbr, which a browser honors even where lines are kept whole: it is
   there only where the two may part) */
.wj wbr{display:none}
.turns .tx.k-v .wj wbr,.is-prose .tx .wj wbr,.tx.k-p .wj wbr,.pr .wj wbr{display:inline}
.is-twin:not(.turns):not(.is-prose) .beside .pr.k-v .wj wbr,.run .wj wbr{display:none}
/* a line of verse that turns after such a dash: the break works only while the line does not fit (plate.js) */
.tx:not(.brk) .tbr{display:none}
/* a short run of words that a tab marks as one thing is not parted where a line turns */
.run{white-space:nowrap}
/* room for the number of a remark: only while the beat shows, and while the type is being fitted */
.lens-beat .w.numd,.plate.setup .w.numd{margin-right:max(.2em,6px)}
.sy{display:inline-block;line-height:1.16;text-indent:0;transition:font-weight .35s,color .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.cut{color:var(--quiet)}
.stage-d,.stage-s{margin:7px 0 5px;font-size:13.5px;line-height:1.2;color:var(--quiet)}
.stage-d{font-style:italic}
.stage-gap{margin:calc(var(--band) * .5 + .3em) 0 calc(var(--band) * .62);padding-left:.15em;font-family:var(--display);font-size:calc(var(--fs) * .8);font-weight:600;line-height:.6;letter-spacing:.12em;white-space:pre;color:var(--quiet)}
/* on the Beat tab a dot is a stress: the three points stand further from the dots of the line above, and further in */
.lens-beat .poem>.stage-gap{margin-top:calc(var(--band) * .5 + 1.1em);padding-left:1.6em}
.stage-s{font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:520}
.stage-g{margin-left:.9em;font-size:13px;letter-spacing:0;text-transform:none;font-style:italic;font-weight:400}
/* a name or a direction that the edition prints in the line and the reading leaves there (`stage` with `inline`):
   set in the line as a name and a direction are set over one. A direction keeps whole and the line turns before
   it; one too long for the plate turns in itself (the kit marks it `long`) */
.in-s,.in-d{font-family:var(--text);font-variant-numeric:oldstyle-nums;line-height:1.2;color:var(--quiet)}
.wq{white-space:nowrap;transition:opacity .3s,color .45s}
.plate.has-lit .wq:not(.lit){opacity:.28}
.in-s{font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:520}
.in-d{font-size:13.5px;letter-spacing:0;font-style:italic;font-weight:400;white-space:nowrap}
.in-d.long{white-space:normal}
/* a row that holds one may turn before its direction even where the lines of the plate are whole: the turned part
   stands in, as the turned part of a line does, and on a tab that does not mark the row it stands close under
   its line (a row that has not turned stands exactly where it did) */
.tx.k-v.has-in{padding-left:1.3em;text-indent:-1.3em}
.tx.k-v.has-in.plain{margin:-.07em 0 calc(var(--band) - .07em);line-height:1.3em}
.pr{margin:0 0 .55em;font-size:clamp(14.5px,1cqw + 9px,17px);line-height:1.3;color:var(--quiet)}
/* a version set under its line stands nearer that line than the next one, so that the two read as a pair */
/* (it is drawn up toward its line, less where the band is deep with the marks of a beat; and the room after it
   grows with the band, so that the next line always stands further off than its own) */
.is-interlinear .pr{font-style:italic;margin:calc(-1 * min(var(--band) * .22,42px - var(--band))) 0 calc(var(--band) * .75 + .7em + max(0px,(var(--band) - 34px) * 1.5))}
.is-interlinear .pr.k-v{text-wrap:balance}
/* a version's line that a join from rhyme to rhyme passes stops short of the edge by what the joins need (plate.js) */
.is-interlinear .pr.passed{padding-right:var(--pend,0px)}
.is-interlinear.pair-marked .pr{margin:calc(-1 * min(var(--band) * .45,54px - var(--band))) 0 calc(var(--band) * .3 + 1.1em + max(0px,(var(--band) - 34px) * 1.5));line-height:calc(1.3em + var(--band) * .6)}
.is-interlinear .row:last-child>.pr{margin-bottom:.55em}
/* On a Word tab a gloss stands under its word, over the version's line. That line is set lower there (its head
   at least `--gloss` under the foot of the line above), so that a gloss is read with its word and not with the
   line under it. Where the room under the lines is already as large (a plate with a Beat tab), nothing moves. */
.is-interlinear.lens-word .pr{--gloss:36px;margin-top:max(calc(-1 * min(var(--band) * .22,42px - var(--band))),calc(var(--gloss) - var(--band)))}
.is-interlinear.pair-marked.lens-word .pr{margin-top:max(calc(-1 * min(var(--band) * .45,54px - var(--band))),calc(var(--gloss) - var(--band) * 1.3))}
.beside{margin-top:clamp(16px,3cqw,26px);padding-top:clamp(12px,2.4cqw,18px);border-top:1px solid var(--hair)}
.beside .pr{font-size:clamp(16px,1cqw + 10px,19px);color:var(--body);margin:0;padding-top:var(--lv,0px);line-height:1.45}
.beside .pr.k-v{padding-left:1.3em;text-indent:-1.3em;text-wrap:balance}
.beside .pr.k-p{text-wrap:pretty}
/* where its reading says a line of a second passage turns, each of the two parts keeps together */
.pr .keep{white-space:nowrap}
.pr.free .keep{white-space:normal}
.beside .pr.k-p+.pr.k-p,.beside .pr.stanza{margin-top:.7em}
.beside .pr.in{margin-left:2em}
/* where some tab marks its words, every line of it has room for the mark */
.pair-marked .beside .pr{line-height:calc(1.3em + var(--band) * .5)}
.pair-idle:not(.is-twin) .beside .pr{line-height:1.45}
/* on a compare tab, side by side, a version in verse keeps the pitch of the lines it answers, where the kit
   has set rows of the two level (where it could set none, the version keeps its own pitch: `unlevel`) */
.two-col.lens-compare:not(.is-twin):not(.pair-idle):not(.unlevel) .beside .pr.k-v{line-height:calc(var(--fs) * 1.16 + var(--band))}
.beside .stage-gap{margin:.45em 0 .6em;padding-top:var(--lv,0px);font-size:min(1.25em,calc(var(--fs) * .8))}
.pair-marked:not(.pair-idle):not(.is-twin) .beside .stage-gap{margin-top:.95em}
.pair-off .beside{display:none}
/* on a narrow plate a first passage that the tab does not mark gives way to the second */
.main-off .poem{display:none}
.main-off .beside{margin-top:0;padding-top:0;border-top:0}
/* who speaks in a second passage */
.beside .stage-s{margin:.9em 0 .25em}
.pair-marked:not(.pair-idle):not(.is-twin) .beside .stage-s{margin-bottom:calc(var(--band) * -.2)}
.beside .beside-l+.stage-s{margin-top:0}
/* a name or a direction over a row that is set level with the line it answers takes the room over itself */
.beside .stage-s,.beside .stage-d{padding-top:var(--lv,0px)}
/* a direction that the edition prints before a speaker's name goes with the speech above it: the name stands
   further from it than it stands from that speech */
.beside .stage-d+.stage-s{margin-top:1.7em}
/* a name, a direction or the points of a gap that follow at once a row carrying a pair's number or a gloss under
   it keep clear of that mark (the kit marks the row `hung` on the tab that sets the mark) */
.is-beside:not(.is-twin) .beside .pr.hung+.stage-s:not(.stanza),.is-beside:not(.is-twin) .beside .pr.hung+.stage-d:not(.stanza){margin-top:calc(26px - var(--band) * .25)}
.is-beside:not(.is-twin) .beside .pr.hung+.stage-gap{margin-top:1.3em}
/* where a speaker's name (or a direction over it) stands over the first line of a stanza, the stanza's space
   stands over the name and not between the name and the speech */
.beside .stage-s.stanza{margin-top:calc(.9em + .7 * clamp(16px,1cqw + 10px,19px))}
.beside .stage-d.stanza{margin-top:calc(7px + .7 * clamp(16px,1cqw + 10px,19px))}
.is-twin .beside .stage-s.stanza{margin-top:calc(.9em + var(--fs) * .5)}
.is-twin .beside .stage-d.stanza{margin-top:calc(7px + var(--fs) * .5)}
/* room under the last line of a second passage for a mark that hangs from it */
.beside{padding-bottom:calc(var(--band) * .45)}
.is-twin .beside{padding-bottom:0}
/* (like the plate's title, a label that turns is balanced: its last word is not left alone) */
.beside-l{margin:0 0 8px;font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:520;color:var(--quiet);text-wrap:balance}
/* two passages of equal standing: the second is set in the type of the first */
.is-twin .beside .pr{margin:calc(var(--band) / -2) 0 calc(var(--band) / 2);padding-left:0;text-indent:0;font-family:var(--display);font-variant-numeric:lining-nums;font-size:var(--fs);font-weight:var(--wn);letter-spacing:.003em;line-height:calc(1.16em + var(--band));color:var(--ink)}
.is-twin .beside .pr.stanza{margin-top:calc(var(--band) / -2);padding-top:calc(var(--fs) * .5 + var(--lv,0px))}
.is-twin .beside .pr.k-v{white-space:nowrap}
.is-twin.turns .beside .pr.k-v,.is-twin.is-prose .beside .pr.k-v{white-space:normal;padding-left:1.3em;text-indent:-1.3em}
.is-twin.turns .beside .pr.k-v{text-wrap:balance;padding-right:var(--end,0px)}
.is-twin .beside .pr.k-p{text-wrap:pretty}
.is-twin .beside .pr.k-p+.pr.k-p{margin-top:calc(var(--band) / -2);text-indent:1.3em}
.is-twin .beside .stage-gap{margin:calc(var(--band) * .5 + .3em) 0 calc(var(--band) * .62);font-size:calc(var(--fs) * .8)}
.is-twin .beside-l{margin-bottom:12px}
/* Under the first passage (a plate too narrow for two columns), a second of equal standing that the tab showing
   does not mark keeps its type and gives up the room for marks: at the pitch of marked lines twelve bare lines
   took a whole window of a phone between the marks and the words about them. */
.is-twin.pair-idle:not(.two-col) .beside .pr,.is-twin.pair-idle.turns:not(.two-col) .beside .pr.k-v.plain{margin:0;line-height:1.36}
.is-twin.pair-idle:not(.two-col) .beside .pr.stanza,.is-twin.pair-idle.turns:not(.two-col) .beside .pr.k-v.plain.stanza{margin-top:calc(var(--fs) * .55);padding-top:var(--lv,0px)}
.is-twin.pair-idle:not(.two-col) .beside .pr.k-p+.pr.k-p{margin-top:0}
.is-twin.pair-idle:not(.two-col) .beside .stage-gap{margin:.5em 0}
.is-twin.pair-idle:not(.two-col) .beside{padding-bottom:calc(var(--band) * .2)}
/* where a version is set under each line, one line at the head of the passage names the two, each in the face of the lines it names */
.legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 18px}
.legend i{font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:400}
.own{min-height:120px}
.own[hidden]{display:none}
.own-stage .poem,.own-stage .beside,.own-stage .ov{display:none}

/* a word named beside the plate shows where it stands */
.plate.has-lit .w:not(.lit){opacity:.28}
.cap .ref,.keys .ref{cursor:default}

/* beat */
.sy.s0{font-weight:var(--w0);color:var(--soft)}
.sy.s1{font-weight:var(--w1)}
.sy.s2{font-weight:540}
.sy.sx{font-weight:var(--w0);color:var(--quiet)}
/* (while the plate measures how its lines turn, every syllable has the weight of plain text) */
.plate.even .sy.s0,.plate.even .sy.s1,.plate.even .sy.s2,.plate.even .sy.sx{font-weight:inherit}
.sy.on{transform:translateY(-.05em);color:#000}
/* rhyme */
.rt,.th{transition:color .45s}
.lens-rhyme .rt{color:var(--c)}
.lens-rhyme .th{color:var(--tc)}
/* a letter that carries both a rhyme and a sound that returns shows the rhyme */
.lens-rhyme .rt.th{color:var(--c)}
/* figure */
.lens-figure .wb.fg,.lens-figure .wp.fg,.lens-figure .wk.fg{color:var(--c)}
.wb,.wp,.wk{transition:color .45s}

.gl{position:absolute;white-space:nowrap;font-family:var(--text);font-style:italic;font-size:clamp(12px,1.5cqw + 4.5px,13.5px);line-height:1.15;color:var(--quiet);opacity:0;transform:translateY(-3px);transition:opacity .5s,transform .5s;pointer-events:none}
.gl.in{opacity:1;transform:none}
.gl.num{font-style:normal;font-size:clamp(10.5px,1cqw + 5px,12.5px);font-weight:560;color:var(--red);font-variant-numeric:lining-nums}
/* the number of a pair on a compare tab stands alone under its line and is read from further off */
.gl.num.tn{font-size:clamp(12px,1cqw + 6.5px,14.5px);font-weight:600}
.gl.letter{line-height:1}
/* a word of another language named in a gloss stands upright in it */
.gl i{font-style:normal}
/* the letters of a crossing that cannot be drawn: a, b, b, a */
.gl.num.ab{font-style:italic;font-weight:500;font-size:clamp(12.5px,1cqw + 7.5px,14.5px);line-height:1}
.mk{transition:opacity .45s}
.ph{stroke:var(--red);stroke-width:1;opacity:0;transition:opacity .3s}
.arc{fill:none;stroke-linecap:round}
.draw{transition:stroke-dashoffset 1.1s cubic-bezier(.4,.1,.2,1)}
.fade{opacity:0;transition:opacity .6s}
.fade.in{opacity:1}
.setup,.setup *{transition:none!important}

/* beside the passage: what the marks mean */
.side{position:relative;min-width:0;border-top:1px solid var(--hair);padding-top:clamp(12px,2.6cqw,18px)}
/* only the caption that is showing takes room; the others wait behind it */
.pane{position:absolute;left:0;right:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px 0;align-items:start;align-content:start;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.pane.is-on{position:relative;opacity:1;visibility:visible;transition:opacity .55s .15s}
.cap{margin:0;font-size:clamp(15px,.5cqw + 12.5px,17px);line-height:1.5;color:var(--body);text-wrap:pretty}
.cap b{font-weight:640;color:var(--ink)}
/* an italic run that ends in ? or ! leans into the space after it: a hair of room (the kit marks such a run) */
.cap i.lean,.cap em.lean,.sources i.lean{margin-right:.08em}
.aside{font-size:13px;line-height:1.42;color:var(--quiet);font-style:italic;min-width:0}
.aside svg{display:block;overflow:visible;max-width:100%}
.aside p{margin:0}
/* as in a caption, a last word is not left alone on its line */
.aside p,.aside li{text-wrap:pretty}
.aside .k{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.aside .k svg{flex:none}
.aside .k-note{margin:2px 0 8px}
.aside .measure{margin:0 0 10px;color:var(--body);font-size:14px}
.aside .measure .lab{display:block;font-size:10.5px;color:var(--quiet);margin-bottom:1px}
.aside .scheme{margin:0 0 2px;height:auto}
.aside .scheme text{font-family:var(--text);font-style:italic;font-size:17px;text-anchor:middle}
.aside .term{font-family:var(--display);font-style:italic;font-weight:500;font-size:27px;line-height:1;color:var(--ink);margin:0 0 6px}
.aside .plain{font-size:14px;margin:0 0 12px}
.aside .wn{margin:0 0 8px}
.aside .wn,.aside .points li{font-size:clamp(13px,.4cqw + 11.6px,14.5px);color:var(--soft)}
.aside .wn i,.aside .points li i{font-style:normal}
/* and so does a word or a sound named in a row of the key, or in the plain words of a figure */
.aside .k i,.aside .plain i{font-style:normal}
.aside .wn b{font-style:normal;font-weight:600;color:var(--ink)}
.aside .points{margin:10px 0 0;padding:0 0 0 1.25em}
.aside .points li{margin:0 0 5px;padding-left:.2em}
.aside .points li::marker{font-style:normal;font-size:11px;font-weight:560;color:var(--c,var(--red));font-variant-numeric:lining-nums}
.aside button.again{font-size:10.5px;margin-top:10px;border-bottom:1px solid var(--hair)}
.shape-what{margin:0 0 14px;font-family:var(--display);font-style:italic;font-size:clamp(19px,2.2cqw + 11px,24px);line-height:1.15;text-wrap:balance}
.shape-what::first-letter{text-transform:uppercase}
/* a word named in the head line of a drawing stands upright in the italic line */
.shape-what i{font-style:normal}
.facts-wrap{overflow-x:auto;max-width:100%}
.facts{border-collapse:collapse;font-size:15px;line-height:1.35;font-variant-numeric:lining-nums tabular-nums}
.facts td.num,.facts th.num{text-align:right}
.facts th{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet);text-align:left;vertical-align:bottom;padding:0 18px 6px 0}
.facts td{padding:5px 18px 5px 0;border-top:1px solid var(--hair);vertical-align:top;overflow-wrap:break-word}
.facts td:last-child,.facts th:last-child{padding-right:0}

/* a plate with no passage says why, at its foot */
.plate-note{margin:clamp(20px,3.6cqw,34px) 0 0;padding:10px max(0px,100% - 46em) 0 0;border-top:1px solid var(--hair);font-size:14px;line-height:1.45;font-style:italic;color:var(--quiet);text-wrap:pretty}
.plate-note i{font-style:normal}

/* a piece's own drawing (kit/diagram.js) */
.dg-wrap{position:relative}
.dg{display:block;overflow:visible}
.dg text{font-family:var(--text);font-size:13px;fill:var(--quiet)}
.dg .dg-it{font-style:italic}
.dg .dg-lab{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:560}
.dg .dg-n{font-size:12.5px;font-variant-numeric:lining-nums tabular-nums;fill:var(--ink)}
.dg .dg-name{font-family:var(--display);font-variant-numeric:lining-nums;font-size:18px;font-weight:500;fill:var(--ink)}
.dg .dg-big{font-family:var(--display);font-variant-numeric:lining-nums;font-size:34px;font-weight:400;fill:var(--ink)}
.dg-note{position:absolute;margin:0;font-size:13px;line-height:1.3;font-style:italic;color:var(--quiet);text-wrap:pretty}
.dg-note.is-red{color:var(--red)}
.dg-hot{cursor:default;transition:opacity .2s}
.draw.dg-hot{transition:opacity .2s,stroke-dashoffset 1.1s cubic-bezier(.4,.1,.2,1)}
.dg:has(.dg-on) .dg-hot:not(.dg-on){opacity:.45}
/* a mark not yet drawn in stays hidden while the pointer is on another, and fades in at its own pace */
.dg:has(.dg-on) .dg-hot.fade:not(.in){opacity:0}
.dg:not(:has(.dg-on)) .dg-hot.fade{transition:opacity .6s}
/* a link in a drawing does not take the page's underline, which falls on svg type at full weight and reads as a mark */
.dg a{text-decoration:none}
.dg a:focus:not(:focus-visible),.dg [tabindex]:focus:not(:focus-visible){outline:none}
.dg-say{min-height:calc(1.45em + 12px);margin:2px 0 -6px;padding:6px 0;font-size:14.5px;line-height:1.45;font-style:italic;color:var(--ink);text-wrap:pretty}
.dg-say i,.dg-note i,.dg-k i:not(.dg-m){font-style:normal}
/* while it speaks, the line keeps in sight: where its own place is below the window (a tall drawing, a
   phone), it stands at the window's foot, on paper, until the reader comes down to it */
.dg-say:not(:empty){position:sticky;bottom:env(safe-area-inset-bottom,0px);z-index:3}
.dg-say.stuck:not(:empty){background:var(--paper);box-shadow:0 -1px 0 var(--hair)}
.dg-say-end{display:block;height:0}
/* while it has nothing to say, the line says how it is made to speak */
.dg-say:empty::before{content:attr(data-hint);color:var(--quiet)}
/* (a row of the key that turns is set as a caption is: its last word is not left alone) */
.dg-keys{display:flex;flex-wrap:wrap;gap:3px 18px;margin:8px 0 0;font-size:13.5px;line-height:1.4;font-style:italic;color:var(--quiet);text-wrap:pretty}
.dg-k{display:inline-flex;align-items:center;gap:7px}
.dg-m{flex:none;display:inline-block;width:12px;height:12px;background:var(--c)}
.dg-m-line{height:0;width:20px;background:none;border-top:2.4px solid var(--c)}
.dg-m-dash{height:0;width:20px;background:none;border-top:2.4px dashed var(--c)}
.dg-m-open{background:none;border:1.5px solid var(--c)}
.dg-m-dot{width:8px;height:8px;border-radius:50%}
.dg-m-ring{width:9px;height:9px;border-radius:50%;background:none;border:1.5px solid var(--c)}
.dg-facts{margin-top:14px;font-size:14px;color:var(--quiet)}
.dg-facts summary{cursor:pointer;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:520;margin-bottom:8px}
.dg-facts summary:hover{color:var(--ink)}
.dg-facts .facts{font-size:13.5px}
/* a word named in an italic sentence among the folded numbers stands upright in it */
.dg-facts p i{font-style:normal}

@container (min-width:520px){
  .pane{grid-template-columns:minmax(0,1fr) 34%;gap:0 clamp(16px,4cqw,34px)}
  /* a caption with nothing beside it keeps to a measure that reads */
  .pane:not(:has(.aside)){grid-template-columns:minmax(0,1fr)}
  .pane:not(:has(.aside)) .cap{max-width:38em}
}
@container (min-width:520px) and (max-width:879.9px){
  /* there too a key much taller than its caption goes under the caption, across the plate (wideKey() in
     kit/plate.js), set in two columns as a key under a short passage is */
  .pane.keys-wide{grid-template-columns:minmax(0,1fr);gap:16px 0}
  .pane.keys-wide .cap{max-width:38em}
  .pane.keys-wide .keys{columns:2 230px;column-gap:clamp(24px,4cqw,52px)}
  .pane.keys-wide .keys>*{break-inside:avoid}
  .pane.keys-wide .keys>.points{break-inside:auto;margin-top:0}
  .pane.keys-wide .points li{break-inside:avoid}
}
@container (max-width:519.9px){
  .is-interlinear.lens-word .pr{--gloss:30px}
  /* the place of the passage goes under its heading */
  .plate-ttl span{display:block;margin:.35em 0 0}
  .plate-in{padding-left:12px;padding-right:12px}
  /* on a narrow plate the tabs always take a row of their own under the heading and the place, however short these are */
  .plate-tabs{flex-basis:100%}
  /* on a narrow plate the numbered remarks and the notes on words, which are running words, are a size larger,
     and stand a little apart, so that ten short things read as ten */
  .aside .wn,.aside .points li{font-size:14px}
  .aside .wn,.aside .points li{margin-bottom:12px}
  .aside .wn:last-child,.aside .points li:last-child{margin-bottom:0}
  .plate-tabs-foot{display:flex;flex-basis:auto;margin-top:clamp(18px,5cqw,24px);padding-top:13px;border-top:1px solid var(--hair)}
  /* a drawing's folded table: less paper between two columns, so that four columns stand whole on the narrowest phone */
  .facts th,.facts td{padding-right:10px}
  /* on a narrow plate the numbered remarks come before the key to the marks */
  .keys{display:flex;flex-direction:column}
  .keys>.measure{order:-2}
  .keys>.points{order:-1;margin:0 0 10px}
  .keys>button{align-self:flex-start}
  .dg-say{min-height:calc(2.9em + 12px)}
  .dg-say.stuck:not(:empty){box-shadow:0 -1px 0 var(--hair),-11px 0 0 var(--paper),11px 0 0 var(--paper)}
}
@container (max-width:879.9px){
  /* until the heading and the tabs share one line, the place of the passage stands under the heading */
  .plate-ttl span{display:block;margin:.35em 0 0}
}
@container (min-width:880px){
  .plate-body{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0 clamp(30px,5cqw,70px)}
  .side{border-top:0;padding-top:.35em;position:sticky;top:calc(22px + env(safe-area-inset-top,0px))}
  .pane{grid-template-columns:minmax(0,1fr);gap:20px 0}
  .aside{border-top:1px solid var(--hair);padding-top:16px}
}
/* Two passages on a wide plate (the plate sets `two-col`; see arrange() in kit/plate.js): they stand side
   by side across the whole width, and the caption goes under them. */
.two-col .plate-body{grid-template-columns:minmax(0,1fr);gap:clamp(10px,2.4cqw,20px) 0}
.two-col .stage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 clamp(24px,4cqw,56px);align-items:start}
.two-col.is-twin .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two-col .beside{margin-top:0;padding-top:0;border-top:0}
.two-col .side{position:relative;top:auto;border-top:1px solid var(--hair);padding-top:clamp(12px,2.6cqw,18px)}
.two-col .pane{grid-template-columns:minmax(0,34em) minmax(0,1fr);gap:0 clamp(24px,5cqw,64px)}
.two-col .pane:not(:has(.aside)){grid-template-columns:minmax(0,1fr)}
.two-col .aside{border-top:0;padding-top:0}
/* a key much taller than its caption goes under the caption, across the plate */
.two-col .pane.keys-wide{grid-template-columns:minmax(0,1fr);gap:16px 0}
.two-col .pane.keys-wide .cap{max-width:38em}
.two-col .pane.keys-wide .keys{columns:3 250px;column-gap:clamp(24px,4cqw,52px)}
.two-col .pane.keys-wide .keys>*{break-inside:avoid}
.two-col .pane.keys-wide .keys>.points{break-inside:auto;margin-top:0}
.two-col .pane.keys-wide .points li{break-inside:avoid}
/* where one of the two is much the shorter, the caption stands under that one (`side-a`: under the
   first; `side-b`: under the second, or in its place when the tab showing does not use it) */
.side-in .stage{grid-template-rows:auto 1fr}
.side-in .side{margin-top:clamp(18px,2.8cqw,28px)}
.side-in .pane,.side-in .pane:not(:has(.aside)){grid-template-columns:minmax(0,1fr);gap:16px 0}
.side-in .aside{border-top:1px solid var(--hair);padding-top:14px}
/* (a long key that the kit has sent under both passages, across the plate: `keys-under`) */
.side-in .under .aside{border-top:0;padding-top:0}
.side-b .poem{grid-column:1;grid-row:1/span 2}
.side-b .beside{grid-column:2;grid-row:1}
.side-b .side{grid-column:2;grid-row:2}
.side-a .poem{grid-column:1;grid-row:1}
.side-a .beside{grid-column:2;grid-row:1/span 2}
.side-a .side{grid-column:1;grid-row:2}
.side-in.pair-off .side{grid-row:1/span 2;margin-top:0;border-top:0;padding-top:.35em;position:sticky;top:calc(22px + env(safe-area-inset-top,0px))}
/* a short second passage whose marks answer the last lines of the first: at the foot, beside them */
.pair-low .stage{grid-template-rows:1fr auto}
.pair-low .side{grid-row:1;align-self:start;margin-top:0;border-top:0;padding-top:.35em;position:sticky;top:calc(22px + env(safe-area-inset-top,0px))}
.pair-low .beside{grid-row:2;align-self:end;margin-top:clamp(18px,2.8cqw,28px);padding-top:clamp(12px,2.4cqw,18px);border-top:1px solid var(--hair)}
/* ---------- the front page ---------- */
.home-hd{max-width:1180px;margin:0 auto;padding:clamp(40px,8vw,104px) clamp(16px,3vw,28px) clamp(30px,5vw,60px);text-align:center}
.home-q{margin:0;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:400;font-size:clamp(38px,7vw,88px);line-height:1;letter-spacing:-.012em;color:var(--ink)}
.home-q span{display:block;text-wrap:balance}
.home-by{margin:clamp(16px,2.4vw,26px) auto 0;max-width:36em;font-size:clamp(15.5px,1.6vw,17.5px);font-style:italic;color:var(--quiet);text-wrap:balance}
.home-by i{font-style:normal}
.home-hero{max-width:1220px;margin:0 auto;padding:0 clamp(16px,2vw,20px)}
.home-intro{max-width:46rem;margin:0 auto;padding:clamp(40px,7vw,88px) clamp(16px,2vw,20px) 0}
.home-intro p{margin:0;font-size:clamp(17.5px,1.4vw + 6px,20px);line-height:1.5;text-wrap:pretty}
/* (the way to the list of all the works is not parted where the line turns) */
.home-intro a{white-space:nowrap;text-decoration-color:var(--quiet)}
.home-intro a:hover{text-decoration-color:var(--red)}

.subject,.home-works{max-width:1220px;margin:clamp(64px,10vw,132px) auto 0;padding:0 clamp(16px,2vw,20px)}
/* the list of all the works is come to from the opening of the page, and from the address #/works */
.home-works{scroll-margin-top:14px}
.home-works h2:focus{outline:0}
.subject-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:4px clamp(20px,4vw,56px);align-items:end;border-top:1px solid var(--ink);padding-top:clamp(12px,1.8vw,20px)}
.subject-n{margin:0;font-size:12px;letter-spacing:.17em;font-weight:560;color:var(--quiet);font-variant-numeric:lining-nums;min-height:1em}
.subject-hd h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(46px,8vw,96px);line-height:.95;letter-spacing:-.01em;color:var(--ink)}
.subject-gloss{margin:0;font-style:italic;font-size:clamp(17px,1.6vw + 6px,22px);line-height:1.3;color:var(--quiet);text-wrap:balance}
.subject-gloss a{font-style:normal}
@media (min-width:820px){
  .subject-hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .subject-n{grid-column:1/-1}
  .subject-gloss{padding-bottom:.5em}
}
.way{margin-top:clamp(34px,5.4vw,64px)}
.way-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:8px clamp(20px,4vw,56px);align-items:baseline;margin-bottom:clamp(16px,2.6vw,26px)}
.way-hd h3{margin:0;font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--ink);display:flex;align-items:center;gap:16px}
.way-hd h3::after{content:"";flex:1;border-top:1px solid var(--hair)}
.way-how{margin:0;max-width:40em;font-size:clamp(16px,1vw + 9px,17.5px);line-height:1.5;color:var(--body);text-wrap:pretty}
@media (min-width:820px){.way-hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* the cards of a kind run down one column and then down a second, so that a short card leaves no bare paper beside a tall one;
   the order in remake/front.json is chosen so that the two columns end near each other */
.specs{--gap:clamp(14px,2vw,22px);columns:2 440px;column-gap:var(--gap);margin-bottom:calc(-1*var(--gap))}
.specs>.spec{break-inside:avoid;margin:0 0 var(--gap)}

/* a specimen: a line or two of a work with the marks of one lens, and the way into its piece */
.spec{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:6px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge),inset 0 0 90px var(--shade);padding:clamp(14px,2vw,20px) clamp(18px,2.8vw,30px) clamp(12px,1.8vw,18px);transition:box-shadow .3s}
.spec:hover,.spec:focus-within{box-shadow:inset 0 0 0 1px rgba(60,50,30,.34),inset 0 0 90px var(--shade)}
.spec .plate{background:none;box-shadow:none;border-radius:0}
.spec .plate-in{padding:0}
.spec .plate-body{grid-template-columns:minmax(0,1fr)}
.spec .is-beside .stage{display:block}
.spec .is-beside .beside{margin-top:clamp(12px,2cqw,18px);padding-top:clamp(10px,2cqw,14px);border-top:1px solid var(--hair)}
.spec .beside .pr{font-size:clamp(16.5px,1cqw + 12px,19px)}
.spec .is-twin .beside .pr{font-size:var(--fs)}
.spec .is-beside .stage{padding-bottom:16px}
.spec-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:0 0 clamp(16px,2.6vw,24px);padding-bottom:9px;border-bottom:1px solid var(--hair)}
.spec-au{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--ink)}
.spec-wk{font-style:italic;font-size:14px;color:var(--quiet)}
.spec-notes{margin:0 0 14px;display:grid;gap:6px;font-size:14.5px;line-height:1.4;color:var(--quiet)}
.spec-notes p{margin:0}
.spec-term{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-style:italic}
.spec-term>i{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.05;color:var(--ink)}
.spec-term .lab{font-size:10.5px}
.spec-keys{display:flex;flex-wrap:wrap;gap:3px 18px;font-style:italic}
.spec-k{display:inline-flex;align-items:center;gap:7px}
.spec-k>i{flex:none;width:20px;border-top:1.6px solid var(--c)}
.spec-term span i,.spec-k span i{font-style:normal}
.spec-note{max-width:44em;font-size:clamp(15px,1vw + 9px,16.5px);line-height:1.5;color:var(--body);text-wrap:pretty}
.spec-go{margin-top:auto;padding-top:11px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-decoration:none;color:var(--ink)}
.spec-go::after{content:"";position:absolute;inset:0;border-radius:6px}
.spec-go:focus-visible{outline:none}
.spec-go:focus-visible::after{outline:2px solid var(--blue);outline-offset:3px}
.spec-t{font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(20px,1.4vw + 12px,25px);line-height:1.12}
.spec-arrow{font-size:17px;line-height:1;color:var(--quiet);transition:color .25s,transform .25s}
.spec:hover .spec-arrow{color:var(--red);transform:translateX(3px)}
.spec-hero{padding:clamp(16px,2.6vw,28px) clamp(18px,5vw,64px) clamp(14px,2.2vw,24px)}
.spec-hero .spec-hd{margin-bottom:clamp(22px,4vw,44px)}
.spec-hero .spec-notes{margin:clamp(4px,1vw,12px) 0 clamp(16px,2.4vw,24px)}
.spec-hero .spec-t{font-size:clamp(23px,2vw + 12px,32px)}

.works{list-style:none;margin:clamp(22px,4vw,44px) 0 0;padding:0;columns:3 250px;column-gap:clamp(24px,4vw,56px)}
.works li{break-inside:avoid;padding:11px 0 13px;border-top:1px solid var(--hair)}
.works-au{margin:0 0 3px;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet)}
.works a{display:block;text-decoration:none;padding:2px 0}
.works-t{display:block;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:22px;line-height:1.15;color:var(--ink);transition:color .2s}
.works-wk{display:block;font-style:italic;font-size:14.5px;color:var(--quiet)}
.works a:hover .works-t{color:var(--red)}
.works-none{margin:0;padding:2px 0}
.works-none .works-t{color:var(--quiet)}

/* ---------- the shelf ---------- */
.case{max-width:1220px;margin:0 auto;padding:0 clamp(16px,2vw,20px)}
.case-in{container-type:inline-size;border-radius:6px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge),inset 0 0 90px var(--shade);padding:clamp(20px,3.4vw,40px) clamp(14px,3.6vw,48px) clamp(16px,2.4vw,26px)}
.case-row{--line:168px;--gap:30px;--pp:clamp(.29px,.0355vw,.42px);display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:3px;row-gap:var(--gap);padding:0 clamp(4px,1.2cqw,14px) 2px;background:repeating-linear-gradient(to bottom,transparent 0,transparent var(--line),var(--ink) var(--line),var(--ink) calc(var(--line) + 1.5px),transparent calc(var(--line) + 1.5px),transparent calc(var(--line) + var(--gap)))}
.spine{--h:156px;position:relative;flex:0 0 auto;width:max(5px,calc(var(--pages) * var(--pp)));max-width:100%;height:var(--h);margin-top:calc(var(--line) - var(--h));container-type:inline-size;border:1px solid rgba(29,27,24,.6);border-bottom:0;border-radius:2px 2px 0 0;background-color:rgba(60,50,30,.04);color:var(--ink);text-decoration:none;transition:background-color .2s}
.spine-opera{--h:118px}
.spine::before,.spine::after{content:"";position:absolute;left:0;right:0;height:3px;border-top:1px solid rgba(29,27,24,.42);border-bottom:1px solid rgba(29,27,24,.42);pointer-events:none}
.spine::before{top:6px}
.spine::after{bottom:6px}
a.spine:hover,a.spine:focus-visible{background-color:rgba(179,56,30,.1)}
.spine.is-omit,.case-k i.is-omit{background-image:repeating-linear-gradient(135deg,transparent 0,transparent 5px,rgba(29,27,24,.16) 5px,rgba(29,27,24,.16) 6px)}
.spine.is-absent{width:26px;border-style:dashed;background:none}
.spine.is-absent::before,.spine.is-absent::after{display:none}
.spine-in{position:absolute;inset:14px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 8px;text-align:center;overflow:hidden}
.spine-au{font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet);line-height:1.2}
.spine-t{font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(17px,9.5cqw,31px);line-height:1.04;text-wrap:balance;max-width:100%;max-height:100%}
.spine-pp{font-size:12px;font-style:italic;color:var(--quiet);line-height:1}
@container (max-width:99.9px){
  .spine-in{writing-mode:vertical-rl;padding:3px 0;gap:4px}
  .spine-t{font-size:16px}
  .spine-pp{display:none}
}
@container (max-width:45.9px){
  .spine-au{display:none}
  .spine-t{font-size:15px}
}
@container (max-width:27.9px){
  .spine-in{inset:12px 0;padding:0}
  .spine-t{font-family:var(--text);font-weight:440;font-size:11.5px;white-space:nowrap}
}
@container (max-width:13.9px){
  .spine-in{display:none}
}
.case-now{min-height:1.5em;margin:clamp(12px,2vw,18px) 0 0;font-style:italic;font-size:16px;line-height:1.5;color:var(--ink)}
.case-ft{display:grid;grid-template-columns:minmax(0,1fr);gap:8px clamp(24px,5cqw,64px);margin-top:4px;padding-top:12px;border-top:1px solid var(--hair);font-size:15px;line-height:1.45;color:var(--quiet)}
.case-ft p{margin:0}
.case-note{max-width:44em;text-wrap:pretty}
.case-keys{display:flex;flex-wrap:wrap;gap:4px 22px;font-style:italic;align-content:start}
.case-k{display:inline-flex;align-items:center;gap:8px}
.case-k i{flex:none;width:14px;height:18px;border:1px solid rgba(29,27,24,.6);border-radius:1px}
.case-k i.is-absent{border-style:dashed}
@container (min-width:860px){.case-ft{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.case-keys{flex-direction:column}}

.shelf-sec{max-width:1220px;margin:clamp(64px,10vw,124px) auto 0;padding:0 clamp(16px,2vw,20px)}
.shelf-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,22px) clamp(20px,4vw,56px);align-items:start;border-top:1px solid var(--ink);padding-top:clamp(14px,2vw,22px)}
.shelf-hd h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(40px,6.6vw,78px);line-height:.98;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.shelf-intro{display:grid;gap:.8em;max-width:40em;padding-top:.5em}
.shelf-intro p{margin:0;font-size:clamp(16.5px,1vw + 10px,18.5px);line-height:1.5;text-wrap:pretty}
@media (min-width:820px){.shelf-hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.books{list-style:none;margin:clamp(26px,4.4vw,52px) 0 0;padding:0}
.book{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:12px clamp(20px,4vw,56px);padding:clamp(16px,2.2vw,22px) 0 clamp(18px,2.6vw,28px);border-top:1px solid var(--hair)}
.book.is-or::after{content:attr(data-or);position:absolute;z-index:1;left:0;bottom:-.66em;padding-right:.6em;background:var(--ground);font-family:var(--display);font-style:italic;font-size:21px;line-height:1.3;color:var(--quiet)}
.book-au{margin:0 0 4px;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet)}
.book-t{margin:0;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(25px,2vw + 14px,34px);line-height:1.08;color:var(--ink);text-wrap:balance}
.book-t a:hover{color:var(--red)}
.book-flag{margin:6px 0 0;font-style:italic;font-size:15.5px;color:var(--quiet)}
.book-facts{display:grid;gap:12px;align-content:start;min-width:0}
.fact{display:grid;grid-template-columns:minmax(0,1fr);gap:3px 16px;align-items:baseline}
.fact>.lab{margin:0;font-size:10.5px;color:var(--quiet);line-height:1.6}
.fact-v{display:grid;gap:6px;min-width:0;font-size:16.5px;line-height:1.45}
.fact-v p{margin:0;text-wrap:pretty}
.fact-links a{font-weight:500}
.fact-pp{margin-left:.9em;font-style:italic;font-size:15px;color:var(--quiet);white-space:nowrap}
.fact-note{font-size:15.5px;color:var(--quiet)}
.fact-pieces{display:flex;flex-wrap:wrap;gap:2px 18px}
.fact-pieces a{font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:21px;line-height:1.2;color:var(--ink)}
.fact.record .rec-title{font-family:var(--display);font-size:20px;line-height:1.2;color:var(--ink)}
.fact.record .rec{max-width:440px;margin:4px 0}
.fact.record .rec-btn{width:34px;height:34px}
@media (min-width:560px){.fact{grid-template-columns:8.4em minmax(0,1fr)}}
@media (min-width:820px){.book{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}
.crit{list-style:none;margin:clamp(26px,4.4vw,52px) 0 0;padding:0;columns:3 290px;column-gap:clamp(24px,4vw,56px)}
.crit li{break-inside:avoid;padding:12px 0 14px;border-top:1px solid var(--hair)}
.crit-t{margin:0 0 4px;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:22px;line-height:1.15;color:var(--ink)}
.crit .fact-note{margin:0;font-size:15px;line-height:1.4}

/* ---------- a book, and a part of it to read ---------- */
.read-hd h1{font-size:clamp(38px,6.6vw,70px)}
.read-hd.is-long h1{font-size:clamp(27px,3.6vw,40px);line-height:1.08}
.read-hd .kicker a{text-decoration-color:var(--hair)}
/* (a book's title is not parted at its hyphen where the line over the heading turns: it goes to the next row whole) */
.read-hd .kicker a{display:inline-block;position:relative}
.book-about{max-width:680px;margin:0 auto;padding:0 20px clamp(26px,4vw,44px);display:grid;gap:10px;font-size:16.5px;line-height:1.5;color:var(--quiet);text-align:center}
.book-about p{margin:0;text-wrap:pretty}
.versions,.book-pieces{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 18px}
.versions .lab,.book-pieces .lab{font-size:10.5px}
.versions b{font-weight:560;color:var(--ink)}
.book-pieces a{font-family:var(--display);font-weight:500;font-size:20px;color:var(--ink)}
.toc{max-width:1080px;margin:0 auto;padding:0 20px}
.toc-g+.toc-g{margin-top:clamp(28px,4.6vw,48px)}
.toc h2{margin:0 0 6px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet);display:flex;align-items:center;gap:16px}
.toc h2::after{content:"";flex:1;border-top:1px solid var(--hair)}
.toc h2:empty{gap:0}
.toc ol{list-style:none;margin:0 auto;padding:0;max-width:680px}
.toc ol.toc-many{max-width:none;columns:3 270px;column-gap:clamp(24px,4vw,52px)}
.toc li{break-inside:avoid;padding:6px 0 7px;border-bottom:1px solid var(--hair)}
.toc-p{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-decoration:none;font-size:17.5px;line-height:1.3;color:var(--ink)}
.toc-p:hover span:first-child{color:var(--red)}
.toc-pp{flex:none;font-size:13.5px;font-style:italic;color:var(--quiet);font-variant-numeric:lining-nums tabular-nums}
.toc-on{display:block;margin-top:2px;font-style:italic;font-size:14.5px;color:var(--quiet);text-decoration-color:transparent}
.toc-on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:.12em}
.toc-on:hover{color:var(--ink)}
.read-back{max-width:680px;margin:clamp(34px,5vw,56px) auto 0;padding:0 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 30px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:520;color:var(--quiet)}
.read-back a{position:relative;text-decoration:none}
/* (a finger's room around each of the reader's small ways, as around the menu's words; nothing is drawn) */
.read-back a::after,.read-hd .kicker a::after{content:"";position:absolute;inset:-9px -8px -10px}
.read-back a:hover{color:var(--ink)}

.reading{max-width:calc(35em + 40px);margin:0 auto;padding:0 20px;font-size:clamp(18.5px,.6vw + 16px,20.5px);line-height:1.55;color:var(--body);hanging-punctuation:first;overflow-wrap:break-word}
.reading>*{position:relative}
.rd-p{margin:0;text-indent:1.4em;text-wrap:pretty;hyphens:auto}
.reading>.rd-p:first-child,.rd-h+.rd-p,.rd-s+.rd-p,.rd-d+.rd-p,.rd-break+.rd-p,.rd-q+.rd-p,.rd-v+.rd-p,.rd-here+.rd-p{text-indent:0}
.rd-v+.rd-p,.rd-q+.rd-p{margin-top:.9em}
.is-tercets .rd-p{text-indent:0;margin:0 0 .62em}
.rd-h{margin:2em 0 .9em;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:1.5em;line-height:1.15;color:var(--ink);text-align:center;text-wrap:balance}
h3.rd-h{font-size:1.22em;margin:1.7em 0 .7em}
.reading>.rd-h:first-child{margin-top:0}
.rd-break{margin:1.3em 0;text-align:center;letter-spacing:.5em;color:var(--quiet)}
.rd-s{margin:1.05em 0 .05em;font-size:.68em;letter-spacing:.15em;text-transform:uppercase;font-weight:560;color:var(--ink);line-height:1.5}
.rd-d{margin:.7em 0;font-style:italic;font-size:.92em;line-height:1.4;color:var(--quiet)}
.rd-s+.rd-d{margin-top:.15em}
.rd-q{margin:.9em 0 .9em 1.4em;font-size:.95em}
.rd-v{margin:0}
.rd-v+.rd-v,.rd-p+.rd-v{margin-top:.9em}
.vl{position:relative;padding-left:2em;text-indent:-2em}
.vl[data-n]::before,.is-tercets .rd-p[data-n]::before{content:attr(data-n);position:absolute;right:calc(100% + 16px);top:.42em;text-indent:0;font-size:11.5px;line-height:1;font-style:normal;color:var(--quiet);font-variant-numeric:lining-nums tabular-nums}
@media (max-width:759.9px){.vl[data-n]::before,.is-tercets .rd-p[data-n]::before{display:none}}
.rd-here{margin:1.4em 0 .5em;padding-top:.5em;border-top:1px solid var(--red);font-size:.78em;font-style:italic;line-height:1.4;color:var(--quiet)}
.rd-here a{font-style:normal;color:var(--ink)}
.is-here::after{content:"";position:absolute;left:-14px;top:.3em;bottom:.3em;border-left:2px solid var(--red)}
.read-turn{max-width:calc(35em + 40px);margin:clamp(40px,7vw,80px) auto 0;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px}
.read-turn a{display:grid;align-content:start;gap:4px;padding:14px 0;border-top:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.read-turn .lab{font-size:10.5px;color:var(--quiet)}
.read-turn b{font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(19px,1.6vw + 12px,24px);line-height:1.15;text-wrap:balance}
.read-turn a:hover b{color:var(--red)}
.turn-next{text-align:right}
/* On a phone a page of a book is set at the size of the site's other running words, in the site's own margins,
   and a little smaller on a narrower phone, so that a line of verse keeps to its row: at 18.5 px one line in
   twenty-five turned on a phone 390 px wide, most of them for a single word; at 17.5 px one in eighty does. */
@media (max-width:479.9px){
  .reading{padding:0 16px;font-size:clamp(16.5px,4.5vw,17.5px)}
  .read-turn,.read-back{padding-left:16px;padding-right:16px}
  /* (the line over a passage that is drawn on a page keeps its size, and the bar beside the passage keeps clear of the window's edge) */
  .rd-here{font-size:14px}
  .is-here::after{left:-8px}
}

/* ---------- about ---------- */
.about-hd h1{font-size:clamp(36px,6vw,66px);line-height:1.02}
.about-lede{max-width:760px;margin:0 auto;padding:0 20px;font-size:clamp(19px,1.4vw + 12px,23px);line-height:1.45;color:var(--ink);text-wrap:pretty}
.about .sec{max-width:760px}
.about .sec p{margin:0 0 .85em;font-size:clamp(17.5px,.6vw + 15px,19px);line-height:1.55;text-wrap:pretty}
.about .sec p:last-child{margin-bottom:0}
.about .sec .after{font-size:16px;color:var(--quiet)}
.record-t{width:100%;margin:clamp(14px,2.4vw,22px) 0;border-collapse:collapse;font-size:16px;line-height:1.42}
.record-t th{padding:0 0 8px;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet);text-align:left}
.record-t td{padding:10px 0 11px;border-top:1px solid var(--hair);vertical-align:top}
.record-t td:first-child{width:46%;padding-right:clamp(16px,3vw,32px);color:var(--ink)}
.record-t td+td{color:var(--quiet)}
@media (max-width:619.9px){
  .record-t thead{display:none}
  .record-t,.record-t tbody,.record-t tr,.record-t td{display:block;width:auto}
  .record-t tr{padding:10px 0 12px;border-top:1px solid var(--hair)}
  .record-t td{padding:0;border:0}
  .record-t td:first-child{width:auto;padding:0 0 3px}
}
.cited{list-style:none;margin:0;padding:0;font-size:16.5px;line-height:1.45}
.cited li{margin:0 0 .5em;padding-left:1.5em;text-indent:-1.5em}

/* ---------- the class ---------- */
/* the way in from the front page: under the one passage; beside it on a wide page, the afternoons by name */
.home-class{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,28px) clamp(40px,5vw,72px);width:calc(100% - 2*clamp(16px,2vw,20px));max-width:1180px;margin:clamp(40px,6.4vw,84px) auto 0;padding:clamp(12px,1.8vw,20px) 0 clamp(18px,2.4vw,26px);border-top:1px solid var(--ink);border-bottom:1px solid var(--hair)}
.home-class-go{display:grid;gap:9px;align-content:start;text-decoration:none;color:var(--ink)}
.home-class .lab{color:var(--quiet)}
.home-class b{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.4vw,64px);line-height:1;letter-spacing:-.01em;text-wrap:balance;transition:color .25s}
.home-class b .nb{white-space:nowrap}
.home-class b .spec-arrow{display:inline-block;margin-left:.32em;font-size:.5em;vertical-align:.16em}
.home-class-go:hover b,.home-class-go:hover b .spec-arrow{color:var(--red)}
.home-class-go:hover b .spec-arrow{transform:translateX(4px)}
.home-class-say{max-width:36em;font-style:italic;font-size:clamp(16.5px,1vw + 11px,19.5px);line-height:1.4;color:var(--quiet);text-wrap:pretty}
.home-class-say i{font-style:normal}
.home-class-toc{display:none;list-style:none;margin:0;padding:0}
@media (min-width:900px){
  .home-class{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  .home-class-toc{display:block;columns:2;column-gap:clamp(20px,3vw,40px)}
  .home-class-toc li{break-inside:avoid;border-top:1px solid var(--hair)}
  .home-class-toc a{display:block;padding:6px 0 7px;text-decoration:none;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:18px;line-height:1.15;color:var(--ink);transition:color .2s}
  .home-class-toc a:hover{color:var(--red)}
}

.class{--gut:clamp(40px,5vw,72px)}
.class-hd{padding-bottom:clamp(24px,4vw,44px)}
.class-lede{max-width:calc(720px + 2*clamp(16px,2vw,20px));margin:0 auto;padding:0 clamp(16px,2vw,20px);display:grid;gap:.75em}
.class-lede p{margin:0;font-size:clamp(19px,1.4vw + 12px,23px);line-height:1.45;color:var(--ink);text-wrap:pretty}
/* the afternoons by name: a few short columns on a wide page, one line that opens on a narrow one */
.class-toc{max-width:1220px;margin:clamp(30px,5vw,60px) auto 0;padding:0 clamp(16px,2vw,20px)}
.class-toc ol{list-style:none;margin:0;padding:0}
.class-toc li{break-inside:avoid;border-top:1px solid var(--hair)}
.class-toc li a{display:block;padding:9px 0 11px;text-decoration:none;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(20px,.6vw + 17px,22px);line-height:1.15;color:var(--ink);transition:color .2s}
.class-toc li a:hover{color:var(--red)}
/* (after the way back from an afternoon, a red point marks that afternoon in the list, as it marks a part in a book's contents) */
.class-toc li.from a::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:9px;vertical-align:.16em}
.class-toc .fold ol{padding-bottom:6px}
@media (min-width:760px){
  .class-toc .fold,.class-toc .fold:last-child{border:0}
  .class-toc .fold summary{display:none}
  .class-toc ol,.class-toc .fold ol{columns:3 220px;column-gap:clamp(24px,4vw,56px);padding-bottom:0}
}
.class .sec{padding-left:clamp(16px,2vw,20px);padding-right:clamp(16px,2vw,20px)}

/* an afternoon: when, what it is called, who recorded it */
.scene{max-width:1220px;margin:clamp(76px,11vw,150px) auto 0;padding:0 clamp(16px,2vw,20px);scroll-margin-top:14px}
.scene-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:5px clamp(20px,4vw,56px);align-items:end;border-top:1px solid var(--ink);padding-top:clamp(12px,1.8vw,20px)}
.scene-when{margin:0;font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet);font-variant-numeric:lining-nums;text-wrap:balance}
/* (the halves of the line: a point stands before each, in the space between two, and the one that would begin a line falls outside the line and is not seen) */
.scene-when{overflow:hidden}
.when-in{display:flex;flex-wrap:wrap;margin-left:-1.5em}
.when-in>span{position:relative;padding-left:1.5em}
.when-in>span::before{content:"·";position:absolute;left:-.085em;width:1.5em;text-align:center;letter-spacing:0}
.scene-hd h2{margin:0;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:400;font-size:clamp(40px,6.6vw,80px);line-height:.98;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.scene-src{margin:0;font-style:italic;font-size:clamp(15.5px,.6vw + 12px,17.5px);line-height:1.35;color:var(--quiet);text-wrap:balance}
.scene-src i,.part-src i,.fold-src i,.scene-said figcaption i{font-style:normal}
/* over the rule, at the right, a small way back to the list of the afternoons: it stands in the space between two
   afternoons and takes no room of its own */
.scene-hd{position:relative}
.scene-up{position:absolute;right:0;bottom:100%;display:inline-flex;align-items:baseline;gap:.7em;padding:12px 0 9px 16px;font-size:11.5px;line-height:1.3;letter-spacing:.17em;text-transform:uppercase;font-weight:520;color:var(--quiet);text-decoration:none;white-space:nowrap;transition:color .2s}
.scene-up-a{font-size:14px;line-height:1;letter-spacing:0}
.scene-up:hover{color:var(--red)}
.scene-up:focus-visible{outline:0;box-shadow:0 2px 0 var(--red)}
.class-toc{scroll-margin-top:14px}
.class-toc:focus{outline:0}
@media (min-width:820px){
  .scene-hd{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .scene-when{grid-column:1/-1}
  .scene-src{padding-bottom:.7em;text-align:right}
}
/* the sentence a lecture opened on */
.scene-said{margin:clamp(28px,5vw,60px) 0 0}
.scene-said blockquote{margin:0;max-width:17em;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(30px,4.8vw,58px);line-height:1.06;color:var(--ink);text-wrap:balance;hanging-punctuation:first}
.scene-said figcaption{margin:0 0 10px;font-size:15px;font-style:italic;color:var(--quiet)}

/* what follows in an afternoon stands in bands; running words keep a measure, and where there are many of them and the page is wide they run in two columns */
.band{margin-top:clamp(26px,4.4vw,52px)}
.prose{max-width:36em}
.prose p{margin:0 0 .8em;font-size:clamp(17.5px,.5vw + 15.5px,19.5px);line-height:1.55;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
/* on a narrow page lines are filled as they come: evening out the last lines there can end two lines short at two full stops, which reads as a new paragraph */
@media (max-width:759.9px){.prose p{text-wrap:wrap}}
.band.with-side .listed,.band.with-side .beside{margin-top:clamp(24px,4vw,36px);max-width:36em}
.band.follows{margin-top:15px}
/* On a wide page running words have one measure wherever they stand: the width of one of the two columns.
   Two paragraphs or more run in both columns; one paragraph keeps to the left one. */
@media (min-width:980px){
  .scene .prose,.scene .fold-in,.scene .board-note{max-width:calc((100% - var(--gut))/2)}
  .scene .prose.flow2{max-width:none;columns:2;column-gap:var(--gut);orphans:2;widows:2}
  .band.with-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--gut);align-items:start}
  .band.with-side .prose{max-width:none}
  .band.with-side .listed,.band.with-side .beside{margin-top:.35em;max-width:none}
  .band.with-side .beside .specs.specs-one{max-width:none}
  .band.follows{margin-top:clamp(22px,2.6vw,32px)}
  .scene .board-note.flow2{max-width:none;columns:2;column-gap:var(--gut);orphans:2;widows:2}
  .board-note.two p{break-inside:avoid;margin-bottom:0}
}
.part-hd,.board-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;margin:0 0 clamp(12px,2vw,18px);padding-bottom:9px;border-bottom:1px solid var(--hair)}
.part-hd .lab,.board-hd .lab{color:var(--ink)}
.part-src{font-style:italic;font-size:14px;line-height:1.35;color:var(--quiet);text-wrap:balance}
/* a page reference inside a sentence: a size smaller, in the grey of the labels */
/* (its class is the class page's own: the plates' kit marks a word that lights its place in the passage with `ref`) */
.page-ref{font-size:.86em;color:var(--quiet);white-space:nowrap;font-variant-numeric:lining-nums}
.board-note .page-ref,.asked-after .page-ref{font-size:inherit}

/* a short list set down by a witness: questions asked, propositions read out */
.listed .part-hd{margin-bottom:0}
.listed-items{list-style:none;margin:0;padding:0;counter-reset:n}
.listed-items li{padding:10px 0 11px;border-bottom:1px solid var(--hair);font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(20px,.8vw + 15.5px,24px);line-height:1.2;color:var(--ink);text-wrap:balance}
ol.listed-items li{counter-increment:n;display:grid;grid-template-columns:1.7em minmax(0,1fr)}
ol.listed-items li::before{content:counter(n);padding-top:.42em;font-family:var(--text);font-size:13px;line-height:1;color:var(--quiet);font-variant-numeric:lining-nums}
.listed-after{margin:14px 0 0;font-size:clamp(16.5px,.4vw + 15px,18px);line-height:1.5;color:var(--body);text-wrap:pretty}
/* the work that was set, as far as it is on record: a line to each thing, its witness under it, and the ways from it */
.set-wide{max-width:36em}
.set-items{list-style:none;margin:0;padding:0}
.set-items>li{break-inside:avoid;display:grid;gap:3px;padding:11px 0 13px;border-bottom:1px solid var(--hair)}
.set-text{font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(20px,.8vw + 15.5px,24px);line-height:1.2;color:var(--ink);text-wrap:balance}
.set-by{font-style:italic;font-size:14.5px;line-height:1.4;color:var(--quiet);text-wrap:pretty}
.set-by i{font-style:normal}
.set-ways{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 22px;margin-top:3px;font-size:16px;line-height:1.4}
.set-on{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet)}
/* on a phone each way is a line a thumb can find */
@media (max-width:759.9px){.set-ways{gap:0 22px;margin-top:0}.set-ways a{padding:9px 0}.set-on{flex-basis:100%;padding-top:8px}}
.set-ways a{display:inline-flex;align-items:baseline;gap:.4em;color:var(--ink);text-decoration:none}
.set-ways a>span:first-child{text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:.22em;transition:text-decoration-color .2s}
.set-ways a:hover>span:first-child{text-decoration-color:var(--red)}
.set-arrow{font-size:14px;color:var(--quiet);transition:color .2s}
.set-ways a:hover .set-arrow{color:var(--red)}
.set .doors{margin-top:clamp(18px,2.6vw,26px)}
@media (min-width:980px){
  .set-wide{max-width:none}
  .set-wide .set-items{columns:2;column-gap:var(--gut)}
  .set .specs.specs-one{max-width:none}
}

/* a blackboard, or a thing set to scale, stands on the page itself, under its label. The site's tinted paper is
   kept for what is handed to the reader: a sheet of questions, a passage cut from a work. */
.board{margin-left:0;margin-right:0;container-type:inline-size;color:var(--ink)}
.board-hd{margin-bottom:clamp(16px,2.6vw,26px)}
.board-note{max-width:48em;margin:clamp(16px,2.6vw,24px) 0 0;padding-top:12px;border-top:1px solid var(--hair);font-size:15.5px;line-height:1.5;color:var(--quiet)}
.board-note p{margin:0 0 .6em;text-wrap:pretty}
.board-note p:last-child{margin-bottom:0}
/* what was written on a board comes on a line at a time, once, as the page reaches it */
.to-write .wr{opacity:0;transform:translateY(6px);transition:opacity .8s ease,transform .8s ease;transition-delay:calc(var(--i) * .3s)}
.to-write.written .wr{opacity:1;transform:none}

/* three lines on the board, and two cases tried on them */
.k3{width:100%;border-collapse:collapse}
.k3 thead th{padding:0 clamp(14px,2.4cqw,30px) 10px 0;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--quiet);text-align:left;vertical-align:bottom;text-wrap:balance}
.k3 tbody th,.k3 tbody td{padding:clamp(13px,1.8cqw,19px) clamp(14px,2.4cqw,30px) clamp(14px,2cqw,21px) 0;border-top:1px solid var(--hair);vertical-align:baseline;text-align:left}
.k3 tbody tr>:last-child{padding-right:0}
.k3-head{width:5.2em;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(20px,.9cqw + 14px,24px);line-height:1.1;color:var(--ink)}
.k3-board{width:30%;font-family:var(--display);font-weight:500;font-size:clamp(22px,1.5cqw + 14px,30px);line-height:1.1;color:var(--ink);text-wrap:balance}
.k3-case{font-size:clamp(16.5px,.4cqw + 14.5px,18px);line-height:1.45;color:var(--body);text-wrap:pretty}
.k3-case.is-none{font-style:italic;color:var(--quiet)}
.k3n{display:none}
.k3n-board{list-style:none;margin:0;padding:0}
.k3n-board li{display:grid;gap:1px;padding:11px 0 13px;border-top:1px solid var(--hair)}
.k3n-board li:first-child{padding-top:0;border-top:0}
.k3n .k3-head,.k3n .k3-board{width:auto}
.k3n-case{margin-top:clamp(18px,4cqw,26px);padding-top:11px;border-top:1px solid var(--ink)}
.k3n-case .lab{margin:0 0 9px;color:var(--ink)}
.k3n-case dl{margin:0;display:grid;gap:9px}
.k3n-case dl>div{display:grid;grid-template-columns:4.9em minmax(0,1fr);gap:0 10px;align-items:baseline}
.k3n-case dt{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;line-height:1.2;color:var(--ink)}
.k3n-case dd{margin:0;font-size:clamp(16.5px,.4cqw + 14.5px,18px);line-height:1.45;color:var(--body);text-wrap:pretty}
.k3n-case dd.is-none{font-style:italic;color:var(--quiet)}
@container (max-width:619.9px){
  .k3{display:none}
  .k3n{display:block}
}

/* six schemes for one play */
.sch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(22px,3cqw,34px) clamp(24px,3.6cqw,48px)}
.sch-one{border-top:1px solid var(--ink);padding-top:10px}
.sch-one h4{margin:0 0 12px;display:flex;align-items:baseline;gap:.6em;font-family:var(--display);font-weight:500;font-size:clamp(20px,.8cqw + 15px,24px);line-height:1.1;color:var(--ink);text-wrap:balance}
.sch-n{flex:none;min-width:1.7em;font-family:var(--text);font-size:12px;letter-spacing:.1em;font-weight:560;font-style:normal;color:var(--quiet);font-variant-numeric:lining-nums}
.sch-sides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;align-items:start}
.sch-sides.has-apart{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.sch-l{margin:0 0 3px;font-family:var(--display);font-style:italic;font-weight:500;font-size:17px;line-height:1.3;color:var(--quiet)}
.sch-names{margin:0;display:grid;gap:1px;font-size:18px;line-height:1.32;color:var(--ink)}
.sch-sides .sch-apart{align-self:center}
.sch-apart .nm::before,.sch-apart .nm::after{content:"";display:inline-block;width:12px;border-top:1px solid currentColor;vertical-align:.3em}
.sch-apart .nm::before{margin-right:6px}
.sch-apart .nm::after{margin-left:6px}
.sch-tiers{display:grid;gap:6px;container-type:inline-size}
.sch-tiers .sch-g{display:grid;grid-template-columns:5.2em minmax(0,1fr);align-items:center;gap:0 10px}
.sch-tiers .sch-l{margin:0}
.sch-tiers .sch-names{grid-column:2;display:flex;flex-wrap:wrap;gap:0 .75em}
.sch-tiers .has-lines .sch-names{display:grid;gap:1px}
.sch-line{display:flex;flex-wrap:wrap;gap:0 1.1em}
.sch-run{white-space:nowrap}
@container (max-width:329.9px){.sch-tiers .sch-g{grid-template-columns:minmax(0,1fr)}.sch-tiers .sch-names{grid-column:1}.sch-tiers .sch-l{margin:0 0 3px}}
.sch-under{margin:10px 0 0;font-size:16.5px;line-height:1.3;color:var(--ink)}
.sch-names,.sch-under,.nm{transition:color .25s}
.nm-note{font-size:.84em;color:var(--quiet)}
.sch.has-pick .sch-names,.sch.has-pick .sch-under{color:rgba(29,27,24,.42)}
.sch.has-pick .nm.is-on{color:var(--red)}
.sch.has-pick .nm.is-on .nm-note{color:inherit}
.nm.can{cursor:pointer}
@media (hover:hover){.nm.can:hover{box-shadow:0 1px 0 rgba(29,27,24,.38)}}
.sch-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(14px,2.2cqw,24px);margin:0 0 clamp(20px,3cqw,32px)}
.sch-lead{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;color:var(--quiet)}
.sch-pick button{position:relative;appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;padding:1px 0 2px;margin:0;font:inherit;font-style:normal;font-size:18px;line-height:1.3;color:var(--ink);cursor:pointer;box-shadow:0 1px 0 rgba(29,27,24,.38);transition:color .2s,box-shadow .2s}
.sch-pick button::after{content:"";position:absolute;inset:-9px -7px}
.sch-pick button:hover{box-shadow:0 1px 0 var(--ink)}
.sch-pick button[aria-pressed="true"]{color:var(--red);box-shadow:0 1.5px 0 var(--red)}
.sch-pick button:focus-visible{outline:0;box-shadow:0 3px 0 var(--red)}
/* what he said of four of them as he wrote: under the board, all of it at rest, two to a row where there is room.
   A name followed is said aloud once (.sch-say), and is not shown a second time. */
.sch{position:relative}
.sch-say{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sch-said{margin-top:clamp(30px,4.4cqw,52px)}
.sch-rems{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3cqw,34px) var(--gut)}
@container (min-width:700px){.sch-rems{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.sch-rem h4{margin:0 0 5px}
.sch-who{position:relative;appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;padding:0;margin:0;font-family:var(--display);font-weight:500;font-size:clamp(24px,1.2cqw + 16px,30px);line-height:1.05;text-align:left;color:var(--ink);cursor:pointer;transition:color .2s}
.sch-who::after{content:"";position:absolute;inset:-8px -8px}
.sch-rem.is-on .sch-who{color:var(--red)}
@media (hover:hover){.sch-who:hover{color:var(--red)}}
.sch-who:focus-visible{outline:0;box-shadow:0 3px 0 var(--red)}
.sch-where{list-style:none;margin:0 0 9px;padding:0;display:flex;flex-wrap:wrap;gap:2px 20px;font-size:15.5px;font-style:italic;color:var(--quiet)}
.sch-where li{display:inline-flex;align-items:baseline;gap:.45em}
.sch-where .sch-n{min-width:0}
.sch-says{margin:0;font-size:clamp(16.5px,.4cqw + 14.5px,18px);line-height:1.5;color:var(--body);text-wrap:pretty}
.sch-silent{margin:clamp(18px,2.4cqw,26px) 0 0;font-size:15.5px;line-height:1.45;font-style:italic;color:var(--quiet);transition:color .2s}
.sch-silent.is-on{color:var(--ink)}

/* a chart in two rows, the width of the board: on a narrow page it is scrolled across */
.bl-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6cqw,18px)}
.bl-list li{display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:baseline}
.bl-n{font-size:15px;color:var(--quiet);font-variant-numeric:lining-nums}
.bl-t{font-family:var(--display);font-weight:500;font-size:clamp(21px,1cqw + 15px,27px);line-height:1.2;color:var(--ink);text-wrap:pretty}
.tiers-scroll{overflow-x:auto;margin:0 calc(-1*clamp(16px,2vw,20px));padding:2px clamp(16px,2vw,20px) 12px;scrollbar-width:thin}
.tiers-more{margin:calc(-1*clamp(4px,1vw,8px)) 0 12px;font-style:italic;font-size:15.5px;color:var(--quiet)}
.tiers{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:max(100%,calc(var(--n)*var(--col,112px)));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.tier-col{display:grid;grid-template-rows:1fr 1fr;min-width:0;border-left:1px solid var(--hair)}
.tier-col:first-child{border-left:0}
.tier-up,.tier-low{padding:14px 10px 15px;font-family:var(--display);font-weight:500;font-size:clamp(17.5px,.5cqw + 13px,20.5px);line-height:1.12;color:var(--ink);text-wrap:balance;hyphens:manual}
.tier-col:first-child>*{padding-left:0}
.tier-low{border-top:1px solid var(--hair)}

/* the reading list to scale: a bar to a work */
.load-strip{display:flex;align-items:flex-end;gap:2px;height:clamp(44px,6.4cqw,70px);margin-top:26px;touch-action:pan-y}
.load-tag{position:absolute;left:0;bottom:100%;padding-bottom:5px;white-space:nowrap;font-family:var(--text);font-style:italic;font-size:13.5px;line-height:1;color:var(--quiet);pointer-events:none}
.load-tag.is-au{font-style:normal}
.load-w{position:relative;flex:var(--pages) 0 0px;min-width:2px;height:100%;padding:0;font:inherit;appearance:none;-webkit-appearance:none;border:1px solid rgba(29,27,24,.55);border-radius:1px;background-color:rgba(60,50,30,.04)}
button.load-w{cursor:pointer}
.load-w.is-taught{background-color:var(--ink);border-color:var(--ink)}
.load-w.is-omit{background-image:repeating-linear-gradient(135deg,transparent 0,transparent 4px,rgba(29,27,24,.2) 4px,rgba(29,27,24,.2) 5px)}
.load-w.is-absent{flex:0 0 9px;border-style:dashed;background:none}
.load-strip .load-w:focus{outline:0}
.load-strip .load-w:focus-visible{outline:0}
.load-strip .load-w.is-at::after,.load-strip .load-w[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:-9px;width:max(100% + 2px,9px);transform:translateX(-50%);border-top:3px solid var(--red)}
.load-strip .load-w.is-at:not([aria-pressed="true"])::after{border-top-width:1.5px;bottom:-8px}
.load-open{display:block;font-style:italic}
.load-open a{color:inherit;text-decoration-color:var(--hair);text-underline-offset:.2em}
.load-open a:hover{text-decoration-color:var(--red)}
.load-now{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:1.5em;margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--ink);font-variant-numeric:lining-nums}
.load-says{min-width:0}
.load-now b{font-weight:520}
.load-steps{flex:none;display:inline-flex;margin:-8px -9px 0 0}
.load-step{appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;margin:0;padding:8px 10px;font:inherit;font-size:19px;line-height:1.25;color:var(--quiet);cursor:pointer;transition:color .2s}
.load-step:hover{color:var(--red)}
.load-step:focus-visible{outline:0;color:var(--red);box-shadow:inset 0 -2px 0 var(--red)}
.load-keys{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:4px 26px;font-size:15px;font-style:italic;color:var(--quiet)}
.load-k{display:inline-flex;align-items:center;gap:8px}
.load-k .load-w{flex:none;width:14px;height:17px}

/* the cantos to scale: a stroke to a paragraph of the prose */
.cantos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,138px),1fr));gap:clamp(24px,3.4cqw,36px) clamp(22px,4cqw,56px)}
.canto{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:0}
.canto-name{display:flex;align-items:flex-end;margin:0 0 10px;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(21px,.8cqw + 16px,26px);line-height:1.1;color:var(--ink)}
.canto-strokes{display:grid;align-content:start;gap:3px;padding:11px 0 12px;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);text-decoration:none}
.canto-strokes i{display:block;height:2px;width:calc(var(--w)*100%);border-radius:1px;background:var(--ink);opacity:.5;transition:opacity .2s}
.canto-strokes i.is-shown{height:3px;background:var(--red);opacity:1}
.canto-strokes:hover i{opacity:.85}
.canto-strokes:hover i.is-shown{opacity:1}
.canto-n{margin:10px 0 0;font-size:15.5px;color:var(--quiet);font-variant-numeric:lining-nums}
.cantos-sum{margin:clamp(22px,3.2cqw,34px) 0 0;max-width:30em;font-family:var(--display);font-weight:500;font-variant-numeric:lining-nums;font-size:clamp(20px,.8cqw + 15.5px,24px);line-height:1.22;color:var(--ink);text-wrap:balance}
.canto-on{display:grid;grid-template-columns:22px minmax(0,1fr);margin:3px 0 0;font-size:15.5px;line-height:1.35;font-style:italic;color:var(--quiet)}
.canto-on::before{content:"";width:14px;margin-top:.56em;border-top:3px solid var(--red)}
/* (narrow: a name may turn; the rules under two names side by side still line up) */
@container (max-width:559.9px){.canto-name{min-height:2.2em}}

/* what he played */
.heard-in{display:grid;grid-template-columns:minmax(0,1fr);gap:18px clamp(40px,5vw,72px);align-items:start}
@media (min-width:980px){
  .heard-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .heard .heard-a.flow2{columns:auto}
  .heard .prose{max-width:none}
  /* more than two paragraphs: the first two stand beside the record, and the rest run under both */
  .heard-in.has-more{grid-template-areas:"a rec" "b b"}
  .heard-in.has-more .heard-a{grid-area:a}
  .heard-in.has-more .heard-rec{grid-area:rec}
  .heard-in.has-more .heard-b{grid-area:b;margin-top:0}
}
.heard-note{margin:12px 0 0;font-size:16px;line-height:1.45;font-style:italic;color:var(--quiet);text-wrap:pretty}
.heard-rec.is-none .heard-note{margin-top:0}
.heard-rec .rec-title{margin:0;font-family:var(--display);font-size:clamp(20px,2.4vw,25px);line-height:1.15;color:var(--ink);text-wrap:balance}
.heard-rec .src{margin:0;font-size:15px;font-style:italic;color:var(--quiet);text-wrap:pretty}

/* what he asked for by the next meeting */
.asked{border-radius:6px;color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge),inset 0 0 90px var(--shade);padding:clamp(16px,2.4vw,26px) clamp(18px,4vw,52px) clamp(20px,3vw,36px)}
.asks{list-style:none;margin:0 0 calc(-1*clamp(14px,2vw,22px));padding:0;counter-reset:q}
@media (min-width:980px){.asks{columns:2;column-gap:clamp(40px,5vw,72px)}}
.asks li{break-inside:avoid;margin:0 0 clamp(14px,2vw,22px);counter-increment:q;display:grid;grid-template-columns:1.7em minmax(0,1fr);align-items:baseline;font-family:var(--display);font-variant-numeric:lining-nums;font-style:italic;font-weight:500;font-size:clamp(22px,1.2vw + 15px,29px);line-height:1.16;color:var(--ink);text-wrap:balance}
.asks li::before{content:counter(q);font-family:var(--text);font-style:normal;font-size:13px;line-height:1;color:var(--quiet);font-variant-numeric:lining-nums}
.asks li i{font-style:normal}
.asked-after{margin:calc(clamp(16px,2.4vw,24px) + clamp(14px,2vw,22px)) 0 0;padding-top:12px;border-top:1px solid var(--hair);font-size:16px;font-style:italic;color:var(--quiet);text-wrap:pretty}
.next .doors{margin-top:clamp(14px,2vw,22px)}
/* the passages a part opens */
.doors .specs{margin-bottom:0}
.specs.specs-one{columns:auto;max-width:640px}
/* two cards side by side are of one height, so that their ways in stand on one line */
@media (min-width:940px){
  .specs.specs-two{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-bottom:0}
  .specs.specs-two>.spec{margin:0}
}
.doors .ways{margin-top:0}
.doors .specs+.ways{margin-top:clamp(18px,2.6vw,30px)}
/* one card: what is folded stands beside it */
@media (min-width:980px){
  .opened-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(40px,5vw,72px);align-items:start}
  .opened-pair .specs.specs-one{max-width:none}
  .opened-pair .folds{margin-top:0}
  .opened-pair .fold:first-child{border-top:0}
  .opened-pair .fold:first-child summary{align-items:baseline;padding-top:0;padding-bottom:9px;border-bottom:1px solid var(--hair);margin-bottom:clamp(12px,2vw,18px);font-family:var(--text);font-style:normal;font-size:11.5px;line-height:inherit;letter-spacing:.17em;text-transform:uppercase;font-weight:560}
  .opened-pair .fold:first-child summary::after{font-size:15px;line-height:.8}
  .scene .opened-pair .fold-in{max-width:none}
}
.ways{list-style:none;margin:clamp(10px,1.6vw,16px) 0 0;padding:0}
.ways li{border-top:1px solid var(--hair)}
.ways li:last-child{border-bottom:1px solid var(--hair)}
.ways a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0 12px;text-decoration:none;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(20px,1vw + 14px,24px);line-height:1.15;color:var(--ink);text-wrap:balance}
.ways a:hover .spec-arrow{color:var(--red);transform:translateX(3px)}
.ways.answers a:hover .spec-arrow{transform:translateY(3px)}
.ways+.folds,.ways+.ways,.doors:has(>.ways:last-child)+.folds,.doors:has(>.ways:last-child)+.ways{margin-top:0}
.ways:has(+.folds) li:last-child,.ways:has(+.ways) li:last-child,.doors:has(+.folds)>.ways:last-child li:last-child,.doors:has(+.ways)>.ways:last-child li:last-child{border-bottom:0}
/* what is kept folded: his own answer, what the students wrote, what he wrote later */
.folds{margin-top:clamp(10px,1.6vw,16px)}
.fold{border-top:1px solid var(--hair)}
.fold:last-child{border-bottom:1px solid var(--hair)}
/* a fold is set as the rows that open a piece are, in italic to tell it from a link, with a plus where their arrows stand */
.fold summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0;padding:11px 0 12px;font-family:var(--display);font-variant-numeric:lining-nums;font-style:italic;font-weight:500;font-size:clamp(20px,1vw + 14px,24px);line-height:1.15;letter-spacing:0;text-transform:none;color:var(--ink);text-wrap:balance}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"+";flex:none;font-family:var(--text);font-style:normal;font-weight:400;font-size:21px;line-height:1;color:var(--quiet);transition:color .25s}
.fold[open] summary::after{content:"\2013"}
.fold summary:hover::after{color:var(--red)}
.fold summary:focus-visible{outline:0;box-shadow:0 2px 0 var(--red)}
.fold-in{max-width:40em;padding:2px 0 20px}
.fold-in p{margin:0 0 .7em;font-size:clamp(17px,.4vw + 15.5px,18.5px);line-height:1.55;text-wrap:pretty}
.fold-in p:last-child{margin-bottom:0}
.fold-in .fold-src{font-size:15px;line-height:1.4;font-style:italic;color:var(--quiet)}

/* three short things at the end stand side by side */
.voices-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.2vw,44px) clamp(26px,4vw,60px);padding-top:clamp(8px,1.4vw,16px)}
@media (min-width:560px){.voices-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.voices-in{grid-template-columns:repeat(3,minmax(0,1fr))}}
.voice{margin:0}
.voice blockquote{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(25px,1.1vw + 18px,33px);line-height:1.14;color:var(--ink);text-wrap:balance}
.voice figcaption{margin-top:12px;font-size:15.5px;line-height:1.42;color:var(--quiet)}
.voice figcaption b{display:block;margin-bottom:2px;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:560;color:var(--ink)}
.voice-of,.voice-src{display:block}
.voice-src{font-style:italic}
.voices-after{max-width:var(--measure,640px);margin:clamp(22px,3vw,34px) 0 0}
.scenes-small{max-width:1220px;margin:clamp(76px,11vw,150px) auto 0;padding:0 clamp(16px,2vw,20px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(44px,6vw,64px) clamp(30px,4vw,56px);align-items:start}
.scene-small{max-width:none;margin:0;padding:0}
.scene-small .scene-hd{display:block}
.scene-small h3{margin:6px 0 7px;font-family:var(--display);font-variant-numeric:lining-nums;font-weight:500;font-size:clamp(28px,1.6vw + 19px,38px);line-height:1.02;color:var(--ink);text-wrap:balance}
.scene-small .scene-src{padding:0;text-align:left;font-size:15px}
.scene-small .band{margin-top:16px}
.scene-small .prose p{font-size:clamp(16.5px,.3vw + 15.5px,17.5px)}
.class-end ul+details{margin-top:18px}
.sources .end-fold{font-size:inherit}
.sources .end-fold .fold-in{max-width:none;padding:4px 0 16px}
.sources li.src-group{margin:9px 0 2px;padding-left:0;text-indent:0}
.src-h{display:block;margin-bottom:6px;font-style:italic}
.class-on{display:grid;gap:clamp(13px,2.2vw,18px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .to-write .wr{opacity:1;transform:none;transition:none}
  .plate *,.plate *::before{transition:none!important}
}
@media print{
  .to-write .wr{opacity:1;transform:none}
  .fold-in{display:block}
  .top nav,.plate-tabs,.aside button,.dg-say:empty,.scene-up{display:none}
  .side{position:relative;top:auto}
}