/* Hallmark · genre: editorial · theme: custom "Jaxmark" (logo-derived) · design-system: design.md · designed-as-app
 * DNA source: /wp-content/uploads/2020/05/jaxlogod.svg
 *   · one family, two extremes — Archivo 800 caps (JAX) over Archivo 200 tracked caps (GARAGE)
 *   · orange+blue appear ONLY as the paired bar device (twice a page) and on the
 *     sale price. Every hover, border and marker is ink or neutral.
 * macrostructures: Photographic (home, builds) · Catalogue (shop) · Split Studio (product)
 *                   Ecosystem Index (blog) · Long Document (article)
 * nav: N11 mega-menu panel · footer: columns (Ft4 colophon replaced on request)
 * pre-emit critique: P5 H5 E5 S5 R4 V4
 */

@import url("tokens.css");

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

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

/* [hidden] is a UA style, so ANY class rule setting display beats it. Every
   component here that toggles `hidden` also sets display: grid, which silently
   kept them on screen — the cart showed its empty state and its line items at
   the same time. One rule fixes the whole class of bug. */
[hidden] { display: none !important; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--wt-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg, video { display: block; max-width: 100%; }

/* Buttons opt out of UA chrome by default; components add back what they need.
   Without this, any <a> restyled as a <button> silently gains a grey box. */
button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
/* No background here. With object-fit: contain the <img> box still fills its
   container, so an img background paints OVER the container's — which is what
   turned the white product plates grey. Containers own their backgrounds. */
img { height: auto; }
p { margin: 0; }
a { color: inherit; }

/* Display type is the JAX register: black, caps, tight. Never italic. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--wt-black);
  text-transform: uppercase;
  letter-spacing: var(--track-black);
  line-height: var(--lh-display);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-ink); color: var(--color-paper); }

.u-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
}

.u-skip {
  position: absolute; left: var(--space-md); top: var(--space-md);
  z-index: var(--z-toast);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink); color: var(--color-inverse-ink);
  transform: translateY(-200%);
}
.u-skip:focus-visible { transform: none; }

.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
/* Reading pages use a narrower page, not a narrow column inside a wide one —
   a 65ch measure inside an 82rem wrap leaves two thirds of the screen empty. */
.wrap--read { max-width: 52rem; }
.lede { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); max-width: var(--measure); }

/* ====================================================================== */
/* The double bar — the logo's signature device, at 1 : 3.5 bar-to-gap      */
/* ====================================================================== */

/* Horizontal pair — the logo device. Used at most twice per page. */
.bars {
  display: flex;
  gap: var(--bar-gap);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bars::before, .bars::after {
  content: "";
  display: block;
  height: var(--bar-w);
  width: var(--space-xl);
}
.bars::before { background: var(--color-orange); }
.bars::after  { background: var(--color-blue); }

/* ====================================================================== */
/* Wordmark — typeset to the logo's own construction rules                 */
/* ====================================================================== */

/* The real brand asset, extracted from jaxlogod.svg (which was a PNG in an
   SVG wrapper) and trimmed. Two cuts: ink-on-transparent for light surfaces,
   paper-on-transparent for dark ones. The orange and blue bars are identical
   in both — only the neutral ink is recoloured. */
.mark { display: inline-block; text-decoration: none; line-height: 0; }
.mark img { width: var(--mark-size, 8rem); height: auto; }
.mark--lg { --mark-size: clamp(9rem, 24vw, 16rem); }

/* ====================================================================== */
/* Buttons — square shoulders, black weight, tracked. No pills, no radius.  */
/* ====================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-ink: var(--color-ink);
  --btn-edge: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-bold) solid var(--btn-edge);
  border-radius: var(--radius-input);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--wt-black);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.btn:hover, .btn.is-hover { --btn-bg: var(--color-ink); --btn-ink: var(--color-paper); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  --btn-ink: var(--color-muted); --btn-edge: var(--color-rule); --btn-bg: transparent;
  cursor: not-allowed; transform: none;
}
.btn--fill { --btn-bg: var(--color-ink); --btn-ink: var(--color-paper); --btn-edge: var(--color-ink); }
.btn--fill:hover, .btn--fill.is-hover { --btn-bg: transparent; --btn-edge: var(--color-ink); --btn-ink: var(--color-ink); }
.btn--wide { width: 100%; }

.btn[data-state="loading"] { --btn-bg: var(--color-muted); --btn-ink: var(--color-paper); --btn-edge: var(--color-muted); cursor: progress; }
.btn[data-state="error"]   { --btn-bg: transparent; --btn-ink: var(--color-orange-text); --btn-edge: var(--color-orange-text); }
.btn[data-state="success"] { --btn-bg: var(--color-ink); --btn-ink: var(--color-paper); --btn-edge: var(--color-blue); }

.btn__spin { display: none; width: 12px; height: 12px; border: var(--rule-bold) solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.btn[data-state="loading"] .btn__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Typographic link — the tertiary CTA. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: var(--wt-black);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-ink);
  box-shadow: inset 0 -2px 0 0 var(--color-rule-2);
  transition: box-shadow var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.tlink::after { content: "\2192"; font-family: var(--font-mono); font-weight: var(--wt-body); }
.tlink:hover, .tlink.is-hover { box-shadow: inset 0 -4px 0 0 var(--color-ink); }

/* ====================================================================== */
/* N11 · Mega-menu panel nav                                               */
/* ====================================================================== */

.nav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-paper); border-bottom: var(--rule-bold) solid var(--color-ink); }
.nav__inner { max-width: var(--page-max); margin-inline: auto; padding: var(--space-sm) var(--page-gutter); display: flex; align-items: center; gap: var(--space-lg); }
.nav .mark { margin-inline-end: auto; --mark-size: clamp(5.5rem, 11vw, 7.5rem); }

.nav__center { display: none; align-items: center; gap: var(--space-2xs); }

.nav__link {
  appearance: none; border: 0; background: none;
  font-family: var(--font-display);
  font-weight: var(--wt-black);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-ink);
  padding: var(--space-sm);
  min-height: 48px;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  border-bottom: var(--rule-bold) solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { border-bottom-color: var(--color-ink); }
.nav__caret { font-family: var(--font-mono); font-weight: var(--wt-body); }

.nav__right { display: flex; align-items: center; gap: var(--space-2xs); }
/* Icon utilities. One hand-built set — 24px grid, 1.75 stroke, round joins —
   so the stroke voice is consistent. Mixing icon libraries is its own tell. */
/* Shared by <a> (Account) and <button> (Search, Cart) — must look identical
   whichever element it lands on. */
.nav__util {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2xs);
  min-width: 48px; min-height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-ink);
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out);
}
.nav__util:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: -2px; }
.nav__util svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.nav__util:hover { color: var(--color-muted); }
/* Account is in the drawer footer on mobile; three icons plus a burger plus
   the logo does not fit 320px comfortably. */
@media (max-width: 63.99rem) { .nav__util--desk { display: none; } }
.nav__util span {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); letter-spacing: 0; color: var(--color-ink-2);
}

/* Sits beside the search and cart icons, so it is styled like them: no border,
   no box, and a drawn icon rather than the ☰ character — a mono text glyph next
   to three stroked SVGs never matches on weight or optical size. */
.nav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px;
  color: var(--color-ink);
  transition: color var(--dur-micro) var(--ease-out);
}
.nav__burger svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.nav__burger:hover { color: var(--color-muted); }
.nav__burger:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: -2px; }
/* open state: the bars become a cross, drawn to the same spec */
.nav__burger[aria-expanded="true"] .nav__burger-open { display: none; }
.nav__burger-close { display: none; }
.nav__burger[aria-expanded="true"] .nav__burger-close { display: block; }

.mega-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-dropdown);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  background: var(--color-paper);
  border-bottom: var(--rule-bold) solid var(--color-ink);
  box-shadow: 0 24px 48px -32px var(--color-scrim);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short) var(--ease-out);
}
.mega-panel.is-open { opacity: 1; visibility: visible; transform: none; }
.mega-panel__inner {
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-lg);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr); gap: var(--space-xl);
}
.mega-col__head {
  font-family: var(--font-display); font-weight: var(--wt-hair);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-hair);
  color: var(--color-ink);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  margin-bottom: var(--space-sm);
}

.mega-link { display: block; padding: var(--space-xs) 0; text-decoration: none; border-bottom: var(--rule-hair) solid transparent; transition: border-color var(--dur-micro) var(--ease-out); }
.mega-link:hover { border-bottom-color: var(--color-rule-2); }
.mega-link b { display: block; font-weight: var(--wt-mid); white-space: nowrap; font-size: var(--text-base); }
.mega-link em { display: block; font-style: normal; font-size: var(--text-xs); color: var(--color-muted); line-height: 1.4; }

.mega-feature { display: block; padding: var(--space-lg); background: var(--color-ink); color: var(--color-inverse-ink); text-decoration: none; }
.mega-feature__title { font-family: var(--font-display); font-weight: var(--wt-black); text-transform: uppercase; letter-spacing: var(--track-black); line-height: var(--lh-display); font-size: var(--text-md); margin-bottom: var(--space-xs); }
.mega-feature__desc { font-size: var(--text-xs); color: var(--color-inverse-mute); line-height: 1.5; }
.mega-feature__price { margin-top: var(--space-sm); color: var(--color-inverse-ink); }

.mega-panel__tail {
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--space-sm) var(--page-gutter) var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center;
  font-size: var(--text-xs); color: var(--color-muted);
}

.nav-scrim { position: fixed; inset: 0; z-index: var(--z-raised); background: var(--color-scrim); opacity: 0; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short) var(--ease-out); }
.nav-scrim.is-active { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------------- */
/* Mobile menu drawer                                                       */
/* A real dialog: focus trapped, page behind inert and scroll-locked, Esc   */
/* and the scrim close it. visibility:hidden (not [hidden]) keeps it out of */
/* the tab order while still allowing the slide transition.                 */
/* ---------------------------------------------------------------------- */

.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(24rem, 100%);
  z-index: var(--z-modal);
  background: var(--color-paper);
  border-left: var(--rule-bold) solid var(--color-ink);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform var(--dur-long) var(--ease-out);
}
.drawer.is-open { transform: none; pointer-events: auto; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  padding-top: max(var(--space-md), env(safe-area-inset-top));
  border-bottom: var(--rule-bold) solid var(--color-ink);
}
.drawer__title { font-family: var(--font-display); font-weight: var(--wt-hair); text-transform: uppercase; letter-spacing: var(--track-hair); font-size: var(--text-xs); color: var(--color-muted); }
.drawer__close {
  width: 44px; height: 44px; margin-inline-end: -10px;
  font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-ink);
}
.drawer__close:hover { background: var(--color-ink); color: var(--color-paper); }

/* Only this scrolls, and it does not chain to the page behind. */
.drawer__body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-md) var(--space-lg) var(--space-xl);
}

