/* ==========================================================================
   WashingtonPlumbers.net — main.css
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
  /* Brand colors */
  --color-brand-primary:        #185FA5;
  --color-brand-primary-light:  #E6F1FB;
  --color-brand-primary-dark:   #0C447C;
  --color-brand-secondary:      #1D9E75;
  --color-brand-secondary-light:#E1F5EE;
  --color-accent-amber:         #EF9F27;
  --color-accent-amber-light:   #FAEEDA;
  --color-accent-red:           #E24B4A;
  --color-accent-red-light:     #FCEBEB;

  /* Text */
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #5A5A5A;
  --color-text-muted:     #888888;

  /* Surfaces */
  --color-surface-white: #FFFFFF;
  --color-surface-gray:  #F7F7F5;

  /* Borders */
  --color-border:        rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.2);

  /* Spacing scale (8px base grid) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Typography */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Georgia', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes */
  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */

  /* Line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(24, 95, 165, 0.25);

  /* Nav height */
  --nav-height: 64px;

  /* Max widths */
  --max-width-content: 720px;
  --max-width-site:    1140px;
}

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

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

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

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-surface-gray);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--color-brand-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 3px solid rgba(24, 95, 165, 0.5);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(24, 95, 165, 0.5);
  outline-offset: 2px;
}

/* ==========================================================================
   3. ACCESSIBILITY UTILITIES
   ========================================================================== */

.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-lg);
  z-index: 9999;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-brand-primary);
  color: #fff;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: top 0.15s;
}

.skip-link:focus {
  top: var(--space-sm);
}

/* ==========================================================================
   4. BASE TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl);  line-height: var(--leading-snug);  }
h3 { font-size: var(--text-lg);  line-height: 1.4; }
h4 { font-size: var(--text-base); line-height: 1.4; }

p {
  margin-bottom: var(--space-lg);
}

p:last-child {
  margin-bottom: 0;
}

strong { font-weight: 500; }

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* ==========================================================================
   5. LAYOUT UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width-site);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

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

@media (min-width: 1024px) {
  .container { padding-inline: var(--space-2xl); }
}

/* ==========================================================================
   6. ARTICLE GRID
   ========================================================================== */

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .article-grid--2,
  .article-grid--3,
  .article-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .article-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .article-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  min-height: 44px;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-brand-primary);
  color: #fff;
  border-color: var(--color-brand-primary);
}

.btn--primary:hover {
  background: var(--color-brand-primary-dark);
  border-color: var(--color-brand-primary-dark);
  text-decoration: none;
  color: #fff;
}

.btn--secondary {
  background: var(--color-brand-primary-light);
  color: var(--color-brand-primary-dark);
  border-color: var(--color-brand-primary-light);
}

.btn--secondary:hover {
  background: #d0e6f7;
  border-color: #d0e6f7;
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.btn--ghost:hover {
  background: var(--color-brand-primary-light);
  text-decoration: none;
}

.btn--lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-base);
}

.btn--pill {
  border-radius: 100px;
}

/* ==========================================================================
   8. FORM ELEMENTS
   ========================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.form-select,
.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-surface-white);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  appearance: none;
  min-height: 44px;
  transition: border-color 0.15s;
}

.form-select:focus,
.form-input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: var(--focus-ring);
}

.form-select {
  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='%235A5A5A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: var(--space-3xl);
}

.form-select--sm {
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-md);
  min-height: 36px;
}

/* Search bar */
.search-form-bar {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.search-form-bar__input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-white);
  min-height: 44px;
}

.search-form-bar__input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: var(--focus-ring);
}

/* Table */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th,
.data-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface-gray);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.table-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}


/* ==========================================================================
   9. READING PROGRESS BAR
   ========================================================================== */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1001;
  background: transparent;
  pointer-events: none;
}

.reading-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-brand-primary);
  transition: width 0.1s linear;
}

