/* Printed objects: certificate (front/back), folder (inside/outside) and seal band.
   These are drawn at physical pixel size and scaled by .scalebox, so they use fixed
   print colours instead of the page theme: they look the same in dark mode. */

.cert,.folder,.band{
  --p-paper:#F6F2E8;--p-card:#FBF9F3;--p-ink:#16233B;--p-gold:#8A6A2F;--p-muted:#4F5869;
  --p-rule:#D9D1BF;--p-fold:#B9B1A0;--p-cream:#E7DCC3;--p-sand:#C9C3B6;
  --p-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --p-mono:'IBM Plex Mono',ui-monospace,monospace;
  --p-scratch:repeating-linear-gradient(135deg,#A9ADB3 0px,#A9ADB3 3px,#BFC3C8 3px,#BFC3C8 6px);
  position:relative;overflow:hidden;box-sizing:border-box;background:var(--p-paper);color:var(--p-ink)
}
.gold-mark{color:var(--p-gold)}

/* ---------- certificate, shared ---------- */
.cert{width:571px;height:253px}
.cert__rosette{position:absolute;left:30px;top:26px;width:200px;height:200px;opacity:.06;pointer-events:none}
.cert--back .cert__rosette{left:341px}
.cert__border{position:absolute;left:0;top:0;width:571px;height:253px;pointer-events:none}
.cert__body{position:absolute;left:26px;top:22px;right:26px;bottom:20px;display:flex;flex-direction:column;gap:6px}
.cert__head{display:flex;justify-content:space-between;align-items:center}
.cert__brand{display:flex;align-items:center;gap:6px;font-size:10px}
.cert__brand b{font-weight:600;letter-spacing:.22em}
.cert__no{font-family:var(--p-mono);font-size:10px;color:var(--p-muted)}
.cert__titles{display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.cert__title{margin:0;font-family:var(--p-serif);font-weight:600;font-size:22px;line-height:24px;white-space:nowrap}
.cert__subtitle{font-family:var(--p-serif);font-style:italic;font-size:12px;line-height:14px;color:var(--p-muted);white-space:nowrap}
.cert__main{display:flex;gap:12px;flex-grow:1;align-items:center}
.cert__foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--p-gold);padding-top:5px;font-size:9px;line-height:12px;color:var(--p-muted);white-space:nowrap}
.cert__foot .r{text-align:right}

