/* Nicecard demo — "Olive Grove" (橄榄园) invitation style. Everything is scoped under .nci--olive,
   .nci-cover--olive and .nci-float--olive so the other styles are untouched; new classes use the olv-
   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; the guest cover is
   a size container in both directions, so it can also lay itself out against the phone's height.
   The page is painted first: the ground is the kit's own cold-press paper tile, and every painted
   piece is one of the owner's watercolours, bled off the page edge rather than cut inside it — the
   kit's pieces fade to transparency at their own edges, so a hard crop is the only way to break the
   illusion, and nothing here makes one. Every painted piece is decoration and takes no pointer.
   Colours that carry words are set to read on the paper: --olv-ink 11:1, --olv-ink-2 7.4:1,
   --olv-olive 6.2:1, --olv-gold-ink 5.4:1, --olv-mute 5.2:1 and --olv-terra 5:1, all on --olv-paper.
   --olv-gold and --olv-sage are ornament colours only (the leaders, the rules, the ribbon's own
   green). The gold of the names is a gradient clipped to the letters; set at 10cqw and more, its
   darkest and lightest stops both clear 3:1 on the paper, which is the large-type bar. The smallest
   type that carries information is 2.6cqw — 10px on a 390px phone, and never below 10px on a
   narrower one. */

.nci--olive,
.nci-cover--olive,
.nci-float--olive {
  --olv-paper: #f2ebdc;
  --olv-card: #fcf9f1;
  --olv-ink: #34362a;
  --olv-ink-2: #4e503c;
  --olv-mute: #5f5e49;
  --olv-olive: #4f5a2b;
  --olv-sage: #93a36f;
  --olv-ribbon-ink: #2f3a1c;
  --olv-gold: #a67d35;
  --olv-gold-ink: #72541b;
  --olv-terra: #9a4f28;
  --olv-hair: rgba(79, 90, 43, 0.3);
  --olv-hair-2: rgba(79, 90, 43, 0.16);
  --olv-gold-grad: linear-gradient(100deg, #7b571b 0%, #a98035 26%, #c9a25a 44%, #9c722b 62%, #b48a40 80%, #7f5b1f 100%);
  --olv-script: 'Great Vibes', 'Noto Serif SC', cursive;
  --olv-disp: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --olv-body: 'EB Garamond', 'Noto Serif SC', Georgia, serif;
  --olv-zh: 'Noto Serif SC', 'Songti SC', serif;
  --olv-paper-url: url(assets/watercolor/watercolor-paper.webp);
}

.nci--olive {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--olv-paper);
  color: var(--olv-ink);
  font-family: var(--olv-body);
  /* Both Garamonds default to old-style figures, where a lone 1 in small caps reads as an i. */
  font-variant-numeric: lining-nums;
  --olv-g: 9cqw;
  --nci-bg: var(--olv-paper);
  --nci-soft: #e9e1cd;
  --nci-slot-line: rgba(114, 84, 27, 0.45);
  --nci-slot-ink: var(--olv-ink-2);
  --nci-hint: rgba(114, 84, 27, 0.5);
  --nci-sel: #9a4f28;
}

/* The kit's paper, tiled behind everything. It lives on a pseudo-element because the tile is sized in
   cqw, and a container can only be measured by its descendants — z-index -1 keeps it under every
   section inside the page's own stacking context. */
.nci--olive::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: var(--olv-paper-url) 0 0 / 78cqw auto repeat;
}

.nci--olive .nci-section {
  display: flow-root;
  padding: 0;
}

.nci--olive .nci-s-story {
  padding: 9cqw 0 18cqw;
}

.nci--olive .nci-s-countdown {
  padding: 0;
}

.nci--olive .nci-s-gallery {
  padding: 12cqw 0 20cqw;
}

.nci--olive .nci-s-schedule {
  padding: 0 0 20cqw;
}

.nci--olive .nci-s-venue {
  padding: 0 0 20cqw;
}

.nci--olive .nci-s-faq {
  padding: 0 0 20cqw;
}

.nci--olive .nci-s-rsvp {
  padding: 0 0 22cqw;
}

.nci--olive .nci-s-wishes {
  padding: 0;
}

/* Every painted piece is decoration: none may take a tap from the field or the photograph under it. */
.nci--olive .olv-paint,
.nci-cover--olive .olv-paint {
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.nci--olive .olv-dot {
  color: var(--olv-gold);
}

/* A piece laid over a photograph's edge (Over in olive.js) paints its kit file from ::before; the host
   is an empty box the placing rules size by width, holding the painting's own proportions. */
.nci--olive .olv-over,
.nci-cover--olive .olv-over {
  display: block;
  pointer-events: none;
}

.nci--olive .olv-over::before,
.nci-cover--olive .olv-over::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--olv-over) center / 100% 100% no-repeat;
}

/* The Garamonds have true italics and Chinese has none: an italic line that turns out to be Chinese
   (the empty guest book, a placeholder, anything a guest types) stays upright rather than being slanted
   by the browser. */
.nci--olive,
.nci-cover--olive,
.nci--olive :is(input, textarea, button) {
  font-synthesis: weight;
}

/* ───── headings: Italian small caps, then the couple's own words ───── */

.nci--olive .olv-head {
  position: relative;
  z-index: 2;
  padding: 0 var(--olv-g);
  text-align: center;
}

.nci--olive .olv-caps,
.nci--olive .olv-role,
.nci--olive .olv-card-caps {
  font-family: var(--olv-disp);
  font-size: 2.8cqw;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--olv-gold-ink);
}

.nci--olive .olv-title {
  margin-top: 1.6cqw;
  font-family: var(--olv-disp);
  font-size: 7.6cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: 0.005em;
  color: var(--olv-olive);
  text-wrap: balance;
}

