/* Paper and ink. Light is the default look; dark is a reading-lamp option chosen with the toggle in the nav. */
:root{
  color-scheme:light;
  --paper:#f7f2e8; --paper-2:#efe7d8; --paper-3:#e4dac6; --paper-4:#d6c9b0;
  --ink:#241f1a; --ink-2:#5a5148; --ink-3:#8c8073;
  --rule:#dccfb9; --rule-2:#c9b99d;
  --accent:#7a2e2a; --accent-soft:#f0dcd6; --accent-ink:#5f221f;
  --amber:#a8781f; --amber-soft:#f2e4c4; --amber-ink:#7d5713;
  --rose:#9c3b2f; --rose-soft:#f1d9d3; --rose-ink:#772a21;
  --green:#3d6b45; --green-soft:#dbe8d9; --green-ink:#2c5133;
  --bar-muted:#cfc2a8;
  --tip-bg:#241f1a; --tip-ink:#f7f2e8;
  --shadow:0 1px 2px rgba(36,31,26,.06), 0 10px 28px -14px rgba(36,31,26,.35);
  --r1:#7a2e2a; --r2:#a8781f; --r3:#3f5f8a; --r4:#3d6b45; --r5:#7a4b8a; --r6:#a05a1f; --r7:#2f6f6a;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1c1814; --paper-2:#26211b; --paper-3:#332c24; --paper-4:#42392f;
  --ink:#efe6d6; --ink-2:#c2b6a2; --ink-3:#8f8474;
  --rule:#3a322a; --rule-2:#4b4136;
  --accent:#d0786f; --accent-soft:#3d2320; --accent-ink:#e39a92;
  --amber:#d9a94a; --amber-soft:#3d3118; --amber-ink:#ecc271;
  --rose:#d9776a; --rose-soft:#3f2320; --rose-ink:#eda297;
  --green:#7fb489; --green-soft:#223626; --green-ink:#9ccaa4;
  --bar-muted:#4a4137;
  --tip-bg:#efe6d6; --tip-ink:#1c1814;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
  --r1:#d0786f; --r2:#d9a94a; --r3:#8fb0e0; --r4:#7fb489; --r5:#c39bd6; --r6:#e09a5a; --r7:#6fc2bc;
}

/* Plain paper: a white page, for a reader who does not want the warm one and does not want the lamp.
   Not the default -- Laurel's own paper is the cream above -- but offered, because a screen full of
   cream is a taste and some people are reading in an office all day.
   The accent stays the same red: it is the brand, and it holds on white (9.3:1). Only the grounds and
   the greys change. --ink-3 is #5f646e rather than a lighter grey because at 11px on --paper-3 anything
   lighter falls under 4.5:1, which is the same fault the dark palette had and the same fix. */
:root[data-theme="plain"]{
  color-scheme:light;
  --paper:#ffffff; --paper-2:#f7f7f8; --paper-3:#ededf0; --paper-4:#e0e1e5;
  --ink:#15171c; --ink-2:#4a4f58; --ink-3:#5f646e;
  --rule:#e6e6ea; --rule-2:#d3d4d9;
  --accent:#7a2e2a; --accent-soft:#f4e3e0; --accent-ink:#5f221f;
  --amber:#8a6212; --amber-soft:#f6eccf; --amber-ink:#6d4c0d;
  --rose:#9c3b2f; --rose-soft:#f6e2de; --rose-ink:#772a21;
  --green:#36603d; --green-soft:#e2eee2; --green-ink:#27492d;
  --tip-bg:#15171c; --tip-ink:#ffffff;
  --shadow:0 1px 2px rgba(15,17,22,.06), 0 10px 28px -14px rgba(15,17,22,.30);
  --r1:#7a2e2a; --r2:#8a6212; --r3:#33527d; --r4:#36603d; --r5:#6c3f7d; --r6:#8d4a14; --r7:#23605c;
}

/* The same palette again for a reader who has chosen nothing. The stored setting has three states
   and System stamps no attribute at all, so without this block a phone in dark mode opened every
   page on this stylesheet -- Companions, the games, the courses -- in white. Kept immediately
   below the explicit block so the two cannot drift apart. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="plain"]){
  color-scheme:dark;
  --paper:#1c1814; --paper-2:#26211b; --paper-3:#332c24; --paper-4:#42392f;
  --ink:#efe6d6; --ink-2:#c2b6a2; --ink-3:#8f8474;
  --rule:#3a322a; --rule-2:#4b4136;
  --accent:#d0786f; --accent-soft:#3d2320; --accent-ink:#e39a92;
  --amber:#d9a94a; --amber-soft:#3d3118; --amber-ink:#ecc271;
  --rose:#d9776a; --rose-soft:#3f2320; --rose-ink:#eda297;
  --green:#7fb489; --green-soft:#223626; --green-ink:#9ccaa4;
  --bar-muted:#4a4137;
  --tip-bg:#efe6d6; --tip-ink:#1c1814;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
  --r1:#d0786f; --r2:#d9a94a; --r3:#8fb0e0; --r4:#7fb489; --r5:#c39bd6; --r6:#e09a5a; --r7:#6fc2bc;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Source Serif 4","Iowan Old Style",Georgia,serif;font-size:16px;line-height:1.55}
.ui,button,input,select,.btn,.chip,.tag,.eyebrow,.h3,th,.nav,.stat .k,.field label,.card .by,.card .meta,.game-bar,.choice .k,.legend,.lb-row,.checks,footer.site{font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,h4{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:600;text-wrap:balance;margin:0;letter-spacing:-.01em}
/* Fraunces, at a middling optical size. Fraunces was here until 12 September 2026; its wonky f and g
   and its very high-contrast display cut both read wrong to Garrett at heading sizes. */
