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

   Final responsive overrides
   Loaded AFTER:
   - style.css
   - layout.css
   - components.css
   - animations.css

   Main targets:
   - Large desktop
   - Laptop
   - Tablet
   - Mobile
   - Small mobile
   ========================================================= */


/* =========================================================
   1. Large Desktop
   1440px+
   ========================================================= */

@media (min-width: 1440px) {

    :root {
        --content-width: 1240px;
    }


    .site-header {
        padding-top: 2rem;
    }


    .hero-container {
        min-height: 660px;

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

        gap: 5rem;
    }


    .hero-content {
        max-width: 700px;
    }


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


    .hero-character {
        width: min(100%, 500px);
        max-height: 560px;
    }


    .project-grid {
        gap: 2rem;
    }


    .social-grid {
        gap: 2rem;
    }


    .shore-section {
        min-height: 820px;
    }


    .guestbook-card {
        width: min(100%, 760px);
    }

}


/* =========================================================
   2. Standard Desktop
   1200px - 1439px
   ========================================================= */

@media (max-width: 1439px) and (min-width: 1200px) {

    :root {
        --content-width: 1160px;
    }


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


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


    .social-card {
        min-height: 315px;
    }

}


/* =========================================================
   3. Laptop
   1024px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    :root {
        --content-width: 1000px;
        --content-padding: 28px;
    }


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

    .site-logo {
        font-size: clamp(3rem, 6vw, 4.2rem);
    }


    .main-navigation {
        width: fit-content;
        max-width: 100%;
    }


    .nav-link {
        min-width: 80px;

        padding:
            0.55rem 1rem;
    }


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

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

        gap: 2.5rem;

        min-height: 560px;
    }


    .hero-title {
        font-size: clamp(3.5rem, 7vw, 5.5rem);
    }


    .hero-description {
        font-size: 1.2rem;
    }


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


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


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

    .intro-grid {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(280px, 0.75fr);

        gap: 1.5rem;
    }


    .profile-card {
        grid-template-columns:
            160px
            minmax(0, 1fr);

        gap: 1.5rem;

        padding: 1.7rem;
    }


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

    .project-grid {
        gap: 1.25rem;
    }


    .project-content {
        padding: 1.35rem;
    }


    .project-title {
        font-size: 1.65rem;
    }


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

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

        min-height: 300px;
    }


    .social-card-content {
        padding: 1.6rem;
    }


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

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

}


/* =========================================================
   4. Tablet Landscape
   900px - 1023px
   ========================================================= */

@media (max-width: 1023px) {

    :root {
        --content-padding: 24px;
    }


    /* -----------------------------------------------------
       General section spacing
       ----------------------------------------------------- */

    .intro-section,
    .projects-section,
    .notes-section,
    .social-section {
        padding:
            4rem 0;
    }


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

    .site-header {
        padding-top: 1.4rem;
    }


    .site-logo {
        font-size: clamp(2.8rem, 7vw, 4rem);
    }


    .site-tagline {
        font-size: 1.05rem;
    }


    .nav-link {
        min-width: 76px;

        padding:
            0.5rem 0.9rem;
    }


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

    .hero-section {
        padding-top: 2rem;
    }


    .hero-container {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, 0.9fr);

        min-height: 520px;

        gap: 2rem;
    }


    .hero-title {
        font-size: clamp(3.2rem, 7vw, 5rem);
    }


    .hero-description {
        font-size: 1.15rem;
    }


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


    .hero-character {
        width: min(100%, 360px);
        max-height: 420px;
    }


    .hero-shell {
        width: 52px;
    }


    .hero-starfish {
        width: 62px;
    }


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

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


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


    .shore-clock-card {
        width: min(100%, 560px);

        margin-inline: auto;

        min-height: 260px;
    }


    /* -----------------------------------------------------
       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:
            120px
            minmax(0, 1fr)
            auto;

        gap: 1.3rem;
    }


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

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


    .social-card {
        width: min(100%, 760px);

        margin-inline: auto;

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


    .social-card-art img {
        max-height: 280px;
    }


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

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


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

}


/* =========================================================
   5. Tablet Portrait
   768px - 899px
   ========================================================= */

