@font-face {
    font-family: 'W12_ver.2';
    src: url('../assets/fonts/W12_ver.2-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'W12_bold';
    src: url('../assets/fonts/W12_bold-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

body {
   background-color: rgb(245, 245, 245); 
}

/* =====================
   Summer Palm Tree Page
   ===================== */

.spt-page {
    width: 80%;
    background: white;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    display: flex;
    margin-left: auto;
    margin-right: 0;
}

/* Left sidebar: home link + project description, sits in the gutter left of .spt-page */
.spt-sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    width: 20%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 32px;
    box-sizing: border-box;
    font-family: sans-serif;
}

.spt-sidebar-home {
    display: inline-block;
    color: black;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid black;
    width: fit-content;
}

.spt-sidebar-home:hover {
    opacity: 0.6;
}

.spt-sidebar-description {
    margin: 0;
    color: black;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* Tools, one per line, under the description. */
.spt-sidebar-tools {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    color: black;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.spt-sidebar-tools li {
    font-weight: 600;
}

.spt-sidebar-tools li + li {
    margin-top: 8px;
}

.spt-section {
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

/* Hero Section */
.spt-hero {
    min-height: 100vh;
    background: #F4FFE8;
}

.spt-hero-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: #2CC7DE;
    font-size: 120px;
    font-weight: 400;
    word-wrap: break-word;
}

.spt-hero-title--regular {
    top: 35.9%;
    font-family: 'W12_ver.2';
}

.spt-hero-title--bold {
    top: 47.7%;
    font-family: 'W12_bold';
}

.spt-hero-meta-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 28.91px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.spt-hero-meta-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6.2%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.spt-hero-meta {
    color: #2CC7DE;
    font-size: 24px;
    font-family: 'W12_ver.2';
    font-weight: 400;
    word-wrap: break-word;
}

/* Mobile-only hero variant: word-stacked title (meta stays anchored top/bottom, shared with desktop) */
.spt-hero-title-group {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #2CC7DE;
}

.spt-hero-title-word {
    font-size: 120px;
    font-weight: 400;
    word-wrap: break-word;
}

.spt-hero-title-word--regular {
    font-family: 'W12_ver.2';
}

.spt-hero-title-word--bold {
    font-family: 'W12_bold';
}

/* Must come after .spt-hero-title-group so its "display: none" wins the cascade
   by default; the mobile media query re-enables it with "display: flex". */
.spt-mobile-only {
    display: none;
}

/* Sunset Section */
.spt-sunset {
    min-height: 100vh;
    background: #2CC7DE;
}

.spt-sunset-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 10.9%;
    text-align: center;
}

.spt-font-regular {
    color: #FFDC8C;
    font-size: 300px;
    font-family: 'W12_ver.2';
    font-weight: 400;
    line-height: 267.31px;
    word-wrap: break-word;
}

.spt-font-bold {
    color: #FF7E4D;
    font-size: 300px;
    font-family: 'W12_bold';
    font-weight: 400;
    line-height: 267.31px;
    word-wrap: break-word;
}

/* Palm Tree Section */
.spt-palmtree {
    min-height: 100vh;
    background: #FFDC8C;
}

.spt-palmtree-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 22%;
    background: #DC1D30;
    overflow: hidden;
}

.spt-palmtree-header-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 21.7%;
    text-align: center;
    color: #FFDC8C;
    font-size: 130px;
    font-family: 'W12_ver.2';
    font-weight: 400;
    line-height: 115.83px;
    word-wrap: break-word;
}

.spt-palmtree-box {
    position: absolute;
    top: 26.8%;
    width: 45.8%;
    height: 68.5%;
    overflow: hidden;
}

.spt-palmtree-box--blue {
    left: 2.8%;
    background: #2CC7DE;
}

.spt-palmtree-box--orange {
    left: 51.4%;
    background: #FF7D4D;
}

.spt-palmtree-box-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 23.3%;
    text-align: center;
    font-size: 130px;
    font-family: 'W12_ver.2';
    font-weight: 400;
    line-height: 124.74px;
    word-wrap: break-word;
}

.spt-palmtree-box--blue .spt-palmtree-box-text {
    color: #FFDE89;
}

.spt-palmtree-box--orange .spt-palmtree-box-text {
    color: #FFDC8C;
}

/* Line break only takes effect on mobile (see mobile media query) */
.spt-palmtree-header-break {
    display: none;
}

/* Alphabet Sections */
.spt-alphabet--light {
    min-height: 100vh;
    background: #F4FFE8;
}

.spt-alphabet--dark {
    min-height: 81vh;
    background: #2CC7DE;
}

.spt-alphabet-text {
    position: absolute;
    text-align: center;
    font-size: 210px;
    font-family: 'W12_ver.2';
    font-weight: 400;
    line-height: 199.50px;
    word-wrap: break-word;
}

