/* Nicecard demo — "Ink & Linen" (亚麻信笺) invitation style. Everything is scoped under .nci--linen,
   .nci-cover--linen and .nci-float--linen so the other styles are untouched; new classes use the lnn-
   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.
   Paper is the material: the ground is a warm linen with a woven tooth drawn in CSS rather than
   loaded as an image — four repeating gradients crossing at 1px, plus a handful of slubs where the
   thread thickens. The ink is a deep teal, one dusk rose carries every accent, and a brass hairline
   rules everything else. Two roses and two brasses are kept apart on purpose: --lnn-rose and
   --lnn-brass are the ornament colours (the sun, the rules, the ticks), --lnn-rose-ink and
   --lnn-brass-ink the darker ones small text is allowed to use, because neither ornament colour
   clears 4.5:1 on linen. Every colour that carries a word does clear it: --lnn-ink 10.8:1, --lnn-ink-2
   6.2:1, --lnn-rose-ink 5.1:1, --lnn-brass-ink 5.0:1 and --lnn-mute 4.7:1, all on --lnn-linen. The
   smallest type on the page is 2.6cqw (10px at 390) wherever it carries information; only the two
   ornaments — the vertical edge label and the closing mark — are set below that.
   Type is small everywhere and the margins are wide: this page is closer to a letter than a poster,
   and the silences between the blocks are part of it. */

.nci--linen,
.nci-cover--linen,
.nci-float--linen {
  --lnn-linen: #f2ece0;
  --lnn-linen-2: #e9e1d1;
  --lnn-linen-3: #ddd3bf;
  --lnn-ink: #16383a;
  --lnn-ink-2: #3d5c5c;
  /* The quiet grey carries real text — the meter labels, the tide table's third column, every caption
     and the empty state — so it is set past 4.5:1 on the linen rather than tuned by eye. */
  --lnn-mute: #586c69;
  --lnn-rose: #b5695f;
  --lnn-rose-ink: #9a4c43;
  --lnn-brass: #a8813f;
  --lnn-brass-ink: #7d5f27;
  --lnn-hair: rgba(22, 56, 58, 0.22);
  --lnn-hair-2: rgba(22, 56, 58, 0.11);
  --lnn-dark: #12292b;
  --lnn-g: 11cqw;
  --lnn-disp: 'Spectral', 'Noto Serif SC', Georgia, serif;
  --lnn-sans: 'Jost', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
}

.nci--linen {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--lnn-linen);
  color: var(--lnn-ink);
  font-family: var(--lnn-disp);
  --nci-bg: var(--lnn-linen);
  --nci-soft: var(--lnn-linen-2);
  --nci-slot-line: rgba(125, 95, 39, 0.45);
  --nci-slot-ink: var(--lnn-ink-2);
  --nci-hint: rgba(125, 95, 39, 0.5);
  --nci-sel: #9a4c43;
}

/* The tooth of the linen: warp and weft, each one thread wide, plus four slubs where the thread
   thickens. The two threads are set to different periods — five against six — so they drift in and
   out of step instead of ruling a square grid, and both are kept faint enough to read as a texture in
   the paper rather than as lines drawn on it. Sections paint over it. */
.nci--linen::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(18cqw 3cqw at 22% 17%, rgba(150, 122, 76, 0.05) 0%, transparent 72%),
    radial-gradient(14cqw 2.4cqw at 74% 43%, rgba(150, 122, 76, 0.045) 0%, transparent 72%),
    radial-gradient(20cqw 3cqw at 34% 69%, rgba(150, 122, 76, 0.045) 0%, transparent 72%),
    radial-gradient(15cqw 2.6cqw at 81% 88%, rgba(150, 122, 76, 0.04) 0%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(120, 96, 58, 0.028) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(120, 96, 58, 0.022) 0 1px, transparent 1px 6px);
}

/* flow-root keeps a section's first and last child margins inside it, so a text-first block still
   opens with air and a text-last one does not run into the photograph below it. */
.nci--linen .nci-section {
  display: flow-root;
  padding: 0;
}

.nci--linen .nci-s-story {
  padding: 4cqw 0 19cqw;
}

.nci--linen .nci-s-gallery {
  padding: 0 0 19cqw;
}

.nci--linen .nci-s-countdown {
  padding: 0 0 19cqw;
}

.nci--linen .nci-s-schedule {
  padding: 0 0 19cqw;
}

.nci--linen .nci-s-venue {
  padding: 0 0 19cqw;
}

.nci--linen .nci-s-faq {
  padding: 0 0 19cqw;
}

