.notes-page { background-color: var(--scroll-color, #e7e3da); transition: background-color .35s linear; }
.notes-page { overflow-x: hidden; }
.notes-page .site-header { background: #e7e3da; }
.notes-page.reveal-ready .reveal { opacity: 1; transform: none; }
.nav-current { border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.notes-hero { min-height: 720px; padding-top: 80px; padding-bottom: 70px; display: grid; grid-template-columns: 1fr 2fr; align-content: space-between; position: relative; }
.notes-hero h1 { grid-column: 2; font-size: clamp(62px, 10vw, 145px); }
.notes-lede { grid-column: 2; max-width: 320px; font-size: 17px; line-height: 1.3; }
.notes-hero .round-arrow { position: absolute; top: 50%; right: clamp(24px, 5vw, 76px); width: 55px; height: 55px; margin-top: -27.5px; }
.note-story { min-height: 820px; display: grid; grid-template-columns: 1fr 2fr; gap: 8vw; padding: 120px clamp(24px, 5vw, 76px); background: #171717; color: var(--paper); }
.story-index { color: rgba(244,241,233,.52); position: sticky; top: 35px; height: fit-content; }
.story-content { max-width: 780px; padding-top: 100px; }
.story-kicker { color: var(--acid); margin-bottom: 48px; }
.story-content h2 { max-width: 740px; font-size: clamp(48px, 7vw, 101px); font-weight: 500; line-height: .9; letter-spacing: -.08em; }
.story-body { max-width: 430px; margin-top: 65px; color: rgba(244,241,233,.62); font-size: 17px; line-height: 1.45; }
.story-body + .story-body { margin-top: 30px; }
.scroll-text .scroll-word { color: transparent; transition: color .3s ease, opacity .3s ease; }
.scroll-text .scroll-word.is-lit { color: rgba(244,241,233,.95); }
.note-story-reverse .scroll-text .scroll-word { color: transparent; }
.note-story-reverse .scroll-text .scroll-word.is-lit { color: rgba(20,20,20,.92); }
.note-break { min-height: 680px; background: var(--acid); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.break-quote { font: clamp(54px, 8vw, 115px) Georgia, serif; line-height: .88; letter-spacing: -.08em; }
.note-break .hourly-quote { color: #141414; }
.note-break > span { margin-top: 48px; }
.note-story-reverse { background: #cfdbbe; color: var(--ink); }
.note-story-reverse .story-index { color: rgba(20,20,20,.5); }
.note-story-reverse .story-kicker { color: #e94e2f; }
.note-story-reverse .story-body { color: rgba(20,20,20,.62); }
.note-end { min-height: 700px; padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; justify-content: space-between; }
.note-end h2 { font-size: clamp(58px, 9vw, 130px); }
.note-end .contact-email { margin-top: 0; }
@media (max-width: 700px) {
  .notes-page .site-header { padding-left: 20px; padding-right: 20px; }
  .notes-hero { min-height: 100svh; display: flex; justify-content: space-between; padding: 42px 20px 44px; }
  .notes-hero h1 { margin-top: 80px; font-size: clamp(48px, 15vw, 76px); line-height: .88; max-width: 100%; }
  .notes-lede { margin-top: 28px; max-width: 270px; font-size: 15px; }
  .notes-hero .round-arrow { position: static; align-self: flex-end; margin-top: 34px; flex: 0 0 55px; }
  .note-story { min-height: 100svh; display: block; padding: 64px 20px 76px; }
  .story-index { position: static; }
  .story-content { padding-top: 72px; }
  .story-kicker { margin-bottom: 28px; }
  .story-content h2 { font-size: clamp(40px, 12vw, 64px); line-height: .92; }
  .story-body { margin-top: 34px; max-width: 100%; font-size: 16px; line-height: 1.5; }
  .story-body + .story-body { margin-top: 24px; }
  .note-break { min-height: 100svh; padding-left: 20px; padding-right: 20px; }
  .break-quote { font-size: clamp(48px, 13vw, 76px); }
  .note-end { min-height: 100svh; padding: 64px 20px 72px; }
  .note-end h2 { font-size: clamp(50px, 14vw, 84px); }
  .note-end .contact-email { max-width: 100%; overflow-wrap: anywhere; font-size: 15px; }
}

@media (prefers-color-scheme: dark) {
  .notes-page { --scroll-color: #11110f; }
  .notes-page .site-header { background: transparent; color: var(--ink); }
  .note-story { background: #050505; }
  .note-break { background: var(--acid); color: #11110f; }
  .note-story-reverse { background: #293525; color: var(--ink); }
  .note-story-reverse .story-index { color: rgba(244, 241, 233, .55); }
  .note-story-reverse .story-body { color: rgba(244, 241, 233, .65); }
  .note-story-reverse .scroll-text .scroll-word { color: transparent; }
  .note-story-reverse .scroll-text .scroll-word.is-lit { color: rgba(244, 241, 233, .92); }
  .note-end { background: #11110f; }
}

.notes-page main > section { min-height: 100svh; scroll-snap-align: start; }
.notes-page main > section,
.notes-page .note-story,
.notes-page .note-break,
.notes-page .note-story-reverse,
.notes-page .note-end { background-color: transparent; }
.notes-page main > section:first-child { scroll-snap-align: start; }
.notes-page { scroll-snap-type: y proximity; }