/*********************************************************************************************

Broadsheet Color Style — the original Tribune 1.0 design (2009), rebuilt for today.

Palette:    white page, charcoal ink for the heavy rules, nav and footer, a cream frame around
            the feature photo, gray letterspaced section labels and one bright newspaper red.
            body.mode-dark (header switch / "Default Color Scheme" option) inverts the palette;
            every color below is a token so both schemes stay in sync.
Typography: 'Barlow Condensed' for the masthead, headlines, navigation and every label —
            the condensed grotesque of the 1.0 mockups — over 'PT Serif' for body copy, decks
            and lists. Both load through the framework's shared Google Fonts request — see
            tribune_google_fonts_depending_by_style() in functions/functions.php — so fonts
            picked in Customizer > Typography still win.
Layout:     the homepage is a single column of horizontal bands, as in 1.0: a full-width
            "latest feature" (headline over a wide photo over a two-column deck), then the
            featured widgets, the category bands and the recent posts as three columns divided
            by vertical hairlines. The Sidebar widget area renders as the last band. Posts,
            pages and archives keep the right sidebar.

Loaded after style.css and css/media-queries.css (WPZOOM::theme_styles, priority 20), so
equal-specificity rules here win. Rules prefixed with .theme-style-broadsheet (body class)
are there only where extra specificity is needed to out-rank a stock rule.

*********************************************************************************************

0.  Color Scheme Tokens
1.  Global
2.  Canvas
3.  Header & Masthead
4.  Navigation
5.  News Ticker
6.  Featured Area (latest feature)
7.  Homepage Bands
8.  Featured Categories
9.  Section Titles
10. Archive Posts
11. Single Posts
12. Comments
13. Sidebar & Widgets
14. Pagination
15. Footer
16. Color Scheme Toggle
17. Responsive
18. Block Styles
19. Social Icons Widget

*********************************************************************************************/


/* 0. Color Scheme Tokens
============================================================================================*/

body.theme-style-broadsheet {
    --tb-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
    --tb-sans: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;

    --tb-bg: #fff;
    --tb-surface: #f4f4f2;
    --tb-cream: #f6f1dc;
    --tb-cream-edge: #e9e2c4;
    --tb-ink: #2b3136;
    --tb-fg: #1a1d20;
    --tb-fg-inverse: #fff;
    --tb-text: #33383c;
    --tb-muted: #6c7278;
    --tb-faint: #9ba1a6;
    --tb-hairline-soft: rgba(0, 0, 0, 0.07);
    --tb-hairline: rgba(0, 0, 0, 0.13);
    --tb-hairline-mid: rgba(0, 0, 0, 0.24);
    --tb-hairline-strong: rgba(0, 0, 0, 0.45);
    --tb-accent: #d5232b;
    --tb-accent-hover: #a3171d;
    --tb-accent-soft: rgba(213, 35, 43, 0.1);
    --tb-nav-glass: rgba(255, 255, 255, 0.95);
    --tb-footer-bg: #2b3136;
    --tb-footer-text: #aeb5bb;
    --tb-footer-link: #e3e7ea;
    --tb-footer-rule: rgba(255, 255, 255, 0.12);
}

body.theme-style-broadsheet.mode-dark {
    --tb-bg: #141719;
    --tb-surface: #1d2124;
    --tb-cream: #26241c;
    --tb-cream-edge: #35321f;
    --tb-ink: #e6e8ea;
    --tb-fg: #f4f4f2;
    --tb-fg-inverse: #141719;
    --tb-text: #c9cdd0;
    --tb-muted: #8d9398;
    --tb-faint: #6a7176;
    --tb-hairline-soft: rgba(255, 255, 255, 0.08);
    --tb-hairline: rgba(255, 255, 255, 0.15);
    --tb-hairline-mid: rgba(255, 255, 255, 0.26);
    --tb-hairline-strong: rgba(255, 255, 255, 0.48);
    --tb-accent: #ff5257;
    --tb-accent-hover: #ff8a8e;
    --tb-accent-soft: rgba(255, 82, 87, 0.16);
    --tb-nav-glass: rgba(20, 23, 25, 0.94);
    --tb-footer-bg: #0d0f11;
    --tb-footer-text: #8d9398;
    --tb-footer-link: #cfd4d8;
    --tb-footer-rule: rgba(255, 255, 255, 0.1);
}


/* 1. Global
============================================================================================*/

body {
    background: var(--tb-bg);
    color: var(--tb-text);
    font-family: var(--tb-serif);
    font-size: 16px;
    line-height: 1.7;
}

::selection {
    background: var(--tb-ink);
    color: var(--tb-fg-inverse);
}

a {
    color: var(--tb-fg);
}

a:hover {
    color: var(--tb-accent);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--tb-fg);
    font-family: var(--tb-sans);
    font-weight: 700;
    letter-spacing: -0.01em;
}

hr,
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    border: 0;
    border-top: 1px solid var(--tb-hairline);
}

/* Small uppercase label — kickers, meta, nav, section headings */
.cat-links a,
.entry-meta,
.featured-meta,
.post-meta,
.readmore_button,
.navbar-nav,
.mm-listview a,
.widget h3.title,
.section-title,
div.navigation {
    font-family: var(--tb-sans);
}

