/*
Theme Name: GWD Mission Control
Theme URI: https://gordenwebdesign.com/
Author: Douglas Gorden Jr / Gorden Web Design
Author URI: https://gordenwebdesign.com/DougGordenJr_Bio/
Description: Dark cosmos "Mission Control" theme. Single accent color (electric cyan), monospace accents, CSS-only starfield, no external deps.
Version: 1.0.9
License: MIT
Text Domain: gwd-mission-control
*/

:root {
    /* COLOR */
    --bg-deep: #0B1426;
    --bg-card: #16203A;
    --bg-elev: #1E2A4A;
    --border: #2A3658;
    --border-hover: #4A5C8E;

    --fg-primary: #F0F4FA;
    --fg-secondary: #B8C2D9;
    --fg-tertiary: #7C8AAB;

    --accent:        #00E5FF;
    --accent-soft:   #66F2FF;
    --accent-deep:   #007F8C;

    --success:       #00FFA3;
    --warning:       #FFB020;
    --danger:        #FF3860;

    /* TYPOGRAPHY */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

    /* SCALE (fluid) */
    --fs-xs:   clamp(11px, 0.7vw, 13px);
    --fs-sm:   clamp(13px, 0.85vw, 15px);
    --fs-base: clamp(13px, 0.9vw, 15px);
    --fs-lg:   clamp(17px, 1.2vw, 20px);
    --fs-xl:   clamp(20px, 1.6vw, 26px);
    --fs-2xl:  clamp(26px, 2.4vw, 36px);
    --fs-3xl:  clamp(36px, 4vw, 56px);
    --fs-display: clamp(48px, 6vw, 80px);

    /* SPACING (8px base) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
    --space-4: 16px; --space-5: 24px; --space-6: 32px;
    --space-7: 48px; --space-8: 64px; --space-9: 96px;

    /* RADII */
    --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px;

    /* EFFECTS */
    --glow-accent: 0 0 0 1px rgba(0, 229, 255, 0.4), 0 0 24px rgba(0, 229, 255, 0.15);
    --glow-accent-strong: 0 0 0 1px rgba(0, 229, 255, 0.6), 0 0 40px rgba(0, 229, 255, 0.3);
    --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 255, 0.2);
  

    /* LAYOUT */
    --gutter: clamp(16px, 3vw, 28px);
}

  * { box-sizing: border-box; }

  html { background: var(--bg-deep); }

  body {
    margin: 0;
    background: var(--bg-deep);
    color: var(--fg-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    position: relative;
    min-height: 100vh;
  }

  /* Starfield — static, CSS-only, fixed so it never scrolls or animates */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 6% 12%, rgba(230,234,242,0.9), transparent 100%),
      radial-gradient(1px 1px at 18% 42%, rgba(230,234,242,0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 27% 8%, rgba(0,229,255,0.6), transparent 100%),
      radial-gradient(1px 1px at 35% 68%, rgba(230,234,242,0.6), transparent 100%),
      radial-gradient(1px 1px at 44% 25%, rgba(230,234,242,0.8), transparent 100%),
      radial-gradient(1.5px 1.5px at 52% 88%, rgba(0,229,255,0.5), transparent 100%),
      radial-gradient(1px 1px at 61% 15%, rgba(230,234,242,0.7), transparent 100%),
      radial-gradient(1px 1px at 68% 55%, rgba(230,234,242,0.6), transparent 100%),
      radial-gradient(1.5px 1.5px at 76% 33%, rgba(0,229,255,0.55), transparent 100%),
      radial-gradient(1px 1px at 83% 72%, rgba(230,234,242,0.8), transparent 100%),
      radial-gradient(1px 1px at 91% 18%, rgba(230,234,242,0.6), transparent 100%),
      radial-gradient(1px 1px at 12% 82%, rgba(230,234,242,0.5), transparent 100%),
      radial-gradient(1px 1px at 24% 95%, rgba(230,234,242,0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 58% 6%, rgba(0,229,255,0.5), transparent 100%),
      radial-gradient(1px 1px at 95% 48%, rgba(230,234,242,0.6), transparent 100%),
      radial-gradient(1px 1px at 40% 48%, rgba(230,234,242,0.5), transparent 100%);
    background-repeat: repeat;
    background-size: 900px 900px;
    background-color: var(--bg-deep);
    opacity: 0.6;
    animation: drift 120s linear infinite;
  }

  /* Nebula gradient overlay — soft cyan/violet glow behind everything */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
      radial-gradient(ellipse 800px 600px at 20% 30%, rgba(0, 100, 180, 0.35), transparent 70%),
      radial-gradient(ellipse 700px 500px at 80% 70%, rgba(100, 50, 180, 0.25), transparent 70%),
      radial-gradient(ellipse 500px 400px at 50% 50%, rgba(0, 150, 200, 0.18), transparent 75%);
    background-color: transparent;
    animation: nebula-breath 18s ease-in-out infinite;
  }


  a { color: var(--accent); }

  /* NAV */
  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-6);
    background: rgba(11, 20, 38, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }

  .site-header .wordmark {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--fg-primary);
    text-decoration: none;
    letter-spacing: 0.02em;
  }

  .site-header .wordmark .dot { color: var(--accent); }

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav a {
    color: var(--fg-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    color: var(--fg-primary);
    border-bottom-color: var(--accent);
  }

  .nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--fg-primary);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
  }

  @media (max-width: 720px) {
    .nav-toggle { display: inline-block; }
    .site-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-4);
      background: rgba(11, 20, 38, 0.96);
      border-bottom: 1px solid var(--border);
      padding: var(--space-5) var(--space-6);
      display: none;
    }
    .site-nav.is-open { display: flex; }
  }

  /* FOOTER */
  .site-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    color: var(--fg-tertiary);
    font-size: var(--fs-xs);
  }

  .site-footer .footer-links {
    display: flex;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-footer .footer-links a {
    color: var(--fg-secondary);
    text-decoration: none;
  }

  .site-footer .footer-links a:hover { color: var(--accent); }

  .site-footer .timestamp {
    font-family: var(--font-mono);
    color: var(--fg-tertiary);
    font-size: var(--fs-xs);
  }

  @media (max-width: 480px) {
    .site-footer { flex-direction: column; align-items: flex-start; }
  }

/* ============ HOME PAGE LAYOUT ============ */

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

html { background: var(--bg-deep); scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    color: var(--fg-primary);
    background: var(--bg-deep);
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ----- COSMIC BACKGROUND LAYERS ----- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 6% 12%, rgba(240,244,250,0.9), transparent 100%),
      radial-gradient(1px 1px at 18% 42%, rgba(240,244,250,0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 27% 8%, rgba(0,229,255,0.6), transparent 100%),
      radial-gradient(1px 1px at 35% 68%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1px 1px at 44% 25%, rgba(240,244,250,0.8), transparent 100%),
      radial-gradient(1.5px 1.5px at 52% 88%, rgba(0,229,255,0.5), transparent 100%),
      radial-gradient(1px 1px at 61% 15%, rgba(240,244,250,0.7), transparent 100%),
      radial-gradient(1px 1px at 68% 55%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1.5px 1.5px at 76% 33%, rgba(0,229,255,0.55), transparent 100%),
      radial-gradient(1px 1px at 83% 72%, rgba(240,244,250,0.8), transparent 100%),
      radial-gradient(1px 1px at 91% 18%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1px 1px at 12% 82%, rgba(240,244,250,0.5), transparent 100%),
      radial-gradient(1px 1px at 24% 95%, rgba(240,244,250,0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 58% 6%, rgba(0,229,255,0.5), transparent 100%),
      radial-gradient(1px 1px at 95% 48%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1px 1px at 40% 48%, rgba(240,244,250,0.5), transparent 100%);
    background-repeat: repeat;
    background-size: 900px 900px;
    background-color: var(--bg-deep);
    opacity: 0.6;
    animation: drift 120s linear infinite;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
      radial-gradient(ellipse 900px 700px at 15% 25%, rgba(0, 120, 200, 0.32), transparent 70%),
      radial-gradient(ellipse 800px 600px at 85% 75%, rgba(120, 60, 200, 0.22), transparent 70%),
      radial-gradient(ellipse 600px 500px at 50% 50%, rgba(0, 170, 220, 0.16), transparent 75%);
    background-color: transparent;
    animation: nebula-breath 18s ease-in-out infinite;
}

/* ----- NAV (from chrome) ----- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-6);
    background: rgba(11, 20, 38, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.site-header .wordmark {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 20px;
    color: var(--fg-primary);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.site-header .wordmark .dot { color: var(--accent); }

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    color: var(--fg-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 6px 2px;
    transition: color 200ms ease;
    border-bottom: 1px solid transparent;
}

.site-nav a:hover, .site-nav a[aria-current="page"] {
    color: var(--fg-primary);
    border-bottom-color: var(--accent);
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-primary);
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    cursor: pointer;
}

@media (max-width: 720px) {
    .site-header { padding: var(--space-3) var(--space-4); }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: var(--space-4);
        flex-direction: column;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: var(--space-3);
        gap: var(--space-2);
        box-shadow: var(--shadow-2);
    }
    .site-nav.is-open { display: flex; }
    .nav-toggle { display: inline-block; }
}

/* ----- LAYOUT ----- */
.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-5);
}

