@n8mills/design-tokens 1.0.0

package/components.css

@@ -0,0 +1,943 @@
+/* =========================================================================
+   portfolio / components.css
+   ---------------------------------------------------------------------------
+   The component layer of the three-tier token system. Reads SEMANTIC tokens
+   from tokens.css (--color-*, --brand-*, --font-*, --space-*, --radius-*,
+   --duration-*) and never raw primitives (--neutral-*, --green-*).
+
+   Every component below has:
+     - A base class with semantic naming.
+     - Optional modifier classes for variants.
+     - A short comment block explaining the role and any unusual decision.
+     - A live sample in the under-the-hood "Components" section.
+
+   See docs/design-system.md section 9 for the component inventory and
+   contribution rules. See tokens.css for the primitive + semantic layers.
+   ========================================================================= */
+
+
+/* -----------------------------------------------------------------------------
+   Button
+   ---
+   Variants:
+     .btn               base, never used alone; the default 44px size + transition
+     .btn--primary      lime fill, ink glyph, brand-primary CTA
+     .btn--secondary    transparent fill, ink border, secondary CTA
+     .btn--icon         round, single icon glyph, hairline border
+   Sizes (opt-in modifiers that wire the --btn-* tokens; base .btn equals md):
+     .btn--sm   32px   compact: dense cards, toolbars, filters (WCAG 2.5.8 AA)
+     .btn--md   44px   the default min-height, same as base .btn (WCAG 2.5.5 AAA);
+                       note its padding is the tokenised 8px/16px while base .btn
+                       keeps 10px/18px, so the class is not a strict no-op (DC-03)
+     .btn--lg   52px   hero CTAs, primary conversion (WCAG 2.5.5 AAA)
+   States: hover lifts via translateY(-1px) on primary, lime tint on
+   icon; :active is the touch-visible press (background step, no transform,
+   hover-independent); :disabled dims and blocks the pointer;
+   prefers-reduced-motion collapses the transform. Hover fills are gated
+   behind (hover: hover) because Chromium sticks :hover after a tap;
+   :focus-visible keeps ungated duplicates so keyboard styling never
+   changes.
+   ----------------------------------------------------------------------------- */
+.btn {
+  appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--btn-gap);
+  min-height: var(--touch-target-min);
+  padding: var(--btn-pad-y) var(--btn-pad-x);
+  font-family: var(--btn-font);
+  font-size: var(--btn-font-size);
+  font-weight: var(--btn-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: var(--btn-radius);
+  border: 1px solid transparent;
+  cursor: pointer;
+  text-decoration: none;
+  transition: var(--btn-transition);
+}
+/* M-07: btn focus uses a positive 2px offset (--focus-ring-offset, +2px) so
+   the ring sits OUTSIDE the button border instead of inset (an inset ring was
+   hard to see on small icon buttons and clipped behind taller adjacent
+   content). Contexts that legitimately want an INSET ring (carousel tabs,
+   gallery thumbs, ap2-flink) set a literal outline-offset: -2px, not this
+   token. */
+.btn:focus-visible {
+  outline: 2px solid var(--btn-focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+.btn--primary {
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-fg);
+  border-color: var(--btn-primary-border);
+}
+/* Hover gated to hover-capable pointers: on touch, a tap applies and
+   STICKS :hover (Chromium), freezing the ink fill on and swallowing the
+   press cue below. The :focus-visible duplicate stays ungated so
+   keyboard users keep the exact same styling (Tesla review Group 4). */
+@media (hover: hover) {
+  .btn--primary:hover {
+    background: var(--btn-primary-bg-hover);
+    color: var(--btn-primary-fg-hover);
+    border-color: var(--btn-primary-border);
+    transform: translateY(-1px);
+  }
+}
+.btn--primary:focus-visible {
+  background: var(--btn-primary-bg-hover);
+  color: var(--btn-primary-fg-hover);
+  border-color: var(--btn-primary-border);
+  transform: translateY(-1px);
+}
+/* Touch-visible press: distinct from BOTH the lime rest and the ink
+   hover. Background step only, transform none: primary CTAs sit inside
+   the Featured scroll-snap track, where a swipe-start brushes :active
+   and a transform would flash mid-swipe. Declared after hover/focus so
+   it wins while they apply. */
+.btn--primary:active {
+  background: var(--brand-lime-dim);
+  color: var(--brand-ink);
+  border-color: var(--btn-primary-border);
+  transform: none;
+}
+.btn--secondary {
+  background: transparent;
+  color: var(--btn-secondary-fg);
+  border-color: var(--btn-secondary-border);
+}
+@media (hover: hover) {
+  .btn--secondary:hover {
+    background: var(--btn-secondary-bg-hover);
+    border-color: var(--btn-secondary-border-hover);
+  }
+}
+.btn--secondary:focus-visible {
+  background: var(--btn-secondary-bg-hover);
+  border-color: var(--btn-secondary-border-hover);
+}
+/* Press: one visible background step past the sunken hover (the press
+   grammar the old mobile-nav link used). */
+.btn--secondary:active {
+  background: var(--color-border);
+  border-color: var(--btn-secondary-border-hover);
+}
+/* Task #87: .btn--icon border bumped to --color-text-tertiary so it meets
+   WCAG 2.2 SC 1.4.11 (3:1 non-text contrast minimum against bg).
+   --color-border (~1.27:1) and --color-border-strong (~1.48:1) both fail.
+   --color-text-tertiary (--neutral-600 in light) gives ~5:1 on --color-bg.
+   Auto-flips appropriately in dark mode via the token system. The icon
+   itself is at ~10:1, so the border + icon together clearly demarcate
+   each control. */
+/* Round is the canonical icon-button shape: every real consumer (header theme /
+   menu / back controls, and the footer social marks) is a circle. This used to
+   default to a rounded square that rendered nowhere but the under-the-hood demo,
+   with a #site-header override supplying the circle. The circle now lives on the
+   component itself, so there is one source of truth and the demo cannot drift. */
+.btn--icon {
+  width: var(--touch-target-min);
+  height: var(--touch-target-min);
+  padding: 0;
+  border-radius: var(--btn-radius);
+  border-color: var(--btn-icon-border);
+  background: transparent;
+  color: var(--btn-icon-fg);
+}
+/* Mobile button rule (design-system.md section 9, Button behaviour).
+   Section-level primary CTAs (featured-card Read the case study / View on
+   Figma, the under-the-hood teaser Explore the design system, and the
+   accessibility-card See the full design system) expand to full width on
+   mobile for a thumb-friendly tap area. Inline buttons (in-flow inside
+   paragraphs) stay auto-width. This list is the single registry the mobile
+   full-width gate checks (portfolio/tokens/mobile-consistency-lint.mjs); add
+   a new section CTA here and to that gate's registry together. */
+@media (max-width: 768px) {
+  .feat-cta-corner .btn,
+  .dsc-cta,
+  .ap2-cta {
+    width: 100%;
+    justify-content: center;
+  }
+}
+@media (hover: hover) {
+  .btn--icon:hover {
+    background: var(--btn-primary-bg);
+    color: var(--btn-primary-fg);
+    border-color: var(--btn-primary-border);
+  }
+}
+.btn--icon:focus-visible {
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-fg);
+  border-color: var(--btn-primary-border);
+}
+/* Press: lime-dim step so the tap reads even where the lime hover fill
+   never fires (touch). Scoped colour: the dark-header override in
+   sections.css carries the matching :active companion. */
+.btn--icon:active {
+  background: var(--brand-lime-dim);
+  color: var(--btn-primary-fg);
+  border-color: var(--btn-primary-border);
+}
+/* Shared icon sizing for Lucide glyphs inside any .btn (arrow, external-link,
+   download). Keeps icon-plus-text CTAs consistent without per-CTA overrides. */
+.btn i,
+.btn svg {
+  width: var(--btn-glyph);
+  height: var(--btn-glyph);
+  flex-shrink: 0;
+}
+/* Size modifiers. Wire the --btn-* tokens. Base .btn is the 44px default (= md),
+   so unmodified buttons are unchanged; opt in to --sm for dense UI or --lg for
+   hero CTAs. min-height sets the height, padding scales the hit area, and the
+   glyph nudges down at --sm and up at --lg. Every size clears WCAG 2.5.8 AA
+   (24px); md and lg also clear the 2.5.5 AAA 44px enhanced target. */
+.btn--sm { min-height: var(--btn-sm); padding: var(--space-1) var(--space-3); font-size: var(--size-xs); gap: var(--space-1); }
+.btn--md { min-height: var(--btn-md); padding: var(--space-2) var(--space-4); font-size: var(--size-sm); }
+.btn--lg { min-height: var(--btn-lg); padding: var(--space-3) var(--space-5); font-size: var(--size-base); }
+.btn--sm i,
+.btn--sm svg { width: var(--btn-glyph-sm); height: var(--btn-glyph-sm); }
+.btn--lg i,
+.btn--lg svg { width: var(--btn-glyph-lg); height: var(--btn-glyph-lg); }
+/* Icon-only buttons stay 1:1 at every size; the full radius keeps them circular. */
+.btn--icon.btn--sm { width: var(--btn-sm); height: var(--btn-sm); padding: 0; }
+.btn--icon.btn--md { width: var(--btn-md); height: var(--btn-md); padding: 0; }
+.btn--icon.btn--lg { width: var(--btn-lg); height: var(--btn-lg); padding: 0; }
+
+/* Disabled. A real resting state (previously unstyled): dimmed, no pointer, no
+   hover lift. Disabled controls are exempt from WCAG 1.4.3 contrast, so the
+   dimmed glyph is acceptable. Covers <button disabled> and the .is-disabled
+   hook for elements (links) that cannot carry the native attribute. */
+.btn:disabled,
+.btn[disabled],
+.btn.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+  transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn { transition: none; }
+  .btn--primary:hover,
+  .btn--primary:focus-visible { transform: none; }
+}
+
+
+/* -----------------------------------------------------------------------------
+   Card
+   ---
+   .card                base, hairline border, soft radius, off-white surface
+   .card--dark          dark-surface variant for dark slabs (ink bg, on-ink text)
+   ----------------------------------------------------------------------------- */
+.card {
+  background: var(--card-bg);
+  border: var(--card-border);
+  border-radius: var(--card-radius);
+  padding: var(--card-padding);
+  color: var(--card-fg);
+}
+
+.card--dark {
+  background: var(--card-dark-bg);
+  color: var(--card-dark-fg);
+  border-color: var(--card-dark-border);
+}
+
+/* -----------------------------------------------------------------------------
+   Card variants (W48)
+   ---
+   The frame (surface, border, radius, padding) always renders; variants change
+   only the inset or the inner content. Hover lives ONLY on .card--interactive:
+   static cards keep the resting outline (the card hover taxonomy; guarded by
+   tokens/card-surface-lint.mjs rule 4).
+     .card--compact / --spacious   padding tiers (16 / 32; base is standard 24)
+     .card--interactive            clickable: pair with a real <a>/<button>
+     .card--empty / --error        a centred message, frame still renders
+     .card--loading                a skeleton matching card proportions
+   ----------------------------------------------------------------------------- */
+
+/* A card rendered as a link keeps the card's own foreground (so a theme-pinned
+   card stays readable) and drops the underline. Using `inherit` here let the link
+   pull the page text colour instead, which failed contrast on a light-pinned card
+   in dark mode (.card--interactive title/body, caught by the WCAG gate). */
+a.card { color: var(--card-fg); text-decoration: none; }
+
+/* Padding tiers: the --card-pad-* tokens as a modifier API (base = standard). */
+.card--compact  { padding: var(--card-pad-compact); }
+.card--spacious { padding: var(--card-pad-spacious); }
+
+/* Interactive: the one clickable-card hover, generalised from the role /
+   testimonial hover. Border strengthens; the card lifts 2px on a fine pointer,
+   dropped under reduced motion. */
+.card--interactive {
+  cursor: pointer;
+  transition: border-color var(--duration-base) var(--ease-default),
+              transform var(--duration-base) var(--ease-default);
+}
+.card--interactive:hover,
+.card--interactive:focus-within { border-color: var(--color-border-strong); }
+.card--interactive:focus-visible { outline: var(--border-focus); outline-offset: 3px; }
+/* Touch-visible press: background step, no transform (cards can sit in
+   scroll-snap tracks where a swipe-start brushes :active). The hover
+   above is border-only (no fill flip), so it stays ungated. */
+.card--interactive:active {
+  border-color: var(--color-border-strong);
+  background: var(--color-surface-sunken);
+}
+@media (hover: hover) and (pointer: fine) {
+  .card--interactive:hover,
+  .card--interactive:focus-within { transform: translateY(-2px); }
+}
+
+/* Content states. Empty and error centre a message so the card is never a blank
+   box; loading shows a skeleton sized to the card. */
+.card--empty,
+.card--error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  min-height: 132px;
+  text-align: center;
+}
+.card--empty i[data-lucide],
+.card--error i[data-lucide] { width: 24px; height: 24px; color: var(--color-text-tertiary); }
+.card-state-msg  { margin: 0; font-size: var(--size-sm); color: var(--color-text-secondary); }
+.card-state-hint { margin: 0; font-size: var(--text-caption); color: var(--color-text-tertiary); line-height: var(--line-body); }
+
+/* Loading skeleton: a media block plus title and body lines on the sunken
+   surface. The shimmer sweep auto-disables under reduced motion, leaving static
+   blocks that still read as loading. */
+.card--loading { display: flex; flex-direction: column; gap: var(--space-3); }
+.card-skel {
+  position: relative;
+  overflow: hidden;
+  background: var(--color-surface-sunken);
+  border-radius: var(--radius-sm);
+}
+.card-skel--media { height: 92px; }
+.card-skel--title { height: 18px; width: 55%; }
+.card-skel--line  { height: 12px; }
+.card-skel--line.is-short { width: 78%; }
+.card-skel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgb(var(--brand-ink-rgb) / 0.06), transparent);
+  animation: card-skel-sweep 1.4s var(--ease-default) infinite;
+}
+@keyframes card-skel-sweep { to { transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) {
+  .card-skel::after { display: none; }
+}
+
+
+/* -----------------------------------------------------------------------------
+   Chip / Tag
+   ---
+   Used for skill tags, technology badges, status pills. Smaller and lighter
+   than a button, no interactivity expected.
+     .chip              ink ring on subtle bg
+   ----------------------------------------------------------------------------- */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chip-gap);
+  padding: var(--chip-pad-y) var(--chip-pad-x);
+  font-family: var(--chip-font);
+  font-feature-settings: var(--font-feature-mono);
+  font-size: var(--chip-font-size);
+  line-height: var(--chip-line);
+  font-weight: var(--chip-font-weight);
+  color: var(--chip-fg);
+  background: var(--chip-bg);
+  border: 1px solid var(--chip-border);
+  border-radius: var(--chip-radius);
+}
+.chip i[data-lucide],
+.chip svg[data-lucide],
+.chip svg.lucide {
+  width: var(--chip-icon-size);
+  height: var(--chip-icon-size);
+  flex: 0 0 var(--chip-icon-size);
+  display: block;
+  color: var(--chip-fg);
+  stroke-width: 2;
+}
+/* Sandbox cherry-pick: normalizer wrapper for chips that need a raster or
+   SVG-image icon instead of a Lucide stroke icon (e.g. brand logos). Pair
+   it with `<span class="chip-icon"><img|svg ...></span>` so brand marks
+   render at the same 14x14 footprint as Lucide icons. */
+.chip .chip-icon {
+  width: var(--chip-icon-size);
+  height: var(--chip-icon-size);
+  flex: 0 0 var(--chip-icon-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.chip .chip-icon > img,
+.chip .chip-icon > svg {
+  width: var(--chip-icon-size);
+  height: var(--chip-icon-size);
+  display: block;
+  object-fit: contain;
+}
+.chip:hover {
+  border-color: var(--chip-border-hover);
+}
+/* (No .chip:active: every chip in the site is a non-interactive <span>
+   label; the old :active here was a visual no-op that read as a press
+   precedent. Removed in the Tesla-review pressed-state pass.) */
+
+/* -----------------------------------------------------------------------------
+   Badge — a read-only status or count pill. Not interactive (no hover/focus).
+   ---
+   A badge reports a STATUS (In progress, Live at scale, In production) or a count;
+   a chip carries a LABEL. Quiet hairline outline, secondary mono text, sentence
+   case. An optional brand-lime status dot via .badge__dot, or a leading Lucide
+   icon. Consumed by the skills discipline statuses. (The hero "Available for work"
+   is a one-off, not a badge: it has no outline, just text and a pulsing dot.)
+     .badge            hairline ring, quiet secondary text, mono, sentence case
+     .badge__dot       leading brand-lime status dot
+   ----------------------------------------------------------------------------- */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--badge-gap);
+  padding: var(--badge-pad-y) var(--badge-pad-x);
+  font-family: var(--badge-font);
+  font-feature-settings: var(--font-feature-mono);
+  font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  color: var(--badge-fg);
+  background: transparent;
+  border: 1px solid var(--badge-border);
+  border-radius: var(--badge-radius);
+  white-space: nowrap;
+}
+.badge i[data-lucide],
+.badge svg[data-lucide],
+.badge svg.lucide {
+  width: var(--badge-icon-size);
+  height: var(--badge-icon-size);
+  flex: 0 0 var(--badge-icon-size);
+  display: block;
+  color: var(--badge-fg);
+  stroke-width: 2;
+}
+.badge__dot {
+  width: var(--badge-dot-size);
+  height: var(--badge-dot-size);
+  flex: 0 0 var(--badge-dot-size);
+  border-radius: var(--radius-full);
+  background: var(--badge-dot);
+}
+
+
+/* -----------------------------------------------------------------------------
+   Avatar
+   ---
+   .avatar              round, sized via --size class, lime ring on hover
+   ----------------------------------------------------------------------------- */
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--touch-target-min);
+  height: var(--touch-target-min);
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--color-surface-sunken);
+  border: 2px solid var(--color-border);
+  flex-shrink: 0;
+  transition: border-color var(--duration-fast) var(--ease-default),
+              transform var(--duration-fast) var(--ease-default);
+}
+.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.avatar:hover,
+.avatar:focus-visible {
+  border-color: var(--color-border-brand);
+  transform: scale(1.04);
+}
+
+
+/* -----------------------------------------------------------------------------
+   Eyebrow + SectionHead triplet
+   ---
+   Every top-level section uses the same heading pattern:
+     p.section-label  : "Eyebrow text"
+     h2.section-title : "Main heading."
+     p.section-subtitle : "Optional supporting line."
+   (Audit C-07: example markup re-expressed as selector + text so no
+   stray placeholder h2 appears in the source.)
+   Light and dark surfaces share the same scale and weight; only colours
+   flip via .section-dark on the parent or the element itself.
+   ----------------------------------------------------------------------------- */
+.section-label {
+  font-family: var(--font-mono);
+  font-feature-settings: var(--font-feature-mono);
+  font-size: var(--text-label);
+  font-weight: var(--weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-eyebrow);
+  color: var(--color-text-tertiary);
+  margin: 0 0 var(--space-2);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  line-height: var(--chip-line);
+}
+.section-label::before {
+  content: '';
+  width: 12px;
+  height: 2px;
+  /* W39: theme-aware accent (ink in light, lime in dark). Raw lime was
+     ~1.4:1 on light surfaces, an invisible dash. Always-dark slabs keep
+     explicit lime via the .section-dark override in sections.css. */
+  background: var(--color-accent);
+  border-radius: var(--radius-sm);
+  flex: 0 0 12px;
+}
+.section-label--no-bar::before { display: none; }
+.section-label--center {
+  display: flex;
+  justify-content: center;
+}
+/* Variant: icon-led eyebrow (audit M-23, 2026-07-10). The decorative glyph is
+   sized to the label. Used by the accessibility proof card and the
+   design-system teaser, which previously each minted their own eyebrow class
+   (.ap2-eyebrow / .dsc-eyebrow) and had already drifted from the canon. */
+.section-label--icon i,
+.section-label--icon svg { width: 14px; height: 14px; flex: none; }
+/* Variant: accent-emphasis colour for eyebrows sitting on marquee cards. */
+.section-label--accent { color: var(--color-accent-emphasis); }
+
+/* Task #43: halve heading-to-body gap globally. Was var(--space-5) = 24px,
+   now var(--space-3) = 12px. Tighter rhythm across every section. */
+.section-title {
+  font-family: var(--font-display);
+  font-weight: var(--weight-extrabold);
+  font-size: var(--text-h1);
+  line-height: var(--line-display);
+  letter-spacing: var(--display-tight);
+  margin: 0 0 var(--space-3);
+  text-wrap: balance;
+  max-width: 22ch;
+  color: var(--color-text-primary);
+  font-style: normal;
+}
+/* Brand period accent. Rendered as generated content (not a DOM node) so it
+   is correctly treated as decoration: visible on screen, but invisible to the
+   accessibility tree and to scanners (which otherwise mis-flag a lime period
+   as low-contrast "text"). WCAG-clean across axe, Pa11y, IBM and WAVE. */
+.section-title::after {
+  content: ".";
+  color: var(--brand-lime);
+  text-shadow: var(--accent-period-shadow);
+}
+/* (The legacy span.dot heading rule was deleted 2026-07-10, audit M-25: the
+   last two heading spans are gone; every heading period is the ::after above.
+   The hero ticker's separator dots are a different pattern in sections.css.) */
+
+/* Task #43: tighten subtitle-to-content gap from var(--space-7) = 48px down
+   to var(--space-5) = 24px. Less wasted whitespace below every section's
+   intro paragraph before content begins. */
+.section-subtitle {
+  font-family: var(--font-body);
+  font-size: var(--text-body);
+  line-height: var(--line-body);
+  color: var(--color-text-secondary);
+  max-width: 60ch;
+  margin: 0 0 var(--space-5);
+}
+
+/* -----------------------------------------------------------------------------
+   RoleCard
+   ---
+   Timeline entry: company logo, role title, dates, bullets, tags. Light
+   variant for default surfaces, dark variant inside dark slabs.
+   ----------------------------------------------------------------------------- */
+.role-card {
+  display: grid;
+  grid-template-columns: 88px 1fr;
+  gap: var(--space-5);
+  padding: var(--space-6) 0;
+  border-top: var(--border-hairline);
+}
+.role-card:first-of-type { border-top: 0; padding-top: 0; }
+/* Audit C-27: removed .role-card__logo, .role-card__logo img, .role-card__head,
+   .role-card__company, .role-card__dates, .role-card__body, .role-card__tags.
+   These BEM modifiers had no markup consumers; visible role-card styling lives
+   in sections.css under #recent-work selectors. */
+
+
+/* -----------------------------------------------------------------------------
+   FAQRow
+   ---
+   Native <details> based. Click summary to expand, no JS required.
+   ----------------------------------------------------------------------------- */
+/* Task #229: the border-bottom that used to live here stacked with the
+   #faq .faq-list > li { border-bottom } rule further down. Two 1 px
+   hairlines rendered 1 px apart between every row, reading as a doubled
+   line. The list-li rule is canonical; this one was redundant. */
+.faq-row {
+  /* border handled by #faq .faq-list > li */
+}
+/* Audit C-28: removed .faq-row__summary, .faq-row__summary::-webkit-details-marker,
+   .faq-row__summary::after, .faq-row[open] .faq-row__summary::after, .faq-row__body.
+   These BEM modifiers had no markup consumers; visible FAQ toggle styling lives
+   in sections.css under #faq selectors. */
+
+
+/* -----------------------------------------------------------------------------
+   Visually hidden (utility, not a component but used everywhere)
+   ----------------------------------------------------------------------------- */
+.sr-only:not(:focus):not(:active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* ============================================================
+   Mobile carousel component (.ds-carousel)
+   Opt in by adding `ds-carousel` + `data-ds-carousel` to a grid
+   container. Below 768px the container becomes a swipeable
+   scroll-snap track (one card per view) with a single row of dots
+   (built by the ds-carousel init in index.html). At 769px and up it
+   is inert and the container keeps its own grid layout. Dots + swipe
+   only, no arrows. Selector note (audit AR-06): the section grid rules
+   used to live behind raw #id scopes that only !important could beat;
+   they are now flattened to [id="..."] attribute selectors (class tier,
+   no :where() involved), and this component wins with its own honest
+   specificity, the class plus the data-ds-carousel opt-in
+   attribute (0,2,0), which also outranks the container layout rule
+   `main > section.container-* > *` (0,1,2). No !important needed.
+   ============================================================ */
+@media (max-width: 768px) {
+  /* Base carousel chrome at the component's natural specificity, so
+     section-scoped rules (now [id=...] class-tier) can still tune margins
+     and spacing the way they always did. */
+  .ds-carousel[data-ds-carousel] {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    /* Full-bleed the scroll track to the screen edges so a card slides off the
+       viewport edge instead of vanishing at the section gutter. The negative
+       inline margin cancels the section's var(--space-4) gutter (which is the
+       full gutter at <=768px); padding-inline + scroll-padding-inline re-inset
+       the cards so they rest and snap aligned to that gutter. Card width
+       (flex: 0 0 100%) is unchanged because 100% now resolves against the
+       padded content box, so it stays one card per view with no next-card peek.
+       padding-block plus a matching negative margin-block gives vertical room
+       so a card's hover lift + shadow are not clipped by overflow-y, which is
+       forced to clip here because overflow-x is auto (CSS does not allow one
+       axis to scroll while the other stays visible). Net vertical footprint is
+       unchanged. */
+    padding-inline: var(--space-4);
+    scroll-padding-inline: var(--space-4);
+    padding-block: var(--space-3);
+    margin-block: calc(var(--space-3) * -1);
+  }
+  /* The doubled attribute is a deliberate specificity bump (0,3,0), carrying
+     exactly the declarations that used to be !important: the carousel layout
+     must beat the [id=...]-scoped section grid rules (0,2,0) that load after
+     this file, and the container layout rule main > section.container-* > *
+     (0,1,3). Everything else stays at natural specificity above (AR-06). */
+  .ds-carousel[data-ds-carousel][data-ds-carousel] {
+    display: flex;
+    grid-template-columns: none;
+    flex-wrap: nowrap;
+    gap: var(--space-3);
+    /* Parent-agnostic full-bleed: force the track to the viewport width and
+       centre it on the viewport, regardless of the parent's width/max-width
+       (the #skills track is a direct .container-base child with an explicit
+       width:100%, which a negative inline margin alone only shifts, not
+       widens). width:100vw + margin-inline:calc(50% - 50vw) spans edge to edge;
+       padding-inline + scroll-padding-inline re-inset cards to the text gutter.
+       Only applies <=768px where the carousel is active; desktop is inert. */
+    width: 100vw;
+    max-width: none;
+    margin-inline: calc(50% - 50vw);
+  }
+  .ds-carousel[data-ds-carousel]::-webkit-scrollbar { display: none; }
+  .ds-carousel[data-ds-carousel] > * {
+    min-width: 0;
+    scroll-snap-align: start;
+  }
+  .ds-carousel[data-ds-carousel][data-ds-carousel] > * {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/* Pagination dots, built by the init. The dot styling is unconditional so the
+   under-the-hood showcase renders the real component at any width; live
+   carousel dot rows stay mobile-only via the display gate below (AR-01). */
+.ds-dots {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  flex-wrap: nowrap;
+  margin-top: var(--space-4);
+}
+/* WCAG 2.2 SC 2.5.8 Target Size: the visible dot stays 9px, but the button
+   itself is a 24x24 transparent hit area that centres the visual dot drawn
+   via ::before. Meets the 24px minimum without enlarging the dot visually. */
+.ds-dots button {
+  width: var(--touch-target-dot, 24px);
+  height: var(--touch-target-dot, 24px);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  flex: none;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  -webkit-tap-highlight-color: transparent;
+}
+.ds-dots button::before {
+  content: "";
+  width: 9px;
+  height: 9px;
+  border-radius: var(--radius-full);
+  background: var(--color-dot-inactive);
+  /* Active dot snaps to a pill (no width animation): the mid-grow frames read as a
+     half-formed / split pill on mobile when the active state moves mid-swipe. Colour
+     still cross-fades fast (0.1s) so the dot reads inactive or accent, never muddy. */
+  transition: background 0.1s var(--ease-linear);
+}
+.ds-dots button.is-active::before {
+  width: 26px;
+  background: var(--color-dot-active);
+}
+.ds-dots button:focus-visible {
+  /* Theme-aware ring (audit AX-06): the old hardcoded lime was 1.06:1 on the
+     light page. Always-dark bands re-scope --color-focus-ring to lime. */
+  outline: var(--border-focus);
+  outline-offset: var(--focus-ring-offset);
+  border-radius: var(--radius-full);
+}
+@media (max-width: 768px) {
+  .ds-dots { display: flex; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-carousel { scroll-behavior: auto; }
+  .ds-dots button::before { transition: none; }
+}
+
+/* ============================================================
+   Carousel nav (.ds-carousel-nav)
+   One shared desktop/tablet control for the Featured projects and
+   Testimonials carousels: a thin progress rail (position), a mono
+   "N / total" counter, and bare Lucide chevrons that flank the
+   counter. Replaces the old split arrows-left / dots-right bars.
+   The generic mobile .ds-dots component (disciplines, certifications,
+   compact testimonials) is separate and unchanged. Colours follow the
+   page theme via --color-dot-active (ink on light, lime on dark); the
+   always-dark testimonials band re-maps the tokens locally (sections.css),
+   the same way its dots already do. Rail + counter are decorative and
+   aria-hidden; position is announced via the carousels' live region.
+   ============================================================ */
+.ds-carousel-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  /* The track is a SUBTLE groove (a light line), not an inactive-dot grey:
+     a dot grey is dark enough to blur into the ink fill. The fill is the
+     accent. Both are re-mappable per band (see the testimonials override in
+     sections.css). */
+  --cn-rail-track: var(--color-border);
+  --cn-rail-fill: var(--color-dot-active);
+  /* Press circle behind the chevron glyph; re-mapped per band like the
+     rail vars (testimonials + UTH stages in sections.css). */
+  --cn-arrow-press: var(--color-surface-sunken);
+}
+.ds-carousel-nav__rail {
+  position: relative;
+  width: 96px;
+  height: 3px;
+  flex: 0 0 auto;
+  background: var(--cn-rail-track);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+.ds-carousel-nav__fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 0;
+  background: var(--cn-rail-fill);
+  border-radius: var(--radius-full);
+  transition: width var(--duration-base) var(--ease-default);
+}
+.ds-carousel-nav__pager {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+/* Bare chevron: visually small, no circle or border. A >=44px (WCAG 2.5.5
+   AAA) invisible tap area is centred on the glyph via ::before, so the arrow
+   stays an easy target without adding visible chrome. */
+.ds-carousel-nav__arrow {
+  position: relative;
+  width: var(--btn-glyph-lg);
+  height: var(--btn-glyph-lg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  border-radius: var(--radius-full);
+  transition: color var(--duration-fast) var(--ease-default);
+}
+.ds-carousel-nav__arrow::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--touch-target-min);
+  height: var(--touch-target-min);
+  transform: translate(-50%, -50%);
+}
+.ds-carousel-nav__arrow:hover { color: var(--color-text-primary); }
+.ds-carousel-nav__arrow:focus-visible {
+  outline: var(--border-focus);
+  outline-offset: var(--focus-ring-offset);
+}
+/* Touch-visible press: filled circle + full-strength glyph. Background
+   only, no transform: the arrows flank live scroll-snap tracks (Tesla
+   review Group 4). */
+.ds-carousel-nav__arrow:active:not(:disabled) {
+  background: var(--cn-arrow-press);
+  color: var(--color-text-primary);
+}
+/* Boundary state: carousels that do not loop (Featured, mobile swipe) disable
+   the arrow at each end. Dimmed + non-interactive; disabled controls are exempt
+   from WCAG 1.4.3 contrast, so the low opacity is fine. */
+.ds-carousel-nav__arrow:disabled { opacity: 0.3; cursor: default; }
+.ds-carousel-nav__arrow i,
+.ds-carousel-nav__arrow svg {
+  width: var(--btn-glyph-lg);
+  height: var(--btn-glyph-lg);
+}
+.ds-carousel-nav__count {
+  font-family: var(--font-mono);
+  font-size: var(--size-xs);
+  letter-spacing: var(--tracking-wide);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.ds-carousel-nav__count b {
+  font-weight: var(--weight-semibold);
+  color: var(--color-text-primary);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-carousel-nav__fill { transition: none; }
+}
+/* Full-width variant for the mobile swipe carousels (disciplines, certifications,
+   compact testimonials), built by the ds-carousel init in index.html: the rail
+   stretches to fill the row, the counter + chevrons sit at the end, and the whole
+   nav is hidden on desktop where those carousels are an inert grid (the swipe
+   track only exists at <=768px). Replaces the old .ds-dots row for one nav pattern
+   site-wide. */
+.ds-carousel-nav--full { display: none; width: 100%; margin-top: var(--space-4); }
+.ds-carousel-nav--full .ds-carousel-nav__rail { flex: 1; width: auto; }
+@media (max-width: 768px) {
+  .ds-carousel-nav--full { display: flex; }
+}
+
+/* =========================================================================
+   Relocated from tokens.css (2026-06-02): these are COMPONENTS, not tokens.
+   tokens.css is now generated from tokens.json, so component rules live here.
+   ========================================================================= */
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  min-height: 200px;
+  padding: var(--space-6);
+  background: var(--color-surface);
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-tertiary);
+  text-align: center;
+  font-family: var(--font-body);
+  font-size: var(--size-sm);
+}
+.placeholder i[data-lucide],
+.placeholder svg {
+  width: 48px;
+  height: 48px;
+  color: var(--color-text-tertiary);
+  opacity: 0.5;
+}
+.placeholder-label {
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--color-text-secondary);
+}
+.placeholder-hint {
+  font-size: var(--text-caption);
+  color: var(--color-text-tertiary);
+  opacity: 0.7;
+  max-width: 280px;
+  line-height: var(--line-body);
+}
+.placeholder--gallery { min-height: 320px; }
+
+/* Audit M-49: contexts that need an INSET focus ring because their parent
+   uses overflow:hidden. Negative offset keeps the 2px halo painted INSIDE
+   the element rather than clipped away. */
+.glb-thumb:focus-visible,
+.full-track .f-card:focus-visible {
+  outline-offset: -2px;
+}
+
+/* ============================================================
+   Fractional-DPR outline crispness (Tesla review Group 2, 2026-07-02).
+   On screens whose devicePixelRatio is fractional (Windows laptops at
+   125%/150% scaling report 1.25/1.5; the Tesla Model Y L 16in screen
+   measures 1.333 in-car), a 1px border maps onto one-and-a-fraction
+   physical pixels and anti-aliases into an uneven, fractured line.
+   A whole 2px keeps control outlines crisp in that window; true 1x
+   and integer 2x (Retina) screens are excluded and keep the 1px look.
+   Deliberate trade-offs:
+   - Desktop browser zoom (roughly 110-175% on a 1x screen) also lands
+     in the window, so outlines thicken while zoomed. Accepted.
+   - Controls only: cards and dividers stay 1px (the --border-hairline
+     composite is NOT touched; it has ~44 consumers).
+   - Bumping the BASE .btn is deliberate: border-box keeps geometry
+     stable, the primary's lime-on-lime border stays invisible, and
+     side-by-side primary + secondary CTAs keep identical text metrics.
+   - Any later `border:` SHORTHAND on these controls silently resets
+     the width inside this window; override with border-color /
+     border-style instead.
+   min/max-resolution dppx form (not range syntax) for Safari reach. */
+@media (min-resolution: 1.1dppx) and (max-resolution: 1.9dppx) {
+  .btn,
+  .chip,
+  .badge {
+    border-width: 2px;
+  }
+}