/* Nicecard demo — "Wild Stem" (野茎) invitation style. Everything is scoped under .nci--stem,
   .nci-cover--stem and .nci-float--stem, and every class of this module carries the stm- prefix.
   The page is a size container, so every measurement is in cqw and the painting keeps its proportions
   in the 372px phone frame, the 390px editor canvas and a 390px phone.
   The material is cold-press watercolour paper — the kit's own opaque tile — and every ornament is a
   piece of the owner's watercolour kit, set as an <img> (see Art in stem.js; a piece laid over a
   photograph's edge is painted from a ::before instead, see Over) and never drawn here. Past the cover
   the photographs are set into the painting (.stm-wash): their edges thin into the paper and they are
   printed into its grain, and the kit crosses over them. What
   this sheet adds is type and arrangement: a brass script for the names, a quiet garalde for the words,
   and a left axis (--stm-g) that every block hangs off while the paintings grow in from the edges.
   Colours that carry a word clear 4.5:1 on the paper: --stm-ink 11.2:1, --stm-ink-2 7.3:1, --stm-sage 5.7:1,
   --stm-gold-ink 5:1, --stm-coral-ink 5:1. The brass gradient on the names and the big numerals is
   display-size only. The smallest informative type is 2.6cqw (10px at 390). */

.nci--stem,
.nci-cover--stem,
.nci-float--stem {
  --stm-paper: #f6f2e8;
  --stm-card: #fbf9f3;
  --stm-ink: #34352a;
  --stm-ink-2: #4f5140;
  --stm-sage: #56643f;
  --stm-sage-2: #93a57f;
  --stm-hair-2: rgba(52, 53, 42, 0.11);
  --stm-gold: #a67d37;
  --stm-gold-ink: #85622a;
  --stm-gold-grad: linear-gradient(104deg, #8b6224 0%, #c39a50 30%, #a47a33 52%, #cfae66 74%, #946b2a 100%);
  --stm-coral: #e07e5c;
  --stm-coral-ink: #a84b31;
  --stm-g: 10cqw;
  --stm-tile: url('assets/watercolor/watercolor-paper.webp');
  /* A loose hand for the names (the CJK fallback is a brush hand, sized separately under lang-zh), a
     garalde with real italics for the words, and Cormorant for the small capitals and the numerals. */
  --stm-script: 'Mrs Saint Delafield', 'Long Cang', cursive;
  --stm-serif: 'EB Garamond', 'Noto Serif SC', Georgia, serif;
  --stm-disp: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --stm-zh: 'Noto Serif SC', 'Songti SC', serif;
}

/* The paper tile is sized as a share of the page's width (a percentage background size reads the
   element's own width), so the tooth has the same grain in the phone frame, the editor and a phone. */
.nci--stem {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--stm-paper) var(--stm-tile) 0 0 / 78% auto repeat;
  color: var(--stm-ink);
  font-family: var(--stm-serif);
  --nci-bg: var(--stm-paper);
  --nci-soft: #ece6d8;
  --nci-slot-line: rgba(86, 100, 63, 0.5);
  --nci-slot-ink: var(--stm-ink-2);
  --nci-hint: rgba(133, 98, 42, 0.5);
  --nci-sel: #a84b31;
}

.nci--stem .nci-section {
  display: flow-root;
  padding: 0 0 20cqw;
}

.nci--stem .nci-s-cover {
  padding: 0;
}

.nci--stem .nci-s-wishes {
  padding-bottom: 6cqw;
}

/* ───── the kit ───── */

.nci--stem .stm-art,
.nci-cover--stem .stm-art {
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* A piece laid over a photograph's edge (Over in stem.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--stem .stm-over {
  position: absolute;
  display: block;
  pointer-events: none;
}

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

/* A photograph set into the paper rather than laid on it: its edges thin out the way the edge of a wash
   does — a little more at the head and the foot than at the sides — and it is printed into the paper,
   so its whites take the paper's tone and tooth. The mask and the blend are on the picture, not the
   slot, so the editor's outline around the slot is never masked away; and no slot that carries it may
   start a stacking context of its own (no z-index), or the blend would have no paper to print into.
   Every frame, the cover included, is a little off the photographs' own 3:4, so the crop tool can move
   a picture without zooming in first. */
.nci--stem .stm-wash {
  background-color: transparent;
}

.nci--stem .stm-wash img {
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

/* The window ledge melts away on every side: its white wall becomes the page. */
.nci--stem .stm-wash--round img {
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}

/* One half of the wildflower border in a clipped box: the image is the whole sheet, pinned to the box's
   own side, so only that side's stem shows. The foot fades out rather than stopping on a cut. */
.nci--stem .stm-stems,
.nci-cover--stem .stm-stems {
  position: absolute;
  display: block;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}

.nci--stem .stm-stems .stm-art,
.nci-cover--stem .stm-stems .stm-art {
  position: absolute;
  top: 0;
  width: 118cqw;
}

.nci--stem .stm-stems--l .stm-art,
.nci-cover--stem .stm-stems--l .stm-art {
  left: 0;
}

.nci--stem .stm-stems--r .stm-art,
.nci-cover--stem .stm-stems--r .stm-art {
  right: 0;
}

/* A corner piece is painted to meet the edges of a sheet, so its cut edges only look right against a
   real edge of the page. The side edges here always are one; the bottom (or the top, for a piece that
   hangs from above) usually is not, and fades into the paper instead of stopping on a straight line. */
.nci--stem .stm-cv-roses,
.nci-cover--stem .stm-cv-roses,
.nci--stem .stm-pair-ferns,
.nci--stem .stm-sheet-bleed {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
}

.nci--stem .stm-letter-leaves {
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%);
  mask-image: linear-gradient(to top, #000 60%, transparent 100%);
}

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

.nci--stem .stm-caps,
.nci-cover--stem .stm-caps {
  font-family: var(--stm-disp);
  font-size: 2.75cqw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stm-sage);
}

.nci--stem.nci--lang-zh .stm-caps,
.nci-cover--stem.stm-lang-zh .stm-caps {
  font-family: var(--stm-zh);
  font-size: 2.8cqw;
  font-weight: 400;
  letter-spacing: 0.34em;
}

.nci--stem .stm-head {
  position: relative;
  z-index: 2;
  padding: 0 var(--stm-g);
}

