/* ORIVON — identity "Quiet observatory" (2026-10-12). Integrated edition of styles-20261011.css, used ONLY by index.html, sightline.html and collective/index.html.
   Every page outside that scope keeps loading the styles-20261011.css edition unchanged. Tokens: new --orv-* names plus the legacy names as aliases (scripts and older sheets still read --aurora-*, --polar-white…).
   No override layer: the approved prototype rules were folded into the original rules of this sheet. */
/* =========================================================
   ORIVON — Editorial Space & Astrophotography Publication
   Design System: Space Black / Midnight Blue / Polar White /
                   Aurora Cyan / Metallic Silver
   ========================================================= */

/* Fonts (local, no external requests) */
@font-face {
  font-family: "Orivon Display";
  src: local("Georgia"), local("Times New Roman");
  font-display: swap;
}

:root {
  --space-black: var(--orv-void);
  --space-black-2: var(--orv-base);
  --midnight: var(--orv-raise);
  --midnight-2: var(--orv-raise-2);
  --midnight-3: #212226;
  --polar-white: var(--orv-ivory);
  --polar-white-dim: var(--orv-ivory-dim);
  --silver: var(--orv-silver);
  --silver-2: var(--orv-silver-2);
  --aurora-cyan: #ece8de;
  --aurora-cyan-dim: #6d6e70;
  --aurora-amber: var(--orv-error);
  --line: var(--orv-hair);
  --line-strong: var(--orv-hair-strong);
  --glass-bg: rgba(18, 19, 22, 0.9);
  --glass-border: rgba(212, 208, 199, 0.1);
  --shadow-deep: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --shadow-soft: 0 8px 28px -14px rgba(0, 0, 0, 0.7);
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --section-y: clamp(5rem, 12vw, 10rem);
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.35s;
  --dur-med: 0.7s;
  --dur-slow: 1.1s;
  --orv-void: #07080a;
  --orv-base: #0b0c0e;
  --orv-raise: #121316;
  --orv-raise-2: #191a1e;
  --orv-ivory: #f2efe8;
  --orv-ivory-dim: #d4d0c7;
  --orv-silver: #a8a8a6;
  --orv-silver-2: #8a8b8c;
  --orv-hair: rgba(212, 208, 199, 0.12);
  --orv-hair-strong: rgba(212, 208, 199, 0.26);
  --orv-copper: #c98a5b;
  --orv-copper-hi: #dca070;
  --orv-gold: #d4b06a;
  --orv-gold-hi: #e3c585;
  --orv-error: #e8806f;
  --orv-ok: #7fbf9a;
  --orv-focus: #f2efe8;
  --orv-radius: 3px;
  --orv-radius-card: 4px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  font-synthesis: none;
}
body {
  margin: 0;
  background: var(--space-black);
  color: var(--polar-white-dim);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
::selection {
  background: var(--orv-ivory);
  color: var(--orv-void);
}

/* Native <select> — override OS/browser defaults so the closed control
   and the dropdown list both match the dark theme instead of falling
   back to a barely-readable white system popup. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237d87a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 14px;
  padding-right: 2.6rem !important;
  color-scheme: dark;
  border-radius: var(--orv-radius);
}
select:focus-visible {
  outline: 2px solid var(--orv-focus);
  outline-offset: 3px;
}
select option {
  background-color: var(--midnight-2);
  color: var(--polar-white);
}
select option:checked,
select option:hover,
select option:focus {
  background-color: var(--aurora-cyan-dim);
  color: var(--polar-white);
}

/* Defensive: split-text/reveal must never trap content invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* Background atmosphere */
body {
  background-image: none;
  background-attachment: fixed;
  background-color: var(--orv-base);
}

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

/* Layout helpers */
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
  z-index: 1;
}
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); position: relative; z-index: 1; }
.section-tight { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Continues the hero's opaque fade into the section that follows it, so the
   fixed starfield behind the page doesn't "switch on" abruptly at the seam —
   it reveals gradually instead. */
.hero-fade-out::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(120px, 22vw, 260px);
  background: linear-gradient(180deg, var(--orv-void) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orv-silver);
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: none;
  width: 22px;
  height: 1px;
  background: var(--aurora-cyan);
  display: inline-block;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head h2 { max-width: 640px; }
.section-head .lede { max-width: 420px; color: var(--silver); font-size: 0.98rem; padding-bottom: 0.3rem; }
.section-head-side { display: flex; align-items: flex-end; gap: 1.6rem; }

h2, h3 {
  font-family: var(--font-display);
  color: var(--polar-white);
  font-weight: 500;
  letter-spacing: -0.01em;
}
h1 {
  font-family: var(--font-display);
  color: var(--polar-white);
  font-weight: 400;
  letter-spacing: -0.018em;
}
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.018em;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.018em;
}

.text-silver { color: var(--silver); }
.text-cyan { color: var(--aurora-cyan); }

/* Buttons / links */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.7rem;
  border-radius: var(--orv-radius);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
  min-height: 44px;
  justify-content: center;
}
.btn-primary {
  background: var(--orv-ivory);
  color: var(--orv-void);
  box-shadow: none;
  border: 1px solid var(--orv-ivory);
}
.btn-primary:hover {
  transform: none;
  box-shadow: none;
  background: #fff;
  border-color: #fff;
}
.btn-ghost {
  border: 1px solid var(--orv-hair-strong);
  color: var(--orv-ivory);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--orv-ivory);
  color: var(--orv-ivory);
  transform: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--polar-white-dim);
  transition: gap var(--dur-fast) var(--ease-premium), color var(--dur-fast);
  min-height: 44px;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-premium); }
.link-arrow:hover {
  color: var(--orv-ivory);
  gap: 0.8rem;
}
.link-arrow:hover svg { transform: translateX(2px); }

/* Affiliate "View at Retailer" links (a step up from .link-arrow) */
.link-arrow-buy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--aurora-cyan);
  padding: 0.45rem 0.9rem;
  border-radius: var(--orv-radius);
  border: 1px solid var(--glass-border);
  background: transparent;
  transition: gap var(--dur-fast) var(--ease-premium), background var(--dur-fast), border-color var(--dur-fast);
}
.link-arrow-buy svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-premium); }
.link-arrow-buy:hover { gap: 0.8rem; background: rgba(79, 179, 192, 0.15); border-color: var(--aurora-cyan); }
.link-arrow-buy:hover svg { transform: translateX(2px); }

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background var(--dur-fast), border-color var(--dur-fast), padding var(--dur-fast) var(--ease-premium);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(7, 8, 10, 0.9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { height: 34px; width: 34px; border-radius: 50%; }
.brand-word { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.14em; color: var(--polar-white); }

.nav-desktop { display: flex; align-items: center; gap: 2.1rem; }
.nav-desktop a {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--polar-white-dim);
  position: relative;
  padding: 0.4rem 0;
  transition: color var(--dur-fast);
}
.nav-desktop a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--aurora-cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-premium);
}
.nav-desktop a:hover {
  color: var(--orv-ivory);
}
.nav-desktop a:hover::after { transform: scaleX(1); }
.nav-desktop button.is-active {
  color: var(--orv-ivory);
}
.nav-desktop a.is-active {
  color: var(--orv-ivory);
}
/* The Guides trigger is a <button> (there's no single "Guides" page to link
   to, unlike Gear which still has gear.html as a real hub) — reset default
   button chrome so it reads identically to the <a> triggers beside it. */
.nav-desktop .nav-menu-trigger {
  font: inherit; background: none; border: none; cursor: pointer;
  font-size: 0.8rem; letter-spacing: 0.03em; color: var(--polar-white-dim);
  position: relative; padding: 0.4rem 0; transition: color var(--dur-fast);
}
.nav-desktop .nav-menu-trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--aurora-cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-premium);
}
.nav-desktop .nav-menu-trigger:hover { color: var(--polar-white); }
.nav-desktop .nav-menu-trigger:hover::after { transform: scaleX(1); }
.nav-desktop a:focus-visible, .nav-desktop button:focus-visible,
.mega-menu a:focus-visible {
  outline: 2px solid var(--aurora-cyan); outline-offset: 3px; border-radius: 2px;
}

.nav-has-menu { position: relative; }
/* .mega-menu is an invisible hover bridge: it starts flush against the nav
   link (top: 100%, no gap) so the mouse never leaves a hoverable box while
   moving from the link down into the panel. The visual gap and glass panel
   styling live on .mega-menu-inner instead, offset via padding-top — this
   keeps the floating look without breaking hover continuity. */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 1.4rem;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-premium);
}
.nav-has-menu:hover .mega-menu,
.nav-has-menu.is-visible .mega-menu,
.nav-has-menu.is-open .mega-menu {
  opacity: 1; pointer-events: auto;
}
.mega-menu-inner {
  min-width: 560px;
  background: var(--orv-raise);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--orv-radius-card);
  box-shadow: var(--shadow-deep);
  padding: 1.7rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  transform: translateY(6px);
  transition: transform var(--dur-fast) var(--ease-premium);
}
.nav-has-menu:hover .mega-menu-inner,
.nav-has-menu.is-visible .mega-menu-inner,
.nav-has-menu.is-open .mega-menu-inner {
  transform: translateY(0);
}
.mega-menu a {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.mega-menu a:hover { background: rgba(255, 255, 255, 0.05); }
.mega-menu .mega-label { display: block; color: var(--polar-white); margin-bottom: 0.15rem; }
.mega-menu .mega-desc { display: block; color: var(--silver-2); font-size: 0.72rem; }
.mega-menu a::after { display: none; }
/* Comparisons is a content format, not an equipment family — set apart from the
   six product-family links above it with a divider rather than folded into the grid. */
.mega-item-comparisons { grid-column: 1 / -1; border-top: 1px solid var(--glass-border); margin-top: 0.4rem; text-align: center; }
.mega-menu a.mega-item-comparisons { padding-top: 0.9rem; }

.header-actions { display: flex; align-items: center; gap: 1rem; }

/* Site-wide sign-in / account status (js/site-auth-widget.js). Hidden below
   860px (matches the .nav-desktop breakpoint) to keep the already-tight
   mobile header row from overflowing — the mobile-nav drawer below carries
   an identical widget instead. min-width:0 + the email span's own
   max-width/ellipsis are load-bearing: without them a long, unbounded email
   address pushes this row past the header's edge on narrow screens, exactly
   like the Collective subnav overflow this mirrors the fix for. */
.header-auth-status { display: none; align-items: center; gap: 0.7rem; font-size: 0.82rem; color: var(--silver-2); min-width: 0; max-width: 220px; }
.header-auth-status a, .header-auth-status button { color: var(--polar-white-dim); background: none; border: none; cursor: pointer; font-size: 0.82rem; padding: 0; flex: none; }
.header-auth-status a:hover, .header-auth-status button:hover { color: var(--aurora-cyan); }
.header-auth-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 140px; }
.header-auth-status .site-auth-signin {
  display: inline-flex;
  padding: 0.45rem 1.1rem;
  border-radius: var(--orv-radius);
  font-size: 0.78rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--polar-white);
}
.header-auth-status .site-auth-signin:hover { border-color: var(--aurora-cyan); color: var(--polar-white); }
@media (min-width: 861px) { .header-auth-status { display: inline-flex; } }

