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

   Layout responsibilities:
   - Header structure
   - Navigation placement
   - Main page spacing
   - Hero layout
   - Profile / clock grid
   - Projects grid
   - Notes layout
   - Discord / Steam layout
   - Shore / beach layout
   - Footer structure

   Visual styling should mainly live in:
   - style.css
   - components.css
   ========================================================= */


/* =========================================================
   1. Page Structure
   ========================================================= */

body {
    position: relative;
}

.site-main {
    position: relative;

    z-index: var(--z-content);

    width: 100%;

    overflow: hidden;
}


/* =========================================================
   2. Global Section Spacing
   ========================================================= */

.hero-section,
.intro-section,
.projects-section,
.notes-section,
.social-section,
.shore-section {
    position: relative;

    width: 100%;
}


/* Standard vertical spacing */

.intro-section,
.projects-section,
.notes-section,
.social-section {
    padding:
        var(--space-11) 0;
}


/* =========================================================
   3. Decorative Background Layer
   ========================================================= */

.site-background {
    position: fixed;

    inset: 0;

    z-index: var(--z-background);

    overflow: hidden;

    pointer-events: none;
}


.sky-background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* =========================================================
   4. Header
   ========================================================= */

.site-header {
    position: relative;

    z-index: var(--z-header);

    width: 100%;

    padding:
        var(--space-6) 0
        var(--space-4);
}


.header-inner {
    width:
        min(
            calc(100% - (var(--content-padding) * 2)),
            var(--content-width)
        );

    margin-inline:
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}


/* =========================================================
   5. Header Logo Area
   ========================================================= */

.site-logo {
    display:
        inline-block;

    margin-bottom:
        var(--space-1);
}


.site-tagline {
    margin:
        0 0 var(--space-5);

    max-width:
        650px;

    text-align:
        center;
}


/* =========================================================
   6. Main Navigation Layout
   ========================================================= */

.main-navigation {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--space-3);

    width:
        100%;
}


.nav-link {
    flex:
        0 0 auto;
}


/* =========================================================
   7. Hero Section
   ========================================================= */

.hero-section {
    padding:
        var(--space-8) 0
        var(--space-11);
}


.hero-container {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, 0.92fr);

    align-items:
        center;

    gap:
        clamp(
            2rem,
            5vw,
            5rem
        );

    min-height:
        600px;
}


/* =========================================================
   8. Hero Text Layout
   ========================================================= */

.hero-content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    max-width:
        680px;
}


.hero-eyebrow {
    margin-bottom:
        var(--space-1);
}


.hero-title {
    margin-bottom:
        var(--space-5);
}


.hero-description {
    max-width:
        620px;

    margin-bottom:
        var(--space-6);
}


.hero-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--space-4);

    margin-bottom:
        var(--space-5);
}


.site-history-short {
    margin:
        0;

    max-width:
        100%;
}


/* =========================================================
   9. Hero Character Area
   ========================================================= */

.hero-character-area {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    width:
        100%;

    min-height:
        500px;
}


.hero-character {
    position:
        relative;

    z-index:
        3;

    width:
        min(
            100%,
            470px
        );

    max-height:
        520px;

    object-fit:
        contain;

    object-position:
        center bottom;
}


.hero-character-glow {
    position:
        absolute;

    z-index:
        1;

    top:
        48%;

    left:
        50%;

    width:
        min(
            90%,
            440px
        );

    aspect-ratio:
        1 / 1;

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


.hero-shell {
    position:
        absolute;

    z-index:
        4;

    left:
        4%;

    bottom:
        6%;

    width:
        clamp(
            40px,
            5vw,
            70px
        );
}


.hero-starfish {
    position:
        absolute;

    z-index:
        4;

    right:
        2%;

    bottom:
        12%;

    width:
        clamp(
            45px,
            6vw,
            82px
        );
}


/* =========================================================
   10. Intro Section
   ========================================================= */

.intro-section {
    z-index:
        2;
}


.intro-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(300px, 0.5fr);

    align-items:
        stretch;

    gap:
        var(--space-7);

    margin-top:
        var(--space-7);
}


/* =========================================================
   11. Profile Card Layout
   ========================================================= */

.profile-card {
    display:
        grid;

    grid-template-columns:
        minmax(140px, 190px)
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        var(--space-7);

    padding:
        var(--space-7);
}


.profile-image-wrapper {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;
}


