:root {
  --accent-4: #fbbf24;
  --gradient-text: linear-gradient(135deg, #f0f4ff 0%, #c4d4f7 40%, #a78bfa 70%, #22d3ee 100%);
  --gradient-accent: linear-gradient(135deg, #a78bfa, #22d3ee, #f472b6);
  --gradient-warm: linear-gradient(135deg, #f472b6, #fbbf24, #a78bfa);
}

body {
  background: #06080e;
}

.nav-menu-btn {
  display: none;
}

.nav-menu-icon {
  font-size: 16px;
  line-height: 1;
}

.nav-menu-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.lang-switch-btn {
  min-width: 48px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.lang-switch-btn.active {
  background: rgba(167,139,250,.18);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.3);
}

.lang-switch-mobile {
  margin: 24px 0 0;
  justify-content: center;
}

/* keep page layers clean */
.drawer,
.lightbox,
.project-detail,
.mobile-menu {
  visibility: hidden;
}

.drawer.open,
.lightbox.open,
.project-detail.open,
.mobile-menu.open {
  visibility: visible;
}

/* stronger hero but no layout overrides */
.hero {
  min-height: 92svh;
  padding: 108px 0 76px;
}

.hero-image-grid {
  animation: heroGridPulse 12s ease-in-out infinite;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  contain: layout paint;
  will-change: opacity;
}

.hero-img {
  border-radius: 8px;
  min-height: 160px;
  background-color: rgba(255, 255, 255, .035);
}

.hero-overlay {
  background:
    linear-gradient(100deg, rgba(7, 10, 18, .94) 0%, rgba(7, 10, 18, .78) 44%, rgba(7, 10, 18, .92) 100%),
    linear-gradient(180deg, rgba(224, 179, 91, .11) 0%, transparent 44%),
    linear-gradient(0deg, var(--bg) 0%, transparent 36%);
}

@keyframes heroGridPulse {
  0%, 100% { opacity: 0.24; }
  50% { opacity: 0.32; }
}

.hero-title {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 80px rgba(167, 139, 250, 0.22);
}

.hero-actions,
.gateway-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.hero-action,
.gateway-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.hero-action.primary,
.gateway-action.primary {
  border-color: rgba(224, 179, 91, .55);
  background: rgba(224, 179, 91, .12);
  color: var(--accent);
}

.hero-action.contact {
  border-color: rgba(126, 201, 214, .48);
  background: rgba(126, 201, 214, .1);
  color: #bfe9ef;
}

.hero-action.contact-static {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #e7dfd2;
  cursor: default;
}

.hero-action.contact-static:hover {
  cursor: default;
}

.hero-action:hover,
.gateway-action:hover {
  transform: translateY(-2px);
  border-color: rgba(224, 179, 91, .62);
  background: rgba(224, 179, 91, .08);
}

.hero-action.contact-static:hover {
  transform: none;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
}

.footer-inner {
  gap: 24px;
}

.footer-right {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.footer-contact-link,
.footer-contact-item {
  display: grid;
  gap: 3px;
  min-width: 168px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  text-decoration: none;
}

.footer-contact-link {
  border-color: rgba(126, 201, 214, .36);
  background: rgba(126, 201, 214, .08);
}

.footer-contact-link:hover {
  border-color: rgba(126, 201, 214, .62);
  background: rgba(126, 201, 214, .12);
}

.footer-contact span {
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.3;
}

.footer-contact strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.article-gateway {
  position: relative;
  overflow: hidden;
}

.article-gateway::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(224, 179, 91, .08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
  opacity: .36;
}

.gateway-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr);
  gap: 28px;
  align-items: start;
}

.gateway-copy {
  position: sticky;
  top: 110px;
  padding: 8px 0;
}

.gateway-copy .section-title,
.gateway-copy .section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.gateway-copy .section-title::after {
  margin-left: 0;
  margin-right: 0;
}

.gateway-copy .section-subtitle {
  max-width: 520px;
  line-height: 1.8;
}

.gateway-actions {
  justify-content: flex-start;
  margin-top: 24px;
}

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

.gateway-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  min-height: 228px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(16, 24, 44, .9), rgba(8, 12, 21, .92));
  color: var(--text);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.gateway-card-major {
  grid-row: span 2;
  min-height: 468px;
  background:
    linear-gradient(180deg, rgba(224, 179, 91, .13), rgba(16, 24, 44, .9) 42%, rgba(8, 12, 21, .95));
}

.gateway-card:hover {
  transform: translateY(-3px);
  border-color: rgba(224, 179, 91, .5);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

.gateway-card-index {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}

.gateway-card-title {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.45;
}

.gateway-card-major .gateway-card-title {
  font-size: 24px;
}

.gateway-card-desc {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.72;
}

.gateway-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted-2);
  font-size: 12px;
}

.gateway-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.gateway-card-tags span,
.gateway-topic span {
  color: var(--muted-2);
  font-size: 12px;
}

.gateway-card-tags span {
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}

.gateway-topic-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.gateway-topic {
  display: grid;
  gap: 6px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.gateway-topic:hover {
  transform: translateY(-2px);
  border-color: rgba(67, 226, 209, .42);
  background: rgba(67, 226, 209, .07);
}

.entity-entry-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 34px auto 0;
  max-width: 980px;
}

.entity-entry {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 15px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  text-decoration: none;
  transition: transform .24s ease, border-color .24s ease, background .24s ease;
}

.entity-entry:hover {
  transform: translateY(-3px);
  border-color: rgba(224, 179, 91, .52);
  background: rgba(224, 179, 91, .07);
}

.entity-entry-title {
  font-size: 15px;
  line-height: 1.25;
}

.entity-entry-note {
  color: var(--muted);
  font-size: 12px;
}

.section-title {
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: var(--gradient-accent);
  opacity: 0.8;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.glass {
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* visual archive */
.visual-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 22px;
  align-items: start;
}

.visual-copy {
  position: sticky;
  top: 110px;
}

.visual-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -.6px;
}

.visual-text {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 20px;
}

.visual-collections {
  display: grid;
  gap: 28px;
}

.visual-collection {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(17,22,34,.82), rgba(10,14,24,.92));
}

.visual-collection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.visual-collection-title {
  font-size: 24px;
  font-weight: 800;
}

.visual-collection-count {
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.visual-collection-desc {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.visual-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  grid-auto-flow: dense;
}

.visual-photo {
  width: 100%;
  height: 176px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
  filter: saturate(.96) contrast(1.02);
  cursor: pointer;
}

.visual-photo:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 28px 80px rgba(0,0,0,0.48);
  filter: saturate(1.04) contrast(1.06);
}

.visual-photo.tall {
  grid-row: span 2;
  height: 364px;
}

.visual-photo.wide {
  grid-column: span 2;
}

.visual-photo:nth-child(6n + 2) {
  border-radius: 28px 18px 22px 14px;
}

.visual-photo:nth-child(6n + 5) {
  border-radius: 16px 26px 14px 24px;
}

.visual-photo:nth-child(8n + 3) {
  filter: saturate(1.04) contrast(1.06);
}

/* atlas */
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.atlas-card {
  background: linear-gradient(180deg, rgba(16,24,44,.95), rgba(10,15,26,.96));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.atlas-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(155,127,255,.12), transparent 55%);
  opacity: .8;
  pointer-events: none;
}

.atlas-card.span-2 {
  grid-column: span 2;
}

.atlas-card-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.atlas-card-head h3 {
  font-size: 22px;
  font-weight: 700;
}

.atlas-card-head span {
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.theme-spectrum,
.top-stories,
.year-river {
  display: grid;
  gap: 10px;
  position: relative;
}

.spectrum-row,
.year-node {
  width: 100%;
  border: none;
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text);
  cursor: pointer;
  transition: transform .22s ease, background .22s ease;
}

.spectrum-row {
  display: grid;
  grid-template-columns: 108px 1fr 38px;
  gap: 14px;
  align-items: center;
}

.spectrum-row:hover,
.year-node:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,.06);
}

.spectrum-name,
.spectrum-count {
  font-size: 13px;
  font-weight: 600;
}

.spectrum-bar,
.year-bar {
  height: 10px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}

.spectrum-fill,
.year-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.story-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: all .25s ease;
}

.story-row:hover {
  transform: translateY(-2px);
  border-color: rgba(155,127,255,.35);
  background: rgba(255,255,255,.05);
}

.story-rank {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(155,127,255,.15);
  color: var(--accent);
  font-weight: 800;
}

.story-main {
  display: grid;
  gap: 5px;
}

.story-main strong {
  font-size: 14px;
  line-height: 1.45;
}

.story-main em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted-2);
}

.story-score {
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 700;
}

.year-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.year-label {
  font-size: 16px;
  font-weight: 700;
}

.year-total,
.year-breakdown {
  font-size: 12px;
  color: var(--muted-2);
}

.year-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* article extras */
.articles-meta {
  margin-bottom: 18px;
  color: var(--muted-2);
  font-size: 13px;
}

.article-digest,
.drawer-article-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 12px;
}

.article-chip-row,
.drawer-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}

.mini-chip-accent {
  color: var(--accent-2);
  border-color: rgba(67,226,209,.16);
  background: rgba(67,226,209,.08);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 52px 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
}

mark {
  background: rgba(244,114,182,.18);
  color: var(--text);
  padding: 0 4px;
  border-radius: 4px;
}

/* network */
.network-section {
  padding: 110px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 50%, var(--bg) 100%);
  position: relative;
  overflow: hidden;
}

.network-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(167,139,250,.08) 0%, transparent 60%);
  pointer-events: none;
}

.network-container {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.network-sidebar {
  position: sticky;
  top: 100px;
}

.network-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 16px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.network-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 24px;
}

.network-legend {
  display: grid;
  gap: 12px;
}

.network-legend-bottom {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--muted);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-dot.project { background: var(--accent); }
.legend-dot.theme { background: var(--accent-2); }
.legend-dot.method { background: var(--accent-3); }
.legend-dot.account { background: #fbbf24; }

.network-canvas-wrap {
  position: relative;
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  min-height: 600px;
}

.network-canvas {
  width: 100% !important;
  max-width: 100% !important;
  height: 600px;
  display: block;
  cursor: grab;
}

.network-node-info,
.network-node-info.visible {
  display: none !important;
}

.node-info-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.node-info-type,
.node-info-count {
  font-size: 13px;
  color: var(--muted);
}

.node-info-type {
  color: var(--accent-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.node-info-btn {
  margin-top: 12px;
  padding: 10px 20px;
  background: var(--gradient-accent);
  border: none;
  border-radius: 999px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.network-mobile-explorer {
  grid-column: 1 / -1;
  display: none;
}

.network-mobile-intro {
  margin: 18px 18px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.16);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.network-mobile-intro strong {
  color: var(--text);
  font-weight: 700;
}

.network-mobile-poster {
  display: none;
}

.network-poster-card {
  padding: 14px;
}

.network-poster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.network-poster-kicker {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 4px;
}

.network-poster-title {
  font-size: 20px;
  font-weight: 800;
}

.network-poster-focus {
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 12px;
}

.network-poster-svg {
  width: 100%;
  height: auto;
  display: block;
}

.network-poster-node {
  cursor: pointer;
}

.network-poster-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.network-poster-legend-group {
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
}

.network-poster-legend-title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.network-poster-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.network-poster-legend-pill {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
}

.network-poster-legend-pill.active {
  background: rgba(167,139,250,.16);
  border-color: rgba(167,139,250,.32);
}

.network-focus-card {
  margin: 16px 18px 0;
  padding: 16px;
  border-radius: 18px;
  background: rgba(9,12,20,.92);
  border: 1px solid var(--border);
}

.network-focus-card.project { box-shadow: inset 0 0 0 1px rgba(167,139,250,.12); }
.network-focus-card.theme { box-shadow: inset 0 0 0 1px rgba(34,211,238,.12); }
.network-focus-card.method { box-shadow: inset 0 0 0 1px rgba(244,114,182,.12); }
.network-focus-card.account { box-shadow: inset 0 0 0 1px rgba(251,191,36,.12); }

.network-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.network-focus-badge {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
}

.network-focus-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.network-focus-meta {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.network-focus-action {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.network-related-list,
.network-node-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.network-related-list {
  margin-top: 14px;
}

.network-related-btn,
.network-node-pill {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}

.network-node-pill.active {
  background: rgba(167,139,250,.16);
  border-color: rgba(167,139,250,.34);
}

.network-related-btn.project,
.network-node-pill.project.active { box-shadow: inset 0 0 0 1px rgba(167,139,250,.12); }
.network-related-btn.theme,
.network-node-pill.theme.active { box-shadow: inset 0 0 0 1px rgba(34,211,238,.12); }
.network-related-btn.method,
.network-node-pill.method.active { box-shadow: inset 0 0 0 1px rgba(244,114,182,.12); }
.network-related-btn.account,
.network-node-pill.account.active { box-shadow: inset 0 0 0 1px rgba(251,191,36,.12); }

.network-related-empty {
  color: var(--muted-2);
  font-size: 13px;
}

.network-mobile-groups {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}

.network-mobile-group {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
}

.network-mobile-group-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* long timeline */
.timeline-section {
  padding: 120px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.timeline-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 10%, transparent 90%, var(--bg) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(167,139,250,.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(67,226,209,.05), transparent 55%);
  pointer-events: none;
}

.timeline-header {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
}

.timeline-density-bar {
  margin-top: 18px;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.timeline-density-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
}

.timeline-density-controls {
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

.timeline-density-btn {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.65);
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}

.timeline-density-btn.active {
  background: linear-gradient(135deg, rgba(167,139,250,.24), rgba(67,226,209,.18));
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.timeline-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.timeline-density-current {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 700;
}

.timeline-long {
  position: relative;
  padding: 0 40px;
}

.timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, transparent 0%, rgba(167,139,250,.7) 8%, rgba(67,226,209,.8) 52%, rgba(244,114,182,.75) 90%, transparent 100%);
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: 0 0 32px rgba(167,139,250,.18);
}

.timeline-overview {
  position: relative;
  z-index: 2;
  margin: 0 auto 72px;
  max-width: 980px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(19,23,34,.88), rgba(9,11,18,.92));
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
}

.timeline-overview-title {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 18px;
}

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

.timeline-overview-item {
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.timeline-overview-item strong {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
  color: white;
}

.timeline-overview-item span {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.timeline-year-block {
  display: grid;
  grid-template-columns: 1fr 132px 1fr;
  gap: 34px;
  margin-bottom: 78px;
  position: relative;
}

.timeline-year-block.left .timeline-content { grid-column: 1; text-align: right; }
.timeline-year-block.left .timeline-year-node { grid-column: 2; }
.timeline-year-block.left .timeline-spacer { grid-column: 3; }
.timeline-year-block.right .timeline-spacer { grid-column: 1; }
.timeline-year-block.right .timeline-year-node { grid-column: 2; }
.timeline-year-block.right .timeline-content { grid-column: 3; text-align: left; }

.timeline-year-node {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.timeline-year-aura {
  position: absolute;
  top: -18px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.22) 0%, rgba(167,139,250,.06) 45%, transparent 72%);
  filter: blur(12px);
}

.timeline-year-label {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(21,25,37,.95) 0%, rgba(9,11,18,.98) 100%);
  border: 3px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  box-shadow: 0 0 36px rgba(167,139,250,.22), inset 0 0 18px rgba(255,255,255,.03);
  position: relative;
  z-index: 2;
}

.timeline-year-block:nth-child(even) .timeline-year-label {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.timeline-year-block:nth-child(3n) .timeline-year-label {
  border-color: var(--accent-3);
  color: var(--accent-3);
}

.timeline-long .timeline-content {
  padding: 8px 0;
}

.timeline-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(19,23,34,.94), rgba(9,11,18,.98));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.24);
  display: grid;
  gap: 0;
}

.timeline-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(167,139,250,.08), transparent 36%, transparent 68%, rgba(67,226,209,.06));
  pointer-events: none;
}

.timeline-card-corner {
  display: none;
}

.timeline-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.timeline-phase {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(167,139,250,.12);
  border: 1px solid rgba(167,139,250,.22);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.timeline-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 100%;
}

.timeline-card-meta > * {
  flex: 0 1 auto;
}

.timeline-card-stat,
.timeline-card-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.timeline-card-stat {
  background: rgba(67,226,209,.09);
  color: var(--accent-2);
  border: 1px solid rgba(67,226,209,.14);
}

.timeline-card-status {
  background: rgba(244,114,182,.09);
  color: var(--accent-3);
  border: 1px solid rgba(244,114,182,.14);
}

.timeline-card-title {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 800;
  margin-bottom: 12px;
}

.timeline-card-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.9;
  margin-bottom: 14px;
}

.timeline-card-signal {
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border-left: 3px solid rgba(167,139,250,.7);
  color: rgba(255,255,255,.8);
  line-height: 1.8;
  font-size: 14px;
}

.timeline-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.timeline-detail-block {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.timeline-detail-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  margin-bottom: 10px;
}

.timeline-card-projects,
.timeline-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.timeline-chip {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.timeline-chip:hover {
  transform: translateY(-1px);
}

.timeline-chip-project {
  background: rgba(167,139,250,.12);
  border-color: rgba(167,139,250,.24);
  color: var(--accent);
}

.timeline-chip-method {
  background: rgba(67,226,209,.1);
  border-color: rgba(67,226,209,.18);
  color: var(--accent-2);
}

.timeline-chip-account {
  background: rgba(251,191,36,.1);
  border-color: rgba(251,191,36,.16);
  color: #fbbf24;
}

.timeline-chip-keyword {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
}

.timeline-keywords {
  margin-bottom: 18px;
}

.timeline-milestone {
  margin-bottom: 16px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(167,139,250,.08), rgba(67,226,209,.04));
  border: 1px solid rgba(167,139,250,.12);
}

