/* theme.css — 603 CTO
 * Bold, New-Hampshire-rooted theme layered OVER Bootstrap 5.
 * Palette: granite (cool dark) + a warm rust accent on warm "paper" white.
 * Type: Space Grotesk (headings, technical) + Inter (body). Self-hostable later.
 */

:root {
  /* --- Brand palette --- */
  --granite-900: #22262a;   /* near-black granite */
  --granite-800: #2b2f33;   /* primary dark */
  --granite-700: #3a4047;
  --granite-500: #5b636b;
  --granite-300: #aab1b8;
  --paper:       #f5f2ec;   /* warm off-white */
  --paper-2:     #ece7dd;   /* slightly deeper paper for section banding */
  --accent:      #e2552b;   /* warm rust — the 603 accent */
  --accent-600:  #c8431d;
  --accent-100:  #fbe4d9;

  --brand-primary: var(--accent);
  --brand-secondary: var(--granite-500);
  --brand-dark: var(--granite-800);
  --brand-light: var(--paper);
  --brand-accent: var(--accent);

  /* --- Typography --- */
  --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Space Grotesk", var(--font-base);
  --font-mono: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-base: 1.05rem;

  --bs-primary: var(--brand-primary);
  --bs-body-font-family: var(--font-base);
  --bs-body-font-size: var(--font-size-base);
  --bs-body-color: var(--granite-800);
  --bs-body-bg: var(--paper);
}

body {
  font-family: var(--font-base);
  color: var(--granite-800);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--granite-900);
}

.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lead { color: var(--granite-700); }

a { color: var(--accent-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

/* Headings stay light on dark sections */
.bg-granite h1, .bg-granite h2, .bg-granite h3, .bg-granite h4, .bg-granite h5, .bg-granite h6,
.bg-granite-900 h1, .bg-granite-900 h2, .bg-granite-900 h3, .bg-granite-900 h4, .bg-granite-900 h5, .bg-granite-900 h6,
.hero-granite h1, .hero-granite h2, .hero-granite h3, .hero-granite h4, .hero-granite h5, .hero-granite h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
  color: #fff;
}

/* --- Color utilities --- */
.bg-granite   { background-color: var(--granite-800) !important; color: var(--paper); }
.bg-granite-900 { background-color: var(--granite-900) !important; color: var(--paper); }
.bg-paper-2   { background-color: var(--paper-2) !important; }
.text-accent  { color: var(--accent) !important; }
.text-granite { color: var(--granite-800) !important; }
.text-paper   { color: var(--paper) !important; }
.fill-accent  { background-color: var(--accent) !important; color:#fff; }

/* --- Buttons --- */
.btn { font-weight: 600; border-radius: .4rem; padding-inline: 1.25rem; }
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--accent-600);
  --bs-btn-hover-border-color: var(--accent-600);
  --bs-btn-active-bg: var(--accent-600);
  --bs-btn-focus-shadow-rgb: 226,85,43;
}
.btn-dark {
  --bs-btn-bg: var(--granite-800);
  --bs-btn-border-color: var(--granite-800);
  --bs-btn-hover-bg: var(--granite-900);
  --bs-btn-hover-border-color: var(--granite-900);
}
.btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.5); }
.btn-outline-accent {
  --bs-btn-color: var(--accent-600);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  border-width: 2px;
}

/* --- The 603 motif: a monospace "tag" --- */
.tag-603 {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--accent-600);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.tag-603::before {
  content: "603";
  background: var(--accent);
  color: #fff;
  border-radius: .3rem;
  padding: .1rem .4rem;
  letter-spacing: .02em;
}
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent-600);
}
.bg-granite .eyebrow, .bg-granite-900 .eyebrow { color: var(--accent); }

/* --- Header / nav --- */
.site-navbar {
  background: rgba(245,242,236,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(43,47,51,.10);
}
.navbar-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--granite-900);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.navbar-brand .brand-badge {
  font-family: var(--font-mono);
  background: var(--accent);
  color: #fff;
  border-radius: .35rem;
  padding: .12rem .42rem;
  font-size: .95rem;
  line-height: 1;
}
.site-navbar .nav-link {
  color: var(--granite-700);
  font-weight: 600;
  text-align: center;
  padding-inline: .85rem;
}
.site-navbar .nav-link:hover { color: var(--accent-600); }
.site-navbar .nav-link.active { color: var(--accent-600); }
.site-navbar .nav-link.active::after {
  content: ""; display: block; height: 2px; background: var(--accent);
  border-radius: 2px; margin-top: 2px;
}
@media (min-width: 992px) {
  .site-navbar .nav-link { white-space: nowrap; }
}

/* --- Hero --- */
.hero-granite {
  background:
    radial-gradient(1100px 480px at 88% -8%, rgba(226,85,43,.22), transparent 60%),
    linear-gradient(180deg, var(--granite-900), var(--granite-800));
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.hero-granite .lead { color: rgba(245,242,236,.82); }
/* topographic granite contour hint */
.hero-granite::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 26px);
  pointer-events: none;
}
.hero-granite > * { position: relative; z-index: 1; }

/* --- Cards --- */
.card {
  border: 1px solid rgba(43,47,51,.10);
  border-radius: .7rem;
  background: #fff;
}
.feature-card {
  border: 1px solid rgba(43,47,51,.10);
  border-radius: .7rem;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  height: 100%;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(34,38,42,.12);
  border-color: rgba(226,85,43,.4);
}
.icon-chip {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .6rem;
  background: var(--accent-100);
  color: var(--accent-600);
  font-size: 1.35rem;
}

/* --- Numbered process steps --- */
.step-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--granite-800);
  color: #fff;
}

/* --- Stat blocks --- */
.stat-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.stat-label { color: var(--granite-500); font-size: .92rem; }
.bg-granite .stat-label, .bg-granite-900 .stat-label { color: var(--granite-300); }

/* --- Section helpers --- */
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.rule-accent { width: 56px; height: 4px; background: var(--accent); border-radius: 3px; }
.logo-pill {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .9rem;
  color: var(--granite-700);
  background: #fff;
  border: 1px solid rgba(43,47,51,.12);
  border-radius: 50rem;
  padding: .5rem 1.1rem;
}

/* --- Footer --- */
.site-footer {
  background: var(--granite-900);
  color: var(--granite-300);
}
.site-footer a:not(.btn) { color: #fff; text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--accent); }
.site-footer .footer-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
}

/* --- Experience timeline --- */
.timeline { position: relative; }
.timeline-item { position: relative; padding-left: 2rem; padding-bottom: 2rem; border-left: 2px solid rgba(43,47,51,.14); }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -7px; top: .25rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--paper);
}
.timeline-item.is-highlight::before { width: 16px; height: 16px; left: -9px; box-shadow: 0 0 0 4px var(--accent-100); }
.timeline-when { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--granite-500); text-transform: uppercase; letter-spacing: .04em; }
.timeline-role { font-family: var(--font-heading); font-weight: 700; }
.timeline-where { color: var(--accent-600); font-weight: 600; }

/* --- Image fit helpers --- */
.object-cover   { object-fit: cover;   }
.object-contain { object-fit: contain; background: transparent; }
.card img, .feature-card img { object-fit: contain; }
.photo-frame { background: transparent; border-radius: .5rem; overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: contain; }