/* ============================================================================
   cards.css — printed artwork.
   ----------------------------------------------------------------------------
   Cards are sized in millimetres and everything inside them is expressed in em,
   so a single template renders correctly on a 50 mm sticker and a 210 mm rack
   card alike. Colours are literal hex, never theme tokens: this artwork is
   always ink on white paper, whatever the site's theme is doing.
   ========================================================================== */

.pcard {
  --ink:   #16130f;
  --soft:  #554d42;
  --faint: #8c8376;
  --gold:  #d29a12;
  --hair:  #d9d2c6;

  /* The shorter side governs anything square, so a landscape card doesn't end up
     with a QR taller than the card itself. --qscale sizes it against that side;
     --qcap is a second ceiling against the card height. Templates override both. */
  --qmin: min(var(--cw), var(--ch));
  --qscale: .52;
  --qcap: .46;

  position: relative;
  width: var(--cw);
  height: var(--ch);
  /* One knob drives the whole type scale, bounded by both dimensions. */
  font-size: min(calc(var(--ch) * 0.058), calc(var(--cw) * 0.048));
  font-family: "Archivo", Helvetica, Arial, sans-serif;
  line-height: 1.3;
  color: var(--ink);
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.pc-body { flex: 1; display: flex; flex-direction: column; padding: 1.1em 1.2em; min-height: 0; }
.pc-body--tight { padding-top: .8em; }
.pc-center { align-items: center; justify-content: center; text-align: center; }
.pc-grow { flex: 1; min-height: 0; }

/* ── type ─────────────────────────────────────────────────────────────── */
.pc-name {
  margin: 0 0 .55em; font-size: .62em; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.pc-head {
  margin: 0 0 .7em; font-size: 1.22em; font-weight: 600; line-height: 1.12; letter-spacing: -.01em;
}
.pc-head--serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.5em; }
.pc-sub { margin: .55em 0 0; font-size: .66em; font-weight: 600; color: var(--soft); }
.pc-mono { font-family: "IBM Plex Mono", monospace; font-weight: 400; letter-spacing: -.02em; }
.pc-eyebrow {
  margin: 0 0 .5em; font-size: .55em; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
  font-family: "IBM Plex Mono", monospace;
}

.pc-stars { display: flex; gap: .16em; margin-bottom: .6em; }
.pc-stars svg { width: .82em; height: .82em; fill: var(--gold); display: block; }

/**
 * Three bounds, smallest wins:
 *   1. a share of the card's shorter side  — keeps it proportionate
 *   2. a share of the card's height        — stops it dominating a short card
 *   3. the height actually left over       — --qlead is everything else on the
 *      card, expressed in em (which already scales with the card) plus any fixed
 *      band. Without this third term a landscape card overflows, because the type
 *      is sized off the width and eats the room the QR assumed it had.
 */
.pcard { --qlead: 0px; }
.pc-qr {
  width: min(
    calc(var(--qmin) * var(--qscale)),
    calc(var(--ch) * var(--qcap)),
    calc(var(--ch) - var(--qlead))
  );
  aspect-ratio: 1; flex: none;
}
.pc-qr svg { display: block; width: 100%; height: 100%; }

/* ── template: banner ─────────────────────────────────────────────────── */
.pc-banner {
  background: var(--ink); color: #fff; text-align: center;
  padding: .6em 1em; font-size: .72em; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  display: flex; flex-direction: column; gap: .15em; flex: none;
}
.pc-banner--front { text-align: left; align-items: flex-start; }
.pc-banner em {
  font-style: normal; font-weight: 400; font-size: .78em;
  letter-spacing: .04em; text-transform: none; color: #d8d1c4;
}
.pcard--banner { --qscale: .46; --qcap: .38; }

/* ── template: split ──────────────────────────────────────────────────── */
.pc-split { flex-direction: row; align-items: center; gap: 1em; text-align: left; }
/* Side by side, so the QR is limited by height rather than by width. */
.pc-split__qr {
  width: min(calc(var(--qmin) * .66), calc(var(--ch) * .64), 42%);
  flex: none; aspect-ratio: 1;
}
.pc-split__qr svg { display: block; width: 100%; height: 100%; }
.pc-split__txt { flex: 1; min-width: 0; }
.pc-split__txt .pc-head { font-size: 1.02em; margin-bottom: .3em; }
.pc-split__txt .pc-sub { margin-top: .3em; }

/* ── template: minimal ────────────────────────────────────────────────── */
.pcard--minimal { --qscale: .62; --qcap: .62; }
.pc-minimal .pc-sub { font-size: .58em; letter-spacing: .06em; text-transform: uppercase; }

/* ── template: ticket ─────────────────────────────────────────────────── */
.pc-ticket { padding: .5em; }
.pc-ticket__inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed var(--hair); border-radius: .3em; padding: .8em;
}
.pcard--ticket { --qscale: .44; --qcap: .36; }
.pcard--ticket .pc-head { font-size: 1em; }
.pcard--ticket .pc-name { margin: .5em 0 0; }

/* ── template: seal ───────────────────────────────────────────────────── */
.pcard--seal { --qscale: .40; --qcap: .30; }
.pc-seal__ring {
  position: relative; display: grid; place-items: center; flex: none;
  width: min(calc(var(--qmin) * .60), calc(var(--ch) * .48));
  aspect-ratio: 1; border-radius: 50%;
  background: #fdf6e4; border: .12em solid var(--gold);
  margin: .2em 0 .5em;
}
.pcard--seal .pc-stars { margin: 0 0 .35em; }

/* ── business card backs ──────────────────────────────────────────────── */
/* Stationery, not marketing. One quiet line under the code, nothing else. */
.pcard--b-quiet { --qscale: .68; --qcap: .64; }
.pcard--b-mark  { --qscale: .52; --qcap: .48; }
.pcard--b-panel { --qscale: .50; --qcap: .46; }
.pcard--b-side  { --qscale: .60; --qcap: .60; }

/* b-side draws its code through .pc-split__qr, not --qscale, so it needs its own
   override — the shared rule also serves the review "split" template, which is
   a different card at a different size and should not move with this.
   Held at .70/44% rather than the .74/48% that also renders clean: this layout
   sets the QR beside the text, so a long address wraps into extra lines and eats
   the margin. At .74 the stress sweep degraded 11px past the old value; at .70
   it is within 3px, and the code is still 8% larger than before. */
.pcard--b-side .pc-split__qr {
  width: min(calc(var(--qmin) * .70), calc(var(--ch) * .68), 44%);
}

