/* Nicecard demo — "Cream Poster" (奶油海报) invitation style. Everything is scoped under .nci--cream,
   .nci-cover--cream and .nci-float--cream so the other styles are untouched; new classes use the cre-
   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. */

.nci--cream,
.nci-cover--cream,
.nci-float--cream {
  --cre-paper: #f6f1e6;
  --cre-ink: #221f1c;
  --cre-grey: #7a736b;
  --cre-rule: #cec6b6;
  --cre-hair: rgba(122, 115, 107, 0.55);
  --cre-wine: #8e1b24;
  --cre-g: 9cqw;
  --cre-serif: 'Noto Serif SC', 'Cormorant Garamond', Georgia, serif;
  --cre-sign: 'Mrs Saint Delafield', 'Parisienne', cursive;
  --cre-vibes: 'Great Vibes', 'Parisienne', cursive;
  --cre-ital: 'Italianno', 'Parisienne', cursive;
  /* Cinzel and Cormorant carry no CJK: Chinese set in the caps face (the calendar and map links, the
     name labels) falls through to the loaded Noto Serif SC rather than to a system font. */
  --cre-caps: 'Cinzel', 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --cre-body: 'Quicksand', 'Jost', 'Noto Sans SC', system-ui, sans-serif;
}

.nci--cream {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--cre-paper);
  color: var(--cre-ink);
  font-family: var(--cre-body);
  --nci-bg: var(--cre-paper);
  --nci-soft: #e9e2d2;
  --nci-slot-line: rgba(142, 27, 36, 0.4);
  --nci-slot-ink: var(--cre-grey);
  --nci-hint: rgba(142, 27, 36, 0.4);
}

/* The dashed edges belong to the page, not the viewport: one pair of hairlines behind every section,
   running the whole length of the document. Sections paint over them, so a full-bleed photo covers
   them and the cream between the blocks keeps them. */
.nci--cream::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0 3cqw;
  pointer-events: none;
  border-left: 1px dashed var(--cre-hair);
  border-right: 1px dashed var(--cre-hair);
}

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

.nci--cream .nci-s-story,
.nci--cream .nci-s-gallery,
.nci--cream .nci-s-countdown,
.nci--cream .nci-s-venue,
.nci--cream .nci-s-faq,
.nci--cream .nci-s-rsvp {
  padding-bottom: 16cqw;
}

/* White text sitting on a photo keeps a lighter edit hint. */
.nci--cream .cre-cover-over .nci-f--hint {
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

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

/* The guest cover repeats the page's hierarchy — kicker, caps, lede, script, names — so the type is set
   once for both roots here, the way the tokens at the top of the file are. Only what genuinely differs
   between the two (the page's margins, the cover's sizes) is written again in its own scope. */

.nci--cream .cre-kicker,
.nci-cover--cream .cre-kicker {
  font-family: var(--cre-serif);
  font-size: 3cqw;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
}

.nci--cream .cre-caps,
.nci-cover--cream .cre-caps {
  font-family: var(--cre-caps);
  font-size: 4.4cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.nci--cream .cre-caps--white,
.nci-cover--cream .cre-caps--white {
  margin-top: 3.4cqw;
  color: #fff;
}

.nci--cream .cre-caps--grey {
  font-size: 3.2cqw;
  color: var(--cre-grey);
}

.nci--cream .cre-script,
.nci-cover--cream .cre-script {
  font-family: var(--cre-sign);
  line-height: 1;
  color: var(--cre-wine);
}

.nci--cream .cre-lede,
.nci-cover--cream .cre-lede {
  font-family: var(--cre-serif);
  font-size: 3cqw;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--cre-grey);
}

.nci--cream .cre-names,
.nci-cover--cream .cre-names {
  font-family: var(--cre-serif);
  font-weight: 600;
  font-size: 4.2cqw;
  letter-spacing: 0.1em;
  color: var(--cre-ink);
  overflow-wrap: anywhere;
}

.nci--cream .cre-amp,
.nci-cover--cream .cre-amp {
  margin: 0 1.4cqw;
  font-weight: 400;
  color: var(--cre-grey);
}

.nci--cream .cre-poem {
  margin: 12cqw var(--cre-g) 0;
  font-family: var(--cre-serif);
  font-size: 3.2cqw;
  line-height: 2.55;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  color: var(--cre-grey);
}

.nci--cream .cre-poem--right {
  text-align: right;
  text-indent: 0;
  padding-right: 1cqw;
}

.nci--cream .cre-poem--left {
  text-align: left;
  padding-left: 1cqw;
}

.nci--cream .cre-head {
  margin: 14cqw var(--cre-g) 0;
  text-align: center;
}

.nci--cream .cre-h2 {
  margin-top: 2.4cqw;
  font-family: var(--cre-serif);
  font-weight: 600;
  font-size: 5.4cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--cre-ink);
}