.nci--olive.nci--lang-zh .olv-title {
  font-family: var(--olv-zh);
  font-size: 5.8cqw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.1em;
}

.nci--olive .olv-head--left {
  padding-right: 42cqw;
  text-align: left;
}

.nci--olive .olv-head--left .olv-caps {
  text-indent: 0;
}

/* ───── the names in gold ─────
   The gradient is clipped to the letters, so the box gets padding enough to hold the script's swashes
   — a glyph that overflows the box it paints in would lose its gold. The caret is set back to a
   colour while the names are being edited, since the text itself is transparent. */

.nci--olive .olv-names,
.nci-cover--olive .olv-names {
  display: block;
  padding: 1cqw 4cqw 2.6cqw;
  font-family: var(--olv-script);
  font-size: 12.6cqw;
  font-weight: 400;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
  background: var(--olv-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: var(--olv-gold-ink);
}

.nci--olive .olv-amp,
.nci-cover--olive .olv-amp {
  display: inline-block;
  margin: 0 0.16em;
  font-family: var(--olv-script);
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0;
}

.nci--olive.nci--lang-zh .olv-names,
.nci-cover--olive.olv-cv--zh .olv-names {
  padding-top: 2cqw;
  font-family: var(--olv-zh);
  font-size: 8.8cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1.3;
}

.nci--olive.nci--lang-zh .olv-amp,
.nci-cover--olive.olv-cv--zh .olv-amp {
  font-family: var(--olv-script);
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0.18em 0 0.04em;
}

/* ───── cover — device one ───── */

.nci--olive .olv-hero {
  position: relative;
  padding-top: 15cqw;
}

.nci--olive .olv-hero-sky {
  position: absolute;
  z-index: 0;
  top: 0;
  left: -6cqw;
  width: 112cqw;
}

.nci--olive .olv-hero-frame {
  position: relative;
  z-index: 1;
  width: 72cqw;
  margin: 0 auto;
}

.nci--olive .olv-hero-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  background-color: transparent;
}

/* The photograph's own sky runs into the painted one: the top fifth is faded out, and the sides
   soften over their outer twentieth so no hard vertical edge stands in the painting. The foot stays
   clean — the gown runs to it. The mask is on the picture, not the slot, so the editor's selection
   outline around the slot is never masked away. */
.nci--olive .olv-hero-photo img,
.nci-cover--olive .olv-cv-photo img {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 19%),
    linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 19%),
    linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}

.nci--olive .olv-hero-canopy {
  position: absolute;
  z-index: 2;
  top: -2cqw;
  right: -6cqw;
  width: 46cqw;
  transform: scaleX(-1);
}

.nci--olive .olv-hero-line,
.nci-cover--olive .olv-cv-line {
  position: absolute;
  z-index: 3;
  left: 8cqw;
  max-width: 48cqw;
  font-family: var(--olv-disp);
  font-size: 7.8cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.02;
  text-align: left;
  white-space: pre-line;
  color: var(--olv-olive);
  text-shadow: 0 0 2.4cqw rgba(252, 249, 241, 0.9), 0 0 0.8cqw rgba(252, 249, 241, 0.7);
}

.nci--olive .olv-hero-line {
  top: 6cqw;
}

.nci--olive.nci--lang-zh .olv-hero-line,
.nci-cover--olive.olv-cv--zh .olv-cv-line {
  font-family: var(--olv-zh);
  font-size: 5.4cqw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.36em;
}

.nci--olive .olv-hero-text {
  position: relative;
  z-index: 3;
  margin-top: 3cqw;
  padding: 0 5cqw;
  text-align: center;
}

.nci--olive .olv-invite,
.nci-cover--olive .olv-invite {
  font-family: var(--olv-disp);
  font-size: 4.3cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--olv-ink-2);
}

.nci--olive.nci--lang-zh .olv-invite,
.nci-cover--olive.olv-cv--zh .olv-invite {
  font-family: var(--olv-zh);
  font-size: 3.4cqw;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.14em;
}

/* The ribbon carries the date: the band's flat middle is the painting's middle two fifths, and the
   figures sit on its centre line. */
.nci--olive .olv-ribbon {
  position: relative;
  width: 72cqw;
  margin: 3.4cqw auto 0;
}

.nci--olive .olv-ribbon-art,
.nci-cover--olive .olv-ribbon-art {
  width: 100%;
}

.nci--olive .olv-ribbon-t,
.nci-cover--olive .olv-ribbon-t {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 46%;
  transform: translateY(-50%);
  font-family: var(--olv-disp);
  font-size: 4.3cqw;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-align: center;
  white-space: nowrap;
  color: var(--olv-ribbon-ink);
  pointer-events: none;
}

.nci--olive .olv-where {
  margin-top: 2.2cqw;
  font-family: var(--olv-disp);
  font-size: 2.9cqw;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--olv-ink-2);
  text-shadow: 0 0 1.6cqw rgba(252, 249, 241, 0.95), 0 0 0.6cqw rgba(252, 249, 241, 0.8);
}

.nci--olive.nci--lang-zh .olv-where {
  font-family: var(--olv-zh);
  font-size: 3cqw;
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* The hills start under the place line, not behind it: the line of caps stays on clear paper and the
   distant ridge and its hilltop towns begin just below. */
.nci--olive .olv-hero-hills {
  position: relative;
  z-index: 1;
  width: 108cqw;
  margin: 5cqw 0 0 -4cqw;
}

/* ───── story — device two ───── */

/* A corner of a larger painting, cut straight along its top and its outer side. The outer side bleeds
   off the page; mid-page the top would read as a ruled line, so it is faded into the paper instead —
   the same treatment every corner piece gets wherever it is not at the page's own corner. */
.nci--olive .olv-fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 9%, #000 24%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 9%, #000 24%);
}

