/*
Theme Name: Growth Engine
Theme URI: https://app.growth.previewapps.org
Author: Growth Engine
Author URI: https://app.growth.previewapps.org
Description: Quiet-luxury editorial WordPress theme tuned for Growth Engine published articles. Minimal, mobile-first, no JavaScript dependencies, no webfont downloads — installs and works without configuration. Supports custom logo, tagline, and a single accent colour from the Customizer.
Version: 0.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: growth-engine
Tags: blog, one-column, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready
*/

/* =============================================================================
   Design tokens
   ----------------------------------------------------------------------------
   Single source of truth. The accent colour is the only token mutated by the
   Customizer (via inline <style> in functions.php), everything else is fixed
   so the theme reads consistently regardless of admin tinkering.
   ========================================================================== */

:root {
  --ge-paper:   #FAFAF7;
  --ge-paper-2: #F2F0EA;
  --ge-ink-1:   #161616;
  --ge-ink-2:   #2A2A2A;
  --ge-ink-3:   #6B6B6B;
  --ge-ink-4:   #9A9A93;
  --ge-line:    #E6E3DC;
  --ge-accent:  #C2410C; /* may be overridden inline by Customizer */
  --ge-accent-soft: rgba(194, 65, 12, 0.10);

  --ge-font-display:
    "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia,
    "Times New Roman", serif;
  --ge-font-body:
    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --ge-font-mono:
    ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono",
    "Fira Code", Menlo, Consolas, monospace;

  --ge-content-w: 720px;
  --ge-wide-w:    1100px;
  --ge-radius:    6px;
}

/* =============================================================================
   Reset (light, opinionated)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ge-paper);
  color: var(--ge-ink-1);
  font-family: var(--ge-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 2px; }
a:hover { color: var(--ge-accent); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--ge-accent); color: #fff; }

/* a11y skip link */
.ge-skip {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.ge-skip:focus {
  position: fixed;
  top: 1em; left: 1em;
  width: auto; height: auto;
  padding: 0.5em 0.9em;
  background: var(--ge-ink-1);
  color: var(--ge-paper);
  z-index: 10000;
  border-radius: var(--ge-radius);
}

/* =============================================================================
   Layout primitives
   ========================================================================== */

.ge-wrap        { max-width: var(--ge-content-w); margin: 0 auto; padding: 0 20px; }
.ge-wrap-wide   { max-width: var(--ge-wide-w);    margin: 0 auto; padding: 0 24px; }

/* =============================================================================
   Site header
   ========================================================================== */

.ge-site-header {
  border-bottom: 1px solid var(--ge-line);
  background: var(--ge-paper);
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  background: rgba(250, 250, 247, 0.85);
}
.ge-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}
.ge-brand {
  font-family: var(--ge-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ge-ink-1);
  text-decoration: none;
  white-space: nowrap;
}
.ge-brand:hover { color: var(--ge-ink-1); }
.ge-brand img { max-height: 36px; width: auto; }

.ge-nav { display: flex; align-items: center; gap: 6px; }
.ge-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}
.ge-nav a {
  display: inline-block;
  padding: 8px 12px;
  font-size: 14px;
  letter-spacing: 0.005em;
  color: var(--ge-ink-2);
  text-decoration: none;
  border-radius: 4px;
}
.ge-nav a:hover { background: var(--ge-paper-2); color: var(--ge-ink-1); }
.ge-nav .current-menu-item > a,
.ge-nav .current_page_item > a { color: var(--ge-ink-1); font-weight: 600; }

.ge-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ge-line);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .ge-nav-toggle { display: inline-block; }
  .ge-nav ul {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 12px;
    background: var(--ge-paper);
    border-bottom: 1px solid var(--ge-line);
  }
  .ge-nav.is-open ul { display: flex; }
  .ge-nav a { padding: 12px; }
}

/* =============================================================================
   Hero (front page)
   ========================================================================== */

.ge-hero {
  text-align: center;
  padding: 84px 20px 72px;
}
.ge-hero-eyebrow {
  font-family: var(--ge-font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ge-ink-3);
  margin: 0 0 24px;
}
.ge-hero-eyebrow::before,
.ge-hero-eyebrow::after {
  content: "—";
  margin: 0 12px;
  opacity: 0.4;
}
.ge-hero-title {
  font-family: var(--ge-font-display);
  font-size: clamp(34px, 5.5vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 auto 22px;
  max-width: 720px;
  color: var(--ge-ink-1);
}
.ge-hero-tagline {
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ge-ink-3);
  margin: 0 auto 36px;
  max-width: 580px;
  line-height: 1.55;
}
.ge-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--ge-ink-1);
  color: var(--ge-paper);
  border: 1px solid var(--ge-ink-1);
  border-radius: var(--ge-radius);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s ease;
}
.ge-btn:hover { opacity: 0.85; color: var(--ge-paper); }
.ge-btn-secondary {
  background: transparent;
  color: var(--ge-ink-1);
  border-color: var(--ge-line);
}
.ge-btn-secondary:hover { color: var(--ge-ink-1); border-color: var(--ge-ink-3); }

