/* "China Auto Clans" longread — design tokens and styles per the design
   handoff README (special projects/China Cars). Namespace: all classes
   prefixed "cac-" (this design only) — see longread_islamic_finance for
   the sibling convention. Mobile-first; ~720px is the desktop breakpoint. */

:root{
  --cac-bg:#15120f;
  --cac-panel:#1e1912;
  --cac-panel-dark:#0c0a08;
  --cac-border:#3a3229;
  --cac-text:#ece3d0;
  --cac-text-2:#a89d8a;
  --cac-text-3:#6b6255;
  --cac-red:#d6483f;
  --cac-red-dark:#7c2020;
  --cac-red-hover:#b53430;
  --cac-gold:#c9a24b;
  --cac-max:1180px;
}

body{margin:0;background:var(--cac-bg)}
.cac-root{background:var(--cac-bg);color:var(--cac-text);font-family:'Manrope',sans-serif;min-height:100vh;overflow-x:hidden}
.cac-root *{box-sizing:border-box}
/* No blanket `a{color:...}` here — every interactive element below already
   sets its own explicit color, and a blanket rule on `.cac-root a` would
   out-specificity single-class component rules (.cac-nav__pill, .cac-back,
   the shared .lang-switcher__link{color:inherit}), overriding them with
   red/gold regardless of what each component actually wants. */
.cac-root a{text-decoration:none}
.cac-root ::selection{background:var(--cac-red-hover);color:var(--cac-text)}
.cac-section{max-width:var(--cac-max);margin:0 auto;padding:0 32px}
@media (max-width:720px){.cac-section{padding:0 18px}}

/* ---- Sticky nav ---- */
.cac-nav{position:sticky;top:0;z-index:40;background:rgba(21,18,15,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--cac-border)}
.cac-nav__inner{display:flex;align-items:center;gap:24px;padding:14px 32px;max-width:var(--cac-max);margin:0 auto}
@media (max-width:720px){.cac-nav__inner{padding:12px 18px;gap:12px}}
.cac-nav__logo{background:var(--cac-panel-dark);border-radius:6px;padding:6px 12px;flex-shrink:0;display:flex;align-items:center}
.cac-nav__logo img{display:block;height:18px;width:auto}
.cac-nav__pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;-ms-overflow-style:none}
.cac-nav__pills::-webkit-scrollbar{display:none}
.cac-nav__pill{flex-shrink:0;border-radius:999px;border:1px solid var(--cac-border);background:var(--cac-panel);color:var(--cac-text);font-size:12px;padding:7px 14px;white-space:nowrap;transition:.15s}
.cac-nav__pill:hover,.cac-nav__pill.is-active{border-color:var(--cac-red-hover);color:var(--cac-text)}

/* ---- Language switcher ---- */
/* Per the design (README §1): "Ру ▾" is always a dropdown button, not just
   below the shared component's 640px mobile breakpoint — override the
   shared display toggle unconditionally, scoped to this page's nav only
   (the shared CSS's own comment asks for exactly this: a more specific
   selector here rather than editing shared/css/language_switcher.css). */
.cac-nav .lang-switcher{display:none}
.cac-nav .lang-switcher-dd{display:block}
/* And restyle it from the shared component's default gold/dark-green
   theme (built for the Islamic Finance longread) to this design's tokens. */
.cac-nav .lang-switcher-dd summary{color:var(--cac-text);background:var(--cac-panel);border:1px solid var(--cac-border)}
.cac-nav .lang-switcher-dd summary:hover{border-color:var(--cac-red-hover)}
.cac-nav .lang-switcher-dd__panel{background:var(--cac-panel);border:1px solid var(--cac-border)}
.cac-nav .lang-switcher-dd__panel .lang-switcher__link{color:var(--cac-text)}
.cac-nav .lang-switcher-dd__panel .lang-switcher__link.is-active{color:var(--cac-gold);background:rgba(201,162,75,.15)}
.cac-nav .lang-switcher-dd__panel .lang-switcher__link:hover{background:rgba(236,227,208,.08)}

/* ---- Hero ---- */
.cac-hero{position:relative;padding:70px 18px 50px;text-align:center;overflow:hidden}
@media (min-width:721px){.cac-hero{padding:150px 32px 110px}}
.cac-hero__rings{position:absolute;top:50%;left:50%;pointer-events:none;z-index:0}
.cac-hero__ring{position:absolute;top:50%;left:50%;border-radius:50%;transform:translate(-50%,-50%)}
.cac-hero__ring--outer{width:340px;height:340px;border:1px solid var(--cac-border);animation:cac-ring-spin 90s linear infinite}
.cac-hero__ring--inner{width:230px;height:230px;border:1px dashed var(--cac-red-dark);animation:cac-ring-spin-rev 70s linear infinite}
@media (min-width:721px){
  .cac-hero__ring--outer{width:620px;height:620px}
  .cac-hero__ring--inner{width:420px;height:420px}
}
@keyframes cac-ring-spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes cac-ring-spin-rev{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
@media (prefers-reduced-motion: reduce){.cac-hero__ring{animation:none !important}}
.cac-hero__content{position:relative;z-index:1;max-width:820px;margin:0 auto}
.cac-eyebrow{font-family:'JetBrains Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--cac-gold);margin:0 0 18px}
.cac-h1{font-family:'Yeseva One',serif;font-size:clamp(30px,8vw,68px);line-height:1.08;color:var(--cac-text);margin:0 0 20px}
.cac-subhead{font-size:16px;line-height:1.6;color:var(--cac-text-2);max-width:720px;margin:0 auto 28px}
@media (min-width:721px){.cac-subhead{font-size:19px}}
.cac-scroll-cue{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cac-text-3);margin-bottom:40px}
.cac-hero__image{max-width:100%;height:auto;mix-blend-mode:screen;margin:0 auto;display:block}

/* ---- Stat ribbon ---- */
.cac-stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--cac-border);border-bottom:1px solid var(--cac-border);padding:0 18px}
@media (min-width:721px){.cac-stats{grid-template-columns:repeat(4,1fr);padding:0 32px}}
.cac-stat{min-width:0;padding:28px 20px;text-align:center;border-right:1px solid var(--cac-border);border-bottom:1px solid var(--cac-border);opacity:0;transform:translateY(14px);transition:opacity .7s ease-out,transform .7s ease-out}
.cac-stat:nth-child(2n){border-right:none}
@media (min-width:721px){
  .cac-stat{border-bottom:none}
  .cac-stat:nth-child(2n){border-right:1px solid var(--cac-border)}
  .cac-stat:last-child{border-right:none}
}
.cac-stat.is-visible{opacity:1;transform:translateY(0)}
.cac-stat__value{font-family:'Yeseva One',serif;font-size:30px;color:var(--cac-red);margin:0 0 6px}
@media (min-width:721px){.cac-stat__value{font-size:38px}}
.cac-stat__label{font-size:13px;color:var(--cac-text-2);line-height:1.4;margin:0}
@media (min-width:721px){.cac-stat__label{font-size:14px}}

/* ---- Leaderboard ---- */
.cac-lb{padding-top:56px;padding-bottom:56px}
.cac-h2{font-family:'Yeseva One',serif;font-size:clamp(24px,4.5vw,34px);color:var(--cac-text);margin:0 0 14px}
.cac-lead{font-size:15px;line-height:1.6;color:var(--cac-text-2);max-width:760px;margin:0 0 36px}
@media (min-width:721px){.cac-lead{font-size:16px}}
.cac-lb__row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
@media (min-width:721px){.cac-lb__row{display:grid;grid-template-columns:190px 1fr 100px;align-items:center;gap:14px}}
.cac-lb__label{font-size:14px;font-weight:700;color:var(--cac-text)}
.cac-lb__track{height:18px;background:var(--cac-panel);border-radius:4px;overflow:hidden}
.cac-lb__fill{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--cac-red-dark),var(--cac-red));transition:width 1.1s cubic-bezier(0.16,1,0.3,1)}
.cac-lb__row.is-visible .cac-lb__fill{width:var(--cac-fill)}
.cac-lb__value{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--cac-gold);text-align:right}
@media (max-width:720px){.cac-lb__value{text-align:left}}
.cac-lb__footnote{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cac-text-3);margin-top:20px}

/* ---- Directory grid ---- */
.cac-directory{padding-top:56px;padding-bottom:56px}
.cac-dir-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
@media (min-width:560px){.cac-dir-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
@media (min-width:721px){.cac-dir-grid{gap:20px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}}
.cac-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--cac-panel);border:1px solid var(--cac-border);border-radius:10px;padding:18px;transition:border-color .15s}
@media (min-width:721px){.cac-card{padding:24px}}
.cac-card:hover{border-color:var(--cac-red-hover)}
.cac-card__logo{width:168px;height:168px;border-radius:24px;background:var(--cac-panel-dark);border:1px solid var(--cac-border);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--cac-text-3);margin-bottom:14px}
.cac-card__logo img,.cac-group-header__logo img,.cac-subbrand-card__logo img,.cac-brand-header__logo img{width:60%;height:60%;object-fit:contain;filter:brightness(0) invert(1)}
.cac-card__logo img.cac-logo--color,.cac-group-header__logo img.cac-logo--color,.cac-subbrand-card__logo img.cac-logo--color,.cac-brand-header__logo img.cac-logo--color{filter:none;background:#fff;border-radius:8px;padding:4px}
.cac-card__name{font-family:'Yeseva One',serif;font-size:20px;color:var(--cac-text);margin:0 0 6px}
.cac-card__hq{font-size:13px;color:var(--cac-text-2);margin:0 0 10px}
.cac-card__sales{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--cac-gold);margin:0}
@media (min-width:721px){.cac-card__sales{font-size:18px}}

/* ---- Breadcrumb + back pill (group/brand pages) ---- */
.cac-page-head{padding-top:32px}
.cac-breadcrumb{font-size:13px;color:var(--cac-text-3);margin-bottom:18px}
.cac-breadcrumb a{color:var(--cac-text-2)}
.cac-breadcrumb a:hover{color:var(--cac-gold)}
.cac-back{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--cac-border);background:var(--cac-panel);color:var(--cac-text);font-size:13px;padding:8px 16px;margin-bottom:28px}
.cac-back:hover{border-color:var(--cac-red-hover);color:var(--cac-text)}

/* ---- Group page header (same centered-card structure as the homepage
   directory cards — logo on top, text centered below, no side-by-side row
   to squeeze on narrow screens) ---- */
.cac-group-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:36px}
.cac-group-header__text{min-width:0;max-width:100%}
.cac-group-header__name,.cac-group-header__meta,.cac-group-header__sales{overflow-wrap:break-word}
.cac-group-header__logo{width:168px;height:168px;flex-shrink:0;border-radius:30px;background:var(--cac-panel);border:1px solid var(--cac-border);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--cac-text-3)}
@media (min-width:721px){.cac-group-header__logo{width:192px;height:192px}}
.cac-group-header__name{font-family:'Yeseva One',serif;font-size:26px;color:var(--cac-text);margin:0 0 6px}
@media (min-width:721px){.cac-group-header__name{font-size:32px}}
.cac-group-header__meta{font-size:13px;color:var(--cac-text-2)}
.cac-group-header__sales{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--cac-gold);margin-top:4px}

.cac-facts{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.cac-facts{grid-template-columns:1fr 1fr}}
.cac-facts li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:var(--cac-text-2)}
.cac-facts li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--cac-red);border-radius:1px;transform:rotate(45deg)}

.cac-group-about{max-width:760px;margin-bottom:28px}
.cac-group-about p{font-size:15px;line-height:1.7;color:var(--cac-text-2);margin:0 0 16px}
.cac-group-about p:last-child{margin-bottom:0}

.cac-callout{background:rgba(181,52,48,.07);border-left:3px solid var(--cac-red);border-radius:0 8px 8px 0;padding:18px 20px;margin-bottom:40px}
.cac-callout__label{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--cac-gold);margin:0 0 8px}
.cac-callout__body{font-size:14px;line-height:1.6;color:var(--cac-text);margin:0}

.cac-subbrands-title{font-family:'Yeseva One',serif;font-size:20px;color:var(--cac-text);margin:0 0 18px}
.cac-subbrand-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:48px}
@media (min-width:560px){.cac-subbrand-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.cac-subbrand-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--cac-panel);border:1px solid var(--cac-border);border-radius:10px;padding:16px;transition:border-color .15s}
.cac-subbrand-card:hover{border-color:var(--cac-red-hover)}
.cac-subbrand-card__logo{width:132px;height:132px;border-radius:24px;background:var(--cac-panel-dark);border:1px solid var(--cac-border);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--cac-text-3);margin-bottom:12px}
.cac-subbrand-card__name{font-family:'Yeseva One',serif;font-size:16px;color:var(--cac-text);margin:0 0 6px}
.cac-subbrand-card__desc{font-size:13px;color:var(--cac-text-2);line-height:1.4;margin:0 0 8px}
.cac-subbrand-card__stat{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cac-gold);margin:0}

/* ---- Brand deep-dive page ---- */
.cac-brand-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:32px}
.cac-brand-header__logo{width:168px;height:168px;border-radius:30px;background:var(--cac-panel);border:1px solid var(--cac-border);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--cac-text-3)}
.cac-brand-header__name{font-family:'Yeseva One',serif;font-size:26px;color:var(--cac-text);margin:0}
@media (min-width:721px){.cac-brand-header__name{font-size:30px}}
.cac-brand-pron{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--cac-gold);text-align:center;margin:0 0 8px}
.cac-brand-stat{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--cac-gold);text-align:center;margin:0 0 32px;display:block}
@media (min-width:721px){.cac-brand-stat{font-size:18px}}
.cac-brand-origin{font-size:15px;line-height:1.7;color:var(--cac-text);max-width:680px;margin:0 auto 28px}
@media (min-width:721px){.cac-brand-origin{font-size:16px}}
.cac-brand-page .cac-callout{max-width:680px;margin-left:auto;margin-right:auto}

/* ---- Uzbekistan panel ---- */
.cac-local{padding-top:56px;padding-bottom:56px}
.cac-local__panel{background:rgba(181,52,48,.07);border:1px solid var(--cac-red-dark);border-radius:14px;padding:28px 22px}
@media (min-width:721px){.cac-local__panel{padding:48px 40px}}
.cac-local-facts{list-style:none;margin:24px 0 0;padding:0}
.cac-local-facts li{position:relative;padding-left:22px;margin-bottom:16px;font-size:14px;line-height:1.6;color:var(--cac-text-2)}
.cac-local-facts li::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--cac-red);border-radius:1px;transform:rotate(45deg)}
.cac-local-facts strong{color:var(--cac-text);font-weight:700}

/* ---- Footer ---- */
.cac-footer{border-top:1px solid var(--cac-border);padding:32px;text-align:center}
.cac-footer__data{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cac-text-3);max-width:760px;margin:0 auto 12px;line-height:1.6}
.cac-footer__brand{font-family:'Yeseva One',serif;font-size:14px;color:var(--cac-text-2);margin:0}