/* ── Astra global color overrides ── */
:root {
    --ast-global-color-0: #00d4ff !important;
    --ast-global-color-1: rgba(0,212,255,0.12) !important;
    --ast-global-color-2: #07090f !important;
    --ast-global-color-3: #0a0c14 !important;
    --ast-global-color-4: #07090f !important;
    --ast-global-color-5: #0a0c14 !important;
    --ast-global-color-6: #c47a2b !important;
    --ast-global-color-7: #e8e8f0 !important;
    --ast-global-color-8: #07090f !important;
}
body,
.ast-separate-container,
.ast-plain-container,
.ast-page-builder-template,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .comment-respond,
.ast-separate-container .ast-comment-list li,
#primary, #secondary,
.site-content, .content-area,
.ast-container, .site-main,
.entry-content, .page-content {
    background-color: transparent !important;
}
body {
    background:
        radial-gradient(ellipse at top center, rgba(196,122,43,0.07) 0%, transparent 40%),
        radial-gradient(ellipse at bottom center, rgba(0,212,255,0.05) 0%, transparent 40%),
        linear-gradient(180deg, #07090f 0%, #06080e 100%) !important;
    color: #e8e8f0 !important;
}
h1, h2, h3, h4, h5, h6 { color: #eefcff !important; }
p, li, td, th, dd, dt, address { color: #b0b5ca; }
a { color: #00d4ff; }
.entry-title, .entry-title a { color: #eefcff !important; }

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ── Override Astra global colors to dark theme ── */
  --ast-global-color-0: #00d4ff;
  --ast-global-color-1: rgba(0, 212, 255, 0.12);
  --ast-global-color-2: #07090f;
  --ast-global-color-3: #0a0c14;
  --ast-global-color-4: #07090f;
  --ast-global-color-5: #0a0c14;
  --ast-global-color-6: #c47a2b;
  --ast-global-color-7: #e8e8f0;
  --ast-global-color-8: #07090f;

  /* ── TechTailor design tokens ── */
  --tt-bg-deep:       #07090f;
  --tt-bg-dark:       #06080e;
  --tt-bg-panel:      rgba(10, 12, 20, 0.95);
  --tt-bg-card:       rgba(6, 8, 14, 0.85);
  --tt-cyan:          #00d4ff;
  --tt-cyan-dim:      rgba(0, 212, 255, 0.12);
  --tt-cyan-glow:     rgba(0, 212, 255, 0.25);
  --tt-brass:         #c47a2b;
  --tt-brass-light:   #d4943a;
  --tt-brass-dim:     rgba(196, 122, 43, 0.25);
  --tt-text-bright:   #eefcff;
  --tt-text-primary:  #e8e8f0;
  --tt-text-body:     #b0b5ca;
  --tt-text-muted:    #a8adbe;
  --tt-text-dim:      #8d92a6;
  --tt-text-faint:    #7a7f94;
  --tt-text-ghost:    #4a4e62;
  --tt-border-subtle: rgba(40, 42, 58, 0.7);
  --tt-font-mono:     'Courier New', monospace;
  --tt-font-sans:     "Segoe UI", Inter, sans-serif;
  --tt-grid-size:     52px;
  --tt-radius-sm:     2px;
  --tt-radius-md:     4px;
  --tt-radius-lg:     6px;
}

/* ==========================================================================
   1. ANIMATIONS
   ========================================================================== */
@keyframes neonPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes brassGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(196, 122, 43, 0.15); }
  50%      { box-shadow: 0 0 16px rgba(196, 122, 43, 0.3); }
}
@keyframes scanLine {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(2000%); opacity: 0; }
}
@keyframes typeFlicker {
  0%, 95%, 100% { opacity: 1; }
  96%           { opacity: 0.7; }
}

/* ==========================================================================
   2. GLOBAL — Body, background, Tron grid
   ========================================================================== */
body {
  background:
    radial-gradient(ellipse at top center, rgba(196, 122, 43, 0.07) 0%, transparent 40%),
    radial-gradient(ellipse at bottom center, rgba(0, 212, 255, 0.05) 0%, transparent 40%),
    linear-gradient(180deg, var(--tt-bg-deep) 0%, var(--tt-bg-dark) 100%);
  color: var(--tt-text-primary);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: var(--tt-grid-size) var(--tt-grid-size);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 85%);
  z-index: 0;
}

/* ==========================================================================
   2b. ASTRA CONTAINER OVERRIDES — Kill all light backgrounds
   ========================================================================== */
.ast-separate-container,
.ast-plain-container,
.ast-page-builder-template,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-post:hover,
.ast-separate-container .comment-respond,
.ast-separate-container .ast-comment-list li,
.ast-separate-container .ast-woocommerce-container,
#primary,
#secondary,
.site-content,
.content-area {
  background-color: transparent !important;
}

/* Force dark on any Astra wrapper that might inherit light colors */
.ast-container,
.site-main,
.entry-content,
.page-content,
.ast-row {
  background: transparent !important;
  color: var(--tt-text-primary);
}

/* Astra heading colors */
h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.page-title,
.ast-archive-title {
  color: var(--tt-text-bright);
}

/* Default link color */
a { color: var(--tt-cyan); }
a:hover { color: var(--tt-cyan); text-shadow: 0 0 8px rgba(0, 212, 255, 0.3); }

/* Default paragraph/body text */
p, li, td, th, dd, dt, address, label, span {
  color: var(--tt-text-body);
}

/* ==========================================================================
   3. HEADER — Astra overrides
   ========================================================================== */