.nci--olive .olv-fade-bottom {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.4) 9%, #000 24%);
  mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.4) 9%, #000 24%);
}

.nci--olive .olv-story-canopy {
  position: absolute;
  z-index: 1;
  top: -6cqw;
  left: -6cqw;
  width: 52cqw;
}

.nci--olive .olv-wreath {
  position: relative;
  width: 90cqw;
  margin: 7cqw auto 0;
  aspect-ratio: 900 / 891;
}

.nci--olive .olv-wreath-photo {
  position: absolute;
  z-index: 0;
  top: 17.6%;
  left: 24.2%;
  width: 51.6%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.nci--olive .olv-wreath-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
}

.nci--olive .olv-wreath-band {
  position: absolute;
  z-index: 2;
  top: 79.6%;
  left: 30%;
  right: 30%;
  transform: translateY(-50%);
  font-family: var(--olv-disp);
  font-size: 2.8cqw;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-align: center;
  white-space: nowrap;
  color: var(--olv-ribbon-ink);
}

.nci--olive.nci--lang-zh .olv-wreath-band {
  font-family: var(--olv-zh);
  font-weight: 400;
  letter-spacing: 0.18em;
}

.nci--olive .olv-letter {
  position: relative;
  z-index: 2;
  margin-top: 5cqw;
  padding: 0 var(--olv-g);
  font-size: 3.7cqw;
  line-height: 1.85;
  text-align: center;
  white-space: pre-line;
  color: var(--olv-ink);
}

.nci--olive.nci--lang-zh .olv-letter {
  font-size: 3.5cqw;
  line-height: 2.05;
  letter-spacing: 0.05em;
}

.nci--olive .olv-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 12cqw var(--olv-g) 0;
  text-align: center;
}

.nci--olive .olv-person {
  min-width: 0;
  padding: 1cqw 4cqw 1cqw 0;
}

.nci--olive .olv-person + .olv-person {
  padding: 1cqw 0 1cqw 4cqw;
  border-left: 1px solid var(--olv-hair);
}

.nci--olive .olv-role {
  font-size: max(10px, 2.6cqw);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.nci--olive .olv-person-name {
  margin-top: 0.6cqw;
  padding: 0 1cqw 1.4cqw;
  font-family: var(--olv-script);
  font-size: 10.4cqw;
  line-height: 1.2;
  overflow-wrap: anywhere;
  background: var(--olv-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: var(--olv-gold-ink);
}

.nci--olive.nci--lang-zh .olv-person-name {
  margin-top: 2.4cqw;
  font-family: var(--olv-zh);
  font-size: 6.4cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.nci--olive .olv-person-line {
  margin-top: 1cqw;
  font-size: 3.2cqw;
  line-height: 1.7;
  color: var(--olv-ink-2);
}

.nci--olive.nci--lang-en .olv-person-line {
  font-style: italic;
}

/* ───── countdown ───── */

.nci--olive .olv-cd-sky {
  position: absolute;
  z-index: 0;
  top: 0;
  left: -10cqw;
  width: 120cqw;
  transform: scaleX(-1);
}

.nci--olive .nci-s-countdown .olv-head {
  padding-top: 21cqw;
}

.nci--olive .nci-s-countdown .olv-title {
  text-shadow: 0 0 2.4cqw rgba(252, 249, 241, 0.85);
}

.nci--olive .olv-cd {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 9cqw var(--olv-g) 0;
}

.nci--olive .olv-cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
  padding: 0.6cqw 0;
}

.nci--olive .olv-cd-cell + .olv-cd-cell {
  border-left: 1px solid var(--olv-hair);
}

.nci--olive .olv-cd-n {
  font-family: var(--olv-disp);
  font-size: 10cqw;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--olv-olive);
}

.nci--olive .olv-cd-u {
  font-family: var(--olv-disp);
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--olv-gold-ink);
}

.nci--olive.nci--lang-zh .olv-cd-u {
  font-family: var(--olv-zh);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.nci--olive .olv-cd-done {
  position: relative;
  z-index: 2;
  margin: 9cqw var(--olv-g) 0;
  text-align: center;
  font-family: var(--olv-script);
  font-size: 12cqw;
  color: var(--olv-gold-ink);
}

.nci--olive .olv-cd-date {
  position: relative;
  z-index: 2;
  margin-top: 8cqw;
  padding: 0 var(--olv-g);
  text-align: center;
  font-family: var(--olv-disp);
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olv-ink);
}

.nci--olive.nci--lang-zh .olv-cd-date {
  font-family: var(--olv-zh);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.nci--olive .olv-cd-lunar {
  margin-top: 1.4cqw;
  text-align: center;
  font-family: var(--olv-zh);
  font-size: 3cqw;
  letter-spacing: 0.2em;
  color: var(--olv-gold-ink);
}

.nci--olive .olv-cd-note {
  position: relative;
  z-index: 2;
  margin-top: 6cqw;
  padding: 0 var(--olv-g);
  text-align: center;
  font-size: 3.5cqw;
  line-height: 1.8;
  white-space: pre-line;
  color: var(--olv-ink-2);
}

.nci--olive.nci--lang-en .olv-cd-note {
  font-style: italic;
}

/* The cypress avenue taken close: the gate and the villa on the page's axis, the gravel road running
   down to the foot of the screen, the two rows of cypresses bled off both sides of the page. */
.nci--olive .olv-cd-land {
  position: relative;
  height: 96cqw;
  margin-top: 4cqw;
  overflow: hidden;
}

.nci--olive .olv-cd-avenue {
  position: absolute;
  top: -8cqw;
  left: 50%;
  width: 156cqw;
  transform: translateX(-50%);
}

/* ───── gallery ───── */

.nci--olive .olv-vista {
  position: relative;
  margin: 12cqw 5cqw 0;
}

.nci--olive .olv-vista-photo {
  width: 100%;
  /* A little wider than the photograph's own 3:2, so the crop tool can move it up and down. */
  aspect-ratio: 8 / 5;
  background-color: transparent;
}

/* The wide garden frame and the tall frame among the wildflowers: each photograph's own top edge — sky
   and treetops — melts into the paper, and the sides soften, so the frame reads as a window in the
   painting rather than a print laid on it. The foot stays clean: in both, the gown runs down to it. */
.nci--olive .olv-vista-photo img,
.nci--olive .olv-meadow-photo img {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 6%, #000 15%),
    linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 6%, #000 15%),
    linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}

.nci--olive .olv-vista-olive {
  position: absolute;
  z-index: 1;
  top: -12cqw;
  left: -9cqw;
  width: 38cqw;
}

.nci--olive .olv-vista-roses {
  position: absolute;
  z-index: 1;
  right: -9cqw;
  bottom: -14cqw;
  width: 50cqw;
}

.nci--olive .olv-verse {
  margin-top: 16cqw;
  padding: 0 var(--olv-g);
  text-align: center;
  font-family: var(--olv-disp);
  font-size: 4.4cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--olv-ink);
}

.nci--olive.nci--lang-zh .olv-verse {
  font-family: var(--olv-zh);
  font-size: 3.5cqw;
  font-style: normal;
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: 0.08em;
}

/* The tall frame stands inside the painted arch: it is wider than the opening, so its sides run in
   behind the posts, its own sky fades out under the garland, and its foot is the ground line between
   the two posts. lago-01's couple stands in the right half of that opening, clear of the drape. */
.nci--olive .olv-arch {
  margin: 14cqw 0 0;
}

.nci--olive .olv-arch-stage {
  position: relative;
  width: 86cqw;
  margin: 0 auto;
  aspect-ratio: 806 / 900;
}

.nci--olive .olv-arch-photo {
  position: absolute;
  z-index: 0;
  top: 9%;
  left: 13%;
  width: 70%;
  height: 87.5%;
  background-color: transparent;
}

.nci--olive .olv-arch-photo img {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 8%, #000 20%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 8%, #000 20%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

.nci--olive .olv-arch-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
}

.nci--olive .olv-cap {
  margin-top: 3cqw;
  padding: 0 var(--olv-g);
  text-align: center;
  font-family: var(--olv-disp);
  font-size: 3.4cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--olv-ink-2);
}

.nci--olive.nci--lang-zh .olv-cap {
  font-family: var(--olv-zh);
  font-size: 3cqw;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* ───── schedule — device three ───── */

.nci--olive .olv-day {
  margin: 8cqw 7cqw 0;
  padding: 0;
  list-style: none;
}

.nci--olive .olv-step {
  display: grid;
  grid-template-columns: 27cqw minmax(5cqw, 1fr) 38cqw;
  align-items: center;
  gap: 2.4cqw;
}

.nci--olive .olv-step + .olv-step {
  margin-top: 4cqw;
}

.nci--olive .olv-step--alt {
  grid-template-columns: 38cqw minmax(5cqw, 1fr) 27cqw;
}

.nci--olive .olv-step--alt .olv-step-art {
  order: 3;
}

.nci--olive .olv-step--alt .olv-step-lead {
  order: 2;
}

.nci--olive .olv-step--alt .olv-step-txt {
  order: 1;
  text-align: right;
}

.nci--olive .olv-step-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27cqw;
}

.nci--olive .olv-step-art .olv-paint {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* The objects are painted at different scales; each is sized so they read as one set on the table. */
.nci--olive .olv-step-art--arch .olv-paint {
  max-height: 108%;
}

.nci--olive .olv-step-art--cake .olv-paint {
  max-height: 104%;
}

/* The dotted leader, drawn from the object to its hour. */
.nci--olive .olv-step-lead {
  height: 0;
  border-bottom: 2px dotted var(--olv-gold);
  opacity: 0.85;
}

.nci--olive .olv-step-txt {
  min-width: 0;
}

.nci--olive .olv-step-at {
  display: block;
  font-family: var(--olv-disp);
  font-size: 6.6cqw;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.02em;
  color: var(--olv-olive);
}

.nci--olive .olv-step-t {
  display: block;
  margin-top: 1cqw;
  font-size: 3.5cqw;
  line-height: 1.45;
  color: var(--olv-ink);
}

.nci--olive.nci--lang-zh .olv-step-t {
  font-size: 3.3cqw;
  letter-spacing: 0.06em;
}

.nci--olive .olv-sched-note {
  margin-top: 9cqw;
  padding: 0 var(--olv-g);
  text-align: center;
  font-size: 3.4cqw;
  line-height: 1.8;
  white-space: pre-line;
  color: var(--olv-ink-2);
}

.nci--olive.nci--lang-en .olv-sched-note {
  font-style: italic;
}

.nci--olive .olv-linkrow {
  margin-top: 6cqw;
  text-align: center;
}

.nci--olive .olv-link {
  display: inline-block;
  padding-bottom: 0.8cqw;
  border-bottom: 1px solid var(--olv-gold);
  font-family: var(--olv-disp);
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--olv-gold-ink);
}

.nci--olive.nci--lang-zh .olv-link {
  font-family: var(--olv-zh);
  font-weight: 400;
  letter-spacing: 0.14em;
}

/* ───── venue — device four ───── */

/* The hills taken close: the house among its cypresses on the page's upper third, the vines and the
   white road winding down to where the card rests, both sides of the painting bled off the page. */
.nci--olive .olv-villa {
  position: relative;
  height: 76cqw;
  margin-top: 2cqw;
}

.nci--olive .olv-villa-sky {
  position: absolute;
  z-index: 0;
  top: -9cqw;
  left: -4cqw;
  width: 108cqw;
}

