/* Nicecard demo — "Ribbon & Toast" (丝带香槟) invitation style. Everything is scoped under .nci--ribbon,
   .nci-cover--ribbon and .nci-float--ribbon so the other styles are untouched; new classes use the rbn-
   prefix. The page is a size container and every measurement is in cqw, so the poster keeps its
   proportions in the 372px phone frame, the 390px editor canvas and a 390px phone.
   One ink. The paper is a warm cream stock, every drawing and every rule is the same wine, and the
   type is either that wine or a warm near-black. Two wines are kept apart on purpose: --rbn-wine is
   the ink the drawings, the rules and the display type are printed in (8.0:1 on the paper), and
   --rbn-wine-2 is the darker one small caps may use (10.6:1). Every colour that carries a word clears
   4.5:1 on --rbn-paper: --rbn-ink 14.7:1, --rbn-ink-2 8.3:1, --rbn-mute 5.1:1. The smallest type on the
   page is 2.6cqw (10px at 390), and never below 10px on a narrower phone. Drawings from the line kit are NC.inv.Ink masks tinted through
   --nci-ink-c, which the page sets once; every one of them is pointer-events: none. */

.nci--ribbon,
.nci-cover--ribbon,
.nci-float--ribbon {
  --rbn-paper: #f8f1e4;
  --rbn-paper-2: #f1e6d3;
  --rbn-wine: #8e1b24;
  --rbn-wine-2: #6f1119;
  --rbn-ink: #2a1b1b;
  --rbn-ink-2: #574240;
  --rbn-mute: #7a605a;
  --rbn-hair: rgba(142, 27, 36, 0.3);
  --rbn-hair-2: rgba(142, 27, 36, 0.15);
  /* The ribbon border: the outer rule's inset from the page's sides, the top run's height, where the
     side runs start (the foot of the top bows' tails), the gap between the two rules, and the bottom
     run's inset from the foot of the page. */
  --rbn-fx: 4.4cqw;
  --rbn-fy: 8cqw;
  --rbn-fside: 26.5cqw;
  --rbn-band: 1.2cqw;
  --rbn-fb: 22cqw;
  --rbn-disp: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
  --rbn-text: 'EB Garamond', 'Noto Serif SC', Georgia, serif;
  --rbn-cjk: 'Noto Serif SC', 'Playfair Display', Georgia, serif;
  --nci-ink-c: var(--rbn-wine);
}

.nci--ribbon {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--rbn-paper);
  /* Card stock is a shade warmer at its edges, where the hand holds it. */
  background-image: linear-gradient(90deg, rgba(120, 70, 40, 0.045), transparent 14%, transparent 86%, rgba(120, 70, 40, 0.045));
  color: var(--rbn-ink);
  font-family: var(--rbn-text);
  --nci-bg: var(--rbn-paper);
  --nci-soft: var(--rbn-paper-2);
  --nci-slot-line: rgba(142, 27, 36, 0.45);
  --nci-slot-ink: var(--rbn-ink-2);
  --nci-hint: rgba(142, 27, 36, 0.45);
  --nci-sel: var(--rbn-wine);
}

/* ───── the ribbon border ─────
   Two fine wine rules the whole length of the page — the ribbon's two edges — with the stock showing
   between them. It is built in three pieces, none of them masked: the top run between the two bows is
   a short element in the cover (.rbn-topband), with its ends tucked under the bows' outer loops; the
   two sides start where the bows' tails end, so the side ribbon seems to fall out of each tail; and the
   bottom run stops either side of the last bow. The page draws the long pieces itself — ::before the
   outer rule, ::after the inner one — as plain background lines: a mask on a layer the height of the
   whole invitation is rasterised coarsely enough to leak the rule it should hide. */
.nci--ribbon::before,
.nci--ribbon::after,
.nci-cover--ribbon .rbn-cv-frame,
.nci-cover--ribbon .rbn-cv-frame::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: var(--rbn-fside);
  left: var(--rbn-fx);
  right: var(--rbn-fx);
  bottom: var(--rbn-fb);
  pointer-events: none;
  --rbn-rule: linear-gradient(var(--rbn-wine), var(--rbn-wine));
  --rbn-gap: 0cqw;
  background:
    var(--rbn-rule) left top / 1px 100% no-repeat,
    var(--rbn-rule) right top / 1px 100% no-repeat,
    var(--rbn-rule) left bottom / calc(50% - var(--rbn-gap)) 1px no-repeat,
    var(--rbn-rule) right bottom / calc(50% - var(--rbn-gap)) 1px no-repeat;
}

/* The inner rule, one ribbon-width inside the outer one. */
.nci--ribbon::after {
  left: calc(var(--rbn-fx) + var(--rbn-band));
  right: calc(var(--rbn-fx) + var(--rbn-band));
  bottom: calc(var(--rbn-fb) + var(--rbn-band));
}

/* The bottom run leaves room for the last bow's loops. */
.nci--ribbon::before,
.nci--ribbon::after {
  --rbn-gap: 12.4cqw;
}

/* The top run, between the two bows. */
:is(.nci--ribbon, .nci-cover--ribbon) .rbn-topband {
  position: absolute;
  z-index: 1;
  top: var(--rbn-fy);
  left: 21.5cqw;
  right: 21.5cqw;
  height: calc(var(--rbn-band) + 1px);
  border-top: 1px solid var(--rbn-wine);
  border-bottom: 1px solid var(--rbn-wine);
  box-sizing: content-box;
  pointer-events: none;
}

