/* =========================================================
   LINY! — NEOCITIES WEBSITE
   Pixelated Memories aesthetic
   ========================================================= */


/* ================= IMPORT ================= */

@import url(
'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&display=swap'
);


/* ================= RESET ================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    min-height: 100%;
    background: #000;
}


body {

    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            #1b1b1b 0%,
            #000000 60%
        );

    font-family:
        Arial,
        Verdana,
        sans-serif;

    color: #ece7dc;

    overflow-x: hidden;
}


/* ================= CURSOR ================= */

* {

    cursor:
        url(
            'https://cur.cursors-4u.net/cursors/cur-2/cur116.cur'
        ),
        auto !important;

}


/* ================= LINKS ================= */

a {

    color: #f3efe6;

    text-decoration: none;

    text-shadow:
        0 0 5px rgba(255,255,255,.12);

    transition:
        color .2s ease,
        text-shadow .2s ease,
        transform .2s ease;

}


a:hover {

    color: #fff;

    text-shadow:
        0 0 10px rgba(255,255,255,.35);

}


/* ================= SITE ================= */

.site {

    width:
        min(
            1200px,
            calc(100% - 28px)
        );

    margin:
        18px auto;

}


/* ================= STATUS BAR ================= */

.status-bar {

    min-height: 34px;

    display: flex;

    align-items: center;

    padding:
        8px 14px;

    background: #050505;

    color: #f5f1e8;

    border:
        1px solid #2d2d2d;

    border-bottom:
        1px solid #3a3a3a;

    font-size: 12px;

    letter-spacing: 1px;

    text-shadow:
        0 0 6px rgba(255,255,255,.15);

}


/* ================= HERO ================= */

.hero {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #050505,
            #1a1a1a 50%,
            #050505
        );

    border:
        1px solid #2a2a2a;

    border-top: 0;

}


.hero-text {

    padding:
        45px 25px 40px;

    text-align: center;

}


.eyebrow {

    margin:
        0 0 10px;

    color: #999;

    font-size: 10px;

    letter-spacing: 3px;

}


.hero h1 {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(64px, 12vw, 130px);

    line-height: .8;

    font-weight: 700;

    letter-spacing: 8px;

    color: #faf7f0;

    text-shadow:
        0 0 6px rgba(255,255,255,.18),
        0 0 25px rgba(255,255,255,.08);

    animation:
        linyGlow 4s ease-in-out infinite;

}


.tagline {

    margin-top: 22px;

    color: #aaa;

    font-size: 12px;

    letter-spacing: 5px;

}


/* ================= GLOW ================= */

@keyframes linyGlow {

    0% {

        text-shadow:
            0 0 4px rgba(255,255,255,.10);

    }

    50% {

        text-shadow:
            0 0 10px rgba(255,255,255,.28);

    }

    100% {

        text-shadow:
            0 0 4px rgba(255,255,255,.10);

    }

}


/* ================= EP BANNER ================= */

.ep-banner {

    padding:
        10px 14px;

    background:
        linear-gradient(
            90deg,
            #050505,
            #1a1a1a,
            #050505
        );

    color: #f5f1e8;

    border:
        1px solid #2a2a2a;

    border-top: 0;

    text-align: center;

    font-size: 12px;

    line-height: 1.5;

    letter-spacing: 1px;

}


/* ================= NAV ================= */

nav {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 1px;

    margin-top: 10px;

    background: #050505;

    border:
        1px solid #303030;

}


nav a {

    flex:
        1 1 120px;

    padding:
        13px 10px;

    background:
        linear-gradient(
            #1b1b1b,
            #050505
        );

    border-right:
        1px solid #303030;

    text-align: center;

    font-size: 11px;

    letter-spacing: 1px;

}


nav a:last-child {
    border-right: 0;
}


nav a:hover,
nav a.active {

    background:
        linear-gradient(
            #303030,
            #0a0a0a
        );

    box-shadow:
        inset 0 -2px 0 #aaa;

}


/* =========================================================
   MAIN GRID
   ========================================================= */

main {

    display: grid;

    grid-template-columns:

        minmax(170px, .8fr)

        minmax(0, 2fr)

        minmax(170px, .8fr);

    gap: 12px;

    margin-top: 12px;

    padding: 12px;

    background: #050505;

    border:
        1px solid #2a2a2a;

    border-radius: 10px;

    box-shadow:

        0 0 10px
        rgba(255,255,255,.12),

        0 0 24px
        rgba(255,255,255,.06),

        inset 0 0 18px
        rgba(255,255,255,.02);

}


/* ================= PANELS ================= */

