@layer reset, base, tokens, layout, components, utilities;

@layer reset {
  /*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

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

  * {
    margin: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  #root,
  #__next {
    isolation: isolate;
  }
}

@layer base {
  body {
    background-color: var(--color-background);
    font-family: var(--font-family);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-default);
    line-height: var(--line-height);
  }

  h2 {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-heading);
  }

  span {
    font-size: var(--font-size-xs);
  }

  p {
    color: var(--color-text);
  }

  @media (min-width: 1440px) {
    :root {
      --space-150: 16px;
    }
    body {
      font-size: var(--font-size-m);
    }

    h2 {
      font-size: var(--font-size-xl);
    }

    span {
      font-size: var(--font-size-s);
    }
  }
}

@layer tokens.primitive {
  :root {
    --color-yellow-500: hsla(47, 88%, 63%, 1);
    --color-gray-500: hsla(0, 0%, 42%, 1);
    --color-gray-950: hsla(0, 0%, 7%, 1);
    --color-white: hsla(0, 0%, 100%, 1);

    --font-family:
      "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;

    --font-size-xs: 12px;
    --font-size-s: 14px;
    --font-size-m: 16px;
    --font-size-l: 20px;
    --font-size-xl: 24px;

    /* --font-size-s: clamp(12px, 11.3px + 0.19vw, 14px);
    --font-size-m: clamp(14px, 13.3px + 0.19vw, 16px);
    --font-size-l: clamp(20px, 18.59px + 0.38vw, 24px); */

    --font-weight-500: 500;
    --font-weight-800: 800;
    --line-height: 150%;
    --size-icon: 32px;

    --space-050: 4px;
    --space-100: 8px;
    --space-150: 12px;
    --space-200: 16px;
    --space-300: 24px;

    --border-radius-s: 4px;
    --border-radius-m: 10px;
    --border-radius-l: 20px;
  }
}

@layer tokens.semantic {
  :root {
    --color-background: var(--color-yellow-500);
    --color-text: var(--color-gray-500);
    --color-heading: var(--color-gray-950);
    --color-surface: var(--color-white);
    --color-border: var(--color-gray-950);

    --font-weight-default: var(--font-weight-500);
    --font-weight-heading: var(--font-weight-800);
  }
}

@layer layout {
  /* Container */
  .container {
    max-width: 64em;
    width: 86vw;
    margin-inline: auto;
  }

  /* Center*/
  .l-center {
    max-inline-size: 60ch;
    margin-inline: auto;
    box-sizing: content-box;
    padding-inline: 1rem;
  }

  /* Cluster*/
  .l-cluster > * {
    margin: 0;
  }

  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-150, 12px);
  }

  /* Cover */
  .l-cover {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    padding: var(--space-300, 24px);
  }

  .l-cover > * {
    margin-block: 1rem;
  }

  .l-cover > :first-child {
    margin-block-start: 0;
  }

  .l-cover > :last-child {
    margin-block-end: 0;
  }

  .l-cover > .l-cover__centered {
    margin-block: auto;
  }

  /* Stack */
  .l-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-150, 12px);
  }

  @media (min-width: 1440px) {
    .l-stack {
      gap: 14px;
    }
  }

  .l-stack--large {
    gap: var(--space-300, 24px);
  }

  /* .l-stack > * {
    margin: 0;
  }

  .l-stack > * + * {
    gap: var(--space);
  } */
}


@layer components {
  .card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-l);
    box-shadow: 8px 8px 0 hsl(0, 0%, 0%);
    padding: var(--space-300, 24px);
    max-inline-size: 384px;
  }

  .card__title:hover {
    cursor: pointer;
  }

  .card__title:active {
    color: var(--color-yellow-500);
  }

  .card__category {
    font-weight: var(--font-weight-heading);
  }

  .card__illustration {
    border-radius: var(--border-radius-m);
    object-fit: cover;
  }

  .card__author img {
    width: var(--size-icon);
  }

  .card__author span {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-heading);
  }
}

@layer components {
  .chip {
    background-color: var(--color-background);
    padding: var(--space-050, 4px) var(--space-150, 12px);
    max-width: fit-content;
    border-radius: var(--border-radius-s);
  }
}


@layer utilities {
  .text-center {
    text-align: center;
  }

  .align\:center {
    align-items: center;
  }

  .justify\:center {
    justify-content: center;
  }
}


