/* Nicecard demo — "Table for Two" (双人晚宴) invitation style. Everything is scoped under .nci--supper,
   .nci-cover--supper and .nci-float--supper so the other styles are untouched; new classes use the spr-
   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 material is ivory laid paper — the fine horizontal laid lines and the wider chain lines of a
   menu stock, drawn in CSS rather than loaded — and there is one ink: a claret wine that carries every
   drawing, every heading and both names. Body text is a wine-black rather than a second colour, and
   the quiet grey is a wine-grey, so the page still reads as printed in one ink. Every colour that
   carries a word clears 4.5:1 on the paper: --spr-wine 9.6:1, --spr-ink 15.2:1, --spr-ink-2 9.1:1 and
   --spr-mute 5.4:1. The hairlines are the wine at low alpha and carry no text.
   Type is EB Garamond, roman and its real italic, over Noto Serif SC. Chinese is never slanted: every
   italic on this page is set upright for a Chinese doc, with a little letter-spacing instead. The
   smallest type is 2.6cqw (10px at 390), and never below 10px on a narrower phone, wherever it carries information. */

.nci--supper,
.nci-cover--supper,
.nci-float--supper {
  --spr-paper: #f7f0e3;
  --spr-paper-2: #efe5d2;
  --spr-card: #fcf8ef;
  --spr-wine: #861c27;
  --spr-ink: #2b1b1d;
  --spr-ink-2: #4a3033;
  --spr-mute: #6f5557;
  --spr-hair: rgba(134, 28, 39, 0.34);
  --spr-hair-2: rgba(134, 28, 39, 0.16);
  --spr-shadow: rgba(70, 24, 28, 0.32);
  --spr-g: 9cqw;
  --spr-serif: 'EB Garamond', 'Noto Serif SC', Georgia, serif;
  /* EB Garamond has a real italic and Noto Serif SC has none. Without this the browser would slant the
     Chinese itself wherever an italic line meets it — a guest typing 许知远 into an English page's place
     card, or a 中文 visitor reading this page's own labels — so Chinese always falls back upright. */
  font-synthesis: weight;
}

.nci--supper {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--spr-paper);
  color: var(--spr-ink);
  font-family: var(--spr-serif);
  --nci-bg: var(--spr-paper);
  --nci-soft: var(--spr-paper-2);
  --nci-slot-line: rgba(134, 28, 39, 0.45);
  --nci-slot-ink: var(--spr-ink-2);
  --nci-hint: rgba(134, 28, 39, 0.4);
  --nci-sel: #861c27;
}

/* Laid paper: fine laid lines every few pixels and chain lines a thumb's width apart, both faint enough
   to read as the grain of the sheet rather than as ruling, and a warm bloom at the head and the foot
   of the page. Sections paint over it. */
.nci--supper::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(120cqw 80cqw at 50% 0%, rgba(255, 252, 244, 0.7) 0%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(120, 72, 52, 0.02) 0 1px, transparent 1px 24cqw),
    repeating-linear-gradient(0deg, rgba(120, 72, 52, 0.02) 0 1px, transparent 1px 4px);
}

.nci--supper .nci-section {
  display: flow-root;
  padding: 0;
}

.nci--supper .nci-s-story,
.nci--supper .nci-s-gallery,
.nci--supper .nci-s-countdown,
.nci--supper .nci-s-venue,
.nci--supper .nci-s-faq,
.nci--supper .nci-s-rsvp,
.nci--supper .nci-s-wishes {
  padding-top: 24cqw;
}

.nci--supper .nci-s-schedule {
  padding-top: 22cqw;
}

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

/* Every drawing on this page is ornament: none of them may take a tap from a photo slot or a field. */
.nci--supper .spr-ink,
.nci-cover--supper .spr-ink,
.nci--supper .spr-course-lead,
.nci--supper .spr-card-back {
  pointer-events: none;
}

.nci--supper .spr-ink,
.nci-cover--supper .spr-ink {
  --nci-ink-c: var(--spr-wine);
}

/* One pen across the page. The kit draws every piece with the same line, so the small prints — the
   candlesticks, the bouquet, the banquet table and the rules — come out a pale pink beside the
   scalloped frame and the plate. Laying the same drawing three times over itself in place builds the
   anti-aliased edge of each stroke back up to the claret without making the line any wider. */
.nci--supper :is(.spr-candles, .spr-bouquet, .spr-banquet, .spr-rule) {
  -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;
}

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

.nci--supper .spr-head {
  padding: 0 var(--spr-g);
  text-align: center;
}

