:root { --bg-dark: #0c0e0c; --bg-dark-2: #1c1917; --text-light: #f5f5f4; --text-light-2: #e7e5e4; --accent-sky: #0284c7; --accent-sky-bright: #38bdf8; --parchment-1: #f4ecdb; --parchment-2: #e6d9bd; --parchment-ink: #2c2013; --sepia: #8a6d3b; --sepia-dark: #6b5227; --border-brown: #7c6a52; --panel-bg: #faf5e8; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; background: var(--bg-dark-2); color: var(--text-light); display: flex; flex-direction: column; min-height: 100%; } /* The site-wide navbar (from quantum-lynx.css) normally inherits its font-family from , but this page's own rule below sets a different font for the manuscript content - so the navbar needs its own explicit font-family to actually match the real site's header. */ .navbar { font-family: "Kanit", sans-serif; } /* ---------- Main layout ---------- */ .app-main { flex: 1; display: grid; grid-template-columns: minmax(240px, 340px) minmax(320px, 600px) 215px; justify-content: center; gap: 1.25rem; padding: 1.5rem; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(20,14,6,0.35) 100%), linear-gradient(160deg, var(--parchment-1), var(--parchment-2)); color: var(--parchment-ink); align-items: start; } .page-title { grid-column: 1 / -1; margin: 0; font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 2.1rem; font-weight: 700; color: var(--sepia-dark); text-align: center; } /* This page is now "By Invite" access-gated (see routes_marci_map.py) - matches the .private-banner treatment on the main site's Project/ Resource detail pages (quantum-lynx.css). */ .private-badge { grid-column: 1 / -1; justify-self: center; margin-bottom: 0.5rem; background: #dc2626; color: #ffffff; padding: 0.4rem 1rem; font-weight: 700; letter-spacing: 0.08em; border-radius: 0.25rem; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; } .manuscript-panel { background: var(--panel-bg); border: 1px solid var(--border-brown); border-radius: 6px; box-shadow: 0 3px 14px rgba(40, 28, 10, 0.25), inset 0 0 0 4px #fffdf6; position: relative; padding: 1.1rem 1.3rem; } .manuscript-panel::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(138, 109, 59, 0.55); border-radius: 3px; pointer-events: none; } .corner-flourish { position: absolute; width: 14px; height: 14px; border: 2px solid var(--sepia); pointer-events: none; } .corner-flourish.tl { top: 3px; left: 3px; border-right: none; border-bottom: none; } .corner-flourish.tr { top: 3px; right: 3px; border-left: none; border-bottom: none; } .corner-flourish.bl { bottom: 3px; left: 3px; border-right: none; border-top: none; } .corner-flourish.br { bottom: 3px; right: 3px; border-left: none; border-top: none; } /* ---------- Left: article panel ---------- */ .article-panel { display: flex; flex-direction: column; max-height: calc(100vh - 220px); } .intro-link { align-self: flex-start; margin-bottom: 0.6rem; padding: 0; border: none; background: none; color: var(--accent-sky); font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 0.9rem; font-style: italic; cursor: pointer; } .intro-link:hover { text-decoration: underline; } #article-content { overflow-y: auto; padding-right: 0.35rem; font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; line-height: 1.55; } #article-content.loading { opacity: 0.55; } #article-content h1 { font-size: 1.3rem; color: var(--sepia-dark); border-bottom: 1px solid var(--border-brown); padding-bottom: 0.35rem; margin-top: 0; } #article-content h2, #article-content h3 { color: var(--sepia-dark); } #article-content a { color: var(--accent-sky); text-decoration: underline; } /* ---------- Center: image stage ---------- */ .stage-panel { display: flex; justify-content: center; } #stage { position: relative; width: 100%; max-width: 600px; aspect-ratio: 519 / 689; } #stage img, #stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; } #base-image { position: relative; border-radius: 3px; } #overlay-layer img { pointer-events: none; transition: opacity 0.25s ease; /* Some overlay source files are opaque, with a white background rather than real transparency; multiply blending makes white (and transparent) areas invisible in both cases, showing only the drawn linework/tint. */ mix-blend-mode: multiply; } #active-highlight, #hover-highlight { pointer-events: none; } /* ---------- Right: toggle controls ---------- */ .controls-panel { display: flex; flex-direction: column; gap: 0.6rem; } #toggle-panel { display: flex; flex-direction: column; gap: 0.6rem; } .controls-panel h2 { margin: 0 0 0.2rem 0; font-size: 0.95rem; color: var(--sepia-dark); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-brown); padding-bottom: 0.35rem; } .toggle-btn { font-family: inherit; font-size: 0.92rem; text-align: left; padding: 0.55rem 0.7rem; background: linear-gradient(180deg, #fffdf6, #e9dcbd); border: 1px solid var(--border-brown); border-radius: 4px; color: var(--parchment-ink); cursor: pointer; box-shadow: 0 2px 0 var(--border-brown), 0 3px 5px rgba(0,0,0,0.15); transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease; } .toggle-btn:hover { background: linear-gradient(180deg, #fffdf6, #f1e6c9); } .toggle-btn:focus-visible { outline: 2px solid var(--accent-sky); outline-offset: 2px; } .toggle-btn.active { background: linear-gradient(180deg, #0369a1, #0284c7); color: #fff; border-color: #075985; transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.45); } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-dark); color: var(--text-light-2); text-align: center; padding: 0.9rem 1rem; font-size: 0.82rem; border-top: 3px solid var(--sepia-dark); } .site-footer p { margin: 0.15rem 0; } .site-footer .image-credit { font-size: 0.7rem; font-style: italic; margin-top: 0.4rem; } /* ---------- Error banner ---------- */ #load-error { margin: 1rem 1.5rem 0; padding: 0.9rem 1.1rem; background: #fef2f2; border: 1px solid #b91c1c; color: #7f1d1d; border-radius: 4px; font-size: 0.92rem; } /* ---------- Responsive ---------- */ @media (max-width: 880px) { .app-main { grid-template-columns: 1fr; justify-content: stretch; } .article-panel { max-width: none; max-height: 40vh; } #toggle-panel { flex-direction: row; flex-wrap: wrap; } .toggle-btn { flex: 1 1 45%; } }