:root {
    /* Traeets billede maalt i pixels. Alt andet - kassens forhold, heroens
       hojde, scenens bredde - regnes ud fra disse to tal, saa et nyt billede
       kun kraever, at de rettes her. */
    --tree-w: 1916;
    --tree-h: 821;
}

/* --- En skrift til de latinske bogstaver -----------------------------------

   Profetsiderne satte overskrifter og saetninger med Georgia og alt andet med
   sidens egen skrift. To skrifter til det samme alfabet. Nu staar alt latinsk
   med sidens egen skrift.

   Det arabiske roerer reglen ikke. Det er en anden skrift til et andet
   alfabet, ikke en pyntskrift.

   Reglen gaelder kun indholdet. Sidehovedet og bundteksten staar udenfor: de
   er ens paa alle sider, og de ville se forkerte ud, hvis de kun blev lavet om
   her.
--------------------------------------------------------------------------- */

body[data-page^="prophets"] main :is(h1, h2, h3) {
    font-family: var(--sans);
    letter-spacing: -.015em;
}

.prophets-hero {
    min-height: var(--hero-height);
    display: grid;
    align-items: end;
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(3, 16, 13, .72), rgba(3, 16, 13, .54) 52%, rgba(3, 16, 13, .14)),
        url("/images/prophets-tree-v1.png") 64% 52% / cover;
}

.prophets-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(3, 15, 12, .78), transparent 48%);
    pointer-events: none;
}

.prophets-hero-copy {
    position: relative;
    z-index: 1;
    padding-block: 6rem 4.5rem;
}

/* Disse tre regler hoerer til den gamle sidetop: en overskrift, et afsnit og
   en knap oven paa et baggrundsbillede. Den opbygning findes ikke mere -
   .prophets-hero-copy staar ikke i nogen skabelon.

   De var skrevet som h1, p og a inde i .prophets-hero. Da traeet flyttede ind
   i sidetoppen, begyndte de derfor at ramme alt, hvad der kom med:

     · p ramte overskriften "Om profeterne", boennen og de 18 saetninger, og
       gav dem alle max-width: 58ch. Det er 456 px. Raekkerne kunne derfor ikke
       fylde stribens bredde, og hverken centrering eller hojrestilling havde
       nogen plads at arbejde i - der var ingen plads tilovers at fordele.
     · a ramte "Laes mere"-linket i profilresumeet og gav det guld baggrund.
       Teksten er ogsaa guld, saa linket stod usynligt.

   De er nu bundet til .prophets-hero-copy, den kasse de blev skrevet til. Saa
   virker de, hvis den opbygning kommer igen, og de kan ikke laengere sive ud
   over resten af sidetoppen. */
.prophets-hero-copy h1 {
    max-width: none;
    margin: .75rem 0 1.2rem;
    color: #fff;
    font-size: clamp(1.55rem, 7.1vw, 5.3rem);
    line-height: .9;
    white-space: nowrap;
}

.prophets-hero-copy p {
    max-width: 58ch;
    color: #dce5e0;
    font-size: 1.08rem;
}

.prophets-hero-copy a {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: .8rem 1rem;
    color: #102019;
    background: #dfb567;
    font-weight: 800;
}

.prophet-tree-section,
.prophet-timeline-section {
    padding-block: clamp(4rem, 8vw, 7rem);
    background: #06110e;
    color: #eef2ef;
}

.prophet-section-heading {
    margin-bottom: 2.4rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
}

.prophet-section-heading h2 {
    margin: .4rem 0 0;
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
}

.prophet-section-heading > p {
    max-width: 48ch;
    margin: 0;
    color: #aebbb5;
}

.prophet-tree-viewport {
    width: 100%;
    overflow: auto hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.prophet-tree-viewport::-webkit-scrollbar {
    display: none;
}

.prophet-tree {
    width: max(100%, 1280px);
    aspect-ratio: var(--tree-w) / var(--tree-h);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #071019;
}

.prophet-tree > img,
.prophet-tree-shade,
.prophet-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.prophet-tree > img {
    object-fit: cover;
}

.prophet-tree-shade {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(3, 12, 16, .3), transparent 20% 80%, rgba(3, 12, 16, .3)),
        linear-gradient(0deg, rgba(3, 12, 16, .24), transparent 24%);
}

.prophet-connections {
    z-index: 2;
    pointer-events: none;
}

.prophet-connections line {
    stroke: rgba(246, 205, 124, .78);
    stroke-width: .13;
    vector-effect: non-scaling-stroke;
}

.prophet-connections .relation-descendant {
    stroke-dasharray: .35 .6;
}

.prophet-connections .relation-narrative {
    stroke: rgba(142, 190, 166, .8);
    stroke-dasharray: 1 .55;
}

.prophet-connections .relation-sibling {
    stroke: rgba(255, 225, 155, .9);
}

