/* Nicecard demo — "Salon" (沙龙) invitation style. Everything is scoped under .nci--salon,
   .nci-cover--salon and .nci-float--salon so the other styles are untouched; new classes use the sln-
   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 system: ivory paper, a blue-black ink, one cool grey-blue for everything secondary, and antique
   gold spent only on hairlines — a ring, a rule, a lozenge, the bow. Nothing on this page is a field of
   colour. Type is a didone display (Bodoni Moda, falling back to Cormorant Garamond) for names, headings
   and figures; Jost for the wide-tracked small caps; Noto Serif SC for the measured paragraphs, which is
   the one face that sets 中文 and Latin at the same colour. */

.nci--salon,
.nci-cover--salon,
.nci-float--salon {
  --sln-paper: #f4f1ea;
  --sln-ink: #2b3038;
  --sln-blue: #5c6b7e;
  --sln-mute: #8b97a6;
  --sln-gold: #b08d4f;
  --sln-hair: rgba(92, 107, 126, 0.32);
  --sln-rule: rgba(92, 107, 126, 0.22);
  --sln-mat: #eae5da;
  --sln-g: 11cqw;
  --sln-arch: 50% 50% 2% 2% / 32% 32% 1.6% 1.6%;
  --sln-disp: 'Bodoni Moda', 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --sln-caps: 'Jost', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
  --sln-text: 'Noto Serif SC', 'Cormorant Garamond', Georgia, serif;
}

.nci--salon {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--sln-paper);
  color: var(--sln-ink);
  font-family: var(--sln-caps);
  --nci-bg: var(--sln-paper);
  --nci-soft: var(--sln-mat);
  --nci-slot-line: rgba(176, 141, 79, 0.55);
  --nci-slot-ink: var(--sln-blue);
  --nci-hint: rgba(92, 107, 126, 0.5);
}

/* 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 plate below it. */
.nci--salon .nci-section {
  display: flow-root;
  padding: 0;
}

/* The rhythm of the page: the introduction and the practical half breathe widest, the date and the
   plates a little less, the reply card least — it is followed by the book, which closes the programme. */
.nci--salon .nci-s-cover {
  padding-bottom: 13cqw;
}

.nci--salon .nci-s-story,
.nci--salon .nci-s-venue {
  padding-bottom: 17cqw;
}

.nci--salon .nci-s-countdown {
  padding-bottom: 10cqw;
}

.nci--salon .nci-s-gallery,
.nci--salon .nci-s-schedule {
  padding-bottom: 15cqw;
}

.nci--salon .nci-s-faq {
  padding-bottom: 13cqw;
}

.nci--salon .nci-s-rsvp {
  padding-bottom: 11cqw;
}

/* White text sitting on the cover photograph keeps a lighter edit hint. */
.nci--salon .sln-cover-body .nci-f--hint {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* ───── The shared marks: hairline, rubric, heading, lozenge ───── */

.nci--salon .sln-hair {
  display: block;
  flex: 1 1 auto;
  height: 1px;
  background: var(--sln-hair);
}

.nci--salon .sln-rubric {
  display: flex;
  align-items: center;
  gap: 4cqw;
  margin: 14cqw var(--sln-g) 0;
}

.nci--salon .sln-rubric-t {
  flex: 0 0 auto;
  font-family: var(--sln-caps);
  font-weight: 400;
  font-size: 2.7cqw;
  line-height: 1.6;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--sln-blue);
}

.nci--salon .sln-h2 {
  margin: 4.6cqw var(--sln-g) 0;
  font-family: var(--sln-disp);
  font-weight: 400;
  font-size: 6.6cqw;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--sln-ink);
}

/* An outlined gold lozenge — the one ornament that is not a rule, and the axis mark between the two
   circular portraits. */
.nci--salon .sln-lozenge {
  flex: 0 0 auto;
  width: 2.6cqw;
  height: 2.6cqw;
  margin-top: 16cqw;
  border: 1px solid var(--sln-gold);
  transform: rotate(45deg);
}

/* ───── Measured prose ───── */

.nci--salon .sln-para {
  margin: 6cqw calc(var(--sln-g) + 1cqw) 0;
  font-family: var(--sln-text);
  font-size: 3.25cqw;
  line-height: 2.15;
  letter-spacing: 0.055em;
  text-align: justify;
  text-wrap: pretty;
  color: #4a5361;
}

.nci--salon .sln-para--tight {
  margin-top: 6cqw;
}

.nci--salon .sln-verse {
  margin: 8cqw var(--sln-g) 0;
  font-family: var(--sln-text);
  font-size: 3.2cqw;
  line-height: 2.5;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  color: var(--sln-blue);
}

.nci--salon .sln-note {
  margin: 7cqw calc(var(--sln-g) + 2cqw) 0;
  font-family: var(--sln-text);
  font-size: 3cqw;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--sln-mute);
}

.nci--salon .sln-note--reply {
  margin-top: 6cqw;
}

