/**
 * SLIC × AXIOM DNA blend
 * Sibling consultancy layer — warm Rams palette, neo-grotesque type,
 * forest-green signal accent, hairline grids. Kimi layout untouched.
 */

:root {
  /* Axiom core tokens (rams.css / AXIOM-BRAND-DNA.md §3) */
  --axiom-paper: #faf9f7;
  --axiom-panel: #ffffff;
  --axiom-ink: #191712;
  --axiom-ink-2: #6f6c63;
  --axiom-ink-3: #a9a59a;
  --axiom-line: #e7e5dd;
  --axiom-line-2: #d2cfc5;
  --axiom-accent: #1f6e43;
  --axiom-neg: #a23a26;

  /* Map Kimi semantic names → Axiom (single signal accent) */
  --slic-copper: var(--axiom-accent);
  --slic-navy: var(--axiom-ink);
  --slic-cream: var(--axiom-paper);
  --slic-text: var(--axiom-ink);
  --slic-muted: var(--axiom-ink-2);
  --slic-meta: var(--axiom-ink-3);
}

/* ── Global surface ─────────────────────────────────────────────────────── */

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--axiom-paper) !important;
  color: var(--axiom-ink) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.42;
}

::selection {
  background: var(--axiom-accent) !important;
  color: #fff !important;
}

/* ── Typography — MoMA neo-grotesque (EN); Thai stack preserved in fonts-overrides ─ */

html[lang="en"] .text-display-xl,
html[lang="en"] .text-display-l,
html[lang="en"] .text-display-m,
html[lang="en"] .text-display,
html[lang="en"] .text-heading,
html[lang="en"] .font-serif-sc {
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

html[lang="zh-Hans"] .text-display-xl,
html[lang="zh-Hans"] .text-display-l,
html[lang="zh-Hans"] .text-display-m,
html[lang="zh-Hans"] .text-display,
html[lang="zh-Hans"] .text-heading,
html[lang="zh-Hans"] .font-serif-sc {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.text-body,
.text-body-l {
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0;
}

/* Axiom micro-label pattern (§4.2) */
.text-caption {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--axiom-ink-3) !important;
  line-height: 1.2 !important;
}

.text-nav-link {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}

.text-mono,
.font-mono,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Keyword highlight — signal color, not decorative serif */
.keyword-highlight {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--axiom-accent) !important;
  text-decoration: none !important;
}

/* ── Colour remaps (copper/navy → Axiom ink + green) ─────────────────────── */

.text-text-primary {
  color: var(--axiom-ink) !important;
}

.text-text-muted {
  color: var(--axiom-ink-2) !important;
}

.text-accent-copper,
.hover\:text-accent-copper:hover,
.group:hover .group-hover\:text-accent-copper {
  color: var(--axiom-accent) !important;
}

.border-accent-copper,
.hover\:border-accent-copper:hover,
.focus\:border-accent-copper:focus {
  border-color: var(--axiom-accent) !important;
}

.bg-accent-copper {
  background-color: var(--axiom-accent) !important;
}

.bg-accent-copper\/30 {
  background-color: color-mix(in srgb, var(--axiom-accent) 30%, transparent) !important;
}

.text-deep-navy {
  color: var(--axiom-ink) !important;
}

.bg-deep-navy,
.bg-deep-navy\/40,
.bg-deep-navy\/95 {
  background-color: var(--axiom-ink) !important;
}

.bg-ticker-dark {
  background-color: var(--axiom-ink) !important;
}

.bg-warm-cream,
.bg-text-light {
  background-color: var(--axiom-paper) !important;
}

.text-text-light {
  color: var(--axiom-paper) !important;
}

.border-light {
  border-color: var(--axiom-line) !important;
}

.border-dark {
  border-color: color-mix(in srgb, var(--axiom-paper) 20%, transparent) !important;
}

.bg-white {
  background-color: var(--axiom-panel) !important;
}

/* ── Hairline discipline; no shadows (§11 + Axiom §15) ─────────────────── */

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  box-shadow: none !important;
}

.backdrop-blur-\[12px\] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.rounded-lg,
.rounded-md,
.rounded-sm,
.rounded-xl,
.rounded-\[2px\],
.rounded-\[4px\] {
  border-radius: 0 !important;
}

/* True circles only (live indicator dots) */
.rounded-full {
  border-radius: 50% !important;
}

/* ── Section headers — ink rule (Axiom §6.1) ───────────────────────────── */

section > .page-container > .text-caption:first-child,
.page-container > .text-caption:first-of-type {
  border-bottom: 1px solid var(--axiom-ink);
  padding-bottom: 7px;
  margin-bottom: 14px;
  display: block;
  width: 100%;
}

/* ── Buttons & inputs — square, ink primary (§6.7–6.8) ─────────────────── */

button.bg-accent-copper,
a.bg-accent-copper,
.bg-accent-copper.text-white {
  background-color: var(--axiom-ink) !important;
  color: var(--axiom-paper) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

button.bg-accent-copper:hover,
a.bg-accent-copper:hover {
  opacity: 0.9;
}

input,
textarea,
select {
  border-color: var(--axiom-line-2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--axiom-ink) !important;
  box-shadow: none !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--axiom-ink) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Kill Tailwind focus rings */
.focus\:ring-2:focus,
.focus-visible\:ring-2:focus-visible,
.focus-visible\:ring-4:focus-visible,
.focus-visible\:ring-\[3px\]:focus-visible {
  box-shadow: none !important;
}

/* ── Stat cells & data rows — hairline grid feel ───────────────────────── */

.grid.gap-\[1px\] {
  background-color: var(--axiom-line) !important;
  gap: 1px !important;
}

/* ── Navigation cockpit strip ──────────────────────────────────────────── */

header,
nav,
[class*="fixed"][class*="top-0"] {
  border-bottom: 1px solid var(--axiom-line-2);
}

/* ── Live pulse — Axiom blink (§6.9) ───────────────────────────────────── */

@keyframes axiom-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

.animate-pulse {
  animation: axiom-blink 2.4s ease-in-out infinite !important;
}

/* ── Planar alignment — shared container width (§5.1) ──────────────────── */

.page-container {
  max-width: 1360px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

@media (max-width: 480px) {
  .page-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section-padding {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* ── Axiom consultancy signifier — subtle masthead rule ───────────────── */

#root::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--axiom-accent);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}

/* ── §08 Standards — Axiom credentials pattern (injected before #contact) ─ */

.slic-standards {
  border-top: 1px solid var(--axiom-line-2);
}

.slic-proto-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--axiom-line);
  margin-bottom: 20px;
}

.slic-proto-tag {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--axiom-accent);
}

.slic-proto-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--axiom-ink-3);
}

.slic-ticker {
  overflow: hidden;
  border: 1px solid var(--axiom-line-2);
  background: var(--axiom-ink);
  margin-bottom: 28px;
}

.slic-ticker__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: slic-ticker-scroll 32s linear infinite;
}

.slic-ticker__track span {
  flex-shrink: 0;
  padding: 10px 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 249, 247, 0.72);
  border-right: 1px solid rgba(250, 249, 247, 0.12);
  white-space: nowrap;
}

@keyframes slic-ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.slic-s-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--axiom-ink);
  padding-bottom: 7px;
  margin-bottom: 14px;
}

.slic-s-head__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--axiom-ink-3);
}

.slic-s-head__meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--axiom-ink-3);
}

.slic-cred-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--axiom-ink);
}

.slic-cred-compact {
  margin: 12px 0 0;
  max-width: 64ch;
  color: var(--axiom-ink-2);
  font-variant-numeric: tabular-nums;
}

.slic-cred-details {
  margin-top: 24px;
  border: 1px solid var(--axiom-line-2);
  background: var(--axiom-panel);
}

.slic-cred-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--axiom-ink);
  list-style: none;
  user-select: none;
}

.slic-cred-details__summary::-webkit-details-marker {
  display: none;
}

.slic-cred-details__summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--axiom-accent);
  line-height: 1;
}

.slic-cred-details[open] > .slic-cred-details__summary::after {
  content: "−";
}

.slic-cred-details__summary:focus-visible {
  outline: 1px solid var(--axiom-ink);
  outline-offset: -1px;
}

.slic-cred-details__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--axiom-line);
}

.slic-plate {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--axiom-line-2);
  background: var(--axiom-panel);
}

.slic-plate__tag {
  flex-shrink: 0;
  padding: 12px 14px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--axiom-accent);
  border-right: 1px solid var(--axiom-line-2);
  background: var(--axiom-paper);
  display: flex;
  align-items: center;
  min-width: 88px;
}

.slic-plate__body {
  flex: 1;
  padding: 0;
}

.slic-row {
  display: grid;
  grid-template-columns: minmax(100px, 28%) 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--axiom-line);
  font-size: 13px;
  line-height: 1.45;
}

.slic-row:last-child {
  border-bottom: none;
}

.slic-row__k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--axiom-ink-3);
}

.slic-row__v {
  color: var(--axiom-ink);
  font-weight: 500;
}

.slic-cluster-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--axiom-line-2);
  padding-bottom: 6px;
  margin: 24px 0 12px;
}

.slic-t-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--axiom-ink);
}

.slic-standards-lede {
  max-width: 64ch;
  margin: 0 0 16px;
  color: var(--axiom-ink-2);
}

