/*
 * Engel Nyst — Brand Visual System
 *
 * Aesthetic: "Builder's journal by lamplight"
 * Dark workshop, warm parchment ink, gold accents catching light.
 * Technical but never cold. Noise texture for tactile depth.
 */

:root {
  /* ── Primary palette ── */
  --ink: #e5e0d8;          /* Warm parchment — primary text */
  --muted: #8a847a;        /* Worn stone — secondary text, captions */
  --bg: #0f0f0e;           /* Near-black — dark workshop surface */
  --card: #1a1a18;         /* Slightly lifted surface — cards, containers */
  --border: #2a2a26;       /* Subtle edge — dividers, card borders */

  /* ── Accent colors ── */
  --accent: #c9a84c;       /* Warm gold — section headers, highlights, hover accents */
  --teal: #6bbfab;         /* Cool mint — links, interactive elements */
  --green: #7bc47f;        /* Soft green — live/success status */
  --report: #dc6b4a;       /* Warm red-orange — reports, alerts */

  /* ── Typography ── */
  --serif: "Instrument Serif", Georgia, serif;       /* Display — headlines, the big name */
  --sans: "DM Sans", system-ui, sans-serif;          /* Body — readable, clean, warm */
  --mono: "JetBrains Mono", monospace;               /* Code + labels — technical, structured */

  /* Google Fonts import:
     https://fonts.googleapis.com/css2?family=Instrument+Serif&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap
  */

  /* ── Type scale ── */
  --text-xs: 0.65em;
  --text-sm: 0.78em;
  --text-base: 1em;
  --text-lg: 1.05em;
  --text-xl: 1.25em;
  --text-2xl: clamp(1.8em, 5vw, 2.6em);
  --text-hero: clamp(3.2em, 8vw, 5em);

  /* ── Spacing ── */
  --space-xs: 6px;
  --space-sm: 14px;
  --space-md: 24px;
  --space-lg: 56px;
  --space-xl: 80px;
  --space-shell-x: 28px;
  --space-shell-top: 100px;

  /* ── Layout ── */
  --max-width: 680px;           /* Main content */
  --max-width-wide: 780px;      /* Architecture pages */
  --border-radius: 6px;
}

/* ── Background texture ── */
/* Fractal noise at 3% opacity — tactile, paper-like depth */
/* Apply to body:
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
*/

/* ── Base reset + body ── */
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  line-height: 1.6; min-height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}
.shell { max-width: var(--max-width); margin: 0 auto; padding: var(--space-shell-top) var(--space-shell-x) var(--space-xl); }
.shell--wide { max-width: var(--max-width-wide); }

/* ── Navigation ── */
.back {
  color: var(--muted); text-decoration: none;
  font-family: var(--mono); font-size: var(--text-sm);
  letter-spacing: 0.02em; transition: color 0.15s;
}
.back:hover { color: var(--accent); }

/* ── Headlines ── */
h1 {
  font-family: var(--serif); font-weight: 400;
  letter-spacing: -0.04em; line-height: 0.95;
  margin-bottom: 16px;
}
h1.hero { font-size: var(--text-hero); animation: fadeUp 0.6s ease-out both; }
h1.page { font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1.1; margin: 20px 0 6px; }

h2 {
  font-family: var(--mono); font-size: 0.72em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent); margin: var(--space-lg) 0 16px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

/* ── Tagline / meta ── */
.tagline {
  color: var(--muted); font-size: var(--text-lg); margin-bottom: 72px;
  letter-spacing: 0.01em; animation: fadeUp 0.6s ease-out 0.1s both;
}
.meta { color: var(--muted); font-size: 0.92em; line-height: 1.5; margin-bottom: var(--space-lg); }
.meta a { color: var(--teal); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
.meta a:hover { border-bottom-color: var(--teal); }

/* ── Status tags ── */
.tag {
  display: inline-block; font-family: var(--mono); font-size: var(--text-xs);
  font-weight: 600; padding: 3px 10px; border-radius: 3px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tag-live { background: rgba(123,196,127,0.12); color: var(--green); }
.tag-planned { background: rgba(107,191,171,0.12); color: var(--teal); }
.tag-data { background: rgba(201,168,76,0.12); color: var(--accent); }
.tag-report { background: rgba(220,92,58,0.12); color: var(--report); }
.tag-draft { background: rgba(138,132,122,0.12); color: var(--muted); }

/* ── Cards ── */
.cards { display: grid; gap: var(--space-sm); }
a.card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--border-radius); padding: 22px 24px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative; overflow: hidden;
}
a.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent); opacity: 0; transition: opacity 0.2s;
}
a.card:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: -4px 0 0 var(--accent); }
a.card:hover::before { opacity: 1; }
.card-title { font-weight: 700; font-size: 1em; margin-bottom: 6px; }
.card-desc { color: var(--muted); font-size: 0.88em; line-height: 1.5; }
.card-tag { margin-top: 10px; }

/* ── Links list ── */
.links { list-style: none; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.links a {
  color: var(--teal); text-decoration: none;
  font-family: var(--mono); font-size: 0.85em;
  padding-bottom: 1px; border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.links a:hover { border-bottom-color: var(--teal); color: var(--ink); }

/* ── Prose (architecture pages) ── */
.prose { line-height: 1.7; }
.prose p { margin-bottom: 1em; }
.prose a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(107,191,171,0.3); transition: border-color 0.15s; }
.prose a:hover { border-bottom-color: var(--teal); }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--card); padding: 2px 6px; border-radius: 3px; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1em; }
.prose li { margin-bottom: 0.4em; }
.prose li code { font-size: 0.85em; }

/* ── Mermaid diagrams ── */
.mermaid { background: var(--card); border: 1px solid var(--border); border-radius: var(--border-radius); padding: 24px; margin: 20px 0; overflow-x: auto; }

/* ── Footer ── */
footer {
  margin-top: var(--space-xl); padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: var(--text-sm);
  font-family: var(--mono); letter-spacing: 0.01em;
}

/* ── Animation ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}