/* ==================================================
   EDITORIAL LABELS
================================================== */

.dj-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 14px;

    border-radius:999px;

    background:#fff;

    border:1px solid var(--dj-border);

    font-size:.85rem;

    font-weight:600;

    color:var(--dj-text);
}

.dj-label::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--dj-primary);
}

/* ==================================================
   TECH BADGES
================================================== */

.dj-badges{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:20px;
}

.dj-badge{

    padding:8px 14px;

    border-radius:999px;

    background:#f8fafc;

    border:1px solid var(--dj-border);

    font-size:.8rem;

    font-weight:600;

    transition:var(--transition);
}

.dj-badge:hover{

    background:var(--dj-primary);

    color:#fff;

    border-color:var(--dj-primary);
}

/* ==================================================
   MAGAZINE CARD
================================================== */

.dj-magazine-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:28px;

    border:1px solid rgba(0,0,0,.08);

    transition:all .45s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

.dj-magazine-card:hover{

    transform:
    translateY(-10px)
    rotate(-1deg);

    box-shadow:
    0 25px 60px rgba(0,0,0,.10);
}

.dj-magazine-card img{

    width:100%;

    display:block;
}

.dj-magazine-content{

    padding:28px;
}

.dj-magazine-content h3{

    margin-bottom:12px;
}

.dj-magazine-content p{

    margin-bottom:20px;
}

/* ==================================================
   PROJECT CARD
================================================== */

.dj-project-card{

    position:relative;
}

.dj-project-image{

    overflow:hidden;
}

.dj-project-image img{

    width:100%;

    transition:transform .8s ease;
}

.dj-project-card:hover img{

    transform:scale(1.08);
}

.dj-project-content small{

    display:block;

    margin-bottom:12px;

    color:var(--dj-primary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.1em;
}

.dj-project-content h3{

    margin-bottom:15px;
}

/* ==================================================
   SYSTEM CARD
================================================== */

.dj-system-card{

    position:relative;
}

.dj-system-card::after{

    content:"";

    position:absolute;

    top:-100px;

    right:-100px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(0,200,150,.15),
        transparent
    );
}

.dj-system-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    margin-bottom:25px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);
}

/* ==================================================
   VISUAL ARCHIVE
================================================== */

.dj-archive-card{

    background:#fff;

    position:relative;
}

.dj-archive-card::before{

    content:"";

    position:absolute;

    top:12px;

    right:12px;

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--dj-primary);

    z-index:10;
}

.dj-archive-image{

    overflow:hidden;
}

.dj-archive-image img{

    width:100%;

    display:block;

    transition:transform .8s ease;
}

.dj-archive-card:hover img{

    transform:scale(1.05);
}

.dj-archive-meta{

    background:#fff;
}

.dj-archive-category{

    display:inline-block;

    margin-bottom:10px;

    font-size:.75rem;

    font-weight:700;

    color:var(--dj-primary);

    text-transform:uppercase;

    letter-spacing:.08em;
}

.dj-archive-title{

    font-size:1.15rem;

    font-weight:700;

    margin-bottom:10px;
}

/* ==================================================
   MAGAZINE COVER
================================================== */

.dj-cover{

    position:relative;

    overflow:hidden;

    border-radius:32px;
}

.dj-cover-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.65),
        transparent
    );

    display:flex;

    align-items:flex-end;

    padding:40px;
}

.dj-cover-overlay h2{

    color:#fff;

    max-width:500px;
}

/* ==================================================
   EDITORIAL QUOTE
================================================== */

.dj-quote{

    max-width:900px;

    margin:auto;

    text-align:center;
}

.dj-quote blockquote{

    font-family:var(--font-heading);

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

    line-height:1.2;

    color:var(--dj-text);
}

.dj-quote cite{

    display:block;

    margin-top:30px;

    color:var(--dj-text-light);
}

/* ==================================================
   TIMELINE CARD
================================================== */

.dj-timeline-item{

    position:relative;

    width:45%;

    padding:35px;

    background:#fff;

    border-radius:24px;

    border:1px solid var(--dj-border);

    margin-bottom:60px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.05);
}

.dj-timeline-item:nth-child(even){

    margin-left:auto;
}

.dj-timeline-item h3{

    margin-bottom:10px;
}

.dj-timeline-item small{

    display:block;

    margin-bottom:15px;

    color:var(--dj-primary);

    font-weight:700;
}

/* ==================================================
   CONTACT CARD
================================================== */

.dj-contact-card{

    max-width:900px;

    margin:auto;

    padding:70px;

    border-radius:40px;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #f8fafc
    );

    border:1px solid var(--dj-border);

    box-shadow:
    0 25px 60px rgba(0,0,0,.06);
}

/* ==================================================
   PAPER TEXTURE
================================================== */

.dj-paper-texture{

    position:relative;
}

.dj-paper-texture::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.04;

    background-image:
    radial-gradient(
        #000 0.4px,
        transparent 0.4px
    );

    background-size:
    8px 8px;
}