.ast-primary-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-desktop-header-content,
.ast-mobile-header-content {
  background: rgba(7, 9, 15, 0.88) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(196, 122, 43, 0.2) !important;
  box-shadow: 0 1px 0 rgba(0, 212, 255, 0.08);
}

.ast-primary-header-bar .site-primary-header-wrap.ast-container,
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-primary-header-bar > .ast-builder-grid-row-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.ast-primary-header-bar .ast-builder-grid-row {
  max-width: none !important;
}

/* Logo: hide the default img, show SVG via background */
header .custom-logo-link img {
  opacity: 0;
  width: 48px !important;
  height: 48px !important;
}
.site-logo-img .custom-logo-link {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  width: auto;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2072%2072%22%20fill=%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id=%22o15-bg%22%20x1=%228%22%20y1=%228%22%20x2=%2264%22%20y2=%2264%22%20gradientUnits=%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%220%22%20stop-color=%22%23161a22%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%221%22%20stop-color=%22%230f1115%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id=%22o15-brass%22%20x1=%2212%22%20y1=%2212%22%20x2=%2260%22%20y2=%2260%22%20gradientUnits=%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%220%22%20stop-color=%22%23d9a24f%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%221%22%20stop-color=%22%238b5e1a%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id=%22o15-neon%22%20x1=%2219%22%20y1=%2216%22%20x2=%2253%22%20y2=%2256%22%20gradientUnits=%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%220%22%20stop-color=%22%2300d4ff%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%220.5%22%20stop-color=%22%239b85ff%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%221%22%20stop-color=%22%237c5cff%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3Crect%20x=%228%22%20y=%228%22%20width=%2256%22%20height=%2256%22%20rx=%2210%22%20fill=%22url(%23o15-bg)%22%20stroke=%22url(%23o15-brass)%22%20stroke-width=%222.4%22/%3E%0A%20%20%3Cpath%20d=%22M18%2020H54%22%20stroke=%22%232a3142%22%20stroke-width=%221.2%22/%3E%0A%20%20%3Cpath%20d=%22M18%2052H54%22%20stroke=%22%232a3142%22%20stroke-width=%221.2%22/%3E%0A%20%20%3Cpath%20d=%22M22%2020V52%22%20stroke=%22%232a3142%22%20stroke-width=%221.2%22/%3E%0A%20%20%3Cpath%20d=%22M50%2020V52%22%20stroke=%22%232a3142%22%20stroke-width=%221.2%22/%3E%0A%20%20%3Cpath%20d=%22M23%2023H49%22%20stroke=%22url(%23o15-neon)%22%20stroke-width=%223.6%22%20stroke-linecap=%22round%22/%3E%0A%20%20%3Cpath%20d=%22M36%2020V52%22%20stroke=%22%232a3142%22%20stroke-width=%226%22%20stroke-linecap=%22round%22/%3E%0A%20%20%3Cpath%20d=%22M36%2020V52%22%20stroke=%22url(%23o15-brass)%22%20stroke-width=%224.2%22%20stroke-linecap=%22round%22/%3E%0A%20%20%3Cpath%20d=%22M21%2034C27%2028%2031%2030%2036%2036C40%2040%2045%2040%2051%2034%22%20stroke=%22url(%23o15-neon)%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%20%20%3Cpath%20d=%22M55%2034L50%2031L45%2034L50%2037L55%2034Z%22%20fill=%22%23e5e7eb%22%20stroke=%22%232a3142%22%20stroke-width=%221%22/%3E%0A%20%20%3Ccircle%20cx=%2250%22%20cy=%2234%22%20r=%220.9%22%20fill=%22%230f1115%22/%3E%0A%20%20%3Cpath%20d=%22M27%2046H45%22%20stroke=%22%237c5cff%22%20stroke-opacity=%220.4%22%20stroke-dasharray=%222%202%22/%3E%0A%20%20%3Ccircle%20cx=%2223%22%20cy=%2223%22%20r=%222%22%20fill=%22%2300d4ff%22/%3E%0A%20%20%3Ccircle%20cx=%2249%22%20cy=%2223%22%20r=%222%22%20fill=%22%239b85ff%22/%3E%0A%20%20%3Ccircle%20cx=%2236%22%20cy=%2252%22%20r=%222%22%20fill=%22%23d9a24f%22/%3E%0A%20%20%3Ccircle%20cx=%2216%22%20cy=%2216%22%20r=%221.5%22%20fill=%22%23d9a24f%22/%3E%0A%20%20%3Ccircle%20cx=%2256%22%20cy=%2216%22%20r=%221.5%22%20fill=%22%23d9a24f%22/%3E%0A%20%20%3Ccircle%20cx=%2216%22%20cy=%2256%22%20r=%221.5%22%20fill=%22%23d9a24f%22/%3E%0A%20%20%3Ccircle%20cx=%2256%22%20cy=%2256%22%20r=%221.5%22%20fill=%22%23d9a24f%22/%3E%0A%3C/svg%3E") left center / 48px 48px no-repeat;
}
.site-logo-img .custom-logo-link::after {
  content: "TECHTAILOR";
  font-family: var(--tt-font-mono);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: var(--tt-text-bright);
  white-space: nowrap;
}

