* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: black; color: gainsboro; font-family: "Karla", Georgia, serif; font-size: 20px; line-height: 1.55; }
.page { width: min(100% - 40px, 900px); margin-inline: auto; padding-block: 40px 80px;  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-right: 2px solid rgba(255, 255, 255, 0.3);}




h1, h2, p, figure { margin-top: 0; }
.page-header { max-width: 900px; margin-bottom: 48px; }
h1 { 
  margin-bottom: 24px; 
  font-family: "Karla", Arial, sans-serif; 
  font-size: clamp(2rem, 4vw, 2rem); /* Fixed the spacing typo here */
  font-weight: 600; 
     text-decoration:underline gray 5%;/* Adds the font weight */
  line-height: 1.8; 
}
.introduction { font-size: 1.15rem; }
.research { max-width: 900px; margin-bottom: 48px; }
h2 { margin-bottom: 24px; font-family: "Karla", Arial, sans-serif; font-size: 1rem; line-height: 1.3; }
.research ul { padding-left: 1.4em; }
.research li + li { margin-top: 16px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 48px; }
.site-nav a { display: inline-block; line-height: 0; }
.site-nav img { display: block; max-width: 100%; border: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid #005fcc; outline-offset: 4px; }
.archive-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 20px; }
.archive-column { min-width: 0; }
.archive-item { margin: 0 0 9px; }
.archive-item img { display: block; width: 130px; max-width: 100%; height: auto; margin-bottom: 8px; border: 1px solid #fff; }
.archive-item img.border-dark { border-color: white; }
.archive-item figcaption { overflow-wrap: anywhere; font-family: "Signika", Arial, sans-serif; font-size: 0.8rem; font-weight: 50; line-height: 1.4; }  
#myBtn { position: fixed; right: 16px; bottom: 20px; z-index: 99; padding: 12px 16px; border: 0; border-radius: 20px; background: #555; color: #fff; font-family: "Karla", Arial, sans-serif; font-size: 1rem; cursor: pointer; }
#myBtn[hidden] { display: none; }
#myBtn:hover { background: #323e3f; }
@media (max-width: 1000px) { .archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .page { width: min(100% - 28px, 1200px); padding-top: 24px; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 340px) { .archive-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }