/* ==========================================================================
   ByMuseum design system — applied over Boombox
   ========================================================================== */

:root {
  --ink: #1a1714;
  --muted: #5c564c;
  --faint: #8a8378;
  --line: #dedace;
  --gold: #a97c28;
  --cream: #f5f2ec;
  --plate: #211d1a;
  --bg-alt: #f7f5f0;
  --pale-numeral: #eae5d8;
  --meta-gray: #a89f8f;
}

/* ---- Base ---------------------------------------------------------- */

html, body {
  background-color: var(--cream);
  color: var(--muted);
}

body,
p, li, span, div, label, textarea, input, select, button,
.entry-content, .entry-summary, .comment-content {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
}

p, .entry-content p, .entry-summary p {
  line-height: 1.7;
  color: var(--muted);
  font-size: 16px;
}

a {
  color: var(--gold);
}
a:hover, a:focus {
  color: var(--ink);
}

hr {
  border-color: var(--line);
}

/* ---- Headings -------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.entry-title, .post-title, .page-title, .site-title,
.widget-title, .comment-reply-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--ink);
  font-weight: 600;
}

h1, .h1, .page-title {
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
}

h2, .h2, .entry-title, .post-title {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.25;
}

em, i, .accent-italic {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
}

/* ---- Kickers / uppercase labels --------------------------------------- */

.entry-meta, .post-meta, .cat-links, .entry-category,
.bb-tags a, .widget_tag_cloud .tagcloud a, .breadcrumbs,
.author-vcard .author-role, .bb-post-collection .post-item .post-author-meta {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--faint);
}

.entry-category a, .cat-links a {
  color: var(--gold);
}

/* ---- Buttons ----------------------------------------------------------- */

.btn, .bb-btn, .bb-btn-primary,
input[type="submit"], button[type="submit"], .wpcf7-submit,
.vc_btn3, .vc_btn3.vc_btn3-style-classic {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--cream) !important;
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 2px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover, .bb-btn:hover, .bb-btn-primary:hover,
input[type="submit"]:hover, button[type="submit"]:hover, .wpcf7-submit:hover,
.vc_btn3:hover {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--cream) !important;
}

.bb-btn-primary-outline, .bb-btn-secondary-outline {
  background-color: transparent !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

/* ---- Cards (post grid / collection items) ------------------------------ */

.post-item, .bb-post-collection .post-items .post-item, .featured-item {
  background-color: #fff;
  border: 1px solid var(--line) !important;
}

.post-item .entry-title a, .post-item .post-title a {
  color: var(--ink) !important;
}
.post-item .entry-title a:hover, .post-item .post-title a:hover {
  color: var(--gold) !important;
}

/* .featured-item titles sit inside an absolutely-positioned header with a
   dark gradient scrim (rgba(0,0,0,0) -> rgba(0,0,0,.7)) directly over the
   photo thumbnail, not on a white card body -- needs light text. */
.featured-item .entry-title a, .featured-item .post-title a {
  color: var(--cream) !important;
}
.featured-item .entry-title a:hover, .featured-item .post-title a:hover {
  color: var(--gold) !important;
}

/* ---- Header / Footer ---------------------------------------------------- */

.site-header, .bb-page-header {
  background-color: var(--cream);
  border-bottom: 1px solid var(--line);
}

.site-footer, footer.site-footer, #colophon, #footer {
  background-color: var(--plate) !important;
  color: var(--cream);
}
.site-footer a, footer.site-footer a, #colophon a, #footer a {
  color: var(--cream);
}
.site-footer .widget-title, footer.site-footer .widget-title, #footer .widget-title {
  color: var(--cream);
}
.site-footer .entry-meta, footer.site-footer .entry-meta, #footer .entry-meta {
  color: var(--meta-gray);
}

/* ---- Sidebars / alternating section backgrounds -------------------------- */

.widget-area, .sidebar, .secondary {
  background-color: var(--bg-alt);
  padding: 48px 12px;
  box-sizing: border-box;
}

/* ---- Big decorative numerals (pagination, ratings) ------------------------ */

.bb-post-rating .count, .post-nav .page-numbers, .pagination .page-numbers,
.more-load-button button {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--pale-numeral);
}

