/* =========================================================================
   Editorial
   Article rendering, post cards, category chips, the author box, the share
   bar and the ad slots. Everything here is driven by the tokens in
   tokens.css - there are no literal colours or sizes below.

   Layout rule for this file: one column on phones, and a content + rail
   split only once there is genuinely room for a rail (1040px). Between those
   the rail moves below the article rather than squeezing the measure, because
   a cramped measure costs more reading comfort than a sidebar buys.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Article shell
   ------------------------------------------------------------------------- */
.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  padding-block: var(--space-8) var(--space-16);
}

@media (min-width: 1040px) {
  .article-shell.has-rail {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-12);
    align-items: start;
  }
}

.article-rail {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

@media (min-width: 1040px) {
  .article-rail { position: sticky; top: calc(var(--header-height) + var(--space-6)); }
}

/* -------------------------------------------------------------------------
   Article header
   ------------------------------------------------------------------------- */
.article-head { max-width: var(--measure-wide); margin-bottom: var(--space-6); }

.article-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.article-title {
  /* Never larger than the homepage hero - 2px below it, at any width. */
  font-size: var(--page-title);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
  margin-bottom: var(--space-4);
}

.article-standfirst {
  font-size: var(--article-lead);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.article-meta-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.article-meta-item a { color: var(--text); font-weight: var(--weight-medium); }
.article-meta-item a:hover { color: var(--text-brand); }

.article-byline-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--bg-sunken);
}

/* Featured image. Eager-loaded and aspect-locked: it is the LCP element on an
   article page, so it must neither lazy-load nor shift when it arrives. */
.article-hero {
  margin-bottom: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-sunken);
  aspect-ratio: 16 / 9;
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-hero-caption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--figure-caption);
}

/* -------------------------------------------------------------------------
   Article body
   The locked article format renders into this: h2 sections, one figure, one
   takeaway, one table, one inline CTA. Each has a rule here so an editor
   cannot produce an unstyled element by hand-writing the markup.
   ------------------------------------------------------------------------- */
.article-body {
  max-width: var(--measure);
  font-size: var(--article-body);
  line-height: var(--article-leading);
  color: var(--text);
}

.article-body > * + * { margin-top: var(--article-gap); }

.article-body p { color: var(--text-muted); }
.article-body > p:first-of-type { color: var(--text); }

.article-body h2 {
  margin-top: calc(var(--article-gap) * 1.9);
  font-size: var(--article-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
  text-wrap: balance;
}

.article-body h3 {
  margin-top: calc(var(--article-gap) * 1.4);
  font-size: var(--article-h3);
  font-weight: var(--weight-semibold);
  color: var(--text);
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.article-body a {
  color: var(--text-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--text-brand) 40%, transparent);
}
.article-body a:hover { text-decoration-color: currentColor; }

.article-body ul,
.article-body ol { padding-left: var(--space-6); color: var(--text-muted); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: var(--space-2); }
.article-body li::marker { color: var(--brand-400); }

.article-body strong { color: var(--text); font-weight: var(--weight-semibold); }

.article-body blockquote {
  padding-left: var(--space-5);
  border-left: 3px solid var(--quote-bar);
  font-size: var(--article-lead);
  line-height: var(--leading-snug);
  color: var(--text);
  font-style: italic;
}

.article-body figure { margin-inline: 0; }
.article-body figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}
.article-body figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--figure-caption);
  text-align: center;
}

.article-body hr { border: 0; border-top: 1px solid var(--border); }

/* Tables scroll inside their own container. A wide table must never make the
   page itself scroll sideways on a phone. */
.article-body .table-scroll,
.article-body figure.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.article-body table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.article-body th,
.article-body td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.article-body th {
  font-weight: var(--weight-semibold);
  color: var(--text);
  background: var(--bg-sunken);
  white-space: nowrap;
}
.article-body td { color: var(--text-muted); }
.article-body tbody tr:last-child td { border-bottom: 0; }

/* Key-takeaway box */
.takeaway {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--takeaway-border);
  border-radius: var(--radius-md);
  background: var(--takeaway-bg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
}
.takeaway-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-brand);
}
.takeaway p { color: var(--text) !important; margin: 0; }

/* Inline related-post CTA */
.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-size: var(--text-base);
}
.inline-cta-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.inline-cta a { font-weight: var(--weight-semibold); }

/* -------------------------------------------------------------------------
   Category chip
   Colour comes from a data attribute so a new category is a token pair, not a
   new rule. Unknown categories fall through to the brand default.
   ------------------------------------------------------------------------- */
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--brand-600);
  background: var(--brand-50);
  white-space: nowrap;
}
.cat-chip[data-cat="education"]    { color: var(--cat-education-fg);    background: var(--cat-education-bg); }
.cat-chip[data-cat="scholarships"] { color: var(--cat-scholarships-fg); background: var(--cat-scholarships-bg); }
.cat-chip[data-cat="exams"]        { color: var(--cat-exams-fg);        background: var(--cat-exams-bg); }
.cat-chip[data-cat="tech"]         { color: var(--cat-tech-fg);         background: var(--cat-tech-bg); }
.cat-chip[data-cat="careers"]      { color: var(--cat-careers-fg);      background: var(--cat-careers-bg); }
.cat-chip[data-cat="global"]       { color: var(--cat-global-fg);       background: var(--cat-global-bg); }

