/* Comp card: two A5 portrait pages. On screen they sit side by side; in print each fills one sheet. */
:root { --ink: #17151a; --soft: #5f5763; --paper: #ffffff; --accent: #d4145a; --ground: #dedbd6; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Bricolage Grotesque", system-ui, sans-serif; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; padding: 5rem 1rem 3rem; }
.toolbar { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; padding: .9rem max(1rem, 4vw); background: rgb(23 21 26 / .92); color: #f3efe9; z-index: 2; }
.toolbar a { color: inherit; text-decoration: none; font: 500 .9rem/1 "IBM Plex Mono", monospace; }
.toolbar button { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: .75rem 1.1rem; font: 600 .9rem/1 inherit; cursor: pointer; }
.page { width: 148mm; height: 210mm; background: var(--paper); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .45); position: relative; overflow: hidden; flex: none; }
@media (max-width: 700px) {
  .page { width: 92vw; height: calc(92vw * 210 / 148); }
  .back__info dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .back__info dd { white-space: normal; }
}
.back { grid-template-columns: minmax(0, 1fr); }

.front__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.front__band { position: absolute; inset: auto 0 0 0; padding: 9mm 8mm 7mm; background: linear-gradient(to top, rgb(14 12 15 / .85), transparent); color: #f3efe9; display: flex; justify-content: space-between; align-items: flex-end; }
.front__band h1 { margin: 0; font-weight: 800; letter-spacing: -.04em; line-height: .9; font-size: 15mm; max-width: 70%; }
.mark { margin: 0; font-weight: 800; letter-spacing: -.02em; font-size: 4.2mm; display: flex; align-items: center; gap: 1.6mm; }
.mark i { width: 3mm; height: 3mm; border: .7mm solid var(--accent); border-radius: 50%; display: inline-block; }

.back { display: grid; grid-template-rows: 1fr auto; }
.back__grid { display: grid; gap: 2mm; padding: 6mm 6mm 0; min-height: 0; }
.back__grid--1 { grid-template-columns: 1fr; }
.back__grid--2 { grid-template-columns: 1fr 1fr; }
.back__grid--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.back__grid--3 img:first-child { grid-row: 1 / 3; }
.back__grid--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.back__grid img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.back__info { padding: 6mm; display: grid; gap: 4mm; }
.back__info h2 { margin: 0; font-weight: 800; letter-spacing: -.03em; font-size: 8mm; line-height: 1; }
.div { margin: 1mm 0 0; font: 400 2.8mm/1.4 "IBM Plex Mono", monospace; color: var(--soft); }
.back__info dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4mm 3mm; font: 400 3mm/1.35 "IBM Plex Mono", monospace; }
.back__info dt { color: var(--soft); text-transform: uppercase; letter-spacing: .08em; font-size: 2.2mm; }
.back__info dd { margin: 0; white-space: nowrap; }
.agency { margin: 0; padding-top: 3mm; border-top: .3mm solid #ddd; font: 400 2.5mm/1.5 "IBM Plex Mono", monospace; color: var(--soft); }
.agency b { color: var(--ink); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; }

@page { size: A5 portrait; margin: 0; }
@media print {
  body { background: none; padding: 0; display: block; }
  .toolbar { display: none; }
  .page { width: 148mm; height: 210mm; box-shadow: none; break-after: page; }
  .page:last-child { break-after: auto; }
}