/* AB-Car — performance magazine skin */
:root {
  --kc-navy: #0f141a;
  --kc-navy-2: #07090c;
  --kc-coral: #ff3d2e;
  --kc-coral-dark: #c9271c;
  --kc-teal: #1677ff;
  --kc-ink: #f4f7fa;
  --kc-muted: #98a3af;
  --kc-line: #303944;
  --kc-surface: #151b22;
  --kc-warm: #10151b;
  --kc-radius-sm: 2px;
  --kc-radius: 4px;
  --kc-radius-lg: 6px;
  --kc-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}

body { color: var(--kc-ink); background: #0a0d11; }
h1, h2, h3, h4 { color: #fff; font-weight: 800; letter-spacing: -.045em; }
a:hover { color: #ff6559; }
.site-header { background: rgba(7, 9, 12, .94); border-color: #252c34; }
.header-inner { min-height: 88px; }
.site-branding img, .custom-logo { max-width: 270px; max-height: 64px; }
.primary-nav a, .icon-button, .menu-toggle { color: #eef3f7; }
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--kc-coral); }
.primary-nav .sub-menu, .search-panel { background: #11171e; border-color: var(--kc-line); }
.icon-button:hover, .menu-toggle:hover { background: #202832; }
.header-cta { color: #fff; background: var(--kc-coral); border-color: var(--kc-coral); border-radius: 2px; transform: skew(-5deg); }
.header-cta:hover { background: #ff5d51; border-color: #ff5d51; }
.header-cta::first-line { transform: skew(5deg); }
.search-field { color: #fff; background: #151c24; border-color: #3b4652; }
.search-submit { background: var(--kc-coral); border-color: var(--kc-coral); }

.abc-hero { position: relative; min-height: clamp(540px, 72vh, 760px); overflow: hidden; background: #05070a; }
.abc-hero article { min-height: inherit; }
.abc-hero-media { position: absolute; inset: 0; }
.abc-hero-media img, .abc-hero-media .placeholder-image { width: 100%; height: 100%; object-fit: cover; }
.abc-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,10,.96) 0%, rgba(5,7,10,.77) 42%, rgba(5,7,10,.14) 78%), linear-gradient(0deg, rgba(5,7,10,.75), transparent 42%); }
.abc-hero::after { content: ""; position: absolute; right: -7vw; bottom: 9%; z-index: 1; width: 43vw; height: 6px; background: var(--kc-coral); transform: rotate(-14deg); transform-origin: right center; }
.abc-hero-copy { position: relative; z-index: 2; display: flex; min-height: inherit; max-width: 820px; margin-left: max(20px, calc((100% - 1240px)/2)); padding: clamp(90px, 12vh, 145px) 20px 70px 0; flex-direction: column; align-items: flex-start; justify-content: center; }
.abc-hero-copy .category-pill { color: #fff; background: var(--kc-coral); border-radius: 1px; }
.abc-hero-copy h1 { max-width: 12ch; margin: 18px 0; font-size: clamp(3rem, 7vw, 6.8rem); font-style: italic; line-height: .92; text-transform: uppercase; }
.abc-hero-copy h1 a:hover { color: #fff; }
.abc-hero-copy > div { max-width: 55ch; color: #c2cad2; font-size: 1.08rem; }
.abc-hero-copy .post-meta { color: #aeb8c1; }
.abc-hero-copy .read-more { color: #fff; background: transparent; border: 1px solid var(--kc-coral); border-radius: 0; }
.abc-hero-copy .read-more:hover { background: var(--kc-coral); }

.abc-ticker { background: var(--kc-teal); border-block: 1px solid #3690ff; }
.abc-ticker .kc-container { display: flex; min-height: 62px; align-items: stretch; overflow: hidden; }
.abc-ticker strong { display: flex; padding: 0 28px 0 0; align-items: center; color: #fff; font-size: .8rem; letter-spacing: .12em; }
.abc-ticker a { display: flex; min-width: 260px; padding: 0 28px; align-items: center; gap: 10px; color: #fff; border-left: 1px solid rgba(255,255,255,.28); font-weight: 700; white-space: nowrap; }
.abc-ticker small { color: rgba(255,255,255,.7); text-transform: uppercase; }

.abc-content { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, .75fr); gap: clamp(35px, 5vw, 72px); padding-block: 72px; }
.abc-content .section-heading h2 { padding-left: 0; font-size: clamp(2rem, 4vw, 3.4rem); font-style: italic; text-transform: uppercase; }
.abc-content .section-heading h2::before { display: none; }
.abc-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.abc-feature-grid article { overflow: hidden; background: #151b22; border: 1px solid var(--kc-line); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.abc-feature-media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.abc-feature-media img, .abc-feature-media .placeholder-image { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.abc-feature-grid article:hover img { transform: scale(1.035); }
.abc-feature-grid article > div { padding: 24px; }
.abc-feature-grid h3 { margin: 2px 0 12px; font-size: clamp(1.35rem, 2.2vw, 2rem); }
.abc-feature-grid .read-more { padding: 0; color: #bfc7ce; border: 0; }
.abc-feature-grid .category-pill { background: var(--kc-teal); }

.abc-ranking { padding: 28px; background: #0f141a; border-top: 5px solid var(--kc-coral); }
.abc-ranking h2 { font-size: 1.45rem; text-transform: uppercase; }
.abc-ranking ol { padding: 0; margin: 0; list-style: none; }
.abc-ranking li { display: grid; grid-template-columns: 50px 1fr 58px; gap: 14px; padding: 20px 0; align-items: center; border-top: 1px solid var(--kc-line); }
.abc-ranking li > span { color: var(--kc-coral); font-size: 1.6rem; font-weight: 900; font-style: italic; }
.abc-ranking li a { font-weight: 750; line-height: 1.25; }
.abc-ranking li img { width: 58px; height: 48px; object-fit: cover; }

.abc-publish { padding: 58px 0; background: var(--kc-coral); }
.abc-publish .kc-container { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.abc-publish h2 { max-width: 18ch; margin: 0; font-size: clamp(2rem, 4vw, 4rem); font-style: italic; text-transform: uppercase; }
.abc-publish .button { color: #fff; background: #090c10; border-color: #090c10; border-radius: 0; }

.post-card, .compact-card, .focus-story-inner, .no-results, .page-numbers, .content-area, .sidebar .widget, .comments-area { color: var(--kc-ink); background: #151b22; border-color: var(--kc-line); }
.card-title, .focus-story-copy h3, .focus-story-inner .section-heading h2 { color: #fff; }
.page-header, .single-hero { background: #0f141a; border-color: var(--kc-line); }
.single-content-wrap { color: #d3d9df; }
.single-featured { border-radius: 2px; }
.site-footer { color: #b7c0c9; background: #07090c; border-top: 1px solid #242c35; }
.footer-title, .footer-menu a { color: #fff; }

@media (max-width: 1050px) {
  .abc-content { grid-template-columns: 1fr; }
  .abc-ranking ol { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 28px; }
}
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .abc-hero { min-height: 610px; }
  .abc-hero-copy { margin-left: 20px; padding-right: 20px; }
  .abc-hero-copy h1 { font-size: clamp(2.6rem, 13vw, 4.4rem); }
  .abc-ticker a:nth-of-type(n+3) { display: none; }
  .abc-feature-grid { grid-template-columns: 1fr; }
  .abc-ranking ol { display: block; }
  .abc-publish .kc-container { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .header-cta { min-height: 40px; padding: 8px 10px; font-size: .68rem; }
  .search-toggle { display: none; }
  .site-branding img, .custom-logo { max-width: 145px; }
  .abc-ticker strong { padding-right: 14px; }
  .abc-ticker a { min-width: 200px; padding-inline: 14px; font-size: .78rem; }
}
