/* Push for Gold: the draw sheet.
   A tournament draw on cool white bond, ruled in black ink. Two entrants, the left wheel and
   the right wheel, meet and advance as one chair, and every bracket on the page converges on
   one final: ordering the kit. Gold is a poster field that carries black ink (9.19:1); it is
   never used as text on the paper (1.91:1). Ratios below are computed, not estimated. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/big-shoulders-display-v24.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/archivo-v25.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: light;

  --paper: #f2f4f5;        /* cool bond, not cream */
  --ink: #0e0e0c;          /* 17.51:1 on paper */
  --ink-2: #45463f;        /* 8.65:1 on paper, 4.54:1 on gold (large text only) */
  --ink-3: #5a5b52;        /* 6.23:1 on paper */
  --on-gold-2: #2b2a22;    /* 6.85:1 on gold */
  --gold: #d4af37;         /* a field, never text on paper (1.91:1) */
  --on-ink-2: #c9cac2;     /* secondary text on ink, 11.7:1 */

  --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  --gutter: clamp(16px, 4vw, 48px);
  --page: 1280px;
  /* ch is Archivo's wide zero, so 54ch sets about 72 average characters. */
  --measure: 54ch;
  --tap: 44px;
  --header-h: 64px;

  /* The draw's rule weight. Each section steps it up until the final. */
  --rule-w: 1px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink) var(--paper); }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }

::selection { background: var(--gold); color: var(--ink); }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); z-index: 50; padding: var(--space-3) var(--space-4); background: var(--ink); color: var(--paper); }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

/* Type ------------------------------------------------------------------- */
.display, .h2, .h3, .brand, .slab, .price {
  font-family: var(--font-display);
  text-transform: uppercase;
}
.display { font-size: clamp(3rem, 7.4vw, 6rem); line-height: 0.86; font-weight: 900; letter-spacing: 0; }
.h2 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 0.9; font-weight: 800; text-wrap: balance; }
.h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1; font-weight: 800; letter-spacing: 0.01em; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.45; max-width: 46ch; }
.body { color: var(--ink-2); max-width: var(--measure); }
.small { font-size: 0.88rem; line-height: 1.5; color: var(--ink-3); }
.price { font-weight: 900; line-height: 0.9; font-size: clamp(3rem, 5vw, 4.25rem); }

/* The slab: the one action, always in black ink. ---------------------------- */
.slab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap);
  padding: 10px 22px 9px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.35rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.slab:hover { background: var(--gold); color: var(--ink); text-decoration: none; }
.slab:active { transform: translateY(1px); }
.slab-lg { font-size: clamp(1.6rem, 2.4vw, 2rem); padding: 16px 30px 14px; min-height: 64px; }
.on-gold .slab:hover { background: var(--paper); color: var(--ink); }

/* Header ----------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 2px solid var(--ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 1.75rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand:hover { text-decoration: none; }
.site-header .slab { font-size: 1.2rem; padding: 9px 18px 8px; }

.banner { border: 2px solid var(--ink); background: var(--gold); padding: var(--space-3) var(--space-4); font-size: 0.92rem; color: var(--ink); }

/* Bracket rules, drawn by script between anchors; fully drawn by default. --- */
/* Every bracket container is the box its rules are drawn in. */
[data-bracket]:not(.order-final) { position: relative; }
.bracket { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.bracket path { fill: none; stroke: var(--ink); stroke-width: var(--rule-w); stroke-linecap: square; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .bracket.is-drawing path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-rule 1100ms var(--ease-out) forwards; }
  .bracket.is-drawing path:nth-child(2) { animation-delay: 90ms; }
  .bracket.is-drawing path:nth-child(3) { animation-delay: 260ms; }
  .bracket.is-drawing path:nth-child(4) { animation-delay: 420ms; }
}
@keyframes draw-rule { to { stroke-dashoffset: 0; } }

/* A drawn sensor pinned to a photograph. The frame reproduces object-fit: cover
   so the pins stay on the spokes at every width. */
