/* ---------- Breadcrumbs ---------- */
.crumbs {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 22px 0 0;
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { margin: 0 8px; opacity: 0.5; }
.crumbs .here { color: var(--ink); }

/* ---------- Bike header ---------- */
.bike-header {
  padding: 24px 0 48px;
  border-bottom: 1px solid var(--rule);
}
.bh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
@media (max-width: 980px) { .bh-grid { grid-template-columns: 1fr; gap: 28px; } }
.bh-left { display: flex; flex-direction: column; }

.bh-eyebrow {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.bh-eyebrow .dot { color: var(--rule-2); }
.bh-eyebrow .since { color: var(--ink-3); }

.bh-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin: 0 0 18px;
}
.bh-title .brand-mark {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.bh-tagline {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink-2);
  max-width: 32ch;
  text-wrap: pretty;
  margin: 0 0 22px;
}

/* Quick-facts horizontal strip */
.qf-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0 0 22px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.qf-strip > div {
  padding: 0 14px;
  border-right: 1px dashed var(--rule);
}
.qf-strip > div:first-child { padding-left: 0; }
.qf-strip > div:last-child { border-right: none; padding-right: 0; }
.qf-strip dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.qf-strip dd {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.qf-strip dd.narrow { font-size: 15px; }
.qf-strip dd .sub { font-size: 11px; color: var(--ink-3); margin-left: 1px; }

.bh-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Inline buy strip */
.buy-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.buy-strip-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}
.buy-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: white;
  text-decoration: none;
  color: var(--ink);
  font-size: 12px;
  transition: all 140ms ease;
}
.buy-chip:hover { border-color: var(--accent); color: var(--accent); }
.buy-chip .chip-name { font-weight: 600; }
.buy-chip .chip-price { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.buy-chip:hover .chip-price { color: var(--accent); }
.buy-strip-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-left: auto;
}

