/* ========================= */
/* VARIABLES */
/* ========================= */

:root {
  --black: #111111;
  --white: #ffffff;
  --green: #1a8917;
  --green-light: #d4edda;
  --gray-100: #f9f9f9;
  --gray-200: #f2f2f2;
  --gray-300: #e5e5e5;
  --gray-400: #c4c4c4;
  --gray-500: #9b9b9b;
  --gray-600: #6b6b6b;
  --gray-700: #3d3d3d;
  --text-body: #242424;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ticker-height: 32px;
  --nav-height: 60px;
  --max-width: 1192px;
  --radius: 4px;
  --transition: 0.18s ease;
}

/* ========================= */
/* RESET */
/* ========================= */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ========================= */
/* TICKER BAR */
/* ========================= */

.ticker-bar {
  width: 100%;
  height: var(--ticker-height);
  background: var(--white);
  border-bottom: 1px solid var(--gray-300);
  position: sticky;
  top: 0;
  z-index: 1001;
  overflow: hidden;
}

.ticker-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ticker-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--gray-600);
  font-weight: 400;
  letter-spacing: 0.1px;
  flex-shrink: 0;
}

.ticker-edition {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--gray-700);
}

.ticker-flag { font-size: 12px; }

.ticker-divider {
  color: var(--gray-400);
  font-weight: 300;
}

.ticker-datetime { color: var(--gray-600); }

.ticker-right {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--gray-600);
  font-weight: 500;
  flex-shrink: 0;
}

.ticker-weather-icon { font-size: 13px; }

#ticker-temp {
  font-weight: 600;
  color: var(--gray-700);
}

/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar {
  width: 100%;
  height: var(--nav-height);
  position: sticky;
  top: var(--ticker-height);
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-300);
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.logo {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--black);
  text-decoration: none;
  user-select: none;
}

.logo span { color: var(--green); }

.nav-home-btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 20px;
  transition: var(--transition);
}

.nav-home-btn:hover {
  background: var(--gray-200);
  color: var(--black);
}

/* Category tabs in nav */
.nav-categories {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 8px;
}

.nav-categories::-webkit-scrollbar { display: none; }

.nav-cat-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: transparent;
  border: none;
  padding: 5px 13px;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-transform: capitalize;
}

.nav-cat-btn:hover {
  background: var(--gray-100);
  color: var(--black);
}

.nav-cat-btn.active {
  background: var(--black);
  color: var(--white);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Search in Navbar */
.nav-search-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.nav-search-input {
  width: 0;
  overflow: hidden;
  opacity: 0;
  border: none;
  background: var(--gray-100);
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 7px 14px;
  outline: none;
  transition: width 0.3s ease, opacity 0.3s ease;
  color: var(--black);
  pointer-events: none;
}

.nav-search-wrapper.open .nav-search-input {
  width: 200px;
  opacity: 1;
  pointer-events: all;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  text-decoration: none;
  transition: var(--transition);
  flex-shrink: 0;
}

.icon-btn:hover {
  background: var(--gray-200);
  color: var(--black);
}

/* ========================= */
/* FEATURED CAROUSEL */
/* ========================= */

.featured-section {

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #fafafa
    );

  border-bottom:
    1px solid var(--gray-300);

  padding:
    44px 0 40px;

}

.featured-inner {

  max-width:
    1280px;

  margin:
    0 auto;

  padding:
    0 28px;

}

.featured-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    26px;

}

.featured-label {

  font-family:
    var(--font-sans);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    2.4px;

  text-transform:
    uppercase;

  color:
    var(--gray-500);

}

/* ========================= */
/* WRAPPER */
/* ========================= */

.carousel-wrapper {

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

}

/* ========================= */
/* BUTTONS */
/* ========================= */

.carousel-btn {

  width:
    46px;

  height:
    46px;

  border-radius:
    50%;

  border:
    1px solid var(--gray-300);

  background:
    rgba(255,255,255,0.96);

  backdrop-filter:
    blur(10px);

  cursor:
    pointer;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--gray-700);

  transition:
    all 0.25s ease;

  flex-shrink:
    0;

  z-index:
    5;

  box-shadow:
    0 4px 18px rgba(0,0,0,0.04);

}

.carousel-btn:hover {

  background:
    var(--black);

  color:
    var(--white);

  border-color:
    var(--black);

  transform:
    scale(1.06);

}