.prophet-node {
    --node-gold: #f1c671;
    width: 112px;
    min-height: 48px;
    position: absolute;
    z-index: 3;
    left: var(--tree-x);
    top: var(--tree-y);
    transform: translate(-50%, -50%);
    display: grid;
    place-content: center;
    gap: 1px;
    padding: .35rem .55rem;
    color: #f8f2e5;
    border: 1px solid rgba(231, 185, 99, .25);
    border-radius: 5px;
    background: rgba(3, 18, 21, .8);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
    backdrop-filter: blur(7px);
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

/* Kun det arabiske navn får den arabiske skrift.

   Reglen ramte før begge felter i knappen — også det latinske navn, så
   «Adam» og de treogtyve andre stod med en arabisk skrift. */
.prophet-node .prophet-node-arabic {
    color: var(--node-gold);
    font: 400 1.2rem/1.05 var(--arabic);
}

.prophet-node .prophet-node-name {
    font-family: var(--sans);
}

.prophet-node strong {
    font-size: .68rem;
    letter-spacing: .045em;
}

.prophet-node:hover,
.prophet-node:focus-visible {
    z-index: 5;
    transform: translate(-50%, -50%) translateY(-4px) scale(1.06);
    border-color: var(--node-gold);
    background: rgba(7, 36, 28, .95);
    box-shadow: 0 0 28px rgba(225, 178, 91, .24);
}

.prophet-node.is-root,
.prophet-node.is-branch {
    width: 132px;
    border-color: rgba(239, 194, 109, .58);
}

.prophet-node.is-final {
    width: 154px;
    min-height: 58px;
    --node-gold: #ffe1a0;
    border-color: #eac274;
    background: rgba(89, 56, 14, .88);
    box-shadow: 0 0 34px rgba(236, 187, 91, .3);
}

.prophet-node.is-final span {
    font-size: 1.45rem;
}

/* Baandet ligger mellem heroen og traeet og skal haenge fast paa heroen.
   Faellesreglen ovenfor giver sektionen op til 112 px luft foroven og
   forneden; her fjernes den helt, saa baandet begynder praecis hvor heroen
   slutter. Luften ned til traeet kommer fra traesektionens egen top.

   Stregen og den lysere bund er ogsaa vaek: de tegnede en kant, hvor der
   ikke skal vaere en. */
.prophet-timeline-section {
    overflow: hidden;
    padding-block: 0;
    background: #06110e;
}

/* --- Heroen: baggrund, trae og tekstboks i en flade ------------------------

   Traeet laa i sin egen sektion laengere nede, og heroen bar det samme billede
   som baggrund. To steder, samme billede. Nu ligger billedet sloret bagved, og
   traeet staar skarpt ovenpaa - en flade i stedet for to.
--------------------------------------------------------------------------- */

/* Traeet er heroen. Ingen luft omkring det, ingen spalter ved siden af -
   billedet med navnene fylder hele sidetoppen, og de to tekstbokse ligger
   ovenpaa. */
.prophets-hero--tree {
    /* Traeet holder forholdet 16:9, ellers glider navnene fra grenene bag
       dem. Derfor hoerer bredde og hojde sammen, og sidetoppen tager det
       mindste af to maal:

         - det, der er tilbage af skaermen, naar sidehovedet og baandet er
           trukket fra, saa tidslinjen kan ses uden at rulle
         - det, bredden tillader, saa traeet naar helt ud i siderne, naar der
           er hojde nok til det

       Er der hojde nok, vinder bredden, og traeet fylder skaermen. Er der
       ikke, bliver traeet mindre - baade i bredden og i hojden, for det er
       en og samme ting. */
    /* Et tal styrer traeets storrelse. 1 er saa stort, som skaermen tillader;
       .8 er fire femtedele af det. Bredde og hojde folges ad, saa forholdet
       16:9 holder og navnene bliver siddende paa deres pladser. */
    --tree-scale: 1.02;

    --hero-height: min(
        calc((100svh - 82px - 130px) * var(--tree-scale)),
        calc(100vw * var(--tree-h) / var(--tree-w) * var(--tree-scale))
    );

    align-items: center;
    padding: 0;
}

/* --- De tre lag i sidetoppen ----------------------------------------------

   Nederst: en flade i billedets egne farver - den dybe blaagronne nattehimmel
   med et svagt skaer omkring stammen og et gyldent glimt der, hvor lyset i
   kronen sidder. Den daekker hele sidetoppen, ogsaa naar traeet ikke naar ud
   i siderne, og den er skarp i enhver storrelse.

   I midten: billedet selv, zoomet og sloret til et blodt skaer. Sloringen er
   24 px. Ved 15 px kunne man tydeligt se et trae nummer to bag det rigtige;
   ved 42 px var laget en ensfarvet flade uden spor af motivet. 24 px ligger
   imellem: man aner kronen og stammen bag traeet, men ikke en enkelt gren.

   Overst: traeet skarpt, tonet ud i siderne, med navnene ovenpaa.

   Reglen staar med begge klasser, fordi hero-motion.css saetter en zoom paa
   .prophets-hero::before og hentes efter dette ark. Uden den ekstra klasse
   ville zoomen vinde.
--------------------------------------------------------------------------- */

.prophets-hero.prophets-hero--tree {
    background:
        radial-gradient(62% 46% at 38% 9%, rgba(214, 168, 88, .14), transparent 68%),
        radial-gradient(120% 88% at 50% 80%, rgba(19, 47, 51, .6), transparent 64%),
        #071319;
}

.prophets-hero.prophets-hero--tree::before {
    animation: none;

    /* Eget billede - laget kan ikke laengere arve heroens baggrund, for den er
       nu en flade uden billede. */
    background: url("/images/prophets-tree-v1.png") center / cover no-repeat;
    filter: blur(24px) saturate(.7) brightness(.8);
    transform: scale(1.55);
    opacity: .5;
}

/* Sloret nedefra er lettet. Med traeet ovenpaa laa Adam og Idris i moerket. */
.prophets-hero.prophets-hero--tree::after {
    opacity: .45;
}

/* Scenen er praecis traeets kasse. Bredden er den storste, der kan rummes i
   heroens hojde med forholdet 16:9 - saa fylder traeet sidetoppen helt uden
   at blive skaaret af. De to tekstbokse ligger ovenpaa og maales i procent af
   netop denne kasse, saa de folger med, naar den skifter storrelse. */
.prophet-hero-stage {
    position: relative;
    z-index: 2;
    width: min(100vw, calc(var(--hero-height) * var(--tree-w) / var(--tree-h)));
    margin-inline: auto;

    /* De to tekstbokse maales i procent af scenen. Uden en beholder her ville
       cqw-vaerdierne falde tilbage paa vinduets bredde. */
    container-type: inline-size;
}

/* Traeet skal kunne ses helt, med alle navne. Med et fast forhold og loft paa
   baade bredde og hojde krymper kassen, til den er inde i heroen, uden at
   billedet bliver traukket skaevt. Navnene sidder i procent og folger med af
   sig selv. */
.prophets-hero--tree .prophet-tree {
    /* Navnene skal kunne staa uden for billedets tonede kanter. */
    overflow: visible;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: var(--tree-w) / var(--tree-h);
    background: transparent;
    border: 0;

    /* Navnene maales mod traeets bredde, ikke mod skaermen, saa de krymper med
       traeet i stedet for at flyde ud over det. */
    container-type: inline-size;
}

/* Traeet kan ikke goeres bredere uden ogsaa at blive hojere: kronen hoerer
   til Muhammad og roedderne til Adam, saa billedet kan hverken beskaeres
   foroven eller forneden, og strakt ville traeet se trykket ud.

   I stedet tones billedet ud i siderne og gaar over i den slorede baggrund.
   Saa staar der ingen kant midt paa skaermen, og fladen laeses som et billede
   fra kant til kant.

   Kun billedet tones. Navnene og linjerne bliver skarpe hele vejen ud - laa
   masken paa hele traeet, ville Yunus og Isa i yderkanterne blegne. */
.prophets-hero--tree .prophet-tree > img {
    mask-image: linear-gradient(90deg,
        transparent 0,
        #000 9%,
        #000 91%,
        transparent 100%);
}

/* Skyggelaget skal tones med, ellers ville dets egen kant staa tilbage. */
.prophets-hero--tree .prophet-tree-shade {
    mask-image: linear-gradient(90deg,
        transparent 0,
        #000 9%,
        #000 91%,
        transparent 100%);
}

/* Skiltene var 112 px brede. Det er bredere, end navnene har brug for:
   det bredeste arabiske navn - ذو الكفل - fylder knap 88 px, og det bredeste
   latinske under det fylder 51 px. Nu er de 96 px, saa der staar mere trae
   mellem dem.

   min-width: max-content er sikkerhedsnettet. Bliver et navn alligevel for
   bredt til de 96 px, vokser netop det skilt lige saa meget, som teksten
   kraever, i stedet for at brakke navnet over to linjer. */
/* Navnene er malet ind i billedet. Knappen er derfor et usynligt felt oven
   paa det malede navn - ingen flade, ingen streg, ingen tekst. Bredde og
   hojde kommer fra databasen, i procent af billedet, saa feltet daekker netop
   det navn, det hoerer til: Muhammads skilt er dobbelt saa bredt som Luts.

   Helt usynligt maa det dog ikke vaere. Peger man paa det, eller tabber man
   frem til det, tegnes en tynd gylden ramme uden om - ellers kunne man ikke
   se, at der er noget at trykke paa. */
.prophets-hero--tree .prophet-node {
    width: var(--tree-node-w, 4.5%);
    height: var(--tree-node-h, 9%);
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition: border-color .18s ease, background-color .18s ease;
}

.prophets-hero--tree .prophet-node:hover,
.prophets-hero--tree .prophet-node:focus-visible {
    transform: translate(-50%, -50%);
    border-color: rgba(241, 198, 113, .85);
    background: rgba(241, 198, 113, .1);
    box-shadow: 0 0 18px rgba(241, 198, 113, .22);
}

/* Det valgte navn skal kunne ses, mens man laeser om det i tekstboksen.
   Rammen bliver staaende, saa man kan se, hvor i traeet man er. */
.prophets-hero--tree .prophet-node.is-chosen {
    border-color: rgba(241, 198, 113, .95);
    background: rgba(241, 198, 113, .14);
    box-shadow: 0 0 0 1px rgba(241, 198, 113, .35), 0 0 26px rgba(241, 198, 113, .25);
}

/* --- Tekstboksen ----------------------------------------------------------

   Den staar i overste hojre hjorne. Traeet har ingen navne over y=23 til
   hojre, saa der er plads - og fordi den ligger i sin egen spalte, kan den
   ikke komme til at daekke et navn.
--------------------------------------------------------------------------- */

.prophet-panel {
    position: absolute;
    z-index: 5;

    /* Fra kant til kant. Traeet kan vaere smallere end vinduet, og halvdelen
       af den forskel er netop det, der ellers ville mangle i hver side. */
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);

    /* Hvor langt nede i sidetoppen striben ligger, maalt til dens midte.
       50 % er midt i; 80 % er 30 procentpoint laengere nede, nede over
       roedderne. Ét tal at skrue paa.

       translateY trakker den halve hojde op, saa tallet er stribens midte og
       ikke dens overkant. */
    --panel-y: 80%;

    top: var(--panel-y);
    transform: translateY(-50%);
    width: auto;

    /* Striben ligger hen over kronen. Fem navne er under den: Ibrahim, Yaqub,
       Ayyub, Dhul-Kifl og Shuayb. Derfor to ting:

       Fladen er hel i venstre side, hvor teksten staar, og toner ud til
       ingenting inden hojre side, saa de malede navne stadig kan ses.

       Og musen gaar igennem striben: pointer-events: none paa selve kassen,
       auto paa det, der skal kunne trykkes paa. Ellers kunne man ikke ramme
       de navne, der ligger under. */
    pointer-events: none;

    max-height: 40%;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;

    /* justify-items: center stod her foer. Det gav hvert barn bredden af sit
       eget indhold, og saa kunne hverken overskriften eller boennen rykke sig:
       der var ingen fri plads i raekken at rykke sig i. Boernene faar nu hele
       stribens bredde, og de tre raekker placerer sig hver for sig -
       overskriften i midten, saetningen i midten, boennen i hojre kant. */
    /* "safe" er det vigtige ord.

       Med align-content: center alene bliver indhold, der er hojere end
       kassen, skubbet lige langt ud til begge sider - ogsaa opad, ud over
       kassens overkant, hvor man ikke kan rulle hen. Naar man valgte et navn,
       forsvandt profilens nummer, arabiske navn, navn og resumé praecis dér,
       og kun relationerne blev tilbage.

       safe center centrerer, saa laenge der er plads, og falder tilbage til at
       begynde foroven, naar der ikke er. Saa kan man altid komme til
       begyndelsen. */
    align-content: safe center;
    gap: .5rem;

    padding: .9rem 4cqw 1rem;
    color: #eef2ef;
    text-align: center;

    /* Ingen streg. Den ville tegne en kant dér, hvor fladen skal loebe ud.
       Blur er droppet af samme grund: den kan ikke tones med og ville staa
       skarpt afskaaret i en lodret linje midt i fadet. */
    border: 0;

    /* Tre lag oven paa hinanden.

       Nederst: fladen. Hel om midten og tonet ud til begge sider - helt vaek
       ved venstre og hojre kant. Kernen fra 34 % til 66 % holder de fleste
       saetninger; kun de to laengste naar ud i skuldrene, hvor fladen er
       tyndere, og det er meningen: striben skal slutte i ingenting, ikke i en
       kant.

       Overst og nederst: en gylden streg paa én pixel, der toner ud efter
       netop de samme trin som fladen. De to streger lukker striben foroven og
       forneden uden at tegne en kasse - i siderne er der ingenting at lukke.

       Stregerne er baggrundslag og ikke ::before og ::after. Kassen kan rulle,
       naar et navn er valgt og resumeet er langt, og et lag, der er sat fast
       med position, ville rulle med indholdet. Et baggrundslag bliver
       liggende paa kanten. */
    background:
        linear-gradient(90deg,
            rgba(231, 189, 112, 0) 0,
            rgba(231, 189, 112, .3) 16%,
            rgba(231, 189, 112, .72) 34%,
            rgba(231, 189, 112, .72) 66%,
            rgba(231, 189, 112, .3) 84%,
            rgba(231, 189, 112, 0) 100%) top / 100% 1px no-repeat,
        linear-gradient(90deg,
            rgba(231, 189, 112, 0) 0,
            rgba(231, 189, 112, .3) 16%,
            rgba(231, 189, 112, .72) 34%,
            rgba(231, 189, 112, .72) 66%,
            rgba(231, 189, 112, .3) 84%,
            rgba(231, 189, 112, 0) 100%) bottom / 100% 1px no-repeat,
        linear-gradient(90deg,
            rgba(6, 20, 16, 0) 0,
            rgba(6, 20, 16, .55) 16%,
            rgba(6, 20, 16, .88) 34%,
            rgba(6, 20, 16, .88) 66%,
            rgba(6, 20, 16, .55) 84%,
            rgba(6, 20, 16, 0) 100%);
}