.cat-links a {
    color: var(--tb-accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cat-links a:hover {
    color: var(--tb-fg);
}

.entry-meta,
.featured-meta,
.post-meta {
    color: var(--tb-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.entry-meta a,
.featured-meta a,
.post-meta a {
    color: var(--tb-fg);
    font-weight: 600;
}

.entry-meta a:hover,
.featured-meta a:hover,
.post-meta a:hover {
    color: var(--tb-accent);
}

.entry-meta span + span:before {
    color: var(--tb-faint);
    opacity: 1;
}

.separator,
.post-meta .separator {
    color: var(--tb-faint);
}

/* --- Forms --- */

label {
    color: var(--tb-fg);
    font-family: var(--tb-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.theme-style-broadsheet input[type="text"],
body.theme-style-broadsheet input[type="email"],
body.theme-style-broadsheet input[type="url"],
body.theme-style-broadsheet input[type="tel"],
body.theme-style-broadsheet input[type="number"],
body.theme-style-broadsheet input[type="password"],
body.theme-style-broadsheet input[type="search"],
body.theme-style-broadsheet input[type="date"],
body.theme-style-broadsheet textarea,
body.theme-style-broadsheet select {
    background: var(--tb-bg);
    border: 1px solid var(--tb-hairline-mid);
    border-radius: 0;
    color: var(--tb-fg);
    font-family: var(--tb-serif);
    font-size: 15px;
}

body.theme-style-broadsheet input[type="text"],
body.theme-style-broadsheet input[type="email"],
body.theme-style-broadsheet input[type="url"],
body.theme-style-broadsheet input[type="tel"],
body.theme-style-broadsheet input[type="number"],
body.theme-style-broadsheet input[type="password"],
body.theme-style-broadsheet input[type="search"],
body.theme-style-broadsheet input[type="date"],
body.theme-style-broadsheet select {
    height: 44px;
    padding: 0 14px;
    vertical-align: middle;
}

body.theme-style-broadsheet textarea {
    padding: 12px 14px;
}

body.theme-style-broadsheet input:focus,
body.theme-style-broadsheet textarea:focus,
body.theme-style-broadsheet select:focus {
    border-color: var(--tb-ink);
    box-shadow: none;
    outline: none;
}

body.theme-style-broadsheet select option {
    background: var(--tb-bg);
    color: var(--tb-fg);
}

body.theme-style-broadsheet ::placeholder {
    color: var(--tb-faint);
    font-style: italic;
    opacity: 1;
}

/* Solid charcoal button, turns red on hover */
button,
input[type=button],
input[type=reset],
input[type=submit],
.wp-block-search__button {
    background: var(--tb-ink);
    border: 1px solid var(--tb-ink);
    border-radius: 0;
    color: var(--tb-fg-inverse);
    font-family: var(--tb-sans);
    font-size: 15px;
    font-weight: 600;
    height: 44px;
    letter-spacing: 0.12em;
    padding: 0 26px;
    text-transform: uppercase;
    vertical-align: middle;
}

button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover,
.wp-block-search__button:hover {
    background: var(--tb-accent);
    border-color: var(--tb-accent);
    color: #fff;
}

/* "Read more >" — the red text link of the 1.0 mockups */
.readmore_button {
    margin: 12px 0 0;
}

.readmore_button a,
.more-link,
.more_link {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--tb-accent);
    font-family: var(--tb-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    padding: 0;
    text-transform: uppercase;
}

.readmore_button a:after {
    display: none;
}

.readmore_button a:hover,
.more-link:hover,
.more_link:hover {
    background: transparent;
    border-color: transparent;
    color: var(--tb-fg);
}

.infinite-scroll #infinite-handle span {
    background: var(--tb-ink);
    border-radius: 0;
    color: var(--tb-fg-inverse);
    font-family: var(--tb-sans);
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.infinite-scroll #infinite-handle span:hover {
    background: var(--tb-accent);
}

/* --- Tables, code --- */

table th {
    background: transparent;
    border-bottom: 2px solid var(--tb-ink);
    color: var(--tb-fg);
    font-family: var(--tb-sans);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

table td,
table tr {
    border-color: var(--tb-hairline-soft);
}

code {
    background: var(--tb-surface);
    border-radius: 0;
    color: var(--tb-accent);
}

pre {
    background: var(--tb-surface);
    border: 1px solid var(--tb-hairline);
    border-radius: 0;
    color: var(--tb-text);
}


/* 2. Canvas — no boxed page; the charcoal footer is the only block of color
============================================================================================*/

.page-wrap {
    background: transparent;
    border-left: 0;
    border-right: 0;
}


/* 3. Header & Masthead
============================================================================================*/

#header #header-inner {
    padding: 36px 0 30px;
}

.navbar-brand h1 {
    font-family: var(--tb-sans);
    font-size: 84px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-transform: uppercase;
}

.navbar-brand a {
    color: var(--tb-fg);
}

.navbar-brand a:hover {
    color: var(--tb-fg);
}

/* The red dot of the 1.0 logo */
.navbar-brand h1 a:after {
    background: var(--tb-accent);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 0.16em;
    margin: 0 0 0 0.08em;
    vertical-align: 0.06em;
    width: 0.16em;
}

.navbar-brand .tagline {
    color: var(--tb-muted);
    font-family: var(--tb-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.18em;
    margin-top: 10px;
    text-transform: uppercase;
}

.navbar-brand .header_date {
    color: var(--tb-faint);
    font-family: var(--tb-serif);
    font-size: 13px;
    font-style: italic;
    margin-top: 6px;
}

#head_banner {
    margin-top: 6px;
}


/* 4. Navigation
============================================================================================*/

.top-navbar {
    border-bottom: 1px solid var(--tb-hairline);
    padding: 8px 0;
}

.top-navbar .navbar-nav a,
.top-navbar a {
    color: var(--tb-muted);
    font-family: var(--tb-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.top-navbar .navbar-nav a:hover,
.top-navbar a:hover {
    color: var(--tb-fg);
}

/* Main bar: white, under a heavy charcoal rule — the thick line that runs beneath
   the 1.0 masthead */
.main-navbar {
    background: var(--tb-bg);
    border-top: 3px solid var(--tb-ink);
    border-bottom: 1px solid var(--tb-hairline);
    margin-bottom: 40px;
    padding: 0;
}

.navbar-nav {
    font-family: var(--tb-sans);
}

.main-navbar .sf-menu > li {
    padding: 0;
}

.main-navbar .navbar-nav a {
    color: var(--tb-fg);
    font-family: var(--tb-sans);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 14px 16px;
    text-transform: uppercase;
}

.main-navbar .navbar-nav a:hover {
    color: var(--tb-accent);
}

.main-navbar .current-menu-item > a,
.main-navbar .current_page_item > a,
.main-navbar .current-menu-parent > a,
.main-navbar .current_page_parent > a {
    border-bottom: 0;
    box-shadow: inset 0 -3px 0 var(--tb-accent);
    color: var(--tb-fg);
}

.navbar-nav .current-menu-item > a,
.navbar-nav .current_page_item > a,
.navbar-nav .current-menu-parent > a {
    color: var(--tb-fg);
}

/* Dropdowns */
.navbar-nav ul {
    background: var(--tb-bg);
    border: 1px solid var(--tb-hairline);
    border-top: 3px solid var(--tb-ink);
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    margin-top: 0;
    padding: 6px 0;
    text-align: left;
}

.navbar-nav > li > ul:before,
.navbar-nav > li > ul:after {
    display: none;
}

.navbar-nav ul a,
.main-navbar .navbar-nav ul a {
    box-shadow: none;
    color: var(--tb-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 8px 18px;
    text-transform: none;
}

.navbar-nav ul a:hover,
.main-navbar .navbar-nav ul a:hover {
    background: transparent;
    box-shadow: none;
    color: var(--tb-accent);
}

.top-navbar .navbar-nav a,
.main-navbar .navbar-nav a,
.navbar-nav ul a {
    align-items: center;
    display: flex;
}

.navbar-nav ul a {
    justify-content: space-between;
}

.sf-arrows .sf-with-ul:after,
.main-navbar .sf-arrows .sf-with-ul:after,
.sf-arrows ul .sf-with-ul:after,
.main-navbar .sf-arrows ul .sf-with-ul:after {
    color: var(--tb-muted);
    margin: 0 0 0 4px;
    opacity: 1;
}

/* Mobile toggle */
.navbar-toggle {
    margin: 12px 0;
}

.navbar-toggle .icon-bar,
.top-navbar .navbar-toggle .icon-bar {
    background: var(--tb-fg);
    border-radius: 0;
    height: 2px;
    width: 26px;
}

.navbar-toggle:hover .icon-bar,
.top-navbar .navbar-toggle:hover .icon-bar {
    background: var(--tb-accent);
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 6px;
}

.navbar-toggle .toggle-text {
    color: var(--tb-fg);
    font-family: var(--tb-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

/* Off-canvas menu */
.mm-menu.mm-theme-dark {
    background: var(--tb-ink);
    color: rgba(255, 255, 255, 0.85);
}

body.mode-dark .mm-menu.mm-theme-dark {
    background: var(--tb-surface);
    color: var(--tb-text);
}

.mm-listview a {
    font-family: var(--tb-sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Search box in the main bar */
.sb-search .sb-icon-search {
    color: var(--tb-fg);
    border-radius: 0;
}

.sb-search .sb-icon-search:hover,
.sb-search.sb-search-open .sb-icon-search {
    background: transparent;
    color: var(--tb-accent);
}

body.theme-style-broadsheet .sb-search .sb-search-input {
    background: var(--tb-bg);
    border: 1px solid var(--tb-hairline-mid);
    border-radius: 0;
    color: var(--tb-fg);
    font-family: var(--tb-serif);
    height: 40px;
    padding: 0 55px 0 15px;
}

.sb-search .sb-search-submit {
    background: transparent;
    border: 0;
    color: var(--tb-fg);
    height: 40px;
    padding: 0;
}

/* Fixed main navbar on scroll (.tb-nav-fixed, see functions/functions.php) */
.tb-nav-fixed .main-navbar {
    background: var(--tb-nav-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top-width: 3px;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35);
    padding: 0 30px;
}


/* 5. News Ticker — a red "Breaking News" flag, then the headlines
============================================================================================*/

#news-ticker {
    align-items: stretch;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tb-hairline);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    margin: 0 0 40px;
    padding: 0;
}

#news-ticker .news-ticker-label {
    align-items: center;
    background: var(--tb-accent);
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-family: var(--tb-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 18px 0 0;
    padding: 0 16px;
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
}

/* the flag's pointed end */
#news-ticker .news-ticker-label:after {
    border-bottom: 21px solid transparent;
    border-left: 9px solid var(--tb-accent);
    border-top: 21px solid transparent;
    content: "";
    left: 100%;
    position: absolute;
    top: 0;
}

#news-ticker .news-ticker-container {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0;
}

#news-ticker dt {
    background: transparent;
    border-radius: 0;
    color: var(--tb-faint);
    font-family: var(--tb-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin: 0 12px 0 0;
    padding: 0;
}

#news-ticker dd {
    margin-right: 44px;
}

#news-ticker dd a {
    color: var(--tb-fg);
    font-family: var(--tb-serif);
    font-size: 15px;
    font-weight: 700;
}

#news-ticker dd a:hover {
    color: var(--tb-accent);
}


/* 6. Featured Area — the "latest feature": kicker, wide headline, framed photo, deck
============================================================================================*/

#featured {
    margin: 0 0 40px;
}

.theme-style-broadsheet #slider {
    border: 0;
    float: none;
    margin: 0 0 40px;
    padding: 0;
    width: 100%;
}

/* Reorder the stock slide (photo, then content) into headline → photo → deck.
   FlexSlider writes display:block inline on each slide, hence !important; scoped to
   .flex-viewport so the pre-init "first slide only" rule in style.css still applies. */
.theme-style-broadsheet #slider .flex-viewport .slides li {
    display: flex !important;
    flex-direction: column;
}

#slider #slidemain .slide_content {
    display: contents;
    text-align: left;
}

#slider #slidemain .slide_content .cat-links {
    order: 1;
}

