/* The Learning Table (the blog): a plain reading layout, deliberately not the app's look. */
:root {
  --j-bg: #ffffff;
  --j-ink: #1f2328;
  --j-soft: #57606a;
  --j-faint: #8c959f;
  --j-line: #e6e8eb;
  --j-tint: #f6f7f8;
  --j-link: #1a5fb4;
}
@media (prefers-color-scheme: dark) {
  :root { --j-bg: #121417; --j-ink: #e8eaed; --j-soft: #b4bac2; --j-faint: #8b929b; --j-line: #2a2e33; --j-tint: #1a1d21; --j-link: #8ab4f8; }
}
* { box-sizing: border-box; }
body.journal { margin: 0; background: var(--j-bg); color: var(--j-ink); font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.journal a { color: var(--j-link); }
.j-top { border-bottom: 1px solid var(--j-line); padding: 18px max(20px, env(safe-area-inset-left, 0px)); text-align: center; }
.j-top a { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 22px; color: var(--j-ink); text-decoration: none; letter-spacing: -0.2px; }

.j-article, .j-index { max-width: 700px; margin: 0 auto; padding: 40px max(20px, env(safe-area-inset-left, 0px)) 56px; }
.j-kicker { display: block; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--j-soft); margin: 0 0 10px; }
.journal h1 { font-size: 42px; line-height: 1.15; font-weight: 700; letter-spacing: -0.6px; margin: 0 0 14px; text-wrap: balance; }
.j-lede { font-size: 22px; line-height: 1.5; color: var(--j-soft); margin: 0 0 24px; }
.j-byline { display: flex; align-items: center; gap: 12px; font-family: Inter, system-ui, sans-serif; margin: 0 0 28px; }
.j-byline > div { display: flex; flex-direction: column; }
.j-author { font-size: 15px; font-weight: 600; }
.j-meta { font-family: Inter, system-ui, sans-serif; font-size: 14px; color: var(--j-faint); }
.j-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

.j-hero { margin: 0 0 32px; }
.j-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--j-tint); }
.j-hero figcaption { font-family: Inter, system-ui, sans-serif; font-size: 13px; color: var(--j-faint); margin-top: 8px; text-align: center; }

.j-body h2 { font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -0.3px; margin: 44px 0 10px; text-wrap: balance; }
.j-body h3 { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 28px 0 6px; }
.j-body p, .j-body li { margin: 0 0 18px; }
.j-body ul, .j-body ol { padding-left: 24px; margin: 0 0 18px; }
.j-body li { margin-bottom: 8px; }
.j-body blockquote { margin: 28px 0; padding: 0 0 0 20px; border-left: 3px solid var(--j-ink); font-style: italic; }
.j-body blockquote p { margin: 0; }
.j-body strong { font-weight: 700; }
.j-body .rank { font-family: Inter, system-ui, sans-serif; color: var(--j-faint); font-weight: 600; margin-right: 8px; }
.j-body .rank::after { content: '.'; }

/* Tables scroll inside themselves on a phone. */
.j-body .table-wrap { overflow-x: auto; margin: 0 0 24px; border-top: 1px solid var(--j-line); }
.j-body table { border-collapse: collapse; width: 100%; min-width: 520px; font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.45; }
.j-body th, .j-body td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--j-line); }
.j-body th { font-weight: 600; color: var(--j-soft); }

/* Strengths and limits, side by side. */
.j-body .pros-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 4px 0 18px; font-family: Inter, system-ui, sans-serif; font-size: 15px; }
.j-body .pros-cons h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--j-faint); }
.j-body .pros-cons ul { margin: 0; padding-left: 18px; }
.j-body .pros-cons li { margin: 0 0 4px; }

/* Questions at the end. */
.j-body .faq details { border-top: 1px solid var(--j-line); padding: 14px 0; }
.j-body .faq details:last-child { border-bottom: 1px solid var(--j-line); }
.j-body .faq summary { cursor: pointer; font-weight: 600; }
.j-body .faq details p { margin: 10px 0 0; color: var(--j-soft); }

.j-about { display: flex; gap: 14px; align-items: flex-start; margin: 44px 0 0; padding: 20px 0 0; border-top: 1px solid var(--j-line); font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.55; color: var(--j-soft); }
.j-about p { margin: 0; }
.j-more { margin-top: 40px; font-family: Inter, system-ui, sans-serif; }
.j-more h2 { font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--j-faint); margin: 0 0 10px; }
.j-more ul { list-style: none; margin: 0; padding: 0; }
.j-more li { border-top: 1px solid var(--j-line); padding: 12px 0; font-size: 17px; }
.j-more a { color: var(--j-ink); text-decoration: none; font-weight: 500; }
.j-more a:hover { text-decoration: underline; }

/* The list of articles. */
.j-index h1 { font-size: 48px; }
.j-list { list-style: none; margin: 32px 0 0; padding: 0; }
.j-list li { border-top: 1px solid var(--j-line); }
.j-list a { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 24px 0; color: inherit; text-decoration: none; }
.j-list a:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.j-list img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--j-tint); }
.j-list h2 { font-size: 24px; line-height: 1.25; margin: 0 0 6px; text-wrap: balance; }
.j-list a:hover h2 { text-decoration: underline; }
.j-list p { font-size: 17px; line-height: 1.5; color: var(--j-soft); margin: 0 0 8px; }

.j-foot { border-top: 1px solid var(--j-line); padding: 24px 20px 40px; text-align: center; font-family: Inter, system-ui, sans-serif; font-size: 14px; color: var(--j-faint); }
.j-foot p { margin: 4px 0; }
.j-foot a { color: var(--j-soft); }

@media (max-width: 640px) {
  body.journal { font-size: 18px; }
  .journal h1 { font-size: 32px; }
  .j-index h1 { font-size: 36px; }
  .j-lede { font-size: 19px; }
  .j-body h2 { font-size: 24px; }
  .j-list a { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .j-body .pros-cons { grid-template-columns: minmax(0, 1fr); }
}