/*
 * Workbench Motion — VeloCMS theme (slug: "workbench-motion")
 *
 * A full copy of ../workbench/theme.css with every selector rescoped off the
 * sibling theme's data-theme value and onto this one's, plus the cinematic
 * hero stage appended at the foot of the file. The base rules remain a 1:1
 * port of the founder's Claude-Design canvas "Workbench Theme.dc.html".
 *
 * The sibling's scope string appears NOWHERE below, comments included: a
 * stylesheet that still carries it would match nothing here and the theme
 * would render unstyled with no error at all (P-261 / P-158). The fork test
 * asserts that mechanically, so leaving it in prose would only teach the gate
 * to accept exceptions.
 *
 * "Sawdust and thread — for knitters, quilters, potters, gardeners, beekeepers."
 * Palette: forest #2F3D2E · bone #E9E2D0 · amber #C6892F · walnut #4A3728 · shell #17130E
 * Display: Bricolage Grotesque (800) · Body: Lora
 *
 * All values below are copied verbatim from the design's inline styles and the
 * 1o engineering-notes spec (color tokens, spacing/radius scale, hover table,
 * motion keyframes, mobile-drawer spec). No rounding, no reinterpretation.
 *
 * Scoped to [data-theme="workbench-motion"] (NOT main-scoped) so /shop and /products/*
 * resolve the same tokens. P-094 token bridge at the bottom.
 */

