/* Appearance: the corner, spacing and backdrop hooks, and the settings panel. */
html { background: var(--bg); }
body { background: transparent; line-height: calc(1.5 + 0.12 * var(--density, 1)); }
.wrap { gap: calc(5rem * var(--density, 1)); }
.shelf, .case, .case-body { gap: calc(2.5rem * var(--density, 1)); }
.case-body { padding-top: calc(2.5rem * var(--density, 1)); }
.book, .ap, .ap-seg button, .ap-preset, .ap-reset, .ap-btn { border-radius: var(--radius, 6px); }
figure img, .shots img, .piece img, .wide img { border-radius: min(var(--radius, 6px), 12px); }
html[data-backdrop="glow"] body { background: radial-gradient(60rem 40rem at 15% -5%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(50rem 36rem at 95% 30%, color-mix(in srgb, var(--mark) 14%, transparent), transparent 70%); background-attachment: fixed; animation: apglow 22s ease-in-out infinite alternate; }
@keyframes apglow { to { background-position: 4% 3%, 96% 27%; } }
html[data-backdrop="grid"] body { background-image: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px); background-size: 2.5rem 2.5rem; background-attachment: fixed; }
/* Paper grain: a still noise tile on the page background, under everything else. Light specks on dark themes. */
html[data-texture="grain"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .22 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-texture="grain"][data-dark] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bd-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0.35; }
/* Shader backdrops: full colour behind a veil of the page background, so text keeps its contrast. */
.bd-canvas.bd-shader { opacity: 0.3; }
html[data-dark] .bd-canvas.bd-shader { opacity: 0.38; }
@media (prefers-reduced-motion: reduce) { html[data-backdrop="glow"] body { animation: none; } }
.ap-btn { font: inherit; font-family: var(--mono); font-size: 0.8rem; padding: 0.3rem 0.8rem; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; }
.ap-btn:hover { border-color: var(--accent); color: var(--accent); }
.ap { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 50; width: min(22rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 10px 40px rgba(0,0,0,0.28); padding: 1rem 1.1rem; display: grid; gap: 0.95rem; font-family: var(--mono); font-size: 0.8rem; line-height: 1.4; }
.ap[hidden] { display: none; }
.ap-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 1.1rem; }
.ap-x { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 0.3rem; }
.ap-row { display: grid; gap: 0.4rem; }
.ap-label { color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.ap-label small { text-transform: none; letter-spacing: 0; }
.ap-seg { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ap button { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); padding: 0.3rem 0.6rem; cursor: pointer; }
.ap button[aria-pressed="true"] { border-color: var(--accent); background: var(--mark-soft); color: var(--accent); font-weight: 600; }
.ap-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.ap-preset { display: flex; align-items: center; gap: 0.5rem; text-align: left; }
.ap-preset i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(128,128,128,0.5); flex: none; }
.ap-rainbow { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.ap-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.8rem; }
.ap-colors label { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.ap-colors input { width: 2.2rem; height: 1.6rem; padding: 0; border: 1px solid var(--rule); background: none; }
.ap input[type=range] { width: 100%; accent-color: var(--accent); }
.ap-foot { padding-top: 0.3rem; border-top: 1px solid var(--rule); }
@media print { .ap, .ap-btn, .bd-canvas { display: none !important; } html[data-texture] { background-image: none; } }

/* Styles: whole-page looks chosen in the panel. Colours and fonts come from appearance.js; these are the type and ornament rules. */
/* Art Deco: thin geometric capitals, wide tracking, double gold rules. */
html[data-style="deco"] h1, html[data-style="deco"] h2, html[data-style="deco"] h3 { font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
html[data-style="deco"] .intro h1 { letter-spacing: 0.04em; line-height: 1.12; }
html[data-style="deco"] .intro h1 em { font-style: normal; }
html[data-style="deco"] .eyebrow, html[data-style="deco"] .made b { letter-spacing: 0.28em; }
html[data-style="deco"] .shelf-head, html[data-style="deco"] .group-head, html[data-style="deco"] .ix-head { border-top: 5px double var(--mark); }
html[data-style="deco"] .group-head { border-top-width: 9px; }
html[data-style="deco"] .group-head h2 { letter-spacing: 0.22em; }
html[data-style="deco"] .tally, html[data-style="deco"] .stats { border: 1px solid var(--mark); outline: 1px solid var(--mark); outline-offset: 4px; padding: 1rem 1.25rem; }
html[data-style="deco"] .tally dd, html[data-style="deco"] .stats dd { font-weight: 400; color: var(--mark); }
html[data-style="deco"] .tile .thumb { box-shadow: 0 0 0 1px var(--mark); }
html[data-style="deco"] .fleuron { color: var(--mark); }

/* Terminal: phosphor glow, monospace throughout, square corners, scanlines. */
html[data-style="terminal"] { --radius: 0px !important; }
html[data-style="terminal"] h1, html[data-style="terminal"] h2, html[data-style="terminal"] h3 { font-weight: 400; letter-spacing: 0; text-transform: uppercase; }
html[data-style="terminal"] .intro h1 { font-size: clamp(3rem, 8vw, 5.6rem); line-height: 0.95; }
html[data-style="terminal"] .intro h1::before { content: "> "; color: var(--muted); }
html[data-style="terminal"] .intro h1::after { content: "_"; animation: apblink 1.1s steps(1) infinite; }
@keyframes apblink { 50% { opacity: 0; } }
html[data-style="terminal"] .shelf-head h2, html[data-style="terminal"] .group-head h2 { font-size: clamp(2.2rem, 4.8vw, 3.2rem); letter-spacing: 0.02em; }
html[data-style="terminal"] .ix-head { font-size: 1.3rem; font-weight: 400; }
html[data-style="terminal"] .tally dd, html[data-style="terminal"] .stats dd { font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); }
html[data-style="terminal"] body { font-size: 0.95rem; }
html[data-style="terminal"][data-dark] h1, html[data-style="terminal"][data-dark] h2, html[data-style="terminal"][data-dark] .tally dd, html[data-style="terminal"][data-dark] .stats dd { text-shadow: 0 0 0.4em rgba(53, 255, 122, 0.6); }
html[data-style="terminal"] img { filter: saturate(0.85); }
html[data-style="terminal"][data-dark]::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45)); }

