/* ============================================================================
 * andrewalbin.com — Visitor Surface Block Library
 * static/visitor/blocks.css
 *
 * Phase 1 / Wave A.1 of the Twin Loop Platform Recovery (2026-04-19).
 *
 * SCOPE
 * -----
 * Production stylesheet for the 10 BEM-named visitor blocks under
 * bkb_web/templates/visitor/blocks/*.html. Every class rendered by those
 * templates is styled here. This file replaces static/visitor/g0_blocks_preview.css
 * for the preview route and provides the complete block layer for every
 * andrewalbin.com page composed from EE v2 blocks.
 *
 * TOKEN CONTRACT
 * --------------
 * Per the layout bridge in bkb_web/templates/visitor/_layout.html, six
 * --aa-* custom properties are guaranteed to be emitted by the active vibe
 * stylesheet (static/experience/css/vibes/<vibe>.css):
 *
 *   --aa-color-bg, --aa-color-fg, --aa-color-muted, --aa-color-accent,
 *   --aa-typography-font-display, --aa-typography-font-body
 *
 * Vibe sheets also commonly emit:
 *   --aa-typography-scale-ratio, --aa-typography-base-size-px,
 *   --aa-motion-duration-ms-base, --aa-motion-easing, --aa-motion-parallax,
 *   --aa-layout-grid-cols, --aa-layout-container-max-px,
 *   --aa-layout-gutter-px,
 *   --aa-navigation-style, --aa-navigation-persistence
 *
 * Any additional token this file consumes is declared at :root below in the
 * SAME flat --aa-{category}-{name} vocabulary, with a sensible derivation
 * from the canonical 6 so that an unsophisticated vibe still renders well.
 *
 * BEM CONTRACT SOURCE
 * -------------------
 * Frozen template files (do NOT rename classes here without editing them):
 *   bkb_web/templates/visitor/blocks/{narrative,evidence,transition,portrait,
 *   conversation,andy_moment,artwork_gallery,media,metric_card,process_flow}.html
 *
 * VERIFICATION SPEC SOURCES
 * -------------------------
 * Satisfies success_criteria from:
 *   artifacts/workshops/2026-04-18_claude_design_harness/verification_specs/
 *     pages/work_index.yaml      (us_wi_01 grid, us_wi_02 image fallback,
 *                                 us_wi_05 BEM compliance, us_wi_07 anti-vis)
 *     vibes/cedar_workshop.yaml  (token names, motion-respect)
 *     vibes/editorial_quiet.yaml (long-read measure)
 *
 * ANTI-VISIBILITY CONTRACT
 * ------------------------
 * Per the conversation-block doc (lines 19-47): no model identifiers, no
 * adaptation tells. As a consequence, this stylesheet MUST NOT define any
 * selectors targeting the forbidden adaptation-signal data attributes
 * (the trio whose names start with "data-pers-", "data-rerank-", and
 * "data-aff-" prefix the spec calls out). Those attribute names must not
 * appear in the visitor DOM at all. The legitimate affinity-tracker hook
 * is the longer "block-evidence-item" affinity-default-weight attribute
 * which is read by interactions.js but not styled (no visual change).
 *
 * MOTION SAFETY
 * -------------
 * All transition: and animation: declarations are wrapped in a
 * @media (prefers-reduced-motion: no-preference) guard. WCAG 2.3.3.
 *
 * FOCUS STATES
 * ------------
 * Every interactive element (a, button, [tabindex]) receives a visible
 * focus indicator via :focus-visible using --aa-color-focus-ring. WCAG 2.4.7.
 *
 * NO JS DEPENDENCIES
 * ------------------
 * This file is pure CSS. Templates that reference JS-driven states (e.g.
 * [data-streaming="true"], [data-step-status="current"]) are styled
 * statically from those attributes; no script execution is assumed.
 *
 * SECTION ORDER
 * -------------
 *   0. Root token extensions                  (:root)
 *   0a. Universal utilities                   (.visually-hidden, focus baseline)
 *   1. Block: narrative
 *   2. Block: evidence            (us_wi_01 grid, us_wi_02 fallback)
 *   3. Block: transition
 *   4. Block: portrait
 *   5. Block: conversation
 *   6. Block: andy_moment
 *   7. Block: artwork_gallery
 *   8. Block: media
 *   9. Block: metric_card
 *  10. Block: process_flow
 *  11. Preview chrome            (g0 banner; cooperates with preview route)
 * ============================================================================ */


/* ============================================================================
 * 0. ROOT TOKEN EXTENSIONS
 *
 * Every token below uses the --aa-{category}-{name} flat vocabulary. None
 * shadow the canonical 6 from the layout bridge — they EXTEND. Vibe sheets
 * may re-declare any of these to override.
 * ============================================================================ */