.nci--linen .nci-s-rsvp {
  padding: 0 0 19cqw;
}

.nci--linen .nci-s-wishes {
  padding: 0 0 4cqw;
}

/* Every drawn piece on this page is ornament: none of them may take a tap away from the photo slot
   or the field underneath. */
.nci--linen .lnn-horizon,
.nci--linen .lnn-gulls,
.nci--linen .lnn-hero-tear,
.nci--linen .lnn-close-tear,
.nci--linen .lnn-tide-mark,
.nci--linen .lnn-meter-line {
  pointer-events: none;
}

/* ───── the horizon, and the type that hangs from it ───── */

.nci--linen .lnn-horizon {
  position: relative;
  height: 1px;
  margin: 0 var(--lnn-g);
  background: var(--lnn-brass);
  opacity: 0.55;
}

.nci--linen .lnn-horizon-sun {
  position: absolute;
  top: 50%;
  width: 2.6cqw;
  height: 2.6cqw;
  margin-left: -1.3cqw;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--lnn-rose);
}

.nci--linen .lnn-head {
  padding-top: 15cqw;
}

.nci--linen .lnn-caps,
.nci-cover--linen .lnn-cv-kicker {
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--lnn-brass-ink);
}

.nci--linen .lnn-caps {
  padding: 4.4cqw var(--lnn-g) 0;
}

.nci--linen .lnn-title {
  padding: 2.4cqw var(--lnn-g) 0;
  font-family: var(--lnn-disp);
  font-size: 6.2cqw;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--lnn-ink);
}

.nci--linen.nci--lang-zh .lnn-title {
  font-size: 5.6cqw;
  letter-spacing: 0.06em;
}

/* ───── shared small pieces ───── */

.nci--linen .lnn-say {
  padding: 5cqw var(--lnn-g) 0;
  font-size: 3.2cqw;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--lnn-ink-2);
}

.nci--linen .lnn-foot {
  padding: 8cqw calc(var(--lnn-g) + 1cqw) 0;
  font-size: 3cqw;
  line-height: 2.1;
  letter-spacing: 0.06em;
  white-space: pre-line;
  color: var(--lnn-mute);
}

.nci--linen.nci--lang-en .lnn-foot {
  font-style: italic;
}

.nci--linen .lnn-link {
  display: inline-block;
  padding-bottom: 1cqw;
  border-bottom: 1px solid var(--lnn-brass);
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lnn-brass-ink);
}

.nci--linen .lnn-linkrow {
  padding: 8cqw var(--lnn-g) 0;
}

.nci--linen .lnn-gulls {
  display: block;
  width: 17cqw;
  fill: none;
  stroke: var(--lnn-ink-2);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.7;
}

/* Ornament: a line of small caps down the margin, set in the paper's left edge. */
.nci--linen .lnn-edge {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--lnn-sans);
  font-size: 2.4cqw;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lnn-brass-ink);
}

.nci--linen .lnn-edge--cover {
  top: 9cqw;
  left: 3.4cqw;
}

.nci--linen .lnn-edge--gal {
  top: 4cqw;
  left: 3.4cqw;
}

/* ───── torn linen mats ───── */

/* min-width on the mat and an auto height on the picture: as a grid child, a mat whose only content
   is a photograph would otherwise take the photograph's intrinsic width as its minimum and push its
   column past the margin. */
.nci--linen .lnn-mat {
  position: relative;
  min-width: 0;
  padding: 2.6cqw;
  background: linear-gradient(176deg, #fbf7ee 0%, var(--lnn-linen-2) 100%);
}

.nci--linen .lnn-mat-img {
  display: block;
  width: 100%;
  height: auto;
}

.nci--linen .lnn-mat--band {
  margin: 0 var(--lnn-g);
}

.nci--linen .lnn-mat--band .lnn-mat-img {
  aspect-ratio: 16 / 10;
}

/* 4:5, a shade squarer than the photographs' 3:4, so the picture overhangs its mat and can be moved
   up or down in the crop tool without zooming first. */
.nci--linen .lnn-mat--tall .lnn-mat-img {
  aspect-ratio: 4 / 5;
}

.nci--linen .lnn-mat--near .lnn-mat-img {
  aspect-ratio: 1 / 1;
}

.nci--linen .lnn-mat--wide .lnn-mat-img {
  aspect-ratio: 20 / 11;
}

/* ───── cover ─────
   The photograph, then linen torn across its foot and the letter starting underneath. */

.nci--linen .lnn-hero {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--lnn-dark);
}