main { padding-top: 80px; }

/* ----- HERO ----- */
.hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-7);
    align-items: center;
    padding: var(--space-9) var(--gutter) var(--space-8);
    min-height: 480px;
}

.hero-content { max-width: 720px; padding-left: 24px; padding-right: 24px; }

.hero h1 {
    font-size: var(--fs-3xl);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-5);
}

.hero .accent {
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
}

.hero .subhead {
    font-size: var(--fs-lg);
    color: var(--fg-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-5);
    max-width: 540px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: rgba(22, 32, 58, 0.6);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 8px var(--ok);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero-art {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 480px;
    justify-self: end;
}

.hero-art svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 32px rgba(0,229,255,0.15));
}

/* ----- SECTIONS ----- */
section { padding: var(--space-8) var(--gutter); }

.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    max-width: 720px;
}

.section-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.section-head h2 {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--fg-primary);
}

.section-head p {
    color: var(--fg-secondary);
    font-size: var(--fs-md);
    max-width: 600px;
}

/* ----- SERVICES ----- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity 200ms ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-2);
}

.service-card:hover::before { opacity: 1; }

.service-card .icon {
    width: 48px;
    height: 48px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--accent);
}

.service-card .icon svg { width: 24px; height: 24px; }

.service-card h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-3);
    color: var(--fg-primary);
}

.service-card p {
    color: var(--fg-secondary);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.service-card .tag {
    margin-top: var(--space-4);
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 4px 8px;
}

/* ----- STATS ----- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    padding: var(--space-7);
    background: linear-gradient(135deg, rgba(0,229,255,0.04), rgba(120,60,200,0.04));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
}

.stat {
    text-align: left;
    border-left: 2px solid var(--accent);
    padding-left: var(--space-4);
}

.stat .num {
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--fg-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat .label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ----- WORK ----- */
.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.work-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform 200ms ease, border-color 200ms ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.work-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-2);
}

