@font-face { font-family: Forum; src: url('/assets/fonts/forum-regular-cyrillic.woff2') format('woff2'); font-display: swap; unicode-range: U+0400-052F; }
@font-face { font-family: Forum; src: url('/assets/fonts/forum-regular-latin.woff2') format('woff2'); font-display: swap; unicode-range: U+0000-024F; }
:root { color-scheme: dark; --paper: #f7f5f1; --muted: #9aacc2; --gold: #d7bc80; --line: rgba(156,185,214,.21); }
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; color: var(--paper); font-family: Forum, Georgia, serif; min-height: 100vh; background: radial-gradient(ellipse 45% 30% at 17% 36%,rgba(34,88,130,.22),transparent 75%),radial-gradient(ellipse 45% 45% at 85% 27%,rgba(31,51,113,.2),transparent 75%),#03070e; }
body:before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .4; background-image: radial-gradient(1px 1px at 12% 19%,#b8d2f4 99%,transparent),radial-gradient(1px 1px at 42% 71%,#fff 99%,transparent),radial-gradient(1px 1px at 81% 26%,#97b8d9 99%,transparent),radial-gradient(2px 2px at 71% 82%,#fff 99%,transparent); background-size: 231px 237px,397px 349px,331px 277px,479px 417px; }
a { color: inherit; }
.site-header { max-width: 1220px; margin: auto; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 24px; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 25px; }
.site-header nav a { text-decoration: none; font-size: 17px; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--gold); }
.shell { max-width: 1220px; margin: 0 auto; padding: 54px 30px 80px; }
.intro { margin-bottom: 38px; }
.eyebrow, .section-kicker { font: 12px Arial, sans-serif; letter-spacing: .19em; text-transform: uppercase; color: var(--gold); margin: 0 0 13px; }
.intro h1 { font-size: clamp(43px,6vw,72px); font-weight: 400; line-height: 1.05; margin: 0 0 12px; }
.intro>p:last-child { font-size: 19px; color: #c9d1db; margin: 0; }
.calendar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 60px; align-items: center; border: 1px solid var(--line); border-radius: 24px; padding: 42px 48px; background: linear-gradient(120deg,rgba(7,19,34,.78),rgba(7,14,27,.92)); box-shadow: 0 24px 75px rgba(0,0,0,.25); }
.visual-panel h2 { font-size: clamp(28px,3vw,43px); font-weight: 400; margin: 0; }
.moon-frame { display: flex; align-items: center; justify-content: center; min-height: 470px; }
.moon-frame img { display: block; width: min(100%,470px); height: auto; filter: drop-shadow(0 15px 34px rgba(0,0,0,.48)); }
.image-caption { font: 13px/1.5 Arial,sans-serif; color: #8da1b7; text-align: center; margin: 0; }
.date-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding-bottom: 27px; border-bottom: 1px solid var(--line); }
.date-heading .section-kicker { margin: 0 0 10px; }
.display-date { font-size: clamp(30px,3vw,42px); margin: 0; }
.weekday { margin: 6px 0 0; color: var(--muted); font-size: 19px; text-transform: capitalize; }
.phase-pill { border: 1px solid rgba(215,188,128,.55); color: var(--gold); border-radius: 99px; padding: 7px 12px; font: 13px Arial,sans-serif; white-space: nowrap; }
.metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; }
.metric { padding: 24px 0 20px; border-bottom: 1px solid var(--line); min-width: 0; }
.metric strong, .metric span { display: block; }
.metric strong { font-size: 30px; font-weight: 400; min-height: 34px; line-height: 1.15; overflow-wrap: anywhere; }
.metric span { font: 14px Arial,sans-serif; color: var(--muted); margin-top: 8px; }
.next-events { margin-top: 24px; display: grid; gap: 15px; }
.next-events div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.next-events span { font: 14px Arial,sans-serif; color: var(--muted); }
.next-events strong { font-size: 17px; font-weight: 400; text-align: right; color: var(--gold); }
.date-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.date-controls label { color: var(--muted); margin-left: 12px; }
.date-controls button, .date-controls input { font: 16px Forum,Georgia,serif; color: var(--paper); background: #0a1627; border: 1px solid rgba(156,185,214,.38); border-radius: 7px; padding: 11px 15px; min-height: 46px; }
.date-controls button { cursor: pointer; }
.date-controls button:hover { border-color: var(--gold); color: var(--gold); }
.date-controls button:disabled { opacity: .4; cursor: not-allowed; }
.date-controls .arrow { width: 46px; padding: 0; font: 31px Arial,sans-serif; }
.date-controls .today-button { margin-left: auto; border-color: rgba(215,188,128,.55); color: var(--gold); }
.status { min-height: 1.5em; margin: 16px 0 0; color: var(--gold); font: 14px/1.5 Arial,sans-serif; }
.footnote { max-width: 820px; color: #8da1b7; font: 13px/1.6 Arial,sans-serif; margin: 20px 0 0; }
footer { border-top: 1px solid var(--line); padding: 27px 30px; text-align: center; color: #8192a7; font-size: 13px; }
@media(max-width:800px) {
  .site-header { padding: 20px; } .brand { font-size: 20px; } .site-header nav { gap: 12px; } .site-header nav a { font-size: 15px; }
  .shell { padding: 35px 20px 55px; } .calendar { grid-template-columns: 1fr; gap: 25px; padding: 28px; }
  .moon-frame { min-height: 0; padding: 10px 0; } .moon-frame img { width: min(100%,390px); } .date-controls .today-button { margin-left: 0; }
}
@media(max-width:480px) {
  .site-header { display: block; } .site-header nav { margin-top: 18px; } .intro h1 { font-size: 43px; } .intro>p:last-child { font-size: 17px; }
  .calendar { padding: 22px 19px; } .date-heading { display: block; } .phase-pill { display: inline-block; margin-top: 15px; }
  .metric { padding: 18px 0; } .metric strong { font-size: 24px; } .next-events div { display: block; }
  .next-events strong { display: block; text-align: left; margin-top: 6px; } .date-controls label { margin-left: 0; }
  .date-controls input { flex: 1; min-width: 0; } .date-controls .today-button { width: 100%; }
}
.location-bar {display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 24px;padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:#081321;}
.location-bar .section-kicker{display:block;margin-bottom:7px}.location-bar strong{font-size:25px;font-weight:400;margin-right:16px}.location-bar #zone-name{color:var(--muted);font:13px Arial,sans-serif}
.location-bar button, #city-dialog button{cursor:pointer;color:var(--paper);background:#101f31;border:1px solid var(--line);border-radius:8px;padding:12px 18px;font:16px Arial,sans-serif}
#city-dialog{color:var(--paper);background:#081321;border:1px solid #43536a;border-radius:20px;padding:28px;width:min(640px,calc(100% - 32px));max-height:85vh;box-sizing:border-box;font:14px/1.6 Arial,sans-serif}
#city-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.dialog-heading h2{font:32px Forum,Georgia,serif;margin:0}#city-dialog #close-city{font-size:24px;padding:2px 12px}
#city-dialog p{color:var(--muted)}#city-dialog label{display:block;margin-bottom:7px}#city-search{box-sizing:border-box;width:100%;padding:13px;background:#03070e;border:1px solid #43536a;border-radius:8px;color:white;font:16px Arial,sans-serif}.city-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:40vh;overflow-y:auto;padding:3px}
#city-dialog .city-option{text-align:left;padding:12px;font-size:15px}.city-option small{display:block;color:var(--muted);font-size:11px;margin-top:4px}#city-dialog .city-option[aria-pressed=true]{border-color:var(--gold);background:#28271e}#city-dialog button:hover,.location-bar button:hover{border-color:var(--gold)}#city-dialog :focus-visible,.location-bar button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}#city-dialog #city-error{color:#ffb7b7}
@media(max-width:480px){.location-bar{align-items:flex-start;flex-direction:column;padding:18px}.location-bar #zone-name{display:block;margin-top:6px}#city-dialog{padding:20px}.dialog-heading h2{font-size:26px}.city-list{grid-template-columns:1fr}}

/* Общая чёрная палитра сайта и неподвижная область изображения. */
body{background:#000;color:#fff}body:before{display:none}
:root{--paper:#fff;--muted:#aaa;--line:rgba(215,188,128,.25)}
.calendar{background:#000;box-shadow:none;align-items:start}
.location-bar,#city-dialog{background:#080808}
.location-bar button,#city-dialog button,.date-controls button,.date-controls input{background:#111}
#city-search{background:#000}.intro>p:last-child{color:#ccc}
.image-caption,.footnote{color:#999}
footer{border:0;color:#fff}
.visual-panel h2{min-height:2.4em;line-height:1.2}
.moon-frame{width:100%;aspect-ratio:1;min-height:0;padding:0;position:relative}
.moon-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;filter:none}