:root{
    /* Page + cards */
    --page:#124232;              /* page background (lighter green) */
    --panel:#0c1c16;             /* cards (dark) */
    --panel-hover:#0e211a;

    /* Accents */
    --gold:#d4af37;
    --text:#e6e6e6;
    --muted:#cbd5d1;

    /* Reds */
    --red-700:#8a0000;           /* darker hover red */
    --red-600:#b30000;
    --red-500:#d11111;

    /* Effects */
    --shadow:rgba(0,0,0,.65);
    --glow:rgba(212,175,55,.35);
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;
    color:var(--text);
}

html{
    background:var(--page);
    scrollbar-width:thin;
    scrollbar-color:var(--red-600) var(--page);
}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:var(--page);box-shadow:inset 1px 1px 5px #000}
html::-webkit-scrollbar-thumb{background:linear-gradient(0deg,var(--red-600),#0f2a1e);border-radius:10px}
html::-webkit-scrollbar-thumb:hover{background:linear-gradient(0deg,var(--red-500),#1a563f)}

main{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:24px 12px;
    background:var(--page);
    text-align:center;
}

header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:100%;
    max-width:1000px;
    margin-top:80px;
    margin-bottom:10px;
}

h1{
    font-size:3.2rem;
    color:var(--gold);
    text-shadow:2px 2px 6px var(--shadow);
    letter-spacing:.5px;
}

/* ====== SECTIONS (transparent; normalized spacing) ====== */
.podgroup{
    width:100%;
    max-width:1000px;
    background:transparent;          /* no middle dark band */
    border-radius:18px;
    box-shadow:none;                  /* no section shadow */
    padding:0 32px 32px;              /* bottom padding = 32 */
    margin: auto 48px;            /* equal external spacing above & below */
}

/* Title with symmetric spacing and gold rules */
.group-title{
    position:relative;
    display:block;
    background:transparent;
    color:var(--gold);
    text-shadow:2px 2px 5px var(--shadow);
    font-size:2rem;
    margin:32px 0;                    /* equal lead-in/out around titles */
    padding:0;
}
.group-title::before,
.group-title::after{
    content:"";
    display:block;
    height:1px;
    background:rgba(212,175,55,.25);
    margin:14px 0;                    /* equal space above/below title text */
}

/* ====== GRIDS ====== */
.podgrid{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:28px;                         /* space between cards */
    margin:0 0 32px 0;                /* bottom space mirrors title’s top */
    background:transparent;
}

/* ====== CARDS ====== */
.pod{
    background:var(--panel);          /* only cards are dark */
    border-radius:16px;
    padding:38px 26px 36px;           /* extra top for badge clearance */
    box-shadow:
        0 12px 36px rgba(0,0,0,.40),
        inset 0 0 0 1px rgba(255,255,255,.03);
    transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;                /* enable badge positioning */
}

/* Card hover (restricted to grid content) */
.podgrid .pod:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 48px rgba(0,0,0,.55), 0 0 14px var(--glow);
    background:var(--panel-hover);
}

/* ====== BADGE (🎙️ / 🔊) ====== */
.podbadge{
    position:absolute;
    top:12px;
    right:14px;
    z-index:2;
    padding:.28rem .6rem;
    border-radius:999px;
    font-size:clamp(.9rem,1.6vw,1.1rem);
    line-height:1;
    background:rgba(18,66,50,.38);
    border:1px solid rgba(212,175,55,.28);
    box-shadow:0 1px 6px rgba(0,0,0,.25);
    pointer-events:none;
    backdrop-filter:saturate(115%) blur(1.5px);
}
.podgrid .pod:hover .podbadge{
    background:rgba(18,66,50,.30);
    border-color:rgba(212,175,55,.22);
    box-shadow:0 1px 5px rgba(0,0,0,.2);
}
@media (max-width:480px){
    .podbadge{display:none}
}

/* ====== THUMB ====== */
.podthumb{
    width:140px;
    height:140px;
    border-radius:20%;
    overflow:hidden;
    border:2px solid var(--gold);
    box-shadow:0 4px 18px rgba(212,175,55,.20);
    margin-bottom:14px;
    background:#0a1a14;
}
.podthumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ====== TEXT ====== */
.pod h2{
    font-size:clamp(1.6rem,4vw,2.6rem);
    line-height:1.2;
    color:var(--gold);
    text-shadow:2px 2px 5px var(--shadow);
    margin-bottom:10px;
}

h1 {
    margin-bottom: 40px;
}

h2.group-title {
    margin-bottom: 80px;
}

.meta{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    opacity:.95;
    margin-bottom:10px;
}
.meta p{
    font-size:clamp(.95rem,1.2vw,1.05rem);
    text-shadow:1px 1px 3px var(--shadow);
    line-height:1.5;
}

.desc{
    max-width:60ch;
    font-size:clamp(.95rem,1.2vw,1.05rem);
    line-height:1.45;
    text-shadow:1px 1px 3px var(--shadow);
    margin:10px auto 12px;
}

/* ====== BUTTONS ====== */
.links{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:12px 14px;
    align-items:center;
    justify-content:center;
    margin-top:12px;
    margin-bottom:6px;
    width:100%;
    max-width:620px;
}
.pill{
    --pill-pad:.78rem 1.1rem;
    --pill-fs:1rem;
    border:2px solid var(--red-600);
    background:rgba(179,0,0,.12);
    padding:var(--pill-pad);
    border-radius:999px;
    font-weight:700;
    letter-spacing:.2px;
    text-decoration:none;
    box-shadow:0 2px 10px rgba(179,0,0,.15);
    transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    white-space:normal;
    word-break:break-word;
    text-align:center;
    width:auto;
    max-width:100%;
}
.podgrid .pill:hover,
.podgrid .pill:focus-visible{
    background-color:var(--red-700);
    border-color:var(--gold);
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 18px rgba(179,0,0,.35), 0 0 10px rgba(212,175,55,.25);
    color:#fff;
    outline:none;
}
.pill svg{width:1.05em;height:1.05em;vertical-align:-2px;margin-right:.35em}
.lg{--pill-fs:1.05rem}
.md{--pill-fs:.98rem}
.sm{--pill-fs:.92rem;opacity:.95}

/* ====== FOOTER ====== */
.footer{
    width:100%;
    max-width:1000px;
    margin: 26px40px;
    color:var(--muted);
    background:transparent;
    border-radius:18px;
    box-shadow:none;
}
.footer::before,
.footer::after{
    content:"";
    display:block;
    height:1px;
    background:rgba(212,175,55,.25);
    margin:14px 0;
}