/* ============================================================
   oceanheart.ai "Decrypt" design system
   Near-black warm ground, bone foreground, oxblood accent.
   Monospace is the structural voice; the serif is reserved for
   the human one: the hero, the lead, the engage line, long-form
   prose.
   Replaces the light "case file" palette. Class vocabulary kept
   stable so every existing template restyles without edits.
   ============================================================ */

:root {
  /* Ground + surfaces (names kept; values inverted) */
  --paper:    #1c1a17;   /* page ground */
  --paper-2:  #211f1b;   /* card fill, lifted */
  --panel:    #191714;   /* inner panel / input well, recessed */
  --header:   #232019;   /* nav bar */

  --ink:      #e8e2d6;   /* bone, primary */
  --ink-2:    #b9b1a2;   /* dimmer bone, secondary text */
  --faint:    #8f887c;   /* warm gray, meta */

  --rule:     #34302a;   /* hairline */
  --rule-2:   #2a2721;   /* softer hairline */

  --accent:      #a13d2d;              /* oxblood: marks, borders, fills */
  --accent-lift: #d2604a;              /* oxblood, legible as text on dark */
  --accent-soft: rgba(161,61,45,0.42); /* accent border on dark */

  /* Code block (deeper than the page) */
  --code-bg:  #141210;
  --code-fg:  #e8e2d6;

  /* Compatibility aliases. Older templates and sloptics.css still
     reference the retired terminal.css vocabulary; these keep those
     rules valid instead of silently dropping declarations. */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text:           var(--ink-2);
  --muted:          var(--faint);
  --border:         var(--rule);
  --cyan:   #7dcfff;
  --red:    #f7768e;
  --yellow: #e0af68;
  --orange: #ff9e64;
  --green:  #9ece6a;
  --purple: #bb9af7;

  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --max-width: 720px;
  --nav-height: 52px;

  --fs-hero: 2.05rem;
  --fs-h1:   1.7rem;
  --fs-h2:   1.15rem;
  --fs-h3:   1rem;
  --fs-body: 1.0625rem;  /* serif prose measure */
  --fs-sm:   0.8125rem;
  --fs-xs:   0.7rem;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  background: var(--paper);
  /* Browser-drawn UI (scrollbars, form controls, the pre overflow bar)
     follows the page instead of staying light. */
  color-scheme: dark;
}

body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

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

/* ---- Glyph rain (homepage only) -------------------------------- */
/* Fixed, behind the content, transparent. The canvas paints above the
   page ground and below nav / main / footer, which are lifted below. */
#rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#rain.lit { opacity: 0.5; }

/* ---- Typography ------------------------------------------------ */
/* h1 is the human voice on an article page; h2/h3 are the machine's
   section markers. */
h1 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 2rem 0 0.6rem;
}
h2, h3 {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin: 2rem 0 0.6rem;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin: 2rem 0 0.6rem;
}

p { margin-bottom: 1.2rem; color: var(--ink-2); }

a { color: var(--accent-lift); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a, p, li, span { overflow-wrap: anywhere; }

strong { color: var(--ink); font-weight: 500; }
em { color: var(--ink); font-style: italic; }

/* "$ " prompt label: mono, the machine speaking */
.prompt {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--faint);
  margin-bottom: 0.5rem;
}
.prompt::before { content: "$ "; color: var(--accent-lift); }

/* ---- Code (the machine zone) ---------------------------------- */
/* Inline code sits on the code-block surface, not the nav surface: the
   deeper ground is what keeps oxblood on it above 4.5:1. */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent-lift);
  background: var(--code-bg);
  padding: 0.05em 0.35em;
  border-radius: 2px;
}
pre {
  font-family: var(--font-mono);
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  line-height: 1.55;
}
pre code { color: inherit; background: none; padding: 0; font-size: inherit; }