/* Navigation links */
.main-header-menu > .menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {
  color: #c8cce0 !important;
  font-family: var(--tt-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.88rem;
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link {
  color: var(--tt-cyan) !important;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
}

/* Hide Astra CTA button */
.ast-custom-button-link,
.ast-header-button-1 {
  display: none !important;
}

/* ==========================================================================
   4. FOOTER — Astra overrides
   ========================================================================== */
.site-primary-footer-wrap { display: none; }

.site-below-footer-wrap {
  background: var(--tt-bg-dark) !important;
  border-top: 1px solid rgba(196, 122, 43, 0.18);
  box-shadow: 0 -1px 0 rgba(0, 212, 255, 0.06);
}
.site-below-footer-wrap .ast-builder-grid-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}
.ast-footer-copyright {
  color: var(--tt-text-ghost) !important;
  font-family: var(--tt-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.ast-footer-copyright a { color: #6a6e82; text-decoration: none; }

#astra-footer-menu .menu-item a,
.astra-footer-horizontal-menu .menu-item a {
  color: var(--tt-text-faint) !important;
  font-family: var(--tt-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s;
}
#astra-footer-menu .menu-item a:hover,
.astra-footer-horizontal-menu .menu-item a:hover {
  color: var(--tt-cyan) !important;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

/* ==========================================================================
   5. SHARED COMPONENTS — Used across pages
   ========================================================================== */

/* --- Section label tag --- */
.tt-section-label {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  font-family: var(--tt-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tt-brass);
  border: 1px solid var(--tt-brass-dim);
  border-radius: var(--tt-radius-sm);
  background: rgba(196, 122, 43, 0.06);
}

/* --- Panel: Brass-framed with corner brackets --- */
.tt-panel {
  position: relative;
  padding: 30px;
  border-radius: var(--tt-radius-lg);
  background: var(--tt-bg-panel);
  border: 1px solid rgba(196, 122, 43, 0.3);
  box-shadow:
    inset 0 0 25px rgba(0, 212, 255, 0.02),
    inset 0 1px 0 rgba(196, 122, 43, 0.12);
}
.tt-panel::before {
  content: "";
  position: absolute;
  top: 8px; left: 8px;
  width: 20px; height: 20px;
  border-top: 2px solid rgba(196, 122, 43, 0.5);
  border-left: 2px solid rgba(196, 122, 43, 0.5);
  pointer-events: none;
  z-index: 2;
}
.tt-panel::after {
  content: "";
  position: absolute;
  bottom: 8px; right: 8px;
  width: 20px; height: 20px;
  border-bottom: 2px solid rgba(196, 122, 43, 0.5);
  border-right: 2px solid rgba(196, 122, 43, 0.5);
  pointer-events: none;
  z-index: 2;
}
.tt-panel > * { position: relative; z-index: 1; }

/* --- Shell: Panel variant (articles, contact) --- */
.tt-shell {
  position: relative;
  padding: 30px;
  border-radius: var(--tt-radius-lg);
  background: var(--tt-bg-panel);
  border: 1px solid rgba(196, 122, 43, 0.25);
  box-shadow:
    inset 0 0 25px rgba(0, 212, 255, 0.02),
    inset 0 1px 0 rgba(196, 122, 43, 0.1);
}
.tt-shell::before {
  content: "";
  position: absolute;
  top: 8px; left: 8px;
  width: 20px; height: 20px;
  border-top: 2px solid rgba(196, 122, 43, 0.4);
  border-left: 2px solid rgba(196, 122, 43, 0.4);
  pointer-events: none;
}
.tt-shell::after {
  content: "";
  position: absolute;
  bottom: 8px; right: 8px;
  width: 20px; height: 20px;
  border-bottom: 2px solid rgba(196, 122, 43, 0.4);
  border-right: 2px solid rgba(196, 122, 43, 0.4);
  pointer-events: none;
}

/* --- Seam divider: Brass pipe with cyan light leak --- */
.tt-seam {
  position: relative;
  height: 3px;
  margin: 44px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196, 122, 43, 0.4) 15%,
    rgba(0, 212, 255, 0.6) 50%,
    rgba(196, 122, 43, 0.4) 85%,
    transparent 100%
  );
  border-radius: var(--tt-radius-sm);
}
.tt-seam::before {
  content: "";
  position: absolute;
  inset: -3px 20% -3px 20%;
  background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.15), transparent);
  filter: blur(4px);
}

/* --- Card --- */
.tt-card {
  position: relative;
  padding: 26px;
  border-radius: var(--tt-radius-lg);
  background: rgba(10, 12, 20, 0.9);
  border: 1px solid var(--tt-border-subtle);
  box-shadow: inset 0 1px 0 rgba(196, 122, 43, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.tt-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tt-brass), rgba(0, 212, 255, 0.4), var(--tt-brass));
  opacity: 0.5;
}
.tt-card:hover {
  border-color: rgba(0, 212, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(196, 122, 43, 0.08),
    0 0 20px rgba(0, 212, 255, 0.06);
}

/* --- Card kicker --- */
.tt-card-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--tt-brass);
  font-family: var(--tt-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --- Buttons --- */
.tt-button,
.tt-button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  padding: 14px 24px;
  border: 1px solid transparent;
  font-weight: 700;
  font-family: var(--tt-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: var(--tt-radius-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tt-button {
  background: linear-gradient(135deg, var(--tt-cyan) 0%, #0099cc 100%);
  color: #041019;
  box-shadow:
    0 0 15px var(--tt-cyan-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.tt-button:hover {
  transform: translateY(-2px);
  color: #041019;
  box-shadow:
    0 0 25px rgba(0, 212, 255, 0.4),
    0 8px 25px rgba(0, 212, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.tt-button-ghost {
  background: rgba(12, 14, 22, 0.9);
  color: var(--tt-brass-light);
  border-color: rgba(196, 122, 43, 0.5);
  box-shadow: inset 0 0 12px rgba(196, 122, 43, 0.06);
}
.tt-button-ghost:hover {
  transform: translateY(-2px);
  color: var(--tt-brass-light);
  border-color: rgba(196, 122, 43, 0.8);
  box-shadow:
    0 0 18px rgba(196, 122, 43, 0.2),
    inset 0 0 12px rgba(196, 122, 43, 0.06);
}

/* --- Brass rivet list --- */
.tt-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.tt-list li {
  margin: 0 0 16px;
  padding-left: 22px;
  position: relative;
  font-size: 0.95rem;
  color: var(--tt-text-muted);
  line-height: 1.6;
}
.tt-list li::before {
  content: "";
  position: absolute;
  top: 0.55em; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0c866, #c47a2b, #8b5e1a);
  box-shadow: 0 0 6px rgba(196, 122, 43, 0.4);
}

/* --- Eyebrow status badge --- */
.tt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(196, 122, 43, 0.3);
  border-radius: var(--tt-radius-md);
  color: var(--tt-brass);
  font-family: var(--tt-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(8, 16, 28, 0.7);
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.03);
}
.tt-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tt-cyan);
  box-shadow: 0 0 10px var(--tt-cyan), 0 0 20px rgba(0, 212, 255, 0.4);
  animation: neonPulse 2.5s ease-in-out infinite;
}

/* --- Status indicator (pulsing dot) --- */
.tt-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--tt-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tt-text-faint);
}
.tt-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tt-cyan);
  box-shadow: 0 0 8px var(--tt-cyan);
  animation: neonPulse 2.5s ease-in-out infinite;
}

/* --- Metric gauge readout --- */
.tt-metric {
  position: relative;
  padding: 16px 16px 16px 22px;
  border-radius: var(--tt-radius-md);
  background: rgba(6, 8, 14, 0.8);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-left: 3px solid var(--tt-cyan);
  box-shadow: inset 0 0 15px rgba(0, 212, 255, 0.03);
}
.tt-metric strong {
  display: block;
  margin-bottom: 4px;
  color: var(--tt-cyan);
  font-family: var(--tt-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}
.tt-metric span {
  display: block;
  color: #9da2b6;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* --- Strip: Cyan-bordered panel --- */
.tt-strip {
  padding: 30px;
  border-radius: var(--tt-radius-lg);
  background: var(--tt-bg-panel);
  border: 1px solid rgba(0, 212, 255, 0.18);
  box-shadow: inset 0 0 25px rgba(0, 212, 255, 0.03);
}

/* --- Mini card (about page) --- */
.tt-mini {
  position: relative;
  padding: 24px;
  border-radius: var(--tt-radius-lg);
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border-subtle);
  overflow: hidden;
}
.tt-mini::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tt-brass), rgba(0, 212, 255, 0.4), var(--tt-brass));
  opacity: 0.5;
}
.tt-mini strong {
  display: block;
  margin-bottom: 10px;
  color: var(--tt-cyan);
  font-family: var(--tt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

/* ==========================================================================
   6. HOME PAGE (.tt-home)
   ========================================================================== */
.tt-home {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
.tt-home a { color: inherit; text-decoration: none; }

/* Hero */
.tt-home .tt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 36px;
  align-items: stretch;
  padding: 32px 0 52px;
}
.tt-home .tt-hero-copy h1 {
  margin: 22px 0 20px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--tt-text-bright);
}
.tt-home .tt-hero-copy .tt-hl-cyan {
  color: var(--tt-cyan);
  text-shadow: 0 0 30px var(--tt-cyan-glow);
}
.tt-home .tt-hero-copy .tt-hl-brass {
  color: var(--tt-brass-light);
  text-shadow: 0 0 20px rgba(196, 122, 43, 0.2);
}
.tt-home .tt-hero-copy p {
  max-width: 40rem;
  margin: 0 0 30px;
  color: var(--tt-text-body);
  font-size: 1.08rem;
  line-height: 1.65;
}
.tt-home .tt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.tt-home .tt-panel {
  min-height: 100%;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    inset 0 0 30px rgba(0, 212, 255, 0.03),
    inset 0 1px 0 rgba(196, 122, 43, 0.15);
  border: 1px solid rgba(196, 122, 43, 0.35);
}
.tt-home .tt-panel h2,
.tt-home .tt-section h2 {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--tt-text-bright);
}
.tt-home .tt-panel p,
.tt-home .tt-section p,
.tt-home .tt-card p,
.tt-home .tt-list li {
  color: var(--tt-text-muted);
  line-height: 1.6;
}
.tt-home .tt-metrics {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.tt-home .tt-seam { margin: 44px 0; }
.tt-home .tt-section {
  margin-top: 8px;
  padding: 0;
}
.tt-home .tt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.tt-home .tt-card h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  color: #dde0f0;
  letter-spacing: -0.02em;
}
.tt-home .tt-two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  margin-top: 22px;
}

