:root {
  --ink: #244349;
  --ink-deep: #12343b;
  --ink-soft: #52676a;
  --paper: #fff8e7;
  --paper-deep: #fce8b7;
  --white: #ffffff;
  --coral: #bf4530;
  --coral-bright: #f69cab;
  --sea: #299eb2;
  --sea-light: #d8f3ed;
  --bun: #f4c367;
  --sponge: #ffde55;
  --lettuce: #7cae6e;
  --tomato: #e96b53;
  --line: rgba(36, 67, 73, .16);
  --shadow: 0 22px 58px rgba(36, 67, 73, .13);
  --display: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --sans: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .08;
  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='.18'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 100;
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--coral-bright);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 84px;
  padding: 0 max(28px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.scrolled {
  background: rgba(255, 248, 231, .95);
  border-color: var(--line);
  box-shadow: 0 8px 32px rgba(9, 37, 42, .06);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 13px; }
.brand img { width: 46px; height: 46px; border-radius: 15px; box-shadow: 0 9px 24px rgba(18, 58, 89, .18); }
.brand span { display: flex; flex-direction: column; line-height: 1.15; }
.brand strong { font-family: var(--display); font-size: 17px; letter-spacing: .08em; }
.brand small { margin-top: 5px; color: var(--ink-soft); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.3vw, 32px); }
.site-nav a { position: relative; font-size: 13px; letter-spacing: .04em; }
.site-nav a::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; background: var(--coral); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.nav-toggle > span:not(.sr-only) { display: block; width: 100%; height: 2px; margin: 5px 0; background: var(--ink); transition: transform .25s ease, opacity .25s ease; }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr);
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
  padding: 120px max(28px, calc((100vw - var(--max)) / 2)) 54px;
  background: radial-gradient(circle at 77% 20%, color-mix(in srgb, var(--sea-light) 76%, transparent), transparent 34%), linear-gradient(155deg, var(--paper), color-mix(in srgb, var(--bun) 18%, var(--paper)) 68%, var(--paper));
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 84px 0 0;
  z-index: -2;
  opacity: .07;
  background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 76%, transparent);
}

.hero::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -170px;
  bottom: -180px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tomato) 24%, transparent), transparent 68%);
}

.hero-orbit { position: absolute; z-index: -1; border: 1px solid color-mix(in srgb, var(--sea) 27%, transparent); border-radius: 50%; }
.orbit-one { width: 620px; height: 620px; right: 7vw; top: 16%; }
.orbit-two { width: 760px; height: 760px; right: -2vw; top: 8%; border-style: dashed; animation: orbit 40s linear infinite; }

@keyframes orbit { to { transform: rotate(360deg); } }

.eyebrow { margin: 0 0 24px; color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.hero h1 { max-width: 760px; margin: 0; font-family: var(--display); font-size: clamp(58px, 7vw, 100px); font-weight: 600; line-height: .96; letter-spacing: -.045em; }
.hero h1 em { display: block; color: var(--coral); font-style: normal; }
.hero-lead { max-width: 690px; margin: 27px 0 0; color: var(--ink-soft); font-family: var(--display); font-size: clamp(18px, 1.75vw, 25px); line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 25px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .06em; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: var(--paper); background: var(--ink-deep); box-shadow: 7px 7px 0 var(--bun); }
.button-primary:hover { color: var(--paper); background: var(--coral); border-color: var(--coral); box-shadow: 5px 5px 0 var(--sea-light); }
.button-ghost { background: rgba(245, 240, 230, .42); }
.button-ghost:hover { color: var(--paper); background: var(--ink); }

.character-friends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin-top: 30px; }
.character-friend { display: grid; place-items: center; min-width: 0; padding: 12px 8px 13px; border: 1px solid var(--line); border-bottom: 5px solid var(--accent); border-radius: 22px; color: var(--ink-deep); background: color-mix(in srgb, var(--accent) 26%, var(--paper)); box-shadow: 5px 6px 0 color-mix(in srgb, var(--bun) 55%, var(--paper)); font-size: 12px; font-weight: 800; letter-spacing: .05em; transition: transform .25s ease, box-shadow .25s ease; }
.character-friend:hover, .character-friend:focus-visible { transform: translateY(-6px) rotate(-2deg); box-shadow: 7px 10px 0 color-mix(in srgb, var(--bun) 65%, var(--paper)); }
.sponge-friend { --accent: var(--sponge); }
.patrick-friend { --accent: var(--coral-bright); }
.krabs-friend { --accent: var(--tomato); }
.character-image-wrap { display: grid; place-items: center; width: 100%; height: 110px; margin-bottom: 5px; }
.character-image-wrap { overflow: hidden; border-radius: 12px; }
.character-image-wrap img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; object-position: center; }
.character-fallback { font-size: 70px; line-height: 1; }

