/* Room Eleven Oh Eight visual layer for Ghost Foundation's Wave theme. */
:root {
    --brand-color: #ff1a1a;
    --primary-text-color: #e6e6e6;
    --secondary-text-color: #a0a0a0;
    --white-color: #e6e6e6;
    --light-gray-color: #111111;
    --mid-gray-color: #2b2b2b;
    --dark-gray-color: #777777;
    --darker-gray-color: #111111;
    --black-color: #0a0a0a;
    --font-sans: Inter, Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: Inter, Poppins, sans-serif;
    --container-width: 1240px;
    --content-width: 760px;
    --gap: clamp(20px, 4vw, 48px);
    --header-spacing: clamp(44px, 7vw, 76px);
}

html { scroll-behavior: smooth; }
body {
    color: #e6e6e6;
    background: #0a0a0a;
    font-family: Inter, Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
.site {
    background-color: #0a0a0a;
    background-image: linear-gradient(transparent 95%, rgba(255,255,255,.025) 95%), linear-gradient(90deg, transparent 95%, rgba(255,255,255,.025) 95%);
    background-size: 100% 44px, 44px 100%;
}
.gh-head {
    position: sticky;
    top: 0;
    z-index: 100;
    height: auto;
    min-height: 68px;
    color: #e6e6e6;
    background: rgba(10,10,10,.94);
    border-bottom: 1px solid #2b2b2b;
    backdrop-filter: blur(8px);
}
.gh-head-inner { min-height: 68px; }
.gh-head-logo { display: flex; align-items: center; }
.gh-head-logo img { display: block; width: clamp(150px, 15vw, 190px); max-height: 58px; object-fit: contain; }
.gh-head-menu .nav a, .gh-head-menu a, .gh-head-link {
    color: #bfbfbf;
    font-size: 1.1rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: color .18s ease;
}
.gh-head-menu .nav a:hover, .gh-head-menu a:hover, .gh-head-link:hover { color: #fff; }
.gh-head-btn.gh-btn, .gh-btn.gh-primary-btn {
    color: #fff;
    background: #ff1a1a;
    border: 1px solid #ff1a1a;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.gh-head-btn.gh-btn:hover, .gh-btn.gh-primary-btn:hover { background: #d91010; }
.gh-icon-btn { color: #e6e6e6; }

.site-cover {
    width: calc(100% - 2 * var(--gap));
    max-width: 1240px;
    min-height: clamp(300px, 34vw, 420px);
    margin: 22px auto 0;
    padding: clamp(34px, 5vw, 64px);
    border: 1px solid #2b2b2b;
    border-top: 2px solid #ff1a1a;
    background: #111;
}
.site-cover.u-overlay:before { background: linear-gradient(90deg, #0a0a0a 0%, rgba(10,10,10,.82) 56%, rgba(10,10,10,.42) 100%); opacity: 1; }
.cover-image { filter: saturate(.58) contrast(1.08); }
.cover-content { width: 100%; max-width: 1000px; margin: auto 0; text-align: left; }
.cover-logo { max-height: 68px; margin: 0 0 22px; }
.cover-description {
    max-width: 850px;
    font-family: Impact, "Arial Narrow", Poppins, sans-serif;
    font-size: clamp(3.6rem, 8vw, 8rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.site-content { padding-top: clamp(42px, 6vw, 72px); }
.post-feed { display: block; max-width: 1000px; }
.post-feed .post, .post-feed .post + .post {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    padding: 24px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #2b2b2b;
    transition: border-color .18s ease;
}
.post-feed .post:hover { background: transparent; border-bottom-color: #ff1a1a; }
.post-feed .post .post-media {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
    margin: 0 28px 0 0;
    border-radius: 0;
    background: #111;
}
.post-feed .post .post-media .u-placeholder.square:before { padding-bottom: 100%; }
.post-feed .post .post-wrapper { flex: 1; min-width: 0; }
.post-feed .post .post-media .letter {
    left: 18px;
    color: rgba(230,230,230,.18);
    font-family: Impact, "Arial Narrow", sans-serif;
    text-transform: uppercase;
}
.post-feed .post-play { color: #fff; background: #ff1a1a; border-radius: 0; }
.post-feed .post-meta, .post-meta { color: #a0a0a0; font-size: 1rem; letter-spacing: .13em; }
.post-feed .post-meta-tags .post-tag, .post-tag { color: #ff1a1a; }
.post-feed .post-title, .post-title {
    color: #e6e6e6;
    font-family: Impact, "Arial Narrow", Poppins, sans-serif;
    font-size: clamp(2.6rem, 3.3vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.post-title-link:hover { color: #ff1a1a; }
.post-feed .post-excerpt { color: #bcbcbc; font-size: 1.4rem; line-height: 1.6; }
.post-footer { color: #999; }
.pagination { color: #a0a0a0; }
.pagination a { color: #e6e6e6; }
.term { max-width: 1160px; margin-bottom: 42px; padding-bottom: 24px; border-bottom: 1px solid #2b2b2b; }
.term-name, .author-name { color: #e6e6e6; font-family: Impact, "Arial Narrow", Poppins, sans-serif; font-size: clamp(3.6rem, 6vw, 6.8rem); line-height: 1; text-transform: uppercase; }
.term-description, .author-bio { color: #bcbcbc; }
.single > .post-header { max-width: 1000px; margin-right: auto; margin-left: auto; padding: 0 0 26px; text-align: left; border-bottom: 1px solid #2b2b2b; }
.single > .post-header .post-title { color: #e6e6e6; font-family: Impact, "Arial Narrow", Poppins, sans-serif; font-size: clamp(4rem, 8vw, 9rem); line-height: .98; text-transform: uppercase; }
.single > .post-header .post-meta { color: #a0a0a0; }
.single .single-media .post-media { border-radius: 0; }
.single .gh-content { color: #d0d0d0; font-size: 1.8rem; line-height: 1.8; }
.single .gh-content h2, .single .gh-content h3, .single .gh-content h4 {
    color: #e6e6e6;
    font-family: Impact, "Arial Narrow", Poppins, sans-serif;
    text-transform: uppercase;
    letter-spacing: .035em;
}
.single .gh-content a { color: #fff; text-decoration-color: #ff1a1a; text-underline-offset: 4px; }
.single .gh-content blockquote { border-left: 2px solid #ff1a1a; color: #eee; }
.single .gh-content pre, .single .gh-content code { color: #ff7777; background: #111; }
.gh-foot { margin-top: 48px; padding-top: 32px; color: #999; background: #0a0a0a; border-top: 1px solid #2b2b2b; }
.subscribe .subscribe-link { color: #bbb; }
.subscribe .subscribe-link:hover, .gh-foot-menu a:hover { color: #ff1a1a; }
.gh-copyright a { color: #bbb; }
.player { color: #e6e6e6; background: #111; border: 1px solid #2b2b2b; border-radius: 0; }
.player .button-play { background: #ff1a1a; border-radius: 0; }

@media (max-width: 767px) {
    .gh-head-inner { min-height: 62px; }
    .gh-head-logo img { width: 150px; max-height: 54px; }
    .site-cover { min-height: 300px; margin-top: 12px; padding: 30px 22px; }
    .cover-description { font-size: clamp(3.8rem, 12vw, 6.2rem); }
    .site-content { padding-top: 38px; }
    .post-feed .post, .post-feed .post + .post { padding: 18px 0; }
    .post-feed .post .post-media { flex-basis: 80px; width: 80px; height: 80px; margin: 0 16px 0 0; }
    .post-feed .post .post-media .u-placeholder.square:before { padding-bottom: 100%; }
    .post-feed .post .post-excerpt { display: none; }
    .post-feed .post-title { font-size: clamp(1.9rem, 5vw, 2.5rem); }
    .single > .post-header .post-title { font-size: clamp(4rem, 13vw, 6.8rem); }
    .single .gh-content { font-size: 1.65rem; }
}
