/* ============================================================
   TeckJB — Editorial-Brutalist Design System
   Light-first · type-dominant · high-contrast · zero ornament
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --paper:#FAFAF8; --panel:#EFEFEB; --ink:#0A0A0A; --ink-soft:#52524E;
  --rule:#0A0A0A; --rule-light:#C8C8C2;
  --accent:#FF4A1C; --accent-panel:#FFE8E0;
  /* verdicts */
  --v-recommended:#0F7A3D; --v-situational:#B8860B; --v-notyet:#52524E;
  --v-overpriced:#C4521E; --v-avoid:#C41E1E;

  --measure:640px; --container:1440px; --gutter:32px;

  --f-display:"Inter Tight","Archivo Expanded",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0A0A0A; --panel:#17171A; --ink:#FAFAF8; --ink-soft:#A8A8A2;
    --rule:#FAFAF8; --rule-light:#3A3A3E; --accent:#FF6B42; --accent-panel:#3A1E15;
    --v-recommended:#3FBF6E; --v-situational:#E0B23A; --v-notyet:#A8A8A2;
    --v-overpriced:#E0743A; --v-avoid:#E85555;
  }
}
:root[data-theme="dark"]{
  --paper:#0A0A0A; --panel:#17171A; --ink:#FAFAF8; --ink-soft:#A8A8A2;
  --rule:#FAFAF8; --rule-light:#3A3A3E; --accent:#FF6B42; --accent-panel:#3A1E15;
  --v-recommended:#3FBF6E; --v-situational:#E0B23A; --v-notyet:#A8A8A2;
  --v-overpriced:#E0743A; --v-avoid:#E85555;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:18px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
strong,b{font-weight:600}
::selection{background:var(--accent);color:#fff}

/* ---------- TYPE SCALE ---------- */
.t-hero{font-family:var(--f-display);font-weight:800;font-size:clamp(64px,9vw,96px);line-height:.92;letter-spacing:-0.045em}
.t-xl{font-family:var(--f-display);font-weight:800;font-size:clamp(44px,6vw,72px);line-height:1;letter-spacing:-0.04em}
.t-l{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,4.5vw,54px);line-height:1.04;letter-spacing:-0.035em}
.t-m{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-0.03em}
.t-s{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-0.02em}
.t-heading{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.36;letter-spacing:-0.01em}
.t-mono{font-family:var(--f-mono);font-size:14px;line-height:1.57;letter-spacing:0.01em}
.label{font-family:var(--f-body);font-weight:600;font-size:12px;line-height:1.16;letter-spacing:0.14em;text-transform:uppercase}
.big-number{font-family:var(--f-display);font-weight:800;font-size:clamp(44px,6vw,72px);line-height:.95;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
.rule{border:0;border-top:4px solid var(--rule)}
.rule-thin{border:0;border-top:2px solid var(--rule)}
.rule-hair{border:0;border-top:1px solid var(--rule-light)}
.measure{max-width:var(--measure)}
.stack>*+*{margin-top:1.2rem}

/* article asymmetric grid: text 1-7, aside 9-12 */
.article-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.article-grid .body{grid-column:1/8;max-width:var(--measure)}
.article-grid .aside{grid-column:9/13}
@media(max-width:900px){
  .article-grid{display:block}
  .article-grid .aside{margin-top:2.5rem}
}

/* prose */
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-0.03em;margin-top:2em}
.prose h3{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.36;margin-top:1.6em}
.prose p,.prose li{font-size:18px;line-height:1.62}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose a{box-shadow:inset 0 -2px 0 var(--accent);transition:background .1s linear}
.prose a:hover{background:var(--accent-panel)}
.prose code{font-family:var(--f-mono);font-size:.85em;background:var(--panel);padding:.1em .35em}

/* ---------- HEADER / NAV ---------- */
.site-head{border-bottom:4px solid var(--rule)}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:18px}
.brand{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-0.03em}
.brand .dot{color:var(--accent)}
.nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav a{font-weight:500;font-size:16px;position:relative;padding-block:4px}
.nav a:hover{box-shadow:inset 0 -2px 0 var(--accent)}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--ink)}
.theme-toggle{font-family:var(--f-mono);font-size:12px;border:2px solid var(--rule);background:transparent;color:inherit;padding:5px 9px;cursor:pointer;letter-spacing:.08em}
.burger{display:none}
@media(max-width:820px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--paper);border-bottom:4px solid var(--rule);padding:20px clamp(20px,5vw,64px);gap:14px;z-index:40}
  .site-head{position:relative}
  .burger{display:inline-flex;font-family:var(--f-mono);font-size:12px;border:2px solid var(--rule);background:transparent;color:inherit;padding:6px 10px;cursor:pointer;letter-spacing:.08em}
}

/* ---------- HERO ---------- */
.hero{padding-block:clamp(48px,9vh,120px) clamp(32px,6vh,64px)}
.hero .kicker{margin-bottom:24px}
.hero .sub{max-width:560px;margin-top:28px;color:var(--ink-soft);font-size:20px;line-height:1.5}