.mobile-nav-auth-status { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding-top: 1.1rem; margin-top: 0.6rem; border-top: 1px solid var(--line); min-width: 0; }
.mobile-nav-auth-status a, .mobile-nav-auth-status button { font-size: 1rem; color: var(--polar-white-dim); background: none; border: none; cursor: pointer; padding: 0; }
.mobile-nav-auth-status a:hover, .mobile-nav-auth-status button:hover { color: var(--aurora-cyan); }
.mobile-nav-auth-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 55vw; font-size: 1rem; color: var(--polar-white-dim); }
.mobile-nav-auth-status .site-auth-signin {
  display: inline-flex;
  padding: 0.6rem 1.3rem;
  border-radius: var(--orv-radius);
  border: 1px solid var(--line-strong);
  color: var(--polar-white);
  background: transparent;
}

.nav-toggle { display: none; width: 40px; height: 40px; place-items: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 1px; background: var(--polar-white);
  position: relative; transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: none;
}
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero-media canvas, .hero-media img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: 50% 50%;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(5,7,12,0.55), transparent 70%),
    linear-gradient(180deg, rgba(5,7,12,0.35) 0%, rgba(5,7,12,0.45) 45%, var(--space-black) 80%, var(--space-black) 100%);
}
.hero-content { position: relative; z-index: 2; text-align: center; margin: 0 auto; max-width: 980px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.4rem;
  border-radius: 0;
  border: 0;
  background: transparent;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--orv-silver);
  margin-bottom: 2rem;
  backdrop-filter: none;
  border-top: 1px solid var(--orv-hair);
  border-bottom: 1px solid var(--orv-hair);
}
.hero-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orv-ivory);
  box-shadow: none;
}
.hero h1 {
  font-size: clamp(2.1rem, 7vw, 5.2rem);
  line-height: 1.04;
  color: var(--polar-white);
  text-wrap: balance;
  letter-spacing: -0.025em;
}
.hero h1 em {
  font-style: italic;
  color: var(--polar-white);
}
.hero p.lede {
  margin: 1.8rem auto 0; max-width: 560px;
  font-size: 1.08rem; color: var(--polar-white-dim);
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2.6rem; flex-wrap: wrap; }
.hero-strip {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: clamp(1.4rem, 4vw, 3.2rem);
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  flex-wrap: wrap;
  padding: 0 1rem;
}
.hero-strip a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--polar-white-dim);
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  transition: color var(--dur-fast);
  min-height: 44px;
}
.hero-strip a:hover {
  color: var(--orv-ivory);
}
.hero-strip svg { width: 17px; height: 17px; opacity: 0.95; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5)); }

/* Cards */
.card {
  position: relative;
  border-radius: var(--orv-radius-card);
  border: 1px solid var(--line);
  background: transparent;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-premium), border-color var(--dur-fast), box-shadow var(--dur-med) var(--ease-premium);
}
.card:hover {
  transform: none;
  border-color: var(--orv-hair-strong);
  box-shadow: none;
}
.card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.card-media img, .card-media .art { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-premium); }
.card:hover .card-media .art {
  transform: none;
}
.card:hover .card-media img {
  transform: none;
}
.card-media .tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  padding: 0.35rem 0.75rem;
  border-radius: var(--orv-radius);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(7, 8, 10, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  color: var(--orv-ivory);
}
.card-media .tag-illustrative {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  padding: 0.3rem 0.65rem;
  border-radius: var(--orv-radius);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(5,7,12,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  color: var(--silver);
}
.card-body { padding: 1.5rem 1.4rem 1.7rem; }
.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orv-silver);
  margin-bottom: 0.6rem;
  display: block;
  font-weight: 500;
}
.card-body h3 { margin-bottom: 0.6rem; }
.card-body p { font-size: 0.9rem; color: var(--silver); }
.card-meta { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.2rem; font-size: 0.72rem; color: var(--silver-2); letter-spacing: 0.03em; }
.path-link {
  display: flex;
  margin: -0.3rem -0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--silver);
  transition: color var(--dur-fast), background var(--dur-fast);
  min-height: 44px;
  align-items: center;
}
.path-link:hover {
  color: var(--orv-ivory);
  background: rgba(255,255,255,0.04);
}
.card-meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--silver-2); }
.card-title-link { display: inline; color: var(--polar-white); transition: color var(--dur-fast); }
.card-title-link:hover {
  color: var(--orv-ivory);
}
.card-title-link .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-premium); }
.card-title-link:hover .arrow { transform: translateX(3px); }
.card-links { list-style: none; margin: 1.3rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.15rem; }
.card-links .path-link { font-size: 0.86rem; }

.grid { display: grid; gap: clamp(1.3rem, 2.4vw, 2rem); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Generative "art" placeholder media (used where no photo is available) */
.art {
  position: relative;
  background: linear-gradient(160deg, var(--orv-raise-2), var(--orv-base));
}
.art::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 60%, #fff, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, #fff, transparent),
    radial-gradient(1px 1px at 55% 45%, #fff, transparent),
    radial-gradient(1px 1px at 10% 65%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 85%, #fff, transparent);
  opacity: 0.55;
}
.art-ring { position: absolute; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; }

/* Editor's Picks strip */
.picks-strip { display: flex; gap: 1.3rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: none; scroll-behavior: smooth; }
.picks-strip::-webkit-scrollbar { display: none; }
.pick-card { flex: 0 0 320px; }

.scroll-arrows { display: flex; gap: 0.6rem; flex-shrink: 0; }
.scroll-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--polar-white-dim);
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast);
}
.scroll-arrow svg { width: 18px; height: 18px; }
.scroll-arrow:hover:not(:disabled) {
  border-color: var(--aurora-cyan);
  color: var(--polar-white);
  background: transparent;
  transform: none;
}
.scroll-arrow:disabled { opacity: 0.3; pointer-events: none; }
@media (max-width: 640px) { .scroll-arrows { display: none; } }

/* Split feature blocks */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.feature-split.reverse .feature-media { order: 2; }
.feature-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 6/5; border: 1px solid var(--line); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-copy .stat-row { display: flex; gap: 2.4rem; margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.stat-row .stat b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--polar-white); }
.stat-row .stat span { font-size: 0.72rem; color: var(--silver-2); letter-spacing: 0.04em; }

/* Glass panel */
.glass-panel {
  background: var(--orv-raise);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--orv-hair);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* Sightline preview */
.mc-preview { display: block; padding: clamp(2.4rem, 5vw, 4rem); transition: border-color var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), transform var(--dur-med) var(--ease-premium); }
.mc-preview:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.mc-preview:hover img { transform: scale(1.06); }
.mc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-top: 2.4rem; }
.mc-tile {
  background: var(--orv-base);
  padding: 1.6rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mc-tile .mc-icon {
  font-size: 1.4rem;
  opacity: 0.9;
  filter: grayscale(1);
}
.mc-tile h4 { font-family: var(--font-display); color: var(--polar-white); font-size: 1rem; font-weight: 500; }
.mc-tile p { font-size: 0.78rem; color: var(--silver); }

/* Newsletter */
.newsletter { text-align: center; padding: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 6vw, 5rem); }
.newsletter h2 { max-width: 560px; margin: 0 auto; }
.newsletter-form { display: flex; gap: 0.7rem; max-width: 460px; margin: 2.2rem auto 0; }
.newsletter-form input {
  flex: 1;
  padding: 0.95rem 1.3rem;
  border-radius: var(--orv-radius);
  border: 1px solid var(--line-strong);
  background: var(--orv-raise);
  color: var(--polar-white);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--dur-fast);
  border-color: var(--orv-hair-strong);
  min-height: 44px;
}
.newsletter-form input:focus {
  border-color: var(--orv-ivory);
}
.newsletter-form input::placeholder {
  color: var(--orv-silver-2);
}
.newsletter-form button:disabled { opacity: 0.55; pointer-events: none; }
.newsletter-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-note { margin-top: 1rem; font-size: 0.72rem; color: var(--silver-2); }
.newsletter-status { margin-top: 0.6rem; }

/* Form status (contact form) */
.form-status { font-size: 0.82rem; min-height: 1.2em; }
.form-status-success {
  color: var(--orv-ok);
}
.form-status-error {
  color: var(--orv-error);
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: clamp(3.5rem, 6vw, 5rem) 0 2.5rem; position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem; }
.footer-brand img { height: 42px; width: 42px; border-radius: 50%; margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.85rem; color: var(--silver); max-width: 280px; }
.footer-col h5 { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver-2); margin-bottom: 1.1rem; }
.footer-col a {
  display: flex;
  font-size: 0.85rem;
  color: var(--polar-white-dim);
  padding: 0.35rem 0;
  transition: color var(--dur-fast);
  min-height: 44px;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.footer-col a:hover {
  color: var(--orv-ivory);
}
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--silver-2); flex-wrap: wrap; gap: 1rem; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: border-color var(--dur-fast), color var(--dur-fast); }
.footer-social a:hover { border-color: var(--aurora-cyan); color: var(--aurora-cyan); }
.footer-social svg { width: 15px; height: 15px; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--silver-2); margin-bottom: 1.6rem; flex-wrap: wrap; }
.breadcrumb a {
  color: var(--silver);
  transition: color var(--dur-fast);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.breadcrumb a:hover {
  color: var(--orv-ivory);
}
.breadcrumb .sep { opacity: 0.5; }

/* Page hero (inner pages) */
.page-hero { padding: clamp(8rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 5rem); position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.page-hero .lede { max-width: 620px; font-size: 1.05rem; color: var(--silver); margin-top: 1.2rem; }

/* Filter / tab pills */
.pill-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.pill {
  padding: 0.55rem 1.15rem;
  border-radius: var(--orv-radius);
  font-size: 0.78rem;
  border: 1px solid var(--line-strong);
  color: var(--silver);
  transition: all var(--dur-fast);
}
.pill.is-active {
  border-color: var(--orv-ivory);
  color: var(--polar-white);
  background: transparent;
}
.pill:hover {
  border-color: var(--orv-ivory);
  color: var(--polar-white);
  background: transparent;
}

/* Article / Review content */
.article-shell { max-width: 800px; margin: 0 auto; }
.article-shell.wide { max-width: 1000px; }
.article-header { text-align: left; margin-bottom: 2.4rem; }
.article-header h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.affiliate-disclosure { font-size: 0.78rem; color: var(--silver-2); margin-bottom: 1.8rem; }
.article-meta { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; font-size: 0.82rem; color: var(--silver-2); }
.author-chip { display: flex; align-items: center; gap: 0.6rem; }
.author-chip .avatar { width: 32px; height: 32px; border-radius: 50%; background: url('../assets/images/author/santiago-miro.webp') center/cover no-repeat, linear-gradient(135deg, var(--aurora-cyan), var(--midnight-3)); flex-shrink: 0; }
.hero-figure { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/9; margin: 2.2rem 0 2.6rem; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.figcap { font-size: 0.75rem; color: var(--silver-2); margin-top: 0.7rem; text-align: center; }

.prose { font-size: 1.04rem; color: var(--polar-white-dim); }
.prose > * + * { margin-top: 1.4rem; }
.prose h2 { font-size: 1.55rem; margin-top: 2.6rem; }
.prose h3 { font-size: 1.2rem; margin-top: 2rem; }
.prose p { line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-top: 0.5rem; line-height: 1.7; }
.prose li::marker { color: var(--aurora-cyan); }
.prose blockquote {
  border-left: 2px solid var(--aurora-cyan); padding: 0.2rem 0 0.2rem 1.4rem;
  font-family: var(--font-display); font-size: 1.25rem; color: var(--polar-white); font-style: italic;
}
.prose strong { color: var(--polar-white); }

/* Specs table */
.spec-table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 0.9rem; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table td { padding: 0.85rem 0.5rem; }
.spec-table td:first-child { color: var(--silver-2); width: 42%; }
.spec-table td:last-child { color: var(--polar-white); }

/* Pros/cons */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.6rem 0; }
.proscons .box { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.4rem; }
.proscons .box h3 { font-family: var(--font-display); font-weight: 500; margin-bottom: 0.9rem; font-size: 1rem; }
.proscons .pros h3 { color: var(--aurora-cyan); }
.proscons .cons h3 { color: var(--aurora-amber); }
.proscons ul li { font-size: 0.88rem; padding-left: 1.2rem; position: relative; }
.proscons .pros li::before { content: "+"; position: absolute; left: 0; color: var(--aurora-cyan); }
.proscons .cons li::before { content: "–"; position: absolute; left: 0; color: var(--aurora-amber); }

/* Verdict box */
.verdict-box { border-radius: var(--radius-lg); padding: 2rem; margin: 2rem 0; display: flex; gap: 1.6rem; align-items: flex-start; }
.verdict-score { flex: 0 0 auto; text-align: center; }
.verdict-score .num { font-family: var(--font-display); font-size: 2.6rem; color: var(--aurora-cyan); line-height: 1; }
.verdict-score .of { font-size: 0.7rem; color: var(--silver-2); letter-spacing: 0.05em; }

/* Recommendation box (affiliate, styled as expert pick, not an ad) */
.reco-box {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 1.8rem 2rem;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: transparent;
}
.reco-box .reco-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aurora-cyan); margin-bottom: 0.4rem; }
.reco-box .reco-title { font-family: var(--font-display); color: var(--polar-white); font-size: 1.15rem; }
.reco-box .reco-note { font-size: 0.82rem; color: var(--silver); margin-top: 0.3rem; }

/* Reader offer card — an early, discreet retailer-discount notice, distinct
   from .reco-box (the end-of-article expert-pick recommendation). Reusable
   across any review/comparison that has a real, confirmed reader discount. */
.reader-offer-card {
  padding: 1.4rem 1.8rem; margin: 1.8rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.reader-offer-card .reader-offer-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aurora-cyan); margin-bottom: 0.3rem; }
.reader-offer-card .reader-offer-heading { font-family: var(--font-display); color: var(--polar-white); font-size: 1.15rem; margin: 0 0 0.5rem; }
.reader-offer-card .reader-offer-copy { font-size: 0.92rem; color: var(--polar-white-dim); margin: 0; }
.reader-offer-card .reader-offer-copy code { color: var(--aurora-cyan); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.02em; }
.reader-offer-card .reader-offer-note { font-size: 0.76rem; color: var(--silver-2); margin: 0.6rem 0 0; }

/* Reader offer card, homepage variant — same offer, styled to stand on its
   own as a section rather than blend in like the in-article inline notice. */
.reader-offer-card--home {
  padding: 2rem 2.4rem;
  border: 1px solid var(--orv-hair-strong);
  background: var(--orv-raise);
  box-shadow: none;
}
.reader-offer-card--home .reader-offer-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; }
.reader-offer-card--home .reader-offer-label::before { content: "✦"; color: var(--aurora-cyan); }
.reader-offer-card--home .reader-offer-heading { font-size: 1.5rem; }
.reader-offer-card--home .reader-offer-copy { font-size: 1rem; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1.4rem 0; text-align: left; cursor: pointer; }
.faq-q h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; color: var(--polar-white); }
.faq-icon { width: 20px; height: 20px; position: relative; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--silver); top: 50%; left: 50%; transform: translate(-50%,-50%); transition: transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast); }
.faq-icon::before { width: 12px; height: 1px; }
.faq-icon::after { width: 1px; height: 12px; }
.faq-item.is-open .faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-premium); }
.faq-a p { padding-bottom: 1.4rem; font-size: 0.92rem; color: var(--silver); line-height: 1.7; }
.faq-item.is-open .faq-a { max-height: 260px; }

/* Comparison table */
.compare-wrap { overflow-x: auto; margin: 1.5rem 0; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.88rem; }
.compare-table th { color: var(--silver-2); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.compare-table td { color: var(--polar-white-dim); }
.compare-table tr:first-child th { border-bottom: 1px solid var(--line-strong); }

/* Sightline page */
.mc-hero-stat { display: flex; gap: 3rem; flex-wrap: wrap; margin-top: 2.6rem; }
.mc-panel { padding: 2rem; height: 100%; }
.mc-panel h3 { display: flex; align-items: center; gap: 0.6rem; }
.mc-panel .icon { font-size: 1.3rem; }
.event-row { display: flex; justify-content: space-between; padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.event-row:last-child { border-bottom: none; }
.event-status {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 0.5em;
  padding: 0.1em 0.5em;
  border-radius: var(--orv-radius);
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}
.event-status.is-past { color: var(--silver-2); opacity: 0.75; }
.event-status.is-today { color: var(--polar-white); border-color: var(--aurora-cyan); }
.event-status.is-upcoming { color: var(--aurora-cyan); }
.mc-lastverified { font-size: 0.78rem; color: var(--silver-2); margin-top: 1rem; }
.event-row .date { color: var(--aurora-cyan); font-size: 0.78rem; min-width: 70px; }
.moon-phase-row { display: flex; justify-content: space-between; align-items: center; }
.editor-quote { font-family: var(--font-display); font-size: 1.15rem; color: var(--polar-white); font-style: italic; line-height: 1.6; }

/* Reveal animation base */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* Utility */
.mt-0 { margin-top: 0 !important; }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.mobile-only { display: none; }

/* Responsive */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mega-menu-inner { min-width: 460px; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: grid; }
  .feature-split { grid-template-columns: 1fr; }
  .feature-split.reverse .feature-media { order: 0; }
  .proscons { grid-template-columns: 1fr; }
  .mc-grid { grid-template-columns: repeat(2, 1fr); }
  .verdict-box { flex-direction: column; }
}

@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .newsletter-form { flex-direction: column; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { justify-content: center; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .mc-grid { grid-template-columns: 1fr; }
  .mobile-only { display: block; }
}

/* Site search */
.search-trigger {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--polar-white-dim);
  border: 1px solid transparent;
  flex-shrink: 0;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.search-trigger:hover { border-color: var(--line-strong); color: var(--polar-white); background: rgba(255,255,255,0.03); }
.search-trigger svg { width: 18px; height: 18px; }

.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,7,12,0.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1.5rem 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-premium), visibility var(--dur-fast);
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-panel {
  width: 100%;
  max-width: 620px;
  background: var(--orv-raise);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--orv-radius-card);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  transform: translateY(-14px);
  transition: transform var(--dur-fast) var(--ease-premium);
  max-height: 74vh;
  display: flex;
  flex-direction: column;
}
.search-overlay.is-open .search-panel { transform: translateY(0); }
.search-input-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.search-icon { width: 19px; height: 19px; color: var(--silver-2); flex-shrink: 0; }
#search-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--polar-white); font-size: 1.02rem; font-family: var(--font-sans);
}
#search-input::placeholder { color: var(--silver-2); }
.search-close {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--silver-2);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.search-close:hover { color: var(--polar-white); background: rgba(255,255,255,0.06); }
.search-close svg { width: 14px; height: 14px; }

