:root {
  --accent-color: #ad1111;
  --accent-color-rgb: 173, 17, 17; /* rgb() components of --accent-color, for rgba() usage (e.g. focus rings) */
  --accent-hover: #bf1c1c;
  --accent-600: #9b0f0f;
  --accent-700: #880d0d;
  --light-bg: #f5f5f5;
  --border-color: #ccc;
  --text-color: #fff;
  --darker-border: #DDD;
  --zebra-bg: #f0f0f0;
  --surface: #fff; /* card/table/input backgrounds -- swap this instead of hardcoding #fff so dark mode picks it up */
  --shadow-color-rgb: 0, 0, 0;
  --text-muted: #666;
  --text-muted-strong: #333;
  --expand-label-color: #777;
  --expand-value-color: #111;
  --chrome-text: #444;
  --chrome-text-strong: #111;
  --chrome-border: #d0d0d0;
  --chrome-hover-bg: #f6f6f6;
  --chrome-hover-border: #b5b5b5;
}

/* Dark-mode token overrides -- ColorMag's own dark/light switch toggles this class on <body>, no JS hook needed on our side */
body.dark-skin {
  --accent-color: #ad1111;
  --accent-color-rgb: 230, 69, 69;
  --accent-hover: #ff5c5c;
  --accent-600: #c73838;
  --accent-700: #a82f2f;
  --light-bg: #1e1e1e;
  --border-color: #444;
  --darker-border: #555;
  --zebra-bg: #262626;
  --surface: #1a1a1a;
  --shadow-color-rgb: 0, 0, 0;
  --text-muted: #aaa;
  --text-muted-strong: #ddd;
  --expand-label-color: #999;
  --expand-value-color: #eee;
  --chrome-text: #ccc;
  --chrome-text-strong: #fff;
  --chrome-border: #444;
  --chrome-hover-bg: #2a2a2a;
  --chrome-hover-border: #666;
}

/* ColorMag Pro Fixes - Because they like to do dumb things for no reason */
body {
  background-color: inherit;
  background-size: auto !important;
}

/* Let the left column use the entire row instead of limiting to 30% for no apparent reason */
.cm-header-builder .cm-header-main-row .cm-header-left-col {
  flex-basis: 100% !important;
  max-width: 100% !important;
}

/* Hide the other columns because I don't use them */
.cm-header-builder .cm-header-main-row .cm-header-center-col:empty,
.cm-header-builder .cm-header-main-row .cm-header-right-col:empty {
  display: none !important;
}

/* Align the Home Icon and Hamburger Toggle Button side-by-side */
.cm-mobile-header .cm-header-bottom-row .cm-header-left-col,
.cm-header-bottom-row .cm-header-left-col {
  flex-direction: row !important;
}



.dark-skin .cm-header-builder .cm-header-top-row {
  background-color: rgb(34.68, 34.68, 34.68);
  color: #fff;
}

.cm-header-builder .cm-header-top-row a, .cm-header-builder .cm-header-top-row a:hover {
  color: var(--accent-color);
}

.cm-header-builder .cm-header-top-row a:hover {
  text-decoration: underline;
}

.dark-skin .cm-posts .post {
  box-shadow: none;
}


/* built by renderAffiliateLinksHtml(). Sized to fit Tabulator's 255px Affiliate Links column. */
.crtab-aff-link {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-600) !important;
  background: rgba(var(--accent-color-rgb), 0.3);
  border-radius: 10px;
  padding: 3px 9px;
  line-height: 1.4;
  text-decoration: none !important;
  margin-right: 4px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.crtab-aff-link:hover {
  background: var(--accent-color, #ad1111);
  color: #fff !important;
  text-decoration: none !important;
}

body {
  padding-right: 0px !important;
}

/*****************************
 * Various Site Wide Skin Hacks
 ****************************/

/* Patreon Link Fix */
/* #menu-item-10884 {
	background-color: #AD1111;
} */

/* Hide the ReCaptcha Badge */
.grecaptcha-badge { visibility: hidden; }

/* Poll color and display fixes */
.wp-poll-header {
	color: #ad1111;
}

#polls-widget-4 .wp-polls-ul label {
    display: block;
    margin-left: 20px;
	  font-size: 12px;
}
#polls-widget-4 .wp-polls-ul input {
    float: left;
    margin-left: -20px;
    margin-right: 7px;
	  margin-top: 4px;
}

/* Body Padding Fix */
body { 
	padding: 0; 
}

/* Fix Search Height */
.search-wrap .s { height: 42px; }

