/* A shared editorial grid for the portfolio. */
:root{--gutter:max(clamp(24px,6vw,96px),calc((100vw - 1440px)/2));--section-space:clamp(88px,9vw,144px);--type-body:16px;--type-project:21px}
body{line-height:1.75}
.chapter-meta{padding:20px 0 24px;align-items:baseline;font-weight:400;letter-spacing:.055em}
.chapter-meta>span:first-child{font-variant-numeric:tabular-nums}
.chapter-meta>span:last-child{letter-spacing:.035em}
header{padding-top:28px;align-items:center}
.logo{font-weight:500;letter-spacing:.035em}
.logo small{letter-spacing:.06em}
.hero-sticky h1{left:var(--gutter);right:var(--gutter)}
.hero-side,.hero-bottom{left:var(--gutter)}
.hero-side p{font-size:clamp(24px,2.1vw,32px);line-height:1.5}
.hero-side a{margin-top:24px}
.works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-bottom:var(--section-space)}
.works>.chapter-meta{grid-column:1/-1}
.works>.section-title{grid-column:1/7;margin:12px 0 36px}
.works>.work-nav{grid-column:7/-1;align-self:end;gap:24px;margin:0 0 38px}
.works>.work-rail,.works>.demo-note{grid-column:1/-1;min-width:0}
.section-title,.archive-heading h2,.about h2,.skills-heading h2{font-size:clamp(42px,5.35vw,78px);font-weight:500;line-height:1.15;letter-spacing:-.035em}
.work-nav p{letter-spacing:.04em;white-space:nowrap}
.work-controls{gap:14px}
.work-controls>span{margin-right:8px}
.work-rail{--poster-height:min(68svh,660px);padding:24px 10px;height:calc(var(--poster-height) + 48px)}
.card-content{inset:30px}
.work-card h3{font-size:clamp(24px,2vw,30px);line-height:1.3;margin-bottom:12px;letter-spacing:-.01em}
.work-card .meta{line-height:1.6}
.demo-note{margin-top:28px;display:flex;justify-content:flex-end}
.demo-note a{padding:8px 0;border-bottom:1px solid var(--line)}
.introduction{padding-bottom:clamp(96px,10vw,160px)}
.statement-title{font-size:clamp(44px,6.5vw,96px)!important;line-height:1.24!important;letter-spacing:-.035em;margin-top:48px!important;max-width:1200px!important}
.scene-content h2{font-size:clamp(48px,6.1vw,92px);line-height:1.2;letter-spacing:-.035em}
.archive-heading{margin-top:12px;align-items:end}
.archive-heading h2{margin-top:0}
.archive-heading>span{font-variant-numeric:tabular-nums;letter-spacing:.04em;padding-bottom:9px}
.archive-filters{gap:8px 28px;margin:28px 0 44px;border-bottom:1px solid var(--line);padding-bottom:12px}
.archive-filters button{padding:9px 0;letter-spacing:.02em}
.archive-grid{column-gap:clamp(24px,4vw,56px)}
.archive-grid.masonry{--archive-card-gap:60px}
.archive-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;padding-top:18px;align-items:baseline}
.archive-meta h3{font-size:var(--type-project);line-height:1.45;letter-spacing:-.015em;max-width:26ch;overflow-wrap:anywhere}
.archive-meta>span{margin:0;font-size:12px;line-height:1.6;text-align:right;max-width:17ch}
.about{column-gap:32px}
.about h2{grid-column:1/7;margin-top:18px}
.about>p{grid-column:1/7;font-size:13px!important;letter-spacing:.03em;margin-top:22px}
.about-brief{grid-column:8/-1;align-self:end;max-width:440px;padding-bottom:5px}
.education{font-size:17px;font-weight:500;line-height:1.6;margin-bottom:28px}
.education>span{font-size:12px;letter-spacing:.055em;margin-top:9px}
.about-intro{font-size:16px;line-height:1.95;max-width:28ch}
.skills-heading{margin:14px 0 42px;align-items:baseline}
.skills-heading>span{font-size:12px;letter-spacing:.035em}
.skills-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.skill-item{padding-top:20px}
.skill-item::before{margin-bottom:26px;font-weight:400}
.skill-item h3{font-size:23px;line-height:1.4;margin-bottom:16px;letter-spacing:-.015em}
.skill-item p{font-size:15px;line-height:1.85;margin-bottom:22px;max-width:24ch;min-height:5.55em}
.skill-tools{line-height:1.75}
footer{padding-top:48px}
footer>.footer-grid{margin-top:38px}
.footer-grid{grid-template-columns:1.3fr .75fr 1.5fr .6fr;gap:36px}
.footer-name{font-size:25px;letter-spacing:.01em}
.footer-grid h3{font-size:12px;font-weight:400;letter-spacing:.055em;margin-bottom:24px}
.footer-grid a{margin-bottom:11px}
.email-link{font-size:clamp(16px,1.5vw,22px);line-height:1.6;letter-spacing:-.02em}
.back-top{justify-self:end;white-space:nowrap}
.copyright{margin-top:64px;padding-top:20px}
@media(max-width:1100px){
 .works>.section-title{grid-column:1/6}.works>.work-nav{grid-column:6/-1}
 .skills-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}.skill-item p{min-height:0;max-width:32ch}
 .archive-meta{grid-template-columns:1fr;gap:5px}.archive-meta>span{text-align:left;max-width:none}
 .footer-grid{grid-template-columns:1.2fr .8fr 1.5fr}.back-top{grid-column:3;justify-self:start}
}
@media(max-width:800px){
 :root{--gutter:24px;--section-space:88px;--type-project:20px}
 header{padding-top:22px}.hero-side p{font-size:23px}.hero-side a{margin-top:18px}
 .works{display:block}.works>.section-title{margin:8px 0 24px}.works>.work-nav{margin:0 0 22px;gap:16px}
 .work-controls{gap:9px}.work-controls>span{margin-right:0}.work-nav p{font-size:11px}
 .work-rail{--poster-height:min(520px,calc((100vw - 48px) * .9 * 1.414));padding:12px 0;height:calc(var(--poster-height) + 24px)}
 .demo-note{margin-top:22px}.card-content{inset:24px}
 .statement-title{font-size:clamp(38px,7vw,60px)!important;margin-top:32px!important;line-height:1.32!important;letter-spacing:-.025em}
 .introduction{padding-bottom:88px}.chapter-meta{font-size:11px;padding:18px 0 22px;gap:16px}
 .section-title,.archive-heading h2,.about h2,.skills-heading h2{font-size:clamp(40px,7.1vw,60px);line-height:1.2}
 .archive-heading{margin-top:8px}.archive-heading>span{font-size:11px;padding-bottom:7px}
 .archive-filters{gap:6px 22px;margin:22px 0 32px}.archive-filters button{font-size:12px}
 .archive-grid{column-gap:22px}.archive-grid.masonry{--archive-card-gap:40px}
 .archive-meta{padding-top:14px}.archive-meta h3{font-size:20px}.archive-meta>span{font-size:11px}
 .about-brief{margin:34px 0 0 12%;max-width:390px}.about>p{margin:20px 0 0}
 .education{font-size:16px}.about-intro{font-size:15px;max-width:30ch}
 .skills-heading{margin:10px 0 32px;gap:20px;align-items:end}.skills-heading>span{font-size:11px;padding-bottom:7px}
 .skills-grid{gap:36px 28px}.skill-item h3{font-size:22px}.skill-item::before{margin-bottom:18px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px}.footer-name{grid-column:1/-1}.back-top{grid-column:1/-1;justify-self:start}
 .email-link{font-size:16px;letter-spacing:-.015em}.copyright{margin-top:48px;gap:20px;font-size:11px}
}
@media(max-width:520px){
 .archive-grid{grid-template-columns:1fr}.archive-grid.masonry{--archive-card-gap:38px}
 .archive-meta{grid-template-columns:minmax(0,1fr) auto;gap:12px}.archive-meta>span{text-align:right;max-width:14ch}
 .skills-grid{grid-template-columns:1fr}.skill-item p{max-width:32ch}.skill-item{padding-top:18px}
 .skills-heading{display:block}.skills-heading>span{display:block;margin-top:14px;padding:0}
 .chapter-meta>span:last-child{max-width:46%}.work-nav p{letter-spacing:0}
}