/* Halden Cycles — site styles. See DESIGN.md for the token rationale. */

@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-Variable.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-VariableItalic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/InstrumentSerif-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/InstrumentSerif-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #F5F2EB;
  --paper-2: #ECE7DC;
  --paper-3: #E2DCCD;
  --ink: #17150F;
  --ink-2: #5E5848;
  --ink-3: #8C8572;
  --line: #D9D2C3;
  --accent: #214A3A;
  --accent-soft: #DCE6DF;
  --on-ink: #F5F2EB;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-text: "Instrument Sans", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 66ch;
  --ease: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
  scrollbar-color: var(--line) transparent;
  accent-color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Cross-document view transitions.
   Both the outgoing and the incoming page carry this rule; the browser snapshots
   each named element on both sides and animates between them. The header and the
   assistant are given names so they are captured separately from the page body,
   and they hold still while `main` slides.
--------------------------------------------------------------------------- */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

.site-header { view-transition-name: site-header; }
main { view-transition-name: page; }

/* Root crossfade is pointless when every visible region is named; stop it. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* Fixed regions: no crossfade, the new image simply replaces the (identical) old one. */
::view-transition-group(site-header), ::view-transition-group(assistant) { animation-duration: 0s; }
::view-transition-old(site-header), ::view-transition-old(assistant) { animation: none; display: none; }
::view-transition-new(site-header), ::view-transition-new(assistant) { animation: none; }

/* Page body: 280ms slide + fade. Direction comes from a transition type set in
   pageswap / pagereveal (inline script in each page's head). Default, with no type, is forward. */
::view-transition-group(page) { animation-duration: 0s; }
::view-transition-old(page) { animation: 280ms var(--ease) both page-out-forward; }
::view-transition-new(page) { animation: 280ms var(--ease) both page-in-forward; }
html:active-view-transition-type(backward)::view-transition-old(page) { animation-name: page-out-backward; }
html:active-view-transition-type(backward)::view-transition-new(page) { animation-name: page-in-backward; }

@keyframes page-out-forward  { to   { opacity: 0; transform: translateX(-32px); } }
@keyframes page-in-forward   { from { opacity: 0; transform: translateX(32px); } }
@keyframes page-out-backward { to   { opacity: 0; transform: translateX(32px); } }
@keyframes page-in-backward  { from { opacity: 0; transform: translateX(-32px); } }

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 16px/1.55 var(--font-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--ink-3); transition: text-decoration-color .15s, color .15s; }
a:hover { text-decoration-color: currentColor; color: var(--accent); }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
p + p { margin-top: 1em; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 7vw, 88px); line-height: .98; }
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; }
h3 { font-size: 24px; line-height: 1.15; }
em { font-style: italic; }
.muted { color: var(--ink-2); }
.price { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.wordmark { font: 400 26px/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; }
.wordmark:hover { color: var(--ink); }
.site-nav { display: flex; gap: clamp(16px, 3vw, 32px); }
.site-nav a { font-size: 15px; text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); }

/* ---------------------------------------------------------------------------
   Page layouts
--------------------------------------------------------------------------- */

main { flex: 1; padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(64px, 9vw, 128px); }
.section + .section { margin-top: clamp(64px, 9vw, 112px); }
.lede { font-size: 20px; line-height: 1.45; max-width: 44ch; color: var(--ink-2); margin-top: 24px; }
.lede + * { margin-top: clamp(40px, 6vw, 72px); }
.detail .lede + .prose { margin-top: 28px; }
.prose { max-width: var(--measure); }
.prose h2 { margin: clamp(40px, 6vw, 64px) 0 16px; }
.prose p + p { margin-top: 1.1em; }
.small { font-size: 14px; color: var(--ink-2); }

/* Home */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.hero-figure { margin: 0; }
.plinth { background: var(--paper-2); border-radius: 6px; aspect-ratio: 3 / 2; overflow: clip; }
.plinth img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.hero-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 32px; }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 6px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--on-ink); font: 500 15px/1 var(--font-text); text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-ink); }
.button:active { transform: translateY(1px); }
.button.ghost { background: transparent; color: var(--ink); }
.button.ghost:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }

/* Bike grid */
.bikes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 32px); }
.bike { text-decoration: none; color: inherit; display: block; }
.bike .plinth { transition: background .2s; }
.bike:hover .plinth { background: var(--paper-3); }
.bike:hover { color: inherit; }
.bike h2 { margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 22px; }
.bike h2 .price { font-family: var(--font-text); font-size: 15px; color: var(--ink-2); }
.bike p { margin-top: 6px; color: var(--ink-2); font-size: 15px; }

/* Bike detail */
.detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.detail .plinth { position: sticky; top: 96px; }
.detail h1 { font-size: clamp(40px, 5vw, 64px); }
.spec { margin: 32px 0 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 24px; font-size: 15px; }
.spec dt { color: var(--ink-2); }
.spec dd { margin: 0; }
.spec-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec-row:first-child { padding-top: 0; }
.detail .price-line { margin-top: 32px; display: flex; align-items: baseline; gap: 16px; }
.detail .price-line .price { font-family: var(--font-display); font-size: 36px; letter-spacing: -0.02em; }
.pager { margin-top: clamp(48px, 7vw, 96px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; font-size: 15px; }
.pager a { text-decoration: none; }

/* Footer */
.site-footer { padding: 24px var(--gutter) 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--ink-2); }
.site-footer a { text-decoration: none; }

@media (width < 820px) {
  .hero, .detail { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .detail .plinth { position: static; }
  .site-header { padding-block: 14px; }
  .wordmark { font-size: 22px; }
}
@media (width < 480px) {
  .site-nav a { font-size: 14px; }
  .lede { font-size: 18px; }
}