/* Cheap Auto Parts Online
   Palette: parts-catalog paper and printer's ink
   manila #E9DFC7 | manila-deep #DCCFB0 | ink #14181D
   slate #2B3440 | ochre #C77D14 | signal #A83A2A | steel #6B7280 */

:root{
  --manila:#E9DFC7;
  --manila-deep:#DCCFB0;
  --paper:#F4EEDF;
  --ink:#14181D;
  --slate:#2B3440;
  --ochre:#C77D14;
  --ochre-lit:#E8A22B;
  --signal:#A83A2A;
  --steel:#6B7280;
  --maxw:1060px;
  --display:'Oswald','Arial Narrow',sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --mono:'Roboto Mono','Courier New',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

body{
  background:var(--manila);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--signal)}
a:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:clamp(2.3rem,6.4vw,4.4rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem);margin:46px 0 14px}
h3{font-size:1.15rem;margin:26px 0 8px;letter-spacing:.02em}

p{margin:0 0 16px}
strong{font-weight:600}

.tag{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);
}

/* Header: ink block against paper */
.top{background:var(--ink);color:var(--manila)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.mark{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em;color:var(--manila);text-decoration:none;line-height:1.1}
.mark b{color:var(--ochre-lit);font-weight:600}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{color:var(--manila);text-decoration:none;font-size:.86rem;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.nav a:hover{color:var(--ochre-lit)}

/* Hero */
.hero{padding:60px 0 12px}
.hero .tag{display:block;margin-bottom:14px}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--signal)}
.lede{font-size:1.16rem;max-width:56ch;margin-top:20px;color:var(--slate)}

/* Signature: the wrong-part receipt */
.receipt-band{padding:34px 0 56px}
.receipt{
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);
  max-width:430px;
  padding:22px 24px 20px;
  font-family:var(--mono);
  font-size:.86rem;
}
.receipt .rhead{
  border-bottom:2px dashed var(--ink);padding-bottom:11px;margin-bottom:12px;
  text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;
  display:flex;justify-content:space-between;gap:10px;
}
.receipt .row{display:flex;justify-content:space-between;gap:16px;padding:5px 0}
.receipt .row span:last-child{white-space:nowrap}
.receipt .rule{border-top:2px dashed var(--ink);margin:12px 0}
.receipt .total{display:flex;justify-content:space-between;gap:16px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.receipt .total span:last-child{color:var(--signal)}
.receipt .foot{margin-top:14px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.receipt-note{max-width:44ch;margin-top:22px;color:var(--slate);font-size:1rem}

/* Aisles */
.aisles{background:var(--ink);color:var(--manila);padding:56px 0}
.aisles h2{color:var(--manila);margin-top:0}
.aisles .tag{color:var(--ochre-lit)}
.aisle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--slate);border:1px solid var(--slate);margin-top:26px}
.aisle{background:var(--ink);padding:20px 20px 22px}
.aisle .num{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--ochre-lit)}
.aisle h3{color:var(--manila);margin:6px 0 6px}
.aisle p{color:#B9B29F;font-size:.9rem;margin:0}
@media (max-width:820px){.aisle-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.aisle-grid{grid-template-columns:1fr}}

/* Standard content sections */
.band{padding:56px 0}
.band-deep{background:var(--manila-deep)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:26px}
.cols h3{margin-top:0}
.cols p{font-size:.96rem;color:var(--slate);margin:0}
@media (max-width:820px){.cols{grid-template-columns:1fr;gap:24px}}

/* Article pages */
.doc{padding:52px 0 76px;max-width:68ch}
.doc .tag{display:block;margin-bottom:12px}
.doc h1{font-size:clamp(1.9rem,4.6vw,3rem);margin-bottom:18px}
.doc h2{font-size:1.5rem}
.doc ul,.doc ol{margin:0 0 18px 20px}
.doc li{margin-bottom:9px}
.doc .callout{
  border-left:5px solid var(--ochre);background:var(--paper);
  padding:16px 18px;margin:24px 0;font-size:.98rem;
}
.doc .callout b{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:4px;font-size:.95rem}

/* Footer */
.foot{background:var(--ink);color:#B9B29F;padding:38px 0 46px;font-size:.86rem}
.foot .wrap{display:grid;gap:14px}
.foot a{color:var(--manila)}
.foot a:hover{color:var(--ochre-lit)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot .fine{max-width:76ch;font-size:.78rem;line-height:1.6;color:#8C8676}