.nci--linen .lnn-hero-img {
  position: absolute;
  inset: 0;
}

/* Nothing is drawn on the photograph — no type, and so no wash to make type legible. */
.nci--linen .lnn-hero-tear {
  position: absolute;
  inset: auto 0 0;
  height: 9px;
  background: var(--lnn-linen);
}

/* The letter's first block, ranged left off the page's own margin exactly like every block after it. */
.nci--linen .lnn-open {
  position: relative;
  padding: 11cqw 0 4cqw;
  text-align: left;
}

/* The cover's caps line is the same small caps that open every other block; the block's own padding
   already sets it off, so it drops the head spacing a mid-page caps line needs. */
.nci--linen .lnn-kicker {
  padding-top: 0;
}

.nci--linen .lnn-names {
  padding: 2.6cqw var(--lnn-g) 0;
  font-family: var(--lnn-disp);
  font-size: 11.4cqw;
  font-weight: 200;
  line-height: 1.24;
  letter-spacing: 0.02em;
  color: var(--lnn-ink);
  overflow-wrap: anywhere;
}

.nci--linen.nci--lang-zh .lnn-names {
  font-size: 10cqw;
  letter-spacing: 0.12em;
}

.nci--linen .lnn-amp {
  display: block;
  margin: 1cqw 0;
  font-size: 3.4cqw;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--lnn-rose-ink);
}

.nci--linen.nci--lang-zh .lnn-amp {
  font-style: normal;
}

.nci--linen .lnn-open .lnn-horizon {
  margin-top: 7cqw;
}

.nci--linen .lnn-when {
  display: flex;
  align-items: baseline;
  gap: 4.6cqw;
  margin-top: 5cqw;
  padding: 0 var(--lnn-g);
  font-family: var(--lnn-sans);
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--lnn-ink);
}

.nci--linen .lnn-when-t {
  color: var(--lnn-ink-2);
}

.nci--linen .lnn-where {
  margin-top: 3cqw;
  padding: 0 var(--lnn-g);
  font-size: 3.1cqw;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--lnn-mute);
}

.nci--linen .lnn-gulls--cover {
  width: 15cqw;
  margin: 8cqw 0 0 var(--lnn-g);
}

.nci--linen .lnn-lede {
  padding: 5cqw calc(var(--lnn-g) + 2cqw) 0 var(--lnn-g);
  font-size: 3.6cqw;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--lnn-ink-2);
}

.nci--linen.nci--lang-en .lnn-lede {
  font-style: italic;
}

/* ───── story ───── */

/* The letter is written line by line, so the measure has to hold the couple's own lines without
   folding them: it keeps the page's margin and no more, and sets a size the sample's longest line
   clears in both scripts. */
.nci--linen .lnn-letter {
  padding: 8cqw var(--lnn-g) 0;
  font-size: 3.3cqw;
  line-height: 2.15;
  letter-spacing: 0.03em;
  white-space: pre-line;
  color: var(--lnn-ink);
}

.nci--linen.nci--lang-zh .lnn-letter {
  font-size: 3.2cqw;
  letter-spacing: 0.06em;
}

.nci--linen .lnn-sign {
  padding: 4.4cqw var(--lnn-g) 0;
  text-align: right;
  font-size: 3.1cqw;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--lnn-rose-ink);
}

.nci--linen.nci--lang-zh .lnn-sign {
  font-style: normal;
}

.nci--linen .nci-s-story .lnn-mat--band {
  margin-top: 12cqw;
}

.nci--linen .lnn-mark {
  padding: 3.4cqw var(--lnn-g) 0;
  text-align: center;
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--lnn-mute);
}

.nci--linen .lnn-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 12cqw var(--lnn-g) 0;
  border-top: 1px solid var(--lnn-hair);
  border-bottom: 1px solid var(--lnn-hair);
}

.nci--linen .lnn-person {
  padding: 6cqw 4cqw 6.4cqw 0;
}

.nci--linen .lnn-person + .lnn-person {
  padding: 6cqw 0 6.4cqw 4cqw;
  border-left: 1px solid var(--lnn-hair-2);
}

.nci--linen .lnn-person-role {
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--lnn-brass-ink);
}

.nci--linen .lnn-person-name {
  margin-top: 2.2cqw;
  font-size: 5cqw;
  font-weight: 300;
  line-height: 1.3;
  color: var(--lnn-ink);
  overflow-wrap: anywhere;
}

.nci--linen .lnn-person-line {
  margin-top: 2.6cqw;
  font-size: 2.9cqw;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--lnn-ink-2);
}

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