.carousel-btn svg {

  width:
    20px;

  height:
    20px;

}

/* ========================= */
/* TRACK OUTER */
/* ========================= */

.carousel-track-outer {

  flex:
    1;

  overflow:
    hidden;

  position:
    relative;

  border-radius:
    22px;

}

/* ========================= */
/* TRACK */
/* ========================= */

.carousel-track {

  display:
    flex;

  gap:
    24px;

  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
    transform;

}

/* ========================= */
/* CARD */
/* ========================= */

.carousel-card {

  flex:
    0 0 100%;

  background:
    var(--white);

  border:
    1px solid rgba(0,0,0,0.06);

  border-radius:
    22px;

  overflow:
    hidden;

  cursor:
    pointer;

  transition:
    all 0.3s ease;

  text-decoration:
    none;

  color:
    inherit;

  box-shadow:
    0 10px 40px rgba(0,0,0,0.05);

}

.carousel-card:hover {

  transform:
    translateY(-4px);

  box-shadow:
    0 16px 48px rgba(0,0,0,0.10);

}

/* ========================= */
/* IMAGE */
/* ========================= */

.carousel-card-img {

  width:
    100%;

  height:
    440px;

  overflow:
    hidden;

  position:
    relative;

  background:
    linear-gradient(
      135deg,
      var(--gray-200),
      var(--gray-300)
    );

}

.carousel-card-img::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.50),
      rgba(0,0,0,0.05)
    );

}

.carousel-card-img img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;

  transition:
    transform 0.6s ease;

}

.carousel-card:hover
.carousel-card-img img {

  transform:
    scale(1.04);

}

.carousel-card-img-placeholder {

  width:
    100%;

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-family:
    var(--font-serif);

  font-size:
    24px;

  color:
    var(--gray-500);

  padding:
    30px;

  text-align:
    center;

}

/* ========================= */
/* BODY */
/* ========================= */

.carousel-card-body {

  padding:
    26px 30px 28px;

}

.carousel-card-cat {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    1.6px;

  text-transform:
    uppercase;

  color:
    var(--green);

  margin-bottom:
    14px;

}

.carousel-card-title {

  font-family:
    var(--font-serif);

  font-size:
    clamp(28px, 3vw, 40px);

  font-weight:
    700;

  line-height:
    1.1;

  color:
    var(--black);

  letter-spacing:
    -1px;

  margin-bottom:
    16px;

  max-width:
    92%;

}

.carousel-card-meta {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  font-size:
    14px;

  color:
    var(--gray-500);

}

/* ========================= */
/* DOTS */
/* ========================= */

.carousel-dots {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  margin-top:
    22px;

}

.carousel-dot {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--gray-300);

  border:
    none;

  cursor:
    pointer;

  transition:
    all 0.3s ease;

  padding:
    0;

}

.carousel-dot.active {

  width:
    28px;

  border-radius:
    20px;

  background:
    var(--black);

}

/* ========================= */
/* TABLET */
/* ========================= */

@media (max-width: 900px) {

  .carousel-card-img {

    height:
      340px;

  }

  .carousel-card-title {

    font-size:
      30px;

  }

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 768px) {

  .featured-section {

    padding:
      28px 0 26px;

  }

  .featured-inner {

    padding:
      0 16px;

  }

  .carousel-wrapper {

    gap:
      10px;

  }

  .carousel-btn {

    display:
      none;

  }

  .carousel-card {

    border-radius:
      16px;

  }

  .carousel-card-img {

    height:
      240px;

  }

  .carousel-card-body {

    padding:
      18px;

  }

  .carousel-card-title {

    font-size:
      24px;

    line-height:
      1.2;

    max-width:
      100%;

  }

  .carousel-card-meta {

    font-size:
      13px;

  }

}

/* ========================= */
/* SMALL MOBILE */
/* ========================= */

@media (max-width: 480px) {

  .carousel-card-img {

    height:
      200px;

  }

  .carousel-card-title {

    font-size:
      20px;

  }

}


/* ========================= */
/* CONTROLS BAR */
/* ========================= */

.controls-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: calc(var(--ticker-height) + var(--nav-height));
  z-index: 100;
}

.controls-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 24px;
  padding: 9px 16px;
  flex: 1;
  max-width: 380px;
  transition: var(--transition);
}

