/* Nicecard demo — "Golden Grove" (逆光园) invitation style. Everything is scoped under .nci--grove,
   .nci-cover--grove and .nci-float--grove so the other styles are untouched; new classes use the grv-
   prefix. The page is a size container, so every measurement is in cqw and the layout keeps its
   proportions in the 372px phone frame, the 390px editor canvas and a 390px phone.
   Light is the material: the ground is warm ivory lit from underneath by radial glows, the ink is a
   deep forest green, and one burnished gold carries every accent. Two golds are kept apart on purpose
   — --grv-gold is the ornament gold (rules, discs, arcs), --grv-gold-ink is the darker one small text
   is allowed to use, because the ornament gold does not clear 4.5:1 on ivory. */

.nci--grove,
.nci-cover--grove,
.nci-float--grove {
  --grv-paper: #fbf6ec;
  --grv-paper-2: #f4e9d6;
  --grv-kraft: #eaddc2;
  --grv-ink: #1f3a2e;
  --grv-ink-2: #4d6353;
  --grv-moss: #6f7f63;
  --grv-gold: #b98428;
  --grv-gold-ink: #8f6318;
  --grv-gold-lt: #e7c173;
  --grv-sage: #5e7052;
  --grv-dark: #1b2c22;
  --grv-glow: rgba(233, 178, 84, 0.4);
  --grv-g: 8.6cqw;
  --grv-disp: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --grv-sans: 'Quicksand', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
  --grv-hand: 'Caveat', 'Long Cang', 'Noto Serif SC', cursive;
}

.nci--grove {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--grv-paper);
  color: var(--grv-ink);
  font-family: var(--grv-sans);
  --nci-bg: var(--grv-paper);
  --nci-soft: #ece2cd;
  --nci-slot-line: rgba(143, 99, 24, 0.45);
  --nci-slot-ink: var(--grv-ink-2);
  --nci-hint: rgba(143, 99, 24, 0.5);
  --nci-sel: #8f6318;
}

/* The light in the page: four soft suns behind the whole document, so the ivory is never flat and the
   blocks appear to sit inside a glow rather than on top of a colour. Sections paint over it. */
.nci--grove::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58cqw 34cqw at 78% 13%, var(--grv-glow) 0%, transparent 70%),
    radial-gradient(64cqw 40cqw at 16% 34%, rgba(233, 178, 84, 0.3) 0%, transparent 72%),
    radial-gradient(70cqw 42cqw at 88% 58%, rgba(233, 178, 84, 0.28) 0%, transparent 70%),
    radial-gradient(60cqw 38cqw at 20% 82%, rgba(167, 186, 150, 0.3) 0%, transparent 70%);
}

/* flow-root keeps a section's first and last child margins inside it, so a text-first block still
   opens with air and a text-last one does not run into the photograph below it. */
.nci--grove .nci-section {
  display: flow-root;
  padding: 0;
}

.nci--grove .nci-s-story {
  padding: 5cqw 0 17cqw;
}

.nci--grove .nci-s-gallery {
  padding: 0 0 17cqw;
}

.nci--grove .nci-s-schedule {
  padding: 7cqw 0 15cqw;
}

.nci--grove .nci-s-countdown {
  padding: 5cqw 0 15cqw;
}

.nci--grove .nci-s-venue {
  padding: 5cqw 0 14cqw;
}

.nci--grove .nci-s-faq {
  padding: 3cqw 0 12cqw;
}

.nci--grove .nci-s-rsvp {
  padding: 5cqw 0 13cqw;
}

.nci--grove .nci-s-wishes {
  padding: 5cqw 0 0;
}

/* Light type over a photograph keeps a lighter edit hint. */
.nci--grove .grv-hero .nci-f--hint,
.nci--grove .grv-toast .nci-f--hint,
.nci--grove .grv-pol-band .nci-f--hint,
.nci--grove .grv-env-seal .nci-f--hint {
  border-bottom-color: rgba(255, 255, 255, 0.65);
}

/* Every drawn ornament is decoration: it never takes a tap away from the photo slot underneath. */
.nci--grove .grv-sun,
.nci--grove .grv-hero-scrim,
.nci--grove .grv-toast-scrim,
.nci--grove .grv-pol-scrim,
.nci--grove .grv-pol-print,
.nci--grove .grv-env-pocket,
.nci--grove .grv-env-clip,
.nci--grove .grv-disc-glow,
.nci--grove .grv-disc-ring,
.nci--grove .grv-open-glow,
.nci--grove .grv-guests,
.nci--grove .grv-path-line,
.nci--grove .grv-step-dot {
  pointer-events: none;
}

/* ───── The sun mark ───── */

