/* observatory.css — bornchart "Observatory" polish layer (R3).
   Precision-instrument visual language layered over the base paper/seal-red system.
   Uses the pages' existing CSS variables (with hex fallbacks) so it works anywhere.
   All classes namespaced obs-* to avoid colliding with each page's own styles. */

:root{
  --obs-grid-line: rgba(110,100,83,0.055);
  --obs-grid-line-coarse: rgba(110,100,83,0.05);
}

/* fine measurement grid — add to a section/hero wrapper as an instrument backdrop.
   Its direct children are lifted above the grid automatically. */
.obs-grid{ position:relative; }
.obs-grid::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--obs-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--obs-grid-line) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%, #000 55%, transparent 100%);
          mask-image:radial-gradient(120% 80% at 50% 30%, #000 55%, transparent 100%);
}
.obs-grid > *{ position:relative; z-index:1; }

/* coordinate / epoch readout (mono) — e.g. "N 31.23° · E 121.47°  /  EPOCH J2000.0" */
.obs-coord{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted, #6E6453);
}

/* kicker row: label + CJK + trailing tick rule */
.obs-kicker{
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold, #B07D3A);
}
.obs-kicker .cjk{ font-family:'Noto Serif SC',serif; color:var(--body,#46412F); letter-spacing:.1em; font-size:12px; }
.obs-kicker .tick{ flex:1; height:1px; background:linear-gradient(to right, var(--line,#DED2BB), transparent); }

/* instrument "readout" card with register corner marks */
.obs-card{
  position:relative; background:var(--surface,#FBF7EC);
  border:1px solid var(--line,#DED2BB); border-radius:10px; padding:13px 15px 14px;
  box-shadow:0 1px 0 var(--line2,#EADFC9), 0 10px 26px -18px rgba(33,28,20,.35);
}
.obs-reg{ position:absolute; width:12px; height:12px; border:1.5px solid var(--gold,#B07D3A); opacity:.85; pointer-events:none; }
.obs-reg.tl{ top:8px; left:8px; border-right:none; border-bottom:none; }
.obs-reg.tr{ top:8px; right:8px; border-left:none; border-bottom:none; }
.obs-reg.bl{ bottom:8px; left:8px; border-right:none; border-top:none; }
.obs-reg.br{ bottom:8px; right:8px; border-left:none; border-top:none; }
.obs-card-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px; }
.obs-card-title{ font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted,#6E6453); }
.obs-card-meta{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.1em; color:var(--gold,#B07D3A); text-transform:uppercase; }

/* hairline data rule + mono data label */
.obs-rule{ height:1px; background:var(--line2,#EADFC9); border:none; margin:0; }
.obs-mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:.08em; color:var(--muted,#6E6453); }

/* ecliptic / instrument-dial motif helper: drop an inline <svg> with this class
   absolutely behind hero content (the SVG paths are page markup; this just positions it) */
.obs-sky{ position:absolute; inset:0; z-index:0; pointer-events:none; }