/* ============================================================
   chrystellebrowman.com — shared site stylesheet
   ============================================================
   This file is the single source of truth for the CORE site
   pages: index, systems, models, solutions (artifacts), 404.

   It does NOT apply to the beta/artifact demo pages
   (blocker-spinner, late-book-excuse, sandbox, legal-news-feed,
   friction-to-flow) — those keep their own embedded styles.

   Where this file lives:
     In the site ROOT — the same folder as index.html and
     systems.html. Do not put it in a subfolder.

   How to use on a page:
     1. In <head>, add:
        <link rel="stylesheet" href="site.css">
     2. Delete the duplicated shared rules from that page's
        <style> block. Keep only rules unique to that page.

   Sections:
     1. Design tokens
     2. Base / reset
     3. Layout containers
     4. Site header + nav
     5. Shared typography components
     6. Panels & cards
     7. Buttons
     8. Footer
     9. Responsive (shared breakpoints)
   ============================================================ */


/* ------------------------------------------------------------
   1. DESIGN TOKENS
   The site palette. Change a color here, it changes everywhere.
   ------------------------------------------------------------ */
:root {
  /* Surfaces */
  --bg:      #050505;                    /* page background (near-black) */
  --panel:   #0e0e0f;                    /* raised panel surface */
  --panel-2: #121316;                    /* secondary panel surface */

  /* Text */
  --text:  #f5f7f8;                      /* primary text (near-white) */
  --muted: #a8b0b7;                      /* secondary / body text */

  /* Accents */
  --green: #76f7c0;                      /* mint — kickers, tags, highlights */
  --blue:  #7fd6ff;                      /* ice blue — links, step numbers */

  /* Structure */
  --line:   rgba(255,255,255,0.08);      /* hairline borders */
  --radius: 22px;                        /* card / panel corner radius */
  --max:    1180px;                      /* content max width */
  --shadow: 0 20px 50px rgba(0,0,0,0.35);/* panel drop shadow */
}


/* ------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left,  rgba(118,247,192,0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(127,214,255,0.08), transparent 22%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }


/* ------------------------------------------------------------
   3. LAYOUT CONTAINERS
   .container and .wrap are the same thing — both are kept so
   existing pages work without markup changes.
   ------------------------------------------------------------ */
.container,
.wrap {
  width: min(92%, var(--max));
  margin: 0 auto;
}

.section { padding: 34px 0; }


/* ------------------------------------------------------------
   4. SITE HEADER + NAV
   Two markup variants exist across the site; both are styled:
     Variant A (index, 404):        .container.nav > .brand
     Variant B (systems, models…):  .site-header-inner > .site-brand
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5,5,5,0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.nav,
.site-header-inner {
  width: min(92%, var(--max));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
}

/* .nav sits inside .container on some pages; avoid double-constraining */
.container.nav { width: min(92%, var(--max)); }

.brand,
.site-brand {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.site-nav a {
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.site-nav a:hover { color: var(--text); }


/* ------------------------------------------------------------
   5. SHARED TYPOGRAPHY COMPONENTS
   ------------------------------------------------------------ */

/* Small green label with a leading dash, above a page title */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

/* Small green label above a section heading (no dash) */
.section-kicker {
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Large page-level heading (used as the H1 on interior pages) */
.page-title {
  font-size: clamp(2.3rem, 4vw, 4.2rem);
  margin: 0 0 14px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
}

/* Within-page section heading (smaller than .page-title) */
.section-title {
  font-size: clamp(1.6rem, 2vw, 2.4rem);
  margin: 0 0 10px;
}

/* Muted paragraph under a title */
.section-intro {
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 52rem;
  font-size: 1.08rem;
  line-height: 1.7;
}

/* Breadcrumb trail (systems uses .breadcrumb, models uses .crumbs) */
.breadcrumb,
.crumbs {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 18px;
}

.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }
.crumbs span { color: var(--text); }

/* Bold inline label, e.g. "Problem:" / "System:" / "Impact:" */
.label {
  color: var(--text);
  font-weight: 600;
}


/* ------------------------------------------------------------
   6. PANELS & CARDS
   .panel is the base raised surface used across the site.
   ------------------------------------------------------------ */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


/* ------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.button:hover { transform: translateY(-1px); }

.button-primary,
.button-secondary {
  background: linear-gradient(135deg, rgba(118,247,192,0.14), rgba(127,214,255,0.12));
  border-color: rgba(118,247,192,0.28);
  color: var(--text);
}


/* ------------------------------------------------------------
   8. FOOTER
   Both footer markup variants are styled:
     Variant A: .site-footer > .footer-inner > .footer-copyright
     Variant B: .footer > .wrap > .copyright
   ------------------------------------------------------------ */
.site-footer,
.footer {
  padding: 24px 0 40px;
}

.footer-inner {
  width: min(92%, var(--max));
  margin: 0 auto;
}

.footer-copyright,
.copyright {
  color: var(--muted);
  font-size: 0.9rem;
}


/* ------------------------------------------------------------
   9. RESPONSIVE — shared header/nav collapse
   Page-specific grid collapses stay in each page's own styles.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .nav,
  .site-header-inner {
    min-height: unset;
    padding: 14px 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav {
    width: 100%;
    gap: 12px 16px;
    justify-content: flex-start;
  }
}
