:root {
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --border-size-2: 2px;
  --size-1: .25rem;
  --font-weight-7: 700;
  --font-lineheight-1: 1.25;
  --border-size-1: 1px;
  --font-lineheight-2: 1.375;
  --font-weight-6: 600;
  --size-2: .5rem;
  --size-3: 1rem;
  --choco-1: #fce1bc;
  --shadow-2: 
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --size-5: 1.5rem;
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --shadow-3: 
    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
}
.recipe-card-image {
  box-shadow: inset var(--text-1) 0 0 0 2px, inset var(--surface-1) 0 0 0 4px,
    inset var(--text-1) 0 0 0 5px, inset var(--surface-1) 0 0 0 7px,
    inset var(--text-1) 0 0 0 10px, inset var(--surface-1) 0 0 0 15px,
    inset var(--text-1) 0 0 0 16px;
  padding: 22px;
}
.card-archive-list {
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-2);
  margin-inline: auto;
  max-inline-size: var(--detail-view-container-inline-size);
  padding: var(--size-3);
}
.card-archive-list > li {
    display: contents;
  }
.card-card {
  align-self: start;
  background-color: var(--surface-1);
  border: 1px solid var(--choco-1);
  border-radius: var(--border-size-1);
  box-shadow: var(--shadow-2);
  flex: 0 1 min(calc(7rem + 13vw), 24rem);
  overflow: hidden;
  padding: var(--size-2);
  position: relative;
  transform: rotate(var(--card-rotate));
  transition: box-shadow 0.1s ease-out, transform 0.1s ease-out;
  z-index: var(--card-z-index);
}
:is(.card-card:hover,.card-card:focus-within) {
    box-shadow: var(--shadow-3);
    transform: rotate(calc(-0.5 * var(--card-rotate)));
    z-index: 15;
  }
.card-card__series {
  background-color: var(--text-1);
  color: var(--surface-1);
  display: flex;
  font-variant-numeric: initial;
  line-height: 1;
  margin-block: calc(-1 * var(--size-2)) var(--size-2);
  margin-inline: calc(-1 * var(--size-2));
  padding-block: var(--size-1);
  padding-inline: var(--size-2);
}
.card-card__headline {
  font-size: var(--u-font-size-3);
  line-height: 1.1;
}
.card-card__headline a {
    color: var(--text-1);
    text-decoration: none;
  }
.card-card__headline a::after {
      content: '';
      inset: 0;
      position: absolute;
    }
.page-nav {
  display: grid;
  gap: var(--space-2xs);
  grid-template-areas: 'prev' 'position' 'next';
  justify-items: center;
  margin-block-end: var(--space-m);
  padding-block-start: var(--space-m);
}
@media (width >= 768px) {
.page-nav {
    grid-template-areas: 'prev position next';
    grid-template-columns: 1fr auto 1fr;
    place-items: baseline start
}
  }
.page-nav__prev {
  grid-area: prev;
}
.page-nav__position {
  font-size: var(--u-font-size--1);
  font-variant-numeric: oldstyle-nums;
  grid-area: position;
}
.page-nav__next {
  grid-area: next;
}
@media (width >= 768px) {
.page-nav__next {
    justify-self: end;
    text-align: end
}
  }
.page-nav-secondary {
  display: flex;
  font-size: var(--u-font-size--1);
  gap: var(--space-m);
  justify-content: center;
}
.series-archive-header {
  margin-block-end: var(--size-5);
  margin-inline: auto;
  max-inline-size: var(--detail-view-container-inline-size);
  text-align: center;
}
.series-archive-header h1 {
    font-size: var(--u-font-size-2);
    margin-inline: auto;
  }
.series-nav-container {
  margin-inline: auto;
  max-inline-size: var(--detail-view-container-inline-size);
  padding-block: var(--space-s);
  padding-inline: var(--size-5);
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
  }
}