/* Hanafi Biographical Atlas — dome theme.
   A turquoise dome against an evening sky: the home page opens on the dome itself, cut out of its
   photograph, and the rest of the site borrows its air. Panels float on soft shadows, the century keys are
   glazed tiles you can press, and the land on the map stands a little above the sea. Arabic is nasta'liq.
   The photograph is in src/img/; small ornaments are drawn by tools/make_tiles.py and baked in by
   tools/bake_theme.py. Edit this file, not src/style.css. */
:root {
  --bg: #f8f4ec; --surface: #ffffff; --ink: #17253a; --ink2: #3f4f68; --muted: #627088; --rule: #e2dccd;
  --land: #f3e8d2; --landline: #c9b88f; --sea: #cfeaee; --band: #f2ede1;
  --accent: #08707f; --turq: #17a2b4; --rubric: #a02c55; --gold: #8a5e00; --gilt: #d9a520; --cobalt: #1b3a8f;
  --m: #1f3fa3; --t: #c95f10; --shadow: rgba(23, 37, 58, .3);
  --sky1: #b9c7ce; --sky2: #d8dcda; --sky3: #f2dfc2; --sun: rgba(255, 226, 170, .75); --script: #1b3a8f;
  --key1: #ffffff; --key2: #f0ebdf; --key-edge: #d6ceba; --key-drop: #cbc2ac;
  --lift: 0 1px 2px rgba(23, 37, 58, .08), 0 16px 36px -16px rgba(23, 37, 58, .38);
  --lift-s: 0 1px 2px rgba(23, 37, 58, .08), 0 8px 20px -10px rgba(23, 37, 58, .3);
  --relief: drop-shadow(0 2px 1.5px rgba(70, 56, 20, .32));
  --serif: "Gentium Book Plus", "Gentium Plus", "Charis SIL", "Noto Serif", Georgia, serif;
  --sans: var(--serif);
  --arabic: "Noto Nastaliq Urdu", "Amiri", "Noto Naskh Arabic", serif;
  --rosette: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%22.36%22 cy=%22.3%22 r=%22.8%22%3E%3Cstop offset=%220%22 stop-color=%22%238fe6ee%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%2317a2b4%22/%3E%3Cstop offset=%221%22 stop-color=%22%230a6272%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpolygon points=%2223.00,13.00 19.78,16.22 19.78,20.78 15.22,20.78 12.00,24.00 8.78,20.78 4.22,20.78 4.22,16.22 1.00,13.00 4.22,9.78 4.22,5.22 8.78,5.22 12.00,2.00 15.22,5.22 19.78,5.22 19.78,9.78%22 fill=%22%230b3f4c%22 fill-opacity=%22.28%22/%3E%3Cpolygon points=%2223.00,12.00 19.78,15.22 19.78,19.78 15.22,19.78 12.00,23.00 8.78,19.78 4.22,19.78 4.22,15.22 1.00,12.00 4.22,8.78 4.22,4.22 8.78,4.22 12.00,1.00 15.22,4.22 19.78,4.22 19.78,8.78%22 fill=%22url(%23g)%22 stroke=%22%230a5f6e%22 stroke-width=%22.6%22/%3E%3Cpolygon points=%2216.50,12.00 15.18,13.32 15.18,15.18 13.32,15.18 12.00,16.50 10.68,15.18 8.82,15.18 8.82,13.32 7.50,12.00 8.82,10.68 8.82,8.82 10.68,8.82 12.00,7.50 13.32,8.82 15.18,8.82 15.18,10.68%22 fill=%22%23fff%22 fill-opacity=%22.92%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.7%22 fill=%22%23d9a520%22/%3E%3C/svg%3E");
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f1a2b; --surface: #18273d; --ink: #f2eee3; --ink2: #c9d1dd; --muted: #98a5ba; --rule: #2a3c57;
  --land: #2a3d5a; --landline: #5d769c; --sea: #0c1624; --band: #1c2c44;
  --accent: #62d2de; --turq: #2fb4c4; --rubric: #f291b1; --gold: #e6b94e; --gilt: #d9a520; --cobalt: #3557c4;
  --m: #a0b6ff; --t: #ff9a4d; --shadow: rgba(0, 0, 0, .6);
  --sky1: #16243c; --sky2: #2b3856; --sky3: #7d6361; --sun: rgba(255, 190, 140, .35); --script: #b4c5ff;
  --key1: #22344f; --key2: #1a2940; --key-edge: #36496a; --key-drop: #0a1220;
  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 38px -16px rgba(0, 0, 0, .75);
  --lift-s: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 22px -10px rgba(0, 0, 0, .7);
  --relief: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .55));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.55; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
::selection { background: var(--turq); color: #fff; }
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: 22px; }
main.wrap, main > .page { padding-block: 36px 80px; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .17em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ar { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; line-height: 2.1; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); color: var(--ink); padding: .5rem .8rem; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }

/* site header and footer: the sky */
header.site { position: relative; z-index: 10; background: var(--sky1); color: var(--ink); }
header.site::after { content: ""; display: block; height: 44px; background: linear-gradient(var(--sky1), var(--bg)); }
body:has(.hero) header.site::after { display: none; }
header.site .bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding-block: .75rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; margin-right: auto; font-weight: 700; font-size: 1.14rem; color: var(--ink); text-decoration: none; }
.brand::before { content: ""; width: 1.5rem; height: 1.5rem; flex: none; background: var(--rosette) center / contain no-repeat; }
header.site nav { display: flex; flex-wrap: wrap; gap: .1rem .3rem; padding: .22rem .5rem; font-size: 1rem; background: color-mix(in srgb, var(--surface) 62%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), var(--lift-s); }
header.site nav a { text-decoration: none; color: var(--ink2); padding: .18rem .75rem; border-radius: 999px; }
header.site nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 80%, transparent); }
header.site nav a[aria-current="page"] { color: #fff; background: linear-gradient(#22b3c5, #0f8a9c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 5px -1px rgba(8, 80, 92, .6); }
.mode { font-size: .9rem; color: var(--ink2); background: color-mix(in srgb, var(--surface) 62%, transparent); border: 0; border-radius: 999px; padding: .34rem .85rem; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), var(--lift-s); }
.mode:hover { color: var(--ink); }
footer.site { background: linear-gradient(var(--bg), var(--sky2) 55%, var(--sky1)); color: var(--ink2); font-size: .92rem; }
footer.site .wrap { padding-block: 3.2rem 2.2rem; display: grid; gap: .35rem; }
footer.site p { margin: 0; max-width: 60em; }

/* home page opening: the dome at the left edge of the sky, the title in the open air beside it */
.hero { --dome: clamp(300px, 39vw, 520px); position: relative; overflow: clip; isolation: isolate; background: radial-gradient(60% 90% at 88% 100%, var(--sun), transparent 70%), linear-gradient(var(--sky1), var(--sky2) 48%, var(--sky3)); }
.hero::after { content: ""; display: block; height: 6px; background: linear-gradient(var(--gilt) 0 1px, #fff 1px 2px, var(--cobalt) 2px); }
.hero-in { display: block; }
.plate, .plaque { display: contents; }
.iwan { position: absolute; z-index: -1; left: 0; bottom: 6px; width: var(--dome); aspect-ratio: 858 / 543; background: url(img/dome.webp) left bottom / contain no-repeat; transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -6px), 0); transition: transform .35s ease-out; }
.hero-text { margin-left: max(0px, calc(var(--dome) + 34px - (100vw - min(100vw, 1140px)) / 2 - 22px)); padding-block: 1.9rem 2.6rem; min-height: calc(var(--dome) * .62); display: flex; flex-direction: column; justify-content: center; transform: translate3d(calc(var(--px, 0) * 6px), 0, 0); transition: transform .35s ease-out; }
.inscr { margin: 0; color: var(--script); font-size: clamp(1.2rem, 2.5vw, 1.75rem); line-height: 2.2; text-align: left; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin: 0 0 .5rem; text-shadow: 0 1px 0 color-mix(in srgb, #fff 55%, transparent); }
.hero .lede { max-width: 34em; margin: 0 0 .9rem; color: var(--ink); }
.hero .stats { gap: .15rem 1.3rem; font-size: .98rem; color: var(--ink); }
.hero .stats b { color: var(--rubric); font-weight: 700; }
main > .hero + .page { padding-top: 40px; }

/* type */
.kicker { font-size: .98rem; font-style: italic; color: var(--rubric); margin: 0 0 .3rem; }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); line-height: 1.1; margin: 0 0 .55rem; font-weight: 700; text-wrap: balance; }
.lede { font-size: 1.16rem; color: var(--ink2); max-width: 42em; margin: 0 0 1.1rem; }
.stats { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; font-size: .96rem; color: var(--ink2); margin: 0; padding: 0; list-style: none; }
.stats b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
section { margin-top: 3rem; }
.page > section:first-child { margin-top: 0; }
h2 { font-size: 1.62rem; line-height: 1.2; margin: 0 0 .3rem; text-wrap: balance; }
h2::before { content: ""; display: inline-block; width: .78em; height: .78em; margin-right: .42em; vertical-align: -.06em; background: var(--rosette) center / contain no-repeat; }
.sub { color: var(--ink2); margin: 0 0 1rem; max-width: 44em; }
.prose { max-width: 40em; }
.prose p { margin: 0 0 .9rem; }
.prose h2 { margin-top: 2.1rem; }
.prose h3 { font-size: 1.12rem; margin: 1.3rem 0 .25rem; color: var(--rubric); }
.prose dt { font-weight: 700; } .prose dd { margin: 0 0 .6rem; color: var(--ink2); }
.prose ul { padding-left: 1.2rem; }
.prose li::marker { color: var(--gilt); }

.legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .92rem; color: var(--ink2); align-items: center; }
.sw { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .38rem; vertical-align: -.02rem; }
.sw.m { background: var(--m); } .sw.t { background: var(--t); }
.sw.lost { background: transparent; border: 2px solid var(--ink2); }
.sw.m.lost { border-color: var(--m); } .sw.t.lost { border-color: var(--t); }
.sw.line { width: 1.3rem; height: 0; border-radius: 0; border-top: 2px solid var(--ink2); vertical-align: .22rem; }
.sw.dash { width: 1.3rem; height: 0; border-radius: 0; border-top: 2px dashed var(--ink2); vertical-align: .22rem; }

/* century control and map */
.cents { display: flex; flex-wrap: wrap; gap: .3rem; margin: .9rem 0 1.2rem; align-items: center; }
.cents button { font-size: .94rem; padding: .26rem .7rem; color: var(--ink); border: 1px solid var(--key-edge); background: linear-gradient(var(--key1), var(--key2)); border-radius: 9px; cursor: pointer; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 80%, transparent), 0 2px 0 var(--key-drop), 0 6px 10px -5px var(--shadow); }
.cents button:hover { transform: translateY(-1px); }
.cents button[aria-pressed="true"] { transform: translateY(2px); color: #fff; border-color: #0a6f80; background: linear-gradient(#1fa9bb, #0d8496); box-shadow: inset 0 2px 5px rgba(4, 50, 60, .55), 0 1px 0 color-mix(in srgb, #fff 60%, transparent); }
.cents button.gap { color: var(--muted); border-style: dashed; }
.cents button.gap[aria-pressed="true"] { color: #fff; }
.cents .play { margin-left: .5rem; color: #fff; border-color: #152f78; background: linear-gradient(#3156c2, #1b3a8f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 #10245c, 0 6px 10px -5px var(--shadow); }
.mapgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.9rem; align-items: start; }
.mapbox, .netscroll { position: relative; background: var(--sea); border: 1px solid color-mix(in srgb, #fff 70%, var(--rule)); border-radius: 18px; box-shadow: var(--lift); min-width: 0; overflow-x: auto; }
.netscroll { background: var(--surface); }
.mapbox svg { display: block; width: 100%; min-width: 700px; max-width: none; height: auto; }
.land { fill: var(--land); stroke: var(--landline); stroke-width: .7; filter: var(--relief); }
.sea { fill: var(--sea); }
.city { font-family: var(--serif); font-style: italic; font-size: 12.5px; fill: var(--ink); paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round; }
.dot { cursor: pointer; stroke-width: 1.8; filter: drop-shadow(0 1.5px 1px rgba(10, 20, 40, .45)); }
.dot.m { fill: var(--m); stroke: var(--m); } .dot.t { fill: var(--t); stroke: var(--t); }
.dot.lost { fill: var(--surface); }
.dot.past { opacity: .36; }
.dot.sel { stroke: var(--ink); stroke-width: 2.6; }
.dot:focus-visible { outline: none; stroke: var(--ink); stroke-width: 3; }
.side { min-width: 0; }
.side h3 { font-size: 1.28rem; margin: 0; line-height: 1.2; }
.side .rng { font-size: .94rem; font-style: italic; color: var(--rubric); margin: .1rem 0 .55rem; font-variant-numeric: tabular-nums; }
.side p { margin: 0 0 .8rem; color: var(--ink2); }
.wlist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--turq); }
.wlist li { border-bottom: 1px solid var(--rule); }
@media (min-width: 861px) { .wlist { max-height: 25.5rem; overflow-y: auto; } }
.wlist button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: .9rem minmax(0, 1fr); gap: .5rem; width: 100%; padding: .4rem 0; cursor: pointer; }
.wlist button:hover .wa, .wlist button:focus-visible .wa { text-decoration: underline; }
.wlist button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wlist .sw { margin: .5rem 0 0; }
.wa { font-weight: 700; } .wt { font-style: italic; }
.wm { display: block; font-size: .86rem; color: var(--muted); }
.unplaced { font-size: .92rem; color: var(--ink2); margin: .7rem 0 0; }
.regbars { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: .18rem .6rem; font-size: .94rem; align-items: center; margin: 0; }
.regbars i { display: block; height: .56rem; min-width: 3px; border-radius: 999px; background: linear-gradient(#35bccd, #0f8a9c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(8, 80, 92, .4); }
.regbars span:last-child { font-variant-numeric: tabular-nums; color: var(--ink2); }

/* tables */
.tablewrap { overflow-x: auto; }
table.plain { border-collapse: collapse; width: 100%; font-size: .98rem; }
table.plain th, table.plain td { text-align: left; padding: .45rem .9rem .45rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.plain thead th { font-size: .92rem; font-style: italic; font-weight: 400; color: var(--rubric); border-bottom: 2px solid var(--turq); }
table.plain td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.plain td.txt { color: var(--ink2); min-width: 16rem; }
table.plain tr.none td { color: var(--muted); font-style: italic; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; margin-top: .9rem; }
.ways h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.ways p { margin: 0; color: var(--ink2); }
.ways > div { background: var(--surface); border-radius: 16px; padding: 1rem 1.2rem 1.15rem; box-shadow: var(--lift-s); transition: transform .2s, box-shadow .2s; }
.ways > div:hover { transform: translateY(-3px); box-shadow: var(--lift); }

/* network */
.netscroll svg { display: block; min-width: 1040px; width: 100%; max-width: none; height: auto; }
.nettools { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; margin: .8rem 0 1rem; }
.nettools label { font-size: .94rem; display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--accent); }
.lane { fill: var(--band); } .lanelab { font-family: var(--serif); font-style: italic; font-size: 12.5px; fill: var(--ink2); }
.gapband { fill: var(--rule); opacity: .55; }
.axis { font-family: var(--serif); font-size: 11.5px; fill: var(--muted); }
.grid { stroke: var(--rule); stroke-width: 1; }
.edge { fill: none; stroke: var(--ink2); stroke-width: 1; opacity: .3; }
.edge.abr, .edge.sup { stroke-width: 1.8; }
.edge.tch, .edge.fam { stroke-dasharray: 3 3; }
.edge.dim { opacity: .06; }
.edge.hot { opacity: 1; stroke: var(--accent); stroke-width: 1.8; }
.node { cursor: pointer; stroke-width: 2; }
.node.m { fill: var(--m); stroke: var(--m); } .node.t { fill: var(--t); stroke: var(--t); }
.node.lost { fill: var(--surface); }
.node.dim { opacity: .18; }
.node.sel { stroke: var(--ink); stroke-width: 3; }
.node:focus-visible { outline: none; stroke: var(--ink); stroke-width: 3; }
.nlab { font-family: var(--serif); font-size: 12.5px; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.hint { font-size: .9rem; font-style: italic; color: var(--muted); margin: .7rem 0 0; }
.tip { position: absolute; z-index: 5; pointer-events: none; background: #17253a; color: #fff; font-size: .88rem; line-height: 1.3; padding: .4rem .65rem; border-radius: 9px; box-shadow: var(--lift-s); max-width: 16rem; transform: translate(-50%, calc(-100% - 10px)); }

/* catalogue */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 .4rem; font-size: .98rem; }
.filters input, .filters select { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: .45rem .7rem; min-width: 0; box-shadow: inset 0 2px 3px -1px rgba(23, 37, 58, .14); }
.filters input:hover, .filters select:hover { border-color: var(--turq); }
.filters input { flex: 1 1 15rem; }
.count { font-size: .9rem; font-style: italic; color: var(--muted); margin: 0 0 .5rem; }
.cat { list-style: none; margin: 0; padding: .2rem .9rem; background: var(--surface); border-radius: 18px; box-shadow: var(--lift); }
.cat li:last-child { border-bottom: 0; }
.cat li { border-bottom: 1px solid var(--rule); }
.cat a, .cat .headrow { display: grid; grid-template-columns: 5.6rem minmax(0, 1.2fr) minmax(0, 1.3fr) 5.6rem minmax(0, .8fr) 9.4rem; gap: .2rem 1rem; padding: .5rem .3rem; align-items: baseline; color: inherit; text-decoration: none; }
.cat a:hover { background: var(--band); border-radius: 10px; }
.cat a:hover .ti { text-decoration: underline; }
.cat a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cat .y { font-size: .94rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.cat .a { font-weight: 700; } .cat .ti { font-style: italic; }
.cat .ar { display: block; font-size: 1.12rem; line-height: 2.1; font-weight: 400; font-style: normal; color: var(--ink2); text-align: left; }
.cat .k, .cat .r, .cat .s { font-size: .94rem; color: var(--ink2); }
.cat .headrow span { font-size: .92rem; font-style: italic; color: var(--rubric); }
.st { display: inline-flex; align-items: center; gap: .35rem; }
.st::before { content: ""; width: .58rem; height: .58rem; border-radius: 50%; border: 2px solid var(--ink2); background: var(--ink2); flex: none; }
.st.ms::before, .st.partly::before { background: linear-gradient(90deg, var(--ink2) 50%, transparent 50%); }
.st.lost::before { background: transparent; }
.empty { color: var(--ink2); font-style: italic; padding: 1rem 0; }

/* shared facts list (drawer and work page) */
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .9rem; margin: 0 0 1.1rem; padding: .9rem 1.1rem; background: var(--surface); border-radius: 16px; box-shadow: var(--lift-s); font-size: .96rem; }
dl.facts dt { color: var(--muted); font-style: italic; } dl.facts dd { margin: 0; }
.doubt { font-size: .96rem; border: 1px dashed var(--rubric); border-radius: 10px; padding: .5rem .8rem; margin: 0 0 .9rem; }
.doubt b { font-weight: 700; }
.rel { list-style: none; margin: 0; padding: 0; }
.rel li { padding: .2rem 0; }
.rel button { all: unset; cursor: pointer; color: var(--accent); }
.rel button:hover, .rel button:focus-visible { text-decoration: underline; }
.rel small { display: block; font-size: .88rem; color: var(--muted); }
h4.lab, .lab { font-size: 1rem; font-weight: 700; color: var(--rubric); margin: 1.2rem 0 .25rem; }
.lab::before { display: none; }

/* drawer */
.card { position: fixed; z-index: 20; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100% - 20px)); background: var(--surface); border-radius: 22px; box-shadow: 0 2px 4px rgba(23, 37, 58, .12), 0 30px 70px -20px var(--shadow), 0 0 0 1px color-mix(in srgb, var(--rule) 70%, transparent); overflow-y: auto; padding: 1.1rem 1.4rem 1.6rem; }
.card .close { position: sticky; top: 0; float: right; font-size: .9rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .8rem; cursor: pointer; box-shadow: var(--lift-s); }
.card dl.facts { background: var(--band); box-shadow: none; }
.card .close:hover { border-color: var(--turq); }
.card .ck { font-size: .96rem; font-style: italic; color: var(--rubric); margin: .2rem 0 .4rem; }
.card h3 { font-size: 1.55rem; line-height: 1.15; margin: 0; font-style: italic; font-weight: 400; text-wrap: balance; }
.card .tar { font-size: 1.4rem; line-height: 2.2; margin: 0 0 .2rem; text-align: right; }
.card .auth { font-size: 1.12rem; font-weight: 700; margin: 0; }
.card .full { color: var(--ink2); margin: 0 0 .9rem; font-size: 1rem; }
.card .note { margin: 0 0 1rem; }
.card .more { display: inline-block; font-size: 1rem; margin: 0 0 .4rem; }

/* work page */
.crumbs { font-size: .94rem; color: var(--muted); margin: 0 0 1.1rem; }
.crumbs a { color: var(--ink2); }
.work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.8rem; align-items: start; }
.work h1 { font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 2.7rem); margin-bottom: 0; }
.work .tar { font-size: 1.9rem; line-height: 2.2; margin: 0 0 .3rem; text-align: left; }
.work .auth { font-size: 1.28rem; font-weight: 700; margin: 0; }
.work .full { color: var(--ink2); margin: 0 0 1.2rem; }
.work .note { font-size: 1.14rem; max-width: 36em; margin: 0 0 1.4rem; }
.work .rel a { color: var(--accent); text-decoration: none; }
.work .rel a:hover { text-decoration: underline; }
.work aside { min-width: 0; }
.strip { display: block; width: 100%; height: auto; margin: .3rem 0 1.2rem; }
.strip .ax { stroke: var(--ink2); stroke-width: 1; } .strip .tk { stroke: var(--rule); stroke-width: 1; }
.strip text { font-family: var(--serif); font-size: 11px; fill: var(--muted); }
.strip .gapband { opacity: .7; }
.strip .mk.m { fill: var(--m); stroke: var(--m); } .strip .mk.t { fill: var(--t); stroke: var(--t); }
.strip .mk { stroke-width: 2; } .strip .mk.lost { fill: var(--bg); }
.cite { font-size: .96rem; color: var(--ink2); background: var(--band); border-radius: 14px; padding: .8rem 1rem; margin: 0; overflow-wrap: anywhere; box-shadow: inset 0 2px 4px -2px rgba(23, 37, 58, .2); }
.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1rem; border-top: 2px solid var(--turq); font-size: 1rem; }
.pager a { text-decoration: none; max-width: 48%; }
.pager a:hover { text-decoration: underline; }
.pager small { display: block; color: var(--rubric); font-size: .9rem; font-style: italic; }
.dl { font-size: 1rem; }

