/* ── Physical card renderer (.pc-*) ─────────────────────────
   The six approved print designs (Meridian, Solstice, Verdigris,
   Tessellate, Overprint, Transit) in landscape (85 × 54) and portrait
   (54 × 85). Markup: views/includes/print-card.pug. Colors arrive as
   --c-* role variables on the face (public/scripts/print-palette.js
   resolves them from the card's five editor colors). Units: in landscape
   1cqw is 1% of the 85 mm side; portrait uses 1.5741cqw for the same
   0.85 mm unit, so type sizes carry over between orientations.
   Generative art (contours, halftone) is drawn by print-card.js. */

.pc-face {
    position: relative; width: 100%; max-width: 100%; aspect-ratio: 85 / 54;
    container-type: inline-size; border-radius: 1cqw; overflow: hidden;
    box-shadow: 0 10px 28px -12px rgba(36, 33, 26, .35), 0 2px 6px -2px rgba(36, 33, 26, .2);
    isolation: isolate; background: #fff;
}
.pc-face.pc-portrait { aspect-ratio: 54 / 85; border-radius: calc(1 * 1.5741cqw); }
.pc-art { position: absolute; inset: 0; font-size: 1cqw; line-height: 1.2; }
.pc-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pc-safe { position: absolute; inset: 5.56% 3.53%; border: 1px dashed rgba(255, 0, 90, .75); pointer-events: none; z-index: 5; display: none; }
.pc-show-safe .pc-safe { display: block; }
.pc-portrait .pc-safe { inset: 3.53% 5.56%; }
.pc-qr { position: absolute; display: block; color: var(--c-bi); }
.pc-qr svg { width: 100%; height: 100%; display: block; }

/* Logo slot — the customer's uploaded logo, any image, contained */
.pc-logo { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--c-fi); }
.pc-logo svg, .pc-logo img { width: 100%; height: 100%; object-fit: contain; }
.pc-logo.on-accent { color: var(--c-fai); }
.pc-logo.on-paper { color: var(--c-bi); }

/* Edit-in-place: the name/title/company are inputs styled as the card
   text (same trick as the digital card's .ocard-edit) */