#slider #slidemain .slide_content h2 {
    order: 2;
}

#slider #slidemain .slide_content .featured-meta {
    order: 3;
}

#slider #slidemain .post-thumb,
#slider #slidemain .video_cover {
    margin: 0 0 28px;
    order: 4;
    text-align: left;
}

#slider #slidemain .slide_content p {
    order: 5;
}

#slider #slidemain .slides li .clear {
    order: 6;
}

#slider #slidemain .slide_content .cat-links {
    display: block;
    margin: 0 0 6px;
}

#slider #slidemain .slide_content .cat-links a {
    color: var(--tb-muted);
    font-size: 14px;
    letter-spacing: 0.16em;
}

#slider #slidemain .slide_content .cat-links a:hover {
    color: var(--tb-accent);
}

#slider #slidemain .slide_content h2 {
    font-family: var(--tb-sans);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 14px;
}

#slider #slidemain .slide_content h2 a {
    color: var(--tb-fg);
}

#slider #slidemain .slide_content h2 a:hover {
    color: var(--tb-accent);
}

.featured-meta {
    margin: 0 0 22px;
}

#slider .entry-date,
.post-meta .entry-date {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--tb-muted);
    font-family: var(--tb-sans);
    font-size: 13px;
    letter-spacing: 0.08em;
    margin: 0 14px 0 0;
    padding: 0;
    text-transform: uppercase;
}

/* The photo sits in a cream mat, as in the 1.0 mockup */
#slider #slidemain .post-thumb a {
    background: var(--tb-cream);
    border: 1px solid var(--tb-cream-edge);
    display: block;
    padding: 8px;
}

