/* ============================================================
   Osmo — magazine aesthetic shared stylesheet
   ============================================================ */

:root {
  --cream: #E9E3D7;        /* warm off-white, upper band */
  --cream-2: #EEE8DB;      /* lighter cream */
  --cream-edge: #D6CFC0;   /* slightly darker cream for hairlines */
  --ink: #171513;          /* not quite black on cream */
  --ink-2: #3C362E;        /* secondary ink */
  --rule: rgba(23,21,19,0.14);

  --obsidian: #0B0B0E;     /* lower band — deep black with a whisper of blue */
  --obsidian-2: #141418;
  --paper: #F5F1E6;        /* cream as text on obsidian */
  --paper-dim: rgba(245,241,230,0.72);
  --paper-rule: rgba(245,241,230,0.12);

  --accent: #C8513A;       /* ember red — single accent, rare */
  --accent-ink: #2D1610;

  --serif: "Instrument Serif", "Fraunces", "Source Serif Pro", Georgia, serif;
  --sans:  "Inter", "Söhne", "GT America", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body { background: var(--cream); color: var(--ink); font-family: var(--sans); }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
}

/* Page-fade on load */
body.page-fade { opacity: 0; transition: opacity .4s ease; }
body.page-fade.in, body.page-fade { opacity: 1; }

/* Magazine type */
.serif-display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.serif-display em,
.serif-italic  { font-family: var(--serif); font-style: italic; letter-spacing: -0.005em; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin: 0 .55em .12em 0; vertical-align: middle; }
[data-theme="dark"] .eyebrow, .on-dark .eyebrow { color: var(--paper-dim); }

/* Nav — transparent, colour flips with scroll */
.site-nav { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.site-nav[data-theme="light"] { color: var(--ink); background: rgba(233,227,215,0.78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
.site-nav[data-theme="dark"]  { color: var(--paper); background: rgba(11,11,14,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--paper-rule); }
.site-nav .nav-link { color: inherit; opacity: .78; }
.site-nav .nav-link:hover { opacity: 1; }
.site-nav .nav-link.is-active { opacity: 1; }
.site-nav .nav-link.is-active::after {
  content: ''; display: block; height: 1px; margin-top: 3px; background: currentColor; opacity: .5;
}

/* CTA button */
.btn-cta { background: var(--ink); color: var(--cream); }
.site-nav[data-theme="light"] .btn-cta { background: var(--ink); color: var(--cream); }
.site-nav[data-theme="light"] .btn-cta:hover { background: #000; }
.site-nav[data-theme="dark"] .btn-cta { background: var(--cream); color: var(--ink); }
.site-nav[data-theme="dark"] .btn-cta:hover { background: #fff; }

/* Sections */
.band-light { background: var(--cream); color: var(--ink); }
.band-dark  { background: var(--obsidian); color: var(--paper); }
.band-cream2 { background: var(--cream-2); color: var(--ink); }

/* Hairlines */
.hair-t { border-top: 1px solid var(--rule); }
.hair-b { border-bottom: 1px solid var(--rule); }
.hair-t-dark { border-top: 1px solid var(--paper-rule); }

/* Drop-cap for first paragraph */
.drop-cap::first-letter {
  font-family: var(--serif);
  font-style: italic;
  float: left;
  font-size: 4em;
  line-height: .85;
  padding: .06em .08em 0 0;
  color: var(--ink);
}
.on-dark .drop-cap::first-letter { color: var(--paper); }

/* Column rules (magazine grid) */
.col-rule > * + * { border-left: 1px solid var(--rule); padding-left: 1.25rem; }
.on-dark .col-rule > * + * { border-left: 1px solid var(--paper-rule); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Split-words entry — blur-in per word */
.bw {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px);
  transition: opacity .45s ease, filter .45s ease, transform .45s ease;
  will-change: opacity, filter, transform;
}
.bw.in { opacity: 1; filter: blur(0); transform: translateY(0); }

/* Ticker numbers */
.num-ticker { font-variant-numeric: tabular-nums; }

/* Particle band */
.particle-band {
  position: relative;
  /* The canvas itself */
}
.particle-band > canvas[data-osmo-particles] {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  display: block;
}

/* Rule with label */
.rule-label {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2);
}
.rule-label::before, .rule-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.on-dark .rule-label { color: var(--paper-dim); }
.on-dark .rule-label::before, .on-dark .rule-label::after { background: var(--paper-rule); }

/* Generic link underline */
.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size .25s ease;
}
.link-underline:hover { background-size: 0% 1px; }

/* Chat card (dark) — for hero and feature sections */
.chat-card {
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  color: var(--paper);
}
.chat-card .chrome {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Utility */
.hairline { height: 1px; background: var(--rule); width: 100%; }
.on-dark .hairline { background: var(--paper-rule); }

/* Print */
@media print {
  body { background: #fff; }
  .site-nav, footer { display: none; }
}