@font-face {
    font-family: 'dico';
    src: url('/resources/font/Dico.ttf');
}

html {
    scroll-behavior: smooth;
}

body {
    box-sizing: border-box;
    margin: 0px;
    font-family: dico;
}

h1, h2, h3, h4, p, span {
    color: #fff;
}

a {
    text-decoration: none;
    color: white;
}

nav {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 20px;
    gap: 10px;
    margin-top: 20px;
    color: #fff;
}

footer {
    width: 100%;
    margin-top: 130px;
}

.space {
    width: 100%;
    height: 200px;
}

.mt90 {
    margin-top: 150px;
}

.mt30 {
    margin-top: 30px;
}

.mc {
    margin: auto;
}

#global {
    background: #000;
    width: 100%;
    max-width: 100vw;
    padding: 15px;
}

.global-wrap {
    width: 90%;
    max-width: 1300px;
    margin: auto;
    padding: 12px;
    border: solid 2px #fff;
}

.text-box {
    width: 70%;
}

.text-stroke {
    position: absolute;
    color: transparent;
    -webkit-text-stroke: 0.3px #fff;
    z-index: 3;
}
/*===== header =====*/

header {
    width: 100%;
    padding-bottom: 30px;
}

.stroke-R {
    position: absolute;
    color: transparent;
    -webkit-text-stroke: 0.3px #ff0000;
    top: 20px;
    z-index: 2;
}

.stroke-G {
    position: absolute;
    color: transparent;
    -webkit-text-stroke: 0.3px #45c400;
    top: 35px;
    z-index: 1;
}

.stroke-B {
    position: absolute;
    color: transparent;
    -webkit-text-stroke: 0.3px #0021f8;
    top: 50px;
    z-index: 0;
}

.title-box {
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-top: 80px;
}

/*===== content ====*/

section {
    width: 100%;
    /* padding: 15px; */
}

.grid-box {
    width: 70%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

/*===== footer =====*/

.copyright {
    width: 100%;
    text-align: center;
    margin-top: 250px;
}

.f-inst {
    text-decoration: none;
    color: #fff;
}

.direc-link {
    width: 100%;
}

.direc-link:hover {
    color: red;
}

.h-logo {
    margin-top: 40px;
}

.zine-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 30px;
}

.video-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 30px;
}

.item-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.item-card img {
    width:  100%;
    height: 100%;
}

.item-title {
    width: 100%;
}

.f-wrap {
    width: 100%;
}

.contact {
    width: 30%;
    margin: auto;
    text-align: center;
    font-size: 15px;
}

.radio-player {
    width: 80%;
    padding-bottom: 30px;
}

.logo-wrap {
    display: flex;
    flex-direction: column;
    justify-items: center;
}

.direc-link {
    width: 100%;
}

.direc h2{
    color: red;
}

.direc p {
    color: white;
}

.direc:hover h2 {
    color: white;
}

.direc:hover p {
    color: red;
}

.h-wrap {
    width: 100%;
    display: flex;
}

.h-img {
    float: right;
}

.main-title {
    font-size: 60px;
    margin: 0; 
}

.main-title-top {
    z-index: 4;
    position: relative;
}

/* ===== BLOG STYLES ===== */
.blog-list {
    width: 100%;
    margin-top: 40px;
}

.blog-post {
    border-bottom: 2px dotted #fff;
    padding-bottom: 30px;
    margin-bottom: 40px;
}

/* Removes the dotted line after the very last post */
.blog-post:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.post-date {
    color: red;
    font-size: 16px;
    margin-bottom: 5px;
}

.post-title {
    margin-top: 0;
    font-size: 28px;
    letter-spacing: 1px;
}

.post-excerpt {
    line-height: 1.6;
    margin-bottom: 20px;
    width: 85%; /* Keeps the text from stretching too wide on PC */
}

/* ========================================= */
/* ====== MOBILE OPTIMIZATION (768px) ====== */
/* ========================================= */
@media screen and (max-width: 768px) {
    
    /* --- 1. UNIVERSAL STYLES (Applies to all pages) --- */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html, body {
        overflow-x: hidden; 
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .global-wrap {
        width: 95%; 
    }

    footer {
        margin-top: 80px;
    }

    /* --- 2. LANDING PAGE SPECIFIC --- */
    .title-box, 
    .text-box, 
    .grid-box {
        width: 100%;
    }

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

    h1.mt90 {
        margin-top: 80px; 
        font-size: 6.5vw; 
        white-space: nowrap; 
    }

    .main-title {
        font-size: 9vw; 
        white-space: nowrap; 
    }
    
    .stroke-R { top: 3.3vw; }
    .stroke-G { top: 5.8vw; }
    .stroke-B { top: 8.3vw; }

    /* --- 3. SUB-PAGE SPECIFIC (Zines, etc.) --- */
    nav {
        flex-wrap: wrap; 
        font-size: 14px; 
        padding: 0 10px;
        line-height: 1.8; 
    }

    header h1 {
        font-size: 8vw; 
    }
    
    .h-logo img {
        max-width: 100%; 
        height: auto;
    }

    .zine-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }

    .item-card h3 {
        font-size: 16px;
        margin: 10px 0 5px 0;
    }
    
    .item-card p, 
    .item-card .author-credit {
        font-size: 12px;
        margin: 2px 0;
        word-break: break-word; 
    }

    .contact {
        width: 100%; 
        padding: 0 15px;
    }

    /* --- 4. VIDEO PAGE SPECIFIC --- */
    /* Stack videos vertically instead of side-by-side */
    .video-grid {
        grid-template-columns: 1fr; 
    }

    /* Override hardcoded iframe widths and maintain 16:9 aspect ratio */
    .video-wrapper iframe {
        width: 100% !important; 
        height: auto !important; 
        aspect-ratio: 16 / 9; 
    }

    /* --- 5. RADIO PAGE SPECIFIC --- */
    /* Expand SoundCloud player to use full screen width */
    .radio-player {
        width: 100%; 
    }
    
    /* --- 6. BLOG PAGE SPECIFIC --- */
    .post-title {
        font-size: 22px; 
    }
    
    .post-excerpt {
        width: 100%; /* Allows text to use full width on mobile */
        font-size: 14px;
    }
    
}