/* PlanetaryPulse
   Layout: a mission-log plate. Night sky behind; the moon etching and its
   instruments up top; the science in three columns; astrology set apart below a double rule. */
@font-face { font-family: 'Jost'; font-weight: 300; font-display: swap; src: url(../fonts/jost-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url(../fonts/jost-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url(../fonts/jost-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-display: swap; src: url(../fonts/jost-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 700; font-display: swap; src: url(../fonts/jost-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-display: swap; src: url(../fonts/space-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'PP Glyphs'; font-display: swap; src: url(../fonts/noto-sans-symbols.woff2) format('woff2'); unicode-range: U+2609, U+263D-2653; }

:root {
  /* One deliberate dark world: ink, chalk, and three stark inks for meaning. */
  --void: #04050a;
  --ink: #0a0d16;
  --ink-2: #10141f;
  --rule: rgba(216, 207, 184, .16);
  --rule-2: rgba(216, 207, 184, .3);
  --chalk: #e7e0cc;
  --bone: #c9c1ac;
  --dim: #8b8574;
  --red: #b01e24;      /* rocket-livery vermilion, deepened */
  --brass: #b88f3c;    /* instrument brass */
  --cobalt: #2c4aa8;
  --verd: #3e8c78;
  --rust: #b0612e;
  --violet: #6a3fa0;
  --moon-hi: #2a2a2c;
  --moon-lo: #121318;
  --moon-mare: #07080d;
  --display: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --body: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --glyph: 'PP Glyphs', 'Jost', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--void); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--void); color: var(--bone); font: 400 16px/1.55 var(--body); font-feature-settings: 'ss01'; min-height: 100vh; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--void); }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .9; }
.vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 30% 20%, transparent 0, transparent 40%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, transparent 60%, rgba(60,8,12,.18)); }
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--chalk); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
h1, h2, h3, h4, h5 { font-family: var(--display); color: var(--chalk); text-wrap: balance; margin: 0; }
p { margin: 0; }
.eyebrow { font: 500 .72rem/1.2 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.glyph { font-family: var(--glyph); font-weight: 400; }
button { font: inherit; color: inherit; }
.link { background: none; border: 0; padding: 0; color: var(--brass); font: 500 .82rem var(--display); letter-spacing: .08em; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(184,143,60,.4); text-underline-offset: 3px; }

/* ── top bar ── */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: linear-gradient(var(--void), rgba(4,5,10,.86)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.mark { display: flex; align-items: center; gap: 10px; color: var(--chalk); text-decoration: none; }
.mark svg { width: 28px; height: 28px; flex: none; }
.mark b { font: 500 1rem/1 var(--display); letter-spacing: .32em; text-transform: uppercase; }
.mark b span { color: var(--red); }
.tools { display: flex; gap: 6px; align-items: center; }
.ibtn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px solid var(--rule-2); background: transparent; color: var(--chalk); font: 500 .74rem var(--display); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; border-radius: 2px; }
.ibtn:hover { border-color: var(--brass); color: var(--brass); }
.ibtn svg { width: 16px; height: 16px; }
.ibtn.primary { background: var(--red); border-color: var(--red); color: var(--chalk); }

/* ── hero ── */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px 48px; padding-block: 34px 18px; align-items: start; }
.hero-l { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.kick { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
#log-no { font: 400 .72rem var(--mono); color: var(--brass); letter-spacing: .06em; }
#date { font: 300 clamp(1.5rem, 3.6vw, 2.3rem)/1.1 var(--display); letter-spacing: .02em; }
.moon-box { position: relative; width: min(100%, 520px); aspect-ratio: 1; max-width: 100%; justify-self: center; }
.moon-box svg { width: 100%; height: 100%; display: block; }
.moon-box::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; box-shadow: 0 0 120px 10px rgba(231,224,204,.05); pointer-events: none; }
.navrow { display: flex; gap: 8px; align-items: center; justify-self: center; }
.navrow .ibtn { min-width: 44px; justify-content: center; }
.hero-r { display: grid; gap: 22px; min-width: 0; padding-top: 6px; }
#phase-name { font: 300 clamp(2.4rem, 6.4vw, 4.4rem)/.95 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
#phase-sub { font: 500 .9rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-top: 10px; }
#telemetry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule); }
#telemetry > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
#telemetry > div:nth-child(odd):not(.tm-cta) { padding-right: 14px; }
#telemetry dt { font: 500 .66rem var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
#telemetry dd { margin: 0; font: 400 .9rem var(--mono); color: var(--chalk); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#telemetry .tm-cta { grid-column: 1 / -1; border-bottom: 0; }
.inst { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 18px; align-items: center; }
#quarters { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#quarters li { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: "m n c" "m d c"; column-gap: 12px; align-items: center; }
#quarters .mini { grid-area: m; width: 22px; height: 22px; }
#quarters .mini svg { width: 22px; height: 22px; display: block; }
.q-n { grid-area: n; font: 500 .8rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk); }
.q-d { grid-area: d; font: .8rem var(--mono); color: var(--dim); }
.q-c { grid-area: c; font: .76rem var(--mono); color: var(--brass); text-align: right; }
.dial { width: 100%; height: auto; display: block; overflow: visible; }
.dial-l text { font: 500 8px var(--display); letter-spacing: .18em; fill: var(--dim); }
.dial-age { font: 400 26px var(--mono); fill: var(--chalk); }
.dial-u { font: 500 7px var(--display); letter-spacing: .3em; fill: var(--dim); }

/* ── date strip ── */
.strip-wrap { border-block: 1px solid var(--rule); background: rgba(10,13,22,.6); }
#strip { list-style: none; display: flex; gap: 2px; margin: 0; padding: 8px 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
#strip::-webkit-scrollbar { display: none; }
#strip a { display: grid; justify-items: center; gap: 4px; width: 56px; padding: 6px 0 8px; text-decoration: none; color: var(--dim); border: 1px solid transparent; scroll-snap-align: center; }
#strip a svg { width: 24px; height: 24px; }
#strip .s-w { font: 500 .62rem var(--display); letter-spacing: .16em; text-transform: uppercase; }
#strip .s-d { font: .82rem var(--mono); color: var(--bone); }
#strip a:hover { border-color: var(--rule-2); }
#strip a.today .s-w { color: var(--brass); }
#strip a.sel { border-color: var(--red); background: rgba(176,30,36,.12); }
#strip a.sel .s-d { color: var(--chalk); }

/* ── section heads ── */
.sec { padding-block: 40px 8px; }
.sec-h { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline; margin-bottom: 22px; }
.sec-h h2 { font: 500 clamp(1.1rem, 2.2vw, 1.35rem)/1 var(--display); letter-spacing: .34em; text-transform: uppercase; }
.sec-h .rule { height: 1px; background: var(--rule-2); align-self: center; }
.sec-h p { grid-column: 1 / -1; color: var(--dim); max-width: 64ch; }

/* ── briefing ── */
.brief { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.brief .num { font: 400 .7rem var(--mono); color: var(--red); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .2em; text-transform: uppercase; justify-self: center; }
#brief { display: grid; gap: 10px; max-width: 72ch; }
#brief p { font: 300 clamp(1.08rem, 2vw, 1.3rem)/1.5 var(--display); color: var(--chalk); }
#brief p:not(:first-child) { font-size: 1rem; color: var(--bone); font-weight: 400; }

/* ── grades legend ── */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 2px; }
.legend span { display: inline-flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--dim); }
.stamp { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 2px; border: 1.5px solid currentColor; font: 600 .62rem/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; transform: rotate(-1.5deg); white-space: nowrap; }
.stamp-x { display: none; }
.g-strong { color: var(--verd); }
.g-mixed { color: var(--brass); }
.g-weak { color: var(--rust); }
.g-myth { color: var(--red); }

/* ── science ── */
#science { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.sci-col { display: grid; gap: 14px; min-width: 0; }
.sci-col h3 { display: flex; justify-content: space-between; align-items: baseline; font: 600 .8rem var(--display); letter-spacing: .3em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid var(--chalk); }
.sci-col h3 em { font: .75rem var(--mono); font-style: normal; color: var(--dim); letter-spacing: 0; }
.col-intro { font-size: .86rem; color: var(--dim); margin-top: -6px; }
.finding { display: grid; gap: 10px; padding: 16px 16px 14px; background: rgba(10,13,22,.82); border: 1px solid var(--rule); min-width: 0; }
.finding.lead { border-color: var(--rule-2); background: rgba(16,20,31,.9); }
.f-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.f-art { width: 54px; height: 54px; color: var(--chalk); opacity: .9; }
.emblem { width: 100%; height: 100%; display: block; overflow: visible; }
.emblem-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.finding h4 { font: 500 1.08rem/1.25 var(--display); }
.finding.lead h4 { font-size: 1.22rem; }
.f-today { font: 400 .84rem/1.5 var(--mono); color: var(--brass); }
.f-body { font-size: .93rem; color: var(--bone); }
.f-src summary { cursor: pointer; font: 500 .7rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.f-src summary::-webkit-details-marker { display: none; }
.f-src summary::before { content: '+'; font: .8rem var(--mono); color: var(--brass); }
.f-src[open] summary::before { content: '−'; }
.f-src ol { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: .82rem; }
.f-src a { color: var(--bone); }
.empty { color: var(--dim); font-style: italic; }

/* ── myth check ── */
#myth { margin-top: 30px; }
.myth-in { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; padding: 22px; border: 1.5px solid var(--red); background: linear-gradient(135deg, rgba(176,30,36,.12), rgba(10,13,22,.85) 60%); }
.myth-in > svg { width: 84px; height: 84px; color: var(--red); }
.myth-in .eyebrow { color: var(--red); margin-bottom: 6px; }
.myth-in h4 { font: 500 1.35rem/1.2 var(--display); margin-bottom: 8px; }
.myth-in p { max-width: 70ch; }
.myth-src { margin-top: 10px; font-size: .8rem; }
.myth-src a { color: var(--dim); }

/* ── astrology band ── */
.astro { margin-top: 48px; border-top: 4px double var(--rule-2); background: linear-gradient(180deg, rgba(106,63,160,.1), transparent 50%); }
.astro .sec-h h2 span { color: var(--violet); filter: brightness(1.5); }
.astro-note { display: inline-block; margin-top: 4px; padding: 6px 10px; border: 1px dashed rgba(106,63,160,.6); color: var(--bone); font-size: .86rem; }
.astro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.astro-card { padding: 20px; border: 1px solid rgba(106,63,160,.45); background: rgba(14,11,26,.8); display: grid; gap: 10px; align-content: start; min-width: 0; }
.astro-card h4 { font: 400 1.6rem/1.15 var(--display); }
.astro-card h4 .glyph { color: #a98bd6; margin-right: 4px; }
.kv { display: grid; gap: 8px; margin: 4px 0 0; }
.kv > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
.kv dt { font: 500 .66rem var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
.kv dd { margin: 0; }
.signs-h { margin: 34px 0 16px; font: 600 .8rem var(--display); letter-spacing: .3em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.signs-h small { font: 400 .82rem var(--body); letter-spacing: 0; text-transform: none; color: var(--dim); }
#signs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sign { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border: 1px solid var(--rule); background: rgba(10,13,22,.8); min-width: 0; }
.sign.mine { grid-column: 1 / -1; border-color: #a98bd6; background: rgba(28,18,48,.85); }
.sign.mine p { font-size: 1.02rem; }
.sign header { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sign header .glyph { font-size: 1.8rem; line-height: 1; color: #a98bd6; text-align: center; }
.sign h5 { font: 500 1rem var(--display); letter-spacing: .1em; text-transform: uppercase; }
.sign header p { font: .74rem var(--mono); color: var(--dim); }
.sign > p { font-size: .9rem; }
.sign strong { color: var(--chalk); font-weight: 500; }
.pill { font: 600 .6rem var(--display); letter-spacing: .18em; text-transform: uppercase; padding: 4px 8px; background: var(--violet); color: var(--chalk); }
.pill.alt { background: transparent; border: 1px solid var(--rule-2); color: var(--dim); }
.sign .link { justify-self: start; color: #a98bd6; text-decoration-color: rgba(169,139,214,.4); font-size: .76rem; }

/* ── footer ── */
footer { margin-top: 56px; border-top: 1px solid var(--rule); padding-block: 26px 40px; color: var(--dim); font-size: .84rem; }
footer .wrap { display: grid; gap: 10px; }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ── sheets ── */
dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100% - 40px); padding: 0; border: 1px solid var(--rule-2); background: var(--ink); color: var(--bone); }
dialog::backdrop { background: rgba(2,3,6,.75); backdrop-filter: blur(3px); }
.sheet { display: grid; gap: 16px; padding: 22px; }
.sheet-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.sheet-h h2 { font: 500 1rem var(--display); letter-spacing: .3em; text-transform: uppercase; }
.field { display: grid; gap: 6px; }
.field label, .field .lbl { font: 500 .68rem var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
select, input[type=text], input[type=number] { width: 100%; min-height: 42px; padding: 8px 10px; background: var(--void); color: var(--chalk); border: 1px solid var(--rule-2); border-radius: 2px; font: 400 .95rem var(--body); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
#loc-status { font-size: .84rem; color: var(--dim); }
.about p + p { margin-top: 10px; }
.about h3 { font: 600 .74rem var(--display); letter-spacing: .26em; text-transform: uppercase; margin-top: 8px; }
.about ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.grade-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.grade-list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; font-size: .9rem; }

/* ── responsive ── */
@media (max-width: 1040px) {
  #science { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #science .sci-col:last-child { grid-column: 1 / -1; }
  #science .sci-col:last-child { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  #science .sci-col:last-child h3, #science .sci-col:last-child .col-intro { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .hero-l { justify-items: stretch; }
  .moon-box { width: min(100%, 420px); }
  .inst { grid-template-columns: minmax(0, 1fr) 150px; }
}
@media (max-width: 700px) {
  #science { grid-template-columns: minmax(0, 1fr); }
  #science .sci-col:last-child { grid-template-columns: minmax(0, 1fr); }
  .astro-grid { grid-template-columns: minmax(0, 1fr); }
  .brief { grid-template-columns: minmax(0, 1fr); }
  .brief .num { writing-mode: horizontal-tb; transform: none; justify-self: start; }
  .mark b { letter-spacing: .2em; font-size: .9rem; }
  .ibtn .lbl { display: none; }
  .ibtn { padding: 0 10px; }
}
@media (max-width: 420px) {
  .mark b { letter-spacing: .12em; font-size: .82rem; }
  .mark svg { width: 24px; height: 24px; }
  .inst { grid-template-columns: minmax(0, 1fr); }
  .dial { max-width: 220px; justify-self: center; }
  .myth-in { grid-template-columns: minmax(0, 1fr); }
  .myth-in > svg { width: 56px; height: 56px; }
  .kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .grade-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .moon-box svg { animation: rise 1.2s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: .35; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
}
@media print { #sky, .vignette, .top, .strip-wrap, footer { display: none; } }