.slic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--axiom-line);
  border: 1px solid var(--axiom-line);
}

.slic-cell {
  background: var(--axiom-panel);
  padding: 13px 16px;
}

@media (min-width: 600px) {
  .slic-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.slic-stat__lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--axiom-ink-3);
  margin-bottom: 4px;
}

.slic-cred-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slic-cred-list li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--axiom-ink);
}

.slic-cred-list a {
  color: var(--axiom-ink);
  text-decoration: underline;
  text-decoration-color: var(--axiom-line-2);
  text-underline-offset: 3px;
}

.slic-cred-list a:hover {
  color: var(--axiom-accent);
  text-decoration-color: var(--axiom-accent);
}

.slic-cred-plate {
  margin-top: 4px;
}

.slic-cred-stack {
  margin-top: 24px;
}

.slic-cred-disclaimer {
  margin: 18px 0 0;
  max-width: 64ch;
  color: var(--axiom-ink-3);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .slic-cred-title {
    font-size: 28px;
  }

  .slic-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .slic-plate__tag {
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--axiom-line-2);
  }

  .slic-plate {
    flex-direction: column;
  }

  .slic-ticker__track span {
    padding: 10px 14px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slic-ticker__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ── §11.10 Hero & dark-surface contrast ─────────────────────────────────── */
/* Forest green (#1f6e43) and ink-muted grays are for light paper only.
   On the photo hero and fixed nav, use high-luminance text. */

:root {
  --axiom-on-dark-text: rgba(255, 255, 255, 0.92);
  --axiom-on-dark-muted: rgba(255, 255, 255, 0.8);
  --axiom-on-dark-accent: #b8e6c8;
  --axiom-on-dark-accent-line: rgba(184, 230, 200, 0.55);
  --axiom-hero-scrim: rgba(10, 12, 16, 0.82);
}

/* Extra scrim — inline bundle gradient is too light on busy photos */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(10, 12, 16, 0.9) 0%,
    rgba(10, 12, 16, 0.82) 42%,
    rgba(10, 12, 16, 0.68) 100%
  );
}

/* Hero accent keywords — bright sage on dark, not forest green */
#hero .hero-highlight,
#hero .hero-highlight.text-accent-copper,
#hero em.text-accent-copper {
  color: var(--axiom-on-dark-accent) !important;
  font-weight: 600 !important;
}

#hero .hero-highlight-line {
  background-color: var(--axiom-on-dark-accent-line) !important;
}

/* Hero body, eyebrow, muted tokens */
#hero .hero-desc,
#hero .hero-label,
#hero .max-w-\[680px\] .text-text-muted {
  color: var(--axiom-on-dark-muted) !important;
}

#hero .text-display-xl,
#hero .text-text-light {
  color: var(--axiom-on-dark-text) !important;
}

/* Stats panel — darker cells, brighter micro labels */
#hero .grid.grid-cols-3 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

#hero .grid.grid-cols-3 > div {
  background-color: var(--axiom-hero-scrim) !important;
}

#hero .grid.grid-cols-3 .text-caption {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}

#hero .hero-stat-value {
  color: #fff !important;
}

/* Hero CTAs — primary was ink-on-ink after Axiom remap */
#hero .hero-cta.bg-accent-copper,
#hero .bg-accent-copper.text-deep-navy {
  background-color: var(--axiom-paper) !important;
  color: var(--axiom-ink) !important;
  font-weight: 700 !important;
}

#hero .hero-cta.border {
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: var(--axiom-on-dark-text) !important;
}

#hero .hero-cta.border:hover {
  border-color: var(--axiom-on-dark-accent) !important;
  color: var(--axiom-on-dark-accent) !important;
}

/* Fixed nav over hero — translucent bar + light links */
nav.fixed.bg-transparent {
  background-color: rgba(10, 12, 16, 0.78) !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

nav.fixed .text-nav-link:not(.text-accent-copper),
nav.fixed button.text-text-muted,
nav.fixed button.text-\[12px\]:not(.text-accent-copper) {
  color: var(--axiom-on-dark-muted) !important;
  font-weight: 600 !important;
}

nav.fixed .text-nav-link:hover,
nav.fixed button.text-text-muted:hover,
nav.fixed .hover\:text-text-light:hover {
  color: var(--axiom-on-dark-text) !important;
}

nav.fixed .text-accent-copper,
nav.fixed .border-accent-copper {
  color: var(--axiom-on-dark-accent) !important;
  border-color: var(--axiom-on-dark-accent) !important;
}

nav.fixed .text-text-light {
  color: var(--axiom-on-dark-text) !important;
}

nav.fixed .border-dark {
  border-color: rgba(255, 255, 255, 0.18) !important;
}