/* BrotherHood Revival — site styles
   Tailwind via CDN handles 99% of layout; this file is for the rest. */

:root {
  --bhr-bg: #0a0a0a;
  --bhr-fg: #f5f1eb;
  --bhr-accent: #c19656;
  --bhr-accent-hover: #d4ab6e;
  --bhr-muted: #8a8580;
  --bhr-border: #262422;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bhr-bg);
  color: var(--bhr-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-serif,
h1, h2, .display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Hero kicker */
.kicker {
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--bhr-accent);
  font-weight: 500;
}

/* Subtle separator */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bhr-border), transparent);
}

/* Nav link underline animation */
.nav-link {
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--bhr-accent);
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link.active { color: var(--bhr-accent); }

/* Buttons */
.btn-primary {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  background: var(--bhr-accent);
  color: var(--bhr-bg);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  transition: background 0.2s ease;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--bhr-accent-hover); }

.btn-secondary {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--bhr-border);
  color: var(--bhr-fg);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover {
  border-color: var(--bhr-accent);
  color: var(--bhr-accent);
}

/* Card */
.card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--bhr-border);
  padding: 2rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover {
  border-color: rgba(193, 150, 86, 0.4);
}

/* Prose for article body */
.prose-bhr {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(245, 241, 235, 0.85);
}
.prose-bhr p { margin-bottom: 1.5rem; }
.prose-bhr h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--bhr-fg);
}
.prose-bhr h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--bhr-fg);
}
.prose-bhr blockquote {
  border-left: 2px solid var(--bhr-accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--bhr-fg);
}
.prose-bhr strong { color: var(--bhr-fg); }

/* Form fields */
.field {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bhr-border);
  color: var(--bhr-fg);
  padding: 0.875rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease;
}
.field:focus {
  outline: none;
  border-color: var(--bhr-accent);
}
.field::placeholder { color: var(--bhr-muted); }

/* Mobile nav */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }