/* ============================================================
   CELL 7 · CHECK YOUR DATE — the close.
   "The end of a beautiful invitation, not a booking engine."
   Scoped entirely under #cell-7. Tokens only (raw hex only for
   documented tints derived from the brand family). Radius 16px.

   FIELD: this cell sits on the Meadow-Ink anchor (data-bg="ink",
   --ink-900 #33413A). CONTRAST is a named check — every color is
   sampled against that green field or against the light vellum cards
   that float on it:
     · warm-paper #F5EFE5 on green ............ 9.38:1  (headline/body) ✓
     · slate-300  #C6CFC8 on green ............ 6.72:1  (intro/muted)   ✓
     · slate-400  #A8B4AB on green ............ 5.00:1  (fine print)    ✓
     · clay-soft  #C68B71 on green ............ 3.75:1  (LARGE only >=24px/bold) ✓ large
     · clay       #A86147 on green ............ 2.28:1  → NEVER small text on green
     · meadow     #4E6257 on vellum #FBF7F1 ... 6.13:1  (FAQ question)  ✓
     · stone-700  #5A4A3D on vellum ........... 7.93:1  (FAQ / card body) ✓
     · clay       #A86147 on vellum ........... 4.41:1  (card label / '+')✓
     · warm-paper #FFF8F1 on clay CTA ......... 4.47:1  (CTA text)      ✓
   So: clay carries meaning ONLY inside the light cards or as a CTA
   FILL, never as small text on the green field.
   ============================================================ */

#cell-7 {
  /* dense document-like close; base.css paints the green field + on-dark text.
     A faint pressed-paper warmth + a soft clay wash in the far corner keep the
     anchor field ALIVE at rest without lifting off "light-led" (C1: green owns
     depth at the close only). Overlaid under content via a ::before layer. */
  overflow: clip;
  isolation: isolate;
}
#cell-7::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(245, 239, 229, 0.06), transparent 58%),
    radial-gradient(120% 90% at 100% 108%, rgba(168, 97, 71, 0.10), transparent 60%);
}
#cell-7 > .close { position: relative; z-index: 1; }

/* subtle brass top-seam so the green anchor reads as a deliberate close, not a
   hard color-block cut from cell-6 (marble) above it */
#cell-7 .close::before {
  content: "";
  position: absolute;
  top: calc(var(--section-pad-y) * -0.5);
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 139, 113, 0.34) 22%, rgba(198, 139, 113, 0.34) 78%, transparent);
  opacity: 0.7;
}

/* ═══════════════════ SECTION HEAD (on the green field) ═══════════════════ */
#cell-7 .close__head {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
}
#cell-7 .close__eyebrow {
  /* clay-soft on green = 3.75:1 — passes ONLY as LARGE text. Force the size up
     (>=1.05rem) + bold + tracked so it clears the large-text threshold. */
  color: var(--clay-soft);
  font-size: clamp(0.86rem, 0.8rem + 0.3vw, 1rem);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  margin-bottom: clamp(0.9rem, 0.6rem + 1vw, 1.25rem);
}
#cell-7 .close__title {
  color: var(--text-on-dark);          /* warm paper #F5EFE5 — 9.38:1 on green */
  font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
#cell-7 .close__title .em {
  color: var(--clay-soft);             /* large italic → clears 3:1; warm on green */
  font-style: italic;
}
#cell-7 .close__rule {
  display: block;
  width: clamp(3rem, 2rem + 4vw, 5rem);
  height: 1px;
  margin: clamp(1rem, 0.7rem + 1vw, 1.5rem) auto;
  background: linear-gradient(90deg, transparent, var(--clay-soft) 30%, var(--clay-soft) 70%, transparent);
  position: relative;
}
/* a small brass diamond centered on the rule (CSS glyph, not an SVG icon) */
#cell-7 .close__rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--clay-soft);
}
#cell-7 .close__intro {
  color: var(--slate-300);             /* #C6CFC8 — 6.72:1 on green */
  font-size: var(--step-1);
  line-height: 1.58;
  max-width: 38rem;
  margin-inline: auto;
}

/* ═══════════════════ THE TWO PANELS ═══════════════════ */
#cell-7 .close__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;   /* date card | FAQ (FAQ a touch wider) */
  gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
  align-items: start;
}

