/* Nicecard demo — "Quiet Oak" (橡木厅) invitation style. Everything is scoped under .nci--oak,
   .nci-cover--oak and .nci-float--oak so the other styles are untouched; new classes use the oke-
   prefix. The page is a size container, so every measurement is in cqw and the layout keeps its
   proportions in the 372px phone frame, the 390px editor canvas and a 390px phone.
   The material is a warm amber ivory paper with a faint deckle down both edges, drawn in CSS rather
   than loaded as an image: two tiling SVG edges, a laid grain at 1px, and two blooms of candlelight
   warmth. The ink is walnut brown, one oxblood carries every accent, and brass rules everything else.
   Two oxbloods and two brasses are kept apart on purpose: --oke-blood and --oke-brass are the ornament
   colours (the flame, the rules, the holder), --oke-blood-ink and --oke-brass-ink the darker ones
   small text is allowed to use. Every colour that carries a word clears 4.5:1 on the paper:
   --oke-ink 11.6:1, --oke-ink-2 6.7:1, --oke-mute 5.0:1, --oke-blood-ink 8.3:1, --oke-brass-ink 6.7:1,
   --oke-blood 6.5:1 and --oke-brass 4.8:1. --oke-amber and the waxes are decorative only and never
   carry text. The smallest type on the page is 2.7cqw (10.5px at 390) wherever it carries
   information; only the colophon is set below that.
   There is no sans face anywhere: EB Garamond sets the display and the body with its real italics, and
   Libre Baskerville sets the small caps and every figure, because the display face's numerals are
   old-style and a lone 1 in it reads as a small-caps I rather than a number. Type is large and the
   leading is long — this page is a book, not a poster, and the silences between its blocks are part
   of it. */

.nci--oak,
.nci-cover--oak,
.nci-float--oak {
  --oke-paper: #f6eddc;
  --oke-paper-2: #efe3cd;
  --oke-paper-3: #e4d5ba;
  --oke-ink: #3f2a1b;
  --oke-ink-2: #6b4c34;
  /* The quiet brown carries real text — every caption, the gloss, the room lines under the contents
     and the empty state — so it is set past 4.5:1 on the paper rather than tuned by eye. */
  --oke-mute: #7d5f45;
  --oke-blood: #8d3a2b;
  --oke-blood-ink: #7a2a1c;
  --oke-brass: #8a6035;
  --oke-brass-ink: #6f4a24;
  --oke-hair: rgba(63, 42, 27, 0.22);
  --oke-hair-2: rgba(63, 42, 27, 0.1);
  --oke-dark: #241811;
  --oke-amber: #f2c86e;
  --oke-wax: #f8f0dc;
  --oke-g: 11cqw;
  --oke-disp: 'EB Garamond', 'Noto Serif SC', Georgia, serif;
  --oke-caps: 'Libre Baskerville', 'Noto Serif SC', Georgia, serif;
}

.nci--oak {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--oke-paper);
  color: var(--oke-ink);
  font-family: var(--oke-disp);
  --nci-bg: var(--oke-paper);
  --nci-soft: var(--oke-paper-2);
  --nci-slot-line: rgba(111, 74, 36, 0.45);
  --nci-slot-ink: var(--oke-ink-2);
  --nci-hint: rgba(111, 74, 36, 0.5);
  --nci-sel: #7a2a1c;
}

/* The paper: a laid grain one thread wide, and two blooms of candlelight — one high on the left where
   the sconce would be, one low on the right. Both are kept faint enough to read as warmth in the
   sheet rather than as light drawn on it. Sections paint over this. */
.nci--oak::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(36cqw 26cqw at 12% 6%, rgba(214, 160, 74, 0.09) 0%, transparent 70%),
    radial-gradient(42cqw 30cqw at 92% 63%, rgba(214, 160, 74, 0.07) 0%, transparent 72%),
    repeating-linear-gradient(0deg, rgba(120, 88, 50, 0.026) 0 1px, transparent 1px 7px);
}

/* The deckle: the two ragged edges of a hand-made sheet, tiled down the left and right margins. The
   waves repeat every 48px, which at this width is finer than the eye reads as a pattern. */
.nci--oak::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='48'%3E%3Cpath d='M7 0C3 6 6 12 4 18 2 24 7 30 5 36 3 42 6 46 7 48' fill='none' stroke='%233f2a1b' stroke-opacity='.2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='48'%3E%3Cpath d='M1 0C5 6 2 12 4 18 6 24 1 30 3 36 5 42 2 46 1 48' fill='none' stroke='%233f2a1b' stroke-opacity='.2'/%3E%3C/svg%3E");
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: 8px 48px, 8px 48px;
}

/* 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 plate below it. */
.nci--oak .nci-section {
  display: flow-root;
  padding: 0;
}

.nci--oak .nci-s-story,
.nci--oak .nci-s-gallery,
.nci--oak .nci-s-venue,
.nci--oak .nci-s-schedule,
.nci--oak .nci-s-countdown,
.nci--oak .nci-s-faq,
.nci--oak .nci-s-rsvp {
  padding: 0 0 17cqw;
}

.nci--oak .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--oak .oke-rule,
.nci--oak .oke-flame,
.nci--oak .oke-leader,
.nci--oak .oke-halo,
.nci--oak .oke-wax,
.nci--oak .oke-lit,
.nci--oak .oke-holder,
.nci--oak .oke-vig::after {
  pointer-events: none;
}

/* ───── the ornament: a flame on a hairline ───── */

.nci--oak .oke-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  margin: 0 var(--oke-g);
}

.nci--oak .oke-rule-hair {
  flex: 1;
  height: 1px;
  background: var(--oke-brass);
  opacity: 0.5;
}

.nci--oak .oke-flame {
  display: block;
  width: 3.4cqw;
}

.nci--oak .oke-fl-a {
  fill: var(--oke-blood);
}

