/* Nicecard demo — "Broadsheet" (号外) invitation style. Everything is scoped under .nci--broad,
   .nci-cover--broad and .nci-float--broad so the other styles are untouched; new classes use the brd-
   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 newsprint: a warm grey-beige sheet with a faint mechanical screen in it, printed
   black, with one ink blue for the rules, the folio and the end marks. There is no third colour and
   no tint anywhere — a paper printed in one night does not run a second plate.
   Type is a newspaper's two faces and nothing else: Playfair Display for the masthead and the
   headlines (high contrast, set in caps only where a masthead would be), Libre Baskerville for the
   body, which is justified in short columns with a hairline between them and hyphenated in English.
   The standfirsts are set as small caps — faked with tracked capitals, since neither face ships a
   true small-caps axis over a webfont link.
   Contrast, all measured on --brd-paper: --brd-ink 15.9:1, --brd-ink-2 9.4:1, --brd-mute 5.8:1 and
   --brd-blue 8.1:1, so every colour that carries a word clears 4.5:1. The smallest type that carries
   a word is 2.6cqw (10.1px at 390) — the folio, the standfirsts, the small caps labels and the ruled
   keys all sit on that floor, and nothing on the sheet is set under it. The two things a guest
   presses, the dietary tags and the letters button, are set above it at 2.8cqw, and the date on the
   masthead — the single most important figure on the front page — at 2.9cqw.
   Four devices: the masthead with its edition line and double rule, the multi-column body with a rule
   between the columns, the day's forecast in a boxed panel, the running order as a ruled table, and
   the reply set as a classified coupon with a cut line. The folio bar at the head of every block —
   page number, paper, section — is this template's own and appears nowhere else in the family. */

.nci--broad,
.nci-cover--broad,
.nci-float--broad {
  --brd-paper: #eae5d9;
  --brd-paper-2: #e1dbcc;
  --brd-paper-3: #d6cfbd;
  --brd-ink: #16130f;
  --brd-ink-2: #37312a;
  /* Carries captions, the third column of the forecast and every credit line, so it is set past
     4.5:1 on newsprint rather than tuned by eye. */
  --brd-mute: #5d564a;
  --brd-blue: #1b4079;
  --brd-blue-2: #2c5793;
  --brd-rule: rgba(22, 19, 15, 0.42);
  --brd-hair: rgba(22, 19, 15, 0.18);
  --brd-m: 6.6cqw;
  --brd-mast: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
  --brd-body: 'Libre Baskerville', 'Noto Serif SC', Georgia, serif;
  --brd-grot: 'Archivo', 'Jost', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
}

.nci--broad {
  container-type: inline-size;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--brd-paper);
  color: var(--brd-ink);
  font-family: var(--brd-body);
  --nci-bg: var(--brd-paper);
  --nci-soft: var(--brd-paper-2);
  --nci-slot-line: rgba(27, 64, 121, 0.5);
  --nci-slot-ink: var(--brd-ink-2);
  --nci-hint: rgba(27, 64, 121, 0.45);
  --nci-sel: #1b4079;
}

/* The screen of the press: a fine horizontal ruling at one pixel, a coarser vertical one out of step
   with it, and four patches where the ink took unevenly. Kept faint enough to read as the tooth of
   cheap paper rather than as anything drawn on it. */
.nci--broad::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    radial-gradient(22cqw 4cqw at 18% 12%, rgba(66, 58, 44, 0.05) 0%, transparent 74%),
    radial-gradient(17cqw 3.2cqw at 78% 38%, rgba(66, 58, 44, 0.045) 0%, transparent 74%),
    radial-gradient(24cqw 4cqw at 30% 64%, rgba(66, 58, 44, 0.04) 0%, transparent 74%),
    radial-gradient(18cqw 3cqw at 72% 87%, rgba(66, 58, 44, 0.045) 0%, transparent 74%),
    repeating-linear-gradient(0deg, rgba(50, 44, 34, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(50, 44, 34, 0.022) 0 1px, transparent 1px 7px);
}

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

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

.nci--broad .nci-s-wishes {
  padding: 0 0 3cqw;
}

/* Nothing drawn may take a tap away from the photo slot or the field underneath it. */
.nci--broad .brd-rules,
.nci--broad .brd-hr,
.nci--broad .brd-mark,
.nci--broad .brd-scissors,
.nci--broad .brd-flag i,
.nci--broad .brd-mast-amp i {
  pointer-events: none;
}

/* ───── rules ─────
   The double rule is the masthead's own: a thick line over a thin one, the oldest signal in the
   trade that what is above it is the name of the paper. */

/* Scoped to both roots: the masthead is printed twice — once on the folded sheet the guest is handed
   and once at the top of the page itself — and the double rule is the half of it that says the words
   above are the name of the paper. */
