: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-5: 1.5rem;
  --size-3: 1rem;
  --size-content-3: 60ch;
}
.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;
}
.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 {
  background-color: var(--text-1);
  color: var(--surface-1);
}
.series :-moz-any-link {
    color: inherit;
    text-decoration: none;
  }
.series :any-link {
    color: inherit;
    text-decoration: none;
  }
.series :-moz-any-link:hover {
      text-decoration: underline;
    }
.series :any-link:hover {
      text-decoration: underline;
    }
.series__inner {
  display: flex;
  justify-content: space-between;
  margin-inline: auto;
  max-inline-size: var(--detail-view-container-inline-size);
  padding-block: var(--space-s);
  padding-inline: var(--space-m);
}
.series__inner p {
    font-variant-numeric: initial;
  }
.card {
  gap: var(--space-m);
  margin-inline: auto;
  max-inline-size: var(--detail-view-container-inline-size);
  padding: min(2vw, var(--size-5));
}
@media (width >= 768px) {
.card {
    display: grid;
    grid-template-columns: 40% 1fr
}
  }
.card-image {
  align-self: start;
  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;
}
@media (width >= 768px) {
.card-image {
    position: sticky;
    top: var(--size-5)
}
  }
.card-image img {
    height: 100%;
    width: 100%;
  }
@media (width >= 768px) {
    .card-image + .ornamental-frame {
      margin-top: calc(-0.5 * var(--frame-ornament));
    }
  }
.card-content {
  padding-block: var(--space-s);
  padding-inline: var(--size-1);
}
.card-content h1 {
    max-inline-size: unset;
    text-align: center;
  }
.card-content > * + * {
    margin-block-start: var(--space-m);
  }
.card-text :is(p, ul, ol) + :is(p, ul, ol) {
    margin-block-start: var(--space-xs);
  }
.card-text :is(p, ul, ol, h2) {
    margin-inline: auto;
  }
.card-text :is(recipe-audio) {
    display: block;
    inline-size: 100%;
  }
.card-text :is(hr) {
    inline-size: 45%;
    margin-block: var(--size-3);
    margin-inline: auto;
  }
.card-text h2 {
    font-size: var(--u-font-size-0);
    margin-block-start: var(--size-3);
    max-inline-size: var(--size-content-3);
  }
.metadata {
  margin-block-start: var(--space-s);
  text-align: center;
}
.metadata * {
    font-size: var(--u-font-size--1);
  }
.card-footer__inner {
  margin-inline: auto;
  max-inline-size: var(--detail-view-container-inline-size);
  padding-block: var(--space-s);
  padding-block-end: 0;
  padding-inline: var(--size-5);
  text-align: center;
}
.logo-container {
  display: block;

  /* margin-block-start: calc(-1 * var(--size-10)); */
  margin-inline: auto;
  padding: var(--space-m);
  position: relative;
  text-align: center;
  width: min(90vw, 25rem);
  z-index: 10;
}
.cookbook-button {
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: var(--border-size-1) solid var(--text-1);
  color: var(--text-1);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--u-font-size--1);
  gap: var(--space-3xs);
  margin-block-start: var(--space-xs);
  min-block-size: 2.75rem;
  padding-block: var(--space-3xs);
  padding-inline: var(--space-xs);
  transition: background-color 0.15s var(--ease-3), color 0.15s var(--ease-3);
}
.cookbook-button:hover {
    background: var(--accent);
    color: var(--surface-1);
  }
.cookbook-button:focus-visible {
    outline: var(--border-size-2) solid var(--link);
    outline-offset: var(--border-size-2);
  }
.cookbook-button[aria-pressed='true'] {
    background: var(--text-1);
    color: var(--surface-1);
  }
.cookbook-button__icon {
  display: flex;
  flex-shrink: 0;
}
cookbook-button {
  display: block;
  text-align: center;
}