/* ==========================================================================
   Homepage only.
   ========================================================================== */

/* Section opener sits as two columns on wide screens so the page does not
   begin every band with the same centred heading block. */
.intro-split {
    display: grid;
    gap: 18px clamp(30px, 5vw, 70px);
    align-items: end;
}

@media (min-width: 900px) {
    .intro-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .intro-split h2 { max-width: 15ch; }
    .intro-split p { margin: 0; }
}

/* The cream slide needs dark controls, otherwise the markers disappear. */
.is-light-slide .hero__dots button { background-color: rgba(20, 32, 42, .24); }
.is-light-slide .hero__dots button.is-active { background-color: var(--gold-deep); }

.is-light-slide .hero__arrow {
    background: rgba(255, 253, 248, .6);
    border-color: rgba(20, 32, 42, .3);
    color: var(--ink);
}

.is-light-slide .hero__arrow:hover,
.is-light-slide .hero__arrow:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.compare__body h2 { max-width: 16ch; }

/* The gold square behind the author photograph should never sit on top of
   the image on narrow screens where the layout stacks. */
.author-block__media { z-index: 0; }
.author-block__media img { position: relative; z-index: 1; }

.download__preview img { border-color: rgba(255, 255, 255, .35); }