@media (max-width: 860px) {
  .mapgrid, .work { grid-template-columns: minmax(0, 1fr); }
  .ways { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .cat a { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .cat .ti { grid-column: 2; } .cat .k { grid-column: 1; grid-row: 2; } .cat .r { grid-column: 2; } .cat .s { grid-column: 2; }
  .cat li.headrowli { display: none; }
  .card { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 80%; }
  .hero { --dome: 88vw; }
  .hero-text { margin-left: 0; min-height: 0; padding-block: 1.2rem calc(88vw * .64); }
  .inscr { font-size: 1.3rem; }
  header.site nav { border-radius: 18px; }
  .pager a { max-width: 100%; }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  header.site nav { order: 3; width: 100%; }
}
@media (min-width: 1100px) { body.cardopen { padding-right: 460px; } }
@media (prefers-reduced-motion: no-preference) { .dot, .node, .edge { transition: opacity .25s; } .cents button { transition: transform .12s; } }
@media (prefers-reduced-motion: reduce) { .iwan, .hero-text { transform: none; transition: none; } }
@media print {
  header.site nav, .mode, .card, .filters, .cents, .pager, header.site::after, .brand::before, .iwan, .hero::after { display: none !important; }
  body, header.site, footer.site, .hero { background: #fff; color: #000; }
  .hero-text { margin-left: 0; min-height: 0; }
  .mapbox, .netscroll, .cat, dl.facts, .ways > div { box-shadow: none; border: 1px solid #bbb; }
}

.reading{max-width:850px;margin:0 auto;padding-bottom:3rem}.reading nav{display:flex;gap:1rem;flex-wrap:wrap}.bio-entry{border-top:1px solid var(--line);padding:2rem 0;margin-top:2rem;scroll-margin-top:2rem}.bio-text{font-size:1.5rem;line-height:2.1;text-align:right}.bio-entry h3{font-size:1rem;margin-top:1.5rem}.bio-entry summary{cursor:pointer;padding:1rem 0}.bio-entry details{margin-top:1rem}

.explore-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.25rem;margin:2rem 0}.explore-card,.source-box{display:block;padding:1.5rem;border:1px solid var(--ink2);border-radius:4px}.explore-card{text-decoration:none;color:var(--ink)}.explore-card:hover{background:var(--paper2,#ecefe9)}.explore-card h2{font-size:1.6rem}.source-box{margin:1.5rem 0}.reading h2{margin-top:2rem}.site nav{flex-wrap:wrap}

.source-passage{border-top:1px solid #cbd5d1;padding:1.5rem 0;scroll-margin-top:2rem}.source-passage[hidden]{display:none}
.report-card{background:#fff;border:1px solid #d5dfdb;border-radius:12px;padding:28px;margin:24px 0}.report-meta{display:flex;justify-content:space-between;gap:16px;font:13px/1.5 system-ui;color:#61716c}.report-card h3{margin:14px 0 22px}.report-english{font-size:18px;line-height:1.85}.report-card details{border-top:1px solid #e1e8e4;padding-top:15px;margin-top:20px}.report-card summary{cursor:pointer;color:#15616a;font:15px/1.5 system-ui}.report-arabic{font-size:23px;line-height:2.1;padding-top:15px}.report-sources{font:14px/1.7 system-ui}.translation-pending{font:15px/1.6 system-ui;color:#64716c}.additional-matches{margin:32px 0;padding:20px;border:1px solid #d5dfdb;border-radius:10px}.additional-matches>summary{cursor:pointer;font-weight:600}@media(max-width:600px){.report-card{padding:18px}.report-meta{display:block}.report-meta span{display:block}}

.report-card{background:var(--surface);border-color:var(--rule);box-shadow:var(--lift-s)}.report-card summary{color:var(--accent)}
.mapbox .land{filter:none;fill:var(--land);stroke:var(--landline)}.mapbox .boundaries{fill:none;stroke:var(--landline);stroke-width:.7;stroke-dasharray:3 2}.mapbox .water-label{fill:var(--accent);opacity:.7;font:italic 13px Georgia,serif;letter-spacing:1px}.mapbox .geo-grid{fill:none;stroke:var(--accent);stroke-width:.4;opacity:.15}

.book-action{display:inline-block;padding:.7rem 1rem;background:var(--accent);color:var(--surface);border-radius:8px;font-weight:700;text-decoration:none}.book-scholars{columns:2;column-gap:2rem}.book-scholars li{break-inside:avoid;margin-bottom:.5rem}#scholar-directory{scroll-margin-top:2rem}@media(max-width:600px){.book-scholars{columns:1}}

/* Report source text uses Naskh; other Arabic retains the theme’s Nastaliq. */
.ar.report-arabic,.ar.bio-text{font-family:"Amiri","Noto Naskh Arabic","Geeza Pro","Traditional Arabic",serif;line-height:2.1}

.sanad{font-style:italic;font-weight:400}.matn{font-style:normal;font-weight:700}

/* Keep transmission chains visually secondary in both languages. */
.sanad{color:var(--muted)}

.scholar-in-sanad{color:#087d8c;background:transparent;font-weight:700;font-style:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,#087d8c 35%,transparent);text-underline-offset:.2em}:root[data-theme="dark"] .scholar-in-sanad{color:#62d2de}.mention-label{font-size:.95rem;color:var(--ink2);background:var(--band);padding:.8rem 1rem;border-radius:8px}.report-sources summary{font-size:.9rem}.report-sources li{margin:.4rem 0}

.report-heading{display:flex;align-items:center;gap:.7rem}.report-heading h2{margin-bottom:.5rem}.reading-info{display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;padding:0;border:1px solid var(--rule);border-radius:50%;background:var(--surface);color:var(--accent);cursor:pointer;font:1.3rem/1 Georgia,serif;flex:none}.reading-info:hover{background:var(--band)}:is(#reading-notes,#mention-notes,#inline-notes-dialog){width:min(600px,calc(100vw - 32px));max-height:80vh;overflow:auto;padding:1.7rem;border:1px solid var(--rule);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:var(--lift)}:is(#reading-notes,#mention-notes,#inline-notes-dialog)::backdrop{background:rgba(15,26,43,.45);backdrop-filter:blur(3px)}.notes-head{display:flex;justify-content:space-between;align-items:start;gap:1rem}.notes-head h2{font-size:1.5rem;margin:0}.notes-close{border:0;border-radius:50%;background:var(--band);color:var(--ink);width:2rem;height:2rem;font:1.4rem/1 sans-serif;cursor:pointer}:is(#reading-notes,#mention-notes,#inline-notes-dialog) h3{font-size:1.15rem;margin:1.2rem 0 .4rem}:is(#reading-notes,#mention-notes,#inline-notes-dialog) p{font-size:1rem;margin:.5rem 0}

.mention-info{vertical-align:middle;margin-left:.4rem}

.scholar-menu{position:relative}.scholar-menu>summary{list-style:none;cursor:pointer;padding:.18rem .75rem;border-radius:999px;color:var(--ink2)}.scholar-menu>summary::-webkit-details-marker{display:none}.scholar-menu>summary.active,.scholar-menu[open]>summary{background:var(--accent);color:#fff}.scholar-submenu{position:absolute;z-index:50;top:calc(100% + .5rem);left:0;min-width:145px;display:grid;gap:.25rem;padding:.5rem;background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--lift)}header.site nav .scholar-submenu a{display:block;border-radius:6px;padding:.45rem .7rem}.biography-notes{margin-top:1rem}#inline-notes-body{margin-top:1rem}.scholar-menu>summary span{font-size:.7em}

.report-card .report-arabic{padding-top:0}.report-card .report-arabic>p:first-child{margin-top:0}.mention-context{display:flex;align-items:center;gap:.25rem;color:var(--muted);font-size:.85rem;margin-bottom:1rem}

.biography-source-notes{border-top:1px solid var(--rule);padding-top:.75rem}.biography-source-notes>summary{cursor:pointer;color:var(--accent)}.biography-source-notes>div{padding:.5rem 0}
[hidden]{display:none!important}
.edition-report{margin:1.5rem 0;padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.edition-report>details{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--rule)}
.edition-report summary,.edition-comparison>summary{cursor:pointer;color:var(--accent)}
.edition-switch{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;margin:1rem 0}
.edition-switch select{max-width:100%;padding:.5rem;border:1px solid var(--rule);border-radius:6px;color:var(--ink);background:var(--paper)}
.edition-readings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.edition-readings>div{min-width:0;padding:1rem;border:1px solid var(--rule);border-radius:8px}
.edition-readings h4{margin:0 0 .75rem;font-size:1rem}
.edition-difference{padding:1rem 0;border-bottom:1px solid var(--rule)}
.edition-difference:last-child{border:0}
.comparison-kind{font-family:var(--sans);font-size:.85rem;color:var(--accent);margin:.25rem 0}
.comparison-reading{font-family:Amiri,'Noto Naskh Arabic',serif!important;font-size:1.5rem;line-height:2;overflow-wrap:anywhere}
.edition-card h3{font-size:1.5rem;margin:.5rem 0}
@media(max-width:650px){.edition-readings{grid-template-columns:1fr}}

.book-choice{max-width:850px;margin:2rem 0}.book-choice>a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 1.5rem;border:1px solid var(--rule);border-radius:12px;background:var(--surface);box-shadow:var(--lift-s);color:var(--ink);text-decoration:none}.book-choice>a:hover{border-color:var(--accent);background:var(--band)}.book-choice strong{display:block;font-size:1.5rem;color:var(--accent)}.book-choice span span{display:block;color:var(--ink2)}.scholar-search{display:block;width:100%;margin:.5rem 0 .8rem;padding:.8rem 1rem;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}

/* chronicle: 'Eleven centuries at a glance' as a rail of centuries that open in place */
.chron { list-style: none; margin: 1rem 0 0; padding: 0; }
.chron > li { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); }
.chron > li::before { content: ""; position: absolute; left: .7rem; top: 0; bottom: 0; width: 2px; background: var(--turq); opacity: .55; }
.chron > li:first-child::before { top: 1.6rem; }
.chron > li:last-child::before { bottom: calc(100% - 1.6rem); }
.chron > li.chron-gap::before { background: repeating-linear-gradient(var(--turq) 0 5px, transparent 5px 11px); }
.chron-bead { position: relative; width: 1.5rem; height: 1.5rem; margin-top: .95rem; background: var(--rosette) center / contain no-repeat; }
.chron-gap .chron-bead { width: 1.1rem; height: 1.1rem; margin: 1.15rem 0 0 .2rem; background: var(--bg); border: 2px dashed var(--muted); border-radius: 50%; }
.chron details, .chron-still { border-bottom: 1px solid var(--rule); }
.chron details[open] { margin-block: .5rem; background: var(--surface); border-bottom-color: transparent; border-radius: 16px; box-shadow: var(--lift-s); }
.chron-row { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 13.5rem 1.2rem; gap: .3rem 1.4rem; align-items: start; padding: .8rem .9rem; }
summary.chron-row { cursor: pointer; list-style: none; border-radius: 16px; }
summary.chron-row::-webkit-details-marker { display: none; }
summary.chron-row:hover .chron-text { color: var(--ink); }
.chron-when { line-height: 1.2; }
.chron-when b { display: block; font-size: 1.3rem; }
.chron-when small { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chron-text { color: var(--ink2); }
.chron-gap .chron-when b, .chron-gap .chron-text { color: var(--muted); font-style: italic; font-weight: 400; }
.chron-meter { display: grid; gap: .3rem; padding-top: .35rem; }
.chron-meter small { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chron-bar { display: flex; gap: 2px; height: .62rem; width: calc(var(--n) / var(--peak) * 100%); }
.chron-bar i { display: block; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.chron-bar i.m { background: var(--m); background: linear-gradient(var(--m), color-mix(in srgb, var(--m) 72%, #000)); }
.chron-bar i.t { background: var(--t); background: linear-gradient(var(--t), color-mix(in srgb, var(--t) 72%, #000)); }
.chron-bar i:first-child { border-radius: 999px 2px 2px 999px; }
.chron-bar i:last-child { border-radius: 2px 999px 999px 2px; }
.chron-bar i:only-child { border-radius: 999px; }
.chron-chev { width: .6rem; height: .6rem; margin-top: .55rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
details[open] > summary .chron-chev { transform: rotate(-135deg); margin-top: .8rem; }
.chron-inside { display: grid; gap: .8rem; padding: .2rem .9rem 1.1rem calc(5.6rem + 1.4rem + .9rem); }
.chron-chips { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.chron-chips li { padding: .08rem .6rem; border-radius: 999px; background: var(--band); color: var(--ink2); }
.chron-chips b { color: var(--ink); font-variant-numeric: tabular-nums; }
.chron-works { list-style: none; margin: 0; padding: 0; columns: 2 16rem; column-gap: 1.8rem; font-size: .96rem; }
.chron-works li { break-inside: avoid; display: grid; grid-template-columns: .9rem minmax(0, 1fr); gap: .45rem; padding: .26rem 0; }
.chron-works .sw { margin: .5rem 0 0; }
.chron-works a { text-decoration: none; }
.chron-works a:hover { text-decoration: underline; }
.chron-works small { display: block; font-size: .84rem; color: var(--muted); }
.chron-map { justify-self: start; font-size: .94rem; }
@media (max-width: 760px) {
  .chron-row { grid-template-columns: 4.4rem minmax(0, 1fr) 1.2rem; }
  .chron-meter { grid-column: 2; grid-row: 2; }
  .chron-chev { grid-column: 3; grid-row: 1; }
  .chron-inside { padding-left: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .chron-chev { transition: none; } }

/* Source lists use compact rows rather than profile cards. */
.list-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 1.5rem}.list-tabs button{padding:.6rem 1rem;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink2);cursor:pointer}.list-tabs button[aria-pressed="true"]{background:var(--accent);color:var(--surface);border-color:var(--accent)}.list-tabs button span{font-size:.85em;margin-left:.5rem;opacity:.8}.relationship-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}.relationship-list li{border-bottom:1px solid var(--rule)}.relationship-list li[hidden]{display:none}.relationship-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) 1.2rem;align-items:center;gap:1rem;padding:1rem .8rem;text-decoration:none}.relationship-list a:hover{background:var(--band)}.list-name{font-weight:bold}.list-ar{font-size:1.25rem;line-height:2}.list-role{color:var(--muted);font-size:.9rem}.list-arrow{color:var(--accent)}@media(max-width:760px){.relationship-list a{grid-template-columns:minmax(0,1fr) 1.2rem;gap:.3rem}.list-ar{grid-column:1;grid-row:2;text-align:left}.list-role{grid-column:1;grid-row:3}.list-arrow{grid-column:2;grid-row:1/4}}

.scholar-name{color:#087d8c;background:transparent;font-weight:inherit;font-style:inherit;text-decoration:none}:root[data-theme="dark"] .scholar-name{color:#62d2de}
/* Comfortable book-sized PDF reader, independent of the wider page layout. */
.pdf-reader{width:100%;max-width:860px;margin:2rem auto;box-sizing:border-box}
.pdf-reader #pdf-view{box-sizing:border-box;border-radius:8px}
.pdf-reader .pdf-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.8rem}
.pdf-reader #pdf-page{width:4.5rem}
@media(max-width:600px){.pdf-reader{margin:1.5rem auto}.pdf-reader #pdf-view{min-height:360px!important}}
/* Quiet credits link on the page background, without a footer band. */
footer.site{background:transparent;font-size:.85rem;position:static}
footer.site .wrap{padding-block:1rem 1.25rem;display:block}
footer.site p{margin:0}
footer.site a{color:var(--muted);text-underline-offset:.18em}

/* Compact disclosure, separate from round reading-note buttons. */
.transcription-progress{display:block;max-width:54rem;margin:.6rem 0 1.25rem;color:var(--muted);background:transparent;border:0;padding:0;width:auto;height:auto;box-shadow:none}
.transcription-progress>summary{cursor:pointer;font:inherit;font-size:.85rem;line-height:1.5;color:var(--muted)}
.transcription-progress[open]{padding-bottom:.5rem}
.transcription-progress p{font-size:.85rem;line-height:1.6;margin:.5rem 0}