/* A quiet, real link: maps and the calendar entry, kept to a hairline so the wine stays for the
   accents the design spends it on. */
.nci--cream .cre-quietlink {
  display: inline-block;
  margin: 6cqw auto 0;
  padding-bottom: 0.8cqw;
  border-bottom: 1px solid var(--cre-rule);
  font-family: var(--cre-caps);
  font-size: 2.8cqw;
  letter-spacing: 0.2em;
  color: var(--cre-grey);
}

.nci--cream .cre-tl + .cre-quietlink {
  display: block;
  width: fit-content;
}

/* ───── S1 cover ───── */

.nci--cream .cre-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 39 / 50;
  background: #ded7c7;
}

.nci--cream .cre-cover-img {
  position: absolute;
  inset: 0;
}

/* The scrim is the title's ground, not a wash over the picture: it is deepest across the band the two
   white lines sit in and gone by the time the photograph is doing the talking. It has to hold white type
   over whatever the couple puts here, and a studio portrait on a white ground is the hard case. */
.nci--cream .cre-cover-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(28, 25, 22, 0.72) 0%, rgba(28, 25, 22, 0.52) 16%, rgba(28, 25, 22, 0.2) 28%, rgba(28, 25, 22, 0) 42%);
}

/* Blank areas of the overlay fall through, so the photo slot stays selectable in the editor; only the
   words themselves take the pointer back. */
/* The two white lines hang at the foot of the photograph, not across it. This frame is the closest in
   the set — the two faces fill the top two-thirds — so the only empty ground it has is the gown and his
   sleeve along the bottom edge, and that is where the title goes. Bottom-anchored also puts it clear
   of the floating music/share bar in the top right. */
.nci--cream .cre-cover-over {
  position: absolute;
  inset: auto 0 6cqw;
  pointer-events: none;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 10px rgba(30, 26, 22, 0.4);
}

.nci--cream .cre-cover-over .nci-f {
  pointer-events: auto;
}

/* The signature word below carries a swash far outside its own line box — its inline box reaches back up
   over this line, and being later in the DOM it takes the clicks. Nothing moves; the lede just needs to
   win the hit test, or a couple can never select the one line sitting above the big word. */
.nci--cream .cre-lede {
  position: relative;
  z-index: 1;
  margin: 9cqw var(--cre-g) 0;
  text-align: center;
}

/* The dominant word of the first screen: the W carries its own swash in this face, so it is set large
   and left of centre, with the tail allowed to run under the line. The top margin is clearance for that
   swash, which overshoots the line box by about a third of the em and would otherwise cross the lede. */
.nci--cream .cre-script--hero {
  margin: 4.5cqw 0 0;
  font-size: 34cqw;
  text-align: center;
}

.nci--cream .cre-names {
  margin: 1cqw var(--cre-g) 0;
  text-align: center;
}

.nci--cream .cre-names--sm {
  margin-top: 14cqw;
  font-weight: 400;
  font-size: 3.4cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--cre-grey);
}

.nci--cream .cre-date {
  margin: 2.6cqw var(--cre-g) 0;
  font-family: var(--cre-serif);
  font-size: 3cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-align: center;
  color: var(--cre-grey);
}

/* ───── S2 portrait, quote and the big Hi. ───── */

.nci--cream .cre-portrait {
  margin: 8cqw 19cqw 0;
  aspect-ratio: 3 / 4;
}

.nci--cream .cre-quote {
  margin: 9cqw var(--cre-g) 0;
  font-family: var(--cre-ital);
  font-size: 6cqw;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--cre-grey);
}

