/* ============================================================
   CHRISTOPHER FERNANDEZ — DESIGN SYSTEM
   Version 1.0 · May 2026
   
   Usage: <link rel="stylesheet" href="cf-design-system.css">
   
   Contents:
   1. Tokens (colours, type, spacing, radius, shadow)
   2. Reset
   3. Typography
   4. Buttons
   5. Links
   6. Forms
   7. Navigation
   8. Cards
   9. Article layouts
   10. Tags and badges
   11. Dividers
   12. Newsletter
   13. Utilities
   14. Responsive
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */

:root {

  /* Colour palette */
  --cf-black:       #1A1A1A;   /* Primary text, bars, headings */
  --cf-amber:       #BA7517;   /* Accent — use sparingly */
  --cf-amber-light: #F5E6C8;   /* Amber tint for hover states */
  --cf-white:       #FFFFFF;   /* Digital backgrounds */
  --cf-warm:        #F5F2EC;   /* Newsletter, print backgrounds */
  --cf-grey-100:    #F0EDEA;   /* Surface backgrounds */
  --cf-grey-200:    #E0DDD8;   /* Borders, rules */
  --cf-grey-400:    #AAAAAA;   /* Placeholder, metadata */
  --cf-grey-600:    #666666;   /* Secondary text */
  --cf-grey-800:    #333333;   /* Body text */

  /* Typography */
  --cf-font-serif:  Georgia, 'Times New Roman', serif;
  --cf-font-sans:   -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cf-font-mono:   'Courier New', Courier, monospace;

  /* Type scale */
  --cf-text-xs:     10px;
  --cf-text-sm:     12px;
  --cf-text-base:   16px;
  --cf-text-md:     18px;
  --cf-text-lg:     24px;
  --cf-text-xl:     32px;
  --cf-text-2xl:    44px;
  --cf-text-3xl:    60px;

  /* Line heights */
  --cf-leading-tight:   1.1;
  --cf-leading-snug:    1.3;
  --cf-leading-normal:  1.6;
  --cf-leading-loose:   1.75;

  /* Letter spacing */
  --cf-tracking-tight:  -0.03em;
  --cf-tracking-normal:  0;
  --cf-tracking-wide:    0.06em;
  --cf-tracking-wider:   0.12em;
  --cf-tracking-widest:  0.16em;

  /* Spacing scale */
  --cf-space-1:   4px;
  --cf-space-2:   8px;
  --cf-space-3:   12px;
  --cf-space-4:   16px;
  --cf-space-5:   24px;
  --cf-space-6:   32px;
  --cf-space-7:   48px;
  --cf-space-8:   64px;
  --cf-space-9:   96px;
  --cf-space-10:  128px;

  /* Border radius */
  --cf-radius-none: 0;
  --cf-radius-sm:   2px;
  --cf-radius-md:   4px;

  /* Borders */
  --cf-border-thin:   0.5px solid var(--cf-grey-200);
  --cf-border-base:   1px solid var(--cf-grey-200);
  --cf-border-strong: 2px solid var(--cf-black);
  --cf-border-accent: 2px solid var(--cf-amber);

  /* Transitions */
  --cf-transition: 150ms ease;

  /* Max widths */
  --cf-max-content:  680px;
  --cf-max-wide:     1080px;
  --cf-max-full:     1440px;
}


/* ============================================================
   2. RESET
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--cf-white);
  color: var(--cf-grey-800);
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-base);
  line-height: var(--cf-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

input, textarea, select {
  font: inherit;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

/* Display — oversized serif name treatment */
.cf-display {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-3xl);
  font-weight: 700;
  letter-spacing: var(--cf-tracking-tight);
  line-height: var(--cf-leading-tight);
  color: var(--cf-black);
}

/* Heading 1 — major article and section titles */
.cf-h1 {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-2xl);
  font-weight: 700;
  letter-spacing: var(--cf-tracking-tight);
  line-height: var(--cf-leading-snug);
  color: var(--cf-black);
}

/* Heading 2 — section headings within articles */
.cf-h2 {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--cf-leading-snug);
  color: var(--cf-black);
}

/* Heading 3 — card titles, minor headings */
.cf-h3 {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-lg);
  font-weight: 700;
  line-height: var(--cf-leading-snug);
  color: var(--cf-black);
}

/* Body — long-form reading, opinion pieces */
.cf-body {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-base);
  font-weight: 400;
  line-height: var(--cf-leading-loose);
  color: var(--cf-grey-800);
}