.panel {

    margin-bottom: 12px;

    background:
        linear-gradient(
            #141414,
            #050505
        );

    border:
        1px solid #303030;

    border-radius: 8px;

    overflow: hidden;

    box-shadow:

        0 0 10px
        rgba(255,255,255,.08),

        inset 0 0 18px
        rgba(255,255,255,.02);

}


.panel:last-child {
    margin-bottom: 0;
}


/* ================= HEADINGS ================= */

.heading {

    margin: 0;

    padding:
        10px 12px 8px;

    background:
        linear-gradient(
            90deg,
            #0d0d0d,
            #2b2b2b,
            #0d0d0d
        );

    color: #faf7f0;

    border-bottom:
        1px solid #5f5f5f;

    font-size: 12px;

    letter-spacing: 1px;

    text-align: center;

    text-shadow:
        0 0 6px rgba(255,255,255,.18);

    animation:
        linyGlow 4s ease-in-out infinite;

}


.heading::after {

    content:
        ' ★ ★ ★ ';

    display: block;

    margin-top: 4px;

    color: #8f8f8f;

    font-size: 9px;

    letter-spacing: 4px;

}


/* ================= PANEL CONTENT ================= */

.panel-content {

    padding: 13px;

}


.panel-content p {

    margin:
        0 0 9px;

    line-height: 1.5;

    font-size: 13px;

}


.panel-content p:last-child {
    margin-bottom: 0;
}


/* ================= WELCOME ================= */

.welcome-text {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 23px !important;

    letter-spacing: 1px;

}


.muted {

    color: #888 !important;

    font-size: 11px !important;

}


.center {
    text-align: center;
}


/* ================= QUICK LINKS ================= */

.quick-links {

    display: grid;

    gap: 7px;

}


.quick-links a {

    padding:
        7px 8px;

    background:
        linear-gradient(
            135deg,
            #121212,
            #050505
        );

    border:
        1px solid #2f2f2f;

    border-radius: 5px;

    font-size: 11px;

}


.quick-links a:hover {

    border-color: #666;

}


/* =========================================================
   RELEASE
   ========================================================= */

.release {

    display: grid;

    grid-template-columns:
        minmax(150px, 38%)
        1fr;

    gap: 18px;

    padding: 18px;

}


.release-art {

    min-width: 0;

}


.release-cover {

    display: block;

    width: 100%;

    height: auto;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border: 1px solid #555;

    box-shadow:

        0 0 18px
        rgba(255,255,255,.12),

        0 0 4px
        rgba(255,255,255,.08);

}


.release-info {

    min-width: 0;

    align-self: center;

}


.release-label {

    margin-bottom: 5px;

    color: #888;

    font-size: 10px;

    letter-spacing: 3px;

}


.release-info h3,
.news-item h3 {

    margin:
        0 0 10px;

    color: #faf7f0;

    font-size: 16px;

    letter-spacing: 1px;

}


.release-info p {

    color: #c9c4ba;

    line-height: 1.5;

}


/* ================= BUTTONS ================= */

.buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 15px;

}


.button {

    display: inline-block;

    padding:
        9px 12px;

    background:
        linear-gradient(
            #303030,
            #080808
        );

    border:
        1px solid #555;

    font-size: 10px;

    letter-spacing: 1px;

    text-align: center;

}


.button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 0 10px
        rgba(255,255,255,.12);

}


.button.secondary {

    background: #090909;

    border-color: #333;

}


/* =========================================================
   NEWS
   ========================================================= */

.news {

    padding:
        5px 15px;

}


.news-item {

    display: grid;

    grid-template-columns:
        105px 1fr;

    gap: 15px;

    padding:
        14px 0;

    border-bottom:
        1px solid #292929;

}


.news-item:last-child {
    border-bottom: 0;
}


.date {

    color: #777;

    font-size: 10px;

    letter-spacing: 1px;

}


.news-item p {

    margin: 0;

    color: #aaa;

    font-size: 12px;

    line-height: 1.5;

}


/* ================= LINKS ================= */

.link-buttons {

    display: grid;

    gap: 6px;

}


.link-buttons a {

    display: block;

    padding: 9px;

    background:
        linear-gradient(
            135deg,
            #121212,
            #050505
        );

    border:
        1px solid #2f2f2f;

    border-radius: 6px;

    font-size: 11px;

    text-align: center;

}


.link-buttons a:hover {

    border-color: #666;

    background: #171717;

}


/* ================= SITE BUTTON ================= */

.button-panel {

    text-align: center;

}