.nci--broad .brd-rules,
.nci-cover--broad .brd-rules {
  height: 5px;
  border-top: 2.5px solid var(--brd-ink);
  border-bottom: 1px solid var(--brd-ink);
}

.nci--broad .brd-rules--blue,
.nci-cover--broad .brd-rules--blue {
  border-top-color: var(--brd-blue);
  border-bottom-color: var(--brd-blue);
}

.nci--broad .brd-hr,
.nci-cover--broad .brd-hr {
  height: 1px;
  background: var(--brd-rule);
}

/* The end mark: the small square a paper sets after the last word of an article. */
.nci--broad .brd-mark {
  display: inline-block;
  width: 2.2cqw;
  height: 2.2cqw;
  margin-left: 1.6cqw;
  vertical-align: baseline;
  background: var(--brd-blue);
}

/* ───── the folio ─────
   This template's device, at the head of every block: a blue hairline, then the page number, the
   paper's own name and the name of the section, with a black rule closing it. */

.nci--broad .brd-folio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3cqw;
  margin: 0 var(--brd-m);
  padding: 2.6cqw 0 2.2cqw;
  border-top: 1px solid var(--brd-blue);
  border-bottom: 1px solid var(--brd-ink);
}

.nci--broad .brd-folio-p {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--brd-blue);
}

.nci--broad .brd-folio-paper {
  min-width: 0;
  font-family: var(--brd-body);
  font-size: 2.6cqw;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  color: var(--brd-mute);
  overflow-wrap: anywhere;
}

/* Latin section words are whole words where 中文 sets two or three characters, so the folio gives
   them the tracking back and keeps the section name on one line: a folio that folds is a folio that
   has stopped being a rule across the top of the page. */
.nci--broad.nci--lang-en .brd-folio {
  gap: 2.4cqw;
}

.nci--broad.nci--lang-en .brd-folio-paper {
  letter-spacing: 0.15em;
}

.nci--broad .brd-folio-s {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--brd-ink);
}

.nci--broad.nci--lang-en .brd-folio-s {
  letter-spacing: 0.14em;
}

.nci--broad .brd-head {
  padding-top: 9cqw;
}

.nci--broad .brd-hl {
  padding: 5cqw var(--brd-m) 0;
  font-family: var(--brd-mast);
  font-size: 7.4cqw;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--brd-ink);
}

.nci--broad.nci--lang-zh .brd-hl {
  font-size: 6.8cqw;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* The standfirst, set as small caps under the headline. */
.nci--broad .brd-deck {
  padding: 3.4cqw var(--brd-m) 0;
  font-size: 2.7cqw;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brd-ink-2);
}

.nci--broad.nci--lang-zh .brd-deck {
  letter-spacing: 0.24em;
}

/* ───── body columns ─────
   Device: the story set in short justified columns with a hairline between them. Hyphenation is
   asked for in English only — a CJK column justifies without it and hyphens: auto would do nothing
   but cost a shaping pass. */

.nci--broad .brd-cols {
  columns: 2;
  column-gap: 5cqw;
  column-rule: 1px solid var(--brd-hair);
  margin: 6cqw var(--brd-m) 0;
}

.nci--broad .brd-body {
  font-size: 2.9cqw;
  line-height: 1.85;
  text-align: justify;
  color: var(--brd-ink);
  overflow-wrap: break-word;
}

.nci--broad.nci--lang-en .brd-body {
  hyphens: auto;
}

.nci--broad.nci--lang-zh .brd-body {
  font-size: 2.9cqw;
  line-height: 1.95;
}

/* The opening letter, dropped three lines into the first column. */
.nci--broad .brd-body--drop::first-letter {
  float: left;
  margin: 1.4cqw 1.6cqw 0 0;
  font-family: var(--brd-mast);
  font-size: 11cqw;
  font-weight: 700;
  line-height: 0.76;
  color: var(--brd-ink);
}

.nci--broad .brd-note {
  padding: 6cqw calc(var(--brd-m) + 1cqw) 0;
  font-size: 2.8cqw;
  line-height: 1.9;
  white-space: pre-line;
  color: var(--brd-ink-2);
}

.nci--broad.nci--lang-en .brd-note {
  font-style: italic;
}

.nci--broad .brd-link {
  display: inline-block;
  padding-bottom: 0.8cqw;
  border-bottom: 1px solid var(--brd-blue);
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brd-blue);
}

.nci--broad .brd-linkrow {
  display: flex;
  gap: 6cqw;
  padding: 6cqw var(--brd-m) 0;
}

/* ───── pictures and their captions ─────
   A picture always carries a rule under it and a caption under the rule; that is how a paper prints
   one, and it is the only frame any photograph gets here. */

.nci--broad .brd-fig {
  margin: 0;
}

.nci--broad .brd-fig--bleed {
  margin: 0;
}

.nci--broad .brd-fig--inset {
  margin: 0 var(--brd-m);
}

