/* The Western Core. The look follows the Encyclopedia of Natural Relations (naturalrelations.com):
   warm paper, dark ink, one oxblood accent, IM Fell English for display type and EB Garamond for text.
   The fonts are served from this site, so visitors make no requests to other hosts. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/eb-garamond-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/eb-garamond-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(fonts/eb-garamond-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(fonts/eb-garamond-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "UnifrakturMaguntia"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/unifrakturmaguntia-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IM Fell English SC"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-sc-latin-400-normal.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --paper: #F3EDE1;
  --panel: #ECE3D2;         /* bands and quiet backgrounds */
  --card: #FBF8F2;
  --field: #FFFDF8;
  --ink: #1F1A14;
  --ink-2: #2A231B;
  --ink-3: #3A322A;
  --muted: #4E443A;
  --faint: #5E5245;
  --rule: #CFC3AA;
  --rule-soft: #DDD2BC;
  --rule-strong: #A8997C;
  --accent: #7B2D26;        /* oxblood: links, active controls, eyebrows */
  --accent-dark: #561E19;
  --good: #3D5A34;          /* "Recommended" */
  --warn: #A3261C;          /* "Not recommended" and form errors */
  --lapis: var(--accent);   /* older names, kept so the book list code needs no change */
  --gilt: var(--accent);
  --focus: var(--accent);
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --display: "IM Fell English", Georgia, "Times New Roman", serif;
  --sans: var(--serif);
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { scroll-behavior: auto !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.5 var(--serif); -webkit-font-smoothing: antialiased; }
.wrap { width: 100%; max-width: 78rem; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
:focus-visible, input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; }
.skip:focus { left: 1rem; z-index: 30; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { margin: 0 0 .7rem; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
main:focus { outline: none; }

/* ---------------------------------------------------------------- site navigation and footer */
.site-nav { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-nav .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.75rem; padding-top: .6rem; padding-bottom: .6rem; }
.brand { min-height: 44px; display: flex; align-items: center; font: 400 clamp(1.3rem, 1.6vw, 1.6rem)/1.1 "IM Fell English SC", Georgia, serif; letter-spacing: .03em; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.site-nav nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.4rem; }
.site-nav nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.125rem; letter-spacing: .02em; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav nav a:hover { color: var(--ink); }
.site-nav nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.site-nav nav a.nav-signin { min-height: 40px; padding: 0 1rem; border: 1px solid var(--accent); border-radius: 2px; color: var(--accent); }
.site-nav nav a.nav-signin:hover { background: var(--accent); color: var(--card); }
/* phones: the Sign in link moves up to the right end of the brand line, so the menu keeps one line */
@media (max-width: 640px) {
  .site-nav .wrap { position: relative; }
  .site-nav .brand { font-size: 1.05rem; padding-right: 5.5rem; }
  .site-nav nav a.nav-signin { position: absolute; top: .6rem; right: max(16px, env(safe-area-inset-right)); min-height: 38px; padding: 0 .75rem; font-size: 1rem; }
}
.site-nav .member { display: inline-flex; align-items: center; gap: .6rem; font-size: 1rem; color: var(--muted); }
.site-nav .member[hidden] { display: none; }
.site-nav .member button { min-height: 36px; padding: 0 .8rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: transparent; color: var(--ink-3); font: inherit; cursor: pointer; }
.site-nav .member button:hover { border-color: var(--accent); color: var(--accent); }
.site-foot { border-top: 1px solid var(--rule); background: var(--panel); padding: 1.75rem 0 2.75rem; color: var(--muted); font-size: 1rem; }
.foot + .site-foot { border-top: 1px solid var(--rule); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-bottom: .7rem; }
.site-foot nav a { color: var(--accent); text-decoration: none; font-size: 1.0625rem; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot p { margin: .35rem 0; }

/* ---------------------------------------------------------------- page headings */
.masthead { padding: clamp(28px, 4vw, 56px) 0 1.25rem; }
.masthead h1 { font: 400 clamp(2.75rem, 6.5vw, 4.75rem)/1 var(--display); margin: 0; letter-spacing: -0.01em; }
.masthead-sm { padding-bottom: 1.5rem; }
.masthead-sm h1 { font-size: clamp(2.5rem, 5.5vw, 3.75rem); }
.lede { font: 400 clamp(1.25rem, 1.6vw, 1.5rem)/1.4 var(--serif); color: var(--ink-3); max-width: 44ch; margin: .9rem 0 0; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.6rem; border: 1px solid var(--accent); border-radius: 2px;
  background: transparent; color: var(--accent); font: 400 1.1875rem/1.2 var(--serif); letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--card); color: var(--accent-dark); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--card); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--card); }