/* ==========================================================================
   Boombox "primary color" (default #ffe400 yellow) -> gold accent.
   This is the theme's single accent color, threaded via inline customizer
   CSS through header, buttons, BuddyPress, pagination, tags, badges, etc.
   Overriding every known instance here rather than the source option,
   since no theme_mod override exists to change upstream.
   ========================================================================== */

.bb-header.header-mobile .header-row,
.bb-header.header-desktop .top-header,
#zombify-main-section-front .zf-comments .nav-links a,
.light-modal .modal-close,
#comments .nav-links a,
#footer .cat-item.current-cat a,
#footer .widget_mc4wp_form_widget::before,
#footer .widget_create_post::before,
#footer .cat-item a:hover,
#footer button[type="submit"],
#footer input[type="submit"],
#footer .bb-btn,
#footer .bnt.primary,
#footer .widget_categories ul li a:hover,
#footer .widget_archive ul li a:hover,
#footer .widget_pages ul li a:hover,
#footer .widget_meta ul li a:hover,
#footer .widget_nav_menu ul li a:hover,
.mark, mark, .box_list, .bb-tooltip::before, .bb-text-highlight.primary-color,
.quiz_row:hover, .progress-bar-success, .onoffswitch, .onoffswitch2,
.widget_nav_menu ul li a:hover, .widget_categories ul li a:hover,
.widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover,
.widget_mc4wp_form_widget::before, .widget_create_post::before,
.widget_calendar table th a, .widget_calendar table td a,
.go-top, .bb-affiliate-content .item-url, .bb-mobile-navigation .close,
.bb-wp-pagination .page-numbers.next, .bb-wp-pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next, .navigation.pagination .page-numbers.prev,
.bb-next-prev-pagination .page-link, .bb-next-pagination .page-link,
.bb-post-share-box .post-share-count, .cat-item.current-cat a, .cat-item a:hover,
.bb-fixed-pagination .page:hover .pg-arrow,
button[type="submit"], input[type="submit"],
.bb-btn.bb-btn-primary, .bb-btn.bb-btn-primary:hover,
blockquote::before, .bb-btn.bb-btn-primary-outline:hover,
.bb-post-gallery-content .bb-gl-meta .bb-gl-arrow, hr.primary-color,
.bb-bg-primary, .bb-bg-primary.bb-btn, .bb-sticky-btm .btn-close,
.bb-tabs .tabs-menu li.active::before,
#buddypress button, #buddypress input[type="button"], #buddypress input[type="reset"],
#buddypress input[type="submit"], #buddypress ul.button-nav li.current a,
#buddypress ul.button-nav li:hover a, #buddypress a.bp-title-button,
#buddypress .comment-reply-link, #buddypress .activity-list .load-more a,
#buddypress .activity-list .load-newest a,
.reaction-item .reaction-bar .reaction-stat, .bb-badge .circle,
.reaction-item .reaction-vote-btn:not(.disabled):hover, .reaction-item.voted .reaction-vote-btn {
  background-color: var(--gold) !important;
}

.bb-header.header-desktop .top-header svg {
  fill: var(--gold) !important;
}

.bb-header.header-desktop .bottom-header,
#footer a:hover,
#footer .footer-bottom a:hover,
#cancel-comment-reply-link, .bb-affiliate-content .price::before,
.bb-header-navigation .main-navigation > ul .sub-menu li:hover > a,
.bb-header-navigation .main-navigation > ul .sub-menu li.current-menu-item a,
.bb-header-navigation .more-navigation .section-navigation ul li:hover a,
.bb-mobile-navigation .main-navigation li a:hover,
.bb-mobile-navigation .main-navigation > ul > li .sub-menu li a:hover,
.bb-mobile-navigation .main-navigation li.current-menu-item > a,
.bb-mobile-navigation .main-navigation .sub-menu li.current-menu-item > a,
.bb-mobile-navigation .main-navigation li.current-menu-item > .dropdown-toggle,
.bb-mobile-navigation .main-navigation .sub-menu li.current-menu-item > .dropdown-toggle,
.sticky .post-thumbnail::after, .entry-no-lg, .entry-title:hover a,
.post-types .item:hover .bb-icon, .bb-text-dropcap.primary-color,
.bb-btn-primary-outline, .bb-btn-link:hover, .bb-btn-link,
#comments .bypostauthor > .comment-body .vcard .fn, .more-link:hover,
.widget_bb-side-navigation .menu-item.menu-item-icon .bb-icon,
.bb-price-block .current-price::before, .bb-price-block ins::before,
.bb-price-block .amount::before, .product_list_widget ins .amount::before,
.single.nsfw-post .bb-post-single .nsfw-post h3, .bb-post-nav .nsfw-post h3,
.post-thumbnail .nsfw-post h3,
.header .account-box .notifications-list.menu ul li a:hover {
  color: var(--gold) !important;
}

