/* Nicecard demo — "Lago" (湖畔) invitation style. Everything is scoped under .nci--lago,
   .nci-cover--lago and .nci-float--lago so the built-in styles are untouched; new classes use the
   lag- prefix. The page is a size container, so every measurement is in cqw and the layout holds its
   proportions in the 372px phone frame, the editor canvas and a 390px phone.

   The type is a pair: Cormorant Garamond carries the display (italic for Latin) and the prose, Jost
   carries every caps label, coordinate, date and number at wide tracking. Chinese display lines are
   the primary voice and are set in Noto Serif SC upright — never a synthetic italic — through the
   .nci--lang-zh switch the renderer puts on the page. */

.nci--lago,
.nci-cover--lago,
.nci-float--lago {
  --lag-stone: #f2ece1;
  --lag-stone-2: #e7ddcc;
  --lag-ink: #21313b;
  --lag-lake: #1d5878;
  --lag-lake-pale: #d5e2e8;
  --lag-terra: #a5462a;
  /* 4.9:1 on the stone paper. The caps line under each name, the venue lockup and the address are
     all set in it, so it has to be readable type, not a tint. */
  --lag-grey: #5a686e;
  --lag-line: #b7c5cb;
  --lag-g: 8.5cqw;
  --lag-disp: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --lag-serif: 'Noto Serif SC', 'Cormorant Garamond', Georgia, serif;
  --lag-caps: 'Jost', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
}

.nci--lago {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--lag-stone);
  color: var(--lag-ink);
  font-family: var(--lag-disp);
  --nci-bg: #f8f4ec;
  --nci-soft: var(--lag-stone-2);
  --nci-slot-line: rgba(29, 88, 120, 0.45);
  --nci-slot-ink: var(--lag-grey);
  --nci-hint: rgba(29, 88, 120, 0.45);
  --nci-sel: #a5462a;
}

/* flow-root keeps each section's first and last child margins inside it, so a block that opens with a
   heading still gets its air and one that ends in text never runs into the next photograph. */
.nci--lago .nci-section {
  display: flow-root;
  padding: 0 0 13cqw;
}

.nci--lago .nci-s-cover {
  padding-bottom: 0;
}

.nci--lago .nci-s-gallery,
.nci--lago .nci-s-venue {
  padding-bottom: 15cqw;
}

/* White text on a photograph keeps a lighter edit hint. */
.nci--lago .lag-cover-top .nci-f--hint,
.nci--lago .lag-band-line .nci-f--hint {
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

/* ───── Shared marks: caps labels, italic headings, double rules, the cypress ───── */

.nci--lago .lag-caps {
  font-family: var(--lag-caps);
  font-weight: 400;
  font-size: 2.95cqw;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--lag-lake);
}

.nci--lago .lag-caps--terra {
  color: var(--lag-terra);
}

.nci--lago .lag-caps--rule {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  margin: 13cqw var(--lag-g) 0;
}

.nci--lago .lag-caps--rule::after {
  content: '';
  flex: 1 1 auto;
  border-top: 3px double var(--lag-line);
}

.nci--lago .lag-h {
  margin-top: 1.6cqw;
  font-family: var(--lag-disp);
  font-style: italic;
  font-weight: 400;
  font-size: 7.6cqw;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--lag-ink);
}

.nci--lago .lag-head {
  margin: 11cqw var(--lag-g) 0;
}

.nci--lago .lag-head--sub {
  margin-top: 12cqw;
  padding-top: 7cqw;
  border-top: 3px double var(--lag-line);
}

.nci--lago .lag-head--sub .lag-h {
  font-size: 6.4cqw;
}

.nci--lago .lag-drule {
  height: 0;
  border-top: 3px double var(--lag-line);
}

.nci--lago .lag-cypress {
  width: 5.4cqw;
  height: 9.6cqw;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nci--lago .lag-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  margin: 11cqw var(--lag-g) 0;
  color: var(--lag-terra);
}

.nci--lago .lag-orn--tight {
  margin-top: 9cqw;
}

.nci--lago .lag-orn-rule {
  flex: 1 1 auto;
  height: 0;
  border-top: 1px solid var(--lag-line);
}

/* Prose and small notes */

.nci--lago .lag-body {
  margin: 6cqw var(--lag-g) 0;
  font-size: 4.2cqw;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: #3d4d55;
}

.nci--lago .lag-note {
  margin: 6cqw var(--lag-g) 0;
  font-size: 3.5cqw;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--lag-grey);
}

.nci--lago .lag-note--centre {
  text-align: center;
}

/* ───── Cover: the photograph dissolving into the paper ───── */

.nci--lago .lag-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  min-height: 430px;
  overflow: hidden;
  background: var(--lag-stone-2);
}

.nci--lago .lag-cover-img {
  position: absolute;
  inset: 0;
}

