:root {
    --black:#050505;
    --black2:#0b0b0b;
    --panel:#111;
    --white:#f7f4ed;
    --muted:#b8b6b0;
    --gold:#d8ad53;
    --gold-light:#efc86c;
    --border:#292929;
}

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

html {
    scroll-behavior:smooth;
}

body {
    background:var(--black);
    color:var(--white);
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.5;
}

a {
    color:inherit;
    text-decoration:none;
}

img {
    width:100%;
    display:block;
}

.container {
    width:min(1500px,94%);
    margin:auto;
}


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

.site-header {
    height:82px;
    display:flex;
    align-items:center;
    border-bottom:1px solid #222;
    background:#050505;
    position:sticky;
    top:0;
    z-index:1000;
}

.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.logo {
    font-size:27px;
    font-weight:900;
    letter-spacing:-1.5px;
    white-space:nowrap;
}

.logo span {
    color:var(--gold);
}

.logo small {
    display:block;
    font-size:8px;
    letter-spacing:4px;
    font-weight:500;
    margin-top:-2px;
    color:#d6d6d6;
}

.main-nav {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    flex:1;
}

.main-nav a {
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    transition:.2s;
}

.main-nav a:hover {
    color:var(--gold);
}

.taptunes-button {
    border:1px solid var(--gold);
    padding:12px 19px;
    color:var(--gold);
    font-size:10px;
    letter-spacing:1.5px;
    font-weight:800;
}


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

.hero {
    min-height:400px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.95) 0%,
            rgba(0,0,0,.78) 32%,
            rgba(0,0,0,.25) 65%,
            rgba(0,0,0,.35) 100%
        ),
        url('/images/hero-artist.jpg') center/cover no-repeat;
}

.hero-content {
    width:100%;
    padding:40px 0;
}

.hero h1 {
    font-size:clamp(44px,4.4vw,68px);
    line-height:1.02;
    letter-spacing:-2.5px;
    font-weight:700;
    max-width:none;
    margin:0 0 28px;
}

.hero h1 span {
    color:var(--gold-light);
}

.hero p {
    font-size:17px;
    line-height:1.6;
    max-width:760px;
    color:#e1e1e1;
    margin:0 0 32px;
}

.gold-button {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    background: var(--gold-light);
    color: #111;
    padding: 16px 26px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .6px;
    text-decoration: none;
    transition: .2s;
}

.gold-button:hover {
    transform: translateY(-2px);
    background: #f6d47e;
}

/* =========================================================
   GENERAL SECTION
   ========================================================= */

.section {
    padding:55px 0;
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.section-heading h2 {
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:5px;
}

.section-heading h2:before {
    content:"";
    width:40px;
    height:2px;
    background:var(--gold);
    display:inline-block;
    margin-right:18px;
    vertical-align:middle;
}

.section-heading a {
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-heading a:hover {
    color:var(--gold);
}


/* =========================================================
   TOP STORIES
   ========================================================= */

.story-grid {
    display:grid;
    grid-template-columns:2.1fr .75fr .75fr .75fr;
    gap:16px;
}

.story {
    position:relative;
    min-height:420px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#111;
}

.story img {
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    transition:.5s;
}

.story:hover img {
    transform:scale(1.025);
}

.story:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        transparent 20%,
        rgba(0,0,0,.42) 48%,
        rgba(0,0,0,.98) 100%
    );
}

.story-content {
    position:absolute;
    z-index:2;
    bottom:0;
    padding:22px;
}

.story:first-child .story-content {
    padding:28px;
}

.story-category {
    display:inline-block;
    background:var(--gold);
    color:#111;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    padding:5px 9px;
    margin-bottom:10px;
}

.story h3 {
    font-size:23px;
    line-height:1.05;
    margin-bottom:9px;
}

.story:first-child h3 {
    font-size:34px;
}

.story p {
    color:#ddd;
    font-size:13px;
    line-height:1.45;
}


/* =========================================================
   EXPLORE BY TOPIC
   ========================================================= */

.topics-section {
    padding:15px 0 60px;
}

.category-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:13px;
}

.category {
    position:relative;
    height:235px;
    border:1px solid var(--border);
    overflow:hidden;
}

.category img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.category:hover img {
    transform:scale(1.05);
}

.category:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        transparent 18%,
        rgba(0,0,0,.97)
    );
}

.category-copy {
    position:absolute;
    left:15px;
    right:15px;
    bottom:15px;
    z-index:2;
}

