:root {
   --ColorSiteBG: #000000;
   --ColorNavigationBG: #f31a25;
   --ColorContentBG: #ffffff;
   --ColorOverlay1: #121212;
   --ColorOverlay2: #000000;
   --ColorNavigationBorder: #f31a25;
   --ColorSiteText: #000000;
   --ColorLinkText: #e41e26;
   --ColorNavigationText: #ffffff;
   --ColorSectionHeaders: #f31a25;
   --ColorCopyright: #ffffff;
   --ColorSiteBorder: #f31a25;
   --FontStyle: Tahoma, Geneva, sans-serif;
   --FontStyleHeader: Tahoma, Geneva, sans-serif;
   --FontSize: 16pt;
}
html, body { overflow-x:hidden;position:relative; height:100%; }
BODY  { font-size:var(--FontSize); font-family:var(--FontStyle); color:var(--ColorSiteText);}
TD  { font-size:var(--FontSize); font-family:var(--FontStyle); color:var(--ColorSiteText);}
TH  { font-size:var(--FontSize); font-family:var(--FontStyle); color:var(--ColorSiteText); font-weight:bold;}
A,A:Visited,A:Active,A:Hover  { color:var(--ColorLinkText); /*text-decoration:underline;*/}
A.navlinks3,A.navlinks3:Visited,A.navlinks3:Active { text-decoration:none;}
A.navlinks3:Hover { text-decoration:underline;}
A.navlinks4,A.navlinks4:Visited,A.navlinks4:Active { text-decoration:none;}
A.navlinks4:Hover { text-decoration:underline;}
.btn-default, a.btn-default { background-color:var(--ColorSectionHeaders); color:var(--ColorContentBG); } .btn-default:hover, a.btn-default:hover { background-color:var(--ColorSectionHeaders);color:var(--ColorContentBG); }
.sectiontitle  { font-weight:bold; color:var(--ColorSectionHeaders);}
.sectiontitle2  { font-weight:bold; font-size:14pt; color:var(--ColorSectionHeaders);}
.greyout  { /*color:#999999;*/    opacity:0.5;}
.navlinks  { font-weight:bold; color:var(--ColorNavigationText);}
.navlinks2  { font-weight:bold; color:var(--ColorNavigationText); font-size:10pt;}
.navlinks3  { font-weight:bold; color:var(--ColorNavigationText); font-size:10pt; text-decoration:none;}
.navlinks4  { font-weight:bold; color:var(--ColorNavigationText); font-size:var(--FontSize); text-decoration:none;}
A.navlinks  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks:visited  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks:active  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks:hover  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks2:visited  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks2:active  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks2:hover  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks3:visited  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks3:active  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks3:hover  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks4:visited  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks4:active  { font-weight:bold; color:var(--ColorNavigationText);}
A.navlinks4:hover  { font-weight:bold; color:var(--ColorNavigationText);}
.title  { font-size:14pt; font-weight:bold; color:var(--ColorLinkText);}
 h1, h2, h3, h4, h5, h6, h7 { font-family:var(--FontStyleHeader);color:var(--ColorSectionHeaders); }