h1{font-size:40px;line-height:1.05;font-variation-settings:"opsz" 18}
h2{font-size:26px;line-height:1.15;font-variation-settings:"opsz" 14}
h3{font-size:19px;line-height:1.25}
p{margin:0 0 1em}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.serif{font-family:"Fraunces",Georgia,serif}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px 80px}
.wrap.narrow{max-width:860px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
[hidden]{display:none!important}

/* nav */
/* The nav has to outrank the page, and one page brings its own stacking order: Leaflet puts the
   map panes at 400 and its controls at 1000, so on the map the "Read" and "Explore" menus opened
   underneath the map and looked broken. The nav had no z-index at all and so could not win.
   1100 clears Leaflet and still sits under the modals at 2000. */
.nav{position:relative;z-index:1100;border-bottom:1px solid var(--rule-2);background:var(--paper)}
.nav .in{max-width:1180px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav .brand{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.nav .brand:hover{text-decoration:none}
.nav .brand .mark{width:22px;height:22px;display:inline-block}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.nav .ng{position:relative}
.nav .ng>button{background:transparent;border:0;color:var(--ink-2);font-weight:500;font-size:14px;padding:6px 9px;border-radius:6px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.nav .ng>button::after{content:"";width:5px;height:5px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav .ng>button:hover,.nav .ng.open>button{color:var(--ink);background:var(--paper-3)}
.nav .ng.cur>button{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:6px 6px 0 0}
.nav .dd .ddh{display:block;font:500 10px "IBM Plex Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding:10px 10px 4px;margin-top:5px;border-top:1px solid var(--rule)}
.nav .dd{display:none;position:absolute;left:0;top:calc(100% + 4px);min-width:200px;background:var(--paper);border:1px solid var(--rule-2);border-radius:8px;box-shadow:var(--shadow);padding:6px;z-index:40}
.nav .ng.open .dd{display:block}
/* Opening is driven entirely from js/common.js, never from :hover here. A CSS hover rule alongside the
   click state meant a menu you had clicked open stayed open while a second opened under the pointer,
   and two menus hung off the bar at once. */
.nav .dd a{display:block;padding:7px 10px;border-radius:5px;color:var(--ink-2);font-size:14px;white-space:nowrap}
.nav .dd a:hover{background:var(--paper-3);color:var(--ink);text-decoration:none}

/* The You drawer: the account, the theme, everything-else and signing in or out, which used to stand in
   the bar as four or six separate controls. Built to the same pattern as the menus beside it -- the same
   panel, the same rows, the same hover -- so it reads as part of the navigation and not as something
   bolted on. (It was shipped once with no styling at all, which is exactly what that looks like.) */
.nav .you{position:relative}
.nav .youbtn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;
  color:var(--ink-2);font:500 14px "IBM Plex Sans",sans-serif;padding:5px 8px;border-radius:6px;
  cursor:pointer;white-space:nowrap}
.nav .youbtn:hover,.nav .youbtn[aria-expanded="true"]{color:var(--ink);background:var(--paper-3)}
.nav .youbtn .ychev{width:5px;height:5px;border-right:1.3px solid currentColor;
  border-bottom:1.3px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55}
/* the reader's initials, when there is a reader */
.nav .youbtn .yav{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;
  border-radius:50%;background:var(--paper-3);border:1px solid var(--rule-2);
  font:600 10px "IBM Plex Sans",sans-serif;letter-spacing:.02em;color:var(--ink-2)}
.nav .youmenu{position:absolute;right:0;left:auto;top:calc(100% + 4px);min-width:212px;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:8px;box-shadow:var(--shadow);
  padding:6px;z-index:40}
.nav .youmenu[hidden]{display:none}
.nav .youmenu a,.nav .youmenu button{display:block;width:100%;text-align:left;padding:7px 10px;
  border:0;background:none;border-radius:5px;color:var(--ink-2);font:14px "IBM Plex Sans",sans-serif;
  white-space:nowrap;cursor:pointer}
.nav .youmenu a:hover,.nav .youmenu button:hover{background:var(--paper-3);color:var(--ink);text-decoration:none}
.nav .youmenu .yhead{padding:8px 10px 9px;margin-bottom:4px;border-bottom:1px solid var(--rule)}
.nav .youmenu .yhead b{display:block;font:600 14px "IBM Plex Sans",sans-serif;color:var(--ink)}
.nav .youmenu .yhead span{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3)}
.nav .youmenu .ynote{padding:6px 10px 8px;font-size:11.5px;line-height:1.45;color:var(--ink-3);
  border-top:1px solid var(--rule);margin-top:4px}
.nav .youmenu .ysep{height:1px;background:var(--rule);margin:5px 4px}
.nav .youmenu #pmSignin{color:var(--ink);font-weight:500}
@media (max-width:640px){.nav .youbtn .ylab{display:none}.nav .youmenu{min-width:190px}}
.nav .dd a[aria-current="page"]{color:var(--accent-ink);font-weight:600}
@media (max-width:640px){.nav .in{gap:8px 10px;padding:10px 16px}.nav ul{gap:0;width:100%;order:3;justify-content:space-between}.nav .ng>button{padding:5px 4px;font-size:13.5px}.nav .ng>button::after{display:none}.nav .dd{left:auto;right:auto}.nav .ng:nth-child(n+4) .dd{right:0;left:auto}}
.nav .acct{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13.5px}
.nav .acct .u{font-family:"IBM Plex Mono",monospace;color:var(--ink-2)}
.nav .theme{border:1px solid var(--rule-2);background:transparent;border-radius:999px;width:30px;height:30px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)}
.nav .theme:hover{border-color:var(--ink-3)}
.lvlpill{font:500 11px "IBM Plex Mono",monospace;padding:2px 7px;border-radius:4px;background:var(--amber-soft);color:var(--amber-ink)}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);background:var(--paper-2);color:var(--ink);padding:8px 14px;border-radius:6px;font-weight:500;font-size:14px;cursor:pointer;line-height:1.3;text-decoration:none}
.btn:hover{border-color:var(--ink-3);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.small{padding:5px 10px;font-size:13px}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:default}
.chip{border:1px solid var(--rule-2);background:transparent;color:var(--ink-2);padding:4px 10px;border-radius:999px;font:500 13px "IBM Plex Mono",monospace;cursor:pointer;line-height:1.3;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.metre-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.metre-btn:hover{text-decoration-style:solid}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-block;font:500 11px "IBM Plex Mono",monospace;padding:2px 7px;border-radius:4px;background:var(--amber-soft);color:var(--amber-ink);white-space:nowrap}
.tag.t{background:var(--accent-soft);color:var(--accent-ink)}
.tag.r{background:var(--rose-soft);color:var(--rose-ink)}
.tag.g{background:var(--paper-3);color:var(--ink-2)}

/* forms */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
input[type=text],input[type=search],input[type=password],select,textarea{padding:8px 11px;border:1px solid var(--rule-2);background:var(--paper-2);color:var(--ink);border-radius:6px;font-size:15px}
textarea{width:100%;min-height:160px;line-height:1.6;font-family:"Fraunces",Georgia,serif;font-size:17px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}

/* page header */
.page-head{padding:38px 0 22px;border-bottom:1px double var(--rule-2);border-bottom-width:3px;margin-bottom:24px}
.page-head p.lede{max-width:64ch;color:var(--ink-2);margin:10px 0 0;font-size:16px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-bottom:1px solid var(--rule);margin-bottom:8px}
.stat{padding:20px 16px 16px 0;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat .v{font-family:"Fraunces",Georgia,serif;font-size:32px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.stat .k{font-size:12px;color:var(--ink-3);margin-top:8px;letter-spacing:.06em;text-transform:uppercase}

/* sections */
section.block{padding:32px 0 8px;border-bottom:1px solid var(--rule)}
section.block h2{margin-bottom:4px}
section.block .sub{color:var(--ink-2);max-width:70ch;margin:0 0 18px;font-size:14.5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:860px){.two,.three{grid-template-columns:1fr}}
.h3{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:0 0 10px;font-family:"IBM Plex Sans",sans-serif}
.note{border-left:3px solid var(--amber);padding:8px 14px;background:var(--paper-2);color:var(--ink-2);font-size:13.5px;max-width:74ch;margin:14px 0 6px}
.note.ok{border-color:var(--green)}
.note.bad{border-color:var(--rose)}

/* tables */
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:6px 10px 8px 0;border-bottom:1px solid var(--rule-2)}
td{padding:7px 10px 7px 0;border-bottom:1px solid var(--rule);vertical-align:top}
td.n,th.n{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--paper-2)}
.tbl-wrap{overflow-x:auto}
.ph{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.w{font-family:"Fraunces",Georgia,serif;font-size:16px;font-weight:600}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{border:1px solid var(--rule);background:var(--paper-2);border-radius:8px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;color:inherit}
a.card:hover{text-decoration:none;border-color:var(--accent);box-shadow:var(--shadow)}
.card h3{font-size:20px}
.card .by{color:var(--ink-2);font-size:13.5px}
.card .meta{font:12px "IBM Plex Mono",monospace;color:var(--ink-3);margin-top:auto;padding-top:8px;display:flex;gap:12px;flex-wrap:wrap}
.card p{color:var(--ink-2);font-size:13.5px;margin:0}

/* charts */
.chart{width:100%;overflow-x:auto}
.chart svg{width:100%;height:auto;display:block;font-family:"IBM Plex Sans",sans-serif}
.chart .bar{fill:var(--accent);cursor:pointer}
.chart .bar.dim{fill:var(--bar-muted)}
.chart .bar.hi{fill:var(--amber)}
.chart .lab{fill:var(--ink);font-size:12.5px}
.chart .lab.click{cursor:pointer}
.chart .val{fill:var(--ink-2);font-size:11.5px;font-family:"IBM Plex Mono",monospace}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .axis{fill:var(--ink-3);font-size:11px;font-family:"IBM Plex Mono",monospace}
.chart .ref{stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}
.chart .hit{fill:transparent;cursor:pointer}
.tip{position:fixed;pointer-events:none;background:var(--tip-bg);color:var(--tip-ink);font:12.5px "IBM Plex Sans",sans-serif;padding:6px 9px;border-radius:4px;z-index:20;max-width:320px;display:none;line-height:1.35}
.tip b{font-family:"IBM Plex Mono",monospace;font-weight:500}

/* verse display */
.verse{font-family:var(--verse-font,"Fraunces",Georgia,serif);font-size:var(--verse-size,17px);line-height:var(--verse-lh,1.55)}
.verse .st{margin:0 0 22px;position:relative}
.verse .st .n{position:absolute;left:-38px;top:2px;font:11.5px "IBM Plex Mono",monospace;color:var(--ink-3);width:14px;text-align:right}
.verse .ln{display:flex;gap:12px;align-items:baseline}
.verse .ln .t{flex:1;min-width:0}
.verse .ln .r{width:16px;font:500 11px "IBM Plex Mono",monospace;color:var(--ink-3);text-align:center;flex:none}
.verse .ln .r.c1{color:var(--r1)}.verse .ln .r.c2{color:var(--r2)}.verse .ln .r.c3{color:var(--r3)}.verse .ln .r.c4{color:var(--r4)}.verse .ln .r.c5{color:var(--r5)}.verse .ln .r.c6{color:var(--r6)}.verse .ln .r.c7{color:var(--r7)}
.verse .ln .s{width:28px;font:11px "IBM Plex Mono",monospace;color:var(--ink-3);text-align:right;flex:none}
.verse .ew.c1{border-bottom:2px solid var(--r1)}.verse .ew.c2{border-bottom:2px solid var(--r2)}.verse .ew.c3{border-bottom:2px solid var(--r3)}.verse .ew.c4{border-bottom:2px solid var(--r4)}.verse .ew.c5{border-bottom:2px solid var(--r5)}.verse .ew.c6{border-bottom:2px solid var(--r6)}.verse .ew.c7{border-bottom:2px solid var(--r7)}
.verse .gw{cursor:help;border-bottom:1px dotted var(--ink-3)}
.verse .gw:hover{background:var(--amber-soft)}
.verse .scan{display:block;font:10.5px "IBM Plex Mono",monospace;color:var(--ink-3);letter-spacing:.05em;margin-bottom:-4px;white-space:pre}
.verse .syl{white-space:pre}
.gloss{position:absolute;z-index:15;background:var(--paper);border:1px solid var(--rule-2);box-shadow:var(--shadow);padding:10px 13px;border-radius:6px;max-width:340px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.gloss b{color:var(--ink);font-family:"Fraunces",Georgia,serif;font-size:16px}
.gloss .pos{font-style:italic;color:var(--ink-3);margin-left:6px}
.gloss .fl{margin-left:6px}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--tip-bg);color:var(--tip-ink);padding:9px 14px;border-radius:6px;font-size:13.5px;z-index:30;box-shadow:var(--shadow);opacity:0;transition:opacity .2s}
.toast.show{opacity:1}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}
/* A box with no ceiling: a long notice — an account of a poem, an edition with four critical editions
   listed — grew past the viewport and took its own Close button off the bottom of the screen with it,
   leaving no way out. Every modal is now bounded and scrolls inside itself. */
.modal .box{background:var(--paper);border:1px solid var(--rule-2);border-radius:10px;padding:26px;max-width:420px;width:100%;box-shadow:var(--shadow);
  max-height:calc(100vh - 40px);overflow:auto;overscroll-behavior:contain;position:relative}
/* the long ones keep their actions in view while the middle scrolls */
.modal .box.tall{display:flex;flex-direction:column;padding:0;overflow:hidden}
.modal .box.tall > .mhead{padding:22px 26px 0}
.modal .box.tall > .mbody{padding:0 26px 12px;overflow:auto;overscroll-behavior:contain;flex:1 1 auto}
.modal .box.tall > .mfoot{padding:12px 26px 18px;border-top:1px solid var(--rule);background:var(--paper)}
.modal .box .mx{position:absolute;top:8px;right:10px;background:none;border:0;font-size:24px;line-height:1;
  color:var(--ink-3);cursor:pointer;padding:2px 6px;z-index:2}