.nci--cream .cre-quote span {
  display: block;
}

.nci--cream .cre-line {
  margin: 5cqw var(--cre-g) 0;
  font-family: var(--cre-serif);
  font-size: 3.4cqw;
  line-height: 2;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-align: center;
  color: var(--cre-ink);
}

.nci--cream .cre-hello {
  position: relative;
  margin: 14cqw 16cqw 0 4cqw;
}

.nci--cream .cre-hello-img {
  aspect-ratio: 3 / 2;
}

/* Overlaps the photo's bottom-right corner and spills past its edge, but stays inside the page — the
   root clips horizontally so a long word can never widen the document. */
.nci--cream .cre-hello-script {
  position: absolute;
  right: -11cqw;
  bottom: -7cqw;
  pointer-events: none;
  font-family: var(--cre-sign);
  font-size: 26cqw;
  line-height: 1;
  color: var(--cre-wine);
}

.nci--cream .cre-hello-script .nci-f {
  pointer-events: auto;
}

/* ───── S3 groom and bride ───── */

.nci--cream .cre-person {
  display: flex;
  align-items: center;
  gap: 5cqw;
  margin: 15cqw var(--cre-g) 0;
}

.nci--cream .cre-person-img {
  flex: 0 0 44cqw;
  aspect-ratio: 4 / 5;
}

.nci--cream .cre-person-side {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.nci--cream .cre-script--role {
  font-size: 17cqw;
}

.nci--cream .cre-person-role {
  margin-top: 3cqw;
  font-family: var(--cre-caps);
  font-size: 2.8cqw;
  letter-spacing: 0.22em;
  color: var(--cre-grey);
}

.nci--cream .cre-person-name {
  margin-top: 1.4cqw;
  font-family: var(--cre-serif);
  font-weight: 600;
  font-size: 4cqw;
  letter-spacing: 0.14em;
  color: var(--cre-ink);
  overflow-wrap: anywhere;
}

/* ───── S4 collage ───── */

.nci--cream .cre-collage {
  position: relative;
  height: 118cqw;
  margin-top: 16cqw;
}

.nci--cream .cre-collage-tall {
  position: absolute;
  top: 0;
  right: var(--cre-g);
  width: 55cqw;
  height: 74cqw;
}

.nci--cream .cre-collage-script {
  position: absolute;
  top: 16cqw;
  left: 5cqw;
  z-index: 2;
  pointer-events: none;
  font-family: var(--cre-sign);
  font-size: 19cqw;
  line-height: 1.15;
  color: var(--cre-wine);
}

.nci--cream .cre-collage-script span {
  display: block;
}

.nci--cream .cre-collage-script span + span {
  margin-left: 6cqw;
}

.nci--cream .cre-collage-script .nci-f {
  pointer-events: auto;
}

.nci--cream .cre-collage-wide {
  position: absolute;
  top: 64cqw;
  left: 4cqw;
  z-index: 3;
  width: 56cqw;
  height: 42cqw;
}

/* Beside the low photo, in the cream column to its right — not underneath the whole collage. The lines
   are short because the column is narrow; a longer one wraps into the air below it. */
.nci--cream .cre-collage-poem {
  position: absolute;
  top: 78cqw;
  right: var(--cre-g);
  left: 61cqw;
  margin: 0;
  font-family: var(--cre-serif);
  font-size: 3.2cqw;
  line-height: 2.4;
  letter-spacing: 0.18em;
  text-align: right;
  color: var(--cre-grey);
}

.nci--cream .cre-married {
  margin: 4cqw var(--cre-g) 0;
  text-align: center;
}

.nci--cream .cre-script--married {
  font-size: 15cqw;
}

.nci--cream .cre-married .cre-caps {
  margin-top: 1.4cqw;
}

/* ───── S5 pair, countdown, divider and date lines ───── */

.nci--cream .cre-twin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4cqw;
  margin: 14cqw var(--cre-g) 0;
}

.nci--cream .cre-twin-item {
  aspect-ratio: 3 / 4;
}

/* One horizontal row, not the stacked boxes of the first poster template. */
.nci--cream .cre-cd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 13cqw var(--cre-g) 0;
}

