/* =====================================================
   TRIBUTE PORTFOLIO
   Street Art • Doodles • Alternative Rock Culture
   ===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --paper:#f2efe8;
    --paper-dark:#e7e1d6;

    --ink:#111111;
    --dark:#0b0b0b;

    --red:#cf2e2e;
    --yellow:#e8c547;

    --gray:#555;

    --shadow:6px 6px 0 #111;
}

/* =====================================================
   BASE
   ===================================================== */

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    "Arial Black",
    Arial,
    sans-serif;

    background:var(--paper);

    color:var(--ink);

    overflow-x:hidden;

    position:relative;

    min-height:100vh;
}

/* Poster wall texture */

body::before{

    content:"";

    position:fixed;
    inset:0;

    background:

        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 90px,
            rgba(0,0,0,.02) 90px,
            rgba(0,0,0,.02) 92px
        ),

        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 120px,
            rgba(0,0,0,.015) 120px,
            rgba(0,0,0,.015) 122px
        );

    pointer-events:none;

    z-index:-2;
}

/* Doodle symbols */

body::after{

    content:"★ ☠ ⚡ ♫ ✦";

    position:fixed;

    bottom:20px;
    right:25px;

    font-size:1.6rem;

    opacity:.08;

    transform:rotate(-8deg);

    pointer-events:none;

    z-index:-1;
}

/* =====================================================
   HEADER
   ===================================================== */

header{

    position:sticky;
    top:0;

    z-index:999;

    background:rgba(242,239,232,.95);

    backdrop-filter:blur(8px);

    border-bottom:4px solid black;
}