.nci--broad .brd-capt {
  margin-top: 2.4cqw;
  padding-top: 2.2cqw;
  border-top: 1px solid var(--brd-rule);
  font-size: 2.6cqw;
  line-height: 1.7;
  color: var(--brd-mute);
}

.nci--broad.nci--lang-en .brd-capt {
  font-style: italic;
}

.nci--broad .brd-capt--bleed {
  margin: 2.4cqw var(--brd-m) 0;
}

/* A caption that opens with a tracked lead-in, the way a lead picture is captioned. */
.nci--broad .brd-capt--lead {
  font-style: normal;
  color: var(--brd-ink-2);
}

.nci--broad .brd-photo {
  width: 100%;
}

.nci--broad .brd-photo--front {
  aspect-ratio: 5 / 4;
}

.nci--broad .brd-photo--wide {
  aspect-ratio: 16 / 9;
}

.nci--broad .brd-photo--four {
  aspect-ratio: 4 / 3;
}

/* 2/3, narrower than the 3/4 library photographs, so the crop tool can slide the picture without a zoom. */
.nci--broad .brd-photo--tall {
  aspect-ratio: 2 / 3;
}

.nci--broad .brd-photo--sq {
  aspect-ratio: 1 / 1;
}

.nci--broad .brd-photo--end {
  aspect-ratio: 3 / 2;
}

/* ───── the front page ───── */

.nci--broad .brd-mast {
  padding: 6cqw var(--brd-m) 0;
  text-align: center;
}

.nci--broad .brd-mast-top {
  padding-bottom: 2.6cqw;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--brd-mute);
}

/* The masthead is set in three lines on purpose. One line of caps at this weight runs past the
   measure as soon as a name is longer than six letters, and a masthead that reflows is not a
   masthead; stacked, it holds for any pair of names in either script. */
.nci--broad .brd-mast-names {
  padding: 4.4cqw 0 4cqw;
  font-family: var(--brd-mast);
  font-size: 12.6cqw;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--brd-ink);
  overflow-wrap: anywhere;
}

.nci--broad.nci--lang-zh .brd-mast-names {
  font-size: 12cqw;
  letter-spacing: 0.1em;
}

.nci--broad .brd-mast-amp {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 2.2cqw 0;
}

.nci--broad .brd-mast-amp i {
  flex: 1;
  height: 1px;
  background: var(--brd-blue);
}

.nci--broad .brd-mast-amp span {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

/* The edition line: where it was printed, when, and which number it is. Set as a wrapping flex row
   rather than three grid columns — the city is the couple's own words, and "Sonoma, California"
   against a nowrap date ran the two into each other in a three-column grid. It wraps now instead. */
.nci--broad .brd-edition {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4cqw 3cqw;
  padding: 2.8cqw 0 2.6cqw;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brd-ink-2);
}

/* The one figure the front page exists to carry, so it is set above the edition line around it. */
.nci--broad .brd-edition-d {
  font-size: 2.9cqw;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--brd-blue);
}

.nci--broad .brd-edition span:first-child {
  text-align: left;
  overflow-wrap: anywhere;
}

.nci--broad .brd-edition span:last-child {
  text-align: right;
  white-space: nowrap;
}

.nci--broad .brd-front {
  margin-top: 4cqw;
}

/* The standfirst over the opening columns, ranged across the measure. */
.nci--broad .brd-stand {
  padding: 7cqw var(--brd-m) 0;
  font-family: var(--brd-mast);
  font-size: 3.4cqw;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brd-ink);
}

.nci--broad.nci--lang-zh .brd-stand {
  letter-spacing: 0.2em;
}

/* The jump line — "continued on page 2" — closing the front page, the way a broadsheet sends the
   reader inside. */
