/* Pill header and shared light/dark palette. */
header::before{border-radius:999px}
.theme-toggle{position:absolute;left:6.5%;top:50%;transform:translateY(-50%);z-index:24;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:0;padding:11px;background:transparent;color:#77716d;transition:opacity .2s ease,color .5s ease}
.theme-toggle:hover{background:transparent;opacity:.62}
.theme-toggle:disabled{cursor:default}
.theme-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun-icon{display:none}
html[data-theme=dark]{color-scheme:dark;background:#191817}
html[data-theme=dark] body{background:#191817;color:#e7e0da}
html[data-theme=dark] .home-page{background:#191817}
html[data-theme=dark] header::before{background:rgba(34,32,30,.78);border-color:rgba(235,225,215,.16);box-shadow:0 8px 28px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme=dark] .theme-toggle{color:#d1c7be}
html[data-theme=dark] .theme-toggle:hover{background:transparent}
html[data-theme=dark] .theme-toggle .moon-icon{display:none}
html[data-theme=dark] .theme-toggle .sun-icon{display:block}
html[data-theme=dark] nav{color:#bdb3aa}
html[data-theme=dark] nav a:hover,html[data-theme=dark] nav a[aria-current=page]{color:#fff6ed}
html[data-theme=dark] .home h1{color:#d6ccc2}
html[data-theme=dark] .home h1 .word-hover{color:#fff7ef}
html[data-theme=dark] .ambient-background{background:#191817}
html[data-theme=dark] .ambient-field-one{background:radial-gradient(ellipse 40% 46% at 27% 35%,#51443b 0%,#302b27 40%,rgba(48,43,39,0) 75%),radial-gradient(ellipse 38% 44% at 76% 69%,#51443b 0%,#302b27 38%,rgba(48,43,39,0) 75%)}
html[data-theme=dark] .ambient-field-two{background:radial-gradient(ellipse 36% 42% at 68% 29%,#191817 0%,rgba(25,24,23,.94) 32%,rgba(25,24,23,0) 75%),radial-gradient(ellipse 33% 40% at 35% 76%,#51443b 0%,rgba(81,68,59,.85) 30%,rgba(81,68,59,0) 75%)}
html[data-theme=dark] .ambient-light{background:radial-gradient(ellipse 52% 34% at 50% 38%,rgba(25,24,23,.5) 0%,rgba(25,24,23,.22) 52%,transparent 100%)}
html[data-theme=dark] footer,html[data-theme=dark] .motion-toggle,html[data-theme=dark] .back,html[data-theme=dark] .project p,html[data-theme=dark] .form-note{color:#b3a79c}
html[data-theme=dark] .motion-toggle:hover{color:#fff6ed}
html[data-theme=dark] .intro h1,html[data-theme=dark] .about h1,html[data-theme=dark] .about>p,html[data-theme=dark] .contact h1,html[data-theme=dark] .detail-copy p:first-child{color:#d1c4b8}
html[data-theme=dark] .intro{border-color:#5f554c}
html[data-theme=dark] .filters button{background:#302c28;color:#d1c4b8}
html[data-theme=dark] .filters button[aria-pressed=true]{background:#cfc0b2;color:#211d19}
html[data-theme=dark] input,html[data-theme=dark] textarea{color:#eee5dd;border-color:#87786b}
html[data-theme=dark] form button{color:#eee5dd;border-color:#b4a394}
html[data-theme=dark] dialog{background:#27231f;color:#eee5dd}
html[data-theme=dark] .close{color:#eee5dd}
html[data-theme=dark] .clients img{background:#eeece9;border-radius:4px}
html[data-theme=dark] :focus-visible{outline-color:#e0c6af}

/* The interface fades through the midpoint before the palette changes. */
html{background:#f6f4f2;transition:background-color .42s ease}
body{transition:opacity .42s ease,background-color .42s ease,color .42s ease}
html.theme-fading body{opacity:.38}
header::before,nav,.home h1,footer,.motion-toggle,.intro h1,.about h1,.about>p,.contact h1,.detail-copy p:first-child,input,textarea,form button,.filters button{transition-property:color,background-color,border-color,box-shadow,opacity;transition-duration:.42s;transition-timing-function:ease}

/* A quieter version of the home atmosphere follows every inner page. */
body:not(.home-page){position:relative;isolation:isolate;min-height:100vh;background:transparent}
body:not(.home-page)::before,body:not(.home-page)::after{content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;will-change:transform;backface-visibility:hidden;contain:paint;transform:translate3d(0,0,0);transition:opacity .42s ease}
body:not(.home-page)::before{opacity:.23;background:radial-gradient(ellipse 38% 42% at 25% 34%,#b9b0aa 0%,rgba(206,198,194,.72) 42%,transparent 76%),radial-gradient(ellipse 36% 40% at 77% 70%,#b9b0aa 0%,rgba(206,198,194,.65) 40%,transparent 75%);animation:inner-ambient-one 18s ease-in-out infinite alternate}
body:not(.home-page)::after{opacity:.18;background:radial-gradient(ellipse 42% 38% at 69% 27%,#eeece9 0%,rgba(238,236,233,.7) 40%,transparent 76%),radial-gradient(ellipse 34% 38% at 34% 78%,#b9b0aa 0%,rgba(185,176,170,.55) 38%,transparent 75%);animation:inner-ambient-two 24s ease-in-out infinite alternate}
html[data-theme=dark] body:not(.home-page)::before{opacity:.32;background:radial-gradient(ellipse 38% 42% at 25% 34%,#51443b 0%,rgba(48,43,39,.74) 42%,transparent 76%),radial-gradient(ellipse 36% 40% at 77% 70%,#51443b 0%,rgba(48,43,39,.66) 40%,transparent 75%)}
html[data-theme=dark] body:not(.home-page)::after{opacity:.22;background:radial-gradient(ellipse 42% 38% at 69% 27%,#211f1d 0%,rgba(25,24,23,.72) 40%,transparent 76%),radial-gradient(ellipse 34% 38% at 34% 78%,#51443b 0%,rgba(81,68,59,.5) 38%,transparent 75%)}
/* Constant-size layers avoid repeated raster scaling on image-heavy pages. */
@keyframes inner-ambient-one{0%{transform:translate3d(-6%,-3%,0)}100%{transform:translate3d(6%,3%,0)}}
@keyframes inner-ambient-two{0%{transform:translate3d(5%,3%,0)}100%{transform:translate3d(-5%,-3%,0)}}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html[data-theme=dark] header::before{background:linear-gradient(120deg,rgba(72,63,55,.4),rgba(30,28,26,.32))}
}
@media(max-width:700px){
 header::before{border-radius:999px}
 .theme-toggle{left:24px}
 html[data-theme=dark] header nav{background:#191817}
 html[data-theme=dark] header nav a,html[data-theme=dark] .mobile-menu-toggle{color:#cfc0b2}
 html[data-theme=dark] header nav a:hover,html[data-theme=dark] header nav a:focus-visible{color:#fff6ed}
}
@media(prefers-reduced-motion:reduce){
 body{transition:none}
 body:not(.home-page)::before,body:not(.home-page)::after{animation:none;will-change:auto}
}
@media(max-width:700px){
  header nav a{font-size:clamp(20px,5.8vw,27px);line-height:1.08;padding:5px 0}
}

/* Projects controls and titles share the homepage's soft editorial language. */
.filters button{
  border:1px solid rgba(255,255,255,.58);
  border-radius:999px;
  padding:9px 16px;
  background:rgba(238,236,233,.32);
  color:#77716d;
  box-shadow:0 5px 18px rgba(80,68,59,.045),inset 0 1px 0 rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,transform .2s ease;
}
.filters button:hover{background:rgba(255,255,255,.46);transform:translateY(-1px)}
.filters button[aria-pressed=true]{background:rgba(185,176,170,.72);border-color:rgba(255,255,255,.7);color:#292723}
.project img{border-radius:10px}
.project h2{font-family:Fraunces,Georgia,serif;font-weight:400;letter-spacing:-.35px;color:#77716d}
html[data-theme=dark] .filters button{border-color:rgba(235,225,215,.18);background:rgba(58,51,46,.4);color:#cfc0b2;box-shadow:0 5px 18px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme=dark] .filters button:hover{background:rgba(92,79,69,.56)}
html[data-theme=dark] .filters button[aria-pressed=true]{background:rgba(187,166,145,.8);border-color:rgba(255,239,225,.45);color:#211d19}
html[data-theme=dark] .project h2{color:#d1c4b8}
@media(max-width:700px){
  .filters button{padding:8px 13px}
  .project img{border-radius:8px}
}

.project h2{font-size:22px;margin-top:17px;margin-bottom:2px}
@media(max-width:700px){
  .project h2{font-size:18px;margin-top:12px;margin-bottom:1px}
}