.category h3 {
    text-transform:uppercase;
    font-size:16px;
    margin-bottom:4px;
}

.category p {
    font-size:10px;
    color:#ddd;
}

.explore {
    color:var(--gold-light);
    text-transform:uppercase;
    font-size:9px;
    font-weight:900;
    display:block;
    margin-top:9px;
}


/* =========================================================
   ABOUT
   Simplified — no repetitive quote/crowd section
   ========================================================= */

.about-section {
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:#090909;
}

.about-inner {
    min-height:330px;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
}

.about-copy {
    padding:60px 70px 60px 0;
}

.about-label {
    color:var(--gold-light);
    font-size:10px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.about-copy h2 {
    font-size:35px;
    line-height:1;
    text-transform:uppercase;
    margin-bottom:15px;
}

.about-copy p {
    font-size:14px;
    color:#eee;
    line-height:1.55;
    margin-bottom:20px;
}

.text-link {
    color:var(--gold-light);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
}

.about-image {
    height:100%;
    min-height:330px;
    background:
        linear-gradient(
            90deg,
            #090909 0%,
            rgba(9,9,9,.45) 20%,
            rgba(0,0,0,.08) 100%
        ),
        url('/images/about-industry.jpg') center/cover no-repeat;
}


/* =========================================================
   POWERED BY TAPTUNES
   ========================================================= */

.powered-section {
    min-height:220px;
    display:flex;
    align-items:center;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.35) 50%,
            rgba(0,0,0,.88)
        ),
        url('/images/nashville-skyline.jpg') center/cover no-repeat;
}

