/* Rhumb site — chart-paper editorial theme.
   The demo (demo.html) intentionally keeps its dark ops styling; the site reads
   like the chart room, the product like the night ops room. */

/* ---------- design tokens ---------- */
:root {
  --paper-50:#FAF8F3; --paper-100:#F5F4F0; --paper-200:#ECEAE3; --paper-300:#DBD8CE;
  --paper-400:#B8B3A4;
  --ink-900:#1A1C1F; --ink-700:#3B3F46; --ink-500:#6A6F78;
  --yellow:#F4C430; --yellow-deep:#E5A50A; --ochre:#8A6410; --pass:#1F8A5B;

  /* spacing scale */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2.25rem; --s7:3.5rem; --s8:5rem;

  /* type scale (fluid) */
  --t-display:clamp(2.4rem, 5vw + 1rem, 3.8rem);
  --t-lead:clamp(1.1rem, .6vw + .95rem, 1.28rem);
  --t-h3:1.25rem;
  --t-label:.8rem;

  /* chart grid lines */
  --grid-major:rgba(26,28,31,.055);
  --grid-minor:rgba(26,28,31,.03);

  --serif:"IBM Plex Serif",Georgia,serif;
  --sans:"IBM Plex Sans",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --rule:1px solid var(--paper-300);
  --rule-ink:1.5px solid var(--ink-900);
  --rule-heavy:2.5px solid var(--ink-900);
}

* { box-sizing:border-box; }

html,body { margin:0; overflow-x:clip; /* decorative watermark/ticks may bleed past the edge */ }
body {
  background-color:var(--paper-100);
  /* faint chart graticule — minor 24px, major 120px */
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color:var(--ink-700);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.mono { font-family:var(--mono); }

a { color:var(--ink-900); text-decoration:underline; text-decoration-color:var(--yellow);
  text-decoration-thickness:2.5px; text-underline-offset:3px; font-weight:500; }
a:hover { text-decoration-color:var(--ink-900); }

::selection { background:var(--yellow); color:var(--ink-900); }

a:focus-visible, .btn:focus-visible {
  outline:3px solid var(--ochre); outline-offset:3px; border-radius:2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; }
}

/* ---------- top navigation ---------- */
.topbar {
  position:sticky; top:0; min-height:60px; display:flex; align-items:center; gap:var(--s4);
  padding:var(--s2) max(24px, calc(50vw - 520px));
  background:rgba(245,244,240,.94);
  border-bottom:var(--rule-heavy);
  font-family:var(--mono); font-size:13px; z-index:10; backdrop-filter:blur(8px);
}
.topbar .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px;
  color:var(--ink-900); letter-spacing:.2px; text-decoration:none; }
.topbar .brand img { width:28px; height:28px; display:block; }
.topbar .brand b { color:var(--ochre); font-weight:700; }
.topbar nav { display:flex; gap:22px; margin-left:auto; align-items:center; }
.topbar nav a { color:var(--ink-500); text-decoration:none; padding:4px 0; font-weight:500; }
.topbar nav a:hover, .topbar nav a.here { color:var(--ink-900); }
.topbar nav a.here { border-bottom:3px solid var(--yellow); padding-bottom:2px; }
.topbar nav a.cta { color:var(--ink-900); background:var(--yellow); padding:7px 15px;
  border:var(--rule-ink); border-radius:4px; font-weight:600; white-space:nowrap;
  box-shadow:3px 3px 0 var(--ink-900);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
.topbar nav a.cta:hover { background:var(--yellow-deep); transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--ink-900); }
.topbar nav a.cta:active { transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink-900); }

/* ---------- page scaffold ---------- */
.page { max-width:1040px; margin:0 auto; padding:0 24px var(--s8); counter-reset:sect; }

/* ---------- hero ---------- */
.hero {
  position:relative;
  padding:clamp(64px, 10vw, 110px) 0 clamp(44px, 6vw, 60px);
  border-bottom:var(--rule-heavy);
}
/* coordinate ticks marching along the hero rule */
.hero::before {
  content:""; position:absolute; left:0; right:0; bottom:0; height:11px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--ink-900) 0 2px, transparent 2px 120px) bottom / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, var(--paper-400) 0 1px, transparent 1px 24px) bottom / 100% 6px no-repeat;
}
/* faint compass watermark */
.hero::after {
  content:""; position:absolute; right:-56px; top:24px; width:380px; height:380px;
  background:url("assets/logo.svg") no-repeat center / contain;
  opacity:.09; pointer-events:none;
}
.hero .kicker {
  display:inline-block; font-family:var(--mono); font-size:var(--t-label); font-weight:600;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--ink-900); background:var(--yellow); border:var(--rule-ink); border-radius:3px;
  padding:5px 12px 4px; margin:0 0 var(--s5);
  box-shadow:3px 3px 0 var(--ink-900);
}
.hero h1 { font-family:var(--serif); font-size:var(--t-display); line-height:1.08;
  letter-spacing:-.015em; font-weight:600; color:var(--ink-900);
  margin:0 0 var(--s5); max-width:15em; text-wrap:balance; }
.hero p.lead { font-size:var(--t-lead); line-height:1.6; color:var(--ink-700);
  max-width:33em; margin:0 0 var(--s6); }
/* decorative chart reference — pure ornament, hidden from AT */
.chartref {
  position:absolute; right:0; bottom:var(--s5);
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--ink-700); pointer-events:none;
}
.chartref::before { content:""; display:inline-block; width:26px; height:2px;
  background:var(--ink-900); vertical-align:middle; margin-right:10px; }

.btnrow { display:flex; gap:var(--s4); flex-wrap:wrap; }
.btn { display:inline-block; padding:13px 26px; border-radius:5px; font-weight:600;
  font-size:16.5px; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease,
  border-color .12s ease; }
.btn.primary { background:var(--ink-900); color:var(--paper-50);
  border:var(--rule-ink); box-shadow:5px 5px 0 var(--yellow); }
.btn.primary:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--yellow); }
.btn.primary:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--yellow); }
.btn.ghost { border:var(--rule-ink); color:var(--ink-900); background:var(--paper-50);
  box-shadow:5px 5px 0 var(--paper-300); }
.btn.ghost:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--paper-300); }
.btn.ghost:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--paper-300); }

/* ---------- sections & prose ---------- */
h2.sect {
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:2px; font-weight:600;
  text-transform:uppercase; color:var(--ochre);
  margin:var(--s8) 0 var(--s2); padding-top:var(--s5); border-top:var(--rule-heavy);
}
h2.sect::before { counter-increment:sect; content:counter(sect, decimal-leading-zero) " · ";
  color:var(--ink-900); }
h2.sect + p, h2.sect + .grid3, h2.sect + .pipe { margin-top:var(--s4); }
h3 { font-family:var(--serif); color:var(--ink-900); font-size:var(--t-h3);
  font-weight:600; margin:var(--s6) 0 var(--s2); }
p { margin:var(--s3) 0; max-width:62ch; }
.note { color:var(--ink-500); font-size:14px; }

/* ---------- tiles ---------- */
.grid3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:var(--s5); margin-top:var(--s5); }
.tile {
  background:var(--paper-50); border:var(--rule-ink); border-radius:8px;
  padding:var(--s5) var(--s5) var(--s6);
  box-shadow:6px 6px 0 var(--paper-300);
  transition:transform .14s ease, box-shadow .14s ease;
}
.tile:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--yellow); }
.tile h3 { margin:var(--s3) 0 var(--s2); font-size:1.2rem; }
.tile .tag { display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--ochre); }
.tile .tag::before { content:""; width:20px; height:4px; background:var(--yellow);
  border:1px solid var(--ink-900); flex:none; }
.tile p { color:var(--ink-700); font-size:15px; margin:var(--s2) 0 0; }

/* ---------- pipeline strip (platform page) ---------- */
.pipe { display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; margin:var(--s5) 0;
  counter-reset:step; }
.pipe .step { flex:1 1 150px; background:var(--paper-50); border:var(--rule-ink);
  border-radius:8px; padding:var(--s4) 18px var(--s5);
  box-shadow:4px 4px 0 var(--paper-300);
  transition:transform .14s ease, box-shadow .14s ease; }
.pipe .step:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--paper-400); }
.pipe .step b { display:block; font-family:var(--serif); color:var(--ink-900);
  font-size:16.5px; margin-bottom:6px; }
.pipe .step b::before { counter-increment:step;
  content:counter(step, decimal-leading-zero) " — ";
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ochre);
  letter-spacing:.5px; }
.pipe .step span { font-size:13.5px; line-height:1.55; color:var(--ink-700); }
.pipe .step.accent { background:var(--yellow); box-shadow:4px 4px 0 var(--ink-900); }
.pipe .step.accent span { color:var(--ink-900); }
.pipe .step.accent b::before { color:var(--ink-900); }
.pipe .arrow { align-self:center; color:var(--ink-900); font-family:var(--mono);
  font-size:18px; font-weight:600; }

/* ---------- callouts & formula ---------- */
.facts { border-left:8px solid var(--yellow); padding:var(--s4) var(--s5);
  margin:var(--s5) 0; background:var(--paper-50); border-radius:0 8px 8px 0;
  border-top:var(--rule-ink); border-right:var(--rule-ink); border-bottom:var(--rule-ink);
  box-shadow:5px 5px 0 var(--paper-300); }
.facts p { font-size:15.5px; }
.facts b { color:var(--ink-900); }

.formula { font-family:var(--mono); font-size:13.5px; background:var(--paper-200);
  border:var(--rule-ink); border-radius:6px; padding:var(--s3) var(--s4); margin:var(--s3) 0;
  box-shadow:4px 4px 0 var(--paper-300);
  color:var(--ink-900); overflow-x:auto; white-space:nowrap; }

/* ---------- footer ---------- */
footer {
  position:relative; border-top:var(--rule-heavy); margin-top:var(--s8); padding:var(--s6) 0 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s3);
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink-700);
}
/* coordinate ticks above the footer rule */
footer::before {
  content:""; position:absolute; left:0; right:0; top:-11px; height:11px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--ink-900) 0 2px, transparent 2px 120px) top / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, var(--paper-400) 0 1px, transparent 1px 24px) top / 100% 6px no-repeat;
}
footer a { color:var(--ink-900); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .topbar { padding:var(--s2) 16px; }
  .topbar nav { gap:14px; }
  .page { padding:0 18px var(--s7); }
  .hero::after { width:240px; height:240px; right:-70px; top:10px; opacity:.06; }
  .chartref { position:static; margin-top:var(--s5); }
  .pipe { flex-direction:column; }
  .pipe .arrow { align-self:flex-start; margin-left:18px; transform:rotate(90deg); }
  h2.sect { margin-top:var(--s7); }
}

@media (max-width: 520px) {
  .topbar { font-size:12px; }
  .topbar nav { gap:12px; }
  .topbar nav a.cta { padding:6px 11px; box-shadow:2px 2px 0 var(--ink-900); }
  .btnrow { flex-direction:column; align-items:stretch; }
  .btnrow .btn { text-align:center; }
  .facts { padding:var(--s3) var(--s4); }
}

@media (max-width: 400px) {
  .topbar .brand span { display:none; } /* keep the compass link home, save room for nav */
}