.bb-header.header-desktop .bottom-header .main-navigation ul li::before,
.bb-header.header-desktop .bottom-header .account-box .user::after,
.bb-header.header-desktop .bottom-header .create-post::before,
.bb-header.header-desktop .bottom-header .menu-button::after,
#footer .slick-dots li.slick-active button::before,
#footer .widget_tag_cloud a:hover,
.bb-tooltip::after, hr.bb-line-dashed.primary-color, hr.bb-line-dotted.primary-color,
.post-types .item:hover, .more-load-button button:hover, .bb-btn-primary-outline,
.bb-btn-primary:hover, .widget_tag_cloud .tagcloud a:hover,
.gfy-tabs .tab-menu-item.active {
  border-color: var(--gold) !important;
}

/* ==========================================================================
   Header bars (utility bar + logo bar) -> black, per request.
   Site logo file is already white/light, so a black bar reads cleanly;
   nav text/icons flip to cream, hover state to gold, so nothing goes
   dark-on-dark. Declared after the primary-color block above so it wins
   the .top-header / .header-row background tie via source order.
   ========================================================================== */

.bb-header.header-desktop .top-header,
.bb-header.header-desktop .bottom-header,
.bb-header.header-mobile .header-row {
  background-color: var(--ink) !important;
  background-image: none !important;
  color: var(--cream) !important;
}

.bb-header.header-desktop .top-header svg,
.bb-header.header-desktop .bottom-header svg {
  fill: var(--ink) !important;
}

.bb-header.header-desktop .top-header .bb-header-icon:hover,
.bb-header.header-desktop .top-header .bb-header-icon.active,
.bb-header.header-desktop .top-header .main-navigation > ul > li:hover,
.bb-header.header-desktop .top-header .main-navigation > ul > li.current-menu-item > a,
.bb-header.header-desktop .bottom-header .bb-header-icon:hover,
.bb-header.header-desktop .bottom-header .bb-header-icon.active,
.bb-header.header-desktop .bottom-header .main-navigation > ul > li:hover,
.bb-header.header-desktop .bottom-header .main-navigation > ul > li.current-menu-item > a,
.bb-header.header-desktop .bottom-header .main-navigation > ul > li.current-menu-item > .dropdown-toggle {
  color: var(--gold) !important;
}

.bb-header.header-desktop .bottom-header .main-navigation ul li::before,
.bb-header.header-desktop .bottom-header .account-box .user::after,
.bb-header.header-desktop .bottom-header .create-post::before,
.bb-header.header-desktop .bottom-header .menu-button::after {
  border-color: var(--cream) !important;
}

.bb-header.header-desktop .bottom-header .create-post,
.bb-header.header-desktop .top-header .create-post {
  background-color: var(--gold) !important;
  color: var(--cream) !important;
}

/* Hamburger/"more navigation" trigger in the desktop logo bar is redundant
   with the full horizontal nav row already shown below it -- hidden here.
   Left untouched on .header-mobile, where it's the only way to reach the
   nav menu on small screens. */
.bb-header.header-desktop .menu-button {
  display: none !important;
}

/* ==========================================================================
   3-bar header (sandytimes.ae-style): top utility bar (About/Contact left,
   Trending/Editor's Picks/Popular pills center, social icons right), middle
   bar (logo only, centered -- composition brand-c via customizer), bottom
   bar (existing category strip, .bb-featured-menu, background flipped to
   match). Top row's custom left/right components are registered in the
   child theme's functions.php via the boombox/header/render_composition_item
   hook and rendered into the native l-1 / r-1 wrapper divs.
   ========================================================================== */

/* Top bar: Trending / Editor's Picks / Popular as centered white pills --
   sized to match the sandytimes.ae reference (12px text, 22px-line-height
   pills, 16px radius, 12px gap), not the theme's default nav-item scale. */
.bb-header.header-desktop .top-header.menu-center .h-component.m-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* m-2's own flex slot sits between l-1 (About/Contact, ~186px) and r-1
   (social icons, ~98px) -- since those two are different widths, centering
   the pills *within m-2's slot* put them off the page's true center (and
   off the logo's center below, which centers against the full row width).
   Take the pills out of that lopsided slot and center them against the row
   itself: m-2 stays an empty in-flow spacer (so l-1/r-1 keep their native
   space-around positions), while the actual nav is absolutely centered on
   .container. */
.bb-header.header-desktop .top-header.menu-center .h-component.m-2 .bb-header-navigation.header-item {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  margin: 0;
}
.bb-header.header-desktop .top-header.menu-center .main-navigation > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.bb-header.header-desktop .top-header.menu-center .main-navigation > ul > li {
  margin: 0;
}
.bb-header.header-desktop .top-header.menu-center .main-navigation > ul > li::before {
  content: none !important;
}
.bb-header.header-desktop .top-header.menu-center .main-navigation > ul > li > a {
  display: inline-flex;
  align-items: center;
  background-color: var(--cream);
  color: var(--ink) !important;
  padding: 0 14px;
  height: 26px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  line-height: 26px;
}
.bb-header.header-desktop .top-header.menu-center .main-navigation > ul > li > a i.bb-icon {
  display: none;
}
.bb-header.header-desktop .top-header.menu-center .main-navigation > ul > li:hover > a,
.bb-header.header-desktop .top-header.menu-center .main-navigation > ul > li.current-menu-item > a {
  background-color: var(--gold);
  color: var(--ink) !important;
}
/* "..." more-menu overflow trigger next to Popular -- redundant, the 3
   pills already fit with room to spare, so it just adds visual clutter. */
.bb-header.header-desktop .top-header.menu-center .more-navigation {
  display: none !important;
}

/* Extra breathing room above the top bar's text -- padding inside the black
   bar itself (grows the bar, no white gap above it), not a gap before it. */
.bb-header.header-desktop .top-header {
  padding-top: 10px;
}

/* Top bar left/right custom components -- centered full-height so their
   content lines up on the same vertical center as the pill menu (m-2),
   rather than sitting at natural text height like a block element. */
.bb-header.header-desktop .top-header .h-component.l-1,
.bb-header.header-desktop .top-header .h-component.r-1 {
  display: flex;
  align-items: center;
}

/* Top bar left: About Us / Contact Us */
.bb-about-contact-nav .bb-about-contact-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-about-contact-nav .bb-about-contact-menu li {
  margin: 0 14px 0 0;
}
.bb-about-contact-nav .bb-about-contact-menu a {
  color: var(--cream);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.bb-about-contact-nav .bb-about-contact-menu a:hover {
  color: var(--gold);
}

/* Top bar right: always-visible social icons (not the dropdown toggle) */
.bb-social-inline ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-social-inline ul li {
  margin-left: 14px;
}
.bb-social-inline .bb-social-inline-icon {
  display: inline-block;
  color: var(--cream);
  font-size: 20px;
  line-height: 1;
}
.bb-social-inline .bb-social-inline-icon:hover {
  color: var(--gold);
}

/* Bottom bar (category strip) -> black to match the two bars above it */
.bb-featured-menu {
  background-color: var(--ink) !important;
  /* Base theme sets margin-bottom: 25px !important on this, leaving a white
     gap between the black category bar and whatever comes right after it
     (the hero slider on the homepage, page content elsewhere). */
  margin-bottom: 0 !important;
}
.bb-featured-menu:before {
  border-bottom-color: rgba(245, 240, 230, 0.15) !important;
}
.bb-featured-menu a {
  color: var(--cream) !important;
}
.bb-featured-menu a:hover,
.bb-featured-menu li.current-cat a {
  color: var(--gold) !important;
}

/* Featured-artists badge row -- bump icon size up from the theme default
   40px. Scoped to .bb-badge-list so it doesn't affect the small "trending"
   badges rendered on post-card thumbnails, which share the same classes. */
.bb-badge-list .bb-badge,
.bb-badge-list .bb-badge .circle,
.bb-badge-list .bb-badge .circle img {
  width: 56px !important;
  height: 56px !important;
}

/* ByMuseum backlink CTA appended to Content-Studio-generated painting
   articles (Tier 1 / public-domain subjects only). */
.entry-content .cs-bymuseum-cta {
  margin-top: 24px;
  padding: 14px 18px;
  background-color: var(--bg-alt);
  border-left: 3px solid var(--gold);
  font-size: 15px;
}

.entry-content .cs-bymuseum-cta a {
  font-weight: 600;
}

/* Hub article's self-updating artist list (rendered by the [cs_hub_list]
   shortcode -- links resolve live, so entries fill in as articles publish). */
.entry-content .cs-hub-list {
  counter-reset: cs-hub-counter;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.entry-content .cs-hub-list .cs-hub-item {
  counter-increment: cs-hub-counter;
  position: relative;
  padding: 14px 0 14px 44px;
  border-top: 1px solid var(--line);
}

.entry-content .cs-hub-list .cs-hub-item:before {
  content: counter(cs-hub-counter);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--pale-numeral);
}

.entry-content .cs-hub-list h4 {
  margin: 0 0 4px;
  font-size: 17px;
}

.entry-content .cs-hub-list h4 a {
  color: var(--ink);
}

.entry-content .cs-hub-list h4 a:hover {
  color: var(--gold);
}

.entry-content .cs-hub-list .cs-hub-pending {
  font-size: 12px;
  font-weight: 400;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.entry-content .cs-hub-list p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* ==========================================================================
   Homepage hero -- 6-card bento grid matching artinthemiddle.com's
   featured-articles layout exactly: 12-column / 3-row grid, 18px gap,
   same grid-column/grid-row spans per cell as the reference. Rendered by
   the child theme's template-parts/hero-slider.php, right below the
   header, before the small articles strip and the artist-icons row.
   ========================================================================== */

/* Artist-icons row between the category bar and the hero grid uses the same
   spacing as the Boombox demo (boombox.px-lab.com): 25px under the category
   bar, then the theme's own badge-list padding (3px top / 10px bottom) and
   24.4px bottom margin -- i.e. the theme defaults, so no overrides on the
   list itself; only restore the bar's 25px margin that is zeroed globally. */
.home .bb-featured-menu {
  margin-bottom: 25px !important;
}

.cs-hero-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1.22fr 1.22fr 1fr;
  gap: 18px;
  aspect-ratio: 1128 / 691;
  margin-top: 0;
  margin-bottom: 8px;
}

.cs-hero-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--plate);
  text-decoration: none;
}

