/* ==========================================================================
   SINGLE PAGE STYLES - BEM Convention with Tailwind @apply
   ========================================================================== */

/* ==========================================================================
   SINGLE PAGE HERO SECTION
   ========================================================================== */

.single-page__hero {

    position: relative;

    min-height: 312px
}

.single-page__hero-bg {

    position: absolute;

    left: 0px;

    top: 0px;

    bottom: 0px;

    height: 100%;

    width: 100%
}

.single-page__hero-bg-image {

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

.single-page__hero-container {

    width: 100%
}

@media (min-width: 1200px) {

    .single-page__hero-container {

        max-width: 1200px
    }
}

.single-page__hero-container {

    position: relative;

    z-index: 10;

    margin-left: auto;

    margin-right: auto;

    padding-bottom: 40px;

    padding-top: 104px
}

@media (min-width: 768px) {

    .single-page__hero-container {

        padding-top: 128px
    }
}

.single-page__hero-wrapper {

    margin-left: auto;

    margin-right: auto;

    width: calc(100% - var(--horizontal-edge-space));

    max-width: 943px
}

.single-page__hero-content {

    display: flex;

    flex-direction: column;

    justify-content: space-between
}

.single-page__hero-text {

    width: 100%
}

/* ==========================================================================
   SINGLE PAGE BREADCRUMB
   ========================================================================== */

.single-page__breadcrumb {

    display: flex;

    align-items: center;

    gap: 0.5rem
}

.single-page__breadcrumb-item {

    font-family: Fragment Mono, monospace;

    font-size: 12px;

    text-transform: uppercase;

    line-height: 130%;

    letter-spacing: 0.12em
}

.single-page__breadcrumb-item--text {

    --tw-text-opacity: 1;

    color: rgb(85 85 85 / var(--tw-text-opacity, 1))
}

.single-page__breadcrumb-separator {

    font-size: 16px;

    color: #0000003D
}

/* ==========================================================================
   SINGLE PAGE TITLE
   ========================================================================== */

.single-page__title {

    margin-top: 1rem;

    font-family: Tiempos Fine, serif;

    font-size: 36px;

    font-weight: 300;

    line-height: 115%;

    letter-spacing: -0.02em
}

@media (min-width: 768px) {

    .single-page__title {

        font-size: 44px
    }
}

/* ==========================================================================
   SINGLE PAGE CONTENT SECTION
   ========================================================================== */

.single-page__content {

    width: 100%
}

@media (min-width: 1200px) {

    .single-page__content {

        max-width: 1200px
    }
}

.single-page__content {

    margin-left: auto;

    margin-right: auto;

    padding-bottom: 80px
}

@media (min-width: 768px) {

    .single-page__content {

        padding-bottom: 120px
    }
}

.single-page__content-wrapper {

    margin-left: auto;

    margin-right: auto;

    width: calc(100% - var(--horizontal-edge-space));

    max-width: 943px;

    padding-top: 40px
}

@media (min-width: 768px) {

    .single-page__content-wrapper {

        padding-top: 60px
    }
}

.single-page__main {

    width: 100%
}

.single-page__featured-image {

    margin-bottom: 1.5rem;

    aspect-ratio: 943/500;

    width: 100%;

    overflow: hidden;

    border-radius: 16px
}

.single-page__featured-image-img {

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

.single-page__main p {

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

    font-size: 16px;

    line-height: 150%;

    color: #00000099
}

@media (min-width: 768px) {

    .single-page__main p {

        font-size: 19px
    }
}

.single-page__main ol,
.single-page__main ul {

    margin-left: 34px
}

.single-page__main ol > :not([hidden]) ~ :not([hidden]),
.single-page__main ul > :not([hidden]) ~ :not([hidden]) {

    --tw-space-y-reverse: 0;

    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse))
}

.single-page__main ol,
.single-page__main ul {

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

    font-size: 16px;

    line-height: 140%;

    color: #00000099
}

@media (min-width: 768px) {

    .single-page__main ol,
.single-page__main ul {

        font-size: 19px
    }
}

.single-page__main ol {

    list-style-type: decimal
}

.single-page__main ul {

    list-style-type: disc
}

.single-page__main a {

    --tw-text-opacity: 1;

    color: rgb(255 56 92 / var(--tw-text-opacity, 1))
}

.single-page__main h2,
.single-page__main h3,
.single-page__main h4,
.single-page__main h5,
.single-page__main h6 {

    padding-top: 1rem;

    font-family: Tiempos Fine, serif;

    font-weight: 300;

    line-height: 150%;

    --tw-text-opacity: 1;

    color: rgb(136 45 23 / var(--tw-text-opacity, 1))
}

.single-page__main h2 {

    font-size: 32px
}

.single-page__main h3 {

    font-size: 24px
}

.single-page__main h4 {

    font-size: 20px
}

.single-page__main h5 {

    font-size: 18px
}

.single-page__main h6 {

    font-size: 16px
}

.single-page__main blockquote p {

    position: relative;

    padding-top: 1.5rem;

    padding-bottom: 1.5rem;

    padding-left: 36px;

    font-family: Tiempos Fine, serif;

    font-size: 24px
}

@media (min-width: 768px) {

    .single-page__main blockquote p {

        font-size: 28px
    }
}

.single-page__main blockquote p::before {

    position: absolute;

    left: 0px;

    top: 0px;

    margin-right: 0.5rem;

    padding-top: 1.5rem;

    padding-bottom: 1.5rem;

    font-family: Tiempos Fine, serif;

    font-size: 62px;

    line-height: 100%;

    --tw-text-opacity: 1;

    color: rgb(136 45 23 / var(--tw-text-opacity, 1));

    --tw-content: open-quote;

    content: var(--tw-content)
}

@media (min-width: 768px) {

    .single-page__main blockquote p::before {

        font-size: 72px
    }
}

.single-page__main figure img {

    aspect-ratio: 943/500;

    width: 100%;

    overflow: hidden;

    border-radius: 16px;

    -o-object-fit: cover;

       object-fit: cover
}

.single-page__main figure figcaption {

    margin-top: 0.625rem;

    font-size: 14px;

    line-height: 150%;

    --tw-text-opacity: 1;

    color: rgb(85 85 85 / var(--tw-text-opacity, 1))
}