/* ─── ClearFile · Ink on Plum — site CSS ─── */
/* Only what Tailwind can't do cleanly: the brass disc, dashed pipeline line, monogram, ACME mock-doc density. */

:root {
  --ink:        #21080E;
  --inkSoft:    #2C0E16;
  --plum:       #4E1A2D;
  --plumLight:  #6E2842;
  --paper:      #F2E9D7;
  --paperSoft:  #E6DCC4;
  --brass:      #D7A24A;
  --brassDeep:  #A47525;
  --blush:      #E89A8B;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ─── Pipeline (light slab) ─── */
.pipeline-grid { position: relative; }
.pipeline-grid::before {
  content: "";
  position: absolute;
  top: 60px; /* center on the 120px nodes */
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 0;
  border-top: 1.4px dashed var(--plum);
  opacity: 0.55;
  z-index: 0;
}
@media (max-width: 1023px) {
  .pipeline-grid::before { display: none; }
}

.pipeline-node {
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  background: var(--paperSoft);
  border: 1.4px solid var(--plum);
}
.pipeline-node-mid {
  background: var(--plum);
  border-color: var(--plum);
}

/* ─── Centerpiece + brass disc ─── */
.centerpiece { position: relative; }

.brass-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 168px;
  height: 168px;
  border-radius: 9999px;
  background: var(--brass);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 20px 60px rgba(215, 162, 74, 0.4);
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 1279px) {
  .brass-disc { width: 132px; height: 132px; }
  .brass-disc > div:first-child { font-size: 44px; }
}
@media (max-width: 1023px) {
  .brass-disc {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    border-radius: 9999px;
    width: 132px;
    height: 132px;
    margin: 8px auto;
  }
}

/* ─── Quote monogram avatar ─── */
.monogram {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--brass);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

/* ─── ACME mock doc — Georgia 9px density ─── */
.acme-doc {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  line-height: 1.5;
  color: rgba(33, 8, 14, 0.86);
}
.acme-doc p { margin: 0 0 6px; }
.acme-doc strong { font-weight: 700; }

/* ─── Trust grid internal hairlines (plum @ 25% on paper) ─── */
.trust-grid {
  --hair: rgba(78, 26, 45, 0.25);
}
.trust-grid > article {
  border-top: 1px solid var(--hair);
}
.trust-grid > article:nth-child(odd) {
  border-right: 1px solid var(--hair);
}
@media (max-width: 767px) {
  .trust-grid > article:nth-child(odd) { border-right: 0; }
}

/* ─── Selection ─── */
::selection { background: var(--brass); color: var(--ink); }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}