.work-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.work-thumb svg {
    width: 100%;
    height: 100%;
}

.work-body {
    padding: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.work-body h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--fg-primary);
}

.work-arrow {
    color: var(--accent);
    transition: transform 200ms ease;
}

.work-card:hover .work-arrow { transform: translateX(4px); }

/* ----- PROCESS ----- */
.process-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    counter-reset: step;
}

.process-step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    position: relative;
}

.process-step .step-num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    margin-bottom: var(--space-3);
    letter-spacing: 0.04em;
}

.process-step h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--fg-primary);
}

.process-step p {
    color: var(--fg-secondary);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* ----- CTA ----- */
.cta-band {
    background: linear-gradient(135deg, rgba(0,229,255,0.08), rgba(120,60,200,0.06));
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-xl);
    padding: var(--space-8);
    text-align: center;
    margin: var(--space-7) 0;
    box-shadow: var(--shadow-glow);
}

.cta-band h2 {
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.cta-band p {
    color: var(--fg-secondary);
    font-size: var(--fs-md);
    max-width: 560px;
    margin: 0 auto var(--space-6);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--accent);
    color: #060A14;
    font-weight: 700;
    font-size: var(--fs-md);
    padding: 14px 28px;
    border-radius: var(--r-md);
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 4px 16px rgba(0,229,255,0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,229,255,0.45);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    color: var(--fg-primary);
    font-weight: 600;
    font-size: var(--fs-md);
    padding: 14px 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    transition: border-color 200ms ease, background 200ms ease;
}

