.intro { display:none; }
.js .intro { align-items:center; background:var(--paper); color:var(--paper); display:grid; inset:0; isolation:isolate; overflow:hidden; padding:clamp(24px,5vw,76px); position:fixed; z-index:100; }
.intro::after { background:var(--sky); clip-path:polygon(0 84%,100% 58%,100% 100%,0 100%); content:""; inset:0; opacity:0; position:absolute; transform:translateY(30%); z-index:-1; animation:intro-sky 1.15s 2.2s cubic-bezier(.2,.8,.25,1) forwards; }
.intro-star { background:var(--wine); clip-path:polygon(50% 0,61% 34%,98% 35%,68% 57%,79% 95%,50% 73%,20% 95%,32% 57%,2% 35%,39% 34%); height:min(23vw,300px); left:50%; position:absolute; top:50%; transform:translate(-50%,-50%) scale(.07) rotate(-18deg); width:min(23vw,300px); z-index:-2; animation:intro-star 1.45s cubic-bezier(.15,.95,.32,1) forwards; }
.intro-caption,.intro-count { color:var(--ink); font-family:"DM Mono",monospace; font-size:clamp(.65rem,1vw,.8rem); font-weight:500; letter-spacing:.04em; opacity:0; position:absolute; z-index:1; animation:intro-fade .45s 1.25s ease forwards; }.intro-caption { left:clamp(24px,5vw,76px); top:clamp(26px,5vw,72px); }.intro-count { bottom:clamp(26px,5vw,72px); left:clamp(24px,5vw,76px); }
.intro-title { font-size:clamp(3.2rem,10vw,10rem); line-height:.82; margin:0; position:relative; text-transform:uppercase; transform:translateY(35px); z-index:1; animation:intro-title .68s 1.4s cubic-bezier(.16,.82,.24,1) forwards; }.intro-title span { color:var(--pink); display:inline-block; text-shadow:5px 5px 0 var(--wine); }
.intro-skip { align-items:center; background:var(--ink); border:0; bottom:clamp(20px,4vw,54px); color:var(--paper); cursor:pointer; display:flex; font:700 .72rem "DM Mono",monospace; gap:10px; opacity:0; padding:11px 14px; position:absolute; right:clamp(20px,4vw,54px); transform:skew(-8deg); z-index:2; animation:intro-fade .4s 1.8s ease forwards; }.intro-skip:hover { background:var(--rose); }.intro-skip span { font-size:1rem; }
.intro.is-leaving { animation:intro-out .42s ease forwards; pointer-events:none; }
@keyframes intro-star { 0% { transform:translate(-50%,-50%) scale(.07) rotate(-18deg); } 62% { transform:translate(-50%,-50%) scale(7) rotate(5deg); } 100% { transform:translate(-50%,-50%) scale(9) rotate(10deg); } }
@keyframes intro-title { to { opacity:1; transform:translateY(0); } }
@keyframes intro-fade { to { opacity:1; } }
@keyframes intro-sky { to { opacity:1; transform:translateY(0); } }
@keyframes intro-out { to { opacity:0; visibility:hidden; } }
:root { --sky:#8dbbec; --pink:#ee9ba9; --rose:#cb6576; --wine:#7e324e; --ink:#41423a; --paper:#fff9e9; --butter:#e8e5ad; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--sky); color:var(--ink); font-family:Manrope,"Noto Sans SC",sans-serif; }
.page-shell { overflow:hidden; }
.nav { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:27px 0; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--paper); background:var(--ink); text-decoration:none; font-size:1.45rem; font-weight:800; padding:4px 10px; transform:skew(-8deg); }.brand span { color:var(--butter); }
.nav-links { display:flex; gap:27px; }.nav-links a { font-family:"DM Mono",monospace; font-size:.72rem; text-decoration:none; color:var(--ink); font-weight:500; }.nav-links a:hover { color:var(--rose); }
.hero { width:min(1180px,calc(100% - 48px)); min-height:600px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; }
.eyebrow,.section-label { font-family:"DM Mono",monospace; font-size:.72rem; letter-spacing:.02em; font-weight:500; }.eyebrow { display:flex; gap:9px; align-items:center; margin:0 0 18px; }.eyebrow span { width:8px; height:8px; border-radius:50%; background:var(--wine); }
.hero::after { content:"NO. 01"; position:absolute; right:-25px; bottom:0; color:var(--rose); font:800 9rem/1 Manrope,sans-serif; opacity:.93; transform:rotate(-90deg); }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(4rem,8vw,7rem); line-height:.86; letter-spacing:0; margin-bottom:28px; text-transform:uppercase; } h1 em,h2 em { color:var(--rose); font-style:normal; text-shadow:3px 3px 0 var(--ink); }
.lead { font-size:1.05rem; line-height:1.7; font-weight:600; margin-bottom:30px; }.primary-link { display:inline-block; color:var(--paper); background:var(--ink); font-weight:800; text-decoration:none; padding:12px 16px; transform:skew(-8deg); }.primary-link b { margin-left:10px; font-size:1.2rem; }.primary-link:hover { background:var(--rose); }
.portrait-wrap { min-height:455px; position:relative; display:flex; justify-content:center; align-items:center; }.portrait { width:min(360px,75%); aspect-ratio:1; object-fit:cover; clip-path:polygon(7% 0,100% 8%,92% 91%,0 100%); position:relative; z-index:2; border:7px solid var(--ink); }.shape { position:absolute; }.shape-pink { width:420px; height:310px; background:var(--pink); transform:rotate(-13deg) skew(-10deg); }.shape-burgundy { width:130px; height:130px; background:var(--wine); right:4%; top:7%; transform:rotate(18deg); }.shape-yellow { width:70px; height:70px; background:var(--butter); left:3%; bottom:7%; transform:rotate(18deg); }.portrait-tag { position:absolute; z-index:3; right:0; bottom:27px; color:var(--paper); background:var(--ink); padding:11px 14px; font-family:"DM Mono",monospace; font-size:.68rem; line-height:1.5; transform:rotate(-5deg); }.portrait-tag span { color:var(--butter); }
.about { background:var(--paper); padding:100px max(24px,calc((100vw - 1180px)/2)); grid-template-columns:1fr 2fr; gap:60px; position:relative; }.about::before { content:""; position:absolute; right:-65px; top:-55px; width:220px; height:150px; background:var(--rose); transform:rotate(-20deg); }.section-grid { display:grid; }.section-label { color:var(--rose); font-weight:800; }.about h2,.work h2,.contact h2 { font-size:clamp(2.5rem,5vw,4.75rem); line-height:.95; margin-bottom:27px; }.body-copy { max-width:590px; font-size:1.06rem; line-height:1.8; font-weight:500; }.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:31px; }.chips span { color:var(--paper); background:var(--ink); border:2px solid var(--ink); font-family:"DM Mono",monospace; padding:8px 12px; font-size:.7rem; transform:skew(-7deg); }
.work { padding:100px max(24px,calc((100vw - 1180px)/2)); background:var(--butter); }.work-heading { display:flex; justify-content:space-between; align-items:start; }.work-heading h2 { text-align:right; }.project-list { border-top:3px solid var(--ink); }.project { min-height:110px; display:grid; grid-template-columns:70px 1fr auto 40px; align-items:center; gap:15px; color:var(--ink); text-decoration:none; border-bottom:3px solid var(--ink); transition:transform .2s,background .2s; }.project:hover { background:var(--rose); color:var(--paper); transform:translateX(8px) skew(-3deg); }.project-index,.project-type { font-family:"DM Mono",monospace; font-size:.72rem; }.project-name { font-size:clamp(1.5rem,3vw,2.3rem); font-weight:800; }.arrow { font-size:1.6rem; }.work-note { margin:25px 0 0; font-family:"DM Mono",monospace; font-size:.72rem; }
.contact { padding:105px max(24px,calc((100vw - 1180px)/2)); background:var(--rose); position:relative; }.contact::after { content:"!"; position:absolute; right:9%; top:10%; color:var(--ink); font:900 16rem/.7 Manrope,sans-serif; }.contact .section-label { color:var(--paper); }.contact h2 { color:var(--paper); margin:25px 0 34px; position:relative; z-index:1; }.contact h2 em { color:var(--butter); text-shadow:3px 3px 0 var(--ink); }.email { display:table; position:relative; z-index:1; color:var(--ink); text-decoration:none; font-size:clamp(1.35rem,3vw,2.3rem); font-weight:800; border-bottom:3px solid var(--ink); padding-bottom:8px; }.email span { margin-left:13px; }.phone { display:table; color:var(--paper); font-family:"DM Mono",monospace; font-size:1rem; font-weight:500; text-decoration:none; margin-top:18px; border-bottom:1px solid var(--paper); padding-bottom:3px; position:relative; z-index:1; }.phone:hover { color:var(--ink); border-color:var(--ink); }.contact-note { margin:27px 0 0; font-family:"DM Mono",monospace; font-size:.68rem; position:relative; z-index:1; }
footer { background:var(--ink); color:var(--paper); padding:24px max(24px,calc((100vw - 1180px)/2)); display:flex; justify-content:space-between; font-family:"DM Mono",monospace; font-size:.68rem; }
@media (max-width:700px) { .nav { width:calc(100% - 32px); }.nav-links { gap:15px; }.hero { width:calc(100% - 32px); grid-template-columns:1fr; padding:60px 0 40px; gap:10px; }.hero::after { font-size:6rem; right:-10px; }.portrait-wrap { min-height:360px; }.shape-pink { width:340px; height:250px; }.portrait { width:275px; }.about { grid-template-columns:1fr; gap:26px; padding-top:70px; padding-bottom:70px; }.work,.contact { padding-top:72px; padding-bottom:72px; }.work-heading { display:block; }.work-heading h2 { text-align:left; margin-top:25px; }.project { grid-template-columns:45px 1fr 25px; min-height:92px; }.project-type { display:none; }.contact::after { font-size:9rem; right:5%; top:17%; } footer { gap:16px; flex-direction:column; } }


@media (prefers-reduced-motion:reduce) { .js .intro { display:none; } }