/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

:root {
  --black: #0a0011;
  --blue: #29abe2;
  --green: #8ccc33;
  --paper: #fbfcfa;
  --line: #dce1db;
  --muted: #66716b; 
}

html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        box-sizing: border-box;
        scroll-behavior: smooth;
}

main {
        display: block;
}

*, *::before, *::after {
        box-sizing: inherit;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

@font-face {
    font-family: 'Marsek';
    src: url('font/Marsek.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
        color: var(--black);
        line-height: 1.5;
        font-family: Inter, system-ui, sans-serif;
        background: var(--paper);
        margin: 0 auto;
        hyphens: auto;
        hyphenate-limit-chars: 5 4 5;
}

h1, h2, h3, h4, h5, h6 {
        font-weight: bold;
        word-break: break-word;
}

h1 {
        margin: 1rem 0;
        font-size: 4em;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -.075em; 
}

h2 {
        margin: 0.5rem 0;
        font-size: clamp(2em, 4vw, 45px);
        line-height: 1;
        letter-spacing: -.065em;
}

h3 {
        color: var(--blue);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: 1em;
        margin: 0;
}

h4 {
        font-size: 18px;
        margin: 0;
}

h5 {
  color: #aaa;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 15px 0;
}

h5::after {
        content: "";
        display: block;
        position: relative;
        left: 50%;
        margin-left: -15%;
        bottom: -8px;
        width: 30%;
        height: 1px;
        background: #ccc;
}

p {
        margin: 0 0 1em;
}

b, strong {
        font-weight: bolder;
}


em, i {
        font-style: italic;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
ul {
        list-style: disc;
}

li > ul {
        margin-bottom: 0;
        margin-left: 1.5em;
}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

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

a:focus {
        outline: thin dotted;
}

a:hover, a:active {
        outline: 0;
}

button, input {
        font: inherit;
}

input {
        background-color: #fff;
        border-radius: 2px;
        font-size: 16px;
        border: 1px solid #ccc;
        width: 100%;
        line-height: 1.3;
        min-width: 0;
        height: 3em;
        padding: 0 1em;
        color: var(--black);
        outline: none;
}

button, .button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-height: 3em;
        padding: .8em 1.5em;
        border-radius: 3px;
        transition: transform .18s ease, background .18s ease, border-color .18s ease;
        border: 1px solid transparent;
        font-size: .8em;
        font-weight: 700;
        width: 100%;
        margin: .5em 0;
}

.button.ghost {
        border: 1px solid var(--line);
}

.button.dark {
        color: #fff !important;
        background: var(--black);
}

.button.blue {
        color: var(--black);
        background: var(--blue);
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        border-bottom: 1px solid var(--line);
}

header .container {
        padding: 1em 1rem 0;
}

.site-branding {
        display: flex;
        align-items: flex-start;
        gap: 1em;
}

.site-branding img {
        width: 50px;
        height: 50px;
}

.site-title {
        line-height: 1;
        font-family: "Marsek", Helvetica, Arial, sans-serif;
        font-size: 1.3em;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: initial;
        vertical-align: middle;
        font-weight: 800;
}

.site-description {
        color: var(--muted);
        font-size: .8em;
        letter-spacing: .1em;
        text-transform: uppercase;
}

.main-navigation ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
}

.main-navigation a {
        display: block;
        text-decoration: none;
        letter-spacing: 1px;
        color: var(--muted);
        padding: 0.5em 1em;
}

.main-navigation .button {
        display: none;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.container {
        width: min(100% - 28px, 1180px);
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
}

.clear {
        clear: both;
}

.flex {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
}

section {
        padding: 2rem 0;
        clear: both;
}

.quad {
        width: 100%;
}

.centered {
        text-align: center;
}

footer {
        padding: 2em 0;
        color: var(--muted);
        font-size: .8em;
}

footer .container {
        justify-content: space-between;
}

footer a, footer p {
        display: block;
        margin: 8px 0;
}

footer a:hover {
        text-decoration: dotted;
        color: var(--blue);
}

/*--------------------------------------------------------------
# Page
--------------------------------------------------------------*/

.hero {
        border-bottom: 1px solid var(--line);
        padding: 6em 0 4em;
}

.eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: small;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
}

.eyebrow i {
        width: 8px;
        height: 8px;
        display: block;
        background: var(--green);
}

.icon span {
        width: 9px;
        height: 9px;
        display: block;
        background: var(--green);
}

.icon span:nth-child(2) {
        background: var(--blue);
}

.icon span:nth-child(3) {
        background: var(--black);
}

.hero-note {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--muted);
        margin-top: 1.5em;
}

.note-line {
        width: 3em;
        height: 2px;
        background: var(--green);
}