/* ═══════════════════ COLOR TOKENS (1o §1) ═══════════════════ */
[data-theme="workbench-motion"] {
  /*
   * Global Design → Bespoke-Token Theme Bridge (v2, 2026-07-18, spec
   * docs/specs/2026-07-18-global-design-bespoke-token-bridge.md §5).
   * The ROOT brand-role tokens below read `var(--vgc-<role>, <exact-default>)`.
   * The bridge (globalDesignToChromeVars) emits `--vgc-*` INLINE on the outer
   * [data-theme] wrapper ONLY when a tenant applies + customizes their brand;
   * `--vgc-*` inherit into this inner wrapper, so an applied brand repaints the
   * whole bespoke chrome. Un-applied → `--vgc-*` undefined → each token falls to
   * its verbatim default → byte-identical (zero regression). Fallbacks MUST stay
   * the exact current value. Derived/supporting tokens (hover shades, shadows,
   * paper/meta tints) are intentionally NOT bridged (§5.4 — primary-surface
   * rebrand); tokens referencing a root token (--velo-* below) re-derive for free.
   * Registry: src/lib/theme/theme-bridge-tokens.ts (audit source). AC-7: no rule
   * ASSIGNS a --vgc-* var — it exists only as the bridge's inline emission.
   */
  /* canonical (--vb-* bridge + derived) */
  --wb-forest: var(--vgc-color-primary, #2F3D2E);   /* oklch(0.36 0.03 145) — CTA/pill-active bg, dark band bg */
  --wb-bone: var(--vgc-color-background, #E9E2D0);  /* oklch(0.91 0.02 95) — page background */
  --wb-amber: var(--vgc-color-accent, #C6892F);     /* oklch(0.66 0.12 70) — fills, doodle stroke, selvage */
  --wb-walnut: var(--vgc-color-secondary, #4A3728); /* oklch(0.35 0.04 55) — secondary text, 8.5:1 on paper */
  --wb-shell: #17130E;

  /* supporting (1o §1 table) */
  --wb-ink: var(--vgc-color-foreground, #2A2118);   /* walnut-ink body text — 12.9:1 on bone */
  --wb-primary-fg: #E9E2D0;      /* text on primary (forest) — 8.8:1 AAA */
  --wb-accent-ink: #8A5A17;      /* amber for TEXT/links on bone — 4.6:1 AA */
  --wb-accent-bright: #D9A34E;   /* amber for TEXT on forest/char — 5.1:1 AA */
  --wb-cta-ink: #1F160E;         /* text on amber buttons — 6.1:1 on #C6892F AA */
  --wb-heading: var(--vgc-color-primary, #26301F);  /* display headings (forest-black) → primary family */
  --wb-meta: #6E5F4B;            /* dates/meta — 4.7:1 on bone (AA, >=12.5px only) */
  --wb-paper: #F4EFE1;           /* card surface */
  --wb-paper-deep: #E2DAC4;      /* chip bg */
  --wb-line: var(--vgc-color-neutral, #CFC5AB);     /* card/hairline border */
  --wb-primary-hover: #263226;   /* forest-deep hover */
  --wb-amber-hover: #D9A34E;     /* amber btn hover */
  --wb-char: #2A2118;            /* code-block bg (text #E9E2D0, 12.9:1) */
  --wb-footer-link: #DDD6C0;     /* footer link on forest — 7.9:1 */
  --wb-footer-meta: #B9B29C;     /* footer meta on forest */
  --wb-footer-input-border: rgba(233, 226, 208, 0.28);
  --wb-footer-input-bg: #263226;
  --wb-scrim: rgba(26, 21, 15, 0.55); /* mobile drawer scrim */
  --wb-dashed: rgba(74, 55, 40, 0.3);
  --wb-dashed-light: rgba(74, 55, 40, 0.25);
  --wb-tactile-shadow: rgba(42, 33, 24, 0.13);
  --wb-tactile-shadow-hover: rgba(42, 33, 24, 0.15);
  --wb-btn-shadow: rgba(42, 33, 24, 0.25);
  --wb-btn-shadow-amber: rgba(74, 55, 40, 0.35);

  /* fonts (registered in THEME_FONT_VARS as "workbench-motion").
     v2 bridge: --vgc-font-* wraps (never replaces) the existing chain, so an
     applied brand heading/body font wins while the theme's fallback stands
     un-applied (§5.3). */
  --wb-heading-font: var(--vgc-font-heading, var(--font-bricolage-grotesque),
    ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif);
  --wb-body-font: var(--vgc-font-body, var(--font-lora), "Iowan Old Style",
    "Palatino Linotype", Georgia, serif);
  --wb-mono-font: ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* layout scale (1o §3) */
  --wb-container: 1344px;
  --wb-gutter: 48px;
  --wb-gutter-mobile: 20px;
  --wb-prose: 680px;

  /* engine names retained for the P-094 token bridge + any shared component
     that reads --velo-bg / --velo-fg / --velo-border / --velo-accent. The
     bespoke WorkbenchMotionMobileMenu uses the --wb-* tokens directly. */
  --velo-bg: var(--wb-bone);
  --velo-fg: var(--wb-ink);
  --velo-border: var(--wb-line);
  --velo-accent: var(--wb-forest);
}

/* Body font inheritance for the whole theme surface */
[data-theme="workbench-motion"] {
  font-family: var(--wb-body-font);
  color: var(--wb-ink);
  background: var(--wb-bone);
}

/* ═══════════════════ MOTION — entrances only (1o §5) ═══════════════════ */
@keyframes wb-rise {
  from { transform: translateY(12px); }
  to   { transform: none; }
}
@keyframes wb-grow {
  from { transform: scaleX(0.6); }
  to   { transform: none; }
}

/* Opacity is never animated — SSR content is fully visible on first frame
   (P-068). 600ms cubic-bezier(.22,.68,.28,1) both, stagger 80ms, max 3
   siblings (hero copy -> CTAs -> media). No scroll-triggered JS, no loops,
   no parallax — the only persistent motion is the user-initiated hero video. */
[data-theme="workbench-motion"] .wb-anim-copy {
  animation: wb-rise 600ms cubic-bezier(0.22, 0.68, 0.28, 1) both;
}
[data-theme="workbench-motion"] .wb-anim-cta {
  animation: wb-rise 600ms cubic-bezier(0.22, 0.68, 0.28, 1) 80ms both;
}
[data-theme="workbench-motion"] .wb-anim-media {
  animation: wb-rise 600ms cubic-bezier(0.22, 0.68, 0.28, 1) 160ms both;
}
[data-theme="workbench-motion"] .wb-anim-grow {
  animation: wb-grow 600ms cubic-bezier(0.22, 0.68, 0.28, 1) both;
  transform-origin: left center;
}
[dir="rtl"] [data-theme="workbench-motion"] .wb-anim-grow {
  transform-origin: right center;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="workbench-motion"] * {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════ CHROME — sticky header ═══════════════════ */
[data-theme="workbench-motion"] .wb-header {
  background: var(--wb-bone);
  border-bottom: 1px solid var(--wb-line);
  position: sticky;
  top: 0;
  z-index: 40; /* 1o §7 z-index table */
}
/* selvage strip — symmetric pattern, direction-safe (1o §3 + §8) */
[data-theme="workbench-motion"] .wb-selvage {
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--wb-amber) 0 12px,
    var(--wb-forest) 12px 24px
  );
}
[data-theme="workbench-motion"] .wb-selvage-footer {
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--wb-amber) 0 12px,
    var(--wb-walnut) 12px 24px
  );
}
@media (max-width: 1023px) {
  [data-theme="workbench-motion"] .wb-selvage,
  [data-theme="workbench-motion"] .wb-selvage-footer {
    height: 4px;
    background-size: 20px 100%;
  }
  [data-theme="workbench-motion"] .wb-selvage {
    background: repeating-linear-gradient(
      90deg,
      var(--wb-amber) 0 10px,
      var(--wb-forest) 10px 20px
    );
  }
  [data-theme="workbench-motion"] .wb-selvage-footer {
    background: repeating-linear-gradient(
      90deg,
      var(--wb-amber) 0 10px,
      var(--wb-walnut) 10px 20px
    );
  }
}

[data-theme="workbench-motion"] .wb-nav-inner {
  max-width: var(--wb-container);
  margin: 0 auto;
  padding: 0 var(--wb-gutter);
  height: 74px;
  display: flex;
  align-items: center;
  gap: 36px;
}
[data-theme="workbench-motion"] .wb-brand {
  font-family: var(--wb-heading-font);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--wb-ink);
  text-decoration: none;
  white-space: nowrap;
}
[data-theme="workbench-motion"] .wb-nav-links {
  display: flex;
  gap: 26px;
  margin-inline-start: 6px;
}
[data-theme="workbench-motion"] .wb-nav-link {
  font-family: var(--wb-heading-font);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-walnut);
  text-decoration: none;
  transition: color 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-nav-link:hover {
  color: var(--wb-accent-ink);
}
/* active nav link — amber-ink + doodle underline (1o §7 "Contents") */
[data-theme="workbench-motion"] .wb-nav-link.is-active {
  font-weight: 700;
  color: var(--wb-accent-ink);
  padding-bottom: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M3 7C22 3 44 8 63 5 82 2 103 7 117 4' fill='none' stroke='%23C6892F' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E")
    bottom / 100% 5px no-repeat;
}
[data-theme="workbench-motion"] .wb-nav-right {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
[data-theme="workbench-motion"] .wb-icon-btn {
  color: var(--wb-walnut);
  display: grid;
  place-items: center;
  transition: color 140ms ease-out;
  position: relative;
}
[data-theme="workbench-motion"] .wb-icon-btn:hover {
  color: var(--wb-accent-ink);
}
[data-theme="workbench-motion"] .wb-cart-badge {
  position: absolute;
  top: -7px;
  inset-inline-end: -9px;
  background: var(--wb-amber);
  color: var(--wb-cta-ink);
  border-radius: 999px;
  padding: 1px 5px;
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 10.5px;
}
[data-theme="workbench-motion"] .wb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--wb-forest);
  color: var(--wb-bone);
  display: grid;
  place-items: center;
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* bespoke header cart (WorkbenchMotionCartLink) — design bag SVG + amber badge.
   Shares .wb-cart-badge geometry with the design (1a line 51). */
[data-theme="workbench-motion"] .wb-cart-link {
  position: relative;
  color: var(--wb-walnut);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: color 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-cart-link:hover {
  color: var(--wb-accent-ink);
}

/* ═══════════════════ MOBILE DRAWER (WorkbenchMotionMobileMenu, 1d) ═══════════════ */
/* hamburger trigger — hidden on desktop, shown < lg (mirrors the design 1d) */
[data-theme="workbench-motion"] .wb-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--wb-ink);
  cursor: pointer;
}
@media (max-width: 1023px) {
  [data-theme="workbench-motion"] .wb-hamburger {
    display: grid;
  }
}
/* boxed in-drawer close button (1d line 412) */
[data-theme="workbench-motion"] .wb-drawer-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--wb-line);
  border-radius: 8px;
  color: var(--wb-walnut);
  cursor: pointer;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-drawer-close:hover {
  border-color: var(--wb-walnut);
  color: var(--wb-ink);
}

/* ═══════════════════ BUTTONS / CTAs (1o §4) ═══════════════════ */
[data-theme="workbench-motion"] .wb-btn-forest {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 13px;
  background: var(--wb-forest);
  color: var(--wb-bone);
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  box-shadow: 0 3px 0 var(--wb-btn-shadow);
  cursor: pointer;
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-btn-forest:hover {
  background: var(--wb-primary-hover);
}
[data-theme="workbench-motion"] .wb-btn-forest:active {
  transform: translateY(1px);
}
/* larger hero variant */
[data-theme="workbench-motion"] .wb-btn-forest-lg {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 15px;
  background: var(--wb-forest);
  color: var(--wb-bone);
  padding: 14px 24px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 0 var(--wb-btn-shadow);
  cursor: pointer;
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-btn-forest-lg:hover {
  background: var(--wb-primary-hover);
}
[data-theme="workbench-motion"] .wb-btn-forest-lg:active {
  transform: translateY(1px);
}
[data-theme="workbench-motion"] .wb-btn-amber {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 16px;
  background: var(--wb-amber);
  color: var(--wb-cta-ink);
  border: none;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--wb-btn-shadow-amber);
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-btn-amber:hover {
  background: var(--wb-amber-hover);
}
[data-theme="workbench-motion"] .wb-btn-amber:active {
  transform: translateY(1px);
}
[data-theme="workbench-motion"] .wb-btn-amber-sm {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 13.5px;
  background: var(--wb-amber);
  color: var(--wb-cta-ink);
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-btn-amber-sm:hover {
  background: var(--wb-amber-hover);
}
[data-theme="workbench-motion"] .wb-btn-amber-sm:active {
  transform: translateY(1px);
}
/* ghost / outline */
[data-theme="workbench-motion"] .wb-btn-ghost {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 15px;
  color: var(--wb-forest);
  border: 1.5px solid rgba(74, 55, 40, 0.45);
  padding: 12.5px 24px;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-btn-ghost:hover {
  border-color: var(--wb-forest);
  color: var(--wb-heading);
}
/* filled forest pill (active category / all filter) */
[data-theme="workbench-motion"] .wb-pill-active {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 13px;
  background: var(--wb-forest);
  color: var(--wb-bone);
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
}
/* outline pill (inactive filter) */
[data-theme="workbench-motion"] .wb-pill {
  font-family: var(--wb-heading-font);
  font-weight: 600;
  font-size: 13px;
  background: var(--wb-paper);
  color: var(--wb-walnut);
  border: 1px solid var(--wb-line);
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-pill:hover {
  border-color: var(--wb-forest);
  color: var(--wb-heading);
}

/* ═══════════════════ FOCUS (all) — 1o §4 ═══════════════════ */
[data-theme="workbench-motion"] a:focus-visible,
[data-theme="workbench-motion"] button:focus-visible,
[data-theme="workbench-motion"] input:focus-visible,
[data-theme="workbench-motion"] textarea:focus-visible {
  outline: 2px solid var(--wb-amber);
  outline-offset: 2px;
}
/* inputs on forest panels focus with the bright amber (1o §4) */
[data-theme="workbench-motion"] .wb-input:focus-visible {
  outline: none;
  border-color: var(--wb-accent-bright);
}

/* ═══════════════════ IMAGE TREATMENT (hands mid-work, 1o §8) ═══════════════════ */
[data-theme="workbench-motion"] .wb-photo {
  filter: sepia(0.14) saturate(0.86) contrast(1.03);
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ═══════════════════ TACTILE EDGE (signature, 1o §3) ═══════════════════ */
/* hard down-offset only, no x-offset -> RTL-neutral */
[data-theme="workbench-motion"] .wb-card {
  background: var(--wb-paper);
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 0 -1px var(--wb-tactile-shadow);
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-theme="workbench-motion"] .wb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 -1px var(--wb-tactile-shadow-hover);
}
/* shop card also shifts border-color on hover (1o §4 "Cards") */
[data-theme="workbench-motion"] .wb-card-shop:hover {
  border-color: var(--wb-walnut);
}
[data-theme="workbench-motion"] .wb-card-title {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  color: var(--wb-heading);
}

/* category chip */
[data-theme="workbench-motion"] .wb-chip {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--wb-paper-deep);
  color: var(--wb-forest);
  padding: 4px 9px;
  border-radius: 999px;
  display: inline-block;
}
/* product-type badge on media (dark chip) */
[data-theme="workbench-motion"] .wb-badge-dark {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--wb-char);
  color: var(--wb-accent-bright);
  padding: 5px 10px;
  border-radius: 6px;
}

/* ═══════════════════ PROSE (post / page body) ═══════════════════ */
[data-theme="workbench-motion"] .wb-prose {
  font-size: 18px;
  line-height: 1.75;
  max-width: 65ch;
  color: #33291D;
}
[data-theme="workbench-motion"] .wb-prose p {
  margin: 0 0 24px;
}
[data-theme="workbench-motion"] .wb-prose h2 {
  font-family: var(--wb-heading-font);
  font-weight: 800;
  font-size: 29px;
  letter-spacing: -0.02em;
  color: var(--wb-heading);
  margin: 0 0 16px;
}
[data-theme="workbench-motion"] .wb-prose h3 {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--wb-heading);
  margin: 0 0 14px;
}
[data-theme="workbench-motion"] .wb-prose strong {
  font-weight: 700;
}
[data-theme="workbench-motion"] .wb-prose blockquote {
  margin: 0 0 32px;
  padding: 6px 0 6px 24px;
  border-inline-start: 4px solid var(--wb-amber);
  font-size: 21px;
  line-height: 1.6;
  font-style: italic;
  color: var(--wb-walnut);
}
[data-theme="workbench-motion"] .wb-prose blockquote cite,
[data-theme="workbench-motion"] .wb-prose blockquote .wb-cite {
  display: block;
  margin-top: 10px;
  font-family: var(--wb-heading-font);
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wb-accent-ink);
}
[data-theme="workbench-motion"] .wb-prose pre {
  background: var(--wb-char);
  color: var(--wb-bone);
  font-family: var(--wb-mono-font);
  font-size: 13.5px;
  line-height: 1.8;
  padding: 22px 24px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0 0 32px;
  box-shadow: 0 4px 0 -1px rgba(42, 33, 24, 0.25);
}
[data-theme="workbench-motion"] .wb-prose code {
  font-family: var(--wb-mono-font);
  font-size: 15px;
  background: var(--wb-paper-deep);
  color: var(--wb-walnut);
  padding: 2px 7px;
  border-radius: 5px;
}
[data-theme="workbench-motion"] .wb-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: 13.5px;
}
[data-theme="workbench-motion"] .wb-prose img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(74, 55, 40, 0.35);
  box-shadow: 0 5px 0 -2px rgba(42, 33, 24, 0.15);
  filter: sepia(0.14) saturate(0.86) contrast(1.03);
}
[data-theme="workbench-motion"] .wb-prose a {
  color: var(--wb-accent-ink);
}
[data-theme="workbench-motion"] .wb-prose figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--wb-meta);
  text-align: center;
}