.nci--salon .sln-foot-note {
  margin: 5cqw var(--sln-g) 0;
  font-family: var(--sln-text);
  font-size: 2.9cqw;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--sln-mute);
}

/* A quiet, real link: the maps and the calendar entry, kept to a hairline. */
.nci--salon .sln-link {
  display: inline-block;
  padding-bottom: 1cqw;
  border-bottom: 1px solid var(--sln-hair);
  font-family: var(--sln-caps);
  font-size: 2.6cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--sln-blue);
}

.nci--salon .sln-run + .sln-foot-note + .sln-link {
  display: block;
  width: fit-content;
  margin: 6cqw auto 0;
}

/* ───── Cover — the one photograph allowed to bleed ───── */

/* Cut taller than the photograph is (5/9 against its 3/4), so the picture is scaled to the full height
   of the frame and cropped at the sides instead of being fitted whole: the couple comes up a third
   larger than a 2/3 frame gave them, and the whole height of the photograph stays in view — which is
   what lets every stop below be read straight off the picture's own proportions. */
.nci--salon .sln-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 9;
  background: #cfc9bd;
}

.nci--salon .sln-cover-img {
  position: absolute;
  inset: 0;
}

/* The scrim is the type's ground and nothing else — it never reaches the couple. The frame shows the
   photograph's whole height, so these stops read straight off the picture: heads and hands run from
   0.08 to 0.46 of it, and everything from 0.60 down is gown, bouquet and trouser. So the wash is flatly
   transparent across the top half and turns on only below her hands, holding 0.80 under the display
   block — the contrast a white line needs over a 0.88-luminance skirt (about 4:1, against 1.6:1
   unwashed). Stops are written as a smooth S rather than three straight segments: a piecewise ramp puts
   a kink at each stop and the eye reads the kink as an edge drawn across her bodice and his waistcoat,
   which is the one thing a wash over a photograph must never do. Nothing shades a face. */
.nci--salon .sln-cover-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(18, 22, 28, 0.9) 0%,
    rgba(18, 22, 28, 0.87) 22%,
    rgba(18, 22, 28, 0.83) 33%,
    rgba(18, 22, 28, 0.8) 40%,
    rgba(18, 22, 28, 0.72) 42%,
    rgba(18, 22, 28, 0.58) 44%,
    rgba(18, 22, 28, 0.4) 46%,
    rgba(18, 22, 28, 0.23) 48%,
    rgba(18, 22, 28, 0.1) 50%,
    rgba(18, 22, 28, 0) 52%
  );
}

/* Blank areas of the overlay fall through, so the photo slot itself stays selectable in the editor; only
   the words take the pointer back. */
.nci--salon .sln-cover-body {
  position: absolute;
  inset: auto 0 0;
  padding: 0 8cqw 8cqw;
  pointer-events: none;
  text-align: center;
  color: #fff;
}

.nci--salon .sln-cover-body .nci-f {
  pointer-events: auto;
}

.nci--salon .sln-cover-kicker {
  font-family: var(--sln-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(16, 20, 26, 0.5);
}

.nci--salon .sln-cover-names {
  margin-top: 4.4cqw;
  font-family: var(--sln-disp);
  font-weight: 400;
  font-size: 9.6cqw;
  line-height: 1.24;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 16px rgba(16, 20, 26, 0.45);
  overflow-wrap: anywhere;
}

.nci--salon .sln-cover-name {
  display: block;
}

.nci--salon .sln-cover-amp {
  display: block;
  margin: 0.6cqw 0;
  font-size: 5cqw;
  color: rgba(255, 255, 255, 0.82);
}

/* Roman month, the day between two hairlines, the year — the engraved way of setting a date. */
.nci--salon .sln-cover-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.4cqw;
  margin-top: 5.4cqw;
  font-family: var(--sln-disp);
  font-size: 3.4cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 10px rgba(16, 20, 26, 0.5);
}

.nci--salon .sln-cover-day {
  padding: 0 3.4cqw;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 6.4cqw;
  letter-spacing: 0.06em;
  text-indent: 0;
}

.nci--salon .sln-cover-foot {
  margin-top: 4.6cqw;
  font-family: var(--sln-caps);
  font-size: 2.5cqw;
  line-height: 1.8;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(16, 20, 26, 0.5);
}

/* The first ivory line of the programme, set in a short measure on the axis. */
.nci--salon .sln-invite {
  margin: 10cqw calc(var(--sln-g) + 2cqw) 0;
  font-family: var(--sln-text);
  font-size: 3.2cqw;
  line-height: 2.2;
  letter-spacing: 0.1em;
  text-align: center;
  text-wrap: pretty;
  color: var(--sln-blue);
}

/* ───── The couple: monogram, paragraph, circular portraits ───── */

.nci--salon .sln-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.4cqw;
  margin-top: 8cqw;
}

.nci--salon .sln-mono-l {
  font-family: var(--sln-disp);
  font-weight: 400;
  font-size: 13cqw;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sln-ink);
}

.nci--salon .sln-mono-bar {
  width: 1px;
  height: 11cqw;
  background: var(--sln-gold);
}

