:root{--ink:#20372d;--muted:#6e7d70;--paper:#f7f6ec;--cream:#eeeee0;--line:#cbd1c2;--lime:#c7db79;--pink:#e9c9bf;--serif:'Playfair Display','Gowun Batang',serif;--sans:'DM Sans',Arial,sans-serif;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #60853f;outline-offset:4px}.skip-link{position:absolute;top:-60px;left:16px;background:var(--ink);color:white;padding:10px;z-index:4}.skip-link:focus{top:8px}.site-header{height:92px;max-width:1440px;padding:0 6%;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{font:600 38px var(--serif);line-height:1}.brand span,.period{color:#8caa48}.site-header nav{display:flex;gap:8px}.site-header nav a{font-size:11px;letter-spacing:.06em;border:1px solid var(--ink);border-radius:100px;padding:7px 15px;transition:background .2s,color .2s}.site-header nav a:hover{background:var(--ink);color:var(--paper)}.hero{max-width:1440px;margin:auto;padding:115px 6% 105px;min-height:620px}.eyebrow,.section-heading,.small-label,.footer-top,.footer-bottom,.footer-main>div>p,.footer-contact>span{font-size:10px;letter-spacing:.15em;font-weight:700}.hero-eyebrow{display:flex;align-items:center;gap:12px}.dot{width:8px;height:8px;border-radius:50%;background:#94b04e}.eyebrow-line{width:35px;height:1px;background:var(--ink)}h1,h2,h3,p{margin-top:0}h1{font:400 clamp(58px,8.4vw,125px)/1.05 var(--serif);letter-spacing:-.065em;margin:44px 0 50px}h1 em,h2 em,.tech-heading em{font-weight:400}h1 .hero-accent{display:inline-block;background:var(--lime);border-radius:100px;padding:0 .22em .09em .12em;line-height:.95}h1 .period{margin-left:.02em}.hero-bottom{display:flex;align-items:end;justify-content:space-between}.hero-bottom>p:first-child{line-height:1.9;margin:0;font-size:14px}.hero-bottom strong{font-weight:700}.round-link{width:55px;height:55px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:23px;transition:background .2s,color .2s}.round-link:hover{background:var(--ink);color:var(--paper)}.hero-caption{text-align:right;font-size:9px;letter-spacing:.13em;line-height:1.7;margin:0;color:var(--muted)}.section{max-width:1440px;margin:auto;padding:0 6% 135px;scroll-margin-top:25px}.section-heading{border-top:1px solid var(--ink);padding:19px 0;display:flex;justify-content:space-between}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:11%;padding-top:60px}
.photo-placeholder{aspect-ratio:4/4.6;background:#e3e8d9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#81907e;font-size:10px;letter-spacing:.14em}.placeholder-mark{font-size:48px;line-height:1;color:#9dab94}.about-copy{padding-top:24px}.small-label{margin-bottom:25px}.about h2,.skills h2,.projects h2{font:400 clamp(45px,5.8vw,78px)/1.08 var(--serif);letter-spacing:-.055em;margin-bottom:38px}.about-lead{font-family:'Gowun Batang',serif;font-size:clamp(22px,2.1vw,30px);font-weight:700;line-height:1.55;margin-bottom:18px}.about-description{line-height:1.9;color:#637366}.details{margin-top:54px;border-top:1px solid var(--line)}.details div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}.details div>span:first-child{font-size:10px;font-weight:700;letter-spacing:.1em}.empty-value{color:#9ba79a}.skills-intro,.projects-heading{padding:68px 0 45px;display:flex;align-items:end;justify-content:space-between;gap:30px}.skills-intro h2,.projects-heading h2{margin:0}.skills-intro p,.projects-heading p{line-height:1.8;color:#637366;font-size:13px;margin:0 0 6px}.strengths{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:12px 0 100px}.strengths article{padding:28px 22px 30px 0;min-height:190px}.strengths article+article{border-left:1px solid var(--line);padding-left:22px}.strengths article>span{font:italic 17px var(--serif);color:#8caa48}.strengths h3{font-size:15px;margin:32px 0 10px}.strengths p{color:#6c796d;font-size:12px;line-height:1.8;margin:0;word-break:keep-all}.tech-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.tech-heading h3{font:400 36px var(--serif);letter-spacing:-.04em;margin:0}.tech-heading>span{font-size:10px;font-weight:700;letter-spacing:.12em}.tech-row{display:grid;grid-template-columns:190px 1fr;gap:20px;border-top:1px solid var(--line);padding:17px 0}.tech-row:last-child{border-bottom:1px solid var(--line)}.tech-row h4{margin:6px 0;font-size:12px}.tech-row>div{display:flex;gap:7px;flex-wrap:wrap}.tech-row>div span{border:1px solid #c9d1bf;border-radius:30px;padding:7px 12px;font-size:11px}.projects{padding-bottom:140px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.project-card:nth-child(2){padding-top:100px}.project-image{height:auto;aspect-ratio:1.25;background:#dce5cc;color:#82917b;display:flex;align-items:center;justify-content:center;position:relative;font-size:10px;letter-spacing:.13em}.project-image.alternate{background:#eddfd5;color:#aa9188}.project-number{position:absolute;top:20px;left:22px;font:italic 19px var(--serif)}.project-meta{display:flex;justify-content:space-between;align-items:center;padding-top:18px}.project-meta h3{margin:0;font-size:15px}.project-meta span{font-size:9px;letter-spacing:.12em;color:var(--muted)}.project-card>p{color:var(--muted);font-size:12px;margin:10px 0 0}footer{background:var(--ink);color:var(--paper);padding:0 6%}footer>div{max-width:1267px;margin:auto}.footer-top{padding:22px 0;display:flex;justify-content:space-between;border-bottom:1px solid #607264}.footer-main{display:flex;justify-content:space-between;align-items:end;padding:75px 0 80px}.footer-main>div>p{color:#bfceaf;margin-bottom:28px}.footer-main h2{font:400 clamp(50px,6.5vw,88px)/1.05 var(--serif);letter-spacing:-.06em;margin:0}.footer-main h2 span{color:var(--lime)}.footer-contact>span{color:#bfceaf}.footer-contact p{font-size:13px;line-height:1.8;margin:16px 0 0;color:#d0dacb}.footer-bottom{border-top:1px solid #607264;padding:23px 0;display:flex;justify-content:space-between;color:#bfceaf}
@media(max-width:700px){.site-header{height:74px;padding:0 6%}.brand{font-size:32px}.site-header nav{gap:4px}.site-header nav a{font-size:9px;padding:6px 9px}.hero{padding:85px 6% 80px;min-height:0}.hero h1{font-size:clamp(48px,10.7vw,76px);margin:35px 0 45px}.hero-caption{display:none}.hero-bottom>p:first-child{font-size:12px}.round-link{width:45px;height:45px}.section{padding-bottom:90px}.section-heading{font-size:9px}.about-grid{grid-template-columns:1fr;gap:34px;padding-top:35px}.photo-placeholder{aspect-ratio:4/3.7}.about-copy{padding:0}.about h2,.skills h2,.projects h2{font-size:48px}.about-lead{font-size:22px}.details{margin-top:36px}.skills-intro,.projects-heading{padding:40px 0 30px;align-items:start;flex-direction:column;gap:22px}.strengths{grid-template-columns:1fr 1fr;margin-bottom:65px}.strengths article,.strengths article+article{padding:22px 16px 25px 0;min-height:165px;border-left:0}.strengths article:nth-child(even){border-left:1px solid var(--line);padding-left:18px}.strengths article:nth-child(n+3){border-top:1px solid var(--line)}.strengths h3{margin-top:20px}.tech-row{grid-template-columns:1fr;gap:8px}.tech-heading h3{font-size:31px}.project-grid{grid-template-columns:1fr;gap:42px}.project-card:nth-child(2){padding-top:0}.projects{padding-bottom:90px}.footer-main{align-items:start;flex-direction:column;gap:48px;padding:65px 0}.footer-main h2{font-size:50px}.footer-top,.footer-bottom{font-size:9px}.desktop-only{display:none}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{transition:none!important}}

/* Reference direction: expressive centred typography on a quiet white canvas. */
:root{--ink:#24242b;--muted:#77777e;--paper:#fff;--line:#dedee1;--lime:#cbded3;--serif:'Cormorant Garamond','Gowun Batang',serif}
body{background:#fff;color:var(--ink)}
.site-header{height:76px;max-width:1440px;padding:0 4.5%}
.brand{font:400 28px/1 Georgia,serif;color:#34363d}
.site-header nav{gap:6px}
.site-header nav a{font:500 12px/1 var(--serif);letter-spacing:0;padding:5px 14px;border-color:#626169}
.site-header nav a:hover{background:#292a35;color:#fff}
.hero{max-width:1200px;min-height:0;margin:auto;padding:86px 4% 140px;text-align:center}
.hero h1{font:500 clamp(48px,6.5vw,87px)/.98 var(--serif);letter-spacing:-.045em;margin:0 auto;max-width:1050px}
.hero h1 em{font-weight:400}
.flower{display:inline-block;font:400 .62em/1 Georgia,serif;vertical-align:.04em;letter-spacing:0}
.flower-one{color:#8996c5;transform:rotate(-18deg)}
.flower-two{color:#b888a7;transform:rotate(15deg)}
.capsule{display:inline-block;vertical-align:.08em;width:1.23em;height:.47em;border-radius:99px}
.capsule-one{background:#cbded3}.capsule-two{background:#efc7b8}.capsule-three{background:#ded9ed}
.hero-intro{font-family:'Gowun Batang',serif;font-size:14px;line-height:1.9;margin:42px 0 0;color:#66666d;word-break:keep-all}
.hero-scroll{display:inline-block;font-size:9px;letter-spacing:.14em;margin-top:35px;color:#77777e}
.section{max-width:1200px;padding-left:5%;padding-right:5%;padding-bottom:150px}
.section-heading{border-color:#d8d8db;font-size:10px;color:#77777e;font-weight:500;letter-spacing:.12em}
.about-grid{gap:11%;padding-top:55px;align-items:center}
.photo-placeholder{background:#e4ebe7;border-radius:14px;aspect-ratio:1/1.05;color:#84968a}
.placeholder-mark{color:#a0b3a7}
.about-copy{padding-top:0}.about h2,.skills h2,.projects h2{font-weight:500;letter-spacing:-.035em}
.about-lead{font-size:clamp(20px,2vw,26px)}
.about-description,.skills-intro p,.projects-heading p{color:#77777e}
.period{color:#9caac8}
.details{border-color:#dedee1}.details div{border-color:#dedee1}.empty-value{color:#a4a4aa}
.skills-intro,.projects-heading{padding-top:65px}
.strengths{border-color:#dedee1}.strengths article+article{border-color:#dedee1}.strengths article>span{color:#a493b6}.strengths p{color:#77777e}
.tech-row,.tech-row:last-child{border-color:#dedee1}.tech-row>div span{border-color:#dedee1}
.project-grid{gap:9%;align-items:start}.project-card:nth-child(2){padding-top:110px}
.project-image{aspect-ratio:1/1;background:#e4ebe7;border-radius:14px;color:#84968a}
.project-image.alternate{aspect-ratio:4/5;background:#eee3df;color:#ae9590}
.project-meta h3{font:500 22px var(--serif)}
footer{background:#e8e8ef;color:#292a35}footer .footer-top,footer .footer-bottom{border-color:#c7c7d0}footer .footer-main>div>p,footer .footer-contact>span,footer .footer-contact p,footer .footer-bottom{color:#666675}footer .footer-main h2 span{color:#9b8dad}
@media(max-width:700px){
 .site-header{height:64px;padding:0 5%}.brand{font-size:24px}.site-header nav a{font-size:10px;padding:5px 10px}
 .hero{padding:66px 4% 105px}.hero h1{font-size:clamp(34px,8vw,54px);line-height:1.08;margin:0 auto;letter-spacing:-.045em}
 .hero-intro{font-size:12px;margin-top:28px}.hero-scroll{margin-top:25px}
 .section{padding-bottom:105px}.about-grid{padding-top:34px;gap:30px}
 .photo-placeholder{aspect-ratio:1/1.05; width: 500px;}
 .skills-intro,.projects-heading{padding:42px 0 30px}.strengths article:nth-child(n){border-color:#dedee1}
 .project-grid{grid-template-columns:1fr 1fr;gap:8%}.project-card:nth-child(2){padding-top:65px}.project-meta{display:block;padding-top:10px}.project-meta h3{font-size:19px}.project-meta span{font-size:8px}.project-card>p{font-size:11px;line-height:1.5}
}
@media(max-width:370px){.site-header nav a{padding:5px 7px}.hero h1{font-size:33px}.hero-break{display:none}}

.brand img{display:block;width:42px;height:auto}.flower{width:.9em;height:auto;vertical-align:middle;mix-blend-mode:multiply}.flower-one,.flower-two{filter:none}@media(max-width:700px){.brand img{width:38px}}

/* Match the reference's compact opening and immediate transition to imagery. */
.hero{padding-top:42px;padding-bottom:76px}
.hero h1{font-family:'Bodoni Moda','Cormorant Garamond',serif;font-weight:400;transform:scaleX(.88)}
.hero-intro,.hero-scroll{display:none}
.flower{width:1.5em;margin:0 -.23em;vertical-align:middle}
.about>.section-heading{display:none}
.about-grid{padding-top:0}
@media(max-width:700px){.hero{padding-top:16px;padding-bottom:70px}.hero h1{font-size:clamp(34px,8.7vw,48px);line-height:1.05;transform:scaleX(.92)}.about-grid{padding-top:0}}
@media(min-width:400px) and (max-width:700px){.about-grid{grid-template-columns:1fr 1fr;gap:8%;align-items:start}.about h2{font-size:34px;margin-bottom:20px}.about-lead{font-size:17px}.about-description{font-size:12px}.details{margin-top:22px}.details div{grid-template-columns:1fr;gap:6px;padding:10px 0}}

@media(max-width:700px){.hero h1{font-size:clamp(25px,7vw,40px);transform:none;letter-spacing:-.055em}}

.flower{width:2em;margin:0 -.48em}

/* Plain, concise copy and three editable project slots. */
.site-header{justify-content:flex-end}
.hero h1{font-family:'Gowun Batang',serif;font-size:clamp(32px,4vw,56px);line-height:1.5;letter-spacing:-.045em;transform:none}
.about h2,.skills h2,.projects h2,.footer-main h2{font-family:'Gowun Batang',serif;font-size:clamp(30px,3vw,42px);font-weight:400;letter-spacing:-.04em}
.about-description{font-size:15px;line-height:1.9}
.skills-intro,.projects-heading{padding-top:0}
.tech-heading h3{font-family:'Gowun Batang',serif;font-size:27px;letter-spacing:-.04em}
.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4%}
.project-card:nth-child(2){padding-top:70px}
.project-card:nth-child(3){padding-top:0}
.project-image.third{background:#e8e5ed;color:#958da1;aspect-ratio:1/1}
.project-meta h3{font:500 16px 'Gowun Batang',serif}
.footer-main{padding:65px 0}
.footer-main h2{margin:0}
@media(max-width:700px){.hero h1{font-size:clamp(25px,6vw,34px);line-height:1.55;letter-spacing:-.04em}.about h2,.skills h2,.projects h2,.footer-main h2{font-size:30px}.skills-intro,.projects-heading{padding-top:0}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 8%}.project-card:nth-child(2){padding-top:50px}.project-card:nth-child(3){padding-top:0}.project-meta h3{font-size:15px}}
@media(max-width:370px){.project-grid{grid-template-columns:1fr;gap:40px}.project-card:nth-child(2){padding-top:0}}

/* A light, moving composition around the introduction. */
.hero{max-width:none;padding:0 4% 65px;overflow:hidden}
.hero-stage{position:relative;isolation:isolate;display:grid;place-items:center;min-height:470px;max-width:1100px;margin:auto}
.hero-graphics{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero h1{position:relative;font-size:clamp(38px,5.2vw,70px);line-height:1.45;letter-spacing:-.06em}
.hero h1 span{display:block;animation:headline-enter .95s cubic-bezier(.2,.75,.2,1) both}
.hero h1 span+span{animation-delay:.16s}
.orbit{position:absolute;left:50%;top:50%;width:min(72vw,760px);height:min(27vw,285px);border:1px solid #a7b7d0;border-radius:50%;opacity:.75}
.orbit-one{animation:orbit-one 14s ease-in-out infinite alternate}
.orbit-two{width:min(63vw,660px);height:min(31vw,320px);border-color:#c7b0c5;animation:orbit-two 17s ease-in-out infinite alternate}
.shape-orbit{position:absolute;inset:2% 8%;animation:objects-orbit 34s linear infinite}
.motion-shape{position:absolute;display:block;animation:shape-float 5s ease-in-out infinite alternate}
.shape-one{width:clamp(50px,7.5vw,102px);aspect-ratio:1;border-radius:50%;background:#cde2d7;top:16%;left:15%}
.shape-two{width:clamp(66px,10vw,130px);height:clamp(25px,3.8vw,48px);border-radius:99px;background:#e9c7b9;top:22%;right:13%;animation-delay:-2s;transform:rotate(-20deg)}
.shape-three{width:clamp(38px,5.5vw,70px);aspect-ratio:1;border-radius:32%;background:#d7d0e6;bottom:10%;right:24%;animation-delay:-3.5s}
.motion-reveal{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.motion-ready .motion-reveal:not(.is-visible){opacity:0;transform:translateY(36px)}
.project-image{transition:transform .55s cubic-bezier(.2,.7,.2,1),border-radius .55s ease,box-shadow .55s ease}
@media(hover:hover){.project-card:hover .project-image{transform:translateY(-9px) rotate(-1deg);border-radius:24px;box-shadow:0 22px 45px rgba(40,40,50,.09)}.project-card:nth-child(2):hover .project-image{transform:translateY(-9px) rotate(1deg)}}
@keyframes headline-enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes orbit-one{from{transform:translate(-50%,-50%) rotate(-11deg)}to{transform:translate(-50%,-50%) rotate(10deg)}}
@keyframes orbit-two{from{transform:translate(-50%,-50%) rotate(14deg)}to{transform:translate(-50%,-50%) rotate(-12deg)}}
@keyframes objects-orbit{to{transform:rotate(360deg)}}
@keyframes shape-float{from{translate:0 -10px;rotate:-8deg}to{translate:0 12px;rotate:12deg}}
@media(max-width:700px){.hero{padding:0 4% 50px}.hero-stage{min-height:330px}.hero h1{font-size:clamp(27px,6.2vw,40px);line-height:1.5}.orbit{width:90vw;height:43vw}.orbit-two{width:80vw;height:50vw}.shape-one{left:5%;top:15%}.shape-two{right:4%;top:19%}.shape-three{right:17%;bottom:12%}}
@media(prefers-reduced-motion:reduce){.hero h1 span,.orbit,.shape-orbit,.motion-shape{animation:none!important}.motion-ready .motion-reveal:not(.is-visible){opacity:1;transform:none}.motion-reveal,.project-image{transition:none!important}:root{scroll-behavior:auto}}

@media(prefers-reduced-motion:reduce){.orbit-one{transform:translate(-50%,-50%) rotate(-11deg)}.orbit-two{transform:translate(-50%,-50%) rotate(14deg)}}

.hero-stage{min-height:260px}@media(max-width:700px){.hero-stage{min-height:220px}}

/* Intro and scroll transitions inspired by the reference's restrained motion. */
.hero-stage{display:flex;flex-direction:column;justify-content:center;min-height:390px}
.hero h1{font-family:'DM Sans','Malgun Gothic',sans-serif;font-size:clamp(30px,3.6vw,50px);font-weight:400;line-height:1.55;letter-spacing:-.05em;animation:intro-arrive 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span,.hero h1 span+span{animation:none}
.hero-emphasis{position:relative;display:inline-block;font-weight:700}
.hero-emphasis::after{content:'';position:absolute;left:0;right:0;bottom:.09em;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;animation:underline-draw 1.4s .9s ease forwards}
.scroll-cue{display:grid;place-items:center;width:48px;height:48px;margin-top:28px;animation:cue-bounce 1s ease-in-out infinite alternate}
.scroll-cue span{width:18px;height:18px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-4px) rotate(45deg)}
.motion-reveal{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.about-copy{transition-delay:.12s}
.strengths article:nth-child(2),.project-card:nth-child(2){transition-delay:.1s}
.strengths article:nth-child(3),.project-card:nth-child(3){transition-delay:.2s}
.strengths article:nth-child(4){transition-delay:.3s}
@keyframes intro-arrive{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes underline-draw{to{transform:scaleX(1)}}
@keyframes cue-bounce{from{transform:translateY(0)}to{transform:translateY(8px)}}
@media(max-width:700px){.hero-stage{min-height:310px}.hero h1{font-size:clamp(25px,6vw,34px);line-height:1.55}.scroll-cue{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.hero h1,.hero-emphasis::after,.scroll-cue{animation:none!important}.hero-emphasis::after{transform:scaleX(1)}.motion-reveal{transition:none!important}}

/* Reference navigation, contact and requested pink palette. */
:root{--page:#FFF6FA;--pink-main:#F0458F;--pink-deep:#C8246E;--pink-soft:#FFC4DE;--blue-soft:#8ECDF2;--yellow-soft:#F7E36B}
body{background:var(--page);color:#302a30}
.site-header{position:fixed;z-index:50;top:0;left:0;width:100%;max-width:none;height:72px;margin:0;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;background:rgba(255,196,222,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-logo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none}
.site-logo img{display:block;width:34px;height:34px;filter:drop-shadow(0 1px 1px rgba(93,51,70,.6))}
.site-header nav{display:flex;gap:clamp(10px,2.6vw,38px);position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.site-header nav a{border:0;border-radius:0;padding:7px 0;color:#49353e;font:600 12px/1 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.02em;transition:color .2s}
.site-header nav a:hover{background:transparent;color:var(--pink-deep)}
main{padding-top:72px}
.hero-stage{min-height:390px}
.hero h1{font-size:clamp(26px,3vw,42px);line-height:1.65;word-break:keep-all}
.hero-emphasis::after{background:var(--pink-main)}
.scroll-cue{color:var(--pink-deep)}
.section,#contact{scroll-margin-top:92px}
.photo-placeholder{background:#FCE3EE;color:#A4758B}
.project-image{background:#FCE3EE;color:#A4758B}.project-image.alternate{background:#E3F3FC;color:#7398AE}.project-image.third{background:#FCF3CC;color:#9B9053}
.contact-section{background:var(--page);padding:35px 6% 115px;color:#34313a;text-align:center}
.contact-heading{position:relative;display:grid;place-items:center;padding:18px 0 4px;font-family:'DM Sans',sans-serif}
.contact-heading>span{position:absolute;top:0;color:rgba(200,36,110,.055);font-size:clamp(52px,6vw,78px);line-height:1;font-weight:700;letter-spacing:-.05em;pointer-events:none}
.contact-heading h2{position:relative;margin:0;font-size:clamp(31px,3.4vw,43px);font-weight:700;letter-spacing:-.05em}
.contact-grid{max-width:850px;margin:78px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.contact-item{padding:0 30px;font-family:'DM Sans','Malgun Gothic',sans-serif}
.contact-item+.contact-item{border-left:1px solid #e8dce2}
.contact-icon{display:block;width:36px;height:36px;margin:0 auto 16px;color:var(--pink-main)}
.contact-item h3{font-size:24px;margin:0 0 18px;font-weight:600;letter-spacing:-.04em}
.contact-item a{font-size:15px;color:#554c54;overflow-wrap:anywhere}
.contact-item a:hover{color:var(--pink-deep);text-decoration:underline}
.site-footer{position:relative;display:flex;align-items:center;justify-content:center;min-height:78px;padding:20px 80px;background:var(--pink-soft);color:#3d3037;font-family:'DM Sans','Malgun Gothic',sans-serif;text-align:center}
.site-footer p{margin:0;font-size:14px}
.back-to-top{position:fixed;z-index:51;right:24px;bottom:24px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--pink-main);color:#fff;font-size:23px;line-height:1;box-shadow:0 3px 12px rgba(93,51,70,.18)}
.back-to-top:hover{background:var(--pink-deep)}
@media(max-width:700px){
 .site-header{height:64px;padding:0 4%}.site-logo{width:36px;height:40px}.site-logo img{width:29px;height:29px}.site-header nav{position:static;transform:none;gap:clamp(10px,3vw,18px)}.site-header nav a{font-size:10px;padding:6px 0}
 main{padding-top:64px}.hero-stage{min-height:310px}.hero h1{font-size:clamp(22px,5.5vw,31px);line-height:1.65}.hero h1 span{word-break:keep-all}
 .section,#contact{scroll-margin-top:80px}.contact-section{padding:25px 5% 80px}.contact-grid{margin-top:55px}.contact-item{padding:0 10px}.contact-item h3{font-size:20px}.contact-item a{font-size:12px}.contact-icon{width:31px;height:31px}.site-footer{min-height:70px;padding:20px 58px;font-size:12px}.site-footer p{font-size:12px}.back-to-top{right:16px;bottom:16px;width:40px;height:40px}
}
@media(max-width:350px){.site-header nav{gap:8px}.site-header nav a{font-size:9px}.contact-grid{grid-template-columns:1fr;gap:35px}.contact-item+.contact-item{border-left:0;border-top:1px solid #e8dce2;padding-top:35px}}

.project-image{background:var(--pink-soft);color:#654054}.project-image.alternate{background:var(--blue-soft);color:#315469}.project-image.third{background:var(--yellow-soft);color:#64581d}

.hero h1 .hero-name{display:inline-block;white-space:nowrap}

.site-logo{width:54px;height:54px}.site-logo img{width:48px;height:48px}@media(max-width:700px){.site-logo{width:48px;height:48px}.site-logo img{width:43px;height:43px}}

:root{--page:#fff}

/* Restored skills content without a visible section title. */
.tech-heading h2{font:400 27px 'Gowun Batang',serif;letter-spacing:-.04em;margin:0}.tech-row h3{margin:6px 0;font:700 12px var(--sans)}
@media(max-width:700px){.site-header nav{gap:clamp(6px,2vw,12px)}.site-header nav a{font-size:9px}}
@media(max-width:350px){.site-header nav{gap:5px}.site-header nav a{font-size:8px}.site-logo{width:42px}.site-logo img{width:39px;height:39px}}

/* Warm charcoal navigation with a rose active state. */
.site-header{background:#28252B;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-logo img{filter:none}
.site-header nav a{position:relative;color:#CFC8CF}
.site-header nav a:hover,.site-header nav a[aria-current="location"]{color:#F7A8C8}
.site-header nav a[aria-current="location"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#F7A8C8}
.site-header nav a:focus-visible{outline-color:#F7A8C8}

/* Match the footer to the charcoal navigation. */
.site-footer{background:#28252B;color:#CFC8CF}.back-to-top{background:#F7A8C8;color:#28252B}.back-to-top:hover{background:#f9bfd6}

/* Selected project and contact layout. */
.projects{padding-bottom:140px}
.projects-heading{padding:0;display:block;margin:0 0 38px}
.projects .projects-heading h2,.contact-heading h2{margin:0;font:700 11px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.16em;color:#29252d}
.projects-heading::after,.contact-heading::after{content:"";display:block;width:25px;height:2px;margin-top:12px;background:#F0458F}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.project-card:nth-child(n){padding-top:0}
.project-card .project-image,.project-card .project-image.alternate,.project-card .project-image.third{aspect-ratio:1.53;border-radius:0}
.project-card .project-image{background:#F7D3E0}
.project-card .project-image.alternate{background:#DFEAF8}
.project-card .project-image.third{background:#FDECB2}
.project-meta{display:flex;justify-content:space-between;align-items:center;padding-top:15px}
.project-meta h3{margin:0;font:600 13px/1.4 'DM Sans','Malgun Gothic',sans-serif;color:#302b31}
.project-meta span{color:#302b31;font:400 20px/1 'DM Sans',sans-serif;letter-spacing:0}
.contact-section{background:#F6F6F7;padding:75px 6%;text-align:left}
.contact-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;align-items:center;gap:35px}
.contact-heading{position:static;display:block;padding:0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;max-width:none;width:100%;margin:0}
.contact-item,.contact-item+.contact-item{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;padding:0 20px;border-left:1px solid #dedee1;font-family:'DM Sans','Malgun Gothic',sans-serif}
.contact-icon-circle{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#F7A8C8;color:#fff}
.contact-icon{display:block;width:19px;height:19px;margin:0;color:inherit}
.contact-item a{font-size:13px;color:#423b43;overflow-wrap:anywhere}
@media(max-width:700px){.projects{padding-bottom:85px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}.project-card:nth-child(n){padding:0}.project-meta{display:flex}.contact-section{padding:60px 6%}.contact-inner{grid-template-columns:1fr;gap:32px}.contact-grid{margin:0}.contact-item,.contact-item+.contact-item{justify-content:flex-start;padding:0 15px}.contact-item:first-child{padding-left:0;border-left:0}.contact-item a{font-size:12px}.contact-icon-circle{width:34px;height:34px}.contact-icon{width:17px;height:17px}}
@media(max-width:470px){.project-grid{grid-template-columns:1fr;gap:30px}.contact-grid{grid-template-columns:1fr;gap:20px}.contact-item,.contact-item+.contact-item{padding:0;border:0}.contact-item+.contact-item{padding:0;border:0}.contact-item a{font-size:13px}}

/* Soft ink wash behind the emphasized name. */
.hero-emphasis{isolation:isolate}
.hero-emphasis::after{left:-.12em;right:-.12em;bottom:-.08em;height:1.15em;z-index:-1;background:transparent url('assets/ink-highlight.png') center / 100% 100% no-repeat;opacity:.8}

/* Soft, organic color shapes behind the name. */
.hero-emphasis::after{content:none}
.hero h1 .hero-blobs{position:absolute;z-index:-1;inset:-.04em -.10em;display:block;pointer-events:none}
.hero-blobs i{position:absolute;display:block;top:5%;width:42%;height:90%;opacity:.58;animation:blob-arrive .8s .9s both}
.hero-blobs i:nth-child(1){left:0;background:#F7E36B;border-radius:51% 49% 64% 36% / 58% 40% 60% 42%;transform:rotate(-5deg)}
.hero-blobs i:nth-child(2){left:29%;background:#8ECDF2;border-radius:42% 58% 37% 63% / 47% 63% 37% 53%;transform:rotate(4deg);animation-delay:1s}
.hero-blobs i:nth-child(3){right:0;background:#F0458F;border-radius:62% 38% 55% 45% / 43% 58% 42% 57%;transform:rotate(-4deg);animation-delay:1.1s;opacity:.35}
@keyframes blob-arrive{from{opacity:0;scale:.85}to{scale:1}}
@media(prefers-reduced-motion:reduce){.hero-blobs i{animation:none!important}}

/* Align the contact heading and underline with the left content edge. */
.contact-heading{position:relative;top:-6px;display:flex;flex-direction:column;align-items:flex-start}.contact-heading h2{position:static}

/* A single flat, organic color shape behind the emphasized text. */
.hero-blob{position:absolute;z-index:-1;left:-.16em;top:-.13em;width:calc(100% + .32em);height:1.25em;fill:#F0458F;opacity:.22;pointer-events:none;animation:hero-blob-reveal .7s .9s both}
@keyframes hero-blob-reveal{from{opacity:0;transform:scale(.9)}to{opacity:.22;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hero-blob{animation:none}}

/* Move only the CONTACT label slightly up and left within its original column. */
.contact-heading{left:-12px;top:-6px;align-items:center}
@media(max-width:700px){.contact-heading{left:0;align-items:flex-start}}

/* 1. 이미지 박스를 감싸는 Grid 레이아웃 설정 (예시) */
.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr; /* [사진 영역 너비] [글 영역 너비] */
  gap: 32px; /* 사진과 글 사이 간격 */
  align-items: start;
}

/* 2. 사진 들어가는 영역 (.photo-placeholder) */
.photo-placeholder {
  position: relative;
  width: 100%;             /* 그리드 칸(280px)에 가득 차게 설정 */
  aspect-ratio: 3 / 4;     /* ⭐ 핵심: 세로 비율을 지정해줍니다 (예: 3:4 비율 프로필 사진) */
  border-radius: 12px;     /* (선택) 모서리 라운딩 */
  overflow: hidden;
  background-color: #f1f3f5; /* 이미지 로딩 전 배경색 */
}

/* 3. 이미지 자체 설정 */
.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 비율 깨짐 없이 꽉 채우기 */
  display: block;
}

/* 4. '사진' 글자 안 보이게 숨기기 */
.photo-placeholder span {
  display: none;
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 32px;
}

@media(max-width:700px){.about-grid{grid-template-columns:minmax(0,1fr)}}

.photo-placeholder {
  width: 100% !important; /* 부모 그리드 칸 크기에 완전히 맞춤 */
  aspect-ratio: 6 / 6.3;  /* 원하시는 비율 유지 */
}
/* Hero highlight, square profile, and matching section alignment. */
.hero-blob{opacity:.38}
@keyframes hero-blob-reveal{from{opacity:0;transform:scale(.9)}to{opacity:.38;transform:scale(1)}}

.hero h1{font-family:'감다살체','Nanum Gothic',sans-serif}
.hero h1 > span{transform:scaleX(.88);transform-origin:center}
.contact-section{padding-left:5%;padding-right:5%}
.contact-inner{max-width:calc(1200px - 10vw);margin-inline:auto}
.contact-heading{left:0;top:0;align-items:flex-start}
.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.contact-item,.contact-item+.contact-item{justify-content:center}
@media(max-width:700px){.contact-inner{max-width:none}.contact-heading{align-items:flex-start}.contact-item,.contact-item+.contact-item{justify-content:flex-start}}

@media(max-width:470px){.contact-grid{grid-template-columns:1fr;gap:20px}.contact-item,.contact-item+.contact-item{justify-content:flex-start}}

/* Align the contact items with the project columns. */
.contact-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.contact-heading{top:-6px}
.contact-grid{display:contents}
.contact-item,.contact-item+.contact-item{justify-content:flex-start;padding:0;border:0}
@media(max-width:700px){
  .contact-inner{grid-template-columns:1fr;gap:32px}
  .contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media(max-width:470px){.contact-grid{grid-template-columns:1fr;gap:20px}}



/* GitHub profile link in the introduction. */
.details .github-link{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:7px 13px;border:1px solid #dedee1;border-radius:999px;color:#28252b;font-size:13px;font-weight:600;line-height:1;transition:background .2s,border-color .2s}
.details .github-link:hover{background:#fce3ee;border-color:#f7a8c8}
.details .github-link svg{width:18px;height:18px;flex:none}

@media (max-width: 700px) {
  .site-header { justify-content: center; }
}