/* Introduction comes before games; the portfolio gallery follows information. */
.about-section{padding-top:40px;padding-bottom:40px;scroll-margin-top:95px}
.about-section .intro-section{width:100%;padding-top:45px;padding-bottom:55px;min-height:0}
.portfolio-preview{margin-top:12px}
#portfolioTitle{font:700 clamp(28px,3vw,40px)/1.4 var(--locale-title);text-align:center;letter-spacing:-.04em;margin-bottom:34px}
.portfolio-gallery{--gallery-row:185px;--gallery-gap:16px;display:block;position:relative;height:calc(var(--gallery-row)*2.5 + var(--gallery-gap)*2);border-radius:28px;isolation:isolate;outline-offset:6px}
.portfolio-mosaic{display:flex;flex-direction:column;gap:var(--gallery-gap);overflow:hidden;height:100%;mask-image:linear-gradient(#000 0%,#000 74%,transparent 100%);border-radius:26px}
.portfolio-mosaic-row{display:flex;gap:var(--gallery-gap);height:var(--gallery-row);flex:0 0 var(--gallery-row);min-width:0}
.portfolio-tile{flex:1 1 0;min-width:0;max-width:75%;overflow:hidden;border-radius:18px;background:#232326;transition:transform .5s var(--ease)}
.portfolio-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.portfolio-gallery--empty{height:auto}
.portfolio-tile img,.timeline-media>img{transform:scale(var(--preview-scale,1));transition:transform .45s cubic-bezier(.16,1,.3,1)}
.portfolio-gallery-link{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);white-space:nowrap;font:400 clamp(21px,2.2vw,28px)/1.5 var(--locale-pixel);color:#fff;padding:0;border:0;background:none;text-shadow:0 2px 12px #111113}
.portfolio-page .site-header{position:relative;display:flex;background:none;border:0;backdrop-filter:none;height:86px}
.portfolio-page .site-header .studio-brand{position:static;opacity:1;pointer-events:auto}.portfolio-page .studio-word{color:white}
.portfolio-page main{width:min(1420px,calc(100% - 80px));margin:auto;padding:65px 0 100px}
.portfolio-page-header{width:min(900px,100%);margin:0 auto 70px;text-align:center}
.portfolio-page-header h1{font:700 clamp(38px,5vw,66px)/1.25 var(--locale-title);letter-spacing:-.055em;margin-top:20px}
.portfolio-page-header>p{color:#dddde2;margin-top:18px;font-size:17px}
#portfolioHome{font-size:14px;color:#bdbdc6}
.portfolio-timeline{position:relative;padding:45px 0;list-style:none;margin:0}
.portfolio-timeline:before{content:'';position:absolute;left:calc(50% - 4px);top:0;bottom:0;width:8px;border-radius:8px;background:linear-gradient(180deg,#ff8000 0%,#ff00cc 50%,#00bfff 100%)}
.timeline-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);align-items:center;margin:0 0 85px}
.timeline-row:last-child{margin-bottom:25px}.timeline-media{grid-column:1;grid-row:1;min-width:0;width:min(100%,calc(420px * var(--media-ratio,1.7778)));aspect-ratio:var(--media-ratio,16/9);max-height:420px;justify-self:center;border-radius:25px;overflow:hidden;background:linear-gradient(125deg,#262634,#18181e);position:relative;box-shadow:0 15px 45px #0003}
.timeline-media>img{width:100%;height:100%;object-fit:contain}.timeline-copy{grid-column:3;grid-row:1;padding:20px 15px 20px 14px;min-width:0}
.timeline-copy h2{color:var(--work-color);font:700 clamp(24px,2.4vw,38px)/1.35 var(--locale-title);letter-spacing:-.04em;margin:11px 0 17px;overflow-wrap:anywhere}
.timeline-copy p{font:400 clamp(15px,1.25vw,18px)/1.9 var(--locale-ui);color:#e1e1e6;white-space:pre-line;overflow-wrap:anywhere}
.timeline-date{font:500 14px/1.5 var(--locale-ui);color:#aaaab5;letter-spacing:.04em}
.timeline-dot{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border:0;background:var(--timeline-dot-color,#ff8000);border-radius:50%;box-shadow:none;z-index:1}
.timeline-row--reverse .timeline-media{grid-column:3}.timeline-row--reverse .timeline-copy{grid-column:1;text-align:right;padding:20px 14px 20px 15px}
.timeline-visit{display:inline-block;margin-top:23px;font:600 14px/1.4 var(--locale-ui);color:var(--work-color)}
.timeline-endpoint{text-align:center;font:700 39px/1.4 var(--locale-nav);padding:15px}
.is-scrollbar-cropped>img{width:100.8%;max-width:none;object-position:left center}
#timelineNewest{color:#ff8000}#timelineOldest{color:#00bfff}
.portfolio-empty{text-align:center;padding:60px 20px;background:#111113;position:relative;z-index:1;color:#c8c8d0}
.portfolio-page-header>p,.timeline-copy p,.timeline-date,.timeline-visit,.portfolio-gallery-link,#portfolioHome,.portfolio-empty{font-family:var(--locale-pixel);font-weight:400;font-synthesis:none}
.portfolio-page-header>p{font-size:clamp(23px,2.5vw,30px);line-height:1.5}
.timeline-copy p{font-size:clamp(17px,1.45vw,20px)}
@media(max-width:760px){.about-section{padding-top:25px}.about-section .intro-section{padding-top:25px;padding-bottom:25px}#portfolioTitle{font-size:28px;margin-bottom:25px}.portfolio-gallery{--gallery-row:125px;--gallery-gap:10px}.portfolio-mosaic{border-radius:18px}.portfolio-tile{border-radius:13px}.portfolio-gallery-link{font-size:21px;bottom:8px;padding:0}.portfolio-page main{width:calc(100% - 36px);padding-top:35px}.portfolio-page-header{margin-bottom:35px}.portfolio-page-header>p{font-size:23px}.portfolio-timeline{padding-top:22px;padding-left:32px}.portfolio-timeline:before{left:6px;width:5px}.timeline-row{display:flex;flex-direction:column;align-items:stretch;margin-bottom:50px;gap:20px}.timeline-dot{left:-23px;top:30px;width:17px;height:17px;border-width:0}.timeline-media{border-radius:18px;aspect-ratio:var(--media-ratio,16/9);max-height:380px;width:min(100%,calc(380px * var(--media-ratio,1.7778)));align-self:center}.timeline-copy,.timeline-row--reverse .timeline-copy{padding:0;text-align:left}.timeline-copy h2{font-size:27px;margin:8px 0 12px}.timeline-copy p{font-size:17px}.timeline-date{font-size:12px}.timeline-endpoint{text-align:left;padding-left:0}.portfolio-page .site-header{height:75px;justify-content:flex-start;padding:0}.portfolio-page .site-header .studio-brand{align-self:center}.portfolio-page .site-header>.language-switch{top:12px}}
@media(prefers-reduced-motion:reduce){.portfolio-tile img,.timeline-media>img{transform:none!important}}

#portfolioTitle,.portfolio-page-header h1{color:#ff8619}
html[lang=ko] .timeline-copy p,html[lang=ko] .timeline-copy h2{word-break:keep-all;overflow-wrap:break-word}
.timeline-media{justify-self:end;transform-origin:right center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.timeline-row--reverse .timeline-media{justify-self:start;transform-origin:left center}
.timeline-media>img{transform:none;transition:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.timeline-media:hover{transform:scale(1.045);z-index:2}}
@media(max-width:760px){.timeline-media,.timeline-row--reverse .timeline-media{align-self:flex-start;transform-origin:left center}}
.timeline-row{align-items:start}
.timeline-copy,.timeline-row--reverse .timeline-copy{padding-top:0;padding-bottom:0}
.timeline-copy h2{margin-top:0;margin-bottom:12px;font:700 clamp(36px,3.6vw,57px)/1.25 var(--locale-title);letter-spacing:-.04em}
.timeline-date{display:block;margin-bottom:18px}
@media(max-width:760px){.timeline-copy h2{font-size:40.5px}}
.portfolio-gallery-link{opacity:0;transform:translate(-50%,8px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.portfolio-gallery:hover .portfolio-gallery-link,.portfolio-gallery:focus-visible .portfolio-gallery-link{opacity:1;transform:translate(-50%,0)}
@media(hover:none){.portfolio-gallery-link{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.portfolio-gallery-link{transform:translate(-50%,0)!important}}

.portfolio-section{padding-top:40px;padding-bottom:40px;scroll-margin-top:40px}