/* Nicecard demo — "Ciao, Amore" (街角) invitation style. Everything is scoped under .nci--rue,
   .nci-cover--rue and .nci-float--rue so the other styles are untouched; new classes use the rue-
   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.

   Colour rule, measured rather than hoped: the ochre field carries ink type only (8.5:1) — white on
   ochre is 2.2:1 and never appears; the red field carries paper-white type (8.6:1); ochre as type on
   paper is only ever the deep variant, and only at display size. White over a photograph always sits on
   a gradient scrim deep enough to hold it. */

.nci--rue,
.nci-cover--rue,
.nci-float--rue {
  --rue-paper: #f7f2ea;
  --rue-ink: #16130f;
  --rue-grey: #6e665c;
  --rue-rule: rgba(22, 19, 15, 0.16);
  --rue-hair: rgba(22, 19, 15, 0.1);
  --rue-ochre: #e0a520;
  --rue-ochre-mid: #b97f0e;
  --rue-ochre-ink: #8f6208;
  --rue-red: #8a2a1e;
  --rue-red-deep: #6f1f16;
  --rue-g: 7.5cqw;
  /* A grotesque for everything structural, a light serif for everything read, one brush for the two
     places the couple's own voice breaks through. Each chain ends in a CJK face that actually has the
     glyphs, so a 中文 issue never falls through to a system default. */
  --rue-grot: 'Archivo', 'Jost', 'Helvetica Neue', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
  --rue-serif: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --rue-brush: 'Caveat Brush', 'Caveat', 'Dancing Script', cursive;
}

.nci--rue {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--rue-paper);
  color: var(--rue-ink);
  font-family: var(--rue-serif);
  --nci-bg: var(--rue-paper);
  --nci-soft: #e8e0d2;
  --nci-slot-line: rgba(138, 42, 30, 0.45);
  --nci-slot-ink: var(--rue-grey);
  --nci-hint: rgba(138, 42, 30, 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 next photograph. */
.nci--rue .nci-section {
  display: flow-root;
  padding: 0;
}

.nci--rue .nci-s-countdown,
.nci--rue .nci-s-story,
.nci--rue .nci-s-gallery,
.nci--rue .nci-s-schedule,
.nci--rue .nci-s-venue,
.nci--rue .nci-s-faq,
.nci--rue .nci-s-rsvp {
  padding-bottom: 13cqw;
}

/* White text sitting on a photograph keeps a lighter edit hint. */
.nci--rue .rue-cover-body .nci-f--hint,
.nci--rue .rue-closing-brush .nci-f--hint,
.nci--rue .rue-band .nci-f--hint,
.nci--rue .rue-field--red .nci-f--hint {
  border-bottom-color: rgba(247, 242, 234, 0.6);
}

/* ───── Masthead ───── */

.nci--rue .rue-mast {
  padding: 6cqw var(--rue-g) 3.6cqw;
}

/* Right inset clears the two corner marks, so the issue number sits beside them rather than under. */
.nci--rue .rue-mast-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3cqw;
  padding-right: 17cqw;
}

.nci--rue .rue-mast-name {
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 5.6cqw;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nci--rue .rue-mast-issue {
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 3cqw;
  letter-spacing: 0.18em;
  color: var(--rue-ochre-ink);
}

.nci--rue .rue-mast-kicker {
  margin-top: 2.2cqw;
  padding-top: 2.2cqw;
  border-top: 1px solid var(--rue-ink);
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.5cqw;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--rue-grey);
}

/* ───── Cover photograph ───── */

.nci--rue .rue-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 7;
  background: #23201c;
}

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

/* The brush line sits on the upper third and the names on the lower fifth, so the scrim is two
   gradients measured to those bands and transparent through the middle of the picture. */
.nci--rue .rue-cover-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 17, 13, 0.66) 0%, rgba(20, 17, 13, 0.34) 24%, rgba(20, 17, 13, 0) 46%),
    linear-gradient(0deg, rgba(20, 17, 13, 0.74) 0%, rgba(20, 17, 13, 0.36) 18%, rgba(20, 17, 13, 0) 40%);
}

.nci--rue .rue-cover-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  /* The brush line and the bracket under it hang from the top of the frame, and on this photograph the
     two heads begin at about 0.30 of it. The top padding and the bracket's own margin are what hold
     that line clear of them: raise either and the bracketed line lands on their hair. */
  padding: 3cqw var(--rue-g) 6cqw;
  color: #fff;
  pointer-events: none;
}

/* Blank areas of the overlay fall through, so the photo slot underneath stays selectable in the editor.
   Every decorative layer above a photograph is pointer-events: none for the same reason. */
