/* ============================================================
   Wise Apple content pages — long-form typography layer.
   Loaded after styles.css. Everything is scoped to .article-shell
   or .prose so no rule here can reach the homepage.
   ============================================================ */

/* styles.css leaves body transparent so the homepage's fixed WebGL canvas can
   show through. Content pages do not load that canvas, so without this they
   render on the browser's default white. This file is linked only by generated
   pages, so the rule cannot reach the homepage. */
body {
  background: var(--bg);
  color: var(--text);
}

.article-shell {
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(var(--header-h) + 3.5rem) 1.5rem 5rem;
}

.breadcrumbs {
  color: var(--text-faint);
  font-size: 0.8125rem;
  margin-bottom: 1.5rem;
}
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }

.prose h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.prose .byline {
  font-size: 0.875rem;
  color: var(--text-faint);
  margin: -0.5rem 0 1.5rem;
}

.prose .lede {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 2.5rem;
}

.prose p {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.25;
  margin: 3rem 0 1rem;
}

.prose h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 2rem 0 0.75rem;
}

/* styles.css clears list markers globally; restore them inside prose. */
.prose ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.4rem; margin: 0 0 1.25rem; }
.prose li {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover { color: var(--accent-2); }

.prose strong, .prose b { color: var(--text); font-weight: 600; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
  font-size: 0.9em;
}

.callout {
  border-left: 2px solid var(--accent);
  background: var(--accent-faint);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1rem 1.25rem;
  margin: 2rem 0;
}
.callout b { display: block; color: var(--text); margin-bottom: 0.4rem; }
.callout p { margin: 0; }

.table-scroll { overflow-x: auto; margin: 2rem 0; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 34rem;
}
.compare-table caption {
  caption-side: top;
  text-align: left;
  color: var(--text-faint);
  font-size: 0.8125rem;
  padding-bottom: 0.6rem;
}
.compare-table th,
.compare-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.compare-table thead th { color: var(--text); font-weight: 600; }
.compare-table tbody th { color: var(--text); font-weight: 500; }
.compare-table td { color: var(--text-muted); }

.faq-block { margin: 3rem 0 0; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}
.faq-item summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
  font-size: 1.0625rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--accent);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding-top: 0.75rem; }

.video-embed { margin: 2.5rem 0; }
.video-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.video-embed figcaption {
  color: var(--text-faint);
  font-size: 0.8125rem;
  margin-top: 0.6rem;
}

.related { margin: 3.5rem 0 0; }
.related h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
}
.related ul { list-style: none; display: grid; gap: 0.5rem; }
.related a { color: var(--accent); text-decoration: none; }
.related a:hover { text-decoration: underline; }

.hub-section { margin: 3rem 0 0; }
.hub-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin-bottom: 0.5rem;
}
.hub-section > p { color: var(--text-muted); margin-bottom: 1.25rem; }

.hub-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.hub-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.hub-card:hover {
  border-color: var(--border-brand);
  transform: translateY(-2px);
}
/* Hub cards sit inside .prose, whose link rule out-specifies .hub-card. */
.prose .hub-card { text-decoration: none; color: var(--text); }
.prose .hub-card:hover { color: var(--accent); }
.hub-card-title { display: block; font-weight: 600; line-height: 1.35; }
.hub-card-blurb {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.article-cta {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: 2rem;
  margin: 3.5rem 0 0;
  text-align: center;
}
.article-cta h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.article-cta p { color: var(--text-muted); margin-bottom: 1.25rem; }

/* Content pages ship no nav JavaScript, so the links simply wrap. */
.nav-links-static { display: flex; flex-wrap: wrap; gap: 1.25rem; }

@media (max-width: 860px) {
  .nav-links-static { display: none; }
  .article-shell { padding-top: calc(var(--header-h) + 2rem); }
}