.navbar{

    max-width:1300px;

    margin:auto;

    padding:20px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{

    text-decoration:none;

    color:var(--ink);

    font-size:1.6rem;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:3px;

    transform:rotate(-1deg);

    position:relative;
}

/*.logo::after{

    content:" ★";

    color:var(--red);
}*/

.nav-links{

    list-style:none;

    display:flex;

    gap:24px;
}

.nav-links a{

    text-decoration:none;

    color:var(--ink);

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1px;

    padding:8px 12px;

    transition:.2s;
}

.nav-links a:hover{

    background:black;

    color:white;
}

.nav-links .active{

    background:var(--red);

    color:white;
}

.menu-btn{

    display:none;

    border:none;

    background:none;

    font-size:2rem;

    cursor:pointer;
}

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

.hero{

    max-width:1200px;

    margin:auto;

    text-align:center;

    padding:140px 20px 100px;
}

.subtitle{

    display:inline-block;

    background:black;

    color:white;

    padding:10px 18px;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.8rem;

    margin-bottom:35px;

    transform:rotate(-2deg);
}

.hero h1{

    font-size:clamp(4rem,12vw,10rem);

    line-height:.85;

    text-transform:uppercase;

    letter-spacing:-3px;

    margin-bottom:35px;

    position:relative;
}

.hero h1::after{

    content:"⚡";

    position:absolute;

    top:-25px;
    right:10%;

    color:var(--red);

    font-size:3rem;

    transform:rotate(15deg);
}

.hero-text{

    max-width:750px;

    margin:auto;

    font-size:1.2rem;

    line-height:1.8;

    font-family:Arial, sans-serif;

    font-weight:500;
}

.cta{

    display:inline-block;

    margin-top:45px;

    padding:18px 35px;

    text-decoration:none;

    background:var(--yellow);

    color:black;

    border:3px solid black;

    text-transform:uppercase;

    font-weight:900;

    box-shadow:var(--shadow);

    transition:.2s;
}

.cta:hover{

    transform:translate(5px,5px);

    box-shadow:none;
}

/* =====================================================
   FEATURED WORKS
   ===================================================== */

.featured{

    max-width:1300px;

    margin:auto;

    padding:100px 20px;
}

.section-heading{

    text-align:center;

    margin-bottom:60px;
}

.section-heading h2{

    display:inline-block;

    background:var(--red);

    color:white;

    padding:12px 28px;

    border:3px solid black;

    transform:rotate(-2deg);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:2.4rem;
}

.section-heading p{

    margin-top:20px;

    font-family:Arial, sans-serif;

    font-weight:600;
}

.gallery{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:35px;
}

.artwork{

    position:relative;

    background:white;

    border:4px solid black;

    box-shadow:var(--shadow);

    overflow:hidden;

    transition:.3s;
}

/* masking tape effect */

.artwork::before{

    content:"";

    position:absolute;

    width:90px;
    height:22px;

    background:
    rgba(255,255,220,.75);

    top:-10px;

    left:50%;

    transform:
    translateX(-50%)
    rotate(-4deg);

    z-index:2;
}

.artwork:nth-child(odd){

    transform:rotate(-1deg);
}

.artwork:nth-child(even){

    transform:rotate(1deg);
}

.artwork:hover{

    transform:
    rotate(0deg)
    scale(1.03);
}

.artwork img{

    width:100%;

    display:block;
}

/* =====================================================
   TRIBUTE
   ===================================================== */

.tribute{

    background:var(--paper-dark);

    border-top:5px solid black;
    border-bottom:5px solid black;

    padding:120px 20px;
}

.tribute-content{

    max-width:900px;

    margin:auto;

    text-align:center;
}

.label{

    display:inline-block;

    background:black;

    color:white;

    padding:10px 18px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.8rem;
}

blockquote{

    margin:40px 0;

    font-size:clamp(
        2.5rem,
        5vw,
        5rem
    );

    font-weight:900;

    line-height:1;

    text-transform:uppercase;
}

.tribute p{

    font-family:Arial, sans-serif;

    font-size:1.1rem;

    line-height:1.8;
}

/* =====================================================
   INFO CARDS
   ===================================================== */

.info-grid{

    max-width:1200px;

    margin:auto;

    padding:100px 20px;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}

.info-card{

    background:white;

    border:4px solid black;

    padding:40px;

    box-shadow:var(--shadow);

    position:relative;
}

.info-card:nth-child(1){

    transform:rotate(-1deg);
}

.info-card:nth-child(2){

    transform:rotate(1deg);
}

.info-card:nth-child(3){

    transform:rotate(-0.5deg);
}

.info-card h3{

    text-transform:uppercase;

    font-size:1.7rem;

    margin-bottom:15px;
}

.info-card p{

    font-family:Arial, sans-serif;

    line-height:1.8;
}

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

footer{

    background:var(--dark);

    color:white;

    text-align:center;

    padding:80px 20px;
}

footer p:first-child{

    font-size:1.2rem;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:900;

    margin-bottom:12px;
}

.footer-note{

    opacity:.7;

    font-family:Arial, sans-serif;
}

/* =====================================================
   SCROLL ANIMATION
   ===================================================== */

.fade-in{

    opacity:0;

    transform:translateY(30px);

    transition:
    opacity .8s ease,
    transform .8s ease;
}

.fade-in.visible{

    opacity:1;

    transform:translateY(0);
}

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

@media (max-width:768px){

    .menu-btn{
        display:block;
    }

    .nav-links{

        display:none;

        position:absolute;

        top:80px;
        right:20px;

        flex-direction:column;

        background:white;

        padding:20px;

        border:4px solid black;

        box-shadow:var(--shadow);
    }

    .nav-links.show{
        display:flex;
    }

    .hero{

        padding-top:100px;
    }

    .hero h1{

        font-size:4rem;
    }

    .section-heading h2{

        font-size:1.8rem;
    }

    blockquote{

        font-size:2rem;
    }
}

/* =====================================================
ARCHIVE PAGE
===================================================== */

.archive-hero{


max-width:900px;

margin:auto;

text-align:center;

padding:130px 20px 80px;


}

.archive-label{


display:inline-block;

background:black;

color:white;

padding:10px 18px;

margin-bottom:30px;

transform:rotate(-2deg);

text-transform:uppercase;

letter-spacing:2px;


}

.archive-hero h1{


font-size:clamp(4rem,10vw,8rem);

margin-bottom:20px;

text-transform:uppercase;


}

.archive-hero p{


max-width:650px;

margin:auto;

line-height:1.8;

font-family:Arial, sans-serif;


}

.archive-grid{


max-width:1500px;

margin:auto;

padding:50px 20px 120px;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:40px;


}

.poster{


position:relative;

background:white;

border:4px solid black;

cursor:pointer;

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;


}

.poster:nth-child(odd){


transform:rotate(-1deg);


}

.poster:nth-child(even){


transform:rotate(1deg);


}

.poster:hover{


transform:
rotate(0deg)
scale(1.03);


}

.poster::before{


content:"";

position:absolute;

top:-10px;

left:50%;

transform:
translateX(-50%)
rotate(-4deg);

width:90px;

height:22px;

background:
rgba(255,255,220,.75);

z-index:2;


}

.poster img{


width:100%;

display:block;

pointer-events:none;

user-select:none;

-webkit-user-drag:none;


}

/* =====================================================
LIGHTBOX
===================================================== */

.lightbox{


position:fixed;

inset:0;

background:rgba(0,0,0,.97);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

padding:40px;


}

.lightbox.active{


display:flex;


}

.lightbox-content{


display:flex;

flex-direction:column;

align-items:center;

max-width:95vw;

max-height:95vh;


}

#lightbox-image{


max-width:90vw;

max-height:75vh;

width:auto;

object-fit:contain;

border:4px solid white;

box-shadow:
0 0 60px rgba(0,0,0,.6);


}

.artwork-info{


width:min(900px,90vw);

text-align:center;

margin-top:25px;

color:white;


}

.artwork-info h2{


font-size:2rem;

text-transform:uppercase;

margin-bottom:10px;

letter-spacing:2px;


}

.artwork-info p{


line-height:1.8;

opacity:.85;

font-family:Arial, sans-serif;


}

.close-btn{


position:absolute;

top:20px;

right:30px;

border:none;

background:none;

color:white;

font-size:2rem;

cursor:pointer;


}

.prev-btn,
.next-btn{


position:absolute;

top:50%;

transform:translateY(-50%);

border:none;

background:none;

color:white;

font-size:5rem;

cursor:pointer;

opacity:.75;

transition:.2s;


}