.btn:disabled, .btn-primary:disabled { opacity: .6; cursor: default; }
.btn-outline { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; background: transparent; border: 1px solid var(--accent); border-radius: 2px;
  color: var(--accent); font: 400 1.1875rem var(--serif); letter-spacing: .04em; cursor: pointer; }
.btn-outline:hover { background: var(--paper); }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.75rem 0 0; }

/* ---------------------------------------------------------------- book list controls */
.controls { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--rule); padding: .75rem 0; }
.controls label { display: block; font-size: 1rem; color: var(--muted); margin-bottom: .2rem; }
.search input { width: 100%; min-height: 48px; font: 400 1.125rem var(--serif); padding: .5rem .75rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--field); color: var(--ink); }
.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .75rem; margin-top: .6rem; }
.filters select { width: 100%; min-height: 40px; font: 400 1.0625rem var(--serif); padding: .3rem .5rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--field); color: var(--ink); }
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .6rem; }
#count { margin: 0; font-size: 1.0625rem; color: var(--muted); }
#count strong { color: var(--ink); font-weight: 600; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.actions button { font: 400 1rem var(--serif); padding: .3rem .8rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer; }
.actions button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 860px) { .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls { position: static; }
}

/* active filters */
.active { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: .65rem; padding: .45rem .6rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); background: var(--card); }
.active[hidden] { display: none; }
.active-h { font-size: 1rem; font-weight: 600; color: var(--ink); }
.chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: .4rem; font: 400 1rem/1.3 var(--serif); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 999px; padding: .15rem .35rem .15rem .7rem; cursor: pointer; }
.chip span { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; font-size: 1rem; line-height: 1; color: var(--muted); }
.chip:hover { border-color: var(--accent); } .chip:hover span { background: var(--panel); color: var(--ink); }
.chip-clear { margin-left: auto; font: 400 1rem var(--serif); color: var(--accent); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: .2rem; }
.filters .f.is-set label, .search.is-set label { color: var(--ink); font-weight: 600; }
.filters .f.is-set label::after, .search.is-set label::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .35rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.filters .f.is-set select, .search.is-set input { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ---------------------------------------------------------------- book list: layout with the period rail */
.layout { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 2rem; padding-top: 1.5rem; padding-bottom: 3rem; }
.rail { position: sticky; top: calc(var(--ctl-h, 12rem) + 1.25rem); align-self: start; max-height: calc(100vh - var(--ctl-h, 12rem) - 2rem); overflow: auto; }
.layout.no-rail { grid-template-columns: minmax(0, 1fr); }
.rail[hidden] { display: none; }
.rail a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .5rem; padding: .3rem 0; text-decoration: none; color: var(--ink); font-size: 1rem; }
.rail a:hover .rn { color: var(--accent); }
.rail .rc { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rail .rb { grid-column: 1 / -1; height: 3px; background: var(--accent); opacity: .55; }
.rail a.empty { color: var(--muted); opacity: .5; pointer-events: none; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } .rail { display: none; } }

/* groups */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.age { margin: 0 0 2.25rem; scroll-margin-top: calc(var(--ctl-h, 12rem) + 1rem); }
.age > summary { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--rule-strong); padding-bottom: .4rem; }
.age > summary h2 { font: 400 clamp(2.1rem, 5vw, 3.25rem)/1.05 var(--display); margin: 0; font-variant-numeric: lining-nums; }
.age > summary .meta { color: var(--muted); font-size: 1rem; }
.age > summary .tw, .author > summary .tw { margin-left: auto; color: var(--muted); font-size: .9375rem; }
.age:not([open]) > summary .tw::after, .author:not([open]) > summary .tw::after { content: "Show"; }
.age[open] > summary .tw::after, .author[open] > summary .tw::after { content: "Hide"; }