.nci--cream .cre-cd-cell {
  text-align: center;
}

.nci--cream .cre-cd-cell b {
  display: block;
  font-family: var(--cre-caps);
  font-weight: 400;
  font-size: 10cqw;
  line-height: 1;
  color: var(--cre-wine);
  font-variant-numeric: lining-nums tabular-nums;
}

.nci--cream .cre-cd-cell i {
  display: block;
  margin-top: 2.2cqw;
  font-family: var(--cre-serif);
  font-size: 2.6cqw;
  font-style: normal;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--cre-grey);
}

.nci--cream .cre-cd-done {
  margin: 13cqw var(--cre-g) 0;
  font-family: var(--cre-serif);
  font-size: 5cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-align: center;
  color: var(--cre-wine);
}

.nci--cream .cre-xi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  margin: 11cqw var(--cre-g) 0;
  font-family: var(--cre-serif);
  font-size: 4.4cqw;
  color: var(--cre-wine);
}

.nci--cream .cre-xi::before,
.nci--cream .cre-xi::after {
  content: '';
  width: 9cqw;
  height: 1px;
  background: var(--cre-wine);
}

/* One face per line. Cormorant carries no CJK, so asking for it first set the digits in Cormorant and
   the characters in the fallback — two optical sizes spliced into one line. A doc written in English has
   no such split and gets the real italic back in the Latin block below. Weight 400 is the italic the
   page actually loads; 500 was being synthesised. */
.nci--cream .cre-dates {
  margin: 5cqw var(--cre-g) 0;
  font-family: var(--cre-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 4.4cqw;
  line-height: 2;
  text-align: center;
  color: var(--cre-ink);
}

/* ───── S5 timeline ───── */

.nci--cream .cre-tl {
  margin: 15cqw var(--cre-g) 0;
}

.nci--cream .cre-tl-icons,
.nci--cream .cre-tl-rule,
.nci--cream .cre-tl-rows {
  display: grid;
  grid-template-columns: repeat(var(--cre-cols, 3), 1fr);
}

.nci--cream .cre-tl-icons {
  align-items: end;
}

/* Line-kit drawings in wine like the rule under them. Each is its own share (--cre-k, set in cream.js)
   of one reference width: the column, but never wider than a four-row column, so three rows print
   them at the same size as four and five or more shrink them together to fit. */
.nci--cream .cre-tl-icon {
  --nci-ink-c: var(--cre-wine);
  width: calc(var(--cre-k, 0.7) * min(100%, 20.6cqw));
  margin: 0 auto;
}

/* The kit's pen is drawn for pieces many times this size; printed this small its hairlines thin to a
   pale pink. On a high-density screen the drawing is laid three times over itself — the same mask in
   the same place — which deepens every line back to the wine of the rule without widening or moving
   any of it, and keeps the colour the drawing's own (--nci-ink-c), so a tint set in the editor still
   recolours the whole line. A 1x screen keeps the single mask: it has too few pixels to hold these
   lines, and stacking them there only turns the shading of the cake and the arch into grain. */
@media (max-resolution: 1.49dppx) {
  /* On a 1x screen the stacked mask breaks into grain, so the row is given a hairline of the wine
     around every stroke instead, after the masks (on the row that holds them), which reads as the
     wine of the rule. */
  .nci--cream .cre-tl-icons {
    filter: drop-shadow(0 0 0.5px var(--cre-wine));
  }
}

@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .nci--cream .cre-tl-icon {
    -webkit-mask: var(--nci-ink) center / contain no-repeat, var(--nci-ink) center / contain no-repeat, var(--nci-ink) center / contain no-repeat;
    mask: var(--nci-ink) center / contain no-repeat, var(--nci-ink) center / contain no-repeat, var(--nci-ink) center / contain no-repeat;
  }
}

.nci--cream .cre-tl-rule {
  margin-top: 3.4cqw;
  border-top: 1px solid var(--cre-wine);
}

.nci--cream .cre-tl-tick {
  width: 1px;
  height: 2.6cqw;
  margin: 0 auto;
  background: var(--cre-wine);
}

/* No column gap: these columns have to line up with the ticks above them, and the tick grid has none —
   a gap here narrows the columns and walks each label off its own tick. The air between two labels is
   padding inside the cell instead, which leaves the column centres exactly where the ticks are. */
