/* ============================================================
   CELL 6 · THE FAMILY BEHIND IT — LIKAZOO Wedding Barn
   Scoped entirely under #cell-6. Tokens only (documented paper/scrim/vellum
   tints derived from the brand family). Authority: G1 composition (family lead
   + signed pull-quote + 3-up review rail) + G4 "personal note" vellum block.
   Radius 16px · base #F5EFE5 (data-bg="marble") · alive at t0 · light-led (C1).
   ============================================================ */

#cell-6 {
  /* faint pressed-paper warmth over the Hearth-Paper base — a whisper-lifted
     breath so the family section reads as its own calm room within the run. */
  background:
    radial-gradient(115% 80% at 88% 4%, rgba(255, 255, 255, 0.5), transparent 58%),
    radial-gradient(120% 110% at 4% 100%, rgba(78, 98, 87, 0.045), transparent 55%),
    var(--marble-50);
  overflow: clip;
}

/* ═══════════════════ TOP LEAD: portrait (left) / voice (right) ═══════════════════ */
#cell-6 .fam__lead {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;   /* image slightly narrower than the voice */
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

/* ── Family / hosting lead image ── */
#cell-6 .fam__portrait { margin: 0; min-width: 0; }
#cell-6 .fam__portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;                     /* calm portrait crop of subject 69 */
  max-height: min(70vh, 40rem);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 64px -36px rgba(51, 65, 58, 0.44),
    0 3px 10px -6px rgba(51, 65, 58, 0.26);
}
#cell-6 .fam__portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;                /* hold the bride + party, keep the barn behind */
  /* bright-to-golden, whites held warm (DESIGN.md photography law) */
  filter: saturate(1.03) contrast(1.01) brightness(1.02);
  transform: scale(1.02);                  /* faint headroom, no motion needed */
}
/* barely-there warm light lift, at rest — alive at t0 without moving content */
#cell-6 .fam__portrait-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    52% 44% at 68% 26%,
    rgba(255, 244, 224, 0.30),
    rgba(255, 240, 214, 0.08) 46%,
    transparent 72%
  );
  mix-blend-mode: screen;
}
/* soft warm scrim at the base so the vellum caption reads over any photo */
#cell-6 .fam__portrait-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(51, 65, 58, 0.42) 0%,
    rgba(51, 65, 58, 0.12) 26%,
    transparent 52%
  );
}
/* vellum caption strip (bottom) — honest framing, NOT owner attribution */
#cell-6 .fam__portrait-tag {
  position: absolute;
  left: clamp(0.85rem, 0.4rem + 1.4vw, 1.5rem);
  right: clamp(0.85rem, 0.4rem + 1.4vw, 1.5rem);
  bottom: clamp(0.85rem, 0.4rem + 1.4vw, 1.5rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: clamp(0.75rem, 0.5rem + 0.8vw, 1.05rem) clamp(0.95rem, 0.6rem + 1vw, 1.3rem);
  background: rgba(251, 247, 241, 0.9);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px -16px rgba(51, 65, 58, 0.42);
}
#cell-6 .fam__portrait-tag-label {
  font-family: var(--font-display);        /* Mini-Serif A label (tile chip spec) */
  font-size: var(--step-mini);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--meadow);
}
#cell-6 .fam__portrait-tag-note {
  font-size: var(--step--1);               /* Mini-Sans caption */
  line-height: 1.4;
  /* Muted Meadow-Ink, NOT --stone-500: the warm-gray muted token measures
     3.46:1 on the paper tag strip (fails AA). --ink-700 is a genuine muted
     Meadow-Ink (a step softer than body ink) clearing AA (~5.5:1) while staying
     a whisper. (A11y verify — same trap cell-1 documented.) */
  color: var(--ink-700);
}

/* ═══════════════════ VOICE COLUMN (signed pull-quote) ═══════════════════ */
#cell-6 .fam__voice {
  min-width: 0;
  max-width: 40rem;
}
#cell-6 .fam__eyebrow {
  color: var(--clay);
  font-weight: 600;
  margin-bottom: clamp(0.85rem, 0.5rem + 1vw, 1.35rem);
}

#cell-6 .fam__headline {
  color: var(--meadow);                    /* Meadow-Ink display headline */
  font-size: var(--step-section);          /* the ONE "section" bucket */
  line-height: 1.04;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin-bottom: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
}
#cell-6 .fam__headline .em {
  color: var(--clay);
  font-style: italic;
  display: inline-block;
}

