/* ============================================================
   The Gear Lady — Brand stylesheet for thegearlady.com
   Compiled 2026-07-10 from the Claude Design project
   "The Gear Lady Design System" (tokens/colors, typography,
   spacing, fonts).

   SCOPING CONTRACT: every visual rule lives under `.gl-article`.
   Existing site pages are untouched. pSEO pipeline articles opt
   in by wrapping the article body:  <div class="gl-article"> … </div>
   ============================================================ */

/* Self-hosted fonts (site CSP blocks fonts.googleapis.com) */
@import url('fonts.css');

:root {
  --gl-forest-900: #24371f;
  --gl-forest-700: #354f30;
  --gl-forest-500: #4a6b42;
  --gl-forest-300: #7d9675;
  --gl-leaf-700: #7a8f2c;
  --gl-leaf-500: #97b036;
  --gl-leaf-300: #b9cd6f;
  --gl-leaf-100: #e9efd0;
  --gl-sun-700: #d6820f;
  --gl-sun-500: #ef9b2d;
  --gl-sun-300: #f6bd6e;
  --gl-sun-100: #fceccf;
  --gl-sky-700: #2b7d97;
  --gl-sky-500: #3b9ebc;
  --gl-sky-300: #85c4d6;
  --gl-sky-100: #dceef3;
  --gl-coral-700: #d9573a;
  --gl-coral-500: #f0704e;
  --gl-coral-300: #f7a893;
  --gl-coral-100: #fde3db;
  --gl-navy-900: #081826;
  --gl-navy-700: #0e2438;
  --gl-navy-500: #1b3a54;
  --gl-white: #ffffff;
  --gl-cream: #faf6ef;
  --gl-sand: #f2ece1;
  --gl-stone-100: #eae4d9;
  --gl-stone-200: #d9d1c4;
  --gl-stone-300: #b9b0a1;
  --gl-stone-400: #8f877a;
  --gl-stone-500: #6b6459;
  --gl-ink: #2a2620;
  --gl-text-heading: var(--gl-forest-700);
  --gl-text-body: var(--gl-ink);
  --gl-text-muted: var(--gl-stone-500);
  --gl-text-link: var(--gl-sky-700);
  --gl-text-link-hover: var(--gl-coral-700);
  --gl-cta: var(--gl-coral-500);
  --gl-cta-hover: var(--gl-coral-700);
  --gl-font-display: 'Anton', 'Arial Narrow', sans-serif;
  --gl-font-body: 'Montserrat', system-ui, sans-serif;
  --gl-font-mono: 'Space Mono', ui-monospace, monospace;
  --gl-radius-sm: 6px;
  --gl-radius-md: 10px;
  --gl-radius-lg: 16px;
  --gl-radius-pill: 999px;
  --gl-shadow-sm: 0 2px 6px rgba(42, 38, 32, 0.08);
  --gl-shadow-md: 0 8px 20px rgba(42, 38, 32, 0.10);
  --gl-shadow-cta: 0 8px 18px rgba(240, 112, 78, 0.35);
  --gl-gradient-trail: linear-gradient(115deg, #f6c17a 0%, #cfe08a 30%, #a9dbe0 55%, #b8e0a0 78%, #f2a58a 100%);
}

/* ============ Article base typography ============ */

.gl-article {
  font-family: var(--gl-font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gl-text-body);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.gl-article h2,
.gl-article h3,
.gl-article h4 {
  font-family: var(--gl-font-body);
  color: var(--gl-text-heading);
  line-height: 1.2;
  margin: 2rem 0 0.75rem;
}

.gl-article h2 {
  font-size: 1.75rem;
  font-weight: 800;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gl-leaf-300);
}

.gl-article h3 { font-size: 1.375rem; font-weight: 700; }
.gl-article h4 { font-size: 1.125rem; font-weight: 700; }

.gl-article p { margin: 0 0 1rem; }

.gl-article a {
  color: var(--gl-text-link);
  text-decoration: underline;
  text-decoration-color: var(--gl-sky-300);
  text-underline-offset: 2px;
  transition: color 120ms ease;
}

.gl-article a:hover { color: var(--gl-text-link-hover); }

.gl-article ul,
.gl-article ol { margin: 0 0 1rem; padding-left: 1.5rem; }

.gl-article li { margin-bottom: 0.5rem; }

.gl-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gl-radius-lg);
  box-shadow: var(--gl-shadow-md);
  margin: 1.5rem 0;
}