/* ---- Prose (the human voice: about / cv / posts / projects) ---- */
.content, .cv-content, .sloptics-page {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.content > :first-child, .cv-content > :first-child { margin-top: 0; }
.content p, .cv-content p, .sloptics-page p { margin-bottom: 1.2rem; }
.content h2, .cv-content h2 { margin-top: 2.75rem; }
.content h3, .cv-content h3 { margin-top: 1.9rem; }
.content ul, .content ol, .cv-content ul, .cv-content ol { margin: 0 0 1.2rem 1.4rem; }
.content li, .cv-content li { margin-bottom: 0.3rem; }

.content table {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  border-collapse: collapse;
  width: 100%;
  margin: 1.25rem 0 1.75rem;
}
.content th, .content td {
  text-align: left;
  padding: 0.45rem 0.8rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
}
.content th { color: var(--ink); font-weight: 500; border-bottom-color: var(--faint); }

blockquote {
  font-family: var(--font-serif);
  border-left: 2px solid var(--accent-soft);
  padding: 0.1rem 1.1rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--ink-2);
}
blockquote p:last-child { margin-bottom: 0; }

hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ---- Layout --------------------------------------------------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; width: 100%; min-width: 0; }
main {
  flex: 1;
  padding-top: calc(var(--nav-height) + 2.5rem);
  padding-bottom: 4rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* ---- File header / nav ---------------------------------------- */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--header);
  border-bottom: 1px solid var(--rule-2);
  z-index: 100;
  display: flex; align-items: center;
}
nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav-brand {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0;
  color: var(--ink);
}
.nav-brand:hover { color: var(--accent-lift); text-decoration: none; }
.nav-links { display: flex; gap: 1.25rem; list-style: none; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--faint);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); text-decoration: none; }
.nav-links a.cta { color: var(--accent-lift); }

/* ---- Hero ----------------------------------------------------- */
/* Two columns: the copy speaks on the left, the mark holds the right. */
.hero {
  padding: 1.5rem 0 0.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem 3.5rem;
  align-items: center;
}
.hero-copy { max-width: 40ch; }
.hero-mark {
  display: block;
  width: clamp(8rem, 20vw, 12rem);
  height: auto;
  color: var(--accent-lift);
  margin: 0 1rem 0 0;
  justify-self: end;
}
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .hero-mark { width: 6rem; justify-self: start; margin: 0; }
}
.hero-statement {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.lead {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 1.5rem 0 0;
  max-width: 48ch;
}
.lead em { color: var(--ink); font-style: italic; }

/* ---- The work, written as entries ------------------------------ */
/* Not cards. Nothing here draws a frame, a fill, a rule or a badge:
   the entries are paragraphs, and the only thing between them is space.
   The serif carries them because this is the human voice describing what
   was built, not the machine reporting a record. */
.home-projects { margin-top: 3.5rem; }

.entry { margin: 0 0 3rem; max-width: 62ch; }
.entry:last-of-type { margin-bottom: 0; }

/* The project name runs in to the sentence it leads. Weight, not size or
   colour, sets it apart, so the line still reads as one thought. */
.entry-name { font-weight: 500; color: var(--ink); }

.entry-lead {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.entry-body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}
/* An entry with no principle has the name lead the description instead, so
   the run-in has to hold its own at body size. */
.entry-body .entry-name { color: var(--ink); }

/* A trailing clause, not a toolbar: same serif, lowercase, plain links with
   a dim middot between them. */
.entry-links {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--faint);
  margin: 0.55rem 0 0;
}
.entry-links a { color: var(--accent-lift); }

/* The quiet index line under the homepage listing. Deliberately closer to
   the last entry than the entries are to each other, so it hangs off the
   listing instead of reading as a sixth one. */
.all-work {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  margin: 2rem 0 0;
}

/* ---- Annotated artifact (machine speaks, you answer) ---------- */
.artifact-wrap { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; margin: 0 0 1.4rem; }
.artifact {
  flex: 1.3; min-width: 300px;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  padding: 1.1rem 1.2rem;
}
.artifact-quote { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--ink-2); margin-bottom: 0.9rem; }
.artifact-trace { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.95; color: var(--ink-2); white-space: pre; }
.artifact-trace .k     { color: var(--ink); }
.artifact-trace .final { color: var(--accent-lift); font-weight: 500; }
.artifact-trace .ovr   { color: var(--accent-lift); }
.artifact-trace .dim   { color: var(--faint); }
.redact { background: var(--faint); color: var(--faint); border-radius: 1px; user-select: none; }
.artifact-note { flex: 1; min-width: 220px; font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); }
.artifact-note strong, .artifact-note .hl { color: var(--ink); font-weight: 400; }

/* ---- Engage / contact block ----------------------------------- */
.home-engage { margin-top: 3.25rem; padding-top: 1.75rem; border-top: 1px solid var(--rule-2); }
.engage-line { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.45; color: var(--ink); margin: 0 0 1.1rem; max-width: 48ch; }
.engage-cta { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-lift); }

/* `.btn`, `.btn-primary`, `.chip` and `.chips` are gone: the buttons were the
   two CV downloads and the chips were the project link rows, and both now read
   as ordinary text. The /lab/ snapshots carry their own copies of the chip
   rules inline, so nothing there depends on this file. */

/* ---- Generic section heads ------------------------------------ */
.home-section { margin-top: 3.5rem; }
.see-all { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-lift); }
.home-lead { font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink-2); max-width: 60ch; margin-bottom: 1.25rem; }
.section-header { margin-bottom: 1rem; }
.section-header p { font-size: var(--fs-sm); color: var(--faint); margin: 0; }

.page-head { margin-bottom: 2rem; }
.page-head h1 { margin-top: 0; }

/* `.work-row` is gone with layouts/partials/work-row.html, which nothing
   called. The work listing is `.entry` above. */
.track { margin-bottom: 2rem; }
.track-label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 0.6rem; }

/* ---- Receipts ------------------------------------------------- */
.receipt-group { margin-bottom: 1.75rem; }
.receipt-row { display: flex; align-items: baseline; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule-2); }
.receipt-claim { flex: 1; min-width: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.receipt-claim strong { color: var(--accent-lift); font-weight: 500; }
.receipt-source { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; flex-shrink: 0; }

/* ---- Post list / blog ----------------------------------------- */
.post-list { list-style: none; }
.post-item { padding: 1rem 0; border-bottom: 1px solid var(--rule-2); }
.post-item:last-child { border-bottom: none; }
.post-date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); display: block; margin-bottom: 0.2rem; }
.post-title { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.02em; color: var(--ink); display: block; line-height: 1.4; }
.post-title:hover { color: var(--accent-lift); text-decoration: none; }
.post-excerpt { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-2); margin: 0.3rem 0 0; line-height: 1.6; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.35rem; }
.post-tag { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); }

article header { margin-bottom: 2rem; }
article header h1 { margin-top: 0; }
article header .post-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); margin-top: 0.4rem; }
article .content { line-height: 1.75; }
article .content img { max-width: 100%; margin: 1.5rem 0; border-radius: 3px; }

/* ---- Research ------------------------------------------------- */
.research-card { padding: 1.25rem 0; border-bottom: 1px solid var(--rule-2); }
.research-card:last-child { border-bottom: none; }
.research-card h3 { margin-top: 0; color: var(--ink); }
.research-card .subtitle { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.5rem; }
.research-card p { font-size: var(--fs-sm); }
.provenance-banner { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); margin-top: 0.5rem; }

/* ---- CV ------------------------------------------------------- */
.cv-section { margin-bottom: 2rem; }
.cv-section h2 { padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); }
.cv-content h1 + p { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); }
.cv-entry { padding: 0.75rem 0; }
.cv-entry .role { color: var(--ink); font-size: 1rem; }
.cv-entry .org, .cv-entry .period { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); }
.cv-entry .desc { color: var(--ink-2); font-size: 0.95rem; margin-top: 0.25rem; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.35rem; }
.tech-tag { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); }
.cv-download { margin-top: 2.5rem; }

