/* topics.css — the Business band on the Tech sheet and the /business page
   (owner, 2026-10-07: dropdowns in the bar, a full page behind each one).
   Loaded by tech.html and business.html only, after styles.css. The
   Entertainment topic pages wear ent.css; this file is the light half.

   ONE TYPE SYSTEM (owner, 2026-10-02): Playfair Display upright for the
   headlines, Inter for everything else, nothing under 11px, no italics.
   Rules are near-black or grey hairlines, never the brand blue. */

/* ---- the Business band, under the Tech sheet's top story ---- */
.tksheet .tk-biz { padding-top: 6px; padding-bottom: 36px; }
.tksheet .tk-biz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  border-bottom: 1px solid #e5e7eb; padding-bottom: 10px; margin-bottom: 22px; }
.tksheet .tk-biz-head h2 { margin: 0; }
.tksheet .tk-biz-dek { flex: 1 1 260px; margin: 0; font: 400 13px/1.45 var(--ui); color: #4b5563; }
.tksheet .tk-biz-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 0; font: 600 12px/1 var(--ui); color: var(--tkblue); white-space: nowrap; }
.tksheet .tk-biz-more:hover { text-decoration: underline; }
.tksheet .tk-biz-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.tksheet .tk-biz-card { min-width: 0; }
.tksheet .tk-biz-card a { display: block; color: inherit; }
.tksheet .tk-biz-art { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #f3f4f6;
  border: 1px solid #f3f4f6; margin-bottom: 12px; }
.tksheet .tk-biz-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.tksheet .tk-biz-card a:hover img { transform: scale(1.04); }
.tksheet .tk-biz-hl { display: block; font: 700 17px/1.3 var(--display); color: #111827;
  text-wrap: pretty; transition: color .2s; }
.tksheet .tk-biz-card a:hover .tk-biz-hl { color: var(--tkblue); }
.tksheet .tk-biz-k { display: block; font: 500 11px/1.4 var(--ui); color: #6b7280; margin-top: 8px; }
.tksheet .tk-biz-dek2 { display: none; margin-top: 8px; font: 400 13px/1.5 var(--ui); color: #4b5563; }
/* A story with no fresh wide picture is a type card: a near-black rule
   over the headline, so a row of four still reads as one row. */
.tksheet .tk-biz-solo { border-top: 2px solid #121212; padding-top: 12px; }
.tksheet .tk-biz-solo .tk-biz-hl { font-size: 19px; }
.tksheet .tk-biz-solo .tk-biz-dek2 { display: block; }
.tksheet .tk-biz-empty { margin: 0; font: 400 14px/1.55 var(--ui); color: #4b5563; }
.tksheet .tk-biz-empty a { color: var(--tkblue); text-decoration: underline; }
@media (min-width: 640px) and (max-width: 767px) {
  .tksheet .tk-biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .tksheet .tk-biz-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tksheet .tk-biz-card:not(:first-child):not(.tk-biz-solo) a { display: grid;
    grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .tksheet .tk-biz-card:not(:first-child) .tk-biz-art { width: 120px; height: 80px;
    aspect-ratio: auto; margin: 0; grid-row: 1 / span 2; }
  .tksheet .tk-biz-card:not(:first-child) .tk-biz-k { grid-column: 2; margin: 6px 0 0; }
  .tksheet .tk-biz-card:not(:first-child) .tk-biz-hl { grid-column: 2; grid-row: 1; font-size: 15px; }
  .tksheet .tk-biz-card:first-child .tk-biz-hl { font-size: 21px; line-height: 1.22; }
  .tksheet .tk-biz-card:first-child .tk-biz-dek2 { display: block; }
  .tksheet .tk-biz-card:not(:first-child) .tk-biz-dek2 { display: none; }
  .tksheet .tk-biz-more { margin-left: 0; }
}

/* ---- the /business page: the house desk page (styles.css 8d), plus the
   topic page's own head lines and the row of sibling pages ---- */
.tpage .sectionhead-eyebrow a { color: inherit; }
.tpage .sectionhead-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tpage .tp-fresh { margin: 10px 0 0; font: 500 12.5px/1.4 var(--ui); color: var(--ink-3); }
.tpage .tp-siblings { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 0 28px;
  padding: 9px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.tpage .tp-siblings a { display: inline-block; padding: 4px 0; font: 600 13px/1.2 var(--ui); color: var(--ink); }
.tpage .tp-siblings a:hover { color: var(--blue); }
.tpage .tp-siblings a[aria-current="page"] { color: var(--blue); }
.tpage .tp-thin { max-width: 680px; margin: 0 0 26px; font: 400 15px/1.55 var(--ui); color: var(--ink-2); }
.tpage .tp-thin a, .tpage .tp-more a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.tpage .tp-more { margin-top: 18px; font: 500 13px/1.5 var(--ui); color: var(--ink-3); }