@import url('/assets/css/fonts.css');
@import url('/assets/css/tokens.css');

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); margin-top: var(--s-7); }
h3 { font-size: var(--step-2); font-weight: 600; margin-top: var(--s-6); }
h4 { font-size: var(--step-1); font-weight: 600; margin-top: var(--s-5); }
h5, h6 { font-size: var(--step-0); font-weight: 600; margin-top: var(--s-5); }

p { margin: 0 0 var(--s-4); }

a {
  color: var(--anodize);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--anodize-deep); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-2);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.35em; }
li { margin-bottom: var(--s-2); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--anodize);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  z-index: 100;
  border-radius: 0 0 var(--r-2) 0;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wide));
  margin-inline: auto;
}

.wrap--prose { width: min(100% - var(--gutter) * 2, var(--measure)); }

main { display: block; }

.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-6); }

/* The measure rule.
   A ticked hairline, borrowed from the axis of a geometry chart. It is the
   site's one structural flourish and it earns its place by marking where one
   band of information ends and the next begins — the same job a rule does on
   a spec sheet. */
.measure-rule {
  height: 9px;
  border-top: 1px solid var(--rule-strong);
  background-image: repeating-linear-gradient(
    to right,
    var(--rule-strong) 0 1px,
    transparent 1px 32px
  );
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: top left;
  margin-block: var(--s-7);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
  flex-wrap: wrap;
}

.brandmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
}
.brandmark:hover { color: var(--ink); }
.brandmark__mark { color: var(--anodize); }

.nav {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  align-items: center;
}

.nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: var(--s-1);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--anodize);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.crumbs {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  padding-block: var(--s-4) 0;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
}
.crumbs li { margin: 0; }
.crumbs li + li::before {
  content: '/';
  margin-right: var(--s-2);
  color: var(--rule-strong);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--anodize); text-decoration: underline; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-block: var(--s-8) var(--s-7); }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anodize);
  margin-bottom: var(--s-3);
  display: block;
}

.hero h1 {
  font-size: clamp(var(--step-4), 6vw, var(--step-6));
  max-width: 20ch;
}

.hero__lede {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 58ch;
  margin-bottom: 0;
}

/* ==========================================================================
   Type grid — the front door
   ========================================================================== */

.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.type-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--s-5);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.type-card:hover {
  border-color: var(--anodize);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.type-card h2, .type-card h3 {
  font-size: var(--step-2);
  margin: 0;
}
.type-card a { text-decoration: none; color: var(--ink); }
.type-card a:hover { color: var(--anodize); }
/* The whole card is the target, not just the words in the heading. */
.type-card a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.type-card { position: relative; }

.type-card__blurb {
  font-size: var(--step--1);
  color: var(--ink-2);
  margin: 0;
}

.type-card__meta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   Brand list
   ========================================================================== */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-chip {
  position: relative;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: var(--s-4);
  transition: border-color var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease-out);
}
.brand-chip:hover { border-color: var(--anodize); background: var(--anodize-tint); }

.brand-chip a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
}
.brand-chip a::after { content: ''; position: absolute; inset: 0; }
.brand-chip:hover a { color: var(--anodize-deep); }

.brand-chip__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  margin-top: var(--s-1);
}

/* ==========================================================================
   Model table — the core artefact
   ========================================================================== */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  background: var(--surface);
  /* A shadow at the right edge tells you there is more table off-screen. */
  background-image: linear-gradient(to right, transparent, rgb(20 35 43 / 0.05));
  background-position: right;
  background-size: 18px 100%;
  background-repeat: no-repeat;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--step--1);
}

caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  caption-side: top;
}

th, td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

tbody th[scope='row'] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--ink);
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

tbody tr { transition: background var(--t-fast) var(--ease-out); }
tbody tr:hover { background: var(--anodize-tint); }

/* Numeric columns line up on the mono. */
td.num, th.num { font-family: var(--font-mono); white-space: nowrap; }

/* ==========================================================================
   The travel spectrum — the signature element
   ==========================================================================

   A mountain bike's suspension travel is the number that decides what ground
   it suits, and "160 mm" means nothing to somebody buying their first bike.
   The bar places the figure on a fixed 80–220 mm scale, so a reader sees at a
   glance that one bike sits near the cross-country end and another near the
   downhill end without being taught the units first.

   The scale is fixed across every table on the site, which is the only reason
   two brands can be compared by looking at them.
   ========================================================================== */

.travel {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 11rem;
}

.travel__figure {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
  /* Fixed, not min-width. "200 / 200" is wider than "100 / —", and letting the
     figure size to its content made every track a different length — so a
     100 mm bar was drawn against a longer scale than a 200 mm one and the rows
     could not honestly be compared by eye. Nine mono characters fits the
     widest figure exactly. */
  width: 9ch;
  flex: none;
  text-align: right;
}

