/* ===========================================================================
   Om Allah
   ---------------------------------------------------------------------------
   Ét ark for hele siden. Det forrige var vokset til 1.332 linjer, hvor fire
   «endelige kompositionslag» rettede hinanden: sektionernes stemningsbilleder
   blev slået til i det ene lag og skjult i det næste, baggrundsfarven blev sat
   fire gange, og heroen havde tre sæt mål oven på hinanden. Det er derfor
   siden så flad ud — det meste af det, der var tegnet, var slukket igen.

   Her står hver ting ét sted, i den rækkefølge man møder den på siden:

     1  Farver og mål
     2  Sidetoppen
     3  Optakten — indledningen og sidens indhold i tal
     4  Fælles kapitelsprog
     5  Grundkapitler
     6  Allahs navne
     7  Introduktion   (slået fra i opsætningen, men skal virke, når den slås til)
     8  Emner
     9  Fordybelse
    10  Tilbedelsen
    11  Næste skridt
    12  Smalle skærme
    13  Uden bevægelse

   Navnenes bånd har sit eget ark: allah-attribute-cards.css.
   =========================================================================== */


/* --- 1 · Farver og mål ---------------------------------------------------- */

body[data-page="allah.index"] {
    --allah-night: #0b1a15;
    --allah-panel: #10261e;
    --allah-raised: #16332a;
    --allah-ink: #f2efe6;
    --allah-muted: #a9b8b0;
    --allah-gold: #d8b06a;
    --allah-gold-bright: #f0c97d;
    --allah-line: rgba(216, 176, 106, .22);
    --allah-hairline: rgba(255, 255, 255, .08);

    /* Sidens venstrekant. Ét mål for det hele: 20 px på en telefon, 64 px på
       en bred skærm. Øjet følger den lodrette linje ned gennem siden, og den
       må ikke knække fra kapitel til kapitel. */
    --allah-gutter: clamp(1.25rem, 4vw, 4rem);
    --hero-height: clamp(720px, 82svh, 920px);
}

body[data-page="allah.index"] #content {
    background: var(--allah-night);
}


/* --- 2 · Sidetoppen ------------------------------------------------------- */

/* Sidetoppen er den samme som Koranens, Forpligtet videns og
   Profetudtalelsernes: .destination-hero giver højden fra hero-metrics.css,
   sløret fra det samme sted, vejrtrækningen fra hero-motion.css og det brede
   guldbånd om verset fra hero-verse-band.css.

   Her står kun det, der er denne sides eget: billedet, som en redaktør vælger,
   og hvor meget plads titlen og verset får. */

.destination-allah .destination-image {
    background-image: var(--allah-hero-image);
    background-position: 84% center;
}

/* Billedet må gerne stå lysere her end på de andre sider. Motivet er en
   nattehimmel med kalligrafien i guld; under det almindelige filter forsvandt
   den næsten. */
[data-theme="dark"] .destination-allah .destination-image {
    filter: brightness(.88) saturate(.95);
}

.destination-allah[data-still] .destination-image {
    animation: none;
}

/* Sidetoppens slør — samme farve som kapitlernes, #07100d.

   Det stod i rgba(7, 8, 10), en kølig sort. Kapitlerne står i sidens egen
   bund, rgb(7, 16, 13), som har seks trin mere grønt. Forskellen kunne ses
   dér, hvor sidetoppen slutter og det første kapitel begynder. */
.destination-allah .destination-overlay {
    background:
        linear-gradient(90deg, rgba(7, 16, 13, .96) 0%, rgba(7, 16, 13, .9) 34%, rgba(7, 16, 13, .55) 52%, rgba(7, 16, 13, .12) 78%, rgba(7, 16, 13, .04) 100%),
        linear-gradient(0deg, rgba(7, 16, 13, .92) 0%, rgba(7, 16, 13, .3) 34%, transparent 62%);
}

/* Det samme tynde grønne lag som over kapitlernes billeder. Uden det ville
   sidetoppens fotografi være det eneste på siden uden sidens egen farve. */
.destination-allah .destination-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #006030;
    mix-blend-mode: soft-light;
    opacity: .3;
    pointer-events: none;
}

.allah-hero-copy {
    width: 100%;
    max-width: none;
    min-width: 0;
}

/* Indholdet står lodret midt i sidetoppen.

   De øvrige sidetopper lægger deres tekst i bunden, men her ville navnet og
   indledningen så ligge hen over bjergene og solopgangen. Midt i fladen står
   de på den rolige, mørke del til venstre for kalligrafien.

   Reglen står her, fordi den ellers kun ville gælde ved et tilfælde:
   .container har «margin: auto», og i et gitter centrerer det af sig selv. */
.destination-allah .destination-inner {
    min-width: 0;
    align-self: center;
    margin-block: auto;
}

/* Indledningen.

   Den stod et halvt år i et bånd under sidetoppen sammen med et tal. Båndet er
   væk, og sætningen er tilbage, hvor den hører til: lige under navnet, som en
   undertekst til det. Bredden er sat i tegn og ikke i pixel, så linjerne
   holder en længde, øjet kan følge — omkring tres tegn. */
.allah-hero-intro {
    max-width: 58ch;
    margin: 0;
    color: rgba(240, 245, 242, .88);
    font-size: clamp(1.02rem, 1.2vw, 1.22rem);
    line-height: 1.68;
    text-shadow: 0 2px 20px rgba(2, 3, 4, .55);
}

/* Titlen.

   Den står i guld og ikke i hvidt. Overlinjen «OM ALLAH» er væk — den sagde
   det samme som navnet under den — og så skal navnet selv bære toppen af
   siden. Guldet er sidens egen farve til det, der betyder mest.

   Den fælles regel giver 4–7 rem og højst elleve tegn pr. linje. «Allah, Den
   Almægtige» er nitten tegn og ville brække midt i navnet. Her er linjen
   bredere og skriften en anelse mindre, så titlen kan stå på to linjer med
   navnet samlet på den første. */
.destination-allah .destination-copy h1 {
    max-width: 15ch;
    margin: 0 0 1.2rem;
    color: var(--allah-gold-bright);
    text-shadow: 0 3px 30px rgba(2, 10, 7, .55);
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: .94;
    letter-spacing: -.035em;
    text-wrap: balance;
}


/* Et diskret kapitelkompas. Det er ikke en ekstra navigation under headeren,
   men en læsemarkør, som først får betydning, når man er inde i værket. */
