/* =========================================================
   Dizzt's Shoal
   blog.css

   Blog page, floating post cards, Markdown pages,
   and hidden page styling.

   Load this file AFTER responsive.css.
   ========================================================= */


/* =========================================================
   1. Blog page foundation
   ========================================================= */

.blog-main,
.post-main,
.secret-main {
    position: relative;
    min-height: 70vh;
}


.blog-page .site-main {
    overflow: hidden;
}


.blog-site-background {
    opacity: 1;
}


/* Make decorations visible against the darker sky */

.blog-page .cloud {
    opacity: 0.48;
}


.blog-page .seagull {
    opacity: 0.88;
}


/* =========================================================
   2. Blog Hero
   ========================================================= */

.blog-hero {
    position: relative;

    padding:
        3.2rem 0
        2.8rem;
}


.blog-hero-inner {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(250px, 0.8fr);

    align-items: center;

    gap:
        clamp(
            1.5rem,
            5vw,
            4rem
        );

    min-height:
        380px;
}


/* =========================================================
   3. Hero Copy
   ========================================================= */

.blog-hero-copy {
    position: relative;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-width: 0;
}


/* =========================================================
   Blog eyebrow / Shore Log capsule

   Keep the label readable on the blue sky and force it onto
   its own row above the title.
   ========================================================= */

.blog-eyebrow,
.blog-hero .section-eyebrow {
    display: flex;

    align-items: center;

    width: fit-content;

    margin:
        0 0
        0.85rem;

    padding:
        0.32rem
        0.82rem;

    color:
        #214C69 !important;

    background:
        rgba(
            255,
            235,
            204,
            0.94
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.88
        );

    border-radius:
        999px;

    box-shadow:
        0 4px 10px
        rgba(
            35,
            75,
            100,
            0.10
        );

    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.72rem;

    font-weight:
        700;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;

    letter-spacing:
        0.13em;

    line-height:
        1.25;

    text-transform:
        uppercase;

    text-shadow:
        none !important;

    opacity:
        1;
}


.blog-eyebrow::before,
.blog-hero .section-eyebrow::before {
    content:
        "·";

    margin-right:
        0.45rem;

    color:
        #ACCFA3 !important;
}


.blog-eyebrow::after,
.blog-hero .section-eyebrow::after {
    content:
        "·";

    margin-left:
        0.45rem;

    color:
        #8CC0EB !important;
}


/* =========================================================
   4. Blog Hero Title
   ========================================================= */

.blog-page-title {
    display: block;

    width: fit-content;

    margin:
        0 0
        1rem;

    overflow: visible;

    font-family:
        var(--font-title);

    font-size:
        clamp(
            4rem,
            9vw,
            7rem
        );

    font-weight: 400;

    line-height: 0.95;
}


/*
   The gradient is applied to a child span instead of the h1.

   paint-order: stroke fill makes the black stroke paint
   BEHIND the gradient rather than covering parts of it.
*/

.blog-page-title > span {
    position: relative;

    display: inline-block;

    color:
        #8CC0EB;

    background-image:
        linear-gradient(
            105deg,
            #8CC0EB 0%,
            #BFDDF0 32%,
            #DCE7DC 65%,
            #FFEBCC 100%
        );

    background-repeat:
        no-repeat;

    background-size:
        100% 100%;

    background-position:
        center;

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        transparent;

    -webkit-text-fill-color:
        transparent;

    -webkit-text-stroke:
        2px
        rgba(
            18,
            20,
            22,
            0.94
        );

    paint-order:
        stroke fill;

    text-shadow:
        none !important;

    filter:
        drop-shadow(
            0 4px 5px
            rgba(
                20,
                45,
                60,
                0.17
            )
        );
}


.blog-page-description {
    max-width:
        680px;

    margin:
        0;

    color:
        #3D5868;

    font-weight:
        500;

    font-size:
        clamp(
            1.15rem,
            2vw,
            1.35rem
        );

    line-height: 1.7;
}


/* =========================================================
   5. Hero Illustration
   ========================================================= */

.blog-hero-art {
    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    min-height:
        340px;

    pointer-events: none;
}


.blog-character-glow {
    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            90%,
            330px
        );

    aspect-ratio:
        1 / 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(191, 221, 240, 0.34) 44%,
            rgba(140, 192, 235, 0.08) 68%,
            transparent 75%
        );

    filter:
        blur(4px);

    animation:
        blogGlowPulse
        6s
        ease-in-out
        infinite;
}


.blog-character {
    position: relative;

    z-index: 3;

    width:
        min(
            100%,
            300px
        );

    max-height:
        340px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 12px
            rgba(55, 94, 118, 0.16)
        );

    animation:
        blogCharacterFloat
        7s
        ease-in-out
        infinite;
}


.blog-hero-shell,
.blog-hero-starfish {
    position: absolute;

    z-index: 4;

    filter:
        drop-shadow(
            0 5px 5px
            rgba(70, 95, 105, 0.13)
        );
}


.blog-hero-shell {
    left: 0;
    bottom: 7%;

    width:
        clamp(
            45px,
            6vw,
            72px
        );

    animation:
        blogShellFloat
        6s
        ease-in-out
        infinite;
}


.blog-hero-starfish {
    right: 2%;
    bottom: 14%;

    width:
        clamp(
            48px,
            6vw,
            76px
        );

    animation:
        blogStarFloat
        7.5s
        ease-in-out
        infinite;
}


/* =========================================================
   6. Blog Hero Animations
   ========================================================= */

@keyframes blogCharacterFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(0.35deg);
    }

}


@keyframes blogGlowPulse {

    0%,
    100% {
        opacity: 0.72;

        transform:
            translate(-50%, -50%)
            scale(0.98);
    }

    50% {
        opacity: 0.95;

        transform:
            translate(-50%, -50%)
            scale(1.045);
    }

}


@keyframes blogShellFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-7deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(1deg);
    }

}


@keyframes blogStarFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(7deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(-2deg);
    }

}


/* =========================================================
   7. Small Wave Strip
   ========================================================= */

.blog-wave-strip {
    position: relative;

    width: 100%;

    height:
        clamp(
            75px,
            9vw,
            125px
        );

    overflow: hidden;

    pointer-events: none;
}


.blog-wave {
    position: absolute;

    left: -8%;

    width: 116%;

    height: 100%;

    transform-origin:
        center bottom;
}


.blog-wave-back {
    bottom: -15%;

    background:
        rgba(
            191,
            221,
            240,
            0.6
        );

    clip-path:
        polygon(
            0 55%,
            8% 42%,
            17% 53%,
            26% 39%,
            35% 50%,
            45% 38%,
            55% 51%,
            64% 40%,
            74% 52%,
            84% 39%,
            93% 50%,
            100% 43%,
            100% 100%,
            0 100%
        );

    animation:
        blogWaveBack
        18s
        ease-in-out
        infinite alternate;
}


.blog-wave-front {
    bottom: -30%;

    background:
        rgba(
            140,
            192,
            235,
            0.64
        );

    clip-path:
        polygon(
            0 49%,
            9% 38%,
            18% 50%,
            28% 39%,
            38% 53%,
            48% 40%,
            58% 50%,
            68% 37%,
            78% 49%,
            88% 40%,
            100% 50%,
            100% 100%,
            0 100%
        );

    box-shadow:
        inset 0 6px 0
        rgba(255, 255, 255, 0.25);

    animation:
        blogWaveFront
        12s
        ease-in-out
        infinite alternate;
}


@keyframes blogWaveBack {

    from {
        transform:
            translateX(-2%);
    }

    to {
        transform:
            translateX(3%)
            translateY(-3px);
    }

}


@keyframes blogWaveFront {

    from {
        transform:
            translateX(2%);
    }

    to {
        transform:
            translateX(-3%)
            translateY(-5px);
    }

}


/* =========================================================
   8. Blog List Section
   ========================================================= */

