/* Three reversible gallery settings. Image pixels and dimensions stay untouched. */
html[data-gallery-theme] {
  --paper:#efeee9; --ink:#292e2b; --muted:#59615b; --line:#d3d5ce;
  --accent:#45594b; --wall:#343b38; --surface:#efeee9;
  --soft-surface:rgb(239 238 233 / 70%); --hover:#e3e5dd;
  --button:#343b38; --button-ink:#ffffff; --warm-ink:#80533c;
  --relief-wash:rgb(239 238 233 / 94%); --relief-size:500px;
  --ambient:transparent; --focus:#87591f;
  color-scheme:light;
}
html[data-gallery-theme="floral"] {
  --paper:#fcfcfb; --surface:#fcfcfb; --soft-surface:rgb(252 252 251 / 78%);
  --wall:#e5e4de; --line:#d3d7d0; --hover:#edf0e9;
  --relief-wash:rgb(252 252 251 / 62%); --relief-size:1000px;
}
html[data-gallery-theme="charcoal"] {
  --paper:#232b27; --ink:#f1eee5; --muted:#c0c8be; --line:#4d5951;
  --accent:#d6c6a9; --wall:#18211c; --surface:#252e29;
  --soft-surface:rgb(31 40 34 / 65%); --hover:#354239;
  --button:#ddd0b8; --button-ink:#222c25; --warm-ink:#dfb896;
  --relief-wash:rgb(26 35 29 / 94%); --relief-size:700px;
  --ambient:rgb(104 121 91 / 13%); --focus:#e4c994;
  color-scheme:dark;
}
html[data-gallery-theme] body {
  background-color:var(--paper);
  background-image:radial-gradient(ellipse at 12% 0%,var(--ambient),transparent 75%),linear-gradient(var(--relief-wash),var(--relief-wash)),url("assets/collette-white-relief-9d9f8b7088.webp");
  background-size:100% 1100px,auto,var(--relief-size) var(--relief-size);
  background-repeat:repeat;
  color:var(--ink);
}
/* The relief follows the document, so it moves together with the artwork.
   Use one uniform wash instead of the old repeating ambient-light gradient:
   the gradient restarted every 1100px and caused the dark-to-light bands. */
html[data-gallery-theme="charcoal"] body {
  background-image:linear-gradient(var(--relief-wash),var(--relief-wash)),url("assets/collette-white-relief-9d9f8b7088.webp");
  background-size:auto,var(--relief-size) var(--relief-size);
  background-position:0 0;
  background-repeat:repeat;
  background-attachment:scroll;
}
/* This quiet tone change belongs to the collection section, not each work. */
html[data-gallery-theme="charcoal"] .collection {
  background-color:rgb(104 121 91 / 4%);
}
html[data-gallery-theme] header,
html[data-gallery-theme] footer,
html[data-gallery-theme] .cafe-player {background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-gallery-theme] .artist,
html[data-gallery-theme] .contact,
html[data-gallery-theme] .archive-intro {background:var(--soft-surface)}
html[data-gallery-theme] em,
html[data-gallery-theme] .detail-heading,
html[data-gallery-theme] .contact h2 em {color:var(--accent)}
html[data-gallery-theme] .hero .eyebrow,
html[data-gallery-theme] .work-heading .eyebrow,
html[data-gallery-theme] .hero .lead,
html[data-gallery-theme] .commission-intro,
html[data-gallery-theme] .commission-note,
html[data-gallery-theme] .artist-copy p:not(.eyebrow),
html[data-gallery-theme] .archive-intro p:last-child,
html[data-gallery-theme] .cafe-state {color:var(--muted)}
html[data-gallery-theme] .sold,
html[data-gallery-theme] .archive-label {color:var(--warm-ink)}
html[data-gallery-theme] .button,
html[data-gallery-theme] .cafe-toggle,
html[data-gallery-theme] .filters button.active {background:var(--button);color:var(--button-ink);border-color:var(--button)}
html[data-gallery-theme] .button:hover,
html[data-gallery-theme] .cafe-toggle:hover {box-shadow:inset 0 0 0 2px var(--accent)}
html[data-gallery-theme] .button.secondary {background:transparent;color:var(--ink);border-color:var(--ink)}
html[data-gallery-theme] .button.secondary:hover,
html[data-gallery-theme] .filters button:not(.active):hover {background:var(--hover)}
html[data-gallery-theme] .cafe-volume {accent-color:var(--accent)}
html[data-gallery-theme] :is(button,a,input,textarea,select):focus-visible {outline:3px solid var(--focus);outline-offset:4px}
html[data-gallery-theme] .hero-art .art-open {box-shadow:0 18px 44px #08130e30}

/* A single sticky strip keeps appearance and music within reach. */
html[data-gallery-theme] .cafe-player {gap:20px;padding:10px 5%}
html[data-gallery-theme] .cafe-toggle {font:500 12px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.theme-control {display:flex;align-items:center;gap:12px;margin-right:auto;flex-shrink:0}
.theme-label {font-size:10px;letter-spacing:.06em;color:var(--muted)}
.theme-options {display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:6px}
.theme-options button {display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 11px;background:transparent;border:1px solid transparent;border-radius:3px;font-size:11px;line-height:1.2;white-space:nowrap;color:var(--muted)}
.theme-options button:hover {background:var(--hover);color:var(--ink)}
.theme-options button[aria-pressed="true"] {background:var(--hover);color:var(--ink);border-color:var(--accent);box-shadow:0 1px 3px #00000012}
.theme-dot {width:13px;height:13px;flex-shrink:0;border-radius:50%;border:1px solid #92978d}
.theme-dot-floral {background:radial-gradient(ellipse at top right,#c6c8c2,transparent 60%),#fcfcfb}
.theme-dot-pearl {background:#efeee9}
.theme-dot-charcoal {background:radial-gradient(ellipse at top right,#5c6d5b,#232b27)}
html[data-gallery-theme] .cafe-description {display:block;min-width:160px}
html[data-gallery-theme] .cafe-description strong {font-size:19px;line-height:1.3}
html[data-gallery-theme] .cafe-state {display:block;font-size:10px;margin-top:2px;line-height:1.4}
@media(max-width:1100px) {
  html[data-gallery-theme] .cafe-player {display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 16px}
  .theme-control {grid-column:1/-1;justify-content:center;width:100%;margin-right:0}
  html[data-gallery-theme] .cafe-description {min-width:0}
  html[data-gallery-theme] .cafe-toggle {min-height:44px}
}
@media(max-width:650px) {
  html[data-gallery-theme="pearl"] {--relief-size:420px}
  html[data-gallery-theme="floral"] {--relief-size:760px}
  html[data-gallery-theme="charcoal"] {--relief-size:560px}
  html[data-gallery-theme] .cafe-player {padding:8px 5%;gap:6px 10px}
  .theme-label {display:none}
  .theme-options {width:100%;padding:2px;gap:2px}
  .theme-options button {flex:1;min-width:0;padding:7px 6px;font-size:11px;gap:6px}
  html[data-gallery-theme] .cafe-description strong {font-size:17px}
  html[data-gallery-theme] .cafe-state {font-size:9px;max-width:135px}
  html[data-gallery-theme] .cafe-toggle {min-width:108px;padding:9px 10px}
  html[data-gallery-theme] .cafe-volume-label>span {display:none}
  html[data-gallery-theme] .cafe-volume {width:45px}
}