/* Satoshi correspondence topic guides ----------------------------------- */

.correspondence-topics-page {
  --topic-gold: #e1b969;
  --topic-cyan: #89d9e5;
  --topic-ink: #eeece6;
  --topic-muted: #a8adb8;
  --topic-rule: rgb(176 183 199 / 0.2);
  --topic-rule-strong: rgb(196 201 214 / 0.34);
  --topic-surface: rgb(13 16 24 / 0.82);
  background:
    radial-gradient(circle at 12% 4%, rgb(247 147 26 / 0.075), transparent 28rem),
    radial-gradient(circle at 88% 22%, rgb(73 158 177 / 0.06), transparent 34rem),
    #0b0d14;
}

.correspondence-topics-page .research-article {
  width: min(1320px, 92vw);
  max-width: 1320px;
}

.topic-index-hero,
.topic-detail-hero {
  position: relative;
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 104px);
  border-bottom: 1px solid var(--topic-rule-strong);
}

.topic-index-hero::before,
.topic-detail-hero::before {
  position: absolute;
  inset: 24px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--topic-rule), transparent);
  content: '';
}

.topic-index-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.topic-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(310px, 0.42fr);
  gap: clamp(48px, 8vw, 118px);
  align-items: end;
}

.topic-kicker,
.topic-coordinate,
.topic-section-label,
.topic-record-number,
.topic-snapshot > span,
.topic-lens-number {
  color: var(--topic-gold);
  font-family: var(--research-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.topic-index-hero h1,
.topic-detail-hero h1 {
  max-width: 13ch;
  margin: 19px 0 28px;
  color: var(--topic-ink);
  font-size: clamp(3rem, 7vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.93;
  text-wrap: balance;
}

.topic-detail-hero h1 {
  max-width: 11ch;
}

.topic-dek {
  max-width: 800px;
  margin: 0 0 34px;
  color: #cbc9c2;
  font-size: clamp(1.08rem, 1.7vw, 1.4rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.topic-boundary,
.topic-method-note {
  display: grid;
  grid-template-columns: minmax(180px, 0.25fr) minmax(0, 1fr);
  gap: clamp(38px, 7vw, 108px);
  padding: clamp(58px, 7vw, 92px) 0;
  border-bottom: 1px solid var(--topic-rule-strong);
}

.topic-boundary > *,
.topic-method-note > * {
  min-width: 0;
}

.topic-boundary h2,
.topic-method-note h2,
.topic-section-heading h2 {
  margin: 0;
  color: var(--topic-ink);
  font-size: clamp(1.8rem, 3.5vw, 3.65rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}

.topic-boundary p,
.topic-method-note p,
.topic-section-heading p {
  max-width: 850px;
  color: var(--topic-muted);
  line-height: 1.78;
}

.topic-boundary strong,
.topic-method-note strong {
  color: var(--topic-ink);
}

.topic-caution {
  margin-top: 28px;
  padding: 19px 0 0 22px;
  border-top: 1px solid var(--topic-rule);
  border-left: 1px solid var(--topic-gold);
}

.topic-text-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--topic-cyan);
  font-family: var(--research-mono);
  font-size: 12px;
}

.topic-index,
.topic-evidence,
.topic-lenses,
.topic-reading-path,
.topic-previews {
  padding: clamp(64px, 8vw, 108px) 0;
  border-bottom: 1px solid var(--topic-rule-strong);
}

.topic-section-heading {
  display: grid;
  grid-template-columns: minmax(180px, 0.25fr) minmax(0, 1fr);
  gap: clamp(38px, 7vw, 108px);
  align-items: start;
  margin-bottom: clamp(38px, 5vw, 64px);
}

.topic-section-heading > * {
  min-width: 0;
}

.topic-section-heading p {
  margin: 20px 0 0;
}

.topic-section-heading > .topic-section-label {
  margin: 0;
  color: var(--topic-gold);
}

.topic-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--topic-rule-strong);
  list-style: none;
}

.topic-index-card {
  min-width: 0;
  background: #0b0d14;
}

.topic-index-card > a {
  display: grid;
  min-height: 390px;
  padding: clamp(28px, 4vw, 50px);
  color: inherit;
  background:
    linear-gradient(135deg, rgb(247 147 26 / 0.045), transparent 45%),
    var(--topic-surface);
  text-decoration: none;
}

.topic-index-card > a:hover {
  background:
    linear-gradient(135deg, rgb(247 147 26 / 0.1), transparent 52%),
    rgb(16 19 28 / 0.94);
}

.topic-index-card h2 {
  max-width: 14ch;
  margin: 20px 0 18px;
  color: var(--topic-ink);
  font-size: clamp(1.65rem, 3vw, 3.15rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.topic-index-card p {
  max-width: 58ch;
  margin: 0;
  color: var(--topic-muted);
  line-height: 1.7;
}

.topic-index-card dl {
  display: flex;
  gap: 34px;
  align-self: end;
  margin: 34px 0 20px;
}

.topic-index-card dl div {
  display: grid;
  gap: 5px;
}

.topic-index-card :is(dt, dd) {
  margin: 0;
  font-family: var(--research-mono);
  font-size: 11px;
}

.topic-index-card dt {
  color: var(--research-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topic-index-card dd {
  color: var(--topic-ink);
}

.topic-card-action {
  align-self: end;
  color: var(--topic-cyan);
  font-family: var(--research-mono);
  font-size: 12px;
}

.topic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.topic-actions a {
  padding: 10px 13px;
  border: 1px solid var(--topic-rule-strong);
  color: var(--topic-cyan);
  font-family: var(--research-mono);
  font-size: 11px;
  text-decoration: none;
}

.topic-actions a:hover {
  border-color: var(--topic-gold);
}

.topic-method-note code {
  overflow-wrap: anywhere;
  color: var(--topic-cyan);
  font-size: 0.78rem;
}

.topic-snapshot {
  position: relative;
  padding-left: 30px;
  border-left: 1px solid var(--topic-rule-strong);
}

.topic-snapshot::before {
  position: absolute;
  top: 5px;
  left: -5px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--topic-gold);
  border-radius: 50%;
  background: #0b0d14;
  box-shadow: 0 0 18px rgb(225 185 105 / 0.55);
  content: '';
}

.topic-snapshot dl {
  display: grid;
  margin: 34px 0 0;
}

.topic-snapshot dl div {
  display: grid;
  grid-template-columns: 0.78fr 1.2fr;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--topic-rule);
}

.topic-snapshot :is(dt, dd) {
  min-width: 0;
  margin: 0;
  font-family: var(--research-mono);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.topic-snapshot dt {
  color: var(--research-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topic-snapshot dd {
  color: var(--topic-ink);
}

.topic-evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1px;
  padding: 1px;
  background: var(--topic-rule-strong);
}

.topic-evidence-grid > * {
  min-width: 0;
  padding: clamp(25px, 3vw, 38px);
  background: var(--topic-surface);
}

.topic-evidence-grid h3 {
  margin: 0 0 30px;
  color: var(--topic-ink);
  font-size: 1rem;
  font-weight: 500;
}

.topic-year-card ol,
.topic-tag-card ul,
.topic-lenses > ol,
.topic-reading-path > ol,
.topic-previews > ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-year-card ol {
  display: grid;
  gap: 24px;
}

.topic-year-card li span {
  display: flex;
  justify-content: space-between;
  color: var(--topic-muted);
  font-family: var(--research-mono);
  font-size: 11px;
}

.topic-year-card li strong {
  color: var(--topic-ink);
  font-weight: 500;
}

.topic-year-card li > div {
  height: 2px;
  margin-top: 9px;
  background: var(--topic-rule);
}

.topic-year-card li i {
  display: block;
  width: var(--topic-share);
  height: 100%;
  background: linear-gradient(90deg, var(--topic-gold), var(--topic-cyan));
}

.topic-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-color: var(--topic-gold) transparent;
}

.topic-table-card table {
  width: 100%;
  min-width: 390px;
  border-collapse: collapse;
}

.topic-table-card :is(th, td) {
  padding: 11px 10px;
  border-bottom: 1px solid var(--topic-rule);
  text-align: left;
}

.topic-table-card thead th {
  color: var(--research-faint);
  font-family: var(--research-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.topic-table-card tbody th {
  color: var(--topic-ink);
  font-size: 0.82rem;
  font-weight: 500;
}

.topic-table-card tbody td {
  color: var(--topic-muted);
  font-family: var(--research-mono);
  font-size: 10px;
}

.topic-tag-card ul {
  display: grid;
}

.topic-tag-card li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--topic-rule);
}

.topic-tag-card li span {
  color: var(--topic-ink);
  font-size: 0.87rem;
  text-transform: capitalize;
}

.topic-tag-card li strong {
  color: var(--topic-gold);
  font-family: var(--research-mono);
  font-size: 0.8rem;
  font-weight: 500;
}

.topic-tag-card li small {
  grid-column: 1 / -1;
  color: var(--research-faint);
  font-family: var(--research-mono);
  font-size: 9px;
}

.topic-tag-card > p {
  margin: 24px 0 0;
  color: var(--research-faint);
  font-size: 0.8rem;
  line-height: 1.6;
}

.topic-lenses > ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--topic-rule-strong);
}

.topic-lenses > ol > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  min-width: 0;
  padding: clamp(28px, 4vw, 44px);
  background: var(--topic-surface);
}

.topic-lenses h3 {
  margin: 0 0 14px;
  color: var(--topic-ink);
  font-size: 1.25rem;
  font-weight: 500;
}

.topic-lenses li p {
  margin: 0;
  color: var(--topic-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.topic-reading-path > ol {
  border-top: 1px solid var(--topic-rule-strong);
}

.topic-record {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(155px, 0.24fr);
  gap: clamp(20px, 4vw, 56px);
  min-width: 0;
  padding: 25px 0;
  border-bottom: 1px solid var(--topic-rule);
}

.topic-record > * {
  min-width: 0;
}

.topic-record > div > p {
  margin: 0 0 8px;
  color: var(--research-faint);
  font-family: var(--research-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.topic-record h3 {
  margin: 0;
  color: var(--topic-ink);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.topic-tags span {
  padding: 4px 7px;
  border: 1px solid var(--topic-rule);
  color: var(--topic-muted);
  font-family: var(--research-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topic-record-links {
  display: grid;
  gap: 7px;
  align-content: start;
}

.topic-record-links a,
.topic-previews li > a,
.topic-reading-note a {
  color: var(--topic-cyan);
  font-family: var(--research-mono);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.topic-reading-note {
  margin: 28px 0 0;
  color: var(--topic-muted);
  font-size: 0.88rem;
}

.topic-previews > ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--topic-rule-strong);
}

.topic-previews li {
  min-width: 0;
  padding: clamp(28px, 4vw, 44px);
  background: var(--topic-surface);
}

.topic-previews li > p {
  margin: 0;
  color: var(--research-faint);
  font-family: var(--research-mono);
  font-size: 10px;
}

.topic-previews blockquote {
  margin: 28px 0;
  color: var(--topic-ink);
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.topic-related {
  margin-top: clamp(64px, 8vw, 108px);
}

@media (max-width: 1080px) {
  .topic-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topic-tag-card {
    grid-column: 1 / -1;
  }

  .topic-lenses > ol,
  .topic-previews > ol {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .topic-detail-hero,
  .topic-boundary,
  .topic-method-note,
  .topic-section-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .topic-detail-hero {
    align-items: start;
  }

  .topic-snapshot {
    max-width: 620px;
  }

  .topic-index-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .correspondence-topics-page .research-topbar {
    position: static;
  }

  .correspondence-topics-page .research-brand-group {
    align-items: flex-start;
  }

  .topic-evidence-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .topic-tag-card {
    grid-column: auto;
  }

  .topic-record {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .topic-record-links {
    grid-column: 2;
  }
}

@media (max-width: 520px) {
  .topic-index-card > a {
    min-height: 0;
  }

  .topic-index-card dl,
  .topic-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .topic-snapshot {
    padding-left: 20px;
  }

  .topic-snapshot dl div {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .topic-lenses > ol > li {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .correspondence-topics-page *,
  .correspondence-topics-page *::before,
  .correspondence-topics-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  .topic-year-card li i,
  .topic-index-card > a {
    forced-color-adjust: auto;
  }
}

@media print {
  .correspondence-topics-page {
    color: #111;
    background: #fff;
  }

  .topic-index-card > a,
  .topic-evidence-grid > *,
  .topic-lenses > ol > li,
  .topic-previews li {
    color: #111;
    background: transparent;
  }

  .correspondence-topics-page .research-topbar,
  .correspondence-topics-page .research-footer,
  .topic-actions,
  .topic-related {
    display: none;
  }
}