/* =========================================================================
   BIKESWITHMOTORS
   -------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset and base
   3.  Layout primitives
   4.  Typography
   5.  Header and navigation
   6.  Footer
   7.  Buttons and links
   8.  Home
   9.  Explore
   10. Gallery
   11. Story
   12. Register
   13. 404
   14. Motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   Every color, size, and spacing step in the site is defined once, here.
   Change a value and it changes everywhere.
   ---------------------------------------------------------------------- */
:root {
  /* Surfaces, darkest to lightest */
  --bg:           #08090a;
  --bg-raised:    #0e1113;
  --bg-panel:     #14181b;

  /* Ink */
  --fg:           #eef2f3;
  --fg-muted:     #a7b2b7;
  --fg-faint:     #6d787d;

  /* Lines */
  --line:         #23292d;
  --line-soft:    rgba(255, 255, 255, 0.08);

  /* Accent, taken from the teal in the bike's own photography */
  --accent:       #2ee0e0;
  --accent-deep:  #0f9d9d;
  --accent-glow:  rgba(46, 224, 224, 0.16);

  /* Type families */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale. clamp() = smallest, preferred, largest. */
  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.06rem + 0.42vw, 1.44rem);
  --step-2:  clamp(1.45rem, 1.24rem + 1.02vw, 2.15rem);
  --step-3:  clamp(1.9rem,  1.42rem + 2.36vw, 3.5rem);
  --step-4:  clamp(2.5rem,  1.5rem + 4.9vw,  5.75rem);
  --step-5:  clamp(3.1rem,  1.3rem + 8.6vw,  9rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Vertical rhythm between full sections */
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);

  /* Structure */
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --measure: 62ch;
  --max: 88rem;
  --header-h: 4.5rem;
  --radius: 3px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;

  color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. RESET AND BASE
   ---------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img,
video { height: auto; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--accent);
  color: #04211f;
}

/* Skip link: hidden until it receives keyboard focus. */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: #04211f;
  font: 600 0.85rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--sp-5)));
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ---------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 64rem; }

.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* A section header: small mono label, hairline, then the heading. */
.section-head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.section-head__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.section-head__meta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.label--muted { color: var(--fg-faint); }

/* -------------------------------------------------------------------------
   4. TYPOGRAPHY
   ---------------------------------------------------------------------- */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.t-hero    { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.045em; }
.t-xl      { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.04em; }
.t-lg      { font-size: var(--step-3); }
.t-md      { font-size: var(--step-2); line-height: 1.08; }
.t-sm      { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.015em; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: var(--measure);
  letter-spacing: 0;
  text-wrap: pretty;
}

.prose {
  max-width: var(--measure);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.prose > * + * { margin-top: var(--sp-5); }
.prose strong { color: var(--fg); font-weight: 600; }

.upper {
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Big index numeral used to mark sections. */
.numeral {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
}

/* -------------------------------------------------------------------------
   5. HEADER AND NAVIGATION
   ---------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              backdrop-filter 0.35s var(--ease);
}
/* Solid once the page scrolls, and always solid on non-hero pages. */
.header.is-stuck,
.header--solid {
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}

.header__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark {
  width: auto;
  height: 15px;
}
.brand__tag {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
@media (min-width: 60rem) {
  .brand__tag { display: block; }
}

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.6vw, 2.1rem);
}
.nav__link {
  position: relative;
  display: block;
  padding: 0.45rem 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-muted);
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--fg); }

.nav__link--ext::before {
  content: "↗";
  margin-right: 0.35em;
  color: var(--fg-faint);
  font-size: 0.85em;
}

/* Hamburger, shown only on narrow screens. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
  padding: 0;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -5.5px; }
.nav-toggle__bars::after  { top: 5.5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 60rem) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    /* Fully opaque. A translucent panel let the page heading underneath
       ghost through and made the menu hard to read. */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-4) var(--gutter) var(--sp-7);
    /* Closed by default. The page still works with JavaScript disabled
       because :target and the toggle both remove this. */
    display: none;
  }
  .nav.is-open { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__list > li + li { border-top: 1px solid var(--line-soft); }
  .nav__link {
    padding: 1.05rem 0;
    font-size: 0.92rem;
    letter-spacing: 0.1em;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--accent); }
}

/* When JavaScript is unavailable the menu cannot be opened by a button, so
   it is always visible instead. The header also stops being fixed, because a
   fixed bar cannot grow to hold a wrapped list of links without covering the
   page underneath it. */
.no-js .header {
  position: static;
  height: auto;
  padding-block: var(--sp-4);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.no-js .header__inner { flex-wrap: wrap; row-gap: var(--sp-4); }
.no-js .nav-toggle { display: none; }
.no-js .nav {
  display: block;
  position: static;
  background: none;
  border: 0;
  padding: 0;
  margin-left: auto;
}
.no-js .nav__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}
.no-js .nav__list > li + li { border-top: 0; }
.no-js .nav__link { padding: 0.3rem 0; font-size: 0.76rem; }

@media (max-width: 60rem) {
  .no-js .nav { width: 100%; margin-left: 0; }
}

/* -------------------------------------------------------------------------
   6. FOOTER
   ---------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
  padding-block: var(--sp-9) var(--sp-6);
}
.footer__grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); }
}

.footer__mark { height: 18px; width: auto; margin-bottom: var(--sp-5); }
.footer__note {
  color: var(--fg-faint);
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: 34ch;
}
.footer__note + .footer__note { margin-top: var(--sp-4); }

.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}
.footer__links { display: grid; gap: var(--sp-3); }
.footer__links a {
  text-decoration: none;
  color: var(--fg-muted);
  font-size: var(--step--1);
  transition: color 0.2s var(--ease);
  width: fit-content;
}
.footer__links a:hover { color: var(--accent); }

.footer__bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* -------------------------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------------------- */
.btn {
  --btn-fg: #04211f;
  --btn-bg: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover {
  background: transparent;
  color: var(--accent);
  transform: translateY(-2px);
}
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: rgba(255, 255, 255, 0.28);
}
.btn--ghost:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* -------------------------------------------------------------------------
   8. HOME
   ---------------------------------------------------------------------- */

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--bg);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* The still photograph and the video sit one on top of the other, both
   filling the hero. They must be positioned, not left in normal flow, or the
   photograph takes up the whole box and pushes the video off the screen
   below it. The video comes second in the HTML, so it covers the photograph
   once it starts. If there is no video, the photograph is what shows. */
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Two overlays: a bottom-up gradient for text legibility, and a soft
   vignette so the edges of the frame do not feel cut off. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.35) 42%, rgba(8, 9, 10, 0.5) 100%),
    radial-gradient(120% 85% at 50% 45%, transparent 40%, rgba(8, 9, 10, 0.66) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--sp-10) var(--gutter) clamp(3rem, 2rem + 5vw, 6rem);
}
.hero__wordmark {
  width: min(100%, 46rem);
  height: auto;
  margin-bottom: var(--sp-6);
}
.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.hero__kicker::before {
  content: "";
  width: clamp(1.5rem, 4vw, 4rem);
  height: 1px;
  background: var(--accent);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero__meta li { display: flex; align-items: center; gap: 0.55em; }
.hero__meta li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3rem, 2rem + 5vw, 6rem);
  z-index: 1;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-decoration: none;
}
@media (min-width: 48rem) { .hero__scroll { display: flex; } }
.hero__scroll span::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.6rem;
  margin: var(--sp-3) auto 0;
  background: linear-gradient(to bottom, var(--accent), transparent);
}
.hero__scroll span {
  writing-mode: vertical-rl;
  text-align: start;
}

/* Placeholder shown when no hero video has been supplied yet. */
.hero__video-missing {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: calc(var(--header-h) + var(--sp-4));
  padding: 0.55rem 0.9rem;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: rgba(8, 9, 10, 0.7);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Intro band --------------------------------------------------------- */
.intro-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .intro-grid { grid-template-columns: 18rem 1fr; gap: var(--sp-8); }
}
/* Nudge the label down so it sits on the first line of body text. */
@media (min-width: 56rem) {
  .intro-grid > .section-head { padding-top: 0.55rem; }
}
.intro-grid__body { font-size: var(--step-1); line-height: 1.5; color: var(--fg-muted); }
.intro-grid__body > * + * { margin-top: var(--sp-5); }

/* Scrolling strip of component names. Purely decorative. */
.ticker {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: var(--sp-4);
  background: var(--bg-raised);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: var(--sp-6);
  animation: ticker 44s linear infinite;
}
.ticker__item {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}
.ticker__item::after {
  content: "";
  width: 4px; height: 4px;
  background: var(--accent-deep);
  transform: rotate(45deg);
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--sp-3))); }
}

/* --- Full-bleed panels -------------------------------------------------- */
.panel {
  position: relative;
  min-height: clamp(30rem, 26rem + 26vw, 46rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.panel__media { position: absolute; inset: 0; z-index: 0; }
.panel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.2s var(--ease);
}
.panel:hover .panel__media img { transform: scale(1.07); }
.panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(8, 9, 10, 0.94) 0%,
    rgba(8, 9, 10, 0.45) 45%,
    rgba(8, 9, 10, 0.22) 100%);
}
.panel__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--sp-9) var(--gutter) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
}
.panel__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.panel__heading { max-width: 16ch; }

/* Each panel's text sits on whichever side leaves the photograph's subject
   clear. The side is chosen per panel in content.js, not by position. */
@media (min-width: 56rem) {
  .panel--right .panel__inner { justify-items: end; text-align: right; }
}

/* --- Closing CTA -------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.cta__media { position: absolute; inset: 0; z-index: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(8, 9, 10, 0.97) 8%, rgba(8, 9, 10, 0.72) 42%, rgba(8, 9, 10, 0.3) 100%);
}
.cta__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
  max-width: 44rem;
}

/* -------------------------------------------------------------------------
   9. EXPLORE
   ---------------------------------------------------------------------- */

/* Page header used on every interior page. */
.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(24rem, 18rem + 26vw, 40rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8, 9, 10, 0.95) 4%, rgba(8, 9, 10, 0.42) 55%, rgba(8, 9, 10, 0.55) 100%);
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-9)) var(--gutter) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
}
.page-hero__kicker {
  display: flex; align-items: center; gap: var(--sp-4);
}
.page-hero__kicker::before {
  content: "";
  width: clamp(1.5rem, 4vw, 3.5rem);
  height: 1px;
  background: var(--accent);
}

/* Breadcrumb strip under the page header. */
.crumbs {
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  padding-block: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--line); }
.crumbs [aria-current="page"] { color: var(--fg); }

/* Each labelled component photograph plus its list of parts. */
.spec {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 2rem + 4.5vw, 6rem);
}
.spec:first-of-type { border-top: 0; }

.spec__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .spec__grid { grid-template-columns: 1fr 20rem; gap: var(--sp-8); }
}

.spec__figure { margin: 0; }
.spec__figure img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

/* These photographs carry printed labels. Squeezed onto a phone the labels
   become unreadable, so below this width the picture keeps a usable size and
   scrolls sideways inside its own box instead. The list of parts beside it
   repeats every label as real text, so nothing depends on reading the image. */
@media (max-width: 44rem) {
  .spec__figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .spec__figure img {
    width: auto;
    min-width: 46rem;
    max-width: none;
    border: 0;
    border-radius: 0;
  }
  .spec__figure::after {
    content: "Scroll to see all labels";
    display: block;
    position: sticky;
    left: 0;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-faint);
    border-top: 1px solid var(--line);
  }
}

