/* Ibn ʿĀshir: bordeaux-bruin als accent (tussen "bordeaux" en "bruinachtig zoals nu", gesprek 25-10-2026), warm bruin als tweede kleur. */
:root{--accent:#7D2E2A; --accent-zacht:#F7EEEC; --detail:#6B5440; --detail-zacht:#F4EFEA}

/* Woordmerk */
.woordmerk{display:inline-grid;justify-items:center;align-content:center;gap:2px;height:60px;width:auto;aspect-ratio:auto;color:var(--inkt);text-decoration:none;line-height:1}
.woordmerk-ar{font:400 2.125rem/1 var(--maghribi);color:var(--accent);padding-top:4px}
.woordmerk-lat{font:600 .8125rem/1 var(--font);letter-spacing:.06em}
.voet .woordmerk{height:auto;justify-items:start;gap:var(--s2)}
.voet .woordmerk-ar{font-size:2.5rem}
.lade-kop .woordmerk{height:48px}
.lade-kop .woordmerk-ar{font-size:1.75rem}
@media (max-width:760px){.kop .woordmerk{height:48px}.kop .woordmerk-ar{font-size:1.75rem}.kop .woordmerk-lat{font-size:.75rem}}

/* Home: het vers van Ibn ʿĀshir en de drie pijlers */
.vers{padding-block:var(--s9);text-align:center;display:grid;gap:var(--s5);justify-items:center}
.vers-ar{font-family:var(--arab);font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.9;color:var(--accent)}
.vers-nl{font-size:1.125rem;color:var(--gedempt);max-width:34em}
.vers-bron{font-size:.875rem;color:var(--gedempt)}
.pijlers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--lijn)}
.pijler{display:grid;gap:var(--s3);align-content:start;padding:var(--s7) var(--s6);text-decoration:none;color:var(--inkt);transition:background var(--mid) var(--ease)}
.pijler + .pijler{border-left:1px solid var(--lijn)}
.pijler:hover{background:var(--accent-zacht)}
.pijler .maghribi{font-size:2.25rem;color:var(--accent);justify-self:start}
.pijler-naam{font-size:1.375rem;font-weight:600}
.pijler-wie{font-size:.9375rem;color:var(--gedempt)}
.pijler-graad{font-size:.8125rem;font-weight:600;color:var(--detail);letter-spacing:.02em}
.pijler-meer{display:inline-flex;align-items:center;gap:var(--s1);font-size:.9375rem;font-weight:500;color:var(--accent);margin-top:var(--s2)}
.pijler-meer .icoon-s{transition:transform var(--mid) var(--ease)}
.pijler:hover .pijler-meer .icoon-s{transform:translateX(4px)}

.wie{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6);align-items:center}
.wie-beeld{grid-column:1/6;clip-path:url(#boog);aspect-ratio:4/5;overflow:hidden}
.wie-beeld img{width:100%;height:100%;object-fit:cover}
.wie-tekst{grid-column:7/13;display:grid;gap:var(--s5)}
.wie-tekst .maghribi{font-size:2rem;color:var(--accent);justify-self:start}
.wie-tekst > p{color:var(--gedempt);font-size:1.0625rem}
.feiten-kort{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s5);margin:0;font-size:.9375rem;padding-block:var(--s5);border-block:1px solid var(--lijn)}
.feiten-kort dt{color:var(--gedempt)}
.feiten-kort dd{margin:0}

.namen{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Geleerden: index, geen kaarten */
.geleerden{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}
.geleerde{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s4);align-items:baseline;padding-block:var(--s5);border-bottom:1px solid var(--lijn)}
.geleerde-naam{font-weight:600;font-size:1.0625rem}
.geleerde-naam a{text-decoration:none;color:inherit}
.geleerde-naam a:hover{color:var(--accent)}
.geleerde .ar{font-size:1rem;color:var(--detail);grid-column:2;grid-row:1;text-align:right}
.geleerde-meta{grid-column:1/-1;font-size:.875rem;color:var(--gedempt)}
.geleerde-werk{grid-column:1/-1;font-size:.9375rem}
.geleerde-werk a{color:var(--accent);text-underline-offset:3px}

/* Biografie: het openingsvers groot */
.p-over .tekst .ar-blok{font-family:var(--arab);font-size:1.5rem;line-height:1.9;color:var(--accent);text-align:right;padding:var(--s5) var(--s6);background:var(--accent-zacht);border-radius:var(--r-m)}

@media (max-width:900px){
  .pijlers{grid-template-columns:1fr}
  .pijler + .pijler{border-left:0;border-top:1px solid var(--lijn)}
  .wie-beeld,.wie-tekst{grid-column:1/-1}
  .wie-beeld{max-width:360px}
  .geleerden{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wie{grid-template-columns:minmax(0,1fr)!important}
  .pijler{padding:var(--s6) 0}
  .vers{padding-block:var(--s8)}
}

/* Home: geleerden-index, langere Arabische namen op één regel */
.p-home .index li a{grid-template-columns:96px minmax(0,1fr) auto}
.p-home .index .maghribi{white-space:nowrap}

/* Verzen: twee halve verzen, naast elkaar als het past, anders onder elkaar */
.vers-ar, .p-over .tekst .ar-blok{display:flex;flex-wrap:wrap;column-gap:var(--s6)}
.vers-ar{justify-content:center}

/* Waar begin ik?, smalle schermen: nummer als badge op de cover, zodat de titel ruimte heeft */
@media (max-width:480px){
  .p-leerlijnen .stap{position:relative;grid-template-columns:56px minmax(0,1fr)}
  .p-leerlijnen .stap::before{position:absolute;top:var(--s2);left:var(--s2);width:28px;height:28px;font-size:.8125rem;box-shadow:0 0 0 2px var(--wit,#fff);z-index:1}
  .p-leerlijnen .stap .prijs{grid-column:2}
}

/* Verzen in Maghribi-schrift, elk bayt op één regel: de letter schaalt mee met het scherm */
.vers-ar, .p-over .tekst .ar-blok{font-family:var(--maghribi);flex-wrap:nowrap;white-space:nowrap;line-height:2}
.vers-ar{font-size:min(2.75rem,5.2vw)}
.p-over .tekst .ar-blok{font-size:min(1.875rem,4.4vw);justify-content:center}
@media (max-width:480px){.p-over .tekst .ar-blok{padding:var(--s4);font-size:5vw}}
.naam{white-space:nowrap}