/*
  Base layout and components for every brand site. Uses only the tokens below;
  a theme (themes/<name>/theme.css) sets them, and a brand can override any of
  them in site.json "tokens". Do not put colour or font values in this file.
*/
:root {
  /* Surfaces and text */
  --paper: oklch(98% 0.004 250);
  --paper-2: oklch(95% 0.006 250);
  --tile: oklch(99.6% 0.002 250);
  --ink: oklch(22% 0.02 260);
  --ink-2: oklch(45% 0.02 260);
  --line: oklch(88% 0.01 255);

  /* Brand colour and the text on it */
  --band: oklch(42% 0.15 262);
  --band-2: oklch(33% 0.12 262);
  --band-ink: oklch(98% 0.008 250);
  --accent: oklch(78% 0.13 85);

  /* Buy button */
  --buy: var(--band);
  --buy-ink: var(--band-ink);
  --buy-hover: var(--band-2);

  /* Type */
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --display-weight: 800;
  --display-settings: normal;
  --display-case: none;
  --display-tracking: -0.015em;
  --heading-weight: 750;
  --body-settings: normal;

  /* Shape and space */
  --radius: 6px;
  --radius-lg: 10px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 68ch;
  --page: 76rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type scale: about 1.28 between steps, fluid */
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 1.95rem);
  --step-3: clamp(1.95rem, 1.6rem + 1.75vw, 2.9rem);
  --step-4: clamp(2.5rem, 1.85rem + 3.3vw, 4.6rem);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-variation-settings: var(--body-settings);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, p, ul, ol, figure, dl { margin: 0; }
table { border-collapse: collapse; width: 100%; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: var(--radius);
}
.skip:focus { top: 1rem; }

/* Type */
.display, .h1, .h2, .row__name, .guides__title, .faqs__q, .wordmark span, .footer__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-settings);
  text-wrap: balance;
}
.display {
  font-size: var(--step-4);
  font-weight: var(--display-weight);
  line-height: 0.98;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-case);
}
.h1 { font-size: var(--step-3); font-weight: var(--display-weight); line-height: 1.05; letter-spacing: var(--display-tracking); }
.h2 { font-size: var(--step-2); font-weight: var(--heading-weight); line-height: 1.12; letter-spacing: -0.01em; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.eyebrow {
  font-size: var(--step--1); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 0.9rem;
}
.fine { font-size: var(--step--1); color: var(--ink-2); }

/* Masthead */
.masthead { border-bottom: 1px solid var(--line); background: var(--paper); }
.masthead__inner {
  max-width: var(--page); margin: 0 auto; padding: 0.85rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
}
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.wordmark span { font-size: var(--step-1); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-case); }
.nav { display: flex; gap: 0.25rem 1.4rem; overflow-x: auto; scrollbar-width: none; }
.nav a { text-decoration: none; font-weight: 550; padding: 0.35rem 0; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--band); }

/* Buttons and links */
.buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  background: var(--buy); color: var(--buy-ink);
  font-weight: 700; text-decoration: none; line-height: 1.2; text-align: center;
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.buy::after { content: ""; width: 0.55em; height: 0.55em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 0.1rem; }
.buy:hover { background: var(--buy-hover); }
.buy:active { transform: translateY(1px); }
.more { font-weight: 650; text-decoration: underline; text-decoration-color: var(--band); text-decoration-thickness: 2px; }
.more:hover { text-decoration-thickness: 3px; }

.price { font-size: var(--step-1); font-weight: 750; font-variant-numeric: tabular-nums; }
.price span { display: block; font-size: var(--step--1); font-weight: 450; color: var(--ink-2); }
.price--big { font-size: var(--step-2); }

