/* Personal identity and navigation within the established red, black and white design. */
.brand{font-family:'Onest',Arial,sans-serif;gap:11px;letter-spacing:0;font-weight:600;color:var(--ink)}
.brand-square{width:37px;height:37px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--red);color:#fff;font-family:var(--heading);font-size:15px;letter-spacing:-.09em;padding-right:2px;flex-shrink:0}
.brand-name{display:flex;gap:.3em;font-family:var(--heading);font-size:18px;line-height:1.18;font-weight:900;letter-spacing:-.055em;text-transform:uppercase}
@media(max-width:1100px){.brand-name{font-size:15px}}
@media(max-width:850px){.brand-name{flex-direction:column;gap:2px;font-size:13px}}
.portfolio-hero{background:#151619;color:#f1f2f3;padding:85px 0 80px;overflow:hidden}
.portfolio-hero .section-kicker{color:var(--dark-muted)}
.portfolio-hero .section-kicker:before{content:'';display:inline-block;width:18px;height:2px;background:var(--dark-accent);vertical-align:middle;margin-right:10px}
.portfolio-hero-inner{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:75px}
.portfolio-introduction{min-width:0}
.portfolio-introduction h1{font:900 clamp(46px,5.1vw,74px)/1.14 var(--heading);letter-spacing:-.055em;margin-top:27px}
.portfolio-introduction h1 em{font-style:normal;color:inherit}
.author-dot{color:var(--dark-accent)}
.portfolio-description{font-size:18px;line-height:1.8;color:#bdc0c8;margin-top:27px}
.portfolio-introduction .button{margin-top:28px}
.portfolio-signature{font:500 9px/1.7 var(--mono);letter-spacing:.1em;color:var(--dark-muted);margin-top:31px}
.portfolio-projects{min-width:0;scroll-margin-top:110px}
.portfolio-projects h2{font:800 clamp(30px,3.1vw,43px)/1.17 var(--heading);letter-spacing:-.045em;color:#f1f2f3;margin-top:12px;margin-bottom:24px}
.portfolio-projects h2 em{color:var(--red);font-style:normal}
.project-directory{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.directory-cell{position:relative;display:flex;align-items:flex-end;min-width:0;min-height:166px;padding:21px;background:#202226;border:1px solid #3d4048;border-radius:17px;transition:transform .25s,border-color .25s,background .25s}
.directory-cell:hover{transform:translateY(-5px);border-color:#b94b58;background:#30252a}
.directory-number{position:absolute;top:19px;left:21px;font:500 9px/1 var(--mono);color:var(--dark-muted);letter-spacing:.05em}
.directory-cell>svg{position:absolute;width:47px;height:47px;top:20px;right:19px;color:var(--dark-muted)}
.directory-copy{display:block;min-width:0}
.directory-copy strong{display:block;font:700 16px/1.4 var(--heading);letter-spacing:-.055em}
.directory-copy small{display:block;color:#b6bbc5;font-size:11px;line-height:1.5;margin-top:7px;max-width:170px;padding-right:8px}
.directory-arrow{position:absolute;right:18px;bottom:17px;font-size:16px;line-height:1;color:#ee8790}
.directory-games{background:var(--red);border-color:var(--red)}
.directory-games:hover{background:#cd0717;border-color:#cd0717}
.directory-games .directory-number,.directory-games>svg,.directory-games .directory-arrow,.directory-games .directory-copy small{color:#fff}
.directory-apps{border-top-right-radius:38px}
.directory-books{border-bottom-left-radius:38px}
.creative-intro{padding-top:65px;padding-bottom:65px}
.project-opening{display:flex;justify-content:space-between;align-items:flex-end;gap:35px}
.project-opening h2{font-size:43px;margin-top:15px}
.project-opening>p{font-size:15px;line-height:1.8;color:var(--muted);max-width:460px;padding-bottom:2px}

@media(min-width:1600px){.portfolio-hero{padding-top:110px;padding-bottom:100px}.portfolio-hero-inner{gap:95px}.portfolio-introduction h1{font-size:78px}.directory-cell{min-height:184px;padding:24px}.directory-copy strong{font-size:18px}.directory-copy small{font-size:11px}.directory-cell>svg{width:54px;height:54px;top:22px;right:22px}}
@media(max-width:1100px){.portfolio-hero-inner{gap:45px}.portfolio-introduction h1{font-size:clamp(44px,5.2vw,60px)}.portfolio-description{font-size:16px}.directory-cell{padding:18px;min-height:151px}.directory-number{top:18px;left:18px;font-size:8px}.directory-cell>svg{width:40px;height:40px;top:19px;right:17px}.directory-copy strong{font-size:13px}.directory-copy small{font-size:9px;max-width:140px}.directory-arrow{right:15px;bottom:16px;font-size:14px}.project-opening h2{font-size:36px}.project-opening>p{font-size:13px;max-width:360px}}
@media(max-width:900px){.portfolio-hero{padding-top:60px;padding-bottom:60px}.portfolio-hero-inner{grid-template-columns:1fr;gap:42px}.portfolio-introduction h1{font-size:clamp(43px,7.2vw,65px)}.portfolio-description{font-size:18px}.project-directory{gap:16px}.directory-cell{min-height:150px;padding:22px}.directory-copy strong{font-size:18px}.directory-copy small{font-size:11px;max-width:none}.directory-number{top:19px;left:22px}.directory-cell>svg{width:48px;height:48px;top:18px;right:21px}.directory-arrow{right:20px;bottom:21px;font-size:16px}.project-opening{display:block}.project-opening>p{max-width:600px;margin-top:20px}.creative-intro{padding-top:55px;padding-bottom:55px}}
@media(max-width:760px){.brand{gap:9px}.brand-square{width:32px;height:32px;font-size:13px;border-radius:8px}.brand-name{font-size:12px}.portfolio-hero{padding-top:43px;padding-bottom:43px}.portfolio-hero-inner{gap:34px}.portfolio-introduction .section-kicker{font-size:8px}.portfolio-introduction h1{font-size:clamp(34px,9.4vw,53px);line-height:1.17;margin-top:22px;letter-spacing:-.055em}.portfolio-description{font-size:16px;line-height:1.75;margin-top:22px}.portfolio-introduction .button{margin-top:24px;font-size:12px}.portfolio-signature{font-size:7px;letter-spacing:.08em;margin-top:23px}.project-directory{gap:12px}.directory-cell{min-height:146px;padding:17px;border-radius:14px}.directory-apps{border-top-right-radius:30px}.directory-books{border-bottom-left-radius:30px}.directory-number{font-size:7px;top:17px;left:17px}.directory-cell>svg{width:39px;height:39px;top:16px;right:15px}.directory-copy strong{font-size:clamp(11px,3.2vw,17px);letter-spacing:-.055em}.directory-copy small{font-size:9px;line-height:1.5;margin-top:6px;padding-right:9px}.directory-arrow{right:13px;bottom:16px;font-size:13px}.creative-intro{padding-top:45px;padding-bottom:45px}.project-opening h2{font-size:31px;line-height:1.2;margin-top:12px}.project-opening>p{font-size:13px;margin-top:17px}}
@media(max-width:380px){.portfolio-introduction h1{font-size:32px}.portfolio-description{font-size:14px}.portfolio-signature{font-size:6px}.directory-cell{padding:14px;min-height:144px}.directory-copy strong{font-size:10px}.directory-copy small{font-size:8px}.directory-number{left:14px;top:16px}.directory-cell>svg{width:35px;height:35px;right:13px}.directory-arrow{font-size:12px;right:11px;bottom:15px}.project-opening h2{font-size:28px}.project-opening>p{font-size:12px}}