/* =============================================================
   veloque-research.css — VELOQUE Chapter 01, Research
   -------------------------------------------------------------
   Page-scoped layout pass. Loaded AFTER veloque.css and scoped to
   `body.vq-page--research`, so nothing here can leak into the other
   Veloque chapters. Everything follows the Augment-derived section
   catalogue documented in docs/veloque-augment-reference.md:

     B  hairline grid   — gap:1px, no radius, no shadow, no card fill
     C  media + text    — asymmetric split, never 50/50
     D  stat strip      — border-block only, mono tabular numerals
     E  logo grid       — dense n-up grid of marks
     G  stepped grid    — same hairline grid, mono step index per cell

   Colour comes exclusively from the --vq-* tokens in veloque.css.
   ============================================================= */

/* ── Local rhythm tokens ───────────────────────────────────── */
body.vq-page--research {
  /* Two padding values page-wide, per the reference. */
  --vqr-cell-pad:   clamp(20px, 2.2vw, 40px);
  --vqr-cell-pad-s: clamp(18px, 1.8vw, 28px);
  /* Lead paragraph measure, deliberately narrower than --vq-read-max
     so the 4-beat opener (label → h2 → lead → full-width grid) keeps a
     ~60ch headline measure even on a 1600px rail. */
  --vqr-lead-max:   768px;
}

/* =============================================================
   0. Shared primitives
   ============================================================= */

/* One-sentence lead under a section title (4-beat opener, beat 3). */
body.vq-page--research .vqr-lead {
  font-family: var(--font-text);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--vq-text-mid);
  max-width: var(--vqr-lead-max);
  margin: 0 0 clamp(40px, 5vw, 64px);
}

/* Pattern A — 4-beat section opener, two columns.
   The old opener stacked label → h2 → lead → grid down a single 820px
   reading column, which on the 1600px rail left roughly 750px of dead
   space to the right of every section head. Splitting it 2fr/3fr puts
   the eyebrow + h2 in the narrow left column and the lead/prose in the
   wide right one, so the opener spans the same rail as the grid below
   it. Stacks back to one column under 1024px. */
body.vq-page--research .vqr-opener {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  margin-bottom: clamp(40px, 5vw, 64px);
}

body.vq-page--research .vqr-opener__head .vq-section__label {
  margin-bottom: 20px;
}

body.vq-page--research .vqr-opener__head .vq-section__title {
  margin-bottom: 0;
  max-width: 18ch;
}

/* Inside the opener the lead no longer owns the tail gap (the opener
   itself does), and it is already inside a 3fr track, so it drops its
   own 768px clamp and rides the column. */
body.vq-page--research .vqr-opener__body .vqr-lead {
  max-width: 75ch;
  margin-bottom: 24px;
}

body.vq-page--research .vqr-opener__body .vqr-lead:last-child {
  margin-bottom: 0;
}

body.vq-page--research .vqr-opener__body .vq-section__body {
  max-width: 75ch;
}

body.vq-page--research .vqr-opener__body .vq-section__body:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  body.vq-page--research .vqr-opener {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
}

/* Pattern D — stat strip. No cards: rules top and bottom only, the
   numerals sit directly on the page in mono tabular figures. */
body.vq-page--research .vqr-strip__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  margin: clamp(40px, 5vw, 56px) 0 20px;
}

/* Pattern C — asymmetric media + text row. */
body.vq-page--research .vqr-row {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  width: 100%;
  max-width: none;
  margin-top: clamp(40px, 5vw, 64px);
}