/* A light vignette on the photograph's top edge. The two caps lines that used to depend on it now
   carry their own ground (see .lag-cover-top), because the sky in this set runs to about 92% luminance
   and no honest gradient makes white type legible over that without blacking out the sky. */
.nci--lago .lag-cover-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 40, 54, 0.52) 0%, rgba(16, 40, 54, 0.16) 12%, rgba(16, 40, 54, 0) 24%);
}

/* Device: the photograph does not end, it dissolves — the names below sit inside the fade, on paper.
   The stops are set off the couple, not off the box. In this frame the two faces run from 24% to 46%
   and the open skirt from 50% down, so the dissolve holds at zero until 48% — below the chins, at the
   shoulder line — and only gathers weight across the skirt, which is already near the paper's own
   value. The name lockup lands at roughly 68–97%, by which point it is reading on paper. Move the
   first stop back up and the fade eats the faces again, which is the whole fault this frame fixes. */
.nci--lago .lag-cover-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(242, 236, 225, 0) 48%,
    rgba(242, 236, 225, 0.42) 60%,
    rgba(242, 236, 225, 0.88) 70%,
    var(--lag-stone) 80%
  );
}

/* Device: the place (over its coordinates, once the couple adds them) as a printed location tag — the
   lake blue is the ground, so the white caps clear 7.7:1 whatever photograph a couple drops in, instead
   of the 3.6:1 they measured over the open sky. It sits in the top left, the corner the music and share
   marks do not use. */
.nci--lago .lag-cover-top {
  position: absolute;
  top: 6cqw;
  right: auto;
  left: var(--lag-g);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2cqw;
  padding: 2cqw 3cqw 2.4cqw;
  background: var(--lag-lake);
  color: #fff;
  text-shadow: none;
}

.nci--lago .lag-cover-top .lag-caps {
  color: #fff;
}

.nci--lago .lag-cover-name {
  position: absolute;
  right: var(--lag-g);
  bottom: 5cqw;
  left: var(--lag-g);
  text-align: center;
}

.nci--lago .lag-names {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4cqw;
  margin-top: 2.6cqw;
}

.nci--lago .lag-name {
  flex: 0 1 auto;
  min-width: 0;
}

.nci--lago .lag-name-t {
  display: block;
  font-family: var(--lag-disp);
  font-style: italic;
  font-weight: 400;
  font-size: 11.5cqw;
  line-height: 1.12;
  color: var(--lag-ink);
  overflow-wrap: anywhere;
}

/* Device: a caps line sits directly under the name, wide-tracked and half its weight. */
.nci--lago .lag-name-r {
  display: block;
  margin-top: 1.6cqw;
  font-size: 2.6cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--lag-grey);
}

.nci--lago .lag-amp {
  flex: 0 0 auto;
  padding-top: 1.6cqw;
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 6.4cqw;
  line-height: 1;
  color: var(--lag-terra);
}

.nci--lago .lag-cover-name .lag-drule {
  margin: 5cqw 12cqw 0;
}

.nci--lago .lag-cover-date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  margin-top: 3.4cqw;
  color: var(--lag-ink);
}

.nci--lago .lag-cover-date i {
  margin: 0 1.8cqw 0 0.6cqw;
  font-style: normal;
  color: var(--lag-terra);
}

.nci--lago .lag-cover-venue {
  margin-top: 1.6cqw;
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 4.4cqw;
  line-height: 1.5;
  color: var(--lag-grey);
}

.nci--lago .lag-lead {
  margin: 9cqw var(--lag-g) 0;
  font-size: 4cqw;
  line-height: 2.05;
  letter-spacing: 0.03em;
  text-align: center;
  color: #3d4d55;
}

/* The strapline under the opening lines. Named apart from .lag-tag, which is the dietary chip in the
   reply card — one class for two unrelated things put a chip's border around this line. */
.nci--lago .lag-strap {
  margin-top: 5cqw;
  font-size: 2.8cqw;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-align: center;
  color: var(--lag-grey);
}

/* ───── Countdown: the day count as a rubber stamp ───── */

.nci--lago .lag-cdwrap {
  display: flex;
  align-items: center;
  gap: 7cqw;
  margin: 9cqw var(--lag-g) 0;
}

.nci--lago .lag-stamp {
  position: relative;
  flex: 0 0 auto;
  width: 40cqw;
  padding: 3.6cqw 2cqw 3cqw;
  /* The rules are drawn in currentColor, so a tint on the stamp in the editor recolours all of it. */
  border: 3px double currentColor;
  transform: rotate(-2.4deg);
  text-align: center;
  color: var(--lag-terra);
}

.nci--lago .lag-stamp-in {
  position: absolute;
  inset: 1.6cqw;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}

.nci--lago .lag-stamp-top {
  font-size: 2.6cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--lag-terra);
}