/* =============================================================================
   Section headings (used on home for "Recent articles", etc.)
   ========================================================================== */

.ge-section-eyebrow {
  font-family: var(--ge-font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ge-ink-3);
  margin: 0 0 14px;
}
.ge-section-title {
  font-family: var(--ge-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 32px;
  color: var(--ge-ink-1);
}

/* =============================================================================
   Article card grid (home + archive)
   ========================================================================== */

.ge-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ge-card-list > li + li { border-top: 1px solid var(--ge-line); }

.ge-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 28px 0;
  align-items: start;
}
.ge-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ge-paper-2);
  overflow: hidden;
  border-radius: 4px;
}
.ge-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.ge-card-thumb:hover img { transform: scale(1.02); }

.ge-card-meta {
  font-family: var(--ge-font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ge-ink-3);
  margin: 0 0 8px;
}
.ge-card-meta > * + *::before {
  content: "·";
  margin: 0 8px;
  opacity: 0.6;
}
.ge-card-title {
  font-family: var(--ge-font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.008em;
  margin: 0 0 8px;
  color: var(--ge-ink-1);
}
.ge-card-title a { color: inherit; text-decoration: none; }
.ge-card-title a:hover { color: var(--ge-accent); }
.ge-card-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ge-ink-3);
  margin: 0;
}

@media (max-width: 600px) {
  .ge-card { grid-template-columns: 1fr; gap: 14px; }
  .ge-card-thumb { aspect-ratio: 16 / 9; }
}

/* =============================================================================
   Pagination
   ========================================================================== */

.ge-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.ge-pagination .page-numbers {
  display: inline-block;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--ge-ink-3);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.ge-pagination .page-numbers:hover { color: var(--ge-ink-1); }
.ge-pagination .current {
  background: var(--ge-ink-1);
  color: var(--ge-paper);
  border-color: var(--ge-ink-1);
}

/* =============================================================================
   Single post / page
   ----------------------------------------------------------------------------
   Articles published by Growth Engine ship their own scoped `.ge-article`
   styles inside the post body — these rules cover the chrome around it
   (post header, hero image, post navigation) plus the fallback typography
   for posts authored directly in WP.
   ========================================================================== */

.ge-post-header {
  text-align: center;
  padding: 72px 20px 48px;
  max-width: 760px;
  margin: 0 auto;
}
.ge-post-eyebrow {
  font-family: var(--ge-font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ge-ink-3);
  margin: 0 0 18px;
}
.ge-post-title {
  font-family: var(--ge-font-display);
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0 0 22px;
  color: var(--ge-ink-1);
}
.ge-post-meta {
  font-family: var(--ge-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ge-ink-3);
}
.ge-post-meta > * + *::before {
  content: "·";
  margin: 0 10px;
  opacity: 0.6;
}

.ge-post-feature {
  max-width: var(--ge-wide-w);
  margin: 0 auto 48px;
  padding: 0 24px;
}
.ge-post-feature img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--ge-radius);
}

/* Single-post grid: content + sticky sidebar (TOC + CTA card).
   The sidebar disappears under 1024 px because (a) there is no horizontal
   room left, and (b) the sticky top CTA bar shipped by the article body
   already covers the conversion path on mobile. */
.ge-single-grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 56px;
  align-items: start;
}
.ge-single-main { min-width: 0; }
.ge-single-aside {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: 14px;
}
@media (max-width: 1024px) {
  .ge-single-grid { grid-template-columns: 1fr; padding-bottom: 64px; }
  .ge-single-aside { display: none; }
}

