/* Charcoal identity, neutral-grey ground and translucent material surfaces. */
:root{--paper:#fafaf8;--ink:#4b4d47;--muted:#686a64;--surface:#eff0ed;--accent:#4b4d47}
body{background:var(--paper)}
.header,.header.scrolled{background:rgba(250,250,248,.62);backdrop-filter:blur(24px) saturate(.75);-webkit-backdrop-filter:blur(24px) saturate(.75);box-shadow:inset 0 -1px 0 rgba(255,255,255,.5),0 8px 25px -22px rgba(44,46,40,.22)}
.header #mobile-nav{background:rgba(250,250,248,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.header nav a{padding:6px 10px;margin:-6px -10px;border-radius:12px;transition:background .2s ease,color .2s ease}
.header nav a:hover,.header nav a:focus-visible{background:var(--accent);color:#fff;text-decoration:none}
.header nav a.active{color:var(--accent);text-decoration:underline;text-underline-offset:6px}
.header nav a.active:hover{color:#fff;text-decoration:none}
.header button{border-radius:13px;transition:background .2s ease,color .2s ease}
.header button:hover{background:var(--accent);color:white}
.header #language{padding:7px 10px;margin:-2px -5px}
.header #language:hover span{color:white}
.header #menu{padding:7px 10px;margin:-2px -10px}
.about,.work,.strengths{background:rgba(250,250,248,.4)}
.about .timeline{gap:15px}
.timeline article,.strength-card,.strength-card:nth-child(2),.strength-card:nth-child(3),.project,.portrait-frame{
  background:rgba(255,255,255,.33);backdrop-filter:blur(20px) saturate(.8);-webkit-backdrop-filter:blur(20px) saturate(.8);
  border:1px solid rgba(255,255,255,.78);border-radius:22px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.86),inset 0 -1px 0 rgba(89,93,82,.08),0 16px 35px -30px rgba(44,47,39,.24)
}
.timeline article{padding:24px}
.portrait-frame{padding:12px}
.portrait-frame img{border-radius:13px;background:rgba(255,255,255,.5)}
.portrait-frame figcaption{padding:0 7px 5px}
.project{padding:12px;transition:background .25s ease}
.project-photo{border-radius:13px}
.project-copy{padding:24px 13px 18px}
.project-factory{gap:30px}
.project-factory .project-copy{padding:24px}
.strength-card{transition:background .25s ease,box-shadow .25s ease}
.strength-card:hover,.project:hover{background:rgba(255,255,255,.53)}
.strength-card>p,.timeline article>p:last-child,.project-copy>p:last-child{color:#656861}
.strength-card .evidence{color:var(--ink)}
.text-link,.orbit-control,#copy-email,.hero .hero-bottom .scroll-link{
  background:var(--accent);color:#fff;border:1px solid transparent;border-radius:24px;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease
}
.text-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;font-size:14px}
.orbit-control{padding:8px 13px}
#copy-email{padding:7px 15px;color:#fff}
.hero .hero-bottom .scroll-link{padding:9px 15px}
.text-link:hover,.orbit-control:not(:disabled):hover,#copy-email:hover,.hero .hero-bottom .scroll-link:hover{
  background:rgba(255,255,255,.78);color:var(--accent);border-color:rgba(75,77,71,.24);text-decoration:none;
  box-shadow:0 5px 15px -10px rgba(44,46,40,.3)
}
.orbit-control:disabled{background:#d8dad3;color:#777}
.text-link:active,.orbit-control:active,#copy-email:active{transform:scale(.97)}
.project-open{background:rgba(245,245,242,.85);color:var(--accent);transition:background .2s ease,color .2s ease,transform .25s ease}
.project:hover .project-open{background:var(--accent);color:white}
.photo-note{background:rgba(250,250,248,.87);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:8px}
.email{padding:6px 12px;margin:-6px -12px;border-radius:13px;transition:background .2s ease,color .2s ease}
.email:hover{background:var(--accent);color:white}
@media(max-width:700px){
 .project-copy{padding:20px 9px 13px}.project-factory .project-copy{padding:20px 9px 13px}
 .timeline article{padding:21px}.portrait-frame{width:85%}.portrait-frame img{border-radius:13px}
 .strength-card{padding:28px}.text-link{padding:9px 15px}
 .hero .hero-bottom .scroll-link{padding:7px 10px}.orbit-control{font-size:11px;padding:6px 10px}
}
@supports not (backdrop-filter:blur(1px)){
 .header,.header.scrolled{background:rgba(250,250,248,.95)}
 .timeline article,.strength-card,.project,.portrait-frame{background:rgba(249,249,247,.88)}
}