/* MEMORISE aesthetic — sober archival greige + muted bronze, Montserrat. Mirrors docs-site/stylesheets/brand.css so the test UI matches the docs. */ :root { color-scheme:light; /* declare light so mobile browsers never force-dark the page */ --greige:#6B6457; --taupe:#423D34; --bronze:#A8895B; --link:#8A6F3F; --bg:#FAF8F4; --surface:#ffffff; --code:#F2EFE9; --border:#E0D8C9; --ink:#2b2820; --mut:#7a7464; --sage:#5E7355; --slate:#4F6276; --brick:#9C5B4F; --shadow:0 8px 26px rgba(107,100,87,.16); --serif:'Source Serif 4',Georgia,serif; /* text-first content (brief §5.1) */ } /* Light is the default. Dark is opt-in via (not auto from OS). */ :root[data-theme="dark"] { color-scheme:dark; --taupe:#E8E4DC; --bronze:#CDB78C; --link:#CDB78C; --bg:#1C1B18; --surface:#26241F; --code:#26241F; --border:#3A372F; --ink:#E8E4DC; --mut:#A89F8E; --shadow:0 8px 26px rgba(0,0,0,.4); } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:Montserrat,system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); } h1,h2,h3,h4 { font-weight:600; letter-spacing:-0.01em; color:var(--taupe); margin:0; } a { color:var(--link); text-decoration:none; } small { color:var(--mut); } /* ---- top bar ---- */ .topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:12px 28px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); } .brand { font-weight:600; letter-spacing:.02em; color:var(--taupe); font-size:17px; } .brand .dot { color:var(--bronze); } .spacer { flex:1; } .pill { font-size:12px; color:var(--mut); border:1px solid var(--border); border-radius:999px; padding:4px 12px; background:var(--surface); } .navlink { font-size:13px; color:var(--link); border:1px solid var(--border); border-radius:999px; padding:5px 14px; } .navlink:hover { border-color:var(--bronze); } /* ---- buttons / inputs ---- */ button { font-family:inherit; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:9px; padding:8px 14px; cursor:pointer; font-size:13px; transition:border-color .15s,transform .08s; } button:hover { border-color:var(--bronze); } button:active { transform:translateY(1px); } button.primary { background:var(--bronze); color:#221a0c; border-color:transparent; font-weight:600; } :root[data-theme="dark"] button.primary{ color:#1c1b18; } input { font-family:inherit; background:var(--surface); border:1px solid var(--border); color:var(--ink); border-radius:8px; padding:8px 10px; font-size:13px; } input:focus { outline:none; border-color:var(--bronze); } /* ---- banner ---- */ .banner { margin:18px 28px; padding:14px 18px; border:1px solid var(--bronze); border-radius:12px; background:var(--code); color:var(--ink); font-size:14px; display:flex; gap:12px; align-items:center; } .banner.hidden { display:none; } /* ---- steering chips ---- */ .steer { display:flex; gap:10px; flex-wrap:wrap; padding:18px 28px 4px; align-items:center; } .chip { font-size:13px; color:var(--mut); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 14px; cursor:pointer; transition:all .15s; } .chip:hover { border-color:var(--bronze); color:var(--ink); } .chip.active { background:var(--bronze); color:#221a0c; border-color:transparent; font-weight:600; } :root[data-theme="dark"] .chip.active{ color:#1c1b18; } /* ---- sections + grid ---- */ section { padding:8px 28px 28px; } .sec-head { display:flex; align-items:baseline; gap:12px; margin:18px 0 14px; } .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; } .card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; cursor:pointer; transition:border-color .2s,box-shadow .2s,transform .2s; } .card:hover { border-color:var(--bronze); box-shadow:var(--shadow); transform:translateY(-3px); } .card .thumb { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--code); } /* placeholder for items with no Omeka image — typographic, never a stock photo */ .thumb.ph { display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg, var(--code), color-mix(in srgb,var(--greige) 22%, var(--code))); border-bottom:1px solid var(--border); } .thumb.ph span { font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--greige); text-transform:uppercase; padding:0 12px; } :root[data-theme="dark"] .thumb.ph span { color:var(--mut); } .card .body { padding:13px 15px 15px; } .card h4 { font-size:15.5px; line-height:1.3; margin-bottom:8px; } .card .meta { display:flex; gap:7px; flex-wrap:wrap; } .tag { font-size:11px; color:var(--mut); background:var(--code); border:1px solid var(--border); border-radius:999px; padding:2px 9px; } .tag.period { color:var(--bronze); border-color:color-mix(in srgb,var(--bronze) 40%,var(--border)); } .tag.score { color:#fff; background:var(--bronze); border:none; font-weight:600; } /* hero: first card spans two columns, taller */ .card.hero { grid-column:span 2; } .card.hero .thumb { aspect-ratio:21/9; } .card.hero h4 { font-size:21px; } @media (max-width:640px){ .card.hero{ grid-column:span 1; } } /* hover quick-actions (guide §2.3) */ .quick { position:absolute; top:10px; right:10px; display:flex; gap:6px; opacity:0; transition:opacity .15s; } .card:hover .quick { opacity:1; } .quick button { padding:5px 9px; font-size:12px; background:color-mix(in srgb,var(--surface) 88%,transparent); } .quick .no:hover { border-color:var(--brick); color:var(--brick); } /* ---- reader overlay ---- */ /* NOTE: no backdrop-filter (and no transform/perspective/filter) directly on .reader — any of those make it the containing block for position:fixed children and the nav buttons start scrolling with the content. The blur lives on a ::before with no descendants instead. */ .reader { position:fixed; inset:0; background:rgba(40,36,30,.6); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; } .reader::before { content:""; position:fixed; inset:0; backdrop-filter:blur(3px); pointer-events:none; } .reader.hidden { display:none; } .reader-card { background:var(--surface); width:min(720px,96vw); max-height:90vh; overflow:auto; border-radius:18px; border:1px solid var(--border); box-shadow:var(--shadow); } .reader-card .thumb { width:100%; aspect-ratio:21/9; object-fit:cover; } .reader-body { padding:22px 26px 26px; } .reader-body h3 { font-size:24px; margin-bottom:10px; } .reader-body p { line-height:1.7; color:var(--ink); } .reader-chips { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0; } .reader-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; } /* ---- debug drawer ---- */ .drawer-toggle { position:fixed; bottom:20px; right:20px; z-index:30; border-radius:999px; box-shadow:var(--shadow); } .drawer { position:fixed; top:0; right:0; width:380px; max-width:90vw; height:100vh; z-index:40; background:var(--surface); border-left:1px solid var(--border); padding:16px 18px; overflow:auto; transform:translateX(100%); transition:transform .25s; } .drawer.open { transform:translateX(0); } .drawer h3 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--bronze); margin:14px 0 8px; } .drawer pre { white-space:pre-wrap; word-break:break-word; font-family:'Roboto Mono',monospace; font-size:11px; color:var(--mut); background:var(--code); border:1px solid var(--border); border-radius:10px; padding:10px; margin:0; max-height:36vh; overflow:auto; } .evt { font-weight:700; font-size:10px; padding:1px 6px; border-radius:5px; color:#fff; } .evt.start{ background:var(--slate); } .evt.end{ background:var(--sage); } .evt.neg{ background:var(--brick); } .evt.sys{ background:var(--bronze); } /* ---- set/cluster component (brief §4, layout A: anchor + ledger) ---- One anchor visual; members are a text-only numbered ledger, so an imageless member is structurally equal to one with an image (brief §5). No member thumbnails, no hover lift — pacing stays quiet (brief §2). */ .set-openers { display:flex; gap:10px; flex-wrap:wrap; } .opener { font-family:var(--serif); font-size:14.5px; padding:10px 18px; border-radius:12px; } .opener small { font-family:Montserrat,sans-serif; color:var(--mut); margin-left:4px; } .set-card { width:min(640px,96vw); } .set-head { padding:20px 26px 16px; border-bottom:1px solid var(--border); } .kicker { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--bronze); } .set-head h3 { font-size:23px; margin:6px 0 4px; } .set-anchor { margin:0; border-bottom:1px solid var(--border); } .set-anchor img { width:100%; aspect-ratio:21/9; object-fit:cover; display:block; } .set-anchor figcaption { font-family:var(--serif); font-style:italic; font-size:13px; color:var(--mut); padding:9px 26px 11px; } /* non-photographic anchor: typographic treatment (brief §5.2) — never a stock image */ .anchor-typo { display:flex; flex-direction:column; gap:7px; justify-content:center; min-height:130px; padding:26px; background:linear-gradient(135deg, var(--code), color-mix(in srgb,var(--greige) 14%, var(--code))); } .anchor-typo .line1 { font-family:var(--serif); font-size:27px; color:var(--taupe); } .anchor-typo .line2 { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); } .ledger { list-style:none; margin:0; padding:4px 26px; } .ledger li { display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--border); cursor:pointer; } .ledger li:last-child { border-bottom:none; } .ledger .num { font-family:'Roboto Mono',monospace; font-size:12px; color:var(--bronze); padding-top:5px; min-width:16px; } .ledger .m-title { font-family:var(--serif); font-size:16.5px; line-height:1.35; color:var(--ink); transition:color .15s; } .ledger li:hover .m-title { color:var(--link); } .ledger .m-excerpt { font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--mut); margin-top:3px; } .ledger .m-absence { font-family:var(--serif); font-style:italic; font-size:13px; color:var(--mut); margin-top:5px; } .ledger .meta { margin-top:7px; } /* honest truncation line — shown only when the set is genuinely larger (brief §4: never a full wall) */ .set-rest { font-family:var(--serif); font-style:italic; font-size:14px; color:var(--mut); margin:2px 0 0; padding:4px 26px 0; } .set-actions { display:flex; gap:10px; padding:18px 26px 24px; } /* set context inside the reader */ .set-context { display:block; font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--bronze); margin-bottom:9px; } .set-context.hidden { display:none; } /* ================= memorial hybrid (single surface, adaptive emphasis) ================= */ main { max-width:1060px; margin:0 auto; } /* brand separator: a drawn dot, not a font glyph — renders the same everywhere */ .brand .dot { display:inline-block; width:4px; height:4px; border-radius:999px; background:var(--bronze); margin:0 7px; vertical-align:middle; position:relative; top:-1px; } /* slim, palette-matched scrollbars everywhere — the OS default reads as chrome, not memorial */ * { scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--greige) 34%, transparent) transparent; } /* overlays scroll as a page behind the card, never inside it: no scrollbar slicing the card's rounded corners, long stories read like a sheet */ .reader { overflow-y:auto; align-items:flex-start; padding:48px 20px; } /* overflow:hidden clips images to the rounded corners; the backdrop scrolls, not the card */ .reader-card { max-height:none; overflow:hidden; margin:0 auto; } /* facet chips: sit on the grid's left edge, tucked under the section head */ #stories-sec .steer { padding:0 0 16px; } /* topbar search: always present, prominence follows the lean (guide §4.2) */ .search-inline { display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:5px 14px; transition:border-color .2s; } .search-inline:focus-within { border-color:var(--bronze); } .s-ico { color:var(--mut); font-size:15px; } .search-inline input { border:none; background:none; padding:4px 0; width:150px; transition:width .25s ease; } .search-inline input:focus { outline:none; width:240px; } body.lean-searcher .search-inline input { width:300px; } /* reader nav: controls float in the shadowed area, fixed so they never scroll away */ /* fixed at viewport center vertically; horizontally centered in the gutter between the browser edge and the card edge (card = min(720px, 96vw)) */ .r-nav { position:fixed; top:50%; z-index:60; display:flex; flex-direction:column; align-items:center; gap:14px; } .r-left { left:calc((100vw - min(720px, 96vw)) / 4); transform:translate(-50%, -50%); } .r-right { right:calc((100vw - min(720px, 96vw)) / 4); transform:translate(50%, -50%); } /* bare bronze glyphs floating in the shadow — no chrome, just presence */ .r-btn { padding:12px; border:none; background:none; box-shadow:none; display:flex; align-items:center; justify-content:center; color:color-mix(in srgb, var(--bronze) 82%, #fff); opacity:.68; filter:drop-shadow(0 1px 6px rgba(20,17,12,.4)); transition:opacity .45s ease, transform .45s cubic-bezier(.22,.68,.2,1), color .35s ease; } .r-btn svg { width:64px; height:64px; } /* prev/next chevrons, aligned at viewport centre */ .r-btn.r-sm svg { width:42px; height:42px; } /* home + return-to-set, the top row */ /* home + return-to-set: a row almost at the top of the left gutter */ .r-top { position:fixed; top:88px; left:calc((100vw - min(720px, 96vw)) / 4); transform:translateX(-50%); z-index:60; display:flex; flex-direction:row; gap:12px; } .r-btn:hover { background:none; border:none; opacity:1; color:#E8D5B5; transform:scale(1.06); } .r-btn:active { transform:scale(1.0); } /* hovering the shadowed area (not the card) gently wakes the controls */ @keyframes nudge-l { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-3px); } } @keyframes nudge-r { 0%,100% { transform:translateX(0); } 50% { transform:translateX(3px); } } #reader:hover:not(:has(.reader-card:hover)) .r-btn { opacity:.95; } #reader:hover:not(:has(.reader-card:hover)) #rn-back { animation:nudge-l 2.2s ease-in-out 1; } #reader:hover:not(:has(.reader-card:hover)) #rn-next { animation:nudge-r 2.2s ease-in-out 1; } .r-next-title { max-width:130px; text-align:center; font-family:var(--serif); font-size:12.5px; line-height:1.4; color:#F0EBE1; text-shadow:0 1px 8px rgba(40,36,30,.7); } /* phones: no side gutters, so the controls become thumb-reachable circles in a bottom bar, with a legible surface chip (over content, not empty shadow) */ @media (max-width:640px) { .r-top, .r-left, .r-right { position:fixed; top:auto; bottom:16px; transform:none; flex-direction:row; gap:10px; z-index:60; } .r-top { left:16px; right:auto; } /* home + back, bottom-left */ .r-left { left:auto; right:74px; } /* prev, bottom-right pair */ .r-right { left:auto; right:16px; } /* next */ .r-next-title { display:none; } .r-btn { opacity:1; filter:none; padding:9px; background:color-mix(in srgb, var(--surface) 90%, transparent); border:1px solid var(--border); border-radius:999px; backdrop-filter:blur(6px); } .r-btn:hover, .r-btn:active { transform:none; } .r-btn svg, #rn-back svg, #rn-close svg { width:26px !important; height:26px !important; } .r-btn.r-sm svg { width:24px !important; height:24px !important; } } /* page turn: the card folds like a book page around its left edge. perspective lives INSIDE the card's transform — a perspective on #reader would become the containing block for the fixed nav and scroll it away */ #reader .reader-card { transform-origin:left center; transform:perspective(1700px) rotateY(0deg); transition:transform .36s cubic-bezier(.55,0,.85,.4), opacity .36s ease-in; } #reader .reader-card.flip-out { transform:perspective(1700px) rotateY(-78deg); opacity:.1; } #reader .reader-card.flip-in { transform:perspective(1700px) rotateY(55deg); opacity:0; } #reader .reader-card.snap { transition:none !important; } #reader .reader-card:not(.flip-out):not(.flip-in) { transition:transform .5s cubic-bezier(.16,.6,.3,1), opacity .4s ease-out; } /* following a Connected link: soft cross-fade with a slight drift */ #reader .reader-card.fade-out { opacity:0; transform:perspective(1700px) translateY(10px); transition:opacity .26s ease-in, transform .26s ease-in; } #reader .reader-card.fade-in { opacity:0; transform:perspective(1700px) translateY(-10px); } /* going back leafs the opposite way, around the right edge */ #reader .reader-card.rev { transform-origin:right center; } #reader .reader-card.rev.flip-out { transform:perspective(1700px) rotateY(78deg); } #reader .reader-card.rev.flip-in { transform:perspective(1700px) rotateY(-55deg); } /* overlay close: one × on the card; backdrop click also closes */ .reader-card { position:relative; } /* the set card breathes in when shown — returning from a story is a step, not a jolt */ @keyframes card-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } } #setview:not(.hidden) .set-card { animation:card-in .38s cubic-bezier(.2,.7,.25,1); } .reader-card .x { position:absolute; top:10px; right:10px; z-index:5; width:32px; height:32px; padding:0; border-radius:999px; font-size:17px; line-height:30px; text-align:center; color:var(--ink); background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(4px); } .reader-card .x:hover { border-color:var(--bronze); } /* recent searches: quiet panel in the house style (native datalist can't be styled) */ .search-inline { position:relative; } .q-recent { position:absolute; top:calc(100% + 8px); right:-1px; min-width:280px; z-index:40; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; } .qr-head { font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--mut); padding:7px 10px 5px; } .q-recent button { display:flex; align-items:center; gap:9px; width:100%; border:none; background:none; padding:8px 10px; border-radius:8px; font-size:13.5px; color:var(--ink); text-align:left; } .q-recent button:hover { background:var(--code); border:none; } .q-recent .qi { color:var(--mut); font-size:13px; } /* hook: one story leads (brief §2); compresses when the lean turns searcher */ .hook { padding:34px 28px 10px; } .hook .kicker { font-size:12px; } .hook-title { font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.2; margin:10px 0 12px; color:var(--taupe); letter-spacing:0; } .hook-period { color:var(--mut); } .hook-dek { font-family:var(--serif); font-size:17px; line-height:1.65; color:var(--ink); max-width:64ch; margin:0 0 16px; } .hook-read { border:none; background:none; padding:6px 0; font-size:14.5px; font-weight:600; color:var(--link); } .hook-read .arr { transition:transform .15s; display:inline-block; } .hook-read:hover .arr { transform:translateX(3px); } .hook-where { display:flex; align-items:center; gap:12px; margin-top:18px; padding:12px 16px; border-radius:12px; text-align:left; } .hook-where .w-ico { font-size:18px; color:var(--bronze); } .hook-where strong { display:block; font-size:13.5px; font-weight:600; } .hook-where small { color:var(--mut); } body.lean-searcher .hook { padding-top:20px; } body.lean-searcher .hook-title { font-size:22px; } /* compress, don't remove: the dek clamps to one line, the story stays inviting */ body.lean-searcher .hook-dek { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-size:15px; } body.lean-searcher .hook-where { display:none; } /* doors: framed ways in, with quiet glyphs (no icon set exists — unicode, as elsewhere) */ #ways-sec { padding-top:0; } .ways { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; } .way { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; text-align:left; } .way .w-ico { font-size:17px; color:var(--bronze); min-width:20px; text-align:center; } .way span:last-child { font-size:14px; font-weight:500; color:var(--ink); } .way small { display:block; font-weight:400; color:var(--mut); margin-top:2px; } body.lean-searcher .ways { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); } body.lean-searcher .way { padding:9px 13px; } body.lean-searcher .way small { display:none; } /* grid cards: serif titles; imageless = designed text card, not a broken image card (§5.1) */ .gtitle { font-family:var(--serif); font-weight:600; letter-spacing:0; } .card { cursor:pointer; } .card:hover { transform:none; box-shadow:none; border-color:var(--bronze); } /* quiet hover */ .tcard .body { padding:18px 18px 16px; } .t-period { font-family:'Roboto Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze); } .t-quote { font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--ink); margin:10px 0 12px; quotes:none; } .tcard .gtitle { font-size:14px; color:var(--mut); font-weight:400; font-style:italic; } .setchip { font-size:11px; color:var(--link); background:var(--code); border:1px solid var(--border); border-radius:999px; padding:2px 9px; } .setchip:hover { border-color:var(--bronze); } .hidden { display:none !important; } /* the lock sits on html: with overflow-x:clip on html, body's overflow no longer propagates to the viewport, so body.locked alone stopped working */ html.locked, html.locked body { overflow:hidden; } /* your path: coverage dots — orientation, not gamification */ .path-card { width:min(620px,96vw); padding-bottom:18px; } .path-head { padding:20px 26px 14px; border-bottom:1px solid var(--border); } .path-head h3 { font-family:var(--serif); font-weight:400; font-size:22px; margin:6px 0 4px; } .path-group h4 { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze); padding:18px 26px 6px; } .path-row { display:flex; align-items:center; gap:14px; padding:8px 26px; } .pr-name { border:none; background:none; padding:0; font-family:var(--serif); font-size:14.5px; color:var(--ink); text-align:left; cursor:pointer; flex:0 0 200px; line-height:1.3; } .pr-name:hover { color:var(--link); } .dots { display:flex; gap:6px; flex-wrap:wrap; flex:1; } .dot { width:11px; height:11px; min-width:11px; border-radius:999px; border:1.5px solid var(--bronze); background:transparent; padding:0; cursor:pointer; transition:transform .12s; } .dot.on { background:var(--bronze); } .dot.half { background:linear-gradient(90deg, var(--bronze) 50%, transparent 50%); } .dot:hover { transform:scale(1.3); border-color:var(--bronze); } .pr-n { font-family:'Roboto Mono',monospace; font-size:11px; color:var(--ink); min-width:42px; text-align:right; } .pr-n.mut { color:var(--mut); } .tag.seen { color:var(--bronze); border-color:color-mix(in srgb,var(--bronze) 45%,var(--border)); background:transparent; } .path-tabs { display:flex; gap:8px; margin-top:14px; } .ptab { font-size:12.5px; border-radius:999px; padding:5px 14px; color:var(--mut); } .ptab.active { background:var(--bronze); color:#221a0c; border-color:transparent; font-weight:600; } :root[data-theme="dark"] .ptab.active { color:#1c1b18; } .map-note { display:block; color:var(--mut); font-size:11.5px; margin-top:8px; } /* the constellation: archival graph-paper field, stories as lights that morph between geography, time, and theme */ #view-path section { padding-top:16px; } .path-back { display:inline-block; margin-bottom:4px; } #path-page .path-head { padding:12px 0 0; } #path-page .path-row { padding:9px 0; } /* full-bleed: the field breaks out of the 1060px column to the browser edges. 100vw includes the vertical scrollbar, so the page clips the few spill pixels */ html, body { overflow-x:clip; } .constellation-wrap { position:relative; margin:20px 0 6px; width:100vw; margin-left:calc(50% - 50vw); padding:0 26px; box-sizing:border-box; } #constellation { position:relative; height:540px; border:1px solid var(--border); border-radius:16px; overflow:hidden; background: radial-gradient(ellipse at 28% 18%, color-mix(in srgb, var(--bronze) 7%, transparent), transparent 62%), repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--greige) 12%, transparent) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--greige) 12%, transparent) 23px 24px), var(--code); } .cnode { position:absolute; left:0; top:0; width:14px; height:14px; border-radius:999px; padding:0; cursor:pointer; border:1.5px solid var(--bronze); background:transparent; transition:transform .9s cubic-bezier(.22,.68,.16,1), background .35s, box-shadow .35s, border-color .2s; } /* no black focus square on tapped lights — a quiet bronze ring instead */ .cnode:focus, .dot:focus, .leaflet-interactive:focus { outline:none; } .cnode:focus-visible, .dot:focus-visible { outline:2px solid color-mix(in srgb, var(--bronze) 55%, transparent); outline-offset:3px; } .cnode.snap { transition:none; } .cnode.on { background:var(--bronze); box-shadow:0 0 11px 2px color-mix(in srgb, var(--bronze) 55%, transparent); } .cnode.half { background:linear-gradient(90deg, var(--bronze) 50%, transparent 50%); box-shadow:0 0 7px 1px color-mix(in srgb, var(--bronze) 30%, transparent); } .cnode:hover { border-color:var(--taupe); box-shadow:0 0 13px 3px color-mix(in srgb, var(--bronze) 70%, transparent); z-index:5; } .clabel { position:absolute; transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); } /* the timeline itself */ .cline { position:absolute; height:1.5px; background:color-mix(in srgb, var(--bronze) 50%, transparent); pointer-events:none; } .ctick { position:absolute; width:1.5px; height:11px; transform:translate(-50%,-50%); background:color-mix(in srgb, var(--bronze) 50%, transparent); pointer-events:none; } .cspacer { position:absolute; pointer-events:none; visibility:hidden; } #constellation.hscroll { overflow-x:auto; overflow-y:hidden; } .ctip { position:absolute; z-index:10; pointer-events:none; white-space:nowrap; transform:translate(-50%, -100%); /* centred above the light, never on it */ background:var(--surface); border:1px solid var(--bronze); border-radius:8px; box-shadow:var(--shadow); padding:5px 11px; font-family:var(--serif); font-size:12.5px; color:var(--ink); } /* miniature story preview on the path page: a glimpse, not the full card */ #path-page { position:relative; } /* anchors the miniature so it scrolls with the page */ /* above the page and the isolated map, below the sticky topbar (z 20) */ .mini { position:absolute; z-index:15; width:300px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; } .mini-thumb { width:100%; aspect-ratio:21/9; object-fit:cover; display:block; } .mini-body { padding:12px 15px 14px; } .mini-body h4 { font-family:var(--serif); font-size:16px; margin:5px 0 6px; } .mini-body p { font-family:var(--serif); font-size:13px; line-height:1.55; color:var(--mut); margin:0 0 12px; } .mini-body .primary { font-size:12.5px; } /* the real map (place axis), skinned to the archive: sepia-washed tiles, bronze lights, serif tooltips — Leaflet as in ai-engine-api /demo */ /* isolation keeps Leaflet's internal z-indexes (400 to 1000) from escaping and covering page-level layers like the miniature */ #lmap { height:540px; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--code); isolation:isolate; } #lmap .leaflet-tile-pane { filter:grayscale(.45) sepia(.34) saturate(.62) brightness(1.05) contrast(.9); } #lmap .leaflet-container { font-family:Montserrat,sans-serif; } .ltip { background:var(--surface) !important; border:1px solid var(--bronze) !important; border-radius:8px !important; box-shadow:var(--shadow) !important; color:var(--ink) !important; font-family:var(--serif) !important; font-size:12.5px !important; padding:5px 11px !important; } .ltip::before { display:none; } #lmap .leaflet-control-attribution { background:color-mix(in srgb, var(--bg) 80%, transparent); color:var(--mut); font-size:9.5px; } #lmap .leaflet-control-zoom a { background:var(--surface); color:var(--taupe); border-color:var(--border); } .lmap-reset { font-family:Montserrat,sans-serif; font-size:12px; color:var(--taupe); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 14px; cursor:pointer; box-shadow:var(--shadow); } .lmap-reset:hover { border-color:var(--bronze); color:var(--bronze); } /* reader prose + onward (the guide) */ .reader-prose { font-family:var(--serif); font-size:16.5px; line-height:1.75; white-space:pre-line; } /* keyword highlights: quiet dotted underline, never a marker yellow */ .kw { background:transparent; color:inherit; border-bottom:1px dotted var(--bronze); cursor:pointer; transition:color .15s; } .kw:hover { color:var(--link); border-bottom-style:solid; } /* hero text card: the anchor slot can be text-first too (§5) */ .tcard.hero .body { padding:26px 28px 20px; } .tcard.hero .t-quote { font-size:21px; line-height:1.5; max-width:58ch; } .onward { margin-top:22px; border-top:1px solid var(--border); padding-top:14px; } .onward h4 { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--bronze); margin-bottom:10px; } .onward a { display:block; font-family:var(--serif); font-size:15px; color:var(--ink); padding:7px 0; cursor:pointer; } .onward a:hover { color:var(--link); } .onward a small { display:block; font-family:Montserrat,sans-serif; font-size:11.5px; color:var(--mut); margin-top:2px; } /* ---- config page ---- */ .config-wrap { max-width:640px; margin:36px auto; padding:0 24px; } .config-wrap .field { margin:16px 0; } .config-wrap label { display:block; font-size:13px; color:var(--mut); margin-bottom:5px; } .config-wrap input { width:100%; } .config-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 26px; box-shadow:var(--shadow); } .row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .muted-note { font-size:12.5px; color:var(--mut); line-height:1.6; } /* ================= phones (≤640px) — fluid, thumb-first, no horizontal spill ================= The desktop layout above is the base; this layer tunes every surface for a single narrow column. Touch targets ≥40px, no fixed widths that exceed the viewport (those were what forced the page wider than the screen). */ @media (max-width:640px) { /* topbar wraps: row 1 = brand + path, row 2 = a full-width search bar. (the shrinking inline search read as broken on a phone) */ .topbar { gap:8px 10px; padding:10px 14px; flex-wrap:wrap; } .brand { font-size:15px; white-space:nowrap; } #path-btn { white-space:nowrap; padding:5px 11px; font-size:12px; } .topbar a.navlink[href="config.html"] { display:none; } .search-inline { order:5; flex:1 1 100%; min-width:0; padding:7px 14px; } .search-inline input, .search-inline input:focus, body.lean-searcher .search-inline input { width:100%; } .q-recent { left:0; right:0; min-width:0; } /* recent-search panel spans the bar */ /* sections / hook */ section { padding:6px 16px 20px; } main { max-width:100%; } .hook { padding:22px 16px 6px; } .hook-title { font-size:26px; } .hook-dek { font-size:15.5px; max-width:none; } .hook-where { padding:11px 13px; } body.lean-searcher .hook-title { font-size:20px; } /* doors + grid collapse to one column */ .ways { grid-template-columns:1fr; gap:10px; } .grid { grid-template-columns:1fr; gap:14px; } .card.hero { grid-column:span 1; } .card.hero .thumb { aspect-ratio:16/10; } .card.hero h4, .tcard.hero .t-quote { font-size:18px; } /* facet chips can scroll sideways instead of stacking tall */ #facets { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; } #facets .chip { flex:0 0 auto; } /* reader: near-full-width sheet; leave room for the bottom control bar */ .reader { padding:10px; padding-bottom:84px; align-items:flex-start; } .reader-card { width:100%; } .reader-body { padding:18px 18px 20px; } .reader-body h3 { font-size:21px; } .reader-prose { font-size:16px; line-height:1.7; } #onward { margin-bottom:8px; } /* set / cluster */ .set-card { width:96vw; } .set-head { padding:16px 18px 12px; } .set-head h3 { font-size:20px; } .ledger { padding:2px 18px; } .set-rest { padding:4px 18px 0; } .set-actions { padding:14px 18px 20px; } /* your path */ .constellation-wrap { padding:0 14px; } #constellation, #lmap { height:62vh; min-height:380px; } .path-tabs { flex-wrap:wrap; } .path-row { flex-wrap:wrap; gap:6px 10px; padding:10px 0; } .pr-name { flex:1 1 100%; } .pr-n { margin-left:auto; } .mini { width:min(300px,92vw); } .ctip { max-width:80vw; white-space:normal; } } /* very small phones */ @media (max-width:380px) { .hook-title { font-size:23px; } #path-btn { font-size:11px; padding:5px 9px; } }