.notes-page { max-width: 1240px; padding: 8rem 3rem 5rem; margin: auto; }
.notes-breadcrumb { position: static; display: block; font-size: 12px; color: var(--muted); margin-bottom: 4rem; line-height: 1.7; }
.notes-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.notes-page h1 { font-family: var(--font-serif); font-weight: 400; font-size: 72px; line-height: 1.05; letter-spacing: 0; max-width: 18ch; margin: 1rem 0 1.5rem; }
.notes-lead { max-width: 54ch; font-size: 20px; line-height: 1.6; color: #c2c0b9; }
.notes-byline { font-size: 13px; color: var(--muted); margin-top: 1.5rem; }
.notes-article-head { max-width: 850px; margin: 0 auto 4rem; border-bottom: 1px solid var(--line); padding-bottom: 3rem; }
.notes-body { max-width: 720px; margin: auto; }
.notes-body section { margin-bottom: 2.5rem; }
.notes-body h2 { font-family: var(--font-serif); font-size: 34px; font-weight: 400; line-height: 1.15; margin-bottom: .85rem; }
.notes-body p { font-size: 17px; line-height: 1.85; color: #c2c0b9; margin-bottom: 1.5rem; }
.notes-body a { text-decoration: underline; text-underline-offset: 4px; }
.notes-contact { display: inline-block; margin-block: 1rem; color: var(--amber); }
.notes-index-head { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3rem; margin-bottom: 4rem; }
.notes-index-head .service-graphic { width: 100%; margin: 0; border: 0; }
.notes-index, .notes-related { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; border-top: 1px solid var(--line); padding-top: 2.5rem; }
.notes-related { max-width: 850px; margin: 4rem auto 0; }
.notes-preview { display: block; padding-bottom: 2rem; }
.notes-preview h2 { font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.1; margin-bottom: 1rem; }
.notes-preview p { color: var(--muted); line-height: 1.7; font-size: 16px; margin-bottom: 1.25rem; }
.notes-preview > span { color: var(--amber); font-size: 13px; }
.notes-page a:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
@media (max-width: 700px) {
  .notes-page { padding: 7rem 1.5rem 3rem; }
  .notes-breadcrumb { margin-bottom: 2.5rem; }
  .notes-page h1 { font-size: 48px; }
  .notes-lead { font-size: 18px; }
  .notes-index-head, .notes-index, .notes-related { grid-template-columns: 1fr; gap: 2rem; }
  .notes-body h2 { font-size: 30px; }
  .notes-body p { font-size: 16px; }
}