:root {
    --header-font: "Inter", sans-serif;
    --header-font: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    --header-font-weight: 500;
    --primary-color: rgb(11, 56, 147);
    --secondary-color: rgb(213, 227, 230);
    --terciary-color: rgb(236, 236, 233);
    --accent-color: rgb(209, 130, 102);
    --background-color: rgb(250, 247, 243);
    --top-color: rgb(251, 248, 245);
    --outline-color: rgb(255, 255, 255);
    --shadow-color: rgb(80, 80, 80);
    --rtext-color: rgb(255, 255, 255);
    --subtext-color: rgb(74, 85, 104);
    --text-color: rgb(31, 41, 55);
    --headlines-color: rgb(0, 0, 0);
    --border-radius-small: 1.2rem;
    --border-radius-small-inner: 0.7rem;
    --border-radius-big: 1.8rem;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    color: var(--headlines-color);
}

html {
    background-color: var(--background-color);
}

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

.score {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 3.8rem;
    right: 0.8rem;
    font-weight: 700;
    font-size: 0.8rem;
    background-color: var(--top-color);
    /* backdrop-filter: blur(0.2rem); */
    box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
    background: conic-gradient( var(--primary-color) calc(var(--value) * 1%), color-mix(in srgb, var(--top-color), transparent 90%) 0);
}

.score::before {
    content: "";
    position: absolute;
    width: calc(2rem - 8px);
    height: calc(2rem - 8px);
    background-color: var(--background-color);
    border-radius: 50%;
}

.score-number {
    position: relative;
    z-index: 1;
    color: var(--primary-color);
}

.latest .score {
    top: 1rem;
    right: 1rem;
}

nav {
    width: calc(100% - 2.4rem);
    height: 3.4rem;
    padding: 0 1.2rem 0;
    margin: 0 auto 0;
    /* position: fixed; */
    top: 0;
    left: 0;
    color: var(--headlines-color);
    background-color: var(--background-color);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    /* font-family: var(--header-font); */
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    font-size: 1.2rem;
    z-index: 9;
}

nav .date {
    font-size: 0.9rem;
    color: var(--headlines-color);
    text-align: right;
}

nav .logo {
    margin: 0 auto;
}

nav .buttons {
    display: flex;
    gap: 0.6rem;
}

nav .search img,
nav .color-mode img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    object-position: center;
}

nav .color-mode img {
    width: 1.3rem;
    height: 1.3rem;
}

subnav {
    width: calc(94% - 2.8rem);
    max-width: 1400px;
    height: 3.4rem;
    padding: 0.1rem 1.4rem 0.1rem;
    margin: 0.2rem auto 0;
    position: sticky;
    top: 0.6rem;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    border-radius: var(--border-radius-big);
    font-family: var(--header-font);
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    font-size: 1rem;
    z-index: 10;
    color: var(--header-color);
    background-color: color-mix(in srgb, var(--top-color), transparent 30%);
    backdrop-filter: blur(0.2rem);
    outline: solid 1px color-mix(in srgb, var(--outline-color), transparent 80%);
    box-shadow: inset 0 0 1rem color-mix(in srgb, var(--top-color), transparent 10%), 0 0 1rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
    -webkit-overflow-scrolling: touch;
}

subnav::-webkit-scrollbar {
    display: none;
}

subnav::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 40%;
    background: linear-gradient( to bottom, color-mix(in srgb, var(--top-color), transparent 20%) 0%, transparent 100%);
    border-radius: 50%;
    filter: blur(0.8rem);
    pointer-events: none;
}

subnav .categories {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.8rem;
    font-family: var(--header-font);
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    font-size: 1rem;
}

subnav .active {
    margin: 0 calc(-1px - 0.7rem);
    font-weight: 500;
    color: var(--primary-color);
    font-weight: 500;
    border-radius: var(--border-radius-small);
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color), transparent 84%);
    padding: 0.4rem 0.7rem 0.4rem;
    border: solid 1px color-mix(in srgb, var(--rtext-color), transparent 90%);
    box-shadow: inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

subnav .cat {
    pointer-events: all;
}

