/* [content card type] — dispatch cards */
.dispatch-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
  text-decoration: none;
  color: var(--c-text);
}
.dispatch-card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--sh-glow);
  transform: translateY(-3px);
  color: var(--c-text);
}
.dispatch-card-img {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--c-surface2);
}
.dispatch-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr-slow);
}
.dispatch-card:hover .dispatch-card-img img { transform: scale(1.04); }
.dispatch-card-body { padding: var(--sp-20) var(--sp-24); flex: 1; display: flex; flex-direction: column; }
.dispatch-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}
.dispatch-tag {
  font-family: var(--ff-head);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(0,212,180,.1);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-sm);
}
.dispatch-date { font-size: var(--fs-xs); color: var(--c-muted); }
.dispatch-card-title {
  font-family: var(--ff-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  margin-bottom: var(--sp-8);
}
.dispatch-card-excerpt {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.6;
  flex: 1;
}
.dispatch-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--c-border);
}
.dispatch-author { font-size: var(--fs-xs); color: var(--c-muted); }
.dispatch-read { font-size: var(--fs-xs); color: var(--c-muted); }

/* text-only card variant */
.dispatch-card-text {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-24);
  transition: border-color var(--tr-base), box-shadow var(--tr-base);
  text-decoration: none;
  color: var(--c-text);
}
.dispatch-card-text:hover {
  border-color: var(--c-accent);
  box-shadow: var(--sh-glow);
  color: var(--c-text);
}

/* [unique component] — mechanic breakdown panel */
.mechanic-panel {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--sp-20) var(--sp-24);
  margin: var(--sp-32) 0;
}
.mechanic-panel-label {
  font-family: var(--ff-head);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-8);
}
.mechanic-panel p { color: var(--c-text); margin-bottom: 0; }

/* signal board — homepage unique component */
.signal-board {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.signal-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-20) var(--sp-24);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface2);
}
.signal-board-title {
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.signal-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: s4cni-pulse 2s ease-in-out infinite;
}
.signal-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-24);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--tr-fast);
  text-decoration: none;
  color: var(--c-text);
}
.signal-item:last-child { border-bottom: none; }
.signal-item:hover { background: var(--c-surface2); color: var(--c-text); }
.signal-item-index {
  font-family: var(--ff-head);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-dim);
  min-width: 24px;
  padding-top: 3px;
}
.signal-item-content { flex: 1; }
.signal-item-title {
  font-family: var(--ff-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-med);
  margin-bottom: var(--sp-4);
  line-height: 1.3;
}
.signal-item-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.signal-item-tag {
  color: var(--c-accent);
  font-weight: var(--fw-semi);
}
.signal-item-arrow {
  color: var(--c-dim);
  font-size: var(--fs-lg);
  transition: transform var(--tr-fast), color var(--tr-fast);
  align-self: center;
}
.signal-item:hover .signal-item-arrow { transform: translateX(4px); color: var(--c-accent); }

/* filter tabs */
.filter-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-bottom: var(--sp-32);
}
.filter-tab {
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--tr-fast);
}
.filter-tab:hover { border-color: var(--c-accent); color: var(--c-text); }
.filter-tab.active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
}

/* article body content */
.article-body { max-width: 720px; }
.article-body h2 { font-size: var(--fs-xl); margin: var(--sp-40) 0 var(--sp-16); }
.article-body h3 { font-size: var(--fs-lg); margin: var(--sp-32) 0 var(--sp-12); }
.article-body p { font-size: var(--fs-base); line-height: 1.75; color: var(--c-text); margin-bottom: var(--sp-20); }
.article-body ul, .article-body ol {
  margin: var(--sp-20) 0;
  padding-left: var(--sp-24);
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: var(--sp-8); line-height: 1.65; }
.article-body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body blockquote {
  border-left: 3px solid var(--c-accent);
  padding: var(--sp-16) var(--sp-24);
  margin: var(--sp-32) 0;
  background: var(--c-surface2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
  color: var(--c-muted);
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-32) 0;
  font-size: var(--fs-sm);
}
.article-body th {
  background: var(--c-surface2);
  padding: var(--sp-12) var(--sp-16);
  text-align: left;
  font-family: var(--ff-head);
  font-weight: var(--fw-semi);
  border-bottom: 2px solid var(--c-border);
}
.article-body td {
  padding: var(--sp-12) var(--sp-16);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-muted);
}
.article-body tr:last-child td { border-bottom: none; }
.article-body code {
  font-size: 0.875em;
  background: var(--c-surface2);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-family: 'Courier New', monospace;
  color: var(--c-accent);
}

/* article layout */
.article-header { padding: var(--sp-48) 0 var(--sp-32); }
.article-hero-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-40);
  background: var(--c-surface2);
}
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-16);
  margin-bottom: var(--sp-20);
}
.article-title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-16);
  line-height: 1.25;
}
.article-deck {
  font-size: var(--fs-md);
  color: var(--c-muted);
  margin-bottom: 0;
  line-height: 1.6;
}
.article-author-row {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-20) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-40);
}
.author-info { display: flex; flex-direction: column; gap: var(--sp-4); }
.author-name {
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text);
}
.author-role { font-size: var(--fs-xs); color: var(--c-muted); }

/* related posts */
.related-section { margin-top: var(--sp-64); padding-top: var(--sp-48); border-top: 1px solid var(--c-border); }
.related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-20);
  margin-top: var(--sp-24);
}
.related-grid > * { flex: 1 1 calc(50% - var(--sp-10)); min-width: 240px; }

