/* A change of light, with the same Ashbox typography and layout throughout. */
:root {
  color-scheme: light;
  --paper: #fff6e9;
  --ink: #382b28;
  --muted: #756055;
  --wine: #87483a;
  --line: #dfcdb8;
  --accent-hover: #6d382c;
  --button-text: #fffaf2;
  --selection: #e9c5ab;
  --selection-text: #382b28;
  --frame-bg: #efe2cf;
  --frame-a: #dcccac;
  --frame-b: #d3d0b8;
  --frame-ink: #382b28;
  --frame-accent: #724d3d;
  --hero-bg: #8b5848;
  --hero-text: #fff9ef;
  --hero-outline: #f4d5b580;
  --hero-glow: #f0be8850;
  --monogram: #f5d5b5;
  --monogram-dot: #c79a84;
  --hero-star: #f3d0a5;
  --card-a: #e6d7c1;
  --card-b: #d7d7c7;
  --card-c: #eed3c4;
  --after-bg: #483536;
  --after-text: #fff3e7;
  --after-muted: #d9c5b8;
  --after-accent: #f3c5b2;
  --after-line: #ae8c80;
  --after-button: #fff0df;
  --after-button-text: #40252b;
  --input-line: #bfa78f;
  --input-placeholder: #78685c;
  --orb: #c57528;
  --orb-halo: #c5752822;
}
:root[data-theme="noon"] {
  --paper: #f7f5ef;
  --ink: #292721;
  --muted: #706a62;
  --wine: #692f3c;
  --line: #d7d0c6;
  --accent-hover: #50222e;
  --button-text: #fffaf2;
  --selection: #dcc2c6;
  --selection-text: #292721;
  --frame-bg: #eeece4;
  --frame-a: #d1c8b6;
  --frame-b: #c8cdbd;
  --frame-ink: #292721;
  --frame-accent: #60353e;
  --hero-bg: #643240;
  --hero-outline: #d3aaaf66;
  --hero-glow: #ba788750;
  --monogram: #e2c4ba;
  --monogram-dot: #bd8e95;
  --hero-star: #d0aca2;
  --card-a: #ded4c6;
  --card-b: #c4c1b6;
  --card-c: #dac3b9;
  --after-bg: #292723;
  --after-muted: #cabbaa;
  --after-accent: #dfbdb4;
  --after-line: #a5907d;
  --input-line: #bbb2a5;
  --input-placeholder: #766e62;
  --orb: #a27616;
  --orb-halo: #d6b14026;
}
:root[data-theme="evening"] {
  --paper: #ead3cf;
  --ink: #35272f;
  --muted: #634955;
  --wine: #7b304e;
  --line: #c8abb2;
  --accent-hover: #61223c;
  --button-text: #fff4f0;
  --selection: #cfa3b2;
  --selection-text: #35272f;
  --frame-bg: #ddc1bf;
  --frame-a: #c9acb0;
  --frame-b: #bcb1bf;
  --frame-ink: #35272f;
  --frame-accent: #602a45;
  --hero-bg: #583743;
  --hero-outline: #edb6c480;
  --hero-glow: #df8eab38;
  --monogram: #edbec0;
  --monogram-dot: #c291a3;
  --hero-star: #eec1ae;
  --card-a: #d2b3ad;
  --card-b: #bdb3bd;
  --card-c: #d7aeb0;
  --after-bg: #372733;
  --after-text: #fff0ed;
  --after-muted: #d9bdcb;
  --after-accent: #edb4c5;
  --after-line: #a27991;
  --after-button: #f0d6d4;
  --after-button-text: #442537;
  --input-line: #ac8593;
  --input-placeholder: #6b515c;
  --orb: #a04c66;
  --orb-halo: #a04c6626;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #1b1926;
  --ink: #eee4ef;
  --muted: #b7aaba;
  --wine: #e2aabe;
  --line: #4a3c53;
  --accent-hover: #f2c7d6;
  --button-text: #291c2a;
  --selection: #76546f;
  --selection-text: #fff4fa;
  --frame-bg: #242131;
  --frame-a: #443947;
  --frame-b: #393848;
  --frame-ink: #f3e6ed;
  --frame-accent: #efbbcf;
  --hero-bg: #312538;
  --hero-text: #f1e5f3;
  --hero-outline: #c6b4dd66;
  --hero-glow: #947baf33;
  --monogram: #c6b4dd;
  --monogram-dot: #aa859f;
  --hero-star: #ddc7e6;
  --card-a: #3a303e;
  --card-b: #343540;
  --card-c: #47303e;
  --after-bg: #131119;
  --after-text: #e9deec;
  --after-muted: #bbadc1;
  --after-accent: #d9a6c1;
  --after-line: #907a9a;
  --after-button: #e6d5e7;
  --after-button-text: #291c2a;
  --input-line: #827189;
  --input-placeholder: #ae9db5;
  --orb: #cdb7e6;
  --orb-halo: #cdb7e626;
}
::selection { background: var(--selection); color: var(--selection-text); }
.draft-strip { background: var(--after-bg); color: var(--after-text); }
.draft-strip span { color: var(--after-muted); }
.primary { color: var(--button-text); }
.primary:hover { background: var(--accent-hover); }
.hero-visual { background: var(--hero-bg); color: var(--hero-text); }
.hero-visual::before { border-color: var(--hero-outline); }
.hero-visual::after { background: var(--hero-glow); }
.hero-visual.has-portrait { padding: 0; height: auto; }
.hero-visual.has-portrait::before, .hero-visual.has-portrait::after { display: none; }
.hero-visual.has-portrait .hero-real {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 0;

}
.patreon-previews { margin-top: 54px; }
.patreon-preview-heading h3 { font: 32px Georgia, serif; margin: 0 0 10px; }
.patreon-preview-heading p, .patreon-preview-note { color: var(--after-muted); font-size: 12px; line-height: 1.7; }
.patreon-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.patreon-post-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid var(--after-line); color: var(--after-text); text-decoration: none; }
.patreon-post-card:hover { border-color: var(--after-accent); }
.patreon-post-card:focus-visible { outline: 2px solid var(--after-accent); outline-offset: 5px; }
.patreon-post-card time { font-size: 10px; letter-spacing: 1.5px; color: var(--after-muted); }
.patreon-post-card h4 { font: 30px Georgia, serif; margin: 22px 0; }
.patreon-post-card p { color: var(--after-muted); font-size: 12px; margin: 0 0 20px; }
.patreon-post-card > span { margin-top: auto; font-size: 12px; color: var(--after-accent); }
.patreon-preview-note { margin-top: 18px; }
@media (max-width: 700px) { .patreon-post-grid { grid-template-columns: 1fr; } }
.monogram { color: var(--monogram); }
.monogram span { color: var(--monogram-dot); }
.visual-star { color: var(--hero-star); }
.photo-label { opacity: .85; }
.art-image { background: var(--card-a); }
.art-two { background: var(--card-b); }
.art-three { background: var(--card-c); }
.empty-canvas small { color: #62564a; }
.frame-section { background: var(--frame-bg); }
.frame-placeholder { background: var(--frame-a); color: var(--frame-ink); }
.frame-b { background: var(--frame-b); }
.frame-placeholder em { color: var(--frame-accent); }
.frame-placeholder small { opacity: 1; }
.after-section { background: var(--after-bg); color: var(--after-text); }
.after-section .eyebrow, .after-copy small { color: var(--after-muted); }
.after-section em { color: var(--after-accent); }
.age-tag { border-color: var(--after-line); }
.light { background: var(--after-button); color: var(--after-button-text); }
input, select, textarea { border-color: var(--input-line); }
select option { color: var(--ink); background: var(--paper); }
::placeholder { color: var(--input-placeholder); }
.draft-message { background: var(--frame-bg); }
.modal-image.cropped-art { width: 100%; height: min(52vh, 420px); max-height: none; }
.art-photo-note { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 12px 0; }

/* Compact controls remain visible outside the mobile navigation menu. */
.daylight-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 17px; border-bottom: 1px solid var(--line); }
.daylight-bar[hidden] { display: none; }
.daylight-current { display: flex; align-items: center; gap: 13px; }
.daylight-current > div { display: flex; align-items: baseline; gap: 13px; }
.daylight-orb { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--orb); box-shadow: 0 0 0 5px var(--orb-halo); }
[data-theme="night"] .daylight-orb { background: transparent; box-shadow: inset -4px -2px 0 0 var(--orb); }
.daylight-label { font: italic 17px var(--serif); }
.daylight-clock { font-size: 10px; color: var(--muted); line-height: 1.6; }
.daylight-control { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.daylight-control label { color: var(--muted); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.daylight-control select { width: 160px; min-height: 44px; margin: 0; padding: 9px 26px 9px 12px; font-size: 11px; background-color: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 0; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Only interface colors change. Photos and paintings retain their real colors. */
:root[data-theme-ready] :where(body, header, nav, section, footer, aside, dialog, h1, h2, h3, p, em, span, small, b, a, button, input, select, textarea, .hero-visual, .monogram, .visual-star, .draft-strip, .frame-placeholder, .draft-message) {
  transition: color .85s ease, background-color .85s ease, border-color .85s ease, box-shadow .85s ease, transform .2s ease;
}
:root[data-theme-ready] .hero-visual::before, :root[data-theme-ready] .hero-visual::after { transition: background-color .85s ease, border-color .85s ease; }
@media (max-width: 1050px) {
  .daylight-current > div { flex-direction: column; gap: 2px; }
}
@media (max-width: 700px) {
  .daylight-bar { gap: 12px; padding-block: 13px; align-items: center; }
  .daylight-current { gap: 11px; min-width: 0; }
  .daylight-label { font-size: 16px; }
  .daylight-clock { font-size: 9px; max-width: 170px; }
  .daylight-control { flex-direction: column; align-items: flex-start; gap: 5px; }
  .daylight-control label { font-size: 8px; }
  .daylight-control select { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme-ready] *, :root[data-theme-ready] *::before, :root[data-theme-ready] *::after { transition: none !important; }
}