/* ============================================================
   Adelmann — "Measured Drawing"
   The page documents the object the way an instrument gets
   documented: annotated, dimensioned, square-cornered.
   Self-hosted fonts only (GDPR), no external requests.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Neutrals biased warm — anodised graphite, not blue-black */
  --ground: #1a1918;
  --ground-2: #1f1d1c;
  --surface: #232120;
  --rule: #35312e;
  --rule-soft: #292624;

  /* Type — warm drafting white */
  --paper: #f2efea;
  --paper-2: #a8a099; /* 6.6:1 */
  --paper-3: #8f8880; /* 4.8:1 on both grounds — floor for small text */

  /* Annotation layer — cool knurled steel, the drafting voice */
  --steel: #d8dee6;

  /* Brand, taken from the printed K007 package, not invented here:
     orange = Pantone 165 C. 6.7:1 on --ground, so it is safe for text.
     Spent sparingly — section indices, the buy button, the load vector. */
  --orange: #ff792b;
  --orange-dim: #c85c1d;
  --ink: #1f2022;
  --cream: #fbf4e9;

  --display: "Archivo", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --brand: "Montserrat", var(--display);

  --wrap: 1240px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* drafting grid — barely there, but the page never feels like a void */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
body > * {
  position: relative;
  z-index: 1;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
::selection {
  background: var(--steel);
  color: var(--ground);
}
:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 200;
  background: var(--surface);
  padding: 10px 16px;
  border: 1px solid var(--rule);
}

/* ---------- Typography ---------- */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%; /* slightly expanded — machined, not neutral */
  line-height: 1.02;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
h1 {
  /* "Unerschütterlich." cannot break, so its min-content width sets the
     hero copy column and squeezes the drawing. Capped so the product keeps
     its share of the row. */
  font-size: clamp(1.95rem, 5.7vw, 4.05rem);
  letter-spacing: -0.034em;
}
h2 {
  font-size: clamp(1.7rem, 3.9vw, 2.9rem);
}
h3 {
  font-size: 1.1rem;
  font-stretch: 100%;
  letter-spacing: -0.012em;
  line-height: 1.28;
}
p {
  margin: 0;
}

/* mono is the instrument's voice: labels, data, callouts */
.mono,
.eyebrow,
.stat-key,
.step-n,
.spec-list dt,
.spec-list dd,
.nav a,
.footer-col h4 {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  display: block;
  margin: 0 0 1.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-3);
}
.eyebrow .idx {
  color: var(--orange);
}

.lede {
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.62;
  color: var(--paper-2);
}

/* The real wordmark, the same artwork that is laser-engraved on the product.
   Painted through a mask so it inherits colour instead of shipping a bitmap
   per state, and so the light legal pages get an ink version for free. */
.wordmark {
  display: block;
  width: 152px;
  height: 19px;
  background: currentColor;
  color: var(--paper);
  -webkit-mask: url("media/wordmark.webp") no-repeat center / contain;
  mask: url("media/wordmark.webp") no-repeat center / contain;
  transition: color 0.25s var(--ease);
}
.wordmark span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
a.wordmark:hover {
  color: var(--orange);
}