.timeline-milestone-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  margin-bottom: 8px;
}

.timeline-milestone-text {
  font-size: 14px;
  color: rgba(255,255,255,.88);
  line-height: 1.8;
}

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

.timeline-summary-item {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.timeline-summary-item span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  margin-bottom: 6px;
}

.timeline-summary-item strong {
  display: block;
  color: rgba(255,255,255,.92);
  line-height: 1.8;
  font-size: 14px;
}

.timeline-turning-point {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(244,114,182,.12);
  border: 1px solid rgba(244,114,182,.2);
  color: var(--accent-3);
  font-size: 12px;
  font-weight: 800;
}

.timeline-card.major {
  padding: 34px;
  border-color: rgba(244,114,182,.18);
  box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 0 0 1px rgba(244,114,182,.06) inset;
}

.timeline-card-desc.compact,
.timeline-keywords.compact {
  margin-bottom: 12px;
}

.timeline-compressed-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.timeline-compressed-block,
.timeline-deep-block {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.timeline-compressed-block span,
.timeline-deep-block .timeline-detail-label {
  display: block;
}

.timeline-compressed-block span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  margin-bottom: 6px;
}

.timeline-compressed-block strong,
.timeline-deep-block p {
  color: rgba(255,255,255,.9);
  line-height: 1.8;
  font-size: 14px;
}

.timeline-link-pill {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: white;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.timeline-link-pill-wide {
  width: 100%;
  text-align: left;
  border-radius: 16px;
}

.timeline-expand-toggle {
  display: none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 14px;
}

.timeline-expand-toggle.open {
  background: rgba(167,139,250,.12);
  border-color: rgba(167,139,250,.2);
  color: var(--accent);
}

.timeline-expandable {
  display: block;
}

.timeline-deep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.timeline-inline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.timeline-mini-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(67,226,209,.1);
  border: 1px solid rgba(67,226,209,.18);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 700;
}

.timeline-mini-tag-soft {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
}

@media (max-width: 1180px) {
  .visual-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .timeline-overview-grid,
  .timeline-detail-grid,
  .timeline-summary-grid,
  .timeline-deep-grid,
  .timeline-compressed-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .timeline-long {
    padding: 0 8px 0 0;
  }

  .timeline-density-bar {
    display: flex;
    width: 100%;
    position: sticky;
    top: 74px;
    z-index: 8;
  }

  .timeline-density-controls {
    width: 100%;
    justify-content: space-between;
  }

  .timeline-density-btn {
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
  }

  .timeline-overview-head {
    flex-direction: column;
    align-items: stretch;
  }

  .timeline-overview {
    padding: 18px;
    margin-bottom: 32px;
    border-radius: 20px;
  }

  .timeline-overview-title {
    font-size: 15px;
    line-height: 1.7;
  }

  .timeline-track {
    left: 22px;
    width: 3px;
  }

  .timeline-year-block {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }

  .timeline-year-label {
    width: 44px;
    height: 44px;
    font-size: 12px;
    border-width: 2px;
  }

  .timeline-year-aura {
    width: 72px;
    height: 72px;
    top: -12px;
  }

  .timeline-overview-grid,
  .timeline-detail-grid,
  .timeline-summary-grid,
  .timeline-deep-grid,
  .timeline-compressed-row {
    grid-template-columns: 1fr;
  }

  .timeline-card,
  .timeline-card.major {
    padding: 18px;
    border-radius: 18px;
  }

  .timeline-card-top {
    gap: 8px;
    margin-bottom: 10px;
  }

  .timeline-phase,
  .timeline-card-stat,
  .timeline-card-status {
    padding: 6px 10px;
    font-size: 11px;
  }

  .timeline-card-title {
    font-size: 19px;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .timeline-card-desc {
    font-size: 14px;
    line-height: 1.75;
  }

  .timeline-card-signal,
  .timeline-milestone,
  .timeline-compressed-block,
  .timeline-deep-block,
  .timeline-summary-item,
  .timeline-detail-block {
    padding: 12px 14px;
    border-radius: 14px;
  }

  .timeline-keywords {
    gap: 6px;
  }

  .timeline-chip,
  .timeline-mini-tag,
  .timeline-link-pill {
    font-size: 11px;
    padding: 7px 10px;
  }

  .timeline-expand-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .timeline-expandable {
    display: none;
  }

  .timeline-expandable.open {
    display: block;
  }

  .timeline-card.major .timeline-expandable {
    display: block;
  }

  .timeline-card-corner {
    position: static;
    display: inline-flex;
    margin-bottom: 10px;
  }
}

@media (max-width: 1024px) {
  .timeline-overview-grid,
  .timeline-detail-grid,
  .timeline-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  background: rgba(6,8,14,.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  overflow-y: auto;
  padding-top: 84px;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-inner {
  padding: 24px;
  max-width: 400px;
  margin: 0 auto;
}

.mobile-menu-title {
  font-size: 14px;
  color: var(--muted-2);
  margin-bottom: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mobile-menu-links {
  display: grid;
  gap: 8px;
  margin-bottom: 32px;
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.mobile-menu-search input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 16px;
  outline: none;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  cursor: pointer;
}

.lightbox-close { top: 24px; right: 24px; font-size: 28px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); font-size: 32px; }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); font-size: 32px; }

.lightbox-stage {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 88vh;
}

.lightbox-image {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
}

.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* project detail */
.project-detail {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.project-detail.open {
  opacity: 1;
  pointer-events: auto;
}

.project-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
}

.project-detail-content {
  position: relative;
  z-index: 1;
  width: 680px;
  max-width: 100%;
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.32,.72,0,1);
}

