/* The printed things at their real sizes in millimetres: the A6 door card, the window sticker, the NFC sticker,
   the A4 noticeboard poster and the A4 Street Portrait. Night sky, the voxel street at its size, a lantern and
   amber light, like the app. QR codes sit on a cream tile with a quiet zone, so they scan on the dark design.
   Print-safe on purpose: solid colours and plain gradients only, no blur, shadows or see-through layers (Chrome
   writes those into PDFs as images that some printers and viewers draw as boxes). The shop adds shadows around
   the outside for its mockups; print.html prints these as they are. */
@font-face { font-family: "Bricolage"; src: url(fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: block; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: block; }

.pc { --night: #0b1029; --navy: #121a3d; --navy2: #1c2552; --cream: #fffaf0; --amber: #ffb547; --amber-hi: #ffd78f; --amber-ink: #c87508;
  --amber-dim: #946f42; --chip: #38333f; --fg: #fbf5ea; --muted: #c6cae6; --faint: #999ebc; --ink: #121a3d;
  box-sizing: border-box; position: relative; overflow: hidden; color: var(--fg); background: var(--navy);
  font-family: "Figtree", system-ui, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
/* The site's page styles (legal.css) must not leak onto the paper */
.pc h2, .pc h3, .pc p, .pc ol, .pc li { color: inherit; border: 0; padding: 0; margin: 0; text-wrap: balance; }
.pc img { max-width: none; display: block; }
.pc em { font-style: normal; color: var(--amber); }
.pc .pill { position: absolute; left: 5mm; top: 5mm; display: flex; align-items: center; gap: 1.8mm; padding: 1.2mm 3mm 1.2mm 1.2mm; border-radius: 99mm;
  background: var(--night); color: #fff; font: 750 4.2mm/1 "Bricolage", sans-serif; letter-spacing: -0.01em; }
.pc .pill img { width: 6.4mm; height: 6.4mm; border-radius: 1.8mm; }
.pc .art { position: absolute; inset: 0 0 auto 0; overflow: hidden; background: var(--night); }
.pc .art > img { width: 100%; height: 100%; object-fit: cover; }
.pc .qrtile { background: var(--cream); border-radius: 3mm; padding: 1.6mm; border: .6mm solid var(--amber-dim); }
.pc .qrtile svg { display: block; width: 100%; height: 100%; }
.pc .chip { display: inline-flex; align-items: center; padding: 1mm 2.6mm; border-radius: 99mm; background: var(--chip); border: .3mm solid var(--amber-dim);
  color: var(--amber-hi); font: 750 2.5mm/1.2 "Figtree", sans-serif; letter-spacing: .25mm; text-transform: uppercase; }

/* A6 door card: 105 x 148 mm. The street at dusk on top, the promise, the code. */
.pc.door { width: 105mm; height: 148mm; }
.pc.door .art { height: 64mm; }
.pc.door h2 { position: absolute; left: 6.5mm; right: 6.5mm; top: 69mm; font: 800 7.2mm/1.04 "Bricolage", sans-serif; letter-spacing: -0.02em; color: #fff; }
.pc.door .panel { position: absolute; left: 6.5mm; right: 6.5mm; top: 90mm; display: grid; grid-template-columns: 37mm 1fr; gap: 4.5mm; }
.pc.door .qrtile { width: 37mm; height: 37mm; }
.pc.door .txt { display: flex; flex-direction: column; gap: 1.5mm; padding-top: .5mm; }
.pc.door .txt b { font: 800 4.3mm/1.1 "Bricolage", sans-serif; color: #fff; }
.pc.door .txt span { font: 500 2.85mm/1.35 "Figtree", sans-serif; color: var(--muted); }
.pc.door .txt .from { color: var(--amber-hi); font-weight: 700; }
.pc.door .fine { position: absolute; left: 6.5mm; right: 6.5mm; bottom: 4.5mm; font: 500 2.2mm/1.35 "Figtree", sans-serif; color: var(--faint); }

/* Window sticker: 95 mm, rounded. A lantern lit in the window, readable from the pavement. */
.pc.window { width: 95mm; height: 95mm; border-radius: 8mm; padding: 6mm; text-align: center; border: .7mm solid var(--amber-dim);
  background: linear-gradient(180deg, #3a2f5e 0%, #262063 30%, var(--navy) 65%, var(--night) 100%); }
.pc.window .lamp { width: 21mm; height: 21mm; margin: 0 auto 2.4mm; border-radius: 5.4mm; border: .7mm solid var(--amber); }
.pc.window .k { font: 700 2.9mm/1 "Figtree", sans-serif; letter-spacing: .5mm; text-transform: uppercase; color: var(--muted); }
.pc.window h3 { margin-top: 1.2mm; font: 800 9.6mm/1 "Bricolage", sans-serif; letter-spacing: -0.02em; color: var(--amber); }
.pc.window .row { position: absolute; left: 6mm; right: 6mm; bottom: 6mm; display: grid; grid-template-columns: 24mm 1fr; gap: 3.5mm; align-items: center; text-align: left; }
.pc.window .qrtile { width: 24mm; height: 24mm; padding: 1.2mm; }
.pc.window .row b { display: block; font: 800 3.5mm/1.15 "Bricolage", sans-serif; color: #fff; }
.pc.window .row span { display: block; margin-top: 1mm; font: 500 2.5mm/1.3 "Figtree", sans-serif; color: var(--muted); }

/* NFC sticker: a 40 mm round label that goes over the tag. */
.pc.nfc { width: 40mm; height: 40mm; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: .8mm; text-align: center;
  border: .9mm solid var(--amber); background: linear-gradient(180deg, #3a2f5e 0%, #262063 35%, var(--navy) 75%, var(--night) 100%); }
.pc.nfc img { width: 9.5mm; height: 9.5mm; border-radius: 2.4mm; border: .4mm solid var(--amber); }
.pc.nfc .tap { font: 800 4mm/1 "Bricolage", sans-serif; letter-spacing: .2mm; color: #fff; text-transform: uppercase; }
.pc.nfc svg { width: 9mm; height: 4mm; color: var(--amber); }
.pc.nfc .sub { font: 600 2.1mm/1.15 "Figtree", sans-serif; color: var(--amber-hi); max-width: 26mm; }

/* A4 noticeboard poster: 210 x 297 mm. */
.pc.poster { width: 210mm; height: 297mm; }
.pc.poster .art { height: 138mm; }
.pc.poster .pill { left: 12mm; top: 12mm; font-size: 6.4mm; padding: 2mm 5mm 2mm 2mm; gap: 3mm; }
.pc.poster .pill img { width: 10mm; height: 10mm; border-radius: 2.6mm; }
.pc.poster .bottom { position: absolute; left: 14mm; right: 14mm; top: 146mm; bottom: 11mm; display: flex; flex-direction: column; }
.pc.poster .chip { align-self: flex-start; font-size: 3.6mm; padding: 1.5mm 4mm; }
.pc.poster h2 { margin-top: 3.5mm; font: 800 16.5mm/1 "Bricolage", sans-serif; letter-spacing: -0.025em; color: #fff; }
.pc.poster .lede { margin-top: 5mm; font: 500 4.5mm/1.42 "Figtree", sans-serif; color: var(--muted); }
.pc.poster .join { margin-top: auto; display: grid; grid-template-columns: 52mm 1fr; gap: 8mm; align-items: center; }
.pc.poster .qrtile { width: 52mm; height: 52mm; padding: 2.4mm; border-radius: 4mm; border-width: .8mm; }
.pc.poster ol { list-style: none; counter-reset: s; display: grid; gap: 3.2mm; }
.pc.poster li { counter-increment: s; display: grid; grid-template-columns: 8.5mm 1fr; gap: 3mm; align-items: center; font: 600 4.3mm/1.3 "Figtree", sans-serif; color: #fff; }
.pc.poster li::before { content: counter(s); display: grid; place-items: center; width: 8.5mm; height: 8.5mm; border-radius: 50%; background: var(--amber); color: var(--ink); font: 800 4.2mm/1 "Bricolage", sans-serif; }
.pc.poster .fine { margin-top: 6mm; font: 500 2.9mm/1.4 "Figtree", sans-serif; color: var(--faint); }

/* A4 landscape Street Portrait (the shop's preview; the print itself comes from the app's renderer). */
.pc.portrait { width: 297mm; height: 210mm; background: var(--cream); color: var(--ink); }
.pc.portrait .sky { position: absolute; inset: 0 0 44mm 0; overflow: hidden; }
.pc.portrait .sky img { width: 100%; height: 100%; object-fit: cover; }
.pc.portrait .band { position: absolute; left: 14mm; right: 14mm; bottom: 0; height: 44mm; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.pc.portrait .band b { display: block; font: 800 17mm/1 "Bricolage", sans-serif; letter-spacing: -0.02em; color: var(--ink); }
.pc.portrait .band span { display: block; margin-top: 2.5mm; font: 650 5.4mm/1.2 "Figtree", sans-serif; color: var(--amber-ink); }
.pc.portrait .band img { width: 13mm; height: 13mm; border-radius: 3mm; }