/* =============================================================================
   Site — global chrome (logo, sticky header, footer) + landing page sections.
   Depends on all files above.
   ========================================================================== */

/* --- Sticky header ------------------------------------------------------- */
.aft-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--c-white) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: var(--bw) solid var(--c-ink);
}
.aft-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 5.75rem;
}
/* Raster logo (the glossy wordmark) — used on light chrome only. */
.aft-logo-link { display: inline-flex; align-items: center; }
.aft-logo-img { height: 4.25rem; width: auto; display: block; }
@media (max-width: 30rem) { .aft-logo-img { height: 3.2rem; } }

.aft-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.aft-nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: calc(var(--fs-xs) * 1.35);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--c-ink);
  padding: 0.6em 1em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Hover/focus: keep the link still and sweep in a lime brush underneath. */
.aft-nav__link::after {
  content: "";
  position: absolute;
  left: 0.7em; right: 0.7em; bottom: 0.3em;
  height: 0.25em;
  background: var(--c-lime);
  mix-blend-mode: multiply;
  opacity: 0.85;
  clip-path: polygon(
    0% 35%, 6% 15%, 18% 25%, 30% 5%, 44% 20%, 58% 0%, 72% 22%,
    86% 8%, 100% 30%, 97% 55%, 100% 78%, 84% 95%, 70% 75%,
    55% 100%, 40% 80%, 24% 100%, 10% 82%, 2% 60%
  );
  transform: scaleX(0) rotate(-1.4deg);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.aft-nav__link:hover { outline: none; }
.aft-nav__link:focus-visible {
  outline: var(--bw-thick) solid var(--focus);
  outline-offset: var(--sp-1);
}
.aft-nav__link:hover::after, .aft-nav__link:focus-visible::after { transform: scaleX(1) rotate(-1.4deg); }
.aft-nav__link[aria-current="page"] { background: var(--c-magenta); color: var(--c-ink); border-color: var(--c-ink); }

.aft-header__actions { display: flex; align-items: center; gap: var(--sp-3); }
.aft-header__actions .aft-text-action { white-space: nowrap; }
.aft-header__profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control);
  height: var(--size-control);
  flex: none;
  color: var(--c-ink);
  border: var(--bw) solid var(--c-ink);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.aft-header__profile svg { width: 1.3rem; height: 1.3rem; }
.aft-header__profile:hover {
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  box-shadow: var(--lift) var(--lift) 0 var(--c-magenta);
}

.aft-mobile-menu { display: none; position: relative; }

@media (max-width: 70rem) {
  .aft-header__nav { display: none; }
  .aft-header__actions { display: none; }
  .aft-mobile-menu { display: block; }
}

.aft-mobile-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control);
  height: var(--size-control);
  list-style: none;
  color: var(--c-ink);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.aft-mobile-menu__toggle::-webkit-details-marker { display: none; }
.aft-mobile-menu__toggle::marker { content: ""; }
.aft-mobile-menu__toggle:hover {
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  box-shadow: var(--lift) var(--lift) 0 var(--c-magenta);
}
.aft-mobile-menu__toggle:focus-visible {
  outline: var(--bw-thick) solid var(--focus);
  outline-offset: var(--sp-1);
}

.aft-mobile-menu__icon { width: 1.4rem; height: 1.4rem; }
.aft-mobile-menu__icon--close { display: none; }
.aft-mobile-menu[open] .aft-mobile-menu__icon--open { display: none; }
.aft-mobile-menu[open] .aft-mobile-menu__icon--close { display: block; }
.aft-mobile-menu[open] .aft-mobile-menu__toggle {
  background: var(--c-ink);
  color: var(--c-white);
}

.aft-mobile-menu__panel {
  position: absolute;
  top: calc(100% + var(--sp-3));
  right: 0;
  z-index: var(--z-header);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: min(20rem, calc(100vw - 2 * var(--sp-5)));
  padding: var(--sp-5);
  background: var(--c-white);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ink);
}

.aft-mobile-menu__nav, .aft-mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.aft-mobile-menu__actions {
  padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--c-line);
}

.aft-mobile-menu__link {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--c-ink);
  padding: 0.75em 1em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.aft-mobile-menu__link:hover, .aft-mobile-menu__link:focus-visible {
  background: var(--c-lime-soft);
  border-color: var(--c-ink);
}
.aft-mobile-menu__link:focus-visible {
  outline: var(--bw-thick) solid var(--focus);
  outline-offset: var(--sp-1);
}
/* The brush-accent link (Sign up) sizes to its text, not the full row —
   .aft-text-action--brush's squiggle spans its own box edge-to-edge, and
   letting it stretch to the panel's width like the other list items would
   drag the accent out under the whole row. */
