/* =========================
   Marshall.net Design System
   ========================= */

:root {

  --bg-main:#0e0f12;
  --bg-soft:#15171b;

  --text-main:#e3e5e8;
  --text-muted:#9aa0a6;
  --text-faint:#6f757c;

  --accent:#8b949e;

  --content-width:680px;

}

/* =========================
   Base
   ========================= */

html {
  color-scheme:dark;
}

body {

  margin:0;

  background:var(--bg-main);
  color:var(--text-main);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  line-height:1.65;

}

/* =========================
   Layout
   ========================= */

main {

  max-width:var(--content-width);

  margin:0 auto;

  padding:4rem 1.25rem 5rem;

}

/* =========================
   Navigation
   ========================= */

nav {

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:4rem;

  font-size:0.9rem;

}

/* site title */

.home {

  font-weight:600;

  text-decoration:none;

  color:var(--text-main);

}

/* nav links container */

.nav-links {

  display:flex;

  align-items:center;

}

/* nav links */

.nav-links a {

  color:var(--text-muted);

  text-decoration:none;

}

/* automatic divider */

.nav-links a + a::before {

  content:"|";

  margin:0 0.7rem;

  color:var(--text-faint);

}

/* hover */

nav a:hover {

  color:var(--text-main);

}

/* mobile safety */

@media (max-width:600px){

  nav {

    flex-direction:column;

    align-items:flex-start;

    gap:0.6rem;

  }

}

/* =========================
   Typography
   ========================= */

header {

  margin-bottom:3rem;

}

h1 {

  font-size:clamp(1.9rem,4vw,2.3rem);

  margin-bottom:0.25em;

}

h2 {

  margin-top:3rem;

  margin-bottom:0.8rem;

  font-size:1.1rem;

}

.title {

  color:var(--text-muted);

  font-size:0.95rem;

  letter-spacing:0.05em;

  text-transform:uppercase;

}

.tagline {
  margin-top:1rem;
  color:var(--text-muted);
}

/* =========================
   Body text
   ========================= */

p {

  margin:0 0 1.4em;

}

.muted {

  color:var(--text-faint);

  font-size:0.9rem;

}

/* =========================
   Lists
   ========================= */

ul {

  margin:0 0 1.4em;

  padding-left:1.2em;

}

li {

  margin-bottom:0.5em;

}

/* =========================
   Links
   ========================= */

a {

  color:var(--accent);

  text-decoration:none;

}

a:hover {

  text-decoration:underline;

}

/* =========================
   Forms
   ========================= */

input,
textarea {

  width:100%;

  padding:0.6rem 0.7rem;

  background:var(--bg-soft);

  border:1px solid #2a2d33;

  color:var(--text-main);

  font-size:0.95rem;

}

input:focus,
textarea:focus {

  outline:none;

  border-color:var(--accent);

}

/* =========================
   Footer
   ========================= */

footer {

  margin-top:4rem;

  padding-top:1.5rem;

  border-top:1px solid var(--bg-soft);

}