: the UA sheet's `margin-block-end: 1em`
* would survive and float the link 1em above the card's bottom edge on every
* page without a scoped override (e.g. /press/), while the two pages that DO
* zero their margin sat flush. That is the per-page inconsistency this WP
* exists to remove. The two scoped rules below are written the same way. */
.mw-card__view-link {
margin: auto 0 0;
}
/* -----------------------------------------------------------------------
* Publishing filter pills (Topic 25 KLEI-WP9)
*
* Scoped under .mw-page-publishing so the K-World locked 3x3 grid and
* lore vellum cards CANNOT regress. The pills container is hidden in
* the static HTML ([hidden]) and revealed by publishing-filter.js on init
* so that a JS failure leaves all 6 cards visible with no dead pill row.
* ----------------------------------------------------------------------- */
.mw-page-publishing .mw-publishing-filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-block-end: 1.75rem;
list-style: none;
padding: 0;
}
/* [hidden] attribute added by PHP; JS removes it on init. */
.mw-page-publishing .mw-publishing-filter[hidden] {
display: none;
}
.mw-page-publishing .mw-publishing-filter__pill {
display: inline-flex;
align-items: center;
padding: 0.375rem 1rem;
border: 2px solid currentColor;
border-radius: 2rem;
background: transparent;
color: inherit;
font: inherit;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.mw-page-publishing .mw-publishing-filter__pill[aria-pressed="true"] {
background: var(--mw-color-violet, #6765e8);
border-color: var(--mw-color-violet, #6765e8);
color: #ffffff;
}
.mw-page-publishing .mw-publishing-filter__pill:hover,
.mw-page-publishing .mw-publishing-filter__pill:focus-visible {
background: var(--mw-color-violet, #6765e8);
border-color: var(--mw-color-violet, #6765e8);
color: #ffffff;
outline-offset: 2px;
}
/* aria-live region — visually hidden but read by assistive tech. */
.mw-publishing-filter-live {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* View → link (optional per-card "view_label" arg).
* FIX-WP18: `0.25rem` block-start replaced by `auto` so the CTA pins to the
* card bottom under the site-wide equal-height default. Nothing is lost in
* the tallest-card case where `auto` resolves to 0 — `.mw-page-publishing` is
* not in the `gap: 0` override list below, so the card's own `gap: 0.5rem`
* still clears the body by more than the 0.25rem given up. */
.mw-page-publishing .mw-card__view-link {
margin: auto 0 0;
}
.mw-page-publishing .mw-card__view-link-anchor {
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--mw-color-violet, #6765e8);
text-decoration: none;
}
.mw-page-publishing .mw-card__view-link-anchor:hover,
.mw-page-publishing .mw-card__view-link-anchor:focus-visible {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* -----------------------------------------------------------------------
* K-World brand variant (Topic 17 RENDER-WP7)
*
* Card-grid background painting + card surface treatment for the K-World
* tier. Topic 13 KWORLD-WP4-B dark-glass cascade is preserved: on
* kw-castle-stone surfaces, cards take a white inner panel for legibility.
* Topic 13 KWORLD-WP4 ruling: 9-realms grid stays 3×3 on mobile (Figma wins).
* ----------------------------------------------------------------------- */
.mw-section--card-grid[data-bg-token="kw-sky"] { background-color: var(--kw-sky-surface); color: #040420; }
.mw-section--card-grid[data-bg-token="kw-gold"] { background-color: var(--kw-gold-surface); color: #040420; }
.mw-section--card-grid[data-bg-token="kw-cream"] { background-color: var(--kw-cream); color: #040420; }
.mw-section--card-grid[data-bg-token="kw-sunset"] { background-color: var(--kw-sunset); color: #ffffff; }
.mw-section--card-grid[data-bg-token="kw-castle-stone"] { background-color: var(--kw-castle-stone); color: #ffffff; }
/* Card surface on K-World pages — cream/white inner per Topic 13 Figma 97:6. */
.mw-section--card-grid.mw-section--brand-k-world .mw-card {
background-color: #ffffff;
color: #040420;
padding: clamp(1rem, 2vw, 1.5rem);
border-radius: var(--mw-radius-soft, 8px);
box-shadow: var(--mw-shadow-elevation-1, 0 2px 8px rgba(0, 0, 0, 0.12));
}
.mw-section--card-grid.mw-section--brand-k-world[data-bg-token="kw-cream"] .mw-card {
/* On a cream band, cards stay cream to maintain the warm tone. */
background-color: #fff8e7;
}
.mw-section--card-grid.mw-section--brand-k-world[data-bg-token="kw-gold"] .mw-card,
.mw-section--card-grid.mw-section--brand-k-world[data-bg-token="kw-sky"] .mw-card {
/* Topic 33 FIX-WP6 Task E — white card on kw-gold-surface measures 1.50:1,
* confirmed below the 3:1 non-text contrast guideline. A boundary ring
* restores a visible edge (3.51:1) without restyling the card fill.
*
* EXTENDED TO kw-sky — Topic 36 CORR-WP1 Item 2. `--kw-sky-surface` /
* `--kw-gold-surface` both flipped to white, so a white card on kw-sky now
* measures 1:1 — no edge at all, the same defect class this rule already
* fixed for kw-gold. */
box-shadow: 0 0 0 1px rgba(4, 4, 32, 0.5), var(--mw-shadow-elevation-1, 0 2px 8px rgba(0, 0, 0, 0.12));
}
/* 9-realms 3×3 mobile-locked grid (Topic 13 KWORLD-WP4 — Figma wins).
* The hub composes this as a card-grid with columns=3 + bg_token=kw-sky; the
* 3-column shape is locked even on narrow viewports per Topic 13 ruling.
*
* 2026-08-24 — SCOPED TO `.mw-page-k-world-hub`. It was keyed on the attribute
* pair alone, which is a PROXY for "the hub's realm grid", not the thing
* itself — so any page that happened to compose a K-World card-grid at
* columns=3 on kw-sky silently inherited realm-tile styling: tighter padding,
* centred text, shrunken title and body type.
*
* That is exactly what hit /bedtime-tales-vol-1/. Its three tale cards are the
* same component, from the same helper, as the ones on /bedtime-stories/ — but
* because that page's band is kw-sky and the sibling's is kw-cream, only one of
* the two wore the costume. The pair rule below could not correct it either:
* this selector computes (0,5,0) and the page-scoped rules compute (0,4,0), so
* it won on specificity. Bumping those to match would have been an override
* layered on a mis-scoped selector; this fixes the selector instead.
*
* NOTE FOR THE NEXT READER: as of this change these four rules match NOTHING.
* The hub's only card-grid now sits on kw-cream (k-world/hub.php:208), so the
* shape they describe is not currently composed anywhere on the site — checked
* across /k-world/, /bedtime-stories/, /bedtime-tales-vol-1/, /book-product/,
* /coloring-book-product/ and /coloring-books/. They are kept rather than
* deleted because the Topic 13 ruling they implement still stands, and a
* restored realm grid on the hub should get it back for free. If the hub is
* rebuilt on a different band, move the `[data-bg-token]` here to match. */
.mw-page-k-world-hub .mw-section--card-grid.mw-section--brand-k-world[data-columns="3"][data-bg-token="kw-sky"] .mw-card-grid {
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.5rem, 1.5vw, 1rem);
}
.mw-page-k-world-hub .mw-section--card-grid.mw-section--brand-k-world[data-columns="3"][data-bg-token="kw-sky"] .mw-card {
padding: clamp(0.625rem, 1.5vw, 1rem);
text-align: center;
}
.mw-page-k-world-hub .mw-section--card-grid.mw-section--brand-k-world[data-columns="3"][data-bg-token="kw-sky"] .mw-card__title {
font-size: clamp(0.875rem, 2vw, 1.125rem);
}
.mw-page-k-world-hub .mw-section--card-grid.mw-section--brand-k-world[data-columns="3"][data-bg-token="kw-sky"] .mw-card__body {
font-size: clamp(0.75rem, 1.5vw, 0.875rem);
}
/* -----------------------------------------------------------------------
* Lore brand variant (Topic 17 RENDER-WP8)
*
* Topic 14 manuscript/codex identity — card-grid for the Kaeros hub
* 4-card cluster (Cosmology / Timeline / Characters / Realms). Cards
* take a vellum inner surface with a thin gilt rule, system-serif title.
* ----------------------------------------------------------------------- */
.mw-section--card-grid[data-bg-token="lore-parchment"] { background-color: var(--lore-parchment); color: var(--lore-ink); }
.mw-section--card-grid[data-bg-token="lore-vellum"] { background-color: var(--lore-vellum); color: var(--lore-ink); }
.mw-section--card-grid.mw-section--brand-lore .mw-section__headline {
font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
letter-spacing: -0.005em;
}
.mw-section--card-grid.mw-section--brand-lore .mw-card {
background-color: var(--lore-vellum);
color: var(--lore-ink);
padding: clamp(1rem, 2vw, 1.5rem);
border: 1px solid rgba(168, 125, 50, 0.4); /* gilt edge */
border-radius: 2px; /* manuscript: square-ish, not pillowy */
box-shadow: 0 1px 4px rgba(27, 20, 16, 0.08);
}
.mw-section--card-grid.mw-section--brand-lore[data-bg-token="lore-vellum"] .mw-card {
background-color: var(--lore-parchment); /* invert on vellum bands */
}
.mw-section--card-grid.mw-section--brand-lore .mw-card__title {
font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
font-size: 1.25rem;
letter-spacing: -0.005em;
}
.mw-section--card-grid.mw-section--brand-lore .mw-card__eyebrow {
font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
font-style: italic;
letter-spacing: 0.1em;
/* Topic 33 FIX-WP10: undeclared gilt TEXT hit — the card's inner surface
* is vellum (line 238 above), so this is the exact 2.56 pair. Routed
* through the surface-aware indirection declared in theme-tokens.css. */
color: var(--lore-gilt-text, var(--lore-gilt, #A87D32));
opacity: 1;
}
.mw-section--card-grid.mw-section--brand-lore .mw-card a {
color: inherit;
text-decoration: none;
}
.mw-section--card-grid.mw-section--brand-lore .mw-card a:hover,
.mw-section--card-grid.mw-section--brand-lore .mw-card a:focus-visible {
color: var(--lore-oxblood);
text-decoration: underline;
text-decoration-color: var(--lore-gilt);
text-underline-offset: 0.2em;
}
/* -----------------------------------------------------------------------
* Section intro sub-headline (Topic 27 BRAND-WP4, S5)
*
* Shared atom — defined here (card-grid CSS loads globally) but consumed by
* card-grid / key-facts / timeline callers that pass `intro`. A short lead
* paragraph under the section h2 (Claude Design SectionHeading.intro).
* ----------------------------------------------------------------------- */
.mw-section__intro {
font-size: 1.0625rem;
line-height: 1.6;
max-width: 44rem;
margin: 0.25rem 0 1.25rem;
opacity: 0.9;
}
.mw-section--card-grid.mw-section--brand-studio .mw-section__intro {
margin-inline: auto;
text-align: center;
}
/* -----------------------------------------------------------------------
* Plain "trirow" layout (Topic 27 BRAND-WP4, S4) — card-grid layout='plain'.
*
* Unboxed columns with a colored top-rule for Claude Design "how it works /
* what we publish / how we work" bands. No `.mw-card` surface chrome.
* ----------------------------------------------------------------------- */
.mw-trirow {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.mw-trirow--cols-1 { grid-template-columns: 1fr; }
.mw-trirow--cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.mw-trirow--cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.mw-trirow--cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.mw-trirow__item {
border-block-start: 3px solid var(--mw-color-primary, #6765e8);
padding-block-start: 1rem;
}
.mw-trirow__eyebrow {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.85;
margin: 0 0 0.35rem;
}
.mw-trirow__title {
font-family: var(--mw-font-display, system-ui, sans-serif);
font-size: 1.25rem;
line-height: 1.3;
margin: 0 0 0.5rem;
}
.mw-trirow__title a {
color: inherit;
text-decoration: none;
}
.mw-trirow__title a:hover,
.mw-trirow__title a:focus-visible {
text-decoration: underline;
}
.mw-trirow__body {
font-size: 0.9375rem;
line-height: 1.6;
margin: 0;
}
/* -----------------------------------------------------------------------
* Image-forward feature cards (Topic 30 CORR-WP4) — card-grid `variant`
* ('feature') layout switch. Self-contained `.feat-grid` container (see
* inc/sections/card-grid.php ul-level branch) — replaces the Home "We Create
* More Than Just Fun" grid's boxed white value-card treatment below.
*
* Rules VERBATIM from the Claude Design handoff
* (design-corrections/corrections.css §4, L68-77), including the
* position/z-index stack (img z0 / scrim z1 / body z2 inside
* `.feat-card { isolation: isolate; overflow: hidden }`) that legibility
* depends on. THREE additions the handoff omits (reviewer-mandated):
* link reset, :focus-visible outline (WCAG 2.4.7), and a
* prefers-reduced-motion freeze of the hover lift/scale.
* ----------------------------------------------------------------------- */
.feat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1.1rem, 2.4vw, 2.25rem);
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
}
@media (max-width: 720px) {
.feat-grid {
grid-template-columns: 1fr;
}
}
.feat-card {
position: relative;
display: block;
isolation: isolate;
overflow: hidden;
aspect-ratio: 540 / 424;
border-radius: 22px;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feat-card:hover {
transform: translateY(-5px);
box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.85);
}
.feat-card:focus-visible {
outline: 3px solid var(--mw-color-primary, #6765e8);
outline-offset: 3px;
}
.feat-card__img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.feat-card:hover .feat-card__img {
transform: scale(1.05);
}
.feat-card__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(4, 3, 26, 0) 30%, rgba(4, 3, 26, 0.55) 62%, rgba(4, 3, 26, 0.92) 100%);
}
.feat-card__body {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 2;
padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.feat-card__title {
font-family: var(--mw-font-display, system-ui, sans-serif);
font-size: clamp(1.5rem, 2.4vw, 2rem);
color: #ffffff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
margin: 0;
}
.feat-card__desc {
font-size: 1rem;
color: rgba(255, 255, 255, 0.86);
max-width: 34ch;
margin: 0.5rem 0 0;
}
.feat-card__cta {
display: inline-flex;
align-items: center;
margin-top: 0.7rem;
padding: 0.5rem 1.25rem;
border-radius: 999px;
background: var(--mw-color-primary, #6765e8);
color: #ffffff;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
.feat-card,
.feat-card__img {
transition: none;
}
.feat-card:hover {
transform: none;
box-shadow: none;
}
.feat-card:hover .feat-card__img {
transform: none;
}
}
/* -----------------------------------------------------------------------
* K-World media cards (Topic 27 BRAND-WP4 Iter 3) — a boxed K-World surface
* card with a flush cover photo on top and padded body, mirroring the Claude
* Design .story-card / .pcard. Scoped to the pages that use image cards so
* text-only K-World card-grids keep their padded surface. Iter 3a wired the
* bedtime tale cards; Iter 3b joins the K-World hub product cross-sell (which
* also carries a per-card `view_label` CTA link → padded to match the body).
*
* 2026-08-24 — `.mw-page-bedtime-tales-vol-1` joined every selector list below.
* It was missed when the Vol. 1 product page was built, and the omission was
* visible: that page renders the SAME three tale cards from the SAME helper
* (`mystwood_studios_ab_bedtime_stories_cards()`), so with none of these rules
* reaching it the images fell back to `aspect-ratio: auto` / `object-fit: fill`
* and staggered — 320×215, 320×215, 320×162 — because the sources are two
* different shapes (1600×1073 and 1600×812).
*
* Added to ALL nine groups, not just the `img` one. The `.mw-card` rule sets
* `padding: 0` so the cover photo can go flush; the `__eyebrow` / `__title` /
* `__body` rules further down put that padding back on the text. Wiring the
* first without the last three would run the copy into the card edge.
* ----------------------------------------------------------------------- */
.mw-page-bedtime-stories .mw-section--card-grid.mw-section--brand-k-world .mw-card,
.mw-page-k-world-hub .mw-section--card-grid.mw-section--brand-k-world .mw-card,
.mw-page-bedtime-tales-vol-1 .mw-section--card-grid.mw-section--brand-k-world .mw-card {
padding: 0;
overflow: hidden;
gap: 0;
}
.mw-page-bedtime-stories .mw-section--card-grid.mw-section--brand-k-world .mw-card__media,
.mw-page-k-world-hub .mw-section--card-grid.mw-section--brand-k-world .mw-card__media,
.mw-page-bedtime-tales-vol-1 .mw-section--card-grid.mw-section--brand-k-world .mw-card__media {
margin: 0;
/* Task C hover zoom needs its OWN clip. `.mw-card` above already has
* overflow:hidden, but that only clips outside the card — a scaled image
* would still paint down over the eyebrow and title. */
overflow: hidden;
}
.mw-page-bedtime-stories .mw-section--card-grid.mw-section--brand-k-world .mw-card__media img,
.mw-page-k-world-hub .mw-section--card-grid.mw-section--brand-k-world .mw-card__media img,
.mw-page-bedtime-tales-vol-1 .mw-section--card-grid.mw-section--brand-k-world .mw-card__media img {
aspect-ratio: 3 / 2;
object-fit: cover;
/* Transition on the BASE rule, not the :hover — otherwise the zoom eases in
* and snaps out. Duration/curve/scale are lifted from `.feat-card__img`
* (:460-465) rather than re-invented, per the WP's "extend, do not build a
* parallel system". */
transition: transform 0.6s ease;
}
/* Topic 33 FIX-WP24 Task C — "On Hover zoom into the images a bit" (owner,
* 2026-07-30). Scale the IMAGE inside its clipped frame, never the card:
* WP-18 made these cards equal-height, so anything that changed card size
* would reflow the whole row.
*
* `:focus-within` is not decoration. `.mw-card` is an