.nci--oak .oke-fl-b {
  fill: var(--oke-amber);
}

/* ───── how every block opens ───── */

.nci--oak .oke-head {
  padding-top: 13cqw;
  text-align: center;
}

.nci--oak .oke-caps {
  padding: 5cqw var(--oke-g) 0;
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  line-height: 1.7;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

.nci--oak .oke-title {
  padding: 3cqw calc(var(--oke-g) - 2cqw) 0;
  font-family: var(--oke-disp);
  font-size: 7cqw;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--oke-ink);
}

.nci--oak.nci--lang-zh .oke-title {
  font-size: 6cqw;
  font-style: normal;
  letter-spacing: 0.06em;
}

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

.nci--oak .oke-say {
  padding: 5.4cqw calc(var(--oke-g) + 1cqw) 0;
  text-align: center;
  font-size: 3.5cqw;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--oke-ink-2);
}

.nci--oak .oke-foot {
  padding: 8cqw calc(var(--oke-g) + 1cqw) 0;
  text-align: center;
  font-size: 3.1cqw;
  line-height: 2.1;
  letter-spacing: 0.05em;
  white-space: pre-line;
  color: var(--oke-mute);
}

.nci--oak.nci--lang-en .oke-foot {
  font-style: italic;
}

.nci--oak .oke-link {
  display: inline-block;
  padding-bottom: 1cqw;
  border-bottom: 1px solid var(--oke-brass);
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--oke-brass-ink);
}

.nci--oak .oke-linkrow {
  padding: 8cqw var(--oke-g) 0;
  text-align: center;
}

/* ───── plates: photographs dissolved into the paper ───── */

.nci--oak .oke-plate {
  margin: 0;
}

.nci--oak .oke-vig {
  position: relative;
  overflow: hidden;
  background: var(--oke-dark);
}

.nci--oak .oke-vig-img {
  position: absolute;
  inset: 0;
}

/* The painterly edge: the picture keeps its own contrast in the middle and is washed back into the
   paper all round, so no plate on this page ends in a cut line. Three layers do it — a feather off the
   top and bottom, one off the left and right, and an ellipse that carries the corners the rest of the
   way. Every stop is written as paper at zero alpha rather than `transparent`, because transparent
   interpolates through transparent black and would lay a grey fringe round every photograph. */
.nci--oak .oke-vig::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--oke-paper) 0%, rgba(246, 237, 220, 0) 15%, rgba(246, 237, 220, 0) 85%, var(--oke-paper) 100%),
    linear-gradient(90deg, var(--oke-paper) 0%, rgba(246, 237, 220, 0) 15%, rgba(246, 237, 220, 0) 85%, var(--oke-paper) 100%),
    radial-gradient(ellipse 76% 70% at 50% 46%,
      rgba(246, 237, 220, 0) 0%,
      rgba(246, 237, 220, 0) 56%,
      rgba(246, 237, 220, 0.3) 78%,
      rgba(246, 237, 220, 0.74) 92%,
      rgba(246, 237, 220, 0.96) 100%);
}

/* The small inset plates are feathered less deeply than the full-bleed ones: at the same depth a dark
   photograph this size fades out through a grey ring that reads as a smudge rather than as a dissolve. */
.nci--oak .oke-plate--tall .oke-vig::after,
.nci--oak .oke-plate--near .oke-vig::after,
.nci--oak .oke-plate--gloss .oke-vig::after,
.nci--oak .oke-plate--band .oke-vig::after {
  background:
    linear-gradient(180deg, var(--oke-paper) 0%, rgba(246, 237, 220, 0) 10%, rgba(246, 237, 220, 0) 90%, var(--oke-paper) 100%),
    linear-gradient(90deg, var(--oke-paper) 0%, rgba(246, 237, 220, 0) 10%, rgba(246, 237, 220, 0) 90%, var(--oke-paper) 100%),
    radial-gradient(ellipse 80% 76% at 50% 46%,
      rgba(246, 237, 220, 0) 0%,
      rgba(246, 237, 220, 0) 62%,
      rgba(246, 237, 220, 0.22) 82%,
      rgba(246, 237, 220, 0.66) 94%,
      rgba(246, 237, 220, 0.92) 100%);
}

.nci--oak .oke-cap {
  margin-top: 3.4cqw;
  padding: 0 var(--oke-g);
  text-align: center;
  font-size: 2.8cqw;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--oke-mute);
}

.nci--oak.nci--lang-en .oke-cap {
  font-style: italic;
}

.nci--oak .oke-plate--full {
  margin-top: 11cqw;
}

/* The full and the tall plate are 4:5, a shade squarer than the photographs' 3:4, so the picture
   overhangs its plate and can be moved up or down in the crop tool without zooming first. */
.nci--oak .oke-plate--full .oke-vig {
  aspect-ratio: 4 / 5;
}

.nci--oak .oke-plate--band {
  margin: 10cqw var(--oke-g) 0;
}

.nci--oak .oke-plate--band .oke-vig {
  aspect-ratio: 16 / 10;
}

.nci--oak .oke-plate--wide {
  margin-top: 13cqw;
}

.nci--oak .oke-plate--wide .oke-vig {
  aspect-ratio: 20 / 12;
}

.nci--oak .oke-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 5cqw;
  margin: 13cqw var(--oke-g) 0;
}

.nci--oak .oke-plate--tall .oke-vig {
  aspect-ratio: 4 / 5;
}

.nci--oak .oke-plate--near {
  margin-top: 12cqw;
}

.nci--oak .oke-plate--near .oke-vig {
  aspect-ratio: 1 / 1;
}

/* ───── cover: the frontispiece and the title page ─────
   Nothing is drawn on the photograph — no type, and so no wash to make type legible. */

