/* ───── Fjalla One (single weight, keep the smaller 45 KB subset) ───── */
@font-face {
  font-family: "Fjalla One";
  src: url("/assets/fonts/Fjalla_One/fjalla-one-v15-latin-regular.woff2") format("woff2");
  font-weight: 400;          /* only weight available */
  font-style:  normal;
  font-display: swap;
}

/* ───── Libre Franklin variable WOFF 2 (normal) ───── */
@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/Libre_Franklin/LibreFranklin-VariableFont_wght.woff2")
       format("woff2-variations");
  font-weight: 100 900;      /* full weight axis */
  font-style:  normal;
  font-display: swap;
}

/* ───── Libre Franklin variable WOFF 2 (italic) ───── */
@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/Libre_Franklin/LibreFranklin-Italic-VariableFont_wght.woff2")
       format("woff2-variations");
  font-weight: 100 900;
  font-style:  italic;
  font-display: swap;
}

body {
  font-family: 'Libre Franklin', Arial, sans-serif;
  background: #f9f9f9;
  margin: 0;
}

header, nav {
  background: #fff;
  box-shadow: 0 1px 2px #ddd;
}

nav {
  display: flex;
  justify-content: center;
  gap: 2em;
  padding: 1em 0;
  font-size: 1.1em;
}

nav a {
  text-decoration: none;
  color: #214366;
  padding: 0.2em 0.7em;
  border-radius: 4px;
  transition: background 0.14s;
}
nav a.active,
nav a:hover {
  background: #f0f4fa;
}

.container-resume { max-width: 800px; margin: 2em auto; background: #fff; padding: 2em 2em 1em; border-radius: 8px; }

.container {
  max-width: 900px;
  margin: 2em auto;
  background: #fff;
  padding: 2em 2em 1em;
  border-radius: 8px;
  box-sizing: border-box;
}


h1 {
  font-family: 'Fjalla One', Arial, sans-serif;
  font-size: 2.2em;
  text-align: center;
  margin-top: 0;
}

h2 {
  font-family: 'Fjalla One', Arial, sans-serif;
  font-size: 1.3em;
  margin: 1.4em 0 0.6em 0;
  color: #222;
  text-align: center;
}

h3 {
  font-family: 'Libre Franklin', Arial, sans-serif;
  font-size: 1.1em;
  margin: 1.2em 0 0.2em 0;
  font-weight: 700;
  color: #214366;
}

.section {
  margin-bottom: 2em;
}
  
.resume-header {
  text-align: center;
  margin-bottom: 1.2em;
}
.resume-header strong {
  font-size: 1.15em;
}
.resume-header em {
  font-style: normal;
  color: #888;
  font-size: 1em;
  display: block;
  margin-top: 0.3em;
}

ul {
  margin: 0 0 1em 1.3em;
  padding: 0;
}
li {
  margin-bottom: 0.6em;
}
.skills-list {
  columns: 2 250px;
  column-gap: 2em;
}
.skills-list li {
  break-inside: avoid;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5em;
  margin-top: 2em;
}

.card {
  background: #f6f8fa;
  padding: 1.2em 1em;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}
.card h2 {
  margin: 0 0 0.6em;
  font-size: 1.15em;
  color: #214366;
}
.card p {
  color: #555;
  flex: 1;
}
.card a {
  margin-top: 0.7em;
  color: #2874a6;
  text-decoration: underline;
  font-weight: bold;
}
.card a:hover {
  color: #1c5986;
}
.blurb {
  color: #555;
  margin-bottom: 1em;
  font-style: italic;
}

img.profile {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1em;
}

.center {
  text-align: center;
}

    .footer { margin-top: 30px; text-align: center; color: #aaa; font-size: 0.97em; padding: 20px 0 8px 0; }
    .social-links { margin: 2em 0 0; display: flex; gap: 18px; justify-content: center; }
    .social-links a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e9e9ec; color: #214366; transition: background 0.15s; }
    .social-links a:hover { background: #bcdcff; color: #1248d1; }
 

hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 2em 0;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .container {
    max-width: 98vw;
  }
}
@media (max-width: 700px) {
  .container {
    padding: 1em 0.5em;
  }
  .skills-list {
    columns: 1;
  }
  .grid {
    gap: 1em;
  }
}
@media (max-width: 600px) {
  .card {
    padding: 1em 0.6em 1em;
  }
  h1 {
    font-size: 1.3em;
  }
  .card h2 {
    font-size: 1.07em;
  }
}
    @media (max-width: 500px) {
      h1 { font-size: 1.3em; }
    }


/* --- NAV BAR FIX --- */
@media (max-width: 600px) {
  nav {
    flex-direction: column;
    gap: 0.5em;
    padding: 0.5em 0;
    font-size: 1em;
  }
  nav a {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0.2em 0;
    padding: 0.6em 0;
  }
}

/* --- CONTAINER PADDING --- */
@media (max-width: 600px) {
  .container, .container-resume {
    padding: 0.7em 0.2em 0.5em;
    margin: 1em 0.2em;
    max-width: 99vw;
  }
}

/* --- PROFILE PHOTO SIZING --- */
@media (max-width: 600px) {
  img.profile {
    width: 90px;
    height: 90px;
    margin-bottom: 0.6em;
  }
}

/* --- CARDS GRID --- */
@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 0.7em;
    margin-top: 1em;
  }
  .card {
    padding: 0.8em 0.4em 0.8em;
  }
}

/* --- FONTS: MAKE HEADERS SMALLER --- */
@media (max-width: 500px) {
  h1 { font-size: 1.05em; }
  h2 { font-size: 1em; }
  h3 { font-size: 0.98em; }
}

/* --- SOCIAL LINKS & FOOTER --- */
@media (max-width: 600px) {
  .social-links { gap: 10px; }
  .footer { font-size: 0.88em; padding: 14px 0 6px 0; }
}