/* Hugh of Saint Victor — Construct the Ark, in the Ars Inquirendi exhibition register. Everything down
   to the marker is the Hugh II stylesheet (itself Hugh I's): the same palette, wrap, stage, controls,
   buttons, note boxes, gallery, source list and attestation table, so the three Hugh machines are one
   exhibition and not three. What follows the marker is what THIS machine needs: the two-column stage
   with the edition on the left and the drawing sticky on the right, the step list and its four states,
   the marked words, and the drawing's own frame. Clean at 360; deliberate at 1440. */
: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); }
/* At the widths where the stage under it is two columns, the masthead's paragraph is set in two as
   well, each of the old measure: it kept to 72ch and left the right half of a wide screen empty
   (operator, 2026-09-16: "why this gap on the right?"). One paragraph, read down and then across. */
@media (min-width: 901px) { .masthead .context { max-width: none; columns: 2; column-gap: clamp(2rem, 4vw, 4rem); } }
.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 Ark --- */

/* The stage: the edition on the left, the drawing on the right and sticky, one column below 900 with
   the drawing on top -- a visitor on a phone should see what the instruction did without scrolling. */
.stage { align-items: start; }
.reading-col, .draw-col { min-width: 0; }
.reading-col { position: static; }
.draw-col { align-self: start; }
/* Both halves of the rule are stated in media queries, and neither is left to the bare selector: a
   later unconditioned declaration would beat the shared stylesheet's own @media (max-width: 900px)
   and hold the two columns open on a phone, where they do not fit. */
@media (min-width: 901px) { .stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .draw-col { position: sticky; top: 1rem; } }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; } .draw-col { position: static; order: -1; } }

/* The drawing. The SVG is sized to its column and fitted inside it (preserveAspectRatio "meet"), so
   the field never distorts and nothing jumps when a step is applied: the viewBox is fixed for the
   whole construction, and components appear in their places. */
.ark-stage { position: relative; border: 1px solid var(--line-gold); border-radius: 10px; background: var(--ink); overflow: hidden; }
.ark-field { display: block; width: 100%; height: 90vh; max-height: 90vh; background: var(--ink); }
#ark-svg .step { transition: filter 120ms ease; }
#ark-svg .step.lit { filter: brightness(1.8); }

/* The figures Hugh paints -- the Lamb, the icons, the evangelists' beasts, the hundred and twenty
   climbers, the Majesty and its seraphim -- are ours in every line, so they come away in one move:
   the "Figures" switch puts `no-figures` on the drawing (and on the minimap, which is the same plan
   in little), and what is left is the geometry Hugh measures out. `display: none` rather than an
   opacity, so that nothing of them is left on the screen, and so that the check can see it. */
.no-figures .figure { display: none !important; }
@media (max-width: 900px) { .ark-field { height: 64vh; max-height: 64vh; } }
@media (prefers-reduced-motion: reduce) { #ark-svg .step { transition: none; } }

.controls { display: grid; gap: 0.5rem; margin: 0.7rem 0 0; }
.controls .note { margin: 0.1rem 0 0; }
.btn.small { font-size: 0.85rem; padding: 0.3rem 0.7rem; }
.btn.icon { min-width: 44px; font-size: 1.15rem; line-height: 1; padding: 0.3rem 0.6rem; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; }
.btn.primary[disabled]:hover { background: var(--gold); }
.progress { font-family: var(--serif); color: var(--paper-1); margin: 0.7rem 0 0; border-left: 3px solid var(--line-gold); padding: 0.2rem 0 0.2rem 0.75rem; }

/* The side rule is a WE MUST CHOOSE that governs the whole picture, so it is stated in words and
   offered as a choice rather than settled silently. */
.side-rule { border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); padding: 0.6rem 1rem 0.8rem; margin: 0.8rem 0 0; }
.side-rule legend { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 0.35rem; }
.side-rule > .note { margin: 0 0 0.6rem; }
.side-rule label { display: flex; gap: 0.55rem; align-items: flex-start; min-height: 44px; padding: 0.3rem 0; cursor: pointer; color: var(--cream); font-size: 0.95rem; }
.side-rule label .note { display: inline; font-size: 0.85rem; }
.side-rule input { margin: 0.45rem 0 0; accent-color: var(--gold); }