.blog-list-section {
    position: relative;

    padding:
        2.5rem 0
        6rem;

    background:
        linear-gradient(
            180deg,
            rgba(191, 221, 240, 0.28),
            rgba(234, 246, 252, 0.08)
        );
}


.blog-post-list,
.secret-file-list {
    display: flex;

    flex-direction: column;

    gap:
        1.6rem;

    width: 100%;
}


/* =========================================================
   9. Floating Post Cards
   ========================================================= */

.blog-list-card,
.secret-file-card {
    position: relative;

    width: 100%;

    padding:
        1.8rem
        2rem;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(255, 255, 255, 0.79)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.9);

    border-radius:
        32px;

    box-shadow:
        0 14px 32px
        rgba(54, 112, 150, 0.13),

        0 4px 9px
        rgba(54, 112, 150, 0.07),

        inset 0 1px 0
        rgba(255, 255, 255, 0.9);

    backdrop-filter:
        blur(13px);

    -webkit-backdrop-filter:
        blur(13px);

    animation:
        blogCardFloat
        7s
        ease-in-out
        infinite;

    transition:
        box-shadow
        var(--transition-base);
}


.blog-list-card:nth-child(2n),
.secret-file-card:nth-child(2n) {
    animation-delay:
        -2.3s;
}


.blog-list-card:nth-child(3n),
.secret-file-card:nth-child(3n) {
    animation-delay:
        -4.6s;
}


.blog-list-card::before,
.secret-file-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 7%;

    width: 48%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.95),
            transparent
        );

    border-radius:
        var(--radius-pill);

    pointer-events: none;
}


.blog-list-card::after,
.secret-file-card::after {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;
    bottom: -10px;

    z-index: -1;

    height: 20px;

    background:
        rgba(
            140,
            192,
            235,
            0.17
        );

    border-radius: 50%;

    filter:
        blur(12px);

    pointer-events: none;
}


@keyframes blogCardFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-0.07deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(0.07deg);
    }

}


.blog-list-card:hover,
.secret-file-card:hover {
    box-shadow:
        0 22px 42px
        rgba(54, 112, 150, 0.18),

        0 7px 15px
        rgba(54, 112, 150, 0.09),

        inset 0 1px 0
        rgba(255, 255, 255, 0.98);
}


/* =========================================================
   10. Blog Card Metadata
   ========================================================= */

.blog-list-meta,
.post-date {
    color:
        #426C86;

    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.7rem;

    font-weight:
        500;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;

    letter-spacing:
        0.045em;
}


.blog-list-meta {
    margin-bottom:
        0.5rem;
}


/* =========================================================
   11. Blog Post Titles
   ========================================================= */

.blog-list-title {
    margin:
        0.35rem 0
        0.65rem;

    font-size:
        clamp(
            1.9rem,
            4vw,
            2.7rem
        );

    line-height: 1.15;
}


.blog-list-title a {
    display: inline-block;

    color: #BFDDF0;

    background-image:
        linear-gradient(
            105deg,
            #8CC0EB 0%,
            #BFDDF0 30%,
            #D9E5DE 58%,
            #FFEBCC 100%
        );

    background-repeat: no-repeat;

    background-size:
        100% 100%;

    background-position:
        center;

    background-clip:
        text;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    -webkit-text-stroke:
        1.5px
        rgba(
            18,
            20,
            22,
            0.95
        );

    paint-order:
        stroke fill;

    text-decoration: none;

    filter:
        drop-shadow(
            0 3px 3px
            rgba(0, 0, 0, 0.12)
        );

    transition:
        transform
        var(--transition-fast),

        filter
        var(--transition-fast);
}


.blog-list-title a:hover {
    transform:
        translateY(-1px);

    filter:
        drop-shadow(
            0 5px 6px
            rgba(0, 0, 0, 0.18)
        );
}


/* =========================================================
   12. Summary
   ========================================================= */

.blog-list-summary,
.post-summary {
    color:
        var(--color-text-soft);
}


.blog-list-summary {
    max-width:
        850px;

    margin:
        0 0
        1rem;

    font-size:
        1.12rem;

    line-height: 1.65;
}


