, the caption bar.
6.18:1 on cream, 5.32:1 on the filter panel, 5.27:1 on the industry
band, 5.28:1 on the default device paper. */
--wk-deep: #a13228;
/* ---- device papers, one per context (see DEVICE SHOWCASE) ---- */
--wk-paper: #eaded0;
--wk-paper-cover: #f0b6a5;
--wk-paper-alt: #cbd0c8;
/* ---- text on the dark bands ---- */
--wk-intro: #d6ccc2; /* cover intro — 9.41:1 on ink */
--wk-dim: #c9bfb5; /* breadcrumb, cover foot, selected intro — 8.22:1 on ink */
--wk-finale: #d5c9be; /* finale copy — 9.16:1 on ink */
--wk-story: #ded3c9; /* story body copy — 8.63:1 on --wk-story-bg */
/* ---- surfaces ---- */
--wk-story-bg: #36322f; /* story row ground */
--wk-art: #e5d9cc; /* story art ground */
--wk-art-alt: #c6cbc6; /* --alt story art ground */
--wk-industry: #e8ded3; /* industry band */
--wk-industry-fg: #594f48; /* industry body copy — 6.00:1 on the band */
--wk-panel: #e9dfd4; /* filter panel */
--wk-field: #fbf6ef; /* filter input ground */
--wk-reset-hover: #d8c7b7; /* reset control, hovered */
--wk-browser: #ece4da; /* browser frame body */
--wk-frame: #b7a797; /* browser frame edge — 1.76:1, decorative */
--wk-browser-bar: #f3ece3; /* browser frame caption bar (device showcase) */
--wk-dots: #9c8c80; /* decorative window dots, aria-hidden */
--wk-ph: #e5d7c9; /* image placeholder ground */
--wk-phone: #302d2b; /* phone body */
--wk-phone-ring: #74695e; /* phone's 1px outline shadow */
--wk-screen: #d9cfc3; /* phone screen, behind the image */
/* ---- card art rotation (.cm-wk-card:nth-child(4n+2 / 4n+3)) ---- */
--wk-art-1: #e5d8cb;
--wk-art-2: #d7dcd6;
--wk-art-3: #d9c3b5;
/*
* OURS, NOT THE REFERENCE'S — two corrected values, both measured.
*
* --wk-edge replaces the reference's rgb(161,139,120) on the reset
* control and rgb(185,168,153) on the filter inputs. Those are the only
* boundary each control has, which is exactly what SC 1.4.11 asks about,
* and they measured 2.46:1 / 2.14:1. One colour now serves both, chosen
* to clear 3:1 against all three fills it ever sits on: the filter panel
* (4.18:1), the input ground (5.12:1) and the reset's hover fill
* (3.35:1) — the hover fill is the tight one, and the reference's value
* failed it worst there, at 1.97:1.
*
* --wk-caption replaces rgb(102,89,78) on the desktop capture's meta
* line. That line is 10px body text printed on whichever device paper
* its context sets, and the reference value failed on two of the three:
* 3.85:1 on the cover's #f0b6a5 and 4.32:1 on the --alt story's #cbd0c8.
* This value is the same hue 24% darker and clears 4.5:1 on all three —
* 6.30:1 default, 4.74:1 cover, 5.32:1 alt.
*/
--wk-edge: #7a6554;
--wk-caption: #574c42;
background: var(--wk-cream);
color: var(--wk-ink);
}
/* This page is WIDER than the site's 1240px container. Scoped to .cm-wk so no
other template inherits it; (0,2,0) beats .cm-wrap's (0,1,0) regardless of
which file lands last. */
.cm-wk .cm-wrap { max-width: 1440px; }
/* ===========================================================================
FOCUS
---------------------------------------------------------------------------
The reference's treatment, kept: a 3px deep-red ring at 5px offset, with a
coral variant on the dark bands. One correction, below.
=========================================================================== */
.cm-wk :is(a, button, input, select):focus-visible {
outline: 3px solid var(--wk-deep);
outline-offset: 5px;
}
.cm-wk :is(.cm-wk-hero, .cm-wk-selected, .cm-wk-finale) :is(a, button):focus-visible {
outline-color: var(--wk-coral);
}
/*
* CORRECTED. The two rules above are both the reference's, and together they
* put an invisible focus ring on this page's most prominent link.
*
* .cm-wk-cover lives inside .cm-wk-hero, and its copy panel is painted CORAL
* — so the coral variant resolved to coral-on-coral, 1.00:1. Falling back to
* the base deep-red ring would not have rescued it either: that is 2.71:1 on
* coral, still under the 3:1 SC 1.4.11 asks of a focus indicator. The same
* applies wherever a device showcase sits inside a dark band: coral measures
* 1.47:1 on the cover paper and 1.65:1 on the --alt story paper.
*
* Ink is the one ring colour that is unambiguous on all of them: 5.77:1 on
* coral, 8.46:1 on #f0b6a5, 9.49:1 on #cbd0c8, 11.24:1 on #eaded0.
*
* Equal specificity to the coral rule above ((0,3,1) both), so this wins on
* source order — it must stay AFTER it.
*/
.cm-wk :is(.cm-wk-cover, .cm-wk-story-art, .cm-wk-devices) :is(a, button):focus-visible {
outline-color: var(--wk-ink);
}
/* ===========================================================================
SHARED TYPE + SMALL PARTS
=========================================================================== */
/* var(--font-display) in the reference. This theme's display face is
--cm26-font-display (Montserrat); --font-display does not exist here and
would have silently fallen back to the body face. */
.cm-wk-kicker,
.cm-wk-label {
font-family: var(--cm26-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.cm-wk-crumbs ol {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 11px;
}
.cm-wk-crumbs a {
text-decoration: underline;
text-underline-offset: 4px;
}
.cm-wk-read {
display: inline-flex;
align-items: center;
gap: 22px;
min-height: 46px;
margin-top: 28px;
font-size: 12px;
font-weight: 700;
}
.cm-wk-read svg {
flex: none; /* real link text runs longer than the reference's; without
this the arrow is the thing that gives way */
width: 20px;
height: 20px;
}
.cm-wk .cm-wk-read:hover {
text-decoration: underline;
text-underline-offset: 6px;
}
.cm-wk-scope {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 10px;
font-weight: 600;
}
/* CORRECTED alpha: .36 -> .66. The border is the only boundary these chips
have, and at .36 it composited to #b25b50 over coral — 1.81:1. At .66 it is
#72433c, 3.15:1, which clears SC 1.4.11. (The chip TEXT was already fine at
5.77:1; the chips are not interactive, but the contract asks for 3:1 on
this boundary and 1.81:1 reads as no boundary at all on the coral panel.)
Left as a literal rgba() rather than a relative-colour expression off
--wk-ink: rgb(from …) support is too new for a theme with no build step. */
.cm-wk-scope span {
padding: 7px 10px;
border: 1px solid rgba(41, 39, 37, .66);
}
/* The browser frame. Shared by the cover, the story rows and the device
showcase — .cm-wk-browser*, never .cm-browser-bar, which is the homepage's. */
.cm-wk-browser {
width: 100%;
background: var(--wk-browser);
color: var(--wk-ink);
}
.cm-wk-browser-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 16px;
font-family: var(--cm26-font-display);
font-size: 9px;
font-weight: 600;
letter-spacing: .03em;
}
.cm-wk-browser-dots { display: flex; gap: 4px; }
.cm-wk-browser-dots i {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--wk-dots);
}
/* The .cm-wk prefix is the reference's and it is load-bearing: cosmick-modern
.css sets `img { height: auto; display: block }` at (0,0,1), and the
object-fit rules below only work against an explicit height. (0,2,1) clears
it with room to spare. Same reason on the card art and the phone screen. */
.cm-wk .cm-wk-browser img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* Shown instead of an ![]()
when a project has no usable screenshot. */
.cm-wk-ph {
display: grid;
place-items: center;
min-height: 220px;
padding: 28px;
background: var(--wk-ph);
color: var(--wk-ink);
font-family: var(--cm26-font-display);
font-size: 24px;
font-weight: 700;
text-align: center;
}
/* ===========================================================================
HERO — .cm-wk-hero
=========================================================================== */
.cm-wk-hero {
padding-block: 25px 0;
background: var(--wk-ink);
color: var(--wk-cream);
}
.cm-wk-hero .cm-wk-crumbs {
margin-bottom: 52px;
color: var(--wk-dim);
}
.cm-wk-cover-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 40px;
padding-bottom: 38px;
}
.cm-wk-cover-heading h1 {
max-width: 12ch;
margin-top: 22px;
font-size: clamp(44px, 6.6vw, 92px);
font-weight: 800;
line-height: 1.01;
letter-spacing: -.065em;
}
/* Large text, so 3:1 is the bar — coral on ink is 5.77:1. */
.cm-wk-cover-heading h1 span { color: var(--wk-coral); }
.cm-wk-cover-intro {
max-width: 33ch;
padding-bottom: 4px;
}
.cm-wk-cover-intro p {
font-size: 14px;
line-height: 1.9;
color: var(--wk-intro); /* 9.41:1 on ink — the reference value passes */
}
.cm-wk-explore {
display: inline-flex;
align-items: center;
gap: 15px;
min-height: 44px;
margin-top: 25px;
font-size: 12px;
font-weight: 600;
}
.cm-wk-explore svg {
flex: none;
width: 22px;
height: 22px;
color: var(--wk-coral);
}
/*
* THE SPOTLIGHT COVER — SINGLE COLUMN, MEDIA FIRST.
* The bundle's first pass made this `grid-template-columns: .72fr 1.5fr` (and
* .9fr 1.2fr under 1000px). Its second pass overrides both with `1fr`, at the
* same specificity and later in the file, so one column is the approved
* design at EVERY width. Do not restore the two-column rules: the copy block
* below carries the two-column treatment now, and the screenshot is meant to
* run the full width above it.
*/
.cm-wk-cover {
position: relative;
display: grid;
grid-template-columns: 1fr;
background: var(--wk-coral);
color: var(--wk-ink);
}
/* The copy panel is itself the two-column grid, placed by grid-area: the
label and headline stack in column 1, the paragraph / scope chips / link in
column 2. (Superseded first pass: flex column with a clamp(24px,3.6vw,52px)
pad.) */
.cm-wk-cover-copy {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 9%;
align-items: start;
padding: clamp(28px, 4vw, 56px);
}
/* line-height is folded in from the reference's generic `.work-cover-copy > p`
rule, which the two rules below supersede for the body paragraph but not for
the label — the label is a direct child too. Same value, one less rule. */
.cm-wk-cover-copy .cm-wk-label {
grid-column: 1;
margin: 0 0 18px;
font-size: 10px;
line-height: 1.85;
letter-spacing: .07em;
}
.cm-wk-cover-copy h2 {
grid-area: 2 / 1 / 5;
margin: 0;
font-size: clamp(34px, 4vw, 57px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.05em;
}
.cm-wk-cover-copy > p:not(.cm-wk-label) {
grid-area: 1 / 2 / 3;
margin: 0 0 24px;
font-size: 15px;
line-height: 1.85;
}
.cm-wk-cover-copy .cm-wk-scope,
.cm-wk-cover-copy .cm-wk-read { grid-column: 2; }
.cm-wk-cover .cm-wk-read {
margin-top: 8px;
padding-top: 12px;
}
/* order:-1 is what puts the screenshot above the copy. The first pass's flex
centring, 30px padding and 430px min-height (>=1100px) are all superseded;
min-width:0 survives from it and is kept — it is what lets a wide capture
shrink inside the grid column instead of forcing the page to scroll. */
.cm-wk-cover-media {
display: block;
order: -1;
min-width: 0;
}
.cm-wk-cover-foot {
display: flex;
justify-content: space-between;
gap: 20px;
padding-block: 19px;
font-size: 10px;
color: var(--wk-dim); /* 8.22:1 on ink — the reference value passes */
}
/* ===========================================================================
SELECTED WORK — .cm-wk-selected
=========================================================================== */
.cm-wk-selected {
padding-block: 62px 80px;
background: var(--wk-ink);
color: var(--wk-cream);
}
.cm-wk-selected-intro {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
margin-bottom: 38px;
}
.cm-wk-selected-intro h2 {
font-size: clamp(25px, 3.4vw, 43px);
font-weight: 700;
letter-spacing: -.045em;
}
.cm-wk-selected-intro p {
font-size: 12px;
color: var(--wk-dim); /* 8.22:1 on ink */
}
/* Same supersession as the cover: the first pass had 1.35fr/1fr (and 1fr/
1.35fr for the --alt modifier). Both are overridden to one column later in
the bundle, so a story row is art-then-copy stacked at every width, and
.cm-wk-story-copy carries the two-column treatment instead. */
.cm-wk-story {
display: grid;
grid-template-columns: 1fr;
margin-top: 46px;
background: var(--wk-story-bg);
}
/*
* The art cell is now a bare wrapper: the second pass zeroes its padding and
* its 440px min-height (>=1100px), and resets the --alt modifier's `order: 2`
* back to 0 — so the art no longer swaps sides, and the device showcase
* inside it bleeds to the full width of the row. The grounds are kept because
* they are what shows while the screenshots are still loading.
*/
.cm-wk-story-art {
display: flex;
align-items: center;
min-width: 0;
padding: 0;
order: 0;
background: var(--wk-art);
}
.cm-wk-story--alt .cm-wk-story-art { background: var(--wk-art-alt); }
.cm-wk-story-copy {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 9%;
padding: clamp(28px, 4vw, 56px);
}
/*
* This generic rule is mostly superseded — the :not(.cm-wk-label) rule below
* takes the body paragraph's margin and size, and .cm-wk-label takes the
* label's. What still lands from it: the body copy's COLOUR and line-height,
* and the label's 13px size (the label has no size override of its own in a
* story row, unlike in the cover). Keep all three.
*/
.cm-wk-story-copy > p {
font-size: 13px;
line-height: 1.85;
color: var(--wk-story); /* 8.63:1 on the story ground */
}
/* Coral at 13px on #36322f is 4.92:1 — above 4.5:1, so this stands. */
.cm-wk-story-copy .cm-wk-label {
grid-column: 1;
margin: 0;
color: var(--wk-coral);
}
/* margin-top survives the second pass here (unlike the cover's h2, which is
explicitly zeroed) — the reference keeps 21px above a story headline. */
.cm-wk-story-copy h3 {
grid-area: 2 / 1 / 5;
margin-top: 21px;
font-size: clamp(32px, 4vw, 52px);
font-weight: 700;
line-height: 1.14;
letter-spacing: -.045em;
}
.cm-wk-story-copy > p:not(.cm-wk-label) {
grid-area: 1 / 2 / 3;
margin: 0;
font-size: 14px;
}
.cm-wk-story-copy .cm-wk-deliverables,
.cm-wk-story-copy .cm-wk-read { grid-column: 2; }
.cm-wk-story .cm-wk-read { color: var(--wk-coral); } /* 4.92:1 at 12px/700 */
.cm-wk-deliverables {
display: grid;
gap: 13px;
margin-top: 24px;
}
.cm-wk-deliverables li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
font-size: 12px;
line-height: 1.75;
}
.cm-wk-deliverables svg {
width: 15px;
height: 15px;
margin-top: 3px;
color: var(--wk-coral); /* icon — 4.92:1, over the 3:1 of SC 1.4.11 */
}
/*
* .cm-wk-story--alt has NO declarations of its own. Its one surviving job in
* the approved design is the paper swap on the device showcase it contains
* (see DEVICE SHOWCASE); the first pass's column flip and art reorder are
* both superseded. The modifier is still worth emitting in the markup — it is
* what selects the paper — but there is nothing to style on the container.
*/
/* ===========================================================================
INDUSTRY LINKS — .cm-wk-industry
=========================================================================== */
.cm-wk-industry {
padding-block: 72px;
background: var(--wk-industry);
}
.cm-wk-industry-head {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 40px;
margin-bottom: 35px;
}
.cm-wk-industry h2 {
max-width: 18ch;
margin-top: 18px;
font-size: clamp(30px, 4vw, 50px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.05em;
}
.cm-wk-industry-head > p {
max-width: 47ch;
font-size: 14px;
line-height: 1.9;
color: var(--wk-industry-fg); /* 6.00:1 on the band — passes */
}
.cm-wk-industry-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.cm-wk-industry-link {
display: grid;
grid-template-columns: 1fr 24px;
gap: 15px;
padding-top: 22px;
border-top: 2px solid var(--wk-ink);
}
.cm-wk-industry-link h3 {
font-size: 22px;
font-weight: 700;
letter-spacing: -.03em;
}
.cm-wk-industry-link p {
max-width: 50ch;
margin-top: 10px;
font-size: 12px;
line-height: 1.85;
color: var(--wk-industry-fg); /* 6.00:1 */
}
.cm-wk-industry-link > svg {
width: 22px;
height: 22px;
}
/* ===========================================================================
THE COLLECTION — .cm-wk-collection
=========================================================================== */
.cm-wk-collection {
padding-block: 78px;
scroll-margin-top: 100px; /* target of the hero's "Explore all N" jump */
}
.cm-wk-collection-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 25px;
margin-bottom: 30px;
}
.cm-wk-collection-heading h2 {
margin-top: 17px;
font-size: clamp(34px, 4.6vw, 62px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.055em;
}
.cm-wk-collection-heading sup {
margin-left: 10px;
font-size: 15px;
vertical-align: super;
letter-spacing: 0;
color: var(--wk-deep); /* 6.18:1 on cream — passes */
}
.cm-wk-collection-note {
max-width: 30ch;
font-size: 12px;
line-height: 1.8;
color: var(--wk-muted); /* 5.49:1 on cream — passes */
}
/* ---------------------------------------------------------------------------
FILTER PANEL
Four cells: search, detail select, year select, reset. The controls are the
theme's .cm-field / .cm-input primitives, re-skinned to the reference's
square, warmer treatment.
-------------------------------------------------------------------------- */
.cm-wk-filters {
display: grid;
grid-template-columns: 1.6fr 1fr .7fr auto;
align-items: end;
gap: 18px;
padding: 25px;
background: var(--wk-panel);
}
.cm-wk-filters .cm-field { gap: 8px; }
.cm-wk-filters .cm-field label {
font-size: 11px;
font-weight: 700;
}
/*
* background-COLOR, not the `background` shorthand the reference used: a
* select on this page may also carry .cm-pf-select, whose affordance is a
* background-image chevron, and the shorthand would have silently wiped it.
*
* border-color CORRECTED: the reference's rgb(185,168,153) is 2.14:1 against
* the field ground and 1.75:1 against the panel behind it. A field's border
* is the only thing that says "there is an input here", which is what SC
* 1.4.11 covers. --wk-edge is 5.12:1 and 4.18:1. Width and style stay the
* theme's 1.5px solid.
*/
.cm-wk-filters .cm-input {
min-height: 48px;
border-radius: 0;
border-color: var(--wk-edge);
background-color: var(--wk-field);
font-size: 13px;
}
/*
* THE SELECTS NEED A DRAWN CHEVRON. The reference keeps the native one, but
* this theme cannot: style.css:11300 carries `select { -webkit-appearance:
* none; -moz-appearance: none }` plus `select::-ms-expand { display: none }`
* at (0,0,1), so the UA arrow is already gone site-wide. The theme's one
* replacement is .cm-pf-select's background-image chevron, and the gallery's
* two selects (#cm-wk-show, #cm-wk-year) carry .cm-input only — so without
* this rule "Project detail" and "Published" render as plain bordered boxes
* with nothing to say they open a list.
*
* Same mechanism as .cm-pf-select (cm-interior.css:476), re-stroked in this
* page's own --wk-edge instead of --cm26-stone's #6b6460. The hex has to be
* literal: a data: URI cannot read a custom property. Keep it in sync with
* --wk-edge — 5.12:1 on the field ground, well over the 3:1 SC 1.4.11 asks of
* a control's affordance.
*
* Longhands, never the `background` shorthand: --wk-field above is set as
* background-color precisely so the two compose instead of wiping each other.
*/
.cm-wk-filters select.cm-input {
appearance: none;
-webkit-appearance: none;
padding-right: 38px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a6554' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.cm-wk-search { position: relative; }
.cm-wk-search svg {
position: absolute;
top: 16px; /* (48px field - 16px icon) / 2 */
left: 13px;
width: 16px;
height: 16px;
pointer-events: none;
}
.cm-wk-search .cm-input { padding-left: 39px; }
/* A real link back to the unfiltered URL, so it works with JS off. A link
cannot match :disabled, so the inactive state below also keys off
aria-disabled="true" — that is the only way to render the reference's
greyed-out reset without JavaScript. */
.cm-wk-reset {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 48px;
padding-inline: 15px;
border: 1px solid var(--wk-edge); /* CORRECTED, see --wk-edge */
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.cm-wk-reset svg {
flex: none;
width: 14px;
height: 14px;
}
/* The label composites to 2.85:1 on the panel at half opacity. Left as the
reference has it: SC 1.4.3 places no contrast requirement on an inactive
user-interface component, and dimming is what signals the state. */
.cm-wk-reset:disabled,
.cm-wk-reset[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
}
.cm-wk-reset:not(:disabled):not([aria-disabled="true"]):hover {
background-color: var(--wk-reset-hover);
}
.cm-wk-results {
display: flex;
justify-content: space-between;
gap: 16px;
padding-block: 23px 30px;
font-size: 11px;
color: var(--wk-muted); /* 5.49:1 on cream — passes */
}
.cm-wk-results > span {
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
}
/* ---------------------------------------------------------------------------
PROJECT GRID
-------------------------------------------------------------------------- */
.cm-wk-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 42px 32px;
}
.cm-wk-card {
min-width: 0;
padding-bottom: 25px;
/* 1.46:1 on cream. Measured and deliberately left: a separator under a
card is decoration, and the card is identified by its art and title,
not by this line — SC 1.4.11 exempts it. */
border-bottom: 1px solid var(--wk-rule);
}
.cm-wk-card-link { display: block; }
.cm-wk-card-art {
display: grid;
place-items: center;
aspect-ratio: 1.85 / 1;
padding: 22px;
overflow: hidden;
background: var(--wk-art-1);
}
/* The reference tints every second and third card of each run of four, so a
long grid does not read as one flat colour. nth-child counts GRID children,
so .cm-wk-grid must contain nothing but cards or the rotation shifts. */
.cm-wk-card:nth-child(4n+2) .cm-wk-card-art { background: var(--wk-art-2); }
.cm-wk-card:nth-child(4n+3) .cm-wk-card-art { background: var(--wk-art-3); }
.cm-wk .cm-wk-card-art img {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
}
.cm-wk-card-art .cm-wk-ph {
min-height: 0;
font-size: 22px;
}
.cm-wk-card-topline {
display: flex;
justify-content: space-between;
gap: 14px;
padding-block: 17px 9px;
font-size: 9px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--wk-muted); /* 5.49:1 on cream — passes */
}
.cm-wk-card-title {
display: flex;
align-items: start;
justify-content: space-between;
gap: 15px;
}
.cm-wk-card h3 {
font-size: clamp(19px, 2vw, 25px);
font-weight: 700;
line-height: 1.25;
letter-spacing: -.035em;
}
.cm-wk-card-arrow {
display: grid;
place-items: center;
flex-shrink: 0;
width: 30px;
height: 30px;
background: var(--wk-ink);
color: var(--wk-cream);
}
.cm-wk-card-arrow svg {
width: 16px;
height: 16px;
}
.cm-wk a:hover .cm-wk-card-arrow { background: var(--wk-deep); }
.cm-wk-card-copy {
max-width: 64ch;
margin-top: 12px;
font-size: 12px;
line-height: 1.8;
color: var(--wk-muted); /* 5.49:1 on cream — passes */
}
.cm-wk-empty {
padding: 70px 25px;
border: 1px solid var(--wk-rule); /* decorative frame, see .cm-wk-card */
text-align: center;
}
.cm-wk-empty > svg { margin: 0 auto 20px; }
.cm-wk-empty h3 {
font-size: 25px;
font-weight: 700;
}
.cm-wk-empty p {
margin-block: 12px 22px;
font-size: 14px;
}
/* The reference's pagination is this theme's .cm-pagination, which already
matches it (48px top margin, 40px rounded cells). Only the extra 30px of
inner lead is ours to add. */
.cm-wk .cm-pagination { padding-top: 30px; }
/* ===========================================================================
FINALE — .cm-wk-finale
The button is