/* V16: Accessible light/dark theme, consistent across the portfolio and /links/. */
:root{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#151b17;
  --paper2:#202a23;
  --ink:#f0f3e9;
  --grey:#b2c0ad;
  --cream:#252f28;
  --line:#455148;
  --olive:#242f27;
}
/* The symbol shows the mode a visitor can switch to (moon in light, sun in dark). */
.theme-toggle{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  transition:background-color .25s,border-color .25s,transform .25s,color .25s;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s,opacity .25s}
.theme-toggle .theme-sun{display:none}
html[data-theme="dark"] .theme-toggle .theme-sun{display:block}
html[data-theme="dark"] .theme-toggle .theme-moon{display:none}
.theme-toggle:hover{border-color:#94b74e;background:rgba(149,185,63,.11);transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:3px solid #a8cd5d;outline-offset:3px}
/* Desktop: small icon is the final navigation item. Mobile: remains visible after menu. */
.nav .theme-toggle{order:5;position:relative;z-index:2}
@media(max-width:960px){.nav .theme-toggle{order:6;flex-shrink:0}}
@media(max-width:400px){.nav .theme-toggle{width:42px;height:42px;flex-basis:42px}.nav .nav-toggle{margin-left:auto}}
/* Main site: maintain the original dark reel strip and contact section. */
html[data-theme="dark"] .site-header{background:rgba(19,26,21,.95);border-bottom-color:#39483a}
html[data-theme="dark"] .nav-links{background:var(--paper)}
html[data-theme="dark"] .logo-descriptor{color:#b2bdad}
html[data-theme="dark"] .logo-dot,html[data-theme="dark"] .footer-mark span{color:#a9d462}
html[data-theme="dark"] .nav-links a[aria-current="location"]{color:var(--lime)}
html[data-theme="dark"] .nav-cta:hover{color:#1d271e;background:var(--lime);border-color:var(--lime)}
html[data-theme="dark"] .nav-toggle span{background:#f0f3e9}
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .hero-description{color:#bac8b5}
html[data-theme="dark"] .hairline{background:#63715e}
html[data-theme="dark"] .hero-bottom,html[data-theme="dark"] .hero-sideways{color:#bac6b7}
html[data-theme="dark"] .hero-asterisk{color:#c5e17e}
html[data-theme="dark"] .stroke-word:after{background:#879e42}
html[data-theme="dark"] .hero-photo-frame{box-shadow:20px 24px 0 #354333}
html[data-theme="dark"] .hero-sticker svg{fill:#202420}
html[data-theme="dark"] .hero-floating-card{background:#29352b;color:#f0f3e9;box-shadow:0 15px 45px rgba(0,0,0,.32)}
html[data-theme="dark"] .play-pulse{background:#131b16;color:var(--lime)}
html[data-theme="dark"] .pill-primary{background:var(--lime);color:#1e291e}
html[data-theme="dark"] .pill-primary:hover{background:#e0ffa0}
html[data-theme="dark"] .ticker{color:#202420}
html[data-theme="dark"] .ticker-track{color:#202420}
html[data-theme="dark"] .section-topline{color:#a3b4a1}
html[data-theme="dark"] .section-index{color:#e6efe2}
html[data-theme="dark"] .work-section{background:radial-gradient(circle at 82% 12%,rgba(137,168,92,.07),transparent 42%),#202820;color:#f6f7ef}
html[data-theme="dark"] .work-section .section-topline{color:#a7b6a3}
html[data-theme="dark"] .work-section .section-index{color:#f0f5e9}
html[data-theme="dark"] .work-section .work-card-meta{color:#f1f3ec}
html[data-theme="dark"] .work-section .work-card-meta small{color:#b9c6b6}
html[data-theme="dark"] .work-section .filter-chip{color:#e0e8dc;border-color:#687767}
html[data-theme="dark"] .work-section .filter-chip.active{color:#202820}
html[data-theme="dark"] .work-section .filter-chip.active span{color:#425027}
html[data-theme="dark"] .work-section .work-endnote{color:#b2c0ad}
html[data-theme="dark"] .quote-band{background:#253128}
html[data-theme="dark"] .quote-mark{color:#6c8658}
html[data-theme="dark"] .quote-footer{color:#b1bfae}
html[data-theme="dark"] .about-content p{color:#b7c6b6}
html[data-theme="dark"] .about-content .about-lead{color:#f0f3e9}
html[data-theme="dark"] .about-tags span{border-color:#596858;color:#e1ebdf}
html[data-theme="dark"] .about-visual-tag{color:#182319}
html[data-theme="dark"] .link-arrow{border-color:#dce9d8}
html[data-theme="dark"] .services-section{background:#1e2921}
html[data-theme="dark"] .services-heading p{color:#bbcab8}
html[data-theme="dark"] .service-card{background:#29362c;border-color:#435648}
html[data-theme="dark"] .service-card:hover{background:#304134}
html[data-theme="dark"] .service-card h3{color:#eff4eb}
html[data-theme="dark"] .service-card p{color:#becdba}
html[data-theme="dark"] .service-bottom{color:#afc1aa;border-top-color:#4e604e}
html[data-theme="dark"] .service-number{color:#bacab8}
html[data-theme="dark"] .service-inquiry{color:#d1eda1}
html[data-theme="dark"] .services-footnote{color:#becbb8}
html[data-theme="dark"] .contact-section{background:#101712;color:#f0f3e9}
html[data-theme="dark"] .contact-copy>p{color:#bfccbe}
html[data-theme="dark"] .contact-form-panel{background:#263128;color:#f0f3e9}
html[data-theme="dark"] .form-kicker{color:#f0f3e9}
html[data-theme="dark"] .field label{color:#c4d1bf}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field textarea,html[data-theme="dark"] .field select{color:#f0f3e9;border-bottom-color:#596d5c}
html[data-theme="dark"] .field input::placeholder,html[data-theme="dark"] .field textarea::placeholder{color:#b2c1af}
html[data-theme="dark"] .field select option{background:#263128;color:#f0f3e9}
html[data-theme="dark"] .submit-button{color:#1c291c}
html[data-theme="dark"] .footer{background:#0e140f;color:#e4ebdd}
html[data-theme="dark"] .footer-lower{color:#aebaac}
/* Link page: same site-wide preference, contrasting primary button. */
html[data-theme="dark"] .page-glow{background:radial-gradient(ellipse 640px 430px at 50% -60px,rgba(166,208,98,.12),transparent 82%)}
html[data-theme="dark"] .brand-dot{color:#a6d664}
html[data-theme="dark"] .brand-detail,html[data-theme="dark"] .eyebrow{color:#bdcbb6}
html[data-theme="dark"] .intro{color:#c1cebe}
html[data-theme="dark"] .photo-ring{background:#303c33;box-shadow:0 0 0 1px #50614e,0 18px 40px rgba(0,0,0,.25)}
html[data-theme="dark"] .bio-link-primary{background:#d4ff65;color:#1d271c;border-color:#d4ff65}
html[data-theme="dark"] .bio-link-primary:hover{background:#e5ffac;border-color:#e5ffac}
html[data-theme="dark"] .bio-link-primary .link-icon{background:#223123;color:#d4ff65}
html[data-theme="dark"] .bio-link-primary .link-text small{color:#39482d}
html[data-theme="dark"] .link-footer{color:#b4c2b0}
/* Link page theme control: unobtrusive in the header, not a second link button. */
.link-page .theme-toggle{position:absolute;top:17px;right:0;width:42px;height:42px;z-index:1}
.link-page{position:relative}
@media(max-width:430px){.link-page .theme-toggle{top:14px;right:0}}
@media(prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle svg{transition:none!important}.theme-toggle:hover{transform:none}}

/* Compact header at narrow phone widths: leave room for both menu and theme controls. */
@media(max-width:520px){.nav .logo-descriptor{display:none}}
/* Thank-you page follows the same color preference without changing its layout. */
.thank-you-page{background:var(--paper);color:var(--ink)}
.thank-you-page .thank-you-body-copy{color:#616d60}
html[data-theme="dark"] .thank-you-page .thank-you-body-copy{color:#bfccbd}

/* V18: inquiry form field contrast in dark theme. */
html[data-theme="dark"] .contact-form-panel .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24' stroke='%23e5eedc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-theme="dark"] .contact-form-panel .field select:required:invalid{color:#b2c1af}
html[data-theme="dark"] .calendar-picker-button{color:#d9e7d2}
html[data-theme="dark"] .calendar-picker-button:hover{background:rgba(167,211,91,.16);color:#d4ff65}
html[data-theme="dark"] .date-input-wrap input[type=date]{color-scheme:dark}