:root {
  --ink: #151515;
  --ink-soft: #45433d;
  --ink-reading: #262520;
  --ink-faint: #69645a;
  --ink-whisper: #b4ae9e;
  --paper: #fcfaf4;
  --paper-deep: #f1ede2;
  --paper-warm: #eee9dd;
  --rule: #d0cabb;
  --accent: #243fc8;
  --accent-deep: #151515;
  --accent-soft: rgba(197, 220, 244, 0.55);
  --accent-medium: #c9c0ae;
  --font-cn: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-en-display: "Courier New", "Liberation Mono", monospace;
  --font-en-body: Georgia, "Times New Roman", serif;
  --font-mono: "Courier New", "Liberation Mono", monospace;
}

body.archive-about,
body.archive-letter,
body.archive-review {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-cn);
  letter-spacing: 0;
}

body.archive-about .nav,
body.archive-letter .nav,
body.archive-review .nav {
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px clamp(18px, 4vw, 42px) 17px;
  border-color: var(--rule);
}

body.archive-about .nav-brand,
body.archive-letter .nav-brand,
body.archive-review .nav-brand {
  color: var(--ink);
  font: 700 clamp(24px, 3vw, 32px)/1 var(--font-mono);
  letter-spacing: 0;
}

body.archive-about .nav-brand .em,
body.archive-letter .nav-brand .em,
body.archive-review .nav-brand .em {
  color: inherit;
}

body.archive-about .nav-link,
body.archive-letter .nav-link,
body.archive-review .nav-link {
  color: var(--ink-faint);
  font: 700 13px/1.2 var(--font-mono);
  letter-spacing: 0;
}

body.archive-review .nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

body.archive-about .nav-link:hover,
body.archive-about .nav-link.active,
body.archive-letter .nav-link:hover,
body.archive-letter .nav-link.active,
body.archive-review .nav-link:hover {
  color: var(--accent);
}

body.archive-about .container {
  max-width: 1080px;
  padding: clamp(40px, 6vw, 66px) clamp(18px, 4vw, 42px) 64px;
}

.archive-about .hero {
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: clamp(32px, 6vw, 74px);
  border-bottom: 1px dashed #b9b19f;
  padding-bottom: 45px;
}

.archive-about .eyebrow,
.archive-about .section-kicker,
.archive-letter .eyebrow,
.archive-review .kicker {
  color: var(--accent);
  font: 700 12px/1.4 var(--font-mono);
  letter-spacing: 0;
}

.archive-about h1 {
  margin-bottom: 19px;
  color: var(--ink);
  font: 700 clamp(48px, 8vw, 76px)/0.98 var(--font-mono);
  letter-spacing: 0;
}

.archive-about .lead {
  color: var(--ink-reading);
  font-size: 17px;
  line-height: 1.86;
}

.archive-about .hero-note {
  border: 0;
  background: #c5dcf4;
  padding: 19px 18px 22px;
  color: #182041;
  font-size: 14px;
  box-shadow: 3px 4px 0 rgba(20, 20, 20, 0.06);
  transform: rotate(-0.6deg);
}

.archive-about .hero-note .mark {
  color: var(--accent);
  font-family: var(--font-mono);
}

.archive-about .section {
  border-bottom: 1px dashed #c6bfae;
  padding: 42px 0;
}

.archive-about h2 {
  max-width: 760px;
  font-size: clamp(21px, 3vw, 25px);
  font-weight: 600;
  line-height: 1.6;
}

.archive-about .dimensions {
  gap: 10px;
  border: 0;
  background: transparent;
}

.archive-about .dimension {
  min-height: 160px;
  border: 0;
  padding: 17px 16px 19px;
}