/* =========================================================
   13. Tags
   ========================================================= */

.blog-tags,
.post-tags {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
        0.5rem;

    margin:
        0.9rem 0
        1.15rem;
}


.blog-tag {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0.28rem
        0.7rem;

    background:
        rgba(
            191,
            221,
            240,
            0.58
        );

    border:
        1px solid
        rgba(
            140,
            192,
            235,
            0.38
        );

    border-radius:
        var(--radius-pill);

    color:
        #416D88;

    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.62rem;

    font-weight:
        500;

    font-style: normal;

    font-variation-settings:
        "MONO" 1;

    white-space: nowrap;
}


.blog-tag:nth-child(even) {
    background:
        rgba(
            172,
            207,
            163,
            0.48
        );

    border-color:
        rgba(
            172,
            207,
            163,
            0.68
        );

    color:
        #51764D;
}


/* =========================================================
   14. Read Note Button
   ========================================================= */

.blog-list-card .button-small {
    margin-top:
        0.1rem;

    background:
        linear-gradient(
            135deg,
            rgba(140, 192, 235, 0.72),
            rgba(191, 221, 240, 0.86)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.76);

    box-shadow:
        0 4px 0
        rgba(80, 145, 185, 0.2);
}


/* =========================================================
   15. Status
   ========================================================= */

.blog-status {
    min-height:
        1.4em;

    margin-bottom:
        1rem;

    color:
        var(--color-text-soft);

    text-align: center;
}


.blog-status:empty {
    display: none;
}


/* =========================================================
   16. Bottom Ocean
   ========================================================= */

.blog-ocean-transition {
    margin-top:
        -1px;
}


/* =========================================================
   17. Blog Shore
   ========================================================= */

.blog-shore {
    position: relative;

    min-height:
        230px;

    padding:
        2rem 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #FFF0DA 0%,
            #FFEBCC 60%,
            #F4D9B1 100%
        );

    border-top:
        4px solid
        rgba(255, 255, 255, 0.4);
}


.blog-shore::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            circle,
            rgba(160, 125, 84, 0.1) 1px,
            transparent 1.5px
        );

    background-size:
        27px 27px;

    opacity: 0.3;

    pointer-events: none;
}


.blog-shore-inner {
    position: relative;

    min-height:
        175px;
}


.blog-shore-message {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 2;

    width:
        min(
            90%,
            520px
        );

    margin: 0;

    transform:
        translate(-50%, -50%);

    color:
        rgba(57, 65, 68, 0.62);

    font-size:
        1.08rem;

    text-align: center;
}


.blog-shore-shell,
.blog-shore-dolphin,
.blog-shore-starfish,
.blog-shore-crab {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 6px 5px
            rgba(105, 87, 65, 0.13)
        );

    pointer-events: none;
}


.blog-shore-shell {
    left: 5%;
    top: 20%;

    width:
        clamp(
            50px,
            6vw,
            80px
        );

    animation:
        blogShellFloat
        7s
        ease-in-out
        infinite;
}


.blog-shore-dolphin {
    left: 25%;
    bottom: 4%;

    width:
        clamp(
            85px,
            10vw,
            145px
        );

    opacity: 0.86;

    animation:
        blogDolphinFloat
        8s
        ease-in-out
        infinite;
}


.blog-shore-starfish {
    right: 21%;
    top: 18%;

    width:
        clamp(
            48px,
            6vw,
            76px
        );

    animation:
        blogStarFloat
        8s
        ease-in-out
        infinite;
}


.blog-shore-crab {
    right: 5%;
    bottom: 5%;

    width:
        clamp(
            60px,
            7vw,
            96px
        );

    animation:
        blogCrabWalk
        14s
        ease-in-out
        infinite;
}


@keyframes blogDolphinFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(2deg);
    }

}


@keyframes blogCrabWalk {

    0%,
    100% {
        transform:
            translateX(0)
            rotate(-1deg);
    }

    30% {
        transform:
            translateX(-8px)
            rotate(1deg);
    }

    65% {
        transform:
            translateX(6px)
            rotate(-1deg);
    }

}


