/* The Library — Halloway's dark reading room. * * Shell-only stylesheet (not part of the hunt-engine layer). The Library used to be * the one warm, gilt-and-candle room; it now reads like the rest of the dark * house — a quiet, centered column in cool ink, sleek and minimal, matching the * tone of the Veil and the halls. Everything is namespaced under * body.library-body. Mobile-first: a single centered column of comfortable tap * targets before it ever widens. * * Tactile scene (one invisible source, authored surface): library.js writes the * shared tilt into --lib-x / --lib-y. Here that single signal does one quiet * thing — a cool light drifts across the page like a lamp swinging in the next * room. It goes still under prefers-reduced-motion. */ /* Tilt vars live on :root, where library.js writes them (to documentElement). A body-scoped default would shadow those live values — body sits below , so its own --lib-x/y would win for body::before and freeze the scene at 0. Keep the defaults here so the JS values flow through. */ :root { --lib-x: 0; /* tilt, written by library.js */ --lib-y: 0; } body.library-body { --lib-blue: #4fc3f7; /* the House-of-Leaves blue — kept ONLY for the gag word */ /* The links used to share that same blue, so the page read as one note. The blue now belongs to "House" alone; every link sits back in a quiet maroon that reads as ink, not an error, and wears a serif so it carries its own voice apart from the sans titles. */ --lib-ink: #b27e84; --lib-ink-hover: #d6a6ac; --lib-link-font: Georgia, "Times New Roman", serif; /* Borders pulled almost all the way back — present, barely. */ --border: rgba(255, 255, 255, 0.05); /* Route any leftover shell accent (footnote/disclosure links, focus rings) through the same maroon so nothing on this page reads blue but the gag. */ --accent-2: var(--lib-ink); /* Darker than the rest of the house — near-black with the faintest warmth. */ background-color: #08070b; text-align: center; } /* Center the page chrome to match the document's centered body. */ body.library-body .shell-brand, body.library-body .shell-footnote { text-align: center; } body.library-body .shell-head { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; } /* Balance the back door on the left with empty space on the right so the title sits truly centered. */ body.library-body .shell-head::after { content: ""; grid-column: 3; } body.library-body .shell-title { grid-column: 2; text-align: center; } /* The cool light-pool: a faint cool glow riding high on the page that drifts with the device — the room's one quiet tilt gesture, no warmth to it. */ body.library-body::before { content: ""; position: fixed; inset: -25% -25% auto -25%; height: 85vh; z-index: 0; pointer-events: none; background: radial-gradient( 44% 38% at calc(50% + var(--lib-x) * 16%) calc(14% + var(--lib-y) * 9%), rgba(120, 150, 180, 0.06), rgba(120, 150, 180, 0.02) 46%, transparent 72% ); transition: background 240ms ease; } /* Page content sits above the pool. */ body.library-body .shell-head, body.library-body .shell-main { position: relative; z-index: 1; } /* Intro. */ .lib-intro { text-align: center; } .lib-eyebrow { margin: 0 0 0.55rem; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } body.library-body halloway-wordmark { font-size: 1.02em; color: var(--fg); } /* The shelf — plain dark cards, centered. */ .lib-shelf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .lib-book { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: inherit; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.02); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .lib-book:hover, .lib-book:focus-visible { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); } /* Keep an explicit keyboard focus ring (matches .lib-voice-book) — the hover lift alone is not a visible focus indicator. */ .lib-book:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } /* The coloured spines were the room's old warmth — drop them for the dark look; the markup stays, the ink does not. */ .lib-spine { display: none; } .lib-book-body { display: flex; flex-direction: column; gap: 0.3rem; } .lib-book-title { font-size: 1.12rem; font-weight: 700; line-height: 1.25; color: var(--fg); } .lib-blue { color: var(--lib-blue); } .lib-book-author { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--muted); } .lib-book-blurb { margin-top: 0.2rem; font-size: 0.9rem; line-height: 1.6; color: var(--fg-secondary); } .lib-book-go { margin-top: 0.45rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); } .lib-book:hover .lib-book-go, .lib-book:focus-visible .lib-book-go { text-decoration: underline; } .lib-disclosure { margin: 0.9rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--muted); } /* Follow the house — the studio's profiles, moved off the title cover. Each is a quiet dark card like the shelf, with a small lit "lamp" mark that warms to the profile's own ink on hover. Centered column, phone-first. */ .lib-social-links { margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; } .lib-social-link { --lib-social-ink: #cfd6ea; --lib-social-glow: rgba(207, 214, 234, 0.14); display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 0.85rem; text-align: left; text-decoration: none; color: inherit; padding: 0.85rem 1.05rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.02); -webkit-tap-highlight-color: transparent; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .lib-social-link--instagram { --lib-social-ink: #f3a7c9; --lib-social-glow: rgba(243, 167, 201, 0.22); } .lib-social-link--facebook { --lib-social-ink: #9fc4ff; --lib-social-glow: rgba(117, 168, 255, 0.22); } .lib-social-link--threads { --lib-social-ink: #f1edf9; --lib-social-glow: rgba(241, 237, 249, 0.18); } .lib-social-link--youtube { --lib-social-ink: #ffb6ad; --lib-social-glow: rgba(255, 87, 74, 0.2); } .lib-social-mark { grid-row: 1 / 3; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--lib-social-ink) 36%, transparent); border-radius: 999px; background: radial-gradient(70% 70% at 35% 25%, var(--lib-social-glow), transparent 70%); color: var(--lib-social-ink); font-size: 0.74rem; font-weight: 800; line-height: 1; transition: border-color 160ms ease, box-shadow 160ms ease; } .lib-social-name { align-self: end; font-weight: 700; color: var(--fg); } .lib-social-handle { align-self: start; font-family: var(--lib-link-font); font-size: 0.85rem; color: var(--lib-ink); } .lib-social-link:hover, .lib-social-link:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lib-social-ink) 50%, var(--border)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); } .lib-social-link:hover .lib-social-mark, .lib-social-link:focus-visible .lib-social-mark { border-color: color-mix(in srgb, var(--lib-social-ink) 76%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--lib-social-ink) 20%, transparent); } .lib-social-link:hover .lib-social-handle, .lib-social-link:focus-visible .lib-social-handle { color: var(--lib-ink-hover); text-decoration: underline; } .lib-social-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } /* The studio corner. */ .lib-studio-note { margin: 0 0 0.7rem; font-size: 0.9rem; color: var(--fg-secondary); } .lib-studio-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; } .lib-studio-name { display: block; font-weight: 700; color: var(--fg); } .lib-studio-desc { display: block; margin-top: 0.2rem; font-size: 0.88rem; line-height: 1.55; color: var(--fg-secondary); } .lib-studio-foot { margin: 0.9rem 0 0; font-size: 0.88rem; line-height: 1.6; color: var(--muted); } body.library-body .shell-footnote a, .lib-disclosure a { color: var(--accent-2); } /* Lines the house keeps — centered voices, each leading with its book. */ .lib-voices { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .lib-voice { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } /* The hand and the book share the top line; the author is a quiet label, the book is the link. */ .lib-voice-head { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin: 0 0 0.7rem; } .lib-voice-author { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .lib-voice-quotes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .lib-voice-quotes li { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 0.95rem; line-height: 1.55; color: var(--fg-secondary); } /* The book link wears the serif and the maroon, so it never reads as the gag blue and sits a step back from the sans titles on the shelf. */ .lib-voice-book { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--lib-ink); font-family: var(--lib-link-font); } .lib-voice-work { font-size: 1.05rem; font-style: italic; line-height: 1.25; } .lib-book-glyph { width: 1.05em; height: 1.05em; flex: 0 0 auto; opacity: 0.85; } .lib-voice-book:hover, .lib-voice-book:focus-visible { color: var(--lib-ink-hover); } .lib-voice-book:hover .lib-voice-work, .lib-voice-book:focus-visible .lib-voice-work { text-decoration: underline; } .lib-voice-book:focus-visible { outline: 2px solid var(--lib-ink); outline-offset: 3px; border-radius: 4px; } /* Authored line-art plates — a house, an open book, a shelf of spines. They break up the long column and mark the seams between sections. Drawn in muted ink (the nearer strokes a touch brighter than the far ones), and they drift a hair off the same tilt the light-pool rides. */ .lib-plate { margin: 1.6rem auto 0; max-width: 14rem; color: var(--muted); opacity: 0.6; } .lib-plate svg, .lib-voice-plate svg { display: block; width: 100%; height: auto; } .lib-plate-far { opacity: 0.5; } /* The open-book plate set into the run of lines. */ .lib-voice-plate { align-self: center; width: min(11rem, 70%); margin: 0.2rem auto; color: var(--lib-ink); opacity: 0.55; } /* The whole-plate drift: a few pixels off tilt, no two seams alike. */ .lib-plate--house svg { transform: translate(calc(var(--lib-x) * 5px), calc(var(--lib-y) * 2px)); transition: transform 240ms ease; } .lib-plate--shelf svg { transform: translate(calc(var(--lib-x) * -4px), 0); transition: transform 240ms ease; } .lib-voice-plate svg { transform: translate(calc(var(--lib-x) * 3px), 0); transition: transform 240ms ease; } /* Still life. With no tilt drift, the light-pool sits centred and the plates hold their place. */ @media (prefers-reduced-motion: reduce) { body.library-body::before, .lib-book, .lib-social-link, .lib-social-mark { transition: none; } .lib-plate--house svg, .lib-plate--shelf svg, .lib-voice-plate svg { transform: none; transition: none; } }