:root{
    --gold-accent: #FFD700;
    --primary-black: #0d0d0d;
    --secondary-black: #141414;
    --muted: #bdbdbd;
    --glass: rgba(255,255,255,0.04);
    --transition: 320ms;
    --max-width: 1200px;
    --radius: 8px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(180deg,#060606 0%, #0d0d0d 100%);
    color: #efefef;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    scroll-behavior:smooth;
}

/* HEADER */
.magazine-cover{
    padding:36px 6%;
    background: linear-gradient(90deg, rgba(255,215,0,0.02), rgba(0,0,0,0.0));
    border-bottom: 6px solid rgba(255,215,0,0.06);
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.cover-masthead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    max-width:var(--max-width);
    margin:0 auto;
}

.brand{display:flex;gap:10px;align-items:center}
.logo-text{font-size:1.4rem;font-weight:900;letter-spacing:1px;color:#fff}
.logo-gold{font-size:1.4rem;font-weight:900;color:var(--gold-accent)}
.date-text{font-size:0.85rem;color:var(--muted)}

/* Hero title */
.header-content{max-width:var(--max-width);margin:18px auto 0;padding:0 6%;}
.hero-title{
    font-size:clamp(1.6rem, 3.8vw, 2.8rem);
    margin:6px 0;
    font-weight:900;
    letter-spacing:0.6px;
    opacity:0;
    transform:translateY(10px);
    transition: all var(--transition) ease;
}
.reveal.in-view .hero-title, .reveal.in-view .sub-text { opacity:1; transform:none; }
.glow{
    background: linear-gradient(90deg, var(--gold-accent), #fff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    display:inline-block;
    text-shadow:0 4px 18px rgba(255,215,0,0.08);
}

/* subtitle */
.sub-text{color:var(--muted);font-size:1rem;margin-top:6px;opacity:0;transform:translateY(6px);transition:all var(--transition)}
.motto{margin-top:10px;color:var(--muted);font-weight:700}

/* LAYOUT CONTAINER */
.container{
    max-width:var(--max-width);
    margin:48px auto;
    padding:0 6%;
    display:grid;
    grid-template-columns: 1fr;
    gap:28px;
}

/* Card base */
.card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    border:1px solid rgba(255,215,0,0.06);
    padding:22px;
    border-radius:10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6);
    transition: transform var(--transition), box-shadow var(--transition);
    transform-style: preserve-3d;
    will-change: transform;
}

/* reveal animation */
.reveal{opacity:0;transform:translateY(18px);transition:all 520ms ease}
.reveal.in-view{opacity:1;transform:none}

/* PROFILE FEATURE */
.profile-feature{
    display:flex;
    gap:22px;
    align-items:center;
    flex-wrap:wrap;
}

.profile-left{flex:0 0 260px;display:flex;justify-content:center}
.profile-right{flex:1;min-width:240px}

/* Profile image container */
.profile-image-container{
    width:260px;height:260px;border-radius:12px;overflow:hidden;
    border:4px solid rgba(255,215,0,0.16);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 0 40px rgba(255,215,0,0.03);
    transition: transform var(--transition);
    background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06));
    display:flex;align-items:center;justify-content:center;
}
.profile-image-container img{
    width:110%;height:110%;object-fit:cover;transition:transform 480ms ease;
    transform-origin:center;
    display:block;
}

/* Hover parallax + card lift */
.profile-image-container:hover{transform:translateY(-6px) rotate(-0.25deg) scale(1.01)}
.card:hover{transform:translateY(-6px) rotate(0.01deg); box-shadow: 0 20px 40px rgba(0,0,0,0.7)}

/* text */
.section-title{font-weight:900;display:inline-block;margin:0 0 12px 0;font-size:1.1rem;border-bottom:3px solid rgba(255,215,0,0.06);padding-bottom:8px}
.gold-text{color:var(--gold-accent)}
.feature-tag{display:inline-block;margin-bottom:14px;padding:6px 10px;background:var(--gold-accent);color:#0d0d0d;font-weight:700;border-radius:6px;font-size:0.85rem}

/* bio & stats */
.bio-text{color:var(--muted);margin:10px 0;font-size:1rem}
.stats-mini{display:flex;gap:14px;margin-top:12px}
.stat-mini-item{background:var(--glass);padding:10px 14px;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start}
.stat-num{font-weight:900;font-size:1.1rem}
.stat-label{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px}

/* actions */
.action-row{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.btn{border:0;padding:10px 14px;border-radius:8px;font-weight:700;cursor:pointer;background:transparent;color:inherit;display:inline-flex;align-items:center;gap:8px}
.btn.primary{background:var(--gold-accent);color:#111;box-shadow: 0 8px 18px rgba(255,215,0,0.08)}
.btn.ghost{border:1px solid rgba(255,255,255,0.06)}

/* SQUAD LIST */
.squad-list-classic .card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.squad-list .role-group{padding:12px;background:rgba(255,255,255,0.01);margin-bottom:10px;border-left:4px solid rgba(255,215,0,0.06);border-radius:6px}
.role-group i{margin-right:8px;color:var(--gold-accent)}
.main-role{font-weight:700;color:#fff}

/* EDITORIAL GRID */
.editorial-box .commentary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.comment-item{padding:14px;border-radius:8px}
.comment-dark-bg{background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.12));border:1px solid rgba(255,255,255,0.03)}
.comment-light-bg{background:var(--gold-accent);color:#111;font-weight:700}

/* FOOTER */
.footer-section{margin-top:28px;padding:22px;border-top:4px solid rgba(255,215,0,0.06);background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:var(--max-width);margin:0 auto;padding:0 6%}
.footer-inner p{color:var(--muted);margin:0}
.socials a{margin-left:10px;color:var(--muted);text-decoration:none;font-size:1.05rem;transition:color var(--transition)}
.socials a:hover{color:var(--gold-accent)}

/* BACK TO TOP */
#backToTop{
    position:fixed;right:18px;bottom:18px;z-index:40;background:var(--gold-accent);color:#0d0d0d;border:0;padding:12px;border-radius:12px;opacity:0;transform:translateY(10px);transition:all 300ms;box-shadow:0 8px 20px rgba(0,0,0,0.6);cursor:pointer;
}
#backToTop.visible{opacity:1;transform:none}
#backToTop i{font-size:14px}

/* RESPONSIVE */
@media (max-width:1000px){
    .editorial-box .commentary-grid{grid-template-columns:repeat(2,1fr)}
    .profile-left{flex:0 0 210px}
    .profile-image-container{width:210px;height:210px}
}

@media (max-width:700px){
    .cover-masthead{flex-direction:column;align-items:flex-start;gap:8px}
    .header-content{padding:0 4%}
    .container{padding:0 4%}
    .profile-feature{flex-direction:column;align-items:center;text-align:center}
    .profile-left{flex:auto}
    .profile-right{width:100%}
    .editorial-box .commentary-grid{grid-template-columns:1fr}
    .card{padding:16px}
    .profile-image-container{width:180px;height:180px}
    .hero-title{font-size:1.6rem}
}

/* small tweaks */
a{color:inherit}