/* ============================================================
   04 · Track record
   A light drafting sheet with an architectural massing model: one
   white building per launch, sized to its audience, growing in the
   order the launches happened as the list is read. The board stays
   in view (sticky) beside the list. Motion: js/record.js.
   ============================================================ */

.record {
  --paper: #f3efe6;
  --paper-hi: #f8f5ee;
  --paper-lo: #e9e3d5;
  --ink: #141c1a;
  --ink-80: rgba(20, 28, 26, 0.8);
  --ink-64: rgba(20, 28, 26, 0.64);
  --ink-28: rgba(20, 28, 26, 0.28);
  --ink-14: rgba(20, 28, 26, 0.14);
  --ink-08: rgba(20, 28, 26, 0.075);
  --ink-04: rgba(20, 28, 26, 0.04);
  --rust: #7a5a24;
  --rust-line: rgba(138, 106, 48, 0.6);

  position: relative;
  z-index: 10;
  isolation: isolate;
  padding: clamp(6rem, 14vh, 10rem) var(--pad-x) clamp(5rem, 12vh, 8rem);
  color: var(--ink);
  background: radial-gradient(110% 70% at 28% 18%, var(--paper-hi) 0%, var(--paper) 55%, var(--paper-lo) 100%);
}
.record::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ink-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-08) 1px, transparent 1px),
    linear-gradient(var(--ink-04) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-04) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%);
}
.rec-inner {
  max-width: 1360px;
  margin: 0 auto;
}

/* ─── Head ─── */
.rec-head {
  max-width: 62rem;
  margin-bottom: clamp(3rem, 8vh, 5.5rem);
}
.record .section-title.rec-title {
  margin: 0 0 clamp(1.1rem, 2.6vh, 1.6rem);
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.record .section-title.rec-title em {
  color: var(--rust);
}
.rec-lede {
  max-width: 38rem;
  margin: 0;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.62;
  color: var(--ink-80);
}

/* ─── Body: the model board beside the list ─── */
.rec-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
.rec-stage-col {
  position: sticky;
  top: 11vh;
}
.rec-stage {
  position: relative;
  height: 76vh;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid var(--ink-14);
  border-radius: 16px;
  background:
    radial-gradient(90% 80% at 50% 45%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 70%),
    rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 60px -40px rgba(20, 28, 26, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.rec-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Metric tag that follows the active building */
.rec-tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.35s ease;
}
.rec-tag.is-on {
  opacity: 1;
}
.rt-lead {
  position: relative;
  width: 40px;
  height: 1px;
  background: var(--rust-line);
}
.rt-lead::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 4px rgba(138, 106, 48, 0.15);
}
.rt-txt {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem 0.4rem;
  border: 1px solid var(--ink-14);
  border-radius: 8px;
  background: rgba(248, 245, 238, 0.9);
  box-shadow: 0 8px 20px -12px rgba(20, 28, 26, 0.4);
  white-space: nowrap;
}
.rt-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rt-unit {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-64);
}

.rec-legend {
  position: absolute;
  left: 1.1rem;
  bottom: 0.95rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-64);
}
.rl-bar {
  width: 8px;
  height: 20px;
  border: 1px solid var(--ink-28);
  border-radius: 1px;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, var(--ink-14) 4px 5px),
    #fbf9f4;
}

/* ─── The list ─── */
.rec-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rec-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 34vh;
  padding: clamp(1.5rem, 4vh, 2.4rem) 0 clamp(1.5rem, 4vh, 2.4rem) 1.6rem;
  border-top: 1px solid var(--ink-14);
  opacity: 0.4;
  transition: opacity 0.45s ease;
}
.rec-item:last-child {
  border-bottom: 1px solid var(--ink-14);
}
.rec-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(1.5rem, 4vh, 2.4rem);
  bottom: clamp(1.5rem, 4vh, 2.4rem);
  width: 2px;
  background: var(--rust);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.rec-item.is-active {
  opacity: 1;
}
.rec-item.is-active::before {
  transform: scaleY(1);
}
.ri-year {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}
.rec-name {
  margin: 0.55rem 0 0.7rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.3vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.ri-metric {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-64);
}
.ri-metric strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--ink);
}
.ri-desc {
  max-width: 42ch;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-80);
}
.rec-foot {
  max-width: 40rem;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink-80);
}

/* Without WebGL (or reduced motion) the list stands on its own */
.record.rec-no3d .rec-body {
  grid-template-columns: minmax(0, 1fr);
}
.record.rec-no3d .rec-stage-col {
  display: none;
}
.record.rec-no3d .rec-item,
.record.rec-static .rec-item {
  opacity: 1;
  min-height: 0;
}

/* ─── Tablet & phone: the board pins to the top, the list scrolls under ─── */
@media (max-width: 900px) {
  .rec-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .rec-stage-col {
    top: 4.75rem;
    z-index: 2;
    padding-bottom: 0.75rem;
    background: linear-gradient(180deg, var(--paper) 88%, rgba(243, 239, 230, 0));
  }
  .rec-stage {
    height: 42svh;
    min-height: 300px;
    border-radius: 12px;
  }
  .rec-item {
    min-height: 38svh;
  }
  .rt-num {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rec-item,
  .rec-item::before {
    transition: none;
  }
}