@charset "UTF-8";

:root{color-scheme:dark;--ink:#151715;--paper:#f1f2ee;--muted:#b6b9b1;--line:#ffffff30;--accent:#f09b6c;--gutter:clamp(24px,5vw,88px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body,a,button{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:7px}
.skip-link{position:absolute;top:12px;left:20px;z-index:10;padding:16px;background:var(--paper);color:var(--ink);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.eyebrow{font-size:.8125rem;font-weight:400;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}
.hero{position:relative;background:var(--ink)}
.hero-stage{position:relative;isolation:isolate;min-height:440px;height:90svh;max-height:900px;display:flex;flex-direction:column;background:#182321}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% top;z-index:-2}
.hero-stage:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,12,10,.28),transparent 28%,transparent 65%,rgba(5,12,10,.55))}
.header{position:absolute;inset:0 0 auto;z-index:2;background:transparent;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px var(--gutter)}
.brand{margin:0;line-height:1;flex-shrink:0}.brand img{width:140px;height:auto}
.navigation{display:flex;gap:32px;align-items:center;margin-left:auto}
.navigation a,.languages a{font-size:.875rem;padding:10px 0}
.navigation a{position:relative}
.navigation a:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.navigation a:hover:after{transform:scaleX(1)}
.languages{display:flex;gap:12px;margin-left:32px}
.languages a{color:#c3c9c4}
.languages a[aria-current]{color:white;text-decoration:underline;text-underline-offset:6px}
.arrow{font-size:1.25rem;line-height:1;transition:transform .2s}
/* Shared columns keep photography, text and contact aligned. */
.content-width{width:calc(100% - var(--gutter)*2);max-width:1680px;margin-inline:auto}
.section{padding-block:clamp(56px,5vw,88px)}
.section-heading{border-top:1px solid var(--line);padding-top:20px;margin-bottom:32px}
main h2{font-size:clamp(1.75rem,2.5vw,2.25rem);font-weight:400;line-height:1.2;letter-spacing:-.04em;margin:0}
.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,88px)}
.music{background:var(--ink)}
.music-grid,.bio-grid{align-items:center}
.photo-frame{position:relative;height:420px;margin:0;overflow:hidden}
.photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tapes{object-position:center}
.spotify-embed{display:block;width:100%;height:420px;border:0;border-radius:12px;background:#202220}
.bio{background:var(--paper);color:var(--ink);color-scheme:light;--line:#15171535}
.portrait img{object-position:73% center}
.bio-copy{max-width:70ch}
.bio-copy p{font-size:1.125rem;line-height:1.8;letter-spacing:-.01em;margin:0 0 24px}
.bio-copy p:last-child{margin-bottom:0}
.contact{padding-bottom:48px}
.contact .section-heading{margin-bottom:30px}
.email-link{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:clamp(1.5rem,3vw,2.625rem);line-height:1.3;letter-spacing:-.04em;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:34px;transition:color .2s}
.email-link:hover{color:var(--paper)}
.email-link .arrow{font-size:clamp(1.75rem,3vw,2.625rem)}
.footer{padding-bottom:32px}
.footer-content{display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer p{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:0}
.socials{display:flex;flex-wrap:wrap;gap:28px}
.socials a{font-size:.875rem;line-height:1.5;padding:10px 0}
.socials a:hover{text-decoration:underline;text-underline-offset:6px}
@media(max-width:1300px){.bio-copy p{font-size:1.0625rem;line-height:1.75}}
@media(max-width:1100px){
 .split-grid{grid-template-columns:1fr;gap:32px}
 .photo-frame{height:auto;aspect-ratio:1.9}
 .bio-copy{max-width:none}
 .spotify-embed{height:352px}
}
@media(max-width:900px){.hero-stage{max-height:800px}}
@media(max-width:600px){
 :root{--gutter:24px}
 .header{padding-top:20px;gap:16px;flex-wrap:wrap}
 .brand img{width:118px}
 .languages{margin-left:auto;gap:14px}
 .navigation{order:3;flex-basis:100%;justify-content:space-between;border-top:1px solid #ffffff35;padding-top:8px;gap:16px}
 .hero-stage{height:72svh;min-height:420px;max-height:680px}
 .hero-photo{object-position:31% top}
 .hero-stage:after{background:linear-gradient(0deg,rgba(5,12,10,.35),transparent 30%,transparent 60%,rgba(5,12,10,.65))}
 .section{padding-block:48px}
 .section-heading{padding-top:18px;margin-bottom:28px}
 .split-grid{gap:28px}
 .photo-frame{aspect-ratio:1.35}
 .bio-copy p{font-size:1rem;line-height:1.75}
 .contact{padding-bottom:24px}
 .email-link{gap:16px;padding-bottom:28px}
 .footer-content{align-items:flex-start;flex-direction:column-reverse;gap:24px}
 .socials{gap:24px}
 .footer{padding-bottom:28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}