h4 {
  letter-spacing: .1rem; }
.container {
  max-width: 860px; }
.header {
  margin-top: 60px;
  margin-bottom: 60px; 
  text-align: left; }
.main-description h1 {
  margin-bottom: 0px; }
.main-description p {
  margin-bottom: 0px; }
.main-description .fa {
  color: #646464;
  font-size: 22px;
  margin-top: 5px; }
.paper {
  margin-bottom: 20px }
.paper .title {
  /*text-transform: uppercase; */}
.paper p {
  margin-bottom: 2px }
.paper-buttons {
  margin-top: 5px }
.paper .button {
  background: transparent;
  display: inline-block;
  height: 25px;
  padding: 0 25px;
  font-weight: 100;
  line-height: 25px;
  text-transform: none; }
.section-header {
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: .2rem;
  font-weight: 600; }
.docs-section {
  border-top: 1px solid #eee;
  padding: 4rem 0;
  margin-bottom: 0;}
.footer {
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  border-top: 1px solid #eee;
  padding: 15px 0 40px 0;
  margin-bottom: 0;}
.navbar {
  display: none; }
.title-subtitle h3 {
  margin-bottom: 0px; }
.title-subtitle h5 {
  color: rgba(0, 0, 0, 0.60); }
.image {
  text-align: center; }

/*  ================ News list (hanging indent)  ================ */
#news ul {
  list-style: none;
  margin-left: 0; }
#news li {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.8rem; }
#news .news-date {
  flex: 0 0 auto;
  width: 6.2em;
  color: #888;
  font-weight: 600;
  white-space: nowrap; }
#news .news-text {
  flex: 1 1 auto;
  min-width: 0; }

/*  ================ Project styling  ================ */
.project-container {
  margin-bottom: 30px;
}
.project-image-container {
  border: 1px solid rgba(0,0,0,0.2);
  padding: 3px;
  transition: 0.3s;
}
.project-image-container:hover {
  transition: 0.3s;
}
.project-image-container:hover img {
  opacity: 0.4;
}
.project-caption {
  padding: 3px;
}

/* Larger than phone */
@media (min-width: 550px) {
  .header {
    margin-top: 5rem; }
}