.search-results { overflow-y: auto; padding: 0.6rem; }
.search-hint, .search-empty { padding: 2.2rem 1.2rem; text-align: center; color: var(--silver-2); font-size: 0.85rem; }
.search-hint strong, .search-empty strong { color: var(--polar-white-dim); font-weight: 500; }
.search-result {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 0.9rem; border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}
.search-result:hover { background: rgba(255,255,255,0.05); }
.search-result-tag {
  flex-shrink: 0; padding: 0.32rem 0.65rem; border-radius: 999px;
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  background: transparent; color: var(--orv-silver); border: 1px solid var(--orv-hair-strong);
  white-space: nowrap;
}
.search-result-body h4 { font-family: var(--font-display); font-weight: 500; color: var(--polar-white); font-size: 0.94rem; }
.search-result-body p { font-size: 0.78rem; color: var(--silver); margin-top: 0.2rem; }
@media (max-width: 640px) {
  .search-overlay { padding: 6vh 1rem 1.5rem; }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--orv-void);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 6.5rem 2rem 2rem;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium), visibility var(--dur-fast);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--polar-white);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.mobile-nav a:focus-visible, .mobile-nav-subtoggle:focus-visible {
  outline: 2px solid var(--aurora-cyan); outline-offset: 2px;
}
.mobile-nav-group { border-bottom: 1px solid var(--line); }
.mobile-nav-subtoggle {
  font: inherit; font-family: var(--font-display); font-size: 1.6rem;
  color: var(--polar-white); background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.7rem 0; text-align: left;
}
.mobile-nav-subtoggle span { font-size: 1.1rem; transition: transform var(--dur-fast) var(--ease-premium); }
.mobile-nav-subtoggle[aria-expanded="true"] span { transform: rotate(180deg); }
.mobile-nav-submenu { display: flex; flex-direction: column; padding: 0 0 0.6rem 1rem; }
.mobile-nav-submenu a { font-size: 1.15rem; border-bottom: none; padding: 0.55rem 0; }
.mobile-nav-submenu[hidden] { display: none; }

/* ================= SIGHTLINE 2.0 — Live Sky ================= */

/* ---- Location bar / CTA ---- */
.mc-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aurora-cyan);
  box-shadow: none;
  display: inline-block;
  animation: mc-pulse 2.4s ease-in-out infinite;
}
@keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .mc-live-dot { animation: none; } }
.mc-location-status { font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--polar-white-dim); text-transform: uppercase; display: flex; align-items: center; gap: 0.55rem; }
.mc-location-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.mc-location-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.mc-location-cta[hidden] { display: none; }
.mc-location-controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.mc-location-controls[hidden] { display: none; }
.mc-location-status[hidden] { display: none; }
.mc-link-btn {
  background: none;
  border: none;
  color: var(--orv-ivory);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.3rem 0;
  font-family: var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--orv-hair-strong);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.mc-link-btn:hover {
  text-decoration: underline;
  text-decoration-color: var(--orv-ivory);
}
.mc-link-btn:focus-visible, .mc-plan-option:focus-visible, .mc-tab-btn:focus-visible, .mc-plan-row:focus-visible, .mc-target-summary:focus-visible, .mc-saved-chip-main:focus-visible, .mc-saved-chip-remove:focus-visible {
  outline: 2px solid var(--aurora-cyan);
  outline-offset: 2px;
}
.btn:focus-visible {
  outline: 2px solid var(--orv-focus);
  outline-offset: 3px;
}

/* ---- Modals ---- */
.mc-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(5,7,12,0.75); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.mc-modal-overlay[hidden] { display: none; }
.mc-modal { background: var(--space-black-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 2rem; max-width: 420px; width: 100%; position: relative; box-shadow: var(--shadow-soft); }
.mc-modal h3 { font-family: var(--font-display); color: var(--polar-white); font-size: 1.3rem; margin-bottom: 0.6rem; }
.mc-modal p { color: var(--silver); font-size: 0.9rem; line-height: 1.6; }
.mc-modal-actions { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.4rem; }
.mc-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--silver-2); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 0.3rem; }
.mc-modal-close:hover { color: var(--polar-white); }
.mc-modal-status {
  font-size: 0.82rem;
  color: var(--orv-ok);
  margin-top: 0.8rem;
}
.mc-modal {
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--orv-radius-card);
  background: var(--orv-raise);
}
.mc-search-input {
  width: 100%;
  padding: 0.85rem 1rem;
  margin-top: 1rem;
  border-radius: var(--orv-radius);
  border: 1px solid var(--line-strong);
  background: var(--orv-raise);
  color: var(--polar-white);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  border-color: var(--orv-hair-strong);
  min-height: 44px;
}
.mc-search-error {
  color: var(--orv-error);
  font-size: 0.82rem;
  margin-top: 0.8rem;
}
.mc-search-status { color: var(--silver-2); font-size: 0.82rem; margin-top: 0.8rem; }
.mc-search-examples { font-size: 0.76rem; color: var(--silver-2); margin-top: 0.5rem; }

/* ---- Global location autocomplete ---- */
.mc-geo-combobox { position: relative; }
.mc-geo-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--orv-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--orv-radius-card);
  box-shadow: var(--shadow-deep);
}
.mc-geo-listbox[hidden] { display: none; }
.mc-geo-option { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); cursor: pointer; }
.mc-geo-option-name { color: var(--polar-white-dim); font-size: 0.9rem; line-height: 1.4; }
.mc-geo-option-type { flex-shrink: 0; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--silver-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.2rem 0.55rem; }
.mc-geo-option.is-active {
  background: rgba(242, 239, 232, 0.07);
}
.mc-geo-option:hover {
  background: rgba(242, 239, 232, 0.07);
}
.mc-geo-option.is-active .mc-geo-option-name { color: var(--polar-white); }
.mc-geo-option.is-active .mc-geo-option-type { color: var(--aurora-cyan); border-color: var(--aurora-cyan-dim); }
.mc-geo-region-note {
  font-size: 0.78rem;
  color: var(--orv-error);
  margin-top: 0.6rem;
}
@media (max-width: 480px) { .mc-geo-listbox { max-height: 42vh; } }

/* ---- Tabs ---- */
.mc-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--line); margin: 2rem 0 0; flex-wrap: wrap; }
.mc-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--silver-2); font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.9rem 1.1rem; cursor: pointer; transition: color var(--dur-fast) var(--ease-premium), border-color var(--dur-fast); }
.mc-tab-btn:hover { color: var(--polar-white-dim); }
.mc-tab-btn.is-active { color: var(--polar-white); border-bottom-color: var(--aurora-cyan); }
.mc-tab-panel[hidden] { display: none; }
.mc-tab-panel { padding-top: 2.4rem; }

/* ---- Tonight at a Glance ---- */
.mc-glance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.mc-glance-stat {
  background: var(--orv-base);
  padding: 1.3rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mc-glance-label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver-2); }
.mc-glance-value { font-family: var(--font-display); font-size: 1.05rem; color: var(--polar-white); font-weight: 500; }
.mc-score-row { display: flex; gap: 1.4rem; align-items: center; margin-top: 1.6rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.mc-score-badge { font-family: var(--font-display); color: var(--aurora-cyan); flex-shrink: 0; display: flex; align-items: baseline; gap: 0.15rem; }
.mc-score-badge b { font-size: 2.2rem; }
.mc-score-badge span { font-size: 0.9rem; color: var(--silver-2); }
.mc-score-title { color: var(--polar-white); font-family: var(--font-display); font-size: 1rem; }
.mc-score-sub { font-size: 0.8rem; color: var(--silver-2); margin-top: 0.3rem; }
@media (max-width: 640px) { .mc-glance-grid { grid-template-columns: repeat(2, 1fr); } .mc-score-row { flex-direction: column; align-items: flex-start; } }

/* ---- Moon module ---- */
.mc-moon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.mc-moon-phase { font-family: var(--font-display); font-size: 1.2rem; color: var(--polar-white); }
.mc-moon-illum { font-size: 0.85rem; color: var(--silver); margin-top: 0.3rem; }
.mc-moon-recommend { font-size: 0.85rem; color: var(--silver); margin-top: 1.2rem; }

/* ---- Planets Tonight ---- */
.mc-planets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.mc-planet-card { background: var(--space-black-2); padding: 1.2rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.mc-planet-name { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--aurora-cyan); }
.mc-planet-status { font-family: var(--font-display); color: var(--polar-white); font-size: 0.95rem; }
.mc-planet-detail { font-size: 0.76rem; color: var(--silver-2); }

/* ---- Mode toggle (Observe / Capture) ---- */
.mc-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--orv-radius);
  padding: 0.25rem;
  gap: 0.25rem;
  min-height: 44px;
}
.mc-mode-toggle button {
  background: none;
  border: none;
  color: var(--silver-2);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border-radius: var(--orv-radius);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--dur-fast), color var(--dur-fast);
  min-height: 44px;
}
.mc-mode-toggle button.is-active {
  background: var(--orv-ivory);
  color: var(--orv-void);
}