.drawer__section {
  font-family: var(--font-display); font-weight: var(--wt-hair);
  text-transform: uppercase; letter-spacing: var(--track-hair);
  font-size: var(--text-xs); color: var(--color-muted);
  padding-top: var(--space-lg); padding-bottom: var(--space-2xs);
}

.drawer details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.drawer summary {
  min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: var(--wt-black); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--track-label);
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; font-family: var(--font-mono); font-weight: var(--wt-body); color: var(--color-muted); }
.drawer details[open] summary::after { content: "\2212"; color: var(--color-ink); }
.drawer details a {
  display: flex; align-items: center; min-height: 46px;
  padding-inline-start: var(--space-md);
  color: var(--color-ink-2); text-decoration: none; font-size: var(--text-base);
}
.drawer details a:hover { color: var(--color-ink); }
.drawer details a:last-child { margin-bottom: var(--space-xs); }

/* Top-level destinations carry display weight; category links stay quiet. */
.drawer__link {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-display); font-weight: var(--wt-black);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--color-ink); text-decoration: none;
}
.drawer__link:hover { color: var(--color-muted); }
.drawer__link--all { justify-content: space-between; }
.drawer__link--all span { font-family: var(--font-mono); font-weight: var(--wt-body); letter-spacing: 0; color: var(--color-muted); }

.drawer__foot {
  padding: var(--space-md) var(--space-lg);
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
  border-top: var(--rule-bold) solid var(--color-ink);
  display: grid; gap: var(--space-md);
}
.drawer__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.drawer__terms {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted);
}

/* Scroll lock while any overlay owns the screen. Overrides the root
   overflow-x: clip, which would otherwise win. */
html.is-locked { overflow: hidden; } /* html only: overflow on body too makes it a scroll container and shifts the sticky header */

@media (min-width: 64rem) {
  .nav__center { display: flex; }
  .nav__burger { display: none; }
}

/* ====================================================================== */
/* Terms strip — hairline register, not a coloured banner                  */
/* ====================================================================== */

.terms { border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.terms__list {
  max-width: var(--page-max); margin-inline: auto; margin-block: 0;
  padding: var(--space-xs) var(--page-gutter);
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg);
  font-family: var(--font-display); font-weight: var(--wt-hair);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--color-ink-2);
}
.terms__list li { display: flex; align-items: center; gap: var(--space-xs); }
.terms__list li + li { padding-inline-start: var(--space-lg); border-inline-start: var(--rule-hair) solid var(--color-rule-2); }

.terms__dots { display: none; }

/* On mobile three promises stack to three lines and eat the top of the page.
   One line, swiped. Native scroll-snap — no carousel library, no layout shift. */
@media (max-width: 60rem) {
  .terms { display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--page-gutter); }

  .terms__list {
    flex: 1; min-width: 0;
    padding-inline: 0;
    margin: 0;
    display: flex; flex-wrap: nowrap; gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .terms__list::-webkit-scrollbar { display: none; }

  .terms__list li {
    /* min-width:0 matters: without it the nowrap text is wider than the basis,
       each item grows past 100%, and both snapping and the dot maths break */
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    justify-content: flex-start;
    white-space: nowrap;
    padding-block: var(--space-xs);
  }
  /* the qualifying words are desktop-only so each promise fits one line */
  .terms__long { display: none; }
  /* the separators only make sense when they sit side by side */
  .terms__list li + li { padding-inline-start: 0; border-inline-start: 0; }

  .terms__dots { display: flex; gap: var(--space-2xs); flex: none; }
  .terms__dots span {
    width: var(--bar-w); height: var(--bar-w);
    background: var(--color-rule-2);
    transition: background-color var(--dur-short) var(--ease-out);
  }
  .terms__dots span[data-on] { background: var(--color-ink); }
}

/* ====================================================================== */
/* H6 · Photographic fold                                                  */
/* ====================================================================== */

.fold { position: relative; isolation: isolate; background: var(--color-inverse); }
.fold__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fold--tall .fold__img { aspect-ratio: 4 / 5; }

/* Photographs are unpredictable — a caption over bright concrete fails
   contrast without a base. Two-stop scrim, bottom-anchored. */
.fold::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(to top, var(--color-scrim), var(--color-scrim-0));
  pointer-events: none;
}
.fold__caption {
  position: absolute; z-index: var(--z-base);
  left: var(--page-gutter); right: var(--page-gutter); bottom: var(--space-lg);
  color: var(--color-inverse-ink);
  display: grid; gap: var(--space-xs); justify-items: start;
}
.fold__caption h1, .fold__caption h2 { font-size: var(--text-xl); }
.fold__meta { color: var(--color-inverse-mute); }
.fold__caption .tlink { color: var(--color-inverse-ink); box-shadow: inset 0 -2px 0 0 var(--color-inverse-rule); }
.fold__caption .tlink:hover { box-shadow: inset 0 -4px 0 0 var(--color-inverse-ink); }

@media (min-width: 60rem) {
  .fold__img { aspect-ratio: 21 / 9; }
  .fold--tall .fold__img { aspect-ratio: 16 / 9; }
  .fold__caption { max-width: 44rem; bottom: var(--space-xl); }
  .fold__caption h1, .fold__caption h2 { font-size: var(--text-2xl); }
}

/* ====================================================================== */
/* Bands and section heads — marker is the double bar, never an eyebrow    */
/* ====================================================================== */

.band { padding-block: var(--space-2xl); }
.band--tight { padding-block: var(--space-xl); }
.band--loose { padding-block: var(--space-3xl) var(--space-2xl); }
.band--paper2 { background: var(--color-paper-2); }

.head { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-bottom: var(--space-xl); }
.head__title { font-size: var(--text-2xl); }
.head__title--big { font-size: var(--text-3xl); }
.head p { max-width: var(--measure); color: var(--color-ink-2); }
@media (max-width: 48rem) { .head { grid-template-columns: 1fr; } }

.statement { display: grid; gap: var(--space-lg); max-width: 46rem; }
.statement__title { font-size: var(--text-display-s); }
/* Three short lines read as one block. No rules between them — the statement is
   the shape, not a list of rows. Each point is marked with an arrow drawn to the
   same spec as the nav icons: 24px grid, 1.75 stroke, round joins. */
.statement__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.statement__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  font-size: var(--text-md);
  line-height: 1.35;
}
.statement__list svg {
  width: 1.05em; height: 1.05em;
  flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  /* optically centre the glyph on the first line rather than its box */
  transform: translateY(0.2em);
}
.statement__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ====================================================================== */
/* T1 · Pull quote with marginalia                                         */
/* ====================================================================== */

.press { display: grid; gap: var(--space-xl); }
.press__item { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: var(--bar-w) solid var(--color-ink); }
.press__quote { font-size: var(--text-md); line-height: 1.4; font-weight: var(--wt-body); max-width: 44ch; margin: 0; }
.press__by { font-family: var(--font-display); font-weight: var(--wt-hair); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-hair); color: var(--color-muted); }
@media (min-width: 60rem) {
  .press { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
  .press__quote { font-size: var(--text-base); line-height: 1.5; }
}

/* ====================================================================== */
/* F6 · Product card grid                                                  */
/* ====================================================================== */

.grid-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The catalogue runs 3-up beside the filter rail. design.md allows commerce
   index density to vary; image treatment does not. */
@media (min-width: 72rem) { .shop .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.product { position: relative; display: grid; gap: var(--space-sm); align-content: start; }

/* The whole card is the target. One anchor stays in the a11y tree — the title,
   because it carries the real link text — and its ::after stretches over the
   card. Two anchors to one destination would just double every tab stop. */
.product__name a::after { content: ""; position: absolute; inset: 0; z-index: var(--z-base); }

/* Subtle zoom, and it does NOT crop: overflow clips at the PADDING box, so the
   tile's var(--space-sm) padding sits inside the clip region and absorbs the
   growth. At 1.03 the picture gains ~3-5px per side against 12px of padding.
   If that padding is ever removed, this zoom starts shaving the product. */
@media (hover: hover) and (pointer: fine) {
  .product:hover .product__media img,
  .product:focus-within .product__media img { transform: scale(1.03); }
}
.product:hover .product__name a,
.product:focus-within .product__name a { text-decoration: underline; text-underline-offset: 3px; }

/* The ring belongs on the card, not on three words of title. */
.product:has(a:focus-visible) { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 4px; }
.product:has(a:focus-visible) .product__name a { outline: none; }
.product__media {
  display: block; aspect-ratio: 4 / 3;
  background: var(--color-product-paper);
  padding: var(--space-sm);
  overflow: hidden;
}
/* contain, not cover — these are parts on a white sweep. Cropping a shock or a
   triple clamp to fill a box loses the thing the customer is buying. No hover
   scale here either: the tile is overflow-hidden, so scaling a contained image
   shaves its edges. The name underlines on hover instead. */
.product__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-long) var(--ease-out); }
.product__name { font-family: var(--font-body); font-weight: var(--wt-mid); font-size: var(--text-base); line-height: 1.35; letter-spacing: 0; text-transform: none; }
.product__name a { text-decoration: none; }
.product__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.product__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-ink-2); display: flex; gap: var(--space-xs); align-items: baseline; flex-wrap: wrap; }
.product__was { text-decoration: line-through; color: var(--color-muted); }
.product__now { color: var(--color-orange-text); font-weight: var(--wt-mid); }
/* Out of flow: an in-flow badge pushes the name down on sale cards only, so
   titles stop aligning across a row. */
.product__flag {
  position: absolute; top: 0; left: 0; z-index: var(--z-raised);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-display); font-weight: var(--wt-black);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label);
  line-height: 1.6;
}

/* ====================================================================== */
/* Perks, posts, brands                                                    */
/* ====================================================================== */

.perks { list-style: none; margin: 0; padding: 0; display: grid; }
.perks li {
  display: flex; align-items: baseline; gap: var(--space-md);
  padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-md);
}
.perks li::before { content: ""; flex: none; width: var(--space-lg); height: var(--bar-w); background: var(--color-rule-2); transform: translateY(-0.3em); }
.perks li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 60rem) {
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
  .perks li:nth-last-child(2) { border-bottom: var(--rule-hair) solid var(--color-rule); }
}

.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.posts li { padding-top: var(--space-md); border-top: var(--bar-w) solid var(--color-ink); }
.posts h3 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.posts h3 a { text-decoration: none; }
.posts h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.posts p { color: var(--color-muted); max-width: 44ch; }
@media (min-width: 60rem) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.brands {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl);
  font-family: var(--font-display); font-weight: var(--wt-hair);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-hair);
  color: var(--color-ink-2);
}
.brands li { display: flex; align-items: center; gap: var(--space-sm); }
.brands li::before { content: ""; width: var(--bar-w); height: 1em; background: var(--color-rule-2); }

/* ====================================================================== */
/* Catalogue (shop)                                                        */
/* ====================================================================== */

