/* Nicecard demo — "Fern Letter" (蕨信) invitation style. Everything is scoped under .nci--fern,
   .nci-cover--fern and .nci-float--fern so the other styles are untouched; new classes use the frn-
   prefix. The page is a size container, so every measurement is in cqw and the layout keeps its
   proportions in the 372px phone frame, the 390px editor canvas and a 390px phone.
   The page is painted first: the ground is the kit's cold-press paper tile, and every screen carries
   at least one large piece of the owner's watercolour — fern and eucalyptus in the corners, sage
   ribbons for the headings, the hills under the address, the olive wreath as the seal. Photographs
   are prints on a white border, turned a few degrees and tucked under a painted corner.
   Type is quiet: a gold script for the names and signatures, Cormorant Garamond (Noto Serif SC in
   中文) for the letter, Cinzel for the few small capitals. Every colour that carries a word clears
   4.5:1 on the paper: --frn-ink 9.4:1, --frn-ink-2 6.1:1, --frn-gold-ink 5.3:1, --frn-mute 4.9:1.
   The gold script is display type only (names, signatures, the countdown's days, the monogram) and
   is set large enough for the 3:1 large-text threshold. Nothing that carries information is set
   below 2.6cqw (10px at 390), and never below 10px on a narrower phone. Every painted piece is decoration and never takes a tap. */

.nci--fern,
.nci-cover--fern,
.nci-float--fern {
  --frn-paper: #f4eee0;
  --frn-card: rgba(253, 251, 245, 0.8);
  --frn-print: #fcfaf4;
  --frn-ink: #2e4230;
  --frn-ink-2: #4a5d45;
  --frn-mute: #5f6a57;
  --frn-fern: #3f5a3c;
  --frn-sage: #a3b18d;
  --frn-sage-2: #dfe4d2;
  --frn-sage-d: #7d8f6b;
  --frn-gold-ink: #7c5c22;
  --frn-rose-ink: #954236;
  --frn-hair: rgba(46, 66, 48, 0.2);
  --frn-hair-2: rgba(46, 66, 48, 0.12);
  --frn-gold: linear-gradient(100deg, #8a6528 0%, #c6a153 28%, #9d7734 52%, #cdab63 76%, #8f6b2d 100%);
  --frn-shadow: 0 0.5cqw 1.2cqw rgba(56, 48, 30, 0.16), 0 2.4cqw 5.4cqw rgba(56, 48, 30, 0.12);
  --frn-g: 9cqw;
  --frn-serif: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --frn-script: 'Great Vibes', 'Long Cang', cursive;
  /* Long Cang has no full-width punctuation, so a ，or ： a couple types falls through to the serif, not
     to a Latin script; the sample's handwritten lines are written without any. */
  --frn-script-zh: 'Long Cang', 'Noto Serif SC', serif;
  --frn-caps: 'Cinzel', 'Noto Serif SC', Georgia, serif;
}

.nci--fern {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--frn-paper);
  color: var(--frn-ink);
  font-family: var(--frn-serif);
  --nci-bg: var(--frn-paper);
  --nci-soft: #e9e3d2;
  --nci-slot-line: rgba(124, 92, 34, 0.45);
  --nci-slot-ink: var(--frn-ink-2);
  --nci-hint: rgba(124, 92, 34, 0.5);
  --nci-sel: #954236;
}

/* The paper itself: the kit's opaque cold-press tile, laid under everything. Sections paint over it. */
.nci--fern::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: var(--frn-paper) url(assets/watercolor/watercolor-paper.webp) 0 0 / 78cqw auto repeat;
}

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

/* In the editor a paragraph that is one field takes the paragraph's whole box, so a click between two
   wrapped, centred lines still lands on the words rather than on the page behind them. */
.nci--fern.nci--edit p > .nci-f:only-child {
  display: block;
}

/* ───── painted pieces ───── */

.nci--fern .frn-paint,
.nci-cover--fern .frn-paint {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.nci--fern .frn-flip,
.nci-cover--fern .frn-flip {
  transform: scaleX(-1);
}

/* A piece laid over the edge of a print (Over in fern.js) paints its kit file from ::before; the host
   is an empty box the placing rules size by width, holding the painting's own proportions. */
.nci--fern .frn-over {
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
}

.nci--fern .frn-over::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--frn-over) center / 100% 100% no-repeat;
}

/* The kit's corner pieces are trimmed where the painting ran off its sheet, so their two outer edges
   are straight cuts through leaves and stems. Where a corner meets the edge of the page the cut is
   hidden off-page; where one stops in the middle of the page, that edge is let fade into the paper
   the way a wash thins out, instead of ending on a ruled line. */
.nci--fern .frn-fade-t {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
}

.nci--fern .frn-fade-b {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 26%);
  mask-image: linear-gradient(to top, transparent 0%, #000 26%);
}

/* ───── gold script ─────
   The gradient is painted through the letters. `color: transparent` rather than a fill colour, so a
   colour the couple picks for a field in the editor (an inline `color`) still wins. */
.nci--fern .frn-names,
.nci--fern .frn-sign,
.nci--fern .frn-person-name,
.nci--fern .frn-seal-mono,
.nci--fern .frn-cd-cell--d .frn-cd-n,
.nci--fern .frn-thanks-t,
.nci-cover--fern .frn-ov-names {
  background: var(--frn-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: var(--frn-gold-ink);
}

/* ───── ribbon headings ───── */

.nci--fern .frn-ribbon {
  position: relative;
  z-index: 2;
  display: block;
  width: 76cqw;
  margin: 0 auto;
}

.nci--fern .frn-ribbon-img,
.nci-cover--fern .frn-ov-ribbon {
  position: relative;
  width: 100%;
}

/* The words sit on the flat of the band — between the two folds, and a little above the middle
   because the band sags. */
.nci--fern .frn-ribbon-t {
  position: absolute;
  left: 19%;
  right: 19%;
  top: 18%;
  height: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--frn-caps);
  font-size: 3.1cqw;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--frn-ink);
}