/* ==========================================================================
   10. SITE HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-surface-white);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.2s;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-xl);
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-header__logo:hover {
  text-decoration: none;
  opacity: 0.85;
}

.logo-svg {
  display: block;
  height: 28px;
  width: auto;
}

/* Primary nav */
.primary-nav {
  flex: 1;
}

.primary-nav__menu {
  display: none;
  list-style: none;
  gap: var(--space-xs);
}

@media (min-width: 1024px) {
  .primary-nav__menu {
    display: flex;
    align-items: center;
  }
}

.primary-nav__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.primary-nav__link:hover {
  color: var(--color-brand-primary);
  background: var(--color-brand-primary-light);
  text-decoration: none;
}

.primary-nav__link.current-menu-item {
  color: var(--color-brand-primary);
}

/* CTA pill */
.site-header__cta {
  display: none;
  flex-shrink: 0;
  height: 36px;
  padding: 0 var(--space-lg);
  min-height: 36px;
  font-size: var(--text-sm);
  border-radius: 100px;
}

@media (min-width: 768px) {
  .site-header__cta { display: inline-flex; }
}

/* Hamburger toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  margin-left: auto;
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   11. MOBILE NAV
   ========================================================================== */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.mobile-nav[hidden] { display: none; }

.mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: var(--color-surface-white);
  padding: var(--space-xl) var(--space-lg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mobile-nav__close {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mobile-nav__menu .primary-nav__link {
  display: block;
  font-size: var(--text-base);
  padding: var(--space-md) var(--space-md);
  border-radius: var(--radius-md);
}

.mobile-nav__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   12. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  padding: var(--space-md) 0;
  margin-bottom: var(--space-lg);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.breadcrumbs__link {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumbs__link:hover {
  color: var(--color-brand-primary);
  text-decoration: underline;
}

.breadcrumbs__sep {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumbs__current {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   13. CATEGORY + DIFFICULTY BADGES
   ========================================================================== */

.category-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-brand-primary-dark);
  background: var(--color-brand-primary-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.category-pill:hover {
  background: #d0e6f7;
  text-decoration: none;
}

.difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 500;
}

.difficulty-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge--easy   .difficulty-badge__dot { background: var(--color-brand-secondary); }
.badge--medium .difficulty-badge__dot { background: var(--color-accent-amber); }
.badge--hard   .difficulty-badge__dot { background: var(--color-accent-red); }

.badge--easy   { color: #085041; }
.badge--medium { color: #633806; }
.badge--hard   { color: #791F1F; }

/* Difficulty bar */
.difficulty-bar {
  display: flex;
  gap: 3px;
}

.difficulty-bar__seg {
  width: 18px;
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-border);
}

.bar--easy   .difficulty-bar__seg.is-filled { background: var(--color-brand-secondary); }
.bar--medium .difficulty-bar__seg.is-filled { background: var(--color-accent-amber); }
.bar--hard   .difficulty-bar__seg.is-filled { background: var(--color-accent-red); }

/* Permit dots */
.permit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.scorecard__value--no   .permit-dot { background: var(--color-brand-secondary); }
.scorecard__value--yes  .permit-dot { background: var(--color-accent-red); }

/* Trust strip dots */
.trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--color-brand-secondary);
  flex-shrink: 0;
}

/* Eyebrow pill */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-brand-primary-dark);
  background: var(--color-brand-primary-light);
  border-radius: 100px;
  margin-bottom: var(--space-lg);
}


/* ==========================================================================
   14. HOMEPAGE
   ========================================================================== */

/* Hero */
.hero {
  background: var(--color-surface-white);
  padding: var(--space-3xl) 0;
  border-bottom: 1px solid var(--color-border);
}

.hero__content {
  max-width: 720px;
}

.hero__headline {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-lg);
}

.hero__sub {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-xl);
  max-width: 600px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.trust-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
}