.nci--rue .rue-cover-body .nci-f,
.nci--rue .rue-cover-body button,
.nci--rue .rue-field--red .nci-f,
.nci--rue .rue-band .nci-f,
.nci--rue .rue-closing-brush .nci-f {
  pointer-events: auto;
}

.nci--rue .rue-brush {
  display: block;
  line-height: 0.92;
  text-shadow: 0 2px 14px rgba(20, 17, 13, 0.42);
}

.nci--rue .rue-brush-a,
.nci--rue .rue-brush-b {
  display: block;
  font-family: var(--rue-brush);
  font-weight: 600;
  font-size: 15cqw;
  letter-spacing: 0.005em;
}

.nci--rue .rue-brush-b {
  margin-left: 7cqw;
}

.nci--rue .rue-bracket {
  margin-top: 2.4cqw;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.6cqw;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 8px rgba(20, 17, 13, 0.5);
}

.nci--rue .rue-cover-names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2.4cqw;
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 7.8cqw;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 12px rgba(20, 17, 13, 0.4);
}

.nci--rue .rue-cover-amp {
  font-weight: 400;
  font-size: 5.4cqw;
  color: var(--rue-ochre);
}

.nci--rue .rue-cover-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3cqw;
  margin-top: 2.6cqw;
  padding-top: 2.4cqw;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.nci--rue .rue-cover-date {
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 4.2cqw;
  letter-spacing: 0.06em;
}

.nci--rue .rue-cover-wd {
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.5cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

/* ───── Photo credits ───── */

/* A credit that wraps keeps its square beside the first line rather than centred on the block. */
.nci--rue .rue-credit {
  display: flex;
  align-items: flex-start;
  gap: 1.8cqw;
  margin: 2.6cqw var(--rue-g) 0;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.4cqw;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rue-grey);
}

.nci--rue .rue-credit--r {
  justify-content: flex-end;
  text-align: right;
}

.nci--rue .rue-credit--tight {
  margin: 1.8cqw 0 0;
  font-size: 2.2cqw;
  letter-spacing: 0.12em;
}

.nci--rue .rue-credit-mark {
  flex: 0 0 auto;
  width: 1.4cqw;
  height: 1.4cqw;
  margin-top: 0.62em;
  background: var(--rue-ochre);
}

/* ───── The red band under the cover ───── */

.nci--rue .rue-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  margin-top: 5cqw;
  padding: 4.6cqw 6cqw;
  background: var(--rue-red);
  color: var(--rue-paper);
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.7cqw;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.nci--rue .rue-band-dot {
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: rgba(247, 242, 234, 0.6);
}

/* ───── Section heads ───── */

.nci--rue .rue-head {
  display: flex;
  align-items: flex-start;
  gap: 3.4cqw;
  margin: 11cqw var(--rue-g) 0;
  padding-bottom: 2.6cqw;
  border-bottom: 1px solid var(--rue-ink);
}

.nci--rue .rue-head-no {
  flex: 0 0 auto;
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 11cqw;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--rue-ochre-mid);
}

.nci--rue .rue-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.nci--rue .rue-head-title {
  margin: 0;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 6.4cqw;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.nci--rue .rue-head-caps {
  display: block;
  margin-top: 1.4cqw;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.4cqw;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--rue-grey);
}

/* On the ochre field the head keeps the same structure and swaps only what the ground demands. */
.nci--rue .rue-head--ochre {
  margin: 0;
  border-bottom-color: rgba(22, 19, 15, 0.45);
}

.nci--rue .rue-head--ochre .rue-head-no {
  color: rgba(22, 19, 15, 0.42);
}

.nci--rue .rue-head--ochre .rue-head-caps {
  color: rgba(22, 19, 15, 0.68);
}

/* ───── Full-bleed colour fields ───── */

.nci--rue .rue-field {
  position: relative;
  margin-top: 11cqw;
  overflow: hidden;
}

.nci--rue .rue-field--ochre {
  background: var(--rue-ochre);
  color: var(--rue-ink);
}

.nci--rue .rue-field--red {
  background: var(--rue-red);
  color: var(--rue-paper);
}

.nci--rue .rue-field-body {
  position: relative;
  z-index: 2;
  padding: 9cqw var(--rue-g) 10cqw;
}

/* The visible grid: four hairline columns behind the type of the statement page. */
.nci--rue .rue-colgrid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(22, 19, 15, 0.14) 0 1px, transparent 1px 25%);
}

/* ───── Countdown, on the ochre field ───── */