.nci--fern.nci--lang-zh .frn-ribbon-t {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3.7cqw;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.nci--fern .frn-ribbon--v2 .frn-ribbon-t {
  top: 14%;
}

.nci--fern .frn-lede {
  position: relative;
  z-index: 2;
  margin: 5cqw var(--frn-g) 0;
  text-align: center;
  font-size: 3.9cqw;
  font-style: italic;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-lede {
  font-size: 3.4cqw;
  font-style: normal;
  letter-spacing: 0.06em;
}

.nci--fern .frn-dot {
  margin: 0 0.5em;
  color: var(--frn-sage-d);
}

.nci--fern .frn-link {
  display: inline-block;
  padding-bottom: 1cqw;
  border-bottom: 1px solid rgba(124, 92, 34, 0.55);
  font-family: var(--frn-caps);
  font-size: 2.7cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-decoration: none;
  color: var(--frn-gold-ink);
}

.nci--fern.nci--lang-zh .frn-link {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3cqw;
  letter-spacing: 0.24em;
}

.nci--fern .frn-linkrow {
  position: relative;
  z-index: 2;
  margin-top: 8cqw;
  text-align: center;
}

/* ───── prints ───── */

.nci--fern .frn-print {
  position: relative;
  z-index: 2;
  padding: 2cqw;
  background: var(--frn-print);
  box-shadow: var(--frn-shadow);
}

.nci--fern .frn-print-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
}

/* ───── cover ───── */

.nci--fern .frn-cv {
  position: relative;
  padding: 13cqw 0 10cqw;
}

.nci--fern .frn-cv-euc {
  z-index: 3;
  top: -3cqw;
  right: -10cqw;
  width: 66cqw;
}

.nci--fern .frn-cv-fern {
  left: -11cqw;
  bottom: -15cqw;
  width: 60cqw;
}

.nci--fern .frn-cv-kicker {
  position: relative;
  z-index: 2;
  padding: 0 var(--frn-g);
  font-family: var(--frn-caps);
  font-size: 2.7cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--frn-gold-ink);
}

.nci--fern.nci--lang-zh .frn-cv-kicker {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3.2cqw;
  letter-spacing: 0.4em;
}

.nci--fern .frn-print--cover {
  width: 82cqw;
  margin: 5cqw 0 0 7cqw;
  transform: rotate(-1.6deg);
}