.site-button {

    width: 88px;

    min-height: 31px;

    margin: 0 auto;

    padding: 4px;

    background:
        linear-gradient(
            #292929,
            #050505
        );

    border:
        1px solid #777;

    box-shadow:
        0 0 8px
        rgba(255,255,255,.1);

    color: #eee;

    font-size: 10px;

    font-weight: bold;

    line-height: 11px;

}


.site-button small {

    display: block;

    color: #888;

    font-size: 7px;

}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

    margin-top: 12px;

    padding: 14px;

    color: #777;

    text-align: center;

    font-size: 10px;

    letter-spacing: 1px;

    opacity: .7;

}


footer div {

    margin: 4px 0;

}


/* =========================================================
   DIGICAM EFFECT
   ========================================================= */

.scanlines {

    position: fixed;

    z-index: 9999;

    inset: 0;

    pointer-events: none;

    background-image:

        radial-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size: 3px 3px;

    mix-blend-mode: screen;

    opacity: .10;

}


/* ================= SELECTION ================= */

::selection {

    background: #f5f1e8;

    color: #000;

}


/* ================= SCROLLBAR ================= */

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: #0a0a0a;
}


::-webkit-scrollbar-thumb {

    background: #4a4a4a;

    border-radius: 10px;

}


::-webkit-scrollbar-thumb:hover {
    background: #6a6a6a;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    main {

        grid-template-columns:

            minmax(150px, .7fr)

            minmax(0, 1.8fr);

    }


    .right-column {

        grid-column:
            1 / -1;

        display: grid;

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

        gap: 12px;

    }


    .right-column .panel {
        margin-bottom: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 650px) {


    .site {

        width:
            calc(100% - 12px);

        margin:
            6px auto;

    }


    /* STATUS */

    .status-bar {

        min-height: 30px;

        padding:
            6px 9px;

        font-size: 9px;

        letter-spacing: .5px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


    /* HERO */

    .hero-text {

        padding:
            36px 12px 32px;

    }


    .eyebrow {

        font-size: 8px;

        letter-spacing: 1.5px;

    }


    .hero h1 {

        font-size:
            clamp(
                52px,
                19vw,
                90px
            );

        letter-spacing: 4px;

    }


    .tagline {

        margin-top: 17px;

        font-size: 9px;

        letter-spacing: 3px;

    }


    /* EP */

    .ep-banner {

        padding:
            8px 9px;

        font-size: 9px;

        letter-spacing: .5px;

    }


    /* NAV */

    nav {

        display: grid;

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

    }


    nav a {

        min-width: 0;

        padding:
            11px 5px;

        border-right: 0;

        font-size: 9px;

    }


    /* MAIN */

    main {

        display: flex;

        flex-direction: column;

        gap: 9px;

        margin-top: 9px;

        padding: 7px;

        border-radius: 8px;

    }


    .left-column {
        order: 2;
    }


    .center-column {
        order: 1;
    }


    .right-column {

        order: 3;

        display: block;

    }


    /* PANELS */

    .panel {

        margin-bottom: 9px;

        border-radius: 7px;

    }


    .heading {

        padding:
            9px 8px 7px;

        font-size: 10px;

    }


    .heading::after {

        font-size: 8px;

        letter-spacing: 2px;

    }


    .panel-content {

        padding: 11px;

    }


    .panel-content p {

        font-size: 12px;

    }


    /* RELEASE */

    .release {

        grid-template-columns: 1fr;

        gap: 13px;

        padding: 12px;

    }


    .release-art {

        width:
            min(
                72vw,
                260px
            );

        margin:
            0 auto;

    }


    .release-cover {

        width: 100%;

        height: auto;

        aspect-ratio: 1 / 1;

        object-fit: cover;

    }


    .release-info h3 {

        font-size: 14px;

    }


    .buttons {

        display: grid;

        grid-template-columns: 1fr;

    }


    .button {

        width: 100%;

    }


    /* NEWS */

    .news-item {

        grid-template-columns: 1fr;

        gap: 5px;

        padding:
            12px 0;

    }


    .date {

        font-size: 9px;

    }


    .news-item h3 {

        font-size: 13px;

    }


    /* FOOTER */

    footer {

        padding: 10px 5px;

        font-size: 8px;

    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media screen and (max-width: 380px) {


    .site {

        width:
            calc(100% - 8px);

    }


    .hero h1 {

        font-size: 48px;

    }


    nav {

        grid-template-columns: 1fr;

    }


    nav a {

        padding: 10px;

    }


    .ep-banner {

        font-size: 8px;

    }


    main {

        padding: 5px;

    }


    .panel-content {

        padding: 9px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {

        animation: none !important;

        transition: none !important;

    }

}