/* =============================================================
   VELOQUE — OVERVIEW PAGE (/projects/veloque)
   Page-scoped layout layer. Loaded AFTER pages/veloque.css and
   only by public/projects/veloque.html.

   Everything here is prefixed `.vqo-` (or scoped under a `.vqo-*`
   ancestor) so it can never collide with the other Veloque
   chapter pages, which share pages/veloque.css.

   Follows docs/veloque-augment-reference.md:
   full-bleed section + inner rail + hairline dividers, hairline
   grids (gap:1px, radius 0, no shadow), asymmetric splits,
   stat strips as border-block rules (no cards) with mono
   tabular numbers, mono eyebrows / labels / captions.
   Grayscale only — every color comes from a --vq-* token.
   ============================================================= */

/* ── Rail alignment ───────────────────────────────────────────
   The page rail is left-aligned next to the sidebar (set in
   veloque.css). The hero row still centred itself; align it with
   the rest of the page so the hero, the meta bento and every
   section share one left edge. */
.vqo-main .vq-hero-bento__row {
  margin: 0;
  align-items: center;
}

/* Meta bento sits on the same rail; the article it lives in no
   longer carries the section below it, so drop its bottom pad. */
.vqo-detail--top {
  padding-bottom: 0;
}

.vqo-main .bento-info--veloque {
  margin-bottom: 0;
}

/* =============================================================
   1. INTRO — "The Project"
   Promoted out of .vq-detail to a direct child of <main> so its
   media can run the full width of the page column while the
   prose stays on the 1600px rail.
   ============================================================= */
.vqo-intro {
  padding-inline: var(--vq-page-pad-x);
  padding-top: clamp(56px, 8vh, 96px);
  margin-bottom: 0;
}

/* .vq-section::before draws the section hairline offset by the
   rail padding, which it needs inside .vq-detail. Here the
   section owns the padding itself, so the rule starts at 0 —
   otherwise it would overflow the page to the left. */
.vqo-intro::before {
  left: 0;
  right: 0;
}

.vqo-rail {
  max-width: calc(var(--vq-page-max) - 2 * var(--vq-page-pad-x));
}

/* 4-beat opener: eyebrow → h2 → one-sentence lead → meta row */
.vqo-lead {
  font-family: var(--font-text);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--vq-text-mid);
  max-width: 768px;
  margin: 0 0 24px;
}

.vqo-lead strong {
  color: var(--vq-text);
  font-weight: 500;
}

.vqo-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  margin: 0;
}

/* Brand-style key row: one mono line stating the style explicitly.
   Reads as a definition row (key + chips), not as buttons. */
.vqo-style {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 16px 0 0;
}

.vqo-style__key,
.vqo-style__chip {
  font-family: var(--font-mono);
  font-size: var(--fs-11, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

.vqo-style__key {
  color: var(--vq-text);
}

.vqo-style__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
}

.vqo-style__chip {
  color: var(--vq-text-muted);
  border: 1px solid var(--vq-border-2);
  padding: 6px 10px;
}

@media (max-width: 640px) {
  .vqo-style { gap: 8px; }
  .vqo-style__chips { gap: 6px; }
  .vqo-style__chip { padding: 5px 8px; letter-spacing: 0.1em; }
}

/* Tighten the intro h2's bottom gap: the lead follows immediately. */
.vqo-intro .vq-section__title {
  margin-bottom: 24px;
}

/* ── Stepped process grid (reference pattern G, as rows) ──────
   Five steps read as a sequence, so they are rows of one hairline
   grid rather than cells of a 5-up strip: mono index, title (a
   link to the chapter when one exists), one line of body. */
.vqo-steps {
  list-style: none;
  margin: clamp(48px, 6vh, 72px) 0 0;
  padding: 0;
  border-top: 1px solid var(--vq-border-2);
}

.vqo-step {
  display: grid;
  grid-template-columns: 110px minmax(0, 0.8fr) minmax(0, 2.4fr);
  gap: clamp(20px, 2.5vw, 48px);
  align-items: start;
  padding-block: clamp(24px, 2.8vh, 36px);
  border-bottom: 1px solid var(--vq-border-2);
}

.vqo-step__index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  padding-top: 6px;
  white-space: nowrap;
}

.vqo-step__title {
  font-family: var(--font-headings);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--vq-text);
  margin: 0;
}