.allah-chapter-rail {
    position: fixed;
    z-index: 18;
    top: 50%;
    right: max(.8rem, calc((100vw - 1840px) / 2));
    translate: 0 -50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.allah-chapter-rail.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.allah-chapter-rail ol { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.allah-chapter-rail a {
    display: flex;
    gap: .65rem;
    align-items: center;
    justify-content: flex-end;
    min-width: 44px;
    min-height: 34px;
    color: rgba(216, 176, 106, .48);
}
.allah-chapter-rail a span { font: italic 700 .64rem/1 var(--serif); }
.allah-chapter-rail a::after {
    content: '';
    width: 18px;
    height: 1px;
    background: currentColor;
    transition: width .25s ease, color .25s ease;
}
.allah-chapter-rail a b {
    position: absolute;
    right: 3rem;
    width: max-content;
    padding: .35rem .55rem;
    border: 1px solid var(--allah-line);
    color: var(--allah-ink);
    background: rgba(5, 7, 10, .94);
    font-size: .63rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(5px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.allah-chapter-rail a:hover b,
.allah-chapter-rail a:focus-visible b { opacity: 1; transform: none; }
.allah-chapter-rail a[aria-current="location"] { color: var(--allah-gold-bright); }
.allah-chapter-rail a[aria-current="location"]::after { width: 32px; }


/* --- 4 · Fælles kapitelsprog ---------------------------------------------- */

/* Alle kapitler går lige langt ud, har den samme luft over og under, og
   begynder med den samme guldstreg på tværs. Der er ingen mindstehøjde: et
   kort kapitel skal være kort og ikke efterlade et tomt felt under sig. Det
   var den gamle «min-block-size: 600px», der gav de store huller mellem
   afsnittene. */
.allah-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(4.5rem, 8vw, 8rem);
    color: var(--allah-ink);
    background: var(--allah-night);
    scroll-margin-top: 6rem;
}

.allah-section > .container {
    width: 100%;
    max-width: none;
    padding-inline: var(--allah-gutter);
}

/* Kapitelbroen: en guldstreg, der lyser stærkest på midten og toner ud mod
   siderne. Den erstatter den hårde kant mellem to flader. */
.allah-section::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: var(--allah-gutter);
    left: var(--allah-gutter);
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 2%, rgba(216, 176, 106, .12) 22%, rgba(240, 201, 125, .62) 50%, rgba(216, 176, 106, .12) 78%, transparent 98%);
    box-shadow: 0 -18px 62px rgba(216, 176, 106, .1), 0 22px 70px rgba(63, 139, 104, .1);
}

/* Lyset øverst i kapitlet. Det følger musen på de kapitler, hvor
   js/allah-experience.js er sat på; ellers står det, hvor standardværdien
   siger. */
.allah-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(46rem 12rem at 50% 0%, rgba(216, 176, 106, .1), transparent 74%),
        radial-gradient(40rem 30rem at var(--allah-pointer-x, 84%) var(--allah-pointer-y, 18%), rgba(216, 176, 106, .06), transparent 72%);
}

/* Ingen dis omkring guldstregen.

   To ting malede den: en guldvask på 12 rem øverst i hvert kapitel, og
   stregens egen skygge på 62 til 70 px. Begge dele lagde en grålig stribe
   langs kanten, hvor to fotografier ellers mødtes.

   Stregen selv bliver stående. Den er én pixel og skarp, og den markerer,
   hvor et kapitel begynder. */
.allah-section::after { background: none; }
.allah-section::before { box-shadow: none; }

/* De fire kapitler, hvor billedet står som et bånd, har den samme bund.

   Den er sidens egen: «--paper» i mørk tilstand, #07100d. Den er ikke
   neutral — rgb(7, 16, 13) har seks trin mere grønt end rødt og blåt — og det
   er med vilje. Det er den bund, hele sitet står på, og kapitlerne skal ikke
   være koldere end resten.

   Kapitlerne stod før i fire forskellige farver: rgb(10, 15, 21) blåt,
   rgb(9, 11, 14), rgb(7, 9, 12) og rgb(16, 38, 30) grønt. Det sidste var det,
   man så — «Allahs navne» skiftede pludselig tone midt i en side. Fejlen var
   ikke, at den var grøn; den var, at den var meget grønnere end alle de
   andre. */
.allah-section { background: #07100d; }

/* Glas.

   Et felt, der lader billedet bagved komme igennem, men stadig kan læses på.
   Det står i «Allahs navne» og i «Tilbedelsen», og opskriften skal kun ét
   sted: ændrer man den, ændrer begge sig sammen.

   Bunden er 20-30 procent tæt. Det er sløringen, der bærer læsbarheden i
   stedet for farven: 34 px jævner motivet ud til rolige flader, så
   bogstaverne ikke skal konkurrere med søjler og gyldne kanter.

   De tre lag er det, der gør det til glas og ikke bare til en gennemsigtig
   firkant:

     et strejf af lys på tværs fra øverste venstre hjørne
     en svag mørk tone, så den hvide tekst har noget at stå på
     en lys streg langs inderkanten foroven — glassets egen kant

   Tonen er neutral, rgb(20, 23, 27). Den var grøn, rgb(12, 38, 30), og det
   kunne ses: ruden lagde en grøn tone hen over otte grafitgrå fotografier.

   «saturate» over 1 giver farverne bagved lidt igen; sløring alene gør et
   motiv gråligt. */
.allah-glass {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 235, 188, .2);
    border-radius: 18px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, .06) 100%),
        linear-gradient(135deg, rgba(20, 23, 27, .2), rgba(5, 7, 9, .3));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 34px 90px rgba(0, 0, 0, .4);
    backdrop-filter: blur(34px) saturate(1.45);
}

/* Kapitellærredet — ét fotografi, der fylder kapitlet.

   Det er sidens ene princip, og det gælder alle otte kapitler. Før stod de i
   tre forskellige udgaver: nogle fyldte hele kapitlet, nogle stod som et bånd
   over de midterste to tredjedele med tonede kanter, og ét lå fire procent
   uden for kapitlet og blev langsomt forstørret, mens man læste. Tre måder at
   vise det samme på.

   Nu ligger lærredet præcis på kapitlet, står stille og skæres kun af
   «cover», dér hvor kapitlets form ikke er billedets. Ingen maske, ingen
   kanter at skjule, ingen bevægelse.

   «hvem-er-allah» bruger stadig sit eget lag, «allah-who-backdrop», i stedet
   for lærredet. Det er den sidste rest af to måder at lægge et billede ind
   på; reglerne herunder gælder begge, så de ser ens ud. */
.allah-section-canvas,
.allah-who-backdrop {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.allah-section-canvas picture,
.allah-section-canvas img,
.allah-who-backdrop picture,
.allah-who-backdrop img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Den samme dæmpning på alle otte. De stod i to udgaver — én mørkere på
   0,9 og én lysere på 1,06 — og forskellen kunne ses, når man rullede fra det
   ene kapitel til det næste. */
.allah-section-canvas img,
.allah-who-backdrop img {
    object-fit: cover;
    object-position: var(--image-focus, center);
    filter: saturate(1) brightness(1.02) contrast(1.03);
    transform: none;
    animation: none;
}

/* Et tyndt grønt lag over billederne.

   Farven er ikke valgt. Den er målt i ejerens eget logo: «Islamisk» står i en
   ren smaragdgrøn, hvor kernen ligger på rgb(0, 96, 48) — nul rødt, og et
   spænd fra rgb(0, 84, 48) til rgb(0, 180, 60). Det er sidens grønne, og det
   er den, billederne skal hælde mod.

   «soft-light» er det, der gør det muligt at holde laget tyndt. En almindelig
   grøn flade oveni ville lyse de sorte kanter op og lægge netop den grønne
   stribe, der før kunne ses, hvor to kapitler mødes. «soft-light» rører kun
   mellemtonerne: sort bliver sort, og det er søjlerne, gulvene og luften
   imellem dem, der får farve.

   Laget ligger under sløret, så det tonede billede er det, sløret dæmper —
   ikke omvendt. */
.allah-section-canvas::before,
.allah-who-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #006030;
    mix-blend-mode: soft-light;
    opacity: .3;
    pointer-events: none;
}