.nci--broad .brd-jump {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  margin: 6cqw var(--brd-m) 0;
  padding-top: 3cqw;
  border-top: 1px solid var(--brd-rule);
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

.nci--broad .brd-jump-arrow {
  font-size: 3.2cqw;
  line-height: 1;
}

/* ───── page two: the principals ───── */

.nci--broad .nci-s-story .brd-fig--bleed {
  margin-top: 8cqw;
}

.nci--broad .brd-staff {
  margin: 10cqw var(--brd-m) 0;
  border: 1.5px solid var(--brd-ink);
}

.nci--broad .brd-staff-h {
  padding: 2.8cqw 3cqw;
  border-bottom: 1px solid var(--brd-ink);
  background: var(--brd-paper-2);
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-align: center;
  text-transform: uppercase;
  color: var(--brd-ink);
}

.nci--broad .brd-staff-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.nci--broad .brd-person {
  padding: 4.4cqw 3.4cqw 5cqw;
}

.nci--broad .brd-person + .brd-person {
  border-left: 1px solid var(--brd-hair);
}

.nci--broad .brd-person-role {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

.nci--broad .brd-person-name {
  margin-top: 2cqw;
  font-family: var(--brd-mast);
  font-size: 5.4cqw;
  font-weight: 700;
  line-height: 1.24;
  color: var(--brd-ink);
  overflow-wrap: anywhere;
}

.nci--broad .brd-person-beat {
  margin-top: 2cqw;
  padding-top: 2cqw;
  border-top: 1px solid var(--brd-hair);
  font-size: 2.6cqw;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brd-mute);
}

.nci--broad .brd-person-bio {
  margin-top: 2.6cqw;
  font-size: 2.7cqw;
  line-height: 1.8;
  color: var(--brd-ink-2);
}

/* ───── page three: stop press ─────
   The one place on the sheet that is printed solid: a reversed band, the way a paper runs the last
   thing it learned before the presses rolled. */

.nci--broad .brd-flag {
  display: flex;
  align-items: center;
  gap: 3cqw;
  margin: 8cqw var(--brd-m) 3.4cqw;
}

.nci--broad .brd-flag i {
  flex: 1;
  height: 2px;
  border-top: 1px solid var(--brd-blue);
  border-bottom: 1px solid var(--brd-blue);
}

.nci--broad .brd-flag span {
  font-family: var(--brd-grot);
  font-size: 2.8cqw;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

.nci--broad .brd-press {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 var(--brd-m);
  background: var(--brd-ink);
}

.nci--broad .brd-press-c {
  padding: 4.4cqw 0 3.6cqw;
  text-align: center;
  border-left: 1px solid rgba(234, 229, 217, 0.32);
}

.nci--broad .brd-press-c:first-child {
  border-left: none;
}

.nci--broad .brd-press-n {
  display: block;
  font-family: var(--brd-mast);
  font-size: 9.2cqw;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brd-paper);
}

.nci--broad .brd-press-u {
  display: block;
  margin-top: 1.8cqw;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: rgba(234, 229, 217, 0.82);
}

.nci--broad .brd-press-done {
  margin: 0 var(--brd-m);
  padding: 7cqw 4cqw;
  background: var(--brd-ink);
  text-align: center;
  font-family: var(--brd-mast);
  font-size: 6cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brd-paper);
}

/* The dateline strip: three ruled cells under the band, every one of them read out of dateISO. */
.nci--broad .brd-dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 var(--brd-m);
  border-bottom: 1px solid var(--brd-rule);
}

.nci--broad .brd-dl-c {
  padding: 3.2cqw 1.6cqw;
  text-align: center;
  border-left: 1px solid var(--brd-hair);
}

.nci--broad .brd-dl-c:first-child {
  border-left: none;
}

.nci--broad .brd-dl-k {
  display: block;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brd-mute);
}

.nci--broad .brd-dl-v {
  display: block;
  margin-top: 1.4cqw;
  font-size: 2.8cqw;
  line-height: 1.5;
  color: var(--brd-ink);
  overflow-wrap: anywhere;
}

.nci--broad .brd-dl-v--blue {
  color: var(--brd-blue);
}

/* ───── pages four and five: pictures ───── */

.nci--broad .nci-s-gallery .brd-fig--bleed {
  margin-top: 7cqw;
}

.nci--broad .brd-spread {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 4.4cqw;
  margin: 9cqw var(--brd-m) 0;
}

.nci--broad .brd-spread-col {
  font-size: 2.8cqw;
  line-height: 1.85;
  text-align: justify;
  color: var(--brd-ink);
}

.nci--broad.nci--lang-en .brd-spread-col {
  hyphens: auto;
}

.nci--broad .brd-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.4cqw;
  margin: 8cqw var(--brd-m) 0;
}

.nci--broad .brd-capt--sm {
  font-size: 2.6cqw;
  line-height: 1.6;
}

/* ───── page six: the running order ─────
   Device: the day set as a ruled table with the hours in the left column, each row numbered the way
   a running order is numbered, and dotted rules between the items. */

.nci--broad .brd-run {
  width: calc(100% - var(--brd-m) * 2);
  margin: 8cqw var(--brd-m) 0;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

.nci--broad .brd-run-cap {
  padding-bottom: 2.6cqw;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: left;
  text-transform: uppercase;
  color: var(--brd-blue);
}

.nci--broad .brd-run-h {
  padding: 2.4cqw 0;
  border-top: 2.5px solid var(--brd-ink);
  border-bottom: 1px solid var(--brd-ink);
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brd-ink);
}

.nci--broad .brd-run-h--at {
  width: 34%;
}

.nci--broad .brd-run-r td {
  padding: 3.6cqw 0;
  border-bottom: 1px dotted var(--brd-rule);
  vertical-align: baseline;
}

.nci--broad .brd-run-r:last-child td {
  border-bottom: 2.5px solid var(--brd-ink);
}

.nci--broad .brd-run-at {
  padding-right: 3cqw !important;
  font-family: var(--brd-grot);
  font-size: 3.2cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--brd-ink);
}