.travel__track {
  position: relative;
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.travel__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: 999px;
}

.travel__fill[data-band='1'] { background: var(--travel-1); }
.travel__fill[data-band='2'] { background: var(--travel-2); }
.travel__fill[data-band='3'] { background: var(--travel-3); }
.travel__fill[data-band='4'] { background: var(--travel-4); }
.travel__fill[data-band='5'] { background: var(--travel-5); }

/* Bar length, in steps of five per cent.
 *
 * These are classes rather than an inline width for one reason: the site ships
 * a Content-Security-Policy of `style-src 'self'`, and an inline style
 * attribute is exactly what that forbids. The bars would have been blank in
 * production and correct on every machine that built them.
 *
 * Five per cent of the 80–220 mm scale is 7 mm, which is finer than the
 * increments manufacturers actually build in, so nothing is lost by rounding.
 *
 * There is deliberately no animation here. The length of the bar *is* the
 * information, and growing it from zero would only delay the comparison the
 * reader came to make. */
.travel__fill[data-w='5']   { width: 5%; }
.travel__fill[data-w='10']  { width: 10%; }
.travel__fill[data-w='15']  { width: 15%; }
.travel__fill[data-w='20']  { width: 20%; }
.travel__fill[data-w='25']  { width: 25%; }
.travel__fill[data-w='30']  { width: 30%; }
.travel__fill[data-w='35']  { width: 35%; }
.travel__fill[data-w='40']  { width: 40%; }
.travel__fill[data-w='45']  { width: 45%; }
.travel__fill[data-w='50']  { width: 50%; }
.travel__fill[data-w='55']  { width: 55%; }
.travel__fill[data-w='60']  { width: 60%; }
.travel__fill[data-w='65']  { width: 65%; }
.travel__fill[data-w='70']  { width: 70%; }
.travel__fill[data-w='75']  { width: 75%; }
.travel__fill[data-w='80']  { width: 80%; }
.travel__fill[data-w='85']  { width: 85%; }
.travel__fill[data-w='90']  { width: 90%; }
.travel__fill[data-w='95']  { width: 95%; }
.travel__fill[data-w='100'] { width: 100%; }

/* The scale legend, printed once above a table so the bars mean something. */
.travel-key {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.travel-key__ramp {
  height: 6px;
  width: 8rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--travel-1), var(--travel-2), var(--travel-3), var(--travel-4), var(--travel-5)
  );
}

/* ==========================================================================
   Prose — guides and gear bodies
   ========================================================================== */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose img { display: block; margin-block: var(--s-5); }
.prose table { font-size: var(--step--1); }
.prose > .table-scroll { margin-block: var(--s-5); }

.prose blockquote {
  margin: var(--s-5) 0;
  padding-left: var(--s-5);
  border-left: 3px solid var(--anodize);
  color: var(--ink-2);
  font-style: italic;
}

/* Spec sheets recovered from the old product blocks. */
.specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  font-size: var(--step--1);
}
.specs dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 0.15em;
}
.specs dd { margin: 0; font-family: var(--font-mono); }

/* ==========================================================================
   Notes and meta
   ========================================================================== */

.note {
  border-left: 3px solid var(--anodize);
  background: var(--anodize-tint);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  font-size: var(--step--1);
  color: var(--ink-2);
  margin-block: var(--s-5);
}
.note strong { color: var(--ink); }

.page-meta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

/* ==========================================================================
   Related / onward links
   ========================================================================== */

.onward {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.onward li {
  position: relative;
  margin: 0;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  transition: border-color var(--t-mid) var(--ease-out);
}
.onward li:hover { border-color: var(--anodize); }
.onward a { text-decoration: none; font-family: var(--font-display); font-weight: 600; }
.onward a::after { content: ''; position: absolute; inset: 0; }
.onward span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--ink-2);
  margin-top: var(--s-2);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  margin-top: var(--s-9);
  padding-block: var(--s-7) var(--s-6);
  font-size: var(--step--1);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s-6);
}

.footer-cols h2 {
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-3);
  font-weight: 600;
}

.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: var(--s-2); }
.footer-cols a { color: var(--ink-2); text-decoration: none; }
.footer-cols a:hover { color: var(--anodize); text-decoration: underline; }

.colophon {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: var(--step--2);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .type-card:hover { transform: none; }
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 40rem) {
  .site-header { position: static; }
  .site-header__inner { gap: var(--s-3); }
  .nav { gap: var(--s-4); width: 100%; }
  thead th { position: static; }
  .hero { padding-block: var(--s-6) var(--s-5); }
  .travel { min-width: 8rem; }
}

@media print {
  .site-header, .site-footer, .crumbs, .onward { display: none; }
  body { background: #fff; color: #000; }
  .table-scroll { border: 0; overflow: visible; }
}