@charset "UTF-8";
:root {
  --background:#ffffff;
  --foreground:#232321;
  --muted:#72726c;
  --max-width:1680px;
  --page-gutter:var(--mobile-page-gutter,16px);
  --column-gap:40px;
  --profile-gap:40px;
  --resume-date-width:84px;
  --resume-column-gap:16px;
  --selected-columns:2;
  --exploration-columns:2;
  --card-ratio:1/1;
  --exploration-ratio:1/1;
  font-family:Arial,"Helvetica Neue","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:var(--foreground);
  background:var(--background);
  font-synthesis:none;
  font-weight:400;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

img {
  display:block;
  width:100%;
  height:auto;
}

h1,h2,h3,p,figure {
  margin:0;
}

h1,h2,h3 {
  font-size:inherit;
  font-weight:400;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible {
  outline:1px solid var(--foreground);
  outline-offset:6px;
}

::selection {
  background:#dcded5;
  color:#232321;
}

main:focus {
  outline:none;
}

.site-header,main,.site-footer {
  min-width:0;
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding-left:max(var(--page-gutter),env(safe-area-inset-left));
  padding-right:max(var(--page-gutter),env(safe-area-inset-right));
}

.site-header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.wordmark {
  font-size:17px;
  letter-spacing:-.45px;
}

.site-header nav {
  display:flex;
  gap:28px;
  font-size:13px;
}

.site-header nav a {
  color:var(--muted);
  transition:color .2s;
}

.site-header nav a:hover,.site-header nav a[aria-current="page"] {
  color:var(--foreground);
}

.site-header nav a[aria-current="page"]::after {
  content:"";
  display:block;
  width:3px;
  height:3px;
  background:currentColor;
  border-radius:50%;
  margin:6px auto -9px;
}

.section-heading {
  display:flex;
  align-items:baseline;
  gap:9px;
  font-size:13px;
  color:var(--muted);
  margin:20px 0 25px;
}

.section-heading sup {
  font-size:9px;
  top:-.3em;
  position:relative;
}

.project-grid {
  display:grid;
}

.project-card {
  min-width:0;
}

.project-card a {
  display:block;
}

.card-image {
  aspect-ratio:var(--card-ratio);
  overflow:hidden;
  background:#eeefeb;
}

.card-image img {
  width:100%;
  height:100%;
  object-fit:var(--thumbnail-fit,contain);
  object-position:var(--thumbnail-position,50% 50%);
}

.card-caption {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
  margin-top:13px;
  font-size:13px;
}

.card-caption h3 {
  letter-spacing:-.1px;
  line-height:1.6;
}

.card-caption time {
  font-size:11px;
  color:var(--muted);
  flex-shrink:0;
}

.card-subtitle {
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.explorations .card-image {
  aspect-ratio:var(--exploration-ratio);
}

.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:120px;
  padding-top:28px;
  padding-bottom:36px;
  color:var(--muted);
  font-size:11px;
}

.site-footer a:hover {
  color:var(--foreground);
}

.text-page {
  min-height:calc(100svh - 320px);
  padding-top:24px;
}

.page-label {
  font-size:12px;
  color:var(--muted);
}

.about-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--profile-gap,40px);
  align-items:start;
  margin-top:32px;
}

.about-grid > * {
  min-width:0;
}

.about-identity-grid {
  display:grid;
  gap:24px;
  align-items:start;
}

.about-identity-grid.has-portrait {
  grid-template-columns:128px minmax(0,1fr);
}

.about-portrait {
  width:100%;
}

.about-portrait img {
  width:100%;
  height:auto;
}

.about-identity {
  min-width:0;
}

.about-title {
  font-size:28px;
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.8px;
  overflow-wrap:anywhere;
}

.about-title .sub {
  display:block;
  font-size:13px;
  line-height:1.65;
  letter-spacing:-.2px;
  margin-top:12px;
  color:var(--muted);
}

.about-basics {
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.about-basics dd {
  margin:0;
}

.about-copy {
  min-width:0;
  width:100%;
  font-size:15px;
  line-height:1.95;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

.about-copy > p+p {
  margin-top:24px;
}

.about-profile .about-copy {
  margin-top:32px;
  max-width:60ch;
}

.about-profile .about-capabilities {
  margin-top:32px;
}

.about-capabilities .profile-resume-list {
  gap:16px;
}

.about-history > .profile-resume {
  margin-top:0;
}

.text-link {
  display:inline-block;
  font-size:12px;
  margin-top:34px;
  padding-bottom:4px;
  border-bottom:1px solid #c6c6bd;
}

.text-link:hover {
  border-color:var(--foreground);
}

.about-meta {
  margin:24px 0 0;
  display:grid;
  gap:16px;
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
}

.about-meta > div {
  display:grid;
  grid-template-columns:var(--resume-date-width) minmax(0,1fr);
  gap:var(--resume-column-gap);
  align-items:baseline;
}

.about-meta dt {
  font-size:10px;
  margin:0;
}

.about-meta dd {
  margin:0;
  min-width:0;
  color:var(--foreground);
  overflow-wrap:anywhere;
}

.contact-direct {
  margin-top:54px;
}

.contact-heading {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.contact-copy {
  font-size:13px;
  line-height:1.8;
  word-break:keep-all;
  max-width:410px;
  color:var(--muted);
  margin-top:22px;
  overflow-wrap:anywhere;
}

.contact-copy p + p {
  margin-top:12px;
}

.email-link {
  display:inline-flex;
  align-items:baseline;
  gap:13px;
  max-width:100%;
  margin-top:14px;
  padding-bottom:3px;
  border-bottom:1px solid #b7b8b1;
  font-size:34px;
  letter-spacing:-1px;
  line-height:1.4;
}

.email-link > span:first-child {
  min-width:0;
  overflow-wrap:anywhere;
}

.email-link > span[aria-hidden] {
  flex:0 0 auto;
  font-size:.62em;
}

.email-link:hover {
  border-color:var(--foreground);
}

.contact-directory {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  align-items:start;
  gap:22px;
  margin-top:72px;
  padding-top:25px;
  border-top:1px solid #dedfd9;
}

.contact-directory > * {
  min-width:0;
}

.contact-name {
  font-size:13px;
  line-height:1.8;
}

.contact-role,
.contact-location {
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
}

.contact-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px;
  margin-top:-10px;
  font-size:12px;
  line-height:1.5;
}

.contact-links a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:44px;
}

.contact-links a:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.contact-copyright {
  margin-top:48px;
  padding-bottom:24px;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
}

.site-shell:has(.contact-page) > .site-footer {
  display:none;
}

.project-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:20px 0 33px;
  color:var(--muted);
  font-size:11px;
}

.project-top a:hover {
  color:var(--foreground);
}

.project-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--column-gap);
  padding:30px 0 48px;
}

.project-title {
  font-size:clamp(30px,4vw,58px);
  letter-spacing:-1.8px;
  line-height:1.15;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

.project-subtitle {
  margin-top:16px;
  font-size:12px;
  color:var(--muted);
}

.project-summary {
  max-width:510px;
  font-size:15px;
  line-height:1.9;
  word-break:keep-all;
}

.project-meta {
  display:flex;
  gap:30px;
  font-size:11px;
  color:var(--muted);
  margin-top:25px;
  line-height:1.6;
}

.project-hero {
  background:#efefeb;
}

.project-hero img {
  max-height:1000px;
  object-fit:contain;
}

.project-notes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--column-gap);
  padding:68px 0 74px;
}

.project-note {
  max-width:500px;
}

.project-note h2 {
  font-size:11px;
  color:var(--muted);
  margin-bottom:15px;
}

.project-note p {
  font-size:14px;
  line-height:1.95;
  word-break:keep-all;
}

.project-gallery {
  min-width:0;
}

.project-gallery figure {
  min-width:0;
  background:#efefeb;
}

.project-gallery figure.wide {
  grid-column:1/-1;
}

.project-gallery img {
  width:100%;
  height:auto;
}