/* doodle underline utility — inline SVG data-URI, stretches with word length,
   works in both directions (1o §8) */
[data-theme="workbench-motion"] .wb-doodle {
  padding-bottom: 0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M3 7C22 3 44 8 63 5 82 2 103 7 117 4' fill='none' stroke='%23C6892F' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E")
    bottom / 100% 9px no-repeat;
}
@media (max-width: 1023px) {
  [data-theme="workbench-motion"] .wb-doodle {
    background-size: 100% 7px;
  }
}

/* ═══════════════════ FOOTER ═══════════════════ */
[data-theme="workbench-motion"] .wb-footer {
  background: var(--wb-forest);
  color: var(--wb-bone);
  border-top: 1px solid rgba(233, 226, 208, 0.14);
}
[data-theme="workbench-motion"] .wb-footer-inner {
  max-width: var(--wb-container);
  margin: 0 auto;
  padding: 56px var(--wb-gutter) 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.5fr;
  gap: 48px;
}
@media (max-width: 1023px) {
  [data-theme="workbench-motion"] .wb-footer-inner {
    grid-template-columns: 1fr;
    padding: 36px var(--wb-gutter-mobile) 0;
    gap: 24px;
  }
}
[data-theme="workbench-motion"] .wb-footer-brand {
  font-family: var(--wb-heading-font);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
[data-theme="workbench-motion"] .wb-footer-heading {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wb-accent-bright);
}
[data-theme="workbench-motion"] .wb-footer-link {
  font-size: 14.5px;
  color: var(--wb-footer-link);
  text-decoration: none;
  transition: color 140ms ease-out;
}
[data-theme="workbench-motion"] .wb-footer-link:hover {
  color: var(--wb-accent-bright);
}
[data-theme="workbench-motion"] .wb-footer-bottom {
  max-width: var(--wb-container);
  margin: 48px auto 0;
  padding: 20px var(--wb-gutter);
  border-top: 1px solid rgba(233, 226, 208, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: var(--wb-footer-meta);
}
@media (max-width: 1023px) {
  [data-theme="workbench-motion"] .wb-footer-bottom {
    margin-top: 28px;
    padding: 16px var(--wb-gutter-mobile);
    flex-direction: column;
    gap: 4px;
  }
}

/* ═══════════════════ INPUTS (subscribe) ═══════════════════ */
[data-theme="workbench-motion"] .wb-input {
  background: var(--wb-footer-input-bg);
  border: 1px solid var(--wb-footer-input-border);
  color: var(--wb-bone);
  font-family: var(--wb-body-font);
  font-size: 14px;
  padding: 11px 14px;
  border-radius: 8px;
  outline: none;
}
[data-theme="workbench-motion"] .wb-input::placeholder {
  color: rgba(233, 226, 208, 0.55);
}

/* ═══════════════════ RESPONSIVE (mobile 390) ═══════════════════ */
/* Desktop nav + right-side collapse below lg (1024px); the bespoke
   WorkbenchMotionMobileMenu hamburger (.wb-hamburger) shows below lg. Mirror the
   design's mobile 390. */
@media (max-width: 1023px) {
  [data-theme="workbench-motion"] .wb-nav-links,
  [data-theme="workbench-motion"] .wb-nav-right {
    display: none;
  }
  [data-theme="workbench-motion"] .wb-nav-inner {
    height: 58px;
    padding: 0 12px 0 8px;
  }

  /* ─── Home hero: 2-col grid -> stacked, 58px h1 -> 35px (1c) ─── */
  [data-theme="workbench-motion"] .wb-hero-grid {
    grid-template-columns: 1fr !important;
    padding: 36px 20px 44px !important;
    gap: 18px !important;
  }
  [data-theme="workbench-motion"] .wb-hero-h1 {
    font-size: 35px !important;
    line-height: 1.05 !important;
  }
  [data-theme="workbench-motion"] .wb-hero-cta {
    flex-direction: column !important;
    width: 100%;
  }
  [data-theme="workbench-motion"] .wb-hero-cta a {
    text-align: center;
  }

  /* ─── Section gutters: 48px -> 20px (1c/1e/1k). padding-inline only
       so each section's own top/bottom padding is preserved. ─── */
  [data-theme="workbench-motion"] .wb-section-inner {
    padding-inline: 20px !important;
  }

  /* ─── Section h2 ("Latest from the journal" / "From the project
       bench"): 36px -> 26px (1c) ─── */
  [data-theme="workbench-motion"] .wb-section-h2 {
    font-size: 26px !important;
  }

  /* ─── Journal / project / blog / shop card grids: 3-col -> 1-col
       stacked list on Home (1c uses a horizontal image+text row card),
       2-col on Shop (1l) ─── */
  [data-theme="workbench-motion"] .wb-journal-grid,
  [data-theme="workbench-motion"] .wb-project-grid,
  [data-theme="workbench-motion"] .wb-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-theme="workbench-motion"] .wb-shop-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ─── Blog masthead h1 "The Journal" / Shop masthead h1 "The Shop":
       48px -> 36px (1f / 1l) ─── */
  [data-theme="workbench-motion"] .wb-listing-h1 {
    font-size: 36px !important;
  }

  /* ─── Shop masthead: on mobile the eyebrow+title stack full-width and the
       "N goods · sorted newest first" meta is dropped (1l has no count line);
       the amber-ink eyebrow shrinks 11px -> 10.5px (1l line 987) ─── */
  [data-theme="workbench-motion"] .wb-shop-masthead {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  [data-theme="workbench-motion"] .wb-shop-count {
    display: none !important;
  }

  /* ─── Post article + Page prose column: add the 20px side gutter the
       mockup uses on mobile (1h/1j — desktop has none because the outer
       canvas already insets it) ─── */
  [data-theme="workbench-motion"] .wb-article,
  [data-theme="workbench-motion"] .wb-page-main {
    padding-inline: 20px !important;
  }
  [data-theme="workbench-motion"] .wb-post-h1 {
    font-size: 31px !important;
    line-height: 1.08 !important;
  }

  /* ─── Product detail: 2-col gallery+info grid -> stacked (1n) ─── */
  [data-theme="workbench-motion"] .wb-product-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [data-theme="workbench-motion"] .wb-product-page {
    padding-inline: 20px !important;
  }
  [data-theme="workbench-motion"] .wb-product-h1 {
    font-size: 31px !important;
    line-height: 1.08 !important;
  }
}

/* wide strips never overflow the document (P-140) */
[data-theme="workbench-motion"] .wb-pill-scroll {
  overflow-x: auto;
}

/* ═══════════════════ RTL (1o §8) ═══════════════════ */
/* logical properties only across the theme (margin-inline / inset-inline /
   border-inline-start already used throughout); arrow glyphs mirror */
[dir="rtl"] [data-theme="workbench-motion"] .wb-arrow {
  display: inline-block;
  transform: scaleX(-1);
}
/* tracking breaks connected Arabic script — zero it on labels under rtl */
[dir="rtl"] [data-theme="workbench-motion"] .wb-nav-link,
[dir="rtl"] [data-theme="workbench-motion"] .wb-pill,
[dir="rtl"] [data-theme="workbench-motion"] .wb-pill-active,
[dir="rtl"] [data-theme="workbench-motion"] .wb-chip,
[dir="rtl"] [data-theme="workbench-motion"] .wb-badge-dark,
[dir="rtl"] [data-theme="workbench-motion"] .wb-footer-heading,
[dir="rtl"] [data-theme="workbench-motion"] .wb-btn-forest,
[dir="rtl"] [data-theme="workbench-motion"] .wb-btn-forest-lg,
[dir="rtl"] [data-theme="workbench-motion"] .wb-btn-amber,
[dir="rtl"] [data-theme="workbench-motion"] .wb-btn-amber-sm,
[dir="rtl"] [data-theme="workbench-motion"] .wb-btn-ghost {
  letter-spacing: 0;
}

/*
 * ═══════════════════ P-094 TOKEN BRIDGE ═══════════════════
 * The commerce archetype + shared components consume the universal
 * --vb-color-* vocabulary. Map WorkbenchMotion palette -> --vb-color-* at the
 * global [data-theme="workbench-motion"] scope (NOT main-scoped) so /shop and
 * /products/* resolve. No currentColor, no circular refs (1o §1).
 */
[data-theme="workbench-motion"] {
  /* v2 bridge (Option C): the commerce archetype (/shop, /products) reads these
     --vb-color-* directly. Redirect them to the same brand roles so an applied
     brand recolors commerce chrome coherently with the blog chrome — verbatim
     fallbacks keep un-applied byte-identical. */
  --vb-color-primary: var(--vgc-color-primary, #2F3D2E);       /* forest — CTA fill */
  --vb-color-primary-fg: var(--vgc-color-primary-fg, #E9E2D0); /* bone label on forest — 8.8:1 */
  --vb-color-bg: var(--vgc-color-background, #E9E2D0);         /* bone */
  --vb-color-fg: var(--vgc-color-foreground, #2A2118);         /* walnut-ink — 12.9:1 on bone */
  --vb-color-accent: var(--vgc-color-accent, #C6892F);         /* amber */
}

/* ═══════════════════ CINEMATIC HERO STAGE (workbench-motion only) ═══════════
 *
 * The whole reason this theme exists as a fork. The scene is the STAGE, full
 * bleed, and the page's own beats choreograph onto it as the reader scrolls —
 * one input, two outputs. A clip that merely scrubs is the failure case the
 * founder named, so nothing below animates the video alone.
 *
 * Every rule keys off ONE attribute: `data-choreo="on"`, set by
 * WorkbenchMotionHeroJourney after mount and only when motion is allowed.
 * Without it — on the server, at first paint, for a reduced-motion visitor,
 * and for every tenant who has not set a clip — the acts are in normal flow at
 * opacity 1 and the stage is a plain full-bleed poster hero. That default IS
 * the SSR output, so there is no second code path to keep honest (P-068), and
 * a reduced-motion visitor never sees a frame of dead scroll before hydration.
 *
 * P-276: nothing here sets `overflow-x: hidden` on an ancestor of the sticky
 * stage. `hidden` computes overflow-y to `auto`, which makes the element a
 * scroll container and silently turns every `position: sticky` descendant
 * static — with getComputedStyle still cheerfully reporting `sticky`. The home
 * layout's root uses `overflow-x: clip`, which clips the same overflow without
 * establishing a scrollport.
 */

/* Shell = the scroll travel. Height only exists while choreography is on. */
[data-theme="workbench-motion"] .wbm-shell {
  position: relative;
}
[data-theme="workbench-motion"] .wbm-shell[data-choreo="on"] {
  height: var(--wbm-travel, 360vh);
}

/* Stage = what the reader sees. Static by default; pinned directly under the
   sticky header while the shell scrolls past it. Content is anchored to the
   BOTTOM, which is both the cinematic composition and the legibility
   decision — the scrim is heaviest there.

   The 80px / 63px offsets are MEASURED, not assumed: .wb-header resolves to
   80px at >=1024px and 63px below it (nav row + the 5px selvage strip + the
   hairline border), read off the rendered page at both breakpoints on
   2026-07-30. The first draft inherited 74/58 from a sibling and quietly
   tucked six pixels of the scene behind the header. */
[data-theme="workbench-motion"] .wbm-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - 80px);
  padding: 120px 48px 88px;
  overflow: hidden;
  background: var(--wb-shell);
  color: var(--wb-bone);
}
[data-theme="workbench-motion"] .wbm-shell[data-choreo="on"] .wbm-stage {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  min-height: 0;
}

/* ─── the scene ─── */
[data-theme="workbench-motion"] .wbm-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
[data-theme="workbench-motion"] .wbm-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The theme's own photographic grade, so the scene belongs to the same world
   as the journal cards rather than reading as a cinema screen dropped in. */
[data-theme="workbench-motion"] .wbm-poster,
[data-theme="workbench-motion"] .wbm-video {
  filter: sepia(0.14) saturate(0.86);
}
/* Scroll is the only thing that moves it — never offer an affordance the
   element does not honour (the P-096/P-100 lesson this theme inherited). */
[data-theme="workbench-motion"] .wbm-video {
  pointer-events: none;
}
/* Poster-until-paint (scroll-world port, spec 2026-08-01). Only when
   choreography is on: the clip stays transparent so the poster shows through
   until the first frame actually paints — the journey wrapper sets
   data-clip-ready="on" on the shell at the first `seeked`. Guarded by
   [data-choreo="on"] so the STATIC hero (no clip, no motion) is untouched:
   there the video element has no src and never seeks, and this rule never
   applies, so the poster path stays exactly as it was. This makes the
   "poster is what a first paint captures" guarantee explicit rather than
   relying on a browser's blank-video default (iOS renders it opaque). */
[data-theme="workbench-motion"] .wbm-shell[data-choreo="on"] .wbm-video {
  opacity: 0;
  transition: opacity 300ms ease;
}
[data-theme="workbench-motion"]
  .wbm-shell[data-choreo="on"][data-clip-ready="on"]
  .wbm-video {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="workbench-motion"] .wbm-shell[data-choreo="on"] .wbm-video {
    transition: none;
  }
}
/* The scrim carries the text contrast. Heaviest at the floor where the acts
   sit, easing off toward the top so the scene still reads as a photograph.
   Measured against the real clip's four beats, not eyeballed at beat one —
   scripts/qa-workbench-motion-hero.mjs. */
[data-theme="workbench-motion"] .wbm-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(23, 19, 14, 0.94) 0%,
    rgba(23, 19, 14, 0.9) 24%,
    rgba(23, 19, 14, 0.76) 46%,
    rgba(23, 19, 14, 0.5) 70%,
    rgba(23, 19, 14, 0.32) 100%
  );
}

/* ─── the acts ─── */
[data-theme="workbench-motion"] .wbm-content {
  position: relative;
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
}
[data-theme="workbench-motion"] .wbm-act + .wbm-act {
  margin-top: 44px;
}
/* Choreography on: every act becomes a layer anchored to the same baseline so
   the beats cross-fade in place instead of pushing each other around. Only
   transform and opacity are ever written (compositor-only, no reflow). */
[data-theme="workbench-motion"] .wbm-shell[data-choreo="on"] .wbm-act {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  will-change: transform, opacity;
}

/* ─── stage typography (light-on-dark; the poster hero's is dark-on-bone) ─── */
[data-theme="workbench-motion"] .wbm-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
[data-theme="workbench-motion"] .wbm-eyebrow {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wb-accent-bright);
}
[data-theme="workbench-motion"] .wbm-h1 {
  margin: 0;
  font-family: var(--wb-heading-font);
  font-weight: 800;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--wb-bone);
  max-width: 17ch;
  text-wrap: balance;
}
[data-theme="workbench-motion"] .wbm-h2 {
  margin: 0;
  font-family: var(--wb-heading-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wb-bone);
  max-width: 20ch;
  text-wrap: balance;
}
[data-theme="workbench-motion"] .wbm-dek {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--wb-footer-link);
  max-width: 46ch;
  text-wrap: pretty;
}
[data-theme="workbench-motion"] .wbm-fine {
  font-size: 13.5px;
  font-style: italic;
  color: var(--wb-footer-meta);
}
[data-theme="workbench-motion"] .wbm-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* Primary CTA on the stage. The theme's forest button is near-invisible on a
   dark scene; amber-on-ink is the palette's own high-contrast pair (6.1:1) and
   it is already the theme's buy button. */