/* Body sans — UI text, labels, navigation */
.cf-body-sans {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-base);
  font-weight: 400;
  line-height: var(--cf-leading-normal);
  color: var(--cf-grey-800);
}

/* Label — kickers, categories, metadata */
/* Always amber when used as category signal */
.cf-label {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-widest);
  color: var(--cf-amber);
}

/* Label neutral — metadata without accent colour */
.cf-label-neutral {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-widest);
  color: var(--cf-grey-400);
}

/* Caption — dates, bylines, secondary metadata */
.cf-caption {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-sm);
  color: var(--cf-grey-400);
  line-height: var(--cf-leading-normal);
}

/* Intro — slightly larger body for article openings */
.cf-intro {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-md);
  line-height: var(--cf-leading-loose);
  color: var(--cf-grey-800);
}

/* Pull quote */
.cf-pullquote {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-lg);
  font-weight: 700;
  line-height: var(--cf-leading-snug);
  color: var(--cf-black);
  border-left: 3px solid var(--cf-amber);
  padding-left: var(--cf-space-5);
  margin: var(--cf-space-7) 0;
}


/* ============================================================
   4. BUTTONS
   ============================================================ */

/* Base button reset */
.cf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-2);
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-wider);
  cursor: pointer;
  transition: all var(--cf-transition);
  white-space: nowrap;
  border-radius: var(--cf-radius-none);
  text-decoration: none;
}

/* Primary — dark fill */
.cf-btn-primary {
  background: var(--cf-black);
  color: var(--cf-white);
  border: 1px solid var(--cf-black);
  padding: var(--cf-space-3) var(--cf-space-5);
}
.cf-btn-primary:hover {
  background: var(--cf-grey-800);
  border-color: var(--cf-grey-800);
}
.cf-btn-primary:active {
  background: var(--cf-black);
  transform: translateY(1px);
}

/* Secondary — outline */
.cf-btn-secondary {
  background: transparent;
  color: var(--cf-black);
  border: 1px solid var(--cf-black);
  padding: var(--cf-space-3) var(--cf-space-5);
}
.cf-btn-secondary:hover {
  background: var(--cf-grey-100);
}
.cf-btn-secondary:active {
  transform: translateY(1px);
}

/* Accent — amber outline */
.cf-btn-accent {
  background: transparent;
  color: var(--cf-amber);
  border: 1px solid var(--cf-amber);
  padding: var(--cf-space-3) var(--cf-space-5);
}
.cf-btn-accent:hover {
  background: var(--cf-amber-light);
}
.cf-btn-accent:active {
  transform: translateY(1px);
}

/* Ghost — text only with underline */
.cf-btn-ghost {
  background: transparent;
  color: var(--cf-black);
  border: none;
  padding: var(--cf-space-1) 0;
  border-bottom: 1px solid var(--cf-black);
  border-radius: 0;
}
.cf-btn-ghost:hover {
  color: var(--cf-amber);
  border-color: var(--cf-amber);
}

/* Ghost amber */
.cf-btn-ghost-amber {
  background: transparent;
  color: var(--cf-amber);
  border: none;
  padding: var(--cf-space-1) 0;
  border-bottom: 1px solid var(--cf-amber);
  border-radius: 0;
}
.cf-btn-ghost-amber:hover {
  opacity: 0.75;
}

/* Size modifiers */
.cf-btn-sm {
  font-size: 9px;
  padding: var(--cf-space-2) var(--cf-space-3);
  letter-spacing: var(--cf-tracking-widest);
}
.cf-btn-lg {
  font-size: var(--cf-text-sm);
  padding: var(--cf-space-4) var(--cf-space-6);
}

/* Disabled state */
.cf-btn:disabled,
.cf-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================
   5. LINKS
   ============================================================ */

/* Inline body link */
.cf-link {
  color: var(--cf-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cf-grey-200);
  transition: text-decoration-color var(--cf-transition), color var(--cf-transition);
}
.cf-link:hover {
  color: var(--cf-amber);
  text-decoration-color: var(--cf-amber);
}

/* Amber accent link */
.cf-link-amber {
  color: var(--cf-amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--cf-transition);
}
.cf-link-amber:hover {
  text-decoration-color: var(--cf-amber);
}