/* ─────────── LEFT · Private date-check card (light vellum on green) ─────────── */
#cell-7 .datecard {
  position: relative;
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem) clamp(1.5rem, 1rem + 1.6vw, 2.25rem)
           clamp(1.4rem, 1rem + 1.5vw, 2rem);
  background:
    linear-gradient(180deg, var(--paper-0) 0%, var(--paper-100) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  box-shadow:
    0 34px 70px -40px rgba(20, 30, 25, 0.72),
    0 8px 22px -16px rgba(20, 30, 25, 0.5);
  isolation: isolate;
}
/* wax-seal moment — a single brass-hairline ringed disc (C3: <=1 ornament,
   no illustrated SVG). CSS-drawn: a warm clay disc with a hairline ring. */
#cell-7 .datecard__seal {
  position: absolute;
  top: clamp(-0.9rem, -0.6rem - 0.6vw, -1.15rem);
  left: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 38% 32%, var(--clay-soft), var(--clay) 58%, var(--clay-deep) 100%);
  box-shadow:
    0 6px 16px -8px rgba(140, 79, 57, 0.6),
    0 0 0 4px var(--paper-0);
}
#cell-7 .datecard__seal::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 248, 241, 0.55);
}
#cell-7 .datecard__label {
  color: var(--clay);                  /* clay on vellum = 4.41:1 ✓ */
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-top: 0.65rem;
  margin-bottom: 0.55rem;
}
#cell-7 .datecard__lede {
  color: var(--meadow);                /* #4E6257 on vellum = 6.13:1 ✓ */
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
  line-height: 1.22;
  margin-bottom: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
}

/* ── The (deliberately unwired) form ── */
#cell-7 .datecard__form {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.55rem + 0.6vw, 1rem);
}
#cell-7 .datecard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 0.4rem + 0.6vw, 0.9rem);
}
#cell-7 .datecard__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
#cell-7 .datecard__field-label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stone-700);             /* #5A4A3D on vellum = 7.93:1 ✓ */
}
#cell-7 .datecard__opt {
  font-weight: 500;
  color: var(--stone-500);
  letter-spacing: 0.01em;
}
#cell-7 .datecard__input {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--stone-700);
  background: var(--paper-0);
  border: 1.5px solid var(--stone-200);
  border-radius: 12px;                  /* softer than the card, inside-radius rule */
  padding: 0.72em 0.9em;
  width: 100%;
  transition:
    border-color 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out),
    background 260ms var(--ease-out);
}
#cell-7 .datecard__input::placeholder { color: var(--stone-500); opacity: 0.85; }
/* clay focus glow (aliveness contract: CTA + input carry a warm clay ring) */
#cell-7 .datecard__input:focus-visible {
  outline: none;
  border-color: var(--clay);
  background: #fff;
  box-shadow: 0 0 0 3px var(--clay-tint), 0 0 0 1px var(--clay);
}
/* native date control: keep the calendar picker legible on the vellum */
#cell-7 .datecard__input[type="date"] { min-height: 2.9em; }
#cell-7 .datecard__input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
  filter: sepia(0.4) saturate(1.4) hue-rotate(330deg);   /* tint the picker warm */
}

/* CTA — single clay pill, warm-paper text (4.47:1) — reuses .btn--primary base */
#cell-7 .datecard__cta {
  width: 100%;
  margin-top: clamp(0.3rem, 0.1rem + 0.4vw, 0.55rem);
  padding: 1em 1.5em;
  font-size: var(--step-0);
  letter-spacing: 0.01em;
}
/* CSS-drawn calendar glyph on the CTA (mirrors cell-1's; no SVG icon) */
#cell-7 .datecard__cta-glyph {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  position: relative;
  opacity: 0.92;
}
#cell-7 .datecard__cta-glyph::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -0.28em;
  height: 0.32em;
  border-left: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
#cell-7 .datecard__cta-glyph::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  height: 1.5px;
  background: currentColor;
  opacity: 0.85;
}
#cell-7 .datecard__cta-arrow {
  font-size: 1.05em;
  line-height: 1;
  transform: translateX(0);
  transition: transform 320ms var(--ease-out);
}

#cell-7 .datecard__reassure {
  text-align: center;
  margin-top: 0.25rem;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  color: var(--stone-500);             /* #8B7E6D on vellum = 3.71:1 (fine print, ok AA) */
}