.author { border-bottom: 1px solid var(--rule-soft); }
.author > summary { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; padding: .85rem 0 .5rem; }
.author > summary h3 { font: 600 1.3125rem/1.3 var(--serif); margin: 0; }
.author > summary .life { font: 400 1.0625rem var(--serif); color: var(--muted); font-variant-numeric: oldstyle-nums; }
.author > summary:hover h3 { color: var(--accent); }
.author.anon > summary h3 { font-weight: 400; font-style: italic; }

/* books: year | title and details | five tools in fixed places */
.books { list-style: none; margin: 0 0 .9rem; padding: 0; }
.book { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .15rem; padding: .55rem 0; border-top: 1px solid transparent; }
.book + .book { border-top-color: var(--rule-soft); }
.book .yr { grid-column: 1; grid-row: 1; font: 400 1.0625rem/1.5 var(--serif); color: var(--muted); text-align: right; font-variant-numeric: oldstyle-nums; padding-top: .05rem; }
.book .yr .nodate { opacity: .6; font-style: italic; }
.book .tt { grid-column: 2; grid-row: 1; font: 400 1.1875rem/1.4 var(--serif); min-width: 0; }
.book .tt .sub { color: var(--muted); }
.book .by { font: 400 1.0625rem var(--serif); color: var(--muted); }
.book .det { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: 1rem; color: var(--muted); min-width: 0; }
.book .det .lv { color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 0 .35rem; }
.book .det .core { color: var(--accent); font-weight: 600; }
.book .tools { grid-column: 3; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(5, 3.75rem); gap: .2rem; align-self: start; }
.tool { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .25rem 0 .2rem; border: 1px solid transparent; border-radius: 2px;
  background: none; color: var(--accent); font: 400 .875rem/1.1 var(--serif); text-decoration: none; cursor: pointer; }
.tool svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
button.tool:hover, a.tool:hover, .tool[aria-expanded="true"] { background: var(--card); border-color: var(--rule); }
.tool.off { color: var(--muted); opacity: .38; cursor: default; }
@media (max-width: 640px) {
  .book { grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: .65rem; }
  .book .yr { font-size: .9375rem; }
  .book .tools { grid-column: 2; grid-row: 3; grid-template-columns: repeat(5, 3.3rem); margin-top: .15rem; }
}

/* list abbreviations with a tooltip on hover, keyboard focus or tap */
.book .det .ls { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.book .det .ls abbr { position: relative; text-decoration: none; font-size: .875rem; letter-spacing: .06em; color: var(--accent); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 0 .3rem; cursor: help; }
.book .det .ls abbr:hover, .book .det .ls abbr:focus-visible { border-color: var(--accent); }
.book .det .ls abbr::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 4; width: max-content; max-width: 16rem; white-space: normal; padding: .35rem .5rem; border-radius: 2px; background: var(--ink); color: var(--paper); font-size: .9375rem; letter-spacing: 0; line-height: 1.35; display: none; pointer-events: none; }
.book .det .ls abbr:hover::after, .book .det .ls abbr:focus::after { display: block; }

/* popover */
.pop { position: fixed; z-index: 20; width: min(24rem, calc(100vw - 16px)); max-height: min(60vh, 28rem); overflow: auto; padding: .8rem .95rem .85rem;
  background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 14px 30px -18px rgba(31, 26, 20, .55);
  font: 400 1.0625rem/1.5 var(--serif); }
