/* The grid of faces, the period heading over it, and the panel of books that opens underneath.
   Lifted out of index.html when poets.html came along and needed exactly the same thing. Copying it
   would have made two of them, and this site has already been bitten twice by a second copy drifting
   away from the first -- the mobile app deciding its own periods out of birth years, and the mobile
   reader keeping its own idea of whether rhyme was showing.
   The front page addresses the open panel by id, the poets page by class; the rules below answer to
   both so neither page has to know about the other. */
/* ---------- a period heading inside the grid of faces ---------- */
.chap{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:4px 30px;align-items:start;border-top:1px solid var(--ink-3);padding:22px 0 14px;margin-top:10px}.poets>.chap:first-child{margin-top:0}.chap .ci{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}.chap h3{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-size:23px;font-weight:600;line-height:1.15;margin:0;color:var(--ink)}.chap h3 .yr{font:12px "IBM Plex Mono",monospace;color:var(--ink-3);font-weight:400;margin-left:10px;white-space:nowrap}.chap .n{font:11.5px "IBM Plex Mono",monospace;color:var(--ink-3)}.chap p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5;max-width:64ch}.chap .back{background:none;border:0;padding:2px 0 0;margin-top:2px;font:500 13px "IBM Plex Sans",sans-serif;color:var(--ink-2);cursor:pointer;border-bottom:1px dotted var(--rule-2)}.chap .back:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}.chap.letter{grid-template-columns:1fr;border-top:1px solid var(--rule);padding:16px 0 4px;margin-top:2px}.chap.letter h3{font:500 13px "IBM Plex Sans",sans-serif;letter-spacing:.16em;color:var(--ink-3)}@media (max-width:700px){.chap{grid-template-columns:1fr;gap:6px;padding:18px 0 12px}}.chapmore{grid-column:1/-1;padding:4px 0 2px}.chapmore button{background:none;border:0;padding:0;font:500 13.5px "IBM Plex Sans",sans-serif;color:var(--ink-2);cursor:pointer;border-bottom:1px dotted var(--rule-2)}.chapmore button::after{content:" ↓";color:var(--ink-3)}.chapmore button:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}/* A fixed column count, not auto-fill: the number of faces in a period's row has to be knowable from
   the script, and every row has to end flush on the right. --cols is read back in js/home.js. */
.poets{--cols:8;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:20px 12px}@media (max-width:1180px){.poets{--cols:7}}@media (max-width:1040px){.poets{--cols:6}}@media (max-width:880px){.poets{--cols:5}}@media (max-width:720px){.poets{--cols:4}}@media (max-width:560px){.poets{--cols:3}}@media (max-width:380px){.poets{--cols:2}}.poet{text-align:center;background:transparent;border:0;padding:8px 4px 10px;min-width:0;border-radius:6px;cursor:pointer;color:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;font:inherit}.poet img, .poet .ph{width:78px;height:78px;border-radius:50%;object-fit:cover;object-position:50% 28%;border:1px solid var(--rule-2);filter:sepia(.2);background:var(--paper-3)}.poet .ph{display:flex;align-items:center;justify-content:center;filter:none;background:var(--paper-2);border:1px solid var(--rule-2);font:600 22px/1 "Fraunces",Georgia,serif;color:var(--ink-2);letter-spacing:.04em}.poet:hover .ph{border-color:var(--accent);color:var(--accent-ink)}.poet:hover{background:var(--paper-2)}.poet:hover img{filter:sepia(0)}/* A manuscript or a statue standing in for a missing portrait: square corners and a full view, so it is never mistaken for the poet's face. The rule lives in site.css; this keeps the
   medallion's own sizing from overriding it. */
.poet img.ctx{border-radius:2px;object-fit:contain;background:var(--paper-3);object-position:50% 50%}.poet[aria-expanded="true"]{background:var(--paper-2);box-shadow:inset 0 -3px 0 var(--accent)}.poet .nm{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:14.5px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}.poet .yrs{font:11px "IBM Plex Mono",monospace;color:var(--ink-3)}.poet .nw{font-size:11.5px;color:var(--ink-3);margin-top:auto}#poetWorks, .poetworks{grid-column:1/-1;margin:4px 0 10px;border-top:1px solid var(--ink-3);border-bottom:1px solid var(--rule-2);padding:16px 0 12px;position:relative;background:var(--paper-2);padding-left:14px;padding-right:14px}#poetWorks .pwclose, .poetworks .pwclose{position:absolute;right:8px;top:6px;background:none;border:0;font-size:20px;color:var(--ink-3);cursor:pointer}.poet[aria-expanded="true"]{background:var(--paper-2);border-radius:6px 6px 0 0}.poet[aria-expanded="true"]::after{content:'';display:block;width:0;height:0;border:7px solid transparent;border-bottom-color:var(--ink-3);margin:-2px auto -12px}#poetWorks .pwhead, .poetworks .pwhead{display:flex;gap:16px;align-items:center;margin-bottom:10px}#poetWorks .pwhead img, .poetworks .pwhead img, #poetWorks .pwhead .ph, .poetworks .pwhead .ph{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 28%;border:1px solid var(--rule-2);flex:none}#poetWorks .pwhead .ph, .poetworks .pwhead .ph{display:flex;align-items:center;justify-content:center;background:var(--paper-3);font:600 17px/1 "Fraunces",Georgia,serif;color:var(--ink-2)}#poetWorks .pwhead h3, .poetworks .pwhead h3{font-size:22px;margin:0}#poetWorks .pwlist, .poetworks .pwlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 32px}#poetWorks .pw, .poetworks .pw{padding:10px 0;border-bottom:1px solid var(--rule)}#poetWorks .pw b, .poetworks .pw b{font-family:"Fraunces",Georgia,serif;font-size:17px}#poetWorks .pw b a, .poetworks .pw b a{color:var(--ink)}#poetWorks .pw p, .poetworks .pw p{margin:3px 0 4px;font-size:13.5px;color:var(--ink-2)}#poetWorks .pw .meta, .poetworks .pw .meta{font:11.5px "IBM Plex Mono",monospace;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap}#poetWorks .pw .meta a, .poetworks .pw .meta a{color:var(--accent-ink)}#poetWorks .pw .meta .linkbtn.about, .poetworks .pw .meta .linkbtn.about{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink);cursor:pointer;border-bottom:1px dotted var(--rule-2)}