/* ============================================================================
   PRINTCRAFT CSS — A Print-First CSS Library
   Version: 1.0.0
   Default: US Letter (8.5in × 11in)
   
   Usage: Add class "page" to each printable page container.
   Override sizes with classes like "page-a4", "page-legal", or use
   CSS custom properties for arbitrary dimensions:
     style="--page-w: 5in; --page-h: 7in;"
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ---------------------------------------------------------------------------- */
:root {
  /* Page Dimensions — US Letter Default */
  --page-w: 8.5in;
  --page-h: 11in;

  /* Margins */
  --margin-top: 0.75in;
  --margin-right: 0.75in;
  --margin-bottom: 0.75in;
  --margin-left: 0.75in;

  /* Content area (auto-calculated) */
  --content-w: calc(var(--page-w) - var(--margin-left) - var(--margin-right));
  --content-h: calc(var(--page-h) - var(--margin-top) - var(--margin-bottom));

  /* Grid */
  --grid-columns: 12;
  --grid-gutter: 0.125in;

  /* Typography */
  --font-body: "Georgia", "Times New Roman", Times, serif;
  --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace;

  --text-xs: 7pt;
  --text-sm: 8pt;
  --text-base: 10pt;
  --text-md: 11pt;
  --text-lg: 14pt;
  --text-xl: 18pt;
  --text-2xl: 24pt;
  --text-3xl: 30pt;

  --leading-tight: 1.15;
  --leading-normal: 1.4;
  --leading-relaxed: 1.65;

  /* Colors — Print-Safe Palette */
  --black: #000000;
  --gray-900: #1a1a1a;
  --gray-700: #444444;
  --gray-500: #777777;
  --gray-300: #b0b0b0;
  --gray-100: #e5e5e5;
  --white: #ffffff;

  /* Accent Colors — Semantic tokens for emphasis & branding.
     Default: grayscale-safe (black/gray). Override with ink-color
     mode or set --accent-* properties directly for brand colors. */
  --accent: var(--gray-900);
  --accent-strong: var(--black);
  --accent-bg: #f0f0f0;
  --accent-border: var(--gray-700);

  /* Borders & Lines */
  --border-thin: 0.5pt;
  --border-normal: 1pt;
  --border-thick: 1.5pt;
  --border-heavy: 2pt;
  --border-color: var(--black);
  --border-color-light: var(--gray-300);

  /* Bleed */
  --bleed: 0in;

  /* Form Fields */
  --field-line-weight: 0.75pt;
  --field-min-height: 0.3in;
  --checkbox-size: 0.15in;
}


/* ----------------------------------------------------------------------------
   2. @PAGE RULES
   ---------------------------------------------------------------------------- */
@page {
  size: letter portrait;
  margin: 0.75in;
}

@page :first {
  margin-top: 0.75in;
}

@page landscape {
  size: letter landscape;
}

/* Named page overrides */
@page a4 { size: A4 portrait; margin: 20mm; }
@page a4-landscape { size: A4 landscape; margin: 20mm; }
@page legal { size: legal portrait; margin: 0.75in; }
@page legal-landscape { size: legal landscape; margin: 0.75in; }
@page half-letter { size: 5.5in 8.5in; margin: 0.5in; }
@page tabloid { size: 11in 17in; margin: 0.75in; }


/* ----------------------------------------------------------------------------
   3. RESET & BASE
   ---------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--black);
  background: var(--gray-100); /* Screen preview background */
}

@media print {
  body {
    background: none;
  }
}


/* ----------------------------------------------------------------------------
   4. PAGE CONTAINER
   ---------------------------------------------------------------------------- */
.page {
  width: var(--page-w);
  min-height: var(--page-h);
  padding: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
  background: var(--white);
  position: relative;
  overflow: hidden;

  /* Screen preview */
  margin: 0.25in auto;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}

@media print {
  .page {
    margin: 0;
    padding: 0; /* @page margins handle this in print */
    box-shadow: none;
    width: 100%;
    min-height: auto;
    page-break-after: always;
  }

  .page:last-child {
    page-break-after: auto;
  }
}

/* --- Page Size Overrides --- */
.page-a4 {
  --page-w: 210mm;
  --page-h: 297mm;
  --margin-top: 20mm;
  --margin-right: 20mm;
  --margin-bottom: 20mm;
  --margin-left: 20mm;
  page: a4;
}

.page-a4-landscape {
  --page-w: 297mm;
  --page-h: 210mm;
  --margin-top: 20mm;
  --margin-right: 20mm;
  --margin-bottom: 20mm;
  --margin-left: 20mm;
  page: a4-landscape;
}

.page-legal {
  --page-w: 8.5in;
  --page-h: 14in;
  page: legal;
}

.page-legal-landscape {
  --page-w: 14in;
  --page-h: 8.5in;
  page: legal-landscape;
}

.page-half-letter {
  --page-w: 5.5in;
  --page-h: 8.5in;
  --margin-top: 0.5in;
  --margin-right: 0.5in;
  --margin-bottom: 0.5in;
  --margin-left: 0.5in;
  page: half-letter;
}

.page-landscape {
  --page-w: 11in;
  --page-h: 8.5in;
  page: landscape;
}

.page-tabloid {
  --page-w: 11in;
  --page-h: 17in;
  page: tabloid;
}

/* Custom size — set via inline style:
   <div class="page page-custom" style="--page-w: 6in; --page-h: 9in;">
   No additional CSS needed. Variables cascade automatically. */
.page-custom {
  /* Intentionally empty — uses whatever --page-w / --page-h you set */
}


/* --- Margin Variants --- */
.margin-narrow {
  --margin-top: 0.5in;
  --margin-right: 0.5in;
  --margin-bottom: 0.5in;
  --margin-left: 0.5in;
  padding: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
}

.margin-wide {
  --margin-top: 1in;
  --margin-right: 1in;
  --margin-bottom: 1in;
  --margin-left: 1in;
  padding: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
}

.margin-none {
  --margin-top: 0in;
  --margin-right: 0in;
  --margin-bottom: 0in;
  --margin-left: 0in;
  padding: 0;
}


/* ----------------------------------------------------------------------------
   5. PHYSICAL-UNIT GRID SYSTEM
   ---------------------------------------------------------------------------- */

/* Flexbox Row */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
  width: 100%;
}

.row-no-gap { gap: 0; }

/* Column widths — fractions of content width */
.col-1   { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 1); }
.col-2   { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 1 * var(--grid-gutter)); }
.col-3   { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 2 * var(--grid-gutter)); }
.col-4   { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 3 * var(--grid-gutter)); }
.col-5   { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 4 * var(--grid-gutter)); }
.col-6   { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 5 * var(--grid-gutter)); }
.col-7   { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 6 * var(--grid-gutter)); }
.col-8   { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 7 * var(--grid-gutter)); }
.col-9   { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 8 * var(--grid-gutter)); }
.col-10  { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 9 * var(--grid-gutter)); }
.col-11  { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 10 * var(--grid-gutter)); }
.col-12  { width: 100%; }

/* Fractional shortcuts */
.col-full    { width: 100%; }
.col-half    { width: calc((100% - var(--grid-gutter)) / 2); }
.col-third   { width: calc((100% - 2 * var(--grid-gutter)) / 3); }
.col-quarter { width: calc((100% - 3 * var(--grid-gutter)) / 4); }
.col-two-thirds { width: calc((100% - 2 * var(--grid-gutter)) / 3 * 2 + var(--grid-gutter)); }
.col-three-quarters { width: calc((100% - 3 * var(--grid-gutter)) / 4 * 3 + 2 * var(--grid-gutter)); }

/* Fixed-width columns (physical units) */
.col-1in  { width: 1in; flex-shrink: 0; }
.col-2in  { width: 2in; flex-shrink: 0; }
.col-3in  { width: 3in; flex-shrink: 0; }
.col-4in  { width: 4in; flex-shrink: 0; }
.col-5in  { width: 5in; flex-shrink: 0; }
.col-6in  { width: 6in; flex-shrink: 0; }
.col-7in  { width: 7in; flex-shrink: 0; }

/* Auto-fill remaining space */
.col-auto { flex: 1 1 0; min-width: 0; }