/* The plate is set to the share of the first screen the cover overlay's photograph takes (its
   flex:1 photo lands on about 53% of a 390x844 phone), so the book opens on the same picture at the
   same size, and the title page's date clears the fold instead of falling under it. */
.nci--oak .oke-frontis {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--oke-dark);
}

.nci--oak .oke-frontis-img {
  position: absolute;
  inset: 0;
}

.nci--oak .oke-titlepage {
  position: relative;
  padding: 12cqw 0 4cqw;
  text-align: center;
}

/* The title page's small caps line is the same one that opens 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--oak .oke-kicker {
  padding-top: 0;
}

.nci--oak .oke-names {
  padding: 4cqw calc(var(--oke-g) - 3cqw) 0;
  font-family: var(--oke-disp);
  font-size: 12.4cqw;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--oke-ink);
  overflow-wrap: anywhere;
}

.nci--oak.nci--lang-zh .oke-names {
  font-size: 11cqw;
  letter-spacing: 0.14em;
}

/* EB Garamond's italic ampersand is the best mark in the family, so it is set large and given room. */
.nci--oak .oke-amp {
  display: block;
  margin: 1.4cqw 0;
  font-size: 6cqw;
  font-style: italic;
  font-weight: 400;
  color: var(--oke-blood-ink);
}

.nci--oak.nci--lang-zh .oke-amp {
  font-size: 4cqw;
  font-style: normal;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.nci--oak .oke-rule--title {
  margin-top: 6cqw;
}

.nci--oak .oke-when {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.4cqw;
  margin-top: 5.4cqw;
  padding: 0 var(--oke-g);
  font-family: var(--oke-caps);
  font-size: 3cqw;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oke-ink);
}

.nci--oak .oke-when-dot {
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: var(--oke-blood);
}

.nci--oak .oke-when-t {
  color: var(--oke-ink-2);
}

.nci--oak .oke-where {
  margin-top: 3.4cqw;
  padding: 0 var(--oke-g);
  font-size: 3.3cqw;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--oke-mute);
}

.nci--oak .oke-lede {
  padding: 7cqw calc(var(--oke-g) + 1cqw) 0;
  font-size: 3.7cqw;
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: var(--oke-ink-2);
}

.nci--oak.nci--lang-en .oke-lede {
  font-style: italic;
}

.nci--oak .oke-folio {
  padding: 8cqw var(--oke-g) 0;
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

/* ───── story: the letter, the drop cap, and the gloss ───── */

/* The letter is written line by line, so the measure holds the couple's own lines without folding
   them. The field is forced to a block in every mode because ::first-letter only applies to a block
   container: hung on the paragraph instead, the cap would vanish the moment the editor turned the
   field into a block of its own. */
.nci--oak .oke-letter {
  padding: 9cqw var(--oke-g) 0;
}

.nci--oak .oke-letter .nci-f {
  display: block;
  font-size: 3.6cqw;
  line-height: 2.1;
  letter-spacing: 0.03em;
  color: var(--oke-ink);
}

.nci--oak .oke-letter .nci-f::first-letter {
  float: left;
  margin: 1.8cqw 2.6cqw 0 0;
  font-family: var(--oke-disp);
  font-size: 17cqw;
  font-style: normal;
  font-weight: 500;
  line-height: 0.74;
  color: var(--oke-blood-ink);
}

.nci--oak.nci--lang-zh .oke-letter .nci-f {
  font-size: 3.5cqw;
  letter-spacing: 0.06em;
}

/* English sets long lines where 中文 sets short ones, so the letter is set a little smaller and the
   cap a little shallower. At the 中文 cap size the two lines running beside it lost enough measure
   that the couple's second hand-set line folded, which is exactly what a letter set line by line
   must not do. */
.nci--oak.nci--lang-en .oke-letter .nci-f {
  font-size: 3.4cqw;
}

.nci--oak.nci--lang-en .oke-letter .nci-f::first-letter {
  margin: 1.4cqw 2.2cqw 0 0;
  font-size: 15cqw;
  line-height: 0.78;
}

.nci--oak.nci--lang-zh .oke-letter .nci-f::first-letter {
  margin: 1cqw 2.2cqw 0 0;
  font-size: 13cqw;
  line-height: 0.86;
}

.nci--oak .oke-sign {
  padding: 5cqw var(--oke-g) 0;
  text-align: right;
  font-size: 3.2cqw;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--oke-blood-ink);
}

.nci--oak.nci--lang-zh .oke-sign {
  font-style: normal;
}

/* The plate and its gloss: a narrower margin than the rest of the page, because two columns at the
   page's own margin leave the note column too thin to set a sentence in. */
.nci--oak .oke-gloss {
  display: grid;
  grid-template-columns: 34cqw minmax(0, 1fr);
  align-items: start;
  gap: 6cqw;
  margin: 13cqw 8cqw 0;
}

.nci--oak .oke-plate--gloss .oke-vig {
  aspect-ratio: 4 / 5;
}

.nci--oak .oke-plate--gloss .oke-cap {
  padding: 0;
  margin-top: 2.6cqw;
  text-align: left;
  font-size: 2.7cqw;
  line-height: 1.7;
}

.nci--oak .oke-note + .oke-note {
  margin-top: 7cqw;
  padding-top: 6cqw;
  border-top: 1px solid var(--oke-hair-2);
}

.nci--oak .oke-note-role {
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

.nci--oak .oke-note-name {
  margin-top: 1.8cqw;
  font-size: 5.4cqw;
  font-style: italic;
  line-height: 1.3;
  color: var(--oke-ink);
  overflow-wrap: anywhere;
}

.nci--oak.nci--lang-zh .oke-note-name {
  font-style: normal;
  letter-spacing: 0.06em;
}

.nci--oak .oke-note-line {
  margin-top: 2.4cqw;
  font-size: 2.9cqw;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--oke-ink-2);
}

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

