/* Social Europe eBooks — reader v2. Design language of socialeurope.eu: quiet paper, black system type, one red. */

/* ---------- tokens (light) */
:root {
  --bg: #ffffff; --ink: #191919; --ink-body: #191919; --muted: #767676; --tint: #faf6f4; --info: #eff7fb;
  --hair: #d9d4d1; --highlight: #fbefef; --red: #d0253c; --red-hover: #b31f34; --red-active: #9c1b2d; --cover-dim: 1;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shell: 1200px;
  /* reader preferences (set by the inline head script / Aa panel) */
  --rs-base: 1.1875rem; --rs-size: 0px; --rs-lh: 1.85; --rs-width: 680px; --rs-ws: normal; --rs-ls: normal; --rs-font-family: var(--font);
  color-scheme: light;
}
:root[data-se-theme="dark"] { --bg: #191919; --ink: #f4f1ef; --ink-body: #dedad6; --muted: #a39c98; --tint: #262120; --info: #1c2428; --hair: #3a3532; --highlight: #3b2326; --red: #e5495c; --red-hover: #d0253c; --red-active: #b31f34; --cover-dim: 0.85; color-scheme: dark; }
:root[data-se-theme="sepia"] { --bg: #f6efe4; --ink: #2a241f; --ink-body: #2a241f; --muted: #7a6f66; --tint: #ede4d5; --info: #e6e9e1; --hair: #d6cbbb; --highlight: #f0dbd5; --red: #d0253c; --red-hover: #b31f34; --red-active: #9c1b2d; --cover-dim: 1; color-scheme: light; }
:root[data-se-theme="contrast"] { --bg: #000000; --ink: #ffffff; --ink-body: #ffffff; --muted: #cfcfcf; --tint: #141414; --info: #0f171c; --hair: #6a6a6a; --highlight: #3a0f16; --red: #ff5c6e; --red-hover: #ff8291; --red-active: #e5495c; --cover-dim: 0.9; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root[data-se-theme="auto"], :root:not([data-se-theme]) { --bg: #191919; --ink: #f4f1ef; --ink-body: #dedad6; --muted: #a39c98; --tint: #262120; --info: #1c2428; --hair: #3a3532; --highlight: #3b2326; --red: #e5495c; --red-hover: #d0253c; --red-active: #b31f34; --cover-dim: 0.85; color-scheme: dark; }
}
:root[data-se-font="serif"] { --rs-font-family: Georgia, "Times New Roman", Times, serif; }
:root[data-se-font="dyslexic"] { --rs-font-family: "OpenDyslexic", "Comic Sans MS", sans-serif; }
@media (max-width: 719.98px) { :root { --rs-base: 1.0625rem; } }

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.1875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
img, svg { max-width: 100%; height: auto; display: block; }
/* socialeurope.eu sets `a { color: var(--contrast-3) }` and
   `a:hover, a:focus, a:active { color: var(--accent) }`, and both variables hold
   the same #d0253c: a red link there is red, and stays red under the cursor, on
   focus and while it is being clicked. Ours used to darken to --red-hover, which
   is why the same footer read differently on the two sites. A link that is dark
   to begin with still turns red on hover — that is their pattern too, and it is
   the only place the colour is meant to move. */
a { color: var(--red); text-decoration: none; transition: color 120ms ease; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
input:focus { outline: none; border-color: var(--ink) !important; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
input:focus-visible { outline: none; }
/* A chapter swapped in during fullscreen moves focus to its heading so screen
   readers announce the new chapter. The heading is not a control, so it must
   not draw a focus ring. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
[hidden] { display: none !important; }

/* ---------- type helpers */
.eyebrow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.eyebrow--red { color: var(--red); }
.eyebrow--large { font-size: 0.9375rem; }
.eyebrow--link { color: var(--red); }
.hint { font-size: 0.9375rem; color: var(--muted); line-height: 1.5; }

/* ---------- buttons */
.btn { display: inline-block; font-size: 1rem; font-weight: 600; line-height: 1.2; padding: 14px 32px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; text-align: center; text-decoration: none; background: transparent; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
.btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); color: #fff; }
.btn--primary:active { background: var(--red-active); border-color: var(--red-active); }
.btn--secondary { border-color: var(--ink); color: var(--ink); padding: 13px 24px; }
.btn--secondary:hover { border-color: var(--red); color: var(--red); }
.btn--danger { border-color: var(--hair); color: var(--muted); }
.btn--danger:hover { border-color: var(--red); color: var(--red); }
.btn--block { display: block; width: 100%; }
.btn--small { font-size: 0.875rem; padding: 9px 16px; }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* rectangular icon buttons (reader bar) */
.rbtn { width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; text-decoration: none; transition: border-color 120ms ease, color 120ms ease; }
.rbtn:hover { border-color: var(--red); color: var(--red); }
.rbtn.is-on { border-color: var(--red); color: var(--red); }
.rbtn--aa { width: auto; min-width: 40px; padding: 0 10px; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
/* legacy round buttons (editor chrome) */
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); background: var(--bg); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; }
.round-btn:hover { border-color: var(--red); color: var(--red); }

/* ---------- brand
   The wordmark is live text, exactly what socialeurope.eu writes: 700 weight at
   --wordmark-h on a 1.2 line, in SE red, in the site font stack. It used to be a
   433x69 PNG, and no amount of care made a raster match live text — at 34px it
   came out 213.4px wide against their 215.7, and its glyphs sat on a different
   baseline, so the mark shifted on every crossing between the two sites. Three
   workarounds went with it: a measured 23.2% lift on the label, a 3.5px nudge on
   the masthead lockup, and a hand-derived intrinsic width. The mark now also
   follows the reader's zoom and pixel density, which an image never did. */
.brand { --wordmark-h: 22px; display: inline-flex; align-items: baseline; gap: 6px; color: var(--red); white-space: nowrap; flex: 0 0 auto;
  /* The main site's own stack, not ours. They differ only in the third choice
     (their Helvetica, our Roboto), which no reader on Apple or Windows will
     ever reach — but a wordmark belongs to the brand rather than to this app,
     and the label beside it takes the same stack so the lockup cannot split. */
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; }
.brand__mark { font-size: var(--wordmark-h); font-weight: 700; line-height: 1.2; }
.brand__label { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
/* The generic a:hover would otherwise recolour the lockup on the way past. */
.brand:hover, .brand:focus-visible { color: var(--red); }
/* Their masthead wordmark is 34px on a 40.8px line box, centred in the 100px
   bar; ours is the same box, so the glyphs land on the same pixels. */
.brand--mast { --wordmark-h: 34px; gap: 10px; }
.brand--mast .brand__label { font-size: 1.8125rem; }

/* ---------- masthead (library) */
.masthead { background: var(--tint); }
.masthead__inner { max-width: var(--shell); margin: 0 auto; padding: 20px 40px; min-height: 100px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 0; }
.masthead__actions { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; }
.masthead__nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 0; font-size: 1rem; font-weight: 500; text-transform: uppercase; }
.masthead__nav a { padding: 0 20px; }
/* No hover colour, deliberately: their search glyph is a menu-bar item that
   hovers to --contrast-3, which is the red it already is. */
.masthead__search-btn { display: grid; place-items: center; width: 56px; padding: 0; border: 0; background: transparent; color: var(--red); cursor: pointer; }
/* Their glass is a filled glyph at 16px; ours is a stroked outline, which reads
   lighter and therefore smaller at the same size. 18px with a heavier stroke
   matches the ink. The icon stays centred in the 56px box and the box does not
   move, so the menu beside it is unaffected; the 2px lift is theirs — their icon
   sits that far above the box centre at every width. */
.masthead__search-btn svg { width: 18px; height: 18px; stroke-width: 2.4; transform: translateY(-2px); }
.masthead__search { max-width: var(--shell); margin: 0 auto; padding: 0 40px 20px; display: flex; gap: 12px; }
.masthead__search-input { flex: 1 1 auto; min-width: 0; font: inherit; padding: 12px 16px; border: 1px solid var(--hair); border-radius: 4px; background: var(--bg); color: var(--ink); }
.masthead__search-go { font: inherit; font-weight: 500; padding: 12px 22px; border: 0; border-radius: 4px; background: var(--red); color: #fff; cursor: pointer; }
/* The main site does not mark the page you are on: on its Advertisements page
   that item is the same red as the other three. eBooks is one of their menu
   items and has to behave like one, so the current item keeps aria-current for
   a screen reader and no colour of its own for anyone else. */
.masthead__menu-btn { display: none; width: 44px; height: 44px; border: 0; background: rgba(0, 0, 0, 0.02); color: var(--red); cursor: pointer; place-items: center; padding: 0; margin-right: -8px; }
/* Their bars glyph is filled and 16px across, spanning 14.5x10 of ink at 1.5px
   a bar; ours is a stroked 24-unit outline, so 22px at 1.7 lands on the same
   ink. Same reasoning as the search glass above, measured the same way. */
.masthead__menu-btn svg { width: 22px; height: 22px; stroke-width: 1.7; }

/* ---------- mobile menu
   socialeurope.eu slides a red panel in from the left over a dark scrim: 265px
   wide, full height, items 60px tall in white 700 uppercase, and a white cross
   in the panel's top right. Ours used to be a list dropped under the header —
   the same four links, a different gesture, on a site a reader is meant to
   experience as one. The panel is fixed, so it is the header's sibling in the
   markup but nobody's child on screen. */
.masthead__scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); opacity: 0; z-index: 100000; transition: opacity 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }
.masthead__scrim.is-open { opacity: 1; }
.masthead__menu { position: fixed; top: 0; left: 0; width: 265px; height: 100%; overflow-y: auto; z-index: 100001; display: flex; flex-direction: column; background: var(--red); font-size: 1rem; font-weight: 700; text-transform: uppercase; transform: translateX(-100%); transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }
.masthead__menu.is-open { transform: translateX(0); }
.masthead__menu a { height: 60px; line-height: 60px; padding: 0 20px; color: #ffffff; }
.masthead__menu a:hover, .masthead__menu a:focus-visible, .masthead__menu a.is-current { color: #ffffff; }
.masthead__menu-close { position: absolute; top: 0; right: 0; width: 40px; height: 50px; display: grid; place-items: center; padding: 10px; border: 0; background: transparent; color: #ffffff; cursor: pointer; }
.masthead__menu-close svg { width: 20px; height: 20px; }
/* While the panel is open the page behind it must not scroll under the scrim. */
body.has-menu-open { overflow: hidden; }
/* A phone rotated to a desktop width would otherwise keep the panel on screen. */
@media (min-width: 900.01px) { .masthead__menu, .masthead__scrim { display: none; } }

/* ---------- library */
.library__main { max-width: var(--shell); width: 100%; margin: 0 auto; padding: 72px 48px 96px; display: flex; flex-direction: column; gap: 64px; }
.lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px 48px; align-items: end; padding-bottom: 40px; border-bottom: 1px solid var(--hair); }
.lead h1 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.05; letter-spacing: -0.01em; }
.lead__side { display: flex; flex-direction: column; gap: 20px; }
.lead p { font-size: 1.1875rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.lib-search { display: flex; gap: 12px; }
.lib-search input { flex: 1; min-width: 0; font-size: 1rem; padding: 12px 16px; border: 1px solid var(--hair); border-radius: 2px; background: var(--bg); color: var(--ink); }

.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 56px 40px; }
.book-tile { position: relative; display: flex; flex-direction: column; gap: 12px; }
.book-tile__link { display: flex; flex-direction: column; gap: 18px; color: var(--ink); }
.book-tile__text { display: flex; flex-direction: column; gap: 6px; }
.book-tile__link:hover h2 { color: var(--red); }
.book-tile h2 { font-size: 1.25rem; line-height: 1.3; transition: color 120ms ease; }
.book-tile__authors { font-size: 1rem; line-height: 1.5; color: var(--muted); }
/* The year a book was published belongs with its author, but on a tile the
   author can run to four lines, so it gets one of its own rather than trailing
   off the end of the last of them. */
.book-tile__year { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.book-tile__continue { font-size: 0.875rem; font-weight: 600; color: var(--red); }
.book-tile--draft .cover { opacity: 0.7; }

.cover { aspect-ratio: 2 / 3; background: var(--tint); overflow: hidden; position: relative; }
.cover img { width: 100%; height: 100%; object-fit: cover; opacity: var(--cover-dim); }
.cover__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, 0.15); }
.cover__progress > span { display: block; height: 100%; width: 0; background: var(--red); }
.cover-tpl { width: 100%; height: 100%; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; background: var(--tint); color: var(--ink); }
.cover-tpl__eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.cover-tpl__text { display: flex; flex-direction: column; gap: 8px; }
.cover-tpl__title { font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-wrap: pretty; }
.cover-tpl__author { font-size: 0.75rem; line-height: 1.4; color: var(--red); }
.cover--small { max-width: 160px; }

/* ---------- newsletter */
.newsletter { background: var(--tint); padding: 40px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.newsletter__text { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.newsletter__text h3 { font-size: 1.625rem; line-height: 1.25; }
.newsletter__text p { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }
.newsletter__form { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; max-width: 520px; }
.newsletter__row { display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter__row input { flex: 1 1 200px; font-size: 1rem; padding: 12px 16px; border: 1px solid var(--hair); border-radius: 2px; background: var(--bg); color: var(--ink); }
.newsletter__consent { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--muted); }
.newsletter__consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); flex-shrink: 0; }

/* ---------- footer */
.site-footer { background: var(--tint); margin-top: auto; }
.site-footer__inner { max-width: var(--shell); margin: 0 auto; padding: 60px 40px 60px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; font-size: 1.1875rem; line-height: 1.7; }
.site-footer__inner nav, .site-footer__inner div { display: flex; flex-direction: column; gap: 30px; padding-left: 40px; }
.site-footer__inner span { color: var(--ink); }
.site-footer__bar { background: #191919; color: #ffffff; text-align: center; padding: 20px; font-size: 0.9375rem; line-height: 1.7; }

/* ---------- reader bar */
.rbar { position: sticky; top: 0; z-index: 5; background: var(--tint); transition: transform 160ms ease; }
.rbar.is-hidden { transform: translateY(-100%); }
.rbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 20px; gap: 12px; }
.rbar__left, .rbar__right { display: flex; gap: 8px; }
.rbar__right { justify-content: flex-end; }
.rbar__center { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; min-width: 0; justify-content: center; overflow: hidden; }
.rbar__crumb { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.rbar__sep { color: var(--muted); }
.rbar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.rbar__meta { color: var(--muted); white-space: nowrap; }
.rbar__progress { height: 2px; background: var(--hair); }
.rbar__progress > span { display: block; height: 100%; background: var(--red); }
.exit-fullscreen { position: fixed; top: 16px; right: 16px; z-index: 6; opacity: 0.7; background: var(--bg); }
.exit-fullscreen:hover { opacity: 1; }
html.is-fullscreen .rbar, html.is-fullscreen .bbar, html.is-fullscreen .adminbar, html.is-fullscreen .edit-link { display: none !important; }
html.is-fullscreen .exit-fullscreen { display: grid !important; }

/* Aa panel */
.aa { position: absolute; right: 20px; top: 100%; width: 320px; max-width: 100%; background: var(--tint); padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 18px; z-index: 6; max-height: calc(100vh - 90px); overflow: auto; }
.aa__group { display: flex; flex-direction: column; gap: 8px; }
.aa__label { display: flex; justify-content: space-between; gap: 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.aa__hint { font-weight: 500; letter-spacing: 0; text-transform: none; }
.aa__options { display: flex; gap: 4px 16px; flex-wrap: wrap; }
.aa__opt { border: 0; background: transparent; padding: 4px 0; cursor: pointer; font-size: 1rem; font-weight: 400; color: var(--ink); }
.aa__opt:hover { color: var(--red); }
.aa__opt.is-on { color: var(--red); font-weight: 700; }
.aa__opt--serif { font-family: Georgia, "Times New Roman", serif; }
.aa__opt--dyslexic { font-family: "OpenDyslexic", sans-serif; font-size: 0.8125rem; }
.aa__note { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--hair); padding-top: 14px; }

/* mobile bottom bar */
.bbar { display: none; }

/* ---------- book page */
.se-book { max-width: var(--shell); width: 100%; margin: 0 auto; padding: 32px 48px 96px; display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 64px; align-items: start; }
.se-book__aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 24px; }
.se-book__actions { display: flex; flex-direction: column; gap: 10px; }
.infobox { background: var(--info); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.infobox p { font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.infobox .eyebrow { font-size: 0.8125rem; }
.infobox--edit { background: var(--tint); }
.se-book__content { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.se-book__head { display: flex; flex-direction: column; gap: 16px; }
.se-book__head h1 { font-size: clamp(2.125rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: pretty; }
.se-book__subtitle { font-size: 1.5rem; line-height: 1.4; }
/* Author and year are one block: the head's 16px rhythm would set the year
   adrift from the name it belongs to. */
.se-book__byline { display: flex; flex-direction: column; gap: 4px; }
.se-book__authors { font-size: 1.125rem; line-height: 1.5; color: var(--red); }
.se-book__year { font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }
.contents { display: flex; flex-direction: column; gap: 12px; }
.contents__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.contents__count { font-size: 0.875rem; color: var(--muted); }
.toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.toc__row { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; font-size: 1.1875rem; line-height: 1.35; border-bottom: 1px solid var(--hair); }
.toc__row a { color: var(--ink); flex: 1; min-width: 0; text-wrap: pretty; }
.toc__row a:hover { color: var(--red); }
.toc__row--section { padding: 36px 0 14px; font-weight: 700; font-size: 1.25rem; }
.toc__eyebrow { color: var(--red); }
.toc__row.is-current > a { color: var(--red); }
.toc__badge { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); white-space: nowrap; }

/* ---------- chapter */
.chapter .reading { max-width: calc(var(--rs-width) + 64px); margin: 0 auto; padding: 48px 32px 120px; display: flex; flex-direction: column; gap: 32px; font-family: var(--rs-font-family); }
.meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; font-family: var(--font); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.meta__part { color: var(--red); }
.chapter h1 { font-size: clamp(2rem, 4.5vw, 3.375rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: pretty; }
.byline { font-size: 1.125rem; line-height: 1.5; color: var(--red); }
.dek { font-size: calc(var(--rs-base) + var(--rs-size) + 3px); font-weight: 700; line-height: 1.45; text-wrap: pretty; margin-top: 8px; }
.chapter-body { display: flex; flex-direction: column; gap: calc((var(--rs-base) + var(--rs-size)) * 1.4); font-size: calc(var(--rs-base) + var(--rs-size)); line-height: var(--rs-lh); color: var(--ink-body); word-spacing: var(--rs-ws); letter-spacing: var(--rs-ls); }
.chapter-body > * { margin: 0; }
.chapter-body h1 { font-size: calc(var(--rs-base) + var(--rs-size) + 11px); line-height: 1.2; margin-top: 16px; }
.chapter-body h2 { font-size: calc(var(--rs-base) + var(--rs-size) + 9px); line-height: 1.25; margin-top: 16px; }
.chapter-body h3 { font-size: calc(var(--rs-base) + var(--rs-size) + 4px); line-height: 1.3; margin-top: 8px; }
.chapter-body h4 { font-size: calc(var(--rs-base) + var(--rs-size) + 1px); line-height: 1.35; }
.chapter-body ul, .chapter-body ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 0.5em; }
.chapter-body li > p { margin: 0; }
.chapter-body blockquote { margin: 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--hair); color: var(--muted); }
.chapter-body img { margin: 0 auto; }
.chapter-body a.lightbox { display: block; cursor: zoom-in; }
.chapter-body pre { background: var(--tint); padding: 20px; overflow-x: auto; font-family: var(--mono); font-size: 0.9375rem; line-height: 1.5; }
.chapter-body code { font-family: var(--mono); font-size: 0.9em; }
.chapter-body table { border-collapse: collapse; width: 100%; font-size: 0.85em; line-height: 1.45; display: block; overflow-x: auto; }
.chapter-body th, .chapter-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.chapter-body th { font-weight: 700; }
.chapter-body hr { border: 0; border-top: 1px solid var(--hair); }
.chapter-body mark { background: var(--highlight); color: var(--red); font-weight: 600; }
.chapter-body sup { line-height: 0; font-size: 0.7em; }
.chapter-body figure { margin: 0; display: flex; flex-direction: column; }
.chapter-body figure img { width: 100%; }
.chapter-body figcaption { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); margin-top: 10px; font-family: var(--font); letter-spacing: normal; word-spacing: normal; }
.chapter-body figcaption strong, .chapter-body figcaption b { color: var(--ink); font-weight: 700; }
.chapter-body figcaption .source { display: block; margin-top: 2px; }
.chapter-body iframe, .chapter-body video { max-width: 100%; }
/* footnotes */
.fn-ref { border: 0; background: transparent; color: var(--red); cursor: pointer; padding: 0 2px; font-size: 0.7em; vertical-align: super; line-height: 0; font-weight: 700; font-family: inherit; }
.fn-ref[aria-expanded="true"] { color: var(--red-hover); }
.fn-note { background: var(--tint); padding: 16px 20px; display: flex; gap: 16px; align-items: flex-start; font-family: var(--font); font-size: 0.9375rem; line-height: 1.55; letter-spacing: normal; word-spacing: normal; color: var(--ink); }
.fn-note__num { color: var(--red); font-weight: 700; flex-shrink: 0; }
.fn-note__text { flex: 1; }
.fn-note__close { border: 0; background: transparent; color: var(--red); cursor: pointer; font-size: 0.875rem; font-weight: 600; padding: 0; }

.leafnav { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-family: var(--font); letter-spacing: normal; word-spacing: normal; }
.leafnav a { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.leafnav a:hover { color: var(--red); }
.leafnav__next { text-align: right; }
.leafnav .eyebrow { font-size: 0.8125rem; }
.leafnav__title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }

/* ---------- part divider */
.part { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.part__inner { max-width: calc(var(--rs-width) + 64px); width: 100%; margin: 0 auto; padding: 48px 32px 120px; display: flex; flex-direction: column; gap: 28px; }
.part h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: pretty; }
.part__summary { font-size: 1.1875rem; line-height: 1.6; color: var(--muted); }
.part__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.part__list li { border-bottom: 1px solid var(--hair); }
.part__list a { display: flex; gap: 20px; align-items: baseline; padding: 16px 0; color: var(--ink); font-size: 1.1875rem; line-height: 1.35; text-wrap: pretty; }
.part__list a:hover { color: var(--red); }
.part__num { color: var(--red); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; flex-shrink: 0; min-width: 2ch; }
.part__title { flex: 1; }

/* ---------- picture page */
.picture-page { max-width: 960px; width: 100%; margin: 0 auto; padding: 48px 32px 120px; display: flex; flex-direction: column; gap: 24px; }
.picture-page h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.picture-page figure { margin: 0; }
.picture-page figcaption { font-size: 1rem; color: var(--muted); margin-top: 12px; }

/* ---------- search */
.search-page { max-width: 760px; width: 100%; margin: 0 auto; padding: 48px 32px 120px; display: flex; flex-direction: column; gap: 40px; }
.search-form { display: flex; gap: 12px; }
.search-form input { flex: 1; font-size: 1.375rem; padding: 16px 20px; border: 1px solid var(--hair); border-radius: 2px; background: var(--bg); color: var(--ink); min-width: 0; }
.search-form .btn { padding: 0 28px; }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.results li { padding: 24px 0; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; }
.results li .eyebrow { font-size: 0.8125rem; }
.results li > a, .results__body > a { font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.results li > a:hover, .results__body > a:hover { color: var(--red); }
.results p { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }
.results mark, .search-hit { background: var(--highlight); color: var(--red); font-weight: 600; }
.results--library li { flex-direction: row; gap: 20px; align-items: flex-start; }
.results__cover { width: 56px; flex-shrink: 0; aspect-ratio: 2 / 3; background: var(--tint); overflow: hidden; }
.results__cover img { width: 100%; height: 100%; object-fit: cover; opacity: var(--cover-dim); }
.results__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ---------- lightbox overlay (its own class: "a.lightbox" marks the image links) */
.lightbox-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(25, 25, 25, 0.92); display: grid; place-items: center; padding: 32px; }
.lightbox-overlay img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox-overlay__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 4px; border: 1px solid #fff; background: transparent; color: #fff; font-size: 1.625rem; cursor: pointer; }

/* ---------- login / forms / errors */
.login-page, .form-page, .error-page { max-width: 520px; width: 100%; margin: 0 auto; padding: 72px 32px 120px; display: flex; flex-direction: column; gap: 28px; }
.form-page--wide { max-width: 760px; }
.login-page h1, .form-page h1, .error-page h1 { font-size: 2.125rem; }
.form-page h2 { font-size: 1.375rem; margin-top: 24px; }
.login-form, .stack { display: flex; flex-direction: column; gap: 18px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; font-weight: 600; color: var(--muted); }
label input, label textarea { font-size: 1.0625rem; font-weight: 400; color: var(--ink); padding: 12px 14px; border: 1px solid var(--hair); border-radius: 2px; background: var(--bg); }
label textarea:focus { outline: none; border-color: var(--ink); }
label.check { flex-direction: row; align-items: center; gap: 10px; font-size: 1rem; color: var(--ink); font-weight: 400; }
label.check input { width: 20px; height: 20px; accent-color: var(--red); }
.form-error { color: var(--red); font-size: 1rem; }
.form-ok { color: var(--muted); font-size: 1rem; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.danger-zone { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair); }
.people { list-style: none; padding: 0; margin: 0; font-size: 1rem; color: var(--muted); }
.history { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.error-page p { font-size: 1.1875rem; color: var(--muted); }
.error-page .btn { align-self: flex-start; }
.wordmark img { height: 30px; width: auto; }

/* ---------- editing chrome (signed-in only) */
.adminbar { position: fixed; bottom: 16px; right: 16px; z-index: 40; display: flex; gap: 6px; align-items: center; background: #191919; color: #fff; padding: 8px 10px; border-radius: 4px; font-size: 0.875rem; font-weight: 600; }
.adminbar a, .adminbar button { color: #fff; background: transparent; border: 0; padding: 6px 10px; cursor: pointer; font-weight: 600; font-size: 0.875rem; border-radius: 3px; }
.adminbar a:hover, .adminbar button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.adminbar__toggle { border: 1px solid rgba(255, 255, 255, 0.4) !important; }
.adminbar__toggle.is-on { background: #d0253c !important; border-color: #d0253c !important; }
body.signed-in { padding-bottom: 80px; }
.edit-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.edit-tools__hint { font-size: 0.9375rem; color: var(--muted); }
.edit-tools--add { margin-top: 24px; }
.edit-link { display: block; text-align: center; padding: 24px; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tile-tools { display: flex; gap: 6px; align-items: center; }
.tile-tools__btn, .row-tools__btn { font-size: 0.8125rem; font-weight: 600; padding: 6px 10px; border: 1px solid var(--hair); border-radius: 3px; background: var(--bg); color: var(--ink); cursor: pointer; line-height: 1; }
.tile-tools__btn:hover, .row-tools__btn:hover { border-color: var(--red); color: var(--red); }
.tile-tools__btn[disabled], .row-tools__btn[disabled] { opacity: 0.4; cursor: default; }
.row-tools__btn--danger:hover { background: var(--red); color: #fff; }
.badge { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.row-tools { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.row-tools form { display: contents; }
.trash { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.trash ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trash li { display: flex; gap: 8px; align-items: center; font-size: 1rem; color: var(--muted); }
.trash__title { flex: 1; }
.trash form { display: contents; }

/* ---------- responsive */
@media (max-width: 1039.98px) {
  .rbar__title { display: none; }
}
/* Their footer type steps up below 1024: 20px on a 34px line, which with the
   same 30px gap makes the 64px step their columns are built on. */
@media (max-width: 1024px) {
  .site-footer__inner { font-size: 1.25rem; }
}
@media (max-width: 900px) {
  .masthead__nav a { display: none; }
  .masthead__menu-btn { display: grid; }
  .masthead__search-btn, .masthead__menu-btn { width: 56px; height: 60px; }
  .masthead__menu-btn { margin-right: 0; }
  /* Their logo line is 40px and the buttons sit directly beneath it, no gap. */
  .masthead__inner { row-gap: 0; }
}
@media (max-width: 768px) {
  .masthead__inner { padding: 20px 25px; }
  .masthead__search { padding: 0 25px 20px; }
  .site-footer__inner { padding: 60px 25px; grid-template-columns: 1fr; gap: 40px; }
  .site-footer__inner nav, .site-footer__inner div { padding-left: 0; }
  .site-footer__bar { padding: 20px 10px; }
}
@media (max-width: 719.98px) {
  .library__main { padding: 40px 20px 64px; gap: 40px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 40px 24px; }
  .newsletter { padding: 24px; }
  .rbar__inner { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px; gap: 8px; }
  .rbar__crumb { display: none; }
  .rbar .brand { --wordmark-h: 15px; }
  .rbar .brand__label { font-size: 0.875rem; }
  .rbtn--fullscreen { display: none; }
  .aa { left: 12px; right: 12px; width: auto; }
  .se-book { grid-template-columns: 1fr; gap: 40px; padding: 24px 20px 64px; }
  .se-book__aside { position: static; max-width: 240px; }
  .se-book__content { gap: 40px; }
  .chapter .reading, .part__inner { padding: 32px 20px 96px; }
  .chapter-body { hyphens: auto; }
  .search-page, .picture-page { padding: 32px 20px 96px; }
  .leafnav { grid-template-columns: 1fr; }
  .leafnav__next { text-align: left; }
  .bbar { display: grid; position: sticky; bottom: 0; z-index: 5; background: var(--tint); border-top: 1px solid var(--hair); grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 12px; gap: 8px; }
  .bbar__btn { height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--hair); border-radius: 4px; background: transparent; color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
  .bbar__btn:hover { border-color: var(--red); color: var(--red); }
  .bbar__btn[aria-disabled="true"] { color: var(--muted); }
  .bbar__prev { justify-self: start; }
  .bbar__next { justify-self: end; }
  .bbar__label { font-size: 0.875rem; color: var(--muted); text-align: center; }
  .adminbar { left: 8px; right: 8px; bottom: 8px; justify-content: space-between; flex-wrap: wrap; }
  body.signed-in { padding-bottom: 120px; }
}
@media print {
  .rbar, .bbar, .adminbar, .edit-link, .exit-fullscreen, .masthead__nav, .masthead__menu-btn, .newsletter, .aa { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* an editor is told when a book will not export, rather than a reader meeting a 500 */
.export-error { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--red); word-break: break-word; }