.btn-secondary:hover {
    border-color: var(--accent);
    background: rgba(0,229,255,0.04);
}

/* ----- FOOTER ----- */
.site-footer {
    margin-top: var(--space-8);
    padding: var(--space-6) var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--fg-tertiary);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.site-footer .timestamp {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
}

@media (max-width: 720px) {
    .hero { grid-template-columns: 1fr; padding: var(--space-7) 0; }
    .hero-art { display: none; }
    .services-grid, .work-grid, .process-list { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); padding: var(--space-5); }
    .hero h1 { font-size: var(--fs-2xl); }
    .section-head h2, .cta-band h2 { font-size: var(--fs-xl); }
}

/* ============ PORTFOLIO PAGE ============ */

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

html { background: var(--bg-deep); scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    color: var(--fg-primary);
    background: var(--bg-deep);
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ----- COSMIC BACKGROUND ----- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 6% 12%, rgba(240,244,250,0.9), transparent 100%),
      radial-gradient(1px 1px at 18% 42%, rgba(240,244,250,0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 27% 8%, rgba(0,229,255,0.6), transparent 100%),
      radial-gradient(1px 1px at 35% 68%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1px 1px at 44% 25%, rgba(240,244,250,0.8), transparent 100%),
      radial-gradient(1.5px 1.5px at 52% 88%, rgba(0,229,255,0.5), transparent 100%),
      radial-gradient(1px 1px at 61% 15%, rgba(240,244,250,0.7), transparent 100%),
      radial-gradient(1px 1px at 68% 55%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1.5px 1.5px at 76% 33%, rgba(0,229,255,0.55), transparent 100%),
      radial-gradient(1px 1px at 83% 72%, rgba(240,244,250,0.8), transparent 100%),
      radial-gradient(1px 1px at 91% 18%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1px 1px at 12% 82%, rgba(240,244,250,0.5), transparent 100%),
      radial-gradient(1px 1px at 24% 95%, rgba(240,244,250,0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 58% 6%, rgba(0,229,255,0.5), transparent 100%),
      radial-gradient(1px 1px at 95% 48%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1px 1px at 40% 48%, rgba(240,244,250,0.5), transparent 100%);
    background-repeat: repeat;
    background-size: 900px 900px;
    background-color: var(--bg-deep);
    opacity: 0.6;
    animation: drift 120s linear infinite;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
      radial-gradient(ellipse 900px 700px at 15% 25%, rgba(0, 120, 200, 0.32), transparent 70%),
      radial-gradient(ellipse 800px 600px at 85% 75%, rgba(120, 60, 200, 0.22), transparent 70%),
      radial-gradient(ellipse 600px 500px at 50% 50%, rgba(0, 170, 220, 0.16), transparent 75%);
    background-color: transparent;
    animation: nebula-breath 18s ease-in-out infinite;
}

/* ----- NAV ----- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-6);
    background: rgba(11, 20, 38, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.site-header .wordmark {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 20px;
    color: var(--fg-primary);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.site-header .wordmark .dot { color: var(--accent); }

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    color: var(--fg-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 6px 2px;
    transition: color 200ms ease;
    border-bottom: 1px solid transparent;
}

.site-nav a:hover, .site-nav a[aria-current="page"] {
    color: var(--fg-primary);
    border-bottom-color: var(--accent);
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-primary);
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    cursor: pointer;
}

@media (max-width: 720px) {
    .site-header { padding: var(--space-3) var(--space-4); }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: var(--space-4);
        flex-direction: column;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: var(--space-3);
        gap: var(--space-2);
        box-shadow: var(--shadow-2);
    }
    .site-nav.is-open { display: flex; }
    .nav-toggle { display: inline-block; }
}

/* ----- LAYOUT ----- */
.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-5);
}

main { padding-top: 80px; }

/* ----- HERO ----- */
.hero {
    padding: var(--space-8) var(--gutter) var(--space-7);
}

.hero .breadcrumb {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
    margin-bottom: var(--space-4);
    letter-spacing: 0.04em;
}

.hero h1 {
    font-size: var(--fs-3xl);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-5);
    max-width: 800px;
}

.hero h1 .accent {
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
}

.hero .subhead {
    font-size: var(--fs-lg);
    color: var(--fg-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-6);
    max-width: 720px;
}

.hero .meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.hero .meta-chip {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-secondary);
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: rgba(22, 32, 58, 0.4);
}

.hero .meta-chip .num {
    color: var(--accent);
    font-weight: 700;
    margin-right: 4px;
}

/* ----- SECTIONS ----- */
section { padding: var(--space-8) var(--gutter); }

.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    max-width: 720px;
}

.section-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.section-head h2 {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--fg-primary);
}

.section-head p {
    color: var(--fg-secondary);
    font-size: var(--fs-md);
    max-width: 600px;
}

/* ----- FILTER BAR ----- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.filter-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-secondary);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: 6px 14px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 200ms ease;
}

.filter-btn:hover {
    color: var(--fg-primary);
    background: var(--bg-elev);
}

.filter-btn.is-active {
    background: var(--accent);
    color: #060A14;
    font-weight: 700;
}

/* ----- PORTFOLIO GRID ----- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.portfolio-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    display: flex;
    flex-direction: column;
}

.portfolio-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-2);
}

.portfolio-card .thumb {
    aspect-ratio: 16/9;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.portfolio-card .thumb svg {
    width: 100%;
    height: 100%;
    display: block;
}

.portfolio-card .thumb .status-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(11, 20, 38, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ok);
}

.portfolio-card .thumb .status-pill.warn { color: var(--warn); }

.portfolio-card .body {
    padding: var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.portfolio-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
}

.portfolio-card .category-tag {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
}

.portfolio-card h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
    color: var(--fg-primary);
}

.portfolio-card h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}

.portfolio-card h3 a:hover { color: var(--accent); }

.portfolio-card .desc {
    color: var(--fg-secondary);
    font-size: var(--fs-sm);
    line-height: 1.55;
    margin-bottom: var(--space-4);
}

.portfolio-card .highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
}

.portfolio-card .highlights li {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
    padding: 4px 0;
    border-bottom: 1px solid rgba(42, 54, 88, 0.4);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.portfolio-card .highlights li:last-child { border-bottom: 0; }

.portfolio-card .highlights li::before {
    content: "//";
    color: var(--accent);
    flex-shrink: 0;
}

.portfolio-card .card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.portfolio-card .visit-link {
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 200ms ease;
}

.portfolio-card .visit-link:hover {
    gap: 10px;
}

/* ----- TIMELINE ----- */
.timeline {
    margin: var(--space-7) 0;
    padding: var(--space-6);
    background: linear-gradient(135deg, rgba(0,229,255,0.04), rgba(120,60,200,0.04));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
}

.timeline h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    margin-bottom: var(--space-5);
}