#slider #slidemain .post-thumb img {
    aspect-ratio: 1240 / 520;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

#slider #slidemain .video_cover {
    background: var(--tb-cream);
    border: 1px solid var(--tb-cream-edge);
    padding: 8px;
}

/* The deck runs in two columns with a hairline between them */
#slider #slidemain .slide_content p {
    color: var(--tb-text);
    column-count: 2;
    column-gap: 48px;
    column-rule: 1px solid var(--tb-hairline);
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
}

/* Controls: dashes on the left, charcoal arrow buttons on the right */
.flex-control-nav {
    background: transparent;
    border-radius: 0;
    height: 36px;
    line-height: 36px;
    margin: 26px 0 0;
    padding: 0;
    text-align: left;
}

.flex-control-nav li {
    margin: 0 8px 0 0;
    vertical-align: middle;
}

.flex-control-paging li a {
    background: var(--tb-hairline-strong);
    border-radius: 0;
    height: 3px;
    opacity: 0.35;
    width: 28px;
}

.flex-control-paging li a:hover {
    opacity: 0.7;
}

.flex-control-paging li a.flex-active {
    background: var(--tb-accent);
    opacity: 1;
}

#slider .flex-direction-nav li a {
    border-color: var(--tb-hairline-mid);
    border-radius: 0;
    color: var(--tb-fg);
}

#slider .flex-direction-nav li a:hover {
    background: var(--tb-ink);
    border-color: var(--tb-ink);
    color: var(--tb-fg-inverse);
}

#slider .notice {
    border: 1px solid var(--tb-hairline);
    color: var(--tb-text);
    padding: 24px;
}

#home_ad {
    margin: 0 0 40px;
}


/* 7. Homepage Bands
   #main spans the page on the homepage and the featured widgets, the recent posts and the
   Sidebar widget area render as three-column bands divided by vertical hairlines.
============================================================================================*/

.theme-style-broadsheet.home #main {
    float: none;
    width: 100%;
}

.theme-style-broadsheet .featured-widgets {
    border-top: 1px solid var(--tb-hairline);
    display: grid;
    float: none;
    gap: 0 40px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 28px 0 0;
    width: 100%;
}

/* A single list widget in the band lays its items out as the three columns instead */
.theme-style-broadsheet .featured-widgets .widget:only-child > ul.feature-posts-list,
.theme-style-broadsheet .featured-widgets .widget:only-child > ol.popular-posts {
    display: grid;
    gap: 0 40px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-style-broadsheet .featured-widgets .widget:only-child > ul.feature-posts-list li {
    min-width: 0;
}

/* functions/sidebar.php closes every widget with a <div class="clear"> — in a grid that
   spacer would take a column of its own, so it is dropped and siblings are matched with ~ */
.theme-style-broadsheet .featured-widgets > .clear,
.theme-style-broadsheet.home #sidebar > .clear {
    display: none;
}

.theme-style-broadsheet .featured-widgets .widget {
    margin: 0 0 30px;
    min-width: 0;
}

.theme-style-broadsheet .featured-widgets .widget ~ .widget {
    border-left: 1px solid var(--tb-hairline);
    padding-left: 40px;
}

/* The Sidebar widget area becomes the closing band of the homepage */
/* Three equal columns in widget order. The vertical rules are two 1px background lines on
   the band itself, centered in the 40px gaps, so they run the full height whatever the
   widgets contain and no per-widget selector is needed. */
.theme-style-broadsheet.home #sidebar {
    background-image: linear-gradient(var(--tb-hairline), var(--tb-hairline)), linear-gradient(var(--tb-hairline), var(--tb-hairline));
    background-position: calc((100% - 80px) / 3 + 20px) 30px, calc((100% - 80px) / 3 * 2 + 60px) 30px;
    background-repeat: no-repeat;
    background-size: 1px calc(100% - 30px);
    border-top: 3px solid var(--tb-ink);
    display: grid;
    float: none;
    gap: 0 40px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 10px 0 20px;
    max-width: none;
    padding: 30px 0 0;
    width: 100%;
}

.theme-style-broadsheet.home #sidebar .widget {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0 0 36px;
    min-width: 0;
    padding: 0;
}

/* The band already opens with the heavy rule; the first widget must not repeat it */
.theme-style-broadsheet.home #sidebar .widget:first-child,
.theme-style-broadsheet.home #sidebar .widget.tabbertabs:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Recent posts on the homepage: three columns of photo-led stories */
.theme-style-broadsheet.home .recent-posts {
    display: grid;
    gap: 0 40px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-style-broadsheet.home .recent-posts .post,
.theme-style-broadsheet.home .recent-posts .type-page {
    border-bottom: 0;
    margin: 0 0 40px;
    min-width: 0;
    padding: 0;
}

.theme-style-broadsheet.home .recent-posts .post-thumb {
    float: none;
    margin: 0 0 16px;
    max-width: none;
}

.theme-style-broadsheet.home .recent-posts .post-thumb img {
    aspect-ratio: 3 / 2;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.theme-style-broadsheet.home .recent-posts .entry-title {
    font-size: 26px;
}

.theme-style-broadsheet.home .recent-posts .entry-content {
    font-size: 15px;
}


/* 8. Featured Categories (homepage widgets)
============================================================================================*/

#main .homecat {
    margin-bottom: 30px;
}

.theme-style-broadsheet #main .homepage-widgets h4 {
    background: transparent;
    border-bottom: 1px solid var(--tb-hairline);
    font-family: var(--tb-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    margin-bottom: 26px;
    padding: 0 0 10px;
}

.theme-style-broadsheet #main .homepage-widgets h4 a,
.theme-style-broadsheet #main .homepage-widgets .red h4 a,
.theme-style-broadsheet #main .homepage-widgets .green h4 a,
.theme-style-broadsheet #main .homepage-widgets .black h4 a {
    background: transparent;
    color: var(--tb-muted);
    padding: 0;
}

.theme-style-broadsheet #main .homepage-widgets h4 a:hover {
    color: var(--tb-accent);
    opacity: 1;
}

.theme-style-broadsheet #main .homepage-widgets .homecat ul.featured-stories {
    display: grid;
    gap: 0 40px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 10px;
}

.theme-style-broadsheet #main .homepage-widgets .homecat ul.featured-stories li {
    display: block;
    font-size: 15px;
    margin: 0 0 30px;
    min-width: 0;
    width: auto;
}

