/* Fours-specific overrides, layered on the shared design system.
   Load order: twos.css (the system) then this file.
   Keep this minimal — only genuine Fours deltas live here so that fixes to
   twos.css propagate to Fours automatically (no more hand-duplicated CSS). */

/* Italic Commissioner cut used by Fours; not shipped in twos.css. */
@font-face {
  font-family: "Commissioner";
  src: url("/static/courses/fours/fonts/CommissionerItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Extra brand token Fours uses. */
:root {
  --blue: #315c86;
}

/* Fours-only component tweaks (twos.css has no equivalent or differs). */
.nav a:hover { color: var(--ink); }

.course-hero__subtitle { font-style: italic; }

.section__button { margin-top: 30px; }

.rich-text p:last-child { margin-bottom: 0; }

.section h2 + .rich-text { margin-top: var(--heading-copy-gap); }

.program__item ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--fs-m);
  list-style: none;
}

/* Fours author block (twos uses .author-block__* instead). */
.author {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--grid-gap);
  align-items: center;
}

.author__image {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
  background: #eef2f0;
}

.author__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
}

.footer a { color: #ffffff; text-underline-offset: 4px; }