:root {
  /* --- Spacing scale (mirrors --vs-space-* but in --aa-* namespace) ----- */
  --aa-space-0: 0;
  --aa-space-1: 0.25rem;   /* 4px  */
  --aa-space-2: 0.5rem;    /* 8px  */
  --aa-space-3: 0.75rem;   /* 12px */
  --aa-space-4: 1rem;      /* 16px */
  --aa-space-5: 1.5rem;    /* 24px */
  --aa-space-6: 2rem;      /* 32px */
  --aa-space-7: 3rem;      /* 48px */
  --aa-space-8: 4rem;      /* 64px */
  --aa-space-9: 6rem;      /* 96px */

  /* --- Layout containers (fall through to vibe-supplied if present) ----- */
  --aa-layout-container-max: 70rem;
  --aa-layout-container-narrow: 38rem;
  --aa-layout-container-wide: 80rem;

  /* --- Motion ---------------------------------------------------------- */
  --aa-motion-duration-base: var(--aa-motion-duration-ms-base, 200ms);
  --aa-motion-duration-fast: 120ms;
  --aa-motion-duration-slow: 400ms;
  --aa-motion-easing-base: var(--aa-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));

  /* --- Color extensions (derived from canonical 4) --------------------- */
  --aa-color-surface: color-mix(in srgb, var(--aa-color-bg) 92%, var(--aa-color-fg) 8%);
  --aa-color-surface-raised: color-mix(in srgb, var(--aa-color-bg) 96%, #ffffff 4%);
  --aa-color-border: color-mix(in srgb, var(--aa-color-muted) 60%, transparent 40%);
  --aa-color-border-strong: var(--aa-color-muted);
  --aa-color-fg-muted: var(--aa-color-muted);
  --aa-color-fg-secondary: color-mix(in srgb, var(--aa-color-fg) 80%, var(--aa-color-muted) 20%);
  --aa-color-accent-soft: color-mix(in srgb, var(--aa-color-accent) 70%, var(--aa-color-bg) 30%);
  --aa-color-accent-tint: color-mix(in srgb, var(--aa-color-accent) 12%, var(--aa-color-bg) 88%);
  --aa-color-focus-ring: var(--aa-color-accent);
  --aa-color-focus-ring-offset: var(--aa-color-bg);
  --aa-color-success: #2f6b3b;
  --aa-color-error:   #8a2a1a;
  --aa-bg-gallery: color-mix(in srgb, var(--aa-color-bg) 88%, var(--aa-color-fg) 12%);

  /* --- Typography extras ----------------------------------------------- */
  --aa-typography-font-mono: "JetBrains Mono", "Berkeley Mono", "IBM Plex Mono",
                             ui-monospace, SFMono-Regular, Menlo, monospace;
  --aa-typography-base-size: var(--aa-typography-base-size-px, 18px);

  /* --- Aliases used by template doc-comments
   *    (kept alive so vibes that emit them work, and so this file's
   *    selectors stay readable even if a template author writes the
   *    older alias). All are derived; never hand-tuned. --------------- */
  --aa-text-primary:     var(--aa-color-fg);
  --aa-text-secondary:   var(--aa-color-fg-secondary);
  --aa-bg:               var(--aa-color-bg);
  --aa-accent:           var(--aa-color-accent);
  --aa-success:          var(--aa-color-success);
  --aa-error:            var(--aa-color-error);

  /* --- Andy voice (consumed by andy_moment + conversation) ------------- */
  --aa-andy-voice-bg:     var(--aa-color-accent-tint);
  --aa-andy-voice-accent: var(--aa-color-accent);

  /* --- Radii (Prada-leaning sharp default, vibes may override) --------- */
  --aa-radius-image:    0;
  --aa-radius-portrait: 0;
  --aa-radius-card:     0;
  --aa-radius-input:    0;
}


/* ============================================================================
 * 0a. UNIVERSAL UTILITIES
 * ============================================================================ */

/* .visually-hidden is referenced from conversation, metric_card, process_flow.
   Standard a11y-friendly hide pattern (clip-path is more reliable than
   width:1px+overflow:hidden for SR announcement). */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Universal focus baseline for any interactive element rendered by a block.
   Per-block sections may override placement, but never visibility. */
.block-narrative a:focus-visible,
.block-evidence a:focus-visible,
.block-evidence button:focus-visible,
.block-transition a:focus-visible,
.block-portrait a:focus-visible,
.block-conversation a:focus-visible,
.block-conversation button:focus-visible,
.block-conversation textarea:focus-visible,
.block-andy-moment a:focus-visible,
.block-artwork-gallery a:focus-visible,
.block-artwork-gallery button:focus-visible,
.block-media a:focus-visible,
.block-media video:focus-visible,
.block-metric-card a:focus-visible,
.block-process-flow a:focus-visible {
  outline: 2px solid var(--aa-color-focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================================
 * 1. BLOCK: narrative
 *
 * Template: bkb_web/templates/visitor/blocks/narrative.html
 * Classes: .block-narrative, .block-narrative--align-{left,center,right},
 *          .block-narrative__inner, .block-narrative__eyebrow,
 *          .block-narrative__heading, .block-narrative__body,
 *          .block-narrative__byline
 * ============================================================================ */

.block-narrative {
  padding: var(--aa-space-8) var(--aa-space-5);
  background-color: var(--aa-color-bg);
  color: var(--aa-color-fg);
}

.block-narrative__inner {
  max-width: var(--aa-layout-container-narrow);
  margin: 0 auto;
}

.block-narrative--align-left   .block-narrative__inner { text-align: left;   margin-left: 0; }
.block-narrative--align-center .block-narrative__inner { text-align: center; }
.block-narrative--align-right  .block-narrative__inner { text-align: right;  margin-right: 0; }

.block-narrative__eyebrow {
  font-family: var(--aa-typography-font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--aa-color-fg-muted);
  margin: 0 0 var(--aa-space-3) 0;
}

.block-narrative__heading {
  font-family: var(--aa-typography-font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--aa-space-4) 0;
  color: var(--aa-color-fg);
}

.block-narrative__body {
  font-family: var(--aa-typography-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--aa-color-fg);
}
.block-narrative__body > * + * { margin-top: var(--aa-space-4); }
.block-narrative__body p { margin: 0; }

.block-narrative__byline {
  margin-top: var(--aa-space-5);
  font-family: var(--aa-typography-font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--aa-color-fg-muted);
}


/* ============================================================================
 * 2. BLOCK: evidence
 *
 * Template: bkb_web/templates/visitor/blocks/evidence.html
 * Spec:     verification_specs/pages/work_index.yaml
 *           - us_wi_01_grid_layout_renders   → display:grid (not flex/block);
 *                                              >=3 cols at >=1024px,
 *                                              2 cols at >=640px,
 *                                              1 col at <640px
 *           - us_wi_02_image_fallback_graceful → fallback rendered with
 *                                                background-color:var(--aa-color-accent),
 *                                                title in centered display type
 *           - us_wi_07_anti_visibility       → no adaptation-signal data
 *                                              attribute selectors styled
 *                                              (legitimate hook is the longer
 *                                              block-evidence-item affinity
 *                                              default-weight attribute)
 * ============================================================================ */

.block-evidence {
  padding: var(--aa-space-7) var(--aa-space-5) var(--aa-space-9);
  background-color: var(--aa-color-bg);
  color: var(--aa-color-fg);
}

.block-evidence__inner {
  max-width: var(--aa-layout-container-max);
  margin: 0 auto;
}

.block-evidence__eyebrow--section {
  font-family: var(--aa-typography-font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--aa-color-fg-muted);
  margin: 0 0 var(--aa-space-2) 0;
}

.block-evidence__heading {
  font-family: var(--aa-typography-font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 var(--aa-space-6) 0;
  color: var(--aa-color-fg);
}

/* CRITICAL — us_wi_01: TRUE CSS GRID, NOT FLEX, NOT BLOCK.
   Mobile-first: 1 column. Tablet (>=640px): 2 columns. Desktop (>=1024px): >=3 columns. */
.block-evidence__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--aa-space-6);
}

@media (min-width: 640px) {
  .block-evidence__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aa-space-6);
  }
}

