:root {
  color-scheme: dark;
  --bg: #050505;
  --bg-soft: #080808;
  --surface: #0c0c0c;
  --surface-raised: #111111;
  --text: rgba(255, 255, 255, .95);
  --text-secondary: rgba(255, 255, 255, .70);
  --text-muted: rgba(255, 255, 255, .46);
  --muted: rgba(255, 255, 255, .70);
  --muted-2: rgba(255, 255, 255, .46);
  --accent: #b6d5dd;
  --faint: rgba(255, 255, 255, .28);
  --line: rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .18);
  --glass: rgba(255, 255, 255, .035);
  --glass-strong: rgba(15, 15, 15, .78);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --max-width: 1440px;
  --page: min(var(--max-width), calc(100vw - 80px));
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.22, .72, .18, 1);
}

html {
  background: var(--bg);
  scroll-padding-top: 92px;
}

body {
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  z-index: -3;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 78% -12%, rgba(184, 201, 216, .055), transparent 36rem),
    linear-gradient(180deg, #070707 0%, var(--bg) 46%, #070707 100%) !important;
}

.site-ambient {
  position: fixed !important;
  z-index: -2 !important;
  inset: -35vmax !important;
  width: auto !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(174, 196, 215, .055), transparent 24%),
    radial-gradient(circle at 30% 68%, rgba(255, 255, 255, .025), transparent 22%) !important;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: ds-ambient 34s ease-in-out infinite alternate !important;
}

@keyframes ds-ambient {
  to { transform: translate3d(-2.4%, 1.8%, 0) scale(1.025); }
}

/* Shared navigation */
.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  padding: 0 !important;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

.site-header.is-scrolled,
.site-header.scrolled {
  background: rgba(5, 5, 5, .68) !important;
  border-color: var(--line-soft) !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
}

.topbar {
  width: var(--page) !important;
  height: 72px !important;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 0 !important;
}

.brand {
  justify-self: start;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  letter-spacing: .16em !important;
  text-decoration: none;
  white-space: nowrap;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(32px, 3.8vw, 60px) !important;
}

.primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 10px !important;
  font-weight: 560 !important;
  letter-spacing: .18em !important;
  text-decoration: none;
  opacity: .85;
  transition: opacity .25s ease, color .25s ease, transform .25s var(--ease);
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a.active {
  color: var(--text) !important;
  opacity: 1;
  transform: translateY(-1px);
}

.primary-nav a:focus-visible,
.menu-toggle:focus-visible,
.site-menu a:focus-visible {
  outline: 1px solid var(--accent) !important;
  outline-offset: 5px;
}

.primary-nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 4px !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50%;
  background: var(--accent) !important;
  opacity: 0;
  transform: translateX(-50%) scale(0) !important;
  transform-origin: center !important;
  transition: opacity .25s ease, transform .25s var(--ease) !important;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  opacity: 0;
  transform: translateX(-50%) scale(0) !important;
}

.primary-nav a.active::after {
  opacity: 1 !important;
  transform: translateX(-50%) scale(1) !important;
}

.menu-wrap {
  position: relative;
  justify-self: end;
}

.menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.menu-toggle::before,
.menu-toggle::after,
.menu-toggle > span {
  content: "";
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, .82);
  transition: transform .35s var(--ease), top .35s var(--ease), opacity .2s ease;
}

.menu-toggle::before { top: 15px; }
.menu-toggle > span { top: 22px; }
.menu-toggle::after { top: 29px; }
.menu-toggle[aria-expanded="true"]::before { top: 22px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] > span { opacity: 0; transform: scaleX(.3); }
.menu-toggle[aria-expanded="true"]::after { top: 22px; transform: rotate(-45deg); }

.site-menu {
  position: absolute !important;
  z-index: 60 !important;
  inset: auto 0 auto auto !important;
  top: 54px !important;
  width: 220px !important;
  padding: 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(12, 12, 12, .88) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(20px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(115%) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -8px, 0) !important;
  transition: opacity .25s ease, transform .32s var(--ease), visibility .25s !important;
}

.site-menu.show,
.site-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.site-menu a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  color: var(--text-secondary) !important;
  font-size: 10px !important;
  font-weight: 560 !important;
  letter-spacing: .18em !important;
  text-decoration: none;
  transition: color .22s ease, background .22s ease, opacity .22s ease;
}