.nci--supper .spr-caps,
.nci--supper .spr-kicker,
.nci-cover--supper .spr-cv-kicker {
  font-family: var(--spr-serif);
  font-size: 2.7cqw;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-title {
  margin-top: 2.2cqw;
  font-size: 7.6cqw;
  font-style: italic;
  font-weight: 400;
  line-height: 1.22;
  color: var(--spr-wine);
}

.nci--supper .spr-dot {
  margin: 0 0.7em;
  opacity: 0.7;
}

.nci--supper .spr-rule {
  width: 34cqw;
  margin: 0 auto;
}

.nci--supper .spr-link {
  display: inline-block;
  padding-bottom: 1cqw;
  border-bottom: 1px solid var(--spr-hair);
  font-family: var(--spr-serif);
  font-size: 2.7cqw;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--spr-wine);
}

.nci--supper .spr-prose {
  padding: 6cqw 11cqw 0;
  text-align: center;
  font-size: 3.7cqw;
  line-height: 1.85;
  color: var(--spr-ink-2);
}

.nci--supper .spr-foot,
.nci--supper .spr-say {
  padding: 5cqw 12cqw 0;
  text-align: center;
  font-size: 3.6cqw;
  font-style: italic;
  line-height: 1.75;
  color: var(--spr-ink-2);
}

/* Headings and short lines balance across their lines; prose avoids a last word on its own. */
.nci--supper :is(.spr-title, .spr-names, .spr-lede, .spr-foot, .spr-say, .spr-menu-foot, .spr-close-line, .spr-toast, .spr-done-t, .spr-done-b, .spr-note),
.nci-cover--supper .spr-cv-names {
  text-wrap: balance;
}

.nci--supper :is(.spr-prose, .spr-host-line, .spr-snap-cap, .spr-wish-text, .spr-faq-a, .spr-place-addr) {
  text-wrap: pretty;
}

/* ───── cover ─────
   The kicker, the photograph in its scalloped card, the names and the date: the guest cover overlay
   repeats these measurements exactly, so they are written once for both. */

.nci--supper .spr-cover,
.nci-cover--supper {
  padding-top: 8cqw;
  text-align: center;
}

.nci--supper .spr-cover {
  padding-bottom: 2cqw;
}

.nci--supper .spr-scallop,
.nci-cover--supper .spr-scallop {
  position: relative;
  width: 88cqw;
  margin: 0 auto;
  aspect-ratio: 1132 / 1123;
}

/* The picture is inset to just inside the scallops' valleys (the drawing's inner edge is 5.3% in on
   every side), so a hair of card shows between the ink and the photograph. */
.nci--supper .spr-scallop-img,
.nci-cover--supper .spr-scallop-img {
  position: absolute;
  inset: 7%;
  overflow: hidden;
  background: #3a2a24;
}

.nci-cover--supper .spr-scallop-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
}

.nci--supper .spr-scallop-ink,
.nci-cover--supper .spr-scallop-ink {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nci--supper .spr-scallop--cover,
.nci-cover--supper .spr-cv-card {
  width: 92cqw;
  margin-top: 4.4cqw;
}

.nci--supper .spr-names,
.nci-cover--supper .spr-cv-names {
  margin-top: 5.4cqw;
  padding: 0 6cqw;
  font-family: var(--spr-serif);
  font-size: 11.6cqw;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  color: var(--spr-wine);
  overflow-wrap: anywhere;
}

.nci--supper .spr-amp,
.nci-cover--supper .spr-cv-amp {
  display: inline-block;
  margin: 0 0.24em;
  font-size: 0.72em;
  font-style: italic;
}

.nci--supper .spr-dateline,
.nci-cover--supper .spr-cv-date {
  margin-top: 3.6cqw;
  font-family: var(--spr-serif);
  font-size: 2.8cqw;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--spr-ink-2);
}

.nci--supper .spr-dateline .spr-dot,
.nci-cover--supper .spr-cv-date .spr-dot {
  margin: 0 0.5em;
  opacity: 0.7;
}

.nci--supper .spr-still {
  width: 82cqw;
  margin: 8cqw auto 0;
}

.nci--supper .spr-lede {
  padding: 6cqw 12cqw 0;
  font-size: 3.8cqw;
  font-style: italic;
  line-height: 1.75;
  color: var(--spr-ink);
}

.nci--supper .spr-where {
  margin-top: 5cqw;
  padding: 0 var(--spr-g);
  font-size: 2.7cqw;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-where .spr-dot {
  margin: 0 0.4em;
}

/* ───── story — the two hosts ───── */

.nci--supper .spr-hosts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21cqw minmax(0, 1fr);
  align-items: center;
  gap: 4cqw;
  margin: 11cqw 6cqw 0;
}

.nci--supper .spr-candles {
  width: 21cqw;
}

.nci--supper .spr-host--a {
  text-align: right;
}

.nci--supper .spr-host--b {
  text-align: left;
}