.hero-card {
  position: relative;
  min-height: 530px;
  padding: 30px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--bun);
  border-radius: 30px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-card::after { content: ""; position: absolute; right: -55px; bottom: -55px; width: 190px; height: 190px; border: 38px solid var(--sea-light); border-radius: 50%; opacity: .9; }
.hero-card.photo-mode { padding: 0; border-top: 0; }
.hero-card.photo-mode::after { display: none; }
.hero-coordinate-visual { min-height: 465px; }
.hero-lab-photo { position: absolute; inset: 0; margin: 0; }
.hero-lab-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-lab-photo figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 72px 28px 24px; color: var(--white); background: linear-gradient(transparent, rgba(18, 58, 89, .86)); font-family: var(--display); font-size: 14px; }
.specimen-label { font-size: 10px; letter-spacing: .22em; opacity: .66; }
.coordinate-map { position: relative; height: 370px; margin-top: 32px; border: 1px solid var(--line); background-image: radial-gradient(circle at center, color-mix(in srgb, var(--lettuce) 20%, transparent), transparent 56%); }
.coordinate-axis { position: absolute; background: rgba(37, 54, 47, .2); }
.axis-x { top: 50%; left: 7%; width: 86%; height: 1px; }
.axis-y { left: 50%; top: 7%; width: 1px; height: 86%; }
.node { position: absolute; display: grid; place-items: center; width: 82px; height: 82px; border: 1px solid rgba(37, 54, 47, .3); border-radius: 50%; font-family: var(--display); font-size: 12px; letter-spacing: .12em; background: rgba(255, 255, 255, .9); }
.node-a { top: 10%; left: 11%; }
.node-b { top: 9%; right: 9%; }
.node-c { right: 15%; bottom: 8%; }
.node-d { left: 9%; bottom: 11%; }
.pulse { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 12px rgba(231, 101, 71, .12), 0 0 0 28px rgba(231, 101, 71, .07); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.14); box-shadow: 0 0 0 18px rgba(231, 101, 71, .1), 0 0 0 42px rgba(231, 101, 71, 0); } }
.coordinate-caption { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 12px; letter-spacing: .12em; }
.coordinate-caption i { flex: 1; height: 1px; background: rgba(37, 54, 47, .22); }
.hero-index { position: absolute; right: max(28px, calc((100vw - var(--max)) / 2)); bottom: 28px; font: 10px/1 var(--sans); letter-spacing: .18em; writing-mode: vertical-rl; }

.news-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; min-height: 74px; padding: 16px max(28px, calc((100vw - var(--max)) / 2)); color: var(--ink-deep); background: var(--bun); }
.news-strip span, .news-strip a { font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.news-strip p { margin: 0; font-family: var(--display); font-size: 15px; }
.news-strip a { padding-bottom: 3px; border-bottom: 1px solid currentColor; }

.section { max-width: var(--max); margin: 0 auto; padding: 135px 28px; }
.section-label { display: flex; align-items: center; gap: 18px; margin-bottom: 54px; }
.section-label span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--display); font-size: 12px; background: var(--white); box-shadow: 3px 3px 0 var(--bun); }
.section-label p { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.section-title { margin: 0; font-family: var(--display); font-size: clamp(40px, 5.6vw, 76px); font-weight: 500; line-height: 1.16; letter-spacing: -.035em; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 64px; }
.section-heading > p { max-width: 400px; margin: 0 0 8px; color: var(--ink-soft); }

.about-section { padding-top: 150px; }
.about-layout { display: grid; grid-template-columns: 1.07fr .93fr; gap: clamp(50px, 10vw, 150px); }
.about-copy { padding-top: 18px; }
.about-copy > p { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 2; }
.about-copy blockquote { position: relative; margin: 48px 0 0; padding: 28px 0 0 42px; border-top: 1px solid var(--ink); font-family: var(--display); font-size: 23px; line-height: 1.7; }
.about-copy blockquote::before { content: "“"; position: absolute; left: 0; top: 18px; color: var(--coral); font-size: 58px; line-height: 1; }

.research-section { max-width: none; padding-right: max(28px, calc((100vw - var(--max)) / 2)); padding-left: max(28px, calc((100vw - var(--max)) / 2)); background: var(--paper-deep); }
.research-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.research-card { min-height: 390px; padding: 34px 30px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255, 255, 255, .82); box-shadow: 0 14px 36px rgba(48, 104, 130, .07); transition: color .3s ease, background .3s ease, transform .3s ease; }
.research-card:hover { color: var(--paper); background: var(--ink); transform: translateY(-9px); }
.research-card-index { color: var(--coral); font-family: var(--display); font-size: 54px; line-height: 1; }
.research-card h3 { margin: 68px 0 6px; font-family: var(--display); font-size: 31px; font-weight: 500; }
.research-card small { color: var(--ink-soft); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; transition: color .3s ease; }
.research-card:hover small { color: var(--sea-light); }
.research-card p { margin: 26px 0 0; color: var(--ink-soft); transition: color .3s ease; }
.research-card:hover p { color: rgba(245, 240, 230, .78); }
.keyword-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 30px; }
.keyword-list span { padding: 5px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; opacity: .72; }

