/* ============================================================
Archives — home.php (the posts index), archive.php (category
and every other term / post-type archive), index.php's
fallback list, parts/post-card.php, and the single.php post
chrome. Mobile-first per DECISIONS D3.
NO DESIGN EXISTS FOR THESE PAGES. The source archive is a
bare Hello-Elementor list and the block library has no post
list in it, so nothing here invents chrome: `.section`,
`.wrap`, `.m434-eyebrow` and the hairline rules are the
sitewide rhythm, and the highlight grid is literally the
`.case-card` component components.css already ships for the
posts_feed block. Structure is meant to survive a restyle;
only values should need to change. Same precedent as
search.css.
The single-post chrome lives here rather than in a separate
single.css because it is the same material — a dateline, an
accent category eyebrow, a framed lead image — and the two
files would have had to be kept in step by hand.
templates.md §6.3 proposes an `m434-single` handle; if that
ever lands, lift the last block of this file into it whole.
CONTRAST (computed, sRGB, WCAG 2.1):
--ink #303030 on #ffffff 13.20:1 AAA
--ink #303030 on #f4f5f7 12.10:1 AAA
--m434-slate-strong #4b5563 on #ffffff 7.56:1 AAA
--m434-slate-strong #4b5563 on #f4f5f7 6.93:1 AAA
--m434-accent-text #a34f0e on #ffffff 5.70:1 AA
--m434-accent-text #a34f0e on #f4f5f7 5.23:1 AA
--slate #6b7280 on #ffffff 4.83:1 AA
#ffffff on --ink #303030 13.20:1 AAA
--slate is used ONLY on white (4.83:1); on --bg-soft it is
4.43:1 and FAILS, which is why every meta line on a tinted
ground uses --m434-slate-strong instead. --red (3.03:1 on
white) never carries text here — only rules and focus rings.
============================================================ */
/* ============================================================
1. The archive header
============================================================ */
.m434-archive-head {
max-width: 44ch;
margin-bottom: 28px;
}
.m434-archive-title {
margin: 0;
color: var(--ink);
}
/* The eyebrow is a link on term archives (back to the posts
index). .m434-eyebrow already sets the accent text color;
the anchor has to be told to inherit it, and it carries the
underline that marks it as a link at 10px/0.2em where color
alone would not. */
.m434-archive-up a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
/* --m434-accent-ink-hover, NOT --red-dark. The eyebrow computes to
10px/500 on mobile, 11px at md and 12px at lg — normal text at
every width, so 1.4.3's 4.5:1 applies and the large-text 3:1
relaxation never does. --red-dark #c95f0f is 4.10:1 on the page's
--white ground: a fail. It also LIGHTENS the label, because F-16
already pushed accent text down to --m434-accent-text #a34f0e
(5.70:1), which is darker than --red-dark — so the hover undid the
rest state's own fix. --m434-accent-ink-hover #86430f continues the
darkening at 7.44:1 on --white, and is surface-adaptive, so this
keeps working if the archive head ever lands on a dark band. */
.m434-archive-up a:hover { color: var(--m434-accent-ink-hover); }
.m434-archive-intro {
font-family: var(--body);
font-size: 15px;
line-height: 1.65;
color: var(--m434-slate-strong);
margin-top: 14px;
}
.m434-archive-intro > * + * { margin-top: 0.9em; }
.m434-archive-intro p { margin: 0; }
.m434-archive-empty {
font-family: var(--body);
font-size: 15px;
line-height: 1.65;
color: var(--m434-slate-strong);
margin: 0;
}
.m434-archive-empty-back { margin: 24px 0 0; }
/* ============================================================
2. The stretched link — shared by both layouts
------------------------------------------------------------
The wraps the TITLE ONLY, so the link's accessible name
is the post title and nothing else; this ::after expands its
hit area over the whole entry. Wrapping the entry in one
instead would fold the category, the date, the author and the
entire excerpt into that accessible name — the defect the
search.php review caught on this build.
============================================================ */
.m434-post-item,
.m434-post-card { position: relative; }
.m434-post-card__link {
color: inherit;
text-decoration: none;
}
.m434-post-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Keyboard focus has to ring the whole entry, not the six words
of title text that happen to be the anchor — the visible
target is the card. :has() moves the ring to the container and
suppresses the anchor's own. Where :has() is unsupported the
block is skipped entirely and the global :focus-visible ring
stays on the anchor, which is correct, just smaller. Never
invert this: the ring must exist by default and be RELOCATED by
the enhancement, not created by it.
THE COLOR IS THE GLOBAL TOKEN, NOT --red. This rule used to
hardcode `2px solid var(--red)` and, being the relocated ring,
it also suppressed the surface-adaptive #111 ring global.css
now installs — so the one entry a keyboard user is actually on
got the theme's REJECTED ring while everything else got the
accepted one. --red #E5761E measures:
3.03:1 on the page's --white ground (scrapes 1.4.11's 3:1)
2.77:1 on the --m434-hover-light #f4f5f7 that
`.m434-post-item:hover` bleeds 12px past the entry —
i.e. FAILS in the very ordinary state of pointing at
the row you tabbed to.
--m434-focus-ring is #111 on light grounds: 18.88:1 on --white,
17.31:1 on that same hover bleed. The 3px offset keeps the ring
inside the 12px bleed, so the hover ground is the one it is
measured against. */
@supports selector(:has(*)) {
.m434-post-item:has(.m434-post-card__link:focus-visible),
.m434-post-card:has(.m434-post-card__link:focus-visible) {
outline: 2px solid var(--m434-focus-ring);
outline-offset: 3px;
}
.m434-post-card__link:focus-visible { outline: none; }
}
/* ============================================================
2b. The category eyebrow — EVERY term, each its own link
------------------------------------------------------------
Markup: m434_post_category_list() in parts/post-card.php, used
by the list entry (.m434-post-item__cat), the grid card
(.case-tag) and the single-post header (.m434-eyebrow). The
wrapper keeps whichever eyebrow class the surface already had,
so nothing here restates type, size, tracking or color — the
chip looks exactly as it did when it held one dead label.
Three things are new and each is load-bearing:
1. STACKING. The stretched title link paints an
`inset: 0; z-index: 1` ::after across the whole entry (§2).
The category anchors sit EARLIER in the DOM with no stacking
of their own, so without this pair of declarations every
click on a category landed on the overlay and opened the
post instead of the term archive. Keyboard reach was never
affected — tab order follows the DOM, not the paint order —
which is exactly what makes a mouse-only failure like this
survive a source-only review.
2. COLOR. `inherit`, not the global `a` color, so each link
takes its own chip's accent on whatever ground the chip is
on. Both resolve to --m434-accent-text #a34f0e today
(5.70:1 on --white, 5.23:1 on --bg-soft #f4f5f7 — AA at any
size); `inherit` is what keeps it correct if a card ever
lands on a dark band, where --m434-accent-ink flips to
--m434-accent-lt.
3. UNDERLINE. Same finding as `.m434-archive-up a` above: the
chip computes to 10px/0.16em, where color alone does not
read as a link — and it now holds non-link text (the
separators) beside the links. Hover is
--m434-accent-ink-hover #86430f (7.44:1 on --white), never
--red-dark #c95f0f (4.10:1 on --white — a 1.4.3 fail).
The separator itself is a real aria-hidden emitted by
PHP, not a `::after` here: generated text content IS announced
(LESSONS #19) and cannot carry aria-hidden, and this markup also
renders inside the posts_feed block on pages where this
stylesheet is not enqueued — a CSS-only separator would vanish
there. It is left unstyled on purpose, so it inherits the chip's
own color and measures the same 5.70:1 / 5.23:1.
============================================================ */
.m434-cat-list__link {
position: relative;
z-index: 2;
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.m434-cat-list__link:hover { color: var(--m434-accent-ink-hover); }
/* ============================================================
3. The `date · author` meta line
============================================================ */
.m434-post-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
margin: 0;
font-family: var(--body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--m434-slate-strong);
}
.m434-post-meta__sep { color: var(--line); }
/* ============================================================
4. Excerpt list — the default layout
------------------------------------------------------------
"There should be more differentiation between when one post
ends and the next begins." The rule is drawn by the ADJACENT
SIBLING selector, so it appears BETWEEN entries and never
after the last one — no trailing
to render, and none to
remember to suppress.
============================================================ */
.m434-post-list {
display: grid;
grid-template-columns: 1fr;
}
.m434-post-item {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: start;
transition: background 0.2s var(--m434-ease);
}
.m434-post-item + .m434-post-item {
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
/* The hover fill bleeds 12px past the entry so the pointer
affordance reads as "this whole row", matching where the
stretched link actually is. A spread box-shadow does it rather
than negative margins + padding, which would have pulled the
dividing rule out of alignment with the text column. The 12px
spread is smaller than the 28px inter-entry gap, so the fill
never reaches a neighbor's rule. */
.m434-post-item:hover {
background: var(--m434-hover-light);
box-shadow: 0 0 0 12px var(--m434-hover-light);
}
/* Stacked on mobile, so the image sits ON TOP of the copy and the
hairline under it reads as part of the entry. At md it becomes a
side rail and the border is dropped — a rule under a rail is a
line pointing at nothing. */
.m434-post-item__media { overflow: hidden; }
.m434-post-item__media img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-bottom: 1px solid var(--line);
}
.m434-post-item__body {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.m434-post-item__cat {
margin: 0;
font-family: var(--body);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--m434-accent-text);
}
.m434-post-item__title {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: 20px;
line-height: 1.18;
letter-spacing: -0.005em;
text-transform: none;
color: var(--ink);
}
.m434-post-item:hover .m434-post-card__link { color: var(--m434-accent-text); }
.m434-post-item__excerpt {
margin: 0;
font-family: var(--body);
font-size: 15px;
line-height: 1.65;
color: var(--m434-slate-strong);
max-width: 62ch;
}
.m434-post-item__cue {
font-family: var(--body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--m434-accent-text);
}
/* ============================================================
5. Highlight grid — the posts_feed card, reused verbatim
------------------------------------------------------------
.case-card / .case-media / .case-body / .case-tag /
.case-arrow are components.css's and are NOT redeclared here.
This block adds only what a card in an ARCHIVE needs that a
card in a feed does not: an title (the feed's is an ,
sized by components.css) and an excerpt.
============================================================ */
.m434-post-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
/* Matches .case-card h3 in components.css so the archive card
and the feed card are the same object at the same size — the
heading LEVEL differs because the document outline requires
it, the type does not. */
.m434-post-card__title {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: 17px;
line-height: 1.25;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink);
}
.m434-post-card__excerpt {
margin: 0;
font-family: var(--body);
font-size: 14px;
line-height: 1.6;
color: var(--m434-slate-strong);
}
.m434-post-card .m434-post-meta { font-size: 11px; }
/* The title takes the accent on hover the way the list entry's does,
so both layouts answer a pointer the same way. Weighs (0,3,0),
which beats global.css's `a:hover` (0,1,1) — the anchor inherits
from the heading rather than fighting it. */
.m434-post-card:hover .m434-post-card__link { color: var(--m434-accent-text); }
/* ============================================================
6. Pagination — MOVED to global.css
------------------------------------------------------------
.m434-pagination now lives in global.css because it is not an
archive affordance: page-programs.php's grid pager needs the
identical component and does NOT load this file, so the pager
rendered as an unstyled bulleted list with 8.5x19px tap targets.
A shared component belongs in the shared stylesheet.
============================================================ */
/* ============================================================
7. Single post chrome — single.php's prose branch
============================================================ */
.m434-post-head { margin-bottom: 24px; }
.m434-post-title {
margin: 0;
color: var(--ink);
}
.m434-post-head .m434-post-meta { margin-top: 14px; }
.m434-post-head .m434-eyebrow a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Same finding, same fix as .m434-archive-up a:hover above — see the
note there. --red-dark #c95f0f is 4.10:1 on --white at 10-12px/500,
under 1.4.3's 4.5:1; --m434-accent-ink-hover #86430f is 7.44:1. */
.m434-post-head .m434-eyebrow a:hover { color: var(--m434-accent-ink-hover); }
/* The lead image is framed with the same hairline the cards
carry rather than a drop shadow — this design has no
elevation on light grounds. */
.m434-post-figure {
margin: 0 0 28px;
box-shadow: var(--m434-rule-inset);
}
.m434-post-figure img {
display: block;
width: 100%;
height: auto;
}
/* ---- prev / next ----
The rule is each LINK's own 1px ring, not a background on the
container showing through the gaps. The first and last post in a
category have only one neighbor, so this grid renders one link and
one EMPTY CELL — and an empty cell over a container background is
not whitespace, it is the container, painted solid. On the last
Insights post that was a gray slab half the width of the article.
Adjacent rings meet inside the 1px gap and overlap exactly, so the
two-link case is unchanged. Same fix as the card grids in
team-cards.css; see the note there. */
.m434-post-nav {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
margin-top: 40px;
}
.m434-post-nav__link {
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px 18px;
background: var(--white);
box-shadow: 0 0 0 1px var(--m434-line-3);
text-decoration: none;
transition: background 0.2s var(--m434-ease);
}
.m434-post-nav__link:hover { background: var(--m434-hover-light); }
.m434-post-nav__label {
font-family: var(--body);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--m434-accent-text);
}
.m434-post-nav__title {
font-family: var(--display);
font-weight: 700;
font-size: 16px;
line-height: 1.25;
color: var(--ink);
}
.m434-post-nav__link--next { text-align: left; }
.m434-post-back { margin: 28px 0 0; }
/* ============================================================
sm — 480px
============================================================ */
@media (min-width: 480px) {
.m434-post-item__title { font-size: 22px; }
}
/* ============================================================
md — 768px. The list gains its media rail; the grid goes
two-up; prev/next sit side by side.
============================================================ */
@media (min-width: 768px) {
.m434-archive-head { margin-bottom: 36px; }
.m434-post-item {
grid-template-columns: 220px 1fr;
gap: 24px;
}
.m434-post-item + .m434-post-item {
margin-top: 34px;
padding-top: 34px;
}
.m434-post-item__media img {
aspect-ratio: 4 / 3;
border-bottom: 0;
box-shadow: var(--m434-rule-inset);
}
.m434-post-item__title { font-size: 24px; }
.m434-post-grid { grid-template-columns: 1fr 1fr; }
.m434-post-nav { grid-template-columns: 1fr 1fr; }
.m434-post-nav__link--next { text-align: right; }
/* A lone link spans the pair rather than sitting in half a bar with
nothing beside it. Unlike a card, these two have no intrinsic size
— they are one navigation bar split in two — so filling it is the
honest shape, not a stretch.
text-align is reset with it: a solitary "Next" pushed to the right
edge of a full-width box reads as a layout accident. (0,2,0) beats
the --next rule above at (0,1,0), so order does not matter. */
.m434-post-nav__link:only-child {
grid-column: 1 / -1;
text-align: left;
}
}
/* ============================================================
lg — 1024px. Three grid columns, matching the posts feed and
the search results.
============================================================ */
@media (min-width: 1024px) {
.m434-archive-head { margin-bottom: 44px; }
.m434-post-grid { grid-template-columns: repeat(3, 1fr); }
.m434-post-card__title { font-size: 19px; }
.m434-post-item {
grid-template-columns: 260px 1fr;
gap: 32px;
}
.m434-post-item + .m434-post-item {
margin-top: 40px;
padding-top: 40px;
}
.m434-post-item__title { font-size: 26px; }
}
/* ============================================================
xl — 1200px
============================================================ */
@media (min-width: 1200px) {
.m434-post-item { grid-template-columns: 300px 1fr; }
}