.nci--olive .olv-villa-art {
  position: absolute;
  z-index: 1;
  top: 2cqw;
  left: -64cqw;
  width: 178cqw;
}

/* A card of lighter paper resting on the gravel in front of the gate, a gold rule inside its edge. */
.nci--olive .olv-card {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(rgba(253, 251, 245, 0.74), rgba(253, 251, 245, 0.74)),
    var(--olv-paper-url) 0 0 / 60cqw auto repeat,
    var(--olv-card);
  box-shadow: 0 1.4cqw 5cqw rgba(78, 66, 32, 0.16), 0 0.2cqw 0.6cqw rgba(78, 66, 32, 0.08);
}

.nci--olive .olv-card::before {
  content: '';
  position: absolute;
  inset: 2.2cqw;
  border: 1px solid rgba(166, 125, 53, 0.42);
  pointer-events: none;
}

.nci--olive .olv-venue-card {
  margin: -12cqw 9cqw 0;
  padding: 9cqw 8cqw 8cqw;
  text-align: center;
}

.nci--olive .olv-card-caps {
  font-size: max(10px, 2.6cqw);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.nci--olive .olv-venue-name {
  margin-top: 2cqw;
  font-family: var(--olv-disp);
  font-size: 7cqw;
  font-weight: 500;
  line-height: 1.2;
  color: var(--olv-olive);
}

.nci--olive.nci--lang-zh .olv-venue-name {
  font-family: var(--olv-zh);
  font-size: 5.2cqw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.nci--olive .olv-venue-addr {
  margin-top: 2cqw;
  font-size: 3.3cqw;
  line-height: 1.6;
  color: var(--olv-ink-2);
}

.nci--olive .olv-venue-when {
  margin-top: 3cqw;
  font-family: var(--olv-disp);
  font-size: 3cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olv-gold-ink);
}

.nci--olive.nci--lang-zh .olv-venue-when {
  font-family: var(--olv-zh);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.nci--olive .olv-mapwrap {
  margin-top: 5cqw;
  overflow: hidden;
  border: 1px solid var(--olv-hair-2);
}

/* The map in the painting's colours: olive-green fields, an ochre road, a terracotta pin. */
.nci--olive .nci-map {
  height: 34cqw;
  background:
    radial-gradient(26cqw 12cqw at 18% 24%, rgba(128, 146, 92, 0.28) 0%, transparent 72%),
    radial-gradient(30cqw 14cqw at 82% 80%, rgba(128, 146, 92, 0.24) 0%, transparent 72%),
    radial-gradient(22cqw 10cqw at 70% 18%, rgba(196, 160, 96, 0.22) 0%, transparent 72%),
    radial-gradient(18cqw 9cqw at 26% 86%, rgba(196, 160, 96, 0.2) 0%, transparent 72%),
    linear-gradient(180deg, #efe7d4 0%, #e9e0ca 100%);
}

.nci--olive .nci-map-road {
  top: 55%;
  height: 2.6cqw;
  transform: rotate(-7deg) scaleX(1.1);
  border-top: 1px solid rgba(154, 111, 45, 0.28);
  border-bottom: 1px solid rgba(154, 111, 45, 0.28);
  background: rgba(247, 240, 222, 0.9);
}

.nci--olive .nci-map-pin {
  top: 38%;
  left: 49%;
  width: 4cqw;
  height: 4cqw;
  background: var(--olv-terra);
  box-shadow: 0 0 0 1.6cqw rgba(154, 79, 40, 0.14);
}

.nci--olive .olv-maps {
  display: flex;
  justify-content: center;
  gap: 7cqw;
  margin-top: 4.4cqw;
}

.nci--olive .olv-venue-note {
  margin-top: 5cqw;
  font-size: 3.3cqw;
  line-height: 1.75;
  white-space: pre-line;
  color: var(--olv-ink-2);
}

.nci--olive.nci--lang-en .olv-venue-note {
  font-style: italic;
}

/* ───── the journey ───── */

.nci--olive .olv-journey {
  margin-top: 22cqw;
}

.nci--olive .olv-lede {
  margin-top: 4cqw;
  padding: 0 var(--olv-g);
  text-align: center;
  font-size: 3.6cqw;
  line-height: 1.75;
  color: var(--olv-ink-2);
}

.nci--olive.nci--lang-en .olv-lede {
  font-style: italic;
}

/* The journey walks down the empty channel between the two painted banks of wildflowers. The painting
   is wider than the page so both banks bleed off its edges, and the photograph and the legs stand in
   the channel between them. */
.nci--olive .olv-meadow {
  position: relative;
  margin-top: 8cqw;
  min-height: 190cqw;
}

.nci--olive .olv-meadow-art {
  position: absolute;
  z-index: 0;
  top: 0;
  left: -16cqw;
  width: 132cqw;
}

.nci--olive .olv-meadow-in {
  position: relative;
  z-index: 1;
  padding: 14cqw 21cqw 0;
}

.nci--olive .olv-meadow-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: transparent;
}

.nci--olive .olv-legs {
  margin: 9cqw 0 0;
  padding: 0;
  list-style: none;
}

.nci--olive .olv-leg {
  display: grid;
  grid-template-columns: 8cqw minmax(0, 1fr);
  gap: 2cqw;
  padding: 4.6cqw 0;
  border-top: 1px solid var(--olv-hair-2);
}

.nci--olive .olv-leg:last-child {
  border-bottom: 1px solid var(--olv-hair-2);
}

.nci--olive .olv-leg-n {
  font-family: var(--olv-disp);
  font-size: 6cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: var(--olv-gold-ink);
}

.nci--olive .olv-leg-k {
  font-family: var(--olv-disp);
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--olv-olive);
}

.nci--olive.nci--lang-zh .olv-leg-k {
  font-family: var(--olv-zh);
  font-size: 3.3cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.nci--olive .olv-leg-v {
  margin-top: 1.4cqw;
  font-size: 3.3cqw;
  line-height: 1.7;
  color: var(--olv-ink);
}

.nci--olive .olv-foot {
  margin-top: 8cqw;
  padding: 0 var(--olv-g);
  text-align: center;
  font-family: var(--olv-disp);
  font-size: 4.2cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
  white-space: pre-line;
  color: var(--olv-olive);
}

.nci--olive.nci--lang-zh .olv-foot {
  font-family: var(--olv-zh);
  font-size: 3.4cqw;
  font-style: normal;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.08em;
}

/* ───── dress code and questions ───── */

.nci--olive .olv-attire {
  display: grid;
  grid-template-columns: 34cqw minmax(0, 1fr);
  align-items: center;
  gap: 6cqw;
  margin: 8cqw var(--olv-g) 0;
}

.nci--olive .olv-attire-art {
  width: 100%;
}

.nci--olive .olv-attire-line {
  font-size: 3.5cqw;
  line-height: 1.75;
  color: var(--olv-ink);
}

.nci--olive .olv-tones {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8cqw;
  margin-top: 5cqw;
}

/* The five colours of the hills, each laid as a wash rather than a flat disc: lighter where the light
   catches it, deeper at the rim. The colour is the couple's (NC.inv.Swatch hands it over as --sw), so
   the whole wash is mixed from it. */
.nci--olive .olv-tone {
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 30%,
    color-mix(in srgb, var(--sw) 68%, #fff) 0%,
    var(--sw) 62%,
    color-mix(in srgb, var(--sw) 87%, #000) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(52, 54, 42, 0.12);
}

.nci--olive .olv-tones-names {
  margin-top: 2.6cqw;
  word-break: keep-all;
  font-family: var(--olv-disp);
  font-size: 3.2cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--olv-mute);
}

.nci--olive.nci--lang-zh .olv-tones-names {
  font-family: var(--olv-zh);
  font-size: 2.9cqw;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.nci--olive .olv-faq-top {
  position: relative;
  margin-top: 16cqw;
  padding-top: 8cqw;
}

.nci--olive .olv-faq-canopy {
  position: absolute;
  z-index: 1;
  top: -4cqw;
  right: -6cqw;
  width: 50cqw;
  transform: scaleX(-1);
}

.nci--olive .olv-head--right {
  padding-left: 44cqw;
  text-align: right;
}

.nci--olive .olv-head--right .olv-caps {
  text-indent: 0;
  letter-spacing: 0.3em;
}

.nci--olive .olv-faq {
  margin: 7cqw var(--olv-g) 0;
}

.nci--olive .olv-faq-item {
  padding: 5cqw 0;
  border-top: 1px solid var(--olv-hair-2);
  text-align: center;
}

.nci--olive .olv-faq-item:last-child {
  border-bottom: 1px solid var(--olv-hair-2);
}

.nci--olive .olv-faq-q {
  font-family: var(--olv-disp);
  font-size: 4.8cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: var(--olv-olive);
}

.nci--olive.nci--lang-zh .olv-faq-q {
  font-family: var(--olv-zh);
  font-size: 3.8cqw;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.nci--olive .olv-faq-a {
  margin-top: 1.8cqw;
  font-size: 3.4cqw;
  line-height: 1.7;
  color: var(--olv-ink-2);
}

/* ───── reply card and thank-you card ───── */

.nci--olive .olv-lede--c {
  text-align: center;
}

.nci--olive .olv-by {
  margin-top: 3cqw;
  text-align: center;
  font-family: var(--olv-disp);
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olv-gold-ink);
}

.nci--olive.nci--lang-zh .olv-by {
  font-family: var(--olv-zh);
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* The roses are printed into the card's lower corner, so the painting's two cut sides are the card's
   own edges. */
.nci--olive .olv-reply {
  overflow: hidden;
  margin: 9cqw 7cqw 0;
  padding: 10cqw 9cqw 25cqw;
}

.nci--olive .olv-reply--done {
  padding-bottom: 28cqw;
}

.nci--olive .olv-reply-roses {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 46cqw;
}

.nci--olive .olv-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.nci--olive .olv-fl {
  display: block;
  margin-top: 5cqw;
  font-family: var(--olv-disp);
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olv-gold-ink);
}

.nci--olive .olv-form > .olv-fl:first-child {
  margin-top: 0;
}

.nci--olive.nci--lang-zh .olv-fl {
  font-family: var(--olv-zh);
  font-size: 3cqw;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.nci--olive .olv-in {
  width: 100%;
  min-width: 0;
  margin-top: 1.4cqw;
  padding: 1.6cqw 0.4cqw;
  border: none;
  border-bottom: 1px solid var(--olv-hair);
  border-radius: 0;
  outline: none;
  background: transparent;
  font-family: var(--olv-body);
  font-size: 4cqw;
  color: var(--olv-ink);
  appearance: none;
}

.nci--olive .olv-in:focus {
  border-bottom-color: var(--olv-gold);
  background: rgba(166, 125, 53, 0.07);
}

.nci--olive .olv-in.is-bad {
  border-bottom-color: var(--olv-terra);
}

.nci--olive .olv-in::placeholder {
  color: var(--olv-mute);
}

.nci--olive .olv-err {
  margin-top: 1.4cqw;
  font-size: max(12px, 3cqw);
  color: var(--olv-terra);
}

.nci--olive .olv-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3cqw;
  margin-top: 2.4cqw;
}

.nci--olive .olv-choice-b,
.nci--olive .olv-tag,
.nci--olive .olv-step-ctl button {
  border: 1px solid var(--olv-hair);
  background: rgba(253, 251, 245, 0.6);
  color: var(--olv-ink-2);
}

.nci--olive .olv-choice-b {
  padding: 2.6cqw 1cqw;
  border-radius: 999px;
  font-family: var(--olv-disp);
  font-size: 3.8cqw;
  font-style: italic;
  font-weight: 500;
}

.nci--olive.nci--lang-zh .olv-choice-b {
  font-family: var(--olv-zh);
  font-size: 3.4cqw;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.nci--olive .olv-choice-b[aria-pressed='true'],
.nci--olive .olv-tag[aria-pressed='true'] {
  border-color: var(--olv-olive);
  background: var(--olv-olive);
  color: #fbf8ef;
}

.nci--olive .olv-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  margin-top: 5cqw;
}

.nci--olive .olv-count .olv-fl {
  margin-top: 0;
}

.nci--olive .olv-step-ctl {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
}

.nci--olive .olv-step-ctl button {
  width: 8cqw;
  height: 8cqw;
  padding: 0;
  border-radius: 50%;
  font-family: var(--olv-disp);
  font-size: 4.6cqw;
  line-height: 1;
}

.nci--olive .olv-step-ctl button:disabled {
  opacity: 0.4;
}

.nci--olive .olv-step-ctl span {
  min-width: 4cqw;
  text-align: center;
  font-family: var(--olv-disp);
  font-size: 5.4cqw;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--olv-olive);
}

.nci--olive .olv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2cqw;
  margin-top: 2.4cqw;
}

.nci--olive .olv-tag {
  padding: 1.6cqw 3.2cqw;
  border-radius: 999px;
  font-family: var(--olv-body);
  font-size: 3cqw;
}

.nci--olive .olv-tag:disabled {
  opacity: 0.45;
}

.nci--olive .olv-submit {
  align-self: center;
  margin-top: 8cqw;
  padding: 3.4cqw 9cqw;
  border: none;
  border-radius: 999px;
  background: var(--olv-olive);
  font-family: var(--olv-disp);
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: #fbf8ef;
  box-shadow: 0 1cqw 3cqw rgba(79, 90, 43, 0.22);
}

.nci--olive.nci--lang-zh .olv-submit {
  font-family: var(--olv-zh);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.nci--olive .olv-submit:disabled {
  opacity: 0.6;
  box-shadow: none;
}

.nci--olive .olv-thanks {
  position: relative;
  z-index: 2;
  text-align: center;
}

.nci--olive .olv-thanks-art {
  width: 36cqw;
  margin: 0 auto;
}

.nci--olive .olv-thanks-t {
  margin-top: 3cqw;
  padding: 0 2cqw 1.6cqw;
  font-family: var(--olv-script);
  font-size: 13cqw;
  line-height: 1.2;
  background: var(--olv-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nci--olive.nci--lang-zh .olv-thanks-t {
  font-family: var(--olv-zh);
  font-size: 7cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.nci--olive .olv-thanks-b {
  margin-top: 2cqw;
  font-size: 3.5cqw;
  line-height: 1.75;
  color: var(--olv-ink-2);
}

.nci--olive .olv-req {
  margin-left: 0.4em;
  color: var(--olv-terra);
}

.nci--olive .olv-err--server {
  margin-top: 6cqw;
  text-align: center;
}

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

.nci--olive .olv-done-when {
  margin-top: 1.6cqw;
  font-size: 2.9cqw;
  color: var(--olv-mute);
}

.nci--olive .olv-textbtn {
  margin-top: 6cqw;
  padding: 0 0 0.8cqw;
  border: none;
  border-bottom: 1px solid var(--olv-gold);
  background: none;
  font-family: var(--olv-disp);
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--olv-gold-ink);
}

/* ───── wishes, and the last landscape ───── */

.nci--olive .olv-wishform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2cqw 4cqw;
  margin: 8cqw var(--olv-g) 0;
}

.nci--olive .olv-wish-name {
  grid-column: 1 / -1;
}

.nci--olive .olv-wish-err {
  grid-column: 1 / -1;
  margin: 0;
}

.nci--olive .olv-wish-post {
  padding: 2.4cqw 5.4cqw;
  border: 1px solid var(--olv-olive);
  border-radius: 999px;
  background: transparent;
  font-family: var(--olv-disp);
  font-size: 3cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--olv-olive);
}

.nci--olive.nci--lang-zh .olv-wish-post {
  font-family: var(--olv-zh);
  font-weight: 400;
}

.nci--olive .olv-wish-post:disabled {
  opacity: 0.55;
}

.nci--olive .olv-wishes {
  margin: 8cqw var(--olv-g) 0;
}

.nci--olive .olv-wish {
  padding: 5cqw 0;
  border-top: 1px solid var(--olv-hair-2);
  text-align: center;
}

.nci--olive .olv-wish:last-child {
  border-bottom: 1px solid var(--olv-hair-2);
}

.nci--olive .olv-wish-t {
  font-family: var(--olv-disp);
  font-size: 4.4cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--olv-ink);
  overflow-wrap: anywhere;
}

.nci--olive.nci--lang-zh .olv-wish-t {
  font-family: var(--olv-zh);
  font-size: 3.5cqw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.04em;
}

.nci--olive .olv-wish-from {
  margin-top: 1.8cqw;
  font-family: var(--olv-disp);
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olv-gold-ink);
}

.nci--olive .olv-wish-empty {
  padding: 6cqw 0;
  text-align: center;
  font-size: 3.3cqw;
  font-style: italic;
  color: var(--olv-mute);
}

/* The page closes under the olive trees: the kit's canopy reaches in from the top left and the same
   canopy, mirrored, from the top right, the two meeting over the parting words, and the ribbon with
   the date is the last thing on the page. The floating buttons rest in the paper under it. */
.nci--olive .olv-coda {
  position: relative;
  margin-top: 16cqw;
  padding: 40cqw 0 4cqw;
  text-align: center;
}

.nci--olive .olv-coda-tl,
.nci--olive .olv-coda-tr {
  position: absolute;
  z-index: 0;
  top: 0;
  width: 60cqw;
}

.nci--olive .olv-coda-tl {
  left: -4cqw;
}

.nci--olive .olv-coda-tr {
  right: -4cqw;
  transform: scaleX(-1);
}

.nci--olive .olv-coda-script {
  position: relative;
  z-index: 2;
  padding: 0 6cqw 2cqw;
  font-family: var(--olv-script);
  font-size: 17cqw;
  line-height: 1.1;
  background: var(--olv-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: var(--olv-gold-ink);
}

.nci--olive .olv-coda-line {
  position: relative;
  z-index: 2;
  padding: 0 var(--olv-g);
  font-family: var(--olv-disp);
  font-size: 4.2cqw;
  font-style: italic;
  font-weight: 500;
  color: var(--olv-ink-2);
}

.nci--olive.nci--lang-zh .olv-coda-line {
  font-family: var(--olv-zh);
  font-size: 3.6cqw;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.nci--olive .olv-coda-ribbon {
  z-index: 2;
  width: 64cqw;
  margin-top: 7cqw;
}

/* ───── Guest cover overlay ─────
   The cover painting laid out against the phone's height: the photograph is sized in cqh, so the two
   of them stay as large as the screen allows, and the names, the ribbon and the way in sit on the
   paper between it and the hills. */

.nci-cover--olive {
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8.5cqh 0 0;
  overflow: hidden;
  background: var(--olv-paper);
  color: var(--olv-ink);
  font-family: var(--olv-body);
  font-variant-numeric: lining-nums;
  text-align: center;
}

.nci-cover--olive::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--olv-paper-url) 0 0 / 78cqw auto repeat;
}

.nci-cover--olive .olv-cv-sky {
  position: absolute;
  top: 0;
  left: -6cqw;
  width: 112cqw;
}

/* In the flow, with the names and the ribbon under it: on a tall phone it is as large as the cover
   allows; on a short one it gives up height first, keeping its proportions, so the words and the way in
   stay on the paper above the hills. The pseudo-element after the text reserves the hills' dense part. */
.nci-cover--olive .olv-cv-photo {
  position: relative;
  z-index: 1;
  flex: 0 1 51cqh;
  min-height: 24cqh;
  aspect-ratio: 3 / 4;
  max-width: 80cqw;
  overflow: hidden;
}

.nci-cover--olive::after {
  content: '';
  flex: 0 0 24cqw;
}

.nci-cover--olive .olv-cv-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.nci-cover--olive .olv-cv-canopy {
  position: absolute;
  z-index: 2;
  top: -2cqw;
  right: -6cqw;
  width: 44cqw;
  transform: scaleX(-1);
}

.nci-cover--olive .olv-cv-line {
  top: max(5cqw, 3cqh);
}

.nci-cover--olive .olv-cv-text {
  position: relative;
  z-index: 3;
  flex: none;
  align-self: stretch;
  margin-top: 3.4cqw;
  padding: 0 5cqw;
}

.nci-cover--olive .olv-cv-names {
  font-size: 12cqw;
}

.nci-cover--olive .olv-cv-open {
  position: relative;
  display: block;
  width: 70cqw;
  margin: 1cqw auto 0;
  padding: 0;
  border: none;
  background: none;
  transition: transform 300ms var(--nci-ease);
}

.nci-cover--olive .olv-cv-open:hover {
  transform: translateY(-0.8cqw);
}

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

.nci-cover--olive .olv-cv-hint {
  margin-top: 2.6cqw;
  font-family: var(--olv-disp);
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--olv-gold-ink);
}

