/* Site styles, transcribed from docs/design/archive-reference.html (approved design).
   Additions for states the reference does not show are marked "Not in reference". */

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { background: var(--paper); scroll-padding-top: env(safe-area-inset-top, 0px);
  /* Not in reference: keep the scrollbar space on short pages too, so the header never shifts. */
  scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--seal); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
[lang="ko"] { font-family: var(--kr); }

/* Header */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.seal {
  width: 40px; height: 40px; background: var(--seal); color: var(--paper); display: grid; place-items: center;
  font: 700 25px/1 var(--kr); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(243, 237, 226, .28);
  flex: none;  /* straight, not tilted (chat 12.10.2026) */
}
.brand b { font: 600 19px/1.1 var(--serif); letter-spacing: -.01em; }
.logo-img { display: block; height: 40px; width: auto; flex: none; }
.nav { margin-left: auto; display: flex; gap: 22px; font: 500 15px/1 var(--sans); }
.nav a { text-decoration: none; padding: 6px 0; }
.nav a[aria-current] { box-shadow: inset 0 -2px var(--seal); }

/* Phones: burger and a full-screen menu (after Principle Academy, dp-wagtail layout.css). */
.burger, .sheet, .scrim { display: none; }
.close-btn {
  width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); transition: transform .15s ease; flex: none;
}
.close-btn svg { width: 24px; height: 24px; }
.close-btn:hover { transform: rotate(90deg); }
@media (max-width: 900px) {
  .nav { display: none; }
  .site-head .wrap { min-height: 60px; gap: 8px; }
  .head-search { margin-left: auto; }
  .brand b { font-size: 18px; }
  .seal { width: 36px; height: 36px; font-size: 22px; }
  .logo-img { height: 36px; }
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; color: var(--ink);
  }
  .burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
  .scrim.open { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(36, 32, 27, .5); }
  .sheet.open, .sheet:target {
    position: fixed; inset: 0; z-index: 60; overflow: auto; display: flex; flex-direction: column;
    padding: 0 20px calc(18px + env(safe-area-inset-bottom)); background: var(--paper); color: var(--ink);
  }
  .sheet-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: 0 -20px; padding: 6px 12px 6px 16px; padding-top: max(6px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--rule);
  }
  .sheet-main { display: flex; flex-direction: column; padding: 10px 0 4px; }
  .sheet-main a {
    padding: 11px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
    font: 600 24px/1.2 var(--serif); letter-spacing: -.005em;
  }
  .sheet-main a[aria-current] { box-shadow: inset 3px 0 0 var(--seal); padding-left: 12px; }
  .sheet-more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 10px 0 4px; }
  .sheet-more a { padding: 8px 0; color: var(--ink-soft); font: 500 15px/1.3 var(--sans); text-decoration: none; }
  .sheet-tagline { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font: 400 15px/1.45 var(--serif); color: var(--ink-soft); }
  .sheet.open > :not(.sheet-head) { animation: sheet-in .2s ease; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet.open > * { animation: none !important; } .close-btn { transition: none; } }

/* Search field — the one bold element */
.finder { padding: clamp(40px, 8vw, 88px) 0 clamp(32px, 5vw, 56px); }
.finder.compact { padding-bottom: 8px; }
.finder h1 { font: 600 clamp(32px, 5.4vw, 58px)/1.06 var(--serif); letter-spacing: -.02em; margin: 0 0 14px; max-width: 18ch; }
.finder p { margin: 0 0 28px; color: var(--ink-soft); max-width: var(--measure); }
.field { display: flex; align-items: stretch; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 6px; max-width: 820px; }
.field input { flex: 1; min-width: 0; border: 0; background: none; font: 400 clamp(18px, 2.2vw, 22px)/1.3 var(--serif); color: var(--ink); padding: 18px 20px; }
.field input::placeholder { color: #9a8f81; }
.field input:focus { outline: none; }
.field:focus-within { border-color: var(--ink); }
.field button { border: 0; background: var(--seal); color: var(--paper); font: 600 16px/1 var(--sans); padding: 0 26px; border-radius: 0 5px 5px 0; cursor: pointer; }
.hints { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font: 400 14px/1.4 var(--sans); color: var(--ink-soft); }
.hints a { color: var(--ink); }

/* Series shelves */
.shelf { padding: 28px 0 8px; border-top: 1px solid var(--rule); }
.shelf-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.shelf h2 { font: 600 24px/1.2 var(--serif); margin: 0; }
.shelf-head span { font: 400 14px/1 var(--sans); color: var(--ink-soft); }
.shelf-head a { margin-left: auto; font: 500 14px/1 var(--sans); }
.covers { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(128px, 15vw, 164px); gap: 22px; overflow-x: auto; padding-bottom: 22px; scroll-snap-type: x proximity; }
.book { scroll-snap-align: start; text-decoration: none; display: block; }
.cover {
  aspect-ratio: 17/22; border-radius: 2px 4px 4px 2px; position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(36, 32, 27, .08), 0 10px 22px -14px rgba(36, 32, 27, .55); transition: transform .2s;
}
.book:hover .cover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .book:hover .cover { transform: none; } }
.cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: rgba(0, 0, 0, .12); z-index: 1; }
.cover i { position: absolute; left: 14px; right: 10px; font-style: normal; }
.cover .mast { top: 12px; font: 700 15px/1 var(--serif); letter-spacing: -.01em; }
.cover .iss { bottom: 12px; font: 500 11px/1.2 var(--sans); opacity: .85; }
/* Not in reference: real covers from the pipeline fill the frame; the CSS cover is the fallback. */
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.blank { background: var(--paper-deep); color: var(--ink); border: 1px solid var(--rule); }
.cover.blank .mast { font-size: 14px; line-height: 1.2; }
.book b { display: block; font: 500 15px/1.3 var(--serif); margin-top: 10px; }
.book small { display: block; font: 400 13px/1.3 var(--sans); color: var(--ink-soft); margin-top: 2px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding: 36px 0 56px; border-top: 1px solid var(--rule); }
.facts p { margin: 0; max-width: 34ch; color: var(--ink-soft); font-size: 16px; }
.facts strong { display: block; color: var(--ink); font: 600 18px/1.3 var(--serif); margin-bottom: 4px; }

