@layer responsive {
 :root { --reading-size:clamp(.875rem,.82rem + .18vw,1rem); --detail-size:clamp(.6875rem,.64rem + .14vw,.8125rem); }
 h2 { font-size:clamp(1.6rem,1.1rem + 1.9vw,2.65rem); font-weight:620; }
 .muted { font-size:var(--reading-size); line-height:1.9; color:#b4b4b4; }
 .preserve-lines { white-space:pre-line; }
 .eyebrow { font-size:clamp(.625rem,.58rem + .15vw,.75rem); letter-spacing:.16em; }
 .hero-role { font-size:clamp(.6875rem,.63rem + .18vw,.875rem); }
 .section-note,.hero-footer,.reel-play { font-size:var(--detail-size); }
 .project-caption h3 { font-size:clamp(.875rem,.8rem + .24vw,1.0625rem); line-height:1.55; letter-spacing:-.01em; }
 .project-caption small { font-size:.625rem; letter-spacing:.09em; margin-bottom:.5rem; color:var(--blue); }
 .main-nav { gap:6px; }
 .main-nav a { flex-direction:column; gap:6px; height:64px; padding:7px 3px; border:1px solid transparent; border-radius:11px; }
 .main-nav svg { width:22px; height:22px; stroke-width:1.65; }
 .main-nav .nav-label,.main-nav a:is(:hover,:focus-visible) .nav-label { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; text-align:center; transform:none; padding:0; border:0; background:none; color:inherit; font-size:clamp(.5625rem,.52rem + .12vw,.6875rem); line-height:1.3; font-weight:600; letter-spacing:.035em; }
 .main-nav a[aria-current] { background:linear-gradient(180deg,#ffffff06,transparent); border-color:#ffffff08; }
 .main-nav a::after { left:28%; right:28%; bottom:-4px; height:2px; }
 .language-switch { flex:none; display:flex; align-items:center; padding:4px; border:1px solid #ffffff20; border-radius:100px; background:linear-gradient(145deg,#ffffff09,#0008); box-shadow:inset 0 1px 0 #ffffff07; backdrop-filter:blur(16px); }
 .language-switch button { min-width:clamp(4.2rem,7.2vw,5rem); min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.6rem clamp(.45rem,1.2vw,.85rem); border:1px solid transparent; border-radius:100px; background:transparent; color:#969696; font-size:clamp(.625rem,.58rem + .1vw,.6875rem); line-height:1.2; font-weight:650; transition:background .2s,color .2s; }
 .language-flag { flex:none; width:20px; height:14px; display:inline-grid; place-items:center; }
 .language-flag img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:1.5px; box-shadow:0 0 0 1px #ffffff2e; }
 .language-switch button[aria-pressed=true] { color:#e4f6ff; border-color:#88d5f53b; background:linear-gradient(145deg,#88d5f51f,#88d5f507); box-shadow:inset 0 1px 0 #ffffff0a; }
 .language-switch button:focus-visible { outline-offset:2px; }
 .lang-short { display:none; }
 .logo-description { margin-top:1.1rem; font-size:clamp(.75rem,.7rem + .15vw,.875rem); line-height:1.8; color:#aaa; }
 .skills-block { margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--line); }
 .skills-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 2.5rem; margin-top:1.5rem; }
 .skill-item>div { display:flex; justify-content:space-between; gap:1rem; font-size:var(--detail-size); color:#c5c5c5; }
 .skill-item>div>span:last-child { color:#959595; font-variant-numeric:tabular-nums; }
 meter { appearance:none; display:block; width:100%; height:4px; margin-top:.8rem; border:0; background:#ffffff10; border-radius:4px; }
 meter::-webkit-meter-bar { height:4px; background:#ffffff10; border:0; } meter::-webkit-meter-optimum-value { background:var(--blue); border-radius:4px; } meter::-moz-meter-bar { background:var(--blue); }
 .filters { gap:.4rem; border:0; margin-bottom:1.5rem; }
 .filter { padding:.55rem .85rem; min-height:40px; border:1px solid #ffffff10; border-radius:100px; font-size:var(--detail-size); }
 .filter.active { color:var(--blue); border-color:#88d5f544; background:#88d5f509; }
 .gallery-more { display:flex; justify-content:center; margin-top:1.75rem; }
 .more-button { min-height:44px; padding:.7rem 1.6rem; border:1px solid #ffffff24; border-radius:100px; background:#ffffff05; font-size:.8125rem; }
 .gallery-empty { padding:2rem 0; color:#aaa; font-size:var(--reading-size); }
 .contact-form-section { margin-top:2rem; padding:clamp(1.4rem,4vw,3.5rem); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); }
 .contact-form-section h2 { margin:.8rem 0 1.2rem; }
 #contact-form { display:grid; gap:1rem; min-width:0; }
 .form-field { display:grid; gap:.5rem; font-size:.6875rem; letter-spacing:.08em; color:#bbb; }
 .form-field input,.form-field textarea { width:100%; min-width:0; padding:.9rem 1rem; border:1px solid #ffffff20; border-radius:10px; background:#0008; color:#eee; font:inherit; font-size:1rem; letter-spacing:0; line-height:1.6; }
 .form-field textarea { resize:vertical; min-height:130px; }
 .form-field input:focus,.form-field textarea:focus { outline:1px solid var(--blue); border-color:var(--blue); }
 #contact-form .button { justify-self:start; font-size:.875rem; } #form-status { font-size:.875rem; color:#ccc; }
 .honeypot { display:none; } button:disabled { opacity:.45; cursor:default; }
 .contact-hub { margin-top:2rem; padding:clamp(1.5rem,4vw,3.75rem); }
 .contact-hub-grid { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); align-items:start; gap:clamp(2rem,5vw,5.5rem); }
 .contact-intro { min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding-block:clamp(.25rem,1.3vw,1rem); }
 .contact-intro h2 { max-width:13ch; margin:.8rem 0 1.35rem; font-size:clamp(2rem,3.6vw,4rem); line-height:1.08; letter-spacing:-.045em; }
 .contact-lede { max-width:48ch; margin:0; font-size:clamp(.875rem,.78rem + .25vw,1rem); line-height:1.85; }
 .contact-email-card { width:min(100%,390px); min-height:76px; margin-top:clamp(1.5rem,3vw,2.5rem); display:grid; grid-template-columns:1fr auto; align-items:center; gap:.15rem 1rem; padding:1rem 1.1rem; border:1px solid #ffffff1c; border-radius:14px; background:linear-gradient(135deg,#ffffff08,#0005); box-shadow:inset 0 1px 0 #ffffff07; transition:border-color .2s,background .2s,transform .2s; }
 .contact-email-label { color:var(--blue); font-size:.5625rem; font-weight:700; letter-spacing:.13em; }
 .contact-email-card strong { min-width:0; color:#dce6ec; font-size:clamp(.75rem,.68rem + .2vw,.875rem); font-weight:550; overflow-wrap:anywhere; }
 .contact-email-arrow { grid-column:2; grid-row:1/3; color:var(--blue); font-size:1rem; }
 .contact-form-panel { min-width:0; padding:clamp(1.2rem,2.6vw,2rem); border:1px solid #ffffff14; border-radius:18px; background:linear-gradient(145deg,#ffffff05,#0008); box-shadow:inset 0 1px 0 #ffffff05,0 20px 70px #0004; }
 .contact-form-heading { margin-bottom:1.4rem; }
 .contact-form-heading h3 { margin:.55rem 0 0; font-size:clamp(1.2rem,1rem + .7vw,1.75rem); line-height:1.3; letter-spacing:-.025em; }
 .contact-hub #contact-form .button { min-width:150px; justify-content:center; }
 @media(hover:hover) { .contact-email-card:hover { transform:translateY(-2px); border-color:#88d5f54d; background:#88d5f508; } }
 .page-footer { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.65rem; min-height:170px; padding:2.5rem clamp(5rem,9vw,8rem) max(2.5rem,env(safe-area-inset-bottom)); border-top:1px solid #ffffff12; text-align:center; }
 .footer-signature { display:grid; justify-items:center; gap:.42rem; }
 .page-footer .footer-rights,.page-footer .footer-credit-line { flex-basis:auto; order:initial; margin:0; line-height:1.45; }
 .footer-rights { color:#b6bbc0; font-size:clamp(.6875rem,.62rem + .24vw,.875rem); font-weight:750; letter-spacing:.09em; }
 .footer-credit-line { color:#7f858b; font-size:clamp(.625rem,.57rem + .2vw,.75rem); font-weight:600; letter-spacing:.09em; }
 .footer-credit-line span { color:#aeb4ba; letter-spacing:.035em; text-transform:none; }
 .footer-socials { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.3rem; }
 .footer-socials a { width:38px; height:38px; display:grid; place-items:center; border:1px solid #ffffff19; border-radius:50%; background:linear-gradient(145deg,#ffffff07,#0007); color:#9aa7af; box-shadow:inset 0 1px 0 #ffffff06; transition:color .2s,border-color .2s,background .2s,transform .2s; }
 .footer-socials svg { width:16px; height:16px; fill:currentColor; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
 .footer-socials rect,.footer-socials circle,.footer-socials path.social-play { fill:none; }
 .footer-socials .social-dot { fill:currentColor; stroke:none; }
 .footer-admin { position:absolute; right:clamp(0rem,1.2vw,1rem); top:50%; transform:translateY(-50%); min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.55rem .85rem; border:1px solid #ffffff1e; border-radius:999px; background:linear-gradient(145deg,#ffffff09,#0008); color:#9ba6af; box-shadow:inset 0 1px 0 #ffffff08,0 10px 30px #0006; backdrop-filter:blur(14px); font-size:.625rem; font-weight:700; letter-spacing:.1em; transition:color .2s,border-color .2s,background .2s; }
 .footer-admin svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
 @media(hover:hover) { .footer-admin:hover,.footer-socials a:hover { color:#ccefff; border-color:#88d5f55c; background:#88d5f50c; } .footer-socials a:hover { transform:translateY(-2px); } }
 @media(max-width:900px) { .contact-hub-grid { grid-template-columns:minmax(0,1fr); gap:2rem; } .contact-intro h2 { max-width:16ch; } .contact-email-card { width:100%; } }
 @media(max-width:520px) { .contact-hub { padding:1.4rem 1.15rem; } .contact-intro h2 { margin-bottom:1rem; font-size:clamp(1.8rem,9vw,2.6rem); } .contact-lede { line-height:1.75; } .contact-email-card { min-height:68px; margin-top:1.25rem; padding:.9rem; } .contact-form-panel { padding:1.15rem; border-radius:14px; } .contact-hub #contact-form .button { width:100%; } .page-footer { min-height:0; padding:2rem 1rem max(2rem,env(safe-area-inset-bottom)); gap:1rem; } .footer-socials { margin-top:0; } .footer-socials a { width:36px; height:36px; } .footer-admin { position:static; transform:none; min-height:38px; } }
 .modal-open { overflow:hidden; }
 #media-dialog { width:min(1100px,calc(100% - 3rem)); max-height:calc(100dvh - 3rem); padding:0; border:1px solid #ffffff25; border-radius:20px; background:#090909f7; box-shadow:0 36px 120px #000c,inset 0 1px 0 #ffffff09; }
 #media-dialog::backdrop { background:#000c; backdrop-filter:blur(14px); }
 .dialog-top { padding:1.25rem 1.5rem; gap:1rem; align-items:flex-start; border-bottom:1px solid #ffffff0c; }
 .dialog-top>div { min-width:0; } .dialog-top .eyebrow { font-size:.625rem; margin-bottom:.5rem; }
 .dialog-top h2 { font-size:clamp(1rem,.85rem + .45vw,1.4rem); line-height:1.4; letter-spacing:-.015em; }
 .close-button { flex:none; width:44px; height:44px; border:1px solid #ffffff16; background:#ffffff06; font-size:1.5rem; line-height:1; }
 #dialog-media { background:#000; min-height:120px; }
 #dialog-media iframe { width:100%; aspect-ratio:16/9; display:block; }
 #dialog-media img { display:block; width:100%; max-height:65dvh; object-fit:contain; }
 .dialog-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.5rem; border-top:1px solid #ffffff0c; }
 #dialog-position { color:#8f8f8f; font-size:.6875rem; letter-spacing:.12em; font-variant-numeric:tabular-nums; white-space:nowrap; }
 .dialog-actions { display:flex; gap:.6rem; align-items:center; } .dialog-actions button { width:44px; height:44px; border:1px solid #ffffff19; border-radius:50%; background:#ffffff04; color:#ddd; }
 .dialog-actions a { color:var(--blue); font-size:.6875rem; margin-right:.6rem; }
 #dialog-description { padding:0 1.5rem 1.5rem; font-size:.8125rem; line-height:1.85; }
 @media(max-width:1050px) { .language-switch button { min-width:clamp(4rem,8.2vw,4.7rem); padding:.6rem clamp(.4rem,1.25vw,.7rem); } }
 @media(max-width:760px) { .main-nav a { height:62px; } .contact-form-section { grid-template-columns:minmax(0,1fr); } .logo-evolution { align-items:start; } .evolution-arrow { align-self:center; } }
 @media(max-width:520px) { .language-switch { padding:3px; } .language-switch button { min-width:clamp(3.45rem,17.5vw,4.2rem); min-height:36px; gap:.18rem; padding:.5rem clamp(.25rem,1vw,.42rem); font-size:clamp(.5625rem,.52rem + .15vw,.625rem); } .language-flag { width:16px; height:11px; } .lang-long { display:inline; } .lang-short { display:none; } .main-nav svg { width:21px; height:21px; } .main-nav .nav-label { font-size:.5625rem; letter-spacing:0; } .skills-grid { gap:1.25rem; } .skill-item>div { font-size:.6875rem; } .filter { min-height:40px; padding:.5rem .75rem; font-size:.75rem; } .contact-form-section { margin-top:1.25rem; } #media-dialog { width:calc(100% - 1rem); max-height:calc(100dvh - 1rem); border-radius:14px; } .dialog-top { padding:1rem; } .dialog-toolbar { padding:.75rem 1rem; gap:.5rem; } .dialog-actions { gap:.35rem; } .dialog-actions a { font-size:.625rem; margin-right:0; } #dialog-description { padding:0 1rem 1rem; } .logo-description { font-size:.6875rem; } }
 @media(max-height:500px) and (orientation:landscape) { #dialog-media img { max-height:55dvh; } #dialog-media iframe { max-height:65dvh; } }
@media(max-width:520px) { .site-header { column-gap:.5rem; } .site-header .wordmark { flex:1 1 0; min-width:0; } }

/* Navigation polish: slightly clearer glass and filled active icons. */
.site-header { background:linear-gradient(180deg,#000000b8,#00000098); }
.main-nav .nav-icon-outline { display:block; }
.main-nav .nav-icon-shape,.main-nav .nav-icon-detail { fill:none; stroke:currentColor; }
.main-nav a[aria-current] .nav-icon-shape { fill:currentColor; stroke:currentColor; }
.main-nav a[aria-current] .nav-icon-detail { fill:#050607; stroke:#050607; }
.main-nav a[aria-current] .nav-icon-line { fill:none; stroke:#050607; stroke-width:1.8; stroke-linecap:round; }

/* More lively bokeh motion with a soft, low-contrast light pulse. */
.bokeh-scene i {
 --bokeh-move-time:14s;
 --bokeh-pulse-time:6.8s;
 animation:bokeh-drift-lively var(--bokeh-move-time) cubic-bezier(.45,.05,.55,.95) infinite alternate,
           bokeh-soft-pulse var(--bokeh-pulse-time) ease-in-out infinite;
}
.bokeh-scene i:nth-child(2n) { --bokeh-move-time:15.5s; --bokeh-pulse-time:7.6s; }
.bokeh-scene i:nth-child(3n) { --bokeh-move-time:12.8s; --bokeh-pulse-time:6.2s; }
@keyframes bokeh-drift-lively {
 0% { transform:translate3d(0,0,0) scale(.92); }
 100% { transform:translate3d(var(--dx),var(--dy),0) scale(1.12); }
}
@keyframes bokeh-soft-pulse {
 0%,100% { opacity:.62; }
 42% { opacity:.9; }
 68% { opacity:.74; }
 84% { opacity:.96; }
}
@media(prefers-reduced-motion:reduce) { .bokeh-scene i { animation:none; } }
 @media(prefers-reduced-motion:reduce) { .language-switch button { transition:none; } }
}

 @media(prefers-reduced-motion:reduce) { .language-switch button { transition:none; } }
}