.pc-cap {
  margin: .7em 0 0; font-size: .54em; font-weight: 600; color: var(--soft);
  letter-spacing: .1em; text-transform: uppercase;
}
.pc-cap--left { text-align: left; letter-spacing: .06em; }
.pc-cap--light { color: #cdc5b6; }
.pc-cap--url {
  margin-top: .35em; text-transform: none; letter-spacing: 0;
  font-family: "IBM Plex Mono", monospace; font-weight: 400; color: var(--faint);
}

.pc-mono-mark {
  font-family: "Instrument Serif", Georgia, serif; font-size: 1.5em; line-height: 1;
  color: var(--gold); margin-bottom: .45em; letter-spacing: .04em;
}

.pc-back--panel { background: var(--ink); }
.pc-back--panel .pc-qr--tile {
  background: #fff; padding: .3em; border-radius: .25em;
  box-sizing: content-box;
}
.pc-back__biz {
  margin: 0 0 .6em; font-size: .62em; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
}
.pc-back__biz--dark { color: var(--ink); }
.pcard--b-side .pc-back__biz { margin-bottom: .35em; }
.pcard--b-side .pc-rule { margin: .35em 0 .5em; }

/* ── business card fronts ─────────────────────────────────────────────── */
.pc-front { justify-content: center; }
.pc-biz {
  margin: 0 0 .25em; font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400; font-size: 1.5em; line-height: 1.06; letter-spacing: -.01em;
}
.pc-biz--left { text-align: left; }
.pc-biz--big { font-size: 1.95em; }
.pc-tagline { margin: 0; font-size: .6em; color: var(--faint); letter-spacing: .04em; }
.pc-rule { width: 2.4em; height: .08em; background: var(--gold); margin: .55em 0; flex: none; }
.pc-person { margin: 0; font-size: .78em; font-weight: 700; letter-spacing: -.005em; }
.pc-role {
  margin: .08em 0 0; font-size: .58em; color: var(--faint);
  letter-spacing: .1em; text-transform: uppercase;
}

.pc-contact { display: flex; flex-direction: column; gap: .12em; margin-top: .6em; }
.pc-contact--center { align-items: center; }
.pc-contact--right { align-items: flex-end; text-align: right; }
.pc-ct {
  font-size: .56em; color: var(--soft); line-height: 1.45;
  display: flex; gap: .5em; align-items: baseline;
}
.pc-contact--right .pc-ct { flex-direction: row-reverse; }
.pc-ct b {
  font-weight: 700; color: var(--gold); font-size: .85em;
  letter-spacing: .08em; flex: none; width: 1em;
}
.pc-ct--addr { color: var(--faint); }
.pc-ct--addr b { display: none; }

.pc-front--rule { flex-direction: row; padding: 0; }
.pc-front__bar { width: .55em; background: var(--gold); flex: none; }
.pc-front__col { flex: 1; display: flex; flex-direction: column; padding: 1.1em 1.2em; min-width: 0; }
.pc-front--minimal { padding: 1.3em 1.3em; }
.pc-front__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; }
.pc-front__foot .pc-contact { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════
   The bold, brand-coloured family.
   --brand is the house colour; --brand-ink is black or white, chosen in JS
   from the brand's luminance so text stays legible on yellow and on navy.
   --photo is set once per sheet, so a 10-up page carries one copy of the
   image data rather than ten.
   ══════════════════════════════════════════════════════════════════════ */

/* Defaults live on the root, NOT on .pcard. A custom property declared on the
   element itself beats one inherited from an ancestor, so declaring these on
   .pcard would make the brand colour set on the sheet wrapper a no-op. */
:root { --brand: #e8412c; --brand-ink: #ffffff; }

/* the curved sweep, and the photo that sits inside it */
.pc-sweep, .pc-photo {
  position: absolute; top: 0; bottom: 0; right: 0;
  display: block; pointer-events: none;
}
/* Centre the ellipse beyond the right edge with a tall radius: the part that
   lands on the card is the long, shallow C the reference templates use. */
.pc-sweep { width: 62%; background: var(--brand); clip-path: ellipse(78% 152% at 112% 50%); }
.pc-photo {
  width: 62%; clip-path: ellipse(74% 148% at 118% 50%);
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
  background-color: #d8d2c8;
}

/* wave variant — colour band across the top instead of down the side */
.pc-sweep--top, .pc-photo--top {
  inset: 0 0 auto 0; width: auto; height: 46%;
  clip-path: ellipse(135% 100% at 50% 0);
}
.pc-wave {
  position: absolute; left: -4%; right: -4%; top: 34%; height: 20%;
  background: var(--brand); clip-path: ellipse(120% 100% at 50% 100%);
  pointer-events: none;
}

/* layout: text column on the left, QR pinned to its right */
.pc-bold {
  position: relative; z-index: 1;
  width: 62%; flex-direction: row; align-items: center; gap: .5em;
  padding: 1em 0 1em 1.1em;
}
.pc-bold__txt { flex: 1; min-width: 0; }
.pc-bold__qr { flex: none; }

.pc-bname {
  margin: 0; font-size: 1.14em; font-weight: 700; line-height: 1.1;
  letter-spacing: .01em; text-transform: uppercase; color: var(--ink);
}
.pc-bname i { font-style: normal; color: var(--brand); }
.pc-bname b { font-weight: 700; }
.pc-bname--light { color: #fff; }
/* On the charcoal card the brand colour is doing the work in the role line and
   the wave; a brand-coloured surname here would be red on near-black. */
.pc-bname--light i { color: inherit; opacity: .62; }

.pc-brole {
  margin: .18em 0 .6em; font-size: .6em; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.pc-brole--accent { color: var(--brand); }

.pc-irows { display: flex; flex-direction: column; gap: .28em; }
.pc-irow { display: flex; align-items: center; gap: .45em; min-width: 0; }
.pc-ico {
  flex: none; width: 1.35em; height: 1.35em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
}
.pc-ico svg { width: .78em; height: .78em; display: block; }
.pc-itxt {
  font-size: .68em; line-height: 1.32; color: var(--soft);
  overflow-wrap: anywhere; min-width: 0;
  /* A long address would otherwise wrap to four lines and push the card over on
     the smaller sizes. Two lines is all a contact row needs. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-irows--light .pc-itxt { color: #ddd7cd; }

/* QR on a white tile, for dark or coloured grounds */
.pc-qr--tile {
  background: #fff; padding: .28em; border-radius: .22em; box-sizing: content-box;
}

/* wave front: charcoal card, content below the colour band */
.pcard--f-wave { background: #2f3237; }
.pcard--f-wave .pc-bold { margin-top: calc(var(--ch) * .42); width: 100%; padding-right: 1.1em; }
.pcard--f-wave { --qscale: .40; --qcap: .38; }

/* solid block front: the whole card is the brand colour */
.pcard--f-block { background: var(--brand); }
.pcard--f-block .pc-bold { width: 100%; padding-right: 1.1em; }
.pcard--f-block .pc-bname { color: var(--brand-ink); }
.pcard--f-block .pc-bname i { color: var(--brand-ink); opacity: .72; }
.pcard--f-block .pc-brole { color: var(--brand-ink); opacity: .72; }
.pcard--f-block .pc-itxt { color: var(--brand-ink); opacity: .88; }
.pcard--f-block .pc-ico { background: var(--brand-ink); color: var(--brand); }
.pc-rule--dark { background: currentColor; opacity: .25; width: 100%; margin: .5em 0; }
.pcard--f-block .pc-rule--dark { color: var(--brand-ink); }

/* Sweep keeps the smallest rise of the family: its text column is boxed into
   62% of the card, the tightest of any front. */
.pcard--f-sweep { --qscale: .40; --qcap: .38; }
.pcard--f-block { --qscale: .42; --qcap: .40; }

/* side panel front: a solid colour column with a monogram, details alongside */
.pc-panel {
  position: absolute; inset: 0 auto 0 0; width: 30%;
  background: var(--brand); display: grid; place-items: center; overflow: hidden;
}
.pc-photo--panel { inset: 0; width: 100%; clip-path: none; opacity: .34; }
.pc-panel__mark {
  position: relative; font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.1em; line-height: 1; color: var(--brand-ink); letter-spacing: .04em;
}
.pcard--f-panel .pc-bold { width: 70%; margin-left: 30%; padding-left: .9em; padding-right: .9em; }
/* Raised less than the full-width fronts: this one's text column lives in 70%
   of the card, so the QR and the contact rows are competing for the same room. */
.pcard--f-panel { --qscale: .36; --qcap: .34; }

/* corner arc front: a quarter-round of colour in the bottom-right */
.pc-arc {
  position: absolute; right: -18%; bottom: -46%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: var(--brand); pointer-events: none;
}
.pc-photo--disc {
  position: absolute;
  /* `inset` must come after the width, and undoes the top/bottom:0 that
     .pc-sweep, .pc-photo sets — hence the shorthand rather than right/bottom. */
  width: 30%; aspect-ratio: 1; border-radius: 50%;
  clip-path: none; border: .14em solid #fff; inset: auto 4% 8% auto;
}
.pcard--f-arc .pc-bold { width: 100%; align-items: stretch; padding-right: 1.1em; }
/* Keep the copy clear of the arc in the bottom-right corner. */
.pcard--f-arc .pc-bold__txt { display: flex; flex-direction: column; width: 62%; flex: none; }
.pcard--f-arc .pc-bold__qr { align-self: flex-start; }
.pcard--f-arc { --qscale: .36; --qcap: .34; }
.pc-biz--brand { color: var(--brand); font-size: 1.35em; }
.pc-bname--sm { font-size: .84em; }

/* brand curve back: colour sweep behind, QR and wordmark side by side */
.pc-sweep--back { width: 58%; }   /* clip-path inherited from .pc-sweep */
.pc-back--curve {
  flex-direction: row; align-items: center; gap: .8em; text-align: left;
  position: relative; z-index: 1;
}
.pc-back__col { flex: 1; min-width: 0; }
.pcard--b-curve { --qscale: .58; --qcap: .60; }
.pc-wordmark--dark { color: var(--ink); font-size: 1.1em; }
.pc-wordmark__tag--dark { color: var(--faint); opacity: 1; }

/* ── brand-coloured backs ─────────────────────────────────────────────── */
.pc-back--brand { background: var(--brand); }
/* The QR is the point of this face, so it gets the space; the wordmark shrinks
   to suit rather than the other way round. */
.pcard--b-brand { --qscale: .56; --qcap: .52; }
.pcard--b-wordmark { --qscale: .46; --qcap: .46; }

.pc-wordmark {
  margin: 0 0 .1em; font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.25em; line-height: 1.05; color: var(--brand-ink);
}
.pc-wordmark--big { font-size: 1.9em; }
.pc-wordmark__tag {
  margin: 0 0 .45em; font-size: .5em; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-ink); opacity: .78;
}
.pcard--b-brand .pc-cap { margin-top: .45em; }
.pc-back--brand .pc-cap--light { color: var(--brand-ink); opacity: .85; }

.pc-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .4em 1em; text-align: center;
  font-size: .5em; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-ink); opacity: .9;
}
.pc-strip::before {
  content: ""; position: absolute; left: 1.4em; right: 1.4em; top: 0;
  border-top: 1px solid currentColor; opacity: .45;
}
.pc-back--brand { padding-bottom: 1.6em; }

.pc-back--wordmark { align-items: stretch; text-align: left; }
.pc-wordmark__foot { display: flex; align-items: center; gap: .7em; }
.pc-back--wordmark .pc-wordmark, .pc-back--wordmark .pc-wordmark__tag { text-align: left; }

/* ══════════════════════════════════════════════════════════════════════
   Badge family — counter stands and tap cards.
   --band is the dominant colour, --surface the card ground, --band-ink and
   --surface-ink the text that sits on each. All four are set in JS from the
   chosen palette so no combination ends up unreadable.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --band: #1a3a8f; --surface: #ffffff;
  --band-ink: #ffffff; --surface-ink: #16130f;
}

.pcard--r-appreciate, .pcard--r-ring, .pcard--r-script,
.pcard--r-plaque, .pcard--r-tap {
  background: var(--surface); color: var(--surface-ink);
}

.pc-badge { justify-content: space-between; padding: 0; height: 100%; }
.pc-badge__top, .pc-badge__low {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: .9em 1em;
  /* above the band's wave, which overhangs its own box */
  position: relative; z-index: 1;
}

/* the coloured header with a soft wave along its lower edge */
.pc-badge__band {
  position: absolute; inset: 0 0 auto 0; height: 38%;
  background: var(--band); pointer-events: none;
}
.pc-badge__band::after {
  content: ""; position: absolute; left: -12%; right: -12%; bottom: -1.5em;
  height: 3em; background: inherit;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.pcard--r-appreciate .pc-badge__top { position: relative; z-index: 1; color: var(--band-ink); padding-top: 1.2em; }
.pcard--r-appreciate .pc-badge__low { justify-content: center; flex: 1; }

.pc-badge__head {
  margin: 0; font-size: 1.02em; font-weight: 800; line-height: 1.18;
  letter-spacing: .005em; text-transform: uppercase;
}
.pc-badge__head--tight { margin-bottom: .5em; }
.pc-badge__head--script {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: 1.5em; text-transform: none; letter-spacing: 0; margin-bottom: .5em;
}
.pc-badge__kicker {
  margin: 0 0 .5em; font-size: .76em; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.pc-badge__sub {
  margin: .55em 0 0; font-size: .56em; font-weight: 600;
  letter-spacing: .06em; color: inherit; opacity: .78;
}
/* Always present: whose review this is. */
.pc-bizname {
  margin: .5em 0 0; font-size: .62em; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--band);
  max-width: 100%; overflow-wrap: anywhere;
}
/* Only r-tap: the brand-coloured backs never render a business-name line. */
.pcard--r-tap .pc-bizname { color: inherit; opacity: .85; }

.pc-stars--band svg { fill: currentColor; }
.pc-stars--band { margin-bottom: .5em; opacity: .95; }
.pc-stars--wide { gap: .22em; margin: .5em 0 0; }
.pc-stars--wide svg { width: .95em; height: .95em; fill: var(--band); }

/* marks and logo */
.pc-mark { width: 2.3em; height: 2.3em; margin: .1em 0 .5em; }
.pc-mark svg { width: 100%; height: 100%; display: block; }
.pc-mark svg:not(.pc-g) { color: var(--band); }
.pc-logo {
  width: 3.2em; height: 2em; margin: .1em 0 .5em;
  background-image: var(--logo, none);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}

/* the NFC tap block */
.pc-tap { display: flex; flex-direction: column; align-items: center; gap: .3em; color: inherit; }
.pc-tap svg { width: 3.4em; height: 2.1em; display: block; }
.pc-tap span {
  font-size: .5em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75;
}
/* Compact form that sits under the QR on every review card. */
.pc-tap--sm { flex-direction: row; gap: .45em; align-items: center; }
.pc-tap--sm svg { width: 1.7em; height: 1.1em; }
.pc-tap--sm span { font-size: .46em; }
.pc-tap--left { justify-content: flex-start; margin-top: .45em; }

/* QR above, tap mark below — stacked, so it can never outgrow the card's width. */
.pc-action--both {
  display: flex; flex-direction: column; align-items: center; gap: .5em; width: 100%;
}

/* colour ring */
/* The ring is bounded by leftover height too — the tap mark now sits below it. */
.pc-ring {
  position: relative;
  width: min(calc(var(--qmin) * .70), calc(var(--ch) * .46), calc(var(--ch) - 15.5em));
  aspect-ratio: 1; display: grid; place-items: center; margin: .2em 0 .5em;
}
.pc-ring__arc {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0);
  /* closest-side, or the hole is measured to the corner and the ring lands
     outside the element entirely. */
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 78%, #000 78.5%);
  mask: radial-gradient(circle closest-side, transparent 0 78%, #000 78.5%);
}
.pc-ring__in { position: relative; width: 66%; display: grid; place-items: center; }
.pc-ring__in .pc-qr { width: 100%; }

/* framed QR, as on the engraved stands */
.pc-frame {
  padding: .34em; border-radius: .2em; background: var(--band);
  box-shadow: 0 0 0 .12em var(--surface) inset;
  display: inline-flex;
}

.pc-nfc-top { display: block; width: 1.5em; height: 1.5em; color: currentColor; opacity: .75; margin-bottom: .45em; }
.pc-nfc-top svg { width: 100%; height: 100%; }

.pcard--r-plaque .pc-body, .pcard--r-tap .pc-body { justify-content: center; padding: 1.1em 1em; }
.pcard--r-script .pc-body { justify-content: center; padding: 1.1em 1em; }
.pcard--r-ring .pc-body { justify-content: center; padding: 1em; }

/* Sized up so the code dominates the card — it is the only thing on it that has
   to work at arm's length. Bounds verified against the overflow sweep. */
/* --qlead: the band, plus the em-height of the mark, stars, headline, sub-line,
   business name and padding that share the card with the code. */
/* --qlead includes ~2.6em for the tap mark, which every review card now carries. */
.pcard--r-appreciate { --qscale: .52; --qcap: .40; --qlead: calc(var(--ch) * .38 + 10em); }
.pcard--r-ring       { --qscale: .40; --qcap: .26; --qlead: 13.6em; }
.pcard--r-script     { --qscale: .60; --qcap: .42; --qlead: 11.2em; }
.pcard--r-plaque     { --qscale: .54; --qcap: .36; --qlead: 14em; }
.pcard--r-tap        { --qscale: .58; --qcap: .40; --qlead: 13em; }

/* The typographic set carries the tap mark too, so it needs the same allowance. */
.pcard--classic { --qlead: 10.5em; }
.pcard--banner  { --qlead: 10.5em; }
.pcard--minimal { --qlead: 7.5em; }
.pcard--ticket  { --qlead: 12.5em; }

/* ── table tent ───────────────────────────────────────────────────────── */
.pc-tent { width: var(--cw); display: flex; flex-direction: column; background: #fff; }
.pc-tent__flip { rotate: 180deg; }
.pc-tent__fold { height: 0; border-top: 1px dashed #c9c0b0; flex: none; }

/* ── cut guides ───────────────────────────────────────────────────────────
   Registration marks outside the trim can't work here: .pcard is
   `overflow: hidden` (the sweeps and wave bulges depend on it), so anything
   drawn beyond the card box is clipped away — the previous ::before/::after
   marks rendered nothing at all. An outline sits outside the padding box and is
   NOT clipped by the element's own overflow, so the trim line is drawn that way
   instead, and it is what you actually cut along. */
/* Covers the tent too — cards.js puts pcard--marks on the .pc-tent wrapper. */
.pcard--marks { outline: .2mm dashed #b9b0a1; outline-offset: 0; }

/* ── sheet layout ─────────────────────────────────────────────────────── */
.pc-sheet {
  display: grid;
  grid-template-columns: repeat(var(--cols), max-content);
  justify-content: center;
  align-content: start;
  background: #fff;
}

/* ═══════════════════════════ print ═══════════════════════════ */
@media print {
  @page { size: A4; margin: 10mm; }

  html, body { background: #fff !important; }
  .masthead, main, .colophon, .toast, .grain, .modal, .skip-link { display: none !important; }

  .print-sheet { display: block !important; }
  .print-sheet .pc-sheet { page-break-inside: auto; }
  .print-sheet .pcard, .print-sheet .pc-tent { page-break-inside: avoid; break-inside: avoid; }
  .print-sheet .pc-page + .pc-page { page-break-before: always; break-before: page; }
  .print-sheet .pcard { transform: none !important; }
}