.spt-alphabet--light .spt-alphabet-text {
    left: 0;
    right: 0;
    top: 19.1%;
    color: #2CC7DE;
}

.spt-alphabet--dark .spt-alphabet-text {
    left: 0;
    right: 0;
    top: 17.8%;
    color: #F4FFE8;
    text-transform: lowercase;
}

/* Breaks only take effect below desktop width (see tablet/mobile media queries) */
.spt-alphabet-break {
    display: none;
}

/* Numbers Section */
.spt-numbers {
    min-height: 85vh;
    background: #2CC7DE;
}

.spt-numbers-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 10.1%;
    text-align: center;
    color: #F4FFE8;
    font-size: 200px;
    font-family: 'W12_ver.2';
    font-weight: 400;
    text-transform: lowercase;
    line-height: 190px;
    word-wrap: break-word;
}

/* Images */
.spt-img {
    align-self: stretch;
    width: 100%;
    height: auto;
    display: block;
}

/* =====================================================
   Responsive breakpoints
   Tablet and Mobile ranges are mutually exclusive
   (no overlap, no cascade between them) so each block
   is self-contained and mirrors the same section order.
   ===================================================== */

/* =====================
   Tablet (601px - 1024px)
   ===================== */
@media (min-width: 601px) and (max-width: 1024px) {

    .spt-sidebar {
        position: static;
        width: 100%;
        gap: 8px;
        padding: 24px 40px;
    }

    .spt-sidebar-description {
        width: 70%;
    }

    .spt-page {
        width: 100%;
    }

    /* Hero Section */
    .spt-hero-title {
        font-size: 64px;
    }

    .spt-hero-title--regular {
        top: 38%;
    }

    .spt-hero-title--bold {
        top: 47%;
    }

    .spt-hero-meta {
        font-size: 16px;
    }

    /* Sunset Section */
    .spt-sunset {
        min-height: auto;
        padding: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .spt-sunset-text {
        position: static;
    }

    .spt-font-regular,
    .spt-font-bold {
        font-size: 180px;
        line-height: 160.4px;
    }

    /* Palm Tree Section */
    .spt-palmtree-header {
        height: 7.3%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .spt-palmtree-header-text {
        position: static;
        font-size: 64px;
        line-height: 57px;
    }

    .spt-palmtree-box-text {
        font-size: 64px;
        line-height: 61px;
    }

    /* Alphabet Sections */
    .spt-alphabet-text {
        font-size: 96px;
        line-height: 91px;
    }

    .spt-alphabet-break {
        display: inline;
    }

    /* Numbers Section */
    .spt-numbers-text {
        font-size: 96px;
        line-height: 91px;
    }
}

/* =====================
   Mobile (<=600px)
   ===================== */
@media (max-width: 600px) {

    .spt-sidebar {
        position: static;
        width: 100%;
        gap: 8px;
        padding: 20px 24px;
    }

    .spt-page {
        width: 100%;
    }

    /* Hero Section */
    .spt-hero-meta-top,
    .spt-hero-meta-bottom {
        flex-direction: column;
        gap: 0;
    }

    .spt-desktop-only {
        display: none;
    }

    .spt-mobile-only {
        display: flex;
    }

    .spt-hero-title-word {
        font-size: 64px;
    }

    .spt-hero-meta {
        font-size: 1.5rem;
    }

    /* Sunset Section */
    .spt-sunset {
        min-height: auto;
        padding: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .spt-sunset-text {
        position: static;
    }

    .spt-font-regular,
    .spt-font-bold {
        font-size: 96px;
        line-height: 85.6px;
    }

    /* Palm Tree Section */
    .spt-palmtree {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 16px 0 32px;
        box-sizing: border-box;
    }

    .spt-palmtree-header {
        position: static;
        width: 100%;
        height: auto;
        padding: 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .spt-palmtree-header-text {
        position: static;
        font-size: 56px;
        line-height: 50px;
    }

    .spt-palmtree-header-break {
        display: inline;
    }

    .spt-palmtree-box {
        position: static;
        width: 90%;
        height: auto;
        padding: 40px 0;
        box-sizing: border-box;
    }

    .spt-palmtree-box-text {
        position: static;
        font-size: 64px;
        line-height: 58px;
    }

    /* Alphabet Sections */
    .spt-alphabet--light,
    .spt-alphabet--dark {
        min-height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px 20px;
        box-sizing: border-box;
    }

    .spt-alphabet--light .spt-alphabet-text,
    .spt-alphabet--dark .spt-alphabet-text {
        position: static;
        top: auto;
    }

    .spt-alphabet-text {
        font-size: 56px;
        line-height: 52px;
    }

    .spt-alphabet-break {
        display: inline;
    }

    /* Numbers Section */
    .spt-numbers {
        min-height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px 20px;
        box-sizing: border-box;
    }

    .spt-numbers-text {
        position: static;
        font-size: 56px;
        line-height: 52px;
    }
}