.nci--rue .rue-cd-lead {
  margin-top: 7cqw;
  font-family: var(--rue-serif);
  font-size: 3.8cqw;
  line-height: 1.7;
  letter-spacing: 0.12em;
  color: rgba(22, 19, 15, 0.72);
}

.nci--rue .rue-cd-big {
  display: flex;
  align-items: baseline;
  gap: 2.6cqw;
  margin-top: 1cqw;
}

.nci--rue .rue-cd-big b {
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 32cqw;
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.nci--rue .rue-cd-unit {
  font-family: var(--rue-grot);
  font-style: normal;
  font-weight: 500;
  font-size: 4.4cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nci--rue .rue-cd-units {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8cqw;
  margin-top: 4cqw;
}

.nci--rue .rue-cd-done {
  margin-top: 4cqw;
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 9cqw;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.nci--rue .rue-cd-date {
  margin-top: 7cqw;
  padding-top: 5cqw;
  border-top: 1px solid rgba(22, 19, 15, 0.35);
}

.nci--rue .rue-cd-sub {
  margin-top: 2.6cqw;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.6cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(22, 19, 15, 0.7);
}

.nci--rue .rue-cd-sub i {
  font-style: normal;
  margin: 0 0.6cqw;
  color: rgba(22, 19, 15, 0.45);
}

.nci--rue .rue-cd-note {
  margin: 5cqw 0 0;
  font-family: var(--rue-serif);
  font-size: 3.7cqw;
  line-height: 2.1;
  letter-spacing: 0.1em;
  color: rgba(22, 19, 15, 0.8);
}

/* ───── Chips ───── */

.nci--rue .rue-chip {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.5cqw 3.2cqw;
  border-radius: 999px;
  background: rgba(247, 242, 234, 0.72);
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.6cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rue-ink);
  white-space: nowrap;
}

.nci--rue .rue-chip--wide {
  padding: 2cqw 4.4cqw;
  font-size: 3.2cqw;
  letter-spacing: 0.1em;
}

.nci--rue .rue-chip-dot {
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: var(--rue-ochre-mid);
}

.nci--rue .rue-chip--ochre .rue-chip-dot {
  background: var(--rue-red);
}

/* ───── Wide photographs and strips ───── */

.nci--rue .rue-wide {
  margin: 5cqw var(--rue-g) 0;
  aspect-ratio: 4 / 3;
}

.nci--rue .rue-wide--tall {
  aspect-ratio: 5 / 4;
  margin-top: 7cqw;
}

.nci--rue .rue-strip {
  margin-top: 9cqw;
  aspect-ratio: 16 / 9;
}

/* ───── Story: the interview ───── */

.nci--rue .rue-qa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 7cqw var(--rue-g) 0;
  border-top: 1px solid var(--rue-rule);
  border-bottom: 1px solid var(--rue-rule);
}

.nci--rue .rue-qa-col {
  padding: 5cqw 3.4cqw 5.5cqw 0;
  min-width: 0;
}

.nci--rue .rue-qa-col--b {
  padding-right: 0;
  padding-left: 3.4cqw;
  border-left: 1px solid var(--rue-rule);
}

.nci--rue .rue-qa-q {
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.4cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--rue-ochre-ink);
}

.nci--rue .rue-qa-name {
  margin-top: 1.6cqw;
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 5cqw;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.nci--rue .rue-qa-a {
  margin: 2.6cqw 0 0;
  font-family: var(--rue-serif);
  font-size: 3.4cqw;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--rue-ink);
}

.nci--rue .rue-tail {
  margin: 5cqw var(--rue-g) 0;
  font-family: var(--rue-serif);
  font-style: italic;
  font-size: 4.2cqw;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--rue-grey);
}

/* ───── Gallery grid ───── */

.nci--rue .rue-grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 3.4cqw;
  margin: 6cqw var(--rue-g) 0;
}

.nci--rue .rue-grid-cell {
  min-width: 0;
}

.nci--rue .rue-grid-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 3.4cqw;
  min-width: 0;
}

.nci--rue .rue-grid-img {
  aspect-ratio: 3 / 4;
}

.nci--rue .rue-grid-cell--tall .rue-grid-img {
  aspect-ratio: 2 / 3;
}

.nci--rue .rue-grid-img--sq {
  aspect-ratio: 1 / 1;
}

/* ───── The cut-out sticker over the red field ───── */

