/* Article opening shared by the case studies: a compact header in the reading column
   (label, title, one line of facts), a cover image, then a quieter heading scale and
   steadier body copy. Loaded after each page's own styles so these rules take over. */

/* ---------- ARTICLE HEADER ----------
   A short header in the reading column, like the top of an article: label, title, and the
   key facts as one quiet line. The story starts right below it, with no full-screen hero. */
.cs-hero.cs-hero--article {
  min-height: 0; display: block; padding: 116px 0 0; text-align: left;
}
.cs-hero--article::before,
html[data-hero="glow"] .cs-hero--article::before {
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgb(var(--acc-rgb) / 0.08), transparent 70%);
}
.cs-hero--article .cs-hero-eyebrow { margin: 0 0 12px; font-size: 11px; line-height: 1.4; letter-spacing: 0.16em; white-space: normal; }
.cs-hero--article .cs-hero-title {
  max-width: none; font-size: clamp(34px, 4.2vw, 44px); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em;
}
.cs-hero--article .cs-hero-title em { font-weight: 600; }
.cs-hero-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 12px 0 0; padding: 0; list-style: none;
  font-family: 'Geist', sans-serif; font-size: 14px; color: var(--text-muted);
  opacity: 0; animation: csFadeUp 0.8s ease forwards 0.5s;
}
.cs-hero-facts li + li::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 12px 3px; border-radius: 50%; background: rgb(var(--fg-rgb) / 0.3); }
/* The first section follows the header closely instead of opening a new screen */
.cs-hero--article + .cs-section { border-top: 0; padding-top: 48px; }
@media (max-width: 900px) {
  .cs-hero.cs-hero--article { padding: 96px 0 0; }
  .cs-hero--article .cs-hero-eyebrow { margin: 0 0 10px; font-size: 10px; letter-spacing: 0.12em; }
  .cs-hero--article .cs-hero-title { font-size: clamp(30px, 8vw, 38px); }
}
@media (max-width: 600px) {
  .cs-hero-facts { gap: 4px 16px; font-size: 13.5px; }
  .cs-hero-facts li + li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cs-hero-facts { animation: none; opacity: 1; } }

/* ---------- ARTICLE TYPE ----------
   Quieter, article-scale hierarchy: the title leads, section headings sit a clear step
   below it, and body copy is set slightly smaller but more solid, at a ~65 character measure. */
.cs-cover { margin: 40px auto 0; opacity: 0; animation: csFadeUp 0.9s ease forwards 0.6s; }
.cs-cover .cs-shot {
  margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 32px 80px rgb(var(--sh-rgb) / calc(0.5 * var(--sh-k)));
}
.cs-cover img { display: block; width: 100%; height: auto; }
/* Device bezel, measured from the frame baked into the HyperSense cover image and kept
   proportional to the cover's width (cqw), so all three covers share the same corners:
   rim 0.81%, outer corners 1.78%, inner (screen) corners 1.07%, rim colour 20% white. */
.cs-cover { container-type: inline-size; }
.cs-cover .cs-shot--bezel { padding: 0.81cqw; border: 0; border-radius: 1.78cqw; background: rgb(255 255 255 / 0.2); }
.cs-cover .cs-shot--bezel img { border-radius: 1.07cqw; }
/* HyperSense's image already carries the bezel; its frame only clips to the same outer corner */
.cs-cover .cs-shot--baked { border: 0; border-radius: 1.78cqw; }
.cs-cover .cs-board { margin: 0; }
.cs-section { padding: clamp(64px, 8vw, 104px) 0; }
.cs-hero--article + .cs-section { padding-top: 72px; }
.cs-label { margin-bottom: 18px; }
.cs-display {
  font-size: clamp(24px, 2.5vw, 30px); font-weight: 500; line-height: 1.3; letter-spacing: -0.018em;
  max-width: 28ch; margin: 0 0 22px;
}
.cs-h3 { font-size: clamp(18px, 1.6vw, 20px); font-weight: 500; line-height: 1.35; margin: 0 0 12px; }
.cs-p {
  font-size: 15.5px; font-weight: 400; line-height: 1.8; letter-spacing: -0.003em;
  color: rgb(var(--fg-rgb) / 0.64); max-width: 65ch; margin: 0 0 22px;
}
.cs-list li { font-size: 15.5px; font-weight: 400; color: rgb(var(--fg-rgb) / 0.64); }
.cs-lead { font-size: 15.5px; font-weight: 400; line-height: 1.8; color: rgb(var(--fg-rgb) / 0.64); max-width: 65ch; }
@media (max-width: 760px) {
  .cs-display { font-size: 24px; }
  .cs-p, .cs-lead, .cs-list li { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .cs-cover { animation: none; opacity: 1; } }