/* antique-brass hairline rule (CSS-drawn, no illustrated icon — C3) */
#cell-6 .fam__rule {
  display: block;
  width: clamp(3.5rem, 2rem + 6vw, 6rem);
  height: 1px;
  margin-bottom: clamp(1.1rem, 0.7rem + 1.2vw, 1.7rem);
  background: linear-gradient(
    90deg,
    var(--clay-soft) 0%,
    rgba(168, 97, 71, 0.32) 55%,
    transparent 100%
  );
}

/* ── the family blockquote ── */
#cell-6 .fam__quote {
  position: relative;
  margin: 0 0 clamp(1.4rem, 0.9rem + 1.6vw, 2.1rem);
  padding-left: clamp(1.6rem, 1rem + 1.4vw, 2.4rem);
}
#cell-6 .fam__quote-mark {
  position: absolute;
  left: -0.06em;
  top: -0.34em;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3vw, 4.6rem);
  line-height: 1;
  color: var(--clay-soft);
  opacity: 0.55;
  pointer-events: none;
}
#cell-6 .fam__quote-body {
  /* Review-quote-lead register (DESIGN.md): a small display serif for warmth,
     larger than body but calm — the human voice, not a heading. */
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 1.05rem + 0.9vw, 1.72rem);
  line-height: 1.42;
  color: var(--text-on-paper);             /* Meadow-Ink body-on-paper */
  text-wrap: pretty;
}
#cell-6 .fam__cite {
  margin-top: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#cell-6 .fam__sign {
  /* script-class signature feel via the display serif italic + clay + scale */
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem);
  line-height: 1.05;
  color: var(--clay);
  letter-spacing: 0.005em;
}
#cell-6 .fam__cite-role {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Meadow-Ink muted (--ink-700, ~5.5:1) not --stone-500 (3.46:1, fails AA on
     paper). This is 14px uppercase attribution = normal text, needs 4.5:1. */
  color: var(--ink-700);
}

/* ── G4 graft: "A personal note from our family" — sage vellum block ── */
#cell-6 .fam__note {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 0.5rem + 1vw, 1.25rem);
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem) clamp(1.25rem, 0.9rem + 1.2vw, 1.85rem);
  border-radius: var(--radius);
  /* Meadow-Ink-tinted vellum panel — the sage "personal note" card from G4,
     kept translucent so the paper warmth reads through (light-led, C1). */
  background:
    linear-gradient(180deg, rgba(78, 98, 87, 0.11), rgba(78, 98, 87, 0.07)),
    var(--paper-100);
  border: 1px solid rgba(78, 98, 87, 0.2);
  box-shadow: 0 12px 30px -22px rgba(51, 65, 58, 0.34);
}
/* CSS-drawn brass-hairline sprig (a leaf mark, geometric — NOT a representational
   illustrated icon; a stem + two hairline leaves drawn with borders). */
#cell-6 .fam__note-glyph {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.9rem;
  margin-top: 0.15rem;
}
#cell-6 .fam__note-glyph::before {
  /* the stem */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--clay-soft) 22%, var(--meadow));
  opacity: 0.8;
}
#cell-6 .fam__note-glyph::after {
  /* two hairline leaves off the stem (elliptical, brass-hairline outline) */
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 0.7rem;
  height: 0.4rem;
  transform: translate(-96%, -50%) rotate(-32deg);
  border: 1px solid var(--meadow);
  border-radius: 0 60% 0 60%;
  opacity: 0.62;
  box-shadow: 0.85rem 0.42rem 0 -0.5px var(--meadow);  /* the mirrored leaf, offset down-right */
}
#cell-6 .fam__note-label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meadow);
  margin-bottom: 0.4rem;
}
#cell-6 .fam__note-text {
  font-size: var(--step-0);
  line-height: 1.56;
  color: var(--text-on-paper);
}

/* ═══════════════════ REVIEWS: head + rail + foot ═══════════════════ */
#cell-6 .fam__reviews {
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}
#cell-6 .fam__reviews-head { margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
#cell-6 .fam__reviews-head .sec-head__title { color: var(--meadow); }

/* ── the ease-to-stop marquee rail (js/sections.js [data-reviews-marquee]) ── */
#cell-6 .fam__rail {
  /* Full-bleed rail: break out of the wrap so cards scroll edge-to-edge, with a
     soft Hearth-Paper fade at both ends (the marquee reads as endless, not cut). */
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 0.75rem;                   /* headroom for the hover lift/shadow */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  touch-action: pan-y;                      /* never trap vertical scroll on the rail */
}
#cell-6 .fam__rail-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
#cell-6 .fam__rail-col {
  display: flex;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  padding-inline: clamp(0.5rem, 0.3rem + 0.7vw, 0.875rem);
}
/* CSS keyframe fallback (no-JS / JS-off): a slow seamless scroll. sections.js
   adds .is-js to the marquee which turns this OFF and drives transform in rAF.
   Duplicated columns (JS) OR native scroll (reduced) keep it usable either way. */