@media (min-width: 1024px) {
  body.vq-page--research .vqr-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* The chart row reuses .vq-annotation typography but left-aligned and
   unclamped from its centered 720px default. */
body.vq-page--research .vqr-row .vq-annotation {
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

body.vq-page--research .vqr-row .vq-annotation__title {
  font-size: clamp(26px, 2.6vw, 40px);
}

/* Grid items default to a min-content floor, and two cells on this page
   (the automotive logo ticker, the persona prose) have a min-content width
   far wider than their share of the rail. Without this, one cell hijacks
   the whole track and the hairline columns collapse. */
body.vq-page--research .vq-platform-card,
body.vq-page--research .vq-bento__cell,
body.vq-page--research .vq-brand-card,
body.vq-page--research .vq-pillar,
body.vq-page--research .vqr-flowgrid > li {
  min-width: 0;
}

body.vq-page--research .vq-ticker,
body.vq-page--research .vq-ticker__track {
  min-width: 0;
}

/* =============================================================
   1. Tools & platforms — pattern E (logo grid) on a hairline grid
   -------------------------------------------------------------
   Six tools, so 6 / 3 / 2 / 1 columns all divide evenly and no row
   can ever end with an orphan cell. 6-up is held back to >=1500px:
   below that a sixth of the rail leaves under ~26 characters per line
   in the card body, which is past the point where the copy reads as a
   caption rather than a sentence.
   ============================================================= */
/* The toolkit used to carry a compact h2 (max 32px) and a shorter tail gap.
   Both are gone: it is a full section opener, so it takes the shared
   --vq-fs-h2 scale and the shared 126px .vq-section rhythm. No per-page
   override of .vq-section__title font-size or .vq-section margin lives in
   this file. */

body.vq-page--research .vq-platform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vq-border);
  border: 1px solid var(--vq-border);
  width: 100%;
  max-width: none;
  margin-top: clamp(32px, 4vw, 56px);
}

body.vq-page--research .vq-platform-card {
  background: var(--vq-bg);
  border: none;
  border-radius: 0;
  padding: var(--vqr-cell-pad);
  gap: 12px;
  transition: background 180ms ease-out;
}

body.vq-page--research .vq-platform-card:hover {
  background: var(--vq-surface);
  border: none;
}

body.vq-page--research .vq-platform-card__logo {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
}

body.vq-page--research .vq-platform-card__name {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.25;
}

@media (min-width: 600px) {
  body.vq-page--research .vq-platform-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  body.vq-page--research .vq-platform-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1500px) {
  body.vq-page--research .vq-platform-grid { grid-template-columns: repeat(6, 1fr); }
  body.vq-page--research .vq-platform-card { padding: var(--vqr-cell-pad-s); }
  body.vq-page--research .vq-platform-card__body { font-size: var(--fs-13); }
}

/* =============================================================
   2. Market — pattern D stat strip + pattern C chart row
   ============================================================= */

/* Both stat strips on this page (market + personas) drop the filled
   tiles for the reference's rules-only treatment. */
body.vq-page--research .vq-stat-strip {
  display: grid;
  /* Both strips hold three stats, so a 2-up phone step would leave one
     number alone on its own row. Straight 1-up until the 3-up step. */
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 32px;
  background: none;
  border: none;
  border-block: 1px solid var(--vq-border);
  overflow: visible;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding-block: clamp(32px, 3.5vw, 48px);
}

body.vq-page--research .vq-stat {
  background: none;
  padding: 0;
  gap: 14px;
}

body.vq-page--research .vq-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 400;
  letter-spacing: -0.02em;
}

body.vq-page--research .vq-stat__label {
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  line-height: 1.5;
}

@media (min-width: 768px) {
  body.vq-page--research .vq-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}

/* Chart column inside the pattern-C row: it keeps the surface plate
   but loses the 100vw bleed, so the row can be asymmetric. */
body.vq-page--research .vqr-chart-plate {
  background: var(--vq-bg-soft);
  border: 1px solid var(--vq-border);
  padding: clamp(20px, 2.4vw, 40px);
  width: 100%;
}

body.vq-page--research .vqr-chart-plate .vq-growth-chart {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* =============================================================
   3. Competitors — hairline reference grid + hairline brand grid
   ============================================================= */

/* Cross-sector references: three cells, so 3-up desktop, 1-up below.
   A 2-up middle step would leave an orphan third cell. */
body.vq-page--research .vq-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vq-border);
  border: 1px solid var(--vq-border);
  width: 100%;
  max-width: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
}

body.vq-page--research .vq-bento__cell {
  background: var(--vq-bg);
  border: none;
  border-radius: 0;
  padding: var(--vqr-cell-pad);
  gap: 14px;
  transition: background 180ms ease-out;
}

body.vq-page--research .vq-bento__cell:hover {
  background: var(--vq-surface);
  border: none;
}