/* Latest writing */
.tt-home .tt-latest {
  margin-top: 8px;
  padding: 26px;
  border-radius: var(--tt-radius-lg);
  background: rgba(6, 8, 14, 0.9);
  border: 1px solid var(--tt-cyan-dim);
  box-shadow: inset 0 0 30px rgba(0, 212, 255, 0.02);
}
.tt-home .tt-latest h2 { font-family: var(--tt-font-mono); }
.tt-home .tt-latest .wp-block-latest-posts {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.tt-home .tt-latest .wp-block-latest-posts li {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(196, 122, 43, 0.1);
}
.tt-home .tt-latest .wp-block-latest-posts li:last-child {
  margin-bottom: 0; padding-bottom: 0; border-bottom: 0;
}
.tt-home .tt-latest .wp-block-latest-posts a {
  color: var(--tt-text-bright);
  font-weight: 700;
  transition: color 0.2s;
}
.tt-home .tt-latest .wp-block-latest-posts a:hover {
  color: var(--tt-cyan);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}
.tt-home .tt-latest .wp-block-latest-posts__post-excerpt,
.tt-home .tt-latest .wp-block-latest-posts__post-date {
  color: var(--tt-text-faint);
}
.tt-home .tt-latest .wp-block-latest-posts__post-date {
  font-family: var(--tt-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--tt-brass);
}

/* ==========================================================================
   7. ABOUT PAGE (.tt-about)
   ========================================================================== */
.tt-about {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
.tt-about .tt-shell {
  display: grid;
  gap: 18px;
  /* Reset the default shell border/bg — the children handle their own */
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.tt-about .tt-shell::before,
.tt-about .tt-shell::after { display: none; }

.tt-about h1,
.tt-about h2 {
  margin: 0 0 14px;
  color: var(--tt-text-bright);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.tt-about h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.tt-about h1 .tt-hl-brass {
  color: var(--tt-brass-light);
  text-shadow: 0 0 20px rgba(196, 122, 43, 0.2);
}
.tt-about h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
.tt-about p { color: var(--tt-text-muted); font-size: 1.08rem; line-height: 1.65; }
.tt-about .tt-seam { margin: 0; }

.tt-about .tt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Timeline */
.tt-about .tt-timeline {
  position: relative;
  padding-left: 28px;
  margin-top: 18px;
}
.tt-about .tt-timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 4px;
  width: 2px;
  background: linear-gradient(180deg, var(--tt-brass), rgba(0, 212, 255, 0.4), var(--tt-brass));
  border-radius: 1px;
}
.tt-about .tt-timeline-item {
  position: relative;
  margin-bottom: 22px;
}
.tt-about .tt-timeline-item::before {
  content: "";
  position: absolute;
  left: -28px; top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0c866, #c47a2b);
  box-shadow: 0 0 8px rgba(196, 122, 43, 0.5);
}
.tt-about .tt-timeline-item strong {
  display: block;
  color: var(--tt-brass-light);
  font-family: var(--tt-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tt-about .tt-timeline-item p { margin: 0; font-size: 0.95rem; }

/* Manifesto */
.tt-about .tt-manifesto {
  padding: 30px;
  border-radius: var(--tt-radius-lg);
  background: rgba(6, 8, 14, 0.9);
  border: 1px solid rgba(0, 212, 255, 0.14);
  box-shadow: inset 0 0 30px rgba(0, 212, 255, 0.03);
}
.tt-about .tt-manifesto h2 {
  color: var(--tt-cyan);
  text-shadow: 0 0 18px rgba(0, 212, 255, 0.2);
}
.tt-about .tt-manifesto p { font-size: 1rem; line-height: 1.7; }

/* ==========================================================================
   8. WORK PAGE (.tt-work)
   ========================================================================== */
.tt-work {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
.tt-work .tt-shell {
  display: grid;
  gap: 18px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.tt-work .tt-shell::before,
.tt-work .tt-shell::after { display: none; }

.tt-work h1,
.tt-work h2 { margin: 0 0 12px; color: var(--tt-text-bright); text-transform: uppercase; letter-spacing: -0.03em; }
.tt-work h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.tt-work h1 .tt-hl-cyan { color: var(--tt-cyan); text-shadow: 0 0 25px var(--tt-cyan-glow); }
.tt-work p, .tt-work li { color: var(--tt-text-muted); line-height: 1.6; }
.tt-work .tt-seam { margin: 0; }

.tt-work .tt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.tt-work .tt-grid > div {
  position: relative;
  padding: 28px;
  border-radius: var(--tt-radius-lg);
  background: rgba(6, 8, 14, 0.9);
  border: 1px solid var(--tt-border-subtle);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tt-work .tt-grid > div::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tt-brass), rgba(0, 212, 255, 0.5), var(--tt-brass));
  opacity: 0.5;
}
.tt-work .tt-grid > div:hover {
  border-color: rgba(0, 212, 255, 0.15);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.05);
}
.tt-work .tt-grid h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  color: var(--tt-cyan);
  font-family: var(--tt-font-mono);
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}
.tt-work ul { margin: 12px 0 0; padding: 0; list-style: none; }
.tt-work li {
  margin: 0 0 10px;
  padding-left: 20px;
  position: relative;
  font-size: 0.95rem;
}
.tt-work li::before {
  content: "";
  position: absolute;
  top: 0.55em; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0c866, #c47a2b);
  box-shadow: 0 0 5px rgba(196, 122, 43, 0.4);
}

/* ==========================================================================
   9. CONTACT PAGE (.tt-contact)
   ========================================================================== */
.tt-contact {
  position: relative;
  z-index: 1;
  max-width: 840px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
.tt-contact .tt-shell { padding: 36px; }
.tt-contact h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--tt-text-bright);
}
.tt-contact h1 .tt-hl-cyan { color: var(--tt-cyan); text-shadow: 0 0 25px var(--tt-cyan-glow); }
.tt-contact p { color: var(--tt-text-muted); line-height: 1.65; }
.tt-contact .tt-tagline {
  display: inline-block;
  margin-top: 4px;
  color: var(--tt-brass);
  font-family: var(--tt-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  font-style: italic;
}
.tt-contact .tt-seam { height: 2px; margin: 24px 0; }
.tt-contact .tt-signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--tt-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tt-text-faint);
}
.tt-contact .tt-signal::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tt-cyan);
  box-shadow: 0 0 8px var(--tt-cyan);
  animation: neonPulse 2.5s ease-in-out infinite;
}
.tt-contact .tt-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.tt-contact a.tt-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-md);
  text-decoration: none;
  font-weight: 700;
  font-family: var(--tt-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tt-contact a.tt-primary {
  background: linear-gradient(135deg, var(--tt-cyan) 0%, #0099cc 100%);
  color: #041019;
  box-shadow: 0 0 15px var(--tt-cyan-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}
.tt-contact a.tt-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.4), 0 8px 25px rgba(0, 212, 255, 0.15);
}
.tt-contact a.tt-secondary {
  color: var(--tt-brass-light);
  background: rgba(12, 14, 22, 0.9);
  border-color: rgba(196, 122, 43, 0.45);
  box-shadow: inset 0 0 12px rgba(196, 122, 43, 0.05);
}
.tt-contact a.tt-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 122, 43, 0.7);
  box-shadow: 0 0 18px rgba(196, 122, 43, 0.2);
}