/* Swiss: heavy condensed capitals, hairline rules, red as the only colour. */
html[data-style="swiss"] { --radius: 0px !important; }
html[data-style="swiss"] h1, html[data-style="swiss"] h2, html[data-style="swiss"] h3 { font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: -0.02em; word-spacing: 0.14em; line-height: 0.95; }
html[data-style="swiss"] .intro h1 { font-size: clamp(3rem, 8.5vw, 6.4rem); letter-spacing: -0.035em; word-spacing: 0.16em; }
html[data-style="swiss"] .intro h1 em { color: var(--accent); }
html[data-style="swiss"] .intro { position: relative; }
html[data-style="swiss"] .intro-text::before { content: ""; display: block; width: clamp(3rem, 8vw, 5.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--mark); justify-self: end; margin-bottom: -1rem; }
html[data-style="swiss"] .shelf-head, html[data-style="swiss"] .ix-head { border-top: 1px solid var(--ink); }
html[data-style="swiss"] .group-head { border-top: 8px solid var(--ink); }
html[data-style="swiss"] .group-head h2 { color: var(--ink); letter-spacing: -0.01em; font-size: 2rem; }
html[data-style="swiss"] .tally dd, html[data-style="swiss"] .stats dd { font-stretch: 75%; color: var(--ink); }
html[data-style="swiss"] .stats { background: transparent; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
html[data-style="swiss"] .made { border-left-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { html[data-style="terminal"] .intro h1::after { animation: none; } }
@media print { html[data-style]::after { content: none; } }