:root { --bg:#F7F6F2; --ink:#161614; --ink-2:#5E5E5A; --ink-3:#9C9C96; --hair:#E1E1DC; --nav:64px }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased }
a { color:inherit }
header { position:fixed; top:0; left:0; right:0; z-index:10; height:var(--nav); display:flex; justify-content:space-between; align-items:center; padding:0 40px; background:linear-gradient(to bottom, rgba(247,246,242,.96), rgba(247,246,242,0)) }
header b { font-weight:600; font-size:16px } header nav { display:flex; gap:26px; font-size:14px } header nav a, header nav button { text-decoration:none; color:var(--ink-2); background:none; border:0; font:inherit; cursor:pointer; padding:0 } header nav a:hover, header nav button:hover { color:var(--ink) }
canvas#c { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none }
.page { position:relative; z-index:1 }
.hero { height:100vh; display:flex; flex-direction:column; justify-content:center; padding:0 40px; max-width:720px }
.hero h1 { font-size:clamp(30px, 3.4vw, 44px); font-weight:500; line-height:1.15; letter-spacing:-.02em; margin:0 0 16px }
.hero p { color:var(--ink-2); font-size:17px; max-width:520px; margin:0 }
.work { position:absolute; width:min(340px, 40vw); opacity:0; transform:translateY(16px); transition:opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); text-decoration:none; background:var(--bg); padding:12px }
.work.on { opacity:1; transform:none }
.work img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; outline:1px solid var(--ink); outline-offset:-1px; background:#fff }
.work .t { font-size:17px; font-weight:600; line-height:1.25; margin:10px 0 3px } .work .t em { font-style:italic; font-weight:400; color:var(--ink-2) }
.work .d { font-size:14px; color:var(--ink-2) } .work .m { font-size:13px; color:var(--ink-3); margin-top:4px; line-height:1.5 }
.yr { position:absolute; left:40px; font-size:13px; color:var(--ink-3); transform:translateY(-50%); background:var(--bg); padding:2px 8px 2px 0 }
.end { position:absolute; left:40px; max-width:520px; background:var(--bg); padding:12px 14px 12px 0 }
.end h2 { font-size:28px; font-weight:500; letter-spacing:-.02em; margin:0 0 8px } .end p { color:var(--ink-2); margin:0 }
.sheet { position:fixed; inset:0; z-index:20; background:rgba(247,246,242,.97); backdrop-filter:blur(10px); display:none; overflow:auto; padding:96px 40px 80px }
.sheet.on { display:block } .sheet .in { max-width:760px; margin:0 auto }
.sheet h2 { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--ink) }
.sheet .x { position:fixed; top:18px; right:40px; font-size:14px; background:none; border:0; cursor:pointer; color:var(--ink-2); font:inherit }
.item { display:grid; grid-template-columns:132px 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--hair); text-decoration:none; align-items:start }
.item img { width:132px; aspect-ratio:3/2; object-fit:cover; display:block; outline:1px solid var(--ink); outline-offset:-1px }
.item .t { font-size:17px; font-weight:600; line-height:1.25; margin:2px 0 4px } .item .d { color:var(--ink-2); font-size:15px; margin:0 0 6px } .item .m { font-size:13px; color:var(--ink-3); line-height:1.5 } .item .m b { color:var(--ink-2); font-weight:500 } .item .l, .item .m div { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px } .item .l { margin:0 0 8px } .item a { font-size:13px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink-3) } .item a:hover { border-color:var(--ink) }
.row { display:grid; grid-template-columns:64px 1fr; gap:14px; padding:9px 0; border-bottom:1px solid var(--hair); font-size:15px; text-decoration:none } .row .y { color:var(--ink-3); font-size:13px; padding-top:2px } .row .k { color:var(--ink-2) }
.lab { position:absolute; font-size:12px; color:var(--ink-2); background:var(--bg); padding:1px 5px; transform:translate(-50%,-50%); white-space:nowrap }
@media (max-width:720px) { header { padding:0 18px } .hero { padding:0 18px } .work { width:64vw } .yr, .end { left:18px } .sheet { padding:80px 18px 60px } .item { grid-template-columns:96px 1fr } .item img { width:96px } }

.item .l, .item .m div { gap:2px 8px } .item a.ic { display:inline-flex; align-items:center; border:0; color:var(--ink-2); line-height:0; padding:2px } .item a.ic:hover { color:var(--ink) } .item a.ic svg { display:block }

.item .m { margin:0 0 8px } .item .l { margin:0; display:flex; gap:4px }