/* Alignment */
.row-top      { align-items: flex-start; }
.row-center   { align-items: center; }
.row-bottom   { align-items: flex-end; }
.row-stretch  { align-items: stretch; }
.row-between  { justify-content: space-between; }
.row-around   { justify-content: space-around; }
.row-evenly   { justify-content: space-evenly; }
.row-end      { justify-content: flex-end; }
.row-center-h { justify-content: center; }


/* ----------------------------------------------------------------------------
   6. TYPOGRAPHY
   ---------------------------------------------------------------------------- */

/* Headings */
h1, .h1 { font-family: var(--font-heading); font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: 700; margin-bottom: 0.15in; }
h2, .h2 { font-family: var(--font-heading); font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: 700; margin-bottom: 0.12in; }
h3, .h3 { font-family: var(--font-heading); font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: 600; margin-bottom: 0.1in; }
h4, .h4 { font-family: var(--font-heading); font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: 600; margin-bottom: 0.08in; }
h5, .h5 { font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-tight); font-weight: 600; margin-bottom: 0.06in; }
h6, .h6 { font-family: var(--font-heading); font-size: var(--text-base); line-height: var(--leading-tight); font-weight: 600; margin-bottom: 0.05in; }

/* Body text */
p { margin-bottom: 0.1in; }
p:last-child { margin-bottom: 0; }