/* ---- Slopodar / tells / decisions (data rows) ----------------- */
.tells-search input {
  width: 100%; font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 0.5rem 0.7rem; outline: none; margin-bottom: 1rem;
}
.tells-search input:focus { border-color: var(--accent); }
.tells-search input::placeholder { color: var(--faint); }
.tells-row, .sd-row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--rule-2);
  text-decoration: none; color: inherit;
}
.tells-row:first-child, .sd-row:first-child { border-top: 1px solid var(--rule-2); }
.tells-row-name { font-family: var(--font-mono); color: var(--ink); font-size: var(--fs-sm); white-space: nowrap; flex-shrink: 0; }
.tells-row:hover .tells-row-name, .sd-row:hover .sd-row-id { color: var(--accent-lift); }
.tells-row-trigger, .sd-row-decision { font-family: var(--font-mono); color: var(--faint); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.tells-row-date, .tells-row-link, .sd-row-link, .sd-row-id { font-family: var(--font-mono); color: var(--faint); font-size: var(--fs-xs); flex-shrink: 0; white-space: nowrap; }
.sd-row-id { min-width: 4rem; color: var(--accent-lift); }
.sd-row-status { font-family: var(--font-mono); color: var(--faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.tells-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.5rem; }

/* ---- Sloptics ------------------------------------------------- */
/* The page carries its own stylesheet for the annotation layer; only
   its structural chrome is set here. */
.sloptics-banner {
  color: var(--accent-lift); font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.3;
  background: none; border: 1px solid var(--accent-soft); padding: 1.25rem 0; text-align: center;
  margin-bottom: 1.5rem; width: 100%; user-select: none;
}
.sloptics-term { padding: 1rem 0; border-bottom: 1px solid var(--rule-2); }
.sloptics-term:last-child { border-bottom: none; }
.sloptics-term h3 { margin-top: 0; color: var(--ink); }
.sloptics-pos { font-family: var(--font-mono); color: var(--faint); font-size: 0.8rem; font-style: normal; }

/* ---- Footer --------------------------------------------------- */
footer {
  border-top: 1px solid var(--rule-2);
  padding: 1.5rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--faint);
  text-align: center;
  position: relative;
  z-index: 1;
}
footer a { color: var(--faint); }
footer a:hover { color: var(--ink); text-decoration: none; }

/* ---- Mermaid -------------------------------------------------- */
.mermaid { margin: 1.75rem 0; text-align: center; line-height: 1.2; }
.mermaid svg { max-width: 100%; height: auto; }

/* ---- Mobile --------------------------------------------------- */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; padding: 0.5rem; }
.nav-toggle-label span { display: block; width: 18px; height: 2px; background: var(--faint); margin: 3px 0; transition: transform 0.2s, opacity 0.2s; }

@media (max-width: 640px) {
  :root { --nav-height: 46px; --fs-hero: 1.65rem; }
  .container { padding: 0 1.15rem; }
  .hero, .hero-statement, .lead, .engage-line, .content, .cv-content { max-width: 100%; min-width: 0; }
  .nav-toggle-label { display: block; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-height); left: 0; right: 0;
    background: var(--header); border-bottom: 1px solid var(--rule-2);
    flex-direction: column; padding: 0.75rem 1.15rem; gap: 0;
  }
  .nav-links li { padding: 0.4rem 0; }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: rotate(-45deg) translate(3px, -3px); }
  .entry { margin-bottom: 2.5rem; max-width: 100%; }
  .entry-lead { font-size: 1.1rem; }
  .artifact-wrap { display: block; }
  .artifact { min-width: 0; width: 100%; }
  .artifact-note { min-width: 0; width: 100%; margin-top: 1rem; }
  .artifact-trace { white-space: normal; overflow-wrap: anywhere; }
  .cv-content h1 + p { white-space: normal; }
  .receipt-row { flex-direction: column; gap: 0.15rem; }
  .receipt-source { white-space: normal; }
  .tells-row, .sd-row { flex-wrap: wrap; gap: 0.15rem 0.8rem; }
  .tells-row-trigger, .sd-row-decision { flex-basis: 100%; white-space: normal; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  #rain { display: none; }
}