.nci--broad .brd-run-i {
  display: inline-block;
  min-width: 5.4cqw;
  font-size: 2.6cqw;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--brd-blue);
}

.nci--broad .brd-run-t {
  font-size: 2.9cqw;
  line-height: 1.65;
  color: var(--brd-ink);
}

/* ───── page seven: where to find it ───── */

.nci--broad .nci-s-venue .brd-fig--bleed {
  margin-top: 7cqw;
}

.nci--broad .brd-place {
  margin: 9cqw var(--brd-m) 0;
  padding: 4.4cqw 0;
  border-top: 2.5px solid var(--brd-ink);
  border-bottom: 1px solid var(--brd-ink);
}

.nci--broad .brd-place-n {
  font-family: var(--brd-mast);
  font-size: 5.2cqw;
  font-weight: 700;
  line-height: 1.32;
  color: var(--brd-ink);
}

.nci--broad .brd-place-a {
  margin-top: 2cqw;
  font-size: 2.7cqw;
  line-height: 1.8;
  color: var(--brd-ink-2);
}

.nci--broad .brd-mapbox {
  margin: 6cqw var(--brd-m) 0;
}

.nci--broad .brd-mapbox .nci-map {
  border: 1px solid var(--brd-ink);
}

/* The locator map as a paper prints one: no colour, a screen of grey for the water, the road in
   white and the pin as a solid square with its own hairline ring. */
.nci--broad .nci-map {
  height: 30cqw;
  background:
    linear-gradient(180deg, rgba(22, 19, 15, 0.14) 0%, rgba(22, 19, 15, 0.12) 44%, transparent 44.6%),
    repeating-linear-gradient(45deg, rgba(22, 19, 15, 0.05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #e2dccd 0%, #d9d2c1 100%);
}

.nci--broad .nci-map-road {
  top: 62%;
  height: 3.4cqw;
  border-top: 1px solid rgba(22, 19, 15, 0.35);
  border-bottom: 1px solid rgba(22, 19, 15, 0.35);
  background: rgba(240, 236, 227, 0.9);
}

.nci--broad .nci-map-pin {
  top: 50%;
  left: 47%;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 0;
  transform: none;
  background: var(--brd-blue);
  box-shadow: 0 0 0 1.4cqw rgba(27, 64, 121, 0.18);
}

.nci--broad .brd-travel {
  margin: 8cqw var(--brd-m) 0;
}

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

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

.nci--broad .brd-travel-k {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

.nci--broad .brd-travel-v {
  font-size: 2.7cqw;
  line-height: 1.8;
  color: var(--brd-ink-2);
}

/* ───── page eight: the day's forecast ─────
   Device: the boxed panel a paper keeps for the weather — a heavy rule box, a head band, and three
   ruled rows. */

.nci--broad .brd-fc {
  margin: 8cqw var(--brd-m) 0;
  border: 2.5px solid var(--brd-ink);
}

.nci--broad .brd-fc-h {
  padding: 2.8cqw 3cqw;
  background: var(--brd-ink);
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-align: center;
  text-transform: uppercase;
  color: var(--brd-paper);
}

.nci--broad .brd-fc-row {
  display: grid;
  grid-template-columns: 22cqw minmax(0, 1fr);
  gap: 3cqw;
  padding: 3.6cqw 3.4cqw;
  border-top: 1px solid var(--brd-hair);
}

.nci--broad .brd-fc-row:first-of-type {
  border-top: none;
}

/* "What to wear" is three words where 中文 sets two characters, so the Latin forecast gives its
   label column the room to keep every label on one line. */
.nci--broad.nci--lang-en .brd-fc-row {
  grid-template-columns: 28cqw minmax(0, 1fr);
}

.nci--broad .brd-fc-k {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

.nci--broad .brd-fc-v {
  font-size: 2.7cqw;
  line-height: 1.8;
  color: var(--brd-ink);
}

.nci--broad .brd-notice-h {
  margin: 9cqw var(--brd-m) 0;
  padding-bottom: 2.4cqw;
  border-bottom: 1px solid var(--brd-ink);
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--brd-ink);
}

.nci--broad .brd-notices {
  margin: 0 var(--brd-m);
}

/* Notices run in: the question set as a tracked lead-in and the answer following it on the same
   line, which is how a paper sets a column of short items. */
.nci--broad .brd-notice {
  padding: 3.6cqw 0;
  border-bottom: 1px dotted var(--brd-rule);
  font-size: 2.8cqw;
  line-height: 1.8;
  text-align: justify;
  color: var(--brd-ink-2);
}

.nci--broad.nci--lang-en .brd-notice {
  hyphens: auto;
}

/* A notice is one run-in line: the question, the blue square, then the answer on the same measure.
   The editor promotes multi-line fields to blocks so a click in the leading of a poem still picks
   the poem, but a notice's answer is two lines at most and the run-in is the whole device, so here
   it stays inline and the couple edits it where it is printed. */
.nci--broad.nci--edit .brd-notice .nci-f--ml {
  display: inline;
}

.nci--broad .brd-notice-q {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brd-ink);
}

.nci--broad .brd-notice-sep {
  display: inline-block;
  width: 1.8cqw;
  height: 1.8cqw;
  margin: 0 1.8cqw;
  vertical-align: 0.1em;
  background: var(--brd-blue);
}

/* ───── page nine: the classified coupon ─────
   Device: the reply set as a classified advertisement, cut out along a dotted line and posted. */

.nci--broad .brd-cut {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  margin: 9cqw var(--brd-m) 0;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brd-mute);
}

.nci--broad .brd-cut::after {
  content: '';
  flex: 1;
  height: 1px;
  border-top: 1px dashed var(--brd-mute);
}

.nci--broad .brd-scissors {
  flex: none;
  width: 4.6cqw;
  height: 4.6cqw;
  fill: none;
  stroke: var(--brd-mute);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.nci--broad .brd-ad {
  position: relative;
  margin: 3.4cqw var(--brd-m) 0;
  padding: 5cqw 4.4cqw 5.4cqw;
  border: 1.5px solid var(--brd-ink);
  background: var(--brd-paper-2);
}

/* The inner keyline of a coupon, drawn inside the border rather than as a second box. */
.nci--broad .brd-ad::before {
  content: '';
  position: absolute;
  inset: 1.6cqw;
  pointer-events: none;
  border: 1px dotted var(--brd-ink);
}

.nci--broad .brd-ad-h {
  padding-bottom: 3cqw;
  border-bottom: 1px solid var(--brd-ink);
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--brd-ink);
}

.nci--broad .brd-ad-row {
  display: grid;
  grid-template-columns: 24cqw minmax(0, 1fr);
  align-items: baseline;
  gap: 2.6cqw;
  padding: 3.4cqw 0 1.4cqw;
  border-bottom: 1px solid var(--brd-ink);
}

.nci--broad.nci--lang-en .brd-ad-row {
  grid-template-columns: 30cqw minmax(0, 1fr);
}

.nci--broad .brd-ad-row.is-bad {
  border-bottom-color: var(--brd-blue);
}

.nci--broad .brd-ad-l {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brd-ink-2);
}