subnav .cat:hover {
    margin: 0 calc(-1px - 0.6rem);
    border-radius: var(--border-radius-small);
    color: var(--text-color);
    background-color: color-mix(in srgb, var(--secondary-color), transparent 84%);
    padding: 0.4rem 0.6rem 0.4rem;
    border: solid 1px color-mix(in srgb, var(--secondary-color), transparent 50%);
    box-shadow: inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.daily-info {
    width: 90%;
    max-width: 1400px;
    margin: 0rem auto 1.6rem;
    padding: 1.6rem 0;
    display: flex;
    gap: 3rem;
    border-bottom: solid 1px var(--primary-color);
}

.daily-info .weather {
    width: 17.2rem;
    height: 4.4rem;
    padding: 0.4rem 0.6rem 0.3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    overflow: hidden;
    border: solid 1px var(--secondary-color);
    border-radius: var(--border-radius-small);
}

.daily-info .weather-icon {
    width: 3.9rem;
    height: 3.9rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.daily-info .weather-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.daily-info .weather-txt {
    width: 13rem;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0rem;
    font-size: 0.9rem;
    color: var(--headlines-color);
}

.daily-info .weather-txt>* {
    margin: 0;
    padding: 0;
}

.daily-info .weather-txt .weather-temp {
    width: 4.2rem;
    font-size: 1.4rem;
    font-weight: 400;
}

.daily-info .weather-txt .weather-city {
    width: 8.8rem;
    text-align: right;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #666;
}

.daily-info .podcasts {
    height: auto;
    width: calc(100% - 17rem - 17rem - 6rem);
    display: flex;
    overflow: hidden;
    gap: 1.6rem;
    /* padding: 0.4rem 0.6rem; */
}

.daily-info .pdk {
    width: 50%;
    height: 5.1rem;
    border-radius: var(--border-radius-small);
    border: solid 1px var(--secondary-color);
    padding: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
    overflow: hidden;
}

.daily-info .pdk .pdk-img {
    width: 4.3rem;
    height: 4.3rem;
    min-width: 4.3rem;
    min-height: 4.3rem;
    margin: 0.4rem;
    border-radius: var(--border-radius-small-inner);
    overflow: hidden;
}

.daily-info .pdk .pdk-img .img {
    border-radius: var(--border-radius-small-inner);
    overflow: hidden;
}

.daily-info .pdk .pdk-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.daily-info .pdk .pdk-txt {
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.daily-info .pdk .pdk-txt .pdk-title {
    width: 100%;
    max-width: 100%;
    font-size: 0.7rem;
    line-height: 1rem;
    font-weight: 400;
    color: #666;
}

.daily-info .pdk .pdk-txt .pdk-main-title {
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daily-info .stock-widget {
    width: 17rem;
    border-radius: var(--border-radius-small);
    height: 5.1rem;
    padding: 0;
    border: solid 1px var(--secondary-color);
    overflow: hidden;
}

.daily-info .stock-widget-container {
    width: 104%;
    height: 100%;
    margin: -0.1rem -2%;
}

.rcp {
    width: calc(45% - 5.2rem);
    margin-left: 1.2rem;
    display: flex;
    flex-direction: column;
    background-color: var(--terciary-color);
    padding: 0.6rem 2rem;
    border-radius: var(--border-radius-small)
}

.rcp .rcp-itm {
    padding: 2rem 0.2rem 1.2rem;
    border-bottom: solid 1px var(--primary-color);
    font-size: 1.1rem;
    line-height: 1.5rem;
}

.rcp .rcp-itm:last-of-type {
    border: none;
}

.rcp .rcp-itm .hyp {
    height: 1rem;
    width: 1rem;
    display: inline;
    position: relative;
    top: 0.06rem;
    margin-right: 0.8rem;
    color: var(--primary-color);
}

.rcp .rcp-itm .str {
    /* font-size: 1.4rem; */
    font-weight: 600;
    /* line-height: 1.6rem; */
    display: inline;
}

.rcp .rcp-itm .rcp-lnks {
    display: flex;
    gap: 0.4rem;
    margin-top: 1rem;
}

.rcp .rcp-itm a img {
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 50%;
}

.rcp-cont {
    width: 100%;
    margin: 4rem 0 0;
    padding-top: 3rem;
    border-top: solid 1px var(--primary-color);
}

.rcp-cont .rcp {
    width: calc(100% - 6rem);
    margin-left: 0;
    flex-direction: row;
    gap: 2.4rem;
    padding: 1.2rem 3rem;
}

.rcp-cont .rcp .rcp-itm {
    border: none;
    flex: 1;
}

.surs {
    margin: 2.4rem 0 0;
}

.surs .surs-header {
    margin: 0 1.2rem 0.6rem 0.6rem;
    font-size: 0.9rem;
    color: var(--subtext-color);
}

.surs .surs-grid {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.surs .surs-grid .surs-card {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-radius: var(--border-radius-small);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rtext-color), transparent 90%), inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), inset 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.surs .surs-grid .surs-card .title {
    width: 96%;
    font-size: 1rem;
    margin: 0;
}

.surs .surs-grid .surs-card .value {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.5rem;
    margin: 1rem 0 0rem 0;
    font-weight: 700;
}

.surs .surs-grid .surs-card .ds {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.2rem;
    color: var(--subtext-color);
}

.evnts {
    width: 90%;
    margin: 0 auto 0;
    padding: 4rem 5%;
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    /* background-color: var(--subtext-color); */
    background-color: #000;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
}

.evnts::-webkit-scrollbar {
    display: none;
}

.evnts .event {
    /* padding-bottom: 0.8rem; */
    aspect-ratio: 2/3;
    overflow: hidden;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 19rem;
    max-width: 14rem;
    scroll-snap-align: center;
    background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-radius: var(--border-radius-small);
    border: solid 1px color-mix(in srgb, var(--shadow-color), transparent 90%);
    box-shadow: inset 0 0 0.6rem color-mix(in srgb, var(--shadow-color), transparent 60%), 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.evnts .event .img {
    width: 100%;
    height: 100%;
    /* aspect-ratio: 3/4; */
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

.evnts .event .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.evnts .event .event-txt {
    width: calc(100% - 1.6rem);
    /* margin: 0.6rem 1rem 0 0.6rem; */
    margin: 0;
    position: absolute;
    left: 0;
    bottom: -0.1rem;
    background-color: rgba(0, 0, 0, 0.4);
    mask: linear-gradient(transparent, black, black, black);
    backdrop-filter: blur(0.2rem);
    border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
    padding: 2.6rem 1.2rem 1rem 0.8rem;
}

.evnts .event .event-txt .title {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
}

.evnts .event .event-txt p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #aaa;
}

.spotlight {
    width: 90%;
    max-width: 1400px;
    height: auto;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    color: var(--headlines-color);
}

.spotlight .latest {
    /* width: 50%; */
    width: 55%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spotlight .latest .itm {
    width: 100%;
    height: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: center; */
    position: relative;
    gap: 2rem;
}

.spotlight .latest .itm .src {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    /* position: absolute;
    left: 0;
    bottom: 0; */
}

.spotlight .latest .itm .src-logo {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    overflow: hidden;
}

.spotlight .latest .itm .src-logo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.spotlight .latest .itm .img {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    position: absolute;
    z-index: -1;
    opacity: 0.2;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rtext-color), transparent 90%), inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), inset 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.spotlight .latest .itm .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.spotlight .latest .itm .txt-cont-out {
    width: calc(100% - 4rem);
    color: var(--headlines-color);
    font-weight: 300;
    margin: 3.6rem auto 0 1.4rem;
    padding-bottom: 1.2rem;
}

.spotlight .latest .itm .txt-cont-out .pdc {
    display: flex;
    font-size: 0.8rem;
    font-weight: 400;
    margin-bottom: 0.6rem;
    color: #666;
    color: var(--primary-color);
    gap: 0.3rem;
}

.spotlight .latest .itm .txt-cont-out .pdc .category {
    background: var(--primary-color);
    color: var(--rtext-color);
    border-radius: 0.8rem;
    padding: 0.1rem 0.8rem;
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    font-weight: 500;
    color: var(--primary-color);
    border-radius: var(--border-radius-small);
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color), transparent 84%);
    padding: 0.4rem 0.7rem 0.4rem;
    border: solid 1px color-mix(in srgb, var(--rtext-color), transparent 90%);
    box-shadow: inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.spotlight .latest .itm .txt-cont-out .title {
    font-size: 2.4rem;
    line-height: 2.8rem;
    margin: 1.2rem auto 0.6rem;
    font-family: var(--header-font);
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    /* font-weight: 400; */
}

.spotlight .latest .itm .txt-cont-out .description {
    line-height: 1.4rem;
    font-size: 1rem;
    color: var(--subtext-color);
    overflow: hidden;
    text-wrap: pretty;
    margin-bottom: 1.6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

.spotlight .txt-news {
    width: 100%;
    margin-top: 4rem;
    display: flex;
    gap: 2rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.spotlight .txt-news::-webkit-scrollbar {
    display: none;
}

.spotlight .txt-news .itm {
    flex: 1;
    padding-top: 1rem;
    border-top: solid 1px var(--primary-color);
    scroll-snap-align: start;
}

.spotlight .txt-news .title {
    font-size: 1.2rem;
    line-height: 1.8rem;
}

.spotlight .txt-news .description {
    line-height: 1.4rem;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--subtext-color);
    margin-bottom: 1.1rem;
}

.spotlight .txt-news .pdc {
    display: flex;
    font-size: 0.8rem;
    color: var(--primary-color);
    gap: 0.3rem;
}

.spotlight .txt-news .src {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--subtext-color);
    font-size: 0.8rem;
}

.spotlight .txt-news .src .src-logo {
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
}

.spotlight .txt-news .src .src-logo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.spotlight .spotlight-articles {
    width: 100%;
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2rem;
    column-gap: 1.2rem;
}

.spotlight .spotlight-articles .izp {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    overflow: hidden;
}

.spotlight .spotlight-articles .itm {
    padding-top: 3rem;
    border-top: solid 1px var(--primary-color);
}

.spotlight .spotlight-articles .izp .src {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    margin-top: 0.6rem;
}

.spotlight .spotlight-articles .izp .src-logo {
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 50%;
    overflow: hidden;
}

.spotlight .spotlight-articles .izp .src-logo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.spotlight .spotlight-articles .izp .img {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    height: 14.6rem;
    opacity: 0.2;
    backdrop-filter: blur(2rem);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rtext-color), transparent 90%), inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), inset 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.spotlight .spotlight-articles .izp .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.spotlight .spotlight-articles .izp .txt-cont {
    width: calc(100% - 2rem);
    margin: 0.2rem auto;
}

