/* A personal story seen through a photographic and a playable world. */
.welcome{display:none;background:#10171e;color:#fff}
html[data-entry="welcome"] .welcome:not([hidden]){display:block}
html[data-entry="welcome"] #overview{display:none}
html[data-entry="welcome"] body>header{position:absolute;inset:0 0 auto;background:transparent;border:0;color:#fff;z-index:5}
html[data-entry="welcome"] header .personal-wordmark,html[data-entry="welcome"] header .header-resume,html[data-entry="welcome"] header .nav-button{color:#fff}
html[data-entry="welcome"] header .personal-wordmark>span{color:#b9d4ff}
html[data-entry="welcome"] header .header-resume{border-color:#89949f}
html[data-entry="welcome"] header .nav-button:hover{background:#ffffff20;color:#fff}
.worlds-stage{position:relative;isolation:isolate;min-height:780px;height:100svh;max-height:1280px;overflow:hidden}
.world-photo,.world-play{position:absolute;inset:0 auto 0 0;width:var(--reveal);overflow:hidden;z-index:-3}
.world-play{left:var(--reveal);right:0;width:auto;background:#122b43}
.world-photo>img,.world-backdrop{width:100%;height:100%;display:block;object-fit:cover}
.world-photo{background:#26323d}.world-photo>img{object-position:44% 40%;transform:translateY(12%);mask-image:linear-gradient(180deg,transparent,#000 18%)}
.world-backdrop{position:absolute;inset:0;object-position:55% center;opacity:.7}
#welcome-world,#welcome-hero{position:absolute;inset:0;display:block;width:100%;height:100%}
.worlds-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,17,26,.72),rgba(9,17,26,.72) calc(clamp(120px,15vh,190px) + 260px),rgba(9,17,26,0) calc(clamp(120px,15vh,190px) + 390px),rgba(9,17,26,.75) 78%,#09111a 100%)}
.worlds-intro{position:absolute;top:clamp(120px,15vh,190px);left:var(--page-gutter);max-width:640px;pointer-events:none}
.worlds-intro h1{font-size:clamp(52px,6.5vw,88px);font-weight:550;letter-spacing:-.035em;line-height:1.02;color:#fff;margin:0 0 24px}
.worlds-intro p{font-size:clamp(16px,1.6vw,20px);line-height:1.55;margin:0;max-width:35ch;color:#f0f3f7;text-wrap:balance}
.worlds-divider{position:absolute;top:0;bottom:210px;left:var(--reveal);width:1px;background:#ffffff55;pointer-events:none;z-index:1}
.worlds-divider>span{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border:1px solid #d4e0ec;border-radius:50%;display:grid;place-items:center;background:#172533;color:#fff;pointer-events:auto;touch-action:none;cursor:ew-resize}
.worlds-divider svg{width:27px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#worlds-reveal{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;touch-action:none}
.worlds-divider>span:has(input:focus-visible){outline:3px solid #fff;outline-offset:5px}
.worlds-divider svg{pointer-events:none}
.worlds-divider em{position:absolute;top:calc(58% + 34px);left:0;transform:translateX(-50%);font:normal 11px/1.4 Archivo,Arial,sans-serif;color:#fff;white-space:nowrap;background:#172533;padding:5px 9px;border-radius:4px}
.worlds-intro h1 br{display:block!important}
.worlds-entries{position:absolute;left:var(--page-gutter);right:var(--page-gutter);bottom:72px;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.world-entry{display:flex;flex-direction:column;align-items:flex-start;gap:22px;text-decoration:none;color:#fff;min-width:0}
.world-entry-copy{display:flex;flex-direction:column;gap:10px}
.world-entry strong{font-size:clamp(25px,2.7vw,38px);font-weight:500;line-height:1.15;letter-spacing:-.025em}
.world-entry-copy>span{font-size:14px;line-height:1.6;color:#d5dfe9}
.entry-action{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:50px;padding:14px 20px;border-radius:6px;background:#f7f8fa;color:#172533;font-size:14px;font-weight:600;transition:background 160ms ease,transform 160ms cubic-bezier(.16,1,.3,1)}
.play-entry .entry-action{background:#bbd5fa;color:#102238}
.play-entry .ui-icon{fill:currentColor;stroke:none}

.world-entry:focus-visible{outline:2px solid #fff;outline-offset:8px;border-radius:6px}
.worlds-footnote{position:absolute;bottom:20px;width:100%;text-align:center;font-size:11px;color:#c2cedb;margin:0}
html[data-input="keyboard"] .entry-action,html[data-motion="reduce"] .entry-action{transition:none;transform:none}
@media(max-width:1000px){.worlds-entries{gap:36px}.worlds-intro{max-width:440px}.worlds-intro h1{font-size:66px}.worlds-intro p{max-width:28ch}.world-photo>img{object-position:42% center}}
@media(max-width:700px){
 .worlds-stage{min-height:840px;max-height:none;height:100svh}
 .worlds-intro{top:112px;left:24px;right:24px;max-width:none}
 .worlds-intro h1{font-size:52px;line-height:1.04;margin-bottom:18px}
 .worlds-intro p{font-size:16px;max-width:29ch}
 .world-photo>img{object-position:44% center}
 .worlds-shade{background:linear-gradient(180deg,rgba(9,17,26,.72),rgba(9,17,26,.72) 320px,rgba(9,17,26,0) 450px,rgba(9,17,26,.8) 73%,#09111a 100%)}
 .worlds-divider{bottom:250px}.worlds-divider>span{top:76%;width:38px;height:38px}
 .worlds-divider em{top:calc(76% + 29px);font-size:10px}
 .worlds-entries{left:24px;right:24px;bottom:66px;gap:20px}
 .world-entry{gap:18px}.world-entry strong{font-size:24px;max-width:10ch;line-height:1.12}
 .world-entry-copy>span{display:none}
 .entry-action{font-size:12px;padding:12px;gap:8px;min-height:48px;width:100%}
 .entry-action .ui-icon{width:17px;height:17px}
 .worlds-footnote{bottom:24px;font-size:11px}
}
@media(max-width:370px){.worlds-intro h1{font-size:46px}.worlds-entries{left:18px;right:18px;gap:12px}.entry-action{font-size:11px;padding:12px 10px}}
@media(prefers-reduced-motion:reduce){.entry-action{transition:none!important;transform:none!important}}

/* Motion belongs to the invitation and the controls, never to reading. */
.worlds-shade,#welcome-hero{pointer-events:none}
.worlds-divider>span{transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease}
.worlds-stage.is-dragging .worlds-divider>span{transform:translate(-50%,-50%) scale(.94);background:#345b8c}
.entry-action{transition:background 160ms ease,transform 160ms cubic-bezier(.23,1,.32,1);transform-origin:center}
.entry-action .ui-icon{transition:transform 180ms cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){
 .world-entry:hover .entry-action{background:#fff;transform:translateY(-2px)}
 .world-entry:hover .entry-action .ui-icon{transform:translateX(3px)}
 .worlds-divider>span:hover{background:#29435d}
}
.world-entry:active .entry-action{transform:scale(.97)}
html[data-input="keyboard"] .worlds-stage :is(.entry-action,.entry-action .ui-icon),html[data-motion="reduce"] .worlds-stage :is(.entry-action,.entry-action .ui-icon){transition:none;transform:none}
html[data-input="keyboard"] .worlds-divider>span,html[data-motion="reduce"] .worlds-divider>span{transition:none}
html[data-motion="reduce"] .worlds-stage.is-dragging .worlds-divider>span{transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:reduce){
 .worlds-stage :is(.entry-action,.entry-action .ui-icon){transition:none!important;transform:none!important}
 .worlds-divider>span{transition:none!important}
 .worlds-stage.is-dragging .worlds-divider>span{transform:translate(-50%,-50%)}
}