.project-detail.open .project-detail-content {
  transform: translateX(0);
}

.project-detail-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
}

.project-detail-hero {
  height: 320px;
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: pointer;
}

.project-detail-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--bg) 100%);
}

.project-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(6,8,14,.58);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  backdrop-filter: blur(8px);
}

.project-carousel-btn.prev { left: 18px; }
.project-carousel-btn.next { right: 18px; }

.project-carousel-counter {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(6,8,14,.55);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  backdrop-filter: blur(8px);
}

.project-detail-body {
  padding: 32px;
  padding-top: 0;
  position: relative;
}

.project-detail-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(155,127,255,.14);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.project-detail-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}

.project-detail-desc {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 32px;
}

.project-detail-section { margin-bottom: 32px; }
.project-detail-section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.project-detail-timeline { display: grid; gap: 16px; }
.project-detail-milestone {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.milestone-date { width: 80px; font-size: 13px; font-weight: 700; color: var(--accent-2); }
.milestone-text { font-size: 14px; color: var(--muted); line-height: 1.65; }

.project-detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.project-detail-gallery img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s ease, border-color .2s ease, opacity .2s ease;
}

.project-detail-gallery img:hover {
  transform: translateY(-2px);
}

.project-gallery-thumbs img.active {
  border-color: var(--accent-2);
  opacity: 1;
}

.project-gallery-thumbs img:not(.active) {
  opacity: .72;
}

.project-detail-articles {
  display: grid;
  gap: 12px;
}

.project-detail-article {
  display: block;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.project-detail-article-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.5;
}

.project-detail-article-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted-2);
}

.project-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.project-detail-summary-card {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--border);
}

.project-detail-summary-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 800;
}

.project-detail-summary-card span {
  font-size: 12px;
  color: var(--muted);
}

