/* Living map: the homepage opening. The regional map fills the width, pinned to the north so the south is
   cropped first. Every 7 s the map flies to the next region and a small see-through label beside the
   region's own name gives its works: printed, manuscript only, lost. A slim title cartouche in the
   Arabian Sea carries the titles, the figures and two links. Prefix lm-. Uses the site's colour variables
   (--ink, --ink2, --paper1, --paper2, --bg) and fonts (--serif, --ar for nastaʿlīq). */


.lm { position:relative; overflow:hidden; background:#cfe0dc; width:100%;max-width:1480px;margin-inline:auto;height:min(calc(min(100vw, 1480px) * 7 / 12), 76vh); min-height:360px; }

/* the featured region stays in colour (with the sea); the other regions turn black and white */
.lm-map { transition:filter calc(1.2s / var(--lm-speed,1)) ease; }
.lm.focus .lm-map { filter:grayscale(1) brightness(1.05) contrast(.9); }
.lm-col { -webkit-mask-size:100% 100%; mask-size:100% 100%; opacity:0; transition:opacity calc(1.2s / var(--lm-speed,1)) ease; }
.lm-col.on { opacity:1; }
.lm-stage { position:absolute; inset:0; overflow:hidden; }
.lm-world { position:absolute; top:0; left:0; width:100%; aspect-ratio:12 / 7; transform-origin:0 0; transition:transform calc(2.2s / var(--lm-speed,1)) cubic-bezier(.45,.05,.2,1); }
.lm-map, .lm-col { position:absolute; inset:0; background:url(img/home-map.webp?v=5) center / 100% 100% no-repeat; }
.lm-gilt { position:absolute; left:0; right:0; bottom:0; height:6px; background:repeating-linear-gradient(#ecd8a2 0 1px,#c9a44c 1px 2px); z-index:3; }



.lm-info { position:absolute; z-index:3; left:0; top:0; display:grid; width:15rem; min-height:76px; box-sizing:border-box; gap:.35rem; min-width:11.5rem; padding:.55rem .8rem .6rem; border-radius:10px; color:var(--ink);
  background:rgba(251,246,234,.5); -webkit-backdrop-filter:blur(7px) saturate(1.1); backdrop-filter:blur(7px) saturate(1.1); border:1px solid rgba(184,145,58,.45);
  box-shadow:0 10px 26px -18px rgba(10,40,50,.6); opacity:0; transition:opacity .6s; pointer-events:none; }
.lm-info.on { opacity:1; }
:root[data-theme="dark"] .lm-info { background:rgba(23,32,48,.5); border-color:rgba(227,199,126,.4); }

.lm-info .hd { display:flex; align-items:baseline; gap:.5rem; }
.lm-info .hd b { font-size:1.5rem; font-weight:400; line-height:1; color:#0b5f68; } :root[data-theme="dark"] .lm-info .hd b { color:#7fd6dc; }
.lm-info .hd strong { font-size:1rem; } .lm-info .hd span { font-family:var(--arabic); color:#8a6d2c; font-size:.95rem; }
.lm-info .bar { display:flex; height:5px; gap:2px; border-radius:999px; overflow:hidden; }
.lm-info .ln { display:flex; gap:.7rem; font-size:.78rem; color:var(--en-ink2); white-space:nowrap; } .lm-info .ln i { display:inline-block; width:.55rem; height:.55rem; border-radius:2px; margin-right:.3rem; } .lm-info .ln b { color:var(--ink); font-weight:700; margin-right:.15rem; }
.lm .pr { background:#d9a520; } .lm .ms { background:#17a2b4; } .lm .lo { background:repeating-linear-gradient(135deg,#8f9aaa 0 3px,#b6bec9 3px 6px); }

.lm-cart { position:absolute; z-index:2; left:0; right:0; bottom:6px; justify-content:center; border-radius:0 !important; display:flex; align-items:center; gap:1.1rem; padding:.45rem 1.3rem .5rem; color:var(--ink);
  background:linear-gradient(rgba(251,246,234,.94),rgba(241,230,207,.94)); border-radius:3px; transition:opacity .6s;
  box-shadow:inset 0 0 0 4px rgba(251,246,234,.9), inset 0 0 0 5px rgba(184,145,58,.7), inset 0 0 0 7px rgba(251,246,234,.9), inset 0 0 0 8px rgba(184,145,58,.4), 0 18px 30px -18px rgba(10,40,50,.7); }
:root[data-theme="dark"] .lm-cart { background:linear-gradient(rgba(35,42,54,.95),rgba(27,33,44,.95)); }
/* no side diamonds on the strip */

.lm-cart .ar { margin:0; font-family:var(--arabic); direction:rtl; text-align:left; font-size:clamp(.8rem,1.1vw,1rem); line-height:1.9; color:#6b4f1d; }
@media (max-width:1100px) { .lm-cart .fig { display:none; } }
:root[data-theme="dark"] .lm-cart .ar { color:#e3c77e; }
.lm-cart h1 { margin:0; font-size:clamp(1rem,1.6vw,1.35rem); line-height:1.15; white-space:nowrap; }
.lm-cart .fig { display:grid; gap:.3rem; padding-left:1.1rem; border-left:1px solid rgba(184,145,58,.55); font-size:.8rem; color:var(--en-ink2); white-space:nowrap; }
.lm-cart .kinds { display:flex; gap:.8rem; margin:0; } .lm-cart .kinds b { font-weight:400; font-size:1.02rem; color:#8e2a4c; margin-right:.15rem; }
:root[data-theme="dark"] .lm-cart .kinds b { color:#f0a8bf; }
.lm-cart .sv { display:flex; align-items:center; gap:.55rem; } .lm-cart .surv { width:7rem; display:flex; height:5px; gap:2px; border-radius:999px; overflow:hidden; }
.lm-cart .k { display:inline-flex; align-items:center; gap:.25rem; color:var(--ink); font-weight:700; } .lm-cart .k i { width:.55rem; height:.55rem; border-radius:2px; }
.lm-cart .go { display:grid; gap:.15rem; margin:0; padding-left:1.1rem; border-left:1px solid rgba(184,145,58,.55); font-size:.82rem; white-space:nowrap; }
.lm-cart .go a { color:#0b6d79; text-decoration:none; }

@media (prefers-reduced-motion: reduce) { .lm-world, .lm-info { transition:none; } }
@media (max-width:760px) { .lm-stage { position:relative; inset:auto; aspect-ratio:12 / 7; } .lm-info { width:auto; min-height:0; font-size:.8rem; padding:.4rem .6rem; } .lm-info .hd b { font-size:1.2rem; } .lm-cart { background:linear-gradient(var(--en-paper1),var(--en-paper2)) !important; } .lm { overflow:visible; } .lm-gilt { position:relative; } .lm-cart { flex-wrap:wrap; gap:.6rem 1.2rem; padding:.8rem 1rem .9rem; } .lm-cart .fig, .lm-cart .go { display:grid; border-left:0; padding-left:0; } .lm-cart .go { display:flex; gap:1rem; } .lm-cart { position:relative; left:auto; bottom:auto; transform:none; margin:-1px 0 0; border-radius:0; justify-content:space-between; } .lm-cart::before, .lm-cart::after { display:none; } .lm { height:auto; min-height:0; } .lm-world { position:relative; } .lm-sv { flex-wrap:wrap; } .lm-sv .surv { flex-basis:100%; } .key { flex-wrap:wrap; } }

/* lighter image on small screens */
@media (max-width: 760px) { .lm-map, .lm-col { background-image:url(img/home-map-small.webp?v=5); } }

.lm-info{width:min(15rem,calc(100% - 24px));max-width:calc(100% - 24px)}.lm-info .hd{flex-wrap:wrap}.lm-info .ln{flex-wrap:wrap;white-space:normal}.lm-pause{position:absolute;z-index:4;inset-block-start:.7rem;inset-inline-end:.7rem;border:1px solid #b8913a;border-radius:999px;padding:.3rem .8rem;background:var(--en-paper1);color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer}.lm-cart .go a{color:var(--en-link)}.lm-world{direction:ltr}.lm-info .hd span{line-height:2}
@media(prefers-reduced-motion:reduce){.lm-col,.lm-map{transition:none}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .lm-info{background:rgba(23,32,48,.7)}:root:not([data-theme=light]) .lm-cart{background:linear-gradient(rgba(35,42,54,.95),rgba(27,33,44,.95))}:root:not([data-theme=light]) .lm-cart .ar{color:#e3c77e}}
.home-page .lm{margin-top:0}.home-page:has(.lm) header.site::after{display:none}

:root[data-theme="dark"] .lm-info{background:rgba(23,32,48,.82)}
:root[data-theme="dark"] .lm-info .hd span{color:#e3c77e}
:root[data-theme="dark"] .lm-info .ln{color:#d6dfeb}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .lm-info{background:rgba(23,32,48,.82)}:root:not([data-theme=light]) .lm-info .hd span{color:#e3c77e}:root:not([data-theme=light]) .lm-info .ln{color:#d6dfeb}}

@media(min-width:1101px){.lm-cart{justify-content:space-between}.lm-cart .go{display:flex;gap:1.3rem;align-items:center}}

.lm-coast{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* playback controls: pause / play and speed (1x, 1.5x, 2x), a small glass pill top-right of the map */
.lm-ctl { position:absolute; z-index:4; top:12px; right:12px; display:flex; align-items:center; gap:2px; padding:3px; border-radius:999px;
  background:rgba(10,10,12,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px rgba(227,199,126,.45); }
.lm-ctl button { display:grid; place-items:center; min-width:2rem; height:2rem; padding:0 .55rem; border:0; border-radius:999px; background:transparent;
  color:#f3e6c4; font:600 .82rem/1 var(--serif, Georgia, serif); letter-spacing:.02em; cursor:pointer; }
.lm-ctl button:hover { background:rgba(227,199,126,.18); }
.lm-ctl button:focus-visible { outline:2px solid #e3c77e; outline-offset:1px; }
.lm-ctl .sep { width:1px; height:1.1rem; background:rgba(227,199,126,.45); }
#lm-play::before { content:""; width:.7rem; height:.75rem; background:linear-gradient(90deg,#f3e6c4 0 35%,transparent 35% 65%,#f3e6c4 65%); }      /* pause bars */
#lm-play[aria-pressed="true"]::before { width:.7rem; height:.8rem; background:#f3e6c4; clip-path:polygon(10% 0,100% 50%,10% 100%); } /* play triangle */
#lm-speed { min-width:2.6rem; font-variant-numeric:tabular-nums; }
@media (max-width:760px) { .lm-ctl { top:8px; right:8px; } .lm-ctl button { height:1.8rem; min-width:1.8rem; } }