:root {
  /* colours */
  --yellow: hsl(47 88% 63%);
  --white: hsl(0 0% 100%);
  --gray-500: hsl(0 0% 42%);
  --gray-950: hsl(0 0% 7%);
  --black: hsl(0 0% 0%);

  /* semantic colours */
  --clr-text-primary: var(--gray-950);
  --clr-text-secondary: var(--gray-500);
  --clr-bg-body: var(--yellow);
  --clr-bg-card: var(--white);
  --clr-accent: var(--yellow);
  --clr-border: var(--gray-950);

  /* typography */
  --font-sans: "Figtree", sans-serif;
  --fw-md: 500;
  --fw-xl: 800;
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-md: 1rem; /* 16px */
  --fs-lg: 1.25rem; /* 20px */
  --fs-xl: 1.5rem; /* 24px */
  --text-fluid-sm: clamp(var(--fs-xs), 0.7143rem + 0.1786vw, var(--fs-sm));
  --text-fluid-md: clamp(var(--fs-sm), 0.8393rem + 0.1786vw, var(--fs-md));
  --text-fluid-lg: clamp(var(--fs-lg), 1.1786rem + 0.3571vw, var(--fs-xl));
  --line-height: 1.5;

  /* spacing */
  --space-50: 4px;
  --space-100: 8px;
  --space-150: 12px;
  --space-300: 24px;

  /* border radius */
  --radius-sm: var(--space-50);
  --radius-md: 10px;
  --radius-lg: 20px;

  /* box shadow */
  --shadow-default: var(--space-100) var(--space-100) 0 0 var(--black);
  --shadow-lg: 14px 14px 0 0 var(--black);
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-VariableFont.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

body {
  background-color: var(--clr-bg-body);
  color: var(--clr-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-fluid-md);
  font-weight: var(--fw-md);
  line-height: var(--line-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-300);
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.card {
  background-color: var(--clr-bg-card);
  max-width: 24rem;
  padding: var(--space-300);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  position: relative;

  &:hover,
  &:focus-within {
    box-shadow: var(--shadow-lg);
  }
}

.card__image {
  object-fit: cover;
  border-radius: var(--radius-md);
}

.card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
}

.card__category {
  background-color: var(--clr-accent);
  align-self: flex-start;
  padding: var(--space-50) var(--space-150);
  border-radius: var(--radius-sm);
  font-size: var(--text-fluid-sm);
  font-weight: var(--fw-xl);
}

.card__date {
  font-size: var(--text-fluid-sm);
}

.card__title {
  font-size: var(--text-fluid-lg);
  font-weight: var(--fw-xl);
}

.card__link {
  color: inherit;
  text-decoration: none;

  &:hover,
  &:focus-visible {
    color: var(--clr-accent);
  }
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__description {
  color: var(--clr-text-secondary);
}

.card__author {
  display: flex;
  align-items: center;
  gap: var(--space-150);
}

.card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-xl);
}