/* ============================================================
   HOME — the sections under the showcase on the homepage (index.html)
   ============================================================ */

/* the showcase's card strip hangs below the stage, so the first section starts a little lower */
.showcase + main { padding-top: 12px; }

/* ---------- Contents: one card per section of the site ---------- */
.contents { align-items: stretch; }
.contents-card { position: relative; padding: 0; gap: 0; overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.contents-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.contents-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.contents-body > h3 { margin: 0; font-size: 1.25rem; }
.contents-body > p { margin: 0; color: var(--muted); font-size: 0.93rem; }

/* the title's link covers the whole card, so the card opens the section... */
.contents-link { color: var(--heading); }
.contents-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.contents-card:hover .contents-link { color: var(--accent-hover); }
.contents-link:hover { text-decoration: none; }
.contents-link::before { content: "→"; float: right; margin-left: 8px; color: var(--accent); opacity: 0; transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease; }
.contents-card:hover .contents-link::before { opacity: 1; transform: none; }
/* ...and the links in its list sit above that, opening their own pages */
.contents-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; border-top: 1px solid var(--border); padding-top: 8px; }
.contents-list li { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.contents-list li::before { content: none; }
.contents-list a { position: relative; z-index: 1; padding: 2px 0; font-weight: 550; font-size: 0.93rem; white-space: nowrap; }
.contents-list small { flex: 0 1 auto; min-width: 0; }
.contents-list a::before { content: "›"; margin-right: 7px; color: var(--border-strong); font-weight: 700; }
.contents-list a:hover::before { color: var(--accent); }
.contents-list small { position: relative; z-index: 1; color: var(--muted); font-family: var(--mono); font-size: 0.75rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* nine clients: two columns, with no domains to show */
.contents-card:first-child .contents-list { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.contents-card:first-child .contents-list a { font-size: 0.88rem; }

/* ---------- Articles: the latest, with the years and topics alongside ---------- */
#articles > p { margin: 0; max-width: 76ch; color: var(--muted); }
.home-articles > .column > section > h3 { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); }
/* on the homepage the side panel scrolls with the page rather than in a box of its own */
/* the side holds two panels, Years above Topics, each looking like the panel on /articles/ */
.home-articles > aside { position: static; max-height: none; overflow: visible; gap: 16px;
  padding: 0; background: none; border: 0; box-shadow: none; }
.home-articles .side-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* the years: a compact table, each article drawn as a little bar beside the count */
.home-articles table.years { width: 100%; font-size: 0.86rem; border-collapse: collapse; }
.home-articles table.years thead { display: none; }
.home-articles table.years td { padding: 3px 4px; border-bottom: 1px solid var(--border); }
.home-articles table.years tr:last-child td { border-bottom: 0; }
.home-articles table.years td:first-child { width: 3.4em; font-variant-numeric: tabular-nums; }
.home-articles table.years td:first-child a { font-weight: 600; }
.home-articles table.years tbody tr:hover { background: var(--accent-tint); }
.home-articles table.years .year-count { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; }
.home-articles table.years .year-count i { display: block; width: 4px; height: 11px; border-radius: 1px; background: var(--accent); opacity: 0.55; }
.home-articles table.years tr:hover .year-count i { opacity: 1; }
.home-articles table.years .year-count::after { order: -1; min-width: 1.8em; margin-right: 6px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--muted); }

@media (max-width: 960px) {
  .contents-card:first-child .contents-list { grid-template-columns: 1fr; }
}