/* ---- Target cards (closed / expanded) ---- */
.mc-target-card { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 0.9rem; overflow: hidden; }
.mc-target-summary { width: 100%; text-align: left; background: none; border: none; padding: 1.2rem 1.4rem; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: center; color: inherit; font-family: inherit; }
.mc-target-title { font-family: var(--font-display); color: var(--polar-white); font-size: 1.02rem; }
.mc-target-catalog { font-size: 0.75rem; color: var(--silver-2); font-family: var(--font-sans); }
.mc-target-status { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aurora-cyan); justify-self: end; }
.mc-target-quickstats { grid-column: 1; display: flex; gap: 1.2rem; font-size: 0.82rem; color: var(--silver); }
.mc-target-quickstats b { color: var(--polar-white); }
.mc-target-window { grid-column: 1 / -1; font-size: 0.8rem; color: var(--silver-2); }
.mc-card-chevron { justify-self: end; color: var(--silver-2); transition: transform var(--dur-fast) var(--ease-premium); }
.mc-target-summary[aria-expanded="true"] .mc-card-chevron { transform: rotate(180deg); }
.mc-target-body { padding: 0 1.4rem 1.6rem; border-top: 1px solid var(--line); }
.mc-target-body[hidden] { display: none; }

/* ---- Altitude chart ---- */
.mc-chart-figure { margin: 1.4rem 0 0.6rem; }
.mc-alt-chart { width: 100%; height: auto; display: block; }
.mc-alt-gridline { stroke: var(--line); stroke-width: 1; }
.mc-alt-gridline-ref { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.mc-alt-axislabel { fill: var(--silver-2); font-size: 10px; font-family: var(--font-sans); }
.mc-alt-curve { stroke: var(--aurora-cyan); stroke-width: 2; }
.mc-alt-curve-below { stroke: var(--silver-2); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0.6; }
.mc-alt-eventline { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.mc-alt-eventlabel { fill: var(--silver-2); font-size: 9px; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; }
.mc-alt-peak {
  fill: var(--orv-ivory);
  font-size: 14px;
  color: var(--orv-ivory-dim);
}
.mc-alt-now-dot { fill: var(--aurora-cyan); }
.mc-alt-now-ring { fill: none; stroke: var(--aurora-cyan); stroke-width: 1.2; opacity: 0.5; }
.mc-alt-empty { fill: var(--silver-2); font-size: 12px; font-family: var(--font-sans); }
.mc-alt-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.78rem; color: var(--silver); margin-top: 0.6rem; }
.mc-alt-legend b { color: var(--polar-white); font-family: var(--font-display); font-weight: 500; }
.mc-alt-note { font-size: 0.75rem; color: var(--silver-2); margin-top: 0.5rem; }
.mc-peak-line { font-size: 0.85rem; color: var(--polar-white-dim); margin-top: 0.8rem; }

/* ---- Compass ---- */
.mc-compass-wrap { max-width: 160px; margin-top: 0.8rem; }
.mc-compass { width: 100%; height: auto; }
.mc-compass-ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.mc-compass-ring-inner { fill: none; stroke: var(--line); stroke-width: 1; }
.mc-compass-label { fill: var(--silver-2); font-size: 9px; font-family: var(--font-sans); }
.mc-compass-label-major { fill: var(--polar-white-dim); font-size: 10px; font-weight: 600; }
.mc-compass-needle { stroke: var(--aurora-cyan); stroke-width: 2; }
.mc-compass-dot { fill: var(--aurora-cyan); }

/* ---- Expanded card grid ---- */
.mc-expand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.6rem; margin-top: 1.6rem; }
.mc-expand-grid h4 { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aurora-cyan); margin-bottom: 0.6rem; }
.mc-expand-grid p { font-size: 0.85rem; color: var(--silver); line-height: 1.6; }
.mc-expand-grid p b { color: var(--polar-white-dim); font-weight: 500; }
.mc-coord-note { font-size: 0.72rem; color: var(--silver-2); }
.mc-related { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* ---- Tonight's Session (Saved Targets) ---- */
.mc-saved-empty { font-size: 0.88rem; color: var(--silver); line-height: 1.6; }
.mc-saved-summary { font-size: 0.85rem; color: var(--silver); margin-bottom: 0.9rem; }
.mc-saved-summary b { color: var(--aurora-cyan); font-weight: 500; }
.mc-saved-chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.1rem; }
.mc-saved-chip {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border: 1px solid var(--aurora-cyan-dim);
  border-radius: var(--orv-radius);
  padding: 0.3rem 0.4rem 0.3rem 0.2rem;
  font-size: 0.85rem;
  color: var(--polar-white-dim);
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast);
  border-color: var(--orv-hair-strong);
}
.mc-saved-chip.is-active {
  border-color: var(--orv-ivory);
  background: rgba(242, 239, 232, 0.06);
}
.mc-saved-chip-main {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: none; border: none; padding: 0.2rem 0.5rem; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 999px;
}
.mc-saved-chip-main:hover { color: var(--polar-white); }
.mc-saved-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--silver-2); }
.mc-saved-chip-dot--cyan {
  background: var(--orv-ivory);
  box-shadow: none;
}
.mc-saved-chip-dot--amber {
  background: var(--orv-silver);
  box-shadow: none;
}
.mc-saved-chip-dot--muted { background: var(--silver-2); }
.mc-saved-chip-text { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.3; }
.mc-saved-chip-name { color: var(--polar-white-dim); }
.mc-saved-chip-status { font-size: 0.72rem; color: var(--silver-2); }
.mc-saved-chip-catalog { color: var(--silver-2); font-size: 0.78rem; }
.mc-saved-chip-remove {
  background: rgba(255,255,255,0.04); border: none; border-radius: 50%;
  width: 24px; height: 24px; flex-shrink: 0; color: var(--silver); align-self: center;
  font-size: 1rem; line-height: 1; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: background var(--dur-fast), color var(--dur-fast);
}
.mc-saved-chip-remove:hover { background: rgba(255,255,255,0.1); color: var(--polar-white); }

/* ---- Saved target quick view ---- */
.mc-saved-quickview {
  background: var(--space-black-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--orv-radius-card);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.1rem;
  animation: mc-quickview-in var(--dur-fast) var(--ease-premium);
}
@media (prefers-reduced-motion: reduce) { .mc-saved-quickview { animation: none; } }
@keyframes mc-quickview-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.mc-saved-quickview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.mc-saved-quickview-title { font-family: var(--font-display); color: var(--polar-white); font-size: 1.1rem; }
.mc-saved-quickview-sub { font-size: 0.78rem; color: var(--silver-2); margin-top: 0.2rem; }
.mc-saved-quickview-metrics { grid-template-columns: repeat(4, 1fr); margin: 1rem 0 0.9rem; }
.mc-saved-quickview-moon { font-size: 0.82rem; color: var(--silver); margin-top: 0.9rem; }
.mc-saved-quickview-why { font-size: 0.85rem; color: var(--silver); line-height: 1.6; margin-top: 0.4rem; }
@media (max-width: 700px) { .mc-saved-quickview-metrics { grid-template-columns: 1fr 1fr; } }

/* ---- Standalone target detail (Track Live for a target outside Tonight's top-N) ---- */
.mc-target-detail-standalone-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

/* ---- Plan a Session ---- */
.mc-plan-step { margin-bottom: 1.8rem; }
.mc-plan-step-label {
  font-family: var(--font-display);
  color: var(--polar-white);
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
  letter-spacing: 0.01em;
}
.mc-plan-options { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mc-plan-option {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--orv-radius);
  padding: 0.6rem 1.1rem;
  color: var(--orv-silver);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  min-height: 44px;
}
.mc-plan-option:hover {
  border-color: var(--orv-silver);
  color: var(--orv-ivory);
}
.mc-plan-option.is-active {
  background: var(--orv-ivory);
  border-color: var(--orv-ivory);
  color: var(--orv-void);
  font-weight: 600;
}
.mc-plan-option[hidden] { display: none; }
.mc-plan-mode-hint { font-size: 0.78rem; color: var(--silver-2); margin-top: 0.6rem; }
.mc-plan-custom-start { margin-top: 0.9rem; }
.mc-plan-custom-start[hidden] { display: none; }
.mc-plan-custom-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.mc-plan-custom-field { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 150px; min-width: 150px; }
.mc-plan-custom-field label { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--silver-2); }
.mc-plan-custom-field input { padding: 0.65rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); color: var(--polar-white); font-size: 0.9rem; font-family: var(--font-sans); color-scheme: dark; }
.mc-plan-custom-field input:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: 2px; }
.mc-plan-custom-error {
  color: var(--orv-error);
  font-size: 0.8rem;
  margin-top: 0.7rem;
}
.mc-plan-custom-error[hidden] { display: none; }
.mc-plan-start-preview { font-size: 0.82rem; color: var(--silver-2); margin-top: 0.7rem; }
.mc-plan-start-preview:empty { display: none; }
.mc-plan-empty-reasons { margin: 0.8rem 0 0; padding-left: 1.2rem; }
.mc-plan-empty-reasons li { font-size: 0.88rem; color: var(--silver); line-height: 1.6; margin-top: 0.4rem; }
.mc-plan-empty-actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.1rem; }
.mc-plan-actions-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.mc-plan-results-title { font-family: var(--font-display); color: var(--polar-white); font-size: 1.15rem; margin-bottom: 1rem; }

/* ---- Plan a Session: premium result cards ---- */
.mc-plan-card { background: var(--space-black-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.5rem 1.6rem; margin-bottom: 1.1rem; transition: border-color var(--dur-fast) var(--ease-premium); }
.mc-plan-card:hover { border-color: var(--line-strong); }
.mc-plan-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mc-plan-card-title { font-family: var(--font-display); color: var(--polar-white); font-size: 1.15rem; }
.mc-plan-card-sub { font-size: 0.8rem; color: var(--silver-2); margin-top: 0.25rem; }
.mc-plan-strong {
  background: rgba(242, 239, 232, 0.04);
  border: 1px solid var(--aurora-cyan-dim);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  margin-top: 1.1rem;
  font-size: 0.84rem;
  color: var(--silver);
  border-color: var(--orv-hair-strong);
}
.mc-plan-strong b { color: var(--aurora-cyan); }
.mc-plan-strong.is-muted { background: rgba(255,255,255,0.02); border-color: var(--line-strong); }
.mc-plan-strong.is-muted b { color: var(--polar-white-dim); }
.mc-plan-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem 1rem; margin: 1.2rem 0; padding: 1.1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mc-plan-metric-label { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--silver-2); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.3rem; }
.mc-plan-metric-value { font-family: var(--font-display); font-size: 1rem; color: var(--polar-white); line-height: 1.35; }
.mc-plan-metric-note { font-size: 0.72rem; color: var(--silver-2); margin-top: 0.3rem; display: block; line-height: 1.5; }
.mc-vis-info { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--silver-2); font-size: 0.6rem; cursor: help; }
.mc-vis-dots { display: inline-flex; gap: 0.22rem; margin-left: 0.55rem; vertical-align: middle; }
.mc-vis-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.mc-vis-dot--on {
  background: var(--orv-copper-hi);
  box-shadow: none;
}
.mc-vis-dot--pulse { animation: mc-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mc-vis-dot--pulse { animation: none; } }
.mc-plan-next {
  background: transparent;
  border: 1px solid rgba(232,176,106,0.32);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.1rem;
  border-color: var(--orv-hair-strong);
}
.mc-plan-next-label {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orv-ivory-dim);
  margin-bottom: 0.35rem;
  fill: var(--orv-ivory);
}
.mc-plan-next-date { font-family: var(--font-display); color: var(--polar-white); font-size: 0.98rem; }
.mc-plan-next-reason { font-size: 0.8rem; color: var(--silver); margin-top: 0.3rem; }
.mc-plan-why { font-size: 0.85rem; color: var(--silver); line-height: 1.75; }
.mc-plan-why b { color: var(--polar-white-dim); }
@media (max-width: 700px) { .mc-plan-metrics { grid-template-columns: 1fr 1fr; } }

/* ---- Plan a Session: filters, grouping, expandable results ---- */
.mc-plan-count-note { font-size: 0.82rem; color: var(--silver-2); margin-bottom: 1rem; }
.mc-plan-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.3rem; }
.mc-plan-filter-chip { background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.4rem 0.9rem; color: var(--silver-2); font-size: 0.76rem; cursor: pointer; font-family: var(--font-sans); transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
.mc-plan-filter-chip:hover { border-color: var(--aurora-cyan-dim); color: var(--polar-white-dim); }
.mc-plan-filter-chip.is-active { background: var(--aurora-cyan); border-color: var(--aurora-cyan); color: var(--space-black); }
/* ---- Plan a Session: unified searchable ranked list ---- */
.mc-plan-attribution { font-size: 0.72rem; color: var(--silver-2); margin-bottom: 1rem; line-height: 1.5; }
.mc-plan-attribution a { color: var(--aurora-cyan); }
.mc-plan-search-bar { margin-bottom: 1rem; }
.mc-plan-search-input {
  width: 100%; max-width: 480px; padding: 0.8rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); color: var(--polar-white);
  font-family: var(--font-sans); font-size: 0.88rem; transition: border-color var(--dur-fast) var(--ease-premium);
}
.mc-plan-search-input::placeholder { color: var(--silver-2); }
.mc-plan-search-input:focus { outline: none; border-color: var(--aurora-cyan); }
.mc-plan-ranked-list { display: flex; flex-direction: column; gap: 0.6rem; }
.mc-plan-row-wrap {
  border: 1px solid var(--line);
  border-radius: var(--orv-radius-card);
  background: var(--space-black-2);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-premium);
}
.mc-plan-row-wrap:hover { border-color: var(--line-strong); }
.mc-plan-row-wrap.is-recommended {
  border-color: var(--orv-silver-2);
}
.mc-plan-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem;
  width: 100%; padding: 0.9rem 1.2rem; background: none; border: none; color: inherit;
  font-family: var(--font-sans); text-align: left; cursor: pointer;
}
.mc-plan-row-rank { font-family: var(--font-display); font-size: 0.85rem; color: var(--silver-2); min-width: 2.6rem; }
.mc-plan-row-wrap.is-recommended .mc-plan-row-rank { color: var(--aurora-cyan); }
.mc-plan-row-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mc-plan-row-name { font-family: var(--font-display); color: var(--polar-white); font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mc-plan-row-badge {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orv-copper-hi);
  border: 1px solid var(--orv-copper);
  border-radius: var(--orv-radius);
  padding: 0.15rem 0.5rem;
  background: rgba(201, 138, 91, 0.08);
}
.mc-plan-row-badge--saved { color: var(--polar-white-dim); border-color: var(--line-strong); background: rgba(255,255,255,0.05); }
.mc-plan-row-meta { font-size: 0.78rem; color: var(--silver-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-plan-row-stats { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: flex-end; }
.mc-plan-row-score { font-family: var(--font-display); color: var(--orv-copper-hi); font-size: 0.88rem; white-space: nowrap; }
.mc-plan-row-window { font-size: 0.76rem; color: var(--silver-2); white-space: nowrap; }
.mc-plan-row-chevron { color: var(--silver-2); font-size: 1.2rem; transition: transform 300ms var(--ease-premium); }
.mc-plan-row[aria-expanded="true"] .mc-plan-row-chevron { transform: rotate(90deg); color: var(--aurora-cyan); }
/* Smooth expand/collapse (§ row interaction): a 0fr/1fr grid-row track is the
   part of the box model that actually animates; the row itself is never
   `hidden`/display:none (that can't be transitioned, and the spec explicitly
   asks it not be used that way) — `inert` (toggled in JS) is what keeps the
   collapsed content out of the tab order instead. The inner wrapper needs
   `overflow:hidden` + `min-height:0` for the 0fr track to actually clip its
   content rather than the child forcing the row taller than its track. */
.mc-plan-row-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 300ms var(--ease-premium), opacity 300ms var(--ease-premium);
}
.mc-plan-row-detail.is-open { grid-template-rows: 1fr; opacity: 1; }
/* Pure clip layer, deliberately NO padding of its own -- padding belongs one
   level deeper (.mc-plan-row-detail-content) so this layer's intrinsic size
   is genuinely 0 at rest. A padded clip layer would leave a several-pixel
   sliver visible even at grid-template-rows:0fr, since padding doesn't
   shrink away with the parent track. */
.mc-plan-row-detail-inner { overflow: hidden; min-height: 0; }
.mc-plan-row-detail-content { padding: 0 1.2rem 1.2rem; border-top: 1px solid var(--line); }
.mc-plan-row-detail-content > .mc-plan-metrics:first-child,
.mc-plan-row-detail-content > .mc-plan-rank-note:first-child { margin-top: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  .mc-plan-row-detail, .mc-plan-row-chevron { transition-duration: 0.01ms; }
}
.mc-plan-rank-note { font-size: 0.76rem; color: var(--silver-2); margin: 1.1rem 0 0; }
.mc-plan-load-more-sentinel { height: 1px; }
.mc-plan-not-observable { background: rgba(255,255,255,0.02); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 1.3rem 1.5rem; }
.mc-plan-not-observable-title { font-family: var(--font-display); color: var(--polar-white); font-size: 1.1rem; }
.mc-plan-not-observable-meta { font-size: 0.8rem; color: var(--silver-2); margin-top: 0.25rem; }
.mc-plan-not-observable-status {
  font-size: 0.85rem;
  color: var(--orv-error);
  margin-top: 0.8rem;
}
@media (max-width: 640px) {
  .mc-plan-row { grid-template-columns: auto 1fr auto; gap: 0.6rem; padding: 0.8rem 1rem; }
  .mc-plan-row-stats { grid-column: 1 / -1; justify-content: flex-start; padding-left: 2.6rem; }
  .mc-plan-row-chevron { display: none; }
}

/* ---- Next event / meteor shower ---- */
.mc-event-kicker { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aurora-cyan); }
.mc-event-date { color: var(--silver); font-size: 0.9rem; margin-top: 0.3rem; }
.mc-countdown { font-family: var(--font-display); font-size: 1.6rem; color: var(--polar-white); margin: 0.6rem 0; letter-spacing: 0.02em; }
.mc-event-visibility, .mc-event-note { font-size: 0.78rem; color: var(--silver-2); }

/* ---- Weather ---- */
.mc-weather-title { font-family: var(--font-display); color: var(--polar-white); font-size: 1rem; }
.mc-weather-source { font-size: 0.72rem; color: var(--silver-2); display: block; margin-top: 0.4rem; }

/* ---- Misc ---- */
.mc-empty-note { color: var(--silver-2); font-size: 0.9rem; padding: 1rem 0; }
.mc-stale-banner {
  background: transparent;
  border: 1px solid rgba(232,176,106,0.35);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.2rem;
  font-size: 0.85rem;
  color: var(--silver);
  margin-bottom: 1.6rem;
  border-color: var(--orv-hair-strong);
}
.mc-stale-banner strong {
  color: var(--orv-ivory);
}

@media (max-width: 640px) {
  .mc-expand-grid { grid-template-columns: 1fr; }
  .mc-target-summary { grid-template-columns: 1fr; }
  .mc-target-status { justify-self: start; }
  .mc-card-chevron { position: absolute; top: 1.2rem; right: 1.4rem; }
  .mc-target-summary { position: relative; padding-right: 2.4rem; }
}

/* ================= SIGHTLINE 2.5 — Premium redesign ================= */