/* Sløret — det samme som sidetoppens.

   Sidetoppen lægger sit slør hen over fotografiet: tæt i venstre side, hvor
   teksten står, og næsten væk i højre, hvor billedet skal ses. Farven her er
   kapitlets egen bund, #07100d, så slør og flade er samme farve.
   Kapitlerne gør nu det samme, i den samme farve og med den samme form.
   Ruller man ned, er det den samme flade hele vejen.

   Sløret er vandret og kun vandret. Et lodret slør ville mørkne kapitlets
   øverste og nederste kant og lægge en stribe dér, hvor to fotografier
   mødes — det var netop det, der skulle væk.

   Kapitler uden en rude om indholdet får en anelse mere; se nedenfor. */
.allah-section-canvas::after,
.allah-who-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg,
        rgba(7, 16, 13, .86) 0%,
        rgba(7, 16, 13, .68) 32%,
        rgba(7, 16, 13, .34) 62%,
        rgba(7, 16, 13, .2) 100%);
}

/* «Grundlaget» og «Skaberen og skabningen» har ingen rude om indholdet — der
   står teksten direkte på fotografiet, og sløret skal bære den alene. */
.allah-section--who .allah-who-backdrop::after,
.allah-section--unlike .allah-section-canvas::after {
    background: linear-gradient(90deg,
        rgba(7, 16, 13, .92) 0%,
        rgba(7, 16, 13, .8) 34%,
        rgba(7, 16, 13, .5) 64%,
        rgba(7, 16, 13, .32) 100%);
}

/* Fanerækken står nederst i kapitlet, tit over et gulv, der spejler lyset.
   Skyggen ligger kun bag bogstaverne og ikke som et bånd over hele bredden.
   Den er sat for alle kapitler, så rækken ser ens ud i dem alle. */
.allah-stations-nav button {
    text-shadow: 0 1px 3px rgba(2, 4, 6, .95), 0 2px 14px rgba(2, 4, 6, .8);
}


/* Stemningsbilledet.

   Det ligger bagved kapitlet, tonet ud mod venstre, så teksten har en rolig
   flade at stå på. Laget flytter sig ganske lidt, mens man ruller —
   js/allah-experience.js sætter --allah-section-progress. */
.allah-section-atmosphere {
    position: absolute;
    z-index: -2;
    inset: -4% 0 -4% auto;
    width: min(72%, 1100px);
    height: 108%;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 76% 96% at 82% 50%, #000 30%, rgba(0, 0, 0, .7) 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 76% 96% at 82% 50%, #000 30%, rgba(0, 0, 0, .7) 62%, transparent 100%);
}

.allah-section-atmosphere picture {
    display: block;
    width: 100%;
    height: 100%;
}

.allah-section-atmosphere img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--image-focus, center);
    filter: saturate(.86) brightness(.5) contrast(1.02);
    transform: translate3d(0, calc((var(--allah-section-progress, .5) - .5) * -5%), 0) scale(1.06);
    will-change: transform;
}

/* Kapitlets overskrift.

   Nummeret og kapitlets navn i guld, overskriften under det, og til sidst
   indledningen. Overskriften må bryde: den blev før holdt på én linje og
   klippet af med tre prikker, og den måtte derfor sættes i tre forskellige
   størrelser alt efter, hvor lang den var. */
.allah-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.allah-section-eyebrow {
    display: flex;
    gap: .8rem;
    align-items: center;
    margin: 0 0 1.1rem;
    color: var(--allah-gold);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.allah-section-eyebrow i {
    font: italic 700 .78rem/1 var(--serif);
    letter-spacing: 0;
    opacity: .75;
}

.allah-section-eyebrow i::after {
    content: "";
    display: inline-block;
    width: 2.4rem;
    height: 1px;
    margin-left: .8rem;
    vertical-align: middle;
    background: linear-gradient(90deg, rgba(216, 176, 106, .8), rgba(216, 176, 106, .1));
}

.allah-section-head h2 {
    max-width: 20ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.3rem, 4.4vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.allah-section-intro {
    max-width: 56ch;
    margin: 1.6rem 0 0;
    padding-left: 1.2rem;
    border-left: 1px solid var(--allah-line);
    color: #bcc9c2;
    font-size: 1.02rem;
    line-height: 1.72;
}

/* Grid-feltet må kunne blive smallere end sit indhold; ellers kan en lang
   overskrift skubbe knappen ved siden af ud over kanten. */
.allah-section-head-copy {
    min-width: 0;
}

.allah-section-head-actions {
    align-self: end;
    justify-self: end;
}

/* Nummeret, der står foran et opslag i et kapitel. */
.allah-entry-number {
    color: var(--allah-gold);
    font: italic 700 .74rem/1 var(--serif);
    letter-spacing: .04em;
}


/* --- 5 · Grundkapitler ----------------------------------------------------- */

/* Signaturkapitlet "Hvem er Allah?" er bygget som en monumental tærskel i
   stedet for endnu en todelt tekst/billed-række. Selve udsagnet kommer stadig
   udelukkende fra de publicerede navne i databasen. */
.allah-section--who {
    min-height: clamp(780px, 92svh, 1040px);
    display: grid;
    align-items: stretch;
    padding-block: clamp(4.5rem, 7vw, 7rem);
}

/* Lyset, der følger den valgte fane.

   Kapitlet havde før sit eget slør oveni det fælles: et lodret på 46 procent
   foroven og 50 forneden, og et vandret i en fjerde farve, rgba(5, 10, 16).
   Det er væk — sløret er nu det samme som i de øvrige kapitler.

   Tilbage er kun lyset: en afdæmpet gylden lysning, der flytter sig hen til
   den bue, det valgte navn hører til. Den bliver, fordi den ikke er en
   dæmpning men en bevægelse, og fordi den svarer på et klik. */
.allah-section--who::after {
    z-index: -1;
    background: radial-gradient(24rem 22rem at var(--allah-who-light-x, 13%) 52%, rgba(228, 210, 174, .09), transparent 72%);
    transition: background-position .8s ease, opacity .8s ease;
}

/* De fire eksisterende faner svarer til hallens fire buer. Når et navn bliver
   aktivt, flytter en afdæmpet gylden lysning sig til den tilsvarende bue. */
.allah-section--who:has(.allah-who-tabs button:nth-child(1)[aria-selected="true"]) { --allah-who-light-x: 11%; }
.allah-section--who:has(.allah-who-tabs button:nth-child(2)[aria-selected="true"]) { --allah-who-light-x: 37%; }
.allah-section--who:has(.allah-who-tabs button:nth-child(3)[aria-selected="true"]) { --allah-who-light-x: 63%; }
.allah-section--who:has(.allah-who-tabs button:nth-child(4)[aria-selected="true"]) { --allah-who-light-x: 89%; }

.allah-who-stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.allah-section--who .allah-section-head {
    max-width: 900px;
    margin-bottom: 0;
}

.allah-section--who .allah-section-head h2 {
    color: #fff;
    text-shadow: 0 2px 24px rgba(4, 12, 9, .45);
}

/* Boksen står lodret midt i kapitlet.

   Den lå i bunden, holdt nede af 360 px luft over sig. Nu bestemmer overskriften
   ikke længere, hvor den ligger: overskriften er løftet ud af rækken og lagt
   øverst i kapitlet, og boksen har hele fladen at centrere sig i. Så rammer
   dens midte kapitlets midte — kapitlet har lige meget luft foroven og
   forneden.

   Kun på brede skærme. På en telefon står overskriften og boksen under
   hinanden, og der er ikke plads til at lægge dem oven på hinanden. */
.allah-who-explorer {
    width: min(100%, 1260px);
    margin: auto;
    padding-top: 0;
}

@media (min-width: 1101px) {
    /* Fladen skal fylde hele kapitlet.

       .container har «margin: auto», og i et gitter får det feltet til at
       skrumpe ind om sit indhold. Med overskriften ude af rækken blev fladen
       kun så høj som boksen selv — og så lagde overskriften sig oven i den.
       «align-self: stretch» og en margen på nul foroven og forneden giver
       fladen kapitlets fulde højde tilbage. */
    .allah-who-stage {
        align-self: stretch;
        margin-block: 0;
        justify-content: center;
    }

    /* Kanterne skal være sidens egne. Et felt uden for rækken måler ikke fra
       .container's indhold, men fra dens kant — og så begyndte overskriften
       helt ude i skærmens venstre side, mens boksen under den holdt sig inden
       for margenen. */
    .allah-section--who .allah-section-head {
        position: absolute;
        top: 0;
        right: var(--allah-gutter);
        left: var(--allah-gutter);
    }
}

/* Fanerne og feltet under dem er den samme rude som i de øvrige kapitler —
   samme kant, samme bund, samme sløring. De stod før i deres egen blanding:
   en blålig bund på 44 og 58 procent og en sløring på 18 og 26 px, hvor
   resten af siden bruger 34. */
.allah-who-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(255, 235, 188, .2);
    border-bottom: 0;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, .06) 100%),
        linear-gradient(135deg, rgba(20, 23, 27, .2), rgba(5, 7, 9, .3));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    backdrop-filter: blur(34px) saturate(1.45);
}