.vqo-step__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.vqo-step__title a:hover,
.vqo-step__title a:focus-visible {
  background-size: 100% 1px;
}

.vqo-step__body {
  font-family: var(--font-text);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--vq-text-mid);
  margin: 0;
  /* Was 62ch, which left ~350px of the rail empty on a 16" screen.
     75ch is the readability ceiling from the brief. */
  max-width: 75ch;
}

/* The link's visual size stays 11px mono; the 44px tap target comes
   from the inline-flex box + vertical padding, so the row rhythm is
   unchanged but the hit area passes WCAG 2.5.8. */
.vqo-step__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  padding-block: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  text-decoration: none;
  transition: color 0.18s ease-out;
}

.vqo-step__cta:hover,
.vqo-step__cta:focus-visible {
  color: var(--vq-text);
}

.vqo-step__cta:focus-visible,
.vqo-step__title a:focus-visible {
  outline: 1px solid var(--vq-text);
  outline-offset: 2px;
}

/* Step titles are links too. The hit area is expanded with a
   transparent ::before rather than padding, so the animated
   underline stays pinned to the text baseline. */
.vqo-step__title a {
  display: inline-block;
  position: relative;
}

.vqo-step__title a::before {
  content: "";
  position: absolute;
  inset: -11px 0;
}

.vqo-step__cta i {
  font-size: 12px;
  vertical-align: -1px;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
}

.vqo-step__cta:hover i {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .vqo-step__title a,
  .vqo-step__cta i {
    transition: none;
  }
  .vqo-step__cta:hover i {
    transform: none;
  }
}

/* ── Intro statement + market numbers ────────────────────── */
.vqo-intro .vq-highlight {
  margin: clamp(56px, 7vh, 88px) 0 0;
}

/* =============================================================
   Stat strip — reference pattern D
   No cards: rules top and bottom only, numbers sit on the page,
   mono + tabular-nums, mono provenance caption above.
   Column count per instance via --vqo-stat-cols.
   ============================================================= */
.vqo-provenance {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  margin: clamp(40px, 5vh, 56px) 0 20px;
}

.vqo-statstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
  background: none;
  border: none;
  border-block: 1px solid var(--vq-border-2);
  border-radius: 0;
  padding-block: clamp(32px, 4vh, 48px);
  margin: 0;
  overflow: visible;
}

.vqo-statstrip .vq-stat {
  background: none;
  padding: 0;
  gap: 12px;
}

.vqo-statstrip .vq-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.vqo-statstrip .vq-stat__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.45;
  color: var(--vq-text-muted);
}

@media (min-width: 768px) {
  .vqo-statstrip {
    grid-template-columns: repeat(var(--vqo-stat-cols, 4), minmax(0, 1fr));
    gap: 32px clamp(32px, 4vw, 64px);
  }
}

/* =============================================================
   2. FULL-WIDTH BENTO
   Breaks out of the intro's rail padding to span the whole page
   column, edge to edge. Hairline gaps, zero radius, cover crops.
   Cyclist photography is the dominant tile.
   ============================================================= */
.vqo-intro .vqo-bento {
  margin: clamp(64px, 8vh, 104px) calc(-1 * var(--vq-page-pad-x)) 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.05fr;
  /* Row 2 is sized by its content: the navigation-bar screenshot is
     a 5.3:1 strip, so letting it set the row height keeps the tile
     free of dead space instead of centring a thin image in a tall
     cell. */
  grid-template-rows: clamp(300px, 30vw, 470px) auto;
  grid-template-areas:
    "cyclist cyclist thumb  label"
    "cyclist cyclist navbar navbar";
  gap: 1px;
  background: var(--vq-border-2);
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.vqo-intro .vqo-bento .vq-hero-bento__item {
  background: var(--vq-bg);
  border-radius: 0;
}

.vqo-intro .vqo-bento .vq-hero-bento__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The navigation-bar screenshot is a wide, short piece of UI:
   cropping it would cut the dropdown off, so it stays contained
   on a lifted surface. Every photographic tile is cover. */
.vqo-intro .vqo-bento .vq-hero-bento__item--navbar {
  display: flex;
  background: var(--vq-surface-2);
}

.vqo-intro .vqo-bento .vq-hero-bento__item--navbar img {
  height: auto;
  object-fit: contain;
  align-self: stretch;
}

@media (max-width: 1100px) {
  .vqo-intro .vqo-bento {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "cyclist cyclist"
      "thumb   label"
      "navbar  navbar";
  }
  .vqo-intro .vqo-bento .vq-hero-bento__item--cyclist { aspect-ratio: 16 / 9; }
  .vqo-intro .vqo-bento .vq-hero-bento__item--thumb   { aspect-ratio: 16 / 9; }
  .vqo-intro .vqo-bento .vq-hero-bento__item--label   { aspect-ratio: 4 / 3; }
  .vqo-intro .vqo-bento .vq-hero-bento__item--thumb   { aspect-ratio: 4 / 3; }
  /* The navbar strip sizes itself from its own 5.3:1 image. */
  .vqo-intro .vqo-bento .vq-hero-bento__item--navbar  { aspect-ratio: auto; }
}

@media (max-width: 640px) {
  .vqo-intro .vqo-bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cyclist"
      "thumb"
      "navbar"
      "label";
  }
  .vqo-intro .vqo-bento .vq-hero-bento__item--thumb,
  .vqo-intro .vqo-bento .vq-hero-bento__item--label { aspect-ratio: 16 / 9; }
  .vqo-intro .vqo-bento .vq-hero-bento__item--navbar { aspect-ratio: auto; }
}

@media (max-width: 900px) {
  .vqo-step {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px 20px;
  }
  .vqo-step__index { grid-row: span 2; padding-top: 4px; }
  .vqo-step__body { max-width: none; }
}

@media (max-width: 560px) {
  .vqo-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .vqo-step__index { grid-row: auto; padding-top: 0; }
}

/* =============================================================
   3. THE BRIEF (statement band)
   The two requirement lists become a 2-up hairline grid: rules,
   not boxes, so the background photograph still reads through.
   ============================================================= */
/* One line naming the style right under the brief quote. */
.vqo-brief-style {
  font-family: var(--font-text);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--vq-text-mid);
  max-width: 62ch;
  margin: 24px 0 0;
}

.vqo-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(40px, 5vh, 64px);
  border-top: 1px solid var(--vq-border-2);
}

.vqo-brief-col {
  padding: clamp(24px, 3vw, 40px) 0;
}

.vqo-brief-col + .vqo-brief-col {
  border-left: 1px solid var(--vq-border-2);
  padding-left: clamp(24px, 3vw, 48px);
}

.vqo-brief-col .vq-section__label {
  margin-bottom: 20px;
}

.vqo-brief-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vqo-brief-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.vqo-brief-item__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vq-text-muted);
  padding-top: 5px;
}

.vqo-brief-item__text {
  font-family: var(--font-text);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--vq-text-mid);
  margin: 0;
  max-width: 52ch;
}

@media (max-width: 900px) {
  .vqo-brief-grid { grid-template-columns: minmax(0, 1fr); }
  .vqo-brief-col + .vqo-brief-col {
    border-left: none;
    border-top: 1px solid var(--vq-border-2);
    padding-left: 0;
  }
}

/* =============================================================
   4. THE DECISION — asymmetric media/text row (pattern C, 1.4:1)
   ============================================================= */
.vqo-decision-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(48px, 6vh, 72px);
}

.vqo-decision-row .vq-section__body {
  max-width: none;
  margin-bottom: 0;
}

.vqo-decision-row .vq-decisions {
  margin-top: 0;
  border-top: 1px solid var(--vq-border-2);
}

.vqo-decision-row .vq-decision {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 20px;
  padding-top: 24px;
  border-bottom: none;
}

.vqo-decision-row .vq-decision__num { grid-row: span 2; }

@media (max-width: 1024px) {
  .vqo-decision-row { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================
   5. OUTCOME — the page's one centred statement + stat strip
   ============================================================= */
.vqo-outcome__head {
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(48px, 6vh, 72px);
}

.vqo-outcome__head .vq-section__title {
  line-height: 1.02;
  letter-spacing: -0.032em;
  max-width: none;
  margin-bottom: 24px;
}

.vqo-outcome__head .vq-section__body {
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: 0;
}

.vqo-outcome .vqo-provenance {
  text-align: center;
}

/* =============================================================
   6. CHAPTERS — the page's key navigation, hairline grid 4-up
   Overrides the light-surface chapter strip from veloque.css
   (that variant belongs to the light chapter sub-pages); on the
   black overview it has to be a dark hairline grid.
   ============================================================= */
.vqo-chapters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--vq-border-2);
  border: 1px solid var(--vq-border-2);
  margin-top: clamp(40px, 5vh, 64px);
  margin-bottom: 0;
  overflow: hidden;
}

.vqo-chapters .vq-chapter-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--vq-bg);
  padding: clamp(24px, 2.4vw, 40px);
  min-height: 200px;
  transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.vqo-chapters .vq-chapter-link:hover,
.vqo-chapters .vq-chapter-link:focus-visible {
  background: var(--vq-surface-2);
}

.vqo-chapters .vq-chapter-link__num {
  color: var(--vq-text-muted);
}

.vqo-chapters .vq-chapter-link__title {
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.15;
  color: var(--vq-text);
  margin-top: 4px;
}

.vqo-chapters .vq-chapter-link:hover .vq-chapter-link__title {
  color: var(--vq-text);
}

.vqo-chapters .vq-chapter-link__sub {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--vq-text-muted);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.5;
}

.vqo-chapter-link__go {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  transition: color 0.18s ease-out;
}

.vqo-chapters .vq-chapter-link:hover .vqo-chapter-link__go {
  color: var(--vq-text);
}

@media (max-width: 1024px) {
  .vqo-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .vqo-chapters { grid-template-columns: minmax(0, 1fr); }
  .vqo-chapters .vq-chapter-link { min-height: 0; }
  .vqo-chapter-link__go { padding-top: 16px; }
}

/* =============================================================
   7. REFLECTION — 2-up hairline grid
   ============================================================= */
.vqo-reflection .vq-keypoints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--vq-border-2);
  border: 1px solid var(--vq-border-2);
  margin-top: clamp(40px, 5vh, 64px);
}

.vqo-reflection .vq-keypoint {
  background: var(--vq-bg);
  border-bottom: none;
  padding: clamp(24px, 2.4vw, 40px);
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 20px;
  margin: 0;
}

/* Five learnings in a 2-up grid would leave a lone cell on the
   last row; the closing one spans the full width instead. */
.vqo-reflection .vq-keypoint:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .vqo-reflection .vq-keypoints { grid-template-columns: minmax(0, 1fr); }
  .vqo-reflection .vq-keypoint { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
}

/* =============================================================
   8. SECTION SEPARATION
   Every .vq-section already draws its own top hairline, so the
   standalone <hr> between the decision and the outcome doubled
   both the rule and the gap. Rules, not whitespace: keep the
   section hairline, drop the extra divider on this page.
   ============================================================= */
.vqo-main .vq-divider {
  display: none;
}


/* =============================================================
   9. FIX ROUND 1 — page-scoped corrections
   ============================================================= */

/* ── P0 #13 · THE BRIEF legibility ───────────────────────────
   The mono labels sat directly on the background photograph
   (measured 2.0:1 / 2.87:1). The content grid spans the whole
   rail, so a one-sided gradient would not cover it: the photo is
   dimmed further and a horizontal scrim runs edge to edge, and
   every mono label on the band goes to full white. */
.vqo-main .vq-statement__bg img {
  opacity: 0.4;
}

.vqo-main .vq-statement__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.74) 55%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

.vqo-main .vq-statement__content .vq-section__label {
  color: var(--vq-text);
}

.vqo-main .vqo-brief-item__num {
  color: var(--vq-text-mid);
}

/* ── P2 #15 · hero work-type badge ───────────────────────────
   styles.css tints it periwinkle (rgba(170,172,241,.16)); the
   Veloque pages are grayscale only. */
.vqo-main .work-type--personal {
  background: rgba(255, 255, 255, 0.1);
  color: var(--vq-text);
}

/* ── P2 #16 · tools marquee ──────────────────────────────────
   Figma and Shopify ship full-color marks. Desaturate them so the
   strip reads grayscale, and let color return on hover. */
.vqo-main .bento-marquee__logo {
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.24s ease-out, opacity 0.24s ease-out;
}

/* Marks shipped black-on-transparent still need their invert(). */
.vqo-main .bento-marquee__logo--invert {
  filter: invert(1) grayscale(1);
}

.vqo-main .bento-marquee__item:hover .bento-marquee__logo {
  filter: grayscale(0);
  opacity: 1;
}

.vqo-main .bento-marquee__item:hover .bento-marquee__logo--invert {
  filter: invert(1) grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
  .vqo-main .bento-marquee__logo { transition: none; }
}