:root {
  --ink: #121925;
  --ink-soft: #202a3a;
  --paper: #f4f1eb;
  --paper-deep: #eae5dc;
  --copper: #c86d45;
  --copper-light: #e69a6d;
  --sky: #8ca6c5;
  --muted: #74777d;
  --line: rgba(18, 25, 37, 0.15);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.noise { pointer-events: none; position: fixed; inset: 0; z-index: 10; opacity: 0.03; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.site-header { align-items: center; color: #fff; display: flex; height: 84px; justify-content: space-between; left: 0; padding: 0 5vw; position: absolute; top: 0; width: 100%; z-index: 3; }
.brand { color: inherit; font: 500 24px var(--mono); text-decoration: none; }
.brand span, .status, .panel-number b { color: var(--copper-light); }
nav { display: flex; gap: 28px; }
nav a, .header-contact { color: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.header-contact { border-bottom: 1px solid rgba(255, 255, 255, .5); padding: 7px 0; }
.header-contact i { font-size: 10px; margin-left: 5px; }

.hero { align-items: center; background: var(--ink); color: #fff; display: flex; min-height: 100svh; overflow: hidden; padding: 150px 9vw 110px; position: relative; }
.hero::after { background: url("assets/images/hero-bg-abstract.webp") center / cover; content: ""; filter: saturate(.5); height: 56vw; mask-image: radial-gradient(ellipse, black 10%, transparent 70%); mix-blend-mode: screen; opacity: .25; position: absolute; right: -15vw; top: 10vh; width: 56vw; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { color: var(--muted); font: 500 11px var(--mono); letter-spacing: .12em; margin-bottom: 23px; }
.hero .eyebrow { color: #c6c5c4; }
.eyebrow span:first-child { background: var(--copper-light); display: inline-block; height: 1px; margin-right: 9px; vertical-align: middle; width: 26px; }
h1, h2, h3 { letter-spacing: -.065em; }
h1 { font-size: clamp(50px, 7.4vw, 116px); font-weight: 800; line-height: .98; }
h1 em, h2 em { color: var(--copper-light); font-style: normal; }
.hero-description { color: #c4c6ca; font-size: 16px; line-height: 1.8; margin: 32px 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { align-items: center; display: inline-flex; font-size: 13px; font-weight: 800; gap: 20px; padding: 15px 20px; text-decoration: none; transition: transform .25s; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--copper-light); color: var(--ink); }
.button-quiet { border: 1px solid #667081; color: #fff; }
.hero-panel { backdrop-filter: blur(12px); background: rgba(18, 25, 37, .65); border: 1px solid rgba(255, 255, 255, .22); bottom: 12vh; padding: 15px; position: absolute; right: 9vw; width: 235px; z-index: 1; }
.panel-top, .panel-bottom { color: #c5c6c9; display: flex; font: 10px var(--mono); justify-content: space-between; letter-spacing: .07em; }
.status i { background: var(--copper-light); border-radius: 100%; display: inline-block; height: 6px; margin-right: 5px; width: 6px; }
.panel-number { font-size: 48px; font-weight: 800; letter-spacing: -.08em; line-height: .83; padding: 30px 0; }
.panel-bottom { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 12px; }
.scroll-cue { align-items: center; bottom: 36px; color: #aaa; display: flex; font: 10px var(--mono); gap: 11px; left: 5vw; letter-spacing: .09em; position: absolute; text-decoration: none; z-index: 1; }
.scroll-cue i { color: var(--copper-light); }

.section { padding: 150px 8vw; }
.projects, .research, .skills { margin: auto; max-width: 1500px; }
.research { background: var(--paper-deep); }
.experience { background: var(--paper-deep); }
.section-heading { margin-bottom: 66px; max-width: 700px; }
.section-heading .eyebrow { display: flex; justify-content: space-between; }
.section-heading h2, .profile h2, .contact h2 { font-size: clamp(43px, 5.2vw, 78px); line-height: 1; max-width: 700px; }
.section-heading > p:last-child { color: #666; font-size: 15px; line-height: 1.8; margin-top: 23px; }

.experience-grid { border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); }
.experience-grid article { border-right: 1px solid var(--line); min-height: 285px; padding: 28px 28px 28px 0; }
.experience-grid article:not(:first-child) { padding-left: 28px; }
.experience-grid article:last-child { border-right: 0; }
.experience-grid span { color: var(--copper); font: 11px var(--mono); letter-spacing: .1em; }
.experience-grid h3 { font-size: 27px; line-height: 1.1; margin: 68px 0 14px; }
.experience-grid p { color: #62666d; font-size: 14px; line-height: 1.8; max-width: 330px; }

.research-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.research-card { background: var(--ink); color: #fff; display: flex; flex-direction: column; min-height: 390px; padding: 26px; text-decoration: none; transition: background .25s, transform .25s; }
.research-card:hover { background: var(--ink-soft); transform: translateY(-7px); }
.research-no, .research-link { color: var(--copper-light); font: 10px var(--mono); letter-spacing: .08em; }
.research-card > .fa-solid { color: var(--copper-light); font-size: 28px; margin: 54px 0 24px; }
.research-card h3 { font-size: 30px; line-height: 1; }
.research-card p { color: #c7cad0; font-size: 13px; line-height: 1.75; margin-top: 14px; }
.research-link { margin-top: auto; padding-top: 25px; }

.project-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-card { background: #242832; color: #fff; height: 455px; overflow: hidden; position: relative; }
.project-card.featured { grid-column: span 2; height: 540px; }
.project-card img { height: 100%; object-fit: cover; transition: transform .7s ease; width: 100%; }
.card-shade { background: linear-gradient(180deg, rgba(7, 8, 11, .05) 25%, rgba(7, 8, 11, .92) 100%); inset: 0; position: absolute; }
.project-card:hover img { transform: scale(1.06); }
.project-index { color: #fff; font: 12px var(--mono); position: absolute; right: 20px; top: 18px; }
.project-info { bottom: 25px; left: 27px; position: absolute; right: 27px; }
.project-type { color: #c4c5c8; font: 10px var(--mono); letter-spacing: .08em; margin-bottom: 9px; }
.project-info h3 { font-size: 34px; line-height: 1.1; margin-bottom: 9px; }
.contribution { color: #ddd; font-size: 13px; line-height: 1.55; margin-bottom: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { border: 1px solid rgba(255, 255, 255, .35); font: 10px var(--mono); padding: 5px 8px; }
.watch-link { background: transparent; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; bottom: 28px; color: #fff; cursor: pointer; display: grid; height: 42px; place-items: center; position: absolute; right: 26px; text-decoration: none; transition: .25s; width: 42px; }
.watch-link:hover { background: var(--copper-light); border-color: var(--copper-light); color: var(--ink); }
.watch-link:focus-visible, .video-modal__close:focus-visible { outline: 3px solid var(--copper-light); outline-offset: 3px; }

.video-modal[hidden] { display: none; }
.video-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 20; }
.video-modal__backdrop { background: rgba(7, 10, 16, .84); inset: 0; position: absolute; }
.video-modal__content { background: var(--ink); box-shadow: 0 20px 70px rgba(0, 0, 0, .45); max-width: 1050px; position: relative; width: min(100%, 1050px); }
.video-modal__header { align-items: center; color: #fff; display: flex; font: 11px var(--mono); justify-content: space-between; letter-spacing: .08em; padding: 15px 17px; }
.video-modal__close { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 19px; height: 32px; width: 32px; }
.video-modal__player { aspect-ratio: 16 / 9; background: #080a0d; }
.video-modal__player iframe { border: 0; height: 100%; width: 100%; }
body.video-modal-open { overflow: hidden; }

.profile { align-items: center; background: var(--ink); color: #fff; display: grid; gap: clamp(45px, 9vw, 150px); grid-template-columns: .82fr 1.18fr; max-width: none; padding-left: 12vw; padding-right: 12vw; }
.profile-photo { max-width: 400px; position: relative; }
.profile-photo img { aspect-ratio: 3 / 4; filter: grayscale(1); mix-blend-mode: screen; object-fit: cover; width: 100%; }
.profile-photo::after { border: 1px solid var(--copper-light); content: ""; inset: 15px -15px -15px 15px; position: absolute; z-index: 0; }
.profile-photo span { bottom: 30px; color: var(--copper-light); font: 13px / 1.15 var(--mono); left: -24px; letter-spacing: .06em; position: absolute; z-index: 1; }
.profile-mark { align-items: center; border: 1px solid var(--copper-light); display: flex; justify-content: center; max-width: 400px; min-height: 430px; position: relative; }
.profile-mark strong { color: rgba(255,255,255,.08); font: 800 clamp(90px, 15vw, 210px) / 1 var(--mono); letter-spacing: -.13em; }
.profile-mark span { bottom: 28px; color: var(--copper-light); font: 13px / 1.15 var(--mono); left: -24px; letter-spacing: .06em; position: absolute; }
.profile-content .eyebrow { color: var(--copper-light); }
.profile-content > p:not(.eyebrow) { color: #bbbcc1; font-size: 15px; line-height: 1.9; margin: 28px 0 42px; max-width: 580px; }
.traits { border-top: 1px solid #404957; }
.traits > div { border-bottom: 1px solid #404957; column-gap: 10px; display: grid; grid-template-columns: 50px 1fr; padding: 15px 0; }
.traits span { color: var(--copper-light); font: 11px var(--mono); }
.traits b { font-size: 14px; }
.traits p { color: #a5a9b1; font-size: 12px; grid-column: 2; margin-top: 5px; }

.skill-columns { border-top: 1px solid var(--ink); display: grid; gap: 48px; grid-template-columns: repeat(3, 1fr); padding-top: 21px; }
.skill-label { color: #777; font: 11px var(--mono); letter-spacing: .1em; margin-bottom: 25px; }
.skill-columns ul { list-style: none; padding: 0; }
.skill-columns li { border-bottom: 1px solid var(--line); display: flex; font-size: 18px; font-weight: 700; justify-content: space-between; letter-spacing: -.04em; padding: 16px 0; }
.skill-columns li span { align-self: center; color: #999; font: 10px var(--mono); }

.contact { background: #c98662; display: flex; flex-direction: column; justify-content: center; min-height: 70vh; }
.contact .eyebrow { color: #4d281d; }
.contact h2 em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.contact-note { color: #4d281d; font-size: 16px; line-height: 1.8; margin-top: 32px; }
footer { background: var(--ink); color: #b9bec7; display: flex; font: 10px var(--mono); justify-content: space-between; letter-spacing: .08em; padding: 25px 5vw; }

[data-scroll-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-scroll-reveal].revealed { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .site-header { height: 66px; padding: 0 22px; }
  nav { display: none; }
  .header-contact { font-size: 10px; }
  .hero { padding: 130px 25px 100px; }
  .hero-panel { display: none; }
  .section { padding: 95px 25px; }
  .research-grid, .project-grid, .skill-columns, .experience-grid { grid-template-columns: 1fr; }
  .experience-grid article, .experience-grid article:not(:first-child) { border-bottom: 1px solid var(--line); border-right: 0; min-height: auto; padding: 24px 0; }
  .experience-grid article:last-child { border-bottom: 0; }
  .experience-grid h3 { margin: 38px 0 12px; }
  .research-card { min-height: 310px; }
  .research-card > .fa-solid { margin-top: 30px; }
  .project-card, .project-card.featured { grid-column: auto; height: 390px; }
  .project-info { bottom: 20px; left: 20px; right: 20px; }
  .project-info h3 { font-size: 29px; }
  .video-modal { padding: 16px; }
  .profile { grid-template-columns: 1fr; padding: 90px 25px; }
  .profile-photo { max-width: 260px; }
  .section-heading { margin-bottom: 45px; }
  .contact { min-height: 55vh; }
  footer { flex-direction: column; gap: 10px; padding: 20px 25px; }
  .scroll-cue { left: 25px; }
}

@media (max-width: 430px) {
  h1 { font-size: 48px; }
  .hero-description { font-size: 14px; }
  .button { justify-content: space-between; width: 100%; }
  .project-card, .project-card.featured { height: 350px; }
  .section-heading h2, .profile h2, .contact h2 { font-size: 42px; }
  .skill-columns li { font-size: 16px; }
}