.allah-who-tabs button {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .25rem .8rem;
    min-height: 92px;
    padding: 1.2rem 1.35rem;
    border: 0;
    border-right: 1px solid rgba(255, 235, 188, .2);
    color: rgba(255, 255, 255, .7);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: color .3s ease, background-color .3s ease;
}

.allah-who-tabs button:last-child { border-right: 0; }
.allah-who-tabs button::before {
    content: '';
    position: absolute;
    top: -1px;
    right: 18%;
    left: 18%;
    height: 2px;
    background: var(--allah-gold-bright);
    box-shadow: 0 0 22px rgba(240, 201, 125, .65);
    opacity: 0;
    transform: scaleX(.3);
    transition: opacity .3s ease, transform .3s ease;
}

.allah-who-tabs button > span {
    grid-row: span 2;
    padding-top: .22rem;
    color: var(--allah-gold);
    font: italic 700 .68rem/1 var(--serif);
}

.allah-who-tabs b { color: inherit; font-size: .96rem; }
.allah-who-tabs small { color: rgba(255, 255, 255, .46); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.allah-who-tabs button:hover,
.allah-who-tabs button:focus-visible { color: #fff; background: rgba(255, 255, 255, .055); }
.allah-who-tabs button[aria-selected="true"] { color: #fff; background: rgba(216, 176, 106, .11); }
.allah-who-tabs button[aria-selected="true"]::before { opacity: 1; transform: none; }

/* Guldstregen over den valgte fane er også uret.

   Skifter fanerne af sig selv, vokser stregen fra venstre mod højre og er
   fuld, når den næste fane kommer. Så kan man se, at siden er ved at skifte,
   i stedet for at blive overrasket midt i en sætning. Vælger man selv en fane,
   begynder stregen forfra.

   js/allah-experience.js sætter mærket og tiden. */
.allah-who-tabs[data-allah-tab-auto] button[aria-selected="true"]::before {
    transform-origin: left;
    animation: allah-tab-tick var(--allah-tab-tick, 8000ms) linear forwards;
}

@keyframes allah-tab-tick {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Feltet er gennemsigtigt nok til, at hallen bagved kan anes.

   Bunden er sat fra 82 til 58 procent. For at teksten stadig kan læses oven på
   et lyst fotografi, er sløringen sat op fra 18 til 26 px: den jævner motivet
   ud til rolige flader, så bogstaverne ikke skal konkurrere med søjler og
   gyldne kanter. */
.allah-who-panels {
    border: 1px solid rgba(255, 235, 188, .2);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, .06) 100%),
        linear-gradient(135deg, rgba(20, 23, 27, .2), rgba(5, 7, 9, .3));
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 34px 90px rgba(0, 0, 0, .4);
    backdrop-filter: blur(34px) saturate(1.45);
}

/* Den danske tekst står til venstre, den arabiske form til højre.

   Det er den vej, en dansk læser møder dem: navnet og betydningen først, og
   den arabiske form som svaret i højre side. Rækkefølgen i skabelonen er den
   samme, så en skærmlæser hører det i den orden, øjet ser det. */
.allah-who-panels article {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
    min-height: 210px;
    padding: clamp(1.8rem, 3.5vw, 3.5rem);
}

/* Samme greb som i «Før skabelsen»: alle faner ligger i det samme gitterfelt
   og bliver der, også når de er skjult. Feltet er så højt som den længste
   tekst, og kortet rykker sig ikke, når man skifter. */
.allah-who-panels {
    display: grid;
}

.allah-who-panels article {
    grid-area: 1 / 1;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .72, .2, 1), visibility 0s;
}

.allah-who-panels article[hidden] {
    display: grid;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .72, .2, 1), visibility 0s linear .4s;
}
.allah-who-mark { padding-left: clamp(1rem, 3vw, 3rem); border-left: 1px solid rgba(216, 176, 106, .3); text-align: center; }
.allah-who-mark p { margin: 0; color: var(--allah-gold-bright); font-family: var(--arabic, "Uthman Taha Naskh", "Traditional Arabic", serif); font-size: clamp(3rem, 5vw, 5.4rem); line-height: 1.2; text-shadow: 0 0 36px rgba(216, 176, 106, .2); }
.allah-who-mark span { display: block; margin-top: .55rem; color: rgba(255,255,255,.54); font-size: .69rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.allah-who-answer h3 { margin: 0 0 .8rem; color: #fff; font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1; }
.allah-who-answer p { max-width: 62ch; margin: 0; color: rgba(241, 246, 242, .78); font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.72; }

/* De tre kapitler med en rude har den samme form: en mindstehøjde, og
   indholdet lodret på midten, hvis der er plads til overs. */
.allah-section--before,
.allah-section--independence,
.allah-section--lessons,
.allah-section--worship {
    min-height: 720px;
    display: grid;
    align-items: center;
    overflow: hidden;
}

/* Overskriften fylder den bredde, den har brug for.

   Grundreglen giver overskrifter 20 tegn, og de tre kapitler har titler på 22,
   31 og 32 tegn. Loftet knækkede dem midt over uden grund: der er 1.325 px i
   kapitlet, og den længste fylder 1.147. */
.allah-chapter-inner .allah-section-head h2 { max-width: none; }

.allah-chapter-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* Mindsteafstand mellem overskriften og navnet. På en bred skærm er der
       luft i forvejen; på en telefon rørte de to hinanden. */
    gap: clamp(1.25rem, 4vw, 2.5rem);
    width: 100%;
}

.allah-section--before .allah-section-head h2 {
    text-shadow: 0 2px 26px rgba(2, 10, 7, .42);
}

/* Boksen står lodret midt i kapitlet.

   Den lå i bunden med 288 px luft over sig. Uden den luft bliver kapitlet
   knap 300 px lavere, og formen nærmer sig billedets: jo lavere kapitlet er i
   forhold til sin bredde, jo mindre skal «cover» skære af panoramaet i
   siderne. Mindstehøjden er sat ned af samme grund. */
/* Navnet står midt i buegangen — ingen kasse.

   Kortet er væk. Læsbarheden kommer fra sløret over fotografiet, ikke fra en
   bund under teksten, og kompositionen er symmetrisk som motivet: navnet på
   gangens midterakse, dér hvor søjlerne forsvinder i lyset.

   Uden kortet er kapitlet 460 px lavere, og dét er det, der gør, at panoramaet
   kan ses helt: billedet er 1805 x 871 px, altså 2,07 bredt mod højt, og et
   lavere kapitel kommer tættere på den form. «cover» skærer kun det, formerne
   er fra hinanden. */
.allah-stations {
    /* Knappens størrelse ét sted. Ruden i «Tilbedelsen» regner sin bredde ud
       fra den, så den altid ender inden for knapperne — også når skriften
       følger skærmen. */
    --stations-step: clamp(2.5rem, 1.1vw + 2.1rem, 3.3rem);
    position: relative;
    display: grid;
    justify-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    width: min(100%, 1180px);
    margin: auto;
    text-align: center;
}

.allah-stations-display {
    display: grid;
    width: 100%;
}

/* Alle faner fylder den samme plads.

   Felterne lå oven på hinanden i det samme gitterfelt, men den skjulte fane
   var «display: none» og talte derfor ikke med i højden. Kapitlet blev
   dermed lige så højt som den fane, man stod på — og hoppede op og ned, hver
   gang man klikkede.

   Nu bliver alle felter i gitteret. Feltet er så højt som den længste tekst,
   og højden ændrer sig ikke, når man skifter. Den skjulte fane er «visibility:
   hidden», ikke «display: none»: så er den ude af både oplæsningen og
   tabulatoren, men bliver ved med at fylde sin plads.

   Ind- og udtoningen sker med en overgang og ikke med en animation. En
   animation kører kun, når elementet skifter fra «display: none», og det gør
   det ikke længere. */
.allah-stations-display article {
    grid-area: 1 / 1;
    display: grid;
    align-content: center;
    justify-items: center;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .72, .2, 1), visibility 0s;
}

