/* base.css reset, body, engraved plate frame Extracted from map/index.html (2026-08) to shrink the index and give agents smaller, named CSS to parse. */ :root { --ink:#3a2c1a; --ink-soft:#544029; --line:#b7a17e; --panel:#efe4c8; --panel-edge:#c8b48a; } * { box-sizing:border-box; } html,body { margin:0; height:100%; font-family:'EB Garamond',Georgia,serif; color:var(--ink); } #map { position:absolute; inset:0; background:#e9ddc2; } /* parchment, not bluish-grey — kills the load-time flash */ /* Parchment "unrolling the map…" placeholder — covers the initial tile/dot pop-in, then cross-fades out */ #mapLoading { position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; background:#e9ddc2; color:var(--ink-soft); font-family:'IM Fell English',serif; font-size:16px; letter-spacing:.5px; transition:opacity .55s ease; pointer-events:auto; cursor:pointer; } #mapLoading.done { opacity:0; pointer-events:none; } /* --- opening overture: a soft, BLURRED map backdrop with a focused title cartouche --- */ /* No motion on the map (removed the unroll — it flickered). The blurred atlas view is a calm backdrop; the cartouche fades in gently, then .done cross-fades to the live map. */ #mapLoading { overflow:hidden; } .ml-map { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(10px) sepia(.22) saturate(.9) brightness(1.03) contrast(.95); transform:scale(1.08); } .ml-veil { position:absolute; inset:0; pointer-events:none; background:radial-gradient(135% 135% at 50% 46%, rgba(233,221,194,.12) 26%, rgba(233,221,194,.5) 66%, rgba(233,221,194,.85) 100%); } #mapLoading .ml-inner { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; opacity:1; } .ml-cartouche { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:38px 84px 32px; background:rgba(247,237,201,.97); box-shadow:inset 0 0 0 3px #f2e7c4, inset 0 0 0 4px #6b5330, 0 14px 50px rgba(60,40,20,.34); opacity:0; transform:translateY(6px); animation:mlPlate 1.1s cubic-bezier(.2,.7,.3,1) .35s forwards; } /* the real seven-ray Pliska rosette (photo, grey museum bg floodfilled to parchment) — blends into the box */ .ml-emblem { width:86px; height:auto; } .ml-credit { position:absolute; left:0; right:0; bottom:16px; text-align:center; z-index:2; pointer-events:none; font-family:'EB Garamond',Georgia,serif; font-size:11px; letter-spacing:.2px; color:var(--ink-soft); opacity:.82; } .ml-title { font-family:'Ponomar','EB Garamond',Georgia,serif; font-size:46px; letter-spacing:.5px; color:var(--ink); line-height:1.05; } .ml-sub { font-family:'Ponomar','EB Garamond',Georgia,serif; font-size:19px; letter-spacing:.3px; color:var(--ink-soft); line-height:1.1; } @keyframes mlPlate { to { opacity:1; transform:translateY(0); } } /* returning visitor (same tab) + reduced motion → cartouche shown instantly, no fade */ #mapLoading.ml-skip .ml-cartouche { animation:none; opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { .ml-cartouche { animation:none !important; opacity:1 !important; transform:none !important; } } /* focus banner — labels the pulsing blue focus-rings (author / matched works); the ◎ is the same blue as the rings */ #focusBanner { position:absolute; z-index:4; top:16px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; max-width:min(82vw,560px); padding:6px 8px 6px 15px; background:var(--panel); border:1px solid var(--panel-edge); border-radius:22px; box-shadow:0 2px 10px rgba(40,25,5,.28); font-family:'EB Garamond',Georgia,serif; font-size:14.5px; color:var(--ink); } #focusBanner[hidden] { display:none; } #focusBanner #focusBannerTxt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #focusBanner .fb-ring { color:#1d6fb8; font-weight:600; } #focusBanner .fb-off { color:#8a5312; font-style:italic; } #focusBanner b { font-weight:600; } #focusBannerClear { flex:0 0 auto; width:23px; height:23px; line-height:1; padding:0; cursor:pointer; border:1px solid var(--panel-edge); border-radius:50%; background:#f7f0dc; color:var(--ink-soft); font-size:12px; } #focusBannerClear:hover { background:#eadfbf; color:var(--ink); } #errbanner { display:none; position:absolute; z-index:50; top:0; left:0; right:0; padding:8px 14px; background:#8a2b1e; color:#fff; font-family:system-ui,sans-serif; font-size:13px; text-align:center; } /* engraved plate border (Ortelius-style) */ #frame { position:absolute; inset:10px; pointer-events:none; z-index:2; border:1.5px solid #6b5330; box-shadow: inset 0 0 0 3px #e9ddc2, inset 0 0 0 5px #6b5330, inset 0 0 46px rgba(90,60,20,.14), 0 0 0 12px #e9ddc2, 0 0 0 13px #6b5330; border-radius:2px; } #patina { position:absolute; inset:0; pointer-events:none; z-index:2; background: radial-gradient(120% 120% at 50% 40%, rgba(0,0,0,0) 48%, rgba(74,48,15,.36) 100%), repeating-linear-gradient(0deg, rgba(92,72,40,.055) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(92,72,40,.03) 0 1px, transparent 1px 6px), url("data:image/svg+xml;utf8,"); mix-blend-mode:multiply; opacity:.3; } .panel { position:absolute; z-index:3; background:var(--panel); border:1px solid var(--panel-edge); border-radius:6px; box-shadow:0 2px 10px rgba(40,25,5,.28); } #title { top:14px; left:14px; padding:10px 16px; max-width:330px; } #title h1 { margin:0; font-family:'Ponomar','IM Fell English',serif; font-size:23px; letter-spacing:.5px; } #title p { margin:4px 0 0; font-size:13.5px; color:var(--ink-soft); font-style:italic; } #title h1 { cursor:pointer; user-select:none; } #title .sub-caret { font-size:12px; font-style:normal; color:var(--ink-soft); margin-left:7px; opacity:.9; vertical-align:middle; } #title h1:hover .sub-caret { opacity:1; } #title.sub-collapsed p { display:none; }