.spotlight .spotlight-articles .izp .pdc {
    margin: 0.4rem 0;
    display: flex;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--primary-color);
    gap: 0.3rem;
}

.spotlight .spotlight-articles .izp .pdc .post-date {
    display: none;
}

.spotlight .spotlight-articles .izp .pdc .category {
    background: var(--primary-color);
    color: var(--rtext-color);
    border-radius: 0.8rem;
    padding: 0.1rem 0.8rem;
    position: absolute;
    top: 4rem;
    left: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
    border-radius: var(--border-radius-small);
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color), transparent 84%);
    padding: 0.4rem 0.7rem 0.4rem;
    border: solid 1px color-mix(in srgb, var(--rtext-color), transparent 90%);
    box-shadow: inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.spotlight .spotlight-articles .izp .title {
    width: 96%;
    font-size: 1.3rem;
    line-height: 1.6rem;
    margin: 0;
    font-family: var(--header-font);
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    /* font-weight: 400; */
    position: absolute;
    top: 16.7rem;
    left: 1.2rem;
    width: calc(100% - 3rem);
    font-size: 1.8rem;
    line-height: 2rem;
    transform: translateY(-100%);
}

.spotlight .spotlight-articles .izp .description {
    width: 96%;
    margin-top: -0.6rem;
    margin-bottom: 1rem;
    line-height: 1.3rem;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--subtext-color);
}

.spotlight .spotlight-articles .mrn {
    width: 100%;
    position: relative;
    justify-content: space-between;
}

.spotlight .spotlight-articles .mrn .mrn-cont {
    display: flex;
    gap: 1rem;
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.spotlight .spotlight-articles .mrn .mrn-cont::-webkit-scrollbar {
    display: none;
}

.spotlight .spotlight-articles .mrn .mrn-cont .itm {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.spotlight .spotlight-articles .mrn .cntrls {
    width: calc(100% - 2rem);
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 1rem;
    bottom: 0;
    transform: none;
    z-index: 2;
}

.spotlight .spotlight-articles .mrn .cntrls>* {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 0.4rem;
    backdrop-filter: blur(0.4rem);
    cursor: pointer;
    color: var(--primary-color);
    border-radius: var(--border-radius-small);
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color), transparent 74%);
    padding: 0.4rem 0.7rem 0.45rem;
    border: solid 1px color-mix(in srgb, var(--rtext-color), transparent 90%);
    box-shadow: inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.spotlight .spotlight-articles .mrn .cntrls>* img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.spotlight .spotlight-articles .mrn .ind-cont {
    height: 1.8rem;
    width: 100%;
    margin-top: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.spotlight .spotlight-articles .mrn .ind-cont .ind {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--subtext-color);
    cursor: pointer;
    opacity: 0.3;
}

.spotlight .spotlight-articles .sntm {
    height: 0.6rem;
    margin: 1rem 0 0;
    /* border-radius: 1rem; */
}

.shorts-grid {
    width: 90%;
    margin: 4rem auto 0;
    display: flex;
    gap: 1.2rem;
    background-color: #000;
    padding: 4rem 5%;
    scroll-snap-type: x mandatory;
}

.short-card {
    width: 100%;
    height: 100%;
    flex: 1;
    aspect-ratio: 9 / 16;
    position: relative;
    background: #000;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    scroll-snap-align: center;
}

.short-card iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-grid {
    width: 90%;
    margin: 4rem auto 0;
    display: flex;
    gap: 1.2rem;
    background-color: #000;
    padding: 4rem 5%;
}

.video-card {
    flex: 1;
    aspect-ratio: 16 / 9;
    position: relative;
    background: #000;
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

.video-card iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.news-segments {
    width: 90%;
    max-width: 1400px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: var(--headlines-color);
    padding-bottom: 4rem;
}

.news-segments .articles {
    width: 100%;
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 2rem;
    column-gap: 1.2rem;
}

.news-segments .articles .izp {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    overflow: hidden;
}

.news-segments .articles .itm {
    padding-top: 3rem;
    border-top: solid 1px var(--primary-color);
}

.news-segments .articles .izp .src {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    margin-top: 0.6rem;
}

.news-segments .articles .izp .src-logo {
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 50%;
    overflow: hidden;
}

.news-segments .articles .izp .src-logo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.news-segments .articles .izp .img {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    height: 12.6rem;
    opacity: 0.2;
    backdrop-filter: blur(2rem);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rtext-color), transparent 90%), inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), inset 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.news-segments .articles .izp .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.news-segments .articles .izp .pdc {
    margin: 0rem 0 0.3rem;
    display: flex;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--primary-color);
    gap: 0.3rem;
}