/* Hero photo (right side) */
.bh-photo { display: flex; flex-direction: column; gap: 8px; }
.hero-photo {
  position: relative;
  flex: 1;
  min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.hero-photo.tone-deep    { background: linear-gradient(180deg, #2A3142 0%, #1A1F2A 100%); }
.hero-photo.tone-studio  { background: linear-gradient(180deg, #E8E5DD 0%, #C9C4B6 100%); }
.hero-photo.tone-dust    { background: linear-gradient(180deg, #6B5847 0%, #3F3528 100%); }
.hero-photo.tone-macro   { background: linear-gradient(135deg, #1F2530 0%, #0F1115 100%); }
.hp-badge {
  position: absolute; top: 14px; left: 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255,255,255,0.95); color: var(--ink);
  padding: 4px 9px; border-radius: 3px;
}
.hero-photo.tone-studio .hp-badge { background: rgba(15,17,21,0.9); color: white; }
.hp-expand {
  position: absolute; bottom: 14px; right: 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.95); color: var(--ink);
  border: none;
  padding: 8px 12px; border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 140ms;
}
.hp-expand:hover { background: var(--accent); color: white; }
.hp-expand span { font-size: 14px; }
.hero-thumbs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.h-thumb {
  aspect-ratio: 1;
  border-radius: 3px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 120ms;
  position: relative; overflow: hidden;
  /* GeneratePress's default <button> styling adds 10px/20px padding,
     which compresses a 240×240 thumb image down to ~27×47px inside
     the box. Zero it out explicitly so the image fills the button. */
  padding: 0;
  margin: 0;
  background: none;
}
.h-thumb.active { border-color: var(--accent); }
.h-thumb.tone-deep    { background: linear-gradient(180deg, #2A3142 0%, #1A1F2A 100%); }
.h-thumb.tone-studio  { background: linear-gradient(180deg, #E8E5DD 0%, #C9C4B6 100%); }
.h-thumb.tone-dust    { background: linear-gradient(180deg, #6B5847 0%, #3F3528 100%); }
.h-thumb.tone-macro   { background: linear-gradient(135deg, #1F2530 0%, #0F1115 100%); }

.spec-card { display: none; }

/* ---------- Geometry ---------- */
.geo-grid { display: block; }
.geo-gg-link {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: all 140ms ease;
  max-width: 360px;
}
.geo-gg-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.geo-gg-link .gg-mark {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: white;
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 6px;
  flex-shrink: 0;
}
.geo-gg-link .gg-body { display: flex; flex-direction: column; gap: 2px; }
.geo-gg-link .gg-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.geo-gg-link .gg-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.geo-gg-link:hover .gg-title { color: var(--accent); }

.geo-table {
  border-top: 2px solid var(--ink);
}
.geo-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.geo-row.geo-head {
  padding: 8px 4px;
  border-bottom: 1px solid var(--ink);
}
.geo-row.geo-head > div {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.geo-row .geo-k { font-size: 14px; color: var(--ink-2); }
.geo-row .geo-v {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.geo-row .geo-v .u { font-size: 12px; color: var(--ink-3); margin-left: 2px; }
.geo-row .geo-n { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 600px) {
  .geo-row { grid-template-columns: 1fr 1fr; }
  .geo-row .geo-n { grid-column: 1 / -1; padding-top: 4px; }
  .geo-row.geo-head .geo-n { display: none; }
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 140ms ease;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--accent); color: white;
}
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost {
  background: white;
  border-color: var(--rule-2);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Spec sidecar */
.spec-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.spec-card h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.spec-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 13px;
}
.spec-row:last-child { border-bottom: none; }
.spec-row .k { color: var(--ink-2); }
.spec-row .v { font-family: var(--mono); color: var(--ink); font-weight: 500; }

/* ---------- Section header ---------- */
.det-section { padding: 64px 0; border-bottom: 1px solid var(--rule); }
.det-section:last-of-type { border-bottom: none; }
/* .section-head-2 styles moved to theme.css since they're shared with
   the article single template's "More from the news desk" header. */

/* Eyebrow-only section header — used for the editorial narrative,
   where the visible section structure is owned by the inner H2s
   (Hot Take, The Brand, The Bike, The Last Word). The outer wrapper
   just labels the section as editorial and shows read time. */
.section-head-eyebrow {
  margin-bottom: 16px;
}
.section-head-eyebrow .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Photo gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 12px;
}
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px 180px; }
}
.g-cell {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease;
}
.g-cell:hover { transform: scale(1.005); }
.g-cell.tone-deep    { background: linear-gradient(180deg, #2A3142 0%, #1A1F2A 100%); }
.g-cell.tone-studio  { background: linear-gradient(180deg, #E8E5DD 0%, #C9C4B6 100%); }
.g-cell.tone-dust    { background: linear-gradient(180deg, #6B5847 0%, #3F3528 100%); }
.g-cell.tone-macro   { background: linear-gradient(135deg, #1F2530 0%, #0F1115 100%); }
.g-cell.span-2 { grid-row: span 2; }
.g-cell .photo-label {
  position: absolute; bottom: 12px; left: 14px;
  font-family: var(--mono); font-size: 10px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}
.g-cell.tone-studio .photo-label { color: rgba(15,17,21,0.5); }
.g-cell .badge {
  position: absolute; top: 12px; left: 14px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255,255,255,0.95); color: var(--ink);
  padding: 3px 8px; border-radius: 3px;
}
.g-cell.tone-studio .badge { background: rgba(15,17,21,0.9); color: white; }
.g-thumbs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.g-thumb {
  aspect-ratio: 1;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 120ms;
}
.g-thumb.active { border-color: var(--accent); }
.g-thumb.tone-deep    { background: linear-gradient(180deg, #2A3142 0%, #1A1F2A 100%); }
.g-thumb.tone-studio  { background: linear-gradient(180deg, #E8E5DD 0%, #C9C4B6 100%); }
.g-thumb.tone-dust    { background: linear-gradient(180deg, #6B5847 0%, #3F3528 100%); }
.g-thumb.tone-macro   { background: linear-gradient(135deg, #1F2530 0%, #0F1115 100%); }

/* ---------- Narrative ---------- */
.narrative-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
}
@media (max-width: 900px) { .narrative-grid { grid-template-columns: 1fr; gap: 32px; } }
.narrative {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 64ch;
}
.narrative p { margin: 0 0 22px; }
/* Drop cap on the first paragraph of the narrative — comes after the
   first <h3> (Hot Take). */
.narrative h3:first-of-type + p::first-letter,
.narrative > p:first-child::first-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.85;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--accent);
}
/* Sub-section H3s — the four editorial beats (Hot Take / The Brand /
   The Bike / The Last Word). Visually subordinate to the page-level
   "The Profile" H2 so the four read as parts of one article rather
   than sibling articles. Mono eyebrow style sets them apart from
   regular display text and signals "section marker." */
.narrative h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.narrative h3:first-of-type {
  margin-top: 0;
}
.aside-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  font-size: 13px;
  align-self: start;
  position: sticky;
  top: 80px;
}
.aside-card h4 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.aside-card ul { padding-left: 18px; margin: 0; color: var(--ink-2); }
.aside-card li { margin-bottom: 8px; line-height: 1.5; }

/* ---------- Buy It ---------- */
.buy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .buy-grid { grid-template-columns: 1fr; } }
.buy-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 24px 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, transform 140ms ease;
}
.buy-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.buy-logo {
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.buy-logo svg { max-width: 100%; height: 100%; }
.buy-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  margin-bottom: 14px;
}
.buy-from { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--ink); }
.buy-from .pre { font-family: var(--sans); font-size: 11px; color: var(--ink-3); font-weight: 400; margin-right: 4px; }
.buy-stock { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; text-align: right; max-width: 50%; line-height: 1.4; }
.buy-cta {
  text-align: center;
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  padding: 10px 0 0;
}
.buy-card:hover .buy-cta { color: var(--accent-deep); }

/* ---------- Reviews (pullquote style) ---------- */
.review-list {
  display: flex; flex-direction: column; gap: 0;
}
.review-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.review-row:first-child { padding-top: 0; }
.review-row:last-child { border-bottom: none; }
@media (max-width: 760px) { .review-row { grid-template-columns: 1fr; gap: 16px; } }
.review-row .rv-source-logo {
  height: 40px;
  display: flex; align-items: center;
  margin-bottom: 8px;
}
.review-row .rv-source-logo svg { max-height: 100%; max-width: 100%; }
.review-row .rv-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.review-row .rv-quote {
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 18px;
  padding: 0 0 0 56px;
  text-wrap: pretty;
}
.review-row .rv-quote::before {
  content: "\201C";
  position: absolute;
  left: 0; top: -18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: var(--accent);
  font-feature-settings: "kern";
}
.review-row .rv-quote::after {
  content: "\201D";
  display: inline;
  margin-left: 2px;
  color: var(--accent);
  font-weight: 700;
}
.review-row .rv-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}
.review-row .rv-link:hover { color: var(--accent-deep); text-decoration: underline; }

/* ---------- Videos ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .video-grid { grid-template-columns: 1fr; } }
.video-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 140ms ease;
}
.video-card:hover { border-color: var(--accent); }
.video-card .vid-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2A3142 0%, #0F1115 100%);
}
.video-card .vid-thumb .play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: grid; place-items: center;
  transition: background 120ms;
}
.video-card:hover .vid-thumb .play { background: var(--accent); }
.video-card .vid-thumb .play::after {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 4px;
  transition: border-color 120ms;
}
.video-card:hover .vid-thumb .play::after { border-left-color: white; }
.video-card .vid-duration {
  position: absolute; bottom: 8px; right: 10px;
  font-family: var(--mono); font-size: 11px;
  background: rgba(15,17,21,0.85); color: white;
  padding: 2px 7px; border-radius: 3px;
}
.video-card .vid-tier {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--paper); color: var(--accent-deep);
  padding: 3px 7px; border-radius: 3px;
}
.video-card .vid-body { padding: 18px 20px 20px; }
.video-card .vid-meta {
  display: flex; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.video-card .vid-meta .dot { color: var(--rule-2); }
.video-card .vid-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: var(--primary);
  margin: 0 0 10px;
  text-wrap: pretty;
}
.video-card .vid-blurb {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- Similar bikes ---------- */
.similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .similar-grid { grid-template-columns: 1fr; } }
.similar-grid .bike-card { box-shadow: none; }