/* Capabilities overview (/capabilities/) — page-local composition.
   The shared vocabulary stays in style.css and the tokens in tokens.css; this file
   holds only what this one page adds: the note a card prints while its evidence
   photograph is still missing, and the card's own "this opens a record" affordance
   (§2 below). The jump rail is gone with the five bands it pointed at: the twelve
   records are one grid now (website owner's instruction), so there is nothing left
   for an anchor to jump to.
   Loaded on this slug only (functions.php). Sources: 网站规划.md §7 (the five
   capability groups) · DESIGN新.md V1.1 (§6 grid, §16 buttons, §20 restrained
   motion). */

/* ---------- 1 · The evidence note on a card that has no photograph yet ------
   The frame above it already prints the photograph the record wants; this line
   says the same thing in words, and disappears with the frame.                 */
.cap-pending{margin:0;font-size:12.5px;color:var(--muted)}

/* ---------- 2 · A card has to look like a way in ----------------------------
   The twelve records are the substance of this page, but the shared .mcard is a
   quiet editorial panel: hairline border, heading in body colour, one small text
   link at the foot. Nothing said "this opens" until the pointer crossed the card
   (style.css .mcard:hover), and on a touch screen nothing said it at all. Three
   hover-independent signals are added here, and the whole card becomes a hit
   area:
     1. border and a soft shadow answer both pointer and keyboard focus;
     2. a filled accent corner mark sits on the media, visible at rest;
     3. the footer link reads as a bordered button, not as small text.
   The title link is stretched over the card by its ::after, so the image, the
   teaser and the padding all open the record; the footer button keeps its own
   layer above that overlay, so it stays clickable and focusable on its own.
   Restraint per DESIGN新.md §20: colour, border and shadow only — a card lift
   would also fight the reveal transform ([data-reveal] in style.css).
   Local to this page: no other listing was reported as unclear.              */

.cap-card{position:relative;
  transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
/* z-index:0 makes the media block its own stacking context. Without it, .mcard__m
   still paints above the stretched link — .ph img and .ph>span carry z-index:2 of
   their own (style.css) — and a click on the photograph would hit the image
   instead of the link that covers the card. */
.cap-card .mcard__m{position:relative;z-index:0}

/* 1 · The whole card is the link area. This same pseudo-element is where style.css
   would otherwise print the "→" marker it gives a capability title; here the card
   already carries two cues of its own (the corner mark and the footer button), so the
   overlay replaces the marker rather than joining it. margin:0 keeps the shared
   marker's margin-left from narrowing the overlay away from the card's left edge. */
.cap-card h3 a::after{content:"";position:absolute;inset:0;z-index:1;margin:0}
/* The title is a card heading, not a capability name inside a sentence: it keeps the
   heading colour every other card in the theme uses (.mcard h3 a in style.css) and takes
   the accent blue on hover and on keyboard focus, the way a linked card heading behaves
   elsewhere (.card h3 a). The warm brick red is not used on this page at all (website
   owner: twelve red headings in one grid read as noise) — style.css no longer lists
   .mcard.cap-card among the warm capability names, and nothing here re-colours the title
   at rest. The underline stays hover-only: at rest the card already says "this opens"
   through the corner mark and the footer button below. */
.cap-card:hover h3 a,.cap-card:focus-within h3 a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* 2 · The entry mark on the media. Decorative and click-through: it sits above
   the card overlay to stay visible, so the pointer has to pass through it to the
   stretched title link underneath. */
.cap-card__go{position:absolute;top:12px;right:12px;z-index:2;pointer-events:none;
  display:grid;place-items:center;
  width:34px;height:34px;border:1px solid var(--accent);border-radius:var(--r-btn);
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;line-height:1}

/* 3 · The footer call to action, before any hover. */
.cap-card .mcard__f{position:relative;z-index:2;padding-top:10px}
.cap-card__cta{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
  border:1px solid var(--accent);border-radius:var(--r-btn);background:var(--white);
  color:var(--accent);font-size:13.5px;font-weight:600;line-height:1;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease}
.cap-card__cta .arw{transition:transform var(--dur-fast) ease}
.cap-card__cta:hover,.cap-card__cta:focus-visible{
  background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none}
.cap-card__cta:hover .arw,.cap-card__cta:focus-visible .arw{transform:translateX(3px)}

/* Pointer and keyboard get the same answer. Both classes are needed: .mcard:hover
   in style.css is otherwise just as specific, and this file is cached on its own. */
.cap-card.mcard:hover,.cap-card.mcard:focus-within{
  border-color:var(--accent);box-shadow:var(--shadow-1)}

@media (prefers-reduced-motion:reduce){
  .cap-card,.cap-card__cta,.cap-card__cta .arw{transition:none}
  .cap-card__cta:hover .arw,.cap-card__cta:focus-visible .arw{transform:none}
}