html, body { height: 100%; margin: 0; }

.app-main.narrow.prose {
  min-height: calc(100vh - var(--header-h, 70px));
  padding: 24px clamp(12px, 3vw, 32px) 48px;
  background: var(--color-bg, #fff);
  color: var(--color-fg, #111827);
  line-height: 1.65;
}

.app-main.narrow.prose > :not(.card) {
  max-width: 72ch !important;
  margin-inline: auto;
}

.app-main.narrow.prose .card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin: 16px auto 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  width: 100%;
  max-width: 84ch !important;
}
.app-main.narrow.prose .card > h2:first-child { margin-top: 0.1rem; }

.app-main.narrow.prose h1 {
  font-size: clamp(1.8rem, 1.25rem + 1.8vw, 2.4rem);
  line-height: 1.2; margin: 0 0 0.75em; letter-spacing: -0.01em;
}
.app-main.narrow.prose h2 {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.3; margin: 0 0 0.6em;
}
.app-main.narrow.prose p, .app-main.narrow.prose ul, .app-main.narrow.prose ol { margin: 0 0 1em; }

.app-main.narrow.prose a { color: var(--color-link, #1d4ed8); text-decoration: underline; text-underline-offset: 2px; }
.app-main.narrow.prose a:hover, .app-main.narrow.prose a:focus-visible { color: var(--color-accent, #e67e00); text-decoration-thickness: 2px; }
.app-main.narrow.prose :where(a,button,[tabindex],input,select,textarea):focus-visible {
  outline: 2px solid var(--color-accent, #e67e00); outline-offset: 2px; border-radius: 6px;
}

@media (max-width: 1300px) {
  .app-main.narrow.prose { padding: 20px clamp(10px, 3vw, 22px) 36px; }
  .app-main.narrow.prose .card { max-width: 95ch !important; }
}

@media print {
  .app-main.narrow.prose { padding: 0; background: #fff; color: #000; min-height: auto; }
  .app-main.narrow.prose .card { box-shadow: none; page-break-inside: avoid; max-width: none !important; }
  .app-main.narrow.prose a { color: #000; text-decoration: underline; }
}