/* Filter the root so fixed controls retain their viewport positioning. */
html{--bw:0;filter:grayscale(var(--bw))}
html[data-color-mode="bw"]{--bw:1}
html.color-mode-ready{transition:filter 2.5s ease-in-out}
/* Modal photographs are rendered in the browser's top layer. */
dialog{filter:grayscale(var(--bw));transition:filter 2.5s ease-in-out}
html.color-mode-embedded,html.color-mode-embedded dialog{filter:none}
.color-mode-switch{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:10px/1 'Courier New',monospace;letter-spacing:.065em;cursor:pointer;flex-shrink:0}
.color-mode-track{position:relative;display:block;width:34px;height:18px;border:1px solid currentColor;border-radius:20px;background:#09090960}
.color-mode-track::after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:currentColor;transition:transform .35s ease,background .35s ease}
.color-mode-switch[aria-checked="true"] .color-mode-track::after{transform:translateX(16px)}
.color-mode-switch:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hero-meta{align-items:flex-start}
.hero-meta-heading{display:flex;align-items:center;flex-wrap:wrap;gap:0 18px;margin-top:-15px}
.hero-meta-heading>span{min-height:44px;display:flex;align-items:center}
.series-nav .color-mode-switch{margin-right:26px}
@media(max-width:700px){.hero-meta-heading{gap:0 10px;max-width:calc(100% - 42px)}.color-mode-switch{font-size:9px}.series-nav .color-mode-switch{margin-right:0}.series-nav nav{gap:18px}}
@media(prefers-reduced-motion:reduce){html.color-mode-ready,dialog,.color-mode-track::after{transition:none}}