/* Every block sits above the border, so nothing in a block is ever crossed by a rule. */
.nci--ribbon > .nci-section {
  z-index: 1;
  display: flow-root;
  padding: 0;
  text-align: center;
}

/* The last block keeps the page's shared foot room for the floating bar; this adds the room the last
   bow needs under the last line. */
.nci--ribbon > .nci-section--last::after {
  content: '';
  display: block;
  height: 12cqw;
}

/* ───── one pen ─────
   The kit's drawings are all drawn with the same pen, but they are printed here at very different
   sizes, so a bow at a quarter of the page reads fainter than the scrollwork at four fifths of it. The
   smaller pieces are given back the weight of the larger ones with a hairline of their own ink around
   every stroke. A mask is applied after a filter on the same element, so the filter sits on a wrapper
   and the drawing inside fills it. */
:is(.nci--ribbon, .nci-cover--ribbon) .rbn-weight {
  filter: drop-shadow(0 0 0.35px var(--rbn-wine)) drop-shadow(0 0 0.35px var(--rbn-wine));
}

.nci--ribbon .rbn-weight-light {
  filter: drop-shadow(0 0 0.3px var(--rbn-wine));
}

/* The bows and the sparkles are the smallest prints on the page, and the top two bows sit right
   against the scrollwork and the double rule, the boldest ones. The hairline alone leaves them a pale
   pink there, so the same drawing is laid three times over itself in place: the anti-aliased edge of
   every stroke builds up to the full wine, while the line keeps its own width and position. */
:is(.nci--ribbon, .nci-cover--ribbon) .rbn-bow .nci-ink,
:is(.nci--ribbon, .nci-cover--ribbon) .rbn-spark {
  -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;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-fill {
  width: 100%;
}

/* ───── bows ───── */

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-bow {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
}

/* The two top bows: the knot on the ribbon's centre line, a little inside each corner, tilted a few
   degrees as a hand ties them — and set in far enough that the tilt never takes a loop off the page.
   The right one is the left one mirrored, so the pair reads as tied by the same hand. */
:is(.nci--ribbon, .nci-cover--ribbon) .rbn-bow--tl,
:is(.nci--ribbon, .nci-cover--ribbon) .rbn-bow--tr {
  top: 2.2cqw;
  width: 22cqw;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-bow--tl {
  left: 1cqw;
  transform: rotate(-4deg);
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-bow--tr {
  right: 1cqw;
  transform: scaleX(-1) rotate(-4deg);
}

/* The last bow, knotted on the bottom run of the border (see --rbn-fb and --rbn-gap). */
.nci--ribbon .rbn-bow--end {
  left: 50%;
  bottom: calc(var(--rbn-fb) - 20.6cqw);
  width: 26cqw;
  margin-left: -13cqw;
}

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

.nci--ribbon .rbn-head {
  padding: 0 11cqw;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-caps,
:is(.nci--ribbon, .nci-cover--ribbon) .rbn-kicker {
  font-family: var(--rbn-text);
  font-size: 2.8cqw;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--rbn-wine-2);
}

.nci--ribbon .rbn-title {
  margin-top: 2.6cqw;
  font-family: var(--rbn-disp);
  font-size: 7.6cqw;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--rbn-ink);
  text-wrap: balance;
}

.nci--ribbon.nci--lang-zh .rbn-title {
  font-family: var(--rbn-cjk);
  font-size: 6.4cqw;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.nci--ribbon .rbn-caption {
  max-width: 70cqw;
  margin: 3.8cqw auto 0;
  font-size: 3.5cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--rbn-mute);
  text-wrap: balance;
}

.nci--ribbon.nci--lang-zh .rbn-caption {
  font-size: 3.1cqw;
  font-style: normal;
  line-height: 1.85;
  letter-spacing: 0.04em;
}

.nci--ribbon .rbn-foot {
  margin: 7cqw 13cqw 0;
  font-size: 3.7cqw;
  font-style: italic;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--rbn-mute);
}

.nci--ribbon.nci--lang-zh .rbn-foot {
  font-size: 3.2cqw;
  font-style: normal;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-sep {
  display: inline-block;
  flex: none;
  width: 1.3cqw;
  height: 1.3cqw;
  margin: 0 2.4cqw;
  border: 1px solid var(--rbn-wine);
  transform: rotate(45deg);
  vertical-align: middle;
}

.nci--ribbon .rbn-link {
  display: inline-block;
  padding-bottom: 1cqw;
  border-bottom: 1px solid var(--rbn-wine);
  font-size: 2.8cqw;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rbn-wine-2);
}

.nci--ribbon .rbn-linkrow {
  margin-top: 8cqw;
}

.nci--ribbon .rbn-rule {
  display: block;
  width: 30cqw;
  margin: 0 auto;
}

.nci--ribbon .rbn-spark {
  position: absolute;
  z-index: 2;
}

/* ───── photographs ───── */

/* A print on the stock: a wine keyline, a strip of paper, a finer keyline, then the picture. */
.nci--ribbon .rbn-framed {
  position: relative;
  margin: 0;
  padding: 1.9cqw;
  border: 1px solid var(--rbn-wine);
  background: var(--rbn-paper);
}

.nci--ribbon .rbn-framed::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 1cqw;
  border: 1px solid var(--rbn-hair);
  pointer-events: none;
}

.nci--ribbon .rbn-framed-img {
  display: block;
  width: 100%;
}

/* The scrollwork oval. The opening is measured off the drawing itself: the inner rule runs at 5.7% of
   its width from either side and between 12.2% and 85.1% of its height, and the photograph is set just
   inside it. The picture carries the ellipse itself (not a clipping wrapper) so the editor's selection
   outline follows the oval. */