.search-box:focus-within {
  border-color: var(--black);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(17,17,17,0.06);
}

.search-box svg { color: var(--gray-500); flex-shrink: 0; }

.search-box input {
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--black);
  outline: none;
  width: 100%;
}

.search-box input::placeholder { color: var(--gray-500); }

.sort-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sort-label {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 500;
  margin-right: 4px;
}

.sort-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--gray-300);
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition);
}

.sort-btn.active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.sort-btn:not(.active):hover {
  background: var(--gray-100);
  color: var(--black);
}

/* ========================= */
/* CATEGORY SECTION HEADING */
/* ========================= */

.category-section-title {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 28px 0 0;
  margin-bottom: -4px;
  border-top: 2px solid var(--black);
  display: inline-block;
}

/* ========================= */
/* ARTICLES CONTAINER */
/* ========================= */

.articles-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ========================= */
/* ARTICLE CARD */
/* ========================= */

.article-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

.article-card:hover .card-title { color: var(--green); }
.article-card:hover .card-read-more { color: var(--black); }

.card-body { flex: 1; min-width: 0; }

.card-meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.card-author-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a8917, #0a5c10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-sans);
}

.card-author-name { font-size: 13px; font-weight: 600; color: var(--black); }

.card-category-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-light);
  padding: 2px 8px;
  border-radius: 10px;
}

.card-title {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.5vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
  margin-bottom: 8px;
  letter-spacing: -0.4px;
  transition: color var(--transition);
}

.card-preview {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
  font-weight: 300;
}

.card-meta-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
}

.card-date, .card-read-time {
  font-size: 13px;
  color: var(--gray-500);
}

.card-read-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  transition: color var(--transition);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: var(--transition);
}

.card-share-btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.card-thumbnail {
  width: 150px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--gray-200);
}

.card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-thumb-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
  text-align: center;
  padding: 12px;
}

/* ========================= */
/* LOADING / EMPTY STATES */
/* ========================= */

.loading-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 60px 0;
  color: var(--gray-500);
  font-size: 16px;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  padding: 60px 0;
  color: var(--gray-500);
  font-size: 16px;
}

/* ========================= */
/* ARTICLE VIEW */
/* ========================= */

.hidden { display: none !important; }

.article-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 48px 24px 60px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 36px;
  padding: 8px 0;
  transition: color var(--transition);
}

.back-btn:hover { color: var(--black); }
.back-btn:hover svg { transform: translateX(-3px); }
.back-btn svg { transition: transform var(--transition); }

.article-header { margin-bottom: 36px; }

.article-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.article-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--black);
  letter-spacing: -1.5px;
  margin-bottom: 22px;
}

.article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.article-author { display: flex; align-items: center; gap: 12px; }

.author-avatar-lg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a8917, #0a5c10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
}

.author-info { display: flex; flex-direction: column; gap: 2px; }
.author-info strong { font-size: 14px; font-weight: 600; color: var(--black); }
.author-info span { font-size: 12px; color: var(--gray-500); }

.article-actions { display: flex; align-items: center; gap: 8px; }

.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--gray-300);
  background: transparent;
  color: var(--gray-600);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.article-share-btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* ========================= */
/* MARKDOWN CONTENT */
/* ========================= */

.markdown {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.85;
  color: var(--text-body);
  margin-top: 36px;
}

.markdown h1, .markdown h2, .markdown h3, .markdown h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
  color: var(--black);
  letter-spacing: -0.5px;
}

.markdown h1 { font-size: 36px; margin: 52px 0 22px; }
.markdown h2 { font-size: 28px; margin: 44px 0 18px; }
.markdown h3 { font-size: 22px; margin: 36px 0 14px; }
.markdown h4 { font-size: 19px; margin: 28px 0 12px; }
.markdown p { margin-bottom: 28px; }
.markdown ul, .markdown ol { margin: 8px 0 28px 28px; }
.markdown li { margin-bottom: 10px; line-height: 1.75; }

.markdown pre {
  background: #1c1c1c;
  color: #e8e8e8;
  padding: 24px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 36px 0;
  font-size: 14px;
  line-height: 1.6;
}

.markdown code {
  font-size: 15px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.markdown pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
}