.nci--grove .grv-sun,
.nci-cover--grove .grv-sun {
  display: block;
  overflow: visible;
  color: var(--grv-gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.nci--grove .grv-sun-disc,
.nci-cover--grove .grv-sun-disc {
  fill: currentColor;
  stroke: none;
}

.nci--grove .grv-sun--big {
  width: 13cqw;
  margin: 0 auto 5cqw;
}

.nci--grove .grv-sun--dot {
  width: 100%;
  height: 100%;
}

.nci--grove .grv-sun--done {
  width: 12cqw;
  margin: 0 auto 4cqw;
}

.nci--grove .grv-sun--coda {
  width: 8cqw;
  margin: 0 auto 3cqw;
  opacity: 0.85;
}

/* ───── Shared type ───── */

.nci--grove .grv-head {
  padding: 0 var(--grv-g);
  margin-bottom: 8cqw;
  text-align: center;
}

.nci--grove .grv-caps,
.nci-cover--grove .grv-cv-kicker {
  font-family: var(--grv-sans);
  font-size: 2.85cqw;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--grv-gold-ink);
}

.nci--grove .grv-title {
  margin-top: 3.2cqw;
  font-family: var(--grv-disp);
  font-size: 7.2cqw;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--grv-ink);
}

.nci--grove.nci--lang-zh .grv-title {
  font-size: 6.4cqw;
  letter-spacing: 0.08em;
}

.nci--grove .grv-verse {
  padding: 0 calc(var(--grv-g) + 2cqw);
  margin: 10cqw 0;
  font-family: var(--grv-disp);
  font-size: 4.7cqw;
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: var(--grv-ink);
  text-align: center;
}

.nci--grove.nci--lang-en .grv-verse {
  font-style: italic;
  letter-spacing: 0.01em;
}

.nci--grove.nci--lang-zh .grv-verse {
  font-size: 4.2cqw;
  letter-spacing: 0.14em;
}

.nci--grove .grv-verse--mid {
  margin: 9cqw 0 10cqw;
}

.nci--grove .grv-link {
  display: inline-block;
  font-family: var(--grv-sans);
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--grv-gold-ink);
  border-bottom: 1px solid rgba(185, 132, 40, 0.5);
  padding-bottom: 1cqw;
}

.nci--grove .grv-linkrow {
  margin-top: 9cqw;
  text-align: center;
}

/* ───── cover ─────
   4:5 rather than the photographs' own 3:4, so a portrait frame overhangs it a little and the crop
   tool has room to move the picture up or down without zooming first. The photo sits centred in that
   overhang (pos 50% in grove.js): the sample's faces stay well above the display line, and a couple's
   own upload, often taller than 3:4, loses no more off the top, where heads are, than off the bottom. */

.nci--grove .grv-hero {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--grv-dark);
}

.nci--grove .grv-hero-img {
  position: absolute;
  inset: 0;
}

/* The top ramp is the caps line's own ground and stops there. It used to run to 40%, far enough down
   to shade both faces; this frame puts them from about 0.18, so the wash is gone by 0.15. The bottom
   ramp is unchanged: it backs the display line across the gown, well below the chins. */
.nci--grove .grv-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 34, 26, 0.5) 0%, rgba(20, 34, 26, 0.14) 9%, transparent 15%),
    linear-gradient(
      0deg,
      rgba(20, 34, 26, 0.88) 0%,
      rgba(20, 34, 26, 0.76) 18%,
      rgba(20, 34, 26, 0.46) 34%,
      rgba(20, 34, 26, 0.12) 46%,
      transparent 54%
    );
}

/* Right inset clears the two corner marks, so the line centres in what is left rather than running
   under them on the first screen. When the words need two lines they are balanced, so no single word
   is left hanging on the second. */
.nci--grove .grv-hero-kicker {
  position: absolute;
  top: 7cqw;
  left: var(--grv-g);
  right: calc(var(--grv-g) + 21cqw);
  font-size: 2.7cqw;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.92);
}

.nci--grove .grv-hero-line {
  position: absolute;
  left: var(--grv-g);
  right: var(--grv-g);
  bottom: 9cqw;
  font-family: var(--grv-disp);
  font-size: 10.4cqw;
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 0.4cqw 2.4cqw rgba(16, 28, 21, 0.45);
}

.nci--grove.nci--lang-en .grv-hero-line {
  font-style: italic;
}

.nci--grove.nci--lang-zh .grv-hero-line {
  font-size: 9cqw;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.nci--grove .grv-open {
  position: relative;
  padding: 11cqw var(--grv-g) 15cqw;
  text-align: center;
}

.nci--grove .grv-open-glow {
  position: absolute;
  top: -10cqw;
  left: 50%;
  width: 90cqw;
  height: 62cqw;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(233, 178, 84, 0.42) 0%, transparent 76%);
}

.nci--grove .grv-names {
  position: relative;
  font-family: var(--grv-disp);
  font-size: 12cqw;
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: var(--grv-ink);
}

.nci--grove.nci--lang-zh .grv-names {
  font-size: 10cqw;
  letter-spacing: 0.16em;
}

.nci--grove .grv-amp {
  display: block;
  margin: 1.4cqw 0;
  font-family: var(--grv-disp);
  font-size: 4.4cqw;
  font-style: italic;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--grv-gold-ink);
}