/* Size utilities */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* Weight */
.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* Style */
.italic    { font-style: italic; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.smallcaps { font-variant: small-caps; }
.underline { text-decoration: underline; }
.strike    { text-decoration: line-through; }

/* Alignment */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

/* Font family */
.font-body    { font-family: var(--font-body); }
.font-heading { font-family: var(--font-heading); }
.font-mono    { font-family: var(--font-mono); }

/* Line height */
.leading-tight   { line-height: var(--leading-tight); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

/* Colors */
.text-black   { color: var(--black); }
.text-dark    { color: var(--gray-900); }
.text-muted   { color: var(--gray-700); }
.text-light   { color: var(--gray-500); }
.text-faint   { color: var(--gray-300); }


/* ----------------------------------------------------------------------------
   7. SPACING (Physical Units)
   ---------------------------------------------------------------------------- */

/* Margin */
.mt-0   { margin-top: 0; }         .mb-0   { margin-bottom: 0; }
.mt-xs  { margin-top: 0.05in; }    .mb-xs  { margin-bottom: 0.05in; }
.mt-sm  { margin-top: 0.1in; }     .mb-sm  { margin-bottom: 0.1in; }
.mt-md  { margin-top: 0.2in; }     .mb-md  { margin-bottom: 0.2in; }
.mt-lg  { margin-top: 0.35in; }    .mb-lg  { margin-bottom: 0.35in; }
.mt-xl  { margin-top: 0.5in; }     .mb-xl  { margin-bottom: 0.5in; }
.mt-2xl { margin-top: 0.75in; }    .mb-2xl { margin-bottom: 0.75in; }
.mt-3xl { margin-top: 1in; }       .mb-3xl { margin-bottom: 1in; }

.ml-0   { margin-left: 0; }        .mr-0   { margin-right: 0; }
.ml-xs  { margin-left: 0.05in; }   .mr-xs  { margin-right: 0.05in; }
.ml-sm  { margin-left: 0.1in; }    .mr-sm  { margin-right: 0.1in; }
.ml-md  { margin-left: 0.2in; }    .mr-md  { margin-right: 0.2in; }
.ml-lg  { margin-left: 0.35in; }   .mr-lg  { margin-right: 0.35in; }
.ml-xl  { margin-left: 0.5in; }    .mr-xl  { margin-right: 0.5in; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.p-0   { padding: 0; }
.p-xs  { padding: 0.05in; }
.p-sm  { padding: 0.1in; }
.p-md  { padding: 0.2in; }
.p-lg  { padding: 0.35in; }
.p-xl  { padding: 0.5in; }

.pt-0  { padding-top: 0; }         .pb-0  { padding-bottom: 0; }
.pt-xs { padding-top: 0.05in; }    .pb-xs { padding-bottom: 0.05in; }
.pt-sm { padding-top: 0.1in; }     .pb-sm { padding-bottom: 0.1in; }
.pt-md { padding-top: 0.2in; }     .pb-md { padding-bottom: 0.2in; }
.pt-lg { padding-top: 0.35in; }    .pb-lg { padding-bottom: 0.35in; }
.pt-xl { padding-top: 0.5in; }     .pb-xl { padding-bottom: 0.5in; }

.pl-0  { padding-left: 0; }        .pr-0  { padding-right: 0; }
.pl-sm { padding-left: 0.1in; }    .pr-sm { padding-right: 0.1in; }
.pl-md { padding-left: 0.2in; }    .pr-md { padding-right: 0.2in; }
.pl-lg { padding-left: 0.35in; }   .pr-lg { padding-right: 0.35in; }

.px-sm { padding-left: 0.1in; padding-right: 0.1in; }
.px-md { padding-left: 0.2in; padding-right: 0.2in; }
.py-sm { padding-top: 0.1in; padding-bottom: 0.1in; }
.py-md { padding-top: 0.2in; padding-bottom: 0.2in; }


/* ----------------------------------------------------------------------------
   8. BORDERS & RULES
   ---------------------------------------------------------------------------- */
.border       { border: var(--border-normal) solid var(--border-color); }
.border-thin  { border: var(--border-thin) solid var(--border-color); }
.border-thick { border: var(--border-thick) solid var(--border-color); }
.border-heavy { border: var(--border-heavy) solid var(--border-color); }
.border-light { border: var(--border-normal) solid var(--border-color-light); }

.border-top    { border-top: var(--border-normal) solid var(--border-color); }
.border-bottom { border-bottom: var(--border-normal) solid var(--border-color); }
.border-left   { border-left: var(--border-normal) solid var(--border-color); }
.border-right  { border-right: var(--border-normal) solid var(--border-color); }

.border-none { border: none; }

/* Horizontal rule */
.rule {
  border: none;
  border-top: var(--border-normal) solid var(--border-color);
  margin: 0.15in 0;
}

.rule-thin   { border-top-width: var(--border-thin); }
.rule-thick  { border-top-width: var(--border-thick); }
.rule-heavy  { border-top-width: var(--border-heavy); }
.rule-light  { border-top-color: var(--border-color-light); }
.rule-dashed { border-top-style: dashed; }
.rule-dotted { border-top-style: dotted; }
.rule-double { border-top-style: double; border-top-width: 3pt; }


/* ----------------------------------------------------------------------------
   9. TABLES
   ---------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

th, td {
  padding: 0.04in 0.08in;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border-thin) solid var(--border-color-light);
}

th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  border-bottom: var(--border-normal) solid var(--border-color);
}

/* Table variants */
.table-bordered th,
.table-bordered td {
  border: var(--border-thin) solid var(--border-color-light);
}

.table-bordered th {
  border-bottom: var(--border-normal) solid var(--border-color);
}

.table-striped tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

.table-compact th,
.table-compact td {
  padding: 0.02in 0.06in;
  font-size: var(--text-xs);
}

.table-relaxed th,
.table-relaxed td {
  padding: 0.06in 0.1in;
}

/* Cell alignment */
.cell-center { text-align: center; }
.cell-right  { text-align: right; }
.cell-middle { vertical-align: middle; }
.cell-nowrap { white-space: nowrap; }


/* ----------------------------------------------------------------------------
   10. FORM ELEMENTS (Print Forms)
   ---------------------------------------------------------------------------- */

/* Text input line (write-on blank) */
.field-line {
  display: inline-block;
  border-bottom: var(--field-line-weight) solid var(--black);
  min-width: 2in;
  min-height: var(--field-min-height);
  vertical-align: bottom;
}

.field-line-full {
  display: block;
  border-bottom: var(--field-line-weight) solid var(--black);
  width: 100%;
  min-height: var(--field-min-height);
}

/* Sized fields */
.field-sm   { min-width: 1in; }
.field-md   { min-width: 2.5in; }
.field-lg   { min-width: 4in; }
.field-xl   { min-width: 5.5in; }
.field-full { width: 100%; display: block; }

/* Text area (multi-line write-in box) */
.field-box {
  border: var(--field-line-weight) solid var(--black);
  width: 100%;
  min-height: 0.75in;
  padding: 0.05in;
}

.field-box-sm { min-height: 0.5in; }
.field-box-md { min-height: 1in; }
.field-box-lg { min-height: 1.5in; }
.field-box-xl { min-height: 2in; }

/* Lined write-in area */
.field-lined {
  width: 100%;
  background-image: repeating-linear-gradient(
    transparent,
    transparent calc(var(--field-min-height) - var(--field-line-weight)),
    var(--black) calc(var(--field-min-height) - var(--field-line-weight)),
    var(--black) var(--field-min-height)
  );
  background-position: bottom;
  min-height: 1in;
}

.field-lined-sm  { min-height: 0.6in; }
.field-lined-md  { min-height: 1in; }
.field-lined-lg  { min-height: 1.5in; }
.field-lined-xl  { min-height: 2in; }
.field-lined-2xl { min-height: 3in; }

/* Checkbox */
.checkbox {
  display: inline-block;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: var(--border-normal) solid var(--black);
  vertical-align: middle;
  margin-right: 0.06in;
  flex-shrink: 0;
}

.checkbox-round {
  display: inline-block;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: var(--border-normal) solid var(--black);
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.06in;
  flex-shrink: 0;
}

/* Checkbox item row */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.06in;
  margin-bottom: 0.06in;
}

.check-item .checkbox,
.check-item .checkbox-round {
  margin-top: 0.02in;
}

/* Labeled field pair */
.field-group {
  display: flex;
  align-items: baseline;
  gap: 0.08in;
  margin-bottom: 0.12in;
}

.field-label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.field-group .field-line {
  flex: 1;
}

/* Signature block */
.signature-block {
  margin-top: 0.3in;
  display: flex;
  gap: 0.4in;
}

.signature-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.signature-line {
  border-bottom: var(--border-normal) solid var(--black);
  min-height: 0.4in;
}

.signature-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--gray-700);
  margin-top: 0.03in;
}

/* Number circle */
.number-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.22in;
  height: 0.22in;
  border: var(--border-normal) solid var(--black);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
}


/* ----------------------------------------------------------------------------
   11. COMMON LAYOUT BLOCKS
   ---------------------------------------------------------------------------- */

/* Header / Letterhead area */
.page-header {
  margin-bottom: 0.25in;
  padding-bottom: 0.1in;
  border-bottom: var(--border-heavy) solid var(--black);
}

.page-header-light {
  margin-bottom: 0.25in;
  padding-bottom: 0.1in;
  border-bottom: var(--border-normal) solid var(--gray-300);
}

/* Footer */
.page-footer {
  position: absolute;
  bottom: var(--margin-bottom);
  left: var(--margin-left);
  right: var(--margin-right);
  font-size: var(--text-xs);
  color: var(--gray-500);
  border-top: var(--border-thin) solid var(--gray-300);
  padding-top: 0.05in;
  display: flex;
  justify-content: space-between;
}

/* Section with heading */
.section {
  margin-bottom: 0.2in;
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: 0.08in;
  padding-bottom: 0.04in;
  border-bottom: var(--border-normal) solid var(--black);
}

.section-subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 0.06in;
  color: var(--gray-700);
}

/* Shaded block / callout */
.shaded {
  background-color: #f0f0f0;
  padding: 0.12in;
}

.callout {
  border-left: 3pt solid var(--black);
  padding: 0.08in 0.15in;
  margin: 0.1in 0;
  background-color: #fafafa;
}

/* Notice / warning box */
.notice {
  border: var(--border-thick) solid var(--black);
  padding: 0.12in;
  text-align: center;
  font-weight: 600;
}

/* Two-column quick layout */
.two-col {
  display: flex;
  gap: var(--grid-gutter);
}

.two-col > * {
  flex: 1;
}


/* ----------------------------------------------------------------------------
   12. IMAGES & MEDIA
   ---------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

.img-full   { width: 100%; }
.img-half   { width: 50%; }
.img-third  { width: 33.33%; }
.img-quarter { width: 25%; }
.img-1in    { width: 1in; }
.img-2in    { width: 2in; }
.img-3in    { width: 3in; }

.img-border { border: var(--border-normal) solid var(--border-color); }
.img-float-left  { float: left; margin-right: 0.15in; margin-bottom: 0.1in; }
.img-float-right { float: right; margin-left: 0.15in; margin-bottom: 0.1in; }

/* Logo placement */
.logo {
  max-height: 0.6in;
  width: auto;
}

.logo-lg {
  max-height: 1in;
  width: auto;
}


/* ----------------------------------------------------------------------------
   13. PAGE BREAK CONTROLS
   ---------------------------------------------------------------------------- */
.break-before    { break-before: page; }
.break-after     { break-after: page; }
.break-avoid     { break-inside: avoid; }
.keep-together   { break-inside: avoid; }

/* Prevent orphans and widows */
.no-orphans p {
  orphans: 3;
  widows: 3;
}


/* ----------------------------------------------------------------------------
   14. PRINT MARKS & HELPERS
   ---------------------------------------------------------------------------- */

/* Fold mark (horizontal dashed line) */
.fold-mark {
  border-top: 0.5pt dashed var(--gray-300);
  margin: 0;
  position: relative;
}

.fold-mark::after {
  content: "✂ fold";
  font-size: 6pt;
  color: var(--gray-300);
  position: absolute;
  top: -8pt;
  right: 0;
}

/* Cut line */
.cut-line {
  border-top: 0.5pt dashed var(--gray-500);
  margin: 0.1in 0;
}

.cut-line::after {
  content: "✂ cut here";
  font-size: 6pt;
  color: var(--gray-500);
}

/* Screen-only elements (hidden in print) */
.screen-only {
  display: block;
}

@media print {
  .screen-only { display: none !important; }
}

/* Print-only elements (hidden on screen) */
.print-only {
  display: none;
}

@media print {
  .print-only { display: block !important; }
}


/* ----------------------------------------------------------------------------
   15. COLOR MODES — Ink Optimization

   Three modes for different print scenarios:

   .ink-k          Black & white only. No gray fills, no halftones.
                   Maximum toner efficiency. Visual hierarchy via
                   weight, size, and borders only. Best for B&W
                   laser and high-volume copying.

   .ink-grayscale  Full gray range (default behavior). Uses K channel
                   density for shading, fills, and subtle hierarchy.
                   Best for most office/laser printers.

   .ink-color      Full CMYK. Unlocks accent colors for branding.
                   Set --accent, --accent-strong, --accent-bg, and
                   --accent-border via inline style or your own CSS
                   to match your brand palette.

   Usage:
     <div class="page ink-k">          Pure B&W
     <div class="page ink-grayscale">  Grayscale (default)
     <div class="page ink-color" style="--accent: #b45309; --accent-strong: #92400e; --accent-bg: #fffbeb; --accent-border: #d97706;">
   ---------------------------------------------------------------------------- */

/* --- ink-k: Black & White (no grays, no fills) --- */
.ink-k {
  --accent: var(--black);
  --accent-strong: var(--black);
  --accent-bg: var(--white);
  --accent-border: var(--black);
}

/* Remove gray fills — replace with borders for structure */
.ink-k .shaded {
  background-color: transparent;
  border: var(--border-thin) solid var(--black);
}

.ink-k .callout {
  background-color: transparent;
}

.ink-k .table-striped tbody tr:nth-child(even) {
  background-color: transparent;
}

/* --- ink-grayscale: Full gray range (explicit opt-in, same as default) --- */
.ink-grayscale {
  --accent: var(--gray-900);
  --accent-strong: var(--black);
  --accent-bg: #f0f0f0;
  --accent-border: var(--gray-700);
}

/* --- ink-color: Full CMYK — set brand colors via custom properties --- */
.ink-color {
  /* Override these on the element or in your stylesheet:
     --accent, --accent-strong, --accent-bg, --accent-border */
}

/* --- Accent Utility Classes --- */
.text-accent    { color: var(--accent); }
.text-accent-strong { color: var(--accent-strong); }
.bg-accent      { background-color: var(--accent-bg); }
.border-accent  { border-color: var(--accent-border); }


/* ----------------------------------------------------------------------------
   16. DISPLAY & LAYOUT UTILITIES
   ---------------------------------------------------------------------------- */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-none    { flex: none; }
.flex-center  { display: flex; align-items: center; justify-content: center; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.gap-xs  { gap: 0.05in; }
.gap-sm  { gap: 0.1in; }
.gap-md  { gap: 0.2in; }
.gap-lg  { gap: 0.35in; }

.w-full  { width: 100%; }
.w-half  { width: 50%; }
.w-auto  { width: auto; }

.relative { position: relative; }
.absolute { position: absolute; }

.overflow-hidden { overflow: hidden; }
.clearfix::after { content: ""; display: table; clear: both; }

.hidden { display: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }


/* ----------------------------------------------------------------------------
   17. BLEED — Commercial Print Support
   ---------------------------------------------------------------------------- */

/* Extends the page container beyond the trim edge so backgrounds
   run past where the paper will be cut — no white slivers.

   Standard bleed: 0.125in (1/8") per side = 0.25in total per axis.

   Usage:
     <div class="page page-bleed">                        0.125in (standard)
     <div class="page page-bleed-sm">                     0.0625in (tight)
     <div class="page page-bleed-lg">                     0.25in (generous)
     <div class="page page-bleed" style="--bleed: 3mm;">  custom

   The page container grows by 2 × --bleed in each dimension.
   Content margins are offset inward so layout area stays the same.
   Add .crop-marks for classic printer's trim marks at corners.

   IMPORTANT: Also update your @page size to match the expanded
   dimensions, since CSS variables don't work inside @page rules:
     @page { size: 8.75in 5.75in; margin: 0; }                          */

.page-bleed,
.page-bleed-sm,
.page-bleed-lg {
  --bleed: 0.125in;
  width: calc(var(--page-w) + 2 * var(--bleed));
  min-height: calc(var(--page-h) + 2 * var(--bleed));
}

.page-bleed-sm { --bleed: 0.0625in; }
.page-bleed-lg { --bleed: 0.25in; }

/* Offset content margins inward by bleed amount */
.page-bleed:not(.margin-none),
.page-bleed-sm:not(.margin-none),
.page-bleed-lg:not(.margin-none) {
  padding: calc(var(--margin-top) + var(--bleed))
           calc(var(--margin-right) + var(--bleed))
           calc(var(--margin-bottom) + var(--bleed))
           calc(var(--margin-left) + var(--bleed));
}

/* Print overrides for bleed pages */
@media print {
  .page-bleed,
  .page-bleed-sm,
  .page-bleed-lg {
    width: 100%;
    min-height: auto;
  }
}

/* Crop marks — classic printer's trim marks at the four corners.
   Opt-in via .crop-marks class (requires .page-bleed for --bleed).

   Usage:
     <div class="page page-bleed crop-marks">
     Remove .crop-marks to turn them off.

   Color: defaults to black. Override with --crop-color or presets:
     .crop-gray    #b0b0b0     .crop-cyan    #00bcd4
     .crop-purple  #7c3aed     .crop-black   #000 (default)        */
.crop-marks {
  --crop-color: #000000;
}

.crop-gray   { --crop-color: #b0b0b0; }
.crop-cyan   { --crop-color: #00bcd4; }
.crop-purple { --crop-color: #7c3aed; }
.crop-black  { --crop-color: #000000; }

.crop-marks::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  --_len: calc(var(--bleed) - 2pt);
  --_wt: 0.5pt;
  --_c: var(--crop-color);
  background:
    /* ── Top-left corner ── */
    linear-gradient(var(--_c), var(--_c)) left 0            top var(--bleed)    / var(--_len) var(--_wt) no-repeat,
    linear-gradient(var(--_c), var(--_c)) left var(--bleed)  top 0              / var(--_wt)  var(--_len) no-repeat,
    /* ── Top-right corner ── */
    linear-gradient(var(--_c), var(--_c)) right 0           top var(--bleed)    / var(--_len) var(--_wt) no-repeat,
    linear-gradient(var(--_c), var(--_c)) right var(--bleed) top 0              / var(--_wt)  var(--_len) no-repeat,
    /* ── Bottom-left corner ── */
    linear-gradient(var(--_c), var(--_c)) left 0            bottom var(--bleed) / var(--_len) var(--_wt) no-repeat,
    linear-gradient(var(--_c), var(--_c)) left var(--bleed)  bottom 0           / var(--_wt)  var(--_len) no-repeat,
    /* ── Bottom-right corner ── */
    linear-gradient(var(--_c), var(--_c)) right 0           bottom var(--bleed) / var(--_len) var(--_wt) no-repeat,
    linear-gradient(var(--_c), var(--_c)) right var(--bleed) bottom 0           / var(--_wt)  var(--_len) no-repeat;
}