.nci--oak .oke-verse {
  padding: 6cqw calc(var(--oke-g) + 1cqw) 0;
  text-align: center;
  font-size: 3.4cqw;
  line-height: 2.15;
  letter-spacing: 0.04em;
  white-space: pre-line;
  color: var(--oke-ink);
}

.nci--oak.nci--lang-en .oke-verse {
  font-style: italic;
}

/* ───── venue: the address page ───── */

.nci--oak .oke-place {
  padding: 9cqw var(--oke-g) 0;
  text-align: center;
}

.nci--oak .oke-place-name {
  font-size: 5.6cqw;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--oke-ink);
}

.nci--oak.nci--lang-zh .oke-place-name {
  font-style: normal;
  letter-spacing: 0.08em;
}

.nci--oak .oke-place-addr {
  margin-top: 2.2cqw;
  font-family: var(--oke-caps);
  font-size: 2.8cqw;
  line-height: 1.95;
  letter-spacing: 0.1em;
  color: var(--oke-ink-2);
}

.nci--oak .oke-mapwrap {
  margin: 7cqw var(--oke-g) 0;
  overflow: hidden;
  border: 1px solid var(--oke-hair-2);
}

/* The map is the block seen from above: the parquet of the room, warm where the candles are, the
   street along the foot, and the side door marked where the stairs go up. The parquet is drawn as the
   joints between the boards — hairlines crossing at 45° — rather than as filled diamonds, which at
   this size read as a checked cloth instead of a floor. */
.nci--oak .nci-map {
  height: 32cqw;
  background:
    radial-gradient(24cqw 16cqw at 47% 40%, rgba(242, 200, 110, 0.34) 0%, transparent 72%),
    repeating-linear-gradient(45deg, rgba(111, 74, 36, 0.12) 0 1px, transparent 1px 3.4cqw),
    repeating-linear-gradient(-45deg, rgba(111, 74, 36, 0.09) 0 1px, transparent 1px 3.4cqw),
    linear-gradient(180deg, #e9d9ba 0%, #dfcba6 100%);
}

.nci--oak .nci-map-road {
  top: 76%;
  height: 4.4cqw;
  border-top: 1px solid rgba(111, 74, 36, 0.28);
  border-bottom: 1px solid rgba(111, 74, 36, 0.28);
  background: repeating-linear-gradient(90deg, rgba(111, 74, 36, 0.16) 0 3cqw, transparent 3cqw 8cqw), #f3ead6;
}

.nci--oak .nci-map-pin {
  top: 42%;
  left: 46%;
  width: 3.4cqw;
  height: 3.4cqw;
  background: var(--oke-blood-ink);
  box-shadow: 0 0 0 1.8cqw rgba(141, 58, 43, 0.15);
}

.nci--oak .oke-maps {
  display: flex;
  justify-content: center;
  gap: 7cqw;
  padding: 6cqw var(--oke-g) 0;
}

.nci--oak .oke-aside {
  padding: 8cqw calc(var(--oke-g) + 1cqw) 0;
  text-align: center;
  font-size: 3.2cqw;
  line-height: 2.05;
  letter-spacing: 0.04em;
  white-space: pre-line;
  color: var(--oke-ink-2);
}

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

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

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

.nci--oak .oke-travel-k {
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  line-height: 1.7;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

.nci--oak .oke-travel-v {
  font-size: 2.9cqw;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--oke-ink-2);
}

/* ───── schedule: the contents page ───── */

.nci--oak .oke-contents {
  margin: 10cqw var(--oke-g) 0;
}

.nci--oak .oke-contents-h {
  display: flex;
  justify-content: space-between;
  padding-bottom: 2.8cqw;
  border-bottom: 1px solid var(--oke-brass);
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

.nci--oak .oke-item {
  padding: 4.6cqw 0;
  border-bottom: 1px solid var(--oke-hair-2);
}

.nci--oak .oke-item:last-child {
  border-bottom: 1px solid var(--oke-hair);
}

.nci--oak .oke-item-line {
  display: flex;
  align-items: baseline;
  gap: 2.4cqw;
}

.nci--oak .oke-item-t {
  font-size: 3.6cqw;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--oke-ink);
}

/* The leader takes whatever measure is left over, so a long item in either script shortens its own
   run of dots instead of folding the row. */
.nci--oak .oke-leader {
  flex: 1 1 auto;
  min-width: 3cqw;
  height: 0;
  transform: translateY(-0.3em);
  border-bottom: 1px dotted var(--oke-hair);
}

.nci--oak .oke-item-at {
  flex: none;
  font-family: var(--oke-caps);
  font-size: 3cqw;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--oke-blood-ink);
}

.nci--oak .oke-item-room {
  margin-top: 1.6cqw;
  font-size: 2.8cqw;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: var(--oke-mute);
}

.nci--oak.nci--lang-en .oke-item-room {
  font-style: italic;
}

/* ───── countdown: the candle ─────
   The stage is the wax track; the holder sits under it. The wax is a percentage of the track, and the
   flame and the gauge are pinned to the same percentage, so all three move together as the days come
   down and nothing has to be kept in step by hand. */

.nci--oak .oke-candle {
  margin: 11cqw var(--oke-g) 0;
}

.nci--oak .oke-stage {
  position: relative;
  height: 62cqw;
}