.aft-mobile-menu__actions .aft-text-action {
  align-self: flex-start;
  padding: var(--sp-1) 0 var(--sp-1) 1em;
}
.aft-mobile-menu__actions .aft-text-action:hover,
.aft-mobile-menu__actions .aft-text-action:focus-visible {
  background: none;
  border-color: transparent;
}

@media (max-width: 26rem) {
  .aft-mobile-menu__panel { width: calc(100vw - 2 * var(--sp-4)); }
}

/* --- Hero: the 50/50 "why" split ----------------------------------------- */
/* No bottom padding: .aft-split bleeds to the section's edge and carries
   its own internal padding already, so trailing section padding would just
   double up the gap before the next section. */
.aft-hero { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.aft-hero__head {
  max-width: 76rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.aft-hero__title {
  font-size: var(--fs-3xl);
  margin-block: var(--sp-4) var(--sp-4);
}
.aft-hero__title .aft-period { color: var(--c-magenta); }
.aft-hero__sub {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 64rem;
  margin-inline: auto;
  line-height: var(--lh-relaxed);
  text-wrap: balance;
}

/* Full-bleed 50/50 split — light half (artists) / dark half (art seekers),
   edge to edge, not a boxed card (that's .aft-panel, used elsewhere). */
.aft-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
@media (max-width: 54rem) {
  .aft-split { grid-template-columns: 1fr; }

  /* Stacked layout loses the two-column split's implicit separation from
     the hero copy above it — both are white, so the head would otherwise
     run straight into the artist half with nothing marking the seam. */
  .aft-hero > .aft-container {
    padding-bottom: clamp(2rem, 6vw, 3rem);
    border-bottom: var(--bw) solid var(--c-line);
  }
}

.aft-split__half {
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
}
.aft-split__half--light { background: var(--c-white); }
.aft-split__half--dark { background: var(--c-ink); color: var(--c-on-ink); }

.aft-why__eyebrow { margin-bottom: var(--sp-3); }
.aft-why__title { margin-bottom: var(--sp-4); }
.aft-split__half--dark .aft-why__title { color: var(--c-white); }
.aft-why__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
  max-width: 30rem;
}
.aft-why__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: center;
}
.aft-why__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: var(--bw) solid currentColor;
  border-radius: 50%;
}
.aft-why__icon svg { width: 1.3rem; height: 1.3rem; }
.aft-split__half--light .aft-why__icon { color: var(--c-magenta-ink); }
.aft-split__half--dark .aft-why__icon { color: var(--c-lime); }
.aft-split__half--light .aft-why__item p { color: var(--text-muted); }
.aft-split__half--dark .aft-why__item p { color: var(--c-on-ink-muted); }
.aft-why__foot { margin-top: auto; }

/* Artist (light) half: right-aligned, per design direction — the dark half
   stays left-aligned/full-width; the asymmetry is intentional. */
.aft-split__half--light { text-align: right; }
.aft-split__half--light .aft-why__list { margin-left: auto; }
.aft-split__half--light .aft-why__item p { text-align: left; }
/* Column, not row: a row lets the button + note happen to fill the width
   edge to edge (no slack left for justify-content to act on), which reads
   as left-aligned even though it's flex-end. Stacking them lets each line
   hug the right edge independently, matching the handoff. */
.aft-split__half--light .aft-why__foot { display: flex; flex-direction: column; align-items: flex-end; }
/* The eyebrow is itself an (inline-)flex box, so it's blockified as a flex
   item of .aft-split__half and doesn't pick up text-align: right from the
   panel — it needs its own justify-content to sit at the right edge. */
.aft-split__half--light .aft-why__eyebrow { justify-content: flex-end; }

/* --- Recently added calls ------------------------------------------------ */
.aft-calls__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.aft-view-all {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-snug);
  word-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-magenta-ink);
}
.aft-view-all:hover { text-decoration: underline; }

