/* ==========================================================================
   The Bonding Journal — theme.css (paint layer only)
   --------------------------------------------------------------------------
   Loads AFTER base.css (tokens/structure) and AFTER layout.css (grid/flex).
   This file: colors, fonts, accent flourishes. NO grid/flex/structural layout.
   Palette: #FAF7F4 · #1C1917 · #C0533A · #6B8F71
   ========================================================================== */

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

/* --- Color + font contract ----------------------------------------------- */
:root {
  --color-bg:      #FAF7F4;
  --color-text:    #1C1917;
  --color-accent:  #C0533A;
  --color-surface: #6B8F71;
  --color-border:  #6B8F71;

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'DM Sans', Helvetica, sans-serif;
}

/* --- Page base paint ----------------------------------------------------- */
.page {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* --- Heading typography -------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-text);
}

/* --- Links --------------------------------------------------------------- */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }
}

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

/* --- Site header + nav --------------------------------------------------- */
.site-header {
  background: var(--color-bg);
  border-block-end: var(--border-width) solid var(--color-border);
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
}

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

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

.nav-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.nav-brand:hover,
.nav-brand:focus-visible {
  color: var(--color-accent);
  text-decoration: none;
}

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

.nav-links a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--color-accent);
}

.nav-links a[aria-current="page"] {
  color: var(--color-accent);
  border-block-end: 1.5px solid var(--color-accent);
  padding-block-end: 0.1em;
}

/* --- 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);
}

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

.hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  max-width: 22ch;
}

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

/* Decorative accent rule under hero title */
.hero__title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--color-accent);
  margin-block-start: var(--space-sm);
}

/* --- Page hero (article / thematic pages) -------------------------------- */
.page-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);
}

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

.page-title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  max-width: 28ch;
}

/* --- 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-weight: 600;
  color: var(--color-text);
  font-size: var(--text-2xl);
  margin-block-end: var(--space-lg);
}

/* Sage accent rule above section title */
.section-title::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--color-surface);
  margin-block-end: var(--space-sm);
}

/* --- Article cards ------------------------------------------------------- */
.article-card {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

@media (prefers-reduced-motion: no-preference) {
  .article-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
}

.article-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 12px -4px var(--color-border);
}

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

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

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

/* --- 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;
}

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

.article-list__item:first-child {
  border-block-start: var(--border-width) solid var(--color-border);
}

.article-list__link {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  line-height: var(--leading-snug);
}

@media (prefers-reduced-motion: no-preference) {
  .article-list__link {
    transition: color 0.18s ease;
  }
}

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

/* Terracotta numeral accent for list items */
.article-list__item::before {
  content: counter(article-counter, decimal-leading-zero);
  counter-increment: article-counter;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  display: block;
  margin-block-end: var(--space-3xs);
}

.article-list {
  counter-reset: article-counter;
}

/* --- Prose (article body) ------------------------------------------------ */
.prose {
  font-family: var(--font-sans);
  color: var(--color-text);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5 {
  font-family: var(--font-serif);
  color: var(--color-text);
}

.prose h2 {
  color: var(--color-text);
  border-block-start: 2px solid var(--color-surface);
  padding-block-start: var(--space-sm);
}

.prose a {
  color: var(--color-accent);
}

.prose a:hover {
  color: var(--color-text);
}

/* --- Site footer --------------------------------------------------------- */
.site-footer {
  background: var(--color-text);
  color: var(--color-bg);
  padding-block: var(--space-lg);
  padding-inline: var(--space-md);
  margin-block-start: auto;
}

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

.site-footer .container {
  max-width: var(--container);
  margin-inline: auto;
}

.footer-copy {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-bg);
  opacity: 0.75;
}

/* --- Utility: accent rule ------------------------------------------------ */
.accent-rule {
  border: none;
  border-block-start: 2px solid var(--color-accent);
  width: 3rem;
  margin-block: var(--space-md);
  margin-inline: 0;
}

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

  .article-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    box-shadow: 0 6px 20px -8px var(--color-border);
  }
}

/* --- Micro-interaction: nav brand slow ink reveal (DS-5) ----------------- */
@media (prefers-reduced-motion: no-preference) {
  .nav-brand {
    transition: color 0.25s ease;
  }
}

/* ===== Mobile nav — working CSS-only burger =============================== */
/* The hide/show rules are scoped under .site-nav so they out-specify
   layout.css `.nav-links{display:flex}` (which loads after this file and would
   otherwise keep the menu permanently open on pages that ship layout.css). */
.nav-toggle { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.nav-burger {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:2.75rem;
  height:2.75rem;
  flex:0 0 auto;
  border-radius:var(--radius-sm);
  color:currentColor;
}
.nav-burger span {
  display:block;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:2px;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-burger span { transition:transform 200ms ease, opacity 160ms ease; }
}
.nav-toggle:focus-visible ~ .nav-burger { outline:2px solid currentColor; outline-offset:3px; }

@media (max-width:767px) {
  /* brand + burger share one row; the menu drops below the header.
     Drop layout.css's extra nav inset on mobile (the header already pads) so
     the brand fits beside the burger and lines up with the content gutter. */
  .site-header .site-nav { align-items:center; flex-wrap:wrap; row-gap:var(--space-xs); padding-inline:0; }
  .site-nav .nav-brand { flex:1 1 auto; min-width:0; font-size:var(--text-base); }
  .nav-burger { display:inline-flex; }

  .site-nav .nav-links {
    display:none;
    flex-basis:100%;
    width:100%;
    margin-block-start:var(--space-3xs);
  }
  .nav-toggle:checked ~ .nav-links {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-2xs);
    padding-block:var(--space-xs) var(--space-2xs);
  }
  .nav-links li { width:100%; }

  /* burger → X */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ===== Fluid type — keep oversized titles from breaking words on phones ==== */
/* layout.css paints the "swiss" hero with a hardcoded clamp (…+8vw) that hits
   ~50px at 320px and snaps long words mid-letter. This gentler clamp keeps the
   oversized desktop feel while staying readable down to 320px. Higher
   specificity (.page …) beats layout.css. */
.page .hero__title { font-size: clamp(2.25rem, 1rem + 6.5vw, 5.5rem); }

@media (max-width:30rem) {
  :root {
    --text-4xl: clamp(1.7rem, 1.1rem + 4.5vw, 2.75rem);
    --text-3xl: clamp(1.5rem, 1rem + 3.2vw, 2.25rem);
    --text-2xl: clamp(1.3rem, 0.95rem + 2.2vw, 1.95rem);
    --text-xl:  clamp(1.2rem, 0.95rem + 1.4vw, 1.563rem);
  }
  /* swiss list/card titles sit in a narrow column after the index number —
     clamp them so the longest words fit without snapping. */
  .page .article-card__title { font-size: clamp(1.25rem, 0.9rem + 2.4vw, 1.75rem); }
  .page .article-list__link  { font-size: clamp(1.2rem, 0.95rem + 1.6vw, 1.563rem); }
  /* safety net: hyphenate gracefully instead of dropping a lone letter */
  h1, h2, h3, h4,
  .hero__title, .page-title, .article-card__title, .article-list__link, .nav-brand {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}