:root {
  /* KRICT's published CI values (krict.re.kr/kor/sub01_05_01.do): PANTONE 3015C,
     3005C and 632C. They are bright, so they are used as graphics - the
     gradient, rules, fills - where contrast minimums do not apply. Text uses
     --brand-primary, the only one of the three that clears 4.5:1 on white
     (4.86:1); headings and body stay on --brand-ink at 13.4:1. */
  --brand-primary: #0075c2;
  --brand-secondary: #0099d9;
  --brand-accent: #00ada9;
  --ms3l-gradient: linear-gradient(135deg, #0075c2 0%, #0099d9 45%, #00ada9 100%);
  --brand-ink: #0b2f5b;
  --brand-bg: #eef6fc;

  --bg: #ecf3fb;
  --surface: #ffffff;
  --surface-soft: #f4f8fd;
  --line: #bdd0e4;
  --text: #1d2f40;
  --muted: #4f6478;
  --strong: var(--brand-ink);
  --accent: var(--brand-secondary);
  --accent-soft: #e0f4fa;
  --accent-strong: var(--brand-primary);
  --shadow: 0 14px 40px rgba(15, 43, 70, 0.1);
  --radius: 22px;
  --max-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  min-width: 320px;
}

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

h1,
h2,
h3,
p,
li,
a {
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
}

main {
  overflow: hidden;
}

/* overflow:hidden makes main a scrollport, which kills position:sticky inside
   it. overflow-x:clip contains the hero animation without that side effect. */
@supports (overflow: clip) {
  main {
    overflow: visible;
    overflow-x: clip;
  }
}

.container {
  width: min(var(--max-width), calc(100% - clamp(24px, 4vw, 64px)));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    linear-gradient(90deg, rgba(0, 92, 165, 0.08), rgba(10, 127, 168, 0.08)),
    rgba(243, 248, 254, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px 28px;
  padding: 18px 0;
}

.brand {
  min-width: 0;
}

.brand-title {
  font-size: 1.4rem;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--strong);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.brand-logo-image {
  display: block;
  width: 86px;
  height: auto;
}

.brand-subtitle {
  margin-top: 2px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 420px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--strong);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 43, 70, 0.08);
}

.nav-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(0, 92, 165, 0.12), rgba(10, 127, 168, 0.18));
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.site-nav a {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
}

.site-nav a:hover {
  color: var(--strong);
  background: rgba(0, 92, 165, 0.14);
}

.site-nav a.is-active {
  color: #ffffff;
  background: var(--ms3l-gradient);
}

.nav-group {
  position: relative;
  min-width: 0;
}

.nav-group summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group[open] summary,
.nav-group summary:hover {
  color: var(--strong);
  background: rgba(0, 92, 165, 0.14);
}

.nav-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: grid;
  gap: 4px;
  z-index: 10;
}

.nav-dropdown a {
  border-radius: 10px;
}

.hero {
  padding: 88px 0 60px;
  background:
    radial-gradient(circle at top right, rgba(10, 127, 168, 0.3), transparent 36%),
    linear-gradient(180deg, #f1f7ff 0%, #e5eef9 100%);
  border-bottom: 1px solid var(--line);
}

.hero-clean {
  padding: 54px 0 36px;
}

.hero-clean h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.2rem);
  line-height: 1.2;
}

.hero-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.hero-identity-copy,
.hero-main,
.hero-side,
.page-card,
.card,
.list-card,
.news-card,
.news-card-body,
.profile-body,
.research-card-body {
  min-width: 0;
}

/* The block is an acrostic of MS3L. The lines are display:contents so every
   initial shares one auto-sized column - the words then align on a single
   left edge without hardcoding the width of "M". */
.hero-acronym-block {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 14px;
  background: linear-gradient(160deg, #f7fbff, #e9f2fb);
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: stretch;
  font-size: clamp(0.92rem, 0.98vw, 1.02rem);
}

.hero-acronym-block::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--ms3l-gradient);
  z-index: 2;
}

.hero-acronym-line {
  display: contents;
}