.profile-image {
    width:
        min(
            100%,
            180px
        );

    aspect-ratio:
        1 / 1;

    object-fit:
        contain;
}


.profile-content {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    min-width:
        0;
}


.profile-content p:last-of-type {
    margin-bottom:
        var(--space-5);
}


/* =========================================================
   12. Shore Clock Layout
   ========================================================= */

.shore-clock-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        100%;

    padding:
        var(--space-7);

    text-align:
        center;
}


.clock-sign {
    position:
        relative;

    z-index:
        2;

    width:
        100%;
}


.clock-decoration {
    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;
}


.clock-shell {
    position:
        absolute;

    left:
        8%;

    bottom:
        8%;

    width:
        48px;
}


.clock-crab {
    position:
        absolute;

    right:
        7%;

    bottom:
        6%;

    width:
        55px;
}


/* =========================================================
   13. Section Heading Layout
   ========================================================= */

.section-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        var(--space-7);

    margin-bottom:
        var(--space-7);
}


.section-heading > div {
    min-width:
        0;
}


.section-link {
    flex:
        0 0 auto;

    margin-bottom:
        var(--space-1);
}


/* =========================================================
   14. Featured Projects Grid
   ========================================================= */

.project-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    align-items:
        stretch;

    gap:
        var(--space-6);
}


/* =========================================================
   15. Project Card Internal Layout
   ========================================================= */

.project-card {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    overflow:
        hidden;
}


.project-image-wrapper {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;
}


.project-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.project-placeholder {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.project-placeholder-decoration {
    width:
        min(
            42%,
            140px
        );

    object-fit:
        contain;
}


.project-content {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    flex:
        1;

    padding:
        var(--space-6);
}


.project-tags {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--space-2);

    margin-bottom:
        var(--space-3);
}


.project-title {
    margin-bottom:
        var(--space-3);
}


.project-description {
    flex:
        1;

    margin-bottom:
        var(--space-5);
}


/* =========================================================
   16. Wave Divider Layout
   ========================================================= */

.wave-divider {
    position:
        relative;

    width:
        100%;

    height:
        clamp(
            70px,
            8vw,
            130px
        );

    overflow:
        hidden;

    pointer-events:
        none;
}


.wave-divider img {
    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        max(
            100%,
            1400px
        );

    max-width:
        none;

    height:
        100%;

    transform:
        translateX(-50%);

    object-fit:
        cover;

    object-position:
        center bottom;
}


/* =========================================================
   17. Notes Section
   ========================================================= */

.notes-section {
    position:
        relative;

    padding-top:
        var(--space-10);
}


.notes-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-4);
}


/* =========================================================
   18. Note Card Layout
   ========================================================= */

.note-card {
    display:
        grid;

    grid-template-columns:
        minmax(130px, 0.22fr)
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        var(--space-6);

    padding:
        var(--space-5)
        var(--space-6);
}


.note-date {
    align-self:
        start;

    margin-top:
        var(--space-1);
}


.note-content {
    min-width:
        0;
}


.note-title {
    margin-bottom:
        var(--space-2);
}


.note-excerpt {
    margin-bottom:
        0;
}


.note-link {
    align-self:
        center;

    white-space:
        nowrap;
}


/* =========================================================
   19. Social Section
   ========================================================= */

.social-section {
    padding-top:
        var(--space-9);

    padding-bottom:
        var(--space-11);
}


.social-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    align-items:
        stretch;

    gap:
        var(--space-6);
}


/* =========================================================
   20. Social Cards Layout
   ========================================================= */

.social-card {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(140px, 0.52fr);

    align-items:
        center;

    min-height:
        330px;

    overflow:
        hidden;
}


.social-card-content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        var(--space-7);
}


.social-card-content p {
    margin-bottom:
        var(--space-6);
}


.social-card-art {
    position:
        relative;

    align-self:
        stretch;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    min-width:
        0;

    overflow:
        hidden;
}


.social-card-art img {
    width:
        min(
            100%,
            250px
        );

    max-height:
        310px;

    object-fit:
        contain;

    object-position:
        center bottom;
}


/* =========================================================
   21. Ocean Transition
   ========================================================= */

.ocean-transition {
    position:
        relative;

    width:
        100%;

    height:
        clamp(
            140px,
            15vw,
            230px
        );

    overflow:
        hidden;

    pointer-events:
        none;
}