:is(.nci--ribbon, .nci-cover--ribbon) .rbn-oval {
  position: relative;
  aspect-ratio: 733 / 1200;
  margin: 0 auto;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-oval-hole {
  position: absolute;
  left: 6.3%;
  right: 6.3%;
  top: 12.7%;
  bottom: 15.3%;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-oval-img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-oval-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
}

/* In the editor the selection outline is drawn just outside the picture, which is exactly where the
   scrollwork's inner rule runs, in the same wine — so a selected oval comes up over its frame. */
.nci--ribbon.nci--edit .rbn-oval-img:is(.nci-sel, .ncs-selected-node) {
  z-index: 3;
}

/* ───── cover ─────
   The names are held to the width between the two bows' tails, so however long they are, a second line
   starts below the tails rather than under them. */

.nci--ribbon .nci-s-cover {
  padding: 13cqw 0 12cqw;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-kicker {
  position: relative;
  z-index: 3;
  font-size: 2.9cqw;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-names {
  position: relative;
  z-index: 3;
  margin: 2cqw auto 0;
  max-width: 55cqw;
  font-family: var(--rbn-disp);
  font-size: 7.3cqw;
  font-weight: 400;
  line-height: 1.12;
  color: var(--rbn-wine);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-amp {
  margin: 0;
  font-style: italic;
  font-weight: 400;
  color: var(--rbn-wine);
}

.nci--ribbon.nci--lang-zh .rbn-names,
.nci-cover--ribbon.rbn-lang-zh .rbn-names {
  font-family: var(--rbn-cjk);
  font-size: 8cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.nci--ribbon.nci--lang-zh .rbn-amp,
.nci-cover--ribbon.rbn-lang-zh .rbn-amp {
  font-family: var(--rbn-disp);
  letter-spacing: 0;
}

.nci--ribbon .rbn-cover-art {
  position: relative;
  margin-top: 2.6cqw;
}

.nci--ribbon .rbn-oval--cover {
  width: 80cqw;
}

.nci--ribbon .rbn-spark--cover-l {
  left: 8cqw;
  top: 17cqw;
  width: 12cqw;
}

.nci--ribbon .rbn-spark--cover-r {
  right: 9cqw;
  top: 96cqw;
  width: 9cqw;
  transform: scaleX(-1) rotate(12deg);
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-date {
  margin-top: 1.4cqw;
  font-family: var(--rbn-disp);
  font-size: 5.6cqw;
  font-style: italic;
  line-height: 1.25;
  color: var(--rbn-ink);
}

.nci--ribbon.nci--lang-zh .rbn-date,
.nci-cover--ribbon.rbn-lang-zh .rbn-date {
  font-family: var(--rbn-cjk);
  font-size: 4.8cqw;
  font-style: normal;
  letter-spacing: 0.08em;
}

:is(.nci--ribbon, .nci-cover--ribbon) .rbn-when {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.6cqw;
  font-family: var(--rbn-text);
  font-size: 2.9cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--rbn-wine-2);
}

.nci--ribbon .rbn-where {
  margin: 1.8cqw 12cqw 0;
  font-size: 3.5cqw;
  line-height: 1.55;
  color: var(--rbn-ink-2);
}

.nci--ribbon.nci--lang-zh .rbn-where {
  font-size: 3.2cqw;
  letter-spacing: 0.06em;
}

.nci--ribbon .rbn-cover-foot {
  margin: 7cqw 12cqw 0;
  font-size: 3.3cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--rbn-mute);
}

.nci--ribbon.nci--lang-zh .rbn-cover-foot {
  font-size: 3cqw;
  font-style: normal;
  letter-spacing: 0.12em;
}

/* ───── story: the poster ───── */

.nci--ribbon .nci-s-story {
  padding: 12cqw 0 18cqw;
}

.nci--ribbon .rbn-poster {
  padding: 0 8cqw;
  font-family: var(--rbn-disp);
  font-weight: 400;
  color: var(--rbn-ink);
}

.nci--ribbon .rbn-poster-a {
  display: block;
  font-size: 12.4cqw;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.nci--ribbon .rbn-poster-b {
  display: block;
  margin-top: -0.6cqw;
  font-size: 17cqw;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rbn-wine);
}

.nci--ribbon.nci--lang-zh .rbn-poster {
  font-family: var(--rbn-cjk);
  font-weight: 600;
}

.nci--ribbon.nci--lang-zh .rbn-poster-a {
  font-size: 8.4cqw;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

.nci--ribbon.nci--lang-zh .rbn-poster-b {
  margin-top: 1cqw;
  font-size: 14cqw;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}

.nci--ribbon .rbn-tower-wrap {
  position: relative;
  width: 68cqw;
  margin: 6cqw auto 0;
}

.nci--ribbon .rbn-tower {
  width: 100%;
}

.nci--ribbon .rbn-spark--tower {
  left: -9cqw;
  top: 10cqw;
  width: 15cqw;
}

.nci--ribbon .rbn-lede {
  margin: 6cqw 12cqw 0;
  font-size: 4.1cqw;
  line-height: 1.62;
  white-space: pre-line;
  color: var(--rbn-ink);
  text-wrap: pretty;
}

.nci--ribbon.nci--lang-zh .rbn-lede {
  font-size: 3.5cqw;
  line-height: 1.95;
  letter-spacing: 0.04em;
}

.nci--ribbon .rbn-rule--story {
  margin-top: 16cqw;
}

.nci--ribbon .rbn-caps--solo {
  margin-top: 12cqw;
}

.nci--ribbon .rbn-framed--ask {
  margin: 6cqw 11cqw 0;
}

.nci--ribbon .rbn-framed--ask .rbn-framed-img {
  aspect-ratio: 4 / 3;
}

.nci--ribbon .rbn-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 2.6cqw;
  margin: 12cqw 10cqw 0;
}

.nci--ribbon .rbn-role {
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rbn-wine-2);
}

.nci--ribbon .rbn-pname {
  margin-top: 2.4cqw;
  font-family: var(--rbn-disp);
  font-size: 6.6cqw;
  line-height: 1.15;
  color: var(--rbn-ink);
  overflow-wrap: anywhere;
}

.nci--ribbon.nci--lang-zh .rbn-pname {
  font-family: var(--rbn-cjk);
  font-size: 6cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.nci--ribbon .rbn-pline {
  margin-top: 2.6cqw;
  font-size: 3.5cqw;
  line-height: 1.55;
  color: var(--rbn-ink-2);
  text-wrap: balance;
}

.nci--ribbon.nci--lang-zh .rbn-pline {
  font-size: 3.1cqw;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

.nci--ribbon .rbn-pair-amp {
  align-self: center;
  margin-top: 3cqw;
  font-family: var(--rbn-disp);
  font-size: 13cqw;
  font-style: italic;
  line-height: 1;
  color: var(--rbn-wine);
}

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

.nci--ribbon .nci-s-gallery {
  padding: 4cqw 0 18cqw;
}

/* The toast hangs from a bow tied above it, the two tails coming down to the print's top keyline —
   the whole bow sits on the stock, so no line of it crosses the photograph. */
.nci--ribbon .rbn-framed--toast {
  margin: 38cqw 13cqw 0;
}

.nci--ribbon .rbn-framed--toast .rbn-framed-img {
  aspect-ratio: 4 / 5;
}

.nci--ribbon .rbn-bow--hang {
  left: 50%;
  top: -29.4cqw;
  width: 27cqw;
  margin-left: -13.5cqw;
}

.nci--ribbon .rbn-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36cqw;
  align-items: center;
  gap: 5cqw;
  margin: 16cqw 11cqw 0 9cqw;
}

.nci--ribbon .rbn-verse {
  font-family: var(--rbn-disp);
  font-size: 3.9cqw;
  font-style: italic;
  line-height: 1.62;
  text-align: right;
  white-space: pre-line;
  color: var(--rbn-ink);
}

.nci--ribbon.nci--lang-zh .rbn-verse {
  font-family: var(--rbn-cjk);
  font-size: 3.4cqw;
  font-style: normal;
  line-height: 2.05;
  letter-spacing: 0.06em;
}

/* 4:5 rather than the photograph's own 3:4, so the crop panel has height to move the picture in. */
.nci--ribbon .rbn-framed--veil .rbn-framed-img {
  aspect-ratio: 4 / 5;
}

.nci--ribbon .rbn-framed--wide {
  margin: 14cqw 11cqw 0;
}

.nci--ribbon .rbn-framed--wide .rbn-framed-img {
  aspect-ratio: 4 / 3;
}

.nci--ribbon .rbn-spark--wide {
  right: -3cqw;
  top: -11cqw;
  width: 14cqw;
}

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

.nci--ribbon .nci-s-countdown {
  padding: 4cqw 0 18cqw;
}

.nci--ribbon .rbn-cd {
  margin-top: 7cqw;
}

.nci--ribbon .rbn-cd-days {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
}

.nci--ribbon .rbn-cd-days .rbn-spark {
  position: static;
  width: 13cqw;
}

.nci--ribbon .rbn-spark--cd-r {
  transform: scaleX(-1);
}

/* Lining figures: Playfair's default old-style numerals drop a 3 and a 5 below the line. */
.nci--ribbon .rbn-cd-big {
  min-width: 2ch;
  font-family: var(--rbn-disp);
  font-size: 29cqw;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rbn-wine);
}

.nci--ribbon .rbn-cd-unit {
  margin-top: 0.6cqw;
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--rbn-wine-2);
}

.nci--ribbon .rbn-cd-row {
  display: flex;
  justify-content: center;
  gap: 8cqw;
  width: 66cqw;
  margin: 7cqw auto 0;
  padding-top: 5.4cqw;
  border-top: 1px solid var(--rbn-hair);
}

.nci--ribbon .rbn-cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 12cqw;
}

.nci--ribbon .rbn-cd-n {
  font-family: var(--rbn-disp);
  font-size: 8.4cqw;
  font-style: italic;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.05;
  color: var(--rbn-ink);
}

.nci--ribbon .rbn-cd-u {
  margin-top: 1.4cqw;
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--rbn-mute);
}