.theme-style-broadsheet #main .homepage-widgets .homecat ul.featured-stories li + li {
    border-left: 1px solid var(--tb-hairline);
    padding-left: 40px;
}

#main .homepage-widgets .homecat ul li h3 {
    font-family: var(--tb-sans);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 0 0 8px;
}

#main .homepage-widgets .homecat ul li h3 a {
    color: var(--tb-fg);
}

#main .homepage-widgets .homecat ul li h3 a:hover {
    color: var(--tb-accent);
}

#main .homepage-widgets .homecat ul.featured-stories li .featured-date {
    color: var(--tb-faint);
    font-family: var(--tb-sans);
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#main .homepage-widgets .homecat .post-thumb {
    margin: 0 0 16px;
}

#main .homepage-widgets .homecat .post-thumb img {
    aspect-ratio: 3 / 2;
    display: block;
    object-fit: cover;
    width: 100%;
}

#main .homepage-widgets .homecat .post-excerpt {
    color: var(--tb-text);
    font-size: 15px;
}

#main .homepage-widgets .homecat ul.stories {
    border-top: 1px solid var(--tb-hairline);
    padding: 6px 0 0;
}

#main .homepage-widgets .homecat ul.stories li {
    border-bottom: 1px solid var(--tb-hairline-soft);
    list-style-type: none;
    margin: 0;
    padding: 10px 0;
}

#main .homepage-widgets .homecat ul.stories li:last-child {
    border-bottom: 0;
}

#main .homepage-widgets .homecat ul.stories li a {
    color: var(--tb-fg);
    font-size: 15px;
    font-weight: 700;
}

#main .homepage-widgets .homecat ul.stories li a:hover {
    color: var(--tb-accent);
}


/* 9. Section Titles — gray letterspaced label with a rule
============================================================================================*/

.section-title {
    border-bottom: 1px solid var(--tb-hairline);
    color: var(--tb-muted);
    font-family: var(--tb-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.4;
    margin: 0 0 30px;
    padding: 0 0 10px;
    text-align: left;
    text-transform: uppercase;
}

.section-title strong {
    color: var(--tb-fg);
}

/* 404.php reuses .section-title for the page <h1> — keep that one a real headline */
.error404 .section-title {
    color: var(--tb-fg);
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
}

.category_description {
    color: var(--tb-muted);
    font-style: italic;
    margin: -12px 0 40px;
}


/* 10. Archive Posts
============================================================================================*/

.recent-posts .post,
.recent-posts .type-page {
    border-bottom: 1px solid var(--tb-hairline);
    margin: 0 0 36px;
    padding: 0 0 30px;
}

.recent-posts .post-thumb {
    margin: 0 30px 15px 0;
}

.recent-posts .post-thumb img {
    display: block;
}

.recent-posts .entry-title {
    font-family: var(--tb-sans);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 4px 0 10px;
}

.recent-posts .entry-title a {
    color: var(--tb-fg);
}

.recent-posts .entry-title a:hover {
    color: var(--tb-accent);
}

.recent-posts .entry-content {
    color: var(--tb-text);
    font-size: 16px;
    line-height: 1.65;
}

.recent-posts .cat-links {
    margin: 0 0 2px;
}

.entry-meta {
    margin-bottom: 12px;
}


/* 11. Single Posts
============================================================================================*/

.content-area .post-thumb {
    margin-bottom: 26px;
}

.content-area .post-thumb img {
    display: block;
}

.single .cat-links a {
    font-size: 14px;
}

h1.entry-title {
    color: var(--tb-fg);
    font-family: var(--tb-sans);
    font-size: 58px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 8px 0 16px;
}

.post-meta {
    border-bottom: 1px solid var(--tb-hairline);
    color: var(--tb-muted);
    margin: 0 0 30px;
    padding: 0 0 16px;
}

.single .entry-content,
.page .entry-content {
    font-size: 17px;
    line-height: 1.75;
}

.single .entry-content p,
.page .entry-content p {
    margin-bottom: 24px;
}

.single:not(.wpz-no-drop-cap) .entry-content > p:first-of-type:first-letter,
.entry-content p.has-drop-cap:not(:focus)::first-letter {
    color: var(--tb-fg);
    font-family: var(--tb-sans);
    font-size: 92px;
    font-weight: 700;
    line-height: 0.74;
    padding: 6px 12px 0 0;
    text-shadow: none;
}

.entry-content a:not(.wp-element-button):not(.wpz-sc-button) {
    color: var(--tb-fg);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--tb-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.entry-content a:not(.wp-element-button):not(.wpz-sc-button):hover {
    color: var(--tb-accent);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 36px 0 12px;
}

.entry-content h2 { font-size: 36px; }
.entry-content h3 { font-size: 30px; }
.entry-content h4 { font-size: 24px; }

.entry-content h6 {
    color: var(--tb-muted);
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Gray rule on the left, italic serif — the 1.0 pull quote */
.entry-content blockquote {
    border-left: 4px solid var(--tb-hairline-mid);
    color: var(--tb-muted);
    font-family: var(--tb-serif);
    font-size: 20px;
    font-style: italic;
    line-height: 1.55;
    margin: 30px 0;
    padding: 2px 0 2px 24px;
    text-align: left;
}

.entry-content blockquote:before,
.entry-content blockquote:after {
    display: none;
}

.entry-content ul li {
    list-style-type: disc;
}

.gallery-caption,
.wp-block-image figcaption,
.entry-content .wp-caption-text {
    color: var(--tb-muted);
    font-family: var(--tb-serif);
    font-size: 13px;
    font-style: italic;
    text-align: left;
}

body.theme-style-broadsheet .entry-content a.wp-element-button:not(.has-text-color):not([style*="color"]),
body.theme-style-broadsheet .entry-content a.wpz-sc-button:not(.has-text-color):not([style*="color"]) {
    background-color: var(--tb-ink);
    border-radius: 0;
    color: var(--tb-fg-inverse);
    font-family: var(--tb-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.theme-style-broadsheet .entry-content a.wp-element-button:not(.has-text-color):not([style*="color"]):hover,
body.theme-style-broadsheet .entry-content a.wpz-sc-button:not(.has-text-color):not([style*="color"]):hover {
    background-color: var(--tb-accent);
    color: #fff;
}

.tag_list {
    color: var(--tb-muted);
    font-family: var(--tb-sans);
    font-size: 14px;
    letter-spacing: 0.06em;
    margin: 30px 0;
    text-transform: uppercase;
}

.tag_list a {
    border: 1px solid var(--tb-hairline);
    color: var(--tb-fg);
    display: inline-block;
    margin: 0 4px 6px 0;
    padding: 3px 10px;
}

.tag_list a:hover {
    border-color: var(--tb-ink);
}

.post_author {
    background: var(--tb-cream);
    border: 1px solid var(--tb-cream-edge);
    border-radius: 0;
    padding: 26px 28px;
}

.post_author img {
    border-radius: 0;
}

.post_author span {
    color: var(--tb-fg);
    font-family: var(--tb-sans);
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.col_arch {
    border-bottom-color: var(--tb-hairline);
}

.col_arch h3 {
    color: var(--tb-muted);
    font-size: 15px;
    letter-spacing: 0.16em;
    margin: 0 0 12px;
    text-transform: uppercase;
}


/* 12. Comments — "Reader's comments" on a cream sheet, as in 1.0
============================================================================================*/

#comments {
    background: var(--tb-cream);
    border: 1px solid var(--tb-cream-edge);
    margin: 0 0 40px;
    padding: 28px 30px 10px;
}

#comments > h3,
#respond > h3 {
    border-bottom: 1px solid var(--tb-hairline);
    color: var(--tb-muted);
    font-family: var(--tb-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    padding-bottom: 12px;
    text-transform: uppercase;
}

#comments > h3 {
    margin-bottom: 24px;
}

#respond > h3 {
    margin-top: 20px;
}

.commentlist .comment {
    border-bottom: 1px solid var(--tb-hairline);
    font-size: 15px;
    margin-bottom: 26px;
    padding-bottom: 22px;
}

.comment .avatar {
    border-radius: 0;
}

.comment-author .fn,
.comment-author .fn a {
    color: var(--tb-fg);
    font-family: var(--tb-serif);
    font-size: 18px;
    font-weight: 700;
}

.comment-author .comment-meta,
.comment-author .comment-meta a {
    color: var(--tb-faint);
    font-family: var(--tb-serif);
    font-size: 13px;
    font-style: italic;
}

.comment-author .comment-meta a:hover {
    color: var(--tb-accent);
}

.comment-notes,
.nocomments {
    color: var(--tb-muted);
    font-size: 14px;
}

#respond {
    margin-bottom: 40px;
}

#respond label {
    font-size: 14px;
}

#respond .form_fields p .required_lab {
    color: var(--tb-accent);
}


