/* ==========================================================================
   Counter News — a modern tech-news theme.
   Override layer on the core main.css (loaded first), plus news components.
   Mobile-first throughout; the mobile menu comes from the core stylesheet.
   ========================================================================== */

:root {
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: var(--font-body);
  --accent: #e5372b;
  --bg: #ffffff; --bg-soft: #f4f5f7; --surface: #ffffff;
  --line: #e6e8eb; --text: #14181f; --muted: #626a76;
  --radius: 10px; --measure: 40rem; --wide: 76rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0e12; --bg-soft: #14171d; --surface: #14171d;
    --line: #262b33; --text: #eef1f5; --muted: #98a1af; --accent: #ff5a4d;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0e12; --bg-soft: #14171d; --surface: #14171d;
  --line: #262b33; --text: #eef1f5; --muted: #98a1af; --accent: #ff5a4d;
}
:root[data-theme="light"] {
  --bg: #ffffff; --bg-soft: #f4f5f7; --surface: #ffffff;
  --line: #e6e8eb; --text: #14181f; --muted: #626a76; --accent: #e5372b;
}

h1, h2, h3, h4 { letter-spacing: -0.025em; font-weight: 700; }

/* ---- header ------------------------------------------------------------ */
.cn-top { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.cn-top__inner { display: flex; align-items: center; gap: 1rem; width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto; height: 3.9rem; }
.cn-logo { display: inline-flex; align-items: baseline; gap: .5rem; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.03em; text-decoration: none; color: var(--text); }
.cn-logo b { color: var(--accent); }
.cn-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.cn-nav .menu-links a { padding: .4rem .7rem; text-decoration: none; color: var(--muted); font-weight: 560; font-size: var(--step--1); }
.cn-nav .menu-links a:hover, .cn-nav .menu-links a[aria-current="page"] { color: var(--text); }
.cn-nav .icon-btn { display: inline-flex; padding: .5rem; color: var(--muted); background: none; border: 0; cursor: pointer; }
.cn-nav .icon-btn:hover { color: var(--text); }

/* ---- reading progress bar ---------------------------------------------- */
.cn-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 60; transition: width .1s linear; }

/* ---- featured lead ----------------------------------------------------- */
.cn-featured { display: grid; gap: clamp(1.25rem, 4vw, 2.25rem); margin-block: clamp(1.5rem, 4vw, 2.75rem); text-decoration: none; color: inherit; align-items: center; }
.cn-featured__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-soft); }
.cn-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cn-featured:hover .cn-featured__media img { transform: scale(1.03); }
.cn-featured__title { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); line-height: 1.05; margin-block: .5rem .6rem; }
.cn-featured__excerpt { color: var(--muted); font-size: var(--step-0); max-width: 42ch; }
@media (min-width: 52rem) { .cn-featured { grid-template-columns: 1.15fr 1fr; } }

/* ---- section heads ----------------------------------------------------- */
.cn-sec-head { display: flex; align-items: baseline; gap: 1rem; margin-block: clamp(1.5rem, 4vw, 2.5rem) 1.25rem; border-top: 2px solid var(--text); padding-top: .8rem; }
.cn-sec-head h2 { font-size: var(--step-1); letter-spacing: -0.01em; }
.cn-sec-head a { margin-left: auto; font-size: var(--step--1); color: var(--muted); text-decoration: none; }
.cn-sec-head a:hover { color: var(--accent); }

/* ---- card grid --------------------------------------------------------- */
.cn-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .cn-grid { grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); } }

.cn-card { display: grid; gap: .7rem; text-decoration: none; color: inherit; }
.cn-card__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-soft); }
.cn-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cn-card:hover .cn-card__media img { transform: scale(1.04); }
.cn-card__title { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.02em; }
.cn-card:hover .cn-card__title { color: var(--accent); }
.cn-card__excerpt { color: var(--muted); font-size: var(--step--1); }

/* ---- category label + meta -------------------------------------------- */
.cn-cat { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cn-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: var(--step--1); color: var(--muted); }
.cn-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

/* ---- article ----------------------------------------------------------- */
.cn-article { width: min(100% - var(--gutter) * 2, 46rem); margin-inline: auto; }
.cn-article__head { padding-block: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 3vw, 1.75rem); }
.cn-article__head h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); line-height: 1.05; margin-block: .6rem .9rem; }
.cn-article__cover { width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto; margin-bottom: clamp(1.25rem, 4vw, 2.5rem); }
.cn-article__cover img { width: 100%; max-height: 70vh; object-fit: cover; border-radius: var(--radius); }

.cn-related { border-top: 1px solid var(--line); margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.5rem, 4vw, 2.5rem); }

/* ---- footer ------------------------------------------------------------ */
.cn-foot { border-top: 1px solid var(--line); margin-top: clamp(3rem, 8vw, 6rem); padding-block: clamp(2rem, 5vw, 3.5rem); }
.cn-foot__inner { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: baseline; width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto; }
.cn-foot__inner a { color: var(--muted); text-decoration: none; }
.cn-foot__inner a:hover { color: var(--text); }
.cn-foot__brand { font-weight: 800; letter-spacing: -0.02em; color: var(--text); }