/* ============================================================================= Work grid cards — stack strip, direct actions, and the in-place "Why" panel. Written to the grid's existing vocabulary, not a generic card idiom: - squared corners; the archive has no border-radius anywhere - monospace uppercase micro-type with letter-spacing, like .kicker, .status, .card-heading > span and .filters button - 1px hairline rules in ink - wine as a flat fill for the primary state, exactly as .filters button[aria-pressed="true"] already does The one deliberate deviation: the archive sets these labels at 9px, which RESPONSIVE_PRINCIPLES P1.2 identifies as a defect. Controls here sit at 12px, the documented floor. The card is no longer one big : an anchor cannot legally contain a button, and doing so breaks keyboard navigation. The media and the title are the links; the actions sit beside them as real controls. ========================================================================== */ /* --- Stack strip --------------------------------------------------------- */ /* A grid, not a wrapping flex row. auto-fit collapses the empty tracks, so a three-tool project still spreads across the full width, while an eleven-tool one wraps into even columns and its last row packs left instead of leaving one mark floating in the centre. */ .tech-stack { /* Flex, not grid. A grid's justify-content centres the whole track block, so a trailing part-row still hangs off the left edge; flex applies justify-content per wrapped line, which is the only way to centre just the last row. Fixed 96px basis keeps every mark on the same rhythm — the leftover collects as an even margin at both ends instead of stretching the columns. */ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 12px; margin: 2px 0 0; padding: 0; list-style: none; } /* Sits on its own line so the technologies below it can never be split awkwardly by a wrap (the label alone costs ~110px of the row). */ /* Each technology is a small vertical unit: mark above, name beneath. That lets the mark grow without the row running out of horizontal room. `flex: 1 1 72px` gives every technology an identical basis and an equal share of the leftover width, so the marks sit on an even rhythm regardless of how much wider "TypeScript" is than "React". Below the 72px basis the row wraps rather than crushing a name. */ .tech-stack li { flex: 0 0 96px; min-width: 0; display: flex; flex-direction: column; align-items: center; /* P3.5 — alignment re-declared for column */ gap: 7px; overflow-wrap: anywhere; color: var(--ink); font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; text-align: center; } .tech-icon { width: 30px; height: 30px; flex: 0 0 auto; /* Marks are area-normalised, so a wide wordmark renders wider than the box and needs to bleed rather than be clipped. The grid cell is ~98px, so a few pixels either side costs nothing. */ overflow: visible; fill: var(--tech-color, currentColor); } /* Tools with no official mark carry the neutral glyph instead. Dimmed a little so the row reads brand-marks-first, and so the placeholder never competes with a real logo beside it. */ .tech-stack li.is-generic { opacity: .72; } /* Marks are official multi-colour logos from devicon, whose paths carry their own fills — a path's own fill attribute beats the `fill` inherited from the , where there is no edge padding to cancel, so the same negative margin pushes it 43px past both viewport edges and puts 43px of horizontal overflow on the page at desktop (P3.1). Below 680px `html, body { overflow-x: clip }` hides it; from 681px up it is a real scrollbar. Scoped to `body >` so it only fires in the escaped position: if the footer is moved back inside `.archive` this rule stops matching and the original full-bleed margins take over again unchanged. */ body > .archive-footer { margin-inline: 0; margin-block-end: 0; max-width: 100%; } /* "All Work." is the page's main heading and was marked up as an

, leaving the route with no

at all. Promoted to h1; the archive stylesheet only ever selected h2 here. */ .archive-heading h1 { font: 700 clamp(48px, 6vw, 88px)/.82 Syne, Inter, sans-serif; letter-spacing: -.075em; margin: 12px 0 0; } @media (max-width: 680px) { .archive-heading h1 { font-size: 14vw; } }