@media (min-width: 640px) {
  .trust-strip { flex-direction: row; flex-wrap: wrap; gap: var(--space-lg); }
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Quick tools strip */
.tools-strip {
  padding: var(--space-2xl) 0;
  background: var(--color-surface-white);
  border-bottom: 1px solid var(--color-border);
}

.tools-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .tools-strip__grid { grid-template-columns: repeat(4, 1fr); }
}

.tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background: var(--color-surface-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.tool-card:hover {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary-light);
  text-decoration: none;
}

.tool-card__icon {
  font-size: 1.75rem;
  line-height: 1;
}

.tool-card__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.tool-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Latest guides section */
.latest-guides {
  padding: var(--space-3xl) 0;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}

.section-header__title {
  font-size: var(--text-xl);
}

.section-header__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-brand-primary);
  white-space: nowrap;
}

/* Seasonal section */
.seasonal-section {
  padding: var(--space-3xl) 0;
  background: var(--color-surface-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Tools preview (2-col on desktop) */
.tools-preview {
  padding: var(--space-3xl) 0;
}

.tools-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .tools-preview__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Social proof */
.social-proof {
  padding: var(--space-3xl) 0;
  background: var(--color-surface-white);
  border-top: 1px solid var(--color-border);
}

.social-proof__heading {
  margin-bottom: var(--space-xl);
  text-align: center;
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

.review-card {
  background: var(--color-surface-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.review-card__stars {
  font-size: 1rem;
  color: var(--color-accent-amber);
  margin-bottom: var(--space-sm);
}

.review-card__quote {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  font-style: normal;
}

.review-card__author {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   15. ARTICLE CARD
   ========================================================================== */

.article-card {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}

.article-card:hover {
  border-color: var(--color-border-strong);
}

.article-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-gray);
}

.article-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article-card:hover .article-card__thumb img {
  transform: scale(1.02);
}

.article-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
}

.article-card__meta-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.article-card__title {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.article-card__title a {
  color: var(--color-text-primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__title a:hover {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.article-card:visited .article-card__title a {
  color: var(--color-text-secondary);
}

.article-card__stats {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.article-card__stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.article-card__read-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-brand-primary);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* ==========================================================================
   16. ARCHIVE PAGE
   ========================================================================== */

.archive-header {
  background: var(--color-surface-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2xl) 0;
  margin-bottom: var(--space-xl);
}

.archive-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.archive-header__icon {
  font-size: 2rem;
  line-height: 1;
}

.archive-header__title {
  font-size: var(--text-2xl);
}

.archive-header__desc {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  max-width: 600px;
}

.archive-header__count {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--color-surface-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

/* Filter bar */
.archive-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--color-surface-white);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  min-height: 36px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.filter-btn:hover,
.filter-btn.is-active {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  background: var(--color-brand-primary-light);
}

.filter-sort {
  margin-left: auto;
}

/* Archive layout (2-col content + sidebar) */
.archive-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .archive-layout {
    grid-template-columns: 1fr 220px;
  }
}

/* ==========================================================================
   17. PAGINATION
   ========================================================================== */

.nav-links {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--space-2xl) 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.page-numbers:hover,
.page-numbers.current {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  text-decoration: none;
}

.page-numbers.current {
  background: var(--color-brand-primary-light);
}

/* ==========================================================================
   18. 404 PAGE
   ========================================================================== */

.error-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.error-404__inner {
  text-align: center;
  max-width: 540px;
  margin-inline: auto;
  padding: var(--space-4xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.error-404__icon {
  font-size: 3rem;
  line-height: 1;
}

.error-404__heading {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.error-404__sub {
  color: var(--color-text-secondary);
}

.error-404__search {
  width: 100%;
  max-width: 400px;
}

.error-404__popular-heading {
  font-size: var(--text-lg);
}

.error-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* ==========================================================================
   19. LOCAL PAGE
   ========================================================================== */

.local-hero {
  background: var(--color-surface-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3xl) 0;
  margin-bottom: var(--space-2xl);
}

.local-hero__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: var(--space-sm);
}

.local-hero__sub {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

.local-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.local-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
}

.local-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.local-stat__value {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text-primary);
}

.local-page .container > section {
  margin-bottom: var(--space-3xl);
}

.challenges-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (min-width: 640px) {
  .challenges-grid { grid-template-columns: repeat(2, 1fr); }
}

.challenge-card {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.challenge-card__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
  display: block;
}

.challenge-card__name {
  font-size: var(--text-base);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.challenge-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.permit-card {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.permit-card__row {
  font-size: var(--text-base);
}

.permit-card__note {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   20. SCORECARD
   ========================================================================== */

.scorecard {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.scorecard__heading {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.scorecard__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.scorecard__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.scorecard__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.scorecard__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: right;
}

.scorecard__value--permit {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
}

/* ==========================================================================
   21. CALLOUT BLOCKS
   ========================================================================== */

.callout {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-left: 3px solid;
  margin: var(--space-xl) 0;
}

.callout--tip {
  background: var(--color-brand-secondary-light);
  border-color: var(--color-brand-secondary);
  color: #085041;
}

.callout--warning {
  background: var(--color-accent-amber-light);
  border-color: var(--color-accent-amber);
  color: #633806;
}

.callout--danger {
  background: var(--color-accent-red-light);
  border-color: var(--color-accent-red);
  color: #791F1F;
}

.callout--wa {
  background: var(--color-brand-primary-light);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-dark);
  flex-direction: column;
  gap: var(--space-sm);
}

.callout__icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.callout__body {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.callout__body p:last-child { margin-bottom: 0; }

.callout__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.callout__label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand-primary);
}

.callout__title {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ==========================================================================
   22. STEPS
   ========================================================================== */

.steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-lg) 0;
}

.step {
  display: flex;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.step__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.step__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 500;
  flex-shrink: 0;
  z-index: 1;
}

.step__connector {
  flex: 1;
  width: 2px;
  background: var(--color-border);
  margin-top: var(--space-xs);
  min-height: 24px;
}

.step__content {
  padding-top: 4px;
  flex: 1;
  padding-bottom: var(--space-lg);
}

.step__title {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.step__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   23. PRO TIPS BLOCK
   ========================================================================== */

.pro-tips {
  background: var(--color-surface-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
}

.pro-tips__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.reviewer-avatar {
  flex-shrink: 0;
}

.reviewer-avatar__img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.reviewer-avatar__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 500;
}

.pro-tips__reviewer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pro-tips__name {
  font-size: var(--text-sm);
  font-weight: 500;
}

.pro-tips__creds {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.pro-tips__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
}

.pro-tips__item {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.pro-tips__item::before {
  content: '•';
  color: var(--color-brand-primary);
  flex-shrink: 0;
  font-weight: 500;
}

/* ==========================================================================
   24. TOOLS LIST
   ========================================================================== */

.tools-list {
  margin: var(--space-xl) 0;
}

.tools-list__heading {
  margin-bottom: var(--space-lg);
}

.tools-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  list-style: none;
}

@media (min-width: 640px) {
  .tools-list__grid { grid-template-columns: repeat(3, 1fr); }
}

.tools-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.tools-list__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1.4;
}

.tools-list__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tools-list__name {
  font-size: var(--text-sm);
  font-weight: 500;
}

.tools-list__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   25. FAQ ITEMS
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-lg);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-item__question {
  font-size: var(--text-base);
  font-weight: 400;
  margin: 0;
}

.faq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-lg) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  min-height: 44px;
}

.faq-item__toggle:hover {
  color: var(--color-brand-primary);
}

.faq-item__icon {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-item__toggle[aria-expanded="true"] .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__answer {
  padding-bottom: var(--space-lg);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.faq-item__answer[hidden] { display: none; }

/* ==========================================================================
   26. SIDEBAR
   ========================================================================== */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-lg));
    max-height: calc(100vh - var(--nav-height) - var(--space-2xl));
    overflow-y: auto;
  }
}

/* TOC */
.toc {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.toc__heading {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
}

.toc__item a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: 4px var(--space-sm);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  text-decoration: none;
  line-height: var(--leading-normal);
  transition: color 0.15s, border-color 0.15s;
}

.toc__item a:hover {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.toc__item.is-active a {
  color: var(--color-brand-primary);
  border-left-color: var(--color-brand-primary);
  background: var(--color-brand-primary-light);
}

/* Author card */
.author-card {
  display: flex;
  gap: var(--space-md);
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.author-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-card__reviewed-by {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.author-card__name {
  font-size: var(--text-sm);
  font-weight: 500;
}

.author-card__creds,
.author-card__license {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Helpfulness widget */
.helpfulness-widget {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.helpfulness-widget__question {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.helpfulness-widget__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.helpfulness-widget__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  background: var(--color-surface-gray);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  min-height: 44px;
  transition: border-color 0.15s, color 0.15s;
}

.helpfulness-widget__btn:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

.helpfulness-widget__thanks {
  font-size: var(--text-sm);
  color: var(--color-brand-secondary);
}

/* Sidebar archive */
.sidebar__section {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.sidebar__heading {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.sidebar__links,
.sidebar__popular {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
}

.sidebar__links a,
.sidebar__popular-item a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: block;
  padding: 4px 0;
}

.sidebar__links a:hover,
.sidebar__popular-item a:hover {
  color: var(--color-brand-primary);
}

.difficulty-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface-gray);
  text-decoration: none;
  color: var(--color-text-primary);
}

.difficulty-link:hover { text-decoration: none; background: var(--color-border); }

.difficulty-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.difficulty-link--easy   .difficulty-dot { background: var(--color-brand-secondary); }
.difficulty-link--medium .difficulty-dot { background: var(--color-accent-amber); }
.difficulty-link--hard   .difficulty-dot { background: var(--color-accent-red); }

/* ==========================================================================
   27. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-surface-gray);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3xl);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 2fr repeat(4, 1fr); }
}

.site-footer__heading {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.site-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-top: var(--space-sm);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
}

.site-footer__links a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  display: block;
  padding: 3px 0;
  transition: color 0.15s;
}

.site-footer__links a:hover {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}

.site-footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.site-footer__copy a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer__copy a:hover {
  color: var(--color-brand-primary);
  text-decoration: underline;
}


/* ==========================================================================
   28. NEWSLETTER BAR
   ========================================================================== */

.newsletter-bar {
  background: var(--color-brand-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  margin: var(--space-2xl) 0;
  color: #fff;
}

.newsletter-bar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .newsletter-bar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.newsletter-bar__heading {
  font-size: var(--text-lg);
  font-weight: 500;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.newsletter-bar__sub {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.newsletter-form__row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.newsletter-form__input {
  flex: 1;
  min-width: 200px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  min-height: 44px;
}

.newsletter-form__input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-form__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.2);
}

.newsletter-form__btn {
  background: #fff;
  color: var(--color-brand-primary);
  border-color: #fff;
}

.newsletter-form__btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-brand-primary-dark);
  border-color: rgba(255, 255, 255, 0.9);
}

.newsletter-form__note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/* ==========================================================================
   29. SEASONAL STRIP
   ========================================================================== */

.seasonal-strip__heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xl);
}

.seasonal-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .seasonal-strip__grid { grid-template-columns: repeat(4, 1fr); }
}

.seasonal-strip__season {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.seasonal-strip__season-name {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.seasonal-strip__tasks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.seasonal-strip__tasks li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  padding-left: var(--space-md);
  position: relative;
}

.seasonal-strip__tasks li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-brand-primary);
  font-weight: 700;
}

/* ==========================================================================
   30. PAGE HEADER (tools, glossary)
   ========================================================================== */

.page-header {
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.page-header__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: var(--space-sm);
}

.page-header__sub {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  margin: 0;
}

/* ==========================================================================
   31. TOOLS PAGE
   ========================================================================== */

.tools-page {
  padding-bottom: var(--space-4xl);
}

.tools-page__tool {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.tools-page__tool-heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tools-page__tool-desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 640px;
}

/* ==========================================================================
   32. GLOSSARY PAGE
   ========================================================================== */

.glossary-page {
  padding-bottom: var(--space-4xl);
}

.glossary-search {
  margin-top: var(--space-lg);
  max-width: 480px;
}

.glossary-search__input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-white);
  min-height: 44px;
}

