/* Nicecard demo — "Sage Arch" (鼠尾草拱门) invitation style. Everything is scoped under .nci--sage,
   .nci-cover--sage and .nci-float--sage so the other styles are untouched; new classes use the sga-
   prefix. The page is a size container, so every measurement is in cqw and the layout keeps its
   proportions in the 372px phone frame, the 390px editor canvas and a 390px phone. The cover overlay
   is a size container of its own and measures in --u (see the overlay block at the end).
   Material: the kit's cold-press watercolour paper, tiled across the whole page; every painted thing
   on it is a kit piece, placed and scaled here and never redrawn. Pieces are ornament, so each one is
   pointer-events: none and a photo slot or a field under it stays one tap away in the editor.
   Colour: the ink is a deep olive (#36402f, 10:1 on the paper); the gold that carries the names and
   the headings is a brass gradient clipped to the letters (display sizes only); the small gold and
   sage words use the darker --sga-gold-ink (5.6:1) and --sga-sage-ink (5.4:1). The page stays inside
   the painting's own palette: sage, olive, cypress, cream, a little rose from the kit's flowers.
   Type: Great Vibes for the gold script (Noto Serif SC in 中文), Cinzel for small caps, EB Garamond for
   the body and Cormorant Garamond for figures. Nothing a guest has to read is set below 2.6cqw, about
   10px on a 390 phone, nor below 10px on a narrower one. */

.nci--sage,
.nci-cover--sage,
.nci-float--sage {
  --sga-paper: #f4efe4;
  --sga-card: #faf7f0;
  --sga-ink: #36402f;
  --sga-ink-2: #4b5642;
  --sga-mute: #5f6554;
  --sga-sage: #8a9b76;
  --sga-sage-ink: #4f6347;
  --sga-gold: #b08d4a;
  --sga-gold-ink: #7a5a21;
  /* Every stop clears 3:1 on the paper, so even the brightest part of a gilded heading stays legible. */
  --sga-gold-grad: linear-gradient(104deg, #7a5920 0%, #a6823d 28%, #86642a 50%, #a8843f 72%, #7d5c23 100%);
  --sga-hair: rgba(143, 107, 44, 0.45);
  --sga-hair-2: rgba(54, 64, 47, 0.13);
  --sga-g: 9cqw;
  --sga-script: 'Great Vibes', 'Parisienne', 'Noto Serif SC', cursive;
  --sga-cjk: 'Noto Serif SC', 'Songti SC', serif;
  --sga-serif: 'EB Garamond', 'Noto Serif SC', Georgia, serif;
  --sga-caps: 'Cinzel', 'Noto Serif SC', Georgia, serif;
  --sga-num: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sga-tile: url(assets/watercolor/watercolor-paper.webp);
}

.nci--sage {
  --u: 1cqw;
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  /* The tile is one page wide, so its vertical seams fall on the page edges; the ::before below lays
     it again half a tile lower at half strength, which softens the horizontal seams to nothing. */
  background: var(--sga-paper) var(--sga-tile) 0 0 / 100% auto repeat;
  color: var(--sga-ink);
  font-family: var(--sga-serif);
  text-align: center;
  --nci-bg: var(--sga-paper);
  --nci-soft: #ece6d8;
  --nci-slot-line: rgba(122, 90, 33, 0.5);
  --nci-slot-ink: var(--sga-ink-2);
  --nci-hint: rgba(122, 90, 33, 0.5);
  --nci-sel: #7a5a21;
}

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

.nci--sage::before,
.nci-cover--sage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: var(--sga-tile) 0 50cqw / 100% auto repeat;
  opacity: 0.5;
}

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

.nci--sage .nci-s-cover {
  padding-bottom: 16cqw;
}

/* ───── painted pieces ───── */

.nci--sage .sga-paint,
.nci-cover--sage .sga-paint {
  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 sage.js) paints its kit file from ::before; the host
   element is an empty box the placing rules size by width, holding the painting's own proportions. */
.nci--sage .sga-over {
  display: block;
  pointer-events: none;
}

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

.nci--sage .sga-dots,
.nci--sage .sga-sched-lead {
  pointer-events: none;
}

/* A corner piece is painted to sit in the corner of a sheet, so two of its edges are cut straight.
   On the page's side edge that cut runs off the page; mid-page, the other one would read as a strip
   torn off, so it is let thin out into the paper instead. */
.nci--sage .sga-fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
}

.nci--sage .sga-fade-bottom {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 38%);
  mask-image: linear-gradient(to top, transparent 0%, #000 38%);
}

/* ───── gold ─────
   A brass gradient clipped to the letters. It is set on the block and reaches the text of the field
   inside it; a colour the couple picks in the editor lands on the field itself and simply paints over
   the gradient. */
.nci--sage .sga-gold,
.nci-cover--sage .sga-gold {
  background-image: var(--sga-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: var(--sga-gold-ink);
}

/* ───── arched openings ─────
   A radius far larger than the box is clamped to it, so the top is always a true semicircle whatever
   the proportion. The gold hairline is drawn a paper's width outside the photograph and follows the
   same curve. */
.nci--sage .sga-arch,
.nci-cover--sage .sga-arch {
  position: relative;
}

.nci--sage .sga-arch-img,
.nci-cover--sage .sga-arch-img {
  width: 100%;
  height: 100%;
  border-radius: 999px 999px 0.6cqw 0.6cqw;
}

.nci--sage .sga-arch::after,
.nci-cover--sage .sga-arch::after {
  content: '';
  position: absolute;
  inset: -1.8cqw;
  border: 1px solid var(--sga-hair);
  border-radius: 999px 999px 1cqw 1cqw;
  pointer-events: none;
}

/* ───── the voice every block opens in ───── */

.nci--sage .sga-head {
  padding: 0 var(--sga-g);
}

.nci--sage .sga-caps,
.nci-cover--sage .sga-caps {
  font-family: var(--sga-caps);
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--sga-sage-ink);
}