.nci--grove .grv-when {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.4cqw;
  margin-top: 6cqw;
  font-size: 3.2cqw;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--grv-ink-2);
}

.nci--grove .grv-when em {
  width: 4.6cqw;
  height: 1px;
  background: var(--grv-gold);
  opacity: 0.7;
}

.nci--grove .grv-where {
  position: relative;
  margin-top: 3cqw;
  font-size: 3.1cqw;
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: var(--grv-ink-2);
}

.nci--grove .grv-lede {
  position: relative;
  margin: 7cqw auto 0;
  max-width: 68cqw;
  font-family: var(--grv-disp);
  font-size: 4.4cqw;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--grv-ink);
}

.nci--grove.nci--lang-en .grv-lede {
  font-style: italic;
}

/* ───── story: the envelope, the letter, the sun disc ───── */

.nci--grove .grv-env {
  padding: 0 calc(var(--grv-g) + 4cqw);
}

.nci--grove .grv-env-paper {
  position: relative;
  padding: 5cqw 5cqw 0;
  overflow: hidden;
  border-radius: 3cqw;
  background: linear-gradient(160deg, #f0e4cc 0%, var(--grv-kraft) 58%, #e2d2b2 100%);
  box-shadow: 0 2cqw 5cqw rgba(60, 48, 26, 0.14);
  transform: rotate(-1.1deg);
}

.nci--grove .grv-env-photo {
  aspect-ratio: 4 / 5;
  border-radius: 1.4cqw;
  margin-bottom: 23cqw;
}

/* The envelope's front pocket: the photograph is tucked behind its V-shaped edge, which is why the
   flap sits at the bottom of the card and never crosses anybody's face. */
.nci--grove .grv-env-pocket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 31cqw;
  background: linear-gradient(180deg, #6a7d5d 0%, var(--grv-sage) 100%);
  clip-path: polygon(0 0, 50% 26%, 100% 0, 100% 100%, 0 100%);
}

.nci--grove .grv-env-clip {
  position: absolute;
  right: 13cqw;
  bottom: 22cqw;
  width: 5.4cqw;
  color: var(--grv-gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  transform: rotate(14deg);
  filter: drop-shadow(0 0.4cqw 0.6cqw rgba(60, 48, 26, 0.25));
}

.nci--grove .grv-env-seal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7cqw;
  text-align: center;
  font-size: 2.8cqw;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 0 rgba(30, 44, 26, 0.35);
}

.nci--grove .grv-letter {
  padding: 0 calc(var(--grv-g) + 2cqw);
  margin: 12cqw 0 13cqw;
  font-size: 3.85cqw;
  line-height: 2.25;
  letter-spacing: 0.06em;
  color: var(--grv-ink-2);
  text-align: center;
}

.nci--grove.nci--lang-zh .grv-letter {
  letter-spacing: 0.12em;
}

.nci--grove .grv-disc {
  position: relative;
  width: 58cqw;
  margin: 0 auto;
}

.nci--grove .grv-disc-glow {
  position: absolute;
  inset: -22cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 178, 84, 0.5) 0%, rgba(233, 178, 84, 0.12) 58%, transparent 78%);
}

.nci--grove .grv-disc-ring {
  position: absolute;
  inset: -3.4cqw;
  border-radius: 50%;
  border: 1px solid rgba(185, 132, 40, 0.55);
}

.nci--grove .grv-disc-ring::after {
  content: '';
  position: absolute;
  inset: -3.4cqw;
  border-radius: 50%;
  border: 1px solid rgba(185, 132, 40, 0.24);
}

.nci--grove .grv-disc-img {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
}

.nci--grove .grv-disc-mark {
  margin-top: 6cqw;
  text-align: center;
  font-family: var(--grv-disp);
  font-size: 4cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--grv-gold-ink);
}

.nci--grove.nci--lang-en .grv-disc-mark {
  font-style: italic;
}

.nci--grove .grv-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7cqw;
  padding: 0 var(--grv-g);
  margin-top: 9cqw;
  text-align: center;
}

.nci--grove .grv-person-role {
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--grv-gold-ink);
}

.nci--grove .grv-person-name {
  margin-top: 2.6cqw;
  font-family: var(--grv-disp);
  font-size: 6cqw;
  line-height: 1.3;
  color: var(--grv-ink);
}

.nci--grove .grv-person-line {
  margin-top: 3cqw;
  font-size: 3.15cqw;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--grv-ink-2);
}

/* ───── gallery: three sizes and the handwriting ───── */

.nci--grove .grv-mosaic {
  position: relative;
  padding: 3cqw var(--grv-g) 0;
  margin-bottom: 13cqw;
}

.nci--grove .grv-m-tall {
  width: 54cqw;
  aspect-ratio: 3 / 4;
  border-radius: 6cqw;
}

.nci--grove .grv-m-round {
  position: absolute;
  left: 64cqw;
  bottom: -6cqw;
  width: 29cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 0.45cqw var(--grv-gold-lt);
}

