/* ─────────────────────────────────────────────────────────────
   Dark mode. The card is turned to night in one step: its
   paper colour is set so that, once inverted, it lands on a
   soft near-black and the ink on a soft white. Photos, videos
   and embeds are inverted back so they keep their real colours;
   the floral initials and the hand-drawn arrow stay inverted,
   so they read light on dark like the text.
   ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] { background: #14120f; color-scheme: dark; }
html[data-theme="dark"] body::before { filter: brightness(0.5) saturate(0.9); }

html[data-theme="dark"] :is(.wrap:not(.clouds), .page, .card),
html[data-theme="dark"] .clouds :is(.cloud, figure) {
  background-color: #e9e8e6 !important;           /* inverts to ~#161719 */
  box-shadow: 0 1px 2px rgba(255,255,255,0.05), 0 30px 70px -30px rgba(255,255,255,0.6) !important; /* inverts to a dark shadow */
}
html[data-theme="dark"] :is(.wrap, .page, .card) {
  filter: invert(1) hue-rotate(180deg);
}
html[data-theme="dark"] :is(.wrap, .page, .card) :is(img:not(.initial):not([src*="back-arrow"]), video, iframe, canvas, picture img) {
  filter: invert(1) hue-rotate(180deg);
}
html[data-theme="dark"] :is(.wrap, .page, .card) picture img { filter: none; }

/* the switch: a small round button in the top-right corner, over the painting */
.theme-switch {
  position: fixed; top: 1rem; right: 1rem; z-index: 50;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(20, 18, 15, 0.42); color: #f3efe6;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: background .2s, transform .2s;
}
.theme-switch:hover { background: rgba(20, 18, 15, 0.62); }
.theme-switch:active { transform: scale(0.94); }
.theme-switch:focus-visible { outline: 2px solid #f3efe6; outline-offset: 2px; }
.theme-switch svg { width: 1.05rem; height: 1.05rem; display: block; }
@media (max-width: 640px) { .theme-switch { top: 1.1rem; right: 1.1rem; width: 2.1rem; height: 2.1rem; } }
@media print { .theme-switch { display: none; } }