.allah-stations-display article[hidden] {
    display: grid;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .72, .2, 1), visibility 0s linear .4s;
}

/* Et citat i rækken — en profetudtalelse eller et Koranvers.

   Et navn er ét ord i stor arabisk skrift. Et citat er en sætning, og den
   samme skriftstørrelse ville fylde to-tre linjer og skubbe alt andet ud.

   Sætningen skal stå på én linje. Det var bredden, der knækkede den: reglen gav
   citatet 30 tegn. Det længste på siden — 2:21, tolv ord — fylder 841 px ved
   den størrelse, der står her, og ruden har godt 950 px indvendigt. Loftet er
   derfor sat efter ruden og ikke efter teksten.

   «balance» deler den jævnt, når der alligevel er flere linjer, og det er der
   på en telefon, hvor 390 px ikke rækker til et vers på tolv ord.

   Reglerne står med feltets navn foran, fordi grundreglerne står længere nede
   i filen og ellers ville vinde. */
.allah-stations-display .allah-stations-quote .allah-stations-arabic {
    max-width: min(100%, 60rem);
    margin-inline: auto;
    font-size: clamp(1.5rem, 2.5vw, 2.35rem);
    line-height: 1.95;
    text-wrap: balance;
}

/* «Profeten sagde:» er en indledning og ikke et navn. */
.allah-stations-display .allah-stations-quote h3 {
    margin: 1.1rem 0 0;
    color: var(--allah-gold);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: none;
}

.allah-stations-source {
    margin: 1rem 0 0;
    color: var(--allah-gold-bright);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .06em;
}


.allah-stations-arabic {
    margin: 0;
    color: var(--allah-gold-bright);
    font: 400 clamp(3.4rem, 7vw, 6.8rem)/1.25 var(--arabic, "Uthman Taha Naskh", "Traditional Arabic", serif);
    text-shadow: 0 4px 40px rgba(3, 5, 8, .8), 0 0 60px rgba(216, 176, 106, .22);
}

.allah-stations-display h3 {
    margin: .5rem 0 .45rem;
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    text-shadow: 0 3px 26px rgba(3, 5, 8, .72);
}

.allah-stations-display article > small {
    color: var(--allah-gold);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* Betydningen får en guldstreg over sig i stedet for en ramme omkring sig. */
.allah-stations-copy {
    position: relative;
    max-width: 56ch;
    margin: 1.6rem 0 0;
    padding-top: 1.5rem;
    color: rgba(244, 248, 245, .92);
    font-size: clamp(1.02rem, 1.25vw, 1.18rem);
    line-height: 1.72;
    text-shadow: 0 2px 20px rgba(3, 5, 8, .75);
}

.allah-stations-copy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 74px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--allah-gold-bright), transparent);
    transform: translateX(-50%);
}

/* Navnene står som en række under teksten. Ingen felter — kun navnet, og en
   guldstreg under det valgte. Stregen er samtidig uret, når rækken skifter af
   sig selv. */
/* Frem og tilbage i rækken. Samme runde glas som i «Allahs navne», men her
   ud for feltets midte i hver sin side. På smalle skærme er der ikke plads;
   dér går de ned under fanerne — se «Smalle skærme». */