.nci--linen .lnn-verse {
  padding: 6cqw var(--lnn-g) 0;
  font-size: 3.3cqw;
  line-height: 2.15;
  letter-spacing: 0.05em;
  white-space: pre-line;
  color: var(--lnn-ink);
}

.nci--linen.nci--lang-en .lnn-verse {
  font-style: italic;
}

.nci--linen .lnn-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 4cqw;
  margin: 11cqw var(--lnn-g) 0;
}

.nci--linen .lnn-mat--near {
  margin-top: 13cqw;
}

.nci--linen .lnn-wide {
  position: relative;
  margin-top: 13cqw;
  padding-left: 11cqw;
  padding-right: 4cqw;
}

.nci--linen .lnn-frame-cap {
  margin-top: 3.4cqw;
  font-size: 2.7cqw;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--lnn-mute);
}

.nci--linen.nci--lang-en .lnn-frame-cap {
  font-style: italic;
}

/* ───── countdown, drawn as four horizon meters ───── */

.nci--linen .lnn-meters {
  margin: 9cqw var(--lnn-g) 0;
}

.nci--linen .lnn-meter {
  display: grid;
  grid-template-columns: 13cqw minmax(0, 1fr) 12cqw;
  align-items: center;
  gap: 3.4cqw;
  padding: 3.6cqw 0;
  border-top: 1px solid var(--lnn-hair-2);
}

.nci--linen .lnn-meter:last-child {
  border-bottom: 1px solid var(--lnn-hair-2);
}

.nci--linen .lnn-meter-l {
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lnn-mute);
}

.nci--linen .lnn-meter-line {
  position: relative;
  display: block;
  height: 1px;
  background: var(--lnn-hair);
}

.nci--linen .lnn-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--lnn-brass);
}

.nci--linen .lnn-meter-sun {
  position: absolute;
  top: 50%;
  display: block;
  width: 2.2cqw;
  height: 2.2cqw;
  margin-left: -1.1cqw;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--lnn-rose);
}

/* The figures are set in the sans: the display face's numerals are old-style, so a lone 1 in it
   reads as a small-caps I rather than a number. */
.nci--linen .lnn-meter-n {
  font-family: var(--lnn-sans);
  font-size: 4.4cqw;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: 0.04em;
  color: var(--lnn-ink);
}

.nci--linen .lnn-cd-done {
  margin: 9cqw var(--lnn-g) 0;
  padding: 6cqw 0;
  border-top: 1px solid var(--lnn-hair);
  border-bottom: 1px solid var(--lnn-hair);
  text-align: center;
  font-size: 5cqw;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--lnn-rose-ink);
}

.nci--linen .lnn-dates {
  margin-top: 7cqw;
  padding: 0 var(--lnn-g);
}

.nci--linen .lnn-dateline {
  display: flex;
  align-items: center;
  gap: 3cqw;
  font-family: var(--lnn-sans);
  font-size: 2.8cqw;
  line-height: 2;
  letter-spacing: 0.2em;
  color: var(--lnn-mute);
}

.nci--linen .lnn-dateline span {
  color: var(--lnn-ink);
}

.nci--linen .lnn-dateline em {
  flex: 1;
  height: 1px;
  background: var(--lnn-hair-2);
}

.nci--linen .lnn-dateline--sub {
  font-size: 2.6cqw;
  color: var(--lnn-brass-ink);
}

/* ───── the tide table ───── */

.nci--linen .lnn-tide {
  width: calc(100% - var(--lnn-g) * 2);
  margin: 9cqw var(--lnn-g) 0;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

.nci--linen .lnn-tide-h {
  padding: 0 0 2.6cqw;
  border-bottom: 1px solid var(--lnn-brass);
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lnn-brass-ink);
}

.nci--linen .lnn-tide-h:first-child {
  width: 27%;
}

.nci--linen .lnn-tide-h:last-child {
  width: 29%;
}

.nci--linen .lnn-tide-r td {
  padding: 4cqw 0;
  border-bottom: 1px solid var(--lnn-hair-2);
  vertical-align: baseline;
}

.nci--linen .lnn-tide-r:last-child td {
  border-bottom: 1px solid var(--lnn-hair);
}

.nci--linen .lnn-tide-at {
  position: relative;
  padding-left: 4.6cqw !important;
  font-family: var(--lnn-sans);
  font-size: 3.2cqw;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--lnn-ink);
  white-space: nowrap;
}