.spec__aside { display: grid; gap: var(--sp-5); }
.spec__parts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.spec__parts li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step-0);
  color: var(--fg);
}
.spec__parts li::before {
  content: counter(spec-part, decimal-leading-zero);
  counter-increment: spec-part;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  flex-shrink: 0;
}
.spec__parts { counter-reset: spec-part; }

/* Full component index at the bottom of the Explore page. */
.index-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 40rem) { .index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .index-grid { grid-template-columns: repeat(3, 1fr); } }

.index-grid li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 1.05rem var(--sp-5) 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step-0);
}
.index-grid li span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  flex-shrink: 0;
}

/* Optional figures strip. Only rendered when values exist. */
.figures {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.figures > div { background: var(--bg-raised); padding: var(--sp-6) var(--sp-5); }
.figures dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--sp-3);
}
.figures dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   10. GALLERY
   ---------------------------------------------------------------------- */
.grid-photos {
  display: grid;
  gap: clamp(0.6rem, 0.3rem + 1vw, 1.15rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 44rem) { .grid-photos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .grid-photos { grid-template-columns: repeat(4, 1fr); } }

/* Square tiles. The photographs are a mix of upright and wide, and a square
   frame treats both the same, so the grid stays even however they were shot. */
.photo {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  text-decoration: none;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.4s var(--ease);
  filter: saturate(0.92);
}
.photo:hover img,
.photo:focus-visible img {
  transform: scale(1.05);
  filter: saturate(1.05);
}
/* Small corner marker that appears on hover, hinting the image opens. */
.photo::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  width: 1.5rem;
  height: 1.5rem;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  opacity: 0;
  transform: translate(-4px, -4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.photo:hover::after,
.photo:focus-visible::after { opacity: 1; transform: translate(0, 0); }

/* Lightbox. Without JavaScript each tile is an ordinary link to the full
   image, so the gallery still works. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(4, 5, 6, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  /* Visibility must flip instantly when opening, otherwise the browser still
     counts the dialog as invisible and refuses to move focus into it. On the
     way out it waits for the fade to finish. */
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0s;
}
.lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox__caption {
  margin-top: var(--sp-5);
  max-width: 60ch;
  text-align: center;
  font-size: var(--step--1);
  color: var(--fg-muted);
}
.lightbox__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) clamp(1rem, 3vw, 3rem);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.lightbox__btn {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(20, 24, 27, 0.8);
  color: var(--fg);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lightbox__btn:hover { border-color: var(--accent); color: var(--accent); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }

/* -------------------------------------------------------------------------
   11. STORY
   ---------------------------------------------------------------------- */
.bio {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .bio { grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 1rem + 5vw, 5.5rem); }
}
.bio__figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.bio__figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Thin accent rule that reads as a frame corner. */
.bio__figure::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34%;
  height: 2px;
  background: var(--accent);
}
.bio__body { display: grid; gap: var(--sp-5); justify-items: start; }

/* Callout used where the client still needs to supply words. */
.awaiting {
  border: 1px dashed var(--line);
  border-left: 2px solid var(--accent-deep);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-raised);
  color: var(--fg-faint);
  font-size: var(--step--1);
}

/* -------------------------------------------------------------------------
   12. REGISTER
   ---------------------------------------------------------------------- */
.form-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.form-shell iframe {
  display: block;
  width: 100%;
  border: 0;
}
.form-fallback {
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  color: var(--fg-faint);
}
.form-fallback a { color: var(--accent); }

.notice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  max-width: 46rem;
}

/* -------------------------------------------------------------------------
   13. 404
   ---------------------------------------------------------------------- */
.error-page {
  min-height: 78svh;
  display: grid;
  align-content: center;
  padding-top: var(--header-h);
}
.error-page__inner { display: grid; gap: var(--sp-5); justify-items: start; }

/* -------------------------------------------------------------------------
   14. MOTION
   Elements fade up as they enter the viewport. The class is only added by
   JavaScript, so with JavaScript off everything is simply visible.
   ---------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  .panel:hover .panel__media img { transform: scale(1.03); }
}