.nci--cream .cre-tl-rows {
  margin-top: 1.6cqw;
}

.nci--cream .cre-tl-row {
  padding: 0 0.75cqw;
  text-align: center;
}

.nci--cream .cre-tl-at {
  display: block;
  font-family: var(--cre-caps);
  font-size: 3.6cqw;
  letter-spacing: 0.04em;
  color: var(--cre-wine);
}

.nci--cream .cre-tl-t {
  display: block;
  margin-top: 1.2cqw;
  font-family: var(--cre-serif);
  font-size: 2.7cqw;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--cre-grey);
}

/* ───── S6 address ───── */

.nci--cream .cre-script--addr {
  margin-top: 14cqw;
  font-size: 19cqw;
  text-align: center;
}

.nci--cream .cre-venue {
  margin: 1cqw var(--cre-g) 0;
  font-family: var(--cre-serif);
  font-weight: 600;
  font-size: 4.4cqw;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-align: center;
  color: var(--cre-ink);
}

.nci--cream .cre-addr {
  margin: 2cqw var(--cre-g) 0;
  font-family: var(--cre-serif);
  font-size: 2.9cqw;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--cre-grey);
}

.nci--cream .cre-mapwrap {
  margin: 6cqw var(--cre-g) 0;
}

.nci--cream .nci-map {
  position: relative;
  height: 38cqw;
  overflow: hidden;
  border: 1px solid var(--cre-rule);
  background: #efe9db;
}

.nci--cream .nci-map::before {
  content: '';
  position: absolute;
  inset: 0 0 0 62%;
  background: #e3e6de;
}

.nci--cream .nci-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(72deg, rgba(255, 255, 255, 0.9) 0 2px, rgba(255, 255, 255, 0) 2px 12cqw),
    repeating-linear-gradient(-22deg, rgba(255, 255, 255, 0.75) 0 1.5px, rgba(255, 255, 255, 0) 1.5px 8cqw);
}

.nci--cream .nci-map-road {
  position: absolute;
  top: 58%;
  right: 0;
  left: 0;
  height: 2.2cqw;
  background: #fff;
}

.nci--cream .nci-map-pin {
  position: absolute;
  top: 36%;
  left: 46%;
  z-index: 2;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50% 50% 50% 0;
  background: var(--cre-wine);
  transform: rotate(-45deg);
}

.nci--cream .cre-maps {
  display: flex;
  justify-content: center;
  gap: 7cqw;
}

/* The link centres itself on its own; inside the row the auto margins would push the pair apart. */
.nci--cream .cre-maps .cre-quietlink {
  margin-right: 0;
  margin-left: 0;
}

.nci--cream .cre-travel {
  margin: 9cqw var(--cre-g) 0;
}

.nci--cream .cre-travel-row + .cre-travel-row {
  margin-top: 3.4cqw;
  padding-top: 3.4cqw;
  border-top: 1px solid rgba(34, 31, 28, 0.08);
}

.nci--cream .cre-travel-k {
  font-family: var(--cre-caps);
  font-size: 2.9cqw;
  letter-spacing: 0.2em;
  color: var(--cre-wine);
}

.nci--cream .cre-travel-v {
  margin-top: 1cqw;
  font-size: 3cqw;
  line-height: 1.85;
  color: var(--cre-grey);
}

.nci--cream .cre-tallphoto {
  margin: 14cqw 21cqw 0;
  aspect-ratio: 2 / 3;
}

/* ───── Notes (off by default) ───── */

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

.nci--cream .cre-faq-item + .cre-faq-item {
  margin-top: 4.4cqw;
}

.nci--cream .cre-faq-q {
  font-family: var(--cre-serif);
  font-weight: 600;
  font-size: 3.4cqw;
  letter-spacing: 0.08em;
  color: var(--cre-ink);
}

.nci--cream .cre-faq-a {
  margin-top: 1.2cqw;
  font-size: 3cqw;
  line-height: 1.9;
  color: var(--cre-grey);
}

/* ───── S7 reply form ───── */

.nci--cream .cre-form {
  margin: 15cqw var(--cre-g) 0;
}