.nci--supper .spr-host-role {
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-host--a .spr-host-role {
  letter-spacing: 0.24em;
  margin-right: -0.24em;
}

.nci--supper .spr-host-name {
  margin-top: 1.4cqw;
  font-size: 6.4cqw;
  font-style: italic;
  line-height: 1.15;
  color: var(--spr-wine);
  overflow-wrap: anywhere;
}

.nci--supper .spr-host-line {
  margin-top: 2.4cqw;
  font-size: 3.2cqw;
  line-height: 1.6;
  color: var(--spr-ink-2);
}

.nci--supper .spr-toast {
  margin-top: 11cqw;
  padding: 0 var(--spr-g);
  text-align: center;
  font-size: 4.2cqw;
  font-style: italic;
  line-height: 1.5;
  color: var(--spr-wine);
}

.nci--supper .spr-toast::before,
.nci--supper .spr-toast::after {
  content: '—';
  margin: 0 0.6em;
  opacity: 0.55;
}

/* ───── gallery — photographs passed round ───── */

.nci--supper .spr-snaps {
  display: grid;
  gap: 13cqw;
  margin-top: 11cqw;
}

.nci--supper .spr-snap {
  display: grid;
  grid-template-columns: 48cqw minmax(0, 1fr);
  align-items: end;
  gap: 5cqw;
  padding: 0 6cqw;
}

.nci--supper .spr-snap--flip {
  grid-template-columns: minmax(0, 1fr) 48cqw;
}

.nci--supper .spr-snap--flip .spr-mount {
  order: 2;
}

.nci--supper .spr-snap--flip .spr-snap-text {
  text-align: right;
}

/* A keyline mount: the photograph on a strip of card inside one wine hairline. */
.nci--supper .spr-mount {
  min-width: 0;
  padding: 1.8cqw;
  border: 1px solid var(--spr-hair);
  background: var(--spr-card);
  box-shadow: 0 12px 20px -18px var(--spr-shadow);
}

.nci--supper .spr-snap-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
}

.nci--supper .spr-snap-text {
  min-width: 0;
  padding-bottom: 1cqw;
}

.nci--supper .spr-bouquet {
  width: 24cqw;
  margin: 0 0 4cqw auto;
}

.nci--supper .spr-snap-no {
  font-size: 9cqw;
  font-style: italic;
  line-height: 1;
  color: var(--spr-wine);
}

.nci--supper .spr-snap-meta {
  margin-top: 2.6cqw;
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-snap-cap {
  margin-top: 2cqw;
  font-size: 3.4cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--spr-ink-2);
}

/* ───── countdown — the plate is the dial ───── */

.nci--supper .spr-cd {
  margin-top: 9cqw;
}

.nci--supper .spr-plate {
  position: relative;
  width: 86cqw;
  margin: 0 auto;
}

.nci--supper .spr-plate-ink {
  width: 100%;
}

/* The well of the plate, measured off the drawing: an inner rim 51.8% of its width across, centred at
   49.5% / 50.6%. */
.nci--supper .spr-plate-well {
  position: absolute;
  top: 50.6%;
  left: 49.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44cqw;
  height: 44cqw;
  transform: translate(-50%, -50%);
  text-align: center;
}

.nci--supper .spr-plate-n {
  font-size: 15cqw;
  font-style: italic;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--spr-wine);
}

.nci--supper .spr-plate-u {
  margin-top: 1.4cqw;
  font-size: 2.7cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-clock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3cqw;
  margin-top: 6cqw;
}

.nci--supper .spr-clock-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 12cqw;
}

.nci--supper .spr-clock-n {
  font-size: 7.4cqw;
  font-style: italic;
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--spr-wine);
}

.nci--supper .spr-clock-u {
  margin-top: 1cqw;
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--spr-mute);
}

.nci--supper .spr-clock-sep {
  font-size: 6cqw;
  line-height: 1.2;
  color: var(--spr-hair);
}

.nci--supper .spr-cd-done {
  margin-top: 9cqw;
  text-align: center;
  font-size: 9cqw;
  font-style: italic;
  color: var(--spr-wine);
}

.nci--supper .spr-cd-date {
  margin-top: 8cqw;
  padding: 0 var(--spr-g);
  text-align: center;
  font-size: 2.8cqw;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--spr-ink-2);
}

.nci--supper .spr-cd-date .spr-dot {
  margin: 0 0.5em;
}

/* ───── schedule — the menu card ─────
   A card of its own, lighter than the paper, with a double keyline: the border, then a second rule
   drawn inside it by an inset shadow. */

.nci--supper .spr-menu {
  margin: 0 6cqw;
  padding: 9cqw 8cqw 9cqw;
  border: 1px solid var(--spr-hair);
  background: var(--spr-card);
  box-shadow:
    inset 0 0 0 2cqw var(--spr-card),
    inset 0 0 0 calc(2cqw + 1px) var(--spr-hair-2),
    0 18px 26px -22px var(--spr-shadow);
  text-align: center;
}