.publication-tools { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 24px; }
.search-field { display: flex; align-items: center; gap: 10px; width: min(100%, 420px); padding: 0 14px; border-bottom: 1px solid var(--ink); }
.search-field svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.search-field input { width: 100%; padding: 12px 0; border: 0; outline: none; color: var(--ink); background: transparent; }
.search-field input::placeholder { color: rgba(18, 52, 58, .48); }
.filter-chips, .people-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 12px; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.chip:hover, .chip.active { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.publication-list { border-top: 1px solid var(--ink); }
.publication-item { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 28px; align-items: start; padding: 34px 8px; border-bottom: 1px solid var(--line); transition: padding .2s ease, background .2s ease; }
.publication-item:hover { padding-right: 18px; padding-left: 18px; background: rgba(217, 241, 245, .36); }
.publication-year { color: var(--coral); font-family: var(--display); font-size: 30px; }
.publication-main h3 { max-width: 820px; margin: 0; font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; line-height: 1.45; }
.publication-main p { margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; }
.publication-contributions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.publication-contribution { max-width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--paper); font-size: 12px; overflow-wrap: anywhere; }
.publication-meta { margin-top: 7px !important; font-style: italic; }
.publication-actions { display: flex; gap: 8px; padding-top: 4px; }
.mini-link { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 36px; padding: 0 11px; border: 1px solid var(--ink); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; transition: color .2s ease, background .2s ease; }
.mini-link:hover { color: var(--paper); background: var(--coral); border-color: var(--coral); }
.empty-state { padding: 30px; text-align: center; color: var(--ink-soft); border: 1px dashed var(--line); }

