/* Size section, part 2: side-profile overlay (left) and the three differences stacked (right). */
.size-compare {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  margin-top: clamp(56px, 8vh, 104px);
}
.size-stage {
  position: relative;
  width: min(calc(56vh * var(--ratio, 1.5)), 100vw - 2 * var(--gutter) - 22em);
  aspect-ratio: var(--ratio, 1.5);
  margin: 0;
}
.size-drawing { width: 100%; height: 100%; overflow: visible; }
/* Opaque tints with R2 in front: the R1S tint left visible reads as the extra bulk. */
.size-silhouette {
  fill: color-mix(in oklab, var(--c) 13%, var(--field-spin));
  stroke: var(--c);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}
.size-ground { stroke: rgb(13 15 28 / 0.22); stroke-width: 1px; }
.size-alignment { stroke: rgb(13 15 28 / 0.4); stroke-width: 1px; stroke-dasharray: 4 5; }
.size-dimension { stroke: var(--c); stroke-width: 1.25px; fill: none; }
.size-axle { stroke: var(--c); stroke-width: 2px; }
.size-difference-band {
  fill: var(--r1s);
  fill-opacity: 0.07;
  stroke: var(--r1s);
  stroke-opacity: 0.5;
  stroke-width: 1px;
  stroke-dasharray: 3 4;
}
.size-labels { position: absolute; inset: 0; pointer-events: none; }
.size-label {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--c-ink, var(--ink-2));
  font-size: var(--t-label);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.size-label strong { font-weight: 800; }

.size-deltas { display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 30px); min-width: 15em; }
.size-deltas__head { margin: 0; color: var(--ink-2); font-size: var(--t-label); font-weight: 650; }
.size-deltas__head .v-r1s, .size-deltas__head .v-r2 { color: var(--c-ink); font-weight: 750; }
.size-delta__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
  color: var(--r2-ink);
  font-size: clamp(52px, 5.6vw, 96px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  transform-origin: left bottom;
}
.size-delta__unit { color: var(--ink-2); font-size: 0.28em; font-weight: 550; letter-spacing: -0.03em; }
.size-delta__label { margin-top: 4px; font-size: var(--t-label); font-weight: 650; color: var(--ink); }

@media (max-width: 1040px) {
  .size-label { font-size: 14px; }
  .size-deltas { min-width: 12em; }
}