/* Theme */
:root {
    color-scheme: dark;
    --background: #141416;
    --surface: #1b1b1f;
    --border: #2b2a30;
    --control-border: #3b3942;
    --text: #d0cfd5;
    --heading: #efedf3;
    --muted: #a3a0ac;
    --link: #b9a2e3;
    --hotspot-fill: #f00;
    --hotspot-stroke: #fff;
    --hover: #292630;
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1.25rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --radius: 6px;
    --radius-card: 14px;
    --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    font: 16px/1.65 system-ui, -apple-system, sans-serif;
    background: var(--background);
    color: var(--text);
}

/* Elements and controls */
:where(*, *::before, *::after) { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--heading); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
:where(h1, h2, h3, h4, h5, h6) { color: var(--heading); line-height: 1.25; letter-spacing: -0.025em; }
:where(h1) { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 var(--space-3); }
:where(h2) { font-size: 1.5rem; margin: var(--space-3) 0 var(--space-2); }
:where(h3) { font-size: 1.15rem; margin: var(--space-3) 0 var(--space-2); }
:where(p, ul, ol) { margin-block: 0 var(--space-3); }
:where(li) { margin-block: 0.3rem; }
:where(li > ul, li > ol) { margin-bottom: 0; }
img { max-width: 100%; height: auto; }
figure { margin-inline: 0; }
figcaption, small { color: var(--muted); }
code, kbd { font: 0.88em/1.5 var(--mono); background: var(--hover); border-radius: var(--radius); padding: 0.15em 0.35em; }
pre { padding: var(--space-3); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
input, textarea, select, button { font: inherit; }
input:not([type="hidden"]), textarea, select {
    max-width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}
textarea { display: block; width: 100%; font-family: var(--mono); resize: vertical; }
button {
    display: inline-block;
    padding: var(--space-1) 1rem;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--heading);
    cursor: pointer;
}
button:hover { background: var(--hover); border-color: var(--link); }
button:disabled { opacity: 0.6; cursor: wait; }

/* Document typography: direct children keep embedded cards independent. */
.prose { overflow-wrap: anywhere; }
:where(.prose) > :where(h1) { margin-bottom: 1.5rem; }
:where(.prose) > :where(h2) { margin-block: 2.5rem 1rem; }
:where(.prose) > :where(h3, h4, h5, h6) { margin-block: 1.75rem var(--space-2); }
:where(.prose) > :where(img) { display: block; margin-block: 1.5rem; }
:where(.prose) > :where(.preview-grid) { margin-block: 1.5rem; }
:where(.prose) > :first-child { margin-top: 0; }

/* Site shell */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--border); }
.site-nav { padding: 0.8rem clamp(1rem, 3vw, 2.5rem); font-size: 0.875rem; }
.site-brand { font-weight: 700; color: var(--heading); text-decoration: none; white-space: nowrap; }
.site-current-page { overflow-wrap: anywhere; }
.site-context { margin-left: auto; text-align: right; overflow-wrap: anywhere; }
.site-main { width: min(100%, 68rem); margin-inline: auto; padding: var(--space-5) var(--space-4) 4rem; flex: 1; overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid var(--border); padding: var(--space-4) 1.5rem 2.5rem; text-align: center; color: var(--muted); font-size: 0.875rem; }
.site-footer ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 0.4rem; padding: 0; margin: 0.2rem 0; list-style: none; }
.site-footer li { margin: 0; }
.site-footer li + li::before { content: '·'; margin-right: 0.4rem; color: var(--muted); }
.site-footer a[aria-disabled="true"] { color: var(--muted); text-decoration: underline dotted; cursor: default; }

/* Preview cards */
.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); align-items: start; gap: var(--space-3); }
.preview-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.preview-image { display: block; }
.preview-image:focus-visible { outline-offset: -4px; }
.preview-image img, .entity-preview > img, .preview-placeholder { display: block; width: 100%; height: auto; margin: 0; background: var(--hover); }
.preview-placeholder { aspect-ratio: 16 / 9; }
.preview-card h2 { margin: 0; font-size: 1.25rem; }
.preview-card p { margin: var(--space-1) 0 0; color: var(--muted); }
.entity-preview { color: inherit; text-decoration: none; }
.entity-missing { text-decoration-style: dotted; }

/* Image tours */
.image-tour { display: block; width: 100%; height: auto; overflow: visible; }
.image-tour-cell { fill: var(--hotspot-stroke); fill-opacity: 0; stroke: var(--hotspot-stroke); stroke-opacity: 0.15; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: all; }
.image-tour a:hover .image-tour-cell, .image-tour a:focus-visible .image-tour-cell { fill-opacity: 0.05; stroke-opacity: 0.35; }
.image-tour a { cursor: pointer; }
.image-tour-hotspot { fill: var(--hotspot-fill); stroke: var(--hotspot-stroke); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.image-tour-preview { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.image-tour-preview-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.image-tour-preview-link:focus-visible { outline-offset: -4px; }

/* Vertical flow ignores hidden children, including between visible siblings. */
[hidden] { display: none !important; }
.flow > :where(:not([hidden])) { margin-block: 0; }
.flow > :where(:not([hidden]) ~ :not([hidden])) { margin-block-start: var(--space-3); }

/* Small, reusable utilities */
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 0; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }
.w-0 { width: 0; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.p-3 { padding: var(--space-3); }
.pt-0 { padding-top: 0; }
.pt-3 { padding-top: var(--space-3); }
.mt-0 { margin-top: 0; }
.mt-auto { margin-top: auto; }
.mb-3 { margin-bottom: var(--space-3); }
.muted { color: var(--muted); }
.text-sm { font-size: 0.9rem; }
.text-base { font-size: 1rem; }
.border-top { border-top: 1px solid var(--border); }
.list-none { padding: 0; list-style: none; }

/* Narrow screens */
@media (max-width: 640px) {
    .site-nav { flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
    .site-context { width: 100%; margin-left: 0; text-align: left; font-size: 0.8rem; }
    .site-main { padding: var(--space-4) var(--space-3) var(--space-5); }
    .site-footer { padding: 1.5rem 1rem; }
}