/* =========================================================
   18. Post Page
   ========================================================= */

.post-main {
    padding:
        3rem 0
        6rem;
}


.post-back-link {
    display: inline-block;

    margin-bottom:
        1rem;

    color:
        var(--color-blue-dark);

    font-weight: 700;
}


.markdown-card {
    width:
        min(
            100%,
            900px
        );

    margin:
        0 auto;

    padding:
        clamp(
            1.5rem,
            4vw,
            3rem
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.82);

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(255, 255, 255, 0.84)
        );

    box-shadow:
        var(--shadow-card);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.post-header {
    margin-bottom:
        2rem;

    padding-bottom:
        1.5rem;

    border-bottom:
        2px solid
        rgba(140, 192, 235, 0.2);
}


/* Full post page title */

.post-page-title {
    display: inline-block;

    margin:
        0.4rem 0
        0.8rem;

    font-size:
        clamp(
            2.3rem,
            6vw,
            4.2rem
        );

    line-height: 1.1;

    color:
        #BFDDF0;

    background:
        linear-gradient(
            105deg,
            #8CC0EB 0%,
            #BFDDF0 30%,
            #D9E5DE 58%,
            #FFEBCC 100%
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    -webkit-text-stroke:
        1.6px
        rgba(18, 20, 22, 0.95);

    paint-order:
        stroke fill;

    filter:
        drop-shadow(
            0 4px 5px
            rgba(0, 0, 0, 0.13)
        );
}


/* =========================================================
   19. Markdown Content
   ========================================================= */

.markdown-content {
    overflow-wrap: anywhere;

    color:
        var(--color-text);

    font-size:
        1.12rem;

    line-height: 1.8;
}


.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    scroll-margin-top:
        2rem;
}


.markdown-content h1 {
    margin-top:
        2rem;

    font-size:
        clamp(
            2rem,
            5vw,
            3rem
        );
}


.markdown-content h2 {
    margin-top:
        2.2rem;

    padding-bottom:
        0.3rem;

    border-bottom:
        2px solid
        rgba(172, 207, 163, 0.25);
}


.markdown-content h3 {
    margin-top:
        1.8rem;
}


.markdown-content p {
    margin-bottom:
        1.2rem;
}


.markdown-content a {
    color:
        var(--color-blue-dark);

    text-decoration:
        underline;

    text-decoration-color:
        rgba(140, 192, 235, 0.65);

    text-underline-offset:
        3px;
}


.markdown-content img {
    max-width: 64%;

    margin:
        1.5rem auto;

    box-shadow:
        0 9px 24px
        rgba(54, 112, 150, 0.12);
}


.markdown-content pre {
    margin:
        1.4rem 0;
}


.markdown-content blockquote {
    background:
        rgba(191, 221, 240, 0.16);
}


.markdown-content table {
    display: block;

    width: 100%;

    overflow-x: auto;

    margin:
        1.4rem 0;
}


.markdown-content th,
.markdown-content td {
    padding:
        0.65rem
        0.8rem;

    border:
        1px solid
        rgba(140, 192, 235, 0.25);
}


/* =========================================================
   20. Hidden Page
   ========================================================= */

.secret-page {
    background:
        linear-gradient(
            180deg,
            #24577F 0%,
            #8CC0EB 38%,
            #BFDDF0 68%,
            #FFEBCC 100%
        );

    background-attachment:
        fixed;
}


.secret-main {
    padding:
        4rem 0
        7rem;
}


.secret-header {
    margin-bottom:
        2rem;

    text-align: center;
}


.secret-reader[hidden],
.secret-file-list[hidden] {
    display: none;
}


/* =========================================================
   21. Tablet
   ========================================================= */

@media (max-width: 900px) {

    .blog-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            230px;

        min-height:
            330px;

        gap:
            1.5rem;
    }


    .blog-character {
        width:
            min(
                100%,
                245px
            );
    }

}


/* =========================================================
   22. Mobile
   ========================================================= */