.cs-hero-card-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .45s ease;
}

.cs-hero-card:hover .cs-hero-card-media {
  transform: scale(1.05);
}

.cs-hero-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.9) 0%, rgba(10, 8, 6, 0.45) 50%, rgba(10, 8, 6, 0) 78%);
}

.cs-hero-card-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  gap: 8px;
}

.cs-hero-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cs-hero-card-overlay .cs-hero-card-tags {
  color: rgba(245, 242, 236, 0.85);
}

.cs-hero-card-tag-sep {
  opacity: .5;
}

.cs-hero-card-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  line-height: 1.2;
}

.cs-hero-card-overlay .cs-hero-card-title {
  color: var(--cream);
  font-size: 19px;
}

.cs-hero-card-overlay:hover .cs-hero-card-title {
  color: var(--gold);
}

/* Grid placement, matching the reference cell-by-cell. */
.cs-hero-cell-0 { grid-column: 1 / 7; grid-row: 1 / 3; }
.cs-hero-cell-1 { grid-column: 7 / 10; grid-row: 1 / 2; }
.cs-hero-cell-2 { grid-column: 10 / 13; grid-row: 1 / 3; }
.cs-hero-cell-3 { grid-column: 7 / 10; grid-row: 2 / 3; }
.cs-hero-cell-4 { grid-column: 1 / 5; grid-row: 3 / 4; }
.cs-hero-cell-5 { grid-column: 5 / 13; grid-row: 3 / 4; }

.cs-hero-cell-0 .cs-hero-card-title { font-size: 27px; }
.cs-hero-cell-2 .cs-hero-card-title { font-size: 18px; }

/* Cell 5: white "split" card -- image left, text panel right, matching
   the reference's one non-overlay card (visible excerpt, colored tag
   text instead of a scrim + white overlay text). */