/* honest response-time note — a small brass-ruled line under the card */
#cell-7 .datecard__note {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-top: clamp(1rem, 0.75rem + 0.8vw, 1.35rem);
  padding-top: clamp(0.85rem, 0.6rem + 0.7vw, 1.1rem);
  border-top: 1px solid var(--stone-200);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--stone-700);             /* 7.93:1 on vellum ✓ */
}
/* tiny clay square marker (CSS glyph, no icon) */
#cell-7 .datecard__note-mark {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4em;
  border-radius: 2px;
  background: var(--clay);
  transform: rotate(45deg);
}

/* ─────────── RIGHT · FAQ accordion (vellum rows on green) ─────────── */
#cell-7 .faq { min-width: 0; }
#cell-7 .faq__eyebrow {
  color: var(--clay-soft);             /* large tracked → clears 3:1 on green */
  font-size: clamp(0.86rem, 0.8rem + 0.3vw, 1rem);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  margin-bottom: clamp(0.9rem, 0.6rem + 1vw, 1.35rem);
}
#cell-7 .faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 0.4rem + 0.5vw, 0.85rem);
}

/* each FAQ item = a light vellum row so clay/meadow/stone text reads (C-contrast) */
#cell-7 .faq-item {
  background: linear-gradient(180deg, var(--paper-0), var(--paper-100));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  box-shadow: 0 16px 34px -28px rgba(20, 30, 25, 0.55);
  overflow: hidden;                    /* clip the rolled answer cleanly */
  transition: box-shadow 340ms var(--ease-out), border-color 340ms var(--ease-out);
}
#cell-7 .faq-item[open] {
  border-color: var(--clay-soft);
  box-shadow: 0 22px 42px -26px rgba(20, 30, 25, 0.62);
}
#cell-7 .faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  cursor: pointer;
  list-style: none;                    /* kill the native disclosure triangle */
  padding: clamp(0.95rem, 0.7rem + 0.7vw, 1.3rem) clamp(1.1rem, 0.8rem + 0.9vw, 1.55rem);
  font-family: var(--font-display);    /* Mini-Serif question (tile head style) */
  font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.32rem);
  line-height: 1.22;
  color: var(--meadow);                /* #4E6257 on vellum = 6.13:1 ✓ */
  -webkit-user-select: none;
  user-select: none;
}
#cell-7 .faq-item__q::-webkit-details-marker { display: none; }
#cell-7 .faq-item__q:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: -3px;
  border-radius: var(--radius);
}

/* '+' → '×' marker (CSS glyph, no SVG): two clay bars, the vertical one hides on open */
#cell-7 .faq-item__mark {
  position: relative;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.12em;
}
#cell-7 .faq-item__mark::before,
#cell-7 .faq-item__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--clay);             /* clay on vellum = 4.41:1 (visible mark) */
  border-radius: 2px;
  transition: transform 340ms var(--ease-out), opacity 340ms var(--ease-out);
}
#cell-7 .faq-item__mark::before {     /* horizontal bar */
  width: 1.05rem;
  height: 2px;
  transform: translate(-50%, -50%);
}
#cell-7 .faq-item__mark::after {      /* vertical bar — collapses on open */
  width: 2px;
  height: 1.05rem;
  transform: translate(-50%, -50%);
}
#cell-7 .faq-item[open] .faq-item__mark::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

#cell-7 .faq-item__a {
  margin: 0 clamp(1.1rem, 0.8rem + 0.9vw, 1.55rem) clamp(1.05rem, 0.8rem + 0.7vw, 1.4rem);
  font-size: var(--step-0);
  line-height: 1.58;
  color: var(--stone-700);             /* #5A4A3D on vellum = 7.93:1 ✓ */
  max-width: 52ch;
}
/* No-JS / reduced-motion floor: native <details> shows the answer with a small
   top gap; the WAAPI roll (sections.js) overrides height/margin when JS runs. */
#cell-7 .faq-item:not([open]) .faq-item__a { /* hidden by native details */ }

/* ═══════════════════ CLOSE BREATH BAND ═══════════════════ */
#cell-7 .close__band {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-800);          /* raised dark surface within the green run */
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 64px -40px rgba(10, 18, 14, 0.8);
}
#cell-7 .close__band-media {
  position: relative;
  margin: 0;
  min-height: clamp(13rem, 10rem + 12vw, 18rem);
  isolation: isolate;
}
#cell-7 .close__band-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  filter: saturate(1.03) contrast(1.02) brightness(1.0);
}
/* warm scrim on the inner (note-side) edge so the seam into the dark note panel
   reads as one continuous close band */