.nci--cream .cre-in {
  display: flex;
  align-items: center;
  gap: 3cqw;
  margin-bottom: 3.4cqw;
  padding: 3.6cqw 4cqw;
  border: 1px solid var(--cre-rule);
  background: transparent;
}

.nci--cream .cre-in.is-bad {
  border-color: rgba(142, 27, 36, 0.6);
}

.nci--cream .cre-in-label {
  flex: 0 0 auto;
  font-family: var(--cre-serif);
  font-size: 3.4cqw;
  letter-spacing: 0.16em;
  color: var(--cre-grey);
}

.nci--cream .cre-star {
  margin-right: 1.2cqw;
  color: var(--cre-wine);
}

.nci--cream .cre-in-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--cre-serif);
  font-size: 3.6cqw;
  color: var(--cre-ink);
  outline: none;
}

.nci--cream .cre-step {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  margin-left: auto;
  font-family: var(--cre-serif);
  font-size: 3.6cqw;
  color: var(--cre-ink);
}

.nci--cream .cre-step button {
  width: 6.6cqw;
  height: 6.6cqw;
  padding: 0;
  border: 1px solid var(--cre-rule);
  border-radius: 50%;
  background: transparent;
  color: var(--cre-wine);
  font-size: 3.4cqw;
  line-height: 1;
}

.nci--cream .cre-step button:disabled {
  opacity: 0.4;
}

.nci--cream .cre-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.4cqw;
  margin-bottom: 3.4cqw;
}

.nci--cream .cre-choice button {
  padding: 3.4cqw 2cqw;
  border: 1px solid var(--cre-rule);
  background: transparent;
  color: var(--cre-grey);
  font-family: var(--cre-serif);
  font-size: 3.4cqw;
  letter-spacing: 0.14em;
}

.nci--cream .cre-choice button[aria-pressed='true'] {
  border-color: var(--cre-wine);
  background: rgba(142, 27, 36, 0.08);
  color: var(--cre-wine);
}

.nci--cream .cre-diet {
  margin-bottom: 3.4cqw;
  padding: 3.6cqw 4cqw;
  border: 1px solid var(--cre-rule);
}

.nci--cream .cre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2cqw;
  margin-top: 2.6cqw;
}

.nci--cream .cre-tag {
  padding: 1.6cqw 3.2cqw;
  border: 1px solid var(--cre-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--cre-grey);
  font-family: var(--cre-serif);
  font-size: 3.2cqw;
  letter-spacing: 0.04em;
}

.nci--cream .cre-tag[aria-pressed='true'] {
  border-color: var(--cre-wine);
  background: rgba(142, 27, 36, 0.08);
  color: var(--cre-wine);
}

.nci--cream .cre-tag:disabled {
  opacity: 0.45;
}

.nci--cream .cre-hint {
  margin: -2cqw 0 3cqw;
  color: var(--cre-grey);
}

.nci--cream .cre-err {
  margin: -2cqw 0 3cqw;
  font-size: max(12px, 2.9cqw);
  color: var(--cre-wine);
}

.nci--cream .cre-err--server {
  margin: 0 0 3cqw;
}

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

.nci--cream .cre-submit {
  display: block;
  width: 100%;
  margin-top: 2cqw;
  padding: 4.4cqw;
  border: 0;
  background: var(--cre-wine);
  color: #fff;
  font-family: var(--cre-serif);
  font-size: 4cqw;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.nci--cream .cre-done {
  margin: 15cqw var(--cre-g) 0;
  padding: 8cqw 6cqw;
  border: 1px solid var(--cre-rule);
  text-align: center;
}

.nci--cream .cre-done-t {
  font-family: var(--cre-serif);
  font-weight: 600;
  font-size: 4.6cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--cre-wine);
}

.nci--cream .cre-done-b {
  margin-top: 2.6cqw;
  font-size: 3.1cqw;
  line-height: 1.9;
  color: var(--cre-grey);
}

.nci--cream .cre-done-when {
  margin-top: 1.6cqw;
  font-size: 2.7cqw;
  color: var(--cre-grey);
}

.nci--cream .cre-done-edit {
  margin-top: 3.4cqw;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--cre-rule);
  background: none;
  font-size: 2.9cqw;
  letter-spacing: 0.12em;
  color: var(--cre-grey);
}