.ocean-wave {
    position:
        absolute;

    left:
        50%;

    width:
        140%;

    min-width:
        1500px;

    transform:
        translateX(-50%);

    transform-origin:
        center bottom;
}


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

    height:
        72%;
}


.ocean-wave-front {
    bottom:
        -3%;

    height:
        62%;
}


/* =========================================================
   22. Shore Section
   ========================================================= */

.shore-section {
    position:
        relative;

    min-height:
        760px;

    padding:
        var(--space-9) 0
        var(--space-10);
}


.shore-container {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    min-height:
        650px;
}


/* =========================================================
   23. Shore Decorations
   ========================================================= */

.shore-decorations {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;
}


.shore-decoration {
    position:
        absolute;
}


.shell-left {
    left:
        2%;

    top:
        25%;

    width:
        clamp(
            45px,
            6vw,
            82px
        );
}


.starfish-right {
    right:
        4%;

    top:
        17%;

    width:
        clamp(
            50px,
            7vw,
            90px
        );
}


.crab-left {
    left:
        9%;

    bottom:
        11%;

    width:
        clamp(
            55px,
            7vw,
            95px
        );
}


/* =========================================================
   24. Visitor Widget
   ========================================================= */

.visitor-widget {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        min(
            100%,
            420px
        );

    margin-bottom:
        var(--space-8);

    padding:
        var(--space-5);

    text-align:
        center;
}


.visitor-shell {
    width:
        52px;

    margin-bottom:
        var(--space-2);
}


.visitor-label {
    margin-bottom:
        var(--space-1);
}


.visitor-count {
    margin:
        0 0 var(--space-1);

    line-height:
        1;
}


.visitor-note {
    margin:
        0;
}


/* =========================================================
   25. Guestbook Layout
   ========================================================= */

.guestbook-card {
    position:
        relative;

    z-index:
        3;

    width:
        min(
            100%,
            720px
        );

    padding:
        var(--space-7);
}


.guestbook-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        var(--space-6);

    margin-bottom:
        var(--space-6);
}


.guestbook-header > div {
    min-width:
        0;
}


.guestbook-header p:last-child {
    margin-bottom:
        0;
}


.guestbook-starfish {
    flex:
        0 0 auto;

    width:
        clamp(
            52px,
            7vw,
            78px
        );
}


.guestbook-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-5);
}


.form-group {
    display:
        flex;

    flex-direction:
        column;
}


.guestbook-form-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-5);
}


.guestbook-status {
    flex:
        1;

    margin:
        0;
}


.guestbook-entries {
    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-4);

    margin-top:
        var(--space-7);
}


/* =========================================================
   26. Shore Character
   ========================================================= */

.shore-character-area {
    position:
        absolute;

    right:
        -2%;

    bottom:
        -2%;

    z-index:
        2;

    width:
        min(
            34vw,
            330px
        );

    pointer-events:
        none;
}


.shore-character {
    width:
        100%;

    max-height:
        360px;

    object-fit:
        contain;

    object-position:
        center bottom;
}


/* =========================================================
   27. Footer Layout
   ========================================================= */

.site-footer {
    position:
        relative;

    z-index:
        var(--z-content);

    width:
        100%;

    padding:
        var(--space-9) 0
        var(--space-5);
}


.footer-container {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(220px, 0.7fr)
        minmax(220px, 0.7fr);

    align-items:
        start;

    gap:
        var(--space-8);
}


.footer-brand {
    max-width:
        420px;
}


.footer-brand p:last-child {
    margin-bottom:
        0;
}


.footer-navigation {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        var(--space-2);
}


.footer-history {
    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-2);
}


.footer-history p {
    margin:
        0;
}


.footer-bottom {
    width:
        min(
            calc(100% - (var(--content-padding) * 2)),
            var(--content-width)
        );

    margin:
        var(--space-7) auto 0;

    padding-top:
        var(--space-5);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-5);
}


.footer-bottom p {
    margin:
        0;
}


/* =========================================================
   28. Decorative Element Base Positioning
   ========================================================= */

.decoration {
    position:
        absolute;

    pointer-events:
        none;

    user-select:
        none;
}


/* =========================================================
   29. Clouds
   ========================================================= */

.cloud {
    width:
        clamp(
            110px,
            13vw,
            220px
        );
}


.cloud-1 {
    top:
        5%;

    left:
        4%;
}


.cloud-2 {
    top:
        17%;

    right:
        4%;
}