.allah-stations-step {
    position: absolute;
    top: calc(50% - 4rem);
    width: var(--stations-step);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0 0 .18em;
    border: 1px solid rgba(255, 235, 188, .24);
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 16px 38px rgba(1, 8, 6, .34);
    color: var(--allah-gold-bright);
    font: 400 1.6rem/1 var(--serif);
    cursor: pointer;
    backdrop-filter: blur(20px) saturate(1.35);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.allah-stations-step--prev { left: 0; }
.allah-stations-step--next { right: 0; }

.allah-stations-step:hover,
.allah-stations-step:focus-visible {
    border-color: rgba(255, 235, 188, .5);
    background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
    transform: scale(1.08);
}

.allah-stations-step:active { transform: scale(.96); }

.allah-stations-nav {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(.5rem, 2vw, 2rem);
    justify-content: center;
}

.allah-stations-nav button {
    position: relative;
    display: inline-flex;
    gap: .7rem;
    align-items: baseline;
    padding: .7rem .35rem 1rem;
    border: 0;
    color: rgba(255, 255, 255, .58);
    background: transparent;
    cursor: pointer;
    transition: color .3s ease;
}

.allah-stations-nav button > span {
    color: var(--allah-gold);
    font: italic 700 .68rem/1 var(--serif);
    opacity: .8;
}

.allah-stations-nav button b {
    font-size: clamp(.82rem, 1vw, .96rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 2px 16px rgba(3, 5, 8, .7);
}

/* Sporet, stregen løber i. Det ligger der hele tiden, så rækken ikke hopper,
   når den valgte skifter. */
.allah-stations-nav button::before {
    content: '';
    position: absolute;
    right: .35rem;
    bottom: 0;
    left: .35rem;
    height: 1px;
    background: rgba(255, 255, 255, .16);
}

.allah-stations-nav button::after {
    content: '';
    position: absolute;
    right: .35rem;
    bottom: 0;
    left: .35rem;
    height: 2px;
    background: var(--allah-gold-bright);
    box-shadow: 0 0 18px rgba(240, 201, 125, .6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.allah-stations-nav button:hover,
.allah-stations-nav button:focus-visible { color: #fff; }
.allah-stations-nav button[aria-selected="true"] { color: #fff; }
.allah-stations-nav button[aria-selected="true"]::after { transform: scaleX(1); }

.allah-stations-nav[data-allah-tab-auto] button[aria-selected="true"]::after {
    transition: none;
    animation: allah-tab-tick var(--allah-tab-tick, 8000ms) linear forwards;
}

.allah-section--unlike {
    min-height: clamp(820px, 94svh, 1080px);
    display: grid;
    align-items: stretch;
}
.allah-section--unlike .allah-section-head { max-width: 960px; margin-bottom: 0; }

/* Skaberen og skabningen: et åbent vidnesbyrdspanorama, ikke et kort.

   Mindstehøjden var 112 % af skærmen og mindst 980 px. På en skærm på 1080
   betød det, at kapitlet aldrig kunne være lavere end 1.210 px — også når
   indholdet fyldte mindre. Nu må det følge sit indhold, med et gulv, der
   sikrer, at himlen bag verset stadig kan ses. */
.allah-section--unlike {
    min-height: 0;
}

/* Det varme lys, der følger musen.

   Det er den samme slags lys som i «Grundlaget», og nu også den samme farve og
   styrke: rgba(228, 210, 174) ved ni procent. Her stod det i en fjerde farve
   ved seksten procent — næsten dobbelt så stærkt — og kapitlet havde desuden
   sit eget lodrette slør oveni det fælles. Sløret er væk; lyset bliver. */
.allah-section--unlike::after {
    opacity: 1;
    background: radial-gradient(32rem 22rem at var(--allah-pointer-x, 50%) var(--allah-pointer-y, 48%), rgba(228, 210, 174, .09), transparent 72%);
}

.allah-boundary-inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; }

/* Versrækken her er den samme komponent som på Koranens side, og dens knapper
   er firkantede med en grøn bund, rgba(5, 18, 14). Ved siden af de runde
   glasknapper i de tre øvrige rækker så de ud som noget andet.

   Reglerne står med kapitlets navn foran, så Koranens side beholder sine. */
.allah-section--unlike .quran-slider-actions { gap: .6rem; }

.allah-section--unlike .quran-slider-actions button {
    width: clamp(2.5rem, 1.1vw + 2.1rem, 3.3rem);
    height: clamp(2.5rem, 1.1vw + 2.1rem, 3.3rem);
    border: 1px solid rgba(255, 235, 188, .24);
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 16px 38px rgba(1, 8, 6, .34);
    color: var(--allah-gold-bright);
    backdrop-filter: blur(20px) saturate(1.35);
}

.allah-section--unlike .quran-slider-actions button:hover,
.allah-section--unlike .quran-slider-actions button:focus-visible {
    border-color: rgba(255, 235, 188, .5);
    background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
    transform: scale(1.08);
}
.allah-section--unlike .allah-section-head h2 { color: #fff; text-shadow: 0 2px 28px rgba(1,2,3,.48); }

/* Luften over verset.

   Den var 19 % af skærmens bredde — 273 px på en almindelig skærm. Det var
   sat, dengang verset fyldte seks linjer og skulle skubbes ned under
   overskriften. Verset er nu én linje, og de 273 px stod tilbage som et tomt
   stykke himmel midt i kapitlet. Der skal stadig være himmel at se, men det
   halve er nok. */
.allah-boundary-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 1240px);
    margin: auto auto 0;
    padding-top: clamp(2rem, 4.5vw, 4.5rem);
}

/* De seks Koranvers.

   De stod i sidetoppen før og bruger stadig sidens fælles slider: det brede
   guldbånd om den arabiske tekst kommer fra hero-verse-band.css, og
   betjeningen nedenunder er den samme som på Koranen og Forpligtet viden.

   Kun to ting er kapitlets egne: feltet er lavere end på Koranen, fordi
   kapitlet også bærer en overskrift og en navneoversigt, og der er luft under
   betjeningen, så den ikke støder ind i fanerne. */
.allah-boundary-slider {
    width: 100%;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.allah-boundary-slider .quran-verse-stage {
    min-height: clamp(270px, 26vw, 340px);
}

.allah-boundary-slider .quran-verse-slide {
    padding-block: 1.3rem 1.1rem;
}

.allah-boundary-slider .quran-verse-slide blockquote {
    background: rgba(8, 10, 12, .62);
}

.allah-boundary-slider .quran-slider-actions button {
    width: 44px;
    height: 44px;
}


/* --- 7 · Introduktion ------------------------------------------------------ */

/* Kapitlet er slået fra i opsætningen. Reglerne bliver stående, så det står
   rigtigt den dag, en redaktør slår det til igen. */

/* Kapitlet står en anelse lysere end de andre: det er sidens indgang, og
   fotografiet ved siden af teksten fylder halvdelen af fladen.

   Lysningen var grøn, rgb(32, 78, 60), på en grøn bund. Nu er den varm som de
   to andre lysninger på siden, og bunden er sidens egen. */
.allah-introduction {
    background:
        radial-gradient(55% 60% at 88% 24%, rgba(228, 210, 174, .07), transparent 72%),
        #07090c;
}

.allah-introduction-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.allah-introduction-copy .allah-section-head {
    grid-template-columns: 1fr;
    margin-bottom: 2rem;
}

.allah-introduction-text {
    max-width: 60ch;
    color: #ccd8d1;
    font-size: clamp(1.14rem, 1.6vw, 1.42rem);
    line-height: 1.72;
}

.allah-introduction-statements {
    margin-top: 2.8rem;
    border-top: 1px solid var(--allah-hairline);
}

.allah-introduction-statements > div {
    display: grid;
    grid-template-columns: 2.6rem 11rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px solid var(--allah-hairline);
}

.allah-introduction-statements span {
    color: var(--allah-gold);
    font: italic 700 .74rem var(--serif);
}

.allah-introduction-statements strong {
    font-size: 1.14rem;
    font-weight: 600;
}

.allah-introduction-statements p {
    margin: 0;
    color: var(--allah-muted);
    font-size: .92rem;
}

.allah-introduction-image {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--allah-line);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(1, 8, 6, .35), 20px 20px 0 rgba(216, 176, 106, .05);
}

.allah-introduction-image picture,
.allah-introduction-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.allah-introduction-image img {
    object-fit: cover;
    object-position: var(--image-focus, center);
    transition: transform 12s ease;
}

.allah-introduction-image:hover img {
    transform: scale(1.03);
}


/* --- 8 · Emner ------------------------------------------------------------ */

.allah-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.5rem);
}

.allah-topic {
    overflow: hidden;
    border: 1px solid var(--allah-line);
    border-radius: 16px;
    background: var(--allah-panel);
    box-shadow: 0 22px 55px rgba(1, 9, 7, .28);
    transition: background-color .35s ease, border-color .35s ease;
}

.allah-topic summary {
    list-style: none;
    cursor: pointer;
}

.allah-topic summary::-webkit-details-marker {
    display: none;
}

.allah-topic summary:focus-visible {
    outline: 2px solid var(--allah-gold);
    outline-offset: -4px;
}

.allah-topic-body {
    padding: clamp(1.5rem, 2.6vw, 2.3rem);
}

.allah-topic h3 {
    margin: .9rem 0 .7rem;
    color: #fff;
    font-size: clamp(1.6rem, 2.4vw, 2.3rem);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.allah-topic-excerpt {
    max-width: 46ch;
    margin: 0;
    color: #bcc9c2;
    font-size: 1.02rem;
    line-height: 1.6;
}

.allah-topic-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--allah-hairline);
    color: var(--allah-gold);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.allah-topic-action i {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--allah-line);
    border-radius: 50%;
    font: normal 1.15rem/1 var(--sans);
    transition: transform .35s ease, background-color .35s ease, color .35s ease;
}

.allah-topic[open] {
    grid-column: 1 / -1;
    border-color: rgba(240, 201, 125, .42);
    background: var(--allah-raised);
}

.allah-topic[open] .allah-topic-action i {
    background: var(--allah-gold);
    color: #07130e;
    transform: rotate(45deg);
}

.allah-topic-copy {
    max-width: 76ch;
    padding: 0 clamp(1.5rem, 2.6vw, 2.3rem) clamp(1.8rem, 2.6vw, 2.3rem);
    color: #c3d0c9;
}


/* --- 9 · Fordybelse -------------------------------------------------------- */

.allah-lesson-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.6rem);
}

