/* the landing page: the banner photo with the title on it, then the
   live sky and readings in their own row */

main.doc .hero {
    display: flex;
    /* tall enough that the intro sits wholly on the photo's black ground */
    min-height: clamp(26rem, 92vh, 46rem);
    margin: 1.5rem 0 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    /* the photo, its sky kept at the top and its own black ground under
       the words, with a light veil so they read at any width; the ink
       alone while it loads or if it never does */
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--obs-ink) 78%, transparent) 0%,
            transparent 58%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--obs-ink) 25%, transparent) 0%,
            transparent 45%,
            color-mix(in srgb, var(--obs-ink) 55%, transparent) 100%),
        var(--hero-image) center top / cover no-repeat,
        var(--theme-bg);
    color: var(--theme-fg);
    border-radius: 3px;
    text-shadow: 0 1px 2px color-mix(in srgb, var(--obs-ink) 70%, transparent);
}
/* the title at the top left over the sky, the intro at the bottom right
   over the photo's own black ground */
main.doc .hero-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
main.doc .hero-head { text-shadow: 0 1px 3px color-mix(in srgb, var(--obs-ink) 85%, transparent), 0 0 28px color-mix(in srgb, var(--obs-ink) 70%, transparent); }
/* the tail: the intro at the bottom left, the button at the bottom right */
main.doc .hero-tail {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
}
main.doc .hero-tail .lead { max-width: 48ch; text-align: justify; }
main.doc .hero-tail p:last-child { flex: none; margin: 0; }

/* the old site's title: two lines of capitals, then the sky line in
   small caps (versalitas) */
main.doc .hero h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 7vw, var(--step-5));
    line-height: 1.0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
}
main.doc .hero-head .subtitle { text-align: left; }
main.doc .hero .subtitle {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(var(--step-1), 2.6vw, var(--step-2));
    font-variant-caps: small-caps;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--theme-fg_accent);
}
main.doc .hero .live { color: var(--theme-fg_accent); font-variant-numeric: tabular-nums; }
main.doc .hero .lead { font-size: var(--step-0); line-height: 1.45; margin: 0; color: var(--theme-fg); }
main.doc .hero p:last-child { margin: 0; }
main.doc .hero .button { text-shadow: none; }
main.doc .hero a:not(.button) { color: var(--theme-fg); }

/* the all-sky camera, beside the readings: a round sky on a dark square */
main.doc .allsky { margin: 0; }
main.doc .allsky img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 3px;
    /* the camera's frame is transparent outside the circle: the backdrop
       is black, the sky's own tone, so the square is one night sky */
    background: black;
}

/* live readings: value pairs in a grid, units muted, digits tabular */
.readings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0 0 1rem;
    padding: 0;
    font-variant-numeric: tabular-nums;
}
.readings > div { display: flex; flex-direction: column; min-width: 7rem; }
.readings dt { font-size: 0.9rem; color: var(--obs-mute); }
.readings dd { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.1; }
.readings dd .unit { font-family: var(--font-text); font-size: 0.9rem; font-weight: 400; color: var(--obs-mute); margin-left: 0.25rem; }
.readings dd .trend { font-size: 1rem; color: var(--obs-mute); margin-left: 0.2rem; }
.readings dd.none { color: var(--obs-mute); font-size: var(--step-1); font-weight: 400; }
.readings-note { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--obs-mute); }
.readings-note.live { display: none; }

main.doc .now .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
main.doc .astrophoto img { aspect-ratio: 1 / 1; object-fit: cover; }

/* the numbers history.js fills in keep their width while loading */
#ntel2, #area { display: inline-block; min-width: 2ch; text-align: right; }

@media screen and (max-width: 820px) {
    main.doc .hero { grid-template-columns: 1fr; margin-top: 1rem; }
    /* a phone is taller than it is wide, so `cover` would keep a corner
       of sky and lose the telescopes: the photo goes across the top at its
       own shape instead, the title block is given the photo's height so
       the intro starts under it on the photo's black ground and the ink */
    main.doc .hero {
        min-height: 0;
        padding: 1.25rem;
        background-image:
            linear-gradient(180deg,
                color-mix(in srgb, var(--obs-ink) 35%, transparent) 0%,
                color-mix(in srgb, var(--obs-ink) 20%, transparent) 40%,
                transparent 60%),
            var(--hero-image);
        background-size: 100% auto, 100% auto;
        background-position: center top, center top;
        background-repeat: no-repeat;
    }
    main.doc .hero-head { width: 100%; aspect-ratio: 2000 / 1171; }
    main.doc .hero h1 { font-size: clamp(1.5rem, 6.4vw, 2.2rem); }
    main.doc .hero-tail { padding-top: 0.75rem; }
    main.doc .hero-tail { flex-direction: column; align-items: stretch; gap: 1.25rem; }
    main.doc .hero-tail .lead { max-width: none; }
    main.doc .hero-tail p:last-child { text-align: right; }
    main.doc .now .split { grid-template-columns: 1fr; }
}