/* ==========================================================================
   Stratovia — long-form prose, article layout, contact, error page
   ========================================================================== */

/* Prose ------------------------------------------------------------------- */
.prose { max-width: 40rem; }

.prose > * + * { margin-top: 1.1rem; }

.prose h2 {
  font-size: 1.375rem;
  line-height: 1.35;
  margin-top: 2.25rem;
}

.prose h3 { font-size: 1.0625rem; margin-top: 1.75rem; }

.prose p,
.prose li { color: var(--text); line-height: 1.7; }

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

.prose ul,
.prose ol { padding-left: 1.15rem; display: grid; gap: 0.5rem; }
.prose li::marker { color: var(--muted); }

.prose blockquote {
  border-left: 3px solid var(--border-strong);
  padding: 0.1rem 0 0.1rem 1.15rem;
  color: var(--muted);
}

.prose blockquote p { color: inherit; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--bg-tint);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.prose strong { color: var(--ink); font-weight: 600; }
.prose hr { margin-block: 2rem; }
.prose img { border-radius: var(--r-md); border: 1px solid var(--border); }

/* Article layout ---------------------------------------------------------- */
.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: start;
}

.article__aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: 1.15rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}

.article__meta dt { font-size: var(--xs); color: var(--muted); }
.article__meta dd { margin: 0; font-size: var(--sm); color: var(--ink); }
.article__aside p { font-size: var(--sm); color: var(--muted); }

@media (max-width: 900px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .article__aside { position: static; order: -1; max-width: 22rem; }
}

/* Contact ----------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: start;
}

.contact-aside {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}

.contact-aside dl { display: grid; gap: 0.9rem; }
.contact-aside dt { font-size: var(--xs); color: var(--muted); }
.contact-aside dd { margin: 0; font-size: var(--sm); color: var(--ink); }
.contact-aside a { color: var(--accent); }
.contact-aside p { font-size: var(--sm); color: var(--muted); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Error page -------------------------------------------------------------- */
.error-page { padding-block: clamp(4rem, 3rem + 5vw, 7rem); text-align: center; }
.error-page__code { font-size: var(--sm); font-weight: 600; color: var(--accent); }
.error-page h1 { margin-top: 0.5rem; }
.error-page .lede { margin: 0.875rem auto 0; }
.error-page__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* Definition rows (about / company facts) --------------------------------- */
.facts { display: grid; gap: 0; max-width: 32rem; }

.facts div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--sm);
}

.facts div:first-child { border-top: 1px solid var(--border); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); }
.facts a { color: var(--accent); }

@media (max-width: 520px) {
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}