/* ============================================================
   CELL 5 · The Room and the Regulars (PROOF) · #cell-5
   The page's ONE deeper seam. The espresso field + cream text come
   from base.css [data-bg="espresso"]; here we compose the room-proof
   layout and make the real, lower-res photos GLOW warmly on the dark.
   Room stays SECONDARY to the food lane (C2) — secondary sizing, no
   upscale-into-fake-detail. Cozy, lived-in — NOT luxury-moody.
   Density MEDIUM — fits ~1 viewport at 1440x900.
   ============================================================ */

#cell-5 {
  overflow: hidden;                 /* contain the ambient glows */
}

/* soft warm vignette so the dark seam feels lit, not moody-black */
#cell-5::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(255, 214, 168, 0.14), transparent 60%),
    radial-gradient(110% 90% at 10% 96%, rgba(76, 181, 200, 0.14), transparent 62%);
  z-index: 0;
}
.c5 { position: relative; z-index: 1; }

/* ---- the two-part stack: intro/lead top → proof row bottom ---- */
.c5__top {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

/* ---- LEFT: the pitch ---- */
.c5__intro { display: grid; gap: var(--space-s); align-content: center; }

/* Teal labels on the espresso seam: base.css flips .eyebrow → bright --accent
   (#4CB5C8), but bright teal on this dark-teal gradient only hits ~2.5–3.4:1 —
   FAILS AA for small uppercase labels (the kill-gate teal-on-dark trap). Brighten
   to a light teal that clears 4.5:1 against the WORST (bottom) end of the gradient
   (#b6ebf1 → 4.6:1 bot / 6.3:1 top). Still unmistakably teal, still Milo. */
.c5 .eyebrow,
.c5__list-head,
.c5__band-eyebrow { color: #b6ebf1; }
.c5__eyebrow.eyebrow--lined::before { background: #b6ebf1; opacity: 0.7; }

.c5__headline {
  font-size: var(--step-section);
  display: grid;
  gap: 0.05em;
}
.c5__headline-1 { color: var(--text-on-dark); }
.c5__headline-2 { display: block; }
/* .em on espresso is warm #ffd7bb via base.css — the on-dark signature */

.c5__lede { max-width: 44ch; color: var(--text-on-dark-muted); }

/* warm house note — a raised ticket card that reads warm on the dark seam */
.c5__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  max-width: max-content;
  margin-top: var(--space-2xs);
  padding: 0.9rem 1.25rem;
  /* override the paper ticket surface to a warm translucent card on dark */
  background:
    linear-gradient(135deg, rgba(255, 214, 168, 0.10), transparent 46%),
    rgba(255, 250, 241, 0.06);
  border-color: var(--hairline-strong);
}
.c5__note::before {
  /* re-tint the perforation dashes for the dark field */
  background-image: radial-gradient(circle, rgba(255, 250, 241, 0.34) 0 1px, transparent 1.5px);
}
.c5__note-icon { color: var(--support); flex: none; }
.c5__note-text {
  display: grid;
  gap: 0.1em;
  font-family: var(--font-display);
  line-height: 1.15;
}
.c5__note-l1 { font-size: 1.12rem; color: var(--text-on-dark); }
.c5__note-l2 { font-size: 1.12rem; }   /* .em → warm #ffd7bb */

/* ---- RIGHT: the lead interior room — the hero glow ---- */
.c5__lead { position: relative; margin: 0; }
.c5__lead-frame {
  aspect-ratio: 16 / 10;
  border-color: rgba(255, 250, 241, 0.16);
  background: #223b42;
  /* the warm glow that makes the real room photo lift off the dark seam */
  box-shadow:
    0 0 0 1px rgba(255, 250, 241, 0.06),
    0 26px 60px rgba(0, 0, 0, 0.34),
    0 0 60px rgba(255, 205, 150, 0.14);
}
.c5__lead-frame > img {
  /* warm daytime grade; NO upscale sharpening — keep the lower-res shot honest */
  filter: saturate(1.05) contrast(1.02) brightness(1.05);
}
/* pointer-driven warm glow — the "lit from within" touch (cell-5.js).
   Only paints once JS seats .c5-glow-ready (hover-capable, motion-on);
   defaults resting warm so a first frame is never dark. */
.c5__lead-frame.c5-glow-ready::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    38% 46% at var(--c5-gx, 72%) var(--c5-gy, 22%),
    rgba(255, 224, 178, 0.30), transparent 72%);
  transition: background 260ms var(--ease-out);
}
.c5__lead-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.8em;
  border-radius: 999px;
  background: rgba(31, 40, 44, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 250, 241, 0.18);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.c5__lead-tag-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(76, 181, 200, 0.7);
}

