/* ═══════════════════════════════════════════════════════════════════════════
   CAP10K — SUB PAGE TEMPLATE   (owner: W5)
   Loaded only on documents rendered by page.php (inc/page.php::cap10k_page_enqueue).

   COLOUR RULE (same as W3a): no hex literals — every value comes from the
   --c10k-* tokens in style.css, mixed toward #fff / #000 where a tint is needed.

   SPECIFICITY NOTE: the Tailwind Play CDN injects its utilities AFTER this file,
   so anything that must beat a utility is written as a double class.
   ═══════════════════════════════════════════════════════════════════════════ */

.c10k-page {
  --c10k-page-gutter: 1.25rem;
  --c10k-page-max: 80rem;
  --c10k-page-prose: 46rem;
  --c10k-rail-top: calc(var(--c10k-anchor-offset, 5.25rem) + 1.5rem);
}
@media (min-width: 768px) {
  .c10k-page { --c10k-page-gutter: 2rem; }
}

/* Anchor offset is canonical in style.css — `html { scroll-padding-top: var(--c10k-anchor-offset) }`.
   Nothing is redeclared here. */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.c10k-phero {
  position: relative;
  isolation: isolate;
}

.c10k-phero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--c10k-page-max);
  margin-inline: auto;
  padding-inline: var(--c10k-page-gutter);
  padding-block: 1.75rem 2.25rem;
}
@media (min-width: 1024px) {
  .c10k-phero__inner { padding-block: 2.25rem 3.5rem; }
}

/* ── band / image: the dark ink→lime gradient ───────────────────────────── */
.c10k-phero--band,
.c10k-phero--image {
  color: #fff;
  border-bottom: 4px solid var(--c10k-lime-500);
}
.c10k-phero--band {
  background:
    radial-gradient(120% 150% at 100% 100%, color-mix(in srgb, var(--c10k-lime-900) 78%, transparent) 0%, transparent 62%),
    linear-gradient(112deg, var(--c10k-ink-900) 0%, color-mix(in srgb, var(--c10k-ink-900) 88%, #fff) 100%);
}

.c10k-phero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--c10k-ink-900);
}
.c10k-phero__bg .c10k-phero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c10k-phero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--c10k-ink-900) 94%, transparent) 0%,
      color-mix(in srgb, var(--c10k-ink-900) 86%, transparent) 48%,
      color-mix(in srgb, var(--c10k-ink-900) 60%, transparent) 100%);
}
@media (min-width: 1024px) {
  .c10k-phero--image .c10k-phero__inner { min-height: 20rem; display: flex; flex-direction: column; justify-content: center; }
}

/* ── compact / none: light title rows ──────────────────────────────────── */
.c10k-phero--compact {
  background: var(--c10k-sand-100);
  border-bottom: 1px solid var(--c10k-sand-200);
}
.c10k-phero--compact .c10k-phero__inner,
.c10k-phero--none .c10k-phero__inner { padding-block: 1.25rem 1.5rem; }
@media (min-width: 1024px) {
  .c10k-phero--compact .c10k-phero__inner,
  .c10k-phero--none .c10k-phero__inner { padding-block: 1.5rem 2rem; }
}
.c10k-phero--none { border-bottom: 1px solid var(--c10k-line); }

/* ── type ──────────────────────────────────────────────────────────────── */
.c10k-phero__eyebrow { margin: 0 0 0.5rem; }
.c10k-phero--band .c10k-phero__eyebrow,
.c10k-phero--image .c10k-phero__eyebrow { color: var(--c10k-lime-500); }
.c10k-phero--compact .c10k-phero__eyebrow { color: var(--c10k-muted); }

.c10k-phero__title {
  margin: 0;
  max-width: 22ch;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: inherit;
}
.c10k-phero--compact .c10k-phero__title,
.c10k-phero--none .c10k-phero__title {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  color: var(--c10k-ink-900);
  max-width: 30ch;
}

