/* Original is the light design in styles.css. Midnight is the dark design. */
:root[data-theme="midnight"]{
  color-scheme:dark;
  --paper:#151821;--ink:#f4f1e7;--muted:#b8bac6;--yellow:#f8d76b;
  --line:#373b4b;--blue:#262b3d;--surface:#202533;--accent:#f8d76b;
  --button-ink:#1d2331;--contact-bg:#272d3e;--contact-ink:#f4f1e7;
}
.is-dark body{background:var(--paper);color:var(--ink)}
.is-dark .site-header,.is-dark .site-header nav{background:var(--paper);border-color:var(--line)}
.is-dark .brand-dot,.is-dark .portfolio-heading h1>span{color:var(--accent)}
.is-dark .button{border-radius:50px}
.is-dark .button-dark{background:var(--ink);color:var(--paper);--play-cutout:var(--ink)}
.is-dark .button-yellow{background:var(--yellow);color:var(--button-ink);border-color:transparent}
.is-dark .button-light{background:var(--surface);color:var(--ink);border-color:var(--line)}
.is-dark .site-notice{background:var(--blue);color:var(--ink);border-color:var(--line)}
.is-dark .site-notice span{background:var(--yellow);color:var(--button-ink);border-color:transparent}
.is-dark .hero h1{font-size:clamp(52px,6.5vw,94px);white-space:normal;letter-spacing:-.055em;line-height:1.06}
.is-dark .name-word>svg{stroke:var(--accent)}
.is-dark .sunburst,.is-dark .doodle{color:var(--accent)}
.is-dark .art-backdrop{border-radius:50%;background:radial-gradient(circle at 35% 30%,#45506e,#262b3d 70%);box-shadow:0 0 75px #eac65708}
.is-dark .orbit{border-color:var(--line)}
.is-dark .discord-banner{background:var(--surface);border-color:var(--line);border-radius:24px}
.is-dark .discord-banner:hover{background:var(--blue)}
.is-dark .discord-symbol{background:var(--blue);color:var(--ink);border-radius:50px}
.is-dark .discord-banner p,.is-dark .channel-links p,.is-dark .channel-number,.is-dark .gallery-number{color:var(--muted)}
.is-dark .channel-links{gap:16px}
.is-dark .channel-links>a{background:var(--surface);padding:24px;border:1px solid var(--line);border-radius:18px}
.is-dark .contact-section{background:var(--contact-bg);color:var(--contact-ink);border:1px solid var(--line);border-radius:24px}
.is-dark .contact-section .eyebrow,.is-dark .contact-section .copy-email,.is-dark .contact-section p:not(.eyebrow){color:var(--contact-ink)}
.is-dark .gallery-image{border-radius:24px;background:var(--blue)}
.is-dark .gallery-expand{background:var(--surface);color:var(--ink)}
.is-dark .gallery-image:hover .gallery-expand{background:var(--yellow);color:var(--button-ink)}
.is-dark .thumbnail-viewer{background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:24px}
.is-dark .viewer-count{color:var(--muted)}
.is-dark .viewer-close,.is-dark .viewer-pagination button{border-color:var(--line);color:var(--ink)}
.is-dark .viewer-close:hover,.is-dark .viewer-pagination button:hover{background:var(--blue)}
.is-dark a:focus-visible,.is-dark button:focus-visible{outline-color:var(--accent)}
.is-dark .skip-link{background:var(--ink);color:var(--paper)}

/* Small, permanent control at the right edge of the header on both pages. */
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-actions .header-cta{margin-left:0}
.header-actions .menu-toggle{order:0}
.color-mode-toggle{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);transition:background .2s,transform .2s}
.color-mode-toggle[hidden]{display:none}
.color-mode-toggle:hover{background:var(--blue);transform:rotate(-8deg)}
.color-mode-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.color-mode-toggle .mode-sun,.is-dark .color-mode-toggle .mode-moon{display:none}
.is-dark .color-mode-toggle .mode-sun{display:block}
.is-dark .color-mode-toggle{color:var(--accent)}
@media(max-width:1100px){.is-dark .channel-links>a{padding-inline:15px}.site-header{gap:18px}.site-header nav{margin-left:0;gap:20px}}
@media(max-width:760px){.header-actions{gap:10px;margin-left:auto}.is-dark .hero h1{font-size:clamp(48px,8vw,67px)}.is-dark .hero{gap:18px}.is-dark .channel-links{gap:12px}}
@media(max-width:600px){
  .site-header{gap:10px}.header-actions{gap:8px}.color-mode-toggle{width:40px;height:40px}
  .is-dark .hero h1{font-size:clamp(46px,14vw,65px);letter-spacing:-.055em}
  .is-dark .hero-actions{flex-direction:row;justify-content:center}
  .is-dark .art-backdrop{inset:28px 12px}
  .is-dark .channel-links>a{padding:20px}
  .is-dark .channel-links>a:last-child{border-bottom:1px solid var(--line)}
  .is-dark .channel-links>a:first-child{padding-left:20px}
  .is-dark .gallery-image{border-radius:18px}
  .is-dark .contact-email{font-size:12px;overflow-wrap:anywhere}
  .is-dark .contact-section{padding-inline:22px}
}
@media(max-width:380px){.header-actions .header-cta{width:38px;padding:0;gap:0}.header-cta-label{display:none}}