/* Shared components used across several pages (owner: lead designer).
   Page agents: use these, don't edit — put page-specific CSS in pages/<page>.css. */

/* ---------------------------------------------------------------- Pathways
   Partial: \3c !-- @pathways --> — the brief's "not a generic contact us" CTA. */

.pathways {
  position: relative;
  overflow: hidden;
  padding-block: var(--section);
  border-bottom: 1px solid var(--ink-line);
}

.pathways__bg {
  position: absolute;
  inset: 0;
  opacity: 0.55;
}

.pathways__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.pathways__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink) 20%, rgb(10 37 48 / 40%) 70%, rgb(10 37 48 / 70%));
}

.pathways__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3.5rem var(--gutter);
}

.pathways__head {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

.pathways__list {
  grid-column: 7 / -1;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--ink-line);
}

.pathways__list li {
  border-bottom: 1px solid var(--ink-line);
}

.pathway {
  --frame-color: var(--signal);
  --frame-size: 10px;

  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 1rem 1.6rem 0.25rem;
  transition:
    background-color 0.5s var(--ease-out),
    padding 0.5s var(--ease-out);
}

.pathway:hover,
.pathway:focus-visible {
  background: rgb(245 242 234 / 4%);
  padding-left: 1rem;
}

.pathway__index {
  color: var(--signal);
}

.pathway__q {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.pathway__go {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ink-line-strong);
  border-radius: 50%;
  transition:
    background-color 0.4s var(--ease-out),
    border-color 0.4s,
    transform 0.5s var(--ease-out);
}

.pathway__go svg {
  width: 1rem;
  height: 1rem;
}

.pathway:hover .pathway__go {
  background: var(--signal);
  border-color: var(--signal);
  transform: rotate(-45deg);
}

@media (width <= 900px) {
  .pathways__head,
  .pathways__list {
    grid-column: 1 / -1;
  }

  .pathways__head {
    position: static;
  }

  .pathway {
    grid-template-columns: 2.25rem 1fr auto;
  }
}

/* ------------------------------------------------------------ Evidence plate
   main.js adds .plate-overlay to every .media holding a generated image:
   measured edge rulers, registration crosshairs and a plate index set in real
   type — so each illustration reads as a numbered plate in one series.       */

.plate-overlay {
  --plate-ink: rgb(245 242 234 / 55%);

  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.plate-overlay__ruler {
  position: absolute;
  transition: transform 1.4s var(--ease-out) 0.2s;
}

.plate-overlay__ruler--x {
  top: 0;
  left: 12%;
  right: 12%;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, var(--plate-ink) 0 1px, transparent 1px 10%) top / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--plate-ink) 0 1px, transparent 1px 2.5%) top / 100% 5px no-repeat;
  transform-origin: left;
}

.plate-overlay__ruler--y {
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 9px;
  background:
    repeating-linear-gradient(180deg, var(--plate-ink) 0 1px, transparent 1px 10%) left / 9px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--plate-ink) 0 1px, transparent 1px 2.5%) left / 5px 100% no-repeat;
  transform-origin: top;
}

.plate-overlay__cross {
  position: absolute;
  width: 15px;
  height: 15px;
  color: var(--plate-ink);
  transition:
    transform 1s var(--ease-out) 0.35s,
    opacity 0.6s 0.35s;
}

.plate-overlay__cross svg {
  width: 100%;
  height: 100%;
}

.plate-overlay__cross--tr {
  top: 16px;
  right: 16px;
}

.plate-overlay__cross--bl {
  bottom: 16px;
  left: 16px;
}

.plate-overlay__label {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plate-ink);
  transition: opacity 0.8s 0.6s;
}

.js .plate-overlay:not(.is-in) .plate-overlay__ruler--x {
  transform: scaleX(0);
}

.js .plate-overlay:not(.is-in) .plate-overlay__ruler--y {
  transform: scaleY(0);
}

.js .plate-overlay:not(.is-in) .plate-overlay__cross {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

.js .plate-overlay:not(.is-in) .plate-overlay__label {
  opacity: 0;
}

@media (width <= 560px) {
  .plate-overlay__label,
  .plate-overlay__cross--tr {
    display: none;
  }
}

/* ------------------------------------------------------------ Hit areas
   Small text links and chips get a larger invisible tap target (towards
   44×44px) without changing layout: an ::after box that overhangs the
   element. Vertical overhang only where neighbours sit side by side, and
   kept within half the gap where they are stacked. Add .hit to any element,
   or list a selector here. */

.hit,
.link-arrow,
.page-hero__crumbs a,
.site-footer li a,
.site-footer__legal a,
.capture__link,
.mx__chip,
.wmap-chip,
.wmap-chrono__dot,
.wmap-index__reset,
.tier__link,
.brand-index a,
.downloads__table td a {
  position: relative;
}

.hit::after,
.link-arrow::after,
.page-hero__crumbs a::after,
.site-footer li a::after,
.site-footer__legal a::after,
.capture__link::after,
.mx__chip::after,
.wmap-chip::after,
.wmap-chrono__dot::after,
.wmap-index__reset::after,
.tier__link::after,
.brand-index a::after,
.downloads__table td a::after {
  content: "";
  position: absolute;
  inset: -0.6rem -0.25rem;
}

/* Stacked footer links (0.6rem apart): stay inside half the gap. */
.site-footer li a::after {
  inset: -0.3rem -0.25rem;
}

/* Single-row strips: reach the full 44px in height. */
.capture__link::after,
.wmap-chrono__dot::after,
.page-hero__crumbs a::after {
  inset: -0.9rem -0.15rem;
}

.mx__chip::after,
.wmap-chip::after {
  inset: -0.25rem 0;
}