:root {
  --arthro-bg: #f8fbfc;
  --arthro-surface: #ffffff;
  --arthro-tone: #2b7a78;
  --arthro-tone-hover: #1f5957;
  --arthro-ink: #17252a;
  --arthro-gradient: linear-gradient(135deg, #def2f1 0%, #ffffff 100%);
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Lato', sans-serif;
}

/* Base resets & typography */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

p, span, div, a {
  font-family: var(--font-body);
}

/* Pure CSS Image Gallery */
.arthro-big-view img {
  opacity: 0;
  z-index: 1;
}

#pic1:checked ~ .arthro-big-view .img1,
#pic2:checked ~ .arthro-big-view .img2,
#pic3:checked ~ .arthro-big-view .img3,
#pic4:checked ~ .arthro-big-view .img4 {
  opacity: 1;
  z-index: 10;
}

/* Thumbnail Selection Styling */
.arthro-thumb-item {
  border: 2px solid transparent;
  transition: all 0.2s ease-in-out;
  opacity: 0.6;
}

.arthro-thumb-item:hover {
  opacity: 0.9;
}

#pic1:checked ~ .arthro-thumb-strip label[for="pic1"],
#pic2:checked ~ .arthro-thumb-strip label[for="pic2"],
#pic3:checked ~ .arthro-thumb-strip label[for="pic3"],
#pic4:checked ~ .arthro-thumb-strip label[for="pic4"] {
  border-color: var(--arthro-tone);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Action Button Interactivity */
.arthro-action-btn:hover {
  background-color: var(--arthro-tone-hover) !important;
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.arthro-action-btn:active {
  transform: translateY(0);
}

/* Content spacing */
.arthro-info-panel p {
  margin-bottom: 1.25rem;
}
.arthro-info-panel p:last-child {
  margin-bottom: 0;
}