/* DAG-VISUAL-01: neutral viewing fields; editorial warmth stays separate from images. */
:root {
 color-scheme:light;
 --paper:#f7f7f7; --paper-light:#ffffff; --ink:#282828; --olive:#52645a;
 --terracotta:#805e49; --navy:#183047; --gold:#bf9251; --sand:#626262;
 --line:#d4d4d4; --shadow:0 12px 30px rgba(0,0,0,.08);
 --muted:#626262; --subtle:#626262; --control-border:#858585;
 --control-surface:#ffffff; --toolbar-surface:transparent; --media-surface:#f4f4f4;
 --editorial-surface:#eeece7; --notice-surface:#eeeeee; --hover-surface:#e7e7e7; --error:#9b2525;
 --on-olive:#ffffff; --on-accent:#ffffff; --accent-hover:#674a38;
 --banner:#eeeeee; --on-banner:#282828; --footer:#eeece7; --footer-text:#282828;
 --header-surface:#f7f7f7; --overlay:#f7f7f7;
 --feature-surface:#eeece7; --feature-text:#282828; --feature-muted:#626262;
 --placeholder:#626262;
}
:root[data-theme=dark] {
 color-scheme:dark;
 --paper:#181818; --paper-light:#252525; --ink:#ebebe8; --olive:#adbbb2;
 --terracotta:#ccad91; --navy:#183047; --gold:#bf9251; --sand:#bbbbb8;
 --line:#484848; --shadow:0 12px 30px rgba(0,0,0,.2);
 --muted:#bbbbb8; --subtle:#bbbbb8; --control-border:#808080;
 --control-surface:#252525; --toolbar-surface:transparent; --media-surface:#202020;
 --editorial-surface:#1e2321; --notice-surface:#252525; --hover-surface:#343434; --error:#ffb4a7;
 --on-olive:#202020; --on-accent:#202020; --accent-hover:#dec1a6;
 --banner:#252525; --on-banner:#ebebe8; --footer:#1e2321; --footer-text:#ebebe8;
 --header-surface:#181818; --overlay:#181818;
 --feature-surface:#1e2321; --feature-text:#ebebe8; --feature-muted:#bbbbb8;
 --placeholder:#bbbbb8;
}
html { background:var(--paper); }
body { color:var(--ink); background:var(--paper); }
button,input,select,textarea { color:inherit; accent-color:var(--olive); }
::selection { color:var(--on-olive); background:var(--olive); }
input::placeholder,textarea::placeholder { color:var(--placeholder); opacity:1; }
input[type=number],input[type=search],select { color-scheme:inherit; }
button:disabled,[aria-disabled=true] { cursor:not-allowed; }
.site-header { gap:18px; }
.site-header.scrolled { background:var(--header-surface); }
.header-controls { display:flex; align-items:center; gap:10px; order:3; position:relative; z-index:2; flex-shrink:0; }
.site-header .site-nav { order:2; margin-left:auto; }
.theme-toggle { display:flex; align-items:center; justify-content:center; gap:7px; min-width:44px; min-height:44px; padding:8px 12px; color:var(--ink); background:var(--paper-light); border:1px solid var(--control-border); border-radius:28px; font:inherit; font-size:.72rem; cursor:pointer; }
.theme-toggle:hover { background:var(--hover-surface); border-color:var(--terracotta); }
.theme-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .theme-sun { display:none; }
[data-theme=dark] .theme-toggle .theme-sun { display:block; }
[data-theme=dark] .theme-toggle .theme-moon { display:none; }
body:not(.js-ready) .theme-toggle { display:none; }
.brand-mark { border-color:var(--control-border); }
.brand-mark::after { background:#fbf7ef; }
.nav-cta,.format-tabs input:checked + span,.thumbnail-sizing input:checked + span,.pagination [aria-current=page] { color:var(--on-olive); background:var(--olive); }
.button-primary,.step-number { color:var(--on-accent); background:var(--terracotta); }
.button-primary:hover,.button-primary:focus-visible { color:var(--on-accent); background:var(--accent-hover); }
.hero::before { content:none; }
.hero-intro,.story-copy,.section-heading > p,.journey-steps p,.format-card p,.media-caption,.muted { color:var(--muted); }
.story-copy .lead { color:var(--ink); }
.hero-art,.artist-emblem { --paper:#f4ecdd; --paper-light:#fbf7ef; --navy:#183047; --terracotta:#b6532c; --olive:#555b37; --gold:#bf9251; --sand:#d8c5a5; }
.art-caption,.scroll-cue { color:var(--muted); }
.botanical { border-color:var(--olive); }
.botanical i { border-color:var(--olive); background:var(--olive); }
.format-card { background:var(--paper); border-color:var(--line); }
.format-card.featured,.opening-card { color:var(--feature-text); background:var(--feature-surface); }
.format-card.featured p,.opening-card > p:not(.section-kicker) { color:var(--feature-muted); }
.featured .format-note,.featured .format-number,.opening-card .section-kicker,.opening-card h2 em,.domain { color:var(--sand); }
.format-icon { border-color:var(--line); }
.interlude,.preview-notice,.toast,.skip-link { color:var(--on-banner); background:var(--banner); }
.interlude-copy span { color:var(--sand); }
.signature { background:transparent; padding:0; transform:none; filter:none; }
/* Only the transparent identity mark is reversed; original artwork is never filtered. */
:root[data-theme=dark] .signature { filter:invert(1); }
.site-footer { background:var(--footer); color:var(--footer-text); }
.footer-brand { color:var(--footer-text); }
.catalogue-controls { background:var(--toolbar-surface); }
.store-shell input:not([type=radio]):not([type=checkbox]),.store-shell select,.store-shell textarea { background:var(--control-surface); color:var(--ink); border-color:var(--control-border); }
.store-shell option { background:var(--control-surface); color:var(--ink); }
.store-shell input[readonly] { color:var(--muted); background:var(--paper); }
.card-image,.art-stage,.thumbnail,.collection-card img,.owner-preview-image { background:var(--media-surface); }
.example-label { color:var(--subtle); }
.fixture-label,.draft-notice { background:var(--notice-surface); }
.format-tabs span,.thumbnail-sizing > div { border-color:var(--control-border); }
.error { color:var(--error); }
.cart-line .remove,#clear-cart,.owner-item { color:var(--ink); }
#clear-cart { background:transparent; border:1px solid var(--control-border); border-radius:20px; padding:8px 12px; margin-top:12px; }
.owner-item:hover,.owner-item:focus { background:var(--hover-surface); }
.owner-variant,.operation,details,.chip,.panel,.collection-card,.empty-state,.cart-line { border-color:var(--line); }
.panel { background:var(--paper-light); color:var(--ink); }
.collection-card { background:var(--paper); color:var(--ink); }
summary::marker { color:var(--olive); }
a:hover { text-underline-offset:4px; }
@media(max-width:1150px) { .theme-toggle [data-theme-label] {display:none;} .site-header {gap:12px;} }
@media(max-width:780px) {
 .site-header .site-nav { margin-left:0; color:var(--on-banner); background:var(--overlay); }
 .site-header {gap:8px;}
 .header-controls {gap:6px;}
 .theme-toggle {padding:8px;}
 .menu-toggle {background:var(--paper-light);border:1px solid var(--control-border);}
 .menu-toggle span:not(.sr-only) {background:var(--ink);}
 body:not(.js-ready) .site-header .site-nav {background:transparent;color:var(--ink);}
}
@media(max-width:360px) { .brand-copy strong {font-size:.87rem;} .brand {gap:7px;} .site-header {padding-inline:10px;} .brand-mark {width:30px;} .brand-mark::after {inset:12px;} }

/* Essential states keep solid, measurable colours. Decoration never covers viewing fields. */
.site-header { background:var(--header-surface); }
.brand-mark { --navy:#183047; }
.preview-notice { border-bottom:1px solid var(--line); }
.button-primary { box-shadow:none; }
.button:hover,.button:focus-visible,.format-card:hover { transform:none; box-shadow:none; }
.pagination a,.pagination .pagination-direction,.thumbnail { border-color:var(--control-border); }
.pagination-direction[aria-disabled=true],button:disabled,.button-primary:disabled { transition:none; opacity:1; color:var(--muted); background:var(--notice-surface); border-color:var(--control-border); }
.pagination-direction[aria-disabled=true] { border-style:dashed; }
.pagination [aria-current=page],.format-tabs input:checked + span,.thumbnail-sizing input:checked + span { font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.thumbnail-sizing input:checked:focus-visible + span { outline-color:var(--on-olive); }
.formats,.artist-note,.interlude,.opening-card { background:var(--editorial-surface); color:var(--ink); }
.interlude-copy span { color:var(--muted); }
.interlude-motif,.opening-card::before,.opening-card::after { display:none; }
.format-card { border-radius:4px; min-height:0; }
.format-card.featured { border-color:var(--control-border); }

/* The welcome uses the existing editorial palette, separate from artwork fields. */
.home-page .hero { background:var(--editorial-surface); }
.welcome-signoff p,.welcome-status,.purchase-help { color:var(--muted); }

.studio-dots { color:var(--terracotta); opacity:.22; }
.studio-dots-low { color:var(--olive); opacity:.18; }
.studio-dots i { background:currentColor; }

/* Supplied dotted navigation. Real link text and existing navigation semantics stay intact. */
:root {
 --nav-page-ring-default:url("/assets/navigation/light/page-ring-default.svg");
 --nav-page-ring-hover:url("/assets/navigation/light/page-ring-hover.svg");
 --nav-page-ring-current:url("/assets/navigation/light/page-ring-current.svg");
 --nav-direction-pill-default:url("/assets/navigation/light/direction-pill-default.svg");
 --nav-direction-pill-hover:url("/assets/navigation/light/direction-pill-hover.svg");
 --nav-direction-pill-disabled:url("/assets/navigation/light/direction-pill-disabled.svg");
 --nav-arrow-previous:url("/assets/navigation/light/arrow-previous.svg");
 --nav-arrow-next:url("/assets/navigation/light/arrow-next.svg");
 --nav-ellipsis:url("/assets/navigation/light/ellipsis.svg");
}
:root[data-theme=dark] {
 --nav-page-ring-default:url("/assets/navigation/dark/page-ring-default.svg");
 --nav-page-ring-hover:url("/assets/navigation/dark/page-ring-hover.svg");
 --nav-page-ring-current:url("/assets/navigation/dark/page-ring-current.svg");
 --nav-direction-pill-default:url("/assets/navigation/dark/direction-pill-default.svg");
 --nav-direction-pill-hover:url("/assets/navigation/dark/direction-pill-hover.svg");
 --nav-direction-pill-disabled:url("/assets/navigation/dark/direction-pill-disabled.svg");
 --nav-arrow-previous:url("/assets/navigation/dark/arrow-previous.svg");
 --nav-arrow-next:url("/assets/navigation/dark/arrow-next.svg");
 --nav-ellipsis:url("/assets/navigation/dark/ellipsis.svg");
}
.pagination-numbers { flex-wrap:wrap; gap:4px; }
.pagination .pagination-numbers a { display:grid; place-items:center; flex:0 0 56px; width:56px; height:56px; min-width:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:var(--nav-page-ring-default) center/100% 100% no-repeat; color:var(--ink); }
.pagination .pagination-numbers a:hover { background-image:var(--nav-page-ring-hover); color:var(--terracotta); }
.pagination .pagination-numbers [aria-current=page] { background-image:var(--nav-page-ring-current); color:var(--on-olive); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.pagination .pagination-direction { width:176px; height:56px; min-height:44px; flex:0 0 176px; padding:0 12px; border:0; background:var(--nav-direction-pill-default) center/100% 100% no-repeat; color:var(--ink); gap:6px; }
.pagination a.pagination-direction:hover { background:var(--nav-direction-pill-hover) center/100% 100% no-repeat; color:var(--terracotta); }
.pagination .pagination-direction[aria-disabled=true] { background:var(--nav-direction-pill-disabled) center/100% 100% no-repeat; color:var(--muted); opacity:1; }
.pagination .pagination-arrow { display:block; flex:0 0 52px; width:52px; height:24px; background:var(--nav-arrow-next) center/contain no-repeat; transform:none; }
.pagination .pagination-previous .pagination-arrow { background-image:var(--nav-arrow-previous); }
.pagination-gap { width:20px; height:44px; padding:0; font-size:0; background:var(--nav-ellipsis) center/20px auto no-repeat; }
.pagination a:focus-visible { outline:3px solid var(--terracotta); outline-offset:3px; }
@media(max-width:780px) {
 .pagination .pagination-direction { width:156px; flex-basis:156px; height:48px; padding:0 8px; gap:4px; }
 .pagination .pagination-arrow { width:44px; flex-basis:44px; height:22px; }
 .pagination .pagination-numbers a { width:44px; height:44px; flex-basis:44px; }
}
@media(max-width:360px) {
 .pagination .pagination-direction { width:132px; flex-basis:132px; font-size:.78rem; }
 .pagination .pagination-arrow { width:36px; flex-basis:36px; }
}