:root {
  --ink: #201a18 !important;
  --muted: #5e5651 !important;
  --paper: #f5f0e9 !important;
  --panel: #fffaf4 !important;
  --line: rgba(32, 26, 24, .16) !important;
  --accent: #5c4058 !important;
  --rose: #a86475;
  --rose-soft: #e8c9d0;
  --shadow: 0 20px 70px rgba(44, 31, 27, .08);
}

html,
body {
  background: var(--paper);
  color: var(--ink);
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 94%, transparent) !important;
  backdrop-filter: blur(16px);
}

.topbar {
  min-height: 82px !important;
}

.brand {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: .28rem !important;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  font-weight: 400 !important;
  letter-spacing: -.02em;
}

.mark {
  display: none !important;
}

/* Durable static shells may wrap the semantic brand spans in either the
   legacy .brand or the shared .rnr-static-brand container. Keep the color
   contract on the semantic spans themselves so build-order cannot invert it. */
.brand-primary {
  color: var(--ink) !important;
}

.brand-accent {
  color: var(--accent) !important;
}

.brand-kicker {
  margin-left: .28rem;
  color: var(--rose);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}

.back {
  color: var(--accent) !important;
  font-weight: 700;
}

.hero {
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem) !important;
}

.eyebrow,
.kicker {
  color: var(--accent) !important;
}

h1 {
  max-width: min(12ch, 100%) !important;
  font-size: clamp(3.2rem, 8.5vw, 7.4rem) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}

h2 {
  text-wrap: balance;
}

.lede,
.card p,
.taxon p,
.engineering span,
.copy p,
.steps li,
.security li,
.footer-grid {
  color: var(--ink) !important;
}

.position,
.card,
.steps li,
.principles div,
.security {
  border-color: var(--line) !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
  box-shadow: var(--shadow);
}

.rule {
  border-left-color: var(--rose) !important;
  background: #ece4da !important;
}

.steps li::before {
  color: var(--accent) !important;
}

footer {
  padding: clamp(3rem, 6vw, 4.5rem) 0 !important;
  border-top: 1px solid var(--line);
  text-align: center;
}

footer .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
}

.footer-grid {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: .55rem !important;
  font-size: .76rem !important;
  text-align: center;
}

.signature {
  margin: .2rem 0 0 !important;
  color: var(--ink) !important;
  font-style: normal !important;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  text-align: center;
}

.signature a {
  display: grid;
  justify-items: center;
  gap: .18rem;
}

.signature strong {
  color: color-mix(in srgb, var(--muted) 58%, transparent);
  font-size: .62rem;
  font-weight: 400;
}

@media (max-width: 760px) {
  .topbar {
    min-height: 68px !important;
    align-items: center !important;
  }

  .brand {
    max-width: calc(100% - 90px);
    font-size: 1rem;
  }

  .brand-kicker {
    font-size: .56rem;
    letter-spacing: .13em;
  }

  h1 {
    max-width: 100% !important;
    font-size: clamp(2.9rem, 14.5vw, 4.75rem) !important;
    line-height: .96 !important;
  }

  .card,
  .steps li,
  .principles div,
  .security,
  .position {
    border-radius: 18px !important;
  }
}

@media (max-width: 430px) {
  .brand-kicker {
    display: none;
  }

  h1 {
    font-size: clamp(2.75rem, 13.8vw, 4rem) !important;
  }
}