.crumb { padding-block: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.crumb a { white-space: nowrap; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cat-head { padding-block: var(--space-lg) var(--space-xl); border-bottom: var(--rule-bold) solid var(--color-ink); display: grid; gap: var(--space-md); }
.cat-head h1 { font-size: var(--text-3xl); }
.cat-head__count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-muted); }

.shop { display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-3xl); }
@media (min-width: 60rem) { .shop { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-3xl); } }

.rail { align-self: start; }
.rail__more { margin: 0 0 var(--space-md); }
.rail__more .tlink { font-size: var(--text-xs); }
@media (min-width: 60rem) { .rail { position: sticky; top: 6rem; } }
.rail__group { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rail__group > summary {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-family: var(--font-display); font-weight: var(--wt-black); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--color-ink);
}
.rail__group > summary::-webkit-details-marker { display: none; }
.rail__group > summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-muted); }
.rail__group[open] > summary::after { content: "\2212"; }
.rail__list { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; }
.rail__list label { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--color-ink-2); cursor: pointer; }
.rail__list label:hover { color: var(--color-ink); }
.rail__list input { accent-color: var(--color-ink); width: 16px; height: 16px; }
.rail__list span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-muted); margin-inline-start: auto; }

.shop__bar { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-xl); }
.shop__showing { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-muted); }

.select {
  min-height: 48px; padding: var(--space-xs) var(--space-sm);
  border: var(--rule-bold) solid var(--color-rule-2); border-radius: var(--radius-input);
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base);
}
.select:hover { border-color: var(--color-ink); }

.pager { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-family: var(--font-mono); font-size: var(--text-xs); }
.pager a, .pager span { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; border-bottom: var(--bar-w) solid transparent; }
.pager a:hover { border-bottom-color: var(--color-rule-2); }
.pager [aria-current="page"] { border-bottom-color: var(--color-ink); font-weight: var(--wt-mid); }

/* ====================================================================== */
/* Split Studio (product)                                                  */
/* ====================================================================== */

.split { display: grid; gap: var(--space-xl); padding-block: var(--space-xl); align-items: start; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); padding-block: var(--space-2xl); }
  .split--7-5 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* Product gallery — native scroll-snap; the browser owns swipe/drag. */
.gallery { display: grid; gap: var(--space-sm); }
.gallery__viewport { position: relative; overflow: hidden; background: var(--color-product-paper); aspect-ratio: 1 / 1; }
.gallery__main { display: flex; height: 100%; overflow-x: scroll; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; user-select: none; }
.gallery__main::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: start; }
.gallery__slide img, .gallery__slide video { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery__slide--video video { background: #000; }
.gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: var(--color-ink); background: rgb(255 255 255 / .78); backdrop-filter: blur(8px); cursor: pointer; transition: opacity var(--dur-micro) var(--ease-out); }
.gallery__arrow:hover { opacity: .85; }
.gallery__arrow--prev { left: 10px; }
.gallery__arrow--next { right: 10px; }
.gallery__thumbs { display: flex; gap: var(--space-sm); overflow-x: auto; scrollbar-width: none; }
.gallery__thumb { appearance: none; flex: 0 0 calc(25% - var(--space-sm)); padding: var(--space-3xs); background: var(--color-product-paper); border: 0; border-bottom: var(--bar-w) solid var(--color-rule); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out); }
.gallery__thumb:hover { border-bottom-color: var(--color-rule-2); }
.gallery__thumb[aria-current="true"] { border-bottom-color: var(--color-ink); }
.gallery__thumb--video { position: relative; }
.gallery__thumb--video::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: rgb(255 255 255 / .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1 1l8 5-8 5z' fill='%231a1a1a'/%3E%3C/svg%3E") 55% 50% / 8px no-repeat; backdrop-filter: blur(6px); }
.gallery__thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.gallery__dots { display: none; justify-content: center; gap: 6px; }
.gallery__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 10px; background: var(--color-ink); opacity: .35; cursor: pointer; transition: width var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.gallery__dot[aria-current="true"] { width: 30px; opacity: 1; }
@media (max-width: 640px) { .gallery__thumbs { display: none; } .gallery__dots { display: flex; } }

/* Product page: no stacked wrap padding; title sits above the gallery on mobile,
   top-right beside it on desktop. */
.woocommerce .wrap--flush { padding-block: 0; }
.split--product { padding-block: var(--space-md) var(--space-xl); gap: var(--space-md); }
.buy-head { display: grid; gap: var(--space-md); }
@media (min-width: 60rem) {
  .split--product { padding-block: var(--space-md) var(--space-2xl); column-gap: var(--space-3xl); row-gap: var(--space-md); }
  .split--product .gallery { grid-column: 1; grid-row: 1 / span 2; }
  .split--product .buy-head { grid-column: 2; grid-row: 1; }
  .split--product .buy { grid-column: 2; grid-row: 2; }
}
.buy { display: grid; gap: var(--space-md); }
.buy__title { font-size: var(--text-xl); }
.buy__rating { display: flex; align-items: baseline; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.buy__rating b { color: var(--color-ink); }
.buy__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-lg); display: flex; align-items: baseline; gap: var(--space-xs); }
.buy__price small { font-size: var(--text-xs); color: var(--color-muted); }
.buy__stock { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: var(--wt-hair); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-hair); color: var(--color-ink-2); }
.buy__stock::before { content: ""; width: var(--bar-w); height: 1em; background: var(--color-ink); }
.buy__note { color: var(--color-ink-2); max-width: 46ch; }
.buy__sku { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.buy__facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2xs);
  font-size: var(--text-base); color: var(--color-ink-2);
}

.field { display: grid; gap: var(--space-2xs); }
.field > label { font-family: var(--font-display); font-weight: var(--wt-hair); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-hair); color: var(--color-ink-2); }
.field .select, .field input { width: 100%; }
.field input {
  min-height: 48px; padding: var(--space-xs) var(--space-sm);
  border: var(--rule-bold) solid var(--color-rule-2); border-radius: var(--radius-input);
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base);
}
.field input::placeholder { color: var(--color-muted); }
.field input:hover, .field .select:hover { border-color: var(--color-ink); }
.field input:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; }
.field__help { font-size: var(--text-xs); color: var(--color-muted); }
.field[data-state="error"] input, .field[data-state="error"] .select { border-color: var(--color-orange-text); }
.field[data-state="error"] .field__help { color: var(--color-orange-text); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width: 30rem) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.buy__status { font-size: var(--text-xs); color: var(--color-muted); min-height: 1.4em; }

/* F3 · Tabular spec sheet */
.spec { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.spec caption { text-align: start; font-family: var(--font-display); font-weight: var(--wt-black); text-transform: uppercase; letter-spacing: var(--track-black); font-size: var(--text-lg); padding-bottom: var(--space-md); }
.spec th, .spec td { text-align: start; padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.spec th { font-family: var(--font-display); font-weight: var(--wt-hair); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--color-muted); width: 45%; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: var(--rule-hair) solid var(--color-rule); }

.prose { max-width: var(--measure); display: grid; gap: var(--space-md); }
.prose p { color: var(--color-ink-2); }
.prose ol { margin: 0; padding-inline-start: var(--space-lg); color: var(--color-ink-2); display: grid; gap: var(--space-xs); }

/* ====================================================================== */
/* Ft4 · Dense typographic colophon                                        */
/* ====================================================================== */

/* ---------------------------------------------------------------------- */
/* Footer — conventional columns.                                           */
/* The dense running-colophon (Ft4) was replaced at the client's request.    */
/* Kept honest: the accent bar appears once, links are ink not colour, and   */
/* the column heads use the same hairline register as everything else.       */
/* ---------------------------------------------------------------------- */

.foot {
  background: var(--color-inverse); color: var(--color-inverse-ink);
  margin-top: var(--space-3xl);
  padding-block: var(--space-2xl) var(--space-lg);
}

/* Link columns run 2-up even on the narrowest phone — stacking 22 links in a
   single column made the footer 1382px tall, which is a scroll, not a footer. */
.foot__top {
  display: grid; gap: var(--space-lg) var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: var(--space-xl);
}
@media (min-width: 40rem) { .foot__top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }
@media (min-width: 64rem) { .foot__top { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); } }

.foot__brand { display: grid; gap: var(--space-md); align-content: start; grid-column: 1 / -1; }
@media (min-width: 64rem) { .foot__brand { grid-column: auto; } }
.foot .mark { --mark-size: clamp(7rem, 16vw, 9rem); }
.foot__blurb { color: var(--color-inverse-mute); font-size: var(--text-sm); line-height: 1.6; max-width: 34ch; }

.foot__social { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); list-style: none; margin: 0; padding: 0; }
.foot__social a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-weight: var(--wt-black);
  text-transform: uppercase; letter-spacing: var(--track-label);
  font-size: var(--text-xs); color: var(--color-inverse-ink); text-decoration: none;
  box-shadow: inset 0 -2px 0 0 var(--color-inverse-rule);
  transition: box-shadow var(--dur-micro) var(--ease-out);
}
.foot__social a:hover { box-shadow: inset 0 -4px 0 0 var(--color-inverse-ink); }

.foot__col { display: grid; gap: var(--space-2xs); align-content: start; }
.foot__head {
  font-family: var(--font-display); font-weight: var(--wt-hair);
  text-transform: uppercase; letter-spacing: var(--track-hair);
  font-size: var(--text-xs); color: var(--color-inverse-mute);
  margin-bottom: var(--space-2xs);
}
.foot__col a {
  display: flex; align-items: center; min-height: 40px;
  color: var(--color-inverse-ink); text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--dur-micro) var(--ease-out);
}
.foot__col a:hover { color: var(--color-inverse-mute); text-decoration: underline; text-underline-offset: 3px; }

.foot__rule { border: 0; height: var(--bar-w); margin: 0; background: linear-gradient(to right, var(--color-orange) 0 12%, var(--color-blue) 12% 22%, var(--color-inverse-rule) 22%); }

.foot__bottom {
  padding-top: var(--space-md);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-inverse-mute);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); list-style: none; margin: 0; padding: 0; }
.foot__legal a { color: var(--color-inverse-mute); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot__legal a:hover { color: var(--color-inverse-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ====================================================================== */
/* Reduced motion                                                          */
/* ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .product:hover .product__media img,
  .product:focus-within .product__media img { transform: none; }
}

/* ====================================================================== */
/* 20 · Ecosystem Index — the articles landing.                            */
/* Two real discovery surfaces: build logs (serial) and technical articles */
/* (evergreen). They read differently, so they are shaped differently.     */
/* ====================================================================== */

.idx-head { padding-block: var(--space-lg) var(--space-xl); border-bottom: var(--rule-bold) solid var(--color-ink); display: grid; gap: var(--space-md); }
.idx-head h1 { font-size: var(--text-3xl); }
.idx-head p { max-width: var(--measure); color: var(--color-ink-2); font-size: var(--text-md); }

/* ====================================================================== */
/* 02 · Long Document — the article page.                                  */
/* Continuous prose, inline section heads, no marketing structure.         */
/* ====================================================================== */

.article { padding-block: var(--space-xl) var(--space-2xl); }
/* NOTE: never cap this container in `ch` — ch resolves against the container's
   own 16px font-size, not the 49px title inside it, which strangles the
   heading and forces mid-word breaks. Cap the title itself instead. */
.article__head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.article__title { font-size: var(--text-3xl); max-width: 20ch; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); color: var(--color-muted);
}
.article__cover { margin: 0 0 var(--space-2xl); }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* An aside the author addresses to the reader — set apart, not decorated. */
.note {
  border-top: var(--bar-w) solid var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-md);
}
.note p { font-size: var(--text-base); line-height: 1.6; color: var(--color-ink-2); }

.article__foot { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-bold) solid var(--color-ink); }
.article__foot h2 { font-size: var(--text-lg); margin-bottom: var(--space-lg); }

