/* ═════════════════════════════════════════════════════════════════════════════
   together.css — what only the Together page needs. Loaded non-blocking after
   /v22/v22.css. Tokens are declared in together.html's critical <style>.
   ALL USER-FACING COPY IS DRAFT (Rule 5).
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── THE TWO SIDES AND THE SEAM ──────────────────────────────────────────────
      A three-column grid: couple | seam | supplier. ⚠ IT COLLAPSES STRAIGHT TO
      ONE COLUMN AT ≤900px AND THE SEAM GOES — `BRIEF_together_page_build.md` §6:
      "do not let it wrap 2+1, that breaks the symmetry the whole composition
      rests on". A `repeat(auto-fit,…)` here would do exactly that. ── */
.pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,34px)}
@media (max-width:900px){
  .pair{grid-template-columns:minmax(0,1fr)}
  .seam{display:none}
}
.side{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:9px;box-shadow:0 26px 54px -30px rgba(0,0,0,.4)}
.side--couple{background:var(--paper);border:1px solid var(--hair-ink-2)}
.side--supplier{background:var(--brand);border:1px solid var(--rule);box-shadow:0 26px 54px -30px rgba(0,0,0,.5)}
.side__l{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase}
.side--couple .side__l{color:var(--gold-text)}
.side--supplier .side__l{color:var(--gold)}
.side__n{font-family:var(--play);font-size:clamp(18px,2.2vw,23px);line-height:1.25}
.side--couple .side__n{color:var(--ink-head)}
.side--supplier .side__n{color:var(--gold)}
.side--supplier .row{border-bottom:1px dotted rgba(240,220,166,.28)}
.side--supplier .row__k{color:var(--on-brand-ivory)}
.side--supplier .row__v{color:var(--paper)}
.side--supplier .row__v--gold{color:var(--gold)}

/* ⚠⚠ THE TRAVELLING MESSAGE. `BRIEF_together_page_build.md` §3 is explicit: the
   reference animates `left` "for convenience — convert it to transform:
   translateX()", because only transform and opacity are compositor-only. The v2
   artefact still animates `left`/`right` in @keyframes railR/railL. Converted. */
.seam{container-type:inline-size;position:relative;width:clamp(60px,9vw,130px);height:2px;background:linear-gradient(90deg,rgba(138,109,47,.15),rgba(138,109,47,.6),rgba(138,109,47,.15))}
.seam i{position:absolute;top:-3.5px;left:0;width:9px;height:9px;border-radius:50%;will-change:transform,opacity}
.seam i:nth-child(1){background:var(--brand);animation:railR 4.4s cubic-bezier(.5,0,.5,1) infinite}
.seam i:nth-child(2){background:var(--rule);animation:railL 4.4s cubic-bezier(.5,0,.5,1) infinite;animation-delay:2.2s}
/* `cqw` is the seam's own inline size, so the dot travels its full length at any
   width without a second set of numbers per breakpoint. `.seam` declares the
   container below. */
@keyframes railR{
  0%{transform:translateX(0);opacity:0}
  10%{opacity:1}
  90%{transform:translateX(calc(100cqw - 9px));opacity:1}
  100%{transform:translateX(calc(100cqw - 9px));opacity:0}
}
@keyframes railL{
  0%{transform:translateX(calc(100cqw - 9px));opacity:0}
  10%{opacity:1}
  90%{transform:translateX(0);opacity:1}
  100%{transform:translateX(0);opacity:0}
}

/* ── THE PEAK-SEASON LEDGER PAIR ─────────────────────────────────────────────── */
.tally{border:1px solid var(--hair-gold-2);padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:12px}
.tally--do{border-color:var(--rule);background:var(--brand)}
.tally__l{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--on-green-gold)}
.tally--do .tally__l{color:var(--gold)}
.tally__row{display:flex;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px dotted var(--hair-gold-2)}
.tally__row:last-child{padding-bottom:0;border-bottom:0}
.tally--do .tally__row{border-bottom-color:rgba(240,220,166,.3)}
.tally__row span:first-child{font-size:13.5px;color:var(--on-green-ivory)}
.tally--do .tally__row span:first-child{color:var(--on-brand-ivory)}
.tally__row span:last-child{font-size:13px;color:var(--on-green-gold);flex:none}
.tally--do .tally__row span:last-child{color:var(--gold)}
.tally__row span[data-amber]{color:var(--amber-on-green)}
.tally__big{font-family:var(--play);font-size:15px;color:var(--amber-on-green)}
.tally--do .tally__big{color:var(--gold)}
@media (max-width:520px){
  .tally__row{flex-wrap:wrap;gap:2px}
  .tally__row span:last-child{width:100%}
}

/* ── THE LIVE-LOOP AND ECOSYSTEM SPLIT WINDOWS ───────────────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,2vw,18px)}
@media (max-width:900px){.duo{grid-template-columns:minmax(0,1fr)}}
.duo__ask{background:var(--paper);border:1px solid var(--hair-ink-2);padding:clamp(14px,2vw,20px);display:flex;flex-direction:column;gap:9px;box-shadow:0 26px 54px -30px rgba(0,0,0,.4)}
.duo__ans{background:var(--brand);border:1px solid var(--rule);padding:clamp(14px,2vw,20px);display:flex;flex-direction:column;gap:9px;box-shadow:0 26px 54px -30px rgba(0,0,0,.5)}
.duo__l{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase}
.duo__ask .duo__l{color:var(--ink-mute)}
.duo__ans .duo__l{color:var(--gold)}
.duo__q{font-size:14px;line-height:1.5;color:var(--ink-panel)}
.duo__ans .row{border-bottom:1px dotted rgba(240,220,166,.28)}
.duo__ans .row__k{color:var(--on-brand-ivory)}
.duo__ans .row__v{color:var(--paper)}
.duo__ans .row__v--gold{color:var(--gold)}

/* ── THE DAYS-BACK LEDGER TABLE ──────────────────────────────────────────────
      ⚠ THREE EXPLICIT TRACKS, AND THE LAST TWO ARE minmax(0,…). The artefact
      writes `1.6fr .8fr .8fr` — bare fr tracks holding text, which is trap 6:
      an auto min-content floor that will not shrink. At 390px "Table count and
      top-table dressing" is the row that overflows. ── */