/* Table of contents */
.ge-toc { margin: 0 0 28px; }
.ge-toc-label {
  font-family: var(--ge-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ge-ink-3);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ge-line);
}
.ge-toc-list { list-style: none; margin: 0; padding: 0; }
.ge-toc-list li { margin: 0; }
.ge-toc-list a {
  display: block;
  padding: 6px 0 6px 14px;
  color: var(--ge-ink-3);
  text-decoration: none;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.ge-toc-list a:hover { color: var(--ge-ink-1); }
.ge-toc-list a.is-active {
  color: var(--ge-ink-1);
  border-left-color: var(--ge-accent);
  font-weight: 500;
}
.ge-toc-list .ge-toc-h3 a {
  padding-left: 28px;
  font-size: 13px;
  opacity: 0.85;
}
.ge-toc-list a { font-size: 13.5px; }

/* Side CTA card */
.ge-side-cta {
  background: var(--ge-paper-2);
  border-radius: var(--ge-radius);
  padding: 18px 18px 16px;
}
.ge-side-cta-eyebrow {
  font-family: var(--ge-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ge-accent);
  margin: 0 0 8px;
}
.ge-side-cta-title {
  font-family: var(--ge-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--ge-ink-1);
}
.ge-side-cta-blurb {
  font-size: 13px;
  color: var(--ge-ink-3);
  margin: 0 0 14px;
  line-height: 1.5;
}
.ge-side-cta-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: var(--ge-ink-1);
  color: var(--ge-paper);
  border: 1px solid var(--ge-ink-1);
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 6px;
}
.ge-side-cta-btn:hover { opacity: 0.9; color: var(--ge-paper); }
.ge-side-cta-call {
  display: block;
  text-align: center;
  font-size: 12.5px;
  color: var(--ge-ink-3);
  text-decoration: none;
  margin-top: 8px;
  padding: 6px;
}
.ge-side-cta-call:hover { color: var(--ge-ink-1); }

.ge-post-content {
  /* Articles ship their own .ge-article block inside post_content with full
     editorial styling. For posts authored directly in WP we still want a
     comfortable default typography so the page never looks naked. */
  max-width: var(--ge-content-w);
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.72;
}
.ge-post-content > p { margin: 0 0 1.25em; }
.ge-post-content > h2 {
  font-family: var(--ge-font-display);
  font-size: 1.625em;
  font-weight: 600;
  line-height: 1.25;
  margin: 2.5em 0 0.65em;
  letter-spacing: -0.012em;
}
.ge-post-content > h3 {
  font-size: 1.15em;
  font-weight: 600;
  margin: 1.75em 0 0.45em;
}
.ge-post-content > ul,
.ge-post-content > ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.ge-post-content > ul > li { list-style: disc; }
.ge-post-content > ol > li { list-style: decimal; }
.ge-post-content > blockquote {
  margin: 1.75em 0;
  padding: 0.25em 0 0.25em 1.1em;
  border-left: 3px solid var(--ge-ink-3);
  color: var(--ge-ink-2);
  font-style: italic;
}
.ge-post-content a { color: var(--ge-accent); }

.ge-post-nav {
  max-width: var(--ge-content-w);
  margin: 64px auto 0;
  padding: 32px 20px 0;
  border-top: 1px solid var(--ge-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ge-post-nav a {
  display: block;
  text-decoration: none;
  color: var(--ge-ink-3);
}
.ge-post-nav a:hover { color: var(--ge-ink-1); }
.ge-post-nav-label {
  font-family: var(--ge-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 6px;
  opacity: 0.6;
}
.ge-post-nav-title {
  font-family: var(--ge-font-display);
  font-size: 16px;
  color: var(--ge-ink-1);
  line-height: 1.35;
}
.ge-post-nav-next { text-align: right; }

@media (max-width: 600px) {
  .ge-post-nav { grid-template-columns: 1fr; }
  .ge-post-nav-next { text-align: left; }
}

/* =============================================================================
   Search form
   ========================================================================== */

.ge-search {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}
.ge-search input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--ge-line);
  border-radius: var(--ge-radius);
  background: var(--ge-paper);
  font-size: 15px;
}
.ge-search input[type="search"]:focus {
  outline: none;
  border-color: var(--ge-ink-3);
}

/* =============================================================================
   404
   ========================================================================== */

.ge-404 {
  text-align: center;
  padding: 120px 20px;
}
.ge-404 .num {
  font-family: var(--ge-font-display);
  font-size: 84px;
  line-height: 1;
  color: var(--ge-ink-4);
  letter-spacing: -0.04em;
}
.ge-404 .msg {
  font-size: 18px;
  color: var(--ge-ink-3);
  margin: 12px 0 28px;
}

/* =============================================================================
   Site footer
   ========================================================================== */

.ge-site-footer {
  border-top: 1px solid var(--ge-line);
  margin-top: 96px;
  padding: 40px 0 56px;
  background: var(--ge-paper-2);
}
.ge-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--ge-ink-3);
}
.ge-footer-inner ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 18px;
}
.ge-footer-inner ul a {
  color: var(--ge-ink-3);
  text-decoration: none;
}
.ge-footer-inner ul a:hover { color: var(--ge-ink-1); }
.ge-footer-credit { font-size: 12px; opacity: 0.7; }

/* =============================================================================
   Reduce motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}