/*
Theme Name: Auto Indian
Theme URI: https://autoindian.in
Author: Auto Indian
Description: Editorial magazine theme for Auto Indian — AEO/GEO-ready article template with short answer, key takeaways, TOC, pull quotes, spec tables and FAQs, plus automatic schema, brand archives and crawlable infinite scroll.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: auto-indian
*/

:root{
  --red:#c8102e; --red-dark:#9c0c23;
  --ink:#111; --body:#24242a; --muted:#55555d; --meta:#8a8a92; --faint:#9c9ca4;
  --line:#ececef; --line-soft:#f0f0f3; --dark:#0d0d0f; --dark-line:#23232a;
  --gutter:clamp(20px,4vw,56px); --max:1240px; --measure:900px;
  --display:'Barlow Condensed',Arial Narrow,sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-dark)}
h1,h2,h3{overflow-wrap:anywhere;text-wrap:pretty;margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.measure{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;color:var(--meta);text-transform:uppercase}
.meta .dot{color:var(--red)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* progress bar */
.ai-progress{position:fixed;inset:0 0 auto 0;height:3px;background:rgba(200,16,46,.14);z-index:60}
.ai-progress span{display:block;height:3px;width:0;background:var(--red);transition:width .08s linear}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:#fff}
.header-top{border-bottom:1px solid var(--line)}
.header-top .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:0;grid-column:2;grid-row:1}
.brand img{height:clamp(34px,9vw,46px);width:auto;max-width:min(58vw,300px);object-fit:contain;display:block}
.header-actions{display:contents}
.search-inline{display:flex;align-items:center;gap:10px;width:min(280px,100%);height:42px;border:1px solid #e6e6e9;border-radius:21px;padding:0 16px;grid-column:1;grid-row:1;justify-self:start}
.search-inline input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:13px}
.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0}
.burger{display:flex;flex-direction:column;gap:5px;grid-column:3;grid-row:1;justify-self:end}
.burger span{display:block;width:24px;height:2px;background:var(--red)}
.search-toggle{display:none;grid-column:1;grid-row:1;justify-self:start}
.mobile-search{display:none;border-bottom:1px solid var(--line)}
.mobile-search.is-open{display:block}
.mobile-search .wrap{display:flex;gap:10px;align-items:center;padding-top:10px;padding-bottom:14px}
.mobile-search .field{flex:1;display:flex;align-items:center;gap:10px;height:44px;border:1px solid #e6e6e9;border-radius:22px;padding:0 16px}
.mobile-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:15px}

/* niche bar */
.niche-bar{border-bottom:1px solid var(--line);background:#fff}
.niche-bar .wrap{display:flex;align-items:center;gap:8px;padding-top:9px;padding-bottom:9px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.niche-bar .wrap::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;border:2px solid var(--line);background:#f6f6f7;color:var(--muted);border-radius:10px;padding:8px 14px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.pill:hover{background:var(--line);color:var(--muted)}
.pill.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.pill.is-active:hover{color:#fff}
.pill-caret{font-size:9px;margin-left:6px}

/* brands dropdown */
.brands-panel{display:none;border-bottom:1px solid var(--line);background:#fff;box-shadow:0 14px 24px rgba(0,0,0,.08)}
.brands-panel.is-open{display:block}
.brands-panel .wrap{padding-top:22px;padding-bottom:28px}
.brands-panel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.brands-panel h2{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.03em}
.brands-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.brands-cols a{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14px;font-weight:600;color:var(--ink)}
.brands-cols a span{color:var(--red);font-size:18px}

/* drawer */
.drawer{position:fixed;inset:0;z-index:50;display:none}
.drawer.is-open{display:flex;justify-content:flex-end}
.drawer-scrim{position:absolute;inset:0;background:rgba(13,13,15,.55);border:0}
.drawer-panel{position:relative;width:min(340px,86vw);height:100%;background:var(--dark);color:#fff;padding:22px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.drawer-head strong{font-family:var(--display);font-size:22px;letter-spacing:.06em;font-weight:700}
.drawer-close{background:none;border:0;color:var(--red);font-size:26px;width:44px;height:44px;cursor:pointer}
.drawer-search{display:flex;align-items:center;gap:10px;height:44px;border:1px solid var(--dark-line);border-radius:22px;padding:0 16px;margin-bottom:16px}
.drawer-search input{border:0;outline:0;background:transparent;color:#fff;width:100%;font:inherit;font-size:12px}
.drawer-panel .drawer-link{padding:15px 0;border-bottom:1px solid var(--dark-line);font-family:var(--display);font-size:26px;letter-spacing:.05em;color:#fff;font-weight:700}
.drawer-panel .drawer-link.is-red{color:var(--red)}
.drawer-chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.drawer-chips a{border:1px solid var(--dark-line);border-radius:10px;padding:11px 14px;font-size:11px;letter-spacing:.1em;color:#fff}

/* section heads */
.section{margin-bottom:64px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.section-head h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,6vw,44px);line-height:1.12;letter-spacing:.02em;text-transform:uppercase}
.explore-all{flex:0 0 auto;border:1.5px solid var(--red);color:var(--red);background:transparent;border-radius:24px;padding:11px 22px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.explore-all:hover{background:var(--red);color:#fff}
.explore-all span{font-size:12px}

/* news grid */
.news-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:34px 44px;align-items:start;min-width:0}
.lead{display:flex;flex-direction:column;gap:16px;min-width:0}
.lead-figure{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#3b3b44,#1e1e24 55%,#4c4c58)}
.lead-figure img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;bottom:16px;right:16px;background:var(--red);color:#fff;font-size:10px;font-weight:600;letter-spacing:.16em;padding:7px 12px;border-radius:5px;text-transform:uppercase}
.lead h3,.lead h2.lead-title{font-family:var(--display);font-weight:700;font-size:clamp(27px,5.2vw,38px);line-height:1.05}
.lead h3 a,.lead h2.lead-title a{color:var(--ink)}
.lead p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.byline .avatar{width:30px;height:30px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:linear-gradient(150deg,var(--red),#5e1219 60%,#2a2a31)}
.byline .name{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink);border-bottom:1.5px solid var(--red)}
.story-list{display:flex;flex-direction:column;min-width:0}
.story-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);min-width:0}
.story-row .thumb{flex:0 0 clamp(104px,28vw,128px);aspect-ratio:16/9;height:auto;border-radius:8px;object-fit:cover;background:linear-gradient(160deg,#50505c,#26262d 60%,#5e5e6b)}
.story-row .txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.kicker{font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--red);text-transform:uppercase}
.story-row h3{font-size:15px;font-weight:600;line-height:1.3}
.story-row h3 a{color:var(--ink)}
.read{font-size:10px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}

/* rails */
.rail{display:flex;gap:24px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:#d8d8dc;border-radius:4px}
.pick-card{flex:0 0 min(300px,78vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.pick-card .pic{aspect-ratio:16/9;border-radius:12px;object-fit:cover;background:linear-gradient(135deg,#3d1519,#2a2a31 55%,#4a4a55)}
.pick-card h3{font-size:18px;font-weight:600;line-height:1.25}
.pick-card h3 a{color:var(--ink)}

/* trending band */
.trending-band{background:radial-gradient(120% 150% at 78% 12%,rgba(200,16,46,.5),rgba(200,16,46,0) 58%),linear-gradient(135deg,#1b1b21,#0e0e12 55%,#25101a);color:#fff;border-bottom:3px solid var(--red)}
.trending-band .wrap{padding-top:24px;padding-bottom:26px}
.trending-band .section-head{margin-bottom:16px;align-items:center}
.trending-band .section-head h2{color:#fff;display:flex;align-items:center;gap:12px}
.trending-band .section-head h2::before{content:"";width:6px;height:.86em;background:var(--red);border-radius:3px;flex:0 0 auto}
.trending-band .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}
.trend-card h3 a{color:#fff}
.trend-card h3 a:hover{color:#ff6274}
.trend-card .read{color:rgba(255,255,255,.62)}
.trend-card .pic{background:linear-gradient(135deg,#5c1a20,#26262d 55%,#4a4a55)}
.rail-nav{display:flex;gap:8px;flex:0 0 auto;align-items:center}
.rail-nav button{width:38px;height:38px;border-radius:50%;border:1px solid #e6e6e9;background:#fff;color:var(--meta);font-size:15px;cursor:pointer}
.rail-nav button:hover{border-color:var(--red);color:var(--red)}
.grid-icon{width:20px;height:20px;flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px}
.grid-icon i{background:var(--red)}
.brand-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.brand-head .left{display:flex;align-items:center;gap:12px;min-width:0}
.brand-head h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,4.4vw,30px);letter-spacing:.02em;white-space:nowrap;text-transform:uppercase}
.brand-rail{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.brand-tile{flex:0 0 156px;scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;height:158px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#fff}
.brand-tile:hover{border-color:var(--red)}
.brand-mark{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:22px;color:#fff;letter-spacing:.03em}
.brand-tile .label{font-size:11px;font-weight:500;letter-spacing:.1em;color:#3a3a42;text-align:center;padding:0 8px}
.center-cta{display:flex;justify-content:center;padding:22px 0 60px}
.btn-outline{border:1.5px solid var(--red);color:var(--red);border-radius:24px;padding:14px 30px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.btn-outline:hover{background:var(--red);color:#fff}

/* archive rows */
.archive-intro{max-width:640px;font-size:17px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.page-divider{display:flex;align-items:center;gap:14px;margin:26px 0 6px}
.page-divider i{height:1px;flex:1;background:var(--line)}
.page-divider span{font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--faint)}
.archive-row{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.archive-row .pic{flex:0 0 clamp(150px,26vw,230px);aspect-ratio:16/9;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,#3b3b44,#1e1e24 55%,#4c4c58)}
.archive-row .txt{min-width:0;display:flex;flex-direction:column;gap:7px}
.archive-row h3{font-size:clamp(16px,3.4vw,20px);font-weight:600;line-height:1.3}
.archive-row h3 a{color:var(--ink)}
.archive-row p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.load-zone{padding:26px 0 60px;display:flex;flex-direction:column;align-items:center;gap:14px}
.spinner-line{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--faint)}
.spinner-line i{width:14px;height:14px;border:2px solid #e6e6e9;border-top-color:var(--red);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pagination a,.pagination span{min-width:38px;height:38px;padding:0 12px;border-radius:10px;border:1px solid #e6e6e9;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--ink)}
.pagination .current{background:var(--ink);border-color:var(--ink);color:#fff}

/* article */
.breadcrumbs{font-size:11px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.breadcrumbs a{color:var(--faint)}
.breadcrumbs .sep{color:#d4d4d8}
.breadcrumbs .current{color:var(--ink)}
.article-hero{margin-top:16px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#3b3b44,#1e1e24 55%,#4c4c58)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-byline{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.article-byline .avatar{width:38px;height:38px;border-radius:50%;object-fit:cover}
.article-byline .name{font-size:13px;font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--red)}
.entry-title{margin-top:16px;font-family:var(--display);font-weight:700;font-size:clamp(34px,7.4vw,58px);line-height:1.04;letter-spacing:.005em}
.standfirst{margin:20px 0 0;font-size:19px;line-height:1.65;color:#3a3a42;font-weight:500}
.short-answer{margin-top:26px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 12px 12px 0;padding:20px 22px;background:#fafafb}
.short-answer .eyebrow{color:var(--red)}
.short-answer p{margin:10px 0 0;font-size:17px;line-height:1.7;color:var(--ink)}
.takeaways{margin-top:22px;border:1px solid var(--line);border-radius:12px;padding:22px}
.takeaways h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;text-transform:uppercase}
.takeaways ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.takeaways li{display:flex;gap:12px;font-size:16px;line-height:1.6;color:var(--body)}
.takeaways li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto;margin-top:8px}
.toc{margin-top:22px;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.toc ol{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:11px;align-items:baseline;font-size:16px;line-height:1.5;color:var(--ink)}
.toc a::before{content:counter(toc) ".";font-size:11px;font-weight:600;color:var(--red);flex:0 0 auto}
.entry-content{margin-top:8px}
.entry-content h2,.entry-content h3{scroll-margin-top:120px;font-family:var(--display);font-weight:700;letter-spacing:.01em;line-height:1.15}
.entry-content h2{margin:38px 0 0;font-size:clamp(24px,4.4vw,32px)}
.entry-content h3{margin:28px 0 0;font-size:clamp(20px,3.6vw,25px)}
.entry-content p{margin:20px 0 0;font-size:18px;line-height:1.75;color:var(--body)}
.entry-content ul,.entry-content ol{margin:16px 0 0;padding-left:22px;font-size:18px;line-height:1.75;color:var(--body)}
.entry-content figure{margin:26px 0 0}
.entry-content figure img{border-radius:12px}
.entry-content figcaption{margin-top:8px;font-size:12px;letter-spacing:.08em;color:var(--faint)}
.pullquote{margin:34px 0 0;border-left:4px solid var(--red);background:#f7f7f8;padding:26px 28px;border-radius:0 12px 12px 0}
.pullquote p{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(22px,4vw,30px);line-height:1.22;color:var(--ink)}
.pullquote cite{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--meta);font-style:normal;text-transform:uppercase}
.pullquote cite::before{content:"";width:26px;height:2px;background:var(--red)}
.spec-block{margin:38px 0 0}
.spec-block h2{margin:0 0 16px;font-family:var(--display);font-weight:700;font-size:clamp(22px,4vw,28px);letter-spacing:.02em;text-transform:uppercase}
.spec-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.spec-table th{background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:.14em;padding:14px 18px;text-align:left;text-transform:uppercase}
.spec-table td{padding:15px 18px;border-top:1px solid var(--line-soft);font-size:15px;font-weight:600;color:var(--ink)}
.spec-table td.k{font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--meta);text-transform:uppercase;width:40%}
.spec-table tr:nth-child(even) td{background:#fafafb}
.faq{margin-top:42px;border-top:2px solid var(--line);padding-top:30px}
.faq h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,4.6vw,32px);letter-spacing:.02em;text-transform:uppercase}
.faq-item{border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:14px}
.faq-item h3{display:flex;gap:10px;align-items:baseline;font-size:16px;font-weight:600;line-height:1.45;color:var(--ink)}
.faq-item h3 .q{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--red);flex:0 0 auto}
.faq-item p{margin:9px 0 0 27px;font-size:16px;line-height:1.65;color:#3a3a42}
.share{margin-top:40px;border-top:2px solid var(--line);padding-top:32px;display:flex;flex-direction:column;align-items:center;gap:18px}
.share .eyebrow{letter-spacing:.22em;color:#4a4a52}
.share-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.share-row a{padding:15px 24px;border-radius:10px;font-size:12px;font-weight:600;letter-spacing:.12em;color:#fff;text-transform:uppercase}
.share-x{background:#111}.share-fb{background:#1877f2}
.share-ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b 50%,#6228d7)}
.share-wa{background:#25d366}
.share-copy{border:2px solid #d8d8dc;color:var(--ink)!important;background:#fff}
.author-card{margin-top:34px;border-top:2px solid var(--line);padding-top:26px;display:flex;gap:18px;flex-wrap:wrap}
.author-card .avatar{width:64px;height:64px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.author-card .who{flex:1 1 260px;min-width:0}
.author-card h2{margin-top:5px;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.02em;text-transform:uppercase}
.author-card .role{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--red);margin-top:2px;text-transform:uppercase}
.author-card p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.chip-row{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid #e6e6e9;border-radius:8px;padding:10px 13px;font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--ink);display:inline-flex;align-items:center;gap:8px;text-transform:uppercase}
.chip:hover{border-color:var(--red)}
.up-next{margin-top:40px;border-top:2px solid var(--line);padding-top:30px}

/* comments */
.comments{margin-top:34px;border-top:2px solid var(--line);padding-top:26px;padding-bottom:60px}
.comments-head{display:flex;align-items:baseline;gap:10px}
.comments-head h2{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.02em;text-transform:uppercase}
.comments-head .count{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--red)}
.comment-list{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:20px}
.comment-list .children{list-style:none;margin:16px 0 0 34px;padding:0;display:flex;flex-direction:column;gap:16px}
.comment-body{display:flex;gap:14px}
.comment-body .avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:#ececef}
.comment-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.comment-meta .cname{font-size:14px;font-weight:600;color:var(--ink)}
.comment-meta time{font-size:11px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.comment-body p{margin:6px 0 0;font-size:15px;line-height:1.6;color:#3a3a42}
.comment-actions{margin-top:8px;display:flex;gap:16px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--meta);text-transform:uppercase}
.comment-form{margin-top:18px;display:flex;gap:14px}
.comment-form .avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;background:#ececef;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:var(--meta)}
.comment-form .fields{flex:1;min-width:0}
.comment-form textarea,.comment-form input[type=text],.comment-form input[type=email]{width:100%;border:1px solid #e6e6e9;border-radius:12px;padding:13px 15px;font:inherit;font-size:15px;line-height:1.55;resize:vertical}
.comment-form .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.btn-red{background:var(--red);color:#fff;border:0;border-radius:10px;padding:13px 22px;font-size:12px;font-weight:600;letter-spacing:.14em;cursor:pointer;text-transform:uppercase}
.comment-note{font-size:11px;color:var(--faint)}

/* pages / author */
.page-intro{margin:14px 0 0;font-size:19px;line-height:1.65;color:#3a3a42;font-weight:500}
.section-block h2{margin:36px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(23px,4.4vw,30px);letter-spacing:.01em}
.section-block p{margin:12px 0 0;font-size:17px;line-height:1.75;color:var(--body)}
.bullet-list{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.bullet-list li{display:flex;gap:12px;font-size:16px;line-height:1.6;color:#3a3a42}
.bullet-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto;margin-top:8px}
.author-hero{margin-top:22px;display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.author-hero .avatar{width:104px;height:104px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.stat-grid{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{border:1px solid var(--line);border-radius:12px;padding:18px}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:32px;color:var(--red);line-height:1}
.stat span{display:block;margin-top:2px;font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--meta);text-transform:uppercase}
.beats{margin-top:20px;border:1px solid var(--line);border-radius:12px;padding:20px}
.beats .tags{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.beats .tags span{background:#f4f4f6;border-radius:8px;padding:9px 14px;font-size:11px;font-weight:600;letter-spacing:.1em;color:#3a3a42;text-transform:uppercase}
.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px}
.model-grid .pic{aspect-ratio:16/9;border-radius:12px;object-fit:cover;background:linear-gradient(135deg,#3b3b44,#1e1e24 55%,#4c4c58)}
.model-grid .name{margin-top:10px;font-size:16px;font-weight:600;color:var(--ink)}
.brand-accordion{display:flex;flex-direction:column}
.brand-accordion details{border-bottom:1px solid var(--line-soft)}
.brand-accordion summary{padding:20px 0;font-size:18px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;list-style:none}
.brand-accordion summary::-webkit-details-marker{display:none}
.brand-accordion summary::after{content:"+";color:var(--red);font-size:24px}
.brand-accordion details[open] summary::after{content:"−"}
.brand-accordion .models{padding:0 0 16px 18px;border-left:3px solid var(--line-soft);margin:0 0 8px 4px;display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--muted)}
.brand-grid{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brand-grid a{border:1px solid var(--line);border-radius:14px;padding:20px 16px;display:flex;align-items:center;gap:14px;background:#fff}
.brand-grid a:hover{border-color:var(--red)}
.brand-grid .brand-mark{width:46px;height:46px;border-radius:11px;font-size:19px}
.brand-grid .label{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink)}

/* footer */
.site-footer{background:#f1f1f2;color:#55555d;border-top:3px solid var(--red)}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:38px 44px;padding-top:52px}
.site-footer h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.04em;color:var(--ink);text-transform:uppercase}
.site-footer p{margin:18px 0 0;font-size:15px;line-height:1.65;max-width:280px}
.flogo-link{display:inline-block;line-height:0}
.site-footer img.flogo{height:clamp(40px,8vw,52px);width:auto;max-width:min(72vw,300px);object-fit:contain;display:block}
.social-row{margin-top:20px;display:flex;gap:14px}
.social-row a{width:38px;height:38px;border-radius:10px;border:1px solid #d9d9de;display:flex;align-items:center;justify-content:center}
.social-row a:hover{border-color:var(--red)}
.social-row svg{width:17px;height:17px;fill:#3a3a42}
.social-row a:hover svg{fill:var(--red)}
.site-footer ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px;font-size:15px}
.site-footer ul a{color:#55555d}
.site-footer ul a:hover{color:var(--red)}
.newsletter input{margin-top:16px;width:100%;height:48px;border:1px solid #d9d9de;background:#fff;border-radius:8px;padding:0 16px;font:inherit;font-size:15px;color:var(--ink);outline:0}
.newsletter button{margin-top:12px;width:100%;background:var(--red);color:#fff;border:0;border-radius:8px;height:48px;font-size:12px;font-weight:600;letter-spacing:.18em;cursor:pointer;text-transform:uppercase}
.footer-bottom{padding:26px 0 34px}
.footer-bottom .inner{border-top:1px solid #d9d9de;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
.footer-bottom nav{display:flex;gap:26px;flex-wrap:wrap}
.footer-bottom nav a{color:#55555d}
.footer-bottom nav a:hover{color:var(--red)}

@media (max-width:860px){
  .search-inline{display:none}
  .search-toggle{display:flex}
  .news-grid,.footer-cols,.brands-cols{grid-template-columns:minmax(0,1fr)}
  .brand-grid,.stat-grid{grid-template-columns:repeat(2,1fr)}
  .model-grid{grid-template-columns:repeat(2,1fr)}
  .archive-row{flex-direction:column;gap:12px}
  .archive-row .pic{flex:0 0 auto;width:100%;aspect-ratio:16/9}
  .section{margin-bottom:48px}
}

/* ==========================================================================
   Auto Indian — layout fixes (desktop + mobile)   [added 2026-09-05]
   To revert: delete everything from this banner to the end of the file.
   ========================================================================== */

/* 1. LIST-ROW THUMBNAILS (the main bug)
   The theme sized the thumb with .story-row .thumb{flex:0 0 clamp(...)}, but the
   image is wrapped in a link. The link became the flex item, sized itself to the
   image's intrinsic 400px and refused to shrink — leaving ~9px for the headline
   column and pushing the whole page wider than the viewport. Size the LINK.
   front-page.php now emits class="thumb-link"; the a:first-child + !important
   fallback also fixes pages still served from the LiteSpeed cache. */
.story-row > .thumb-link,
.story-row > a:first-child {
  flex: 0 0 clamp(132px, 34vw, 160px) !important;
  width: clamp(132px, 34vw, 160px);
  align-self: center;
  display: block;
  overflow: hidden;
  border-radius: 10px;
}
.story-row > .thumb-link > .thumb,
.story-row > a:first-child > .thumb,
.archive-row > a:first-child > .pic {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.story-row .txt,
.archive-row .txt { flex: 1 1 auto; min-width: 0; }
.story-row h3,
.story-row h3 a { overflow-wrap: anywhere; }

/* 2. TABLET RANGE — the theme jumped straight from the 1240px desktop grid to
   the 860px mobile stack, so 861–1100px had no rules at all. */
@media (max-width: 1100px) {
  .news-grid { gap: 28px 30px; }
  .story-row > .thumb-link,
  .story-row > a:first-child { flex-basis: clamp(132px, 30vw, 168px) !important; width: clamp(132px, 30vw, 168px); }
}

/* 3. MOBILE */
@media (max-width: 860px) {
  .section-head,
  .brand-head { flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
  .section-head h2,
  .brand-head h2 { flex: 1 1 100%; }
  .explore-all { margin-left: 0; }
  .lead h3,
  .lead h2.lead-title { font-size: clamp(24px, 6.4vw, 32px); }
  .story-row { gap: 14px; padding: 14px 0; }
  .story-row > .thumb-link,
  .story-row > a:first-child { flex-basis: clamp(132px, 30vw, 190px) !important; width: clamp(132px, 30vw, 190px); }
  .story-row h3 { font-size: 16px; }
  .rail,
  .brand-rail { -webkit-overflow-scrolling: touch; scroll-padding-left: var(--gutter); }
  .rail > *,
  .brand-rail > * { scroll-snap-align: start; }
  .rail-nav { display: none; }
}

/* 4. SMALL PHONES */
@media (max-width: 520px) {
  .story-row > .thumb-link,
  .story-row > a:first-child { flex-basis: clamp(120px, 34vw, 150px) !important; width: clamp(120px, 34vw, 150px); }
  .story-row h3 { font-size: 15px; }
  .pick-card { flex-basis: 78vw; }
  .brand-grid, .stat-grid, .model-grid { grid-template-columns: 1fr; }
  .center-cta .btn-outline { width: 100%; text-align: center; }
}

/* 5. SAFETY NET — nothing may push the page sideways.
   `clip`, not `hidden`: overflow-x:hidden here creates a scroll container and
   silently kills position:sticky on .site-header (verified). */
body { overflow-x: clip; }
.wrap, .measure { width: 100%; }
img, video, iframe { max-width: 100%; }

/* ------------------------------------------------------------------
   6. ARCHIVE ROWS  [added 2026-09-05]
   Archive listings get a much larger thumbnail than the compact
   homepage story list, vertically centred against the text. The
   header now shares the .measure column with the rows (archive.php,
   category.php) so title and list start on the same left edge.
   ------------------------------------------------------------------ */
.archive-row { align-items: center; gap: 22px; padding: 24px 0; }
.archive-row > .thumb-link,
.archive-row > a:first-child {
  flex: 0 0 clamp(200px, 26vw, 260px) !important;
  width: clamp(200px, 26vw, 260px);
  align-self: center;
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.archive-row > .thumb-link > .pic,
.archive-row > a:first-child > .pic {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.archive-row .txt { flex: 1 1 auto; min-width: 0; }

/* Mobile: thumbnail above the text, full width so it reads large. */
@media (max-width: 860px) {
  .archive-row { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 0; }
  .archive-row > .thumb-link,
  .archive-row > a:first-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    align-self: stretch;
  }
  .archive-row h3 { font-size: 19px; }
  .archive-row p { font-size: 15px; }
}
@media (max-width: 520px) {
  .archive-row h3 { font-size: 18px; }
  .archive-row { gap: 12px; padding: 16px 0; }
}

/* ------------------------------------------------------------------
   7. ALL BRANDS PANEL  [added 2026-09-05]
   Each brand row is now a link plus a real + toggle that reveals the
   model terms filed under that brand. The row keeps the look of the
   old plain link; the models sit underneath it.
   ------------------------------------------------------------------ */
.brands-cols > .brand-item { min-width: 0; }
.brands-cols .brand-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.brands-cols .brand-item.is-open > .brand-item-row { border-bottom-color: transparent; }
.brands-cols .brand-item-link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.brands-cols .brand-item-link:hover { color: var(--red); }
.brands-cols .brand-item-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--red);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.brands-cols .brand-item-toggle:hover { background: rgba(0, 0, 0, .06); }
.brands-cols .brand-item-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.brands-cols .brand-item-sign { display: block; transition: transform .15s ease; }
.brands-cols .brand-item-toggle[aria-expanded="true"] .brand-item-sign { transform: rotate(45deg); }
.brands-cols .brand-item-models[hidden] { display: none; }
.brands-cols .brand-item-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--line-soft);
}
.brands-cols .brand-item-models a {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border: 0;
}
.brands-cols .brand-item-models a:hover { color: var(--red); }
.brands-cols .brand-item-all {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
@media (max-width: 520px) {
  .brands-cols .brand-item-models { grid-template-columns: minmax(0, 1fr); }
}


/* ---- 8. Explore all button moved below each section (Sep 2026) ---- */
.section-foot{display:flex;justify-content:center;margin-top:36px}
.section-foot .explore-all{padding:14px 30px;font-size:12px;letter-spacing:.16em}
.section-head{justify-content:flex-start}
@media (max-width:600px){
  .section-foot{margin-top:26px}
  .section-foot .explore-all{width:100%;max-width:340px;justify-content:center;padding:14px 18px}
}


/* ---- 9. Nav icons (Sep 2026) ---- */
.pill{display:inline-flex;align-items:center;gap:7px}
.pill .nav-ico{color:var(--red);flex:0 0 auto}
.pill.is-active .nav-ico{color:#fff}
.pill .pill-caret{margin-left:0}
.drawer-link{display:flex;align-items:center;gap:14px}
.drawer-link .nav-ico{color:var(--red);flex:0 0 auto}

/* drawer: brands submenu + contact block */
.drawer-panel .drawer-toggle{width:100%;background:none;border:0;border-bottom:1px solid var(--dark-line);padding:15px 0;font-family:var(--display);font-size:26px;letter-spacing:.05em;font-weight:700;color:#fff;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer}
.drawer-toggle .nav-ico{color:var(--red);flex:0 0 auto}
.drawer-caret{width:9px;height:9px;margin-left:auto;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg);transition:transform .18s ease}
.drawer-toggle[aria-expanded="true"] .drawer-caret{transform:rotate(-135deg)}
.drawer-sub{display:grid;gap:10px;padding:14px 0 16px;border-bottom:1px solid var(--dark-line)}
.drawer-sub[hidden]{display:none}
.drawer-sub-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.drawer-sub .drawer-chips{margin-top:0}
.drawer-explore{margin-top:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.drawer-contact{display:grid;gap:10px;margin-top:20px}
.drawer-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.drawer-contact-link{display:flex;align-items:center;gap:10px;color:#fff;font-size:14px}
.drawer-contact-link svg{color:var(--red);flex:0 0 auto}
.drawer-social{display:flex;flex-wrap:wrap;gap:10px}
.drawer-social a{width:40px;height:40px;border:1px solid var(--dark-line);border-radius:10px;display:flex;align-items:center;justify-content:center}
.drawer-social svg{width:17px;height:17px;fill:#fff}
.drawer-social a:hover{border-color:var(--red)}
.drawer-social a:hover svg{fill:var(--red)}

/* brand logos */
.brand-mark.has-logo{background:#fff !important;border:1px solid var(--line);padding:7px}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.brands-cols a.brand-item-link{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex:1}
.brand-item-mark{width:26px;height:26px;border-radius:7px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.03em}
.brand-item-mark.has-logo{background:#fff;border:1px solid var(--line);padding:3px}
.brand-item-mark img{width:100%;height:100%;object-fit:contain;display:block}
.drawer-chips a{display:inline-flex;align-items:center;gap:8px}
.chip-mark{width:20px;height:20px;border-radius:5px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:9px;font-weight:700;color:#fff}
.chip-mark.has-logo{background:#fff;padding:2px}
.chip-mark img{width:100%;height:100%;object-fit:contain;display:block}
.listing-empty{padding:40px 0;font-size:17px;color:var(--muted)}
.brand-accordion summary{gap:12px;justify-content:flex-start}
.brand-accordion summary > span:not(.brand-item-mark){margin-right:auto}
.brand-accordion summary .brand-item-mark{flex:0 0 auto}

/* ---- 10. Featured News band + Editor's Pick band (Sep 2026) ---- */
.featured-band{background:#f4f4f7;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 64px}
.featured-band .wrap{padding-top:44px;padding-bottom:46px}
.featured-band .section-head{margin-bottom:22px}
.featured-band .section-head h2{display:flex;align-items:center;gap:12px}
.featured-band .section-head h2::before{content:"";width:6px;height:.86em;background:var(--red);border-radius:3px;flex:0 0 auto}
.featured-band .story-row{border-bottom-color:#dedee4}
.featured-band .story-row:last-child{border-bottom:0}
.featured-band .section-foot{margin-top:30px}
.picks-band{margin:0 0 64px;border-top:3px solid var(--red)}
.picks-band .wrap{padding-top:40px;padding-bottom:40px}
.picks-band .section-foot{margin-top:26px}
@media (max-width:600px){
.featured-band{margin-bottom:44px}
.featured-band .wrap{padding-top:30px;padding-bottom:32px}
.picks-band{margin-bottom:44px}
.picks-band .wrap{padding-top:30px;padding-bottom:30px}
}

/* ---- 11. Shared section headings + split brands panel (Sep 2026) ---- */
.section-head h2{display:flex;align-items:center;gap:12px}
.section-head h2::before{content:"";width:6px;height:.86em;background:var(--red);border-radius:3px;flex:0 0 auto}

.brands-panel-head{margin-bottom:18px}
.brands-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px 48px}
.brand-group{min-width:0}
.brand-group-head{display:flex;align-items:center;gap:10px;margin-bottom:2px;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.brand-group-head h3{margin:0;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.brand-group-head .nav-ico{color:var(--red);flex:0 0 auto}
.brand-group .brands-cols{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 28px}
.brand-group .brands-cols .brand-item-models{grid-template-columns:minmax(0,1fr)}
.brand-group-foot{margin-top:16px}
.brand-group-foot .explore-all{padding:10px 18px;font-size:10px;letter-spacing:.14em}
@media (max-width:860px){
.brands-panel .wrap{max-height:72vh;overflow-y:auto;overscroll-behavior:contain}
.brands-groups{gap:22px}
.brands-panel h2{font-size:22px}
}
@media (max-width:520px){
.brand-group .brands-cols{grid-template-columns:minmax(0,1fr)}
.brand-group-foot .explore-all{width:100%;justify-content:center}
}