/* The label reads along the foot of the mosaic, under the tall frame and clear of the round one. It
   was hanging in the top right corner of the block, which is the strip of the screen the two floating
   marks occupy — a label there is a label read from under a button. The paper here is the mosaic's own
   bottom margin, so the caps sit on ivory, never on a photograph. */
.nci--grove .grv-m-caps {
  position: absolute;
  top: auto;
  bottom: -7cqw;
  left: var(--grv-g);
  right: auto;
  width: 46cqw;
  text-align: left;
  font-size: 2.5cqw;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grv-gold-ink);
}

.nci--grove .grv-low {
  position: relative;
  padding: 0 var(--grv-g);
  margin-top: 12cqw;
}

.nci--grove .grv-low-img {
  aspect-ratio: 4 / 3;
  border-radius: 6cqw;
}

/* Device: the handwritten line crosses the photograph's lower corner and spills past its edge. */
.nci--grove .grv-hand {
  position: absolute;
  right: 4.5cqw;
  bottom: -5cqw;
  font-family: var(--grv-hand);
  font-size: 8.6cqw;
  line-height: 1.1;
  color: var(--grv-gold-ink);
  transform: rotate(-6deg);
  text-shadow: 0 0.3cqw 1.4cqw rgba(251, 246, 236, 0.9);
}

.nci--grove.nci--lang-zh .grv-hand {
  font-size: 7.6cqw;
  letter-spacing: 0.06em;
}

/* ───── schedule: the golden sun path ───── */

.nci--grove .grv-path {
  position: relative;
  margin: 0 var(--grv-g);
}

.nci--grove .grv-path-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 30cqw;
  fill: none;
  stroke: rgba(185, 132, 40, 0.6);
  stroke-width: 0.45;
  stroke-linecap: round;
}

.nci--grove .grv-step {
  position: relative;
  display: flex;
  align-items: center;
  height: 21cqw;
  padding-left: 30cqw;
}

.nci--grove .grv-step-dot {
  position: absolute;
  top: 50%;
  left: var(--grv-x);
  width: 2.8cqw;
  height: 2.8cqw;
  border-radius: 50%;
  background: var(--grv-gold);
  box-shadow: 0 0 0 1.6cqw rgba(233, 178, 84, 0.25);
  transform: translate(-50%, -50%);
}

.nci--grove .grv-step-dot--sun {
  width: 11cqw;
  height: 11cqw;
  background: none;
  box-shadow: none;
}

.nci--grove .grv-step-at {
  font-family: var(--grv-disp);
  font-size: 6.6cqw;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--grv-gold-ink);
}

.nci--grove .grv-step-t {
  margin-top: 1.6cqw;
  font-size: 3.4cqw;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--grv-ink);
}

.nci--grove .grv-foot {
  padding: 0 calc(var(--grv-g) + 2cqw);
  margin-top: 11cqw;
  text-align: center;
  font-size: 3.2cqw;
  line-height: 1.95;
  letter-spacing: 0.08em;
  color: var(--grv-ink-2);
}

/* ───── countdown: four dials and the calendar frame ───── */

.nci--grove .grv-dials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4cqw;
  padding: 0 var(--grv-g);
}

.nci--grove .grv-dial {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nci--grove .grv-dial svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
}

.nci--grove .grv-dial-track {
  stroke: rgba(185, 132, 40, 0.22);
  stroke-width: 2.4;
}

.nci--grove .grv-dial-arc {
  stroke: var(--grv-gold);
  stroke-width: 2.8;
}

.nci--grove .grv-dial-n {
  font-family: var(--grv-disp);
  font-size: 7cqw;
  font-weight: 400;
  line-height: 1;
  font-style: normal;
  color: var(--grv-ink);
}

.nci--grove .grv-dial-u {
  margin-top: 1.2cqw;
  font-family: var(--grv-sans);
  font-size: 2.4cqw;
  font-style: normal;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--grv-ink-2);
}

.nci--grove .grv-cd-done {
  text-align: center;
  font-family: var(--grv-disp);
  font-size: 6cqw;
  letter-spacing: 0.1em;
  color: var(--grv-gold-ink);
}

.nci--grove .grv-pol {
  padding: 3.4cqw 3.4cqw 0;
  margin: 0 var(--grv-g);
  border-radius: 3cqw;
  background: linear-gradient(170deg, #2a3d30 0%, var(--grv-dark) 100%);
  box-shadow: 0 2cqw 6cqw rgba(27, 44, 34, 0.24);
}

.nci--grove .grv-pol-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1.6cqw;
  background: var(--grv-dark);
}

.nci--grove .grv-pol-img {
  position: absolute;
  inset: 0;
}