/* High water: the one row whose hour is the hour in content.dateISO. */
.nci--linen .lnn-tide-mark {
  position: absolute;
  top: 5.6cqw;
  left: 0;
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 50%;
  background: var(--lnn-rose);
  opacity: 0;
}

.nci--linen .lnn-tide-r.is-high .lnn-tide-mark {
  opacity: 1;
}

.nci--linen .lnn-tide-r.is-high .lnn-tide-at {
  color: var(--lnn-rose-ink);
}

.nci--linen .lnn-tide-r.is-high .lnn-tide-t {
  color: var(--lnn-ink);
}

.nci--linen .lnn-tide-t {
  padding-right: 3cqw !important;
  font-size: 3.2cqw;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--lnn-ink);
}

.nci--linen .lnn-tide-n {
  font-size: 2.7cqw;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--lnn-mute);
}

.nci--linen.nci--lang-en .lnn-tide-n {
  font-style: italic;
}

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

.nci--linen .nci-s-venue .lnn-mat--band {
  margin-top: 10cqw;
}

.nci--linen .lnn-place {
  padding: 9cqw var(--lnn-g) 0;
}

.nci--linen .lnn-place-name {
  font-size: 5.2cqw;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--lnn-ink);
}

.nci--linen .lnn-place-addr {
  margin-top: 2cqw;
  font-family: var(--lnn-sans);
  font-size: 2.8cqw;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--lnn-ink-2);
}

.nci--linen .lnn-mapwrap {
  margin: 6cqw var(--lnn-g) 0;
  overflow: hidden;
  border: 1px solid var(--lnn-hair-2);
}

/* The map is the lake seen from above: water across the top two fifths, the shore, then the land the
   road runs through — the same horizon the rest of the page is built on. */
.nci--linen .nci-map {
  height: 32cqw;
  background:
    linear-gradient(180deg, rgba(58, 96, 100, 0.16) 0%, rgba(58, 96, 100, 0.13) 37%, transparent 37.6%),
    radial-gradient(30cqw 9cqw at 76% 14%, rgba(168, 129, 63, 0.16) 0%, transparent 72%),
    radial-gradient(22cqw 12cqw at 14% 82%, rgba(120, 140, 106, 0.14) 0%, transparent 74%),
    linear-gradient(180deg, #e9e2d2 0%, #e4dcc9 100%);
}

.nci--linen .nci-map-road {
  top: 58%;
  height: 3cqw;
  border-top: 1px solid rgba(125, 95, 39, 0.2);
  border-bottom: 1px solid rgba(125, 95, 39, 0.2);
  background: repeating-linear-gradient(90deg, rgba(125, 95, 39, 0.14) 0 3cqw, transparent 3cqw 7cqw), rgba(252, 249, 242, 0.7);
}

.nci--linen .nci-map-pin {
  top: 49%;
  left: 47%;
  width: 3.6cqw;
  height: 3.6cqw;
  background: var(--lnn-rose-ink);
  box-shadow: 0 0 0 1.6cqw rgba(181, 105, 95, 0.16);
}

.nci--linen .lnn-maps {
  display: flex;
  gap: 7cqw;
  padding: 5.4cqw var(--lnn-g) 0;
}

.nci--linen .lnn-note {
  padding: 8cqw calc(var(--lnn-g) + 1cqw) 0;
  font-size: 3.2cqw;
  line-height: 2.05;
  letter-spacing: 0.05em;
  white-space: pre-line;
  color: var(--lnn-ink-2);
}

.nci--linen .lnn-travel {
  margin: 9cqw var(--lnn-g) 0;
}

.nci--linen .lnn-travel-row {
  display: grid;
  grid-template-columns: 24cqw minmax(0, 1fr);
  gap: 3cqw;
  padding: 4cqw 0;
  border-top: 1px solid var(--lnn-hair-2);
}

.nci--linen .lnn-travel-row:last-child {
  border-bottom: 1px solid var(--lnn-hair-2);
}

.nci--linen .lnn-travel-k {
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lnn-brass-ink);
}

.nci--linen .lnn-travel-v {
  font-size: 2.9cqw;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--lnn-ink-2);
}

/* ───── postscript ───── */

.nci--linen .lnn-faq {
  margin: 8cqw var(--lnn-g) 0;
}

.nci--linen .lnn-faq-item {
  padding: 5cqw 0;
  border-top: 1px solid var(--lnn-hair-2);
}

.nci--linen .lnn-faq-item:last-child {
  border-bottom: 1px solid var(--lnn-hair-2);
}

.nci--linen .lnn-faq-q {
  font-size: 3.6cqw;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--lnn-ink);
}

.nci--linen .lnn-faq-a {
  margin-top: 1.8cqw;
  font-size: 2.9cqw;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--lnn-ink-2);
}

/* ───── reply, written as a form on the same paper ───── */

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

.nci--linen .lnn-row {
  display: grid;
  grid-template-columns: 26cqw minmax(0, 1fr);
  align-items: baseline;
  gap: 3cqw;
  padding: 3.4cqw 0;
  border-bottom: 1px solid var(--lnn-hair);
}

/* English labels are whole words rather than two or three characters, so they get a wider margin and
   less tracking — otherwise "anything you avoid" folds and the ruled rows stop lining up. */
.nci--linen.nci--lang-en .lnn-row {
  grid-template-columns: 33cqw minmax(0, 1fr);
}

.nci--linen.nci--lang-en .lnn-row-l {
  letter-spacing: 0.1em;
}

.nci--linen .lnn-row.is-bad {
  border-bottom-color: var(--lnn-rose-ink);
}

.nci--linen .lnn-row-l {
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lnn-brass-ink);
}

.nci--linen .lnn-row-i {
  width: 100%;
  padding: 0 0 0.6cqw;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--lnn-disp);
  font-size: 4cqw;
  color: var(--lnn-ink);
  outline: none;
}

.nci--linen .lnn-row-i:focus {
  background: rgba(168, 129, 63, 0.09);
}

.nci--linen .lnn-err {
  padding-top: 2cqw;
  font-family: var(--lnn-sans);
  font-size: max(12px, 2.6cqw);
  letter-spacing: 0.06em;
  color: var(--lnn-rose-ink);
}

.nci--linen .lnn-ticks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3cqw;
  padding: 6cqw 0 5cqw;
}

.nci--linen .lnn-tick {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--lnn-disp);
  font-size: 3.2cqw;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--lnn-ink-2);
}

.nci--linen .lnn-tick-box {
  position: relative;
  flex: none;
  width: 4.4cqw;
  height: 4.4cqw;
  border: 1px solid var(--lnn-brass);
}

/* The tick itself: two strokes drawn with a border, rotated. */
.nci--linen .lnn-tick-box::after {
  content: '';
  position: absolute;
  top: 0.1cqw;
  left: 1.4cqw;
  width: 1.6cqw;
  height: 3.2cqw;
  border: solid var(--lnn-rose-ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
  opacity: 0;
  transition: opacity 120ms;
}

.nci--linen .lnn-tick[aria-pressed='true'] {
  color: var(--lnn-ink);
}

.nci--linen .lnn-tick[aria-pressed='true'] .lnn-tick-box {
  border-color: var(--lnn-rose-ink);
}

.nci--linen .lnn-tick[aria-pressed='true'] .lnn-tick-box::after {
  opacity: 1;
}

.nci--linen .lnn-tick:disabled {
  opacity: 0.55;
}

.nci--linen .lnn-row--count,
.nci--linen .lnn-row--diet {
  align-items: center;
}

.nci--linen .lnn-row--diet {
  align-items: start;
  padding-bottom: 4.4cqw;
}

.nci--linen .lnn-step {
  display: flex;
  align-items: center;
  gap: 4cqw;
}

.nci--linen .lnn-step button {
  width: 7cqw;
  height: 7cqw;
  padding: 0;
  border: 1px solid var(--lnn-brass);
  border-radius: 0;
  background: transparent;
  font-family: var(--lnn-sans);
  font-size: 3.4cqw;
  line-height: 1;
  color: var(--lnn-brass-ink);
}

.nci--linen .lnn-step button:disabled {
  opacity: 0.35;
}

.nci--linen .lnn-step span {
  min-width: 4cqw;
  font-family: var(--lnn-sans);
  font-size: 4cqw;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--lnn-ink);
}

.nci--linen .lnn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2cqw;
}

.nci--linen .lnn-tag {
  padding: 1.8cqw 3.4cqw;
  border: 1px solid var(--lnn-hair);
  border-radius: 0;
  background: transparent;
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  letter-spacing: 0.08em;
  color: var(--lnn-ink-2);
}

.nci--linen .lnn-tag[aria-pressed='true'] {
  border-color: var(--lnn-rose-ink);
  background: rgba(181, 105, 95, 0.14);
  color: var(--lnn-rose-ink);
}

.nci--linen .lnn-tag:disabled {
  opacity: 0.4;
}

