/* Shared styling for the Guides hub (articles.html) and article pages.
   Long-form text (.prose) styling is injected globally by nav.js. */
:root{
  --pitch:#0c2b1f; --pitch-deep:#081f16; --chalk:#f2f0e4; --chalk-dim:#b9c4ba;
  --grass:#2ea85c; --card-yellow:#ffc93c; --slate:#1d3a2e; --line:#27513f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(ellipse 120% 60% at 50% -10%, #15402e 0%, var(--pitch) 55%, var(--pitch-deep) 100%);
  color:var(--chalk);font-family:'Inter',system-ui,sans-serif;
  display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:0 14px 60px;
}
header{width:100%;max-width:680px;text-align:center;padding:26px 0 12px}
.kick{font-size:11px;letter-spacing:.25em;color:var(--card-yellow);text-transform:uppercase;font-weight:700}
h1{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:clamp(30px,7.5vw,46px);letter-spacing:.03em;line-height:1.08}
h1 .o{color:var(--card-yellow)}
.subtitle{font-size:14px;color:var(--chalk-dim);margin-top:8px;line-height:1.5}
.centreline{width:100%;max-width:680px;height:30px;position:relative;margin:4px 0 14px}
.centreline::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line)}
.centreline::after{
  content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;
  transform:translate(-50%,-50%);border:2px solid var(--line);border-radius:50%;background:var(--pitch);
}
/* ---------- hub list ---------- */
.alist{width:100%;max-width:680px;display:flex;flex-direction:column;gap:14px}
a.acard{
  display:block;text-decoration:none;color:var(--chalk);
  border:1px solid var(--line);border-radius:14px;background:var(--pitch-deep);
  padding:16px 18px;transition:border-color .15s,transform .15s;
}
a.acard:hover{border-color:var(--card-yellow);transform:translateY(-2px)}
.acard .tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--card-yellow);font-weight:700}
.acard h2{font-family:'Anton',Impact,sans-serif;font-size:21px;letter-spacing:.03em;margin:5px 0 5px;line-height:1.12}
.acard p{font-size:13px;color:var(--chalk-dim);line-height:1.5}
/* ---------- article page ---------- */
article.prose{margin-top:8px}
.ameta{width:100%;max-width:680px;margin:0 auto;font-size:12px;color:#557364;letter-spacing:.02em}
.ameta a{color:#7da38f}
.backlink{width:100%;max-width:680px;margin:18px auto 0;font-size:13px}
.backlink a{color:var(--card-yellow);text-decoration:none}
.backlink a:hover{text-decoration:underline}
footer{margin-top:auto;padding-top:30px;font-size:11px;color:#557364;text-align:center;max-width:680px;line-height:1.6}
footer a{color:#7da38f}