.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.timeline-list::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.timeline-item {
    padding-left: 32px;
    padding-bottom: var(--space-5);
    position: relative;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

.timeline-item .month {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.timeline-item .what {
    color: var(--fg-primary);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* ----- FOOTER ----- */
.site-footer {
    margin-top: var(--space-8);
    padding: var(--space-6) var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--fg-tertiary);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.site-footer .timestamp {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
}

@media (max-width: 720px) {
    .portfolio-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: var(--fs-2xl); }
    .section-head h2 { font-size: var(--fs-xl); }
    .filter-bar { padding: var(--space-2); }
}

/* ============ BLOG PAGE ============ */

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

html { background: var(--bg-deep); scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    color: var(--fg-primary);
    background: var(--bg-deep);
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 6% 12%, rgba(240,244,250,0.9), transparent 100%),
      radial-gradient(1px 1px at 18% 42%, rgba(240,244,250,0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 27% 8%, rgba(0,229,255,0.6), transparent 100%),
      radial-gradient(1px 1px at 35% 68%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1px 1px at 44% 25%, rgba(240,244,250,0.8), transparent 100%),
      radial-gradient(1.5px 1.5px at 52% 88%, rgba(0,229,255,0.5), transparent 100%),
      radial-gradient(1px 1px at 61% 15%, rgba(240,244,250,0.7), transparent 100%),
      radial-gradient(1px 1px at 68% 55%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1.5px 1.5px at 76% 33%, rgba(0,229,255,0.55), transparent 100%),
      radial-gradient(1px 1px at 83% 72%, rgba(240,244,250,0.8), transparent 100%),
      radial-gradient(1px 1px at 91% 18%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1px 1px at 12% 82%, rgba(240,244,250,0.5), transparent 100%),
      radial-gradient(1px 1px at 24% 95%, rgba(240,244,250,0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 58% 6%, rgba(0,229,255,0.5), transparent 100%),
      radial-gradient(1px 1px at 95% 48%, rgba(240,244,250,0.6), transparent 100%),
      radial-gradient(1px 1px at 40% 48%, rgba(240,244,250,0.5), transparent 100%);
    background-repeat: repeat;
    background-size: 900px 900px;
    background-color: var(--bg-deep);
    opacity: 0.6;
    animation: drift 120s linear infinite;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
      radial-gradient(ellipse 900px 700px at 15% 25%, rgba(0, 120, 200, 0.32), transparent 70%),
      radial-gradient(ellipse 800px 600px at 85% 75%, rgba(120, 60, 200, 0.22), transparent 70%),
      radial-gradient(ellipse 600px 500px at 50% 50%, rgba(0, 170, 220, 0.16), transparent 75%);
    background-color: transparent;
    animation: nebula-breath 18s ease-in-out infinite;
}

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-6);
    background: rgba(11, 20, 38, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.site-header .wordmark {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 20px;
    color: var(--fg-primary);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.site-header .wordmark .dot { color: var(--accent); }

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    color: var(--fg-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 6px 2px;
    transition: color 200ms ease;
    border-bottom: 1px solid transparent;
}

.site-nav a:hover, .site-nav a[aria-current="page"] {
    color: var(--fg-primary);
    border-bottom-color: var(--accent);
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-primary);
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    cursor: pointer;
}

@media (max-width: 720px) {
    .site-header { padding: var(--space-3) var(--space-4); }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: var(--space-4);
        flex-direction: column;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: var(--space-3);
        gap: var(--space-2);
        box-shadow: var(--shadow-2);
    }
    .site-nav.is-open { display: flex; }
    .nav-toggle { display: inline-block; }
}

.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-5);
}

main { padding-top: 80px; }

.hero {
    padding: var(--space-8) var(--gutter) var(--space-7);
}

.hero .breadcrumb {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
    margin-bottom: var(--space-4);
    letter-spacing: 0.04em;
}

.hero h1 {
    font-size: var(--fs-3xl);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-5);
    max-width: 800px;
}

.hero h1 .accent {
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
}

.hero .subhead {
    font-size: var(--fs-lg);
    color: var(--fg-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-6);
    max-width: 720px;
}

section { padding: var(--space-8) var(--gutter); }

.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    max-width: 720px;
}

.section-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.section-head h2 {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--fg-primary);
}

.section-head p {
    color: var(--fg-secondary);
    font-size: var(--fs-md);
    max-width: 600px;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.filter-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-secondary);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: 6px 14px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 200ms ease;
}

.filter-btn:hover {
    color: var(--fg-primary);
    background: var(--bg-elev);
}

.filter-btn.is-active {
    background: var(--accent);
    color: #060A14;
    font-weight: 700;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-2);
}

.blog-card-thumb {
    aspect-ratio: 2/1;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.blog-card-thumb svg {
    width: 100%;
    height: 100%;
}

.blog-card-body {
    padding: var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-cat {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
    padding: 2px 8px;
    background: rgba(0, 229, 255, 0.1);
    border-radius: var(--r-sm);
    align-self: flex-start;
}

.blog-card h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-2);
}

