/* ===== AIRY ===== */
* {
  box-sizing: border-box;
}

:root {
  --font-heading: 'Inter', sans-serif;
  ---font-subhead: 'Fira Sans', sans-serif;
  --font-body: 'Atkinson Hyperlegible', sans-serif;
}

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 600; /* Semi-bold */
}

h3, h4 {
  font-family: var(--font-subhead);
  font-weight: 500;
}

body {
  background-color: none;
  color: black;
  font-family: Arial, sans-serif;
  font-family: var(--font-body);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

a:link { color: grey; text-decoration: none; }
a:visited { color: darkgrey; text-decoration: none; }
a:hover { color: #bfd294; text-decoration: none; }
a:active { color: grey; text-decoration: none; }

/* GRID CONTAINER */
.layout-grid {
  display: grid;
  grid-template-columns: 25% 75%;
  margin-top: 85px; /* header height */
  min-height: calc(100vh - 85px); /* Prevents footer cutoff */
}

/* HEADER */
.header-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 85px; /* banner height */
  z-index: 1000; /* stays above other content */
  overflow: hidden; /* clips image overflow */
  box-shadow: 0 2px 5px rgba(25,7,0,0.1);
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mimics background-size: cover */
  object-position: center; /* Focuses image center */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px; /* Required! */
}

/* LEFT COLUMN */
.left-column {
  display: flex;
  justify-content: flex-end;
}

.sidebar {
  font-size: 13px;
  font-family: Verdana, sans-serif;
  color: grey;
  width: 100%;
  max-width: 200px;
  padding-top: 45px;
  padding-left: 20px;
  position: fixed;
  top: 85px; /* header height */
  height: calc(100vh - 100px); /* Adjusts height */
  overflow-y: auto; /* Scrollable if content exceeds height */
  
}

/* RIGHT COLUMN */
.right-column {
  display: flex;
  justify-content: flex-start;
  padding-left: 0px;
}

.content {
  text-align: justify;
  width: 100%;
  max-width: 650px;
  padding-top: 45px;
  margin-bottom: 20px;
}

content img {
  max-width: 100%; 
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes inline spacing */
}

/* SPLASH & FOOTER */
.splash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.footer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 900px) {
  .layout-grid {
    display: block;
  }
  
  .content img {
    max-width: 100%; 
    padding: 10px 0; 
  }
  
  .sidebar {
    position: relative;
    width: 100%;
    max-width: none;
    height: auto;
    top: auto; /* Reset fixed positioning */
    padding-bottom: 0px; 
    margin-bottom: 10px; 
  }
  
  .right-column {
    padding: 0 10px;
  }
  
  .content {
    margin-top: 0; 
    padding-top: 10px;
  }

  .layout-grid {
    margin-top: 85px; /* Header height */
    display: block;
  }
}