:root {
  /* Font Sizes */
  --fs-300: 0.9375rem;
  --fs-400: 1.0625rem;
  --fs-500: 1.375rem;
  --fs-600: 1.875rem; 
  --fs-700: 2rem; 

  /* Fonts */
  --ff-body: "Roboto", sans-serif;
  --ff-heading: "Playfair Display", serif;

  /* Font Weights */
  --fw-400: 400;
  --fw-700: 700;
  --fw-900: 900;

  /* PRIMARY COLORS: Dark Blue / Navy (Hues around 220) */
  --clr-primary-200: hsla(220, 100%, 95%, 1); 
  --clr-primary-300: hsla(220, 60%, 55%, 1); 
  --clr-primary-400: hsla(220, 80%, 35%, 1); 
  --clr-primary-500: hsla(220, 100%, 15%, 1); 

  /* NEUTRAL COLORS: Black, White, Grays (Hues around 0/Black) */
  --clr-neutral-100: hsla(0, 0%, 100%, 1); 
  --clr-neutral-300: hsla(0, 0%, 50%, 1);  
  --clr-neutral-400: hsla(0, 0%, 40%, 1);  
  --clr-neutral-500: hsla(0, 0%, 60%, 1);  
  --clr-neutral-900: hsla(0, 0%, 10%, 1);  
}

@media (min-width: 35em) {
  :root {
    /* Font Sizes */
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.5rem;
    --fs-600: 2.25rem;
    --fs-700: 3rem;
  }
}

/* //////////////////////
  RESET 
  /////////////////////// */

/* Box sizing rules */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles */
ul:where([role="list"]), ol:where([role="list"]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img, picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit;
}

/* Remove all animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* //////////////////////
  General styling
  /////////////////////// */

body {
  font-family: var(--ff-body);
  font-size: var(--fs-400);
  color: var(--clr-neutral-900);
}

h1, h2, h3 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-900);
  line-height: 1.1;
}

strong {
  font-weight: var(--fw-700);
}

section, .section {
  padding: min(10vh, 10em) 0;
}



/* //////////////////////
  Utility Classes
  /////////////////////// */

/* flow utility for vertical spacing */
.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, 1em);
}

.container {
  margin-inline: auto;
  padding-inline: 1.5em;
  max-width: 72rem;
}

.text-center {
  text-align: center;
}

/* typgraphy */

.article-title, .section-title {
  color: var(--clr-primary-500);
}

.section-title {
  font-size: var(--fs-600);
}


/* //////////////////////
  Header
  /////////////////////// */
.page-header h1 a{
  text-decoration: none;  
}
  
.page-header {
  padding: 2em 0;
  border-bottom: 1px solid var(--clr-neutral-500);
}

.page-header__content {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertically centers logo and nav */
}

.nav-list {
  margin: 0;
  padding: 0;
  display: flex; /* Display links horizontally */
  gap: 1.5em; /* Spacing between links */
}

.nav-list a {
  color: var(--clr-neutral-900);
  text-decoration: none;
}

.nav-list a:focus,
.nav-list a:hover {
  color: var(--clr-primary-400);
  text-decoration: underline;
}


/* //////////////////////
  Footer
  /////////////////////// */

.site-footer {
  --logo-color: currentColor;
  padding: 2em 0;
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-500);
  text-align: center;
}

/* //////////////////////
  Homepage (HERO)
  /////////////////////// */

/* Full-Screen Hero Overlay Styles */
.hero-overlay {
  min-height: 70vh; 
  width: 100%;
  background-size: cover;      
  background-position: center center; 
  background-repeat: no-repeat;
  padding: 0; 
  position: relative; 
}

/* Positioning the content (text) within the hero */
.hero-overlay > .container {
    display: flex;
    min-height: 70vh;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}

/* TEXT CONTENT STYLING */
.landingSection__content {
    color: var(--clr-neutral-100); 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); 
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    padding-top: 15vh; 
    --clr-primary-500: var(--clr-neutral-100); 
}

/* 'SEE MORE' LINK STYLING */
.landingSection__more {
    position: absolute;
    bottom: 1.5em; 
    right: 1.5em; 
    color: var(--clr-neutral-100);
    text-decoration: none;
    font-size: var(--fs-300);
    background: rgba(0, 0, 0, 0.4);
    padding: 0.5em 1em;
    border-radius: 0.25em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 10;
}