.nci--rue .rue-field-title {
  margin: 6cqw 0 0;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 7cqw;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.nci--rue .rue-field-line {
  margin: 3cqw 0 0;
  font-family: var(--rue-serif);
  font-size: 3.7cqw;
  line-height: 1.95;
  letter-spacing: 0.08em;
  color: rgba(247, 242, 234, 0.82);
}

.nci--rue .rue-stick {
  position: relative;
  margin-top: 7cqw;
  padding-bottom: 12cqw;
}

.nci--rue .rue-stick-base {
  width: 72%;
  margin-left: auto;
  aspect-ratio: 3 / 4;
  transform: rotate(1.6deg);
  outline: 1.4cqw solid var(--rue-paper);
  outline-offset: -1.4cqw;
}

/* Not a real cut-out: a second frame of the couple in a circular clip with a thick paper ring, stuck
   over the corner of the photograph beneath it. It is a photo slot like any other, so it stays
   selectable and swappable in the editor. */
.nci--rue .rue-stick-cut {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1.6cqw solid var(--rue-paper);
  transform: rotate(-6deg);
  box-shadow: 0 2cqw 5cqw rgba(20, 10, 8, 0.28);
}

/* ───── Itinerary ───── */

.nci--rue .rue-itin {
  margin: 7cqw var(--rue-g) 0;
}

.nci--rue .rue-itin-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4cqw;
  padding: 0 0 6.5cqw;
}

/* One hairline runs the length of the itinerary; the last row stops it at its own tick. */
.nci--rue .rue-itin-row::before {
  content: '';
  position: absolute;
  left: 3.4cqw;
  top: 3.4cqw;
  bottom: 0;
  width: 1px;
  background: var(--rue-rule);
}

.nci--rue .rue-itin-row:last-child {
  padding-bottom: 0;
}

.nci--rue .rue-itin-row:last-child::before {
  display: none;
}

.nci--rue .rue-itin-mark {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 7cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nci--rue .rue-itin-tick {
  width: 2.2cqw;
  height: 2.2cqw;
  margin-top: 2.3cqw;
  border-radius: 50%;
  background: var(--rue-ochre);
  box-shadow: 0 0 0 1.6cqw var(--rue-paper);
}

/* The drawing hangs in the row's open right-hand side like a spot illustration in a magazine column,
   every one centred on the same axis, in the red of the door. Each is its own share (--rue-k, set in
   rue.js) of the column, and the tallest stays inside the height of a time and a one-line label, so
   the rows keep the rhythm the rule and the ticks set. The column tucks into the gaps either side of
   it: the drawings are mostly narrower than it, and the label keeps the width it had beside the old
   glyphs, so "Welcome drinks on the lawn" still sets on one line. It comes last in the markup, so the
   nodes before it keep the places the editor knows them by; the number is ordered out after it. */
.nci--rue .rue-itin-art {
  flex: 0 0 16cqw;
  align-self: center;
  display: flex;
  justify-content: center;
  margin: 0 -2cqw 0 -1.5cqw;
  pointer-events: none;
}

.nci--rue .rue-itin-ico {
  --nci-ink-c: var(--rue-red);
  width: calc(var(--rue-k, 0.8) * 16cqw);
}

/* The kit's pen is drawn for pieces many times this size; printed this small its hairlines thin to a
   pale tint. On a high-density screen the drawing is laid three times over itself — the same mask in
   the same place — which deepens every line back to the full red without widening or moving any of
   it, and keeps the colour the drawing's own (--nci-ink-c), so a tint set in the editor still recolours
   the whole line. A 1x screen keeps the single mask: it has too few pixels to hold these lines, and
   stacking them there only turns the foliage of the arch into grain. */
@media (max-resolution: 1.49dppx) {
  /* On a 1x screen the stacked mask breaks into grain, so the column is given a hairline of the door
     red around every stroke instead, after the mask (on the wrapper), which reads as the full red. */
  .nci--rue .rue-itin-art {
    filter: drop-shadow(0 0 0.45px var(--rue-red));
  }
}

@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .nci--rue .rue-itin-ico {
    -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;
  }
}

.nci--rue .rue-itin-body {
  flex: 1 1 auto;
  min-width: 0;
}

.nci--rue .rue-itin-at {
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 8.4cqw;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.nci--rue .rue-itin-t {
  margin-top: 1.8cqw;
  font-family: var(--rue-serif);
  font-size: 3.7cqw;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--rue-grey);
}

.nci--rue .rue-itin-no {
  order: 1;
  flex: 0 0 auto;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.4cqw;
  letter-spacing: 0.14em;
  color: var(--rue-ochre-ink);
}

.nci--rue .rue-note {
  margin: 6cqw var(--rue-g) 0;
  font-family: var(--rue-serif);
  font-size: 3.5cqw;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--rue-grey);
}