/* -------------------------------------------------------------------------
   Post cards
   ------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card:hover { transition: none; transform: none; }
}

.post-card-media {
  aspect-ratio: 16 / 9;
  background: var(--bg-sunken);
  overflow: hidden;
}
.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}
.post-card:hover .post-card-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .post-card:hover .post-card-media img { transform: none; }
}

.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-5);
}

.post-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
  text-wrap: pretty;
}
.post-card:hover .post-card-title { color: var(--text-brand); }

.post-card-excerpt {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.post-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

/* Lead card - the first item in a section, given more room on wide screens. */
@media (min-width: 860px) {
  .post-grid.has-lead > .post-card:first-child {
    grid-column: span 2;
    flex-direction: row;
  }
  .post-grid.has-lead > .post-card:first-child .post-card-media {
    flex: 0 0 45%;
    aspect-ratio: auto;
  }
  .post-grid.has-lead > .post-card:first-child .post-card-title { font-size: var(--text-2xl); }
}

/* Compact list row - used in rails and "latest news" strips. */
.post-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.post-row:last-child { border-bottom: 0; }
.post-row-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--bg-sunken);
}
.post-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-row-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}
.post-row:hover .post-row-title { color: var(--text-brand); }
.post-row-meta { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-subtle); }

/* -------------------------------------------------------------------------
   Author box - the E-E-A-T signal at the foot of every article
   ------------------------------------------------------------------------- */
.author-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-10);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}
.author-box-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--bg-sunken);
}
.author-box-name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text);
}
.author-box-role {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: var(--space-2);
}
.author-box-bio {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.author-box-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}
@media (max-width: 520px) {
  .author-box { grid-template-columns: 1fr; }
  .author-box-avatar { width: 52px; height: 52px; }
}

/* -------------------------------------------------------------------------
   Share bar and table of contents
   ------------------------------------------------------------------------- */
.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-4);
  margin-top: var(--space-8);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.share-label {
  margin-right: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-out);
}
.share-btn:hover {
  color: var(--text-inverse);
  background: var(--brand-600);
  border-color: var(--brand-600);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .share-btn:hover { transform: none; } }

.toc {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.toc-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.toc ol { list-style: none; display: grid; gap: var(--space-2); }
.toc a {
  display: block;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.toc a:hover,
.toc a.is-active { color: var(--text-brand); border-left-color: var(--brand-500); }

/* Reading progress - fixed hairline under the header. */
.read-progress {
  position: fixed;
  inset-inline: 0;
  top: var(--header-height);
  height: 3px;
  z-index: var(--z-sticky);
  background: var(--gradient-brand);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Advertising slots
   Height is reserved up front so a filling ad cannot shift the article. The
   label is required by policy and is deliberately plain, so an ad can never
   be mistaken for editorial content.
   ------------------------------------------------------------------------- */
.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-block: var(--space-8);
  padding: var(--space-3);
  border: 1px dashed var(--ad-border);
  border-radius: var(--radius-sm);
  background: var(--ad-bg);
  overflow: hidden;
  contain: layout;
}
.ad-slot > ins { display: block; width: 100%; }
.ad-label {
  font-size: var(--ad-label-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.ad-slot--leaderboard { min-height: calc(var(--ad-slot-leaderboard) + var(--space-8)); }
.ad-slot--inarticle   { min-height: calc(var(--ad-slot-inarticle)   + var(--space-8)); }
.ad-slot--rectangle   { min-height: calc(var(--ad-slot-rectangle)   + var(--space-8)); }
.ad-slot--sidebar     { min-height: calc(var(--ad-slot-sidebar)     + var(--space-8)); }

/* The sidebar unit is the only desktop-only placement, and it is hidden by
   not being rendered at all on small screens - never by display:none, which
   makes AdSense request a slot it can never fill. */
.ad-slot--sidebar { display: none; }
@media (min-width: 1040px) { .ad-slot--sidebar { display: flex; } }

/* -------------------------------------------------------------------------
   Section headers used across news, blog and category hubs
   ------------------------------------------------------------------------- */
.strip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--text);
}
.strip-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.strip-link { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-brand); }

/* Dateline used on news items. */
.dateline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.dateline-live {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--danger-500);
  animation: dateline-pulse 2s var(--ease-in-out) infinite;
}
@keyframes dateline-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) { .dateline-live { animation: none; } }

/* -------------------------------------------------------------------------
   Listing hubs (/news, /blog, /category/*)
   ------------------------------------------------------------------------- */