.c10k-phero__intro {
  margin: 1rem 0 0;
  max-width: 52ch;
  font-size: 1.125rem;
  line-height: 1.6;
}
.c10k-phero--band .c10k-phero__intro,
.c10k-phero--image .c10k-phero__intro { color: color-mix(in srgb, #fff 88%, transparent); }
.c10k-phero--compact .c10k-phero__intro,
.c10k-phero--none .c10k-phero__intro { color: var(--c10k-body); }

.c10k-phero__cta { margin-top: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. BREADCRUMBS
   ═══════════════════════════════════════════════════════════════════════════ */

.c10k-crumbs { margin: 0 0 0.35rem; }

.c10k-crumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.3;
}
/* Only the Home crumb is ever a link (the menu's top-level and group items are `#`
   placeholders), so the 44px tap row lives on the <a> and the plain-text crumbs stay
   compact — that keeps a wrapped mobile trail to ~64px instead of ~88px. */
.c10k-crumbs-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--c10k-muted);
}
.c10k-crumbs-list li + li::before {
  content: "\203A";                          /* › */
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.55;
}
.c10k-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--c10k-blue-600);
  text-decoration: none;
}
.c10k-crumbs a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.c10k-crumbs .breadcrumb_last { color: var(--c10k-muted); font-weight: 500; }