@media (max-width: 899px) {

    /* -----------------------------------------------------
       Background decorations
       ----------------------------------------------------- */

    .cloud-3 {
        opacity: 0.28;
    }


    .seagull-2 {
        opacity: 0.45;
    }


    .bubble-4,
    .bubble-5 {
        opacity: 0.3;
    }


    /* -----------------------------------------------------
       Navigation
       ----------------------------------------------------- */

    .main-navigation {
        width: min(100%, 620px);

        justify-content: center;

        border-radius: 26px;
    }


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


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

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

        gap: 1.5rem;
    }


    .hero-title {
        font-size: clamp(3rem, 8vw, 4.6rem);
    }


    .hero-actions {
        gap: 0.8rem;
    }


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


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


    /* -----------------------------------------------------
       Profile
       ----------------------------------------------------- */

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


    .profile-image {
        max-width: 150px;
    }


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

    .shell-left {
        left: 0;
    }


    .starfish-right {
        right: 1%;
    }


    .shore-character-area {
        opacity: 0.88;
    }

}


/* =========================================================
   6. Mobile
   767px and below
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --content-padding: 18px;
    }


    body {
        font-size: 1.08rem;
    }


    /* =====================================================
       Header
       ===================================================== */

    .site-header {
        padding:
            1.25rem 0
            0.5rem;
    }


    .header-inner {
        width:
            min(
                calc(100% - 32px),
                680px
            );
    }


    .site-logo {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }


    .site-tagline {
        max-width: 90%;

        margin-bottom: 1rem;

        font-size: 1rem;
    }


    /* =====================================================
       Mobile Navigation
       ===================================================== */

    .main-navigation {
        width: 100%;

        padding: 0.45rem;

        gap: 0.4rem;

        border-radius: 24px;
    }


    .nav-link {
        flex:
            1 1 auto;

        min-width:
            72px;

        max-width:
            130px;

        padding:
            0.5rem 0.65rem;

        font-size:
            1rem;
    }


    /* =====================================================
       Hero
       ===================================================== */

    .hero-section {
        padding:
            2rem 0
            3.5rem;
    }


    .hero-container {
        display: flex;

        flex-direction: column;

        min-height: 0;

        gap: 1rem;
    }


    .hero-content {
        order: 1;

        align-items: center;

        max-width: 620px;

        margin-inline: auto;

        text-align: center;
    }


    .hero-eyebrow {
        font-size: 0.7rem;
    }


    .hero-title {
        font-size:
            clamp(
                3.1rem,
                16vw,
                4.6rem
            );

        line-height: 0.98;
    }


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

        font-size: 1.1rem;

        line-height: 1.6;
    }


    .hero-actions {
        justify-content: center;

        width: 100%;
    }


    .hero-actions .button {
        flex:
            0 1 auto;
    }


    .site-history-short {
        max-width: 360px;

        font-size: 0.64rem;

        line-height: 1.7;
    }


    .hero-character-area {
        order: 2;

        width: min(100%, 420px);

        min-height: 330px;

        margin-inline: auto;
    }


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

        max-height: 350px;
    }


    .hero-character-glow {
        width: 310px;
    }


    .hero-shell {
        left: 5%;

        bottom: 4%;

        width: 48px;
    }


    .hero-starfish {
        right: 4%;

        bottom: 7%;

        width: 58px;
    }


    /* =====================================================
       Sections
       ===================================================== */

    .intro-section,
    .projects-section,
    .notes-section,
    .social-section {
        padding:
            3.5rem 0;
    }


    .section-title {
        font-size:
            clamp(
                2.1rem,
                11vw,
                3rem
            );
    }


    .section-description {
        font-size: 1.05rem;
    }


    /* =====================================================
       Intro / Profile
       ===================================================== */

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

        gap: 1.25rem;

        margin-top: 1.8rem;
    }


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

        gap: 1rem;

        padding: 1.5rem;

        text-align: center;
    }


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

        margin-inline: auto;
    }


    .profile-image {
        width: 145px;
    }


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


    .profile-content p {
        max-width: 520px;
    }


    /* =====================================================
       Clock
       ===================================================== */

    .shore-clock-card {
        width: 100%;

        min-height: 240px;

        padding: 1.5rem;
    }


    .clock-sign {
        width: min(100%, 360px);

        margin-inline: auto;
    }


    .clock-time {
        font-size: 2.25rem;
    }


    .clock-shell {
        left: 7%;

        width: 42px;
    }


    .clock-crab {
        right: 7%;

        width: 48px;
    }


    /* =====================================================
       Section Heading
       ===================================================== */

    .section-heading {
        flex-direction: column;

        align-items: flex-start;

        gap: 0.8rem;

        margin-bottom: 2rem;
    }


    .section-link {
        align-self: flex-start;
    }


    .section-heading::after {
        width: 150px;
    }


    /* =====================================================
       Projects
       ===================================================== */

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

        gap: 1.25rem;
    }


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

        width: 100%;

        max-width: 560px;

        margin-inline: auto;
    }


    .project-image-wrapper {
        aspect-ratio: 16 / 9;
    }


    .project-content {
        padding: 1.4rem;
    }


    .project-title {
        font-size: 1.7rem;
    }


    /* =====================================================
       Wave Divider
       ===================================================== */

    .wave-divider {
        height: 85px;
    }


    .wave-divider img {
        width: max(130%, 1100px);
    }


    /* =====================================================
       Notes
       ===================================================== */

    .notes-section {
        padding-top: 3rem;
    }


    .note-card {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 0.65rem;

        padding: 1.3rem;
    }


    .note-date {
        margin: 0;
    }


    .note-title {
        font-size: 1.55rem;
    }


    .note-link {
        margin-top: 0.2rem;
    }


    /* =====================================================
       Social Cards
       ===================================================== */

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

        gap: 1.25rem;
    }


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

        width: 100%;

        max-width: 560px;

        min-height: 0;

        margin-inline: auto;
    }


    .social-card-art {
        order: 1;

        min-height: 200px;

        padding-top: 1rem;
    }


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

        max-height: 220px;
    }


    .social-card-content {
        order: 2;

        align-items: center;

        padding:
            1rem 1.5rem
            1.6rem;

        text-align: center;
    }


    .social-card-content p {
        max-width: 430px;
    }


    /* =====================================================
       Ocean
       ===================================================== */

    .ocean-transition {
        height: 125px;
    }


    .ocean-wave {
        min-width: 1100px;
    }


    /* =====================================================
       Shore
       ===================================================== */

    .shore-section {
        min-height: auto;

        padding:
            3rem 0
            4rem;
    }


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


    .shore-decorations {
        opacity: 0.7;
    }


    .shell-left {
        left: 0;

        top: 21%;

        width: 52px;
    }


    .starfish-right {
        right: 0;

        top: 13%;

        width: 56px;
    }


    .crab-left {
        left: 1%;

        bottom: 3%;

        width: 58px;
    }


    /* =====================================================
       Visitor
       ===================================================== */

    .visitor-widget {
        width: min(100%, 360px);

        margin-bottom: 1.5rem;

        padding: 1rem;
    }


    .visitor-count {
        font-size: 1.85rem;

        letter-spacing: 0.08em;
    }


    /* =====================================================
       Guestbook
       ===================================================== */

    .guestbook-card {
        width: 100%;

        max-width: 620px;

        padding: 1.5rem;
    }


    .guestbook-header {
        align-items: center;

        gap: 1rem;
    }


    .guestbook-starfish {
        width: 54px;
    }


    .guestbook-form {
        gap: 1rem;
    }


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

        align-items: stretch;

        gap: 0.8rem;
    }


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


    /* =====================================================
       Shore Character
       ===================================================== */

    .shore-character-area {
        position: relative;

        right: auto;

        bottom: auto;

        width: min(62vw, 260px);

        margin:
            2rem auto
            -2.5rem;
    }


    .shore-character {
        max-height: 300px;
    }


    /* =====================================================
       Footer
       ===================================================== */

    .site-footer {
        padding:
            3rem 0
            1.4rem;
    }


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

        gap: 1.5rem;
    }


    .footer-brand {
        grid-column: auto;

        max-width: none;
    }


    .footer-navigation {
        flex-direction: row;

        flex-wrap: wrap;

        gap:
            0.6rem
            1.2rem;
    }


    .footer-history {
        font-size: 0.64rem;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 0.3rem;
    }


    /* =====================================================
       Background decorations
       ===================================================== */

    .cloud-1 {
        top: 4%;

        left: -5%;

        width: 130px;
    }


    .cloud-2 {
        top: 17%;

        right: -6%;

        width: 125px;
    }


    .cloud-3 {
        display: none;
    }


    .seagull-1 {
        top: 13%;

        right: 8%;

        width: 46px;
    }


    .seagull-2 {
        display: none;
    }


    .bubble-4,
    .bubble-5 {
        display: none;
    }

}


