/* Red on black, because this is read outdoors in the dark: red light is the one colour that does not cost you your dark adaptation. The printed atlas is greyscale for the same reason approached from the other side — red *ink* vanishes under a red torch, while a screen emits its own light and can simply choose to be red. */ :root { --ink: #ff4a3d; --ink-dim: #b8352c; --paper: #08080a; --paper-lift: #131317; --quiet: #7a7a82; --text: #d8d8de; --rule: #23232a; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } main, .shell { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 5rem; } h1 { color: var(--ink); font-size: clamp(1.6rem, 6vw, 2.4rem); margin: .2rem 0 .3rem; } h2 { font-size: 1.15rem; color: var(--ink-dim); margin: 2.6rem 0 .6rem; } h3 { font-size: 1.05rem; color: var(--ink); margin: 0; } a { color: var(--ink); } a:hover { color: #fff; } p { margin: .4rem 0; } /* The language switch. Without JS nothing has data-lang on , and the :not([data-lang]) rules keep English visible — the page must never come up blank because a script did not run. */ .i18n { display: none; } html:not([data-lang]) .i18n[data-lang="en"] { display: inline; } html[data-lang="en"] .i18n[data-lang="en"] { display: inline; } html[data-lang="fr"] .i18n[data-lang="fr"] { display: inline; } html[data-lang="es"] .i18n[data-lang="es"] { display: inline; } html[data-lang="de"] .i18n[data-lang="de"] { display: inline; } header.site { padding: 1.4rem 0 0.6rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: baseline; justify-content: space-between; } header.site .home { color: var(--quiet); text-decoration: none; font-size: .9rem; } nav.lang { display: flex; gap: .4rem; } nav.lang button { background: none; border: 1px solid var(--rule); color: var(--quiet); border-radius: .35rem; padding: .15rem .5rem; font: inherit; font-size: .8rem; cursor: pointer; } nav.lang button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-dim); } nav.chart-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .9rem; margin: .6rem 0 0; } nav.chart-nav .sep { color: var(--rule); } article.object { background: var(--paper-lift); border: 1px solid var(--rule); border-radius: .6rem; padding: 1rem 1.15rem; margin: 1rem 0; } article.object header { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; } .badge { font-size: .74rem; letter-spacing: .02em; color: var(--paper); background: var(--ink-dim); border-radius: .3rem; padding: .12rem .5rem; white-space: nowrap; } .badge.tier-binoculars { background: var(--ink); } .badge.tier-large_telescope { background: none; color: var(--quiet); border: 1px solid var(--rule); } figure.sky { margin: .6rem 0; } figure.sky img { max-width: 100%; height: auto; border-radius: .4rem; display: block; background: var(--paper-lift); } figure.sky figcaption { color: var(--quiet); font-size: .74rem; margin-top: .25rem; } dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; margin: .6rem 0; font-size: .9rem; } dl.facts dt { color: var(--quiet); } dl.facts dd { margin: 0; } p.desc { font-size: .95rem; } p.extra { color: var(--quiet); font-size: .88rem; } p.links { font-size: .85rem; } table { border-collapse: collapse; width: 100%; font-size: .9rem; } th { text-align: left; color: var(--quiet); font-weight: normal; padding: .3rem .6rem .3rem 0; } td { padding: .3rem .6rem .3rem 0; border-bottom: 1px solid var(--rule); } details > summary { cursor: pointer; color: var(--ink-dim); margin: .4rem 0; } ul.charts { list-style: none; padding: 0; columns: 2; column-gap: 2rem; } ul.charts li { margin: .3rem 0; break-inside: avoid; } ul.charts .num { color: var(--ink); font-weight: 600; margin-right: .5rem; } footer.site { margin-top: 3.5rem; color: var(--quiet); font-size: .85rem; border-top: 1px solid var(--rule); padding-top: 1rem; } .card { background: var(--paper-lift); border: 1px solid var(--rule); border-radius: .6rem; padding: 1.1rem 1.25rem; margin: 1rem 0; display: block; text-decoration: none; } .card h3 { margin: 0 0 .3rem; } .card p { margin: 0; color: var(--quiet); font-size: .92rem; } .sub { color: var(--quiet); margin: 0 0 2rem; } .sub span { display: block; }