:root{
  --night:#0A0F22; --vault:#111834; --ink:#E9E4D4; --muted:#8B93B8;
  --brass:#D3A94C; --line:#2A3358;
  color-scheme: dark;
}
*{box-sizing:border-box}
body{
  background:var(--night); color:var(--ink);
  font-family: Charter, Georgia, 'Times New Roman', serif;
  margin:0; padding:32px 20px 40px; line-height:1.55;
}
.page{max-width:1560px; margin:0 auto; display:flex; flex-direction:column; gap:30px}
.mono{font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
      font-variant-numeric: tabular-nums}
.smallcaps{font-variant-caps: small-caps; letter-spacing:.14em}
header{display:flex; justify-content:space-between; align-items:flex-start;
       gap:24px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:22px}
h1{font-family: Georgia, 'Times New Roman', serif; font-variant-caps: small-caps;
   letter-spacing:.16em; font-weight:400; font-size:clamp(1.6rem, 4vw, 2.4rem);
   margin:0; color:var(--ink); text-wrap:balance}
h1 .over{color:var(--brass)}
.sub{color:var(--muted); margin-top:6px; font-size:.95rem}
.moonbox{display:flex; align-items:center; gap:14px}
.moonbox .mlabel{text-align:right}
.moonbox .mname{font-variant-caps:small-caps; letter-spacing:.1em}
.moonbox .mpct{color:var(--muted); font-size:.85rem}
.countdown{display:flex; gap:10px; flex-wrap:wrap}
.count{border:1px solid var(--line); padding:7px 12px; display:flex; gap:8px;
       align-items:baseline; background:var(--vault)}
.count .k{color:var(--muted); font-variant-caps:small-caps; letter-spacing:.1em; font-size:.8rem}
.count .v{font-size:.9rem}
.count .d{color:var(--brass); font-size:.8rem}
section{background:var(--vault); border:1px solid var(--line); padding:20px 22px 16px}
.eyebrow{font-variant-caps:small-caps; letter-spacing:.22em; color:var(--brass); font-weight:400;
         font-size:.85rem; margin:0 0 4px}
.caption{color:var(--muted); font-size:.85rem; margin:10px 0 0; max-width:68ch}
.caption code{font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.92em;
              color:var(--ink); background:none}
/* Two tracks on wide screens: primary (dome, ribbons, table) beside a
   right rail (chips, orrery, analemma).  Below the breakpoint the tracks
   dissolve (display:contents) and the sections reorder into one column. */
.main{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:30px; align-items:start}
.primary, .rail{display:flex; flex-direction:column; gap:30px; min-width:0}
.sec-dome svg{max-width:820px; margin:0 auto}
@media (max-width: 1159px){
  /* align-items:start would carry over from the grid rule and shrink the
   * flex-column items to fit their content; stretch restores full width */
  .main{display:flex; flex-direction:column; align-items:stretch}
  .primary, .rail{display:contents}
  .sec-dome{order:1} .sec-chips{order:2} .sec-sunpath{order:3}
  .sec-ribbons{order:4} .sec-daylength{order:5} .sec-lunation{order:6}
  .sec-orrery{order:7} .sec-analemma{order:8} .sec-table{order:9}
  .sec-sunpath svg, .sec-orrery svg, .sec-analemma svg{max-width:560px; margin:0 auto}
}
.chips{display:flex; flex-direction:column; gap:9px}
.chip{display:flex; gap:10px; align-items:flex-start; border-bottom:1px solid var(--line);
      padding:7px 2px}
.chip:last-child{border-bottom:none}
.dot{width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; margin-top:6px}
.chipname{font-variant-caps:small-caps; letter-spacing:.1em}
.chipline{font-size:.85rem}
.chipsub{font-size:.78rem; color:var(--muted)}
svg{width:100%; height:auto; display:block}
svg text{fill:var(--ink)}
.cardinal{font-size:14px; fill:var(--brass); letter-spacing:.1em}
.gridlab{font-size:10px; fill:var(--muted)}
.starlab{font-size:10px; fill:var(--muted); font-family:Georgia, serif; font-style:italic}
.bodylab{font-size:11px; fill:var(--ink); font-family:Georgia, serif}
.rowlab{font-size:13px; fill:var(--ink); font-family:Georgia, serif;
        font-variant-caps:small-caps; letter-spacing:.06em}
.timelab{font-size:11px; fill:var(--muted)}
.nowlab{font-size:10px; fill:var(--brass)}
.todaylab{font-size:11px; fill:var(--brass); font-family:Georgia, serif; font-style:italic}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.85rem}
th{font-variant-caps:small-caps; letter-spacing:.1em; font-weight:400; color:var(--muted);
   text-align:right; padding:6px 10px; border-bottom:1px solid var(--brass)}
th:first-child{text-align:left}
td{padding:6px 10px; text-align:right; border-bottom:1px solid var(--line);
   font-family:ui-monospace, Menlo, Consolas, monospace; font-variant-numeric:tabular-nums}
td.tname{text-align:left; font-family:Georgia, serif; font-variant-caps:small-caps;
         letter-spacing:.06em}
td .dot{margin-right:8px; margin-top:0; vertical-align:baseline}
footer{color:var(--muted); font-size:.82rem; border-top:1px solid var(--line);
       padding-top:16px; text-align:center}
footer .sep{color:var(--brass); padding:0 6px}
@media (prefers-reduced-motion: no-preference){
  .nowpulse{animation:pulse 3s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.55}}
}