/* ============================================================
   HUBRIS PRINT LANGUAGE
   Printed-matter panels pinned inside a dark screening room.
   Pure CSS — no images, no weight, mobile-safe.
   ============================================================ */

:root {
  --paper: #ece3cf;        /* aged cover stock */
  --paper-2: #e2d7bc;      /* deeper cream */
  --pulp: #ddd6c4;         /* newsprint grey-cream */
  --manila: #e6d5a8;       /* file-folder manila */
  --ink-print: #201a12;    /* printing ink */
  --ink-print-dim: #5c5140;
  --ink-print-faint: #a2937a;
  --rule-print: #c6b998;
  --red-ink: #c33427;      /* letterpress red */
  --blue-ink: #2b5fa8;     /* letterpress blue */
}

/* ---------- PAPER PANEL ----------
   Drop class="paper" on any section: it re-scopes the page's own
   CSS variables so everything inside prints in ink on paper. */
.paper {
  --ink: var(--ink-print);
  --ink-dim: var(--ink-print-dim);
  --ink-faint: var(--ink-print-faint);
  --rule: var(--rule-print);
  --bg: var(--paper);
  --bg-soft: var(--paper-2);
  /* Accents printed on paper use their deep-ink version — light accents
     (gold, cream, chartreuse) vanish against the stock. Pages without an
     --accent-deep fall back to letterpress red. */
  --accent: var(--accent-deep, #a83023);
  background: var(--paper) !important;
  color: var(--ink-print);
}

/* Cards sitting on paper get a lighter sheet so they read as cards */
.paper .inquiry-card {
  background: rgba(252, 247, 233, 0.7);
}
.paper.manila { background: var(--manila) !important; --bg: var(--manila); }
.paper.pulp   { background: var(--pulp) !important;   --bg: var(--pulp); }

/* Paper fiber + faint press mottle */
.paper { position: relative; }
.paper > * { position: relative; z-index: 2; }
.paper::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(120,100,60,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(120,100,60,0.08) 0%, transparent 45%),
    radial-gradient(rgba(32,26,18,0.05) 1px, transparent 1.6px);
  background-size: auto, auto, 9px 9px;
}

/* ---------- TORN EDGES ----------
   class="tear" rips the top and bottom of a paper panel. */
.tear {
  clip-path: polygon(
    0 18px, 3% 8px, 7% 15px, 11% 5px, 16% 13px, 21% 3px, 27% 12px, 33% 6px,
    39% 16px, 46% 4px, 52% 11px, 58% 5px, 64% 14px, 70% 3px, 76% 12px, 82% 6px,
    88% 15px, 94% 5px, 100% 12px,
    100% calc(100% - 14px), 96% calc(100% - 5px), 90% calc(100% - 13px),
    84% calc(100% - 4px), 78% calc(100% - 12px), 71% calc(100% - 6px),
    64% calc(100% - 15px), 57% calc(100% - 4px), 50% calc(100% - 11px),
    43% calc(100% - 5px), 36% calc(100% - 14px), 29% calc(100% - 4px),
    22% calc(100% - 12px), 15% calc(100% - 6px), 9% calc(100% - 15px),
    4% calc(100% - 5px), 0 calc(100% - 11px)
  );
}
.tear-top {
  clip-path: polygon(
    0 18px, 3% 8px, 7% 15px, 11% 5px, 16% 13px, 21% 3px, 27% 12px, 33% 6px,
    39% 16px, 46% 4px, 52% 11px, 58% 5px, 64% 14px, 70% 3px, 76% 12px, 82% 6px,
    88% 15px, 94% 5px, 100% 12px, 100% 100%, 0 100%
  );
}

/* ---------- ZIP-A-TONE SCREENS ---------- */
.tone-dots {
  background-image: radial-gradient(var(--tone, rgba(32,26,18,0.30)) 1.1px, transparent 1.7px);
  background-size: 7px 7px;
}
.tone-dots-lg {
  background-image: radial-gradient(var(--tone, rgba(32,26,18,0.25)) 2px, transparent 2.8px);
  background-size: 13px 13px;
}
.tone-lines {
  background-image: repeating-linear-gradient(45deg,
    var(--tone, rgba(32,26,18,0.22)) 0 1px, transparent 1px 5px);
}
.tone-cross {
  background-image:
    repeating-linear-gradient(45deg,  var(--tone, rgba(32,26,18,0.14)) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, var(--tone, rgba(32,26,18,0.14)) 0 1px, transparent 1px 6px);
}