/* =========================================================
   7. Medium Mobile
   560px and below
   ========================================================= */

@media (max-width: 560px) {

    :root {
        --content-padding: 16px;
    }


    /* -----------------------------------------------------
       Navigation
       Two-row pill layout
       ----------------------------------------------------- */

    .main-navigation {
        display: grid;

        grid-template-columns:
            repeat(6, 1fr);

        width: 100%;

        gap: 0.4rem;
    }


    .nav-link {
        min-width: 0;
        max-width: none;

        width: 100%;
    }


    .nav-link:nth-child(1),
    .nav-link:nth-child(2),
    .nav-link:nth-child(3) {
        grid-column: span 2;
    }


    .nav-link:nth-child(4) {
        grid-column:
            2 / span 2;
    }


    .nav-link:nth-child(5) {
        grid-column:
            4 / span 2;
    }


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

    .hero-title {
        font-size:
            clamp(
                2.9rem,
                17vw,
                4rem
            );
    }


    .hero-description {
        font-size: 1.04rem;
    }


    .hero-actions {
        width: 100%;
    }


    .hero-actions .button {
        flex: 1 1 160px;
    }


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


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


    .hero-character-glow {
        width: 280px;
    }


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

    .profile-card,
    .shore-clock-card,
    .guestbook-card {
        border-radius: 26px;
    }


    /* -----------------------------------------------------
       Profile
       ----------------------------------------------------- */

    .profile-image-wrapper {
        max-width: 155px;
    }


    .profile-image {
        width: 130px;
    }


    /* -----------------------------------------------------
       Project cards
       ----------------------------------------------------- */

    .project-title {
        font-size: 1.55rem;
    }


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

    .social-card {
        border-radius: 28px;
    }


    .social-card-art {
        min-height: 180px;
    }


    /* -----------------------------------------------------
       Guestbook
       ----------------------------------------------------- */

    .guestbook-header {
        padding-right: 45px;
    }


    .guestbook-starfish {
        position: absolute;

        top: 1.4rem;

        right: 1.4rem;

        width: 46px;
    }

}