/* The old layout promoted the automotive cell to a full-width row to
   give the logo ticker room. On the 1600px rail a third of the rail is
   already ~460px, comfortably wider than the ticker needs, so it goes
   back to being an ordinary cell. */
body.vq-page--research .vq-bento__cell--wide {
  grid-column: auto;
}

/* Reference logos: all three cells carry their marks in the same
   32px slot under the mono label, so the titles share a baseline. */
body.vq-page--research .vqr-bento-logos {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 32px;
  margin: 4px 0 2px;
}
body.vq-page--research .vqr-bento-logos .vq-bento__logo {
  margin: 0;
  height: 32px;
  max-width: 120px;
}
/* Reference III: the automotive ticker sits in the logo slot (was at
   the bottom of the cell), same height/margins as the Apple mark. */
body.vq-page--research .vq-bento__cell .vq-ticker {
  height: 32px;
  margin: 4px 0 2px;
  display: flex;
  align-items: center;
}
body.vq-page--research .vq-bento__cell .vq-ticker__track img {
  height: 28px;
}

@media (min-width: 1024px) {
  body.vq-page--research .vq-bento { grid-template-columns: repeat(3, 1fr); }
}

/* Brand comparison: one competitor per cell of the same hairline grid. */
body.vq-page--research .vq-brand-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vq-border);
  border: 1px solid var(--vq-border);
  width: 100%;
  max-width: none;
  margin-top: clamp(32px, 4vw, 56px);
}

body.vq-page--research .vq-brand-card {
  background: var(--vq-bg);
  border: none;
  border-radius: 0;
  padding: var(--vqr-cell-pad);
  gap: 24px;
}

body.vq-page--research .vq-brand-card__more-inner .vq-section__body {
  max-width: none;
}

/* Stacked, each card owns the whole rail, and a space-between rating row
   would strand its label against the far edge. */
@media (max-width: 1023px) {
  body.vq-page--research .vq-brand-rating { max-width: 420px; }
}

@media (min-width: 1024px) {
  body.vq-page--research .vq-brand-cards { grid-template-columns: repeat(3, 1fr); }
}

body.vq-page--research .vqr-highlight--spaced {
  margin-top: clamp(40px, 5vw, 56px);
}

/* =============================================================
   4. Opportunity — statement h2 + pattern D strip + hairline pillars
   ============================================================= */

/* The one oversized statement heading the page is allowed. */
body.vq-page--research .vqr-title--statement {
  font-size: clamp(38px, 5vw, 80px);
  line-height: 1;
  letter-spacing: -0.032em;
  max-width: 16ch;
}

body.vq-page--research .vqr-strip--duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  border-block: 1px solid var(--vq-border);
  padding-block: clamp(32px, 3.5vw, 48px);
  width: 100%;
  margin-bottom: clamp(40px, 5vw, 64px);
}

@media (min-width: 768px) {
  body.vq-page--research .vqr-strip--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.vq-page--research .vq-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vq-border);
  border: 1px solid var(--vq-border);
  width: 100%;
  max-width: none;
  margin-top: clamp(32px, 4vw, 56px);
}

body.vq-page--research .vq-pillar {
  background: var(--vq-bg);
  border: none;
  border-radius: 0;
  padding: var(--vqr-cell-pad);
  gap: 14px;
  transition: background 180ms ease-out;
}

body.vq-page--research .vq-pillar:hover {
  background: var(--vq-surface);
  border: none;
}