.modal .box .mx:hover{color:var(--accent-ink)}
@media (max-width:600px){.modal{padding:10px}.modal .box{max-height:calc(100vh - 20px)}
  .modal .box.tall > .mhead{padding:20px 18px 0}.modal .box.tall > .mbody{padding:0 18px 10px}
  .modal .box.tall > .mfoot{padding:10px 18px 14px}}
.modal .box h2{margin-bottom:6px}
.modal .box .field{margin-top:12px}
.modal .box .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.modal .err{color:var(--rose-ink);font-size:13px;margin-top:8px}

footer.site{margin-top:64px;padding-top:26px;border-top:1px solid var(--ink-3);font-size:13px;color:var(--ink-2)}
footer.site a{color:inherit;text-decoration:none}footer.site a:hover{color:var(--accent-ink)}
footer.site .fgrid{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(120px,1fr));gap:18px 28px}
footer.site .fcol a{display:block;padding:2px 0}footer.site .fh{font:500 11px "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
footer.site .fbrand{font-family:"Fraunces",Georgia,serif;font-size:20px;color:var(--ink);margin-bottom:4px}footer.site .about p{margin:4px 0;max-width:38ch;font-family:"Source Serif 4",Georgia,serif;font-size:14px;line-height:1.5}footer.site .about .fine{color:var(--ink-3);font-family:"IBM Plex Sans",sans-serif;font-size:12.5px}
footer.site .fbase{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px;padding-top:12px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-3)}footer.site .fbase span:first-child{max-width:70ch}
@media (max-width:760px){footer.site .fgrid{grid-template-columns:1fr 1fr}footer.site .fcol.about{grid-column:1/-1}}

/* game surfaces */
.game-wrap{max-width:820px}
.game-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--rule);margin-bottom:22px;font-size:13.5px;color:var(--ink-2)}
.game-bar .score{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:600;color:var(--ink);line-height:1}
.game-bar .streak{font-family:"IBM Plex Mono",monospace}
.game-bar .prog{margin-left:auto;font-family:"IBM Plex Mono",monospace}
.q{font-family:var(--verse-font,"Fraunces",Georgia,serif);font-size:22px;line-height:1.45;margin:8px 0 18px}
.q .blank{display:inline-block;min-width:110px;border-bottom:2px solid var(--amber);text-align:center;color:var(--amber-ink);font-weight:600}
.q .ctx{display:block;color:var(--ink-2);font-size:18px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:600px){.choices{grid-template-columns:1fr}}
.choice{text-align:left;border:1px solid var(--rule-2);background:var(--paper-2);padding:12px 14px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1.4;display:flex;gap:10px;align-items:flex-start}
.choice .k{font:500 12px "IBM Plex Mono",monospace;color:var(--ink-3);border:1px solid var(--rule-2);border-radius:4px;padding:1px 6px;flex:none;margin-top:2px}
.choice:hover{border-color:var(--accent)}
.choice.right{border-color:var(--green);background:var(--green-soft)}
.choice.wrong{border-color:var(--rose);background:var(--rose-soft)}
.choice:disabled{cursor:default}
.feedback{margin-top:16px;padding:12px 14px;border-radius:8px;background:var(--paper-2);border:1px solid var(--rule);font-size:14px;color:var(--ink-2)}
.feedback.right{border-color:var(--green)}
.feedback.wrong{border-color:var(--rose)}
.feedback .ctxline{font-family:var(--verse-font,"Fraunces",Georgia,serif);font-size:15.5px;color:var(--ink);margin-top:8px}
.feedback .src a{color:var(--accent-ink)}
.feedback .src{font:12px "IBM Plex Mono",monospace;color:var(--ink-3);margin-top:6px}
.next{margin-top:16px;display:flex;gap:10px;align-items:center}
.scan-line{display:flex;flex-wrap:wrap;gap:6px 4px;margin:12px 0 18px;font-family:"Fraunces",Georgia,serif;font-size:21px}
.scan-line .wd{display:flex;gap:1px}
.scan-line .sy{border:1px solid var(--rule-2);background:var(--paper-2);border-radius:6px;padding:8px 8px 6px;cursor:pointer;min-width:34px;text-align:center;position:relative;line-height:1.1}
.scan-line .sy .m{display:block;font:600 13px "IBM Plex Mono",monospace;height:16px;color:var(--ink-3)}
.scan-line .sy[data-v="1"]{background:var(--accent-soft);border-color:var(--accent)}
.scan-line .sy[data-v="1"] .m{color:var(--accent-ink)}
.scan-line .sy.ok{outline:2px solid var(--green);outline-offset:1px}
.scan-line .sy.miss{outline:2px solid var(--rose);outline-offset:1px}
.scan-line .sy.free{opacity:.85}
.scan-line .sy:disabled{cursor:default}
.legend{font-size:12.5px;color:var(--ink-3);display:flex;gap:16px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
.summary{border:1px solid var(--rule-2);border-radius:10px;padding:24px;background:var(--paper-2);text-align:center}
.summary .big{font-family:"Fraunces",Georgia,serif;font-size:56px;font-weight:600;line-height:1}
.summary .sub{color:var(--ink-2);margin:8px 0 18px}
.lb-row{display:grid;grid-template-columns:44px 1fr auto auto;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.lb-row .rk{font:500 13px "IBM Plex Mono",monospace;color:var(--ink-3)}
.lb-row .u{font-weight:500}
.lb-row .u.me{color:var(--accent-ink)}
.lb-row .pts{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.lb-row .pl{font:12px "IBM Plex Mono",monospace;color:var(--ink-3)}
.lb-row.head{border-bottom:1px solid var(--rule-2);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500}

/* workshop */
.ws{display:grid;grid-template-columns:1.2fr .8fr;gap:36px}
@media (max-width:900px){.ws{grid-template-columns:1fr}}
.ws .report .lnr{display:grid;grid-template-columns:28px 1fr 60px 80px;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.ws .report .lnr .i{font:12px "IBM Plex Mono",monospace;color:var(--ink-3)}
.ws .report .lnr .txt{font-family:"Fraunces",Georgia,serif;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws .report .lnr .sy{font:12.5px "IBM Plex Mono",monospace;text-align:right}
.ws .report .lnr .rh{font:12.5px "IBM Plex Mono",monospace}
.ws .report .lnr.bad .sy,.ws .report .lnr.bad .rh{color:var(--rose-ink)}
.ws .report .lnr.ok .sy,.ws .report .lnr.ok .rh{color:var(--accent-ink)}
.assist{border:1px solid var(--rule);border-radius:8px;padding:14px 16px;background:var(--paper-2);margin-top:14px}
.assist .words{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.assist .words span{font-family:"Fraunces",Georgia,serif;font-size:15px;padding:3px 9px;border-radius:999px;border:1px solid var(--rule-2);background:var(--paper);cursor:pointer}
.assist .words span:hover{border-color:var(--accent)}
.assist .words span.gl{border-color:var(--amber)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:8px}
.checks div{display:flex;gap:8px;align-items:center;font-size:14px}
.checks .ok::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block}
.checks .bad::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rose);display:inline-block}
.checks .na::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--bar-muted);display:inline-block}

@media (prefers-reduced-motion:no-preference){.chart .bar{transition:width .25s ease}}
select{max-width:100%}
@media (max-width:700px){
  .wrap{padding:0 18px 60px}
  .verse .st .n{position:static;display:block;width:auto;text-align:left;margin-bottom:2px}
  h1{font-size:32px}
  .nav .in{padding:10px 18px 0;gap:10px 14px}
  .nav .brand{font-size:19px}
  .nav .acct{margin-left:auto;order:1}
  /* The menus are absolutely positioned inside this list. A scroll container clips them to nothing, which
     on a phone meant no menu could be opened at all: let the row wrap instead. */
  .nav ul{order:2;width:100%;flex-wrap:wrap;gap:10px 16px;padding:6px 0 0;margin:0 -18px;padding-left:18px;padding-right:18px}
  .nav ul a{white-space:nowrap;padding-bottom:8px}
  .page-head{padding:26px 0 18px}
  .stat .v{font-size:26px}
  .q{font-size:19px}
  .scan-line{font-size:18px}
  .scan-line .sy{min-width:28px;padding:6px 6px 4px}
}

/* sprint and timing */
.sprint-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;border:1px solid var(--rule-2);border-radius:12px;padding:26px 28px;background:var(--paper-2);margin:6px 0 26px;box-shadow:var(--shadow)}
@media (max-width:760px){.sprint-hero{grid-template-columns:1fr;padding:20px}}
.sprint-hero h2{font-size:30px;margin-bottom:6px}
.sprint-hero p{color:var(--ink-2);margin:0 0 14px}
.sprint-hero .big-btn{font-size:17px;padding:12px 22px;border-radius:10px}
.sprint-hero .best{font:13px "IBM Plex Mono",monospace;color:var(--ink-3);margin-left:12px}
.games .card{padding:14px 16px 12px}
.games .card h3{font-size:17px}
.games .card p{font-size:12.5px}
.games .card .ico{font-size:18px}
.timer{height:5px;background:var(--paper-3);border-radius:3px;overflow:hidden;margin:0 0 18px}
.timer i{display:block;height:100%;background:var(--accent);transition:width .25s linear}
.timer.low i{background:var(--rose)}
.game-bar .clock{font:600 22px "IBM Plex Mono",monospace;color:var(--ink);font-variant-numeric:tabular-nums}
.pop{position:absolute;font:700 18px "Fraunces",Georgia,serif;color:var(--green-ink);animation:pop .9s ease-out forwards;pointer-events:none}
.pop.bad{color:var(--rose-ink)}
@keyframes pop{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
@media (prefers-reduced-motion:reduce){.pop{animation:none;opacity:0}}
.setup-toggle{margin:4px 0 14px}
/* Every row is its own grid, so `auto` tracks sized themselves to that row's own contents: the heading
   row measured POINTS/ACCURACY and the score rows measured 71/50%, and the two sets of tracks came out
   different widths. Fixed tracks make each row measure the same, and the figures set right so they sit
   under the heading they answer to. */
.lb-row.wide{grid-template-columns:36px 1fr 56px 68px 60px 42px 50px;gap:12px}
.lb-row.wide>span:nth-child(n+3){text-align:right}
@media (max-width:600px){.lb-row.wide{grid-template-columns:28px 1fr 50px 58px;gap:8px}.lb-row.wide span:nth-child(6),.lb-row.wide span:nth-child(7){display:none}}
.diffpips{font:600 13px "IBM Plex Mono",monospace;color:var(--amber-ink);letter-spacing:.05em}
.q .qimg{display:block;max-width:100%;max-height:360px;border-radius:6px;border:1px solid var(--rule-2);margin-bottom:8px;filter:sepia(.08)}

/* ---------- work picker ---------- */
.modal.picker{align-items:flex-start;padding-top:6vh}
.modal.picker .box{max-width:640px;padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:84vh}
.picker .ph{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.picker .ph input{flex:1;font-size:16px}
.pklist{overflow:auto;padding:6px 0}
.pka{display:grid;grid-template-columns:44px 170px 1fr;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule);align-items:start}
.pka img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 28%;border:1px solid var(--rule-2);filter:sepia(.2)}
.pkn b{display:block;font-family:"Fraunces",Georgia,serif;font-size:15px;line-height:1.2}
.pkn span{font:11.5px "IBM Plex Mono",monospace;color:var(--ink-3)}
.pkw{display:flex;flex-direction:column;gap:2px}
.pkw button{text-align:left;background:transparent;border:0;padding:4px 8px;border-radius:5px;font:15px "Source Serif 4",Georgia,serif;color:var(--ink-2);cursor:pointer}
.pkw button small{font:11.5px "IBM Plex Sans",sans-serif;color:var(--ink-3);margin-left:6px}
.pkw button:hover{background:var(--paper-3);color:var(--ink)}
.pkw button[aria-current="true"]{color:var(--accent-ink);font-weight:600}
@media (max-width:560px){.pka{grid-template-columns:36px 1fr}.pkw{grid-column:2}.pka img{width:36px;height:36px}}
.workbtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--rule-2);padding:6px 0 10px;margin-bottom:12px;cursor:pointer;color:var(--ink-3);font:500 12px "IBM Plex Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.workbtn:hover{color:var(--accent-ink);border-color:var(--accent)}
.workbtn::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}

