:root {
  --bg: #1f1f28;
  --surface: #2a2a37;
  --border: #4a4a61;

  --text: #dcd7ba;
  --text-soft: #c8c093;
  --text-muted: #938056;

  --primary: #7e9cd8;
  --accent: #7aa89f;
  --warm: #e6c384;
  --danger: #c34043;
  --glow-blue: rgba(126, 156, 216, 0.2);
  --glow-gold: rgba(230, 195, 132, 0.2);
  --glow-mint: rgba(122, 168, 159, 0.2);
  --glow-purple: rgba(184, 118, 211, 0.26);
  --glow-red: rgba(195, 64, 67, 0.2);
  --glow-cyan: rgba(127, 180, 202, 0.2);
  --glow-green: rgba(152, 187, 108, 0.18);
  --glow-pink: rgba(210, 126, 153, 0.18);

  --block-size: 980px;

  font-size: 16px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  padding: 48px 12px;
  font-family: "Barlow", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100%;
}

a {
  color: var(--primary);
}

a:hover {
  color: var(--accent);
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.8rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-family: "Barlow Condensed", sans-serif;
}

.block {
  width: calc(100% - 24px);
  max-width: var(--block-size);
  padding: 18px 0;
  margin: 12px 24px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.section-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.section-index {
  color: var(--text-soft);
  font-family: monospace;
  font-size: 0.82rem;
}

.block-subtitle {
  color: var(--text-soft);
  margin-top: 4px;
  max-width: 560px;
}

.tone-blue {
  --card-accent: var(--primary);
  --card-glow: var(--glow-blue);
}

.tone-gold {
  --card-accent: var(--warm);
  --card-glow: var(--glow-gold);
}

.tone-mint {
  --card-accent: var(--accent);
  --card-glow: var(--glow-mint);
}

.tone-purple {
  --card-accent: #b876d3;
  --card-glow: var(--glow-purple);
}

.tone-red {
  --card-accent: var(--danger);
  --card-glow: var(--glow-red);
}

.tone-cyan {
  --card-accent: #7fb4ca;
  --card-glow: var(--glow-cyan);
}

.tone-green {
  --card-accent: #98bb6c;
  --card-glow: var(--glow-green);
}

.tone-pink {
  --card-accent: #d27e99;
  --card-glow: var(--glow-pink);
}

@media (max-width: 560px) {
  body {
    padding-top: 32px;
  }

  .block {
    width: 100%;
    margin-inline: 0;
  }
}