.nci--sage .sga-title {
  margin-top: 1.6cqw;
  font-family: var(--sga-script);
  font-size: 10.4cqw;
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.nci--sage.nci--lang-zh .sga-title {
  margin-top: 2.4cqw;
  font-family: var(--sga-cjk);
  font-size: 6.2cqw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

.nci--sage .sga-say,
.nci--sage .sga-foot {
  margin: 5cqw var(--sga-g) 0;
  font-size: 3.9cqw;
  font-style: italic;
  line-height: 1.7;
  color: var(--sga-ink-2);
  text-wrap: pretty;
}

.nci--sage.nci--lang-zh .sga-say,
.nci--sage.nci--lang-zh .sga-foot {
  font-size: 3.6cqw;
  font-style: normal;
  line-height: 1.95;
  letter-spacing: 0.04em;
}

.nci--sage .sga-cap {
  margin: 5cqw var(--sga-g) 0;
  font-size: 3.5cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--sga-mute);
}

.nci--sage.nci--lang-zh .sga-cap {
  font-size: 3.2cqw;
  font-style: normal;
  letter-spacing: 0.1em;
}

.nci--sage .sga-linkrow {
  margin-top: 6cqw;
}

.nci--sage .sga-link {
  display: inline-block;
  padding: 0 0 1cqw;
  border-bottom: 1px solid var(--sga-hair);
  font-family: var(--sga-caps);
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--sga-gold-ink);
}

/* ───── cover: the avenue ─────
   One scene, shared by the page and the guest overlay, measured in --u (one cqw on the page). The
   photograph's foot sits where the villa gate stands in the painting — 62% down the avenue piece —
   so the gravel path runs from the bottom of the scene straight up to the couple, and the cypress
   rows rise on both sides of the arch. */

.nci--sage .sga-scene,
.nci-cover--sage .sga-scene {
  position: relative;
  width: 100%;
  height: calc(146 * var(--u));
}

.nci--sage .sga-scene-sky,
.nci-cover--sage .sga-scene-sky {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100%, calc(112 * var(--u)));
  transform: translateX(-50%);
  opacity: 0.94;
}

.nci--sage .sga-scene-kicker,
.nci-cover--sage .sga-scene-kicker {
  position: absolute;
  top: calc(5.4 * var(--u));
  left: calc(6 * var(--u));
  right: calc(6 * var(--u));
  font-size: max(10px, calc(2.6 * var(--u)));
  color: var(--sga-ink-2);
}

.nci--sage.nci--lang-zh .sga-scene-kicker,
.nci-cover--sage.sga-cv--zh .sga-scene-kicker {
  font-size: calc(3.3 * var(--u));
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

/* 150u wide, so only the middle two-thirds of the avenue is on screen: the two tallest cypresses
   stand at the page edges and the villa's own trees are behind the photograph. */
.nci--sage .sga-scene-avenue,
.nci-cover--sage .sga-scene-avenue {
  position: absolute;
  left: 50%;
  top: calc(46 * var(--u));
  width: calc(150 * var(--u));
  transform: translateX(-50%);
}

.nci--sage .sga-arch--cover,
.nci-cover--sage .sga-arch--cover {
  position: absolute;
  top: calc(15 * var(--u));
  left: 50%;
  width: calc(58 * var(--u));
  height: calc(93 * var(--u));
  transform: translateX(-50%);
}

/* The photograph's foot thins into the gravel rather than stopping on it: the last few percent of
   the picture — bouquet and hem, never a face — dissolve into the painted path. */
.nci--sage .sga-arch--cover .sga-arch-img,
.nci-cover--sage .sga-arch--cover .sga-arch-img,
.nci--sage .sga-arch--cover::after,
.nci-cover--sage .sga-arch--cover::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

.nci--sage .sga-arch--cover::after,
.nci-cover--sage .sga-arch--cover::after {
  inset: calc(-2 * var(--u));
  bottom: 0;
  border-bottom: none;
  border-radius: 999px 999px 0 0;
  border-color: rgba(143, 107, 44, 0.55);
}

.nci--sage .sga-names,
.nci-cover--sage .sga-names {
  font-family: var(--sga-script);
  font-weight: 400;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.nci--sage .sga-names--cover,
.nci-cover--sage .sga-names--cover {
  position: relative;
  margin: calc(-1 * var(--u)) calc(5 * var(--u)) 0;
  font-size: calc(12.6 * var(--u));
}

.nci--sage .sga-amp,
.nci-cover--sage .sga-amp {
  margin: 0 0.3em 0 0.22em;
  font-size: 0.78em;
}

.nci--sage.nci--lang-zh .sga-names,
.nci-cover--sage.sga-cv--zh .sga-names {
  font-family: var(--sga-cjk);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

.nci--sage.nci--lang-zh .sga-names--cover,
.nci-cover--sage.sga-cv--zh .sga-names--cover {
  margin-top: calc(2 * var(--u));
  font-size: calc(8.6 * var(--u));
}

.nci--sage.nci--lang-zh .sga-amp,
.nci-cover--sage.sga-cv--zh .sga-amp {
  margin: 0 0.3em;
  font-size: 0.56em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: 0.3em;
}

.nci--sage .sga-when {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2.4cqw;
  margin-top: 3.6cqw;
  font-family: var(--sga-caps);
  font-size: 3.1cqw;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--sga-ink);
}

.nci--sage .sga-when i {
  font-style: normal;
  color: var(--sga-gold);
}

.nci--sage .sga-where {
  margin: 2.6cqw var(--sga-g) 0;
  font-size: 3.5cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--sga-mute);
}

.nci--sage.nci--lang-zh .sga-where {
  font-style: normal;
  font-size: 3.3cqw;
  letter-spacing: 0.08em;
}

/* ───── story: the crest, the letter, the two of them ───── */

.nci--sage .sga-crest {
  position: relative;
  height: 76cqw;
}

.nci--sage .sga-crest-tl {
  position: absolute;
  top: 0;
  left: -3cqw;
  width: 46cqw;
}

.nci--sage .sga-crest-tr {
  position: absolute;
  top: 0;
  right: -3cqw;
  width: 42cqw;
}

.nci--sage .sga-wreath {
  position: absolute;
  top: 14cqw;
  left: 50%;
  width: 58cqw;
  transform: translateX(-50%);
}

.nci--sage .sga-wreath-art {
  width: 100%;
}

/* The ring's empty middle is centred 43% down the piece and its flat ribbon band 79% down. */
/* The initials are Cormorant italic capitals rather than the script: a script capital carries its
   own swash, and two of them either side of an ampersand tangle. The ampersand stays in the script. */
.nci--sage .sga-wreath-mono {
  position: absolute;
  top: 43%;
  left: 14%;
  right: 14%;
  transform: translateY(-50%);
  font-family: var(--sga-num);
  font-size: 14cqw;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.nci--sage .sga-wreath-mono i {
  margin: 0 0.1em;
  font-family: var(--sga-script);
  font-size: 0.6em;
  font-style: normal;
}

.nci--sage.nci--lang-zh .sga-wreath-mono {
  font-family: var(--sga-cjk);
  font-size: 9.4cqw;
  font-style: normal;
  font-weight: 600;
}

.nci--sage.nci--lang-zh .sga-wreath-mono i {
  margin: 0 0.18em;
  font-family: var(--sga-script);
  font-weight: 400;
  font-size: 0.8em;
}

.nci--sage .sga-wreath-date {
  position: absolute;
  top: 79.5%;
  left: 28%;
  right: 28%;
  transform: translateY(-50%);
  font-family: var(--sga-caps);
  font-size: max(10px, 2.6cqw);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  white-space: nowrap;
  color: #33412b;
}

.nci--sage .sga-letter {
  margin: 6cqw var(--sga-g) 0;
  font-size: 3.95cqw;
  line-height: 1.8;
  color: var(--sga-ink);
  text-wrap: pretty;
}

.nci--sage.nci--lang-zh .sga-letter {
  font-size: 3.7cqw;
  line-height: 2.1;
  letter-spacing: 0.04em;
}

.nci--sage .sga-sign {
  margin: 5cqw var(--sga-g) 0;
  font-size: 3.5cqw;
  font-style: italic;
  color: var(--sga-gold-ink);
}

.nci--sage.nci--lang-zh .sga-sign {
  font-size: 3.2cqw;
  font-style: normal;
  letter-spacing: 0.12em;
}

.nci--sage .sga-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7cqw;
  margin: 14cqw 8cqw 0;
}

.nci--sage .sga-person-art {
  position: relative;
  margin-bottom: 6cqw;
}

.nci--sage .sga-arch--pair {
  width: 100%;
  aspect-ratio: 3 / 4.3;
}

/* Ferns up the outer foot of the left arch, roses up the outer foot of the right: the dense side of
   each corner piece is off the photograph, only its fringe crosses the frame. */
.nci--sage .sga-person-leaf {
  position: absolute;
  bottom: -7cqw;
}

.nci--sage .sga-person-leaf--a {
  left: -12cqw;
  width: 27cqw;
}

.nci--sage .sga-person-leaf--b {
  right: -12cqw;
  width: 30cqw;
}

.nci--sage .sga-person-role {
  font-size: max(10px, 2.6cqw);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

.nci--sage.nci--lang-zh .sga-person-role {
  font-size: 2.9cqw;
  letter-spacing: 0.16em;
}

.nci--sage .sga-person-name {
  margin-top: 1cqw;
  font-family: var(--sga-script);
  font-size: 9cqw;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.nci--sage.nci--lang-zh .sga-person-name {
  margin-top: 1.6cqw;
  font-family: var(--sga-cjk);
  font-size: 5.6cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.nci--sage .sga-person-line {
  margin-top: 2cqw;
  font-size: 3.4cqw;
  line-height: 1.6;
  color: var(--sga-ink-2);
  text-wrap: pretty;
}

.nci--sage.nci--lang-zh .sga-person-line {
  font-size: 3.2cqw;
  line-height: 1.85;
}

/* ───── countdown: the flower arch ─────
   The kit's ceremony arch at 108cqw; its clear opening runs from 30% to 71% of its width and from 30%
   of its height down to its feet. The photograph stands in that opening, wider than it, and the
   painting is laid over it, so the drape and the post flowers fall in front of the picture's edges. */

.nci--sage .sga-bower {
  position: relative;
  height: 122cqw;
  margin-top: 5cqw;
}

.nci--sage .sga-bower-art {
  position: absolute;
  top: 0;
  left: 50%;
  width: 108cqw;
  transform: translateX(-50%);
}

/* The photograph runs well behind both posts, so no straight edge of it shows between the drapes and
   the couple have air on both sides inside the opening; the last few percent of each side and of the
   foot thin out, so wherever a post is sparse the picture fades into it instead of stopping. */
.nci--sage .sga-bower-img {
  position: absolute;
  top: 29cqw;
  left: 21cqw;
  width: 58cqw;
  height: 88cqw;
  border-radius: 999px 999px 0 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to top, transparent 0%, #000 6%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to top, transparent 0%, #000 6%);
  mask-composite: intersect;
}

.nci--sage .sga-figures {
  display: flex;
  justify-content: center;
  gap: 5.4cqw;
  margin-top: 5cqw;
}

.nci--sage .sga-figure {
  min-width: 13cqw;
}

.nci--sage .sga-figure-n {
  display: block;
  font-family: var(--sga-num);
  font-size: 11.5cqw;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--sga-ink);
}

.nci--sage .sga-figure-u {
  display: block;
  margin-top: 1.6cqw;
  font-family: var(--sga-caps);
  font-size: max(10px, 2.6cqw);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--sga-gold-ink);
}

.nci--sage .sga-cd-done {
  margin-top: 5cqw;
  font-family: var(--sga-script);
  font-size: 10cqw;
  color: var(--sga-gold-ink);
}

.nci--sage .sga-ribbon {
  position: relative;
  width: 76cqw;
  margin: 7cqw auto 0;
}

.nci--sage .sga-ribbon-art {
  width: 100%;
}

/* The flat band of ribbon-v2 is centred 44% down the piece, between 27% and 73% of its width. */
.nci--sage .sga-ribbon-t {
  position: absolute;
  top: 44%;
  left: 24%;
  right: 24%;
  transform: translateY(-50%);
  font-family: var(--sga-caps);
  font-size: 3.4cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  white-space: nowrap;
  color: #33412b;
}

.nci--sage .sga-dateline {
  margin-top: 3cqw;
  font-size: 3.6cqw;
  font-style: italic;
  color: var(--sga-mute);
}

.nci--sage .sga-dateline i {
  margin: 0 1.6cqw;
  font-style: normal;
  color: var(--sga-gold);
}

.nci--sage.nci--lang-zh .sga-dateline {
  font-style: normal;
  font-size: 3.3cqw;
  letter-spacing: 0.1em;
}

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

/* The wildflower borders at 116cqw: the empty channel between the stems runs from 27% to 72% of the
   piece, which puts it 52cqw wide and on the page's axis. */
.nci--sage .sga-meadow {
  position: relative;
  min-height: 172cqw;
  margin-top: 6cqw;
}

.nci--sage .sga-meadow-art {
  position: absolute;
  top: 0;
  left: 50%;
  width: 116cqw;
  transform: translateX(-50%);
}

.nci--sage .sga-meadow-in {
  position: relative;
  padding: 10cqw 25cqw 6cqw;
}

.nci--sage .sga-arch--tall {
  width: 100%;
  aspect-ratio: 3 / 4.3;
}

.nci--sage .sga-meadow-in .sga-cap {
  margin: 5cqw 0 0;
}

.nci--sage .sga-verse {
  margin-top: 7cqw;
  font-size: 3.7cqw;
  font-style: italic;
  line-height: 1.8;
  color: var(--sga-ink);
  text-wrap: balance;
}

.nci--sage.nci--lang-zh .sga-verse {
  font-size: 3.5cqw;
  font-style: normal;
  line-height: 2.1;
  letter-spacing: 0.06em;
}

.nci--sage .sga-arcade {
  position: relative;
  margin-top: 12cqw;
  padding-bottom: 12cqw;
}

.nci--sage .sga-arcade-hills {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 116cqw;
  transform: translateX(-50%);
}

.nci--sage .sga-arcade-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5cqw;
  margin: 0 9cqw;
}

.nci--sage .sga-arch--col {
  aspect-ratio: 1 / 1.62;
}

.nci--sage .sga-arch--col::after {
  inset: -1.3cqw;
}

.nci--sage .sga-porch {
  position: relative;
  margin-top: 14cqw;
}

.nci--sage .sga-arch--wide {
  width: 76cqw;
  height: 58cqw;
  margin: 0 auto;
}

/* Only the fringe of each piece crosses the frame; its dense side stays in the page margin. */
.nci--sage .sga-porch-l,
.nci--sage .sga-porch-r {
  position: absolute;
  bottom: -9cqw;
}

.nci--sage .sga-porch-l {
  left: -9cqw;
  width: 30cqw;
}

.nci--sage .sga-porch-r {
  right: -9cqw;
  width: 32cqw;
}

/* A basket-handle arch for the one landscape frame: a semicircle across 82cqw would take half the
   picture away. */
.nci--sage .sga-arch--wide .sga-arch-img {
  border-radius: 50% 50% 0.6cqw 0.6cqw / 26% 26% 0.6cqw 0.6cqw;
}

.nci--sage .sga-arch--wide::after {
  border-radius: 50% 50% 1cqw 1cqw / 26% 26% 1cqw 1cqw;
}

/* ───── schedule: painted objects on the axis ─────
   Hour, leader, object, leader, event: the objects sit on the page's centre line and the dotted
   leaders run out from them both ways. The dots are type — a leader line, not an ornament. */

.nci--sage .sga-sched {
  display: grid;
  gap: 3.4cqw;
  margin: 8cqw 5cqw 0;
}

.nci--sage .sga-sched-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22cqw minmax(0, 1fr);
  align-items: center;
  column-gap: 1.6cqw;
}

.nci--sage .sga-sched-side {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  min-width: 0;
}

.nci--sage .sga-sched-at {
  flex: 0 0 auto;
  font-family: var(--sga-num);
  font-size: 5.4cqw;
  font-weight: 500;
  line-height: 1.1;
  text-align: left;
  font-variant-numeric: lining-nums;
  color: var(--sga-gold-ink);
}

.nci--sage .sga-sched-lead {
  flex: 1 1 auto;
  min-width: 3cqw;
  height: 2px;
  background-image: radial-gradient(circle, rgba(122, 90, 33, 0.7) 0.6px, transparent 1.1px);
  background-size: 1.6cqw 2px;
  background-repeat: repeat-x;
  background-position: center;
}

.nci--sage .sga-sched-obj {
  display: block;
}

.nci--sage .sga-sched-art {
  width: 100%;
  height: 22cqw;
  object-fit: contain;
}

.nci--sage .sga-sched-t {
  flex: 0 1 auto;
  max-width: 27cqw;
  font-size: 3.6cqw;
  line-height: 1.4;
  text-align: right;
  color: var(--sga-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.nci--sage.nci--lang-zh .sga-sched-t {
  font-size: 3.5cqw;
  letter-spacing: 0.04em;
}

/* ───── venue: the villa, whole ───── */

.nci--sage .sga-venue {
  position: relative;
  margin-top: 4cqw;
}

.nci--sage .sga-venue-art {
  position: relative;
  left: 50%;
  width: 112cqw;
  transform: translateX(-50%);
}

.nci--sage .sga-card {
  position: relative;
  background-color: var(--sga-card);
  background-image: var(--sga-tile);
  background-size: 90cqw auto;
  background-blend-mode: soft-light;
  box-shadow:
    0 1.4cqw 5cqw -2.6cqw rgba(68, 58, 34, 0.32),
    inset 0 0 0 2.2cqw var(--sga-card),
    inset 0 0 0 calc(2.2cqw + 1px) var(--sga-hair);
}

.nci--sage .sga-venue-card {
  margin: -9cqw 6cqw 0;
  padding: 9cqw 7cqw 8cqw;
}

.nci--sage .sga-venue-name {
  font-size: 5.6cqw;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sga-ink);
}

.nci--sage.nci--lang-zh .sga-venue-name {
  font-size: 5cqw;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.nci--sage .sga-venue-addr {
  margin-top: 2cqw;
  font-size: 3.4cqw;
  line-height: 1.6;
  color: var(--sga-mute);
}

.nci--sage .sga-mapwrap {
  margin-top: 6cqw;
  overflow: hidden;
  border-radius: 1cqw;
  box-shadow: 0 0 0 1px var(--sga-hair);
}

/* A painted plan rather than a street map: two soft washes of garden and water, the lane crossing
   them, the pin in brass. */
.nci--sage .nci-map {
  height: 36cqw;
  background-color: #eef0e2;
  background-image:
    radial-gradient(26cqw 16cqw at 22% 30%, rgba(138, 155, 118, 0.34), transparent 70%),
    radial-gradient(22cqw 14cqw at 80% 72%, rgba(138, 155, 118, 0.28), transparent 70%),
    radial-gradient(30cqw 9cqw at 70% 18%, rgba(136, 170, 196, 0.3), transparent 72%),
    linear-gradient(172deg, transparent 58%, rgba(214, 196, 160, 0.55) 58.4%, rgba(214, 196, 160, 0.55) 62%, transparent 62.4%);
}

.nci--sage .nci-map-road {
  top: 38%;
  left: -6%;
  width: 112%;
  height: 1.2cqw;
  transform: rotate(-14deg);
  background: rgba(255, 252, 244, 0.95);
  box-shadow: 0 0 0 1px rgba(143, 107, 44, 0.18);
}

.nci--sage .nci-map-pin {
  top: 32%;
  left: 50%;
  width: 5.4cqw;
  height: 5.4cqw;
  margin: -5.4cqw 0 0 -2.7cqw;
  background: var(--sga-gold);
  box-shadow: 0 1cqw 2cqw -0.6cqw rgba(68, 58, 34, 0.5);
}

.nci--sage .nci-map-pin::after {
  content: '';
  position: absolute;
  inset: 1.7cqw;
  border-radius: 50%;
  background: var(--sga-card);
}

.nci--sage .sga-maps {
  display: flex;
  justify-content: center;
  gap: 6cqw;
  margin-top: 4.4cqw;
}

.nci--sage .sga-note {
  margin-top: 6cqw;
  font-size: 3.5cqw;
  line-height: 1.75;
  color: var(--sga-ink-2);
  text-wrap: pretty;
}

.nci--sage.nci--lang-zh .sga-note {
  font-size: 3.3cqw;
  line-height: 1.95;
}

.nci--sage .sga-travel {
  margin-top: 5cqw;
}

.nci--sage .sga-travel-row {
  padding: 3.6cqw 0;
  border-top: 1px solid var(--sga-hair-2);
}

.nci--sage .sga-travel-k {
  color: var(--sga-gold-ink);
}

.nci--sage .sga-travel-v {
  margin-top: 1.4cqw;
  font-size: 3.4cqw;
  line-height: 1.65;
  color: var(--sga-ink-2);
}

.nci--sage.nci--lang-zh .sga-travel-v {
  font-size: 3.2cqw;
  line-height: 1.85;
}

/* ───── faq: the attire guide ───── */

.nci--sage .sga-attire-art {
  width: 44cqw;
  margin: 6cqw auto 0;
}

.nci--sage .sga-attire {
  display: grid;
  gap: 7cqw;
  margin: 8cqw var(--sga-g) 0;
}

.nci--sage .sga-attire-ev {
  font-family: var(--sga-script);
  font-size: 7.4cqw;
  line-height: 1.2;
  color: var(--sga-gold-ink);
}

.nci--sage.nci--lang-zh .sga-attire-ev {
  font-family: var(--sga-cjk);
  font-size: 4.2cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

/* Each dot is a dab of paint: pale where the brush was, the pigment pooled at its rim. */
.nci--sage .sga-dots {
  display: flex;
  justify-content: center;
  gap: 3cqw;
  margin-top: 3cqw;
}

.nci--sage .sga-dot {
  width: 8.4cqw;
  height: auto;
  aspect-ratio: 1;
  border-radius: 52% 47% 50% 49% / 48% 53% 47% 52%;
  background: radial-gradient(circle at 44% 40%, color-mix(in srgb, var(--sw) 70%, #fff) 0 28%, var(--sw) 64%, color-mix(in srgb, var(--sw) 80%, #3a2e1a) 100%);
  box-shadow: inset 0 0 0 1px rgba(90, 70, 40, 0.1);
  opacity: 0.92;
}

.nci--sage .sga-dot:nth-child(2) {
  border-radius: 47% 53% 48% 52% / 53% 46% 54% 47%;
}

.nci--sage .sga-dot:nth-child(3) {
  border-radius: 50% 50% 46% 54% / 46% 52% 48% 54%;
}

.nci--sage .sga-attire-note {
  margin-top: 3cqw;
  font-size: 3.5cqw;
  line-height: 1.7;
  color: var(--sga-ink-2);
  text-wrap: pretty;
}

.nci--sage.nci--lang-zh .sga-attire-note {
  font-size: 3.3cqw;
  line-height: 1.95;
}

.nci--sage .sga-more {
  margin-top: 14cqw;
  color: var(--sga-gold-ink);
}

.nci--sage .sga-faq {
  display: grid;
  gap: 5.4cqw;
  margin: 6cqw var(--sga-g) 0;
}

.nci--sage .sga-faq-q {
  font-size: 4.2cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sga-ink);
}

.nci--sage.nci--lang-zh .sga-faq-q {
  font-size: 3.8cqw;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.nci--sage .sga-faq-a {
  margin-top: 1.6cqw;
  font-size: 3.5cqw;
  line-height: 1.7;
  color: var(--sga-mute);
}

.nci--sage.nci--lang-zh .sga-faq-a {
  font-size: 3.3cqw;
  line-height: 1.9;
}

/* ───── rsvp: the reply card ─────
   A card on the paper, a eucalyptus reaching over its top-left corner (the top-right piece, turned)
   and garden roses up its bottom-right. */

.nci--sage .sga-reply {
  position: relative;
  margin: 10cqw 0 0;
  padding: 0 7cqw 10cqw;
}

.nci--sage .sga-reply-tr {
  position: absolute;
  z-index: 1;
  top: -9cqw;
  left: -4cqw;
  width: 34cqw;
  transform: scaleX(-1);
}

.nci--sage .sga-reply-br {
  position: absolute;
  z-index: 1;
  right: -5cqw;
  bottom: 0;
  width: 36cqw;
}

.nci--sage .sga-form {
  padding: 11cqw 8cqw 12cqw;
  text-align: left;
}

.nci--sage .sga-by {
  margin-bottom: 7cqw;
  text-align: center;
  color: var(--sga-gold-ink);
}

.nci--sage.nci--lang-zh .sga-by {
  font-size: 3cqw;
  letter-spacing: 0.16em;
}

.nci--sage .sga-field {
  margin-bottom: 5.4cqw;
}

.nci--sage .sga-field-l {
  display: block;
  font-family: var(--sga-caps);
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sga-sage-ink);
}

.nci--sage.nci--lang-zh .sga-field-l {
  font-size: 3cqw;
  letter-spacing: 0.1em;
}

.nci--sage .sga-field-i {
  width: 100%;
  margin-top: 1cqw;
  padding: 1.6cqw 0;
  border: none;
  border-bottom: 1px solid var(--sga-hair);
  border-radius: 0;
  background: transparent;
  font-family: var(--sga-serif);
  font-size: 4.2cqw;
  color: var(--sga-ink);
}

.nci--sage .sga-field-i:focus-visible {
  outline: none;
  border-bottom-color: var(--sga-gold-ink);
  box-shadow: 0 1px 0 0 var(--sga-gold-ink);
}

.nci--sage .sga-field.is-bad .sga-field-i {
  border-bottom-color: #9a4a3c;
}

.nci--sage .sga-err {
  margin: -3.6cqw 0 5cqw;
  font-size: max(12px, 3.2cqw);
  color: #8f4336;
}

.nci--sage .sga-ticks {
  display: grid;
  gap: 2.4cqw;
  margin: 1cqw 0 6cqw;
}

.nci--sage .sga-tick {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 3cqw 3.6cqw;
  border: 1px solid var(--sga-hair);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sga-serif);
  font-size: 3.7cqw;
  line-height: 1.35;
  text-align: left;
  color: var(--sga-ink-2);
}

.nci--sage .sga-tick-box {
  flex: 0 0 auto;
  width: 3.8cqw;
  height: 3.8cqw;
  border: 1px solid var(--sga-gold-ink);
  border-radius: 50%;
}

.nci--sage .sga-tick[aria-pressed='true'] {
  border-color: var(--sga-sage-ink);
  background: rgba(138, 155, 118, 0.18);
  color: var(--sga-ink);
}

.nci--sage .sga-tick[aria-pressed='true'] .sga-tick-box {
  border-color: var(--sga-sage-ink);
  background: radial-gradient(circle, var(--sga-sage-ink) 0 45%, transparent 50%);
}

.nci--sage .sga-count,
.nci--sage .sga-diet {
  margin-bottom: 6cqw;
}

.nci--sage .sga-step {
  display: flex;
  align-items: center;
  gap: 4cqw;
  margin-top: 2cqw;
}

.nci--sage .sga-step button {
  width: 8.6cqw;
  height: 8.6cqw;
  border: 1px solid var(--sga-hair);
  border-radius: 50%;
  background: transparent;
  font-size: 4.4cqw;
  line-height: 1;
  color: var(--sga-gold-ink);
}

.nci--sage .sga-step button:disabled {
  border-color: var(--sga-hair-2);
  color: rgba(54, 64, 47, 0.3);
}

.nci--sage .sga-step span {
  min-width: 5cqw;
  font-family: var(--sga-num);
  font-size: 6cqw;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--sga-ink);
}

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

.nci--sage .sga-tag {
  padding: 1.8cqw 3.4cqw;
  border: 1px solid var(--sga-hair);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sga-serif);
  font-size: 3.2cqw;
  color: var(--sga-ink-2);
}

.nci--sage .sga-tag[aria-pressed='true'] {
  border-color: var(--sga-sage-ink);
  background: rgba(138, 155, 118, 0.2);
  color: var(--sga-ink);
}

.nci--sage.nci--view .sga-tag:disabled {
  opacity: 0.45;
}

.nci--sage .sga-submit {
  display: block;
  width: 100%;
  margin-top: 3cqw;
  padding: 4cqw 0;
  border: none;
  border-radius: 999px;
  background: var(--sga-sage-ink);
  font-family: var(--sga-caps);
  font-size: 3cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: #f8f4ea;
}

.nci--sage.nci--lang-zh .sga-submit {
  font-size: 3.5cqw;
  letter-spacing: 0.3em;
}

.nci--sage .sga-submit:disabled {
  background: rgba(79, 99, 71, 0.82);
}

.nci--sage .sga-card--done {
  padding: 10cqw 9cqw 12cqw;
  text-align: center;
}

.nci--sage .sga-done-rings {
  width: 32cqw;
  margin: 0 auto;
}

.nci--sage .sga-done-t {
  margin-top: 4cqw;
  font-family: var(--sga-script);
  font-size: 12cqw;
  line-height: 1.1;
}

.nci--sage.nci--lang-zh .sga-done-t {
  font-family: var(--sga-cjk);
  font-size: 6.4cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.nci--sage .sga-done-b {
  margin-top: 4cqw;
  font-size: 3.8cqw;
  line-height: 1.75;
  color: var(--sga-ink-2);
}

.nci--sage.nci--lang-zh .sga-done-b {
  font-size: 3.5cqw;
  line-height: 1.95;
}

.nci--sage .sga-req {
  margin-left: 0.4em;
  color: #8f4336;
}

.nci--sage .sga-err--server {
  margin: 0 0 4cqw;
}

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

.nci--sage .sga-done-when {
  margin-top: 2cqw;
  font-family: var(--sga-caps);
  font-size: 2.6cqw;
  letter-spacing: 0.04em;
  color: var(--sga-mute);
}

.nci--sage .sga-done-edit {
  margin-top: 6cqw;
  padding: 0 0 1cqw;
  border: none;
  border-bottom: 1px solid var(--sga-hair);
  background: none;
  font-family: var(--sga-caps);
  font-size: 2.7cqw;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  color: var(--sga-gold-ink);
}

/* ───── wishes: the gatepost, and the last screen ───── */

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

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

.nci--sage .sga-wish-in:nth-child(2) {
  grid-column: 1;
}

.nci--sage .sga-wish-in::placeholder {
  color: rgba(95, 101, 84, 0.85);
  font-style: italic;
}

.nci--sage .sga-wish-in:focus-visible {
  outline: none;
  border-bottom-color: var(--sga-gold-ink);
}

.nci--sage .sga-wish-err {
  grid-column: 1 / -1;
  margin: 0;
}

.nci--sage .sga-wish-post {
  align-self: end;
  padding: 2.4cqw 5cqw;
  border: 1px solid var(--sga-sage-ink);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sga-caps);
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--sga-sage-ink);
}

.nci--sage .sga-wishes {
  gap: 6cqw;
  margin: 10cqw var(--sga-g) 0;
}

.nci--sage .sga-wish-text {
  font-size: 4cqw;
  font-style: italic;
  line-height: 1.65;
  color: var(--sga-ink);
}

.nci--sage.nci--lang-zh .sga-wish-text {
  font-size: 3.6cqw;
  font-style: normal;
  line-height: 1.9;
}

.nci--sage .sga-wish-from {
  margin-top: 1.6cqw;
  font-family: var(--sga-caps);
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--sga-gold-ink);
}

.nci--sage .sga-wish-empty {
  font-size: 3.6cqw;
  font-style: italic;
  color: var(--sga-mute);
}

.nci--sage .sga-close {
  position: relative;
  margin-top: 16cqw;
  padding-top: 20cqw;
}

.nci--sage .sga-close-sky {
  position: absolute;
  top: 0;
  left: 50%;
  width: 112cqw;
  transform: translateX(-50%);
  opacity: 0.9;
}

.nci--sage .sga-close-mono {
  position: relative;
  font-family: var(--sga-num);
  font-size: 16cqw;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.nci--sage .sga-close-mono i {
  margin: 0 0.1em;
  font-family: var(--sga-script);
  font-size: 0.6em;
  font-style: normal;
}

.nci--sage.nci--lang-zh .sga-close-mono {
  font-family: var(--sga-cjk);
  font-size: 11cqw;
  font-style: normal;
  font-weight: 600;
}

.nci--sage.nci--lang-zh .sga-close-mono i {
  margin: 0 0.2em;
  font-family: var(--sga-script);
  font-weight: 400;
}

.nci--sage .sga-close-line {
  position: relative;
  margin: 8cqw var(--sga-g) 0;
  font-size: 4.2cqw;
  font-style: italic;
  line-height: 1.75;
  color: var(--sga-ink);
  text-wrap: balance;
}

.nci--sage.nci--lang-zh .sga-close-line {
  font-size: 3.8cqw;
  font-style: normal;
  line-height: 2;
  letter-spacing: 0.06em;
}

.nci--sage .sga-close-mark {
  position: relative;
  margin-top: 6cqw;
  color: var(--sga-gold-ink);
}

.nci--sage .sga-close-hills {
  position: relative;
  left: 50%;
  width: 112cqw;
  margin-top: 4cqw;
  transform: translateX(-50%);
}

/* On the last section the page's bottom padding (kept clear for the floating bar) is taken by the
   hills themselves, so the page ends on the painting rather than on a band of bare paper. */
.nci--sage .nci-section--last .sga-close-hills {
  margin-bottom: -110px;
}

/* ───── editor ───── */

.nci--sage.nci--edit .sga-arch .nci-photo--empty {
  border-radius: 999px 999px 0.6cqw 0.6cqw;
}

/* ───── Guest cover overlay ─────
   The page's first screen again. The overlay is a size container and --u is one cqw, or less on a
   phone too short to hold the whole painting, so the scene, the names and the ribbon always fit one
   screen; any height left over goes around the ribbon. */

.nci-cover--sage {
  --u: min(1cqw, calc(100cqh / 194));
  container-type: size;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  background: var(--sga-paper) var(--sga-tile) 0 0 / 80% auto repeat;
  color: var(--sga-ink);
  font-family: var(--sga-serif);
  text-align: center;
}

.nci-cover--sage .sga-scene--cv {
  flex: 0 0 auto;
}

.nci-cover--sage .sga-names--cover {
  flex: 0 0 auto;
}

.nci-cover--sage .sga-cv-open {
  position: relative;
  flex: 0 0 auto;
  width: calc(66 * var(--u));
  margin: auto 0 calc(2.4 * var(--u));
  padding: 0;
  border: none;
  background: none;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nci-cover--sage .sga-cv-ribbon {
  width: 100%;
}

/* On a short phone --u drops below a cqw; the small caps never go under 10px for it. */
.nci-cover--sage .sga-scene-kicker {
  font-size: max(10px, calc(2.6 * var(--u)));
}

.nci-cover--sage.sga-cv--zh .sga-scene-kicker {
  font-size: max(11px, calc(3.3 * var(--u)));
}

.nci-cover--sage .sga-cv-date {
  position: absolute;
  top: 44%;
  left: 24%;
  right: 24%;
  transform: translateY(-50%);
  font-family: var(--sga-caps);
  font-size: max(10px, calc(3.2 * var(--u)));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  white-space: nowrap;
  color: #33412b;
}

.nci-cover--sage .sga-cv-open:hover {
  transform: translateY(calc(-0.8 * var(--u)));
}

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

.nci-cover--sage .sga-cv-hint {
  flex: 0 0 auto;
  margin-bottom: auto;
  padding-bottom: calc(4 * var(--u));
  font-family: var(--sga-caps);
  font-size: max(10px, calc(2.6 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--sga-gold-ink);
}

.nci-cover--sage.sga-cv--zh .sga-cv-hint {
  font-size: max(11px, calc(3 * var(--u)));
}

.nci-cover--sage.sga-cv--opening {
  animation: sga-open 560ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes sga-open {
  to {
    opacity: 0;
    transform: scale(1.03);
  }
}

/* ───── Floating bar ─────
   Two paper plaques at the right margin: the page's centre line is where the photographs and the
   painted objects stand, so the bar keeps off it. */

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

.nci-float--sage button {
  padding: 10px 16px;
  border: 1px solid var(--sga-hair);
  border-radius: 999px;
  background: var(--sga-card);
  font-family: var(--sga-caps);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--sga-gold-ink);
  box-shadow: 0 6px 18px -12px rgba(54, 64, 47, 0.6);
}

.nci-float--sage .nci-float-dot {
  width: 8px;
  height: 8px;
  background: var(--sga-sage);
}

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

  .nci-cover--sage .sga-cv-open {
    transition: none;
  }
}