#cell-7 .close__band-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 55%, rgba(69, 86, 76, 0.55) 100%),
    linear-gradient(0deg, rgba(51, 65, 58, 0.28), transparent 40%);
}
#cell-7 .close__band-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.7rem, 0.5rem + 0.6vw, 1rem);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  color: var(--text-on-dark);
}
#cell-7 .close__band-eyebrow {
  /* clay-soft on --ink-800 is only 2.73:1 (fails AA for this small tracked label),
     so the eyebrow uses --slate-300 (#C6CFC8 on ink-800 = 4.90:1 ✓). Clay-soft
     stays a LARGE-only accent on this cell (headline em / rule). */
  color: var(--slate-300);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}
#cell-7 .close__band-copy {
  font-size: var(--step-0);
  line-height: 1.56;
  color: var(--text-on-dark);          /* #F5EFE5 on ink-800 = 6.83:1 ✓ */
  max-width: 34ch;
}
#cell-7 .close__band-contact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
}
#cell-7 .close__band-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem);
  letter-spacing: 0.01em;
  color: var(--text-on-dark);          /* 6.83:1 on ink-800 ✓ */
  transition: color 240ms var(--ease-out);
  width: max-content;
}
/* CSS handset glyph (a rounded clay tick, not an SVG phone icon) */
#cell-7 .close__band-phone-mark {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--clay-soft);
  transform: rotate(45deg);
}
@media (hover: hover) {
  #cell-7 .close__band-phone:hover { color: var(--clay-soft); }
}
#cell-7 .close__band-place {
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  color: var(--slate-400);             /* #A8B4AB on ink-800 = 3.64:1 (fine print AA large; ok) */
}

/* scope line (C9 — words only, no wordmark restamp) */
#cell-7 .close__scope {
  text-align: center;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
  letter-spacing: 0.06em;
  color: var(--slate-300);             /* 6.72:1 on green ✓ */
}
#cell-7 .close__scope-soft {
  color: var(--slate-400);             /* 5.00:1 on green ✓ */
  font-style: italic;
}

/* ═══════════════════ MOTION (scoped) — aliveness contract ═══════════════════
   Hover = scale-not-shift, gated to hover:hover; states resolve on touch.
   Focus glow on the CTA. The FAQ roll itself is owned by sections.js (WAAPI). */
@media (hover: hover) {
  #cell-7 .datecard__cta:hover .datecard__cta-arrow { transform: translateX(0.22em); }
  #cell-7 .faq-item:hover {
    border-color: var(--clay-soft);
    box-shadow: 0 22px 44px -28px rgba(20, 30, 25, 0.6);
  }
}
/* warm clay focus glow on the CTA — reads on the vellum card (aliveness contract).
   (base.css sets a --base gap ring; here we tune the gap to the vellum surface.) */
#cell-7 .datecard__cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--paper-0),
    0 0 0 6px var(--clay),
    0 12px 26px -14px rgba(140, 79, 57, 0.5);
}

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

/* Tablet: stack the two panels, card first (date-check leads), FAQ under it. */
@media (max-width: 940px) {
  #cell-7 .close__grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
}

/* Mobile: date input first (contract), full-width CTA, band stacks photo-over-note. */
@media (max-width: 760px) {
  #cell-7 .datecard__row { grid-template-columns: 1fr; }
  #cell-7 .close__band { grid-template-columns: 1fr; }
  #cell-7 .close__band-media { min-height: clamp(11rem, 40vw, 15rem); }
  #cell-7 .close__band-scrim {
    background: linear-gradient(0deg, rgba(69, 86, 76, 0.7) 0%, transparent 42%);
  }
  #cell-7 .faq-item__q { font-size: 1.1rem; }
}

@media (max-width: 420px) {
  #cell-7 .datecard { padding-inline: clamp(1.1rem, 0.8rem + 3vw, 1.5rem); }
  #cell-7 .close__title { font-size: clamp(2.1rem, 8vw, 2.7rem); }
}

/* reduced-motion / solo: nothing to freeze here (no ambient JS in this cell) —
   the FAQ + focus states already degrade via sections.js + base.css. Kept for
   parity/clarity: no transform drift lingers. */
@media (prefers-reduced-motion: reduce) {
  #cell-7 .faq-item,
  #cell-7 .datecard__cta-arrow,
  #cell-7 .faq-item__mark::before,
  #cell-7 .faq-item__mark::after { transition: none; }
}