/* SF Pro Rounded, as in the app, wherever the browser has it. Nunito only downloads where it doesn't. */
@font-face {
  font-family: "Nunito BAAW";
  src: url("/fonts/nunito-latin-wght.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* The brand's brights, from TourBright. Black ink on all of them. */
  --red: #FF2B2A;
  --yellow: #FFCA00;
  --blue: #007EF9;
  --green: #00AF58;
  --paper: #F7F7F7;
  --pink: #FF99A4;
  --ink: #000;
  --wall: var(--yellow);

  --rounded: ui-rounded, "SF Pro Rounded", "Nunito BAAW", system-ui, sans-serif;
  --gutter: clamp(16px, 3.4vw, 48px);
  /* Animation.brandLean: response 0.42, damping 0.58, over 1 s. */
  --brand-lean: linear(0, .06, .205, .387, .575, .744, .882, .985, 1.053, 1.091, 1.106, 1.104, 1.09, 1.072, 1.052, 1.033, 1.017, 1.005, .996, .991, .989, .989, .99, .992, .994, .996, .998, .999, 1, 1.001, 1.001, 1.001, 1.001, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--yellow); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  font: 500 clamp(17px, 1.35vw, 21px)/1.4 var(--rounded);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, dl, dd { margin: 0; padding: 0; }
ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.defs { position: absolute; }

h2 {
  font-weight: 900;
  font-size: clamp(44px, 8.4vw, 136px);
  line-height: .94;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* ---- Walls and parts, by build ---- */

[data-build="1"] { --wall: var(--yellow); }
[data-build="2"] { --wall: var(--pink); }
[data-build="3"] { --wall: var(--blue); }
[data-build="4"] { --wall: var(--paper); }
[data-build="5"] { --wall: var(--red); }
[data-build="6"] { --wall: var(--green); }
[data-build="7"] { --wall: var(--yellow); }

[data-build] { --tyre: 5px; --drops: 1; --swept: 0; --fenders: 0; --light: 0; --bag: 0; --crate: 0; --sticker: 0; }
[data-build="2"], [data-build="3"], [data-build="4"], [data-build="5"], [data-build="6"], [data-build="7"] { --tyre: 10px; }
[data-build="3"], [data-build="4"], [data-build="5"], [data-build="6"], [data-build="7"] { --drops: 0; --swept: 1; }
[data-build="4"], [data-build="5"], [data-build="6"], [data-build="7"] { --fenders: 1; }
[data-build="5"], [data-build="6"], [data-build="7"] { --light: 1; }
[data-build="6"], [data-build="7"] { --bag: 1; }
[data-build="7"] { --crate: 1; --sticker: 1; }

/* Inside the <use>, so each instance reads its own build. */
#bike .s, .crate .s { fill: none; stroke: var(--line, #000); stroke-width: calc(5px + var(--halo, 0px)); stroke-linecap: round; stroke-linejoin: round; }
#bike .t { stroke-width: calc(var(--tyre, 5px) + var(--halo, 0px)); }
#bike .saddle { stroke-width: calc(11px + var(--halo, 0px)); }
#bike .f { fill: var(--line, #000); stroke: var(--line, #000); stroke-width: var(--halo, 0px); }
.p-drops { opacity: var(--drops, 1); }
.p-swept { opacity: var(--swept, 0); }
.p-fenders { opacity: var(--fenders, 0); }
.p-light { opacity: var(--light, 0); }
.p-bag { opacity: var(--bag, 0); }
.p-crate { opacity: var(--crate, 0); }
.p-sticker { opacity: var(--sticker, 0); }

.bike { display: block; overflow: visible; }
.bike .ink { --line: #000; --halo: 0px; }
.bike .halo { --line: var(--wall); --halo: 18px; }
.ground { fill: none; stroke: #000; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; }

/* The app's one pill. */
.pill {
  display: inline-block;
  padding: .28em .72em;
  border: .11em solid currentColor;
  border-radius: 99em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

/* ---- The mark: each letter turned about its ink centroid ---- */

.m-b, .m-a1, .m-a2, .m-w { transition: transform 1s var(--brand-lean); }
.m-b { transform: translate(-587.1px, -366.9px) rotate(-6deg); }
.m-a1 { transform: translate(244.9px, -529.4px) rotate(24deg); transition-delay: 60ms; }
.m-a2 { transform: translate(-626.9px, 483.1px) rotate(-30deg); transition-delay: 120ms; }
.m-w { transform: translate(319.1px, 330.8px) rotate(12deg); transition-delay: 180ms; }
.level .m-b { transform: translate(-498.3px, -422.9px); }
.level .m-a1 { transform: translate(287.9px, -422.9px); }
.level .m-a2 { transform: translate(-498.3px, 450.2px); }
.level .m-w { transform: translate(335.7px, 450.2px); }

/* ---- Hero ---- */

.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding: calc(var(--gutter) + 14px + env(safe-area-inset-top)) calc(var(--gutter) + 14px) calc(var(--gutter) + 14px);
  background: var(--wall);
  overflow: hidden;
  isolation: isolate;
}

.corners i { position: absolute; width: 28px; height: 28px; border: 3px solid #000; }
.corners i:nth-child(1) { top: calc(var(--gutter) + env(safe-area-inset-top)); left: var(--gutter); border-width: 3px 0 0 3px; }
.corners i:nth-child(2) { top: calc(var(--gutter) + env(safe-area-inset-top)); right: var(--gutter); border-width: 3px 3px 0 0; }
.corners i:nth-child(3) { bottom: var(--gutter); right: var(--gutter); border-width: 0 3px 3px 0; }
.corners i:nth-child(4) { bottom: var(--gutter); left: var(--gutter); border-width: 0 0 3px 3px; }

.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; position: relative; z-index: 2; }
.brand { width: clamp(52px, 5.4vw, 80px); height: clamp(52px, 5.4vw, 80px); }
.status { justify-self: end; font-weight: 700; }

.level-readout { display: grid; justify-items: center; gap: 6px; padding-top: 2px; }
.deg { font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace; animation: appear .2s 1.7s both; }
.level-readout .line {
  display: block; width: 60px; height: 10px; border-radius: 9px; background: #000;
  animation: straighten 1s .5s var(--brand-lean) both;
}

.wall {
  position: absolute;
  z-index: 0;
  left: calc(var(--gutter) + 12px);
  right: calc(var(--gutter) + 12px);
  top: calc(var(--gutter) + 88px + env(safe-area-inset-top));
  font-weight: 900;
  font-size: min(14.6vw, 25svh);
  line-height: .9;
  letter-spacing: -.045em;
}
.wall span { white-space: nowrap; }
.wall .last { display: block; }

.hero-bike {
  position: absolute;
  z-index: 1;
  right: clamp(0px, 3vw, 60px);
  bottom: calc(var(--gutter) + 118px);
  width: min(58vw, 80svh);
  height: auto;
}
.tip { transform-box: view-box; transform-origin: 150px 100px; animation: tip 1.1s .5s var(--brand-lean) both; }
.hub { fill: none; stroke: #000; stroke-width: 3; animation: appear .2s 1.7s both; }

.foot { grid-row: 3; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: end; position: relative; z-index: 2; }
.lede { max-width: 21em; font-weight: 800; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.12; letter-spacing: -.01em; }
.canon { justify-self: end; text-align: right; font-weight: 600; }

.shutter {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border: 5px solid #000; border-radius: 50%;
  transition: scale .15s;
}
.shutter:active { scale: .92; }
.shutter i { display: block; width: 56px; height: 56px; border-radius: 50%; background: #000; animation: fill .9s 2s var(--brand-lean) both; }
.flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; animation: flash .55s 3s ease-out both; }

@keyframes tip { from { transform: rotate(-6deg); } to { transform: none; } }
@keyframes straighten { from { transform: rotate(-7deg); height: 5px; } to { transform: none; height: 10px; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes fill { from { transform: scale(0); } to { transform: none; } }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }

/* ---- Builds: without main.js it's a plain list under the finished bike ---- */

.builds { background: var(--wall); }
.stage { padding: var(--gutter); display: grid; gap: 32px; }
.builds-title { font-size: clamp(30px, 3.6vw, 56px); line-height: 1; }
.builds-bike { width: 100%; max-width: 900px; }
.steps { display: grid; gap: 28px; }
.step .pill { font-size: clamp(14px, 1.15vw, 18px); }
.step h3 { margin-top: .4em; font-weight: 900; font-size: clamp(30px, 4.3vw, 68px); line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.diff { display: grid; grid-template-columns: 6.2em 1fr; gap: .5em 1em; margin-top: 1em; padding-top: .7em; border-top: 1.5px solid #000; max-width: 26em; }
.diff dt { font-weight: 500; }
.diff dd { font-weight: 800; }
.diff s { display: block; font-weight: 500; }
.rail { display: none; }

.js .builds { height: calc(100svh + 6 * 70svh); }
.js .stage {
  position: sticky; top: 0;
  height: 100svh;
  padding-top: calc(var(--gutter) + env(safe-area-inset-top));
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr auto;
  gap: 0 clamp(16px, 3vw, 48px);
  overflow: hidden;
}
.js .builds-title { grid-column: 1; grid-row: 1; }
.js .builds-bike { grid-column: 2; grid-row: 1 / 3; align-self: end; justify-self: end; max-width: none; max-height: 78svh; }
.js .steps { display: block; grid-column: 1; grid-row: 2; align-self: end; position: relative; height: 100%; margin-bottom: 28px; }
.js .step { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; }
.js .step.on { opacity: 1; }
.js .rail {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-column: 1 / -1; grid-row: 3;
  border-top: 3px dotted #000;
}
.rail button {
  position: relative;
  height: 44px;
  font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; text-align: left;
  opacity: .45;
}
.rail button.on { opacity: 1; }
.rail button.on::before { content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 5px; background: #000; }

/* ---- A sticker counts ---- */

.parts {
  background: var(--paper);
  padding: clamp(72px, 11vw, 170px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
.parts-head p { margin-top: 1.1em; max-width: 30em; }
.sheet div { display: flex; justify-content: space-between; gap: 1em; padding: .62em 0; border-top: 1.5px solid #000; }
.sheet div:last-child { border-bottom: 1.5px solid #000; }
.sheet dt { font-weight: 500; }
.sheet dd { font-weight: 800; text-align: right; }

/* ---- Cards: type sized against the card, so it's the same card at any width ---- */

.cards { background: var(--blue); padding: clamp(72px, 11vw, 170px) var(--gutter); overflow: hidden; }
.cards-head { display: grid; gap: 1em; max-width: 46em; }
.cards-head h2 { max-width: 10em; }
.deck {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0px, 2vw, 32px);
  margin: clamp(48px, 7vw, 110px) auto 0;
  max-width: 1320px;
}
.card {
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0 0 0 / .2), 0 24px 60px rgb(0 0 0 / .32);
  transition: transform 1s var(--brand-lean);
}
.card:nth-child(1) { transform: rotate(-6deg) translateY(2%); }
.card:nth-child(2) { transform: rotate(3deg) translateY(-3%); z-index: 1; transition-delay: 60ms; }
.card:nth-child(3) { transform: rotate(-3deg) translateY(4%); transition-delay: 120ms; }
.js .deck:not(.in) .card { transform: translateY(14%); }

.card > *, .card .plate { font-size: 3.4cqw; }
.card .pill { font-size: 2.5cqw; }
.card b { font-weight: 800; }
.plate { background: var(--wall); display: grid; place-items: center; overflow: hidden; position: relative; }
.plate .bike { width: 86%; }
.cfoot { display: flex; justify-content: space-between; align-items: center; }
.cmark { width: 7cqw; height: 7cqw; }

.museum { background: #E9E7E2; padding: 7% 7% 5%; display: flex; flex-direction: column; }
.museum .plate { aspect-ratio: 4 / 2.6; flex: none; box-shadow: 0 1px 8px rgb(0 0 0 / .18); }
.museum .label { background: #F7F6F2; margin-top: 5cqw; padding: 4cqw 4.4cqw; display: grid; gap: .45em; font-size: 2.9cqw; line-height: 1.2; box-shadow: 0 1px 6px rgb(0 0 0 / .1); }
.museum .label b { font-size: 5cqw; }
.museum .row { display: flex; gap: .7em; align-items: center; margin: .25em 0; }
.museum .cfoot { margin-top: auto; font-size: 2.6cqw; font-variant-numeric: tabular-nums; }

.meta { background: #0B0B0B; color: #fff; padding: 0; }
.meta .plate { height: 62%; align-items: start; padding-top: 9cqw; }
.meta .plate::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #0B0B0B); }
.meta > .cmark { position: absolute; top: 4cqw; right: 4cqw; color: #000; }
.meta .name { position: absolute; left: 5cqw; right: 5cqw; top: 41%; display: grid; justify-items: start; gap: 1cqw; }
.meta .name b { font-size: 13cqw; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.meta .line { display: flex; justify-content: space-between; margin: 1.5cqw 5cqw 0; font-size: 2.8cqw; opacity: .75; }
.meta dl { margin: 3cqw 5cqw 0; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 1.3cqw 2.4cqw; font-size: 2.7cqw; border-top: 1px solid rgb(255 255 255 / .3); padding-top: 2.4cqw; }
.meta dt { opacity: .6; }
.meta .cfoot { position: absolute; left: 5cqw; right: 5cqw; bottom: 3.6cqw; border-top: 1px solid rgb(255 255 255 / .3); padding-top: 1.8cqw; font-size: 2.6cqw; opacity: .75; }

.swiss { background: #fff; display: flex; flex-direction: column; }
.swiss .plate { height: 52%; flex: none; }
.swiss .plate .bike { width: 70%; margin-top: 6cqw; }
.swiss .pill.solid { position: absolute; top: 3.4cqw; left: 3.4cqw; background: #000; color: var(--wall); border-color: #000; }
.swiss .head { margin: 3cqw 5cqw 0; font-size: 12cqw; font-weight: 900; line-height: 1; letter-spacing: -.035em; }
.swiss .nums { margin: 2cqw 5cqw 0; display: flex; gap: 6cqw; font-size: 2.6cqw; }
.swiss .nums span { display: grid; }
.swiss .nums b { font-size: 7cqw; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.swiss dl { margin: 2.6cqw 5cqw 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; font-size: 2.5cqw; line-height: 1.2; border-top: 1px solid #000; padding-top: 1.6cqw; }
.swiss dt { opacity: .6; }
.swiss dd { font-weight: 700; }
.swiss .cfoot { margin: auto 5cqw 3.4cqw; font-size: 2.5cqw; }
.swiss .cmark { width: 6cqw; height: 6cqw; }

/* ---- The city ---- */

.city { background: var(--pink); padding: clamp(72px, 11vw, 170px) var(--gutter); }
.city h2 { max-width: 10em; }
.city p { margin-top: 1.1em; max-width: 30em; }

/* ---- Invite ---- */

.invite {
  background: #000; color: #fff;
  padding: clamp(72px, 11vw, 170px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.big-mark { width: 100%; max-width: 340px; aspect-ratio: 1; height: auto; color: var(--yellow); }
.invite p { margin-top: 1.1em; max-width: 32em; color: rgb(255 255 255 / .78); }
.invite .ask { color: var(--yellow); font-weight: 800; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.15; letter-spacing: -.01em; }

.end {
  display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap;
  background: #000; color: rgb(255 255 255 / .6);
  padding: 0 var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
  font-size: 15px;
}
.end a { color: inherit; text-underline-offset: .2em; display: inline-block; padding: 10px 0; margin: -10px 0; }
.end a:hover { color: #fff; }

/* ---- Phone ---- */

@media (max-width: 760px) {
  .hero { padding-left: calc(var(--gutter) + 10px); padding-right: calc(var(--gutter) + 10px); }
  .wall { top: calc(var(--gutter) + 80px + env(safe-area-inset-top)); left: calc(var(--gutter) + 8px); font-size: min(23vw, 13.6svh); }
  .wall span { display: block; }
  .hero-bike { left: 50%; right: auto; translate: -50% 0; bottom: calc(var(--gutter) + 164px); width: min(100vw, 62svh); }
  .foot { grid-template-columns: 1fr auto; gap: 16px 12px; }
  .lede { grid-column: 1 / -1; font-size: 23px; }
  .canon { grid-row: 2; grid-column: 1; justify-self: start; text-align: left; font-size: 15px; line-height: 1.25; }
  .shutter { grid-row: 2; grid-column: 2; width: 68px; height: 68px; }
  .shutter i { width: 50px; height: 50px; }

  .js .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; }
  .js .steps { grid-column: 1; grid-row: 2; height: auto; min-height: 15.5em; margin: 20px 0 0; }
  .js .step { top: 0; bottom: auto; }
  .js .builds-bike { grid-column: 1; grid-row: 3; align-self: end; }
  .js .rail { grid-row: 4; }
  .rail button { font-size: 14px; }

  .parts, .invite { grid-template-columns: minmax(0, 1fr); }
  .big-mark { max-width: 180px; }

  .deck { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
  .card { width: 82%; }
  .card + .card { margin-top: -18%; }
  .card:nth-child(1) { justify-self: start; }
  .card:nth-child(2) { justify-self: end; }
  .card:nth-child(3) { justify-self: start; z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .flash { opacity: 0; }
}