/* sections.css — body slices below the hero: slice containers, animate cutouts,
 * and the HTML text overlays (countdown, itinerary, dress code, family, RSVP).
 * Geometry (left/top/width/height %, --fs/--lh cqw) is baked inline by build.cjs
 * from body/manifest.json + TEXT-SPEC.json; this file only styles.
 *
 * Stacking model: .body-art is the cq container (contain:layout => stacking context);
 * the .slice sections inside it deliberately do NOT create stacking contexts, so a
 * z-indexed cutout may overhang its slice's bottom edge and still paint above the
 * next slice's base (e.g. the last-section flower crossing the slice-3/4 boundary). */

.body-art {
  position: relative;
  container-type: inline-size; /* cqw = 1% of column width, same basis as the hero */
}

/* ---- slice containers ---------------------------------------------------- */
.slice {
  position: relative;
  width: 100%;
  line-height: 0; /* guard: no stray inline whitespace between stacked slices */
  /* background-color is baked inline (art's top-edge colour) so any subpixel
     seam at some DPRs shows art-coloured, not page-dark */
}
.slice .ly--base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* cutouts reuse .ly / .ly--cut from hero.css (absolute, pointer-events none) */

/* ---- text overlay wrapper ------------------------------------------------- */
.slice-text {
  position: absolute;
  inset: 0;
  z-index: 20; /* above the slice's cutouts */
  pointer-events: none;
  line-height: normal;
}

/* ---- text primitives ------------------------------------------------------ */
/* single centred line — engraved caps (Trajan -> Cinzel) */
.bline {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 400;
  font-size: var(--fs);
  line-height: 1;
  letter-spacing: 0.012em;
  white-space: nowrap;
  text-transform: uppercase;
}
.bline b {
  font-weight: 700;
}

/* centred multi-line block; .ln line boxes are --lh tall (baked from the PSD bbox) */
.bpara {
  position: absolute;
  transform: translateX(-50%);
  width: max-content;
  max-width: 98cqw;
  margin: 0;
  text-align: center;
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 400;
  font-size: var(--fs);
  letter-spacing: 0.012em;
  text-transform: uppercase;
}
.bpara .ln,
.ev-lines .ln {
  display: block;
  min-height: var(--lh);
  line-height: var(--lh);
  white-space: nowrap;
}
.bpara b,
.ev-lines b {
  font-weight: 700;
}
/* family-surname headers (TrajanPro-Bold 62.5px vs 58.33px body) */
.bpara .ln--head {
  font-weight: 700;
  font-size: 1.0715em;
}

/* serif paragraphs (Times New Roman -> Tinos), sentence case */
.bpara--serif {
  font-family: "Tinos", "Times New Roman", serif;
  text-transform: none;
  letter-spacing: 0;
}
.bpara--italic {
  font-style: italic;
}
.bpara--track {
  letter-spacing: 0.04em; /* PSD tracking 40 on the Udaipur weather note */
}

/* script section titles (Darleston -> Great Vibes) */
.btitle {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: var(--fs);
  line-height: 1;
  white-space: nowrap;
}

/* ---- countdown ------------------------------------------------------------ */
.cd-value {
  font-variant-numeric: lining-nums;
}
/* (values/labels are .bline elements; hooks: data-countdown / data-countdown-label) */

/* ---- itinerary event blocks ------------------------------------------------ */
.ev-name {
  position: absolute;
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: var(--fs);
  line-height: 1;
  white-space: nowrap;
}
.ev-lines {
  position: absolute;
  margin: 0;
  text-align: left;
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 400;
  font-size: var(--fs);
  letter-spacing: 0.012em;
  text-transform: uppercase;
}

/* ---- palette (sampled from TEXT-SPEC color_rgba) --------------------------- */
.c-ink   { color: #373738; } /* body ink (55,55,56) */
.c-slate { color: #2c2c3c; } /* countdown labels (44,44,60) */
.c-brown { color: #774e2d; } /* countdown title + values (119,78,45) */
.c-rust  { color: #814f1f; } /* Dress Code title, maps link (129,79,31) */
.c-cream { color: #f2efe0; } /* itinerary on green (242,239,224) */
.c-gold  { color: #8a7138; } /* Sharing the Joy + closing (138,113,56) */
.c-black { color: #000; }    /* family blessing block */

/* ---- interactive (maps + tel links) ---------------------------------------- */
/* links stay laid out exactly like the PSD text; the padding/negative-margin pair
   expands each hit box to >=44px without moving the glyphs */
.tap {
  pointer-events: auto;
  text-decoration: none;
  border-radius: 4px;
}
.tap:focus-visible {
  outline: 2px solid #5b3a16;
  outline-offset: 2px;
}
.maps-link {
  padding: 18px 12px;
  /* .bline is center-anchored — symmetric padding keeps the glyphs centred */
  /* color comes from its own c-rust class, not inherited (see .tel below) */
}
.tel {
  display: inline-block;
  padding: 16px 4px;
  margin: -16px -4px;
  /* .tel carries no colour class of its own — it inherits c-ink from the
     wrapping .bpara so the phone numbers read as body ink, not link-blue */
  color: inherit;
}