/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap'); */
body {
  /* font-family: sans-serif; */
  font-family: 'IBM Plex Mono', monospace;
  margin: 40px auto;
  max-width: 1000px;
  padding: 20px;
}

h1 {
    /* color: #333 */
 }

p {
  /* color: #362800; */
}

.centered-container {
    /* A trick  */
    display: block;;
    margin: 0 auto;
}

img {
    border-radius: 12px;
}

.caption {
    text-align: center;
    margin-top: 8px;
    font-size: 0.875rem; /* Slightly smaller font size for captions */
}

/* --- Font Sizes --- */

:root {
  /* below the base */
  --font-size-2b: 0.6875rem;
  --font-size-1b: 0.8125rem;
  /* color: #432500; */
  color: #281600;
  /* the base */
  --font-size: 1rem;

  /* above the base */
  --font-size-1: 1.1875rem;
  --font-size-2: 1.4375rem;
  --font-size-3: 1.6875rem;
  --font-size-4: 2rem;
  --font-size-5: 2.375rem;
  --font-size-6: 2.8125rem;
}

/* --- Line Heights --- */

:root {
  /* below the base */
  --line-height-2b: 1.8182;
  --line-height-1b: 1.5385;

  /* the base */
  --line-height: 1.5;

  /* above the base */
  --line-height-1: 1.4737;
  --line-height-2: 1.3913;
  --line-height-3: 1.3333;
  --line-height-4: 1.25;
  --line-height-5: 1.2632;
  --line-height-6: 1.1556;
}

/* --- Letter Spacings --- */

:root {
  /* below the base */
  --letter-space-2b: 0.0645em;
  --letter-space-1b: 0.05em;

  /* the base */
  --letter-space: 0.035em;

  /* above the base */
  --letter-space-1: 0.0247em;
  --letter-space-2: 0.0152em;
  --letter-space-3: 0.0085em;
  --letter-space-4: 0.0025em;
  --letter-space-5: -0.0026em;
  --letter-space-6: -0.0069em;
}

/* ------------------------------
 | Examples
 */

/* --- Default Text --- */

body {
  font-weight: 400;
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-space);
}

/* --- Headers --- */

:is(h1, h2, h3) {
  font-weight: 400;
}

h1 {
  font-size: var(--font-size-5);
  line-height: var(--line-height-5);
  letter-spacing: var(--letter-space-5);
}
h2 {
  font-size: var(--font-size-4);
  line-height: var(--line-height-4);
  letter-spacing: var(--letter-space-4);
}
h3 {
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  letter-spacing: var(--letter-space-3);
}
/* h4 {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-space-2);
} */
h4 {
  font-size: var(--font-size-1);
  line-height: 0;
  letter-spacing: var(--letter-space-1);
  font-weight: 500;
  font-style: italic;
}



/* a {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
  
}

a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
} */



a {
  position: relative;
  text-decoration: none;
  transition: 
    color 0.3s ease;
  color: black;
  /* Add padding to give space for the highlight box */
  padding: 4px 6px;
  margin: -4px -6px; /* Negative margin to maintain original spacing */
}

a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  /* Use the text color for the background instead of currentColor */
  background-color: #281600;
  /* Animate both width and height */
  transition: 
    width 0.3s ease, 
    height 0.3s ease 0.3s; /* Height starts after width completes */
  z-index: -1; /* Put highlight behind the text */
}

a:hover {
  /* Invert to light color when highlighted */
  color: #f5f5f5;
}

a:hover::after {
  width: 100%;
  /* Grow to cover the full link height including padding */
  height: calc(100% + 2px);
  bottom: -1px;
}

a {
  position: relative;
  text-decoration: none;
  transition: 
    color 0.15s ease;  /* Faster reverse for color */
  color: black;
  /* Add padding to give space for the highlight box */
  padding: 4px 6px;
  margin: -4px -6px; /* Negative margin to maintain original spacing */
}

a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  /* Use the text color for the background instead of currentColor */
  background-color: #281600;
  /* Animate both width and height - REVERSE TIMING */
  transition: 
    width 0.15s ease,   /* Faster reverse */
    height 0.15s ease 0.15s;  /* Faster reverse, no delay */
  z-index: -1; /* Put highlight behind the text */
}

a:hover {
  /* Invert to light color when highlighted */
  color: #f5f5f5;
  transition: 
    color 0.3s ease;  /* Keep original forward timing */
}

a:hover::after {
  /* Override with FORWARD TIMING only during hover */
  transition: 
    width 0.3s ease, 
    height 0.3s ease 0.3s; /* Height starts after width completes */
  width: 100%;
  /* Grow to cover the full link height including padding */
  height: calc(100% + 2px);
  bottom: -1px;
}