/* Hero: band layout */
.hero--band { background: var(--band); color: var(--band-ink); }
.hero--band .hero__inner {
  max-width: var(--page); margin: 0 auto; padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) 0;
  display: grid; gap: 2.5rem; grid-template-columns: 1fr;
}
.hero--band .lede, .hero--band .eyebrow { color: color-mix(in oklch, var(--band-ink) 82%, var(--band)); }
.hero--band .buy { --buy: var(--band-ink); --buy-ink: var(--band-2); --buy-hover: var(--accent); }
.hero__text { display: grid; gap: 1.3rem; align-content: center; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 0.6rem; }
.more--on-band { text-decoration-color: var(--accent); }
.hero__media {
  background: var(--tile); border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 2rem); margin-bottom: -4rem;
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -28px oklch(20% 0.05 260 / 0.45);
  align-self: end;
}
.hero__media img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.hero__media figcaption { font-size: var(--step--1); color: var(--ink-2); margin-top: 0.75rem; }
/* A room photo fills the tile instead of floating on white. */
.hero__media--photo { padding: 0; overflow: hidden; }
.hero__media--photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.hero__media--photo figcaption { margin: 0; padding: 0.75rem 1rem; }
.hero--band + .section { padding-top: calc(4rem + clamp(2.5rem, 6vw, 5rem)); }
@media (min-width: 52rem) {
  .hero--band .hero__inner { grid-template-columns: 1.15fr 0.85fr; align-items: end; padding-bottom: 0; }
  .hero__text { padding-bottom: 5.5rem; }
}

/* Hero: split layout */
.hero--split { max-width: var(--page); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 0; }
.hero__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr); gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.hero__tile { scroll-snap-align: start; background: var(--tile); border-radius: var(--radius-lg); padding: 1rem; text-decoration: none; display: grid; gap: 0.6rem; }
.hero__tile img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.hero__tile span { font-weight: 650; font-size: var(--step--1); }
.hero--split .hero__text { padding: clamp(2rem, 5vw, 4rem) 0 0; max-width: 52rem; }

/* Sections */
.section { max-width: var(--page); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) 0; }
.section__head { display: grid; gap: 0.6rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); max-width: 48rem; }
.section__intro { color: var(--ink-2); font-size: var(--step-1); line-height: 1.45; }
.section__more { margin-top: 1.5rem; }
main > :last-child { padding-bottom: clamp(3rem, 8vw, 6rem); }

/* Product rows */
.rows { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.row { display: grid; gap: 1.25rem 2.5rem; align-items: center; grid-template-columns: 1fr; }
.row__media { background: var(--tile); border-radius: var(--radius-lg); padding: clamp(0.75rem, 2vw, 1.5rem); display: block; }
.row__media img { aspect-ratio: 1; object-fit: contain; width: 100%; transition: transform 0.5s var(--ease); }
.row__media:hover img { transform: scale(1.025); }
.row__body { display: grid; gap: 0.7rem; justify-items: start; }
.row__count { font-size: var(--step--1); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--band); }
/* A big number, like the number on a race bib: "60 medals". */
.row__big { display: flex; align-items: baseline; gap: 0.5rem; color: var(--band); line-height: 0.85; }
.row__big b {
  font-family: var(--font-display); font-variation-settings: var(--display-settings);
  font-weight: var(--display-weight); font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.row__big span { font-weight: 700; font-size: var(--step-0); color: var(--ink-2); line-height: 1.2; max-width: 14ch; }

/* Many products: two compact rows across, photo beside the text. */
@media (min-width: 48rem) {
  .rows--compact { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
  .rows--compact .row { grid-template-columns: 2fr 3fr; gap: 1.25rem; align-items: start; }
  .rows--compact .row__big b { font-size: clamp(2.5rem, 1.8rem + 2vw, 3.5rem); }
  .rows--compact .row__name { font-size: var(--step-1); }
  .rows--compact .row__line { font-size: var(--step--1); }
}
.rows--compact .row__actions { gap: 0.6rem 1rem; }
.row__name { font-size: var(--step-2); font-weight: var(--heading-weight); line-height: 1.12; }
.row__name a { text-decoration: none; }
.row__name a:hover { text-decoration: underline; }
.row__line { color: var(--ink-2); max-width: 46ch; }
.row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 0.4rem; }
@media (min-width: 48rem) {
  .row { grid-template-columns: 5fr 6fr; }
  .row--flip { grid-template-columns: 6fr 5fr; }
  .row--flip .row__media { order: 2; }
}

/* Numbered guide list */
.guides { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.guides__item { border-bottom: 1px solid var(--line); }
.guides__item a { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(1rem, 3vw, 2.5rem); padding: clamp(1.1rem, 2.5vw, 1.75rem) 0; text-decoration: none; align-items: start; }
.guides__no {
  font-family: var(--font-display); font-variation-settings: var(--display-settings);
  font-weight: var(--display-weight); font-size: var(--step-3); line-height: 0.9; color: var(--band);
  font-variant-numeric: tabular-nums; min-width: 2ch;
}
.guides__text { display: grid; gap: 0.3rem; }
.guides__kind { font-size: var(--step--1); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.guides__title { font-size: var(--step-1); font-weight: var(--heading-weight); line-height: 1.25; }
.guides__desc { color: var(--ink-2); max-width: 62ch; }
.guides__item a:hover .guides__title { text-decoration: underline; text-decoration-color: var(--band); text-decoration-thickness: 2px; }

/* FAQ */
.faqs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faqs__item { padding: 1.4rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.5rem 3rem; }
.faqs__q { font-size: var(--step-1); font-weight: var(--heading-weight); line-height: 1.3; }
.faqs__a { color: var(--ink-2); max-width: var(--measure); }
.faqs__a p + p { margin-top: 0.6rem; }
@media (min-width: 52rem) { .faqs__item { grid-template-columns: 2fr 3fr; } }

/* About strip */
.section--about { display: grid; gap: 1rem; }
.section--about .prose { max-width: var(--measure); }

/* The short answer box. Themes give it a look. */
.answer { border: 1px solid var(--line); background: var(--tile); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; max-width: 46rem; }
.answer__label { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--band); margin-bottom: 0.5rem; }
.answer__text { font-size: var(--step-1); line-height: 1.45; }
.answer__text p + p { margin-top: 0.6rem; }

/* Articles: guides, comparisons, FAQ, about */
.doc, .listpage { max-width: var(--page); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--gutter) 0; }
.doc__head { display: grid; gap: 0.75rem; max-width: 52rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.doc__head .eyebrow { margin-bottom: 0; }
.doc__date { color: var(--ink-2); font-size: var(--step--1); }
.doc .answer { margin-bottom: clamp(2rem, 4vw, 3rem); }
.doc__body { max-width: var(--measure); min-width: 0; }
.doc__grid { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 64rem) {
  .doc__grid { grid-template-columns: minmax(0, var(--measure)) minmax(15rem, 19rem); justify-content: space-between; align-items: start; }
  .rail { position: sticky; top: 1.5rem; }
}

/* Side rail on guides: the products, with price and buy link, always in reach. */
.rail { border-top: 3px solid var(--band); padding-top: 1rem; }
.rail__head { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.5rem; }
.rail__list { list-style: none; padding: 0; }
.rail__item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.rail__media { background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem; display: block; }
.rail__media img { aspect-ratio: 1; object-fit: contain; }
.rail__name { font-weight: 750; line-height: 1.25; text-decoration: none; display: block; }
.rail__name:hover { text-decoration: underline; }
.rail__meta { font-size: var(--step--1); color: var(--ink-2); margin-top: 0.15rem; }
.rail__price { font-weight: 750; font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.rail__buy { display: inline-block; margin-top: 0.3rem; font-size: var(--step--1); font-weight: 700; color: var(--band); text-decoration: underline; text-decoration-thickness: 2px; }
.rail__note { font-size: var(--step--1); color: var(--ink-2); margin-top: 0.75rem; }

.prose { font-size: var(--step-0); line-height: 1.7; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-family: var(--font-display); font-variation-settings: var(--display-settings); font-size: var(--step-2); font-weight: var(--heading-weight); line-height: 1.15; margin-top: 2.6rem; }
.prose h3 { font-size: var(--step-1); font-weight: 700; line-height: 1.3; margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.4rem; }
.prose strong { font-weight: 700; }
.prose a { text-decoration-color: var(--band); text-decoration-thickness: 2px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tile); }
.prose .table-wrap { margin-top: 1.6rem; margin-bottom: 0.4rem; }
.table-wrap table { min-width: 34rem; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.table-wrap th, .table-wrap td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap thead th { background: var(--paper-2); font-weight: 700; }
.table-wrap tr:last-child th, .table-wrap tr:last-child td { border-bottom: 0; }
.specs { min-width: 0 !important; }
.specs th { width: 40%; font-weight: 600; color: var(--ink-2); }

/* Product pick inside an article */
.pick { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem 1.25rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tile); padding: 1rem; margin: 1.8rem 0; }
.pick__media img { aspect-ratio: 1; object-fit: contain; }
.pick__body { display: grid; gap: 0.35rem; justify-items: start; }
.pick__name { font-weight: 750; line-height: 1.3; }
.pick__name a { text-decoration: none; }
.pick__fit { color: var(--ink-2); font-size: var(--step--1); line-height: 1.45; }
.pick__price { font-weight: 750; font-variant-numeric: tabular-nums; }
.pick__price span { font-weight: 450; color: var(--ink-2); font-size: var(--step--1); }
.pick .buy { min-height: 2.6rem; padding: 0.55rem 1rem; margin-top: 0.3rem; font-size: var(--step--1); }
@media (min-width: 40rem) { .pick { grid-template-columns: 9rem 1fr; } }

/* Product page */
.crumbs { max-width: var(--page); margin: 0 auto; padding: 1.25rem var(--gutter) 0; font-size: var(--step--1); color: var(--ink-2); display: flex; gap: 0.5rem; }
.product { max-width: var(--page); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--gutter) 0; display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
.product__info { display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.product__info .eyebrow { margin-bottom: 0; color: var(--band); }
.product__buy { display: grid; gap: 0.75rem; justify-items: start; padding: 1.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: 100%; }
.product__more { padding-bottom: 0; }
.product__more .section > .h2 { margin-bottom: 1.25rem; }
.product__more .section { max-width: calc(var(--measure) + 2 * var(--gutter)); margin-left: max(0px, calc((100% - var(--page)) / 2)); }
@media (min-width: 56rem) {
  .product { grid-template-columns: 7fr 5fr; align-items: start; }
  .gallery { position: sticky; top: 1rem; }
}

.gallery { display: grid; gap: 0.75rem; min-width: 0; }
.gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--radius-lg); background: var(--tile); scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { scroll-snap-align: center; padding: clamp(1rem, 3vw, 2rem); }
.gallery__slide img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.gallery__thumbs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: 0.5rem; }
.gallery__thumbs a { display: block; background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3rem; }
.gallery__thumbs a:hover { border-color: var(--band); }
.gallery__thumbs img { aspect-ratio: 1; object-fit: contain; }

/* Versions of one product: colour or pack size, each with its own price and link. */
.options { width: 100%; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.options caption { text-align: left; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 0.4rem; }
.options th, .options td { padding: 0.6rem 0; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.options th { font-weight: 600; padding-right: 0.75rem; }
.options__price { font-weight: 750; white-space: nowrap; padding-right: 0.75rem !important; }
.options td:last-child { text-align: right; }
.options__buy { display: inline-block; white-space: nowrap; font-weight: 700; color: var(--buy-ink); background: var(--buy); padding: 0.45rem 0.85rem; border-radius: var(--radius); text-decoration: none; }
.options__buy:hover { background: var(--buy-hover); }

.ticks { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.ticks li { position: relative; padding-left: 1.6rem; }
.ticks li::before { content: ""; position: absolute; left: 0.15rem; top: 0.55em; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--band); border-bottom: 2px solid var(--band); transform: rotate(-45deg); }
.plain { padding-left: 1.2rem; display: grid; gap: 0.35rem; }

/* Footer */
.footer { background: var(--ink); color: var(--paper); }
.footer__inner { max-width: var(--page); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 1.5rem; display: grid; gap: 2rem; }
.footer__name { font-size: var(--step-2); font-weight: var(--display-weight); text-transform: var(--display-case); letter-spacing: var(--display-tracking); margin-bottom: 0.5rem; }
.footer__brand p { max-width: 40ch; color: color-mix(in oklch, var(--paper) 75%, var(--ink)); }
.footer__brand p + p { margin-top: 0.75rem; }
.footer__brand a { color: var(--paper); }
.footer__nav { display: grid; gap: 0.5rem; align-content: start; }
.footer__nav a { text-decoration: none; color: color-mix(in oklch, var(--paper) 85%, var(--ink)); }
.footer__nav a:hover { text-decoration: underline; }
.footer__fine { max-width: var(--page); margin: 0 auto; padding: 1.25rem var(--gutter) 2rem; font-size: var(--step--1); color: color-mix(in oklch, var(--paper) 60%, var(--ink)); border-top: 1px solid color-mix(in oklch, var(--paper) 15%, var(--ink)); }
@media (min-width: 48rem) { .footer__inner { grid-template-columns: 2fr 1fr; } }

/* Load motion: the hero text rises once. */
@media (prefers-reduced-motion: no-preference) {
  .hero__text > * { animation: rise 0.8s var(--ease) both; }
  .hero__text > :nth-child(2) { animation-delay: 0.06s; }
  .hero__text > :nth-child(3) { animation-delay: 0.12s; }
  .hero__text > :nth-child(4) { animation-delay: 0.18s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }