/* 06-components/world — the world card / console readout for the museum of worlds.
   Compose with .c-panel .c-panel--flush for the frame (screenshot edge-to-edge);
   this owns the scanlined screenshot and the padded readout body. */
.c-world { display: block; color: inherit; overflow: hidden; }

/* The screenshot in a scanlined 16∶9 frame — a little world booting in a CRT
   window. A real <img> covers it; a mono placeholder fills it when absent. */
.c-world__shot {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(0deg, var(--surface) 0 3px, var(--surface-2) 3px 4px),
    var(--surface);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--brand) 30%, var(--ground));
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}
.c-world__shot img { width: 100%; height: 100%; object-fit: cover; }

/* The readout body — name, status/era tags, dim blurb, brand/track label. */
.c-world__body {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.c-world h3 { font-size: var(--text-base); margin: 0; }
.c-world p {
  font-family: var(--font-read);
  color: var(--ink-dim);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
}
/* Brand / track byline — mono chrome, dim, sits under the name cluster. */
.c-world__label {
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}