/* Nav link */
.cf-link-nav {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-sm);
  color: var(--cf-grey-600);
  letter-spacing: var(--cf-tracking-wide);
  transition: color var(--cf-transition);
}
.cf-link-nav:hover,
.cf-link-nav.active {
  color: var(--cf-black);
}


/* ============================================================
   6. FORMS
   ============================================================ */

.cf-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-2);
  margin-bottom: var(--cf-space-5);
}

.cf-label-field {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-wider);
  color: var(--cf-grey-600);
}

.cf-input {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-base);
  color: var(--cf-black);
  background: var(--cf-white);
  border: 1px solid var(--cf-grey-200);
  border-radius: var(--cf-radius-none);
  padding: var(--cf-space-3) var(--cf-space-4);
  width: 100%;
  transition: border-color var(--cf-transition);
  outline: none;
  appearance: none;
}
.cf-input::placeholder {
  color: var(--cf-grey-400);
}
.cf-input:focus {
  border-color: var(--cf-black);
}
.cf-input:focus-visible {
  outline: 2px solid var(--cf-amber);
  outline-offset: 2px;
}
.cf-input.error {
  border-color: #C0392B;
}

.cf-textarea {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-base);
  color: var(--cf-black);
  background: var(--cf-white);
  border: 1px solid var(--cf-grey-200);
  border-radius: var(--cf-radius-none);
  padding: var(--cf-space-3) var(--cf-space-4);
  width: 100%;
  min-height: 120px;
  resize: vertical;
  transition: border-color var(--cf-transition);
  outline: none;
  line-height: var(--cf-leading-normal);
}
.cf-textarea:focus {
  border-color: var(--cf-black);
}
.cf-textarea:focus-visible {
  outline: 2px solid var(--cf-amber);
  outline-offset: 2px;
}

.cf-select {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-base);
  color: var(--cf-black);
  background: var(--cf-white);
  border: 1px solid var(--cf-grey-200);
  border-radius: var(--cf-radius-none);
  padding: var(--cf-space-3) var(--cf-space-4);
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A1A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
  transition: border-color var(--cf-transition);
  outline: none;
}
.cf-select:focus {
  border-color: var(--cf-black);
}

/* Newsletter subscribe row */
.cf-subscribe-row {
  display: flex;
  gap: 0;
}
.cf-subscribe-row .cf-input {
  flex: 1;
  border-right: none;
}
.cf-subscribe-row .cf-btn-primary {
  flex-shrink: 0;
}

/* Field helper text */
.cf-field-hint {
  font-size: var(--cf-text-sm);
  color: var(--cf-grey-400);
  margin-top: var(--cf-space-1);
}
.cf-field-error {
  font-size: var(--cf-text-sm);
  color: #C0392B;
  margin-top: var(--cf-space-1);
}


/* ============================================================
   7. NAVIGATION
   ============================================================ */

/* Site nav wrapper */
.cf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cf-space-5) var(--cf-space-6);
  border-bottom: var(--cf-border-thin);
  background: var(--cf-white);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Logo lockup compact */
.cf-nav-logo {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-md);
  font-weight: 700;
  letter-spacing: var(--cf-tracking-tight);
  color: var(--cf-black);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--cf-space-4);
}
.cf-nav-logo-sep {
  width: 1px;
  height: 22px;
  background: var(--cf-grey-200);
}
.cf-nav-logo-tag {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-widest);
  color: var(--cf-amber);
  line-height: 1.3;
}

/* Nav links */
.cf-nav-links {
  display: flex;
  align-items: center;
  gap: var(--cf-space-6);
  list-style: none;
}

/* Mobile nav toggle */
.cf-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--cf-space-2);
  background: none;
  border: none;
}
.cf-nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cf-black);
  transition: all var(--cf-transition);
}


/* ============================================================
   8. CARDS
   ============================================================ */

/* Article card — used in listing pages */
.cf-card {
  border-top: var(--cf-border-strong);
  padding: var(--cf-space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-2);
  text-decoration: none;
  transition: opacity var(--cf-transition);
}
.cf-card:hover {
  opacity: 0.7;
}

.cf-card-category {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-widest);
  color: var(--cf-amber);
}

.cf-card-title {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-lg);
  font-weight: 700;
  line-height: var(--cf-leading-snug);
  color: var(--cf-black);
  letter-spacing: -0.01em;
}

.cf-card-excerpt {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-base);
  line-height: var(--cf-leading-normal);
  color: var(--cf-grey-600);
}