/* ---------- Buttons — square, drawn, not pill ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  padding: 0.95rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--paper);
  border: 1px solid var(--paper);
  border-radius: 0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.btn:hover {
  background: var(--steel);
  border-color: var(--steel);
}
.btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}
.btn:hover svg {
  transform: translateX(4px);
}
/* the one loud element on the page — same orange as the box */
.btn-buy {
  color: var(--ink);
  background: var(--orange);
  border-color: var(--orange);
}
.btn-buy:hover {
  background: #ff8f4c;
  border-color: #ff8f4c;
}
.btn-ghost {
  color: var(--paper);
  background: transparent;
  border-color: var(--rule);
}
.btn-ghost:hover {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}
.btn-sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.74rem;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.site-header.is-stuck {
  background: rgba(26, 25, 24, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 70px;
}
.header-inner .wordmark {
  flex: none; /* never let the nav squeeze the logo */
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 2rem);
}
.nav a:not(.btn) {
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper-3);
  transition: color 0.25s var(--ease);
}
.nav a:not(.btn):hover {
  color: var(--paper);
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(6.5rem, 13vh, 9rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.hero h1 .thin {
  font-weight: 400;
  color: var(--paper-3);
}
.hero .lede {
  margin: 1.7rem 0 2.4rem;
}
.hero-cta {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* ---------- The annotated drawing ---------- */
.drawing {
  width: 100%;
  height: auto;
  max-height: min(88vh, 860px);
  overflow: visible;
}
.drawing .part {
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.6));
}
.drawing-plain {
  display: none;
}
.drawing .lead,
.drawing .rail,
.drawing .arc,
.drawing .force {
  fill: none;
  stroke: var(--steel);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.drawing .rail {
  stroke: #4a4542;
}
/* the load vector is the one thing on the drawing that is a claim,
   not a description — so it carries the brand colour */
.drawing .force {
  stroke: var(--orange);
}
.drawing .node {
  fill: var(--ground);
  stroke: var(--steel);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.drawing .tip {
  fill: var(--orange);
}
.drawing .force-t {
  fill: var(--orange);
}
.drawing text {
  font-family: var(--mono);
  font-size: 47px;
  font-weight: 500;
  letter-spacing: 0.08em;
  fill: var(--steel);
}
.drawing .sub {
  font-size: 36px;
  fill: var(--paper-3);
  letter-spacing: 0.04em;
}

/* plotted-in on load: pure CSS, so it runs with or without JS */
.drawing .lead,
.drawing .arc,
.drawing .force,
.drawing .rail {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: plot 0.85s var(--ease) forwards;
  animation-delay: var(--t, 0.4s);
}
.drawing .node,
.drawing .tip,
.drawing text {
  opacity: 0;
  animation: ink 0.5s var(--ease) forwards;
  animation-delay: calc(var(--t, 0.4s) + 0.45s);
}
@keyframes plot {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ink {
  to {
    opacity: 1;
  }
}

/* ---------- Measured facts strip ---------- */
.strip {
  border-block: 1px solid var(--rule);
  background: var(--ground-2);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.strip-cell {
  padding: 1.6rem clamp(1rem, 2vw, 1.8rem);
  border-left: 1px solid var(--rule);
}
/* outer cells flush to the page margin so the row reads as one drawn band */
.strip-cell:first-child {
  border-left: 0;
  padding-left: 0;
}
.strip-cell:last-child {
  padding-right: 0;
}
.stat-key {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 0.7rem;
}
.stat-val {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
}
.section-head {
  margin-bottom: clamp(2.5rem, 4.5vw, 3.8rem);
}
.section-head h2 {
  max-width: 19ch;
}
.section-head .lede {
  margin-top: 1.2rem;
}

/* ---------- Feature sheet — hairline cells, square ---------- */
.sheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.cell {
  padding: clamp(1.6rem, 2.4vw, 2.3rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  transition: background 0.35s var(--ease);
}
.cell:hover {
  background: var(--surface);
}
.cell-id {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--paper-3);
  margin-bottom: 2.2rem;
}
.cell h3 {
  margin-bottom: 0.55rem;
}
.cell p {
  color: var(--paper-2);
  font-size: 0.95rem;
  line-height: 1.58;
}

/* ---------- Faltmechanik: scroll-scrubbed articulation ----------
   The track is tall; the pin holds the drawing still while the page
   scrolls past it, and JS maps that distance onto the joint angles.
   Without JS the mechanism simply stays in its open state. */
.fold-track {
  height: 230vh;
}
.fold-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 520px;
  display: grid;
  align-content: center;
  border-bottom: 1px solid var(--rule);
}
.fold-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.fold-copy h2 {
  max-width: 16ch;
}
.fold-copy .lede {
  margin-top: 1.2rem;
}

/* live readout — the measured half of the drawing */
.readout {
  display: flex;
  gap: clamp(1.8rem, 4vw, 3rem);
  margin: clamp(1.8rem, 3vw, 2.4rem) 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.readout dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 0.5rem;
}
.readout dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--steel);
}

/* rendered fold frames — stacked, one visible at a time.
   Without JS the first frame (fully open) stays on. */
.frames {
  position: relative;
  width: 100%;
  max-width: min(62vh, 540px);
  margin-inline: auto;
  aspect-ratio: 1;
}
.frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
}
.frames img.on {
  opacity: 1;
}

/* ---------- Joints: one still each, described ----------
   No controls. Each joint gets a rendered still and a sentence
   explaining what it is for. */
.joints {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.joint {
  margin: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  transition: background 0.35s var(--ease);
}
.joint:hover {
  background: var(--surface);
}
.joint img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  padding: clamp(0.8rem, 2vw, 1.4rem) clamp(0.8rem, 2vw, 1.4rem) 0;
}
.joint figcaption {
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
}
.joint-k {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}
.joint h3 {
  margin-bottom: 0.55rem;
}
.joint p {
  color: var(--paper-2);
  font-size: 0.95rem;
  line-height: 1.58;
}

/* ---------- Halt: the mount with a phone on it ---------- */
.hold-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.hold-fig {
  margin: 0;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem) 0;
  border: 1px solid var(--rule);
  background: radial-gradient(120% 90% at 50% 6%, #26241f, var(--ground) 70%);
}
.hold-fig img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}
.hold-fig figcaption {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-3);
}
/* the two load figures are different things and are labelled as such */
.load {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.load-cell .stat-val {
  margin-bottom: 0.7rem;
}
.load-cell p {
  max-width: 40ch;
  color: var(--paper-2);
  font-size: 0.94rem;
  line-height: 1.58;
}

/* ---------- Packaging ---------- */
.pack {
  border-top: 1px solid var(--rule);
  background: var(--ground-2);
}
.pack-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.pack-media {
  border: 1px solid var(--rule);
  background: var(--ground);
}
.pack-media img {
  width: 100%;
  height: auto;
}
.pack-list {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.pack-list li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--paper-2);
  font-size: 0.95rem;
}
.pack-list li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--orange);
  transform: translateY(-0.35em);
}

