:root{
  --bg:#f5f6f8; --card-bg:#ffffff; --text:#1c2430; --muted:#5b6673;
  --accent:#c8102e; --accent-dark:#a30d26; --steel:#22303f; --line:#e3e7ec;
  --radius:12px; --shadow:0 1px 3px rgba(20,30,45,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

header{background:var(--steel);color:#fff;border-bottom:3px solid var(--accent)}
.header-inner{display:flex;align-items:center;gap:14px;padding:14px 20px;
        max-width:1080px;margin:0 auto;position:relative}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;
      letter-spacing:.3px}
.logo svg{flex:none}
.logo b{color:#fff}.logo span{color:#9fb0c1;font-weight:500;font-size:.8rem;
      display:block;line-height:1.1}
nav.main-nav{margin-left:auto;display:flex;gap:22px;font-size:.95rem}
nav.main-nav a{color:#cfd8e2;padding:6px 2px;border-bottom:2px solid transparent}
nav.main-nav a:hover,nav.main-nav a.active{color:#fff;border-color:var(--accent)}

.burger-btn{display:none;margin-left:auto;cursor:pointer;padding:8px;
           border-radius:8px}
.burger-btn:hover{background:rgba(255,255,255,.08)}
.burger-btn svg{display:block}
#burger{display:none}
@media (max-width:640px){
  .burger-btn{display:block}
  nav.main-nav{display:none;position:absolute;top:100%;left:0;right:0;
       background:var(--steel);flex-direction:column;gap:0;z-index:50;
       border-bottom:3px solid var(--accent);box-shadow:0 8px 16px rgba(0,0,0,.25)}
  nav.main-nav a{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
  nav.main-nav a.active{border-color:rgba(255,255,255,.08)}
  #burger:checked ~ nav.main-nav{display:flex}
}

.breadcrumbs{padding:14px 0;font-size:.88rem;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{margin:0 7px;color:#b6bec7}
.breadcrumbs .active{color:var(--text);font-weight:600}

.page-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 4px}
.page-head h1{font-size:1.9rem;letter-spacing:-.3px}
.page-head .brand-link{color:var(--accent);font-weight:600;font-size:1rem}
.subtitle{color:var(--muted);margin-bottom:22px;font-size:.95rem}
.subtitle b{color:var(--text)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
       gap:14px;margin:14px 0 8px}
.card{background:var(--card-bg);border:1px solid var(--line);
      border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;
      transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card h3{font-size:1.02rem;margin-bottom:4px}
.card .years{color:var(--muted);font-size:.86rem}
.card .years .current,.current{color:#0f7d3c;font-weight:600}
.card .card-more{margin-top:10px;font-size:.83rem;color:var(--accent);font-weight:600}

.spec-table{width:100%;border-collapse:collapse;background:var(--card-bg);
         border:1px solid var(--line);border-radius:var(--radius);
         overflow:hidden;box-shadow:var(--shadow);font-size:.92rem}
.spec-table th{background:#eef1f4;text-align:left;padding:10px 14px;
            font-size:.8rem;text-transform:uppercase;letter-spacing:.6px;
            color:var(--muted)}
.spec-table td{padding:10px 14px;border-top:1px solid var(--line)}
.spec-table tr:hover td{background:#fbf3f4}
.spec-table .link{color:var(--accent);font-weight:600}
@media (max-width:640px){
  .spec-table{display:block;overflow-x:auto}
}

h2{font-size:1.25rem;margin:30px 0 4px;display:flex;align-items:center;gap:10px}
h2 .accent{width:4px;height:20px;background:var(--accent);border-radius:2px;flex:none}
.section-sub{color:var(--muted);font-size:.9rem;margin-bottom:14px}

.article-body{background:var(--card-bg);border:1px solid var(--line);
        border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px;
        margin:14px 0}
.article-body h2{margin:0 0 6px}
.article-body .lead{color:var(--muted);font-size:.95rem;margin-bottom:14px}
.article-body p{margin:0 0 12px;max-width:72ch}

.ad{margin:22px 0}
.ad:empty{display:none}

footer{background:var(--steel);color:#9fb0c1;margin-top:44px;
       border-top:3px solid var(--accent);font-size:.88rem}
.footer-inner{max-width:1080px;margin:0 auto;padding:26px 20px;display:flex;
        gap:30px;flex-wrap:wrap;justify-content:space-between}
footer a{color:#cfd8e2}
@media (max-width:640px){.page-head h1{font-size:1.5rem}.article-body{padding:20px}}

/* Section cards, category strip, folded list and link lists.
   Written by yorsh from the blocks of his own guides page, at the owner's
   word 08.09.2026, with English class names throughout. Names occupied:
   sect-grid, sect-card(+__title __count __links __more), chips(+__item),
   fold(+__summary __body), linklist(+_columns). Nothing here touches .grid
   or .card. */
/* Section cards, a category strip, a folded full list and link lists.
   Written for prorab from the blocks of free-onlineclock.com/guides, with
   English class names throughout - the names on my own site are still the old
   transliterated ones, and that is mine to fix, not yours to inherit.

   HOW IT IS BUILT TO SIT ON TOP OF YOURS
   Every name here starts with `sect-`, `chips` or `linklist`, so nothing
   collides with your `.grid` and `.card`. Nothing here styles a bare tag
   except inside a block of its own, so the file cannot reach into your
   markup by accident.

   NAMES THIS FILE OCCUPIES - do not use them for anything else:
       .sect-grid  .sect-grid_narrow
       .sect-card  .sect-card__title  .sect-card__count
       .sect-card__links  .sect-card__more
       .chips  .chips__item
       .fold  .fold__summary  .fold__body
       .linklist  .linklist_columns

   COLOURS come from your variables and nothing else, so the file carries no
   palette of its own: --card-bg, --line, --accent, --muted, --text. Two more
   are read WITH A FALLBACK, so the file works before you declare them:
       --radius  (falls back to 10px)
       --maxw    (falls back to 62rem)

   WHY A CARD PER SECTION AND NOT A LIST OF 221. A flat list answers only the
   reader who already knows the name of the page; everyone else reads it as a
   wall. A card names the section, says how many pages are inside, and shows
   the few most useful ones - so the eye picks the section first and the page
   second. The full list stays on the page for the one who wants it, folded.
   That is the whole difference between a map and a dump.

   MARKUP THESE STYLES EXPECT (yours to write, this is only the shape):

     <div class="chips">
       <a class="chips__item" href="#brakes" aria-current="page">Brakes</a>
       <a class="chips__item" href="#filters">Filters</a>
     </div>

     <div class="sect-grid">
       <section class="sect-card" id="brakes">
         <h2 class="sect-card__title">Brakes</h2>
         <p class="sect-card__count">34 pages</p>
         <ul class="sect-card__links">
           <li><a href="/brake-pads">Brake pads</a></li>
           <li><a href="/brake-discs">Brake discs</a></li>
         </ul>
         <a class="sect-card__more" href="#all">All 34 &rarr;</a>
       </section>
     </div>

     <details class="fold" id="all">
       <summary class="fold__summary">All 221 pages</summary>
       <div class="fold__body">
         <ul class="linklist linklist_columns"> ... </ul>
       </div>
     </details>
*/

/* ── The strip of sections ───────────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.chips__item {
  display: inline-flex;
  align-items: center;
  /* 44px is the smallest target a finger hits reliably; a chip that is only
     as tall as its text is a desktop control pretending to be mobile. */
  min-height: 44px;
  padding: .35rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: .88rem;
  text-decoration: none;
}
.chips__item:hover,
.chips__item:focus-visible {
  border-color: var(--accent);
}
/* The current section is marked by the SAME attribute a screen reader uses,
   not by a second class that can drift out of step with it. */
.chips__item[aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── The grid of section cards ───────────────────────────────────────────── */
.sect-grid {
  display: grid;
  /* auto-fill with a minimum, not a fixed column count: the row rewraps by
     itself and needs no media query per width. */
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.2rem;
  margin: 1rem 0 1.4rem;
}
.sect-grid_narrow {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.sect-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius, 10px);
  background: var(--card-bg);
}
.sect-card__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}
.sect-card__title a {
  color: inherit;
  text-decoration: none;
}
.sect-card__count {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
}
.sect-card__links {
  margin: .2rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .25rem;
  font-size: .93rem;
}
.sect-card__links a {
  color: var(--text);
}
.sect-card__links a:hover,
.sect-card__links a:focus-visible {
  color: var(--accent);
}
/* `margin-top: auto` pins this line to the bottom of the card, so cards of
   unequal link counts still end on one line across the row. */
.sect-card__more {
  margin: auto 0 0;
  padding-top: .4rem;
  color: var(--accent);
  font-size: .85rem;
  text-decoration: none;
}

/* ── The full list, folded ───────────────────────────────────────────────── */
/* <details> is used on purpose: it folds with no script at all, it is open to
   a keyboard, and search engines read the contents whether it is open or not.
   A script-driven accordion loses all three the moment the script fails. */
.fold {
  max-width: var(--maxw, 62rem);
  margin: 1.5rem auto 0;
  border-top: 1px solid var(--line);
}
.fold__summary {
  padding: .9rem 0;
  cursor: pointer;
  min-height: 44px;
  color: var(--muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.fold__summary::marker,
.fold__summary::-webkit-details-marker {
  color: var(--muted);
}
.fold[open] .fold__summary {
  border-bottom: 1px solid var(--line);
}
.fold__body {
  padding: .9rem 0 1.2rem;
}

/* ── Plain lists of links inside an article ──────────────────────────────── */
.linklist {
  margin: .6rem 0 1.2rem;
  padding-left: 1.1rem;
  display: grid;
  gap: .35rem;
  line-height: 1.5;
}
.linklist a {
  color: var(--text);
}
.linklist a:hover,
.linklist a:focus-visible {
  color: var(--accent);
}
/* A long list reads better in columns - but only where there is room for
   them; below the breakpoint it stays a single column of its own accord. */
.linklist_columns {
  columns: 2;
  column-gap: 2rem;
}
@media (max-width: 640px) {
  .linklist_columns {
    columns: 1;
  }
}

/* ── Article cards for the pages kept from the old site ──────────────────── */
/* prorab, 08.09.2026. The owner asked for the old pages to look like what
   they are - articles, not rows of a list. Names of my own, none of yorsh's
   touched: page-grid, page-card and its parts. */
.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;margin:14px 0 26px}
.page-card{display:flex;flex-direction:column;gap:6px;background:var(--card-bg);
  border:1px solid var(--line);border-radius:var(--radius,10px);padding:14px 16px;
  transition:border-color .15s ease,transform .15s ease}
.page-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.page-card__title{font-size:1rem;font-weight:650;line-height:1.35}
.page-card__note{color:var(--muted);font-size:.87rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.page-card__more{margin-top:auto;color:var(--accent);font-size:.83rem;font-weight:600}
.section-head{display:flex;align-items:baseline;gap:10px;margin:26px 0 2px}
.section-head h3{font-size:1.15rem}
.section-head span{color:var(--muted);font-size:.87rem}

/* Lists inside an article body: the old pages carry them, and a bare ul on a
   dark-on-light page reads as debris. */
.wrap ul:not([class]),.wrap ol:not([class]){margin:10px 0 16px 22px}
.wrap ul:not([class]) li,.wrap ol:not([class]) li{margin:5px 0;line-height:1.55}
.wrap ul:not([class]) li::marker{color:var(--accent)}
.wrap h2{margin:22px 0 8px}
.wrap h3{margin:16px 0 6px}
.wrap p{margin:10px 0}
.wrap a:not([class]){color:var(--accent);text-decoration:underline;
  text-underline-offset:2px}