.pc-edit .pc-in {
    cursor: text; outline: none; border-bottom: .3cqw dashed transparent; min-width: 8cqw;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.pc-edit .pc-in:hover { border-bottom-color: color-mix(in srgb, currentColor 35%, transparent); }
.pc-edit .pc-in:focus { border-bottom-color: currentColor; }
.pc-edit .pc-in:empty::before { content: attr(data-placeholder); opacity: .45; pointer-events: none; }
.pc-edit .pc-logo { cursor: pointer; }
.pc-edit .pc-logo:hover { outline: .3cqw dashed color-mix(in srgb, currentColor 45%, transparent); outline-offset: .6cqw; }
.pc-edit .pc-logo .pc-chip {
    font: 600 2.4em/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    padding: .5em .9em; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #f7f4ed; opacity: .85;
}
.pc-edit .pc-uploading { pointer-events: none; opacity: .5; }

/* ---------- 1. Meridian ---------- */
.pc-meridian-f { background: var(--c-fg); color: var(--c-fi); font-family: Archivo, 'Arial Narrow', sans-serif; }
.pc-meridian-f .pc-name { position: absolute; left: 7cqw; bottom: 15.5cqw; font-size: 9.2em; font-weight: 800; font-variation-settings: 'wdth' 72; letter-spacing: -.01em; line-height: 1; }
.pc-meridian-f .pc-role { position: absolute; left: 7cqw; bottom: 10.6cqw; font-size: 3.4em; font-weight: 500; letter-spacing: .02em; color: var(--c-fs); }
.pc-meridian-f .pc-co { position: absolute; left: 7cqw; bottom: 6.4cqw; font-size: 3.4em; font-weight: 500; }
.pc-meridian-b { background: var(--c-bg); color: var(--c-bi); font-family: Archivo, 'Arial Narrow', sans-serif; }
.pc-meridian-b .pc-qr { left: 8cqw; top: 50%; transform: translateY(-50%); width: 34cqw; height: 34cqw; }
.pc-meridian-b .pc-url { position: absolute; left: 46cqw; top: 50%; transform: translateY(-50%); }
.pc-meridian-b .pc-url .pc-lbl { display: block; font-size: 2.6em; letter-spacing: .1em; text-transform: uppercase; color: var(--c-bs); font-weight: 600; margin-bottom: .6em; }
.pc-meridian-b .pc-url .pc-u { display: block; font-size: 4.2em; font-weight: 700; font-variation-settings: 'wdth' 80; letter-spacing: -.005em; }
.pc-meridian-b .pc-tick { position: absolute; right: 8cqw; bottom: 7cqw; width: 7cqw; height: 1.2cqw; background: var(--c-ba); }

/* ---------- 2. Solstice ---------- */
.pc-solstice-f { background: var(--c-fg); color: var(--c-fi); font-family: Karla, Arial, sans-serif; }
.pc-solstice-f .pc-sun { position: absolute; width: 58cqw; height: 58cqw; border-radius: 50%; background: var(--c-fa); right: -16cqw; top: -24cqw; }
.pc-solstice-f .pc-name { position: absolute; left: 6cqw; bottom: 14.5cqw; font-family: Anton, Impact, sans-serif; font-size: 15em; line-height: .92; letter-spacing: .005em; text-transform: uppercase; }
.pc-solstice-f .pc-role { position: absolute; left: 6.2cqw; bottom: 9.4cqw; font-size: 3.5em; font-weight: 600; }
.pc-solstice-f .pc-co { position: absolute; left: 6.2cqw; bottom: 5.4cqw; font-size: 3.5em; font-weight: 400; }
.pc-solstice-b { background: var(--c-bg); color: var(--c-bi); font-family: Karla, Arial, sans-serif; }
.pc-solstice-b .pc-dot { position: absolute; width: 22cqw; height: 22cqw; border-radius: 50%; background: var(--c-ba); left: -8cqw; bottom: -8cqw; }
.pc-solstice-b .pc-qr { right: 8cqw; top: 50%; transform: translateY(-50%); width: 34cqw; height: 34cqw; }
.pc-solstice-b .pc-url { position: absolute; left: 8cqw; top: 12cqw; }
.pc-solstice-b .pc-url .pc-lbl { display: block; font-family: Anton, Impact, sans-serif; font-size: 6.5em; line-height: 1; text-transform: uppercase; }
.pc-solstice-b .pc-url .pc-u { display: block; margin-top: .9em; font-size: 3.6em; font-weight: 600; }

/* ---------- 3. Verdigris ---------- */
.pc-verdigris-f { background: var(--c-fg); color: var(--c-fi); font-family: 'EB Garamond', Garamond, Georgia, serif; }
.pc-verdigris-f .pc-frame { position: absolute; inset: 5cqw; border: .35em solid var(--c-fa); }
.pc-verdigris-f .pc-frame::after { content: ''; position: absolute; inset: 1.1cqw; border: .18em solid var(--c-fa); }
.pc-verdigris-f .pc-name { position: absolute; left: 0; right: 0; top: 30%; transform: translateY(-50%); text-align: center; font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', serif; font-size: 8.8em; font-weight: 500; letter-spacing: .04em; line-height: 1; }
.pc-verdigris-f .pc-rule { position: absolute; left: 50%; top: 49%; transform: translateX(-50%); width: 10cqw; height: .25em; background: var(--c-fa); }
.pc-verdigris-f .pc-role { position: absolute; left: 0; right: 0; top: 55.5%; text-align: center; font-size: 3.3em; font-variant: small-caps; letter-spacing: .22em; color: var(--c-fs); }
.pc-verdigris-f .pc-co { position: absolute; left: 0; right: 0; top: 66%; text-align: center; font-size: 3.6em; letter-spacing: .04em; }
.pc-verdigris-b { background: var(--c-bg); color: var(--c-bi); font-family: 'EB Garamond', Garamond, Georgia, serif; }
.pc-verdigris-b .pc-frame { position: absolute; inset: 5cqw; border: .25em solid var(--c-ba); }
.pc-verdigris-b .pc-qr { left: 50%; top: 11cqw; transform: translateX(-50%); width: 27cqw; height: 27cqw; }
.pc-verdigris-b .pc-url { position: absolute; left: 0; right: 0; bottom: 12cqw; text-align: center; }
.pc-verdigris-b .pc-url .pc-lbl { display: block; font-size: 2.7em; font-variant: small-caps; letter-spacing: .24em; color: var(--c-bs); }
.pc-verdigris-b .pc-url .pc-u { display: block; font-family: 'Bodoni Moda', 'Didot', serif; font-size: 4.2em; margin-top: .25em; letter-spacing: .03em; }

/* ---------- 4. Tessellate ---------- */
.pc-tessellate-f { background: var(--c-bg); color: var(--c-bi); font-family: Jost, Futura, 'Century Gothic', sans-serif; }
.pc-tessellate-f .pc-y { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: var(--c-fg); }
.pc-tessellate-f .pc-b { position: absolute; left: 38%; top: 0; right: 0; height: 46%; background: var(--c-fa); }
.pc-tessellate-f .pc-r { position: absolute; width: 30cqw; height: 30cqw; border-radius: 50%; background: var(--c-fh); left: 21%; top: 32%; }
.pc-tessellate-f .pc-k { position: absolute; left: 0; right: 0; top: 46%; height: 1.4cqw; background: var(--c-bi); }
.pc-tessellate-f .pc-k2 { position: absolute; left: 38%; top: 0; bottom: 0; width: 1.4cqw; background: var(--c-bi); }
.pc-tessellate-f .pc-name { position: absolute; right: 6cqw; bottom: 15cqw; font-size: 8.4em; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1; text-align: right; }
.pc-tessellate-f .pc-role { position: absolute; right: 6cqw; bottom: 10.2cqw; font-size: 3.3em; font-weight: 500; letter-spacing: .06em; text-align: right; }
.pc-tessellate-f .pc-co { position: absolute; right: 6cqw; bottom: 6cqw; font-size: 3.3em; font-weight: 400; letter-spacing: .06em; text-align: right; }
.pc-tessellate-b { background: var(--c-bg); color: var(--c-bi); font-family: Jost, Futura, 'Century Gothic', sans-serif; }
.pc-tessellate-b .pc-r { position: absolute; width: 16cqw; height: 16cqw; border-radius: 50%; background: var(--c-fh); right: 8cqw; top: 8cqw; }
.pc-tessellate-b .pc-b { position: absolute; left: 0; right: 0; bottom: 0; height: 5.5cqw; background: var(--c-fa); }
.pc-tessellate-b .pc-k { position: absolute; left: 0; right: 0; bottom: 5.5cqw; height: 1.4cqw; background: var(--c-bi); }
.pc-tessellate-b .pc-qr { left: 8cqw; top: 6cqw; width: 30cqw; height: 30cqw; }
.pc-tessellate-b .pc-url { position: absolute; left: 8cqw; top: 40cqw; }
.pc-tessellate-b .pc-url .pc-lbl { display: block; font-size: 2.8em; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--c-bs); }
.pc-tessellate-b .pc-url .pc-u { display: block; font-size: 3.8em; font-weight: 700; letter-spacing: .01em; margin-top: .2em; }

/* ---------- 5. Overprint ---------- */
.pc-overprint-f { background: var(--c-fg); color: var(--c-fi); font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif; }
.pc-overprint-f .pc-teal { position: absolute; left: 44%; top: -6%; right: -8%; bottom: -6%; background: var(--c-fa); mix-blend-mode: var(--c-blend); transform: rotate(-8deg); transform-origin: center; }
.pc-overprint-f canvas { mix-blend-mode: var(--c-blend); }
.pc-overprint-f .pc-name { position: absolute; left: 6cqw; top: 7cqw; font-size: 12em; font-weight: 800; line-height: .9; letter-spacing: -.03em; font-variation-settings: 'opsz' 96; }
.pc-overprint-f .pc-name em { font-style: normal; color: var(--c-fa); mix-blend-mode: var(--c-blend); position: absolute; left: .045em; top: .045em; z-index: -1; }
.pc-overprint-f .pc-role { position: absolute; left: 6cqw; bottom: 10.4cqw; font-size: 3.4em; font-weight: 600; }
.pc-overprint-f .pc-co { position: absolute; left: 6cqw; bottom: 6cqw; font-size: 3.4em; font-weight: 400; }
.pc-overprint-b { background: var(--c-bg); color: var(--c-bi); font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif; }
.pc-overprint-b .pc-pink { position: absolute; left: -6cqw; top: -10cqw; width: 40cqw; height: 40cqw; border-radius: 50%; background: var(--c-ba); opacity: .9; mix-blend-mode: multiply; }
.pc-overprint-b .pc-qr { right: 8cqw; top: 50%; transform: translateY(-50%); width: 34cqw; height: 34cqw; }
.pc-overprint-b .pc-url { position: absolute; left: 8cqw; bottom: 9cqw; }
.pc-overprint-b .pc-url .pc-lbl { display: block; font-size: 2.8em; font-weight: 600; letter-spacing: .04em; color: var(--c-bs); }
.pc-overprint-b .pc-url .pc-u { display: block; font-size: 4.6em; font-weight: 800; letter-spacing: -.02em; margin-top: .15em; position: relative; }
.pc-overprint-b .pc-url .pc-u i { font-style: normal; position: absolute; left: .04em; top: .04em; color: var(--c-ba); z-index: -1; mix-blend-mode: multiply; }


/* ---------- logo slot (customer upload: any image, object-fit contain) ---------- */
.pc-logo { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--c-fi); }
.pc-logo svg, .pc-logo img { width: 100%; height: 100%; object-fit: contain; }
.pc-logo.on-accent { color: var(--c-fai); }
.pc-logo.on-paper { color: var(--c-bi); }
.pc-meridian-f .pc-logo { left: 7cqw; top: 6cqw; width: 20cqw; height: 9cqw; justify-content: flex-start; }
.pc-solstice-f .pc-logo { left: 6cqw; top: 6cqw; width: 20cqw; height: 9cqw; justify-content: flex-start; }
.pc-verdigris-f .pc-logo { left: 50%; top: 9cqw; transform: translateX(-50%); width: 20cqw; height: 8cqw; }
.pc-verdigris-f .pc-name { top: 40%; }
.pc-verdigris-f .pc-rule { top: 57%; }
.pc-verdigris-f .pc-role { top: 62%; }
.pc-verdigris-f .pc-co { top: 71%; }
.pc-tessellate-f .pc-logo { left: 6cqw; top: 6cqw; width: 20cqw; height: 9cqw; justify-content: flex-start; color: var(--c-fi); }
.pc-overprint-f .pc-logo { right: 6cqw; bottom: 6cqw; width: 20cqw; height: 9cqw; justify-content: flex-end; }

