/* Alfie Notes Typography / Editorial System v1.0 — article routes only. */
@font-face{font-family:'Noto Sans TC';src:url('/fonts/notes-noto-sans-tc-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans TC';src:url('/fonts/notes-noto-sans-tc-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Noto Sans TC';src:url('/fonts/notes-noto-sans-tc-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Noto Sans TC';src:url('/fonts/notes-noto-sans-tc-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}

.reading.note-article {
  --notes-font: 'Noto Sans TC', sans-serif;
  --notes-body-weight: 400;
  --notes-title-weight: 500;
  --notes-strong-weight: 600;
  --notes-highest-weight: 700;
  --notes-quote-weight: 600;
  --notes-width: 720px;
  --notes-body-size: 18px;
  --notes-line-height: 1.8;
  --notes-paragraph-gap: 20px;
  --notes-consecutive-gap: 17px;
  --notes-quote-gap: 28px;
  --notes-quote-paragraph-gap: 14px;
  --notes-quote-rule: 3px;
  --notes-quote-inset: 20px;
  --notes-quote-ink: #393733;
  --notes-quote-rule-color: #9c958b;
  --notes-title-size: 58px;
  --notes-title-line-height: 1.14;
  --notes-title-tracking: -1px;
  --notes-title-before: 18px;
  --notes-title-after: 42px;
  --notes-meta-size: 12px;
  --notes-meta-line-height: 1.8;
  --notes-meta-ink: var(--soft);
  --notes-start-gap: 76px;
  --notes-end-gap: 96px;
  --notes-back-gap: 56px;
  width: 100%;
  max-width: var(--notes-width);
  margin: var(--notes-start-gap) auto var(--notes-end-gap);
  /* Keep authored italics in Suma; all bold weights use real font instances. */
  font-synthesis: style;
}
.reading.note-article h1 {
  font-family: var(--notes-font);
  font-weight: var(--notes-title-weight);
  font-size: var(--notes-title-size);
  line-height: var(--notes-title-line-height);
  letter-spacing: var(--notes-title-tracking);
  margin: var(--notes-title-before) 0 var(--notes-title-after);
}
.reading.note-article .prose {
  font-family: var(--notes-font);
  font-weight: var(--notes-body-weight);
  font-size: var(--notes-body-size);
  line-height: var(--notes-line-height);
  letter-spacing: 0;
}
.reading.note-article .prose p { margin: 0 0 var(--notes-paragraph-gap); }
.reading.note-article:not(.about) .prose > p:has(+ p) { margin-bottom: var(--notes-consecutive-gap); }
.reading.note-article .prose strong { font-weight: var(--notes-strong-weight); }
.reading.note-article .prose strong.notes-emphasis-highest { font-weight: var(--notes-highest-weight); }
.reading.note-article .prose blockquote {
  font-family: var(--notes-font);
  font-weight: var(--notes-quote-weight);
  color: var(--notes-quote-ink);
  border-left: var(--notes-quote-rule) solid var(--notes-quote-rule-color);
  margin: var(--notes-quote-gap) 0;
  /* Extra rule width is offset by 2px less padding; text origin is preserved. */
  padding-left: var(--notes-quote-inset);
}
.reading.note-article .prose blockquote strong { font-weight: var(--notes-quote-weight); }
.reading.note-article .prose blockquote p { margin-bottom: var(--notes-quote-paragraph-gap); }
.reading.note-article .prose p:last-child { margin-bottom: 0; }
.reading.note-article > time, .reading.note-article .note-language {
  font-family: var(--notes-font);
  font-weight: var(--notes-body-weight);
  font-size: var(--notes-meta-size);
  line-height: var(--notes-meta-line-height);
  color: var(--notes-meta-ink);
}
.reading.note-article .back { margin-top: var(--notes-back-gap); }
@media (max-width: 900px) { .reading.note-article { --notes-start-gap: 80px; } }
@media (max-width: 600px) {
  .reading.note-article {
    --notes-body-size: 17px;
    --notes-line-height: 1.85;
    --notes-paragraph-gap: 18px;
    --notes-consecutive-gap: 14px;
    --notes-quote-gap: 24px;
    --notes-quote-inset: 16px;
    --notes-title-size: 44px;
    --notes-title-tracking: -.6px;
    --notes-title-before: 16px;
    --notes-title-after: 32px;
    --notes-start-gap: 48px;
    --notes-end-gap: 72px;
    --notes-back-gap: 44px;
  }
}
