body[data-display="grotesk"] { --font-display: "Space Grotesk", "Mona Sans", sans-serif; }
  body[data-display="mona"] { --font-display: "Mona Sans", -apple-system, sans-serif; }
  @font-face { font-family: "Mona Sans"; src: url("/fonts/MonaSans-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }
  @font-face { font-family: "Mona Sans"; src: url("/fonts/MonaSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; }
  .note-lead { background: var(--hai-stone); border-radius: var(--radius-lg); padding: 32px 26px; position: relative; overflow: hidden; }
  .note-lead h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: 14px 0 16px; max-width: 20ch; }
  .note-lead p { font-size: 16px; line-height: 1.6; color: var(--fg-muted); margin: 0 0 24px; max-width: 54ch; }
  .note-lead__meta { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); margin-bottom: 20px; }
  @media (min-width: 900px) { .note-lead { padding: 52px 48px; } }
  .note-row { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background 180ms var(--ease-hover); }
  .note-row[hidden] { display: none; }
  .note-row:hover { background: rgba(17,17,17,0.02); }
  .note-row__date { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-subtle); width: 88px; flex-shrink: 0; padding-top: 3px; }
  .note-row__body h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 7px; }
  .note-row__body p { font-size: 14.5px; line-height: 1.55; color: var(--fg-muted); margin: 0 0 10px; max-width: 62ch; }
  .note-row__tags { display: flex; gap: 8px; flex-wrap: wrap; }
  .note-row__arrow { margin-left: auto; font-family: var(--font-mono); color: var(--fg-subtle); align-self: center; transition: transform 200ms var(--ease-hover), color 200ms var(--ease-hover); }
  .note-row:hover .note-row__arrow { transform: translateX(4px); color: var(--fg); }
  @media (max-width: 640px) { .note-row { flex-direction: column; gap: 10px; } .note-row__date { width: auto; } .note-row__arrow { display: none; } }

.note-article { max-width: 760px; }
.note-article__back { display: inline-block; margin-bottom: 22px; color: var(--fg-muted); text-decoration: none; font-size: 14px; }
.note-article__back:hover { color: var(--fg); }
.note-article h1 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.035em; line-height: 1.02; margin: 12px 0 16px; }
.note-article__excerpt { font-size: 18px; line-height: 1.55; color: var(--fg-muted); margin: 0 0 28px; }
.note-article__body { font-size: 17px; line-height: 1.65; }
.note-article__body h1, .note-article__body h2, .note-article__body h3 { letter-spacing: -0.03em; line-height: 1.15; margin: 1.4em 0 0.4em; }
.note-article__body p { margin: 0 0 1em; }
.note-article__body a { color: var(--hai-ocean); }
.note-article__body ul, .note-article__body ol { margin: 0 0 1em; padding-left: 1.2em; }
.episode-block { margin-top: 36px; }
.episode-block h2 { font-size: 22px; letter-spacing: -0.03em; margin: 0 0 12px; }
.episode-block .empty { color: var(--fg-subtle); font-size: 15px; margin: 0; }
.source-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.source-list a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--fg); text-decoration: none; font-weight: 500; }
.source-list a:hover { color: var(--hai-ocean); }
.source-list .arrow { font-family: var(--font-mono); color: var(--fg-subtle); }