/* =========================================================
   base.css: colours, fonts, page layout, navigation, buttons,
   section headings and footer. Shared by every section.
   ========================================================= */

:root{
  --void:#0d0221;        /* page background, same as your GitHub cards */
  --deep:#160536;        /* raised surfaces */
  --line:#2a1458;        /* borders */
  --cyan:#00f5ff;        /* primary accent */
  --cyan-soft:#00d4ff;
  --violet:#7a00ff;      /* glows and dots */
  --violet-text:#b58cff; /* violet that stays readable as text */
  --text:#e8eaff;
  --muted:#a3a9d6;
  --mono:"Fira Code", ui-monospace, monospace;
  --sans:"Sora", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--void);color:var(--text);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* views: each section is its own page, switched by the nav buttons */
.view{display:none}
.view.active{display:block}

/* top navigation */
nav.top{position:sticky;top:0;z-index:10;background:rgba(13,2,33,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font:600 16px var(--mono);color:var(--text)}
.logo span{color:var(--cyan)}
nav.top ul{display:flex;gap:6px;list-style:none}
nav.top ul a{display:block;padding:6px 14px;border-radius:999px;border:1px solid transparent;color:var(--muted);font-size:15px}
nav.top ul a:hover{color:var(--cyan);border-color:var(--line);text-decoration:none}
nav.top ul a[aria-current="page"]{color:var(--void);background:var(--cyan);border-color:var(--cyan)}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font:600 15px var(--sans);border:1px solid var(--cyan);color:var(--cyan)}
.btn:hover{text-decoration:none;background:rgba(0,245,255,.08)}
.btn.solid{background:var(--cyan);color:var(--void)}
.btn.solid:hover{background:#6ffaff}

/* section headings */
section{padding:96px 0;border-bottom:1px solid var(--line)}
h2{font:600 15px var(--mono);color:var(--cyan);margin-bottom:10px}
h2::before{content:"# ";color:var(--violet-text)}
.title{font:700 clamp(28px,4vw,40px)/1.15 var(--sans);letter-spacing:-.01em;margin-bottom:34px;max-width:24ch}
p+p{margin-top:14px}
.back{display:inline-block;margin-bottom:28px;font:500 14px var(--mono);color:var(--muted)}
.back:hover{color:var(--cyan)}

/* message shown if the sections cannot be loaded */
.load-error{max-width:60ch;margin:80px auto;padding:0 24px;color:var(--muted)}
.load-error code{font-family:var(--mono);color:var(--cyan)}

/* footer */
footer{padding:48px 0 60px;text-align:center}
footer blockquote{font:500 clamp(18px,2.4vw,24px)/1.5 var(--sans);font-style:italic;max-width:34ch;margin:0 auto}
footer cite{display:block;margin-top:10px;font:400 14px var(--mono);font-style:normal;color:var(--cyan)}
footer small{display:block;margin-top:36px;color:var(--muted);font-size:13px}

@media (max-width:820px){
  nav.top .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:8px}
  nav.top ul{width:100%;overflow-x:auto;padding-bottom:2px}
  nav.top ul a{white-space:nowrap;padding:5px 12px;font-size:14px}
  section{padding:72px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}