.cloud-3 {
    top:
        42%;

    left:
        14%;

    width:
        clamp(
            80px,
            9vw,
            160px
        );
}


/* =========================================================
   30. Seagulls
   ========================================================= */

.seagull {
    width:
        clamp(
            40px,
            5vw,
            72px
        );
}


.seagull-1 {
    top:
        11%;

    right:
        20%;
}


.seagull-2 {
    top:
        30%;

    left:
        10%;

    width:
        clamp(
            32px,
            4vw,
            58px
        );
}


/* =========================================================
   31. Background Bubbles
   ========================================================= */

.bubble {
    position:
        absolute;

    display:
        block;
}


.bubble-1 {
    top:
        13%;

    left:
        17%;
}


.bubble-2 {
    top:
        27%;

    right:
        12%;
}


.bubble-3 {
    top:
        48%;

    left:
        7%;
}


.bubble-4 {
    top:
        64%;

    right:
        19%;
}


.bubble-5 {
    top:
        78%;

    left:
        28%;
}


/* =========================================================
   32. Large Desktop Adjustments
   ========================================================= */

@media (min-width: 1400px) {

    .hero-container {
        min-height:
            650px;
    }


    .hero-character-area {
        min-height:
            560px;
    }


    .shore-character-area {
        right:
            2%;
    }

}


/* =========================================================
   33. Medium Desktop / Small Laptop
   ========================================================= */

@media (max-width: 1100px) {

    .hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.8fr);

        gap:
            var(--space-7);
    }


    .intro-grid {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(270px, 0.7fr);
    }


    .project-grid {
        gap:
            var(--space-5);
    }


    .social-card {
        grid-template-columns:
            minmax(0, 1fr)
            150px;
    }


    .shore-character-area {
        width:
            min(
                30vw,
                280px
            );
    }

}


/* =========================================================
   34. Tablet Layout
   ========================================================= */

@media (max-width: 900px) {

    .intro-section,
    .projects-section,
    .notes-section,
    .social-section {
        padding:
            var(--space-10) 0;
    }


    /* Hero */

    .hero-container {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(250px, 0.85fr);

        min-height:
            520px;
    }


    .hero-character-area {
        min-height:
            420px;
    }


    /* Intro */

    .intro-grid {
        grid-template-columns:
            1fr;
    }


    .shore-clock-card {
        min-height:
            270px;
    }


    /* Projects */

    .project-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .project-card:last-child {
        grid-column:
            1 / -1;

        width:
            min(
                100%,
                560px
            );

        justify-self:
            center;
    }


    /* Notes */

    .note-card {
        grid-template-columns:
            125px
            minmax(0, 1fr)
            auto;
    }


    /* Social */

    .social-grid {
        grid-template-columns:
            1fr;
    }


    .social-card {
        min-height:
            290px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(150px, 0.4fr);
    }


    /* Footer */

    .footer-container {
        grid-template-columns:
            1fr 1fr;
    }


    .footer-brand {
        grid-column:
            1 / -1;

        max-width:
            600px;
    }

}


