.sun-strips { overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.sun-strip {
  position: relative; height: clamp(56px, 8vw, 112px); overflow: hidden;
  background: repeating-conic-gradient(from 270deg at var(--x) var(--y, 70%), #E6DFCC 0deg var(--ray, .9deg), #0B0A08 var(--ray, .9deg) 3.2deg);
  transform: translateX(var(--shift, 0px));
}
html.js .sun-strip { clip-path: inset(0 100% 0 0); animation: wipe 1.2s var(--ease) forwards; }
.sun-strip:nth-child(2) { animation-delay: .08s; }
.sun-strip:nth-child(3) { animation-delay: .16s; }
.sun-strip:nth-child(4) { animation-delay: .24s; }
.sun-strip:nth-child(5) { animation-delay: .32s; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
.sun-disc {
  position: absolute; left: var(--x); top: var(--y, 70%); width: clamp(80px, 10.5vw, 150px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-linear-gradient(0deg, #E6DFCC 0 2px, #0B0A08 2px 4px); box-shadow: 0 0 0 10px #0B0A08;
}
.sun-row { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-end; padding-top: 40px; }
.sun-title { margin: 0; font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(72px, 11vw, 168px); line-height: .85; letter-spacing: -.02em; }
.sun-title i { font-style: italic; }
.r-sunset .ctl { color: #E6DFCC; }
.r-sunset .trk .t { font-family: "Instrument Serif", serif; font-size: 28px; }
.r-sunset .trk[aria-pressed="true"] .t { font-style: italic; }