/* ==========================================================================
   Booklet reader: what was added to the original design (booklet.css).
   Loaded after it, so a rule here wins over the one it adjusts.

     1. The site's fonts and the shared text size
     2. Covers drawn as pictures, and the opening cover without scripts
     3. Accessibility fixes (each says what failed and by how much)
     4. The contents page
     5. The reading bar along the bottom
     6. The contents sheet
     7. The text size panel, opened from an Aa button
     8. Dark, in the site's own dark colours
     9. The side panel, on a wide screen
    10. The copyright card, set as a bookplate
    11. The side panel's title, and a shorter window
    12. The cover header, on a phone or a tablet
    13. Chapter openers: the number, and the title framed
   ========================================================================== */

/* ---- 1. the site's fonts and the shared text size ---- */
:root{
  --display:"warbler-deck","Warbler Deck","Libre Caslon Text",Georgia,serif;
  --body:"Figtree",system-ui,sans-serif;
  --head:"Figtree",system-ui,sans-serif;
}
/* small, medium and large are the library's sizes too (js/theme.js) */
html[data-size="small"] .article{--rs:.9}
html[data-size="large"] .article{--rs:1.2}
.sz-val{min-width:4.6em;text-align:center}

/* ---- 2. covers as pictures ---- */
/* The security policy allows no style attributes, so the covers are <img>
   elements rather than backgrounds set on the page. */
.reader .book-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.intro-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Without scripts nothing would ever lift the opening cover, so it only
   shows when js/theme.js has marked the page. */
html:not(.js) .intro-veil{display:none}
/* A title's boxed letters stay in one piece with the rest of their word. */
.ai-word{white-space:nowrap}

/* ---- 3. accessibility fixes ---- */
/* skip link: out of sight until the keyboard reaches it */
.skip{position:absolute;left:16px;top:-80px;z-index:200;padding:10px 16px;border-radius:10px;background:var(--blue-ink);color:#fff;font:600 .9rem var(--body);text-decoration:none}
.skip:focus{top:16px}
/* "library": white on the pale glass read 1.9:1; the deeper glass reads 5.5:1 */
.back-float{background:color-mix(in srgb,var(--blue-deep) 90%,transparent)!important;color:#fff!important}
@media(hover:hover){.back-float:hover{background:var(--blue-ink)!important}}
.back-float:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--blue-ink)}
/* chapter labels: --blue-mid on white read 3.1 to 3.4:1; --blue-deep reads 5.9:1 */
.chapter-label{color:var(--blue-deep)!important}
body.dark .chapter-label{color:var(--accent-soft)!important}
/* footnote numbers and the back-to-text arrows: --blue read 3.9 to 4.4:1 in
   three series; --blue-deep reads 5.4:1 and up */
.article a.fn,.article ol.sources a.fn-back{color:var(--blue-deep)}
/* the copyright line at the foot: --blue-mid read 3.0 to 3.4:1 */
.reader-footer .fine{color:var(--blue-deep)}
/* chapter dots: the numbers read 3.1 to 3.4:1 before they are reached, and
   white on the fill once they are; both now use the deeper shade */
.wn,.wn-heart{color:var(--blue-deep)}
.wn.reached,.wn-heart.reached{background:var(--blue-deep);border-color:var(--blue-ink)}
/* the closing dot's sunflower needs more room than the heart did to read as one */
.wn-heart svg{width:18px;height:18px}
/* the dots are drawn at 22px (20px on a phone); what a finger or a pointer
   meets reaches 28px, past WCAG 2.2's 24px, without changing the drawing */
.wn::after{content:"";position:absolute;inset:-3px;border-radius:50%}
/* footnote numbers had lost their keyboard ring */
.article a.fn:focus-visible{outline:2px solid var(--blue-deep);outline-offset:2px;border-radius:3px}
/* chapter dots: the name shows on keyboard focus as well as on hover */
.wn:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px}
.wn:focus-visible .wn-tip{opacity:1}
/* the pull-out tab on phones is a real button */
button.wn-handle{border:0;cursor:pointer;font:inherit}
button.wn-handle:focus-visible{outline:2px solid var(--blue-deep);outline-offset:2px}
.sz-panel button:focus-visible,.legal-close:focus-visible,.ctrl:focus-visible{outline:2px solid var(--blue-deep);outline-offset:2px}
/* a chapter that takes the keyboard after a jump shows no ring of its own */
.article .chapter:focus{outline:none}
/* The heading block: white words sat on the pale end of the blue (title
   2.5:1, blurb 1.5 to 1.8:1). The blue now holds behind the words, 4.8:1 at
   every width, and fades to white under the copyright button. */
