Sundial

<div class="nuda-sun" role="img" aria-label="Sundial midday">
  <div class="nuda-sun__face">
    <span class="nuda-sun__sun"></span>
    <span class="nuda-sun__mark"
      style="transform: rotate(-60deg) translateY(-58px)">VI</span>
    <span class="nuda-sun__mark"
      style="transform: rotate(-30deg) translateY(-58px)">IX</span>
    <span class="nuda-sun__mark"
      style="transform: rotate(0deg) translateY(-58px)">XII</span>
    <span class="nuda-sun__mark"
      style="transform: rotate(30deg) translateY(-58px)">III</span>
    <span class="nuda-sun__mark"
      style="transform: rotate(60deg) translateY(-58px)">VI</span>
    <div class="nuda-sun__gnomon"></div>
    <div class="nuda-sun__shadow"></div>
  </div>
</div>

/* Sundial
   The gnomon stays still; the shadow rotates 120° across the day
   (-60° dawn → +60° dusk). Roman numerals mark the hours. */

.nuda-sun {
  --bg: #1a1410;
  --stone: #a89878;
  --gold: #ffb45e;
  display: inline-block;
  padding: 14px;
  background: var(--bg);
  border-radius: 50%;
  border: 1px solid rgba(168, 152, 120, 0.15);
}

.nuda-sun__face {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2a2218, #0f0c08);
  overflow: hidden;
}

.nuda-sun__sun {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    0 0 16px var(--gold),
    0 0 32px rgba(255, 180, 94, 0.4);
  animation: nuda-sun-glow 4s ease-in-out infinite;
}

.nuda-sun__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  margin-left: -10px;
  font: 600 11px Georgia, serif;
  color: var(--stone);
  text-align: center;
  transform-origin: center 58px;
}

.nuda-sun__gnomon {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 60px;
  margin-left: -1px;
  background: linear-gradient(180deg, var(--gold), var(--stone));
  border-radius: 1px;
}

.nuda-sun__shadow {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 60px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  transform-origin: bottom center;
  animation: nuda-sun-shadow 28s linear infinite;
  filter: blur(1px);
}

@keyframes nuda-sun-glow {
  50% {
    transform: scale(1.1);
    box-shadow:
      0 0 22px var(--gold),
      0 0 40px rgba(255, 180, 94, 0.5);
  }
}

@keyframes nuda-sun-shadow {
  0%   { transform: rotate(-60deg); }
  100% { transform: rotate(60deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-sun__sun,
  .nuda-sun__shadow { animation: none; }
  .nuda-sun__shadow { transform: rotate(0); }
}