.ledger{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hair-ink-2)}
.ledger__r{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.8fr);gap:10px;padding:13px clamp(14px,2vw,20px);border-bottom:1px dotted var(--hair-ink)}
.ledger__r--head{padding:12px clamp(14px,2vw,20px);background:var(--chrome);border-bottom:1px solid rgba(31,58,48,.14)}
.ledger__r--head span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.ledger__r--sum{padding:14px clamp(14px,2vw,20px);background:var(--band);border-top:1px solid var(--hair-ink);border-bottom:0}
.ledger__q{font-size:14px;color:var(--ink-panel);min-width:0}
.ledger__was{font-size:13.5px;color:var(--amber)}
.ledger__now{font-size:13.5px;color:var(--pos)}
.ledger__r--sum .ledger__q{color:var(--ink-head)}
.ledger__r--sum .ledger__was,.ledger__r--sum .ledger__now{font-family:var(--play);font-size:16px}
/* ⚠ at 390px three columns of prose do not fit. The question takes the full width
   and the two figures sit beneath it as a labelled pair, rather than the type
   dropping below the 12px floor. */
@media (max-width:560px){
  .ledger__r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 10px}
  .ledger__q{grid-column:1 / -1}
  .ledger__r--head{display:none}
  .ledger__was::before{content:'By email · ';color:var(--ink-mute)}
  .ledger__now::before{content:'On I Do · ';color:var(--ink-mute)}
}

/* ── THE TRIAD CARDS (days-back and privacy) ─────────────────────────────────── */
.note{background:var(--paper);border:1px solid var(--hair-ink-2);padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px}
.note__t{font-family:var(--play);font-size:clamp(17px,2vw,20px);color:var(--ink-head);line-height:1.25}
.note__d{font-size:13.5px;line-height:1.55;color:var(--ink)}
a.note,.note--go{background:var(--brand);border:1px solid var(--rule)}
a.note{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
a.note:hover{transform:translateY(-4px);box-shadow:0 26px 52px -28px rgba(0,0,0,.6)}
a.note .note__t,.note--go .note__t{color:var(--gold)}
a.note .note__d,.note--go .note__d{color:rgba(254,252,247,.9)}
a.note .note__go{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:6px}
a.note:hover .note__t,a.note:hover .note__go{color:var(--gold)}

/* ── THE PACK CHIPS ──────────────────────────────────────────────────────────── */
.pack{background:var(--panel);border:1px solid var(--hair-gold-2);padding:clamp(16px,2.2vw,24px);display:flex;flex-direction:column;gap:10px}
.pack .dark-row,.pack__row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid rgba(231,207,146,.14);min-width:0}
.pack__row b{font-size:14px;font-weight:300;color:var(--paper)}
.pack__row span{font-size:12.5px;color:var(--on-green-ivory);flex:none}
.pack__row span[data-pos]{color:var(--pos-on-green)}

/* ── THE PLANS PAIR ──────────────────────────────────────────────────────────── */
.plan{padding:clamp(22px,2.8vw,32px);display:flex;flex-direction:column;gap:11px}
.plan--couple{background:var(--panel);border:1px solid var(--hair-gold-2)}
.plan--supplier{background:var(--brand);border:1px solid var(--rule)}
.plan__l{font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
/* ⚠⚠ THE SUPPLIER PLAN PLACEHOLDER LIVES HERE AND NOWHERE ELSE ON THE SITE.
   Suppliers' two "Coming soon" rows are the COUPLE'S referral yields; these two
   are the plans themselves (A6). A future reveal is a copy change in ONE place
   per plan — this element. Leave the geography exactly as drawn. */
.price-tba{font-family:var(--play);font-size:clamp(19px,2.3vw,25px);letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
.plan--couple .price-tba{color:var(--paper)}
.plan--supplier .price-tba{color:var(--gold)}
.plan__d{font-size:14px;line-height:1.6}
.plan--couple .plan__d{color:var(--on-green-ivory)}
.plan--supplier .plan__d{color:var(--on-brand-ivory)}
.plan__row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid rgba(231,207,146,.16)}
.plan--supplier .plan__row{border-top-color:rgba(240,220,166,.24)}
.plan__row span:first-child{font-size:13.5px}
.plan--couple .plan__row span:first-child{color:var(--on-green-ivory)}
.plan--supplier .plan__row span:first-child{color:var(--on-brand-ivory)}
.plan__row span:last-child{font-size:13px;flex:none}
.plan--couple .plan__row span:last-child{color:var(--pos-on-green)}
.plan--supplier .plan__row span:last-child{color:var(--gold)}
.plan .btn{margin-top:auto}

/* ── THE CLOSING VOW LINE ────────────────────────────────────────────────────── */
.vow{font-family:var(--corm);font-style:italic;font-size:clamp(17px,2.2vw,23px);line-height:1.45;color:var(--pos);max-width:44ch}