/* Layout review informed by unslop, Damir Sokolovsky (@heydamir), CC BY 4.0.
   https://github.com/heydamir/unslop
   Existing font families, liquid hero and original product imagery are retained. */
:root{--layout-line:#37423f26;--layout-muted:#606c64;--layout-ease:cubic-bezier(.22,1,.36,1);--g:clamp(24px,5.6vw,104px)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
html{scroll-padding-top:24px}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid #526c61;outline-offset:5px}
body[data-look]>header{max-width:1440px;left:50%;transform:translateX(-50%);width:calc(100% - 48px);box-shadow:none}
body[data-look]>header nav{font-size:13px;gap:28px}
body[data-look]>header .identity{font-size:10px}
body[data-look] header .motion-toggle{font-size:11px;min-height:36px}
.project-header{font-size:12px;letter-spacing:.02em;gap:16px;align-items:baseline;padding-bottom:24px;border-bottom:1px solid var(--layout-line);font-variant-numeric:tabular-nums}
.project-header>span:last-child{color:var(--layout-muted);text-align:right}
.opening{padding:104px var(--g);grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:32px 72px;align-items:end}
.opening>.label{font-size:12px;letter-spacing:.06em;padding:0}
.opening>p{font-size:clamp(44px,5.15vw,76px);line-height:1.25;letter-spacing:-.045em;margin:0}
.opening-note{font-size:15px;line-height:1.95;max-width:440px;color:var(--layout-muted)}
.project-index{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:16px}
.project-index a{display:flex;align-items:center;gap:16px;font-size:14px;min-height:56px;border-top:1px solid var(--layout-line);padding-top:16px;transition:color .18s}
.project-index a>span:first-child{font-size:11px;color:var(--layout-muted);font-variant-numeric:tabular-nums}
.project-index a>span:last-child{margin-left:auto;font-size:18px}
.project-index a:hover{color:#637c77}
.gallery-scroll{background:#e5e9e1}
.gallery-pin,.medical,.game-project,.practice,.contact{padding:48px var(--g) 80px}
.gallery-title,.medical-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;margin:56px 0 48px}
.gallery-title h2,.medical-heading h2,.practice h2,.game-story h2{font-size:clamp(48px,5.5vw,80px);line-height:1.17;letter-spacing:-.045em;font-weight:700}
.gallery-title h2 em{font-weight:700;letter-spacing:inherit}
.project-intro{max-width:480px;min-width:0;margin:0}
.project-intro>p:first-child,.medical-heading>div>p:first-child{font-size:18px;line-height:1.6;margin-bottom:16px}
.project-intro>p:nth-child(2),.medical-heading>div>p:nth-child(2){font-size:15px;line-height:1.9;color:var(--layout-muted);max-width:480px}
.medical-heading>div{min-width:0}
.pill{min-height:48px;padding:12px 20px;font-size:14px;gap:32px;border-radius:8px;margin-top:24px;transition:background .18s,color .18s,border-color .18s}
.pill span{font-size:20px}.pill:hover{transform:none}
.gallery-track{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;padding:0 0 24px;align-items:stretch}
.portfolio-deck{grid-column:auto;background:#d9e0d3;border:1px solid var(--layout-line);min-width:0;display:flex;flex-direction:column}
.deck-stage{height:496px;flex:1;min-height:440px;overflow:hidden}
.deck-item{top:80px;width:256px;margin-left:-128px;padding:8px 8px 0}
.deck-item figcaption{font-size:10px;padding:12px 2px}
.deck-controls{min-height:80px;flex-wrap:wrap;align-content:center;font-size:12px;gap:8px;padding:16px 24px;border-color:var(--layout-line)}
.deck-controls>span:last-child{font-size:11px;gap:16px}.deck-controls b{font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums}
.interface-showcase{grid-column:auto;margin:0;padding:24px;background:#dddce0;border:1px solid var(--layout-line);min-width:0}
.interface-heading{font-size:12px;margin-bottom:32px;gap:12px}
.interface-stage{aspect-ratio:16/11;margin:0 4px}
.interface-page{padding:6px;box-shadow:0 4px 12px #293b3414}
.interface-bottom{gap:16px;margin-top:24px;flex-wrap:wrap}
#interface-caption strong{font-size:18px;font-weight:600}
#interface-caption p{font-size:13px;line-height:1.7;margin-top:8px}
.interface-controls{gap:12px;font-size:12px;flex-wrap:wrap}
.interface-controls button,.interface-full-controls button{min-height:40px;font-size:12px;border-radius:6px;padding:8px 12px}
.interface-tabs{margin-top:24px;padding-top:20px;gap:8px;border-color:var(--layout-line)}
.interface-tabs button{font-size:12px;line-height:1.5;padding:8px 12px;min-height:40px;border-radius:6px;border-color:#37423f40;transition:background .18s,color .18s}
.interface-hint{font-size:12px;margin-top:16px;line-height:1.6}
.gallery-footer{font-size:12px;gap:16px;line-height:1.8;padding-top:8px}
.medical{background:#e9e1dc}
.medical-heading h2 .type-sticker,.practice .type-sticker{background:none;color:#61786b;box-shadow:none;rotate:0;font-size:1em;line-height:inherit;padding:0;font-weight:700;letter-spacing:inherit}
.presentation{max-width:1120px;padding:0;margin:0 auto}
.presentation .back-sheet{display:none}
.presentation .front-sheet{transform:none;will-change:auto;padding:12px 12px 0;border:1px solid var(--layout-line);box-shadow:0 8px 24px #37423f0a}
.slide-top{font-size:12px;padding:4px 4px 16px;align-items:center;gap:12px}
.ppt-zoom{font-size:12px;padding:8px 12px;border-radius:6px;min-height:36px}
.front-sheet figcaption{font-size:12px;padding:16px 4px;line-height:1.7;color:var(--layout-muted)}
.ppt-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.ppt-picker button{padding:8px;background:#f2efe9;border:1px solid var(--layout-line);transition:background .18s,border-color .18s}
.ppt-picker button.selected{outline:1px solid #526c61;box-shadow:none;background:#f8f5ef}
.ppt-picker button:hover{transform:none;border-color:#526c61}
.ppt-picker img{filter:none}
.ppt-picker span{font-size:12px;line-height:1.65;padding:12px 4px 4px}
.ppt-picker span small{font-size:11px;padding-top:4px;opacity:1;color:var(--layout-muted)}
.medical-results{max-width:1120px;margin:40px auto 0;padding-top:32px;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:32px;border-color:var(--layout-line);align-items:start}
.medical-results strong{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.035em}
.medical-results .feedback-result{white-space:nowrap}
.medical-results p>span,.medical-results .status span{font-size:13px;line-height:1.8;color:var(--layout-muted)}
.medical-results .status{min-width:0;align-self:start;gap:12px}
.medical-results .status b{font-size:15px;background:none;box-shadow:none;rotate:0;padding:8px 0 0;font-weight:600;color:#3e5149}
.game-project{background:#f2efe9}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:80px;margin-top:56px}
.project-kicker{font-size:12px;color:var(--layout-muted);letter-spacing:.04em;margin-bottom:24px;line-height:1.6}
.game-accent{color:#61786b}
.game-subtitle{font-size:18px;margin:32px 0 16px;line-height:1.6}
.game-description{font-size:15px;line-height:1.9;color:var(--layout-muted);max-width:480px}
.game-description+.game-description{margin-top:16px}
.game-actions{display:flex;align-items:center;gap:24px;margin:32px 0 40px;flex-wrap:wrap}
.game-actions .pill{margin:0;gap:40px}
.game-play{background:#435b50;color:#f2efe9;border-color:#435b50}
.game-play:hover{background:#344b40;border-color:#344b40}
.game-notes{font-size:14px;min-height:48px;padding:8px 0;display:flex;align-items:center;gap:16px;border-bottom:1px solid #37423f55}
.game-notes:hover{color:#637c77}
.game-facts{display:grid;grid-template-columns:.7fr 1fr 1fr;gap:16px;padding-top:24px;border-top:1px solid var(--layout-line);margin:0;max-width:480px}
.game-facts dt{font-size:18px;line-height:1.6;font-weight:600;font-variant-numeric:tabular-nums}
.game-facts dd{font-size:12px;color:var(--layout-muted);line-height:1.7;margin:8px 0 0}
.game-viewer{padding:24px 32px;background:#e9e2df;min-width:0;border:1px solid var(--layout-line)}
.game-viewer-top{display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:1.6;color:#645c57;font-variant-numeric:tabular-nums}
.game-switch{display:flex;justify-content:center;gap:0;margin:24px auto;width:fit-content;border-bottom:1px solid #71655d40}
.game-switch button{min-height:44px;padding:8px 20px;font-size:13px;border-bottom:2px solid transparent;color:#645c57;transition:color .18s,border-color .18s}
.game-switch button[aria-pressed="true"]{border-bottom-color:#435b50;color:#344b40}
.game-image-button{display:block;padding:0;width:min(100%,320px);margin:0 auto;border:1px solid #6148333d;box-shadow:0 8px 24px #473c3210}
/* Original screenshots are unchanged. Only browser/status bars are clipped in CSS. */
.game-crop{display:block;position:relative;aspect-ratio:1179/2016;overflow:hidden;background:#efb9c5}
.game-crop>img{position:absolute;width:100%;max-width:none;height:auto;left:0;top:-14.534%;display:block;filter:none}
.game-viewer figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;line-height:1.7;color:#645c57;margin-top:24px}
.game-viewer figcaption button{font-size:12px;min-height:40px;padding:8px 0;white-space:nowrap}
.game-viewer figcaption button:hover{text-decoration:underline;text-underline-offset:4px}
.practice{background:#e6e9e1}
.practice-heading{margin:56px 0 48px;align-items:center}
.practice-art{width:180px;height:160px;opacity:.8}
.practice-art div{width:100px;height:100px;font-size:76px}
.practice-art div:nth-child(1){transform:translate(-24px,0) rotate(-8deg)}
.practice-art div:nth-child(2){transform:translate(16px,16px) rotate(4deg)}
.practice-art div:nth-child(3){display:none}
.practice-art:hover div:nth-child(1){transform:translate(-28px,0) rotate(-8deg)}
.practice-art:hover div:nth-child(2){transform:translate(20px,16px) rotate(4deg)}
.practice-list article{grid-template-columns:48px minmax(0,1fr) minmax(0,1fr);gap:24px;padding:32px 0;border-color:var(--layout-line)}
.practice-list article>span{font-size:12px;padding-top:8px;font-variant-numeric:tabular-nums}
.practice-list h3{font-size:24px;font-weight:500;line-height:1.5;letter-spacing:-.02em}
.practice-list p{font-size:15px;line-height:1.9;color:var(--layout-muted)}
.contact{padding-bottom:0}
.contact .project-header{border-color:#f2efe933}
.contact .project-header>span:last-child{color:#e0e4dc}
.about-row{margin:48px 0;gap:48px;align-items:start}
.about-row>p{font-size:28px;line-height:1.6;letter-spacing:-.02em}
.about-row>div{font-size:14px;line-height:1.9;margin:0}
button.contact-title{font-size:clamp(64px,9.6vw,144px);padding:16px 0 40px;line-height:1.2;letter-spacing:-.045em}
.contact-title .type-sticker{rotate:0;box-shadow:none;background:none;color:#f2efe9;padding:0;font-weight:700;font-size:1em;line-height:inherit}
.contact-title:after{font-size:13px;letter-spacing:0;margin-top:24px}
.contact-title>span{margin-left:.25em}
.contact-email{font-size:20px;padding:24px 0;gap:24px}
.contact-email button{font-size:13px;min-height:44px}
footer{font-size:11px;padding:24px 0;gap:16px;letter-spacing:0}
dialog{padding:32px;width:min(960px,calc(100vw - 40px));max-height:90svh;scrollbar-gutter:stable}
dialog[open]{animation:polish-dialog-in .25s var(--layout-ease)}
.dialog-bar{font-size:12px;padding-bottom:16px;border-color:var(--layout-line);gap:16px}
.dialog-bar button{min-height:44px;font-size:14px;padding:8px}
dialog h2{font-size:clamp(32px,4.5vw,60px);line-height:1.25;letter-spacing:-.035em;margin:32px 0 16px}
.dialog-lead{font-size:18px;line-height:1.8;margin-bottom:32px}
.detail-grid{gap:32px 40px;margin:32px 0}
.detail-grid h3{font-size:20px;font-weight:600;margin-bottom:12px;line-height:1.5}
.detail-grid p{font-size:15px;line-height:1.95;color:var(--layout-muted)}
.detail-footer{font-size:12px;padding-top:24px;border-color:var(--layout-line);line-height:1.8}
.detail-footer a{display:inline-block;margin-left:24px;text-decoration:underline;text-underline-offset:4px}
.ppt-viewer-controls,.interface-full-controls{font-size:13px}
.ppt-viewer-controls button{min-height:44px;font-size:13px;border-radius:6px}
#interface-lightbox,#ppt-lightbox{padding:24px}
#pingu-lightbox{width:min(620px,calc(100vw - 32px));padding:24px}
.game-lightbox-picture{width:min(100%,380px);margin:24px auto}
.game-lightbox-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-variant-numeric:tabular-nums}
.game-lightbox-controls button{min-height:44px;padding:8px 12px;border:1px solid var(--layout-line);border-radius:6px;font-size:13px}
.reveal{translate:0 12px;transition:opacity .5s var(--layout-ease),translate .5s var(--layout-ease)}
@keyframes polish-dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1600px){:root{--g:max(80px,calc((100vw - 1440px)/2))}}
@media(max-width:1000px) and (min-width:701px){
 .gallery-title,.medical-heading{gap:40px}.gallery-track{grid-template-columns:1fr;gap:32px}.portfolio-deck{display:grid;grid-template-columns:1fr 1fr;align-items:center}.deck-stage{height:460px;min-height:0}.deck-controls{border:0;display:flex;flex-direction:column;align-items:flex-start}.interface-stage{aspect-ratio:16/9}.game-layout{gap:40px}.game-viewer{padding:24px 20px}.game-story h2{font-size:48px}.game-facts{grid-template-columns:1fr 1fr}.game-facts>div:last-child{grid-column:1/-1}.medical-results{gap:24px}.practice-list article{grid-template-columns:32px 1fr 1fr;gap:16px}.practice-list h3{font-size:21px}
}
@media(max-width:700px){
 :root{--g:24px}
 body[data-look]>header{top:16px;left:16px;width:calc(100% - 32px);transform:none;height:60px;padding:0 16px;gap:12px}
 body[data-look]>header .identity{display:none}
 body[data-look]>header .logo{font-size:22px}
 body[data-look]>header nav{font-size:11px;gap:16px}
 body[data-look]>header .motion-toggle{position:absolute;right:0;top:76px;min-height:36px;min-width:84px;font-size:10px;padding:8px 10px}
 body[data-look]>header .motion-toggle:after{content:none}
 .project-header{font-size:11px;line-height:1.7;gap:12px;padding-bottom:20px;align-items:start}
 .project-header>span:last-child{max-width:52%}
 .opening{display:grid;grid-template-columns:1fr;padding:64px var(--g);gap:24px}
 .opening>.label{font-size:11px}
 .opening>p{font-size:clamp(30px,8vw,48px);line-height:1.3;letter-spacing:-.045em;margin:0}
 .opening-note{font-size:14px;line-height:1.9;margin:8px 0 0;max-width:none}
 .project-index{gap:12px;margin-top:8px}.project-index a{font-size:11px;min-height:64px;gap:8px;flex-wrap:wrap;padding-top:12px;align-content:start;line-height:1.7}
 .project-index a>span:first-child{width:100%;font-size:10px}.project-index a>span:last-child{display:none}
 .gallery-pin,.medical,.game-project,.practice,.contact{padding:32px var(--g) 56px}
 .gallery-title,.medical-heading{grid-template-columns:1fr;gap:24px;margin:32px 0}
 .gallery-title h2,.medical-heading h2,.practice h2,.game-story h2{font-size:clamp(40px,10.7vw,60px);line-height:1.18;letter-spacing:-.045em}
 .project-intro,.medical-heading>div{margin:0;min-width:0}
 .project-intro>p:first-child,.medical-heading>div>p:first-child{font-size:17px;margin-bottom:12px}
 .project-intro>p:nth-child(2),.medical-heading>div>p:nth-child(2){font-size:14px;line-height:1.85}
 .project-intro>p:nth-child(2) br{display:none}
 .pill{font-size:14px;min-height:48px;margin-top:20px;padding:12px 16px;gap:32px}
 .gallery-track{grid-template-columns:1fr;gap:24px;padding:0 0 24px}
 .portfolio-deck{display:flex;grid-column:1/-1}
 .deck-stage{height:440px;min-height:0;flex:auto}
 .deck-item{width:232px;margin-left:-116px;top:64px}
 .deck-item figcaption{font-size:9px}
 .deck-controls{font-size:12px;padding:16px;gap:12px;min-height:88px}
 .deck-controls>span:last-child{font-size:11px;width:100%;justify-content:space-between}
 .interface-showcase{grid-column:1/-1;padding:24px 16px}
 .interface-heading{font-size:11px;gap:12px;margin-bottom:32px}
 .interface-stage{aspect-ratio:16/11;margin:0 4px}
 .interface-bottom{gap:16px;margin-top:24px}
 #interface-caption strong{font-size:17px}#interface-caption p{font-size:13px}
 .interface-controls{gap:8px;align-self:stretch;justify-content:space-between;width:100%}
 .interface-controls button{font-size:12px;padding:8px 10px;min-height:44px}
 .interface-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:20px;margin-top:24px}
 .interface-tabs button{font-size:12px;padding:8px;min-height:44px;border-radius:6px}
 .interface-hint,.gallery-footer{font-size:11px}
 .gallery-footer{align-items:start;gap:12px}
 .presentation{padding:0;margin-top:0}
 .presentation .front-sheet{padding:8px 8px 0}
 .slide-top{font-size:11px;padding:0 0 12px;gap:8px;flex-wrap:wrap}
 .ppt-zoom{font-size:11px;min-height:40px;padding:6px 8px}
 .front-sheet figcaption{font-size:11px;padding:12px 0}
 .ppt-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
 .ppt-picker button{padding:6px}
 .ppt-picker span{font-size:12px;padding:8px 2px 4px}.ppt-picker span small{font-size:11px}
 .medical-results{grid-template-columns:1fr 1fr;gap:24px 16px;margin-top:32px;padding-top:24px}
 .medical-results strong{font-size:28px;letter-spacing:-.04em}
 .medical-results p>span{font-size:12px}
 .medical-results .status{grid-column:1/-1;gap:8px}
 .medical-results .status b{font-size:15px;padding:0}
 .medical-results .status span{font-size:12px}
 .game-layout{grid-template-columns:1fr;gap:32px;margin-top:32px}
 .project-kicker{font-size:11px;margin-bottom:20px}
 .game-subtitle{font-size:17px;margin:24px 0 12px}
 .game-description{font-size:14px;line-height:1.85}
 .game-actions{gap:24px;margin:24px 0 32px}
 .game-actions .pill{gap:32px}.game-notes{font-size:14px}
 .game-facts{gap:12px;grid-template-columns:.6fr 1fr 1fr;padding-top:24px}
 .game-facts dt{font-size:15px}.game-facts dd{font-size:11px;margin-top:8px}
 .game-viewer{padding:20px 16px}
 .game-viewer-top{font-size:11px;gap:12px}
 .game-switch{margin:20px auto}.game-switch button{font-size:13px;padding:8px 16px}
 .game-image-button{width:min(100%,340px)}
 .game-viewer figcaption{font-size:11px;gap:8px;margin-top:16px}
 .game-viewer figcaption button{font-size:11px}
 .practice-heading{margin:32px 0;gap:16px;align-items:center}
 .practice-art{width:64px;height:100px;scale:.65;transform-origin:right center;margin:0;flex-shrink:0}
 .practice-list article{grid-template-columns:24px 1fr;gap:12px 16px;padding:24px 0}
 .practice-list article>span{font-size:11px;padding-top:5px}
 .practice-list h3{font-size:20px;line-height:1.6}
 .practice-list p{grid-column:2;font-size:14px;line-height:1.85}
 .contact{padding-bottom:0}
 .contact .project-header>span:last-child{max-width:52%;font-size:10px}
 .about-row{display:block;margin:32px 0}
 .about-row>p{font-size:23px;line-height:1.6}
 .about-row>div{font-size:13px;line-height:1.9;margin-top:24px}
 button.contact-title{font-size:clamp(56px,15vw,88px);padding:8px 0 32px}
 .contact-title:after{font-size:12px;margin-top:20px}
 .contact-email{font-size:14px;padding:20px 0;gap:12px;flex-wrap:wrap}
 .contact-email button{font-size:12px}
 footer{font-size:11px;padding:24px 0;gap:16px;flex-wrap:wrap}
 footer>span{order:3;width:100%;font-size:10px}
 dialog{padding:20px;width:calc(100vw - 24px);max-height:92svh}
 .dialog-bar{font-size:11px;gap:12px}.dialog-bar button{font-size:13px;padding:8px 0}
 dialog h2{font-size:32px;margin-top:24px;line-height:1.3}
 .dialog-lead{font-size:16px;line-height:1.8;margin-bottom:24px}
 .detail-grid{grid-template-columns:1fr;gap:24px;margin:24px 0}
 .detail-grid h3{font-size:18px;margin-bottom:12px}.detail-grid p{font-size:14px;line-height:1.9}
 .detail-footer{font-size:12px;padding-top:20px}
 .detail-footer a{margin:12px 0 0;display:block}
 #interface-lightbox,#ppt-lightbox,#pingu-lightbox{padding:16px}
 .game-lightbox-picture{margin:20px auto}
 .game-lightbox-controls{font-size:12px;gap:8px}.game-lightbox-controls button{font-size:12px;padding:8px}
 .contact-method{font-size:14px}.contact-method>span,.contact-method button,.contact-helper{font-size:12px}
 .contact-method button{min-height:44px}
}
@media(max-width:360px){
 :root{--g:20px}.deck-item{width:210px;margin-left:-105px}.deck-stage{height:408px}
 body[data-look]>header nav{gap:12px;font-size:10px}
 .game-facts{grid-template-columns:1fr 1fr;gap:20px}.game-facts>div:last-child{grid-column:1/-1}
 .game-viewer figcaption{align-items:start;flex-direction:column;gap:0}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;translate:none}.game-viewer img{animation:none!important}dialog[open]{animation:none}}

/* Single-line hero name, requested 2026-11-02. */
body[data-look] .hero-copy .personal-name:after{bottom:-5px;border-bottom-width:5px}