.photo-frame { --pin-size: 2.6%; }
.pair-photo { --pin-size: 5%; }
.pin { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--pin-size); aspect-ratio: 1; translate: -50% -50%; }
.pin svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pin-label {
  position: absolute; z-index: 3; top: var(--y);
  margin: 0; padding: 3px 8px 2px; white-space: nowrap;
  background: var(--paper); color: var(--ink); border-bottom: 2px solid var(--ink);
  font-size: 0.8rem; font-weight: 640; line-height: 1.3;
}
.pin-label-left { left: calc(var(--x) - var(--pin-size) / 2 - 0.8%); translate: -100% -50%; }
.pin-label-right { left: calc(var(--x) + var(--pin-size) / 2 + 0.8%); translate: 0 -50%; }

/* Opener ------------------------------------------------------------------ */
.opener {
  --rule-w: 3px;
  --stage-h: clamp(26rem, calc(100svh - var(--header-h) - 9rem), 54rem);
  --px: 0.5;
  --py: 0.12;
  container-type: inline-size;
  position: relative;
}
.opener-photo { position: relative; height: var(--stage-h); overflow: hidden; background: var(--ink); margin: 0; }
.photo-frame {
  position: absolute;
  width: max(100cqw, var(--stage-h) * 1.5);
  aspect-ratio: 6054 / 4036;
  left: calc((100cqw - max(100cqw, var(--stage-h) * 1.5)) * var(--px));
  top: calc((var(--stage-h) - max(100cqw, var(--stage-h) * 1.5) / 1.5) * var(--py));
}
.photo-frame > img { width: 100%; height: 100%; object-fit: cover; }

.opener-title { position: absolute; z-index: 4; right: max(var(--gutter), (100cqw - var(--page)) / 2 + var(--gutter)); top: clamp(2rem, 9%, 6rem); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.opener-title span { display: block; background: var(--gold); padding: 0.1em 0.16em 0.02em; }

.opener-strip { position: relative; z-index: 3; }
.opener-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-5); }
.opener-strip .lede { max-width: 50ch; }
.buy { display: flex; align-items: center; gap: var(--space-5); flex: none; }
.buy-price { display: grid; justify-items: end; gap: 2px; }
.buy-price .small { color: var(--ink-2); }
.stack-sm > * + * { margin-top: var(--space-2); }

/* Sections ---------------------------------------------------------------- */
.section { padding-block: var(--space-9) var(--space-8); border-top: var(--rule-w) solid var(--ink); }
.section-head { display: grid; gap: var(--space-4); max-width: 60rem; }
.section-head .body { font-size: 1.08rem; }

.entry { padding-bottom: 0.45em; border-bottom: var(--rule-w) solid var(--ink); }

/* Takeaways: the product, shown from real sessions. */
.takeaways { --rule-w: 1px; }
.shots { display: grid; gap: var(--space-6); margin-top: var(--space-8); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.05fr) minmax(0, 0.8fr); align-items: start; }
.shot { display: grid; gap: var(--space-4); }
.shot-lead { margin-top: calc(var(--space-8) * -0.5); }
.shot img { width: 100%; border: 2px solid var(--ink); background: #fff; }
.shot figcaption { display: grid; gap: var(--space-2); }
.shot figcaption .entry { font-weight: 650; }
.shot figcaption p { color: var(--ink-2); }
.shot blockquote { font-size: 1.02rem; line-height: 1.45; padding-left: var(--space-3); border-left: 1px solid var(--ink); }
.shot .provenance { font-size: 0.82rem; color: var(--ink-3); }
.note { max-width: var(--measure); margin-top: var(--space-7); padding-top: var(--space-3); border-top: 1px solid var(--ink); color: var(--ink-2); font-size: 0.92rem; }

/* Both wheels: the pair advances as one chair. */
.pair { --rule-w: 2px; }
.pair-photo { position: relative; margin: var(--space-7) 0 0; overflow: hidden; aspect-ratio: 1090 / 726; background: var(--ink); }
.pair-photo > img { width: 100%; height: 100%; object-fit: cover; }
.pair-draw { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-7); row-gap: var(--space-8); margin-top: var(--space-6); }
.pair-draw .entrant { display: grid; gap: var(--space-2); align-content: start; }
.pair-draw .entrant p { color: var(--ink-2); max-width: 34ch; }
.pair-draw .final-entry { grid-column: 1 / -1; justify-self: center; max-width: 34rem; display: grid; gap: var(--space-3); text-align: center; }
.pair-draw .final-entry p { color: var(--ink-2); }
.starter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-7); margin-top: var(--space-9); align-items: start; }
.starter .h3 { max-width: 16ch; }
.specs { display: grid; grid-template-columns: max-content 1fr; margin-top: var(--space-8); max-width: 60rem; }
.specs dt, .specs dd { padding: var(--space-3) 0; border-top: 1px solid var(--ink); }
.specs dt { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em; padding-right: var(--space-6); }
.specs dd { color: var(--ink-2); }