.nci--grove .grv-pol-scrim {
  position: absolute;
  inset: 0;
  /* The lower stops carry the imprinted date: measured against the brightest decile of these backlit
     photographs, the gold numeral needs the ground under it below 0.16 luminance to hold the 3:1 a
     58px figure has to make, so the wash deepens where the type is and nowhere else. */
  background: linear-gradient(
    180deg,
    rgba(20, 34, 26, 0.16) 0%,
    rgba(20, 34, 26, 0.3) 40%,
    rgba(20, 34, 26, 0.7) 62%,
    rgba(20, 34, 26, 0.88) 82%,
    rgba(20, 34, 26, 0.94) 100%
  );
}

/* The wedding day imprinted across the lower edge of the frame, read out of dateISO: the month and the
   year in small caps in ivory (5.9:1 on the scrim below), the day large in the display face, in the pale
   gold — 3.5:1, which is the large-text threshold and the only place this gold is allowed to be type. */
.nci--grove .grv-pol-print {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 5.5%;
  display: flex;
  align-items: baseline;
  gap: 2.6cqw;
}

.nci--grove .grv-pol-mon,
.nci--grove .grv-pol-yr {
  font-family: var(--grv-sans);
  font-size: 2.8cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(16, 28, 21, 0.6);
}

.nci--grove .grv-pol-day {
  font-family: var(--grv-disp);
  font-size: 15cqw;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--grv-gold-lt);
  text-shadow: 0 1px 3px rgba(16, 28, 21, 0.55);
}

.nci--grove .grv-pol-band {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3cqw;
  padding: 3.4cqw 1.4cqw 4cqw;
}

.nci--grove .grv-pol-cap {
  font-size: 2.8cqw;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
}

.nci--grove .grv-dates {
  margin-top: 8cqw;
  text-align: center;
}

.nci--grove .grv-dateline {
  font-size: 3.2cqw;
  line-height: 2;
  letter-spacing: 0.18em;
  color: var(--grv-ink-2);
}

.nci--grove .grv-dateline span {
  color: var(--grv-ink);
}

.nci--grove .grv-dateline--sub {
  font-size: 2.9cqw;
  color: var(--grv-moss);
}

/* ───── venue ───── */

.nci--grove .grv-band {
  aspect-ratio: 16 / 10;
  margin: 0 var(--grv-g) 10cqw;
  border-radius: 6cqw;
}

.nci--grove .grv-place {
  padding: 0 var(--grv-g);
  text-align: center;
}

.nci--grove .grv-place-name {
  font-family: var(--grv-disp);
  font-size: 5.4cqw;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--grv-ink);
}

.nci--grove .grv-place-addr {
  margin-top: 2.4cqw;
  font-size: 3.1cqw;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--grv-ink-2);
}

.nci--grove .grv-mapwrap {
  margin-top: 6cqw;
  overflow: hidden;
  border-radius: 5cqw;
  box-shadow: 0 1.4cqw 4cqw rgba(60, 60, 26, 0.1);
}

.nci--grove .nci-map {
  height: 38cqw;
  background:
    radial-gradient(34cqw 22cqw at 72% 26%, rgba(233, 178, 84, 0.4) 0%, transparent 72%),
    radial-gradient(26cqw 18cqw at 18% 76%, rgba(111, 127, 99, 0.24) 0%, transparent 74%),
    #ece5d2;
}

.nci--grove .nci-map-road {
  top: 62%;
  height: 3.4cqw;
  border-top: 1px solid rgba(143, 99, 24, 0.18);
  border-bottom: 1px solid rgba(143, 99, 24, 0.18);
  background: repeating-linear-gradient(90deg, rgba(143, 99, 24, 0.14) 0 3cqw, transparent 3cqw 7cqw), rgba(255, 253, 246, 0.7);
}

.nci--grove .nci-map-pin {
  top: 53%;
  left: 47%;
  width: 4.4cqw;
  height: 4.4cqw;
  background: var(--grv-gold-ink);
  box-shadow: 0 0 0 1.8cqw rgba(185, 132, 40, 0.16);
}

.nci--grove .grv-maps {
  display: flex;
  justify-content: center;
  gap: 7cqw;
  margin-top: 6cqw;
}

.nci--grove .grv-note {
  padding: 0 calc(var(--grv-g) + 2cqw);
  margin-top: 9cqw;
  text-align: center;
  font-family: var(--grv-disp);
  font-size: 4.2cqw;
  line-height: 1.95;
  letter-spacing: 0.06em;
  color: var(--grv-ink);
}

.nci--grove.nci--lang-en .grv-note {
  font-style: italic;
}

.nci--grove .grv-travel {
  padding: 0 var(--grv-g);
  margin-top: 9cqw;
}

.nci--grove .grv-travel-row {
  padding: 4.4cqw 0;
  border-top: 1px solid rgba(185, 132, 40, 0.3);
}

.nci--grove .grv-travel-row:last-child {
  border-bottom: 1px solid rgba(185, 132, 40, 0.3);
}

.nci--grove .grv-travel-k {
  font-size: 2.7cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--grv-gold-ink);
}