.research-projects-section { max-width: var(--max); }
.research-project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.research-project-card { display: flex; flex-direction: column; min-height: 390px; padding: 32px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(150deg, rgba(255,255,255,.9), color-mix(in srgb, var(--sea-light) 62%, var(--white))); box-shadow: 0 16px 42px rgba(48, 104, 130, .08); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.research-project-card:hover { transform: translateY(-7px); border-color: var(--sea); box-shadow: var(--shadow); }
.research-project-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.research-project-index { color: var(--coral); font-family: var(--display); font-size: 42px; line-height: 1; }
.research-project-status { padding: 6px 11px; border-radius: 999px; color: var(--ink-deep); background: var(--sea-light); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.research-project-card h3 { margin: 48px 0 0; font-family: var(--display); font-size: clamp(27px, 3vw, 39px); font-weight: 500; line-height: 1.35; }
.research-project-source { margin: 10px 0 0; color: var(--coral); font-size: 12px; font-weight: 700; }
.research-project-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.research-project-facts div { min-width: 0; }
.research-project-facts dt { color: var(--ink-soft); font-size: 9px; letter-spacing: .08em; }
.research-project-facts dd { margin: 5px 0 0; font-size: 12px; font-weight: 700; word-break: break-word; }
.research-project-description { margin: 24px 0 0; color: var(--ink-soft); }

.projects-section { max-width: none; padding-right: max(28px, calc((100vw - var(--max)) / 2)); padding-left: max(28px, calc((100vw - var(--max)) / 2)); color: var(--ink); background: color-mix(in srgb, var(--coral) 12%, var(--paper)); }
.projects-section .section-label span { border-color: var(--ink); }
.projects-section .section-heading > p { color: var(--ink-soft); }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.project-card { position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: end; padding: 34px; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: rgba(255, 255, 255, .84); box-shadow: 0 16px 40px rgba(95, 97, 130, .08); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.project-card:hover { transform: translateY(-8px); border-color: var(--coral); }
.project-cover-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.project-cover-media img { width: 100%; height: 100%; object-fit: cover; }
.project-cover-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 37, 42, .98) 10%, rgba(9, 37, 42, .18) 88%); }
.project-card.has-cover { color: var(--paper); }
.project-card.has-cover p { color: rgba(248, 250, 247, .78); }
.project-card > :not(.project-cover-media) { position: relative; z-index: 1; }
.project-status { position: absolute; top: 28px; left: 28px; padding: 6px 11px; border: 1px solid var(--coral); border-radius: 999px; color: var(--coral-bright); font-size: 10px; letter-spacing: .12em; }
.project-year { margin-left: auto; color: var(--sea); font-family: var(--display); font-size: 60px; opacity: .24; }
.project-card h3 { margin: 0; font-family: var(--display); font-size: 39px; font-weight: 500; }
.project-card h4 { margin: 4px 0 0; color: var(--coral); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.project-card p { max-width: 610px; margin: 22px 0 0; color: var(--ink-soft); }
.project-card .keyword-list { margin-top: 24px; }

.people-filters { margin-bottom: 34px; }
.people-groups { display: grid; gap: 64px; }
.people-group-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.people-group-heading h3 { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 500; }
.people-group-heading span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; color: var(--ink-deep); background: var(--sea-light); font-size: 10px; }
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.person-card { position: relative; min-height: 390px; padding: 18px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255, 255, 255, .82); transition: transform .25s ease, box-shadow .25s ease; }
.person-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.person-portrait { position: relative; height: 235px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg, var(--paper-deep), color-mix(in srgb, var(--coral) 12%, var(--paper))); }
.person-portrait img { width: 100%; height: 100%; object-fit: cover; }
.person-initials { color: var(--ink); font-family: var(--display); font-size: 58px; opacity: .42; }
.person-degree { position: absolute; top: 12px; right: 12px; padding: 5px 9px; border-radius: 999px; color: var(--paper); background: var(--ink); font-size: 10px; letter-spacing: .08em; }
.person-card h3 { margin: 22px 0 3px; font-family: var(--display); font-size: 23px; font-weight: 600; }
.person-role { margin: 0; color: var(--coral); font-size: 11px; font-weight: 700; }
.person-bio { margin: 13px 0 0; color: var(--ink-soft); font-size: 13px; }
.person-card.placeholder { border-style: dashed; }

