/* Hugh of Saint Victor — The line of years, in the Ars Inquirendi exhibition register. The palette, the
   wrap, the stage, the controls, the buttons, the note boxes, the gallery, the source list, the
   attestation table and the key-sentence list are the Hugh I stylesheet unchanged; what follows the
   marker is what the photographed leaf, the pointer along the years and the chart of the drift need. */
:root { --ink:#0b0c12; --ink-2:#14161f; --ink-3:#1c1f2b; --gold:#d9b25c; --cream:#eae6da; --muted:#b9b4aa; --paper-1:#eee2c4; --serif:Georgia,'Iowan Old Style','Palatino Linotype',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --max-width:1440px; --line:rgba(234,230,218,0.16); --line-gold:rgba(217,178,92,0.45); }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; }
a { color: var(--gold); text-decoration-color: var(--line-gold); }
a:hover { color: var(--cream); }
a:focus-visible, button:focus-visible, .hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; margin: 0 0 0.5em; }
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 3rem); }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.site-header .home-link { font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.02em; }
.header-nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.header-nav a { color: var(--muted); }
.exhibition-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.masthead { padding: 2.5rem 0 1.5rem; }
.masthead h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.15em; }
.masthead .subtitle { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin: 0 0 1rem; }
.masthead .context { max-width: 72ch; color: var(--muted); }
.stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem; align-items: start; padding-bottom: 2rem; }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; } }
.reading-col { position: sticky; top: 1rem; }
.control { border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem; margin: 0 0 0.8rem; background: var(--ink-2); }
.control h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.value { font-family: var(--serif); color: var(--paper-1); margin: 0.2rem 0 0.6rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.btn { font: inherit; min-height: 44px; padding: 0.4rem 0.9rem; background: transparent; color: var(--cream); border: 1px solid var(--line-gold); border-radius: 8px; cursor: pointer; }
.btn:hover { background: rgba(217,178,92,0.12); }
.btn.primary { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 600; }
.note-box { border-left: 3px solid var(--line-gold); padding: 0.5rem 0.9rem; background: rgba(217,178,92,0.06); color: var(--muted); font-size: 0.92rem; margin: 0.9rem 0; }
.prose { padding: 1.5rem 0; max-width: 78ch; }
.prose p { margin: 0 0 1rem; }
.rubric { font-family: var(--serif); font-style: italic; color: var(--paper-1); }
.sources { padding: 1rem 0 3rem; }
.source-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.source-list li { border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1.1rem; background: var(--ink-2); }
.source-list h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.credit { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.92rem; }
.note { margin: 0; color: var(--muted); font-size: 0.9rem; }
.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0 3rem; color: var(--muted); font-size: 0.9rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; padding: 0.5rem 0 1.5rem; }
.gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); overflow: hidden; }
.gallery img { display: block; width: 100%; height: auto; background: #2a2418; }
.gallery figcaption { padding: 0.7rem 0.9rem 0.9rem; font-size: 0.92rem; color: var(--muted); }
.gallery figcaption strong { color: var(--paper-1); font-weight: 500; }
.latin { font-family: var(--serif); color: var(--paper-1); }
.latin p { margin: 0 0 0.8rem; }
.table-wrap { overflow-x: auto; padding-bottom: 0.5rem; }
.attest { border-collapse: collapse; font-size: 0.9rem; min-width: 46rem; width: 100%; }
.attest thead th:nth-child(2), .attest tbody td:nth-child(2) { width: 7rem; }
.attest th, .attest td { text-align: left; vertical-align: top; padding: 0.45rem 0.8rem 0.45rem 0; border-bottom: 1px solid var(--line); }
.attest thead th { color: var(--gold); font-family: var(--serif); font-weight: 500; white-space: nowrap; }
.attest tbody th { color: var(--paper-1); font-weight: 500; font-family: var(--serif); width: 12rem; }
.attest td { color: var(--muted); }
.grade { display: inline-block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line-gold); border-radius: 999px; padding: 0.1rem 0.55rem; color: var(--paper-1); white-space: nowrap; }
.keys { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.8rem; counter-reset: key; }
.keys li { border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem; background: var(--ink-2); }
.keys .lat { font-family: var(--serif); color: var(--paper-1); margin: 0 0 0.4rem; }
.keys .eng { margin: 0 0 0.4rem; }
.keys .note { margin: 0 0 0.4rem; }
.warrants { margin: 0; font-size: 0.9rem; }
/* --- additions for the line of years --- */
.leaf-col { min-width: 0; }
.leaf-frame { position: relative; border: 1px solid var(--line-gold); border-radius: 10px; background: var(--ink-2); overflow: auto; max-height: 78vh; scrollbar-color: var(--line-gold) transparent; }
.leaf-frame img { display: block; width: 100%; height: auto; background: #2a2418; }
.leaf-band { position: absolute; left: 0; right: 0; top: 0; height: 2%; background: rgba(217,178,92,0.22); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); pointer-events: none; }
.leaf-caption { font-size: 0.9rem; color: var(--muted); margin: 0.5rem 0 0.9rem; }
.leaf-caption strong { color: var(--paper-1); font-weight: 500; }
.readout { border: 1px solid var(--line-gold); border-radius: 10px; background: var(--ink-2); padding: 0.8rem 1rem; margin: 0 0 0.9rem; }
.readout h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.readout dl { display: grid; grid-template-columns: 11rem 1fr; gap: 0.3rem 0.9rem; margin: 0; }
.readout dt { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.15rem; }
.readout dd { margin: 0; color: var(--cream); }
.readout .lat { font-family: var(--serif); color: var(--paper-1); display: block; margin-top: 0.2rem; }
.readout .flagged { color: var(--paper-1); border-left: 3px solid var(--gold); padding-left: 0.6rem; }
.read-across { font-family: var(--serif); color: var(--paper-1); border-left: 3px solid var(--line-gold); padding: 0.4rem 0 0.4rem 0.8rem; margin: 0.6rem 0 0; }
@media (max-width: 560px) { .readout dl { grid-template-columns: 1fr; gap: 0.1rem; } .readout dt { padding-top: 0.5rem; } }
.year-box { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.5rem; }
.year-box label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
input[type="number"], select { font: inherit; min-height: 44px; padding: 0.3rem 0.5rem; color: var(--cream); background: var(--ink); border: 1px solid var(--line-gold); border-radius: 8px; }
input[type="number"] { width: 7rem; font-family: var(--serif); font-size: 1.25rem; }
select { width: 100%; max-width: 100%; }
input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--gold); }
.find-person { display: grid; gap: 0.5rem; }
.find-person p { margin: 0; }
.chart-wrap { overflow-x: auto; padding-bottom: 0.5rem; max-width: 100%; min-width: 0; }
.chart { width: 100%; min-width: 34rem; height: auto; display: block; }
.chart-axis { stroke: var(--gold); stroke-width: 1.5; }
.chart-zero { stroke: var(--line-gold); stroke-width: 1; stroke-dasharray: 4 5; }
.chart-label { fill: var(--muted); font-size: 12px; font-family: inherit; }
.chart-band-label { fill: var(--gold); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.mark { cursor: default; }
.mark line { stroke: var(--paper-1); stroke-width: 1.4; }
.mark circle { fill: var(--paper-1); }
.mark.emperor line { stroke: #9fc0d8; }
.mark.emperor circle { fill: #9fc0d8; }
.mark:hover line, .mark:focus line, .mark:hover circle, .mark:focus circle { stroke: var(--gold); fill: var(--gold); }
.mark:focus { outline: none; }
.mark:focus rect { fill: rgba(217,178,92,0.18); }
.tick { stroke: #d78c78; stroke-width: 1.5; }
.chart-pointer { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-readout { min-height: 3em; font-family: var(--serif); color: var(--paper-1); margin: 0.3rem 0 0.6rem; }
.chart-key { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; color: var(--muted); font-size: 0.9rem; margin: 0 0 0.8rem; }
.chart-key span::before { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-right: 0.4rem; background: var(--paper-1); }
.chart-key .emperor::before { background: #9fc0d8; }
.chart-key .flagged::before { background: #d78c78; border-radius: 0; width: 0.2rem; height: 0.9rem; vertical-align: -0.1rem; }
.persons { border-collapse: collapse; font-size: 0.9rem; min-width: 52rem; }
.persons th, .persons td { text-align: left; vertical-align: top; padding: 0.35rem 0.8rem 0.35rem 0; border-bottom: 1px solid var(--line); }
.persons thead th { position: sticky; top: 0; background: var(--ink); color: var(--gold); font-family: var(--serif); font-weight: 500; white-space: nowrap; z-index: 1; }
.persons tbody th { color: var(--paper-1); font-weight: 500; font-family: var(--serif); white-space: nowrap; }
.persons td { color: var(--muted); }
.persons td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.persons .off { color: var(--paper-1); }
.persons-wrap { overflow-x: auto; max-height: 30rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 0 0.9rem; }
.flag-list { list-style: none; padding: 0; margin: 0.3rem 0 1rem; display: grid; gap: 0.2rem; color: var(--muted); font-size: 0.92rem; }
.flag-list strong { color: var(--paper-1); font-weight: 500; }
.flagged-rows { max-height: 14rem; overflow-y: auto; border-left: 3px solid rgba(215,140,120,0.55); padding: 0.3rem 0 0.3rem 0.8rem; margin: 0 0 1rem; }
.flagged-rows ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; font-size: 0.92rem; color: var(--muted); }
.count-line { color: var(--muted); font-size: 0.92rem; }
.count-line strong { color: var(--paper-1); font-weight: 500; }
@media (max-width: 900px) { .reading-col { position: static; } .leaf-frame { max-height: 62vh; } }
@media (max-width: 600px) { .persons { min-width: 40rem; } .chart { min-width: 26rem; } .attest { min-width: 34rem; } }
/* The side gutter. `.wrap` sets one, but every section rule inherited above re-sets padding with a
   shorthand, which takes it away again: the stage keeps its gutter (it sets padding-bottom alone)
   while the masthead, the prose and the footer run flush to both edges, which reads as broken at
   1440 and puts the text against the screen at 360. One rule, declared last, gives it back to all
   of them. (This is the one place where this stylesheet parts from Hugh I's, on purpose.) */
.site-header, .masthead, .prose, .sources, .site-footer { padding-left: clamp(1rem, 3vw, 3rem); padding-right: clamp(1rem, 3vw, 3rem); }

/* the attestation and persons tables may run wider than the prose measure, but not to the edges of a wide screen */
#added, #true { max-width: 72rem; }
#added > p, #true > p { max-width: 78ch; }
.grade { white-space: normal; display: inline-block; line-height: 1.3; }
.attest thead th:nth-child(2), .attest tbody td:nth-child(2) { width: 9rem; }

.source-list li { min-width: 0; }
.source-list li, .source-list li * { overflow-wrap: anywhere; }