@import url("/fonts.css");
/* Automated Empire visual layer over the pinned live publisher source. */
:root {
  --ae-ink: #1e293b;
  --ae-muted: #475569;
  --ae-paper: #f7f9fc;
  --ae-surface: #ffffff;
  --ae-line: #d8e1ec;
  --ae-tint: #fff2e6;
  --ae-shadow: 0 18px 44px -30px #24344b70;
}

body {
  --brand: #c2410c !important;
  background: var(--ae-paper);
  color: var(--ae-ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

h1, h2, h3 { font-family: "IBM Plex Sans", system-ui, sans-serif; letter-spacing: -0.025em; }
h1 { line-height: 1.12; }
h2 { line-height: 1.2; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #c2410c;
  outline-offset: 4px;
}
header { border-bottom-color: var(--ae-line); padding-block: 22px; }
header .brand { color: var(--ae-ink); font-weight: 700; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); }
header nav a, footer nav a { font-weight: 650; }

.hero {
  border: 1px solid #f2c7ae;
  border-radius: 24px;
  background: radial-gradient(circle at 90% 5%, #ffe1c7, transparent 45%), linear-gradient(130deg, #fff9f4, #fff0e4);
  box-shadow: var(--ae-shadow);
}
.hero h1 { max-width: 13ch; }
.hero .lead { max-width: 53ch; }
.eyebrow { color: #9a3412; }
.lead { color: var(--ae-muted); }
.button, button:not(.secondary) { border-radius: 999px; box-shadow: 0 8px 18px -14px #351f16; }
.button:hover, button:not(.secondary):hover { background: #9a3412; }
.facts { border-color: var(--ae-line); gap: 12px; margin-block: 22px 50px; }
.facts span { border: 1px solid var(--ae-line); border-radius: 999px; background: var(--ae-surface); padding: 7px 13px; }
.cards { gap: 24px; }
.card {
  border-color: var(--ae-line);
  border-radius: 18px;
  background: var(--ae-surface);
  box-shadow: var(--ae-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.card:hover, .card:focus-visible { transform: translateY(-3px); box-shadow: 0 24px 50px -28px #24344b85; }
.card h2 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.prose { max-width: 760px; }
.prose h2 { margin-top: 44px; }
.breadcrumbs { color: var(--ae-muted); }
.tool, output { border-color: var(--ae-line); border-radius: 18px; background: var(--ae-surface); box-shadow: var(--ae-shadow); }
input, textarea { border-color: #9aacc1; background: white; }
output { background: var(--ae-tint); }
.check-item, details, .sources, footer { border-color: var(--ae-line); }
footer { color: var(--ae-muted); }
footer strong { color: var(--ae-ink); }

@media (max-width: 650px) {
  header, footer, main { padding-inline: 18px; }
  header nav { gap: 12px 16px; }
  .hero { padding: 36px 24px; border-radius: 18px; }
  .hero h1 { max-width: none; }
  .card, .tool { padding: 22px; }
  .facts { margin-bottom: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
}

/* Design review 2026-10-21: keep anchored sections clear of the sticky header (S5.4). */
section[id], h2[id] { scroll-margin-top: 96px; }