/* article nav */
.article-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--sp-16);
  margin-top: var(--sp-48);
  padding-top: var(--sp-40);
  border-top: 1px solid var(--c-border);
}
.article-nav-link {
  flex: 1;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-20);
  transition: border-color var(--tr-base);
  text-decoration: none;
  color: var(--c-text);
}
.article-nav-link:hover { border-color: var(--c-accent); color: var(--c-text); }
.article-nav-link.next { text-align: right; }
.article-nav-dir { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-8); text-transform: uppercase; letter-spacing: 0.08em; }
.article-nav-title { font-family: var(--ff-head); font-size: var(--fs-sm); font-weight: var(--fw-semi); }

/* forms */
.form-group { margin-bottom: var(--sp-20); }
.form-label {
  display: block;
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--c-text);
  margin-bottom: var(--sp-8);
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-12) var(--sp-16);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--c-text);
  transition: border-color var(--tr-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--c-dim); }
.form-error {
  display: none;
  font-size: var(--fs-xs);
  color: #ff6b6b;
  margin-top: var(--sp-4);
}
.form-error.visible { display: block; }
.form-success {
  display: none;
  background: rgba(0,212,180,.1);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--sp-20) var(--sp-24);
  font-family: var(--ff-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-med);
  color: var(--c-accent);
}
.form-success.visible { display: block; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  padding: var(--sp-12) var(--sp-24);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--tr-fast);
  border: 1px solid transparent;
  text-decoration: none;
}
.btn-primary {
  background: var(--c-accent);
  color: var(--c-bg);
  border-color: var(--c-accent);
}
.btn-primary:hover { background: var(--c-accent-d); border-color: var(--c-accent-d); color: var(--c-bg); }
.btn-outline {
  background: transparent;
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.btn-outline:hover { background: var(--c-accent); color: var(--c-bg); }
.btn-ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* CTA / newsletter block */
.newsletter-block {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-32) var(--sp-40);
  margin: var(--sp-48) 0;
}
.newsletter-block h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-8);
}
.newsletter-block p { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-20); }
.newsletter-form {
  display: flex;
  gap: var(--sp-12);
  flex-wrap: wrap;
}
.newsletter-form .form-input { flex: 1; min-width: 200px; }

/* what we cover section */
.coverage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
}
.coverage-item {
  flex: 1 1 calc(33.333% - var(--sp-12));
  min-width: 200px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-24);
  transition: border-color var(--tr-base);
}
.coverage-item:hover { border-color: var(--c-accent); }
.coverage-icon {
  width: 40px; height: 40px;
  color: var(--c-accent);
  margin-bottom: var(--sp-16);
}
.coverage-item h4 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-8);
}
.coverage-item p { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 0; }

/* counter stats */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-32);
  margin: var(--sp-48) 0;
}
.stat-item { flex: 1 1 160px; }
.stat-number {
  font-family: var(--ff-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--c-accent);
  line-height: 1;
  margin-bottom: var(--sp-8);
}
.stat-label { font-size: var(--fs-sm); color: var(--c-muted); }

/* tabs switcher */
.tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-32);
  gap: var(--sp-4);
}
.tab-btn {
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  padding: var(--sp-12) var(--sp-20);
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--tr-fast), border-color var(--tr-fast);
  background: none;
  cursor: pointer;
}
.tab-btn:hover { color: var(--c-text); }
.tab-btn.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* about team */
.team-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-24);
}
.team-card-name {
  font-family: var(--ff-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-4);
}
.team-card-role { font-size: var(--fs-sm); color: var(--c-accent); margin-bottom: var(--sp-16); }
.team-card-bio { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.65; margin-bottom: var(--sp-16); }
.team-card-topics { font-size: var(--fs-xs); color: var(--c-dim); }
.team-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-sm);
  color: var(--c-accent);
  margin-top: var(--sp-12);
}
.team-card-link:hover { color: var(--c-accent-d); }

/* legal pages */
.legal-body { max-width: 720px; }
.legal-body h2 { font-size: var(--fs-xl); margin: var(--sp-40) 0 var(--sp-12); }
.legal-body h3 { font-size: var(--fs-lg); margin: var(--sp-28) 0 var(--sp-8); }
.legal-body p { color: var(--c-muted); line-height: 1.75; margin-bottom: var(--sp-16); }
.legal-body ul { list-style: disc; padding-left: var(--sp-24); margin-bottom: var(--sp-16); }
.legal-body li { color: var(--c-muted); margin-bottom: var(--sp-8); }
.legal-updated {
  font-size: var(--fs-sm);
  color: var(--c-dim);
  margin-bottom: var(--sp-40);
  font-style: italic;
}

/* [page-specific styles] — dispatches index */
.dispatches-hero {
  padding: var(--sp-48) 0 var(--sp-40);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-48);
}
.dispatches-hero h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-12); }
.dispatches-hero p { color: var(--c-muted); max-width: 560px; margin-bottom: 0; }

/* accordion FAQ */
.accordion { border-top: 1px solid var(--c-border); }
.accordion-item { border-bottom: 1px solid var(--c-border); }
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-20) 0;
  text-align: left;
  font-family: var(--ff-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-med);
  color: var(--c-text);
  background: none;
  cursor: pointer;
  gap: var(--sp-16);
  transition: color var(--tr-fast);
}
.accordion-trigger:hover { color: var(--c-accent); }
.accordion-icon {
  width: 20px; height: 20px;
  color: var(--c-dim);
  flex-shrink: 0;
  transition: transform var(--tr-base), color var(--tr-base);
}
.accordion-item.open .accordion-icon { transform: rotate(45deg); color: var(--c-accent); }
.accordion-body {
  display: none;
  padding: 0 0 var(--sp-20);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.7;
}
.accordion-item.open .accordion-body { display: block; }