:root{
  --bg:#0f1115; --panel:#171a21; --panel-2:#1e222b; --line:#2b3140;
  --ink:#e9ecf2; --ink-dim:#a2acbd; --ink-mut:#7b8698;
  --brand:#3b7d5b; --brand-2:#4c9e74; --gold:#d8a24a;
  --danger:#d9694e; --ok:#4c9e74; --warn:#d8a24a;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.35);
  --maxw:1180px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f2ec; --panel:#ffffff; --panel-2:#faf8f3; --line:#e3ded3;
    --ink:#1f2430; --ink-dim:#4c5566; --ink-mut:#77808f;
    --shadow:0 8px 26px rgba(40,40,60,.10);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15; margin:0 0 .4em}

/* Hero */
.hero{
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(76,158,116,.28), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--bg));
  border-bottom:1px solid var(--line);
  padding:52px 0 40px;
}
.kicker{
  text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; font-weight:700;
  color:var(--brand-2); margin:0 0 .5rem;
}
.hero h1{font-size:clamp(2rem,6vw,3.4rem); font-weight:800; letter-spacing:-.02em}
.hero h1 .ed{
  display:block; font-size:.4em; font-weight:600; letter-spacing:.02em;
  color:var(--ink-dim); margin-top:.35em;
}
.lede{max-width:60ch; color:var(--ink-dim); font-size:1.06rem; margin:.6em 0 0}
.lede strong{color:var(--ink)}
.hero-picks{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.hero-picks a{
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:.85rem; font-weight:600; color:var(--ink);
  display:inline-flex; gap:7px; align-items:center;
}
.hero-picks a .star{color:var(--gold)}
.hero-picks a:hover{border-color:var(--brand-2); text-decoration:none}

/* Crate band */
.crate-band{background:var(--panel); border-bottom:1px solid var(--line)}
.crate-inner{display:flex; gap:18px; padding:22px 20px; align-items:flex-start}
.crate-icon{font-size:2rem; line-height:1; flex:none}
.crate-band h2{font-size:1.15rem}
.crate-band p{margin:.35em 0; color:var(--ink-dim); font-size:.95rem}
.crate-band .crate-verdict{color:var(--ink); font-weight:500}
.crate-band strong{color:var(--ink)}

/* Filters */
.filters{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.filter-inner{display:flex; flex-wrap:wrap; gap:18px 26px; padding:12px 20px; align-items:center}
.fgroup{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.flabel{font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-mut); font-weight:700; margin-right:2px}
.pill{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-dim);
  padding:6px 12px; border-radius:999px; font-size:.82rem; font-weight:600; cursor:pointer;
  transition:.14s;
}
.pill:hover{color:var(--ink); border-color:var(--brand-2)}
.pill.active{background:var(--brand); border-color:var(--brand); color:#fff}
.switch{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--ink-dim)}
.switch input{appearance:none; width:38px; height:22px; border-radius:999px; background:var(--line); position:relative; cursor:pointer; transition:.15s; flex:none}
.switch input::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.15s}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{transform:translateX(16px)}
.switch input:checked + span{color:var(--ink)}

