@font-face{font-family:'Sorts Mill Goudy';src:url('assets/SortsMillGoudy-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
:root{--paper:#fffcfc;--ink:#222;--muted:#9592a5;--serif:'Sorts Mill Goudy',Georgia,serif;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif;--page:1230px;--gutter:clamp(24px,7.3vw,105px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid #ff0080;outline-offset:7px}p,h1,h2,h3,blockquote,figure{margin:0}h1,h2,h3{font-weight:400}img{display:block;max-width:100%}.skip{position:fixed;top:12px;left:24px;z-index:20;padding:12px;background:var(--ink);color:white;transform:translateY(-200%)}.skip:focus{transform:none}.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:30px;font-size:24px;line-height:1.2;background:transparent}.topbar a{transition:color .18s}.topbar a:hover{color:#ff0080}.page{width:calc(100% - var(--gutter)*2);max-width:var(--page);margin:72px auto}.hero{display:flex;flex-direction:column;align-items:flex-start;gap:64px}.hero h1{font:italic 400 clamp(44px,5vw,72px)/1.2 var(--serif);max-width:1232px}.status{display:inline-flex;align-items:center;gap:16px;border:2px solid #00f441;border-radius:24px;background:#daf8e1;padding:14px 22px;font-size:16px;line-height:19px;white-space:nowrap}.status-light{width:18px;height:18px;position:relative;flex:none}.status-light img{position:absolute;max-width:none;width:53px;height:53px;left:-17.5px;top:-15.5px}.status:hover{background:#c4f5cf}.divider{width:100%;height:1px;margin:72px 0}.divider img{width:100%;height:1px}.work{display:grid;grid-template-columns:1fr 709px;align-items:start;gap:24px}.section-title{font:italic 400 32px/1.4 var(--serif)}.project-list{display:flex;flex-direction:column;align-items:flex-start;gap:48px;list-style:none;margin:0;padding:0}.project{position:relative;display:flex;gap:10px;align-items:center;width:fit-content;min-height:77px;isolation:isolate}.project-name{font-size:64px;line-height:1.2;letter-spacing:1.92px}.project-category{font-size:18px;font-weight:700;line-height:1.38;white-space:nowrap}.project-preview{position:absolute;pointer-events:none;opacity:0;transform:translateY(8px) scale(.985);transform-origin:center;transition:opacity .28s ease,transform .38s cubic-bezier(.22,.61,.36,1);z-index:2;object-fit:cover}.project-nayax .project-preview{width:226px;height:226px;left:182px;top:-210px;border-radius:8px}.project-tailormed .project-preview{width:280px;height:175px;left:294px;top:-160px}.project-nestle .project-preview{width:226px;height:170px;left:180px;top:-158px}.project-reshet .project-preview{width:238px;height:145px;left:275px;top:-126px}.project:is(:hover,:focus-visible) .project-preview{opacity:1;transform:translateY(0) scale(1)}.project-misc:hover{color:#ff0080}.coming-soon{opacity:0;font:italic 18px/1.15 var(--serif);white-space:nowrap}.project-misc:is(:hover,:focus-visible) .coming-soon{opacity:1}.personal{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}.personal .section-title{padding:8px}.personal-art{display:block;width:440px;max-width:50%;aspect-ratio:1}.personal-art img{width:100%;height:auto}.personal a:hover{color:#ff0080}.testimonials{margin-top:72px}.quote-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:40px max(var(--gutter),calc((100vw - var(--page))/2));scroll-padding-left:max(var(--gutter),calc((100vw - var(--page))/2));overscroll-behavior-x:contain}.quote-track::-webkit-scrollbar{display:none}.quote-card{background:#fffafa;border:1px solid #000;border-radius:23px;width:448px;min-width:448px;min-height:360px;padding:32px;display:flex;flex-direction:column;gap:24px;scroll-snap-align:start}.quote-card blockquote{font:italic 32px/1.4 var(--serif);flex:1;min-height:168px}.quote-divider{width:100%;height:1px}.quote-person{display:flex;align-items:center;gap:12px;min-height:80px;font-size:18px;line-height:1.38}.quote-person>img{width:80px;height:80px;object-fit:cover;border-radius:50%;flex:none}.quote-person cite{font-style:normal;display:block}.quote-role{display:block;color:var(--muted);margin-top:2px}.carousel-controls{display:flex;justify-content:center;gap:9px;padding:0 24px}.carousel-controls button{width:28px;height:28px;display:grid;place-items:center;border:0;background:none;cursor:pointer;padding:0}.carousel-controls button::before{content:'';width:6px;height:6px;background:#d2cace;border-radius:50%;transition:background .2s,transform .2s}.carousel-controls button[aria-current=true]::before{background:var(--ink);transform:scale(1.4)}.contact{font:italic 72px/1.2 var(--serif);margin:72px auto;max-width:var(--page);width:calc(100% - var(--gutter)*2)}.contact a:hover{color:#ff0080}.footer{background:#2a2a2a;color:white;padding:24px;display:flex;justify-content:space-between;align-items:center;gap:24px}.footer-email{font:italic 32px/1.2 var(--serif)}.footer-linkedin{display:flex;align-items:center;gap:8px;font-size:22px;line-height:1.38}.outward{width:32px;height:32px;display:grid;place-items:center}.outward img{width:18px;height:18px}.footer a:hover{color:#f0b6ce}.about-page{background:white}.about-page .topbar{background:transparent}.about-intro{display:grid;grid-template-columns:minmax(0,976px) minmax(180px,240px);gap:16px;align-items:stretch}.about-intro h1{font-size:40px;line-height:1.32}.portrait{width:100%;height:100%;min-height:265px;object-fit:cover;object-position:bottom;border:1px solid #000;border-radius:16px}.about-columns{display:grid;grid-template-columns:minmax(0,712px) minmax(0,400px);gap:120px;margin-top:86px;padding-bottom:40px}.about-columns h2{font:italic 26px/1.4 var(--serif);margin-bottom:16px}.about-columns p{font-size:22px;line-height:1.38}.career{display:flex;flex-direction:column;gap:22px}.career-item h3{font-size:22px;line-height:1.38;font-weight:500}.career-item p{color:var(--muted);margin-top:8px}.about-section+.about-section{border-top:1px solid #888;margin-top:30px;padding-top:30px}.education-item+.education-item{margin-top:16px}.muted{color:var(--muted)}.about-contact{display:flex;flex-wrap:wrap;gap:8px 16px}.about-contact a:hover{text-decoration:underline}.resume{display:inline-block;margin-top:20px;font-size:18px;border-bottom:1px solid currentColor;padding-bottom:4px}.page-home{margin-bottom:0}
@media(min-width:1600px){.hero h1{font-size:72px}}
@media(max-width:1200px){.work{grid-template-columns:35% minmax(0,1fr)}.project-name{font-size:clamp(40px,5vw,64px)}.project-category{font-size:14px}.project-list{gap:36px}.project{min-height:66px}.about-intro h1{font-size:32px}.about-columns{gap:64px}.about-columns p,.career-item h3{font-size:20px}}
@media(max-width:760px){:root{--gutter:24px}.topbar{padding:20px 24px;font-size:18px;min-height:64px}.page{margin-top:48px;margin-bottom:48px}.hero{gap:32px}.hero h1{font-size:clamp(36px,6.7vw,50px);line-height:1.18}.hero-break{display:none}.status{font-size:14px;padding:12px 18px;gap:13px}.divider{margin:48px 0}.work{grid-template-columns:1fr;gap:28px}.section-title{font-size:26px}.project-list{gap:22px;width:100%}.project{min-height:52px;gap:6px;max-width:100%;flex-wrap:wrap}.project-name{font-size:clamp(34px,8.7vw,54px);letter-spacing:.6px}.project-category{font-size:12px}.project-misc{row-gap:4px}.coming-soon{font-size:14px;opacity:1}.personal{flex-direction:column;gap:24px}.personal .section-title{padding:0}.personal-art{width:320px;max-width:100%;align-self:flex-end}.testimonials{margin-top:48px}.quote-track{padding-top:24px;padding-bottom:24px;gap:12px}.quote-card{width:min(340px,calc(100vw - 64px));min-width:min(340px,calc(100vw - 64px));min-height:340px;padding:24px;gap:20px;border-radius:20px}.quote-card blockquote{font-size:27px;min-height:168px}.quote-person{font-size:15px;gap:10px;min-height:56px}.quote-person>img{width:56px;height:56px}.contact{font-size:clamp(34px,8vw,52px);margin-top:48px;margin-bottom:48px}.footer{padding:24px;align-items:flex-start;gap:20px}.footer-email{font-size:23px}.footer-linkedin{font-size:13px;gap:4px;min-height:28px}.outward{width:20px;height:24px}.outward img{width:14px;height:14px}.about-intro{grid-template-columns:1fr;gap:28px}.about-intro h1{font-size:28px;line-height:1.35}.portrait{width:180px;height:200px;min-height:0;justify-self:end}.about-columns{grid-template-columns:1fr;gap:40px;margin-top:48px;padding-bottom:0}.about-columns p,.career-item h3{font-size:18px}.about-columns h2{font-size:26px}.career{gap:24px}.about-section+.about-section{margin-top:28px;padding-top:28px}.about-page .page{margin-bottom:56px}}
@media(max-width:370px){:root{--gutter:20px}.topbar{padding:18px 20px;font-size:16px}.hero h1{font-size:34px}.project-name{font-size:31px}.project-category{font-size:11px}.footer{flex-wrap:wrap}.footer-email{font-size:24px}}
@media(hover:none){.project-preview{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Floating previews keep their original geometry and only appear where there is room. */
.project-preview{max-width:none}
@media(max-width:1000px){.project-preview{display:none}}
@media(max-width:760px){.footer{flex-wrap:wrap}.footer-linkedin{min-height:32px}}

/* Figma Captions 18 is regular throughout the portfolio. */
.project-category,.caption-18{font-weight:400}
.project-nayax .project-preview{background:#f2f2f7}
.project-tailormed .project-preview{background:#afcdff}
.status{width:200px;min-height:51px;justify-content:center;padding:14px 16px;position:relative}
.status-idle{display:flex;align-items:center;gap:16px}
.status-hover,.status-pressed{display:none}
.status:is(:hover,:focus-visible){background:#00f441}
.status:is(:hover,:focus-visible) .status-idle{display:none}
.status:is(:hover,:focus-visible) .status-hover{display:block}
.status:is(:active,.is-pressed){background:#04e640}
.status:is(:active,.is-pressed) .status-idle,.status:is(:active,.is-pressed) .status-hover{display:none}
.status:is(:active,.is-pressed) .status-pressed{display:block}
.carousel-controls{gap:0;align-items:center;min-height:44px}
.carousel-controls button{width:28px;height:44px;transition:width .2s ease}
.carousel-controls button::before{width:8px;height:8px;border-radius:999px;background:#e4e5e2;transition:width .2s ease,background .2s ease}
.carousel-controls button[aria-current=true]{width:44px}
.carousel-controls button[aria-current=true]::before{width:24px;background:#1d2127;transform:none}
.personal-art{position:relative;background:white}
.metoog-video{display:block;width:100%;height:100%;object-fit:contain}
.video-toggle{position:absolute;right:12px;bottom:12px;background:#fffcfce8;border:1px solid #222;border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s}
.personal-art:is(:hover,:focus-within) .video-toggle{opacity:1;pointer-events:auto}


.quote-track{cursor:grab;touch-action:auto}
.quote-track.is-pointer-down{user-select:none;-webkit-user-select:none}
.quote-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.quote-track img{-webkit-user-drag:none;user-select:none}

/* About: natural portrait proportions and responsive intro spacing. */
.about-intro{gap:72px;align-items:start;grid-template-columns:minmax(0,1fr) minmax(180px,240px)}
.portrait{height:auto;min-height:0;object-fit:contain;border:0;border-radius:0;align-self:start}
.career-item summary{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;list-style:none;cursor:pointer}
.career-item summary::-webkit-details-marker{display:none}
.career-title{display:block;font-size:22px;line-height:1.38;font-weight:500}
.career-dates{display:block;margin-top:8px;color:var(--muted);font-size:22px;line-height:1.38}
.career-toggle{position:relative;width:24px;height:24px;flex:none}
.career-toggle::before,.career-toggle::after{content:'';position:absolute;left:6px;top:11px;width:12px;height:1px;background:currentColor}
.career-toggle::after{transform:rotate(90deg);transition:transform .15s ease-out}
.career-item[open] .career-toggle::after{transform:rotate(0)}
.career-item .career-description{margin-top:16px;color:#222;animation:career-reveal .15s ease-out}
@keyframes career-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:1200px){.about-intro{gap:48px}.career-title,.career-dates{font-size:20px}}
@media(max-width:760px){.about-intro{grid-template-columns:1fr;gap:48px}.portrait{height:auto;width:180px}.career-title,.career-dates{font-size:18px}}
@media(prefers-reduced-motion:reduce){.career-item .career-description{animation:none}.career-toggle::after{transition:none}}

.career-item p.career-description{color:#222}

/* Keep the reading order coherent when About stacks into one column. */
.about-columns{grid-template-areas:"career background" "secondary background";grid-template-rows:auto 1fr;row-gap:0}
.about-career{grid-area:career}
.about-background{grid-area:background}
.about-secondary{grid-area:secondary;border-top:1px solid #888;margin-top:30px;padding-top:30px}
@media(max-width:760px){.about-columns{grid-template-areas:"career" "background" "secondary";grid-template-rows:auto;gap:28px}.about-background,.about-secondary{border-top:1px solid #888;margin-top:0;padding-top:28px}}

.about-contact{align-items:baseline;flex-wrap:nowrap;gap:24px}
.about-contact a{white-space:nowrap}
.about-contact .resume{margin-top:0;flex:none}
@media(max-width:400px){.about-contact{gap:16px}.about-columns .about-contact,.about-contact .resume{font-size:16px}}

/* Miscellaneous: Figma artwork gallery. */
.misc-page{background:#fff}
.misc-main{padding-bottom:40px}
.misc-intro{text-align:center;margin-bottom:72px}
.misc-intro h1{font:italic 400 72px/1.2 var(--serif)}
.misc-intro p{font-size:22px;line-height:1.38;margin-top:16px}
.misc-gallery{position:relative;isolation:isolate;aspect-ratio:1440/1024;overflow:hidden;background:#fff7ee;touch-action:pan-y}
.misc-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s ease-out;pointer-events:none;user-select:none}
.misc-slide.is-active{opacity:1;z-index:1}
.misc-gallery button{position:absolute;top:0;bottom:0;width:50%;z-index:2;border:0;background:transparent;padding:0;cursor:pointer}
.misc-prev{left:0}
.misc-next{right:0}
.misc-gallery button:focus-visible{outline-offset:-8px}
.misc-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.misc-intro{margin-bottom:48px}.misc-intro h1{font-size:clamp(36px,8vw,56px)}.misc-intro p{font-size:18px}.misc-main{padding-bottom:0}}

/* Exact Figma cursor variants, centered on the pointer. */
.misc-cursor{display:none;position:fixed;left:0;top:0;width:96px;height:96px;transform:translate(-50%,-50%);pointer-events:none;z-index:100}
.misc-cursor-right{display:none}
.misc-cursor.is-forward .misc-cursor-left{display:none}
.misc-cursor.is-forward .misc-cursor-right{display:block}
@media(hover:hover) and (pointer:fine){.misc-gallery,.misc-gallery button{cursor:none}.misc-cursor.is-visible{display:block}}

.misc-cursor{padding:16px;background:transparent}

.misc-cursor-right{transform:rotate(180deg)}

/* Homepage opening: a staggered opacity reveal, with the original text flow. */
@keyframes intro-word-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
 .page-home #intro .intro-word{animation:intro-word-reveal 500ms ease-in both;animation-delay:calc(var(--word-index) * 180ms)}
}

/* Stable page ending and a translucent header after the opening section. */
html{overscroll-behavior-y:none;background:#2a2a2a}
body{min-height:100svh;display:flex;flex-direction:column;overscroll-behavior-y:none}
body>main{flex:1;min-width:0}
.footer{flex-shrink:0;margin-top:auto}
.topbar{flex-shrink:0;transition:background-color .22s ease,color .22s ease,backdrop-filter .22s ease}
body .topbar.is-glass{background:rgba(255,255,255,.52);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#222}
body .topbar.over-hero{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
a,button,summary{transition:color .18s ease,background-color .18s ease,border-color .18s ease,opacity .18s ease}

@view-transition{navigation:auto}
@keyframes page-dissolve-out{to{opacity:0}}
@keyframes page-dissolve-in{from{opacity:0}}
@media(prefers-reduced-motion:no-preference){::view-transition-old(root){animation:page-dissolve-out .18s ease-out both}::view-transition-new(root){animation:page-dissolve-in .2s ease-out both}}

/* Native vector arrows remain identical on desktop and mobile. */
.inline-arrow{display:inline-block;width:14px;height:14px;object-fit:contain;vertical-align:middle;filter:invert(1);flex:none}
.arrow-next{transform:rotate(45deg)}
.arrow-prev{transform:rotate(225deg)}
.year-arrow{width:11px;height:11px;filter:none}
.prototype-launch .inline-arrow,.footer .inline-arrow{filter:none}
.career-item.career-animated{overflow:hidden}
.career-item.career-animated .career-description{animation:none}
.career-item.career-animated:not(.is-expanded) .career-toggle::after{transform:rotate(90deg)}
.career-item.career-animated.is-expanded .career-toggle::after{transform:rotate(0)}
.career-item.career-animated .career-toggle::after{transition:transform .28s ease-out}
body.about-page .topbar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}