[data-theme="workbench-motion"] .wbm-btn-primary {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 15px;
  background: var(--wb-amber);
  color: var(--wb-cta-ink);
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--wb-btn-shadow-amber);
  cursor: pointer;
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
[data-theme="workbench-motion"] .wbm-btn-primary:hover {
  background: var(--wb-amber-hover);
}
[data-theme="workbench-motion"] .wbm-btn-primary:active {
  transform: translateY(1px);
}
/* The theme's ghost button is forest-on-bone and disappears on a dark scene;
   this is the same shape in the stage's own palette. */
[data-theme="workbench-motion"] .wbm-btn-ghost {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 15px;
  color: var(--wb-bone);
  border: 1.5px solid rgba(233, 226, 208, 0.45);
  padding: 12.5px 24px;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
[data-theme="workbench-motion"] .wbm-btn-ghost:hover {
  border-color: var(--wb-bone);
  background: rgba(233, 226, 208, 0.08);
}

/* ─── act 3: the journal strip ─── */
[data-theme="workbench-motion"] .wbm-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
[data-theme="workbench-motion"] .wbm-strip-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  border: 1px solid rgba(233, 226, 208, 0.2);
  border-radius: 10px;
  /* Solid-ish fill rather than backdrop-filter: a blur over a playing video
     costs a full-frame composite every frame, and this buys the same
     separation for nothing. */
  background: rgba(23, 19, 14, 0.58);
  text-decoration: none;
  transition: border-color 140ms ease-out, background-color 140ms ease-out;
}
[data-theme="workbench-motion"] .wbm-strip-item:hover {
  border-color: rgba(233, 226, 208, 0.42);
  background: rgba(23, 19, 14, 0.72);
}
[data-theme="workbench-motion"] .wbm-strip-title {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.22;
  color: var(--wb-bone);
  text-wrap: pretty;
}
[data-theme="workbench-motion"] .wbm-strip-meta {
  font-size: 12.5px;
  color: var(--wb-footer-meta);
}

