/* ═══════════════════════════════════════════════════
   Design System Print Tier · v1 (ships with system v4)
   Source: https://design.seantippen.com/

   The paper counterpart of the dark web system: the same
   three faces and the same rationing, inverted to ink on
   white. One solid cyan band per page, near-black type,
   hairline architecture, sharp corners, big masthead.

   Import in a flyer page, AFTER tokens.css (tokens.css
   carries the three @font-face declarations):
   <link rel="stylesheet" href="https://design.seantippen.com/tokens.css">
   <link rel="stylesheet" href="https://design.seantippen.com/print.css">

   Clonable template: https://design.seantippen.com/flyer.html
   Export engine is Chrome: Save as PDF, Margins Default,
   Scale 100, Background graphics ON, no headers/footers.

   Rules of the tier:
   - Cyan appears once, maybe twice (band + one echo). Pink
     is off by default; at most one .p-tag per page.
   - Text is pure grayscale, never a colored dark.
   - 1px is the hairline floor (thinner drops out on laser).
   - 9pt is the type floor. Content runs 12pt body, 17pt deck
     and detail values; if it reads tiny, it is wrong.
   - Headers LEAD. Column and section heads are big dark Inter
     over the cyan rule; muted mono eyebrows are reserved for
     true metadata (meta strip, footer), never for a header.
   - One page. .sheet clips overflow instead of spilling to
     a blank page two.
   ═══════════════════════════════════════════════════ */

/* ─── Page + sheet scaffold ─── */
@page { size: letter portrait; margin: 0; }

html { color-scheme: light; }
html, body { margin: 0; }
.sheet, .sheet *, .sheet *::before, .sheet *::after {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet {
  /* Print ink tokens. Grayscale only for text; the two accents. */
  --p-paper: #fdfdfc;
  --p-ink: #141414;
  --p-ink-soft: #3d3d3d;
  --p-ink-mute: #6e6e6e;
  --p-hairline: #c9c9c9;
  --p-accent: oklch(0.8 0.13 195);   /* band fill: lighter than the web accent so near-black type holds on it */
  --p-accent-deep: oklch(0.5 0.12 195); /* cyan for TYPE and rules on white; the band accent is too light for text */
  --p-accent-ink: #0c1214;
  --p-pink: oklch(0.7 0.25 320);
  --p-margin: 0.5in;

  width: 8.5in;
  height: 11in;
  padding: var(--p-margin);
  background: var(--p-paper);
  color: var(--p-ink);
  font-family: var(--font-sans);
  font-size: 12pt;
  line-height: 1.5;
  overflow: hidden;            /* a one-pager clips; it never spills to a blank page two */
  position: relative;
  display: flex;
  flex-direction: column;      /* lets .p-foot pin to the bottom via margin-top:auto */
  break-inside: avoid;
  break-after: avoid;
}
.sheet > :last-child { margin-bottom: 0; }
.sheet > * { flex-shrink: 0; }  /* fixed-height flex column: nothing silently shrinks; overflow clips instead */

/* Full-width band escaping the sheet padding to the paper edge. */
.p-bleed { margin-left: calc(var(--p-margin) * -1); margin-right: calc(var(--p-margin) * -1); }

/* Screen preview: the sheet at 1:1 on a gray desk. Print strips it. */
@media screen {
  body { background: #9aa0a6; }
  .sheet { margin: 24px auto; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
}
@media print {
  body { background: none; }
  .sheet { margin: 0; box-shadow: none; }
  .no-print { display: none !important; }
}

/* ─── Rules ─── */
.p-rule { border: none; border-top: 1pt solid var(--p-ink); margin: 0; }
.p-rule-heavy { border: none; border-top: 4pt solid var(--p-ink); margin: 0; }
.p-rule-hair { border: none; border-top: 1px solid var(--p-hairline); margin: 0; }

/* ─── Roofline - a 10pt cyan cap flush to the paper's top edge.
   Reads as the page's cap, not a second color field. ─── */
.p-roof {
  height: 10pt;
  background: var(--p-accent);
  margin: calc(var(--p-margin) * -1) calc(var(--p-margin) * -1) 0.16in;
}

/* ─── Utilities ─── */
.p-up {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.p-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.p-soft { color: var(--p-ink-soft); }
.p-mute { color: var(--p-ink-mute); }

/* ─── Meta strip - one line, both ends, closed by a 1pt rule ─── */
.p-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25in;
  font-family: var(--font-mono);
  font-size: 10pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 8pt;
  border-bottom: 1pt solid var(--p-ink);
}
.p-meta-left { display: inline-flex; align-items: center; gap: 8pt; }
.p-meta-tick { width: 8pt; height: 8pt; background: var(--p-accent); flex-shrink: 0; }
.p-meta-right { color: var(--p-ink-mute); font-weight: 500; }

/* ─── Masthead - the ONE Big Shoulders block. Each line is a
   phrase sized to fill the measure (fit helper in flyer.html);
   never one word per line, never centered, never cyan. ─── */
.p-masthead { padding: 0.14in 0 0.1in; }
.p-masthead-line {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-size: 76pt;             /* the fit helper overrides per line */
  white-space: nowrap;
  color: var(--p-ink);
}

/* ─── Deck - the standfirst under the masthead ─── */
.p-deck {
  font-size: 17pt;
  line-height: 1.4;
  font-weight: 500;
  max-width: 34em;
  color: var(--p-ink-soft);
  margin: 0;
}

/* ─── Data spine - THE cyan band. Mono cells, near-black type,
   1pt ink verticals. The page's one solid color field. ─── */
.p-spine {
  background: var(--p-accent);
  color: var(--p-accent-ink);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 13pt 0;
}
.p-spine-cell { padding: 0 0.3in; border-right: 1pt solid var(--p-accent-ink); }
.p-spine-cell:last-child { border-right: none; }
/* Edge padding for the first and last cells inside a bled band */
.p-bleed-pad-l { padding-left: var(--p-margin); }
.p-bleed-pad-r { padding-right: var(--p-margin); }
.p-spine-label {
  font-family: var(--font-mono);
  font-size: 9.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 3pt;
}
.p-spine-value {
  font-family: var(--font-mono);
  font-size: 22pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ─── Fact slab - the alternative cyan band: one huge number ─── */
.p-slab {
  background: var(--p-accent);
  color: var(--p-accent-ink);
  padding: 0.22in 0.3in;
}
.p-slab-caption {
  font-family: var(--font-mono);
  font-size: 10pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4pt;
}
.p-slab-value {
  font-family: var(--font-mono);
  font-size: 64pt;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ─── Stat band - instrumentation row, hairline verticals ─── */
.p-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1pt solid var(--p-ink);
  border-bottom: 1pt solid var(--p-ink);
}
.p-stat { padding: 12pt 0.22in; border-right: 1px solid var(--p-hairline); }
.p-stat:first-child { padding-left: 0; }
.p-stat:last-child { border-right: none; }
.p-stat-label {
  font-family: var(--font-mono);
  font-size: 10pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--p-ink);
  margin-bottom: 6pt;
}
.p-stat-value {
  font-family: var(--font-mono);
  font-size: 44pt;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.p-stat-value.hero { color: var(--p-accent-deep); }  /* at most ONE per page */
.p-stat-meta { font-size: 10.5pt; color: var(--p-ink-soft); margin-top: 5pt; }

/* ─── Body columns - hairline-divided editorial grid ─── */
.p-cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.25in;
}
.p-col { border-left: 1px solid var(--p-hairline); padding-left: 0.25in; }
.p-col:first-child { border-left: none; padding-left: 0; }
.p-col-head {
  font-family: var(--font-sans);
  font-size: 16pt;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--p-ink);
  border-bottom: 1.5pt solid var(--p-accent-deep);
  padding-bottom: 6pt;
  margin-bottom: 9pt;
}
.p-body { font-size: 12pt; line-height: 1.5; margin: 0 0 8pt; }
.p-body strong { font-weight: 700; }
.p-body .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11.5pt; font-weight: 600; }

/* ─── Split - asymmetric editorial grid: story left, structured
   data right, divided by a full-height 1pt ink rule. The header
   problem is solved by structure, not by louder labels. ─── */
.p-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.35in; }
.p-split-right { border-left: 1pt solid var(--p-ink); padding-left: 0.3in; }

/* ─── Run-in lead - the header IS the opening words ─── */
.p-lead { font-weight: 800; }

/* ─── Timetable - schedule treated as data, not prose ─── */
.p-sched-row {
  display: flex;
  gap: 0.18in;
  align-items: center;   /* time centers against a wrapped item, never top-hangs */
  padding: 5.5pt 0;
  border-bottom: 1px solid var(--p-hairline);
}
.p-sched-row:last-child { border-bottom: none; }
.p-sched-time {
  font-family: var(--font-mono);
  font-size: 15pt;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 0.72in;
}
.p-sched-item { font-size: 12pt; }

/* ─── Compact stat band - fact row at flyer scale ─── */
.p-stats.compact .p-stat { padding: 8pt 0.22in; }
.p-stats.compact .p-stat-value { font-size: 20pt; letter-spacing: 0; }

/* ─── Detail cells - WHEN / WHERE / COST row ─── */
.p-details {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.25in;
}
.p-detail { border-top: 1px solid var(--p-hairline); padding-top: 8pt; }
.p-detail-label {
  font-family: var(--font-mono);
  font-size: 10.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--p-ink);
  margin-bottom: 4pt;
}
.p-detail-value { font-size: 17pt; font-weight: 650; }
.p-detail-value.num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Info table - the ops-brief key/value rows ─── */
.p-table { width: 100%; border-collapse: collapse; }
.p-table th {
  font-family: var(--font-mono);
  font-size: 10pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--p-ink);
  text-align: left;
  width: 1.6in;
  padding: 5pt 0.15in 5pt 0;
  border-bottom: 1px solid var(--p-hairline);
  vertical-align: baseline;
}
.p-table td {
  font-size: 12pt;
  padding: 5pt 0;
  border-bottom: 1px solid var(--p-hairline);
  vertical-align: baseline;
}
.p-table td .n { font-family: var(--font-mono); font-size: 11.5pt; font-variant-numeric: tabular-nums; }

/* ─── CTA zone - heavy rule, imperative line, QR right ─── */
.p-cta {
  border-top: 4pt solid var(--p-ink);
  padding-top: 0.18in;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4in;
  align-items: start;
}
.p-cta-line { font-size: 36pt; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; }
.p-cta-url {
  font-family: var(--font-mono);
  font-size: 18pt;
  font-weight: 700;
  color: var(--p-accent-deep);
  margin-top: 9pt;
}
.p-cta-note {
  font-family: var(--font-mono);
  font-size: 10pt;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--p-ink-mute);
  margin-top: 6pt;
}
.p-qr { width: 1.3in; text-align: center; }
.p-qr-box {
  width: 1.3in;
  height: 1.3in;
  border: 1px solid var(--p-hairline);
  padding: 8pt;
  display: grid;
  place-items: center;
}
.p-qr-box img { width: 100%; height: 100%; image-rendering: pixelated; }
.p-qr-caption {
  font-family: var(--font-mono);
  font-size: 9pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 5pt;
  color: var(--p-ink-soft);
}

/* ─── Footer strip - pins to the bottom of the sheet ─── */
.p-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25in;
  margin-top: auto;
  border-top: 1px solid var(--p-hairline);
  padding-top: 7pt;
  font-family: var(--font-mono);
  font-size: 9pt;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-ink-mute);
}

/* ─── State tag - the ONE permitted pink hit, off by default.
   The only rounded element on the page. ─── */
.p-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--p-pink);
  color: #fff;
  padding: 2pt 8pt;
  border-radius: 9999px;
  vertical-align: middle;
}

/* ─── Zone spacing rhythm ─── */
.p-gap-sm { margin-top: 0.12in; }
.p-gap { margin-top: 0.2in; }
.p-gap-lg { margin-top: 0.22in; }