.nci--cream .cre-script--thanks {
  margin: 13cqw var(--cre-g) 0;
  font-size: 22cqw;
  text-align: center;
}

/* ───── Wishes ───── */

.nci--cream .cre-wishform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.6cqw;
  margin: 8cqw var(--cre-g) 0;
}

.nci--cream .cre-wish-in {
  min-width: 0;
  padding: 3cqw 3.4cqw;
  border: 1px solid var(--cre-rule);
  background: transparent;
  font-size: 3.2cqw;
  color: var(--cre-ink);
}

.nci--cream .cre-wish-in::placeholder {
  color: #a9a196;
}

.nci--cream .cre-wish-in--text {
  grid-column: 1;
}

.nci--cream .cre-wish-err {
  grid-column: 1 / -1;
  margin: 0;
}

.nci--cream .cre-wish-post {
  padding: 0 4.4cqw;
  border: 0;
  background: var(--cre-wine);
  color: #fff;
  font-size: 3.1cqw;
  letter-spacing: 0.18em;
}

.nci--cream .cre-wishes {
  margin: 7cqw var(--cre-g) 0;
}

.nci--cream .cre-wish {
  padding: 4cqw 0;
  border-bottom: 1px dashed rgba(122, 115, 107, 0.4);
}

.nci--cream .cre-wish-text {
  font-family: var(--cre-serif);
  font-size: 3.3cqw;
  line-height: 2;
  letter-spacing: 0.08em;
  color: #4a443e;
  overflow-wrap: anywhere;
}

.nci--cream .cre-wish-from {
  margin-top: 1.4cqw;
  font-family: var(--cre-caps);
  font-size: 2.8cqw;
  letter-spacing: 0.12em;
  color: var(--cre-grey);
}

.nci--cream .cre-wish-empty {
  font-size: 3.1cqw;
  color: var(--cre-grey);
}

/* ───── Latin content ─────
   The tracking above is set for 中文. A doc the couple wrote in English gets much tighter tracking,
   because CJK tracking scatters Latin words into loose letters. `nci--lang-*` comes from the renderer
   and reads the couple's own names. */

.nci--cream.nci--lang-en .cre-poem,
.nci--cream.nci--lang-en .cre-collage-poem {
  font-size: 3cqw;
  line-height: 2.1;
  letter-spacing: 0.08em;
  text-indent: 0;
}

.nci--cream.nci--lang-en .cre-line {
  letter-spacing: 0.06em;
  text-indent: 0;
}

.nci--cream.nci--lang-en .cre-lede,
.nci--cream.nci--lang-en .cre-date,
.nci--cream.nci--lang-en .cre-names--sm {
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

.nci--cream.nci--lang-en .cre-h2,
.nci--cream.nci--lang-en .cre-venue {
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

/* All-Latin date lines can have the real italic; it runs small, so it is set a little larger. */
.nci--cream.nci--lang-en .cre-dates {
  font-family: 'Cormorant Garamond', var(--cre-serif);
  font-size: 5cqw;
}

.nci--cream.nci--lang-en .cre-tl-t {
  font-size: 2.6cqw;
  letter-spacing: 0;
}

.nci--cream.nci--lang-en .cre-choice button {
  letter-spacing: 0.06em;
}

.nci--cream.nci--lang-en .cre-submit {
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

/* ═════════════ Guest cover overlay ═════════════ */

.nci-cover--cream {
  container-type: inline-size;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--cre-paper);
  font-family: var(--cre-body);
}

.nci-cover--cream .cre-cv-photo {
  position: absolute;
  inset: 0 0 auto;
  height: 58%;
  overflow: hidden;
  background: #ded7c7;
}

.nci-cover--cream .cre-cv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}

/* The guest cover repeats the page's reading: the same photograph, the same two faces filling the top
   of the box, so the same bottom-anchored wash and the same bottom-anchored title. Nothing shades a
   face on either surface. */
.nci-cover--cream .cre-cv-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(28, 25, 22, 0.72) 0%, rgba(28, 25, 22, 0.52) 16%, rgba(28, 25, 22, 0.2) 28%, rgba(28, 25, 22, 0) 42%);
}