/* The landing fold. This is the live site's own hero photograph, so it gets the
   height of a landing point rather than a band. Capped in dvh (never vh, which
   fights mobile browser chrome) and never a full-viewport centred hero. */
/* ---------------------------------------------------------------------- */
/* The hero carries the page's opening statement, not a caption.            */
/* ---------------------------------------------------------------------- */

/* The photograph is a portrait: two people stand in the upper half, the bike
   sits centre, and the lower third is bare tarmac. A centred crop decapitates
   them, so the focal point is biased up — trim tarmac, never heads. */
.fold--hero .fold__img {
  aspect-ratio: 4 / 3;
  max-height: 82dvh;
  object-position: center 42%;
}

/* Below 60rem the statement sits UNDER the photograph. A heading, three ruled
   rows and two buttons overlaid on a 320px-wide image is unreadable no matter
   how heavy the scrim — this is the H6 collapse, not a compromise. */
.fold--hero { background: var(--color-paper); }
.fold--hero::after { display: none; }
.fold--hero .fold__caption {
  position: static;
  inset: auto;
  color: var(--color-ink);
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
  max-width: var(--page-max);
  margin-inline: auto;
}

@media (min-width: 60rem) {
  .fold--hero { background: var(--color-inverse); }
  .fold--hero .fold__img { aspect-ratio: 16 / 9; max-height: 86dvh; min-height: 34rem; }

  /* Taller gradient than a normal fold — it has to carry a whole statement,
     not one line of caption. */
  .fold--hero::after { display: block; height: 78%; }

  .fold--hero .fold__caption {
    position: absolute;
    inset: auto 0 var(--space-2xl) 0;
    margin-inline: auto;
    padding: 0 var(--page-gutter);
    color: var(--color-inverse-ink);
  }
  .fold--hero .statement { max-width: 42rem; }
  .fold--hero .statement__title { color: var(--color-inverse-ink); }

  /* Buttons invert on the photograph. */
  .fold--hero .btn { --btn-ink: var(--color-inverse-ink); --btn-edge: var(--color-inverse-ink); }
  .fold--hero .btn:hover { --btn-bg: var(--color-inverse-ink); --btn-ink: var(--color-ink); }
  .fold--hero .btn--fill { --btn-bg: var(--color-inverse-ink); --btn-ink: var(--color-ink); --btn-edge: var(--color-inverse-ink); }
  .fold--hero .btn--fill:hover { --btn-bg: transparent; --btn-ink: var(--color-inverse-ink); }
}

/* ====================================================================== */
/* Product page — full-width description, accordion, customer photos,      */
/* reviews. The buy column stays a diptych; everything below it runs wide. */
/* ====================================================================== */

.pdp { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.pdp__head { margin-bottom: var(--space-xl); }
.pdp__head h2 { font-size: var(--text-2xl); }

/* Product shots run full width between the prose blocks. */
.photostrip { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: var(--space-xl) 0; padding: 0; }
@media (min-width: 60rem) { .photostrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.photostrip li { background: var(--color-product-paper); padding: var(--space-md); }
.photostrip img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }

/* Two parallel lists sit side by side — this is not a 3-up icon grid. */
.duo { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); } }
.duo h3 { font-size: var(--text-md); margin-bottom: var(--space-md); }
.duo ol { margin: 0; padding-inline-start: var(--space-lg); display: grid; gap: var(--space-xs); color: var(--color-ink-2); }

/* Accordion — native <details>, same disclosure voice as the filter rail.
   No height animation, so this adds no motion primitive. */
.acc { display: grid; }
.acc__item { border-top: var(--rule-hair) solid var(--color-rule); }
.acc__item:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.acc__item > summary {
  min-height: 64px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); cursor: pointer;
  font-family: var(--font-display); font-weight: var(--wt-black);
  font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--track-label);
}
.acc__item > summary::-webkit-details-marker { display: none; }
.acc__item > summary::after { content: "+"; font-family: var(--font-mono); font-weight: var(--wt-body); font-size: var(--text-md); color: var(--color-muted); }
.acc__item[open] > summary::after { content: "\2212"; color: var(--color-ink); }
.acc__body { padding-bottom: var(--space-xl); display: grid; gap: var(--space-md); max-width: var(--measure); }
.acc__body p, .acc__body li { color: var(--color-ink-2); }
.acc__body ul, .acc__body ol { margin: 0; padding-inline-start: var(--space-lg); display: grid; gap: var(--space-sm); }
.acc__body .spec { max-width: none; }
.acc__body--wide { max-width: none; }

/* Customer photos — real-world shots, so these crop to a square grid. */
.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--color-paper-2); }

/* Reviews */
.rev-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-xl); }
.rev-score { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); }
.rev-count { font-family: var(--font-display); font-weight: var(--wt-hair); text-transform: uppercase; letter-spacing: var(--track-hair); font-size: var(--text-xs); color: var(--color-ink-2); }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; fill: currentColor; }

.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.reviews li { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xs); }
.reviews li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 60rem) {
  .reviews li { grid-template-columns: 16rem minmax(0, 1fr); column-gap: var(--space-2xl); align-items: start; }
}
.review__who { display: grid; gap: var(--space-3xs); align-content: start; }
.review__name { font-weight: var(--wt-mid); }
.review__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.review__body { color: var(--color-ink-2); max-width: 62ch; }

/* ====================================================================== */
/* Builds — alternating diptychs, not a stack of full-bleed slabs.         */
/* Four bikes each need their own showcase plus room for the story; four   */
/* full-width folds in a row read as one long repetitive scroll.           */
/* ====================================================================== */

.builds { display: grid; gap: var(--space-3xl); padding-block: var(--space-2xl); }
@media (min-width: 60rem) { .builds { gap: var(--space-4xl); } }

.build { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 60rem) {
  .build { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-3xl); }
  /* the pairing alternates direction down the page */
  .build:nth-child(even) .build__media { order: 2; }
}

.build__media { margin: 0; overflow: hidden; background: var(--color-paper-2); }
.build__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.build__body { display: grid; gap: var(--space-md); justify-items: start; }
.build__title { font-size: var(--text-xl); }
.build__meta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-muted); }
.build__body p { color: var(--color-ink-2); max-width: 46ch; }

/* One build carries press. Set as a quote, not a testimonial card. */
.build__press { border-top: var(--bar-w) solid var(--color-ink); padding-top: var(--space-sm); display: grid; gap: var(--space-2xs); }
.build__press blockquote { margin: 0; font-size: var(--text-base); line-height: 1.5; max-width: 44ch; }
.build__press cite {
  font-family: var(--font-display); font-weight: var(--wt-hair); font-style: normal;
  text-transform: uppercase; letter-spacing: var(--track-hair);
  font-size: var(--text-xs); color: var(--color-muted);
}

/* Comments */
.comments { padding-block: var(--space-2xl); }
.comments__empty { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); margin-bottom: var(--space-xl); }
.cform { display: grid; gap: var(--space-md); max-width: 44rem; }
.cform textarea {
  min-height: 8rem; padding: var(--space-sm);
  border: var(--rule-bold) solid var(--color-rule-2); border-radius: var(--radius-input);
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5;
  resize: vertical; width: 100%;
}
.cform textarea:hover { border-color: var(--color-ink); }

/* ====================================================================== */
/* .entry-content — ONE prose style for everything typed in Gutenberg.     */
/*                                                                         */
/* Everything here targets the NATIVE block output. An editor writes a     */
/* heading, a list, a quote, an image with a caption, or a table, and it   */
/* comes out formatted. No custom classes, no per-post markup, nothing to  */
/* remember. If a rule here needs a special class to work, it is the wrong */
/* rule — put it on the element instead.                                   */
/* ====================================================================== */

.entry-content { display: grid; gap: var(--space-lg); justify-items: start; }
.entry-content > * { max-width: 100%; width: 100%; }

.entry-content p { font-size: var(--text-md); line-height: 1.7; color: var(--color-ink-2); }
.entry-content h2 { font-size: var(--text-xl); margin-top: var(--space-lg); }
.entry-content h3 { font-size: var(--text-lg); margin-top: var(--space-sm); }
.entry-content a { color: var(--color-ink); text-underline-offset: 3px; }
.entry-content strong { font-weight: var(--wt-mid); color: var(--color-ink); }
.entry-content em { font-style: italic; }

.entry-content ul, .entry-content ol { margin: 0; padding-inline-start: var(--space-lg); display: grid; gap: var(--space-sm); }
.entry-content li { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); }

/* Core quote / pullquote blocks. */
.entry-content blockquote {
  margin: var(--space-md) 0;
  border-top: var(--bar-w) solid var(--color-ink);
  padding-top: var(--space-md);
  display: grid; gap: var(--space-sm);
}
.entry-content blockquote p {
  font-family: var(--font-display); font-weight: var(--wt-black);
  text-transform: uppercase; letter-spacing: var(--track-black);
  line-height: var(--lh-display); font-size: var(--text-lg);
  color: var(--color-ink); max-width: 40ch;
}
.entry-content blockquote cite,
.entry-content blockquote figcaption {
  font-family: var(--font-display); font-weight: var(--wt-hair); font-style: normal;
  text-transform: uppercase; letter-spacing: var(--track-hair);
  font-size: var(--text-xs); color: var(--color-muted);
}

/* Image blocks break the measure; their captions do not. */
.entry-content figure { margin: var(--space-md) 0; max-width: 100%; display: grid; gap: var(--space-sm); }
.entry-content figure img { width: 100%; }
.entry-content figcaption {
  font-family: var(--font-display); font-weight: var(--wt-hair);
  text-transform: uppercase; letter-spacing: var(--track-hair);
  font-size: var(--text-xs); color: var(--color-muted); max-width: var(--measure);
}