/* The people who built it. */
.people { --rule-w: 3px; }
.people-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.people-photo img { width: 100%; }
.people-photo figcaption { margin-top: var(--space-2); }
.people-copy { display: grid; gap: var(--space-5); align-content: center; }
.people-copy .body { font-size: 1.08rem; }
.cofounder { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-4); align-items: center; padding-top: var(--space-5); border-top: var(--rule-w) solid var(--ink); }
.cofounder img { width: 112px; height: 112px; object-fit: cover; }

/* The final: a gold field, the heaviest rule, one action. */
.final { --rule-w: 4px; background: var(--gold); border-top: var(--rule-w) solid var(--ink); padding-block: var(--space-9); }
.final .h2 { max-width: 14ch; }
.final .body, .final .small { color: var(--on-gold-2); }
.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-7); align-items: start; }
.kit-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-8); }
.kit-pair figure { display: grid; justify-items: center; gap: var(--space-3); }
.kit-pair svg.sensor-drawing { width: min(100%, 240px); height: auto; overflow: hidden; }
.kit-pair figcaption { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.03em; }
.kit-order { display: grid; justify-items: center; gap: var(--space-3); grid-column: 1 / -1; }
.includes { display: grid; }
.includes li { padding: var(--space-3) 0; border-top: 1px solid var(--ink); }
.includes li:last-child { border-bottom: 1px solid var(--ink); }
.steps { counter-reset: step; display: grid; margin-top: var(--space-6); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--ink); }
.steps li::before { content: counter(step); font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1.1; }
.steps strong { display: block; }
.final-small { display: grid; gap: var(--space-2); margin-top: var(--space-6); max-width: 46ch; }

/* Legal and order pages --------------------------------------------------- */
.page-head { padding-block: var(--space-8) var(--space-6); border-bottom: 3px solid var(--ink); }
.page-head h1 { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.page-head h1 span { background: var(--gold); padding: 0.1em 0.16em 0.02em; }
.page-head .lede { margin-top: var(--space-5); }
.page-body { padding-block: var(--space-7) var(--space-8); }
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-8); align-items: start; }
.order-main { grid-column: 1; grid-row: 1; max-width: 44rem; }
.order-main > * + * { margin-top: var(--space-7); }
.order-final { --rule-w: 3px; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.order-final .slab { font-size: clamp(1.15rem, 1.8vw, 1.6rem); }
.order-final .kit-order { justify-items: center; text-align: center; }
.order-final svg.sensor-drawing { width: min(100%, 170px); }
.order-final.kit-pair { padding-bottom: var(--space-7); row-gap: var(--space-7); }
.page-body > .wrap:not(.order-grid) > * + * { margin-top: var(--space-7); }
.kit-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-3); border-bottom: 3px solid var(--ink); }
.kit-line .h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.mail-cta { display: grid; gap: var(--space-3); justify-items: start; }