.nci--rue .rue-note--big {
  margin-top: 5cqw;
  font-size: 4cqw;
  line-height: 2;
  color: var(--rue-ink);
}

.nci--rue .rue-link {
  display: inline-block;
  margin: 4cqw var(--rue-g) 0;
  padding-bottom: 0.8cqw;
  border-bottom: 1px solid var(--rue-ochre-mid);
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.7cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rue-ink);
}

.nci--rue .rue-link i {
  font-style: normal;
  color: var(--rue-ochre-ink);
}

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

.nci--rue .rue-mapwrap {
  margin: 6cqw var(--rue-g) 0;
  padding: 1.6cqw;
  border: 1px solid var(--rue-ink);
}

/* The shared MapPreview is three empty boxes — position: relative on the map and absolute on the road
   and the pin — so a style owns the whole drawing. This one is a city block plan: a hairline grid of
   streets on warm paper, one wide avenue across it and the red door pin where they meet. */
.nci--rue .rue-mapwrap .nci-map {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: none;
  border-radius: 0;
  background-color: #ece4d4;
  background-image:
    repeating-linear-gradient(90deg, rgba(22, 19, 15, 0.09) 0 1px, transparent 1px 11cqw),
    repeating-linear-gradient(0deg, rgba(22, 19, 15, 0.09) 0 1px, transparent 1px 11cqw);
}

.nci--rue .rue-mapwrap .nci-map-road {
  top: 56%;
  height: 4.4cqw;
  background: rgba(22, 19, 15, 0.13);
  box-shadow: 0 0 0 1px rgba(22, 19, 15, 0.08) inset;
}

.nci--rue .rue-mapwrap .nci-map-pin {
  left: 50%;
  top: 56%;
  width: 4.4cqw;
  height: 4.4cqw;
  margin: -5.6cqw 0 0 -2.2cqw;
  background: var(--rue-red);
  box-shadow: 0 0 0 1.4cqw rgba(138, 42, 30, 0.16);
}

.nci--rue .rue-info {
  margin: 6cqw var(--rue-g) 0;
  border-top: 1px solid var(--rue-ink);
}

.nci--rue .rue-info-row {
  display: grid;
  grid-template-columns: 22cqw 1fr;
  gap: 3cqw;
  padding: 3.6cqw 0;
  border-bottom: 1px solid var(--rue-rule);
}

.nci--rue .rue-info-k {
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.4cqw;
  line-height: 1.9;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rue-ochre-ink);
}

.nci--rue .rue-info-v {
  font-family: var(--rue-serif);
  font-size: 3.6cqw;
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.nci--rue .rue-info-v i {
  font-style: normal;
  margin: 0 0.6cqw;
  color: var(--rue-grey);
}

.nci--rue .rue-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 5cqw;
}

/* ───── Small print ───── */

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

.nci--rue .rue-faq-item {
  display: flex;
  gap: 3.4cqw;
  padding: 4cqw 0;
  border-bottom: 1px solid var(--rue-rule);
}

.nci--rue .rue-faq-item:first-child {
  border-top: 1px solid var(--rue-rule);
}

.nci--rue .rue-faq-no {
  flex: 0 0 auto;
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 4cqw;
  line-height: 1.4;
  color: var(--rue-ochre-mid);
}

.nci--rue .rue-faq-body {
  min-width: 0;
}

.nci--rue .rue-faq-q {
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 3.6cqw;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.nci--rue .rue-faq-a {
  margin-top: 1.4cqw;
  font-family: var(--rue-serif);
  font-size: 3.5cqw;
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: var(--rue-grey);
}

/* ───── The entry pass ───── */

.nci--rue .rue-ticket {
  position: relative;
  margin: 7cqw var(--rue-g) 0;
  border: 1.5px solid var(--rue-ink);
  border-radius: 2.4cqw;
  background: #fffdf8;
}

.nci--rue .rue-ticket-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2.4cqw;
  padding: 3.4cqw 5cqw;
  border-radius: 1.6cqw 1.6cqw 0 0;
  background: var(--rue-ochre);
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.7cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rue-ink);
}

.nci--rue .rue-ticket-no {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.nci--rue .rue-form {
  padding: 5.5cqw 5cqw 6cqw;
}

.nci--rue .rue-in {
  margin-bottom: 4cqw;
}

.nci--rue .rue-in--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
}

.nci--rue .rue-in-label {
  display: block;
  margin-bottom: 1.6cqw;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.5cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rue-grey);
}

.nci--rue .rue-in--row .rue-in-label {
  margin-bottom: 0;
}