.c10k-crumbs--on-dark .c10k-crumbs-list li,
.c10k-crumbs--on-dark .breadcrumb_last { color: color-mix(in srgb, #fff 74%, transparent); }
.c10k-crumbs--on-dark a { color: #fff; }
.c10k-crumbs--on-dark a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. BODY GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.c10k-page__body {
  width: 100%;
  max-width: var(--c10k-page-max);
  margin-inline: auto;
  padding-inline: var(--c10k-page-gutter);
  padding-block: 2rem 3rem;
}
@media (min-width: 1024px) {
  .c10k-page__body { padding-block: 3rem 4.5rem; }
}

.c10k-page__body--full {
  max-width: none;
  padding-inline: 0;
  padding-block: 0 0;
}

@media (min-width: 1024px) {
  .c10k-page__body--rail {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 3rem;
    /* NB: no `align-items: start` — a grid item that shrink-wraps gives
       position:sticky nothing to travel inside, and the rail stops sticking. */
  }
  .c10k-page__body--rail > .c10k-page-rail { grid-column: span 3 / span 3; }
  .c10k-page__body--rail > .c10k-page__main { grid-column: span 9 / span 9; }
}

.c10k-page__main { min-width: 0; }

/* ── section rhythm inside a column ─────────────────────────────────────── */
.c10k-page__main:not(.c10k-page__main--full) > .section { padding-block: 1.75rem; }
.c10k-page__main:not(.c10k-page__main--full) > .section:first-child { padding-top: 0; }
.c10k-page__main:not(.c10k-page__main--full) > .section > .section__inner {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* A toned band inside a column reads as a panel, not as a full-bleed stripe.
   Two class vocabularies exist: `.section--{tone}` (canonical, cap10k_section_wrapper_open)
   and `.section-band*` / `.c10k-sec--*` (added on top by W3a's cap10k_w3a_open). Both listed. */
.c10k-page__main:not(.c10k-page__main--full) > .section.section-band,
.c10k-page__main:not(.c10k-page__main--full) > .section.c10k-sec--muted,
.c10k-page__main:not(.c10k-page__main--full) > .section.c10k-sec--image,
.c10k-page__main:not(.c10k-page__main--full) > .section.section--muted,
.c10k-page__main:not(.c10k-page__main--full) > .section.section--lime,
.c10k-page__main:not(.c10k-page__main--full) > .section.section--ink,
.c10k-page__main:not(.c10k-page__main--full) > .section.section--blue,
.c10k-page__main:not(.c10k-page__main--full) > .section.section--red,
.c10k-page__main:not(.c10k-page__main--full) > .section.section--image {
  border-radius: var(--c10k-radius-card);
  padding: 2rem 1.5rem;
  overflow: hidden;
}
@media (min-width: 768px) {
  .c10k-page__main:not(.c10k-page__main--full) > .section.section-band,
  .c10k-page__main:not(.c10k-page__main--full) > .section.c10k-sec--muted,
  .c10k-page__main:not(.c10k-page__main--full) > .section.c10k-sec--image,
  .c10k-page__main:not(.c10k-page__main--full) > .section.section--muted,
  .c10k-page__main:not(.c10k-page__main--full) > .section.section--lime,
  .c10k-page__main:not(.c10k-page__main--full) > .section.section--ink,
  .c10k-page__main:not(.c10k-page__main--full) > .section.section--blue,
  .c10k-page__main:not(.c10k-page__main--full) > .section.section--red,
  .c10k-page__main:not(.c10k-page__main--full) > .section.section--image { padding: 2.5rem 2rem; }
}

/* ── prose measure ─────────────────────────────────────────────────────── */
.c10k-page__main--prose > .section,
.c10k-page__main--prose > .c10k-page__content { max-width: var(--c10k-page-prose); }

.c10k-page__main--prose > .section--layout-table,
.c10k-page__main--prose > .section--layout-table-inline,
.c10k-page__main--prose > .section--layout-card-grid,
.c10k-page__main--prose > .section--layout-logo-grid,
.c10k-page__main--prose > .section--layout-icon-triads,
.c10k-page__main--prose > .section--layout-image-carousel,
.c10k-page__main--prose > .section--layout-image,
.c10k-page__main--prose > .section--layout-image-text,
.c10k-page__main--prose > .section--layout-stats,
.c10k-page__main--prose > .section--layout-directory,
.c10k-page__main--prose > .section--layout-post-feed,
.c10k-page__main--prose > .section--layout-columns,
.c10k-page__main--prose > .section--layout-map,
.c10k-page__main--prose > .section--layout-embed,
.c10k-page__main--prose > .section--layout-video,
.c10k-page__main--prose > .section--layout-gallery,
.c10k-page__main--prose > .section.section-band,
.c10k-page__main--prose > .section.c10k-sec--muted,
.c10k-page__main--prose > .section.c10k-sec--image,
.c10k-page__main--prose > .section.section--muted,
.c10k-page__main--prose > .section.section--lime,
.c10k-page__main--prose > .section.section--ink,
.c10k-page__main--prose > .section.section--blue,
.c10k-page__main--prose > .section.section--red,
.c10k-page__main--prose > .section.section--image { max-width: none; }

/* ── raw post_content fallback (pages not converted yet) ────────────────── */
.c10k-page__content { padding-block: 0.5rem 1rem; }
.c10k-page__content img { height: auto; border-radius: 0.5rem; }

.c10k-page-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.9rem;
}
.c10k-page-pages a { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: 0.6rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. RAIL — sub-nav + contents + countdown
   ═══════════════════════════════════════════════════════════════════════════ */

.c10k-page-rail {
  min-width: 0;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .c10k-page-rail { margin-bottom: 0; }
  .c10k-page-rail__sticky {
    position: sticky;
    top: var(--c10k-rail-top);
    max-height: calc(100vh - var(--c10k-rail-top) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.25rem;
  }
}

/* ── the mobile "In this section" fold ─────────────────────────────────── */
.c10k-page-rail__fold {
  border: 1px solid var(--c10k-line);
  border-radius: 0.75rem;
  background: var(--c10k-surface);
}
.c10k-page-rail__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--c10k-ink-900);
}
.c10k-page-rail__summary::-webkit-details-marker { display: none; }
.c10k-page-rail__summary::marker { content: ""; }
.c10k-page-rail__summary svg { transition: transform 0.2s ease; }
.c10k-page-rail__fold[open] > .c10k-page-rail__summary svg { transform: rotate(180deg); }
.c10k-page-rail__fold[open] > .c10k-page-rail__summary { border-bottom: 1px solid var(--c10k-line); }

@media (min-width: 1024px) {
  .c10k-page-rail__fold { border: 0; border-radius: 0; background: none; }
  .c10k-page-rail__summary { display: none; }
  .c10k-page-rail__fold[open] > .c10k-page-rail__summary { border-bottom: 0; }
}

/* ── sub-nav ───────────────────────────────────────────────────────────── */
.c10k-subnav { padding: 0.35rem 0.4rem 0.5rem; }
@media (min-width: 1024px) { .c10k-subnav { padding: 0; } }

.c10k-subnav__title {
  display: none;
  margin: 0 0 0.6rem;
  padding-left: 0.85rem;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c10k-muted);
}
@media (min-width: 1024px) { .c10k-subnav__title { display: block; } }

.c10k-subnav .c10k-subnav__list > li > a,
.c10k-subnav .c10k-subnav__groups > li > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border-radius: 0 0.35rem 0.35rem 0;
}
.c10k-subnav__badge {
  margin-left: auto;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--c10k-lime-500);
  color: var(--c10k-ink-900);
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.c10k-subnav__more {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--c10k-line);
}
.c10k-subnav__more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--c10k-muted);
}
.c10k-subnav__more > summary::-webkit-details-marker { display: none; }
.c10k-subnav__more > summary::marker { content: ""; }
.c10k-subnav__more[open] > summary svg { transform: rotate(180deg); }
.c10k-subnav__more > summary svg { transition: transform 0.2s ease; }
.c10k-subnav__more > summary:hover { color: var(--c10k-blue-600); }