/* ---------- quiet filter bar (library, analyze) ---------- */
.filterbar{display:flex;gap:4px 22px;flex-wrap:wrap;align-items:flex-end;padding:0 0 12px;border-bottom:1px solid var(--rule-2);margin-bottom:20px}
.filterbar .f{display:flex;flex-direction:column;gap:2px}
.filterbar .f>span{font:500 11px "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.filterbar select,.filterbar input[type=search]{border:0;border-radius:0;background:transparent;padding:4px 0;height:32px;line-height:24px;font-family:"Source Serif 4",Georgia,serif;font-size:16px;color:var(--ink);box-shadow:none}
.filterbar select{padding-right:22px;background-position:calc(100% - 8px) 60%,calc(100% - 3px) 60%}
.filterbar select:focus,.filterbar input:focus{outline:none;box-shadow:0 1px 0 var(--accent)}
.filterbar .f.q{flex:1;min-width:180px}
.filterbar .f.q input{width:100%}
.filterbar .count{margin-left:auto;font:12px "IBM Plex Mono",monospace;color:var(--ink-3);padding-bottom:6px}
@media (max-width:600px){.filterbar{gap:8px 16px}.filterbar .count{margin-left:0;width:100%}}

/* ---------- game tiles (play page) ---------- */
.gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px 18px;margin-top:8px}
.gtile{background:transparent;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;display:flex;flex-direction:column;gap:9px}
.gtile .pic{display:block;aspect-ratio:5/4;overflow:hidden;background:var(--paper-3);border:1px solid var(--rule-2);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--rule);transition:transform .25s,box-shadow .25s}
.gtile .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;filter:sepia(.25) contrast(.95);transition:filter .25s,transform .4s}
.gtile:hover .pic,.gtile:focus-visible .pic{transform:translateY(-3px);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--accent),var(--shadow)}
.gtile:hover .pic img{filter:sepia(.05);transform:scale(1.03)}
.gtile:focus-visible{outline:none}
.gtile .cap b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:17px;line-height:1.15}
.gtile .cap span{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.35}
.gtile .cap i{display:block;font:11.5px "IBM Plex Mono",monospace;color:var(--ink-3);font-style:normal;margin-top:5px}
.gtile .cap i.has{color:var(--amber-ink)}
.sprint-hero.pic{grid-template-columns:minmax(200px,.9fr) 1.3fr;padding:0;overflow:hidden;gap:0;border-radius:10px}
.sprint-hero.pic>figure{margin:0;height:100%;min-height:220px;border-right:1px solid var(--rule-2)}
.sprint-hero.pic>figure img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.3) contrast(.95)}
.sprint-hero.pic>div{padding:26px 28px}
@media (max-width:760px){.sprint-hero.pic{grid-template-columns:1fr}.sprint-hero.pic>figure{min-height:160px;max-height:200px;border-right:0;border-bottom:1px solid var(--rule-2)}}
.rulehead{display:flex;align-items:center;gap:14px;margin:30px 0 4px}
.rulehead .h3{margin:0;white-space:nowrap}
.rulehead::after{content:"";flex:1;height:1px;background:var(--rule-2)}
.scopeline{display:flex;gap:4px 22px;flex-wrap:wrap;align-items:flex-end;margin-top:26px;padding-top:14px;border-top:1px solid var(--rule)}

/* the passage as a picture */
.picture .chart{overflow-x:auto}.picture svg{min-width:720px;font-family:"Source Serif 4",Georgia,serif}
.picture .pl-text{fill:var(--ink);font-size:13.5px}.picture .pl-text.dim{fill:var(--ink-3)}.picture .pl-no{fill:var(--ink-3);font:11px "IBM Plex Mono",monospace}
.picture .syl{stroke:var(--ink-2);stroke-width:1;fill:none}.picture .syl.s{fill:var(--ink)}.picture .syl.x{stroke:var(--ink-3);fill:var(--paper-3)}
.picture .arc{fill:none;stroke-width:1.6;opacity:.85;cursor:pointer}.picture .arc:hover{stroke-width:3;opacity:1}
.picture .ew{font:600 12px "IBM Plex Sans",sans-serif}.picture .stz{stroke:var(--rule-2);stroke-width:1}
.picture .pic-actions{margin-left:auto}.quotebar{position:absolute;z-index:2100;display:flex;gap:0;background:var(--ink);border-radius:7px;box-shadow:0 6px 22px rgba(0,0,0,.28);overflow:hidden;animation:qfade .12s ease}
@keyframes qfade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.quotebar button{background:none;border:0;color:var(--paper);font:13px "IBM Plex Sans",sans-serif;padding:8px 13px;cursor:pointer;white-space:nowrap}
.quotebar button+button{border-left:1px solid rgba(255,255,255,.16)}
.quotebar button:hover{background:rgba(255,255,255,.12)}
@media (prefers-reduced-motion:reduce){.quotebar{animation:none}}
.navsearch{margin-left:auto;order:0}
.navsearch input{width:190px;font:13.5px "IBM Plex Sans",sans-serif;color:var(--ink);background:var(--paper-2);border:1px solid var(--rule-2);border-radius:7px;padding:6px 10px;transition:width .18s ease,border-color .12s}
.navsearch input::placeholder{color:var(--ink-3)}
.navsearch input:focus{outline:none;width:240px;border-color:var(--accent);background:var(--paper);box-shadow:0 0 0 3px var(--accent-soft)}
@media (max-width:860px){.navsearch input{width:130px}.navsearch input:focus{width:170px}}
@media (max-width:700px){.navsearch{order:3;width:100%;margin:8px 0 2px}.navsearch input{width:100%}.navsearch input:focus{width:100%}}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--accent-ink);cursor:pointer;border-bottom:1px solid transparent}.linkbtn:hover{border-bottom-color:var(--accent-ink)}

.mobopts>summary::before{content:'▸';display:inline-block;width:14px;color:var(--ink-3);font-size:11px}.mobopts[open]>summary::before{content:'▾'}

/* laurels */
.laurels{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px 22px;margin-top:10px}
.laurel{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;align-items:start;color:var(--ink-3);padding:6px 0;border-top:1px solid var(--rule)}
.laurel svg{width:26px;height:26px;grid-row:span 2;color:var(--ink-3);opacity:.45}.laurel b{font-size:14.5px;color:var(--ink-3)}.laurel span{font-size:12.5px;line-height:1.35}
.laurel.on{color:var(--ink-2)}.laurel.on svg{color:var(--amber-ink);opacity:1}.laurel.on b{color:var(--ink)}

