/* Firefly's Catering Ops -- the customer pages' look: style 5A, "paper on the pit".

Jack picked it 2026-10-10 from a prototype of the full order page, after
feedback that the order page looked templated (v0.47 tried 5B, menu cards
on kraft; the cards were too dark, then too brown). The page is a charcoal
room; the menu is printed on sheets of butcher paper laid on it, one per
section; the order is a paper kitchen ticket; popups and panels are plain
paper. Loaded after theme.css only by the customer shells (order_online.html,
order_online_received.html, account.html, account_password.html,
public_base.html) and only acts under body.ff-paper: staff pages keep the
kitchen look in theme.css.

Type: Anton for big headings, Barlow / Barlow Condensed for text and labels,
IBM Plex Mono 500+ for prices, totals and order lines.

Text on paper is ink (no greys under 15px). Nothing that carries text is
ever rotated, skewed or filtered: a tilted layer is what made the v0.47
ticket blurry. Legibility is checked by tools/legibility_check.py and
tests/test_browser on every change (Jack, 2026-10-10). */

/* the charcoal runs to the bottom of short pages too */
html:has(> body.ff-paper) { background: #141110; }

body.ff-paper {
  --ff-char: #141110;
  --ff-char-2: #201a17;
  --ff-char-line: #3a312b;
  --ff-ember: #ff6b1f;
  --ff-ember-text: #ffa36b;   /* ember for small text on charcoal */
  --ff-bone: #f3ece3;
  --ff-ash: #e3d9cc;
  --ff-kraft: #d9c29a;
  --ff-ink-2: #2b241e;        /* descriptions on paper */
  --ff-rule: #b9a27a;         /* hairlines on kraft */
  --ff-paper: #fdfcf8;

  /* the shared tokens, re-pointed: panels and popups are paper */
  --ff-ink: #191714;
  --ff-muted: #3d352d;
  --ff-white: #fdfcf8;
  --ff-cream: #efe4cf;
  --ff-cream-light: #f7f1e6;
  --ff-sand: #d6c7a9;
  --ff-orange: #ff6b1f;
  --ff-orange-deep: #b8460a;
  --ff-radius: 3px;
  --ff-radius-sm: 2px;
  --ff-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  --ff-font-heading: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --ff-font-body: 'Barlow', Helvetica, Arial, sans-serif;
  --ff-font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --ff-font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --ff-bars: 132px;           /* top bar + section strip */

  /* daisyUI, so buttons, inputs and popups follow */
  --color-base-100: #fdfcf8;
  --color-base-200: #fdfcf8;
  --color-base-300: #d6c7a9;
  --color-base-content: #191714;
  --color-primary: #ff6b1f;
  --color-primary-content: #141110;
  --radius-field: 3px;
  --radius-box: 3px;
  --radius-selector: 3px;

  min-height: 100vh;
  background: var(--ff-char);
  color: var(--ff-ink);
}

/* ---------- type ---------- */
.ff-paper h1, .ff-paper h2 { font-family: var(--ff-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; }
.ff-paper h3, .ff-paper h4 { font-family: var(--ff-font-heading); font-weight: 700; }
.ff-paper h1 { font-size: 34px; line-height: 1; }
.ff-paper h2 { font-size: 26px; line-height: 1.05; }
.ff-paper a { color: var(--ff-ink); text-decoration-color: var(--ff-ember); text-decoration-thickness: 2px; }
.ff-paper a:hover { color: var(--ff-orange-deep); }
.ff-paper :focus-visible,
.ff-paper .btn:focus-visible, .ff-paper .input:focus-visible, .ff-paper .select:focus-visible, .ff-paper .textarea:focus-visible, .ff-paper .checkbox:focus-visible { outline: 3px solid var(--ff-ember); outline-offset: 2px; }
.ff-paper .btn { font-family: var(--ff-font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ff-paper .btn-primary { border-color: var(--ff-ember); }
.ff-paper .ff-skip { background: var(--ff-ember); color: var(--ff-char); }
.ff-paper .of-price, .ff-paper .of-line-total, .ff-paper .of-side-total strong { font-family: var(--ff-font-mono); font-weight: 700; }

/* ---------- top bar ---------- */
.ff-paper .of-topbar { background: var(--ff-char); border-bottom: 1px solid var(--ff-char-line); }
.ff-paper .of-topbar-title { font-family: var(--ff-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ff-ash); font-size: 17px; }
.ff-paper .of-topbar .btn-ghost, .ff-paper .of-topbar .btn-outline { color: var(--ff-bone); }
.ff-paper .of-topbar .btn-outline { border-color: var(--ff-char-line); }
.ff-paper .of-topbar .btn-ghost:hover { background: var(--ff-char-2); border-color: var(--ff-char-line); }
.ff-paper .of-bag { border-radius: var(--ff-radius); background: var(--ff-ember); color: var(--ff-char); font-family: var(--ff-font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 16px; }
.ff-paper .of-bag:hover { background: #ff8440; }
.ff-paper .of-bag .of-grill { color: var(--ff-char); }
.ff-paper .of-bag-count { background: var(--ff-char); color: var(--ff-bone); border-radius: 2px; font-family: var(--ff-font-mono); font-weight: 700; }

/* ---------- hero: smoke over the food, an ember rule under it ---------- */
.ff-paper .of-hero { color: var(--ff-bone); border-bottom: 6px solid var(--ff-ember);
  background: linear-gradient(0deg, rgba(20, 17, 16, 0.97) 4%, rgba(20, 17, 16, 0.62) 55%, rgba(20, 17, 16, 0.35)), url("/static/images/menu/three-meat-combo.jpg") center 75% / cover, var(--ff-char); }
.ff-paper .of-hero-inner { padding-top: 56px; padding-bottom: 28px; }
.ff-paper .of-hero h1 { color: var(--ff-bone); font-size: clamp(40px, 7vw, 76px); line-height: 0.92; margin-bottom: 12px; max-width: 12ch; }
.ff-paper .of-hero p { color: var(--ff-ash); }
.ff-paper .of-hero p strong { color: var(--ff-bone); }
.ff-paper .of-hero a { color: var(--ff-bone); }
.ff-paper .of-hero-pill { border-radius: var(--ff-radius); border-color: rgba(243, 236, 227, 0.55); background: rgba(20, 17, 16, 0.55); color: var(--ff-bone); font-family: var(--ff-font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 15px; }
.ff-paper .of-hero-pill:hover { border-color: var(--ff-ember); }
.ff-paper .of-service-pill.is-chosen { border-color: var(--ff-ember); }
.ff-paper .of-service-pill .of-service-pill-change { color: var(--ff-ember-text); }
.ff-paper .of-stamp { display: inline-block; margin: 4px 0 14px; padding: 5px 12px; border: 3px solid var(--ff-ember); color: var(--ff-ember); font-family: var(--ff-font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 16px; line-height: 1.1; }

/* ---------- section strip ---------- */
.ff-paper .of-catnav { background: var(--ff-char-2); border-bottom: 1px solid var(--ff-char-line); }
.ff-paper .of-cat { border-radius: var(--ff-radius); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ff-bone); border: 1px solid transparent; }
.ff-paper .of-cat:hover { background: transparent; border-color: var(--ff-char-line); }
.ff-paper .of-cat[aria-current="true"] { background: var(--ff-ember); color: var(--ff-char); }
.ff-paper .of-cat-holiday { background: transparent; color: var(--ff-ember-text); border-color: var(--ff-ember); }
.ff-paper .of-cat-holiday:hover { background: var(--ff-ember); color: var(--ff-char); }
.ff-paper .of-cats-arrow { border-radius: var(--ff-radius-sm); border-color: var(--ff-char-line); background: var(--ff-char); color: var(--ff-bone); }
.ff-paper .of-search .input { background: var(--ff-char); border-color: var(--ff-char-line); color: var(--ff-bone); }
.ff-paper .of-search .input::placeholder { color: #b3a89b; }
body.ff-paper.is-bar .of-cats-arrow { display: none; }
.ff-paper .of-modes { background: transparent; border-color: var(--ff-char-line); border-radius: var(--ff-radius); }
.ff-paper .of-mode { border-radius: var(--ff-radius-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ff-bone); }
.ff-paper .of-mode:hover { background: var(--ff-char); }
.ff-paper .of-mode[aria-selected="true"] { background: var(--ff-bone); color: var(--ff-char); }

/* ---------- the menu: one sheet of butcher paper per section ---------- */
.ff-paper .of-section, .ff-paper .of-holiday-banner {
  background-color: var(--ff-kraft); color: var(--ff-ink);
  background-image: radial-gradient(rgba(90, 60, 20, 0.09) 1px, transparent 1.2px), radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.2px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; }
.ff-paper .of-section { margin-top: 28px; padding: 22px 24px 10px; border-radius: 2px; box-shadow: var(--ff-shadow); scroll-margin-top: calc(var(--ff-bars) + 16px); }
.ff-paper .of-section h2 { font-size: 36px; line-height: 1; border-bottom: 3px double var(--ff-ink); padding-bottom: 6px; margin-bottom: 0; }
.ff-paper .of-section .of-lede { font-family: var(--ff-font-mono); font-weight: 500; font-size: 14.5px; color: var(--ff-ink); margin: 10px 0 4px; }
.ff-paper .of-grid { gap: 0 28px; }
@media (max-width: 480px) { .ff-paper .of-section { padding: 18px 16px 6px; } }

/* a menu item: a row on the paper, framed photo on the left */
.ff-paper .of-card { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 16px 0; background: transparent; color: var(--ff-ink); border: 0; border-bottom: 1px solid var(--ff-rule); border-radius: 0; box-shadow: none; overflow: visible; }
.ff-paper .of-card:hover { box-shadow: none; transform: none; }
.ff-paper .of-card:hover .of-card-name { text-decoration: underline; text-decoration-color: var(--ff-ember); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ff-paper .of-card:focus-visible { outline-offset: 4px; }
.ff-paper .of-card-photo, .ff-paper .of-card-nophoto { order: -1; width: 104px; height: 80px; min-height: 0; border: 3px solid var(--ff-paper); box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.3); }
.ff-paper .of-card-nophoto { background: var(--ff-cream); }
.ff-paper .of-card-nophoto img { width: 64px; opacity: 0.8; }
.ff-paper .of-card-body { padding: 0; }
.ff-paper .of-card-name { font-family: var(--ff-font-heading); font-weight: 700; font-size: 19px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; }
.ff-paper .of-card-blurb { color: var(--ff-ink-2); font-size: 15px; line-height: 1.4; }
.ff-paper .of-card-foot { margin-top: 0; padding-top: 6px; }  /* price sits under the words, not at the bottom of a tall row */
.ff-paper .of-card .of-price { color: var(--ff-ink); font-size: 15px; }
.ff-paper .of-card .of-price-unit { color: var(--ff-ink); font-family: var(--ff-font-mono); font-weight: 500; }
.ff-paper .of-card .of-diet span { background: transparent; color: var(--ff-ink); border: 1px solid var(--ff-ink); border-radius: 2px; font-family: var(--ff-font-mono); font-weight: 600; }
.ff-paper .of-card .of-card-weight { color: var(--ff-ink); }
.ff-paper .of-card .of-card-serves { color: var(--ff-ink); font-size: 14px; }
.ff-paper .of-card.is-fav { border-color: var(--ff-rule); box-shadow: none; }
.ff-paper .of-fav { background: var(--ff-char); color: var(--ff-ember-text); border-radius: 2px; font-family: var(--ff-font-mono); font-weight: 600; text-transform: uppercase; }
.ff-paper .of-fav svg { color: var(--ff-ember-text); }
@media (max-width: 480px) {
  .ff-paper .of-card { grid-template-columns: 84px minmax(0, 1fr); }
  .ff-paper .of-card-photo, .ff-paper .of-card-nophoto { width: 84px; height: 66px; }
}
.ff-paper .of-empty-search { color: var(--ff-bone); font-family: var(--ff-font-mono); font-weight: 500; }

/* ---------- how ordering works: a paper note ---------- */
.ff-paper .of-guide-card, .ff-paper .of-guide-summary { color: var(--ff-ink); border: 0; }
.ff-paper .of-guide-title { font-size: 24px; }
.ff-paper .of-guide-num { border-color: var(--ff-ink); background: var(--ff-paper); font-family: var(--ff-font-mono); }
.ff-paper .of-guide-step.is-current .of-guide-num { background: var(--ff-ember); border-color: var(--ff-ember); box-shadow: none; }
.ff-paper .of-guide-step.is-done .of-guide-num { border-color: var(--ff-ink); }
.ff-paper .of-guide-body strong { font-size: 17px; text-transform: uppercase; letter-spacing: 0.02em; }
.ff-paper .of-guide-step.is-current .of-guide-body strong { color: var(--ff-ink); }
.ff-paper .of-guide-body p { color: var(--ff-ink-2); font-size: 15px; }
@media (min-width: 1380px) {
  .ff-paper .of-guide { top: calc(var(--ff-bars) + 12px); }
  .ff-paper .of-guide-body p { font-size: 15px; }
  .ff-paper .of-guide-step:not(:last-child)::before { border-left-color: var(--ff-ink); opacity: 0.3; }
}

/* ---------- the order: a paper kitchen ticket ----------
   Never rotated, masked or filtered (that blurred the text in v0.47). The torn
   edge is a strip drawn under the card. */
.ff-paper .of-remove { color: var(--ff-ink); text-decoration-color: var(--ff-ember); text-decoration-thickness: 2px; }
.ff-paper .of-line { border-bottom: 1px dashed var(--ff-ink); }
.ff-paper .of-line-name { font-family: var(--ff-font-mono); font-weight: 700; text-transform: uppercase; font-size: 14.5px; }
.ff-paper .of-line-meta { font-family: var(--ff-font-mono); font-weight: 500; font-size: 14px; color: var(--ff-ink); }
.ff-paper .of-line-total { font-size: 14.5px; }
.ff-paper .of-summary { font-family: var(--ff-font-mono); font-weight: 700; }
@media (min-width: 1100px) {
  .ff-paper .of-side { top: calc(var(--ff-bars) + 12px); }
  .ff-paper .of-side::after { content: ""; display: block; height: 8px; background: conic-gradient(from -45deg at bottom, var(--ff-paper) 90deg, transparent 0) 0 0 / 16px 8px repeat-x; }
  .ff-paper .of-side-card { background: var(--ff-paper); border: 0; border-radius: 3px 3px 0 0; box-shadow: var(--ff-shadow); }
  /* popped into the middle of the screen, the ticket carries its own torn edge */
  .ff-paper .of-side.is-popped::after { visibility: hidden; }
  .ff-paper .of-side-card.is-popped { padding-bottom: 8px;
    background: conic-gradient(from -45deg at bottom, var(--ff-paper) 90deg, transparent 0) left bottom / 16px 8px repeat-x,
      linear-gradient(var(--ff-paper), var(--ff-paper)) top / 100% calc(100% - 8px) no-repeat; }
}
.ff-paper .of-side-head { background: var(--ff-char); border-bottom: 5px solid var(--ff-ember); }
.ff-paper .of-side-head h2 { color: var(--ff-bone); font-size: 24px; }
.ff-paper .of-side-head .of-grill .heat { color: var(--ff-ember); }
.ff-paper .of-side-head .of-bag-count { background: var(--ff-ember); color: var(--ff-char); border-radius: 2px; font-family: var(--ff-font-mono); }
.ff-paper .of-side-gingham { display: none; }
.ff-paper .of-side-event { background: var(--ff-paper); border-bottom: 1px dashed var(--ff-rule); }
.ff-paper .of-side-k { font-family: var(--ff-font-mono); font-weight: 700; letter-spacing: 0; color: var(--ff-ink); }
.ff-paper .of-side-event .of-side-row + .of-side-row { border-top: 1px dashed var(--ff-rule); }
.ff-paper .of-side-event .of-side-row strong.is-unset { font-weight: 600; color: var(--ff-ink); }
.ff-paper .of-side .of-line { border-bottom: 1px dashed var(--ff-ink); }
.ff-paper .of-side-foot { background: var(--ff-paper); border-top: 0; }
.ff-paper .of-side-total { font-family: var(--ff-font-mono); font-weight: 700; text-transform: uppercase; }
.ff-paper .of-side-per, .ff-paper .of-per-guest, .ff-paper .of-fineprint, .ff-paper .of-side-call, .ff-paper .of-bag-empty { color: var(--ff-ink); }
.ff-paper .of-side-per, .ff-paper .of-side-call { font-family: var(--ff-font-mono); font-weight: 500; font-size: 14px; }
.ff-paper .of-side .of-bag-empty { font-size: 16px; }
.ff-paper .of-stepper { border-color: var(--ff-ink); border-radius: var(--ff-radius-sm); }
.ff-paper .of-stepper input { font-family: var(--ff-font-mono); font-weight: 700; }
.ff-paper .of-bottombar { background: var(--ff-char); border-top: 4px solid var(--ff-ember); }

/* nudges on the ticket */
.ff-paper .of-round-out-row { border: 1px dashed var(--ff-ink); border-left: 4px solid var(--ff-ember); background: var(--ff-paper); }
.ff-paper .of-round-out-head strong { color: var(--ff-ink); }
.ff-paper .of-round-out-item { border-radius: var(--ff-radius-sm); border-color: var(--ff-ink); background: var(--ff-paper); font-weight: 700; }
.ff-paper .of-round-out-head .of-remove { color: var(--ff-ink); }
.ff-paper .of-guest-check { background: #fff3d6; border-color: var(--ff-ink); border-left: 4px solid var(--ff-ember); color: var(--ff-ink); }
.ff-paper .of-bag-bar { border-color: var(--ff-ink); color: var(--ff-ink); }

/* ---------- charcoal pieces on the charcoal page ---------- */
.ff-paper .of-bar-pitch { background: var(--ff-char-2); border: 1px solid var(--ff-char-line); border-left: 6px solid var(--ff-ember); border-radius: var(--ff-radius); }
.ff-paper .of-bar-pitch strong { font-family: var(--ff-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; font-size: 24px; color: var(--ff-ember-text); }
.ff-paper .of-bar-pitch span { color: var(--ff-ash); }
.ff-paper .of-reviews { margin-top: 28px; background: var(--ff-char-2); border: 1px solid var(--ff-char-line); border-radius: var(--ff-radius); }
.ff-paper .of-reviews::before { color: var(--ff-ember); }
.ff-paper .of-reviews-head h2 { color: var(--ff-bone); font-size: 28px; }
.ff-paper .of-reviews-hint { color: var(--ff-ash); }
.ff-paper .of-review { background: var(--ff-paper); color: var(--ff-ink); border-top-color: var(--ff-ember); }
.ff-paper .of-review figcaption { color: var(--ff-ink); }
.ff-paper .of-review-stars { color: var(--ff-orange-deep); }

/* the Bar tab is one more sheet; its steps are paper cards on it */
.ff-paper .of-bar-step, .ff-paper .of-bar-more, .ff-paper .of-bar-added, .ff-paper .of-bar-pickup { border-color: var(--ff-ink); color: var(--ff-ink); }
.ff-paper .of-bar-step legend { font-family: var(--ff-font-heading); text-transform: uppercase; letter-spacing: 0.03em; font-size: 19px; }
.ff-paper .of-bar-num { background: var(--ff-char); color: var(--ff-bone); border-radius: 2px; font-family: var(--ff-font-mono); }
.ff-paper .of-bar-top { background: var(--ff-char); color: var(--ff-ember-text); border-radius: 2px; }
.ff-paper .of-bar-choice.is-top { border-color: var(--ff-ember); }
.ff-paper .of-bar-choice-desc, .ff-paper .of-bar-fine, .ff-paper .of-bar-more dd { color: var(--ff-ink-2); }
.ff-paper .of-bar-choice:has(input:checked) .of-bar-choice-title::before { color: var(--ff-ink); }
.ff-paper .of-bar-nudge { border-color: var(--ff-ink); }

/* holidays */
.ff-paper .of-holiday-banner { border: 0; border-left: 6px solid var(--ff-ember); box-shadow: var(--ff-shadow); }

/* ---------- popups: plain paper ---------- */
.ff-paper .modal-box { color: var(--ff-ink); }
.ff-paper .of-dialog { border-radius: var(--ff-radius); }
.ff-paper .of-dialog-head h2 { font-size: 28px; }
.ff-paper .of-dialog-head p { color: var(--ff-ink-2); }
.ff-paper .of-dialog-close { border-radius: var(--ff-radius-sm); border-color: var(--ff-ink); }
.ff-paper .of-service { border-color: var(--ff-sand); }
.ff-paper .of-service:hover, .ff-paper .of-service[aria-pressed="true"] { border-color: var(--ff-ember); }
.ff-paper .of-service[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--ff-ember); }
.ff-paper .of-service-title { font-family: var(--ff-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; font-size: 22px; color: var(--ff-ink); }
.ff-paper .of-service-fine { color: var(--ff-ink-2); }
.ff-paper .of-service-pick { color: var(--ff-ink); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: var(--ff-ember); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ff-paper .of-req.is-done { background: var(--ff-char); color: var(--ff-bone); }
.ff-paper .of-group-head small, .ff-paper .of-choice .of-extra, .ff-paper .of-cal-legend, .ff-paper .of-cal-head span, .ff-paper .of-cal-day .w { color: var(--ff-ink-2); }
.ff-paper .of-cal-day.is-selected, .ff-paper .of-slot.is-chosen, .ff-paper .of-slot:has(input:checked) { border-color: var(--ff-ember); box-shadow: 0 0 0 2px var(--ff-ember); }
.ff-paper .of-tabs .tab { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- the other customer pages (account, received, tracking) ---------- */
.ff-paper .ff-page-head h1 { color: var(--ff-bone); font-size: clamp(32px, 5vw, 48px); }
.ff-paper .ff-page-head .ff-sub, .ff-paper .ff-page-head .ff-muted, .ff-paper .ff-page-head p { color: var(--ff-ash); }
.ff-paper .ff-panel { color: var(--ff-ink); }
.ff-paper .of-order { border: 0; box-shadow: var(--ff-shadow); color: var(--ff-ink); }
.ff-paper .of-order-items { color: var(--ff-ink-2); }
.ff-paper .of-order-head h3 { font-family: var(--ff-font-mono); font-weight: 700; }
.ff-paper .ff-public { padding-top: 0; }
.ff-paper .ff-public > h1:first-child { margin: 0 calc(var(--ff-s4) * -1) var(--ff-s5); padding: var(--ff-s4) 0; border-bottom: 6px solid var(--ff-ember); }
.ff-paper .ff-public .brand-logo { margin-bottom: 0; height: 72px; }
.ff-paper .ff-public .ff-panel h1, .ff-paper .ff-public .ff-panel h2 { font-size: 32px; }
.ff-paper .ff-public input.input { font-family: var(--ff-font-mono); font-size: 18px; }
.ff-paper .ff-panel .ff-muted, .ff-paper .ff-panel .ff-caption, .ff-paper .ff-panel small { color: var(--ff-ink-2); }
.ff-paper .ff-step.current .ff-step-dot { background: var(--ff-char); box-shadow: 0 0 0 3px var(--ff-ember); }
.ff-paper .ff-step-dot { border-color: var(--ff-paper); }
.ff-paper .ff-step-label { font-family: var(--ff-font-heading); font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ff-ink); }