/* ==========================================================================
   10. ARTICLES ARCHIVE (.tt-articles) — hand-built index page
   ========================================================================== */
.tt-articles {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
.tt-articles > .tt-shell > p { color: var(--tt-text-muted); line-height: 1.6; }
.tt-articles h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--tt-text-bright);
}

/* Article grid */
.tt-articles-grid {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

/* Article card */
.tt-article-card {
  position: relative;
  padding: 22px 22px 22px 26px;
  border-radius: var(--tt-radius-md);
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border-subtle);
  border-left: 3px solid rgba(196, 122, 43, 0.35);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}
.tt-article-card:hover {
  border-left-color: var(--tt-cyan);
  box-shadow:
    0 0 15px rgba(0, 212, 255, 0.06),
    inset 0 0 20px rgba(0, 212, 255, 0.02);
  transform: translateX(4px);
}
.tt-article-card h2 {
  margin: 6px 0 8px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.tt-article-card a {
  color: #dde0f0;
  text-decoration: none;
  transition: color 0.2s;
}
.tt-article-card a:hover {
  color: var(--tt-cyan);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}
.tt-article-card p { color: var(--tt-text-dim); font-size: 0.92rem; line-height: 1.5; margin: 0; }

/* Date readout */
.tt-article-date {
  display: inline-block;
  color: var(--tt-brass);
  font-family: var(--tt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}

/* Series badge */
.tt-series-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-family: var(--tt-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-cyan);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: var(--tt-radius-sm);
  background: rgba(0, 212, 255, 0.06);
  vertical-align: middle;
}
.tt-series-order {
  display: inline-block;
  min-width: 22px; height: 22px;
  line-height: 22px;
  text-align: center;
  margin-right: 8px;
  font-family: var(--tt-font-mono);
  font-size: 0.72rem;
  font-weight: bold;
  color: var(--tt-cyan);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.08);
  vertical-align: middle;
}

