.note-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 24px 72px;
}

.note-kicker {
  margin: 28px 0 8px;
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.note-kicker a {
  color: inherit;
  text-decoration: none;
}

.note-wrap h1 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  line-height: 1.18;
  margin: 0 0 12px;
}

.note-meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 28px;
}

.prose {
  font-size: 1.05rem;
  line-height: 1.7;
}

.prose p { margin: 0 0 1.05em; }
.prose h2 {
  font-family: var(--display);
  font-size: 1.35rem;
  margin: 1.6em 0 0.55em;
  line-height: 1.25;
}
.prose h3 {
  font-size: 1.05rem;
  margin: 1.3em 0 0.4em;
}
.prose ul, .prose ol {
  margin: 0 0 1.1em;
  padding-left: 1.2em;
  color: var(--ink);
}
.prose li { margin: 0 0 0.4em; }
.prose a { font-weight: 600; }

.aside {
  margin: 1.4em 0;
  padding: 14px 16px;
  border-left: 3px solid var(--teal);
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 0.98rem;
}

.disclaimer {
  margin-top: 2.2em;
  padding-top: 1em;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
}

.related {
  margin-top: 40px;
  padding-top: 8px;
}
.related h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  margin: 0 0 12px;
}
.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.related li {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.related a { font-weight: 700; }
.related span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 4px;
}

.note-index h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 12px 0 8px;
}
.note-lead {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 40em;
  margin: 0 0 28px;
}

.note-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.note-list li {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.note-list a {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.note-list a:hover { color: var(--teal-deep); text-decoration: underline; }
.note-list .when {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.note-list p {
  margin: 8px 0 0;
  color: var(--muted);
}

.notes-strip {
  max-width: 1120px;
  margin: 0 auto 40px;
  padding: 0 24px;
}
.notes-strip h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 0 0 8px;
}
.notes-strip .features-lead { margin-bottom: 18px; }
.note-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.note-cards a {
  display: block;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  height: 100%;
}
.note-cards a:hover { text-decoration: none; border-color: rgba(31, 122, 106, 0.35); }
.note-cards strong { display: block; font-size: 1.02rem; margin-bottom: 6px; }
.note-cards span { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 900px) {
  .note-cards { grid-template-columns: 1fr; }
}