.nci--lago .lag-stamp-n {
  margin: 0.4cqw 0;
  font-family: var(--lag-caps);
  font-weight: 500;
  font-size: 19cqw;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

/* Four figures (a date more than a thousand days out) are set smaller so they stay inside the rules. */
.nci--lago .lag-stamp-n--long {
  font-size: 14.5cqw;
  line-height: 1.38;
}

.nci--lago .lag-stamp-u {
  font-size: 2.9cqw;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--lag-terra);
}

.nci--lago .lag-cd-row {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 5cqw;
  border-left: 1px solid var(--lag-line);
  color: var(--lag-grey);
}

.nci--lago .lag-cd-row span {
  display: block;
  padding: 1.7cqw 0;
  font-size: 2.9cqw;
  letter-spacing: 0.2em;
}

.nci--lago .lag-cd-row span + span {
  border-top: 1px solid rgba(183, 197, 203, 0.55);
}

.nci--lago .lag-cd-row b {
  display: inline-block;
  min-width: 7.5cqw;
  font-weight: 500;
  font-size: 4.6cqw;
  letter-spacing: 0.04em;
  color: var(--lag-ink);
}

.nci--lago .lag-cd-done {
  border: 0 !important;
  font-size: 3.4cqw;
  letter-spacing: 0.14em;
  color: var(--lag-terra);
}

/* ───── Story: the pair, then the two-name manifest ───── */

.nci--lago .lag-pair {
  position: relative;
  margin: 8cqw var(--lag-g) 0;
}

.nci--lago .lag-pair-img {
  aspect-ratio: 3 / 4;
}

/* Postcard border, inset over the photograph. Decorative, so it never takes the click off the slot. */
.nci--lago .lag-pair-frame {
  position: absolute;
  inset: 2.6cqw;
  pointer-events: none;
  border: 3px double rgba(255, 255, 255, 0.72);
}

/* The manifest keeps a narrower measure than the column it sits in, symmetrically, so the two names
   stay on the same axis while the right-hand one ends before the band the floating marks occupy. */
.nci--lago .lag-who {
  display: flex;
  align-items: center;
  gap: 3cqw;
  margin: 7cqw calc(var(--lag-g) + 10cqw) 0;
}

.nci--lago .lag-who-side {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.nci--lago .lag-who-n {
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 7.4cqw;
  line-height: 1.2;
  color: var(--lag-ink);
  overflow-wrap: anywhere;
}

.nci--lago .lag-who-r {
  margin-top: 1.2cqw;
  font-size: 2.5cqw;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--lag-grey);
}

.nci--lago .lag-who-f {
  margin-top: 2.4cqw;
  font-size: 3.3cqw;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--lag-lake);
}

.nci--lago .lag-who-mid {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 10cqw;
  color: var(--lag-terra);
  border-left: 1px solid var(--lag-line);
  border-right: 1px solid var(--lag-line);
}

/* Story · the route */

.nci--lago .lag-route {
  margin: 5cqw var(--lag-g) 0;
}

.nci--lago .lag-route-row {
  display: flex;
  gap: 4.4cqw;
  padding: 4.4cqw 0;
  border-bottom: 1px solid rgba(183, 197, 203, 0.7);
}

.nci--lago .lag-route-y {
  flex: 0 0 16cqw;
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 7cqw;
  line-height: 1;
  color: var(--lag-terra);
}

.nci--lago .lag-route-b {
  flex: 1 1 auto;
  min-width: 0;
}

.nci--lago .lag-route-t {
  font-size: 2.9cqw;
  letter-spacing: 0.2em;
  color: var(--lag-lake);
}

.nci--lago .lag-route-d {
  margin-top: 1.4cqw;
  font-size: 3.5cqw;
  line-height: 1.85;
  color: var(--lag-grey);
}

/* ───── Gallery: the horizon band and the tall pair ───── */

.nci--lago .lag-band {
  position: relative;
  overflow: hidden;
  background: var(--lag-stone-2);
}

.nci--lago .lag-band-img {
  aspect-ratio: 16 / 9;
}

.nci--lago .lag-band-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 40, 54, 0.46) 0%, rgba(16, 40, 54, 0.1) 30%, rgba(16, 40, 54, 0) 46%);
}

.nci--lago .lag-band-line {
  position: absolute;
  top: 5.5cqw;
  right: var(--lag-g);
  left: var(--lag-g);
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 5.4cqw;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 10px rgba(16, 40, 54, 0.5);
}

/* Caps over the caption, as on the back of a postcard — the caps line is long enough in both
   languages that a two-column credit would break it across lines. */
.nci--lago .lag-bandfoot {
  margin: 4.4cqw var(--lag-g) 0;
  padding-left: 4cqw;
  border-left: 3px double var(--lag-line);
}

.nci--lago .lag-caption {
  margin-top: 1.4cqw;
  max-width: 68cqw;
  font-size: 3.3cqw;
  line-height: 1.8;
  color: var(--lag-grey);
}

.nci--lago .lag-trio {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 3cqw;
  margin: 9cqw var(--lag-g) 0;
}

