/* /trends/ on the shared brand system (Q-4, 8 Oct 2026).
   Loaded after landing-system.css on every /trends/ page and the weekly-report hub.
   Restores the homepage cream and ink palette that editorial.css turns white, sets
   TikTok Sans display weights, and gives data tables the .ls-table look. Mobile table
   behaviour (Q-5) stays in guides.css; nothing here changes column visibility. */

main.trends-ls{--cream:var(--ls-cream);--paper:var(--ls-paper);--ink:var(--ls-ink);--text:var(--ls-text);--muted:var(--ls-muted);--line:var(--ls-line);--blue-tint:var(--ls-blue-tint);--blue-line:#c9d6ee;
  background:var(--ls-cream);color:var(--ls-text);font-family:var(--ls-font);overflow-x:clip}
main.trends-ls .breadcrumbs{color:var(--ls-muted)}

/* hero */
main.trends-ls .editorial-hero .eyebrow{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ls-ink);background:var(--ls-paper);border:1.5px solid var(--ls-ink);border-radius:999px;padding:6px 14px}
main.trends-ls .editorial-hero h1{font-family:var(--ls-font);font-weight:800;letter-spacing:-.035em;line-height:1.03;color:var(--ls-ink)}
main.trends-ls .editorial-hero .lead{color:var(--ls-text)}
main.trends-ls .article-cover{border-radius:var(--ls-radius);overflow:hidden}

/* reading column */
main.trends-ls .article-body>h2,main.trends-ls .article-body h2{font-family:var(--ls-font);font-weight:800;letter-spacing:-.03em;color:var(--ls-ink)}
main.trends-ls .article-body h3{font-family:var(--ls-font);font-weight:700;color:var(--ls-ink)}
main.trends-ls .takeaways>div{background:var(--ls-mint-tint);border-radius:var(--ls-radius);padding:24px 26px}
main.trends-ls .key-stats-box{background:var(--ls-lavender-tint);border:0;border-radius:var(--ls-radius)}
main.trends-ls .contents{border-color:var(--ls-line)}
main.trends-ls .sold-label{background:var(--ls-yellow-tint);border-radius:var(--ls-radius-sm);padding:16px 20px;font-size:16px}
main.trends-ls .new-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ls-yellow);border-radius:999px;padding:2px 8px;vertical-align:middle}

/* data tables: the .ls-table look, wider than the reading column on desktop */
main.trends-ls .article-body .table-wrap{background:var(--ls-paper);border:1.5px solid var(--ls-line);border-radius:var(--ls-radius-sm)}
main.trends-ls table.data{font-family:var(--ls-font);font-variant-numeric:tabular-nums}
main.trends-ls table.data th{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ls-muted);background:var(--ls-cream);border-bottom:1.5px solid var(--ls-line)}
main.trends-ls table.data td{border-bottom:1px solid var(--ls-line)}
main.trends-ls table.data tr:last-child td{border-bottom:0}
main.trends-ls table.data th.num,main.trends-ls table.data td.num{text-align:right}
main.trends-ls table.data td span.cat{display:block;font-size:13px;font-weight:400;color:var(--ls-muted);margin-top:4px}
main.trends-ls table.data td.kind{font-size:14px;color:var(--ls-muted)}
main.trends-ls table.data a{color:var(--ls-blue-deep)}
main.trends-ls .source-note,main.trends-ls .data-note{font-size:14px;color:var(--ls-muted)}
@media (min-width:1100px){
  main.trends-ls .article-body .table-wrap{margin-left:-90px;margin-right:-90px}
}

/* the /trends/ hub grid: every /trends/ page as a card (S-1) */
main.trends-ls .trends-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 34px;padding:0;list-style:none}
main.trends-ls .trends-grid li{margin:0;padding:0}
main.trends-ls .trends-grid li::before{content:none}
main.trends-ls .trends-grid a{display:block;height:100%;background:var(--ls-paper);border:1.5px solid var(--ls-line);border-radius:var(--ls-radius-sm);padding:16px 18px;text-decoration:none;color:var(--ls-text);transition:border-color .15s,transform .15s}
main.trends-ls .trends-grid a:hover{border-color:var(--ls-ink);transform:translateY(-2px)}
main.trends-ls .trends-grid strong{display:block;font-size:17px;line-height:1.3;color:var(--ls-ink);margin-bottom:4px}
main.trends-ls .trends-grid span{display:block;font-size:14px;line-height:1.45;color:var(--ls-muted)}
main.trends-ls .trends-grid .live strong::after{content:'Live';margin-left:8px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--ls-mint);border-radius:999px;padding:2px 7px;vertical-align:middle}
@media (min-width:1100px){main.trends-ls .trends-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-left:-90px;margin-right:-90px}}
@media (max-width:600px){main.trends-ls .trends-grid{grid-template-columns:1fr}}

/* weekly-report hub (a library hub) */
main.trends-ls.library{background:var(--ls-cream)}
main.trends-ls.library .library-hero h1{font-family:var(--ls-font);font-weight:800;letter-spacing:-.035em}
@media (prefers-reduced-motion:reduce){main.trends-ls .trends-grid a{transition:none}main.trends-ls .trends-grid a:hover{transform:none}}
main.trends-ls table.bestsellers td:nth-child(2){min-width:170px}main.trends-ls table.ads td:nth-child(2){min-width:220px}
