.horoscope-feed { display:flex; flex-direction:column; min-width:0; border:3px solid var(--ink); background:var(--paper); box-shadow:5px 5px 0 var(--plum); }
.horoscope-feed__panel { display:flex; flex-direction:column; flex:1; }
.horoscope-feed__panel[hidden] { display:none; }
.horoscope-feed__cover {
  position:relative; aspect-ratio:16/10; overflow:hidden; display:grid; place-items:center;
  container-type:inline-size; border-bottom:3px solid var(--ink);
  background-image:repeating-conic-gradient(from -90deg at 50% 100%, var(--horoscope-ray) 0deg 7.5deg, transparent 7.5deg 15deg);
}
.horoscope-feed__cover--neutral { background-color:var(--ink); color:var(--mustard); --horoscope-ray:color-mix(in oklab, var(--mustard) 18%, transparent); }
.horoscope-feed__cover--air { background-color:var(--mustard); color:var(--ink); --horoscope-ray:color-mix(in oklab, var(--paper) 22%, transparent); }
.horoscope-feed__cover--water { background-color:var(--spec-left-tint); color:var(--paper); --horoscope-ray:color-mix(in oklab, var(--paper) 14%, transparent); }
.horoscope-feed__cover--fire { background-color:var(--brick); color:var(--paper); --horoscope-ray:color-mix(in oklab, var(--paper) 14%, transparent); }
.horoscope-feed__cover--earth { background-color:var(--avocado); color:var(--paper); --horoscope-ray:color-mix(in oklab, var(--paper) 14%, transparent); }
.horoscope-feed__cover-word { font-family:var(--font-display); font-size:28px; font-size:min(calc(100cqi / var(--word-len)), 72px); line-height:1; text-transform:uppercase; white-space:nowrap; }
/* The engraving scales with the cover; the frame keeps the 282x216 box. */
.horoscope-feed__cover--art { display:block; aspect-ratio:auto; background-image:none; }
.horoscope-feed__cover--art .horoscope-card__art-frame { position:relative; width:100%; height:auto; flex:none; aspect-ratio:282/216; overflow:hidden; border:0; }
.horoscope-feed__cover--art .horoscope-art { position:absolute; inset:0; height:auto; }
/* One sheet for all twelve signs, so a pick requests nothing: 564x432 cells on a 576x444 pitch, 4 columns. */
.horoscope-feed__cover--art .horoscope-art__sheet { position:absolute; display:block; max-width:none; left:calc(-100% * (var(--art-col) * 576 + 6) / 564); top:calc(-100% * (var(--art-row) * 444 + 6) / 432); width:calc(100% * 2304 / 564); height:calc(100% * 1332 / 432); }
.horoscope-feed__cover--art .horoscope-card__name-frame { position:relative; width:100%; min-height:64px; padding:8px 0; display:grid; align-content:center; justify-items:center; gap:4px; background:var(--ink); }
.horoscope-feed__cover--art .horoscope-card__name { display:block; font-size:22px; font-size:min(calc(90cqi / var(--word-len)), 32px); line-height:.9; }
.horoscope-feed__cover--art .horoscope-card__dates { margin:0; font-size:9px; line-height:1; }
.horoscope-feed__title, .horoscope-feed__headline { font-family:var(--font-sub); font-size:19px; font-weight:700; line-height:1.14; padding:0 15px 10px; }
.horoscope-feed__headline { text-transform:uppercase; }
.horoscope-feed__headline a { color:inherit; }
.horoscope-feed__text, .horoscope-feed__body { font-family:var(--font-body); font-size:15px; line-height:1.5; padding:0 15px; margin:0 0 12px; }
.horoscope-feed__picks { display:flex; flex-wrap:wrap; gap:6px; padding:0 15px; }
.horoscope-feed__pick[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.horoscope-feed__actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding:4px 15px 15px; }
.horoscope-feed__link { display:inline-flex; align-items:center; min-height:36px; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pumpkin-dark); }
.horoscope-feed .sr-only, .horoscope-feed .share-status { position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion:no-preference) {
  [data-horoscope-feed][data-animate] .horoscope-feed__panel:not([hidden]) { animation:horoscope-feed-in var(--dur-state) var(--ease); }
  @keyframes horoscope-feed-in { from { opacity:0; } to { opacity:1; } }
}