.cf-card-meta {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-sm);
  color: var(--cf-grey-400);
  margin-top: var(--cf-space-2);
}

/* Featured card — larger, with accent bar */
.cf-card-featured {
  border-top: 4px solid var(--cf-black);
  position: relative;
}
.cf-card-featured::before {
  content: '';
  position: absolute;
  top: -4px;
  right: 0;
  width: 4px;
  height: 4px;
  background: var(--cf-amber);
}
.cf-card-featured .cf-card-title {
  font-size: var(--cf-text-xl);
}

/* Surface card — padded, with background */
.cf-card-surface {
  background: var(--cf-grey-100);
  padding: var(--cf-space-5) var(--cf-space-6);
  border-top: none;
}

/* Two column card grid */
.cf-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--cf-space-7);
}


/* ============================================================
   9. ARTICLE LAYOUTS
   ============================================================ */

/* Article header */
.cf-article-header {
  max-width: var(--cf-max-content);
  margin: 0 auto;
  padding: var(--cf-space-7) var(--cf-space-5) var(--cf-space-6);
  border-bottom: var(--cf-border-base);
  margin-bottom: var(--cf-space-7);
}

.cf-article-kicker {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-widest);
  color: var(--cf-amber);
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  margin-bottom: var(--cf-space-4);
}
.cf-article-kicker::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cf-amber);
}

.cf-article-title {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-2xl);
  font-weight: 700;
  letter-spacing: var(--cf-tracking-tight);
  line-height: var(--cf-leading-snug);
  color: var(--cf-black);
  margin-bottom: var(--cf-space-5);
}

.cf-article-byline {
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-sm);
  color: var(--cf-grey-400);
  display: flex;
  align-items: center;
  gap: var(--cf-space-3);
}
.cf-article-byline-sep {
  width: 1px;
  height: 14px;
  background: var(--cf-grey-200);
}

/* Article body */
.cf-article-body {
  max-width: var(--cf-max-content);
  margin: 0 auto;
  padding: 0 var(--cf-space-5);
}

.cf-article-body p {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-base);
  line-height: var(--cf-leading-loose);
  color: var(--cf-grey-800);
  margin-bottom: var(--cf-space-5);
}

.cf-article-body h2 {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--cf-leading-snug);
  color: var(--cf-black);
  margin: var(--cf-space-7) 0 var(--cf-space-4);
  padding-top: var(--cf-space-6);
  border-top: var(--cf-border-base);
}

.cf-article-body h3 {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-lg);
  font-weight: 700;
  color: var(--cf-black);
  margin: var(--cf-space-6) 0 var(--cf-space-3);
}

/* Article disclaimer footer */
.cf-article-disclaimer {
  max-width: var(--cf-max-content);
  margin: var(--cf-space-8) auto 0;
  padding: var(--cf-space-5) var(--cf-space-5) var(--cf-space-9);
  border-top: var(--cf-border-base);
  font-family: var(--cf-font-sans);
  font-size: var(--cf-text-sm);
  color: var(--cf-grey-400);
  font-style: italic;
}


/* ============================================================
   10. TAGS AND BADGES
   ============================================================ */

.cf-tag {
  display: inline-block;
  font-family: var(--cf-font-sans);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-widest);
  padding: 3px var(--cf-space-3);
  border: 1px solid var(--cf-grey-200);
  color: var(--cf-grey-600);
  background: transparent;
  border-radius: var(--cf-radius-none);
}

.cf-tag-amber {
  border-color: var(--cf-amber);
  color: var(--cf-amber);
}

.cf-tag-filled {
  background: var(--cf-black);
  border-color: var(--cf-black);
  color: var(--cf-white);
}


/* ============================================================
   11. DIVIDERS AND STRUCTURAL ELEMENTS
   ============================================================ */

/* The signature bar — black bar with amber dot */
.cf-bar {
  width: 100%;
  height: 4px;
  background: var(--cf-black);
  position: relative;
  margin-bottom: var(--cf-space-7);
}
.cf-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background: var(--cf-amber);
}

/* Thin rule */
.cf-rule {
  border: none;
  border-top: var(--cf-border-thin);
  margin: var(--cf-space-6) 0;
}

/* Section spacer */
.cf-section {
  padding: var(--cf-space-9) 0;
}

/* Page container */
.cf-container {
  max-width: var(--cf-max-wide);
  margin: 0 auto;
  padding: 0 var(--cf-space-6);
}
.cf-container-narrow {
  max-width: var(--cf-max-content);
  margin: 0 auto;
  padding: 0 var(--cf-space-5);
}


