/* ============================================================
   core.css — Shared chrome for lawrencengo.com

   What:  Base reset, layout primitives, theme switcher, and the
          full nav.top system. Anything that should look the same
          on every top-level page lives here.
   Why:   Previously duplicated inline on every page. Maintaining
          consistency required hand-editing 9 files for any change
          to nav, theme switcher, or base typography. This file
          consolidates those rules so a change propagates everywhere.
   Used:  Linked by every top-level page in /site/ via:
          <link rel="stylesheet" href="/assets/css/core.css">
          Must load AFTER tokens.css so the cascade order is:
            1. tokens.css   (CSS variables)
            2. core.css     (shared chrome that uses the tokens)
            3. inline <style>  (page-specific overrides)
   See:   CLAUDE.md §6 "Design system" and §7 "CSS / HTML patterns".
   ============================================================ */


/* ============================================================
   RESET + BASE
   ------------------------------------------------------------
   Universal box-sizing, margin/padding reset, and the body
   padding that accounts for the fixed top nav. Systems theme
   adds extra padding because a status bar lives above the nav.
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Pad content for the fixed top nav */
body { padding-top: 64px; }
/* Systems theme: status bar sits ABOVE the nav, so push nav down + extra body padding */
[data-theme="systems"] nav.top { top: 36px; }
[data-theme="systems"] body { padding-top: 100px; }
@media (max-width: 640px) {
  body { padding-top: 52px; }
  [data-theme="systems"] body { padding-top: 88px; }
}

/* Smooth-scroll anchor offset so #section links land below the fixed nav */
html { scroll-padding-top: 72px; }
[data-theme="systems"] html { scroll-padding-top: 108px; }
@media (max-width: 640px) {
  html { scroll-padding-top: 60px; }
  [data-theme="systems"] html { scroll-padding-top: 96px; }
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .5s ease, color .5s ease;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }


/* ============================================================
   LAYOUT PRIMITIVES
   ------------------------------------------------------------
   .container — max-width wrapper with horizontal gutter. The
   max-width and gutter come from tokens (--max, --gutter).
   ============================================================ */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}


/* ============================================================
   AMBIENT — Systems-mode dot grid
   ------------------------------------------------------------
   Subtle radial-gradient pattern that lives behind every page
   when the Systems theme is active. Adds a "control panel"
   texture without competing with content.
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(238, 242, 246, 0.035) 1px, transparent 0);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s ease;
}
[data-theme="systems"] body::before { opacity: 1; }


/* ============================================================
   .em — Italic / animated gradient accent
   ------------------------------------------------------------
   The site's primary emphasis element. In Editorial it's a
   warm-accent italic; in Systems it's an animated gradient
   text fill. Used throughout headings and inline emphasis.
   ============================================================ */
.em {
  font-style: italic;
  font-weight: var(--display-italic-weight);
}
[data-theme="editorial"] .em {
  color: var(--accent);
  font-family: var(--display-font);
}
@keyframes grad-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
[data-theme="systems"] .em {
  background: linear-gradient(90deg, #6ee7d6, #7aa9ff, #a78bfa, #6ee7d6);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  animation: grad-move 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="systems"] .em { animation: none; background-size: 100% auto; }
}

/* Systems theme — Geist isn't great italic; keep display prose upright */
[data-theme="systems"] .pullquote,
[data-theme="systems"] .cc-quote,
[data-theme="systems"] .testimonial .body,
[data-theme="systems"] .smap-q { font-style: normal; }

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


/* ============================================================
   THEME SWITCHER
   ------------------------------------------------------------
   The Editorial / Systems toggle that lives inside the top nav.
   Two pill-shaped buttons with an animated indicator that slides
   to the active option. Keyboard shortcut: T.
   ============================================================ */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: rgba(0, 0, 0, 0.02);
  margin-right: 16px;
  position: relative;
  transition: border-color .3s, background .3s;
}
[data-theme="systems"] .theme-switcher {
  background: rgba(238, 242, 246, 0.02);
}
.theme-switcher .opt {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 2;
}
[data-theme="editorial"] .theme-switcher .opt {
  font-family: 'General Sans', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.theme-switcher .opt .glyph {
  font-family: var(--display-font);
  font-size: 13px;
  font-style: italic;
  line-height: 1;
  transform: translateY(-1px);
}
[data-theme="systems"] .theme-switcher .opt[data-theme-target="systems"] .glyph,
[data-theme="editorial"] .theme-switcher .opt[data-theme-target="editorial"] .glyph {
  color: inherit;
}
.theme-switcher .opt:hover { color: var(--ink-soft); }
.theme-switcher .opt.active { color: var(--ink); }
.theme-switcher .indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  transition: left .35s cubic-bezier(.4, .8, .3, 1.1), width .35s cubic-bezier(.4, .8, .3, 1.1);
  z-index: 1;
}
[data-theme="systems"] .theme-switcher .indicator {
  background: var(--bg-elev);
  box-shadow: 0 0 18px var(--glow-soft);
}
.theme-switcher .hint {
  font-family: var(--mono-font);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 10px;
  margin-right: 10px;
  opacity: 0.65;
}
[data-theme="editorial"] .theme-switcher .hint { font-family: 'General Sans', 'Inter', sans-serif; }


