/* ============================================================
   MERIDIAN — Design tokens + semantic styles
   A calm, instrument-grade design system for personal websites.
   Philosophy: light theme · one rationed accent · golden-ratio
   proportions · hairline rules · square corners · blur-not-shadow.

   Fonts are self-hosted (offline-capable) — imported below from
   fonts/fonts.css. No CDN link needed; just link this file and
   add class="mer-root" to your container.
   ============================================================ */

@import url('fonts/fonts.css');

:root {
  /* ---------- COLOR ---------- */
  /* Surfaces — light theme, flat (no gradients) */
  --mer-bg:        #ffffff;   /* primary surface */
  --mer-bg-2:      #f6f7f9;   /* barely-cool second surface */

  /* Ink — near-black, then two steps of grey */
  --mer-fg:        #0c0d10;   /* primary text */
  --mer-dim:       #65686f;   /* secondary / meta text */
  --mer-dim-2:     #aeb1b8;   /* tertiary / disabled / dashed borders */

  /* Accent — the ONE color. Ration it. (warm orange) */
  --mer-accent:        #f15a22;              /* signal orange */
  --mer-accent-soft:   rgba(241,90,34,0.20); /* selection / wash */
  --mer-accent-faint:  rgba(241,90,34,0.08); /* node halo */
  --mer-accent-border: rgba(241,90,34,0.32); /* warmed hairline */

  /* Steel — graphics only (network / horizon / guides) */
  --mer-steel:     #e7ebf2;

  /* Status (rare, semantic) */
  --mer-ok:        #1f8a4c;   /* shipped / positive */
  --mer-wait:      #65686f;   /* in review / neutral */

  /* Lines */
  --mer-rule:      rgba(12,13,16,0.10);  /* dividers, card borders */
  --mer-rule-soft: rgba(12,13,16,0.07);  /* bar bottom edge */
  --mer-on-accent: #ffffff;              /* text on the accent */

  /* Translucent fills for blur surfaces */
  --mer-glass-bar:  rgba(255,255,255,0.86);
  --mer-glass-card: rgba(255,255,255,0.82);

  /* ---------- TYPE ---------- */
  --mer-font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --mer-font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights run light */
  --mer-w-hair:    200;  /* @kind font */ /* hero only */
  --mer-w-light:   300;  /* @kind font */ /* most display + body */
  --mer-w-reg:     400;  /* @kind font */ /* emphasis */
  --mer-w-med:     500;  /* @kind font */ /* CTA, strong labels */
  --mer-w-semi:    600; /* @kind font */

  /* Display scale (px) — tight tracking, sub-1.0 leading */
  --mer-size-hero:    92px;  /* hero h1 */
  --mer-size-h1:      60px;  /* section h1 */
  --mer-size-h2:      46px;  /* sub-section heading */
  --mer-size-h3:      30px;  /* stat figure / small display */
  --mer-size-title:   22px;  /* card title */
  --mer-size-subject: 20px;  /* list-item subject */
  --mer-size-body:    17px;  /* body large */
  --mer-size-body-sm: 14px;  /* body small / UI */
  --mer-size-meta:    13px;  /* mono meta / small label */
  --mer-size-eyebrow: 11px;  /* mono eyebrow */
  --mer-size-micro:   9px;   /* mono micro-caption */

  --mer-track-tight:  -0.035em;  /* @kind font */ /* hero */
  --mer-track-display:-0.03em;   /* @kind font */ /* section heads */
  --mer-track-snug:   -0.015em;  /* @kind font */ /* titles */
  --mer-track-wide:   0.02em;    /* @kind font */ /* small sans labels */
  --mer-track-mono:   0.2em;     /* @kind font */ /* mono eyebrows */
  --mer-track-mono-x: 0.3em;     /* @kind font */ /* widest mono */

  --mer-leading-display: 1.0;    /* @kind font */ /* and 0.98 for hero */
  --mer-leading-body:    1.618;  /* @kind font */ /* φ — the signature */

  /* ---------- PROPORTION (golden ratio) ---------- */
  --mer-phi:        1.618; /* @kind other */
  --mer-phi-inv:    0.618; /* @kind other */
  --mer-phi-minor:  0.382;  /* @kind other */ /* 38.2% — text column / hero top offset */

  /* ---------- SPACING (Fibonacci) ---------- */
  --mer-space-1:   4px;
  --mer-space-2:   8px;
  --mer-space-3:   13px;
  --mer-space-4:   21px;
  --mer-space-5:   34px;
  --mer-space-6:   55px;
  --mer-space-7:   89px;

  --mer-container: 1440px;  /* content cap — beyond this, content centers with side gutters */
  --mer-bar-h:     64px;
  --mer-pad-x:     44px;   /* bar / page inline padding */
  /* side gutter that centers the stage column on ultrawide (0 until the viewport exceeds the cap) */
  --mer-gutter:    max(0px, calc((100vw - var(--mer-container)) / 2));
  --mer-edge:      calc(var(--mer-gutter) + var(--mer-pad-x));  /* inline padding aligned to the column */

  /* ---------- RADIUS (square system) ---------- */
  --mer-radius:      0px;   /* default — hard corners */
  --mer-radius-dot:  50%;   /* status dots / nodes only */

  /* ---------- ELEVATION (blur, not shadow) ---------- */
  --mer-blur-bar:   blur(16px) saturate(150%); /* @kind other */
  --mer-blur-card:  blur(7px); /* @kind other */
  --mer-glow-dot:   0 0 6px var(--mer-accent); /* @kind shadow */

  /* ---------- MOTION ---------- */
  --mer-ease-slide: cubic-bezier(0.6, 0, 0.2, 1.0);  /* @kind other */ /* section slides */
  --mer-ease-wipe:  cubic-bezier(0.2, 0.7, 0.2, 1.0); /* @kind other */ /* rule wipe */
  --mer-dur-slide:  800ms; /* @kind other */
  --mer-dur-state:  360ms; /* @kind other */
  --mer-dur-quick:  180ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.mer-root {
  background: var(--mer-bg);
  color: var(--mer-fg);
  font-family: var(--mer-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mer-root ::selection { background: var(--mer-accent-soft); color: var(--mer-fg); }

/* ---- Display ---- */
.mer-hero {
  font-family: var(--mer-font-sans);
  font-size: var(--mer-size-hero);
  font-weight: var(--mer-w-hair);
  letter-spacing: var(--mer-track-tight);
  line-height: 0.98;
  color: var(--mer-fg);
}
/* the rationed accent: italic phrase inside the hero */
.mer-hero em {
  color: var(--mer-accent);
  font-weight: var(--mer-w-light);
  font-style: italic;
}

.mer-h1 {
  font-size: var(--mer-size-h1);
  font-weight: var(--mer-w-light);
  letter-spacing: var(--mer-track-display);
  line-height: var(--mer-leading-display);
  color: var(--mer-fg);
}
.mer-h2 {
  font-size: var(--mer-size-h2);
  font-weight: var(--mer-w-light);
  letter-spacing: var(--mer-track-display);
  line-height: var(--mer-leading-display);
  color: var(--mer-fg);
}
.mer-h3 {
  font-size: var(--mer-size-h3);
  font-weight: var(--mer-w-light);
  letter-spacing: var(--mer-track-snug);
  line-height: 1.05;
  color: var(--mer-fg);
}
.mer-title {
  font-size: var(--mer-size-title);
  font-weight: var(--mer-w-med);
  letter-spacing: var(--mer-track-snug);
  color: var(--mer-fg);
}

/* ---- Body ---- */
.mer-body {
  font-size: var(--mer-size-body);
  font-weight: var(--mer-w-light);
  line-height: var(--mer-leading-body);
  color: var(--mer-fg);
  opacity: 0.82;          /* body is fg at reduced opacity, not a grey */
  text-wrap: pretty;
}
.mer-body-sm {
  font-size: var(--mer-size-body-sm);
  font-weight: var(--mer-w-light);
  line-height: var(--mer-leading-body);
  color: var(--mer-fg);
  opacity: 0.72;
  text-wrap: pretty;
}

/* ---- Mono labels / eyebrows ---- */
.mer-mono {
  font-family: var(--mer-font-mono);
  font-size: var(--mer-size-meta);
  font-weight: var(--mer-w-light);
  letter-spacing: var(--mer-track-wide);
  color: var(--mer-dim);
  font-feature-settings: 'tnum';
}
.mer-eyebrow {
  font-family: var(--mer-font-mono);
  font-size: var(--mer-size-eyebrow);
  font-weight: var(--mer-w-reg);
  letter-spacing: var(--mer-track-mono);
  text-transform: uppercase;
  color: var(--mer-accent);
}
.mer-num {
  font-feature-settings: 'tnum';
  letter-spacing: var(--mer-track-display);
}

/* ---- Surfaces ---- */
.mer-bar {
  height: var(--mer-bar-h);
  background: var(--mer-glass-bar);
  -webkit-backdrop-filter: var(--mer-blur-bar);
  backdrop-filter: var(--mer-blur-bar);
  border-bottom: 1px solid var(--mer-rule-soft);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--mer-pad-x);
  font-size: var(--mer-size-body-sm);
}
.mer-card {
  background: var(--mer-glass-card);
  -webkit-backdrop-filter: var(--mer-blur-card);
  backdrop-filter: var(--mer-blur-card);
  border: 1px solid var(--mer-rule);
  border-radius: var(--mer-radius);
}

/* ---- Rules ---- */
.mer-rule        { border: none; border-top: 1px solid var(--mer-rule); }
.mer-rule-dashed { border: none; border-top: 1px dashed var(--mer-dim-2); }

/* ---- Links ---- */
.mer-link {
  color: var(--mer-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--mer-rule);
  transition: border-color var(--mer-dur-state) ease, color var(--mer-dur-state) ease;
}
.mer-link:hover { color: var(--mer-accent); border-color: var(--mer-accent-border); }

/* ---- CTA (the one button) ---- */
.mer-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--mer-accent);
  color: var(--mer-on-accent);
  padding: 12px 22px;
  font-family: var(--mer-font-sans);
  font-size: var(--mer-size-body-sm);
  font-weight: var(--mer-w-med);
  letter-spacing: -0.005em;
  border: none; border-radius: var(--mer-radius);
  cursor: pointer;
  transition: filter var(--mer-dur-quick) ease;
}
.mer-cta:hover { filter: brightness(0.92); }

/* ghost / secondary action — hairline box that warms on hover */
.mer-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--mer-fg);
  padding: 11px 20px;
  font-size: var(--mer-size-body-sm); font-weight: var(--mer-w-reg);
  border: 1px solid var(--mer-rule); border-radius: var(--mer-radius);
  cursor: pointer;
  transition: border-color var(--mer-dur-state) ease, color var(--mer-dur-state) ease;
}
.mer-btn-ghost:hover { border-color: var(--mer-accent-border); color: var(--mer-accent); }

/* status pill — mono micro-label + glowing dot */
.mer-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--mer-accent-border);
  border-radius: var(--mer-radius);
  font-family: var(--mer-font-mono);
  font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mer-accent);
}
.mer-status::before {
  content: ""; width: 4px; height: 4px; border-radius: var(--mer-radius-dot);
  background: var(--mer-accent); box-shadow: var(--mer-glow-dot);
}