.nci--linen .lnn-submit {
  width: 100%;
  margin-top: 8cqw;
  padding: 4.4cqw 0;
  border: none;
  border-radius: 0;
  background: var(--lnn-ink);
  font-family: var(--lnn-sans);
  font-size: 2.8cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--lnn-linen);
}

.nci--linen .lnn-submit:disabled {
  opacity: 0.5;
}

.nci--linen .lnn-done {
  margin: 10cqw var(--lnn-g) 0;
  text-align: center;
}

.nci--linen .lnn-done .lnn-horizon {
  margin: 0 0 7cqw;
}

.nci--linen .lnn-done-t {
  font-size: 5.6cqw;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--lnn-ink);
}

.nci--linen .lnn-done-b {
  margin-top: 3cqw;
  font-size: 3.1cqw;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--lnn-ink-2);
}

.nci--linen .lnn-req {
  margin-left: 0.4em;
  color: var(--lnn-rose-ink);
}

.nci--linen .lnn-ticks + .lnn-err {
  margin: -3cqw 0 4cqw;
  padding-top: 0;
}

.nci--linen .lnn-err--server {
  padding-top: 6cqw;
}

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

.nci--linen .lnn-done-when {
  margin-top: 2cqw;
  font-family: var(--lnn-sans);
  font-size: 2.5cqw;
  letter-spacing: 0.04em;
  color: var(--lnn-mute);
}

.nci--linen .lnn-done-edit {
  margin-top: 6cqw;
  padding: 0 0 1cqw;
  border: none;
  border-bottom: 1px solid var(--lnn-brass);
  background: none;
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--lnn-brass-ink);
}

/* ───── the margin ───── */

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

.nci--linen .lnn-wish-in {
  grid-column: 1 / -1;
  width: 100%;
  padding: 2.6cqw 0;
  border: none;
  border-bottom: 1px solid var(--lnn-hair);
  border-radius: 0;
  background: transparent;
  font-family: var(--lnn-disp);
  font-size: 3.4cqw;
  letter-spacing: 0.04em;
  color: var(--lnn-ink);
  outline: none;
}

.nci--linen .lnn-wish-in--name {
  grid-column: 1;
}

.nci--linen .lnn-wish-in::placeholder {
  color: var(--lnn-mute);
}

.nci--linen .lnn-wish-in:focus {
  border-bottom-color: var(--lnn-brass);
}

.nci--linen .lnn-wish-err {
  grid-column: 1 / -1;
  padding-top: 0;
}

.nci--linen .lnn-wish-post {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: 2.2cqw 5cqw;
  border: 1px solid var(--lnn-ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--lnn-ink);
}

.nci--linen .lnn-wish-post:disabled {
  opacity: 0.45;
}

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

.nci--linen .lnn-wish {
  padding: 4.6cqw 0;
  border-top: 1px solid var(--lnn-hair-2);
}

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

.nci--linen .lnn-wish-text {
  font-size: 3.2cqw;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--lnn-ink);
  overflow-wrap: anywhere;
}

.nci--linen .lnn-wish-from {
  margin-top: 2cqw;
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lnn-mute);
}

.nci--linen .lnn-wish-empty {
  padding: 6cqw 0;
  text-align: center;
  font-size: 3cqw;
  letter-spacing: 0.08em;
  color: var(--lnn-mute);
}

/* ───── the closing photograph ───── */

.nci--linen .lnn-close {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-top: 14cqw;
  overflow: hidden;
  background: var(--lnn-dark);
}

.nci--linen .lnn-close-img {
  position: absolute;
  inset: 0;
}

.nci--linen .lnn-close-tear {
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background: var(--lnn-linen);
}

.nci--linen .lnn-close-line {
  padding: 8cqw calc(var(--lnn-g) + 1cqw) 0;
  text-align: center;
  font-size: 4.4cqw;
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--lnn-ink);
}

.nci--linen.nci--lang-en .lnn-close-line {
  font-style: italic;
}

.nci--linen .lnn-coda {
  padding: 9cqw 0 2cqw;
  text-align: center;
}

.nci--linen .lnn-gulls--coda {
  width: 13cqw;
  margin: 0 auto 5cqw;
}

.nci--linen .lnn-coda-mark {
  font-family: var(--lnn-sans);
  font-size: 2.4cqw;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--lnn-brass-ink);
}

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

.nci-cover--linen {
  container-type: inline-size;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--lnn-linen);
  color: var(--lnn-ink);
  font-family: var(--lnn-disp);
}

