:root{--black:#121212;--off:#f3f0e8;--yellow:#d6ff00;--line:#bebbb4;--gray:#696862;--sans:Archivo, "Noto Sans SC", "Helvetica Neue", sans-serif;--mono:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace}*{box-sizing:border-box}html{background:var(--off);scroll-behavior:smooth}body{background:var(--off);min-width:320px;color:var(--black);font:15px/1.55 var(--sans);margin:0}a{color:inherit;text-decoration:none;transition:background-color .14s,color .14s}a:focus-visible,button:focus-visible{outline:3px solid var(--black);outline-offset:3px}.page{max-width:1280px;margin:auto;padding:20px}.top{border-top:8px solid var(--black);grid-template-columns:1fr auto;align-items:start;gap:24px;padding:20px 0 44px;display:grid}.id{font:12px var(--mono);letter-spacing:.06em}.name{letter-spacing:-.09em;margin-top:22px;font-size:clamp(54px,10vw,132px);font-weight:700;line-height:.82}.name span{color:var(--gray);text-transform:uppercase}.role{margin-top:25px;font:500 18px Noto Sans SC,sans-serif}.contact{font:12px/1.8 var(--mono);text-align:right}.contact b{background:var(--yellow);margin-bottom:8px;padding:3px 6px;font-weight:500;display:inline-block}.contact a{text-decoration:underline;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line)}.contact a:hover{background:var(--yellow);color:var(--black)}.grid{border-top:1px solid var(--black);border-left:1px solid var(--black);grid-template-columns:repeat(12,1fr);display:grid}.block{border-right:1px solid var(--black);border-bottom:1px solid var(--black);min-height:190px;padding:22px}.intro{background:var(--black);color:var(--off);flex-direction:column;grid-column:span 7;justify-content:space-between;min-height:310px;display:flex}.intro h1{letter-spacing:-.05em;max-width:16ch;margin:0;font-size:clamp(28px,3.8vw,52px);line-height:1.1}.intro p{color:#c6c5bd;max-width:57ch;margin:0}.note{font:11px var(--mono);letter-spacing:.1em;color:var(--gray)}.intro .note{color:var(--yellow)}.photo{background:var(--yellow);grid-column:span 5;align-items:center;gap:24px;display:flex}.photo .avatar-img{object-fit:cover;border:3px solid var(--black);border-radius:50%;width:140px;height:140px}.photo .profile-name{flex-direction:column;gap:4px;display:flex}.photo .profile-name h2{letter-spacing:-.04em;color:var(--black);margin:0;font-size:28px;font-weight:700}.photo .profile-name span{font:13px var(--mono);letter-spacing:.08em;color:var(--gray)}.section-title{background:var(--yellow);letter-spacing:-.05em;grid-column:span 3;font-size:21px;font-weight:700;line-height:1.2}.about{grid-column:span 9;grid-template-columns:1.4fr 1fr;gap:30px;font-size:17px;display:grid}.about p{margin:0;line-height:1.55}.about .list{font:12px/1.8 var(--mono);border-left:1px solid var(--black);padding-left:20px}.skill{grid-column:span 4}.skill h3{margin:0 0 30px;font-size:16px}.skill p{font:12px/1.8 var(--mono);color:var(--gray);margin:0}.projects-title{background:var(--black);color:var(--off);letter-spacing:-.04em;grid-column:span 12;min-height:auto;padding:18px 22px;font-size:21px;font-weight:700}.project{flex-direction:column;grid-column:span 4;padding:0;display:flex}.shot{aspect-ratio:16/9;border-bottom:1px solid var(--black);height:180px;font:11px var(--mono);color:var(--gray);background:repeating-linear-gradient(135deg,#ddd9d0 0 2px,#f3f0e8 2px 10px);place-items:center;display:grid;overflow:hidden}.shot img{object-fit:cover;width:100%;height:100%}.project .copy{flex-direction:column;flex:1;padding:18px 22px;display:flex}.project h3{letter-spacing:-.03em;margin:0;font-size:18px}.project p{color:var(--gray);min-height:42px;margin:10px 0 0;font-size:13px;line-height:1.5}.project footer{font:11px var(--mono);color:var(--gray);justify-content:space-between;align-items:center;margin-top:20px;display:flex}.online{color:#27754e}.online:before{content:"● "}.cta{background:var(--yellow);grid-column:span 12;justify-content:space-between;align-items:center;min-height:auto;padding:30px;display:flex}.cta strong{letter-spacing:-.06em;font-size:clamp(26px,4vw,46px)}.cta a{font:14px var(--mono);background:var(--black);color:var(--off);border:1px solid var(--black);padding:14px 18px}.cta a:hover{background:var(--yellow);color:var(--black)}@media (width<=720px){.top{grid-template-columns:1fr;padding:20px 0 32px}.contact{text-align:left}.intro,.photo,.section-title,.about,.skill,.project,.cta{grid-column:span 12!important}.about{display:block}.about .list{border-left:1px solid var(--black);margin-top:20px;padding-left:20px}.skill{min-height:auto}.project{border-right:0}.name{font-size:clamp(48px,15vw,84px)}.cta{flex-direction:column;align-items:flex-start;gap:20px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:-1ms!important}}