/* Tweakable overrides + tweaks panel.
   Appended as tweaks.css, loaded AFTER site.css so it wins cascading. */

/* Nav investor login --------------------------------------------- */
.tm-nav-right { display: flex; align-items: center; gap: 20px; }
.tm-nav-login {
  color: var(--fg-1, #0A0A0A) !important;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease;
}
.tm-nav-login:hover {
  color: var(--ochre, #C18A4A) !important;
  border-bottom-color: var(--ochre, #C18A4A);
}

/* Hero logo mark ------------------------------------------------- */
.hero-logo-mark {
  height: 16px;
  width: auto;
  display: block;
  opacity: 0.55;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 960px) {
  .hero-logo-mark { height: 14px; }
}

.hero-thesis em {
  color: color-mix(in oklab, var(--ochre-lt) calc(var(--tm-ochre-alpha) * 100%), rgba(245,242,234,0.85)) !important;
}

:root {
  --tm-hero-align: center;
  --tm-hero-text-align: center;
  --tm-hero-items: center;
  --tm-scrim-strength: 0.72;
  --tm-ochre-alpha: 0.55;
  --tm-serif-lead: var(--font-serif);
  --tm-meta-display: flex;
}

/* Hero alignment — overrides anything from site.css */
.hero.hero-topo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: var(--tm-hero-text-align) !important;
}
.hero.hero-topo .hero-content {
  max-width: 960px !important;
  width: 100% !important;
  margin: 0 auto !important;
  align-items: var(--tm-hero-items) !important;
  text-align: var(--tm-hero-text-align) !important;
}
.hero.hero-topo .hero-headline {
  text-align: var(--tm-hero-text-align) !important;
  width: 100%;
}
.hero.hero-topo .hero-thesis {
  font-family: var(--tm-serif-lead) !important;
  text-align: var(--tm-hero-text-align) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 720px;
}
.hero.hero-topo .hero-eyebrow-row {
  width: 100%;
  justify-content: space-between !important;
  align-items: flex-end;
}
.hero.hero-topo .hero-ctas {
  width: 100%;
  justify-content: var(--tm-hero-items, center) !important;
}
.hero.hero-topo .hero-meta-row {
  width: 100%;
  justify-content: space-between !important;
  display: var(--tm-meta-display) !important;
}

/* Legibility scrim — behind text, above canvas */
.hero.hero-topo::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(1100px, 92vw);
  height: min(620px, 70vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(10,10,10, var(--tm-scrim-strength)) 0%,
    rgba(10,10,10, calc(var(--tm-scrim-strength) * 0.7)) 35%,
    rgba(10,10,10, 0) 72%);
  z-index: 1;
  pointer-events: none;
}

/* Ink-only hero variant */
.hero.hero-bg-ink .topo-canvas,
.hero.hero-bg-ink .hero-image { display: none !important; }

/* Tweaks panel ------------------------------------------------------ */
.tweaks-panel {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 320px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #111;
  color: #F5F2EA;
  border: 1px solid rgba(245,242,234,0.18);
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  padding: 0;
  z-index: 9999;
  font-family: var(--font-sans, system-ui);
}
.tweaks-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(245,242,234,0.12);
  position: sticky; top: 0; background: #111; z-index: 1;
}
.tweaks-title {
  font: 600 11px/1 var(--font-sans, system-ui);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ochre-lt, #D5A878);
}
.tweaks-close {
  background: transparent; border: none; color: rgba(245,242,234,0.7);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.tweaks-close:hover { color: #F5F2EA; }
.tweaks-group {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(245,242,234,0.08);
  display: flex; flex-direction: column; gap: 10px;
}
.tweaks-group.tweaks-row { gap: 12px; }
.tweaks-label {
  font: 500 10px/1 var(--font-sans, system-ui);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,242,234,0.65);
  display: flex; justify-content: space-between; align-items: center;
}
.tweaks-val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0;
  color: var(--ochre-lt, #D5A878);
}
.tweaks-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid rgba(245,242,234,0.15);
}
.tweaks-seg-btn {
  background: transparent; border: none; color: rgba(245,242,234,0.7);
  padding: 8px 10px;
  font: 500 11px/1 var(--font-sans, system-ui);
  letter-spacing: 0.1em; text-transform: capitalize;
  cursor: pointer;
  border-right: 1px solid rgba(245,242,234,0.15);
}
.tweaks-seg-btn:last-child { border-right: none; }
.tweaks-seg-btn:hover { color: #F5F2EA; }
.tweaks-seg-btn.is-active {
  background: var(--ochre, #C18A4A);
  color: #0A0A0A;
}
.tweaks-textarea {
  background: #0A0A0A;
  color: #F5F2EA;
  border: 1px solid rgba(245,242,234,0.15);
  padding: 10px 12px;
  font: 400 13px/1.45 var(--font-sans, system-ui);
  resize: vertical;
  border-radius: 0;
}
.tweaks-textarea:focus {
  outline: none;
  border-color: var(--ochre, #C18A4A);
}
.tweaks-panel input[type="range"] {
  width: 100%;
  accent-color: var(--ochre, #C18A4A);
}
.tweaks-checkbox {
  display: flex; align-items: center; gap: 10px;
  font: 400 13px/1 var(--font-sans, system-ui);
  color: rgba(245,242,234,0.85);
  cursor: pointer;
}
.tweaks-checkbox input {
  accent-color: var(--ochre, #C18A4A);
}

/* Use ochre alpha var in the hero pulsing dot + ochre em */
.hero-thesis em {
  color: color-mix(in oklab, var(--ochre-lt) calc(var(--tm-ochre-alpha) * 100%), rgba(245,242,234,0.85)) !important;
}