.news-segments .articles .izp .pdc .post-date {
    position: absolute;
    top: 14.9rem;
    transform: translateY(-100%);
}

.news-segments .articles .izp .txt-cont {
    width: calc(100% - 1.6rem);
    margin: 0rem auto;
}

.news-segments .articles .izp .pdc .category {
    background: var(--primary-color);
    color: var(--rtext-color);
    border-radius: 0.8rem;
    padding: 0.1rem 0.8rem;
    position: absolute;
    top: 4rem;
    left: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
    border-radius: var(--border-radius-small);
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color), transparent 84%);
    padding: 0.4rem 0.7rem 0.4rem;
    border: solid 1px color-mix(in srgb, var(--rtext-color), transparent 90%);
    box-shadow: inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.news-segments .articles .izp .title {
    width: calc(100% - 2rem);
    font-size: 1.3rem;
    line-height: 1.6rem;
    margin: 0;
    position: absolute;
    top: 13.6rem;
    left: 0.9rem;
    transform: translateY(-100%);
    font-family: var(--header-font);
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    /* font-weight: 400; */
}

.news-segments .articles .izp .description {
    width: 96%;
    line-height: 1.3rem;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--subtext-color);
}

.news-segments .articles .mrn {
    width: 100%;
    position: relative;
    justify-content: space-between;
}

.news-segments .articles .mrn .mrn-cont {
    display: flex;
    gap: 1rem;
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.news-segments .articles .mrn .mrn-cont::-webkit-scrollbar {
    display: none;
}

.news-segments .articles .mrn .mrn-cont .itm {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.news-segments .articles .mrn .cntrls {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    transform: none;
    z-index: 2;
}

.news-segments .articles .mrn .cntrls>* {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 0.4rem;
    backdrop-filter: blur(0.4rem);
    cursor: pointer;
    color: var(--primary-color);
    border-radius: var(--border-radius-small);
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color), transparent 74%);
    padding: 0.4rem 0.7rem 0.45rem;
    border: solid 1px color-mix(in srgb, var(--rtext-color), transparent 90%);
    box-shadow: inset 0 0 0.6rem color-mix(in srgb, var(--top-color), transparent 60%), 0 0 0.6rem 0 color-mix(in srgb, var(--shadow-color), transparent 90%);
}