.markdown blockquote {
  border-left: 3px solid var(--black);
  padding: 4px 0 4px 22px;
  margin: 36px 0;
  color: var(--gray-600);
  font-style: italic;
  font-size: 21px;
  line-height: 1.7;
}

.markdown img {
  width: 100%;
  border-radius: 8px;
  margin: 36px 0;
}

.markdown a {
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.markdown a:hover { color: var(--green); }

.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 36px 0;
  font-family: var(--font-sans);
  font-size: 15px;
}

.markdown table th {
  background: var(--gray-100);
  font-weight: 600;
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  text-align: left;
}

.markdown table td {
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
}

.markdown hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 46px 0;
}

/* ========================= */
/* COMMENTS SECTION */
/* ========================= */

.comments-section {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--gray-200);
}

.comments-heading {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  letter-spacing: -0.3px;
}

.comment-form-wrapper {
  display: flex;
  gap: 14px;
  margin-bottom: 36px;
}

.comment-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-200);
  border: 1px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  flex-shrink: 0;
  margin-top: 2px;
}

.comment-form { flex: 1; }

.comment-name-input {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--black);
  outline: none;
  transition: var(--transition);
  margin-bottom: 8px;
  background: var(--white);
}

.comment-name-input:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(17,17,17,0.05);
}

.comment-textarea {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--black);
  outline: none;
  resize: vertical;
  line-height: 1.5;
  transition: var(--transition);
  background: var(--white);
  min-height: 80px;
}

.comment-textarea:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(17,17,17,0.05);
}

.comment-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.comment-submit-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 20px;
  border: none;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}

.comment-submit-btn:hover { background: var(--gray-700); }
.comment-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.comments-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-500);
  font-size: 14px;
  padding: 20px 0;
}

.comment-item {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  animation: fadeInUp 0.3s ease both;
}

.comment-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gray-300), var(--gray-400));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  flex-shrink: 0;
  font-family: var(--font-sans);
}

.comment-body { flex: 1; }

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

.comment-date {
  font-size: 11px;
  color: var(--gray-500);
}

.comment-text {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: 8px;
}

.comment-reply-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition);
}

.comment-reply-btn:hover { color: var(--black); }

.comment-replies {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--gray-200);
}

.reply-form {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.reply-input {
  flex: 1;
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  transition: var(--transition);
  background: var(--white);
}

.reply-input:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(17,17,17,0.05);
}

.reply-submit-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--gray-300);
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.reply-submit-btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.reply-name-input {
  width: 100px;
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  padding: 7px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  transition: var(--transition);
  flex-shrink: 0;
}

.reply-name-input:focus {
  border-color: var(--black);
}

/* ========================= */
/* TOAST */
/* ========================= */

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 24px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 9999;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========================= */
/* ANIMATIONS */
/* ========================= */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.article-card {
  animation: fadeInUp 0.4s ease both;
}

.article-card:nth-child(1) { animation-delay: 0.04s; }
.article-card:nth-child(2) { animation-delay: 0.08s; }
.article-card:nth-child(3) { animation-delay: 0.12s; }
.article-card:nth-child(4) { animation-delay: 0.16s; }
.article-card:nth-child(5) { animation-delay: 0.20s; }

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 900px) {
  .carousel-card {
    min-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 768px) {
  .ticker-bar { display: none; }
  .navbar { top: 0; padding: 0 16px; }
  .controls-bar { top: var(--nav-height); }

  .nav-home-btn { display: none; }
  .nav-categories { display: none; }

  .nav-search-wrapper.open .nav-search-input { width: 150px; }

  .featured-section { padding: 24px 0 20px; }
  .featured-inner { padding: 0 16px; }

  .carousel-card { min-width: calc(100% - 0px); }
  .carousel-btn { display: none; }

  .controls-inner {
    padding: 10px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .search-box { max-width: 100%; }
  .sort-controls { justify-content: flex-end; }

  .articles-container { padding: 0 16px 60px; }

  .article-card {
    flex-direction: column;
    gap: 14px;
    padding: 22px 0;
  }

  .card-thumbnail {
    width: 100%;
    height: 160px;
    order: -1;
  }

  .card-actions { align-self: flex-end; }

  .article-page { padding: 28px 16px 60px; }

  .article-byline {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .card-thumbnail { display: none; }
  .sort-label { display: none; }
}