/* ---------- certificate, front ---------- */
.cert__titlerow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;white-space:nowrap}
.cert__serial{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.cert__serial small{font-size:8px;letter-spacing:.12em;color:var(--p-muted)}
.cert__serial b{font-family:var(--p-mono);font-weight:inherit;font-size:18px;letter-spacing:.1em;line-height:20px}
.cert__steps{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cert__step{display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.cert__step .n{font-family:var(--p-mono);font-size:10px;color:var(--p-gold);flex-shrink:0}
.cert__step .t{font-size:10.5px;line-height:15px}
.cert__url{font-size:9px;line-height:12px;color:var(--p-muted)}
.cert__url span{font-family:var(--p-mono);color:var(--p-ink)}
.cert__qr{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0}
.cert__qr img{display:block;width:74px;height:74px}
.cert__qr small{font-size:8px;color:var(--p-muted);white-space:nowrap}
.cert__claim{width:156px;height:94px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--p-gold);background:var(--p-card);box-sizing:border-box}
.cert__claim-label{font-size:9px;font-weight:600;letter-spacing:.12em;white-space:nowrap}
.cert__claim-note{font-size:8px;line-height:10px;color:var(--p-muted);white-space:nowrap}
.cert__scratch{width:130px;height:30px;background:var(--p-scratch);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;letter-spacing:.14em;color:#2E333A}
/* interactive variant (demo): click to reveal the code underneath */
button.cert__scratch{position:relative;padding:0;border:0;cursor:pointer;background:var(--p-card);font-family:inherit}
.cert__scratch .cv{position:absolute;inset:0;border-radius:3px;background:var(--p-scratch);display:flex;align-items:center;justify-content:center;transition:opacity .35s}
.cert__scratch .code{display:flex;font-weight:400;align-items:center;justify-content:center;height:100%;font-family:var(--p-mono);font-size:15px;letter-spacing:.1em;color:var(--p-ink)}
.cert__scratch.open .cv{opacity:0;pointer-events:none}

/* ---------- certificate, back ---------- */
.cert--back .cert__main{gap:14px}
.cert__facts{flex-grow:1;display:flex;flex-direction:column;gap:4px}
.cert__denom{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.cert__denom b{font-family:var(--p-serif);font-weight:600;font-size:20px;line-height:22px;color:var(--p-gold)}
.cert__denom small{font-size:9px;color:var(--p-muted)}
.cert__table{display:flex;flex-direction:column}
.cert__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;height:17px;border-bottom:1px solid var(--p-rule);white-space:nowrap}
.cert__row .k{font-size:10px}
.cert__row .v{font-size:11px;font-weight:500}
.cert__row .v.mono{font-family:var(--p-mono);font-weight:inherit;letter-spacing:.06em}
.cert__fine{font-size:9px;line-height:12px;color:var(--p-muted);max-height:24px;overflow:hidden}
.cert__aside{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;flex-shrink:0}
.cert__twin{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.cert__twin small{font-size:8px;color:var(--p-muted)}
.cert__twin small:first-child{letter-spacing:.1em}
.cert__twin span{font-family:var(--p-mono);font-size:10px}
.cert__sign{display:flex;gap:8px;align-items:flex-end}
.cert__holo{width:34px;height:34px;border-radius:50%;border:1px dashed var(--p-gold);display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--p-muted)}
.cert__sig{width:84px;border-bottom:1px solid var(--p-ink);font-size:8px;color:var(--p-muted);padding-bottom:2px;white-space:nowrap}
.cert__motto{font-family:var(--p-serif);font-style:italic;font-size:12px;color:var(--p-ink)}

/* ---------- folder (167 × 83 mm, drawn unfolded: top panel + bottom panel) ---------- */
.folder{width:631px;height:628px}
.folder__fold{position:absolute;left:0;top:313px;width:631px;height:0;border-top:1px dashed var(--p-fold)}
.folder__rule{position:absolute;left:30px;width:571px;height:1px;background:var(--p-gold)}
.folder__rule--top{top:14px}
.folder__rule--mid{top:328px}
/* inside */
.folder__cert{position:absolute;left:30px;top:30px;width:571px;height:253px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.folder__corner{position:absolute;display:block}
.folder__corner.tl{left:24px;top:24px}.folder__corner.tr{left:555px;top:24px}
.folder__corner.bl{left:24px;top:237px}.folder__corner.br{left:555px;top:237px}
.folder__label{position:absolute;left:30px;width:571px;font-size:10px;color:var(--p-muted)}
.folder__label--cert{top:290px;text-align:center}
.folder__label--note{top:604px;display:flex;justify-content:space-between}
.folder__label--note span:last-child{font-family:var(--p-mono);letter-spacing:.08em;color:var(--p-ink)}
.folder__window{position:absolute;left:24px;top:338px;width:583px;height:265px;background:#fff;border:1px solid var(--p-rule);box-shadow:inset 0 0 0 4px #F1EDE3}
.folder__note,.folder__glass{position:absolute;left:30px;top:344px;width:571px;height:253px}
.folder__note{object-fit:cover;display:block}
.folder__glass{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.7);pointer-events:none}
/* outside */
.folder--outside{background:var(--p-ink);color:var(--p-paper)}
.folder__panel{position:absolute;left:40px;width:551px;height:234px;display:flex;flex-direction:column;justify-content:space-between}
.folder__panel--top{top:40px}
.folder__panel--bottom{top:354px}
.folder__row{display:flex;justify-content:space-between;align-items:flex-end}
.folder__edition{font-family:var(--p-serif);font-style:italic;font-size:20px;color:var(--p-cream)}
.folder__partner{font-size:12px;line-height:1.5;color:var(--p-sand)}
.folder__partner span{color:var(--p-cream)}
.folder__qr{display:flex;flex-direction:column;align-items:center;gap:4px}
.folder__qr img{display:block;width:64px;height:64px}
.folder__qr small{font-size:11px;color:var(--p-sand)}
.folder__brand{display:flex;align-items:center;gap:8px;font-size:11px}
.folder__brand b{font-weight:600;letter-spacing:.22em;color:var(--p-cream)}
.folder__titles{display:flex;flex-direction:column;gap:6px}
.folder__denom{font-family:var(--p-serif);font-weight:600;font-size:40px;line-height:1;color:var(--p-paper)}
.folder__occasion{font-family:var(--p-serif);font-style:italic;font-size:17px;color:var(--p-cream)}
.folder__bank{font-size:11px;letter-spacing:.12em;color:var(--p-sand)}
.folder__seal{width:34px;height:34px;border:1px solid var(--p-gold);display:flex;align-items:center;justify-content:center;color:var(--p-gold);font-size:14px}

/* ---------- seal band ---------- */
.band{width:650px;height:151px;border:1px solid var(--p-rule);display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.band__label{font-size:10px;letter-spacing:.22em;color:var(--p-muted)}
.band__serial{display:flex;align-items:center;gap:14px}
.band__serial i{font-style:normal;font-size:11px;color:var(--p-gold)}
.band__serial b{font-family:var(--p-mono);font-weight:inherit;font-size:18px;letter-spacing:.14em}
.band__tear{position:absolute;left:324px;top:0;width:0;height:151px;border-left:1px dashed var(--p-fold)}