/* ================= PORTRAIT (54 × 85) =================
   In portrait calc(1 * 1.5741cqw) is 1% of the 85 mm side — the same 0.85 mm unit
   that 1cqw is in landscape — so type sizes carry over unchanged and
   only the compositions are re-cut. */
.pc-portrait .pc-art { font-size: 1.5741cqw; }
.pc-portrait .pc-safe { inset: 3.53% 5.56%; }
.pc-k3 { display: none; }

/* Meridian */
.pc-portrait .pc-meridian-f .pc-name { left: calc(6 * 1.5741cqw); bottom: calc(15.5 * 1.5741cqw); font-size: 8.6em; }
.pc-portrait .pc-meridian-f .pc-role { left: calc(6 * 1.5741cqw); bottom: calc(10.6 * 1.5741cqw); }
.pc-portrait .pc-meridian-f .pc-co { left: calc(6 * 1.5741cqw); bottom: calc(6.4 * 1.5741cqw); }
.pc-portrait .pc-meridian-b .pc-qr { left: 50%; top: calc(12 * 1.5741cqw); transform: translateX(-50%); width: calc(36 * 1.5741cqw); height: calc(36 * 1.5741cqw); }
.pc-portrait .pc-meridian-b .pc-url { left: 0; right: 0; top: calc(56 * 1.5741cqw); transform: none; text-align: center; }
.pc-portrait .pc-meridian-b .pc-url .pc-u { font-size: 3.9em; }
.pc-portrait .pc-meridian-b .pc-tick { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(8 * 1.5741cqw); width: calc(7 * 1.5741cqw); height: calc(1.2 * 1.5741cqw); }

