/* ============================================================
   ARMADILLO — PRINT STYLESHEET
   For A4 / Letter documents: one-pagers, case studies, contracts,
   DPA cover pages, conference handouts, evidence-ledger exports.
   ============================================================ */

@import url('./colors_and_type.css');

/* ─── Page setup ─────────────────────────────────────────── */
@page {
  size: A4;
  margin: 18mm 16mm 22mm 16mm;
  @bottom-left {
    content: "ARMADILLO  ·  armadillo.build";
    font-family: 'Space Grotesk', sans-serif;
    font-size: 8pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8A8B90;
  }
  @bottom-right {
    content: counter(page) " / " counter(pages);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 8pt;
    color: #8A8B90;
  }
}
@page :first {
  margin: 18mm 16mm 18mm 16mm;
  @bottom-left { content: ""; }
  @bottom-right { content: ""; }
}

html, body {
  background: #ffffff;
  color: #15161A;
  font-family: 'Figtree', sans-serif;
  font-size: 10.5pt;
  line-height: 1.45;
}

/* ─── Print typography ───────────────────────────────────── */
.p-display {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 42pt;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.p-h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 24pt; letter-spacing: -0.025em; line-height: 1.05; }
.p-h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 16pt; letter-spacing: -0.02em; }
.p-h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 12pt; }
.p-body { font-family: 'Figtree', sans-serif; font-size: 10.5pt; line-height: 1.5; }
.p-meta { font-family: 'Space Grotesk', sans-serif; font-size: 8pt; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8B90; }
.p-mono { font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace; font-size: 9pt; }

/* ─── Eyebrow with leading rule (mirrors web .label) ─────── */
.p-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8B90;
}
.p-label::before { content: ''; width: 22px; height: 0.5pt; background: currentColor; opacity: 0.6; }

/* ─── Italic emphasis inside headlines ───────────────────── */
.p-h1 em, .p-h2 em, .p-display em {
  font-style: italic;
  color: #6B6C71;
  font-weight: 400;
}

/* ─── Layout grid (print) ─────────────────────────────────
   8-col mini-grid at A4, gutters proportional to type size. */
.p-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 5mm;
  row-gap: 7mm;
}
.p-col-2 { grid-column: span 2; }
.p-col-3 { grid-column: span 3; }
.p-col-4 { grid-column: span 4; }
.p-col-5 { grid-column: span 5; }
.p-col-6 { grid-column: span 6; }
.p-col-8 { grid-column: span 8; }

/* ─── Rules + dividers ───────────────────────────────────── */
.p-rule {
  border: none;
  border-top: 0.5pt solid #15161A;
  margin: 6mm 0;
}
.p-rule-thin { border-top: 0.25pt solid rgba(20,20,18,0.35); }

/* ─── Print "card" (kept flat, no shadow) ────────────────── */
.p-card {
  border: 0.5pt solid rgba(20,20,18,0.20);
  border-radius: 4mm;
  padding: 6mm 7mm;
}

/* ─── Print pill / tag ───────────────────────────────────── */
.p-pill {
  display: inline-flex; align-items: center; gap: 4pt;
  border: 0.5pt solid rgba(20,20,18,0.32);
  padding: 2pt 6pt;
  border-radius: 999pt;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 7.5pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── Stat block (mirrors dark-stat on web) ──────────────── */
.p-stat .n {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 28pt;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.p-stat .n em {
  font-style: italic;
  color: #8A8B90;
  font-weight: 400;
}
.p-stat p { font-size: 8.5pt; color: #6F7075; margin-top: 3mm; }

/* ─── Page break helpers ─────────────────────────────────── */
.page-break       { page-break-after: always; break-after: page; }
.avoid-break      { page-break-inside: avoid; break-inside: avoid; }

/* ─── Cover / dark page ──────────────────────────────────── */
.p-dark-page {
  background: #0C0C0A;
  color: #ECEAE3;
  padding: 24mm;
  min-height: 100vh;
}
.p-dark-page .p-h1 { color: #ECEAE3; }
.p-dark-page .p-label { color: #B8B9BD; }
.p-dark-page .p-meta { color: #8C8C88; }