/* Show Image first on solicits page when in mobile view */
/* @media screen and (max-width: 600px) {
	.wp-block-columns :nth-child(1) { order: 2}
	.wp-block-columns :nth-child(2) { order: 1}
}

@media screen and (max-width: 600px) {
	.homecolumns :nth-child(1) { order: 1 !important}
	.wp-block-columns :nth-child(2) { order: 2 !important}
} */

/* Font Size Fixes */

p, li, .newsticker li, .wp-block-quote p, .date { font-size: 12px;}

/* CSS for News on Homepage */
.news_title {
	padding-bottom: 10px;
	padding-top: 10px;
}

.homedate {
	color: #6F0000;
	float: right;
}

body.dark-skin .homedate {
	color: #ff8a8a; /* #6F0000 is near-invisible on a dark page bg */
}

.cat-item { font-size: 16px}

#content .post .article-content .below-entry-meta .byline a,
#content .post .article-content .below-entry-meta .posted-on a {
	font-size: 11px;
}


/* Link Hover Underline */
a:hover { text-decoration: underline;}

#site-navigation a:hover, #site-title a:hover { text-decoration: none; }

/* Navbar Blue Background Fix */

.cm-primary-nav ul li.current-menu-item ul li a:hover {	
    background-color: transparent;
}

/* Add a dark border and shadow to dropdowns to separate them from the sticky header */
#cm-primary-nav ul.sub-menu {
    border: 1px solid #444 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2),
                0 10px 20px rgba(0,0,0,0.4) !important;
}

/* slight separator between dropdown items */
#cm-primary-nav ul.sub-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#cm-primary-nav ul.sub-menu li:last-child {
    border-bottom: none;
}

/*
 * LANDSCAPE MENU REFACTOR
 * Shortens long labels and hides "RESTOCKS" in the 768px-1100px range.
 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    /* global squeeze -- fine to leave global, helps submenu text fit better too */
    #cm-primary-nav a {
        font-size: 11px !important;
        letter-spacing: -0.2px;
    }

    /* Rename This Week (Top Level Only) */
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(1) > a {
        font-size: 0 !important;
    }
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(1) > a::after {
        content: "TW";
        font-size: 11px !important;
    }

    /* Rename Next Week (Top Level Only) */
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(2) > a {
        font-size: 0 !important;
    }
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(2) > a::after {
        content: "NW";
        font-size: 11px !important;
    }

    /* Rename Collected Editions (Top Level Only) */
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(3) > a {
        font-size: 0 !important;
    }
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(3) > a::after {
        content: "EDITIONS";
        font-size: 11px !important;
    }

    /* Rename Solicitations (Top Level Only) */
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(4) > a {
        font-size: 0 !important;
    }
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(4) > a::after {
        content: "SOLICITS";
        font-size: 11px !important;
    }

    /* Rename Watchlist (Top Level Only) */
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(8) > a {
        font-size: 0 !important;
    }
    #cm-primary-nav ul:not(.sub-menu) > li:nth-child(8) > a::after {
        content: "WL";
        font-size: 11px !important;
    }

}


	
/* Community List Sidebar Fixes */

/* .community ul {
	display: block;
	list-style-type: disc;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	padding-left: 25px;
}

.community li { 
	line-height: 1.0 !important;
}
 */
 
/* Get rid of the breadcrumb (bugged) */
.breadcrumb-wrap {
	display: none;
}

/* Header and logo side by side */
#cm-site-info, #cm-site-branding {
	display: inline-block;
  vertical-align: middle;
}

#cm-site-info {
	padding-left: 20px;
}

.cm-site-title, .cm-site-description {
	line-height: 1.2 !important;
}

.cm-header-col-1 {
	display: block !important;
	flex: auto;
}

.cm-site-title a, #cm-primary-nav a {
	text-decoration: none;
}

.cm-content { padding-top: 20px; }
.cm-entry-summary {
	margin-top: 0px;
}

/* Transparent Header */
#cm-masthead {
	background: transparent;
}

.dark-skin #page, .dark-skin .cm-main-header {
	background-color: transparent !important;
}

/* Fix Cover Font/Color */
.wp-block-cover {
	color: white;
}
.has-huge-font-size {
	font-size: 36px !important;
}


/* Fix enormous search */
.search-wrap .s {
	height: auto
}

/* Contact Form Colors */
.wpcf7 input, .wpcf7 textarea {
	background-color: #ddd;
	border: 1px solid #999;
	color: #000;
}


/* Quote where the background isn't incredibly obnoxious */
.light_quote {
	background: #999
}




/*****************************
 * Header Styling 
 ****************************/

h4 { 
  font-size: 20px; 
}

/* PAGE TITLES (Container draws line, title is the red badge) */
.page .cm-entry-header {
  border-bottom: 2px solid var(--accent-color);
  margin-bottom: 25px;
  line-height: 1;
}

.page .cm-entry-header h1.cm-entry-title {
  display: inline-block;
  background-color: var(--accent-color);
  color: #ffffff;
  padding: 6px 20px;
  font-size: 18px;
  margin: 0;
}

/* STANDALONE .crHeader (Works on any element, anywhere, without horizontal scroll) */
.crHeader {
  display: inline-block;
  position: relative;
  background-color: var(--accent-color);
  color: #ffffff;
  padding: 6px 20px !important;
  font-size: 18px;
  margin-bottom: 25px !important;
}

.crHeader::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /* Extends 100vw to the right, but stops at the right viewport edge */
  width: 100vw;
  max-width: calc(100vw - 100%);
  height: 2px;
  background-color: var(--accent-color);
  pointer-events: none;
}

#cm-primary {
  overflow: hidden;
}

/* Theme's global reset zeroes ul/ol padding; restore it for content-area lists so outside-position
   bullets sit inside the padding-box instead of bleeding left and getting clipped by #cm-primary's overflow: hidden */
.entry-content ul, .entry-content ol {
  padding-left: 25px;
  margin-left: 0;
}

/*****************************
 * Modal Form Styling
 ****************************/

/* Manage screen edit modal */
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.form-group label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-color);
  margin-right: 1rem;
  width: 120px;
}

.form-group input[type="checkbox"] {
  margin-right: 0.5rem;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem;
  margin: 0;
}

textarea#Collects.form-control {
  height: 10em;
}

.form-control {
  flex: 1;
  height: 36px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid var(--darker-border);
  outline: none;
  background-color: var(--surface);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.2);
  outline: none;
}

.form-control[type="text"],
.form-control[type="date"],
.form-control select,
.form-control textarea {
  margin: 0;
  padding: 8px;
}

.form-control select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 8px;
  background: var(--surface) url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0IDZsLTYuNyA2LjctNi43IDYuNyA2LjctNi43bDUuOCA1LjgtNS44IDUuOCA1LjgtNS44eiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==') no-repeat right 10px center; /* Custom dropdown arrow */
  background-size: 12px 12px;
}

body.dark-skin .form-control select {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0IDZsLTYuNyA2LjctNi43IDYuNyA2LjctNi43bDUuOCA1LjgtNS44IDUuOCA1LjgtNS44eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==') no-repeat right 10px center; /* white-fill variant -- black arrow was invisible on the dark surface bg */
}

.form-control textarea {
  min-height: 80px;
  resize: vertical;
}



/*****************************
 * Button Styling 
 ****************************/

