/* ============================================================ CODEX ROOM — shared shell for the site's secondary rooms (Schools, Stories, Contribute, and the six series hubs). Material continuity with the Illuminated Codex world (living vellum, jewel pigments, burnished gold = persistence) - but restrained. These are utility rooms, not main-screen spectacle: no continuous scene, no pointer-driven light. Search, Schools and contribution states stay utility-first. Never add animated glints to form fields, tables, or reading text. Scope: apply `.codex-room` to a content wrapper (not ) so the shared nav and footer chrome are left exactly as they are elsewhere on the site. ============================================================ */ .codex-room { background: var(--vellum); color: var(--ink); } /* ── Opening: the room's threshold band. One pigment wash (a room sets --room-pigment for its own identity; utility rooms that don't set one get only a trace of gold), one manuscript rule underneath, and room for a real image if the room has one. ── */ .room-opening { position: relative; padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem); background: linear-gradient(180deg, color-mix(in srgb, var(--room-pigment, var(--gold)) 9%, transparent) 0%, transparent 70%), var(--vellum); border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); overflow: hidden; } .room-opening__image { display: block; width: 100%; max-width: 720px; margin: 1.75rem auto 0; border-radius: 3px; } .room-rubric { color: color-mix(in srgb, var(--room-pigment, var(--gold)) 78%, var(--ink) 22%); margin-bottom: 0.75rem; } .room-title { font-family: var(--display); font-weight: 900; font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.01em; max-width: 20ch; color: var(--ink); } .room-standfirst { margin-top: 1.05rem; font-family: var(--body); font-style: italic; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.6; max-width: 56ch; color: color-mix(in srgb, var(--ink) 82%, transparent); } /* ── Colophon: the room's closing note. Quiet register, never decorative. ── */ .room-colophon { max-width: 1100px; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; padding-top: clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-family: var(--utility); font-size: 0.82rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 62%, transparent); } /* ── Controls: every interactive element in a room keeps a 44px target. ── */ .codex-room button, .codex-room input, .codex-room select, .codex-room textarea, .codex-room .btn, .codex-room .room-cta { min-height: 44px; } /* ── Responsive spacing ── */ @media (max-width: 560px) { .room-opening { padding-left: 1.1rem; padding-right: 1.1rem; } .room-colophon { padding-left: 1.1rem; padding-right: 1.1rem; } } /* ── Reduced motion: the shell itself is static. This guarantees any transition a room adds later collapses cleanly - it does not add glints to form fields, tables, or reading text; there are none here to collapse. ── */ @media (prefers-reduced-motion: reduce) { .codex-room * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }