.notes-page {
  --notes-rule: color-mix(in srgb, var(--paper-500) 28%, transparent);
  background: var(--ink-050);
  color: var(--paper-900);
  min-height: 100vh;
}
.notes-main { max-width: 1180px; margin: auto; padding: calc(var(--header-h) + 40px) 36px 80px; }
.notes-draft { border-left: 1px solid var(--amber-500); padding: 8px 14px; color: var(--amber-500); font-size: .85rem; line-height: 1.6; margin: 0 0 32px; }
.notes-intro { max-width: 740px; margin-bottom: 40px; }
.notes-intro h1 { font-size: clamp(2.5rem,5vw,4rem); font-weight: 620; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 20px; }
.notes-intro > p { max-width: 58ch; font-size: 1.125rem; line-height: 1.65; color: var(--paper-700); margin: 0; }
.notes-list { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 48px; border-top: 1px solid var(--notes-rule); }
.note-entry { min-width: 0; padding: 28px 0; border-bottom: 1px solid var(--notes-rule); }
.note-entry h2 { max-width: 30ch; font-size: clamp(1.4rem,2.2vw,1.75rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 16px; text-wrap: balance; }
.note-entry h2 a { color: inherit; text-decoration: none; }
.note-entry > p:not(.note-kicker) { max-width: 56ch; color: var(--paper-700); line-height: 1.7; margin: 16px 0 12px; }
.note-lead { grid-row: span 2; padding-right: 44px; border-right: 1px solid var(--notes-rule); }
.note-lead h2 { font-size: clamp(2rem,3.15vw,2.75rem); line-height: 1.16; }
.note-kicker, .note-byline { font-size: .85rem; line-height: 1.6; color: var(--paper-500); }
.note-kicker { margin: 0; }
.note-read, .notes-back, .note-next a, .notes-end { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; color: var(--cyan-400); text-underline-offset: .25em; text-decoration-thickness: 1px; }
.notes-back { margin-bottom: 24px; color: var(--paper-700); }
.note-heading { max-width: 880px; margin-bottom: 40px; }
.note-heading h1 { font-size: clamp(2rem,4.1vw,3.5rem); font-weight: 620; line-height: 1.13; letter-spacing: -.03em; margin: 0 0 20px; text-wrap: balance; }
.note-summary { font-size: 1.125rem; line-height: 1.7; max-width: 64ch; color: var(--paper-700); margin: 20px 0; }
.note-byline { margin: 20px 0 0; }
.note-byline time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.note-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 56px; align-items: start; }
.note-contents { position: sticky; top: calc(var(--header-h) + 28px); border-top: 1px solid var(--notes-rule); padding-top: 12px; }
.note-contents p { font-size: .85rem; color: var(--paper-500); margin: 0 0 10px; }
.note-contents a { display: flex; align-items: center; min-height: 44px; color: var(--paper-700); line-height: 1.5; padding: 10px 0; font-size: .9rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; }
.note-body { max-width: 66ch; min-width: 0; font-size: 1.0625rem; line-height: 1.8; color: var(--paper-700); }
.note-takeaway { border-left: 1px solid var(--cyan-400); padding: 0 0 0 22px; margin: 0 0 40px; }
.note-takeaway .eyebrow { font: inherit; font-size: .85rem; letter-spacing: 0; text-transform: none; color: var(--paper-500); margin: 0 0 8px; }
.note-takeaway p:last-child { color: var(--paper-900); font-size: 1.125rem; line-height: 1.7; margin: 0; }
.note-body section { scroll-margin-top: calc(var(--header-h) + 32px); margin-bottom: 40px; }
.note-body h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.35; color: var(--paper-900); letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; }
.note-body p { margin: 16px 0; }
.note-next { border-top: 1px solid var(--notes-rule); margin-top: 44px; padding-top: 20px; }
.note-next p { font-size: .85rem; color: var(--paper-500); margin: 0; }
.notes-end { margin-top: 24px; color: var(--paper-700); }
.notes-page a:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 5px; border-radius: 2px; transition: none; }
.notes-page a:active { color: var(--paper-900); }
.notes-page .site-nav a[aria-current] { text-decoration: underline; text-underline-offset: .4em; }
.notes-page .site-footer { position: static; }
.notes-main ::selection { color: var(--ink-000); background: var(--cyan-400); }
@media (hover: hover) and (pointer: fine) {
  .notes-main a { transition: color 140ms ease, text-decoration-color 140ms ease; }
  .notes-main a:hover { color: var(--cyan-400); text-decoration: underline; text-underline-offset: .25em; }
  .note-read:hover, .note-next a:hover { color: var(--paper-900); }
}
@media (prefers-reduced-motion: reduce) { .notes-main a { transition: none; } }
@media (max-width: 900px) {
  .notes-list { column-gap: 28px; }
  .note-lead { padding-right: 24px; }
  .note-layout { grid-template-columns: 180px minmax(0,1fr); gap: 32px; }
}
@media (max-width: 760px) {
  .notes-main { padding: calc(var(--header-h) + 24px) 22px 48px; }
  .notes-draft { margin-bottom: 28px; }
  .notes-intro { margin-bottom: 30px; }
  .notes-list, .note-layout { grid-template-columns: 1fr; }
  .note-layout { gap: 28px; }
  .note-contents { position: static; }
  .note-heading { margin-bottom: 28px; }
  .note-body { font-size: 1rem; }
  .note-takeaway { margin-bottom: 32px; }
  .note-entry { padding: 26px 0; }
  .note-lead { grid-row: auto; border-right: 0; }
  .note-entry h2 { max-width: none; }
  .note-heading h1 { overflow-wrap: anywhere; }
  .notes-page .site-footer { padding-inline: 22px; }
}