.nci--stem .stm-title {
  margin-top: 2.2cqw;
  font-family: var(--stm-disp);
  font-size: 8.4cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--stm-ink);
  text-wrap: balance;
}

.nci--stem.nci--lang-zh .stm-title {
  font-family: var(--stm-zh);
  font-size: 6cqw;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  /* Break a Chinese heading at its punctuation, not in the middle of a word; a heading with no
     punctuation that is too long for the line still wraps. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Brass script. The swashes of a script face run outside its box, and a background clipped to the text
   only paints inside the box, so the box is padded out and pulled back by the same amount. */
.nci--stem .stm-name,
.nci-cover--stem .stm-name {
  background: var(--stm-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: var(--stm-gold);
}

.nci--stem .stm-names,
.nci-cover--stem .stm-names {
  position: relative;
  z-index: 4;
  margin: 3cqw 0 0;
  padding: 0 4cqw 0 13cqw;
  font-weight: 400;
}

.nci--stem .stm-name,
.nci-cover--stem .stm-name {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: -0.12em -0.4em -0.2em;
  padding: 0.12em 0.4em 0.2em;
  font-family: var(--stm-script);
  font-size: 17.5cqw;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.nci--stem .stm-name--b,
.nci-cover--stem .stm-name--b {
  margin-left: calc(15cqw - 0.4em);
}

.nci--stem .stm-amp,
.nci-cover--stem .stm-amp {
  margin-right: 0.12em;
  font-size: 0.62em;
  font-style: normal;
}

.nci--stem.nci--lang-zh .stm-name,
.nci-cover--stem.stm-lang-zh .stm-name {
  font-size: 13cqw;
  line-height: 1.24;
  letter-spacing: 0.04em;
}

.nci--stem.nci--lang-zh .stm-name--b,
.nci-cover--stem.stm-lang-zh .stm-name--b {
  margin-left: calc(12cqw - 0.4em);
}

.nci--stem.nci--lang-zh .stm-amp,
.nci-cover--stem.stm-lang-zh .stm-amp {
  margin-right: 0.3em;
  font-size: 0.5em;
}

/* The small separators between the parts of a date line: a coral bud of pigment, not a character, so a
   screen reader reads the parts as a list of words. */
.nci--stem .stm-dot,
.nci-cover--stem .stm-dot {
  display: inline-block;
  width: 1.1cqw;
  height: 1.1cqw;
  margin: 0 2.2cqw;
  vertical-align: 0.28em;
  border-radius: 50%;
  background: var(--stm-coral);
  opacity: 0.85;
}

/* ═════════ cover ═════════
   Geometry shared by the section and the guest overlay, so the overlay lifts off an identical screen.
   The photograph is 62 × 88 — a touch narrower than the photo's own 3:4, so the crop tool has room to
   move it sideways — hung at 15cqw; the left stem crosses only the first 12cqw of it — the wall and
   the outer edge of her bouquet, well clear of both faces — and the right stem is behind the
   photograph and only shows past its right edge. */

.nci--stem .stm-cv,
.nci-cover--stem .stm-cv {
  position: relative;
  padding: 6.4cqw 0 18cqw;
}

.nci--stem .stm-cv-sky,
.nci-cover--stem .stm-cv-sky {
  position: absolute;
  z-index: 0;
  top: -4cqw;
  left: -8cqw;
  width: 116cqw;
  opacity: 0.78;
}

.nci--stem .stm-cv-stem-l,
.nci-cover--stem .stm-cv-stem-l {
  z-index: 3;
  top: 12cqw;
  left: -5cqw;
  width: 32cqw;
  height: 140cqw;
  /* Gone by the foot of the photograph, so the names below it are set on clear paper and no stem runs
     through the swash of the first letter. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 67%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 67%);
}

.nci--stem .stm-cv-stem-r,
.nci-cover--stem .stm-cv-stem-r {
  z-index: 1;
  top: -2cqw;
  right: -5cqw;
  width: 36cqw;
  height: 140cqw;
}

.nci--stem .stm-cv-roses,
.nci-cover--stem .stm-cv-roses {
  position: absolute;
  z-index: 1;
  right: -7cqw;
  bottom: -2cqw;
  width: 62cqw;
}

.nci--stem .stm-cv-kicker,
.nci-cover--stem .stm-cv-kicker {
  position: relative;
  z-index: 4;
  padding: 0 4cqw 0 15cqw;
}

.nci--stem .stm-cv-photo,
.nci-cover--stem .stm-cv-photo {
  position: relative;
  z-index: 2;
  width: 62cqw;
  height: 88cqw;
  margin: 3cqw 0 0 15cqw;
  box-shadow: 0 0.6cqw 2.4cqw rgba(60, 50, 30, 0.12);
}

.nci--stem .stm-cv-when,
.nci-cover--stem .stm-cv-when {
  position: relative;
  z-index: 4;
  margin-top: 4.4cqw;
  padding: 0 4cqw 0 15cqw;
  font-family: var(--stm-disp);
  font-size: 3.3cqw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stm-ink-2);
  font-variant-numeric: lining-nums;
}

.nci--stem .stm-cv-where,
.nci-cover--stem .stm-cv-where {
  position: relative;
  z-index: 4;
  max-width: 64cqw;
  margin-top: 1.4cqw;
  padding-left: 15cqw;
  font-family: var(--stm-serif);
  font-size: 3.5cqw;
  font-style: italic;
  line-height: 1.5;
  color: var(--stm-ink-2);
}

.nci--stem .stm-cv-lede {
  position: relative;
  z-index: 4;
  max-width: 70cqw;
  margin-top: 7cqw;
  padding-left: 15cqw;
  font-size: 3.6cqw;
  line-height: 1.7;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-cv-when,
.nci-cover--stem.stm-lang-zh .stm-cv-when {
  font-family: var(--stm-zh);
  font-size: 3.1cqw;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.nci--stem.nci--lang-zh .stm-cv-where,
.nci-cover--stem.stm-lang-zh .stm-cv-where,
.nci--stem.nci--lang-zh .stm-cv-lede {
  font-family: var(--stm-zh);
  font-size: 3.2cqw;
  font-style: normal;
  letter-spacing: 0.04em;
}

/* ═════════ story ═════════ */

.nci--stem .nci-s-story {
  padding-top: 8cqw;
}

.nci--stem .stm-letter-leaves {
  position: absolute;
  z-index: 0;
  top: -16cqw;
  right: -7cqw;
  width: 46cqw;
}

.nci--stem .nci-s-story .stm-head {
  padding-right: 34cqw;
}

.nci--stem .stm-letter {
  position: relative;
  z-index: 1;
  margin-top: 6cqw;
  padding: 0 var(--stm-g);
  font-size: 3.9cqw;
  line-height: 1.75;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-letter {
  font-size: 3.5cqw;
  line-height: 2;
  letter-spacing: 0.04em;
}

.nci--stem .stm-sign {
  position: relative;
  z-index: 1;
  margin-top: 4cqw;
  padding-left: calc(var(--stm-g) + 22cqw);
  font-family: var(--stm-disp);
  font-size: 4.2cqw;
  font-style: italic;
  color: var(--stm-gold-ink);
}

.nci--stem.nci--lang-zh .stm-sign {
  font-family: var(--stm-zh);
  font-size: 3.2cqw;
  font-style: normal;
  letter-spacing: 0.12em;
}

/* The signature screen: the border at full size (108 wide, so 162 tall) with the photograph standing in
   its channel. The painting is laid over the photograph, so the nearest leaves cross its edges. */
.nci--stem .stm-channel {
  position: relative;
  height: 152cqw;
  margin-top: 10cqw;
}

.nci--stem .stm-channel-art {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100cqw;
}

.nci--stem .stm-channel-img {
  position: absolute;
  z-index: 1;
  top: 13cqw;
  left: 25cqw;
  width: 50cqw;
  height: 106cqw;
}

.nci--stem .stm-channel-cap {
  position: absolute;
  z-index: 3;
  top: 124cqw;
  left: 27cqw;
  right: 27cqw;
  font-family: var(--stm-disp);
  font-size: 3.9cqw;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-channel-cap {
  font-family: var(--stm-zh);
  font-size: 3.1cqw;
  font-style: normal;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.nci--stem .stm-pair {
  position: relative;
  margin-top: 4cqw;
  padding: 0 var(--stm-g) 6cqw;
}

.nci--stem .stm-pair-ferns {
  position: absolute;
  z-index: 0;
  left: -5cqw;
  bottom: -10cqw;
  width: 46cqw;
}

.nci--stem .stm-who {
  position: relative;
  z-index: 1;
  max-width: 70cqw;
  text-wrap: pretty;
}

.nci--stem .stm-who--b {
  margin: 9cqw 0 0 32cqw;
  max-width: 50cqw;
}

.nci--stem .stm-who-role {
  font-family: var(--stm-disp);
  font-size: 2.75cqw;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--stm-sage);
}

.nci--stem.nci--lang-zh .stm-who-role {
  font-family: var(--stm-zh);
  font-weight: 400;
  letter-spacing: 0.4em;
}

.nci--stem .stm-who-name {
  margin-top: 0.6cqw;
  font-family: var(--stm-disp);
  font-size: 7.4cqw;
  font-weight: 500;
  line-height: 1.2;
  color: var(--stm-gold-ink);
}

.nci--stem.nci--lang-zh .stm-who-name {
  font-family: var(--stm-zh);
  font-size: 5.4cqw;
  letter-spacing: 0.12em;
}

.nci--stem .stm-who-line {
  margin-top: 1.6cqw;
  font-size: 3.6cqw;
  line-height: 1.65;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-who-line {
  font-size: 3.3cqw;
  line-height: 1.9;
}

/* ═════════ countdown ═════════ */

.nci--stem .stm-cd-sky {
  position: absolute;
  z-index: 0;
  top: -12cqw;
  left: -10cqw;
  width: 120cqw;
  opacity: 0.72;
}

.nci--stem .stm-say {
  position: relative;
  z-index: 2;
  margin-top: 3cqw;
  padding: 0 var(--stm-g);
  font-size: 3.8cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-say {
  font-family: var(--stm-zh);
  font-size: 3.3cqw;
  font-style: normal;
  line-height: 1.9;
}

.nci--stem .stm-cd {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2cqw 6cqw;
  margin-top: 5cqw;
  padding: 0 var(--stm-g);
}

.nci--stem .stm-cd-days {
  display: flex;
  flex-direction: column;
}

.nci--stem .stm-cd-n {
  display: block;
  margin: -0.1em -0.1em 0;
  padding: 0.1em 0.1em 0;
  font-family: var(--stm-disp);
  font-size: 27cqw;
  font-weight: 500;
  line-height: 0.86;
  font-variant-numeric: lining-nums tabular-nums;
  background: var(--stm-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nci--stem .stm-cd-u {
  display: block;
  margin-top: 1.4cqw;
  font-family: var(--stm-disp);
  font-size: 2.75cqw;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stm-sage);
}

.nci--stem.nci--lang-zh .stm-cd-u {
  font-family: var(--stm-zh);
  font-weight: 400;
}

.nci--stem .stm-cd-rest {
  display: flex;
  gap: 5cqw;
  padding-bottom: 0.4cqw;
}

.nci--stem .stm-cd-part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nci--stem .stm-cd-m {
  font-family: var(--stm-disp);
  font-size: 9cqw;
  font-weight: 500;
  line-height: 0.9;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--stm-ink);
}

.nci--stem .stm-cd-done {
  margin-top: 5cqw;
  padding: 0 var(--stm-g);
  font-family: var(--stm-disp);
  font-size: 9cqw;
  font-style: italic;
  color: var(--stm-gold-ink);
}

.nci--stem .stm-dates {
  position: relative;
  z-index: 2;
  margin-top: 5cqw;
  padding: 0 var(--stm-g);
  font-family: var(--stm-disp);
  font-size: 3.4cqw;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: var(--stm-ink-2);
  font-variant-numeric: lining-nums;
}

.nci--stem.nci--lang-zh .stm-dates {
  font-family: var(--stm-zh);
  font-size: 3.1cqw;
  font-weight: 400;
}

/* A photograph set into a landscape: sky behind it, every edge of the picture thinning into that sky
   like a wash, and the hills laid over its foot. */
.nci--stem .stm-land {
  position: relative;
  height: 122cqw;
  margin-top: 10cqw;
}

.nci--stem .stm-land-sky {
  position: absolute;
  z-index: 0;
  top: -8cqw;
  left: -14cqw;
  width: 128cqw;
  opacity: 0.85;
  transform: scaleX(-1);
}

.nci--stem .stm-land-img {
  position: absolute;
  z-index: 1;
  top: 4cqw;
  left: 19cqw;
  width: 62cqw;
  height: 88cqw;
  background-color: transparent;
}

.nci--stem .stm-land-img img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 70%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 70%, transparent 96%);
  mask-composite: intersect;
}

.nci--stem .stm-land-hills {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: -8cqw;
  width: 116cqw;
}

.nci--stem .stm-season {
  position: relative;
  z-index: 2;
  margin-top: 5cqw;
  padding: 0 var(--stm-g);
}

.nci--stem .stm-season-t {
  margin-top: 1.6cqw;
  font-family: var(--stm-disp);
  font-size: 4.3cqw;
  font-style: italic;
  line-height: 1.5;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-season-t {
  font-family: var(--stm-zh);
  font-size: 3.3cqw;
  font-style: normal;
  line-height: 1.9;
}

/* ═════════ gallery ═════════ */

.nci--stem .stm-verse {
  margin-top: 4cqw;
  padding: 0 var(--stm-g);
  font-family: var(--stm-disp);
  font-size: 4.3cqw;
  font-style: italic;
  line-height: 1.5;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-verse {
  font-family: var(--stm-zh);
  font-size: 3.3cqw;
  font-style: normal;
  line-height: 1.95;
}

.nci--stem figure {
  margin: 0;
}

.nci--stem .stm-cap {
  position: relative;
  z-index: 3;
  text-wrap: pretty;
  font-family: var(--stm-disp);
  font-size: 3.8cqw;
  font-style: italic;
  line-height: 1.45;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-cap {
  font-family: var(--stm-zh);
  font-size: 3cqw;
  font-style: normal;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* Her portrait in a thicket: the right-hand stem of the border rises over its right edge and the ferns
   grow up across its foot, both well away from her face; the caption sits in the clearing they leave. */
.nci--stem .stm-g1 {
  position: relative;
  margin-top: 8cqw;
  padding: 0 0 0 var(--stm-g);
}

.nci--stem .stm-g1-img {
  width: 58cqw;
  height: 82cqw;
}

.nci--stem .stm-g1-stem {
  top: -8cqw;
  right: 6cqw;
  width: 32cqw;
  height: 112cqw;
}

.nci--stem .stm-g1-ferns {
  top: 46cqw;
  left: -7cqw;
  width: 44cqw;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
}

.nci--stem .stm-g1-cap {
  max-width: 30cqw;
  margin: 3cqw 0 0 38cqw;
}

/* The pair steps down the page, the doorway overlapping the window seat by the width of their two soft
   edges, and the garden roses spill over the second one's lower corner from the page edge. */
.nci--stem .stm-g2 {
  position: relative;
  height: 108cqw;
  margin-top: 10cqw;
}

.nci--stem .stm-g2-a {
  position: absolute;
  top: 0;
  left: 9cqw;
  width: 46cqw;
  height: 66cqw;
}

.nci--stem .stm-g2-b {
  position: absolute;
  top: 38cqw;
  right: 4cqw;
  width: 45cqw;
  height: 64cqw;
}

.nci--stem .stm-g2-roses {
  right: -8cqw;
  top: 70cqw;
  width: 48cqw;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
}

.nci--stem .stm-g2-cap {
  position: absolute;
  top: 72cqw;
  left: var(--stm-g);
  width: 34cqw;
}

/* The window ledge melts into the page on every side, and the left-hand stem rises behind it, showing
   through the wall it has become. */
.nci--stem .stm-g3 {
  position: relative;
  margin-top: 4cqw;
  padding-top: 4cqw;
}

.nci--stem .stm-g3-stem {
  top: -6cqw;
  left: -4cqw;
  width: 32cqw;
  height: 104cqw;
}

.nci--stem .stm-g3-img {
  width: 88cqw;
  height: 76cqw;
  margin-left: 10cqw;
}

.nci--stem .stm-g3-cap {
  max-width: 54cqw;
  margin: -4cqw 0 0 36cqw;
}

/* ═════════ schedule ═════════ */

/* One stem of the border rises the height of the list down the page's left edge; each painted object
   stands in it, its right half over the stem's flowers, and the hour and the event hang beside it. */
.nci--stem .stm-run {
  position: relative;
  margin-top: 6cqw;
  padding: 0 6cqw 0 8cqw;
}

.nci--stem .stm-run-stem {
  top: -8cqw;
  left: -6cqw;
  width: 32cqw;
  height: calc(100% + 12cqw);
}

.nci--stem .stm-run-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4cqw;
  min-height: 36cqw;
}

.nci--stem .stm-run-obj {
  display: flex;
  flex: 0 0 34cqw;
  align-items: center;
  justify-content: center;
  height: 34cqw;
}

.nci--stem .stm-run-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The flower arch is tall and narrow; the plate is wide and low. Each is given the room its shape needs
   to read at the same weight as the others. */
.nci--stem .stm-run-art--arch {
  height: 112%;
}

.nci--stem .stm-run-art--dinner-plate {
  width: 108%;
}

.nci--stem .stm-run-txt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding-top: 0.6cqw;
  border-top: 1px solid rgba(133, 98, 42, 0.28);
}

.nci--stem .stm-run-at {
  font-family: var(--stm-disp);
  font-size: 8cqw;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--stm-gold-ink);
}

.nci--stem .stm-run-row.is-vow .stm-run-at {
  color: var(--stm-coral-ink);
}

.nci--stem .stm-run-t {
  margin-top: 1.4cqw;
  font-size: 3.7cqw;
  line-height: 1.45;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-run-t {
  font-family: var(--stm-zh);
  font-size: 3.3cqw;
  letter-spacing: 0.05em;
}

.nci--stem .stm-foot {
  margin-top: 6cqw;
  padding: 0 var(--stm-g);
  font-family: var(--stm-disp);
  font-size: 3.9cqw;
  font-style: italic;
  line-height: 1.55;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-foot {
  font-family: var(--stm-zh);
  font-size: 3.1cqw;
  font-style: normal;
  line-height: 1.9;
}

.nci--stem .stm-linkrow,
.nci--stem .stm-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 3cqw;
  margin-top: 5cqw;
  padding: 0 var(--stm-g);
}

.nci--stem .stm-link {
  display: inline-flex;
  align-items: center;
  padding: 2.2cqw 4.6cqw;
  border: 1px solid rgba(133, 98, 42, 0.55);
  border-radius: 999px;
  font-family: var(--stm-disp);
  font-size: 3.1cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stm-gold-ink);
  background: rgba(251, 249, 243, 0.6);
}

.nci--stem.nci--lang-zh .stm-link {
  font-family: var(--stm-zh);
  font-size: 3cqw;
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* ═════════ venue ═════════
   The garden gate: sky across the head of the screen and a stem of the border rising up each side of
   the page, the card standing in the channel between them with its edges over their inner leaves. */

.nci--stem .stm-gate {
  position: relative;
  padding-top: 20cqw;
}

.nci--stem .stm-gate-sky {
  position: absolute;
  z-index: 0;
  top: -6cqw;
  left: -8cqw;
  width: 116cqw;
  opacity: 0.8;
}

.nci--stem .stm-gate-stem {
  z-index: 1;
  top: 26cqw;
  width: 30cqw;
  height: calc(100% - 20cqw);
}

.nci--stem .stm-gate-stem--l {
  left: -8cqw;
}

.nci--stem .stm-gate-stem--r {
  right: -8cqw;
}

.nci--stem .stm-gate-head {
  text-align: center;
}

.nci--stem .stm-vcard {
  position: relative;
  z-index: 2;
  margin: 8cqw 13cqw 0;
  padding: 6.4cqw 6cqw 6cqw;
  background: var(--stm-card) var(--stm-tile) 0 0 / 120% auto;
  box-shadow: 0 1cqw 5cqw rgba(64, 54, 34, 0.14), 0 0 0 1px rgba(133, 98, 42, 0.12);
}

.nci--stem .stm-vcard-name {
  font-family: var(--stm-disp);
  font-size: 6.4cqw;
  font-weight: 500;
  line-height: 1.2;
  color: var(--stm-ink);
}

.nci--stem.nci--lang-zh .stm-vcard-name {
  font-family: var(--stm-zh);
  font-size: 4.8cqw;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.nci--stem .stm-vcard-addr {
  margin-top: 1.6cqw;
  font-size: 3.5cqw;
  line-height: 1.55;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-vcard-addr {
  font-family: var(--stm-zh);
  font-size: 3.1cqw;
}

.nci--stem .stm-mapwrap {
  margin-top: 5cqw;
}

.nci--stem .nci-map {
  height: 38cqw;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(86, 100, 63, 0.08) 1px, transparent 1px) 0 0 / 9cqw 9cqw,
    linear-gradient(rgba(86, 100, 63, 0.08) 1px, transparent 1px) 0 0 / 9cqw 9cqw,
    #e8eadb;
  box-shadow: inset 0 0 0 1px rgba(86, 100, 63, 0.18);
}

.nci--stem .nci-map-road {
  top: 58%;
  left: -10%;
  right: -10%;
  height: 2.6cqw;
  background: #f8f5ec;
  transform: rotate(-9deg);
  box-shadow: 0 0 0 1px rgba(86, 100, 63, 0.14);
}

.nci--stem .nci-map-pin {
  top: 30%;
  left: 55%;
  width: 6cqw;
  height: 6cqw;
  background: var(--stm-coral);
  box-shadow: 0 0.6cqw 1.6cqw rgba(168, 75, 49, 0.35);
}

.nci--stem .stm-vcard .stm-maps {
  margin-top: 4cqw;
  padding: 0;
}

.nci--stem .stm-note {
  margin-top: 7cqw;
  padding: 0 var(--stm-g);
  font-family: var(--stm-disp);
  font-size: 4cqw;
  font-style: italic;
  line-height: 1.55;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-note {
  font-family: var(--stm-zh);
  font-size: 3.2cqw;
  font-style: normal;
  line-height: 1.9;
}

.nci--stem .stm-travel {
  margin-top: 6cqw;
  padding: 0 var(--stm-g);
}

.nci--stem .stm-travel-row {
  display: grid;
  grid-template-columns: 22cqw minmax(0, 1fr);
  gap: 3cqw;
  padding: 3.2cqw 0;
  border-top: 1px solid var(--stm-hair-2);
}

.nci--stem .stm-travel-row:last-child {
  border-bottom: 1px solid var(--stm-hair-2);
}

.nci--stem .stm-travel-k {
  font-family: var(--stm-disp);
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--stm-sage);
}

.nci--stem .stm-travel-v {
  font-size: 3.5cqw;
  line-height: 1.6;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-travel-k {
  font-family: var(--stm-zh);
  font-weight: 400;
}

.nci--stem.nci--lang-zh .stm-travel-v {
  font-family: var(--stm-zh);
  font-size: 3.1cqw;
  line-height: 1.85;
}

/* ═════════ faq, as the guide to what to wear ═════════ */

.nci--stem .stm-attire {
  position: relative;
  min-height: 76cqw;
  margin-top: 5cqw;
  padding: 0 var(--stm-g);
}

.nci--stem .stm-attire-art {
  position: absolute;
  z-index: 0;
  top: 22cqw;
  right: 2cqw;
  width: 44cqw;
}

.nci--stem .stm-attire-lede {
  position: relative;
  z-index: 1;
  font-size: 3.7cqw;
  line-height: 1.7;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-attire-lede {
  font-family: var(--stm-zh);
  font-size: 3.3cqw;
  line-height: 1.95;
}

.nci--stem .stm-swatch-caps {
  position: relative;
  z-index: 1;
  margin-top: 6cqw;
}

.nci--stem .stm-swatches {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  width: 40cqw;
  margin-top: 3.4cqw;
}

.nci--stem .stm-swatch {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
}

/* A drop of pigment: darker at the rim where it dried, lighter where it pooled. The colour is the
   couple's (NC.inv.Swatch hands it over as --sw), so the whole drop is built from it. */
.nci--stem .stm-swatch-dot {
  flex: 0 0 auto;
  width: 7.6cqw;
  height: 7.6cqw;
  border-radius: 52% 48% 50% 50% / 50% 54% 46% 50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.38) 0%, transparent 46%),
    radial-gradient(circle at 50% 50%, var(--sw) 60%, color-mix(in srgb, var(--sw) 78%, #3a2a18) 100%);
  box-shadow: 0 0 0 1px rgba(52, 53, 42, 0.08);
}

.nci--stem .stm-swatch-n {
  font-family: var(--stm-disp);
  font-size: 3.6cqw;
  font-style: italic;
  font-weight: 500;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-swatch-n {
  font-family: var(--stm-zh);
  font-size: 3.1cqw;
  font-style: normal;
  letter-spacing: 0.1em;
}

.nci--stem .stm-guide {
  margin-top: 8cqw;
  padding: 0 var(--stm-g);
}

.nci--stem .stm-guide-row {
  padding: 3.6cqw 0;
  border-top: 1px solid var(--stm-hair-2);
}

.nci--stem .stm-guide-row:last-child {
  border-bottom: 1px solid var(--stm-hair-2);
}

.nci--stem .stm-guide-q {
  font-family: var(--stm-disp);
  font-size: 4.3cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: var(--stm-gold-ink);
}

.nci--stem .stm-guide-a {
  margin-top: 1.2cqw;
  font-size: 3.6cqw;
  line-height: 1.6;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-guide-q {
  font-family: var(--stm-zh);
  font-size: 3.5cqw;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nci--stem.nci--lang-zh .stm-guide-a {
  font-family: var(--stm-zh);
  font-size: 3.2cqw;
  line-height: 1.9;
}

/* ═════════ rsvp ═════════
   The sheet is the card: brighter paper with a soft lift. The ferns sit between the sheet and the form,
   bleeding in over the bottom-left corner; the form's own bottom padding leaves that corner to them. */

.nci--stem .stm-sheet {
  position: relative;
  margin: 6cqw 6cqw 0;
  background: var(--stm-card) var(--stm-tile) 0 0 / 120% auto;
  box-shadow: 0 1.2cqw 6cqw rgba(64, 54, 34, 0.15), 0 0 0 1px rgba(133, 98, 42, 0.12);
}

.nci--stem .stm-sheet-bleed {
  position: absolute;
  z-index: 1;
  left: -9cqw;
  bottom: -9cqw;
  width: 46cqw;
}

.nci--stem .stm-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 7cqw 6.4cqw 8cqw;
}

.nci--stem .stm-row {
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
  padding: 2.6cqw 0;
}

.nci--stem .stm-row-l {
  font-family: var(--stm-disp);
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stm-sage);
}

.nci--stem.nci--lang-zh .stm-row-l {
  font-family: var(--stm-zh);
  font-size: 2.9cqw;
  font-weight: 400;
  letter-spacing: 0.24em;
}

.nci--stem .stm-row-i {
  width: 100%;
  min-width: 0;
  padding: 1.6cqw 0;
  border: 0;
  border-bottom: 1px solid rgba(52, 53, 42, 0.3);
  border-radius: 0;
  outline: none;
  background: transparent;
  font-family: var(--stm-serif);
  font-size: 4cqw;
  color: var(--stm-ink);
  appearance: none;
}

.nci--stem .stm-row-i:focus-visible {
  border-bottom-color: var(--stm-gold-ink);
  box-shadow: 0 1px 0 var(--stm-gold-ink);
}

.nci--stem .stm-row.is-bad .stm-row-i {
  border-bottom-color: var(--stm-coral-ink);
}

.nci--stem .stm-err {
  margin-top: -1cqw;
  font-size: max(12px, 3.2cqw);
  color: var(--stm-coral-ink);
}

.nci--stem .stm-choice {
  display: flex;
  gap: 2.6cqw;
  margin: 3cqw 0 1cqw;
}

.nci--stem .stm-opt {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  min-width: 0;
  padding: 2.8cqw 2cqw;
  border: 1px solid rgba(133, 98, 42, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  font-family: var(--stm-disp);
  font-size: 3.7cqw;
  font-weight: 600;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-opt {
  font-family: var(--stm-zh);
  font-size: 3.3cqw;
  font-weight: 400;
}

.nci--stem .stm-opt-dot {
  flex: 0 0 auto;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(133, 98, 42, 0.6);
}

.nci--stem .stm-opt[aria-pressed='true'] {
  border-color: var(--stm-gold-ink);
  background: rgba(166, 125, 55, 0.12);
  color: var(--stm-ink);
}

.nci--stem .stm-opt[aria-pressed='true'] .stm-opt-dot {
  background: var(--stm-coral);
  box-shadow: none;
}

.nci--stem .stm-opt:focus-visible,
.nci--stem .stm-tag:focus-visible,
.nci--stem .stm-step button:focus-visible,
.nci--stem .stm-submit:focus-visible,
.nci--stem .stm-thanks-edit:focus-visible,
.nci--stem .stm-wish-post:focus-visible {
  outline: 2px solid var(--stm-gold-ink);
  outline-offset: 2px;
}

.nci--stem .stm-row--count {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.nci--stem .stm-step {
  display: inline-flex;
  align-items: center;
  gap: 3cqw;
  font-family: var(--stm-disp);
  font-size: 5cqw;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--stm-ink);
}

.nci--stem .stm-step button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8cqw;
  height: 8cqw;
  padding: 0;
  border: 1px solid rgba(133, 98, 42, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  font-size: 4.2cqw;
  line-height: 1;
  color: var(--stm-gold-ink);
}

.nci--view.nci--stem .stm-step button:disabled {
  opacity: 0.4;
}

.nci--stem .stm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8cqw;
}

.nci--stem .stm-tag {
  padding: 1.6cqw 3cqw;
  border: 1px solid rgba(86, 100, 63, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  font-size: 3.2cqw;
  color: var(--stm-ink-2);
}

.nci--stem .stm-tag[aria-pressed='true'] {
  border-color: var(--stm-sage);
  background: var(--stm-sage);
  color: #fbf9f3;
}

.nci--stem .stm-submit {
  align-self: flex-end;
  margin-top: 6cqw;
  padding: 3.2cqw 7cqw;
  border: 0;
  border-radius: 999px;
  background: var(--stm-gold-grad);
  box-shadow: 0 0.8cqw 2.4cqw rgba(133, 98, 42, 0.3);
  font-family: var(--stm-disp);
  font-size: 3.6cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fffdf6;
}

.nci--stem.nci--lang-zh .stm-submit {
  font-family: var(--stm-zh);
  font-size: 3.4cqw;
  font-weight: 400;
  letter-spacing: 0.24em;
}

/* The thank-you: their initials inside the painted wreath, the one place the wreath appears. */
.nci--stem .stm-card--done {
  align-items: center;
  padding-bottom: 12cqw;
  text-align: center;
}

.nci--stem .stm-thanks-mono {
  position: relative;
  width: 52cqw;
}

.nci--stem .stm-thanks-wreath {
  width: 100%;
}

.nci--stem .stm-thanks-ini {
  position: absolute;
  inset: 0 0 12% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3em;
  font-family: var(--stm-script);
  font-size: 15cqw;
  line-height: 1;
  background: var(--stm-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nci--stem .stm-thanks-ini i {
  margin: 0 0.12em;
  font-size: 0.5em;
  font-style: normal;
}

.nci--stem.nci--lang-zh .stm-thanks-ini {
  font-size: 10.5cqw;
}

.nci--stem .stm-thanks-t {
  margin-top: 4cqw;
  padding: 0 0.3em;
  font-family: var(--stm-script);
  font-size: 13cqw;
  line-height: 1.1;
  background: var(--stm-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nci--stem.nci--lang-zh .stm-thanks-t {
  font-size: 9cqw;
}

.nci--stem .stm-thanks-b {
  max-width: 62cqw;
  margin-top: 3cqw;
  font-size: 3.7cqw;
  line-height: 1.7;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-thanks-b {
  font-family: var(--stm-zh);
  font-size: 3.3cqw;
  line-height: 1.95;
}

.nci--stem .stm-req {
  margin-left: 0.4em;
  color: var(--stm-coral-ink);
}

.nci--stem .stm-choice + .stm-err {
  margin: 1cqw 0 2cqw;
}

.nci--stem .stm-err--server {
  margin-top: 4cqw;
}

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

.nci--stem .stm-done-when {
  margin-top: 2cqw;
  font-size: 2.9cqw;
  color: var(--stm-ink-2);
}

.nci--stem .stm-thanks-edit {
  margin-top: 5cqw;
  padding: 1cqw 0;
  border: 0;
  border-bottom: 1px solid rgba(133, 98, 42, 0.5);
  background: none;
  font-family: var(--stm-disp);
  font-size: 3.3cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stm-gold-ink);
}

.nci--stem.nci--lang-zh .stm-thanks-edit {
  font-family: var(--stm-zh);
  font-weight: 400;
}

/* ═════════ wishes ═════════ */

.nci--stem .stm-wish-caps {
  text-align: center;
}

.nci--stem .stm-ribbon {
  position: relative;
  width: 94cqw;
  margin: 1cqw auto 0;
}

.nci--stem .stm-ribbon-art {
  width: 100%;
}

.nci--stem .stm-ribbon-t {
  position: absolute;
  top: 26%;
  left: 20%;
  right: 20%;
  font-family: var(--stm-disp);
  font-size: 5.8cqw;
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  color: #33402a;
}

.nci--stem.nci--lang-zh .stm-ribbon-t {
  top: 27%;
  font-family: var(--stm-zh);
  font-size: 4.2cqw;
  font-style: normal;
  letter-spacing: 0.14em;
}

.nci--stem .stm-wishform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2cqw 3cqw;
  margin-top: 6cqw;
  padding: 0 var(--stm-g);
}

.nci--stem .stm-wish-in {
  width: 100%;
  min-width: 0;
  padding: 2cqw 0;
  border: 0;
  border-bottom: 1px solid rgba(52, 53, 42, 0.3);
  border-radius: 0;
  outline: none;
  background: transparent;
  font-family: var(--stm-serif);
  font-size: 3.9cqw;
  color: var(--stm-ink);
  appearance: none;
}

.nci--stem .stm-wish-in:focus-visible {
  border-bottom-color: var(--stm-gold-ink);
  box-shadow: 0 1px 0 var(--stm-gold-ink);
}

.nci--stem .stm-wish-in--name {
  grid-column: 1 / -1;
}

.nci--stem .stm-wish-err {
  grid-column: 1 / -1;
  margin: 0;
}

.nci--stem .stm-wish-post {
  align-self: end;
  padding: 2.2cqw 5cqw;
  border: 1px solid rgba(133, 98, 42, 0.55);
  border-radius: 999px;
  background: rgba(251, 249, 243, 0.7);
  font-family: var(--stm-disp);
  font-size: 3.3cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stm-gold-ink);
}

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

.nci--stem .stm-wishes {
  display: flex;
  flex-direction: column;
  gap: 4cqw;
  margin-top: 7cqw;
  padding: 0 8cqw;
}

.nci--stem .stm-wish {
  padding: 4.4cqw 5cqw 4cqw;
  background: var(--stm-card) var(--stm-tile) 0 0 / 140% auto;
  box-shadow: 0 0.8cqw 3cqw rgba(64, 54, 34, 0.12), 0 0 0 1px rgba(133, 98, 42, 0.1);
  transform: rotate(-0.8deg);
}

.nci--stem .stm-wish:nth-child(2n) {
  margin-left: 6cqw;
  transform: rotate(0.9deg);
}

.nci--stem .stm-wish:nth-child(3n) {
  margin-right: 4cqw;
}

.nci--stem .stm-wish-text {
  font-size: 3.8cqw;
  line-height: 1.6;
  color: var(--stm-ink);
  overflow-wrap: anywhere;
}

.nci--stem.nci--lang-zh .stm-wish-text {
  font-family: var(--stm-zh);
  font-size: 3.3cqw;
  line-height: 1.85;
}

.nci--stem .stm-wish-from {
  margin-top: 2cqw;
  font-family: var(--stm-disp);
  font-size: 3.4cqw;
  font-style: italic;
  font-weight: 500;
  color: var(--stm-gold-ink);
}

.nci--stem .stm-wish-empty {
  padding-left: 2cqw;
  font-family: var(--stm-disp);
  font-size: 3.8cqw;
  font-style: italic;
  color: var(--stm-ink-2);
}

.nci--stem.nci--lang-zh .stm-wish-empty {
  font-family: var(--stm-zh);
  font-size: 3.2cqw;
  font-style: normal;
}

/* The close mirrors the cover: a photograph of the two of them set into the painting — its edges thin
   into the paper, a wildflower stem rises at its left and the garden roses spill over its lower right
   corner, over her shoulder and never near either face. */
.nci--stem .stm-close {
  position: relative;
  height: 98cqw;
  margin-top: 16cqw;
}

.nci--stem .stm-close-img {
  position: absolute;
  top: 2cqw;
  left: 20cqw;
  width: 72cqw;
  height: 90cqw;
}

.nci--stem .stm-close-stem {
  top: -8cqw;
  left: -4cqw;
  width: 32cqw;
  height: 114cqw;
}

.nci--stem .stm-close-over {
  right: -6cqw;
  top: 58cqw;
  width: 40cqw;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
}

.nci--stem .stm-close-say {
  position: relative;
  z-index: 1;
  margin-top: 2cqw;
  padding: 0 6cqw 0 25cqw;
  font-family: var(--stm-disp);
  font-size: 5cqw;
  font-style: italic;
  line-height: 1.4;
  color: var(--stm-ink);
}

.nci--stem.nci--lang-zh .stm-close-say {
  font-family: var(--stm-zh);
  font-size: 3.8cqw;
  font-style: normal;
  letter-spacing: 0.08em;
}

.nci--stem .stm-close-roses {
  position: absolute;
  z-index: 0;
  right: -6cqw;
  bottom: 0;
  width: 60cqw;
}

.nci--stem .stm-close-mark {
  position: relative;
  z-index: 1;
  margin-top: 3cqw;
  padding-left: 25cqw;
  font-family: var(--stm-disp);
  font-size: 2.75cqw;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--stm-sage);
}

/* ═════════ guest cover overlay ═════════ */

/* A size container, so the photograph can give way on a short phone: everything else on this screen
   takes about 98cqw, and the photograph takes what is left of the screen's height, between 56 and its
   full 88. On a normal phone it is exactly the cover section's photograph, so nothing moves as the
   overlay lifts. The screen is also a flex column, so when the names run to more lines than that
   allowance holds, the photograph gives up the extra height too (keeping its proportions) and the way
   in stays on the screen; only below the smallest photograph does the overlay scroll. */
.nci-cover--stem {
  container-type: size;
  display: block;
  padding: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  background: var(--stm-paper) var(--stm-tile) 0 0 / 78% auto repeat;
  color: var(--stm-ink);
  font-family: var(--stm-serif);
  text-align: left;
}

.nci-cover--stem *,
.nci-cover--stem *::before,
.nci-cover--stem *::after {
  box-sizing: border-box;
}

.nci-cover--stem .stm-cv {
  --stm-rest: 98cqw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding-bottom: 5cqw;
  overflow-x: clip;
  overflow-y: visible;
}

.nci-cover--stem .stm-cv > * {
  flex: none;
}

.nci-cover--stem :is(.stm-cv-kicker, .stm-names, .stm-cv-when, .stm-cv-where, .stm-cv-hint) {
  align-self: stretch;
}

.nci-cover--stem .stm-cv-roses {
  bottom: 0;
}

.nci-cover--stem .stm-cv-photo {
  flex: 0 1 auto;
  height: clamp(56cqw, 100cqh - var(--stm-rest), 88cqw);
  min-height: 44cqw;
  width: auto;
  aspect-ratio: 62 / 88;
}

/* A short phone (a screen less than about 1.7 widths tall): the names come down a size and the hint
   goes, so the photograph keeps most of its height and the way in stays on the screen. */
@container (min-aspect-ratio: 0.6) {
  .nci-cover--stem .stm-cv {
    --stm-rest: 80cqw;
    padding-top: 5cqw;
  }

  .nci-cover--stem .stm-name {
    font-size: 14.5cqw;
  }

  .nci-cover--stem.stm-lang-zh .stm-name {
    font-size: 11cqw;
  }

  .nci-cover--stem .stm-cv-open {
    margin-top: 5cqw;
  }

  .nci-cover--stem .stm-cv-hint {
    display: none;
  }
}

.nci-cover--stem .stm-cv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nci-cover--stem .stm-cv-open {
  position: relative;
  z-index: 4;
  display: block;
  margin: 6cqw 0 0 15cqw;
  padding: 3cqw 7cqw;
  border: 0;
  border-radius: 999px;
  background: var(--stm-gold-grad);
  box-shadow: 0 0.8cqw 3cqw rgba(133, 98, 42, 0.32);
  font-family: var(--stm-disp);
  font-size: 3.5cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fffdf6;
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nci-cover--stem.stm-lang-zh .stm-cv-open {
  font-family: var(--stm-zh);
  font-size: 3.4cqw;
  font-weight: 400;
  letter-spacing: 0.3em;
}

.nci-cover--stem .stm-cv-open:hover {
  transform: translateY(-2px);
}

.nci-cover--stem .stm-cv-open:focus-visible {
  outline: 2px solid var(--stm-gold-ink);
  outline-offset: 4px;
}

.nci-cover--stem .stm-cv-hint {
  position: relative;
  z-index: 4;
  margin-top: 3cqw;
  padding-left: 15cqw;
  font-family: var(--stm-disp);
  font-size: 3.2cqw;
  font-style: italic;
  color: var(--stm-ink-2);
}

.nci-cover--stem.stm-lang-zh .stm-cv-hint {
  font-family: var(--stm-zh);
  font-size: 2.9cqw;
  font-style: normal;
  letter-spacing: 0.1em;
}

.nci-cover--stem.stm-cv--opening {
  pointer-events: none;
  animation: stm-lift 560ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes stm-lift {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--stem.stm-cv--opening {
    animation: none;
  }

  .nci-cover--stem .stm-cv-open {
    transition: none;
  }
}

/* ═════════ floating bar ═════════
   Parked at the foot of the right margin: every block hangs off the left axis, so the right edge is
   where the type runs out. */

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

.nci-float--stem button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(133, 98, 42, 0.5);
  background: rgba(251, 249, 243, 0.94);
  box-shadow: 0 3px 12px rgba(52, 53, 42, 0.16);
  font-family: var(--stm-disp);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--stm-gold-ink);
}

.nci-float--stem .nci-float-dot {
  background: var(--stm-sage-2);
}

.nci-float--stem .nci-float-music[aria-pressed='true'] .nci-float-dot {
  background: var(--stm-coral);
}