.nci--supper .spr-banquet {
  width: 46cqw;
  margin: 0 auto;
}

.nci--supper .spr-menu-caps {
  margin-top: 6cqw;
}

.nci--supper .spr-menu-title {
  margin-top: 0.6cqw;
  font-size: 15cqw;
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  color: var(--spr-wine);
}

.nci--supper .spr-menu-sub {
  margin-top: 1.2cqw;
  font-size: 3.4cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--spr-mute);
}

.nci--supper .spr-dateline--menu {
  margin-top: 3cqw;
  font-size: max(10px, 2.6cqw);
}

.nci--supper .spr-rule--menu {
  width: 30cqw;
  margin: 6cqw auto;
}

.nci--supper .spr-courses {
  text-align: left;
}

.nci--supper .spr-course + .spr-course {
  margin-top: 5.4cqw;
}

.nci--supper .spr-course-k {
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-course-row {
  display: flex;
  align-items: baseline;
  gap: 2cqw;
  margin-top: 0.8cqw;
}

.nci--supper .spr-course-d {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 4.1cqw;
  font-style: italic;
  line-height: 1.4;
  color: var(--spr-ink);
}

.nci--supper .spr-course-lead {
  flex: 1 1 5cqw;
  min-width: 5cqw;
  border-bottom: 1px dotted var(--spr-hair);
  transform: translateY(-0.28em);
}

.nci--supper .spr-course-at {
  flex: none;
  font-size: 3.6cqw;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--spr-wine);
}

.nci--supper .spr-menu-foot {
  font-size: 3.2cqw;
  font-style: italic;
  line-height: 1.7;
  color: var(--spr-mute);
}

.nci--supper .spr-linkrow {
  margin-top: 6cqw;
}

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

.nci--supper .spr-church {
  width: 44cqw;
  margin: 9cqw auto 0;
}

.nci--supper .spr-place {
  margin-top: 6cqw;
  padding: 0 var(--spr-g);
  text-align: center;
}

.nci--supper .spr-place-name {
  font-size: 6.4cqw;
  font-style: italic;
  line-height: 1.25;
  color: var(--spr-wine);
  overflow-wrap: anywhere;
}

.nci--supper .spr-place-addr {
  margin-top: 2.4cqw;
  font-size: 3.4cqw;
  line-height: 1.7;
  color: var(--spr-ink-2);
}

.nci--supper .spr-place-city {
  margin-top: 1.6cqw;
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-mapwrap {
  margin: 8cqw var(--spr-g) 0;
  padding: 1.8cqw;
  border: 1px solid var(--spr-hair);
  background: var(--spr-card);
}

/* The map as the ink would draw it: a card with a faint street grid, one road ruled in wine, the
   garden the table stands in outlined, and the pin as a drop of the same ink. */
.nci--supper .nci-map {
  height: 36cqw;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(134, 28, 39, 0.07) 0 1px, transparent 1px 9cqw),
    repeating-linear-gradient(0deg, rgba(134, 28, 39, 0.07) 0 1px, transparent 1px 9cqw),
    var(--spr-card);
}

.nci--supper .nci-map::before {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 30%;
  width: 2.6cqw;
  border-left: 1px solid var(--spr-hair);
  border-right: 1px solid var(--spr-hair);
  transform: rotate(14deg);
}

.nci--supper .nci-map::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 55%;
  width: 22cqw;
  height: 14cqw;
  border: 1px dashed var(--spr-hair);
  border-radius: 1cqw;
}

.nci--supper .nci-map-road {
  top: 58%;
  height: 3cqw;
  border-top: 1px solid var(--spr-wine);
  border-bottom: 1px solid var(--spr-wine);
  opacity: 0.55;
}

.nci--supper .nci-map-pin {
  z-index: 1;
  top: 30%;
  left: 62%;
  width: 4.2cqw;
  height: 4.2cqw;
  background: var(--spr-wine);
  box-shadow: 0 0 0 1.4cqw rgba(134, 28, 39, 0.14);
}

.nci--supper .spr-maps {
  display: flex;
  justify-content: center;
  gap: 8cqw;
  margin-top: 5.4cqw;
}

.nci--supper .spr-note {
  padding: 7cqw 10cqw 0;
  text-align: center;
  font-size: 3.5cqw;
  font-style: italic;
  line-height: 1.8;
  white-space: pre-line;
  color: var(--spr-ink-2);
}

.nci--supper .spr-travel {
  margin: 8cqw var(--spr-g) 0;
  border-top: 1px solid var(--spr-hair-2);
}