.cs-hero-card-split {
  display: flex;
  flex-direction: row;
  background-color: var(--bg-alt);
  border: 1px solid var(--line);
}

.cs-hero-card-split .cs-hero-card-media {
  position: relative;
  inset: auto;
  width: 42%;
  flex-shrink: 0;
}

.cs-hero-card-split .cs-hero-card-body {
  flex: 1;
  justify-content: center;
  padding: 28px;
  gap: 9px;
}

.cs-hero-card-split .cs-hero-card-tags {
  color: var(--gold);
}

.cs-hero-card-split .cs-hero-card-title {
  color: var(--ink);
  font-size: 19px;
}

.cs-hero-card-split:hover .cs-hero-card-title {
  color: var(--gold);
}

.cs-hero-card-excerpt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Below tablet width the 12-col bento (with cells spanning 2 rows) can't
   hold its shape -- stack every card full-width in a single column. */
@media (max-width: 900px) {
  .cs-hero-bento {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
  }
  .cs-hero-card {
    min-height: 260px;
  }
  .cs-hero-card-split {
    flex-direction: column;
  }
  .cs-hero-card-split .cs-hero-card-media {
    width: 100%;
    height: 200px;
  }
  .cs-hero-cell-0 .cs-hero-card-title,
  .cs-hero-cell-2 .cs-hero-card-title {
    font-size: 19px;
  }
}

/* ==========================================================================
   "Latest News" section -- matches artinthemiddle.com's News section:
   header (accent bar + heading + view-all link), a lead card on the left
   (image, "Latest" badge, pill tags, title, excerpt, date) and a list of
   smaller rows on the right (thumbnail + pill tags + title + date).
   Rendered by template-parts/latest-news.php, replacing the old small
   articles strip in the same spot below the hero.
   ========================================================================== */

.cs-news {
  margin-top: 48px;
  margin-bottom: 8px;
}

.cs-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.cs-news-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cs-news-accent {
  display: block;
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background-color: var(--gold);
}

.cs-news-heading {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
}

.cs-news-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 32px;
  /* stretch (the default) so the side list matches the lead card's full
     height -- align-items:start left a gap of empty space under the 4
     rows, since their natural height fell short of the taller lead card. */
}

/* ---- Lead card ---- */

.cs-news-lead {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid var(--line);
}

.cs-news-lead-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--bg-alt);
}

.cs-news-lead-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.cs-news-lead:hover .cs-news-lead-img img {
  transform: scale(1.05);
}

.cs-news-latest-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--gold);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 7px 13px;
  border-radius: 99px;
}

.cs-news-latest-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ink);
}

.cs-news-lead-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-news-tag {
  display: inline-block;
  background-color: var(--bg-alt);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
}

.cs-news-lead-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.cs-news-lead:hover .cs-news-lead-title {
  color: var(--gold);
}

.cs-news-lead-excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.cs-news-meta {
  font-size: 12px;
  color: var(--faint);
}

/* ---- Side list ---- */

.cs-news-side-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  /* Same 1px line as the lead card's border, so the list is framed by
     lines that sit exactly at the lead card's top and bottom edges. */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cs-news-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 2px;
  /* Divide the full stretched height evenly between the 4 rows, so they
     grow to fill the same height as the lead card instead of leaving
     empty space below them. */
  flex: 1;
}

.cs-news-row:not(:first-child) {
  border-top: 1px solid var(--line);
}

.cs-news-row-img {
  flex-shrink: 0;
  width: 128px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
}

.cs-news-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-news-row-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cs-news-tags-sm {
  gap: 6px;
}

.cs-news-tag-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.cs-news-row-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cs-news-row:hover .cs-news-row-title {
  color: var(--gold);
}

.cs-news-meta-sm {
  font-size: 12px;
}

@media (max-width: 900px) {
  .cs-news-grid {
    grid-template-columns: 1fr;
  }
  .cs-news-side-list {
    height: auto;
  }
  .cs-news-row {
    flex: none;
  }
  .cs-news-row-img {
    width: 96px;
    height: 72px;
  }
}