.nci--grove .grv-travel-v {
  margin-top: 1.8cqw;
  font-size: 3.2cqw;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--grv-ink-2);
}

/* ───── faq ───── */

.nci--grove .grv-faq {
  padding: 0 var(--grv-g);
}

.nci--grove .grv-faq-item + .grv-faq-item {
  margin-top: 6cqw;
}

.nci--grove .grv-faq-q {
  font-family: var(--grv-disp);
  font-size: 4.4cqw;
  line-height: 1.5;
  color: var(--grv-ink);
}

.nci--grove .grv-faq-a {
  margin-top: 2cqw;
  font-size: 3.2cqw;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--grv-ink-2);
}

/* ───── rsvp ───── */

.nci--grove .grv-guestrow {
  padding: 0 var(--grv-g);
  margin-bottom: 8cqw;
  text-align: center;
}

.nci--grove .grv-guests {
  display: block;
  width: 78cqw;
  margin: 0 auto;
  color: rgba(185, 132, 40, 0.85);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nci--grove .grv-guests-cap {
  margin-top: 3.4cqw;
  font-size: 2.8cqw;
  letter-spacing: 0.2em;
  color: var(--grv-moss);
}

.nci--grove .grv-card {
  padding: 9cqw 7cqw 8cqw;
  margin: 0 var(--grv-g);
  border-radius: 7cqw;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.96) 0%, var(--grv-paper-2) 100%);
  box-shadow: 0 2cqw 6cqw rgba(90, 76, 40, 0.1);
}

.nci--grove .grv-field {
  margin-bottom: 6.5cqw;
}

.nci--grove .grv-field-l {
  display: block;
  font-size: 2.7cqw;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--grv-gold-ink);
}

.nci--grove .grv-field-i {
  width: 100%;
  margin-top: 2cqw;
  padding: 1.4cqw 0 2.4cqw;
  border: none;
  border-bottom: 1px solid rgba(111, 127, 99, 0.55);
  border-radius: 0;
  background: transparent;
  font-family: var(--grv-disp);
  font-size: 4.6cqw;
  color: var(--grv-ink);
  outline: none;
}

.nci--grove .grv-field-i:focus {
  border-bottom-color: var(--grv-gold);
}

.nci--grove .grv-field.is-bad .grv-field-i {
  border-bottom-color: #a4442c;
}

.nci--grove .grv-err {
  margin: -4cqw 0 5cqw;
  font-size: max(12px, 2.9cqw);
  letter-spacing: 0.08em;
  color: #a4442c;
}

.nci--grove .grv-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3cqw;
  margin-bottom: 7cqw;
}

.nci--grove .grv-pill {
  padding: 3.6cqw 2cqw;
  border: 1px solid rgba(111, 127, 99, 0.5);
  border-radius: 999px;
  background: transparent;
  font-family: var(--grv-sans);
  font-size: 3.1cqw;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--grv-ink-2);
  transition: background 140ms, color 140ms, border-color 140ms;
}

.nci--grove .grv-pill[aria-pressed='true'] {
  border-color: var(--grv-ink);
  background: var(--grv-ink);
  color: var(--grv-paper);
}

.nci--grove .grv-count,
.nci--grove .grv-diet {
  margin-bottom: 6.5cqw;
}

.nci--grove .grv-step-group {
  display: flex;
  align-items: center;
  gap: 4cqw;
  margin-top: 3cqw;
}

.nci--grove .grv-step-group button {
  width: 9cqw;
  height: 9cqw;
  padding: 0;
  border: 1px solid rgba(185, 132, 40, 0.6);
  border-radius: 50%;
  background: transparent;
  font-size: 4cqw;
  line-height: 1;
  color: var(--grv-gold-ink);
}

.nci--grove .grv-step-group button:disabled {
  opacity: 0.35;
}

/* The head count is set in the sans: the display face's figures are old-style, and a lone 1 in it
   reads as a small-caps I rather than a number. */
.nci--grove .grv-step-group span {
  min-width: 4cqw;
  text-align: center;
  font-family: var(--grv-sans);
  font-size: 4.4cqw;
  font-weight: 500;
  color: var(--grv-ink);
}

.nci--grove .grv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4cqw;
  margin-top: 3cqw;
}

.nci--grove .grv-tag {
  padding: 2.2cqw 4cqw;
  border: 1px solid rgba(111, 127, 99, 0.45);
  border-radius: 999px;
  background: transparent;
  font-family: var(--grv-sans);
  font-size: 2.9cqw;
  letter-spacing: 0.08em;
  color: var(--grv-ink-2);
}

.nci--grove .grv-tag[aria-pressed='true'] {
  border-color: var(--grv-gold);
  background: rgba(233, 178, 84, 0.3);
  color: var(--grv-gold-ink);
}

.nci--grove .grv-tag:disabled {
  opacity: 0.4;
}