.reader{background:linear-gradient(to bottom,var(--brand-accent) 0%,color-mix(in srgb,var(--blue) 72%,var(--blue-deep)) 30%,color-mix(in srgb,var(--blue) 65%,var(--blue-deep)) 84%,var(--blue-soft) 93%,var(--white) 100%)!important}

/* ---- 4. the contents page, before the first chapter ---- */
.toc{max-width:34rem;margin:0 auto 64px;padding:8px 0 0;text-align:center}
.toc .chapter-label{margin-bottom:14px}
.toc ol{list-style:none;margin:22px 0 0;padding:0;text-align:left}
.toc li{margin:0}
.toc a{display:flex;align-items:baseline;gap:12px;padding:9px 4px;color:var(--blue-ink);text-decoration:none;border-radius:8px}
.toc a:hover .toc-t{color:var(--blue)}
.toc a:focus-visible{outline:2px solid var(--blue-deep);outline-offset:2px}
.toc-n{flex:0 0 2.2em;font:italic 600 1rem var(--display);color:var(--blue-deep)}
/* the closing word is marked with a sunflower, here and in the sheet */
.n-flower{display:inline-block;width:1.15em;height:1.15em;fill:currentColor;vertical-align:-.2em}
.toc-t{font:600 calc(1.22rem * var(--rs,1))/1.3 var(--display);color:var(--blue-ink);transition:color .2s}
.toc-dots{flex:1;min-width:24px;border-bottom:1.5px dotted var(--blue-soft);transform:translateY(-4px)}
.toc-min{font:500 .8rem var(--body);color:var(--ink);white-space:nowrap}

/* ---- 5. the reading bar ---- */
.rbar{display:flex;justify-content:center;position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.rbar-in{pointer-events:auto}
html:not(.js) .rbar{display:none}
.rbar-in{display:flex;align-items:center;gap:4px;max-width:calc(100% - 24px);padding:5px 10px 5px 5px;border-radius:999px;background:var(--white);border:1px solid var(--line);box-shadow:0 14px 34px var(--shadow)}
.rbar-btn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:none;color:var(--blue-ink);cursor:pointer;font:700 1.05rem var(--display);text-decoration:none}
.rbar-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rbar-btn:hover{background:var(--blue-pale2)}
.rbar-btn:focus-visible,.mode-switch:focus-visible,.sheet-list a:focus-visible{outline:2px solid var(--blue-deep);outline-offset:2px}
.rbar-where{min-width:0;width:min(300px,52vw);margin:0 6px}
.rbar-where b{display:block;font:600 .92rem/1.2 var(--display);color:var(--blue-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar-where small{display:block;font:500 .74rem var(--body);color:var(--ink)}
.rbar-progress{display:block;margin-top:5px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rbar-progress i{display:block;height:100%;width:0;background:var(--blue)}
.article{padding-bottom:120px}
/* The bar carries the text size and theme, so the original gear is not
   drawn; the panel it opened now opens from the bar's Aa (section 7). */
@media(max-width:640px){
  .rbar{left:12px;right:12px}
  .rbar-in{max-width:100%;flex:1}
  .rbar-where{flex:1;width:auto}
}

/* Phones and tablets, read like an app: the back button and the bar step
   out of the way while you read on, and come back on the smallest scroll up
   (js/pages/booklet-bar.js). `translate` rather than `transform`, so the
   button's own hover lift still works. */
@media(max-width:1024px){
  .back-float{transition:transform .2s ease,box-shadow .2s ease,background .2s ease,translate .35s cubic-bezier(.22,1,.36,1),opacity .3s}
  html.chrome-away .back-float:not(:focus-visible){translate:0 calc(-100% - 30px);opacity:0;pointer-events:none}
  html.chrome-away .rbar:not(:focus-within){opacity:0;transform:translateY(28px)}
  html.chrome-away .rbar:not(:focus-within) .rbar-in{pointer-events:none}
  /* the bar is the way round the chapters here, so the side tab steps aside */
  .wn-handle{display:none!important}
}
/* a tablet's bar is a little roomier, for a thumb */
@media(min-width:641px) and (max-width:1024px){
  .rbar{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  .rbar-in{gap:8px;padding:8px 16px 8px 8px}
  .rbar-btn{width:52px;height:52px}
  .rbar-where{width:min(380px,50vw)}
  .rbar-where b{font-size:1.02rem}
  .rbar-where small{font-size:.8rem}
  .mode-switch{width:60px;height:34px}
  .mode-switch-knob{width:28px;height:28px;margin-top:-14px}
  body.dark .mode-switch-knob{transform:translateX(26px)}
}

/* the small light and dark switch, the library's switch in miniature */
.mode-switch{position:relative;flex:none;width:52px;height:30px;padding:0;border:1.5px solid var(--line);border-radius:999px;background:var(--sky);cursor:pointer}
.mode-switch-knob{position:absolute;left:2px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(20,40,80,.25);display:grid;place-items:center;transition:transform .45s cubic-bezier(.34,1.45,.55,1),background .35s}
.mode-switch-knob svg{grid-area:1/1;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:opacity .3s,transform .45s}
.mode-switch-knob svg:first-child{color:#e8826e}
.mode-switch-knob svg:last-child{color:#fff;opacity:0;transform:rotate(-120deg) scale(.5)}
body.dark .mode-switch-knob{transform:translateX(22px);background:#2b5a92}
body.dark .mode-switch-knob svg:first-child{opacity:0;transform:rotate(120deg) scale(.5)}
body.dark .mode-switch-knob svg:last-child{opacity:1;transform:none}

/* ---- 6. the contents sheet ---- */
.sheet{position:fixed;inset:0;z-index:120}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(15,25,45,.4);opacity:0;transition:opacity .25s}
.sheet-box{position:absolute;left:50%;top:50%;width:min(460px,calc(100% - 32px));max-height:min(78vh,640px);overflow:auto;padding:16px 16px 20px;border-radius:22px;background:var(--white);box-shadow:0 30px 60px rgba(15,25,45,.3);transform:translate(-50%,-46%);opacity:0;transition:opacity .25s,transform .3s cubic-bezier(.22,1,.36,1)}
.sheet.open .sheet-bg{opacity:1}
.sheet.open .sheet-box{opacity:1;transform:translate(-50%,-50%)}
.sheet-grab{display:none}
.sheet-head{display:flex;align-items:center;gap:12px;padding:4px 4px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.sheet-head img{width:40px;height:58px;border-radius:4px;object-fit:cover}
.sheet-head div{flex:1}
.sheet-kicker{margin:0;font:600 .66rem var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep)}
.sheet-head h2{margin:2px 0 0;font:600 1.3rem var(--display);color:var(--blue-ink);text-transform:lowercase}
.sheet-list{list-style:none;margin:0;padding:0}
.sheet-list a{display:flex;align-items:baseline;gap:10px;padding:9px 10px;border-radius:10px;color:var(--blue-ink);text-decoration:none}
.sheet-list a:hover{background:var(--blue-pale2)}
.sheet-list a[aria-current]{background:var(--sky);box-shadow:inset 3px 0 0 var(--blue)}
.sheet-n{flex:0 0 1.6em;font:italic 600 .95rem var(--display);color:var(--blue-deep)}
.sheet-t{flex:1;font:600 1.02rem/1.25 var(--display)}
.sheet-min{font:500 .74rem var(--body);color:var(--ink);white-space:nowrap}
@media(max-width:860px){
  .sheet-box{left:0;right:0;top:auto;bottom:0;width:auto;max-height:82vh;border-radius:22px 22px 0 0;transform:translateY(100%);opacity:1;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .sheet.open .sheet-box{transform:none}
  .sheet-grab{display:block;width:40px;height:4px;margin:0 auto 10px;border-radius:2px;background:var(--line)}
}

/* ---- 7. the text size panel, opened from an Aa button ----
   Light and dark is the switch beside each Aa, so the panel only sizes the
   text; the original's light, dark and match-my-device row is not drawn. */
.size-ctrl.from-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%)}
.size-ctrl.from-bar .sz-panel{left:50%;bottom:0;transform-origin:bottom center;translate:-50% 0}
/* now it holds one row, its buttons are a full finger's width */
.sz-row .sz-sm,.sz-row .sz-lg{width:44px;height:44px}
.sz-panel .sz-lg{font-size:1.3rem}.sz-panel .sz-sm{font-size:.85rem}
.sz-panel .sz-val{font-size:.85rem;color:var(--blue-deep)}

/* ---- 8. dark, in the site's own dark colours ----
   The original dark mode turned every blue to grey and the page near-black.
   Dark now matches the library's: deep navy grounds, soft blue-white text,
   the same light blue for anything that was blue. The palette below is
   redefined so everything drawn with a variable follows; the rest are the
   original's fixed greys, each matched here. */
body.dark{
  --blue-ink:#eef3f9; --blue-deep:#b3cff1; --blue:#8ab4e8; --blue-mid:#8ab4e8; --periwinkle:#6f93c4;
  --blue-soft:#33425a; --blue-soft2:#2c3a50; --blue-pale:#242e3d; --blue-pale2:#1f2836; --sky:#1b2330;
  --white:#1b2330; --gray:#1b2330; --gray-2:#242e3d; --ink:#c9d4e2; --line:#263243;
  --shadow:rgba(0,0,0,.45); --shadow-soft:rgba(0,0,0,.3);
  --navy:#c9d4e2; --navy-deep:#eef3f9;
  --accent:#8ab4e8; --accent-soft:#8ab4e8; --accent-pale:#242e3d; --accent-deep:#b3cff1;
  background:#121820;
}
html:has(body.dark),body.dark .article-wrap,body.dark .reader-footer{background:#121820}
body.dark .reader{color:#eef3f9;background:linear-gradient(to bottom,#1d3150 0%,#192a44 40%,#152033 76%,#121820 100%)!important}
body.dark .reader .book-cover,body.dark .intro-cover{filter:brightness(.94)}
body.dark .article .chapter.r-soft,body.dark .article .chapter,body.dark .article p,body.dark .article .dropcap{color:#c9d4e2}
body.dark .article .dropcap::first-letter,body.dark .article h2,body.dark .article h3,body.dark .pullquote{color:#eef3f9}
body.dark .verse{background:#1b2330}
body.dark .verse cite{background:#242e3d!important;color:#eef3f9!important}
body.dark .closing-card{background:linear-gradient(160deg,#1b2330,#161d28 100%)}
body.dark .legal-box{background:#1b2330}
body.dark .legal-backdrop{background:rgba(8,12,18,.8)!important}
body.dark .legal-close{background:#242e3d;color:#eef3f9}
html:has(body.dark){scrollbar-color:#33425a #161d28}
html:has(body.dark) ::-webkit-scrollbar-track,body.dark ::-webkit-scrollbar-track{background:#161d28}
html:has(body.dark) ::-webkit-scrollbar-thumb,body.dark ::-webkit-scrollbar-thumb{background:#33425a;border-color:#161d28}
body.dark .wn{background:#1b2330!important;border-color:#33425a!important;color:#c9d4e2!important}
body.dark .wn.reached,body.dark .wn-heart.reached{background:#8ab4e8!important;border-color:#b3cff1!important;color:#121820!important}
@media(hover:hover){body.dark .wn:hover{border-color:#8ab4e8!important;color:#eef3f9!important}}
body.dark .wn-tip{background:#242e3d;color:#eef3f9}
body.dark .back-float{background:rgba(27,35,48,.92)!important;color:#eef3f9!important}
body.dark .reader .ctrl{background:#242e3d!important;color:#eef3f9!important}
body.dark .reader .ctrl svg{color:#eef3f9!important}
@media(hover:hover){body.dark .reader .ctrl:hover{background:#2c3a50!important}}
@media(hover:hover){body.dark .sz-panel button:hover{background:#242e3d}}
body.dark .intro-veil{background:rgba(18,24,32,.62)}
body.dark .intro-veil .iv-glow{background:radial-gradient(circle,rgba(138,180,232,.12) 0%,rgba(0,0,0,0) 60%)}
body.dark .article ol.sources li::before{background:#33425a;color:#eef3f9}
body.dark .toc-dots{border-color:#33425a}
body.dark .rbar-in,body.dark .sheet-box{background:#1b2330;border-color:#263243}
body.dark .sheet-head{border-color:#263243}
body.dark .rbar-btn:hover,body.dark .sheet-list a:hover{background:#242e3d}
body.dark .sheet-list a[aria-current]{background:#242e3d;box-shadow:inset 3px 0 0 #8ab4e8}
/* the switch in the bar, dark as the library's own switch is */
body.dark .mode-switch{background:#14243d;border-color:#33425a}

/* ---- 9. the side panel, on a wide screen ----
   From 1100px across, a panel down the left takes the place of the blue
   heading, the contents page, the chapter dots and the reading bar, the way
   a reading app on a computer keeps the book beside the text. Its colours
   come from the booklet's own cover, blurred behind a navy veil dark enough
   that white text reads on every cover. The heading's title stays for
   screen readers, so the page keeps its h1. */
.side{display:none}
@media(min-width:1100px){
  body{padding-left:340px}
  .side{display:block;position:fixed;left:0;top:0;bottom:0;z-index:60;width:340px;overflow:hidden;color:#fff;background:#1d3150}
  .hero-card{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hero-card :is(.book-cover,.byline,.book-blurb,.controls){display:none}
  :is(.back-nav,.water-nodes,.wn-handle,.rbar,.toc){display:none!important}
  .article{padding-top:72px}
  .size-ctrl.from-bar{left:356px;bottom:20px;transform:none}
  .size-ctrl.from-bar .sz-panel{left:0;translate:0 0;transform-origin:bottom left}
}
.side-glow{position:absolute;inset:0}
.side-glow img{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);object-fit:cover;filter:blur(38px) saturate(1.35);opacity:.95}
.side-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,30,56,.5) 0%,rgba(16,30,56,.74) 40%,rgba(14,24,42,.9) 100%)}
body.dark .side-glow::after{background:linear-gradient(180deg,rgba(18,24,32,.6) 0%,rgba(18,24,32,.84) 40%,rgba(18,24,32,.95) 100%)}
.side-in{position:relative;display:flex;flex-direction:column;gap:18px;height:100%;padding:24px 26px 20px}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.side-logo{display:block;border-radius:6px}
.side-logo .hrn{display:block;height:50px;width:auto;overflow:visible}
.side-logo .hr-s path,.side-logo .hr-r path,.side-logo .hr-f path{fill:#fff}
.side-logo .hr-f .p1{fill:#a9c8ee}.side-logo .hr-f .p2{fill:#f0a091}.side-logo .hr-f .p3{fill:#7fd0ad}.side-logo .hr-f .p4{fill:#d3b0e8}.side-logo .hr-f .p5{fill:#cfcfd8}
.side-lib{display:inline-flex;align-items:center;gap:4px;padding:7px 13px 7px 9px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:600 .8rem var(--body);text-decoration:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.side-lib svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.side-lib:hover{background:rgba(255,255,255,.26)}
.side-book{display:flex;flex-direction:column;align-items:center;margin-top:4px;text-align:center}
.side-book img{width:150px;aspect-ratio:1294/2000;margin-bottom:18px;border-radius:8px;object-fit:cover;box-shadow:0 24px 48px rgba(0,0,0,.45)}
.side-t{margin:0;font:600 1.6rem/1.08 var(--display);text-transform:lowercase;text-wrap:balance}
.side-by{margin:7px 0 0;font:italic 500 1rem var(--display)}
.side-meta{margin:8px 0 0;font:500 .8rem var(--body)}
.side-bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.side-bar i{display:block;height:100%;width:0;border-radius:2px;background:#fff}
.side-pr small{display:block;margin-top:7px;font:500 .78rem var(--body)}
.side-k{margin:2px 0 -8px;font:600 .68rem var(--body);letter-spacing:.2em;text-transform:uppercase}
.side-nav{flex:1;min-height:0;overflow:auto;margin:0 -8px;padding:0 8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.side-list{list-style:none;margin:0;padding:0}
.side-list a{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:10px;color:#fff;text-decoration:none}
.side-list a:hover{background:rgba(255,255,255,.12)}
.side-list a[aria-current]{background:rgba(255,255,255,.2);box-shadow:inset 3px 0 0 #fff}
.side-n{flex:0 0 1.5em;font:italic 600 .95rem var(--display)}
.side-n .n-flower{width:1.25em;height:1.25em;vertical-align:-.25em}
.side-c{flex:1;font:600 1rem/1.25 var(--display)}
.side-min{font:500 .74rem var(--body);white-space:nowrap}
.side-tools{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.side-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:#fff;font:700 1.05rem var(--display);cursor:pointer}
.side-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.side-btn:hover{background:rgba(255,255,255,.14)}
.side .mode-switch{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}
.side :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.side-bar i{transition:none}}

/* ---- 10. the copyright card, set as a bookplate ----
   Only what a copyright page needs, framed on the sky blue like the plate
   inside an old book's cover. Replaces the original's two-part card. */
.legal-box{max-width:540px}
.plate{margin:16px;padding:46px 34px 42px;border:1px solid var(--blue-soft);border-radius:6px;outline:1px solid var(--blue-soft);outline-offset:-8px;background:var(--sky);text-align:center}
.plate-flower{display:block;width:34px;height:34px;margin:0 auto 18px;fill:currentColor;color:var(--blue)}
.plate-t{margin:0;font:600 1.75rem/1.15 var(--display);color:var(--blue-ink);text-wrap:balance}
.plate-by{margin:8px 0 0;font:italic 500 1.08rem var(--display);color:var(--ink)}
.plate-rows{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:27em;margin:34px auto 0;padding:0}
.plate-rows::before{content:"";width:44px;height:1px;background:var(--blue-soft)}
.plate-rows div{display:flex;flex-direction:column;gap:5px}
.plate-rows dt{font:600 .66rem var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--blue-deep)}
.plate-rows dd{margin:0;font:500 1.1rem/1.5 var(--display);color:var(--blue-ink);text-wrap:balance}
.plate-note dd{font:400 .98rem/1.65 var(--body);color:var(--ink)}
.plate-rows a{color:var(--blue-deep);font-weight:600;text-decoration:underline;text-decoration-color:var(--blue-soft);text-underline-offset:3px}
.plate-rows a:hover{text-decoration-color:currentColor}
.legal-close{top:30px;right:30px}
body.dark .plate{background:#161d28;border-color:#33425a;outline-color:#33425a}
body.dark .plate-rows a{text-decoration-color:#33425a}
@media(max-width:560px){
  .plate{margin:24px 12px 14px;padding:40px 22px 34px}
  .legal-close{top:38px;right:24px}
}

@media(prefers-reduced-motion:reduce){
  .rbar,.sheet-box,.sheet-bg,.mode-switch-knob,.mode-switch-knob svg,.back-float{transition:none!important}
}

/* ---- 11. the side panel's title, and a shorter window ----
   The title and "by Hannah Rolyn" sit close, with the reading time as a tag
   under them. In a window under 860px tall the cover moves beside the title,
   or the contents were squeezed out of sight (33px of list at 640px tall,
   none at 560px). */
@media(min-width:1100px){
  .side-t{line-height:1.05}
  .side-by{margin-top:4px}
  .side-meta{margin-top:10px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.16);font-size:.72rem}
}
@media(min-width:1100px) and (max-height:860px){
  .side-in{gap:14px;padding-top:20px}
  .side-book{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:16px;align-items:center;align-content:center;text-align:left}
  .side-book>p{grid-column:2}
  .side-book img{grid-row:1/4;width:92px;margin:0;border-radius:6px;box-shadow:0 10px 22px rgba(0,0,0,.42)}
  .side-t{align-self:end;font-size:1.32rem}
  .side-by{margin-top:3px;font-size:.95rem;line-height:1.2}
  .side-meta{justify-self:start;align-self:start;margin-top:9px}
}

/* ---- 12. the cover header, on a phone or a tablet ----
   Under 1100px across, the side panel's top takes the place of the blue
   heading: the cover glow, the cover beside the title, the time as a tag,
   the progress and the copyright button. It scrolls away as the reading
   starts; the chapter dots and the reading bar stay. The heading's title
   stays for screen readers, so the page keeps its h1. */
@media(max-width:1099px){
  .side{display:block;position:relative;overflow:hidden;color:#fff;background:#1d3150}
  .side-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 14px;padding:18px max(18px,env(safe-area-inset-left,0px)) 20px}
  :is(.side-top,.side-book){grid-column:1/-1}
  :is(.side-k,.side-nav){display:none}
  .side-tools{padding:0;border:0}
  .side-tools>:not([data-legal]){display:none}
  .back-nav{display:none!important}
  .hero-card{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .side-book{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;align-items:center;align-content:center;text-align:left}
  .side-book>p{grid-column:2}
  .side-book img{grid-row:1/4;width:96px;margin:0;border-radius:6px;box-shadow:0 10px 22px rgba(0,0,0,.42)}
  .side-t{align-self:end;font-size:1.5rem;line-height:1.05}
  .side-by{margin:4px 0 0;font-size:1rem}
  .side-meta{justify-self:start;align-self:start;margin:10px 0 0;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.16);font-size:.74rem}
  .article{padding-top:36px}
}
@media(min-width:700px) and (max-width:1099px){
  .side-in{max-width:760px;margin:0 auto;padding:26px 32px 28px}
  .side-book{grid-template-columns:130px minmax(0,1fr);column-gap:26px}
  .side-book img{width:130px}
  .side-t{font-size:2.1rem}
}

/* ---- 13. chapter openers: the number, and the title framed ----
   Hannah's choice: no "chapter one" (kept for screen readers) and no
   diamond. The number sits between two fine lines, and a short line under
   the title closes the frame. The introduction's "i" is drawn the same way,
   over "a word before we begin". */
.article .chapter:is([data-kind="chapter"],[data-kind="introduction"]){padding-top:28px}
.article .chapter:is([data-kind="chapter"],[data-kind="introduction"]) .chapter-rule,.toc .chapter-rule{display:none}
.article .chapter[data-kind="chapter"] .chapter-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.article .ch-num{display:flex;align-items:center;justify-content:center;margin:0 0 14px;font:600 calc(2.2rem * var(--rs))/1 var(--display);color:var(--blue);text-align:center;
  background:linear-gradient(var(--blue-soft),var(--blue-soft)) left 50%/calc(50% - 34px) 1px no-repeat,linear-gradient(var(--blue-soft),var(--blue-soft)) right 50%/calc(50% - 34px) 1px no-repeat}
.article .chapter[data-kind="introduction"] .ch-num{font-style:italic}
.article .chapter[data-kind="chapter"] h2{padding-bottom:26px;margin-bottom:34px;background:linear-gradient(var(--blue-soft),var(--blue-soft)) center bottom/120px 1px no-repeat}
.article .chapter[data-kind="introduction"] .chapter-label{margin-bottom:34px;padding-bottom:24px;font:italic 600 clamp(1.8rem,4vw,2.4rem)/1.2 var(--display);letter-spacing:0;text-transform:lowercase;color:var(--blue-ink)!important;background:linear-gradient(var(--blue-soft),var(--blue-soft)) center bottom/120px 1px no-repeat}
body.dark .article .ch-num{color:#8ab4e8;background:linear-gradient(#33425a,#33425a) left 50%/calc(50% - 34px) 1px no-repeat,linear-gradient(#33425a,#33425a) right 50%/calc(50% - 34px) 1px no-repeat}
body.dark .article .chapter[data-kind="chapter"] h2,body.dark .article .chapter[data-kind="introduction"] .chapter-label{background-image:linear-gradient(#33425a,#33425a)}
body.dark .article .chapter[data-kind="introduction"] .chapter-label{color:#eef3f9!important}