.prev-btn{


left:30px;


}

.next-btn{


right:30px;


}

.prev-btn:hover,
.next-btn:hover{


opacity:1;


}

@media(max-width:768px){


.prev-btn,
.next-btn{

    font-size:3rem;
}

.artwork-info h2{

    font-size:1.4rem;
}


}

/* =====================================================
ABOUT PAGE
===================================================== */

.about-hero{


text-align:center;

padding:130px 20px 80px;


}

.about-label{


display:inline-block;

background:black;

color:white;

padding:10px 18px;

margin-bottom:25px;

transform:rotate(-2deg);

text-transform:uppercase;

letter-spacing:2px;


}

.about-hero h1{


font-size:clamp(4rem,10vw,8rem);

text-transform:uppercase;


}

.artist-section{


max-width:1200px;

margin:auto;

padding:40px 20px 120px;

display:grid;

grid-template-columns:
450px 1fr;

gap:80px;

align-items:center;


}

.artist-photo{


position:relative;

border:4px solid black;

box-shadow:var(--shadow);

background:white;


}

.artist-photo::before{


content:"";

position:absolute;

width:90px;
height:22px;

background:
rgba(255,255,220,.75);

top:-10px;

left:50%;

transform:
translateX(-50%)
rotate(-4deg);


}

.artist-photo img{


width:100%;

display:block;


}

.artist-bio h2{


font-size:3rem;

margin-bottom:25px;

text-transform:uppercase;


}

.artist-bio p{


margin-bottom:20px;

line-height:1.9;

font-family:Arial,sans-serif;


}

.influences{


padding:100px 20px;

background:var(--paper-dark);

border-top:4px solid black;
border-bottom:4px solid black;


}

.influences h2{


text-align:center;

margin-bottom:50px;

font-size:3rem;


}

.influences-grid{


max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:30px;


}

.influence-card{


background:white;

border:4px solid black;

padding:35px;

box-shadow:var(--shadow);


}

.influence-card h3{


margin-bottom:15px;

text-transform:uppercase;


}

.video-section{


max-width:1200px;

margin:auto;

padding:120px 20px;


}

.video-intro{


text-align:center;

margin-bottom:50px;


}

.video-intro h2{


font-size:3rem;

margin-bottom:15px;


}

.video-wrapper{


position:relative;

padding-bottom:56.25%;

height:0;

overflow:hidden;

border:4px solid black;

box-shadow:var(--shadow);


}

.video-wrapper iframe{


position:absolute;

top:0;
left:0;

width:100%;
height:100%;


}

.closing-note{


max-width:900px;

margin:auto;

text-align:center;

padding:100px 20px;


}

.closing-note blockquote{


font-size:clamp(
    2rem,
    5vw,
    4rem
);

margin-bottom:30px;

text-transform:uppercase;


}

.closing-note p{


font-family:Arial,sans-serif;

line-height:1.8;


}

@media(max-width:900px){


.artist-section{

    grid-template-columns:1fr;

    gap:40px;
}

.artist-photo{

    max-width:500px;

    margin:auto;
}


}

/* =====================================================
CONTACT PAGE
===================================================== */

.contact-hero{


text-align:center;

padding:130px 20px 80px;


}

.contact-label{


display:inline-block;

background:black;

color:white;

padding:10px 18px;

margin-bottom:25px;

transform:rotate(-2deg);

text-transform:uppercase;

letter-spacing:2px;


}

.contact-hero h1{


font-size:clamp(4rem,10vw,8rem);

text-transform:uppercase;

margin-bottom:15px;


}

.contact-hero p{


font-family:Arial,sans-serif;


}

.contact-card{


max-width:800px;

margin:0 auto 120px;

padding:50px;

background:white;

border:4px solid black;

box-shadow:var(--shadow);

position:relative;


}

.contact-card::before{


content:"";

position:absolute;

width:90px;
height:22px;

background:
rgba(255,255,220,.75);

top:-10px;

left:50%;

transform:
translateX(-50%)
rotate(-4deg);


}

.contact-card h2{


font-size:2.5rem;

text-transform:uppercase;

margin-bottom:25px;


}

.contact-card p{


line-height:1.9;

margin-bottom:18px;

font-family:Arial,sans-serif;


}

.contact-details{


margin-top:40px;

padding-top:30px;

border-top:3px solid black;


}

.contact-item{


margin-bottom:25px;


}

.contact-item span{


display:block;

font-size:.9rem;

font-weight:900;

text-transform:uppercase;

letter-spacing:2px;

margin-bottom:8px;


}

.contact-item a{


color:var(--red);

text-decoration:none;

font-size:1.1rem;

font-weight:700;


}

.contact-item a:hover{


text-decoration:underline;


}

.contact-note{


max-width:900px;

margin:auto;

text-align:center;

padding:0 20px 120px;


}

.contact-note blockquote{


font-size:clamp(
    2rem,
    4vw,
    3.5rem
);

text-transform:uppercase;

line-height:1.1;


}

@media(max-width:768px){


.contact-card{

    margin:0 20px 100px;

    padding:35px 25px;
}

.contact-card h2{

    font-size:2rem;
}


}