@media (min-width: 1024px) {
  .block-evidence__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--aa-space-6);
  }
}

@media (min-width: 1400px) {
  .block-evidence__list {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
}

/* ----- variant: cards (default; used by /work) -------------------------- */

.block-evidence--variant-cards .block-evidence__item {
  background-color: var(--aa-color-bg);
  border: 1px solid var(--aa-color-border);
  border-radius: var(--aa-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.block-evidence__item--variant-cards {
  background-color: var(--aa-color-bg);
  border: 1px solid var(--aa-color-border);
  border-radius: var(--aa-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.block-evidence__link {
  text-decoration: none;
  color: inherit;
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.block-evidence__image-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--aa-color-border);
}

.block-evidence__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.block-evidence__image,
.block-evidence__picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* us_wi_02 — image fallback graceful.
   Two paths render the fallback: (a) the template's class modifier
   .block-evidence__image-wrap--placeholder, used when the item has no image,
   and (b) [data-image-state="fallback"] on .block-evidence__image, the
   forward-compat hook called out in the verification spec. Both render
   with background-color: var(--aa-color-accent) per the spec.
   The inline SVG inside (.block-evidence__placeholder) inherits color
   via fill="currentColor" from the wrapper — so we set color to
   var(--aa-color-accent) on the wrapper, paint the SVG, AND ensure the
   wrapper ITSELF carries the accent background so a bare data-attr
   fallback (no SVG) still meets the criterion. */
.block-evidence__image-wrap--placeholder,
.block-evidence__image[data-image-state="fallback"] {
  background-color: var(--aa-color-accent);
  color: var(--aa-color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When the spec's data-image-state="fallback" is set on the <img>, the spec
   says the fallback "contain[s] a centered display-type span". Style any
   direct child <span> as centered display type so the title can render. */
.block-evidence__image[data-image-state="fallback"] > span,
.block-evidence__image-wrap--placeholder > span:not(.block-evidence__placeholder) {
  font-family: var(--aa-typography-font-display);
  font-size: 1.125rem;
  text-align: center;
  color: var(--aa-color-bg);
  padding: var(--aa-space-4);
  line-height: 1.2;
}

.block-evidence__placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

.block-evidence__body {
  padding: var(--aa-space-4) var(--aa-space-5) var(--aa-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-2);
}

.block-evidence__title {
  font-family: var(--aa-typography-font-display);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--aa-color-fg);
  display: block;
}

.block-evidence__role {
  font-family: var(--aa-typography-font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--aa-color-fg-muted);
  display: block;
}

.block-evidence__eyebrow {
  font-family: var(--aa-typography-font-body);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 0.7rem;
  color: var(--aa-color-fg-muted);
  display: block;
}

.block-evidence__excerpt {
  font-family: var(--aa-typography-font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--aa-color-fg);
  display: block;
}

/* ----- variant: text-heavy (used by /thinking) ------------------------- */

.block-evidence--variant-text-heavy .block-evidence__list {
  grid-template-columns: 1fr;
  gap: var(--aa-space-7);
  max-width: var(--aa-layout-container-narrow);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .block-evidence--variant-text-heavy .block-evidence__list {
    grid-template-columns: 1fr;
  }
}

.block-evidence__item--variant-text-heavy {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--aa-color-border);
  padding-bottom: var(--aa-space-6);
}

.block-evidence__item--variant-text-heavy .block-evidence__link {
  flex-direction: column;
  height: auto;
}

.block-evidence__body--text-heavy {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-3);
}

.block-evidence__body--text-heavy .block-evidence__title {
  font-size: 1.5rem;
  line-height: 1.25;
}

/* ----- hover / focus states ------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .block-evidence__item--variant-cards,
  .block-evidence__item--variant-text-heavy {
    transition: border-color var(--aa-motion-duration-base) var(--aa-motion-easing-base),
                transform     var(--aa-motion-duration-base) var(--aa-motion-easing-base),
                box-shadow    var(--aa-motion-duration-base) var(--aa-motion-easing-base);
  }
  .block-evidence__image,
  .block-evidence__picture > img {
    transition: transform var(--aa-motion-duration-slow) var(--aa-motion-easing-base);
  }
}

.block-evidence__item--variant-cards:hover,
.block-evidence__item--variant-cards:focus-within {
  border-color: var(--aa-color-accent);
  box-shadow: 0 1px 0 var(--aa-color-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .block-evidence__item--variant-cards:hover .block-evidence__image,
  .block-evidence__item--variant-cards:focus-within .block-evidence__image {
    transform: scale(1.02);
  }
}

.block-evidence__link:focus-visible {
  outline: 0;
}
.block-evidence__item:has(.block-evidence__link:focus-visible) {
  outline: 2px solid var(--aa-color-focus-ring);
  outline-offset: 3px;
}


/* ============================================================================
 * 3. BLOCK: transition
 *
 * Template: bkb_web/templates/visitor/blocks/transition.html
 * Classes: .block-transition, .block-transition--{breath,fade,slide,...},
 *          .block-transition__inner, .block-transition__prompt,
 *          .block-transition__action, .block-transition__action-label,
 *          .block-transition__action-arrow, .block-transition__alternate
 * ============================================================================ */

.block-transition {
  padding: var(--aa-space-7) var(--aa-space-5) var(--aa-space-8);
  background-color: var(--aa-color-bg);
  border-top: 1px solid var(--aa-color-border);
}

.block-transition__inner {
  max-width: var(--aa-layout-container-narrow);
  margin: 0 auto;
  text-align: center;
}

.block-transition__prompt {
  font-family: var(--aa-typography-font-body);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 0.78rem;
  color: var(--aa-color-fg-muted);
  margin: 0 0 var(--aa-space-4) 0;
}

.block-transition__action {
  font-family: var(--aa-typography-font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--aa-color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}

.block-transition__action-label { display: inline; }

.block-transition__action-arrow {
  display: inline-block;
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .block-transition__action {
    transition: opacity var(--aa-motion-duration-base) var(--aa-motion-easing-base),
                color   var(--aa-motion-duration-base) var(--aa-motion-easing-base);
  }
  .block-transition__action-arrow {
    transition: transform var(--aa-motion-duration-base) var(--aa-motion-easing-base);
  }
  .block-transition__action:hover .block-transition__action-arrow,
  .block-transition__action:focus-visible .block-transition__action-arrow {
    transform: translateX(0.25em);
  }
}

.block-transition__action:hover { opacity: 0.85; }

.block-transition__alternate {
  display: inline-block;
  margin-top: var(--aa-space-5);
  font-family: var(--aa-typography-font-body);
  font-size: 0.88rem;
  color: var(--aa-color-fg-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
  .block-transition__alternate {
    transition: color var(--aa-motion-duration-base) var(--aa-motion-easing-base);
  }
}

.block-transition__alternate:hover {
  color: var(--aa-color-accent);
}


/* ============================================================================
 * 4. BLOCK: portrait
 *
 * Template: bkb_web/templates/visitor/blocks/portrait.html
 * Classes: .block-portrait, .block-portrait--image-{left,right},
 *          .block-portrait__figure, .block-portrait__picture,
 *          .block-portrait__image, .block-portrait__caption,
 *          .block-portrait__caption--no-image, .block-portrait__name,
 *          .block-portrait__role, .block-portrait__bio,
 *          .block-portrait__contact, .block-portrait__contact-item,
 *          .block-portrait__contact-item--{type}, .block-portrait__contact-link
 * ============================================================================ */

.block-portrait {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--aa-space-6);
  padding: var(--aa-space-7) var(--aa-space-5);
  background-color: var(--aa-color-bg);
  color: var(--aa-color-fg);
  max-width: var(--aa-layout-container-max);
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 720px) {
  .block-portrait {
    grid-template-columns: minmax(12rem, 22rem) 1fr;
    gap: var(--aa-space-8);
  }
  .block-portrait--image-right {
    grid-template-columns: 1fr minmax(12rem, 22rem);
  }
  .block-portrait--image-right .block-portrait__figure { order: 2; }
  .block-portrait--image-right .block-portrait__bio,
  .block-portrait--image-right .block-portrait__contact { order: 1; }
}

.block-portrait__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-3);
}

.block-portrait__picture {
  display: block;
  width: 100%;
}

.block-portrait__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--aa-radius-portrait);
  background-color: var(--aa-color-border);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.block-portrait__caption {
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-1);
}