/* ---- star-divider seam between the rows ---- */
.c5__seam {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.9em;
  margin-block: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.c5__seam-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 241, 0.18), transparent);
}
.c5__seam .star-div { font-size: 1.05rem; }

/* ---- bottom proof row: exterior · list · food ---- */
.c5__proof {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  align-items: stretch;
}
.c5__exterior, .c5__food { margin: 0; }

/* shared frame treatment for the two secondary photos — glow, secondary scale */
.c5__exterior-frame, .c5__food-frame {
  height: 100%;
  min-height: 200px;
  border-color: rgba(255, 250, 241, 0.14);
  background: #223b42;
  box-shadow:
    0 0 0 1px rgba(255, 250, 241, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.30),
    0 0 44px rgba(255, 205, 150, 0.10);
}
.c5__exterior-frame > img { filter: saturate(1.04) contrast(1.02) brightness(1.05); }
.c5__food-frame > img { filter: saturate(1.06) contrast(1.03) brightness(1.04); }

/* the local-proof list — cream text, marigold/cream line-icons */
.c5__list {
  display: grid;
  align-content: center;
  gap: var(--space-s);
  padding: var(--space-2xs) 0;
}
.c5__list-head {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.c5__list-items { list-style: none; display: grid; gap: var(--space-s); }
.c5__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85em;
  padding-bottom: var(--space-s);
  border-bottom: 1px dashed rgba(255, 250, 241, 0.16);
}
.c5__item:last-child { border-bottom: 0; padding-bottom: 0; }
.c5__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  color: var(--support);
  background: rgba(201, 114, 59, 0.14);
  border: 1px solid rgba(201, 114, 59, 0.28);
}
.c5__item:nth-child(3) .c5__item-icon { color: #f0a06a; }  /* heart reads warmer */
.c5__item-text {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.32;
  color: var(--text-on-dark);
}

/* ---- foot band — varied close on the dark seam (C6: not the stamped band) ---- */
.c5__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 250, 241, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 214, 168, 0.08), transparent 44%),
    rgba(255, 250, 241, 0.05);
}
.c5__band-copy { display: grid; gap: 0.2em; }
.c5__band-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
/* stronger than the shared 0.72 muted — the band sits low on the gradient
   where 0.72 cream dips to ~3.8:1; 0.88 cream clears 4.5:1 there. */
.c5__band-line { color: rgba(255, 250, 241, 0.88); font-size: 0.98rem; }
.c5__band-btn { flex: none; }

/* ============================================================
   RESPONSIVE — mobile RECOMPOSED (DESIGN.md plan for cell 5:
   exterior first, then the room, then the local-proof chips).
   ============================================================ */
@media (max-width: 980px) {
  .c5__top { grid-template-columns: 1fr; gap: var(--space-l); }
  .c5__lead-frame { aspect-ratio: 16 / 10; }
  .c5__proof { grid-template-columns: 1fr 1fr; }
  /* order per DESIGN.md: exterior first, then room stays above, list, food */
  .c5__list { grid-column: 1 / -1; order: 3; }
  .c5__exterior { order: 1; }
  .c5__food { order: 2; }
}

@media (max-width: 640px) {
  /* single-column stack. Source order in .c5__top gives the reading order:
     head → lede → note → room photo. Then the proof grid re-orders to
     exterior → food → chips per DESIGN.md's cell-5 mobile plan. */
  .c5__top { display: block; }
  .c5__intro { gap: var(--space-xs); }
  .c5__lead { margin-top: var(--space-m); }
  .c5__lead-frame { aspect-ratio: 3 / 2; }
  .c5__note { max-width: 100%; }
  .c5__proof { grid-template-columns: 1fr; gap: var(--space-m); }
  .c5__exterior { order: 0; }        /* exterior first on smallest screens */
  .c5__food { order: 1; }
  .c5__list { order: 2; }
  .c5__exterior-frame, .c5__food-frame { aspect-ratio: 3 / 2; min-height: 0; }
  .c5__band { flex-direction: column; align-items: flex-start; }
  .c5__band-btn { width: 100%; }
}