/* same colors as the original robstyle.css */
body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #191902;
    color: #9f9f9f;
    margin: 0;
    padding: 0;
}
a { color: #C73818; text-decoration: none; }
a:hover { color: #ffffff; }
p { color: #C68E17; line-height: 1.5; }
.page { max-width: 815px; margin: 0 auto; padding: 0 16px; }

/* ===== menu ===== */
.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
}
.nav-container > a,
.dropdown > button {
    color: white;
    font: bold 16px Arial, Helvetica, sans-serif;
    padding: 10px 14px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-container > a:hover,
.dropdown > button:hover { background: #444; color: white; }
/* NTK Records stands out in amber */
.nav-container > a.ntk { color: #E0A526; }
.nav-container > a.ntk:hover { background: #E0A526; color: #191902; }

.dropdown { position: relative; }
.dropdown > button::after { content: " \25BE"; font-size: .8em; }
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 170px;
    background: #26250E;
    border: 1px solid #444;
    padding: 6px 0;
    z-index: 5;
    text-align: left;
}
.dropdown-menu a {
    display: block;
    color: white;
    font-weight: bold;
    padding: 9px 16px;
}
.dropdown-menu a:hover { background: #444; }
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu { display: block; }

.note { margin: 6px 0 14px; }
.image-container { margin-bottom: 10px; }

.image-container img {
    width: 100%;
    height: auto;
    max-width: 800px;
    border: 2px solid black;
}

/* socials on the left, sponsors on the right, one row */
.icon-row {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 40px;
    padding: 26px 0 10px;
}
.social-links, .sponsors {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.social-links img { height: 36px; width: auto; }
.sponsors img { height: 30px; width: auto; }

h4 {
    font-family: sans-serif;
    font-size: 100%;
    letter-spacing: .6em;
    word-spacing: .9em;
    color: #9f9f9f;
    margin: 44px 0 18px;
}

.projects { list-style: none; padding: 0; margin: 0; }
.projects li { margin: 0 0 18px; }
.projects a.name { font-weight: bold; font-size: 1.1em; }
.projects span { display: block; color: #C68E17; font-size: .95em; margin-top: 3px; }

/* ===== shared family footer (same four links on every site) ===== */
.family {
    background: #22210B;
    border-top: 1px solid #3a3818;
    margin-top: 40px;
    padding: 40px 16px 36px;
    text-align: left;
}
.family-inner { max-width: 815px; margin: 0 auto; }
.family-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 26px;
}
.family-grid a {
    display: block;
    border-top: 2px solid #3a3818;
    padding-top: 12px;
}
.family-grid a:hover, .family-grid a.here { border-top-color: #C68E17; }
.family-grid strong { display: block; color: white; font-size: 1.05em; line-height: 1.25; }
.family-grid a:hover strong { color: #C68E17; }
.family-grid span { display: block; color: #9f9f9f; font-size: .9em; line-height: 1.45; margin-top: 5px; }
.family-meta {
    margin-top: 34px;
    padding-top: 16px;
    border-top: 1px solid #3a3818;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    font-size: .9em;
}
.family-meta a { color: white; margin-right: 18px; }
.family-meta a:hover { color: #C68E17; }

@media (max-width: 700px) {
    .family-grid { grid-template-columns: 1fr 1fr; }
    .icon-row { justify-content: center; }
    .social-links, .sponsors { justify-content: center; }
}
@media (max-width: 420px) { .family-grid { grid-template-columns: 1fr; } }

/* ===== menu: highlight the page you're on ===== */
.nav-container > a.current,
.dropdown.current > button { text-decoration: underline; text-decoration-color: #C68E17; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.dropdown-menu a.current { color: #E0A526; }

/* ===== inner pages ===== */
.page-heading { margin-top: 30px; }

/* photo column + text column (About, Work With Rob) */
.two-col {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    text-align: left;
}
.two-col .photos { flex: 0 0 250px; display: flex; flex-direction: column; gap: 24px; }
.two-col .photos img { border: 1px solid black; width: 250px; height: auto; }
.two-col .text { flex: 1; min-width: 0; }
.two-col .text p { margin: 0 0 1em; }
.subhead { color: #9f9f9f; letter-spacing: .5em; word-spacing: .7em; font-size: .95em; margin: 0 0 12px; }
.subhead + p { margin-top: 0; }
.text .subhead:not(:first-child) { margin-top: 34px; }

/* audio/video */
.player iframe { width: 100%; height: 450px; border: 0; display: block; }
.videos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.videos iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }

/* discography */
.disc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.disc img { width: 180px; max-width: 100%; height: auto; border: 1px solid black; margin: 8px auto 0; display: block; }
.disc .artist { color: #C68E17; display: block; }
.disc .title { display: block; }
.disc li > span.title { color: #9f9f9f; }

/* contact */
.contact-photo { border: 0; margin: 0 auto; max-width: 100%; height: auto; }
.email { font-size: 1.25em; font-weight: bold; }
.contact-list { list-style: none; padding: 0; margin: 26px 0 0; line-height: 2; }
.contact-list li { color: #C68E17; }

@media (max-width: 640px) {
    .two-col { flex-direction: column; align-items: center; }
    .two-col .photos { flex: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .two-col .photos img { width: 160px; }
    .videos { grid-template-columns: 1fr; }
    .disc { grid-template-columns: 1fr 1fr; }
    .player iframe { height: 380px; }
}

/* line the covers up along the bottom of each row, like the old table layout */
.disc li { display: flex; }
.disc li > a, .disc li > span.title { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; }

@media (max-width: 640px) {
    h4 { letter-spacing: .35em; word-spacing: .5em; }
    .sponsors { gap: 16px; }
    .sponsors img { height: 26px; }
}