/* ════════════════════════════════════════════════════════════════════
   CELL 7 — THE FAMILY & THE FARM · "NAMED FOR THE STREAM ON THE FAMILY FARM"
   ALL selectors scoped under #cell-7 (no leak into siblings).
   Authority: picks.json cell:7 ("G001 as-is — the family scene lands; real
   Seybold photos swap in per placement pass; 'When you're with us, you're
   family' verbatim") + WOW_CONTRACTS cell:7 (WARM DARK REGRIP) + DESIGN.md
   (§ section rhythm: "warm dark regrip for family/reviews").

   THE JOB (one per section): the emotional exhale. After cell 4's cold gauge
   precision and cells 5–6's Primer breath, cell 7 turns TENDER — the family,
   the apprenticeship, the origin of the name. Warm comes from PHOTO GRADE +
   TUNGSTEN WASH, never a warm bg field (base stays neutral #222222 — DESIGN.md).

   Palette from tokens.css ONLY: base #222222 · accent #C2231B Signal Red ·
   breath #E9E6E1 Primer Gray · support #B7BCC1 Polished Steel · ink-deep #141414.
   Radius 0 = machined edge (stamped-steel identity).
   ════════════════════════════════════════════════════════════════════ */

/* The section rides the shared dark canvas (data-bg="ink" #222222). It is the
   family REGRIP: same neutral field as its dark neighbours (seamless run,
   T2.20), but the warmest light of the whole page pools in here. */
#cell-7 {
  position: relative;
  overflow: clip;                       /* contain the ambient wash + parallax */
  isolation: isolate;
}

/* ---- SECTION-WIDE WARM WASH — the hearth, not a worklight (WOW contract:
   "tungsten swings WARMEST + slowest"). A large, low, warm radial pooled from
   the feature photo outward, breathing on the shared tungsten idle. Compositor-
   cheap (opacity only). Sits UNDER content, OVER the base — never on the honest
   photos themselves. This is what makes the section feel lit-from-within warm
   while the base field stays the neutral #222222. ---- */
#cell-7 .fam__hearth {
  position: absolute;
  inset: -10% -5% -20% -5%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  /* two pooled sources: a big low hearth on the left (under the feature photo)
     + a smaller warm lift on the right text panel so the whole width feels lit */
  /* R88c: the two big orange hearth pools KILLED (David: kill the orange —
     the wash got cut off at the viewport and "doesn't persist"). The tile-local
     ember glow below survives; section field stays honest ink. */
  display: none;
}

/* the layout wrapper */
#cell-7 .fam {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════
   MAIN ROW — feature family scene LEFT (≈3/5) · story panel RIGHT (≈2/5).
   Mirrors the locked board: a large full-bleed family photo beside a charcoal
   text column (eyebrow → headline → story → hearth-line pull-quote).
   ════════════════════════════════════════════════════════════════════ */
#cell-7 .fam__main {
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  gap: clamp(1.75rem, 3.5vw, 3.75rem);
  align-items: stretch;
}

/* ---- FEATURE FAMILY SCENE (the anchor — father + child, honest craft) ---- */
#cell-7 .fam__feature {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--ink-700);
  background: var(--ink-850);
  min-height: clamp(21rem, 38vw, 30rem);   /* density: the row is panel-bound anyway; a leaner feature keeps the cell near ~1vp */
  /* subtle machined-steel frame lip so the photo reads as a mounted shop print */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05),
              0 22px 48px -28px rgba(0,0,0,0.75);
}
#cell-7 .fam__feature .fam__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%;      /* hold the father+child on the pale car side */
}

/* THE ONE CONSISTENT GRADE (DESIGN.md photography treatment): slight desat +
   WARM LIFT — honest tungsten daylight, never faked studio gloss. Shared across
   every cell so the era-varied source photos read as one library. Cell 7 warms
   a HAIR further than the cold cells (this is the hearth) but stays honest. */
#cell-7 .fam__img {
  filter: saturate(0.9) contrast(1.04) brightness(1.02) sepia(0.18) hue-rotate(-9deg);
}
/* warm tint wash on the feature photo — pulls the cool shop light into the
   site's tungsten world (soft-light, compositor-cheap; over the photo, under
   the caption). Kept low so faces stay honest. */
#cell-7 .fam__feature::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(115deg,
    rgba(255, 168, 96, 0.16) 0%,
    rgba(255, 150, 82, 0.05) 46%,
    rgba(90, 70, 55, 0.00) 78%);
}
/* feature caption — a mono spec-plate lower-left, seats the photo (who/what) */
#cell-7 .fam__feature-cap {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--breath);
  background: linear-gradient(to top, rgba(15,15,15,0.9), rgba(15,15,15,0.62));
  border-top: 1px solid var(--ink-700);
  border-right: 1px solid var(--ink-700);
}
#cell-7 .fam__feature-cap::before {
  content: '';
  width: 1.6rem; height: 1px;
  background: var(--accent);            /* thin red service-stripe lead-in */
  flex: none;
}

/* ════════════════════════════════════════════════════════════════════
   STORY PANEL (right) — eyebrow · headline (STREAM red) · origin · hearth quote
   ════════════════════════════════════════════════════════════════════ */
#cell-7 .fam__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-s);          /* density: tighter internal rhythm (was --space-m) — the panel intrinsic height drives the main row */
  padding-block: var(--space-2xs);
}

/* eyebrow — Plex Mono caps + steel hairline lead-in (DESIGN.md text system) */
#cell-7 .fam__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--support);
}
#cell-7 .fam__eyebrow-rule {
  display: inline-block;
  width: clamp(2rem, 4vw, 3.25rem);
  height: 1px;
  background: var(--support);
  flex: none;
}

/* headline — H1A: display caps, Primer-white on dark, section step.
   "STREAM" is the ONE Signal Red word (H1A-red, the resurrection/origin word). */
#cell-7 .fam__headline {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.15rem, 4.4vw, 3.5rem);
  line-height: 0.94;
  letter-spacing: 0.004em;
  color: var(--breath);                 /* Primer Gray #E9E6E1 */
  text-wrap: balance;
}
#cell-7 .fam__headline .fam__accent {
  color: var(--accent);                 /* #C2231B — the one red word */
}

/* origin story — their voice, TRUTH-CORRECT (the stream/farm is in NE Maryland;
   Bradyville TN is where the shop runs now). Plex Sans, measured. */
#cell-7 .fam__story {
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
#cell-7 .fam__story p {
  font-size: var(--step-mini);
  line-height: 1.54;            /* density: still comfortable long-form measure, a touch tighter */
  color: var(--text-on-dark);
}
#cell-7 .fam__story strong {
  color: var(--breath);
  font-weight: 600;
}

/* hearth line — the pull-quote, display caps, steel hairlines top+bottom.
   "When you're with us, you're family." VERBATIM (keep-verbatim law). */
#cell-7 .fam__quote {
  margin-top: var(--space-2xs);
  padding-block: var(--space-s);
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
}
#cell-7 .fam__quote p {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.04;
  letter-spacing: 0.03em;
  color: var(--breath);
}
/* the warm hearth-glow the quote sits in breathes on the shared tungsten idle
   (a felt, ambient warmth — never an animated blur). Pre-rendered opacity. */
#cell-7 .fam__quote-glow {
  position: absolute;
  left: -6%; right: -6%;
  height: 130%;
  top: -15%;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(60% 100% at 22% 50%,
    rgba(255, 160, 88, 0.16) 0%,
    rgba(255, 150, 80, 0.05) 45%,
    rgba(0, 0, 0, 0) 74%);
}
#cell-7 .fam__quote { position: relative; }

/* ════════════════════════════════════════════════════════════════════
   APPRENTICESHIP ROW — the balanced family scroll (WOW #11: KEEP family-scroll
   balance). Three real 7-family seats (PLACEMENT.md): the next generation at
   work. Same-size tiles + aligned mono captions (no step-ladder, §4 #5).
   One tile (the grinding-sparks shot) carries a faint warm EMBER breath.
   ════════════════════════════════════════════════════════════════════ */
