/* ==========================================================================
   Comp card — "Pastel & bling" · two A5 portrait sheets (148 × 210 mm)
   Cream paper, Bodoni first name + Allura gold last name, gold hairlines.
   Class contract: comment at the top of compcard() in lib/render.js.
   Type is sized in container units (cqi = 1% of the sheet width), so the
   sheet scales on screen and prints at exactly the same proportions.
   ========================================================================== */

@font-face { font-family: 'Bodoni Var'; src: url('/fonts/bodoni/bodoni-moda-latin-opsz-normal.woff2') format('woff2-variations'), url('/fonts/bodoni/bodoni-moda-latin-opsz-normal.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Var'; src: url('/fonts/bodoni/bodoni-moda-latin-opsz-italic.woff2') format('woff2-variations'), url('/fonts/bodoni/bodoni-moda-latin-opsz-italic.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Allura'; src: url('/fonts/allura/allura-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost Var'; src: url('/fonts/jost/jost-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/jost/jost-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --paper: #fffcf7;
  --cream: #fdf8f3;
  --blush: #fde4e7;
  --pink: #ffd0d8;
  --fuchsia: #d94a8c;
  --ink: #3a2c2e;
  --taupe: #8c7b75;
  --gold: #c9a24f;
  --gold-deep: #a8752a;
  --hair: rgba(201, 162, 79, 0.75);
  --foil: linear-gradient(100deg, #8f6220 0%, #c99a3e 16%, #f1d891 30%, #b8862f 44%, #8a5d1d 60%, #d9b462 78%, #9c6d27 100%);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z'/%3E%3C/svg%3E");
  --serif: 'Bodoni Var', 'Bodoni Moda', 'Didot', 'Bodoni 72', serif;
  --script: 'Allura', 'Snell Roundhand', 'Segoe Script', cursive;
  --sans: 'Jost Var', 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.cc {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255, 208, 216, 0.7), rgba(255, 208, 216, 0) 70%),
    linear-gradient(180deg, #f9efe6, #f6e3e3);
}
.cc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc svg { display: block; width: 100%; height: 100%; }

/* ---------- top bar (screen only) ---------- */
.cc-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px max(16px, calc((100% - 1000px) / 2));
  background: rgba(255, 252, 247, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hair), 0 10px 24px -18px rgba(150, 90, 100, 0.6);
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cc-bar__back { color: var(--ink); text-decoration: none; padding: 10px 4px; }
.cc-bar__back:hover { color: var(--fuchsia); }
.cc-bar__print {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink);
  cursor: pointer;
  padding: 11px 18px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(var(--pink), var(--pink)) padding-box, var(--foil) border-box;
  box-shadow: 0 8px 18px -10px rgba(217, 74, 140, 0.6);
}
.cc-bar__print:hover { background: linear-gradient(#ffc2cd, #ffc2cd) padding-box, var(--foil) border-box; }

/* ---------- sheets ---------- */
.cc-sheets { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 28px; padding: 32px 16px 64px; }
.cc-page {
  position: relative;
  --w: min(148mm, 92vw); /* sheet width: the sheet's own padding can't use cqi */
  container-type: inline-size;
  width: var(--w);
  aspect-ratio: 148 / 210;
  overflow: hidden;
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(253, 228, 231, 0.55), rgba(253, 228, 231, 0) 70%),
    radial-gradient(60% 30% at 50% 100%, rgba(247, 239, 210, 0.6), rgba(247, 239, 210, 0) 70%),
    var(--paper);
  box-shadow: 0 30px 60px -24px rgba(120, 60, 70, 0.45), 0 0 0 1px rgba(201, 162, 79, 0.25);
}
/* gold hairline border inside the trim */
.cc-page::before {
  content: '';
  position: absolute;
  inset: calc(var(--w) * 0.034);
  border: 0.25mm solid var(--hair);
  border-radius: calc(var(--w) * 0.016);
  pointer-events: none;
}

/* ---------- front ---------- */
.cc-front { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; padding: calc(var(--w) * 0.085) calc(var(--w) * 0.085) calc(var(--w) * 0.07); }
.cc-front__frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 1.3cqi;
  border: 0.3mm solid var(--gold);
  border-radius: 41.5cqi 41.5cqi 2.6cqi 2.6cqi;
}
.cc-front__photo { width: 100%; height: 100%; overflow: hidden; border-radius: 40.2cqi 40.2cqi 1.6cqi 1.6cqi; background: var(--blush); }
.cc-front__name { position: relative; z-index: 2; margin-top: -7.5cqi; text-align: center; line-height: 0.8; }
.cc-first, .cc-last { display: block; }
.cc-front__name .cc-first {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17cqi;
  letter-spacing: -0.02em;
  color: var(--fuchsia);
  text-shadow: 0 0 2.4cqi rgba(255, 252, 247, 0.85);
}
.cc-last {
  width: fit-content;
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  padding: 0.1em 0.3em 0.18em 0.15em;
  background-image: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold-deep);
  -webkit-text-fill-color: transparent;
}
.cc-front__name .cc-last { margin: -0.42em 0 0 50%; font-size: 12.5cqi; rotate: -5deg; }
.cc-front__role,
.cc-info__role {
  margin: 0;
  font: 500 2.05cqi/1.4 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
}
.cc-front__role { margin-top: 1.6cqi; text-align: center; }

/* sparkles */
.cc-spark {
  position: absolute;
  width: 3.6cqi;
  height: 3.6cqi;
  background: linear-gradient(135deg, #fff1c1, #c9a24f 55%, #a8752a);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}
.cc-spark--1 { top: 7cqi; right: 7cqi; width: 4.6cqi; height: 4.6cqi; }
.cc-spark--2 { top: 11.5cqi; right: 12.5cqi; width: 2.2cqi; height: 2.2cqi; }
.cc-spark--3 { bottom: 13cqi; left: 13cqi; width: 3cqi; height: 3cqi; background: linear-gradient(135deg, #fff, #ffd0d8 45%, #e57a98); }

/* ---------- back ---------- */
.cc-back { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(var(--w) * 0.05); padding: calc(var(--w) * 0.085); }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2.2cqi; min-height: 0; }
.cc-grid--n0 { display: none; }
.cc-grid--n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.cc-grid--n2 { grid-template-rows: 1fr; }
.cc-grid--n3 .cc-cell:first-child { grid-row: span 2; }
.cc-cell { min-height: 0; overflow: hidden; border-radius: 2.2cqi; background: var(--blush); box-shadow: 0 0 0 0.25mm var(--gold); }
.cc-empty { width: 100%; height: 100%; background: linear-gradient(160deg, var(--blush), var(--pink)); }

.cc-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas: 'name meas' 'role meas' 'contact meas' 'site meas';
  grid-template-rows: auto auto 1fr auto;
  column-gap: 5.5cqi;
  align-items: start;
  padding-top: 4cqi;
  border-top: 0.25mm solid var(--hair);
}
.cc-info__name { grid-area: name; display: flex; align-items: baseline; flex-wrap: wrap; line-height: 0.9; }
.cc-info__name .cc-first { font-family: var(--serif); font-weight: 400; font-size: 8.4cqi; letter-spacing: -0.02em; color: var(--fuchsia); }
.cc-info__name .cc-last { font-size: 7.6cqi; margin-left: 0.5cqi; padding-top: 0; }
.cc-info__role { grid-area: role; margin-top: 1.2cqi; font-size: 1.75cqi; }
.cc-meas { grid-area: meas; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.4cqi; margin: 0; }
.cc-meas__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqi; padding: 1.15cqi 0 1cqi; border-bottom: 0.2mm solid rgba(201, 162, 79, 0.45); }
.cc-meas dt { font: 500 1.6cqi/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); }
.cc-meas dd { margin: 0; font-family: var(--serif); font-size: 2.8cqi; line-height: 1.1; color: var(--ink); text-align: right; white-space: nowrap; }
.cc-meas--empty { display: block; align-self: center; font-family: var(--script); font-size: 5.2cqi; line-height: 1.1; color: var(--fuchsia, #d94a8c); }
.cc-contact { grid-area: contact; display: flex; flex-direction: column; gap: 1.1cqi; margin-top: 3cqi; }
.cc-contact__row { display: flex; align-items: center; gap: 1.4cqi; margin: 0; font-size: 1.95cqi; line-height: 1.3; overflow-wrap: anywhere; }
.cc-ic { flex: none; display: grid; place-items: center; width: 3.4cqi; height: 3.4cqi; padding: 0.7cqi; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #f7b8c4, #e57a98); box-shadow: 0 0 0 0.2mm var(--gold); }
.cc-site { grid-area: site; margin: 2.4cqi 0 0; font-family: var(--serif); font-style: italic; font-size: 1.95cqi; letter-spacing: 0.04em; color: var(--gold-deep); }

/* legacy hooks (older markup) */
.cc-front__name span, .cc-front__name em { display: block; }
.cc-info dl { margin: 0; }
.cc-contact p { margin: 0; }

/* ---------- print: exact A5 sheets ---------- */
@media print {
  @page { size: A5 portrait; margin: 0; }
  html, body.cc { background: #fff; }
  .cc-bar { display: none; }
  .cc-sheets { display: block; padding: 0; }
  .cc-page { --w: 148mm; width: 148mm; height: 210mm; aspect-ratio: auto; box-shadow: none; break-after: page; page-break-after: always; }
  .cc-page:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}