@media (max-width: 560px) {
  .cs-news-header {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ==========================================================================
   Footer -- sandytimes.ae-style: a centered brand mark above everything,
   generously spaced widget columns with small-caps labels, and a slim
   muted legal row at the very bottom. The dark background is already set
   via the #footer / .site-footer rules earlier in this file. The articles
   slider (theme's own featured-strip, kept per request) renders between
   the brand mark and the widget columns -- its own styling is untouched,
   it already inherits readable light text from the #footer a rule above.
   ========================================================================== */

.cs-footer-brand {
  text-align: center;
  padding: 56px 20px 32px;
}

.cs-footer-brand a {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 30px;
  color: var(--cream);
  letter-spacing: .01em;
}

.cs-footer-brand a:hover {
  color: var(--gold);
}

#footer .footer-top {
  padding-top: 0;
  padding-bottom: 16px;
}

#footer .footer-top .row {
  margin-top: 40px;
}

#footer .footer-top .widget {
  margin-bottom: 24px;
}
#footer .footer-top .widget:last-child {
  margin-bottom: 0;
}
#footer .footer-top .widget_text p,
#footer .footer-top .widget_custom_html .textwidget,
#footer .footer-top .widget_custom_html p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 242, 236, 0.75);
  margin: 0;
}

#footer .widget-title {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 18px;
}

#footer .footer-top .widget_nav_menu ul,
#footer .footer-top .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Base theme applies column-count:2 to nav-menu widgets -- a single
     column reads closer to sandytimes' plain category list. */
  column-count: 1;
}

#footer .footer-top .widget_nav_menu li {
  margin-bottom: 10px;
}

#footer .footer-top .widget_nav_menu a {
  font-size: 14px;
  color: rgba(245, 242, 236, 0.8);
}

#footer .footer-top .widget_nav_menu a:hover {
  color: var(--gold);
}

#footer .footer-bottom {
  border-top: 1px solid rgba(245, 242, 236, 0.12);
  margin-top: 8px;
}

#footer .footer-bottom .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

#footer .footer-bottom .footer-nav,
#footer .footer-bottom .social-footer,
#footer .footer-bottom .copy-right {
  float: none;
  max-width: none;
  width: auto;
  margin: 0;
}

#footer .footer-nav nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .footer-nav a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(245, 242, 236, 0.75);
}

#footer .footer-nav a:hover {
  color: var(--gold);
}

#footer .social-footer ul {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

#footer .social-footer .bb-icon {
  color: var(--cream);
  font-size: 16px;
}

#footer .social-footer .bb-icon:hover {
  color: var(--gold);
}

/* The boombox_social WIDGET (used in the footer's "about" column) hardcodes
   class="social circle" on its own wrapper, which pulls in the theme's
   per-network brand-colored circle backgrounds (Facebook blue, Instagram
   gradient, Pinterest red, etc). Flatten that to a plain white/cream glyph
   on a transparent background, matching the rest of the dark footer. */
#footer .social.circle ul li a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--cream) !important;
  border: 1px solid rgba(245, 242, 236, 0.25);
}

#footer .social.circle ul li a:hover {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
  opacity: 1;
}

#footer .copy-right {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(245, 242, 236, 0.55);
}

/* ==========================================================================
   Article cards -- adapted from artinthemiddle.com. Two of their card
   patterns, applied to two different spots on our site:

   1. Main post grid (.bb-post-collection .post-items .post-item): their
      white-card "Latest interviews" style -- image on top (normal flow,
      not overlaid), pill-shaped category tags, bold dark title and a
      muted meta line below, in a plain white rounded card.

   2. Trending/Hot sidebar widgets (.widget_trending_entries): their
      full-bleed "bento" style -- rounded image with a dark bottom-gradient
      scrim and the title overlaid directly on the photo. Better suited to
      a narrow sidebar list than a wall of white cards.
   ========================================================================== */

/* ---- 1. Main post grid: white card + pill tags ---- */

.bb-post-collection .post-items .post-item {
  background: transparent;
  /* The general card rule earlier in this file puts a border on every
     .post-item LI with !important -- that left a second rectangular
     outline around each grid cell, on top of the article's own rounded
     border, reading as a grid of boxes behind the cards. The article
     itself carries the only visible border now. */
  border: none !important;
}

.bb-post-collection .post-items .post-item article.bb-card-item {
  display: block;
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid var(--line);
  /* No overflow:hidden here -- the Trending badge and view/vote pill are
     siblings of the image (not descendants of it), positioned to poke
     slightly above/outside the thumbnail on purpose. Clipping at the
     article level cut them off. Instead, round + clip just the image's own
     box below, and leave the badges free to sit outside it uncropped. */
}