.nci--lago .lag-trio-a {
  aspect-ratio: 3 / 4;
}

.nci--lago .lag-trio-b {
  align-self: end;
  aspect-ratio: 3 / 4.6;
}

.nci--lago .lag-quote {
  margin: 8cqw var(--lag-g) 0;
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 6cqw;
  line-height: 1.5;
  text-align: center;
  color: var(--lag-lake);
}

.nci--lago .lag-low {
  margin: 8cqw var(--lag-g) 0;
  aspect-ratio: 4 / 3;
}

/* ───── Venue: the destination card, the day chips and the travel table ───── */

.nci--lago .lag-card {
  margin: 8cqw var(--lag-g) 0;
  padding: 2.6cqw;
  border: 3px double var(--lag-lake);
  background: #f8f4ec;
}

.nci--lago .lag-card-img {
  aspect-ratio: 3 / 2;
}

.nci--lago .lag-card-body {
  padding: 5cqw 2.4cqw 2.4cqw;
  text-align: center;
}

.nci--lago .lag-card-v {
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 6.6cqw;
  line-height: 1.3;
  color: var(--lag-ink);
}

.nci--lago .lag-card-body .lag-drule {
  margin: 3.4cqw 14cqw;
}

.nci--lago .lag-card-c {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
}

.nci--lago .lag-card-c i {
  margin: 0 1.6cqw 0 0.4cqw;
  font-style: normal;
  color: var(--lag-terra);
}

.nci--lago .lag-card-a {
  margin-top: 2.4cqw;
  font-size: 3.3cqw;
  line-height: 1.75;
  color: var(--lag-grey);
}

.nci--lago .lag-mapwrap {
  margin: 5cqw var(--lag-g) 0;
}

.nci--lago .nci-map {
  height: 42cqw;
  overflow: hidden;
  border: 1px solid var(--lag-line);
  background: #ece5d8;
}

/* The lake itself, with the shoreline running across the frame. */
.nci--lago .nci-map::before {
  content: '';
  position: absolute;
  inset: 34% -6% -12% -8%;
  border-radius: 46% 34% 0 0 / 38% 26% 0 0;
  background: #cadde5;
  box-shadow: inset 0 1px 0 rgba(29, 88, 120, 0.35);
}

.nci--lago .nci-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(74deg, rgba(255, 255, 255, 0.75) 0 1.5px, rgba(255, 255, 255, 0) 1.5px 11cqw);
}

.nci--lago .nci-map-road {
  top: 26%;
  height: 1.6cqw;
  background: #fbf7ef;
  box-shadow: 0 0 0 1px rgba(33, 49, 59, 0.07);
}

.nci--lago .nci-map-pin {
  top: 30%;
  left: 46%;
  z-index: 2;
  width: 5.2cqw;
  height: 5.2cqw;
  background: var(--lag-terra);
  box-shadow: 0 3px 9px rgba(33, 49, 59, 0.28);
}

.nci--lago .lag-maps {
  display: flex;
  justify-content: center;
  gap: 3cqw;
  margin-top: 4.4cqw;
}

.nci--lago .lag-linkbtn {
  display: block;
  padding: 2.6cqw 5cqw;
  border: 1px solid var(--lag-lake);
  font-family: var(--lag-caps);
  font-size: 2.8cqw;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--lag-lake);
}

.nci--lago .lag-linkbtn--wide {
  margin: 7cqw var(--lag-g) 0;
  text-align: center;
}

/* Device: a pale pill for each day around the wedding, its date derived from the couple's own. */
.nci--lago .lag-days {
  margin: 7cqw var(--lag-g) 0;
}

.nci--lago .lag-day {
  display: flex;
  align-items: center;
  gap: 4cqw;
}

.nci--lago .lag-day + .lag-day {
  margin-top: 3cqw;
}

.nci--lago .lag-chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  width: 33cqw;
  padding: 2cqw 2.4cqw;
  border-radius: 999px;
  background: var(--lag-lake-pale);
  font-family: var(--lag-caps);
  font-size: 2.75cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lag-lake);
}

.nci--lago .lag-chip i {
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.nci--lago .lag-chip.is-day {
  background: var(--lag-lake);
  color: #f7f3ea;
}

.nci--lago .lag-day-t {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 4.4cqw;
  line-height: 1.4;
  color: var(--lag-ink);
}

.nci--lago .lag-travel {
  margin: 8cqw var(--lag-g) 0;
  border-top: 1px solid var(--lag-line);
}

.nci--lago .lag-travel-row {
  display: flex;
  gap: 4cqw;
  padding: 4cqw 0;
  border-bottom: 1px solid rgba(183, 197, 203, 0.7);
}

.nci--lago .lag-travel-k {
  flex: 0 0 22cqw;
  padding-top: 0.8cqw;
  font-size: 2.8cqw;
  letter-spacing: 0.16em;
  color: var(--lag-terra);
}

.nci--lago .lag-travel-v {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 3.5cqw;
  line-height: 1.85;
  color: #3d4d55;
}

/* ───── Schedule: times as chips on a hairline spine ───── */

.nci--lago .lag-sched {
  position: relative;
  margin: 7cqw var(--lag-g) 0;
}

.nci--lago .lag-sched::before {
  content: '';
  position: absolute;
  top: 3cqw;
  bottom: 3cqw;
  left: 11.5cqw;
  border-left: 1px solid var(--lag-line);
}

.nci--lago .lag-sched-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4.4cqw;
  padding: 2.4cqw 0;
}

