.icon-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.ui-icon{display:inline-block;width:18px;height:18px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.social-links .ui-icon{width:20px;height:20px}.copy-symbol{display:flex}.brand-logo{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:5px 8px;width:128px;height:40px;flex:none}.brand-logo img{width:100%;height:100%;object-fit:contain}.brand-lake,.brand-v2{width:32px;height:32px;padding:0;background:transparent}.project-label{margin-left:auto;color:var(--muted);font-size:10px;letter-spacing:.07em;font-weight:400}.card-top{min-height:40px;margin-top:2px;margin-bottom:12px}.project-card{cursor:default}.project-card:focus-within{border-color:var(--muted)}.cover-viewport{display:block;position:relative;background:var(--soft)}.actual-cover{display:block;background:#eef0f5;aspect-ratio:16/9}.actual-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:none}.actual-sky img,.actual-laser img{object-fit:contain}.actual-sky{background:#d9e0ed}.actual-laser{background:#eef0f7}.actual-lake img,.actual-v2 img{object-fit:cover;object-position:center top}.cover-action{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #ffffff75;border-radius:50px;background:#ffffffdf;color:#171717;font-size:12px;backdrop-filter:blur(12px);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease)}.cover-viewport:hover .cover-action,.cover-viewport:focus-visible .cover-action{opacity:1;transform:none}.card-links{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.card-links a{display:inline-flex;gap:7px;align-items:center;font-size:12px;min-height:28px}.project-detail{color:var(--muted)}.card-links .ui-icon{width:16px;height:16px;transition:transform .3s var(--ease)}.card-links a:hover .ui-icon{transform:translate(2px,-2px)}.card-body h2 a{display:block}.case-header,.case-content{max-width:1100px;margin:auto;padding-inline:40px}.case-header{padding-top:160px;padding-bottom:48px}.back-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:56px}.case-brand{display:flex;align-items:center;gap:20px;margin-bottom:28px}.case-brand>span:last-child{font-size:12px;color:var(--muted)}.case-header h1{font-size:clamp(34px,4.5vw,58px);line-height:1.18;letter-spacing:-.045em;max-width:900px;font-weight:500;margin:0 0 26px}.case-header>p{max-width:760px;font-size:20px;line-height:1.65;color:var(--muted);margin:0 0 28px}.case-actions{display:flex;flex-wrap:wrap;gap:10px}.case-hero{margin:0}.case-hero .cover{height:auto;border-radius:24px!important;aspect-ratio:16/9}.case-hero .cover img{object-fit:contain}.case-hero figcaption{font-size:11px;color:var(--muted);margin-top:14px}.case-summary{padding:64px 0}.case-summary h2,.showcase-heading h2{font-size:28px;letter-spacing:-.035em;font-weight:500;margin:0 0 22px}.case-summary>p{font-size:18px;line-height:1.8;color:var(--muted);max-width:780px;margin:0 0 36px}.case-summary .metrics{padding:26px 0;gap:32px}.case-summary .metrics strong{font-size:32px;letter-spacing:-.04em}.case-summary .metrics span{font-size:13px;line-height:1.6;margin-top:10px}.showcase-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px}.showcase-heading>span{font-size:12px;color:var(--muted)}.site-capture{display:block;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:box-shadow .4s}.site-capture:hover{box-shadow:0 12px 36px #0002}.site-capture img{display:block;width:100%;height:auto}.case-end{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:24px}.case-end>p{font-size:12px;line-height:1.8;color:var(--muted);max-width:680px}.case-end .button{flex:none}
@media(max-width:639px){.brand-logo{width:116px;height:36px}.brand-lake,.brand-v2{width:30px;height:30px}.project-label{font-size:9px}.case-header,.case-content{padding-inline:24px}.case-header{padding-top:144px;padding-bottom:32px}.back-link{margin-bottom:36px}.case-brand{align-items:flex-start;gap:16px}.case-brand>span:last-child{font-size:10px;line-height:1.6}.case-header h1{font-size:34px;line-height:1.25}.case-header>p{font-size:17px}.case-actions .button{font-size:12px;padding:9px 12px;gap:6px}.case-summary{padding:40px 0}.case-summary>p{font-size:16px}.case-summary .metrics{gap:16px;flex-wrap:wrap}.case-summary .metrics>div{min-width:85px}.case-summary .metrics strong{font-size:25px}.case-summary .metrics span{font-size:11px}.showcase-heading{display:block}.showcase-heading h2{margin-bottom:8px}.showcase-heading>span{display:block;margin-bottom:20px}.case-end{display:block}.case-end .button{margin-top:12px}.case-hero .cover{border-radius:16px!important}.cover-action{font-size:11px;padding:8px 12px}}
@media(hover:none){.cover-action{opacity:1;transform:none;background:#fffffff2}}
@media(prefers-reduced-motion:reduce){.cover-action,.card-links .ui-icon{transition:none}}

.project-card[data-card] .cover-viewport{aspect-ratio:16/9}.project-card .actual-cover img{object-fit:cover;object-position:center top}.case-header h1{text-wrap:balance}.case-hero .actual-sky{aspect-ratio:2500/1071}.case-hero .actual-laser{aspect-ratio:3000/1600}

/* Fixed dark presentation with the illustrated portrait in its original colors. */
.home-portrait,.about-portrait{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.home-portrait img,.about-portrait img{object-fit:contain;object-position:center bottom;background:transparent;filter:none;padding:12px 14px 0}.home-portrait:hover img{filter:none}.about-portrait img{padding-top:14px}

/* Two commercial case studies, followed by one smaller personal experiment. */
.work-section>.project-grid{display:grid;columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.work-section>.project-grid>.card-reveal{margin-bottom:0}
.personal-projects{margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
.personal-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:24px}
.personal-heading h2{font-size:22px;font-weight:500;margin:0;letter-spacing:-.025em}
.personal-heading p{font-size:14px;color:var(--muted);margin:0}
.personal-projects .project-grid{columns:1}
.personal-projects .project-card{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.personal-projects .card-top{grid-column:1/-1}
.personal-projects .card-body{display:flex;flex-direction:column;justify-content:center;padding:8px 12px 8px 0}
.personal-projects .card-links{margin-top:18px}
.project-evidence{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:24px}
.project-evidence>span{font-size:12px;color:var(--muted)}
.project-evidence a{display:inline-flex;align-items:center;gap:7px;font-size:13px;min-height:32px}
.project-evidence a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:639px){.personal-projects{margin-top:32px}.personal-heading{display:block}.personal-heading p{margin-top:10px}.personal-projects .project-card{display:block}.personal-projects .card-body{padding:16px 4px 7px}.project-evidence{align-items:flex-start;flex-direction:column;gap:8px}}
@media(max-width:767px){.work-section>.project-grid{grid-template-columns:minmax(0,1fr)}}

/* A transparent, playful portrait: the outer entrance and inner gesture stay independent. */
.portrait-play{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:var(--text);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.portrait-play:focus-visible{outline:2px dashed #e4c773;outline-offset:10px}
.portrait-tilt,.portrait-float{display:block;width:100%;height:100%;transform-origin:50% 82%}
.portrait-tilt{transform:translateX(var(--portrait-x,0px)) rotate(var(--portrait-turn,0deg));transition:transform .4s var(--ease)}
.portrait-float{animation:portrait-breathe 5s ease-in-out infinite}
.home-portrait .portrait-play img,.about-portrait .portrait-play img{width:100%;height:100%;object-fit:contain;transform:none;border-radius:0;padding:0;pointer-events:none}
.portrait-bubble{position:absolute;left:50%;top:0;transform:translate(-50%,8px) rotate(-4deg);width:max-content;max-width:95%;padding:12px 18px;border-radius:18px 18px 18px 3px;background:#f4e7b9;color:#302915;font-size:14px;opacity:0;transition:opacity .25s,transform .4s var(--ease);pointer-events:none}
.portrait-play.is-greeting .portrait-bubble{opacity:1;transform:translate(-50%,-8px) rotate(-4deg)}
@keyframes portrait-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
.growth-cover{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#191919;padding:16px;aspect-ratio:16/9;overflow:hidden}
.growth-shot{min-width:0;overflow:hidden;transform:rotate(-3deg);border-radius:7px;background:white;box-shadow:0 10px 30px #0006}.growth-shot:nth-child(2){transform:translateY(20px) rotate(4deg)}
.growth-shot>span{display:block;padding:8px 10px;background:#242424;color:#ddd;font-size:8px;letter-spacing:.08em;white-space:nowrap}.growth-shot img{display:block;width:100%;height:auto!important;object-fit:cover!important;object-position:top!important}
.growth-shot:nth-child(2) img{width:175%;max-width:none;margin-left:-37.5%}
.growth-gallery{padding-top:8px}.growth-gallery .showcase-heading{margin-bottom:24px}.growth-gallery .showcase-heading h2{margin-bottom:0}
.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.evidence-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0d0d0d;transition:transform .3s var(--ease),border-color .3s}
.evidence-card:hover{transform:translateY(-4px);border-color:#555}.evidence-card:focus-visible{outline:2px solid #e4c773;outline-offset:5px}
.evidence-image{height:290px;overflow:hidden;background:#fff}.evidence-image img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.evidence-social .evidence-image img{object-fit:contain}.evidence-line .evidence-image img{object-fit:cover;object-position:center;width:150%;max-width:none;margin-left:-25%}
.evidence-copy{padding:22px}.evidence-copy>span{font-size:10px;letter-spacing:.08em;color:var(--muted)}.evidence-copy h3{display:flex;align-items:center;justify-content:space-between;font-size:20px;font-weight:500;margin:12px 0 10px}.evidence-copy p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}.evidence-note{font-size:11px;color:var(--muted);line-height:1.6;margin-top:20px}
@media(max-width:639px){.evidence-grid{grid-template-columns:1fr;gap:20px}.evidence-image{height:260px}.evidence-copy{padding:18px}.evidence-copy h3{font-size:18px}.portrait-bubble{font-size:12px}.growth-cover{padding:12px;gap:8px}}
@media(prefers-reduced-motion:reduce){.portrait-float{animation:none}.portrait-tilt{transform:none;transition:none}.portrait-bubble{transition:none}.evidence-card{transition:none}.evidence-card:hover{transform:none}}

/* About: concrete capabilities supported by a compact career history. */
.about-hero{padding-top:240px;padding-bottom:72px}.about-hero h1{line-height:1.18}.about-intro{align-items:center}.about-intro h2{font-weight:500}.about-intro p{max-width:620px}.capability-section{margin-top:64px}.capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}.capability{padding:28px 0 32px;border-top:1px solid var(--line)}.capability-number{font-size:12px;color:#888;letter-spacing:.08em}.capability h3{font-size:23px;font-weight:500;line-height:1.35;letter-spacing:-.025em;margin:16px 0}.capability p{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 20px}.capability-proof{display:block;color:#888;font-size:11px;line-height:1.7}.experience-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;margin-top:12px;color:var(--text)}.experience-link:hover{text-decoration:underline;text-underline-offset:5px}.experience h3{line-height:1.5}.experience article>div{min-width:0}
@media(max-width:639px){.about-hero{padding-top:176px;padding-bottom:48px}.about-hero h1{font-size:38px}.capability-section{margin-top:40px}.capability-grid{grid-template-columns:1fr}.capability{padding:24px 0}.capability h3{font-size:21px;margin:12px 0}.capability p{font-size:15px}.about-intro h2{font-size:26px}.experience h3{font-size:18px}}

/* Quiet monochrome identity, legible on the dark site and browser tabs. */
.header .brand{display:inline-flex;align-items:center;gap:9px;position:absolute;top:28px;left:35px;z-index:4;color:#f2f0e9;font-size:15px;font-weight:500;letter-spacing:-.035em;line-height:32px}
.header .brand img{width:32px;height:32px;display:block}
@media(max-width:639px){.header .brand{top:82px;left:24px;font-size:12px;line-height:24px;gap:7px}.header .brand img{width:24px;height:24px}}

/* Keep intrinsic image sizes out of grid track sizing (including WebKit).
   The outer cover reserves the space; its contents only fill that space. */
.project-grid,.card-reveal,.project-card,.card-body,.personal-projects,
.evidence-grid,.evidence-card,.case-content { min-width:0; }
.card-reveal,.project-card,.cover-viewport { max-width:100%; }
.project-card .cover-viewport { width:100%; }
.project-card .cover-viewport>.cover { position:absolute; inset:0; width:100%; height:100%; min-width:0; min-height:0; aspect-ratio:auto; }
.actual-cover { position:relative; min-width:0; min-height:0; }
.actual-cover>img { position:absolute; inset:0; min-width:0; min-height:0; max-width:100%; }
.growth-cover { grid-template-columns:repeat(2,minmax(0,1fr)); }
.evidence-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.evidence-image { position:relative; min-width:0; }
.evidence-image>img { position:absolute; inset:0; min-width:0; min-height:0; }
.project-card[data-card=sky] .cover-viewport { aspect-ratio:16/9; }
.project-card[data-card=sky] .actual-cover img { object-fit:contain; }
.project-card[data-card=sky]:hover .cover { transform:none; }
/* Evidence keeps the original screenshot proportions instead of filling a crop. */
.evidence-grid { align-items:start; }
.evidence-grid .evidence-image { height:auto; aspect-ratio:var(--evidence-ratio); }
.evidence-grid .evidence-image img { width:100%; max-width:100%; height:100%; margin:0; object-fit:contain; object-position:center; }
@media(max-width:767px){
  .work-section>.project-grid { width:100%; grid-template-columns:minmax(0,1fr); }
  .project-grid>.card-reveal { display:block; min-width:0; }
  .evidence-grid { grid-template-columns:minmax(0,1fr); }
}