.hub-head { margin-bottom: var(--space-8); }
.hub-title {
  /* Same rule as .article-title: hero size minus 2px. Used by the scholarship
     pages, the news and blog hubs, the service and tool pages and the policy
     pages, so one value keeps every page headline consistent. */
  font-size: var(--page-title);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}
.hub-lead {
  margin-top: var(--space-3);
  font-size: var(--article-lead);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}
.hub-intro { margin-bottom: var(--space-10); }
.hub-result-note {
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
  color: var(--text-muted);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-subtle);
}
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--text-brand); }
.breadcrumbs [aria-current="page"] {
  color: var(--text);
  font-weight: var(--weight-medium);
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The article page drops the site rail, so its own breadcrumb and shell need
   the top spacing the content-area padding would otherwise have given them. */
body.is-article .content-area { padding-top: var(--space-6); }

/* Cards carry a soft resting shadow rather than only a border, matching the
   agreed News & Blog design. The border is kept but lightened, so the card
   still has a defined edge in dark mode where a shadow alone reads as nothing. */
.post-card {
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--border) 65%, transparent);
}
.post-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border); }


/* -------------------------------------------------------------------------
   Card density
   Headlines are clamped to two lines and the meta row is tightened, so a card
   is a predictable height whatever the length of the headline. A grid of
   cards that each size themselves to their title reads as ragged.
   ------------------------------------------------------------------------- */
.post-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-md);
}

.post-card-excerpt { -webkit-line-clamp: 2; line-clamp: 2; }

.post-card-body { gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-3); }

.post-card-foot {
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}
.post-card-foot svg { width: 13px; height: 13px; }

/* The deadline pill keeps its colour coding inside a card footer but loses the
   extra padding, so a scholarship card and an article card are the same height
   to the pixel when they sit in the same row. */
/* One fixed line box for every child of the footer, pill or plain text, so a
   scholarship card and an article card resolve to the same height rather than
   differing by a rounding of two line-heights. */
.post-card-foot { line-height: 20px; }
.post-card-foot > * { line-height: inherit; }

.post-card-foot .deadline-pill {
  padding: 0 var(--space-2);
  font-weight: var(--weight-semibold);
}
.post-card-foot .deadline-pill svg { width: 12px; height: 12px; }


/* -------------------------------------------------------------------------
   Lead image
   The featured image is now the first element on an article or scholarship
   page: no breadcrumb bar, nothing above it. The negative top margin pulls it
   sit directly under the masthead with a single, even gap above it.
   ------------------------------------------------------------------------- */
.article-hero.is-lead {
  margin-top: 0;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
}
@media (max-width: 768px) {
  /* Full-bleed to the rail edges on a phone, where a rounded inset image
     wastes width the picture actually needs. */
  .article-hero.is-lead {
    margin-inline: calc(var(--space-3) * -1);
    margin-top: 0;
    border-radius: 0;
  }
}

/* The article shell opened with breadcrumbs before; now it opens with the
   image, so the top padding goes. */
.article-shell { padding-block: 0 var(--space-16); }
body.is-article .content-area { padding-top: var(--space-5); }

/* -------------------------------------------------------------------------
   Contents list, inline
   Moved out of the sidebar and into the main column. In a rail it was useless
   on mobile - the sidebar drops BELOW the article there, so the list arrived
   after the content it exists to help you skip.
   ------------------------------------------------------------------------- */
.toc-inline {
  margin: 0 0 var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-md);
}
.toc-inline .toc-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
/* The element is BOTH .toc and .toc-inline, so the rail styling above still
   applies and has to be undone explicitly: the base rule strips the list
   markers and gives every link a left border and indent, which reads as a
   vertical rule running through the middle of a two-column list. */
.toc-inline ol {
  margin: 0;
  padding-left: 1.15em;
  display: grid;
  gap: 6px;
  list-style: decimal;
}
.toc-inline li {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.toc-inline a {
  display: inline;
  padding-left: 0;
  border-left: 0;
  font-size: var(--text-sm);
  color: var(--text);
  text-decoration: none;
}
.toc-inline a:hover { color: var(--text-brand); text-decoration: underline; }

/* Two columns once there is room, so a nine-section piece does not push the
   article body a screen and a half down the page. */
@media (min-width: 640px) {
  .toc-inline ol { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}

/* -------------------------------------------------------------------------
   Two cards per row on a phone
   The grids use `minmax(min(100%, 17rem), 1fr)`, which at 375px resolves to a
   272px track and therefore a single column. Below 640px the minimum is
   dropped so two genuine columns fit, with a tighter gutter to buy the cards
   back some width.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .post-grid,
  .scholarship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
  }

  /* The lead card on the first page of a hub keeps the full width - it is the
     one card that is meant to be larger than its neighbours. */
  .post-grid.has-lead > .post-card:first-child { grid-column: 1 / -1; }
}