.nci-cover--cream .cre-cv-over {
  position: absolute;
  inset: auto 0 5cqw;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 10px rgba(30, 26, 22, 0.4);
}

.nci-cover--cream .cre-cv-body {
  position: absolute;
  inset: 58% 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 9cqw 4cqw;
  text-align: center;
}

/* The page's dashed edges carry on under the cover, so opening it does not change the paper. They are
   anchored to the cover itself and drawn before the photo, which paints over the stretch it covers. */
.nci-cover--cream::before {
  content: '';
  position: absolute;
  inset: 0 3cqw;
  pointer-events: none;
  border-left: 1px dashed var(--cre-hair);
  border-right: 1px dashed var(--cre-hair);
}

/* Clearance for the W's swash, as on the page — see .cre-script--hero. The card's cream half is a fixed
   height, so the word is set a little smaller than the page's to pay for that clearance; the column has
   to start below the photograph and end above the card edge. */
.nci-cover--cream .cre-cv-script {
  margin-top: 4.5cqw;
  font-size: 26cqw;
}

.nci-cover--cream .cre-cv-date {
  margin-top: 2.6cqw;
  font-family: var(--cre-caps);
  font-size: 3.4cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--cre-grey);
}

.nci-cover--cream .cre-cv-open {
  margin-top: 7cqw;
  padding: 3.4cqw 9cqw;
  border: 1px solid var(--cre-wine);
  background: transparent;
  color: var(--cre-wine);
  font-family: var(--cre-serif);
  font-size: 3.4cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  transition: background-color 160ms, color 160ms;
}

.nci-cover--cream .cre-cv-open:hover {
  background: var(--cre-wine);
  color: #fff;
}

.nci-cover--cream .cre-cv-open:focus-visible {
  outline: 2px solid var(--cre-wine);
  outline-offset: 4px;
}

.nci-cover--cream .cre-cv-hint {
  margin-top: 3.4cqw;
  font-size: 2.7cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: #a9a196;
  animation: cre-hint 2.6s ease-in-out infinite;
}

.nci-cover--cream.cre-cover--opening {
  pointer-events: none;
  animation: cre-cover-out 480ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes cre-hint {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes cre-cover-out {
  to {
    opacity: 0;
    transform: scale(1.03);
  }
}

/* ═════════════ Floating bar — outlined circle, top right ═════════════ */

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

.nci-float--cream button {
  gap: 0;
  padding: 0;
  font-family: var(--cre-body);
}

/* The bar floats over the whole page, and the page is cream from the cover photo down, so the button
   wears the paper the way the share pill next to it does: white-on-white was legible for the first
   screen and a ghost for the other nine. */
.nci-float--cream .nci-float-music {
  width: 36px;
  height: 36px;
  justify-content: center;
  border: 1px solid var(--cre-wine);
  background: rgba(246, 241, 230, 0.94);
  color: var(--cre-wine);
  font-size: 0;
  letter-spacing: 0;
  backdrop-filter: blur(6px);
}

.nci-float--cream .nci-float-dot {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 14px;
  line-height: 1;
  color: var(--cre-wine);
}

/* Escaped, so the note survives however the sheet is decoded. */
.nci-float--cream .nci-float-dot::before {
  content: '\266A';
}

.nci-float--cream .nci-float-music[aria-pressed='true'] {
  background: rgba(142, 27, 36, 0.85);
  border-color: rgba(255, 255, 255, 0.9);
}

.nci-float--cream .nci-float-music[aria-pressed='true'] .nci-float-dot {
  animation: cre-spin 3.6s linear infinite;
}

.nci-float--cream .nci-float-share {
  height: 36px;
  padding: 0 14px;
  background: rgba(246, 241, 230, 0.94);
  color: var(--cre-ink);
  font-size: 10px;
  letter-spacing: 0.18em;
}

@keyframes cre-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--cream .cre-cv-hint,
  .nci-float--cream .nci-float-music[aria-pressed='true'] .nci-float-dot {
    animation: none;
  }

  .nci-cover--cream .cre-cv-open {
    transition: none;
  }

  .nci-cover--cream.cre-cover--opening {
    animation-duration: 1ms;
  }
}