.nci--oak .oke-wax {
  position: absolute;
  left: 18cqw;
  bottom: 0;
  width: 13cqw;
  overflow: hidden;
  border-radius: 1.4cqw 1.4cqw 0 0;
  background: linear-gradient(90deg, #e3d0ac 0%, var(--oke-wax) 26%, #fdfaf2 40%, #f2e6cc 74%, #d9c49f 100%);
  box-shadow: inset 0 0 0 1px rgba(111, 74, 36, 0.12);
}

/* The hour marks: bands round the wax, swallowed one by one as it burns down. They are positioned from
   the foot of the candle, so the wax's own overflow clips whichever are already gone. */
.nci--oak .oke-mark {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(111, 74, 36, 0.22);
}

/* The molten top, and the drip that always hangs just below it. */
.nci--oak .oke-wax::before {
  content: '';
  position: absolute;
  top: -1.1cqw;
  left: 0;
  right: 0;
  height: 2.4cqw;
  border-radius: 50%;
  background: linear-gradient(180deg, #fffdf6 0%, #efe0c0 100%);
}

.nci--oak .oke-wax::after {
  content: '';
  position: absolute;
  top: 3cqw;
  right: 1.4cqw;
  width: 2cqw;
  height: 8cqw;
  border-radius: 0 0 1cqw 1cqw;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.9) 0%, rgba(243, 231, 205, 0.5) 100%);
}

.nci--oak .oke-lit {
  position: absolute;
  left: 18cqw;
  width: 13cqw;
  height: 0;
}

.nci--oak .oke-wick {
  position: absolute;
  bottom: 0.6cqw;
  left: 50%;
  width: 0.6cqw;
  height: 2.6cqw;
  margin-left: -0.3cqw;
  border-radius: 0.3cqw;
  background: var(--oke-ink);
}

.nci--oak .oke-flame--candle {
  position: absolute;
  bottom: 2.8cqw;
  left: 50%;
  width: 5.4cqw;
  margin-left: -2.7cqw;
  transform-origin: 50% 100%;
}

.nci--oak .oke-halo {
  position: absolute;
  bottom: -4cqw;
  left: 50%;
  width: 34cqw;
  height: 34cqw;
  margin-left: -17cqw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 200, 110, 0.36) 0%, rgba(242, 200, 110, 0.12) 38%, transparent 68%);
}

/* The gauge: a hairline out of the wax top to the one figure large enough to read at a glance. */
.nci--oak .oke-gauge {
  position: absolute;
  left: 34cqw;
  right: 0;
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  transform: translateY(50%);
}

.nci--oak .oke-gauge-hair {
  flex: none;
  width: 7cqw;
  height: 1px;
  background: var(--oke-brass);
  opacity: 0.6;
}

.nci--oak .oke-gauge-n {
  font-family: var(--oke-caps);
  font-size: 10cqw;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--oke-ink);
}

.nci--oak .oke-gauge-l {
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

/* The holder: a brass pan, a stem and a foot, centred under the candle. */
.nci--oak .oke-holder {
  position: relative;
  height: 11cqw;
}

.nci--oak .oke-holder-pan {
  position: absolute;
  top: 0;
  left: 14cqw;
  width: 21cqw;
  height: 2.4cqw;
  border-radius: 50% / 60%;
  background: linear-gradient(180deg, #c89c53 0%, #8a6035 60%, #5d3d1e 100%);
}

.nci--oak .oke-holder::before {
  content: '';
  position: absolute;
  top: 1.8cqw;
  left: 21.6cqw;
  width: 5.8cqw;
  height: 6.4cqw;
  background: linear-gradient(90deg, #5d3d1e 0%, #c89c53 42%, #8a6035 72%, #5d3d1e 100%);
}

.nci--oak .oke-holder::after {
  content: '';
  position: absolute;
  top: 7.6cqw;
  left: 15.5cqw;
  width: 18cqw;
  height: 3cqw;
  border-radius: 50% / 60%;
  background: linear-gradient(180deg, #b88c46 0%, #7d5429 70%, #4f3319 100%);
}

.nci--oak .oke-clock {
  display: flex;
  justify-content: center;
  margin-top: 9cqw;
  border-top: 1px solid var(--oke-hair-2);
  border-bottom: 1px solid var(--oke-hair-2);
}

.nci--oak .oke-tick {
  flex: 1;
  padding: 4.4cqw 0;
  text-align: center;
}

.nci--oak .oke-tick + .oke-tick {
  border-left: 1px solid var(--oke-hair-2);
}

.nci--oak .oke-tick-n {
  display: block;
  font-family: var(--oke-caps);
  font-size: 4.6cqw;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.2;
  color: var(--oke-ink);
}

.nci--oak .oke-tick-l {
  display: block;
  margin-top: 1.4cqw;
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--oke-mute);
}

.nci--oak .oke-cd-done {
  margin: 10cqw var(--oke-g) 0;
  padding: 7cqw 0;
  border-top: 1px solid var(--oke-hair);
  border-bottom: 1px solid var(--oke-hair);
  text-align: center;
  font-size: 5.4cqw;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--oke-blood-ink);
}

.nci--oak .oke-dates {
  margin-top: 8cqw;
  padding: 0 var(--oke-g);
}

.nci--oak .oke-dateline {
  display: flex;
  align-items: center;
  gap: 3cqw;
  font-family: var(--oke-caps);
  font-size: 2.8cqw;
  line-height: 2;
  letter-spacing: 0.16em;
  color: var(--oke-mute);
}

.nci--oak .oke-dateline span {
  color: var(--oke-ink);
}

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

.nci--oak .oke-dateline--sub {
  font-size: 2.7cqw;
  color: var(--oke-brass-ink);
}

/* ───── faq: the endnotes ───── */

.nci--oak .oke-notes {
  margin: 9cqw var(--oke-g) 0;
  padding: 0;
  list-style: none;
}

.nci--oak .oke-notes-item {
  position: relative;
  padding: 5.4cqw 0 5.4cqw 8cqw;
  border-top: 1px solid var(--oke-hair-2);
}

.nci--oak .oke-notes-item:last-child {
  border-bottom: 1px solid var(--oke-hair-2);
}

/* The figure hangs in the margin, the way a note's number does in a printed book. */
.nci--oak .oke-notes-n {
  position: absolute;
  top: 5.6cqw;
  left: 0;
  font-family: var(--oke-caps);
  font-size: 3cqw;
  font-variant-numeric: lining-nums;
  line-height: 1.3;
  color: var(--oke-blood-ink);
}

.nci--oak .oke-notes-q {
  font-size: 3.6cqw;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--oke-ink);
}

.nci--oak .oke-notes-a {
  margin-top: 2cqw;
  font-size: 2.9cqw;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--oke-ink-2);
}