/* =========================================================
   35. Mobile Layout
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       Header
       ----------------------------------------------------- */

    .site-header {
        padding-top:
            var(--space-5);
    }


    .site-tagline {
        margin-bottom:
            var(--space-4);
    }


    .main-navigation {
        max-width:
            520px;

        margin-inline:
            auto;

        gap:
            var(--space-2);
    }


    /* -----------------------------------------------------
       Hero
       ----------------------------------------------------- */

    .hero-section {
        padding:
            var(--space-6) 0
            var(--space-9);
    }


    .hero-container {
        display:
            flex;

        flex-direction:
            column;

        min-height:
            auto;

        gap:
            var(--space-4);
    }


    .hero-content {
        order:
            1;

        align-items:
            center;

        max-width:
            680px;

        margin-inline:
            auto;

        text-align:
            center;
    }


    .hero-character-area {
        order:
            2;

        width:
            min(
                100%,
                430px
            );

        min-height:
            340px;

        margin-inline:
            auto;
    }


    .hero-character {
        width:
            min(
                100%,
                340px
            );

        max-height:
            370px;
    }


    .hero-actions {
        justify-content:
            center;
    }


    .site-history-short {
        text-align:
            center;
    }


    /* -----------------------------------------------------
       Sections
       ----------------------------------------------------- */

    .intro-section,
    .projects-section,
    .notes-section,
    .social-section {
        padding:
            var(--space-9) 0;
    }


    /* -----------------------------------------------------
       Intro
       ----------------------------------------------------- */

    .intro-grid {
        gap:
            var(--space-5);
    }


    .profile-card {
        grid-template-columns:
            1fr;

        gap:
            var(--space-5);

        text-align:
            center;
    }


    .profile-image {
        width:
            min(
                100%,
                160px
            );
    }


    .profile-content {
        align-items:
            center;
    }


    .shore-clock-card {
        min-height:
            250px;
    }


    /* -----------------------------------------------------
       Section Headings
       ----------------------------------------------------- */

    .section-heading {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            var(--space-4);
    }


    /* -----------------------------------------------------
       Projects
       ----------------------------------------------------- */

    .project-grid {
        grid-template-columns:
            1fr;
    }


    .project-card:last-child {
        grid-column:
            auto;

        width:
            100%;
    }


    /* -----------------------------------------------------
       Notes
       ----------------------------------------------------- */

    .note-card {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            var(--space-3);
    }


    .note-date {
        margin:
            0;
    }


    .note-link {
        margin-top:
            var(--space-1);
    }


    /* -----------------------------------------------------
       Social Cards
       ----------------------------------------------------- */

    .social-card {
        grid-template-columns:
            1fr;

        min-height:
            0;
    }


    .social-card-content {
        order:
            2;

        align-items:
            center;

        padding-top:
            var(--space-4);

        text-align:
            center;
    }


    .social-card-art {
        order:
            1;

        min-height:
            190px;

        padding-top:
            var(--space-5);
    }


    .social-card-art img {
        width:
            min(
                75%,
                220px
            );

        max-height:
            220px;
    }


    /* -----------------------------------------------------
       Wave Transition
       ----------------------------------------------------- */

    .ocean-transition {
        height:
            140px;
    }


    /* -----------------------------------------------------
       Shore
       ----------------------------------------------------- */

    .shore-section {
        min-height:
            auto;

        padding-bottom:
            var(--space-12);
    }


    .shore-container {
        min-height:
            auto;
    }


    .visitor-widget {
        margin-bottom:
            var(--space-6);
    }


    .guestbook-card {
        width:
            100%;

        padding:
            var(--space-6);
    }


    .guestbook-header {
        align-items:
            center;
    }


    .guestbook-starfish {
        width:
            58px;
    }


    .guestbook-form-footer {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .guestbook-form-footer .button {
        width:
            100%;
    }


    .shore-character-area {
        position:
            relative;

        right:
            auto;

        bottom:
            auto;

        width:
            min(
                65vw,
                270px
            );

        margin:
            var(--space-7) auto
            calc(var(--space-8) * -1);
    }


    /* Hide some decorations on small screens */

    .shell-left,
    .starfish-right {
        opacity:
            0.65;
    }


    .crab-left {
        left:
            2%;
    }


    /* -----------------------------------------------------
       Footer
       ----------------------------------------------------- */

    .footer-container {
        grid-template-columns:
            1fr;

        gap:
            var(--space-6);
    }


    .footer-brand {
        grid-column:
            auto;
    }


    .footer-navigation {
        flex-direction:
            row;

        flex-wrap:
            wrap;

        gap:
            var(--space-3)
            var(--space-5);
    }


    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


/* =========================================================
   36. Small Mobile
   ========================================================= */

@media (max-width: 480px) {

    .main-navigation {
        gap:
            var(--space-2);
    }


    .hero-character-area {
        min-height:
            300px;
    }


    .hero-character {
        width:
            min(
                100%,
                300px
            );
    }


    .hero-shell {
        left:
            0;
    }


    .hero-starfish {
        right:
            0;
    }


    .profile-card,
    .shore-clock-card,
    .project-content,
    .social-card-content,
    .guestbook-card {
        padding:
            var(--space-5);
    }


    .guestbook-header {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .guestbook-starfish {
        position:
            absolute;

        top:
            var(--space-5);

        right:
            var(--space-5);

        width:
            48px;
    }


    .clock-shell {
        left:
            4%;
    }


    .clock-crab {
        right:
            4%;
    }


    .shore-decoration {
        transform:
            scale(0.8);
    }


    .cloud-3,
    .seagull-2,
    .bubble-4,
    .bubble-5 {
        display:
            none;
    }

}