/* The Lagging Team — the shell.

   Every page loads this: the palette, the type base, the nav band, the footer,
   the card surface and the button hierarchy. It is the ONE definition of those
   things. Before this file there were four — podcast.css, styles.css, and
   inline blocks in start.html and privacy.html — which is how a header ends up
   looking different on three pages.

   Page-specific styling stays in that page's own stylesheet.

   Two rules this file encodes rather than leaves to memory:
   - ONE filled Flame element per view. `.cta-link` is it. The standing nav
     button is outlined so it never competes.
   - No gradients, no shadows. Depth is borders and flat fills. There are no
     tokens here for either, on purpose. */

:root {
  --midnight: #272757;
  --flame: #E25822;
  --slate: #6D8196;
  --muted: #555a77;
  --ground: #f4f5f9;
  --hairline: rgba(109, 129, 150, 0.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  color: var(--midnight);
  background: var(--ground);
  line-height: 1.6;
}

/* Shell — the nav band and footer are wider than the reading column. */

.shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--flame);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 10;
}
.skip-link:focus { left: 16px; top: 16px; }

.site-header { background: var(--midnight); }

.shell-header {
  min-height: 70px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.site-mark-glyph { width: 36px; height: auto; display: block; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
}

.site-nav a {
  color: #c9cee0;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0;
}

.site-nav a:hover { color: #ffffff; }

.site-nav a[aria-current="page"] {
  color: #ffffff;
  border-bottom: 2px solid var(--flame);
  padding-bottom: 3px;
}

/* Solid Flame on every page. Ruled 2026-09-15: the standing CTA reads as a
   button rather than a bordered link, and it is the same button everywhere.

   Where a page also carries a filled `.cta-link`, that page CTA is the one to
   outline if the two ever start competing — not this one.

   These must carry `.site-nav a.site-nav-cta`, not `.site-nav-cta`. The rule
   above is `.site-nav a` — class plus element — which outranks a bare class and
   was resetting border-bottom and padding-bottom to nothing, leaving the button
   drawn on three sides. */
.site-nav a.site-nav-cta,
.site-nav a.site-nav-cta[aria-current="page"] {
  background: var(--flame);
  color: #ffffff;
  border: 1.5px solid var(--flame);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
}

.site-nav a.site-nav-cta:hover {
  background: #c94c1b;
  border-color: #c94c1b;
  color: #ffffff;
}

.card {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 32px 28px;
}

a { color: var(--flame); }

.site-footer {
  border-top: 4px solid var(--flame);
  background: var(--midnight);
  margin-top: 72px;
  padding: 44px 0 36px;
  color: #8f9dbb;
  font-size: 14px;
}

.site-footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.site-footer-brand .site-mark-glyph { width: 40px; margin-bottom: 16px; }

.site-footer-brand p {
  margin: 0;
  max-width: 300px;
  line-height: 1.7;
}

.site-footer-brand a { color: #c2c8dd; }

.site-footer-col { display: flex; flex-direction: column; gap: 10px; }

.site-footer-heading {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.site-footer-col a,
.site-footer-social a {
  color: #c9cee0;
  text-decoration: none;
}

.site-footer-col a:hover,
.site-footer-social a:hover { color: #ffffff; }

.site-footer-social { display: flex; flex-wrap: wrap; gap: 14px; }

.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--slate);
  font-size: 13px;
}

.site-footer-legal a { color: #c9cee0; text-decoration: none; }
.site-footer-legal a:hover { color: #ffffff; }

/* Shared CTA card */

.cta-card { margin-top: 20px; }
.cta-card p { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.cta-card p:last-child { margin-bottom: 0; }

.cta-link {
  display: inline-block;
  background: var(--flame);
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 9px;
  text-decoration: none;
}

.cta-link:hover { background: #c94c1b; color: #ffffff; }

/* Focus + motion */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--flame);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 980px) {
  .site-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 760px) {
  .site-footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .site-nav { gap: 18px; }
}