.nci--ribbon .rbn-cd-done {
  margin: 8cqw 11cqw 0;
  font-family: var(--rbn-disp);
  font-size: 10cqw;
  font-style: italic;
  line-height: 1.15;
  color: var(--rbn-wine);
}

.nci--ribbon .rbn-cd-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 1.6cqw;
  margin: 7cqw 10cqw 0;
  font-size: 3.4cqw;
  line-height: 1.5;
  color: var(--rbn-ink-2);
}

/* ───── schedule: the evening, object by object ───── */

.nci--ribbon .nci-s-schedule {
  padding: 4cqw 0 18cqw;
}

.nci--ribbon .rbn-sched {
  margin: 9cqw 10cqw 0;
  padding: 0;
  list-style: none;
}

.nci--ribbon .rbn-sched-row {
  display: grid;
  grid-template-columns: 33cqw minmax(0, 1fr);
  align-items: center;
  gap: 6cqw;
  padding: 6cqw 1cqw;
  border-top: 1px solid var(--rbn-hair-2);
  text-align: left;
}

.nci--ribbon .rbn-sched-row:last-child {
  border-bottom: 1px solid var(--rbn-hair-2);
}

.nci--ribbon .rbn-sched-row--flip {
  grid-template-columns: minmax(0, 1fr) 33cqw;
  text-align: right;
}

