/* Motorbook article pages, shared stylesheet.
   Design concept: a workshop docket / service-record sheet, with a small
   instrument-panel readout for the quick-answer block. Not a generic SaaS
   card layout: rules and dockets instead of shadowed cards.
   Uses the main site's palette (cream, British Racing Green, amber) and
   fonts (Archivo + Inter) so article pages match the rest of Motorbook. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0B3D2E;
  --paper:#F4F1EA;
  --paper-raised:#FFFFFF;
  --rule:#DCD6C6;
  --accent:#B26B00;
  --signal:#0B3D2E;
  --muted:#5B5A4E;
  --white:#FFFFFF;
  --max:700px;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--signal);}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* Masthead */
.masthead{
  border-bottom:1px solid var(--rule);
  padding:22px 0;
}
.masthead .wrap{display:flex; align-items:baseline; justify-content:space-between;}
.wordmark{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:20px;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-decoration:none;
}
.wordmark span{color:var(--accent);}
.masthead-tag{font-size:13px; color:var(--muted);}

/* Article header */
.article-header{padding:44px 0 0;}
.kicker{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--signal);
  margin:0 0 12px;
}
h1{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:clamp(28px, 5vw, 40px);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 14px;
  color:var(--ink);
  max-width:16ch;
}
.dek{
  font-size:18px;
  color:var(--muted);
  max-width:52ch;
  margin:0 0 18px;
}
.byline{
  font-size:14px;
  color:var(--muted);
  padding-bottom:20px;
  border-bottom:1px solid var(--rule);
}

/* Share row */
.share-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 0;
  flex-wrap:wrap;
}
.share-label{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.03em;
  color:var(--muted);
  margin-right:4px;
}
.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--rule);
  background:var(--white);
  border-radius:3px;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.share-btn:hover{border-color:var(--accent); background:var(--paper-raised);}
.share-btn svg{width:16px; height:16px; fill:currentColor;}
.share-btn.copied{border-color:var(--signal); color:var(--signal);}

/* Quick-answer instrument panel */
.quickpanel{
  margin:28px 0 8px;
  border:1px solid var(--ink);
  background:var(--paper-raised);
  padding:20px 22px;
  position:relative;
}
.quickpanel::before{
  content:"";
  position:absolute;
  top:-1px; left:-1px;
  width:14px; height:14px;
  border-top:2px solid var(--accent);
  border-left:2px solid var(--accent);
}
.quickpanel-label{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--accent);
  margin:0 0 10px;
}
.quickpanel p{
  margin:0;
  font-size:16px;
  color:var(--ink);
}
.quickpanel p + p{margin-top:10px;}
.quickpanel .figs{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--rule);
}
.quickpanel .fig{font-size:13px; color:var(--muted);}
.quickpanel .fig b{display:block; font-size:16px; color:var(--ink); font-weight:700; font-family:'Archivo', sans-serif;}

/* Body content */
.article-body{padding:20px 0 8px; max-width:66ch;}
.article-body h2{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:23px;
  margin:34px 0 12px;
  color:var(--ink);
}
.article-body h3{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:18px;
  margin:24px 0 8px;
}
.article-body p{margin:0 0 16px;}
.article-body ul, .article-body ol{margin:0 0 16px; padding-left:22px;}
.article-body li{margin-bottom:6px;}
.article-body strong{color:var(--ink);}

.cta-note{
  margin:32px 0 8px;
  padding:16px 18px;
  border-left:3px solid var(--accent);
  background:var(--paper-raised);
  font-size:15px;
  color:var(--muted);
}
.cta-note strong{color:var(--ink);}

/* FAQ */
.faq{margin:30px 0 8px; border-top:1px solid var(--rule); padding-top:8px;}
.faq h2{font-family:'Archivo', sans-serif; font-weight:700; font-size:23px; margin:26px 0 14px;}
.faq-item{border-bottom:1px solid var(--rule); padding:16px 0;}
.faq-q{font-weight:600; margin:0 0 8px; color:var(--ink);}
.faq-a{margin:0; color:var(--muted);}

/* Share row (bottom) */
.share-bottom{
  margin-top:36px;
  padding:22px 0 0;
  border-top:1px solid var(--rule);
}
.share-bottom .share-label{display:block; margin:0 0 10px;}

footer{
  margin-top:48px;
  padding:24px 0 48px;
  border-top:1px solid var(--rule);
  font-size:13px;
  color:var(--muted);
}

@media (max-width:520px){
  body{font-size:16px;}
  .wrap{padding:0 18px;}
}