:root {
  --paper: #f7f5ef;
  --surface: #fffefb;
  --ink: #222321;
  --muted: #686a64;
  --line: #d7d4ca;
  --line-strong: #9c9a91;
  --accent: #165f5b;
  --accent-soft: #dceae7;
  --signal: #93482f;
  --mark: #f1dc84;
  --focus: #176f98;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --radius: 4px;
  --shadow: 0 8px 24px rgb(35 34 29 / 7%);
}

[data-theme="dark"], .dark {
  --paper: #1d1d1a;
  --surface: #242521;
  --ink: #e4e0d5;
  --muted: #aaa89f;
  --line: #45463f;
  --line-strong: #77786e;
  --accent: #77b8ae;
  --accent-soft: #273d39;
  --signal: #d48b70;
  --mark: #695e2e;
  --focus: #7fc4e4;
  --shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); letter-spacing: 0; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
a:hover { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
button, select, input[type="search"] { border-radius: var(--radius); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 50; padding: .7rem 1rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 1rem; }
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.nav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-family: var(--serif); font-weight: 700; text-decoration: none; font-size: 1.08rem; }
.wordmark span { padding-left: .55rem; margin-left: .35rem; border-left: 1px solid var(--line-strong); color: var(--muted); font-family: var(--sans); font-size: .64rem; font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 1.4rem; font-size: .82rem; }
.nav-links a { text-decoration: none; }
.results-header select { border: 1px solid var(--line); padding: .4rem .5rem; background: var(--surface); }
.locale-toggle { color: var(--muted); font-size: .65rem; font-weight: 700; text-decoration: none; }
.theme-toggle { display: flex; align-items: center; gap: 1px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.theme-toggle button { display: grid; place-items: center; width: 27px; height: 25px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.theme-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.theme-toggle svg { width: 13px; height: 13px; stroke-width: 1.7; }
.search-band { border-bottom: 1px solid var(--line); background: var(--surface); }
.search-shell { padding: 42px 0 38px; }
.kicker { margin: 0 0 .7rem; color: var(--signal); font-size: .69rem; font-weight: 700; text-transform: uppercase; }
.search-shell h1 { margin: 0 0 1.3rem; font: 500 clamp(2rem, 4vw, 3.25rem)/1.05 var(--serif); }
.page-heading h1 { margin: 0 0 1.5rem; font: 500 clamp(2.3rem, 7vw, 4.7rem)/1 var(--serif); }
.search-form { max-width: 850px; }
.search-input-wrap { display: grid; grid-template-columns: 1fr auto; border-bottom: 2px solid var(--ink); }
.search-input-wrap input { min-width: 0; padding: 1rem 0; border: 0; background: transparent; font: 400 1.25rem/1.4 var(--serif); }
.search-input-wrap input:focus { outline: none; }
.search-input-wrap button, .primary-action { align-self: center; border: 1px solid var(--ink); padding: .7rem 1.3rem; background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer; }
.mode-selector { display: flex; width: fit-content; margin: 1rem 0 0; padding: 0; border: 1px solid var(--line); }
.mode-selector label { cursor: pointer; }
.mode-selector input { position: absolute; opacity: 0; }
.mode-selector span { display: block; padding: .5rem .85rem; color: var(--muted); font-size: .73rem; }
.mode-selector input:checked + span { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.mode-selector input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.examples { margin-top: 1rem; color: var(--muted); font: .85rem var(--serif); }
.examples button { padding: 0; border: 0; border-bottom: 1px dotted var(--line-strong); background: none; cursor: pointer; }
.results-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; padding-block: 40px 80px; }
.mobile-filter { display: none; }
.facets { align-self: start; position: sticky; top: 1rem; }
.facet-heading { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .7rem; border-bottom: 1px solid var(--ink); }
.facet-heading h2 { margin: 0; font: 600 1.1rem var(--serif); }
.facet-heading span { color: var(--muted); font-size: .58rem; }
.facets fieldset { display: grid; gap: .55rem; padding: 1.15rem 0; border: 0; border-bottom: 1px solid var(--line); }
.facets legend { margin-bottom: .7rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.facets label, .muted { color: var(--muted); font-size: .76rem; }
.results { min-width: 0; }
.results-header { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding-bottom: 1rem; border-bottom: 1px solid var(--ink); color: var(--muted); font-size: .75rem; }
.results-header p { margin: 0; }
.result-list { margin: 0; padding: 0; list-style: none; }
.result-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; padding: 28px 0 32px; border-bottom: 1px solid var(--line); }
.result-index { color: var(--signal); font: .7rem var(--sans); }
.result-card article > header { display: flex; justify-content: space-between; gap: 1rem; }
.result-nature { margin: 0 0 .35rem; color: var(--muted); font-size: .64rem; text-transform: uppercase; }
.result-card h2 { margin: 0; font: 600 1.45rem/1.2 var(--serif); }
.result-card h2 a { text-decoration: none; }
.year { color: var(--muted); font: 1rem var(--serif); }
.edition { margin: .4rem 0 0; color: var(--muted); font: .8rem var(--sans); }
.highlighted-passage { margin: 1.35rem 0; padding-left: 1.2rem; border-left: 2px solid var(--line-strong); font: 1.08rem/1.72 var(--serif); }
mark { padding: .05em .1em; background: var(--mark); color: var(--ink); }
.result-card footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.match-score { color: var(--muted); font-size: .64rem; }
.result-card footer nav { display: flex; gap: 1rem; }
.result-card footer button, .result-card footer a, .context-actions button { padding: 0; border: 0; border-bottom: 1px solid var(--line-strong); background: none; font-size: .7rem; text-decoration: none; cursor: pointer; }
.expanded-context { margin-top: 1.2rem; padding: 1rem 1.2rem; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.context-paragraph { color: var(--muted); font: .97rem/1.7 var(--serif); }
.context-paragraph.is-match { color: var(--ink); }
.context-actions { display: flex; justify-content: space-between; margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.empty-state, .error-state { padding: 90px 20px; text-align: center; }
.empty-state h2, .error-state h2 { margin: 1rem 0 .5rem; font: 500 1.7rem var(--serif); }
.empty-state p, .error-state p { color: var(--muted); font: 1rem var(--serif); }
.maze-mark { width: 48px; height: 48px; margin: auto; border: 1px solid var(--line-strong); box-shadow: inset 8px 0 var(--paper), inset 9px 0 var(--line-strong), inset 0 8px var(--paper), inset 0 9px var(--line-strong); transform: rotate(45deg); }
.skeleton { height: 240px; border-block: 1px solid var(--line); background: repeating-linear-gradient(0deg, transparent 0 34px, var(--line) 35px); opacity: .4; }
.htmx-indicator { display: none; }.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.page-heading { padding: 70px 0 48px; border-bottom: 1px solid var(--ink); }
.page-heading > p:last-of-type { max-width: 680px; color: var(--muted); font: 1.05rem/1.6 var(--serif); }
.corpus-page, .work-page, .related-page { padding-bottom: 80px; }
.work-row { display: grid; grid-template-columns: 45px 1fr auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.work-number { color: var(--signal); font-size: .65rem; }
.work-row p { margin: 0 0 .25rem; color: var(--muted); font-size: .68rem; }
.work-row h2 { margin: 0; font: 600 1.3rem var(--serif); }
.work-row h2 a { text-decoration: none; }
.work-tags { display: flex; gap: .4rem; }
.work-tags span, .reader-heading span, .relation-type { padding: .2rem .45rem; border: 1px solid var(--line); color: var(--muted); font-size: .6rem; text-transform: uppercase; }
.reader-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); width: min(1320px, calc(100% - 40px)); margin: 0 auto; }
.toc { position: sticky; top: 0; align-self: start; max-height: 100vh; padding: 42px 32px 42px 0; overflow: auto; border-right: 1px solid var(--line); }
.back-link { display: block; margin-bottom: 3rem; font-size: .7rem; text-decoration: none; }
.toc nav { display: grid; gap: .7rem; }
.toc nav a { color: var(--muted); font: .77rem/1.4 var(--serif); text-decoration: none; }
.reader { min-width: 0; padding: 64px max(30px, 7vw) 100px; }
.reader-heading, .reader-body, .reader-end { max-width: var(--reader-width); margin-inline: auto; }
.reader-heading { padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.reader-heading > p { margin: 0 0 .7rem; color: var(--signal); font-size: .72rem; text-transform: uppercase; }
.reader-heading h1 { margin: 0 0 1rem; font: 500 3rem/1.05 var(--serif); }
.reader-heading div { display: flex; flex-wrap: wrap; gap: .4rem; }
.reader-toolbar { position: sticky; top: 10px; z-index: 10; display: flex; justify-content: center; gap: .5rem; width: fit-content; margin: 18px auto 48px; padding: .45rem; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.reader-toolbar button { width: 36px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.reader-toolbar label { display: flex; align-items: center; gap: .35rem; padding-inline: .35rem; color: var(--muted); font-size: .62rem; }
.reader-toolbar input[type="range"] { width: 70px; accent-color: var(--accent); }
.reader-body { font: var(--reader-size)/var(--reader-leading) var(--serif); }
.reader-body hr { margin: 4rem 0 2rem; border: 0; border-top: 1px solid var(--line); }
.reader-paragraph { position: relative; margin: 0 0 1.25em; }
.reader-paragraph.poetry { white-space: pre-line; padding-left: 1.5rem; }
.reader-paragraph.quote { margin-inline: 2rem; color: var(--muted); }
.reader-paragraph:target { background: var(--accent-soft); outline: .6rem solid var(--accent-soft); }
.reader-paragraph a[role="doc-noteref"] { display: inline-block; margin-inline: .08em; color: var(--accent); font-family: var(--sans); font-size: .68em; text-decoration: none; vertical-align: super; }
.content-date { display: block; width: fit-content; margin-top: .5rem; color: var(--muted); font: .58rem var(--sans); }
::highlight(shared-quotation) { background: var(--mark); color: var(--ink); }
.reader-paragraph p, .reader-paragraph blockquote, .reader-paragraph pre { margin: 0; white-space: inherit; font: inherit; }
.anchor-copy { position: absolute; right: -2rem; top: .2rem; border: 0; background: none; color: var(--muted); opacity: 0; cursor: pointer; }
.reader-paragraph:hover .anchor-copy, .anchor-copy:focus { opacity: 1; }
.reader-end { display: flex; justify-content: space-between; margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--ink); font-size: .75rem; }
.shared-quote { max-width: var(--reader-width); margin: 1.5rem auto; padding: 1rem 1.2rem; border-left: 2px solid var(--accent); background: var(--accent-soft); }
.shared-quote blockquote { margin: .4rem 0 1rem; font: 1rem/1.6 var(--serif); }
.shared-quote button { border: 0; border-bottom: 1px solid var(--line-strong); background: none; font-size: .7rem; cursor: pointer; }
.footnotes { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--ink); font-size: .78em; }
.footnotes h2 { font: 500 1.5rem var(--serif); }
.footnotes ol { padding-left: 1.5rem; }.footnotes li { margin-bottom: 1.2rem; scroll-margin-top: 5rem; }
.footnotes li:target { background: var(--accent-soft); outline: .4rem solid var(--accent-soft); }
.footnotes p, .footnotes .nota { display: inline; margin: 0; }.note-back { display: block; margin-top: .3rem; font: .68rem var(--sans); }
.selection-quote { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: .45rem; padding: .65rem .9rem; border: 1px solid var(--line-strong); background: var(--ink); color: var(--paper); box-shadow: var(--shadow); cursor: pointer; }
.selection-quote[hidden] { display: none; }.selection-quote svg { width: 15px; }
.quote-dialog { width: min(680px, calc(100% - 24px)); max-height: 88vh; padding: 1.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.quote-dialog::backdrop { background: rgb(20 20 18 / 58%); }.quote-dialog h2 { margin-top: 0; font: 500 1.7rem var(--serif); }.quote-dialog h3 { margin-top: 1.5rem; font: 500 1.2rem var(--serif); }.quote-dialog h4 { margin: .8rem 0 .3rem; font-size: .65rem; }
.quote-dialog blockquote { padding-left: 1rem; border-left: 2px solid var(--line); font: 1rem/1.6 var(--serif); }.quote-dialog label { font-size: .68rem; }.dialog-close { float: right; width: 30px; height: 30px; border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; }
.copy-field { display: grid; grid-template-columns: 1fr auto; gap: .4rem; }.copy-field input, .copy-field textarea { width: 100%; padding: .55rem; border: 1px solid var(--line); background: var(--paper); font: .72rem/1.4 var(--sans); }.copy-field textarea { min-height: 68px; resize: vertical; }.copy-field button { border: 1px solid var(--line); background: var(--paper); font-size: .68rem; cursor: pointer; }
.page-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.edition-row { display: grid; grid-template-columns: 2fr 1fr 100px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
.work-page section { padding-top: 2rem; }.work-page section h2 { font: 500 1.6rem var(--serif); }
.relation-row { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.relation-row > div { display: flex; gap: .5rem; color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.relation-row h2 { font: 600 1.35rem var(--serif); }.relation-row p { max-width: 700px; color: var(--muted); font: 1rem/1.6 var(--serif); }
.relation-row meter { width: 180px; accent-color: var(--accent); }
.footer { display: flex; justify-content: space-between; padding-block: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .62rem; }

@media (max-width: 800px) {
  .shell { width: min(100% - 24px, 680px); }
  .nav { min-height: 58px; }.nav-links { gap: .8rem; }.nav-links a:nth-child(1) { display: none; }
  .search-shell { padding: 38px 0; }.search-shell h1 { font-size: 2.65rem; }
  .results-layout { display: block; padding-top: 18px; }.mobile-filter { display: block; width: 100%; padding: .65rem; border: 1px solid var(--line); background: var(--surface); }
  .facets { display: none; position: static; padding: 1rem 0; }.facets.is-open { display: block; }
  .results { margin-top: 1.5rem; }.result-card { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  .result-card footer { align-items: flex-start; flex-direction: column; }.result-card footer nav { flex-wrap: wrap; }
  .work-row { grid-template-columns: 32px 1fr; }.work-tags { grid-column: 2; flex-wrap: wrap; }
  .reader-layout { display: block; width: 100%; }.toc { position: static; max-height: none; padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); }.toc nav { display: none; }.back-link { margin: 0; }
  .reader { padding: 36px 20px 70px; }.reader-heading h1 { font-size: 2.2rem; }.reader-toolbar { top: 5px; max-width: 100%; overflow-x: auto; justify-content: flex-start; }.reader-toolbar label { min-width: max-content; }
  .anchor-copy { right: 0; }.edition-row { grid-template-columns: 1fr 1fr; }.footer { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