/* ---- Chip / badge component (reused across dashboard, planets, targets, plan) ---- */
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.32rem 0.75rem;
  border-radius: var(--orv-radius);
  border: 1px solid var(--line-strong);
  color: var(--silver);
  background: transparent;
  white-space: nowrap;
  line-height: 1.3;
}
.mc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.mc-chip--cyan {
  color: var(--orv-ivory);
  border-color: var(--orv-silver-2);
  background: rgba(242, 239, 232, 0.06);
}
.mc-plan-row .mc-chip--cyan {
  color: var(--orv-copper-hi);
  border-color: var(--orv-copper);
  background: rgba(201, 138, 91, 0.08);
}
.mc-chip--amber {
  color: var(--orv-ivory-dim);
  border-color: var(--orv-hair-strong);
  background: transparent;
}
.mc-chip--muted { color: var(--silver-2); border-color: var(--line-strong); background: transparent; }
.mc-chip--muted::before { display: none; }
.mc-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- Location bar, elevated to feel "live" ---- */
.mc-location-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  padding: 0.85rem 1.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--orv-radius);
  background: transparent;
  width: fit-content;
  max-width: 100%;
}
.mc-location-row[hidden] { display: none; }
.mc-location-status { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.05em; color: var(--polar-white); text-transform: uppercase; display: flex; align-items: center; gap: 0.6rem; }
.mc-location-controls { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; padding-left: 1rem; border-left: 1px solid var(--line-strong); }
@media (max-width: 560px) { .mc-location-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    border-radius: var(--orv-radius);
  } .mc-location-controls { padding-left: 0; border-left: none; padding-top: 0.5rem; border-top: 1px solid var(--line); width: 100%; } }

/* ---- Tabs, premium pill style ---- */
.mc-tabs {
  display: inline-flex;
  gap: 0.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--orv-radius);
  padding: 0.3rem;
  margin: 2.2rem 0 0;
  background: transparent;
}
.mc-tab-btn {
  background: none;
  border: none;
  border-bottom: none;
  border-radius: 2px;
  color: var(--silver-2);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  padding: 0.65rem 1.3rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-premium), background var(--dur-fast);
  min-height: 44px;
  text-transform: uppercase;
}
.mc-tab-btn:hover { color: var(--polar-white-dim); }
.mc-tab-btn.is-active {
  color: var(--orv-void);
  background: var(--orv-ivory);
  font-weight: 600;
}
@media (max-width: 640px) { .mc-tabs { display: flex; width: 100%; } .mc-tab-btn { flex: 1; text-align: center; padding: 0.65rem 0.6rem; } }

/* ---- Hero card: "Tonight's observing conditions" ---- */
.mc-hero-card {
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: var(--orv-radius-card);
  border: 1px solid var(--line-strong);
  background: var(--orv-raise);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
.mc-hero-score-wrap { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.mc-hero-score-ring { width: 100%; height: 100%; }
.mc-hero-score-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mc-hero-score-num b { font-family: var(--font-display); font-size: 2.3rem; color: var(--polar-white); line-height: 1; }
.mc-hero-score-num span { font-size: 0.68rem; color: var(--silver-2); letter-spacing: 0.06em; margin-top: 0.2rem; }
.mc-hero-body { min-width: 0; }
.mc-hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orv-silver);
  font-weight: 500;
}
.mc-hero-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--polar-white); margin: 0.35rem 0 0.9rem; text-transform: uppercase; letter-spacing: 0.02em; }
.mc-hero-score-skeleton { width: 100%; height: 100%; border-radius: 50%; border: 9px solid var(--line); animation: mc-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mc-hero-score-skeleton { animation: none; opacity: 0.7; } }
.mc-hero-narrative { font-size: 0.95rem; color: var(--silver); line-height: 1.65; max-width: 60ch; margin-bottom: 1.1rem; }
@media (max-width: 640px) { .mc-hero-card { grid-template-columns: 1fr; text-align: center; } .mc-hero-score-wrap { margin: 0 auto; } .mc-hero-narrative { max-width: none; } .mc-chip-row { justify-content: center; } }

/* ---- Quick Sky Overview: 4-card grid (Moon / Planets / Best Target / Next Event) ---- */
.mc-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.mc-overview-card {
  padding: 1.5rem 1.4rem; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--space-black-2); display: flex; flex-direction: column; gap: 0.9rem;
  transition: border-color var(--dur-fast) var(--ease-premium);
}
.mc-overview-card:hover { border-color: var(--line-strong); }
.mc-overview-card h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.98rem; }
.mc-overview-card h3 .icon { font-size: 1.1rem; }
.mc-overview-primary { font-family: var(--font-display); font-size: 1.35rem; color: var(--polar-white); line-height: 1.25; }
.mc-overview-sub { font-size: 0.82rem; color: var(--silver); line-height: 1.55; }
.mc-overview-meta-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; font-size: 0.78rem; color: var(--silver-2); }
.mc-overview-meta-row b { color: var(--polar-white-dim); font-weight: 500; }

/* ---- Moon module: card body ---- */
.mc-moon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem 1.4rem; margin-top: 1.3rem; }
.mc-moon-phase-row { display: flex; align-items: center; gap: 0.9rem; }
.mc-moon-phase-icon { font-size: 2.2rem; line-height: 1; flex-shrink: 0; }
.mc-moon-phase { font-family: var(--font-display); font-size: 1.15rem; color: var(--polar-white); }
.mc-moon-illum { font-size: 0.82rem; color: var(--silver); margin-top: 0.15rem; }
.mc-moon-recommend { font-size: 0.85rem; color: var(--silver); margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }

/* ---- Planets Tonight: clean rows with chip status ---- */
.mc-planets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; }
.mc-planet-card {
  background: var(--orv-base);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.mc-planet-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.mc-planet-name { font-family: var(--font-display); color: var(--polar-white); font-size: 0.98rem; letter-spacing: 0.02em; }
.mc-planet-detail { font-size: 0.78rem; color: var(--silver-2); }
.mc-planet-detail b { color: var(--polar-white-dim); font-weight: 500; }

/* ---- Target cards: closed summary with mini arc + chips ---- */
.mc-target-card {
  border: 1px solid var(--line);
  border-radius: var(--orv-radius-card);
  margin-bottom: 0.85rem;
  overflow: hidden;
  background: var(--space-black-2);
  transition: border-color var(--dur-fast) var(--ease-premium);
}
.mc-target-card:hover { border-color: var(--line-strong); }
.mc-target-summary { width: 100%; text-align: left; background: none; border: none; padding: 1.2rem 1.4rem; cursor: pointer; display: flex; align-items: center; gap: 1.2rem; color: inherit; font-family: inherit; }
.mc-target-arc { width: 52px; height: 34px; flex-shrink: 0; }
.mc-target-main { flex: 1; min-width: 0; }
.mc-target-title-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.mc-target-title { font-family: var(--font-display); color: var(--polar-white); font-size: 1.02rem; }
.mc-target-catalog { font-size: 0.74rem; color: var(--silver-2); font-family: var(--font-sans); }
.mc-target-quickstats { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.8rem; color: var(--silver); margin-top: 0.4rem; }
.mc-target-quickstats b { color: var(--polar-white-dim); font-weight: 500; }
.mc-target-window { font-size: 0.78rem; color: var(--silver-2); margin-top: 0.3rem; }
.mc-target-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; flex-shrink: 0; }
.mc-card-chevron { color: var(--silver-2); transition: transform var(--dur-fast) var(--ease-premium); }
.mc-target-summary[aria-expanded="true"] .mc-card-chevron { transform: rotate(180deg); }
.mc-target-body { padding: 0 1.4rem 1.7rem; border-top: 1px solid var(--line); }
.mc-target-body[hidden] { display: none; }
.mc-target-why {
  font-size: 0.85rem;
  color: var(--silver);
  background: rgba(242, 239, 232, 0.04);
  border: 1px solid var(--aurora-cyan-dim);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin-top: 1.3rem;
  border-color: var(--orv-hair-strong);
}
.mc-target-why b { color: var(--aurora-cyan); }
.mc-target-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.3rem; }

@media (max-width: 640px) {
  .mc-target-summary { flex-wrap: wrap; }
  .mc-target-side { flex-direction: row; align-items: center; margin-left: auto; }
}

.mc-target-hint { font-size: 0.82rem; color: var(--silver-2); margin: -0.6rem 0 1.2rem; }

/* ---- Home Sightline module ---- */
.mc-home-panel { padding: clamp(2rem, 5vw, 3.2rem); }
.mc-home-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.mc-home-eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aurora-cyan); display: flex; align-items: center; gap: 0.5rem; }
.mc-home-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--polar-white); margin-top: 0.5rem; }
.mc-home-sub { font-size: 0.92rem; color: var(--silver); margin-top: 0.6rem; max-width: 52ch; }
.mc-home-empty { text-align: center; padding: clamp(2.4rem, 6vw, 3.6rem) 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.mc-home-empty p { font-family: var(--font-display); font-size: 1.2rem; color: var(--polar-white-dim); margin-bottom: 1.4rem; }
.mc-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.mc-home-grid[hidden] { display: none; }
.mc-home-card { background: var(--midnight); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; min-height: 168px; }
.mc-home-card h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--silver-2); }
.mc-home-card-primary { font-family: var(--font-display); font-size: 1.2rem; color: var(--polar-white); line-height: 1.3; margin-top: auto; }
.mc-home-card-sub { font-size: 0.78rem; color: var(--silver); }
.mc-home-cta-row { margin-top: 2.2rem; display: flex; justify-content: center; }
.mc-home-cta { font-size: 0.95rem; padding: 1rem 2.2rem; white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 900px) { .mc-home-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mc-home-grid { grid-template-columns: 1fr; } .mc-home-header { flex-direction: column; align-items: flex-start; } }

