/* ============================================================
   SOREL TECHNO — Articles (articles.html)
   Article list grouped by theme, author chips, external links.
   Depends on: tokens.css, base.css
   ============================================================ */

.site-header--solid {
  position: sticky;
  background: var(--header-veil);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  padding: 24px var(--gutter);
}

main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter) 120px; }

/* ---------- hero ---------- */
.art-hero { padding: 12vh 0 6vh; }
.art-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .95;
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.art-hero h1 .riv { color: var(--river); }
.art-hero .lede { max-width: 36em; margin-top: 24px; }

/* ---------- view toggle ---------- */
.view-toggle {
  display: inline-flex;
  gap: 4px;
  margin-top: 34px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px;
  background: var(--surface);
}
.view-toggle button {
  border: none; background: none;
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-60);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all var(--dur-ui);
}
.view-toggle button:hover, .view-toggle button:focus-visible { color: var(--ink); outline: none; }
.view-toggle button.on { background: var(--ink); color: var(--paper); }

.section-label {
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--melt);
  margin: 56px 0 18px;
}

/* groups also rise when the view toggles (fresh nodes on each render) */
.art-group { animation: page-rise .45s var(--ease) backwards; }
@media (prefers-reduced-motion: reduce) { .art-group { animation: none; } }

/* ---------- article rows ---------- */
.art-list { border-top: 1px solid var(--hairline); }

.art {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 22px 6px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: padding-left .35s var(--ease), background var(--dur-ui);
}
.art:hover, .art:focus-visible { padding-left: 16px; background: var(--hover-wash); outline: none; }

.art-chip {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900; font-size: .78rem; letter-spacing: -.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--river), #155a54);
  flex-shrink: 0;
}

.art-chip--marc { background: linear-gradient(135deg, var(--melt), #8f3f1e); }

/* books row */
.book-cover {
  width: 40px; height: 52px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: 1.2rem;
  background: linear-gradient(160deg, var(--mist), #fff);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
.book--soon { opacity: .65; cursor: default; }
.book--soon .art-arrow { display: none; }

.art-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.art-title { font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.art:hover .art-title { color: var(--river); }
.art-summary { font-size: .86rem; color: var(--ink-60); line-height: 1.5; }

.art-arrow {
  font-family: var(--font-mono);
  color: var(--melt);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-ui), transform var(--dur-ui) var(--ease);
}
.art:hover .art-arrow, .art:focus-visible .art-arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 640px) {
  .art { grid-template-columns: auto 1fr; }
  .art-arrow { display: none; }
}