.wrap.prose { max-width: var(--page); }
.prose > * { max-width: var(--measure); }
.prose .display { margin-bottom: var(--space-4); }
.prose h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 1.6rem; line-height: 1; margin-top: var(--space-7); margin-bottom: var(--space-3); padding-bottom: 0.35em; border-bottom: 1px solid var(--ink); }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: var(--space-3); }
.prose ul { margin-top: var(--space-3); display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: square; }
.prose .banner { color: var(--ink); margin-block: var(--space-4); }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--ink); color: var(--paper); padding-block: var(--space-8); }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end; }
.site-footer .brand { color: var(--paper); }
.site-footer p { color: var(--on-ink-2); font-size: 0.92rem; margin-top: var(--space-3); max-width: 38ch; }
.site-footer a { color: var(--paper); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-footer nav a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 0.95rem; }
.site-footer :focus-visible { outline-color: var(--gold); }

/* The order bar: on phones, the action stays one tap away. */
.order-bar { display: none; }

/* Tablet ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shot-lead { grid-column: 1 / -1; grid-row: 1; margin-top: 0; max-width: 26rem; justify-self: center; }
  .people-grid, .final-grid, .starter { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .people-photo { max-width: 34rem; }
  .opener-strip .lede { font-size: 1.05rem; }
  .order-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .order-final { grid-column: 1; grid-row: 1; position: relative; top: auto; max-width: 30rem; }
  .order-main { grid-row: 2; }
  .photo-frame .pin-label { left: var(--x); top: calc(var(--y) - var(--pin-size) * 0.9); translate: -50% -100%; }
}

/* Phone ------------------------------------------------------------------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  body:has(> .order-bar) { padding-bottom: 76px; }
  :root { --header-h: 56px; }
  .site-header { position: static; }
  .brand { font-size: 1.45rem; }
  .brand svg { width: 24px; height: 24px; }
  .site-header .slab { font-size: 1.05rem; padding: 8px 14px 7px; }

  .opener { --stage-h: 76vw; --px: 0.41; --py: 0.36; }
  .opener-title { position: static; align-items: flex-start; padding: var(--space-3) var(--gutter) 0; font-size: clamp(2.1rem, 10vw, 3.4rem); gap: 5px; }
  .opener-strip .wrap { flex-direction: column; align-items: stretch; gap: var(--space-3); padding-block: var(--space-3) var(--space-5); }
  .opener-strip .stack-sm { display: contents; }
  .opener-strip .lede { font-size: 1rem; line-height: 1.45; }
  .opener-caption { order: 3; }
  .buy { order: 2; gap: var(--space-4); }
  .buy-price { justify-items: start; }
  .buy-price .price { font-size: 2.3rem; }
  .buy .slab { flex: 1; min-height: 52px; padding-block: 12px 10px; font-size: 1.5rem; }
  .photo-frame { --pin-size: 3.4%; }
  .pair-photo { --pin-size: 6.5%; }
  .pin-label { font-size: 0.72rem; left: var(--x); top: calc(var(--y) - var(--pin-size) * 0.9); translate: -50% -100%; }

  .section { padding-block: var(--space-8) var(--space-7); }
  .shots { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .shot { max-width: 24rem; justify-self: center; }
  .pair-draw { column-gap: var(--space-4); row-gap: var(--space-7); }
  .pair-draw .entrant .h3 { font-size: 1.3rem; }
  .pair-draw .entrant p { font-size: 0.92rem; }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .specs dt { padding-bottom: 0; }
  .specs dd { border-top: 0; padding-top: var(--space-1); }
  .kit-pair { gap: var(--space-4); }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); }
  .page-head { padding-block: var(--space-6) var(--space-5); }
  .page-head .lede { margin-top: var(--space-3); font-size: 1rem; }
  .page-body { padding-top: var(--space-5); }
  .order-final svg.sensor-drawing { width: 112px; }
  .order-final.kit-pair { row-gap: var(--space-5); padding-bottom: var(--space-4); }
  .order-final figcaption { font-size: 1.05rem; }

  .order-bar {
    display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 3px solid var(--ink);
    transition: translate 260ms var(--ease-out);
  }
  .order-bar .price { font-size: 2.1rem; }
  .order-bar .slab { flex: 1; max-width: 16rem; }
  .order-bar.is-hidden { translate: 0 110%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}