/* Hugh of Saint Victor — Addressable memory, in the Ars Inquirendi exhibition register. The palette, the
   wrap, the stage, the controls, the buttons, the note boxes, the gallery and the source list are the
   Regiomontanus stylesheet unchanged; what follows the marker is what the number line and its prompts 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; }
/* --- additions for the line of numbers --- */
.line-col { min-width: 0; }
.task { font-family: var(--serif); color: var(--paper-1); margin: 0 0 0.8rem; max-width: 62ch; }
.line-frame { border: 1px solid var(--line-gold); border-radius: 10px; background: var(--ink-2); padding: 0.6rem 0.5rem; }
.line { display: flex; gap: 0.4rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 0.2rem 0.1rem 0.6rem; scrollbar-color: var(--line-gold) transparent; }
.point { flex: 0 0 auto; width: 9.5rem; min-width: 44px; min-height: 44px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; font: inherit; text-align: center; color: var(--cream); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.35rem; cursor: pointer; }
.point:hover { border-color: var(--line-gold); background: rgba(217,178,92,0.08); }
.point.current { border-color: var(--gold); background: rgba(217,178,92,0.14); }
.point .num { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--gold); min-height: 1.5rem; }
.point.current .num { color: var(--cream); }
.point .item { display: block; font-size: 0.8rem; line-height: 1.3; min-height: 2.6rem; }
.point .item .lat { display: block; font-family: var(--serif); color: var(--paper-1); }
.point .item .eng { display: block; color: var(--muted); font-size: 0.75rem; }
/* The stages withdraw the words, and then the numbers: hidden, but the line keeps its shape. */
.line.hide-items .item { visibility: hidden; }
.line.hide-numbers .num { visibility: hidden; }
.line.hide-items .point { width: 4rem; }
.line.hide-items .point .item { min-height: 0; }
.line-note { font-size: 0.9rem; color: var(--muted); max-width: 62ch; margin: 0.6rem 0 0.9rem; }
.prompt { border: 1px solid var(--line-gold); border-radius: 10px; background: var(--ink-2); padding: 0.8rem 1rem; margin: 0 0 0.9rem; }
.prompt-kind { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.3rem; }
.prompt-text { font-family: var(--serif); font-size: 1.15rem; color: var(--paper-1); margin: 0 0 0.7rem; }
.answer { font-family: var(--serif); color: var(--cream); background: rgba(217,178,92,0.10); border-left: 3px solid var(--gold); padding: 0.5rem 0.8rem; margin: 0.8rem 0 0.6rem; }
.btn.right { border-color: rgba(150,200,150,0.55); }
.btn.wrong { border-color: rgba(215,140,120,0.55); }
.btn.on, .tab.on { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 600; }
.stage-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.6rem; }
.tab { font: inherit; min-height: 44px; padding: 0.3rem 0.7rem; display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; color: var(--cream); border: 1px solid var(--line-gold); border-radius: 8px; cursor: pointer; }
.tab:hover { background: rgba(217,178,92,0.12); }
.tab-n { font-family: var(--serif); color: var(--gold); }
.tab.on .tab-n { color: var(--ink); }
.quote { margin: 0; border-left: 3px solid var(--line-gold); padding: 0.2rem 0 0.2rem 0.8rem; }
.quote .lat { font-family: var(--serif); color: var(--paper-1); margin: 0 0 0.4rem; }
.quote .eng { color: var(--cream); margin: 0 0 0.4rem; font-size: 0.95rem; }
.quote-note { color: var(--muted); font-size: 0.85rem; }
ul.tally { list-style: none; padding: 0; margin: 0.3rem 0 0.7rem; display: grid; gap: 0.15rem; font-size: 0.9rem; color: var(--muted); }
ul.tally strong { color: var(--paper-1); font-weight: 500; }
.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; }
.english p { color: var(--cream); }
.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; }
@media (max-width: 600px) { .point { width: 8rem; } .attest { min-width: 34rem; } .btn, .tab { padding-left: 0.6rem; padding-right: 0.6rem; } }

/* The side gutter: `.prose` re-sets padding with a shorthand and takes `.wrap`'s gutter away, so the
   prose sections ran flush to both edges (as Hugh II's stylesheet already notes). Declared last. */
.site-header, .masthead, .prose, .sources, .site-footer { padding-left: clamp(1rem, 3vw, 3rem); padding-right: clamp(1rem, 3vw, 3rem); }

/* the attestation table 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; }