/* 13. Sidebar & Widgets (posts, pages, archives)
============================================================================================*/

#sidebar .widget {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tb-hairline);
    border-radius: 0;
    margin: 0 0 32px;
    padding: 0 0 30px;
}

/* A heavy rule opens the column, matching the one under the masthead */
#sidebar .widget:first-child {
    border-top: 3px solid var(--tb-ink);
    padding-top: 24px;
}

#sidebar .widget:last-child {
    border-bottom: 0;
}

.widget h3.title {
    border-bottom: 0;
    color: var(--tb-muted);
    font-family: var(--tb-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    margin: 0 0 18px;
    padding: 0;
    text-transform: uppercase;
}

.widget .feature-posts-list li {
    border-bottom: 1px solid var(--tb-hairline-soft);
    margin: 0 0 14px;
    padding: 0 0 14px;
}

.widget .feature-posts-list li a {
    color: var(--tb-fg);
}

.widget .feature-posts-list li a:hover {
    color: var(--tb-accent);
}

.widget .feature-posts-list li h3 {
    font-family: var(--tb-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.widget .feature-posts-list .recent-date,
.widget .zoom-twitter-widget__item-timestamp {
    color: var(--tb-faint);
    font-family: var(--tb-sans);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.widget .feature-posts-list .post-excerpt {
    color: var(--tb-text);
}

ol.popular-posts li {
    border-bottom: 1px solid var(--tb-hairline-soft);
    color: var(--tb-faint);
    font-family: var(--tb-sans);
    font-size: 20px;
}

ol.popular-posts li span {
    color: var(--tb-faint);
    font-family: var(--tb-sans);
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

ol.popular-posts li a {
    color: var(--tb-fg);
    font-family: var(--tb-serif);
    font-size: 15px;
}

ol.popular-posts li a:hover {
    color: var(--tb-accent);
}

.widget ul li a {
    color: var(--tb-text);
}

.widget ul li a:hover {
    color: var(--tb-accent);
}

.widget_tag_cloud div a {
    border: 1px solid var(--tb-hairline);
    color: var(--tb-fg);
    display: inline-block;
    font-family: var(--tb-sans);
    margin: 0 4px 6px 0;
    padding: 3px 10px;
    text-transform: uppercase;
}

.widget_tag_cloud div a:hover {
    border-color: var(--tb-ink);
}

/* Widget tabs — the 1.0 strip: gray tabs, the active one lifted with a charcoal top rule */
#sidebar .widget.tabbertabs {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tb-hairline);
    border-radius: 0;
    padding: 0 0 20px;
}

#sidebar .widget.tabbertabs:first-child {
    border-top: 3px solid var(--tb-ink);
    padding-top: 24px;
}

#sidebar .widget.tabbertabs:last-child {
    border-bottom: 0;
}

.widget .tabbertab {
    padding: 20px 0 0;
}

.widget .tabbernav {
    background: transparent;
    border-bottom: 1px solid var(--tb-hairline);
    display: flex;
}

.widget .tabbernav li a {
    background: var(--tb-surface);
    border: 1px solid var(--tb-hairline);
    border-bottom: 0;
    border-radius: 0;
    color: var(--tb-muted);
    font-family: var(--tb-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0 4px 0 0;
    padding: 10px 14px;
    position: relative;
    text-transform: uppercase;
    top: 1px;
}

.widget .tabbernav li a:hover {
    background: var(--tb-surface);
    box-shadow: none;
    color: var(--tb-fg);
}

.widget .tabbernav .tabberactive a {
    background: var(--tb-bg);
    border-color: var(--tb-hairline);
    border-top: 3px solid var(--tb-ink);
    box-shadow: none;
    color: var(--tb-fg);
    padding-top: 8px;
}

/* Carousel widget */
.carousel-slider .item .entry-title {
    font-family: var(--tb-sans);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}

.carousel-slider .item .entry-title a {
    color: var(--tb-fg);
}

.carousel-slider .item .entry-title a:hover {
    color: var(--tb-accent);
}

.carousel-slider .item .entry-meta {
    font-style: normal;
}

.flickity-prev-next-button {
    background: var(--tb-bg);
    border: 1px solid var(--tb-hairline-mid);
    border-radius: 0;
}

.flickity-prev-next-button:hover {
    background: var(--tb-ink);
    border-color: var(--tb-ink);
}

.flickity-prev-next-button path {
    fill: var(--tb-fg);
}

.flickity-prev-next-button:hover path {
    fill: var(--tb-fg-inverse);
}

.flickity-page-dots .dot {
    background: var(--tb-hairline-strong);
    border-radius: 0;
    height: 3px;
    opacity: 0.35;
    width: 24px;
}

.flickity-page-dots .dot.is-selected {
    background: var(--tb-accent);
    opacity: 1;
}

#wp-calendar tbody td {
    background: transparent;
    border: 1px solid var(--tb-hairline-soft);
}

#wp-calendar tbody td:hover {
    background: var(--tb-surface);
}

#wp-calendar tbody {
    color: var(--tb-muted);
}