/* Search results */
.results { display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 4vw, 56px); padding: 32px 0 64px; }
@media (max-width: 860px) { .results { grid-template-columns: 1fr; } .facets { order: 2; } }
.res-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--rule); font: 400 15px/1.4 var(--sans); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 99px; padding: 3px; }
.seg a { text-decoration: none; padding: 6px 14px; border-radius: 99px; font-weight: 500; }
.seg a[aria-current] { background: var(--ink); color: var(--paper); }
.facets h2 { font: 600 15px/1.2 var(--sans); margin: 22px 0 10px; } /* h3 in the reference; h2 keeps heading order */
.facets h2:first-child { margin-top: 0; }
.facets label { display: flex; gap: 10px; align-items: center; font: 400 15px/1.3 var(--sans); padding: 5px 0; cursor: pointer; }
.facets label span { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.facets input { accent-color: var(--seal); width: 16px; height: 16px; }
.years { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin-bottom: 6px; }
.years i { flex: 1; background: var(--rule); border-radius: 1px; }
.years i.on { background: var(--ink); }
.yr { display: flex; justify-content: space-between; font: 400 13px/1 var(--sans); color: var(--ink-soft); }
/* Not in reference: year range inputs and the apply button used without JavaScript. */
.yr-range { display: flex; gap: 8px; margin-top: 10px; }
.yr-range input[type=number] {
  width: 100%; height: auto; font: 400 14px/1 var(--sans); padding: 7px 8px;
  border: 1px solid var(--rule); background: var(--white); border-radius: 4px; color: var(--ink);
}
.facets .apply { margin-top: 18px; }
.sort { font: inherit; border: 1px solid var(--rule); background: var(--white); border-radius: 4px; padding: 6px 8px; color: var(--ink); }

.hit { display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.hit .cover { width: 72px; }
.hit .cover.blank .mast { font-size: 9px; top: 8px; left: 10px; } /* reference: inline style */
.js-live [data-apply] { display: none; } /* filters apply instantly with JS */
.hit h3 { font: 600 20px/1.3 var(--serif); margin: 0; }
.hit h3 a { text-decoration: none; }
.hit .meta { font: 400 14px/1.4 var(--sans); color: var(--ink-soft); margin: 3px 0 10px; }
.kwic { list-style: none; margin: 0; padding: 0; }
.kwic li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 5px 0; font-size: 16px; line-height: 1.5; }
.kwic a.pg { font: 600 13px/1.9 var(--sans); text-decoration: none; color: var(--seal); font-variant-numeric: tabular-nums; }
.hit > div, .kwic li span { min-width: 0; }
.kwic li span, .hit h3 { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .hit { grid-template-columns: 52px 1fr; gap: 12px; padding: 18px 0; }
  .hit .cover { width: 52px; }
  .hit h3 { font-size: 18px; }
  .kwic li { grid-template-columns: 44px 1fr; gap: 8px; font-size: 15px; }
}
mark { background: var(--seal-wash); color: inherit; padding: 0 2px; border-radius: 2px; }
.more { font: 500 14px/1 var(--sans); display: inline-block; margin-top: 8px; }
/* Not in reference: title matches, empty state, notices. */
.titles { padding: 0 0 18px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); font: 400 15px/1.5 var(--sans); }
.titles h2 { font: 600 15px/1.2 var(--sans); margin: 0 0 8px; }
.titles ul { margin: 0; padding-left: 18px; }
.notice { font: 400 16px/1.5 var(--sans); color: var(--ink-soft); padding: 24px 0; }
.notice a { color: var(--ink); }

/* Document page */
.crumbs { font: 400 14px/1.4 var(--sans); color: var(--ink-soft); padding: 20px 0 0; }
.crumbs a { color: var(--ink-soft); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin: 0 .45em; }
.doc { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(28px, 5vw, 64px); padding: 28px 0 40px; }
@media (max-width: 760px) { .doc { grid-template-columns: 1fr; } .doc .cover-lg { max-width: 220px; } }
.cover-lg .cover { width: 100%; }
.cover-lg .cover .mast { font-size: 22px; top: 20px; left: 22px; }
.cover-lg .cover .iss { font-size: 14px; left: 22px; bottom: 18px; }
.doc h1 { font: 600 clamp(30px, 4.2vw, 46px)/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 8px; }
.doc .sub { font: 400 18px/1.4 var(--sans); color: var(--ink-soft); margin: 0 0 22px; }
.summary { font-size: 19px; line-height: 1.6; max-width: var(--measure); margin: 0 0 26px; }
.summary p { margin: 0 0 .6em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.btn { font: 600 15px/1 var(--sans); padding: 13px 20px; border-radius: 5px; text-decoration: none; border: 1px solid var(--ink); display: inline-flex; align-items: center; gap: 8px; background: none; color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn svg { width: 17px; height: 17px; }
.btn[hidden] { display: none; }
/* A clicked Read button while the reader opens (archive/js/reader-warm.js) */
.is-opening { cursor: progress; opacity: .75; }
dl.bib { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; font: 400 15px/1.45 var(--sans); max-width: var(--measure); }
dl.bib dt { color: var(--ink-soft); }
dl.bib dd { margin: 0; overflow-wrap: anywhere; }
.ark { font-variant-numeric: tabular-nums; word-break: break-all; }

.inner-search { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 22px clamp(16px, 3vw, 28px); margin: 0 0 40px; }
.inner-search h2 { font: 600 20px/1.2 var(--serif); margin: 0 0 12px; }
.inner-search .field { background: var(--paper); }
.inner-search .field input { font-size: 17px; padding: 13px 16px; }
.inner-search .field button { padding: 0 18px; font-size: 15px; }
.inner-search .kwic { margin-top: 14px; }
.inner-search .count { font: 400 14px/1.4 var(--sans); color: var(--ink-soft); margin: 14px 0 0; }

.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 0 0 40px; }
.pg-thumb { aspect-ratio: 17/22; background: var(--white); border: 1px solid var(--rule); padding: 14px 12px; font: 400 7px/1.5 var(--serif); color: #8d8376; overflow: hidden; position: relative; text-decoration: none; }
.pg-thumb b { display: block; font: 700 11px/1.2 var(--serif); color: var(--ink); margin-bottom: 6px; }
.pg-thumb em { position: absolute; bottom: 6px; right: 8px; font: 500 11px/1 var(--sans); font-style: normal; color: var(--ink-soft); }
/* Not in reference: rendered page images from the pipeline. */
.pg-thumb.image { padding: 0; }
.pg-thumb.image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pg-thumb.image em { background: var(--white); padding: 2px 5px; border-radius: 2px; }
.section-h { font: 600 22px/1.2 var(--serif); margin: 0 0 14px; }
.toc { list-style: none; padding: 0; margin: 0 0 48px; max-width: var(--measure); }
.toc li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dotted var(--rule); }
.toc li a { text-decoration: none; }
.toc li span { margin-left: auto; font: 500 14px/1 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Not in reference: citations on the issue page, prose blocks. */
.cite-section { margin: 0 0 56px; max-width: var(--measure); }
.prose { max-width: var(--measure); margin: 0 0 40px; }
.prose blockquote { margin: 1.2em 0; padding-left: 1em; border-left: 2px solid var(--rule); color: var(--ink-soft); }

/* Quick look drawer (click on a cover in a shelf) */
.ql-scrim { position: fixed; inset: 0; background: rgba(36, 32, 27, .38); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.ql {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--paper); z-index: 41;
  transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column;
  border-left: 1px solid var(--rule); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  visibility: hidden;
}
.ql-open .ql-scrim { opacity: 1; pointer-events: auto; }
.ql-open .ql { transform: none; visibility: visible; }
@media (max-width: 640px) {
  .ql { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid var(--rule); border-radius: 14px 14px 0 0; transform: translateY(100%); }
  .ql::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 10px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .ql, .ql-scrim { transition: none; } }
.ql-head { display: flex; justify-content: flex-end; padding: 10px 12px 0; }
.ql-close { border: 0; background: none; font: 400 28px/1 var(--sans); color: var(--ink-soft); width: 44px; height: 44px; cursor: pointer; border-radius: 50%; }
.ql-close:hover { background: var(--paper-deep); }
.ql-body { flex: 1; overflow-y: auto; padding: 0 clamp(20px, 5vw, 32px) 28px; }
.ql-top { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: end; margin-bottom: 20px; }
.ql-top .cover { width: 120px; }
.ql h2 { font: 600 24px/1.15 var(--serif); margin: 0 0 6px; letter-spacing: -.01em; }
.ql .meta { font: 400 14px/1.45 var(--sans); color: var(--ink-soft); }
.ql p.sum { margin: 0 0 20px; font-size: 17px; }
.ql .actions { margin-bottom: 22px; }
.ql .actions .btn { flex: 1; justify-content: center; }
.ql h3 { font: 600 15px/1.2 var(--sans); margin: 0 0 10px; }
.ql .toc { margin-bottom: 22px; }
.ql .toc li { padding: 6px 0; font-size: 15px; }
.ql-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 10px; overflow-x: auto; margin-bottom: 22px; padding-bottom: 4px; }
.ql-strip .pg-thumb { padding: 8px; font-size: 5px; }
.ql-strip .pg-thumb.image { padding: 0; }
.ql-strip .pg-thumb b { font-size: 8px; }
.ql-full { display: block; text-align: center; font: 600 15px/1 var(--sans); padding: 14px; border-top: 1px solid var(--rule); text-decoration: none; }

/* Book page */
.bk-hero { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: clamp(28px, 5vw, 72px); padding: 28px 0 44px; align-items: start; }
@media (max-width: 760px) { .bk-hero { grid-template-columns: 1fr; } .bk-hero .cover-lg { max-width: 200px; } }
.bk-hero .cover-lg .cover .mast { font-size: 24px; top: 38%; left: 22px; }
.bk-hero .kr { font: 500 20px/1.3 var(--kr); color: var(--ink-soft); margin: 0 0 4px; }
.bk-hero h1 { font: 600 clamp(34px, 5vw, 56px)/1.04 var(--serif); letter-spacing: -.025em; margin: 0 0 10px; }
.bk-hero .by { font: 400 17px/1.45 var(--sans); margin: 0 0 22px; color: var(--ink-soft); }
.bk-hero .by a { color: var(--ink); }
.bk-cols { display: grid; grid-template-columns: 1fr 300px; gap: clamp(28px, 5vw, 64px); padding-bottom: 64px; }
@media (max-width: 900px) { .bk-cols { grid-template-columns: 1fr; } }
.parts { list-style: none; margin: 0 0 44px; padding: 0; max-width: var(--measure); }
.parts > li { border-top: 1px solid var(--rule); }
.parts > li:last-child { border-bottom: 1px solid var(--rule); }
.parts details summary { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 18px/1.3 var(--serif); }
.parts details summary::-webkit-details-marker { display: none; }
.parts details summary::after { content: "+"; margin-left: 12px; font: 400 20px/1 var(--sans); color: var(--ink-soft); }
.parts details[open] summary::after { content: "−"; }
.parts summary span { margin-left: auto; font: 400 14px/1 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.parts .toc { margin: 0 0 14px 0; padding-left: 18px; }
.parts .part-link { display: flex; align-items: baseline; padding: 14px 0; font: 600 18px/1.3 var(--serif); text-decoration: none; }
.parts .part-link span { margin-left: auto; margin-right: 26px; font: 400 14px/1 var(--sans); color: var(--ink-soft); }
.side h2 { font: 600 17px/1.2 var(--serif); margin: 0 0 12px; }
.side section { padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); }
.side section:last-child { border-bottom: 0; }
.eds { list-style: none; margin: 0; padding: 0; font: 400 15px/1.4 var(--sans); }
.eds li { display: flex; gap: 10px; padding: 7px 0; align-items: baseline; }
.eds li span { color: var(--ink-soft); margin-left: auto; white-space: nowrap; }
.eds li[aria-current] a { font-weight: 600; text-decoration: none; }
.eds li[aria-current]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--seal); flex: none; transform: translateY(-2px); }
.cite-box { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 14px; font: 400 14px/1.5 var(--serif); }
.cite-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.cite-tabs button { font: 500 13px/1 var(--sans); border: 1px solid var(--rule); background: none; border-radius: 99px; padding: 6px 10px; cursor: pointer; color: var(--ink); }
.cite-tabs button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cite-box .copy { margin-top: 10px; font: 600 13px/1 var(--sans); background: none; border: 0; color: var(--seal); cursor: pointer; padding: 0; }
/* Not in reference: without JS every style is listed; with JS only the chosen tab shows. */
.cite-panel h3 { font: 600 13px/1 var(--sans); margin: 12px 0 6px; color: var(--ink-soft); }
.cite-panel:first-of-type h3 { margin-top: 0; }
.cite-box.tabbed .cite-panel h3 { display: none; }
.cite-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 12px/1.5 ui-monospace, Menlo, monospace; margin: 0; }
.cite-panel p { margin: 0; overflow-wrap: anywhere; }
.cite-files { font: 500 13px/1.4 var(--sans); margin: 10px 0 0; }
.rel { list-style: none; margin: 0; padding: 0; }
.rel li { padding: 6px 0; font-size: 16px; line-height: 1.35; }
.rel small { display: block; font: 400 13px/1.3 var(--sans); color: var(--ink-soft); }
.dock { display: none; }
@media (max-width: 760px) {
  .dock { display: flex; gap: 8px; position: sticky; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--rule); z-index: 5; }
  .dock .btn { flex: 1; justify-content: center; }
}

.site-foot { border-top: 1px solid var(--rule); padding: 32px 0 48px; font: 400 14px/1.6 var(--sans); color: var(--ink-soft); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.site-foot a { color: var(--ink); }

/* Not in reference: list pages (series, books, authors), pagination, generic pages. */
.page-head { padding: 28px 0 8px; }
.page-head h1 { font: 600 clamp(30px, 4.2vw, 46px)/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 8px; }
.page-head .sub { font: 400 16px/1.5 var(--sans); color: var(--ink-soft); margin: 0 0 12px; max-width: var(--measure); }
.page-head .intro { max-width: var(--measure); }
.year-nav { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 14px/1.6 var(--sans); padding: 8px 0 20px; }
.year-block { border-top: 1px solid var(--rule); padding: 24px 0 8px; }
.year-block h2 { font: 600 22px/1.2 var(--serif); margin: 0 0 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(128px, 15vw, 164px), 1fr)); gap: 28px 22px; padding-bottom: 28px; }
.pagination { display: flex; gap: 18px; align-items: center; justify-content: center; font: 500 15px/1 var(--sans); padding: 24px 0 56px; }
.pagination span { color: var(--ink-soft); }
.list { list-style: none; margin: 0 0 56px; padding: 0; max-width: var(--measure); }
.list li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.list li a { font: 500 18px/1.3 var(--serif); text-decoration: none; }
.list li span { margin-left: auto; font: 400 14px/1 var(--sans); color: var(--ink-soft); white-space: nowrap; }
.not-found { padding: clamp(40px, 8vw, 88px) 0; }
.not-found h1 { font: 600 clamp(30px, 4.2vw, 46px)/1.1 var(--serif); margin: 0 0 14px; }
[data-done]::after { content: " ✓"; }

/* Fix for docs/reference-impl book-page.css: `.bp a { color: inherit }` outranks
   `.bp-btn--primary`, which left primary link-buttons ink-on-ink. Same colours as designed. */
.bp a.bp-btn--primary { color: var(--paper); }

