/* ===========================================================================
   russellbarkley.org v4 — shared stylesheet for every page.

   The first half is the home page mockup Dr. Barkley approved on 8 Nov 2026,
   unchanged apart from asset paths. The inner pages (books, scales, fact
   sheets, courses, about, contact) are added at the end and reuse the same
   tokens, type and buttons.

   No third-party embeds, so no tracking cookies and no consent banner.
   ======================================================================== */

:root {
  --navy: #11203a;
  --navy-2: #1b3054;
  --navy-soft: #24375c;
  --teal: #2e7d7b;
  --teal-dark: #215c5a;
  --paper: #fbfaf8;
  --card: #ffffff;
  --ink: #1b2430;
  --ink-soft: #53606f;
  --ink-faint: #646d79;
  --line: #e5e2da;
  --line-soft: #efece6;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-dark); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On the navy sections the teal ring measured 2.7:1 on the follow bar, under
   the 3:1 a focus indicator needs. A light teal ring is 7:1 or better there. */
.top :is(a, button):focus-visible,
.hero a:focus-visible,
.followband a:focus-visible,
.strip a:focus-visible,
footer.site a:focus-visible { outline-color: #8fd5cf; }

h1, h2, h3 { font-family: var(--serif); margin: 0; line-height: 1.18; }

.wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 20px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 10px 16px; z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }

/* Screen-reader-only text. One shared node announces the new-tab behaviour
   for every outbound link, via aria-describedby. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 10px;
}

/* ---------- preview notice (removed at launch) ------------------------- */

.notice {
  background: #060f1c;
  color: #7d8ca4;
  margin: 0;
  border-top: 1px solid #1b2b42;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 16px;
}

/* ---------- masthead ----------------------------------------------------- */

.top { background: var(--navy); color: #fff; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 18px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark i { font-style: italic; font-weight: 400; color: #9fb4d4; }

.burger {
  display: none;
  background: none;
  border: 1px solid #3c547c;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px;
}
.burger span + span { margin-top: 4px; }

.mainnav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.mainnav a {
  color: #dbe4f1;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: #fff; border-bottom-color: var(--teal); }
/* Every item is a destination, so they all look alike. The teal underline is
   reserved for the page you are actually on, which the server marks up with
   aria-current - otherwise a highlighted item reads as "you are here". */
.mainnav a[aria-current="page"] { color: #fff; border-bottom-color: var(--teal); }

/* ---------- hero --------------------------------------------------------- */

.hero { background: var(--navy); color: #eef2f8; padding-bottom: 44px; }

.herogrid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 44px;
  align-items: center;
}

.portrait img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #2c4166;
}

.hero .eyebrow { color: #8fd5cf; }

.hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero .lede {
  font-size: 1.03rem;
  color: #c2cee0;
  margin: 16px 0 0;
  max-width: 54ch;
}

/* Someone arriving from Facebook should not have to scroll to find something
   to do: books for the sale, lectures for the reason most of them came. */
.herocta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .btn { background: var(--teal); }
.hero .btn:hover { background: #fff; color: var(--navy); }
.hero .btn.ghost {
  background: transparent; color: #fff;
  border: 1px solid #5d7aa6; padding: 9px 19px;
}
.hero .btn.ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- follow bar --------------------------------------------------- */

.followband { background: var(--navy-2); border-top: 1px solid #27385b; }

.follow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 15px;
}

.follow .flabel {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8fa4c4;
  margin-right: 6px;
}

.follow a, .follow .soon {
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid #38507a;
  color: #e2e9f4;
  background: #1f3357;
  white-space: nowrap;
}
.follow a:hover { background: var(--teal-dark); border-color: var(--teal); color: #fff; }
.follow a b { font-weight: 700; color: #8fd5cf; margin-left: 5px; }
.follow .soon { color: #a3b0c5; background: transparent; border-style: dashed; }

/* ---------- main two-column row ------------------------------------------ */

.maingrid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  padding-block: 54px;
  align-items: start;
}

/* Grid items default to min-width:auto, which lets the swipeable cover rail
   below widen its column and push the whole page sideways on a phone. */
.maingrid > * { min-width: 0; }

.sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.sechead h2 { font-size: 1.5rem; font-weight: 600; }
.sechead .more {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* featured video ----------------------------------------------------------*/

.feature { display: block; text-decoration: none; color: inherit; }

.thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 16 / 9;
}
.thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 1;
}
.thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,32,58,0) 55%, rgba(17,32,58,0.5) 100%);
}
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,0.93);
  display: grid; place-items: center;
  z-index: 2;
}
.play::before {
  content: "";
  border-left: 17px solid var(--navy);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}
.dur {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(10,18,32,0.85); color: #fff;
  font-size: 0.75rem; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.feature h3 {
  font-size: 1.22rem;
  font-weight: 600;
  margin-top: 16px;
  text-wrap: balance;
}
.feature:hover h3 { color: var(--teal-dark); }

.meta {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 7px 0 0;
}

.vidlist { list-style: none; margin: 26px 0 0; padding: 0; }
.vidlist li { border-top: 1px solid var(--line); }
.vidlist a {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 15px;
  align-items: center;
  padding: 15px 0;
  text-decoration: none;
  color: inherit;
}
.vidlist a:hover h4 { color: var(--teal-dark); }
.vidlist .mini {
  position: relative; border-radius: 6px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--navy);
}
.vidlist .mini img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.92;
}
.vidlist .mini .dur { right: 5px; bottom: 5px; font-size: 0.75rem; padding: 2px 5px; }