.c10k-subnav .c10k-subnav__groups > li > a { flex-direction: column; align-items: flex-start; gap: 0.05rem; padding-block: 0.5rem; }
.c10k-subnav__group {
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c10k-ink-900);
}
.c10k-subnav__first { font-size: 0.82rem; color: var(--c10k-muted); }

/* ── contents ──────────────────────────────────────────────────────────── */
.c10k-page-toc.c10k-toc { margin: 1.5rem 0 0; }
.c10k-page-rail__fold + .c10k-page-toc.c10k-toc {
  padding-top: 1.5rem;
  border-top: 1px solid var(--c10k-line);
}

@media (min-width: 1024px) {
  .c10k-page-toc.c10k-toc--list .c10k-toc-items > li > a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Below lg the contents become the horizontal pill strip. */
@media (max-width: 1023.98px) {
  .c10k-page-toc.c10k-toc--list .c10k-toc-items {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.4rem;
    -webkit-overflow-scrolling: touch;
  }
  .c10k-page-toc.c10k-toc--list .c10k-toc-item { flex: 0 0 auto; scroll-snap-align: start; }
  .c10k-page-toc.c10k-toc--list .c10k-toc-items > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--c10k-line);
    border-radius: 999px;
    background: var(--c10k-surface);
    white-space: nowrap;
    font-size: 0.9rem;
  }
  .c10k-page-toc.c10k-toc--list .c10k-toc-items > li > a.is-active,
  .c10k-page-toc.c10k-toc--list .c10k-toc-items > li > a[aria-current="location"] {
    background: var(--c10k-ink-900);
    border-color: var(--c10k-ink-900);
    color: #fff;
  }
  .c10k-page-toc.c10k-toc--list .c10k-toc-item--sub > a { padding-left: 1rem; font-size: 0.85rem; }
}

/* ── mini countdown ────────────────────────────────────────────────────── */
.c10k-page-rail__countdown {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--c10k-line);
  border-radius: 0.75rem;
  background: var(--c10k-sand-100);
}
.c10k-page-rail__countdown-title {
  margin: 0 0 0.6rem;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c10k-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. EXPANDED RESOURCES
   ═══════════════════════════════════════════════════════════════════════════ */

.c10k-resources {
  background: var(--c10k-sand-100);
  border-top: 1px solid var(--c10k-sand-200);
  padding-block: 3rem;
}
@media (min-width: 1024px) { .c10k-resources { padding-block: 4.5rem; } }

.c10k-resources__inner,
.c10k-related__inner,
.c10k-pagecta__inner {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .c10k-resources__inner,
  .c10k-related__inner,
  .c10k-pagecta__inner { padding-inline: 2rem; }
}

.c10k-res-grid { margin: 0; padding: 0; list-style: none; }
.c10k-res-grid > li { min-width: 0; display: flex; }

.c10k-res {
  /* Stacked, like the page it replaces: five cards across an 80rem grid leave the body about
     100px wide in a row layout, which broke "REGISTRATION" and "neighborhood" mid-word. Icon
     on its own line gives the copy the full card width. (W13) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  padding: 1.25rem;
  border: 1px solid var(--c10k-line);
  border-radius: var(--c10k-radius-card);
  background: var(--c10k-surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s var(--c10k-ease), box-shadow 0.2s ease, border-color 0.15s ease;
}
a.c10k-res:hover,
a.c10k-res:focus-visible {
  transform: translateY(-2px);
  border-color: var(--c10k-ink-900);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--c10k-ink-900) 14%, transparent);
}

.c10k-res__icon {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0.7rem;
  /* The customer's own icon art is a PALE line drawing on transparent — on a lime fill it
     all but vanished (the whole point of the tile is that you can see the icon). White tile
     with a lime ring keeps the brand accent and the artwork readable, which is also how the
     old page showed these. An inline SVG we colour ourselves still gets ink on lime. (W13) */
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--c10k-lime-500);
  color: var(--c10k-ink-900);
}
.c10k-res__icon:not(:has(.c10k-res__img)) {
  background: var(--c10k-lime-500);
  box-shadow: none;
}
.c10k-res__icon .c10k-res__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3rem;
  /* The source PNGs are very pale grey line art on transparent — legible on the old white page
     only just, and the first thing the customer flagged. `brightness(0)` paints every opaque
     pixel black while leaving the alpha channel alone, so the line work reads as ink without
     touching the file. (W13) */
  filter: brightness(0) opacity(0.8);
}