.nci--ribbon .rbn-sched-row--flip .rbn-sched-ink {
  order: 2;
}

.nci--ribbon .rbn-sched-ink {
  display: block;
  justify-self: center;
  width: 100%;
  pointer-events: none;
}

/* Upright drawings are narrowed so every row stands about the same height. */
.nci--ribbon .rbn-sched-ink--disco-ball {
  width: 23cqw;
}

.nci--ribbon .rbn-sched-ink--cake {
  width: 19cqw;
}

.nci--ribbon .rbn-sched-ink--gift,
.nci--ribbon .rbn-sched-ink--fireworks {
  width: 26cqw;
}

.nci--ribbon .rbn-sched-at {
  font-family: var(--rbn-disp);
  font-size: 7.4cqw;
  font-style: italic;
  font-variant-numeric: lining-nums;
  line-height: 1.1;
  color: var(--rbn-wine);
}

.nci--ribbon .rbn-sched-t {
  margin-top: 1.8cqw;
  font-size: 3.9cqw;
  line-height: 1.45;
  color: var(--rbn-ink);
}

.nci--ribbon.nci--lang-zh .rbn-sched-t {
  font-size: 3.5cqw;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

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

.nci--ribbon .nci-s-venue {
  padding: 4cqw 0 18cqw;
}

.nci--ribbon .rbn-title--venue {
  font-size: 8.2cqw;
}

.nci--ribbon.nci--lang-zh .rbn-title--venue {
  font-size: 6.6cqw;
}

.nci--ribbon .rbn-addr {
  margin: 3cqw 13cqw 0;
  font-size: 3.5cqw;
  line-height: 1.55;
  color: var(--rbn-ink-2);
}

.nci--ribbon.nci--lang-zh .rbn-addr {
  font-size: 3.2cqw;
  letter-spacing: 0.04em;
}

.nci--ribbon .rbn-venue-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4cqw;
  margin: 10cqw 10cqw 0;
}

/* 4:5 for the same reason as the veil: the crop panel keeps some height to move the picture in. */
.nci--ribbon .rbn-framed--above .rbn-framed-img {
  aspect-ratio: 4 / 5;
}

.nci--ribbon .rbn-mapwrap {
  position: relative;
  padding: 1.9cqw;
  border: 1px solid var(--rbn-wine);
}

.nci--ribbon .rbn-mapwrap::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 1cqw;
  border: 1px solid var(--rbn-hair);
  pointer-events: none;
}

/* The map drawn in the same ink as everything else: a street grid in wine hairlines on the stock, one
   avenue ruled double, and the pin. */
.nci--ribbon .nci-map {
  height: 100%;
  min-height: 40cqw;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 7.4cqw, rgba(142, 27, 36, 0.16) 7.4cqw calc(7.4cqw + 1px)),
    repeating-linear-gradient(0deg, transparent 0 8.6cqw, rgba(142, 27, 36, 0.16) 8.6cqw calc(8.6cqw + 1px)),
    radial-gradient(16cqw 12cqw at 26% 76%, rgba(142, 27, 36, 0.07) 0%, transparent 74%),
    var(--rbn-paper-2);
}

.nci--ribbon .nci-map-road {
  top: 57%;
  height: 2.6cqw;
  border-top: 1px solid rgba(142, 27, 36, 0.55);
  border-bottom: 1px solid rgba(142, 27, 36, 0.55);
  background: var(--rbn-paper);
  transform: rotate(-11deg) scaleX(1.3);
}

.nci--ribbon .nci-map-pin {
  top: 37%;
  left: 50%;
  width: 5cqw;
  height: 5cqw;
  margin-left: -2.5cqw;
  background: var(--rbn-wine);
  box-shadow: 0 0 0 1.4cqw rgba(142, 27, 36, 0.13);
}

.nci--ribbon .rbn-maps {
  display: flex;
  justify-content: center;
  gap: 8cqw;
  margin-top: 6cqw;
}

.nci--ribbon .rbn-note {
  margin: 7cqw 13cqw 0;
  font-size: 3.7cqw;
  font-style: italic;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--rbn-ink-2);
}

.nci--ribbon.nci--lang-zh .rbn-note {
  font-size: 3.2cqw;
  font-style: normal;
  line-height: 1.95;
  letter-spacing: 0.05em;
}

.nci--ribbon .rbn-travel {
  margin: 9cqw 11cqw 0;
  text-align: left;
}

.nci--ribbon .rbn-travel-row {
  display: grid;
  grid-template-columns: 24cqw minmax(0, 1fr);
  gap: 4cqw;
  padding: 4.2cqw 0;
  border-top: 1px solid var(--rbn-hair-2);
}

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

.nci--ribbon .rbn-travel-k {
  font-size: 2.7cqw;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rbn-wine-2);
}

.nci--ribbon .rbn-travel-v {
  font-size: 3.4cqw;
  line-height: 1.6;
  color: var(--rbn-ink-2);
}