/* Kortet læses ovenfra og ned: nummer, emne, titel, uddrag, vej ind.

   De fem dele står i fem rækker, og uddragets række er den eneste, der vokser.
   Så bliver de tre kort lige høje, og linjen med «Læs lektionen» ligger i
   bunden af dem alle — uanset om titlen fylder én linje eller to.

   De tre kort er lige høje af sig selv: et gitter strækker sine felter til
   rækkens højde, og rækken er så høj som det længste kort. Derfor staar
   der ingen fast højde her.

   Ruden er den samme som i kapitlerne ovenfor. Se «allah-glass». */
.allah-lesson-card {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: .5rem;
    padding: clamp(1.5rem, 2.2vw, 2.1rem);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.allah-lesson-card small {
    margin-top: .4rem;
    color: var(--allah-gold);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.allah-lesson-card h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: .1rem 0 .3rem;
    color: #fff;
    font-size: clamp(1.25rem, 1.5vw, 1.6rem);
    line-height: 1.15;
    letter-spacing: -.03em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Fire linjer af uddraget. Browseren sætter selv prikkerne, når teksten er
   længere — derfor klippes der ikke også på tegn i skabelonen.

   Beholderen er det, der ligger i gitteret; afsnittet ligger i den. Et gitter
   gør sine børn til blokke, og «-webkit-box» er ikke en blok — lå afsnittet
   direkte i kortet, ville de fire linjer blive til alle linjerne. */
.allah-lesson-teaser { display: block; min-width: 0; }

.allah-lesson-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #b3c1ba;
    font-size: .92rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.allah-lesson-card > b {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255, 235, 188, .16);
    color: var(--allah-gold);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.allah-lesson-card:hover,
.allah-lesson-card:focus-visible {
    border-color: rgba(255, 235, 188, .48);
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 42px 100px rgba(1, 8, 6, .46);
}

.allah-lesson-card > b span {
    display: inline-block;
    transition: transform .3s ease;
}

.allah-lesson-card:hover > b span { transform: translateX(4px); }


/* --- 10 · Tilbedelsen ----------------------------------------------------- */

/* Kapitlet står ansigt til ansigt med porten: motivet er symmetrisk, og derfor
   er teksten det også — midtstillet, ikke i en spalte til venstre som de
   øvrige kapitler.

   Billedet lå før i sit eget lag med sin egen dæmpning: «brightness(.64)» og
   et slør på 90-58-90 procent oveni. Tilsammen var porten næsten væk. Nu er
   det det samme lærred som i alle de andre kapitler, med den samme lysstyrke,
   og teksten står på glas i stedet for at hvile på en sort flade. */
/* Indledningen står midt i kapitlet, under overskriften og over versene.

   Overskriften og afslutningen står helt ude til venstre som i de øvrige
   kapitler. Indledningen og versene er midtstillet — de står over porten, og
   porten er symmetrisk. */
.allah-worship-opening {
    max-width: 62ch;
    margin: 0 auto clamp(2.4rem, 4vw, 3.6rem);
    text-align: center;
    color: var(--allah-soft);
    font-size: clamp(1.02rem, 1.25vw, 1.16rem);
    line-height: 1.78;
    text-shadow: 0 2px 22px rgba(1, 8, 5, .6);
}

.allah-worship-opening p { margin: 0 0 1rem; }
.allah-worship-opening p:last-child { margin-bottom: 0; }

/* Alle otte vers skal have den samme plads, så feltet ikke hopper, når man
   skifter. Det længste er 20:14 og 6:162–163. */
.allah-section--worship .allah-stations-display { min-height: clamp(17rem, 6vw + 13.5rem, 20rem); }

.allah-section--worship .allah-stations { gap: clamp(1.6rem, 3vw, 2.6rem); }

/* Ruden bag indholdet.

   «Før skabelsen», «Uafhængighed» og «Tilbedelsen» viser det samme: ét felt ad
   gangen på et fotografi, med en række faner under og en knap i hver side. De
   skal se ens ud, og derfor står ruden her og ikke inde i det ene kapitel.

   Den holder sig inden for knapperne: bredden er rækken minus to gange en knap
   plus en centimeters luft. Så er der altid plads til dem uden for, hvad enten
   skærmen er 800 eller 1.920 px bred.

   Fanerne står uden for ruden, på billedet. I «Tilbedelsen» er der otte af dem,
   og de fylder mere end ruden er bred; inde i den ville rækken knække i to.

   På en telefon flytter knapperne ned under fanerne, og så må ruden fylde det
   hele — se «Smalle skærme». */
.allah-stations-display.allah-glass {
    width: calc(100% - 2 * (var(--stations-step) + 1rem));
    padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1rem, 2vw, 2.2rem) clamp(1.6rem, 2.6vw, 2.4rem);
}

/* Otte faner mod de andre kapitlers tre-fire. De otte navne fylder 913 px, og
   med kapitlernes normale mellemrum på 2 rem ville rækken kræve 1.114 px og
   knække i to. Mellemrummet er derfor mindre her, og fanerne står på én
   række helt ned til omkring 1.100 px skærmbredde. */
.allah-section--worship .allah-stations-nav { gap: clamp(.45rem, 1.3vw, 1.35rem); }

.allah-section--worship .allah-stations-nav button { flex: 0 1 auto; min-width: 0; }
.allah-section--worship .allah-stations-nav button b { white-space: nowrap; }

/* Afslutningen står under feltet, på gulvet i billedet, i kapitlets fulde
   bredde. De 245 tegn fylder to linjer dér; i en spalte på 62 tegn fyldte de
   fire. */
.allah-worship-closing {
    max-width: none;
    margin: clamp(2rem, 3.5vw, 3rem) 0 0;
    color: var(--allah-soft);
    font-size: clamp(1.02rem, 1.25vw, 1.16rem);
    line-height: 1.78;
    text-shadow: 0 2px 22px rgba(1, 8, 5, .6);
}

.allah-worship-closing h3 {
    margin: 0 0 .8rem;
    color: var(--allah-gold);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.allah-worship-closing p { margin: 0; }

.allah-reading-link { display: inline-flex; gap: .7rem; margin-top: 2rem; color: var(--allah-gold); border-bottom: 1px solid transparent; }
.allah-reading-link:hover, .allah-reading-link:focus-visible { border-color: currentColor; }

/* --- 11 · Næste skridt ----------------------------------------------------- */

.allah-next-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem 2.5rem;
    align-items: center;
    margin-top: clamp(3rem, 6vw, 6rem);
    padding-top: 2rem;
    border-top: 1px solid var(--allah-line);
}

.allah-next-step > span {
    color: var(--allah-gold);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.allah-next-step h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 1.9vw, 2rem);
    line-height: 1.15;
    letter-spacing: -.03em;
}