.nci--supper .spr-travel-row {
  display: grid;
  grid-template-columns: 24cqw minmax(0, 1fr);
  gap: 4cqw;
  padding: 3.6cqw 0;
  border-bottom: 1px solid var(--spr-hair-2);
}

.nci--supper .spr-travel-k {
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-travel-v {
  font-size: 3.3cqw;
  line-height: 1.7;
  color: var(--spr-ink-2);
}

/* ───── faq — the host's notes ───── */

.nci--supper .spr-faq {
  margin: 8cqw var(--spr-g) 0;
  text-align: center;
}

.nci--supper .spr-faq-item + .spr-faq-item {
  margin-top: 7cqw;
}

.nci--supper .spr-faq-q {
  font-size: 4.2cqw;
  font-style: italic;
  line-height: 1.4;
  color: var(--spr-wine);
}

.nci--supper .spr-faq-a {
  margin-top: 1.8cqw;
  font-size: 3.4cqw;
  line-height: 1.7;
  color: var(--spr-ink-2);
}

/* ───── rsvp — the place card ───── */

.nci--supper .spr-by {
  margin-top: 3.4cqw;
  padding: 0 var(--spr-g);
  text-align: center;
  font-size: 2.7cqw;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

/* A folded tent card: the back leaf leaning away above the fold, then the face with its double
   keyline and a soft shadow on the table under it. */
.nci--supper .spr-card {
  position: relative;
  width: 72cqw;
  margin: 10cqw auto 0;
}

.nci--supper .spr-card-back {
  height: 5.4cqw;
  margin: 0 2.6cqw;
  border: 1px solid var(--spr-hair-2);
  border-bottom: none;
  background: linear-gradient(180deg, #ece2cf 0%, #f4ecde 100%);
  transform: perspective(60cqw) rotateX(46deg);
  transform-origin: 50% 100%;
}

.nci--supper .spr-card-face {
  padding: 8cqw 5cqw 6.4cqw;
  border: 1px solid var(--spr-hair);
  background: linear-gradient(180deg, rgba(90, 40, 30, 0.05) 0%, transparent 16%), var(--spr-card);
  box-shadow: 0 20px 22px -18px var(--spr-shadow);
  text-align: center;
}

.nci--supper .spr-card-face::before {
  content: '';
  position: absolute;
  inset: calc(5.4cqw + 2cqw) 2cqw 2cqw;
  border: 1px solid var(--spr-hair-2);
  pointer-events: none;
}

.nci--supper .spr-card-name {
  min-height: 1.25em;
  font-size: 8.6cqw;
  font-style: italic;
  line-height: 1.25;
  color: var(--spr-wine);
  overflow-wrap: anywhere;
}

.nci--supper .spr-card-name.is-empty {
  color: rgba(134, 28, 39, 0.4);
}

.nci--supper .spr-card-meta {
  margin-top: 3cqw;
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--spr-mute);
}

.nci--supper .spr-card-meta .spr-dot {
  margin: 0 0.5em;
}

.nci--supper .spr-form {
  margin: 10cqw var(--spr-g) 0;
}

/* Each line of the form is a label in small caps over the answer, written in italic on a wine rule. */
.nci--supper .spr-row {
  display: block;
  padding: 4.4cqw 0 0.6cqw;
  border-bottom: 1px solid var(--spr-hair);
}

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

.nci--supper .spr-row-l {
  display: block;
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-row-i {
  width: 100%;
  min-width: 0;
  padding: 1cqw 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--spr-serif);
  font-size: 4.2cqw;
  font-style: italic;
  color: var(--spr-ink);
  outline: none;
}

.nci--supper .spr-row-i:focus-visible {
  box-shadow: 0 1px 0 0 var(--spr-wine);
}

.nci--supper .spr-err {
  margin-top: 1.8cqw;
  font-size: max(12px, 3.2cqw);
  font-style: normal;
  color: var(--spr-wine);
}

.nci--supper .spr-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3cqw;
  margin-top: 7cqw;
}

.nci--supper .spr-choice-b {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 3.4cqw 3cqw;
  border: 1px solid var(--spr-hair);
  border-radius: 0;
  background: transparent;
  font-family: var(--spr-serif);
  font-size: 3.6cqw;
  font-style: italic;
  line-height: 1.3;
  text-align: left;
  color: var(--spr-ink);
}

.nci--supper .spr-choice-box {
  position: relative;
  flex: none;
  width: 3.4cqw;
  height: 3.4cqw;
  border: 1px solid var(--spr-wine);
}

.nci--supper .spr-choice-b[aria-pressed='true'] {
  border-color: var(--spr-wine);
  background: var(--spr-card);
}

.nci--supper .spr-choice-b[aria-pressed='true'] .spr-choice-box::after {
  content: '';
  position: absolute;
  inset: 0.6cqw;
  background: var(--spr-wine);
}

.nci--supper .spr-row--count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4cqw;
  padding-bottom: 2.4cqw;
}