.site-menu a:last-child { border-bottom: 0 !important; }
.site-menu a::after { content: "↗" !important; color: var(--text-muted) !important; font-size: 11px !important; }
.site-menu a.active::after { content: "•" !important; color: var(--text) !important; }
.site-menu a:hover,
.site-menu a:focus-visible,
.site-menu a.active { color: var(--text) !important; background: var(--glass) !important; outline: none; }

.site-menu a:focus-visible { outline: 1px solid var(--accent) !important; outline-offset: -2px; }

/* Shared type and motion */
.hero h1,
.hero-title,
.archive-hero h1 { font-weight: 600 !important; letter-spacing: -.052em !important; }
.section-title,
.toolbar-heading,
.thread-title,
.footer-title { font-weight: 600 !important; letter-spacing: -.048em !important; }
.eyebrow,
.section-kicker,
.hero-kicker,
.footer-kicker,
.archive-label,
.metric-label,
.post-meta,
.thread-byline,
.reply-author { font-weight: 560 !important; }

.reveal {
  transition-duration: .72s !important;
  transition-timing-function: var(--ease) !important;
}

.archive-photo img,
.people-photo img,
.hero-visual img {
  transition: transform .7s var(--ease), filter .45s ease !important;
}

@media (hover:hover) and (pointer:fine) {
  .archive-photo:hover img,
  .people-photo:hover img,
  .hero-visual:hover img { filter: brightness(1.045); }

  .footer-links a,
  .footer-actions a,
  .map-cta,
  .forum-cta,
  .new-post-button,
  .text-button,
  .back-to-list { opacity: .72; transition: opacity .24s ease, transform .24s var(--ease), color .24s ease; }

  .footer-links a:hover,
  .footer-actions a:hover,
  .map-cta:hover,
  .forum-cta:hover,
  .new-post-button:hover,
  .text-button:hover,
  .back-to-list:hover { opacity: 1; transform: translateY(-1px); }
}

/* Shared footer */
.site-footer {
  width: var(--page) !important;
  min-height: 84svh !important;
  margin: 0 auto !important;
  padding: clamp(120px, 14vw, 205px) 0 36px !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  border-top: 1px solid var(--line) !important;
}

.footer-kicker {
  margin: 0 0 34px !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  letter-spacing: .19em !important;
  text-transform: uppercase;
}

.footer-statement {
  max-width: 460px;
  margin: 0 0 clamp(48px, 7vw, 90px);
  color: var(--text-secondary);
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.65;
  letter-spacing: -.01em;
}

.footer-title {
  margin: 0 !important;
  font-size: clamp(68px, 10.5vw, 160px) !important;
  line-height: .79 !important;
  text-transform: uppercase;
}

.footer-title span { display: block; }

.footer-links,
.footer-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px 46px !important;
  margin-top: 64px !important;
  padding: 25px 0 0 !important;
  border-top: 1px solid var(--line) !important;
}

.footer-links a,
.footer-actions a {
  padding: 0 !important;
  border: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 10px !important;
  font-weight: 560 !important;
  letter-spacing: .17em !important;
  text-decoration: none;
}

.footer-bottom {
  display: flex !important;
  justify-content: space-between;
  gap: 24px;
  margin-top: 86px !important;
  padding-top: 30px !important;
  border-top: 1px solid var(--line) !important;
  color: var(--text-muted) !important;
  font-size: 9px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
}

/* Secondary pages get to their actual content sooner than the landing page. */
.archive-hero,
.stats-hero,
.forum-hero { min-height: 76svh !important; }

.archive-hero { padding-top: clamp(136px, 15vh, 185px) !important; }
.archive-hero h1 { font-size: clamp(72px, 8vw, 116px) !important; margin-top: clamp(36px, 5vw, 68px) !important; }
.archive-section { padding-top: clamp(64px, 6vw, 90px) !important; }
.archive-section .photo-grid { margin-top: 34px; }
.stats-hero { padding-top: clamp(130px, 15vh, 180px) !important; }
.stats-hero + .error-state + .analytics-section { padding-top: clamp(60px, 6vw, 90px) !important; }
.forum-hero { padding-top: clamp(132px, 15vh, 180px) !important; padding-bottom: 48px !important; }
.access-section { padding-top: clamp(80px, 8vw, 115px) !important; }

.archive-hero .hero-description .cn,
.stats-hero .hero-copy .cn,
.forum-hero .hero-copy-cn {
  color: rgba(231, 238, 241, .67) !important;
  font-size: 13px !important;
  line-height: 1.75;
}

/* Destructive photo controls are available only in an explicit manage mode. */
.archive-tools { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
.manage-toggle {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 560;
  letter-spacing: .17em;
  cursor: pointer;
  transition: color .24s ease;
}
.manage-toggle:hover,
.manage-toggle:focus-visible,
.manage-toggle[aria-pressed="true"] { color: var(--text); }
.manage-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
.photo-grid:not(.is-managing) .delete-btn {
  display: none !important;
}
.photo-grid.is-managing .delete-btn {
  display: grid;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  width: 44px;
  height: 44px;
}

/* Global utilities created by design-system.js */
.site-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgba(255, 255, 255, .72);
  will-change: transform;
}

.site-to-top {
  position: fixed;
  z-index: 55;
  right: 24px;
  bottom: 24px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, .72);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity .28s ease, transform .32s var(--ease), visibility .28s, background .22s ease;
}

.site-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.site-to-top:hover,
.site-to-top:focus-visible { background: rgba(255, 255, 255, .1); outline: 1px solid rgba(255, 255, 255, .4); outline-offset: 3px; }
.has-site-fab .site-to-top { bottom: 100px; }
.has-site-toast .site-to-top { bottom: 82px; }

:focus-visible { outline-color: rgba(255, 255, 255, .58); outline-offset: 4px; }

@media (max-width: 1000px) {
  :root { --page: min(var(--max-width), calc(100vw - 48px)); }
}

@media (max-width: 720px) {
  :root { --page: calc(100vw - 40px); }
  html { scroll-padding-top: 76px; }
  .site-header, .topbar { height: 64px !important; }
  .topbar { grid-template-columns: 1fr auto; }
  .primary-nav { display: none !important; }
  .brand { font-size: 11px !important; }
  .site-menu { top: 50px !important; width: min(230px, calc(100vw - 40px)) !important; }
  .site-footer { min-height: 72svh !important; padding: 105px 0 28px !important; }
  .footer-statement { margin-bottom: 54px; font-size: 13px; }
  .footer-title { font-size: 16.5vw !important; }
  .footer-links, .footer-actions { gap: 20px 28px !important; margin-top: 50px !important; }
  .footer-bottom { flex-direction: column; margin-top: 62px !important; line-height: 1.65; }
  .site-to-top { right: 18px; bottom: 18px; width: 40px; height: 40px; }
  .has-site-fab .site-to-top { bottom: 142px; }
  .has-site-toast .site-to-top { bottom: 126px; }
  .archive-hero,
  .stats-hero,
  .forum-hero { min-height: 72svh !important; }
  .archive-hero { min-height: 68svh !important; padding: 106px 0 28px !important; }
  .archive-hero h1 { margin-top: 38px !important; font-size: clamp(54px, 16vw, 74px) !important; }
  .archive-hero .hero-copy { gap: 26px; }
  .archive-hero .hero-bottom { padding-top: 28px; }
  .archive-section { padding-top: 40px !important; }
  .archive-section .photo-grid { margin-top: 20px; }
  .archive-tools { gap: 14px; }
  .archive-count { white-space: nowrap; }
  .manage-toggle { font-size: 9px; }
  .stats-hero { padding: 108px 0 28px !important; }
  .stats-hero + .error-state + .analytics-section { padding-top: 70px !important; }
  .trend-chart { height: 190px !important; }
  .trend-label { fill: #a9b2b6 !important; font-size: 29px !important; letter-spacing: 0 !important; }
  #trendPoints .trend-label:nth-of-type(even) { display: none; }
  .map-shell,
  .china-map { height: 270px !important; min-height: 270px !important; }
  .forum-hero { min-height: 68svh !important; padding: 108px 0 30px !important; gap: 30px !important; }
  .forum-hero .hero-title { margin-top: 30px; font-size: clamp(50px, 15.5vw, 68px) !important; letter-spacing: -.064em !important; }
  .forum-hero .hero-status { margin-top: 24px; }
  .forum-hero .hero-copy-cn { margin-top: 14px; }
  .access-section { padding-top: 60px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .site-ambient { animation: none !important; transform: none !important; }
  .site-progress { transition: none !important; }
  .site-to-top,
  .primary-nav a,
  .site-menu,
  .footer-links a,
  .footer-actions a { transition-duration: .01ms !important; }
}