.nci--ribbon.nci--lang-zh .rbn-travel-v {
  font-size: 3.1cqw;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

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

.nci--ribbon .nci-s-faq {
  padding: 4cqw 0 18cqw;
}

.nci--ribbon .rbn-faq {
  margin: 8cqw 12cqw 0;
}

.nci--ribbon .rbn-faq-item {
  padding: 5.4cqw 0;
  border-top: 1px solid var(--rbn-hair-2);
}

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

.nci--ribbon .rbn-faq-q {
  font-family: var(--rbn-disp);
  font-size: 4.7cqw;
  font-style: italic;
  line-height: 1.3;
  color: var(--rbn-wine);
}

.nci--ribbon.nci--lang-zh .rbn-faq-q {
  font-family: var(--rbn-cjk);
  font-size: 3.9cqw;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.nci--ribbon .rbn-faq-a {
  margin-top: 1.8cqw;
  font-size: 3.5cqw;
  line-height: 1.6;
  color: var(--rbn-ink-2);
}

.nci--ribbon.nci--lang-zh .rbn-faq-a {
  font-size: 3.2cqw;
  line-height: 1.85;
  letter-spacing: 0.04em;
}

/* ───── rsvp: a reply card tied with the same ribbon ───── */

.nci--ribbon .nci-s-rsvp {
  padding: 16cqw 0 18cqw;
}

/* The top padding is the room the bow's tails fall into before the caps line starts. */
.nci--ribbon .rbn-card {
  position: relative;
  margin: 0 10.5cqw;
  padding: 25cqw 6.5cqw 9cqw;
}

.nci--ribbon .rbn-card-rule {
  position: absolute;
  inset: 0;
  border: 1px solid var(--rbn-wine);
  box-shadow:
    inset 0 0 0 1.1cqw var(--rbn-paper),
    inset 0 0 0 calc(1.1cqw + 1px) var(--rbn-wine);
  pointer-events: none;
  -webkit-mask: radial-gradient(14.6cqw 6cqw at 50% 0.55cqw, transparent 98%, #000 100%);
  mask: radial-gradient(14.6cqw 6cqw at 50% 0.55cqw, transparent 98%, #000 100%);
}

.nci--ribbon .rbn-bow--card {
  left: 50%;
  top: -7.3cqw;
  width: 28cqw;
  margin-left: -14cqw;
}

.nci--ribbon .rbn-head--card {
  padding: 0;
}

.nci--ribbon .rbn-head--card .rbn-title {
  font-size: 7cqw;
}

.nci--ribbon.nci--lang-zh .rbn-head--card .rbn-title {
  font-size: 6cqw;
}

.nci--ribbon .rbn-by {
  margin-top: 3cqw;
  font-size: 3.4cqw;
  font-style: italic;
  color: var(--rbn-mute);
}

.nci--ribbon.nci--lang-zh .rbn-by {
  font-size: 3cqw;
  font-style: normal;
  letter-spacing: 0.06em;
}

.nci--ribbon .rbn-form {
  margin-top: 6cqw;
  text-align: left;
}

.nci--ribbon .rbn-row {
  padding: 3.4cqw 0 1.6cqw;
  border-bottom: 1px solid var(--rbn-hair);
}

.nci--ribbon .rbn-row.is-bad {
  border-bottom-color: var(--rbn-wine);
}

.nci--ribbon .rbn-row-l {
  display: block;
  font-size: 2.7cqw;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rbn-wine-2);
}

.nci--ribbon .rbn-row-i {
  width: 100%;
  padding: 1.4cqw 0 0.6cqw;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--rbn-text);
  font-size: 4.4cqw;
  color: var(--rbn-ink);
  outline: none;
}

.nci--ribbon .rbn-row-i:focus {
  background: rgba(142, 27, 36, 0.06);
}

.nci--ribbon .rbn-err {
  padding-top: 1.4cqw;
  font-size: max(12px, 3cqw);
  font-style: normal;
  color: var(--rbn-wine);
}

.nci--ribbon .rbn-choice {
  display: grid;
  gap: 2.6cqw;
  margin: 6cqw 0 2cqw;
}

.nci--ribbon .rbn-choice-btn {
  padding: 3.2cqw 4cqw;
  border: 1px solid var(--rbn-wine);
  border-radius: 999px;
  background: transparent;
  font-family: var(--rbn-disp);
  font-size: 4.3cqw;
  font-style: italic;
  line-height: 1.3;
  color: var(--rbn-wine);
  text-align: center;
  transition: background-color 160ms, color 160ms;
}

.nci--ribbon.nci--lang-zh .rbn-choice-btn {
  font-family: var(--rbn-cjk);
  font-size: 3.7cqw;
  font-style: normal;
  letter-spacing: 0.08em;
}

.nci--ribbon .rbn-choice-btn[aria-pressed='true'] {
  background: var(--rbn-wine);
  color: var(--rbn-paper);
}

.nci--ribbon .rbn-choice-btn:disabled {
  cursor: default;
}

.nci--ribbon .rbn-row--count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4cqw;
  padding-bottom: 3cqw;
}

.nci--ribbon .rbn-step {
  display: flex;
  flex: none;
  align-items: center;
  gap: 3.6cqw;
}

.nci--ribbon .rbn-step button {
  width: 8cqw;
  height: 8cqw;
  padding: 0;
  border: 1px solid var(--rbn-wine);
  border-radius: 50%;
  background: transparent;
  font-family: var(--rbn-disp);
  font-size: 4.4cqw;
  line-height: 1;
  color: var(--rbn-wine);
}

.nci--ribbon .rbn-step button:disabled {
  opacity: 0.35;
}

.nci--ribbon .rbn-step span {
  min-width: 5cqw;
  font-family: var(--rbn-disp);
  font-size: 6cqw;
  font-style: italic;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
  color: var(--rbn-ink);
}

.nci--ribbon .rbn-row--diet {
  padding-bottom: 3.6cqw;
}

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

.nci--ribbon .rbn-tag {
  padding: 1.6cqw 3.2cqw;
  border: 1px solid var(--rbn-hair);
  border-radius: 999px;
  background: transparent;
  font-family: var(--rbn-text);
  font-size: 3.2cqw;
  line-height: 1.3;
  color: var(--rbn-ink-2);
}

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

.nci--ribbon .rbn-tag:disabled {
  opacity: 0.45;
}

.nci--ribbon .rbn-submit {
  width: 100%;
  margin-top: 8cqw;
  padding: 4.2cqw 0;
  border: none;
  border-radius: 999px;
  background: var(--rbn-wine);
  font-family: var(--rbn-text);
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--rbn-paper);
}