.nci--grove .grv-submit {
  width: 100%;
  margin-top: 2cqw;
  padding: 4.6cqw 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(120deg, #c9922f 0%, var(--grv-gold-ink) 100%);
  font-family: var(--grv-sans);
  font-size: 3.3cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: #fffaf0;
  box-shadow: 0 1.4cqw 3.4cqw rgba(143, 99, 24, 0.28);
}

.nci--grove .grv-submit:disabled {
  opacity: 0.55;
  box-shadow: none;
}

.nci--grove .grv-done {
  padding: 10cqw 8cqw;
  margin: 0 var(--grv-g);
  border-radius: 7cqw;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.96) 0%, var(--grv-paper-2) 100%);
  text-align: center;
}

.nci--grove .grv-done-t {
  font-family: var(--grv-disp);
  font-size: 6cqw;
  line-height: 1.4;
  color: var(--grv-ink);
}

.nci--grove .grv-done-b {
  margin-top: 3cqw;
  font-size: 3.2cqw;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--grv-ink-2);
}

.nci--grove .grv-req {
  margin-left: 0.4em;
  color: #a4442c;
}

.nci--grove .grv-err--server {
  margin: 0 0 4cqw;
}

.nci--grove .grv-submit[aria-busy='true'],
.nci--grove .grv-wish-post[aria-busy='true'] {
  opacity: 0.7;
  cursor: progress;
}

.nci--grove .grv-done-when {
  margin-top: 2cqw;
  font-size: 2.7cqw;
  letter-spacing: 0.04em;
  color: var(--grv-ink-2);
}

.nci--grove .grv-done-edit {
  margin-top: 5cqw;
  padding: 0 0 1cqw;
  border: none;
  background: none;
  font-size: 2.9cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--grv-gold-ink);
  border-bottom: 1px solid rgba(185, 132, 40, 0.5);
}

/* ───── wishes and the closing photograph ───── */

.nci--grove .grv-wishform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3cqw;
  padding: 0 var(--grv-g);
}

.nci--grove .grv-wish-in {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  padding: 3.4cqw 4.4cqw;
  border: 1px solid rgba(111, 127, 99, 0.4);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.8);
  font-family: var(--grv-sans);
  font-size: 3.1cqw;
  letter-spacing: 0.06em;
  color: var(--grv-ink);
  outline: none;
}

.nci--grove .grv-wish-in::placeholder {
  color: rgba(77, 99, 83, 0.65);
}

.nci--grove .grv-wish-in:focus {
  border-color: var(--grv-gold);
}

.nci--grove .grv-wish-in--text {
  grid-column: 1 / -1;
  grid-row: 2;
}

.nci--grove .grv-wish-err {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
}

.nci--grove .grv-wish-post {
  grid-column: 2;
  grid-row: 1;
  padding: 0 6cqw;
  border: 1px solid var(--grv-ink);
  border-radius: 999px;
  background: var(--grv-ink);
  font-family: var(--grv-sans);
  font-size: 2.9cqw;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--grv-paper);
}

.nci--grove .grv-wish-post:disabled {
  opacity: 0.5;
}

.nci--grove .grv-wishes {
  padding: 0 var(--grv-g);
  margin-top: 7cqw;
}

.nci--grove .grv-wish {
  padding: 5cqw 5.5cqw;
  border-radius: 5cqw;
  background: rgba(255, 253, 247, 0.72);
  box-shadow: 0 1cqw 3cqw rgba(90, 76, 40, 0.07);
}

.nci--grove .grv-wish + .grv-wish {
  margin-top: 3.4cqw;
}

.nci--grove .grv-wish-text {
  font-size: 3.2cqw;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--grv-ink);
  overflow-wrap: anywhere;
}

.nci--grove .grv-wish-from {
  margin-top: 2.4cqw;
  font-size: 2.8cqw;
  letter-spacing: 0.14em;
  color: var(--grv-moss);
}

.nci--grove .grv-wish-empty {
  padding: 6cqw 0;
  text-align: center;
  font-size: 3cqw;
  letter-spacing: 0.1em;
  color: var(--grv-moss);
}

.nci--grove .grv-toast {
  position: relative;
  aspect-ratio: 5 / 6;
  margin-top: 14cqw;
  overflow: hidden;
  border-radius: 12cqw 12cqw 0 0;
  background: var(--grv-dark);
}

.nci--grove .grv-toast-img {
  position: absolute;
  inset: 0;
}

.nci--grove .grv-toast-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 34, 26, 0.82) 0%, rgba(20, 34, 26, 0.5) 24%, transparent 52%);
}

.nci--grove .grv-toast-line {
  position: absolute;
  left: var(--grv-g);
  right: var(--grv-g);
  bottom: 9cqw;
  text-align: center;
  font-family: var(--grv-disp);
  font-size: 5.2cqw;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0.4cqw 2cqw rgba(16, 28, 21, 0.5);
}

.nci--grove.nci--lang-en .grv-toast-line {
  font-style: italic;
}

.nci--grove .grv-coda {
  padding: 9cqw 0 2cqw;
  text-align: center;
}

