@media(max-width:768px){ :root{ --mobile-vpad-top: 8px; --mobile-vpad-bottom: 0; --mobile-body-pt: 49px; } }

    :root {
      --nav-height: 96px;
    }

  /* Ensure content sits below fixed nav and add a thin full-bleed divider under nav */
  html { scroll-behavior: smooth; }
  body { padding-top: var(--nav-height, 96px); }
  .content-top-border { width: 100vw; height: 1.6px; background: var(--gray-900); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  [data-theme="dark"] .content-top-border { background: var(--gray-700); }

  body { background: var(--gray-300); overflow-x: hidden; scrollbar-gutter: stable both-edges; }
  /* Harmonize card with media page look */
  .feat-row { background: hsla(220, 14.3%, 95.9%, 0.66); border:2px solid var(--gray-200); box-shadow: var(--elev-1); }
  /* Ensure global nav dropdowns work on this page */
  .header-base { position: relative; z-index: 4000; }
  .header-base .dropdown-menu { display: block !important; }
  .container { max-width:1650px; margin: 0 auto; padding: 0 1.5rem; box-sizing: border-box; font-size: 1rem; }
  .page-head { display:none; }

  /* Featured as focused list (no big hero container) */
  .featured-wrap { margin: 1rem auto .75rem; background: transparent; border:0; box-shadow:none; max-width: 1320px;}
  .featured-head { display:flex; align-items:center; justify-content:space-between; margin: .25rem 0 .5rem; }
  .featured-title { font-size:1.35rem; font-weight:900; letter-spacing:-.01em; margin:0; color: var(--gray-100); text-shadow: 2px 2px 2px var(--gray-900);}
  .featured-layout { display:grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap:.75rem; align-items:start; }
  /* Make right side sticky on desktop (980px+) */
  @media (min-width: 980px) {
    .featured-layout > div:last-child {
      position: sticky;
      top: 120px; /* Optimal spacing to show "6 featured" text and full images */
      align-self: start;
    }
  }
  /* responsive rule moved to mobile.css */
  .featured-list { display:block; }
  .featured-cards { display:grid; grid-template-columns: 1fr; gap:.6rem; align-content:start; }
  /* Ensure cards expand to the column width in the featured area */
  .featured-cards .feat-card { min-width: 0; max-width: none; }
  .featured-variants { margin-top:.5rem; }
  .featured-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:.6rem; }
  /* Featured skeleton (shimmer) */
  @keyframes news-loading-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
  .fs-sk { background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%); background-size: 180% 100%; animation: news-loading-shimmer 1.0s ease-in-out infinite; border-radius: 8px; }
  .fs-title { height: 24px; width: 220px; }
  .fs-sub { height: 14px; width: 140px; border-radius: 6px; }
  .fs-row { border:1px solid var(--gray-200); border-radius: 12px; background: var(--surface); padding: .75rem .85rem; display: grid; grid-template-columns: 116px 1fr 140px; align-items: center; gap: .75rem; }
  .fs-thumb { height: 72px; border-radius: 10px; }
  .fs-line { height: 16px; width: 60%; border-radius: 6px; }
  .fs-line.sm { width: 40%; }
  .fs-chip { height: 18px; width: 80px; border-radius: 999px; }
  .fs-card { border:1px solid var(--gray-200); border-radius: 12px; background: var(--surface); padding: .6rem .7rem; display: flex; flex-direction: column; gap: .4rem; }
  .fs-cover { aspect-ratio: 16/9; border-radius: 12px; }
  [data-theme="dark"] .fs-row, [data-theme="dark"] .fs-card { background: var(--gray-800); border-color: var(--gray-700); }