/* Grid */
main{padding:26px 0 60px}
.count{color:var(--ink-mut); font-size:.85rem; margin:0 20px 14px; padding:0}
.wrap>.count{margin-left:0}
.grid{
  display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:transform .16s, border-color .16s, box-shadow .16s; position:relative;
}
.card:hover{transform:translateY(-3px); border-color:var(--brand-2); box-shadow:var(--shadow)}
.card.is-pick{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.card .ph{aspect-ratio:16/10; background:var(--panel-2); position:relative; overflow:hidden}
.card .ph img{width:100%; height:100%; object-fit:cover; display:block}
.ribbon{
  position:absolute; top:10px; left:10px; background:var(--gold); color:#25200f;
  font-size:.7rem; font-weight:800; letter-spacing:.03em; padding:4px 10px; border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.card-crate{
  position:absolute; top:10px; right:10px; background:rgba(59,125,91,.92); color:#fff;
  font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:999px;
}
.card-body{padding:15px 16px 17px; display:flex; flex-direction:column; gap:9px; flex:1}
.card-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.card h3{font-size:1.08rem; margin:0}
.card .yrs{color:var(--ink-mut); font-size:.8rem; white-space:nowrap}
.card .price{color:var(--brand-2); font-weight:800; font-size:1rem}
.card .tagline{color:var(--ink-dim); font-size:.86rem; margin:0}
.badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px}
.chip{
  font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:7px;
  background:var(--panel-2); color:var(--ink-dim); border:1px solid var(--line);
  display:inline-flex; gap:4px; align-items:center;
}
.chip b{color:var(--ink); font-weight:800}
.chip-manual{color:#fff; background:var(--brand); border-color:var(--brand)}
.chip-auto{color:var(--ink-mut)}
.chip-fuel-Hybrid{color:var(--brand-2); border-color:color-mix(in srgb,var(--brand-2) 45%,var(--line))}
.chip-fuel-Diesel{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.chip-crate{background:rgba(59,125,91,.15); color:var(--brand-2); border-color:color-mix(in srgb,var(--brand-2) 45%,var(--line))}
.chip-risk-Extreme,.chip-risk-High-Extreme{color:#fff; background:var(--danger); border-color:var(--danger)}
.chip-risk-Medium{color:var(--warn)}

/* Longform */
.longform{margin-top:44px; display:flex; flex-direction:column; gap:12px}
details{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
summary{
  cursor:pointer; padding:16px 18px; font-weight:700; font-size:1.02rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋"; color:var(--ink-mut); font-weight:400; font-size:1.2rem}
details[open] summary::after{content:"－"}
.lf-body{padding:0 18px 18px; color:var(--ink-dim); border-top:1px solid var(--line); padding-top:14px}
.lf-body p{margin:.5em 0}
.lf-body strong{color:var(--ink)}
.lf-body ol{padding-left:1.2em; margin:.4em 0}
.lf-body li{margin:.4em 0}
.recs .rec-h{display:inline-block; min-width:120px; color:var(--brand-2); font-weight:800; text-transform:uppercase; font-size:.72rem; letter-spacing:.1em}

/* Table */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:.85rem}
th,td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{color:var(--ink-mut); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; position:sticky; top:0; background:var(--panel)}
tbody tr:hover{background:var(--panel-2)}
td.yes{color:var(--brand-2); font-weight:700}
td.no{color:var(--ink-mut)}
.tr-pick td:first-child{border-left:3px solid var(--gold)}
.tnote{font-size:.78rem; color:var(--ink-mut); margin-top:10px}

/* Footer */
.site-foot{border-top:1px solid var(--line); background:var(--panel); padding:34px 0 60px; margin-top:20px}
.foot-lead{font-weight:800; font-size:1.2rem; margin:0 0 .4em}
.meta{color:var(--ink-mut); font-size:.82rem; max-width:70ch}
.credits{margin-top:18px; background:var(--panel-2)}
.credits summary{font-size:.92rem}
#creditList{columns:2; column-gap:26px; padding:0 18px 6px; margin:0; list-style:none; font-size:.78rem; color:var(--ink-mut)}
#creditList li{break-inside:avoid; margin:.3em 0; padding-left:0}
#creditList a{color:var(--ink-dim)}

/* Modal */
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:20px}
.modal[hidden]{display:none}
.modal-scrim{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px)}
.modal-card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; max-width:640px; width:100%; max-height:90vh; overflow:auto; box-shadow:var(--shadow);
}
.modal-x{
  position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  border:none; background:rgba(0,0,0,.5); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer;
}
#mImg{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--panel-2)}
.modal-body{padding:20px 22px 26px}
.m-tag{color:var(--gold); font-weight:800; font-size:.78rem; letter-spacing:.03em; margin:0 0 4px}
.modal-body h2{font-size:1.5rem; margin:0}
.m-sub{color:var(--ink-mut); font-size:.9rem; margin:.2em 0 16px}
.m-specs{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px; margin-bottom:18px}
.m-specs .s{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:9px 11px}
.m-specs .s .k{font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mut); font-weight:700}
.m-specs .s .v{font-weight:700; font-size:.95rem; margin-top:2px}
.m-prose{color:var(--ink-dim)}
.m-prose p{margin:.5em 0}
.m-prose strong{color:var(--ink)}
.m-prose ul{padding-left:1.1em; margin:.5em 0}
.m-prose li{margin:.35em 0}
.m-credit{margin-top:18px; padding-top:12px; border-top:1px solid var(--line); font-size:.76rem; color:var(--ink-mut)}

@media (max-width:520px){
  .hero{padding:40px 0 30px}
  .filter-inner{gap:12px 18px}
  .grid{grid-template-columns:1fr}
  #creditList{columns:1}
  .crate-inner{flex-direction:column; gap:10px}
}