/* MyMotoTag — shared blog/guide styles */
:root{
  --ink:#15151a;--asphalt:#3c3f46;--steel:#6b7079;--line:#e7e7e3;
  --paper:#ffffff;--panel:#f5f5f2;--moto:#ff4d00;--moto-dark:#d63e00;--safety:#ffd400;
  --radius:14px;--disp:'Barlow Condensed',sans-serif;--body:'Barlow',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--moto);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:820px;margin:0 auto;padding:0 22px}

/* top bar */
.topbar{background:var(--ink);color:#fff}
.topbar .wrap{max-width:1120px;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:.03em;color:#fff;text-transform:uppercase}
.logo b{color:var(--moto)}
.logo:hover{text-decoration:none}
.topbar nav a{color:#fff;font-weight:600;font-size:14px;margin-left:18px;text-transform:uppercase;letter-spacing:.03em}
.btn{display:inline-block;background:var(--moto);color:#fff;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:11px 20px;border-radius:999px;font-size:15px}
.btn:hover{background:var(--moto-dark);text-decoration:none}

/* breadcrumb */
.crumb{font-size:13px;color:var(--steel);padding:18px 0 0}
.crumb a{color:var(--steel)}

/* article */
article{padding:8px 0 40px}
article h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,5vw,46px);line-height:1.04;letter-spacing:.01em;margin:14px 0 10px}
.meta{color:var(--steel);font-size:14px;margin-bottom:18px}
.lead{font-size:19px;color:var(--asphalt);margin:0 0 22px}
article h2{font-family:var(--disp);text-transform:uppercase;font-size:27px;letter-spacing:.01em;margin:34px 0 8px}
article h3{font-family:var(--disp);text-transform:uppercase;font-size:20px;margin:22px 0 6px}
article p{margin:0 0 14px;color:#26282d}
article ul,article ol{margin:0 0 16px 22px}
article li{margin-bottom:8px}
article strong{color:var(--ink)}

/* hero figure */
figure{margin:0 0 24px}
figure img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.tagfig{background:radial-gradient(700px 280px at 50% 0%,rgba(255,77,0,.10),transparent 60%),var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 18px;display:flex;align-items:center;justify-content:center}
figcaption{font-size:13px;color:var(--steel);text-align:center;margin-top:8px}

/* callout / CTA */
.callout{background:var(--ink);color:#fff;border-radius:var(--radius);padding:24px;margin:30px 0;text-align:center}
.callout h3{color:#fff;font-family:var(--disp);text-transform:uppercase;font-size:24px;margin-bottom:6px}
.callout p{color:#cfd2d8;margin-bottom:14px}

/* faq */
.faq{margin-top:10px}
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:13px 16px;margin-bottom:10px}
.faq summary{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:18px;cursor:pointer;letter-spacing:.02em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:9px 0 0;color:#26282d}

/* related */
.related{border-top:1px solid var(--line);margin-top:36px;padding-top:22px}
.related h2{font-size:22px}
.related a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.related a:hover{color:var(--moto);text-decoration:none}

/* blog index cards */
.bloghead{padding:34px 0 8px}
.bloghead h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,5vw,44px)}
.bloghead p{color:var(--asphalt);font-size:18px;margin-top:8px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 0 50px}
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.18s}
.card:hover{box-shadow:0 14px 30px rgba(21,21,26,.08);transform:translateY(-2px)}
.card a{color:inherit}
.card a:hover{text-decoration:none}
.card .thumb{background:var(--panel);border-bottom:1px solid var(--line);height:170px;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .cb{padding:16px 18px 20px}
.card h2{font-family:var(--disp);text-transform:uppercase;font-size:21px;line-height:1.08;margin-bottom:6px}
.card p{color:var(--asphalt);font-size:14.5px}

/* footer */
footer{background:var(--ink);color:#cfd2d8;padding:30px 0;margin-top:10px;font-size:14px}
footer .wrap{max-width:1120px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:#fff}

@media(max-width:640px){.cards{grid-template-columns:1fr}.topbar nav a:not(.btn){display:none}}
