/* Open Ear Books. Generated shell, hand-written design.
   The palette is the logo's: teal #00676C and charcoal #384244, on the cream
   of the Victorian publisher's cloth the background art is a photograph of.
   Gilt is a hairline rule colour, a binding detail rather than a highlighter. */
:root{
  --ink:#384244; --ink-soft:#5A6466; --dim:#7C7568;
  --teal:#00676C; --teal-dk:#004B4F; --teal-pale:#E4EFEE;
  --gilt:#A98A4B; --parch:#EFE8D8; --page:#FBF8F1; --rule:#DDD4BE;
  --shadow:0 1px 2px rgba(56,66,68,.07),0 6px 18px rgba(56,66,68,.06);
  --wrap:74rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--parch);color:var(--ink);
  font:400 1.0625rem/1.65 "Source Serif 4",Georgia,"Times New Roman",serif}
/* THE CLOTH IS A TEXTURE, NOT A PICTURE. At full strength it fought the
   covers, dropped text contrast, and showed the original photograph's own
   crease as a seam across the page. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(250,246,238,.80),rgba(250,246,238,.88)),
    url("/assets/bg-home.jpg") center center / cover no-repeat}
body.title::before,body.reading::before{
  background:linear-gradient(rgba(251,248,242,.88),rgba(251,248,242,.93)),
    url("/assets/bg-page.jpg") center center / cover no-repeat}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dk)}
a:hover{color:var(--teal)}
h1,h2,h3{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;
  line-height:1.22;letter-spacing:-.005em}
.skip{position:absolute;left:-999px;top:0;background:var(--teal);color:#fff;
  padding:.6rem 1rem;z-index:50}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* THE HEADER. A coloured band the full width of the window, in two rows:
   search in the middle of the top row with the support buttons on its
   right, the menu in a paler row beneath, and the logo on the left across
   both. Its own colour, so it stands out from the page. Not sticky: two
   rows are too tall to keep on screen while reading. (This file is served
   to visitors, so it names no person and no other site; the design's
   history is in build_website.py beside CSS.) */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
header.site{display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"brand bar" "brand nav";border-bottom:1px solid #8EBFBD;
  position:relative;z-index:20}
.brand{grid-area:brand;display:flex;align-items:center;gap:.7rem;
  padding:.6rem 1.5rem;background:var(--page);border-right:1px solid #8EBFBD;
  text-decoration:none;color:inherit}
.brand img{width:58px;height:58px;border-radius:50%;flex:none}
.brand-t{display:flex;flex-direction:column;line-height:1.15}
.brand-t b{font-family:"Libre Baskerville",Georgia,serif;font-size:1.12rem}
.brand-t i{font-style:italic;color:var(--teal);font-size:.86rem}
.topstrip{grid-area:bar;background:#7FB8B6}
.topstrip-in{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(16rem,32rem) minmax(max-content,1fr);
  align-items:center;gap:.6rem 1.2rem;padding:.6rem 1.4rem}
.qs{grid-column:2;position:relative;display:flex}
.qs input{flex:1;min-width:0;font:400 .95rem/1.3 system-ui,sans-serif;
  padding:.55rem 1.1rem;border:0;border-radius:2rem 0 0 2rem;background:#fff;
  color:var(--ink)}
.qs input::placeholder{color:#7C8586}
.qs input:focus{outline:3px solid #004B4F;outline-offset:1px}
.qs button{border:0;cursor:pointer;background:#00676C;color:#fff;
  font:700 .95rem/1 system-ui,sans-serif;padding:0 1.3rem;border-radius:0 2rem 2rem 0}
.qs button:hover{background:#004B4F}
.qs-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + .35rem);margin:0;
  padding:.3rem 0;list-style:none;background:#fff;color:var(--ink);border:1px solid var(--rule);
  border-radius:.5rem;box-shadow:0 8px 24px rgba(20,22,24,.18);max-height:22rem;overflow:auto}
.qs-list[hidden]{display:none}
.qs-list a{display:block;padding:.45rem .9rem;text-decoration:none;color:var(--ink)}
.qs-list b{display:block;font:600 .92rem/1.3 system-ui,sans-serif}
.qs-list span{display:block;font:400 .8rem/1.3 system-ui,sans-serif;color:var(--dim)}
.qs-list li.on a,.qs-list a:hover{background:var(--teal-pale)}
.qs-none{padding:.5rem .9rem;font:400 .85rem/1.4 system-ui,sans-serif;color:var(--dim)}
.topstrip-links{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.6rem;
  flex-wrap:nowrap;justify-content:flex-end}
.topstrip-links a{font:700 .9rem/1 system-ui,sans-serif;text-decoration:none;
  padding:.62rem 1.05rem;border-radius:.35rem;white-space:nowrap}
.topstrip-links a.sponsor{background:#fff;color:#004B4F}
.topstrip-links a.sponsor:hover{background:#EEF6F5}
.topstrip-links a.donate{background:#00676C;color:#fff}
.topstrip-links a.donate:hover{background:#004B4F}
.mainnav{grid-area:nav;background:#D3E7E6;display:flex;justify-content:center;
  flex-wrap:wrap;gap:.4rem 2.2rem;padding:.7rem 1.2rem}
.mainnav a{font:700 .97rem/1 system-ui,sans-serif;color:var(--ink);text-decoration:none;
  padding:.3rem 0;border-bottom:2px solid transparent}
.mainnav a:hover{color:#004B4F;border-bottom-color:#8EBFBD}
.mainnav a[aria-current=page]{color:#004B4F;border-bottom-color:#00676C}
.give{margin:1.4rem 0 1.6rem}
.give .fine{margin:.5rem 0 0}
.givebox{background:var(--page);border:1px solid var(--rule);border-radius:.6rem;
  box-shadow:var(--shadow);padding:1.3rem 1.4rem 1.1rem;margin:1.4rem 0 1.2rem}
.givebox fieldset{border:0;margin:0 0 1.1rem;padding:0;min-width:0}
.givebox legend{font:700 .78rem/1 system-ui,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);padding:0;margin:0 0 .6rem}
.givebox .opts{display:flex;flex-wrap:wrap;gap:.5rem}
.givebox label.opt{position:relative;display:inline-flex}
.givebox label.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.givebox label.opt span{display:inline-block;min-width:4.6rem;text-align:center;
  padding:.62rem 1.05rem;border:1.5px solid #8EBFBD;border-radius:.45rem;
  background:#fff;color:var(--ink);font:600 .98rem/1 system-ui,sans-serif}
.givebox label.opt:hover span{border-color:var(--teal)}
.givebox label.opt input:checked+span{background:var(--teal);border-color:var(--teal);
  color:#fff}
.givebox label.opt input:focus-visible+span{outline:3px solid var(--gilt);
  outline-offset:2px}
.givebox .other{margin:.8rem 0 0;display:flex;flex-wrap:wrap;align-items:center;
  gap:.4rem .8rem;font:400 .92rem/1.4 system-ui,sans-serif;color:var(--ink-soft)}
.givebox .cur{display:inline-flex;align-items:center;gap:.3rem;
  font:600 1rem/1 system-ui,sans-serif;color:var(--ink)}
.givebox .cur input{width:9rem;padding:.5rem .6rem;border:1.5px solid #8EBFBD;
  border-radius:.45rem;font:600 1rem/1 system-ui,sans-serif;color:var(--ink);
  background:#fff}
.givebox .cur input:focus{outline:3px solid var(--gilt);outline-offset:1px}
.givebox .go{margin:.2rem 0 .7rem}
.givebox button.btn{border:0;cursor:pointer;font-size:1.02rem;padding:.85rem 1.8rem}
.givebox .fine{margin:0}
@media (max-width:60rem){
  header.site{grid-template-columns:1fr;grid-template-areas:"brand" "bar" "nav"}
  .brand{border-right:0;border-bottom:1px solid #8EBFBD;justify-content:center;
    padding:.6rem 1rem}
  .topstrip-in{grid-template-columns:1fr;padding:.6rem 1rem}
  .qs,.topstrip-links{grid-column:1}
  .topstrip-links{justify-self:center;justify-content:center}
  .mainnav{gap:.4rem 1.3rem;padding:.6rem .8rem}
  .mainnav a{font-size:.9rem}
}
@media (max-width:30rem){
  /* PHONES. "Support this free project" beside "Corporate Sponsorships" is
     wider than a phone, and buttons that may not wrap pushed the whole
     header, search box and menu included, off the right edge. So on a
     phone the columns may shrink, and the two buttons share the row when
     they fit and take a row each when they do not. */
  header.site{grid-template-columns:minmax(0,1fr)}
  .topstrip-in{grid-template-columns:minmax(0,1fr);padding:.55rem .75rem}
  .topstrip-links{flex-wrap:wrap;justify-self:stretch;gap:.45rem}
  .topstrip-links a{flex:1 1 auto;text-align:center;font-size:.86rem;
    padding:.6rem .7rem}
}

.hero{padding:3.2rem 1.1rem 2.2rem}
.hero-in{max-width:46rem;margin:0 auto;text-align:center}
.hero .mark{width:132px;height:132px;margin:0 auto .5rem;border-radius:50%;
  box-shadow:var(--shadow)}
.tagline{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;
  color:var(--teal);margin:.1rem 0 1.1rem;font-size:1.12rem}
.hero h1{font-size:clamp(1.55rem,1.15rem + 1.8vw,2.45rem);margin:0 0 .9rem;
  text-wrap:balance}
.lede{font-size:1.08rem;color:var(--ink);margin:0 auto 1.6rem;max-width:37rem;
  text-wrap:pretty}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;
  padding:.62rem 1.5rem;border-radius:2rem;font:600 .95rem/1 system-ui,sans-serif;
  box-shadow:var(--shadow)}
.btn:hover{background:var(--teal-dk);color:#fff}

.stats{max-width:var(--wrap);margin:0 auto 2rem;padding:1.1rem;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1rem;background:var(--page);
  border:1px solid var(--rule);border-radius:.5rem;box-shadow:var(--shadow)}
.stats.reserved{display:none}
.stat{text-align:center}
.stat b{display:block;font-family:"Libre Baskerville",Georgia,serif;
  font-size:1.65rem;color:var(--teal-dk);line-height:1.1}
.stat span{display:block;font:400 .78rem/1.3 system-ui,sans-serif;color:var(--dim);
  text-transform:uppercase;letter-spacing:.07em;margin-top:.3rem}

/* THE SIGNUP SITS BETWEEN THE SHELVES, not over them. Same width, same rule
   above it as a shelf heading, so it reads as one more row of the page
   rather than an advertisement for itself. */
.signup{max-width:var(--wrap);margin:0 auto 2.6rem;padding:0 1.1rem}
.signup-in{display:grid;grid-template-columns:1fr auto;gap:.6rem 2rem;
  align-items:center;background:var(--teal-pale);border:1px solid #BFD8D6;
  border-left:4px solid var(--teal);border-radius:.45rem;padding:1.15rem 1.35rem}
.signup-t h2{font-size:1.1rem;margin:0 0 .3rem}
.signup-t p{margin:0;font-size:.95rem;color:var(--ink-soft);max-width:34rem;
  text-wrap:pretty}
.signup-f{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.signup-f label{position:absolute;left:-9999px}
.signup-f input[type=email]{font:400 1rem/1.5 inherit;padding:.58rem .75rem;
  border:1px solid #BFD8D6;border-radius:.3rem;background:#fff;color:var(--ink);
  min-width:15rem}
.signup-f input[type=email]:focus{border-color:var(--teal)}
.signup-f button{border:0;cursor:pointer;white-space:nowrap}
/* .signup-f sets display:flex, which beats the hidden attribute, so the
   form stayed on screen after a successful signup. Found by looking at it;
   test_signup.py now checks what is visible, not the attribute. */
.signup-f[hidden],.signup-say[hidden]{display:none}
.signup-say{grid-column:1/-1;margin:.2rem 0 0;padding:.6rem .8rem;
  border-radius:.3rem;font:500 .95rem/1.5 system-ui,sans-serif}
.signup-say.busy{color:var(--ink-soft)}
.signup-say.good{background:#fff;border:1px solid #BFD8D6;color:var(--teal-dk)}
.signup-say.bad{background:#FDF1EC;border:1px solid #E7B8A6;color:#8A2E12}
.signup-n{grid-column:1/-1;margin:.2rem 0 0;font:400 .82rem/1.5 system-ui,sans-serif;
  color:var(--ink-soft)}

/* Quieter than the signup: a line of prose between shelves, not a panel. */
.helpnote{max-width:var(--wrap);margin:-1.4rem auto 2.4rem;padding:0 1.1rem}
.helpnote p{margin:0;padding-left:1rem;border-left:2px solid var(--gilt);
  font-size:.97rem;line-height:1.6;color:var(--ink-soft);max-width:46rem;
  text-wrap:pretty}

/* THE COOKIE CHOICE. A bar along the bottom, never over the text: a reader
   can go on reading and answer later, and nothing loads until they do. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--page);border-top:2px solid var(--teal);
  box-shadow:0 -4px 18px rgba(56,66,68,.14)}
.consent[hidden]{display:none}
.consent-in{max-width:var(--wrap);margin:0 auto;padding:.9rem 1.1rem;
  display:flex;gap:.8rem 1.6rem;align-items:center;flex-wrap:wrap}
.consent-in p{margin:0;flex:1 1 26rem;font:400 .92rem/1.5 system-ui,sans-serif;
  color:var(--ink)}
.consent-b{display:flex;gap:.5rem;flex-wrap:wrap}
.consent-b .btn{border:0;cursor:pointer}
.btn.ghost{background:transparent;color:var(--teal-dk);box-shadow:none;
  border:1px solid var(--teal)}
.btn.ghost:hover{background:var(--teal-pale);color:var(--teal-dk)}
.btn + .btn{margin-left:.6rem}
.linkbtn{font:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:#D9DEDE;border-bottom:1px solid transparent}
.linkbtn:hover{color:#fff;border-bottom-color:#8FB3B2}

.adslot:empty{display:none}
.adslot{max-width:var(--wrap);margin:1.6rem auto}

.shelf{max-width:var(--wrap);margin:0 auto 2.6rem;padding:0 1.1rem}
.shelf-h{display:flex;align-items:baseline;gap:.9rem;
  border-bottom:1px solid var(--gilt);padding-bottom:.4rem;margin-bottom:1.2rem}
.shelf-h h2{font-size:1.18rem;margin:0}
.shelf-h h2 a{text-decoration:none;color:inherit}
.shelf-h .n{margin-left:auto;font:400 .8rem/1 system-ui,sans-serif;color:var(--dim)}
.shelf .note{margin:-.6rem 0 1.2rem;font-size:.95rem;color:var(--ink-soft);
  max-width:46rem;text-wrap:pretty}
.held .shelf-h{border-bottom-color:var(--rule)}
.held .shelf-h h2{color:var(--dim)}
/* Coming soon: names only, in the same quiet key as the reserved box it
   replaced (2026-09-27). Nothing here is a link, because none of it
   exists yet. */
.soon-n{margin:0}
.soon{list-style:none;margin:.65rem 0 0;padding:0;display:grid;gap:.3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.soon li{margin:0}
.held-n{margin:0;padding:1.15rem 1.25rem;border:1px dashed var(--rule);
  border-radius:.4rem;color:var(--dim);background:rgba(255,255,255,.35);
  font:400 .9rem/1.55 system-ui,sans-serif}

.grid{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem 1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.card a{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.1rem}
/* THE COVER IS SHOWN WHOLE at the file's own ratio, 400x686. */
.cover{display:block;aspect-ratio:200/343;background:var(--page);
  border:1px solid var(--rule);border-radius:.22rem;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease}
.cover img{width:100%;height:100%;object-fit:contain}
.card a:hover .cover,.fcard a:hover .cover{transform:translateY(-3px);
  box-shadow:0 3px 6px rgba(56,66,68,.1),0 14px 28px rgba(56,66,68,.13)}
.card .t{display:block;margin-top:.55rem;font-weight:600;font-size:.95rem;
  line-height:1.3;text-wrap:pretty}
.card .a{display:block;font-size:.84rem;color:var(--dim)}
.card .ed{display:block;font-size:.78rem;color:var(--teal);font-style:italic}

.fgrid{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
.fcard a{display:grid;grid-template-columns:230px 1fr;gap:1.5rem;
  text-decoration:none;color:inherit;background:var(--page);padding:1.15rem;
  border:1px solid var(--rule);border-radius:.45rem;box-shadow:var(--shadow);
  align-items:start}
.ftext{display:flex;flex-direction:column;gap:.3rem}
.fed{font:600 .7rem/1 system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.08em;color:var(--teal);margin-bottom:.15rem}
.ft{font-family:"Libre Baskerville",Georgia,serif;font-size:1.25rem;
  font-weight:700;line-height:1.25;text-wrap:balance}
.fa{font-size:.95rem;color:var(--dim)}
.fl{margin-top:.35rem;font-size:.97rem;line-height:1.55;color:var(--ink-soft);
  text-wrap:pretty}
.fm{margin-top:.4rem;font:400 .8rem/1 system-ui,sans-serif;color:var(--dim)}

main#main>article{max-width:62rem;margin:0 auto;padding:2rem 1.1rem 3rem}
.masthead{display:grid;grid-template-columns:320px 1fr;gap:2.4rem;
  align-items:start;margin-bottom:2.2rem}
.mh-text h1{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.3rem);margin:0 0 .35rem;
  text-wrap:balance}
.subtitle{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;
  color:var(--ink-soft);margin:0 0 .5rem;font-size:1.02rem}
.byline{margin:0 0 .15rem;font-size:1.05rem}
.meta{margin:.55rem 0 1rem;font:400 .85rem/1.6 system-ui,sans-serif;color:var(--dim)}
.meta a{color:var(--teal-dk)}
.short{font-size:1.08rem;line-height:1.6;margin:0 0 .9rem;text-wrap:pretty}
.long p{margin:0 0 .9rem;color:var(--ink-soft)}

.chooser{margin:1.5rem 0 0;padding:.95rem 1.1rem;background:var(--teal-pale);
  border:1px solid #BFD8D6;border-left:4px solid var(--teal);border-radius:.4rem}
.chooser-l{display:block;font:600 .78rem/1 system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.07em;color:var(--teal-dk);margin-bottom:.6rem}
.chooser-b{display:flex;gap:.5rem;flex-wrap:wrap}
.ed-b{font:500 .92rem/1 system-ui,sans-serif;padding:.55rem .95rem;border-radius:.3rem;
  border:1px solid #BFD8D6;background:#fff;color:var(--teal-dk);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem}
a.ed-b:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.ed-b.on{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:600}
.chooser-n{margin:.6rem 0 0;font:400 .82rem/1.5 system-ui,sans-serif;color:var(--ink-soft)}

.facts,.prov,.buy-b,.chapters,.blocked{max-width:62rem;margin:0 0 2.4rem}
.mh-text .facts{margin:1.9rem 0 0}
.facts h2,.prov h2,.buy-b h2,.chapters h2{font-size:1.12rem;
  border-bottom:1px solid var(--gilt);padding-bottom:.4rem;margin:0 0 1rem}
.facts ul{margin:0;padding-left:1.15rem}
.facts li{margin:0 0 .7rem;text-wrap:pretty}
.fine{font:400 .82rem/1.55 system-ui,sans-serif;color:var(--dim)}
.chapters .note{margin:-.5rem 0 1.1rem;font-size:.95rem;color:var(--ink-soft);
  text-wrap:pretty}

.chs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ch{border-bottom:1px solid var(--rule);padding:.85rem .2rem;display:grid;
  grid-template-columns:1fr auto;gap:.5rem 1.4rem;align-items:center}
.ch:target{background:var(--teal-pale);border-radius:.3rem}
.ch-h{display:flex;align-items:baseline;gap:.75rem;min-width:0}
/* PRINT the label, NEVER the row number. Moby-Dick's third entry is Chapter
   One and Jane Eyre's eleventh is Chapter Ten, so the figure on the left is
   a position in the list and is styled to read as one. */
.ch-n{font:400 .78rem/1 system-ui,sans-serif;color:var(--dim);min-width:1.6rem;
  text-align:right;flex:none}
.ch-l{font-weight:600;font-size:1rem;line-height:1.35;text-wrap:pretty}
.ch-d{font:400 .8rem/1 system-ui,sans-serif;color:var(--dim);flex:none;
  margin-left:auto;padding-left:.6rem}
.ch-c{display:flex;align-items:center;gap:.9rem;justify-self:end}
.ch audio{height:34px;width:min(17rem,46vw)}
.readalong{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  font:500 .85rem/1 system-ui,sans-serif;text-decoration:none;color:var(--teal-dk);
  border:1px solid var(--rule);background:var(--page);border-radius:.3rem;
  padding:.45rem .7rem}
.readalong:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
/* As wide as a real "Read the text" button, so a row without one keeps its
   player in the same column as the rows that have one. */
.readalong.none{border:0;background:none;width:7.95rem;padding:0}
.intros .ch-l{font-weight:500}
/* AN INTRODUCTION SITS DIRECTLY ABOVE ITS BOOK and reads as a lead-in to it:
   quieter, unnumbered, and a smaller player, so the eye running down the list
   lands on the books and can pass each introduction by. */
.ch.intro{border-bottom:1px dashed var(--rule);padding:.5rem .2rem;
  background:rgba(228,239,238,.4)}
.ch.intro .ch-l{font-weight:400;font-size:.93rem;color:var(--ink-soft)}
.intro-k{font:600 .68rem/1 system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.08em;color:var(--teal);margin-right:.3rem}
.ed-b.both{gap:.45rem}
.both-ic{width:15px;height:11px;border:1.5px solid currentColor;border-radius:2px;
  background:linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat}

.blocked{background:#FDF6E8;border:1px solid #E3CFA0;border-left:4px solid var(--gilt);
  border-radius:.4rem;padding:1.1rem 1.25rem}
.blocked h2{border:0;margin:0 0 .5rem;font-size:1.05rem}
.blocked p{margin:0 0 .6rem}
.blocked-row{font:400 .85rem/1 system-ui,sans-serif;color:var(--dim);font-style:italic}

.buys{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.buy-h{font-size:.98rem;margin:1.2rem 0 .6rem}
.buy-i{margin:0 0 1rem;max-width:40rem}
.rd .buy-b{margin:3rem 0 1rem}
.buy{font:500 .9rem/1 system-ui,sans-serif;text-decoration:none;border:1px solid var(--rule);
  background:var(--page);color:var(--ink);padding:.6rem 1rem;border-radius:.3rem}
.buy:hover{border-color:var(--teal);color:var(--teal-dk)}
/* (paid link), beside the link it describes rather than at the foot of the
   page, so the two are read at the same moment (2026-09-23). Quiet, but
   not so quiet it cannot be read: it carries the same dim as other fine
   print, which is measured for contrast elsewhere. */
.paid{font:400 .78rem/1.4 system-ui,sans-serif;color:var(--dim);white-space:nowrap}
/* FURTHER READING: a note after the shop, not a second shop (ruled
   2026-09-23). No heading of its own, no rule, no button, and the body set
   smaller and dimmer than the page's own text, so it cannot overshadow the
   editions above it. This file ships to the server, so it names nobody. */
.fr{margin:1.6rem 0 0;max-width:40rem}
.fr p{margin:0 0 .35rem}
.fr-lead{font-weight:500}
.fr-b{color:var(--dim);font-size:.92rem;line-height:1.55}
.fr-l{font-size:.92rem}
.fr .fine{margin:.45rem 0 0}

/* CONTRIBUTORS (ruled 2026-09-24). A thank-you, in the page's own register:
   no boxes, no colour blocks, nothing that turns gratitude into an
   advertisement. A corporate sponsor is a logo with the name underneath;
   everybody else is a name. The lists wrap into as many columns as the
   width allows and fall to one on a phone. */
.contrib{margin:2.2rem 0 0}
.contrib h2{margin:0 0 .5rem}
.contrib > p{max-width:42rem;margin:0 0 .9rem}
.tier{font-size:1rem;margin:1.2rem 0 .4rem}
.names{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.names li{margin:0}
.c-note{color:var(--dim);font-size:.9rem}
/* Laid out from the left rather than stretched across the page: with one
   sponsor a stretched grid centred it in empty space, which read as an
   advertisement rather than a thank-you (2026-09-24). */
.c-cards{list-style:none;margin:0 0 .6rem;padding:0;display:flex;
  flex-wrap:wrap;gap:1.4rem 2rem}
.c-card{margin:0;text-align:center;width:min(100%,12rem)}
.c-card a{text-decoration:none;color:inherit}
.c-logo{display:block;margin:0 auto .4rem;max-width:100%;max-height:4.5rem;
  width:auto;height:auto}
.c-name{display:block;font-weight:500}
.c-card .c-note{display:block;margin-top:.15rem;line-height:1.4}

/* The private form. Plain on purpose: it is a tool, not a page. */
.admin input[type=text],.admin input:not([type]),.admin select{
  font:inherit;padding:.35rem .5rem;min-width:min(100%,22rem)}
.admin label{font-weight:500}
/* What the form says back. Fine print was too quiet to answer "did that
   work?", which is the only question being asked (2026-09-25). */
.said{border-left:3px solid var(--teal);background:#00000008;margin:0 0 .6rem;
  padding:.5rem .8rem;max-width:42rem}
.admin-list{list-style:none;margin:0 0 1rem;padding:0}
.admin-list li{margin:0 0 .35rem}
form.inline{display:inline}
.buys .paid{align-self:center}

/* CONTINUE THE EXPERIENCE. An aside AFTER </main>, so it is outside the
   reading region the Accessibility page describes: a reader moving through
   the chapters never walks into it, and anybody who wants it still has a
   landmark with a heading. Set apart from the page above it by a rule and
   air rather than by colour, because it is not part of the book. */
aside.offers{border-top:1px solid var(--rule);margin:3rem 0 0;padding:1.6rem 1.1rem 0}
aside.offers .inner{max-width:var(--wrap);margin:0 auto}
aside.offers h2{font-size:1.1rem;margin:0 0 .9rem}
.offer-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.offer{margin:0}
.offer-t{font-weight:500}
.offer-d{margin:.3rem 0 0;color:var(--dim);font-size:.92rem;max-width:36rem}
aside.offers .fine{margin:0}
.prov p{margin:0 0 .6rem;font-size:.95rem;color:var(--ink-soft)}

.rd-bar{position:sticky;top:0;z-index:10;background:rgba(251,248,241,.96);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.rd-bar-in{max-width:44rem;margin:0 auto;padding:.55rem 1.1rem;display:flex;
  align-items:center;gap:1rem;flex-wrap:wrap}
.rd-back{font:500 .88rem/1.3 system-ui,sans-serif;text-decoration:none;
  color:var(--teal-dk);flex:1 1 9rem}
.rd-bar audio{height:34px;flex:1 1 15rem;max-width:22rem}
/* SPECIFIC ENOUGH TO WIN. main#main>article carries an id, so a bare .rd
   loses to it and the book was setting at 62rem: about 120 characters a line,
   which is fine for scanning a chapter list and punishing to actually read. */
main#main>article.rd{max-width:44rem;padding:1.8rem 1.1rem 3rem}
.rd h1{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);margin:0 0 1.5rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--gilt)}
/* The book itself. Measure, size and leading are set for continuous reading
   rather than for scanning, which is what every other block here is for. */
.rd-text{font-size:1.14rem;line-height:1.75}
.rd-text p{margin:0 0 1.15rem;text-wrap:pretty}
.missing{color:var(--dim);font-style:italic}
.otheredition{display:inline-block;margin:1.6rem 0 0;padding:.55rem .95rem;
  border:1px solid #BFD8D6;background:var(--teal-pale);border-radius:.3rem;
  font:500 .9rem/1 system-ui,sans-serif;text-decoration:none;color:var(--teal-dk)}
.otheredition:hover{background:var(--teal);color:#fff}
.pagenav{display:flex;justify-content:space-between;gap:1rem;margin:2.4rem 0 1.4rem;
  padding-top:1.2rem;border-top:1px solid var(--rule)}
.pn{font:500 .95rem/1.35 system-ui,sans-serif;text-decoration:none;max-width:45%}
.pn span{display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--dim);margin-bottom:.2rem}
.pn.next{text-align:right}

/* ------------------------------------------------ two editions, one page */
/* ONE ROW PER PARAGRAPH, THREE VIEWS. Each paragraph is in the page once and
   the body's mode class decides which columns show, as on the old
   plain-English site. With JavaScript off, #both is the side-by-side view. */
main#main>article.rd.rd-wide{max-width:44rem}
body.m-both main#main>article.rd.rd-wide{max-width:78rem}
body.m-both .rd-bar-in{max-width:78rem}
.rd-sub{font:600 .76rem/1.5 system-ui,sans-serif;letter-spacing:.06em;
  color:var(--dim);margin:-.9rem 0 1.3rem}
.toggle{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:0 0 1rem;
  padding:.6rem .7rem;background:var(--page);border:1px solid var(--rule);
  border-radius:.45rem;box-shadow:var(--shadow)}
.toggle-l{font:600 .7rem/1 system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.08em;color:var(--dim);margin-right:.35rem}
.mode{font:500 .9rem/1 system-ui,sans-serif;padding:.52rem .85rem;border-radius:.3rem;
  border:1px solid var(--rule);background:#fff;color:var(--teal-dk);text-decoration:none}
.mode:hover{border-color:var(--teal);color:var(--teal-dk)}
.mode[aria-pressed=true]{background:var(--teal);color:#fff;border-color:var(--teal)}
.namenote{font:400 .88rem/1.55 system-ui,sans-serif;color:var(--ink-soft);
  border-left:3px solid var(--gilt);padding:.15rem 0 .15rem .8rem;margin:0 0 1.8rem}
.bothnote{display:none;font:400 .88rem/1.55 system-ui,sans-serif;color:var(--ink-soft);
  border-left:3px solid var(--teal);padding:.15rem 0 .15rem .8rem;margin:-1rem 0 1.8rem}
body.m-both .bothnote{display:block}
html:not(.js) .bothnote:has(~ .pair:target){display:block}
.pair{font-size:1.14rem;line-height:1.75}
.prow p{margin:0 0 1.15rem;text-wrap:pretty}
.prow .lbl{display:none;font:600 .68rem/1 system-ui,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);margin:0 0 .55rem}
.prow .lbl.joins{color:var(--gilt)}
body.m-classic .c-plain,body.m-plain .c-classic,body.m-classic .c-dup{display:none}
body.m-both .prow{display:grid;grid-template-columns:1fr 1fr;gap:0 2.6rem;
  padding:1.1rem 0 .2rem;border-bottom:1px solid var(--rule)}
body.m-both .prow .lbl{display:block}
body.m-both .c-classic{color:var(--ink-soft);font-size:1.03rem}
.dupnote{font:italic 400 .9rem/1.5 system-ui,sans-serif;color:var(--dim)}
.pl{display:flex;align-items:center;gap:.55rem;flex:1 1 15rem;max-width:22rem}
.pl audio{height:34px;flex:1;min-width:0}
.pl-l{display:none;font:600 .66rem/1.25 system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;color:var(--dim);max-width:6.5rem}
body.m-classic .pl-plain,body.m-plain .pl-classic{display:none}
body.m-both .pl-l{display:block}
html:not(.js) .pair:target .c-classic,html:not(.js) .pair:target .c-plain{display:block}
html:not(.js) .pair:target .prow{display:grid;grid-template-columns:1fr 1fr;gap:0 2.6rem;
  padding:1.1rem 0 .2rem;border-bottom:1px solid var(--rule)}
html:not(.js) .pair:target .lbl{display:block}

footer.site{background:var(--ink);color:#D9DEDE;margin-top:3rem;padding:2.2rem 1.1rem 2.6rem}
footer.site .inner{max-width:var(--wrap);margin:0 auto}
footer.site nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font:400 .88rem/1.6 system-ui,sans-serif;margin-bottom:1rem}
footer.site nav a{color:#D9DEDE;text-decoration:none;border-bottom:1px solid transparent}
footer.site nav a:hover{border-bottom-color:#8FB3B2;color:#fff}
footer.site .fine{color:#B9C2C2;max-width:44rem;margin:0}
/* The Follow us line is its own sentence, not the first line of the licence
   paragraph, so it gets air beneath it (2026-09-22). */
footer.site .fine.follow{margin:0 0 .6rem}
/* THE FOOTER IS DARK, SO ITS LINKS ARE LIGHT. The licence link inherited the
   page's teal link colour, #004B4F on #384244, a contrast of about 1.4 to 1:
   unreadable, and reported as such on 2026-09-17. White and underlined, it
   is about 10 to 1 and still reads as a link. This file ships to the
   server, so it names nobody: check_website sweeps it for real names. */
footer.site .fine a{color:#FFFFFF;text-decoration:underline;text-underline-offset:2px}
footer.site .fine a:hover{color:#CFE3E2}

/* ---------------------------------------------------- genre and prose pages */
/* THE ART IS SHOWN, NOT WASHED OUT. A cream veil over it was fine for the
   pale parchment shelves and turned the dark ones, Gothic Romance and Sci-Fi
   among them, into flat grey that read as a broken image. The backgrounds are
   not uniformly light, so no single overlay can serve them all. The art runs
   at full strength and the words sit on their own surface over it, which
   works whichever way the picture goes. */
.gmast{position:relative;padding:2.2rem 1.1rem;border-bottom:1px solid var(--rule);
  background:var(--genre-bg) center center / cover no-repeat}
.gmast::after{content:"";position:absolute;inset:0;background:rgba(24,26,28,.16)}
.gmast-in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto}
.gmast-panel{background:rgba(251,248,242,.95);border:1px solid var(--rule);
  border-radius:.5rem;padding:1.3rem 1.5rem;max-width:44rem;
  box-shadow:0 2px 6px rgba(20,22,24,.14),0 12px 30px rgba(20,22,24,.12)}
.gmast h1{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem);margin:.2rem 0 .6rem;
  text-wrap:balance}
.crumb{margin:0;font:400 .82rem/1 system-ui,sans-serif}
.crumb a{color:var(--teal-dk);text-decoration:none}
.glede{font-size:1.08rem;line-height:1.6;max-width:44rem;margin:0 0 .8rem;
  text-wrap:pretty}
.gmast .meta{margin:0}
.genre .shelf{padding-top:2rem}

.page-h{padding:2.6rem 1.1rem 1.4rem}
.page-h-in{max-width:var(--wrap);margin:0 auto}
.page-h h1{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.5rem);margin:0 0 .6rem}
/* .lede centres its own block, which is right under a centred hero and
   wrong under a left-aligned page heading. */
.page-h .lede{margin-left:0}
.grows{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grow{background:var(--page);border:1px solid var(--rule);border-radius:.45rem;
  padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.grow-h{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;color:inherit}
.grow-t{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;
  font-size:1.05rem;line-height:1.3}
.grow-n{margin-left:auto;font:400 .78rem/1 system-ui,sans-serif;color:var(--dim);
  white-space:nowrap}
.grow-h:hover .grow-t{color:var(--teal-dk)}
.grow-d{margin:.55rem 0 .9rem;font-size:.93rem;line-height:1.55;
  color:var(--ink-soft);text-wrap:pretty}
.gminis{display:flex;gap:.45rem;flex-wrap:wrap}
.gmini{display:block;width:44px;flex:none}
.gmini .cover{border-radius:.15rem;box-shadow:none}

/* The prose pages. A narrower measure than the shelves, because these are
   read straight through rather than scanned. */
.prose{max-width:44rem;margin:0 auto;padding:2.4rem 1.1rem 3rem}
.prose h1{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);margin:0 0 1rem;
  text-wrap:balance}
.prose h2{font-size:1.15rem;margin:2.2rem 0 .7rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--gilt)}
.prose p{margin:0 0 1rem;text-wrap:pretty}
.prose .lede{font-size:1.12rem;line-height:1.6;color:var(--ink)}
.prose ul{margin:0 0 1rem;padding-left:1.2rem}
.prose li{margin:0 0 .6rem;text-wrap:pretty}
/* The signature that closes About Us: a name and a role, set apart from the
   prose the way a letter's sign-off is. */
.sign{margin:2.2rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule);
  font-family:"Libre Baskerville",Georgia,serif;font-size:1.05rem;
  line-height:1.6;color:var(--ink)}
.sign span{font-family:system-ui,sans-serif;font-size:.85rem;color:var(--dim);
  letter-spacing:.04em}
.creditline{background:var(--page);border:1px solid var(--rule);
  border-left:3px solid var(--teal);border-radius:.3rem;padding:.7rem .95rem;
  font:400 .95rem/1.5 system-ui,sans-serif;color:var(--ink)}
.pending{background:var(--teal-pale);border:1px solid #BFD8D6;
  border-left:4px solid var(--teal);border-radius:.4rem;padding:.95rem 1.15rem;
  margin:1.2rem 0}
.pending p{margin:0 0 .6rem;font:400 .95rem/1.6 system-ui,sans-serif}
.pending p:last-child{margin:0}

/* ------------------------------------------------------------ the form */
.contact{margin:1.6rem 0 1.2rem}
.contact .f{margin:0 0 1.15rem;display:flex;flex-direction:column;gap:.35rem}
.contact label{font:600 .88rem/1.3 system-ui,sans-serif;color:var(--ink)}
.contact input,.contact select,.contact textarea{font:400 1rem/1.5 inherit;
  padding:.6rem .7rem;border:1px solid var(--rule);border-radius:.3rem;
  background:var(--page);color:var(--ink);width:100%}
.contact textarea{resize:vertical;min-height:9rem}
.contact input:focus,.contact select:focus,.contact textarea:focus{
  border-color:var(--teal)}
.contact .hint{font:400 .82rem/1.45 system-ui,sans-serif;color:var(--dim)}
.contact button{border:0;cursor:pointer}
/* A field no person sees and no person fills in. A submission that has it
   filled came from something automated. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------- genre options A and B, 2026-09-17 */
.g-orn{display:block;width:6.5rem;height:9px;margin:.1rem auto .9rem;position:relative;
  background:linear-gradient(var(--gilt),var(--gilt)) left center/2.6rem 1px no-repeat,
    linear-gradient(var(--gilt),var(--gilt)) right center/2.6rem 1px no-repeat}
.g-orn::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border:1px solid var(--gilt);transform:translate(-50%,-50%) rotate(45deg)}
.ga .crumb,.gb .crumb{font-size:.8rem;letter-spacing:.04em}

/* A: the picture is the page, fixed, and everything sits in its middle. */
body.ga::before{background:var(--genre-bg) center center / cover no-repeat}
.ga-in{max-width:60rem;margin:0 auto;padding:3.4rem 1.4rem 1rem}
.ga-head{text-align:center;max-width:40rem;margin:0 auto 2.6rem}
.ga-head h1{font-size:clamp(1.9rem,1.25rem + 2.5vw,3.1rem);margin:.5rem 0 .55rem;
  text-wrap:balance}
.ga-head .glede{margin:0 auto .7rem;font-size:1.13rem;line-height:1.6;max-width:36rem}
.ga-head .meta{margin:0}
.ga .ga-shelf{padding:0;max-width:none}
/* Fixed-width columns, centred, so a shelf of three sits in the middle of
   the frame rather than against its left edge. */
.ga .grid{grid-template-columns:repeat(auto-fit,minmax(140px,168px));
  justify-content:center}
.ga.tone-dark .ga-head h1,.ga.tone-dark .card .t{color:#F5F0E6}
.ga.tone-dark .ga-head .glede{color:#E6E0D4}
.ga.tone-dark .ga-head .meta,.ga.tone-dark .card .a{color:#C4BDB0}
.ga.tone-dark .crumb a{color:#BFE0DE}
.ga.tone-dark .card .ed{color:#9ED3D0}
.ga.tone-dark .cover{border-color:rgba(255,255,255,.14);
  box-shadow:0 2px 4px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.35)}

/* B: the picture whole, at its own ratio, with the name in its middle. */
.gb-card{max-width:62rem;margin:2.2rem auto 2.6rem;padding:0 1.1rem}
.gb-art{aspect-ratio:2752/1536;background:var(--genre-bg) center center / 100% 100% no-repeat;
  border-radius:.35rem;box-shadow:0 2px 6px rgba(56,66,68,.12),0 16px 40px rgba(56,66,68,.16);
  display:grid;place-items:center;padding:6% 17%}
.gb-in{text-align:center;max-width:36rem}
.gb-in h1{font-size:clamp(1.6rem,1.1rem + 2.2vw,2.8rem);margin:.4rem 0 .5rem;text-wrap:balance}
.gb-in .glede{margin:0 auto .6rem;font-size:1.06rem;line-height:1.55}
.gb-in .meta{margin:0}
.gb.tone-dark .gb-in h1{color:#F5F0E6}
.gb.tone-dark .gb-in .glede{color:#E6E0D4}
.gb.tone-dark .gb-in .meta{color:#C4BDB0}
.gb.tone-dark .gb-in .crumb a{color:#BFE0DE}
@media (max-width:52rem){
  body.m-both .prow{grid-template-columns:1fr;gap:.2rem}
  html:not(.js) .pair:target .prow{grid-template-columns:1fr;gap:.2rem}
  .gb-art{aspect-ratio:auto;background-size:cover;padding:2.6rem 1.6rem}
  .ga-in{padding:2.2rem 1rem 1rem}
  .signup-in{grid-template-columns:1fr}
  .signup-f input[type=email]{min-width:0;flex:1 1 12rem}
  .masthead{grid-template-columns:1fr;gap:1.4rem}
  .mh-cover{max-width:260px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ch{grid-template-columns:1fr}
  .ch-c{justify-self:stretch;flex-wrap:wrap}
  .ch audio{width:100%;flex:1 1 12rem}
  .readalong.none{display:none}
  .fcard a{grid-template-columns:150px 1fr;gap:1.1rem}
}
@media (max-width:30rem){
  body{font-size:1.02rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:1.2rem .9rem}
  .hero{padding:2.2rem .9rem 1.6rem}
  .fcard a{grid-template-columns:1fr;gap:1rem}
  .fcard .cover{max-width:180px}
  .rd-bar{top:0}
}
/* ON PAPER. The Accessibility page says a reading page can be printed, and
   nothing had ever tested it: the sticky player bar printed over the first
   lines, and the navigation and footer took a page of their own. Everything
   that is a control disappears, and the book is what prints. */
.printonly{display:none}
@media print{
  /* A PRINTED CHAPTER SAYS WHOSE IT IS. On paper the header is gone, so the
     sheet said "Book Five" and nothing else: not the book, not the author,
     not where it came from. The licence asks for credit and this is the one
     copy that leaves the site without a link attached. */
  .printonly{display:block;margin:0 0 .8rem;font:9pt/1.4 system-ui,sans-serif;
    color:#444;letter-spacing:.02em}
  .consent,.topstrip,
  header.site,footer.site,.rd-bar,.adslot,.signup,.helpnote,.pagenav,.skip,
  .toggle,.chooser,.buy-b,.otheredition,.namenote,.bothnote,.stats{display:none!important}
  body{background:#fff;color:#000;font:11pt/1.5 "Source Serif 4",Georgia,serif}
  body::before{display:none!important}
  main#main>article,main#main>article.rd,main#main>article.rd.rd-wide,
  .prose{max-width:none;margin:0;padding:0}
  .rd-text,.pair{font-size:11pt;line-height:1.55}
  .rd h1{border-bottom:1px solid #999}
  a{color:#000;text-decoration:none}
  .fine{color:#444}
  .prow{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card a:hover .cover,.fcard a:hover .cover{transform:none}
}