.bb-post-collection .post-items .post-item .post-thumbnail {
  min-height: 0;
}

.bb-post-collection .post-items .post-item .post-thumbnail .bb-media-placeholder {
  border-radius: 16px 16px 0 0;
}

.bb-post-collection .post-items .post-item .post-thumbnail img {
  transition: transform .45s ease;
}

.bb-post-collection .post-items .post-item article.bb-card-item:hover .post-thumbnail img {
  transform: scale(1.06);
}

.bb-post-collection .post-items .post-item .content {
  padding: 20px;
}

.bb-post-collection .post-items .post-item .entry-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bb-post-collection .post-items .post-item .bb-post-terms,
.bb-post-collection .post-items .post-item .bb-cat-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bb-post-collection .post-items .post-item .bb-cat-links a {
  display: inline-block;
  background-color: var(--bg-alt);
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}

.bb-post-collection .post-items .post-item .bb-cat-links a:hover {
  background-color: var(--gold);
  color: var(--cream);
}

.bb-post-collection .post-items .post-item .entry-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.bb-post-collection .post-items .post-item .entry-title a {
  color: var(--ink) !important;
  font-weight: 600;
}

.bb-post-collection .post-items .post-item .entry-title a:hover {
  color: var(--gold) !important;
}

/* Excerpt dropped from the card face, matching the reference's tags + title
   + meta-line card (no summary text shown). */
.bb-post-collection .post-items .post-item .entry-summary {
  display: none;
}

.bb-post-collection .post-items .post-item .bb-author-vcard-mini {
  margin-top: 2px;
}

.bb-post-collection .post-items .post-item .bb-author-vcard-mini .author-avatar {
  display: none;
}

.bb-post-collection .post-items .post-item .bb-author-vcard-mini .auth-byline,
.bb-post-collection .post-items .post-item .bb-author-vcard-mini .auth-name a,
.bb-post-collection .post-items .post-item .bb-author-vcard-mini .auth-posted-on time {
  font-size: 12px;
  color: var(--faint);
}

.bb-post-collection .post-items .post-item .bb-author-vcard-mini .auth-name a:hover {
  color: var(--gold);
}

.bb-post-collection .post-items .post-item article.bb-card-item.no-thumbnail {
  min-height: 0;
}

/* ---- 2. Trending / Hot sidebar widgets: full-bleed overlay card ---- */

.widget_trending_entries ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.widget_trending_entries li {
  list-style: none;
}

.widget_trending_entries article.post {
  display: grid;
  border-radius: 12px;
  background-color: var(--plate);
  position: relative;
  /* No overflow:hidden -- the numbered badge is a sibling of the image
     (not a descendant of it) and is positioned to poke slightly above the
     thumbnail on purpose. Round + clip the image and the content overlay
     individually below instead, so the badge stays uncropped. */
}

.widget_trending_entries .post-thumbnail,
.widget_trending_entries .content {
  grid-area: 1 / 1 / 2 / 1;
}

.widget_trending_entries .post-thumbnail {
  min-height: 140px;
  z-index: 1;
}

.widget_trending_entries .post-thumbnail .bb-media-placeholder {
  border-radius: 12px;
}

.widget_trending_entries .post-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.widget_trending_entries article.post:hover .post-thumbnail img {
  transform: scale(1.06);
}

.widget_trending_entries .content {
  align-self: end;
  z-index: 2;
  padding: 12px 14px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.9) 0%, rgba(10, 8, 6, 0.5) 60%, rgba(10, 8, 6, 0) 100%);
}

.widget_trending_entries .entry-header,
.widget_trending_entries .entry-title {
  margin: 0;
}

.widget_trending_entries .entry-title a {
  color: var(--cream) !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}

.widget_trending_entries .entry-title a:hover {
  color: var(--gold) !important;
}

/* Left at the theme's native top:-9px (from the site's "badges outside"
   option) -- it pokes slightly above the thumbnail on purpose, half in/
   half out, which now renders uncropped since the card itself no longer
   clips (see article.post above). */
.widget_trending_entries .post-thumbnail .post-number {
  z-index: 3;
}