/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0ZGluIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6InN0ZGluIiwic291cmNlc0NvbnRlbnQiOlsiQGxheWVyIHJlc2V0LCBiYXNlLCB0b2tlbnMsIGxheW91dCwgY29tcG9uZW50cywgdXRpbGl0aWVzO1xuXG5AbGF5ZXIgcmVzZXQge1xuICAvKlxuICBKb3NoJ3MgQ3VzdG9tIENTUyBSZXNldFxuICBodHRwczovL3d3dy5qb3Nod2NvbWVhdS5jb20vY3NzL2N1c3RvbS1jc3MtcmVzZXQvXG4qL1xuXG4gICosXG4gICo6OmJlZm9yZSxcbiAgKjo6YWZ0ZXIge1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIH1cblxuICAqIHtcbiAgICBtYXJnaW46IDA7XG4gIH1cblxuICBAbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IG5vLXByZWZlcmVuY2UpIHtcbiAgICBodG1sIHtcbiAgICAgIGludGVycG9sYXRlLXNpemU6IGFsbG93LWtleXdvcmRzO1xuICAgIH1cbiAgfVxuXG4gIGJvZHkge1xuICAgIGxpbmUtaGVpZ2h0OiAxLjU7XG4gICAgLXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7XG4gIH1cblxuICBpbWcsXG4gIHBpY3R1cmUsXG4gIHZpZGVvLFxuICBjYW52YXMsXG4gIHN2ZyB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICB9XG5cbiAgaW5wdXQsXG4gIGJ1dHRvbixcbiAgdGV4dGFyZWEsXG4gIHNlbGVjdCB7XG4gICAgZm9udDogaW5oZXJpdDtcbiAgfVxuXG4gIHAsXG4gIGgxLFxuICBoMixcbiAgaDMsXG4gIGg0LFxuICBoNSxcbiAgaDYge1xuICAgIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gIH1cblxuICBwIHtcbiAgICB0ZXh0LXdyYXA6IHByZXR0eTtcbiAgfVxuXG4gIGgxLFxuICBoMixcbiAgaDMsXG4gIGg0LFxuICBoNSxcbiAgaDYge1xuICAgIHRleHQtd3JhcDogYmFsYW5jZTtcbiAgfVxuXG4gICNyb290LFxuICAjX19uZXh0IHtcbiAgICBpc29sYXRpb246IGlzb2xhdGU7XG4gIH1cbn1cblxuQGxheWVyIGJhc2Uge1xuICBib2R5IHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1iYWNrZ3JvdW5kKTtcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHkpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLXMpO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodC1kZWZhdWx0KTtcbiAgICBsaW5lLWhlaWdodDogdmFyKC0tbGluZS1oZWlnaHQpO1xuICB9XG5cbiAgaDIge1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWwpO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodC1oZWFkaW5nKTtcbiAgfVxuXG4gIHNwYW4ge1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLXhzKTtcbiAgfVxuXG4gIHAge1xuICAgIGNvbG9yOiB2YXIoLS1jb2xvci10ZXh0KTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxNDQwcHgpIHtcbiAgICA6cm9vdCB7XG4gICAgICAtLXNwYWNlLTE1MDogMTZweDtcbiAgICB9XG4gICAgYm9keSB7XG4gICAgICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1tKTtcbiAgICB9XG5cbiAgICBoMiB7XG4gICAgICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS14bCk7XG4gICAgfVxuXG4gICAgc3BhbiB7XG4gICAgICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1zKTtcbiAgICB9XG4gIH1cbn1cblxuQGxheWVyIHRva2Vucy5wcmltaXRpdmUge1xuICA6cm9vdCB7XG4gICAgLS1jb2xvci15ZWxsb3ctNTAwOiBoc2xhKDQ3LCA4OCUsIDYzJSwgMSk7XG4gICAgLS1jb2xvci1ncmF5LTUwMDogaHNsYSgwLCAwJSwgNDIlLCAxKTtcbiAgICAtLWNvbG9yLWdyYXktOTUwOiBoc2xhKDAsIDAlLCA3JSwgMSk7XG4gICAgLS1jb2xvci13aGl0ZTogaHNsYSgwLCAwJSwgMTAwJSwgMSk7XG5cbiAgICAtLWZvbnQtZmFtaWx5OlxuICAgICAgXCJGaWd0cmVlXCIsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgQmxpbmtNYWNTeXN0ZW1Gb250LCBcIlNlZ29lIFVJXCIsXG4gICAgICBSb2JvdG8sIE94eWdlbiwgVWJ1bnR1LCBDYW50YXJlbGwsIFwiT3BlbiBTYW5zXCIsIFwiSGVsdmV0aWNhIE5ldWVcIixcbiAgICAgIHNhbnMtc2VyaWY7XG5cbiAgICAtLWZvbnQtc2l6ZS14czogMTJweDtcbiAgICAtLWZvbnQtc2l6ZS1zOiAxNHB4O1xuICAgIC0tZm9udC1zaXplLW06IDE2cHg7XG4gICAgLS1mb250LXNpemUtbDogMjBweDtcbiAgICAtLWZvbnQtc2l6ZS14bDogMjRweDtcblxuICAgIC8qIC0tZm9udC1zaXplLXM6IGNsYW1wKDEycHgsIDExLjNweCArIDAuMTl2dywgMTRweCk7XG4gICAgLS1mb250LXNpemUtbTogY2xhbXAoMTRweCwgMTMuM3B4ICsgMC4xOXZ3LCAxNnB4KTtcbiAgICAtLWZvbnQtc2l6ZS1sOiBjbGFtcCgyMHB4LCAxOC41OXB4ICsgMC4zOHZ3LCAyNHB4KTsgKi9cblxuICAgIC0tZm9udC13ZWlnaHQtNTAwOiA1MDA7XG4gICAgLS1mb250LXdlaWdodC04MDA6IDgwMDtcbiAgICAtLWxpbmUtaGVpZ2h0OiAxNTAlO1xuICAgIC0tc2l6ZS1pY29uOiAzMnB4O1xuXG4gICAgLS1zcGFjZS0wNTA6IDRweDtcbiAgICAtLXNwYWNlLTEwMDogOHB4O1xuICAgIC0tc3BhY2UtMTUwOiAxMnB4O1xuICAgIC0tc3BhY2UtMjAwOiAxNnB4O1xuICAgIC0tc3BhY2UtMzAwOiAyNHB4O1xuXG4gICAgLS1ib3JkZXItcmFkaXVzLXM6IDRweDtcbiAgICAtLWJvcmRlci1yYWRpdXMtbTogMTBweDtcbiAgICAtLWJvcmRlci1yYWRpdXMtbDogMjBweDtcbiAgfVxufVxuXG5AbGF5ZXIgdG9rZW5zLnNlbWFudGljIHtcbiAgOnJvb3Qge1xuICAgIC0tY29sb3ItYmFja2dyb3VuZDogdmFyKC0tY29sb3IteWVsbG93LTUwMCk7XG4gICAgLS1jb2xvci10ZXh0OiB2YXIoLS1jb2xvci1ncmF5LTUwMCk7XG4gICAgLS1jb2xvci1oZWFkaW5nOiB2YXIoLS1jb2xvci1ncmF5LTk1MCk7XG4gICAgLS1jb2xvci1zdXJmYWNlOiB2YXIoLS1jb2xvci13aGl0ZSk7XG4gICAgLS1jb2xvci1ib3JkZXI6IHZhcigtLWNvbG9yLWdyYXktOTUwKTtcblxuICAgIC0tZm9udC13ZWlnaHQtZGVmYXVsdDogdmFyKC0tZm9udC13ZWlnaHQtNTAwKTtcbiAgICAtLWZvbnQtd2VpZ2h0LWhlYWRpbmc6IHZhcigtLWZvbnQtd2VpZ2h0LTgwMCk7XG4gIH1cbn1cblxuQGxheWVyIGxheW91dCB7XG4gIC8qIENvbnRhaW5lciAqL1xuICAuY29udGFpbmVyIHtcbiAgICBtYXgtd2lkdGg6IDY0ZW07XG4gICAgd2lkdGg6IDg2dnc7XG4gICAgbWFyZ2luLWlubGluZTogYXV0bztcbiAgfVxuXG4gIC8qIENlbnRlciovXG4gIC5sLWNlbnRlciB7XG4gICAgbWF4LWlubGluZS1zaXplOiA2MGNoO1xuICAgIG1hcmdpbi1pbmxpbmU6IGF1dG87XG4gICAgYm94LXNpemluZzogY29udGVudC1ib3g7XG4gICAgcGFkZGluZy1pbmxpbmU6IDFyZW07XG4gIH1cblxuICAvKiBDbHVzdGVyKi9cbiAgLmwtY2x1c3RlciA+ICoge1xuICAgIG1hcmdpbjogMDtcbiAgfVxuXG4gIC5sLWNsdXN0ZXIge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC13cmFwOiB3cmFwO1xuICAgIGdhcDogdmFyKC0tc3BhY2UtMTUwLCAxMnB4KTtcbiAgfVxuXG4gIC8qIENvdmVyICovXG4gIC5sLWNvdmVyIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgbWluLWJsb2NrLXNpemU6IDEwMHZoO1xuICAgIHBhZGRpbmc6IHZhcigtLXNwYWNlLTMwMCwgMjRweCk7XG4gIH1cblxuICAubC1jb3ZlciA+ICoge1xuICAgIG1hcmdpbi1ibG9jazogMXJlbTtcbiAgfVxuXG4gIC5sLWNvdmVyID4gOmZpcnN0LWNoaWxkIHtcbiAgICBtYXJnaW4tYmxvY2stc3RhcnQ6IDA7XG4gIH1cblxuICAubC1jb3ZlciA+IDpsYXN0LWNoaWxkIHtcbiAgICBtYXJnaW4tYmxvY2stZW5kOiAwO1xuICB9XG5cbiAgLmwtY292ZXIgPiAubC1jb3Zlcl9fY2VudGVyZWQge1xuICAgIG1hcmdpbi1ibG9jazogYXV0bztcbiAgfVxuXG4gIC8qIFN0YWNrICovXG4gIC5sLXN0YWNrIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAganVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuICAgIGdhcDogdmFyKC0tc3BhY2UtMTUwLCAxMnB4KTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxNDQwcHgpIHtcbiAgICAubC1zdGFjayB7XG4gICAgICBnYXA6IDE0cHg7XG4gICAgfVxuICB9XG5cbiAgLmwtc3RhY2stLWxhcmdlIHtcbiAgICBnYXA6IHZhcigtLXNwYWNlLTMwMCwgMjRweCk7XG4gIH1cblxuICAvKiAubC1zdGFjayA+ICoge1xuICAgIG1hcmdpbjogMDtcbiAgfVxuXG4gIC5sLXN0YWNrID4gKiArICoge1xuICAgIGdhcDogdmFyKC0tc3BhY2UpO1xuICB9ICovXG59XG5cblxuQGxheWVyIGNvbXBvbmVudHMge1xuICAuY2FyZCB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3Itc3VyZmFjZSk7XG4gICAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tY29sb3ItYm9yZGVyKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLWwpO1xuICAgIGJveC1zaGFkb3c6IDhweCA4cHggMCBoc2woMCwgMCUsIDAlKTtcbiAgICBwYWRkaW5nOiB2YXIoLS1zcGFjZS0zMDAsIDI0cHgpO1xuICAgIG1heC1pbmxpbmUtc2l6ZTogMzg0cHg7XG4gIH1cblxuICAuY2FyZF9fdGl0bGU6aG92ZXIge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxuXG4gIC5jYXJkX190aXRsZTphY3RpdmUge1xuICAgIGNvbG9yOiB2YXIoLS1jb2xvci15ZWxsb3ctNTAwKTtcbiAgfVxuXG4gIC5jYXJkX19jYXRlZ29yeSB7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWhlYWRpbmcpO1xuICB9XG5cbiAgLmNhcmRfX2lsbHVzdHJhdGlvbiB7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cy1tKTtcbiAgICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgfVxuXG4gIC5jYXJkX19hdXRob3IgaW1nIHtcbiAgICB3aWR0aDogdmFyKC0tc2l6ZS1pY29uKTtcbiAgfVxuXG4gIC5jYXJkX19hdXRob3Igc3BhbiB7XG4gICAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtcyk7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWhlYWRpbmcpO1xuICB9XG59XG5cbkBsYXllciBjb21wb25lbnRzIHtcbiAgLmNoaXAge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLWJhY2tncm91bmQpO1xuICAgIHBhZGRpbmc6IHZhcigtLXNwYWNlLTA1MCwgNHB4KSB2YXIoLS1zcGFjZS0xNTAsIDEycHgpO1xuICAgIG1heC13aWR0aDogZml0LWNvbnRlbnQ7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cy1zKTtcbiAgfVxufVxuXG5cbkBsYXllciB1dGlsaXRpZXMge1xuICAudGV4dC1jZW50ZXIge1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgfVxuXG4gIC5hbGlnblxcOmNlbnRlciB7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgfVxuXG4gIC5qdXN0aWZ5XFw6Y2VudGVyIHtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxufVxuXG4iXX0= */