.nci--salon .sln-mark {
  margin: 6cqw var(--sln-g) 0;
  font-family: var(--sln-caps);
  font-size: 2.5cqw;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-align: center;
  color: var(--sln-mute);
}

.nci--salon .sln-pair {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4cqw;
  margin: 11cqw var(--sln-g) 0;
}

.nci--salon .sln-round {
  flex: 0 1 34cqw;
  min-width: 0;
  text-align: center;
}

.nci--salon .sln-round-frame {
  position: relative;
  padding: 2.2cqw;
}

.nci--salon .sln-round-img {
  aspect-ratio: 1;
  border-radius: 50%;
}

.nci--salon .sln-round-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--sln-gold);
  border-radius: 50%;
}

/* A circular aperture cut from a portrait photograph has no horizontal slack to spend on
   object-position: the box is square and the picture is taller than it is wide, so the crop can only
   travel up and down. salon-02 — the one frame in the set where a partner stands alone at a window —
   puts him about two thirds of the way across, so this aperture zooms and pans inside its own clip
   instead. A couple who swaps the photograph keeps the zoom, which is the gentler failure: a little
   close, never off the subject. The left frame takes a much smaller one, so the two heads read at the
   same size. */
.nci--salon .sln-round--a .nci-photo img {
  transform: scale(1.14) translate(3%, 2%);
}

.nci--salon .sln-round--b .nci-photo img {
  transform: scale(1.6) translate(-16%, 14%);
}

/* The dots belong to the mark, not to the words, so a couple editing the role never has to retype them. */
.nci--salon .sln-round-role {
  margin-top: 3.4cqw;
  font-family: var(--sln-caps);
  font-size: 2.5cqw;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--sln-blue);
}

.nci--salon .sln-round-role::before {
  content: '· ';
}

.nci--salon .sln-round-role::after {
  content: ' ·';
}

.nci--salon .sln-pair-names {
  display: flex;
  justify-content: center;
  gap: 10.6cqw;
  margin: 2.6cqw var(--sln-g) 0;
}

.nci--salon .sln-pn {
  flex: 0 1 34cqw;
  min-width: 0;
  font-family: var(--sln-disp);
  font-size: 4.6cqw;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--sln-ink);
  overflow-wrap: anywhere;
}

/* ───── The date: a quiet calendar and a thin counter ───── */

/* The calendar and the ledger under it share one narrower measure. At the column's full width the
   seventh column of the grid — a whole day of the month — sat clean underneath one of the floating
   discs, which hides a number rather than clipping a line. */
.nci--salon .sln-cal {
  margin: 8cqw calc(var(--sln-g) + 14cqw) 0;
}

.nci--salon .sln-cal-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.6cqw;
  font-family: var(--sln-disp);
  color: var(--sln-ink);
}

.nci--salon .sln-cal-month {
  font-weight: 400;
  font-size: 19cqw;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

.nci--salon .sln-cal-slash,
.nci--salon .sln-cal-day {
  font-size: 5.4cqw;
  line-height: 1;
  color: var(--sln-blue);
}

.nci--salon .sln-cal-slash {
  color: var(--sln-gold);
}

.nci--salon .sln-cal-year {
  margin-top: 2.6cqw;
  font-family: var(--sln-caps);
  font-size: 2.6cqw;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-align: center;
  color: var(--sln-mute);
}

.nci--salon .sln-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.6cqw;
  margin-top: 6cqw;
  padding-top: 4.4cqw;
  border-top: 1px solid var(--sln-rule);
}

.nci--salon .sln-cal-h,
.nci--salon .sln-cal-d {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.nci--salon .sln-cal-h {
  font-family: var(--sln-caps);
  font-size: 2.4cqw;
  letter-spacing: 0.12em;
  color: var(--sln-mute);
}

.nci--salon .sln-cal-d {
  font-family: var(--sln-disp);
  font-size: 3.2cqw;
  color: var(--sln-blue);
  font-variant-numeric: lining-nums tabular-nums;
}

/* One fine ring, drawn round the day itself — the only mark the grid carries. */
.nci--salon .sln-cal-d.is-day {
  border: 1px solid var(--sln-gold);
  border-radius: 50%;
  color: var(--sln-ink);
}

.nci--salon .sln-dates {
  margin: 8cqw var(--sln-g) 0;
  text-align: center;
}

.nci--salon .sln-dateline {
  font-family: var(--sln-disp);
  font-size: 4.6cqw;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--sln-ink);
}

.nci--salon .sln-datesub {
  margin-top: 1.8cqw;
  font-family: var(--sln-caps);
  font-size: 2.6cqw;
  letter-spacing: 0.2em;
  color: var(--sln-mute);
}

.nci--salon .sln-dot {
  margin: 0 1.4cqw;
  color: var(--sln-gold);
}

/* Thin figures standing between two hairlines, with a hairline between each pair — a ledger, not a row
   of boxes. */