@media (max-width: 767px) {

    .blog-hero {
        padding:
            2.2rem 0
            1.5rem;
    }


    .blog-hero-inner {
        display: flex;

        flex-direction: column;

        min-height: 0;

        text-align: center;
    }


    .blog-hero-copy {
        order: 1;

        align-items: center;

        width: 100%;

        text-align: center;
    }


    .blog-page-title {
        font-size:
            clamp(
                3.6rem,
                18vw,
                5.2rem
            );
    }


    .blog-page-title > span {
        -webkit-text-stroke:
            1.5px
            rgba(20, 22, 24, 0.94);
    }


    .blog-page-description {
        margin-inline:
            auto;

        text-align:
            center;
    }


    .blog-eyebrow,
    .blog-hero .section-eyebrow {
        margin:
            0 auto
            0.8rem;
    }


    .blog-hero-art {
        order: 2;

        min-height:
            260px;

        width:
            min(
                100%,
                330px
            );

        margin-inline:
            auto;
    }


    .blog-character {
        width:
            min(
                100%,
                235px
            );

        max-height:
            270px;
    }


    .blog-hero-shell {
        left: 4%;
    }


    .blog-hero-starfish {
        right: 4%;
    }


    .blog-wave-strip {
        height:
            75px;
    }


    .blog-list-section {
        padding:
            1.5rem 0
            4rem;
    }


    .blog-post-list,
    .secret-file-list {
        gap:
            1.2rem;
    }


    .blog-list-card,
    .secret-file-card {
        padding:
            1.35rem
            1.4rem;

        border-radius:
            25px;

        animation-duration:
            8.5s;
    }


    .blog-list-title {
        font-size:
            clamp(
                1.65rem,
                8vw,
                2.15rem
            );
    }


    .blog-list-title a {
        -webkit-text-stroke:
            1.15px
            rgba(18, 20, 22, 0.95);
    }


    .blog-list-summary {
        font-size:
            1.05rem;
    }


    .blog-shore {
        min-height:
            210px;
    }


    .blog-shore-dolphin {
        display: none;
    }


    .blog-shore-message {
        width:
            70%;
    }


    .markdown-card {
        padding:
            1.35rem;

        border-radius:
            var(--radius-lg);
    }


    .post-page-title {
        -webkit-text-stroke:
            1.25px
            rgba(18, 20, 22, 0.95);
    }


    .markdown-content {
        font-size:
            1.04rem;
    }

}


/* =========================================================
   23. Small Mobile
   ========================================================= */

@media (max-width: 480px) {

    .blog-shore-shell {
        left: 1%;
    }


    .blog-shore-starfish {
        right: 1%;
        top: 12%;
    }


    .blog-shore-crab {
        right: 2%;
    }


    .blog-shore-message {
        width:
            62%;

        font-size:
            0.98rem;
    }

}


/* =========================================================
   24. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .blog-list-card,
    .secret-file-card,
    .blog-character,
    .blog-character-glow,
    .blog-hero-shell,
    .blog-hero-starfish,
    .blog-wave-back,
    .blog-wave-front,
    .blog-shore-shell,
    .blog-shore-dolphin,
    .blog-shore-starfish,
    .blog-shore-crab {
        animation:
            none !important;

        transform:
            none !important;
    }

}


/* =========================================================
   Final Blog Hero Compatibility Fix
   ========================================================= */

/*
   Keep the label/title/description vertical even if generic
   .section-eyebrow or .gradient-title rules are changed later.
*/

.blog-hero-copy > .blog-eyebrow,
.blog-hero-copy > .section-eyebrow,
.blog-hero-copy > .blog-page-title,
.blog-hero-copy > .blog-page-description {
    flex-shrink: 0;
}


/* =========================================================
   25. Gradient Fallback
   ========================================================= */

@supports not (
    (background-clip: text)
    or
    (-webkit-background-clip: text)
) {

    .blog-page-title > span,
    .blog-list-title a,
    .post-page-title {
        background:
            none;

        color:
            #8CC0EB;

        -webkit-text-fill-color:
            currentColor;
    }


}