.news-segments .articles .mrn .cntrls>* img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.news-segments .articles .mrn .ind-cont {
    width: calc(100% - 1.6rem);
    height: 2.2rem;
    margin: 1.2rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}

.news-segments .articles .mrn .ind-cont .ind {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--subtext-color);
    cursor: pointer;
    opacity: 0.3;
}

.news-segments .articles .sntm {
    height: 0.6rem;
    margin: 1rem 0 0;
    /* border-radius: 1rem; */
}

.spcn {
    width: 100%;
    max-width: 100%;
    background-color: var(--secondary-color);
    overflow-y: hidden;
    overflow-x: scroll;
    flex-wrap: nowrap;
    padding-bottom: 3rem;
    display: flex;
    -webkit-overflow-scrolling: touch;
}

.spcn::-webkit-scrollbar {
    display: none;
}

.spcn-cont {
    width: 90%;
    max-width: 1400px;
    margin: 2rem auto 0;
    /* position: relative; */
    /* left: 1.2rem; */
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.spcn-cont::-webkit-scrollbar {
    display: none;
}

.spcn-cont .container {
    width: calc(200% + 1.2rem);
    display: flex;
    gap: 1.2rem;
}

.spcn-cont .articles {
    width: calc(100% + 0.6rem);
    grid-template-columns: repeat(4, 1fr);
    margin-top: 2rem;
    scroll-snap-align: start;
}

.spcn-cont .articles .itm {
    border: none;
    padding-top: 0;
}

.spcn-cont .articles .score {
    top: 0.6rem;
}

.art-card {
    width: 90%;
    max-width: 1400px;
    height: 70svh;
    margin: 0 auto;
    padding: 4rem 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background-color: #000;
}

.art-card .img-container {
    height: calc(70svh - 8rem);
    max-width: 80vw;
    width: auto;
}

.art-card .img-container img {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: center;
}

.art-card .info .art-title {
    font-family: var(--header-font);
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    font-size: 1.4rem;
    line-height: 2rem;
    margin: 0 auto 0;
    text-align: center;
    color: #fff;
}

.art-card .info .art-artist {
    margin: 0 auto;
    font-size: 0.8rem;
    text-align: center;
    color: #aaa;
}

.blog-posts {
    width: 100%;
    padding: 3rem 0;
    /* max-width: 1400px; */
    margin: 0rem auto 0rem;
    background-color: var(--terciary-color);
}

.blog-posts-container {
    width: 90%;
    max-width: 1400px;
    margin: 1rem auto;
    display: flex;
    border-top: solid 1px var(--rtext-color);
    border-bottom: solid 1px var(--rtext-color);
}

.post-list {
    width: calc(100% - 30rem);
    margin: 0.4rem auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border-right: solid 1px var(--rtext-color);
}

.post-list .post-item {
    width: calc(100% - 2.4rem);
    margin: 1rem auto;
    padding: 1rem 1.2rem;
    display: flex;
}

.post-list .post-item .post-txt {
    width: 40%;
    margin-top: 0.2rem;
}

.post-list .post-item .post-txt a {
    display: block;
    margin-top: 1rem;
    font-size: 1.6rem;
    font-family: var(--header-font);
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    /* font-weight: 600; */
}

.post-list .post-item .post-txt a p {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.4rem;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    color: var(--subtext-color);
}

.post-list .post-item .post-txt span {
    display: block;
    font-size: 0.8rem;
    color: var(--subtext-color);
}

.post-list .post-item .post-img {
    height: 100%;
    max-height: 100%;
    width: 60%;
    margin-right: 2rem;
    display: flex;
    overflow: hidden;
}

.post-list .post-item .post-img img {
    height: 100%;
    width: 100%;
    margin: 0;
    object-fit: cover;
    object-position: top left;
    border-radius: var(--border-radius-small);
}

.post-txt-list {
    width: 30rem;
    margin: 0.4rem auto;
    padding: 0 1.2rem;
    column-count: 2;
    column-gap: 1.5rem;
}

.post-txt-list .post-item {
    width: 100%;
    break-inside: avoid;
    display: block;
    padding: 1.6rem 0;
    border-bottom: solid 1px var(--rtext-color);
}

.post-txt-list .post-item:nth-of-type(3),
.post-txt-list .post-item:nth-of-type(6) {
    border: none;
}

.post-txt-list .post-item .post-txt a {
    font-family: var(--header-font);
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    /* font-weight: 600; */
}

.post-txt-list .post-item .post-txt span {
    margin-bottom: 0.2rem;
    display: block;
    font-family: var(--header-font);
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    /* font-weight: 500; */
    font-size: 0.8rem;
    color: var(--subtext-color);
    opacity: 0.8;
    text-transform: uppercase;
}


/* .post-item {
    width: 100%;
    display: flex;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
} */


/* .post-item .post-img {
    width: 20rem;
    height: auto;
    overflow: hidden;
    flex-shrink: 0;
} */


/* .post-item .post-img img {
    width: 100%;
    object-fit: cover;
    object-position: center;
} */


/* .post-txt-list .post-item {
    padding: 1rem 1.2rem;
} */

@media (max-width: 780px) {
    .surs {
        display: none;
        height: 0;
        width: 0;
    }
}

@media (max-width: 980px) {
    subnav {
        justify-content: flex-start;
        overflow-x: auto;
    }
    .daily-info {
        flex-direction: column;
        gap: 1.6rem;
    }
    .daily-info .weather {
        width: calc(100% - 1.2rem);
        justify-content: flex-start;
    }
    .daily-info .weather-txt {
        width: 100%;
    }
    .daily-info .weather-txt .weather-city {
        width: calc(100% - 4.2rem);
    }
    .daily-info .podcasts {
        height: 0;
        width: 0;
        display: none;
    }
    .daily-info .stock-widget {
        width: 100%;
    }
    .rcp {
        width: calc(100% - 4rem);
        margin: 3rem 0 0;
    }
    .rcp-cont {
        margin-top: 2.6rem;
    }
    .rcp-cont .rcp {
        width: calc(100% - 4rem);
        margin: 0 0 -1rem;
        padding: 0.6rem 2rem;
        gap: 0;
        flex-direction: column;
    }
    .rcp-cont .rcp .rcp-itm {
        border-bottom: solid 1px var(--primary-color);
    }
    .rcp-cont .rcp .rcp-itm:last-of-type {
        border: none;
    }
    .spotlight {
        flex-direction: column;
    }
    .spotlight .latest {
        width: 100%;
    }
    .spotlight .latest .itm {
        flex-direction: column;
        gap: 1.2rem;
    }
    .spotlight .latest .itm .txt-cont {
        width: 94%;
        margin: auto;
    }
    .spotlight .latest .itm .txt-cont .title {
        font-size: 1.8rem;
        line-height: 2rem;
        margin: 1rem auto 0.6rem;
    }
    .spotlight .txt-news {
        overflow-x: auto;
    }
    .spotlight .txt-news .itm {
        min-width: 17rem;
    }
    .spotlight .spotlight-articles {
        grid-template-columns: repeat(1, 1fr);
    }
    .news-segments .articles {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 2rem;
    }
    .news-segments .articles .mrn .cntrls {
        display: none;
        height: 0;
        width: 0;
        pointer-events: none;
    }
    .news-segments .articles .izp .src {
        margin-top: 1rem;
        gap: 0.4rem;
        font-size: 0.7rem;
    }
    .news-segments .articles .izp .src-logo {
        height: 1.3rem;
        width: 1.3rem;
    }
    .news-segments .articles .mrn .ind-cont {
        /* position: absolute; */
        /* bottom: 0; */
        height: 0.6rem;
    }
    .shorts-grid {
        width: 80%;
        padding: 4rem 10%;
        overflow-x: auto;
    }
    .shorts-grid .short-card {
        flex: 0 0 auto;
        min-height: 19rem;
        max-width: 50vw;
    }
    .evnts {
        overflow-x: scroll;
    }
    .evnts .event {
        flex: 0 0 auto;
        min-height: 19rem;
        max-width: 50vw;
    }
    .spcn-cont {
        margin: 0rem auto 1rem;
    }
    .blog-posts-container {
        width: 90%;
        flex-direction: column;
    }
    .post-list {
        width: 100%;
        border-right: none;
        border-bottom: solid 1px var(--rtext-color);
    }
    .post-list .post-item {
        width: 100%;
        padding: 1rem 0;
        flex-direction: column;
    }
    .post-list .post-item .post-img {
        width: 100%;
        margin-right: 0;
    }
    .post-list .post-item .post-txt {
        width: 100%;
    }
    .post-txt-list {
        width: 100%;
        padding: 0;
    }
}