.project-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.project-detail-action {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.project-detail-action.primary {
  background: var(--gradient-accent);
  border: none;
  color: white;
}

.project-detail-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.project-detail-section-hint {
  color: var(--muted-2);
  font-size: 12px;
  text-align: right;
}

/* mobile */
@media (max-width: 1024px) {
  .visual-layout,
  .atlas-grid,
  .network-container,
  .gateway-layout {
    grid-template-columns: 1fr;
  }

  .atlas-card.span-2 { grid-column: span 1; }
  .visual-copy,
  .gateway-copy,
  .network-sidebar { position: static; }

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

  .timeline-year-block {
    grid-template-columns: 80px 1fr;
    gap: 24px;
  }

  .timeline-year-block.left .timeline-content,
  .timeline-year-block.right .timeline-content { grid-column: 2; text-align: left; }
  .timeline-year-block.left .timeline-year-node,
  .timeline-year-block.right .timeline-year-node { grid-column: 1; }
  .timeline-year-block.left .timeline-spacer,
  .timeline-year-block.right .timeline-spacer { display: none; }
  .timeline-track { left: 40px; }
}

@media (max-width: 768px) {
  .nav-links,
  .nav-search { display: none; }

  .entity-entry-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entity-entry {
    min-height: 72px;
  }

  .nav-menu-btn {
    display: inline-flex;
    width: auto;
    min-width: 96px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text);
    white-space: nowrap;
  }

  .hero {
    min-height: auto;
    padding: 88px 0 36px;
  }
  .hero-content { padding-top: 32px; }
  .hero-title { font-size: 42px; letter-spacing: -1px; }
  .hero-subtitle { font-size: 18px; }
  .hero-description { font-size: 15px; }
  .hero-image-grid { opacity: .2; transform: rotate(-10deg) scale(.9); }
  .hero-actions { justify-content: center; }
  .gateway-featured,
  .gateway-topic-strip {
    grid-template-columns: 1fr;
  }
  .gateway-card,
  .gateway-card-major {
    min-height: auto;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
  }
  .hero-stat { min-width: 0; }
  .hero-stat-num { font-size: 24px; }
  .hero-stat-divider { display: none; }
  .section { padding: 72px 0; }
  .section-title { font-size: 30px; }
  .definition-grid,
  .questions-grid,
  .structure-grid,
  .projects-grid,
  .value-grid,
  .articles-grid { grid-template-columns: 1fr; }
  .project-card-large { grid-column: span 1; }
  .content-stats { grid-template-columns: repeat(2, 1fr); }
  .dual-accounts { grid-template-columns: 1fr; }
  .vs { display: none; }
  .visual-collections { gap: 18px; }
  .visual-collection { padding: 14px; border-radius: 18px; }
  .visual-collection-head { display: block; }
  .visual-collection-count { display: inline-flex; margin-top: 8px; }
  .visual-collection-title { font-size: 20px; }
  .visual-collection-desc { font-size: 13px; line-height: 1.65; }
  .visual-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .visual-photo,
  .visual-photo.tall,
  .visual-photo.wide {
    grid-column: span 1;
    grid-row: span 1;
    height: 138px;
  }
  .network-canvas-wrap {
    display: block;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(11,14,24,.92), rgba(9,12,20,.98));
  }
  .network-mobile-poster {
    display: block;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(11,14,24,.98), rgba(9,12,20,.92));
  }
  .network-canvas {
    display: none;
  }
  .network-node-info {
    display: none;
  }
  .network-mobile-explorer {
    display: block;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(7,9,15,.72), rgba(7,9,15,.96));
    margin-top: 0;
  }
  .network-poster-head {
    display: block;
  }
  .network-poster-focus {
    display: inline-flex;
    margin-top: 8px;
  }
  .network-poster-legend {
    grid-template-columns: 1fr;
  }
  .timeline-section {
    padding: 64px 0;
  }
  .timeline-header {
    margin-bottom: 18px;
  }
  .timeline-title { font-size: 30px; }
  .timeline-subtitle {
    font-size: 13px;
    line-height: 1.65;
  }
  .timeline-density-bar {
    display: flex;
    width: 100%;
    position: sticky;
    top: 68px;
    z-index: 8;
    margin-top: 12px;
  }
  .timeline-density-label {
    font-size: 10px;
  }
  .timeline-density-controls {
    width: 100%;
    justify-content: space-between;
  }
  .timeline-density-btn {
    flex: 1;
    padding: 9px 6px;
    font-size: 12px;
  }
  .timeline-overview-head {
    flex-direction: column;
    align-items: stretch;
  }
  .timeline-overview {
    padding: 16px;
    margin-bottom: 18px;
    border-radius: 18px;
  }
  .timeline-overview-title {
    font-size: 14px;
    line-height: 1.6;
  }
  .timeline-track {
    left: 18px;
    top: 2px;
    width: 2px;
  }
  .timeline-long {
    padding: 0;
  }
  .timeline-long.compact-mobile .timeline-track {
    top: 0;
  }
  .timeline-year-block {
    grid-template-columns: 36px 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }
  .timeline-year-label {
    width: 36px;
    height: 36px;
    font-size: 10px;
    border-width: 2px;
  }
  .timeline-year-aura {
    width: 56px;
    height: 56px;
    top: -10px;
  }
  .timeline-long .timeline-content {
    padding: 0;
  }
  .timeline-overview-grid,
  .timeline-detail-grid,
  .timeline-summary-grid,
  .timeline-deep-grid,
  .timeline-compressed-row {
    grid-template-columns: 1fr;
  }
  .timeline-card,
  .timeline-card.major {
    padding: 14px 14px 12px;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(0,0,0,.18);
  }
  .timeline-card-top {
    gap: 6px;
    margin-bottom: 10px;
  }
  .timeline-phase,
  .timeline-card-stat,
  .timeline-card-status {
    padding: 5px 8px;
    font-size: 10px;
  }
  .timeline-card-meta {
    width: 100%;
    gap: 6px;
  }
  .timeline-card-title {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  .timeline-card-desc {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 8px;
  }
  .timeline-card-signal,
  .timeline-milestone,
  .timeline-compressed-block,
  .timeline-deep-block,
  .timeline-summary-item,
  .timeline-detail-block {
    padding: 10px 11px;
    border-radius: 12px;
  }
  .timeline-card-signal {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.55;
  }
  .timeline-keywords {
    gap: 6px;
    margin-bottom: 10px;
  }
  .timeline-chip,
  .timeline-mini-tag,
  .timeline-link-pill {
    font-size: 10px;
    padding: 6px 8px;
  }
  .timeline-expand-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11px;
  }
  .timeline-expandable {
    display: none;
  }
  .timeline-expandable.open {
    display: block;
  }
  .timeline-card.major .timeline-expandable {
    display: block;
  }
  .timeline-card-corner {
    display: none;
  }
  .story-row { grid-template-columns: 40px 1fr; }
  .story-score { grid-column: 2; }
  .spectrum-row { grid-template-columns: 1fr; }
  .project-detail,
  .drawer {
    width: 100%;
  }
  .project-detail {
    align-items: flex-end;
    justify-content: stretch;
  }
  .project-detail-content {
    width: 100%;
    height: min(92vh, 92dvh);
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
  }
  .project-detail.open .project-detail-content {
    transform: translateY(0);
  }
  .project-detail-hero {
    height: 260px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
  }
  .project-detail-close {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
  }
  .project-detail-body {
    padding: 24px 18px 32px;
    padding-top: 0;
  }
  .project-detail-title {
    font-size: 28px;
  }
  .project-detail-desc {
    font-size: 15px;
    line-height: 1.8;
  }
  .project-detail-summary {
    gap: 10px;
  }
  .project-detail-summary-card {
    padding: 12px;
  }
  .project-detail-summary-card strong {
    font-size: 18px;
  }
  .project-detail-actions {
    grid-template-columns: 1fr 1fr;
  }
  .project-detail-section-head {
    display: block;
  }
  .project-detail-section-hint {
    display: block;
    margin-top: 6px;
    text-align: left;
  }
  .project-detail-milestone {
    flex-direction: column;
    gap: 6px;
  }
  .milestone-date {
    width: auto;
  }
  .project-detail-gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .project-detail-gallery img {
    flex: 0 0 auto;
    width: 118px;
    min-width: 118px;
    height: 88px;
    scroll-snap-align: start;
  }
  .project-detail-article-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-title { font-size: 34px; }
  .section-title { font-size: 26px; }
  .content-stats { grid-template-columns: 1fr; }
  .visual-collection-title { font-size: 18px; }
  .visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .visual-photo,
  .visual-photo.tall,
  .visual-photo.wide { height: 132px; }
  .account-metrics { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image-grid,
  .particle {
    animation: none;
  }

  .hero-action,
  .gateway-action,
  .gateway-card,
  .gateway-topic,
  .entity-entry {
    transition: none;
  }
}