.nci--lago .lag-time {
  flex: 0 0 23cqw;
  padding: 1.8cqw 0;
  border: 1px solid var(--lag-terra);
  background: var(--lag-stone);
  font-size: 2.8cqw;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-align: center;
  color: var(--lag-terra);
}

.nci--lago .lag-sched-t {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 4.8cqw;
  line-height: 1.4;
  color: var(--lag-ink);
}

/* ───── Notes for travellers ───── */

.nci--lago .lag-faq {
  margin: 6cqw var(--lag-g) 0;
}

.nci--lago .lag-faq-item {
  display: flex;
  gap: 4cqw;
  padding: 4.4cqw 0;
  border-bottom: 1px solid rgba(183, 197, 203, 0.7);
}

.nci--lago .lag-faq-n {
  flex: 0 0 8cqw;
  padding-top: 1cqw;
  font-size: 3cqw;
  letter-spacing: 0.08em;
  color: var(--lag-terra);
}

.nci--lago .lag-faq-b {
  flex: 1 1 auto;
  min-width: 0;
}

.nci--lago .lag-faq-q {
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 4.6cqw;
  line-height: 1.4;
  color: var(--lag-ink);
}

.nci--lago .lag-faq-a {
  margin-top: 1.6cqw;
  font-size: 3.4cqw;
  line-height: 1.9;
  color: var(--lag-grey);
}

/* ───── Reply card ───── */

.nci--lago .lag-reply-photo {
  margin-top: 14cqw;
  aspect-ratio: 4 / 5;
}

/* The card is tucked over the foot of the photograph above it. .nci-photo is positioned, so without a
   position of its own the card would paint underneath it. */
.nci--lago .lag-rcard {
  position: relative;
  z-index: 1;
  margin: -14cqw var(--lag-g) 0;
  padding: 6cqw 5.5cqw 7cqw;
  border: 3px double var(--lag-lake);
  background: #f8f4ec;
  box-shadow: 0 6px 30px rgba(33, 49, 59, 0.1);
}

.nci--lago .lag-rcard-head {
  display: flex;
  align-items: flex-start;
  gap: 4cqw;
}

.nci--lago .lag-rcard-title {
  flex: 1 1 auto;
  min-width: 0;
}

.nci--lago .lag-rcard-title .lag-h {
  font-size: 6.4cqw;
}

/* The stamp in the corner, as on the back of a postcard. */
.nci--lago .lag-rstamp {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  width: 17cqw;
  height: 20cqw;
  /* currentColor, so a tint on the stamp (one computed block in the editor) takes the rules with it. */
  border: 3px double currentColor;
  color: var(--lag-terra);
  /* The two marks sit in the top right of the screen, and this stamp is the one thing on the page
     that sits in that corner of its own card; it keeps clear of their band. */
  margin-right: 9cqw;
}

.nci--lago .lag-rstamp-i {
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 6cqw;
  line-height: 1;
}

.nci--lago .lag-rstamp-d {
  font-family: var(--lag-caps);
  font-size: 2.4cqw;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.nci--lago .lag-rcard-by {
  margin-top: 4.4cqw;
  padding-top: 3.4cqw;
  border-top: 1px solid var(--lag-line);
  font-size: 2.8cqw;
  letter-spacing: 0.14em;
  color: var(--lag-grey);
}

.nci--lago .lag-form {
  margin-top: 5cqw;
}

.nci--lago .lag-field {
  margin-bottom: 5cqw;
}

.nci--lago .lag-field-l {
  display: block;
  font-size: 2.6cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--lag-grey);
}

.nci--lago .lag-field-i {
  display: block;
  width: 100%;
  padding: 1.6cqw 0 2cqw;
  border: 0;
  border-bottom: 1px solid var(--lag-line);
  background: transparent;
  font-family: var(--lag-disp);
  font-size: 4.4cqw;
  color: var(--lag-ink);
  outline: none;
}

.nci--lago .lag-field-i:focus {
  border-bottom-color: var(--lag-lake);
}

.nci--lago .lag-field--flat .lag-field-l {
  margin-bottom: 2.6cqw;
}

.nci--lago .lag-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3cqw;
  margin-bottom: 5cqw;
}

.nci--lago .lag-choice button {
  padding: 3.2cqw 1.6cqw;
  border: 1px solid var(--lag-line);
  background: transparent;
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 3.8cqw;
  line-height: 1.3;
  color: var(--lag-grey);
}