/* ───── rsvp: the reply card ───── */

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

.nci--oak .oke-field {
  display: grid;
  grid-template-columns: 22cqw minmax(0, 1fr);
  align-items: baseline;
  gap: 3cqw;
  padding: 3.6cqw 0;
  border-bottom: 1px dotted var(--oke-hair);
}

/* English labels are whole words rather than two characters, so they take a wider margin and less
   tracking — otherwise "at table" folds and the ruled rows stop lining up. */
.nci--oak.nci--lang-en .oke-field {
  grid-template-columns: 26cqw minmax(0, 1fr);
}

.nci--oak.nci--lang-en .oke-field-l {
  letter-spacing: 0.1em;
}

.nci--oak .oke-field.is-bad {
  border-bottom-color: var(--oke-blood-ink);
}

.nci--oak .oke-field-l {
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  line-height: 1.7;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

.nci--oak .oke-field-i {
  width: 100%;
  padding: 0 0 0.6cqw;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--oke-disp);
  font-size: 4.2cqw;
  color: var(--oke-ink);
  outline: none;
}

.nci--oak .oke-field-i:focus {
  background: rgba(214, 160, 74, 0.13);
}

.nci--oak .oke-err {
  padding-top: 2cqw;
  font-family: var(--oke-caps);
  font-size: max(12px, 2.7cqw);
  letter-spacing: 0.04em;
  color: var(--oke-blood-ink);
}

/* The two answers, drawn as two candles: the chosen one takes a flame and a halo, the other keeps a
   cold outline. */
.nci--oak .oke-choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4cqw;
  padding: 9cqw 0 7cqw;
}

.nci--oak .oke-pick {
  display: block;
  padding: 5cqw 2cqw 4.4cqw;
  border: 1px solid var(--oke-hair-2);
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.nci--oak .oke-pick-c {
  position: relative;
  display: block;
  width: 100%;
  height: 20cqw;
  margin-bottom: 3.4cqw;
}

.nci--oak .oke-pick-wax {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 5cqw;
  height: 11cqw;
  margin-left: -2.5cqw;
  border-radius: 0.8cqw 0.8cqw 0 0;
  background: linear-gradient(90deg, #e3d0ac 0%, var(--oke-wax) 30%, #fdfaf2 46%, #eadfc4 100%);
  box-shadow: inset 0 0 0 1px rgba(111, 74, 36, 0.12);
}

.nci--oak .oke-pick-wick {
  position: absolute;
  bottom: 10.6cqw;
  left: 50%;
  width: 0.6cqw;
  height: 2.2cqw;
  margin-left: -0.3cqw;
  border-radius: 0.3cqw;
  background: var(--oke-ink);
}

.nci--oak .oke-flame--pick {
  position: absolute;
  bottom: 12.6cqw;
  left: 50%;
  width: 4.6cqw;
  margin-left: -2.3cqw;
  transform-origin: 50% 100%;
}

/* Unlit: the flame is an outline only. */
.nci--oak .oke-pick .oke-fl-a {
  fill: none;
  stroke: rgba(63, 42, 27, 0.3);
  stroke-width: 1.2;
}

.nci--oak .oke-pick .oke-fl-b {
  fill: none;
}

.nci--oak .oke-pick-halo {
  position: absolute;
  bottom: 9cqw;
  left: 50%;
  width: 22cqw;
  height: 22cqw;
  margin-left: -11cqw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 200, 110, 0.4) 0%, rgba(242, 200, 110, 0.13) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 180ms;
}

.nci--oak .oke-pick-t {
  display: block;
  font-size: 3.2cqw;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--oke-ink-2);
}

.nci--oak .oke-pick[aria-pressed='true'] {
  border-color: var(--oke-brass);
  background: rgba(214, 160, 74, 0.1);
}

.nci--oak .oke-pick[aria-pressed='true'] .oke-fl-a {
  fill: var(--oke-blood);
  stroke: none;
}

.nci--oak .oke-pick[aria-pressed='true'] .oke-fl-b {
  fill: var(--oke-amber);
}

.nci--oak .oke-pick[aria-pressed='true'] .oke-pick-halo {
  opacity: 1;
}

.nci--oak .oke-pick[aria-pressed='true'] .oke-pick-t {
  color: var(--oke-ink);
}

.nci--oak .oke-pick:disabled {
  opacity: 0.55;
}

.nci--oak .oke-field--count,
.nci--oak .oke-field--diet {
  align-items: center;
}

.nci--oak .oke-field--diet {
  align-items: start;
  padding-bottom: 4.6cqw;
}

.nci--oak .oke-step {
  display: flex;
  align-items: center;
  gap: 4.4cqw;
}

.nci--oak .oke-step button {
  width: 7cqw;
  height: 7cqw;
  padding: 0;
  border: 1px solid var(--oke-brass);
  border-radius: 50%;
  background: transparent;
  font-family: var(--oke-disp);
  font-size: 3.8cqw;
  line-height: 1;
  color: var(--oke-brass-ink);
}

.nci--oak .oke-step button:disabled {
  opacity: 0.35;
}

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

.nci--oak .oke-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2cqw;
}

.nci--oak .oke-tag {
  padding: 1.8cqw 3.4cqw;
  border: 1px solid var(--oke-hair);
  border-radius: 999px;
  background: transparent;
  font-family: var(--oke-disp);
  font-size: 3cqw;
  letter-spacing: 0.06em;
  color: var(--oke-ink-2);
}

