/* --- Lektionerne -----------------------------------------------------------

   Lektionerne stod som én blok brødtekst fra ende til anden. Teksten er den
   samme; her får den luft og en rytme, så øjet kan finde hvile og se, hvad
   der bærer.

   Der står ikke ét ord i opsætningen, som ikke står i lektionen. Delingen
   følger den tegnsætning, teksten selv har — et kolon, et punktum — og
   LessonReading sammenligner delene med den gemte tekst, hver gang siden
   vises.
--------------------------------------------------------------------------- */

.prose .reading {
    display: grid;
    gap: 1.6rem;
}

/* Første afsnit er indgangen. Det står lidt større, så læseren kan se, hvor
   teksten begynder, uden at der skal skrives «indledning» over den. */
.prose .reading > p:first-child:not(.reading-lead):not(.reading-declaration) {
    font-size: 1.16rem;
    line-height: 1.72;
    color: var(--ink);
}

/* Linjen der fører op til noget — typisk den, der ender på kolon. Den er
   sat lavere end brødteksten, fordi den peger fremad og ikke selv er
   tyngdepunktet. */
.prose .reading-lead {
    margin-bottom: -0.6rem;
    font: 600 0.82rem/1.55 var(--sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
}

/* --- Det teksten selv fremhæver --------------------------------------------

   En trosbekendelse, et løfte. Guldstregen i venstre side er den samme markør,
   som resten af siden bruger, og graden er sat op, så den kan læses som ét
   stykke i stedet for at gå i ét med brødteksten omkring.
--------------------------------------------------------------------------- */

.prose .reading-declaration {
    position: relative;
    padding: 1.35rem 0 1.35rem 1.9rem;
    border-top: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
    font: 400 clamp(1.25rem, 1.9vw, 1.6rem)/1.5 var(--serif);
    letter-spacing: -0.01em;
    color: var(--ink);
}

.prose .reading-declaration::before {
    content: "";
    position: absolute;
    top: 1.35rem;
    bottom: 1.35rem;
    left: 0;
    width: 2px;
    background: var(--gold);
}

/* På en smal skærm er der ikke plads til både streg og indryk. */
@media (max-width: 620px) {
    .prose .reading {
        gap: 1.3rem;
    }

    .prose .reading-declaration {
        padding-left: 1.2rem;
        font-size: 1.15rem;
    }

    .prose .reading > p:first-child:not(.reading-lead):not(.reading-declaration) {
        font-size: 1.08rem;
    }
}