/* ---------------------------------------------------------------- footer -- */

.site-footer {
    position: relative;
    z-index: 3;
    /* Last light of the page rather than a dead slab: the glow from the window
       above still reaches the near edge, and falls off toward the foot. */
    /* Origins sit inside the footer, not above its top edge: clipped at the
       edge, the pool started at full strength and made a 15-point step in a
       single pixel row. */
    background:
        radial-gradient(ellipse 80% 120% at 22% 18%, rgba(255, 243, 194, 0.11), transparent 74%),
        radial-gradient(ellipse 60% 90% at 88% 30%, rgba(224, 195, 138, 0.06), transparent 76%),
        /* The floor the night now descends to. On --night-bg the footer was
           18 luminance levels BRIGHTER than the last chapter above it, so the
           page would have ended by climbing back out of its own night. */
        var(--night-floor);
    color: var(--night-ink-soft);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
    border-top: 1px solid var(--night-rule);
}

/* Pages without a .nightfall section would otherwise cut from parchment to
   footer at a hard 1px edge. Give them the same evening.

   Pages WITH one are excluded, by the class the router puts on <main>.
   /#scenes became page-inner and inherited this: a 192px tan-to-rust sunset
   between a night page and a night footer, a dawn it never descended from.
   A page that is already night has nowhere to set. */
.page-inner:not(.page-night) + .site-footer {
    margin-top: 4rem;
}

.page-inner:not(.page-night) + .site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* Overlaps its neighbours by 2px: flush, subpixel rounding left a single
       row where neither the page ramp nor this gradient painted, and the body
       parchment showed through as a bright line. */
    top: calc(-4rem - 2px);
    height: calc(4rem + 4px);
    pointer-events: none;
    /* Not the home page's sunset. That one has 26rem and a whole daylight
       half to set from. Under a one-card deck page, 12rem of painted evening
       was a third of what was on screen, and three reviews in a row called
       it a band from nowhere — first rust, then tan-to-green, whatever hue
       it wore. An inner page has nothing to set; it just gives way to the
       footer's moss over four rem, the way the day chapters give way to
       each other. */
    background: linear-gradient(180deg, var(--day-5) 0%, var(--dusk-6) 100%);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--night-rule);
}

.site-footer .logo-icon {
    background-color: var(--honey);
}

.site-footer .logo-word {
    color: var(--night-ink);
}

.footer-tagline {
    margin: 1rem 0 0;
    font-size: var(--step--1);
    color: var(--night-ink-faint);
    max-width: 34ch;
}

.footer-link-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: start;
}

.footer-group-label {
    margin: 0 0 0.2rem;
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--night-ink);
}

/* The hit area is unconditional, not a touch concession.

   It lived in touch.css behind `(pointer: coarse), (max-width: 860px)`, which
   reads as "fingers need room" — but a 1280px laptop with a trackpad is
   neither coarse nor narrow, and measured 23-24px rows: sixteen footer links
   under the 24px floor in a band from 900px to 1330px, and $FAI at 24x48 under
   it at EVERY width. A small target is hard to hit with a trackpad too, and
   nothing about a comfortable row costs a mouse user anything. The negative
   margin keeps the original rhythm, so the footer does not grow. */
.footer-link-group a {
    display: block;
    font-size: var(--step--1);
    color: var(--night-ink-soft);
    text-decoration: none;
    padding-block: 0.55rem;
    margin-block: -0.35rem;
    /* The group is a flex column, so display:block still shrank each link to
       its own text — "$FAI" measured 25px WIDE at every width, under the 24px
       floor on the other axis. Stretching them to the column is what a footer
       nav wants anyway: the whole row is the target, not just the four
       characters in it. */
    align-self: stretch;
}

.footer-link-group a:hover {
    color: var(--lantern);
}

.footer-copy {
    margin: 1.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--night-ink-faint);
}