.nci--broad .brd-ad-i {
  width: 100%;
  padding: 0 0 0.6cqw;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--brd-body);
  font-size: 3.2cqw;
  color: var(--brd-ink);
  outline: none;
}

.nci--broad .brd-ad-i:focus {
  background: rgba(27, 64, 121, 0.1);
}

.nci--broad .brd-err {
  padding-top: 2cqw;
  font-family: var(--brd-grot);
  font-size: max(12px, 2.6cqw);
  letter-spacing: 0.08em;
  /* An error reads as one, not as the page's accent colour. */
  color: #a3271f;
}

.nci--broad .brd-ticks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqw;
  padding: 5cqw 0 4cqw;
}

.nci--broad .brd-tick {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  color: var(--brd-ink-2);
}

.nci--broad .brd-tick-box {
  position: relative;
  flex: none;
  width: 4.4cqw;
  height: 4.4cqw;
  border: 1.5px solid var(--brd-ink);
  background: var(--brd-paper);
}

/* The cross a coupon is filled in with, drawn as two rotated rules. */
.nci--broad .brd-tick-box::before,
.nci--broad .brd-tick-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 12%;
  width: 76%;
  height: 1.5px;
  background: var(--brd-blue);
  opacity: 0;
  transition: opacity 120ms;
}

.nci--broad .brd-tick-box::before {
  transform: translateY(-50%) rotate(45deg);
}

.nci--broad .brd-tick-box::after {
  transform: translateY(-50%) rotate(-45deg);
}

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

.nci--broad .brd-tick[aria-pressed='true'] .brd-tick-box::before,
.nci--broad .brd-tick[aria-pressed='true'] .brd-tick-box::after {
  opacity: 1;
}

.nci--broad .brd-tick:disabled {
  opacity: 0.55;
}

.nci--broad .brd-ad-row--mid {
  align-items: center;
}

.nci--broad .brd-ad-row--top {
  align-items: start;
  padding-bottom: 3.4cqw;
}

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

.nci--broad .brd-step button {
  width: 6.6cqw;
  height: 6.6cqw;
  padding: 0;
  border: 1.5px solid var(--brd-ink);
  border-radius: 0;
  background: var(--brd-paper);
  font-family: var(--brd-grot);
  font-size: 3.2cqw;
  font-weight: 600;
  line-height: 1;
  color: var(--brd-ink);
}

.nci--broad .brd-step button:disabled {
  opacity: 0.35;
}

.nci--broad .brd-step span {
  min-width: 4cqw;
  font-family: var(--brd-grot);
  font-size: 3.8cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--brd-ink);
}

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