.block-portrait__caption--no-image {
  margin: 0 0 var(--aa-space-4);
}

.block-portrait__name {
  font-family: var(--aa-typography-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--aa-color-fg);
}

.block-portrait__role {
  font-family: var(--aa-typography-font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--aa-color-fg-muted);
}

.block-portrait__bio {
  font-family: var(--aa-typography-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--aa-color-fg);
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-4);
}
.block-portrait__bio p { margin: 0; }

.block-portrait__contact {
  list-style: none;
  margin: var(--aa-space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--aa-space-2) var(--aa-space-5);
}

.block-portrait__contact-item {
  font-family: var(--aa-typography-font-body);
  font-size: 0.92rem;
  color: var(--aa-color-fg-secondary);
}

.block-portrait__contact-link {
  color: var(--aa-color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  .block-portrait__contact-link {
    transition: color var(--aa-motion-duration-base) var(--aa-motion-easing-base);
  }
  .block-portrait__image {
    transition: transform var(--aa-motion-duration-slow) var(--aa-motion-easing-base);
  }
}

.block-portrait__contact-link:hover { color: var(--aa-color-accent-soft); }

/* Type-specific contact decoration is intentionally minimal — channel chrome
   is announced via aria-label, not painted as icons (anti-visibility). */
.block-portrait__contact-item--email   .block-portrait__contact-link::before { content: "✉ "; opacity: 0.6; }
.block-portrait__contact-item--instagram .block-portrait__contact-link::before { content: "◎ "; opacity: 0.6; }
.block-portrait__contact-item--linkedin  .block-portrait__contact-link::before { content: "in "; opacity: 0.6; font-size: 0.85em; }
.block-portrait__contact-item--are\.na   .block-portrait__contact-link::before { content: "△ "; opacity: 0.6; }
.block-portrait__contact-item--link      .block-portrait__contact-link::before { content: "→ "; opacity: 0.6; }


/* ============================================================================
 * 5. BLOCK: conversation
 *
 * Template: bkb_web/templates/visitor/blocks/conversation.html
 * Classes: .block-conversation, .block-conversation__opening,
 *          .block-conversation__thread, .block-conversation__message,
 *          .block-conversation__message--from-{visitor,andy},
 *          .block-conversation__message-body,
 *          .block-conversation__message-timestamp,
 *          .block-conversation__streaming-indicator,
 *          .block-conversation__suggestions,
 *          .block-conversation__suggestion-item,
 *          .block-conversation__suggestion-form,
 *          .block-conversation__suggestion-button,
 *          .block-conversation__input,
 *          .block-conversation__input-textarea,
 *          .block-conversation__input-voice,
 *          .block-conversation__input-submit
 *
 * NOTE: This is the visitor-facing chat surface for an LLM-backed system.
 *       NOTHING in this CSS exposes model identity, debug fields, or
 *       internal state. Selectors target only the four visitor-visible
 *       message attributes (role, content, timestamp, id-as-anchor).
 * ============================================================================ */

.block-conversation {
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-5);
  padding: var(--aa-space-6) var(--aa-space-5) var(--aa-space-7);
  background-color: var(--aa-color-bg);
  color: var(--aa-color-fg);
  max-width: var(--aa-layout-container-narrow);
  margin: 0 auto;
  min-height: 60vh;
}

.block-conversation__opening {
  font-family: var(--aa-typography-font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--aa-color-fg);
  margin: 0 0 var(--aa-space-4) 0;
}

.block-conversation[data-empty="false"] .block-conversation__opening {
  font-size: 0.85rem;
  font-family: var(--aa-typography-font-body);
  color: var(--aa-color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: var(--aa-space-3);
}

.block-conversation__thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-4);
  outline: 0;
}
.block-conversation__thread:focus-visible {
  outline: 2px solid var(--aa-color-focus-ring);
  outline-offset: 2px;
}