/* Lecture title cards. On the live site PHP builds these from each Substack
   post's title, series part and duration instead of using a frame from the
   video, so every lecture matches the site - including the 500+ already
   recorded - and nothing changes in how Dr. Barkley uploads. Type is sized in
   container units so the card reads the same at any width. */
.tcard {
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 7% 7%;
  color: #fff;
  background:
    radial-gradient(110% 85% at 100% 0%, rgba(46,125,123,0.42) 0%, rgba(46,125,123,0) 58%),
    linear-gradient(160deg, #1d3358 0%, #11203a 62%);
}
.tcard::after { display: none; }
.tc-eyebrow {
  align-self: flex-start;
  font-size: 0.75rem; font-size: max(0.75rem, 2.5cqi); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8fd5cf;
  padding-top: 2.2cqi; border-top: 3px solid var(--teal);
  margin-bottom: 2.2cqi;
}
.tc-title {
  font-family: var(--serif); font-weight: 600; line-height: 1.18;
  font-size: 1.2rem; font-size: max(0.95rem, 5cqi);
  max-width: 80%; text-wrap: balance;
}
.tc-by { font-size: 0.75rem; font-size: max(0.75rem, 2.4cqi); color: #a9b8cc; margin-top: 2.6cqi; }
.tcard .play {
  left: auto; top: 7%; right: 5%; transform: none;
  width: 10cqi; height: 10cqi; min-width: 38px; min-height: 38px;
}

.tmini {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 11px; color: #fff;
  border-left: 3px solid var(--teal);
  background: linear-gradient(160deg, #1d3358 0%, #11203a 70%);
}
.tm-part { font-family: var(--serif); font-weight: 600; font-size: 0.98rem; line-height: 1.1; }
.tm-of { font-size: 0.75rem; color: #a9b8cc; }
/* A lecture with no "Part N of M" in its title gets a play mark instead. */
.tm-play {
  width: 0; height: 0; margin-left: 4px;
  border-left: 13px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.vidlist h4 {
  font-family: var(--serif);
  font-size: 0.97rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.substack-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 26px; padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
}
.substack-cta p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); flex: 1 1 240px; }
.btn {
  display: inline-block;
  background: var(--teal-dark); color: #fff;
  font-size: 0.83rem; font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 6px;
  white-space: nowrap;
}
.btn:hover { background: var(--navy); }
.btn.wide { display: block; text-align: center; }

/* books / scales / courses column ---------------------------------------- */

.shelf {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px;
  margin-bottom: 18px;
}
.shelf a { display: block; text-decoration: none; position: relative; }

/* At 71px a cover is recognisable but not readable, so the title appears on
   hover and on keyboard focus. The end covers anchor to their own edge so the
   bubble cannot hang outside the column and widen the page. */
.shelf a::after {
  content: attr(data-title);
  position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%);
  width: max-content; max-width: 158px;
  background: var(--navy); color: #fff;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  line-height: 1.32; text-align: center;
  padding: 7px 10px; border-radius: 6px;
  box-shadow: 0 6px 16px rgba(17,32,58,0.26);
  opacity: 0; visibility: hidden;
  transition: opacity 0.14s ease;
  pointer-events: none; z-index: 5;
}
.shelf a:first-child::after { left: 0; transform: none; }
.shelf a:last-child::after { left: auto; right: 0; transform: none; }
.shelf a:hover::after, .shelf a:focus-visible::after { opacity: 1; visibility: visible; }
.shelf img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 2px 7px rgba(27,36,48,0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.shelf a:hover img {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(27,36,48,0.22);
}

.sidecard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 18px;
  margin-top: 20px;
}
.sidecard h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 7px; }
.sidecard p { margin: 0 0 14px; font-size: 0.89rem; color: var(--ink-soft); }
/* Each side card is a single link: the button's ::after is stretched over the
   whole card, so the picture and the text are clickable too. One link per card
   means nothing is announced twice and the drawn figure is pure decoration. */
.sidecard { position: relative; }
.sidecard .btn::after { content: ""; position: absolute; inset: 0; border-radius: 9px; }
.sidecard .cardimg { float: right; width: 74px; margin: 0 0 10px 14px; display: block; }
.sidecard .cardimg > * {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 3px;
}
.sidecard .cardfig { background: #fff; }
.sidecard:hover .cardimg > * { border-color: var(--teal); }

/* ---------- fact sheets strip -------------------------------------------- */

.strip { background: var(--navy); color: #dbe4f1; }
.stripgrid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 38px;
  align-items: center;
  padding-block: 34px;
}
.strip h2 { color: #fff; font-size: 1.4rem; font-weight: 600; }
.strip p { margin: 9px 0 0; font-size: 0.94rem; color: #b4c2d8; max-width: 62ch; }
.strip .btn { background: var(--teal); }
.strip .btn:hover { background: #fff; color: var(--navy); }
.stripbtns { display: flex; flex-wrap: wrap; gap: 12px; }
.strip .btn.ghost { background: transparent; color: #fff; border: 1px solid #5d7aa6; padding: 9px 19px; }
.strip .btn.ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- footer ------------------------------------------------------- */

footer.site { background: #0c1829; color: #93a2b8; padding-block: 38px; }
.footgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px;
}
footer.site h2 {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #8494ad; margin: 0 0 11px;
}
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 7px; }
footer.site a { color: #c3cedf; text-decoration: none; font-size: 0.89rem; }
footer.site a:hover { color: #fff; text-decoration: underline; }
.colophon {
  border-top: 1px solid #1b2b42;
  margin-top: 30px; padding-top: 18px;
  font-size: 0.8rem; color: #8494ad;
  max-width: 76ch;
}
.credit { font-size: 0.8rem; color: #8494ad; margin: 9px 0 0; }
.credit a { color: #9fb0c6; text-decoration: none; border-bottom: 1px solid #2c4162; }
.credit a:hover { color: #fff; border-bottom-color: var(--teal); }

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1000px) {
  .maingrid { grid-template-columns: 1fr; gap: 42px; }
  .herogrid { grid-template-columns: 230px 1fr; gap: 30px; }
  .shelf { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 760px) {
  .burger { display: block; }
  .mainnav {
    display: none;
    flex-basis: 100%;
    order: 3;
    border-top: 1px solid #2b3f63;
    margin-top: 14px;
    padding-top: 12px;
  }
  .mainnav.open { display: block; }
  .mainnav ul { flex-direction: column; gap: 0; }
  .mainnav li { border-bottom: 1px solid #1d2d49; }
  .mainnav a { display: block; padding: 12px 0; border-bottom: none; }
  .topbar { flex-wrap: wrap; }

  .herogrid { grid-template-columns: 1fr; gap: 22px; }
  .portrait { max-width: 230px; }
  .hero { padding-bottom: 32px; }

  .stripgrid { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 22px; }
  .strip p { margin-inline: auto; }
  .stripbtns { justify-content: center; }

  /* A row of five covers at phone width leaves each one too small to read,
     so the shelf becomes a swipeable rail instead. */
  .shelf {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .shelf a { flex: 0 0 104px; scroll-snap-align: start; }
  .shelf a::after { display: none; }

  .vidlist a { grid-template-columns: 96px 1fr; gap: 12px; }
}

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

/* ===========================================================================
   Inner pages
   ======================================================================== */

/* ---------- page heading band -------------------------------------------- */

.pagehead { background: var(--navy); color: #eef2f8; padding-block: 34px 40px; }
.pagehead .eyebrow { color: #8fd5cf; }
.pagehead h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pagehead .lede { font-size: 1.02rem; color: #c2cee0; margin: 14px 0 0; max-width: 64ch; }
.pagehead .lede a { color: #8fd5cf; }
.pagehead a:focus-visible { outline-color: #8fd5cf; }

.page { padding-block: 46px 64px; }
.page > section + section { margin-top: 54px; }

.groupnote { margin: -10px 0 24px; color: var(--ink-soft); font-size: 0.94rem; max-width: 70ch; }

.btn.small { font-size: 0.78rem; padding: 8px 15px; }
.btn.outline {
  background: transparent; color: var(--teal-dark);
  border: 1px solid #9fc5c3; padding: 7px 14px;
}
.btn.outline:hover { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }

/* ---------- catalogue cards (books and scales) ---------------------------- */

.catalog {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}
.item {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 18px;
}
.item .cover img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 2px 7px rgba(27,36,48,0.14);
}
.item h3 { font-size: 1.06rem; font-weight: 600; line-height: 1.25; }
.item .sub { font-family: var(--serif); font-size: 0.92rem; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.35; }
.item .by { font-size: 0.86rem; color: var(--ink-soft); margin: 10px 0 0; }
.item .ed { font-size: 0.8rem; color: var(--ink-faint); margin: 3px 0 0; }
.item .note { font-size: 0.8rem; color: var(--ink-faint); margin: 10px 0 0; font-style: italic; }
.item .btn { margin-top: 14px; }
/* One link per card, stretched over the whole card (same pattern as the home
   page side cards), so the cover is clickable without a redundant link. */
.item.linked { position: relative; }
.item.linked .btn::after { content: ""; position: absolute; inset: 0; border-radius: 9px; }
.item.linked:hover { border-color: #b9d6d4; }
.item.linked:hover h3 { color: var(--teal-dark); }
.item .note a { position: relative; z-index: 1; }

/* Fact sheet titles are the link; it is stretched over the row the same way. */
.fs { position: relative; }
.fs h3 a { color: inherit; text-decoration: none; }
.fs h3 a::after { content: ""; position: absolute; inset: 0; }
.fs:hover h3 a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.fs .altlink { position: relative; z-index: 1; font-weight: 600; margin-right: 6px; }

/* ---------- fact sheets --------------------------------------------------- */

.fslist { list-style: none; margin: 0; padding: 0; }
.fs {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.fslist > .fs:first-child { border-top: 0; padding-top: 4px; }
.fs .thumb-pdf {
  display: block;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 2px 7px rgba(27,36,48,0.12);
  background: #fff;
}
/* Entries that link to another site have no first page to show, so they get
   a drawn tile in the same style as the home page's card figures. */
.fs .thumb-ext {
  display: grid; place-items: center;
  aspect-ratio: 240 / 310;
  border: 1px solid var(--line); border-radius: 3px;
  background: linear-gradient(160deg, #1d3358 0%, #11203a 70%);
  color: #8fd5cf;
}
.fs .thumb-ext svg { width: 36%; height: auto; }
.fs h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.28; text-wrap: balance; }
.fs .src { font-size: 0.88rem; color: var(--ink-soft); margin: 6px 0 0; }
.fs .src cite { font-style: italic; }
.fs .meta { margin-top: 4px; }
.fs .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tag {
  display: inline-block; vertical-align: 0.15em;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-dark); background: #e3f1f0;
  padding: 2px 7px; border-radius: 4px; margin-left: 8px;
}

/* ---------- courses -------------------------------------------------------- */

.provider {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 9px;
  padding: 24px 26px;
}
.provider + .provider { margin-top: 24px; }
.provider h2 { font-size: 1.35rem; font-weight: 600; }
.provider > p { margin: 10px 0 0; color: var(--ink-soft); max-width: 72ch; }
.courselist { list-style: none; margin: 18px 0 0; padding: 0; }
.courselist li { border-top: 1px solid var(--line-soft); }
.courselist a {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.courselist a::after { content: "\2192"; color: var(--teal-dark); font-family: var(--sans); }
.courselist a:hover { color: var(--teal-dark); }
.provider .btn { margin-top: 18px; }

.alertbox {
  margin-top: 30px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px;
  background: #eef4f8;
  border-radius: 9px;
}
.alertbox p { margin: 0; flex: 1 1 300px; color: var(--ink-soft); font-size: 0.94rem; }
.prose .alertbox { margin-top: 8px; }
.prose .alertbox p { margin: 0; font-size: 0.94rem; }

/* ---------- about ---------------------------------------------------------- */

.aboutgrid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}
.aboutgrid > * { min-width: 0; }
.aboutside img { width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.aboutside .sidelink { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-soft); text-align: center; text-wrap: balance; }
.aboutside .sidelink b { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

.prose { max-width: 70ch; }
.prose p { margin: 0 0 1.1em; font-size: 1.02rem; }

.recognition {
  margin: 0 0 44px;
  text-align: center;
  padding: 26px 26px 22px;
  background: var(--navy);
  color: #dbe4f1;
  border-radius: 10px;
}
.recognition h2 { color: #fff; font-size: 1.3rem; font-weight: 600; margin: 0 0 18px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 20px; }
.recognition .stats { margin-inline: auto; }
.stat { border-top: 3px solid var(--teal); padding-top: 10px; margin: 0; }
.stat b { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 600; color: #fff; line-height: 1.1; }
.stat span { display: block; font-size: 0.82rem; color: #b4c2d8; margin-top: 4px; }
/* The paragraph is the source for the three figures above it, so it is set
   smaller and softer, below a thin rule (7.5:1 on the navy). */
.recognition > p {
  margin: 0 auto; max-width: 70ch;
  font-size: 0.85rem; line-height: 1.6; color: #a3b2c8;
  border-top: 1px solid #2a3d61; padding-top: 14px;
}
.recognition .stats { max-width: 760px; }

/* ---------- contact -------------------------------------------------------- */

.contactcard {
  max-width: 680px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 30px;
}
.contactcard .email {
  display: inline-block;
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}
.contactcard p { margin: 0 0 1em; }
.contactcard .caution {
  margin: 22px 0 0; padding: 14px 16px;
  background: #fbf3e4; border-left: 4px solid #b7791f; border-radius: 6px;
  font-size: 0.94rem;
}

/* ---------- 404 ------------------------------------------------------------ */

.notfound { max-width: 60ch; }
.notfound p { font-size: 1.05rem; }

/* ---------- inner pages: responsive --------------------------------------- */

@media (max-width: 760px) {
  .page { padding-block: 34px 48px; }
  .catalog { grid-template-columns: 1fr; }
  .item { grid-template-columns: 92px 1fr; gap: 14px; padding: 15px; }
  .fs { grid-template-columns: 72px 1fr; gap: 14px; }
  .aboutgrid { grid-template-columns: 1fr; gap: 28px; }
  .aboutside { max-width: 240px; margin-inline: auto; }
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .provider { padding: 20px; }
  .contactcard { padding: 22px 20px; }
}