/* design system tightening */
:root {
  --accent: #e0b35b;
  --accent-2: #8ed7d0;
  --accent-3: #d7a761;
  --accent-soft: rgba(224, 179, 91, .12);
  --accent-soft-2: rgba(142, 215, 208, .1);
  --bg: #07090f;
  --bg-alt: #0b1018;
  --card: #111823;
  --card-alt: #151e2b;
  --text: #f5f2eb;
  --muted: #b9b4aa;
  --muted-2: #878276;
  --border: rgba(255, 255, 255, .1);
  --border-soft: rgba(255, 255, 255, .06);
  --p4-radius-card: 10px;
  --p4-radius-control: 8px;
  --p4-radius-pill: 999px;
  --p4-line-display: 1.1;
  --p4-line-title: 1.34;
  --p4-line-body: 1.68;
  --p4-line-compact: 1.52;
  --p4-ease: cubic-bezier(.2, .8, .2, 1);
  --gradient-text: linear-gradient(135deg, #fff8eb 0%, #e8d4a6 52%, #8ed7d0 100%);
  --gradient-accent: linear-gradient(90deg, #e0b35b, #8ed7d0);
}

html {
  text-rendering: geometricPrecision;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  line-height: var(--p4-line-body);
}

:where(h1, h2, h3, h4, p, a, button, input, span, strong, em, .nav-brand, .nav-link, .section-title, .section-subtitle, .hero-title, .hero-subtitle, .hero-description, .article-title, .gateway-card-title, .card-title, .project-card-title, .timeline-card-title) {
  letter-spacing: 0 !important;
}

:where(p, .card-text, .structure-text, .method-text, .value-text, .visual-text, .visual-collection-desc, .project-description, .project-detail-desc, .timeline-text) {
  line-height: var(--p4-line-body);
}

.container {
  max-width: 1240px;
}

.nav-inner {
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 18px;
}

.nav-brand {
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.nav-brand::after {
  background: var(--accent);
}

.nav-link,
.mobile-menu-link {
  border-radius: var(--p4-radius-control);
}

.nav-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.nav-search input,
.mobile-menu-search input {
  height: 38px;
  border-radius: var(--p4-radius-control);
  background: rgba(255, 255, 255, .045);
}

.section {
  padding: 88px 0;
}

.section-header {
  max-width: 760px;
  margin: 0 auto 36px;
}

.section-title {
  font-size: 40px;
  line-height: var(--p4-line-display);
  margin-bottom: 14px;
}

.section-title::after {
  width: 46px;
  height: 2px;
  margin-top: 14px;
  background: var(--accent);
  opacity: .9;
}

.section-subtitle {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  color: var(--muted);
  line-height: var(--p4-line-body);
}

.eyebrow {
  min-height: 34px;
  margin-bottom: 16px;
  padding: 7px 12px;
  border-radius: var(--p4-radius-pill);
  color: var(--accent);
  background: rgba(224, 179, 91, .08);
  border-color: rgba(224, 179, 91, .2);
  text-transform: none;
}

.hero {
  min-height: 88svh;
  padding-top: 96px;
  padding-bottom: 58px;
}

.hero-content {
  max-width: 820px;
}

.hero-title {
  font-size: 82px;
  line-height: 1;
  margin-bottom: 14px;
  text-shadow: none;
}

.hero-subtitle {
  font-size: 22px;
  line-height: var(--p4-line-title);
  margin-bottom: 14px;
}

.hero-description {
  max-width: 620px;
  margin-bottom: 28px;
  font-size: 17px;
  line-height: var(--p4-line-body);
}

.hero-stats {
  margin-bottom: 24px;
  border-radius: var(--p4-radius-card);
  padding: 14px 20px;
}

.hero-tagline {
  margin-bottom: 22px;
  gap: 8px;
}

.hero-action,
.gateway-action,
.project-detail-action,
.timeline-density-btn {
  min-height: 42px;
  padding: 9px 15px;
  border-radius: var(--p4-radius-control);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  transition: transform .18s var(--p4-ease), border-color .18s var(--p4-ease), background .18s var(--p4-ease), color .18s var(--p4-ease);
}

.hero-action.primary,
.gateway-action.primary,
.project-detail-action.primary,
.timeline-density-btn.active {
  background: rgba(224, 179, 91, .14);
  border-color: rgba(224, 179, 91, .5);
  color: #f1d18d;
  box-shadow: none;
}

.hero-action:hover,
.gateway-action:hover,
.project-detail-action:hover,
.timeline-density-btn:hover {
  transform: translateY(-1px);
}

.hero-action.contact-static:hover {
  transform: none;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
}

.hero-action:active,
.gateway-action:active,
.project-detail-action:active,
.timeline-density-btn:active,
.filter-chip:active,
.project-chip:active,
.tag:active {
  transform: translateY(1px);
}

.link {
  color: #efd08b;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(224, 179, 91, .34);
  border-radius: 0;
  padding: 0 1px;
}

.tag,
.project-chip,
.filter-chip,
.mini-chip,
.timeline-chip,
.timeline-mini-tag,
.gateway-card-tags span,
.visual-collection-count,
.account-badge,
.project-label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--p4-radius-pill);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.tag::before {
  display: none;
}

.filter-chip {
  cursor: pointer;
}

.filter-chip.active,
.tag:hover,
.project-chip:hover {
  color: #f1d18d;
  border-color: rgba(224, 179, 91, .42);
  background: rgba(224, 179, 91, .1);
  box-shadow: none;
}

.gateway-layout {
  gap: 24px;
}

.gateway-copy .section-title,
.visual-title,
.network-title,
.timeline-title {
  line-height: var(--p4-line-display);
}

.gateway-copy .section-subtitle {
  line-height: var(--p4-line-body);
}

.gateway-featured {
  gap: 14px;
}

.gateway-card,
.gateway-topic,
.entity-entry,
.definition-card,
.question-card,
.structure-card,
.stat-card,
.account-card,
.project-card,
.project-card-large,
.atlas-card,
.article-card,
.drawer-article,
.method-step,
.value-card,
.visual-collection,
.timeline-content,
.timeline-card,
.timeline-year-card,
.timeline-phase-card,
.project-detail-content,
.project-detail-summary-card,
.project-detail-article {
  border-radius: var(--p4-radius-card);
  border-color: rgba(255, 255, 255, .095);
  box-shadow: none;
}

.gateway-card,
.article-card,
.drawer-article,
.definition-card,
.question-card,
.structure-card,
.stat-card,
.account-card,
.project-card,
.project-card-large,
.atlas-card,
.value-card,
.visual-collection {
  background: linear-gradient(180deg, rgba(17, 24, 35, .94), rgba(9, 13, 20, .96));
}

.gateway-card {
  min-height: 214px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.gateway-card-major {
  min-height: 442px;
}

.gateway-card-index {
  color: var(--accent);
  font-size: 11px;
}

.gateway-card-title,
.article-title,
.drawer-article-title,
.card-title,
.project-card-title,
.method-title,
.value-card h3,
.structure-title,
.timeline-card-title,
.timeline-title {
  line-height: var(--p4-line-title);
}

.gateway-card-title {
  margin-top: 14px;
  font-size: 16px;
}

.gateway-card-major .gateway-card-title {
  font-size: 22px;
}

.gateway-card-desc,
.article-digest,
.drawer-article-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: var(--p4-line-compact);
}

.gateway-card-meta {
  margin-top: auto;
  padding-top: 16px;
}

.gateway-card-tags {
  margin-top: 12px;
}

.gateway-card-meta,
.article-meta,
.drawer-article-meta,
.project-detail-article-meta {
  gap: 10px;
  color: var(--muted-2);
  line-height: 1.4;
}

.gateway-topic {
  min-height: 72px;
  padding: 13px;
}

.gateway-topic strong,
.entity-entry-title {
  line-height: var(--p4-line-title);
}

.article-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  padding: 17px;
}

.article-meta {
  margin-top: auto;
  padding-top: 8px;
}

.timeline-density-btn {
  line-height: 1.3;
}

.article-title {
  font-size: 14px;
  margin-bottom: 9px;
}

.article-chip-row,
.drawer-chip-row {
  gap: 7px;
}

.drawer-article {
  padding: 15px;
  margin-bottom: 10px;
}

.definition-grid,
.questions-grid,
.structure-grid,
.content-stats,
.projects-grid,
.atlas-grid,
.articles-grid {
  gap: 18px;
}

.definition-card,
.question-card,
.structure-card,
.stat-card,
.value-card {
  padding: 26px;
}

.card-number {
  margin-bottom: 12px;
  color: var(--accent);
}

.card-title {
  font-size: 20px;
  margin-bottom: 10px;
}

.card-text {
  font-size: 15px;
}

.quote-text {
  max-width: 680px;
  font-size: 20px;
  line-height: var(--p4-line-body);
}

.quote-line {
  background: var(--accent);
}

#what .quote-block {
  max-width: 820px;
  margin: 42px auto 36px;
  padding: 28px 32px 26px;
  border: 1px solid rgba(224, 179, 91, .2);
  border-radius: var(--p4-radius-card);
  background:
    linear-gradient(180deg, rgba(224, 179, 91, .08), rgba(14, 20, 31, .7)),
    rgba(255, 255, 255, .025);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .18);
}