/* The ledger keeps a narrower measure than the column it sits in: the two floating discs rest in the
   bottom right corner of the screen, and at full width this row's last cell — the seconds — passed
   clean underneath one of them, which hid a whole numeral rather than clipping a line. */
.nci--salon .sln-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 8cqw calc(var(--sln-g) + 14cqw) 0;
  padding: 4.4cqw 0 4cqw;
  border-top: 1px solid var(--sln-rule);
  border-bottom: 1px solid var(--sln-rule);
}

.nci--salon .sln-ledger-cell {
  text-align: center;
}

.nci--salon .sln-ledger-cell + .sln-ledger-cell {
  border-left: 1px solid var(--sln-rule);
}

.nci--salon .sln-ledger-n {
  display: block;
  font-family: var(--sln-disp);
  font-weight: 400;
  font-size: 8cqw;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--sln-ink);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Two figures fit a quarter of the measure. A day count of three takes a wider first column instead of
   running over the rule beside it, and all four figures step down a little so the narrower ones keep
   their air; one of four (a date a thousand days out) steps down again. Same line height throughout, so
   the units stay level — and the measure and its rules never move. */
.nci--salon .sln-ledger--wide {
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}

.nci--salon .sln-ledger--wide .sln-ledger-n {
  font-size: 7.2cqw;
  line-height: 8.8cqw;
}

.nci--salon .sln-ledger--long .sln-ledger-cell:first-child .sln-ledger-n {
  font-size: 5.4cqw;
}

.nci--salon .sln-ledger-u {
  display: block;
  margin-top: 2cqw;
  font-family: var(--sln-caps);
  font-size: 2.3cqw;
  font-style: normal;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--sln-mute);
}

.nci--salon .sln-cd-done {
  margin: 8cqw var(--sln-g) 0;
  padding: 4.4cqw 0;
  border-top: 1px solid var(--sln-rule);
  border-bottom: 1px solid var(--sln-rule);
  font-family: var(--sln-disp);
  font-size: 5cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-align: center;
  color: var(--sln-ink);
}

/* ───── Plates: arched apertures inside a mat, traced by one gold hairline ───── */

.nci--salon .sln-plate {
  margin: 9cqw var(--sln-g) 0;
}

.nci--salon .sln-plate-frame {
  position: relative;
  padding: 2.8cqw;
}

.nci--salon .sln-arch {
  border-radius: var(--sln-arch);
}

.nci--salon .sln-plate-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--sln-gold);
  border-radius: 50% 50% 2% 2% / 30% 30% 1.5% 1.5%;
}

.nci--salon .sln-plate-cap {
  margin-top: 3.6cqw;
  font-family: var(--sln-caps);
  font-size: 2.4cqw;
  line-height: 1.7;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sln-mute);
}

.nci--salon .sln-plate--tall .sln-arch {
  aspect-ratio: 3 / 4;
}

.nci--salon .sln-plate--closing {
  margin-top: 0;
}

.nci--salon .sln-plate--closing .sln-arch {
  aspect-ratio: 5 / 7;
}

.nci--salon .sln-plate--wide {
  margin-top: 11cqw;
}

.nci--salon .sln-plate--wide .sln-arch {
  aspect-ratio: 5 / 4;
  border-radius: 26% 26% 2% 2% / 34% 34% 2% 2%;
}

.nci--salon .sln-plate--wide .sln-plate-ring {
  border-radius: 26% 26% 2% 2% / 32% 32% 1.8% 1.8%;
}

.nci--salon .sln-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4cqw;
  margin: 9cqw var(--sln-g) 0;
}

.nci--salon .sln-duo .sln-plate {
  margin: 0;
}

.nci--salon .sln-plate--half .sln-plate-frame {
  padding: 2cqw;
}

.nci--salon .sln-plate--half .sln-arch {
  aspect-ratio: 4 / 5;
}

.nci--salon .sln-plate--half .sln-plate-cap {
  margin-top: 2.8cqw;
  font-size: 2.2cqw;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}

/* A photograph laid square on a mat — the one rectangle on the page, and the only place the mat itself
   is tinted. */
.nci--salon .sln-mat {
  position: relative;
  margin: 11cqw var(--sln-g) 0;
  padding: 3.4cqw;
  background: var(--sln-mat);
}

.nci--salon .sln-mat-img {
  aspect-ratio: 4 / 3;
}

.nci--salon .sln-mat-ring {
  position: absolute;
  inset: 1.6cqw;
  pointer-events: none;
  border: 1px solid var(--sln-gold);
}

/* ───── The programme: a two-column list with dot leaders ───── */

.nci--salon .sln-run {
  margin: 7cqw var(--sln-g) 0;
}

.nci--salon .sln-run-row {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 2.8cqw 0;
}

.nci--salon .sln-run-row + .sln-run-row {
  border-top: 1px solid var(--sln-rule);
}

.nci--salon .sln-run-t {
  flex: 0 1 auto;
  font-family: var(--sln-text);
  font-size: 3.2cqw;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--sln-ink);
}