.nci--oak .oke-tag[aria-pressed='true'] {
  border-color: var(--oke-blood-ink);
  background: rgba(141, 58, 43, 0.12);
  color: var(--oke-blood-ink);
}

.nci--oak .oke-tag:disabled {
  opacity: 0.4;
}

.nci--oak .oke-send {
  width: 100%;
  margin-top: 9cqw;
  padding: 4.6cqw 0;
  border: none;
  border-radius: 0;
  background: var(--oke-blood-ink);
  font-family: var(--oke-caps);
  font-size: 2.8cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--oke-paper);
}

.nci--oak .oke-send:disabled {
  opacity: 0.5;
}

.nci--oak .oke-done {
  margin: 11cqw var(--oke-g) 0;
  text-align: center;
}

.nci--oak .oke-flame--done {
  width: 7cqw;
  margin: 0 auto 5cqw;
}

.nci--oak .oke-done-t {
  font-size: 5.8cqw;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--oke-ink);
}

.nci--oak.nci--lang-zh .oke-done-t {
  font-style: normal;
  letter-spacing: 0.08em;
}

.nci--oak .oke-done-b {
  margin-top: 3.4cqw;
  font-size: 3.2cqw;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--oke-ink-2);
}

.nci--oak .oke-req {
  margin-left: 0.4em;
  color: var(--oke-blood-ink);
}

.nci--oak .oke-choose + .oke-err {
  margin: -5cqw 0 5cqw;
  padding-top: 0;
  text-align: center;
}

.nci--oak .oke-err--server {
  padding-top: 7cqw;
}

.nci--oak .oke-send[aria-busy='true'],
.nci--oak .oke-sign-post[aria-busy='true'] {
  opacity: 0.7;
  cursor: progress;
}

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

.nci--oak .oke-done-edit {
  margin-top: 6.4cqw;
  padding: 0 0 1cqw;
  border: none;
  border-bottom: 1px solid var(--oke-brass);
  background: none;
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

/* ───── wishes: the guest book ───── */

.nci--oak .oke-signform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3cqw;
  margin: 10cqw var(--oke-g) 0;
}

.nci--oak .oke-sign-in {
  grid-column: 1 / -1;
  width: 100%;
  padding: 2.8cqw 0;
  border: none;
  border-bottom: 1px dotted var(--oke-hair);
  border-radius: 0;
  background: transparent;
  font-family: var(--oke-disp);
  font-size: 3.6cqw;
  letter-spacing: 0.03em;
  color: var(--oke-ink);
  outline: none;
}

.nci--oak .oke-sign-in--name {
  grid-column: 1;
}

.nci--oak .oke-sign-in::placeholder {
  color: var(--oke-mute);
}

.nci--oak .oke-sign-in:focus {
  border-bottom-color: var(--oke-brass);
}

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

.nci--oak .oke-sign-post {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: 2.4cqw 5cqw;
  border: 1px solid var(--oke-ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--oke-ink);
}

.nci--oak .oke-sign-post:disabled {
  opacity: 0.45;
}

.nci--oak .oke-book {
  margin: 9cqw var(--oke-g) 0;
}

/* Before the first guest signs, the book is one line rather than a page of entries: it keeps the
   line's own air and hands the rest back, so the closing plate follows it instead of a void. */
.nci--oak .oke-book--empty {
  margin-top: 6cqw;
}

.nci--oak .oke-book--empty + .oke-plate--close {
  margin-top: 8cqw;
}

.nci--oak .oke-entry {
  position: relative;
  padding: 5cqw 0 5cqw 9cqw;
  border-top: 1px solid var(--oke-hair-2);
}

.nci--oak .oke-entry:last-child {
  border-bottom: 1px solid var(--oke-hair-2);
}

/* The folio of the entry, hanging in the margin like the note numbers. */
.nci--oak .oke-entry-n {
  position: absolute;
  top: 5.6cqw;
  left: 0;
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--oke-brass-ink);
}

.nci--oak .oke-entry-text {
  font-size: 3.4cqw;
  font-style: italic;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--oke-ink);
  overflow-wrap: anywhere;
}

.nci--oak.nci--lang-zh .oke-entry-text {
  font-style: normal;
}

.nci--oak .oke-entry-from {
  margin-top: 2cqw;
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oke-mute);
}

.nci--oak .oke-book-empty {
  padding: 3.4cqw 0 0;
  text-align: center;
  font-size: 3.1cqw;
  letter-spacing: 0.06em;
  color: var(--oke-mute);
}

.nci--oak .oke-plate--close {
  margin-top: 14cqw;
}

.nci--oak .oke-plate--close .oke-vig {
  aspect-ratio: 4 / 5;
}

.nci--oak .oke-close-line {
  padding: 8cqw calc(var(--oke-g) + 1cqw) 0;
  text-align: center;
  font-size: 4.4cqw;
  font-style: italic;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--oke-ink);
}

.nci--oak.nci--lang-zh .oke-close-line {
  font-style: normal;
  letter-spacing: 0.08em;
}

.nci--oak .oke-colophon {
  padding: 10cqw 0 2cqw;
  text-align: center;
}

.nci--oak .oke-colophon-mark {
  margin-top: 5cqw;
  font-family: var(--oke-caps);
  font-size: 2.5cqw;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

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

/* The photograph takes whatever the title page does not need, rather than a share fixed in advance:
   at a fixed 56/44 the block below overran its box in 中文 and printed the small caps line across the
   gown, which is the one thing this cover may never do. */
.nci-cover--oak {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  background: var(--oke-paper);
  color: var(--oke-ink);
  font-family: var(--oke-disp);
}

.nci-cover--oak .oke-cv-photo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--oke-dark);
}

.nci-cover--oak .oke-cv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.nci-cover--oak .oke-cv-body {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6.4cqw var(--oke-g) 6.4cqw;
  text-align: center;
}