.c10k-res__body { flex: 1 1 auto; min-width: 0; }
.c10k-res__title {
  display: block;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c10k-ink-900);
}
a.c10k-res:hover .c10k-res__title { color: var(--c10k-blue-600); }
.c10k-res__text {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c10k-body);
}
.c10k-res__more {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--c10k-blue-600);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. RELATED NEWS
   ═══════════════════════════════════════════════════════════════════════════ */

.c10k-related { padding-block: 3rem; border-top: 1px solid var(--c10k-line); }
@media (min-width: 1024px) { .c10k-related { padding-block: 4rem; } }

.c10k-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.c10k-related__title-wrap { min-width: 0; }
.c10k-related__eyebrow { margin: 0 0 0.35rem; color: var(--c10k-muted); }
/* With a category eyebrow above it the heading drops W3a's lime rule — the eyebrow is
   already doing that job, and two stacked markers read as clutter. */
.c10k-related__head .section__title { margin-bottom: 1.25rem; }
.c10k-related__eyebrow + .section__title { padding-top: 0; }
.c10k-related__eyebrow + .section__title::before { display: none; }
.c10k-related__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--c10k-blue-600);
  text-decoration: none;
}
.c10k-related__all:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* A one-line news headline leaves W3c's card title link ~23px tall. Inside this band the
   heading link gets the 44px row; two-line titles already clear it. Scoped on purpose —
   the same shortfall in W3c's own `post_feed` section is theirs to fix (plans/build-log.md). */
.c10k-related .c10k-pcard-title a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

.c10k-related__grid { margin: 0; padding: 0; list-style: none; }
.c10k-related__grid > li { min-width: 0; display: flex; }
.c10k-related__grid > li > * { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. BOTTOM CTA BAND
   ═══════════════════════════════════════════════════════════════════════════ */

.c10k-pagecta { padding-block: 2.75rem; }
@media (min-width: 1024px) { .c10k-pagecta { padding-block: 4rem; } }

.c10k-pagecta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .c10k-pagecta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
}
.c10k-pagecta__copy { min-width: 0; }
.c10k-pagecta__title {
  margin: 0;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}
.c10k-pagecta__text { margin: 0.5rem 0 0; font-size: 1.05rem; line-height: 1.55; }
.c10k-pagecta.section-band .c10k-pagecta__text { color: color-mix(in srgb, #fff 86%, transparent); }
.c10k-pagecta.section-band--lime .c10k-pagecta__text { color: var(--c10k-lime-900); }
.c10k-pagecta__action { flex: 0 0 auto; }
.c10k-pagecta__closed {
  margin: 0;
  padding: 0.75rem 1.25rem;
  border: 2px dashed color-mix(in srgb, #fff 45%, transparent);
  border-radius: 999px;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. PAGE GALLERY
   ═══════════════════════════════════════════════════════════════════════════ */

.c10k-page-gallery { margin-top: 2.5rem; }
.c10k-page-gallery--hero {
  width: 100%;
  max-width: 80rem;
  margin: 2.5rem auto 0;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .c10k-page-gallery--hero { padding-inline: 2rem; } }
.c10k-page__main > .c10k-page-gallery:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. PAGE-LEVEL SWITCHES
   ═══════════════════════════════════════════════════════════════════════════ */

/* TablePress ships its DataTables length <select> and search <input> at 40px.
   Scoped to the sub-page body so the whole site's tables clear the 44px target.
   (Candidate to move into W3c's sections-data.css — see plans/build-log.md.) */
.c10k-page .dt-container .dt-input,
.c10k-page .dt-container .dt-length select,
.c10k-page .dt-container .dt-search input {
  min-height: 2.75rem;
  padding-block: 0.35rem;
}

/* `show_sponsor_strip = false` — the footer strip is W1's, so it is switched off here. */
body.hide-sponsor-strip .c10k-sponsors { display: none; }

@media (prefers-reduced-motion: reduce) {
  .c10k-res,
  .c10k-page-rail__summary svg,
  .c10k-subnav__more > summary svg { transition: none !important; }
  a.c10k-res:hover, a.c10k-res:focus-visible { transform: none; }
}

@media print {
  .c10k-page-rail,
  .c10k-pagecta,
  .c10k-related { display: none !important; }
  .c10k-phero { color: inherit; background: none; border-bottom: 1px solid #000; }
  .c10k-phero--image::after, .c10k-phero__bg { display: none; }
  .c10k-phero__title, .c10k-phero__intro, .c10k-crumbs-list li { color: #000 !important; }
}