.nci-cover--olive.olv-cv--zh .olv-cv-hint {
  font-family: var(--olv-zh);
  font-weight: 400;
  letter-spacing: 0.16em;
}

.nci-cover--olive .olv-cv-hills {
  position: absolute;
  z-index: 1;
  bottom: -5cqw;
  left: -4cqw;
  width: 108cqw;
}

/* Opening: the ribbon lifts away and the painting gives way to the page, which begins with it. */
.nci-cover--olive.olv-cv--opening {
  animation: olv-open 700ms var(--nci-ease) forwards;
}

.nci-cover--olive.olv-cv--opening .olv-cv-open {
  animation: olv-lift 700ms var(--nci-ease) forwards;
}

@keyframes olv-open {
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes olv-lift {
  to {
    transform: translateY(-6cqw) scale(1.08);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--olive.olv-cv--opening,
  .nci-cover--olive.olv-cv--opening .olv-cv-open {
    animation: none;
  }

  .nci-cover--olive .olv-cv-open {
    transition: none;
  }
}

/* ───── Floating bar — two pills at the foot of the right margin ─────
   Parked bottom right, where the page's closing hills are and where the centred type never reaches;
   cream with a gold hairline, like the cards. */

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

.nci-float--olive button {
  padding: 9px 13px;
  border: 1px solid rgba(166, 125, 53, 0.55);
  border-radius: 999px;
  background: rgba(252, 249, 241, 0.94);
  font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #4f5a2b;
  box-shadow: 0 3px 12px rgba(78, 66, 32, 0.16);
  backdrop-filter: blur(6px);
}

.nci-float--olive .nci-float-dot {
  background: #93a36f;
}

.nci-float--olive .nci-float-music[aria-pressed='true'] .nci-float-dot {
  background: #9a4f28;
}

.nci-float--olive .nci-float-share {
  border-color: #4f5a2b;
  background: #4f5a2b;
  color: #fbf8ef;
}