/* The edition. Four states: drawn, current, still to come, and lit by the pointer resting on its
   lines in the drawing. */
.steps { list-style: none; padding: 0; margin: 0.7rem 0 0; display: grid; gap: 0.7rem; }
@media (min-width: 901px) { .steps { max-height: 90vh; overflow-y: auto; padding-right: 0.7rem; scrollbar-color: var(--line-gold) transparent; } }
.step-entry { border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: 10px; background: var(--ink-2); padding: 0.8rem 1rem; scroll-margin: 1rem; min-width: 0; }
.step-entry.pending { opacity: 0.6; }
.step-entry.next { opacity: 1; border-left-color: var(--line-gold); }
.step-entry.current { border-left-color: var(--gold); background: var(--ink-3); opacity: 1; }
.step-entry.lit { border-color: var(--line-gold); }
.step-entry.text-only { border-style: dashed; }
.step-entry .where { margin: 0 0 0.25rem; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.step-entry .where .n { display: inline-block; min-width: 1.7rem; color: var(--paper-1); font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0; }
.step-entry h3 { font-size: 1.05rem; margin: 0 0 0.45rem; }
.step-entry .lat { font-family: var(--serif); color: var(--paper-1); margin: 0 0 0.55rem; overflow-wrap: break-word; }
.step-entry .eng { margin: 0 0 0.55rem; }
.step-entry .verdict { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.step-entry .warrant { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.92rem; }
.step-entry .step-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.step-entry .alternatives { display: grid; gap: 0.3rem; margin: 0.6rem 0 0; }
.step-entry .alternatives label { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
mark { background: rgba(217,178,92,0.22); color: var(--paper-1); border-bottom: 1px solid var(--line-gold); border-radius: 2px; padding: 0 0.12em; }

/* The verdicts, in the reading column and in the attestation table alike: the table writes them out
   ("WE MUST CHOOSE") and the steps carry the key ("choose"), so both spellings are coloured here. */
.grade-says, .grade-hugh-says { border-color: rgba(217,178,92,0.75); color: var(--gold); }
.grade-infer, .grade-we-infer { border-color: rgba(159,192,216,0.6); color: #9fc0d8; }
.grade-choose, .grade-we-must-choose { border-color: rgba(215,140,120,0.7); color: #d78c78; }
.grade-not-drawn { border-style: dashed; color: var(--muted); }

.not-drawn-list { list-style: none; padding: 0; margin: 0.6rem 0 1rem; display: grid; gap: 0.7rem; color: var(--muted); }
.not-drawn-list li { border-left: 3px solid var(--line); padding-left: 0.85rem; }
.not-drawn-list strong { color: var(--paper-1); font-weight: 500; }
.not-drawn-list .where { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 600px) { .attest { min-width: 38rem; } .step-entry { padding: 0.7rem 0.8rem; } }

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

/* The ark's attestation table has six columns, not five: a group of components names the steps it
   covers before its grade. Declared last, after the shared rules that size column two as the grade. */
.attest { min-width: 52rem; }
.attest thead th:nth-child(2), .attest tbody td:nth-child(2) { width: 4.5rem; }
.attest thead th:nth-child(3), .attest tbody td:nth-child(3) { width: 9rem; }
@media (max-width: 600px) { .attest { min-width: 40rem; } }

/* the witness: where each instruction begins on the Cambridge leaf, and what the copy reads there */
.leaf-note { font-size: 0.86rem; color: var(--muted); margin: 0.4rem 0 0.6rem; border-left: 2px solid var(--line-gold); padding-left: 0.7rem; }
.leaf-note .lat { color: var(--paper-1); }
.credit a { color: var(--gold); }

/* --- navigating the drawing (2026-09-15). The field is 144 cubits across and 330 down and the pane
   is landscape, so at "whole field" a label of one cubit is three or four pixels: legible only when
   the view can be taken to it. These are the controls that take it there, and the little picture of
   the whole field that says where "there" is. */

.zoom-level { align-self: center; min-width: 3.2ch; padding: 0 0.3rem; font-family: var(--serif); color: var(--paper-1); font-variant-numeric: tabular-nums; }
.controls .regions { gap: 0.35rem; }
.follow-line { margin: 0; }
.follow-line label { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; min-height: 44px; cursor: pointer; color: var(--cream); font-size: 0.92rem; }
.follow-line label .note { font-size: 0.86em; color: var(--muted); }
.follow-line input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--gold); flex: none; }
kbd { font-family: var(--sans); font-size: 0.85em; border: 1px solid var(--line-gold); border-radius: 4px; padding: 0 0.3em; color: var(--paper-1); }

/* The minimap. It is always shown, never only when zoomed: the shape of the field -- long, narrow,
   the Ark lying down the middle of it -- is half of what a visitor has to learn, and a marker moving
   over it while the view moves is the cheapest way to teach it. Every move it offers is also on a
   button or a key (the regions, the zoom, shift with an arrow), so it is hidden from assistive
   technology rather than made into a control with no name. */
/* Sized by its HEIGHT, not its width: the field is more than twice as tall as it is wide, so a
   minimap fixed at 132px across is 302px down, which is most of a short pane. At a desktop viewport
   the cap is the 132px the design asks for; on a laptop, a tablet, or a phone held sideways the
   fraction of the pane governs instead and the little picture stays little. */
#minimap { position: absolute; right: 0.6rem; bottom: 0.6rem; border: 1px solid var(--line-gold); border-radius: 6px; overflow: hidden; background: var(--ink); box-shadow: 0 2px 12px rgba(0,0,0,0.55); touch-action: none; cursor: crosshair; }
#minimap svg { display: block; width: auto; height: min(302px, 40vh); max-width: 30vw; aspect-ratio: 144 / 330; background: var(--ink); }
#minimap g.step { opacity: 0.85; }
#minimap-view { fill: rgba(217,178,92,0.14); stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
@media (max-width: 900px) { #minimap svg { height: min(220px, 30vh); } }
@media (max-width: 599px) { #minimap { display: none; } }

/* --- raising the Ark (2026-09-15). Hugh's Chapter II does not describe a building: it tells the
   reader to LIFT the plan they have just drawn. The switch says which of the two the visitor is
   looking at, the slider is how far up the lifting has got, and both belong beside the drawing --
   the switch above it, where a visitor sees it before wondering whether the flat thing is all there
   is, and the slider among the controls with the zoom. */
.view-mode { border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); padding: 0.5rem 1rem 0.7rem; margin: 0 0 0.7rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.2rem; }
.view-mode legend { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 0.35rem; }
.view-mode label { display: flex; gap: 0.5rem; align-items: center; min-height: 44px; cursor: pointer; color: var(--cream); font-family: var(--serif); font-size: 1rem; }
.view-mode input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--gold); flex: none; }
.view-mode .note { flex-basis: 100%; margin: 0.1rem 0 0; }

/* The slider is a real 44px target on a phone: the thumb is drawn large and the track sits in the
   middle of the row, rather than the browser's default eight-pixel ribbon. */
.raise-line { display: flex; align-items: center; gap: 0.7rem; margin: 0; min-height: 44px; }
.raise-line label { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; flex: none; }
.raise-line input[type="range"] { flex: 1 1 auto; min-width: 0; max-width: 22rem; height: 44px; margin: 0; accent-color: var(--gold); background: transparent; cursor: pointer; }
.raise-hint { color: var(--gold); }

/* The division in the reading column: thirty-nine instructions draw the plan, and six raise it. */
.steps-heading { list-style: none; font-family: var(--serif); color: var(--gold); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem 0 0.1rem; border-top: 1px solid var(--line-gold); margin-top: 0.3rem; }
.step-entry.raised .where .n { color: var(--gold); }

/* --- the short route (2026-09-15). A first visit is eight stops: the panel sits at the top of the
   drawing column, above the drawing it is talking about, so that reading it and watching the Ark
   build itself are one movement of the eye rather than two. It is the visitor's own words for the
   construction, in three short paragraphs, and it never takes the reading column with it. */
.tour { border: 1px solid var(--line-gold); border-radius: 10px; background: var(--ink-2); padding: 0.8rem 1rem 0.9rem; margin: 0 0 0.7rem; }
.tour:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tour .tour-where { margin: 0 0 0.2rem; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.tour h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.tour .tour-part { margin: 0 0 0.5rem; font-size: 0.95rem; }
.tour .tour-label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.tour .tour-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0 0.5rem; }
.tour .note { margin: 0; }
.controls .btn-row.route { align-items: center; gap: 0.5rem; }
.controls .btn-row.route .note { flex: 1 1 12rem; min-width: 0; }
/* The invitation in the reading column is the whole sentence, and the whole sentence is the target:
   a 44px row that reads as a line of prose rather than as a second button bar. */
.tour-invite { margin: 0 0 0.7rem; }
/* While the route is open the drawing gives up some of its height, so that the stop and what the
   stop has just built are on the screen at the same time rather than a scroll apart. */
body.touring .ark-field { height: 56vh; max-height: 56vh; }
@media (max-width: 900px) { body.touring .ark-field { height: 44vh; max-height: 44vh; } }
.link-btn { font: inherit; text-align: left; display: block; width: 100%; min-height: 44px; padding: 0.4rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-gold); color: var(--gold); cursor: pointer; }
.link-btn:hover { color: var(--cream); }

/* What changed sides when the drawing was turned over: three pulses of brightness on the groups that
   actually moved, and nothing else -- no size, no position, no layout, so the drawing under it is
   exactly the drawing that was there. A visitor who has asked for less motion is given the same
   emphasis held still. */
@keyframes ark-moved { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(2.4); } }
#ark-svg g.step.moved { animation: ark-moved 533ms ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { #ark-svg g.step.moved { animation: none; filter: brightness(1.9); } }