.blog-card h3 a {
    color: var(--fg-primary);
    text-decoration: none;
    transition: color 200ms ease;
}

.blog-card h3 a:hover { color: var(--accent); }

.blog-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
    margin-top: auto;
}

.site-footer {
    margin-top: var(--space-8);
    padding: var(--space-6) var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--fg-tertiary);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.site-footer .timestamp {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
}

@media (max-width: 720px) {
    .blog-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: var(--fs-2xl); }
    .section-head h2 { font-size: var(--fs-xl); }
    .filter-bar { padding: var(--space-2); }
}

.blog-card-body .blog-excerpt {
    font-size: var(--fs-sm);
    color: var(--fg-tertiary);
    line-height: 1.5;
    margin-top: var(--space-2);
    margin-bottom: 0;
    font-family: var(--font-mono);
    font-size: 11px;
}



/* ============ ANIMATED SPACE BACKGROUND ============ */
/* Slow horizontal drift on the starfield — feels like floating through space */
@keyframes drift {
    from { background-position: 0 0; }
    to   { background-position: 900px 900px; }
}

/* Slow scale pulse on the nebula — subtle breathing */
@keyframes nebula-breath {
    0%, 100% { transform: scale(1);   opacity: 0.85; }
    50%      { transform: scale(1.06); opacity: 1.0; }
}

/* Respect users who prefer reduced motion */
/* Contact /article-extra section: constrain heading + text width */
.article-extra h2,
.article-extra .wp-block-heading {
    max-width: 720px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.article-extra p,
.article-extra .wp-block-paragraph {
    max-width: 720px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    body::after  { animation: none; }
}


/* ============ WORDPRESS CORE BLOCK STYLES ============ */
/* Make WP block buttons render as compact, wrapping inline-block elements
   with theme-aligned colors and white-space handling. Without this,
   buttons get 100% width and stack vertically with awkward text wrapping. */

.wp-block-button__link {
    display: inline-block;
    width: auto;
    max-width: 100%;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
    cursor: pointer;
    transition: filter 0.15s ease;
}
}
.wp-block-button__link:hover {
    filter: brightness(1.15);
}

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: var(--space-3, 16px) 0;
}

.wp-block-buttons > .wp-block-button {
    margin: 0;
}

/* "Service area" inline-bold paragraph — keep tight to preceding block */
.wp-block-paragraph strong:first-child {
    /* nothing — let it be */
}

/* FAQ list spacing */
.wp-block-list {
    margin: var(--space-3, 16px) 0;
    padding-left: 24px;
}
.wp-block-list li {
    margin-bottom: var(--space-2, 8px);
    line-height: 1.6;
}

/* ============ LEARNING CENTER GUIDES GRID ============ */
.guides-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.guide-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--fg-primary);
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.guide-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-dim), 0 8px 24px rgba(0, 229, 255, 0.12);
}

.guide-card .card-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.guide-card h3 {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--fg-primary);
}

.guide-card .go {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    letter-spacing: 0.04em;
}

@media (max-width: 720px) {
    .guides-grid { grid-template-columns: 1fr; }
}

/* ============ MANUS BUTTONS GRID ============ */
.manus-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    align-items: flex-start;
}

/* Hide the auto-inserted <br> tags between buttons (they break flex layout) */
.manus-buttons br {
    display: none !important;
}

.manus-btn {
    display: inline-flex !important;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-secondary) !important;
    background: rgba(22, 32, 58, 0.4);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 200ms ease;
    line-height: 1.3;
}

.manus-btn:hover {
    color: var(--fg-primary);
    background: var(--bg-elev);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--accent-dim), 0 4px 16px rgba(0, 229, 255, 0.12);
}

.manuscripts-section .section-desc {
    color: var(--fg-secondary);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-3, 12px);
    max-width: 560px;
}



/* "Find us on Google" section spacing fix — give h2 room below and the buttons room above */
h2.wp-block-heading {
    margin-top: var(--space-5, 32px);
    margin-bottom: var(--space-3, 16px);
}