/* ---------- HALFTONE PLATE ----------
   class="plate" on a still / thumb: off-white plate border,
   halftone dot screen, warm print shift. Skips dots on iframes
   so videos stay watchable. */
.plate {
  border: 10px solid #f6efdf !important;
  box-shadow: 0 3px 16px rgba(0,0,0,0.4);
  position: relative;
}
.plate::after {
  content: '' !important;
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: radial-gradient(rgba(32,26,18,0.20) 1px, transparent 1.45px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
}
.plate:has(iframe)::after { display: none; }
.plate img, .plate video { filter: sepia(0.16) contrast(1.05) saturate(1.05); }

/* ---------- PRESS ARTIFACTS ---------- */
/* CMYK misregistration on display type */
.misreg {
  text-shadow:
    1.6px 0 0 rgba(195,52,39,0.5),
   -1.6px 0 0 rgba(43,95,168,0.45);
}
/* Crop marks in the four corners of a panel */
.cropmarks::after {
  content: ''; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--ink-print) 0 0) top left     / 18px 1px,
    linear-gradient(var(--ink-print) 0 0) top left     / 1px 18px,
    linear-gradient(var(--ink-print) 0 0) top right    / 18px 1px,
    linear-gradient(var(--ink-print) 0 0) top right    / 1px 18px,
    linear-gradient(var(--ink-print) 0 0) bottom left  / 18px 1px,
    linear-gradient(var(--ink-print) 0 0) bottom left  / 1px 18px,
    linear-gradient(var(--ink-print) 0 0) bottom right / 18px 1px,
    linear-gradient(var(--ink-print) 0 0) bottom right / 1px 18px;
  background-repeat: no-repeat;
  opacity: 0.35;
}
/* Registration mark */
.regmark {
  position: absolute; width: 22px; height: 22px; z-index: 2; opacity: 0.3;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 6px, var(--ink-print) 6px 7px, transparent 7px),
    linear-gradient(var(--ink-print) 0 0) center / 100% 1px no-repeat,
    linear-gradient(var(--ink-print) 0 0) center / 1px 100% no-repeat;
}

/* Rubber stamp */
.stamp {
  display: inline-block;
  padding: 8px 18px;
  border: 3px double var(--stamp-ink, var(--red-ink));
  color: var(--stamp-ink, var(--red-ink));
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.4em; text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0.82;
  mask-image: radial-gradient(rgba(0,0,0,0.94) 1px, rgba(0,0,0,0.55) 1.5px);
  mask-size: 3px 3px;
  -webkit-mask-image: radial-gradient(rgba(0,0,0,0.94) 1px, rgba(0,0,0,0.55) 1.5px);
  -webkit-mask-size: 3px 3px;
}

/* Taped-down tilt — for paste-up boards */
.taped { position: relative; }
.taped::before {
  content: ''; position: absolute; top: -12px; left: 50%; z-index: 4;
  width: 84px; height: 24px; transform: translateX(-50%) rotate(-2deg);
  background: rgba(240,232,210,0.55);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  pointer-events: none;
}
.tilt-a { transform: rotate(-1.6deg); }
.tilt-b { transform: rotate(1.2deg); }
.tilt-c { transform: rotate(-0.7deg); }

/* Redaction bars — hover / tap to reveal */
.redact {
  background: var(--ink-print);
  color: transparent;
  border-radius: 1px;
  padding: 0 4px;
  cursor: help;
  transition: color 0.25s ease, background 0.25s ease;
  -webkit-user-select: none; user-select: none;
}
.redact:hover, .redact:active {
  background: rgba(32,26,18,0.12);
  color: var(--ink-print);
}

/* Paper folio line — "Vol. 01" running feet */
.folio {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--rule-print);
  padding-top: 10px; margin-top: 60px;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-print-faint);
}

@media (prefers-reduced-motion: reduce) {
  .tilt-a, .tilt-b, .tilt-c { transform: none; }
}