/*
 * Personal Lab X — Clean Botanical Theme
 * 独立试色层：降低黄灰和棕色，保留柔和的绿色研究档案气质。
 */

:root {
  --paper: #f7faf6;
  --ink: #28332b;
  --muted: #6f776f;
  --line: #dde6dd;
  --red: #6f8f70;
  --surface: #ffffff;
  --surface-soft: #f1f6f0;
  --surface-green: #eef4ec;
  --forest: #344638;
  --shadow: #354b3a0b;
}

body {
  background:
    radial-gradient(circle at 10% 3%, #a9c4a31a, transparent 24%),
    radial-gradient(circle at 90% 16%, #d7e7d41f, transparent 26%),
    var(--paper);
  color: var(--ink);
}

body::before {
  opacity: 0;
}

.site-header,
.article-nav {
  border-color: #d9e3d9;
}

.lab-subnav {
  background: #f7faf6ed;
}

.brand-mark,
nav a::after,
.record-tag,
.section-no,
.experiment-id,
.status-label,
.catalog-head b,
.feature-meta span,
.changelog article > div:last-child > b,
.article-hero > p:first-child,
.article-end > span,
.map-invite > div > span {
  color: var(--red);
}

nav a::after {
  background: var(--red);
}

.folder {
  background: #edf3eb;
  border-color: #d7e2d5;
}

.index-card {
  background: #fffffffa;
  border-color: #d9e4d8;
}

.folder,
.index-card {
  box-shadow: 0 18px 46px var(--shadow);
}

.primary-button,
.map-invite .primary-button {
  border-color: #9cab9c;
  background: #ffffffb8;
  color: var(--ink);
  box-shadow: 0 8px 24px #354b3a08;
}

.primary-button:hover,
.map-invite .primary-button:hover {
  border-color: var(--forest);
  background: var(--forest);
  color: #fff;
}

.filters button,
.archive-controls button {
  border-color: #d5e0d5;
  background: #ffffffb8;
}

.filters button.active,
.filters button:hover,
.archive-controls button.active,
.search-row button {
  border-color: #6f8f70;
  background: #6f8f70;
  color: #fff;
}

.observation-card,
.experiment-list article,
.manifesto-block,
.framework-feature,
.coming-grid > div,
.experiment-catalog article,
.notes-list article,
.archive-dashboard,
.archive-table article,
.map-workspace,
.changelog article,
.article-hero,
.article-section {
  border-color: #dce6dc;
  background: var(--surface);
  box-shadow: 0 12px 34px var(--shadow);
}

.observation-card:hover {
  background: #fff;
  box-shadow: 0 18px 42px #354b3a11;
}

.map-invite {
  border-color: #d6e2d4;
  background: linear-gradient(135deg, #eff5ed 0%, #e9f2e7 100%);
  box-shadow: 0 20px 52px #354b3a09;
}

.map-invite p {
  color: #626d63;
}

.experiments {
  background: #f0f5ef;
}

.about {
  background: #f4f8f3;
}

.collection-hero,
.manifesto-hero {
  background: linear-gradient(#edf5eb 0%, #f7faf600 100%);
}

.dark-manifesto {
  background: #e8f0e6;
  color: var(--ink);
}

.dark-manifesto .eyebrow,
.dark-manifesto > div > p {
  color: var(--muted);
}

.manifesto-list {
  border-top-color: #cedbce;
}

.manifesto-list p {
  border-bottom-color: #cedbce;
  color: #5f685f;
}

.archive-dashboard {
  background: #ffffffd9;
}

.progress-panel,
.node-inspector {
  border-color: #dce6dc;
}

.progress-track {
  background: #dfe8df;
}

.progress-track i {
  background: #7d9b7c;
}

.search-row button {
  border-radius: 0 13px 13px 0;
}

.hundred-grid {
  background: #edf4eb;
}

.number-grid {
  border-color: #d6e1d5;
}

.number-grid span {
  border-color: #d6e1d5;
  color: #8a958b;
}

.number-grid span.written {
  background: #cdddc9;
  color: #304332;
}

.map-workspace {
  background: #fff;
}

.map-canvas {
  background: radial-gradient(circle, #a9b9a92b 1px, transparent 1px) 0 0 / 30px 30px;
}

.map-node {
  background: #f8fbf7d9;
}

.node-inspector {
  background: #f1f6f0;
}

.article-body blockquote {
  border-left-color: #dce3dc;
}

.article-body blockquote p,
.article-body a {
  color: #668567;
}

.article-body code,
.article-body pre,
.article-section pre {
  background: #eef3ed;
}

.article-end {
  background: #edf4eb;
}

footer {
  background: var(--forest);
  color: #fff;
}

footer p {
  color: #c9d4ca;
}

.footer-links a,
footer > a:last-child {
  color: #d8e7d5;
}

/* 更克制、适合长时间阅读的字体层级 */
body {
  font-size: 15px;
  line-height: 1.65;
}

h1 {
  font-size: clamp(48px, 4.9vw, 74px);
  line-height: 1.16;
}

.section-heading h2 {
  font-size: clamp(36px, 3.8vw, 52px);
}

.section-no {
  font-size: 30px;
}

.map-invite h2 {
  font-size: clamp(36px, 3.6vw, 50px);
}

.collection-hero h1 {
  margin-top: 26px;
  margin-bottom: 48px;
  font-size: clamp(58px, 8vw, 106px);
  line-height: 0.9;
}

.archive-hero h1,
.notes-hero h1 {
  font-size: clamp(52px, 6.6vw, 82px);
  line-height: 1.05;
}

.manifesto-hero h1 {
  font-size: clamp(62px, 8vw, 108px);
  line-height: 0.92;
}

.manifesto-block h2 {
  font-size: clamp(34px, 3.9vw, 52px);
}

.framework-feature h2 {
  font-size: clamp(38px, 4.2vw, 56px);
}

.map-header h1 {
  font-size: clamp(50px, 6vw, 78px);
}

.article-hero h1 {
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1.32;
}

.article-index strong {
  font-size: 104px;
}

.article-body h2 {
  font-size: 27px;
}

.article-body h3 {
  font-size: 21px;
}

.article-body p,
.article-body li {
  font-size: 17px;
  line-height: 2.05;
}

.article-body blockquote p {
  font-size: clamp(20px, 1.9vw, 27px);
}

.observation-card h3 {
  font-size: 21px;
}

.record-meta b {
  font-size: 40px;
}

.experiment-list h3 {
  font-size: 24px;
}

.experiment-list strong {
  font-size: 31px;
}

.progress-panel strong {
  font-size: 60px;
}

.archive-table article > strong {
  font-size: 30px;
}

.archive-table h2 {
  font-size: 19px;
}

.changelog article > div:first-child > strong {
  font-size: 68px;
}

.changelog h2 {
  font-size: 29px;
}

@media (width <= 600px) {
  .observation-card,
  .experiment-list article,
  .manifesto-block,
  .framework-feature,
  .coming-grid > div,
  .experiment-catalog article,
  .notes-list article,
  .archive-dashboard,
  .archive-table article,
  .map-workspace,
  .changelog article,
  .article-hero,
  .article-section {
    box-shadow: 0 8px 24px #354b3a08;
  }

  h1 {
    font-size: 42px;
  }

  .section-heading h2 {
    font-size: 35px;
  }

  .collection-hero h1 {
    font-size: 52px;
  }

  .archive-hero h1,
  .notes-hero h1 {
    font-size: 47px;
  }

  .manifesto-hero h1 {
    font-size: 56px;
  }

  .manifesto-block h2 {
    font-size: 32px;
  }

  .map-invite h2 {
    font-size: 34px;
  }

  .map-header h1 {
    font-size: 47px;
  }

  .article-hero h1 {
    font-size: 35px;
  }

  .article-index strong {
    font-size: 82px;
  }

  .article-body h2 {
    font-size: 24px;
  }

  .article-body h3 {
    font-size: 20px;
  }

  .article-body p,
  .article-body li {
    font-size: 16.5px;
  }

  .record-meta b {
    font-size: 36px;
  }
}

/*
 * Balanced spacing
 * 收紧章节之间叠加的上下留白，让页面保持呼吸感，但不再出现接近一整屏的空白。
 */
.site-header {
  height: 88px;
}

.hero {
  height: auto;
  min-height: 760px;
  max-height: none;
  padding-top: 132px;
  padding-bottom: 54px;
  align-items: start;
}

.hero-copy {
  padding-top: 34px;
  padding-bottom: 0;
}

.archive-stack {
  height: 535px;
  margin-top: 0;
}

.archive-line {
  bottom: 26px;
}

.map-invite {
  padding-top: 74px;
  padding-bottom: 74px;
}

.section {
  padding-top: 92px;
  padding-bottom: 92px;
}

.section-heading {
  margin-bottom: 54px;
}

.observations {
  padding-top: 88px;
  padding-bottom: 94px;
}

.experiments {
  padding-top: 88px;
  padding-bottom: 68px;
}

.about {
  padding-top: 88px;
  padding-bottom: 68px;
}

.large-quote {
  margin-bottom: 52px;
}

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

.collection-hero {
  padding-top: 124px;
  padding-bottom: 72px;
}

.manifesto-hero {
  min-height: 570px;
  padding-top: 132px;
  padding-bottom: 72px;
}

.manifesto-block {
  padding-top: 90px;
  padding-bottom: 90px;
}

.framework-feature {
  padding-top: 88px;
  padding-bottom: 88px;
}

.archive-dashboard > div {
  padding-top: 46px;
  padding-bottom: 46px;
}

.archive-table {
  padding-top: 34px;
  padding-bottom: 52px;
}

.hundred-grid {
  padding-top: 72px;
  padding-bottom: 72px;
}

.map-header {
  padding-top: 72px;
  padding-bottom: 54px;
}

.map-workspace {
  min-height: 610px;
  margin-bottom: 60px;
}

.changelog {
  padding-top: 42px;
  padding-bottom: 100px;
}

.changelog article {
  padding-top: 50px;
  padding-bottom: 50px;
}

.article-shell {
  padding-top: 76px;
  padding-bottom: 110px;
}

.article-hero {
  padding: 48px;
}

.opening {
  padding-top: 76px;
  padding-bottom: 76px;
}

.article-body {
  padding-top: 58px;
}

.article-section {
  padding-top: 50px;
  padding-bottom: 50px;
}

.article-end {
  padding-top: 58px;
  padding-bottom: 58px;
}

@media (width <= 900px) {
  .hero {
    min-height: 0;
    padding-top: 124px;
    padding-bottom: 48px;
    align-content: start;
  }

  .hero-copy {
    padding-top: 0;
    padding-bottom: 52px;
  }

  .archive-stack {
    height: 440px;
  }

  .section {
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .map-invite {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .experiments,
  .about {
    padding-top: 76px;
    padding-bottom: 62px;
  }

  .collection-hero {
    padding-top: 110px;
    padding-bottom: 64px;
  }

  .manifesto-hero {
    min-height: 0;
    padding-top: 112px;
    padding-bottom: 66px;
  }

  .manifesto-block {
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .map-workspace {
    min-height: 0;
  }

  .article-shell {
    padding-top: 68px;
    padding-bottom: 96px;
  }
}

@media (width <= 600px) {
  .site-header {
    height: 72px;
  }

  .hero {
    min-height: 0;
    padding-top: 104px;
    padding-bottom: 36px;
  }

  .hero-copy {
    padding-bottom: 40px;
  }

  .archive-stack {
    height: 360px;
  }

  .archive-line {
    bottom: 18px;
  }

  .section {
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .section-heading {
    margin-bottom: 42px;
  }

  .map-invite {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .experiments,
  .about {
    padding-top: 64px;
    padding-bottom: 52px;
  }

  .large-quote {
    margin-bottom: 38px;
  }

  .section-more {
    margin-top: 24px;
  }

  .collection-hero {
    padding-top: 86px;
    padding-bottom: 52px;
  }

  .manifesto-hero {
    padding-top: 90px;
    padding-bottom: 54px;
  }

  .manifesto-block {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .framework-feature {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .archive-dashboard > div {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .archive-table {
    padding-top: 28px;
    padding-bottom: 42px;
  }

  .hundred-grid {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .map-header {
    padding-top: 58px;
    padding-bottom: 42px;
  }

  .map-workspace {
    margin-bottom: 44px;
  }

  .changelog {
    padding-top: 26px;
    padding-bottom: 76px;
  }

  .changelog article {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .article-shell {
    padding-top: 54px;
    padding-bottom: 78px;
  }

  .article-hero {
    padding: 34px 26px;
  }

  .opening {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .article-body {
    padding-top: 44px;
  }

  .article-section {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .article-end {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}