/* book mode */
.book{position:fixed;inset:0;z-index:60;background:var(--paper);color:var(--ink);display:flex;flex-direction:column}
body.book-open{overflow:hidden}
.bk-top,.bk-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 22px;font:12.5px "IBM Plex Sans",sans-serif;color:var(--ink-3);flex:none}
.bk-top .bk-title{font-family:"Fraunces",Georgia,serif;font-size:14px;color:var(--ink-2)}
.bk-ctl button{background:none;border:0;font:inherit;font-size:14px;color:var(--ink-3);cursor:pointer;padding:4px 8px}.bk-ctl button:hover{color:var(--ink)}
.bk-body{flex:1;overflow:hidden;position:relative;padding:0 max(24px,calc((100vw - 620px)/2))}
.bk-cols{column-fill:auto;font-family:var(--verse-font,"Fraunces",Georgia,serif);line-height:1.5;transition:transform .25s ease;will-change:transform;box-sizing:border-box;padding:12px 0 24px}
.bk-cols h2{font-size:1.25em;font-weight:600;margin:0 0 .8em;break-after:avoid}.bk-cols p{margin:0 0 1em;break-inside:avoid}.bk-cols .l{display:block;padding-left:1.6em;text-indent:-1.6em}
.bk-edge{position:absolute;top:44px;bottom:44px;width:14%;background:transparent;border:0;cursor:pointer;opacity:0}.bk-edge.left{left:0}.bk-edge.right{right:0}
@media (prefers-reduced-motion:reduce){.bk-cols{transition:none}}

/* print: the reader as a clean page */
@media print{
  /* These rules were written for the reader and were being applied to every page on the site. Hiding
     every img killed the pictures in a printed worksheet and a printed edition too, and pinning
     #main to 60ch squeezed anything that was not a column of verse. Both are now scoped. */
  .nav,.footer,footer,.toc,.stanza-tools,.lnote,.nav2,.tip,.wordpop,.opts,.mobopts,.workbtn,.book,.introbox .similar,.introbox .ill{display:none!important}
  .reader img,.plate,.plates,figure.plate{display:none!important}
  body{background:#fff;color:#000}.wrap{max-width:none;padding:0}.reader{display:block}
  .reader #main,#main.reader{max-width:60ch;margin:0 auto}
  #main{font-size:11.5pt;line-height:1.45}
  .sec-head h2{font-size:16pt;margin:0 0 10pt}.st{break-inside:avoid;margin-bottom:9pt}.st .n{color:#888;font-size:8pt}
  .r{color:#888;font-size:7.5pt}.ew{text-decoration:none;color:#000}
  .commentary{font-size:9pt;color:#333;border-left:1pt solid #bbb;padding-left:8pt;margin:4pt 0 8pt}
  .parallel{display:grid;grid-template-columns:1fr 1fr;gap:16pt}
  .introbox{font-size:9.5pt;border:0;padding:0;margin-bottom:12pt}
  a{color:inherit;text-decoration:none}
  @page{margin:22mm 18mm}
}

.sec-head a.quiet{color:var(--ink-3);border-bottom:1px dotted var(--rule-2)}.sec-head a.quiet:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink);text-decoration:none}

.nav .btn.donate{border-color:var(--amber);color:var(--amber-ink);background:var(--amber-soft)}.nav .btn.donate:hover{background:var(--amber);color:var(--paper)}
@media (max-width:640px){.nav .btn.donate{padding:4px 8px}}

.kindnote{font:13px 'IBM Plex Sans',sans-serif;color:var(--ink-3);margin:-4px 0 12px;max-width:70ch}.ss.nm i{visibility:hidden}

/* folding sections */
section.block.fold{padding:14px 0 6px}section.block.fold>h2{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0;font-size:22px}
.fold-btn{display:inline-flex;align-items:baseline;gap:10px;background:none;border:0;padding:4px 0;font:inherit;color:inherit;cursor:pointer;text-align:left;max-width:100%}
.fold-btn .chev{width:8px;height:8px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);flex:none;transition:transform .15s}
section.block.closed .fold-btn .chev{transform:rotate(-45deg) translateY(-1px)}
.fold-btn .digest{font:14px "Source Serif 4",Georgia,serif;color:var(--ink-3);letter-spacing:0;text-transform:none;font-weight:400}.fold-btn .digest:empty{display:none}
section.block.closed .fold-btn .digest{color:var(--ink-2)}
section.block.fold>h2 .fold-what,section.block.fold>h2 .howlink{font:12.5px "IBM Plex Sans",sans-serif;color:var(--ink-3);border-bottom:1px dotted var(--rule-2);letter-spacing:0;text-transform:none;font-weight:400;margin-left:auto}
section.block.fold>h2 .howlink{margin-left:0}
section.block.fold .fold-sub{margin:8px 0 14px}
section.block.fold .fold-body{margin-top:12px}section.block.closed .fold-body{display:none}
.fold-strip{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font:13px "IBM Plex Sans",sans-serif;color:var(--ink-3);padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:10px 0 4px}
.fold-strip .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase}.fold-strip a{color:var(--ink-2)}.fold-strip .grow{flex:1}
.fold-strip button{background:none;border:0;font:inherit;color:var(--accent-ink);cursor:pointer;padding:0}
@media (max-width:640px){section.block.fold>h2{font-size:19px}.fold-strip a{display:none}}

/* front page actions: three doors in a row, then the quieter paths */
/* The four doors into the site, as one flush rail between two rules. Boxed buttons of different widths
   wrapping onto three ragged rows was the worst thing on the front page; this is the same geometry the
   Today rail below it uses, so the head of the page reads as one ruled sheet. Everything that used to be
   a scatter of quiet links underneath is already in the navigation. */
.hero-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink-3);margin-top:26px}
.hero-actions a{display:flex;flex-direction:column;gap:3px;min-width:0;padding:14px 18px 16px 0;border-right:1px solid var(--rule);color:inherit;text-decoration:none}
.hero-actions a+a{padding-left:18px}
.hero-actions a:last-child{border-right:0}
.hero-actions a b{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:600;font-size:17px;line-height:1.2;color:var(--ink)}
.hero-actions a small{font:12.5px "IBM Plex Sans",sans-serif;color:var(--ink-3);line-height:1.4}
.hero-actions a:hover{background:var(--paper-2)}
.hero-actions a:hover b{color:var(--accent-ink)}
.hero-actions a.lead{box-shadow:inset 0 -3px 0 var(--accent)}
.hero-actions a.lead b{color:var(--accent-ink)}
@media (max-width:900px){
  .hero-actions{grid-template-columns:1fr 1fr}
  .hero-actions a{border-bottom:1px solid var(--rule);padding-right:14px}
  .hero-actions a:nth-child(2n){border-right:0}
  .hero-actions a:nth-child(2n+1),.hero-actions a+a:nth-child(2n+1){padding-left:0}
  .hero-actions a:nth-child(n+3){border-bottom:0}
}
@media (max-width:420px){
  .hero-actions{grid-template-columns:1fr}
  .hero-actions a,.hero-actions a+a{border-right:0;border-bottom:1px solid var(--rule);padding-left:0;padding-right:0}
  .hero-actions a:last-child{border-bottom:0}
}
@media (max-width:640px){.hero-actions{grid-template-columns:1fr 1fr}.hero-actions .btn.primary.big{grid-column:1/-1}}

/* the corpus page's one control */
.measurebar{display:grid;grid-template-columns:1fr auto;gap:8px 28px;align-items:end;margin-bottom:16px;padding:14px 16px;border:1px solid var(--amber);border-left:4px solid var(--amber);background:var(--amber-soft)}
.measurebar label{grid-column:1;display:flex;flex-direction:column;gap:2px}.measurebar .lbl{font:500 11px "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink)}.measurebar .hint{font-size:13.5px;color:var(--ink-2)}
.measurebar .bigsel{grid-column:1;font-family:"Fraunces",Georgia,serif;font-size:22px;padding:6px 36px 6px 10px;border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);max-width:100%}
.measurebar .f{grid-column:2;grid-row:1/3;align-self:end}.measurebar .count{grid-column:1/-1;font:12px "IBM Plex Mono",monospace;color:var(--ink-3)}
h2 .mn{font-style:normal;color:var(--amber-ink);font-weight:400}h2 .mn:empty{display:none}
@media (max-width:640px){.measurebar{grid-template-columns:1fr}.measurebar .f{grid-column:1;grid-row:auto}}

/* the shape of the passage */
.shape{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.shp-stz{display:flex;gap:10px;align-items:flex-start}.shp-no{font:11px "IBM Plex Mono",monospace;color:var(--ink-3);width:22px;text-align:right;padding-top:1px}
.shp-rows{display:flex;flex-direction:column;gap:3px}.shp-row{display:flex;align-items:center;gap:8px;height:11px;cursor:default}.shp-row:hover .cells i{outline:1px solid var(--accent)}
.shp-row .cells{display:flex;gap:2px}.shp-row .cells i,.shp-key{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--ink);opacity:.85}
.shp-row .cells i.u,.shp-key.u{background:var(--paper-3);border:1px solid var(--rule-2);opacity:1;box-sizing:border-box}
.shp-row .cells i.m{opacity:.55}.shp-row .cells i.u.m{opacity:1}
.shp-row .cells i.x,.shp-key.x{background:transparent;border:1px dashed var(--ink-3);opacity:.7;box-sizing:border-box}
.shp-row b{font:600 10px "IBM Plex Mono",monospace;width:12px;text-align:center}.shp-row .shp-n{font:10px "IBM Plex Mono",monospace;color:var(--ink-3)}
.shp-key{width:9px;height:9px;vertical-align:-1px;margin:0 2px 0 6px}

/* research panel */
.modal.research .box{text-align:left}
.rs-item{padding:10px 0;border-bottom:1px solid var(--rule)}
.rs-item .t{font-family:"Fraunces",Georgia,serif;font-size:16.5px;color:var(--ink);display:block;line-height:1.3}
.rs-item .t:hover{color:var(--accent-ink)}
.rs-item .m{font-size:13px;color:var(--ink-3);margin-top:3px}
.rs-item .m .tag{vertical-align:1px}