.bigboldblack  { font-size:12pt; font-weight:bold; color:var(--ColorSiteText);}
.bigbold2  { font-size:12pt; font-weight:bold; color:var(--ColorSectionHeaders);}
.bigbold  { font-size:10pt; font-weight:bold; color:var(--ColorSectionHeaders);}
.revbigbold  { font-size:10pt; font-weight:bold; color:#ffffff;}
.smalltext  { font-size:var(--FontSize);}
.footertext  { font-weight:bold; font-size:8pt; color:var(--ColorCopyright); margin-top:2em; text-align:center;}
A.footertext  { font-weight:bold; color:var(--ColorCopyright);}
A.footertext:visited  { font-weight:bold; color:var(--ColorCopyright);}
A.footertext:active  { font-weight:bold; color:var(--ColorCopyright);}
A.footertext:hover  { font-weight:bold; color:var(--ColorCopyright);}
.pages  { font-weight:bold; font-size:7pt; color:var(--ColorOverlay1);}
.sectionbullet  { font-weight:bold; color:var(--ColorOverlay1);}
.navcolorbuttons { font-size:8pt; border-left:1px solid #000; border-right:1px solid #000; border-top:1px solid #000; border-bottom:1px solid #000; background-color:var(--ColorSectionHeaders); color:var(--ColorContentBG);}
.xml-icon {     padding:0px 3px 1px 3px;    margin:0;    text-align:center; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#fff; background-color:#ff6600;    border:1px solid;    border-color:#ffc8a4 #3f1a01 #3f1a01 #ffc8a4;    cursor:pointer;}
.button-icon {     padding:0px 3px 1px 3px;    margin:0;    text-decoration:none; text-align:center; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:11px;    font-weight:bold;    color:#fff;    background-color:#cccccc;    border:1px solid;    border-color:#ffc8a4 #3f1a01 #3f1a01 #ffc8a4;    cursor:pointer;}
/* ----------- Version Upgrade Styles ----------------------- */
/* TEXT STYLES */
.EmphasisText {    color:var(--ColorLinkText);    font-weight:bold;}
.CaptionText {    color:var(--ColorSectionHeaders);    font-weight:bold;}
.ReverseText {    color:var(--ColorContentBG);}
/* BOXES */
.ContainerBox {    border:1px solid var(--ColorSiteText);     background-color:var(--ColorOverlay1);     overflow:auto;}
.ContainerBoxClear {    border:1px solid var(--ColorSiteText);     overflow:auto;}
.ContainerContentBG {    border:1px solid var(--ColorContentBG);     overflow:auto;}
.ContainerBoxReverse,A.ControlBoxReverse:Link,A.ControlBoxReverse:Visited,A.ControlBoxReverse:Active,A.ControlBoxReverse:Hover {    border:1px solid var(--ColorSiteBorder);     background-color:var(--ColorSiteText);     color:var(--ColorOverlay1);    /*overflow:auto;*/}
.DataContainerBox {    border-top:1px solid var(--ColorSectionHeaders);}
/* SYSTEM BUTTONS */
.StoreButton,A.StoreButton,A.StoreButton:Active,A.StoreButton:Visited {    padding:5px;    color:var(--ColorNavigationText);    border:1px solid var(--ColorNavigationText);    background-color:var(--ColorContentBG);     font-size:9pt;    font-family:Arial,Helvetica,verdana;    font-weight:bold;    text-decoration:none;}
.A.StoreButton:Hover {    background-color:var(--ColorNavigationText);    color:var(--ColorContentBG);}
.RSSBUTTON,A.RSSBUTTON,A.RSSBUTTON:Link,A.RSSBUTTON:Active,A.RSSBUTTON:Visited {    display:inline-block;    color:#ffffff;    text-decoration:none;    font-size:8pt;    border:1px solid #ae6103;    padding:2px 3px;    font-weight:bold;    background-color:#ffa02d;    padding:3px 5px 3px 5px;    }
A.RSSBUTTON:Hover{    color:#ffffff;    background-color:#ae6103;}
.SystemButtonLink,A.SystemButtonLink:Link,A.SystemButtonLink:Active,A.SystemButtonLink:Visited {    display:inline-block;    text-decoration:none;    font-weight:bold;    padding:5px;    border:1px solid var(--ColorSiteBorder);    background-color:var(--ColorSectionHeaders);    color:var(--ColorOverlay1);    width:auto;    font-size:7pt;    font-family:Verdana;}
A.SystemButtonLink:Hover {    background-color:var(--ColorOverlay1);    color:var(--ColorSectionHeaders);}
.SystemButtonLinkColor,A.SystemButtonLinkColor:Link,A.SystemButtonLinkColor:Active,A.SystemButtonLinkColor:Visited {    display:inline-block;    text-decoration:none;    font-weight:bold;    padding:5px;      border:1px solid var(--ColorSiteBorder);    background-color:var(--ColorLinkText);    color:var(--ColorOverlay1);     width:auto;    font-size:7pt;    font-family:Verdana;}
A.SystemButtonLinkColor:Hover {    background-color:var(--ColorOverlay1);    color:var(--ColorLinkText);}
A.PageNumberBlock,A.PageNumberBlock:Link,A.PageNumberBlock:Active,A.PageNumberBlock:Visited {    border:1px solid var(--ColorSiteBorder);    background-color:var(--ColorOverlay1);    color:var(--ColorSiteText);    font-weight:bold;    text-decoration:none;    padding:2px;    margin:3px;    font-size:7pt;}
A.PageNumberBlock:Hover {    background-color:var(--ColorOverlay1);    color:var(--ColorSiteText);}
A.PageNumberBlockSelected,A.PageNumberBlockSelected:Link,A.PageNumberBlockSelected:Active,A.PageNumberBlockSelected:Visited,A.PageNumberBlockSelected:Hover {    border:1px solid var(--ColorSiteBorder);    background-color:var(--ColorSiteText);    color:var(--ColorOverlay1);    font-weight:bold;   text-decoration:none;    padding:2px;    margin:3px;    font-size:7pt;}
/* CELLS AND BACKGROUNDS */
.CellColor1 {    background-color:var(--ColorNavigationBG);}
.CellColor2 {    background-color:var(--ColorContentBG);}
.CellColor3 {    background-color:var(--ColorOverlay1);}
.CellColor4 {    background-color:var(--ColorOverlay2);}
.CellColor7 {    background-color:var(--ColorLinkText);}
.CellColor9 {    background-color:var(--ColorSectionHeaders);}
/* FORM ELEMENTS */
input.SmallForm {    font-size:.8em;}
select.SmallForm {     font-size:.8em;}
textarea.SmallForm {     font-size:1em;}
input.SmallFormYellow {    font-size:.8em;    background-color:#feffcc;}
select.SmallFormYellow {     font-size:.8em;    background-color:#feffcc;}
input.LargeForm {    font-size:1.5em;}
select.LargeForm {    font-size:1.5em;}
textarea.LargeForm {    font-size:1.5em;}
.floatclear { display:block; height:0px; clear:both;}
.PNGFix {    behavior:url(/lib/css/iepngfix.htc);}
/* Version 5 Styles */
.divSiteLoader {    position:absolute;    top:0px;    bottom:0px;    left:0px;    right:0px;    z-index:9999;    font-size:48pt;    text-align:center;    color:#ffffff;    background-color:#000000;    opacity:0.5;}
a img {    border:0px;}
img {    /*max-width:100%;*/}
.divContentListBlock {    margin-bottom:1em;}
.divContentListBlock .title {    font-size:1em;    font-weight:bold;}
.textEmphasis {    color:var(--ColorLinkText);}
.textSmaller {    font-size:0.9em;}
.textSmallest {    font-size:0.8em;}
.divSearchBar {    background-color:var(--ColorOverlay1);    color:var(--ColorSiteText);    font-weight:bold;    padding:1.5em 2em 1em;}
.divClearLine {    clear:both;}
.divFloatLine {    float:left;    margin-right:2em;}
.aButton {    display:inline-block;    padding:5px 10px;    font-size:1.2em;    background-color:var(--ColorSectionHeaders);    color:var(--ColorOverlay1);    cursor:pointer;}
.formApp {    margin:0px;    padding:0px;}
.formApp .caption {    font-size:0.8em; opacity:0.75;}
.formApp .caption, .formApp .field {    margin-bottom:0.5em;}
.formApp .field input[type=text], .formApp .field input[type=password], .formApp .field select, .formApp .field textarea {    padding:5px;    }
.formApp .field input[type=submit], .formApp .field input[type=button] {    padding:5px 10px;}
.formApp .textarea textarea {    width:90%;    min-height:75px;}
.formApp .controls {    margin-top:1em;}
.formApp .controls input[type=submit], .formApp .controls input[type=button], .formAppButton {    padding:9px 18px;    border:0px;    background-color:var(--ColorLinkText);    color:var(--ColorContentBG);}
.formApp .controls input[type=submit]:hover, .formApp .controls input[type=button]:hover, .formAppButton:hover {    color:var(--ColorContentBG);    background-color:var(--ColorSectionHeaders);}
.divBlogAuthorBox {    padding:15px;    margin:1em 0px;    background-color:var(--ColorOverlay1);}
.appButton, a.appButton, a.appButtonLarge {   background-image:none; text-shadow:none; border:0px; padding:0.5em 1em;    border:0px;    background-color:var(--ColorLinkText);    color:var(--ColorContentBG);    font-size:0.8em;    text-decoration:none;    display:inline-block;    cursor:pointer;    text-align:center;}
.appButton:hover, a.appButton:hover, a.appButtonLarge:hover,.appButton:active, a.appButton:active, a.appButtonLarge:active,.appButton:focus, a.appButton:focus, a.appButtonLarge:focus .btn.appButton:hover {    color:var(--ColorContentBG);    background-color:var(--ColorSectionHeaders);}
a.appButtonLarge {    display:block;    padding:25px;    font-size:1.8em;    margin-bottom:0.5em;}
.btn.appButton, a.btn.appButton { padding:6px 12px; font-size:14px; }
a.appControl {    cursor:pointer;    text-decoration:none;}
.tableApp {    width:100%;    border:0px;    border-collapse: collapse;    border-collapse:separate;    border-spacing:1px;}
.tableApp th {    padding:8px;    text-align:left;    background-color:var(--ColorSectionHeaders);    color:var(--ColorContentBG);    font-size:0.9em;    margin:1px;}
.tableApp td {    padding:8px;    background-color:var(--ColorOverlay1);    margin:1px;}
.divPrayerCounter {    display:inline-block;    font-size:10pt;}
.divShadeBox {    padding:15px;    background-color:var(--ColorOverlay1);}
.divDropdown ul {    margin:0px;    padding:0px;    list-style:none;    position:relative;    z-index:9999;}
.divDropdown ul li {    display:inline-block;    *display:inline;    position:relative;}
.divDropdown ul li a {    display:inline-block;    text-decoration:none;}
.divDropdown ul li ul {    display:none;    position:absolute;    top:100%;    left:0px;}
.divDropdown ul li:hover ul {    display:block;    color:#ffffff;}
.divDropdown ul li ul li {    position:relative;    width:100%;}
.divDropdown ul li ul li a {    width:100%;white-space:nowrap;}
.divDropdown ul li ul li ul, .divDropdown ul li:hover ul li ul {    display:none;    left:100%;    top:0px;}
.divDropdown ul li ul li:hover ul {    display:block;}
.divDropdown ul li ul li ul li ul, .divDropdown ul li:hover ul li ul li ul {    display:none;    left:100%;    top:0px;}
.divDropdown ul li ul li ul li:hover ul {    display:block;}
#TempTemplate .divDropdown ul li ul li a {    background-color:rgba(0,0,0,1);color:#ffffff; text-align:left;}
#TempTemplate .divDropdown ul li ul li a:hover {    background-color:rgba(50,50,50,1);color:#ffffff; text-align:left;}
.system-dropdown-menu ul {    margin:0px;    padding:0px;    list-style:none;    position:relative;    z-index:9999;}
.system-dropdown-menu ul li {    display:inline-block;    *display:inline;    position:relative;}
.system-dropdown-menu ul li a {    display:inline-block;    text-decoration:none;}
.system-dropdown-menu ul li ul {    display:none;    position:absolute;    top:100%;    left:0px;}
.system-dropdown-menu ul li:hover ul {    display:block;    color:#ffffff;}
.system-dropdown-menu ul li ul li {    position:relative;    width:100%;}
.system-dropdown-menu ul li ul li a {    width:100%;}
.system-dropdown-menu ul li ul li ul, .system-dropdown-menu ul li:hover ul li ul {    display:none;    left:100%;    top:0px;}
.system-dropdown-menu ul li ul li:hover ul {    display:block;}
.system-dropdown-menu ul li ul li ul li ul, .system-dropdown-menu ul li:hover ul li ul li ul {    display:none;    left:100%;    top:0px;}
.system-dropdown-menu ul li ul li ul li:hover ul {    display:block;}
.system-dropdown-menu ul li ul li ul li a { white-space:nowrap; text-align:left; padding:0.5em 1em; background-color:rgba(0,0,0,.75); color:#ffffff; }
.tableCalendar {    width:100%;    border-collapse:collapse;}
.tableCalendar th {    width:14.28%;    font-size:0.8em;    background-color:var(--ColorSectionHeaders);    color:var(--ColorContentBG);    padding:5px;}
.tableCalendar td {    font-size:0.8em;    background-color:var(--ColorContentBG);    margin:1px;    border:1px solid var(--ColorOverlay1);    min-height:90px;}
.tableCalendar td.past {    background-color:var(--ColorOverlay1);    color:#999999;}
.tableCalendar td.past a{    color:#999999;}
.tableCalendar td .monthDay {    text-align:right;    padding:5px;    background-color:var(--ColorOverlay1);    color:var(--ColorSectionHeaders);}
.tableCalendar .divCalendarMonthEntry {    padding:5px;}
.divCalendarOptionLinks {    font-size:0.9em;}
.divAppDirectorySummaryProfile { font-size:0.8em; }
.divAppDirectorySummaryProfile .profilePhoto {    float:left;    margin-right:25px;   margin-bottom:25px;}
.divAppDirectorySummaryProfile .profilePhoto a img {    border:0px;}
.divAppDirectorySummaryProfile .name{    font-weight:bold;    font-size:1.2em;}
.divAppDirectorySummaryProfile .name a {    text-decoration:none;}
.divAppDirectorySummaryProfile .name a:hover {    text-decoration:underline;}
.divAppDirectorySummaryProfile .jobTitle{    font-weight:bold;}
.divAppDirectorySummaryProfile .website{    font-weight:bold;}
.divAppDirectorySummaryProfile .email{   font-weight:bold;}
.divAppDirectorySummaryProfile .bioShort{    padding-right:25px;    margin-top:1em;    margin-bottom:1em;    font-size:0.9em;    overflow:hidden;}
.divAppDirectoryProfile {}
.divAppDirectoryProfile .profilePhoto{    float:right;    margin-left:25px;    margin-bottom:25px;}
.divAppDirectoryProfile h2.name {    margin:0px;}
.divAppDirectoryProfile .jobTitle {    font-weight:bold;    margin-bottom:1em;}
.divAppStorePages {    text-align:right;    font-size:14pt;}
.divAppStorePages .page {    display:inline-block;    padding:5px;}
.divAppStorePages .page:hover {}
.divAppStorePages .page a {    display:inline-block;}
.divBlogRollEntry {    margin-bottom:4em;}
.divBlogRollEntry h2 {    margin-bottom:0px;}
.divAppSubscriptions {    margin-bottom:1em;}
.divAppSubscriptions .name {    font-weight:bold;}
#divCollectionMessage {    position:absolute;    position:fixed;    top:0px;    bottom:0px;    left:0px;    right:0px;    background-image:url('/lib/common/images/collectionDivBG.png');    z-index:9998;}
#divCollectionMessageInner {    position:absolute;    top:0px;    left:0px;    width:800px;    height:600px;    background-color:#000000;    z-index:9999;    color:#ffffff;    padding:50px;    text-align:left;    font-size:12pt;    font-family:Arial,Helvetica,sans-serif;    line-height:normal;    overflow:auto;}
#divCollectionMessageInner h2 {    font-family:Arial,Helvetica,sans-serif;    color:#ff9999;    line-height:normal;}
#divCollectionMessageInner .buttonsProceed a {    display:inline-block;    padding:10px 20px;    background-color:#660000;    color:#ffffff;    text-decoration:none;}
#divCollectionMessageInner .buttonsProceed a:hover {    background-color:#330000;}
.divPost {    margin-bottom:1em;}
.divPost .image {    float:left;    margin:0px 10px 10px 0px;}
.divPost .image img {}
.divPost .postBody {    width:100%;}
.divPost .postTitle {    font-size:1.1em;    font-weight:bold;}
.divPost .post {    margin:0.25em 0px;}
.divPost .postDate {    color:#999999;    font-size:0.8em;}
.divSocialNetworkMessageBox {    margin-bottom:1em;    background-color:var(--ColorOverlay1);    padding:15px 30px 15px 15px;}
.divSocialNetworkToolbar {    background-color:var(--ColorOverlay1);    color:var(--ColorContentBG);    margin-bottom:1em;    padding:15px;    position:relative;    white-space:nowrap;}
#divSocialNetworkSearchResults {    position:absolute;    height:250px;    bottom:-250px;    width:100%;    background-color:var(--ColorSectionHeaders);    left:0px;    z-index:999;    overflow:auto;    display:none;}
#divSocialNetworkSearchResultsClose {    position:absolute;    left:0px;right:0px;    bottom:-275px;    z-index:9999;    text-align:right;    display:none;}
.divSocialNetworkToolbar .profileButton, .divSocialNetworkToolbar .signInButton {    float:left;}
.divSocialNetworkToolbar .signOutButton {    float:right;}
.divSocialNetworkToolbar .searchArea {    padding:0px 115px 0px 200px;}
.divSocialNetworkToolbar .signInArea {    float:left;}
.divSocialNetworkToolbar .searchArea input[type=text] {}
.divSocialNetworkToolbar .signInArea input[type=text], .divSocialNetworkToolbar .signInArea input[type=password] {    border:1px solid color:#999999;    padding:5px;    margin-right:5px;    vertical-align:middle;}
.divSocialNetworkMessageBox .photoArea {    float:left;}
.divSocialNetworkMessageBox .messageArea {    padding-left:65px;}
.divSocialNetworkMessageBox .caption {    margin-bottom:0.25em;    font-size:0.8em;}
.divSocialNetworkMessageBox form input[type=text] {    margin-bottom:0.5em;}
.divSocialNetworkMessageBox form input[type=text], .divSocialNetworkMessageBox form input[type=password], .divSocialNetworkMessageBox form textarea {    border:1px solid #999999;    font-family:Arial,Helvetica,sans-serif;    padding:5px;}
.divAppRacesSponsorshipLevel {}
.divAppRacesSponsorshipLevel .title {    font-size:1.2em;}
.divAppRacesSponsorshipLevel .instructions {    font-size:0.8em;}
.divAppRacesSponsorshipLevel .choose {    font-weight:bold;    font-size:0.8em;}
.divAppRacesSponsorshipLevel .choose input[type=radio] {    vertical-align:middle;}
.divFormCaption {    font-size:0.8em;    margin-bottom:0.5em;}
.divFormField {    margin-bottom:0.5em;}
.divFormField input[type=text], .divFormField input[type=password], .divFormField select, .divFormField textarea {    padding:5px;}
.divFormField textarea {    width:90%;}
.divFormField input[type=submit], .divFormField input[type=button] {    padding:10px 20px;}
.appLaunchButton {    padding:10px 20px;}
fieldset {    padding:25px;    margin-bottom:1em;}
fieldset legend {    font-weight:bold;    color:#999999;}
.requiredField:after {    content: ' *';    color:var(--ColorLinkText);}
.divParallax {  background-attachment: fixed;  background-position: center center;  background-size: cover;}
.divTopBottomDivider {    padding:1em 0px;    margin:1em 0px;    border-top:1px solid var(--ColorOverlay1);    border-bottom:1px solid var(--ColorOverlay1);}
.full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
*:has(> .container .system-page > article > .full-width:first-child) { padding-top: 0 !important; }
*:has(> .container .system-page > article > .full-width:last-child) { padding-bottom: 0 !important; }
.fb_iframe_widget iframe {  width:100%;}
@media print {    .noprint {        display:none;    }}
@media screen and (max-width:420px) { .img-responsive { max-width:100% !important;} }
@media only screen and (max-width: 767px) { .divBlogAuthorBox h3 { text-align:center; } .divBlogAuthorBox img { margin:0px auto; } }
.flex-row {    display: flex;    flex-wrap: wrap;}
.flex-row > [class*='col-'] {    display: flex;    flex-direction: column;}
.flex-row.row:after, .flex-row.row:before {    display: flex;}
#divSiteModal {    position:fixed;     z-index:999;     top:0px;     bottom:0px;     left:0px;     right: 0px;     background-color:rgba(255,255,255,.95);     padding:2em;     display:none;    overflow:auto;}
#divSiteModalClose {    position:absolute;    right:15px;    top:15px;}
.wireframe-preview {    padding:2em 0px;    background-color:rgba(0,0,0,.10);    text-align:center;    color:rgba(0,0,0,.25);    font-size:0.8em;}
form.system-niceform  { padding:2em;border:1px solid rgba(0,0,0,.10);background-color:rgba(0,0,0,.05); } form.system-niceform label { opacity:0.75; font-size:0.8em; } form.system-niceform .btn { background-image:none; text-shadow:none; border:0px; } 
a.btn-primary, a.btn-success, a.btn-info, a.btn-warning, a.btn-danger { color:#ffffff; }
.system-content-box { padding:2em;background-color:rgba(0,0,0,.05);margin-bottom:1em; }.system-content-box h3 { margin-top:0px; font-weight:bold; }img.system-spot-image, .system-spot-image img { border:1px solid rgba(0,0,0,.15); padding:2px; }.center-popup-content { height: 100%; width: 100%; max-width: 600px; max-height: 600px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color:#ffffff; padding:2em; overflow:auto; }.center-popup-content .close-button { position:fixed; right:1em; top:1em; cursor:pointer;font-size:1.5em; }.center-popup-content .content {  }.center-popup-wrapper { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 99999; background: rgba(0, 0, 0, 0.9); display: flex; overflow: auto; flex-direction: column; opacity: 1; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); visibility:hidden; }figure.auto-caption { margin-bottom:2em !important; width:100% !important; }figure.auto-caption figcaption { display:block;font-size:0.6em; text-align:center; padding:0.5em; color: rgba(150,150,150, 1); background-color:rgba(0,0,0,.05); }figure.auto-caption figcaption a { color: rgba(150,150,150, 1) !important; text-decoration:none; }.btn, .btn-primary, btn-success, .btn-danger, .btn-warning, .btn-info { background-image:none;text-shadow:none;border:0; }.btn-site, a.btn-site  { background-color:var(--ColorSectionHeaders);color:var(--ColorContentBG); }.btn-site:hover, a.btn-site:hover  { background-color:var(--ColorLinkText);color:var(--ColorContentBG); }.growEffect {  transition: all 0.25s ease; }.growEffect:hover {  -webkit-transform:scale(1.05); transform:scale(1.05); transition: all 0.25s ease; }.placeholder-16-9 { --w: 16; --h: 9; width:100%;aspect-ratio: var(--w) / var(--h); background-color:rgba(0,0,0,.25); } .placeholder-9-16 { --w: 9; --h: 16;width:100%;aspect-ratio: var(--w) / var(--h); background-color:rgba(0,0,0,.25);} .placeholder-1-1 { --w: 1; --h: 1;width:100%;aspect-ratio: var(--w) / var(--h); background-color:rgba(0,0,0,.25);} .placeholder-crop { --fx: 50%; --fy: 50%; width: 100%; aspect-ratio: var(--w) / var(--h); position: relative; overflow: hidden; display: block; } .placeholder-crop > img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: var(--fx) var(--fy); display: block; }.password-reveal-wrapper { position: relative; display: inline-block; width: 100%; }.password-reveal-wrapper input { width: 100%; padding-right: 60px; box-sizing: border-box; }.password-reveal-button { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); border: 0; background: transparent; padding: 4px 6px; cursor: pointer; font-size: 13px; color: #555; }.password-reveal-button:hover { color: #000; }.password-reveal-button:focus { outline: 2px solid currentColor; outline-offset: 2px; }


/* Inherited Custom CSS from Template ID #21570 */

@charset "UTF-8";

:root{--red:#E8181C; --red-dark:#B01212; --red-glow:rgba(232,24,28,.5);
  --bg:#0a0908; --surface:#141210; --surface2:#1c1917; --surface3:#242019;
  --border:#2a2622; --border2:#3a352f;
  --text:#F2EFEC; --muted:#8a827a; --muted2:#6b645d; --white:#fff;
  --ann:#37E0C8; --ann-bg:rgba(55,224,200,.08);
  --disp:-0.03em; --maxw:1300px;}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--red);color:#fff;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}

/* WIREFRAME BANNER */
.wf-banner{background:repeating-linear-gradient(45deg,#1a1714,#1a1714 12px,#161310 12px,#161310 24px);
  border-bottom:1px solid var(--border);padding:9px 20px;display:flex;align-items:center;justify-content:center;
  gap:14px;font-size:12px;letter-spacing:.06em;color:var(--muted);text-align:center;flex-wrap:wrap;}
.wf-banner b{color:var(--ann);font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.wf-toggle{background:transparent;border:1px solid var(--ann);color:var(--ann);font:inherit;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:5px;cursor:pointer;transition:.15s;}
.wf-toggle:hover{background:var(--ann-bg);}

/* ANNOTATIONS */
.ann{position:relative;border:1px dashed var(--ann);border-radius:10px;background:var(--ann-bg);}
.ann::before{content:attr(data-ann);position:absolute;top:-1px;left:14px;transform:translateY(-50%);
  background:#0d1512;color:var(--ann);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 9px;border:1px dashed var(--ann);border-radius:20px;white-space:nowrap;z-index:5;}
body.no-ann .ann{border-color:transparent;background:transparent;}
body.no-ann .ann::before{display:none;}
.ann-note{display:block;color:var(--ann);font-size:11.5px;line-height:1.5;border-left:2px solid var(--ann);
  padding-left:10px;margin-top:12px;}
body.no-ann .ann-note{display:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ============ TOP BAR ============ */
.topbar{background:linear-gradient(90deg,#141210,#1c1917);border-bottom:1px solid var(--border);font-size:13px;color:var(--muted);}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:9px 24px;display:flex;align-items:center;justify-content:center;gap:16px;text-align:center;flex-wrap:wrap;}
.topbar-in .msg{color:var(--text);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.topbar-in .msg b{color:var(--red);font-weight:900;}
.topbar-btn{display:inline-flex;align-items:center;gap:8px;background:#FFC21E;color:#1a1206;font-weight:800;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:7px 18px;border-radius:20px;transition:.15s;
  box-shadow:0 0 0 0 rgba(255,194,30,.5);animation:pulseGlow 2.6s infinite;}
.topbar-btn:hover{background:#ffd150;transform:translateY(-1px);animation:none;}
.topbar-btn svg{opacity:.85;}
@keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(255,194,30,.5);}70%{box-shadow:0 0 0 9px rgba(255,194,30,0);}100%{box-shadow:0 0 0 0 rgba(255,194,30,0);}}

@media (prefers-reduced-motion:reduce){
  .topbar-btn{animation:none;}
}

/* ============ HEADER ============ */
header{border-bottom:1px solid var(--border);background:var(--bg);position:relative;overflow:hidden;}
.head-bg{position:absolute;inset:0;background-repeat:no-repeat;background-position:top center;background-size:cover;
  opacity:.3;pointer-events:none;z-index:0;}
.head-in{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;z-index:1;}

/* logo lockup (header) */
.brand-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.brand-logo img{width:440px;max-width:80vw;height:auto;display:block;}
.brand-tag{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;}
.brand-tag b{color:var(--red);font-weight:800;}

/* footer brand mark (kept) */
.brand{display:flex;align-items:center;gap:12px;}
.brand .mk{width:44px;height:44px;border-radius:9px;background:var(--red);display:grid;place-items:center;
  color:#fff;font-size:24px;font-weight:900;box-shadow:0 0 24px var(--red-glow);}
.brand .bn{font-size:20px;font-weight:900;letter-spacing:var(--disp);line-height:1.05;}
.brand .bn .tv{color:var(--red);}

/* right-side actions */
.head-actions{display:flex;align-items:center;gap:14px;}

/* social icons GÇö color-coded per network */
.socials{display:flex;gap:9px;}
.socials a{width:40px;height:40px;border:1px solid var(--border2);border-radius:10px;display:grid;place-items:center;
  background:var(--surface);transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;}
.socials a.s-yt{color:#FF0000;}
.socials a.s-ig{color:#E1306C;}
.socials a.s-fb{color:#1877F2;}
.socials a.s-tw{color:#9146FF;}
.socials a:hover{transform:translateY(-3px);color:#fff;border-color:transparent;}
.socials a.s-yt:hover{background:#FF0000;box-shadow:0 8px 20px -6px rgba(255,0,0,.65);}
.socials a.s-ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);box-shadow:0 8px 20px -6px rgba(221,42,123,.65);}
.socials a.s-fb:hover{background:#1877F2;box-shadow:0 8px 20px -6px rgba(24,119,242,.65);}
.socials a.s-tw:hover{background:#9146FF;box-shadow:0 8px 20px -6px rgba(145,70,255,.65);}
.btn-subscribe{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;padding:11px 22px;}

/* subscribe modal (holds the full signup form) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);z-index:200;
  display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{position:relative;background:var(--surface);border:1px solid var(--border2);border-radius:16px;
  padding:28px;width:470px;max-width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.modal-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;border:1px solid var(--border2);
  background:transparent;color:var(--muted);font-size:14px;cursor:pointer;transition:.15s;line-height:1;}
.modal-x:hover{color:#fff;border-color:var(--muted);}
.su-title{font-size:19px;font-weight:900;letter-spacing:-.01em;}
.su-sub{font-size:13px;color:var(--muted);margin-top:-10px;}
.su-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.modal input{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:11px 13px;
  color:var(--text);font:inherit;font-size:13.5px;outline:none;width:100%;}
.modal input::placeholder{color:var(--muted2);}
.modal input:focus{border-color:var(--red);}
.su-roles{display:flex;align-items:center;gap:8px 15px;flex-wrap:wrap;}
.su-roles-lbl{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
.su-roles label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer;}
.su-roles input[type=radio]{accent-color:var(--red);width:16px;height:16px;cursor:pointer;}
.su-submit{width:100%;padding:12px;font-size:14px;margin-top:2px;}
.btn{font:inherit;font-weight:800;font-size:13px;border-radius:8px;padding:9px 16px;cursor:pointer;transition:.15s;
  border:1px solid transparent;white-space:nowrap;}
.btn-red{background:var(--red);color:#fff;box-shadow:0 4px 20px -6px var(--red-glow);}
.btn-red:hover{background:var(--red-dark);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border2);}
.btn-ghost:hover{border-color:var(--muted);}

/* ============ MAIN NAV (page links) ============ */
nav{position:sticky;top:0;z-index:60;background:var(--red);border-bottom:1px solid var(--red-dark);border-top:1px solid rgba(0,0,0,.18);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:2px;height:52px;}
.nav-in a{color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em;padding:8px 16px;border-radius:7px;transition:.15s;position:relative;}
.nav-in a:hover{background:rgba(0,0,0,.2);color:#fff;}
.nav-in a.on{background:#0a0908;color:#fff;}
.nav-in a.on:hover{background:#0a0908;color:#fff;}
.has-sub{position:relative;}
.has-sub>a::after{content:"\25BE ";font-size:10px;margin-left:6px;color:currentColor;opacity:.65;vertical-align:middle;}
.submenu{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;padding:8px;min-width:280px;display:none;flex-direction:column;gap:2px;box-shadow:0 20px 44px rgba(0,0,0,.55);z-index:70;}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:flex;}
.submenu a{font-size:13.5px;font-weight:600;padding:9px 12px;color:var(--text);border-radius:7px;}
.submenu a:hover{color:#fff;background:var(--surface2);}
.submenu .sep{height:1px;background:var(--border);margin:5px 4px;}

/* account button */
.nav-in a.acct{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:#0a0908;color:#fff;
  font-weight:800;padding:8px 16px;border-radius:7px;box-shadow:0 3px 12px -4px rgba(0,0,0,.6);}
.nav-in a.acct:hover{background:#241f1c;color:#fff;transform:translateY(-1px);}
.nav-in a.acct svg{opacity:.9;}

/* ============ SECTIONS ============ */
.section{padding:40px 0;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px;}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px;}
.sec-title{font-size:clamp(21px,2.4vw,28px);font-weight:900;letter-spacing:var(--disp);line-height:1.05;}
.sec-link{color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap;transition:.15s;}
.sec-link:hover{color:var(--red);}

/* ============ LIVE PLAYER + CHAT ============ */
.live-wrap{padding:26px 0 48px;}
.live-grid{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:stretch;transition:grid-template-columns .25s;}
.live-grid.chat-off{grid-template-columns:1fr 0px;}
.live-grid.chat-off .chat{opacity:0;pointer-events:none;border-width:0;}

/* The chat column must never drive the row height. align-items:stretch makes
   both columns match the TALLER one, so an in-flow chat panel grows the row
   with every message and drags the video down with it. The wrapper is the
   grid item and stretches to the player's height; the panel is taken out of
   flow inside it, so the row is sized by the player alone and the message
   list scrolls once it fills. */
.chat-col{position:relative;min-width:0;}
.chat-col > .chat{position:absolute;inset:0;}
.player{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:radial-gradient(ellipse 70% 90% at 50% 30%,rgba(232,24,28,.16),transparent 70%),linear-gradient(160deg,#191512,#0d0b0a);
  display:flex;flex-direction:column;}
.player-stage{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;}
.player-stage::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:44px 44px;pointer-events:none;}
.play-btn{width:76px;height:76px;border-radius:50%;background:rgba(232,24,28,.92);display:grid;place-items:center;
  box-shadow:0 0 44px var(--red-glow);cursor:pointer;transition:.2s;z-index:2;}
.play-btn:hover{transform:scale(1.06);}
.player-ph{position:absolute;bottom:60px;text-align:center;color:var(--muted);font-size:12.5px;z-index:2;padding:0 20px;}
.live-tag{position:absolute;top:16px;left:16px;z-index:3;display:flex;align-items:center;gap:7px;background:var(--red);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;padding:6px 12px;border-radius:6px;
  animation:liveAutoHide 4.5s ease forwards;}
.player:hover .live-tag{animation:none;opacity:1;visibility:visible;transition:opacity .3s;}
@keyframes liveAutoHide{0%,72%{opacity:1;visibility:visible;}100%{opacity:0;visibility:hidden;}}

@media (prefers-reduced-motion:reduce){
  .live-tag{animation:none;}
}
.live-tag .d{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.2s infinite;}
.player-bar{display:flex;align-items:center;gap:14px;padding:15px 18px;border-top:1px solid var(--border);flex-wrap:wrap;}
.pb-title{font-weight:800;font-size:15.5px;}
.pb-sub{color:var(--muted);font-size:12.5px;margin-top:2px;}
.pb-actions{margin-left:auto;display:flex;gap:9px;}
.chip{background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:8px 13px;font-size:12.5px;
  font-weight:700;color:var(--text);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:7px;}
.chip:hover{border-color:var(--muted);}
.chip.active{background:var(--red);border-color:var(--red);color:#fff;}

/* Chat panel styling lives in BM Live Stream Projects/bmtv-chat/chat-widget.html
   and arrives with the widget include at the end of this file GÇö one source, so
   this page and the sandbox demo cannot drift apart. Only layout stays here:
   where the panel sits and how it behaves at this page's breakpoints.
   NOTE: without the widget (page opened off disk rather than served) the panel
   renders unstyled. It is non-functional off disk either way GÇö Supabase realtime
   needs a real origin. */
.chat{transition:opacity .2s;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--surface);min-width:0;}
.chat-head{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid var(--border);}
.chat-head .t{font-weight:800;font-size:13px;}
.chat-head .cnt{margin-left:auto;color:var(--muted);font-size:11.5px;font-weight:600;}
.chat-body{flex:1;overflow-y:auto;padding:13px 15px;display:flex;flex-direction:column;gap:12px;min-height:210px;max-height:340px;}
.msg{font-size:13px;line-height:1.45;}
.msg .u{font-weight:800;margin-right:6px;}
.msg .u.mod{color:var(--red);}
.msg .u.a{color:#5aa9ff;}
.msg .u.b{color:#c58bff;}
.msg .u.c{color:#ffb14e;}
.msg .u.d{color:#4ecb8b;}
.msg .txt{opacity:.92;}
.sys-msg{font-size:11.5px;color:var(--muted2);text-align:center;font-style:italic;}
.chat-foot{border-top:1px solid var(--border);padding:11px;display:flex;gap:8px;}
.chat-foot input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font:inherit;font-size:13px;outline:none;}
.chat-foot input:focus{border-color:var(--red);}
.chat-send{background:var(--red);border:none;color:#fff;border-radius:8px;padding:0 14px;font-weight:800;cursor:pointer;}

/* ============ UPCOMING (playlist, no thumbs) ============ */
.up-section,.trend-section{background:radial-gradient(140% 120% at 50% 0%,rgba(232,24,28,.08),transparent 55%),#241c15;
  border-top:1px solid #3a332b;border-bottom:1px solid #3a332b;}
.trend-section .thumb{background:linear-gradient(150deg,#17110a,#0a0705);border-color:#3a332b;}

/* Latest Videos GÇö full-width section with an absolute background-image holder (image TBD) */
.latest-section{position:relative;overflow:hidden;}
.latest-section .wrap{position:relative;z-index:1;}
.latest-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:cover;}
.latest-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.up-list{display:flex;flex-direction:column;border:1px solid var(--border2);border-radius:12px;overflow:hidden;
  background:#0a0807;box-shadow:0 12px 34px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.03);}
.up-row{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.055);transition:.15s;}
.up-row:last-child{border-bottom:none;}
.up-row:hover{background:rgba(255,255,255,.05);}
.up-row.now{background:linear-gradient(90deg,rgba(232,24,28,.22),rgba(232,24,28,.03));box-shadow:inset 3px 0 0 var(--red);}
.up-row.now:hover{background:linear-gradient(90deg,rgba(232,24,28,.28),rgba(232,24,28,.05));}
.up-when{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted);width:78px;flex-shrink:0;font-variant-numeric:tabular-nums;}
.up-row.now .up-when{color:var(--red);display:flex;align-items:center;gap:7px;}
.up-row.now .up-when .d{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.3s infinite;box-shadow:0 0 8px var(--red);}
.up-artist{font-weight:800;font-size:14.5px;color:var(--text);}
.up-row.now .up-artist{color:#fff;}
.up-song{color:var(--muted);font-size:13px;}
.up-dur{margin-left:auto;font-size:12px;color:var(--muted2);font-variant-numeric:tabular-nums;flex-shrink:0;}
.up-row.now .up-dur{color:#f0b7b7;}
.up-mid{min-width:0;}

/* ============ CARD RAILS ============ */
.grid-cat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.rail{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:12px 0 10px;scroll-snap-type:x mandatory;}
.rail::-webkit-scrollbar{height:8px;}
.rail::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
.card{scroll-snap-align:start;flex:0 0 auto;width:270px;cursor:pointer;}
.card.full{width:auto;}
.card .thumb{aspect-ratio:16/9;border-radius:11px;overflow:hidden;position:relative;border:1px solid var(--border);
  background:linear-gradient(150deg,var(--surface3),#0e0c0b);transition:.2s;display:grid;place-items:center;}
.card:hover .thumb{border-color:var(--red);transform:translateY(-3px);}

/* branded thumbnail tiles (placeholder art until real posters arrive via the endpoint) */
.thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.45),transparent 55%),radial-gradient(120% 90% at 80% 10%,rgba(255,255,255,.06),transparent 60%);}
.thumb .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.thumb .ph-ico{position:absolute;right:6px;bottom:-2px;z-index:0;color:#fff;opacity:.09;}
.thumb .ph-ico svg{width:86px;height:86px;}
.thumb::after{content:"";position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.85);transition:.2s;
  background:rgba(0,0,0,.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 54% center;background-size:auto,16px;}
.card:hover .thumb::after{background-color:var(--red);border-color:var(--red);transform:translate(-50%,-50%) scale(1.08);}
.cat-tag,.dur,.badge-new{z-index:3;}

/* color variety across the grid/rail */
.rail .card:nth-child(6n+1) .thumb,.grid-cat .card:nth-child(6n+1) .thumb{background:linear-gradient(150deg,#3a1616,#0b0706);}
.rail .card:nth-child(6n+2) .thumb,.grid-cat .card:nth-child(6n+2) .thumb{background:linear-gradient(150deg,#2c2110,#0a0806);}
.rail .card:nth-child(6n+3) .thumb,.grid-cat .card:nth-child(6n+3) .thumb{background:linear-gradient(150deg,#10282c,#070b0c);}
.rail .card:nth-child(6n+4) .thumb,.grid-cat .card:nth-child(6n+4) .thumb{background:linear-gradient(150deg,#221636,#08060d);}
.rail .card:nth-child(6n+5) .thumb,.grid-cat .card:nth-child(6n+5) .thumb{background:linear-gradient(150deg,#122a1c,#06100b);}
.rail .card:nth-child(6n+6) .thumb,.grid-cat .card:nth-child(6n+6) .thumb{background:linear-gradient(150deg,#112034,#06080d);}
.cat-tag{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.6);border:1px solid var(--border2);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:4px;text-transform:uppercase;}
.dur{position:absolute;bottom:9px;right:9px;background:rgba(0,0,0,.75);color:#fff;font-size:11px;font-weight:700;padding:3px 7px;border-radius:4px;}
.card .c-title{font-weight:700;font-size:14px;margin-top:11px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .c-meta{color:var(--muted);font-size:12px;margin-top:4px;}

/* ============ WANT YOUR NETWORK ============ */
.cc{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);
  background:radial-gradient(ellipse 60% 100% at 15% 50%,rgba(232,24,28,.18),transparent 60%),linear-gradient(120deg,#171310,#0d0b0a);
  padding:42px 40px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;}
.cc-txt{flex:1;min-width:280px;}
.cc-eye{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px;}
.cc-h{font-size:clamp(23px,3vw,32px);font-weight:900;letter-spacing:var(--disp);line-height:1.08;margin-bottom:13px;}
.cc-p{color:var(--muted);font-size:15px;max-width:520px;margin-bottom:22px;}
.cc-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--border);margin-top:26px;background:var(--surface);}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:48px 24px 28px;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:44px;}
.foot-brand .brand{margin-bottom:14px;}
.foot-logo{display:inline-block;margin-bottom:16px;}
.foot-logo img{width:220px;max-width:100%;height:auto;display:block;}
.foot-brand p{color:var(--muted);font-size:13px;max-width:300px;}
.foot-col h4{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:16px;}
.foot-col a{display:block;color:var(--muted);font-size:13.5px;margin-bottom:11px;transition:.15s;}
.foot-col a:hover{color:#fff;}
.foot-signup .lbl{font-size:12px;color:var(--muted);margin-bottom:9px;line-height:1.5;}
.foot-cc{display:flex;align-items:center;gap:9px;margin-top:20px;color:var(--muted);font-size:12px;}
.foot-cc .ccmk{font-weight:900;color:var(--text);letter-spacing:-.02em;}
.foot-bot{border-top:1px solid var(--border);margin-top:38px;padding-top:22px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted2);font-size:12px;}
.foot-socials{display:flex;gap:9px;}
.foot-socials a{width:34px;height:34px;border:1px solid var(--border2);border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:.15s;}
.foot-socials a:hover{color:#fff;border-color:var(--red);}
.socials-sm a{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;margin:0;}
.socials-sm a svg{display:block;}

@media(max-width:1000px){
  .head-in{gap:24px;}
  .live-grid{grid-template-columns:1fr;}
  .live-grid.chat-off{grid-template-columns:1fr;}
}

/* Stacked: there is no player height to fill, so the panel goes back in
     flow and a fixed cap gives the list something to scroll inside. */

@media(max-width:1000px){
  .chat-col > .chat{position:static;}
  .chat{max-height:380px;}
  .grid-cat{grid-template-columns:1fr;}
  .foot-top{grid-template-columns:1fr 1fr;gap:32px;}
}

@media(max-width:680px){
  .nav-in{overflow-x:auto;height:48px;}
  .nav-in a.acct{margin-left:0;}
  .brand-logo img{width:300px;}
  .foot-top{grid-template-columns:1fr;}
  .up-song{display:none;}
}

/* ============ SHOW / CATEGORY PAGE ============ */
.show-hero{background:radial-gradient(120% 100% at 20% 0%,rgba(232,24,28,.14),transparent 55%),#15110d;border-bottom:1px solid #3a332b;padding:26px 0 42px;}
.show-crumb{font-size:12px;color:var(--muted);margin-bottom:22px;display:flex;gap:8px;align-items:center;letter-spacing:.02em;}
.show-crumb a{color:var(--muted);}
.show-crumb a:hover{color:#fff;}
.show-crumb .sep{opacity:.5;}
.show-hero-in{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;}
.show-hero-media{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border2);aspect-ratio:16/9;background:linear-gradient(150deg,#301a10,#0a0705);box-shadow:0 16px 40px -18px rgba(0,0,0,.8);}
.show-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.ep-badge{position:absolute;top:12px;left:12px;z-index:3;background:var(--red);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:5px;}
.show-kicker{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px;}
.show-title{font-size:clamp(30px,4.6vw,52px);font-weight:900;letter-spacing:var(--disp);line-height:1.02;margin-bottom:16px;}
.show-desc{font-size:15px;color:var(--muted);line-height:1.65;max-width:520px;margin-bottom:20px;}
.show-stats{display:flex;gap:26px;margin-bottom:24px;flex-wrap:wrap;}
.show-stat .n{font-size:22px;font-weight:900;color:#fff;line-height:1;display:block;}
.show-stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:6px;display:block;}
.show-actions{display:flex;gap:12px;flex-wrap:wrap;}
.ott-wrap{margin-top:4px;min-height:160px;}
.ott-fallback{border:1px dashed var(--border2);border-radius:12px;background:var(--surface);padding:44px 24px;text-align:center;color:var(--muted);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.ott-fallback .pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border2);border-radius:20px;padding:8px 16px;color:var(--text);font-weight:700;font-size:12.5px;}

/* --- TEMP grid workaround (CC-08): force grid + strip carousel chrome --- */
.ott-wrap .ott-track.ott-track-vertical{display:grid !important;grid-auto-flow:row !important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;gap:16px !important;transform:none !important;overflow:visible !important;scroll-snap-type:none !important;}
.ott-wrap .ott-carousel::before,.ott-wrap .ott-carousel::after{content:none !important;display:none !important;opacity:0 !important;}
.ott-wrap .ott-track-nav,.ott-wrap .ott-track-nav-prev,.ott-wrap .ott-track-nav-next{display:none !important;}
.ott-wrap .ott-track-spacer{display:none !important;}
.ott-wrap .ott-carousel{overflow:visible !important;}
.ott-empty{border:1px dashed var(--border2);border-radius:14px;background:var(--surface);
  padding:44px 28px;text-align:center;margin-top:8px;}
.ott-empty-icon{width:46px;height:46px;border-radius:50%;background:var(--surface2);border:1px solid var(--border2);
  color:var(--red);font-size:17px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.ott-empty-h{font-size:18px;font-weight:900;letter-spacing:-.015em;margin-bottom:9px;}
.ott-empty-p{font-size:14px;color:var(--muted);line-height:1.6;max-width:520px;margin:0 auto 20px;}
.ott-empty-p b{color:var(--text);}

/* ============ ACCOUNT ============ */
.ac-hero{background:radial-gradient(120% 100% at 20% 0%,rgba(232,24,28,.14),transparent 55%),#15110d;
  border-bottom:1px solid #3a332b;padding:26px 0 30px;}
.ac-crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.ac-crumb a{color:var(--muted);transition:.15s;}
.ac-crumb a:hover{color:var(--red);}
.ac-crumb .sep{margin:0 7px;color:var(--muted2);}
.ac-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:11px;}
.ac-title{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:var(--disp);line-height:1.02;margin-bottom:14px;}
.ac-desc{color:var(--muted);font-size:15.5px;max-width:620px;line-height:1.6;}
.ac-slot{border:2px dashed var(--border2);border-radius:16px;background:var(--surface);
  padding:82px 28px;text-align:center;}
.ac-slot-mark{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(26px,4.4vw,46px);font-weight:700;letter-spacing:.05em;color:var(--muted2);margin-bottom:12px;}
.ac-slot-p{font-size:14px;color:var(--muted);}

@media (max-width:760px){
  .ac-slot{padding:56px 20px;}
}

/* ============ SCHEDULE PAGE ============ */
.sch-hero{background:radial-gradient(120% 100% at 20% 0%,rgba(232,24,28,.14),transparent 55%),#15110d;
  border-bottom:1px solid #3a332b;padding:26px 0 32px;}
.sch-crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.sch-crumb a{color:var(--muted);transition:.15s;}
.sch-crumb a:hover{color:var(--red);}
.sch-crumb .sep{margin:0 7px;color:var(--muted2);}
.sch-hero-in{display:grid;grid-template-columns:1.6fr .7fr;gap:34px;align-items:center;}
.sch-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:11px;}
.sch-title{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:var(--disp);line-height:1.02;margin-bottom:14px;}
.sch-desc{color:var(--muted);font-size:15.5px;max-width:640px;line-height:1.6;}
.sch-desc b{color:var(--text);}
.sch-hero-side{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
.sch-tz{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--red);
  border-radius:10px;padding:13px 16px;}
.sch-tz-k{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);}
.sch-tz-v{display:block;font-size:17px;font-weight:900;letter-spacing:var(--disp);margin-top:2px;}
.sch-hero-btn{justify-content:center;text-align:center;}

/* card grid */
.sch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sch-grid-vod{grid-template-columns:repeat(3,1fr);}
.sch-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s;}
.sch-card:hover{border-color:var(--border2);transform:translateY(-3px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);}
.sch-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#100d0b;}
.sch-art img{width:100%;height:100%;object-fit:cover;transition:.35s;}
.sch-card:hover .sch-art img{transform:scale(1.035);}

/* keeps bright logo art from glaring against the dark card */
.sch-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,8,.10) 0%,rgba(10,9,8,0) 42%,rgba(10,9,8,.62) 100%);}
.sch-badge{position:absolute;top:10px;left:10px;z-index:2;
  background:var(--red);color:#fff;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;box-shadow:0 3px 14px -4px rgba(0,0,0,.8);}
.sch-badge.is-vod{background:var(--surface3);color:var(--muted);border:1px solid var(--border2);}
.sch-body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1;}
.sch-name{font-size:15.5px;font-weight:900;letter-spacing:-.015em;line-height:1.25;margin-bottom:13px;}
.sch-slot{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--border);}
.sch-slot:first-of-type{border-top:none;padding-top:0;}
.sch-lbl{flex-shrink:0;width:54px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);}
.sch-slot.is-live .sch-lbl{color:var(--red);}
.sch-when{font-size:13px;color:var(--text);line-height:1.4;}
.sch-slot.is-live .sch-when{font-weight:700;}
.sch-when.is-off{color:var(--muted2);font-style:italic;}
.sch-link{margin-top:auto;padding-top:13px;font-size:12.5px;font-weight:800;color:var(--muted);transition:.15s;}
.sch-link span{display:inline-block;transition:.15s;}
.sch-link:hover{color:var(--red);}
.sch-link:hover span{transform:translateX(3px);}

@media (max-width:1040px){
  .sch-grid,.sch-grid-vod{grid-template-columns:repeat(2,1fr);}
  .sch-hero-in{grid-template-columns:1fr;}
  .sch-hero-side{flex-direction:row;flex-wrap:wrap;}
  .sch-tz{flex:1;min-width:180px;}
}

@media (max-width:620px){
  .sch-grid,.sch-grid-vod{grid-template-columns:1fr;}
}

/* ============ THE BODEGA ============ */
.bd-hero{background:radial-gradient(120% 100% at 20% 0%,rgba(232,24,28,.14),transparent 55%),#15110d;
  border-bottom:1px solid #3a332b;padding:26px 0 30px;}
.bd-crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.bd-crumb a{color:var(--muted);transition:.15s;}
.bd-crumb a:hover{color:var(--red);}
.bd-crumb .sep{margin:0 7px;color:var(--muted2);}
.bd-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:11px;}
.bd-title{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:var(--disp);line-height:1.02;margin-bottom:14px;}
.bd-desc{color:var(--muted);font-size:15.5px;max-width:620px;line-height:1.6;}

/* rotating ad banner */
.bd-banner-wrap{padding-top:28px;}
.bd-banner{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border2);
  background:#100d0b;min-height:260px;}
.bd-slides{position:relative;}

/* horizontal padding clears the 38px nav arrows (left:14px) so copy never sits under them */
.bd-slide{position:relative;min-height:260px;display:flex;align-items:center;padding:34px 72px 46px;}
.bd-slide[hidden]{display:none;}
.bd-slide.is-on{animation:bdFade .45s ease;}
@keyframes bdFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* each slot gets its own wash so rotation is obvious even with placeholder art */
.bd-slide.s1{background:linear-gradient(115deg,#3a1410 0%,#1a0f0c 55%,#0a0908 100%);}
.bd-slide.s2{background:linear-gradient(115deg,#12242e 0%,#0f1519 55%,#0a0908 100%);}
.bd-slide.s3{background:linear-gradient(115deg,#2e2413 0%,#191408 55%,#0a0908 100%);}
.bd-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 14px,transparent 14px 28px);}
.bd-slide-in{position:relative;z-index:2;max-width:620px;}
.bd-tag{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ann);border:1px dashed var(--ann);background:var(--ann-bg);
  padding:4px 10px;border-radius:20px;margin-bottom:14px;}

/* the slot tags are wireframe scaffolding -- hide them with the rest of the notes */
body.no-ann .bd-tag{display:none;}
.bd-slide-h{font-size:clamp(22px,3vw,34px);font-weight:900;letter-spacing:var(--disp);line-height:1.08;margin-bottom:10px;}
.bd-slide-p{color:var(--muted);font-size:14.5px;line-height:1.55;margin-bottom:18px;max-width:480px;}
.bd-slide-btn{cursor:default;}
.bd-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border2);
  background:rgba(10,9,8,.62);color:var(--text);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;backdrop-filter:blur(3px);}
.bd-nav:hover{background:var(--red);border-color:var(--red);color:#fff;}
.bd-nav.prev{left:14px;}
.bd-nav.next{right:14px;}
.bd-dots{position:absolute;left:0;right:0;bottom:14px;z-index:5;display:flex;justify-content:center;gap:8px;}
.bd-dot{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;transition:.15s;
  background:rgba(242,239,236,.32);border:none;}
.bd-dot:hover{background:rgba(242,239,236,.6);}
.bd-dot.is-on{background:var(--red);width:22px;border-radius:20px;}

/* store placeholder */
.bd-store{border:2px dashed var(--border2);border-radius:16px;background:var(--surface);
  padding:72px 28px;text-align:center;}
.bd-store-mark{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(30px,5vw,52px);font-weight:700;letter-spacing:.06em;color:var(--muted2);margin-bottom:12px;}
.bd-store-p{font-size:14px;color:var(--muted);}

@media (max-width:760px){
  .bd-slide{padding:28px 46px 46px;min-height:240px;}
  .bd-nav{width:32px;height:32px;font-size:17px;}
  .bd-nav.prev{left:8px;}
  .bd-nav.next{right:8px;}
  .bd-store{padding:52px 20px;}
}

/* ============ CONTACT PAGE ============ */
.ct-hero{background:radial-gradient(120% 100% at 20% 0%,rgba(232,24,28,.14),transparent 55%),#15110d;
  border-bottom:1px solid #3a332b;padding:26px 0 30px;}
.ct-crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.ct-crumb a{color:var(--muted);transition:.15s;}
.ct-crumb a:hover{color:var(--red);}
.ct-crumb .sep{margin:0 7px;color:var(--muted2);}
.ct-hero-in{display:grid;grid-template-columns:1.5fr .8fr;gap:34px;align-items:center;}
.ct-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:11px;}
.ct-title{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:var(--disp);line-height:1.02;margin-bottom:14px;}
.ct-desc{color:var(--muted);font-size:15.5px;max-width:620px;line-height:1.6;}
.ct-hero-side{display:flex;flex-direction:column;gap:12px;}
.ct-hero-stat{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--red);
  border-radius:10px;padding:13px 16px;}
.ct-hero-stat .n{display:block;font-size:18px;font-weight:900;letter-spacing:var(--disp);}
.ct-hero-stat .l{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}

/* topic quick-picks */
.ct-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;}
.ct-chip{font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:.15s;
  background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:8px 15px;}
.ct-chip:hover{color:var(--text);border-color:var(--muted2);}
.ct-chip.is-on{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 4px 18px -6px var(--red-glow);}

/* layout */
.ct-grid{display:grid;grid-template-columns:1.6fr .85fr;gap:32px;align-items:start;}

/* form */
.ct-form{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 26px 24px;}
.ct-form-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.ct-form-sub{color:var(--muted);font-size:13px;margin-top:6px;}
.ct-field{margin-bottom:16px;}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ct-field label,.ct-media-lg{display:block;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.req{color:var(--red);}
.ct-form input[type=text],.ct-form input[type=email],.ct-form input[type=tel], .ct-form input[type=url],.ct-form select,.ct-form textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;
  padding:11px 13px;color:var(--text);font:inherit;font-size:14px;outline:none;transition:.15s;}
.ct-form textarea{resize:vertical;min-height:120px;line-height:1.55;}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:var(--muted2);}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(232,24,28,.12);}
.ct-form select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:38px;}
.ct-form select option{background:var(--surface2);color:var(--text);}
.ct-help{font-size:12px;color:var(--muted2);margin-top:6px;line-height:1.45;}

/* conditional material block */
.ct-media{border:1px solid var(--border2);border-radius:12px;background:var(--surface2);
  padding:20px;margin:6px 0 20px;}
.ct-media-lg{padding:0 6px;margin-bottom:0;color:var(--red);}
.ct-media-note{font-size:13px;color:var(--muted);line-height:1.55;margin:10px 0 18px;}
.ct-media-note b{color:var(--text);}
.ct-media .ct-form-field:last-child{margin-bottom:0;}

/* checkboxes */
.ct-check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:16px;}
.ct-check input[type=checkbox]{accent-color:var(--red);width:17px;height:17px;margin-top:1px;flex-shrink:0;cursor:pointer;}
.ct-check span{flex:1;}
.ct-submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--border);}
.ct-submit{font-size:14px;padding:12px 26px;}
.ct-submit-note{font-size:12.5px;color:var(--muted2);}
.ct-submit-note.is-ok{color:var(--ann);}
.ct-submit-note.is-warn{color:#ffb03a;}

/* sidebar */
.ct-side{display:flex;flex-direction:column;gap:16px;}
.ct-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;}
.ct-card-h{font-size:14.5px;font-weight:900;letter-spacing:-.01em;margin-bottom:14px;}
.ct-list{list-style:none;display:flex;flex-direction:column;gap:11px;}
.ct-list li{font-size:13.2px;color:var(--muted);line-height:1.5;padding-left:15px;position:relative;}
.ct-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--red);}
.ct-list b{color:var(--text);}
.ct-steps{list-style:none;display:flex;flex-direction:column;gap:13px;}
.ct-steps li{display:flex;gap:12px;align-items:flex-start;font-size:13.2px;color:var(--muted);line-height:1.5;}
.ct-steps .n{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;
  font-size:11.5px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.ct-steps b{color:var(--text);}
.ct-mail{margin-bottom:14px;}
.ct-mail:last-of-type{margin-bottom:0;}
.ct-mail-lbl{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);margin-bottom:4px;}
.ct-mail a{color:var(--text);font-size:13.5px;font-weight:700;border-bottom:1px solid var(--border2);transition:.15s;}
.ct-mail a:hover{color:var(--red);border-color:var(--red);}
.ct-token{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px !important;color:var(--ann) !important;}
.ct-ann-inline{margin-top:14px;padding:10px 12px;}
.ct-socials{display:flex;gap:9px;}
.ct-soc{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);color:var(--muted);transition:.15s;}
.ct-soc:hover{transform:translateY(-2px);color:#fff;}
.ct-soc.yt:hover{background:#FF0000;border-color:#FF0000;}
.ct-soc.ig:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);border-color:#dc2743;}
.ct-soc.fb:hover{background:#1877F2;border-color:#1877F2;}
.ct-soc.tw:hover{background:#9146FF;border-color:#9146FF;}

@media (max-width:980px){
  .ct-grid{grid-template-columns:1fr;}
  .ct-hero-in{grid-template-columns:1fr;}
  .ct-hero-side{flex-direction:row;flex-wrap:wrap;}
  .ct-hero-stat{flex:1;min-width:180px;}
}

@media (max-width:640px){
  .ct-row{grid-template-columns:1fr;}
  .ct-form{padding:20px 18px;}
}
.ct-sla{margin-top:16px;padding-top:15px;border-top:1px solid var(--border);}
.ct-sla-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;}
.ct-sla-k{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);}
.ct-sla-v{font-size:13.5px;font-weight:900;color:var(--red);letter-spacing:-.01em;white-space:nowrap;}
.ct-sla-note{font-size:12.5px;color:var(--muted);line-height:1.5;}
.ct-sla-note b{color:var(--text);}

/* ============ WORK WITH US PAGES ============ */
.wk-hero{background:radial-gradient(120% 100% at 20% 0%,rgba(232,24,28,.14),transparent 55%),#15110d;
  border-bottom:1px solid #3a332b;padding:26px 0 34px;}
.wk-crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.wk-crumb a{color:var(--muted);transition:.15s;}
.wk-crumb a:hover{color:var(--red);}
.wk-crumb .sep{margin:0 7px;color:var(--muted2);}
.wk-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:11px;}
.wk-title{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:var(--disp);line-height:1.02;margin-bottom:14px;}
.wk-desc{color:var(--muted);font-size:15.5px;max-width:700px;line-height:1.6;}
.wk-desc b{color:var(--text);}
.wk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.wk-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.wk-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;}
.wk-card h3{font-size:15.5px;font-weight:900;letter-spacing:-.01em;margin-bottom:9px;}
.wk-card p{font-size:13.5px;color:var(--muted);line-height:1.55;}
.wk-card .wk-eye{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px;}
.wk-card ul{list-style:none;margin-top:11px;display:flex;flex-direction:column;gap:8px;}
.wk-card li{font-size:13px;color:var(--muted);line-height:1.5;padding-left:15px;position:relative;}
.wk-card li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--red);}
.wk-card li b{color:var(--text);}

/* rate cards */
.wk-rate{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;display:flex;flex-direction:column;}
.wk-rate.feat{border-color:var(--red);box-shadow:0 12px 40px -22px var(--red-glow);}
.wk-rate-tag{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px;}
.wk-rate h3{font-size:16px;font-weight:900;margin-bottom:6px;}
.wk-price{font-size:26px;font-weight:900;letter-spacing:var(--disp);margin:8px 0 3px;}
.wk-price span{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:0;}
.wk-rate-sub{font-size:12px;color:var(--muted2);margin-bottom:14px;}
.wk-rate ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--border);}
.wk-rate li{font-size:12.8px;color:var(--muted);line-height:1.5;padding-left:15px;position:relative;}
.wk-rate li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--red);}
.wk-note{background:var(--surface2);border:1px solid var(--border2);border-left:3px solid var(--red);
  border-radius:10px;padding:16px 18px;font-size:13.2px;color:var(--muted);line-height:1.6;margin-top:18px;}
.wk-note b{color:var(--text);}

/* lead form */
.wk-form{position:relative;border:1px solid var(--border2);border-radius:16px;padding:30px 26px 26px;
  background:linear-gradient(180deg,#221d1a 0%,#191512 60%,#151210 100%);
  box-shadow:0 22px 60px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.04);}
.wk-form::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--red),#ff5a3c 55%,rgba(232,24,28,0));}

/* inputs sit darker than the panel so fields stay legible on the lighter card */
.wk-form input[type=text],.wk-form input[type=email],.wk-form input[type=tel], .wk-form input[type=url],.wk-form input[type=date],.wk-form select,.wk-form textarea{background:#100d0b;border-color:#3a332d;}
.wk-form-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.wk-form-sub{color:var(--muted);font-size:13px;margin-top:6px;}
.wk-field{margin-bottom:16px;}
.wk-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.wk-field label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.wk-form input[type=text],.wk-form input[type=email],.wk-form input[type=tel],.wk-form input[type=url], .wk-form input[type=date],.wk-form select,.wk-form textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;
  padding:11px 13px;color:var(--text);font:inherit;font-size:14px;outline:none;transition:.15s;}
.wk-form textarea{resize:vertical;min-height:110px;line-height:1.55;}
.wk-form input::placeholder,.wk-form textarea::placeholder{color:var(--muted2);}
.wk-form input:focus,.wk-form select:focus,.wk-form textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(232,24,28,.12);}
.wk-form select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:38px;}
.wk-form select option{background:var(--surface2);color:var(--text);}
.wk-help{font-size:12px;color:var(--muted2);margin-top:6px;line-height:1.45;}
.wk-check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:16px;}
.wk-check input[type=checkbox]{accent-color:var(--red);width:17px;height:17px;margin-top:1px;flex-shrink:0;cursor:pointer;}
.wk-submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--border);}
.wk-submit-note{font-size:12.5px;color:var(--muted2);}
.wk-submit-note.is-ok{color:var(--ann);}
.wk-submit-note.is-warn{color:#ffb03a;}

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

@media (max-width:640px){
  .wk-row{grid-template-columns:1fr;}
  .wk-form{padding:20px 18px;}
}

/* between the stack point and full width the left column is too narrow for
   3-across cards - drop those to 2 rather than letting them get cramped */

@media (max-width:1340px){
  .wk-main .wk-grid-3{grid-template-columns:repeat(2,1fr);}
}

/* full-width form: three across on desktop so the card fills the page without
   leaving single inputs stretched across 1200px */
.wk-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.wk-form .wk-field:last-of-type{margin-bottom:16px;}

@media (max-width:900px){
  .wk-row3{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  .wk-row3{grid-template-columns:1fr;}
}

/* a little air + a rule above the form so it reads as its own block */
.wk-form-lead{margin:6px 0 18px;padding-top:26px;border-top:1px solid var(--border);
  font-size:13.5px;color:var(--muted2);letter-spacing:.02em;}

/* partner types: each gets its own icon + accent so the four read as distinct
   offers rather than four identical boxes */
.wk-type{position:relative;padding-left:22px;overflow:hidden;}
.wk-type::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc);}
.wk-type::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--tc) 12%,transparent),transparent 60%);}
.wk-type > *{position:relative;z-index:1;}
.wk-type-head{display:flex;align-items:center;gap:11px;margin-bottom:10px;}
.wk-type-ico{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--tc) 34%,transparent);}
.wk-type-ico svg{width:20px;height:20px;}
.wk-type .wk-eye{margin-bottom:0;color:var(--tc);}
.wk-type li::before{background:var(--tc);}
.wk-type.t1{--tc:#E8181C;}

/* content partners  */
.wk-type.t2{--tc:#FFC21E;}

/* event sponsors    */
.wk-type.t3{--tc:#37E0C8;}

/* production        */
.wk-type.t4{--tc:#7C9CFF;}

/* investment        */

/* two more accents so six-card sections can be colour-coded too */
.wk-type.t5{--tc:#FF8A3D;}
.wk-type.t6{--tc:#57D9A3;}

/* side-by-side comparison */
.cmp-lede{color:var(--muted);font-size:15px;line-height:1.6;max-width:760px;margin:-4px 0 20px;}
.cmp-lede b{color:var(--text);}
.cmp{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);}
.cmp-row{display:grid;grid-template-columns:minmax(150px,1fr) 1.25fr 1.25fr;align-items:stretch;
  border-top:1px solid var(--border);}
.cmp-row:first-child{border-top:none;}
.cmp-crit{padding:14px 18px;font-size:13px;font-weight:800;color:var(--text);
  background:rgba(255,255,255,.018);display:flex;align-items:center;}
.cmp-them,.cmp-us{padding:14px 18px;font-size:13.5px;color:var(--muted);line-height:1.5;
  display:flex;gap:10px;align-items:flex-start;}

/* our column is tinted the whole way down so the eye tracks it */
.cmp-us{background:rgba(232,24,28,.055);border-left:1px solid rgba(232,24,28,.22);color:var(--text);}
.cmp-head{background:var(--surface2);}
.cmp-head .cmp-them,.cmp-head .cmp-us{font-size:12px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted2);padding-top:13px;padding-bottom:13px;}
.cmp-head .cmp-us{color:var(--red);}
.cmp-i{flex-shrink:0;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:900;margin-top:1px;}
.cmp-i.ok{background:rgba(87,217,163,.16);color:#57D9A3;}
.cmp-i.no{background:rgba(232,24,28,.14);color:#ff6b6b;}

@media (max-width:820px){
  .cmp-row{grid-template-columns:1fr;}
  .cmp-head{display:none;}
  .cmp-crit{background:var(--surface2);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .cmp-them,.cmp-us{flex-wrap:wrap;}
  .cmp-them::before,.cmp-us::before{content:attr(data-lbl);flex-basis:100%;font-size:10.5px;
    font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:2px;}
  .cmp-us{border-left:none;border-top:1px solid rgba(232,24,28,.22);}
  .cmp-us::before{color:var(--red);}
}

/* Do / Don't variant of the comparison grid. Same three-column structure, but the
   GOOD column is the middle one and gets the positive tint - so the eye lands on
   what to do, not on the list of mistakes. */
.cmp-dd .cmp-them{background:rgba(87,217,163,.06);border-right:1px solid rgba(87,217,163,.2);color:var(--text);}
.cmp-dd .cmp-us{background:transparent;border-left:none;color:var(--muted);}
.cmp-dd .cmp-head .cmp-them{color:#57D9A3;}
.cmp-dd .cmp-head .cmp-us{color:#ff6b6b;}

@media (max-width:820px){
  .cmp-dd .cmp-them{border-right:none;}
  .cmp-dd .cmp-us{border-top:1px solid var(--border);}
  .cmp-dd .cmp-them::before{color:#57D9A3;}
  .cmp-dd .cmp-us::before{color:#ff6b6b;}
}


/* =====================================================================
   BlackMarker.TV 3.0 GÇö CMS additions

   Hand-written CSS that is NOT in the preview pages. build-css.py appends
   this file to blackmarker-tv.css on every run, so edit it here rather than
   in the generated stylesheet, which gets overwritten.

   ---------------------------------------------------------------------
   MOBILE MENU

   The preview design has no mobile menu. Below 680px the nav simply became a
   horizontally scrolling strip, and the dropdowns are :hover-based, which on
   a touch screen means the submenus cannot be opened at all -- a tap fires
   hover then immediately navigates the parent link.

   This adds a real one: a hamburger that opens a full-height panel, with the
   two dropdowns turned into tap-to-expand sections.

   Breakpoint is 900px. The nav carries seven top-level items plus the account
   link, and it starts crowding well before the 680px the old rule used.
   ===================================================================== */

/* ---------- the toggle button ---------- */
.nav-burger{
  display:none;                       /* desktop: hidden, see the media query */
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-direction:column;
  width:42px;height:38px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  padding:0;
  flex:0 0 auto;
}
.nav-burger:hover{border-color:var(--muted);}
.nav-burger span{
  display:block;width:18px;height:2px;border-radius:2px;
  background:var(--text);
  transition:transform .22s ease, opacity .18s ease;
}
/* the three bars fold into an X when open */
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (prefers-reduced-motion:reduce){
  .nav-burger span{transition:none;}
}

/* ---------- below the breakpoint ---------- */
@media (max-width:900px){

  .nav-burger{display:flex;}

  /* The panel is fixed rather than part of the flow, so a long menu scrolls
     on its own instead of pushing the page down. 100dvh, not 100vh, or mobile
     browser chrome crops the bottom of the list. */
  nav{
    position:fixed;
    top:0;right:0;
    width:min(320px,86vw);
    height:100dvh;
    z-index:60;
    background:var(--surface);
    border-left:1px solid var(--border);
    transform:translateX(100%);
    transition:transform .26s ease;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  body.nav-open nav{transform:translateX(0);}

  /* dim the page behind the panel */
  body.nav-open::after{
    content:"";
    position:fixed;inset:0;
    background:rgba(0,0,0,.55);
    z-index:55;
  }
  body.nav-open{overflow:hidden;}   /* stop the page scrolling behind it */

  .nav-in{
    display:block;
    height:auto;
    overflow:visible;               /* undo the old horizontal-scroll rule */
    padding:64px 0 28px;            /* clear of the close button */
    max-width:none;
  }
  .nav-in > a,
  .nav-in .has-sub > a{
    display:block;
    padding:13px 20px;
    font-size:15px;
    border-bottom:1px solid var(--border);
  }
  .nav-in a.acct{margin-left:0;border-radius:0;}

  /* dropdowns become tap-to-expand sections */
  .nav-in .has-sub{display:block;position:static;}
  .nav-in .submenu{
    position:static;
    display:none;
    min-width:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:var(--bg);
    padding:0;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  /* hover must not open anything on touch -- only the class does */
  .nav-in .has-sub:hover .submenu{display:none;}
  .nav-in .has-sub.open .submenu{display:block;}
  .nav-in .has-sub.open > a::after{transform:rotate(180deg);}
  .nav-in .has-sub > a::after{
    float:right;
    transition:transform .2s ease;
  }
  .nav-in .submenu a{
    display:block;
    padding:12px 20px 12px 34px;
    font-size:14px;
    border-bottom:1px solid var(--border);
  }
  .nav-in .submenu .sep{display:none;}
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  nav{transition:none;}
  .nav-in .has-sub > a::after{transition:none;}
}


/* =====================================================================
   MOBILE HEADER + TOP BAR

   The desktop header is a two-column flex row: brand on the left, socials
   and Subscribe on the right. On a phone that squeezes both sides until
   neither reads. Below 900px it becomes a centred stack instead, one thing
   per row.
   ===================================================================== */
@media (max-width:900px){

  /* ---- top bar: message left, hamburger right, CTA on its own row ---- */
  .topbar-in{
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    padding:8px 16px;
  }
  .topbar-in .msg{
    flex:1 1 auto;
    min-width:0;
    text-align:left;
    font-size:11px;
    letter-spacing:.04em;
    line-height:1.35;
  }
  .nav-burger{order:2;}            /* pinned right, opposite the message */
  /* full width on its own row -- a wrapped CTA squeezed next to the burger
     reads as an afterthought, and this matches the Subscribe button below */
  .topbar-btn{
    order:3;
    width:100%;
    justify-content:center;
    padding:10px 14px;
  }

  /* ---- header: everything centred, one per row ---- */
  .head-in{
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:18px 16px;
    text-align:center;
  }
  .brand-col{
    align-items:center;
    text-align:center;
    width:100%;
  }
  .brand-tag{text-align:center;}

  .head-actions{
    flex-direction:column;
    align-items:center;
    gap:14px;
    width:100%;
  }
  .socials{
    justify-content:center;
    width:100%;
  }
  .btn-subscribe{
    width:100%;
    justify-content:center;
  }
}


/* =====================================================================
   CMS FRAMEWORK NEUTRALISER

   The CMS loads Bootstrap, jQuery UI and four of its own stylesheets before
   ours. Our components are class-based so they win wherever the design sets a
   property -- but any property the design LEAVES AT BROWSER DEFAULT is fair
   game, and Bootstrap sets a lot of them on bare elements.

   That is not theoretical. It is what put a stray horizontal rule under the
   "Your Material" heading on the Contact page:

       legend{display:block;width:100%;padding:0;margin-bottom:20px;
              font-size:21px;line-height:inherit;color:#333;
              border:0;border-bottom:1px solid #e5e5e5}

   The design styles that heading through
   `.ct-field label,.ct-media-lg{display:block;font-size:11.5px;...}`, so the
   font size, weight and transform were all safely overridden by class. What
   was NOT overridden -- because the design never had reason to set it -- was
   `border-bottom`. That drew a rule under the heading, spanning the legend's
   full width, which sits inside the fieldset's 20px padding. So it stopped
   short of the box on both sides and read as a misaligned line.

   The design wants a plain uppercase label inside an unbroken box, not a
   notched legend, which is why display:block is kept below.

   Below: only the properties that actually leak into components this design
   uses. Not a blanket reset -- resetting things the CMS legitimately owns
   causes a different and harder class of bug.
   ===================================================================== */

/* legend: back to a shrink-to-fit label sitting in the fieldset's border
   notch, which is what the design draws. */
legend{
  display:block;
  width:auto;
  max-width:none;
  padding:0;
  margin:0;
  /* Bootstrap writes `border:0` then `border-bottom:1px solid #e5e5e5` in the
     same block. Our `border:0` shorthand does override it on source order,
     but the longhand is spelled out too so this cannot come down to shorthand
     resolution -- that is the whole bug, and it should not be subtle. */
  border:0;
  border-bottom:0;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}
fieldset{min-width:0;}

/* label: Bootstrap forces inline-block, bold and a 5px bottom margin. The
   design positions its own labels, so hand that back. */
label{display:inline;font-weight:inherit;margin-bottom:0;max-width:none;}

/* the design's form controls inherit the page font; Bootstrap overrides the
   family and size on textarea in particular */
input,select,textarea,button{font-family:inherit;}

/* The design's reset is *{margin:0}, a zero-specificity rule that any bare
   element selector beats. Bootstrap's p{margin:0 0 10px} therefore wins and
   adds spacing the preview never had. Restore the design's intent; every
   component that wants space sets it explicitly. */
p{margin:0;}
ul{margin:0;}


/* =====================================================================
   PAGE HERO  (.page-hero)  -- shared by every secondary page

   The design builds this same component four times over with a different
   class prefix each: ct- on Contact, sch- on Schedule, bd- on Bodega, ac- on
   Account. Compared rule by rule they are the same component -- crumb,
   kicker, title, hero-in, hero-side and hero-stat are byte-identical across
   all four, and the only differences anywhere are 2px of bottom padding on
   the Schedule hero and 20px of max-width on its description.

   So this is one set of rules the CMS can share, rather than four near-copies
   that drift the first time anyone edits one. The per-page part is the
   CONTENT -- crumb trail, kicker, title, description, and whether there are
   stat cards on the right -- which the page supplies. The chrome is here.

   The old prefixed rules are left alone. Pages that have not been ported yet
   still use them, and nothing here touches them.
   ===================================================================== */
.page-hero{
  background:radial-gradient(120% 100% at 20% 0%,rgba(232,24,28,.14),transparent 55%),#15110d;
  border-bottom:1px solid #3a332b;
  padding:26px 0 32px;
}
.pg-crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.pg-crumb a{color:var(--muted);transition:.15s;}
.pg-crumb a:hover{color:var(--red);}
.pg-crumb .sep{margin:0 7px;color:var(--muted2);}

.pg-hero-in{display:grid;grid-template-columns:1.5fr .8fr;gap:34px;align-items:center;}
.pg-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:11px;}
.pg-title{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:var(--disp);
  line-height:1.02;margin-bottom:14px;}
.pg-desc{color:var(--muted);font-size:15.5px;max-width:640px;line-height:1.6;}

.pg-hero-side{display:flex;flex-direction:column;gap:12px;}
.pg-stat{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--red);
  border-radius:10px;padding:13px 16px;}
.pg-stat .n{display:block;font-size:18px;font-weight:900;letter-spacing:var(--disp);}
.pg-stat .l{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}

/* A hero with no stat cards should not leave a dead column. */
.pg-hero-in.is-solo{grid-template-columns:1fr;}

@media (max-width:980px){
  .pg-hero-in{grid-template-columns:1fr;}
  .pg-hero-side{flex-direction:row;flex-wrap:wrap;}
  .pg-stat{flex:1;min-width:180px;}
}


/* =====================================================================
   TOPIC CHIPS  (.ct-chips)

   These live with the FORM, not the hero. They are form controls -- each one
   sets the topic dropdown -- so they belong next to the field they drive and
   inside the block that moves into the CMS form tool. Sitting up in the hero
   they were page furniture that reached down into a form.

   The margin flips from top to bottom because they now sit above the form
   rather than below the hero copy.
   ===================================================================== */
.ct-chips{margin-top:0;margin-bottom:22px;}


/* =====================================================================
   CALENDAR APP  (.bmtv-calendar)

   Skins the CMS calendar macro's output so it looks like the rest of the
   site. We do not control that markup -- the app emits Bootstrap grid
   classes and its own class names -- so this styles what it produces.

   EVERY RULE IS SCOPED UNDER .bmtv-calendar, and that is load-bearing rather
   than tidy. The app writes <style> blocks into the BODY, after our
   stylesheet has already loaded:

       .app-calendar-search-box{background-color:rgba(0,0,0,.05);...}
       .divCalendarLinearEntry .eventtitle{font-size:1em;font-weight:bold;}

   A rule in <head> loses to those at equal specificity regardless of how it
   is written. The wrapper adds a class to ours, which puts us above them.

   A few things also carry inline style="" attributes, which beat any
   selector. Those are the only places !important appears below:
       .times                  font-weight:bold;font-size:0.8em
       .date                   text-align:center;cursor:pointer;margin-bottom
       .divCalendarLinearEntry margin-bottom:1.5em
   ===================================================================== */

.cal-intro{color:var(--muted);font-size:14px;line-height:1.65;max-width:70ch;margin-bottom:22px;}
.cal-intro a{color:var(--red);font-weight:700;}

.cal-placeholder{border:1px dashed var(--border2);border-radius:12px;padding:26px;
  color:var(--muted2);font-size:13.5px;line-height:1.6;text-align:center;}
.cal-placeholder b{color:var(--text);display:block;margin-bottom:4px;}

/* ---- search / filter panel ---- */
.bmtv-calendar .app-calendar-search-box{
  background-color:var(--surface) !important;   /* beats the app's inline <style> */
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 20px 8px !important;
  margin-bottom:26px !important;
}
.bmtv-calendar .form-control{
  background-color:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  height:auto;
  padding:10px 12px;
  font-size:13.5px;
  box-shadow:none;
}
.bmtv-calendar .form-control:focus{border-color:var(--red);box-shadow:none;outline:none;}
.bmtv-calendar select.form-control option{background:var(--surface2);color:var(--text);}
.bmtv-calendar .form-control::placeholder{color:var(--muted2);}
.bmtv-calendar .appButton,
.bmtv-calendar .btn.appButton{
  background:var(--red);
  border:0;
  border-radius:8px;
  color:#fff;
  font-weight:800;
  font-size:13px;
  padding:11px 16px;
  transition:.15s;
}
.bmtv-calendar .appButton:hover{filter:brightness(1.1);color:#fff;}

/* ---- one event ---- */
.bmtv-calendar .divCalendarLinearEntry{margin-bottom:16px !important;}

.bmtv-calendar .calendar-linear-entry-inner{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  height:100%;
  transition:border-color .15s, transform .15s;
}
.bmtv-calendar .calendar-linear-entry-inner:hover{
  border-color:var(--red);
  transform:translateY(-2px);
}

.bmtv-calendar .date{margin-bottom:0 !important;}
.bmtv-calendar .date img{
  border-radius:10px;
  border:1px solid var(--border);
  width:100%;
  height:auto;
  display:block;
}

.bmtv-calendar .eventtitle,
.bmtv-calendar .divCalendarLinearEntry .eventtitle{
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  margin-bottom:6px;
}
.bmtv-calendar .eventtitle a{color:var(--text);}
.bmtv-calendar .calendar-linear-entry-inner:hover .eventtitle a{color:var(--red);}

/* the app sets font-size:0.8em inline here, so this needs !important */
.bmtv-calendar .times,
.bmtv-calendar .divCalendarLinearEntry .times{
  color:var(--red) !important;
  font-size:11.5px !important;
  font-weight:800 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:8px !important;
}

.bmtv-calendar .summary,
.bmtv-calendar .divCalendarLinearEntry .summary{
  color:var(--muted);
  font-size:13.2px;
  line-height:1.55;
}

/* ---------------------------------------------------------------------
   EVENT DETAIL VIEW

   Same page, different output: with ?fldEventID=... the app renders one
   event instead of the list.

       .divCalendarInfoArea      date/time header, with .divSocialShare
                                 floated right and a .divClearLine after
       .divCalendarMainArea      body copy with the event image floated right
       .divClearLine             the app's clearfix
       a.btn.appButton           Add to Calendar
       a.btn.appButton.appCalendarButtonBack   Back To Calendar

   The date/time sits in an UNCLASSED div, so it is selected by exclusion
   rather than by name -- there is nothing else to hook. It also carries
   inline font-size/font-weight, hence the !important.
   --------------------------------------------------------------------- */
.bmtv-calendar .divCalendarInfoArea{
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
  margin-bottom:20px !important;
}
.bmtv-calendar .divCalendarInfoArea > div:not(.divSocialShare):not(.divClearLine){
  color:var(--red) !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:0 !important;
}
.bmtv-calendar .divSocialShare{margin-left:16px;}

.bmtv-calendar .divCalendarMainArea{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.7;
}
.bmtv-calendar .divCalendarMainArea p{margin:0 0 14px;}
.bmtv-calendar .divCalendarMainArea p:last-child{margin-bottom:0;}
.bmtv-calendar .divCalendarMainArea b,
.bmtv-calendar .divCalendarMainArea strong{color:var(--text);}
.bmtv-calendar .divCalendarMainArea a{color:var(--red);font-weight:700;}
.bmtv-calendar .divCalendarMainArea u{text-decoration:none;color:var(--text);font-weight:700;}

/* the event image is floated right with an inline max-width:400px */
.bmtv-calendar .divCalendarMainArea img{
  border-radius:12px;
  border:1px solid var(--border);
}

.bmtv-calendar .divClearLine{clear:both;}

/* Back To Calendar is the secondary action; the app gives both buttons the
   same classes plus an inline color, so the ghost treatment needs !important */
.bmtv-calendar .appCalendarButtonBack{
  background:transparent !important;
  border:1px solid var(--border2) !important;
  color:var(--muted) !important;
}
.bmtv-calendar .appCalendarButtonBack:hover{
  border-color:var(--muted) !important;
  color:var(--text) !important;
}

/* On a detail view the list-page intro ("search by keyword, jump to a month")
   is describing something that is not on screen. The body script adds
   is-event-detail when ?fldEventID= is present. */
/* The intro sits BEFORE the calendar wrapper, so no sibling combinator can
   reach it from the wrapper -- the body script sets the class directly. */
.cal-intro.is-hidden{display:none;}

@media (max-width:680px){
  /* inline max-width:400px + left margin would leave the copy in a narrow
     gutter on a phone, so the image goes full width above the text */
  .bmtv-calendar .divCalendarMainArea img{
    float:none !important;
    max-width:100% !important;
    margin:0 0 16px !important;
  }
  .bmtv-calendar .divSocialShare{float:none !important;margin:0 0 12px;}
}

/* ---- pagination ---- */
.bmtv-calendar .pagination{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:22px 0 0;}
.bmtv-calendar .pagination > li{list-style:none;}
.bmtv-calendar .pagination > li > a,
.bmtv-calendar .pagination > li > span{
  float:none;
  margin:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  padding:8px 13px;
}
.bmtv-calendar .pagination > li > a:hover{border-color:var(--muted2);color:var(--text);}
.bmtv-calendar .pagination > .active > a,
.bmtv-calendar .pagination > .active > span{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}

/* Bootstrap's grid gutters do not match this design's rhythm; the app puts
   entries in col-md-6, so give the row back its spacing without fighting the
   column widths. */
.bmtv-calendar .row{margin-left:-8px;margin-right:-8px;}
.bmtv-calendar .row > [class*="col-"]{padding-left:8px;padding-right:8px;}

@media (max-width:680px){
  /* the app's col-md-3 / col-md-9 split collapses on its own below Bootstrap's
     md breakpoint; just tighten the image so it does not dominate the card */
  .bmtv-calendar .date img{max-width:220px;margin:0 auto 12px;}
}


/* =====================================================================
   STORE APP  (.bmtv-store)

   Skins the CMS store macro's output. Two views come out of the same macro:
   the product grid, and a single product when the URL carries ?productid=.

   Scoped under .bmtv-store for the same reason .bmtv-calendar is: the app
   loads fancybox and elevatezoom stylesheets of its own and writes inline
   styles onto its elements, so our rules need the extra class to outrank
   them. The wrapper is in the page body; keep the macro inside it.

   TWO DEFECTS IN THE APP'S OUTPUT, styled around rather than papered over:

   1. Every product card carries style="$$DIVSTYLE$$" -- an unreplaced macro
      token. Browsers discard the invalid attribute so nothing breaks, but it
      means a template placeholder is not being substituted. Worth raising
      with the CMS vendor; nothing here depends on it either way.

   2. On the detail page the option labels are written as
          <label for="name="fldOption1" ">Shirt Colors</label>
      The nested quotes break the for attribute, so the label is not tied to
      its select: clicking "Shirt Colors" does not focus the dropdown and a
      screen reader does not announce them together. It cannot be fixed in
      CSS. Also one for the vendor.

   The product title and price on the detail page are UNCLASSED divs with
   inline font-size, so they are selected structurally and need !important.
   ===================================================================== */

/* ---- search / filter bar, shared by both views ---- */
.bmtv-store #frmStoreSearch{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 16px 6px;
  margin-bottom:26px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.bmtv-store #frmStoreSearch .form-group{margin:0 0 10px;}
.bmtv-store #frmStoreSearch .form-group:empty{display:none;}   /* app emits two empty ones */

.bmtv-store .form-control{
  background-color:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  height:auto;
  padding:10px 12px;
  font-size:13.5px;
  box-shadow:none;
  width:auto;
}
.bmtv-store .form-control:focus{border-color:var(--red);box-shadow:none;outline:none;}
.bmtv-store select.form-control option{background:var(--surface2);color:var(--text);}
.bmtv-store .form-control::placeholder{color:var(--muted2);}

.bmtv-store .appButton,
.bmtv-store .btn.appButton,
.bmtv-store input.appButton{
  background:var(--red);
  border:0;
  border-radius:8px;
  color:#fff;
  font-weight:800;
  font-size:13px;
  padding:11px 18px;
  transition:.15s;
  -webkit-appearance:none;
  appearance:none;
}
.bmtv-store .appButton:hover{filter:brightness(1.1);color:#fff;}

/* ---- product grid ---- */
.bmtv-store .row{margin-left:-9px;margin-right:-9px;}
.bmtv-store .row > [class*="col-"]{padding-left:9px;padding-right:9px;}

.bmtv-store [class*="col-md-3"]{margin-bottom:18px;}
.bmtv-store [class*="col-md-3"] > div{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  height:100%;
  transition:border-color .15s, transform .15s;
}
.bmtv-store [class*="col-md-3"] > div:hover{
  border-color:var(--red);
  transform:translateY(-2px);
}
.bmtv-store .store-thumbs{
  width:100%;
  height:auto;
  display:block;
  background:var(--surface2);
}
.bmtv-store [class*="col-md-3"] .text-center{padding:14px 14px 16px !important;}
.bmtv-store [class*="col-md-3"] .text-center b a{
  color:var(--text);
  font-weight:800;
  font-size:14px;
  line-height:1.3;
}
.bmtv-store [class*="col-md-3"] > div:hover .text-center b a{color:var(--red);}
.bmtv-store [class*="col-md-3"] .text-center > div + div{
  color:var(--red);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.05em;
  margin-top:6px;
}

/* sort control + View All row */
.bmtv-store .divAppStoreViewAllProducts a.appButton{display:inline-block;text-decoration:none;}
.bmtv-store .divClearLine{clear:both;}

/* ---- product detail ---- */
.bmtv-store #divProductImage img,
.bmtv-store #imageMain{
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface2);
}
/* the thumbnail strip under the main image */
.bmtv-store [class*="col-xs-4"] img{
  border-radius:10px;
  border:1px solid var(--border);
  margin:6px 3px 0;
  transition:border-color .15s;
}
.bmtv-store [class*="col-xs-4"] a:hover img{border-color:var(--red);}

/* title: an unclassed div with inline font-size:1.6em */
.bmtv-store [class*="col-sm-7"] > div:first-child{
  font-size:clamp(22px,2.6vw,30px) !important;
  font-weight:900 !important;
  letter-spacing:var(--disp);
  line-height:1.1;
  margin-bottom:8px;
  color:var(--text);
}
/* brand line + SKU */
.bmtv-store [class*="col-sm-7"] > div a[href*="author:"]{color:var(--muted);font-size:13px;}
.bmtv-store [class*="col-sm-7"] > div a[href*="author:"]:hover{color:var(--red);}

/* price */
.bmtv-store .textEmphasis{
  font-size:20px !important;
  font-weight:900 !important;
  color:var(--text);
  letter-spacing:var(--disp);
}
.bmtv-store #spanDisplayPrice{color:var(--red);}

/* option fields -- the neutraliser makes bare labels inline again, which is
   right for the rest of the site but wrong for a form, so put them back */
.bmtv-store #frmStore label{
  display:block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.bmtv-store #frmStore .form-inline{display:block;}
.bmtv-store #frmStore select.form-control,
.bmtv-store #frmStore input[name="fldQuantity"]{min-width:160px;}
.bmtv-store #frmStore input[name="fldQuantity"]{min-width:0;width:80px;text-align:center;}

.bmtv-store #btnAddToCart{
  width:100%;
  padding:14px 18px;
  font-size:14px;
  letter-spacing:.04em;
  margin-top:6px;
}

/* description under the buy box */
.bmtv-store [class*="col-sm-7"] p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.7;
  margin:0 0 12px;
}
.bmtv-store [class*="col-sm-7"] strong,
.bmtv-store [class*="col-sm-7"] b{color:var(--text);}

@media (max-width:680px){
  .bmtv-store #frmStoreSearch{flex-direction:column;align-items:stretch;}
  .bmtv-store #frmStoreSearch .form-control{width:100%;}
  .bmtv-store [class*="col-md-3"]{margin-bottom:14px;}
}


/* =====================================================================
   MEMBER AREA  (.bmtv-account)

   Skins the CMS member-profile macro. Unlike the calendar and store, this
   one was written BEFORE seeing the macro's output, so it deliberately
   targets the primitives this CMS uses across all of its apps rather than
   app-specific class names. Confirmed in use on this site by the store app,
   the calendar app and the forms app:

       .form-control        every input, select and textarea
       .submit-button       the forms app's submit
       .appButton / .btn    app action buttons
       .row / .col-*        Bootstrap grid
       #formHeader          the forms app's heading block
       table                account history / subscription tables

   Scoped under .bmtv-account so it outranks the framework and any styles the
   app writes for itself, same as .bmtv-calendar and .bmtv-store.

   If the member macro turns out to add its own classes on top of these, they
   need adding here -- the page body says as much where whoever hits it will
   look.
   ===================================================================== */

/* the placeholder that shows until the macro is dropped in */
.bmtv-account .ac-slot{min-height:200px;}

/* ---- form controls ---- */
.bmtv-account .form-control,
.bmtv-account input[type="text"],
.bmtv-account input[type="email"],
.bmtv-account input[type="tel"],
.bmtv-account input[type="password"],
.bmtv-account select,
.bmtv-account textarea{
  background-color:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  height:auto;
  padding:11px 13px;
  font:inherit;
  font-size:13.5px;
  box-shadow:none;
  width:100%;
  margin-bottom:12px;
}
.bmtv-account .form-control:focus,
.bmtv-account input:focus,
.bmtv-account select:focus,
.bmtv-account textarea:focus{
  border-color:var(--red);
  box-shadow:none;
  outline:none;
}
.bmtv-account select option{background:var(--surface2);color:var(--text);}
.bmtv-account ::placeholder{color:var(--muted2);}

/* labels: the framework neutraliser makes bare labels inline again, which is
   right elsewhere on the site and wrong inside a form */
.bmtv-account label{
  display:block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}

/* ---- buttons ---- */
.bmtv-account .submit-button,
.bmtv-account input[type="submit"],
.bmtv-account button[type="submit"],
.bmtv-account .appButton,
.bmtv-account .btn.appButton{
  background:var(--red);
  border:0;
  border-radius:8px;
  color:#fff;
  font:inherit;
  font-weight:800;
  font-size:13.5px;
  padding:12px 20px;
  cursor:pointer;
  transition:.15s;
  -webkit-appearance:none;
  appearance:none;
}
.bmtv-account .submit-button:hover,
.bmtv-account input[type="submit"]:hover,
.bmtv-account .appButton:hover{filter:brightness(1.1);color:#fff;}

/* ---- the forms app's heading block ---- */
.bmtv-account #formHeader,
.bmtv-account #headerForm > div:first-child{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ann);
  margin-bottom:16px;
}

/* ---- grid gutters, matched to the rest of the site ---- */
.bmtv-account .row{margin-left:-8px;margin-right:-8px;}
.bmtv-account .row > [class*="col-"]{padding-left:8px;padding-right:8px;}

/* ---- panels the app may render around sections ---- */
.bmtv-account .panel,
.bmtv-account .well,
.bmtv-account fieldset{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  margin-bottom:20px;
}

/* ---- tables: order history, subscription details ---- */
.bmtv-account table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:20px;
}
.bmtv-account th{
  text-align:left;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted2);
  font-weight:800;
  padding:11px 13px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}
.bmtv-account td{
  padding:11px 13px;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  vertical-align:middle;
}
.bmtv-account tr:last-child td{border-bottom:0;}
.bmtv-account td a{color:var(--red);font-weight:700;}

/* ---- headings the macro may emit ---- */
.bmtv-account h2,
.bmtv-account h3{
  font-weight:900;
  letter-spacing:var(--disp);
  color:var(--text);
  margin:0 0 12px;
}
.bmtv-account h2{font-size:22px;}
.bmtv-account h3{font-size:17px;}
.bmtv-account p{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 12px;}
.bmtv-account a{color:var(--red);}

@media (max-width:680px){
  .bmtv-account table{display:block;overflow-x:auto;}
}


/* =====================================================================
   CHANNELCAST OTT EMBED  (.ott-wrap)

   The OTT renderer is built to run as a standalone app filling a browser
   tab, so it ships chrome that makes no sense embedded in a page section:

       <header class="ott-nav">          its own top bar
         <div class="ott-brand">           channel name, duplicating our H1
         <div class="ott-tools">           filters toggle and refresh buttons
       <div class="ott-body">            grid: 300px sidepanel + 1fr main
         <aside class="ott-sidepanel">     category filters

   On a show page all of that is redundant. The page already says which show
   this is, and the feed is filtered to one category, so a category filter
   panel filters nothing. Hidden below, leaving the featured hero and the
   episode grid underneath -- which is the whole reason the embed is here.

   .ott-app also sets min-height:100vh, correct for a full-tab app and wrong
   inside a section; it would leave a screen of empty space under the grid.

   Scoped under .ott-wrap because the renderer injects its own stylesheet at
   runtime, which lands after ours. The extra class is what outranks it.

   The filters toggle is the "hamburger" -- data-toggle-panel, not navigation.
   Nothing is lost by hiding it while the feed shows a single category.
   ===================================================================== */
.ott-wrap .ott-nav{display:none !important;}
.ott-wrap .ott-sidepanel{display:none !important;}
.ott-wrap .ott-body{grid-template-columns:1fr !important;padding:0 !important;}
.ott-wrap .ott-app{min-height:0 !important;background:transparent !important;}

/* the hero is the featured video -- keep it, just stop it eating the screen */
.ott-wrap .ott-hero{min-height:min(56vh,420px) !important;border-radius:14px;overflow:hidden;}

/* =====================================================================
   DROPDOWN PARENT THAT IS ALSO A REAL PAGE

   Every dropdown parent in the nav is href="#" except Schedule, which is a
   real page AND has a submenu. On mobile that made it unreachable: the tap
   opens the submenu instead of navigating.

   The footer script copies such a parent into the top of its own submenu, so
   the page is one tap away once the menu is open. That copy is only wanted on
   mobile -- on desktop the parent itself is already clickable, and a duplicate
   entry in the hover menu would just be noise.
   ===================================================================== */
.submenu a[data-self]{display:none;}
@media (max-width:900px){
  .nav-in .submenu a[data-self]{display:block;}
}

/* =====================================================================
   UPCOMING VIDEOS -- PHOTO BACKGROUND

   Replaces the flat radial gradient on .up-section only. .trend-section
   shares the original rule and is left on the gradient; it is not in use, and
   scoping this to .up-section keeps the two independent.

   LAYER ORDER (first listed sits on top):
     1. the red radial tint   kept from the original, so the section still
                              reads as part of the site rather than a photo
                              panel dropped into it
     2. the veil              what actually controls how much photo shows
     3. the photo
     4. #241c15               shows through if the image 404s, so a missing
                              upload degrades to roughly the old look

   TUNING: change the three alphas in the veil. Higher = more veil, less photo.
   The image is already dark (mean luminance 36/255) and desaturated, so it
   needs far less veil than a stock photo normally would.

   The veil is strongest at the top and bottom and lightest through the middle:
   the section heading sits top-left directly on this, while the middle is
   covered by .up-list, which has its own opaque background -- so the playlist
   rows stay fully readable no matter what happens here.

   IMAGE: /images/up-bg.jpg -- 1024x470, 32 KB, cropped from a square source so
   the browser cannot choose its own crop, then desaturated and softened. The
   source is cyan/orange and at full saturation the waveform fought every red
   element near it.
   ===================================================================== */
.up-section{
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(232,24,28,.10), transparent 55%),
    linear-gradient(180deg, rgba(36,28,21,.90) 0%, rgba(36,28,21,.76) 42%, rgba(36,28,21,.88) 100%),
    url("/images/up-bg.jpg") center / cover no-repeat,
    #241c15;
}

/* =====================================================================
   SIGN-IN / REGISTER PAGE  (.system-access-forms)

   Viewed signed OUT, the CMS discards our page body and substitutes its own
   access block. There is no hero and no .bmtv-account wrapper, so none of our
   form rules reach it -- they are all scoped .bmtv-store or .bmtv-account, and
   what is left is raw Bootstrap on a black page.

   The page now carries TWO columns inside a CMS structure row:

       .system-access-forms
         form
           .row.flex-row
             .structure-text.col-sm-4   -> #divBackstageSignIn
                                           #divBackstageReminder
             .structure-text.col-sm-8   -> #divBackstageRegistration

   WHY IT LOOKED CRUNCHED. This block used to cap the container at 460px, which
   was right when it held one sign-in form. With a 4/8 split inside it, sign-in
   got ~150px and registration ~307px -- and registration's own password row is
   three col-md-4 cells, so those landed at about 100px each. The cap is now a
   page-width 1080px.

   The card styling sits on the INNER div of each column, not on the column
   itself, so Bootstrap's 15px column padding stays free to act as the gutter
   between the two cards.

   All markup here was read from the live render endpoints (renderSignIn,
   renderReminder, renderRegistration), which answer without a session.

   Fields need an explicit width because Bootstrap 3 gives .form-inline
   .form-control width:auto above 768px, which otherwise sizes them from their
   size="35" / size="20" attributes instead of the column.
   ===================================================================== */

.system-access-forms{max-width:1080px;width:calc(100% - 32px);margin:40px auto 72px;}

.page-body > h1{max-width:1080px;margin:44px auto 0;width:calc(100% - 32px);
  font-size:clamp(26px,4vw,34px);font-weight:900;letter-spacing:var(--disp);
  color:var(--text);line-height:1.1;}

/* equal-height columns; Bootstrap's float is ignored inside a flex container */
.system-access-forms .row.flex-row{display:flex;flex-wrap:wrap;align-items:stretch;}
.system-access-forms .structure-text{display:flex;}
.system-access-forms .structure-text > div{flex:1;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;padding:26px 24px 28px;
  margin-bottom:18px;}

/* The CMS writes each macro as <p><div>...</div></p>. A <div> is not allowed
   inside a <p>, so the parser closes the paragraph early and leaves an empty
   one behind -- a phantom gap above every form. */
.system-access-forms p:empty{display:none;}

/* Card headings. Each card can hold more than one section: the left one is
   "Already have an account?" then "Forgot your password?", so any heading
   after the first gets a rule above it to separate the two forms. */
.system-access-forms .structure-text > div > h2,
.system-access-forms .structure-text > div > h3{font-size:17px;font-weight:800;
  letter-spacing:-.01em;line-height:1.25;color:var(--text);margin:0 0 15px;}
.system-access-forms .structure-text > div > h2 ~ h2,
.system-access-forms .structure-text > div > h3 ~ h3{margin-top:30px;
  padding-top:26px;border-top:1px solid var(--border);}

/* Intro copy under a heading. Only real paragraphs are left by now -- the
   macro wrappers above are empty and hidden. */
.system-access-forms .structure-text > div > p{color:var(--muted);font-size:13.5px;
  line-height:1.55;margin:-4px 0 18px;}

/* The rendered forms sit between headings, so let the next heading's top
   margin own the spacing rather than stacking two margins. */
.system-access-forms [id^="divBackstage"]{margin:0;}

/* inner grid: registration is 6/6, then 12, then 4/4/4 */
.system-access-forms .row{margin-left:-8px;margin-right:-8px;}
.system-access-forms [class*="col-"]{padding-left:8px;padding-right:8px;}
.system-access-forms .form-group{margin-bottom:14px;}

.system-access-forms label{display:block;font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}

.system-access-forms .form-inline{display:block;}
.system-access-forms .form-control,
.system-access-forms input[type="text"],
.system-access-forms input[type="password"]{display:block;width:100%;
  background:var(--surface2);color:var(--text);border:1px solid var(--border2);
  border-radius:8px;padding:11px 12px;font:inherit;font-size:14px;height:auto;
  box-shadow:none;}
.system-access-forms .form-control:focus,
.system-access-forms input:focus{outline:none;border-color:var(--red);box-shadow:none;}
.system-access-forms ::placeholder{color:var(--muted2);}

.system-access-forms .btn-primary{display:inline-block;width:auto;min-width:180px;background:var(--red);
  border:1px solid var(--red);color:#fff;border-radius:8px;padding:12px 18px;
  font:inherit;font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;
  text-shadow:none;box-shadow:0 4px 20px -6px var(--red-glow);}
.system-access-forms .btn-primary:hover,
.system-access-forms .btn-primary:focus{background:var(--red-dark);
  border-color:var(--red-dark);color:#fff;}
.system-access-forms .btn-primary .glyphicon{margin-right:7px;top:1px;}
/* Scoped to the RENDERED forms only. The CMS wraps the entire structure row in
   its own <form id="form13675">, so a bare "form p" here also hit the intro
   copy and fought the rule above it. */
.system-access-forms form[id^="frmdivBackstage"] p{margin:18px 0 0;}

@media (max-width:767px){
  /* Bootstrap stacks the columns at col-xs-12; keep the cards apart */
  .system-access-forms .structure-text > div{margin-bottom:14px;}
}
@media (max-width:480px){
  .system-access-forms .btn-primary{width:100%;min-width:0;}
  .system-access-forms .structure-text > div > h2,
  .system-access-forms .structure-text > div > h3{font-size:16px;}
  .system-access-forms{margin-top:28px;}
  .system-access-forms .structure-text > div{padding:20px 17px 22px;}
  .page-body > h1{margin-top:28px;}
}

/* =====================================================================
   ACCOUNT -- MEMBER PROFILE

   The profile form is injected by JavaScript after page load:

       <div id="divBackstageProfile"></div>
       <script>objCommon.renderProfile('divBackstageProfile');</script>

   so it never appears in view-source, and the endpoint behind it 500s without
   a session. Everything below is written against the real signed-in DOM.

   Most of it was already covered -- the form is ordinary Bootstrap 3
   (.row > .col-md-* > .form-group > label + .form-control) and the existing
   .bmtv-account rules skin those. These are the four things that were not:

     1. btn-success        Bootstrap green on the only button in the form
     2. .divAppSignOut     the "Hi, NAME. Sign Out" line
     3. input[type=file]   the profile photo picker, browser-default chrome
     4. #divProfilePic     the 250px avatar, an unstyled square

   #divProfilePic carries its size and image inline, so only properties the
   app does NOT set inline are touched here -- adding background-size is safe,
   changing the dimensions would need !important and there is no reason to.
   ===================================================================== */

/* the sign-out line sits INSIDE the Welcome <h2>, so it inherits heading
   weight and size unless told otherwise. Own line, quieter than the heading. */
.bmtv-account .divAppSignOut{display:block;margin-top:6px;font-size:13.5px;
  font-weight:400;letter-spacing:0;color:var(--muted);}
.bmtv-account .divAppSignOut a{color:var(--red);font-weight:700;}
.bmtv-account .divAppSignOut a:hover{text-decoration:underline;}

/* the one button in the form -- Bootstrap green by default */
.bmtv-account .btn-success{background:var(--red);border:1px solid var(--red);
  color:#fff;border-radius:8px;padding:11px 20px;font:inherit;font-size:13px;
  font-weight:800;cursor:pointer;text-shadow:none;
  box-shadow:0 4px 20px -6px var(--red-glow);}
.bmtv-account .btn-success:hover,
.bmtv-account .btn-success:focus{background:var(--red-dark);border-color:var(--red-dark);
  color:#fff;}

/* avatar: the app sets width/height/background-image inline and nothing else,
   so it renders as a hard square at whatever size the thumbnail came back */
.bmtv-account #divProfilePic{border-radius:12px;border:1px solid var(--border2);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--surface2);}

/* the photo picker */
.bmtv-account input[type="file"]{width:100%;color:var(--muted);font:inherit;
  font-size:12.5px;background:transparent;border:0;padding:0;}
.bmtv-account input[type="file"]::file-selector-button{background:var(--surface2);
  color:var(--text);border:1px solid var(--border2);border-radius:7px;
  padding:8px 13px;margin-right:10px;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;}
.bmtv-account input[type="file"]::file-selector-button:hover{border-color:var(--muted);
  background:var(--surface3,#242019);}
.bmtv-account #divFileQueue{color:var(--muted);font-size:12px;margin-top:8px;}

/* consistent vertical rhythm -- Bootstrap's default 15px is loose next to the
   uppercase micro-labels this form uses */
.bmtv-account .form-group{margin-bottom:14px;}

/* =====================================================================
   THE BODEGA -- CART

   The store app writes its own <style> into the page BODY, after our
   stylesheet in the <head>, so its rules win any tie on source order:

       .tableCart    {border:0;width:100%;border-collapse:collapse;}
       .tableCart th {padding:10px;text-align:left;}
       .tableCart td {border-top:1px solid #121212;border-bottom:...;padding:10px;}

   Scoping under .bmtv-store makes these (0,2,1) against their (0,1,1), which
   is enough to win without !important. Its #121212 borders are nearly black --
   invisible on our surface -- which is most of why the cart read as a pile of
   text rather than a table.

   WHAT IS DELIBERATELY LEFT ALONE
   Every cell carries an inline style="text-align:..." from the app. Inline
   beats any stylesheet, so alignment is theirs; fighting it would need
   !important on every cell and the alignment is right anyway.

   The quantity boxes and the donation box differ: quantity inputs carry
   .form-control (already skinned), the donation one does not, so bare inputs
   inside the store are covered too.

   .CellColor3 is a legacy CMS class that paints a light background -- fine on
   the old white store, unreadable on ours.
   ===================================================================== */

/* headings the app prints inside the store ("Cart Overview", "Additional
   Contribution") -- no class of their own, so match the site by element */
.bmtv-store h2{font-size:20px;font-weight:900;letter-spacing:var(--disp);
  color:var(--text);margin:26px 0 14px;}
.bmtv-store h2 span{color:var(--muted);font-weight:600;letter-spacing:0;}

.bmtv-store .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.bmtv-store .tableCart{width:100%;border-collapse:collapse;margin-bottom:0;
  min-width:560px;font-size:14px;}

.bmtv-store .tableCart th{background:var(--surface2);color:var(--muted2);
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 12px;border-bottom:1px solid var(--border);white-space:nowrap;}
.bmtv-store .tableCart td{border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:13px 12px;color:var(--text);
  vertical-align:middle;}

/* product cell: title reads as the link, the variant line sits under it */
.bmtv-store .tableCart td a{color:var(--text);font-weight:700;}
.bmtv-store .tableCart td a:hover{color:var(--red);}
.bmtv-store .tableCart td div + div{color:var(--muted);font-size:12.5px;
  font-weight:400;margin-top:3px;}
.bmtv-store .tableCart img{border-radius:7px;border:1px solid var(--border2);
  display:block;}

/* quantity + donation boxes. size="3" leaves them far too wide by default */
.bmtv-store .tableCart input[type="text"]{max-width:74px;background:var(--surface2);
  color:var(--text);border:1px solid var(--border2);border-radius:7px;
  padding:7px 8px;font:inherit;font-size:13px;}
.bmtv-store .tableCart input[type="text"]:focus{outline:none;border-color:var(--red);}
.bmtv-store input[type="checkbox"]{accent-color:var(--red);cursor:pointer;}

/* the promo + totals rows carry no classes -- b is the only handle the app
   gives, and it marks exactly the labels and figures worth emphasising */
.bmtv-store .tableCart b{color:var(--text);font-weight:800;}

/* legacy light-background block behind "Additional Contribution" */
.bmtv-store .CellColor3{background:var(--surface2) !important;
  border:1px solid var(--border);border-radius:10px;color:var(--text);
  padding:14px 15px !important;}
.bmtv-store .CellColor3 p{margin:0;}
.bmtv-store .CellColor3 input[type="text"]{max-width:110px;background:var(--surface);
  color:var(--text);border:1px solid var(--border2);border-radius:7px;
  padding:7px 9px;font:inherit;font-size:13px;}

/* Bootstrap's default button turns up once, on "Add to Order" */
.bmtv-store .btn-default{background:transparent;color:var(--text);
  border:1px solid var(--border2);border-radius:8px;padding:8px 14px;
  font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
  text-shadow:none;box-shadow:none;}
.bmtv-store .btn-default:hover{border-color:var(--muted);background:var(--surface2);
  color:var(--text);}

/* the row of actions under the table */
.bmtv-store #frmCart > p{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}

@media (max-width:560px){
  .bmtv-store h2{font-size:17px;}
  .bmtv-store .tableCart th,
  .bmtv-store .tableCart td{padding:10px 9px;}
}

/* =====================================================================
   LIVE BADGE STICKING ON TOUCH SCREENS

   The badge is meant to introduce itself and get out of the way:

       .live-tag{animation:liveAutoHide 4.5s ease forwards;}
       .player:hover .live-tag{animation:none;opacity:1;visibility:visible;}

   The hover rule is right on a desktop -- point at the player and the badge
   stays up. On a touch screen there is no such thing as un-hovering: a tap
   leaves the element in :hover until you tap something else, so the badge
   parks on top of the video and only clears when you poke elsewhere. Which is
   exactly the "touching around the screen to get it to go away" behaviour.

   Re-stating the SAME animation for hover on touch devices means the computed
   value never changes when :hover latches, so nothing restarts and the badge
   keeps fading on schedule. Restating it (rather than setting opacity here)
   also handles the visibility: a running or filled animation outranks the
   plain opacity:1 / visibility:visible in the hover rule, so those stop
   applying without needing !important.

   Identical selector to the rule above, declared later, so it wins on order.
   Desktop is untouched -- hover:hover pointers never match this.
   ===================================================================== */
@media (hover:none){
  .player:hover .live-tag{animation:liveAutoHide 4.5s ease forwards;}
}

/* NOTE: this block MUST stay after the base cart rules above. Both are
   .bmtv-store .tableCart at identical specificity, so a media query does not
   win on its own -- source order decides, and the base rule sets
   min-width:560px. Placed before it, min-width:0 here lost and the table kept
   stretching the page on a phone.
   ===================================================================== */

/* =====================================================================
   CART ON A PHONE  -- rebuild the table as stacked cards

   The cart is a six-column table (checkbox / photo / product / qty / price /
   subtotal). Above it scrolls sideways inside .table-responsive, which is the
   honest fallback but a poor experience on a phone -- the totals are off the
   right edge, so you swipe to find out what you owe.

   Below 640px each row becomes its own card instead.

   HOW THE ROWS ARE TOLD APART WITHOUT ANY CLASSES.
   The app gives the cells no classes at all, so there is nothing to hook. The
   discriminator is colspan: every cell in an ITEM row has none, and every cell
   in the trailing rows (promo code, buttons + sales tax, contribution, order
   total) has one. So td:not([colspan]) is exactly the item cells and
   td[colspan] is exactly the summary cells. Verified against a real filled
   cart -- 6 plain cells per item, and 2/3/1/2 colspan cells in the four
   trailing rows.

   That avoids :has(), which would be the obvious tool here but is doing real
   work on a checkout page and is not worth the support question.

   The header row is hidden and its labels move onto the cells that need them
   via ::before. Only quantity, price and subtotal get one -- the photo and the
   product name label themselves.

   Cells keep their inline text-align from the app, so money stays
   right-aligned. Those are inline styles and would need !important on every
   cell to change, for no gain.
   ===================================================================== */
@media (max-width:640px){

  /* each row carries its own frame now, so drop the wrapper's */
  .bmtv-store .table-responsive{border:0;background:transparent;overflow:visible;
    border-radius:0;}
  .bmtv-store .tableCart{min-width:0;display:block;}
  .bmtv-store .tableCart tbody{display:block;}

  .bmtv-store .tableCart tr{display:grid;grid-template-columns:20px 56px 1fr;
    gap:0 11px;align-items:center;background:var(--surface);
    border:1px solid var(--border);border-radius:12px;
    padding:13px 14px;margin-bottom:10px;}

  /* the header row: its labels are reprinted on the cells below */
  .bmtv-store .tableCart tr:first-child{display:none;}

  .bmtv-store .tableCart td{display:block;border:0;padding:0;}

  /* --- item rows: photo and title on line one --- */
  .bmtv-store .tableCart td:not([colspan]):nth-child(1){grid-column:1;grid-row:1;}
  .bmtv-store .tableCart td:not([colspan]):nth-child(2){grid-column:2;grid-row:1;}
  .bmtv-store .tableCart td:not([colspan]):nth-child(3){grid-column:3;grid-row:1;}
  .bmtv-store .tableCart img{width:100%;height:auto;}

  /* --- item rows: qty / price / subtotal, one labelled line each --- */
  .bmtv-store .tableCart td:not([colspan]):nth-child(n+4){grid-column:1 / -1;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 0 0;}
  .bmtv-store .tableCart td:not([colspan]):nth-child(4){margin-top:11px;
    padding-top:12px;border-top:1px solid var(--border);}
  .bmtv-store .tableCart td:not([colspan]):nth-child(n+4)::before{
    color:var(--muted);font-size:10.5px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;flex:none;}
  .bmtv-store .tableCart td:not([colspan]):nth-child(4)::before{content:"Quantity";}
  .bmtv-store .tableCart td:not([colspan]):nth-child(5)::before{content:"Price";}
  .bmtv-store .tableCart td:not([colspan]):nth-child(6)::before{content:"Subtotal";}
  .bmtv-store .tableCart td:not([colspan]):nth-child(4) input[type="text"]{
    max-width:78px;}

  /* --- promo / tax / contribution / total --- */
  .bmtv-store .tableCart td[colspan]{grid-column:1 / -1;padding:4px 0;}
  .bmtv-store .tableCart td[colspan] input[type="text"]{max-width:none;
    margin-top:6px;}

  /* the two actions under the items stack rather than squeeze */
  .bmtv-store .tableCart .appButton,
  .bmtv-store .tableCart .btn.appButton{display:block;width:100%;margin:4px 0;}
  .bmtv-store #frmCart > p{flex-direction:column;align-items:stretch;}
  .bmtv-store #frmCart > p .appButton{width:100%;}
}

/* =====================================================================
   SCHEDULE GRID -- 4 across on top, 3 across below

   The lineup grid held 4 cards in a 3-column grid, so three sat on the first
   row and the fourth was stranded alone on a second row. The on-demand grid
   holds 3 cards in 3 columns, which is why only the top one looked wrong.

   THE WHOLE LADDER IS RESTATED HERE ON PURPOSE. additions.css is appended
   last, so a bare .sch-grid rule would also outrank the existing
   max-width:1040px and 620px rules earlier in the file -- same specificity,
   later wins -- and the grid would stay 4 columns on a phone. Redeclaring the
   media queries after the base rule keeps the source order correct.

   1180px is a new step: 4 columns across a 1040-1180px window leaves each card
   around 230px, which is too tight for the art plus the time slots. It drops
   to 3 there, matching the grid below it, before both fall to 2 and then 1.
   ===================================================================== */
.sch-grid{grid-template-columns:repeat(4,1fr);}
.sch-grid-vod{grid-template-columns:repeat(3,1fr);}
@media (max-width:1180px){ .sch-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:1040px){ .sch-grid,.sch-grid-vod{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .sch-grid,.sch-grid-vod{grid-template-columns:1fr;} }

/* =====================================================================
   THE "+ FOLLOW" BUTTON  -- hidden

   A wireframe placeholder that was never wired to anything: a bare <button>
   with no handler, no form and no JS bound to it anywhere. Clicking it did
   nothing, on all nine show pages.

   Hidden in CSS rather than deleted from nine pages, so it takes one paste
   instead of nine edits. The markup is also removed from the body files in
   this folder, so a future re-paste cannot bring it back.

   SELECTOR SAFETY. .btn-ghost alone would be wrong -- "Watch the Show" and
   "See the full schedule" use it too and must stay. Those are <a> elements;
   this is the only <button> inside .show-actions on any page. Verified: nine
   .show-actions buttons across the whole build, all of them this one.

   To bring a real follow feature back later, delete this rule.
   ===================================================================== */
.show-actions button.btn-ghost{display:none;}

/* ---------------------------------------------------------------------
   ALIGN THE EMBED'S CONTENT WITH THE REST OF THE PAGE

   The renderer is built to sit edge-to-edge in a full browser tab, so it
   supplies its own gutters. Dropped inside our .wrap, those gutters stack on
   top of ours and the page ends up with three different left edges:

       hero / section headings / CTA panel     0    (flush to .wrap)
       .ott-track      card carousels         14px
       .ott-row-title  row headings           28px

   Which reads exactly as "some of the content is wider than the rest" -- the
   video block looks inset and narrower than everything above and below it.

   Zero the horizontal gutters only. .ott-track keeps its bottom padding (that
   is clearance for the scrollbar, not an indent), and .ott-hero-content keeps
   its own padding because that text sits ON the hero image and does need to
   stay off the edge.

   The skeleton is included so the row does not visibly shift left when the
   real cards replace the loading placeholder.
   --------------------------------------------------------------------- */
.ott-wrap .ott-row-title{padding-left:0 !important;padding-right:0 !important;}
.ott-wrap .ott-track{padding-left:0 !important;padding-right:0 !important;}
.ott-wrap .ott-skeleton-track{padding-left:0 !important;padding-right:0 !important;}


/* =====================================================================
   WIREFRAME TEXTURE OVER THE LIVE PLAYER  -- removed

   .player-stage::after paints a 44px graph-paper grid across the whole
   stage. That was the wireframe's texture for an EMPTY player box. The real
   ChannelCast embed now mounts inside that same box, so the grid sits on top
   of the video.

   WHY IT CAME BACK AFTER BEING DELETED ONCE
   The rule is not in one place. All 18 preview pages carry their own copy of
   the base stylesheet, and every one of them defines it. Deleting it from a
   single page did nothing, because build-css.py merges all 18 and the other
   17 put it straight back. That is the merge being faithful, which is what it
   is for -- but faithful includes reviving something deleted from one copy.

   Overriding it HERE is what makes it stick: additions.css is appended after
   the merged rules, so this wins, and it survives every regeneration.

   It is pointer-events:none, so it never blocked playback -- it was only ever
   visible.
   ===================================================================== */
.player-stage::after{display:none !important;}

/* =====================================================================
   NOW PLAYING PROGRESS BAR  (.pb-prog)

   Not in the preview pages, so the merge never picked it up -- it was added
   later, in the sandbox's own homepage-live.html. Belongs here so it reaches
   the CMS with everything else.
   ===================================================================== */
.pb-prog{height:3px;border-radius:2px;background:var(--surface3);
  margin-top:7px;overflow:hidden;max-width:320px;}
.pb-prog i{display:block;height:100%;background:var(--red);width:0;
  transition:width .9s linear;}
@media (prefers-reduced-motion:reduce){
  .pb-prog i{transition:none;}
}

/* =====================================================================
   CHAT OFF ON MOBILE  -- close the empty row

   Turning chat off works by collapsing its grid COLUMN:

       .live-grid.chat-off{grid-template-columns:1fr 0px}

   which is exactly right on desktop -- zero width, nothing left behind.

   Below 1000px the grid is a single column, so the chat is no longer a column
   at all, it is the second ROW. Collapsing columns does nothing to a row, and
   chat-off otherwise only sets opacity:0, so the panel goes invisible while
   still occupying its 380px max-height plus the grid's 16px gap. An invisible
   panel holding open a screenful of nothing.

   Hiding the grid ITEM removes the row and its gap together. opacity alone
   cannot do that -- an invisible element still takes up space, which is the
   whole distinction.
   ===================================================================== */
@media (max-width:1000px){
  .live-grid.chat-off .chat-col{display:none;}
}

/* =====================================================================
   SHOW HERO ON MOBILE  (.show-hero-in and friends)

   The show hero never had a breakpoint. Unlike .pg-hero-in, which collapses
   at 980px, .show-hero-in stayed grid-template-columns:1.35fr 1fr at EVERY
   width -- so on a 360px phone the copy got about 200px and the artwork about
   150px. That is the "cards look small and the text is crunched" symptom, and
   it was on all nine show pages.

   Fixed once here rather than page by page, because all nine share these
   classes. No page edits.

   Matched to the 980px the secondary-page hero already uses, so the whole
   site changes shape at the same width instead of at two different ones.
   ===================================================================== */
@media (max-width:980px){
  /* one column: full-width copy, artwork beneath it */
  .show-hero-in{grid-template-columns:1fr;gap:24px;}

  /* the artwork is 16/9 and would tower over a phone at full width */
  .show-hero-media{max-width:520px;width:100%;}

  /* three stats at a 26px gap wrap into a ragged column; tighten and let
     them sit two-up instead */
  .show-stats{gap:14px 22px;margin-bottom:20px;}
  .show-stat{flex:0 1 auto;min-width:88px;}

  /* the copy is capped at 520px for line length on desktop; on a narrow
     screen that cap does nothing but the margin still matters */
  .show-desc{max-width:none;}
}

@media (max-width:560px){
  /* full-width buttons read better than two half-width ones side by side */
  .show-actions{flex-direction:column;align-items:stretch;}
  .show-actions .btn{justify-content:center;text-align:center;}
  .show-hero-media{max-width:none;}

  /* Secondary-page stat cards. At 980px they go two-up with min-width:180px,
     which still just about fits a 380px phone -- two 180px cards crammed
     against the gutters. Below 560px give them the full width each instead;
     a stat card that is 170px wide reads as a mistake. */
  .pg-stat{flex:1 1 100% !important;min-width:0 !important;}
  .pg-hero-side{flex-direction:column;}

  /* the timezone chip on Schedule sits in the same column */
  .sch-tz{flex:1 1 100%;min-width:0;}
}

/* =====================================================================
   SIDE PADDING ON .wrap  -- the mobile "flush to the edge" fix

   .wrap sets padding:0 24px. But .wrap is regularly combined with another
   class on the SAME element, and two of those also use the padding
   SHORTHAND, which resets all four sides:

       .section{padding:40px 0}        41 sections across the site
       .live-wrap{padding:26px 0 48px} the homepage player row

   Both are defined after .wrap and carry the same specificity, so they win
   outright and the horizontal padding becomes 0. Nobody notices on a desktop,
   because .wrap is also max-width:1300px and the leftover viewport looks like
   padding. On a phone the viewport is narrower than that max-width, so the
   content runs edge to edge -- which is exactly what it looked like.

   Restated here as LONGHANDS. Longhands do not disturb the vertical padding
   those classes are actually setting, this file is appended last so it wins
   on source order, and it covers any future class combined with .wrap rather
   than just the two that do it today.
   ===================================================================== */
.wrap{padding-left:24px;padding-right:24px;}

/* Small phones: 24px a side out of ~360px is a lot of the screen. */
@media (max-width:420px){
  .wrap{padding-left:16px;padding-right:16px;}
}

/* =====================================================================
   "POWERED BY CHANNELCAST" CTA  (.cc.cc-network)

   Full-bleed photo of a figure facing a wall of video screens -- which is
   literally the pitch: your own content, your own channel.

   THE BLUE IS DELIBERATE. Everything else on this site is red on near-black,
   and the instinct is to push a stray blue toward the palette. Not here:
   ChannelCast's own branding is blue, and this is the ChannelCast pitch. The
   colour marks it as a different product rather than looking like a mistake.

   Scoped to .cc-network for the same reason .cc-review is scoped: the shared
   .cc panel carries three different CTAs, and each needs its own picture or
   none at all.

   Scrim is heaviest on the LEFT, where the headline and copy sit, and lifts
   toward the centre where the screens are. The right-hand "What you get" card
   has its own opaque background, so the photo behind it is irrelevant.

   Muted in the file too -- 72% saturation, 62% brightness -- so the stylesheet
   only handles the scrim. 1600x900 rather than the 3840x2160 source, which is
   4.1 MB nobody would ever see at that size.
   ===================================================================== */
.cc-network::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    /* vignette, so no edge meets the panel border as a hard line */
    radial-gradient(ellipse 120% 130% at 50% 45%,
      rgba(10,9,8,0) 32%, rgba(10,9,8,.55) 76%, rgba(10,9,8,.9) 100%),
    /* scrim: protects the copy on the left, opens up toward the middle */
    linear-gradient(100deg,
      rgba(10,9,8,.95) 0%, rgba(10,9,8,.88) 26%,
      rgba(10,9,8,.62) 55%, rgba(10,9,8,.74) 100%),
    url('/images/cta-network.jpg');
  background-size:cover, cover, cover;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  pointer-events:none;
  z-index:0;
}
/* copy and the side card both sit above the photo */
.cc-network > *{position:relative;z-index:1;}

@media (max-width:899px){
  /* stacked, so the copy sits over more of the frame -- scrim goes vertical
     and heavier at the top where the headline is */
  .cc-network::after{
    background-image:
      radial-gradient(ellipse 140% 120% at 50% 50%,
        rgba(10,9,8,0) 28%, rgba(10,9,8,.62) 78%, rgba(10,9,8,.93) 100%),
      linear-gradient(to bottom,
        rgba(10,9,8,.94) 0%, rgba(10,9,8,.86) 45%, rgba(10,9,8,.76) 100%),
      url('/images/cta-network.jpg');
  }
}

/* =====================================================================
   "ARTISTS - GET REVIEWED" CTA  (.cc.cc-review)

   Adds a full-bleed photo from the Can You Dig It!? studio so the block stops
   reading as a flat panel. In the main stylesheet rather than a page-specific
   one, because the block is on 10 pages.

   SCOPED TO .cc-review ON PURPOSE. The .cc container is used for three
   different CTAs: "Artists - Get Reviewed" (10 pages), "Powered by
   ChannelCast" (homepage) and "Never Miss a Drop" (Weekly Interrupt). Styling
   bare .cc would put a Can You Dig It studio photo behind the ChannelCast
   platform pitch, which is the wrong show entirely. Add cc-review alongside cc
   on the markup that should carry the photo; the other two are untouched.

   Full bleed rather than a right-hand panel, for two reasons. A part-width
   layer has an inner edge, and no amount of gradient hides it when the photo
   itself has a dark vertical band near the seam -- it just reads as a line
   down the middle of the box. And the photo has three hosts spread across the
   frame; cropping to one side throws away the other two.

   The image is muted twice over, on purpose:
     * In the file. Desaturated to 50%, darkened to 72% and slightly flattened
       when it was cropped, so it already sits back from the page.
     * In CSS. Dark gradients are layered OVER it rather than dropping the
       whole layer's opacity -- opacity would fade the scrim along with the
       photo, and the scrim is what keeps the copy readable.

   To tune it: the alpha values in the scrim are the dial. Higher = the photo
   recedes, lower = it comes forward. The first two stops sit under the
   headline and body copy, so those are the ones that affect legibility.

   Three background layers do the work, in order: a vignette that pulls every
   edge back into the panel so nothing meets the border as a hard line; a
   directional scrim, heaviest on the left where the copy sits and lifting
   toward the right where the third host is; then the photo.

   Gradients rather than mask-image, so it degrades to a softer version of the
   same idea where masks are unsupported instead of a hard-edged rectangle.

   .cc already sets position:relative and overflow:hidden, so the ::after is
   clipped by the panel's 16px radius for free, and it already carries a red
   radial glow anchored at 15% -- glow left, photo right, they do not fight.

   Source: Can You Dig It!? episode still from ChannelCast -- three hosts at
   the desk with the set's own CAN YOU DIG IT! banner behind them. Cropped to
   drop the burned-in lower-third graphics, then desaturated and darkened in
   the file so the stylesheet only handles the scrim. /images/cta-review.jpg
   ===================================================================== */
.cc-review::after{
  content:"";
  position:absolute;
  inset:0;                       /* full bleed -- no partial-width edge to fade */
  background-image:
    /* 1. vignette: pulls every edge back into the panel so nothing meets the
          border as a hard line, and keeps the eye on the middle */
    radial-gradient(ellipse 118% 130% at 62% 45%,
      rgba(13,11,10,0) 34%, rgba(13,11,10,.55) 74%, rgba(13,11,10,.88) 100%),
    /* 2. scrim: heaviest on the left, where the headline and copy sit,
          lifting toward the right where the third host is */
    linear-gradient(100deg,
      rgba(13,11,10,.96) 0%, rgba(13,11,10,.90) 30%,
      rgba(13,11,10,.68) 58%, rgba(13,11,10,.58) 100%),
    /* 3. the photo */
    url('/images/cta-review.jpg');
  background-size:cover, cover, cover;
  background-position:center, center, center right;
  background-repeat:no-repeat, no-repeat, no-repeat;
  pointer-events:none;
  z-index:0;
}
/* copy sits above the photo */
.cc-txt{position:relative;z-index:1;}

/* Narrow screens: less width means the copy sits over more of the photo, so
   the scrim goes vertical and heavier at the top where the headline is. */
@media (max-width:899px){
  .cc-review::after{
    background-image:
      radial-gradient(ellipse 140% 120% at 50% 50%,
        rgba(13,11,10,0) 30%, rgba(13,11,10,.60) 78%, rgba(13,11,10,.92) 100%),
      linear-gradient(to bottom,
        rgba(13,11,10,.95) 0%, rgba(13,11,10,.88) 45%, rgba(13,11,10,.74) 100%),
      url('/images/cta-review.jpg');
    background-position:center, center, center;
  }
}


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

   Centred from the logo all the way down to the copyright line. Pinned to
   680px rather than 900px on purpose: that is where .foot-top collapses to
   a single column. Centring three side-by-side columns would just look
   broken.
   ===================================================================== */
@media (max-width:680px){

  /* Columns stretch to full width -- the grid default. NOT justify-items:center,
     which shrinks each column to its content and leaves the blocks looking
     ragged even though their text is centred. */
  .foot-top{
    grid-template-columns:1fr;
    justify-items:stretch;
    text-align:center;
    gap:34px;
  }

  .foot-brand,
  .foot-col,
  .foot-signup{
    width:100%;
    text-align:center;
  }

  /* The logo is an inline-block anchor, so auto margins need a block box. */
  .foot-logo{display:block;margin-left:auto;margin-right:auto;}
  .foot-logo img{margin-left:auto;margin-right:auto;}

  /* The blurb is capped at 300px by the desktop rule. text-align:center only
     centres the text INSIDE that box -- the box itself stays flush left, which
     is what made the logo copy look left-aligned while everything under it
     looked centred. Full width on a phone, centred, no cap. */
  .foot-brand p{
    max-width:none;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  /* Flex containers ignore text-align on their items -- these need
     justify-content or they stay hard left no matter what. */
  .foot-cc{justify-content:center;flex-wrap:wrap;}
  .socials-sm{justify-content:center;width:100%;}

  .foot-col h4,
  .foot-col a,
  .foot-signup .lbl{text-align:center;}

  /* the footer Subscribe matches the header's: full width, centred */
  .foot-signup .btn-subscribe{width:100%;justify-content:center;}

  .foot-bot{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
  }
}

/* =====================================================================
   HOMEPAGE HEADING

   The homepage was the only page with no <h1>. Every other page gets one from
   the CMS title macro, which the footer script moves into that page's hero --
   and this page has no hero, so there was nothing for it to land in.

   Treated as a quiet label set to the right of the player rather than a
   headline: small, tracked out, upper case, in --muted2. It reads as a
   deliberate mark on the layout instead of a heading bolted on for search
   engines, which is the point.

   HOW FAR THE DIMMING CAN GO. --muted2 (#6b645d) is 3.4:1 against the page
   background, which clears the 3:1 large-text threshold. The next step down,
   --border2, is 1.6:1 -- at that point it stops being quiet and starts looking
   like text hidden from readers but left for crawlers, which is the thing
   search engines actually penalise. So this is as dim as it should get.

   text-transform only changes the rendering; the text a crawler reads is
   unchanged, and it still mirrors the <title>.
   ===================================================================== */
.home-head{margin-bottom:12px;text-align:right;}
.home-title{font-size:clamp(9.8px,0.98vw,11px);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);
  margin:0;line-height:1.4;}

@media (max-width:640px){
  .home-head{margin-bottom:10px;}
  .home-title{font-size:9px;letter-spacing:.07em;}
}

/* =====================================================================
   HOMEPAGE SECTION WIDTHS -- line the four blocks up

   Two of the four homepage blocks are 40px narrower than the other two:

     .wrap.live-wrap            player + chat        1300 - 48      = 1252
     .up-section    > .wrap     Upcoming Videos      1300 - 48 - 40 = 1212
     .latest-section> .wrap     Latest Videos        1300 - 48 - 40 = 1212
     .section.wrap              ChannelCast CTA      1300 - 48      = 1252

   The two narrow ones each carry an extra <div style="padding:20px"> inside
   their .wrap, left over from the preview where those sections sat on their
   own card. Everything inside them -- headings, the playlist, the video grid
   -- is inset by 20px a side, so the page steps in and back out as you scroll.

   HORIZONTAL ONLY. The 20px top and bottom is left alone: it is doing real
   work in the vertical rhythm, and removing it would tighten both sections
   against their neighbours as a side effect of a width fix.

   !important is unavoidable here -- the padding is an inline style attribute,
   which outranks any stylesheet rule. The alternative is re-pasting both page
   bodies to delete it, which is two more CMS edits for the same result.
   ===================================================================== */
.up-section > .wrap > div[style],
.latest-section > .wrap > div[style]{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* =====================================================================
   UPCOMING ROWS ON A PHONE -- show the whole title, wrapped

   The song was not being squeezed out, it was switched off:

       @media(max-width:680px){ .up-song{display:none;} }

   a wireframe decision to keep every row on one line. The cost is that a
   phone shows "Mike Craftsman" with no idea which track, and for a show
   episode -- which has no artist at all -- the row was left almost empty.

   Undone here, and the row is allowed to grow instead. .up-artist and
   .up-song are inline spans in one container, so they reflow as a single
   sentence and the em-dash keeps reading as a separator mid-line:

       Now   Mike Craftsman GÇö Aliens &
             Vampires and Other Beings...

   The time column and duration are pulled in and nudged down a couple of
   pixels so they sit on the FIRST line of a wrapped title rather than
   floating against its middle.

   MUST STAY AFTER the 680px rule it undoes -- same selector, same
   specificity, so source order is the only thing deciding it. That is the
   trap this file has hit before.
   ===================================================================== */
@media (max-width:680px){
  .up-song{display:inline;}
  .up-row{gap:11px;padding:12px 14px;align-items:flex-start;}
  .up-when{width:58px;font-size:11px;padding-top:2px;}
  .up-row.now .up-when{align-items:flex-start;padding-top:5px;}
  .up-mid{flex:1 1 auto;min-width:0;line-height:1.45;}
  .up-artist{font-size:13.5px;}
  .up-song{font-size:12.5px;}
  .up-dur{font-size:11px;padding-top:3px;}
}

/* =====================================================================
   LIVE BROADCAST STATE

   ChannelCast reports it publicly at /api/v1/playback/status/{channelId}:

       {"liveStatus":"live","isLive":true,"liveSince":"...","playbackId":"..."}

   player.js decides with (isLive && playbackId); both homepage sections use
   exactly that test, so the panels cannot disagree with the video above them.

   Everything here is driven by a class the scripts add -- .is-live on
   .player-bar and on .up-section. No class, no change, so a failed request or
   an un-pasted script leaves the page exactly as it is today.

   All selectors below are NEW, so nothing here can override an existing rule
   by source order -- the trap that has bitten this file before.
   ===================================================================== */

/* Now Playing: the progress bar measures a scheduled file, and there is no
   file on air during a live stream. */
.player-bar.is-live .pb-prog{display:none;}

/* The playlist is showing what WILL play, not what is playing. Dim it and say
   so, rather than leaving a row labelled "Now" against a track that is not. */
.up-live{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:14px 18px;background:linear-gradient(90deg,rgba(232,24,28,.24),rgba(232,24,28,.04));
  border-bottom:1px solid var(--border2);box-shadow:inset 3px 0 0 var(--red);}
.up-live .d{width:8px;height:8px;border-radius:50%;background:var(--red);
  animation:blink 1.3s infinite;flex:none;}
.up-live-t{font-weight:800;font-size:12.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text);}
.up-live-s{color:var(--muted);font-size:12.5px;}

.up-section.is-live .up-row{opacity:.5;}
.up-section.is-live .up-row.now{background:none;box-shadow:none;}
.up-section.is-live .up-row.now .up-when .d{animation:none;opacity:.4;}

@media (prefers-reduced-motion:reduce){
  .up-live .d{animation:none;}
}

/* =====================================================================
   MANUAL OVERRIDES  --  Eric's hand-edits, folded in

   WHY THIS SECTION EXISTS
   These were added by hand to the CMS stylesheet template. That file gets
   REPLACED wholesale every time a new build is pasted over it, so anything
   edited there is lost on the next paste. Keeping them here means they
   survive every rebuild.

   Anything else added by hand belongs in this block. Send it over and it
   goes in; edit it only in the CMS and it disappears at the next paste.

   Kept verbatim as written -- these are working rules, not a draft.

   WHY THE ELEMENT-QUALIFIED SELECTORS ARE RIGHT
   h2.sec-title is (0,1,1) where the base .sec-title is (0,1,0), so these win
   without !important. For the ott-* ones that matters more than usual: the
   ChannelCast renderer injects its own stylesheet at RUNTIME, which lands
   after this file, so an equal-specificity rule here would lose. The extra
   element is what outranks it. Verified against the renderer's own rules --
   all of them are single-class (0,1,0).

   ONE TO WATCH: .ott-hero-content below is (0,1,0), the same specificity as
   the renderer's own .ott-hero-content rule, which lands later. It works today
   only because the two set different properties (text-shadow here, padding
   there). If ChannelCast ever sets a text-shadow on that element, theirs would
   win. Scoping it as .ott-wrap .ott-hero-content would make it (0,2,0) and
   settle it permanently -- left as written for now.

   NOTE: h2.ott-row-title{display:none} hides the OTT row headings entirely,
   which makes the .ott-wrap .ott-row-title gutter rule earlier in this file
   redundant. Harmless, and it keeps the alignment correct if the headings are
   ever switched back on.
   ===================================================================== */

/* ---- HEADER ADJUSTMENTS ---- */

h2.sec-title,
h2.cc-h,
h1.pg-title {
    color:#fff;
}

h3.ott-card-title {
    color:#fff;
    font-weight:bold;
}
h3.ott-card-title:hover {
    color:#f31a25;
    text-decoration:none;
}

h2.ott-row-title {
    display:none;
}
h1.ott-hero-title {
    color:#fff;
    font-weight:bold;
    font-size:1.7em;
}
.ott-hero-content {
    text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* =====================================================================
   CMS OVERRIDE GUARD  (generated -- keep this LAST in the stylesheet)

   The CMS ships its own global styles and may load them after this
   file. Without this block its rules win on any link that relies on
   the bare `a{color:inherit}` -- the logo, the top-bar button, card
   links, the footer logo -- which shows up as underlines on hover and
   the wrong hover colour.

   Underlines are forced off outright: text-decoration appears exactly
   once in this entire design, as `none`. Nothing here is underlined by
   intent, so there is nothing to lose.

   Colour is handled the other way round -- reset to inherit, then every
   colour the design deliberately sets on a link is re-asserted below.
   ===================================================================== */
a,a:link,a:visited,a:hover,a:active,a:focus{text-decoration:none !important;}
a,a:link,a:visited,a:hover,a:active,a:focus{color:inherit !important;}
a:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

/* the design's own link colours, re-asserted so the reset above cannot eat them */
a,a:link,a:visited,a:hover,a:active,a:focus{color:inherit !important;}
.topbar-btn,.topbar-btn:link,.topbar-btn:visited,.topbar-btn:hover,.topbar-btn:active,.topbar-btn:focus{color:#1a1206 !important;}
.socials a.s-yt{color:#FF0000 !important;}
.socials a.s-ig{color:#E1306C !important;}
.socials a.s-fb{color:#1877F2 !important;}
.socials a.s-tw{color:#9146FF !important;}
.socials a:hover{color:#fff !important;}
.btn-red,.btn-red:link,.btn-red:visited,.btn-red:hover,.btn-red:active,.btn-red:focus{color:#fff !important;}
.btn-ghost,.btn-ghost:link,.btn-ghost:visited,.btn-ghost:hover,.btn-ghost:active,.btn-ghost:focus{color:var(--text) !important;}
.nav-in a{color:#fff !important;}
.nav-in a:hover{color:#fff !important;}
.nav-in a.on{color:#fff !important;}
.nav-in a.on:hover{color:#fff !important;}
.has-sub>a::after,.has-sub>a::after:link,.has-sub>a::after:visited,.has-sub>a::after:hover,.has-sub>a::after:active,.has-sub>a::after:focus{color:currentColor !important;}
.submenu a{color:var(--text) !important;}
.submenu a:hover{color:#fff !important;}
.nav-in a.acct{color:#fff !important;}
.nav-in a.acct:hover{color:#fff !important;}
.sec-link{color:var(--muted) !important;}
.sec-link:hover{color:var(--red) !important;}
.foot-col a{color:var(--muted) !important;}
.foot-col a:hover{color:#fff !important;}
.foot-socials a{color:var(--muted) !important;}
.foot-socials a:hover{color:#fff !important;}
.show-crumb a{color:var(--muted) !important;}
.show-crumb a:hover{color:#fff !important;}
.ac-crumb a{color:var(--muted) !important;}
.ac-crumb a:hover{color:var(--red) !important;}
.sch-crumb a{color:var(--muted) !important;}
.sch-crumb a:hover{color:var(--red) !important;}
.sch-link{color:var(--muted) !important;}
.sch-link:hover{color:var(--red) !important;}
.bd-crumb a{color:var(--muted) !important;}
.bd-crumb a:hover{color:var(--red) !important;}
.ct-crumb a{color:var(--muted) !important;}
.ct-crumb a:hover{color:var(--red) !important;}
.ct-mail a{color:var(--text) !important;}
.ct-mail a:hover{color:var(--red) !important;}
.ct-soc{color:var(--muted) !important;}
.ct-soc:hover{color:#fff !important;}
.wk-crumb a{color:var(--muted) !important;}
.wk-crumb a:hover{color:var(--red) !important;}


/* Custom CSS from Template ID #21571 */

/* =====================================================================
   SNIPPET CSS - "Artists, Get Reviewed" CTA

   ONLY NEEDED IF the main stylesheet is not up to date. Everything here is
   already inside blackmarker-tv.css; this is the same rules pulled out so the
   snippet can be dropped in without re-pasting the whole sheet.

   Do not paste both. Duplicate rules are harmless but they drift apart the
   first time one of them is edited.

   Asset: /images/cta-review.jpg
   ===================================================================== */

/* ---- the shared CTA panel ---- */
.cc{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border); background:radial-gradient(ellipse 60% 100% at 15% 50%,rgba(232,24,28,.18),transparent 60%),linear-gradient(120deg,#171310,#0d0b0a); padding:42px 40px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;}
.cc-txt{flex:1;min-width:280px;}
.cc-eye{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px;}
.cc-h{font-size:clamp(23px,3vw,32px);font-weight:900;letter-spacing:var(--disp);line-height:1.08;margin-bottom:13px;}
.cc-p{color:var(--muted);font-size:15px;max-width:520px;margin-bottom:22px;}
.cc-actions{display:flex;gap:12px;flex-wrap:wrap;}
.cc-txt{position:relative;z-index:1;}

/* ---- HEADER ADJUSTMENTS ---- */

h2.sec-title,
h2.cc-h,
h1.pg-title {
    color:#fff;
}

h3.ott-card-title {
    color:#fff;
    font-weight:bold;
}
h3.ott-card-title:hover {
    color:#f31a25;
    text-decoration:none;
}

h2.ott-row-title {
    display:none;
}
h1.ott-hero-title {
    color:#fff;
    font-weight:bold;
    font-size:1.7em;
}
.ott-hero-content {
    text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
}
.wk-card h3 {
    color:#fff;
}

/* =====================================================================
   "ARTISTS - GET REVIEWED" CTA  (.cc.cc-review)

   Adds a full-bleed photo from the Can You Dig It!? studio so the block stops
   reading as a flat panel. In the main stylesheet rather than a page-specific
   one, because the block is on 10 pages.

   SCOPED TO .cc-review ON PURPOSE. The .cc container is used for three
   different CTAs: "Artists - Get Reviewed" (10 pages), "Powered by
   ChannelCast" (homepage) and "Never Miss a Drop" (Weekly Interrupt). Styling
   bare .cc would put a Can You Dig It studio photo behind the ChannelCast
   platform pitch, which is the wrong show entirely. Add cc-review alongside cc
   on the markup that should carry the photo; the other two are untouched.

   Full bleed rather than a right-hand panel, for two reasons. A part-width
   layer has an inner edge, and no amount of gradient hides it when the photo
   itself has a dark vertical band near the seam -- it just reads as a line
   down the middle of the box. And the photo has three hosts spread across the
   frame; cropping to one side throws away the other two.

   The image is muted twice over, on purpose:
     * In the file. Desaturated to 50%, darkened to 72% and slightly flattened
       when it was cropped, so it already sits back from the page.
     * In CSS. Dark gradients are layered OVER it rather than dropping the
       whole layer's opacity -- opacity would fade the scrim along with the
       photo, and the scrim is what keeps the copy readable.

   To tune it: the alpha values in the scrim are the dial. Higher = the photo
   recedes, lower = it comes forward. The first two stops sit under the
   headline and body copy, so those are the ones that affect legibility.

   Three background layers do the work, in order: a vignette that pulls every
   edge back into the panel so nothing meets the border as a hard line; a
   directional scrim, heaviest on the left where the copy sits and lifting
   toward the right where the third host is; then the photo.

   Gradients rather than mask-image, so it degrades to a softer version of the
   same idea where masks are unsupported instead of a hard-edged rectangle.

   .cc already sets position:relative and overflow:hidden, so the ::after is
   clipped by the panel's 16px radius for free, and it already carries a red
   radial glow anchored at 15% -- glow left, photo right, they do not fight.

   Source: Can You Dig It!? episode still from ChannelCast -- three hosts at
   the desk with the set's own CAN YOU DIG IT! banner behind them. Cropped to
   drop the burned-in lower-third graphics, then desaturated and darkened in
   the file so the stylesheet only handles the scrim. /images/cta-review.jpg
   ===================================================================== */
.cc-review::after{
  content:"";
  position:absolute;
  inset:0;                       /* full bleed -- no partial-width edge to fade */
  background-image:
    /* 1. vignette: pulls every edge back into the panel so nothing meets the
          border as a hard line, and keeps the eye on the middle */
    radial-gradient(ellipse 118% 130% at 62% 45%,
      rgba(13,11,10,0) 34%, rgba(13,11,10,.55) 74%, rgba(13,11,10,.88) 100%),
    /* 2. scrim: heaviest on the left, where the headline and copy sit,
          lifting toward the right where the third host is */
    linear-gradient(100deg,
      rgba(13,11,10,.96) 0%, rgba(13,11,10,.90) 30%,
      rgba(13,11,10,.68) 58%, rgba(13,11,10,.58) 100%),
    /* 3. the photo */
    url('/images/cta-review.jpg');
  background-size:cover, cover, cover;
  background-position:center, center, center right;
  background-repeat:no-repeat, no-repeat, no-repeat;
  pointer-events:none;
  z-index:0;
}
/* copy sits above the photo */
.cc-txt{position:relative;z-index:1;}

/* Narrow screens: less width means the copy sits over more of the photo, so
   the scrim goes vertical and heavier at the top where the headline is. */
@media (max-width:899px){
  .cc-review::after{
    background-image:
      radial-gradient(ellipse 140% 120% at 50% 50%,
        rgba(13,11,10,0) 30%, rgba(13,11,10,.60) 78%, rgba(13,11,10,.92) 100%),
      linear-gradient(to bottom,
        rgba(13,11,10,.95) 0%, rgba(13,11,10,.88) 45%, rgba(13,11,10,.74) 100%),
      url('/images/cta-review.jpg');
    background-position:center, center, center;
  }
}