/* ---- Home: Visible Planets mini-rows (redesign of a previously too-sparse card) ---- */
.mc-home-planet-count { font-size: 0.74rem; color: var(--silver-2); margin-bottom: 0.2rem; }
.mc-home-planet-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.mc-home-planet-row:first-child { border-top: none; padding-top: 0; }
.mc-home-planet-id { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mc-home-planet-name { font-family: var(--font-display); font-size: 1rem; color: var(--polar-white); display: flex; align-items: center; gap: 0.45rem; }
.mc-home-planet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aurora-cyan); flex-shrink: 0; }
.mc-home-planet-dir { font-size: 0.72rem; color: var(--silver-2); letter-spacing: 0.03em; padding-left: 0.9rem; }
.mc-home-planet-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; flex-shrink: 0; }
.mc-home-planet-alt { font-family: var(--font-display); font-size: 1.2rem; color: var(--polar-white); line-height: 1; }
.mc-home-planet-empty { font-size: 0.85rem; color: var(--silver); line-height: 1.6; }
.mc-home-planet-empty b { color: var(--polar-white-dim); font-weight: 500; }

/* ---- Plan a Session results, chip-based ---- */
.mc-plan-result { padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.mc-plan-result:last-child { border-bottom: none; }
.mc-plan-result-title { font-family: var(--font-display); color: var(--polar-white); font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mc-plan-result-why { font-size: 0.85rem; color: var(--silver); margin-top: 0.5rem; line-height: 1.6; }
.mobile-nav .btn { margin-top: 2rem; align-self: flex-start; }

/* Support ORIVON: header CTA
   A small, quiet pill at the end of the primary nav (amber, to stay distinct from the cyan "active" colour and from
   the primary buttons). Deliberately NOT .btn-primary / .btn-ghost: main.js attaches a cursor-following "magnetic"
   effect to those, and this link must only change colour on hover. */
.nav-desktop a.nav-support {
  padding: 0.36rem 0.95rem;
  border: 1px solid rgba(232, 176, 106, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--orv-copper-hi);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
  border-color: rgba(201, 138, 91, 0.55);
}
.nav-desktop a.nav-support::after { display: none; }
.nav-desktop a.nav-support:hover {
  color: var(--orv-ivory);
  background: rgba(201, 138, 91, 0.16);
  border-color: var(--orv-copper);
}
.nav-desktop a.nav-support[aria-current] {
  color: var(--orv-ivory);
  background: rgba(201, 138, 91, 0.16);
  border-color: var(--orv-copper);
}
.nav-desktop a.nav-support.is-active {
  color: var(--orv-ivory);
  background: rgba(201, 138, 91, 0.16);
  border-color: var(--orv-copper);
}
.nav-desktop a.nav-support:focus-visible {
  outline: 2px solid var(--aurora-amber);
  outline-offset: 3px;
  border-radius: 999px;
  outline-color: var(--orv-copper-hi);
}
@media (min-width: 861px) and (max-width: 1180px) { .nav-desktop { gap: 1.35rem; } }
.mobile-nav a.mobile-nav-support {
  color: var(--orv-copper-hi);
}
.mobile-nav a.mobile-nav-support.is-active, .mobile-nav a.mobile-nav-support[aria-current] { color: var(--aurora-amber); }
@media (prefers-reduced-motion: reduce) { .nav-desktop a.nav-support { transition: none; } }

/* Support ORIVON dropdown (Support ORIVON / Acknowledgements): same mega-menu mechanics as Gear, one narrow column,
   right-aligned to the pill so it never runs off the right edge. */
.nav-has-support { display: inline-flex; align-items: center; }
.mega-menu.mega-menu-support { left: auto; right: 0; transform: none; }
.mega-menu-support .mega-menu-inner { min-width: 260px; grid-template-columns: 1fr; padding: 1rem; }
.mega-menu-support a[aria-current="page"] .mega-label {
  color: var(--orv-copper-hi);
}
.mobile-nav .mobile-nav-subtoggle.mobile-nav-support {
  color: var(--orv-copper-hi);
}

/* Header fit (2026-10-12)
 * The phone header (logo, search, ONE menu button; Contact moves into the menu) only existed in css/collective-mobile-nav-*.css, so every other page kept
 * the Contact button on phones and the menu button was pushed off a 320-360 px screen. From 861 px the site-wide sign-in status (added later) made the
 * desktop header wider than its box until ~1000 px. The rules below only act where the header used to overflow: phones (<= 860 px: the shipped desktop
 * header above 1020 px is untouched). !important because the Contact link carries an inline display:inline-flex on most pages and only some pages mark it .mobile-hide. */
@media (max-width: 860px) {
  .header-inner { gap: 0.75rem; }
  .header-actions { gap: 0.25rem; }
  .header-actions .mobile-hide, .header-actions > a.btn[href$="contact.html"] { display: none !important; } /* Contact is in the menu */
  .nav-toggle, .search-trigger { width: 44px; height: 44px; }
}
/* only headers that carry the sign-in status (every page except the Collective, whose own sub-navigation holds it) were too wide */
@media (min-width: 861px) and (max-width: 1020px) {
  .site-header:has(.header-auth-status) .header-inner { gap: 0.75rem; }
  .site-header:has(.header-auth-status) .nav-desktop { gap: 0.75rem; }
  .site-header:has(.header-auth-status) .header-actions { gap: 0.6rem; }
  .site-header:has(.header-auth-status) .header-actions .btn { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* identity additions (new rules without an equivalent in the previous edition) */

/* =========================================================
   ORIVON — identity prototype (LOCAL EXPLORATION, NOT PUBLISHED)
   Loaded last, only by index.html, sightline.html and collective/index.html.
   Pure override sheet: no markup, text, script or data change. Remove the <link> and every page is exactly as published.

   Concept — "Quiet observatory": warm black field, warm-white editorial type, silver hairlines, photographs as the only colour.
   Copper and gold are reserved for recognition (Supporter, Photo of the Month, awards). The pill shape is reserved for Supporter.
   Signature: an open orbital arc (echo of the logo's crossed "O"), used sparingly.
   ========================================================= *//* Fonts: self-hosted WOFF2 (SIL OFL 1.1, see assets/fonts/README.md). No third-party requests.
   Only the weights the design needs: Newsreader 400 (+ 400 italic), Inter 400 and 600. A request for 500 resolves to the 400 face. latin-ext is a separate file
   per face, selected by unicode-range, so it is only downloaded when a character outside latin appears on the page. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/newsreader-5.3.0-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/newsreader-5.3.0-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-5.3.0-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-5.3.0-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/newsreader-5.3.0-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/newsreader-5.3.0-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-5.3.0-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-5.3.0-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Metric-matched fallbacks: until the web font arrives, the system font is scaled so text occupies (almost) the same space: no layout jump on swap. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 106.4%; ascent-override: 91%; descent-override: 22.7%; line-gap-override: 0%; }

@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 96.3%; }
/* no faux bold/italic: weights above 600 resolve to the 600 face */
strong, b {
  font-weight: 600;
}
.reco-label {
  color: var(--orv-silver);
  letter-spacing: 0.24em;
  font-weight: 500;
}
.section-head .eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  background: none;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(-20deg);
}
/* Sightline labels carry a (content) emoji: keep them neutral so photographs remain the only colour, and skip the arc marker there */
.icon {
  filter: grayscale(1);
}
.mc-tab-panel .section-head .eyebrow::before, .mc-panel .section-head .eyebrow::before {
  display: none;
}
.eyebrow .dot {
  box-shadow: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--orv-focus);
  outline-offset: 3px;
}
.site-header .btn {
  letter-spacing: 0.04em;
}
/* header geometry stays byte-identical to the published header */
.btn-primary:focus-visible {
  outline-color: var(--orv-ivory);
  outline-offset: 4px;
}
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
}
input, textarea {
  border-radius: var(--orv-radius);
}
.mc-search-input:focus {
  border-color: var(--orv-ivory);
}
.mc-search-input::placeholder {
  color: var(--orv-silver-2);
}
.nav-desktop a.is-active::after, .nav-desktop button.is-active::after {
  transform: scaleX(1);
}

@media (max-width: 640px) {
  .hero-badge {
    justify-content: center;
    text-align: center;
  }
  .hero-badge .dot {
    display: none;
  }
}
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Catalogue panel: white-background product photographs (files are not edited or cropped)
   Semantic class .card-media--product, added in the markup where a product photograph is declared. The photograph is shown exactly as shot (no blend,
   no filter) on a soft-silver panel with a fine edge and some air around it, so its white reads as a deliberate catalogue plate. Photographs of the
   sky never carry this class. No file-name selectors, inline background or specificity hacks are needed. */
.card-media--product {
  background: #e4e1da;
  box-shadow: inset 0 0 0 1px rgba(7, 8, 10, 0.14);
}
.card-media--product > img {
  object-fit: contain;
  padding: 0.9rem;
}

@media (max-width: 860px) {
  .header-inner {
    gap: 0.75rem;
  }
}

@media (min-width: 861px) and (max-width: 1020px) {
  .nav-desktop {
    gap: 0.85rem;
  }
  .header-actions {
    gap: 0.5rem;
  }
  .nav-desktop a, .nav-desktop .nav-menu-trigger {
    font-size: 0.76rem;
    letter-spacing: 0.01em;
  }
  .nav-desktop a.nav-support {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
}
/* Inter is wider than the former system face: a long nowrap button inside a narrow card must be allowed to wrap instead of pushing the page sideways at 320 px */
.reader-offer-card .btn {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}
.eyebrow .orv-ico {
  width: 1.25em;
  height: 1.25em;
}
h3 .icon {
  display: inline-flex;
}
h3 .icon .orv-ico {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.15em;
  color: var(--orv-ivory-dim);
}
.mc-moon-phase-icon .orv-ico {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--orv-ivory);
}