/* ============================================================================
   Talaria Intelligence — talariaintelligence.com — shared page chrome
   Component layer ONLY. Every colour, face, radius, shadow, motion value comes
   from colors_and_type.css. No token is redefined here.

   Loaded after colors_and_type.css on every page. Holds the masthead lockup,
   the nav, section scaffolding, buttons and footer — the furniture that must be
   identical across the flagship and every demo so the site reads as one surface.
   ============================================================================ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.page { max-width: var(--page-max); margin: 0 auto; padding: 34px var(--sp-5) var(--sp-8); }
@media (max-width: 640px) { .page { padding: 26px var(--sp-3) var(--sp-6); } }
a { color: var(--b1-ink); }

/* ---- Skip link ---- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 1100; background: var(--surface);
  border: var(--bw) solid var(--bW); border-radius: var(--r-control); padding: 8px 14px;
  font-family: var(--f-body); font-size: 12px; color: var(--dW); }
.skip:focus { left: var(--sp-3); top: 10px; outline: var(--focus-ring); outline-offset: var(--focus-off); }

/* ---- Masthead lockup ---- */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img, .logo svg { flex-shrink: 0; display: block; }
.wordmark { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: .01em; line-height: 1.1; }
.wordmark .t { color: var(--dW); }
.wordmark .i { color: var(--tc); }   /* identity anchor — matches the Datum mark */
.wordmark .tm { font-size: 7px; color: var(--rGold-ink); vertical-align: super; }
.tagline { font-family: var(--f-body); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--rGold-ink); margin-top: 2px; }
.status-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 10px;
  color: var(--td-ink); border: var(--bw) solid var(--bW); border-radius: var(--r-badge); padding: 5px 12px;
  background: var(--surface); white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: var(--r-dot); background: var(--ac); flex-shrink: 0; }
.status-dot.warm { background: var(--apricot); }

/* ---- Nav (flagship) ---- */
.nav { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.nav a { font-family: var(--f-body); font-size: 12px; font-weight: 500; color: var(--td-ink);
  text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent;
  transition: color var(--mo-base) var(--mo-ease), border-color var(--mo-base) var(--mo-ease); }
.nav a:hover { color: var(--dW); border-bottom-color: var(--rGold); }

/* ---- Section scaffold ---- */
.section { margin-top: var(--sp-7); }
@media (max-width: 640px) { .section { margin-top: var(--sp-6); } }
.kicker { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--rGold-ink); }
.section-title { font-size: var(--fs-title); margin: var(--sp-1) 0 var(--sp-2); line-height: 1.25; text-wrap: balance; }
.section-desc { font-size: var(--fs-body); color: var(--td-ink); line-height: 1.65; max-width: none; margin: 0 0 var(--sp-3); }
.section-desc b { color: var(--dW); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; font-family: var(--f-body); font-size: 13px; font-weight: 600;
  padding: 11px 22px; border-radius: var(--r-control); border: var(--bw) solid var(--dRed); background: var(--dRed);
  color: var(--bg); text-decoration: none; cursor: pointer;
  transition: transform var(--mo-fast) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn-ghost { background: transparent; color: var(--dRed-ink); border-color: var(--bW); }
.btn-ghost:hover { background: var(--pale); }
.btn-blue { border-color: var(--b1); background: var(--b1); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---- Footer ---- */
.footer { margin-top: var(--sp-7); padding-top: var(--sp-3); border-top: var(--bw) solid var(--bW); }
.footer p { font-size: 10px; color: var(--mauve-ink); line-height: 1.8; margin: 0; }
.footer .fine { font-family: var(--f-mono); font-size: 9px; color: var(--mauve-ink); }
.footer a { color: var(--b1-ink); }
.tax-legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.tax-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--td-ink); }
.tax-legend .d { width: 6px; height: 6px; border-radius: var(--r-dot); }
.tax-legend .s { font-family: var(--f-mono); font-size: 9px; color: var(--mauve-ink); }

/* ---- Utilities ---- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tw-scroll { overflow-x: auto; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }