/* Kounta — layout: header, hero, section grid, map, timeline, footer. */
.site-head{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;padding:.6rem var(--gutter);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--ink);margin-inline-end:auto}
.brand-mark{font-family:var(--font-display);font-weight:700;font-size:1.7rem;line-height:1}
.brand-sub{font-size:.75rem;color:var(--ink-2);direction:ltr;unicode-bidi:isolate}
@media (max-width:30rem){.brand-sub{display:none}}
.site-nav{display:none;gap:1.4rem}
.site-nav a{color:var(--ink-2);text-decoration:none;font-size:.95rem;font-weight:400}
.site-nav a:hover{color:var(--accent)}
@media (min-width:60rem){.site-nav{display:flex}}
.site-tools{display:flex;align-items:center;gap:.6rem}

/* Hero: the night sky, the name, a dune that hands over to the page. */
.hero{position:relative;background:radial-gradient(120% 90% at 50% 100%,var(--night-2),var(--night) 70%);color:var(--on-night);overflow:hidden;isolation:isolate}
.hero-inner{position:relative;z-index:2;max-width:64rem;margin-inline:auto;padding:clamp(3rem,7vw,5.5rem) var(--gutter) clamp(7rem,15vw,11rem);text-align:center;display:grid;gap:1.1rem;justify-items:center}
.hero-kicker{color:var(--on-night-2);font-size:.95rem;margin:0}
.hero-name{font-family:var(--font-display);font-weight:700;color:var(--gold-soft);font-size:clamp(5rem,20vw,12rem);line-height:1.2;margin:0}
:lang(en) .hero-name,:lang(fr) .hero-name{font-size:clamp(3.75rem,13vw,9rem);line-height:1.05}
.hero-rule{width:min(18rem,60%);height:1px;background:linear-gradient(to right,transparent,var(--gold-soft),transparent);margin:.25rem 0}
.hero-line{font-family:var(--font-display);font-size:clamp(1.3rem,1rem + 1.1vw,1.8rem);line-height:1.75;max-width:46rem;color:var(--on-night);margin:0}
.hero-meta{color:var(--on-night-2);font-size:.9rem;margin:0}
.hero-dune{position:absolute;inset-inline:0;bottom:-1px;z-index:1;width:100%;height:auto;color:var(--bg);max-width:none}

/* Sections: a manuscript page, rubric in the margin and the text beside it. */
.wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3rem,7vw,5.5rem)}
.section+.section{border-top:1px solid var(--line)}
.section-grid{display:grid;gap:1.5rem 3.5rem}
@media (min-width:60rem){.section-grid{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr)}.section-head{position:sticky;top:5.5rem;align-self:start}}
.section-body{display:grid;gap:1.75rem;min-width:0}
.lede{font-family:var(--font-display);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.75;max-width:44rem}
.prose{display:grid;gap:1rem;max-width:var(--measure)}
.prose p{margin:0}

/* Places */
.places{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));list-style:none;padding:0;margin:0}
.place{padding:1rem 1.15rem;background:var(--bg-2);border:1px solid var(--line);border-radius:.5rem;display:grid;gap:.35rem;align-content:start}
.place h3{font-size:1.25rem}
.place p{font-size:.95rem;color:var(--ink-2)}

/* Map: schematic, hand-placed, scrolls sideways on a phone instead of shrinking its labels. */
.map{border:1px solid var(--line);border-radius:.75rem;overflow:hidden;background:var(--map-land)}
.map-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.map svg{width:100%;min-width:40rem;height:auto}
.map .land{fill:var(--map-land)}
.map .sea{fill:var(--map-sea)}
.map .river{fill:none;stroke:var(--map-river);stroke-width:2.5;stroke-linecap:round}
.map .heart{fill:var(--gold-soft);fill-opacity:.22;stroke:var(--gold);stroke-dasharray:5 5;stroke-width:1.3}
.map .city{fill:var(--ink);stroke:var(--bg);stroke-width:2}
.map text{font-family:var(--font-body);font-size:17px;fill:var(--ink);font-weight:400;text-anchor:middle}
.map .region{font-family:var(--font-display);font-size:27px;fill:var(--accent);font-weight:700}
.map .faint{fill:var(--ink-2);font-size:16px}
.map .big{font-family:var(--font-display);font-size:40px;fill:var(--ink-2);opacity:.5}
.map figcaption{padding:.75rem 1rem;font-size:.9rem;color:var(--ink-2);border-top:1px solid var(--line);background:var(--bg)}

/* Profile of the Shaykh: a night panel inside the page. */
.profile{display:grid;gap:1.1rem;padding:clamp(1.25rem,3vw,2rem);background:var(--night);color:var(--on-night);border-radius:.75rem;position:relative;overflow:hidden;isolation:isolate}
.profile>*{position:relative;z-index:1}
.profile h3{color:var(--gold-soft);font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.profile .dates{color:var(--on-night-2);font-size:.92rem;margin-top:-.6rem}
.profile p{color:var(--on-night)}
.profile a{color:var(--gold-soft)}
.profile dl{display:grid;gap:.5rem 1.25rem;margin:0;font-size:.97rem}
@media (min-width:40rem){.profile dl{grid-template-columns:max-content minmax(0,1fr)}}
.profile dt{color:var(--gold-soft);font-weight:500}
.profile dd{margin:0;color:var(--on-night)}

/* Timeline */
.timeline{list-style:none;padding:0;margin:0;position:relative;display:grid;gap:1.6rem;max-width:44rem}
.timeline::before{content:"";position:absolute;inset-block:.6rem;inset-inline-start:.45rem;width:2px;background:linear-gradient(var(--line),var(--gold-soft),var(--line))}
.timeline li{position:relative;padding-inline-start:2.25rem;display:grid;gap:.1rem}
.timeline li::before{content:"";position:absolute;inset-inline-start:0;top:.5rem;width:1rem;height:1rem;border-radius:50%;background:var(--bg);border:3px solid var(--gold)}
.timeline .when{font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;font-size:.95rem}
.timeline h3{font-size:1.2rem}
.timeline p{color:var(--ink-2);font-size:.98rem}

/* Values */
.values{display:grid;gap:1.5rem 2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));list-style:none;padding:0;margin:0}
.value{display:grid;gap:.4rem;padding-top:1rem;border-top:2px solid var(--gold-soft);align-content:start}
.value h3{font-size:1.3rem}
.value p{color:var(--ink-2);font-size:.98rem}

/* Footer */
.site-foot{margin-top:auto;background:var(--night);color:var(--on-night-2);position:relative;overflow:hidden;isolation:isolate}
.site-foot .wrap{position:relative;z-index:1;display:grid;gap:1.5rem;padding-block:3rem 2.5rem}
@media (min-width:48rem){.site-foot .wrap{grid-template-columns:auto minmax(0,1fr) auto;align-items:end}}
.site-foot a{color:var(--on-night)}
.site-foot a:hover{color:var(--gold-soft)}
.foot-brand{font-family:var(--font-display);font-weight:700;font-size:2.2rem;color:var(--gold-soft);line-height:1;text-decoration:none}
.foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:0;padding:0}
.foot-note{font-size:.85rem;display:grid;gap:.25rem}
.foot-note .mail{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.foot-note .credit{justify-self:start;margin-top:.5rem;font-size:.8rem;color:var(--on-night-2)}
.foot-note .credit a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.foot-note .credit a:hover{color:var(--gold-soft)}
.hero-arabic{font-family:var(--font-display);font-weight:400;font-size:clamp(2.25rem,7vw,4rem);line-height:1.4;color:var(--on-night-2);margin:-.5rem 0 0}

/* The mark: kounta-mark.svg#mark through <use>; the letterform is currentColor, the star keeps its golds. */
.brand-logo{width:2.375rem;height:1.875rem;flex:none;align-self:center;color:var(--ink)}
.hero-logo{width:clamp(7rem,16vw,11rem);height:auto;aspect-ratio:888/697;color:var(--on-night);margin-bottom:.25rem}
.foot-brand{display:inline-flex;align-items:center;gap:.75rem}
.foot-logo{width:3.5rem;height:2.75rem;flex:none;color:var(--on-night)}
.lost-logo{width:clamp(6rem,20vw,8.25rem);height:auto;aspect-ratio:888/697;color:var(--ink)}