.nci--ribbon .rbn-submit:disabled {
  opacity: 0.55;
}

.nci--ribbon .rbn-done {
  margin-top: 6cqw;
}

.nci--ribbon .rbn-done-ink {
  display: block;
  width: 30cqw;
  margin: 0 auto;
  pointer-events: none;
}

.nci--ribbon .rbn-done-t {
  margin-top: 5cqw;
  font-family: var(--rbn-disp);
  font-size: 6.6cqw;
  font-style: italic;
  line-height: 1.2;
  color: var(--rbn-wine);
}

.nci--ribbon.nci--lang-zh .rbn-done-t {
  font-family: var(--rbn-cjk);
  font-size: 5.4cqw;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.nci--ribbon .rbn-done-b {
  margin-top: 3cqw;
  font-size: 3.6cqw;
  line-height: 1.6;
  color: var(--rbn-ink-2);
}

.nci--ribbon .rbn-req {
  margin-left: 0.4em;
  color: var(--rbn-wine);
}

.nci--ribbon .rbn-choice + .rbn-err {
  margin-bottom: 2cqw;
  padding-top: 0;
}

.nci--ribbon .rbn-err--server {
  padding-top: 6cqw;
}

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

.nci--ribbon .rbn-done-when {
  margin-top: 2cqw;
  font-size: 2.8cqw;
  color: var(--rbn-mute);
}

.nci--ribbon .rbn-done-edit {
  margin-top: 6cqw;
  padding: 0 0 1cqw;
  border: none;
  border-bottom: 1px solid var(--rbn-wine);
  background: none;
  font-size: 2.8cqw;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--rbn-wine-2);
}

/* ───── wishes: the guests' toasts ───── */

.nci--ribbon .nci-s-wishes {
  padding: 4cqw 0 0;
}

.nci--ribbon .rbn-wish-ink {
  display: block;
  width: 27cqw;
  margin: 0 auto 7cqw;
  pointer-events: none;
}

.nci--ribbon .rbn-wishform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3cqw 4cqw;
  margin: 9cqw 12cqw 0;
  text-align: left;
}

.nci--ribbon .rbn-wish-in {
  grid-column: 1 / -1;
  width: 100%;
  padding: 2.6cqw 0;
  border: none;
  border-bottom: 1px solid var(--rbn-hair);
  border-radius: 0;
  background: transparent;
  font-family: var(--rbn-text);
  font-size: 4cqw;
  color: var(--rbn-ink);
  outline: none;
}

.nci--ribbon .rbn-wish-in--name {
  grid-column: 1;
}

.nci--ribbon .rbn-wish-in::placeholder {
  color: var(--rbn-mute);
  font-style: italic;
}

.nci--ribbon .rbn-wish-in:focus {
  border-bottom-color: var(--rbn-wine);
}

.nci--ribbon .rbn-wish-err {
  grid-column: 1 / -1;
  padding-top: 0;
}

.nci--ribbon .rbn-wish-post {
  grid-column: 2;
  grid-row: 1;
  padding: 2cqw 5.4cqw;
  border: 1px solid var(--rbn-wine);
  border-radius: 999px;
  background: transparent;
  font-family: var(--rbn-disp);
  font-size: 3.8cqw;
  font-style: italic;
  line-height: 1.3;
  color: var(--rbn-wine);
}

.nci--ribbon.nci--lang-zh .rbn-wish-post {
  font-family: var(--rbn-cjk);
  font-size: 3.4cqw;
  font-style: normal;
}

.nci--ribbon .rbn-wish-post:disabled {
  opacity: 0.55;
}

.nci--ribbon .rbn-wishes {
  margin: 10cqw 12cqw 0;
}

.nci--ribbon .rbn-rule--wish {
  width: 20cqw;
  margin-bottom: 6cqw;
}

.nci--ribbon .rbn-wish + .rbn-wish {
  margin-top: 6cqw;
}

.nci--ribbon .rbn-wish-text {
  font-family: var(--rbn-disp);
  font-size: 4.4cqw;
  font-style: italic;
  line-height: 1.45;
  color: var(--rbn-ink);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.nci--ribbon.nci--lang-zh .rbn-wish-text {
  font-family: var(--rbn-cjk);
  font-size: 3.6cqw;
  font-style: normal;
  line-height: 1.85;
  letter-spacing: 0.04em;
}

.nci--ribbon .rbn-wish-from {
  margin-top: 2.4cqw;
  font-size: 2.7cqw;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--rbn-wine-2);
}

.nci--ribbon .rbn-wish-empty {
  padding: 5cqw 0;
  font-size: 3.5cqw;
  font-style: italic;
  color: var(--rbn-mute);
}

/* Noto Serif SC has no italic, and a slanted CJK face is a browser's guess, not a design. */
.nci--ribbon.nci--lang-zh .rbn-wish-empty,
.nci--ribbon.nci--lang-zh .rbn-wish-in::placeholder {
  font-size: 3.2cqw;
  font-style: normal;
  letter-spacing: 0.05em;
}

.nci--ribbon .rbn-close {
  margin-top: 18cqw;
}

.nci--ribbon .rbn-oval--close {
  width: 58cqw;
}

.nci--ribbon .rbn-close-line {
  margin: 5cqw 12cqw 0;
  font-family: var(--rbn-disp);
  font-size: 6.2cqw;
  font-style: italic;
  line-height: 1.3;
  white-space: pre-line;
  color: var(--rbn-wine);
}

.nci--ribbon.nci--lang-zh .rbn-close-line {
  font-family: var(--rbn-cjk);
  font-size: 5cqw;
  font-style: normal;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.1em;
}

.nci--ribbon .rbn-close-sign {
  margin-top: 4cqw;
  font-size: 3.4cqw;
  font-style: italic;
  color: var(--rbn-mute);
}

.nci--ribbon.nci--lang-zh .rbn-close-sign {
  font-size: 3cqw;
  font-style: normal;
  letter-spacing: 0.12em;
}

/* ───── Guest cover overlay ─────
   The page's own first screen, with the way in under the date. The oval is sized against the screen's
   height as well as its width: on a short phone it gives up width rather than push the button off the
   screen. The overlay is a size container, so the frame and the type keep sizing in cqw. */

.nci-cover--ribbon {
  container-type: size;
  display: block;
  padding: 0;
  overflow: hidden;
  background-color: var(--rbn-paper);
  background-image: linear-gradient(90deg, rgba(120, 70, 40, 0.045), transparent 14%, transparent 86%, rgba(120, 70, 40, 0.045));
  color: var(--rbn-ink);
  font-family: var(--rbn-text);
  text-align: center;
}

.nci-cover--ribbon .rbn-cv-frame {
  bottom: 5cqw;
}

.nci-cover--ribbon .rbn-cv-frame::before {
  top: 0;
  left: var(--rbn-band);
  right: var(--rbn-band);
  bottom: var(--rbn-band);
}

.nci-cover--ribbon .rbn-cv-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 13cqw 8cqw 10cqw;
}

.nci-cover--ribbon .rbn-cv-art {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  margin: 2cqw 0 1cqw;
}

/* The oval takes whatever height the names, the date and the button leave it — up to its full 80cqw
   width — and its width follows through the drawing's aspect ratio, so long names or a short phone
   shrink the portrait instead of pushing it under the type. */
.nci-cover--ribbon .rbn-oval--cv {
  flex: none;
  width: auto;
  height: min(100%, 131cqw);
}

.nci-cover--ribbon .rbn-cv-open {
  margin-top: 5cqw;
  padding: 3.2cqw 8cqw;
  border: 1px solid var(--rbn-wine);
  border-radius: 999px;
  background: transparent;
  font-family: var(--rbn-text);
  font-size: 2.9cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--rbn-wine-2);
  transition: background-color 180ms, color 180ms;
}

.nci-cover--ribbon .rbn-cv-open:hover,
.nci-cover--ribbon .rbn-cv-open:focus-visible {
  background: var(--rbn-wine);
  color: var(--rbn-paper);
}

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

/* Opening: the two bows lift off the ribbon and the card fades on the page underneath. */
.nci-cover--ribbon.rbn-cv--opening {
  animation: rbn-open 640ms cubic-bezier(0.3, 0.6, 0.2, 1) forwards;
}

.nci-cover--ribbon.rbn-cv--opening .rbn-cv-bow {
  animation: rbn-untie 560ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

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

@keyframes rbn-untie {
  to {
    translate: 0 -24cqw;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--ribbon.rbn-cv--opening,
  .nci-cover--ribbon.rbn-cv--opening .rbn-cv-bow {
    animation: none;
  }

  .nci-cover--ribbon .rbn-cv-open,
  .nci--ribbon .rbn-choice-btn {
    transition: none;
  }
}

/* ───── Floating bar — two rounds in the foot of the right margin ─────
   The page is set on a centre axis, so the foot of the centre is where the bar would rest on the reply
   button, the toasts and the last bow. The right margin, between the ribbon and the type, is empty the
   whole length of the page. */

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

.nci-float--ribbon button,
.nci-float--ribbon .studio-music button {
  width: 38px;
  height: 38px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--rbn-text);
  font-size: 0;
  letter-spacing: 0;
  box-shadow: 0 3px 12px rgba(74, 20, 24, 0.16);
  backdrop-filter: none;
}

.nci-float--ribbon .studio-music button,
.nci-float--ribbon .nci-float-music {
  display: flex;
  align-items: center;
  border: 1px solid var(--rbn-wine);
  background: rgba(248, 241, 228, 0.96);
  font-size: 16px;
  line-height: 1;
  color: var(--rbn-wine);
}

.nci-float--ribbon .studio-music button span {
  font-size: 0;
}

.nci-float--ribbon .studio-music button[aria-pressed='true'],
.nci-float--ribbon .nci-float-music[aria-pressed='true'] {
  background: var(--rbn-wine);
  color: var(--rbn-paper);
}

.nci-float--ribbon .nci-float-dot {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: inherit;
}

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

.nci-float--ribbon .nci-float-share {
  border: 1px solid var(--rbn-wine);
  background: var(--rbn-wine);
  color: var(--rbn-paper);
}

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