/* Solstice */
.pc-portrait .pc-solstice-f .pc-sun { width: calc(60 * 1.5741cqw); height: calc(60 * 1.5741cqw); right: calc(-22 * 1.5741cqw); top: calc(-20 * 1.5741cqw); }
.pc-portrait .pc-solstice-f .pc-name { left: calc(5 * 1.5741cqw); bottom: calc(14.5 * 1.5741cqw); font-size: 11.5em; }
.pc-portrait .pc-solstice-f .pc-role { left: calc(5.2 * 1.5741cqw); bottom: calc(9.4 * 1.5741cqw); }
.pc-portrait .pc-solstice-f .pc-co { left: calc(5.2 * 1.5741cqw); bottom: calc(5.4 * 1.5741cqw); }
.pc-portrait .pc-solstice-b .pc-dot { width: calc(24 * 1.5741cqw); height: calc(24 * 1.5741cqw); left: calc(-9 * 1.5741cqw); bottom: calc(-9 * 1.5741cqw); }
.pc-portrait .pc-solstice-b .pc-url { left: calc(7 * 1.5741cqw); top: calc(9 * 1.5741cqw); }
.pc-portrait .pc-solstice-b .pc-url .pc-lbl { font-size: 7.5em; }
.pc-portrait .pc-solstice-b .pc-url .pc-u { font-size: 3.4em; }
.pc-portrait .pc-solstice-b .pc-qr { right: calc(7 * 1.5741cqw); top: auto; bottom: calc(9 * 1.5741cqw); transform: none; width: calc(36 * 1.5741cqw); height: calc(36 * 1.5741cqw); }

/* Verdigris */
.pc-portrait .pc-verdigris-f .pc-frame { inset: calc(4.5 * 1.5741cqw); }
.pc-portrait .pc-verdigris-f .pc-name { top: 36%; font-size: 8em; }
.pc-portrait .pc-verdigris-f .pc-rule { top: 47%; width: calc(10 * 1.5741cqw); }
.pc-portrait .pc-verdigris-f .pc-role { top: 51.5%; }
.pc-portrait .pc-verdigris-f .pc-co { top: 58.5%; }
.pc-portrait .pc-verdigris-b .pc-frame { inset: calc(4.5 * 1.5741cqw); }
.pc-portrait .pc-verdigris-b .pc-qr { top: calc(16 * 1.5741cqw); width: calc(30 * 1.5741cqw); height: calc(30 * 1.5741cqw); }
.pc-portrait .pc-verdigris-b .pc-url { bottom: calc(15.5 * 1.5741cqw); }
.pc-portrait .pc-verdigris-b .pc-url .pc-u { font-size: 3.5em; }

/* Tessellate */
.pc-portrait .pc-tessellate-f .pc-y { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 36%; }
.pc-portrait .pc-tessellate-f .pc-b { left: 0; right: auto; top: 36%; width: 42%; height: 34%; }
.pc-portrait .pc-tessellate-f .pc-r { width: calc(30 * 1.5741cqw); height: calc(30 * 1.5741cqw); left: 22%; top: 24%; }
.pc-portrait .pc-tessellate-f .pc-k { top: 36%; height: calc(1.4 * 1.5741cqw); }
.pc-portrait .pc-tessellate-f .pc-k2 { left: 42%; top: 36%; bottom: 30%; width: calc(1.4 * 1.5741cqw); }
.pc-portrait .pc-tessellate-f .pc-k3 { display: block; position: absolute; left: 0; right: 0; top: 70%; height: calc(1.4 * 1.5741cqw); background: var(--c-bi); }
.pc-portrait .pc-tessellate-f .pc-name { right: calc(5 * 1.5741cqw); bottom: calc(14 * 1.5741cqw); font-size: 6.6em; }
.pc-portrait .pc-tessellate-f .pc-role { right: calc(5 * 1.5741cqw); bottom: calc(9.6 * 1.5741cqw); font-size: 3.1em; }
.pc-portrait .pc-tessellate-f .pc-co { right: calc(5 * 1.5741cqw); bottom: calc(5.6 * 1.5741cqw); font-size: 3.1em; }
.pc-portrait .pc-tessellate-b .pc-r { width: calc(16 * 1.5741cqw); height: calc(16 * 1.5741cqw); right: calc(6 * 1.5741cqw); top: calc(6 * 1.5741cqw); }
.pc-portrait .pc-tessellate-b .pc-qr { left: calc(6 * 1.5741cqw); top: calc(6 * 1.5741cqw); width: calc(32 * 1.5741cqw); height: calc(32 * 1.5741cqw); }
.pc-portrait .pc-tessellate-b .pc-url { left: calc(6 * 1.5741cqw); top: calc(44 * 1.5741cqw); }
.pc-portrait .pc-tessellate-b .pc-url .pc-u { font-size: 3.4em; }
.pc-portrait .pc-tessellate-b .pc-b { height: calc(6 * 1.5741cqw); }
.pc-portrait .pc-tessellate-b .pc-k { bottom: calc(6 * 1.5741cqw); height: calc(1.4 * 1.5741cqw); }

/* Overprint */
.pc-portrait .pc-overprint-f .pc-teal { left: -8%; right: -8%; top: 44%; bottom: -10%; transform: rotate(-10deg); }
.pc-portrait .pc-overprint-f .pc-name { left: calc(5 * 1.5741cqw); top: calc(6 * 1.5741cqw); font-size: 9em; }
.pc-portrait .pc-overprint-f .pc-role { left: calc(5 * 1.5741cqw); bottom: calc(10.4 * 1.5741cqw); }
.pc-portrait .pc-overprint-f .pc-co { left: calc(5 * 1.5741cqw); bottom: calc(6 * 1.5741cqw); }
.pc-portrait .pc-overprint-b .pc-pink { left: calc(-8 * 1.5741cqw); top: calc(-10 * 1.5741cqw); width: calc(40 * 1.5741cqw); height: calc(40 * 1.5741cqw); }
.pc-portrait .pc-overprint-b .pc-qr { right: calc(7 * 1.5741cqw); top: auto; bottom: calc(8 * 1.5741cqw); transform: none; width: calc(36 * 1.5741cqw); height: calc(36 * 1.5741cqw); }
.pc-portrait .pc-overprint-b .pc-url { left: calc(6 * 1.5741cqw); bottom: auto; top: calc(36 * 1.5741cqw); }
.pc-portrait .pc-overprint-b .pc-url .pc-u { font-size: 3.5em; }

/* Transit */

/* logos, portrait */
.pc-portrait .pc-meridian-f .pc-logo { left: calc(6 * 1.5741cqw); top: calc(6 * 1.5741cqw); width: calc(22 * 1.5741cqw); height: calc(9 * 1.5741cqw); }
.pc-portrait .pc-solstice-f .pc-logo { left: calc(5 * 1.5741cqw); top: calc(13 * 1.5741cqw); width: calc(22 * 1.5741cqw); height: calc(9 * 1.5741cqw); }
.pc-portrait .pc-verdigris-f .pc-logo { top: calc(10 * 1.5741cqw); width: calc(22 * 1.5741cqw); height: calc(9 * 1.5741cqw); }
.pc-portrait .pc-verdigris-f .pc-name { top: 38%; }
.pc-portrait .pc-verdigris-f .pc-rule { top: 49%; }
.pc-portrait .pc-verdigris-f .pc-role { top: 53.5%; }
.pc-portrait .pc-verdigris-f .pc-co { top: 60.5%; }
.pc-portrait .pc-tessellate-f .pc-logo { color: var(--c-fi); right: auto; left: calc(5 * 1.5741cqw); top: calc(5 * 1.5741cqw); width: calc(22 * 1.5741cqw); height: calc(9 * 1.5741cqw); justify-content: flex-start; }
.pc-portrait .pc-overprint-f .pc-logo { right: auto; left: calc(5 * 1.5741cqw); bottom: calc(17 * 1.5741cqw); width: calc(22 * 1.5741cqw); height: calc(9 * 1.5741cqw); justify-content: flex-start; }

/* Long names wrap inside their slot instead of running under the art */
.pc-meridian-f .pc-name { max-width: 82%; }
.pc-solstice-f .pc-name { max-width: 86%; }
.pc-tessellate-f .pc-name { max-width: 56%; text-wrap: balance; }
.pc-portrait .pc-tessellate-f .pc-name { max-width: 84%; }
.pc-overprint-f .pc-name { max-width: 72%; }
.pc-portrait .pc-overprint-f .pc-name { max-width: 88%; }
.pc-verdigris-f .pc-name { padding-inline: 8cqw; }

/* ── The designer (print-editor.pug) ─────────────────────── */
.print-editor { display: grid; gap: 32px; }
.pe-stage { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: start; }
@media (max-width: 991px) { .pe-stage { grid-template-columns: 1fr; } }
.pe-faces[hidden] { display: none; }
.pe-3d { position: relative; display: flex; justify-content: center; perspective: 900px; padding: 36px 24px 56px; }
.pe-shape .pe-3d { touch-action: none; }
/* Ground shadow: sits in the page, NOT inside the rotating card, so it
   stays under the card whichever face is showing */