/* ============================================================
   12. NEWSLETTER
   ============================================================ */

.cf-newsletter {
  background: var(--cf-warm);
  max-width: 600px;
  margin: 0 auto;
  padding: var(--cf-space-7);
  font-family: var(--cf-font-sans);
}

.cf-newsletter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--cf-black);
  padding-bottom: var(--cf-space-4);
  margin-bottom: var(--cf-space-5);
}

.cf-newsletter-logo {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-md);
  font-weight: 700;
  letter-spacing: var(--cf-tracking-tight);
  color: var(--cf-black);
}

.cf-newsletter-issue {
  font-size: var(--cf-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-wider);
  color: var(--cf-grey-400);
}

.cf-newsletter-kicker {
  font-size: var(--cf-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-widest);
  color: var(--cf-amber);
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  margin-bottom: var(--cf-space-3);
}
.cf-newsletter-kicker::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cf-amber);
  flex-shrink: 0;
}

.cf-newsletter-headline {
  font-family: var(--cf-font-serif);
  font-size: var(--cf-text-xl);
  font-weight: 700;
  letter-spacing: var(--cf-tracking-tight);
  line-height: var(--cf-leading-snug);
  color: var(--cf-black);
  margin-bottom: var(--cf-space-5);
}

.cf-newsletter-body {
  font-family: var(--cf-font-serif);
  font-size: 15px;
  line-height: var(--cf-leading-loose);
  color: var(--cf-grey-800);
  margin-bottom: var(--cf-space-5);
}

.cf-newsletter-footer {
  border-top: var(--cf-border-base);
  padding-top: var(--cf-space-4);
  font-size: var(--cf-text-sm);
  color: var(--cf-grey-400);
}


/* ============================================================
   13. UTILITIES
   ============================================================ */

.cf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.cf-text-amber  { color: var(--cf-amber); }
.cf-text-black  { color: var(--cf-black); }
.cf-text-muted  { color: var(--cf-grey-400); }
.cf-text-body   { color: var(--cf-grey-800); }

.cf-bg-white    { background: var(--cf-white); }
.cf-bg-warm     { background: var(--cf-warm); }
.cf-bg-surface  { background: var(--cf-grey-100); }
.cf-bg-black    { background: var(--cf-black); }

.cf-mt-auto     { margin-top: auto; }
.cf-flex        { display: flex; }
.cf-flex-col    { display: flex; flex-direction: column; }
.cf-items-center { align-items: center; }
.cf-justify-between { justify-content: space-between; }
.cf-gap-2       { gap: var(--cf-space-2); }
.cf-gap-4       { gap: var(--cf-space-4); }
.cf-gap-5       { gap: var(--cf-space-5); }
.cf-gap-6       { gap: var(--cf-space-6); }

.cf-w-full      { width: 100%; }
.cf-hidden      { display: none; }


/* ============================================================
   14. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

  :root {
    --cf-text-3xl: 44px;
    --cf-text-2xl: 32px;
    --cf-text-xl:  26px;
  }

  .cf-nav {
    padding: var(--cf-space-4) var(--cf-space-5);
  }

  .cf-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cf-white);
    flex-direction: column;
    padding: var(--cf-space-5) var(--cf-space-6);
    gap: var(--cf-space-4);
    border-bottom: var(--cf-border-base);
  }
  .cf-nav-links.open {
    display: flex;
  }

  .cf-nav-toggle {
    display: flex;
  }

  .cf-card-grid {
    grid-template-columns: 1fr;
  }

  .cf-article-title {
    font-size: var(--cf-text-xl);
  }

  .cf-container {
    padding: 0 var(--cf-space-5);
  }

  .cf-subscribe-row {
    flex-direction: column;
  }
  .cf-subscribe-row .cf-input {
    border-right: 1px solid var(--cf-grey-200);
  }

  .cf-section {
    padding: var(--cf-space-7) 0;
  }

  .cf-pullquote {
    font-size: var(--cf-text-md);
  }
}

@media (max-width: 480px) {

  :root {
    --cf-text-3xl: 36px;
    --cf-text-2xl: 28px;
  }

  .cf-nav-logo-sep,
  .cf-nav-logo-tag {
    display: none;
  }

  .cf-newsletter {
    padding: var(--cf-space-5);
  }
}