/* Not in reference: header search button and overlay (dimmed screen, quick results). */
.head-search { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; color: var(--ink); flex: none; }
.head-search:hover { background: var(--paper-deep); }
.head-search svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .head-search { margin-left: auto; } }
.so-scrim { position: fixed; inset: 0; background: rgba(36, 32, 27, .38); z-index: 60; }
.so { position: fixed; inset: 0 0 auto 0; z-index: 61; background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: calc(18px + env(safe-area-inset-top, 0px)) 0 18px; box-shadow: 0 20px 40px -24px rgba(36, 32, 27, .5); max-height: 90vh; overflow-y: auto; }
.so .field { max-width: none; }
.so-results { margin-top: 10px; }
.so-results ul { list-style: none; margin: 0; padding: 0; }
.so-results li a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 6px; text-decoration: none; }
.so-results li a:hover, .so-results li a[aria-selected=true] { background: var(--white); box-shadow: inset 3px 0 var(--seal); }
.so-results img, .so-results .so-blank { width: 40px; aspect-ratio: 17/22; object-fit: cover; background: var(--paper-deep); border: 1px solid var(--rule); display: block; }
.so-results b { display: block; font: 600 16px/1.3 var(--serif); }
.so-results small { display: block; font: 400 13px/1.3 var(--sans); color: var(--ink-soft); }
.so-results .so-pages { display: block; padding: 10px 8px; font: 500 14px/1.4 var(--sans); }
.so-results .so-note { padding: 10px 8px; font: 400 14px/1.4 var(--sans); color: var(--ink-soft); margin: 0; }
.so-foot { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; font: 500 14px/1.4 var(--sans); }
.so-foot span { color: var(--ink-soft); font-weight: 400; }
@media (max-width: 720px) { .so-foot span { display: none; } }
.so-open { overflow: hidden; }

/* ======================================================================
   Unified pages — docs/design/unified-pages.html (approved, higher priority
   than archive-reference.html). Series, documents, empty search, one card.
   ====================================================================== */

/* One card, three states: real cover · series-colour placeholder · book placeholder */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 22px; }
.cards.shelf { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: clamp(128px, 15vw, 160px); overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x proximity; border-top: 0; padding-top: 0; }
.card { text-decoration: none; display: block; scroll-snap-align: start; }
.cv { aspect-ratio: 17/22; border-radius: 2px 4px 4px 2px; position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(36, 32, 27, .08), 0 10px 22px -14px rgba(36, 32, 27, .55); transition: transform .2s; }
.card:hover .cv { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card:hover .cv { transform: none; } }
.cv::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: rgba(0, 0, 0, .13); z-index: 1; }
.cv.img { background: var(--paper-deep); }
.cv.img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv.ph { background: var(--c, var(--ink)); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px 12px 18px; }
.cv.ph b { font: 700 15px/1.15 var(--serif); overflow-wrap: anywhere; }
.cv.ph small { font: 500 11px/1.2 var(--sans); opacity: .85; }
.cv.ph.light { color: var(--ink); --c: var(--paper-deep); }
/* A corpus book's own cover colour: the same gradient as the cover on its page (book.css, .bcv) */
.cv.ph.bc { background: linear-gradient(165deg, color-mix(in srgb, var(--c) 88%, white), color-mix(in srgb, var(--c) 55%, black)); color: #F1DCC0; }
.cv.ph em { font: 700 26px/1 var(--kr); font-style: normal; opacity: .22; align-self: flex-end; }
.card .t { display: block; font: 500 15px/1.3 var(--serif); margin-top: 10px; }
.card .m { display: block; font: 400 13px/1.35 var(--sans); color: var(--ink-soft); margin-top: 2px; }

/* Series page */
.s-hero { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); padding: 24px 0 30px; align-items: start; }
@media (max-width: 700px) { .s-hero { grid-template-columns: 110px 1fr; gap: 16px; } .s-hero .lead { grid-column: 1/-1; } }
.stack { position: relative; aspect-ratio: 17/22; }
.stack .cv { position: absolute; inset: 0; }
.stack .cv:nth-child(1) { transform: rotate(-5deg) translate(-8px, 6px); opacity: .75; }
.stack .cv:nth-child(2) { transform: rotate(3deg) translate(8px, 2px); opacity: .88; }
.eyebrow { font: 500 14px/1 var(--sans); color: var(--ink-soft); margin: 0 0 8px; }
.eyebrow a { color: var(--ink-soft); }
.s-hero h1, .d-hero h1, .finder.empty h1 { font: 600 clamp(32px, 4.6vw, 52px)/1.05 var(--serif); letter-spacing: -.025em; margin: 0 0 10px; }
.lead { font-size: 18px; line-height: 1.6; max-width: var(--measure); margin: 0 0 18px; }
.lead p { margin: 0 0 .5em; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; font: 400 14px/1.3 var(--sans); }
.stats div { display: flex; flex-direction: column; }
.stats dt { color: var(--ink-soft); font-size: 12px; }
.stats dd { margin: 2px 0 0; font: 600 17px/1.2 var(--serif); }
.s-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.s-years { position: sticky; top: var(--hd-h, 0px); z-index: 10; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0 calc(-1 * clamp(16px, 4vw, 40px)); padding: 10px clamp(16px, 4vw, 40px); }
.s-years-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.s-years a { flex: none; font: 500 14px/1 var(--sans); text-decoration: none; padding: 8px 11px; border-radius: 99px; border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.s-years a:hover { border-color: var(--rule); }
.s-years a[aria-current] { background: var(--ink); color: var(--paper); }
.s-years a.dec { color: var(--ink-soft); padding-left: 14px; border-left: 1px solid var(--rule); border-radius: 0; margin-left: 4px; }
.s-search { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 22px 0 6px; }
.mini-field { display: flex; flex: 1; min-width: 240px; max-width: 460px; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 6px; }
.mini-field input { flex: 1; min-width: 0; border: 0; background: none; font: 400 16px/1.3 var(--serif); padding: 11px 14px; color: var(--ink); }
.mini-field input:focus { outline: none; }
.mini-field:focus-within { border-color: var(--ink); }
.mini-field button { border: 0; background: var(--seal); color: var(--paper); font: 600 14px/1 var(--sans); padding: 0 16px; border-radius: 0 5px 5px 0; cursor: pointer; }
.s-sort { font: 400 14px/1 var(--sans); color: var(--ink-soft); display: flex; gap: 6px; align-items: center; }
.s-sort select { font: 500 14px/1 var(--sans); border: 1px solid var(--rule); background: var(--white); border-radius: 4px; padding: 7px 8px; color: var(--ink); }
.year-block { padding: 26px 0 8px; border-top: 0; }
.year-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.year-h h2 { font: 600 28px/1 var(--serif); margin: 0; font-variant-numeric: tabular-nums; }
.year-h span { font: 400 14px/1 var(--sans); color: var(--ink-soft); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); margin-top: 24px; padding: 20px 0 56px; font: 500 15px/1 var(--sans); }
.pager a { text-decoration: none; }
.pager span { color: var(--ink-soft); }