.nci--supper .spr-step {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 4.4cqw;
  font-size: 4.4cqw;
  font-style: italic;
  font-variant-numeric: lining-nums;
  color: var(--spr-wine);
}

.nci--supper .spr-step button {
  width: 8cqw;
  height: 8cqw;
  padding: 0;
  border: 1px solid var(--spr-hair);
  border-radius: 50%;
  background: transparent;
  font-family: var(--spr-serif);
  font-size: 4.4cqw;
  font-style: normal;
  line-height: 1;
  color: var(--spr-wine);
}

.nci--supper .spr-step button:disabled {
  opacity: 0.35;
}

.nci--supper .spr-row--diet {
  padding-bottom: 3.6cqw;
}

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

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

.nci--supper .spr-tag[aria-pressed='true'] {
  border-color: var(--spr-wine);
  background: var(--spr-wine);
  color: var(--spr-card);
}

.nci--supper .spr-tag:disabled {
  opacity: 0.45;
}

.nci--supper .spr-submit {
  display: block;
  width: 100%;
  margin-top: 9cqw;
  padding: 4.2cqw 4cqw;
  border: none;
  border-radius: 0;
  background: var(--spr-wine);
  box-shadow: inset 0 0 0 1.4cqw var(--spr-wine), inset 0 0 0 calc(1.4cqw + 1px) rgba(252, 248, 239, 0.45);
  font-family: var(--spr-serif);
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--spr-card);
}

.nci--supper .spr-submit:disabled {
  opacity: 0.9;
}

.nci--supper :is(.spr-choice-b, .spr-tag, .spr-step button, .spr-submit, .spr-wish-post, .spr-done-edit):focus-visible {
  outline: 2px solid var(--spr-wine);
  outline-offset: 3px;
}

.nci--supper .spr-done {
  margin: 8cqw var(--spr-g) 0;
  text-align: center;
}

.nci--supper .spr-done-t {
  font-size: 6.6cqw;
  font-style: italic;
  line-height: 1.3;
  color: var(--spr-wine);
}

.nci--supper .spr-done-b {
  margin-top: 3cqw;
  font-size: 3.5cqw;
  line-height: 1.75;
  color: var(--spr-ink-2);
}

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

.nci--supper .spr-err--server {
  margin-top: 6cqw;
}

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

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

.nci--supper .spr-done-edit {
  margin-top: 6cqw;
  padding: 0 0 1cqw;
  border: none;
  border-bottom: 1px solid var(--spr-hair);
  background: none;
  font-family: var(--spr-serif);
  font-size: 2.7cqw;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

/* ───── wishes — toasts ───── */

.nci--supper .spr-wishform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2cqw 4cqw;
  margin: 8cqw var(--spr-g) 0;
}

.nci--supper .spr-wish-in {
  width: 100%;
  min-width: 0;
  padding: 2.6cqw 0;
  border: none;
  border-bottom: 1px solid var(--spr-hair);
  border-radius: 0;
  background: transparent;
  font-family: var(--spr-serif);
  font-size: 3.9cqw;
  font-style: italic;
  color: var(--spr-ink);
  outline: none;
}

.nci--supper .spr-wish-in::placeholder {
  color: var(--spr-mute);
}

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

.nci--supper .spr-wish-in--name {
  grid-column: 1 / -1;
}

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

.nci--supper .spr-wish-post {
  align-self: end;
  padding: 2.4cqw 5cqw;
  border: 1px solid var(--spr-wine);
  border-radius: 0;
  background: transparent;
  font-family: var(--spr-serif);
  font-size: 2.7cqw;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--spr-wine);
}

.nci--supper .spr-wish-post:disabled {
  opacity: 0.5;
}

.nci--supper .spr-wishes {
  margin: 9cqw var(--spr-g) 0;
}

.nci--supper .spr-wish {
  padding: 5.4cqw 2cqw;
  text-align: center;
  border-top: 1px solid var(--spr-hair-2);
}

.nci--supper .spr-wish:last-child {
  border-bottom: 1px solid var(--spr-hair-2);
}

.nci--supper .spr-wish-text {
  font-size: 4.1cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--spr-ink);
  overflow-wrap: anywhere;
}

.nci--supper .spr-wish-from {
  margin-top: 2cqw;
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

.nci--supper .spr-wish-empty {
  padding: 6cqw 0;
  text-align: center;
  font-size: 3.4cqw;
  font-style: italic;
  color: var(--spr-mute);
}

.nci--supper .spr-close {
  margin-top: 18cqw;
  text-align: center;
}

.nci--supper .spr-scallop--close {
  width: 70cqw;
}

.nci--supper .spr-close-line {
  padding: 7cqw 12cqw 0;
  font-size: 4.6cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--spr-wine);
}

