/* Rank Roadie shared stylesheet
   Link in every page with: <link rel="stylesheet" href="/rankroadie.css">
   Brand: navy + coral + cream, Bricolage Grotesque / Hanken Grotesk / Space Mono.
   British English content. No JavaScript required for any content. */

:root{
  --navy:#0B2545;--coral:#EE6C4D;--coral-deep:#d8542f;--cream:#FAF8F5;--paper:#fffdf8;
  --black:#0d0d0d;--ink:#0a0a0a;--slate:#54637a;--cream-dim:rgba(250,248,245,.74);
  --shadow:6px 6px 0 var(--black);--shadow-sm:4px 4px 0 var(--black);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--navy);background:var(--cream);
  line-height:1.7;font-size:18px;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(11,37,69,.09) 1.1px,transparent 1.1px);background-size:24px 24px}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.02em}
a{color:var(--coral-deep)}
.label{font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--coral)}

/* header */
header{position:sticky;top:0;z-index:50;background:var(--black);border-bottom:2px solid var(--black)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;max-width:1180px;margin:0 auto}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:.5rem;color:var(--cream)}
.brand .dot{width:12px;height:12px;background:var(--coral);display:inline-block}
.nav .cta{font-family:"Space Mono",monospace;font-weight:700;font-size:.82rem;text-transform:uppercase;color:#fff;background:var(--coral);border:2px solid var(--black);padding:.55rem 1rem;text-decoration:none}

/* article shell */
.article{max-width:760px;margin:0 auto;padding:0 28px}
.crumbs{font-family:"Space Mono",monospace;font-size:.78rem;color:var(--slate);margin:34px 0 24px}
.crumbs a{color:var(--slate);text-decoration:none}
.crumbs a:hover{color:var(--coral)}
.art-head h1{font-size:clamp(2.1rem,5vw,3.3rem);margin:10px 0 18px}
.dek{font-size:1.25rem;color:var(--slate);line-height:1.5;margin-bottom:26px}
.byline{display:flex;align-items:center;gap:14px;font-family:"Space Mono",monospace;font-size:.82rem;color:var(--slate);border-top:2px solid var(--black);border-bottom:2px solid var(--black);padding:14px 0}
.byline b{color:var(--navy)}
.byline .av{width:34px;height:34px;background:var(--navy);color:var(--cream);border:2px solid var(--black);display:flex;align-items:center;justify-content:center;font-family:"Bricolage Grotesque";font-weight:800;font-size:.85rem;flex-shrink:0}

/* answer-first box */
.answer{border:2px solid var(--black);background:var(--paper);box-shadow:var(--shadow);padding:26px 28px;margin:36px 0}
.answer .label{display:block;margin-bottom:10px}
.answer p{font-size:1.18rem;line-height:1.55;margin:0}

/* table of contents */
.toc{border:2px solid var(--black);background:var(--navy);color:var(--cream);padding:22px 26px;margin:30px 0}
.toc .label{color:var(--coral);display:block;margin-bottom:10px}
.toc ol{margin:0;padding-left:1.2rem}
.toc li{margin:6px 0;font-family:"Space Mono",monospace;font-size:.92rem}
.toc a{color:var(--cream);text-decoration:none}
.toc a:hover{color:var(--coral)}

/* body */
.body h2{font-size:clamp(1.6rem,3.2vw,2.1rem);margin:48px 0 14px;scroll-margin-top:90px}
.body h3{font-size:1.3rem;margin:30px 0 10px}
.body p{margin:16px 0}
.body ul,.body ol{margin:16px 0 16px 1.3rem}
.body li{margin:8px 0}
.body strong{font-weight:700}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;border:2px solid var(--black);box-shadow:var(--shadow);margin:28px 0;background:var(--paper);font-size:.98rem}
.cmp th,.cmp td{border:1px solid var(--black);padding:12px 14px;text-align:left;vertical-align:top}
.cmp th{background:var(--navy);color:var(--cream);font-family:"Space Mono",monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}

/* callout */
.callout{border:2px solid var(--black);background:#fff;box-shadow:var(--shadow-sm);border-left:6px solid var(--coral);padding:20px 24px;margin:28px 0}
.callout .label{display:block;margin-bottom:8px}
.callout p{margin:0}

/* FAQ */
.faq{margin:44px 0}
.faq-item{border:2px solid var(--black);background:var(--paper);box-shadow:var(--shadow-sm);padding:22px 24px;margin-bottom:16px}
.faq-item h3{font-size:1.2rem;margin-bottom:8px}
.faq-item p{margin:0;color:var(--slate)}

/* related reading (hub-and-spoke) */
.related{border-top:2px solid var(--black);margin-top:48px;padding-top:28px}
.related .label{display:block;margin-bottom:14px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.related-grid a{display:block;border:2px solid var(--black);background:var(--paper);box-shadow:var(--shadow-sm);padding:16px 18px;text-decoration:none;color:var(--navy);font-family:"Bricolage Grotesque";font-weight:700;font-size:1.02rem;transition:transform .12s ease,box-shadow .12s ease}
.related-grid a:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--black);color:var(--coral-deep)}
@media(max-width:600px){.related-grid{grid-template-columns:1fr}}

/* author bio */
.bio{border:2px solid var(--black);background:var(--navy);color:var(--cream);box-shadow:var(--shadow);padding:26px 28px;margin:44px 0;display:flex;gap:20px;align-items:flex-start}
.bio .av{width:54px;height:54px;background:var(--coral);color:#fff;border:2px solid var(--black);display:flex;align-items:center;justify-content:center;font-family:"Bricolage Grotesque";font-weight:800;font-size:1.2rem;flex-shrink:0}
.bio h4{color:var(--cream);font-size:1.15rem;margin-bottom:6px}
.bio p{color:var(--cream-dim);font-size:.95rem;margin:0}

/* CTA */
.cta-band{background:var(--coral);color:#fff;text-align:center;border-top:2px solid var(--black);border-bottom:2px solid var(--black);padding:64px 28px;margin-top:56px}
.cta-band h2{font-size:clamp(1.8rem,4vw,2.7rem);max-width:20ch;margin:0 auto 12px;color:#fff}
.cta-band p{font-family:"Space Mono",monospace;font-size:.9rem;color:rgba(255,255,255,.92);margin-bottom:26px}
.cta-band a{display:inline-block;font-family:"Space Mono",monospace;font-weight:700;font-size:.92rem;background:var(--cream);color:var(--navy);border:2px solid var(--black);box-shadow:var(--shadow-sm);padding:.85rem 1.6rem;text-decoration:none}

/* footer */
footer{background:var(--ink);color:var(--cream-dim);padding:40px 0;text-align:center;font-family:"Space Mono",monospace;font-size:.8rem}
footer a{color:var(--cream-dim)}