/* Video widget playlist */
.wpzoom_media .wpzoom-video-list li {
    border-bottom: 1px solid var(--tb-hairline-soft);
}

.wpzoom_media .wpzoom-video-list a {
    color: var(--tb-fg);
}

.wpzoom_media .wpzoom-video-list a:hover,
.wpzoom_media .wpzoom-video-list a.active .wpzoom-video-list__title {
    color: var(--tb-accent);
}

.wpzoom_media .wpzoom-video-list a.active .wpzoom-video-list__thumb {
    box-shadow: inset 0 0 0 2px var(--tb-accent);
}

.wpzoom-video-list__thumb {
    background: var(--tb-surface);
    border-radius: 0;
}

.wpzoom-video-list__title {
    font-family: var(--tb-serif);
    font-size: 15px;
}

.wpzoom-video-list__duration {
    font-family: var(--tb-sans);
}

.wpzoom_media .open .description {
    color: var(--tb-muted);
}


/* 14. Pagination
============================================================================================*/

div.navigation {
    border-top: 1px solid var(--tb-hairline);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 22px 0 0;
    text-transform: uppercase;
}

div.navigation a,
div.navigation span.current {
    border: 1px solid transparent;
    display: inline-block;
    line-height: 34px;
    margin: 0 2px;
    padding: 0 14px;
}

div.navigation a {
    color: var(--tb-muted);
}

div.navigation a:hover {
    border-color: var(--tb-hairline);
    color: var(--tb-fg);
}

div.navigation span.current {
    background: var(--tb-ink);
    border-color: var(--tb-ink);
    color: var(--tb-fg-inverse);
}

div.navigation .prev,
div.navigation .next {
    font-size: 15px;
}


/* 15. Footer — the charcoal block of 1.0: logo left, links right, small print below
============================================================================================*/

.footer-widgets {
    border-top: 1px solid var(--tb-hairline);
    padding-top: 40px;
}

.footer-widgets .widget {
    margin-bottom: 30px;
}

#footer {
    align-items: center;
    background: var(--tb-footer-bg);
    color: var(--tb-footer-text);
    display: grid;
    font-family: var(--tb-sans);
    grid-template-columns: auto 1fr;
    padding: 34px 40px 28px;
}

#footer a {
    color: var(--tb-footer-link);
}

#footer a:hover {
    color: #fff;
}

#footer .clear {
    grid-column: 1 / -1;
}

#footer .footer-logo {
    text-align: left;
}

#footer .footer-logo a {
    color: var(--tb-footer-link);
    font-family: var(--tb-sans);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    padding: 0;
    text-transform: uppercase;
}

#footer .footer-logo a:after {
    background: var(--tb-accent);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 0.16em;
    margin: 0 0 0 0.08em;
    vertical-align: 0.06em;
    width: 0.16em;
}

#footer .footer-logo a:hover {
    color: #fff;
}

#footer .footer-menu {
    font-size: 15px;
    letter-spacing: 0.1em;
    margin: 0;
    text-align: right;
    text-transform: uppercase;
}

#footer .footer-menu ul {
    margin: 0;
}

#footer .footer-menu ul li {
    padding: 0 0 0 22px;
}

#footer .footer-info {
    border-top: 1px solid var(--tb-footer-rule);
    color: var(--tb-footer-text);
    font-family: var(--tb-serif);
    font-size: 13px;
    grid-column: 1 / -1;
    margin: 24px 0 0;
    padding: 18px 0 0;
    text-align: left;
}


/* 16. Color Scheme Toggle
============================================================================================*/

#dark-mode-toggle {
    background: transparent;
    border: 1px solid var(--tb-hairline-mid);
    border-radius: 12px;
    cursor: pointer;
    float: right;
    height: 23px;
    margin: 4px 0 0 20px;
    padding: 0;
    position: relative;
    transition: border-color 0.2s ease;
    width: 42px;
}

#dark-mode-toggle:hover {
    background: transparent;
    border-color: var(--tb-fg);
}

#dark-mode-toggle::before {
    background-color: var(--tb-fg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 11px 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E");
    border-radius: 50%;
    content: "";
    height: 17px;
    left: 2px;
    position: absolute;
    top: 2px;
    transform: translateX(0);
    transition: transform 0.2s ease, background-color 0.2s ease;
    width: 17px;
}

body.mode-dark #dark-mode-toggle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141719' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z'/%3E%3C/svg%3E");
    transform: translateX(19px);
}

body.mode-dark #wp-calendar tbody td,
body.mode-dark .widget img,
body.mode-dark .post-thumb img {
    border-color: var(--tb-hairline-soft);
}

body.mode-dark .navbar-nav ul {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}


/* 17. Responsive
   Re-states the stock breakpoints that would otherwise out-rank the rules above.
============================================================================================*/

@media screen and (max-width: 1110px) {

    .theme-style-broadsheet #slider #slidemain .slide_content h2 {
        font-size: 52px;
    }
}

