/* ==============================
   Design tokens
   ============================== */
:root{
  --text:#000000;
  --accent:#fd6302;   /* headings + active + hover */
  --emph:#000065;     /* bold / selected emphasis */
  --muted:#696969;    /* secondary text */
  --btn:#52519a;
  --btnText:#ffffff;
  --line: rgba(0,0,0,0.12);
}

/* ==============================
   Inter variable font
   ============================== */
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/Inter-Variable.woff2') format('woff2');
}

@font-face{
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/Inter-Variable-Italic.woff2') format('woff2');
}

/* ==============================
   Base typography
   ============================== */
html, body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

body{
  font-weight: 400; /* Regular */
}

.lead{
  font-weight: 500; /* Medium */
}

strong, b{
  font-weight: 600; /* SemiBold */
  color: var(--emph);
}

/* ==============================
   Headings
   ============================== */
.h1, h1, h2, h3{
  color: var(--accent);
}

.h1{
  font-weight: 650; /* Variable font – premium look */
}

/* ==============================
   Muted text
   ============================== */
.muted{
  color: var(--muted);
}

/* ==============================
   Links (no underline)
   ============================== */
a{
  color: inherit;
  text-decoration: none;
}
a:hover{
  text-decoration: none;
}

/* ==============================
   Buttons
   ============================== */
.btn{
  background: var(--btn);
  border: 1px solid var(--btn);
  color: var(--btnText);
}

.btn--ghost{
  background: transparent;
  color: var(--btn);
}

/* ==============================
   Header navigation underline
   ============================== */
.nav__link{
  position: relative;
  color: var(--muted);
}

.nav__link:hover,
.nav__link.is-active{
  color: var(--accent);
}

.nav__link::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  background: transparent;
  border-radius: 2px;
}

.nav__link:hover::after,
.nav__link.is-active::after{
  background: var(--accent);
}
.container{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 18px;
}
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main{
  flex: 1;
}