.project-ending {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin-top:50px;
  font-size:12px;
  overflow-wrap:anywhere;
}

.project-ending .source-link {
  color:var(--muted);
}

.project-ending a:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.next-project {
  text-align:right;
  min-width:0;
}

.next-project span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:8px;
}

.next-project strong {
  font-size:20px;
  letter-spacing:-.4px;
  font-weight:400;
}

.error-page {
  padding-top:100px;
  min-height:65vh;
}

.error-page h1 {
  font-size:24px;
  line-height:1.5;
}

.error-page p {
  margin-top:18px;
  color:var(--muted);
  line-height:1.8;
}

.skip-link {
  position:fixed;
  left:16px;
  top:-80px;
  padding:12px 16px;
  background:var(--foreground);
  color:var(--background);
  z-index:10;
}

.skip-link:focus {
  top:16px;
}

.no-script {
  padding:24px;
  font-size:15px;
  line-height:2;
}

@media(min-width:1800px) {
  .site-header {
    height:130px;
  }
}

@media(max-width:999px) {
  .site-header {
    height:96px;
  }
  .site-header nav {
    gap:23px;
  }
  .about-grid {
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
  .about-identity-grid {
    gap:20px;
  }
  .about-identity-grid.has-portrait {
    grid-template-columns:96px minmax(0,1fr);
  }
  .about-title {
    font-size:22px;
    letter-spacing:-.5px;
  }
  .project-intro {
    gap:30px;
  }
  .project-summary {
    font-size:14px;
  }
  .project-meta {
    gap:15px;
  }
  .project-title {
    font-size:38px;
  }
  .project-notes {
    padding:45px 0 50px;
  }
}

@media(max-width:720px) {
  .contact-direct {
    margin-top:36px;
  }
  .email-link {
    font-size:25px;
    gap:10px;
    letter-spacing:-.75px;
  }
  .contact-copy {
    margin-top:24px;
  }
  .contact-directory {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    margin-top:62px;
    padding-top:24px;
  }
  .contact-links {
    margin-top:4px;
  }
}

@media(max-width:370px) {
  .email-link {
    font-size:23px;
    gap:8px;
  }
}

@media(max-width:580px) {
  :root {
    font-size:13px;
    --column-gap:16px;
  }
  .site-header {
    height:86px;
    gap:12px;
  }
  .wordmark {
    font-size:16px;
  }
  .site-header nav {
    gap:18px;
    font-size:12px;
  }
  .section-heading {
    margin-top:16px;
    margin-bottom:21px;
    font-size:12px;
  }
  .card-caption {
    margin-top:11px;
    font-size:13px;
  }
  .card-subtitle {
    font-size:11px;
  }
  .explorations .card-caption {
    display:block;
  }
  .explorations .card-caption time {
    display:none;
  }
  .explorations .card-subtitle {
    font-size:10px;
  }
  .site-footer {
    margin-top:80px;
    padding-bottom:28px;
  }
  .about-title .sub {
    font-size:12px;
    margin-top:10px;
  }
  .about-copy {
    font-size:14px;
    line-height:1.9;
  }
  .project-top {
    margin:16px 0 17px;
  }
  .project-intro {
    grid-template-columns:1fr;
    padding:18px 0 32px;
    gap:24px;
  }
  .project-title {
    font-size:38px;
    letter-spacing:-1.5px;
  }
  .project-subtitle {
    margin-top:10px;
    font-size:11px;
  }
  .project-summary {
    font-size:14px;
  }
  .project-meta {
    margin-top:17px;
  }
  .project-notes {
    grid-template-columns:1fr;
    gap:30px;
    padding:38px 0;
  }
  .project-note h2 {
    margin-bottom:10px;
  }
  .project-note p {
    font-size:13px;
  }
  .project-gallery figure.wide {
    grid-column:auto;
  }
  .project-ending {
    align-items:flex-start;
    margin-top:32px;
  }
  .next-project strong {
    font-size:17px;
  }
  .source-link {
    font-size:11px;
  }
  .text-page {
    min-height:calc(100svh - 300px);
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}