.nci--rue .rue-in-field {
  width: 100%;
  padding: 2.4cqw 0;
  border: none;
  border-bottom: 1px solid var(--rue-ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--rue-serif);
  font-size: 4cqw;
  color: var(--rue-ink);
}

.nci--rue .rue-in-field:focus-visible {
  outline: none;
  border-bottom-color: var(--rue-red);
  box-shadow: 0 1px 0 0 var(--rue-red);
}

.nci--rue .rue-in-field:disabled {
  color: var(--rue-grey);
  -webkit-text-fill-color: var(--rue-grey);
}

.nci--rue .rue-err {
  margin-top: 1.4cqw;
  font-family: var(--rue-grot);
  font-size: max(12px, 2.6cqw);
  letter-spacing: 0.06em;
  color: var(--rue-red);
}

.nci--rue .rue-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4cqw;
  margin-bottom: 4cqw;
}

.nci--rue .rue-choice button {
  padding: 3.2cqw 1.6cqw;
  border: 1px solid var(--rue-ink);
  border-radius: 999px;
  background: transparent;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.9cqw;
  letter-spacing: 0.1em;
  color: var(--rue-ink);
  cursor: pointer;
}

.nci--rue .rue-choice button[aria-pressed='true'] {
  background: var(--rue-ink);
  color: var(--rue-paper);
}

.nci--rue .rue-step {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.2cqw 1.6cqw;
  border: 1px solid var(--rue-rule);
  border-radius: 999px;
}

.nci--rue .rue-step button {
  width: 7cqw;
  height: 7cqw;
  border: none;
  border-radius: 50%;
  background: var(--rue-paper);
  font-family: var(--rue-grot);
  font-size: 3.6cqw;
  line-height: 1;
  color: var(--rue-ink);
  cursor: pointer;
}

.nci--rue .rue-step button:disabled {
  color: rgba(22, 19, 15, 0.3);
  cursor: default;
}

.nci--rue .rue-step > span {
  min-width: 5cqw;
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 4cqw;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.nci--rue .rue-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8cqw;
}

.nci--rue .rue-tag {
  padding: 1.8cqw 3cqw;
  border: 1px solid var(--rue-rule);
  border-radius: 999px;
  background: transparent;
  font-family: var(--rue-grot);
  font-size: 2.7cqw;
  letter-spacing: 0.06em;
  color: var(--rue-grey);
  cursor: pointer;
}

.nci--rue .rue-tag[aria-pressed='true'] {
  border-color: var(--rue-red);
  background: var(--rue-red);
  color: var(--rue-paper);
}

.nci--rue .rue-submit {
  width: 100%;
  margin-top: 5cqw;
  padding: 4.4cqw;
  border: none;
  border-radius: 1.2cqw;
  background: var(--rue-red);
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 3.4cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--rue-paper);
  cursor: pointer;
}

.nci--rue .rue-submit:hover {
  background: var(--rue-red-deep);
}

.nci--rue .rue-submit:disabled {
  cursor: default;
  opacity: 0.55;
}

.nci--rue .rue-done {
  padding: 8cqw 5cqw;
  text-align: center;
}

.nci--rue .rue-done-t {
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 6cqw;
  letter-spacing: 0.01em;
}

.nci--rue .rue-done-b {
  margin: 3cqw 0 0;
  font-family: var(--rue-serif);
  font-size: 3.7cqw;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--rue-grey);
}

.nci--rue .rue-req {
  margin-left: 0.5em;
  color: var(--rue-red);
}

.nci--rue .rue-choice + .rue-err {
  margin: -2.6cqw 0 4cqw;
}

.nci--rue .rue-err--server {
  margin-top: 4cqw;
}

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

.nci--rue .rue-done-when {
  margin: 1.6cqw 0 0;
  font-family: var(--rue-grot);
  font-size: 2.6cqw;
  letter-spacing: 0.04em;
  color: var(--rue-grey);
}

.nci--rue .rue-done-edit {
  margin-top: 4cqw;
  padding: 0 0 0.8cqw;
  border: none;
  border-bottom: 1px solid var(--rue-ochre-mid);
  background: transparent;
  font-family: var(--rue-grot);
  font-size: 2.7cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rue-ink);
  cursor: pointer;
}

/* The perforation: one dashed line with a notch bitten out of each edge. */
.nci--rue .rue-perf {
  position: relative;
  height: 0;
  border-top: 1px dashed rgba(22, 19, 15, 0.45);
  pointer-events: none;
}

.nci--rue .rue-notch {
  position: absolute;
  top: -3.1cqw;
  width: 6cqw;
  height: 6cqw;
  border: 1.5px solid var(--rue-ink);
  border-radius: 50%;
  background: var(--rue-paper);
}