.join-section { position: relative; min-height: 760px; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(60px, 10vw, 150px); align-items: center; padding: 120px max(28px, calc((100vw - var(--max)) / 2)); background: var(--paper-deep); overflow: hidden; }
.join-copy { position: relative; z-index: 1; }
.join-copy h2 { max-width: 760px; margin: 0; font-family: var(--display); font-size: clamp(45px, 6vw, 82px); font-weight: 500; line-height: 1.13; letter-spacing: -.04em; }
.join-copy > p:not(.eyebrow) { max-width: 720px; margin: 28px 0 0; color: var(--ink-soft); font-size: 16px; }
.join-copy small { display: block; margin-top: 24px; color: var(--ink-soft); }
.position-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.position-list span { padding: 8px 13px; border: 1px solid rgba(18, 52, 58, .42); border-radius: 999px; font-size: 12px; }
.join-watermark { position: absolute; left: -25px; bottom: -125px; color: rgba(255, 255, 255, .58); font-family: var(--display); font-size: 320px; font-weight: 700; line-height: 1; letter-spacing: -.08em; }
.contact-card { position: relative; z-index: 1; padding: 40px; border-radius: 30px; color: var(--paper); background: var(--ink-deep); box-shadow: var(--shadow); }
.contact-number { position: absolute; top: 24px; right: 26px; color: var(--coral); font-family: var(--display); font-size: 42px; }
.contact-card h3 { margin: 0 0 44px; font-family: var(--display); font-size: 32px; font-weight: 500; }
.contact-card dl { margin: 0; }
.contact-card dl div { padding: 18px 0; border-top: 1px solid rgba(245, 240, 230, .18); }
.contact-card dt { margin-bottom: 6px; color: var(--sea-light); font-size: 9px; letter-spacing: .18em; }
.contact-card dd { margin: 0; color: rgba(245, 240, 230, .84); font-size: 13px; word-break: break-word; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; padding: 46px max(28px, calc((100vw - var(--max)) / 2)); color: var(--paper); background: var(--ink-deep); border-top: 1px solid rgba(245, 240, 230, .16); }
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-brand img { width: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; }
.footer-brand span { display: flex; flex-direction: column; line-height: 1.25; }
.footer-brand strong { font-family: var(--display); }
.footer-brand small { margin-top: 4px; color: var(--sea-light); font-size: 10px; }
.site-footer > p { margin: 0; color: rgba(245, 240, 230, .58); font-family: var(--display); text-align: center; }
.footer-meta { display: flex; gap: 18px; font-size: 10px; letter-spacing: .08em; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 80; max-width: min(380px, calc(100vw - 48px)); padding: 14px 18px; color: var(--paper); background: var(--ink); box-shadow: var(--shadow); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 12px; }
  .hero { grid-template-columns: 1fr .7fr; gap: 45px; }
  .hero-card { min-height: 460px; }
  .character-image-wrap { height: 98px; }
  .character-friend { font-size: 10px; }
  .coordinate-map { height: 310px; }
  .research-grid { grid-template-columns: repeat(2, 1fr); }
  .people-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .site-header { height: 74px; padding: 0 20px; }
  .brand img { width: 41px; height: 41px; }
  .brand small { display: none; }
  .nav-toggle { display: block; z-index: 2; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 90px 28px; color: var(--paper); background: rgba(9, 37, 42, .98); transform: translateX(100%); transition: transform .35s ease; }
  .site-nav.open { transform: translateX(0); }
  .site-nav a { font-family: var(--display); font-size: 30px; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 145px 24px 80px; }
  .hero h1 { font-size: clamp(54px, 14vw, 84px); }
  .hero-card { min-height: 430px; }
  .character-friends { max-width: 580px; }
  .character-image-wrap { height: 118px; }
  .hero-index { display: none; }
  .news-strip { grid-template-columns: 1fr auto; padding: 18px 24px; }
  .news-strip span { display: none; }
  .section { padding: 100px 24px; }
  .about-layout, .join-section { grid-template-columns: 1fr; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 22px; }
  .research-grid { grid-template-columns: 1fr; }
  .research-card { min-height: auto; }
  .research-card h3 { margin-top: 35px; }
  .publication-tools { align-items: stretch; flex-direction: column; }
  .publication-item { grid-template-columns: 78px 1fr; }
  .publication-actions { grid-column: 2; }
  .research-project-list { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .join-section { padding: 105px 24px; }
  .join-watermark { font-size: 220px; }
  .site-footer { grid-template-columns: 1fr; text-align: left; }
  .site-footer > p { text-align: left; }
}

@media (max-width: 540px) {
  .character-friends { gap: 8px; margin-top: 34px; }
  .character-friend { padding: 8px 3px 9px; border-radius: 17px; font-size: 10px; box-shadow: 3px 4px 0 color-mix(in srgb, var(--bun) 55%, var(--paper)); }
  .character-image-wrap { height: 86px; }
  .character-fallback { font-size: 50px; }
  .hero-card { min-height: 390px; padding: 22px; }
  .coordinate-map { height: 285px; }
  .node { width: 67px; height: 67px; font-size: 10px; }
  .news-strip { grid-template-columns: 1fr; gap: 8px; }
  .section-title { font-size: 42px; }
  .publication-item { grid-template-columns: 1fr; gap: 8px; }
  .publication-actions { grid-column: auto; }
  .research-project-card { min-height: auto; padding: 26px 22px; }
  .research-project-card h3 { margin-top: 34px; }
  .research-project-facts { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: 1fr; }
  .person-portrait { height: 300px; }
  .contact-card { padding: 30px 24px; }
  .footer-meta { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}