/* ---------- Statement ---------- */
.statement {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-block: 1px solid var(--rule);
  background: var(--ground-2);
}
.figure-lede {
  max-width: 26ch;
  margin-top: clamp(0.6rem, 1.5vw, 1rem);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-stretch: 108%;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- Sequence (genuinely ordered, so numbered) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.step {
  padding-top: 1.4rem;
  border-top: 1px solid var(--steel);
}
.step-n {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--steel);
  margin-bottom: 1.1rem;
}
.step h3 {
  margin-bottom: 0.5rem;
}
.step p {
  color: var(--paper-2);
  font-size: 0.95rem;
}
.step em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.88em;
  letter-spacing: 0.06em;
  color: var(--steel);
}

/* ---------- Datasheet ---------- */
.data-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.plate {
  display: grid;
  place-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--rule);
  background: radial-gradient(120% 90% at 50% 0%, #26241f, var(--ground) 72%);
}
.plate img {
  width: auto;
  max-height: 460px;
}
.spec-list {
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  border-top: 1px solid var(--rule);
}
.spec-list > div {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec-list dt {
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-3);
}
/* leader dots, like a real parts list */
.spec-list .dots {
  flex: 1;
  height: 1px;
  min-width: 1.5rem;
  align-self: center;
  background-image: radial-gradient(circle, var(--rule) 1px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}
.spec-list dd {
  margin: 0;
  /* shrinkable: the material row is long, and between the 1000px and 880px
     breakpoints this column gets narrow enough to push the page sideways */
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--paper);
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 780px;
}
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item:first-child {
  border-top: 1px solid var(--rule);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 1.4rem 0;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: color 0.25s var(--ease);
}
.faq-q:hover {
  color: var(--steel);
}
.faq-icon {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}
.faq-icon::after {
  transform: rotate(90deg);
}
.faq-item.open .faq-icon::after {
  transform: rotate(0deg);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a > div {
  overflow: hidden;
}
.faq-a p {
  max-width: 62ch;
  padding-bottom: 1.5rem;
  color: var(--paper-2);
  font-size: 0.96rem;
}

/* ---------- Legal pages ---------- */
.legal {
  padding: clamp(7rem, 14vh, 9.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.legal-body {
  max-width: 68ch;
}
.legal h2 {
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}
.legal h3 {
  margin-top: 1.8rem;
}
.legal p,
.legal li {
  margin-top: 0.9rem;
  color: var(--paper-2);
  font-size: 0.98rem;
  line-height: 1.62;
}
.legal ul {
  margin: 0;
  padding-left: 1.1rem;
}
.legal a:not(.btn):not(.wordmark) {
  color: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.legal a:not(.btn):not(.wordmark):hover {
  border-bottom-color: var(--orange);
  color: var(--orange);
}
.legal address {
  margin-top: 0.9rem;
  font-style: normal;
  color: var(--paper);
  line-height: 1.7;
}
.legal .updated {
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-3);
}
/* unmistakable in a browser: these fields must be filled before launch */
.todo {
  display: inline-block;
  padding: 0.1em 0.5em;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ---------- CTA ---------- */
.cta {
  border-top: 1px solid var(--rule);
  background: var(--ground-2);
  padding: clamp(4.5rem, 9vw, 7rem) 0;
}
.cta-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.cta h2 {
  max-width: 15ch;
}
.cta-note {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-3);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: clamp(2.8rem, 5vw, 4rem) 0 1.8rem;
  font-size: 0.88rem;
  color: var(--paper-3);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.6rem;
}
.footer-brand p {
  margin-top: 0.9rem;
  max-width: 30ch;
  line-height: 1.55;
}
.footer-col h4 {
  margin: 0 0 1rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-3);
}
.footer-col a {
  display: block;
  padding: 0.3rem 0;
  color: var(--paper-2);
  transition: color 0.25s var(--ease);
}
.footer-col a:hover {
  color: var(--paper);
}
.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--paper-3);
}
.footer-legal p {
  margin: 0;
}

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .sheet {
    grid-template-columns: repeat(2, 1fr);
  }
  .strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .strip-cell:nth-child(3) {
    border-left: 0;
  }
  .strip-cell:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
}
@media (max-width: 880px) {
  body {
    font-size: 16px;
  }
  .hero {
    padding-top: 6rem;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    order: 1;
  }
  .stage {
    order: 2;
  }
  .drawing {
    max-height: 52vh;
  }
  .data-grid {
    grid-template-columns: 1fr;
  }
  .plate {
    order: -1;
  }
  .plate img {
    max-height: 320px;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .fold-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .fold-track {
    height: 200vh;
  }
  /* sized so copy + readout + drawing all fit inside the pinned viewport
     on a short phone (~660px) instead of spilling out of it */
  .mech {
    max-height: 32vh;
  }
  .fold-pin {
    min-height: 0;
  }
  .readout {
    margin-top: 1.3rem;
    padding-top: 1.1rem;
  }
  .fold-copy h2 {
    max-width: none;
  }
  .pack-grid,
  .load {
    grid-template-columns: 1fr;
  }
  .hold-fig img {
    max-height: 300px;
  }
  .pack-media {
    order: -1;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: span 2;
  }
}
@media (max-width: 700px) {
  .drawing {
    display: none;
  }
  .drawing-plain {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.62));
  }
}
@media (max-width: 620px) {
  .nav a:not(.btn) {
    display: none;
  }
  .sheet,
  .joints,
  .strip-grid {
    grid-template-columns: 1fr;
  }
  .strip-cell {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-inline: 0; /* stacked cells all align to the page margin */
  }
  .strip-cell:first-child {
    border-top: 0;
  }
  .cell-id {
    margin-bottom: 1.4rem;
  }
  .spec-list > div {
    flex-wrap: wrap;
  }
  .spec-list .dots {
    display: none;
  }
  .spec-list dd {
    text-align: left;
    flex: 1;
  }
  .btn {
    width: 100%;
  }
  .hero-cta {
    flex-direction: column;
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-brand {
    grid-column: span 1;
  }
}

@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;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .drawing .lead,
  .drawing .arc,
  .drawing .force,
  .drawing .rail {
    stroke-dashoffset: 0;
  }
  .drawing .node,
  .drawing .tip,
  .drawing text {
    opacity: 1;
  }
}