/* Larger than tablet */
@media (min-width: 750px) {
  /* Navbar */
  .navbar + .docs-section {
    border-top-width: 0; }
  .navbar,
  .navbar-spacer {
    display: block;
    width: 100%;
    height: 6.5rem;
    background: #fff;
    z-index: 99;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; }
  .navbar-spacer {
    display: none; }
  .navbar > .container {
    width: 100%; }
  .navbar-list {
    list-style: none;
    margin-bottom: 0; }
  .navbar-item {
    position: relative;
    float: left;
    margin-bottom: 0; }
  .navbar-link {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2rem;
    margin-right: 35px;
    text-decoration: none;
    line-height: 6.5rem;
    color: #222; }
  .navbar-link.active {
    color: #33C3F0; }
  .has-docked-nav .navbar {
    position: fixed;
    top: 0;
    left: 0; }
  .has-docked-nav .navbar-spacer {
    display: block; }
  /* Re-overiding the width 100% declaration to match size of % based container */
  .has-docked-nav .navbar > .container {
    width: 80%; }

  /* Popover */
  .popover.open {
    display: block;
  }
  .popover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    top: 92%;
    left: -50%;
    -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
       -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
            filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); }
  .popover-item:first-child .popover-link:after, 
  .popover-item:first-child .popover-link:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
  .popover-item:first-child .popover-link:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px; }
  .popover-item:first-child .popover-link:before {
    border-color: rgba(238, 238, 238, 0);
    border-bottom-color: #eee;
    border-width: 11px;
    margin-left: -11px; }
  .popover-list {
    padding: 0;
    margin: 0;
    list-style: none; }
  .popover-item {
    padding: 0;
    margin: 0; }
  .popover-link {
    position: relative;
    color: #222;
    display: block;
    padding: 8px 20px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.0rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .1rem; }
  .popover-item:first-child .popover-link {
    border-radius: 4px 4px 0 0; }
  .popover-item:last-child .popover-link {
    border-radius: 0 0 4px 4px;
    border-bottom-width: 0; }
  .popover-link:hover {
    color: #fff;
    background: #33C3F0; }
  .popover-link:hover,
  .popover-item:first-child .popover-link:hover:after {
    border-bottom-color: #33C3F0; }
}

@media (max-width: 550px) {
  .u-max-full-width {
    width: 30%;
    height: auto;
  }
}
/* Personal adaptation: original Skeleton layout, typography and cyan accents. */
:root { color-scheme: only light; }
html, body { background: #fff; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: 'Raleway', 'Noto Sans KR', sans-serif; color: #292d31; }
* { box-sizing: border-box; }
a { text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid #1683a5; outline-offset: 5px; border-radius: 2px; }
p { line-height: 1.85; }
h1, h2, h3 { color: #25292d; }
h2 { font-size: 2.5rem; line-height: 1.35; letter-spacing: .1rem; font-weight: 400; margin: 0 0 2rem; }
h3 { font-size: 1.55rem; line-height: 1.6; font-weight: 600; letter-spacing: 0; margin: 0 0 3px; }
.header { margin-top: 64px; margin-bottom: 52px; }
.profile-row { display: flex; align-items: center; }
.profile-picture { display: block; max-width: 280px; width: 100%; height: auto; border-radius: 1rem; }
.main-description { padding-top: 0; overflow-wrap: anywhere; }
.main-description h1 { font-size: 4rem; line-height: 1.25; font-weight: 400; margin-bottom: 1.2rem; letter-spacing: -.05rem; }
.main-description .profile-eyebrow { color: #889198; font-size: 1rem; letter-spacing: .22rem; font-weight: 600; margin-bottom: 1rem; }
.main-description .profile-title, .main-description .profile-subtitle { font-size: 1.65rem; line-height: 1.7; }
.main-description .profile-subtitle { margin-bottom: 1.1rem; }
.profile-email { font-size: 1.35rem; line-height: 1.8; }
.profile-email a { color: #5a6269; text-decoration: none; }
.profile-email a:hover { color: #1683a5; text-decoration: underline; }
.social-links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 14px; }
.social-links a { color: #646464; font-size: 3.7rem; line-height: 1; text-decoration: none; }
.social-links .fa { font-size: inherit; margin-top: 0; }
.social-links a:hover { color: #1683a5; }
.social-links .social-x { font-size: 3rem; }
.navbar { display: block; position: sticky; top: 0; width: 100%; height: auto; background: rgba(255,255,255,.98); border-top: 1px solid #e8ecef; border-bottom: 1px solid #e8ecef; z-index: 20; }
.navbar-list { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.navbar-item { float: none; margin: 0; }
.navbar-link { display: block; color: #343a40; font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: .15rem; margin: 0; line-height: 6.5rem; text-decoration: none; }
.navbar-link.active, .navbar-link:hover { color: #1683a5; }
.docs-section { padding: 3.8rem 0; scroll-margin-top: 90px; }
#about { border-top: 0; }
.docs-section p:last-child { margin-bottom: 0; }
.research-interests { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 15px; margin-top: 24px; font-size: 1.25rem; }
.interest-label { color: #8b9197; font-size: 10px; letter-spacing: .1rem; text-transform: uppercase; font-weight: 600; margin-right: 4px; }
.interest { color: #4e575e; }
.interest + .interest::before { content: '·'; color: #b4b9bd; margin-right: 15px; }
.paper { margin-bottom: 24px; }
.paper:last-child { margin-bottom: 0; }
.paper p { line-height: 1.75; }
.entry-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 24px; }
.entry-date { flex-shrink: 0; color: #7b8288; font-size: 1.25rem; }
.secondary-text, .paper-venue { color: #667079; }
.section-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.subtle-link { font-size: 1.15rem; text-decoration: none; }
.publication-note { font-size: 1.1rem; color: #7c848b; margin-top: -10px; margin-bottom: 24px; }
.subsection-heading { font-size: 1.8rem; font-weight: 400; margin: 28px 0 20px; }
.paper-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.paper .button { padding: 0 16px; font-weight: 500; height: 27px; line-height: 25px; margin: 0; font-size: 11px; letter-spacing: .04rem; }
.paper .button:hover { border-color: #33c3f0; color: #1683a5; }
.project-row { display: flex; gap: 20px; }
.project-thumbnail { width: 140px; height: 100px; object-fit: cover; border-radius: 4px; }
.project-tech { color: #8b9298; font-size: 1.15rem; margin-top: 6px; }
.cv-link { font-size: 10px; height: 30px; line-height: 28px; padding: 0 15px; letter-spacing: .06rem; text-transform: none; }
.timeline { width: 100%; font-size: 1.3rem; margin-top: 1.4rem; }
.timeline .flag { white-space: normal; overflow-wrap: anywhere; }
.timeline .time-wrapper { float: none; white-space: normal; }
.timeline .direction-l, .timeline .direction-r { width: calc(50% - 30px); }
.timeline .desc { font-size: 1.2rem; line-height: 1.65; }
.footer { padding: 23px 0 32px; font-size: 1.15rem; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #848b91; }
.footer a { text-decoration: none; color: #717b83; }
.template-credit { font-size: 1rem; margin: 17px 0 0; color: #a0a7ad; }
.template-credit a { color: inherit; text-decoration: underline; }
.skip-link { position: fixed; top: -70px; left: 12px; padding: 10px 16px; background: #fff; z-index: 50; }
.skip-link:focus { top: 12px; }
@media (max-width: 749px) {
  .container { width: 88%; }
  .header { margin: 36px 0; }
  .profile-row { align-items: flex-start; gap: 26px; }
  .profile-row .four.columns { width: 28%; flex-shrink: 0; margin: 0; }
  .profile-row .seven.columns { width: auto; margin: 0; }
  .main-description h1 { font-size: 3.2rem; }
  .main-description .profile-title, .main-description .profile-subtitle { font-size: 1.45rem; }
  .navbar-list { overflow-x: auto; gap: 25px; scrollbar-width: thin; }
  .navbar-link { line-height: 5.2rem; font-size: 9px; letter-spacing: .1rem; }
  .entry-heading { flex-wrap: wrap; gap: 0 15px; }
  .docs-section { padding: 3rem 0; }
  .section-title-row { flex-wrap: wrap; gap: 0 20px; }
}
@media (max-width: 549px) {
  .profile-row { display: block; }
  .profile-row .four.columns { width: 105px; margin-bottom: 23px; }
  .profile-row .seven.columns { width: 100%; }
  .profile-picture.u-max-full-width { width: 100%; }
  .main-description h1 { font-size: 3.6rem; }
  .social-links { gap: 21px; }
  .social-links a { font-size: 3.2rem; }
  h2 { font-size: 2.3rem; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .template-credit { text-align: left; }
  .project-row { display: block; }
  .project-thumbnail { margin-bottom: 12px; }
}
@media (max-width: 660px) {
  .timeline { padding: 0; }
  .timeline::before { left: 9px; width: 2px; background: #dce0e3; }
  .timeline li { padding: 0 0 24px; }
  .timeline .direction-l, .timeline .direction-r { float: none; width: auto; margin-left: 33px; text-align: left; }
  .timeline .flag-wrapper { text-align: left; }
  .timeline .flag { background: #f3f4f5; font-size: 1.2rem; box-shadow: none; }
  .timeline .flag::before { left: -29px; right: auto; top: 50%; width: 10px; height: 10px; border: 2px solid #33c3f0; margin-top: -5px; }
  .timeline .flag::after { display: none; }
  .timeline .time-wrapper { display: block; padding-top: 5px; text-align: left; }
  .timeline .time { background: transparent; color: #7b8288; padding: 0; }
  .timeline .desc { background: transparent; margin: 8px 0 0; padding: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 660px) { .timeline .flag::before { margin-left: 0; } .timeline .desc { box-shadow: none; } }
html { scroll-padding-top: 0; }
.docs-section { scroll-margin-top: 85px; }
.timeline .flag-wrapper { max-width: 100%; }
.timeline .flag { display: inline-block; max-width: 100%; }
.timeline .time-wrapper { display: block; margin-top: 6px; text-align: inherit; }
.timeline .time { color: #7b8288; background: transparent; padding: 0; }

/* Project figures retain their full aspect ratio and open at source resolution. */
.project-row { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 36px; }
.project-figure { margin: 0; min-width: 0; }
.project-image-link { display: flex; align-items: center; justify-content: center; min-height: 180px; border: 1px solid #e6ecef; border-radius: 6px; overflow: hidden; background: #f5f8fa; }
.project-thumbnail { display: block; width: 100%; max-height: none; height: auto; margin: 0; object-fit: contain; border-radius: 0; }
.project-figure figcaption { color: #8b9298; font-size: 10px; line-height: 1.5; margin-top: 8px; }
.project-context { color: #8b9298; font-size: 1.1rem; margin-bottom: 5px; line-height: 1.5; }
.project-details h3 { font-size: 1.75rem; line-height: 1.45; margin-bottom: 9px; }
.project-details p { font-size: 1.35rem; line-height: 1.8; }
.project-details .project-context { font-size: 1.1rem; line-height: 1.5; }
.project-row:last-child { margin-bottom: 0; }
@media (max-width: 749px) { .project-row { grid-template-columns: 240px minmax(0,1fr); gap: 22px; } .project-image-link { min-height: 130px; } .project-thumbnail { max-height: 185px; } }
@media (max-width: 549px) { .project-row { grid-template-columns: 1fr; gap: 17px; margin-bottom: 38px; } .project-thumbnail { max-height: 300px; } .project-image-link { min-height: 160px; } }

/* Paper and project figures are looping architecture animations (960×600). */
.paper-row { margin-bottom: 36px; }
.paper-details { min-width: 0; }
.paper-row .project-image-link { min-height: 0; aspect-ratio: 8 / 5; background: #fff; }
.project-row .project-image-link { min-height: 0; background: #fff; }
.image-slot { aspect-ratio: 8 / 5; border-style: dashed; background: #fff; }

/* About + live TFT rank card */
.tft-card { border: 1px solid #e3e8ec; border-radius: 6px; background: #fbfcfd; font-size: 1.2rem; line-height: 1.5; }
.tft-summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 16px; cursor: pointer; list-style: none; font-size: 1.3rem; font-weight: 600; color: #25292d; user-select: none; }
.tft-summary::-webkit-details-marker { display: none; }
.tft-summary:hover { color: #1683a5; }
.tft-summary:focus-visible { outline: 2px solid #33c3f0; outline-offset: 2px; border-radius: 6px; }
.tft-fun { color: #8b9197; font-weight: 400; }
.tft-chevron { color: #8b9197; transition: transform .2s ease; }
.tft-card[open] .tft-chevron { transform: rotate(180deg); }
.tft-body { padding: 0 16px 12px; }
.tft-card .tft-queue { color: #8b9197; font-size: 10px; letter-spacing: .08rem; text-transform: uppercase; margin: 0; }
.tft-card .tft-rank { display: flex; align-items: center; gap: 8px; margin: 6px 0 6px; font-size: 1.6rem; font-weight: 600; color: #25292d; }
.tft-dot { width: 10px; height: 10px; border-radius: 50%; background: #c9cdd1; flex: none; }
.tft-chart { display: block; width: 100%; height: auto; margin: 4px 0 6px; }
.tft-chart text { font: 8.5px 'Raleway', sans-serif; fill: #8b9197; }
.tft-card .tft-games { color: #667079; font-size: 1.15rem; margin: 0; }
.tft-card .tft-games:empty { display: none; }

/* Floating poster viewer */
.poster-viewer { width: min(96vw, 1180px); height: min(94vh, 1400px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(20, 26, 32, .35); overflow: hidden; }
.poster-viewer[open] { display: flex; flex-direction: column; }
.poster-viewer::backdrop { background: rgba(20, 26, 32, .62); }
.poster-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e6ecef; }
.poster-bar h3 { flex: 1; min-width: 0; margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poster-bar a, .poster-bar button { flex: none; height: 30px; line-height: 28px; padding: 0 12px; margin: 0; font-size: 11px; letter-spacing: .04rem; }
.poster-hint { flex: none; color: #8b9197; font-size: 1.05rem; }
.poster-stage { flex: 1; min-height: 0; overflow: auto; background: #f3f5f7; display: flex; }
.poster-stage img { display: block; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.poster-stage.zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
@media (max-width: 549px) { .poster-viewer { width: 100vw; height: 100dvh; border-radius: 0; } .poster-hint { display: none; } }

/* Honors: compact list */
.honor { margin-bottom: 12px; }
.honor h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid #c9d6de; }
.honor h3 a:hover { color: #1683a5; border-color: #1683a5; }

/* Placement on its own line under a project's event line, highlighted */
.project-details .project-award { margin: -3px 0 6px; color: #995c05; font-size: 1.15rem; font-weight: 600; line-height: 1.5; letter-spacing: .02rem; }

/* About heading row: the TFT toggle sits next to the heading; its panel floats over the page */
.about-title-row { flex-wrap: nowrap; align-items: center; margin-bottom: 2rem; }
.about-title-row h2 { margin-bottom: 0; }
.about-title-row .tft-card { position: relative; flex: none; }
.about-title-row .tft-summary { padding: 7px 12px; font-size: 1.2rem; }
.about-title-row .tft-card[open] .tft-body { position: absolute; right: -1px; top: calc(100% + 6px); z-index: 30; width: 280px; max-width: calc(100vw - 32px); padding: 12px 16px; background: #fbfcfd; border: 1px solid #e3e8ec; border-radius: 6px; box-shadow: 0 14px 34px rgba(20, 26, 32, .14); }