#what .quote-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text);
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

#what .quote-text span {
  display: block;
}

#what .quote-line {
  width: 72px;
  height: 4px;
  margin: 24px auto 0;
  border-radius: 999px;
  opacity: .95;
}

.network-poster-legend-pill {
  text-align: left;
  white-space: normal;
}

.visual-title {
  font-size: 32px;
}

.visual-collection {
  padding: 18px;
}

.visual-photo,
.project-thumb,
.project-image,
.project-detail-gallery img,
.lightbox-image {
  border-radius: var(--p4-radius-card);
}

.atlas-card {
  padding: 22px;
}

.atlas-card-head h3 {
  font-size: 20px;
  line-height: var(--p4-line-title);
}

.spectrum-row,
.story-row,
.year-node {
  border-radius: var(--p4-radius-control);
}

.story-main strong {
  line-height: var(--p4-line-title);
}

.project-detail-title {
  line-height: var(--p4-line-display);
}

.project-detail-close,
.drawer-close,
.lightbox-close,
.lightbox-nav,
.project-carousel-btn {
  border-radius: var(--p4-radius-control);
}

@media (max-width: 1024px) {
  .section {
    padding: 72px 0;
  }

  .section-title {
    font-size: 34px;
  }

  .hero-title {
    font-size: 58px;
  }

  .hero-subtitle {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .nav-inner {
    min-height: 58px;
  }

  .section {
    padding: 62px 0;
  }

  .section-header {
    margin-bottom: 28px;
  }

  .section-title {
    font-size: 29px;
    line-height: 1.14;
  }

  .section-subtitle {
    font-size: 14px;
    line-height: 1.62;
  }

  .hero {
    padding-top: 78px;
    padding-bottom: 32px;
  }

  .hero-content {
    padding-top: 26px;
  }

  .hero-title {
    font-size: 40px;
  }

  .hero-subtitle {
    font-size: 17px;
  }

  .hero-description {
    font-size: 14px;
    line-height: 1.62;
    margin-bottom: 20px;
  }

  .hero-stats {
    border-radius: var(--p4-radius-card);
    padding: 12px;
  }

  .hero-action,
  .gateway-action {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
  }

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

  .footer-right {
    justify-items: start;
    width: 100%;
  }

  .footer-contact {
    justify-content: flex-start;
    width: 100%;
  }

  .footer-contact-link,
  .footer-contact-item {
    min-width: min(220px, 100%);
  }

  .gateway-card,
  .article-card,
  .definition-card,
  .question-card,
  .structure-card,
  .stat-card,
  .value-card,
  .visual-collection {
    padding: 16px;
  }

  .gateway-card-major .gateway-card-title {
    font-size: 18px;
  }

  .gateway-card,
  .gateway-card-major {
    min-height: auto;
  }

  .gateway-card-title {
    font-size: 15px;
  }

  .article-card {
    min-height: auto;
  }

  .visual-title {
    font-size: 26px;
  }

  #what .quote-block {
    margin: 32px auto 28px;
    padding: 24px 20px 22px;
  }

  #what .quote-text {
    font-size: 20px;
    line-height: 1.58;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 36px;
  }

  .section-title {
    font-size: 27px;
  }

  .hero-actions,
  .gateway-actions {
    gap: 8px;
  }

  #what .quote-block {
    padding: 22px 16px 20px;
  }

  #what .quote-text {
    align-items: flex-start;
    font-size: 19px;
    line-height: 1.68;
    text-align: left;
  }

  #what .quote-text span {
    display: inline;
  }
}

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