.prose {
  /* prose-xl */
  font-size: 1.25rem;
  line-height: 1.8;

  /* prose styling for various elements */
  & :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
  }
  
  & :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 1.2em;
    line-height: 1.5;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  
  & :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-top: var(--spacing-4, 1rem);
    padding-bottom: var(--spacing-4, 1rem);
    padding-inline-start: var(--spacing-4, 1rem);
    padding-inline-end: var(--spacing-4, 1rem);
    background-color: var(--bg-stone-50, #fafaf9);
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--text-orange-500-30, rgba(249, 115, 22, 0.3));
    display: flex;
    flex-direction: column;
  }
  
  /* Italic text inside blockquotes */
  & :where(blockquote p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-style: italic;
  }
  
  /* Attribution in blockquotes */
  /* & :where(blockquote > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-bottom: 0;
    align-self: flex-end;
  } */
  
  /* prose-h1:text-3xl */
  & :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    margin-top: 0;
    margin-bottom: 0.8571429em;
    line-height: 1;
  }
  
  /* prose-h2:text-2xl */
  & :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    margin-top: 1.5555556em;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
  }
  
  & :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 1.5em;
    margin-top: 1.6em;
    margin-bottom: 0.6666667em;
    line-height: 1.3333333;
  }
  
  & :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    line-height: 1.6;
  }
  
  /* prose-headings:font-medium */
  & :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  
  & :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1em;
    margin-bottom: 1em;
  }
  
  & :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1em;
    margin-bottom: 1em;
    border-width: var(--border-width, 1px);
    border-style: var(--border-style, solid);
    border-color: var(--text-gray-400, #9ca3af);
  }

  & :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }
  
  & :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  & :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  & :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }
  
  & :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.9em;
    /* margin-top: 0.8em; */
    color: var(--text-gray-600);
  }

  & :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 3em;
    margin-bottom: 3em;
    border-width: 0;
    border-top-width: 1px;
    border-style: solid;
    border-color: var(--text-gray-300, #d1d5db);
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }  
  
  & :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.9em;
    border-radius: 0.3125rem;
    padding-top: 0.25em;
    padding-inline-end: 0.4em;
    padding-bottom: 0.25em;
    padding-inline-start: 0.4em;
  }
  
  & :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.875rem !important;
    white-space: pre-wrap;       /* Allow wrapping */
    word-wrap: break-word;       /* Break long words if needed */
  }
  
  & :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.8611111em;
  }
  
  & :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.9em;
  }
  
  & :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.875rem !important;
    line-height: 1.7777778;
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 0.5rem;
    padding-top: 1.1111111em;
    padding-inline-end: 1.3333333em;
    padding-bottom: 1.1111111em;
    padding-inline-start: 1.3333333em;
  }
  
  /* prose-ol:list-decimal */
  & :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    list-style-type: decimal;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    padding-inline-start: 1.6em;
  }
  
  & :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    padding-inline-start: 1.6em;
  }
  
  & :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0.6em;
    margin-bottom: 0.6em;
  }
  
  & :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-inline-start: 0.4em;
  }
  
  & :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-inline-start: 0.4em;
  }

  & :where(a):not(:where([class~="not-prose"],
                          [class~="not-prose"] *,
                          h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
                          nav *, header *)) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(249, 115, 22, 0.3); /* orange-500/30 */
    text-underline-offset: 4px;
    transition-property: color;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
  }
  
  & :where(a:hover):not(:where([class~="not-prose"],
                               [class~="not-prose"] *,
                               h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
                               nav *, header *)) {
    color: rgb(234, 88, 12); /* hover:text-orange-600 */
  }

  @media (max-width: 639px) {
    & :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.75rem !important;
    }
    
    & :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      /* font-size: 0.75rem !important; */
      padding-top: 0.8em;
      padding-inline-end: 1em;
      padding-bottom: 0.8em;
      padding-inline-start: 1em;
    }
  }
}