/* ============================================
   BASE.CSS — Reset / Design Tokens / Typography / Layout
   KUNLUN BIO — ORVENNE-1
   FICTIONAL DEMO. NOT A REAL PRODUCT.
   ============================================ */

:root {
  /* --- Ground: obsidian --- */
  --void:        #07100d;   /* page floor */
  --surface:     #0a1613;   /* alternating band */
  --panel:       #0c1c18;   /* card */
  --panel-hi:    #103029;   /* card hover */
  --panel-deep:  #061009;   /* inset groove */

  /* --- Signal: chalcedony jade / deep jade --- */
  --jade:        #3ddc97;
  --jade-soft:   #7ff0c0;
  --jade-deep:   #0f766e;
  --jade-dim:    #1f8f68;

  --glow-04:     rgba(61, 220, 151, 0.04);
  --glow-08:     rgba(61, 220, 151, 0.08);
  --glow-16:     rgba(61, 220, 151, 0.16);
  --glow-32:     rgba(61, 220, 151, 0.32);

  /* --- Type: bone white --- */
  --bone:        #eef5f1;
  --text:        #cfe0d8;
  --muted:       #7d9a90;
  --faint:       #4d6660;

  /* --- Rules --- */
  --line:        rgba(61, 220, 151, 0.14);
  --line-hi:     rgba(61, 220, 151, 0.38);
  --line-cold:   rgba(125, 154, 144, 0.16);

  /* --- Caution amber. Reserved for fiction markers only:
         it sits outside the jade system on purpose, so a
         disclaimer can never be mistaken for decoration. --- */
  --warn:        #ffd166;
  --warn-deep:   #7a5a12;
  --warn-bg:     rgba(255, 209, 102, 0.13);
  --warn-line:   rgba(255, 209, 102, 0.55);

  /* ==========================================
     Photo layer tokens — image → grade → wash → scrim
     ========================================== */
  --scrim-edge:  var(--void);
  --scrim-core:  rgba(7, 16, 13, 0.66);
  --scrim-base:  rgba(7, 16, 13, 0.36);
  --scrim-card:  rgba(7, 16, 13, 0.94);

  --wash-jade:   linear-gradient(158deg,
                   rgba(61, 220, 151, 0.40) 0%,
                   rgba(15, 118, 110, 0.26) 34%,
                   rgba(61, 220, 151, 0.05) 62%,
                   rgba(7, 16, 13, 0.62) 100%);
  --wash-jade-soft: linear-gradient(168deg,
                   rgba(61, 220, 151, 0.24) 0%,
                   rgba(15, 118, 110, 0.12) 52%,
                   rgba(7, 16, 13, 0.48) 100%);
  /* Flattens any source colour temperature into one jade duotone */
  --wash-duotone: linear-gradient(150deg, #6ff0bb 0%, #22a97c 46%, #0a3b36 100%);

  /* Stock sources run bright, but the scrims already carry most of the
     contrast work — the grade only has to cool and settle them. */
  --grade-base:  grayscale(0.62) contrast(1.12) brightness(0.62) saturate(0.78);
  --grade-card:  grayscale(0.44) contrast(1.10) brightness(0.72) saturate(0.86);
  --grade-card-hover: grayscale(0.10) contrast(1.06) brightness(0.94) saturate(1.04);

  /* ==========================================
     Type stacks — three voices, kept distinct:
       display  editorial serif, for section titles and pull quotes
       sans     neo-grotesque, for interface and running text
       mono     instrument readout, for every number on the page
     ========================================== */
  --font-display: 'Iowan Old Style', 'Charter', 'Palatino Linotype', Palatino,
                  'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
                  'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace,
                  Menlo, 'Roboto Mono', Consolas, monospace;

  /* --- Spacing --- */
  --sp-2:  0.25rem;
  --sp-4:  0.5rem;
  --sp-8:  1rem;
  --sp-12: 1.5rem;
  --sp-16: 2rem;
  --sp-24: 3rem;
  --sp-32: 4rem;
  --sp-48: 6rem;
  --sp-64: 8rem;

  /* --- Measure --- */
  --wrap:     1180px;
  --wrap-lg:  1360px;
  --nav-h:    66px;
  /* The top banner was folded into the closing "About this page" block,
     so nothing sits above the nav any more. The token stays at zero
     because the nav, the drawer and the hero all offset from it, and
     app.js still overwrites it if a banner is ever put back. */
  --notice-h: 0px;

  /* --- Easing --- */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast:    0.18s;
  --t-med:     0.38s;
  --t-slow:    0.8s;

  /* --- Radii: capsule vocabulary --- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;
}

/* --- Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  background-color: var(--void);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.62;
  letter-spacing: 0.001em;
  overflow-x: hidden;
  min-height: 100vh;
  /* Fine molecular pitch: one lab texture under the whole page */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(61, 220, 151, 0.05) 0.6px, transparent 0.7px);
  background-size: 34px 34px;
  background-attachment: fixed;
}

img, svg, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--jade); }

ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

table { border-collapse: collapse; width: 100%; }

/* --- Typography ---
   English measure: 62–74 characters, tighter leading than the
   CJK original, and negative tracking on anything set large. */
h1, h2, h3, h4, h5, h6 {
  color: var(--bone);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.02;
}

/* Section titles are set in the display serif — the single
   loudest signal that this is a document, not a dashboard. */
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 3.7vw, 3.05rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.1;
}

h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.012em;
}

h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
}

p {
  color: var(--text);
  line-height: 1.68;
  max-width: 68ch;
}

/* Instrument readout. Every figure on the page goes through this. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: 0.04em;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.serif { font-family: var(--font-display); }

.t-jade  { color: var(--jade); }
.t-muted { color: var(--muted); }
.t-bone  { color: var(--bone); }

/* --- Layout utilities --- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--sp-12);
}

.wrap--lg { max-width: var(--wrap-lg); }
.wrap--tight { max-width: 860px; }

.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; }

/* Wide content scrolls inside itself; the body never scrolls sideways. */
.scroll-x {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Selection / scrollbar / focus --- */
::selection {
  background: var(--jade);
  color: var(--void);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: var(--jade-deep);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--jade-dim); }

:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Notice bar and nav are both fixed; anchors have to clear them. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

@media (max-width: 768px) {
  :root {
    --nav-h: 58px;
    --sp-48: 4rem;
    --sp-64: 5rem;
  }
  body { line-height: 1.6; }
}