.nci--supper .spr-rule--close {
  width: 26cqw;
  margin-top: 7cqw;
}

.nci--supper .spr-close-mark {
  margin-top: 4cqw;
  font-size: max(10px, 2.6cqw);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--spr-wine);
}

/* ───── Chinese: upright, with a little air between the characters ─────
   No italic is ever synthesised on 中文, and the small caps lines lose their wide Latin tracking. */

.nci--supper.nci--lang-zh :is(.spr-title, .spr-names, .spr-amp, .spr-lede, .spr-host-name, .spr-toast, .spr-snap-cap, .spr-foot, .spr-say, .spr-menu-title, .spr-menu-sub, .spr-course-d, .spr-menu-foot, .spr-place-name, .spr-note, .spr-faq-q, .spr-card-name, .spr-choice-b, .spr-row-i, .spr-err, .spr-done-t, .spr-wish-in, .spr-wish-text, .spr-wish-empty, .spr-close-line, .spr-cd-done),
.nci-cover--supper.spr-cv--zh :is(.spr-cv-names, .spr-cv-amp) {
  font-style: normal;
}

.nci--supper.nci--lang-zh .spr-title {
  font-size: 6cqw;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

.nci--supper.nci--lang-zh .spr-names,
.nci-cover--supper.spr-cv--zh .spr-cv-names {
  font-size: 10cqw;
  letter-spacing: 0.1em;
}

.nci--supper.nci--lang-zh .spr-amp,
.nci-cover--supper.spr-cv--zh .spr-cv-amp {
  margin: 0 0.4em;
  font-size: 0.46em;
  letter-spacing: 0;
  vertical-align: 0.34em;
}

.nci--supper.nci--lang-zh :is(.spr-caps, .spr-kicker, .spr-where, .spr-host-role, .spr-snap-meta, .spr-course-k, .spr-by, .spr-row-l, .spr-place-city, .spr-travel-k, .spr-wish-from, .spr-close-mark, .spr-plate-u, .spr-clock-u),
.nci-cover--supper.spr-cv--zh .spr-cv-kicker {
  font-size: 2.9cqw;
  letter-spacing: 0.24em;
}

.nci--supper.nci--lang-zh :is(.spr-lede, .spr-prose, .spr-foot, .spr-say, .spr-note) {
  font-size: 3.4cqw;
  letter-spacing: 0.06em;
  line-height: 1.95;
}

.nci--supper.nci--lang-zh .spr-host-name {
  font-size: 5.4cqw;
  letter-spacing: 0.08em;
}

.nci--supper.nci--lang-zh .spr-host-line,
.nci--supper.nci--lang-zh .spr-snap-cap {
  font-size: 3.1cqw;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.nci--supper.nci--lang-zh .spr-toast {
  font-size: 3.8cqw;
  letter-spacing: 0.1em;
}

.nci--supper.nci--lang-zh .spr-menu-title {
  font-size: 9cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  line-height: 1.3;
}

.nci--supper.nci--lang-zh .spr-menu-sub,
.nci--supper.nci--lang-zh .spr-menu-foot {
  font-size: 3.1cqw;
  letter-spacing: 0.08em;
}

.nci--supper.nci--lang-zh .spr-course-d {
  font-size: 3.7cqw;
  letter-spacing: 0.06em;
}

.nci--supper.nci--lang-zh .spr-place-name {
  font-size: 5.4cqw;
  letter-spacing: 0.08em;
}

.nci--supper.nci--lang-zh .spr-card-name {
  font-size: 7.4cqw;
  letter-spacing: 0.14em;
}

.nci--supper.nci--lang-zh .spr-choice-b,
.nci--supper.nci--lang-zh .spr-row-i,
.nci--supper.nci--lang-zh .spr-wish-in {
  font-size: 3.5cqw;
}

.nci--supper.nci--lang-zh .spr-wish-text {
  font-size: 3.6cqw;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

.nci--supper.nci--lang-zh .spr-close-line {
  font-size: 4.2cqw;
  letter-spacing: 0.08em;
}

.nci--supper.nci--lang-zh .spr-done-t {
  font-size: 5.6cqw;
  letter-spacing: 0.1em;
}

/* ───── Guest cover overlay ─────
   The page's own first screen with the table left out and a place card of a button in its stead. */

.nci-cover--supper {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 5cqw;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--spr-paper);
  background-image:
    radial-gradient(120cqw 80cqw at 50% 0%, rgba(255, 252, 244, 0.7) 0%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(120, 72, 52, 0.02) 0 1px, transparent 1px 24cqw),
    repeating-linear-gradient(0deg, rgba(120, 72, 52, 0.02) 0 1px, transparent 1px 4px);
  color: var(--spr-ink);
  font-family: var(--spr-serif);
}

/* On a phone tall enough for the whole card this lays out exactly as the page's first screen does.
   On a shorter one only the scalloped card gives way: it keeps its proportions and shrinks until the
   names, the date and the place-card button all fit, however many lines the names take. The overlay
   scrolls only as a last resort, below the smallest card. */
.nci-cover--supper > * {
  flex: none;
}

.nci-cover--supper :is(.spr-cv-kicker, .spr-cv-names, .spr-cv-date, .spr-cv-hint) {
  align-self: stretch;
}

.nci-cover--supper .spr-cv-card {
  flex: 0 1 auto;
  width: auto;
  height: calc(92cqw * 1123 / 1132);
  min-height: 44cqw;
}

.nci-cover--supper .spr-cv-open {
  position: relative;
  display: inline-block;
  margin-top: 7cqw;
  padding: 3.6cqw 9cqw;
  border: 1px solid var(--spr-wine);
  border-radius: 0;
  background: var(--spr-card);
  box-shadow:
    inset 0 0 0 1.2cqw var(--spr-card),
    inset 0 0 0 calc(1.2cqw + 1px) var(--spr-hair),
    0 14px 18px -16px var(--spr-shadow);
  font-family: var(--spr-serif);
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--spr-wine);
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

.nci-cover--supper .spr-cv-open:focus-visible {
  outline: 2px solid var(--spr-wine);
  outline-offset: 5px;
}

.nci-cover--supper.spr-cv--zh .spr-cv-open {
  font-size: 3.4cqw;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}

.nci-cover--supper .spr-cv-hint {
  margin-top: 4cqw;
  font-size: 3.2cqw;
  font-style: italic;
  color: var(--spr-mute);
}

.nci-cover--supper.spr-cv--zh .spr-cv-hint {
  font-size: 2.9cqw;
  font-style: normal;
  letter-spacing: 0.14em;
}

/* Opening: the overlay lifts away and the same card is already underneath it. */
.nci-cover--supper.spr-cv--opening {
  pointer-events: none;
  animation: spr-lift 560ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.nci-cover--supper.spr-cv--opening .spr-cv-open {
  transform: translateY(-4px);
  opacity: 0;
  transition: transform 260ms, opacity 260ms;
}

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

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

  .nci-cover--supper .spr-cv-open,
  .nci-cover--supper.spr-cv--opening .spr-cv-open {
    transition: none;
  }
}

/* ───── Floating bar — two small cards stacked in the right margin ─────
   The bar floats over a page that scrolls under it, and every line here sits inside a 9cqw margin. Two
   32px squares stacked upright fit in that margin at the foot of the screen, so they stay off the
   reply's stepper and the send button, which a bar laid across the foot would sit on. The labels stay
   in the button for screen readers and are shown as a note and an arrow. */

.nci-float--supper {
  left: auto;
  right: 4px;
  bottom: 18px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
}

.nci-float--supper button {
  width: 32px;
  height: 32px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--spr-hair);
  border-radius: 0;
  background: rgba(252, 248, 239, 0.96);
  font-family: var(--spr-serif);
  font-size: 0;
  letter-spacing: 0;
  color: var(--spr-wine);
  box-shadow: 0 6px 14px -8px rgba(70, 24, 28, 0.45);
}

.nci-float--supper .nci-float-dot {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}

/* The studio's music player brings a pill of its own from studio.css, which loads after this sheet; in
   this bar it is one more square. Its button keeps its aria-label, so the caption can go. */
.nci-float--supper .studio-music button {
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--spr-hair);
  border-radius: 0;
  background: rgba(252, 248, 239, 0.96);
  backdrop-filter: none;
  font: 0 / 1 var(--spr-serif);
  color: var(--spr-wine);
}

.nci-float--supper .studio-music button span {
  display: none;
}

/* Escaped, so the marks survive however the sheet is decoded: a note for the music, an arrow for share. */
.nci-float--supper .nci-float-dot::before,
.nci-float--supper .studio-music button::before {
  content: '\266A';
  font-size: 14px;
  line-height: 1;
}

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

.nci-float--supper .nci-float-music[aria-pressed='true'],
.nci-float--supper .studio-music button[aria-pressed='true'] {
  border-color: var(--spr-wine);
  background: var(--spr-wine);
  color: var(--spr-card);
}

.nci-float--supper .nci-float-share {
  border-color: var(--spr-wine);
  background: var(--spr-wine);
  color: var(--spr-card);
}

.nci-float--supper button:focus-visible {
  outline: 2px solid var(--spr-wine);
  outline-offset: 2px;
}