.block-conversation__message {
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-1);
  max-width: 80%;
}

.block-conversation__message--from-visitor {
  align-self: flex-end;
  align-items: flex-end;
}

.block-conversation__message--from-andy {
  align-self: flex-start;
  align-items: flex-start;
}

.block-conversation__message-body {
  font-family: var(--aa-typography-font-body);
  font-size: 1rem;
  line-height: 1.5;
  padding: var(--aa-space-3) var(--aa-space-4);
  border-radius: var(--aa-radius-card);
  border: 1px solid var(--aa-color-border);
  background-color: var(--aa-color-surface);
  color: var(--aa-color-fg);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.block-conversation__message--from-andy .block-conversation__message-body {
  background-color: var(--aa-andy-voice-bg);
  border-color: var(--aa-color-accent-soft);
  color: var(--aa-color-fg);
}

.block-conversation__message--from-visitor .block-conversation__message-body {
  background-color: var(--aa-color-bg);
  border-color: var(--aa-color-border-strong);
}

.block-conversation__message-timestamp {
  font-family: var(--aa-typography-font-mono);
  font-size: 0.72rem;
  color: var(--aa-color-fg-muted);
  letter-spacing: 0.04em;
}

.block-conversation__streaming-indicator {
  display: inline-block;
  margin-left: var(--aa-space-1);
  color: var(--aa-color-accent);
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .block-conversation__streaming-indicator {
    animation: aa-streaming-pulse 1.2s ease-in-out infinite;
  }
  @keyframes aa-streaming-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1.0; }
  }
}

.block-conversation__suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--aa-space-2);
}

.block-conversation__suggestion-item { display: contents; }

.block-conversation__suggestion-form { margin: 0; }

.block-conversation__suggestion-button {
  font-family: var(--aa-typography-font-body);
  font-size: 0.9rem;
  padding: var(--aa-space-2) var(--aa-space-4);
  border: 1px solid var(--aa-color-border-strong);
  background-color: transparent;
  color: var(--aa-color-fg-secondary);
  cursor: pointer;
  border-radius: var(--aa-radius-input);
  line-height: 1.3;
}

@media (prefers-reduced-motion: no-preference) {
  .block-conversation__suggestion-button {
    transition: border-color var(--aa-motion-duration-base) var(--aa-motion-easing-base),
                color        var(--aa-motion-duration-base) var(--aa-motion-easing-base),
                background-color var(--aa-motion-duration-base) var(--aa-motion-easing-base);
  }
}

.block-conversation__suggestion-button:hover {
  border-color: var(--aa-color-accent);
  color: var(--aa-color-fg);
}

.block-conversation__input {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--aa-space-2);
  align-items: end;
  padding: var(--aa-space-3);
  border: 1px solid var(--aa-color-border-strong);
  background-color: var(--aa-color-surface-raised);
  border-radius: var(--aa-radius-input);
}

@media (max-width: 768px) {
  .block-conversation__input {
    position: sticky;
    bottom: 0;
    background-color: var(--aa-color-bg);
    margin: 0 calc(-1 * var(--aa-space-5));
    padding: var(--aa-space-3) var(--aa-space-5);
    border-left: 0;
    border-right: 0;
  }
}

.block-conversation__input-textarea {
  font-family: var(--aa-typography-font-body);
  font-size: 1rem;
  line-height: 1.4;
  padding: var(--aa-space-2) var(--aa-space-3);
  border: 1px solid var(--aa-color-border);
  background-color: var(--aa-color-bg);
  color: var(--aa-color-fg);
  border-radius: var(--aa-radius-input);
  resize: vertical;
  min-height: 2.5rem;
  width: 100%;
  max-height: 12rem;
}

.block-conversation__input-textarea::placeholder {
  color: var(--aa-color-fg-muted);
  opacity: 0.85;
}

.block-conversation__input-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.block-conversation__input-voice,
.block-conversation__input-submit {
  font-family: var(--aa-typography-font-body);
  font-size: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--aa-color-border-strong);
  background-color: transparent;
  color: var(--aa-color-fg-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--aa-radius-input);
}

.block-conversation__input-submit {
  background-color: var(--aa-color-fg);
  color: var(--aa-color-bg);
  border-color: var(--aa-color-fg);
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .block-conversation__input-submit {
    transition: background-color var(--aa-motion-duration-base) var(--aa-motion-easing-base),
                opacity         var(--aa-motion-duration-base) var(--aa-motion-easing-base);
  }
}

.block-conversation__input-submit:hover {
  background-color: var(--aa-color-accent);
  border-color: var(--aa-color-accent);
}

.block-conversation__input-submit:disabled,
.block-conversation__input-voice:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ============================================================================
 * 6. BLOCK: andy_moment
 *
 * Template: bkb_web/templates/visitor/blocks/andy_moment.html
 * Classes: .block-andy-moment, .block-andy-moment--{greeting,quote,aside},
 *          .block-andy-moment__inner, .block-andy-moment__avatar,
 *          .block-andy-moment__body, .block-andy-moment__eyebrow,
 *          .block-andy-moment__voice, .block-andy-moment__attribution,
 *          .block-andy-moment__attribution-name,
 *          .block-andy-moment__attribution-context,
 *          .block-andy-moment__continue-wrap,
 *          .block-andy-moment__continue
 * ============================================================================ */

.block-andy-moment {
  margin: var(--aa-space-6) 0;
  padding: 0;
  background-color: transparent;
}

.block-andy-moment__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--aa-space-4);
  padding: var(--aa-space-5);
  background-color: var(--aa-andy-voice-bg);
  border-left: 3px solid var(--aa-andy-voice-accent);
  align-items: start;
}

.block-andy-moment--aside .block-andy-moment__inner,
.block-andy-moment--quote .block-andy-moment__inner {
  grid-template-columns: 1fr;
  padding: var(--aa-space-4) var(--aa-space-5);
}

.block-andy-moment--greeting {
  margin: var(--aa-space-7) 0;
}
.block-andy-moment--greeting .block-andy-moment__inner {
  padding: var(--aa-space-6) var(--aa-space-6);
  align-items: center;
}

.block-andy-moment__avatar {
  margin: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--aa-color-border);
  flex-shrink: 0;
}
.block-andy-moment--greeting .block-andy-moment__avatar {
  width: 4.5rem;
  height: 4.5rem;
}
.block-andy-moment__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .block-andy-moment__avatar img {
    transition: transform var(--aa-motion-duration-slow) var(--aa-motion-easing-base);
  }
}
@media (prefers-reduced-motion: reduce) {
  .block-andy-moment__avatar[data-reduce-motion-safe="true"] img {
    transition: none !important;
    animation: none !important;
  }
}

.block-andy-moment__body {
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-2);
  min-width: 0;
}

.block-andy-moment__eyebrow {
  font-family: var(--aa-typography-font-body);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 0.72rem;
  color: var(--aa-color-fg-muted);
  margin: 0;
}

.block-andy-moment__voice {
  font-family: var(--aa-typography-font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.45;
  color: var(--aa-color-fg);
  margin: 0;
  font-weight: 400;
  font-style: normal;
}

.block-andy-moment--greeting .block-andy-moment__voice {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.35;
}

.block-andy-moment--quote .block-andy-moment__voice {
  font-style: italic;
  border: 0;
  padding-left: 0;
  position: relative;
}
.block-andy-moment--quote .block-andy-moment__voice::before {
  content: "\201C";
  display: inline;
  margin-right: 0.1em;
  color: var(--aa-andy-voice-accent);
}

.block-andy-moment__attribution {
  font-family: var(--aa-typography-font-body);
  font-size: 0.85rem;
  color: var(--aa-color-fg-muted);
  margin: 0;
}

.block-andy-moment__attribution-name {
  color: var(--aa-andy-voice-accent);
  font-weight: 500;
}

.block-andy-moment__attribution-context {
  color: var(--aa-color-fg-muted);
}

.block-andy-moment__continue-wrap { margin: var(--aa-space-2) 0 0; }

.block-andy-moment__continue {
  font-family: var(--aa-typography-font-body);
  font-size: 0.9rem;
  color: var(--aa-color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .block-andy-moment__continue {
    transition: opacity var(--aa-motion-duration-base) var(--aa-motion-easing-base);
  }
}

.block-andy-moment__continue:hover { opacity: 0.85; }


/* ============================================================================
 * 7. BLOCK: artwork_gallery
 *
 * Template: bkb_web/templates/visitor/blocks/artwork_gallery.html
 * Classes: .block-artwork-gallery,
 *          .block-artwork-gallery--bg-{light,dark,gallery},
 *          .block-artwork-gallery--spacing-{generous,tight},
 *          .block-artwork-gallery--layout-{single-column,grid},
 *          .block-artwork-gallery--zoom-on-hover,
 *          .block-artwork-gallery__header, .block-artwork-gallery__eyebrow,
 *          .block-artwork-gallery__heading, .block-artwork-gallery__caption,
 *          .block-artwork-gallery__grid, .block-artwork-gallery__item,
 *          .block-artwork-gallery__lightbox-trigger,
 *          .block-artwork-gallery__figure,
 *          .block-artwork-gallery__image-frame,
 *          .block-artwork-gallery__image,
 *          .block-artwork-gallery__image-placeholder,
 *          .block-artwork-gallery__caption-block,
 *          .block-artwork-gallery__title, .block-artwork-gallery__year,
 *          .block-artwork-gallery__medium, .block-artwork-gallery__dimensions,
 *          .block-artwork-gallery__empty
 * ============================================================================ */

.block-artwork-gallery {
  padding: var(--aa-space-7) var(--aa-space-5);
  background-color: var(--aa-color-bg);
  color: var(--aa-color-fg);
}

.block-artwork-gallery--bg-light {
  background-color: var(--aa-color-bg);
}
.block-artwork-gallery--bg-gallery {
  background-color: var(--aa-bg-gallery);
}
.block-artwork-gallery--bg-dark {
  background-color: var(--aa-color-fg);
  color: var(--aa-color-bg);
}
.block-artwork-gallery--bg-dark .block-artwork-gallery__title,
.block-artwork-gallery--bg-dark .block-artwork-gallery__heading {
  color: var(--aa-color-bg);
}

.block-artwork-gallery--spacing-generous { padding: var(--aa-space-9) var(--aa-space-5); }
.block-artwork-gallery--spacing-tight    { padding: var(--aa-space-5) var(--aa-space-4); }

.block-artwork-gallery__header {
  max-width: var(--aa-layout-container-max);
  margin: 0 auto var(--aa-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-2);
  text-align: left;
}

.block-artwork-gallery__eyebrow {
  font-family: var(--aa-typography-font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--aa-color-fg-muted);
  margin: 0;
}

.block-artwork-gallery__heading {
  font-family: var(--aa-typography-font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.block-artwork-gallery__caption {
  font-family: var(--aa-typography-font-body);
  font-size: 1rem;
  color: var(--aa-color-fg-secondary);
  margin: 0;
  max-width: var(--aa-layout-container-narrow);
}

.block-artwork-gallery__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--aa-layout-container-wide);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--aa-space-5);
}

.block-artwork-gallery--spacing-generous .block-artwork-gallery__grid { gap: var(--aa-space-7); }
.block-artwork-gallery--spacing-tight    .block-artwork-gallery__grid { gap: var(--aa-space-3); }

@media (min-width: 640px) {
  .block-artwork-gallery--layout-grid .block-artwork-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .block-artwork-gallery--layout-grid .block-artwork-gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.block-artwork-gallery--layout-single-column .block-artwork-gallery__grid {
  grid-template-columns: 1fr;
  max-width: var(--aa-layout-container-narrow);
}

.block-artwork-gallery__item {
  margin: 0;
  display: block;
}

.block-artwork-gallery__lightbox-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: block;
}

.block-artwork-gallery__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-2);
}

.block-artwork-gallery__image-frame {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--artwork-dominant, var(--aa-bg-gallery));
  aspect-ratio: 1 / 1;
  border-radius: var(--aa-radius-image);
}

.block-artwork-gallery__image-frame[data-aspect-ratio] {
  aspect-ratio: var(--aspect-ratio, auto);
}

.block-artwork-gallery__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.block-artwork-gallery__image-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--artwork-dominant, var(--aa-bg-gallery));
}