.nci-cover--linen .lnn-cv-photo {
  position: relative;
  height: 60%;
  overflow: hidden;
  background: var(--lnn-dark);
}

.nci-cover--linen .lnn-cv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* The page's caps line, on the same paper and hanging from the same margin, so the words do not move
   when the letter opens. */
.nci-cover--linen .lnn-cv-kicker {
  margin-bottom: 3.4cqw;
}

.nci-cover--linen .lnn-cv-tear {
  position: absolute;
  inset: auto 0 0;
  height: 8px;
  pointer-events: none;
  background: var(--lnn-linen);
}

.nci-cover--linen .lnn-cv-body {
  position: relative;
  height: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--lnn-g) 3cqw;
  text-align: left;
}

.nci-cover--linen .lnn-cv-names {
  font-size: 11cqw;
  font-weight: 200;
  line-height: 1.24;
  letter-spacing: 0.02em;
  color: var(--lnn-ink);
  overflow-wrap: anywhere;
}

.nci-cover--linen .lnn-cv-names i {
  display: block;
  margin: 0.6cqw 0;
  font-size: 3.4cqw;
  font-style: italic;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--lnn-rose-ink);
}

.nci-cover--linen .lnn-cv-date {
  margin-top: 4cqw;
  font-family: var(--lnn-sans);
  font-size: 2.9cqw;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--lnn-ink-2);
}

/* The way in is the horizon: a brass hairline with the rose sun on it, which rises when tapped. */
.nci-cover--linen .lnn-cv-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.4cqw;
  width: 46cqw;
  margin-top: 8cqw;
  padding: 0;
  border: none;
  background: none;
}

.nci-cover--linen .lnn-cv-rule {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--lnn-brass);
}

.nci-cover--linen .lnn-cv-sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.6cqw;
  height: 4.6cqw;
  margin: 0 0 0 -2.3cqw;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--lnn-rose);
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nci-cover--linen .lnn-cv-open:hover .lnn-cv-sun {
  transform: translateY(-80%);
}

.nci-cover--linen .lnn-cv-open-t {
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--lnn-brass-ink);
}

.nci-cover--linen .lnn-cv-open:focus-visible {
  outline: 2px solid var(--lnn-brass-ink);
  outline-offset: 6px;
}

.nci-cover--linen .lnn-cv-hint {
  margin-top: 5cqw;
  font-family: var(--lnn-sans);
  font-size: 2.6cqw;
  letter-spacing: 0.14em;
  color: var(--lnn-mute);
}

/* Opening: the sun goes up over the line and the letter is already underneath. */
.nci-cover--linen.lnn-cv--opening {
  animation: lnn-open 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.nci-cover--linen.lnn-cv--opening .lnn-cv-sun {
  animation: lnn-rise 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes lnn-open {
  to {
    opacity: 0;
  }
}

@keyframes lnn-rise {
  to {
    transform: translateY(-460%) scale(2.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--linen.lnn-cv--opening,
  .nci-cover--linen.lnn-cv--opening .lnn-cv-sun {
    animation: none;
  }

  .nci-cover--linen .lnn-cv-sun {
    transition: none;
  }
}

/* ───── Floating bar — two squares in the foot of the right margin ─────
   The base bar is centred at the foot of the screen, where it comes to rest on the wishes and on the
   reply's own send button. The bottom left looks like the widest silence on this page but is the
   opposite: every line is ranged left off the 11cqw margin, so walking the page with the bar there put
   it over ten blocks of text, the opening line of the letter and the left end of the submit bar among
   them. The foot of the right margin is the real silence, past the ragged edge of the type, and it
   keeps the bar off the cover photograph, which the top right would sit on. Square corners, like the
   ticks and the stepper. */

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

.nci-float--linen button {
  width: 34px;
  height: 34px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border-radius: 0;
  font-family: var(--lnn-sans);
  font-size: 0;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 3px 12px rgba(18, 41, 43, 0.16);
}

.nci-float--linen .nci-float-music {
  border: 1px solid var(--lnn-brass);
  background: rgba(242, 236, 224, 0.95);
  color: var(--lnn-ink);
}

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

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

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

.nci-float--linen .nci-float-music[aria-pressed='true'] {
  border-color: var(--lnn-rose-ink);
  background: var(--lnn-rose-ink);
}

.nci-float--linen .nci-float-music[aria-pressed='true'] .nci-float-dot {
  color: #fff;
}

.nci-float--linen .nci-float-share {
  border: 1px solid var(--lnn-ink);
  background: var(--lnn-ink);
  color: var(--lnn-linen);
}