@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=Gaegu:wght@400;700&family=Noto+Sans+KR:wght@300;400;500&family=Space+Mono:wght@400;700&display=swap');

:root{--paper:#f2eee5;--ink:#292b28;--muted:#77776f;--line:rgba(41,43,40,.2)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans KR",sans-serif}body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.32;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");mix-blend-mode:multiply}a{color:inherit;text-decoration:none}.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.site-header{height:108px;display:flex;align-items:center;justify-content:space-between;font-family:"Space Mono",monospace}.wordmark{display:flex;align-items:center;gap:12px;font-family:"Gaegu",cursive;font-weight:700;font-size:25px;letter-spacing:2px}.scribble{width:44px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M1 8c7-8 11 5 18-2s10 6 18 0 10 4 21-2' fill='none' stroke='%23292b28' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat}nav{display:flex;align-items:center;gap:34px;font-size:13px}nav a{border-bottom:1px solid transparent;padding:6px 0}nav a:hover{border-color:var(--ink)}.round-link{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--ink)!important;border-radius:50%}
.hero{min-height:610px;display:grid;grid-template-columns:30% 70%;align-items:center;padding:20px 0 70px}.kicker,.eyebrow{font:11px "Space Mono",monospace;letter-spacing:.12em;color:var(--muted)}h1{margin:20px 0 26px;font:700 clamp(74px,9vw,120px)/.7 "Gaegu",cursive;letter-spacing:-.06em;transform:rotate(-2deg)}.asterisk{font-size:.35em;vertical-align:top;margin-left:4px}.intro{font:500 17px/1.65 "Cormorant Garamond",serif;letter-spacing:.05em}.intro.ko{margin-top:28px;font:300 14px/1.9 "Noto Sans KR",sans-serif}
.hero-art{height:500px;position:relative}.desk-card{position:absolute;left:5%;top:15px;width:68%;height:455px;overflow:hidden;background:linear-gradient(130deg,#a5a08f,#d3c8b7 45%,#8c897f);box-shadow:0 18px 50px rgba(43,38,30,.12)}.window-light{position:absolute;inset:0;background:linear-gradient(72deg,transparent 35%,rgba(255,248,223,.42) 36% 46%,transparent 47% 55%,rgba(255,248,223,.28) 56% 67%,transparent 68%);filter:blur(4px)}.laptop{position:absolute;right:-8%;bottom:-8%;width:45%;height:60%;border:12px solid #282a29;background:#393b38;transform:rotate(5deg);box-shadow:-10px 15px 25px #575247}.laptop span{color:#ddd8cb;font:9px "Space Mono";position:absolute;top:38%;left:14%;transform:rotate(-5deg)}.book{position:absolute;left:-8%;height:34px;background:#d7d0c0;border:1px solid #615e56;box-shadow:0 5px 0 #47453f;transform:rotate(-2deg)}.book-one{width:42%;bottom:25%}.book-two{width:48%;bottom:16%}.mug{position:absolute;left:43%;bottom:20%;width:106px;height:113px;padding-top:28px;border-radius:10px 10px 45px 45px;background:#d5c9b7;text-align:center;font:700 16px/1.05 "Gaegu";transform:rotate(-4deg);box-shadow:0 8px 10px #766f63}.mug::after{content:"";position:absolute;right:-38px;top:22px;width:42px;height:48px;border:10px solid #d5c9b7;border-left:0;border-radius:0 50% 50% 0}.desk-note,.margin-note{position:absolute;font:18px/1.1 "Gaegu",cursive;transform:rotate(-7deg)}.desk-note{bottom:7px;left:14%}.margin-note{top:25px;right:1%;transform:rotate(4deg)}.postcard{position:absolute;right:0;bottom:15px;width:43%;height:270px;padding:35px 44px;background:linear-gradient(#b8c0c6 0 42%,#d3ae90 75%,#4c554a 76%);transform:rotate(-1deg);box-shadow:0 12px 25px rgba(45,41,33,.15);z-index:3}.postcard p{margin:0;font:13px/1.5 "Space Mono",monospace}.horizon{position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(110deg,#354138 35%,transparent 36%),linear-gradient(70deg,#202e26 50%,transparent 51%);clip-path:polygon(0 100%,0 65%,8% 57%,12% 75%,18% 25%,23% 66%,32% 48%,41% 80%,47% 35%,53% 70%,61% 12%,66% 70%,72% 40%,79% 60%,84% 24%,91% 73%,100% 30%,100% 100%)}.tape{position:absolute;z-index:4;width:78px;height:28px;right:19%;top:190px;background:rgba(222,215,190,.76);transform:rotate(2deg)}.sun-shape{position:absolute;right:16%;top:4%;width:180px;height:180px;background:#dfb85f;border-radius:50%;opacity:.18}
.projects{padding:78px 0 100px;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px}.section-heading span{font:10px "Space Mono";color:var(--muted);letter-spacing:.2em}.section-heading h2{margin:4px 0 0;font:500 21px "Space Mono";letter-spacing:.12em}.section-heading p{text-align:right;color:var(--muted);font:13px/1.7 "Cormorant Garamond",serif}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:75px 28px}.project-visual{display:block;height:310px;position:relative;overflow:hidden;transition:transform .35s ease}.project-card:hover .project-visual{transform:translateY(-5px)}.project-visual::before,.project-visual::after{content:"";position:absolute}.project-number{position:absolute;top:18px;left:20px;z-index:2;font:11px "Space Mono";color:rgba(255,255,255,.78)}.visual-label{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);color:white;text-align:center;font:500 clamp(23px,3vw,38px) "Cormorant Garamond",serif;white-space:nowrap}.open-mark{position:absolute;z-index:3;right:18px;bottom:18px;display:grid;place-items:center;width:40px;height:40px;background:rgba(242,238,229,.88);border-radius:50%}
.daengs{background:linear-gradient(135deg,#806a54,#bda58d 50%,#ded4c3)}.daengs::before{width:190px;height:290px;left:35%;top:35px;border-radius:28px;background:#ede9df;box-shadow:0 18px 35px #5d4d40;transform:rotate(-7deg)}.daengs::after{width:62px;height:18px;left:calc(35% + 64px);top:47px;background:#282a29;border-radius:10px}.play{background:radial-gradient(circle at 65% 30%,#e8b690,transparent 25%),radial-gradient(circle at 30% 70%,#7385a0,transparent 30%),#c9bdaf}.play::before{inset:20%;border:1px solid rgba(255,255,255,.7);transform:rotate(30deg)}.play::after{width:130px;height:130px;border-radius:50%;background:rgba(43,45,44,.82);right:18%;top:25%;box-shadow:-120px 70px 0 rgba(231,224,211,.45)}.agent{background:#1d2722}.agent::before{width:170px;height:170px;border-radius:50%;background:#c5a373;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 35px rgba(197,163,115,.08),0 0 0 70px rgba(197,163,115,.05)}.agent::after{content:"● ᴥ ●";z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);font:700 25px "Gaegu"}.chat{background:linear-gradient(145deg,#d5d0c4,#8f998e)}.chat::before{width:40%;height:45px;left:18%;top:28%;border-radius:25px 25px 25px 4px;background:#f1ede4;box-shadow:85px 85px 0 #343b38}.chat::after{width:6px;height:6px;left:30%;top:35%;border-radius:50%;background:#767a73;box-shadow:16px 0 #767a73,32px 0 #767a73}.eyebrow{margin:20px 0 7px}.project-card h3{margin:0;font:500 21px "Space Mono";letter-spacing:.05em}.project-description{min-height:48px;max-width:420px;margin:10px 0 18px;color:#60615d;font-size:14px;line-height:1.7}.project-links{display:flex;gap:22px;font:11px "Space Mono";text-transform:uppercase}.project-links a{border-bottom:1px solid var(--line);padding-bottom:4px}
.about{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;min-height:300px;padding:65px 15px;border-top:1px solid var(--line)}.still{font:15px/1.5 "Space Mono";letter-spacing:.16em}.still span{display:block;width:30px;border-top:1px solid;margin-top:17px}.about-copy{text-align:center}.quote{font:400 20px/1.8 "Cormorant Garamond",serif}.about-copy>p:last-child{color:var(--muted);font-size:12px;line-height:1.8}.github-cta{justify-self:end;font:12px "Space Mono";border-bottom:1px solid;padding-bottom:5px}footer{display:flex;justify-content:space-between;padding:28px 0 45px;border-top:1px solid var(--line);font:9px "Space Mono";letter-spacing:.1em;color:var(--muted)}
@media(max-width:800px){.wrap{width:min(100% - 36px,640px)}.site-header{height:80px}nav a:not(.round-link){display:none}.hero{grid-template-columns:1fr;padding-top:25px}.hero-art{height:440px;margin-top:25px}.desk-card{left:0;width:80%;height:390px}.postcard{width:58%;height:225px;padding:27px}.margin-note{display:none}.tape{right:23%;top:188px}.project-grid{grid-template-columns:1fr;gap:58px}.project-visual{height:270px}.section-heading p{display:none}.about{grid-template-columns:1fr;text-align:center;gap:35px}.still{display:none}.github-cta{justify-self:center}}@media(max-width:460px){.hero-art{height:360px}.desk-card{height:320px;width:92%}.postcard{height:185px;width:63%;padding:20px}.mug{transform:scale(.75) rotate(-4deg);left:38%;bottom:15%}.tape{top:156px}.project-visual{height:230px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-visual{transition:none}}
.project-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.project-visual.has-image{background:#d5cdbc}.project-visual.has-image::before,.project-visual.has-image::after{display:none}.project-visual.has-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.75,.25,1),filter .5s ease}.project-card:hover .project-visual.has-image img{transform:scale(1.035);filter:saturate(1.04) contrast(1.02)}.image-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,20,16,.24),transparent 35%,transparent 65%,rgba(20,20,16,.12));transition:opacity .35s ease}.project-card:hover .image-shade{opacity:.72}.project-visual.has-image .project-number{color:#f5f0e6;text-shadow:0 1px 12px rgba(0,0,0,.3)}.project-visual.has-image .open-mark{transition:transform .35s ease,background .35s ease}.project-card:hover .project-visual.has-image .open-mark{transform:rotate(8deg);background:#f6f1e7}@media(prefers-reduced-motion:reduce){.project-visual.has-image img,.project-visual.has-image .open-mark{transition:none}}
.project-meta .eyebrow { margin: 0; }
.status { display: flex; align-items: center; gap: 7px; margin: 0; color: #65745c; font: 9px "Space Mono", monospace; letter-spacing: .12em; }
.status span { width: 6px; height: 6px; border-radius: 50%; background: #748b68; box-shadow: 0 0 0 3px rgba(116,139,104,.14); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(116,139,104,0); } }
@media (prefers-reduced-motion: reduce) { .status span { animation: none; } }