.powered-inner {
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.powered-box {
    max-width:510px;
    padding:35px 0;
}

.powered-box .label {
    color:var(--gold-light);
    font-size:10px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.powered-box h2 {
    font-size:35px;
    line-height:1;
    text-transform:uppercase;
    margin-bottom:15px;
}

.powered-box p {
    font-size:14px;
    color:#eee;
    line-height:1.55;
    margin-bottom:20px;
}


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

footer {
    padding:38px 0 24px;
    border-top:1px solid #222;
    background:#050505;
}

.footer-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:28px;
}

.footer-nav {
    display:flex;
    gap:21px;
    font-size:9px;
    text-transform:uppercase;
    font-weight:800;
}

.footer-nav a:hover {
    color:var(--gold);
}

.footer-bottom {
    border-top:1px solid #242424;
    padding-top:18px;
    display:flex;
    justify-content:space-between;
    font-size:9px;
    color:#999;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px) {

    .main-nav {
        display:none;
    }

    .story-grid {
        grid-template-columns:1fr 1fr;
    }

    .category-grid {
        grid-template-columns:repeat(3,1fr);
    }

    .about-inner {
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:700px) {

    .site-header {
        height:70px;
    }

    .logo {
        font-size:23px;
    }

    .taptunes-button {
        display:none;
    }

    .hero {
        min-height:570px;
        background-position:62% center;
    }

    .hero-content {
        padding:65px 0;
    }

    .hero h1 {
        font-size:44px;
        letter-spacing:-1.5px;
        max-width:400px;
    }

    .hero p {
        font-size:15px;
        max-width:400px;
    }

    .story-grid {
        grid-template-columns:1fr;
    }

    .story {
        min-height:370px;
    }

    .category-grid {
        grid-template-columns:1fr 1fr;
    }

    .category {
        height:220px;
    }

    .about-inner {
        grid-template-columns:1fr;
    }

    .about-copy {
        padding:50px 0;
    }

    .about-image {
        min-height:280px;
    }

    .powered-section {
        min-height:300px;
    }

    .powered-inner {
        justify-content:flex-start;
    }

    .powered-box {
        max-width:420px;
    }

    .footer-nav {
        display:none;
    }
}

@media(max-width:480px) {

    .category-grid {
        grid-template-columns:1fr;
    }

    .category {
        height:245px;
    }

    .section-heading {
        align-items:flex-start;
        gap:20px;
    }

    .section-heading a {
        display:none;
    }
}

/* =========================================================
   NASHVILLE-FIRST TOPIC LANDING PAGES
   Compact editorial hero — intentionally separate from
   the large cinematic homepage .hero
   ========================================================= */

.topic-hero {
    min-height:280px;
    display:flex;
    align-items:center;
    padding:0;
    border-bottom:1px solid var(--border);
    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(216,173,83,.10),
            transparent 32%
        ),
        #080808;
}

.topic-hero-inner {
    width:min(1500px,94%);
    max-width:none;
    margin:0 auto;
    padding:52px 0 46px;
    text-align:left;
}

.topic-kicker {
    color:var(--gold);
    font-size:10px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:13px;
}

.topic-hero h1 {
    max-width:1000px;
    font-size:clamp(42px,5vw,68px);
    line-height:.96;
    letter-spacing:-2.5px;
    margin-bottom:16px;
}

.topic-hero p {
    max-width:680px;
    margin:0;
    color:#c9c9c9;
    font-size:17px;
    line-height:1.55;
}

.archive-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.archive-card {
    border:1px solid var(--border);
    background:#0c0c0c;
    overflow:hidden;
}

.archive-card img {
    height:230px;
    object-fit:cover;
}

.archive-copy {
    padding:22px;
}

.archive-copy h2 {
    font-size:24px;
    line-height:1.08;
    margin:5px 0 10px;
}

.archive-copy p {
    color:#aaa;
    font-size:14px;
    line-height:1.55;
}

.topic-empty {
    padding:70px;
    max-width:850px;
    border:1px solid var(--border);
    background:#0a0a0a;
}

.topic-empty h2 {
    font-size:38px;
    margin-bottom:14px;
}

.topic-empty p {
    color:#aaa;
    max-width:650px;
    line-height:1.65;
}

@media(max-width:900px) {
    .archive-grid {
        grid-template-columns:1fr 1fr;
    }

    .main-nav {
        gap:14px;
    }

    .main-nav a {
        font-size:9px;
    }
}

@media(max-width:650px) {
    .archive-grid {
        grid-template-columns:1fr;
    }

    .topic-empty {
        padding:35px;
    }

    .topic-hero {
        min-height:230px;
    }

    .topic-hero-inner {
        padding:40px 0 36px;
    }

    .topic-hero h1 {
        font-size:clamp(38px,11vw,52px);
        letter-spacing:-1.5px;
    }

    .topic-hero p {
        font-size:15px;
        line-height:1.5;
    }
}

/* =========================================================
   STORY ARCHIVE + ARTICLE PAGES
   ========================================================= */

/* Archive cards */
a.archive-card {
    display:block;
    color:inherit;
    text-decoration:none;
    transition:.2s;
}

a.archive-card:hover {
    transform:translateY(-3px);
    border-color:#4a3a1c;
}


/* =========================================================
   ARTICLE PAGE
   ========================================================= */

.article-page {
    padding:70px 0 90px;
}


/* Article headline area */
.article-header {
    max-width:980px;
}

.article-header h1 {
    font-size:clamp(46px,6vw,82px);
    line-height:.98;
    letter-spacing:-3px;
    max-width:950px;
    margin:16px 0 22px;
}

.article-deck {
    font-size:21px;
    line-height:1.55;
    color:#c9c9c9;
    max-width:800px;
}

.article-meta {
    margin-top:24px;
    color:#888;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.3px;
}


/* =========================================================
   ARTICLE HERO IMAGE

   EDIT THESE VALUES TO CHANGE IMAGE SIZE:

   max-width = maximum image width
   height    = image height
   ========================================================= */

.article-hero {
    max-width:1100px;
    margin:40px auto 0;
}

.article-hero img {
    width:100%;

    /* EDIT HERO IMAGE HEIGHT HERE */
    height:440px;

    object-fit:cover;
    object-position:center;
}


/* =========================================================
   ARTICLE BODY
   ========================================================= */

.article-body {
    max-width:790px;
    margin:55px auto 0;
    padding:0 24px;
    font-size:18px;
    line-height:1.82;
    color:#dedede;
}

.article-body p {
    margin:0 0 26px;
}

.article-body h2 {
    font-size:34px;
    line-height:1.1;
    color:#fff;
    margin:48px 0 18px;
}

.article-body strong {
    color:#fff;
}


/* =========================================================
   MOBILE ARTICLE PAGES
   ========================================================= */

@media(max-width:700px) {

    .article-page {
        padding:50px 0 70px;
    }

    .article-header h1 {
        font-size:clamp(40px,11vw,58px);
        letter-spacing:-2px;
    }

    .article-deck {
        font-size:18px;
    }

    .article-hero {
        margin-top:30px;
    }

    .article-hero img {

        /* EDIT MOBILE HERO HEIGHT HERE */
        height:300px;

    }

    .article-body {
        margin-top:40px;
        font-size:17px;
        line-height:1.75;
    }
}