.nci--broad .brd-tag {
  padding: 1.6cqw 3cqw;
  border: 1px solid var(--brd-rule);
  border-radius: 0;
  background: var(--brd-paper);
  font-family: var(--brd-grot);
  font-size: 2.8cqw;
  letter-spacing: 0.08em;
  color: var(--brd-ink-2);
}

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

.nci--broad .brd-tag:disabled {
  opacity: 0.45;
}

.nci--broad .brd-submit {
  width: 100%;
  margin-top: 6cqw;
  padding: 4cqw 0;
  border: none;
  border-radius: 0;
  background: var(--brd-ink);
  font-family: var(--brd-grot);
  font-size: 2.7cqw;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--brd-paper);
}

.nci--broad .brd-submit:disabled {
  opacity: 0.5;
}

.nci--broad .brd-ad-terms {
  margin-top: 3.4cqw;
  font-size: 2.6cqw;
  line-height: 1.7;
  color: var(--brd-mute);
}

.nci--broad.nci--lang-en .brd-ad-terms {
  font-style: italic;
}

.nci--broad .brd-done {
  margin: 3.4cqw var(--brd-m) 0;
  padding: 7cqw 4.4cqw;
  border: 1.5px solid var(--brd-ink);
  background: var(--brd-paper-2);
  text-align: center;
}

.nci--broad .brd-done-t {
  font-family: var(--brd-mast);
  font-size: 5.6cqw;
  font-weight: 700;
  line-height: 1.34;
  color: var(--brd-ink);
}

.nci--broad .brd-done-b {
  margin-top: 2.6cqw;
  font-size: 2.8cqw;
  line-height: 1.85;
  color: var(--brd-ink-2);
}

.nci--broad .brd-req {
  margin-left: 0.4em;
  color: var(--brd-blue);
}

.nci--broad .brd-ticks + .brd-err {
  margin: -2.4cqw 0 3cqw;
  padding-top: 0;
}

.nci--broad .brd-err--server {
  padding-top: 5cqw;
}

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

.nci--broad .brd-done-when {
  margin-top: 1.6cqw;
  font-family: var(--brd-grot);
  font-size: 2.5cqw;
  letter-spacing: 0.04em;
  color: var(--brd-mute);
}

.nci--broad .brd-done-edit {
  margin-top: 5cqw;
  padding: 0 0 0.8cqw;
  border: none;
  border-bottom: 1px solid var(--brd-blue);
  background: none;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

/* ───── page ten: letters to the editor ───── */

.nci--broad .brd-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.6cqw;
  margin: 7cqw var(--brd-m) 0;
}

.nci--broad .brd-post-in {
  grid-column: 1 / -1;
  width: 100%;
  padding: 2.4cqw 0;
  border: none;
  border-bottom: 1px solid var(--brd-ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--brd-body);
  font-size: 3cqw;
  color: var(--brd-ink);
  outline: none;
}

.nci--broad .brd-post-in--name {
  grid-column: 1;
}

.nci--broad .brd-post-in::placeholder {
  color: var(--brd-mute);
}

.nci--broad .brd-post-in:focus {
  border-bottom-color: var(--brd-blue);
}

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

.nci--broad .brd-post-btn {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: 2cqw 4.4cqw;
  border: 1.5px solid var(--brd-ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--brd-grot);
  font-size: 2.8cqw;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--brd-ink);
}

.nci--broad .brd-post-btn:disabled {
  opacity: 0.45;
}

.nci--broad .brd-letters {
  margin: 7cqw var(--brd-m) 0;
  columns: 1;
}

.nci--broad .brd-letter {
  padding: 4cqw 0;
  border-top: 1px solid var(--brd-hair);
}

.nci--broad .brd-letter:last-child {
  border-bottom: 1px solid var(--brd-hair);
}

.nci--broad .brd-letter-t {
  font-size: 2.8cqw;
  line-height: 1.85;
  text-align: justify;
  color: var(--brd-ink);
  overflow-wrap: break-word;
}

.nci--broad.nci--lang-en .brd-letter-t {
  hyphens: auto;
}