/* Document pages: book / issue / little data — one hero, then sections */
.d-hero { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: 24px 0 34px; align-items: start; }
.d-hero .cv { width: 100%; }
.d-hero .cv.ph b { font-size: 24px; }
.d-hero .cv.ph small { font-size: 13px; }
@media (max-width: 700px) { .d-hero { grid-template-columns: 1fr; gap: 20px; } .d-hero > .cv { width: 150px; } .d-hero .cv.ph b { font-size: 17px; } }
.d-hero .kr { font: 500 19px/1.3 var(--kr); color: var(--ink-soft); margin: 0 0 2px; }
.d-hero .by { font: 400 16px/1.45 var(--sans); color: var(--ink-soft); margin: 0 0 18px; }
.d-hero .by a { color: var(--ink); }
.d-hero .summary { font-size: 18px; line-height: 1.6; max-width: var(--measure); margin: 0 0 20px; }
.d-hero .stats { margin: 0 0 22px; }
.d-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.d-actions .hint { flex-basis: 100%; font: 400 13px/1.45 var(--sans); color: var(--ink-soft); margin: 2px 0 0; }
.btn.seal-b { background: var(--seal); border-color: var(--seal); color: var(--paper); }
.btn.sm { padding: 8px 11px; font-size: 13px; }
a.btn.primary, a.btn.seal-b { color: var(--paper); }
.d-sec { border-top: 1px solid var(--rule); padding: 30px 0 34px; }
.d-sec-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.d-sec-h h2 { font: 600 24px/1.2 var(--serif); margin: 0; }
.d-sec-h span { font: 400 14px/1 var(--sans); color: var(--ink-soft); }
.d-sec-h a { margin-left: auto; font: 500 14px/1 var(--sans); }
.pgf { aspect-ratio: 17/22; background: var(--white); box-shadow: 0 1px 0 rgba(36, 32, 27, .06), 0 14px 30px -20px rgba(36, 32, 27, .6); overflow: hidden; position: relative; display: block; }
.pgf img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.strip2 { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 17vw, 180px); gap: 18px; overflow-x: auto; padding: 4px 2px 16px; scroll-snap-type: x mandatory; }
.strip2 a { text-decoration: none; scroll-snap-align: start; cursor: zoom-in; }
.strip2 small { display: block; font: 400 13px/1.3 var(--sans); color: var(--ink-soft); margin-top: 8px; }
.spread { background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.spread-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--rule); font: 500 14px/1 var(--sans); }
.spread-bar span { margin-right: auto; font-variant-numeric: tabular-nums; }
.spread-bar button { border: 1px solid var(--rule); background: var(--white); border-radius: 4px; width: 36px; height: 36px; cursor: pointer; font: 500 18px/1 var(--sans); color: var(--ink); }
.spread-bar button:disabled { opacity: .4; cursor: default; }
.spread-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 330px)); justify-content: center; gap: 3px; padding: clamp(16px, 3vw, 32px); }
@media (max-width: 600px) { .spread-stage { grid-template-columns: minmax(0, 330px); } .spread-stage .pgf:nth-child(2) { display: none; } }
.spread-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 50px; gap: 8px; overflow-x: auto; padding: 12px 14px; border-top: 1px solid var(--rule); }
.spread-thumbs a { display: block; border: 1px solid var(--rule); }
.spread-thumbs a[aria-current] { outline: 2px solid var(--seal); outline-offset: 1px; }
.spread-thumbs img { display: block; width: 100%; height: auto; }
.toc2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px 22px; }
.toc2 li { border-top: 3px solid var(--ink); padding-top: 12px; }
.toc2 li.part { grid-column: 1/-1; border: 0; padding: 4px 0 0; font: 600 14px/1 var(--sans); color: var(--ink-soft); }
.toc2 h3 { font: 600 17px/1.3 var(--serif); margin: 0 0 6px; }
.toc2 h3 a { text-decoration: none; }
.toc2 p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.toc2 .pp { font: 500 13px/1 var(--sans); color: var(--seal); text-decoration: none; }
.toc2.articles li { border-top-width: 1px; border-color: var(--rule); }
.toc2.articles h3 { font-size: 16px; }
.find2 { display: flex; max-width: 560px; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 6px; }
.find2 input { flex: 1; min-width: 0; border: 0; background: none; font: 400 17px/1.3 var(--serif); padding: 13px 16px; color: var(--ink); }
.find2 input:focus { outline: none; }
.find2:focus-within { border-color: var(--ink); }
.find2 button { border: 0; background: var(--seal); color: var(--paper); font: 600 15px/1 var(--sans); padding: 0 18px; border-radius: 0 5px 5px 0; cursor: pointer; }
.kwic2 { list-style: none; margin: 14px 0 0; padding: 0; max-width: 760px; }
.kwic2 li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 6px 0; font-size: 16px; line-height: 1.5; }
.kwic2 a { font: 600 13px/1.9 var(--sans); color: var(--seal); text-decoration: none; }
.kwic2-note { font: 400 14px/1.5 var(--sans); color: var(--ink-soft); margin: 12px 0 0; }
.d-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; border-top: 1px solid var(--rule); padding: 30px 0 60px; }
.d-bottom h2 { font: 600 18px/1.2 var(--serif); margin: 0 0 12px; }
.eds2 { list-style: none; margin: 0; padding: 0; font: 400 15px/1.4 var(--sans); }
.eds2 li { display: flex; gap: 10px; padding: 6px 0; }
.eds2 li span { margin-left: auto; color: var(--ink-soft); white-space: nowrap; }
.cite2 { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 14px; font-size: 14px; line-height: 1.5; }
.cite2 .fm { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.cite2 .fm button { font: 500 12px/1 var(--sans); border: 1px solid var(--rule); background: none; border-radius: 99px; padding: 6px 9px; cursor: pointer; color: var(--ink); }
.cite2 .fm button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cite2 .cp { display: flex; gap: 14px; margin-top: 10px; font: 600 13px/1 var(--sans); }
.cite2 .cp a, .cite2 .cp button { color: var(--seal); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: none; }
.cite2 pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 12px/1.5 ui-monospace, Menlo, monospace; margin: 0; }
.cite2 [data-cite-panel] p { margin: 0; overflow-wrap: anywhere; }
.bib2 { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font: 400 14px/1.45 var(--sans); }
.bib2 dt { color: var(--ink-soft); }
.bib2 dd { margin: 0; overflow-wrap: anywhere; }
.shelf3 { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(110px, 12vw, 140px); gap: 18px; overflow-x: auto; padding-bottom: 12px; }
.shelf3 .card .t { font-size: 14px; }
.shelf3 .card[aria-current] .cv { outline: 2px solid var(--seal); outline-offset: 3px; }
.dock2 { display: none; }
/* On phones Read and Download live in the bar at the bottom: the same buttons are not repeated in the page */
@media (max-width: 700px) { .d-actions .in-dock { display: none; } }
@media (max-width: 700px) { .dock2 { display: flex; gap: 8px; position: sticky; bottom: 0; z-index: 5; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--rule); } .dock2 .btn { flex: 1; justify-content: center; } }
.lb { position: fixed; inset: 0; background: rgba(36, 32, 27, .84); display: grid; place-items: center; z-index: 50; padding: 70px 12px 20px; }
.lb[hidden] { display: none; }
.lb img { max-height: calc(100vh - 100px); width: auto; max-width: min(720px, 94vw); background: var(--white); }
.lb-bar { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 0; right: 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.lb-bar .btn { background: var(--paper); border-color: var(--paper); padding: 10px 14px; }
.noscroll { overflow: hidden; }

/* Search, no query yet */
.finder.empty { padding: clamp(36px, 7vw, 72px) 0 26px; }
.finder.empty h1 { max-width: 20ch; }
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; padding: 30px 0 20px; border-top: 1px solid var(--rule); margin-top: 34px; }
.tips h2 { font: 600 16px/1.2 var(--sans); margin: 0 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips a { display: inline-block; font: 500 14px/1 var(--sans); border: 1px solid var(--rule); border-radius: 99px; padding: 8px 12px; text-decoration: none; background: var(--white); }
.chips a span { color: var(--ink-soft); margin-left: 4px; font-weight: 400; }
.syntax { list-style: none; margin: 0; padding: 0; font: 400 15px/1.5 var(--sans); }
.syntax li { padding: 4px 0; }
.syntax code { font: 500 14px/1 var(--sans); background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 4px; padding: 3px 6px; margin-right: 6px; }
.decades { display: flex; flex-wrap: wrap; gap: 8px; }
.decades a { flex: 1; min-width: 84px; text-align: center; text-decoration: none; border: 1px solid var(--rule); border-radius: 6px; padding: 12px 8px; font: 600 17px/1 var(--serif); background: var(--white); }
.decades a small { display: block; font: 400 12px/1.3 var(--sans); color: var(--ink-soft); margin-top: 6px; }
.recent { padding: 20px 0 56px; }
.recent h2 { font: 600 22px/1.2 var(--serif); margin: 0 0 16px; }
.cite2 h3 { font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 12px 0 6px; }
.cite2.tabbed h3 { display: none; }
.cite2 [data-cite-panel][hidden] { display: none; }
.cite2 [data-cite-copy][data-done] { color: var(--ink); }
body.noscroll { overflow: hidden; }
/* Edition switcher on edition pages */
.ed-switch { margin: 0 0 22px; border: 1px solid var(--rule); border-radius: 10px; background: var(--white); padding: 14px 16px; max-width: 620px; }
.ed-switch-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 600 14px/1 var(--sans); }
.ed-switch-h span { font-weight: 400; color: var(--ink-soft); }
.ed-switch-h a { margin-left: auto; font-weight: 500; }
.ed-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.ed-pills a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border: 1px solid var(--rule); border-radius: 99px; padding: 7px 12px 7px 7px; font: 500 14px/1 var(--sans); background: var(--paper); }
.ed-pills a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lc { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 99px; background: var(--paper-deep); color: var(--ink); font: 600 11px/1 var(--sans); letter-spacing: .02em; }
.ed-pills a[aria-current] .lc { background: var(--paper); }
.ed-pills a[aria-current] .lc.canon { background: var(--seal); color: var(--paper); }
.lc.canon { background: var(--seal); color: var(--paper); }
.ed-switch .btn { width: 100%; justify-content: center; }

/* Book page with all editions */
.w-hero { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: 24px 0 30px; }
.w-hero .kr { font: 500 19px/1.3 var(--kr); color: var(--ink-soft); margin: 0 0 2px; }
.w-hero .by { font: 400 16px/1.45 var(--sans); color: var(--ink-soft); margin: 0 0 14px; }
.w-hero .summary { font-size: 18px; line-height: 1.6; max-width: var(--measure); margin: 0 0 20px; }
.fan { position: relative; aspect-ratio: 17/22; max-width: 220px; }
.fan .cv { position: absolute; inset: 0; }
.fan .cv:nth-child(1):not(:last-child) { transform: rotate(-8deg) translate(-14px, 10px); }
.fan .cv:nth-child(2):not(:last-child) { transform: rotate(-3deg) translate(-4px, 4px); }
.fan .cv:last-child:not(:first-child) { transform: rotate(3deg) translate(8px, 0); }
@media (max-width: 760px) { .w-hero { grid-template-columns: 1fr; gap: 18px; } .w-hero .fan { max-width: 140px; margin-left: 14px; } }
.sec { border-top: 1px solid var(--rule); padding: 30px 0 34px; }
.sec-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.sec-h h2 { font: 600 24px/1.2 var(--serif); margin: 0; }
.sec-h span { font: 400 14px/1 var(--sans); color: var(--ink-soft); }
.lang-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.lang-filter button { border: 1px solid var(--rule); background: var(--white); border-radius: 99px; padding: 8px 12px; font: 500 14px/1 var(--sans); cursor: pointer; color: var(--ink); }
.lang-filter button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lang-filter button span { opacity: .6; margin-left: 4px; }
.eds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ed { display: grid; grid-template-columns: 1fr; gap: 14px; border: 1px solid var(--rule); background: var(--white); border-radius: 10px; padding: 14px; position: relative; align-items: start; }
.ed[hidden] { display: none; }
.ed.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ed .cv.ph { padding: 8px 6px 6px 12px; }
.ed .cv.ph b { font-size: 11px; }
.ed .cv.ph small { font-size: 9px; }
.ed .cv.ph em { font-size: 16px; }
.ed h3 { font: 600 16px/1.25 var(--serif); margin: 0 0 4px; }
.ed h3 a { text-decoration: none; }
.ed .meta { font: 400 13px/1.4 var(--sans); color: var(--ink-soft); margin: 0 0 8px; }
.ed .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tag { font: 500 11px/1 var(--sans); border-radius: 99px; padding: 5px 8px; background: var(--paper-deep); }
.tag.canon { background: var(--seal); color: var(--paper); }
.ed .links { display: flex; gap: 12px; font: 500 13px/1 var(--sans); margin-top: 8px; }
.ed-role { margin: -2px 0 10px; font: 400 14px/1.4 var(--sans); color: var(--ink-soft); }
.ed-pills a b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ed-pills .ed-t { font-weight: 400; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-pills a[aria-current] .ed-t { opacity: .85; }
/* Search in this book/issue, right under the hero buttons */
.d-find { margin: 18px 0 0; max-width: 620px; }
.d-find .find2 { max-width: none; }
.d-find .kwic2 { margin-top: 10px; }
/* Book page: editions grouped for reading */
.ed-group + .ed-group { margin-top: 26px; }
.ed-group[hidden] { display: none; }
.ed-group-h { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 12px; }
.ed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ed-actions .ed-more { font: 500 13px/1 var(--sans); margin-left: 4px; }

/* Texts of tplegacy.net: temporary templates (docs/spec/00-content-types.md §9) */
.text-page { padding-bottom: 56px; }
.text-page h1 { font: 600 clamp(30px, 4.4vw, 48px)/1.08 var(--serif); letter-spacing: -.02em; margin: 6px 0 12px; }
.text-page .source-line { font: 400 14px/1.5 var(--sans); color: var(--ink-soft); margin: 0 0 18px; }
.text-page .prose { max-width: var(--measure); font-size: 18px; line-height: 1.7; }
.text-page .prose h2 { font: 600 24px/1.25 var(--serif); margin: 1.6em 0 .5em; }
.in-essence { background: var(--white); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 18px; max-width: var(--measure); margin: 0 0 24px; }
.in-essence h2 { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 10px; }
.in-essence ul { margin: 0; padding-left: 18px; }
.text-list { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.text-list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.text-list time { font: 400 13px/1.6 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.text-list small { color: var(--ink-soft); font: 400 13px/1 var(--sans); }
.text-meta { margin-top: 32px; max-width: var(--measure); }
.years-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 13px/1.4 var(--sans); }
.years-line small { color: var(--ink-soft); }
.callout { background: var(--white); border-left: 3px solid var(--seal); padding: 10px 14px; border-radius: 4px; max-width: var(--measure); }
.link-card { display: flex; gap: 12px; align-items: center; border: 1px solid var(--rule); border-radius: 8px; padding: 10px; text-decoration: none; max-width: var(--measure); background: var(--white); }
.link-card small { display: block; color: var(--ink-soft); }
.data-table { border-collapse: collapse; width: 100%; max-width: 760px; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
@media (max-width: 600px) { .text-list li { grid-template-columns: 1fr; gap: 2px; } }

/* Plain pages (about, policies…): the title and text start under the first menu item, as on sermons */
@media (min-width: 1061px) { .std-page { padding-left: calc(clamp(16px, 4vw, 40px) + var(--nav-text)); } }