.aft-call { gap: var(--sp-3); }
.aft-call__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.aft-call__title { font-size: var(--fs-md); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); }
.aft-call__org { font-size: var(--fs-sm); color: var(--text-muted); }
.aft-call__foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 2px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.aft-call__pay { font-family: var(--font-mono); font-weight: var(--fw-bold); }
.aft-call__closes { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Public directory filter panel (#154) ---------------------------------
   A closed-by-default dropdown bar, not an always-expanded block: the
   panel's job is to stay out of the way of the results below it until
   someone opens one. Each facet/location is a native <details> — no open
   state to manage in JS beyond closing it on an outside click/Escape
   (dropdown_controller.js); the trigger is a compact pill the same height
   as the "Remote only" checkbox and the buttons beside it, so the whole
   bar reads as one row regardless of how many options a facet holds. */
.aft-filter-form {
  margin-top: var(--sp-5);
}
.aft-filter-form__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.aft-filter-form__remote {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.6em 1em;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  border: 2px solid var(--c-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.aft-filter-form__remote:has(input:checked) {
  background: var(--c-ink);
  color: var(--c-white);
  border-color: var(--c-ink);
}
.aft-filter-form__remote:has(input:checked) .aft-filter-dropdown__count { color: var(--c-on-ink-muted); }
.aft-filter-form__remote:has(input:focus-visible) {
  outline: 2px solid var(--c-magenta);
  outline-offset: 2px;
}
.aft-filter-form__clear {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--accent-text);
}
.aft-filter-form__clear:hover { text-decoration: underline; }
.aft-filter-form__submit { margin-left: auto; }

.aft-filter-dropdown { position: relative; }
.aft-filter-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.6em 1em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  background: var(--c-white);
  border: 2px solid var(--c-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.aft-filter-dropdown__trigger::-webkit-details-marker { display: none; }
.aft-filter-dropdown__trigger::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-inline-start: 0.1em;
  border-inline-end: 2px solid currentcolor;
  border-block-end: 2px solid currentcolor;
  transform: rotate(45deg) translateY(-15%);
  transition: transform var(--dur) var(--ease);
}
details[open] > .aft-filter-dropdown__trigger::after { transform: rotate(-135deg) translateY(15%); }
.aft-filter-dropdown:hover > .aft-filter-dropdown__trigger { border-color: var(--c-ink); }
.aft-filter-dropdown__trigger:focus-visible {
  outline: 2px solid var(--c-magenta);
  outline-offset: 2px;
}
.aft-filter-dropdown__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3em;
  padding: 0.1em 0.4em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  background: var(--c-magenta-ink);
  border-radius: var(--radius-pill);
}

.aft-filter-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: max-content;
  max-width: 20rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: var(--sp-2);
  background: var(--c-white);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-ink);
}
.aft-filter-dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45em 0.6em;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.aft-filter-dropdown__option:hover { background: var(--c-paper-2); }
.aft-filter-dropdown__option.is-disabled { color: var(--text-faint); cursor: not-allowed; }
.aft-filter-dropdown__option.is-disabled:hover { background: none; }
.aft-filter-dropdown__option span:first-of-type { flex: 1 1 auto; }
.aft-filter-dropdown__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* --- Filter loading state -------------------------------------------------
   Turbo carries aria-busy on <turbo-frame> for exactly the length of a frame
   navigation, which is exactly the window the filter panel needs to say
   something. Both signals below key off that attribute alone — no Stimulus,
   no request bookkeeping of our own:

   1. An indeterminate magenta bar under the filter bar. It sits on the
      control that was just touched rather than over the results, so it
      reads as "the filter is working" instead of "the page went away".
   2. The results behind it fade back. The fade is delayed and the recovery
      is not: a round trip that lands inside 150ms never flickers, and one
      that doesn't restores its results at full strength immediately.

   Only the results dim. The bar stays lit and clickable, so opening a
   second facet doesn't mean waiting out the first request. */
.aft-filter-form { position: relative; }
.aft-filter-form::before,
.aft-filter-form::after {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--sp-3) * -1);
  height: var(--bw-thick);
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.aft-filter-form::before {
  inset-inline: 0;
  background: var(--c-paper-3);
}
.aft-filter-form::after {
  inset-inline-start: 0;
  width: 22%;
  background: var(--c-magenta);
}
turbo-frame[aria-busy="true"] .aft-filter-form::before,
turbo-frame[aria-busy="true"] .aft-filter-form::after { opacity: 1; }
turbo-frame[aria-busy="true"] .aft-filter-form::after {
  animation: aft-filter-sweep 900ms var(--ease) infinite;
}

/* 355% of the segment's own 22% width carries its trailing edge to the far
   end of the track. Under prefers-reduced-motion base.css collapses the
   animation to a single instant pass, which leaves the segment parked at
   its untransformed origin — still a visible bar, just a still one. */
@keyframes aft-filter-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(355%); }
}

.aft-directory__results { transition: opacity var(--dur) var(--ease); }
turbo-frame[aria-busy="true"] .aft-directory__results {
  opacity: 0.4;
  pointer-events: none;
  transition-delay: 150ms;
}

/* --- Public directory (#152) ---------------------------------------------
   Reuses .aft-card as the base surface; .aft-opp lays it out as a list
   row (title/location/tags on the left, price/deadline right-aligned)
   rather than the grid-cell card the home page carousel uses — a listing
   directory reads faster scanned top-to-bottom than in a multi-column
   grid, and a row has room to show more than a carousel slide would. */
.aft-directory__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.aft-opp {
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.aft-opp__main { flex: 1 1 20rem; display: flex; flex-direction: column; gap: var(--sp-1); }
.aft-opp__top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.aft-opp__title { font-size: var(--fs-md); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); }
.aft-opp__title-link { color: inherit; text-decoration: none; }
.aft-opp__title-link:hover, .aft-opp__title-link:focus-visible { color: var(--accent-text); }
/* `.aft-card--lift`'s cursor and hover lift read as "the whole card is the
   target" — stretch the title link to cover the card (the classic
   "stretched link" pattern) so a click anywhere on it actually goes
   through. `.aft-opp` has no other interactive element to compete with it. */
.aft-opp__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.aft-opp__location { font-size: var(--fs-sm); color: var(--text-muted); }
.aft-opp__main .aft-cluster { margin-top: var(--sp-1); }
.aft-opp__meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2em;
  text-align: right;
}
.aft-opp__pay { font-family: var(--font-mono); font-weight: var(--fw-bold); }
.aft-opp__closes { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
@media (max-width: 36rem) {
  .aft-opp__meta { align-items: flex-start; text-align: left; }
}

/* Mirrors admin-empty-state (admin.css) — same bordered-card vocabulary,
   aft- prefixed since this one is public. */
.aft-empty-state {
  margin-top: var(--sp-6);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--c-white);
  border: var(--bw-thick) solid var(--c-ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lime);
}
.aft-empty-state h2 { font-size: var(--fs-xl); }
.aft-empty-state > p:last-child { color: var(--text-muted); }

/* Mirrors admin-pagination (admin.css) — same Pagy `series_nav` markup,
   aft- prefixed since this one is public. */
.aft-pagination nav.series-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.aft-pagination a { padding: 0.4em 0.7em; color: var(--accent-text); }
.aft-pagination a[aria-current="page"] {
  font-weight: var(--fw-bold);
  color: var(--text);
}
.aft-pagination a[aria-disabled="true"] { color: var(--text-faint); }

/* --- Promotion CTA band -------------------------------------------------- */
/* Full-bleed ink strip, edge to edge — not a boxed/rounded card. */
.aft-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  background: var(--c-ink);
  color: var(--c-on-ink);
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
}
.aft-promo h2 { font-size: var(--fs-xl); color: var(--c-white); }
.aft-promo p { color: var(--c-on-ink-muted); }

/* --- Footer -------------------------------------------------------------- */
.aft-footer {
  background: var(--c-ink);
  color: var(--c-on-ink);
  padding-block: clamp(3rem, 6vw, 5rem) var(--sp-6);
}
/* White backing plate so the logo's dark script stays legible on the ink
   footer, instead of a separate dark-chrome asset. Specificity has to beat
   .aft-footer__col a (a class + tag selector), which otherwise forces this
   link to display: block and stretches the plate across the whole column. */
.aft-footer__col a.aft-footer__logo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: var(--c-white);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  margin-bottom: var(--sp-2);
}
.aft-footer__logo .aft-logo-img { height: 3.25rem; }
.aft-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
  border-bottom: 2px solid var(--c-on-ink-line);
}
@media (max-width: 52rem) { .aft-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 32rem) { .aft-footer__grid { grid-template-columns: 1fr; } }
.aft-footer__col h5 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-on-ink-muted);
  margin-bottom: var(--sp-3);
}
.aft-footer__col a { display: block; color: var(--c-white); padding-block: 0.28em; }
.aft-footer__col a:hover { color: var(--c-lime); }
.aft-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-on-ink-muted);
}

/* Skip link and flash now live in base.css — every layout has a shell, so
   the shell's chrome cannot sit in a stylesheet only one layout loads. */