.nci--grove .grv-coda-mark {
  font-size: 2.8cqw;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--grv-gold-ink);
}

/* ───── Guest cover overlay ───── */

.nci-cover--grove {
  container-type: inline-size;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--grv-paper);
  color: var(--grv-ink);
  font-family: var(--grv-sans);
}

.nci-cover--grove .grv-cv-photo {
  position: relative;
  height: 58%;
  overflow: hidden;
  background: var(--grv-dark);
}

.nci-cover--grove .grv-cv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

.nci-cover--grove .grv-cv-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 34, 26, 0.48) 0%, rgba(20, 34, 26, 0.12) 10%, transparent 17%),
    linear-gradient(0deg, var(--grv-paper) 0%, rgba(251, 246, 236, 0.5) 12%, transparent 30%);
}

.nci-cover--grove .grv-cv-kicker {
  position: absolute;
  top: 7cqw;
  left: 7cqw;
  right: 7cqw;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
}

.nci-cover--grove .grv-cv-body {
  position: relative;
  height: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 8cqw 4cqw;
  text-align: center;
}

.nci-cover--grove .grv-cv-glow {
  position: absolute;
  top: -14cqw;
  left: 50%;
  width: 96cqw;
  height: 60cqw;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(233, 178, 84, 0.45) 0%, transparent 74%);
}

.nci-cover--grove .grv-cv-names {
  position: relative;
  font-family: var(--grv-disp);
  font-size: 10.4cqw;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--grv-ink);
}

.nci-cover--grove .grv-cv-names i {
  display: block;
  margin: 0.6cqw 0;
  font-size: 4.2cqw;
  font-style: italic;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--grv-gold-ink);
}

.nci-cover--grove .grv-cv-date {
  position: relative;
  margin-top: 4cqw;
  font-size: 3.1cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--grv-ink-2);
}

.nci-cover--grove .grv-cv-open {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6cqw;
  margin-top: 7cqw;
  padding: 0;
  border: none;
  background: none;
}

.nci-cover--grove .grv-sun--cv {
  width: 15cqw;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nci-cover--grove .grv-cv-open:hover .grv-sun--cv {
  transform: rotate(22deg);
}

.nci-cover--grove .grv-cv-open span {
  font-size: 2.9cqw;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--grv-gold-ink);
}

.nci-cover--grove .grv-cv-open:focus-visible {
  outline: 2px solid var(--grv-gold-ink);
  outline-offset: 6px;
  border-radius: 6px;
}

.nci-cover--grove .grv-cv-hint {
  position: relative;
  margin-top: 5cqw;
  font-size: 2.6cqw;
  letter-spacing: 0.16em;
  color: var(--grv-moss);
}

/* Opening: the light floods, the page behind it is already there. */
.nci-cover--grove.grv-cv--opening {
  animation: grv-open 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.nci-cover--grove.grv-cv--opening .grv-sun--cv {
  animation: grv-flare 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes grv-open {
  to {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes grv-flare {
  to {
    transform: rotate(80deg) scale(2.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--grove.grv-cv--opening,
  .nci-cover--grove.grv-cv--opening .grv-sun--cv {
    animation: none;
  }

  .nci-cover--grove .grv-sun--cv {
    transition: none;
  }
}

/* ───── Floating bar — two marks in the corner ─────
   The base bar is centred at the foot of the screen, where it came to rest on the letter and on the
   reply card's own send button. Poster, cream and the hall move theirs into a corner for the same
   reason; these go to the top right as two discs, so the band they cover is 80px wide instead of 200
   and no line of the letter or label of a control ever sits under a label of theirs. */

.nci-float--grove {
  top: 14px;
  right: 14px;
  bottom: auto;
  left: auto;
  justify-content: flex-end;
  gap: 8px;
}

.nci-float--grove button {
  width: 36px;
  height: 36px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--grv-sans);
  font-size: 0;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 4px 14px rgba(27, 44, 34, 0.18);
}

.nci-float--grove .nci-float-music {
  border: 1px solid rgba(185, 132, 40, 0.5);
  background: rgba(251, 246, 236, 0.94);
  color: var(--grv-ink);
}

.nci-float--grove .nci-float-dot {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 14px;
  line-height: 1;
  color: var(--grv-gold-ink);
}

/* Escaped, so the marks survive however the sheet is decoded: a note for the music, an arrow for share. */
.nci-float--grove .nci-float-dot::before {
  content: '\266A';
}

.nci-float--grove .nci-float-share::before {
  content: '\2197';
  font-size: 15px;
  line-height: 1;
}

.nci-float--grove .nci-float-music[aria-pressed='true'] {
  background: var(--grv-gold);
  border-color: var(--grv-gold);
}

.nci-float--grove .nci-float-music[aria-pressed='true'] .nci-float-dot {
  color: #fff;
}

.nci-float--grove .nci-float-share {
  border: 1px solid var(--grv-ink);
  background: var(--grv-ink);
  color: var(--grv-paper);
}