/* the deck: one card at a time */
.deck{max-width:760px}
.deck-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.deck-top .dots{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.deck-top .dots span{height:4px;flex:1;min-width:10px;max-width:46px;background:var(--rule-2);border-radius:2px}
.deck-top .dots span.ok{background:var(--amber)}.deck-top .dots span.bad{background:var(--rose)}.deck-top .dots span.now{background:var(--accent)}
.deck-count{font:11.5px "IBM Plex Mono",monospace;color:var(--ink-3);white-space:nowrap}
.deck-card .lead{font:500 11px "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.deck-card .teach{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:66ch;margin-bottom:14px}
.deck-card .teach .ex{font-family:"Fraunces",Georgia,serif;font-size:17px;padding:4px 0 4px 14px;border-left:2px solid var(--amber);margin:8px 0;color:var(--ink)}
.deck-card .q.small{font-family:"IBM Plex Sans",sans-serif;font-size:14.5px;color:var(--ink-2);margin-bottom:10px}
.deck-card .passage{font-family:"Fraunces",Georgia,serif;font-size:16.5px;line-height:1.55;max-height:340px;overflow:auto;padding:10px 14px;background:var(--paper-2);border:1px solid var(--rule)}

/* a passage in front of you while you answer, as it would be in a class */
.qpassage{margin:0 0 16px;padding:0;border-left:3px solid var(--amber);background:var(--paper-2);border-top:1px solid var(--rule);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.qpassage .pt{font:600 13px "IBM Plex Sans",sans-serif;letter-spacing:.02em;color:var(--ink);padding:11px 16px 0}
.qpassage .setup{font:14.5px/1.55 "Source Serif 4",Georgia,serif;color:var(--ink-2);margin:5px 0 0;padding:0 16px;max-width:64ch}
.qpassage .ptext{font-family:var(--verse-font,"Fraunces",Georgia,serif);font-size:16.5px;line-height:1.62;padding:12px 16px 12px;color:var(--ink)}
.qpassage.long .ptext{max-height:none}
.qpassage .pl{display:block;padding:0 5px;margin:0 -5px;border-radius:3px;transition:background .25s ease;position:relative}
.qpassage .ptext.numbered{padding-left:38px}
.qpassage .pl .pn{position:absolute;left:-30px;top:.35em;font:10.5px "IBM Plex Mono",monospace;font-style:normal;color:var(--ink-3);opacity:.75;width:22px;text-align:right}
.qpassage .pl.cited{background:var(--amber-soft);box-shadow:inset 3px 0 0 var(--amber)}
.qpassage .pcols{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;padding:12px 16px}
.qpassage .pcols .ptext{padding:0}
.qpassage .pcols .ptext.orig{color:var(--ink-2);font-size:15.5px}
@media (max-width:640px){.qpassage .pcols{grid-template-columns:1fr;gap:14px}.qpassage .pcols .ptext.orig{border-top:1px solid var(--rule);padding-top:10px}}
.qpassage .ps{font:12px "IBM Plex Mono",monospace;color:var(--ink-3);padding:0 16px 11px;border-top:1px solid var(--rule);padding-top:9px}
.qpassage .ps a{color:var(--ink-3);border-bottom:1px dotted var(--rule-2)}
.deck-card.kind-passage .q{margin-bottom:12px}
@media (max-width:600px){.qpassage .ptext{font-size:15.5px;padding:10px 13px}.qpassage .pt,.qpassage .setup,.qpassage .ps{padding-left:13px;padding-right:13px}}
/* a question with no single answer: you write first, then see how a reader who knows the poem would put it */
.openbox textarea{width:100%;box-sizing:border-box;font:15.5px/1.6 "Source Serif 4",Georgia,serif;color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);border-radius:6px;padding:10px 12px;resize:vertical}
.openbox textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.openbox textarea:disabled{background:var(--paper-2);color:var(--ink-2)}
.deck-fb .teach{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:66ch;margin:6px 0 4px}
.deck-fb .teach b{display:block;font:500 11px "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.q .qpass{font-family:"Fraunces",Georgia,serif;font-size:16px;line-height:1.55;color:var(--ink);border-left:3px solid var(--amber);background:var(--paper-2);padding:10px 14px;margin-bottom:8px}
.q .ask{display:block;margin-top:8px;font-size:17px;color:var(--ink)}
.edition-modal .h3{margin:18px 0 6px}
.edition-modal .h3:first-of-type{margin-top:6px}
.edlist{margin:0;padding-left:18px;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.edlist li{margin-bottom:5px}
.edlist li b{color:var(--ink)}
.edlist.crit li{margin-bottom:10px}
.edtab{width:100%;border-collapse:collapse;font-size:13.5px;margin:8px 0}
.edtab th{text-align:left;font:500 11px "IBM Plex Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:4px 10px 4px 0;border-bottom:1px solid var(--rule)}
.edtab td{padding:5px 10px 5px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
.deck-review .rv{padding:12px 0;border-top:1px solid var(--rule)}
.deck-review .rv:first-of-type{border-top:0}
.deck-review .rq{font-family:"Fraunces",Georgia,serif;font-size:16px;color:var(--ink);margin-bottom:4px}
.deck-review .ra{font:500 14px "IBM Plex Sans",sans-serif;color:var(--green-ink,var(--accent-ink));margin-bottom:5px}
.deck-review .ra::before{content:"→ ";opacity:.6}
.deck-review p{margin:0 0 4px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.deck .scan-line{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.deck .scan-line .sy{display:flex;flex-direction:column;align-items:center;padding:5px 9px;border:1px solid var(--rule-2);border-radius:6px;background:var(--paper-2);cursor:pointer;font:17px "Fraunces",Georgia,serif}
.deck .scan-line .sy .m{font:13px "IBM Plex Mono",monospace;color:var(--accent-ink);height:16px}
.deck .scan-line .sy.free{border-style:dashed}.deck .scan-line .sy.hit{border-color:var(--green);background:var(--green-soft)}.deck .scan-line .sy.miss{border-color:var(--rose);background:var(--rose-soft)}
.deck .scan-line .sy.word{padding:7px 11px}.deck .scan-line .sy.on{border-color:var(--accent);background:var(--accent-soft)}
/* The classical scanning round. Syllables stay inside their words and feet stay apart from one another,
   because the whole lesson is where one foot ends and the next begins. */
.deck .quant-line{gap:4px 15px;align-items:flex-end}
.deck .quant-line .wd{display:flex;gap:2px}
.deck .quant-line .sy{font-size:20px;padding:4px 7px;gap:1px}
.deck .scan-line .sy .g{display:block;line-height:1.15}
.deck .scan-line .sy .t{display:block;font:12px/1.15 "Fraunces",Georgia,serif;color:var(--ink-3);font-variant:small-caps;letter-spacing:.02em}
.deck .quant-line .sy.hit .t,.deck .quant-line .sy.miss .t{color:var(--ink-2)}
.deck .metrekey{font:12.5px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink-3);letter-spacing:.02em;margin:2px 0 10px}
.deck .scanned{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 0;margin:12px 0 4px}
.deck .scanned .ft{display:flex;flex-direction:column;align-items:center;padding:0 11px;border-left:1px solid var(--rule-2)}
.deck .scanned .ft:first-child{border-left:0;padding-left:0}
.deck .scanned .fs{display:flex;align-items:flex-end;gap:2px}
.deck .scanned .fs .sy[data-nw="1"]{margin-left:9px}
.deck .scanned .sy{display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;cursor:default;font:19px "Fraunces",Georgia,serif}
.deck .scanned .sy .m{font:14px "IBM Plex Mono",ui-monospace,monospace;color:var(--accent-ink);height:17px}
.deck .scanned .fn{font:11px "IBM Plex Mono",ui-monospace,monospace;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-top:5px}
.deck-card .ps{font:12.5px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink-3);margin:6px 0 0}
@media (max-width:560px){
  .deck .quant-line{gap:4px 11px}
  .deck .quant-line .sy{font-size:18px;padding:3px 5px}
  .deck .scanned .ft{padding:0 7px}
  .deck .scanned .sy{font-size:17px}
}
.deck-fb{margin-top:14px}
.deck-fb .verdict{font-family:"Fraunces",Georgia,serif;font-size:19px;margin-bottom:4px}
.deck-fb.right .verdict{color:var(--green-ink)}.deck-fb.wrong .verdict{color:var(--rose-ink)}
.deck-fb p{font-size:14.5px;color:var(--ink-2);margin:4px 0 10px;max-width:70ch}
.deck-end{padding:10px 0}.deck-end .big{font-family:"Fraunces",Georgia,serif;font-size:40px;line-height:1}
.deck-end.pass .big{color:var(--amber-ink)}.deck-end.fail .big{color:var(--ink-2)}
.deck-end p{font-size:15px;color:var(--ink-2);margin:6px 0 14px}
.deck-review{margin-top:18px;padding-top:12px;border-top:1px solid var(--rule)}.deck-review p{font-size:14px;margin:6px 0}

/* the poet course */
.coursebar{display:flex;align-items:center;gap:14px;margin:18px 0 10px}
.coursebar .cb-prog{flex:1;height:4px;background:var(--rule-2);border-radius:2px;overflow:hidden;max-width:440px}.coursebar .cb-prog span{display:block;height:100%;background:var(--amber)}
.coursebar .cb-n{font:11.5px "IBM Plex Mono",monospace;color:var(--ink-3)}
.lifebox{border-top:1px solid var(--rule-2);padding-top:12px;margin-bottom:8px}
.path button.lvl{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--rule);padding:16px 0 16px 46px;cursor:pointer;position:relative;font:inherit;color:inherit}
.path button.lvl:hover h3{color:var(--accent-ink)}
.path button.lvl::before{content:attr(data-n);position:absolute;left:0;top:16px;width:28px;height:28px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;font:12px "IBM Plex Mono",monospace;color:var(--ink-3)}
.path button.lvl.done::before{background:var(--amber-soft);border-color:var(--amber);color:var(--amber-ink)}
.path button.lvl h3{margin:0 0 3px;font-size:19px}
.path button.lvl p{margin:0;font-size:14px;color:var(--ink-2);max-width:66ch}
.path button.lvl .go{font:500 11px "IBM Plex Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-top:6px;display:inline-block}

/* The poet-page banner: one illustration above the life, held to a band. Written as `.banner img`
   it also caught the home masthead, whose paintings are laid into a 430px band by the stylesheet in
   index.html -- the cap cut every one of them off at 260 and left a hard black edge across the
   bottom of the picture. Only the figure story.js builds wants it. */
figure.banner img{max-height:260px;object-fit:cover;width:100%}

/* A poet whose face is lost gets a painting, a title page or a manuscript from their own country and
   century instead. It is not a likeness, so it must not arrive in the round medallion the site keeps for
   faces: squared off, and centred rather than cropped to where a face would sit, it reads as a picture of
   the period. The page stylesheets load after this one and all set the circle at the same specificity,
   so the override has to be flagged. */
img.ctx, .ph.ctx, .dot.ctx { border-radius: 2px !important; }
img.ctx { object-position: 50% 50% !important; }
/* The caption is the label. It is printed wherever there is room for a line of type under the image. */
.ctxcap { font-size: 12px; line-height: 1.45; color: var(--ink-3); margin: 6px 0 0; max-width: 34ch; }

/* ---------- the walk round the page ----------
   A dimmed sheet with one thing left lit, and a card that says what it is. Hairlines and paper, like
   the rest: no arrows, no mascot, no bounce. */
.tour{position:fixed;inset:0;z-index:200}
.tour-dim{position:absolute;inset:0;background:rgba(20,15,10,.55)}
.tour-cut{position:absolute;border:2px solid var(--accent);border-radius:3px;
  box-shadow:0 0 0 9999px rgba(20,15,10,.55);pointer-events:none;transition:all .22s ease}
.tour-card{position:absolute;width:min(360px,calc(100vw - 24px));background:var(--paper);
  border:1px solid var(--rule-2);box-shadow:var(--shadow);padding:15px 17px 13px}
.tour-card .tour-n{font:11px "IBM Plex Mono",monospace;color:var(--ink-3);margin-bottom:5px}
.tour-card h3{font-family:"Fraunces",Georgia,serif;font-size:18px;margin:0 0 5px}
.tour-card p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.tour-card p b{color:var(--ink)}
.tour-acts{display:flex;align-items:center;gap:8px;margin-top:14px}
.tour-acts .sp{flex:1}
.tour-acts .linkbtn{background:none;border:0;padding:0;font:13px "IBM Plex Sans",sans-serif;
  color:var(--ink-3);cursor:pointer;border-bottom:1px dotted var(--rule-2)}
.tour-acts .linkbtn:hover{color:var(--accent-ink)}
.tour-acts .btn[disabled]{opacity:.4;cursor:default}

/* ---------- everything else, behind one control instead of five columns at the foot ---------- */
.navmore{width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);background:none;color:var(--ink-2);
  font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
.navmore:hover{border-color:var(--rule-2);color:var(--ink)}
#moreMenu{position:fixed;inset:0;z-index:1500;background:rgba(20,17,13,.34);display:grid;place-items:start center;padding:64px 18px;overflow-y:auto}
#moreMenu .mm-in{background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);
  max-width:820px;width:100%;padding:26px 28px 20px}
#moreMenu .mm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:22px 26px}
#moreMenu .mm-h{font:600 10.5px "IBM Plex Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
#moreMenu .mm-col a{display:block;padding:4px 0;font-size:14px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
#moreMenu .mm-col a:last-child{border-bottom:0}
#moreMenu .mm-col a:hover{color:var(--accent)}
#moreMenu .mm-base{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--rule);font-size:12px;line-height:1.6;color:var(--ink-3)}
footer.site{border-top:1px solid var(--rule);margin-top:44px;padding:16px 0 30px;font-size:12.5px;color:var(--ink-3)}
footer.site p{margin:0;line-height:1.7}
footer.site b{color:var(--ink-2);font-weight:600}
footer.site a,footer.site .linkbtn{color:var(--ink-3);text-decoration:underline}
footer.site a:hover,footer.site .linkbtn:hover{color:var(--accent)}
footer.site .fine{opacity:.8}
@media (max-width:640px){ #moreMenu{padding:40px 12px} #moreMenu .mm-in{padding:20px 18px 16px} }

/* ---------- a game in play: nothing above it, nothing below it ---------- */
body.playing .page-head,
body.playing .scopeline,
body.playing #setupPanel,
body.playing footer.site,
body.playing .nav .navsearch,
body.playing .nav ul{display:none}
body.playing .wrap{padding-top:10px}
#gBack{display:none;font:500 12.5px "IBM Plex Sans",sans-serif;color:var(--accent);background:none;border:0;
  padding:4px 0 12px;cursor:pointer}
body.playing #gBack{display:block}
/* the settings a player may want are under the stage, not between them and the question */
body.playing .aftergame{display:block}
.aftergame{display:none;margin-top:34px;padding-top:18px;border-top:1px solid var(--rule)}

/* A tool page leads with the tool. The standing description belonged to a reader who had not chosen a
   work yet, and stood between everyone else and the numbers. */
.page-head.tight{padding:22px 0 10px}
.page-head.tight h1{margin:0}
.block.said{border-top:1px solid var(--rule);margin-top:6px}
/* The reading of the poem in words, running the whole width of the page.
   It used to stop at 72ch -- about 520 pixels -- which left more than half the width empty and made the
   paragraph look like something left over rather than the summing-up it is. Line height is opened up a
   little to carry the longer measure: the wider the line, the more the eye needs help finding the start
   of the next one. */
.block.said .plain{font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.block.said .plain>p{margin:0 0 12px}

/* one mark, not the same five words under every figure */
.ov .how{margin-top:6px}
.ov .how>summary{width:17px;height:17px;border:1px solid var(--rule-2);border-radius:50%;display:grid;place-items:center;
  font:600 10.5px "IBM Plex Sans",sans-serif;color:var(--ink-3);cursor:pointer;list-style:none}
.ov .how>summary::-webkit-details-marker{display:none}
.ov .how>summary:hover{border-color:var(--accent);color:var(--accent)}
.ov .how[open]>summary{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-ink)}
.ov .how p{margin-top:7px;font-size:12px;line-height:1.55;color:var(--ink-3)}
.pagenote{margin:30px 0 0;padding-top:14px;border-top:1px solid var(--rule);font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:74ch}

/* ================= the reader, rebuilt =================
   The poem leads. What is known about a line arrives in the rail when the line is asked, and the rail is
   empty until then. Read and Study are the first control on the page, because reading is not a mode you
   reach by turning eight things off. */
.reader{display:grid;grid-template-columns:212px minmax(0,1fr) 340px;gap:0;align-items:start}
.reader .rail{position:sticky;top:0;height:100vh;overflow-y:auto;border-left:1px solid var(--rule);padding:24px 20px 60px}
.reader .rail .empty{color:var(--ink-3);font-size:13px;line-height:1.6}
.reader .rail .empty b{display:block;color:var(--ink-2);font-family:'Fraunces',Georgia,serif;font-size:15.5px;font-weight:600;margin-bottom:6px}
.reader .rail h4{font:600 10.5px 'IBM Plex Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.reader .rail h4:first-child{margin-top:0}
.reader .rail h4 button{font:500 10.5px 'IBM Plex Sans',sans-serif;color:var(--accent);letter-spacing:0;text-transform:none;background:none;border:0;cursor:pointer}
.reader .rail .rline{font-family:'Fraunces',Georgia,serif;font-size:16px;line-height:1.45;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--rule)}
.reader .rail .big{font-family:'Fraunces',Georgia,serif;font-size:18px;letter-spacing:.05em;color:var(--ink);margin:0 0 8px}
.reader .rail .big .inf{opacity:.42}
.reader .rail p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.reader .rail dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:13px}
.reader .rail dt{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ink)}
.reader .rail dd{margin:0;color:var(--ink-2)}
.reader .rail .rw{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.reader .rail .rw:last-child{border:0}
.reader .rail .rw b{font-family:'Fraunces',Georgia,serif}
.reader .rail figure{margin:0 0 12px}
.reader .rail figure img{width:100%;border-radius:4px;display:block}
.reader .rail figure figcaption{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.reader .rail .note{background:var(--paper-2);border-radius:5px;padding:10px 12px;font-size:13px;line-height:1.55;color:var(--ink-2);margin-bottom:9px}
.reader .rail textarea{width:100%;background:var(--paper-2);border:1px solid var(--rule);border-radius:5px;padding:9px;font:14px 'Fraunces',Georgia,serif;color:var(--ink);resize:vertical}
.reader .rail .chip{display:inline-block;font:500 11px 'IBM Plex Sans',sans-serif;color:var(--accent-ink);background:var(--accent-soft);padding:3px 9px;border-radius:100px;margin:0 4px 4px 0}
.reader .rail .chip.soft{background:transparent;border:1px solid var(--rule);color:var(--ink-3)}

/* the one row of controls */
.rbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--rule);margin:14px 0 22px;position:relative}
.rbar .mode{display:inline-flex;border:1px solid var(--rule);border-radius:100px;padding:2px;gap:2px}
.rbar .mode button{font:600 12px 'IBM Plex Sans',sans-serif;color:var(--ink-3);border-radius:100px;padding:5px 15px;background:none;border:0;cursor:pointer}
.rbar .mode button.on{background:var(--accent);color:#fdfaf4}
.rbar .sep{width:1px;height:19px;background:var(--rule);margin:0 5px}
.rbar .chipb{font:500 12px 'IBM Plex Sans',sans-serif;color:var(--ink-3);border:1px solid var(--rule);border-radius:100px;padding:5px 12px;background:none;cursor:pointer;white-space:nowrap}
.rbar .chipb:hover{border-color:var(--rule-2);color:var(--ink-2)}
.rbar .chipb.on{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-ink)}
.rbar .tail{display:flex;align-items:center;gap:9px;margin-left:auto;white-space:nowrap}
.rbar .hint{font-size:12px;color:var(--ink-3)}
.rbar .aa{font:600 14px 'Fraunces',Georgia,serif;color:var(--ink-2);border:1px solid var(--rule);border-radius:5px;padding:3px 11px;background:none;cursor:pointer}

/* a line is a thing you can ask about */
#main .ln{cursor:pointer;border-radius:3px}
#main .ln:hover{background:var(--paper-2)}
#main .ln.sel{background:var(--accent-soft)}

/* Read: the poem and nothing else */
body.reading .reader{grid-template-columns:212px minmax(0,1fr)}
body.reading .reader .rail{display:none}
body.reading .rbar .chipb,body.reading .rbar .sep,body.reading .rbar .hint{display:none}
body.reading .introbox{display:none}
body.reading #main .verse{max-width:34em;margin:0 auto}
body.reading #main .ln{cursor:default}
body.reading #main .ln:hover{background:none}
body.reading .lnote,body.reading .mynote{display:none}
@media (max-width:1240px){ .reader{grid-template-columns:minmax(0,1fr) 320px} .reader .toc{display:none} body.reading .reader{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){ .reader{grid-template-columns:minmax(0,1fr)} .reader .rail{display:none} }
.reader .rail .introbox{background:none;border:0;padding:0;margin:0;font-size:13px;line-height:1.6}
.reader .rail .introbox .ill{display:none}
.reader .rail .introbox p{font-size:13px}

/* index.html carries its own hero grid, which is better than anything added from outside it. */
#lib .libhead p.sub:empty{display:none}


/* ---- listening on a big screen -------------------------------------------------------------------
   One bar across the foot of the window: what is playing, where it is, and the way through a book. It
   is the only resident chrome the reader gains, and it appears only when something is playing. */
/* The reading bar sits over the page, not across the whole window.
   It ran from edge to edge while everything above it stops at the 1180px column with 28px of gutter, so
   it read as a piece of browser furniture that had wandered onto the site. The width below is that same
   column, worked out the same way: box-sizing is border-box, so the column's inside measure is the
   max-width less its two gutters. */
#pmbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:70;
  width:min(1124px,calc(100vw - 56px));
  display:flex;align-items:center;gap:14px;
  padding:9px 18px;background:var(--paper,#fff);
  border:1px solid var(--rule,#ddd);border-bottom:0;border-radius:9px 9px 0 0;
  box-shadow:0 -14px 34px -22px rgba(0,0,0,.5);font-family:var(--sans,system-ui)}
/* the progress line has to follow the corners now that the bar has them */
#pmbar .pb-prog{border-radius:9px 9px 0 0;overflow:hidden}
@media (max-width:720px){
  #pmbar{width:100vw;border-left:0;border-right:0;border-radius:0;padding:9px 14px}
}
#pmbar[hidden]{display:none}
#pmbar .pb-prog{position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule,#e6e2da)}
#pmbar .pb-prog i{display:block;height:100%;width:0;background:var(--accent,#8a6d3b)}
#pmbar img{width:38px;height:38px;border-radius:3px;object-fit:cover;background:var(--rule,#eee);flex:0 0 auto}
#pmbar .pb-t{display:flex;flex-direction:column;min-width:0;max-width:230px;gap:1px;flex:0 1 auto}
#pmbar .pb-t b{font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pmbar .pb-t i{font-style:normal;font-size:11px;color:var(--ink-3,#777);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pmbar button{border:0;background:none;cursor:pointer;color:var(--ink,#222);flex:0 0 auto;
  width:38px;height:38px;font-size:17px;line-height:1;border-radius:50%}
#pmbar button:hover{background:var(--rule,#eee)}
#pmbar #pbPrev,#pmbar #pbNext{font-size:22px}
#pmbar #pbSeek{flex:1 1 auto;min-width:120px;accent-color:var(--accent,#8a6d3b)}
#pmbar .pb-at{font-size:11.5px;color:var(--ink-3,#777);font-variant-numeric:tabular-nums;flex:0 0 auto}
#pmbar .pb-credit{font-size:11px;color:var(--ink-3,#777);max-width:260px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
#pmbar .pb-credit a{color:inherit}
#pmbar #pbStop{font-size:19px;width:30px}
/* Room for the bar, measured from the bar rather than guessed at. 62px was written here and the bar is
   not 62px in every theme, at every text size, or once its corners and border were added -- the phone
   had the same number written down twice and it cut the last line off two screens before anybody
   noticed. player.js publishes the real height as --pm-h. */
body.pm-listening{padding-bottom:var(--pm-h,62px)}
/* the line being read: led, not boxed */
.verse .ln.pm-now{background:rgba(180,140,40,.13);box-shadow:-3px 0 0 0 var(--accent,#8a6d3b);border-radius:2px}
@media (prefers-color-scheme:dark){.verse .ln.pm-now{background:rgba(212,175,90,.14)}}
@media (max-width:700px){#pmbar .pb-credit,#pmbar .pb-at{display:none}}

/* ---- the reader's control row: what is used, and a door to the rest ------------------------------- */
.rbar .rmore{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;padding-top:9px;margin-top:8px;
  border-top:1px solid var(--rule,#e6e2da)}
.rbar .rmore[hidden]{display:none}
.rbar .chipb.more::after{content:" ⋯";letter-spacing:.06em}
.rbar .rmore-links{display:flex;flex-wrap:wrap;gap:0 14px;align-items:center;font-size:12.5px}
.rbar .rmore-links a{color:var(--ink-3,#777)}
.sec-head{margin-bottom:10px}
/* The poem sits directly under its controls. Forty pixels of air between the two said nothing. */
.rbar{margin-bottom:10px;padding-bottom:8px}
.reader{padding-top:14px}
.verse{margin-top:0}

/* ---- the era index: where you are, and everywhere else, without leaving the page ------------------ */
.erajump{position:sticky;top:0;z-index:20;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  background:var(--paper,#fff);border-bottom:1px solid var(--rule,#e6e2da);margin:0 0 22px;padding:2px 0}
.erajump::-webkit-scrollbar{display:none}
.erajump a{flex:0 0 auto;padding:10px 14px;font:500 12.5px var(--sans,system-ui);color:var(--ink-3,#777);
  white-space:nowrap;border-bottom:2px solid transparent;text-decoration:none}
.erajump a:hover{color:var(--ink,#222)}
.erajump a.on{color:var(--accent,#8a6d3b);border-bottom-color:var(--accent,#8a6d3b)}
.page-head{padding-bottom:14px}
.page-head .lede{max-width:60ch}
/* the opening of a long teaching page: its name and one line, then the teaching */
.page-head{padding-top:10px;padding-bottom:10px}
.page-head h1{margin:4px 0 6px}
.page-head .lede{margin:0}

/* Pointing at a line asks about it; clicking holds it. The verse is not altered either way -- the
   answer happens beside the poem, never on top of it. */
@media (hover:hover) and (pointer:fine){
  .verse .ln:hover{background:rgba(140,120,80,.07);border-radius:2px}
}
.verse .ln.pin{background:rgba(180,140,40,.11);box-shadow:-3px 0 0 0 var(--accent,#8a6d3b);border-radius:2px}
@media (prefers-color-scheme:dark){
  .verse .ln.pin{background:rgba(212,175,90,.13)}
}

/* Line numbers, set in the margin the way a printed edition sets them: every fifth line and the first,
   quiet enough to ignore and there when a reference sends you to line 5. */
.verse .ln{position:relative}
.verse .lnum{position:absolute;left:-20px;top:.35em;width:16px;text-align:right;
  font:400 10.5px/1 "IBM Plex Mono",monospace;color:var(--ink-3,#999);opacity:.62;
  font-variant-numeric:tabular-nums;user-select:none;pointer-events:none}
.verse{padding-left:38px}
.verse.nonums{padding-left:26px}
.verse.nonums .st .n{left:-26px;width:18px}
@media (max-width:820px){ .verse{padding-left:26px} .verse.nonums{padding-left:22px} .verse.nonums .st .n{left:-22px;width:16px} .verse .lnum{left:-26px;width:20px;font-size:9.5px} }
.citebox{position:relative;border:1px solid var(--rule);border-radius:6px;padding:16px 18px;margin:0 0 18px;
  background:var(--paper-2,rgba(128,110,80,.06))}
.citebox .citex{position:absolute;top:6px;right:8px;width:30px;height:30px;border:0;background:none;
  font-size:18px;color:var(--ink-3);cursor:pointer}
.citebox dl{margin:10px 0 4px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.citebox dt{font:500 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.citebox dd{margin:0}
.citebox code{font:400 12px/1.55 "IBM Plex Mono",monospace;color:var(--ink);word-break:break-word}

/* ---- a page opened from the phone app: its content, the app's surroundings ---------------------- */
html.in-app .nav,
html.in-app footer.site,
html.in-app .backlink{display:none!important}
html.in-app body{padding-top:0}
#appback{display:block;padding:14px 18px calc(10px + env(safe-area-inset-top,0px));
  font:500 14px var(--sans);color:var(--accent);text-decoration:none;position:sticky;top:0;z-index:40;
  background:var(--paper);border-bottom:1px solid var(--rule)}
html.in-app .wrap{padding-top:10px}
/* the metre note: the beat as sound, and a marked example line */
.metre-modal .beat{font:500 14px "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--ink-2);margin:6px 0}
.metre-modal .eg{font-family:var(--verse-font,"Fraunces",Georgia,serif);font-size:16.5px;line-height:1.5;margin:8px 0 4px}
.metre-modal h3{font-size:15px}