/* Table block — this is how a build sheet gets made, with no custom markup. */
.entry-content table {
  max-width: 100%;
  border-collapse: collapse; width: 100%;
  font-variant-numeric: tabular-nums;
}
.entry-content th, .entry-content td {
  text-align: start; padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-top: var(--rule-hair) solid var(--color-rule); vertical-align: top;
  font-size: var(--text-base);
}
.entry-content thead th,
.entry-content tbody tr td:first-child {
  font-family: var(--font-display); font-weight: var(--wt-hair);
  text-transform: uppercase; letter-spacing: var(--track-label);
  font-size: var(--text-xs); color: var(--color-muted); width: 30%;
}
.entry-content tr:last-child th, .entry-content tr:last-child td { border-bottom: var(--rule-hair) solid var(--color-rule); }

.entry-content hr { width: 100%; border: 0; height: var(--bar-w); background: var(--color-rule); margin-block: var(--space-lg); }

/* Drop cap only when the post actually opens with a paragraph. */
.entry-content > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display); font-weight: var(--wt-black);
  font-size: 3.4em; line-height: 0.82;
  padding-inline-end: 0.08em; padding-block-start: 0.04em;
  color: var(--color-ink);
}

/* ---------------------------------------------------------------------- */
/* Build page — header, gallery, optional video, then the Gutenberg body.  */
/* ---------------------------------------------------------------------- */

.build-head { padding-block: var(--space-lg) var(--space-xl); display: grid; gap: var(--space-md); }
.build-head h1 { font-size: var(--text-3xl); max-width: 20ch; }
.build-head__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); color: var(--color-muted);
}

/* Gallery — native horizontal scroll-snap, so mobile swipe is the browser's
   own, not a library's. Thumbs below drive it and track it. */
.gal { margin-bottom: var(--space-2xl); display: grid; gap: var(--space-sm); }

.gal__track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  background: var(--color-paper-2);
}
.gal__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.gal__bar { display: flex; align-items: center; gap: var(--space-md); }
.gal__count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); color: var(--color-muted); flex: none;
}

.gal__thumbs {
  display: flex; gap: var(--space-xs);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.gal__thumbs::-webkit-scrollbar { display: none; }
.gal__thumbs button {
  display: block; width: 84px; flex: none;
  background: var(--color-paper-2);
  opacity: 0.45;
  border-bottom: var(--bar-w) solid transparent;
  transition: opacity var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.gal__thumbs button:hover { opacity: 0.8; }
.gal__thumbs button[aria-current="true"] { opacity: 1; border-bottom-color: var(--color-ink); }
.gal__thumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

@media (min-width: 60rem) { .gal__thumbs button { width: 104px; } }

/* Optional video. Drop the block out and nothing else moves. */
.video { margin-bottom: var(--space-2xl); display: grid; gap: var(--space-sm); }
.video__frame { aspect-ratio: 16 / 9; background: var(--color-ink); display: grid; place-items: center; }
.video__frame iframe { width: 100%; height: 100%; border: 0; }
.video figcaption { font-family: var(--font-display); font-weight: var(--wt-hair); text-transform: uppercase; letter-spacing: var(--track-hair); font-size: var(--text-xs); color: var(--color-muted); }

/* ====================================================================== */
/* Blog — a filtered grid.                                                 */
/* Cards are typographic, not image-led: the only cover art that exists is */
/* a set of legacy banners with a serif wordmark baked into the JPEG, and  */
/* dragging those back in would undo the type system. Real cover photo-    */
/* graphy is a content job; when it lands, add .post__media above the      */
/* label and nothing else has to change.                                   */
/* ====================================================================== */

.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  margin-bottom: var(--space-xl);
}
.filters button {
  min-height: 44px; padding: var(--space-xs) var(--space-md);
  background: none; color: var(--color-ink-2);
  border: var(--rule-bold) solid var(--color-rule);
  border-radius: var(--radius-input);
  font-family: var(--font-display); font-weight: var(--wt-black);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label);
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
.filters button:hover { border-color: var(--color-ink); color: var(--color-ink); }
.filters button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.filters__count {
  margin-inline-start: auto; align-self: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); color: var(--color-muted);
}

.grid-posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .grid-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); } }
@media (min-width: 72rem) { .grid-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post {
  position: relative;
  display: grid; gap: var(--space-sm); align-content: start;
  padding-top: var(--space-md);
  border-top: var(--bar-w) solid var(--color-ink);
}
.post__cat { font-family: var(--font-display); font-weight: var(--wt-hair); text-transform: uppercase; letter-spacing: var(--track-hair); font-size: var(--text-xs); color: var(--color-muted); }
.post__title { font-size: var(--text-md); }
.post__title a { text-decoration: none; }
/* whole card is the target — one anchor, stretched, same as a product card */
.post__title a::after { content: ""; position: absolute; inset: 0; }
.post:hover .post__title a,
.post:focus-within .post__title a { text-decoration: underline; text-underline-offset: 3px; }
.post:has(a:focus-visible) { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 4px; }
.post p { color: var(--color-ink-2); }
.post__date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-muted); }

.grid-posts__empty { padding-block: var(--space-2xl); color: var(--color-muted); }

/* ====================================================================== */
/* Search popdown — a full-width panel dropped from the header.            */
/* Same idea as fhclassic's search overlay: one big input on a heavy rule, */
/* Esc to close, "/" to open, quick links underneath instead of an empty   */
/* void before you type.                                                   */
/* ====================================================================== */

.search {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: var(--z-dropdown);
  background: var(--color-paper);
  border-bottom: var(--rule-bold) solid var(--color-ink);
  box-shadow: 0 30px 50px -34px var(--color-scrim);
}
.search__inner { padding-block: var(--space-xl) var(--space-lg); }

/* On a phone the panel is the screen: let it use the height and scroll inside
   itself rather than pushing the page around. */
@media (max-width: 48rem) {
  .search { max-height: calc(100dvh - 3.5rem); overflow-y: auto; overscroll-behavior: contain; }
  .search__inner { padding-block: var(--space-lg) var(--space-xl); }
  .search__form { gap: var(--space-sm); }
  .search__form > svg { width: 18px; height: 18px; }
  /* 16px floor, or iOS zooms the whole page on focus */
  .search__form input { font-size: max(1.125rem, 16px); }
  .search__form input::placeholder { font-size: var(--text-xs); }
  .search__links { gap: 0; display: grid; }
  .search__links a { min-height: 48px; box-shadow: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .search__links a:hover { box-shadow: none; border-bottom-color: var(--color-ink); }
  /* bigger, thumbed rows */
  .sres a { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm); min-height: 56px; }
  .sres__thumb { width: 3rem; }
}

.search__form {
  display: flex; align-items: center; gap: var(--space-md);
  border-bottom: var(--rule-bold) solid var(--color-ink);
  padding-bottom: var(--space-sm);
}
.search__form > svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: var(--color-muted);
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.search__form input {
  flex: 1; min-width: 0;
  border: 0; background: none; padding: 0;
  font-family: var(--font-display); font-weight: var(--wt-black);
  text-transform: uppercase; letter-spacing: var(--track-black);
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  color: var(--color-ink);
}
.search__form input:focus { outline: none; }
.search__form input::placeholder {
  font-weight: var(--wt-hair); letter-spacing: var(--track-label);
  text-transform: none; color: var(--color-muted);
  font-size: var(--text-base);
}
.search__close {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; flex: none;
  font-family: var(--font-mono); font-size: var(--text-lg); line-height: 1;
  color: var(--color-ink);
}
.search__close:hover { background: var(--color-ink); color: var(--color-paper); }

.search__quick { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.search__label { font-family: var(--font-display); font-weight: var(--wt-hair); text-transform: uppercase; letter-spacing: var(--track-hair); font-size: var(--text-xs); color: var(--color-muted); }
.search__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; margin: 0; padding: 0; }
.search__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-weight: var(--wt-black);
  text-transform: uppercase; letter-spacing: var(--track-label);
  font-size: var(--text-xs); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -2px 0 0 var(--color-rule-2);
  transition: box-shadow var(--dur-micro) var(--ease-out);
}
.search__links a:hover { box-shadow: inset 0 -4px 0 0 var(--color-ink); }
.search__hint { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 48rem) { .search__hint { display: none; } }

/* ====================================================================== */
/* Cart drawer                                                             */
/* ====================================================================== */

.cartd {
  position: fixed; inset: 0 0 0 auto;
  width: min(26rem, 100%); z-index: var(--z-modal);
  background: var(--color-paper);
  border-left: var(--rule-bold) solid var(--color-ink);
  display: grid; grid-template-rows: auto auto 1fr auto;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform var(--dur-long) var(--ease-out);
}
.cartd.is-open { transform: none; pointer-events: auto; }

.cartd__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--rule-bold) solid var(--color-ink);
}
.cartd__title { font-family: var(--font-display); font-weight: var(--wt-black); text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--text-base); }
.cartd__title span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--color-muted); }
.cartd__close {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-ink);
}
.cartd__close:hover { background: var(--color-ink); color: var(--color-paper); }

/* Free-shipping progress — the $250 threshold is real, so show it. */
.cartd__ship { padding: var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xs); }
.cartd__ship p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); }
.cartd__meter { height: var(--bar-w); background: var(--color-paper-3); }
.cartd__meter span { display: block; height: 100%; background: var(--color-ink); transition: width var(--dur-long) var(--ease-out); }

.cartd__items { overflow-y: auto; padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.cartd__empty { padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-md); justify-items: start; align-content: start; }
.cartd__empty p { color: var(--color-muted); }

/* .cline rows are built by site.js from the cart state — not in HTML source. */
.cline { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.cline__media { background: var(--color-product-paper); padding: var(--space-2xs); }
.cline__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.cline__name { font-size: var(--text-xs); line-height: 1.4; }
.cline__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-ink-2); margin-top: var(--space-2xs); }
.cline__remove {
  appearance: none; background: none; border: 0; cursor: pointer;
  min-width: 44px; min-height: 44px; margin: -10px -10px 0 0;
  font-family: var(--font-mono); font-size: var(--text-base); color: var(--color-muted);
}
.cline__remove:hover { color: var(--color-ink); }

.cartd__foot { padding: var(--space-lg); border-top: var(--rule-bold) solid var(--color-ink); display: grid; gap: var(--space-md); }
.cartd__sub { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.cartd__sub dt { font-family: var(--font-display); font-weight: var(--wt-hair); text-transform: uppercase; letter-spacing: var(--track-hair); font-size: var(--text-xs); color: var(--color-ink-2); }
.cartd__sub dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-md); }
.cartd__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.cartd__actions { display: grid; gap: var(--space-xs); }

.bag { padding-block: var(--space-xl) var(--space-3xl); display: grid; gap: var(--space-xl); }
.bag__head { display: grid; gap: var(--space-sm); }
.bag__head h1 { font-size: var(--text-display-s); }
.bag__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.bag__empty { display: grid; gap: var(--space-md); justify-items: start; }
.bag__empty p { color: var(--color-muted); }
.bag__grid { display: grid; gap: var(--space-3xl); }
@media (min-width: 60rem) {
  .bag__grid { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 20rem); align-items: start; }
}
.bag__list { display: grid; gap: var(--space-md); }
.bag-line {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem auto;
  gap: var(--space-md);
  align-items: start;
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.bag-line__media { background: var(--color-product-paper); padding: var(--space-2xs); }
.bag-line__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.bag-line__name { font-size: var(--text-base); line-height: 1.4; }
.bag-line__name a { text-decoration: none; }
.bag-line__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bag-line__meta { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }
.bag-line__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-ink-2); margin-top: var(--space-2xs); }
.bag-line__qty { gap: var(--space-3xs); }
.bag-line__qty input { min-height: 48px; }
.bag-line__remove {
  appearance: none; background: none; border: 0; padding: 0;
  width: 48px; height: 48px; font-size: var(--text-lg); color: var(--color-muted);
  cursor: pointer; text-decoration: none; display: grid; place-items: center;
}
.bag-line__remove:hover { color: var(--color-ink); }
.bag__aside {
  display: grid; gap: var(--space-md);
  padding: var(--space-lg);
  border: var(--rule-bold) solid var(--color-ink);
  align-content: start;
}
.bag__ship { display: grid; gap: var(--space-xs); }
.bag__ship p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); }
@media (max-width: 40rem) {
  .bag-line { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .bag-line__qty { grid-column: 2; }
}


/* Search results — rendered by site.js, so these class names never appear
   in the HTML source. Do not delete them as unused.
   Grouped by type, so parts, builds and articles stay
   distinguishable rather than collapsing into one undifferentiated list. */
.sres { margin-top: var(--space-lg); display: grid; gap: var(--space-lg); }
.sres__group { display: grid; gap: var(--space-2xs); }
.sres__head {
  font-family: var(--font-display); font-weight: var(--wt-hair);
  text-transform: uppercase; letter-spacing: var(--track-hair);
  font-size: var(--text-xs); color: var(--color-muted);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  display: flex; justify-content: space-between; gap: var(--space-md);
}
.sres__head span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.sres a {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--space-md); align-items: center;
  padding-block: var(--space-xs);
  min-height: 48px;
  text-decoration: none;
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.sres a:hover { border-bottom-color: var(--color-rule-2); }
.sres a:hover .sres__name { text-decoration: underline; text-underline-offset: 3px; }
.sres__thumb { background: var(--color-product-paper); padding: 2px; }
.sres__thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.sres__dot { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.sres__dot::before { content: ""; width: var(--bar-w); height: 1.1em; background: var(--color-rule-2); }
.sres__name { font-size: var(--text-base); line-height: 1.35; }
.sres__name mark { background: none; color: inherit; box-shadow: inset 0 -0.4em 0 0 var(--color-paper-3); }
.sres__meta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
@media (max-width: 40rem) { .sres__meta { display: none; } }

.sres__none { color: var(--color-muted); padding-block: var(--space-md); }
.sres__none b { font-weight: var(--wt-mid); color: var(--color-ink); }

/* ====================================================================== */
/* Clearance                                                               */
/* The accent is already spent on the bar and the footer rule, so sale is   */
/* carried by the ink flag and the was/now price pair — not a red banner.   */
/* ====================================================================== */

.mega-panel__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-col__tag {
  font-family: var(--font-mono); font-weight: var(--wt-body);
  letter-spacing: 0; text-transform: none;
  color: var(--color-orange-text);
}
.mega-panel__tail { justify-content: space-between; }
.mega-panel__tail span { color: var(--color-muted); }
.mega-panel__tail a:not(.tlink) { color: var(--color-ink); }

/* Sale is a destination, not a decoration — marked by a rule under it. */
.nav__link--sale { box-shadow: inset 0 -3px 0 0 var(--color-orange); }
.drawer__link--sale { justify-content: space-between; }
.drawer__link--sale span { font-family: var(--font-mono); font-weight: var(--wt-body); letter-spacing: 0; color: var(--color-orange-text); }

/* Clearance header */
.sale-head { padding-block: var(--space-lg) var(--space-xl); display: grid; gap: var(--space-md); border-bottom: var(--rule-bold) solid var(--color-ink); }
.sale-head h1 { font-size: var(--text-3xl); }
.sale-head .lede { max-width: 52ch; }
.sale-terms { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); list-style: none; margin: 0; padding: 0; }
.sale-terms li { display: flex; align-items: baseline; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); }
.sale-terms b { font-family: var(--font-display); font-weight: var(--wt-black); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--color-ink); }

/* Percent-off flag reuses the product flag box; the number is the message. */
.product__flag--off { background: var(--color-orange); color: var(--color-ink); }

/* ====================================================================== */
/* Premium hero — the flagship product, presented backgroundless.          */
/*                                                                         */
/* The kit is photographed on a white sweep, so mix-blend-mode: multiply    */
/* drops the sweep out entirely (white × base = base) and leaves the part   */
/* floating on the page. That is why this band must stay LIGHT: multiply    */
/* over a dark surface crushes the product to black.                        */
/* ====================================================================== */

.phero { background: var(--color-paper-2); padding-block: var(--space-2xl); overflow: hidden; }
.phero__inner { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 60rem) {
  .phero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); }
}

.phero__body { display: grid; gap: var(--space-md); justify-items: start; }
.phero__kicker {
  font-family: var(--font-display); font-weight: var(--wt-hair);
  text-transform: uppercase; letter-spacing: var(--track-hair);
  font-size: var(--text-xs); color: var(--color-muted);
}
.phero__title { font-size: var(--text-display-s); max-width: 12ch; }
.phero__lede { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); max-width: 42ch; }

.phero__price { display: flex; align-items: baseline; gap: var(--space-xs); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.phero__price b { font-size: var(--text-xl); font-weight: var(--wt-body); }
.phero__price span { font-size: var(--text-xs); color: var(--color-muted); }

.phero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.phero__spec { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.phero__spec li { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); gap: var(--space-sm); font-size: var(--text-base); color: var(--color-ink-2); }
.phero__spec svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transform: translateY(0.2em); }

/* The stage. No frame, no card — the part is the object. */
.phero__stage { position: relative; display: grid; place-items: center; }
.phero__stage img {
  width: 100%; max-width: 34rem;
  mix-blend-mode: multiply;   /* drops the white sweep */
}
/* Contact shadow, so the part sits on the page instead of hovering in a void. */
.phero__stage::after {
  content: "";
  position: absolute; left: 50%; bottom: 4%;
  width: 62%; height: 4%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--color-rule-2) 0%, transparent 70%);
  opacity: 0.7;
  z-index: -1;
}

.phero__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }

/* ====================================================================== */
/* Refinements from the live-site scan.                                    */
/* ====================================================================== */

/* Grid columns default to auto, so one wide child (a table, a long URL)
   stretches every sibling past the screen, and overflow-x: clip on <html>
   hides the damage. minmax(0, 1fr) pins the column to the container. */
.entry-content, .gal, .video { grid-template-columns: minmax(0, 1fr); }
.entry-content figure.wp-block-table { overflow-x: auto; }
.entry-content figcaption, .entry-content a { overflow-wrap: anywhere; }

/* display: grid above beat the hidden attribute, so builds without a video
   showed an empty dark 16:9 box. */
.video[hidden] { display: none; }

/* Article titles are uppercase 800 weight, so they need to shrink on phones
   instead of breaking mid-word. */
.article__title { font-size: clamp(1.75rem, 7.4vw, var(--text-3xl)); overflow-wrap: break-word; }

/* Breadcrumb links were 17px tall. */
.crumb { padding-block: 0; align-items: center; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.crumb [aria-current] { padding-block: var(--space-xs); }

/* Old posts carry Gutenberg galleries (flat and legacy list markup). The
   figure rule above turned them into one stacked column. */
.entry-content .wp-block-gallery:not(:has(> .blocks-gallery-grid)),
.entry-content .blocks-gallery-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm);
  list-style: none; margin: var(--space-md) 0; padding: 0;
}
.entry-content .wp-block-gallery.columns-1 { --gal-cols: 1; }
.entry-content .wp-block-gallery.columns-2 { --gal-cols: 2; }
.entry-content .wp-block-gallery.columns-4 { --gal-cols: 4; }
.entry-content .wp-block-gallery.columns-5 { --gal-cols: 5; }
.entry-content .wp-block-gallery.columns-6 { --gal-cols: 6; }
.entry-content .wp-block-gallery.columns-1:not(:has(> .blocks-gallery-grid)),
.entry-content .wp-block-gallery.columns-1 .blocks-gallery-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
  .entry-content .wp-block-gallery:not(:has(> .blocks-gallery-grid)):not(.columns-1),
  .entry-content .wp-block-gallery:not(.columns-1) .blocks-gallery-grid { grid-template-columns: repeat(var(--gal-cols, 3), minmax(0, 1fr)); }
}
.entry-content .wp-block-gallery figure, .entry-content .blocks-gallery-item { margin: 0; }
/* core sets a per-column width on each image; the grid cell sets it here. */
.entry-content .wp-block-gallery figure.wp-block-image, .entry-content .blocks-gallery-item { width: auto !important; flex: none !important; }
.entry-content .wp-block-gallery img { aspect-ratio: 4 / 3; height: 100%; object-fit: cover; }

/* Page-builder buttons on old pages (Contact, FAQ) came with rounded corners
   and a drop shadow. The brand has neither. */
.entry-content .gb-button { border-radius: 0; box-shadow: none; }

/* ====================================================================== */
/* Contact — enquiry form + answers, then the workshop visit.              */
/* ====================================================================== */

.contact, .faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); }
@media (min-width: 60rem) { .contact, .faq { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-3xl); } }
.contact h2, .faq h2 { font-size: var(--text-xl); margin-bottom: var(--space-lg); }
.contact__missing { color: var(--color-muted); }

.contact__aside, .faq__aside { align-self: start; border-top: var(--bar-w) solid var(--color-ink); padding-top: var(--space-md); }
.contact__aside h2, .faq__aside h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; }
.facts li { display: grid; gap: var(--space-2xs); justify-items: start; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts p { color: var(--color-ink-2); max-width: 44ch; }
.facts .facts__label { font-family: var(--font-display); font-weight: var(--wt-hair); text-transform: uppercase; letter-spacing: var(--track-hair); font-size: var(--text-xs); color: var(--color-muted); }

.contact-visit .contact { padding-block: 0; align-items: start; }
.contact__visit { display: grid; gap: var(--space-lg); justify-items: start; align-content: start; }
.contact__visit h2 { margin-bottom: 0; }
.contact__map { width: 100%; aspect-ratio: 4 / 3; background: var(--color-paper-3); overflow: hidden; }
.contact__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
@media (min-width: 60rem) { .contact-visit .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Fluent Forms, in the site's own form language. The plugin sets its own
   colours and radii per form, so these selectors are deliberately specific. */
.contact form.frm-fluent-form .ff-el-group { margin-bottom: var(--space-md); }
.contact form.frm-fluent-form .ff-el-input--label label {
  font-family: var(--font-display); font-weight: var(--wt-hair); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--track-hair); color: var(--color-ink-2);
}
.contact form.frm-fluent-form .ff-el-is-required.asterisk-right label::after { color: var(--color-orange-text); }
.contact form.frm-fluent-form .ff-el-form-control {
  width: 100%; min-height: 48px; padding: var(--space-xs) var(--space-sm);
  border: var(--rule-bold) solid var(--color-rule-2); border-radius: 0 !important; box-shadow: none !important;
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.contact form.frm-fluent-form textarea.ff-el-form-control { min-height: 9rem; resize: vertical; }
.contact form.frm-fluent-form .ff-el-form-control::placeholder { color: var(--color-muted); opacity: 1; }
.contact form.frm-fluent-form .ff-el-form-control:hover,
.contact form.frm-fluent-form .ff-el-form-control:focus { border-color: var(--color-ink); background: var(--color-paper); color: var(--color-ink); }
.contact form.frm-fluent-form .ff-el-form-control:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 2px; }
.contact form.frm-fluent-form .iti { width: 100%; }
.contact form.frm-fluent-form .ff-el-form-check-label { display: flex; align-items: flex-start; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-base); line-height: 1.5; cursor: pointer; }
.contact form.frm-fluent-form .ff-el-form-check-input { accent-color: var(--color-ink); width: 18px; height: 18px; margin-top: 3px; flex: none; }
.contact form.frm-fluent-form .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg);
  border: var(--rule-bold) solid var(--color-ink) !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--color-ink) !important; color: var(--color-paper) !important;
  font-family: var(--font-display); font-weight: var(--wt-black); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--track-label); cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.contact form.frm-fluent-form .ff-btn-submit:hover { background: transparent !important; color: var(--color-ink) !important; }
.contact form.frm-fluent-form .ff-btn-submit:active { transform: translateY(1px); }
.contact form.frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: var(--color-orange-text); }
.contact .fluentform .text-danger, .contact .fluentform .error { color: var(--color-orange-text); font-size: var(--text-xs); }
.contact .ff-message-success { margin: 0; padding: var(--space-md); border: var(--rule-bold) solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); }
/* the visit band is full-bleed and meets the footer directly */
body:has(.contact-visit) .foot { margin-top: 0; }

/* FAQ — grouped native accordions beside a "still stuck" panel. */
.faq__group + .faq__group { margin-top: var(--space-2xl); }
.acc__body a { color: var(--color-ink); text-underline-offset: 3px; }
.acc__item > summary:hover { color: var(--color-ink-2); }
.acc__item > summary:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: -2px; }
.acc__body .note { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-muted); }

/* About — hero photo, story, three things, team. */
.about-hero { margin: var(--space-xl) 0 0; display: grid; gap: var(--space-xs); }
.about-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-paper-2); }
.about-hero figcaption { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.about-label { font-family: var(--font-display); font-weight: var(--wt-hair); text-transform: uppercase; letter-spacing: var(--track-hair); font-size: var(--text-xs); color: var(--color-muted); }
.about-story, .about-three, .about-team { display: grid; gap: var(--space-md) var(--space-3xl); padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 60rem) { .about-story, .about-three { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); } }
.about-prose { display: grid; gap: var(--space-md); max-width: var(--measure); }
.about-prose p { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); }
.about-prose .about-prose__lead { font-size: var(--text-lg); line-height: 1.4; color: var(--color-ink); }
.about-three ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl) var(--space-lg); }
@media (min-width: 48rem) { .about-three ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-three li { border-top: var(--bar-w) solid var(--color-ink); padding-top: var(--space-md); display: grid; gap: var(--space-sm); align-content: space-between; justify-items: start; }
.about-three li p { font-family: var(--font-display); font-weight: var(--wt-black); letter-spacing: var(--track-black); text-transform: uppercase; font-size: var(--text-lg); line-height: var(--lh-tight); }
.about-pair { display: grid; gap: var(--space-md); padding-block: var(--space-2xl) 0; }
@media (min-width: 48rem) { .about-pair { grid-template-columns: 1.4fr 1fr; } }
.about-pair figure { margin: 0; background: var(--color-paper-2); }
.about-pair img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.about-team ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl) var(--space-lg); }
@media (min-width: 48rem) { .about-team ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .about-team { grid-template-columns: minmax(0, 1fr); } }
.about-team li { display: grid; gap: var(--space-xs); align-content: start; }
.about-team img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--space-xs); background: var(--color-paper-2); }
.about-team h3 { font-size: var(--text-lg); }
.about-team li p:last-child { color: var(--color-ink-2); max-width: 36ch; }
.about-close .statement { max-width: 50rem; }
body:has(.about-close) .foot { margin-top: 0; }

/* ====================================================================== */
/* Articles index — lead guide, then a layout per kind of article.         */
/* ====================================================================== */

.arc-head__row { display: grid; gap: var(--space-lg); align-items: end; }
@media (min-width: 60rem) { .arc-head__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); } }
.arc-head p a { color: var(--color-ink); text-underline-offset: 3px; }
.arc-stats { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: 0; }
.arc-stats div { display: grid; gap: var(--space-3xs); }
.arc-stats dt { font-family: var(--font-display); font-weight: var(--wt-hair); text-transform: uppercase; letter-spacing: var(--track-hair); font-size: var(--text-xs); color: var(--color-muted); }
.arc-stats dd { margin: 0; font-family: var(--font-mono); font-weight: var(--wt-mid); font-variant-numeric: tabular-nums; font-size: var(--text-md); }
.filters button i { font-family: var(--font-mono); font-style: normal; font-weight: var(--wt-body); letter-spacing: 0; opacity: .7; margin-inline-start: var(--space-xs); font-variant-numeric: tabular-nums; }
.filters:has([data-f]) { margin-bottom: var(--space-md); }
.arc-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-muted); }

.arc-sec { padding-bottom: var(--space-3xl); }
.arc-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-lg); padding-top: var(--space-md); border-top: var(--bar-w) solid var(--color-ink); margin-bottom: var(--space-lg); }
.arc-sec__head h2 { font-size: var(--text-lg); }
.arc-sec__head p { color: var(--color-muted); max-width: 48ch; }

/* lead */
.arc-lead { display: grid; gap: var(--space-xl); padding-top: var(--space-md); }
@media (min-width: 60rem) { .arc-lead { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-3xl); } }
.arc-lead__main { display: grid; gap: var(--space-md); align-content: start; justify-items: start; }
.arc-kick { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md); }
.arc-lead h2 { font-size: var(--text-display-s); line-height: var(--lh-display); text-wrap: balance; }
.arc-lead h2 a { text-decoration: none; }
.arc-lead h2 a:hover { text-decoration: underline; text-decoration-thickness: var(--bar-w); text-underline-offset: 6px; }
.arc-lead__ex { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); max-width: 44ch; }
.arc-contents { border-top: var(--bar-w) solid var(--color-ink); padding-top: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.arc-contents ol { list-style: none; margin: 0; padding: 0; counter-reset: c; display: grid; }
.arc-contents li { counter-increment: c; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; gap: var(--space-xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); line-height: 1.35; }
.arc-contents li::before { content: counter(c, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }

/* how-tos: a ruled index */
.arc-rows { list-style: none; margin: 0; padding: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.arc-row { border-top: var(--rule-hair) solid var(--color-rule); }
.arc-row:first-child { border-top: 0; }
.arc-row a { display: grid; gap: var(--space-2xs) var(--space-lg); padding: var(--space-md) var(--space-3xs); text-decoration: none; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta meta" "title go" "ex ex"; }
.arc-meta { grid-area: meta; display: flex; gap: var(--space-md); }
.arc-row h3 { grid-area: title; font-size: var(--text-md); line-height: 1.2; }
.arc-row p { grid-area: ex; color: var(--color-ink-2); max-width: 64ch; }
.arc-go { grid-area: go; align-self: center; font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.arc-row a:hover { background: var(--color-paper-2); }
.arc-row a:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.arc-row a:hover .arc-go { transform: translateX(4px); color: var(--color-ink); }
.arc-row a:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: -2px; }
@media (max-width: 59.99rem) { .arc-t::before { content: "\00b7\00a0"; } }
@media (min-width: 60rem) {
  .arc-row a { grid-template-columns: 9rem minmax(0, 1fr) 5rem 2rem; grid-template-areas: "date title time go" "date ex time go"; align-items: baseline; padding: var(--space-lg) var(--space-xs); }
  .arc-meta { display: contents; }
  .arc-d { grid-area: date; }
  .arc-t { grid-area: time; text-align: right; }
}

/* build logs: photo cards */
.arc-cards { display: grid; gap: var(--space-xl) var(--space-lg); }
@media (min-width: 48rem) { .arc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }
.arc-card { position: relative; display: grid; gap: var(--space-sm); align-content: start; }
.arc-card figure { margin: 0; background: var(--color-paper-2); overflow: hidden; aspect-ratio: 16 / 10; }
.arc-card figure img { width: 100%; height: 100%; object-fit: cover; }
.arc-card h3 { font-size: var(--text-lg); line-height: 1.12; text-transform: uppercase; }
.arc-card h3 a { text-decoration: none; }
.arc-card h3 a::after { content: ""; position: absolute; inset: 0; }
.arc-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.arc-card p:not(.arc-mono) { color: var(--color-ink-2); max-width: 46ch; }
.arc-fin { position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: var(--wt-black); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-ink-2); text-decoration: none; box-shadow: inset 0 -2px 0 0 var(--color-rule-2); }
.arc-fin:hover { color: var(--color-ink); box-shadow: inset 0 -4px 0 0 var(--color-ink); }
.arc-card--text figure { display: grid; align-content: space-between; padding: var(--space-lg); background: var(--color-inverse); color: var(--color-inverse-ink); }
.arc-card--text figure span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-inverse-mute); }
.arc-card--text figure b { font-weight: var(--wt-black); letter-spacing: var(--track-black); text-transform: uppercase; font-size: var(--text-2xl); line-height: .95; }

/* wiring: drawing tiles */
.arc-tiles { display: grid; gap: var(--space-xl) var(--space-lg); }
@media (min-width: 40rem) { .arc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .arc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.arc-tile { position: relative; display: grid; gap: var(--space-xs); align-content: start; }
.arc-tile figure { margin: 0; background: var(--color-product-paper); border: var(--rule-hair) solid var(--color-rule); aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; }
.arc-tile figure img { width: 100%; height: 100%; object-fit: contain; }
.arc-tile h3 { font-size: var(--text-md); line-height: 1.2; }
.arc-tile h3 a { text-decoration: none; }
.arc-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.arc-tile:hover h3 a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.arc-tile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); }
.arc-tile li { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-3xs) var(--space-xs); }
.arc-row h3, .arc-tile h3 { text-transform: none; }
.arc-head + .filters { margin-top: var(--space-lg); }

/* How it works — numbered journey and press quotes (story, team and accordion reuse the About and FAQ styles). */
.proc-steps ol { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; }
.proc-steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.proc-steps li:first-child { border-top: var(--bar-w) solid var(--color-ink); }
.proc-steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-2xs); }
.proc-steps h3 { font-size: var(--text-md); line-height: var(--lh-tight); text-transform: none; }
.proc-steps li p { color: var(--color-ink-2); max-width: var(--measure); }
.proc-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl) var(--space-lg); }
@media (min-width: 48rem) { .proc-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proc-quotes li { border-top: var(--bar-w) solid var(--color-ink); padding-top: var(--space-md); display: grid; gap: var(--space-sm); align-content: space-between; justify-items: start; }
.proc-quotes blockquote { margin: 0; }
.proc-quotes blockquote p { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink); }
html { scroll-padding-top: 6rem; }

/* Our perks */
.perk-list { list-style: none; margin: 0; padding: var(--space-2xl) 0; display: grid; gap: var(--space-2xl) var(--space-xl); }
@media (min-width: 48rem) { .perk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.perk-list li { border-top: var(--bar-w) solid var(--color-ink); padding-top: var(--space-md); display: grid; gap: var(--space-sm); align-content: start; }
.perk-list h2 { font-size: var(--text-lg); line-height: var(--lh-tight); }
.perk-list p { color: var(--color-ink-2); max-width: 46ch; }
.perk-list a { color: var(--color-ink); text-underline-offset: 3px; }
.perk-list .perk-list__fine { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-muted); }
.perk-list__more { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); padding-bottom: var(--space-3xl); }

/* Customer reviews */
.rev-ways { list-style: none; margin: 0; padding: var(--space-2xl) 0; display: grid; gap: var(--space-xl) var(--space-lg); }
@media (min-width: 48rem) { .rev-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rev-ways li { border-top: var(--bar-w) solid var(--color-ink); padding-top: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; justify-items: start; }
.rev-ways h2 { font-size: var(--text-lg); line-height: var(--lh-tight); }
.rev-ways p { color: var(--color-ink-2); }
.rev-ways__pref { display: inline-block; vertical-align: middle; margin-inline-start: var(--space-xs); font-family: var(--font-mono); font-weight: var(--wt-body); font-size: var(--text-xs); letter-spacing: 0; text-transform: none; color: var(--color-blue-text); }
.rev-recent { padding-bottom: var(--space-3xl); }

/* Ambassadors */
.amb { list-style: none; margin: 0; padding: var(--space-2xl) 0 var(--space-3xl); display: grid; gap: var(--space-2xl) var(--space-xl); }
@media (min-width: 60rem) { .amb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.amb__item { border-top: var(--bar-w) solid var(--color-ink); padding-top: var(--space-md); display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.amb__item:not(:has(figure)) { grid-template-columns: minmax(0, 1fr); }
.amb figure { margin: 0; background: var(--color-product-paper); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.amb figure img { width: 100%; height: 100%; object-fit: cover; }
.amb__item > div { display: grid; gap: var(--space-xs); justify-items: start; }
.amb h2 { font-size: var(--text-lg); line-height: var(--lh-tight); }
.amb h2 a { text-decoration: none; }
.amb h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.amb p { color: var(--color-ink-2); max-width: 52ch; }

/* Two-column content tables (label | value, like the ambassador program) read
   better stacked on a phone. Wider tables keep scrolling inside their figure. */
@media (max-width: 40rem) {
  .entry-content table:not(:has(tr > :nth-child(3))),
  .entry-content table:not(:has(tr > :nth-child(3))) tbody,
  .entry-content table:not(:has(tr > :nth-child(3))) tr { display: block; width: 100%; }
  .entry-content table:not(:has(tr > :nth-child(3))) tr { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-sm); }
  .entry-content table:not(:has(tr > :nth-child(3))) td,
  .entry-content table:not(:has(tr > :nth-child(3))) th { display: block; width: auto; border: 0; padding: var(--space-3xs) 0; }
}

/* Legal pages: numbered sections beside a contents list. */
.legal { display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-3xl); }
@media (min-width: 60rem) { .legal { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: var(--space-3xl); } }
.legal__toc { align-self: start; border-top: var(--bar-w) solid var(--color-ink); padding-top: var(--space-sm); }
@media (min-width: 60rem) { .legal__toc { position: sticky; top: 6rem; } }
.legal__toc summary { cursor: pointer; font-family: var(--font-display); font-weight: var(--wt-black); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label); min-height: 44px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.legal__toc summary::-webkit-details-marker { display: none; }
.legal__toc summary::after { content: "+"; font-family: var(--font-mono); font-weight: var(--wt-body); color: var(--color-muted); }
.legal__toc[open] summary::after { content: "\2212"; }
@media (min-width: 60rem) { .legal__toc summary { pointer-events: none; } .legal__toc summary::after { content: none; } }
.legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; display: grid; }
.legal__toc li { counter-increment: t; border-top: var(--rule-hair) solid var(--color-rule); }
.legal__toc a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-xs); text-decoration: none; line-height: 1.35; min-height: 44px; align-items: baseline; }
.legal__toc a::before { content: counter(t, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.legal__toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal__body { counter-reset: s; display: grid; gap: var(--space-2xl); max-width: 46rem; min-width: 0; }
.legal__body section { display: grid; gap: var(--space-sm); scroll-margin-top: 6rem; }
.legal__body h2 { counter-increment: s; font-size: var(--text-lg); line-height: var(--lh-tight); text-transform: none; padding-top: var(--space-md); border-top: var(--bar-w) solid var(--color-ink); }
.legal__body h2::before { content: counter(s) ". "; font-family: var(--font-mono); font-weight: var(--wt-body); color: var(--color-muted); }
.legal__body h2.legal__plain::before { content: none; }
.legal__body h3 { font-size: var(--text-md); line-height: var(--lh-tight); text-transform: none; margin-top: var(--space-xs); }
.legal__body p, .legal__body li { color: var(--color-ink-2); line-height: 1.65; overflow-wrap: anywhere; }
.legal__body ul { margin: 0; padding-inline-start: var(--space-lg); display: grid; gap: var(--space-xs); }
.legal__body a { color: var(--color-ink); text-underline-offset: 3px; }
.legal__body .legal__notice { border: var(--rule-bold) solid var(--color-ink); padding: var(--space-md); color: var(--color-ink); }

/* Instagram links page: one narrow column, built for a thumb. */
.lk { max-width: 30rem; margin-inline: auto; padding: var(--space-xl) var(--space-md) var(--space-2xl); display: grid; gap: var(--space-xl); }
.lk-head { display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.lk-head img { width: 11rem; height: auto; }
.lk-head p:not(.bars) { color: var(--color-ink-2); max-width: 28ch; }
.lk-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-lg); }
.lk-socials a, .lk-more { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: var(--wt-black); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; box-shadow: inset 0 -2px 0 0 var(--color-rule-2); }
.lk-socials a:hover, .lk-more:hover { box-shadow: inset 0 -4px 0 0 var(--color-ink); }
.lk-more { white-space: nowrap; }
.lk-more::after { content: "\2192"; font-family: var(--font-mono); font-weight: var(--wt-body); margin-inline-start: var(--space-xs); }
.lk-actions { display: grid; gap: var(--space-sm); }
.lk-act { display: grid; align-content: center; gap: var(--space-3xs); min-height: 72px; padding: var(--space-sm) var(--space-lg); border: var(--rule-bold) solid var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.lk-act b { font-family: var(--font-display); font-weight: var(--wt-black); font-size: var(--text-base); letter-spacing: var(--track-label); text-transform: uppercase; }
.lk-act span { display: flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); }
.lk-act em { font-family: var(--font-display); font-style: normal; font-weight: var(--wt-black); letter-spacing: .1em; background: var(--color-orange); color: var(--color-ink); padding: var(--space-3xs) var(--space-xs); margin-inline-end: var(--space-xs); }
.lk-act--fill { background: var(--color-ink); color: var(--color-paper); }
.lk-act--fill span { color: var(--color-rule-2); }
.lk-act:hover { background: var(--color-ink); color: var(--color-paper); }
.lk-act--fill:hover { background: transparent; color: var(--color-ink); }
.lk-act--fill:hover span { color: var(--color-muted); }
.lk-sec { display: grid; gap: var(--space-md); }
.lk-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-sm); border-top: var(--bar-w) solid var(--color-ink); }
.lk-sec__head h2 { font-size: var(--text-md); line-height: var(--lh-tight); }
.lk-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.lk-part { display: grid; gap: var(--space-xs); align-content: start; text-decoration: none; }
.lk-part figure, .lk-build figure { margin: 0; overflow: hidden; }
.lk-part figure { background: var(--color-product-paper); aspect-ratio: 1; display: grid; place-items: center; }
.lk-part img { width: 100%; height: 100%; object-fit: contain; }
.lk-part h3 { font-family: var(--font-body); font-weight: var(--wt-mid); font-size: var(--text-xs); line-height: 1.3; text-transform: none; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lk-price { font-family: var(--font-mono); font-weight: var(--wt-mid); font-size: var(--text-xs); }
.lk-price s { color: var(--color-muted); font-weight: var(--wt-body); margin-inline-end: var(--space-2xs); }
.lk-price i { font-style: normal; color: var(--color-orange-text); }
.lk-builds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.lk-build { display: grid; gap: var(--space-xs); align-content: start; text-decoration: none; }
.lk-build figure { background: var(--color-paper-2); aspect-ratio: 16 / 10; }
.lk-build img { width: 100%; height: 100%; object-fit: cover; }
.lk-build h3 { font-size: var(--text-base); line-height: var(--lh-tight); }
.lk-build:hover h3, .lk-art:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.lk-arts { list-style: none; margin: 0; padding: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.lk-art { display: grid; gap: var(--space-3xs); padding: var(--space-sm) var(--space-3xs); border-top: var(--rule-hair) solid var(--color-rule); text-decoration: none; }
.lk-art:hover { background: var(--color-paper-2); }
.lk-art h3 { font-size: var(--text-base); line-height: 1.25; text-transform: none; }
.lk-quiet { list-style: none; margin: 0; padding: 0; }
.lk-quiet a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-top: var(--rule-hair) solid var(--color-rule); font-weight: var(--wt-mid); text-decoration: none; }
.lk-quiet li:last-child a { border-bottom: var(--rule-hair) solid var(--color-rule); }
.lk-quiet a::after { content: "\2192"; font-family: var(--font-mono); color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.lk-quiet a:hover::after { transform: translateX(4px); color: var(--color-ink); }
.lk-foot { display: grid; justify-items: center; gap: var(--space-2xs); text-align: center; }
.lk-act--off { border-style: dashed; border-color: var(--color-rule-2); color: var(--color-ink-2); cursor: not-allowed; }
.lk-act--off span { color: var(--color-muted); }
.lk-act--off:hover { background: transparent; color: var(--color-ink-2); }
.lk-act--off:hover span { color: var(--color-muted); }