:root { --paper:#f7f5ef; --surface:#fffdf8; --ink:#1d2324; --muted:#657071; --line:rgba(29,35,36,.16); --blue:#315c79; --blue-soft:#e6eef0; --sage:#e9eee9; --sand:#f5eee5; --serif:"Iowan Old Style", "Palatino Linotype", "Noto Serif KR", serif; --sans:"Manrope", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.65; overflow-x:hidden; word-break:keep-all; }
a { color:inherit; text-decoration:none; } button { font:inherit; } img { display:block; width:100%; }
.skip-link { position:fixed; z-index:20; top:-5rem; left:1rem; padding:.65rem 1rem; background:var(--ink); color:#fff; }.skip-link:focus { top:1rem; }
.shell { width:min(1180px, calc(100% - 48px)); margin:0 auto; }
.site-header { border-bottom:1px solid var(--line); background:rgba(247,245,239,.92); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; }
.nav-wrap { min-height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; }
.wordmark { font-size:.82rem; font-weight:800; letter-spacing:.1em; }.wordmark small { color:var(--muted); display:block; font-size:.6rem; font-weight:600; letter-spacing:.13em; }
nav { display:flex; gap:1.5rem; font-size:.8rem; font-weight:700; } nav a { border-bottom:1px solid transparent; padding:.35rem 0; } nav a:hover { border-color:var(--blue); color:var(--blue); }
.language-switch { display:flex; justify-content:flex-end; align-items:center; gap:.4rem; color:var(--muted); font-family:ui-monospace, monospace; font-size:.72rem; }.language-switch button { cursor:pointer; border:0; color:inherit; background:transparent; padding:.25rem; }.language-switch button[aria-pressed="true"] { color:var(--blue); font-weight:800; }.language-switch i { font-style:normal; }
.hero { padding:clamp(5rem, 11vw, 9.5rem) 0 5rem; display:grid; grid-template-columns:1.05fr .95fr; column-gap:clamp(2rem, 7vw, 6.5rem); align-items:end; }.kicker { margin:0 0 .85rem; color:var(--blue); font-family:ui-monospace, monospace; font-size:.7rem; font-weight:700; letter-spacing:.14em; line-height:1.5; }
.hero h1,.statement h2,.section-intro h2,.method-grid h2,.contact-copy h2 { margin:.85rem 0 1.5rem; font-family:var(--serif); font-size:clamp(3rem, 6vw, 5.6rem); font-weight:400; letter-spacing:-.055em; line-height:.95; }.hero-lead { max-width:35rem; margin:0; color:#465052; font-size:clamp(1rem, 1.5vw, 1.2rem); }
:lang(ko) .statement h2,:lang(ko) .section-intro h2,:lang(ko) .method-grid h2,:lang(ko) .contact-copy h2 { letter-spacing:-.015em; line-height:1.14; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem; margin-top:2.2rem; }.button { display:inline-flex; align-items:center; gap:.6rem; border:1px solid var(--ink); border-radius:4px; background:var(--ink); color:#fff; padding:.76rem 1rem; font-size:.8rem; font-weight:800; line-height:1.2; transition:transform .18s ease, background .18s ease; }.button:hover { background:#394244; transform:translateY(-1px); }.quiet-link { display:inline-flex; gap:.55rem; align-items:center; font-size:.82rem; font-weight:800; border-bottom:1px solid var(--ink); padding:.48rem 0; }.quiet-link:hover { color:var(--blue); border-color:var(--blue); }
.hero-figure { margin:0; border:1px solid var(--line); background:var(--surface); padding:.7rem; }.hero-figure img { aspect-ratio:4/3; object-fit:cover; filter:saturate(.72) contrast(1.04); }.hero-figure figcaption,.method-grid figcaption { margin-top:.72rem; color:var(--muted); font-family:ui-monospace, monospace; font-size:.62rem; letter-spacing:.08em; }.hero-index { grid-column:1/-1; display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); margin-top:4.6rem; padding-top:.75rem; color:var(--muted); font-family:ui-monospace, monospace; font-size:.66rem; letter-spacing:.07em; }
.statement { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); padding:clamp(4.5rem, 9vw, 8rem) 0; }.statement-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem, 10vw, 10rem); }.statement h2 { font-size:clamp(2.65rem, 5vw, 4.75rem); max-width:46rem; }.statement-side > p { font-size:1.08rem; margin:.55rem 0 2.75rem; color:#465052; }.statement dl { border-top:1px solid var(--line); margin:0; }.statement dl div { display:grid; grid-template-columns:7rem 1fr; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); }.statement dt { color:var(--muted); font-family:ui-monospace, monospace; font-size:.68rem; letter-spacing:.1em; }.statement dd { margin:0; font-size:.84rem; font-weight:700; }
.research-section,.projects-section,.publications-section { padding:clamp(5.5rem, 11vw, 9.5rem) 0; }.section-intro { display:grid; grid-template-columns:1.1fr .6fr; gap:3rem; align-items:end; margin-bottom:3.5rem; }.section-intro h2 { font-size:clamp(2.5rem, 4.7vw, 4.5rem); margin-bottom:0; }.section-intro > p:last-child { margin:0 0 .5rem; color:var(--muted); max-width:31rem; }
.research-grid { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); }.research-card { padding:1.25rem 1.25rem 1.8rem; border-right:1px solid var(--line); }.research-card:first-child { border-left:1px solid var(--line); }.research-card img { border:1px solid var(--line); aspect-ratio:1.22; object-fit:cover; margin:1rem 0 1.5rem; }.card-folio { display:flex; justify-content:space-between; color:var(--muted); font-family:ui-monospace, monospace; font-size:.65rem; letter-spacing:.09em; }.research-card h3,.project h3,.publication h3,.talk-list h3 { margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.025em; line-height:1.15; }.research-card h3 { font-size:1.65rem; }.research-card > p { color:var(--muted); font-size:.9rem; }
.tags { display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; margin:1.1rem 0 0; padding:0; }.tags li { background:var(--blue-soft); color:#294b63; border-radius:999px; font-size:.63rem; font-weight:800; letter-spacing:.03em; padding:.22rem .5rem; }
.method-section { background:var(--sage); padding:clamp(5rem, 10vw, 8.5rem) 0; }.method-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem, 9vw, 8rem); align-items:center; }.method-grid figure { margin:0; }.method-grid figure img { aspect-ratio:4/3; border:1px solid rgba(29,35,36,.2); object-fit:cover; filter:saturate(.6); }.method-grid h2 { font-size:clamp(2.5rem, 4.5vw, 4.15rem); }.method-grid > div > p:not(.kicker) { color:#465052; max-width:35rem; }.method-points { display:flex; flex-wrap:wrap; gap:.55rem 1.2rem; margin-top:2rem; border-top:1px solid rgba(29,35,36,.18); padding-top:1rem; color:var(--blue); font-family:ui-monospace, monospace; font-size:.68rem; font-weight:700; letter-spacing:.06em; }
.projects-section { background:var(--surface); }.project-list { border-top:1px solid var(--line); }.project { display:grid; grid-template-columns:260px 1fr 150px; gap:clamp(1.4rem, 4vw, 4rem); align-items:center; padding:1.2rem 0; border-bottom:1px solid var(--line); }.project-media img { aspect-ratio:1.35; object-fit:cover; border:1px solid var(--line); }.project-copy h3 { font-size:clamp(1.65rem, 3vw, 2.45rem); }.project-code { margin:0 0 .55rem; color:var(--blue); font-family:ui-monospace, monospace; font-size:.67rem; font-weight:700; letter-spacing:.06em; }.project-copy > p:not(.project-code) { margin:.6rem 0; color:var(--muted); font-size:.9rem; }.project-result { border-left:1px solid var(--line); padding-left:1rem; }.project-result strong { display:block; font-family:var(--serif); font-size:2rem; font-weight:400; letter-spacing:-.05em; line-height:1; }.project-result span { display:block; color:var(--muted); font-size:.72rem; line-height:1.45; margin-top:.45rem; }
.publications-section { background:var(--paper); }.publication-list { border-top:1px solid var(--line); }.publication { display:grid; grid-template-columns:4rem 1fr 62px; gap:1rem; align-items:center; border-bottom:1px solid var(--line); padding:1.2rem 0; }.publication-number { color:var(--blue); font-family:ui-monospace, monospace; font-size:.75rem; }.publication-main p { margin:0 0 .25rem; color:var(--muted); font-family:ui-monospace, monospace; font-size:.65rem; letter-spacing:.06em; }.publication h3 { font-size:1.18rem; }.publication-main > span { color:var(--muted); display:block; font-size:.78rem; margin-top:.35rem; }.publication-cover { width:62px; aspect-ratio:210/297; object-fit:cover; border:1px solid var(--line); }.talk-list { margin-top:4.5rem; border-top:1px solid var(--line); }.talk-list > .kicker { padding-top:1.1rem; }.talk-list article { display:grid; grid-template-columns:4rem 1fr auto; gap:1rem; align-items:start; border-bottom:1px solid var(--line); padding:1.1rem 0; }.talk-list article > span,.talk-list em { color:var(--muted); font-family:ui-monospace, monospace; font-size:.68rem; font-style:normal; }.talk-list article p { color:var(--muted); font-size:.8rem; margin:.35rem 0 0; }
.contact-section { background:var(--ink); color:#f7f5ef; padding:clamp(4rem, 9vw, 7.5rem) 0; }.collaboration-figure { margin:0 0 4rem; border:1px solid rgba(217,230,225,.3); }.collaboration-figure img { aspect-ratio:2.57; object-fit:cover; }.contact-copy { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; }.contact-copy h2 { font-size:clamp(2.5rem, 4.5vw, 4.5rem); margin-bottom:0; }.contact-copy > p { color:#c9d4d1; max-width:35rem; }.contact-copy > div { display:flex; flex-wrap:wrap; gap:1rem; }.contact-section .button { border-color:#e5ece8; background:#e5ece8; color:var(--ink); }.contact-section .quiet-link { border-color:#d9e6e1; color:#f7f5ef; }
footer { border-top:1px solid rgba(217,230,225,.28); background:var(--ink); color:#bfcac6; }.footer-inner { display:flex; justify-content:space-between; gap:1rem; padding:1.4rem 0; font-family:ui-monospace, monospace; font-size:.62rem; letter-spacing:.06em; }.footer-inner a { color:#f7f5ef; }.photo-credits { border-top:1px solid rgba(217,230,225,.18); color:#bfcac6; font-size:.68rem; padding:.8rem 0 1.4rem; }.photo-credits summary { cursor:pointer; font-family:ui-monospace, monospace; letter-spacing:.06em; }.photo-credits ul { margin:.7rem 0 0; padding-left:1rem; }.photo-credits li { margin:.25rem 0; }
.reveal { opacity:0; transform:translateY(12px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }.reveal.is-visible { opacity:1; transform:none; }
:focus-visible { outline:3px solid #5d92b0; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:800px) { .shell { width:min(100% - 32px, 1180px); }.nav-wrap { grid-template-columns:1fr auto; }.nav-wrap nav { display:none; }.hero,.statement-grid,.method-grid,.contact-copy { grid-template-columns:1fr; }.hero { padding-top:4rem; }.hero-figure { margin-top:1rem; }.hero-index { margin-top:3rem; flex-direction:column; }.section-intro { grid-template-columns:1fr; gap:1rem; }.research-grid { grid-template-columns:1fr; }.research-card,.research-card:first-child { border-left:1px solid var(--line); border-bottom:1px solid var(--line); }.research-card:last-child { border-bottom:0; }.project { grid-template-columns:140px 1fr; gap:1rem; }.project-result { grid-column:2; border-left:0; border-top:1px solid var(--line); padding:1rem 0 0; display:flex; gap:1rem; align-items:baseline; }.project-result span { margin:0; }.contact-copy > p { grid-column:1; }.footer-inner { flex-direction:column; }.talk-list article { grid-template-columns:3.25rem 1fr; }.talk-list em { display:none; } }
@media (max-width:520px) { body { font-size:15px; }.site-header { position:relative; }.hero h1 { font-size:3.1rem; }.statement h2,.section-intro h2,.method-grid h2,.contact-copy h2 { font-size:clamp(2.2rem, 10vw, 3.1rem); letter-spacing:-.01em; line-height:1.14; }.project { grid-template-columns:1fr; }.project-media img { max-height:230px; }.project-result { grid-column:auto; }.publication { grid-template-columns:2.4rem 1fr 46px; }.publication-cover { width:46px; }.statement dl div { grid-template-columns:5.3rem 1fr; } }
 .publication-status { align-self:center; color:var(--blue); font-family:ui-monospace, monospace; font-size:.58rem; font-weight:800; letter-spacing:.08em; text-align:right; }