/* Series group */
.tt-series-group {
  margin-top: 32px;
  padding: 22px;
  border-radius: var(--tt-radius-lg);
  border: 1px solid var(--tt-cyan-dim);
  background: rgba(0, 212, 255, 0.02);
}
.tt-series-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}
.tt-series-group-header h3 {
  margin: 0;
  font-family: var(--tt-font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tt-cyan);
}
.tt-series-group-header span { color: var(--tt-text-dim); font-size: 0.82rem; }
.tt-series-group .tt-articles-grid { margin-top: 0; }

/* Category/tag filter bar */
.tt-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}
.tt-filter-bar a {
  padding: 5px 14px;
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-sm);
  color: var(--tt-text-faint);
  font-family: var(--tt-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
}
.tt-filter-bar a:hover,
.tt-filter-bar a.active {
  color: var(--tt-cyan);
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.06);
}

/* ==========================================================================
   11. SINGLE ARTICLE PAGE (.tt-article-page)
   ========================================================================== */
.tt-article-page {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}
.tt-article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--tt-brass);
  text-decoration: none;
  font-family: var(--tt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  transition: color 0.2s;
}
.tt-article-back:hover {
  color: var(--tt-cyan);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}
.tt-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}
.tt-article-main {
  position: relative;
  padding: 34px;
  border-radius: var(--tt-radius-lg);
  background: var(--tt-bg-panel);
  border: 1px solid rgba(196, 122, 43, 0.25);
  box-shadow: inset 0 0 25px rgba(0, 212, 255, 0.02), inset 0 1px 0 rgba(196, 122, 43, 0.1);
}
.tt-article-main::before {
  content: "";
  position: absolute;
  top: 8px; left: 8px;
  width: 18px; height: 18px;
  border-top: 2px solid rgba(196, 122, 43, 0.4);
  border-left: 2px solid rgba(196, 122, 43, 0.4);
  pointer-events: none;
}
.tt-article-main::after {
  content: "";
  position: absolute;
  bottom: 8px; right: 8px;
  width: 18px; height: 18px;
  border-bottom: 2px solid rgba(196, 122, 43, 0.4);
  border-right: 2px solid rgba(196, 122, 43, 0.4);
  pointer-events: none;
}
.tt-article-title {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--tt-text-bright);
}
.tt-article-copy {
  color: var(--tt-text-body);
  font-size: 1.05rem;
  line-height: 1.7;
}
.tt-article-copy h2,
.tt-article-copy h3,
.tt-article-copy h4 {
  margin: 1.8em 0 0.55em;
  color: var(--tt-text-bright);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.tt-article-copy h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.tt-article-copy h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.tt-article-copy p,
.tt-article-copy li { color: var(--tt-text-body); }
.tt-article-copy a {
  color: var(--tt-cyan);
  text-decoration: none;
  transition: color 0.2s;
}
.tt-article-copy a:hover { text-shadow: 0 0 8px rgba(0, 212, 255, 0.3); }
.tt-article-copy hr {
  margin: 2rem 0;
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(196, 122, 43, 0.3) 20%, rgba(0, 212, 255, 0.4) 50%, rgba(196, 122, 43, 0.3) 80%, transparent);
}
.tt-article-copy pre,
.tt-article-copy code { font-family: var(--tt-font-mono); }
.tt-article-copy pre {
  overflow-x: auto;
  padding: 18px;
  border-radius: var(--tt-radius-md);
  background: rgba(6, 8, 14, 0.9);
  border: 1px solid rgba(0, 212, 255, 0.08);
  border-left: 3px solid rgba(196, 122, 43, 0.3);
}
.tt-article-copy blockquote {
  margin: 1.5em 0;
  padding: 16px 24px;
  border-left: 3px solid var(--tt-brass);
  background: rgba(196, 122, 43, 0.04);
  border-radius: 0 var(--tt-radius-md) var(--tt-radius-md) 0;
  color: var(--tt-text-body);
  font-style: italic;
}