.pixel-field {
        position: absolute;
        right: -12px;
        top: 137px;
        width: 330px;
        height: 260px;
        opacity: .48;
        pointer-events: none;
        background-image: radial-gradient(var(--blue) 1.4px, transparent 1.4px), radial-gradient(var(--green) 1.4px, transparent 1.4px), radial-gradient(var(--black) 1.4px, transparent 1.4px);
        background-size: 18px 18px, 18px 18px, 18px 18px;
        background-position: 0 0, 8px 7px, 4px 13px;
        mask-image: linear-gradient(90deg, transparent, black 22%, black 78%, transparent);
        z-index: -1;
}

.card {
        padding: 2em;
        overflow: hidden;
        background: var(--black);
        color: white;
}

.card .body {
        display: flex;
        align-items: center;
        min-height: 270px;
        justify-content: space-between;
}

.live-dot {
        width: 8px;
        height: 8px;
        display: inline-block;
        margin-right: .5em;
        background: var(--green);
        border-radius: 50%;
}

.cover-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid rgba(255,255,255,.18);
        padding-top: 1em;
}

.play {
        width: 50px;
        height: 50px;
        border: 0;
        color: var(--black);
        background: var(--green);
        border-radius: 50%;
        padding-left: 1.1em;
        transition: 500ms;
}

.play:hover { background: var(--blue); }

.section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        margin-bottom: 2em;
}

.topics {
        border-top: 1px solid var(--black);
        border-bottom: 1px solid var(--black);
        gap: 0;
}

.topic {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        min-height: 150px;
        padding: 2em;
        transition: background .2s ease;
}

.topic:last-child {
        border-right: 0;
}

.topic:hover { 
        background: #e7f6fc;
}

.icon {
        display: flex;
        gap: .25em;
        align-items: center;
}

.topic h3 {
        font-size: 2em;
        letter-spacing: 0;
}

.episodes {
        background: var(--black);
        color: white;
}

.episodes .section-kicker {
        color: var(--green);
}

.filter-row {
        display: flex;
        gap: .5em;
        margin: 0 0 2em;
}

.filter {
        padding: .8em 1em;
        border: 1px solid var(--muted);
        color: var(--paper);
        background: transparent;
}

.filter.active, .filter:hover {
        border-color: var(--green);
        color: var(--black);
        background: var(--green);
}

.episode-list {
        gap: 1em;
}

article {
        padding: 2em;
        border: 1px solid #353c3a;
        background: #111017;
        transition: border-color .2s ease, transform .2s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-self: stretch;
}

article:hover {
        border-color: var(--blue);
        transform: translateY(-3px);
}

article h2 {
        font-size: 2em;
        margin: 1em 0 .3em;
}

.episode-foot {
        display: flex;
        justify-content: space-between;
        margin-top: 1em;
        color: var(--paper);
}

.episode-foot b {
        color: var(--green);
}

#ueber .flex {
        gap: 1em;
}

#ueber .flex .half {
        padding: 1em;
        border: 1px solid var(--line);
        background: white;
}

.host-portrait {
        width: 9em;
        height: 9em;
        margin-bottom: 1em;
        background: var(--black);
        padding: 1em;
}

.newsletter {
        color: white;
        background: var(--blue);
        background: linear-gradient(135deg,rgba(41, 171, 226, 1) 0%, rgba(41, 171, 226, 1) 48%, rgba(140, 204, 51, 1) 100%);
}

.newsletter h3, .newsletter p {
        color: var(--black);
}

.newsletter h2 {
        max-width: 450px;
}

.newsletter form {
        display: flex;
        gap: .5em;
}

.newsletter form input:focus {
        border-color: var(--black);
        background: white;
}

.newsletter small {
        color: #000;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
img {
        border-style: none;
        width: 100%;
        height: auto;
}

.podcast-symbol {
        width: 160px;
        flex-basis: 160px;
        margin: 1em auto;
}

/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
        header .container {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: auto;
                padding: 1em 0 0;
        }

        .container {
                width: 720px;
                padding: 0;
        }

        section {
                padding: 6rem 0;
        }

        .main-navigation li {
                display: inline-block;
                margin: 0;
        }

        .main-navigation a {
                padding: .8em 1em;
        }

        .main-navigation .button {
                display: block;
        }

        button, .button {
                width: auto;
                margin: .5em 0;
        }

        .button.ghost {
                margin: .5em .5em .5em 2em;
        }

        h1 {
                font-size: clamp(46px, 7vw, 82px);
        }

        .about {
                display: flex;
                justify-content: space-between;
        }

        .flex {
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
        }

        .half, .third, .quad {
                width: 50%;
        }

        .podcast-symbol {
                width: 190px;
        }

        .section-head p {
                margin: 0;
                max-width: 37%;
        }

        .topic {
                border-right: 1px solid var(--line);
                border-bottom: none;
                align-self: stretch;
        }
}

@media screen and (min-width: 992px) {
        .container {
                width: 960px;
        }

        .third {
                width: 33.33%;
        }

        .quad {
                width: 25%;
        }

}

@media screen and (min-width: 1200px) {
        .container {
                width: 1140px;
        }

        h2 {
                font-size: 3em;
        }
}