/* --- the walk (2026-09-15). The third view is the raised view entered: a visitor stands inside the
   building at the height of a person and walks about in it. The panel takes the drawing pane's own
   footprint, so nothing on the page moves when it opens; the canvas fills it; the words that say
   where the visitor is standing, the way out, and the two buttons that lift and lower them lie over
   the view at its edges, where they are out of the way of the thing being looked at. */
.walk { margin: 0; }
.walk-view { position: relative; height: 90vh; max-height: 90vh; border: 1px solid var(--line-gold); border-radius: 10px; background: var(--ink); overflow: hidden; }
/* the canvas is stretched over the view by its corners rather than by a percentage height: in the
   full screen the view's height comes from the flex layout, and a percentage of that is not a
   height every browser will resolve */
#walk-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; background: var(--ink); touch-action: none; cursor: crosshair; }
#walk-canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
@media (max-width: 900px) { .walk-view { height: 64vh; max-height: 64vh; } }
body.touring .walk-view { height: 56vh; max-height: 56vh; }
@media (max-width: 900px) { body.touring .walk-view { height: 44vh; max-height: 44vh; } }

/* The strip along the top: what the keys do, and the way out. Both are over the picture, so both sit
   on a panel of the ink behind them rather than on the drawing itself. */
.walk-top { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.4rem; padding: 0.5rem 0.6rem; pointer-events: none; }
.walk-top > * { pointer-events: auto; }
/* the hint and the HUD are read, not used: a click on either belongs to the view under them */
.walk-hint { pointer-events: none; margin: 0; flex: 1 1 14rem; min-width: 0; max-width: 34rem; font-size: 0.82rem; line-height: 1.45; color: var(--muted); background: rgba(11,12,18,0.78); border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.6rem; }
.walk-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 0 0 auto; }
.walk-buttons .btn { background: rgba(11,12,18,0.82); }