/* Sidebar */
.tt-article-sidebar {
  padding: 24px;
  border-radius: var(--tt-radius-lg);
  background: rgba(6, 8, 14, 0.9);
  border: 1px solid var(--tt-cyan-dim);
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.02);
  position: sticky;
  top: 100px;
}
.tt-article-sidebar h2 {
  margin: 0 0 14px;
  color: var(--tt-text-bright);
  font-family: var(--tt-font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tt-article-sidebar ul { margin: 0; padding: 0; list-style: none; }
.tt-article-sidebar li + li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(196, 122, 43, 0.12);
}
.tt-article-sidebar a {
  color: #c8cce0;
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s;
}
.tt-article-sidebar a:hover {
  color: var(--tt-cyan);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

/* Category & tag links on single article */
.tt-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.tt-article-meta a {
  padding: 3px 10px;
  border: 1px solid var(--tt-brass-dim);
  border-radius: var(--tt-radius-sm);
  color: var(--tt-brass);
  font-family: var(--tt-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
}
.tt-article-meta a:hover {
  color: var(--tt-cyan);
  border-color: rgba(0, 212, 255, 0.3);
}
.tt-article-meta .tt-tag {
  border-color: var(--tt-border-subtle);
  color: var(--tt-text-dim);
}

/* ==========================================================================
   12. WORDPRESS NATIVE — Blog, archive, search, categories, tags
   ========================================================================== */

/* Hide Astra default entry header on pages using our custom layout */
body.page .entry-header { display: none !important; }

/* Kill Astra's entry banner and above/below header gaps */
.ast-single-entry-banner,
.ast-single-entry-banner-layout,
.ast-archive-entry-banner,
[class*="entry-banner"] { display: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; }

/* Hide redundant entry-header on blog/archive (shows "Leave a Comment" etc.) */
body.blog .entry-header,
body.archive .entry-header,
body.search .entry-header { display: none !important; }

/* ── NUKE ALL EXCESS SPACING site-wide ── */
.ast-container { padding-top: 0 !important; }
.site-content { padding-top: 0 !important; margin-top: 0 !important; }
.site-main { margin-top: 0 !important; padding-top: 0 !important; }
#primary { padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 1em !important; }
.ast-primary-content { padding-top: 0 !important; }
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post { padding: 24px !important; }
.ast-above-header-wrap,
.ast-below-header-wrap { display: none !important; }

/* --- Blog / Archive page --- */
body.blog .site-content,
body.archive .site-content,
body.search .site-content {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 24px 48px !important;
  position: relative;
  z-index: 1;
}

/* Archive/search page title */
.ast-archive-description {
  margin-bottom: 28px;
  padding: 24px 30px;
  border-radius: var(--tt-radius-lg);
  background: var(--tt-bg-panel);
  border: 1px solid rgba(196, 122, 43, 0.25);
}
.ast-archive-description .ast-archive-title,
.ast-archive-description .page-title {
  color: var(--tt-text-bright) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.ast-archive-description p {
  color: var(--tt-text-muted);
}

/* Post cards in blog/archive */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
  background: var(--tt-bg-card) !important;
  border: 1px solid var(--tt-border-subtle);
  border-left: 3px solid rgba(196, 122, 43, 0.35);
  border-radius: var(--tt-radius-md);
  padding: 22px 22px 22px 26px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ast-separate-container .ast-article-post:hover {
  border-left-color: var(--tt-cyan);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.06);
  transform: translateX(4px);
}

/* Entry titles in blog */
.ast-article-post .entry-title,
.ast-article-post .entry-title a {
  color: #dde0f0 !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  text-decoration: none;
  transition: color 0.2s;
}
.ast-article-post .entry-title a:hover {
  color: var(--tt-cyan) !important;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

/* Entry meta (date, categories, tags) */
.ast-article-post .entry-meta,
.ast-article-post .entry-meta * {
  color: var(--tt-text-faint) !important;
  font-family: var(--tt-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.ast-article-post .entry-meta .posted-on,
.ast-article-post .entry-meta .posted-on * {
  color: var(--tt-brass) !important;
}
.ast-article-post .entry-meta a {
  color: var(--tt-text-faint) !important;
  text-decoration: none;
}
.ast-article-post .entry-meta a:hover {
  color: var(--tt-cyan) !important;
}

/* Category and tag links in post meta */
.ast-article-post .cat-links a,
.ast-article-single .cat-links a {
  color: var(--tt-brass) !important;
}
.ast-article-post .tags-links a,
.ast-article-single .tags-links a {
  color: var(--tt-text-dim) !important;
  border: 1px solid var(--tt-border-subtle);
  padding: 2px 8px;
  border-radius: var(--tt-radius-sm);
  font-size: 0.7rem;
}

/* Excerpt text */
.ast-article-post .entry-content p,
.ast-article-post .ast-excerpt-container p {
  color: var(--tt-text-dim) !important;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Read more link */
.ast-article-post .read-more a,
.ast-read-more-container a {
  color: var(--tt-cyan) !important;
  font-family: var(--tt-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Single post body */
body.single-post .site-content {
  position: relative;
  z-index: 1;
}
body.single-post .ast-article-single {
  background: var(--tt-bg-panel) !important;
  border: 1px solid rgba(196, 122, 43, 0.25);
  border-radius: var(--tt-radius-lg);
}
body.single-post .entry-title {
  color: var(--tt-text-bright) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
body.single-post .entry-content {
  color: var(--tt-text-body);
  font-size: 1.05rem;
  line-height: 1.7;
}
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4 {
  color: var(--tt-text-bright);
  letter-spacing: -0.02em;
}
body.single-post .entry-content a {
  color: var(--tt-cyan);
  text-decoration: none;
}
body.single-post .entry-content a:hover {
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}
body.single-post .entry-content blockquote {
  border-left: 3px solid var(--tt-brass);
  background: rgba(196, 122, 43, 0.04);
  padding: 16px 24px;
  border-radius: 0 var(--tt-radius-md) var(--tt-radius-md) 0;
  font-style: italic;
}

/* Post navigation (prev/next) */
.ast-single-post-order .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ast-single-post-order .nav-links a {
  display: block;
  padding: 16px;
  border-radius: var(--tt-radius-md);
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border-subtle);
  color: #c8cce0;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.ast-single-post-order .nav-links a:hover {
  border-color: rgba(0, 212, 255, 0.2);
  color: var(--tt-cyan);
}

/* Pagination */
.ast-pagination,
.pagination {
  margin-top: 32px;
  text-align: center;
}
.ast-pagination .page-numbers,
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  margin: 0 4px;
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-sm);
  color: var(--tt-text-faint);
  font-family: var(--tt-font-mono);
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.2s;
}
.ast-pagination .page-numbers.current,
.pagination .page-numbers.current,
.ast-pagination .page-numbers:hover,
.pagination .page-numbers:hover {
  color: var(--tt-cyan);
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.06);
}

/* --- Search form --- */
.search-form {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
/* Search field — visible border + slightly lighter bg so it stands out */
.search-form .search-field,
.wp-block-search__input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(196, 122, 43, 0.35) !important;
  border-radius: var(--tt-radius-md);
  background: rgba(14, 18, 28, 0.95) !important;
  color: var(--tt-text-primary) !important;
  font-family: var(--tt-font-mono);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-form .search-field:focus,
.wp-block-search__input:focus {
  border-color: var(--tt-cyan) !important;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}
.search-form .search-field::placeholder,
.wp-block-search__input::placeholder {
  color: var(--tt-text-faint) !important;
}
/* Search button */
.wp-block-search__button {
  padding: 12px 20px !important;
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
  border-radius: var(--tt-radius-md) !important;
  background: rgba(0, 212, 255, 0.08) !important;
  color: var(--tt-cyan) !important;
  font-family: var(--tt-font-mono);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}
.wp-block-search__button:hover {
  background: rgba(0, 212, 255, 0.15) !important;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}
.search-form .search-submit {
  padding: 12px 20px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: var(--tt-radius-md);
  background: rgba(0, 212, 255, 0.08);
  color: var(--tt-cyan);
  font-family: var(--tt-font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.search-form .search-submit:hover {
  background: rgba(0, 212, 255, 0.15);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}

/* No results */
.no-results .page-content {
  color: var(--tt-text-muted);
}

/* Widget areas (sidebar) */
.widget-area .widget {
  margin-bottom: 24px;
  padding: 20px;
  border-radius: var(--tt-radius-lg);
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border-subtle);
}
.widget-area .widget-title {
  color: var(--tt-text-bright);
  font-family: var(--tt-font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.widget-area .widget a {
  color: #c8cce0;
  text-decoration: none;
  transition: color 0.2s;
}
.widget-area .widget a:hover {
  color: var(--tt-cyan);
}

/* Tag cloud */
.tagcloud a {
  display: inline-block;
  padding: 4px 10px;
  margin: 3px;
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-radius-sm);
  color: var(--tt-text-dim) !important;
  font-size: 0.78rem !important;
  font-family: var(--tt-font-mono);
  text-decoration: none;
  transition: all 0.2s;
}
.tagcloud a:hover {
  color: var(--tt-cyan) !important;
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.06);
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .tt-article-layout {
    grid-template-columns: 1fr;
  }
  .tt-article-sidebar {
    position: static;
  }
}

@media (max-width: 920px) {
  .tt-home .tt-hero,
  .tt-home .tt-grid,
  .tt-home .tt-two-col {
    grid-template-columns: 1fr;
  }
  .tt-home .tt-metrics {
    grid-template-columns: 1fr;
  }
  .tt-about .tt-grid {
    grid-template-columns: 1fr;
  }
  .tt-work .tt-grid {
    grid-template-columns: 1fr;
  }
}