/* Northjule guides — Aurora Noir, tuned for reading */
:root{
  --plum:#1B1430; --plum2:#241B33; --plum3:#2C2140;
  --mint:#5EEAD4; --mint2:#7DF0DC; --lav:#C9B6F0;
  --purple:#B08DFF; --purple2:#CEB7FF;
  --ink:#F5F1FC; --muted:#C3BAD6; --muted2:#9A8FB6;
  --line:rgba(201,182,240,.14);
  --maxw:820px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,-apple-system,sans-serif;background:var(--plum);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--mint2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* nav */
nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:rgba(27,20,48,.78);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:12px;height:64px}
nav .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;color:var(--ink)}
nav .nj{width:38px;height:38px;border:2.5px solid var(--mint);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;letter-spacing:1px;color:var(--ink)}
nav .spacer{margin-left:auto}
nav .shop{font-weight:600;color:var(--mint2);font-size:15px}

/* article */
header.hero{padding:56px 0 26px;border-bottom:1px solid var(--line);background:linear-gradient(160deg,rgba(44,33,64,.5),transparent)}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--mint2);margin-bottom:14px}
.eyebrow.it{color:var(--purple2)}
h1{font-size:clamp(30px,5vw,46px);line-height:1.1;font-weight:800;letter-spacing:-.5px;margin-bottom:16px}
.dek{font-size:19px;color:var(--muted);max-width:680px}
.meta{margin-top:18px;font-size:14px;color:var(--muted2)}
article{padding:34px 0 20px}
article h2{font-size:26px;font-weight:700;margin:38px 0 14px;letter-spacing:-.3px}
article h3{font-size:20px;font-weight:700;margin:26px 0 10px}
article p{margin:0 0 16px;color:#E7E1F2}
article ul,article ol{margin:0 0 18px 22px;color:#E7E1F2}
article li{margin:7px 0}
article strong{color:#fff}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(94,234,212,.10);color:var(--mint2);padding:2px 7px;border-radius:6px;font-size:14px}

/* reference table */
.tbl{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{color:var(--mint2);font-weight:600;font-size:13px;letter-spacing:.5px;text-transform:uppercase;background:rgba(44,33,64,.5)}
.tbl td code{background:none;padding:0;color:var(--mint2)}
.tbl tr:hover td{background:rgba(44,33,64,.28)}

/* CTA card */
.cta{margin:34px 0;border-radius:20px;padding:30px 28px;background:linear-gradient(150deg,var(--plum2),var(--plum));border:1px solid rgba(94,234,212,.28);position:relative;overflow:hidden}
.cta.it{border-color:rgba(176,141,255,.32)}
.cta h3{margin:0 0 8px;font-size:22px}
.cta p{color:var(--muted);margin:0 0 18px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:12px 24px;border-radius:999px;background:var(--mint);color:#10201C;box-shadow:0 6px 22px rgba(94,234,212,.26);transition:transform .15s}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn.it{background:var(--purple);color:#180f2e;box-shadow:0 6px 22px rgba(176,141,255,.26)}
.callout{border-left:3px solid var(--mint);background:rgba(94,234,212,.06);padding:14px 18px;border-radius:0 10px 10px 0;margin:20px 0;color:var(--muted)}

/* related + footer */
.related{margin:40px 0;padding:24px 0;border-top:1px solid var(--line)}
.related h4{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);margin-bottom:12px}
.related a{display:block;margin:8px 0}
footer{border-top:1px solid var(--line);padding:38px 0;margin-top:20px;color:var(--muted2);font-size:14px}
footer a{color:var(--muted)}

/* guides hub cards */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:34px 0}
@media(max-width:680px){.grid{grid-template-columns:1fr}}
.card{display:block;border-radius:16px;padding:24px 22px;background:linear-gradient(160deg,var(--plum2),var(--plum));border:1px solid var(--line);transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:rgba(94,234,212,.4);text-decoration:none}
.card .tag{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--mint2)}
.card.it .tag{color:var(--purple2)}
.card h3{margin:10px 0 8px;font-size:19px;color:var(--ink)}
.card p{color:var(--muted);font-size:14.5px}