@media (prefers-reduced-motion: no-preference) {
  .block-artwork-gallery--zoom-on-hover .block-artwork-gallery__image,
  .block-artwork-gallery__image {
    transition: transform var(--aa-motion-duration-slow) var(--aa-motion-easing-base);
  }
  .block-artwork-gallery--zoom-on-hover .block-artwork-gallery__lightbox-trigger:hover .block-artwork-gallery__image,
  .block-artwork-gallery--zoom-on-hover .block-artwork-gallery__lightbox-trigger:focus-visible .block-artwork-gallery__image {
    transform: scale(1.04);
  }
}

.block-artwork-gallery__caption-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aa-space-1) var(--aa-space-3);
  align-items: baseline;
  font-family: var(--aa-typography-font-body);
  font-size: 0.88rem;
  color: var(--aa-color-fg-muted);
}

.block-artwork-gallery__title {
  font-family: var(--aa-typography-font-display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--aa-color-fg);
  display: inline;
}

.block-artwork-gallery__year {
  font-family: var(--aa-typography-font-mono);
  font-size: 0.78rem;
  color: var(--aa-color-fg-muted);
  letter-spacing: 0.04em;
}

.block-artwork-gallery__medium,
.block-artwork-gallery__dimensions {
  font-style: italic;
  color: var(--aa-color-fg-muted);
}

.block-artwork-gallery__empty {
  text-align: center;
  font-family: var(--aa-typography-font-body);
  font-size: 1rem;
  color: var(--aa-color-fg-muted);
  padding: var(--aa-space-7);
  border: 1px dashed var(--aa-color-border);
  max-width: var(--aa-layout-container-narrow);
  margin: 0 auto;
}


/* ============================================================================
 * 8. BLOCK: media
 *
 * Template: bkb_web/templates/visitor/blocks/media.html
 * Classes: .block-media, .block-media--{image,video,animation},
 *          .block-media__figure, .block-media__picture,
 *          .block-media__image, .block-media__video,
 *          .block-media__video--animation, .block-media__video-fallback,
 *          .block-media__animation-static, .block-media__figcaption,
 *          .block-media__caption, .block-media__credit
 * ============================================================================ */

.block-media {
  display: block;
  margin: var(--aa-space-6) auto;
  padding: 0 var(--aa-space-5);
  max-width: var(--aa-layout-container-max);
  background-color: transparent;
}

.block-media__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-2);
}

.block-media__picture {
  display: block;
  width: 100%;
}

.block-media__image,
.block-media__video,
.block-media__video-fallback,
.block-media__animation-static {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--aa-radius-image);
  background-color: var(--aa-color-border);
}

.block-media__video {
  background-color: #000;
}

.block-media__video-fallback {
  display: none;
}

/* Animation variant: by default the <video> autoplays and the static <img>
   is hidden. Under prefers-reduced-motion: reduce, swap them so SR users
   and motion-sensitive visitors see the still frame instead of the loop. */
.block-media--animation .block-media__animation-static { display: none; }

@media (prefers-reduced-motion: reduce) {
  .block-media--animation .block-media__video--animation { display: none; }
  .block-media--animation .block-media__animation-static {
    display: block;
    width: 100%;
    height: auto;
  }
  .block-media__video[data-respect-reduced-motion="true"][autoplay] {
    /* Defensive: belt-and-braces if a vibe sheet ever sets autoplay attr. */
    display: none;
  }
}

.block-media__figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-1);
  padding: 0;
  font-family: var(--aa-typography-font-body);
}

.block-media__caption {
  font-size: 0.92rem;
  color: var(--aa-color-fg);
  line-height: 1.45;
}

.block-media__credit {
  font-size: 0.78rem;
  color: var(--aa-color-fg-muted);
  font-family: var(--aa-typography-font-mono);
  letter-spacing: 0.03em;
}


/* ============================================================================
 * 9. BLOCK: metric_card
 *
 * Template: bkb_web/templates/visitor/blocks/metric_card.html
 * Classes: .block-metric-card-group, .block-metric-card-group--{grid,row},
 *          .block-metric-card, .block-metric-card__label,
 *          .block-metric-card__value,
 *          .block-metric-card__delta,
 *          .block-metric-card__delta--{positive,negative,neutral},
 *          .block-metric-card__delta-indicator,
 *          .block-metric-card__delta-value,
 *          .block-metric-card__sparkline,
 *          .block-metric-card__sparkline-alt,
 *          .block-metric-card__caption
 * ============================================================================ */

.block-metric-card-group {
  display: grid;
  gap: var(--aa-space-4);
  margin: var(--aa-space-5) 0;
  max-width: var(--aa-layout-container-max);
}

.block-metric-card-group--grid {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .block-metric-card-group--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .block-metric-card-group--grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.block-metric-card-group--row {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .block-metric-card-group--row {
    grid-auto-flow: column;
    grid-auto-columns: minmax(12rem, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
  }
}

.block-metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-2);
  padding: var(--aa-space-5);
  background-color: var(--aa-color-surface-raised);
  border: 1px solid var(--aa-color-border);
  border-left: 3px solid var(--aa-color-accent);
  border-radius: var(--aa-radius-card);
}

.block-metric-card__label {
  font-family: var(--aa-typography-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--aa-color-fg-muted);
  margin: 0;
}

.block-metric-card__value {
  font-family: var(--aa-typography-font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--aa-color-fg);
  margin: 0;
}

.block-metric-card__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--aa-space-1);
  font-family: var(--aa-typography-font-mono);
  font-size: 0.85rem;
  margin: 0;
  letter-spacing: 0.02em;
}

.block-metric-card__delta--positive { color: var(--aa-color-success); }
.block-metric-card__delta--negative { color: var(--aa-color-error); }
.block-metric-card__delta--neutral  { color: var(--aa-color-fg-muted); }

.block-metric-card__delta-indicator {
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
}

.block-metric-card__delta-value {
  display: inline-block;
}

.block-metric-card__sparkline {
  display: block;
  width: 100%;
  height: 2rem;
  color: var(--aa-color-accent);
  margin-top: var(--aa-space-1);
}

.block-metric-card__sparkline-alt {
  /* Inherits .visually-hidden — but template puts both classes; keep parity. */
}