.nci--broad .brd-letter-f {
  margin-top: 2cqw;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

/* With no letters in yet the column does not hold the height a set of letters would take: the line
   sits under the rule and the last picture follows it. */
.nci--broad .brd-letters--empty {
  margin-top: 5cqw;
}

.nci--broad .nci-s-wishes .brd-letters--empty + .brd-fig--bleed {
  margin-top: 7cqw;
}

.nci--broad .brd-letter-empty {
  padding: 2.8cqw 0 0;
  text-align: center;
  font-size: 2.8cqw;
  color: var(--brd-mute);
}

.nci--broad .nci-s-wishes .brd-fig--bleed {
  margin-top: 10cqw;
}

.nci--broad .brd-last {
  padding: 8cqw calc(var(--brd-m) + 1cqw) 0;
  text-align: center;
  font-family: var(--brd-mast);
  font-size: 4.2cqw;
  font-weight: 400;
  font-style: italic;
  line-height: 1.7;
  color: var(--brd-ink);
}

.nci--broad.nci--lang-zh .brd-last {
  font-style: normal;
  font-size: 3.8cqw;
  letter-spacing: 0.04em;
}

.nci--broad .brd-colophon {
  margin: 8cqw var(--brd-m) 0;
  padding-top: 3cqw;
  border-top: 2.5px solid var(--brd-ink);
  text-align: center;
}

.nci--broad .brd-colophon-t {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

/* ───── Guest cover overlay ─────
   The front page as it is folded on a stand: the masthead at the top of the sheet, the day's picture
   filling everything under it, and the jump line at the foot as the way in. Not one word is set over
   the photograph — shore-06 is the frame where the two of them read largest, and the only clear sky
   in it is the narrow band their heads rise into, which is no place for a masthead. A broadsheet
   would not print over it either: the name of the paper goes above the picture, always. */

.nci-cover--broad {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--brd-paper);
  color: var(--brd-ink);
  font-family: var(--brd-body);
  text-align: center;
}

.nci-cover--broad .brd-cv-mast {
  flex: none;
  padding: 5cqw var(--brd-m) 3cqw;
}

.nci-cover--broad .brd-cv-top {
  padding-bottom: 2.4cqw;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--brd-mute);
}

.nci-cover--broad .brd-cv-names {
  padding: 3.4cqw 0 3cqw;
  font-family: var(--brd-mast);
  font-size: 11.4cqw;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--brd-ink);
  overflow-wrap: anywhere;
}

.nci-cover--broad .brd-cv-amp {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 1.8cqw 0;
}

.nci-cover--broad .brd-cv-amp i {
  flex: 1;
  height: 1px;
  background: var(--brd-blue);
}

.nci-cover--broad .brd-cv-amp span {
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

.nci-cover--broad .brd-cv-ed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2.4cqw;
  padding-top: 2.6cqw;
  font-family: var(--brd-grot);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brd-ink-2);
}

.nci-cover--broad .brd-cv-ed span:first-child {
  text-align: left;
  overflow-wrap: anywhere;
}

.nci-cover--broad .brd-cv-ed span:last-child {
  text-align: right;
  white-space: nowrap;
}

.nci-cover--broad .brd-cv-ed-d {
  font-size: 2.9cqw;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--brd-blue);
}

.nci-cover--broad .brd-cv-photo {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--brd-paper-3);
}

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

.nci-cover--broad .brd-cv-jump {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.6cqw;
  width: 100%;
  padding: 4.4cqw var(--brd-m);
  border: none;
  border-top: 1px solid var(--brd-ink);
  background: var(--brd-paper);
  font-family: var(--brd-grot);
  font-size: 2.7cqw;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--brd-blue);
}

.nci-cover--broad .brd-cv-jump-arrow {
  font-size: 3.4cqw;
  line-height: 1;
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nci-cover--broad .brd-cv-jump:hover .brd-cv-jump-arrow {
  transform: translateX(3px);
}

.nci-cover--broad .brd-cv-jump:focus-visible {
  outline: 2px solid var(--brd-blue);
  outline-offset: -4px;
}

/* Opening: the sheet is turned — it lifts a little and goes, and page two is already underneath. */
.nci-cover--broad.brd-cv--opening {
  animation: brd-turn 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes brd-turn {
  to {
    opacity: 0;
    transform: translateY(-2.5%) scale(1.015);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nci-cover--broad.brd-cv--opening {
    animation: none;
  }

  .nci-cover--broad .brd-cv-jump-arrow {
    transition: none;
  }
}

/* ───── Floating bar — the paper's two ears, at the foot of the sheet ─────
   Square, ruled and joined into one strip, the way the small boxes at the top corners of a front
   page are ruled. It sits at the foot right: this page is centred on its measure and every block
   runs the full width, so the only silence left is the outer margin, and the right one keeps the
   strip off the running order's hours and the coupon's labels. */

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

.nci-float--broad button {
  width: 34px;
  height: 34px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--brd-ink);
  border-radius: 0;
  background: var(--brd-paper);
  font-family: var(--brd-grot);
  font-size: 0;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brd-ink);
  box-shadow: 0 3px 12px rgba(22, 19, 15, 0.18);
}

.nci-float--broad button + button {
  border-left: none;
}

.nci-float--broad .nci-float-dot {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 13px;
  line-height: 1;
  color: var(--brd-blue);
}

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

.nci-float--broad .nci-float-share::before {
  content: '\2197';
  font-size: 14px;
  line-height: 1;
  color: var(--brd-blue);
}

.nci-float--broad .nci-float-music[aria-pressed='true'] {
  background: var(--brd-ink);
}

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