@keyframes fam-rail-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
#cell-6 .fam__rail:not(.is-js) .fam__rail-track {
  animation: fam-rail-scroll 46s linear infinite;
}
#cell-6 .fam__rail.is-js .fam__rail-track { animation: none; }
/* reduced-motion / solo: sections.js adds .is-static -> static, native-scrollable */
#cell-6 .fam__rail.is-static { overflow-x: auto; }
#cell-6 .fam__rail.is-static .fam__rail-track { animation: none; }

/* ── review card (real named) ── clean, image-free, opacity-shadow hover (C-line) ── */
#cell-6 .fam__review {
  flex: 0 0 clamp(19rem, 24vw, 24rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 0.4rem + 0.6vw, 1rem);
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  background: var(--paper-0);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px -20px rgba(51, 65, 58, 0.3);
}
/* clay star row (glyph text, not an SVG icon) */
#cell-6 .fam__review-stars {
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--clay);
}
#cell-6 .fam__review-quote {
  /* Review-quote-lead register: small display serif, calm and warm. */
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.94rem + 0.35vw, 1.2rem);
  line-height: 1.44;
  color: var(--text-on-paper);
  text-wrap: pretty;
  flex: 1 1 auto;                           /* push the cite to a shared baseline (sibling parity) */
}
#cell-6 .fam__review-cite {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: clamp(0.5rem, 0.35rem + 0.4vw, 0.85rem);
  border-top: 1px solid var(--hairline-dark);
}
#cell-6 .fam__review-name {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--meadow);
}
#cell-6 .fam__review-src {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* Meadow-Ink muted (--ink-700, ~4.9:1 on the brighter card paper) not
     --stone-500 (3.96:1, fails AA). 14px uppercase source = normal text. */
  color: var(--ink-700);
}

#cell-6 .fam__reviews-foot {
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text-on-paper-muted);
  text-wrap: balance;
}

/* ═══════════════════ MOTION (scoped) ═══════════════════
   Hover = scale-not-shift on the portrait; the review-card opacity-shadow pop
   is owned by motion.css (.motion-ready .review-card — NO blur animation, per
   the C-line). Add only the portrait's gentle lift here, hover:hover gated. */
@media (hover: hover) {
  #cell-6 .fam__portrait-frame {
    transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
  }
  #cell-6 .fam__portrait:hover .fam__portrait-frame {
    transform: translate3d(0, -0.24rem, 0) scale(1.012);
    box-shadow:
      0 38px 72px -38px rgba(51, 65, 58, 0.5),
      0 4px 12px -6px rgba(51, 65, 58, 0.3);
  }
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* Tablet / narrow desktop: keep the split but let the portrait sit calmer. */
@media (max-width: 1080px) {
  #cell-6 .fam__lead {
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  }
  #cell-6 .fam__portrait-frame { max-height: min(60vh, 32rem); }
}

/* Mobile (DESIGN.md §92): the family quote becomes the LEAD element, the portrait
   follows, reviews reduce to a swipeable single-column-width run. */
@media (max-width: 760px) {
  #cell-6 .fam__lead {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 3vw, 2.25rem);
  }
  /* voice first, portrait second (quote-as-lead) */
  #cell-6 .fam__voice { order: 1; max-width: none; }
  #cell-6 .fam__portrait { order: 2; }
  #cell-6 .fam__headline { font-size: clamp(1.95rem, 7.4vw, 2.6rem); }
  #cell-6 .fam__portrait-frame { aspect-ratio: 4 / 5; max-height: 62vh; }
  /* reviews: cards a touch narrower, still a swipe rail; the fade stays */
  #cell-6 .fam__review { flex-basis: min(82vw, 20rem); }
}

@media (max-width: 420px) {
  #cell-6 .fam__note { flex-direction: column; gap: 0.65rem; }
  #cell-6 .fam__note-glyph { height: 1.4rem; }
}

/* reduced-motion / solo: no transforms depended on for content; portrait still. */
@media (prefers-reduced-motion: reduce) {
  #cell-6 .fam__portrait-img { transform: scale(1.01); }
}
.is-solo #cell-6 .fam__portrait-img,
.is-reduced-motion #cell-6 .fam__portrait-img { transform: scale(1.01); }