.gl-article blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  background: var(--gl-sand);
  border-left: 4px solid var(--gl-leaf-500);
  border-radius: 0 var(--gl-radius-md) var(--gl-radius-md) 0;
  font-style: italic;
}

.gl-article strong { font-weight: 700; color: var(--gl-forest-900); }

/* ============ Tables (comparison tables) ============ */

.gl-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  border-radius: var(--gl-radius-md);
  overflow: hidden;
  box-shadow: var(--gl-shadow-sm);
}

.gl-article th {
  background: var(--gl-forest-700);
  color: var(--gl-white);
  font-weight: 700;
  text-align: left;
  padding: 0.75rem 1rem;
}

.gl-article td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gl-stone-200);
  background: var(--gl-white);
}

.gl-article tr:nth-child(even) td { background: var(--gl-cream); }

/* ============ CTA buttons (affiliate links) ============ */

.gl-article .gl-cta,
.gl-article a.gl-cta {
  display: inline-block;
  background: var(--gl-cta);
  color: var(--gl-white);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.875rem 2rem;
  border-radius: var(--gl-radius-pill);
  box-shadow: var(--gl-shadow-cta);
  text-decoration: none;
  transition: background 120ms ease, transform 120ms ease;
}

.gl-article .gl-cta:hover {
  background: var(--gl-cta-hover);
  color: var(--gl-white);
  transform: translateY(-1px);
}

/* ============ Verdict / callout boxes ============ */

.gl-article .gl-verdict {
  background: var(--gl-leaf-100);
  border: 2px solid var(--gl-leaf-500);
  border-radius: var(--gl-radius-lg);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.gl-article .gl-callout {
  background: var(--gl-sky-100);
  border-left: 4px solid var(--gl-sky-500);
  border-radius: 0 var(--gl-radius-md) var(--gl-radius-md) 0;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

.gl-article .gl-warning {
  background: var(--gl-sun-100);
  border-left: 4px solid var(--gl-sun-500);
  border-radius: 0 var(--gl-radius-md) var(--gl-radius-md) 0;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

/* ============ Pros / cons ============ */

.gl-article .gl-pros,
.gl-article .gl-cons {
  border-radius: var(--gl-radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}

.gl-article .gl-pros {
  background: var(--gl-leaf-100);
  border: 1px solid var(--gl-leaf-300);
}

.gl-article .gl-cons {
  background: var(--gl-coral-100);
  border: 1px solid var(--gl-coral-300);
}

.gl-article .gl-pros ul,
.gl-article .gl-cons ul { list-style: none; padding-left: 0; margin-bottom: 0; }

.gl-article .gl-pros li::before { content: "\2713 "; color: var(--gl-leaf-700); font-weight: 700; }
.gl-article .gl-cons li::before { content: "\2715 "; color: var(--gl-coral-700); font-weight: 700; }

/* ============ Product pick card ============ */

.gl-article .gl-pick {
  background: var(--gl-white);
  border: 2px solid var(--gl-forest-300);
  border-radius: var(--gl-radius-lg);
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: var(--gl-shadow-md);
}

.gl-article .gl-pick-badge {
  display: inline-block;
  background: var(--gl-sun-500);
  color: var(--gl-navy-900);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.25rem 1rem;
  border-radius: var(--gl-radius-pill);
  margin-bottom: 0.75rem;
}

/* ============ Price / spec styling ============ */

.gl-article .gl-price,
.gl-article .gl-spec {
  font-family: var(--gl-font-mono);
  font-weight: 700;
  color: var(--gl-forest-700);
}

/* ============ FAQ ============ */

.gl-article .gl-faq-q {
  font-weight: 700;
  color: var(--gl-forest-700);
  margin-top: 1.25rem;
}