/* Experimental home: a sculptural image, kinetic lettering, a spatial project gallery. */
:root { --signal: #c9dfb1; --motion-ease: cubic-bezier(.2,.75,.15,1); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
[hidden] { display:none!important; }
.experimental-home { background:#070807; }
.hero--experimental { min-height:850px; height:100svh; max-height:1200px; display:block; overflow:hidden; background-position:65% center; background-size:cover; }
.hero--experimental::after { z-index:2; pointer-events:none; background:linear-gradient(0deg,#070807 0%,transparent 28%),linear-gradient(90deg,#0008,transparent 60%); }
.hero--experimental .hero__bar { z-index:5; padding:28px 4vw; }
.hero--experimental .hero__brand { font-size:36px; line-height:1; letter-spacing:-3px; }
.hero__brand>span { display:inline-block; vertical-align:top; font-size:10px; letter-spacing:0; margin:4px; }
.hero-tools { display:flex; align-items:center; gap:20px; }
.motion-toggle { font:12px var(--sans); color:#b9beb6; background:none; border:0; padding:10px 0; cursor:pointer; }
.motion-toggle:hover { color:white; }
.hero-title-window { position:absolute; z-index:0; top:15%; left:2.7%; width:94%; overflow:hidden; }
.hero-art { color:#e8eadf; font-family:var(--sans); font-weight:500; font-size:26.4vw; line-height:.84; letter-spacing:-.085em; transform-origin:left bottom; }
.hero-surface { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0; transition:opacity .6s; }
.hero-surface.is-ready { opacity:1; }
.hero--experimental .hero__body { position:absolute; z-index:3; bottom:15%; left:4vw; width:60%; padding:0; gap:18px; align-items:flex-start; animation:none; }
.hero--experimental .hero__role { font-size:12px; color:#c2c8bb; letter-spacing:.02em; }
.hero--experimental .hero__name { font-size:clamp(40px,5.2vw,80px); white-space:nowrap; letter-spacing:-.055em; line-height:1.12; font-weight:400; }
.hero--experimental .hero__tagline { font-size:17px; line-height:1.6; max-width:440px; color:#bfc4b9; margin:0 0 8px; }
.hero--experimental .hero__cta { align-items:center; gap:28px; }
.hero--experimental .btn--solid { display:flex; gap:36px; align-items:center; background:#e6ebdf; padding:15px 22px; }
.hero--experimental .btn--solid:hover { background:var(--signal); }
.hero-cv { display:flex; gap:20px; padding:14px 0; border-bottom:1px solid #62675d; color:#ddd; font-size:13px; }
.hero-coordinate { position:absolute; z-index:3; right:4vw; top:20%; color:#ddd; font:11px 'IBM Plex Mono',monospace; display:grid; gap:4px; text-align:right; }
.hero-coordinate i { width:36px; height:36px; border:1px solid #ffffff50; border-radius:50%; justify-self:end; margin-top:14px; position:relative; }
.hero-coordinate i::before,.hero-coordinate i::after { content:''; position:absolute; background:#ffffff80; }
.hero-coordinate i::before { width:1px; height:48px; top:-7px; left:17px; }
.hero-coordinate i::after { height:1px; width:48px; left:-7px; top:17px; }
.surface-toggle { position:absolute; z-index:4; right:4vw; bottom:18%; display:flex; align-items:center; gap:12px; color:#eff2e9; background:#080b08a8; backdrop-filter:blur(12px); border:1px solid #ffffff55; border-radius:50px; padding:10px 18px 10px 10px; font:12px var(--sans); cursor:pointer; }
.surface-toggle__icon { width:36px; height:36px; display:grid; place-items:center; border:1px solid #ffffff44; border-radius:50%; font-size:24px; transition:transform .5s; }
.surface-toggle[aria-pressed=true] { color:#d5f3ba; border-color:var(--signal); }
.surface-toggle[aria-pressed=true] .surface-toggle__icon { transform:rotate(90deg); }
.hero--experimental .hero__bottom { position:absolute; z-index:3; bottom:0; left:0; width:100%; padding:24px 4vw; font-size:11px; align-items:center; }
.availability { display:flex; align-items:center; gap:9px; }
.availability i { width:5px; height:5px; background:var(--signal); border-radius:50%; }
.scroll-cue { display:flex; align-items:center; gap:24px; color:#c5cbbd; }
.scroll-cue>span:last-child { font-size:22px; }
.experimental-home .evidence { display:none; }
.experimental-home .pillnav { left:50%; top:18px; backdrop-filter:blur(16px); border-color:#ffffff30; box-shadow:0 8px 40px #0005; }
.work-gallery { position:relative; background:#10120f; padding:80px 4vw; }
.gallery-stage { max-width:1600px; margin:auto; }
.gallery-header { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:60px; }
.gallery-header h2 { font:400 clamp(42px,5.8vw,88px)/1.02 var(--sans); letter-spacing:-.06em; }
.gallery-header p { font-size:14px; line-height:1.6; color:#aeb7a6; max-width:32ch; }
.gallery-space { perspective:1300px; }
.project-scene { display:grid; grid-template-columns:.8fr 1.4fr; gap:6vw; align-items:center; padding:50px 0; border-top:1px solid #ffffff24; }
.project-scene__info { max-width:370px; }
.project-kind { display:block; font:12px var(--sans); color:#9faa95; margin-bottom:20px; }
.project-scene h3 { font-size:clamp(38px,4.8vw,72px); font-weight:400; color:#f2f4ec; line-height:1; margin-bottom:24px; }
.project-scene__info p { font-size:16px; color:#b6beb0; line-height:1.7; }
.project-tech { display:block; font:11px 'IBM Plex Mono',monospace; color:#aeb6a9; margin:25px 0; }
.project-link { display:inline-flex; gap:38px; align-items:center; padding:12px 0; border-bottom:1px solid #8c9a80; color:#e0eed4; font-size:14px; }
.project-link>span:last-child { font-size:22px; transition:transform .3s; }
.project-link:hover>span:last-child { transform:translate(3px,-3px); }
.project-scene__visual { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1.47; padding:35px; background:#2d3429; border:1px solid #ffffff18; box-shadow:0 28px 75px #0007; transform:rotateY(-8deg) rotateZ(2deg); transition:transform .65s var(--motion-ease); }
.project-scene__visual:hover { transform:rotateY(0deg) rotateZ(0deg) scale(1.015); }
.project-scene__visual img { width:100%; height:auto; max-height:100%; object-fit:contain; box-shadow:0 15px 45px #0007; }
[data-project=kyber] .project-scene__visual { background:#252c31; }
[data-project=brava] .project-scene__visual { background:#302c37; }
.image-corner { position:absolute; right:13px; bottom:9px; color:#f0f3eb; font-size:22px; }
.gallery-footer { display:flex; justify-content:space-between; gap:25px; align-items:center; border-top:1px solid #ffffff25; padding-top:22px; margin-top:40px; font-size:12px; }
.gallery-index { display:none; gap:28px; }
.gallery-index button { border:0; border-bottom:1px solid transparent; background:none; color:#9da794; padding:8px 0; cursor:pointer; font:13px var(--sans); }
.gallery-index button[aria-pressed=true] { color:#edf3e6; border-color:#d5e7c3; }
.gallery-index button:focus-visible { outline:2px solid var(--signal); outline-offset:5px; }
.experimental-home #sobre { padding-top:130px; }
.experimental-home #sobre .head__title { max-width:800px; font-size:clamp(40px,6vw,82px); }
.experimental-home .about__grid { grid-template-columns:1fr 300px; }
.experimental-home .about__lede { font-size:24px; }
.experimental-home .portrait { transform:rotate(3deg); border:1px solid #ffffff33; padding:9px; }
.experimental-home .portrait img { filter:grayscale(1); }
.experimental-home .skills__item { transition:padding .3s,color .3s; }
.experimental-home .skills__item:hover { padding-left:12px; }
.experimental-home .experience { background:#11130f; }
.experimental-home .job { border-top:1px solid #ffffff20; }
.experimental-home .job__role { transition:color .3s; }
.experimental-home .job:hover .job__role { color:var(--signal); }
.testimonials { padding-top:30px; padding-bottom:100px; }
.testimonials .quotes { margin:0; }
.experimental-home .contact { position:relative; overflow:hidden; isolation:isolate; padding-bottom:150px; }
.experimental-home .contact::after { content:'PL'; position:absolute; z-index:-1; bottom:-.25em; right:-.025em; color:#171c14; font:500 42vw/.85 var(--sans); letter-spacing:-.09em; pointer-events:none; }
.experimental-home .contact .head__title { max-width:880px; font-size:clamp(52px,8vw,116px); letter-spacing:-.065em; }
.experimental-home .contact__cell { transition:padding .3s; }
.experimental-home .contact__cell:hover { padding-left:12px; }
.experimental-home .footer { max-width:none; padding-inline:4vw; background:#070807; }
@media(min-width:901px) and (min-height:650px) and (prefers-reduced-motion:no-preference) {
 html.motion-ready:not(.motion-off) .work-gallery { height:330vh; padding:0 4vw; }
 html.motion-ready:not(.motion-off) .gallery-stage { position:sticky; top:0; height:100vh; padding:70px 0 28px; display:grid; grid-template-rows:auto 1fr auto; overflow:clip; }
 html.motion-ready:not(.motion-off) .gallery-header { margin-bottom:16px; }
 html.motion-ready:not(.motion-off) .gallery-header h2 { font-size:clamp(42px,4.5vw,68px); }
 html.motion-ready:not(.motion-off) .gallery-space { position:relative; min-height:0; }
 html.motion-ready:not(.motion-off) .project-scene { position:absolute; inset:0; padding:0 2vw 0 0; border:0; will-change:transform,opacity; }
 html.motion-ready:not(.motion-off) .project-scene__visual { height:min(44vh,460px); aspect-ratio:auto; transform:none; }
 html.motion-ready:not(.motion-off) .gallery-index { display:flex; }
 html.motion-ready:not(.motion-off) .gallery-footer { margin:12px 0 0; }
}
@media(max-width:900px) {
 .hero--experimental { min-height:820px; }
 .hero-title-window { top:22%; }
 .hero--experimental .hero__body { width:75%; bottom:16%; }
 .hero--experimental .hero__name { font-size:7vw; }
 .hero--experimental .hero__tagline { max-width:340px; }
 .hero--experimental .surface-toggle { bottom:9%; }
 .hero-coordinate { top:17%; }
 .project-scene { gap:35px; grid-template-columns:.9fr 1.1fr; }
 .project-scene__visual { padding:16px; }
 .experimental-home .about__grid { grid-template-columns:1fr 230px; gap:35px; }
}
@media(max-width:600px) {
 .hero--experimental { height:100svh; min-height:850px; max-height:none; background-size:auto 100%; background-position:64% center; }
 .hero--experimental .hero__bar { padding:22px 22px; gap:24px; background:linear-gradient(#0009,transparent); }
 .hero--experimental .hero__links { order:3; width:100%; justify-content:space-between; }
 .hero-tools { gap:15px; }
 .motion-toggle { font-size:10px; }
 .hero-title-window { top:22%; left:2%; width:95%; }
 .hero-art { font-size:27vw; }
 .hero--experimental::after { background:linear-gradient(0deg,#070807 2%,#0009 39%,transparent 72%); }
 .hero--experimental .hero__body { width:calc(100% - 44px); left:22px; bottom:21%; gap:16px; }
 .hero--experimental .hero__role { font-size:10px; }
 .hero--experimental .hero__name { font-size:clamp(33px,8.3vw,50px); white-space:normal; }
 .hero--experimental .hero__tagline { font-size:15px; max-width:290px; }
 .hero--experimental .hero__cta { flex-direction:row; gap:20px; }
 .hero--experimental .btn--solid { gap:24px; padding:13px 18px; }
 .hero-coordinate { right:23px; top:16%; font-size:9px; }
 .hero-coordinate i { display:none; }
 .hero--experimental .surface-toggle { right:auto; left:22px; bottom:11%; padding:6px 13px 6px 6px; font-size:11px; }
 .surface-toggle__icon { width:28px; height:28px; font-size:20px; }
 .hero--experimental .hero__bottom { padding:22px; font-size:9px; }
 .hero__bottom .scroll-cue { gap:8px; }
 .hero__bottom>span:last-child { display:none; }
 .work-gallery { padding:65px 24px; }
 .gallery-header { display:block; margin-bottom:35px; }
 .gallery-header h2 { font-size:48px; }
 .gallery-header p { margin-top:22px; font-size:13px; }
 .project-scene { grid-template-columns:1fr; padding:35px 0 50px; gap:28px; }
 .project-scene__visual { grid-row:1; transform:rotate(-2deg); aspect-ratio:1.5; padding:22px; }
 [data-project=kyber] .project-scene__visual { transform:rotate(2deg); }
 .project-scene__info { max-width:none; }
 .project-scene h3 { font-size:46px; margin-bottom:18px; }
 .project-kind { margin-bottom:12px; }
 .project-scene__info p { font-size:15px; }
 .project-tech { margin:20px 0 12px; }
 .gallery-footer { margin-top:0; }
 .experimental-home #sobre { padding-top:75px; }
 .experimental-home .about__grid { grid-template-columns:1fr; }
 .experimental-home .about__lede { font-size:20px; }
 .experimental-home .about__side { grid-column:1; }
 .testimonials { padding-bottom:65px; }
 .experimental-home .contact { padding-bottom:90px; }
}
html.motion-off *,html.motion-off *::before,html.motion-off *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
html.motion-off .project-scene { transform:none!important; opacity:1!important; }
@media(prefers-reduced-motion:reduce) {
 .project-scene__visual,.experimental-home .portrait { transform:none; }
 .hero-art { transform:none!important; }
}
@media print { .hero-surface,.hero-title-window,.surface-toggle,.motion-toggle { display:none!important; } .hero--experimental { height:auto;min-height:0; } .hero--experimental .hero__body { position:static; padding:30px; } }

@media(max-width:600px) {
 .hero--experimental .hero-title-window { z-index:3; top:21%; left:4%; width:92%; pointer-events:none; }
 .hero--experimental .hero-art { color:transparent; -webkit-text-stroke:1px #eaf0dfb0; font-size:26vw; letter-spacing:-.085em; }
}

/* Shift the hero content right while retaining the original artwork. */
@media(min-width:651px){
 .hero--experimental .hero__bar{width:94%;transform:translateX(6vw)}
 .hero--experimental .hero__body{left:8.3vw;width:76vw}
}
@media(max-width:650px){
 .hero--experimental .hero__bar{width:calc(100% - 16px);transform:translateX(16px)}
 .hero--experimental .hero__body{left:12vw;width:84vw}
}