.glossary-search__input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: var(--focus-ring);
}

.alphabet-index {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2xl);
}

.alphabet-index__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.alphabet-index__link:hover {
  background: var(--color-brand-primary-light);
  text-decoration: none;
}

.alphabet-index__disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.glossary-letter {
  margin-bottom: var(--space-2xl);
}

.glossary-letter__heading {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-brand-primary);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-brand-primary-light);
  margin-bottom: var(--space-lg);
}

.glossary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.glossary-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

@media (min-width: 640px) {
  .glossary-item {
    grid-template-columns: 200px 1fr;
    gap: var(--space-lg);
  }
}

.glossary-item__term {
  font-size: var(--text-base);
  font-weight: 500;
}

.glossary-item__term a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.glossary-item__term a:hover {
  color: var(--color-brand-primary);
  text-decoration: underline;
}

.glossary-item__def {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.glossary-item__guide-link {
  display: inline-block;
  margin-left: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-brand-primary);
  white-space: nowrap;
}

/* ==========================================================================
   33. QUICK ANSWER BLOCK
   ========================================================================== */

.quick-answer {
  background: var(--color-brand-primary-light);
  border: 1px solid rgba(24, 95, 165, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.quick-answer__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand-primary-dark);
  margin-bottom: var(--space-sm);
}