/* ─── act 4: the shop teaser ─── */
[data-theme="workbench-motion"] .wbm-teaser {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}
[data-theme="workbench-motion"] .wbm-teaser-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ─── mobile ─── */
@media (max-width: 1023px) {
  [data-theme="workbench-motion"] .wbm-shell[data-choreo="on"] {
    height: var(--wbm-travel-sm, 220vh);
  }
  [data-theme="workbench-motion"] .wbm-stage {
    min-height: calc(100vh - 63px);
    padding: 72px 20px 44px;
  }
  [data-theme="workbench-motion"] .wbm-shell[data-choreo="on"] .wbm-stage {
    top: 63px;
    height: calc(100vh - 63px);
    min-height: 0;
  }
  [data-theme="workbench-motion"] .wbm-h1 {
    font-size: 34px;
    letter-spacing: -0.02em;
    max-width: none;
  }
  [data-theme="workbench-motion"] .wbm-h2 {
    font-size: 25px;
    max-width: none;
  }
  [data-theme="workbench-motion"] .wbm-dek {
    font-size: 16px;
    line-height: 1.55;
  }
  [data-theme="workbench-motion"] .wbm-copy {
    gap: 14px;
  }
  [data-theme="workbench-motion"] .wbm-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }
  /* Two beats fit an 844px screen honestly; a third would either clip or
     shrink the type below the theme's own floor. */
  [data-theme="workbench-motion"] .wbm-strip-item:nth-child(n + 3) {
    display: none;
  }
  [data-theme="workbench-motion"] .wbm-strip-item {
    padding: 12px 14px 14px;
  }
  [data-theme="workbench-motion"] .wbm-strip-title {
    font-size: 16px;
  }
  [data-theme="workbench-motion"] .wbm-teaser {
    gap: 18px;
  }
}

/* tracking breaks connected Arabic script — zero it on the stage's display
   type too (P-222; the theme already does this for its labels above). */
[dir="rtl"] [data-theme="workbench-motion"] .wbm-eyebrow,
[dir="rtl"] [data-theme="workbench-motion"] .wbm-h1,
[dir="rtl"] [data-theme="workbench-motion"] .wbm-h2,
[dir="rtl"] [data-theme="workbench-motion"] .wbm-btn-ghost,
[dir="rtl"] [data-theme="workbench-motion"] .wbm-btn-primary {
  letter-spacing: 0;
}