.edit-button, .delete-button, .expand-button,
.btn, .remove-from-watchlist-button, .add-to-watchlist-button {
  min-width: 65px !important;
  background-color: var(--accent-color);
  color: var(--text-color);
  font-size: 10px !important;
  font-family: "Open Sans", sans-serif !important;
  padding: 4px 8px;
  margin-left: -0.5em;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.2em;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.edit-button, .delete-button, .expand-button {
  min-width: 40px !important;
}

.edit-button:hover, .delete-button:hover, .expand-button:hover,
.btn:hover, .remove-from-watchlist-button:hover, .add-to-watchlist-button:hover {
  background-color: var(--accent-hover);
  border-color: var(--text-color);
  color: var(--text-color);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
}

.btn {
  color: var(--text-color);
  text-transform: uppercase;
}


/*****************************
 * Modal Styling
 ****************************/

.modal {
  font-size: 12px;
  font-family: "Open Sans", serif;
}

.modal-header {
  background-color: var(--accent-color);
  color: var(--text-color);
  font-weight: bold;
}

.modal-body tr td:first-child {
  width: 110px;
  vertical-align: top !important;
  font-weight: bold;
}

.modal-title {
  color: var(--text-color);
}

.close {
  color: var(--text-color) !important;
  text-shadow: 0 1px 0 #000 !important;
  opacity: 0.5 !important;
  border: 1px solid var(--border-color) !important;
  padding: 3px 7px 3px 7px !important;
}

.close:hover {
  opacity: 1 !important;
}

.modal-content {
  width: inherit;
  max-width: inherit;
  height: inherit;
  margin: 0 auto;
  pointer-events: all;
}

/* Bootstrap's own stock CSS (vendor file, not this one) hardcodes .modal-content/.modal-body/
   .modal-footer to a white background with light-gray borders -- the expand panel and the old
   Manage-page edit modal both reuse these classes, so without this override their borders/bg stay
   stuck light regardless of dark-skin. */
body.dark-skin .modal-content,
body.dark-skin .modal-body,
body.dark-skin .modal-footer {
  background-color: var(--surface);
  color: var(--expand-value-color);
  border-color: var(--border-color);
}

/*****************************
 * Helper Classes
 ****************************/

.vertical-alignment-helper {
  display: table;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.vertical-align-center {
  display: table-cell;
  vertical-align: middle;
  pointer-events: none;
}

/*****************************
 * Expand/Detail Table Styling (Responsive)
 ****************************/

/* --- 1. UNIVERSAL STYLING (Applies to all screens) --- */
.cr-expand-table {
  box-sizing: border-box !important;
  width: 100%;
  border-collapse: collapse;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  background-color: var(--surface);
  border-radius: 8px;
  overflow: hidden;
}

.cr-expand-table th, .cr-expand-table td {
  box-sizing: border-box !important;
  padding: 10px;
  vertical-align: middle;
  word-wrap: break-word;
  border: none !important; /* bootstrap.css's ".table > tbody > tr > td" is more specific than this selector and would otherwise win the border-top fight with its own hardcoded #ddd, regardless of source order */
  border-bottom: 1px solid var(--darker-border) !important; /* must also be !important -- the shorthand reset above already set border-bottom-* as !important, so a plain declaration here would lose to it */
}

/* Zebra Striping & Last Row Fix */
.cr-expand-table tr:nth-child(even) { background: var(--zebra-bg); }
.cr-expand-table tr:nth-child(odd) { background: var(--surface); }
.cr-expand-table tr:last-child { border-bottom: none; }

/* editable Watchlist Info fields in the quick-view panel -- read as plain table text at rest
   (matches .cr-expand-table td's own font/color), only look like an input on hover/focus */
.cr-expand-table td .cr-expand-field-group { display: block; width: 100%; }
.cr-expand-table td .cr-expand-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: var(--expand-value-color);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  margin: -3px -5px; /* offsets the padding below so text sits flush with plain <td> text at rest */
  padding: 3px 5px;
  cursor: text;
  transition: background-color .12s ease, border-color .12s ease;
}
.cr-expand-table td select.cr-expand-field { cursor: pointer; }
.cr-expand-table td textarea.cr-expand-field { resize: vertical; min-height: 44px; }
.cr-expand-table td .cr-expand-field:hover { border-color: var(--border-color); }
.cr-expand-table td .cr-expand-field:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--accent-color);
}
.cr-expand-field-saving { opacity: 0.6; }
.cr-expand-field-saved  { background-color: var(--surface); border-color: #2e8b57 !important; }
.cr-expand-field-error  { background-color: var(--surface); border-color: #d03b3b !important; } /* same red already used for cr-foc-critical */
.cr-expand-status-tag { display: inline-block; margin-bottom: 4px; }

/* flat, not rounded -- with two of these in the panel now, rounding only the top corners looked broken for the second one sitting mid-panel */
.expand-separator {
  background-color: var(--accent-color);
  color: var(--text-color);
  text-align: center;
  font-weight: 500;
}

#expand-watchlist { text-align: center;}


/* --- 2. MOBILE: Stacked Layout (Phones up to 480px) --- */
@media screen and (max-width: 580px) {
  .cr-expand-table th, .cr-expand-table td {
    display: block !important; 
    width: 100% !important; 
    text-align: left !important; 
  }

  /* Cover Image Mobile Overrides */
  #expand-cover-cell {
    box-sizing: border-box !important;
    border-right: none !important;
    border-bottom: 1px solid var(--darker-border) !important;
    text-align: center !important;
    padding: 20px 10px !important;
  }
  #expand-cover-image {
    max-width: 250px !important; 
    margin: 0 auto;
  }

  /* Label: Stacks on top */
  .cr-expand-table th {
    color: var(--expand-label-color);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 2px !important;
    border-bottom: none !important;
  }

  /* Value: Stacks below label */
  .cr-expand-table td {
    color: var(--expand-value-color);
    font-weight: 500;
    padding-top: 0 !important;
  }
}


/* --- 3. DESKTOP/TABLET: Image + Grid (Screens 580px and wider) --- */
@media screen and (min-width: 580px) {

  .cr-expand-flex-wrap {
    display: flex;
    align-items: flex-start; 
    border-bottom: 1px solid var(--darker-border);
  }

  #expand-cover-cell {
    box-sizing: border-box !important;
    width: 288px;
    flex-shrink: 0;
    text-align: center;
    background: var(--surface);
    /* Removed top padding to keep image flush */
    padding: 0 15px 15px 15px;
  }

  .cr-expand-data-pane {
    flex-grow: 1;
    /* border-left removed */
  }

  .cr-expand-table {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 0;
  }

  /* Universal Label Styling */
  .cr-expand-table th {
    color: var(--expand-label-color);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 20px !important;
  }

  /* TOP TABLE: 30% width compensates for the 288px image column */
  .cr-expand-top-table th {
    width: 120px;
  }

  /* BOTTOM TABLE: 15% keeps the labels tight and aligned with the top ones */
  .cr-expand-table:not(.cr-expand-top-table) th {
    width: 110px;
  }

  #expand-cover-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }

  .cr-expand-table td {
    color: var(--expand-value-color);
    font-weight: 500;
  }
}


/*****************************
 * Alert Styling 
 ****************************/

.alert {
  margin-bottom: 0px !important;
}

/*****************************
 * Hide Elements 
 ****************************/

.hidden {
  display: none;
}

/*****************************
 * Widget CSS
 ****************************/

.top10, .community {
  padding: 0px 10px 10px 10px;
  margin: 10px auto;
  box-shadow: none;
}

.top10 ul, .community ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top10 li, .community li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--accent-color);
  font-size: 14px;
}

.top10 li:last-child, .community li:last-child {
  border-bottom: none;
}

.book-title, .community li a {
  font-weight: 500;
  /* color: #333; */
  color: var(--accent-color);
}

.watchlist-count {
  color: var(--text-muted);
  font-size: 14px;
}







/***********************************************************
 * MASTER STICKY FIX: HEADER + CHROME
 ***********************************************************/

/* Nuke "Sticky Killers" & Ghost Headers */
#page, .site, #cm-masthead, #cm-primary {
    overflow: visible !important;
}

#cm-primary-nav { z-index: 1001 !important; }



/***********************************************************
 * MOBILE HEADER: FIXED PADDING WITH EXPANDING LOGO & TEXT
 ***********************************************************/
@media screen and (max-width: 767px) {
    
    /* 1. Use a tight, fixed padding so it doesn't waste space on the edges */
    .cm-header-col-1 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    /* 2. Scale the logo aggressively up to a larger maximum size */
    #cm-site-branding {
        display: block !important;
        flex-shrink: 0 !important;
        margin-right: 12px !important;
    }

    #cm-site-branding img,
    .cm-custom-logo,
    .site-logo-link img {
        /* Larger minimum and higher fluid weight so it expands into the space */
        width: clamp(65px, 22vw, 130px) !important; 
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 3. Text container stretches to gobble up all leftover dead space */
    #cm-site-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: left !important;
        padding-left: 0 !important;
        margin: 0 !important;
        flex-grow: 1 !important; /* Forces the box to claim the remaining width */
    }

    /* 4. Boosted fluid typography to fill out the text block */
    .cm-site-title, 
    .cm-site-title a {
        /* Starts slightly larger and scales up faster to fill the line width */
        font-size: clamp(18px, 6vw, 28px) !important; 
        line-height: 1.1 !important;
        margin: 0 0 4px 0 !important;
        white-space: nowrap !important; 
    }

    .cm-site-description {
        /* Scales smoothly to keep pace with the larger title text */
        font-size: clamp(10px, 3.2vw, 15px) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: normal !important;
    }
    
    /* 5. Keep the outer masthead frame snug */
    #cm-masthead,
    .main-header-bar {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

@media screen and (max-width: 782px) {
  html { margin-top: 0px !important; }
}

/*****************************
 * Compact page-intro text (apply via block editor's Additional CSS Class field --
 * inline style="" attrs get stripped from post content on save for most roles)
 ****************************/
.cr-page-intro-title {
  font-size: 13px !important;
  font-weight: bold !important;
  color: var(--text-muted-strong) !important;
  margin: 0 0 2px !important;
}
.cr-page-intro-body {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin: 0 0 4px !important;
  line-height: 1.4 !important;
}
.cr-page-intro-filters {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  font-style: italic !important;
}