/* //////////////////////
  Individual article page 
  /////////////////////// */

/* Main article container */
.main-article {
  margin-bottom: 3rem; 
  max-width: 90ch; 
  margin-inline: auto; 
}

/* Figure Styling */
.main-article__figure {
  margin-left: -1.5em;
  margin-right: -1.5em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  border-radius: 0.5rem; 
  overflow: hidden; 
  margin-bottom: 2rem;
  margin-top: 2rem; 
}

/* Figure Caption Styling */
.main-article__figure figcaption {
  padding: 1rem 1.5em; 
  margin: 0; 
  font-size: var(--fs-300);
  opacity: 0.8; 
  background-color: var(--clr-primary-200); 
  border-top: 1px solid var(--clr-primary-300); 
}

/* //////////////////////////////////////////////////////
  FEATURED ARTICLES SECTION - RESEARCH HIGHLIGHTS CARD STYLE
  ////////////////////////////////////////////////////// */

/* 1. Container Grid Setup */
.articles__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 4rem; 
    margin-bottom: 6rem;
    --flow-spacer: 0;
}

/* 2. Individual List Item (Removes default li padding/border) */
.articles__list li {
    padding: 0;
    border-bottom: none;
}


/* 3. The Article Card (.snippet) - APPLIES NEW CARD STYLING */
.snippet {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    
    height: 100%; 
    padding: 1.5rem;
    
    background-color: var(--clr-neutral-100);
    border: 1px solid var(--clr-primary-200); 
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 
    transition: box-shadow 0.2s, border-color 0.2s;
    
    gap: 0.5rem; 
}

.snippet:hover {
    border-color: var(--clr-primary-300); 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* --- Content Elements Overrides --- */

/* Hide UNUSED elements (Image, Description) */
.snippet__image,
.snippet__body { 
    display: none; 
}

/* Date/Meta (Date and Author) */
.snippet__meta {
    /* Style for the date text */
    font-size: var(--fs-400);
    color: var(--clr-neutral-400);
    font-weight: var(--fw-400); 
    margin-bottom: 0.5em;
    margin-top: 0; 
    
    /* FIX: Use flex to separate date and author line visually */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
    white-space: normal;
    overflow: visible;
    text-overflow: clip; 
}

/* Author Line (The span inside the meta tag) */
.snippet__meta span {
    font-weight: var(--fw-400);
    color: var(--clr-neutral-900);
    font-size: var(--fs-300); 
    margin-top: 0.25em; 
    display: block; 
}

/* Title Styling */
.snippet__title {
    font-family: var(--ff-body); 
    font-size: var(--fs-500); 
    font-weight: var(--fw-900);
    color: var(--clr-primary-500); 
    line-height: 1.2;
    margin-top: 0; 
    margin-bottom: 0; 
}

.snippet__title a {
    color: inherit;
    text-decoration: none;
}

.snippet__title a:hover {
    text-decoration: underline;
}

/* --- Button Styling (Override Global Button) --- */
.snippet .btn--primary {
    background: var(--clr-primary-500);
    color: var(--clr-neutral-100);
    font-weight: var(--fw-400);
    
    text-align: center;
    border-radius: 0.25em;
    border: none;
    
    margin-top: auto; 
    width: 100%;
    padding: 0.85em 1.75em; 
}

.snippet .btn--primary:hover {
    background: var(--clr-primary-400);
}


/* //////////////////////
  Team Section Layout
  /////////////////////// */

  .team-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 4rem; 
}

/* Styling for the member card itself */
.team-member {
    background-color: var(--clr-neutral-100);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.team-member:hover {
    transform: translateY(-5px);
}

.team-member__link {
    text-decoration: none;
    color: inherit;
    display: block; 
}

.team-member__image {
    width: 100%;
    aspect-ratio: 1 / 1; 
    object-fit: cover;
}

.team-member__details {
    padding: 1.5rem;
}

.team-member__name {
    font-size: var(--fs-500);
    color: var(--clr-primary-500);
    line-height: 1.2;
}

.team-member__position {
    font-size: var(--fs-400);
    font-weight: var(--fw-700);
    color: var(--clr-neutral-900);
    margin-top: 0.25rem;
}

.team-member__institution {
    font-size: var(--fs-300);
    color: var(--clr-neutral-400);
    margin-top: 0.5rem;
}