.pop-h { margin: 0 1.6rem .4rem 0; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); display: flex; flex-direction: column; gap: .1rem; }
.pop-h span { font: italic 400 1.125rem/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.pop p { margin: 0; }
.pop ul { margin: 0; padding-left: 1.1rem; }
.pop ul.buy { list-style: none; padding: 0; display: grid; gap: .3rem; }
.pop ul.buy a { display: flex; flex-direction: column; padding: .45rem .6rem; border: 1px solid var(--rule); border-radius: 2px; text-decoration: none; color: var(--ink); font: 400 1rem/1.35 var(--serif); }
.pop ul.buy a strong { color: var(--accent); font-weight: 600; font-size: 1.0625rem; }
.pop ul.buy a:hover { border-color: var(--accent); background: var(--paper); }
.pop-f { margin-top: .6rem !important; font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.pop-x { position: absolute; top: .4rem; right: .45rem; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 2px; background: none; color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.pop-x:hover { background: var(--panel); color: var(--ink); }
.flat-head { font: 400 1.9rem var(--display); border-bottom: 1px solid var(--rule-strong); margin: 0 0 .5rem; padding-bottom: .3rem; }
.empty-state { padding: 3rem 0; font: 400 1.25rem var(--serif); color: var(--muted); }
.empty-state button { font: 400 1.0625rem var(--serif); margin-top: .75rem; padding: .45rem .9rem; border: 1px solid var(--accent); color: var(--accent); background: none; border-radius: 2px; cursor: pointer; }

/* recommendation */
.tool.rec-yes { color: var(--good); }
.tool.rec-no { color: var(--warn); }
.pop.pop-small { width: auto; max-width: min(18rem, calc(100vw - 16px)); padding: .5rem .75rem; }
.pop-rec { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.pop-rec.rec-yes { color: var(--good); }
.pop-rec.rec-no { color: var(--warn); }

/* notes under the book list */
.foot { border-top: 1px solid var(--rule); padding: 1.5rem 0 2.5rem; color: var(--muted); font-size: 1rem; }
.foot ul { padding-left: 1.1rem; }
.foot summary { cursor: pointer; color: var(--accent); }

/* ---------------------------------------------------------------- home page: title and membership panel */
.hero { padding-top: clamp(28px, 4.5vw, 72px); padding-bottom: clamp(48px, 6vw, 96px); }
.intro { max-width: 46rem; }
.intro h1 { margin: 0; font: 400 clamp(3.1rem, 7vw, 6.25rem)/.95 var(--display); letter-spacing: -0.01em; }
.h1-pre { display: block; margin-bottom: .12em; font-style: italic; font-size: .42em; line-height: 1.1; letter-spacing: .01em; color: var(--ink-3); }
.intro .lede { max-width: 40ch; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.25rem; margin: 2rem 0 0; max-width: 40rem; }
.stats div { border-top: 1px solid var(--rule-strong); padding-top: .5rem; }
.stats dt { font-size: .9375rem; line-height: 1.3; color: var(--muted); }
.stats dd { margin: .15rem 0 0; font: 400 2.25rem/1.05 var(--display); font-variant-numeric: lining-nums; }
@media (max-width: 600px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* membership panel with two tabs: join and sign in (same design as Natural Relations), beside "All the Books From the Great Lists" */
.account { background: var(--card); border: 1px solid var(--rule); box-shadow: 0 22px 44px -30px rgba(31, 26, 20, .5); scroll-margin-top: 16px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); }
.tabs[hidden] { display: none; }
.tabs button { min-height: 56px; padding: 10px 12px; background: var(--panel); border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  font: 400 1.125rem var(--serif); letter-spacing: .02em; cursor: pointer; }
.tabs button + button { border-left: 1px solid var(--rule); }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); border-bottom-color: var(--accent); margin-bottom: -1px; }
.panel { padding: 30px clamp(20px, 3vw, 34px) 34px; }
.panel[hidden] { display: none; }
.panel h2 { margin: 0; font: 400 clamp(2rem, 3vw, 2.5rem)/1.05 var(--display); }
.panel .intro-line { margin: 8px 0 24px; font-size: 1.0625rem; line-height: 1.45; color: var(--muted); }
.panel .signed-in p { margin: 0 0 1rem; }

.form { display: flex; flex-direction: column; gap: 18px; }
.form .field-label { display: block; margin-bottom: 6px; font-size: 1.0625rem; font-weight: 500; }
.form .optional { font-weight: 400; color: var(--faint); }
.form input[type="text"], .form input[type="email"], .form input[type="password"] { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1.125rem/1.4 var(--serif);
  color: var(--ink); background: var(--field); border: 1px solid var(--rule-strong); border-radius: 2px; }
.form .help { margin: 6px 0 0; font-size: .9375rem; line-height: 1.4; color: var(--faint); }
.terms-box { padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule-soft); }
.terms-box p { margin: 0 0 8px; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.terms-box ol { margin: 0; padding-left: 22px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 1.0625rem; line-height: 1.4; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.form button.btn-primary { min-height: 52px; border: 0; border-radius: 2px; background: var(--accent); color: var(--card); font: 400 1.1875rem var(--serif); letter-spacing: .04em; cursor: pointer; }
.form button.btn-primary:hover { background: var(--accent-dark); }
.status { margin: 0; padding: 12px 14px; font-size: 1rem; line-height: 1.45; color: var(--ink-2); background: var(--paper); border-left: 3px solid var(--accent); }
.status[hidden] { display: none; }
.status.err { border-left-color: var(--warn); color: var(--warn); }
.forgot { margin: -4px 0 0; font-size: 1rem; }
.switch { margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule-soft); }
.switch p { margin: 0 0 14px; font-size: 1.125rem; line-height: 1.45; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* the band under the hero (same design as the band under the hero on Natural Relations) */
.why { background: var(--panel); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.why .wrap { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 27rem); gap: 48px clamp(40px, 5vw, 96px); align-items: start; }
.why-text { min-width: 0; }
.why .side { max-width: 40rem; }
@media (max-width: 920px) {
  .why .wrap { grid-template-columns: minmax(0, 1fr); }
  .why .account { max-width: 36rem; width: 100%; }
}
.why h2 { margin: 0; font: 400 clamp(2.4rem, 4.4vw, 3.6rem)/1.04 var(--display); }
.why figure { margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid var(--rule-strong); }
.why blockquote { margin: 0; font: italic 400 1.7rem/1.3 var(--display); color: var(--ink-3); }
.why figcaption { margin-top: 12px; font-size: 1rem; line-height: 1.4; color: var(--muted); }
.why .body { margin-top: 36px; max-width: 62ch; font-size: clamp(1.1875rem, 1.2vw, 1.375rem); line-height: 1.62; color: var(--ink-2); }
.why .body p { margin: 0 0 22px; }

/* ---------------------------------------------------------------- bands, prose and cards (home, about, sources, legal) */
.band { padding: clamp(40px, 6vw, 72px) 0; }
.band-alt { background: var(--panel); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band h2, .prose h2 { font: 400 clamp(1.9rem, 3.5vw, 2.6rem)/1.08 var(--display); margin: 0 0 .9rem; }
.prose { font: 400 1.1875rem/1.62 var(--serif); color: var(--ink-2); }
.prose > * { max-width: 46rem; }
.prose h2 { margin-top: 2.25rem; color: var(--ink); } .prose > h2:first-child { margin-top: 0; }
.prose p, .prose li { margin: 0 0 .9rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; }
.card { background: var(--card); border: 1px solid var(--rule); box-shadow: 0 14px 30px -24px rgba(31, 26, 20, .45); padding: 1.3rem 1.4rem 1.4rem; }
.card h3 { font: 400 1.6rem/1.1 var(--display); margin: 0 0 .5rem; }
.card p { margin: 0; font: 400 1.0625rem/1.55 var(--serif); color: var(--ink-3); }
.placeholder { padding: 1rem 1.2rem; border: 1px dashed var(--rule-strong); color: var(--muted); font-style: italic; }
.note { font-size: 1rem; color: var(--muted); }
main > .wrap { padding-bottom: 1rem; }

/* ---------------------------------------------------------------- sources page */
.table-wrap { overflow-x: auto; margin: 0 0 .5rem; border: 1px solid var(--rule); background: var(--card); }
table.sources { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
table.sources th, table.sources td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
table.sources thead th { font-size: .9375rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--panel); }
table.sources tbody tr:last-child > * { border-bottom: 0; }
table.sources th[scope=row] abbr { text-decoration: none; font-size: .9375rem; letter-spacing: .06em; color: var(--accent); }
table.sources cite { font: italic 400 1.125rem var(--serif); }
table.sources .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { table.sources th:nth-child(3), table.sources td:nth-child(3) { display: none; } }

/* ---------------------------------------------------------------- contact form */
.contact { max-width: 40rem; padding: .5rem 0 1rem; }
.reset-box { max-width: 28rem; padding: .5rem 0 2.5rem; }
.form[hidden], .btn[hidden] { display: none; }
.reset-done .status { margin-bottom: 1rem; }
.contact fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.contact legend, .contact .field > label { font-size: 1.0625rem; font-weight: 500; margin-bottom: .4rem; display: block; }
.topic label { display: flex; align-items: center; gap: .6rem; min-height: 40px; font-size: 1.125rem; }
.topic input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.field { margin: 0 0 1rem; }
.field input, .field textarea { width: 100%; min-height: 48px; font: 400 1.125rem var(--serif); padding: .55rem .75rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--field); color: var(--ink); }
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.opt { font-weight: 400; color: var(--faint); }
.hint { margin: .3rem 0 0; font-size: .9375rem; color: var(--faint); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.form-status { min-height: 1.4em; font-size: 1.0625rem; }
.form-status.ok { color: var(--good); } .form-status.err { color: var(--warn); }

/* ---------------------------------------------------------------- home page: the moving library behind the title */
.stage { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(100svh, 62rem); padding-top: 4.5rem;
  background: #120c08; color: #f1e7d3; }
.stage-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.stage-poster, .stage-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.stage-video { opacity: 0; transition: opacity 1.4s ease; }
.stage.is-live .stage-video { opacity: 1; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 9, 6, 0.74) 0%, rgba(14, 9, 6, 0.5) 32%, rgba(14, 9, 6, 0.24) 50%, rgba(14, 9, 6, 0) 64%, rgba(14, 9, 6, 0) 100%),
    linear-gradient(180deg, rgba(14, 9, 6, 0.5) 0%, rgba(14, 9, 6, 0) 14%, rgba(14, 9, 6, 0) 55%, rgba(14, 9, 6, 0.72) 100%); }
.stage .hero { width: 100%; align-items: center; }
.stage .intro h1 { color: #f6eedd; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5); }
.stage .h1-pre { color: #e4d5b6; }
.stage .lede { color: #ece1cb; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.stage .stats div { border-top-color: rgba(241, 231, 211, 0.35); }
.stage .stats dt { color: #ddd0b5; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.stage .stats dd { color: #f6eedd; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.btn-light { border-color: rgba(246, 238, 221, 0.75); color: #f6eedd; background: rgba(20, 13, 9, 0.3); }
.btn-light:hover { border-color: #fff; color: #fff; background: rgba(246, 238, 221, 0.12); }
.site-nav.over { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: transparent; border-bottom-color: rgba(241, 231, 211, 0.18); }
.site-nav.over .brand, .site-nav.over .brand:hover { color: #f1e7d3; }
.site-nav.over nav a { color: rgba(241, 231, 211, 0.8); }
.site-nav.over nav a:hover { color: #fff; }
.site-nav.over nav a.nav-signin { border-color: rgba(241, 231, 211, 0.6); color: #f6eedd; }
.site-nav.over nav a.nav-signin:hover { background: rgba(241, 231, 211, 0.14); border-color: #f6eedd; color: #fff; }
.stage .intro :focus-visible, .site-nav.over :focus-visible { outline-color: #f6eedd; }
@media (max-width: 920px) {
  /* phones and tablets: the picture fills the first screen, and the membership panel rises from the paper below it */
  .stage { display: block; padding-top: 6.5rem; background: var(--paper); }
  .stage-media, .stage::before { bottom: auto; height: min(100svh, 46rem); }
  .stage::before { background: linear-gradient(180deg, rgba(14, 9, 6, 0.72) 0%, rgba(14, 9, 6, 0.42) 30%, rgba(14, 9, 6, 0.55) 72%, rgba(243, 237, 225, 0) 100%); }
  .stage-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(243, 237, 225, 0), var(--paper)); }
  .stage .hero { padding-bottom: 3rem; }
}

/* network line in the footer (Joseph, 10 Nov 2026) */
.site-foot .network { padding-top: .6rem; border-top: 1px solid var(--rule); }
.site-foot .network strong { color: var(--ink); font-weight: 600; }
.site-foot .network a { color: var(--accent); text-decoration: none; }
.site-foot .network a:hover { text-decoration: underline; }