.nci-cover--oak .oke-cv-kicker {
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

.nci-cover--oak .oke-cv-names {
  margin-top: 2.8cqw;
  font-size: 10cqw;
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--oke-ink);
  overflow-wrap: anywhere;
}

.nci-cover--oak .oke-cv-names i {
  display: block;
  margin: 0.6cqw 0;
  font-size: 4.6cqw;
  font-style: italic;
  color: var(--oke-blood-ink);
}

.nci-cover--oak .oke-cv-date {
  margin-top: 3.4cqw;
  font-family: var(--oke-caps);
  font-size: 2.9cqw;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--oke-ink-2);
}

/* The way in is this page's own ornament: an unlit candle that takes its flame when it is tapped. */
.nci-cover--oak .oke-cv-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6cqw;
  margin-top: 5.4cqw;
  padding: 0;
  border: none;
  background: none;
}

.nci-cover--oak .oke-cv-candle {
  position: relative;
  display: block;
  width: 18cqw;
  height: 14cqw;
}

.nci-cover--oak .oke-cv-wax {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4.8cqw;
  height: 7.4cqw;
  margin-left: -2.4cqw;
  border-radius: 0.8cqw 0.8cqw 0 0;
  background: linear-gradient(90deg, #e3d0ac 0%, var(--oke-wax) 30%, #fdfaf2 46%, #eadfc4 100%);
  box-shadow: inset 0 0 0 1px rgba(111, 74, 36, 0.12);
}

.nci-cover--oak .oke-cv-wick {
  position: absolute;
  bottom: 7.1cqw;
  left: 50%;
  width: 0.6cqw;
  height: 2cqw;
  margin-left: -0.3cqw;
  border-radius: 0.3cqw;
  background: var(--oke-ink);
}

.nci-cover--oak .oke-flame--cv {
  position: absolute;
  bottom: 8.9cqw;
  left: 50%;
  width: 4.6cqw;
  margin-left: -2.3cqw;
  transform-origin: 50% 100%;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nci-cover--oak .oke-flame--cv .oke-fl-a {
  fill: var(--oke-blood);
}

.nci-cover--oak .oke-flame--cv .oke-fl-b {
  fill: var(--oke-amber);
}

.nci-cover--oak .oke-cv-halo {
  position: absolute;
  bottom: 4.6cqw;
  left: 50%;
  width: 21cqw;
  height: 21cqw;
  margin-left: -10.5cqw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 200, 110, 0.4) 0%, rgba(242, 200, 110, 0.13) 40%, transparent 70%);
  transition: opacity 420ms;
}

.nci-cover--oak .oke-cv-open:hover .oke-flame--cv {
  transform: scale(1.14);
}

.nci-cover--oak .oke-cv-open-t {
  font-family: var(--oke-caps);
  font-size: 2.7cqw;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--oke-brass-ink);
}

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

.nci-cover--oak .oke-cv-hint {
  margin-top: 3.4cqw;
  font-size: 2.9cqw;
  letter-spacing: 0.08em;
  color: var(--oke-mute);
}

/* Opening: the flame flares and lifts, and the book is already underneath. */
.nci-cover--oak.oke-cv--opening {
  animation: oke-open 540ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.nci-cover--oak.oke-cv--opening .oke-flame--cv {
  animation: oke-flare 540ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

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

@keyframes oke-flare {
  to {
    transform: translateY(-260%) scale(2.4);
    opacity: 0;
  }
}

/* The only thing on this page that moves on its own, and it moves only where the guest has not asked
   for stillness. */
@media (prefers-reduced-motion: no-preference) {
  .nci--oak .oke-flame--candle {
    animation: oke-flicker 3.4s ease-in-out infinite;
  }

  .nci--oak .oke-halo {
    animation: oke-glow 3.4s ease-in-out infinite;
  }
}

@keyframes oke-flicker {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  28% {
    transform: scale(1.07, 1.1) rotate(-1.6deg);
  }
  62% {
    transform: scale(0.96, 1.04) rotate(1.4deg);
  }
}

@keyframes oke-glow {
  0%,
  100% {
    opacity: 1;
  }
  44% {
    opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--oak.oke-cv--opening,
  .nci-cover--oak.oke-cv--opening .oke-flame--cv {
    animation: none;
  }

  .nci-cover--oak .oke-flame--cv,
  .nci-cover--oak .oke-cv-halo,
  .nci--oak .oke-pick-halo {
    transition: none;
  }
}

/* ───── Floating bar — two small plates in the foot of the right margin ─────
   Centred at the foot of the screen it came to rest on the middle of a page whose every line is
   centred: on the two names of the title page, on the captions under the plates, on the hours of the
   contents. The foot of the right margin is the one corner this page leaves empty. The plates keep
   their words rather than shrinking to two marks — this is a page of type — but they are set small,
   with square corners and a brass hairline, like the reply card's rules. */

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

.nci-float--oak button {
  padding: 8px 11px;
  border-radius: 0;
  font-family: var(--oke-caps);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  box-shadow: 0 3px 12px rgba(36, 24, 17, 0.16);
}

.nci-float--oak .nci-float-music {
  border: 1px solid var(--oke-brass);
  background: rgba(246, 237, 220, 0.95);
  color: var(--oke-ink);
}

.nci-float--oak .nci-float-dot {
  width: 7px;
  height: 7px;
  background: rgba(111, 74, 36, 0.5);
}

.nci-float--oak .nci-float-music[aria-pressed='true'] {
  border-color: var(--oke-blood-ink);
}

.nci-float--oak .nci-float-music[aria-pressed='true'] .nci-float-dot {
  background: var(--oke-blood);
}

.nci-float--oak .nci-float-share {
  border: 1px solid var(--oke-ink);
  background: var(--oke-ink);
  color: var(--oke-paper);
}