/* ════════════════════════════════════════════════════════════════════
   CELL 5 — FOLLOW THE BUILDS · PRIMER BREATH (calm exhale)
   ALL selectors scoped under #cell-5 (no leak into siblings).
   Authority: picks.json cell:5 + WOW_CONTRACTS cell:5 + DESIGN.md.
   Palette from tokens.css ONLY:
     field  --marble-50 #E9E6E1 (Primer Gray, set by [data-bg=marble])
     text   --text-on-light #26221e / --text-on-light-muted #6b665f
     accent --accent #C2231B (Signal Red — thin signal only, never a field)
     plate  --ink-900 #222222 shop-floor charcoal window frames on the light field
   Radius 0 = machined edge everywhere. This is the CALM breath: no signature-
   level motion, ambient life only, every element alive at t0.
   ════════════════════════════════════════════════════════════════════ */

#cell-5 {
  position: relative;
  overflow: clip;                 /* contain the parallax nudge + tungsten wash */
  isolation: isolate;
  /* a touch more top air than the default so the breath reads as a breath.
     P3 row 17 — the BOTTOM padding is pulled in (the "450+ build videos" line
     used to float over a large empty marble band before the journal); the
     tighter bottom seats it into the gray journal breath below without a dead
     white gap, while the top air is kept. */
  padding-top: clamp(4.5rem, 3rem + 6vw, 8rem);
  padding-bottom: clamp(2.4rem, 1.7rem + 3vw, 4.2rem);
}

/* ---- AMBIENT DIM TUNGSTEN — the light softens here (breath felt). A warm
   glow ABOVE the primer field, upper-centre, faded to 0 before the plates so it
   never tints the honest thumbnails. Hooks the shared @keyframes tungsten-idle
   (base.css) via .tungsten-idle--dim, so it BREATHES at rest (alive at t0).

   DIM IS BAKED INTO THE GRADIENT, not left to the class's `opacity:.58`:
   the shared @keyframes tungsten-idle animates the layer's `opacity` track
   (.73→.95), and a running animation's opacity overrides the static
   `opacity:.58` on .tungsten-idle--dim — so the "dim" intent was being lost and
   the Primer breath glowed at full worklight strength. Fix (lane-safe, no
   base.css touch): carry the ~.58 softening in the gradient's own alpha stops so
   the Primer breath reads DIM regardless of the shared opacity keyframe, while
   the keyframe still moves it (the visible ambient breath). Compositor-cheap:
   opacity only. ---- */
#cell-5 .builds__tungsten {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;       /* on a LIGHT field, warm the primer subtly */
  background:
    radial-gradient(60% 46% at 50% 8%,
      rgba(214, 176, 120, 0.14) 0%,
      rgba(214, 176, 120, 0.06) 34%,
      rgba(214, 176, 120, 0.00) 62%);
}

/* keep real content above the wash */
#cell-5 .builds__head,
#cell-5 .builds__update,
#cell-5 .builds__grid,
#cell-5 .builds__foot { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════════
   SECTION HEAD
   ════════════════════════════════════════════════════════════════════ */
#cell-5 .builds__head {
  max-width: 62ch;
  margin-bottom: clamp(2.2rem, 1.4rem + 2.4vw, 3.5rem);
}
/* eyebrow — Plex Mono caps + steel hairline lead-in (DESIGN.md text system,
   matches cell-1's eyebrow so the register threads the site) */
#cell-5 .builds__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  color: var(--stone-500);        /* muted-on-light (matches [data-bg=marble] eyebrow) */
  margin-bottom: var(--space-s);
}
#cell-5 .builds__eyebrow-rule {
  display: inline-block;
  width: clamp(1.75rem, 4vw, 3rem);
  height: 1px;
  background: var(--support);     /* Polished Steel hairline */
  flex: none;
}
/* H2 — display caps, dark-on-primer. Section step, one job. */
#cell-5 .builds__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: 0.006em;
  color: #1c1916;                 /* deepest ink on the light field */
}
#cell-5 .builds__lede {
  margin-top: var(--space-m);
  max-width: 52ch;                /* Baymard 50–75ch readable measure */
  font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.16rem);
  line-height: 1.62;
  color: var(--stone-700);        /* body-on-light */
}

/* ════════════════════════════════════════════════════════════════════
   SHARED PLATE — a physical shop-window frame: charcoal steel plate on the
   primer field, 0px machined edge, a hard pressed-steel drop. Both the
   featured update card and the three grid cards are .build-plate.
   ════════════════════════════════════════════════════════════════════ */
#cell-5 .build-plate {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--ink-900);     /* Shop-Floor Charcoal window frame */
  border: 1px solid #cfcac2;      /* light steel hairline seats it on the primer */
  border-radius: var(--radius);   /* 0px */
  box-shadow: 0 3px 0 #c6c1b8, 0 20px 40px -30px rgba(28, 25, 22, 0.55);
  transition: transform 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out),
              border-color 140ms var(--ease-out);
}
/* plate-press hover — scale-not-shift, ≤150ms, hover-capable ONLY (T2.27/T2.30).
   presses INTO the primer field like the hero/nav plates. */
@media (hover: hover) {
  #cell-5 .build-plate:hover {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #c6c1b8, 0 14px 30px -26px rgba(28, 25, 22, 0.5);
    border-color: var(--accent);
  }
}
#cell-5 .build-plate:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- the thumbnail frame (16:9), holds the play control + scrim + badges ---- */
#cell-5 .build-plate__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-850);
}
#cell-5 .build-plate__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* THE ONE CONSISTENT GRADE (DESIGN.md): slight desat + warm lift so the
     auto-sourced YouTube thumbs sit inside the site's tungsten world, never
     faked to studio gloss. Shared look with cell-1's photo grade.
     scale(1.06) gives the ambient parallax headroom (JS nudges translateY). */
  filter: saturate(0.92) contrast(1.03) brightness(1.0) sepia(0.14) hue-rotate(-8deg);
  transform: scale(1.06);
  will-change: transform;
}
/* SHOP-WINDOW WASH — the auto-sourced YouTube thumbs each carry their OWN
   baked-in title text (e.g. "Episode #2 / 1964 Corvette Stingray", "Video #4",
   a "GYR" watermark) and those overlays are INCONSISTENT card-to-card. Left
   raw, two text layers fight and the three cards read non-uniform (T2.24 every
   pixel intentional · T2.6 near-uniform-but-not-quite reads as error). So the
   frame carries a CONSISTENT darkening wash — a stamped-steel window has a
   darkened reflection — pushing the baked text back into the glass so it reads
   as honest shop footage while MY clean caption/badge does the naming. Uniform
   across all three by construction. Feathers to FULL transparent up top so the
   car still reads at the center (T2.19, no hard edge). */
#cell-5 .build-plate__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* stronger, taller bottom lift — swallows the baked bottom-strip captions */
    linear-gradient(to top,
      rgba(16,16,16,0.90) 0%,
      rgba(16,16,16,0.58) 20%,
      rgba(16,16,16,0.14) 44%,
      rgba(16,16,16,0.00) 66%),
    /* soft top lift — recedes the top-corner watermarks under the badge zone */
    linear-gradient(to bottom,
      rgba(16,16,16,0.42) 0%,
      rgba(16,16,16,0.08) 22%,
      rgba(16,16,16,0.00) 40%),
    /* an even overall tint so a bright thumb sits in the same luma band as a
       dark one (T2.9 exposure harmony in the grid) */
    rgba(16,16,16,0.14);
}
/* the featured update card is larger + has no caption bar under it — it needs
   only a light seat for the play control + kicker legibility, not the heavy
   naming wash the small cards use */
#cell-5 .builds__update .build-plate__scrim {
  background: linear-gradient(to top,
    rgba(16,16,16,0.42) 0%,
    rgba(16,16,16,0.12) 30%,
    rgba(16,16,16,0.00) 58%);
}

/* ---- RESTYLED PLAY CONTROL — stamped-steel plate + red signal ring.
   NOT the loud red YouTube rectangle the mockup rendered (flagged at judging).
   A circular machined button (the G003 "TAKE A TOUR" / "WATCH" language) with a
   slow ambient red-ring pulse so it is ALIVE AT t0. ---- */
#cell-5 .build-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(3.1rem, 4.4vw, 4.1rem);
  aspect-ratio: 1;
  border-radius: 50%;             /* the ONE round element — a real play button */
  /* brushed-steel plate face */
  background: radial-gradient(120% 120% at 34% 26%, #33322f 0%, #201f1d 62%, #17150f 100%);
  border: 1px solid rgba(233, 230, 225, 0.30);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6),
              inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
/* the red signal ring — a thin ring that scales+fades on its own clock
   (ambient, own-clock OK per WOW contract; alive at rest). Kept THIN at rest so
   it reads as a clean signal, not a heavy halo — the LIFE is the outward pulse,
   not a fat resting circle (T2.23 ornaments commit as a confident element, but
   a static thick ring frozen mid-page reads as weight, not intent). Never blur. */
#cell-5 .build-play__ring {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0.8;
  pointer-events: none;
  animation: build-ring-pulse 3.4s var(--ease-out) infinite;
  will-change: transform, opacity;
}
@keyframes build-ring-pulse {
  0%   { transform: scale(1);    opacity: 0.75; }
  62%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}
/* the play triangle — worn-white, seated a hair right of centre (optical) */
#cell-5 .build-play__tri {
  width: 0; height: 0;
  margin-left: 0.18em;
  border-style: solid;
  border-width: 0.52em 0 0.52em 0.86em;
  border-color: transparent transparent transparent var(--breath);
}
@media (hover: hover) {
  #cell-5 .build-plate:hover .build-play {
    transform: translate(-50%, -50%) scale(1.06);
    border-color: var(--accent);
  }
}
@media (prefers-reduced-motion: reduce) {
  #cell-5 .build-play__ring { animation: none; opacity: 0.7; }
}

/* ---- badges (Current build / Full series) — mono spec tag, top-left ---- */
#cell-5 .build-plate__badge {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);      /* red = a live/status signal (per DESIGN.md) */
  padding: 0.32em 0.6em;
  border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--terracotta-deep);
}
/* completed series = steel, not red (red is reserved for the live/current tell) */
#cell-5 .build-plate__badge--series {
  color: var(--breath);
  background: rgba(20,20,20,0.72);
  border: 1px solid rgba(233,230,225,0.28);
  box-shadow: none;
}

/* ---- grid-card caption bar — mono, on the charcoal plate below the thumb ---- */
#cell-5 .build-plate__caption {
  display: grid;
  gap: 0.28rem;
  padding: clamp(0.85rem, 1.3vw, 1.15rem) clamp(1rem, 1.5vw, 1.35rem);
}
#cell-5 .build-plate__caption-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--breath);
}
#cell-5 .build-plate__caption-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-400);        /* Polished Steel muted */
}

/* ════════════════════════════════════════════════════════════════════
   FEATURED MONTHLY-UPDATE CARD (the graft) — landscape: thumbnail left,
   work-order body right. On desktop the frame is the dominant weight; body is
   a charcoal panel flush beside it (one continuous steel plate).
   ════════════════════════════════════════════════════════════════════ */
#cell-5 .builds__update {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  margin-bottom: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
}
#cell-5 .builds__update .build-plate__frame {
  aspect-ratio: auto;             /* the body column sets the height; frame fills */
  height: 100%;
  min-height: clamp(15rem, 26vw, 22rem);
}
/* update body — a signed work-order panel */
#cell-5 .build-plate__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.55rem, 1vw, 0.9rem);
  padding: clamp(1.5rem, 2.4vw, 2.6rem);
  color: var(--breath);
}
#cell-5 .build-plate__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);           /* red signal kicker */
}
/* the live dot — a small steady red tell that the shop update is current;
   a gentle breath (own clock), never a distracting blink */
#cell-5 .build-plate__dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(194,35,27,0.5);
  animation: build-dot-breath 2.8s var(--ease-inout) infinite;
}
@keyframes build-dot-breath {
  0%,100% { box-shadow: 0 0 0 0 rgba(194,35,27,0.5); }
  50%     { box-shadow: 0 0 0 5px rgba(194,35,27,0); }
}
@media (prefers-reduced-motion: reduce) {
  #cell-5 .build-plate__dot { animation: none; }
}
#cell-5 .build-plate__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--breath);
}
#cell-5 .build-plate__desc {
  max-width: 40ch;
  font-size: clamp(0.96rem, 0.92rem + 0.2vw, 1.08rem);
  line-height: 1.6;
  color: var(--slate-300);        /* body-on-dark within the plate */
}
/* the red stamped "WATCH THE UPDATE" plate — a signal, appears as text-plate */
#cell-5 .build-plate__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  align-self: flex-start;
  margin-top: clamp(0.3rem, 0.8vw, 0.7rem);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 0.85em 1.35em;
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--terracotta-deep);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
#cell-5 .build-plate__cta-arrow { transition: transform 140ms var(--ease-out); }
@media (hover: hover) {
  #cell-5 .builds__update:hover .build-plate__cta {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--terracotta-deep);
  }
  #cell-5 .builds__update:hover .build-plate__cta-arrow { transform: translateX(3px); }
}

/* ════════════════════════════════════════════════════════════════════
   SHOP-WINDOW GRID — three plates, identical by default (T2.2 repeated units).
   ════════════════════════════════════════════════════════════════════ */
#cell-5 .builds__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.5rem);
}

/* ════════════════════════════════════════════════════════════════════
   CHANNEL FOOT LINE — the honest 450+ count + a stamped channel link.
   ════════════════════════════════════════════════════════════════════ */
#cell-5 .builds__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  margin-top: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
  padding-top: clamp(1.1rem, 1.6vw, 1.5rem);
  border-top: 1px solid #cfcac2;  /* light steel hairline on the primer */
}
#cell-5 .builds__foot-line {
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem);
  color: var(--stone-700);
}
#cell-5 .builds__foot-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35em;
  color: var(--accent);           /* one red signal number */
  letter-spacing: 0.01em;
}
#cell-5 .builds__channel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1c1916;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: gap 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
#cell-5 .builds__channel-arrow { transition: transform 140ms var(--ease-out); }
@media (hover: hover) {
  #cell-5 .builds__channel:hover { gap: 0.8em; color: var(--accent); border-color: var(--accent); }
  #cell-5 .builds__channel:hover .builds__channel-arrow { transform: translateX(3px); }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile is desktop RECOMPOSED, not squished (T2.31).
   ════════════════════════════════════════════════════════════════════ */

/* tablet: featured card stacks (thumb over body); grid stays 3-up until narrower */
@media (max-width: 900px) {
  #cell-5 .builds__update { grid-template-columns: 1fr; }
  #cell-5 .builds__update .build-plate__frame {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
}
/* small tablet / large phone: grid → 1 column so each shop-window is legible */
@media (max-width: 700px) {
  #cell-5 .builds__grid { grid-template-columns: 1fr; }
  #cell-5 .builds__foot { flex-direction: column; align-items: flex-start; }
}