.allah-next-step a {
    display: inline-flex;
    gap: 2.5rem;
    align-items: center;
    padding: .95rem 1.15rem;
    border: 1px solid var(--allah-line);
    border-radius: 8px;
    color: #fff;
    font-size: .78rem;
    font-weight: 750;
    white-space: nowrap;
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.allah-next-step a:hover,
.allah-next-step a:focus-visible {
    border-color: var(--allah-gold);
    background: rgba(216, 176, 106, .1);
    transform: translateY(-2px);
}

.allah-next-step a b {
    display: inline-block;
    color: var(--allah-gold);
    transition: transform .25s ease;
}

.allah-next-step a:hover b {
    transform: translateX(4px);
}


/* --- 12 · Smalle skærme ---------------------------------------------------- */

@media (max-width: 1100px) {
    .allah-chapter-rail { display: none; }
    .allah-introduction-layout { grid-template-columns: 1fr; }
    .allah-who-explorer { padding-top: clamp(9rem, 28vw, 17rem); }
    .allah-who-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .allah-who-tabs button:nth-child(2) { border-right: 0; }
    .allah-who-tabs button:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 235, 188, .2); }
    .allah-boundary-stage { padding-top: clamp(2rem, 6vw, 4rem); }
    .allah-topic-grid { grid-template-columns: 1fr; }
    .allah-topic[open] { grid-column: auto; }
    .allah-lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    /* På telefonen bruger sitet et stående billede, der står som et bånd i
       toppen frem for bag hele sidetoppen.

       Det stående motiv har stjernehimlen øverst og horisonten tre fjerdedele
       nede. Med udsnittet midt i billedet stod der kun mørk himmel, og
       sidetoppen så tom ud. Båndet er derfor gjort højere, og udsnittet er
       lagt dernede, hvor solen står op bag bjergene. */
    .destination-allah .destination-image {
        height: 560px;
        background-image: var(--allah-hero-image-mobile, var(--allah-hero-image));
        background-position: center 74%;
    }

    /* Fladen under billedet er sidetoppens egen. Uden en farve her stod den
       tom og lidt lysere end resten af siden. */
    /* Højden er sat ned fra 680 px. Sidetoppen bar før både navnet og de seks
       vers; nu bærer den navnet og indledningen, og de fylder 300 px mindre.
       Uden nedsættelsen stod der en tom mørk flade under teksten. */
    .destination-allah {
        min-height: 640px;
        background: linear-gradient(180deg, #111318 0%, #090b0e 62%);
    }

    /* Sløret lå så tungt, at billedet ikke kunne ses. Det slutter nu, hvor
       teksten begynder, i stedet for at dække hele fladen. */
    .destination-allah .destination-overlay {
        background: linear-gradient(0deg, #090b0e 30%, rgba(12, 14, 17, .84) 52%, rgba(12, 14, 17, .18) 92%, transparent 100%);
    }

    .destination-allah .destination-copy h1 {
        max-width: 12ch;
        font-size: clamp(2.7rem, 11vw, 3.6rem);
    }

    .allah-boundary-slider .quran-verse-stage { min-height: 320px; }
    .allah-boundary-slider .quran-slider-dots { display: none; }

    /* På telefonen står billedet som et bånd i toppen og ikke bag hele
       sidetoppen. Teksten lægges derfor i bunden af båndet i stedet for midt i
       sidetoppen — ellers ville de sidste linjer stå på den flade farve under
       fotografiet. */
    .destination-allah .destination-inner {
        width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
        align-self: end;
        margin-block: auto 0;
    }

    .allah-boundary-slider .quran-verse-slide blockquote {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding-inline: .75rem;
        overflow-wrap: anywhere;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .allah-section-head-copy,


    .allah-section { padding-block: clamp(3.5rem, 12vw, 5rem); scroll-margin-top: 5rem; }
    .allah-section--who { min-height: 840px; padding-block: 3.5rem; }
    .allah-who-explorer { padding-top: clamp(8rem, 44vw, 12rem); }
    .allah-who-tabs button { min-height: 78px; padding: .9rem; }
    .allah-who-panels article { grid-template-columns: 1fr; gap: 1.5rem; min-height: 280px; padding: 1.5rem; }
    /* Stablet er der ingen venstre og højre. Den arabiske form bliver øverst,
       som den var, og stregen mellem de to lægges over den i stedet for ved
       siden af. */
    .allah-who-mark { order: -1; padding: 0 0 1.2rem; border-left: 0; border-bottom: 1px solid rgba(216, 176, 106, .3); }
    .allah-who-mark { padding: 0 0 1.3rem; border-right: 0; border-bottom: 1px solid rgba(216, 176, 106, .3); }
    .allah-who-mark p { font-size: clamp(2.8rem, 14vw, 4.2rem); }
    .allah-section-head { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
    .allah-section-head-actions { justify-self: start; }
    .allah-section-head h2 { max-width: none; font-size: clamp(2rem, 8.5vw, 2.9rem); }
    .allah-section-intro { max-width: none; }


    .allah-boundary-stage { padding-top: clamp(1.5rem, 8vw, 3rem); }
    .allah-section--before,
    .allah-section--independence,
    .allah-section--lessons,
    .allah-section--worship { min-height: auto; }
    .allah-stations-arabic { font-size: clamp(3rem, 17vw, 4.6rem); }
    .allah-stations-nav { gap: .1rem; }

    /* Der er ingen plads ved siden af feltet på en telefon. Knapperne stiller
       sig i stedet under fanerne, én i hver side. */
    .allah-stations { padding-bottom: 4.6rem; }
    .allah-stations-step { top: auto; bottom: 0; }
    .allah-stations-display.allah-glass { width: 100%; }

    /* Otte faner kan ikke stå på én række på en telefon. Her knækker de igen,
       og hver fane fylder sin egen linje som i de andre kapitler. */
    .allah-section--worship .allah-stations-nav { flex-wrap: wrap; gap: .1rem; }

    /* Billedet fylder kapitlet også her. På en telefon er kapitlet meget
       højere end bredt, og «cover» skærer derfor det meste af bredden bort —
       men motiverne er søjlegange og haller, hvor hvert fag er magen til det
       næste. */
    .allah-stations-nav button { flex: 1 1 100%; justify-content: center; padding-block: .6rem .8rem; }
    .allah-stations-copy { max-width: none; }
    /* Ét kort ad gangen under hinanden. */
    .allah-lesson-grid { grid-template-columns: 1fr; }

    .allah-introduction-statements > div { grid-template-columns: 2.2rem minmax(0, 1fr); }
    .allah-introduction-statements p { grid-column: 2; }
    .allah-introduction-image { aspect-ratio: 4 / 3.4; }

    .allah-next-step { grid-template-columns: 1fr; }
    .allah-next-step a { justify-content: space-between; }
}


/* --- 13 · Uden bevægelse --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .allah-stations-display article,
    .allah-section--who::after,
    .allah-who-backdrop img,
    .allah-section-canvas img,
    .allah-section-atmosphere img,
    .allah-introduction-image img,
    .allah-lesson-card,
    .allah-next-step a,
    .allah-next-step a b {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .allah-section.is-visible .allah-stations-display article { animation: none !important; }

    .allah-stations-step { transition: none; }
    .allah-stations-step:hover,
    .allah-stations-step:focus-visible,
    .allah-stations-step:active { transform: none; }
}