/* Lane B2 (operator, 2026-09-16, after walking again): the hint bar had become a wall of text over
   the top third of the view. It is one line now, and everything else it used to say is behind the
   Keys disclosure, which opens OVER the view instead of pushing the buttons about. */
.walk-signs { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; font-size: 0.82rem; color: var(--paper-1); background: rgba(11,12,18,0.82); border: 1px solid var(--line); border-radius: 8px; padding: 0.28rem 0.5rem; cursor: pointer; }
.walk-signs input { margin: 0; accent-color: var(--gold); cursor: pointer; }
.walk-signs:hover { color: var(--gold); }
.walk-ride { display: inline-flex; align-items: center; gap: 0.3rem; }
.walk-ride select { max-width: 12rem; font: inherit; font-size: 0.82rem; color: var(--paper-1); background: rgba(11,12,18,0.82); border: 1px solid var(--line); border-radius: 8px; padding: 0.25rem 0.35rem; }
.walk-keys { position: relative; }
.walk-keys > summary { list-style: none; cursor: pointer; font-size: 0.82rem; color: var(--paper-1); background: rgba(11,12,18,0.82); border: 1px solid var(--line); border-radius: 8px; padding: 0.28rem 0.6rem; }
.walk-keys > summary::-webkit-details-marker { display: none; }
.walk-keys > summary::after { content: " \25be"; color: var(--muted); }
.walk-keys[open] > summary { color: var(--gold); border-color: var(--line-gold); }
.walk-keys[open] > summary::after { content: " \25b4"; }
.walk-keys-body { position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 2; width: min(34rem, 82vw); max-height: 60vh; overflow: auto; font-size: 0.82rem; line-height: 1.45; color: var(--muted); background: rgba(11,12,18,0.94); border: 1px solid var(--line-gold); border-radius: 8px; padding: 0.5rem 0.7rem; }
.walk-keys-body .walk-legend { margin: 0 0 0.45rem; }
.walk-keys-body .walk-legend:last-child { margin-bottom: 0; }
.walk-keys-body .walk-glide, .walk-keys-body .walk-read { color: var(--paper-1); }
.walk-sliders { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 0.45rem; }
.walk-sliders label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--paper-1); }
.walk-sliders input[type="range"] { width: 8rem; accent-color: var(--gold); }
@media (max-width: 700px) { .walk-keys-body { width: min(34rem, calc(100vw - 2rem)); } }
/* and the reading column says which of the three views is open, and how to change it */
.view-open { margin: 0.4rem 0 0.7rem; }

