/* Day/night portfolio, with the original grid unchanged. */
body { transition: background-color .65s ease, color .65s ease; }
html[data-night] { --paper: #141513; --ink: #eeeee8; --muted: #a6a79f; --hairline: #383a35; color-scheme: dark; background: var(--paper); }
.night-toggle { position: fixed; top: 17px; right: max(12px, var(--edge)); z-index: 40; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 78px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 24px; background: var(--paper); color: var(--ink); font: 400 11px var(--font-sans); letter-spacing: .04em; cursor: pointer; transition: background-color .65s, color .65s; }
.night-toggle[hidden] { display: none; }
.night-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.night-toggle-dot { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transform: rotate(-35deg); }
.night-toggle[aria-busy="true"] { opacity: .65; }
html[data-night] .brand-mark img { filter: invert(1); }
html[data-night] .tile { background: #20221e; }
html[data-night] .lightbox { background: rgba(20, 21, 19, .98); }
html[data-night] .pf-modal { background: var(--paper); color: var(--ink); }
html[data-night] .pf-form input { color: var(--ink); }
/* A decoded overlay crossfades; the daytime image remains underneath. */
.mgrid.js-fade .tile img.night-layer { opacity: 0; pointer-events: none; }
html[data-night] .mgrid.js-fade .tile img.night-layer.night-ready { opacity: 1; }
.lb-open .night-toggle, .pf-open .night-toggle { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { body, .night-toggle, .tile img.night-layer { transition: none !important; } }