.nci--rue .rue-notch--l {
  left: -3.6cqw;
}

.nci--rue .rue-notch--r {
  right: -3.6cqw;
}

.nci--rue .rue-stub {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3cqw 4cqw;
  padding: 5cqw 5cqw 4.6cqw;
}

.nci--rue .rue-stub-k {
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.3cqw;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rue-grey);
}

.nci--rue .rue-stub-v {
  margin-top: 1.2cqw;
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 4.6cqw;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.nci--rue .rue-stub-where {
  margin-top: 1.4cqw;
  font-family: var(--rue-grot);
  font-size: 2.4cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rue-ochre-ink);
}

.nci--rue .rue-stub-side {
  text-align: right;
}

.nci--rue .rue-stub-n {
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 9cqw;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rue-red);
}

/* A printed barcode, drawn as bars rather than borrowed as an image. */
.nci--rue .rue-bars {
  grid-column: 1 / -1;
  height: 7cqw;
  margin-top: 1cqw;
  background-image:
    repeating-linear-gradient(90deg, var(--rue-ink) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--rue-ink) 0 2px, transparent 2px 7px);
  opacity: 0.85;
}

.nci--rue .rue-stub-note {
  grid-column: 1 / -1;
  font-family: var(--rue-grot);
  font-size: 2.3cqw;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--rue-grey);
}

.nci--rue .rue-close-line {
  margin: 6cqw var(--rue-g) 0;
  font-family: var(--rue-serif);
  font-style: italic;
  font-size: 4.2cqw;
  line-height: 1.8;
  text-align: center;
  color: var(--rue-grey);
}

/* ───── Wishes ───── */

/* The wall is written on the same stationery as the pass: ruled lines rather than soft boxes, and a
   squared red button rather than a pill — the only true pills in this issue are the countdown units. */
.nci--rue .rue-wishform {
  display: grid;
  gap: 3.4cqw;
  margin: 6cqw var(--rue-g) 0;
}

.nci--rue .rue-wish-in {
  width: 100%;
  padding: 2.4cqw 0;
  border: none;
  border-bottom: 1px solid var(--rue-ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--rue-serif);
  font-size: 3.8cqw;
  color: var(--rue-ink);
}

.nci--rue .rue-wish-in::placeholder {
  color: var(--rue-grey);
}

.nci--rue .rue-wish-in:focus-visible {
  outline: none;
  border-bottom-color: var(--rue-red);
  box-shadow: 0 1px 0 0 var(--rue-red);
}

.nci--rue .rue-wish-err {
  margin-top: 0;
}

.nci--rue .rue-wish-post {
  justify-self: start;
  padding: 2.8cqw 8cqw;
  border: none;
  border-radius: 0;
  background: var(--rue-red);
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 2.8cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--rue-paper);
  cursor: pointer;
}

.nci--rue .rue-wish-post:hover {
  background: var(--rue-red-deep);
}

.nci--rue .rue-wish-post:disabled {
  cursor: default;
  opacity: 0.5;
}

.nci--rue .rue-wishes {
  margin: 5cqw var(--rue-g) 0;
}

.nci--rue .rue-wish {
  padding: 4cqw 4cqw 4.4cqw;
  margin-bottom: 3cqw;
  border-top: 2px solid var(--rue-ochre);
  background: #fffdf8;
  box-shadow: 0 1cqw 3cqw rgba(22, 19, 15, 0.05);
}

.nci--rue .rue-wish-text {
  margin: 0;
  font-family: var(--rue-serif);
  font-size: 3.8cqw;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.nci--rue .rue-wish-from {
  margin-top: 2cqw;
  font-family: var(--rue-grot);
  font-size: 2.5cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rue-grey);
}

.nci--rue .rue-wish-empty {
  padding: 5cqw 0;
  font-family: var(--rue-serif);
  font-size: 3.6cqw;
  color: var(--rue-grey);
}

/* ───── Closing photograph ───── */

.nci--rue .rue-closing {
  position: relative;
  margin-top: 10cqw;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #23201c;
}

.nci--rue .rue-closing-img {
  position: absolute;
  inset: 0;
}

.nci--rue .rue-closing-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(20, 17, 13, 0.72) 0%, rgba(20, 17, 13, 0.28) 24%, rgba(20, 17, 13, 0) 52%);
}

.nci--rue .rue-closing-brush {
  position: absolute;
  left: var(--rue-g);
  bottom: 6cqw;
  z-index: 2;
  font-family: var(--rue-brush);
  font-weight: 600;
  font-size: 13cqw;
  line-height: 1;
  color: #fff;
  transform: rotate(-3deg);
  transform-origin: left bottom;
  text-shadow: 0 2px 14px rgba(20, 17, 13, 0.45);
}