/* Where the visitor is, in words: a live region, so it is spoken as well as shown. Its FIRST line,
   when there is one, is the word the crosshair is on, and it is given a line of its own. */
.walk-hud { pointer-events: none; position: absolute; left: 0.6rem; bottom: 0.6rem; margin: 0; max-width: min(42rem, calc(100% - 1.2rem)); font-family: var(--serif); font-size: 0.95rem; line-height: 1.4; color: var(--paper-1); background: rgba(11,12,18,0.82); border-left: 3px solid var(--line-gold); border-radius: 0 8px 8px 0; padding: 0.4rem 0.7rem; white-space: pre-line; }

/* The map inset (Lane B2): the whole field of the drawing at the bottom right, the head of the Ark
   at the top, drawn once and then only written on. Under 600 px it goes -- there is no room for it
   beside the HUD -- and on a touch screen it goes too, because the Rise and Sink buttons own that
   corner and a finger has the whole view to point at instead. */
.walk-map { position: absolute; right: 0.6rem; bottom: 0.6rem; width: 150px; height: 340px; pointer-events: auto; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: rgba(11,12,18,0.86); }
@media (max-width: 599px) { .walk-map { display: none; } }
@media (max-height: 560px) { .walk-map { display: none; } }
@media (pointer: coarse) { .walk-map { display: none; } }
/* and where the map IS drawn, the words under the view stop short of it */
@media (min-width: 600px) and (min-height: 561px) and (pointer: fine) {
  .walk-hud { max-width: min(42rem, calc(100% - 1.8rem - 150px)); }
}

