/* Sidereus World Horoscope — [sidereus_world_horoscope]
   Single-theme night-sky block. Every rule is scoped under .swh and sets its
   own colours/fonts so the site theme's typography and table styles can't leak in. */
.swh{
  --swh-night:#0a0f1e; --swh-plate:#10172b; --swh-ink:#ece5d3; --swh-dim:#8d97b3;
  --swh-gold:#d2ad62; --swh-rule:#2a3456; --swh-sid:#9fb6e8;
  --swh-display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --swh-body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  position:relative; overflow:hidden; overflow:clip; box-sizing:border-box;
  background:var(--swh-night); color:var(--swh-ink);
  font-family:var(--swh-body); font-weight:300; line-height:1.5;
  color-scheme:dark;
}
.swh *,.swh *::before,.swh *::after{box-sizing:border-box}

/* full: a band from edge to edge of the browser, whatever column the theme puts it in */
.swh-full{width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-top:0; margin-bottom:0}
html:has(.swh-full){overflow-x:clip}
/* panel: a rounded night-sky card inside the content column */
.swh-panel{width:100%; border-radius:16px; margin:0 auto}

.swh-sky{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block}
.swh-wrap{position:relative; z-index:1; max-width:1240px; container:swh / inline-size; margin:0 auto; padding:28px 16px 48px; display:flex; flex-direction:column; align-items:center; gap:18px}
.swh-panel .swh-wrap{padding:24px 12px 36px}

/* chart, then the readout and positions beneath it (portrait / narrow) */
.swh .swh-body{width:100%; display:flex; flex-direction:column; align-items:center; gap:18px}
.swh .swh-chart{width:100%; display:flex; justify-content:center}
.swh .swh-info{width:100%; display:flex; flex-direction:column; align-items:center; gap:18px; container:swhinfo / inline-size}

.swh .swh-eyebrow{font-family:var(--swh-body); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--swh-dim); text-align:center; margin:0}
.swh .swh-title{font-family:var(--swh-display); font-weight:500; font-size:clamp(2.1rem,5.4vw,3.4rem); line-height:1.02; margin:0; padding:0; text-align:center; text-wrap:balance; letter-spacing:.01em; color:var(--swh-ink); text-transform:none; border:0; background:none}
.swh .swh-title em{font-style:italic; color:var(--swh-gold); font-family:inherit}
.swh .swh-sub{max-width:62ch; text-align:center; color:var(--swh-dim); font-size:.95rem; line-height:1.55; margin:0}

/* The wheel uses as much width as the block has, but is never taller than the
   screen, so the whole chart always fits in view (viewBox is 1440 x 1280). */
.swh .swh-wheel{width:min(100%, calc((100vh - 24px) * 1.125)); width:min(100%, calc((100svh - 24px) * 1.125)); aspect-ratio:1440/1280; margin:0}
.swh .swh-wheel > svg{width:100%; height:100%; display:block; overflow:visible}
.swh .swh-glyph{font-family:sans-serif; font-variant-emoji:text}

.swh .swh-clock{display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:-6px}
.swh .swh-date{font-family:var(--swh-display); font-size:clamp(1.25rem,3vw,1.6rem); letter-spacing:.02em; color:var(--swh-ink)}
.swh .swh-time{font-family:var(--swh-body); font-weight:400; font-size:clamp(2rem,6vw,3rem); line-height:1.2; font-variant-numeric:tabular-nums; letter-spacing:.06em; color:var(--swh-ink)}
.swh .swh-time small{font-size:.38em; letter-spacing:.24em; color:var(--swh-gold); margin-left:.5em; vertical-align:.55em}
.swh .swh-facts{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px; font-size:.82rem; color:var(--swh-dim); font-variant-numeric:tabular-nums}
.swh .swh-facts b{font-weight:500; color:var(--swh-ink)}

.swh .swh-ledger{width:100%; max-width:720px; overflow-x:auto}
.swh table{width:100%; border-collapse:collapse; border:0; margin:0; background:none; font-variant-numeric:tabular-nums; font-size:.92rem; color:var(--swh-ink); font-family:var(--swh-body)}
.swh thead,.swh tbody,.swh tr{background:none !important; border:0}
.swh th{font-weight:400; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--swh-dim); text-align:left; padding:8px 10px; border:0; border-bottom:1px solid var(--swh-rule); background:none}
.swh td{padding:7px 10px; border:0; border-bottom:1px solid var(--swh-rule); white-space:nowrap; background:none; color:var(--swh-ink); vertical-align:middle}
.swh td.swh-g{width:1.6em; text-align:center; padding-inline:4px}
.swh td.swh-g svg{width:1.55em; height:1.55em; display:inline-block; vertical-align:middle; color:var(--swh-ink)}
.swh td .swh-sg{font-family:sans-serif; font-variant-emoji:text}
.swh td.swh-sid{color:var(--swh-sid)}
.swh td .swh-rx{color:var(--swh-gold); font-size:.8em; margin-left:4px}
.swh td .swh-h{color:var(--swh-dim); margin-left:8px}
.swh .swh-note{max-width:66ch; font-size:.85rem; line-height:1.6; color:var(--swh-dim); text-align:center; margin:6px 0 0}
.swh .swh-note b{color:var(--swh-ink); font-weight:500}

@media (max-width:520px){ .swh-wrap{padding-inline:8px} }
@container swhinfo (max-width:520px){
  .swh td{padding:6px 6px}
  .swh .swh-facts{font-size:.76rem}
  .swh td .swh-h{display:block; margin-left:0; font-size:.8em}
  .swh th:first-child,.swh td.swh-g{padding-inline:2px}
}

/* Any landscape screen with room for it: chart and information side by side,
   each taking half the width; the wheel still never grows taller than the screen. */
@media (orientation:landscape){
  .swh-full .swh-wrap{max-width:none; padding-inline:max(16px, 3vw)}
  @container swh (min-width:700px){
    .swh .swh-body{flex-direction:row; align-items:flex-start; gap:2.5%}
    .swh .swh-chart,.swh .swh-info{flex:1 1 0; min-width:0}
    /* if the information runs longer than the screen (a phone on its side), the
       wheel stays pinned in view while that column scrolls past it */
    .swh .swh-chart{position:sticky; top:8px; align-self:flex-start}
    .swh .swh-info{align-self:center}
    .swh .swh-info{gap:14px}
    .swh .swh-clock{margin-top:0}
  }
}
/* short landscape screens (phones on their side): a more compact readout */
@media (orientation:landscape) and (max-height:500px){
  .swh .swh-time{font-size:1.9rem}
  .swh .swh-date{font-size:1.1rem}
  .swh table{font-size:.8rem}
  .swh td{padding:4px 6px}
  .swh .swh-title{font-size:1.9rem}
  .swh .swh-sub{font-size:.82rem}
}