/* ───── Guest cover overlay ───── */

.nci-cover--rue {
  padding: 0;
  display: block;
  background: #23201c;
  overflow: hidden;
  container-type: inline-size;
}

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

.nci-cover--rue .rue-cv-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 17, 13, 0.72) 0%, rgba(20, 17, 13, 0.34) 26%, rgba(20, 17, 13, 0) 48%),
    linear-gradient(0deg, rgba(20, 17, 13, 0.82) 0%, rgba(20, 17, 13, 0.46) 26%, rgba(20, 17, 13, 0) 56%);
}

.nci-cover--rue .rue-cv-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 8cqw 7.5cqw 9cqw;
  color: #fff;
  text-align: left;
}

.nci-cover--rue .rue-cv-mast {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3cqw;
  padding-bottom: 2.4cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 3.4cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The brush line hangs from the masthead instead of floating in the middle of the box. Left centred,
   space-between parked it across the middle of the screen — which on this frame is exactly where the
   two faces are, and the bracketed line under it printed straight over the bride. margin-bottom: auto
   pulls the block up under the rule, into the door and the ochre wall above their heads, which is the
   empty band this photograph actually has. It reads the same way the page's cover does. */
.nci-cover--rue .rue-cv-middle {
  margin-top: 2cqw;
  margin-bottom: auto;
}

.nci-cover--rue .rue-brush {
  line-height: 0.92;
  text-shadow: 0 2px 14px rgba(20, 17, 13, 0.45);
}

.nci-cover--rue .rue-brush-a,
.nci-cover--rue .rue-brush-b {
  display: block;
  font-family: var(--rue-brush);
  font-weight: 600;
  font-size: 17cqw;
}

.nci-cover--rue .rue-brush-b {
  margin-left: 8cqw;
}

.nci-cover--rue .rue-cv-bracket {
  margin-top: 2cqw;
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 2.8cqw;
  line-height: 1.6;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 8px rgba(20, 17, 13, 0.5);
}

.nci-cover--rue .rue-cv-names {
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 8.6cqw;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 12px rgba(20, 17, 13, 0.4);
}

.nci-cover--rue .rue-cv-names i {
  font-style: normal;
  margin: 0 2cqw;
  font-weight: 400;
  color: var(--rue-ochre);
}

.nci-cover--rue .rue-cv-date {
  margin-top: 2cqw;
  padding-top: 2.4cqw;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 3.6cqw;
  letter-spacing: 0.14em;
}

.nci-cover--rue .rue-cv-open {
  margin-top: 6cqw;
  padding: 4cqw 9cqw;
  border: none;
  border-radius: 999px;
  background: var(--rue-ochre);
  font-family: var(--rue-grot);
  font-weight: 600;
  font-size: 3.2cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--rue-ink);
  cursor: pointer;
}

.nci-cover--rue .rue-cv-open:hover {
  background: #eeb738;
}

.nci-cover--rue .rue-cv-open:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.nci-cover--rue .rue-cv-hint {
  margin-top: 3cqw;
  font-family: var(--rue-grot);
  font-size: 2.5cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.nci-cover--rue.rue-cv--opening {
  pointer-events: none;
  animation: rue-cv-out 500ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes rue-cv-out {
  to {
    opacity: 0;
    transform: translateY(-4%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--rue.rue-cv--opening {
    animation-duration: 1ms;
  }
}

/* ───── Floating bar — two squared marks in the corner ─────
   The base bar is centred at the foot of the screen, which on this page put it on the venue line of the
   very first screen, on the section headings and on the pass's own submit button. Poster, cream and the
   hall move theirs into a corner for the same reason; these are squared like everything else here, and
   they drop their labels so the band they cover is 80px wide rather than 200. */

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

.nci-float--rue button {
  width: 36px;
  height: 36px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--rue-ink);
  border-radius: 0;
  background: rgba(255, 253, 248, 0.94);
  font-family: var(--rue-grot);
  font-weight: 500;
  font-size: 0;
  letter-spacing: 0;
  color: var(--rue-ink);
  box-shadow: 0 4px 14px rgba(22, 19, 15, 0.16);
}

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

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

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

.nci-float--rue .nci-float-music[aria-pressed='true'] {
  border-color: var(--rue-red);
  background: var(--rue-red);
}

.nci-float--rue .nci-float-music[aria-pressed='true'] .nci-float-dot {
  color: var(--rue-paper);
}