/* ==========================================================================
   Genuine Bonds — theme.css (paint layer only)
   Palette: #F5F8F6 · #161D1A · #1F6F8B · #A855C4
   ========================================================================== */

/* --- Web fonts ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

/* --- Font roles ----------------------------------------------------------- */
:root {
  --font-sans:  'DM Sans', sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
}

/* --- Light theme (default) ------------------------------------------------ */
:root[data-theme="light"] {
  --color-bg:      #F5F8F6;
  --color-text:    #161D1A;
  --color-accent:  #1F6F8B;
  --color-surface: #EDF2EF;
  --color-border:  #C8D6CF;
}

/* --- Dark theme ----------------------------------------------------------- */
:root[data-theme="dark"] {
  --color-bg:      #161D1A;
  --color-text:    #F5F8F6;
  --color-accent:  #1F6F8B;
  --color-surface: #1E2924;
  --color-border:  #2E3D36;
}

/* --- Base document paint -------------------------------------------------- */
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.page {
  background: var(--color-bg);
  color: var(--color-text);
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
}

/* --- Article prose h1 override (DS-6) ------------------------------------ */
.prose h1 {
  font-size: var(--text-2xl);
  font-family: var(--font-serif);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .prose h1 {
    font-size: var(--text-3xl);
  }
}

.prose h2 {
  font-family: var(--font-serif);
  color: var(--color-text);
  border-block-start: 2px solid var(--color-accent);
  padding-block-start: var(--space-md);
  margin-block-start: var(--space-xl);
}

.prose h3 {
  font-family: var(--font-serif);
  color: var(--color-accent);
  font-size: var(--text-xl);
}

.prose h4, .prose h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-text);
}

.prose p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}

.prose a:hover,
.prose a:focus-visible {
  text-decoration-color: var(--color-accent);
}

/* --- Global link paint ---------------------------------------------------- */
a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Site header ---------------------------------------------------------- */
.site-header {
  background: var(--color-bg);
  border-block-end: var(--border-width) solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .site-header {
    padding-inline: var(--space-xl);
  }
}

/* --- Site nav ------------------------------------------------------------ */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  max-width: var(--container);
  margin-inline: auto;
}

.nav-brand {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-brand:hover {
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  padding-block: var(--space-3xs);
  border-block-end: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-accent);
  border-block-end-color: var(--color-accent);
}

/* --- Theme toggle + burger: pill shape (DS-12) --------------------------- */
.theme-toggle,
.nav-toggle {
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-text);
  transition: background 0.18s ease, color 0.18s ease;
}

.theme-toggle:hover,
.nav-toggle:hover {
  background: var(--color-surface);
  color: var(--color-accent);
  opacity: 1;
}

/* --- Hero band ------------------------------------------------------------ */
.hero {
  background: var(--color-bg);
  padding-block: var(--space-2xl);
  padding-inline: var(--space-md);
  border-block-end: var(--border-width) solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 30%, rgba(31, 111, 139, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(168, 85, 196, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--space-2xl);
    padding-inline: var(--space-xl);
  }
}

.hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-text);
  max-width: 18ch;
}

.hero__lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: var(--leading-normal);
  color: var(--color-text);
  opacity: 0.75;
  max-width: 52ch;
  margin-block-start: var(--space-md);
}

/* Accent rule below hero lead */
.hero__lead::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 3px;
  background: var(--color-accent);
  margin-block-start: var(--space-lg);
}

/* --- Articles section ---------------------------------------------------- */
.articles-section {
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .articles-section {
    padding-inline: var(--space-xl);
  }
}

.section-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text);
  margin-block-end: var(--space-lg);
}

.section-title::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-accent);
  margin-block-start: var(--space-xs);
}

/* --- Article cards -------------------------------------------------------- */
.articles-grid {
  gap: var(--space-md);
}

.article-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(31, 111, 139, 0.1);
}

[data-theme="dark"] .article-card:hover {
  box-shadow: 0 4px 20px rgba(31, 111, 139, 0.2);
}

.article-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-block-end: var(--space-2xs);
}

@media (min-width: 768px) {
  .article-card__title {
    font-size: var(--text-xl);
  }
}

.article-card__link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 400;
}

.article-card__link:hover {
  color: var(--color-accent);
}

/* --- Page hero (article / inner pages) ----------------------------------- */
.page-hero {
  background: var(--color-bg);
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
  border-block-end: var(--border-width) solid var(--color-border);
}

@media (min-width: 768px) {
  .page-hero {
    padding-block: var(--space-xl);
    padding-inline: var(--space-xl);
  }
}

.page-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--color-text);
}

/* --- Articles index / list ----------------------------------------------- */
.articles-index {
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .articles-index {
    padding-inline: var(--space-xl);
  }
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-list__item {
  border-block-end: var(--border-width) solid var(--color-border);
  padding-block: var(--space-md);
}

.article-list__item:last-child {
  border-block-end: none;
}

.article-list__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
  margin-block-end: var(--space-3xs);
}

@media (min-width: 768px) {
  .article-list__title {
    font-size: var(--text-xl);
  }
}

.article-list__link {
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-serif);
  transition: color 0.18s ease;
}

.article-list__link:hover {
  color: var(--color-accent);
}

/* --- Pull-quote accent (Violet Current) ---------------------------------- */
.prose blockquote,
blockquote {
  border-inline-start: 3px solid #A855C4;
  padding-inline-start: var(--space-md);
  margin-inline: 0;
  color: var(--color-text);
  opacity: 0.85;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
}

/* --- Category / tag pills (Violet Current) ------------------------------- */
.tag,
.category-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 999px;
  background: rgba(168, 85, 196, 0.12);
  color: #A855C4;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

[data-theme="dark"] .tag,
[data-theme="dark"] .category-pill {
  background: rgba(168, 85, 196, 0.2);
}

/* --- Decorative drop-cap for prose articles ------------------------------ */
.prose--dropcap > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 4.5em;
  font-weight: 400;
  line-height: 0.8;
  float: left;
  margin-inline-end: var(--space-2xs);
  margin-block-start: 0.06em;
  color: var(--color-accent);
}

/* --- Site footer ---------------------------------------------------------- */
.site-footer {
  background: var(--color-surface);
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block: var(--space-lg);
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .site-footer {
    padding-inline: var(--space-xl);
  }
}

.footer-copy {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  opacity: 0.6;
  text-align: center;
}

/* --- Micro-interactions (DS-5) ------------------------------------------- */
/* 1. Article card lift on hover */
@media (prefers-reduced-motion: no-preference) {
  .article-card {
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  }

  .article-card:hover {
    transform: translateY(-2px);
  }

  /* 2. Section fade-in on scroll (subtle cinematic reveal) */
  .articles-section,
  .articles-index {
    animation: gb-fade-up 0.6s ease both;
  }

  @keyframes gb-fade-up {
    from {
      opacity: 0;
      translate: 0 0.75rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}

/* --- Decorative horizontal rules ----------------------------------------- */
.section-rule {
  border: none;
  border-block-start: var(--border-width) solid var(--color-border);
  margin-block: var(--space-xl);
}

.section-rule--accent {
  border-block-start-color: var(--color-accent);
  border-block-start-width: 2px;
}