/* --- Heroernes mål ---------------------------------------------------------

   Højde, bredde og luft for de store sidetoppe med et skiftende citat:
   Koranen, Forpligtet viden, Profetudtalelser og Profeter.

   Tallene stod før i hver sin fil, og de var ikke ens. Tre af dem delte det
   samme mål, den fjerde havde sit eget, og en femte havde en anden bredde —
   så den samme slider stod forskelligt fra side til side.

   Her står tallene ét sted. Sætter en side sine egne, går de fra hinanden
   igen: brug variablerne, og lad være med at skrive tallene om lokalt.
--------------------------------------------------------------------------- */

:root {
    /* Sidetoppens højde. Den vokser med skærmen, men holder sig inden for et
       vindue, så den hverken bliver lav på en bærbar eller fylder alt på en
       stor skærm. */
    --hero-height: clamp(560px, calc(100svh - 82px - 72px), 720px);

    /* På en smal skærm er der ikke højde at regne i procent af. */
    --hero-height-narrow: 760px;

    /* Indholdets bredde. Bredere end sidens almindelige 1200 px, fordi et
       arabisk citat sat i stor skrift skal kunne stå på få linjer. */
    --hero-inner-width: min(calc(100% - 2rem), 1320px);
    --hero-inner-width-narrow: calc(100% - 2rem);

    /* Luften over og under indholdet. */
    --hero-inner-padding: clamp(4rem, 8vh, 6rem);
    --hero-inner-padding-narrow: 3rem 2.5rem;
}

/* --- Slørets styrke --------------------------------------------------------

   Sløret over billedet lå på 0,92–0,96 der, hvor det er stærkest, og billedet
   forsvandt næsten under det. Her dæmpes det ét sted i stedet for at rette
   hver enkelt gradient — de er tegnet hver for sig med flere farvestop, og
   ændrer man dem, går sidetopperne fra hinanden igen.

   Skal sløret være svagere eller stærkere, er det dette ene tal.
--------------------------------------------------------------------------- */

:root {
    --hero-veil-strength: .75;
}

.hero-shade,
.destination-overlay,
.prophets-hero::after,
.reading-hero::before {
    opacity: var(--hero-veil-strength);
}