.quick-answer__text {
  color: var(--color-brand-primary-dark);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ==========================================================================
   34. CTA BOX
   ========================================================================== */

.cta-box {
  background: var(--color-surface-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  margin: var(--space-2xl) 0;
}

.cta-box__heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.cta-box__text {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 480px;
  margin-inline: auto;
}

.cta-box__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   35. MOBILE SCORECARD
   ========================================================================== */

.mobile-scorecard {
  margin-bottom: var(--space-lg);
}

@media (min-width: 1024px) {
  .mobile-scorecard { display: none; }
}

/* ==========================================================================
   36. SINGLE POST LAYOUT
   ========================================================================== */

.single-post {
  padding-bottom: var(--space-4xl);
}

.single-post__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .single-post__layout {
    grid-template-columns: var(--max-width-content) 260px;
  }
}

/* ==========================================================================
   37. ARTICLE HEADER & META
   ========================================================================== */

.article__header {
  margin-bottom: var(--space-2xl);
}

.article__title {
  margin: var(--space-sm) 0 var(--space-md);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.article__meta-item--reviewer {
  color: var(--color-brand-secondary);
  font-weight: 500;
}

.article__hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.article__hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   38. NO RESULTS
   ========================================================================== */

.no-results {
  padding: var(--space-3xl);
  text-align: center;
  background: var(--color-surface-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.no-results__heading {
  margin-bottom: var(--space-sm);
}

.no-results__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ==========================================================================
   39. SIDEBAR PROGRESS
   ========================================================================== */

.sidebar__progress-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  min-height: 20px;
}

/* ==========================================================================
   40. RELATED ARTICLES
   ========================================================================== */

.related-articles {
  margin: var(--space-2xl) 0;
}

.related-articles__heading {
  margin-bottom: var(--space-xl);
}