body.vq-page--research .vq-pillar__num {
  font-size: var(--fs-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  body.vq-page--research .vq-pillars { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   5. Personas — header back on the rail, card chrome de-inlined
   -------------------------------------------------------------
   These rules replace the inline style="" attributes the persona
   cards used to carry. Two of those inlines were also defects: a gold
   #C9A96E eyebrow (a forbidden hue in this grayscale system) and a
   #6B6B6B motivations line (3.9:1 on black, below WCAG AA).
   ============================================================= */
body.vq-page--research .vq-carousel-header .vq-section__title {
  margin-bottom: 16px;
}

body.vq-page--research .vq-carousel-header .vq-section__body {
  max-width: var(--vqr-lead-max);
}

body.vq-page--research .vq-carousel-item__media--persona {
  background: var(--vq-bg-soft);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 28px;
  gap: 12px;
}

body.vq-page--research .vqr-persona__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
}

body.vq-page--research .vqr-persona__name {
  font-family: var(--font-headings);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 500;
  color: var(--vq-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

body.vq-page--research .vqr-persona__age {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.08em;
  color: var(--vq-text-muted);
}

body.vq-page--research .vqr-persona__rule {
  height: 1px;
  width: 100%;
  background: var(--vq-border);
}

body.vq-page--research .vqr-persona__desc {
  font-family: var(--font-text);
  font-size: var(--fs-13);
  color: var(--vq-text-mid);
  line-height: 1.6;
}

body.vq-page--research .vqr-persona__motivations {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--vq-text-muted);
}

/* Persona reference photos: the shared .vq-carousel-item__photo-wrap is a
   fixed 1/1 frame with object-fit:cover, so the four source images (portrait
   1138x1600, near-square 1020x886, portrait 960x1200 and landscape 1600x900)
   all crop to the same card shape. Only the focal point differs, so each
   image gets its own object-position; the frame itself is untouched. */
body.vq-page--research .vqr-persona-photo--enthusiasts { object-position: center 14%; }
body.vq-page--research .vqr-persona-photo--progressive  { object-position: 55% center; }
/* Group shot: the riders sit in the lower third of the source frame. */
body.vq-page--research .vqr-persona-photo--engaged      { object-position: center 88%; }
body.vq-page--research .vqr-persona-photo--sages        { object-position: 52% center; }

/* =============================================================
   6. Storyboard & user flows — pattern G stepped grid
   -------------------------------------------------------------
   Five entry points, which divides into no common column count, so
   the last cell spans the remainder of its row at every step. That
   keeps every row visually full instead of leaving one orphan cell.
   ============================================================= */
body.vq-page--research .vqr-flowgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vq-border);
  border: 1px solid var(--vq-border);
  width: 100%;
  max-width: none;
  margin-top: clamp(32px, 4vw, 56px);
  list-style: none;
  padding: 0;
}

body.vq-page--research .vqr-flowgrid > li {
  background: var(--vq-bg);
  padding: var(--vqr-cell-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 180ms ease-out;
}

body.vq-page--research .vqr-flowgrid > li:hover {
  background: var(--vq-surface);
}

body.vq-page--research .vqr-step__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
}

body.vq-page--research .vqr-step__title {
  font-family: var(--font-headings);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  color: var(--vq-text);
  letter-spacing: -0.014em;
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 560px) {
  body.vq-page--research .vqr-flowgrid { grid-template-columns: repeat(2, 1fr); }
  body.vq-page--research .vqr-flowgrid > li:last-child { grid-column: span 2; }
}
@media (min-width: 900px) {
  body.vq-page--research .vqr-flowgrid { grid-template-columns: repeat(3, 1fr); }
  body.vq-page--research .vqr-flowgrid > li:last-child { grid-column: span 1; }
  body.vq-page--research .vqr-flowgrid > li:nth-child(4) { grid-column: span 2; }
}
@media (min-width: 1280px) {
  body.vq-page--research .vqr-flowgrid { grid-template-columns: repeat(5, 1fr); }
  body.vq-page--research .vqr-flowgrid > li:nth-child(4),
  body.vq-page--research .vqr-flowgrid > li:last-child { grid-column: span 1; }
}

/* =============================================================
   7. Full-bleed blocks — rail alignment, logo band, statement
   -------------------------------------------------------------
   Every top-level block that sits directly in <main> (outside the
   padded .vq-detail article) is pulled onto the same left edge as
   the sections: content starts at var(--vq-page-pad-x) and the rail
   is capped at var(--vq-page-max). Full-bleed IMAGES may still touch
   the viewport edge; their text never does.
   ============================================================= */

/* P2 #12 — the persona carousel band breaks out with the classic
   `width: 100vw; margin-left: calc(-50vw + 50%)` trick, but <main> is
   inset by the sidebar, so 100vw starts 33px to the LEFT of the rail
   (and runs 33px past the right edge of the viewport). Inside <main>,
   100% already is the full bleed — the hero uses exactly that — so the
   band lines its header and cards up with every other section. */
body.vq-page--research .vq-carousel-section {
  width: 100%;
  margin-left: 0;
}

/* P2 #12 — the shared .vq-annotation is a centered 720px column with
   its own 24px padding, so on this page it floated in the middle of
   the viewport, off every other block's left edge. */
body.vq-page--research .vq-annotation {
  max-width: var(--vq-page-max);
  margin: 0;
  padding: clamp(64px, 10vh, 128px) var(--vq-page-pad-x);
  text-align: left;
}

body.vq-page--research .vq-annotation__title {
  max-width: 24ch;
}

body.vq-page--research .vq-annotation__body {
  max-width: 75ch;
}

/* Keep the lead variant's proximity to the artwork it introduces — the
   padding shorthand above would otherwise restore the full tail gap. */
body.vq-page--research .vq-annotation--lead {
  padding-bottom: 28px;
}

/* P1 #7 — the statement is now a real <h2>. It keeps the annotation
   typography but takes the shared h2 scale so it reads as the section
   heading it is. */
body.vq-page--research h2.vq-annotation__title {
  font-family: var(--font-headings);
  font-size: var(--vq-fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 20ch;
}

/* P1 #18 — competitor logo band.
   The source artwork is black marks on a white plate, which made this
   the only light block in the entire case study, and .vq-bleed--surface
   floated it in the middle of the viewport on its own narrower padding.
   Fix: rail alignment + a --vq-surface-2 panel, with the artwork
   inverted (white marks on black) and screen-blended so its own black
   field drops out and only the marks paint onto the panel.
   `isolation: isolate` keeps the blend inside the panel instead of
   reaching the page background. */
body.vq-page--research .vqr-logoband {
  background: none;
  max-width: var(--vq-page-max);
  margin: 0;
  padding: 0 var(--vq-page-pad-x) clamp(24px, 4vh, 48px);
}

body.vq-page--research .vqr-logoband__panel {
  isolation: isolate;
  background: var(--vq-surface-2);
  border: 1px solid var(--vq-border);
  overflow: hidden;
}

/* The artwork carries ~30% empty plate above and below the two logo
   rows. Cropping to a 2.8:1 window keeps the marks and drops the void,
   so the band reads as a strip rather than a near-square of emptiness. */
body.vq-page--research .vqr-logoband__img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3.2;
  object-fit: cover;
  object-position: center;
  margin: 0;
  filter: invert(1);
  mix-blend-mode: screen;
}

body.vq-page--research .vqr-logoband__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  margin: 16px 0 0;
}

@media (max-width: 640px) {
  body.vq-page--research .vqr-logoband__img { aspect-ratio: 1.7; }
}

/* =============================================================
   8. Interaction — focus-visible + tap targets
   -------------------------------------------------------------
   P1 #10 / #11. The two disclosure buttons on this page were 21px
   tall and had no visible focus ring; both are page-scoped fixes so
   the shared component keeps its own geometry on the other chapters.
   ============================================================= */
body.vq-page--research .vq-brand-card__more-btn,
body.vq-page--research .vq-carousel-item__more-btn {
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}

/* The brand-card trigger was not just short, it was invisible: it is
   absolutely positioned at bottom:0 of .vq-brand-card__more, and that
   panel collapses to `max-height: 0; overflow: hidden`, which clipped
   the button away with the content. (The persona carousel avoids this
   by clipping an inner wrapper instead, leaving its button outside.)
   The JS binds via btn.closest('.vq-brand-card__more'), so the button
   has to stay inside the panel in the DOM.
   An absolutely positioned box is only clipped by an ancestor's
   overflow when that ancestor is part of its containing-block chain,
   so moving the containing block one level up (card instead of panel)
   lifts the button out of the clip without touching the collapse
   mechanics or the JS hook. The card then reserves a 44px tail for it. */
body.vq-page--research .vq-brand-card {
  position: relative;
  padding-bottom: calc(var(--vqr-cell-pad) + 44px);
}

