/* Quintinity site — page-level styles
   Built on tokens.css. Dark canvas first.
   ALL surfaces follow the brand: graphite, paper, amber accent.
   No gradients, no drop shadows, no glassmorphism.
*/

html, body {
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-ui);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body { min-height: 100vh; overflow-x: hidden; }

/* ── Page width ── */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 720px) {
  .container { padding: 0 24px; }
}

/* ── Mono labels (eyebrow / phase / spec) ── */
.mono {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-secondary);
}
.mono.amber { color: var(--accent-signal); }
.mono.lg    { font-size: 11px; }
.mono.sm    { font-size: 9px;  letter-spacing: 0.18em; }

/* ── Headlines ── */
.h-display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(48px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}
.h-section {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.h-card {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ── Section rhythm ── */
.section {
  border-bottom: 1px solid var(--border-hairline-canvas);
  padding: 112px 0;
  position: relative;
}
.section.tight   { padding: 72px 0; }
.section.compact { padding: 56px 0; }

.section.paper {
  background: var(--surface-paper);
  color: var(--text-primary-paper);
  border-color: var(--border-hairline-paper);
}
.section.paper .lede,
.section.paper .mono { color: var(--text-muted-paper); }
.section.paper .mono.amber { color: var(--accent-signal); }

/* ── Buttons ── */
.btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-signal);
  color: var(--surface-paper);
  border-color: var(--accent-signal);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong-canvas);
}
.btn-ghost:hover { border-color: var(--accent-signal); }
.section.paper .btn-ghost {
  color: var(--text-primary-paper);
  border-color: var(--border-strong-paper);
}
.btn .arrow {
  font-family: var(--font-mono);
  font-size: 13px;
  transform: translateY(-0.5px);
}
.btn:focus-visible { outline: 2px solid var(--accent-signal); outline-offset: 2px; }

/* ── Square status dot (brand spec) ── */
.sq {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent-signal);
  border-radius: 0;
  flex-shrink: 0;
}
.sq.muted { background: var(--text-secondary); }

/* ── Live amber sweep (only permitted loop) ── */
@keyframes amber-sweep {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.live-rule {
  height: 2px;
  background: var(--accent-signal);
  transform-origin: left;
  animation: amber-sweep 2s linear infinite;
}

/* ── Hairline divider ── */
.hairline {
  height: 1px;
  background: var(--border-hairline-canvas);
  width: 100%;
}
.section.paper .hairline { background: var(--border-hairline-paper); }

/* ── Tag chip (mono, square) ── */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong-canvas);
  border-radius: var(--radius-1);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-primary);
  background: transparent;
}
.section.paper .tag {
  border-color: var(--border-strong-paper);
  color: var(--text-primary-paper);
}

/* ── Card ── */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline-canvas);
  border-radius: var(--radius-2);
  padding: 32px;
}
.section.paper .card {
  background: var(--surface-sunk);
  border-color: var(--border-hairline-paper);
}

/* ── Marquee strip (the EMEX recap line) ── */
.recap-strip {
  background: var(--surface-raised);
  border-top: 1px solid var(--border-hairline-canvas);
  border-bottom: 1px solid var(--border-hairline-canvas);
  padding: 22px 0;
  overflow: hidden;
}
.recap-row {
  display: flex; align-items: center; gap: 36px;
  white-space: nowrap;
}

/* ── Spec list (mono key, sans value, right-aligned numeric) ── */
.spec-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border-hairline-canvas);
}
.spec-row:last-child { border-bottom: 1px solid var(--border-hairline-canvas); }
.spec-row .k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--text-secondary); }
.spec-row .v { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-primary); }
.spec-row .vmono {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-primary);
  letter-spacing: 0.04em;
}
.section.paper .spec-row { border-color: var(--border-hairline-paper); }
.section.paper .spec-row .v { color: var(--text-primary-paper); }
.section.paper .spec-row .vmono { color: var(--text-primary-paper); }

/* ── Decorative corner crops (industrial) ── */
.crop {
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--border-strong-canvas);
}
.crop.tl { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; }
.crop.tr { top: 12px; right: 12px; border-top: 1px solid; border-right: 1px solid; }
.crop.bl { bottom: 12px; left: 12px; border-bottom: 1px solid; border-left: 1px solid; }
.crop.br { bottom: 12px; right: 12px; border-bottom: 1px solid; border-right: 1px solid; }

/* ── Inputs ── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--text-secondary);
}
.input, .textarea, .select {
  background: var(--surface-canvas);
  border: 1px solid var(--border-strong-canvas);
  border-radius: var(--radius-2);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent-signal); }
.section.paper .input,
.section.paper .textarea {
  background: #FFFFFE;
  border-color: var(--border-strong-paper);
  color: var(--text-primary-paper);
}

/* ── Calendar slot button ── */
.slot {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 10px 0;
  border: 1px solid var(--border-strong-canvas);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-2);
  transition: all var(--dur-base) var(--ease-standard);
  text-align: center;
}
.slot:hover { border-color: var(--accent-signal); }
.slot.taken { color: var(--text-muted-canvas); border-style: dashed; cursor: not-allowed; }
.slot.selected {
  background: var(--accent-signal);
  border-color: var(--accent-signal);
  color: var(--surface-paper);
}
.section.paper .slot {
  border-color: var(--border-strong-paper);
  color: var(--text-primary-paper);
}
.section.paper .slot.taken { color: var(--text-muted-paper); }

/* ── Pipeline node ── */
.pipe-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.pipe-node {
  padding: 28px 24px 28px 0;
  border-left: 1px solid var(--border-hairline-canvas);
  position: relative;
}
.pipe-node:first-child { padding-left: 0; border-left: 0; }
.pipe-node:not(:first-child) { padding-left: 24px; }
.pipe-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent-signal);
  margin-bottom: 12px;
}
.pipe-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.pipe-body {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}
@media (max-width: 960px) {
  .pipe-grid { grid-template-columns: repeat(2, 1fr); }
  .pipe-node:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
  .pipe-grid { grid-template-columns: 1fr; }
  .pipe-node { border-left: 0 !important; padding-left: 0 !important;
    border-top: 1px solid var(--border-hairline-canvas); }
  .pipe-node:first-child { border-top: 0; }
}

/* ── Mix bar (real vs synthetic data) ── */
.mixbar {
  display: grid;
  grid-template-columns: var(--real, 60%) var(--syn, 40%);
  height: 28px;
  border: 1px solid var(--border-hairline-canvas);
}
.mixbar .real {
  background: var(--accent-signal);
}
.mixbar .syn {
  background: repeating-linear-gradient(
    -45deg,
    rgba(212,73,27,0.16) 0 6px,
    rgba(212,73,27,0.06) 6px 12px
  );
  border-left: 1px solid var(--border-hairline-canvas);
}

/* ── Floating call-out / number badge ── */
.numdot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--accent-signal);
  color: var(--surface-paper);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0;
}

/* ── Section anchors offset for sticky nav ── */
section[id] { scroll-margin-top: 72px; }