/* 11 Lunar Baroque: gilt against the vacuum. Double gold rules, corner flourishes, a porthole Earth. */
[data-world="lunar-baroque"] {
  --grain: 0.04;
  --enter: low-gravity 1000ms cubic-bezier(.33, 0, .15, 1);
}
@keyframes low-gravity { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes earth-turn { from { background-position: 0 0, 0 0; } to { background-position: 200% 0, 0 0; } }

/* stars, barely visible in the ground */
[data-world="lunar-baroque"] body {
  background-image:
    radial-gradient(1px 1px at 20px 30px, color-mix(in srgb, var(--ink) 35%, transparent), transparent),
    radial-gradient(1px 1px at 140px 90px, color-mix(in srgb, var(--ink) 25%, transparent), transparent),
    radial-gradient(1px 1px at 90px 170px, color-mix(in srgb, var(--ink) 30%, transparent), transparent);
  background-size: 220px 220px;
}
[data-world="lunar-baroque"] .hero-title { font-weight: 500; letter-spacing: 0.02em; }
/* framed panels: thin double gold rules with corner flourishes */
[data-world="lunar-baroque"] .card { position: relative; border: 3px double color-mix(in srgb, var(--accent) 55%, transparent); overflow: visible; }
[data-world="lunar-baroque"] .card::before, [data-world="lunar-baroque"] .card::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); pointer-events: none;
}
[data-world="lunar-baroque"] .card::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
[data-world="lunar-baroque"] .card::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
[data-world="lunar-baroque"] .embed { overflow: hidden; }
[data-world="lunar-baroque"] .block + .block { border-top: 3px double color-mix(in srgb, var(--accent) 45%, transparent); }
/* the porthole: Earth, turning slowly, beside the hero copy */
[data-world="lunar-baroque"] .hero-copy { position: relative; }
[data-world="lunar-baroque"] .hero-aside { float: right; margin: 0 0 var(--space-3) var(--space-3); }
@media (min-width: 900px) {
  [data-world="lunar-baroque"] .hero-aside { float: none; position: absolute; right: var(--space-5); top: var(--space-5); margin: 0; }
  [data-world="lunar-baroque"] .hero-copy { padding-right: calc(var(--space-5) + 170px); }
}
[data-world="lunar-baroque"] .porthole {
  display: block; position: relative; width: clamp(64px, 12vw, 132px); aspect-ratio: 1; border-radius: 50%;
  border: 4px double var(--accent); background: var(--ground); overflow: hidden;
}
[data-world="lunar-baroque"] .earth {
  position: absolute; inset: 12%; border-radius: 50%;
  background:
    radial-gradient(ellipse 18% 12% at 20% 38%, color-mix(in srgb, var(--muted) 70%, var(--spice)), transparent 70%),
    radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--spice) 55%, white), var(--spice) 45%, color-mix(in srgb, var(--spice) 35%, black) 80%);
  background-size: 50% 100%, 100% 100%;
  box-shadow: inset -8px -4px 14px color-mix(in srgb, var(--ground) 80%, transparent);
  animation: earth-turn 60s linear infinite;
}
[data-world="lunar-baroque"] .eyebrow, [data-world="lunar-baroque"] .meta { font-size: 0.75rem; text-transform: uppercase; }
[data-world="lunar-baroque"] body { font-size: 1.1875rem; }