.nci--fern .frn-names {
  position: relative;
  z-index: 2;
  margin-top: 7cqw;
  padding: 0 6cqw;
  text-align: center;
  font-family: var(--frn-script);
  font-size: 12.4cqw;
  font-weight: 400;
  line-height: 1.16;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.nci--fern .frn-amp {
  margin: 0 0.36em 0 0.3em;
  font-family: 'Great Vibes', cursive;
  font-size: 0.82em;
}

.nci--fern.nci--lang-zh .frn-names {
  font-family: var(--frn-script-zh);
  font-size: 11.6cqw;
  letter-spacing: 0.06em;
}

.nci--fern.nci--lang-zh .frn-amp {
  font-size: 0.9em;
  letter-spacing: 0;
}

.nci--fern .frn-ribbon--date {
  width: 70cqw;
  margin-top: 2.4cqw;
}

.nci--fern .frn-ribbon-t--date {
  font-family: var(--frn-serif);
  font-size: 4.4cqw;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.nci--fern.nci--lang-zh .frn-ribbon-t--date {
  font-family: var(--frn-serif);
  font-size: 4.4cqw;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.nci--fern .frn-cv-place {
  font-variant-numeric: lining-nums;
  position: relative;
  z-index: 2;
  margin-top: 1.4cqw;
  padding: 0 var(--frn-g);
  text-align: center;
  font-size: 3.7cqw;
  font-style: italic;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-cv-place {
  font-size: 3.3cqw;
  font-style: normal;
  letter-spacing: 0.1em;
}

/* ───── the letter ───── */

.nci--fern .frn-letter {
  position: relative;
  padding: 19cqw 0 2cqw;
}

.nci--fern .frn-salute {
  position: relative;
  z-index: 2;
  margin-top: 9cqw;
  padding: 0 var(--frn-g);
  font-family: var(--frn-script);
  font-size: 8.6cqw;
  line-height: 1.2;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-salute {
  font-family: var(--frn-script-zh);
  font-size: 7cqw;
}

.nci--fern .frn-body {
  position: relative;
  z-index: 2;
  margin-top: 3cqw;
  padding: 0 var(--frn-g);
  font-size: 4cqw;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.01em;
  white-space: pre-line;
  color: var(--frn-ink);
}

.nci--fern.nci--lang-zh .frn-body {
  font-size: 3.6cqw;
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: 0.05em;
}

.nci--fern .frn-letter-foot {
  position: relative;
  display: grid;
  grid-template-columns: 52cqw minmax(0, 1fr);
  align-items: end;
  gap: 4cqw;
  margin-top: 12cqw;
  padding-right: 6cqw;
}

.nci--fern .frn-letter-print {
  position: relative;
  min-width: 0;
}

.nci--fern .frn-print--letter {
  width: 46cqw;
  margin-left: 6cqw;
  transform: rotate(-2.4deg);
}

.nci--fern .frn-letter-euc {
  z-index: 3;
  top: -12cqw;
  left: -12cqw;
  width: 46cqw;
}

.nci--fern .frn-signoff {
  position: relative;
  z-index: 2;
  padding-bottom: 5cqw;
}

.nci--fern .frn-close {
  font-size: 3.7cqw;
  font-style: italic;
  line-height: 1.55;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-close {
  font-size: 3.4cqw;
  font-style: normal;
  letter-spacing: 0.06em;
}

.nci--fern .frn-sign {
  margin-top: 3cqw;
  font-family: var(--frn-script);
  font-size: 8.4cqw;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.nci--fern.nci--lang-zh .frn-sign {
  font-family: var(--frn-script-zh);
  font-size: 7.4cqw;
}

.nci--fern .frn-sign-a,
.nci--fern .frn-sign-b {
  display: block;
}

.nci--fern .frn-sign-b {
  padding-left: 0.8em;
}

.nci--fern .frn-sign-amp {
  margin-right: 0.3em;
  font-family: 'Great Vibes', cursive;
}

/* ───── the two of us ───── */

.nci--fern .frn-two {
  position: relative;
  padding: 14cqw 0 6cqw;
}

.nci--fern .frn-two-fern {
  right: -12cqw;
  bottom: -26cqw;
  width: 48cqw;
}

.nci--fern .frn-two-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7cqw;
  margin: 9cqw var(--frn-g) 0;
  text-align: center;
}

.nci--fern .frn-person-role {
  font-family: var(--frn-caps);
  font-size: 2.7cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--frn-gold-ink);
}

.nci--fern.nci--lang-zh .frn-person-role {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3cqw;
  letter-spacing: 0.3em;
}

.nci--fern .frn-person-name {
  margin-top: 1.4cqw;
  font-family: var(--frn-script);
  font-size: 9.6cqw;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.nci--fern.nci--lang-zh .frn-person-name {
  font-family: var(--frn-script-zh);
  font-size: 8.6cqw;
}

.nci--fern .frn-person-line {
  margin-top: 2cqw;
  font-size: 3.6cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-person-line {
  font-size: 3.2cqw;
  font-style: normal;
  line-height: 1.85;
  letter-spacing: 0.04em;
}

/* ───── the enclosed prints ───── */

.nci--fern .frn-gal {
  position: relative;
  padding: 16cqw 0 6cqw;
}

/* The page's own painting around the pile: a eucalyptus bough hanging in from the top right edge,
   behind the heading's ribbon, and a bank of fern rising from the bottom left edge over the foot of
   the last print. */
.nci--fern .frn-gal-euc {
  z-index: 0;
  top: -4cqw;
  right: -10cqw;
  width: 60cqw;
}

.nci--fern .frn-gal-fern {
  z-index: 4;
  left: -12cqw;
  bottom: -14cqw;
  width: 56cqw;
}

.nci--fern .frn-pile {
  position: relative;
  margin-top: 10cqw;
}

.nci--fern .frn-pile-a,
.nci--fern .frn-pile-b,
.nci--fern .frn-pile-c,
.nci--fern .frn-pile-pr {
  position: relative;
}

.nci--fern .frn-pile-a {
  width: 54cqw;
  margin-left: 6cqw;
}

.nci--fern .frn-print--veil {
  transform: rotate(-3deg);
}

.nci--fern .frn-pile-euc-a {
  z-index: 3;
  top: -15cqw;
  left: -14cqw;
  width: 48cqw;
}

/* The second print is laid over the foot of the first, well clear of the faces in it, and its
   caption is set beside its own foot, in the space the first print leaves. */
.nci--fern .frn-pile-b {
  z-index: 3;
  width: 46cqw;
  margin: -36cqw 5cqw 0 auto;
}

.nci--fern .frn-print--petals {
  transform: rotate(3deg);
}

.nci--fern .frn-pile-fern-b {
  z-index: 4;
  right: -16cqw;
  bottom: -14cqw;
  width: 46cqw;
}

.nci--fern .frn-pile-c {
  width: 80cqw;
  margin: 16cqw auto 0;
}

.nci--fern .frn-print--turn {
  transform: rotate(-1.2deg);
}

.nci--fern .frn-print--turn .frn-print-img {
  aspect-ratio: 5 / 4;
}

.nci--fern .frn-pile-euc-c {
  z-index: 3;
  top: -16cqw;
  left: -16cqw;
  width: 50cqw;
}

.nci--fern .frn-cap {
  position: relative;
  z-index: 2;
  margin-top: 3.4cqw;
  font-family: var(--frn-serif);
  font-size: 3.6cqw;
  font-style: italic;
  line-height: 1.45;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-cap {
  font-size: 3.1cqw;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.nci--fern .frn-cap--a {
  width: 36cqw;
  padding-left: 2cqw;
}

.nci--fern .frn-cap--b {
  position: absolute;
  right: calc(100% + 4cqw);
  bottom: 1cqw;
  width: 36cqw;
  margin: 0;
  text-align: right;
}

.nci--fern .frn-cap--c {
  margin-top: 4cqw;
  text-align: center;
}

/* ───── countdown ───── */

.nci--fern .frn-cdw {
  position: relative;
  padding: 14cqw 0 6cqw;
}

/* The painted sky across the head of the screen, with the heading's ribbon and the ring print laid on
   it. */
.nci--fern .frn-cd-sky {
  z-index: 0;
  top: 2cqw;
  left: -10cqw;
  width: 120cqw;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}


.nci--fern .frn-ring {
  position: relative;
  width: 66cqw;
  margin: 10cqw auto 0;
}

.nci--fern .frn-print--ring {
  transform: rotate(1.8deg);
}

.nci--fern .frn-print--ring .frn-print-img {
  aspect-ratio: 1 / 1;
}

.nci--fern .frn-ring-euc {
  z-index: 3;
  top: -16cqw;
  left: -26cqw;
  width: 56cqw;
}

.nci--fern .frn-cd-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 28cqw minmax(0, 1fr);
  align-items: center;
  gap: 4cqw;
  margin: 9cqw var(--frn-g) 0;
}

.nci--fern .frn-cd-rings {
  position: relative;
  width: 100%;
  transform: rotate(-8deg);
}

.nci--fern .frn-cd {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 1cqw;
}

.nci--fern .frn-cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nci--fern .frn-cd-cell--d {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 2cqw;
  padding-bottom: 2cqw;
  border-bottom: 1px solid var(--frn-hair);
}

.nci--fern .frn-cd-n {
  font-family: var(--frn-serif);
  font-size: 7cqw;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.1;
  color: var(--frn-gold-ink);
}

.nci--fern .frn-cd-cell--d .frn-cd-n {
  font-size: 17cqw;
  font-weight: 500;
  line-height: 1;
}

.nci--fern .frn-cd-u {
  font-family: var(--frn-caps);
  font-size: max(10px, 2.6cqw);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--frn-mute);
}

.nci--fern.nci--lang-zh .frn-cd-u {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3cqw;
}

.nci--fern .frn-cd-cell--d .frn-cd-u {
  font-size: 3cqw;
}

.nci--fern .frn-cd-done {
  text-align: center;
  font-family: var(--frn-script);
  font-size: 9cqw;
  color: var(--frn-gold-ink);
}

.nci--fern .frn-dateline {
  font-variant-numeric: lining-nums;
  position: relative;
  z-index: 2;
  margin: 7cqw var(--frn-g) 0;
  text-align: center;
  font-size: 3.7cqw;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-dateline {
  font-size: 3.3cqw;
  letter-spacing: 0.08em;
}

/* ───── the day — painted objects clipped into the margin as little prints ───── */

.nci--fern .frn-day {
  position: relative;
  padding: 14cqw 0 8cqw;
}

.nci--fern .frn-day-fern {
  left: -14cqw;
  bottom: -16cqw;
  width: 58cqw;
}

.nci--fern .frn-list {
  position: relative;
  z-index: 2;
  margin: 7cqw var(--frn-g) 0 5cqw;
  padding: 0;
  list-style: none;
}

.nci--fern .frn-row {
  display: grid;
  grid-template-columns: 30cqw minmax(0, 1fr);
  align-items: center;
  gap: 6cqw;
  padding: 3.4cqw 0;
}

/* The object on a print of its own: the white border and the soft shadow of the photographs, turned a
   few degrees one way and then the other down the list. */
.nci--fern .frn-row-art {
  position: relative;
  display: block;
  height: 30cqw;
  background: var(--frn-print);
  box-shadow: var(--frn-shadow);
  transform: rotate(-3deg);
}

.nci--fern .frn-row:nth-child(even) .frn-row-art {
  transform: rotate(2.4deg);
}

.nci--fern .frn-row-img {
  position: absolute;
  inset: 2.4cqw;
  width: calc(100% - 4.8cqw);
  height: calc(100% - 4.8cqw);
  object-fit: contain;
}

.nci--fern .frn-row--rings .frn-row-img,
.nci--fern .frn-row--dinner-plate .frn-row-img {
  inset: 5cqw 2.4cqw;
  width: calc(100% - 4.8cqw);
  height: calc(100% - 10cqw);
}

.nci--fern .frn-row-text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.nci--fern .frn-row-top {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
}

.nci--fern .frn-row-at {
  font-size: 5.6cqw;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--frn-gold-ink);
}

.nci--fern .frn-row-t {
  margin-top: 1cqw;
  text-align: left;
  font-size: 4.2cqw;
  font-weight: 500;
  line-height: 1.4;
  color: var(--frn-ink);
}

.nci--fern.nci--lang-zh .frn-row-t {
  font-size: 3.7cqw;
  letter-spacing: 0.06em;
}

.nci--fern .frn-row-n {
  margin-top: 0.8cqw;
  text-align: left;
  font-size: 3.4cqw;
  font-style: italic;
  line-height: 1.45;
  color: var(--frn-mute);
}

.nci--fern.nci--lang-zh .frn-row-n {
  font-size: 3cqw;
  font-style: normal;
  letter-spacing: 0.04em;
}

/* ───── the place ───── */

.nci--fern .frn-venue {
  position: relative;
  padding: 14cqw 0 6cqw;
}

.nci--fern .frn-hills {
  position: relative;
  width: 114cqw;
  margin: 3cqw 0 0 -7cqw;
}

.nci--fern .frn-place {
  position: relative;
  z-index: 2;
  margin-top: 1cqw;
  padding: 0 var(--frn-g);
  text-align: center;
}

.nci--fern .frn-place-name {
  font-size: 6.6cqw;
  font-weight: 500;
  line-height: 1.3;
  color: var(--frn-ink);
}

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

.nci--fern .frn-place-addr {
  font-variant-numeric: lining-nums;
  margin-top: 2cqw;
  font-size: 3.7cqw;
  line-height: 1.6;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-place-addr {
  font-size: 3.3cqw;
  letter-spacing: 0.04em;
}

.nci--fern .frn-place-city {
  margin-top: 1.6cqw;
  font-family: var(--frn-caps);
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--frn-gold-ink);
}

.nci--fern.nci--lang-zh .frn-place-city {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3cqw;
}

.nci--fern .frn-mapwrap {
  position: relative;
  z-index: 2;
  margin: 8cqw 10cqw 0;
  padding: 2cqw;
  background: var(--frn-print);
  box-shadow: var(--frn-shadow);
  transform: rotate(-1deg);
}

/* The map is sage paper seen from above: two washes of field, a stream, the road the pin sits on. */
.nci--fern .nci-map {
  height: 40cqw;
  overflow: hidden;
  background:
    radial-gradient(34cqw 16cqw at 18% 22%, rgba(125, 150, 104, 0.3) 0%, transparent 70%),
    radial-gradient(30cqw 18cqw at 84% 78%, rgba(125, 150, 104, 0.26) 0%, transparent 72%),
    radial-gradient(26cqw 10cqw at 70% 16%, rgba(196, 172, 118, 0.2) 0%, transparent 70%),
    linear-gradient(162deg, transparent 58%, rgba(132, 162, 170, 0.28) 58.5%, rgba(132, 162, 170, 0.28) 61%, transparent 61.5%),
    linear-gradient(180deg, #ece6d4 0%, #e6e1cd 100%);
}

.nci--fern .nci-map-road {
  top: 52%;
  height: 2.6cqw;
  transform: rotate(-6deg);
  background: rgba(252, 249, 240, 0.9);
  border-top: 1px solid rgba(124, 92, 34, 0.22);
  border-bottom: 1px solid rgba(124, 92, 34, 0.22);
}

.nci--fern .nci-map-pin {
  top: 40%;
  left: 47%;
  width: 4.4cqw;
  height: 4.4cqw;
  background: var(--frn-fern);
  box-shadow: 0 0 0 1.8cqw rgba(63, 90, 60, 0.16);
}

.nci--fern .frn-maps {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8cqw;
  margin-top: 6cqw;
}

.nci--fern .frn-note {
  position: relative;
  z-index: 2;
  margin: 7cqw var(--frn-g) 0;
  text-align: center;
  font-size: 3.8cqw;
  font-style: italic;
  line-height: 1.75;
  white-space: pre-line;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-note {
  font-size: 3.3cqw;
  font-style: normal;
  line-height: 1.95;
  letter-spacing: 0.05em;
}

.nci--fern .frn-travel {
  position: relative;
  z-index: 2;
  margin: 8cqw var(--frn-g) 0;
}

.nci--fern .frn-travel-row {
  display: grid;
  grid-template-columns: 22cqw minmax(0, 1fr);
  gap: 3cqw;
  padding: 3.6cqw 0;
  border-top: 1px solid var(--frn-hair-2);
}

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

.nci--fern .frn-travel-k {
  padding-top: 0.6cqw;
  font-family: var(--frn-caps);
  font-size: 2.7cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--frn-gold-ink);
}

.nci--fern.nci--lang-zh .frn-travel-k {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3.1cqw;
  letter-spacing: 0.2em;
}

.nci--fern .frn-travel-v {
  font-variant-numeric: lining-nums;
  font-size: 3.6cqw;
  line-height: 1.6;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-travel-v {
  font-size: 3.2cqw;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* ───── what to wear, and the postscript ───── */

.nci--fern .frn-attire {
  position: relative;
  padding: 14cqw 0 6cqw;
}

.nci--fern .frn-attire-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 40cqw minmax(0, 1fr);
  align-items: center;
  gap: 5cqw;
  margin: 8cqw var(--frn-g) 0 4cqw;
}

.nci--fern .frn-attire-img {
  position: relative;
  width: 100%;
}

.nci--fern .frn-attire-lead {
  font-size: 4cqw;
  font-weight: 500;
  line-height: 1.6;
  color: var(--frn-ink);
}

.nci--fern.nci--lang-zh .frn-attire-lead {
  font-size: 3.5cqw;
  line-height: 1.85;
  letter-spacing: 0.04em;
}

.nci--fern .frn-swatches {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.4cqw 2cqw;
  margin: 5cqw 0 0;
}

.nci--fern .frn-swatch {
  display: flex;
  align-items: center;
  gap: 2cqw;
  min-width: 0;
}

/* A dot of the colour with the paper's light on it, so it reads as a swatch of pigment, not a UI pip.
   The colour is the couple's, handed over by NC.inv.Swatch as --sw. */
.nci--fern .frn-swatch-dot {
  flex: none;
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background-color: var(--sw);
  background-image: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--sw) 66%, #fff) 0%, var(--sw) 55%);
  box-shadow: inset 0 0 0 1px rgba(46, 66, 48, 0.14);
}

.nci--fern .frn-swatch-n {
  min-width: 0;
  font-size: 3.4cqw;
  line-height: 1.3;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-swatch-n {
  font-size: 3.1cqw;
}

.nci--fern .frn-attire-note {
  margin-top: 5cqw;
  font-size: 3.5cqw;
  font-style: italic;
  line-height: 1.6;
  color: var(--frn-mute);
}

.nci--fern.nci--lang-zh .frn-attire-note {
  font-size: 3.1cqw;
  font-style: normal;
  line-height: 1.8;
}

.nci--fern .frn-ps {
  position: relative;
  z-index: 2;
  margin: 12cqw var(--frn-g) 0;
}

.nci--fern .frn-ps-h {
  margin: 0 0 2cqw;
  font-family: var(--frn-script);
  font-size: 10cqw;
  font-weight: 400;
  line-height: 1.2;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-ps-h {
  font-family: var(--frn-script-zh);
  font-size: 8cqw;
}

.nci--fern .frn-ps-item {
  padding: 4cqw 0;
  border-top: 1px solid var(--frn-hair-2);
}

.nci--fern .frn-ps-item:last-child {
  border-bottom: 1px solid var(--frn-hair-2);
}

.nci--fern .frn-ps-q {
  font-size: 4.1cqw;
  font-weight: 600;
  line-height: 1.5;
  color: var(--frn-ink);
}

.nci--fern.nci--lang-zh .frn-ps-q {
  font-size: 3.6cqw;
  letter-spacing: 0.04em;
}

.nci--fern .frn-ps-a {
  margin-top: 1.4cqw;
  font-size: 3.7cqw;
  line-height: 1.6;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-ps-a {
  font-size: 3.2cqw;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

/* ───── the reply card ───── */

.nci--fern .frn-reply {
  position: relative;
  padding: 16cqw 0 8cqw;
}

.nci--fern .frn-by {
  position: relative;
  z-index: 2;
  margin: 5cqw var(--frn-g) 0;
  text-align: center;
  font-family: var(--frn-caps);
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--frn-gold-ink);
}

.nci--fern.nci--lang-zh .frn-by {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3.3cqw;
  letter-spacing: 0.12em;
}

.nci--fern .frn-reply .frn-lede {
  margin-top: 2cqw;
}

.nci--fern .frn-card {
  position: relative;
  margin: 11cqw 6cqw 0;
  padding: 15cqw 8cqw 12cqw;
  background: var(--frn-card);
  box-shadow: var(--frn-shadow), 0 0 0 1px rgba(56, 48, 30, 0.05);
}

/* The card's two plants reach in from the page's own edges and take a real share of the screen,
   crossing only the card's margin, never its fields. */
.nci--fern .frn-card-euc {
  z-index: 3;
  top: -16cqw;
  right: -14cqw;
  width: 50cqw;
}

.nci--fern .frn-card-fern {
  z-index: 3;
  bottom: -16cqw;
  left: -14cqw;
  width: 50cqw;
}

.nci--fern .frn-form {
  position: relative;
  z-index: 2;
}

.nci--fern .frn-field {
  display: flex;
  flex-direction: column;
  gap: 1cqw;
  margin-bottom: 5cqw;
}

.nci--fern .frn-field--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.nci--fern .frn-label {
  font-size: 3.7cqw;
  font-style: italic;
  line-height: 1.4;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-label {
  font-size: 3.2cqw;
  font-style: normal;
  letter-spacing: 0.06em;
}

.nci--fern .frn-input {
  width: 100%;
  min-width: 0;
  padding: 1.6cqw 0;
  border: none;
  border-bottom: 1px solid rgba(46, 66, 48, 0.36);
  border-radius: 0;
  background: transparent;
  font-family: var(--frn-serif);
  font-size: 4.4cqw;
  font-weight: 500;
  color: var(--frn-ink);
  outline: none;
  appearance: none;
}

.nci--fern .frn-input:focus {
  border-bottom-color: var(--frn-fern);
  background: rgba(163, 177, 141, 0.12);
}

.nci--fern .frn-field.is-bad .frn-input {
  border-bottom-color: var(--frn-rose-ink);
}

.nci--fern .frn-err {
  font-size: max(12px, 3.3cqw);
  font-style: normal;
  color: var(--frn-rose-ink);
}

.nci--fern .frn-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3cqw;
  margin: 2cqw 0 6cqw;
}

.nci--fern .frn-choice-btn {
  padding: 3cqw 2cqw;
  border: 1px solid var(--frn-sage-d);
  border-radius: 999px;
  background: transparent;
  font-family: var(--frn-serif);
  font-size: 3.9cqw;
  font-weight: 600;
  line-height: 1.3;
  color: var(--frn-ink);
  transition: background-color 160ms, color 160ms;
}

.nci--fern.nci--lang-zh .frn-choice-btn {
  font-size: 3.4cqw;
  letter-spacing: 0.08em;
}

.nci--fern .frn-choice-btn[aria-pressed='true'] {
  border-color: var(--frn-fern);
  background: var(--frn-fern);
  color: #f6f1e4;
}

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

.nci--fern .frn-step button {
  width: 8cqw;
  height: 8cqw;
  padding: 0;
  border: 1px solid var(--frn-sage-d);
  border-radius: 50%;
  background: transparent;
  font-family: var(--frn-serif);
  font-size: 4.6cqw;
  line-height: 1;
  color: var(--frn-ink);
}

.nci--fern.nci--view .frn-step button:disabled {
  opacity: 0.4;
}

.nci--fern .frn-step span {
  min-width: 5cqw;
  text-align: center;
  font-size: 5cqw;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--frn-ink);
}

.nci--fern .frn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2cqw;
  margin-top: 1.4cqw;
}

.nci--fern .frn-tag {
  padding: 1.6cqw 3.4cqw;
  border: 1px solid var(--frn-hair);
  border-radius: 999px;
  background: rgba(253, 251, 245, 0.6);
  font-family: var(--frn-serif);
  font-size: 3.4cqw;
  font-weight: 500;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-tag {
  font-size: 3cqw;
}

.nci--fern .frn-tag[aria-pressed='true'] {
  border-color: var(--frn-fern);
  background: var(--frn-sage-2);
  color: var(--frn-ink);
}

.nci--fern.nci--view .frn-tag:disabled,
.nci--fern.nci--view .frn-choice-btn:disabled {
  opacity: 0.45;
}

.nci--fern .frn-submit {
  width: 100%;
  margin-top: 3cqw;
  padding: 3.8cqw 2cqw;
  border: none;
  border-radius: 999px;
  background: var(--frn-fern);
  font-family: var(--frn-caps);
  font-size: 3cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #f6f1e4;
}

.nci--fern.nci--lang-zh .frn-submit {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3.5cqw;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}

.nci--fern .frn-thanks {
  position: relative;
  z-index: 2;
  text-align: center;
}

.nci--fern .frn-thanks-img {
  position: relative;
  width: 36cqw;
  margin: -4cqw auto 0;
}

.nci--fern .frn-thanks-t {
  margin-top: 3cqw;
  font-family: var(--frn-script);
  font-size: 10cqw;
  line-height: 1.2;
}

.nci--fern.nci--lang-zh .frn-thanks-t {
  font-family: var(--frn-script-zh);
  font-size: 8.4cqw;
}

.nci--fern .frn-thanks-b {
  margin-top: 3cqw;
  font-size: 3.9cqw;
  font-style: italic;
  line-height: 1.65;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-thanks-b {
  font-size: 3.4cqw;
  font-style: normal;
  letter-spacing: 0.05em;
}

.nci--fern .frn-req {
  margin-left: 0.3em;
  font-style: normal;
  color: var(--frn-rose-ink);
}

.nci--fern .frn-choice + .frn-err {
  margin: -4cqw 0 5cqw;
}

.nci--fern .frn-err--server {
  margin-bottom: 2cqw;
}

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

.nci--fern .frn-done-when {
  margin-top: 2cqw;
  font-size: 3cqw;
  font-style: italic;
  color: var(--frn-mute);
}

.nci--fern .frn-thanks-edit {
  margin-top: 6cqw;
  padding: 0 0 1cqw;
  border: none;
  border-bottom: 1px solid rgba(124, 92, 34, 0.55);
  background: none;
  font-family: var(--frn-caps);
  font-size: 2.7cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--frn-gold-ink);
}

.nci--fern.nci--lang-zh .frn-thanks-edit {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3.1cqw;
}

/* ───── notes in the margin ───── */

.nci--fern .frn-margin {
  position: relative;
  padding: 16cqw 0 2cqw;
}

.nci--fern .frn-wishform {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3cqw;
  margin: 8cqw var(--frn-g) 0;
}

.nci--fern .frn-wish-in {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  padding: 2.4cqw 0;
  border: none;
  border-bottom: 1px solid rgba(46, 66, 48, 0.32);
  border-radius: 0;
  background: transparent;
  font-family: var(--frn-serif);
  font-size: 4.2cqw;
  font-weight: 500;
  color: var(--frn-ink);
  outline: none;
  appearance: none;
}

.nci--fern .frn-wish-in::placeholder {
  font-style: italic;
  color: var(--frn-mute);
}

.nci--fern.nci--lang-zh .frn-wish-in::placeholder,
.nci--fern.nci--lang-zh .frn-wish-empty {
  font-style: normal;
}

.nci--fern .frn-wish-in:focus {
  border-bottom-color: var(--frn-fern);
}

.nci--fern .frn-wish-in--name {
  grid-column: 1;
}

.nci--fern .frn-wish-err {
  grid-column: 1 / -1;
}

.nci--fern .frn-wish-post {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: 2.2cqw 5.6cqw;
  border: 1px solid var(--frn-fern);
  border-radius: 999px;
  background: var(--frn-fern);
  font-family: var(--frn-caps);
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #f6f1e4;
}

.nci--fern.nci--lang-zh .frn-wish-post {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3.2cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.nci--fern .frn-wish-post:disabled {
  opacity: 0.55;
}

.nci--fern .frn-wishes {
  position: relative;
  z-index: 2;
  margin: 8cqw var(--frn-g) 0;
}

.nci--fern .frn-wish {
  padding: 4.4cqw 0;
  border-top: 1px solid var(--frn-hair-2);
}

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

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

.nci--fern.nci--lang-zh .frn-wish-text {
  font-size: 3.5cqw;
  font-style: normal;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.nci--fern .frn-wish-from {
  margin-top: 1.6cqw;
  text-align: right;
  font-family: var(--frn-caps);
  font-size: max(10px, 2.6cqw);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--frn-gold-ink);
}

.nci--fern .frn-wish-from::before {
  content: '— ';
}

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

/* ───── the last print and the seal ───── */

.nci--fern .frn-end {
  position: relative;
  padding: 16cqw 0 6cqw;
  text-align: center;
}

.nci--fern .frn-end-fern {
  left: -12cqw;
  bottom: -110px;
  width: 54cqw;
}

.nci--fern .frn-end-fern2 {
  right: -12cqw;
  bottom: -110px;
  width: 54cqw;
}

.nci--fern .frn-end-line {
  position: relative;
  z-index: 2;
  margin: 2cqw var(--frn-g) 0;
  font-family: var(--frn-script);
  font-size: 8.4cqw;
  line-height: 1.3;
  white-space: pre-line;
  color: var(--frn-ink-2);
}

.nci--fern.nci--lang-zh .frn-end-line {
  font-family: var(--frn-script-zh);
  font-size: 7cqw;
  line-height: 1.5;
}

/* The seal: the last print tucked inside the olive wreath, turned a little, the leaves laid over its
   corners and the ribbon across its foot; the initials are signed under it in gold. */
.nci--fern .frn-seal {
  position: relative;
  z-index: 2;
  width: 88cqw;
  margin: 6cqw auto 0;
}

.nci--fern .frn-seal .frn-print--toast {
  position: absolute;
  z-index: 1;
  top: 17%;
  left: 27%;
  width: 46%;
  padding: 1.6cqw;
  transform: rotate(-2.4deg);
}

.nci--fern .frn-print--toast .frn-print-img {
  aspect-ratio: 1 / 1;
}

.nci--fern .frn-seal-img {
  position: relative;
  z-index: 2;
  width: 100%;
}

.nci--fern .frn-seal-mono {
  position: relative;
  z-index: 2;
  margin-top: 2cqw;
  text-align: center;
  font-family: var(--frn-script);
  font-size: 13cqw;
  line-height: 1.1;
  white-space: nowrap;
}

.nci--fern.nci--lang-zh .frn-seal-mono {
  font-family: var(--frn-script-zh);
  font-size: 11cqw;
}

.nci--fern .frn-seal-mono i {
  margin: 0 0.42em 0 0.1em;
  font-family: 'Great Vibes', cursive;
  font-size: 0.66em;
  font-style: normal;
}

.nci--fern .frn-seal-date {
  position: absolute;
  z-index: 3;
  left: 28%;
  right: 28%;
  top: 76%;
  text-align: center;
  font-family: var(--frn-serif);
  font-size: 3.4cqw;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--frn-ink);
}

/* ───── Guest cover overlay ─────
   The page's first screen again, so nothing moves when the letter opens: paper, the eucalyptus over
   the print's sky, the fern at the foot, the names in gold below the print. The print is the one
   thing in the column allowed to shrink, so the ribbon always lands inside a short phone, and a tall
   frame shares its spare height above and below rather than opening a hole under the print. */

.nci-cover--fern {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: var(--frn-paper);
  color: var(--frn-ink);
  font-family: var(--frn-serif);
}

.nci-cover--fern .frn-ov-paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--frn-paper) url(assets/watercolor/watercolor-paper.webp) 0 0 / 78cqw auto repeat;
}

.nci-cover--fern .frn-ov-euc {
  z-index: 3;
  top: -3cqw;
  right: -10cqw;
  width: 66cqw;
}

.nci-cover--fern .frn-ov-fern {
  left: -12cqw;
  bottom: -12cqw;
  width: 58cqw;
}

.nci-cover--fern .frn-ov-kicker {
  position: relative;
  z-index: 2;
  flex: none;
  align-self: flex-start;
  margin-top: 13cqw;
  padding: 0 9cqw;
  font-family: var(--frn-caps);
  font-size: 2.7cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--frn-gold-ink);
}

.nci-cover--fern.frn-lang-zh .frn-ov-kicker {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3.2cqw;
  letter-spacing: 0.4em;
}

.nci-cover--fern .frn-ov-printbox {
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 5cqw;
}

.nci-cover--fern .frn-ov-print {
  height: 100%;
  max-height: 106.5cqw;
  max-width: 82cqw;
  aspect-ratio: 78 / 97.5;
  padding: 2cqw;
  background: var(--frn-print);
  box-shadow: var(--frn-shadow);
  transform: rotate(-1.6deg);
}

/* The photo's own clip inside the print, so a zoomed photo never runs over the white border. */
.nci-cover--fern .frn-ov-img {
  height: 100%;
  overflow: hidden;
}

.nci-cover--fern .frn-ov-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.nci-cover--fern .frn-ov-names {
  position: relative;
  z-index: 2;
  flex: none;
  margin-top: 6cqw;
  padding: 0 6cqw;
  text-align: center;
  font-family: var(--frn-script);
  font-size: 12.4cqw;
  line-height: 1.16;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.nci-cover--fern.frn-lang-zh .frn-ov-names {
  font-family: var(--frn-script-zh);
  font-size: 11.6cqw;
  letter-spacing: 0.06em;
}

.nci-cover--fern .frn-ov-names i {
  margin: 0 0.36em 0 0.3em;
  font-family: 'Great Vibes', cursive;
  font-size: 0.82em;
  font-style: normal;
  letter-spacing: 0;
}

.nci-cover--fern .frn-ov-date {
  position: relative;
  z-index: 2;
  flex: none;
  margin-top: 1.4cqw;
  font-family: var(--frn-serif);
  font-size: 4cqw;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.12em;
  color: var(--frn-ink-2);
}

/* The way in is a ribbon with the words on it. */
.nci-cover--fern .frn-ov-open {
  position: relative;
  z-index: 2;
  flex: none;
  width: 66cqw;
  margin-top: 3cqw;
  padding: 0;
  border: none;
  background: none;
  transition: transform 260ms var(--nci-ease);
}

.nci-cover--fern .frn-ov-open:hover {
  transform: translateY(-0.8cqw);
}

.nci-cover--fern .frn-ov-open:focus-visible {
  outline: 2px solid var(--frn-fern);
  outline-offset: 4px;
  border-radius: 4px;
}

.nci-cover--fern .frn-ov-open-t {
  position: absolute;
  left: 19%;
  right: 19%;
  top: 18%;
  height: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--frn-caps);
  font-size: 2.7cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  white-space: nowrap;
  color: var(--frn-ink);
}

.nci-cover--fern.frn-lang-zh .frn-ov-open-t {
  font-family: 'Noto Serif SC', var(--frn-serif);
  font-size: 3.6cqw;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.nci-cover--fern .frn-ov-hint {
  position: relative;
  z-index: 2;
  flex: none;
  margin: 1cqw 0 8cqw;
  font-size: 3.3cqw;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--frn-mute);
}

.nci-cover--fern.frn-lang-zh .frn-ov-hint {
  font-size: 3cqw;
  font-style: normal;
  letter-spacing: 0.2em;
}

.nci-cover--fern.frn-cv--opening {
  animation: frn-open 640ms var(--nci-ease) forwards;
}

.nci-cover--fern.frn-cv--opening .frn-ov-open {
  animation: frn-lift 640ms var(--nci-ease) forwards;
}

@keyframes frn-open {
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes frn-lift {
  to {
    transform: translateY(-4cqw) scale(1.04);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--fern.frn-cv--opening,
  .nci-cover--fern.frn-cv--opening .frn-ov-open {
    animation: none;
  }

  .nci-cover--fern .frn-ov-open {
    transition: none;
  }
}

/* ───── Floating bar — two quiet pills in the foot of the right margin ───── */

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

.nci-float--fern button {
  padding: 9px 14px;
  border-radius: 999px;
  font-family: 'Cinzel', 'Noto Serif SC', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  box-shadow: 0 3px 12px rgba(46, 66, 48, 0.18);
}

.nci-float--fern .nci-float-music,
.nci-float--fern .studio-music button {
  border: 1px solid rgba(46, 66, 48, 0.28);
  background: rgba(246, 241, 228, 0.94);
  color: #2e4230;
  backdrop-filter: blur(6px);
}

.nci-float--fern .studio-music button {
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.nci-float--fern .nci-float-share {
  background: rgba(63, 90, 60, 0.94);
  color: #f6f1e4;
}