.block-metric-card__caption {
  font-family: var(--aa-typography-font-body);
  font-size: 0.85rem;
  color: var(--aa-color-fg-muted);
  margin: 0;
  line-height: 1.4;
}


/* ============================================================================
 * 10. BLOCK: process_flow
 *
 * Template: bkb_web/templates/visitor/blocks/process_flow.html
 * Classes: .block-process-flow,
 *          .block-process-flow--orientation-{horizontal,vertical,auto},
 *          .block-process-flow__inner, .block-process-flow__heading,
 *          .block-process-flow__list, .block-process-flow__step,
 *          .block-process-flow__step--{upcoming,current,complete},
 *          .block-process-flow__step-marker,
 *          .block-process-flow__step-icon,
 *          .block-process-flow__step-number,
 *          .block-process-flow__step-content,
 *          .block-process-flow__step-title,
 *          .block-process-flow__step-ordinal,
 *          .block-process-flow__step-body,
 *          .block-process-flow__connector,
 *          .block-process-flow__connector-line,
 *          .block-process-flow__connector-arrow
 * ============================================================================ */

.block-process-flow {
  padding: var(--aa-space-7) var(--aa-space-5);
  background-color: var(--aa-color-bg);
  color: var(--aa-color-fg);
}

.block-process-flow__inner {
  max-width: var(--aa-layout-container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-5);
}

.block-process-flow__heading {
  font-family: var(--aa-typography-font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}

.block-process-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-4);
  counter-reset: aa-process-step;
}

/* Auto and vertical orientations: stack vertically (mobile-first).
   Horizontal orientation forces row layout even on narrow viewports. */
@media (min-width: 768px) {
  .block-process-flow--orientation-auto .block-process-flow__list,
  .block-process-flow--orientation-horizontal .block-process-flow__list {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--aa-space-3);
  }
}

.block-process-flow--orientation-horizontal .block-process-flow__list {
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--aa-space-3);
}

.block-process-flow__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--aa-space-4);
  padding: var(--aa-space-4) var(--aa-space-5);
  background-color: var(--aa-color-surface-raised);
  border: 1px solid var(--aa-color-border);
  border-left: 3px solid var(--aa-color-border-strong);
  border-radius: var(--aa-radius-card);
  flex: 1 1 16rem;
  min-width: 0;
}

.block-process-flow__step--upcoming { opacity: 0.85; }
.block-process-flow__step--current  { border-left-color: var(--aa-color-accent); }
.block-process-flow__step--complete { border-left-color: var(--aa-color-fg-muted); }

.block-process-flow__step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aa-space-1);
  min-width: 3rem;
}

.block-process-flow__step-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--aa-color-accent);
  display: inline-block;
}

.block-process-flow__step-number {
  font-family: var(--aa-typography-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--aa-color-bg);
  background-color: var(--aa-color-accent);
  border: 1px solid var(--aa-color-accent);
  border-radius: var(--aa-radius-card);
  padding: 0.2em 0.6em;
  display: inline-block;
  min-width: 2.5em;
  text-align: center;
  font-weight: 500;
}

.block-process-flow__step--upcoming .block-process-flow__step-number {
  background-color: transparent;
  color: var(--aa-color-fg-muted);
  border-color: var(--aa-color-border-strong);
}

.block-process-flow__step--complete .block-process-flow__step-number {
  background-color: var(--aa-color-fg-muted);
  border-color: var(--aa-color-fg-muted);
  color: var(--aa-color-bg);
}

.block-process-flow__step-content {
  display: flex;
  flex-direction: column;
  gap: var(--aa-space-2);
  min-width: 0;
}

.block-process-flow__step-title {
  font-family: var(--aa-typography-font-display);
  font-size: 1.125rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
  color: var(--aa-color-fg);
}

.block-process-flow__step-ordinal {
  /* visually-hidden cooperates here — kept parity with template. */
}

.block-process-flow__step-body {
  font-family: var(--aa-typography-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--aa-color-fg-muted);
}
.block-process-flow__step-body p { margin: 0 0 var(--aa-space-2); }
.block-process-flow__step-body p:last-child { margin-bottom: 0; }
.block-process-flow__step-body a { color: var(--aa-color-accent); }

.block-process-flow__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  flex: 0 0 auto;
  padding: 0 var(--aa-space-2);
  color: var(--aa-color-border-strong);
}

.block-process-flow__step--complete + .block-process-flow__connector,
.block-process-flow__step--current  + .block-process-flow__connector {
  color: var(--aa-color-accent);
}

.block-process-flow__connector-line {
  display: inline-block;
  background-color: currentColor;
  height: 2px;
  width: 2rem;
}

.block-process-flow__connector-arrow {
  display: inline-block;
  margin-left: -2px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}

/* Vertical orientation (or narrow viewport): connector rotates 90deg
   between steps. Hidden by default since vertical stacking already implies
   sequence; show only when explicitly orientation-vertical. */
.block-process-flow--orientation-vertical .block-process-flow__list { flex-direction: column; }
.block-process-flow--orientation-vertical .block-process-flow__connector {
  flex-direction: column;
  padding: var(--aa-space-1) 0;
}
.block-process-flow--orientation-vertical .block-process-flow__connector-line {
  width: 2px;
  height: 1.5rem;
}
.block-process-flow--orientation-vertical .block-process-flow__connector-arrow {
  border-top: 6px solid currentColor;
  border-bottom: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-left: 0;
  margin-top: -2px;
}

@media (max-width: 767px) {
  .block-process-flow--orientation-auto .block-process-flow__connector {
    display: none;
  }
}


/* ============================================================================
 * 11. PREVIEW CHROME (G0 spot-check)
 *
 * The /g0/blocks-preview route renders a banner above the composition. The
 * legacy stylesheet (g0_blocks_preview.css) used to own this; ownership
 * moved here when blocks.css became canonical. The banner is the ONLY
 * preview-specific selector in this file.
 * ============================================================================ */

.g0-preview-banner {
  background-color: #fff7e6;
  border-bottom: 2px solid #d28b0e;
  padding: var(--aa-space-3) var(--aa-space-5);
  font-family: var(--aa-typography-font-mono);
  font-size: 0.78rem;
  color: #5a3a00;
  text-align: center;
  letter-spacing: 0.03em;
}