/* The crosshair (2026-09-16): two thin gold strokes in the middle of the view, shown only while the
   walk has the pointer (or on a touch screen, where a tap is the aim). It is drawn with the element's
   own two boxes and costs nothing. */
.walk-crosshair { pointer-events: none; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; opacity: 0.85; }
.walk-crosshair::before, .walk-crosshair::after { content: ""; position: absolute; background: var(--gold); }
.walk-crosshair::before { left: 50%; top: 0; width: 1px; height: 100%; margin-left: -0.5px; }
.walk-crosshair::after { top: 50%; left: 0; height: 1px; width: 100%; margin-top: -0.5px; }

/* The information sheet a name opens: inside the view, over the drawing, read and then put away.
   It takes the pointer back from the walk while it is open, so its buttons can be pressed. */
.walk-info { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(38rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; color: var(--paper-1); background: rgba(11,12,18,0.94); border: 1px solid var(--line-gold); border-radius: 10px; padding: 0.8rem 1rem 0.9rem; font-size: 0.95rem; line-height: 1.5; }
.walk-info:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.walk-info h3 { margin: 0 0 0.2rem; font-size: 1.25rem; color: var(--gold); }
.walk-info p { margin: 0 0 0.5rem; }
.walk-info .walk-info-rank { color: var(--paper-1); }
.walk-info .walk-info-where { color: var(--muted); }
.walk-info .lat { font-family: var(--serif); color: var(--paper-1); }
.walk-info .lat mark { background: rgba(198,160,74,0.28); color: var(--gold); padding: 0 0.1em; border-radius: 2px; }
.walk-info .eng { color: var(--cream); }
.walk-info .walk-info-leaf, .walk-info .walk-info-chronicle { color: var(--muted); font-size: 0.88rem; }
.walk-info .walk-info-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0 0; }
.walk-info .walk-info-actions .btn { background: rgba(11,12,18,0.82); }
@media (max-width: 700px) { .walk-info { font-size: 0.9rem; padding: 0.6rem 0.7rem 0.7rem; } .walk-info h3 { font-size: 1.05rem; } }

/* Rise and sink. A mouse has the space bar and C for these and a finger has nothing, so the two
   buttons are drawn where a thumb can reach them and only where there is a thumb. */
.walk-touch { position: absolute; right: 0.6rem; bottom: 0.6rem; display: none; flex-direction: column; gap: 0.4rem; }
.walk-touch .btn { background: rgba(11,12,18,0.82); min-width: 5rem; }
@media (pointer: coarse) { .walk-touch { display: flex; } .walk-hud { max-width: calc(100% - 7.5rem); } }

/* If there is no WebGL here there is no walk, and the panel says so rather than showing a black
   rectangle: the raised view is the same building, seen from outside. */
.walk-fallback { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(34rem, calc(100% - 2rem)); margin: 0; color: var(--muted); background: rgba(11,12,18,0.92); border-left: 3px solid var(--line-gold); border-radius: 0 8px 8px 0; padding: 0.7rem 0.9rem; font-size: 0.95rem; }

.walk-honesty { margin: 0.6rem 0 0; }

/* Filling the screen puts the panel over everything, and the view takes all of it. */
.walk:fullscreen { display: flex; flex-direction: column; height: 100vh; width: 100vw; background: var(--ink); padding: 0; }
.walk:fullscreen .walk-view { flex: 1 1 auto; height: auto; max-height: none; border-radius: 0; border: 0; }
.walk:fullscreen .walk-honesty { padding: 0.4rem clamp(0.6rem, 2vw, 1.2rem) 0.6rem; margin: 0; }