/* Det, der skal kunne trykkes paa og rulles, tager musen tilbage. Resten -
   fladen og teksten - lader den gaa videre ned til navnene i billedet. */
.prophet-panel a,
.prophet-panel button,
.prophet-panel .prophet-panel-body {
    pointer-events: auto;
}



.prophet-panel .eyebrow {
    color: #dfb567;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.prophet-panel h2 {
    margin: .15rem 0 0;
    font: 400 clamp(1.05rem, 1.35cqw, 1.3rem)/1.08 var(--sans);
    color: #fff;
}

.prophet-panel p {
    margin: 0;
    font-size: .76rem;
    line-height: 1.5;
    color: #cfdad4;
}

/* Knappen laa sidst i kassen, og kassen er det, der rulles. Med en profil,
   der er hojere end striben, var den derfor altid under kanten: der var ingen
   synlig vej tilbage til saetningerne - kun Escape, som ingen kan gaette.

   sticky holder den paa stribens nederste kant, mens resten ruller forbi. */
.prophet-panel-clear {
    position: sticky;
    bottom: 0;
    z-index: 2;
    justify-self: center;
    margin-top: .35rem;
    padding: .45rem .9rem;
    color: #dfb567;
    border: 1px solid rgba(229, 186, 106, .55);

    /* Hel flade og en ring af samme farve omkring. Knappen ligger oven paa
       den tekst, der ruller forbi under den; uden fladen ville de to
       bogstavrækker staa i hinanden. */
    background: rgba(6, 20, 16, .96);
    box-shadow: 0 0 0 7px rgba(6, 20, 16, .96);
    font: 700 .72rem var(--sans);
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.prophet-panel-clear:hover,
.prophet-panel-clear:focus-visible {
    border-color: rgba(229, 186, 106, .8);
    background: rgba(229, 186, 106, .12);
}

/* Resumeet er skrevet til vinduet. I tekstboksen skal det vaere mindre. */
/* --- Naar et navn er valgt ------------------------------------------------

   Striben har to job, og de to ligner ikke hinanden.

   Med saetningerne er den en overskrift: én linje, stor skrift, hele bredden,
   centreret. Det virker, fordi der kun er én linje at foelge.

   Med en profil er den en tekst: nummer, arabisk navn, navn, resumé,
   relationer med kilde og et link. En tekstblok kan ikke laeses over 1571 px
   - oejet mister linjen paa vej tilbage til begyndelsen. Derfor faar profilen
   sin egen spalte paa 62 anslag, venstrestillet, midt i striben.

   Og fladen bag den bliver hel. Fadet ud til begge kanter er rigtigt for én
   linje, der maa toner ud; en tekstblok oven paa grene og blade kan ikke
   laeses. Naar der staar en profil, daekker fladen derfor helt, dér hvor
   teksten er.
--------------------------------------------------------------------------- */

.prophet-panel:has(.prophet-summary-content) {
    padding-block: 1.3rem 1.4rem;
    background:
        linear-gradient(90deg,
            rgba(231, 189, 112, 0) 0,
            rgba(231, 189, 112, .3) 16%,
            rgba(231, 189, 112, .72) 34%,
            rgba(231, 189, 112, .72) 66%,
            rgba(231, 189, 112, .3) 84%,
            rgba(231, 189, 112, 0) 100%) top / 100% 1px no-repeat,
        linear-gradient(90deg,
            rgba(231, 189, 112, 0) 0,
            rgba(231, 189, 112, .3) 16%,
            rgba(231, 189, 112, .72) 34%,
            rgba(231, 189, 112, .72) 66%,
            rgba(231, 189, 112, .3) 84%,
            rgba(231, 189, 112, 0) 100%) bottom / 100% 1px no-repeat,
        linear-gradient(90deg,
            rgba(6, 20, 16, 0) 0,
            rgba(6, 20, 16, .82) 14%,
            rgba(6, 20, 16, .95) 30%,
            rgba(6, 20, 16, .95) 70%,
            rgba(6, 20, 16, .82) 86%,
            rgba(6, 20, 16, 0) 100%);
}

.prophet-panel .prophet-summary-content {
    display: grid;
    gap: .4rem;
    width: min(100%, 86ch);
    margin-inline: auto;
    padding: 0;
    text-align: left;
}

.prophet-panel .prophet-summary-order {
    color: #b9c6bf;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.prophet-panel .prophet-summary-arabic {
    margin: 0;
    color: #dfb567;
    font: 400 1.2rem/1.2 var(--arabic);
}

.prophet-panel .prophet-summary-content h2 {
    margin: 0 0 .15rem;
    font: 500 1.4rem/1.15 var(--sans);
    letter-spacing: -.015em;
    color: #fff;
}

/* Resuméet var 0,76 rem - sat til en spalte paa 300 px i et hjorne. I en bred
   spalte er det broedtekst og skal kunne laeses som saadan.

   Pilen ">" er ikke pynt. Uden den ramte reglen ogsaa det arabiske navn - det
   er ogsaa et <p> - og tog dets guld. Farvereglen for navnet har to klasser i
   sig og taber til to klasser plus et element. Nu gaelder reglen kun det
   afsnit, der ligger direkte i profilen, og det arabiske navn ligger inde i
   navnerakken. */
.prophet-panel .prophet-summary-content > p {
    font-size: .88rem;
    line-height: 1.55;
    color: #d7e0db;
}

.prophet-panel .prophet-summary-relations {
    display: grid;
    gap: .35rem;
    margin-top: .25rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(229, 186, 106, .22);
    font-size: .78rem;
}

/* Relationerne staar ved siden af hinanden i én raekke i stedet for under
   hinanden. Med en spalte paa 86 anslag er der plads til tre, og profilen
   bliver lavere, saa den kan staa i striben uden at skulle rulles.

   auto-fit og minmax betyder, at der kommer saa mange spalter, som der er
   plads til: tre paa en bred skaerm, to paa en smallere, én paa en telefon.
   Ingen relation bliver klemt under 190 px. */
.prophet-panel .prophet-summary-relations {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .5rem 1.4rem;
}

/* Overskriften staar for sig over dem alle. */
.prophet-panel .prophet-summary-relations strong {
    grid-column: 1 / -1;
}

/* Hver relation er to linjer: hvad den er og hvem den peger paa, og under det
   kilden. De stod foer paa én linje, der blev traukket fra hinanden over hele
   skaermen, saa "Far og son" stod i venstre kant og kilden i hojre. */
.prophet-panel .prophet-summary-relations > span {
    display: block;
}

.prophet-panel .prophet-summary-relations strong {
    color: #dfb567;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.prophet-panel .prophet-summary-relations span {
    color: #cfdad4;
}

/* Kilden stod i #94a49c. Maalt mod fladen bag den - lysstyrke 0,08 - er
   forholdet 3,1:1, og kravet til smaa bogstaver er 4,5:1. #b9c6bf giver
   4,6:1. Kildehenvisningen er det, der goer profilen troverdig; den skal
   kunne laeses. */
.prophet-panel .prophet-summary-relations small {
    display: block;
    color: #b9c6bf;
    font-size: .7rem;
}

.prophet-panel .prophet-summary-content > a {
    justify-self: start;
    margin-top: .3rem;
    display: inline-flex;
    gap: .6rem;
    color: #dfb567;
    font: 700 .78rem var(--sans);
}

/* Under 1000 px er der ikke to spalter. Traeet holder en mindstebredde, saa
   navnene stadig kan laeses, og scenen kan trakkes vandret. */
@media (max-width: 1000px) {
    .prophets-hero--tree {
        align-items: end;
    }

    .prophet-hero-stage {
        width: 100%;
        display: grid;
        gap: 1.2rem;
        padding: 1.2rem 1rem 2rem;
    }

    /* Under 1000 px er der ikke plads til at laegge noget oven paa traeet -
       kassen ville daekke det meste. Den staar under traeet i stedet. */
    .prophet-panel {
        position: static;
        width: auto;
        max-height: none;
        overflow: visible;
    }

    /* Under traeet er der ingen kant at loebe ud i og ingen navne at holde
       sig fra. Fadet og det brede hojre indryk hoerer kun til, naar kassen
       ligger oven paa traeet. */
    .prophet-panel {
        padding: 1rem;
        background: rgba(6, 20, 16, .82);
    }

    /* Under traeet er der hele skaermens bredde. Saetningerne kan vaere
       stoerre der, end de kan i en kasse paa 480 px. */
    .prophet-panel .prophet-line {
        font-size: clamp(1.3rem, 4.5vw, 1.9rem);
    }

    .prophets-hero--tree .prophet-tree {
        width: 100%;
        min-width: 620px;
        height: auto;
        max-height: none;
    }

    .prophet-hero-stage > .prophet-tree {
        overflow: visible;
    }

    .prophet-panel {
        max-height: none;
        overflow: visible;
    }
}
/* --- Saetningerne i tekstboksen -------------------------------------------

   Saetningerne stod foer i deres egen kasse i heroens overste hojre hjorne.
   To kasser oven paa det samme trae var én for meget. Nu staar de i
   tekstboksen nederst til venstre - den samme kasse, som et valgt navn
   fylder. Saetningerne er det, kassen viser, naar intet navn er valgt.

   De var sat til at fylde en hero alene: op til 3,15 rem serif over 26
   anslag. I en kasse paa 480 px skal de vaere mindre, ellers braekker de i
   stumper paa to og tre ord.
--------------------------------------------------------------------------- */

/* Uden denne staar sektionen med min(100%, 1040px) fra prophet-lines.css og
   kan ikke fylde striben ud. */
.prophet-panel .prophet-lines {
    width: 100%;
    max-width: none;
    color: inherit;
}

.prophet-panel .prophet-lines-stage {
    justify-items: center;
}

/* "Om profeterne" stod med sidens gule farve, --gold. Siden koerer i moerk
   tilstand, hvor den er #d4ae68 - en daempet gul, valgt til at kunne staa
   sammen med broedtekst. Her staar den lysere #dfb567 i stedet, den samme som
   resten af kassens overskrifter. */
.prophet-panel .prophet-lines-eyebrow {
    /* Overskriften staar i venstre side og boennen i hojre - striben faar en
       ende i hver side. Det negative venstremargen ophaever stribens luft paa
       4 cqw, saa stregen begynder praecis ved skaermens kant, ligesom boennens
       streg slutter ved den modsatte. */
    justify-content: flex-start;
    text-align: left;
    margin-bottom: .6rem;
    margin-left: -4cqw;
    gap: .8rem;
    color: #dfb567;
    font-size: .72rem;
    letter-spacing: .16em;
}

/* Stregen staar foer ordet, ikke efter. Den, der staar i prophet-lines.css,
   ligger som ::after; den slaas fra her, og en ::before saettes i stedet.
   Udtoningen er vendt med om, saa stregen kommer frem ud af ingenting og er
   hel, dér hvor ordet begynder. */
.prophet-panel .prophet-lines-eyebrow::after {
    content: none;
}

.prophet-panel .prophet-lines-eyebrow::before {
    content: "";
    flex: 1;
    max-width: 220px;
    height: 1px;
    background: linear-gradient(90deg, rgba(231, 189, 112, 0), #e7bd70);
}

/* Saetningerne skal fylde kassens bredde ud og selv bryde, naar linjen er
   fuld.

   To ting stod i vejen. Loftet paa 38 anslag skar linjen af, foer den naaede
   kassens hojre kant. Og text-wrap: balance - som staar i prophet-lines.css -
   bad browseren om at gore alle linjerne lige lange; en saetning paa tre
   linjer blev delt i tre korte i stedet for to fulde og en rest. Begge dele er
   slaaet fra her.

   Striben har nu hele bredden, og skriften er sat op til 1,8 rem. Der er
   maalt paa alle 18: den laengste - "Profeterne blev sendt for at laere
   menneskene det, der gavner dem i deres religioese og verdslige liv." -
   fylder 1247 px ved den stoerrelse, og der er 1500 px at give af. Alle 18
   staar paa én linje. */
.prophet-panel .prophet-line {
    max-width: none;
    text-wrap: wrap;
    font-size: clamp(1rem, 1.7cqw, 1.8rem);
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #fff;
}

/* Afslutningen én linje under saetningen: boennen for profeterne, og efter
   den den samme guldstreg, der loeber ud fra "Om profeterne" foroven.

   Skrift og farve er overskriftens - #dfb567 i sidens egen skrift, samme
   stoerrelse og samme spaerring. Kun versalerne er ikke med: "Om profeterne"
   er en overskrift, det her er en saetning med punktum.

   Boennen staar fast. Den skifter ikke med de 18 saetninger over den. */
.prophet-panel .prophet-lines-blessing {
    display: flex;
    align-items: center;

    /* Boennen staar i hojre side, ikke midt under saetningen, og helt ude ved
       skaermens kant. Striben har 4 cqw luft i hver side; det negative
       hojremargen ophaever netop den luft, saa stregen efter teksten ender
       praecis dér, hvor striben slutter. */
    justify-content: flex-end;
    text-align: right;
    gap: .8rem;
    margin: 1rem -4cqw 0 0;
    color: #dfb567;

    /* Samme skrift, farve og versaler som "OM PROFETERNE" foroven. */
    font: 750 .72rem/1.4 var(--sans);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.prophet-panel .prophet-lines-blessing::after {
    content: "";
    flex: 1;
    max-width: 220px;
    height: 1px;
    background: linear-gradient(90deg, #e7bd70, rgba(231, 189, 112, 0));
}

.prophet-panel .prophet-lines-foot {
    margin-top: .55rem;
}


/* --- Tidslinjen som et roligt baand ----------------------------------------

   Tidslinjen laa nederst paa siden bag en overskrift og skulle rulles i haanden.
   Nu ligger den under traeet og koerer af sig selv fra Adam til Muhammad og
   forfra igen.
--------------------------------------------------------------------------- */

.prophet-marquee {
    position: relative;
    overflow: hidden;
    padding-block: .8rem 1.1rem;

    /* Gulv, saa baandet holder sin form. Under det ville stregen og prikkerne
       ligge oven i navnene. */
    min-height: 92px;

    /* 3,6 sekunder pr. profet. Med 25 profeter tager en omgang 90 sekunder -
       langsomt nok til at naa at laese hvert navn. */
    --marquee-seconds: calc(var(--prophet-count, 25) * 3.6s);

    /* Kanterne toner ud, saa navnene ikke bliver klippet midt over. */
    mask-image: linear-gradient(90deg, transparent 0, #000 6rem, #000 calc(100% - 6rem), transparent 100%);
}

.prophet-marquee-track {
    display: flex;
    width: max-content;
    animation: prophet-marquee var(--marquee-seconds) linear infinite;
}

/* Baandet rummer raekken to gange og flytter sig praecis den halve bredde.
   Derfor staar kopien, hvor originalen begyndte, naar omgangen er slut, og
   springet tilbage kan ikke ses. */
@keyframes prophet-marquee {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Baandet standser, naar man peger paa det eller tabber ind i det - ellers
   kunne man ikke ramme et navn. */
.prophet-marquee:hover .prophet-marquee-track,
.prophet-marquee:focus-within .prophet-marquee-track {
    animation-play-state: paused;
}

.prophet-timeline {
    width: max-content;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prophet-timeline li {
    width: 124px;
    position: relative;
    flex: 0 0 124px;
    padding-top: 17px;
}

.prophet-timeline li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(222, 181, 103, .35);
}

.prophet-timeline li::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c99d53;
    box-shadow: 0 0 0 3px #06110e;
}

.prophet-timeline button {
    display: grid;
    padding: 0;
    color: #eef2ef;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.prophet-timeline button i {
    color: #b99352;
    font: italic .55rem var(--sans);
}

.prophet-timeline button span {
    margin-top: .38rem;
    color: #dfb567;
    font: 400 1.12rem/1.05 var(--arabic);
    text-align: left;
}

.prophet-timeline button strong {
    margin-top: .1rem;
    font-size: .7rem;
}

.prophet-timeline button:hover strong,
.prophet-timeline button:focus-visible strong {
    color: #dfb567;
}

.prophet-timeline li.is-final {
    width: 152px;
    flex-basis: 152px;
}

.prophet-timeline li.is-final::after {
    width: 11px;
    height: 11px;
    top: 0;
    background: #f0c56a;
    box-shadow: 0 0 0 4px #06110e, 0 0 16px rgba(240, 197, 106, .55);
}

.prophet-summary-dialog {
    width: min(560px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    color: #eef2ef;
    border: 1px solid rgba(229, 186, 106, .45);
    background: #091a14;
    box-shadow: 0 30px 100px rgba(0,0,0,.65);
}

.prophet-summary-dialog::backdrop {
    background: rgba(1, 8, 6, .78);
    backdrop-filter: blur(8px);
}

.prophet-dialog-close {
    width: 42px;
    height: 42px;
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 1rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.04);
    cursor: pointer;
}

/* --- Profilen i vinduet ----------------------------------------------------

   Under 1000 px er der ikke plads til panelet, og profilen aabnes i et vindue
   i stedet. Reglerne herunder er vinduets.

   De stod foer uden ".prophet-summary-dialog" foran. Markeringen er den samme
   i vinduet og i panelet - det er den samme skabelon, der klones to steder -
   saa hver eneste af dem ramte ogsaa panelet. Panelet havde sine egne regler
   for det meste, men ikke for alt: linkets guld baggrund og polstring kom
   herfra, og med panelets egen guld tekst ovenpaa stod "Laes mere" som guld
   paa guld. Usynligt.

   Er en regel her ment for begge steder, skal den skrives to gange - ikke
   staa uden binding og haabe.
--------------------------------------------------------------------------- */
.prophet-summary-dialog .prophet-summary-content {
    padding: clamp(2rem, 6vw, 3.5rem);
}

.prophet-summary-dialog .prophet-summary-order {
    color: #dcb267;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.prophet-summary-dialog .prophet-summary-arabic {
    margin: 1.5rem 0 0;
    color: #efc477;
    font: 400 clamp(2.5rem, 8vw, 4rem)/1.2 var(--arabic);
    text-align: left;
}

.prophet-summary-dialog .prophet-summary-content h2 {
    margin: .2rem 0 1rem;
    color: #fff;
    font-size: clamp(2.4rem, 8vw, 4rem);
}

.prophet-summary-dialog .prophet-summary-content > p:not(.prophet-summary-arabic) {
    color: #b9c5bf;
}

.prophet-summary-dialog .prophet-summary-relations {
    margin-block: 1.8rem;
    display: grid;
    border-top: 1px solid rgba(255,255,255,.12);
}

.prophet-summary-dialog .prophet-summary-relations > strong {
    padding-block: .8rem;
    color: #dcb267;
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.prophet-summary-dialog .prophet-summary-relations span {
    padding: .7rem 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .4rem;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .8rem;
}

.prophet-summary-dialog .prophet-summary-relations small {
    color: #84958d;
}

.prophet-summary-dialog .prophet-summary-content > a {
    display: flex;
    justify-content: space-between;
    padding: .9rem 1rem;
    color: #112018;
    background: #dfb567;
    font-weight: 800;
}

.prophet-profile-hero {
    padding-block: clamp(5rem, 10vw, 9rem);
    color: #fff;
    background:
        linear-gradient(90deg, rgba(3, 16, 13, .97), rgba(3, 16, 13, .7)),
        url("/images/prophets-tree-v1.png") center / cover;
}

.profile-crumbs {
    margin-bottom: 4rem;
    display: flex;
    gap: .7rem;
    color: #b5c2bc;
    font-size: .75rem;
}

.profile-arabic {
    margin: 1.5rem 0 0;
    color: #efc477;
    font: 400 clamp(3rem, 8vw, 6rem)/1.1 var(--arabic);
    text-align: left;
}

.prophet-profile-hero h1 {
    margin: .2rem 0 1rem;
    color: #fff;
    font-size: clamp(3.2rem, 8vw, 7rem);
}

.prophet-profile-hero .container > p:last-child {
    max-width: 60ch;
    color: #d4ddd8;
}

.prophet-profile-shell {
    padding-block: 5rem 7rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 5rem;
}

.prophet-profile-shell h2 {
    margin: .6rem 0 1.2rem;
}

.prophet-profile-shell section > p {
    max-width: 68ch;
    color: var(--muted);
}

.prophet-profile-shell aside {
    padding-left: 1.5rem;
    border-left: 1px solid var(--line);
}

.prophet-profile-shell aside > div {
    padding-block: 1rem;
    display: grid;
    border-bottom: 1px solid var(--line);
}

.prophet-profile-shell aside span,
.prophet-profile-shell aside small {
    color: var(--muted);
    font-size: .72rem;
}

@media (max-width: 800px) {
    .prophets-hero {
        min-height: var(--hero-height-narrow);
        background-position: 52% center;
    }

    .prophet-section-heading {
        display: grid;
        gap: 1rem;
    }

    .prophet-tree {
        width: 1280px;
    }

    .prophet-tree-viewport {
        scroll-padding-inline: 2rem;
    }

    .prophet-profile-shell {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .prophet-profile-shell aside {
        padding: 1.5rem 0 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Staar baandet stille, kan raekken rulles i haanden i stedet - og saa
       skal kopien vaek, ellers ville profeterne staa der to gange. */
    .prophet-marquee {
        overflow: auto hidden;
        mask-image: none;
    }

    .prophet-marquee-track {
        animation: none;
    }

    .prophet-timeline.is-copy {
        display: none;
    }

    .prophet-node {
        transition: none !important;
    }

    .prophet-node:hover,
    .prophet-node:focus-visible {
        transform: translate(-50%, -50%);
    }
}