.nci--lago .lag-choice button[aria-pressed='true'] {
  border-color: var(--lag-lake);
  background: var(--lag-lake-pale);
  color: var(--lag-lake);
}

.nci--lago .lag-seats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  margin-bottom: 5cqw;
  padding-bottom: 2.6cqw;
  border-bottom: 1px solid var(--lag-line);
  /* The stepper is the one control that reaches the right margin, and the two marks sit in that
     corner of the screen; the row keeps clear of their band. */
  padding-right: 12cqw;
}

.nci--lago .lag-step {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
}

.nci--lago .lag-step button {
  width: 7cqw;
  height: 7cqw;
  padding: 0;
  border: 1px solid var(--lag-lake);
  background: transparent;
  color: var(--lag-lake);
  font-family: var(--lag-caps);
  font-size: 3.4cqw;
  line-height: 1;
}

.nci--lago .lag-step button:disabled {
  opacity: 0.35;
}

.nci--lago .lag-step b {
  min-width: 7cqw;
  font-family: var(--lag-caps);
  font-weight: 500;
  font-size: 4.4cqw;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--lag-ink);
}

.nci--lago .lag-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2cqw;
}

.nci--lago .lag-tag {
  padding: 1.8cqw 3.4cqw;
  border: 1px solid var(--lag-line);
  background: transparent;
  font-family: var(--lag-caps);
  font-size: 2.9cqw;
  letter-spacing: 0.08em;
  color: var(--lag-grey);
}

.nci--lago .lag-tag[aria-pressed='true'] {
  border-color: var(--lag-lake);
  background: var(--lag-lake-pale);
  color: var(--lag-lake);
}

.nci--lago .lag-tag:disabled {
  opacity: 0.45;
}

.nci--lago .lag-submit {
  display: block;
  width: 100%;
  margin-top: 6cqw;
  padding: 4.2cqw;
  border: 0;
  background: var(--lag-lake);
  color: #f7f3ea;
  font-family: var(--lag-caps);
  font-size: 3.2cqw;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
}

.nci--lago .lag-err {
  margin-top: 1.6cqw;
  font-family: var(--lag-caps);
  font-size: max(12px, 2.8cqw);
  letter-spacing: 0.06em;
  color: var(--lag-terra);
}

.nci--lago .lag-done {
  margin-top: 5cqw;
  padding: 6cqw 3cqw;
  border-top: 1px solid var(--lag-line);
  text-align: center;
}

.nci--lago .lag-done-t {
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 5.6cqw;
  color: var(--lag-lake);
}

.nci--lago .lag-done-b {
  margin-top: 2.4cqw;
  font-size: 3.4cqw;
  line-height: 1.9;
  color: var(--lag-grey);
}

.nci--lago .lag-req {
  margin-left: 0.6em;
  color: var(--lag-terra);
}

.nci--lago .lag-choice + .lag-err {
  margin: -3.4cqw 0 5cqw;
}

.nci--lago .lag-err--server {
  margin: 0 0 3cqw;
}

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

.nci--lago .lag-done-when {
  margin-top: 1.6cqw;
  font-family: var(--lag-caps);
  font-size: 2.6cqw;
  letter-spacing: 0.04em;
  color: var(--lag-grey);
}

.nci--lago .lag-done-edit {
  margin-top: 4cqw;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--lag-line);
  background: none;
  font-family: var(--lag-caps);
  font-size: 2.8cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lag-grey);
}

.nci--lago .lag-sign {
  margin: 5cqw var(--lag-g) 0;
  font-family: var(--lag-disp);
  font-style: italic;
  font-size: 7cqw;
  text-align: center;
  color: var(--lag-terra);
}

/* ───── Postcards ───── */

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

.nci--lago .lag-wish-in {
  min-width: 0;
  padding: 2.6cqw 0;
  border: 0;
  border-bottom: 1px solid var(--lag-line);
  background: transparent;
  font-family: var(--lag-disp);
  font-size: 3.9cqw;
  color: var(--lag-ink);
  outline: none;
}

.nci--lago .lag-wish-in::placeholder {
  color: #9aa6ab;
}

.nci--lago .lag-wish-in--text {
  grid-column: 1;
}

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

.nci--lago .lag-wish-post {
  align-self: end;
  padding: 2.6cqw 4.6cqw;
  border: 1px solid var(--lag-lake);
  background: transparent;
  font-family: var(--lag-caps);
  font-size: 2.8cqw;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--lag-lake);
}

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

.nci--lago .lag-wish {
  padding: 0 0 0 4.4cqw;
  border-left: 3px double var(--lag-line);
}

.nci--lago .lag-wish + .lag-wish {
  margin-top: 5.4cqw;
}

.nci--lago .lag-wish-t {
  font-size: 3.9cqw;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: #3d4d55;
  overflow-wrap: anywhere;
}