/* ---------- VERDICT ---------- */
.verdict-badge{display:inline-flex;align-items:center;gap:.5ch;font-family:var(--f-display);font-weight:800;
  font-size:15px;letter-spacing:-0.01em;text-transform:uppercase;padding:5px 10px;border:2px solid currentColor;line-height:1}
.v-recommended{color:var(--v-recommended)} .v-situational{color:var(--v-situational)}
.v-notyet{color:var(--v-notyet)} .v-overpriced{color:var(--v-overpriced)} .v-avoid{color:var(--v-avoid)}

/* THE VERDICT SLAB */
.verdict-slab{border-top:4px solid var(--rule);border-bottom:4px solid var(--rule);padding:32px 0;margin:40px 0}
.verdict-slab .v-word{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,4.5vw,54px);line-height:1;letter-spacing:-0.035em;text-transform:uppercase}
.verdict-slab .v-reason{margin-top:16px;max-width:var(--measure);font-size:19px;line-height:1.5}
.verdict-slab .v-meta{margin-top:20px;padding-top:14px;border-top:2px solid var(--rule);font-family:var(--f-mono);font-size:13px;letter-spacing:.02em;color:var(--ink-soft)}

/* THE TESTED BLOCK */
.tested-block{border:2px solid var(--rule);padding:0;margin:28px 0;font-family:var(--f-mono);font-size:13px}
.tested-block .th{border-bottom:2px solid var(--rule);padding:8px 14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tested-block dl{display:grid;grid-template-columns:max-content 1fr;gap:0}
.tested-block dt{padding:7px 14px;color:var(--ink-soft);border-bottom:1px solid var(--rule-light)}
.tested-block dd{padding:7px 14px;border-bottom:1px solid var(--rule-light);border-left:1px solid var(--rule-light);font-variant-numeric:tabular-nums}
.tested-block dt:last-of-type,.tested-block dd:last-of-type{border-bottom:0}

/* SCORE BARS */
.scores{margin:28px 0}
.score{display:grid;grid-template-columns:1fr 120px 3ch;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule-light)}
.score .name{font-size:15px}
.score .track{height:10px;border:1px solid var(--rule);position:relative}
.score .fill{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.score .val{font-family:var(--f-mono);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}

/* BIG NUMBER (margin column) */
.big-number-block .cap{margin-top:6px;font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);letter-spacing:.02em}
.big-number-block+.big-number-block{margin-top:32px;padding-top:32px;border-top:2px solid var(--rule)}

/* PULL DATA */
.pull-data{border-top:4px solid var(--rule);border-bottom:4px solid var(--rule);padding:28px 0;margin:44px 0}
.pull-data p{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-0.03em}

/* COMPARISON TABLE */
.cmp{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:24px 0}
.cmp th,.cmp td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule-light);font-size:16px;vertical-align:top}
.cmp thead th{border-bottom:2px solid var(--rule);font-family:var(--f-display);font-weight:700;font-size:18px}
.cmp tbody tr:last-child td{border-bottom:2px solid var(--rule)}
.cmp .winner{background:var(--accent-panel)}
.cmp-scroll{overflow-x:auto}

/* TOOL CARD (rule is the container) */
.tool-card{padding:22px 0;border-bottom:2px solid var(--rule)}
.tool-card a.name{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.02em;display:inline-block}
.tool-card a.name:hover{box-shadow:inset 0 -3px 0 var(--accent)}
.tool-card .row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:12px;font-family:var(--f-mono);font-size:13px;color:var(--ink-soft)}
.tool-grid{display:grid;grid-template-columns:1fr;gap:0}

/* GRIDS */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* FILTER BAR (tools db) */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0;padding-bottom:20px;border-bottom:2px solid var(--rule)}
.filters a,.filters button{font-family:var(--f-mono);font-size:13px;border:2px solid var(--rule);background:transparent;color:inherit;padding:6px 11px;cursor:pointer;letter-spacing:.04em}
.filters a[aria-current],.filters .active{background:var(--ink);color:var(--paper)}

/* DISCLOSURE / BYLINE */
.disclosure{border:2px solid var(--rule);padding:14px 16px;font-size:14px;line-height:1.5;margin:24px 0}
.disclosure .label{margin-bottom:6px;display:block}
.byline{font-family:var(--f-mono);font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
.byline a{box-shadow:inset 0 -2px 0 var(--accent)}

/* FAQ */
.faq h3{font-family:var(--f-display);font-weight:700;font-size:20px;margin-top:1.4em;letter-spacing:-0.01em}
.faq p{max-width:var(--measure);margin-top:.4em}

/* FOOTER */
.site-foot{border-top:4px solid var(--rule);margin-top:80px;padding-block:48px}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gutter)}
.site-foot a{color:var(--ink-soft);font-size:15px;display:block;padding:4px 0}
.site-foot a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
@media(max-width:820px){.site-foot .cols{grid-template-columns:1fr 1fr}}

/* screenshots / imagery */
.shot{border:2px solid var(--rule);margin:24px 0}

/* utils */
.accent{color:var(--accent)}
.soft{color:var(--ink-soft)}
.mono{font-family:var(--f-mono)}
.tnum{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.section{padding-block:clamp(40px,7vh,80px)}
.eyebrow{color:var(--accent)}