.feat-row {background: hsla(220, 14.3%, 95.9%, 0.66); border: 3px solid white; box-shadow: var(--shadow-base); border-radius: 12px; margin: 0 0 .5rem; padding: var(--space-3) var(--space-4); display:flex; flex-direction:column; align-items:stretch; gap: var(--u-gap); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .feat-row:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2,6,23,.15); border-color: var(--primary-600); }
  .feat-row.no-thumb .feat-thumb { display:none; }
  .feat-top { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--u-gap); }
  .feat-main { display:flex; flex-direction:column; gap: var(--u-flow-space); padding-right:0; min-width:0; flex:1; }
  .feat-headline { display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
  .feat-headline .t { font-weight:800; color: var(--gray-900); font-size:1.45rem; }
  .feat-headline .d { color: var(--gray-600); font-weight:700; font-size:.95rem; }
  .feat-content { display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem; }
  .feat-content .excerpt { color: var(--gray-900); font-size:1rem; line-height:1.5; word-spacing: -0.01rem; }
  .inline-disclosure { appearance:none; border:0; background:transparent; color:var(--gray-600); padding:0; display:inline-flex; align-items:center; gap:.45rem; width:max-content; font:inherit; font-size:.95rem; font-weight:650; cursor:pointer; transition:color .15s ease; }
  .inline-disclosure:hover,
  .inline-disclosure:active {
    background:transparent !important;
    color:var(--gray-900);
    box-shadow:none;
    transform:none;
  }
  .inline-disclosure:focus-visible { outline:2px solid var(--primary-600); outline-offset:4px; border-radius:6px; }
  .inline-disclosure .toggle-icon { width:23px; height:23px; border-radius:999px; display:inline-grid; place-items:center; background:rgba(255,255,255,.72); color:var(--gray-800); border:1px solid var(--gray-300); box-shadow:0 2px 5px rgba(15,23,42,.08); transition:transform .2s ease, background-color .15s ease, color .15s ease, border-color .15s ease; }
  .inline-disclosure:hover .toggle-icon { background:var(--gray-900); color:#fff; border-color:var(--gray-900); }
  .inline-disclosure[aria-expanded="true"] .toggle-icon { transform:rotate(180deg); background:var(--gray-900); color:#fff; border-color:var(--gray-900); }
  .inline-details { max-height:0; overflow:hidden; opacity:0; background:rgba(248,250,252,.72); border-top:1px solid transparent; transition:max-height .28s ease, opacity .18s ease, padding .28s ease, border-color .2s ease; }
  .inline-details.open { max-height:1400px; opacity:1; border-top-color:rgba(71,85,105,.3); }
  .feat-details { margin-left:calc(-1 * var(--space-4, 1rem)); margin-right:calc(-1 * var(--space-4, 1rem)); padding:0 1rem; }
  .feat-details.open { padding:.8rem 1rem .85rem; }
  .feat-details .long { color:var(--gray-700); line-height:1.55; word-spacing:-.01rem; }
.feat-main .m { color: var(--gray-650, #64748b); font-size:1.02rem; line-height:1.5; }
  .feat-thumb { position:relative; flex: 0 0 min(380px, 28%); width: min(380px, 28%); max-width: 420px; aspect-ratio: 16/9; border-radius:12px; overflow:hidden; background: rgba(255, 255, 255, 0.662); align-self:flex-start; box-shadow: var(--elev-1); border: 2px solid var(--gray-100);}
  /* Featured row thumbnails: show full image without cropping */
  .feat-thumb img, .feat-thumb picture { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; display:block; background: var(--gray-200); }
  .feat-thumb .actions { width:100%; display:flex; justify-content:flex-end; }
  .feat-div { display:none; }
  .feat-bottom { border-top:1px solid var(--gray-200); padding-top: var(--space-3); display:flex; align-items:center; justify-content:space-between; gap: var(--u-gap); flex-wrap:wrap; }
  .feat-bottom .feat-meta { color: var(--gray-600); font-weight:700; display:inline-flex; align-items:center; gap:.5rem; }
  .feat-bottom .feat-actions { display:flex; align-items:center; gap:.45rem; }
  /* (removed gradient meta bar per updated design) */
  .feat-rail { margin-top:.35rem; }
  /* Mini text card variant below the main layout */
  .feat-mini { border:2px solid white; border-radius: 12px; background:hsla(220, 14.3%, 95.9%, 0.66); padding:.6rem .7rem; display:flex; flex-direction:column; gap:.25rem; transition: transform .13s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; cursor:pointer; will-change: transform; }
  .feat-mini:hover, .feat-mini.reveal:hover, .feat-mini.reveal.in:hover { transform: translateY(-2px) !important; background:hsla(220, 14%, 96%, 0.738); box-shadow: 0 10px 22px rgba(2,6,23,.12); border-color: var(--primary-600); transition-delay: 0s !important; }
  .feat-mini .title { font-weight:800; letter-spacing:-.01em; }
  .feat-mini .meta { color: var(--gray-600); font-weight:700; font-size:.85rem; }
  /* Featured overlay layout */
  .feat-overlay .fo-top { display:grid; grid-template-columns: 1fr min(46%, 520px); gap: .75rem; align-items:start; }
  .feat-overlay .fo-thumb img { width:100%; height:auto; object-fit:contain; border-radius:12px; display:block; }
  .feat-overlay .fo-div { border:0; border-top:1px solid var(--gray-200); margin:.9rem 0 .8rem; }
  .feat-overlay .fo-bottom { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
  /* responsive rules moved to mobile.css */

  /* Calendar (News page) */
  .calendar-wrap { margin: .75rem auto 1rem; background: var(--surface); border:1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-base); padding:.75rem; }
  .calendar-head { display:flex; align-items:center; justify-content:space-between; margin:.25rem .25rem .5rem; }
  .calendar-title { font-size:1.25rem; font-weight:900; letter-spacing:-.01em; margin:0; }
  .calendar-controls { display:inline-flex; gap:.35rem; align-items:center; }
  .cal-btn { padding:.35rem .65rem; border:1px solid var(--gray-300); background: var(--surface); color: var(--gray-800); border-radius:10px; font-weight:600; cursor:pointer; }
  .cal-btn:hover { background: var(--gray-50); }
  .calendar { padding:.25rem; }
  .cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:.25rem; }
  .cal-wd { text-align:center; font-weight:800; color: var(--gray-600); padding:.35rem 0; letter-spacing:.02em; font-size:.85rem; }
  .cal-day { min-height:84px; background: var(--surface); border:1px solid var(--gray-200); border-radius:10px; padding:.4rem; display:flex; flex-direction:column; gap:.35rem; position:relative; }
  .cal-day .date { font-weight:900; color: var(--gray-900); font-size:.95rem; }
  .cal-day.outside { opacity:.6; background: var(--gray-50); }
  .cal-day .events { display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; margin-top:auto; }
  .cal-dot { width:8px; height:8px; border-radius:999px; background: var(--primary-600); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-600) 28%, transparent); }
  .legend { display:flex; align-items:center; gap:.35rem; color: var(--gray-600); font-size:.85rem; margin:.5rem .25rem 0; }
  .legend .dot { width:10px; height:10px; border-radius:999px; background: var(--primary-600); }
  /* responsive rule moved to mobile.css */
  [data-theme="dark"] .calendar-wrap { background: var(--gray-800); border-color: var(--gray-700); }
  [data-theme="dark"] .cal-day { background: var(--gray-800); border-color: var(--gray-700); }
  [data-theme="dark"] .cal-day.outside { background: var(--gray-850, #0b1220); }

  /* Curated sections (inspired by resources page, with distinct card styles per category) */
  .news-curated { max-width: 1320px; margin: .75rem auto 1rem; padding: 0 1.5rem; display: grid; gap: 1rem; box-sizing: border-box; }
  /* responsive padding rule moved to mobile.css */
  .news-curated .curated-section { display: grid; gap: .5rem; }
  .news-curated .curated-header { display:flex; align-items:center; gap:.5rem; }
  .news-curated .curated-header h2 { margin:0; font-size:1.15rem; font-weight:900; letter-spacing:-.01em; }
  .news-curated .curated-header .sub { color: var(--gray-600); font-size:.95rem; font-weight:600; }
  .news-curated .row-hscroll { display:flex; gap:.6rem; overflow-x:auto; padding:.4rem 0 .6rem; scroll-snap-type:x proximity; scrollbar-width: thin; }
  .news-curated .row-hscroll::-webkit-scrollbar { height: 6px; }
  .news-curated .row-hscroll::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

  /* Updates cards – compact, text-forward */
  .news-card { cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .news-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2,6,23,.12); }
  .news-card--updates { min-width: 300px; max-width: 360px; border:1px solid var(--gray-200); border-radius: 12px; background: var(--surface); padding:.75rem .85rem; display:flex; flex-direction:column; gap:.4rem; scroll-snap-align:start; }
  .news-card--updates .meta { color: var(--gray-600); font-size:.85rem; font-weight:700; }
  .news-card--updates .title { font-weight:900; letter-spacing:-.01em; }
  .news-card--updates .summary { color: var(--gray-700); }

  /* Events cards – date badge and border accent */
  .news-card--events { min-width: 320px; max-width: 400px; border-left: 4px solid var(--primary-600); border:1px solid var(--gray-200); border-left-color: var(--primary-600); border-radius: 10px; background: var(--surface); padding:.75rem .85rem; display:flex; gap:.75rem; align-items:flex-start; scroll-snap-align:start; }
  .news-card--events .date { min-width: 58px; text-align:center; border:1px solid var(--gray-200); border-radius:10px; padding:.35rem .4rem; font-weight:900; color: var(--gray-800); background: var(--gray-50); }
  .news-card--events .evt { display:flex; flex-direction:column; gap:.25rem; }
  .news-card--events .evt .title { font-weight:900; letter-spacing:-.01em; }
  .news-card--events .evt .meta { color: var(--gray-600); font-weight:700; font-size:.85rem; }

  /* Blog cards – image-cover style */
  .news-card--blog { min-width: 260px; max-width: 320px; border:1px solid var(--gray-200); border-radius: 12px; background: var(--surface); overflow:hidden; scroll-snap-align:start; }
  .news-card--blog .cv { position:relative; aspect-ratio: 16/9; background: var(--gray-100); }
  .news-card--blog .cv img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .news-card--blog .bd { padding:.6rem .7rem; display:flex; flex-direction:column; gap:.25rem; }
  .news-card--blog .title { font-weight:800; }
  .news-card--blog .meta { color: var(--gray-600); font-size:.85rem; font-weight:700; }
  /* responsive padding rule moved to mobile.css */

  

  .toolbar { position: sticky; top: 86px; z-index: 50; background: var(--gray-50); border:2px solid var(--gray-300); border-radius:12px; padding:.6rem .85rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom: 1rem; box-shadow: 0 12px 24px -20px rgba(2,6,23,.3); font-size: 1rem; }
  .filters { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
  .chips { display:flex; gap:.35rem; flex-wrap:wrap; }
  .chip { display:inline-block; padding:.2rem .5rem; border:1px solid var(--gray-300); background: var(--surface); color: var(--gray-700); border-radius:999px; font-weight:700; font-size:.85rem; line-height:1; }
  .media-chips { display:inline-flex; gap:.35rem; flex-wrap:wrap; vertical-align: middle; }
  /* Media chips */
  .chip.media-video { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
  .chip.media-score-video { background: #f3e8ff; border-color: #e9d5ff; color: #7c3aed; }
  .chip.media-audio { background: #dbeafe; border-color: #bfdbfe; color: #1e3a8a; }
.chip.media-spotify,
.chip.media-bandcamp,
.chip.media-streaming { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
  [data-theme="dark"] .chip { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-100); }
  /* Match filter button group look from media/catalog */
  .btn-group { display:inline-flex; gap:.35rem; background: transparent; border:0; }
  .btn-group button { padding:.55rem .9rem; background: var(--surface); border:0; cursor:pointer; color: var(--gray-700); font-weight:600; border:1px solid var(--gray-200); border-radius:10px; }
  .btn-group button:hover { background: var(--gray-50); }
  .btn-group button.active { color:white; background: color-mix(in srgb, var(--gray-900) 90%, white); }

  .view-toggles { display:flex; gap:.35rem; align-items:center; }
  /* seg-toggle removed */
  /* Filters — match Media page frosted glass rail exactly */
  .filter-panel { position: sticky; top: 23px; z-index: 400; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); overflow: visible; scroll-margin-top: calc(var(--nav-height, 96px) + 20px); padding: 1rem 1.5rem; isolation:isolate; margin-top: 0; }
  [data-theme="dark"] .filter-panel { background: var(--gray-800); border-top-color: var(--gray-700); border-bottom-color: var(--gray-700); box-shadow: 0 18px 34px -24px rgba(0,0,0,.7); }
  /* Apply the frosted rail styling; enable full-bleed background via pseudo-element */
  #newsFilters.u-glass-rail { background: none; border-top-color: var(--glass-border); border-bottom-color: var(--glass-border);  }
  #newsFilters.filter-panel::before { content:""; position: absolute; top:0; bottom:0; left:50%; right:50%; margin-left: -50vw; margin-right: -50vw; background: rgba(41, 47, 61, 0.329); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); -webkit-backdrop-filter: saturate(1.1) blur(calc(var(--glass-blur) - 8px)); backdrop-filter: saturate(1.1) blur(calc(var(--glass-blur) - 8px)); box-shadow: var(--glass-shadow); z-index: -1; }
  /* Inner frosted content matches Media */
  #newsFilters .filter-content.u-glass-bare.u-glass-soft { background: rgba(255, 255, 255, 0.25); border-bottom-left-radius:12px; border-bottom-right-radius:12px; border-top: 2px solid white;}
  .filter-content { max-width: 1650px; margin: 0 auto; padding: .6rem 1.5rem .7rem; display:flex; flex-direction: column; gap:.6rem; overflow: visible; box-sizing: border-box; }
  .row { display:flex; align-items:center; justify-content:space-between; gap: .75rem; flex-wrap: wrap; }
  .btn-group { display:inline-flex; gap:.35rem; background: transparent; border:0; }
  .btn-group button { padding:.55rem .9rem; background: var(--surface); border:0; cursor:pointer; color: var(--gray-700); font-weight:500; border:1px solid var(--gray-200); border-radius:10px; }
  .btn-group button.active { color:white; font-weight:500; background: color-mix(in srgb, var(--gray-900) 90%, white); }
  .btn-group button:not(.active):hover { background: var(--gray-50); }
  .filters-r1 { align-items:center; }
  .filters-r1 .r1-right { margin-left:auto; display:flex; align-items:center; gap:.5rem; }
  .filters-r2 { align-items:flex-start; justify-content:space-between; }
  .filters-r2 .l { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
  .filters-r2 .r { display:flex; gap:.5rem; align-items:center; }
  /* Clear-all button padding to match media.html */
  /* Match Music Catalog clear-all button styling */
  #newsClearBtn.btn { padding:.5rem .9rem; border-radius:10px; border:1px solid var(--gray-300); background: var(--surface); color: var(--gray-800); font-weight:600; font-size:.95rem; letter-spacing:-0.005em; }
  #newsClearBtn.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(2,6,23,.08); background: var(--gray-50); }
  /* legacy local styles removed in favor of .u-toggle */
  .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
  .card { background: var(--surface); border:1px solid var(--gray-200); border-radius: 14px; overflow:hidden; box-shadow: var(--shadow-base); display:flex; flex-direction:column; cursor:pointer; transform: translateZ(0); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; position: relative; }
  .card::after { content:""; position:absolute; inset:0; background: radial-gradient(400px 80px at var(--x,50%) var(--y,50%), rgba(2,6,23,.08), transparent 40%); opacity:0; transition: opacity .2s ease; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(2,6,23,.15); border-color: var(--gray-300); }
  .card:hover::after { opacity: 1; }
  .cover { position:relative; aspect-ratio: 16/9; background: var(--gray-100); }
  .cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
  .body { padding:.9rem 1rem; display:flex; flex-direction:column; gap:.45rem; }
  .title { font-weight:900; color: var(--gray-900); letter-spacing:-.01em; }
  .summary { color: var(--gray-700); }
  .meta { color: var(--gray-600); font-size:.85rem; }
  .actions { display:flex; gap:.5rem; margin-top:auto; }
  .btn { padding:.45rem .75rem; border-radius:999px; border:1px solid var(--gray-300); background:#fff; color:var(--gray-800); text-decoration:none; font-weight:600; transition: transform .12s ease, box-shadow .12s ease; }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(2,6,23,.12); }
  .btn.primary { background: var(--gray-900); color:#fff; border-color: var(--gray-900); }
  .btn.square { border-radius: 8px; }
  /* Divider — match media page */
  .divider { height:1px; background: var(--gray-200); border:0; margin:.4rem 0; }
  /* Mobile sizing: make R1 right side text smaller */
  @media (max-width: 768px){
    #newsFilters .filters-r1 .r1-right { gap:.4rem; }
    #newsFilters #newsCount,
    #newsFilters .filters-r1 .r1-right label { font-size:.88rem; }
    #newsFilters .filter-trigger .u-toggle { font-size:.88rem; }
    #newsClearBtn.btn { font-size:.88rem; padding:.45rem .75rem; }
  }
  /* Featured footer action button: dark, prominent */
  .feat-bottom .feat-actions .btn.square {
    background: var(--gray-900);
    color:#fff;
    border-color: var(--gray-900);
    border-radius:12px;
    padding:.55rem 1rem;
  }
  .feat-bottom .feat-actions .btn.square:hover { filter:brightness(1.03); transform: translateY(-1px); box-shadow: 0 8px 16px rgba(2,6,23,.18); }
  /* Make the results (ledger) Read Full Article button slightly smaller */
  .ledger .row-actions .btn.primary { font-size:.9rem; padding:.45rem .7rem; }
  #featMeta.muted { color: var(--gray-100); }
  .muted { color: var(--gray-500); }

  .featured-wrap .media-chips { margin-left:.4rem; }

  /* Dropdown (tags filter) */
  .dropdown { position: relative; }
  .dropdown-btn { min-width: 160px; padding: .5rem .75rem; border:1px solid var(--gray-300); border-radius: 10px; background: var(--gray-50); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.5rem; color: var(--gray-800); font-size:.98rem; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .dropdown-btn::after { content:""; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid var(--gray-600); margin-left:.5rem; transition: transform .15s ease; }
  .dropdown-btn:hover { border-color: var(--primary-300); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }
  .dropdown-btn.active { border-color: var(--primary-400); background: var(--surface); color: var(--gray-800); }
  .dropdown.show .dropdown-btn::after { transform: rotate(180deg); }
  .dropdown-menu { position:absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border:1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); display:none; visibility:hidden; opacity:0; transition: opacity .12s ease; max-height: 300px; overflow:auto; z-index: 2000; min-width: 220px; padding:.35rem 0; }
  .dropdown.show .dropdown-menu { display:block; visibility:visible; opacity:1; }
  .opt { padding:.5rem .75rem; cursor:pointer; color: var(--gray-800); display:flex; align-items:center; gap:.5rem; border-radius:8px; margin:0.125rem .5rem; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
  .opt:hover { background: var(--gray-100); }
  .opt.selected { background: var(--gray-100); color: var(--gray-900); font-weight:600; }
  .ck { display:inline-block; width:16px; height:16px; border-radius:4px; border:1.5px solid var(--gray-900); background:#fff; }
  .ck.on { position:relative; }
  .ck.on::after { content:""; position:absolute; left:3px; top:4px; width:8px; height:4px; border:2px solid var(--gray-900); border-top:0; border-right:0; transform: rotate(-45deg); }

  /* Subtle item reveal animation for dropdowns */
  @keyframes dropdownItemIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .dropdown.show .dropdown-menu .opt { animation: dropdownItemIn .14s ease both; animation-delay: .10s; }
    .dropdown.show .dropdown-menu .opt:nth-child(1) { animation-delay: 0s; }
    .dropdown.show .dropdown-menu .opt:nth-child(2) { animation-delay: .02s; }
    .dropdown.show .dropdown-menu .opt:nth-child(3) { animation-delay: .04s; }
    .dropdown.show .dropdown-menu .opt:nth-child(4) { animation-delay: .06s; }
    .dropdown.show .dropdown-menu .opt:nth-child(5) { animation-delay: .08s; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dropdown.show .dropdown-menu .opt { animation: none !important; }
  }

  /* Ledger-style list (open, minimal) */
  .ledger { display:block; max-width: 1650px; margin: 0 auto; }
  .ledger-row { border:3px solid white; border-radius: 12px; background: var(--gray-200); box-shadow: var(--shadow-base); margin: 0 0 .6rem; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; }
  .ledger-row:hover { box-shadow: 0 10px 24px rgba(2,6,23,.12); border-color: var(--primary-600); }
  .ledger-head { display:grid; grid-template-columns: 116px minmax(0, 1fr) 270px; align-items:start; gap:.75rem; padding: .8rem 1rem; }
  .ledger-row.no-thumb .ledger-summary { grid-column:2; }
  .ledger-date { grid-column:3; width:100%; color: var(--gray-600); font-weight:700; letter-spacing:.02em; justify-self:stretch; align-self:start; display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; text-align:right; }
  .ledger-summary { grid-column:2; align-self:start; display:flex; flex-direction:column; gap:.3rem; }
  .ledger-summary .title { margin:0; font-size:1.12rem; }
  .ledger-summary .excerpt { color: var(--gray-600); font-size:1rem; word-spacing: -0.01rem;}
  .ledger-thumb { width: 116px; height: 72px; border: 2px solid var(--gray-50); border-radius: 10px; overflow:hidden; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }
  .ledger-head .ledger-thumb { grid-column:1; justify-self:start; align-self:start; border: 2px solid var(--gray-50);}
  .ledger-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  /* Keep the image column reserved when a row has no thumbnail so every headline aligns. */
  .ledger-summary .media-chips { margin-top:.25rem; }
  /* Ensure header actions area aligns to the right for future multiple links */
  .ledger-actions { width:100%; display:flex; gap:.55rem; align-items:center; justify-content:flex-end; }
  .ledger-actions .btn { margin:0; white-space:nowrap; }
  .ledger-details { padding:0 1rem; }
  .ledger-details.open { padding:.8rem 1rem .9rem; }
  .ledger-details .long { color:var(--gray-700); line-height:1.55; word-spacing:-.01rem; }
  @media (prefers-reduced-motion: reduce) {
    .inline-details, .inline-disclosure .toggle-icon { transition:none !important; }
  }

  /* Compact search */
  .search-compact { display:flex; align-items:center; gap:.5rem; }
  .icon-btn { background: none; border: 0; padding: 0; line-height: 0; cursor: pointer; color: #475569; }
  .icon-btn:hover { color: #0f172a; }
  .icon-btn:focus-visible { outline: 2px solid rgba(59,130,246,.45); outline-offset: 2px; border-radius: 6px; }
  #newsSearch { width:0; opacity:0; padding:.6rem 0; border:1px solid transparent; transition: width .2s ease, opacity .15s ease, padding .2s ease, border-color .2s ease; border-radius:10px; }
  #newsSearch::placeholder { color: var(--gray-500); }
  .search-compact.open #newsSearch { width:260px; opacity:1; padding:.6rem .75rem; border-color: var(--gray-300); }
  /* White search icon within the news filter panel */
  .news-search-section .filter-panel .search-compact .icon-btn { color: #fff; }
  .news-search-section .filter-panel .search-compact .icon-btn:hover { color: #e5e7eb; }
  .news-search-section .filter-panel .search-compact .icon-btn svg,
  .news-search-section .filter-panel .search-compact .icon-btn path { stroke: #fff !important; }
  @media (max-width: 520px){ .search-compact.open #newsSearch { width:200px; } }

  /* Dark mode */
  [data-theme="dark"] body { background: var(--gray-900); }
  [data-theme="dark"] .card, [data-theme="dark"] .featured-wrap { background: var(--gray-800); border-color: var(--gray-700); }
  [data-theme="dark"] .title { color: var(--gray-100); }
  [data-theme="dark"] .summary { color: var(--gray-300); }
  [data-theme="dark"] .meta { color: var(--gray-400); }
  [data-theme="dark"] .btn { background: var(--gray-800); color: var(--gray-100); border-color: var(--gray-700); }
  [data-theme="dark"] .btn.primary { background: var(--gray-700); border-color: var(--gray-700); }
  [data-theme="dark"] .toolbar { background: var(--gray-800); border-color: var(--gray-600); box-shadow: 0 18px 34px -24px rgba(0,0,0,.7); border-width:2px; }
  [data-theme="dark"] .dropdown-btn, [data-theme="dark"] .dropdown-menu { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-100); }
  [data-theme="dark"] .opt:hover { background: var(--gray-700); }
  [data-theme="dark"] .seg-toggle { border-color: var(--gray-700); }
  [data-theme="dark"] .feat-overlay .fo-div { border-top-color: var(--gray-700); }
  [data-theme="dark"] .feat-content .excerpt { color: var(--gray-400); word-spacing: -0.01rem;}
  /* Quick Read Modal */
  .modal { position: fixed; inset:0; background: rgba(2,6,23,.78); display:none; align-items:center; justify-content:center; z-index: 5000; padding: 1rem; }
  .modal.show { display:flex; }
  .modal-card { width:min(1400px, 90vw); max-height: 92vh; background: var(--gray-50); border:1px solid var(--gray-300); border-radius: 16px; box-shadow: 0 24px 64px rgba(2,6,23,.35); display:flex; flex-direction:column; overflow:hidden; backdrop-filter: none; position: relative; }
  .modal-head { padding:.85rem 1rem; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; }
  .modal-title { font-weight:900; letter-spacing:-.01em; font-size:1.15rem; margin-left:.25rem; }
  .modal-body { padding: 1rem; overflow:auto; color: var(--gray-800); background: var(--gray-50); }
  .modal-close { position:absolute; top:6px; right:10px; background: var(--gray-50); border:1px solid var(--gray-300); border-radius:12px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; line-height:1; font-size:16px; cursor:pointer; box-shadow: 0 4px 12px rgba(2,6,23,.12); transition: background .15s ease, border-color .15s ease; }
  .modal-close:hover { background: var(--gray-100); border-color: var(--gray-400); }
  [data-theme="dark"] .modal-card { background: var(--gray-800); border-color: var(--gray-700); }
  [data-theme="dark"] .modal-head { border-color: var(--gray-700); }
  [data-theme="dark"] .modal-body { color: var(--gray-100); background: var(--gray-800); }
  [data-theme="dark"] .modal-close { background: var(--gray-800); border-color: var(--gray-600); color: var(--gray-100); }

  /* Reveal animation */
  .reveal { opacity:0; transform: var(--reveal-transform, translateY(4px)); transition: opacity .20s ease, transform .20s ease; transition-delay: var(--reveal-delay, 0s); }
  .reveal.in { opacity:1; transform: none; }
  /* Specialized entrance for cover visuals */
  .feat-card .cv.reveal { --reveal-transform: translateY(6px) scale(.992); }

  /* Featured carousel rail */
  .feat-rail { display:flex; gap:.6rem; overflow-x:scroll; padding:.6rem .6rem .8rem; scroll-snap-type:x proximity; scrollbar-width: thin; scrollbar-gutter: stable both-edges; scrollbar-color: var(--gray-400) transparent; }
  .feat-rail::-webkit-scrollbar { height: 6px; }
  .feat-rail::-webkit-scrollbar-track, .feat-rail::-webkit-scrollbar-track-piece, .feat-rail::-webkit-scrollbar-corner { background: transparent; }
  .feat-rail::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
  .feat-rail::-webkit-scrollbar-button,
  .feat-rail::-webkit-scrollbar-button:single-button,
  .feat-rail::-webkit-scrollbar-button:horizontal:decrement,
  .feat-rail::-webkit-scrollbar-button:horizontal:increment { width:0 !important; height:0 !important; display:none !important; }
  .feat-card { min-width: 240px; max-width: 280px; border:2px solid white; border-radius: 12px; overflow:hidden; background: var(--surface); box-shadow: 0 8px 18px rgba(2,6,23,.08); scroll-snap-align:start; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .feat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(2,6,23,.15); border-color: var(--primary-600); }
  .feat-card .cv { position:relative; aspect-ratio: 16/9; background: var(--gray-100); }
  .feat-card .cv img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  /* Hover video preview container */
  .feat-card .cv .cv-preview { position:absolute; inset:0; border-radius: inherit; overflow:hidden; }
  .feat-card .cv .cv-preview iframe,
  .feat-card .cv .cv-preview video { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; pointer-events:none; border-radius: inherit; }
  .feat-card .bd { padding:.6rem .7rem; display:flex; flex-direction:column; gap:.25rem; }
  /* Overlay variant for featured cards */
  .feat-card.overlay { position: relative; color: #fff; }
  /* Nicer placeholder background for overlay cards when no image is available */
  .feat-card.overlay .cv {
    background:
      radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--primary-500) 10%, transparent), transparent 60%),
      repeating-linear-gradient(135deg, color-mix(in srgb, var(--gray-400) 6%, transparent) 0 2px, transparent 2px 12px),
      linear-gradient(180deg, var(--gray-100), var(--gray-200));
    background-blend-mode: screen, normal, multiply;
  }
  /* Stronger, brand-tinted placeholder when there is no image element */
  .feat-card.overlay .cv:empty {
    background:
      radial-gradient(140% 100% at 50% 120%, color-mix(in srgb, var(--primary-700) 28%, transparent), transparent 62%),
      radial-gradient(110% 80% at 0% 0%, color-mix(in srgb, var(--primary-400) 22%, transparent), transparent 60%),
      radial-gradient(110% 80% at 100% 10%, color-mix(in srgb, var(--primary-300) 16%, transparent), transparent 60%),
      repeating-linear-gradient(135deg, color-mix(in srgb, var(--primary-700) 14%, transparent) 0 2px, transparent 2px 12px),
      linear-gradient(180deg, color-mix(in srgb, var(--primary-100) 85%, white), color-mix(in srgb, var(--primary-200) 80%, white));
    background-blend-mode: screen, screen, screen, normal, multiply;
  }
  .feat-card.overlay .cv::after { content:""; position:absolute; inset:0; background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--gray-900) 36%, transparent) 0%,
      color-mix(in srgb, var(--gray-900) 66%, transparent) 60%,
      color-mix(in srgb, var(--gray-900) 92%, transparent) 100%
    ); }
  /* Slightly stronger overlay for empty placeholder to improve title contrast */
  .feat-card.overlay .cv:empty::after { background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--gray-900) 42%, transparent) 0%,
      color-mix(in srgb, var(--gray-900) 72%, transparent) 60%,
      color-mix(in srgb, var(--gray-900) 94%, transparent) 100%
    ); }
  .feat-card.overlay .ovr { position:absolute; left:.6rem; right:.6rem; bottom:.95rem; z-index:2; display:flex; flex-direction:column; gap:.25rem; }
  /* Top-right badge area for media chips on blog/release cards */
  .feat-card.overlay .ovr-chips { position:absolute; top:.6rem; right:.6rem; z-index:3; display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; }
  /* Preserve original darker overlay chip colors (revert to existing design) */
  .feat-card.overlay .ovr-chips .chip { background: rgba(17,24,39,.9); color: #fff; border-color: rgba(255,255,255,.35); }
  .feat-card.overlay .ovr-chips .chip.media-video { background: rgba(153,27,27,.88); border-color: rgba(255,255,255,.35); }
  .feat-card.overlay .ovr-chips .chip.media-score-video { background: rgba(88,28,135,.85); border-color: rgba(255,255,255,.35); }
  .feat-card.overlay .ovr-chips .chip.media-audio { background: rgba(30,58,138,.88); border-color: rgba(255,255,255,.35); }
.feat-card.overlay .ovr-chips .chip.media-spotify,
.feat-card.overlay .ovr-chips .chip.media-bandcamp,
.feat-card.overlay .ovr-chips .chip.media-streaming { background: rgba(22,101,52,.88); border-color: rgba(255,255,255,.35); }
  .feat-card.overlay .ovr .title { color:#fff; font-weight:900; letter-spacing:-.01em; line-height:1.22; font-size: clamp(.95rem, 0.90rem + .30vw, 1.25rem); text-shadow: 0 1px 6px rgba(2,6,23,.35); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .feat-card.overlay .ovr .meta { font-size:.95rem; color: rgba(255,255,255,.92); text-shadow: 0 1px 4px rgba(2,6,23,.25); }
  /* Hover CTA */
  .feat-card.overlay .learn-more { display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start; padding:.4rem .7rem; border-radius:10px; border:1px solid rgba(255,255,255,.35); background: rgba(2,6,23,.5); color: #fff; font-weight:700; font-size:.9rem; text-decoration:none; opacity:0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, background-color .15s ease, border-color .15s ease; }
  .feat-card.overlay:hover .learn-more, .feat-card.overlay:focus-within .learn-more { opacity:1; transform: translateY(0); }
  .feat-card.overlay .learn-more:hover { background: rgba(2,6,23,.65); border-color: rgba(255,255,255,.5); }
  .feat-card.overlay .ovr-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; margin-top:.2rem; }
  .feat-card.overlay .ovr-row .tags { display:flex; gap:.3rem; flex-wrap:wrap; margin-right:auto; }
  /* New Releases styles removed from news page */
   .composition-featured { display:flex; gap: .65rem; align-items:flex-start; }
   @media (max-width: 800px){ .composition-featured { align-items:flex-start; } }
  .composition-image { flex: 0 0 240px; max-width: 240px; }
  .composition-image img { width:100%; height:auto; border-radius: 8px; background: transparent; object-fit: contain; }
  .composition-details { flex:1; display:flex; flex-direction:column; gap:.5rem; }
  .title-badge-container { display:flex; align-items:center; justify-content:space-between; gap: .75rem; }
  .card-badge { display:inline-block; padding:.3rem .6rem; border-radius:999px; font-weight:700; font-size:.75rem; color:#fff; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); }
  .composition-title { font-size:1.25rem; font-weight:900; letter-spacing:-.01em; margin:0; color: var(--gray-900); }
  .composition-instrumentation { margin:0; color: var(--gray-600); font-style: italic; font-size:.95rem; }
  .primary-actions-container { display:flex; gap:.75rem; align-items:center; }
  .btn-primary.learn-more-btn, .btn-buy {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    padding:.5rem .85rem; border-radius:10px; border:1px solid var(--gray-300);
    background:#fff; color: var(--gray-800); font-weight:700; font-size:.92rem; cursor:pointer;
    line-height:1.1;
  }
  .btn-primary.learn-more-btn:hover, .btn-buy:hover { background: var(--gray-50); }
  .btn-buy { background: var(--primary-600); border-color: var(--primary-600); color:#fff; }
  /* Free to download state (green gradient) */
  .btn-buy.free { 
    background: linear-gradient(135deg, var(--success-500), var(--success-700));
    border-color: var(--success-700);
    color: #fff;
  }
  .btn-buy.free:hover { filter: brightness(1.03); }
  .primary-actions-container .btn-buy[style*="opacity: 0.6"] { background: var(--gray-300); border-color: var(--gray-300); color:#fff; }
  .composition-description { color: var(--gray-800); margin-top:.2rem; font-size:.96rem; }
  .composition-actions { display:flex; gap:.75rem; align-items:center; margin-top:.35rem; }
  .btn-listen, .btn-score { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; border-radius:999px; border:1px solid var(--gray-300); background: var(--gray-50); color: var(--gray-700); font-weight:700; }
  .new-release-audio-container .audio-nav-btn { padding:.35rem .7rem; border-radius:8px; border:1px solid var(--gray-300); background:#fff; color:var(--gray-700); }
  .new-release-carousel-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .75rem 1rem 1rem; }
  .new-release-divider { height:3px; background: linear-gradient(90deg, transparent, var(--gray-200), transparent); margin:.5rem 0; border-radius:999px; }
  .new-release-carousel-nav .nav-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border:1px solid var(--gray-300); background:#5a78c9; color:#fff; border-radius:10px; cursor:pointer; }
  .new-release-carousel-nav .nav-btn .nav-icon { opacity:.9; }
  .carousel-dots { display:flex; gap:.5rem; }
  .carousel-dot { width:10px; height:10px; border-radius:999px; background: var(--gray-300); transition: transform .15s ease; }
  .carousel-dot.active { background: var(--primary-500); transform: scale(1.15); }
  .composition-title-nav { display:flex; gap:.5rem; flex-wrap:wrap; padding: .25rem 1rem 1rem; }
  .composition-title-link { font-size:.9rem; color: var(--gray-700); padding:.35rem .6rem; border-radius:999px; background: var(--gray-100); cursor:pointer; }
  .composition-title-link.active { background: var(--primary-100); color: var(--primary-700); font-weight:700; }

  /* ===== NEWS SECTION BACKGROUNDS ===== */
  /* Featured News Section - Gradient from gray-700 to gray-800 */
  .news-featured-section {
    background: linear-gradient(180deg, var(--gray-700) 0%, var(--gray-800) 100%);
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  /* Search News Section - Solid gray-400 background */
  .news-search-section {
    background: linear-gradient(180deg, var(--gray-600), var(--gray-700)  );
    padding: 0;
  }

  /* Ensure the inner containers maintain their max-widths and formatting */
  .news-featured-section .container,
  .news-search-section .container {
    max-width: 1650px; /* Match existing featured-wrap max-width */
  }

  /* Remove extra top/bottom padding gaps (keep section background color) */
  .news-featured-section .container,
  .news-featured-section .u-container,
  .news-featured-section main.container,
  .news-search-section .container,
  .news-search-section .u-container,
  .news-search-section main.container {
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
  }

  /* Eliminate top/bottom lips by neutralizing collapsing margins */
  .news-featured-section .container > :first-child,
  .news-featured-section .u-container > :first-child,
  .news-featured-section main.container > :first-child { margin-top: 0 !important; }
  .news-featured-section .container > :last-child,
  .news-featured-section .u-container > :last-child,
  .news-featured-section main.container > :last-child { margin-bottom: 0 !important; }

  .news-search-section .container > :first-child,
  .news-search-section .u-container > :first-child,
  .news-search-section main.container > :first-child { margin-top: 0 !important; }
  .news-search-section .container > :last-child,
  .news-search-section .u-container > :last-child,
  .news-search-section main.container > :last-child { margin-bottom: 0 !important; }

  /* Explicitly zero margins on key wrappers that introduced outer gaps */
  .news-featured-section .featured-wrap { margin-top: 0 !important; margin-bottom: 0 !important; }
  .news-featured-section .calendar-wrap { margin-top: 0 !important; margin-bottom: 0 !important; }
  .news-search-section .filter-panel { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* Vertical breathing room specifically for results ledger */
  .news-search-section .ledger { padding-top: 1rem; padding-bottom: 2rem; }

  /* Dark mode support for section backgrounds */
  [data-theme="dark"] .news-featured-section {
    background: linear-gradient(180deg, var(--gray-700) 0%, var(--gray-800) 100%);
  }

  [data-theme="dark"] .news-search-section {
    background: var(--gray-400);
  }