.hero-initial,
.hero-acronym-word {
  line-height: 1.5;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* The initials get their own column, stepping along the brand ramp, so MS3L
   reads down the left edge as a mark rather than as five stray capitals. */
.hero-initial {
  display: flex;
  align-items: center;
  padding: 6px 9px 6px 18px;
  font-size: 1.3em;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0075c2;
}

/* The step is carried by the letter alone. Any column ground behind it - even a
   9% tint - turns the five into badges that pull ahead of the heading beside
   them. These are text, so the ramp stops at #009b96 (3.4:1) rather than the CI
   teal #00ada9, which is 2.78:1 and fails even the large-text minimum. */
.hero-acronym-line:nth-child(2) .hero-initial { color: #0083bd; }
.hero-acronym-line:nth-child(3) .hero-initial { color: #0090b4; }
.hero-acronym-line:nth-child(4) .hero-initial { color: #0096a5; }
.hero-acronym-line:nth-child(5) .hero-initial { color: #009b96; }

.hero-acronym-word {
  display: flex;
  align-items: center;
  padding: 6px 20px 6px 0;
  color: var(--text);
  font-weight: 500;
}

.hero-identity-copy h1 {
  margin-bottom: 10px;
}

/* The hero wordmark makes the same move as the logo: the 3 is the one glyph
   that belongs to this lab, so it is the one that carries the ramp. Scoped to
   the hero - MS3L appears inline in body copy all over the site and should
   stay in the running text colour there. */
.hero-identity-copy h1 sup {
  background: var(--ms3l-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-identity-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-mission {
  margin-top: 0;
  font-size: 1.04rem;
}

.hero-subcopy {
  margin-top: 8px !important;
  font-size: 0.9rem !important;
  color: var(--muted);
}

.hero-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.95fr);
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}

.hero-main,
.hero-side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 28px;
  height: 100%;
}

.hero-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-main {
  padding: 32px;
}

.hero-side {
  display: flex;
  flex-direction: column;
}

.hero-side h3 {
  margin: 0 0 14px;
}

.hero-side-heading {
  margin-top: 22px !important;
}

.side-news-item {
  border-top: 1px dashed #c6d9ee;
  padding: 10px 0;
  display: grid;
  gap: 6px;
}

.hero-side .list-meta {
  margin-bottom: 0;
}

.side-item-title {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.side-item-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hero-side > .inline-link {
  margin-top: 8px;
  align-self: flex-start;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.95fr;
  gap: 36px;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  margin-bottom: 18px;
}

.hero h1 {
  margin: 0 0 18px;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--strong);
}

.hero p {
  margin: 0;
  max-width: 760px;
  font-size: 1.08rem;
  color: var(--muted);
}

.hero-copy {
  max-width: 760px;
}

.hero-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-metrics {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
}

.metric-label {
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #98a2b3;
}

.metric-card strong {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--strong);
}

.btn {
  display: inline-block;
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 600;
  border: 1px solid transparent;
}

button.btn {
  font: inherit;
  cursor: pointer;
}

.btn-compact {
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 0.9rem;
}

.btn-primary {
  color: #fff;
  background: var(--ms3l-gradient);
}

.btn-primary:hover {
  opacity: 0.92;
}

.btn-secondary {
  color: var(--strong);
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--line);
}

.btn-secondary:hover {
  background: #ffffff;
}

.hero-card,
.card,
.page-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-card {
  padding: 28px;
  background: rgba(255, 255, 255, 0.85);
}

.hero-card-photo {
  height: 180px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(15, 118, 110, 0.18), rgba(255, 255, 255, 0.85)),
    linear-gradient(135deg, #dce9e4, #f7fbfa);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}

.hero-card h3 {
  margin: 0 0 6px;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: 1.2rem;
  color: var(--strong);
}

.hero-card .role {
  font-size: 0.94rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.hero-card-affiliation {
  font-size: 0.88rem;
  color: var(--accent-strong);
  margin-bottom: 14px;
}

.hero-card-links {
  margin-top: 18px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-card-links a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
}

.inline-link,
.publication-link {
  color: var(--accent-strong);
}

.inline-link:hover,
.publication-link:hover {
  text-decoration: underline;
}

.credibility-strip {
  padding: 0 0 24px;
}

.credibility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.credibility-item {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.credibility-label {
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.section {
  padding: 56px 0;
}

.section-emphasis {
  background: linear-gradient(180deg, #e5f1fb 0%, #f3f8fd 100%);
  border-top: 1px solid #c9d9ea;
  border-bottom: 1px solid #c9d9ea;
}

.section-soft {
  background: linear-gradient(180deg, #f5fbff 0%, #eaf3fb 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-title {
  margin: 0 0 8px;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--strong);
}

.section-lead {
  margin: 0 0 28px;
  color: var(--muted);
}

.card-grid {
  display: grid;
  gap: 18px;
}

.home-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  padding: 22px;
}

.card-link {
  transition: transform .15s ease, box-shadow .15s ease;
}

.card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(15, 43, 70, 0.14);
}

a.card {
  margin-bottom: 12px;
}

.card h3 {
  margin: 0 0 10px;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: 1.15rem;
  color: var(--strong);
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.project-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-card-title {
  min-height: 3.2em;
  margin-bottom: 14px !important;
  line-height: 1.4;
}

.project-card-meta {
  margin-top: auto;
  display: grid;
  gap: 6px;
}

.project-card-period,
.project-card-sponsor {
  margin: 0;
}

.project-card-sponsor {
  color: var(--muted);
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 28px;
  align-items: stretch;
}

.list-card {
  padding: 18px 20px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 14px;
}

.list-card-thumb {
  margin: -4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(145deg, rgba(0, 79, 159, 0.12), rgba(255, 255, 255, 0.9)),
    linear-gradient(135deg, #dce9f7, #f6faff);
}

.list-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  max-width: none;
  max-height: none;
}

.list-meta {
  font-size: 0.84rem;
  color: #98a2b3;
  margin-bottom: 6px;
}

.list-card strong {
  color: var(--strong);
}

.list-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.news-feed {
  margin-top: 22px;
  display: grid;
  gap: 18px;
}

.content-feed {
  margin-top: 22px;
  display: grid;
  gap: 16px;
}

.content-item-card {
  padding: clamp(18px, 3vw, 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.content-item-title {
  margin: 0;
  color: var(--strong);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.38;
}

.content-item-card p {
  margin: 10px 0 0;
  color: var(--muted);
}

.content-item-detail {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.news-card {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.news-card-text-only {
  grid-template-columns: minmax(0, 1fr);
}

.news-card-media {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 220px;
  background:
    linear-gradient(145deg, rgba(0, 79, 159, 0.12), rgba(255, 255, 255, 0.9)),
    linear-gradient(135deg, #dce9f7, #f6faff);
}

.news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-card-title {
  margin: 0;
  font-size: 1.36rem;
  line-height: 1.25;
  color: var(--strong);
}

.news-card-body p {
  margin: 12px 0 0;
  color: var(--muted);
}

.news-note {
  color: var(--strong) !important;
  font-style: italic;
}

.news-links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.92rem;
}

.news-links-label {
  font-weight: 700;
  color: var(--strong);
  margin-right: 2px;
}

.news-links-sep {
  color: #93a6ba;
}

.detail-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.list-card img {
  max-width: 220px;
  max-height: 84px;
  width: auto;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.list-card-thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  margin: 0;
}

.page-wrap {
  padding: 56px 0 72px;
}

.page-card {
  padding: 32px;
}

/* One gap between the page intro card and whatever list follows it, so the
   Impact pages line up with each other regardless of their content type. */
.page-card + .card-grid,
.page-card + .news-feed,
.page-card + .content-feed,
.page-card + .profile-section,
.page-card + .publication-featured-section,
.page-card + .section-title {
  margin-top: 28px;
}

.page-card h1 {
  margin-top: 0;
  margin-bottom: 12px;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.2rem);
  letter-spacing: -0.02em;
  color: var(--strong);
}

.page-card h2 {
  margin: 24px 0 12px;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: 1.3rem;
  color: var(--strong);
}

.page-card p,
.page-card li {
  color: var(--muted);
}

.page-card ul,
.card ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.profile-section {
  margin-top: 28px;
}

.profile-card {
  display: grid;
  grid-template-columns: minmax(200px, 220px) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.profile-photo {
  min-height: 260px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(15, 118, 110, 0.18), rgba(255, 255, 255, 0.85)),
    linear-gradient(135deg, #dce9e4, #f7fbfa);
}

.profile-label {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.profile-body h2 {
  margin: 0 0 8px;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: 2rem;
  color: var(--strong);
}

/* PI current appointments -------------------------------------------------
   Two concurrent posts that share one start date. Each row pairs a job title
   with its own institution, and the period is stated once underneath instead
   of being repeated on both. */

.pi-appointments {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.pi-appointments li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.pi-appointment-title {
  color: var(--strong);
  font-weight: 600;
}

.pi-appointment-org {
  color: var(--muted);
  font-size: 0.95rem;
}

.pi-appointment-org::before {
  content: "—";
  margin-right: 8px;
  color: var(--line);
}

.pi-appointment-period {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.pi-research-focus {
  margin-top: 16px;
}

/* PI career ---------------------------------------------------------------
   The period gets a column of its own so every job title starts on the same
   vertical line. Previously title, period, and affiliation ran together in one
   sentence per row and nothing lined up. */

.pi-career {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.pi-career-item {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.pi-career-item:first-child {
  padding-top: 2px;
  border-top: 0;
}

.pi-career-item:last-child {
  padding-bottom: 0;
}

.pi-career-period {
  color: var(--muted);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.pi-career-role {
  display: grid;
  gap: 2px;
}

.pi-career-title {
  color: var(--strong);
  font-weight: 600;
  font-size: 0.98rem;
}

.pi-career-affiliation {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Below this the 170px period column leaves too little room for the longer
   job titles, so the period stacks above its role instead. */
@media (max-width: 560px) {
  .pi-career-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

/* Invited talks ------------------------------------------------------------
   The entries ride the same .news-feed / .news-card shape as Patents,
   Publications and News, so the page spaces exactly like its siblings. Only
   the pieces those pages do not have are styled here. */

.talk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.talk-meta .list-meta {
  margin-bottom: 0;
}

.talk-upcoming {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 92, 165, 0.16);
  background: rgba(10, 127, 168, 0.08);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A recurring lecture series rather than a one-off talk, marked so it does not
   read as a single date. */
.talk-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.talk-event {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.talk-event strong {
  color: var(--text);
}

.talk-location {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.talk-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.member-note {
  margin-top: 24px;
}

.publication-authors,
.publication-doi {
  margin: 6px 0 0;
}

.author-highlight {
  font-weight: 700;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.publication-note {
  margin-top: 6px;
  font-size: 0.86rem;
  color: #6b7280;
}

.publication-support {
  margin: 10px 0 0;
}

.trl-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #bddad4;
  background: #ebf7f4;
  color: var(--accent-strong) !important;
  font-size: 0.82rem !important;
  font-weight: 700;
}

.contact-summary p {
  margin: 0 0 14px;
}

.contact-summary {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contact-summary h2 {
  margin-top: 0;
}

.contact-summary-meta {
  margin-top: 8px;
}

.contact-summary-email {
  margin-top: 2px;
  font-weight: 600;
}

.contact-summary .btn {
  margin-top: auto;
  align-self: flex-start;
}

.contact-banner {
  margin-top: 22px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr) auto;
  gap: 18px 24px;
  align-items: center;
}

.contact-banner-copy h2,
.contact-banner-meta p {
  margin: 0;
}

.contact-banner-copy p {
  margin: 6px 0 0;
}

.contact-banner-meta {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.research-theme-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.research-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
}

.research-chip-row-compact {
  margin: 14px 0 2px;
}

.research-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(0, 92, 165, 0.16);
  background: rgba(10, 127, 168, 0.08);
  color: var(--strong);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
}

/* 25/18 matches the source figures, so nothing is cropped; capping the width
   keeps the thumbnail at about two thirds of a full-bleed card image. */
.research-theme-thumb {
  width: min(100%, 320px);
  margin: 0 auto 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 25 / 18;
  background:
    linear-gradient(145deg, rgba(0, 79, 159, 0.12), rgba(255, 255, 255, 0.9)),
    linear-gradient(135deg, #dce9f7, #f6faff);
}

.research-theme-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.research-theme-card h3 {
  min-height: 2.9em;
  margin-bottom: 10px;
}

.research-theme-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(1.65em * 2);
}

.research-theme-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.logo-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.logo-chip {
  display: grid;
  gap: 10px;
  justify-items: center;
  align-content: start;
  padding: 16px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}

.logo-chip img {
  width: 100%;
  max-width: 180px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.logo-chip span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--strong);
  line-height: 1.35;
}

.impact-experience-card {
  height: 100%;
}

.impact-experience-card h3 {
  margin-bottom: 10px;
}

.impact-experience-detail {
  margin-top: 12px !important;
  font-size: 0.92rem !important;
}

.hero-card-photo img,
.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.profile-card.pi-profile-card {
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: start;
}

.profile-photo.pi-profile-photo {
  width: 156px;
  min-height: 0;
  aspect-ratio: 380 / 531;
  justify-self: center;
  overflow: hidden;
}

.profile-photo.pi-profile-photo img {
  display: block;
  height: auto;
  object-fit: contain;
}

.pi-details {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.pi-detail-card h2 {
  margin-top: 0;
}

.pi-detail-card p {
  margin: 0 0 14px;
}

.pi-detail-card p:last-child {
  margin-bottom: 0;
}

.site-footer {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  background: #e9f0f8;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 36px;
  font-size: 0.92rem;
  color: var(--muted);
}

.footer-copy strong {
  display: block;
  margin-bottom: 6px;
  color: var(--strong);
}

.footer-right {
  text-align: right;
  font-weight: 600;
}

.cta-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
}

.cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.topic-list {
  margin-top: 16px;
}

.topic-list li {
  margin-bottom: 6px;
}

@media (max-width: 1040px) {
  .header-inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    justify-content: stretch;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
  }

  .site-nav[hidden] {
    display: none;
  }

  .site-nav a,
  .nav-group summary {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .nav-group {
    width: 100%;
  }

  .nav-dropdown {
    position: static;
    width: 100%;
    margin-top: 6px;
    padding: 6px 0 0 12px;
    border: 0;
    border-left: 2px solid rgba(0, 92, 165, 0.16);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .hero-board,
  .hero-grid,
  .split-grid,
  .news-card,
  .profile-card,
  .profile-card-highlight {
    grid-template-columns: 1fr;
  }

  .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid.three,
  .card-grid.two,
  .credibility-grid,
  .research-theme-row,
  .logo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-photo {
    min-height: 220px;
  }

  .profile-card.pi-profile-card {
    grid-template-columns: 1fr;
  }

  .profile-photo.pi-profile-photo {
    width: 144px;
    min-height: 0;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .contact-banner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cta-panel,
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-right {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .hero-grid,
  .split-grid,
  .credibility-grid,
  .home-overview-grid,
  .research-theme-row,
  .card-grid.four,
  .card-grid.three,
  .card-grid.two,
  .logo-strip {
    grid-template-columns: 1fr;
  }

  .hero-clean {
    padding: 40px 0 28px;
  }

  .hero-identity {
    grid-template-columns: 1fr;
  }

  .hero-process {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .separation-visual {
    margin-top: 12px;
  }

  .hero-acronym-block {
    width: fit-content;
    justify-content: center;
    font-size: 1rem;
  }

  .hero-main,
  .hero-side,
  .page-card,
  .profile-card,
  .news-card,
  .card,
  .list-card {
    padding: 20px;
  }

  .brand-subtitle {
    max-width: none;
  }
}



/* Research theme cards ----------------------------------------------------- */

.research-theme-grid {
  align-items: stretch;
}

.research-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* The figures are process schematics on a white ground, so nothing is drawn
   over them - the theme name sits in a caption bar underneath instead. The
   margin is equal on all four sides so the figure reads as a plate rather than
   as bleed. Width lands near 550px against sources of 667-1280px, so none is
   upscaled. */
.research-card-figure {
  position: relative;
  display: block;
  margin: 16px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #dce9f7;
  aspect-ratio: 25 / 18;
  cursor: zoom-in;
  font: inherit;
}

.research-card-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.research-figure-expand {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.93);
  color: var(--strong);
  font-size: 0.76rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(15, 43, 70, 0.16);
}

.research-card-figure:hover .research-figure-expand {
  background: #ffffff;
}

.research-card-figure:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.research-card-caption {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 22px 16px;
  background: var(--surface-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--accent-strong);
}

.research-card-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.research-card-caption h2 {
  margin: 0;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: 1.18rem;
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--strong);
  text-wrap: balance;
}

.research-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
  padding: 18px 22px 22px;
}

.research-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.research-card-body .research-chip-row {
  margin: 0;
}

/* The action row holds the bottom edge, so the Details buttons line up across
   a row of cards whatever the copy above them does. */
.research-card-actions {
  display: flex;
  margin-top: auto;
  padding-top: 4px;
}

.research-details-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--accent-strong);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.research-details-button:hover {
  background: var(--accent-soft);
  border-color: rgba(0, 92, 165, 0.3);
}

.research-details-button svg {
  transition: transform .15s ease;
}

.research-details-button:hover svg {
  transform: translateX(2px);
}

/* Theme detail dialog ------------------------------------------------------ */

/* Everything the card deliberately leaves out: what the figure shows, the
   topics, the methods, and the papers. */
.content-modal-panel.research-details-panel {
  padding: 56px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.research-details-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.research-details-head h2 {
  margin: 0;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--strong);
  text-wrap: balance;
}

.research-details-head p {
  margin: 0;
  color: var(--muted);
}

.research-details-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
  align-items: start;
}

.research-details-section h3 {
  margin: 0 0 8px;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.research-details-section ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.research-details-section li {
  margin-bottom: 6px;
}

.research-details-section li:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .research-details-columns,
  .research-details-panel .card-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Figure lightbox ---------------------------------------------------------- */

/* Every figure opens at the same panel size, so the dialog does not jump
   between themes. */
.content-modal-panel.research-figure-panel {
  width: min(920px, 100%);
  max-width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  padding: 56px 20px 20px;
}

/* A fixed 25:18 stage, matching the figures' own ratio. The image is centred
   and capped at its natural size: the sources run 667-1280px and cannot be
   re-rendered, so the smallest one sits with white around it rather than being
   upscaled. The figures are on white grounds, so that reads as margin. */
.research-figure-stage {
  position: relative;
  aspect-ratio: 25 / 18;
  max-height: calc(100vh - 210px);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Absolute, so the image is out of flow and cannot push the stage taller than
   its ratio - the figures differ slightly (1.379 to 1.393) and were making
   each dialog a few pixels different. scale-down shrinks an oversized figure
   but never enlarges a small one past its native pixels. */
.research-figure-stage img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: scale-down;
  object-position: center;
}

.research-figure-caption {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.research-theme-card .theme-paper-inline {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.theme-paper-inline a {
  font-size: 0.92rem;
  line-height: 1.5;
}

.theme-cta {
  margin: 14px 2px 0;
}

.section-title-sm {
  font-size: 1.45rem;
  margin-bottom: 14px;
}

.profile-card-highlight {
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
}

.profile-photo-lg {
  min-height: 340px;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.member-card-compact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.member-card-top {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.member-card-top.has-photo {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
}

.member-photo {
  width: 112px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.member-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.member-card-compact h3 {
  margin: 0 0 10px;
  color: var(--strong);
  font-size: 1.28rem;
}

.member-meta {
  display: grid;
  gap: 10px;
  margin: 0;
}

/* "AFFILIATION" fills the label column exactly, so it needs its own width plus
   a real gutter or it reads as one run-on line with the value. */
.member-meta-row {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 4px 18px;
  align-items: baseline;
}

.member-meta dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.member-meta dd {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
}

.member-contact {
  margin: 10px 0 0;
  font-size: 0.88rem;
}

.member-card-details {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.member-research {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.member-achievements summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 600;
}

.member-card-details .member-achievements {
  margin-top: 12px;
}

.member-achievements ul {
  margin-top: 10px;
}

@media (max-width: 480px) {
  .member-card-top.has-photo {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
  }

  .member-photo {
    width: 88px;
    border-radius: 12px;
  }

  .member-meta-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


.member-highlight {
  display: inline;
  white-space: nowrap;
  font-weight: 800;
  color: var(--brand-primary);
  background: rgba(0, 92, 165, 0.12);
  padding: 0 3px;
  border-radius: 4px;
}


.publication-authors {
  line-height: 1.8;
}


body.modal-open {
  overflow: hidden;
}

.content-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(11, 47, 91, 0.46);
}

/* An author display:grid outranks the UA sheet's [hidden] { display: none },
   so without this every modal is painted at once and the last one in the DOM
   covers the page. The close button then has nothing to hide. */
.content-modal[hidden] {
  display: none;
}

.content-modal-panel {
  position: relative;
  width: min(960px, 100%);
  max-height: min(780px, calc(100vh - 48px));
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(11, 47, 91, 0.24);
  padding: 28px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--strong);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.modal-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: start;
  padding-top: 10px;
}

.modal-media {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  min-height: 240px;
  background:
    linear-gradient(145deg, rgba(0, 79, 159, 0.12), rgba(255, 255, 255, 0.9)),
    linear-gradient(135deg, #dce9f7, #f6faff);
}

.modal-media img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
}

.modal-body {
  min-width: 0;
  padding-right: 44px;
}

.modal-body h2 {
  margin: 0 0 12px;
  color: var(--strong);
  font-size: 1.55rem;
  line-height: 1.25;
}

.modal-body h3 {
  margin: 18px 0 8px;
  color: var(--strong);
  font-size: 1.05rem;
}

.modal-body p,
.modal-body li {
  color: var(--muted);
}

@media (max-width: 760px) {
  .content-modal {
    padding: 14px;
  }

  .content-modal-panel {
    max-height: calc(100vh - 28px);
    padding: 22px;
  }

  .modal-layout {
    grid-template-columns: 1fr;
  }

  .modal-body {
    padding-right: 0;
  }
}

.hero-process {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(250px, 1.35fr);
  align-items: center;
  min-height: 176px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 18px;
  padding: 22px 20px;
  color: #ffffff;
  background:
    radial-gradient(circle at 78% 20%, rgba(64, 219, 210, 0.22), transparent 28%),
    linear-gradient(125deg, #062c54 0%, #075e88 56%, #008a91 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.hero-process::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  background-image: radial-gradient(rgba(255, 255, 255, 0.65) 0.8px, transparent 0.8px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
}

.hero-process-copy {
  position: relative;
  z-index: 2;
}

.hero-process-copy span {
  display: block;
  margin-bottom: 8px;
  color: #7ee5dd;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-process-copy strong {
  display: block;
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  line-height: 1.38;
  letter-spacing: -0.015em;
}

.separation-visual {
  contain: layout paint;
  position: relative;
  height: 132px;
  min-width: 0;
}

.visual-label {
  position: absolute;
  top: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.visual-label-feed {
  left: 8%;
}

.visual-label-product {
  right: 4%;
}

.flow-line {
  position: absolute;
  left: 3%;
  right: 3%;
  height: 1px;
  opacity: 0.32;
  background: linear-gradient(90deg, transparent, #9fe5f2 20%, #9fe5f2 80%, transparent);
}

.flow-line::after {
  content: "";
  position: absolute;
  right: 2%;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #d9fbff;
  border-right: 1px solid #d9fbff;
  transform: rotate(45deg);
}

.flow-line-one {
  top: 48px;
}

.flow-line-two {
  top: 99px;
}

.membrane-layer {
  position: absolute;
  left: 50%;
  top: 20px;
  z-index: 2;
  width: 22px;
  height: 104px;
  transform: translateX(-50%) rotate(4deg);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(158, 241, 236, 0.84));
  box-shadow: 0 0 26px rgba(114, 235, 226, 0.38);
  animation: membrane-breathe 3.8s ease-in-out infinite;
}

.membrane-layer i {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #087087;
  box-shadow: inset 0 1px 2px rgba(0, 25, 48, 0.55);
}

.membrane-layer i:nth-child(1) { top: 9px; }
.membrane-layer i:nth-child(2) { top: 29px; }
.membrane-layer i:nth-child(3) { top: 49px; }
.membrane-layer i:nth-child(4) { top: 69px; }
.membrane-layer i:nth-child(5) { top: 89px; }

.particle {
  position: absolute;
  z-index: 3;
  left: 5%;
  top: var(--particle-y);
  width: var(--particle-size, 9px);
  height: var(--particle-size, 9px);
  border-radius: 50%;
  opacity: 0;
}

.particle-pass {
  animation: particle-pass 4.8s linear infinite;
  animation-delay: var(--particle-delay);
}

.particle-reject {
  animation: particle-reject 5.2s ease-in-out infinite;
  animation-delay: var(--particle-delay);
}

.particle-cyan {
  background: #a7f7ff;
  box-shadow: 0 0 12px rgba(167, 247, 255, 0.9);
}

.particle-green {
  background: #7df0b2;
  box-shadow: 0 0 12px rgba(125, 240, 178, 0.9);
}

.particle-large,
.particle-medium {
  border: 2px solid #ffd07a;
  background: rgba(255, 171, 64, 0.28);
  box-shadow: 0 0 14px rgba(255, 190, 92, 0.65);
}

.particle-large {
  --particle-size: 17px;
}

.particle-medium {
  --particle-size: 13px;
}

.particle-one { --particle-y: 42px; --particle-delay: -0.4s; }
.particle-two { --particle-y: 92px; --particle-delay: -1.7s; }
.particle-three { --particle-y: 63px; --particle-delay: -3.1s; }
.particle-four { --particle-y: 112px; --particle-delay: -4.2s; }
.particle-five { --particle-y: 30px; --particle-delay: -1s; }
.particle-six { --particle-y: 78px; --particle-delay: -3.7s; }
.particle-seven { --particle-y: 103px; --particle-delay: -2.4s; }

@keyframes particle-pass {
  0% {
    left: 5%;
    opacity: 0;
    transform: translateY(0) scale(0.7);
  }
  12%, 82% {
    opacity: 1;
  }
  48% {
    transform: translateY(-4px) scale(1);
  }
  100% {
    left: 91%;
    opacity: 0;
    transform: translateY(3px) scale(0.75);
  }
}

@keyframes particle-reject {
  0% {
    left: 5%;
    opacity: 0;
    transform: translateY(0) scale(0.7);
  }
  14%, 72% {
    opacity: 1;
  }
  53% {
    left: 41%;
    transform: translateY(-5px) scale(1);
  }
  100% {
    left: 17%;
    opacity: 0;
    transform: translateY(5px) scale(0.8);
  }
}

@keyframes membrane-breathe {
  0%, 100% {
    transform: translateX(-50%) rotate(4deg) scaleY(0.96);
  }
  50% {
    transform: translateX(-50%) rotate(2deg) scaleY(1.03);
  }
}


/* Accessibility ------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
}

main:focus {
  outline: none;
}

/* Capping the iteration count matters: duration alone makes an infinite
   animation flicker at speed instead of stopping. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Scroll reveal - the class is applied by JS, so no-JS visitors are unaffected */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .32s ease-out, transform .32s ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero heading was an h3 styled as a panel title */

.hero-side-title {
  margin: 0 0 14px;
  font-family: "Inter", "Noto Sans KR", Arial, sans-serif;
  font-size: 1.15rem;
  color: var(--strong);
}

/* Featured publications ---------------------------------------------------- */

.publication-featured-section {
  margin-bottom: 28px;
}

.featured-grid {
  gap: 14px;
}

.publication-featured {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border-left: 3px solid var(--brand-secondary);
  box-shadow: 0 8px 22px rgba(15, 43, 70, 0.07);
}

.publication-featured h3 {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.42;
  text-wrap: balance;
}

.publication-featured p {
  margin: 0;
  font-size: 0.88rem;
}

/* Author lists on the featured cards are long; two lines is enough of a cue. */
.publication-featured .publication-authors {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5;
  color: var(--muted);
}

.publication-badge {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.all-publications-title {
  margin-top: 8px;
}

/* Impact cards ------------------------------------------------------------- */

.impact-grid {
  align-items: stretch;
}

.impact-grid .card,
.impact-card {
  height: 100%;
  margin-bottom: 0;
}

/* Home research theme cards ------------------------------------------------ */

.research-theme-card .research-chip-row {
  margin-top: auto;
  padding-top: 12px;
}

/* Alumni ------------------------------------------------------------------- */

.alumni-lead {
  margin-bottom: 16px;
  font-size: 0.94rem;
}

.alumni-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Deliberately lighter than a member card - this is a completed record, not a
   roster entry, and two of these people also appear in the sections above. */
.alumni-card {
  padding: 16px 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(0, 92, 165, 0.28);
  border-radius: 14px;
}

.alumni-card h3 {
  margin: 0 0 6px;
  color: var(--strong);
  font-size: 1.06rem;
}

.alumni-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.alumni-card > p + p {
  margin-top: 4px;
}

.alumni-card .alumni-degree {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--text);
  font-weight: 600;
}

.alumni-card .alumni-period {
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.alumni-card .alumni-research {
  font-size: 0.85rem;
}

.alumni-card .alumni-now {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--strong);
}

.alumni-card .alumni-now span {
  margin-right: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* Members / alumni responsive ---------------------------------------------- */

/* .member-grid and .alumni-grid are both declared well below the shared 720px
   breakpoint block, and a media query carries no extra specificity - so the
   stacking rules written up there lost to the two-column base rules and the
   roster stayed two-up on a phone, overflowing the viewport. These overrides
   must stay after both definitions. */
@media (max-width: 720px) {
  .member-grid,
  .alumni-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Internship" and the longer names are single words that can outgrow the text
   column next to the photo, and they spill past the card edge without this. */
.member-card-compact .profile-label,
.member-card-compact h3 {
  overflow-wrap: break-word;
}

/* Brand accents ------------------------------------------------------------ */

/* Section headings carry a short gradient rule. 190px reads as an accent at the
   heading sizes actually used; shorter and the ramp has no room to show, full
   width and it becomes a divider that cuts the heading off from its lead. */
.section-title::after,
.section-title-sm::after,
.hero-side-title::after {
  content: "";
  display: block;
  width: 190px;
  max-width: 100%;
  height: 5px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--ms3l-gradient);
}

.hero-side-title::after {
  width: 60px;
  height: 4px;
  margin-top: 9px;
}

/* The page header card gets the same rule along its top edge. */
.page-card {
  position: relative;
  overflow: hidden;
}

.page-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--ms3l-gradient);
}

/* Card left edges. Applied to the two grids that carry real content cards,
   not to .card everywhere - the compact list cards would look busy. */
.home-overview-grid .card,
.research-theme-card {
  position: relative;
  overflow: hidden;
}

.home-overview-grid .card::before,
.research-theme-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ms3l-gradient);
}

/* Institutional mark ------------------------------------------------------- */

.brand-marks {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark-divider {
  width: 1px;
  height: 26px;
  background: var(--line);
  flex: none;
}

.brand-affiliation {
  height: 26px;
  width: auto;
  display: block;
}

.footer-affiliation {
  height: 30px;
  width: auto;
  display: block;
  margin-top: 12px;
}

@media (max-width: 560px) {
  .brand-affiliation { height: 21px; }
  .brand-mark-divider { height: 21px; }
  .brand-marks { gap: 10px; }
}