@media screen and (max-width: 980px) {

    .theme-style-broadsheet #header #header-inner {
        padding: 28px 0 24px;
    }

    .theme-style-broadsheet .navbar-brand h1 {
        font-size: 60px;
    }

    .theme-style-broadsheet #slider {
        border: 0;
        float: none;
        padding: 0;
        width: 100%;
    }

    .theme-style-broadsheet .featured-widgets {
        float: none;
        width: 100%;
    }

    .theme-style-broadsheet h1.entry-title {
        font-size: 44px;
    }

    .theme-style-broadsheet .main-navbar {
        margin-bottom: 30px;
        padding: 0;
    }

    .theme-style-broadsheet .featured-widgets,
    .theme-style-broadsheet.home .recent-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .theme-style-broadsheet.home #sidebar {
        background-position: calc((100% - 40px) / 2 + 20px) 30px, -10px 30px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px) {

    .theme-style-broadsheet #slider #slidemain .slide_content h2 {
        font-size: 40px;
    }

    .theme-style-broadsheet #slider #slidemain .slide_content p {
        column-count: 1;
        font-size: 16px;
    }

    .theme-style-broadsheet .recent-posts .entry-title {
        font-size: 26px;
    }

    .theme-style-broadsheet .recent-posts .post-thumb {
        margin-right: 20px;
    }

    .theme-style-broadsheet .single .entry-content,
    .theme-style-broadsheet .page .entry-content {
        font-size: 16px;
    }

    .theme-style-broadsheet #footer {
        display: block;
        padding: 30px 24px 24px;
    }

    .theme-style-broadsheet #footer .footer-logo,
    .theme-style-broadsheet #footer .footer-menu,
    .theme-style-broadsheet #footer .footer-info {
        text-align: center;
    }

    .theme-style-broadsheet #footer .footer-menu {
        margin-top: 12px;
    }

    .theme-style-broadsheet #footer .footer-menu ul li {
        padding: 0 10px;
    }

    .theme-style-broadsheet .featured-widgets,
    .theme-style-broadsheet.home .recent-posts {
        grid-template-columns: minmax(0, 1fr);
    }

    .theme-style-broadsheet.home #sidebar {
        background-image: none;
        grid-template-columns: minmax(0, 1fr);
    }

    .theme-style-broadsheet .featured-widgets .widget ~ .widget {
        border-left: 0;
        padding-left: 0;
    }

    .theme-style-broadsheet #comments {
        padding: 22px 20px 6px;
    }

    .theme-style-broadsheet #news-ticker .news-ticker-label {
        font-size: 12px;
        margin-right: 14px;
        padding: 0 10px;
    }
}

@media screen and (max-width: 640px) {

    .theme-style-broadsheet .navbar-brand h1 {
        font-size: 48px;
    }

    .theme-style-broadsheet h1.entry-title {
        font-size: 34px;
    }

    .theme-style-broadsheet #slider #slidemain .slide_content h2 {
        font-size: 32px;
    }

    .theme-style-broadsheet #main .homepage-widgets .homecat ul.featured-stories {
        display: block;
    }

    .theme-style-broadsheet #main .homepage-widgets .homecat ul.featured-stories li + li {
        border-left: 0;
        padding-left: 0;
    }

    .theme-style-broadsheet #main .homepage-widgets .homecat ul li h3 {
        font-size: 22px;
    }

    .theme-style-broadsheet #main .homepage-widgets .homecat .post-thumb {
        margin: 0 16px 0 0;
    }

    .theme-style-broadsheet .entry-content blockquote {
        font-size: 18px;
    }
}


/* 18. Block Styles (registered in tribune_register_block_styles())
============================================================================================*/

/* Categories / Tags as buttons */
body.theme-style-broadsheet .wp-block-post-terms.is-style-buttons a {
    background: transparent;
    border: 1px solid var(--tb-hairline);
    border-radius: 0;
    color: var(--tb-fg);
    font-family: var(--tb-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    text-decoration: none;
    text-transform: uppercase;
}

body.theme-style-broadsheet .wp-block-post-terms.is-style-buttons a:hover {
    background: var(--tb-ink);
    border-color: var(--tb-ink);
    color: var(--tb-fg-inverse);
}

/* Group as a surface — the cream sheet of the 1.0 polls box */
body.theme-style-broadsheet .wp-block-group.is-style-surface {
    background-color: var(--tb-cream);
    border: 1px solid var(--tb-cream-edge);
    border-radius: 0;
    box-shadow: none;
    padding: 32px 36px;
}

@media screen and (max-width: 640px) {

    body.theme-style-broadsheet .wp-block-group.is-style-surface {
        padding: 22px;
    }
}

/* Button as a link */
body.theme-style-broadsheet .wp-block-button.is-style-link a.wp-block-button__link.wp-element-button,
body.theme-style-broadsheet .entry-content .wp-block-button.is-style-link a.wp-block-button__link.wp-element-button {
    background-color: transparent;
    border-radius: 0;
    font-family: var(--tb-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
}

body.theme-style-broadsheet .wp-block-button.is-style-link a.wp-block-button__link.wp-element-button:not(.has-text-color):not([style*="color"]),
body.theme-style-broadsheet .entry-content .wp-block-button.is-style-link a.wp-block-button__link.wp-element-button:not(.has-text-color):not([style*="color"]) {
    color: var(--tb-accent);
}

body.theme-style-broadsheet .wp-block-button.is-style-link a.wp-block-button__link.wp-element-button:hover,
body.theme-style-broadsheet .entry-content .wp-block-button.is-style-link a.wp-block-button__link.wp-element-button:hover {
    background-color: transparent;
}

body.theme-style-broadsheet .wp-block-button.is-style-link a.wp-block-button__link.wp-element-button:not(.has-text-color):not([style*="color"]):hover,
body.theme-style-broadsheet .entry-content .wp-block-button.is-style-link a.wp-block-button__link.wp-element-button:not(.has-text-color):not([style*="color"]):hover {
    color: var(--tb-fg);
}

/* Thumbnail List (Latest Posts) */
body.theme-style-broadsheet .wp-block-latest-posts.is-style-thumbnail-list a {
    font-family: var(--tb-serif);
    font-weight: 700;
}


/* 19. Social Icons Widget — see the note in styles/editorial.css
============================================================================================*/

body.mode-dark .zoom-social-icons-list--without-canvas .social-icon {
    color: var(--tb-fg) !important;
}

body.mode-dark .zoom-social-icons-list--without-canvas .zoom-social_icons-list__link:hover .social-icon {
    color: var(--tb-accent) !important;
}