.archive-about .dimension:nth-child(1) { background: #c5dcf4; }
.archive-about .dimension:nth-child(2) { background: #ff8875; }
.archive-about .dimension:nth-child(3) { background: #5b8b40; color: #fffefa; }
.archive-about .dimension:nth-child(4) { background: #32618a; color: #fffefa; }
.archive-about .dimension:nth-child(5) { background: #f5b08b; }
.archive-about .dimension:nth-child(6) { background: #285542; color: #fffefa; }
.archive-about .dimension:nth-child(3) .dimension-index,
.archive-about .dimension:nth-child(3) .dimension-title,
.archive-about .dimension:nth-child(3) .dimension-text,
.archive-about .dimension:nth-child(4) .dimension-index,
.archive-about .dimension:nth-child(4) .dimension-title,
.archive-about .dimension:nth-child(4) .dimension-text,
.archive-about .dimension:nth-child(6) .dimension-index,
.archive-about .dimension:nth-child(6) .dimension-title,
.archive-about .dimension:nth-child(6) .dimension-text {
  color: #fffefa;
}

.archive-about .dimension-index,
.archive-about .dimension-title {
  font-family: var(--font-mono);
}

.archive-about .workflow {
  gap: 0;
  background: var(--paper-deep);
  padding: 20px 0;
}

.archive-about .workflow-step {
  border: 0;
  border-left: 1px dashed #bab3a3;
  background: transparent;
  padding: 8px 23px;
}

.archive-about .workflow-step:first-child {
  border-left: 0;
}

.archive-about .promise {
  border: 0;
  border-left: 5px solid #285542;
  background: #eeeadf;
}

body.archive-letter {
  background:
    linear-gradient(rgba(234, 228, 215, 0.82), rgba(234, 228, 215, 0.82)),
    url("assets/archive/old-paper-texture.jpg") center / cover fixed;
}

body.archive-letter .container {
  max-width: 824px;
  margin: clamp(26px, 5vw, 52px) auto 56px;
  padding: clamp(36px, 7vw, 72px) clamp(25px, 8vw, 76px);
  background:
    linear-gradient(rgba(255, 253, 246, 0.88), rgba(255, 253, 246, 0.9)),
    url("assets/archive/old-paper-texture.jpg") center / cover;
  box-shadow: 0 5px 19px rgba(70, 54, 28, 0.13);
}

.archive-letter h1 {
  color: var(--ink);
  font: 700 clamp(34px, 6vw, 53px)/1.2 var(--font-mono);
  letter-spacing: 0;
}

.archive-letter .lead {
  color: var(--ink-reading);
  font-family: var(--font-en-body);
  font-size: 20px;
}

.archive-letter .essay {
  margin-top: 42px;
}

.archive-letter .essay-section {
  padding: 28px 0;
  border-bottom: 1px dashed #c4bdad;
}

.archive-letter .essay-divider {
  color: #285542;
  font: 700 12px/1.3 var(--font-mono);
  letter-spacing: 0;
}

.archive-letter .essay-divider::after {
  content: "  / letter fragment";
}

.archive-letter .prose {
  font-size: 16px;
  line-height: 2;
}

.archive-letter .prose strong,
.archive-letter .essay-signoff {
  color: #285542;
}

.archive-letter .prose h2 {
  display: inline-block;
  margin: 28px 0 12px;
  padding: 5px 9px;
  background: #c5dcf4;
  font: 700 18px/1.4 var(--font-mono);
}

.archive-letter .social-link {
  border-radius: 0;
  border-color: #c9c0ae;
}

body.archive-review {
  background:
    linear-gradient(rgba(230, 223, 208, 0.8), rgba(230, 223, 208, 0.88)),
    url("assets/archive/old-paper-texture.jpg") center / cover;
}

body.archive-review .container {
  max-width: 900px;
  padding: clamp(35px, 6vw, 62px) clamp(18px, 5vw, 46px) 58px;
}

.archive-review .review-shell {
  padding: clamp(27px, 6vw, 52px);
  border: 0;
  background: rgba(255, 254, 250, 0.88);
  box-shadow: 4px 6px 18px rgba(70, 54, 28, 0.12);
}

.archive-review .title {
  font-size: clamp(20px, 3vw, 25px);
  margin-top: 11px;
}

.archive-review .word {
  color: var(--ink);
  font: 700 clamp(52px, 10vw, 78px)/1 var(--font-mono);
  letter-spacing: 0;
  text-transform: lowercase;
}

.archive-review .dictionary-note {
  border: 0;
  padding: 14px 16px;
  background: #c5dcf4;
}

.archive-review .dictionary-label {
  color: var(--accent);
  letter-spacing: 0;
  font-weight: 700;
}

.archive-review .notify-button {
  border: 1px dashed #ada590;
  background: #fffefa;
  font: 700 13px/1.3 var(--font-mono);
}

.archive-review .notify-button:hover,
.archive-review .notify-button.active {
  border-color: #285542;
  color: #fffefa;
  background: #285542;
}

.archive-review .review-progress {
  border-top: 1px dashed #beb6a4;
}

.archive-review .stage-list {
  gap: 0;
}

.archive-review .stage-item {
  min-height: 68px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px dashed #d0cabb;
}

.archive-review .stage-item.active {
  transform: none;
  color: var(--ink);
  background: #fff29e;
}

.archive-review .stage-item.done .stage-mark,
.archive-review .stage-item.active .stage-mark {
  color: #285542;
}

.archive-review .status-panel {
  border: 0;
  margin-top: 25px;
  padding: 17px 19px;
  background: #f1ede2;
}

.archive-review .status-title {
  color: #285542;
  font-family: var(--font-mono);
  font-weight: 700;
}

.archive-review .source-chip {
  color: #285542;
  border: 0;
  background: #e5e0d4;
}

.archive-review .progress-line {
  height: 4px;
}

.archive-review .progress-fill {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 44%, transparent 78%),
    #285542;
}

.archive-review .action {
  background: var(--accent);
  border: 0;
  color: #fffefa;
  font: 700 13px/1.3 var(--font-mono);
}

.archive-review .action.secondary {
  background: #fffefa;
  border: 1px dashed #ada590;
  color: var(--ink);
}

@media (max-width: 800px) {
  .archive-about .hero {
    grid-template-columns: 1fr;
  }

  .archive-about .dimensions,
  .archive-about .workflow {
    grid-template-columns: 1fr;
  }

  .archive-about .workflow-step {
    border-left: 0;
    border-top: 1px dashed #bab3a3;
  }

  .archive-about .workflow-step:first-child {
    border-top: 0;
  }

  body.archive-letter .container {
    margin: 16px 12px 36px;
  }
}