. */
.card { background: var(--card); border: var(--border); }
/* ── assets/components/nav/nav.css ── */
/* nav — sticky top bar + mobile menu. Includes .logo (also reused in footer).
Responsive: links collapse to the burger menu below 700px. */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: var(--border); }
.navin { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.logo { font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: 14px; letter-spacing: .1em; text-decoration: none; border: var(--border-ink); padding: 5px 9px; }
.nlinks { display: flex; gap: 26px; }
.nlink { font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; color: var(--mut); }
.nlink:hover { color: var(--ink); }
.nright { display: flex; align-items: center; gap: 14px; }
.burger { display: none; background: none; border: var(--border); color: var(--ink); width: 38px; height: 38px; font-size: 16px; cursor: pointer; }
.mmenu { display: none; flex-direction: column; gap: 0; border-top: var(--border); background: var(--bg); }
.mlink { padding: 14px 24px; text-decoration: none; font-weight: var(--fw-medium); border-bottom: var(--border); }
/* mmenu contact footer — email primary, outline row, open-to-work pill */
.mfoot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 24px 18px; background: var(--soft); }
.mfoot .btn { justify-content: center; }
.mfoot-row { display: flex; gap: 8px; }
.mfoot-row .btn2 { flex: 1; justify-content: center; padding: 10px 0; background: var(--card); }
.mfoot .pill { white-space: normal; align-self: flex-start; margin-top: 2px; }
/* ≤960: links collapse to the burger (960–700 used to strand the reader
with no section nav at all) */
@media (max-width: 960px) {
.nlinks { display: none; }
.pill.navpill { display: none; }
.burger { display: flex; align-items: center; justify-content: center; }
.mmenu.open { display: flex; }
}
@media (max-width: 700px) {
.nright .btn { display: none; }
/* résumé stays in the bar as a compact bordered button, revealed with the
dock once the hero (which has its own résumé CTA) scrolls away */
.nright .rlink { display: inline-flex; align-items: center; border: var(--border); border-color: transparent; color: var(--ink); font-weight: var(--fw-semibold); font-size: 13px; white-space: nowrap; max-width: 0; padding: 8px 0; margin: 0 -14px 0 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-width .3s ease, padding .3s ease, margin .3s ease, opacity .25s ease; }
body.past-hero .nright .rlink { max-width: 120px; padding: 8px 11px; margin: 0; opacity: 1; visibility: visible; border-color: var(--ln); }
}
@media (prefers-reduced-motion: reduce) {
.nright .rlink { transition: none; }
}
/* ---- burger state + scrim (audit V-7): the icon morphs ☰ → ✕ while the
menu is open, and a scrim dims the page behind it (tap to close;
main.js wires the click). ---- */
.burger svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.burger .x-icon { display: none; }
.nav:has(.mmenu.open) .burger .h-icon { display: none; }
.nav:has(.mmenu.open) .burger .x-icon { display: block; }
.mscrim { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 5); background: rgba(20,20,18,.38);
opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
:root.dark .mscrim { background: rgba(0,0,0,.55); }
body:has(.mmenu.open) .mscrim { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .mscrim { transition: none; } }
/* ── assets/components/hero/hero.css ── */
/* hero — name block: dot-grid background, display name, sub, CTAs, status pill.
The ID-card motif is a separate component (id-card/). */
.hero { position: relative; padding: 110px 0 90px; background-image: radial-gradient(var(--ln) 1px, transparent 1px); background-size: 26px 26px; }
.hname { font-size: var(--fs-hero); font-weight: var(--fw-bold); letter-spacing: -.035em; line-height: .98; margin: 22px 0 0; text-wrap: balance; }
.hsub { font-size: clamp(16px, 1.8vw, 20px); line-height: var(--lh-snug); max-width: 680px; margin: 26px 0 0; color: var(--mut); }
.hsub .fw6 { color: var(--ink); }
.hctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; align-items: center; }
.hpill { margin-top: 30px; }
@media (max-width: 700px) {
.hero { padding: 80px 0 70px; }
}
/* ── assets/components/id-card/id-card.css ── */
/* id-card — the rotated "ID badge" motif in the hero (monogram, name, role,
barcode). Decorative; hidden below 960px. */
.motif { position: absolute; right: 24px; top: 90px; width: 270px; background: var(--card); border: var(--border-ink); transform: rotate(3deg); box-shadow: var(--shadow-block); }
.idtop { display: flex; align-items: center; justify-content: space-between; border-bottom: var(--border); padding: 10px 14px; }
.idlab { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mut); }
.idhole { width: 34px; height: 9px; border-radius: var(--radius-pill); background: var(--soft); border: var(--border); }
.idface { margin: 18px auto 0; width: 190px; height: 220px; border: 1.5px solid var(--ink); overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 38px; font-weight: var(--fw-semibold); letter-spacing: .05em; background: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--soft) 6px, var(--soft) 7px); }
/* badge headshot — light-bg photo in light mode, charcoal-bg photo in dark mode */
.idface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idface .hs-dark { display: none; }
:root.dark .idface .hs-light { display: none; }
:root.dark .idface .hs-dark { display: block; }
.idbody { padding: 14px 16px 16px; text-align: center; }
.idname { font-weight: var(--fw-bold); font-size: 16px; letter-spacing: -.01em; }
.idrole { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-top: 4px; }
.idbar { margin: 14px auto 0; height: 26px; width: 150px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 8px, transparent 8px 11px); }
.idfoot { display: flex; align-items: center; justify-content: center; gap: 7px; border-top: var(--border); padding: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
@media (max-width: 960px) {
.motif { display: none; }
}
/* ══════════════════════════════════════════════════════════════════
VISUAL REFRESH (20 Jul 2026) — static ID card for the MOBILE hero
Below 960px the draggable lanyard is hidden, so the phone hero had no
image at all. This is the same badge, parked: no physics, no JS.
══════════════════════════════════════════════════════════════════ */
#top .hero-idcard { width: 228px; background: var(--card); border: var(--border-ink); box-shadow: var(--shadow-block); transform: rotate(-2deg); margin: 30px auto 12px; display: none; }
#top .hero-idcard .idface { width: 164px; height: 176px; margin-top: 14px; }
#top .hero-idcard .idbar { height: 22px; }
/* real rule: card below 960px (inverse of the site's .motif), chip at/above 960px */
@media (max-width: 959px) { #top .hero-idcard { display: block; }
}
@media (min-width: 960px) { }
/* ── assets/components/lanyard/lanyard.css ── */
/* lanyard — the hero's ID badge hanging from a physical band (replaces the
static rotated motif). Band → flat clamp → card; 2D rope physics with
gravity, stretch and bounce lives in lanyard.js. Decorative; hidden <960px.
The card reuses the id-card component's .idtop/.idface/.idbody anatomy. */
/* Anchored so the rotation pivot — the band's origin — sits at the PAGE's very
top edge (y≈0): wrap top = nav 60px + hero padding 110px = 170px down the
page, hence top:-170px. The band passes behind the translucent sticky nav
(nav z50 > rig z2) and visibly begins at the top edge — its cut edge lives
exactly at y=0, where swing wobble (±22px·sinθ) stays hidden under the nav. */
.lan-rig { position: absolute; top: -170px; right: 24px; width: 270px; transform-origin: 135px 0; will-change: transform; z-index: 2; }
/* band: flat ink strap, hairline edges, repeating vertical wordmark.
Height is driven by JS (rope length); text clips as it stretches. */
.lan-band { position: relative; width: 44px; height: 220px; margin: 0 auto; background: var(--ink); border-left: 1px solid var(--ln); border-right: 1px solid var(--ln); overflow: hidden; }
.lan-band span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 9px; letter-spacing: .34em; text-transform: uppercase; color: var(--bg); opacity: .85; user-select: none; }
/* no dark override: the ink/bg tokens invert themselves — dark mode gets an
off-white band with near-black text, mirroring light mode's figure-ground */
/* clip: flat print-language clamp — sharp corners, ink border, offset shadow,
pill slot echoing the card's .idhole, red accent tick */
.lan-clip { position: relative; width: 68px; height: 24px; margin: -1px auto 0; background: var(--card); border: var(--border-ink); box-shadow: 3px 3px 0 var(--ln); z-index: 2; }
.lan-clip::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 7px; transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: var(--soft); border: var(--border); }
.lan-clip::after { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--acc); }
/* the card — same surface language as the old motif; slight lag rotation */
.lan-card { position: relative; margin-top: -4px; width: 270px; background: var(--card); border: var(--border-ink); box-shadow: var(--shadow-block); transform-origin: 50% -10px; will-change: transform; cursor: grab; }
.lan-card:active { cursor: grabbing; }
.lan-card, .lan-card * { touch-action: none; }
/* theme-swapped headshot */
.lan-card img.hs-light, .lan-card img.hs-dark { width: 100%; height: 100%; object-fit: cover; display: block; }
.lan-card img.hs-dark { display: none; }
:root.dark .lan-card img.hs-light { display: none; }
:root.dark .lan-card img.hs-dark { display: block; }
@media (max-width: 960px) {
.lan-rig { display: none; }
}
/* ── assets/components/stats/stats.css ── */
/* stats — four self-labelled proof tiles.
Each tile carries its own mono category kicker (.skick) above a hairline, so the
four facts read as INDEPENDENT PEERS. This is deliberate: a headline number with
smaller stats attached reads as parent → children, which implied the AI build
caused the revenue figures (explored in test-stats-block-v2.html). Equal tiles
plus per-tile category tags remove that reading entirely.
The AI tile (.stat.ai) is accented — it's the positioning bet, presented as a
parallel category rather than a result of the others.
Numbers animate via the count-up in main.js (#statsCount + data-count attrs).
4 → 2 → 1 columns as width shrinks. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--border); }
.stat { padding: 24px 22px 26px; border-right: var(--border); min-width: 0; }
.stat.last { border-right: none; }
/* category tag — tells the reader what KIND of proof this tile is */
.skick { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); padding-bottom: 12px; margin-bottom: 16px; border-bottom: var(--border); }
.stat.ai .skick { color: var(--acc); border-bottom-color: var(--acc); }
.snum { font-size: clamp(26px, 3vw, 36px); font-weight: var(--fw-bold); letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.stat.ai .snum { color: var(--acc); }
/* folded-in units ("+", "/mo") — smaller, muted, mono so the figure stays dominant.
Written into data-suffix as markup so the count-up re-renders them each frame. */
.snum .su, .snum .per { font-family: var(--font-mono); font-size: .46em; font-weight: var(--fw-medium); color: var(--mut); letter-spacing: 0; }
.slab { font-size: 12.5px; line-height: var(--lh-snug); color: var(--mut); margin-top: 12px; }
@media (max-width: 960px) {
.stats { grid-template-columns: repeat(2, 1fr); }
.stat { border-bottom: var(--border); }
.stat:nth-child(2n) { border-right: none; }
.stat:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 700px) {
.stats { grid-template-columns: 1fr; }
.stat { border-right: none; border-bottom: var(--border); }
.stat:last-child { border-bottom: none; }
}
/* ── assets/components/thread/thread.css ── */
/* thread — large editorial lead statement; .acc2 accents a key phrase. */
.thread { font-size: clamp(20px, 2.6vw, 30px); line-height: var(--lh-snug); font-weight: var(--fw-medium); letter-spacing: -.01em; max-width: 900px; text-wrap: pretty; }
.thread .acc2 { color: var(--acc); }
/* ── assets/components/flagship/flagship.css ── */
/* flagship — the big AI-build card: title/lead, metric grid (.pgrid/.pcell),
failure list (.fails/.fail), external links, honest note, pull-quote.
Composes with .card and reuses tag/ (.tags) + chip/ (.chips) in markup. */
.flag { padding: clamp(24px, 4vw, 48px); }
.ftitle { font-size: clamp(24px, 3vw, 34px); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin: 18px 0 0; }
.fline { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--mut); max-width: 720px; margin: 14px 0 0; }
/* metric grid */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ln); border: var(--border); margin-top: 30px; }
.pcell { background: var(--card); padding: 18px 16px; }
.pnum { font-family: var(--font-mono); font-size: 21px; font-weight: var(--fw-semibold); }
.plab { font-size: 12px; line-height: var(--lh-snug); color: var(--mut); margin-top: 6px; }
/* failure list */
.fails { margin-top: 36px; }
.fhead { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; }
.fail { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 16px 0; border-top: var(--border); }
.fnum { font-family: var(--font-mono); font-size: 13px; color: var(--acc-text); padding-top: 2px; }
.fttl { font-weight: var(--fw-semibold); font-size: 15px; }
.fles { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--mut); margin-top: 5px; }
.flinks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.honest { font-size: 13px; line-height: var(--lh-snug); color: var(--mut); border-left: 2px solid var(--acc); padding: 2px 0 2px 14px; margin-top: 26px; max-width: 640px; font-style: italic; }
.pull { margin: 30px 0 0; padding: 24px; background: var(--soft); }
.pq { font-size: 17px; line-height: var(--lh-snug); font-weight: var(--fw-medium); margin: 0; }
.pa { font-family: var(--font-mono); font-size: 11.5px; color: var(--mut); margin-top: 12px; }
@media (max-width: 960px) {
.pgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.pgrid { grid-template-columns: 1fr; }
}
/* #ai-failures — receipt deep-link target; clear the sticky nav on arrival */
.fails { scroll-margin-top: 96px; }
/* ── VISUAL REFRESH (20 Jul 2026) — failure cases as incident tickets ── */
/* --- QW-6 incident tickets (merged with the arch cross-highlight rows) --- */
#ai .fails-tix { margin-top: 6px; }
#ai .fails-tix .fhead { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; }
#ai .tix-row { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 16px 14px; border-top: var(--border); border-left: 2px solid var(--acc);
transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); cursor: default; }
#ai .tix-row:hover,
#ai .tix-row.hl { background: var(--soft); box-shadow: inset 3px 0 0 var(--acc); }
#ai .tix-row:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
#ai .tix-idx { font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semibold); color: var(--acc-text); padding-top: 2px; }
#ai .tix-ttl { font-weight: var(--fw-semibold); font-size: 15px; }
#ai .tix-les { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--mut); margin-top: 5px; }
#ai .tix-chip { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; background: var(--soft); color: var(--mut); border: var(--border); }
/* ── assets/components/arch/arch.css ── */
/* arch — the AI Support Resolution Agent request-path diagram.
Wide drawing ≥760px; below that a vertical reflow of the SAME topology
(lanes: markers left · column centre · escalate bypass right) so a phone
never scrolls sideways. F-markers cross-highlight with the ticket rows. */
/* ══════════════════════════════════════════════════════════════════
VISUAL REFRESH (20 Jul 2026) — failure cases as incident tickets + the architecture diagram
══════════════════════════════════════════════════════════════════ */
#ai .ai-off { display: none; }
/* --- TRUE architecture diagram (test-arch-v2, scoped) --- */
#ai .arch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 28px; padding-bottom: 6px; }
#ai .arch-svg { display: block; width: 100%; min-width: 900px; max-width: 1040px; height: auto; margin: 0 auto; }
#ai .n-box { fill: var(--card); stroke: var(--ink); stroke-width: 1.6; }
#ai .flow { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#ai .eval-frame { fill: none; stroke: var(--mut); stroke-width: 1.5; stroke-dasharray: 5 4; }
#ai .fb { fill: none; stroke: var(--mut); stroke-width: 1.4; stroke-dasharray: 4 4; stroke-linecap: round; stroke-linejoin: round; }
#ai .n-l1 { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .1em; fill: var(--ink); }
#ai .n-l2 { font-family: var(--font-mono); font-size: 8px; font-weight: var(--fw-regular); letter-spacing: .05em; fill: var(--mut); }
#ai .eval-lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-medium); letter-spacing: .12em; fill: var(--mut); }
#ai .eval-sub { font-family: var(--font-mono); font-size: 8px; letter-spacing: .05em; fill: var(--mut); }
#ai .eval-cap { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .05em; fill: var(--mut); }
#ai .bypass { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linecap: round; stroke-linejoin: round; }
#ai .bypass-head { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#ai .acc-lbl { font-family: var(--font-mono); font-size: 8.5px; font-weight: var(--fw-medium); letter-spacing: .08em; fill: var(--acc); }
#ai .pii-lbl { font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-medium); letter-spacing: .08em; fill: var(--acc); }
#ai .marker { cursor: pointer; }
#ai .marker .m-dot { fill: var(--acc); transform-box: fill-box; transform-origin: center; transition: transform var(--dur-fast,.2s) var(--ease,ease); }
#ai .marker .m-lbl { font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-medium); letter-spacing: .1em; fill: var(--mut); transition: fill var(--dur-fast,.2s) var(--ease,ease); }
#ai .marker.hl .m-dot { transform: scale(1.55); }
#ai .marker.hl .m-lbl { fill: var(--acc); }
#ai .marker:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
#ai .arch-svg:not(.arch-vert) .ln-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
#ai .arch-svg.drawn .ln-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease,ease); }
#ai .arch-svg:not(.arch-vert) .fade { opacity: 0; }
#ai .arch-svg.drawn .fade { opacity: 1; transition: opacity .5s var(--ease,ease); }
@media (prefers-reduced-motion: reduce) {
#ai .arch-svg .ln-draw { stroke-dashoffset: 0 !important; }
#ai .arch-svg .fade { opacity: 1 !important; }
#ai .arch-svg .ln-draw, #ai .arch-svg .fade { transition: none !important; }
}
#ai .arch-legend { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 22px 0 6px; display: flex; align-items: center; gap: 8px; }
#ai .arch-legend .lg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); display: inline-block; flex: 0 0 auto; }
#ai .arch-foot { margin-top: 22px; }
#ai .arch-foot p { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; letter-spacing: .04em; color: var(--mut); margin: 0 0 6px; overflow-wrap: anywhere; }
/* ── A-2 · VERTICAL REFLOW (owner's pick for mobile, 19 Jul) ──
≥760px keeps the wide diagram exactly as approved; below that it is replaced
by a top-to-bottom redraw of the same topology built on lanes (markers left,
column centre, bypass right) so nothing crosses. */
#ai .arch-vert { display: none; }
@media (max-width: 760px) {
#ai .arch-scroll { display: none; }
#ai .arch-vert {
display: block; width: 100%; min-width: 0; max-width: 320px; height: auto; margin: 18px auto 0;
}
}
/* the vertical draws its own arrowheads as separate paths — without these they
default to fill:black and vanish on dark */
#ai .flow-head { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#ai .fb-head { fill: none; stroke: var(--mut); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Staggered top-to-bottom reveal, as a PROGRESSIVE ENHANCEMENT.
The diagram is visible by default; JS adds .anim only when it can guarantee it
will also fire the reveal. Without that guard a failed observer left every node
at opacity 0 — i.e. an invisible diagram — which is a far worse failure than
simply not animating. */
#ai .arch-vert.anim .fade { opacity: 0; }
#ai .arch-vert.anim .ln-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
#ai .arch-vert.anim.drawn .fade { opacity: 1; transition: opacity .4s var(--ease) calc(var(--i, 0) * 45ms); }
#ai .arch-vert.anim.drawn .ln-draw { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease) calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) {
#ai .arch-vert.anim .fade { opacity: 1; }
#ai .arch-vert.anim .ln-draw { stroke-dashoffset: 0; }
}
/* ── assets/components/case-study/case-study.css ── */
/* case-study — 2-up grid of PM case cards: company/date meta, title,
accented result line. Composes with .card and reuses chip/. */
.cgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cs { padding: 28px; display: flex; flex-direction: column; gap: 0; }
.cmeta { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cco { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
/* the year token is atomic — the company label wraps instead (audit T-3) */
.cmeta .cco:last-child { white-space: nowrap; flex-shrink: 0; }
.cttl { font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: -.01em; margin: 14px 0 0; }
/* result line in ink; only the numerals carry accent (audit V-4) */
.cres { font-size: 14.5px; margin-top: 8px; color: var(--ink); font-weight: var(--fw-regular); }
.cres .n { font-family: var(--font-mono); font-size: .95em; color: var(--acc-text); font-weight: var(--fw-semibold); }
/* cross-team collaborator microline — same voice as .cco meta; only on cards
whose case study names the teams */
.cwith { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin: 10px 0 0; }
@media (max-width: 700px) {
.cgrid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════
VISUAL REFRESH (20 Jul 2026) — paper-clip photo (desktop) + 1:1 thumbnail (mobile), card lift, year in the footer
══════════════════════════════════════════════════════════════════ */
#work .cthumb, #work .polaroid { display: none; }
#work .cthumb { aspect-ratio: 1 / 1; overflow: hidden; border: var(--border); margin-bottom: 14px; background: var(--soft); }
#work .cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#work .polaroid img { width: 100%; height: 117px; object-fit: cover; display: block; }
/* O4: year marker relocated bottom-right (desktop polaroid state only). .cfoot
wraps the case-study link + a duplicate, aria-hidden .cyr year token — the
real .cco year inside .cmeta stays the sole screen-reader-visible copy at
all times (only visually clipped, never removed from the tree). Structural
wrapper + hidden-by-default .cyr apply everywhere so OFF / mobile markup
renders identically to before (.cyr display:none, .cfoot ≈ old .cmore spacing). */
#work .cfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 16px; }
#work .cmore { margin-top: 0; }
#work .cyr { display: none; }
/* owner: heading and impact line sat too close — open the gap (ON mode only;
OFF keeps today's 8px from case-study.css) */
#work .cres { margin-top: 14px; }
/* card 1 only: owner-approved retitle "New-player growth & early VIPs" —
matches the case study's own two-fold framing (grow the broad new-player
base AND the early-VIP inflow) and never wraps 3-deep against the
polaroid clearance. Shown in ON mode at every width for consistency;
.cttl-full (today's wording) stays for the OFF state and screen readers.
The modal keeps the full original title. */
#work .cttl-short { display: none; }
#work .cttl-full {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#work .cttl-short { display: inline; }
/* ON, mobile / coarse pointer → Option-1 visible square thumbnail */
#work .cthumb { display: block; }
/* ON, desktop + fine hover pointer → PAPER-CLIPPED (owner's pick, 19 Jul):
an accent wire clip straddles the card's top-right edge; the polaroid hangs
from it at −5° and swings to vertical on hover around the clip's grip point.
Wire sandwich: outer loop behind the photo (.wk-cb), inner leg in front
(.wk-cf) — both