.nci--salon .sln-run-lead {
  flex: 1 1 auto;
  min-width: 4cqw;
  margin: 0 2cqw;
  border-bottom: 1px dotted var(--sln-hair);
  transform: translateY(-0.3em);
}

.nci--salon .sln-run-at {
  flex: 0 0 auto;
  font-family: var(--sln-disp);
  font-size: 3.4cqw;
  letter-spacing: 0.08em;
  color: var(--sln-blue);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ───── Venue ───── */

.nci--salon .sln-venue {
  margin: 5cqw var(--sln-g) 0;
  font-family: var(--sln-disp);
  font-size: 4.8cqw;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  color: var(--sln-ink);
}

.nci--salon .sln-addr {
  margin: 2cqw calc(var(--sln-g) + 1cqw) 0;
  font-family: var(--sln-text);
  font-size: 2.9cqw;
  line-height: 1.9;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--sln-mute);
}

.nci--salon .sln-addr-city::before {
  content: '·';
  margin: 0 1.4cqw;
  color: var(--sln-gold);
}

.nci--salon .sln-mapwrap {
  position: relative;
  margin: 6cqw var(--sln-g) 0;
  padding: 2.4cqw;
  background: var(--sln-mat);
}

/* The hairline belongs to the mat, not to the map: the map paints its water and its streets in its own
   pseudo-elements, which stack above the element's border and would cut the line into pieces. */
.nci--salon .sln-mapwrap::after {
  content: '';
  position: absolute;
  inset: 1.2cqw;
  pointer-events: none;
  border: 1px solid var(--sln-gold);
}

.nci--salon .nci-map {
  height: 40cqw;
  overflow: hidden;
  background: #e7e3d9;
}

.nci--salon .nci-map::before {
  content: '';
  position: absolute;
  inset: 0 0 0 60%;
  background: #dfe3e4;
}

.nci--salon .nci-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(68deg, rgba(255, 255, 255, 0.9) 0 1.5px, rgba(255, 255, 255, 0) 1.5px 11cqw),
    repeating-linear-gradient(-24deg, rgba(255, 255, 255, 0.7) 0 1.5px, rgba(255, 255, 255, 0) 1.5px 8cqw);
}

.nci--salon .nci-map-road {
  top: 57%;
  height: 2cqw;
  background: #fff;
}

.nci--salon .nci-map-pin {
  top: 36%;
  left: 47%;
  z-index: 2;
  width: 3.2cqw;
  height: 3.2cqw;
  background: var(--sln-ink);
}

.nci--salon .sln-maps {
  display: flex;
  justify-content: center;
  gap: 8cqw;
  margin-top: 5cqw;
}

.nci--salon .sln-travel {
  margin: 8cqw var(--sln-g) 0;
}

.nci--salon .sln-travel-row + .sln-travel-row {
  margin-top: 3.4cqw;
  padding-top: 3.4cqw;
  border-top: 1px solid var(--sln-rule);
}

.nci--salon .sln-travel-k {
  font-family: var(--sln-caps);
  font-size: 2.5cqw;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sln-blue);
}

.nci--salon .sln-travel-v {
  margin: 1.4cqw 0 0;
  font-family: var(--sln-text);
  font-size: 3cqw;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--sln-mute);
}

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

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

.nci--salon .sln-faq-item + .sln-faq-item {
  margin-top: 4cqw;
  padding-top: 4cqw;
  border-top: 1px solid var(--sln-rule);
}

.nci--salon .sln-faq-q {
  font-family: var(--sln-disp);
  font-size: 3.6cqw;
  letter-spacing: 0.06em;
  color: var(--sln-ink);
}

.nci--salon .sln-faq-a {
  margin-top: 1.4cqw;
  font-family: var(--sln-text);
  font-size: 3cqw;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--sln-mute);
}

/* ───── The reply card ───── */

.nci--salon .sln-by {
  margin: 3.4cqw var(--sln-g) 0;
  font-family: var(--sln-text);
  font-size: 2.9cqw;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--sln-mute);
}

.nci--salon .sln-form {
  margin: 9cqw var(--sln-g) 0;
}

.nci--salon .sln-line {
  margin-bottom: 6cqw;
}

.nci--salon .sln-line-label {
  display: block;
  font-family: var(--sln-caps);
  font-size: 2.4cqw;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--sln-blue);
}

/* No boxes: a label in small caps and the hairline the guest writes on. */
.nci--salon .sln-line-field {
  display: block;
  width: 100%;
  margin-top: 2.2cqw;
  padding: 0 0 2.2cqw;
  border: 0;
  border-bottom: 1px solid var(--sln-hair);
  background: transparent;
  font-family: var(--sln-disp);
  font-size: 4cqw;
  color: var(--sln-ink);
  outline: none;
}

.nci--salon .sln-line-field:focus {
  border-bottom-color: var(--sln-gold);
}

.nci--salon .sln-line--count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4cqw;
  padding-bottom: 2.6cqw;
  border-bottom: 1px solid var(--sln-hair);
}

.nci--salon .sln-step {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  font-family: var(--sln-disp);
  font-size: 4cqw;
  color: var(--sln-ink);
}

.nci--salon .sln-step button {
  width: 6.4cqw;
  height: 6.4cqw;
  padding: 0;
  border: 1px solid var(--sln-hair);
  border-radius: 50%;
  background: transparent;
  color: var(--sln-blue);
  font-family: var(--sln-caps);
  font-size: 3.2cqw;
  line-height: 1;
}

.nci--salon .sln-step button:disabled {
  opacity: 0.4;
}

.nci--salon .sln-step-n {
  min-width: 4cqw;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
}

.nci--salon .sln-choice {
  display: block;
  margin-bottom: 6cqw;
  border-top: 1px solid var(--sln-rule);
}

.nci--salon .sln-choice-row {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  width: 100%;
  padding: 3.4cqw 0;
  border: 0;
  border-bottom: 1px solid var(--sln-rule);
  background: transparent;
  font-family: var(--sln-text);
  font-size: 3.2cqw;
  letter-spacing: 0.14em;
  text-align: left;
  color: var(--sln-blue);
}

/* The mark is a hairline square that takes an ink centre when chosen — a printed tick box, not a filled
   button. */
.nci--salon .sln-choice-mark {
  position: relative;
  flex: 0 0 auto;
  width: 3.2cqw;
  height: 3.2cqw;
  border: 1px solid var(--sln-hair);
}

.nci--salon .sln-choice-row[aria-pressed='true'] {
  color: var(--sln-ink);
}

.nci--salon .sln-choice-row[aria-pressed='true'] .sln-choice-mark {
  border-color: var(--sln-gold);
}

.nci--salon .sln-choice-row[aria-pressed='true'] .sln-choice-mark::after {
  content: '';
  position: absolute;
  inset: 0.7cqw;
  background: var(--sln-ink);
}

.nci--salon .sln-diet {
  margin-bottom: 6cqw;
}

.nci--salon .sln-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2cqw;
  margin-top: 2.6cqw;
}

.nci--salon .sln-tag {
  padding: 1.8cqw 3.4cqw;
  border: 1px solid var(--sln-rule);
  background: transparent;
  font-family: var(--sln-caps);
  font-size: 2.5cqw;
  letter-spacing: 0.1em;
  color: var(--sln-mute);
}

.nci--salon .sln-tag[aria-pressed='true'] {
  border-color: var(--sln-gold);
  color: var(--sln-ink);
}

.nci--salon .sln-tag:disabled {
  opacity: 0.45;
}

.nci--salon .sln-submit {
  display: block;
  width: 100%;
  margin-top: 2cqw;
  padding: 4.4cqw;
  border: 1px solid var(--sln-ink);
  background: transparent;
  color: var(--sln-ink);
  font-family: var(--sln-caps);
  font-size: 3cqw;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  transition: background-color 160ms, color 160ms;
}

.nci--salon .sln-submit:hover:enabled {
  background: var(--sln-ink);
  color: var(--sln-paper);
}

.nci--salon .sln-err {
  margin-top: 1.8cqw;
  font-family: var(--sln-caps);
  font-size: max(12px, 2.5cqw);
  letter-spacing: 0.06em;
  color: #9a5a3c;
}

.nci--salon .sln-done {
  margin: 9cqw var(--sln-g) 0;
  padding: 8cqw 6cqw;
  border-top: 1px solid var(--sln-gold);
  border-bottom: 1px solid var(--sln-gold);
  text-align: center;
}

.nci--salon .sln-done-t {
  font-family: var(--sln-disp);
  font-size: 5cqw;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--sln-ink);
}

.nci--salon .sln-done-b {
  margin-top: 2.6cqw;
  font-family: var(--sln-text);
  font-size: 3cqw;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--sln-mute);
}

.nci--salon .sln-req {
  margin-left: 0.5em;
  color: #9a5a3c;
}

.nci--salon .sln-choice + .sln-err {
  margin: -4.4cqw 0 6cqw;
}

.nci--salon .sln-err--server {
  margin: 0 0 3cqw;
}

.nci--salon .sln-submit[aria-busy='true'],
.nci--salon .sln-wishform button[aria-busy='true'] {
  opacity: 0.7;
  cursor: progress;
}

.nci--salon .sln-done-when {
  margin-top: 1.6cqw;
  font-family: var(--sln-caps);
  font-size: 2.4cqw;
  letter-spacing: 0.06em;
  color: var(--sln-mute);
}

.nci--salon .sln-wish-err {
  grid-column: 1 / -1;
  margin-top: 0;
}

.nci--salon .sln-done-edit {
  margin-top: 4cqw;
  padding: 0 0 0.8cqw;
  border: 0;
  border-bottom: 1px solid var(--sln-hair);
  background: none;
  font-family: var(--sln-caps);
  font-size: 2.5cqw;
  letter-spacing: 0.2em;
  color: var(--sln-blue);
}

/* ───── The book ───── */

.nci--salon .sln-wishform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.6cqw;
  margin: 7cqw var(--sln-g) 0;
  /* In English the button is a short word and lands in the corner the two discs occupy, so the
     whole form keeps clear of their band. */
  padding-right: 13cqw;
}

.nci--salon .sln-wish-in {
  min-width: 0;
  padding: 2.8cqw 0;
  border: 0;
  border-bottom: 1px solid var(--sln-hair);
  background: transparent;
  font-family: var(--sln-text);
  font-size: 3cqw;
  letter-spacing: 0.06em;
  color: var(--sln-ink);
  outline: none;
}

.nci--salon .sln-wish-in--name {
  grid-column: 1 / -1;
}

.nci--salon .sln-wish-in::placeholder {
  color: var(--sln-mute);
}

.nci--salon .sln-wish-in:focus {
  border-bottom-color: var(--sln-gold);
}

.nci--salon .sln-wish-post {
  align-self: end;
  margin-bottom: 0.4cqw;
  padding: 2.2cqw 4.6cqw;
  border: 1px solid rgba(176, 141, 79, 0.8);
  background: transparent;
  font-family: var(--sln-caps);
  font-size: 2.5cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--sln-blue);
}

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

.nci--salon .sln-wish {
  padding: 4cqw 0;
  border-bottom: 1px solid var(--sln-rule);
}

.nci--salon .sln-wish-text {
  font-family: var(--sln-text);
  font-size: 3.1cqw;
  line-height: 2.05;
  letter-spacing: 0.06em;
  color: #4a5361;
  overflow-wrap: anywhere;
}

.nci--salon .sln-wish-from {
  margin-top: 1.6cqw;
  font-family: var(--sln-caps);
  font-size: 2.4cqw;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: right;
  color: var(--sln-mute);
}

.nci--salon .sln-wish-from::before {
  content: '— ';
}

/* The two ivory discs float at the bottom right of the screen, so this line — the only thing in the
   book until a guest writes in it — ends before their band rather than running under it. */
.nci--salon .sln-wish-empty {
  padding-right: 16cqw;
  font-family: var(--sln-text);
  font-size: 3cqw;
  letter-spacing: 0.06em;
  color: var(--sln-mute);
}

/* ───── The bow, and the last line ───── */

.nci--salon .sln-close {
  margin: 14cqw var(--sln-g) 0;
  text-align: center;
}

.nci--salon .sln-bow {
  display: block;
  width: 20cqw;
  height: auto;
  margin: 0 auto 5cqw;
  fill: none;
  stroke: var(--sln-gold);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nci--salon .sln-close-caps {
  font-family: var(--sln-caps);
  font-size: 2.6cqw;
  line-height: 1.8;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--sln-blue);
}

.nci--salon .sln-close-line {
  margin-top: 2.6cqw;
  font-family: var(--sln-disp);
  font-size: 4.2cqw;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: var(--sln-ink);
}

/* ───── Latin content ─────
   The tracking above is set for 中文, whose sample copy already carries its own spacing. A doc the couple
   wrote in English gets wider caps tracking and no justified rag, because Latin words at CJK tracking
   scatter into loose letters and justification opens rivers in a 40-character measure. `nci--lang-*`
   comes from the renderer and reads the couple's own names. */

.nci--salon.nci--lang-en .sln-rubric-t,
.nci--salon.nci--lang-en .sln-close-caps {
  font-size: 2.5cqw;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
}

.nci--salon.nci--lang-en .sln-para {
  text-align: left;
  letter-spacing: 0.01em;
  line-height: 1.95;
}

.nci--salon.nci--lang-en .sln-verse {
  font-size: 3.1cqw;
  line-height: 2.1;
  letter-spacing: 0.06em;
  text-indent: 0;
}

.nci--salon.nci--lang-en .sln-invite,
.nci--salon.nci--lang-en .sln-note,
.nci--salon.nci--lang-en .sln-addr,
.nci--salon.nci--lang-en .sln-wish-text,
.nci--salon.nci--lang-en .sln-travel-v,
.nci--salon.nci--lang-en .sln-faq-a {
  letter-spacing: 0.01em;
  line-height: 1.95;
}

.nci--salon.nci--lang-en .sln-invite {
  line-height: 2;
}

.nci--salon.nci--lang-en .sln-h2,
.nci--salon.nci--lang-en .sln-venue,
.nci--salon.nci--lang-en .sln-dateline,
.nci--salon.nci--lang-en .sln-close-line {
  letter-spacing: 0.02em;
  text-indent: 0;
}

.nci--salon.nci--lang-en .sln-plate-cap {
  font-size: 2.3cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

.nci--salon.nci--lang-en .sln-plate--half .sln-plate-cap {
  font-size: 2.05cqw;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

.nci--salon.nci--lang-en .sln-choice-row {
  letter-spacing: 0.04em;
}

.nci--salon.nci--lang-en .sln-cover-foot {
  letter-spacing: 0.26em;
  text-indent: 0.26em;
}

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

.nci-cover--salon {
  container-type: inline-size;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #cfc9bd;
  font-family: var(--sln-caps);
}

.nci-cover--salon .sln-cv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* The overlay is taller again than the page's own cover, so the same reading holds: the couple occupies
   the top half and the veil stays out of it completely, turning on below her hands and deepening under
   the block of names. The picture opens the card undimmed. */
.nci-cover--salon .sln-cv-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(22, 26, 32, 0.88) 0%,
    rgba(22, 26, 32, 0.86) 22%,
    rgba(22, 26, 32, 0.83) 34%,
    rgba(22, 26, 32, 0.8) 41%,
    rgba(22, 26, 32, 0.72) 43%,
    rgba(22, 26, 32, 0.57) 45%,
    rgba(22, 26, 32, 0.39) 47%,
    rgba(22, 26, 32, 0.22) 49%,
    rgba(22, 26, 32, 0.09) 50.5%,
    rgba(22, 26, 32, 0) 52%
  );
}

/* Two hairlines inset from the edges — the engraved border of a printed card. */
.nci-cover--salon .sln-cv-frame {
  position: absolute;
  inset: 5cqw;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1.2cqw rgba(22, 26, 32, 0), inset 0 0 0 calc(1.2cqw + 1px) rgba(176, 141, 79, 0.75);
}

/* Held to the foot of the card rather than centred on it: centred put the names across his face. */
.nci-cover--salon .sln-cv-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 13cqw 9cqw;
  text-align: center;
  color: #fff;
}

.nci-cover--salon .sln-cv-kicker {
  font-size: 2.7cqw;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(16, 20, 26, 0.5);
}

.nci-cover--salon .sln-cv-names {
  margin-top: 5cqw;
  font-family: var(--sln-disp);
  font-weight: 400;
  font-size: 10.5cqw;
  line-height: 1.26;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 16px rgba(16, 20, 26, 0.5);
  overflow-wrap: anywhere;
}

.nci-cover--salon .sln-cv-names span {
  display: block;
}

.nci-cover--salon .sln-cv-amp {
  margin: 0.4cqw 0;
  font-size: 5.4cqw;
  color: rgba(255, 255, 255, 0.8);
}

.nci-cover--salon .sln-cv-rule {
  width: 16cqw;
  height: 1px;
  margin: 5.4cqw 0;
  background: rgba(176, 141, 79, 0.9);
}

.nci-cover--salon .sln-cv-date {
  font-family: var(--sln-disp);
  font-size: 3.4cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 10px rgba(16, 20, 26, 0.5);
}

.nci-cover--salon .sln-cv-open {
  margin-top: 10cqw;
  padding: 3.4cqw 8cqw;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(244, 241, 234, 0.08);
  color: #fff;
  font-family: var(--sln-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
  transition: background-color 160ms, color 160ms;
}

.nci-cover--salon .sln-cv-open:hover {
  background: rgba(244, 241, 234, 0.94);
  color: var(--sln-ink);
}

.nci-cover--salon .sln-cv-open:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.nci-cover--salon .sln-cv-hint {
  margin-top: 4cqw;
  font-size: 2.5cqw;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: rgba(255, 255, 255, 0.78);
  animation: sln-hint 2.8s ease-in-out infinite;
}

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

@keyframes sln-hint {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

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

/* ═════════════ Floating bar — two hairline discs at the foot, to the right ═════════════
   Centred is where the renderer puts it and where this page cannot have it: everything here sits on the
   axis, so a centred bar crosses a caption, a form label or the last line of a paragraph on every
   screen. It goes to the outer margin instead, as two small discs — the other poster styles carry a
   labelled pill at the top right, and this one is quieter and out of the way of the column. */

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

.nci-float--salon button {
  width: 34px;
  height: 34px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border: 1px solid rgba(176, 141, 79, 0.8);
  border-radius: 50%;
  background: rgba(244, 241, 234, 0.95);
  color: var(--sln-blue);
  font-family: var(--sln-caps);
  font-size: 0;
  letter-spacing: 0;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(43, 48, 56, 0.08);
}

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

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

.nci-float--salon .nci-float-share::before {
  content: '\2197';
  font-size: 15px;
  line-height: 1;
  color: var(--sln-blue);
}

.nci-float--salon .nci-float-music[aria-pressed='true'] {
  border-color: var(--sln-gold);
  background: rgba(176, 141, 79, 0.94);
}

.nci-float--salon .nci-float-music[aria-pressed='true'] .nci-float-dot {
  color: #fff;
  animation: sln-pulse 2.4s ease-in-out infinite;
}

@keyframes sln-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

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

  .nci-cover--salon .sln-cv-open,
  .nci--salon .sln-submit {
    transition: none;
  }

  .nci-cover--salon.sln-cover--opening {
    animation-duration: 1ms;
  }
}

/* The two discs rest in the bottom right corner of the screen, so the one row of controls that
   reaches that band — the guest stepper — keeps its distance from it. */
.nci--salon .sln-line--count {
  padding-right: 13cqw;
}

/* Same band, the other thing that reaches it: the hour at the end of each dot-leader row. */
.nci--salon .sln-run-row {
  padding-right: 11cqw;
}