/* =========================================================
   8. Small Mobile
   420px and below
   ========================================================= */

@media (max-width: 420px) {

    :root {
        --content-padding: 14px;
    }


    /* =====================================================
       Typography
       ===================================================== */

    body {
        font-size: 1.03rem;
    }


    .site-logo {
        font-size:
            clamp(
                2.6rem,
                15vw,
                3.4rem
            );
    }


    .site-tagline {
        max-width: 100%;
    }


    .section-title {
        font-size:
            clamp(
                1.9rem,
                12vw,
                2.6rem
            );
    }


    /* =====================================================
       Navigation
       ===================================================== */

    .main-navigation {
        border-radius: 20px;
    }


    .nav-link {
        padding:
            0.46rem 0.35rem;

        font-size:
            0.93rem;
    }


    /* =====================================================
       Hero
       ===================================================== */

    .hero-section {
        padding-top: 1.5rem;
    }


    .hero-title {
        font-size:
            clamp(
                2.75rem,
                18vw,
                3.7rem
            );
    }


    .hero-description {
        line-height: 1.55;
    }


    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .hero-actions .button {
        width: 100%;

        flex: none;
    }


    .site-history-short span {
        display: none;
    }


    .site-history-short {
        display: flex;

        flex-direction: column;

        gap: 0.1rem;
    }


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


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


    .hero-shell {
        left: 0;

        width: 40px;
    }


    .hero-starfish {
        right: 0;

        width: 48px;
    }


    /* =====================================================
       Profile
       ===================================================== */

    .profile-card {
        padding: 1.25rem;
    }


    /* =====================================================
       Clock
       ===================================================== */

    .shore-clock-card {
        padding: 1.25rem;
    }


    .clock-sign {
        padding:
            1.25rem
            0.8rem;
    }


    .clock-time {
        font-size: 2rem;
    }


    .clock-date {
        font-size: 0.7rem;
    }


    .clock-zone {
        font-size: 0.58rem;
    }


    /* =====================================================
       Projects
       ===================================================== */

    .project-image-wrapper {
        aspect-ratio: 3 / 2;
    }


    .project-content {
        padding: 1.2rem;
    }


    .project-tags {
        gap: 0.35rem;
    }


    .project-tag {
        padding:
            0.24rem
            0.52rem;

        font-size: 0.54rem;
    }


    /* =====================================================
       Notes
       ===================================================== */

    .note-card {
        padding: 1.1rem;
    }


    .note-title {
        font-size: 1.4rem;
    }


    /* =====================================================
       Social
       ===================================================== */

    .social-card-art {
        min-height: 160px;
    }


    .social-card-art img {
        width: min(68%, 185px);
    }


    .social-card-content {
        padding:
            0.8rem 1.2rem
            1.4rem;
    }


    /* =====================================================
       Shore
       ===================================================== */

    .shore-section {
        padding-top: 2.5rem;
    }


    .shell-left {
        width: 42px;
    }


    .starfish-right {
        width: 46px;
    }


    .crab-left {
        width: 50px;
    }


    /* =====================================================
       Visitor
       ===================================================== */

    .visitor-count {
        font-size: 1.65rem;

        letter-spacing: 0.06em;
    }


    /* =====================================================
       Guestbook
       ===================================================== */

    .guestbook-card {
        padding: 1.2rem;
    }


    .guestbook-title {
        font-size: 2rem;
    }


    .guestbook-header {
        padding-right: 38px;
    }


    .guestbook-starfish {
        top: 1.15rem;

        right: 1.15rem;

        width: 40px;
    }


    .guestbook-form input,
    .guestbook-form textarea {
        padding:
            0.72rem
            0.85rem;
    }


    /* =====================================================
       Shore Character
       ===================================================== */

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


    /* =====================================================
       Footer
       ===================================================== */

    .footer-logo {
        font-size: 1.75rem;
    }


    .footer-navigation {
        gap:
            0.45rem
            0.9rem;
    }


    .footer-bottom {
        font-size: 0.88rem;
    }


    /* =====================================================
       Decorative simplification
       ===================================================== */

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

}


/* =========================================================
   9. Very Small Devices
   360px and below
   ========================================================= */

@media (max-width: 360px) {

    :root {
        --content-padding: 12px;
    }


    .site-logo {
        font-size: 2.55rem;
    }


    .site-tagline {
        font-size: 0.92rem;
    }


    .nav-link {
        padding:
            0.42rem
            0.2rem;

        font-size: 0.88rem;
    }


    .hero-title {
        font-size: 2.7rem;
    }


    .hero-description {
        font-size: 1rem;
    }


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


    .hero-character {
        width: 235px;
    }


    .profile-image {
        width: 120px;
    }


    .clock-time {
        font-size: 1.8rem;
    }


    .project-title {
        font-size: 1.45rem;
    }


    .guestbook-title {
        font-size: 1.8rem;
    }

}


/* =========================================================
   10. Landscape Mobile
   ========================================================= */

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 550px
) {

    .hero-section {
        padding-top: 1rem;
    }


    .hero-container {
        display: grid;

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(220px, 0.9fr);

        min-height: 400px;

        gap: 1.5rem;
    }


    .hero-content {
        align-items: flex-start;

        text-align: left;
    }


    .hero-actions {
        justify-content: flex-start;
    }


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


    .hero-character {
        max-height: 320px;
    }


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

}


/* =========================================================
   11. Touch Devices
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .nav-link,
    .button,
    .project-card,
    .note-card,
    .social-card {
        -webkit-tap-highlight-color:
            transparent;
    }


    .nav-link {
        min-height: 44px;
    }


    .button {
        min-height: 46px;
    }


    input,
    textarea {
        font-size: 16px;
    }

}


/* =========================================================
   12. High Resolution Screens
   ========================================================= */

@media (min-resolution: 2dppx) {

    .site-logo,
    .hero-title,
    .section-title {
        -webkit-font-smoothing:
            antialiased;
    }

}


/* =========================================================
   13. Short Desktop Screens
   ========================================================= */

@media (
    min-width: 768px
)
and (
    max-height: 760px
) {

    .hero-section {
        padding-top: 1.5rem;
        padding-bottom: 3rem;
    }


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


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


    .hero-character {
        max-height: 420px;
    }

}


/* =========================================================
   14. Reduced Motion Final Override
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

}


/* =========================================================
   15. Print

   Not especially important for Neocities,
   but keeps content readable when printed.
   ========================================================= */

@media print {

    .site-background,
    .main-navigation,
    .hero-character-area,
    .wave-divider,
    .ocean-transition,
    .shore-decorations,
    .shore-character-area,
    .guestbook-form,
    .footer-navigation {
        display: none !important;
    }


    body {
        background: #ffffff;

        color: #000000;

        font-size: 12pt;
    }


    .site-main,
    .site-header,
    .site-footer,
    .shore-section,
    .notes-section {
        background: #ffffff !important;
    }


    .card {
        background: #ffffff !important;

        box-shadow: none !important;

        border:
            1px solid #cccccc !important;
    }


    a {
        color: #000000;

        text-decoration: underline;
    }

}