/* ============================================================
   NAV.TOP — Site-wide top navigation
   ------------------------------------------------------------
   Fixed top bar with brand on the left, primary nav links and
   theme switcher in the middle, and a "Get in touch" CTA on the
   right. The exact same structure renders on every page; only
   the "active" link state and a few minor anchor targets vary
   by page (those are in the page's HTML, not its CSS).

   The brand has two visual modes:
     - Editorial: serif wordmark, no glyph badge.
     - Systems:   sans wordmark + a gradient-bordered glyph badge.

   Related patterns:
     - The "Get in touch" CTA uses .cta sub-class. Its hover state
       differs per theme: editorial fills with ink, systems adds
       a teal glow.
     - .brand .role is the "// design.director" sub-label. The
       4px margin-left is critical for matching the home page's
       layout exactly (see CLAUDE.md §13 maintenance log).
   ============================================================ */
nav.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--rule);
  transition: background-color .5s ease, border-color .5s ease;
}
[data-theme="editorial"] nav.top { background: rgba(246, 243, 238, 0.92); }
[data-theme="systems"] nav.top { background: rgba(10, 13, 17, 0.78); }

nav.top .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  gap: 16px;
}

/* BRAND wordmark + role label */
nav.top .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: font-family .3s;
}
[data-theme="editorial"] nav.top .brand {
  font-family: var(--display-font);
  font-weight: 500;
  font-size: 19px;
}
nav.top a.brand { color: inherit; text-decoration: none; }
nav.top a.brand:hover { color: inherit; }

nav.top .brand .glyph {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--bg-elev);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono-font);
  font-weight: 500; font-size: 12px;
  position: relative;
  isolation: isolate;
  color: var(--ink);
  transition: opacity .4s, transform .4s;
}
[data-theme="editorial"] nav.top .brand .glyph {
  display: none;
}
nav.top .brand .glyph::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
nav.top .brand .glyph .inner {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
nav.top .brand .role {
  color: var(--ink-muted);
  font-weight: 400;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-left: 4px; /* Critical for cross-page consistency. */
}
[data-theme="editorial"] nav.top .brand .role {
  font-family: 'General Sans', 'Inter', sans-serif;
}

/* PRIMARY LINKS */
nav.top ul { list-style: none; display: flex; gap: 4px; align-items: center; }
nav.top a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all .25s;
  font-family: 'General Sans', 'Inter', sans-serif;
}
[data-theme="systems"] nav.top a { font-family: 'Geist', sans-serif; font-weight: 400; }
nav.top a:hover { color: var(--ink); }
nav.top a.active { color: var(--ink); }

/* "GET IN TOUCH" CTA — pill button on the far right */
nav.top .cta {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.02);
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  position: relative;
  isolation: isolate;
}
[data-theme="editorial"] nav.top .cta {
  border: 1px solid var(--ink);
  color: var(--ink);
}
[data-theme="editorial"] nav.top .cta:hover { background: var(--ink); color: var(--bg); }
[data-theme="systems"] nav.top .cta {
  background: rgba(238, 242, 246, 0.02);
}
[data-theme="systems"] nav.top .cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
[data-theme="systems"] nav.top .cta:hover {
  box-shadow: 0 0 24px var(--glow-soft);
}