:root { color-scheme: dark; font-family: system-ui,sans-serif; background:#141816; color:#f1f0e8; --accent:#d1dfac; --muted:#b4bdb3; --line:#414a42; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; }
header,main { width:min(1400px, 92%); margin:auto; }
header { display:flex; align-items:center; gap:24px; min-height:88px; border-bottom:1px solid var(--line); }
header p { font-size:.75rem; color:var(--muted); line-height:1.5; }
header button { margin-left:auto; }
.brand { text-decoration:none; color:inherit; letter-spacing:.12em; white-space:nowrap; font-weight:700; }
.brand span,.brand b { color:var(--accent); }
button { font:inherit; color:inherit; background:#1b231e; border:1px solid var(--line); border-radius:5px; padding:.65rem .85rem; cursor:pointer; min-height:44px; }
button:hover { background:#354234; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.intro { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; padding:24px 0 15px; }
.intro p,.intro span,.eyebrow,.plate,#category { margin:0; font:600 .69rem/1.5 ui-monospace,monospace; letter-spacing:.12em; }
.intro span,.plate { color:var(--muted); }
.rubric-filter { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-bottom:14px; font-size:.85rem; color:var(--muted); }
.rubric-filter select { max-width:100%; min-height:44px; padding:.5rem .75rem; font:inherit; background:#1b231e; color:var(--accent); border:1px solid var(--line); border-radius:5px; }
.presenting .rubric-filter { padding:4px 0; }
.stage { position:relative; display:grid; align-items:end; min-height:clamp(430px,62vh,740px); overflow:hidden; isolation:isolate; border:1px solid var(--line); border-radius:8px; background:radial-gradient(ellipse at 67% 42%,#354137,#19231d 58%,#151b17); touch-action:pan-y; }
canvas { position:absolute; width:100%; height:100%; inset:0; z-index:-1; }
.plate { position:absolute; top:20px; left:24px; }
.copy { padding:clamp(24px,4vw,58px); width:min(48%,560px); }
#category,.eyebrow { color:var(--accent); text-transform:uppercase; }
#category:not(:empty) { display:inline-block; padding:6px 9px; border:1px solid #63764c; border-radius:5px; background:#273321; margin-bottom:8px; font-size:.8rem; }
h1,h2 { font-family:Georgia,serif; font-weight:400; line-height:1.02; letter-spacing:-.035em; }
h1 { font-size:clamp(2.5rem,5vw,5rem); margin:.18em 0; }
#place,.footnote { color:var(--muted); font-size:.85rem; }
#mission { line-height:1.55; }
#details { margin-top:6px; color:var(--accent); }
nav { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.counter { color:var(--muted); font: .85rem ui-monospace,monospace; white-space:nowrap; }
.counter strong { color:var(--accent); }
.controls { display:flex; gap:5px; }
#pagination { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:8px; padding-top:12px; }
.picker-heading { display:flex; justify-content:space-between; gap:12px; margin:16px 0 0; }
.picker-heading span { color:var(--muted); font-size:.8rem; }
#project-picker { overflow:hidden; padding-inline:4px; }
#pagination { touch-action:pan-y; user-select:none; transition:transform .2s ease-out; }
#pagination.dragging { transition:none; }
.project-tab { text-align:left; font-size:.85rem; line-height:1.4; min-height:60px; cursor:grab; }
.dragging .project-tab { cursor:grabbing; }
@media (prefers-reduced-motion:reduce) { #pagination { transition:none; } }
.project-tab[aria-current=true] { color:var(--accent); border-color:var(--accent); background:#2a3729; }
.controls button { min-width:44px; }
.footnote { line-height:1.5; }
dialog { width:min(600px,92vw); max-height:85vh; padding:clamp(20px,5vw,42px); background:#202923; color:inherit; border:1px solid var(--line); border-radius:8px; }
dialog::backdrop { background:#080d0bd9; }
dialog form { float:right; }
dialog h2 { font-size:clamp(2rem,6vw,3.4rem); }
dialog p { line-height:1.65; }
#sheet section p { white-space:pre-wrap; overflow-wrap:anywhere; }
#sheet-place,#sheet-credit { color:var(--muted); }
.technique-tags { display:flex; gap:8px; flex-wrap:wrap; padding:0; list-style:none; }
.technique-tags li { border:1px solid var(--line); border-radius:5px; padding:.4rem .6rem; font-size:.85rem; color:var(--accent); }
#overview-sheet { width:min(1400px,96vw); max-height:94dvh; padding:clamp(16px,3vw,36px); }
#overview-sheet h2 { margin:.4em 0; font-size:clamp(2rem,4vw,3.6rem); }
#overview-sheet > p { max-width:850px; }
#overview-projects { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:8px; }
#overview-projects button { text-align:left; }
#overview-sheet #locations-map { margin-top:16px; }
#overview-sheet #map-drawing { height:clamp(300px,48vh,570px); }
header #open-overview { margin-left:auto; }
header #fullscreen { margin-left:0; }
.cta-brand { display:block; flex-shrink:0; }
.cta-brand img { display:block; width:140px; height:auto; }
.site-footer { width:min(1400px,92%); margin:32px auto 20px; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-footer img { display:block; width:180px; height:auto; }
.site-footer p { max-width:430px; color:var(--muted); font-size:.8rem; line-height:1.6; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px 24px; max-width:570px; border:0; }
.site-footer a { color:var(--accent); font-size:.85rem; text-underline-offset:4px; }
.presenting .site-footer { display:none; }
@media (max-width:1000px) { header { flex-wrap:wrap; padding-block:10px; } }
@media (max-width:1000px) {
  header { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  header .cta-brand { justify-self:end; }
  header p { grid-column:1 / -1; margin:0; order:0; }
  header #open-overview,header #fullscreen { margin:0; width:100%; }
}
@media (max-width:600px) {
  .cta-brand img { width:110px; }
  .site-footer { flex-direction:column; align-items:flex-start; }
  .brand { font-size:.9rem; }
  header { gap:10px; }
  .rubric-filter select { width:100%; }
  #overview-projects { grid-template-columns:1fr; }
  #overview-sheet { width:96vw; padding:14px; }
  #overview-sheet #map-drawing { height:45dvh; min-height:260px; }
  .map-heading button { width:100%; }
}
@media (max-width:600px) {
  header #open-overview { font-size:.8rem; padding-inline:8px; }
}
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#viewer { position:absolute; inset:20px 20px 20px 48%; display:flex; flex-direction:column; }
#viewer-host { position:relative; flex:1; min-height:0; }
.hd-arrow { position:absolute; right:122px; bottom:6px; width:60px; height:66px; pointer-events:none; z-index:2; }
.hd-arrow svg { display:block; width:100%; height:100%; overflow:visible; }
.hd-arrow path { stroke:#ffd36a; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 2px #000); }
#viewer-preview { position:absolute; z-index:1; inset:28px 0 0; display:grid; place-items:center; border:1px solid var(--line); border-radius:5px; background:#202923; color:var(--muted); overflow:hidden; }
#viewer-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
#viewer iframe { display:block; width:100%; height:100%; border:0; }
#viewer-status { margin:.3rem 0; font-size:.85rem; }
@media (max-width:760px) {
 .stage:has(#viewer:not([hidden])) { display:flex; flex-direction:column; align-items:stretch; }
 #viewer { position:relative; inset:auto; min-height:300px; padding:12px; }
 #viewer iframe { height:300px; }
}
#viewer a,#explore { color:var(--accent); }
#project-link { color:var(--accent); margin-left:.6rem; }
@media (max-width:760px) {
 header { flex-wrap:wrap; gap:8px; padding:12px 0; }
 header p { order:3; flex-basis:100%; margin:0; }
 .stage { min-height:570px; }
 .copy { width:100%; }
 .plate { left:18px; }
}
@media (max-width:350px) {
 #fullscreen span { display:none; }
 .controls { gap:2px; }
}
#drag-handle { cursor:grab; touch-action:pan-y; user-select:none; color:var(--accent); }
#drag-handle:active { cursor:grabbing; }
.picker-heading { align-items:center; flex-wrap:wrap; }
.drag-rail { position:relative; display:flex; align-items:center; justify-content:space-between; width:228px; min-height:52px; padding:0 10px; border:1px solid var(--line); border-radius:28px; background:#101612; color:var(--muted); }
#drag-handle { position:absolute; left:calc(50% - 48px); width:96px; padding-inline:6px; border-radius:24px; background:#354234; transition:transform .18s ease-out; }
#drag-handle.sliding { transition:none; }
@media (prefers-reduced-motion:reduce) { #drag-handle { transition:none; } }
.stage:has(#viewer:not([hidden])) { min-height:clamp(560px,82vh,1050px); }
@media (min-width:761px) {
  main:has(#viewer:not([hidden])) { width:min(1680px,96%); }
  #viewer { inset:10px 10px 10px 24%; }
  .stage:has(#viewer:not([hidden])) .copy { width:24%; padding:clamp(14px,2vw,32px); }
  .stage:has(#viewer:not([hidden])) h1 { font-size:clamp(1.65rem,3vw,3.8rem); overflow-wrap:anywhere; }
}
@media (max-width:760px) {
  #viewer iframe { height:clamp(340px,62vh,640px); }
}
.hd-hint { position:absolute; right:16px; bottom:78px; z-index:3; display:flex; align-items:center; gap:8px; width:max-content; max-width:calc(100% - 32px); margin:0; padding:9px 12px; border:1px solid #8f9c68; border-radius:10px; background:#263320ed; font-size:.78rem; line-height:1.45; pointer-events:none; }
.hd-arrow,.hd-hint { animation:hd-hint-cycle 10s ease-in-out infinite; }
.hd-hint::after { content:""; position:absolute; bottom:-7px; right:112px; width:12px; height:12px; transform:rotate(45deg); background:#263320; border-right:1px solid #8f9c68; border-bottom:1px solid #8f9c68; }
.hd-hint-icon { display:none !important; }
.hd-hint strong,.hd-hint span { display:block; }
.hd-hint strong { color:var(--accent); }
.hd-hint-icon { color:var(--accent); font-size:1.5rem; }
.hd-hint div > span { margin-top:2px; color:#e2e9d8; }
@keyframes hd-hint-cycle {
  0%,38% { opacity:1; }
  48%,90% { opacity:0; }
  100% { opacity:1; }
}
@media (prefers-reduced-motion:reduce) { .hd-arrow,.hd-hint { animation:none; } }
#locations-map { margin:28px 0; padding:clamp(12px,2vw,24px); border:1px solid var(--line); border-radius:8px; }
.map-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.map-heading h2,.map-heading p { margin:0 0 6px; }
.map-heading p { color:var(--muted); font-size:.85rem; }
#map-drawing { display:block; width:100%; height:clamp(340px,57vh,660px); background:#17282a; border-radius:6px; }
.map-department { fill:#354539; stroke:#879687; stroke-width:1; vector-effect:non-scaling-stroke; }
.map-river { fill:none; stroke:#80d8f5; stroke-width:1.65; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.map-water-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin:10px 0; color:var(--muted); font-size:.8rem; }
.map-water-legend a { color:var(--accent); }
.map-river-key::before { content:""; display:inline-block; width:1em; height:2px; margin-right:.35em; vertical-align:middle; background:#80d8f5; }
.map-pin { stroke:#ff7974; stroke-width:15; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.map-pin,.map-church-label { cursor:pointer; }
.map-pin.active { stroke-opacity:0; }
.map-pin:focus-visible { stroke:#fff4e8; stroke-opacity:1; outline:none; }
.map-project-pin { pointer-events:none; }
.map-project-pin { fill:#f04d4d; stroke:#fff4e8; stroke-width:1.15; stroke-linejoin:round; }
.map-project-label { margin:12px 0 0; line-height:1.55; }
.map-legend-pin { display:inline-block; width:.7em; height:.7em; margin-right:.35em; border:1px solid #fff4e8; border-radius:50%; background:#f04d4d; }
#map-project-town { color:var(--muted); }
.map-city-dot { fill:#e6dfc8; }
.map-city-label { fill:#f1f0e8; font-family:system-ui,sans-serif; paint-order:stroke; stroke:#1a2621; stroke-width:2.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.map-department-label { fill:#d1dfac; font-weight:700; }
.map-church-label { fill:#fff4e8; font-weight:750; stroke-width:4; }
body.presenting { overflow:auto; }
.presenting header { min-height:60px; width:96%; }
.presenting header p { display:none; }
.presenting main { width:96%; max-width:none; }
.presenting .intro,.presenting #locations-map,.presenting .footnote,
.presenting #pagination,.presenting #project-map-link,.presenting #project-link { display:none; }
.presenting .stage:has(#viewer:not([hidden])) { min-height:0; height:calc(100dvh - 210px); }
.presenting nav { padding:6px 0; }
.presenting .picker-heading { margin:8px 0; }
@media (max-width:760px) {
  .presenting .stage:has(#viewer:not([hidden])) { height:auto; min-height:0; }
  .presenting #viewer iframe { height:55dvh; }
  .presenting .copy { padding:14px; }
}
@media (max-width:1000px) {
  .stage:has(#viewer:not([hidden])) { display:flex; flex-direction:column; align-items:stretch; min-height:0; }
  #viewer { position:relative; inset:auto; min-height:300px; padding:12px; }
  #viewer iframe { height:clamp(340px,58dvh,680px); }
  .stage:has(#viewer:not([hidden])) .copy { width:100%; padding:24px; }
  .stage:has(#viewer:not([hidden])) h1 { font-size:clamp(2rem,5vw,3.2rem); }
  .presenting .stage:has(#viewer:not([hidden])) { height:auto; }
}

.map-zoom-controls{display:inline-flex;gap:6px;flex-shrink:0}.map-zoom-controls button{min-width:44px;min-height:44px;font-size:25px;line-height:1;padding:6px 12px}.map-zoom-controls button:disabled{opacity:.4;cursor:default}

#map-drawing{touch-action:none;cursor:grab;user-select:none}#map-drawing.map-dragging,#map-drawing.map-dragging *{cursor:grabbing}.map-drag-help{color:var(--muted);font-size:.85rem;margin:0 0 10px}