#cell-7 .fam__apprentice {
  /* welded tight to the main row so the whole cell reads as ONE family wall
     (one-job-per-section + ~1-viewport density, DESIGN.md) — not a main scene
     with a detached tile strip below it. */
  margin-top: clamp(1.1rem, 1.8vw, 1.75rem);   /* density: weld the apprentice row tighter to the main scene */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
#cell-7 .fam__tile {
  position: relative;
  display: flex;
  flex-direction: column;
}
#cell-7 .fam__tile-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;                 /* fixed AR forces identical tile shape; slightly shorter than 3/2 for density */
  border-radius: var(--radius);
  border: 1px solid var(--ink-700);
  background: var(--ink-850);
}
#cell-7 .fam__tile-frame .fam__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* warm tint wash on each tile (same soft-light family as the feature) */
#cell-7 .fam__tile-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(120deg,
    rgba(255, 164, 92, 0.13) 0%,
    rgba(255, 150, 80, 0.04) 50%,
    rgba(0, 0, 0, 0) 80%);
}
/* the ONE tile with live sparks gets a warm ember pool that breathes (tungsten
   idle) — a hair of hearth-glow bottom-left where the grinder throws sparks.
   Over the photo but low, so it reads as light in the room, not a filter. */
#cell-7 .fam__tile--ember .fam__ember {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(42% 46% at 30% 74%,
    rgba(255, 150, 66, 0.34) 0%,
    rgba(255, 120, 48, 0.14) 34%,
    rgba(255, 110, 40, 0.03) 56%,
    rgba(0, 0, 0, 0) 74%);
}
/* tile caption — mono, aligned baseline, steel-tinted (same register site-wide) */
#cell-7 .fam__tile-cap {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--slate-400);
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
#cell-7 .fam__tile-cap::before {
  content: '';
  width: 0.9rem; height: 1px;
  background: var(--support);
  flex: none;
  transform: translateY(-0.28em);        /* seat the hairline on the cap baseline */
}

/* ════════════════════════════════════════════════════════════════════
   AMBIENT PARALLAX — alive at t0 (WOW #9). The feature + tiles drift a few px
   on scroll (state-driven, TENDER — opposite of cell 3's cold precision). Only
   the presentation layer; content is fully painted at t0 regardless. Values are
   set by js/cells/cell-7.js via --fam-py (photos) with a null translate at rest.
   ════════════════════════════════════════════════════════════════════ */
#cell-7 .fam__img { will-change: transform; }
.cell7-ready #cell-7 .fam__feature .fam__img { transform: translate3d(0, var(--fam-py-a, 0), 0) scale(1.06); }
.cell7-ready #cell-7 .fam__tile-frame .fam__img { transform: translate3d(0, var(--fam-py-b, 0), 0) scale(1.10); } /* R90a-fix2: mobile snap-rail frame is short — 1.10 covers ±6px at 169px */

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

/* tablet: feature stacks above the story panel; panel reads full-measure */
@media (max-width: 900px) {
  #cell-7 .fam__main {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  #cell-7 .fam__feature { min-height: clamp(20rem, 60vw, 30rem); }
  #cell-7 .fam__panel { justify-content: flex-start; }
}

/* mobile: apprentice row becomes a horizontal snap-scroll (keeps the "scroll"
   balance without crushing three tiles narrow, T2.31). Content stays visible. */
@media (max-width: 620px) {
  #cell-7 .fam__headline { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  #cell-7 .fam__apprentice {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* bleed the rail edge-to-edge so it reads as a scrollable strip */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  #cell-7 .fam__apprentice::-webkit-scrollbar { display: none; }
  #cell-7 .fam__tile { scroll-snap-align: start; }
}

/* reduced-motion / solo: kill the parallax scale so the composed still is exact
   (the .cell7-ready class is never added, so this is belt-and-suspenders) */
@media (prefers-reduced-motion: reduce) {
  #cell-7 .fam__feature .fam__img,
  #cell-7 .fam__tile-frame .fam__img { transform: none; }
}