.nci--lago .lag-wish-f {
  margin-top: 1.4cqw;
  font-size: 2.7cqw;
  letter-spacing: 0.2em;
  color: var(--lag-terra);
}

.nci--lago .lag-wish-empty {
  font-size: 3.4cqw;
  color: var(--lag-grey);
}

/* ───── Chinese display lines ─────
   The italic above is a Latin device: Noto Serif SC has no italic, and a synthetic slant on 中文 is a
   smear. A doc the couple wrote in Chinese gets the upright serif and a tracking that suits it, while
   the caps labels, the coordinates and every number stay in the Latin face. */

.nci--lago.nci--lang-zh .lag-h,
.nci--lago.nci--lang-zh .lag-name-t,
.nci--lago.nci--lang-zh .lag-amp,
.nci--lago.nci--lang-zh .lag-cover-venue,
.nci--lago.nci--lang-zh .lag-who-n,
.nci--lago.nci--lang-zh .lag-route-y,
.nci--lago.nci--lang-zh .lag-band-line,
.nci--lago.nci--lang-zh .lag-quote,
.nci--lago.nci--lang-zh .lag-card-v,
.nci--lago.nci--lang-zh .lag-day-t,
.nci--lago.nci--lang-zh .lag-sched-t,
.nci--lago.nci--lang-zh .lag-faq-q,
.nci--lago.nci--lang-zh .lag-choice button,
.nci--lago.nci--lang-zh .lag-done-t,
.nci--lago.nci--lang-zh .lag-sign {
  font-family: var(--lag-serif);
  font-style: normal;
}

.nci--lago.nci--lang-zh .lag-h,
.nci--lago.nci--lang-zh .lag-card-v,
.nci--lago.nci--lang-zh .lag-sign {
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

.nci--lago.nci--lang-zh .lag-h {
  font-size: 6.4cqw;
}

.nci--lago.nci--lang-zh .lag-head--sub .lag-h,
.nci--lago.nci--lang-zh .lag-rcard-title .lag-h {
  font-size: 5.6cqw;
}

.nci--lago.nci--lang-zh .lag-name-t {
  font-size: 10cqw;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.nci--lago.nci--lang-zh .lag-who-n {
  font-size: 6.4cqw;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.nci--lago.nci--lang-zh .lag-quote,
.nci--lago.nci--lang-zh .lag-band-line {
  font-size: 4.8cqw;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

.nci--lago.nci--lang-zh .lag-sched-t,
.nci--lago.nci--lang-zh .lag-day-t,
.nci--lago.nci--lang-zh .lag-faq-q {
  font-size: 4.1cqw;
  letter-spacing: 0.06em;
}

.nci--lago.nci--lang-zh .lag-body,
.nci--lago.nci--lang-zh .lag-lead {
  font-family: var(--lag-serif);
  font-size: 3.7cqw;
  letter-spacing: 0.08em;
}

.nci--lago.nci--lang-zh .lag-note,
.nci--lago.nci--lang-zh .lag-travel-v,
.nci--lago.nci--lang-zh .lag-route-d,
.nci--lago.nci--lang-zh .lag-faq-a,
.nci--lago.nci--lang-zh .lag-card-a,
.nci--lago.nci--lang-zh .lag-caption,
.nci--lago.nci--lang-zh .lag-wish-t {
  font-family: var(--lag-serif);
  font-size: 3.2cqw;
  letter-spacing: 0.04em;
}

.nci--lago.nci--lang-zh .lag-choice button,
.nci--lago.nci--lang-zh .lag-field-i,
.nci--lago.nci--lang-zh .lag-wish-in {
  font-family: var(--lag-serif);
  font-size: 3.6cqw;
}

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

.nci-cover--lago {
  container-type: inline-size;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--lag-stone);
  font-family: var(--lag-disp);
}

/* Taller than the page's own cover frame: the overlay is a full phone screen, and giving the
   photograph 76% of it keeps the couple at the size they are on the page instead of shrinking them
   into the top third. */
.nci-cover--lago .lag-cv-photo {
  position: absolute;
  inset: 0 0 auto;
  height: 76%;
  overflow: hidden;
}

.nci-cover--lago .lag-cv-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Stops at the hairline: the vignette weights the top edge for the location tag and is gone before it
   reaches the tops of their heads. */
.nci-cover--lago .lag-cv-scrim {
  position: absolute;
  inset: 0 0 auto;
  height: 18%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 40, 54, 0.5) 0%, rgba(16, 40, 54, 0.14) 46%, rgba(16, 40, 54, 0) 100%);
}

/* The same dissolve as the page, measured on this taller box: the faces end near 35% of the screen,
   so the fade opens at 44% and is solid paper by the time it reaches the foot of the photograph — a
   stop past that edge would leave a hard cut instead of a dissolve. */
.nci-cover--lago .lag-cv-fade {
  position: absolute;
  inset: 44% 0 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(242, 236, 225, 0) 0%,
    rgba(242, 236, 225, 0.5) 26%,
    rgba(242, 236, 225, 0.9) 40%,
    var(--lag-stone) 50%
  );
}

