/* ARC Structure (Darren, 4 Oct 2026): the map page and its 12 explainer pages.
   The approved component images are 403x299 and are shown whole, never cropped, and never scaled above their own size. */
.as { --ink: #1a2340; color: var(--ink); }

/* the map's page banner (4 Oct 2026): the supplied image, whole — fills the content column, never scaled above its own width */
.as-banner { background: #0b1730; line-height: 0; }
.as-banner img { display: block; width: 100%; max-width: 2171px; height: auto; margin: 0 auto; }
.as-intro-band .arcx-lede { margin-bottom: 8px; }
.as-intro-band .as-grid { margin-top: clamp(18px, 2.6vw, 28px); }
.as-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the map */
.as-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.as-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--navy, #1a2744);
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px; transition: transform .14s, box-shadow .14s, border-color .14s; }
.as-card img { display: block; width: 100%; max-width: 403px; height: auto; margin: 0 auto; border-radius: 10px; background: #0b0b0b; }
.as-card__t { font-weight: 600; font-size: .95rem; padding: 0 4px 2px; }
.as-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10, 20, 40, .10); border-color: var(--teal, #00b5a5); }
.as-card:focus-visible { outline: 3px solid var(--teal, #00b5a5); outline-offset: 3px; }

/* an explainer page */
.as-top { padding-top: calc(var(--arcs-dock-h) + 24px); }
.as-doc { max-width: 860px; }
.as-back { margin: 0 0 14px; font-size: .9rem; }
.as-back a, .as-pager a { color: var(--navy, #1a2744); font-weight: 600; text-decoration: none; }
.as-back a:hover, .as-pager a:hover { text-decoration: underline; }
.as-hero { display: grid; grid-template-columns: minmax(0, 403px) 1fr; gap: clamp(16px, 3vw, 32px); align-items: center; margin-bottom: 10px; }
.as-hero__img { display: block; width: 100%; max-width: 403px; height: auto; border-radius: 14px; background: #0b0b0b; }
.as-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; margin: 4px 0 10px; color: var(--navy, #1a2744); }
.as-intro { font-size: 1.02rem; line-height: 1.65; margin: 0; }
.as-lead { font-size: 1.12rem; font-weight: 600; color: var(--navy, #1a2744); margin: 0 0 8px; }
.as-doc h2 { font-size: 1.15rem; color: var(--navy, #1a2744); margin: 26px 0 8px; }
.as-doc p { line-height: 1.65; margin: 0 0 10px; }
.as-doc ul { margin: 0 0 10px 1.2em; padding: 0; line-height: 1.7; list-style: disc; }
.as-doc li { display: list-item; padding-left: 2px; }
/* 4 Oct 2026: an explainer's clickable action image (supplied artwork, whole) */
.as-cta-img { display: block; max-width: 560px; margin: 26px 0 0; border-radius: 14px; transition: transform .14s; }
.as-cta-img img { display: block; width: 100%; height: auto; border-radius: 14px; }
.as-cta-img:hover { transform: translateY(-2px); }
.as-cta-img:focus-visible { outline: 3px solid var(--teal, #00b5a5); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .as-cta-img { transition: none; } .as-cta-img:hover { transform: none; } }
.as-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 8px; }
.as-btn { display: inline-block; background: var(--teal, #00b5a5); color: #fff; border: 1px solid transparent; border-radius: 9px;
  padding: 11px 18px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.as-btn--out { background: #fff; color: var(--navy, #1a2744); border-color: var(--border); }
.as-btn:focus-visible { outline: 3px solid var(--navy, #1a2744); outline-offset: 2px; }
.as-pager { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border);
  margin-top: 26px; padding-top: 16px; font-size: .9rem; }
@media (max-width: 680px) {
  .as-hero { grid-template-columns: 1fr; }
  .as-hero__img { margin: 0 auto; }
  .as-btn { flex: 1 1 100%; text-align: center; }
  .as-pager { justify-content: center; text-align: center; }
  .as-pager__map { order: -1; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .as-card { transition: none; } .as-card:hover { transform: none; } }