body.vq-page--research .vq-brand-card__more {
  position: static;
  /* The panel also paints a mask (fade-out gradient) over its whole DOM
     subtree, and masking ignores the containing-block chain, so it wiped
     the button out even once the clip no longer reached it. The mask only
     ever applies in the collapsed state, where the panel is 0px tall and
     has nothing to fade, so dropping it changes nothing visually. */
  -webkit-mask-image: none;
  mask-image: none;
}

body.vq-page--research .vq-brand-card__more-btn {
  left: var(--vqr-cell-pad);
  bottom: var(--vqr-cell-pad);
}

body.vq-page--research .vq-brand-card__more-btn:focus-visible,
body.vq-page--research .vq-carousel-item__more-btn:focus-visible,
body.vq-page--research .vq-chapter-link:focus-visible,
body.vq-page--research .vq-breadcrumb:focus-visible {
  outline: 1px solid var(--vq-text);
  outline-offset: 2px;
}

/* The hairline cells (.vq-platform-card, .vq-bento__cell, .vq-pillar,
   .vqr-flowgrid > li) carry a :hover background but are not focusable
   and hold no control, so there is no focus state to define for them. */

/* =============================================================
   9. Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  body.vq-page--research .vq-platform-card,
  body.vq-page--research .vq-bento__cell,
  body.vq-page--research .vq-pillar,
  body.vq-page--research .vqr-flowgrid > li {
    transition: none;
  }
}

/* ── Hero: show more of the research photo. Taller image band, the
   fade-to-black starts lower and the text block sits further down. */
body.vq-page--research .vq-hero__image-wrap {
  height: 62vh;
  min-height: 420px;
}
body.vq-page--research .vq-hero__image-wrap img {
  object-position: center 45%;
}
body.vq-page--research .vq-hero__gradient {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.10) 0%,
    transparent 55%,
    rgba(0, 0, 0, 0.55) 86%,
    #000 100%
  );
}
body.vq-page--research .vq-hero__text {
  padding-top: clamp(32px, 5vh, 64px);
}

/* =============================================================
   10. Strategy mechanics preview — blockchain chain diagram (A)
       + membership hairline grid (B)
   -------------------------------------------------------------
   The chain is a CSS grid of four <li>, each holding a small
   self-contained isometric SVG block (shared <defs>, one <use> per
   cell) plus a real HTML mono label. Built this way rather than as one
   wide SVG on purpose: a single 1200-unit viewBox had to scroll
   horizontally under 900px, and its <text> shrank with the viewBox to
   ~9px. With a grid the diagram reflows (4-up → vertical chain) and
   every label stays real, resizable text.

   The link line, the NFC node and the direction of the chain are
   pseudo-elements on .vqr-chain__cube, so they follow the reflow:
   horizontal across the gap at ≥900px, vertical under each block below
   that. Grayscale tokens only, no radius, no shadow.
   ============================================================= */
body.vq-page--research .vqr-chain__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