/* The same printed tag on the guest cover, which is its own root outside the page. */
.nci-cover--lago .lag-cv-top {
  position: absolute;
  top: 7cqw;
  right: auto;
  left: 8.5cqw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2cqw;
  padding: 2cqw 3cqw 2.4cqw;
  background: var(--lag-lake);
  font-family: var(--lag-caps);
  font-size: 2.9cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: none;
}

.nci-cover--lago .lag-cv-body {
  position: absolute;
  right: 8.5cqw;
  bottom: 9cqw;
  left: 8.5cqw;
  text-align: center;
}

.nci-cover--lago .lag-cv-kicker {
  font-family: var(--lag-caps);
  font-size: 2.9cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--lag-terra);
}

.nci-cover--lago .lag-cv-names {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4cqw;
  margin-top: 3cqw;
}

.nci-cover--lago .lag-cv-name {
  flex: 0 1 auto;
  min-width: 0;
}

.nci-cover--lago .lag-cv-n {
  display: block;
  font-style: italic;
  font-size: 12cqw;
  line-height: 1.1;
  color: var(--lag-ink);
  overflow-wrap: anywhere;
}

.nci-cover--lago .lag-cv-r {
  display: block;
  margin-top: 1.6cqw;
  font-family: var(--lag-caps);
  font-size: 2.6cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--lag-grey);
}

.nci-cover--lago .lag-cv-amp {
  flex: 0 0 auto;
  padding-top: 1.6cqw;
  font-style: italic;
  font-size: 6.6cqw;
  line-height: 1;
  color: var(--lag-terra);
}

.nci-cover--lago .lag-cv-rule {
  margin: 5cqw 14cqw 0;
  height: 0;
  border-top: 3px double var(--lag-line);
}

.nci-cover--lago .lag-cv-date {
  margin-top: 3.4cqw;
  font-family: var(--lag-caps);
  font-size: 3cqw;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--lag-ink);
}

/* The ticket: a double rule with its own perforation, rather than a seal. */
.nci-cover--lago .lag-cv-open {
  position: relative;
  margin-top: 7cqw;
  padding: 3.4cqw 9cqw 3.4cqw 12cqw;
  border: 3px double var(--lag-lake);
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--lag-caps);
  font-size: 3cqw;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--lag-lake);
}

.nci-cover--lago .lag-cv-open::before {
  content: '';
  position: absolute;
  top: 2.4cqw;
  bottom: 2.4cqw;
  left: 7cqw;
  border-left: 1px dashed rgba(29, 88, 120, 0.6);
}

.nci-cover--lago .lag-cv-open:focus-visible {
  outline: 2px solid var(--lag-terra);
  outline-offset: 4px;
}

.nci-cover--lago .lag-cv-hint {
  margin-top: 4cqw;
  font-family: var(--lag-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--lag-grey);
}

.nci-cover--lago.lag-cv--zh .lag-cv-n {
  font-family: var(--lag-serif);
  font-style: normal;
  font-size: 10.5cqw;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.nci-cover--lago.lag-cv--zh .lag-cv-amp {
  font-family: var(--lag-serif);
  font-style: normal;
}

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

@keyframes lag-cover-out {
  to {
    opacity: 0;
    transform: translateY(-2%) scale(1.03);
  }
}

/* ═════════════ Floating bar — two squared marks in the corner ═════════════
   The base bar is centred at the foot of the screen, which on a page of centred prose means it comes
   to rest mid-sentence: it was crossing the cover's opening lines and the itinerary. Poster, cream and
   the hall move theirs into a corner for the same reason; this one goes to the top right, opposite the
   cover's location tag, and drops its labels for two marks so the band it covers is 80px, not 200. */

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

.nci-float--lago button {
  width: 36px;
  height: 36px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--lag-lake);
  border-radius: 0;
  background: rgba(248, 244, 236, 0.94);
  font-family: var(--lag-caps);
  font-size: 0;
  letter-spacing: 0;
  color: var(--lag-lake);
  backdrop-filter: blur(4px);
}

.nci-float--lago .nci-float-dot {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  opacity: 1;
  font-size: 14px;
  line-height: 1;
  color: var(--lag-terra);
}

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

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

.nci-float--lago .nci-float-music[aria-pressed='true'] {
  background: var(--lag-lake);
  color: #f7f3ea;
}

.nci-float--lago .nci-float-music[aria-pressed='true'] .nci-float-dot {
  color: #f7f3ea;
  animation: lag-blink 1.8s steps(1, end) infinite;
}

@keyframes lag-blink {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-float--lago .nci-float-music[aria-pressed='true'] .nci-float-dot {
    animation: none;
  }

  .nci-cover--lago.lag-cv--opening {
    animation-duration: 1ms;
  }
}