.pe-3d::after {
    content: ''; position: absolute; left: 16%; right: 16%; bottom: 14px; height: 46px; z-index: 0;
    background: radial-gradient(ellipse at center, rgba(20, 18, 14, .5), rgba(20, 18, 14, 0) 70%); filter: blur(8px);
}
/* The card is a real object: two faces on a preserve-3d stack, a dark edge
   slab between them, a sheen that slides with the tilt */
.pe-card {
    --tilt-x: 0deg; --tilt-y: 0deg; --sheen: 50%;
    position: relative; z-index: 1; width: min(460px, 100%); cursor: default;
    transform-style: preserve-3d; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform .6s ease; outline: none;
    /* px here: this element is not a container, so cqw would not be the card's */
    border-radius: 5px;
}
.pe-card:has(.pc-portrait) { width: min(300px, 100%); }
.pe-fside { position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(1px); }
.pe-fside .pc-face { box-shadow: none; }
.pe-fside::after {
    content: ''; position: absolute; inset: 0; border-radius: 5px; pointer-events: none; z-index: 6;
    background: linear-gradient(105deg, transparent calc(var(--sheen) - 18%), rgba(255, 255, 255, .16) var(--sheen), transparent calc(var(--sheen) + 18%));
    /* the glare only shows while the card is being tilted */
    opacity: 0; transition: opacity .3s ease;
}
.pe-card.is-tilting .pe-fside::after { opacity: 1; }
.pe-fside-back { position: absolute; inset: 0; transform: rotateY(180deg) translateZ(1px); }
.pe-preview-bar { display: flex; align-items: center; gap: 14px; justify-content: center; }
.pe-side { display: grid; gap: 22px; }
.pe-block { display: grid; gap: 8px; }
.pe-heading { margin: 0 0 4px; }
.pe-note { font-size: var(--text-xs, 12px); color: var(--color-text-muted); margin: 0; }
.pe-saved[hidden] { display: none; }
.pe-seg { display: inline-flex; border: 1px solid var(--line, #ddd); border-radius: 999px; overflow: hidden; width: max-content; }
.pe-seg-btn { font: inherit; font-size: var(--text-sm, 14px); padding: 6px 14px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.pe-seg-btn.on { background: var(--color-cta); color: var(--color-bg, #fff); }
.pe-seg-btn:focus-visible { outline: 2px solid var(--color-cta); outline-offset: -2px; }
.print-editor .color-row { display: flex; gap: 12px; flex-wrap: wrap; }
.print-editor .color-field label { display: block; font-size: var(--text-xs, 12px); margin-bottom: 4px; }
.print-editor .color-field input[type='color'] { width: 56px; height: 36px; padding: 2px; border: 1px solid var(--line, #ddd); border-radius: 6px; background: none; cursor: pointer; }
.pe-carousel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; margin-top: 10px; }
.pe-tiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 10px; scrollbar-width: thin; }
.pe-tile { flex: 0 0 auto; width: 150px; scroll-snap-align: center; padding: 4px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.pe-tile:has(.pc-portrait) { width: 104px; }
.pe-tile:hover { border-color: color-mix(in srgb, var(--color-cta) 45%, transparent); }
.pe-tile.on { border-color: var(--color-cta); }
.pe-tile:focus-visible { outline: 2px solid var(--color-cta); outline-offset: 2px; }
.pe-tile .pc-face { box-shadow: 0 4px 12px -6px rgba(0,0,0,.35); pointer-events: none; }
.pe-scroll { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line, #ddd); background: var(--color-bg-subtle, #fff); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pe-scroll:hover { border-color: var(--color-cta); color: var(--color-cta); }
.pc-overprint-f .pc-role, .pc-overprint-f .pc-co { max-width: 66%; }
.pc-portrait .pc-overprint-f .pc-role, .pc-portrait .pc-overprint-f .pc-co { max-width: 88%; }
.pc-tessellate-f .pc-name { max-width: 46%; font-size: 7.6em; }
/* Meridian's tick is part of the name block, so it always sits just above
   the first line however many lines the name takes */
.pc-meridian-f .pc-name::before { content: ''; display: block; width: 7cqw; height: 1.2cqw; margin-bottom: .32em; background: var(--c-fh); }
.pc-portrait .pc-meridian-f .pc-name::before { width: calc(7 * 1.5741cqw); height: calc(1.2 * 1.5741cqw); }

/* ---------- 6. Blueprint ---------- */
.pc-blueprint-f { background: var(--c-fg); color: var(--c-fi); font-family: Barlow, 'DIN', Arial, sans-serif; }
.pc-blueprint-f .pc-grid, .pc-blueprint-b .pc-grid {
    position: absolute; inset: 0; pointer-events: none;
    --g: color-mix(in srgb, var(--c-fa) 32%, transparent); --G: color-mix(in srgb, var(--c-fa) 62%, transparent);
    background-image:
        linear-gradient(var(--G) .2cqw, transparent .2cqw), linear-gradient(90deg, var(--G) .2cqw, transparent .2cqw),
        linear-gradient(var(--g) .16cqw, transparent .16cqw), linear-gradient(90deg, var(--g) .16cqw, transparent .16cqw);
    background-size: 25cqw 25cqw, 25cqw 25cqw, 5cqw 5cqw, 5cqw 5cqw;
    background-position: 5cqw 4.25cqw, 5cqw 4.25cqw, 5cqw 4.25cqw, 5cqw 4.25cqw;
}
.pc-blueprint-b .pc-grid { --g: color-mix(in srgb, var(--c-ba) 18%, transparent); --G: color-mix(in srgb, var(--c-ba) 36%, transparent); }
.pc-blueprint-f .pc-logo { left: 6cqw; top: 6cqw; width: 22cqw; height: 10cqw; justify-content: flex-start; }
/* Title block: an outlined box in the corner, ruled into rows like a
   drawing sheet's — name on top, then labelled title and company rows */
.pc-blueprint-f .pc-block {
    position: absolute; right: 5cqw; bottom: 5cqw; width: 58cqw;
    border: .35cqw solid var(--c-fa); background: var(--c-fg); display: grid;
}
.pc-blueprint-f .pc-row { display: grid; grid-template-columns: 14cqw 1fr; align-items: center; min-height: 6.6cqw; padding: .6cqw 2cqw; border-top: .18cqw solid var(--c-fa); }
.pc-blueprint-f .pc-row-name { grid-template-columns: 1fr; min-height: 12cqw; border-top: 0; padding: 1cqw 2cqw; }
.pc-blueprint-f .pc-l { font-size: 2.1em; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--c-fs); }
.pc-blueprint-f .pc-name { font-family: 'Barlow Semi Condensed', Barlow, sans-serif; font-size: var(--pc-fs, 8em); font-weight: 700; line-height: .98; text-transform: uppercase; letter-spacing: .005em; }
.pc-blueprint-f .pc-role, .pc-blueprint-f .pc-co { font-size: 3.2em; font-weight: 600; line-height: 1.1; }
.pc-blueprint-b { background: var(--c-bg); color: var(--c-bi); font-family: Barlow, Arial, sans-serif; }
.pc-blueprint-b .pc-qr { left: 7cqw; top: 50%; transform: translateY(-50%); width: 36cqw; height: 36cqw; }
.pc-blueprint-b .pc-block { position: absolute; right: 5cqw; top: 50%; transform: translateY(-50%); width: 50cqw; border: .35cqw solid var(--c-ba); background: var(--c-bg); }
.pc-blueprint-b .pc-row { display: grid; gap: .3em; padding: 2.2cqw 2.4cqw; }
.pc-blueprint-b .pc-l { font-size: 2.2em; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--c-bs); }
.pc-blueprint-b .pc-u { font-family: 'Barlow Semi Condensed', Barlow, sans-serif; font-size: 3.4em; font-weight: 700; text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }

/* Blueprint, portrait: the title block spans the bottom; the QR sits high */
.pc-portrait .pc-blueprint-f .pc-grid, .pc-portrait .pc-blueprint-b .pc-grid {
    background-size: calc(25 * 1.5741cqw) calc(25 * 1.5741cqw), calc(25 * 1.5741cqw) calc(25 * 1.5741cqw), calc(5 * 1.5741cqw) calc(5 * 1.5741cqw), calc(5 * 1.5741cqw) calc(5 * 1.5741cqw);
    background-position: calc(4.25 * 1.5741cqw) calc(5 * 1.5741cqw);
}
.pc-portrait .pc-blueprint-f .pc-logo { left: calc(5 * 1.5741cqw); top: calc(6 * 1.5741cqw); width: calc(24 * 1.5741cqw); height: calc(11 * 1.5741cqw); }
.pc-portrait .pc-blueprint-f .pc-block { left: calc(5 * 1.5741cqw); right: calc(5 * 1.5741cqw); bottom: calc(5 * 1.5741cqw); width: auto; }
.pc-portrait .pc-blueprint-f .pc-row { grid-template-columns: calc(14 * 1.5741cqw) 1fr; min-height: calc(6.6 * 1.5741cqw); padding: calc(.6 * 1.5741cqw) calc(2 * 1.5741cqw); }
.pc-portrait .pc-blueprint-f .pc-row-name { grid-template-columns: 1fr; min-height: calc(12 * 1.5741cqw); padding: calc(1 * 1.5741cqw) calc(2 * 1.5741cqw); }
.pc-portrait .pc-blueprint-f .pc-name { font-size: var(--pc-fs, 7.4em); }
.pc-portrait .pc-blueprint-b .pc-qr { left: 50%; top: calc(14 * 1.5741cqw); transform: translateX(-50%); width: calc(40 * 1.5741cqw); height: calc(40 * 1.5741cqw); }
.pc-portrait .pc-blueprint-b .pc-block { left: calc(5 * 1.5741cqw); right: calc(5 * 1.5741cqw); top: auto; bottom: calc(10.5 * 1.5741cqw); transform: none; width: auto; }

/* ── Shape mode (print-editor.pug): drag / resize / text size ─────── */
.pe-shape .pe-card { cursor: default; }
.pe-shape .pe-fside-front .pc-face [data-pc-el] { cursor: move; outline: .3cqw dashed transparent; outline-offset: .4cqw; transition: outline-color .15s; }
.pe-shape .pe-fside-front .pc-face [data-pc-el]:hover { outline-color: color-mix(in srgb, currentColor 55%, transparent); }
.pe-shape .pe-fside-front .pc-face [data-pc-el].pe-selected { outline: .35cqw solid #ff2a8f; outline-offset: .4cqw; }
.pe-shape .pc-in { cursor: move; user-select: none; }
.pe-shape .pe-fside-front .pc-face [data-ec-upload] { pointer-events: auto; }
.pe-handles { position: absolute; z-index: 30; pointer-events: none; }
.pe-handle { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid #ff2a8f; border-radius: 50%; pointer-events: auto; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.pe-handle[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.pe-handle[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.pe-handle[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.pe-handle[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.pe-shape-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: center; font-size: var(--text-sm, 14px); }
.pe-shape-bar[hidden] { display: none; }
.pe-shape-bar label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.pe-shape-bar input[type="range"] { width: 160px; accent-color: var(--color-cta); }
.pe-flip-btn.on, .pe-shape-btn.on { background: var(--color-cta); color: var(--color-bg, #fff); }
.pe-topbar { display: flex; justify-content: center; margin-bottom: 4px; }
.pe-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-logo-thumb { width: 56px; height: 56px; border: 1px solid var(--line, #ddd); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-bg-subtle, #fff); text-align: center; }
.pe-logo-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Bootstrap .btn sets display, which would defeat the hidden attribute on the side Remove button */
.print-editor [hidden] { display: none !important; }
.pe-flip-btn { display: inline-flex; align-items: center; gap: 8px; }
.pe-flip-icon { flex: 0 0 auto; transition: transform .6s ease; }
.pe-flip-btn[aria-pressed="true"] .pe-flip-icon { transform: rotate(180deg); }
.pe-shape-hint { color: var(--color-text-muted); }
.pe-snaps { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pe-snap-lbl { margin-right: 4px; color: var(--color-text-muted); }
.pe-snap { font: inherit; font-size: var(--text-xs, 12px); letter-spacing: .04em; padding: 4px 9px; border: 1px solid var(--line, #ddd); border-radius: 999px; background: var(--color-bg-subtle, #fff); color: inherit; cursor: pointer; line-height: 1.2; }
.pe-snap:hover { border-color: var(--color-cta); color: var(--color-cta); }
.pe-snap:focus-visible { outline: 2px solid var(--color-cta); outline-offset: 1px; }

/* ── Thumbprint colophon on the back (hidden for white-label accounts) ──
   Sits directly on the face (outside .pc-art), so it sizes itself in
   container units and is placed per design via the face's data-pc-design. */
/* Thumbprint's own inks, whatever the card's palette: the mark's dark +
   gold, the wordmark in the brand's text ink and heading face */
.pc-colophon { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 1.1cqw; font-size: 1cqw; color: #24211a; pointer-events: none; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }
.pc-portrait .pc-colophon { font-size: 1.5741cqw; gap: calc(1.1 * 1.5741cqw); }
.pc-colophon-mark { display: inline-flex; width: 3.4em; height: 3.4em; }
.pc-colophon-mark svg { width: 100%; height: 100%; display: block; }
.pc-colophon-text { font-size: 2.6em; font-weight: 500; letter-spacing: .06em; white-space: nowrap; line-height: 1; }
.pc-colophon-brand { text-transform: uppercase; }
.pc-face[data-pc-design="meridian"] .pc-colophon { left: 8em; bottom: 5.5em; }
.pc-face[data-pc-design="solstice"] .pc-colophon { left: 50%; transform: translateX(-50%); bottom: 4.5em; }
.pc-face[data-pc-design="verdigris"] .pc-colophon { left: 50%; transform: translateX(-50%); bottom: 6.2em; }
.pc-face[data-pc-design="tessellate"] .pc-colophon { right: 8em; bottom: 9.5em; }
.pc-face[data-pc-design="overprint"] .pc-colophon { right: 8em; bottom: 5em; }
.pc-face[data-pc-design="blueprint"] .pc-colophon { right: 6em; bottom: 4.5em; }
.pc-portrait[data-pc-design="meridian"] .pc-colophon { left: 50%; transform: translateX(-50%); bottom: 14em; }
.pc-portrait[data-pc-design="solstice"] .pc-colophon { left: auto; right: 7em; transform: none; bottom: 4.5em; }
.pc-portrait[data-pc-design="verdigris"] .pc-colophon { left: 50%; transform: translateX(-50%); top: auto; bottom: 7em; }
.pc-portrait[data-pc-design="tessellate"] .pc-colophon { right: 6em; bottom: 10.5em; }
.pc-portrait[data-pc-design="overprint"] .pc-colophon { left: 6em; right: auto; bottom: 5em; }
.pc-portrait[data-pc-design="blueprint"] .pc-colophon { left: 50%; right: auto; transform: translateX(-50%); top: auto; bottom: 3.2em; }
@media (prefers-reduced-motion: reduce) {
    .pe-card, .pe-flip-icon, .pe-fside::after { transition: none !important; }
}
/* Shape mode's "background pattern" switch: the design's generative art off */
.pc-no-pattern canvas[data-pc-draw], .pc-no-pattern .pc-grid { display: none; }