body.vq-page--research .vqr-chain {
  --vqr-chain-gap: clamp(40px, 4vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px var(--vqr-chain-gap);
  width: 100%;
  max-width: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

body.vq-page--research .vqr-chain__block {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 32px);
  min-width: 0;
}

body.vq-page--research .vqr-chain__cube {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(148px, 20vw, 200px);
}

body.vq-page--research .vqr-chain__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Isometric faces: three steps of the dark surface ramp, so the volume
   reads without any lighting or colour. */
body.vq-page--research .vqr-chain__face {
  stroke: var(--vq-border-strong);
  stroke-width: 1.25;
}
body.vq-page--research .vqr-chain__face--top   { fill: var(--vq-surface-3); }
body.vq-page--research .vqr-chain__face--right { fill: var(--vq-surface-2); }
body.vq-page--research .vqr-chain__face--left  { fill: var(--vq-surface); }

/* Garment glyph, white strokes on the right-hand face. */
body.vq-page--research .vqr-chain__glyph {
  fill: none;
  stroke: var(--vq-text);
  stroke-width: 4.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The link line out of each block (all but the last). ::after is the
   hairline, ::before the NFC node sitting on it.
   Vertical default: the line drops from the block's own mid axis
   (half of the cube width) down through the row gap. */
body.vq-page--research .vqr-chain__block:not(:last-child) .vqr-chain__cube::after,
body.vq-page--research .vqr-chain__block:not(:last-child) .vqr-chain__cube::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.vq-page--research .vqr-chain__block:not(:last-child) .vqr-chain__cube::after {
  left: 50%;
  top: 94.7%;
  height: 44px;
  border-left: 1px solid var(--vq-border-2);
}

body.vq-page--research .vqr-chain__block:not(:last-child) .vqr-chain__cube::before {
  left: 50%;
  top: 94.7%;
  width: 11px;
  height: 11px;
  margin: 16px 0 0 -6px;
  background: var(--vq-bg);
  border: 1px solid var(--vq-text);
  transform: rotate(45deg);
  z-index: 1;
}

body.vq-page--research .vqr-chain__nfc {
  position: absolute;
  left: 50%;
  top: 94.7%;
  margin: 12px 0 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
}

body.vq-page--research .vqr-chain__label {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--vq-text-mid);
  margin: 0;
}

/* Hairline token tag + the diagram's text alternative. */
body.vq-page--research .vqr-chain__token {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  border: 1px solid var(--vq-border-2);
  padding: 8px 14px;
  margin: clamp(36px, 4vw, 56px) 0 0;
}

body.vq-page--research .vqr-chain__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--vq-text-muted);
  max-width: 80ch;
  margin: 16px 0 0;
}

/* ≥720px: the chain runs left to right, four blocks across, label under
   the cube, and the link line crosses the column gap. The breakpoint is
   720 rather than 900 because at tablet width the vertical chain left
   the right half of the rail empty; four 150px blocks read better and
   the mono label simply wraps to two lines. */
@media (min-width: 720px) {
  body.vq-page--research .vqr-chain {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.vq-page--research .vqr-chain__block {
    display: block;
  }

  /* The cube fills its column so the link line, whose width is exactly
     one grid gap, meets the next cube's left vertex instead of stopping
     short in the middle of the column. */
  body.vq-page--research .vqr-chain__cube {
    width: 100%;
    max-width: none;
  }

  body.vq-page--research .vqr-chain__label {
    margin-top: 20px;
  }

  /* 62/230 of the SVG box is the height of the cube's right-hand
     vertex, which is where the line has to leave the block. */
  /* The block is drawn inset 10/200 of the viewBox on each side, so the
     line leaves at 95% and has to cross the gap plus both insets to
     land on the next cube's left vertex. */
  body.vq-page--research .vqr-chain__block:not(:last-child) .vqr-chain__cube::after {
    left: 95%;
    top: 26.95%;
    width: calc(var(--vqr-chain-gap) + 10%);
    height: 0;
    border-left: 0;
    border-top: 1px solid var(--vq-border-2);
  }

  body.vq-page--research .vqr-chain__block:not(:last-child) .vqr-chain__cube::before {
    left: 95%;
    top: 26.95%;
    margin: -6px 0 0 calc(var(--vqr-chain-gap) / 2 + 5% - 6px);
  }

  body.vq-page--research .vqr-chain__nfc {
    left: 95%;
    top: 26.95%;
    margin: -30px 0 0 calc(var(--vqr-chain-gap) / 2 + 5% - 13px);
  }
}

/* Pattern B — membership, three hairline cells, no card fill. */
body.vq-page--research .vqr-member {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vq-border);
  border: 1px solid var(--vq-border);
  width: 100%;
  max-width: none;
  margin: clamp(48px, 6vw, 88px) 0 0;
  padding: 0;
  list-style: none;
}

body.vq-page--research .vqr-member > li {
  background: var(--vq-bg);
  padding: var(--vqr-cell-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 180ms ease-out;
}

body.vq-page--research .vqr-member > li:hover {
  background: var(--vq-surface);
}

body.vq-page--research .vqr-member__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  margin: 0;
}

body.vq-page--research .vqr-member__body {
  font-family: var(--font-text);
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--vq-text-mid);
  margin: 0;
}

@media (min-width: 900px) {
  body.vq-page--research .vqr-member { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  body.vq-page--research .vqr-member > li { transition: none; }
}