@layer reset, tokens, base, layout, components, sections, utilities, print; @layer reset { *, ::before, ::after { box-sizing: border-box; } * { margin: 0px; } html { text-size-adjust: 100%; overflow-x: clip; overscroll-behavior-y: none; } html:focus-within { scroll-behavior: smooth; } body { min-height: 100svh; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0px; cursor: pointer; } ul[class], ol[class] { list-style: none; padding: 0px; } a { color: inherit; } :where(h1, h2, h3, h4) { text-wrap: balance; } :where(p, li) { text-wrap: pretty; } ::selection { background: color-mix(in oklab, var(--brass) 26%, transparent); color: var(--ink-0); } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } } @layer tokens { @font-face { font-family: "Fraunces Fallback"; src: local("Georgia"), local("Times New Roman"), local("serif"); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } @font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman"), local("serif"); size-adjust: 100%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; } :root { --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif; --font-read: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif; --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --step--2: clamp(0.703rem, 0.690rem + 0.06vw, 0.740rem); --step--1: clamp(0.820rem, 0.786rem + 0.17vw, 0.925rem); --step-0: clamp(1.000rem, 0.951rem + 0.24vw, 1.150rem); --step-1: clamp(1.200rem, 1.108rem + 0.46vw, 1.480rem); --step-2: clamp(1.440rem, 1.276rem + 0.82vw, 1.940rem); --step-3: clamp(1.700rem, 1.409rem + 1.45vw, 2.590rem); --step-4: clamp(2.050rem, 1.520rem + 2.65vw, 3.680rem); --step-5: clamp(2.450rem, 1.475rem + 4.87vw, 5.440rem); --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.75rem; --s-8: 3.75rem; --s-9: 5rem; --s-10: 7rem; --gutter: clamp(1.25rem, 4.2vw, 3.5rem); --shell: 74rem; --shell-wide: 84rem; --measure: 34rem; --section-y: clamp(4.5rem, 10vw, 9.5rem); --header-h: 68px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.32, .72, 0, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --t-fast: 180ms; --t-mid: 380ms; --t-slow: 720ms; color-scheme: light; --lqip-bread: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAeABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAQX/xAAgEAACAQUAAgMAAAAAAAAAAAABAgADERIhQQQxEyKR/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAWEQEBAQAAAAAAAAAAAAAAAAAAATH/2gAMAwEAAhEDEQA/AOHRVb7lTU1wy5E+PTDrr3yVqjMuJAxHsmT2qJHPZUy7+Qm1AA5EIhMpVPjKqNHpj69U4XBsbyamwO2F+R7YWH1gunExGZy0ITXazWGhCIX/2Q=="); --lqip-ecce-homo: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUBBAb/xAAiEAABAwMDBQAAAAAAAAAAAAABAAIDBBESBSFxExQxQVH/xAAUAQEAAAAAAAAAAAAAAAAAAAAC/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAFR/9oADAMBAAIRAxEAPwBVo4jirYTJ4F7pxq9REymmjbicgW8LKxvcXXub+lbrC8RZX+F3KNwonuW9ONuwxaAhLy7dCQv/2Q=="); --lqip-room: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAbABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMFBv/EACAQAAMAAgIBBQAAAAAAAAAAAAABAgMRBDETFCEjQVH/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAMAwEAAhEDEQA/AOSjHWV6xpv9K+jvXu52ODyfDbmn8d9mhXL4rxulXS6+zN0zGTU1FOd9AZsqvJVJaTApIbAEAAJP/9k="); --lqip-temptation: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAbABQDASIAAhEBAxEB/8QAGQAAAwADAAAAAAAAAAAAAAAAAAIEAQMF/8QAIRABAAICAgICAwAAAAAAAAAAAQACAxESIQQxIlEyQWH/xAAXAQEBAQEAAAAAAAAAAAAAAAABAwAC/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEf/aAAwDAQACEQMRAD8A51cFrUUmHEcd2e5TjaFHhevL9fKR+Pl5C5U/PTIdqhOP8hDJ5GEugrr6hOghLcaJvtm9AxBWu1kde7EuXWPr6m0YlQH1qEWy79wiH//Z"); --lqip-wilderness: url("data:image/jpeg;base64,/9j/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAeABQDASIAAhEBAxEB/8QAGgAAAgIDAAAAAAAAAAAAAAAAAAQBAwIFBv/EACMQAAEEAQMEAwAAAAAAAAAAAAEAAgMRIRITMQRBUYEiYeH/xAAWAQEBAQAAAAAAAAAAAAAAAAABAgP/xAAXEQEBAQEAAAAAAAAAAAAAAAAAAREh/9oADAMBAAIRAxEAPwDnI3VbSME5VkkQa0Hjx9jyiGLW8AclOzxtEAic0h0YwfJvusretpONb6QpdgmkKkm4enLod5soaWN1Ft/Kr5Ctl6pu4XA6murVjn9SEY3MHsKCkmg5pJ9KcOspJIi81VISp5QnBr//2Q=="); --lqip-crown-shadow: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAZABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDlQcGuk0dkt7QyyNtDVzgA8zAq9NN56xW8XQdahq5a0OjUxyDcpyDRUFtH5MCoTyBRWBocvKQJtwpkcpSYMDg5pZOtQj71dBidCl6GUEnnFFZyfcFFZ8qNLn//2Q=="); --lqip-lamb: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAXABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDlaWlt4zLKqDvXRpocAhBc/Nis3JItK5zdFdAuiQMMh6KXOh8rMzSYPMm3n+Gt6a4aOMBhxRRUy3GjMOomMlcd6KKKfKguf//Z"); --lqip-calvary-crowd: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAZABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDm2nV15XBqu3NNB46VNCuTypNQlYu9yHNFOdTuOFoqhApFWoLhU7VRFSL96paKTsTSOGckCim0UgP/2Q=="); } :root, :root[data-theme="light"] { color-scheme: light; --glory-deep: color-mix(in oklab, #3a2c1c 13%, transparent); --glory-glow: color-mix(in oklab, var(--brass) 9%, transparent); --paper-0: #f4f0e7; --paper-1: #eee9dd; --paper-2: #e6e0d1; --paper-3: #dcd4c2; --ink-0: #191712; --ink-1: #2d2921; --ink-2: #5d564a; --ink-3: #726a5a; --brass: #8c5f28; --brass-2: #b98b4c; --brass-ink: #7a5220; --sage: #46594c; --line: color-mix(in oklab, var(--ink-0) 13%, transparent); --line-soft: color-mix(in oklab, var(--ink-0) 7%, transparent); --line-strong: color-mix(in oklab, var(--ink-0) 22%, transparent); --surface: color-mix(in oklab, #fffdf7 62%, var(--paper-0)); --surface-2: color-mix(in oklab, var(--paper-2) 58%, var(--paper-0)); --glass: color-mix(in oklab, var(--paper-0) 78%, transparent); --shadow-sm: 0 1px 2px rgba(40, 32, 20, .05), 0 2px 6px rgba(40, 32, 20, .04); --shadow-md: 0 1px 1px rgba(40, 32, 20, .04), 0 6px 16px -6px rgba(40, 32, 20, .10), 0 22px 46px -26px rgba(40, 32, 20, .22); --edge-top: inset 0 1px 0 rgba(255, 253, 246, .8); --edge-ring: inset 0 0 0 1px var(--line-soft); --grain-opacity: .055; --grain-blend: multiply; --aura-1: color-mix(in oklab, var(--brass) 20%, transparent); --aura-2: color-mix(in oklab, var(--sage) 15%, transparent); --mark: color-mix(in oklab, var(--brass) 15%, transparent); --plate-filter: saturate(.66) contrast(1.04) brightness(1.01); --plate-veil: linear-gradient(180deg, color-mix(in oklab, var(--paper-0) 24%, transparent), color-mix(in oklab, var(--paper-0) 6%, transparent) 52%, color-mix(in oklab, var(--paper-0) 18%, transparent)), radial-gradient(118% 88% at 50% 44%, transparent 52%, color-mix(in oklab, var(--ink-0) 20%, transparent)); --hero-form-ink: #2b2116; --plate-support-opacity: .10; --prayer-form-opacity: .13; --slip-paper: #e7dec7; --slip-bloom: rgba(255, 252, 241, .85); --slip-shade: rgba(126, 104, 68, .16); --slip-fibre: rgba(120, 100, 66, .035); --slip-ink: #2a2318; --slip-ink-soft: #6b5c44; --slip-ink-faint: #9b8c70; --slip-rule: rgba(120, 100, 66, .20); --slip-rule-strong: rgba(80, 66, 42, .40); --slip-press: rgba(120, 100, 66, .12); --slip-focus: rgba(140, 95, 40, .45); --slip-edge-top: rgba(255, 253, 244, .75); --slip-edge-bottom: rgba(90, 74, 46, .35); --slip-error: #8a3d1c; --slip-line: 1.75rem; --slot-mouth: #0d0c0a; --slot-lip: rgba(120, 100, 66, .30); --vigil-dark: color-mix(in oklab, #2a2016 26%, transparent); --vigil-unlit: color-mix(in oklab, var(--ink-0) 58%, var(--paper-0)); --vigil-unlit-thread: color-mix(in oklab, var(--ink-0) 9%, transparent); --vigil-ember: color-mix(in oklab, var(--brass) 22%, transparent); --vigil-warm: color-mix(in oklab, var(--brass) 52%, transparent); --vigil-bright: var(--brass); --vigil-halo: color-mix(in oklab, var(--brass) 16%, transparent); --gather-form-opacity: .17; --ivory: #f7f3ea; --ivory-ink: #17150f; --olive-glow: color-mix(in oklab, #7d7a45 26%, transparent); --olive-wave: color-mix(in oklab, #6f6c3e 34%, transparent); --olive-wave-lit: color-mix(in oklab, #6f6c3e 68%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glory-deep: color-mix(in oklab, #000 58%, transparent); --glory-glow: color-mix(in oklab, var(--brass) 24%, transparent); color-scheme: dark; --paper-0: #11100d; --paper-1: #191712; --paper-2: #211e18; --paper-3: #2c2820; --ink-0: #f0e9da; --ink-1: #ddd4c2; --ink-2: #a89e8b; --ink-3: #8a8170; --brass: #cfa15a; --brass-2: #e0b878; --brass-ink: #dcb377; --sage: #8fa387; --line: color-mix(in oklab, var(--ink-0) 14%, transparent); --line-soft: color-mix(in oklab, var(--ink-0) 8%, transparent); --line-strong: color-mix(in oklab, var(--ink-0) 24%, transparent); --surface: color-mix(in oklab, #23201a 70%, var(--paper-0)); --surface-2: color-mix(in oklab, #2b271f 55%, var(--paper-0)); --glass: color-mix(in oklab, var(--paper-0) 76%, transparent); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 1px 1px rgba(0, 0, 0, .35), 0 10px 24px -10px rgba(0, 0, 0, .55), 0 30px 60px -34px rgba(0, 0, 0, .8); --edge-top: inset 0 1px 0 rgba(255, 240, 214, .07); --edge-ring: inset 0 0 0 1px color-mix(in oklab, var(--ink-0) 8%, transparent); --grain-opacity: .05; --grain-blend: soft-light; --aura-1: color-mix(in oklab, var(--brass) 16%, transparent); --aura-2: color-mix(in oklab, var(--sage) 12%, transparent); --mark: color-mix(in oklab, var(--brass) 20%, transparent); --plate-filter: saturate(.58) contrast(.97) brightness(.8); --plate-veil: linear-gradient(180deg, color-mix(in oklab, var(--paper-0) 36%, transparent), color-mix(in oklab, var(--paper-0) 12%, transparent) 52%, color-mix(in oklab, var(--paper-0) 32%, transparent)), radial-gradient(118% 88% at 50% 44%, transparent 48%, color-mix(in oklab, #000 42%, transparent)); --hero-form-ink: #e9dabc; --plate-support-opacity: .18; --prayer-form-opacity: .20; --slip-paper: #ded3b9; --slip-bloom: rgba(255, 250, 236, .9); --slip-shade: rgba(96, 78, 50, .22); --slip-fibre: rgba(96, 78, 50, .04); --slip-ink: #231d14; --slip-ink-soft: #5e5139; --slip-ink-faint: #8d7f64; --slip-rule: rgba(96, 78, 50, .22); --slip-rule-strong: rgba(70, 57, 36, .42); --slip-press: rgba(96, 78, 50, .14); --slip-focus: rgba(160, 110, 48, .5); --slip-edge-top: rgba(255, 252, 240, .8); --slip-edge-bottom: rgba(60, 48, 30, .45); --slip-error: #7e3416; --slip-line: 1.75rem; --slot-mouth: #000; --slot-lip: rgba(255, 240, 214, .07); --vigil-dark: color-mix(in oklab, #000 62%, transparent); --vigil-unlit: color-mix(in oklab, var(--ink-0) 52%, var(--paper-0)); --vigil-unlit-thread: color-mix(in oklab, var(--ink-0) 7%, transparent); --vigil-ember: color-mix(in oklab, var(--brass) 20%, transparent); --vigil-warm: color-mix(in oklab, var(--brass) 56%, transparent); --vigil-bright: var(--brass-2); --vigil-halo: color-mix(in oklab, var(--brass) 22%, transparent); --gather-form-opacity: .24; --ivory: #efe8d8; --ivory-ink: #14120e; --olive-glow: color-mix(in oklab, #9aa063 15%, transparent); --olive-wave: color-mix(in oklab, #a7ad72 26%, transparent); --olive-wave-lit: color-mix(in oklab, #c2c78d 62%, transparent); } } :root[data-theme="dark"] { --glory-deep: color-mix(in oklab, #000 58%, transparent); --glory-glow: color-mix(in oklab, var(--brass) 24%, transparent); color-scheme: dark; --paper-0: #11100d; --paper-1: #191712; --paper-2: #211e18; --paper-3: #2c2820; --ink-0: #f0e9da; --ink-1: #ddd4c2; --ink-2: #a89e8b; --ink-3: #8a8170; --brass: #cfa15a; --brass-2: #e0b878; --brass-ink: #dcb377; --sage: #8fa387; --line: color-mix(in oklab, var(--ink-0) 14%, transparent); --line-soft: color-mix(in oklab, var(--ink-0) 8%, transparent); --line-strong: color-mix(in oklab, var(--ink-0) 24%, transparent); --surface: color-mix(in oklab, #23201a 70%, var(--paper-0)); --surface-2: color-mix(in oklab, #2b271f 55%, var(--paper-0)); --glass: color-mix(in oklab, var(--paper-0) 76%, transparent); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 1px 1px rgba(0, 0, 0, .35), 0 10px 24px -10px rgba(0, 0, 0, .55), 0 30px 60px -34px rgba(0, 0, 0, .8); --edge-top: inset 0 1px 0 rgba(255, 240, 214, .07); --edge-ring: inset 0 0 0 1px color-mix(in oklab, var(--ink-0) 8%, transparent); --grain-opacity: .05; --grain-blend: soft-light; --aura-1: color-mix(in oklab, var(--brass) 16%, transparent); --aura-2: color-mix(in oklab, var(--sage) 12%, transparent); --mark: color-mix(in oklab, var(--brass) 20%, transparent); --plate-filter: saturate(.58) contrast(.97) brightness(.8); --plate-veil: linear-gradient(180deg, color-mix(in oklab, var(--paper-0) 36%, transparent), color-mix(in oklab, var(--paper-0) 12%, transparent) 52%, color-mix(in oklab, var(--paper-0) 32%, transparent)), radial-gradient(118% 88% at 50% 44%, transparent 48%, color-mix(in oklab, #000 42%, transparent)); --hero-form-ink: #e9dabc; --plate-support-opacity: .18; --prayer-form-opacity: .20; --slip-paper: #ded3b9; --slip-bloom: rgba(255, 250, 236, .9); --slip-shade: rgba(96, 78, 50, .22); --slip-fibre: rgba(96, 78, 50, .04); --slip-ink: #231d14; --slip-ink-soft: #5e5139; --slip-ink-faint: #8d7f64; --slip-rule: rgba(96, 78, 50, .22); --slip-rule-strong: rgba(70, 57, 36, .42); --slip-press: rgba(96, 78, 50, .14); --slip-focus: rgba(160, 110, 48, .5); --slip-edge-top: rgba(255, 252, 240, .8); --slip-edge-bottom: rgba(60, 48, 30, .45); --slip-error: #7e3416; --slip-line: 1.75rem; --slot-mouth: #000; --slot-lip: rgba(255, 240, 214, .07); --vigil-dark: color-mix(in oklab, #000 62%, transparent); --vigil-unlit: color-mix(in oklab, var(--ink-0) 52%, var(--paper-0)); --vigil-unlit-thread: color-mix(in oklab, var(--ink-0) 7%, transparent); --vigil-ember: color-mix(in oklab, var(--brass) 20%, transparent); --vigil-warm: color-mix(in oklab, var(--brass) 56%, transparent); --vigil-bright: var(--brass-2); --vigil-halo: color-mix(in oklab, var(--brass) 22%, transparent); --gather-form-opacity: .24; --ivory: #efe8d8; --ivory-ink: #14120e; --olive-glow: color-mix(in oklab, #9aa063 15%, transparent); --olive-wave: color-mix(in oklab, #a7ad72 26%, transparent); --olive-wave-lit: color-mix(in oklab, #c2c78d 62%, transparent); } } @layer base { body { background-color: var(--paper-0); color: var(--ink-1); font-family: var(--font-read); font-size: var(--step-0); line-height: 1.7; font-optical-sizing: auto; font-variant-numeric: oldstyle-nums; transition: background-color var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-0); font-weight: 400; line-height: 1.08; letter-spacing: -0.018em; font-variation-settings: "SOFT" 18, "WONK" 1; } h3, h4 { line-height: 1.2; letter-spacing: -0.012em; } em { font-style: italic; } a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; } :focus:not(:focus-visible) { outline: none; } kbd { font-family: var(--font-mono); font-size: 0.68em; line-height: 1; padding: 0.28em 0.42em; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-variant-numeric: tabular-nums; } abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--line-strong); cursor: help; } } @layer layout { .shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: var(--gutter); } section[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); } .grain { position: fixed; inset: 0px; z-index: 9999; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } @media (prefers-reduced-motion: no-preference) { .grain { animation: 8s steps(6) 0s infinite normal none running grain-drift; } } @keyframes grain-drift { 0% { transform: translate3d(0px, 0px, 0px); } 16% { transform: translate3d(-2%, 1%, 0px); } 33% { transform: translate3d(1%, -2%, 0px); } 50% { transform: translate3d(-1%, 2%, 0px); } 66% { transform: translate3d(2%, 1%, 0px); } 83% { transform: translate3d(-2%, -1%, 0px); } 100% { transform: translate3d(0px, 0px, 0px); } } .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 10000; padding: 0.7rem 1.1rem; background: var(--ink-0); color: var(--paper-0); font-family: var(--font-ui); font-size: var(--step--1); border-radius: var(--r-sm); transform: translateY(-160%); transition: transform var(--t-fast) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0px); } } @layer components { [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: no-preference) { .banner[data-motion-away] .banner__rail, [data-motion-paused] .banner__rail, [data-motion-paused] .grain, [data-motion-paused] .pulse::after { animation-play-state: paused; } .btn, .chip-btn, .rail__arrow, .tb, .reader__step, .menu-trigger, .sheet__close { transition-property: color, background-color, box-shadow, transform, scale; transition-duration: 180ms; transition-timing-function: var(--ease-out); } .btn:active, .chip-btn:active, .rail__arrow:active, .tb:active, .reader__step:active , .menu-trigger:active, .sheet__close:active { scale: 0.975; } } .plate { margin: 0px; } .plate__frame { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-md); background-color: var(--paper-2); background-size: cover; background-position: center center; box-shadow: var(--edge-ring), var(--edge-top), var(--shadow-md); } .plate__frame img { display: block; width: 100%; height: auto; filter: var(--plate-filter); transition: filter var(--t-slow) var(--ease-out); } .plate__frame::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: var(--plate-veil); } .plate__caption { margin-block-start: 0.95rem; display: grid; gap: 0.45rem; max-width: 52ch; } .plate__note { font-family: var(--font-read); font-style: italic; font-size: var(--step--1); line-height: 1.62; color: var(--ink-2); } .plate__credit { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; color: var(--ink-3); } .plate--wide { margin-block-start: clamp(2.5rem, 6vw, 4rem); max-width: 44rem; } .plate--wide .plate__frame { background-image: var(--lqip-ecce-homo); } .plate--column { margin-block: clamp(2.25rem, 5vw, 3.25rem); max-width: 21rem; } .plate--column .plate__frame { background-image: var(--lqip-temptation); } .plate--inset { margin-block: clamp(2.25rem, 5vw, 3.25rem); max-width: 30rem; } .plate--inset .plate__frame { background-image: var(--lqip-ecce-homo); } .plate--room { margin-block-start: clamp(2rem, 4vw, 2.75rem); max-width: 30rem; } .plate--room .plate__frame { background-image: var(--lqip-room); } .plate--room .plate__frame img { aspect-ratio: 5 / 4; height: auto; object-fit: cover; object-position: 56% 38%; } .u-label, .eyebrow, .section-head__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; } .eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink-2); } .eyebrow__tick { width: 1.9rem; height: 1px; background: linear-gradient(90deg, transparent, var(--brass)); } .section-head { margin-block-end: clamp(2.25rem, 5vw, 3.75rem); } .section-head__kicker { display: block; margin-block-end: var(--s-4); } .section-head__title { font-size: var(--step-3); max-width: 22ch; } .section-head--split { display: grid; gap: clamp(1.25rem, 4vw, 3.5rem); align-items: end; } .section-head__aside { color: var(--ink-2); font-size: var(--step--1); line-height: 1.75; max-width: 42ch; } @media (min-width: 62rem) { .section-head--split { grid-template-columns: 1.35fr 1fr; } .section-head--split .section-head__title { max-width: 18ch; } } .btn { --btn-bg: transparent; --btn-fg: var(--ink-0); display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.82rem 1.35rem; font-family: var(--font-ui); font-size: var(--step--1); font-weight: 500; letter-spacing: -0.005em; line-height: 1; color: var(--btn-fg); background: var(--btn-bg); border-radius: 999px; text-decoration: none; position: relative; isolation: isolate; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .btn svg { flex: 0 0 auto; transition: transform var(--t-mid) var(--ease-out); } .btn:active { transform: translateY(1px) scale(0.995); } .btn--primary { --btn-bg: var(--ink-0); --btn-fg: var(--paper-0); box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in oklab, var(--paper-0) 22%, transparent); } .btn--primary:hover { box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in oklab, var(--paper-0) 26%, transparent); } .btn--primary:hover svg { transform: translateX(3px); } .btn--ghost { box-shadow: var(--edge-ring), var(--edge-top); background: color-mix(in oklab, var(--surface) 55%, transparent); color: var(--ink-1); } .btn--ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--edge-top), var(--shadow-sm); } .btn--small { padding: 0.62rem 1rem; font-size: var(--step--2); box-shadow: var(--edge-ring), var(--edge-top); background: color-mix(in oklab, var(--surface) 60%, transparent); } .btn--small:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--edge-top); } .btn--quiet { background: transparent; box-shadow: none; color: var(--ink-2); } .btn--quiet:hover { color: var(--ink-0); background: color-mix(in oklab, var(--surface) 70%, transparent); box-shadow: none; } .btn--block { width: 100%; } .link-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-1); padding: 0.15rem 0px; position: relative; text-align: left; } .link-btn::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background: var(--line-strong); transform-origin: left center; transition: transform var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease-out); } .link-btn:hover { color: var(--ink-0); } .link-btn:hover::after { background: var(--brass); transform: scaleX(1.02); } .link-btn svg { flex: 0 0 auto; opacity: 0.6; transition: opacity var(--t-fast); } .link-btn:hover svg { opacity: 1; } .chip-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-3); padding: 0.3rem 0.6rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-soft); transition: color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); white-space: nowrap; } .chip-btn:hover { color: var(--ink-0); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } .panel { position: relative; background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 74%, transparent)); border-radius: var(--r-lg); box-shadow: var(--edge-ring), var(--edge-top), var(--shadow-md); padding: clamp(1.5rem, 3.6vw, 2.75rem); } .panel--inset { background: linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 88%, transparent), color-mix(in oklab, var(--surface-2) 96%, transparent)); box-shadow: inset 0 0 0 1px var(--line-soft), var(--edge-top); } .tag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); padding: 0.28rem 0.55rem; border-radius: 5px; background: color-mix(in oklab, var(--brass) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 22%, transparent); font-variant-numeric: tabular-nums; } .meta-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-family: var(--font-ui); font-size: var(--step--2); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .meta-row__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); opacity: 0.5; } .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); display: inline-block; margin-inline-end: 0.55rem; vertical-align: 1px; position: relative; } .pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--brass); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .pulse::after { animation: ping 2.8s var(--ease-out) infinite; } } @keyframes ping { 0% { transform: scale(0.6); opacity: 0.8; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } } .masthead { position: sticky; top: 0px; z-index: 100; background: transparent; transition: background-color var(--t-mid) var(--ease-soft); } .masthead[data-elevated="true"] { background: var(--glass); backdrop-filter: blur(16px) saturate(150%); } .masthead__rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); opacity: 0; transition: opacity var(--t-mid) var(--ease-soft); } .masthead[data-elevated="true"] .masthead__rule { opacity: 1; } .masthead__inner { height: var(--header-h); display: flex; align-items: center; gap: var(--s-5); } .wordmark { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink-0); margin-inline-end: auto; padding: 0.3rem 0px; } @media (max-width: 23rem) { .masthead__inner { gap: 0.5rem; } .wordmark__text { white-space: nowrap; } } .wordmark__glyph { color: var(--brass); display: grid; place-items: center; transition: transform var(--t-slow) var(--ease-out); } .wordmark:hover .wordmark__glyph { transform: rotate(-6deg); } .wordmark__text { font-family: var(--font-display); font-size: 1.16rem; letter-spacing: 0.01em; font-variation-settings: "SOFT" 30, "WONK" 1; } .wordmark__dot { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); letter-spacing: 0.04em; } .wordmark__cross { display: inline-block; width: 0.7em; height: 1.3em; vertical-align: -0.26em; overflow: visible; } .nav { display: none; } @media (min-width: 60rem) { .nav { display: block; } } .nav__list { display: flex; gap: clamp(1rem, 2.2vw, 2rem); } .nav__list a { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-2); text-decoration: none; position: relative; padding: 0.35rem 0px; transition: color var(--t-fast) var(--ease-out); } .nav__list a::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: right center; transition: transform var(--t-mid) var(--ease-out); } .nav__list a:hover { color: var(--ink-0); } .nav__list a:hover::after, .nav__list a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left center; } .nav__list a[aria-current="true"] { color: var(--ink-0); } .masthead__tools { display: flex; align-items: center; gap: 0.5rem; } .cmd-trigger { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.55rem 0.42rem 0.7rem; border-radius: 999px; font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-soft); transition: color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); } @media (min-width: 60rem) { .cmd-trigger { display: inline-flex; } } .cmd-trigger:hover { color: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line); background: color-mix(in oklab, var(--surface) 70%, transparent); } .cmd-trigger__label { padding-inline-end: 0.3rem; white-space: nowrap; } @media (max-width: 59.999rem) { .cmd-trigger__kbd { display: none; } .masthead__inner { gap: .5rem; } .masthead__tools { flex-shrink: 0; } .cmd-trigger, .menu-trigger { min-height: 44px; } } @media (max-width: 23rem) { .wordmark__dot { display: none; } .wordmark { gap: .3rem; } .cmd-trigger { gap: .3rem; padding-inline: .55rem; } } .cmd-trigger__kbd { font-family: var(--font-mono); font-size: 0.62rem; padding: 0.22rem 0.38rem; border-radius: 5px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-soft); letter-spacing: 0.04em; } .menu-trigger { width: 38px; height: 34px; display: grid; place-items: center; gap: 5px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-soft); grid-auto-rows: 1px; align-content: center; padding: 0px 10px; } @media (min-width: 60rem) { .menu-trigger { display: none; } } .menu-trigger span { display: block; width: 100%; height: 1.4px; background: var(--ink-1); border-radius: 2px; transition: transform var(--t-mid) var(--ease-out); } .menu-trigger:hover span:first-child { transform: translateX(-1.5px); } .menu-trigger:hover span:last-child { transform: translateX(1.5px); } .toast { position: fixed; z-index: 9998; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); padding: 0.7rem 1.15rem; border-radius: 999px; background: var(--ink-0); color: var(--paper-0); font-family: var(--font-ui); font-size: var(--step--1); box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transition: transform var(--t-mid) var(--ease-soft), opacity var(--t-mid) var(--ease-soft); max-width: calc(-2rem + 100vw); text-align: center; } .toast.is-on { transform: translate(-50%, 0px); opacity: 1; } dialog { border: 0px; padding: 0px; color: inherit; background: transparent; max-width: none; max-height: none; } dialog::backdrop { background: color-mix(in srgb, rgb(11, 10, 8) 62%, transparent); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--t-mid) var(--ease-soft); } dialog[open]::backdrop { opacity: 1; } .palette { position: fixed; inset: 0px; width: 100%; height: 100%; display: grid; place-items: start center; padding: clamp(3rem, 12vh, 7rem) var(--gutter) var(--gutter); overflow: hidden; } .palette:not([open]) { display: none; } .palette__form { width: min(100%, 40rem); background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--edge-top), 0 40px 90px -40px rgba(0,0,0,.55); overflow: hidden; transform: translateY(-10px) scale(0.985); opacity: 0; transition: transform var(--t-mid) var(--ease-soft), opacity var(--t-mid) var(--ease-soft); max-height: min(70vh, 40rem); display: flex; flex-direction: column; } .palette[open] .palette__form { transform: none; opacity: 1; } .palette__search { display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-3); flex: 0 0 auto; } .palette__search input { flex: 1 1 0%; min-width: 0px; border: 0px; background: none; outline: none; font-family: var(--font-ui); font-size: var(--step-0); color: var(--ink-0); } .palette__search input::placeholder { color: var(--ink-3); } .palette__search input::-webkit-search-cancel-button { display: none; } .palette__results { overflow-y: auto; padding: 0.5rem; flex: 1 1 0%; scrollbar-width: thin; } .palette__group { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 0.75rem 0.75rem 0.4rem; } .palette__item { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.65rem 0.75rem; border-radius: var(--r-sm); text-align: left; color: var(--ink-1); font-family: var(--font-ui); font-size: var(--step--1); transition: background-color 120ms linear, color 120ms linear; } .palette__item[aria-selected="true"] { background: color-mix(in oklab, var(--brass) 13%, transparent); color: var(--ink-0); } .palette__item-ico { color: var(--ink-3); display: grid; place-items: center; flex: 0 0 auto; } .palette__item[aria-selected="true"] .palette__item-ico { color: var(--brass); } .palette__item-txt { min-width: 0px; } .palette__item-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette__item-sub { display: block; font-size: var(--step--2); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette__empty { padding: 2rem 1rem; text-align: center; color: var(--ink-3); font-family: var(--font-ui); font-size: var(--step--1); } .palette__foot { display: flex; gap: 1.1rem; padding: 0.6rem 1.1rem; border-top: 1px solid var(--line-soft); font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-3); flex: 0 0 auto; } .palette__foot span { display: inline-flex; align-items: center; gap: 0.35rem; } @media (max-width: 34rem) { .palette__foot { display: none; } } .sheet { position: fixed; inset: 0px; width: 100%; height: 100%; } .sheet:not([open]) { display: none; } .sheet__inner { position: absolute; inset: 0px 0px auto; background: var(--paper-0); box-shadow: rgba(0, 0, 0, 0.5) 0px 30px 60px -30px; padding-right: ; padding-bottom: ; padding-left: ; padding-top: max(1.1rem, env(safe-area-inset-top)); border-radius: 0 0 var(--r-xl) var(--r-xl); transform: translateY(-8%); opacity: 0; transition: transform var(--t-mid) var(--ease-soft), opacity var(--t-mid) var(--ease-soft); } .sheet[open] .sheet__inner { transform: none; opacity: 1; } .sheet__head { display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-h) - 12px); } .sheet__mark { font-family: var(--font-display); font-size: 1.16rem; color: var(--ink-0); } .sheet__mark span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); } .sheet__close { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--ink-1); } .sheet__nav { margin: 1.25rem 0px 1.75rem; } .sheet__nav li + li { border-top: 1px solid var(--line-soft); } .sheet__nav a { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0.25rem; text-decoration: none; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-0); transition: padding-left var(--t-mid) var(--ease-out), color var(--t-fast); } .sheet__nav a span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--brass-ink); letter-spacing: 0.1em; } .sheet__nav a:hover { padding-left: 0.75rem; } } @layer sections { /* ══════════════════════════════════════════════════ the opening ══ Four beats in one continuous field: the room, the name cut into it, the plates hung on its wall, the verse it rests on. There is no background change and no section border anywhere between them — the whole sequence is one piece of darkness with different things standing in it. Mobile-first below; the 64rem block is where the room changes crop and the plates rearrange themselves on the wall. Both compositions are drawn, not derived: the phone is not the desktop stacked. */ .opening { position: relative; isolation: isolate; overflow: clip; padding-block-end: clamp(3rem, 8vh, 6rem); } /* ── the room ──────────────────────────────────────────────────── */ .opening__nave { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background-color: var(--paper-0); } .opening__nave picture { display: contents; } .opening__nave img { width: 100%; height: 100%; object-fit: cover; object-position: var(--nave-pos, 50% 22%); /* the pointer moves the room a few pixels, and nothing else */ transform: translate3d( calc(var(--op-px, 0) * 5px), calc(var(--op-py, 0) * 7px), 0) scale(1.02); } /* The integration. Three gradients doing three different jobs: a floor that takes the picture down into the page, a ceiling that does the same at the top, and a broad soft centre that opens under the inscription so the capitals never have to fight the fresco. */ .opening__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(118% 40% at 50% var(--veil-y, 38%), color-mix(in oklab, var(--paper-0) 82%, transparent) 0, color-mix(in oklab, var(--paper-0) 52%, transparent) 42%, transparent 76%), linear-gradient(to bottom, color-mix(in oklab, var(--paper-0) 88%, transparent) 0, color-mix(in oklab, var(--paper-0) 30%, transparent) 12%, transparent 26%, transparent 46%, color-mix(in oklab, var(--paper-0) 32%, transparent) 66%, color-mix(in oklab, var(--paper-0) 52%, transparent) 82%, color-mix(in oklab, var(--paper-0) 74%, transparent) 93%, var(--paper-0) 100%), radial-gradient(86% 128% at 50% 38%, transparent 52%, var(--paper-0) 100%); } /* ── the threshold ─────────────────────────────────────────────── */ /* The naming groups in the upper part of the room and the slack is left underneath it, not inside it — that lower band is the wall the plates are hung on, and they rise into it rather than starting after it. */ .opening__threshold { position: relative; z-index: 2; display: grid; grid-template-rows: auto auto auto; justify-items: center; text-align: center; padding-block-start: clamp(1.5rem, 5vh, 3rem); padding-block-end: 0; } .opening__eyebrow { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.25rem); color: var(--ink-2); max-width: 100%; } .opening__eyebrow-rule { width: clamp(1.25rem, 7vw, 5rem); height: 1px; flex: 0 0 auto; background: linear-gradient(90deg, transparent, var(--line-strong)); transform-origin: right center; } .opening__eyebrow-rule:last-child { background: linear-gradient(90deg, var(--line-strong), transparent); transform-origin: left center; } /* The inscription. Roman capitals are the oldest continuously used letterform in Christian art, and a mason cutting a name fills the stone edge to edge: both lines are set to one measure, with the tracking on each doing the squaring off. Sized from the container, so the block fills its width at any viewport without a breakpoint. */ .opening__title { container-type: inline-size; margin-block-start: clamp(1.5rem, 5vh, 3.25rem); align-self: center; width: 100%; text-transform: uppercase; line-height: .88; font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 0; } .opening__title .cut { display: block; overflow: hidden; padding-block: .04em; text-align: center; } .opening__title .cut > span { /* inline-block so the negative end margin can cancel the trailing letter-space; without that the tracked line hangs half a space left of the untracked one, which on an inscription this size is a visible fault in the setting */ display: inline-block; white-space: nowrap; font-size: min(var(--title-cap, 13rem), 15.8cqi); letter-spacing: var(--track, 0em); margin-inline-end: calc(var(--track, 0em) * -1); } .opening__sub { margin-block-start: clamp(1.5rem, 4vh, 2.5rem); max-width: 34ch; font-size: var(--step--1); line-height: 1.72; color: var(--ink-2); font-weight: 300; text-wrap: balance; } /* ── the plates ────────────────────────────────────────────────── */ .opening__spread { position: relative; z-index: 2; margin-block-start: var(--spread-top, clamp(2.25rem, 3vw, 3rem)); } /* The spread is already full width — it is not inside the shell — so every --x below is a straight percentage of the viewport. */ .spread { position: relative; height: var(--spread-h, 40rem); list-style: none; margin: 0; padding: 0; } .artifact { position: absolute; left: var(--x); top: var(--y); /* The wall stops growing at --spread-h, so the plates hung on it have to stop too. Without the cap they keep scaling with the viewport past the point the wall does, run off the bottom of it, and land on the verse underneath — which is what a very wide window was doing. */ width: min(var(--w), var(--w-cap, 100%)); z-index: var(--z, 1); /* --lift and --settle are the hover; --rot is the angle it hangs at */ transform: translate3d(calc(var(--op-px, 0) * var(--depth, 4) * 1px), calc(var(--op-py, 0) * var(--depth, 4) * 1px + var(--lift, 0px)), 0) rotate(calc(var(--rot, 0deg) * var(--settle, 1))); transition: transform var(--t-mid) var(--ease-out), filter var(--t-mid) var(--ease-out); } .artifact__link { display: block; text-decoration: none; color: inherit; } .artifact__frame { display: block; position: relative; overflow: hidden; /* the page's own black, so a plate that has not loaded yet reads as an empty mount rather than a grey rectangle */ background-color: var(--paper-0); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink-0) 9%, transparent), 0 1px 1px rgb(0 0 0 / .4), 0 var(--shadow-y, 14px) var(--shadow-blur, 34px) rgb(0 0 0 / .5); transition: box-shadow var(--t-mid) var(--ease-out); } .artifact__frame picture { display: contents; } .artifact__frame img { display: block; width: 100%; height: auto; transition: transform var(--t-slow) var(--ease-out); } /* the picture sits a shade under the room's light until it is attended to */ .artifact__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklab, var(--paper-0) 18%, transparent), transparent 34%, color-mix(in oklab, var(--paper-0) 26%, transparent)); opacity: var(--dim, 1); transition: opacity var(--t-mid) var(--ease-out); } /* The tag under each plate, set as a catalogue entry rather than a caption: the week it was read above, the name of the study, the passage under it. Three short lines rather than one long one, because a long line would run under the plate hung next to it — every label here is narrower than the gap to its neighbour, which is what lets the frames overlap without the words ever colliding. */ .artifact__label { display: block; margin-block-start: clamp(.7rem, 1.4vw, 1rem); /* A plate wide enough to be overlapped under its own left corner gets its tag set in from that corner instead — the label moves, not the painting. */ padding-inline-start: var(--label-x, 0); } .artifact__index, .artifact__ref { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; } .artifact__index { color: var(--ink-3); } .artifact__ref { margin-block-start: .5rem; color: var(--brass-ink); } .artifact__title { display: block; margin-block-start: .5rem; font-family: var(--font-display); font-size: var(--label-size, var(--step-1)); line-height: 1; letter-spacing: .005em; text-transform: uppercase; white-space: nowrap; color: var(--ink-0); font-variation-settings: "SOFT" 0, "WONK" 0; transition: color var(--t-fast) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .artifact__link:hover, .artifact__link:focus-visible { outline-offset: 6px; } /* attending to a plate straightens it and brings it forward */ .artifact:has(.artifact__link:hover), .artifact:has(.artifact__link:focus-visible) { --lift: -7px; --settle: .25; --dim: 0; --shadow-y: 26px; --shadow-blur: 54px; z-index: 9; } .artifact:has(.artifact__link:hover) .artifact__frame img, .artifact:has(.artifact__link:focus-visible) .artifact__frame img { transform: scale(1.025); } .artifact:has(.artifact__link:hover) .artifact__title { color: var(--brass-2); } } /* ── the verse ─────────────────────────────────────────────────── */ .inscription { position: relative; z-index: 2; margin-block-start: var(--inscription-top, clamp(3rem, 8vh, 5.5rem)); padding-inline: var(--gutter); text-align: center; } .inscription__line { font-family: var(--font-display); font-size: clamp(1.9rem, 5.4vw, 4.4rem); font-weight: 300; line-height: 1.14; letter-spacing: -0.028em; color: var(--ink-0); font-variation-settings: "SOFT" 20, "WONK" 1; text-wrap: balance; overflow: hidden; padding-block: .03em; } /* the dust canvas, laid exactly over the words it gathers into */ .inscription__dust { position: absolute; pointer-events: none; z-index: 1; } .inscription__line--turn { position: relative; } .inscription__line--turn em { font-style: italic; color: color-mix(in oklab, var(--brass-2) 72%, var(--ink-0)); font-variation-settings: "SOFT" 48, "WONK" 1; } .inscription__rule { display: block; width: clamp(2.5rem, 7vw, 5rem); height: 1px; margin: clamp(.85rem, 2vh, 1.25rem) auto .65rem; background: linear-gradient(90deg, transparent, var(--brass-ink), transparent); } .inscription__ref { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3); text-indent: .28em; } /* ═══════════════════════════════ phone ═══════════════════════════ The room is the one image on this site shaped like the viewport it is shown in, so the phone gets the whole vault. The plates come off the wall into two narrow columns that still lean on each other. */ @media (max-width: 63.999rem) { .opening { --nave-pos: 50% 30%; --veil-y: 40%; } .opening__title .cut > span { font-size: min(5.5rem, 15.4cqi); } .opening__sub { width: 100%; max-width: 42ch; text-wrap: pretty; } /* Two leaning columns rather than four stacked cards, on the same raised/dropped beat as the wide screen: the tall plate high on the left, the square dropped beside it, the landscape crossing back up and off the right edge, the portrait dropped again underneath. */ .opening__spread { --spread-top: clamp(2rem, 3.5vw, 2.75rem); } /* The wall has to be as tall as what hangs on it. A plate here is 44% of the viewport and about 1.55 times as tall as it is wide once the caption is counted, and the lowest hangs at 7%, so the wall wants roughly 73vw. It used to stop at 30rem, which is what that works out to at 705px and nothing like it above: by 900px the plates were overhanging the wall by 160px and the verse underneath was sitting on top of the captions. */ .spread { --spread-h: clamp(21rem, 73vw, 47rem); height: var(--spread-h); } /* Three of the four, and the row runs off the right edge rather than wrapping: a second row would turn a hanging into a grid. The one held back is the garden — the two the eye should meet first are the cross and the crown, and they are the two that stay whole. */ /* 36.5% apart: wide enough that the longest caption clears the plate to its right, close enough that the last one still runs off the screen with its own caption whole. */ .artifact { --label-size: .84rem; } .artifact--suffering { --x: 1%; --w: 44%; --y: 7%; --z: 1; --rot: -1.8deg; --depth: 8; } .artifact--evangelism { --x: 37.5%; --w: 44%; --y: 0; --z: 2; --rot: 1deg; --depth: 5; } .artifact--grace { --x: 74%; --w: 44%; --y: 5%; --z: 3; --rot: -1.2deg; --depth: 3; } .artifact--depression { display: none; } } @media (max-width: 26rem) { .artifact__index, .artifact__ref { letter-spacing: .1em; } } /* On the narrowest phones the captions are the one thing that does not shrink with the wall, so the longest of them would reach under the plate beside it. The tag comes down a step and that plate moves over. */ /* Under about 376px three captions will not fit three lanes without shrinking past reading size, so the row drops to two. The two that stay are the cross and the crown — the first things this should say. */ @media (max-width: 23.5rem) { .artifact { --label-size: .88rem; } .artifact--evangelism { display: none; } .artifact--suffering { --x: 2%; --w: 48%; --y: 7%; --rot: -1.6deg; } .artifact--grace { --x: 48%; --w: 48%; --y: 0; --rot: 1.2deg; } } /* ═════════════════════════════ wide screens ══════════════════════ The room opens out, the inscription takes its full measure, and the plates spread along the wall — the tall one bleeding off the left edge, so the wall reads as a detail of something that carries on past the frame rather than four things centred in a row. */ @media (min-width: 64rem) { .opening { --nave-pos: 50% 26%; --veil-y: 34%; } .opening__threshold { padding-block-start: clamp(2rem, 6vh, 4rem); padding-block-end: 0; } .opening__sub { max-width: 46ch; font-size: var(--step-0); } /* consistent breathing room between subtext and the plates */ .opening__spread { --spread-top: clamp(2.5rem, 3.5vw, 3.25rem); } /* One cap, and it belongs on the wall rather than on the plates hung from it. Capping the plates alone held their widths at 24rem while their left edges carried on scaling with the viewport, so past about 1500px the row stopped reaching the right-hand side: 48px of margin on the left against 213px on the right at 1920. Every --x and --w below is a percentage of this box, so capping the box keeps the row the same shape at every width and centring it keeps the two margins equal. The wall tops out where the plates do, rather than growing on past them into dead space above the verse. */ .spread { --spread-h: clamp(28rem, 44vw, 44rem); height: var(--spread-h); width: min(100%, 100rem); margin-inline: auto; } /* 24rem of plate is 32rem of plate-and-caption, and the lowest one hangs at 6% — comfortably inside the 46rem the wall tops out at. */ /* 26% of a wall that stops at 100rem is 26rem of plate, and 22% between their left edges is 22rem, so the four keep overlapping by 4rem at every width. The old per-plate cap lost that overlap entirely past about 1500px, because the plates stopped growing and the gaps between them did not. */ /* One row, hung on one beat: dropped, raised, dropped, raised. The four are the same shape now, so elevation, a degree of rotation and four points of overlap carry the rhythm instead of proportion. Stacking rises with x, so a plate is only ever overlapped from the right — the side its own caption has already finished on. */ /* 4% in on both sides: the row runs 4% to 96% of the wall. */ .artifact--suffering { --x: 4%; --w: 26%; --y: 6%; --z: 1; --rot: -1.8deg; --depth: 9; } .artifact--evangelism { --x: 26%; --w: 26%; --y: 0; --z: 2; --rot: .9deg; --depth: 6; } .artifact--grace { --x: 48%; --w: 26%; --y: 5.5%; --z: 3; --rot: -1.1deg; --depth: 4; } .artifact--depression { --x: 70%; --w: 26%; --y: .5%; --z: 4; --rot: 1.6deg; --depth: 7; } .artifact--depression { display: block; } /* Fluid, so a caption keeps the same share of the wall at every width and never grows into the plate beside it: the longest of them runs about 16.6vw, and the narrowest gap between two plates is 17.5vw. */ .artifact { --label-size: clamp(1rem, 1.95vw, 1.85rem); } .inscription { --inscription-top: clamp(3.5rem, 9vh, 7rem); } } @media (min-width: 96rem) { .opening__title { --title-cap: 13rem; } } /* ── the room holds back on the way out, so the page slides off it ── */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .opening__nave img { animation: nave-hold linear both; animation-timeline: view(); animation-range: exit -10% exit 100%; } @keyframes nave-hold { to { transform: translate3d(0, 7svh, 0) scale(1.02); } } } } .now { padding-block: var(--section-y); position: relative; } .now::before { content: ""; position: absolute; inset-inline: var(--gutter); top: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .now__grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); } @media (min-width: 60rem) { .now__grid { grid-template-columns: 1.55fr 1fr; align-items: start; } } .now__title { font-size: var(--step-3); margin-block: 1rem 0.5rem; max-width: 16ch; } .now__ref { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-2); letter-spacing: 0.02em; padding-block-end: 1.25rem; margin-block-end: 1.25rem; border-bottom: 1px solid var(--line-soft); } .now__body { max-width: 54ch; color: var(--ink-2); font-size: var(--step-0); line-height: 1.78; } .now__threads { margin-block-start: 1.5rem; display: grid; gap: 0.7rem; } .now__threads li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; } .now__threads li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); margin-block-start: 0.62em; opacity: 0.7; } .gather__when { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-0); line-height: 1.15; margin-block: 0.75rem 0.3rem; letter-spacing: -0.02em; } .gather__where { font-size: var(--step--1); color: var(--ink-2); } .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin-block-start: 1.6rem; padding: 0.9rem 0.4rem; border-radius: var(--r-md); background: color-mix(in oklab, var(--paper-0) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); } .countdown__unit { text-align: center; display: grid; gap: 0.25rem; } .countdown__num { font-family: var(--font-mono); font-size: var(--step-1); font-variant-numeric: tabular-nums; color: var(--ink-0); line-height: 1; font-weight: 500; } .countdown__lbl { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .countdown__caption { margin-block-start: 0.7rem; font-size: var(--step--2); color: var(--ink-3); font-family: var(--font-ui); min-height: 1.2em; } .countdown.is-live { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 40%, transparent); } .gather__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.4rem; } .gather__note { margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-top: 1px solid var(--line-soft); font-size: var(--step--1); color: var(--ink-3); line-height: 1.65; } .notes { padding-block: var(--section-y); position: relative; isolation: isolate; } .notes::before { content: ""; position: absolute; inset-inline: var(--gutter); top: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } /* A plate laid into the section's own black rather than hung on it: no frame, no edges — the mask takes all four sides off — and far enough back that nothing sitting on top has to move out of its way. Sized to cover, so the crop follows the viewport and the picture is never stretched out of its own proportions. */ .section-ground { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: cover; background-position: 50% 38%; filter: var(--plate-filter); opacity: .1; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 18%, #000 76%, transparent); mask-composite: intersect; } :root:not([data-theme="light"]) .section-ground, :root[data-theme="dark"] .section-ground { opacity: .18; } .asking__ground { background-position: 50% 45%; } /* Below the wide breakpoint the section is a column, and covering a column with a 16:9 plate means blowing it up several times its own width. So each picture keeps a portrait slice of itself for the narrow screens and the landscape original for the wide ones — the same two crops of one photograph the room at the top of the page is cut into. One tall size rather than two: these sections run long on a phone, so a smaller slice would be scaled past its own width to reach the bottom of them, and the saving would cost more than it returns. */ .notes__ground { background-image: image-set(url("/assets/img/notes-ground-tall-840.avif") type("image/avif"), url("/assets/img/notes-ground-tall-840.webp") type("image/webp")); } .asking__ground { background-image: image-set(url("/assets/img/asking-ground-tall-840.avif") type("image/avif"), url("/assets/img/asking-ground-tall-840.webp") type("image/webp")); } @media (min-width: 64rem) { .notes__ground { background-image: image-set(url("/assets/img/notes-ground-960.avif") type("image/avif"), url("/assets/img/notes-ground-960.webp") type("image/webp")); } .asking__ground { background-image: image-set(url("/assets/img/asking-ground-960.avif") type("image/avif"), url("/assets/img/asking-ground-960.webp") type("image/webp")); } } @media (min-width: 90rem) { .notes__ground { background-image: image-set(url("/assets/img/notes-ground-1440.avif") type("image/avif"), url("/assets/img/notes-ground-1440.webp") type("image/webp")); } .asking__ground { background-image: image-set(url("/assets/img/asking-ground-1440.avif") type("image/avif"), url("/assets/img/asking-ground-1440.webp") type("image/webp")); } } .notes__head { display: grid; gap: 1.25rem; align-items: end; } @media (min-width: 48rem) { .notes__head { grid-template-columns: 1fr auto; } } .notes__title { font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.02; } .notes__all { place-self: end start; white-space: nowrap; } @media (min-width: 48rem) { .notes__all { justify-self: end; } } /* The soft edges used to be a mask on the scroller itself, which makes the browser re-rasterise the whole masked surface on every scrolled frame — the flicker, and worst on a phone. They are two fixed panels over a still parent instead: the row scrolls underneath them and they never repaint at all. */ .rail { position: relative; margin-block-start: clamp(2rem, 4.5vw, 3.25rem); } .rail::before, .rail::after { content: ""; position: absolute; top: 0px; bottom: 0px; width: 5rem; z-index: 2; pointer-events: none; } .rail::before { inset-inline-start: 0px; background: linear-gradient(90deg, var(--paper-0), transparent); } .rail::after { inset-inline-end: 0px; background: linear-gradient(270deg, var(--paper-0), transparent); } @media (max-width: 47.999rem) { .rail::before, .rail::after { width: 2rem; } } .rail__viewport { overflow: auto hidden; scrollbar-width: none; padding-inline-end: 5rem; padding-block-end: 0.5rem; padding-inline-start: max(var(--gutter), calc((100vw - var(--shell)) / 2)); } .rail__viewport::-webkit-scrollbar { display: none; } .rail__viewport:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: var(--r-md); } .rail__viewport.is-dragging { cursor: grabbing; } .rail__viewport.is-dragging .card__inner { pointer-events: none; } .rail__track { display: flex; gap: clamp(1rem, 2vw, 1.5rem); width: max-content; list-style: none; margin: 0px; padding: 0px; } .rail__controls { display: flex; gap: 0.5rem; justify-content: flex-end; margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem); } .rail__arrow { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); } .rail__arrow:hover { color: var(--ink-0); border-color: var(--line-strong); background: var(--paper-2); } .rail__arrow:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .card { flex: 0 0 auto; width: clamp(15rem, 26vw, 19.5rem); } .card__inner { position: relative; display: grid; gap: 0.85rem; } .card__frame { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-md); background-color: var(--paper-2); box-shadow: var(--edge-ring), var(--edge-top), var(--shadow-md); aspect-ratio: 4 / 5; } .card__frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--plate-filter); transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out); } .card__frame::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: var(--plate-veil); } .card:hover .card__frame img { transform: scale(1.04); } .card__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); } .card__title { margin: 0px; min-height: 1.2em; } .card__link { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-2); line-height: 1.1; letter-spacing: 0.01em; text-align: start; color: var(--ink-0); background: none; border: 0px; padding: 0px; cursor: pointer; transition: color var(--t-fast) var(--ease-out); } .card__link::after { content: ""; position: absolute; inset: 0px; border-radius: var(--r-md); } .card:hover .card__link { color: var(--brass-ink); } .card__link:focus-visible { outline: none; } .card__link:focus-visible::after { outline: 2px solid var(--brass); outline-offset: 6px; } .card__read { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .card__read svg { opacity: 0; transform: translateX(-4px); transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); } .card:hover .card__read svg { opacity: 1; transform: none; } .reader { position: fixed; inset: 0px; width: 100%; height: 100%; max-width: none; max-height: none; display: flex; flex-direction: column; overflow: hidden; background: var(--paper-0); color: var(--ink-1); } .reader:not([open]) { display: none; } .reader::backdrop { background: var(--paper-0); } @media (prefers-reduced-motion: no-preference) { .reader[open] { animation: reader-in 420ms var(--ease-out) both; } } @keyframes reader-in { 0% { opacity: 0; transform: translateY(14px) scale(0.994); } } .reader__bar { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.25rem); height: var(--header-h); padding-inline: var(--gutter); padding-top: env(safe-area-inset-top); background: var(--glass); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--line-soft); } .reader__back { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.95rem 0.5rem 0.75rem; margin-inline-start: -0.25rem; border-radius: 999px; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-1); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-soft); transition: background-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); } .reader__back svg { transition: transform var(--t-mid) var(--ease-out); } .reader__back:hover { color: var(--ink-0); background: color-mix(in oklab, var(--surface) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line); } .reader__back:hover svg { transform: translateX(-3px); } .reader__bar-title { flex: 1 1 0%; min-width: 0px; text-align: center; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 44rem) { .reader__bar-title { display: none; } } @media (max-width: 44rem) { .reader__bar { justify-content: space-between; } } .reader__bar-nav { display: flex; align-items: center; gap: 0.2rem; flex: 0 0 auto; } .reader__step { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast); } .reader__step:hover:not(:disabled) { color: var(--ink-0); background: color-mix(in oklab, var(--surface) 80%, transparent); } .reader__step:disabled { opacity: 0.3; cursor: default; } .reader__step-count { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); padding-inline: 0.3rem; font-variant-numeric: tabular-nums; } @media (max-width: 30rem) { .reader__step-count { display: none; } } .reader__progress { flex: 0 0 auto; height: 2px; background: var(--line-soft); } .reader__progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, color-mix(in oklab, var(--brass) 45%, transparent), var(--brass)); } .reader__scroll { flex: 1 1 0%; min-height: 0px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .reader__scroll:focus { outline: none; } .reader__inner { width: min(100%, var(--shell)); margin-inline: auto; padding: clamp(1rem, 2.5vw, 1.75rem) var(--gutter) clamp(4rem, 9vw, 7rem); } .reader__end { max-width: var(--read-measure, 36rem); margin-block-start: clamp(2.5rem, 6vw, 3.5rem); padding-block-start: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line-soft); display: grid; gap: 1.1rem; justify-items: start; } .reader__end p { font-family: var(--font-display); font-size: var(--step-1); font-style: italic; color: var(--ink-2); font-weight: 300; font-variation-settings: "SOFT" 40, "WONK" 1; } .toolbar { position: sticky; top: 0px; z-index: 4; display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.55rem; margin-block-end: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: 999px; background: var(--glass); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 0 0 1px var(--line-soft), var(--edge-top); overflow-x: auto; scrollbar-width: none; } .toolbar::-webkit-scrollbar { display: none; } .toolbar__group { display: flex; align-items: center; gap: 0.2rem; flex: 0 0 auto; } .toolbar__group + .toolbar__group { margin-inline-start: 0.3rem; padding-inline-start: 0.45rem; border-inline-start: 1px solid var(--line-soft); } .toolbar__group--end { margin-inline-start: auto; border-inline-start: 0px; } @media (max-width: 47.999rem) { .toolbar__group--end { margin-inline-start: 0.3rem; } } .toolbar__readout { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); min-width: 3.1rem; text-align: center; font-variant-numeric: tabular-nums; } @media (max-width: 33.999rem) { .toolbar { padding-inline: 0.4rem; } .toolbar__readout { min-width: 2.4rem; } } @media (max-width: 22rem) { .toolbar__readout { display: none; } } .tb { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 32px; height: 32px; padding-inline: 0.5rem; border-radius: 999px; color: var(--ink-2); font-family: var(--font-ui); font-size: var(--step--2); white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); } .tb:hover { color: var(--ink-0); background: color-mix(in oklab, var(--surface) 80%, transparent); } .tb[aria-pressed="true"] { color: var(--ink-0); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft), var(--edge-top); } .tb__serif { font-family: var(--font-read); font-size: 0.95rem; } .tb__sans { font-family: var(--font-ui); font-size: 0.88rem; } .tb__text { display: none; } @media (min-width: 34rem) { .tb__text { display: inline; } } @media (max-width: 22rem) { .tb { min-width: 30px; padding-inline: 0.34rem; } .toolbar__group + .toolbar__group { margin-inline-start: 0.2rem; padding-inline-start: 0.3rem; } } .reading { --read-size: 1; --read-measure: 36rem; font-family: var(--font-read); view-transition-name: reading; min-height: 40svh; } .reading[data-face="sans"] { font-family: var(--font-ui); } .reading[data-face="sans"] .study__title, .reading[data-face="sans"] .movement h4, .reading[data-face="sans"] .pull p { font-family: var(--font-ui); letter-spacing: -0.022em; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(reading) { animation: vt-out 220ms var(--ease-in-out) both; } ::view-transition-new(reading) { animation: vt-in 420ms var(--ease-out) both; } } @keyframes vt-out { 100% { opacity: 0; transform: translateY(-6px); } } @keyframes vt-in { 0% { opacity: 0; transform: translateY(10px); } } .study__head { margin-block-end: clamp(1.75rem, 4vw, 2.5rem); } .study__meta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-block-end: 1rem; } .study__title { font-family: var(--font-display); font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.02; max-width: 15ch; font-variation-settings: "SOFT" 14, "WONK" 1; } .study__ref { margin-block-start: 0.9rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--brass-ink); letter-spacing: 0.02em; } .study__summary { margin-block-start: 1.4rem; max-width: var(--read-measure); font-size: calc(var(--step-1) * var(--read-size)); line-height: 1.6; color: var(--ink-2); font-weight: 300; } .study__rule { margin-block: clamp(2rem, 5vw, 3rem); height: 1px; background: linear-gradient(90deg, var(--line), transparent 70%); border: 0px; } .passage { max-width: var(--read-measure); } .passage__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.25rem; } .passage__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .verse { position: relative; padding: 0.28rem 2.6rem 0.28rem 0.1rem; margin-inline-start: -0.1rem; border-radius: var(--r-sm); transition: background-color var(--t-mid) var(--ease-out); } @media (min-width: 82rem) { .verse { padding-inline-end: 0.1rem; } } .verse p { font-size: calc(var(--step-0) * var(--read-size) * 1.06); line-height: 1.86; color: var(--ink-1); } .verse__n { font-family: var(--font-mono); font-size: 0.62em; font-variant-numeric: tabular-nums; color: var(--ink-3); vertical-align: 0.55em; line-height: 0; margin-inline-end: 0.45em; letter-spacing: 0.02em; transition: color var(--t-fast); } .verse::before { content: ""; position: absolute; left: -0.85rem; top: 0.45rem; bottom: 0.45rem; width: 2px; border-radius: 2px; background: var(--brass); opacity: 0; transform: scaleY(0.4); transform-origin: center center; transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); } .verse:hover::before, .verse:focus-within::before { opacity: 0.35; transform: scaleY(1); } .verse[data-marked="true"]::before { opacity: 1; transform: scaleY(1); } .verse[data-marked="true"] { background: linear-gradient(90deg, var(--mark), color-mix(in oklab, var(--mark) 35%, transparent) 88%, transparent); } .verse[data-marked="true"] .verse__n { color: var(--brass); } .verse__tools { position: absolute; top: 0.35rem; inset-inline-end: 0px; display: flex; gap: 0.1rem; opacity: 0; transform: translateX(-2px); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } @media (min-width: 82rem) { .verse__tools { inset-inline-end: -4.4rem; } } .verse:hover .verse__tools, .verse:focus-within .verse__tools, .verse[data-marked="true"] .verse__tools { opacity: 1; transform: none; } @media (pointer: coarse) { .verse__tools { opacity: 1; transform: none; } } .verse__tool { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); transition: color var(--t-fast), background-color var(--t-fast); } .verse__tool:hover { color: var(--ink-0); background: var(--surface); } .verse[data-marked="true"] .verse__tool--mark { color: var(--brass); } .passage__credit { margin-block-start: 1.1rem; font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-3); } .movement { max-width: var(--read-measure); margin-block-start: clamp(2.25rem, 5vw, 3.25rem); } .movement h4 { font-family: var(--font-display); font-size: var(--step-2); margin-block-end: 0.9rem; letter-spacing: -0.022em; } .movement h4 .movement__num { font-family: var(--font-mono); font-size: 0.46em; color: var(--brass-ink); letter-spacing: 0.12em; vertical-align: 0.5em; margin-inline-end: 0.7em; font-variant-numeric: tabular-nums; } .movement p { font-size: calc(var(--step-0) * var(--read-size)); line-height: 1.82; color: var(--ink-2); } .movement p + p { margin-block-start: 1.05em; } .movement strong { color: var(--ink-0); font-weight: 600; } .movement em { color: var(--ink-1); } .pull { max-width: var(--read-measure); margin-block: clamp(2rem, 4.5vw, 3rem); padding-inline-start: clamp(1.1rem, 3vw, 1.9rem); border-inline-start: 2px solid color-mix(in oklab, var(--brass) 55%, transparent); } .pull p { font-family: var(--font-display); font-size: calc(var(--step-2) * min(var(--read-size), 1.08)); line-height: 1.32; font-style: italic; color: var(--ink-0); font-weight: 300; letter-spacing: -0.018em; font-variation-settings: "SOFT" 42, "WONK" 1; } .pull cite { display: block; margin-block-start: 0.8rem; font-family: var(--font-mono); font-size: var(--step--2); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .aside-note { max-width: var(--read-measure); margin-block: clamp(2rem, 4.5vw, 2.75rem); padding: clamp(1.15rem, 3vw, 1.6rem); border-radius: var(--r-md); background: color-mix(in oklab, var(--sage) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sage) 22%, transparent); } .aside-note__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, var(--sage) 78%, var(--ink-0)); margin-block-end: 0.7rem; } .aside-note__term { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-0); line-height: 1.3; margin-block-end: 0.1rem; } .aside-note__translit { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-3); margin-block-end: 0.8rem; } .aside-note p { font-size: calc(var(--step--1) * var(--read-size)); line-height: 1.78; color: var(--ink-2); } .questions { max-width: var(--read-measure); margin-block-start: clamp(2.25rem, 5vw, 3.25rem); padding-block-start: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line-soft); } .questions h4 { font-size: var(--step-1); margin-block-end: 1.15rem; } .questions ol { display: grid; gap: 0.9rem; counter-reset: q 0; } .questions li { display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.3rem; font-size: calc(var(--step-0) * var(--read-size)); line-height: 1.72; color: var(--ink-2); } .questions li::before { counter-increment: q 1; content: counter(q, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--step--2); color: var(--brass-ink); padding-block-start: 0.45em; font-variant-numeric: tabular-nums; } .carry { max-width: var(--read-measure); margin-block-start: clamp(2.25rem, 5vw, 3rem); padding: clamp(1.15rem, 3vw, 1.5rem) clamp(1.15rem, 3vw, 1.6rem); border-radius: var(--r-md); background: color-mix(in oklab, var(--brass) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 20%, transparent); } .carry .u-label { color: var(--brass-ink); margin-block-end: 0.5rem; } .carry p { font-family: var(--font-display); font-size: calc(var(--step-1) * min(var(--read-size), 1.06)); font-style: italic; line-height: 1.45; color: var(--ink-0); font-weight: 300; font-variation-settings: "SOFT" 40, "WONK" 1; } .reader__pager { display: grid; gap: 0.75rem; margin-block-start: clamp(2.5rem, 6vw, 4rem); padding-block-start: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line-soft); } @media (min-width: 40rem) { .reader__pager { grid-template-columns: 1fr 1fr; } } .pager__btn { display: grid; gap: 0.3rem; padding: 1.05rem 1.15rem; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-soft); text-align: left; transition: box-shadow var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); } .pager__btn:hover { box-shadow: inset 0 0 0 1px var(--line); background: color-mix(in oklab, var(--surface) 60%, transparent); } .pager__btn--next { text-align: right; } .pager__dir { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .pager__title { font-family: var(--font-display); font-size: var(--step-0); color: var(--ink-0); line-height: 1.3; } .pager__spacer { display: none; } @media (min-width: 40rem) { .pager__spacer { display: block; } } .noscript-note { margin-block-start: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: var(--step--1); } @media (min-width: 68rem) { .reader__inner { display: grid; grid-template-columns: minmax(0px, 13.5rem) minmax(0px, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } } .reader__col { min-width: 0px; } .studynav { display: none; } @media (min-width: 68rem) { .studynav { display: block; position: sticky; top: clamp(1rem, 2.5vw, 1.75rem); max-height: calc(100svh - var(--header-h) - 5rem); overflow: hidden auto; scrollbar-width: thin; padding-block: 0.35rem; } } .studynav__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding-block-end: 0.9rem; border-bottom: 1px solid var(--line-soft); } .studynav__list { display: grid; margin-block-start: 0.35rem; } .studynav__link { display: block; width: 100%; text-align: left; padding: 0.55rem 0px; font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.35; color: var(--ink-3); position: relative; transition: color var(--t-fast) var(--ease-out); } .studynav__link::after { content: ""; position: absolute; left: 0px; bottom: 0.38rem; width: 100%; height: 1px; background: currentcolor; transform: scaleX(0); transform-origin: left center; transition: transform var(--t-mid) var(--ease-out); } .studynav__link:hover { color: var(--ink-1); } .studynav__link[aria-current="true"] { color: var(--ink-0); } .studynav__link[aria-current="true"]::after { transform: scaleX(1); } .studynav__saved { margin-block-start: 1.4rem; padding-block-start: 1.1rem; border-top: 1px solid var(--line-soft); font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-3); line-height: 1.5; } .reader__end-line { font-family: var(--font-display); font-size: var(--step-2); font-style: italic; color: var(--ink-1); font-weight: 300; line-height: 1.35; letter-spacing: -0.014em; font-variation-settings: "SOFT" 44, "WONK" 1; max-width: 22ch; } .asking { padding-block: var(--section-y); position: relative; isolation: isolate; } .asking::before { content: ""; position: absolute; inset-inline: var(--gutter); top: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .asking__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; } @media (min-width: 64rem) { .asking__grid { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.05fr); } .asking__intro { position: sticky; top: calc(var(--header-h) + 2.5rem); } } .asking__side { display: grid; align-content: start; gap: clamp(2.5rem, 5vw, 3.5rem); min-width: 0px; } .asking__lede { margin-block-start: 1.35rem; max-width: 44ch; color: var(--ink-2); font-size: var(--step-0); line-height: 1.78; } .plate--wilderness { margin-block-start: clamp(2.25rem, 5vw, 3.25rem); max-width: 34rem; } .plate--wilderness .plate__frame { background-image: var(--lqip-wilderness); } .asking__list { list-style: none; margin: 0px; padding: 0px; } .asking__list > li { border-top: 1px solid var(--line-soft); } .asking__list > li:last-child { border-bottom: 1px solid var(--line-soft); } .ask__summary { display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: baseline; gap: 1rem; padding-block: clamp(1.1rem, 2.4vw, 1.5rem); cursor: pointer; list-style: none; } .ask__summary::-webkit-details-marker { display: none; } .ask__summary::marker { content: ""; } .ask__summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: var(--r-sm); } .ask__num { font-family: var(--font-mono); font-size: var(--step--2); color: var(--brass-ink); letter-spacing: 0.08em; } .ask__q { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); line-height: 1.24; letter-spacing: -0.018em; color: var(--ink-0); text-wrap: balance; transition: color var(--t-fast) var(--ease-out); } .ask__summary:hover .ask__q { color: var(--brass-ink); } .ask__sign { position: relative; width: 0.85rem; height: 0.85rem; align-self: center; flex: 0 0 auto; } .ask__sign::before, .ask__sign::after { content: ""; position: absolute; inset: 50% 0px auto; height: 1px; background: var(--ink-3); transition: transform var(--t-mid) var(--ease-out), background-color var(--t-fast); } .ask__sign::after { transform: rotate(90deg); } .ask__summary:hover .ask__sign::before, .ask__summary:hover .ask__sign::after { background: var(--brass); } [open] .ask__sign::after { transform: rotate(0deg); } .ask__panel { overflow: hidden; } .ask__inner { padding-block: 0px clamp(1.2rem, 2.6vw, 1.7rem); padding-inline-start: calc(1.6em + 1rem); } .ask__inner p { font-family: var(--font-read); font-size: var(--step--1); line-height: 1.78; color: var(--ink-2); max-width: 54ch; } .ask__inner p + p { margin-block-start: 0.85rem; } @media (prefers-reduced-motion: no-preference) { [open] .ask__panel { animation: ask-open 420ms var(--ease-out); } } @keyframes ask-open { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } } /* ── the marginalia slip ──────────────────────────────────────────────── A writing slip laid beside the painting, and the opening it goes down through once a question has been left on it. What makes the sheet read as a physical object rather than a beige box: · it is not square to the page — a slip is laid down, not aligned · its edge is cut, not drawn: a fine deckle, irregular by a pixel or two · a tight contact shadow under it AND a long soft one beneath · a surface with mottling and laid-paper texture you can actually see · light raking across it from one corner The shadow is a drop-shadow filter on the wrapper rather than a box-shadow on the sheet: a box-shadow is clipped away by the clip-path, a drop-shadow follows the deckled silhouette. */ :root { /* one surface, shared by the sheet and by every panel of the fold */ --paper-surface: radial-gradient(140% 90% at 8% -10%, rgba(255,253,246,.95) 0%, rgba(255,253,246,0) 46%), radial-gradient(100% 80% at 104% 112%, rgba(108,86,52,.32) 0%, rgba(108,86,52,0) 54%), radial-gradient(60% 45% at 72% 18%, rgba(255,251,238,.55) 0%, rgba(255,251,238,0) 100%), radial-gradient(50% 40% at 22% 78%, rgba(120,98,62,.14) 0%, rgba(120,98,62,0) 100%), repeating-linear-gradient(90deg, rgba(104,84,52,.055) 0 1px, rgba(104,84,52,0) 1px 3px), repeating-linear-gradient(0deg, rgba(104,84,52,.05) 0 1px, rgba(104,84,52,0) 1px 26px); --paper-deckle: polygon( 0.35% 0.9%, 12% 0.2%, 27% 0.7%, 41% 0.1%, 58% 0.6%, 73% 0.15%, 88% 0.7%, 99.7% 0.25%, 99.5% 14%, 99.9% 31%, 99.4% 48%, 99.9% 66%, 99.5% 83%, 99.8% 99.2%, 87% 99.6%, 71% 99.1%, 55% 99.8%, 39% 99.2%, 23% 99.7%, 9% 99.1%, 0.3% 99.5%, 0.6% 82%, 0.1% 64%, 0.5% 47%, 0.15% 29%, 0.6% 15%); } .slip-stage { position: relative; margin-block-start: clamp(2.5rem, 5vw, 3.5rem); padding-block-end: 3rem; } .slip { display: block; } /* the wrapper carries the tilt and the shadows */ .slip__lift { display: block; transform: rotate(-0.55deg); filter: drop-shadow(0 1px 0 rgba(0,0,0,.30)) drop-shadow(0 3px 3px rgba(0,0,0,.34)) drop-shadow(0 18px 26px rgba(0,0,0,.40)) drop-shadow(0 44px 60px rgba(0,0,0,.34)); transition: transform 520ms var(--ease-out), filter 520ms var(--ease-out); } .slip:focus-within .slip__lift { transform: rotate(-0.2deg) translateY(-3px); filter: drop-shadow(0 1px 0 rgba(0,0,0,.30)) drop-shadow(0 4px 5px rgba(0,0,0,.36)) drop-shadow(0 26px 36px rgba(0,0,0,.44)) drop-shadow(0 60px 80px rgba(0,0,0,.38)); } .slip__sheet { position: relative; isolation: isolate; padding: clamp(2rem, 4.2vw, 3rem) clamp(1.7rem, 3.6vw, 2.7rem) clamp(1.6rem, 3.2vw, 2.2rem); color: var(--slip-ink); background-color: var(--slip-paper); background-image: var(--paper-surface); clip-path: var(--paper-deckle); } /* light along the top cut, shade under the bottom one */ .slip__sheet::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,250,.55) 0, rgba(255,255,250,0) 3px), linear-gradient(0deg, rgba(64,50,30,.30) 0, rgba(64,50,30,0) 4px), linear-gradient(90deg, rgba(255,255,250,.28) 0, rgba(255,255,250,0) 2px); } /* a faint crease where it will fold, as though it has been folded before */ .slip__sheet::after { content: ""; position: absolute; left: 0; right: 0; top: 66.6%; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(104,84,52,0) 0%, rgba(104,84,52,.16) 12%, rgba(104,84,52,.16) 88%, rgba(104,84,52,0) 100%); box-shadow: 0 1px 0 rgba(255,255,250,.45); } .slip__invite { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 300; font-size: var(--step-2); line-height: 1.12; letter-spacing: -.022em; color: var(--slip-ink); } .slip__prompt { position: relative; z-index: 2; display: block; margin-block-start: .55rem; font-family: var(--font-read); font-style: italic; font-size: var(--step-0); line-height: 1.55; color: var(--slip-ink-soft); } /* the paper is the field: ruled, with no box of its own */ .slip__write { position: relative; z-index: 2; display: block; width: 100%; margin-block-start: clamp(1.1rem, 2.5vw, 1.5rem); min-height: 7.5rem; border: 0; padding: 0 0 .35rem; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--slip-line) - 1px), var(--slip-rule) calc(var(--slip-line) - 1px) var(--slip-line)); background-position: 0 .32em; font-family: var(--font-read); font-size: var(--step-0); line-height: var(--slip-line); color: var(--slip-ink); resize: none; overflow: hidden; } .slip__write::placeholder { color: var(--slip-ink-faint); } .slip__write:focus { outline: none; } .slip__foot { position: relative; z-index: 2; margin-block-start: clamp(1.4rem, 3vw, 1.9rem); display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; } .slip__send { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--slip-ink); background: transparent; border: 1px solid var(--slip-rule-strong); border-radius: 1px; padding: .6rem 1.1rem; cursor: pointer; transition: background-color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out); } .slip__send:hover:not(:disabled) { background: var(--slip-press); border-color: var(--slip-ink-soft); } .slip__send:focus-visible { outline: 2px solid var(--slip-ink); outline-offset: 3px; } .slip__send:disabled { opacity: .55; cursor: default; } .slip__note { font-family: var(--font-ui); font-size: var(--step--2); color: var(--slip-ink-soft); } .slip__error { position: relative; z-index: 2; margin-block-start: .9rem; font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.5; color: var(--slip-error); } /* ── the opening ─────────────────────────────────────────────────────── A narrow recess in the page. Only a dark line with a little depth. */ .slot { position: absolute; left: clamp(1.5rem, 7%, 3.5rem); right: clamp(1.5rem, 7%, 3.5rem); bottom: 3rem; height: 3px; border-radius: 2px; background: var(--slot-mouth); box-shadow: 0 -1px 0 var(--slot-lip), inset 0 1px 2px rgba(0,0,0,.9); opacity: 0; transition: opacity 420ms var(--ease-out); } [data-folding="true"] .slot, [data-posted="true"] .slot { opacity: 1; } /* ── the fold ────────────────────────────────────────────────────────── Three panels of one sheet. The outer two turn about the creases; the shade on each deepens as it turns away from the light. */ .fold-clip { position: absolute; inset: 0 0 3rem 0; overflow: hidden; pointer-events: none; z-index: 2; } .fold { position: absolute; perspective: 1400px; perspective-origin: 50% 40%; pointer-events: none; } .fold__panel { position: absolute; left: 0; right: 0; height: 33.34%; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; } .fold__panel--top { top: 0; transform-origin: 50% 100%; } .fold__panel--mid { top: 33.33%; } .fold__panel--bottom { top: 66.66%; transform-origin: 50% 0%; } .fold__face { position: absolute; inset: 0; overflow: hidden; background-color: var(--slip-paper); background-image: var(--paper-surface); background-size: 100% 300%; } .fold__panel--top .fold__face { background-position: 0 0; } .fold__panel--mid .fold__face { background-position: 0 50%; } .fold__panel--bottom .fold__face { background-position: 0 100%; } .fold__text { position: absolute; inset: clamp(2rem, 4.2vw, 3rem) clamp(1.7rem, 3.6vw, 2.7rem) auto; font-family: var(--font-read); font-size: var(--step-0); line-height: var(--slip-line); color: var(--slip-ink); white-space: pre-wrap; overflow: hidden; max-height: 100%; } .fold__shade { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .fold__panel--top .fold__shade { background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.62)); } .fold__panel--bottom .fold__shade { background: linear-gradient(0deg, rgba(0,0,0,.06), rgba(0,0,0,.62)); } .fold__panel--mid .fold__shade { background: linear-gradient(180deg, rgba(0,0,0,.34), transparent 40%, rgba(0,0,0,.34)); } /* ── what is left ────────────────────────────────────────────────────── Sits over the box the slip occupied, so the section never changes height while any of this happens. */ .slip-done { position: absolute; inset: 0 0 3rem 0; display: grid; align-content: center; justify-items: start; gap: 1.1rem; opacity: 0; transition: opacity 620ms var(--ease-out); z-index: 3; } .slip-done:focus { outline: none; } [data-posted="true"] .slip-done { opacity: 1; } .slip-done__line { font-family: var(--font-display); font-weight: 300; font-size: var(--step-2); letter-spacing: -.022em; color: var(--ink-0); } .slip-done__again { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: none; border: 0; border-bottom: 1px solid var(--line-strong); padding: .3rem 0; cursor: pointer; transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .slip-done__again:hover { color: var(--brass-ink); border-color: var(--brass); } .slip-done__again:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; } /* Reduced motion keeps the slip, the opening and the confirmation; the paper simply leaves rather than performing. */ @media (prefers-reduced-motion: reduce) { .slip__lift, .slot, .slip-done { transition-duration: 1ms; } } .banner { position: relative; overflow: hidden; border-block: 1px solid var(--line-soft); padding-block: clamp(1.1rem, 2.6vw, 1.6rem); background: linear-gradient(180deg, color-mix(in oklab, var(--paper-2) 34%, transparent), transparent); mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 9%, rgb(0, 0, 0) 91%, transparent); } .banner__rail { display: flex; width: max-content; will-change: transform; } @media (prefers-reduced-motion: no-preference) { .banner__rail { animation: 46s linear 0s infinite normal none running banner-drift; } .banner:hover .banner__rail { animation-play-state: paused; } } @keyframes banner-drift { 0% { transform: translate3d(0px, 0px, 0px); } 100% { transform: translate3d(-50%, 0px, 0px); } } @media (prefers-reduced-motion: reduce) { .banner__rail { justify-content: center; width: 100%; } .banner__run + .banner__run { display: none; } } .banner__run { display: flex; align-items: center; flex: 0 0 auto; gap: clamp(2rem, 5vw, 4rem); padding-inline: clamp(1rem, 2.5vw, 2rem); } .banner__text { font-family: var(--font-display); font-size: clamp(1rem, 0.9rem + 0.42vw, 1.32rem); font-style: italic; font-weight: 300; letter-spacing: -0.012em; color: var(--ink-1); white-space: nowrap; font-variation-settings: "SOFT" 40, "WONK" 1; } .banner__ref { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-ink); white-space: nowrap; } .banner__mark { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); opacity: 0.55; flex: 0 0 auto; } .banner--added .banner__run { min-width: 100vw; justify-content: center; } @media (prefers-reduced-motion: reduce) { .banner--added .banner__run:first-child { min-width: 0px; width: 100%; flex-wrap: wrap; gap: 0.75rem 1rem; padding-inline: var(--gutter); } .banner--added .banner__text { flex: 0 1 100%; max-width: 65ch; white-space: normal; text-align: center; text-wrap-style: balance; } } .minute { padding-block: clamp(7rem, 17vw, 12rem); min-height: min(100svh, 58rem); display: grid; align-content: center; position: relative; overflow: clip; isolation: isolate; } /* The writing desk. Held back further than the other grounds because the waveform and the play control sit directly on top of it, and this is the one section where the page is asking to be listened to. */ .minute__ground { background-position: 50% 62%; background-image: image-set(url("/assets/img/minute-ground-tall-840.avif") type("image/avif"), url("/assets/img/minute-ground-tall-840.webp") type("image/webp")); } :root:not([data-theme="light"]) .minute__ground, :root[data-theme="dark"] .minute__ground { opacity: .14; } @media (min-width: 64rem) { .minute__ground { background-position: 50% 56%; background-image: image-set(url("/assets/img/minute-ground-960.avif") type("image/avif"), url("/assets/img/minute-ground-960.webp") type("image/webp")); } } @media (min-width: 90rem) { .minute__ground { background-image: image-set(url("/assets/img/minute-ground-1440.avif") type("image/avif"), url("/assets/img/minute-ground-1440.webp") type("image/webp")); } } .minute::before { content: ""; position: absolute; inset-inline: var(--gutter); top: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .minute::after { content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(120% 78% at 50% 52%, transparent 34%, var(--vigil-dark) 100%); opacity: 0; transition: opacity 1.6s var(--ease-out); } .minute:has([data-state="playing"])::after, .minute:has([data-state="paused"])::after { opacity: 1; } .vigil { display: grid; justify-items: center; text-align: center; } .vigil__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .vigil__line { margin-block-start: clamp(1.5rem, 4vw, 2.5rem); max-width: 18ch; font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1.06; letter-spacing: -0.032em; text-wrap: balance; color: var(--line-ink, var(--vigil-unlit)); text-shadow: 0 0 42px var(--line-halo, transparent); transition: color 1.4s var(--ease-out), text-shadow 1.4s var(--ease-out); } .vigil[data-state="playing"], .vigil[data-state="paused"], .vigil[data-state="ended"] { --line-ink: var(--ink-0); --line-halo: var(--vigil-halo); } .vigil__stage { position: relative; width: 100%; margin-block-start: clamp(3rem, 8vw, 5.5rem); } .vigil__thread { display: block; width: 100%; height: clamp(6rem, 13vw, 9.5rem); overflow: visible; } .vigil__form--dark { fill: var(--vigil-unlit-thread); } .vigil__form--lit { fill: url("#vigilTrail"); } .vigil__stop--ember { stop-color: var(--vigil-ember); } .vigil__stop--warm { stop-color: var(--vigil-warm); } .vigil__stop--bright { stop-color: var(--vigil-bright); } .vigil__stop--core { stop-color: var(--vigil-bright); stop-opacity: 0.9; } .vigil__stop--fade { stop-color: var(--vigil-bright); stop-opacity: 0; } .vigil__lamp { fill: url("#vigilLamp"); } .vigil__seek { position: absolute; inset: 50% 0px auto; translate: 0px -50%; height: max(3rem, 100%); cursor: pointer; } .vigil__seek:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; border-radius: var(--r-sm); } .vigil__tick { position: absolute; top: 50%; left: var(--at, -10%); width: 1px; height: 2.2rem; translate: -50% -50%; background: var(--line-strong); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease-out); } .vigil__stage:hover .vigil__tick { opacity: 1; } .vigil__foot { margin-block-start: clamp(2rem, 4.5vw, 3rem); display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.4rem); flex-wrap: wrap; justify-content: center; } .vigil__mark { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.05rem 0.55rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-1); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: border-color var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease-out); } .vigil__mark:hover:not(:disabled) { border-color: var(--brass); color: var(--brass-ink); background: color-mix(in oklab, var(--brass) 10%, transparent); } .vigil__mark:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .vigil__mark:disabled { opacity: 0.5; cursor: default; } .vigil__glyph { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--brass-ink); } .vigil__glyph > svg { grid-area: 1 / 1; } .vigil__icon--pause, .vigil__icon--replay { display: none; } [data-state="playing"] .vigil__icon--play { display: none; } [data-state="playing"] .vigil__icon--pause { display: block; } [data-state="ended"] .vigil__icon--play { display: none; } [data-state="ended"] .vigil__icon--replay { display: block; } .vigil__time { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); font-variant-numeric: tabular-nums; } .vigil__time-sep { opacity: 0.5; margin-inline: 0.35rem; } .vigil__sign { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .vigil__sign:empty { display: none; } @media (prefers-reduced-motion: reduce) { .minute::after, .vigil__line { transition: none; } } .minute__pending { margin-block-start: clamp(1.5rem, 3vw, 2rem); text-align: center; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-3); } .minute__transcript { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); text-align: center; } .minute__transcript-body { margin-block-start: 1.25rem; margin-inline: auto; max-width: var(--measure); text-align: start; } .minute__transcript-body p { font-family: var(--font-read); font-size: var(--step--1); line-height: 1.75; color: var(--ink-2); } .minute__transcript-body p + p { margin-block-start: 0.9rem; } .glory { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(6rem, 14vw, 11rem); border-block: 1px solid var(--line-soft); } .glory__ground { position: absolute; inset: 0px; z-index: -2; pointer-events: none; background: radial-gradient(60% 34% at 50% 50%, var(--glory-glow), transparent 70%), linear-gradient(180deg, transparent 0%, var(--glory-deep) 34%, var(--glory-deep) 62%, transparent 100%); } .glory__column { width: min(calc(100% - var(--gutter) * 2), 46rem); margin-inline: auto; text-align: center; } .glory__invitation { font-family: var(--font-read); font-style: italic; font-size: var(--step-0); line-height: 1.6; color: var(--ink-2); max-width: 34ch; margin-inline: auto; margin-block-end: clamp(3rem, 7vw, 5rem); text-wrap: balance; } .glory__hymn { margin: 0px; display: grid; justify-items: center; } .glory__line { --fs-top: clamp(1.6rem, 4.6vw, 3.05rem); --fs-low: clamp(1rem, 1.85vw, 1.2rem); margin: 0px; max-width: 26ch; font-family: var(--font-display); font-weight: 300; font-size: calc(var(--fs-top) - (var(--fs-top) - var(--fs-low)) * var(--depth)); line-height: calc(1.32 - .1 * (1 - var(--depth))); letter-spacing: calc(-.03em + .018em * var(--depth)); color: color-mix(in oklab, var(--ink-0) calc(100% - 42% * var(--depth)), var(--paper-0)); padding-block: calc(.85rem - .42rem * var(--depth)); text-wrap: balance; } .glory__line { max-width: calc(26ch + 16ch * var(--depth)); } .glory__turn { margin-block: clamp(3rem, 8vw, 6rem); width: min(100%, 30rem); } .glory__turn img { width: 100%; height: auto; border-radius: var(--r-md); background: var(--paper-2) var(--lqip-crown-shadow) center / cover; filter: var(--plate-filter); box-shadow: var(--edge-ring), var(--edge-top), var(--shadow-md); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .glory__turn img { border-radius: 0px; box-shadow: none; mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 14%, rgb(0, 0, 0) 86%, transparent 100%), linear-gradient(transparent 0px, rgb(0, 0, 0) 11%, rgb(0, 0, 0) 89%, transparent 100%); mask-composite: intersect; } } :root[data-theme="dark"] .glory__turn img { border-radius: 0px; box-shadow: none; mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 14%, rgb(0, 0, 0) 86%, transparent 100%), linear-gradient(transparent 0px, rgb(0, 0, 0) 11%, rgb(0, 0, 0) 89%, transparent 100%); mask-composite: intersect; } .glory__name { margin-block: clamp(3.5rem, 9vw, 7rem) 0px; font-family: var(--font-display); font-weight: 300; font-size: clamp(4.5rem, 21vw, 15rem); line-height: 0.92; letter-spacing: -0.055em; color: var(--ink-0); font-variation-settings: "SOFT" 24, "WONK" 1; } .glory__cite { margin-block-start: clamp(1.75rem, 4vw, 2.75rem); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } @media (max-width: 40rem) { .glory__line { --fs-top: clamp(1.45rem, 7.4vw, 2.1rem); --fs-low: 1rem; max-width: calc(20ch + 14ch * var(--depth)); } .glory__turn { width: min(100%, 22rem); margin-block: clamp(2.5rem, 11vw, 4rem); } .glory__name { font-size: clamp(4rem, 30vw, 8rem); } } .gather { position: relative; isolation: isolate; overflow: clip; border-block: 1px solid var(--line-soft); background: var(--surface-2); padding-block: clamp(2.25rem, 5vw, 3.25rem); } .gather__form { position: absolute; z-index: -1; inset: 0px; opacity: var(--gather-form-opacity, .18); pointer-events: none; } @supports (mask-image: url("/assets/img/gather-form.webp")) or (-webkit-mask-image: url("/assets/img/gather-form.webp")) { .gather__form { background: linear-gradient(180deg, var(--hero-form-ink), color-mix(in oklab, var(--hero-form-ink) 68%, transparent)); mask-image: url("/assets/img/gather-form.webp"); mask-size: cover; mask-position: 50% 50%; mask-repeat: no-repeat; } } .gather__inner { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: center; } @media (min-width: 58rem) { .gather__inner { grid-template-columns: minmax(0px, 1fr) auto auto; gap: clamp(2rem, 5vw, 4rem); } } .gather__line { margin-block-start: 0.7rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 300; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink-0); text-wrap: balance; } .gather__time { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em; color: var(--ink-0); white-space: nowrap; } .gather__zone { color: var(--brass-ink); } .gather__welcome { margin-block-start: 0.4rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-2); } .gather__cta { justify-self: start; white-space: nowrap; } @media (min-width: 58rem) { .gather__cta { justify-self: end; } } .support { padding-block: var(--section-y); position: relative; isolation: isolate; overflow: clip; } /* The apse, cut two ways like every other ground. A phone gets the axis of the room — dome, altarpiece, altar — because the section is a column there and the photograph already is one. A desktop cannot hold that axis at any useful size, so the wide cut takes the one register that reads on its own and is symmetrical besides: the altarpiece, the two paintings beside it, and the candles under them. */ .support__ground { background-position: 50% 40%; background-image: image-set(url("/assets/img/support-ground-tall-840.avif") type("image/avif"), url("/assets/img/support-ground-tall-840.webp") type("image/webp")); /* Carried further down than the other grounds. Elsewhere a ground only has to keep a section from going flat behind its prose; here the three ways in front of it are glass, and glass with nothing behind it is just a darker grey. This one has to reach the bottom of the section for them to have anything to stand in front of. */ mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent), linear-gradient(transparent, #000 22%, #000 90%, transparent); } :root:not([data-theme="light"]) .support__ground, :root[data-theme="dark"] .support__ground { opacity: .3; } @media (min-width: 64rem) { .support__ground { background-position: 50% 54%; background-image: image-set(url("/assets/img/support-ground-960.avif") type("image/avif"), url("/assets/img/support-ground-960.webp") type("image/webp")); } } .support__inner { display: grid; justify-items: center; } .support__intro { text-align: center; max-width: 40rem; } .support__title { font-size: var(--step-3); letter-spacing: -0.028em; line-height: 1.06; } .support__lede { margin-block-start: 1.1rem; margin-inline: auto; max-width: 46ch; color: var(--ink-2); font-size: var(--step-0); line-height: 1.6; text-wrap: balance; } /* Two ways of sending money on one row, and the way that costs nothing underneath them at the full width of the section. They were never three of a kind and the grid has stopped pretending they were. */ .support__ways { margin-block-start: clamp(2.5rem, 6vw, 4rem); width: 100%; display: grid; gap: clamp(0.85rem, 1.9vw, 1.35rem); } @media (min-width: 46rem) { .support__ways { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .way--wide { grid-column: 1 / -1; } } /* Glass rather than a panel. The room behind is doing the work the flat fill used to do badly: the gradient only has to run with the light in that photograph — brightest along the top edge, settling into the page's own black at the foot — and the hairline is the one hard edge anywhere on it. The last row of the grid is elastic, so the handles sit on the bottom of a card however long the line above them runs. */ .way { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: repeat(3, auto) 1fr; gap: 0.45rem; padding: clamp(1.5rem, 3.1vw, 2.1rem); border-radius: var(--r-lg); background: linear-gradient(166deg, color-mix(in oklab, var(--paper-3) 86%, transparent), color-mix(in oklab, var(--paper-1) 62%, transparent) 46%, color-mix(in oklab, var(--paper-0) 52%, transparent)); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 0 0 1px var(--line), var(--edge-top), var(--shadow-md); transition: box-shadow var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); } /* A filament of brass caught on the top edge, the way the gilding in the photograph catches the light coming down the nave. */ .way::before { content: ""; position: absolute; inset-inline: 14%; top: 0px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--brass) 62%, transparent), transparent); opacity: 0.45; transition: opacity var(--t-mid) var(--ease-out), inset-inline var(--t-mid) var(--ease-out); } /* and the warmth of it arriving, only when the card is being used */ .way::after { content: ""; position: absolute; inset: 0px; z-index: -1; background: radial-gradient(78% 62% at 50% 0%, color-mix(in oklab, var(--brass) 13%, transparent), transparent 72%); opacity: 0; transition: opacity var(--t-mid) var(--ease-out); } .way:hover, .way:focus-within { box-shadow: inset 0 0 0 1px var(--line-strong), var(--edge-top), var(--shadow-md); transform: translateY(-2px); } .way:hover::before, .way:focus-within::before { opacity: 1; inset-inline: 6%; } .way:hover::after, .way:focus-within::after { opacity: 1; } .way__index { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; } .way__label { font-family: var(--font-display); font-size: var(--step-1); font-weight: 300; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink-0); } .way__note { font-family: var(--font-read); font-size: var(--step--1); line-height: 1.62; color: var(--ink-2); text-wrap: pretty; } .way__action { align-self: end; padding-block-start: 1.15rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .way__handle { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.52rem 0.85rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in oklab, var(--paper-0) 62%, transparent); font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-1); text-decoration: none; cursor: pointer; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .way__handle:hover { border-color: var(--brass); background: color-mix(in oklab, var(--brass) 12%, transparent); color: var(--brass-ink); } .way__handle svg { opacity: 0.55; flex: 0 0 auto; } .way__handle:hover svg { opacity: 1; } /* The third one is not a third card, it is a different request, and it is laid out like one: the ask along the row and the way to answer it at the end of that row rather than underneath. */ .way--wide { background: linear-gradient(104deg, color-mix(in oklab, var(--paper-3) 84%, transparent), color-mix(in oklab, var(--paper-1) 60%, transparent) 54%, color-mix(in oklab, var(--paper-0) 50%, transparent)); } .way--wide::after { background: radial-gradient(56% 120% at 88% 50%, color-mix(in oklab, var(--brass) 15%, transparent), transparent 74%); } @media (min-width: 46rem) { .way--wide { grid-template-columns: minmax(0px, 1fr) auto; grid-template-rows: repeat(3, auto); align-content: center; column-gap: clamp(1.5rem, 4vw, 3.25rem); } .way--wide > .way__index { grid-area: 1 / 1; } .way--wide > .way__label { grid-area: 2 / 1; } .way--wide > .way__note { grid-area: 3 / 1; max-width: 52ch; } .way--wide > .way__action { grid-area: 1 / 2 / 4 / 3; align-self: center; padding-block-start: 0px; } .way--wide .way__handle { padding: 0.72rem 1.15rem; font-size: var(--step--1); border-color: color-mix(in oklab, var(--brass) 38%, transparent); color: var(--brass-ink); } } .support__fineprint { margin-block-start: clamp(2rem, 4vw, 2.75rem); max-width: 52ch; text-align: center; font-family: var(--font-ui); font-size: var(--step--2); line-height: 1.6; color: var(--ink-3); } /* ══════════════════════════════════════════ why christianity ══════════ Five claims, one open at a time, inside an ordinary section's height. Two things keep it there: the plates are all cut to one ratio, and the panel is a fixed two-column grid — so changing claim swaps words and picture without the page moving under whoever is reading it. */ .facet { padding-block: clamp(5rem, 12vw, 9rem); position: relative; isolation: isolate; overflow: clip; } .facet::before { content: ""; position: absolute; inset-inline: var(--gutter); top: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } /* Held well back: five plates and a column of type sit on this one, and it is the room rather than anything to look at. */ .facet__ground { background-position: 50% 38%; background-image: image-set(url("/assets/img/facet-ground-tall-840.avif") type("image/avif"), url("/assets/img/facet-ground-tall-840.webp") type("image/webp")); } :root:not([data-theme="light"]) .facet__ground, :root[data-theme="dark"] .facet__ground { opacity: .11; } @media (min-width: 64rem) { .facet__ground { background-position: 50% 0%; background-image: image-set(url("/assets/img/facet-ground-960.avif") type("image/avif"), url("/assets/img/facet-ground-960.webp") type("image/webp")); } } @media (min-width: 90rem) { .facet__ground { background-image: image-set(url("/assets/img/facet-ground-1440.avif") type("image/avif"), url("/assets/img/facet-ground-1440.webp") type("image/webp")); } } .facet__inner { display: grid; } .facet__kicker { display: flex; align-items: center; gap: .9rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .28em; text-transform: uppercase; color: var(--brass-ink); } .facet__rule { width: clamp(1.5rem, 5vw, 3.5rem); height: 1px; flex: 0 0 auto; background: linear-gradient(90deg, var(--line-strong), transparent); } .facet__title { margin-block-start: clamp(1rem, 2.4vw, 1.5rem); font-size: var(--step-4); font-weight: 300; line-height: 1.04; letter-spacing: -.034em; max-width: 14ch; text-wrap: balance; } .facet__title em { font-style: italic; color: var(--brass-ink); font-variation-settings: "SOFT" 40, "WONK" 1; } .facet__lede { margin-block-start: clamp(1rem, 2.2vw, 1.4rem); max-width: 46ch; font-size: var(--step-0); line-height: 1.78; color: var(--ink-2); font-weight: 300; text-wrap: pretty; } /* ── the five ───────────────────────────────────────────────────── */ .facet__beads { list-style: none; margin: clamp(2.25rem, 5vw, 3.25rem) 0px 0px; padding: 0px; display: grid; gap: .5rem; } .bead { display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: center; gap: 1rem; width: 100%; text-align: start; padding: .85rem 1rem; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-soft); background: color-mix(in oklab, var(--surface) 26%, transparent); transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); } .bead::after { content: "\2192"; color: var(--ink-3); transition: color var(--t-fast), transform var(--t-fast) var(--ease-out); } .bead__num { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; border-radius: 50%; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .04em; color: var(--brass-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 34%, transparent); transition: box-shadow var(--t-fast), background-color var(--t-fast), color var(--t-fast); } .bead__name { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; color: var(--ink-2); text-wrap: balance; } .bead:hover { background: color-mix(in oklab, var(--surface) 62%, transparent); box-shadow: inset 0 0 0 1px var(--line); } .bead:hover::after { color: var(--brass-ink); transform: translateX(3px); } .bead:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } .bead[aria-selected="true"] { background: color-mix(in oklab, var(--brass) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 44%, transparent); } .bead[aria-selected="true"] .bead__num { color: var(--ink-0); background: color-mix(in oklab, var(--brass) 18%, transparent); box-shadow: inset 0 0 0 1px var(--brass); } .bead[aria-selected="true"] .bead__name { color: var(--ink-0); } .facet__prompt { display: flex; align-items: center; gap: .9rem; margin-block-start: clamp(1.5rem, 3vw, 2rem); font-family: var(--font-read); font-style: italic; font-size: var(--step--1); color: var(--ink-3); } .facet__prompt[hidden] { display: none; } .facet__prompt-rule { width: clamp(1.25rem, 4vw, 2.5rem); height: 1px; flex: 0 0 auto; background: linear-gradient(90deg, var(--line-strong), transparent); } /* ── the one open ───────────────────────────────────────────────── */ .facet__panel { margin-block-start: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); } .facet__panel[hidden] { display: none; } .facet__panel:focus-visible { outline: 1px solid var(--brass); outline-offset: 8px; border-radius: var(--r-sm); } .facet__count { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .16em; color: var(--ink-3); } .facet__count b { font-weight: 400; color: var(--brass-ink); } .facet__claim { margin-block-start: .8rem; font-size: var(--step-2); font-weight: 300; line-height: 1.14; letter-spacing: -.028em; color: var(--ink-0); text-wrap: balance; } /* Five lines held open whether the claim needs them or not, so moving between claims does not nudge everything below by the difference. */ .facet__body { margin-block-start: 1rem; max-width: 46ch; min-height: calc(6 * 1.78em); font-family: var(--font-read); font-size: var(--step-0); line-height: 1.78; color: var(--ink-2); font-weight: 300; } /* The quotes run from one line to four, and that swing is the whole of the wobble when switching claims — so the space for the longest is held open for all of them. */ .facet__verse { margin: clamp(1.25rem, 3vw, 1.75rem) 0px 0px; padding-inline-start: 1.1rem; min-height: 7em; border-inline-start: 1px solid color-mix(in oklab, var(--brass) 40%, transparent); } .facet__verse p { font-family: var(--font-read); font-style: italic; font-size: var(--step-0); line-height: 1.7; color: color-mix(in oklab, var(--brass-2) 70%, var(--ink-0)); text-wrap: pretty; } .facet__verse cite { display: block; margin-block-start: .6rem; font-family: var(--font-mono); font-style: normal; font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .facet__cta { display: inline-flex; align-items: center; gap: .6rem; margin-block-start: clamp(1.5rem, 3.5vw, 2rem); padding: .75rem 1.3rem; border-radius: 999px; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-1); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); } .facet__cta:hover { color: var(--ink-0); background: color-mix(in oklab, var(--brass) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 52%, transparent); } .facet__cta:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } /* The plate is a window of a size this stylesheet decides, not a picture printed at whatever size it happens to be. height: auto is doing real work: the img used to carry a height attribute, which lands as a presentational `height: 640px`, and an explicit height makes the browser disregard aspect-ratio altogether — so the plate was a fixed 640px box at every width, on every screen. */ .facet__plate { margin: 0px; border-radius: var(--r-sm); overflow: hidden; position: relative; background: var(--paper-2); box-shadow: var(--edge-ring), var(--shadow-md); } .facet__plate picture { display: contents; } .facet__plate img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--focus, 50% 50%); filter: var(--plate-filter); } .facet__plate::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(180deg, transparent 45%, color-mix(in oklab, var(--paper-0) 42%, transparent)); } /* Below the tablet width the five are a stacked list until one is opened, and a row of numbers afterwards — the list is most of a phone screen on its own, and it has served its purpose once a choice is made. */ @media (max-width: 47.999rem) { .facet[data-facet-open] .facet__beads { grid-template-columns: repeat(5, 1fr); gap: .4rem; } .facet[data-facet-open] .bead { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .45rem; padding: .6rem .25rem; } .facet[data-facet-open] .bead::after { display: none; } .facet[data-facet-open] .bead__num { width: 2.15rem; height: 2.15rem; font-size: var(--step--2); } .facet[data-facet-open] .bead__name { font-size: .56rem; letter-spacing: .04em; line-height: 1.3; overflow-wrap: anywhere; } /* A shallow cinematic band rather than a picture to scroll past: 3:2 of whatever width the phone is, capped so it never takes more than about a third of the screen. 375px gives 250px, 430px gives 287px. */ .facet__plate img { aspect-ratio: 3 / 2; max-height: 300px; } } /* The panel is still one column between the tablet and desk breakpoints, so a full-width 3:2 plate runs to 460px there. The art direction has already switched to the wide cut by now; this only stops it filling the screen while the text is still stacked above it. */ @media (min-width: 48rem) and (max-width: 63.999rem) { .facet__plate img { max-height: 360px; } } @media (min-width: 48rem) { .facet__beads { grid-template-columns: repeat(5, 1fr); gap: .6rem; } .bead { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .7rem; padding: 1rem .6rem; } .bead::after { display: none; } .bead__name { line-height: 1.5; } } @media (min-width: 64rem) { .facet__panel { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.05fr); align-items: center; } } /* ═════════════════════════════════════════════ the fallout ════════════ The faces are struck rather than photographed: initials cut into a disc of the page's own black, ringed in brass. It keeps the sphere to two colours and needs no portraits — which this page could not load from anywhere else even if it had them. */ .fallout { padding-block: clamp(5rem, 12vw, 9rem); position: relative; isolation: isolate; overflow: clip; } .fallout::before { content: ""; position: absolute; inset-inline: var(--gutter); top: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } /* The School of Athens, seated back far enough that thirty medallions and a row of cards can sit on top of it without fighting it. */ .fallout__ground { background-position: 50% 44%; background-image: image-set(url("/assets/img/fallout-ground-tall-840.avif") type("image/avif"), url("/assets/img/fallout-ground-tall-840.webp") type("image/webp")); } :root:not([data-theme="light"]) .fallout__ground, :root[data-theme="dark"] .fallout__ground { opacity: .12; } @media (min-width: 64rem) { .fallout__ground { background-position: 50% 40%; background-image: image-set(url("/assets/img/fallout-ground-960.avif") type("image/avif"), url("/assets/img/fallout-ground-960.webp") type("image/webp")); } } @media (min-width: 90rem) { .fallout__ground { background-image: image-set(url("/assets/img/fallout-ground-1440.avif") type("image/avif"), url("/assets/img/fallout-ground-1440.webp") type("image/webp")); } } .fallout__head { display: grid; justify-items: center; text-align: center; } .fallout__kicker { display: flex; align-items: center; gap: .9rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .28em; text-transform: uppercase; color: var(--brass-ink); text-indent: .28em; } .fallout__rule { width: clamp(1.5rem, 5vw, 3.5rem); height: 1px; flex: 0 0 auto; background: linear-gradient(90deg, transparent, var(--line-strong)); } .fallout__title { margin-block-start: clamp(1rem, 2.4vw, 1.6rem); font-size: var(--step-4); font-weight: 300; line-height: 1.04; letter-spacing: -.034em; max-width: 18ch; text-wrap: balance; } .fallout__title em { font-style: italic; color: var(--brass-ink); font-variation-settings: "SOFT" 40, "WONK" 1; } .fallout__lede { margin-block-start: clamp(1rem, 2.2vw, 1.5rem); max-width: 46ch; font-size: var(--step-0); line-height: 1.78; color: var(--ink-2); font-weight: 300; text-wrap: pretty; } .fallout__stage { position: relative; display: grid; justify-items: center; margin-block-start: clamp(2rem, 5vw, 3.5rem); } /* touch-action: none, so a finger dragged upward turns the sphere instead of hauling the page with it. The cost is that you cannot scroll from on top of the sphere, which is why it is 82vw and not the full width — the strip either side is there to scroll past it by. */ .orb { --disc: clamp(2rem, 7.5vw, 4.5rem); position: relative; width: min(82vw, 40rem); aspect-ratio: 1; touch-action: none; cursor: grab; } .orb.is-turning { cursor: grabbing; } .orb__figure { position: absolute; left: 50%; top: 50%; width: var(--disc); height: var(--disc); padding: 0px; background: none; border: 0px; will-change: transform, opacity; } .orb__disc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(120% 120% at 32% 26%, color-mix(in oklab, var(--paper-2) 90%, transparent), var(--paper-0) 72%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 38%, transparent), inset 0 1px 0 color-mix(in oklab, var(--brass) 20%, transparent), 0 6px 18px rgb(0 0 0 / .55); transition: box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast); } .orb__mark { font-family: var(--font-display); font-weight: 300; font-size: calc(var(--disc) * .4); letter-spacing: .02em; color: color-mix(in oklab, var(--brass-2) 76%, var(--ink-0)); line-height: 1; } .orb__figure:hover .orb__disc, .orb__figure:focus-visible .orb__disc { box-shadow: inset 0 0 0 1px var(--brass), inset 0 1px 0 color-mix(in oklab, var(--brass) 45%, transparent), 0 0 24px color-mix(in oklab, var(--brass) 34%, transparent), 0 6px 18px rgb(0 0 0 / .55); } .orb__figure:focus-visible { outline: none; } .fallout__hint { margin-block-start: clamp(1.25rem, 3vw, 2rem); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); opacity: .7; } /* ── what followed ────────────────────────────────────────────────── Native overflow and scroll-snap; no script. The fades are two panels over a still parent rather than a mask on the scroller — a mask there has to be re-rasterised on every scrolled frame, which is what made the study rail flicker. */ .wake { position: relative; margin-block-start: clamp(3rem, 7vw, 4.5rem); } .wake::before, .wake::after { content: ""; position: absolute; top: 0px; bottom: 0px; width: 3.5rem; z-index: 2; pointer-events: none; } .wake::before { inset-inline-start: 0px; background: linear-gradient(90deg, var(--paper-0), transparent); } .wake::after { inset-inline-end: 0px; background: linear-gradient(270deg, var(--paper-0), transparent); } @media (max-width: 47.999rem) { .wake::before, .wake::after { width: 1.5rem; } } /* scroll-padding matches the row's own inset, or snapping lands the first card against the container edge and leaves the row resting a gutter's width off zero. */ .wake__row { display: flex; gap: clamp(.9rem, 2vw, 1.25rem); list-style: none; margin: 0px; padding: .25rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter); overflow: auto hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; } .wake__row::-webkit-scrollbar { display: none; } .wake__row:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: var(--r-md); } .wake__card { flex: 0 0 min(76vw, 21rem); scroll-snap-align: start; display: grid; align-content: start; padding: clamp(1.25rem, 3vw, 1.6rem); border-radius: var(--r-sm); background: color-mix(in oklab, var(--surface) 38%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); } .wake__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } .wake__figure { margin-block-start: .7rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.05rem); line-height: 1.1; letter-spacing: -.026em; color: color-mix(in oklab, var(--brass-2) 78%, var(--ink-0)); } .wake__body { margin-block-start: .9rem; font-family: var(--font-read); font-size: var(--step--1); line-height: 1.72; color: var(--ink-2); font-weight: 300; } @media (min-width: 64rem) { .wake__card { flex-basis: 23rem; } } /* No scroll-behavior here on purpose: the arrows already pass their own behaviour to scrollBy, and declaring it in CSS as well makes every programmatic scroll animate — including the ones meant to be instant, which then override each other mid-flight. */ .wake__controls { display: flex; gap: .5rem; justify-content: flex-end; padding-inline: var(--gutter); margin-block-start: clamp(.75rem, 2vw, 1.1rem); } .wake__arrow { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-soft); transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); } .wake__arrow:hover:not(:disabled) { color: var(--ink-0); background: color-mix(in oklab, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); } .wake__arrow:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } .wake__arrow:disabled { opacity: .3; cursor: default; } /* ── the one taken up ───────────────────────────────────────────── */ .figure { position: fixed; inset: 0px; width: 100%; height: 100%; max-width: none; max-height: none; border: 0px; padding: 0px; margin: 0px; background: transparent; overflow: auto; overscroll-behavior: contain; } .figure:not([open]) { display: none; } .figure::backdrop { background: color-mix(in oklab, #000 76%, transparent); backdrop-filter: blur(7px) saturate(120%); } .figure__inner { min-height: 100%; display: grid; place-items: center; padding: clamp(3.75rem, 8vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem); } .figure__close { position: fixed; top: clamp(.9rem, 2.5vw, 1.6rem); inset-inline-end: clamp(.9rem, 2.5vw, 1.6rem); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-1); background: color-mix(in oklab, var(--surface) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(8px); transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease-out); } .figure__close:hover { color: var(--ink-0); background: var(--surface); transform: scale(1.06); } .figure__card { width: min(100%, 32rem); text-align: start; padding: clamp(1.75rem, 4.5vw, 2.75rem); border-radius: var(--r-md); background: color-mix(in oklab, var(--paper-2) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 26%, transparent), var(--shadow-md); } .figure__mark { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; color: color-mix(in oklab, var(--brass-2) 80%, var(--ink-0)); background: radial-gradient(120% 120% at 32% 26%, color-mix(in oklab, var(--paper-2) 90%, transparent), var(--paper-0) 72%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 42%, transparent); } .figure__name { margin-block-start: 1.35rem; font-size: var(--step-2); font-weight: 300; letter-spacing: -.026em; line-height: 1.16; color: var(--ink-0); } .figure__meta { margin-block-start: .6rem; display: flex; flex-wrap: wrap; gap: .5rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .figure__dot { opacity: .6; } .figure__gave { margin-block-start: 1.35rem; font-family: var(--font-read); font-size: var(--step-0); line-height: 1.75; color: var(--ink-1); font-weight: 300; } .figure__faith { margin-block-start: 1.1rem; padding-block-start: 1.1rem; border-top: 1px solid var(--line-soft); font-family: var(--font-read); font-style: italic; font-size: var(--step--1); line-height: 1.75; color: var(--brass-ink); } @media (prefers-reduced-motion: no-preference) { .figure[open]::backdrop { animation: margins-veil 320ms var(--ease-out) both; } .figure[open] .figure__inner { animation: margins-rise 460ms var(--ease-out) both; } } .prayer { position: relative; isolation: isolate; padding-block: clamp(5rem, 12vw, 9rem); overflow: clip; border-block: 1px solid var(--line-soft); background: linear-gradient(180deg, color-mix(in oklab, var(--paper-2) 40%, transparent), transparent 45%, color-mix(in oklab, var(--paper-2) 40%, transparent)); } .prayer__form { position: absolute; z-index: -1; inset: 0px; opacity: var(--prayer-form-opacity); } @supports (mask-image: url("/assets/img/prayer-form.webp")) or (-webkit-mask-image: url("/assets/img/prayer-form.webp")) { .prayer__form { background: var(--hero-form-ink); mask-image: url("/assets/img/prayer-form.webp"); mask-size: min(48rem, 108%) auto; mask-position: 50% 46%; mask-repeat: no-repeat; } } .prayer__inner { position: relative; text-align: center; } .prayer__head { margin-block-end: clamp(2.25rem, 5vw, 3.25rem); } .prayer__title { font-size: var(--step-3); max-width: 18ch; margin-inline: auto; letter-spacing: -0.026em; } .prayer__body { display: grid; justify-items: center; } .prayer__text { display: grid; gap: clamp(1.5rem, 3.5vw, 2.25rem); max-width: 38rem; } .prayer__stanza { font-family: var(--font-display); font-size: clamp(1.15rem, 0.98rem + 0.72vw, 1.6rem); font-style: italic; font-weight: 300; line-height: 1.52; letter-spacing: -0.012em; color: var(--ink-1); font-variation-settings: "SOFT" 40, "WONK" 1; text-wrap: balance; } .prayer__stanza span { display: block; } .prayer__stanza:last-child { color: var(--brass-ink); font-size: var(--step-1); } .prayer__ref { margin-block-start: clamp(2rem, 4vw, 2.75rem); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .prayer__copy { margin-block-start: 1.6rem; } /* ══════════════════════════════════════════════ lectern ═══════════════ A question written on a ruled line, not typed into a box. There is no field here in the usual sense: the input has no border, no fill and no corner radius of its own — the rule underneath it is the whole of it, and the mark in the margin is where a scribe's would be. Everything below is centred on that line, because it is the only thing being asked for. */ .lectern { padding-block: clamp(5.5rem, 13vw, 10rem); position: relative; isolation: isolate; overflow: clip; } .lectern::before { content: ""; position: absolute; inset-inline: var(--gutter); top: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } /* held low: the upper half of this painting is unlit wall, and the books and the open manuscript are all along its bottom edge */ .lectern__ground { background-position: 50% 40%; background-image: image-set(url("/assets/img/lectern-ground-tall-840.avif") type("image/avif"), url("/assets/img/lectern-ground-tall-840.webp") type("image/webp")); } :root:not([data-theme="light"]) .lectern__ground, :root[data-theme="dark"] .lectern__ground { opacity: .22; } @media (min-width: 64rem) { .lectern__ground { background-position: 50% 38%; background-image: image-set(url("/assets/img/lectern-ground-960.avif") type("image/avif"), url("/assets/img/lectern-ground-960.webp") type("image/webp")); } } @media (min-width: 90rem) { .lectern__ground { background-image: image-set(url("/assets/img/lectern-ground-1440.avif") type("image/avif"), url("/assets/img/lectern-ground-1440.webp") type("image/webp")); } } .lectern__inner { display: grid; justify-items: center; text-align: center; } .lectern__kicker { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.1rem); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .3em; text-transform: uppercase; color: var(--brass-ink); text-indent: .3em; } .lectern__rule { width: clamp(1.75rem, 6vw, 3.5rem); height: 1px; flex: 0 0 auto; background: linear-gradient(90deg, transparent, var(--line-strong)); } .lectern__rule:last-child { background: linear-gradient(90deg, var(--line-strong), transparent); } .lectern__title { margin-block-start: clamp(1.1rem, 2.5vw, 1.75rem); font-size: var(--step-4); font-weight: 300; line-height: 1.04; letter-spacing: -.034em; max-width: 16ch; text-wrap: balance; } .lectern__title em { font-style: italic; color: var(--brass-ink); font-variation-settings: "SOFT" 40, "WONK" 1; } .lectern__lede { margin-block-start: clamp(1.1rem, 2.5vw, 1.6rem); max-width: 48ch; font-size: var(--step-0); line-height: 1.78; color: var(--ink-2); font-weight: 300; text-wrap: pretty; } /* ── the line ───────────────────────────────────────────────────── */ .askline { width: min(100%, 44rem); margin-block-start: clamp(2.75rem, 6vw, 4.25rem); } .askline__line { position: relative; display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: center; gap: clamp(.7rem, 2vw, 1.1rem); padding-block-end: clamp(.7rem, 1.6vw, 1rem); border-bottom: 1px solid var(--line-strong); transition: border-color var(--t-mid) var(--ease-out); } .askline__line::after { content: ""; position: absolute; inset-inline: 0px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: 0; transform: scaleX(.6); transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); } .askline__line:focus-within { border-bottom-color: color-mix(in oklab, var(--brass) 45%, transparent); } .askline__line:focus-within::after { opacity: 1; transform: none; } .askline__mark { color: var(--brass); font-size: 1rem; opacity: .55; line-height: 1; transition: opacity var(--t-mid); } .askline__line:focus-within .askline__mark { opacity: 1; } /* No border, no fill, no radius: the rule underneath is the field. */ .askline__input { width: 100%; background: none; border: 0px; padding: 0px; border-radius: 0px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.2rem, 1rem + 1.05vw, 1.85rem); line-height: 1.3; letter-spacing: -.022em; color: var(--ink-0); text-align: start; } .askline__input:focus { outline: none; } .askline__input::placeholder { color: var(--ink-3); font-style: italic; opacity: 1; } .askline__go { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); transition: color var(--t-fast), gap var(--t-fast); } .askline__go:hover, .askline__line:focus-within .askline__go { color: var(--brass-ink); gap: .8rem; } .askline__go:focus-visible { outline: 1px solid var(--brass); outline-offset: 5px; border-radius: 2px; } .askline__hint { margin-block-start: clamp(.9rem, 2vw, 1.25rem); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); opacity: .8; } /* ── the turn ───────────────────────────────────────────────────── */ .lectern__turn { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 1.5rem); margin-block-start: clamp(3rem, 7vw, 4.75rem); width: min(100%, 26rem); } .lectern__turn-rule { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .lectern__turn-mark { color: var(--brass); opacity: .5; font-size: .7rem; line-height: 1; } .lectern__slips-label { margin-block-start: clamp(1.5rem, 3.5vw, 2.25rem); font-family: var(--font-read); font-style: italic; font-size: var(--step--1); color: var(--ink-3); } /* ── the slips ────────────────────────────────────────────────────── Square-cornered on purpose — a pill reads as a filter on a dashboard, and these are meant to read as paper. The fraction of a degree on each is what keeps a wrapped row from looking machine-set. */ .chip-slips { list-style: none; margin: clamp(1.25rem, 3vw, 1.85rem) auto 0px; padding: 0px; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .55rem; max-width: 60rem; } .chip-slip__btn { display: block; font-family: var(--font-read); font-size: var(--step--1); line-height: 1.35; color: var(--ink-2); padding: .58rem 1.05rem; border-radius: 2px; background: color-mix(in oklab, var(--surface) 34%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); } .chip-slip:nth-child(3n) .chip-slip__btn { transform: rotate(-.35deg); } .chip-slip:nth-child(3n + 2) .chip-slip__btn { transform: rotate(.3deg); } .chip-slip__btn:hover { color: var(--ink-0); background: color-mix(in oklab, var(--surface) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 42%, transparent); transform: translateY(-2px) rotate(0deg); } .chip-slip__btn:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } /* On a phone these stack one per row, so nineteen of them would bury the line they belong to. The first eight are ordered for exactly this: what is left is the shortlist, not the leftovers. */ @media (max-width: 63.999rem) { .chip-slip:nth-child(n + 9) { display: none; } } @media (max-width: 26rem) { .chip-slips { gap: .5rem .45rem; } .chip-slip__btn { font-size: var(--step--2); padding: .5rem .85rem; } } /* While an answer is being read the slips step back rather than leave: they are still there to pick up afterwards. */ .chip-slips { transition: opacity var(--t-slow) var(--ease-soft); } .chip-slips[data-receded] { opacity: .3; } /* ── the answer ───────────────────────────────────────────────────── Set as prose and ranged left, not centred: the section is centred but an answer is something to read, and centred prose is not. */ .answer { width: min(100%, 40rem); margin-block-start: clamp(2.25rem, 5vw, 3.25rem); text-align: start; } .answer[hidden], .helpnow[hidden] { display: none; } .answer__asked { display: flex; gap: .7rem; font-family: var(--font-read); font-style: italic; font-size: var(--step--1); line-height: 1.6; color: var(--ink-3); padding-block-end: clamp(.9rem, 2vw, 1.2rem); border-bottom: 1px solid var(--line-soft); } .answer__asked::before { content: "\201C"; font-family: var(--font-display); font-size: 1.5em; line-height: .7; color: var(--brass); opacity: .55; flex: 0 0 auto; } .answer__body { margin-block-start: clamp(1.1rem, 2.5vw, 1.6rem); font-family: var(--font-read); font-size: calc(var(--step-0) * 1.04); line-height: 1.82; color: var(--ink-1); font-weight: 300; white-space: pre-wrap; min-height: 1.82em; } /* the scribe's hand, waiting or writing */ .answer[data-state="waiting"] .answer__body::after, .answer[data-state="streaming"] .answer__body::after { content: ""; display: inline-block; width: .46ch; height: 1.02em; margin-inline-start: .12em; vertical-align: -.16em; background: var(--brass); opacity: .85; } @media (prefers-reduced-motion: no-preference) { .answer[data-state="waiting"] .answer__body::after, .answer[data-state="streaming"] .answer__body::after { animation: quill 1.05s steps(2, jump-none) infinite; } @keyframes quill { 50% { opacity: .1; } } } .answer__note { margin-block-start: clamp(1.1rem, 2.5vw, 1.5rem); font-family: var(--font-read); font-style: italic; font-size: var(--step--1); line-height: 1.7; color: var(--brass-ink); } .answer__foot { margin-block-start: clamp(1.5rem, 3.5vw, 2.25rem); padding-block-start: clamp(1.1rem, 2.5vw, 1.5rem); border-top: 1px solid var(--line-soft); display: grid; gap: 1.1rem; } .answer__caveat { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; line-height: 1.8; text-transform: uppercase; color: var(--ink-3); opacity: .85; } .answer__acts { display: flex; flex-wrap: wrap; gap: .6rem .75rem; } .answer__act { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-2); padding: .6rem 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-soft); transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); } .answer__act:hover { color: var(--ink-0); background: color-mix(in oklab, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); } .answer__act:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } /* when the answer itself asked them to write, that button leads */ .answer__foot[data-urge] .answer__act--letter { color: var(--ink-0); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 52%, transparent); background: color-mix(in oklab, var(--brass) 10%, transparent); } /* This is the other half of the offer, not a footnote to it — set as a control rather than small print so it reads as a choice on the way in. */ .askline__letter { display: inline-flex; align-items: center; gap: .5rem; margin-block-start: 1.05rem; padding: .55rem 1.05rem; border-radius: 999px; font-family: var(--font-ui); font-size: var(--step--1); font-weight: 500; letter-spacing: -.004em; text-transform: none; color: var(--brass-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 34%, transparent); transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); } .askline__letter::after { content: "\2192"; font-size: 1.05em; line-height: 1; transition: transform var(--t-fast) var(--ease-out); } .askline__letter:hover { color: var(--ink-0); background: color-mix(in oklab, var(--brass) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 58%, transparent); } .askline__letter:hover::after { transform: translateX(3px); } .askline__letter:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } /* ── when it is not a question for a machine ──────────────────────── Deliberately unlike the answer: this never came from the model, and it should not look as though it did. */ .helpnow { width: min(100%, 40rem); margin-block-start: clamp(2.25rem, 5vw, 3.25rem); text-align: start; padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--r-md); background: color-mix(in oklab, var(--paper-2) 62%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 30%, transparent); } .helpnow__eyebrow { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); } .helpnow__title { margin-block-start: .7rem; font-size: var(--step-2); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; color: var(--ink-0); } .helpnow__body { margin-block-start: .9rem; font-family: var(--font-read); font-size: var(--step-0); line-height: 1.75; color: var(--ink-1); font-weight: 300; } .helpnow__lines { margin-block-start: 1.5rem; display: grid; gap: .6rem; } .helpnow__line { display: flex; align-items: baseline; gap: .9rem; padding: .85rem 1.1rem; border-radius: var(--r-sm); text-decoration: none; background: color-mix(in oklab, var(--surface) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); transition: background-color var(--t-fast), box-shadow var(--t-fast); } .helpnow__line:hover { background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 45%, transparent); } .helpnow__num { font-family: var(--font-mono); font-size: var(--step-1); letter-spacing: .06em; color: var(--brass-ink); flex: 0 0 auto; } .helpnow__what { font-family: var(--font-read); font-size: var(--step--1); line-height: 1.5; color: var(--ink-2); } .helpnow__after { margin-block-start: 1.25rem; font-family: var(--font-read); font-style: italic; font-size: var(--step--1); line-height: 1.7; color: var(--ink-3); } .helpnow__aside { margin-block-start: 1rem; padding-block-start: 1rem; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; line-height: 1.8; color: var(--ink-3); opacity: .8; } .helpnow .answer__acts { margin-block-start: 1.5rem; } /* ── the scroll, lifted out of the margins ────────────────────────── Named for the heading it carries and NOT for what it does, because `.ask` is already the FAQ's own accordion — a dialog answering to the same class hides every closed question on the page. */ .margins { position: fixed; inset: 0px; width: 100%; height: 100%; max-width: none; max-height: none; border: 0px; padding: 0px; margin: 0px; background: transparent; overflow: auto; overscroll-behavior: contain; } .margins:not([open]) { display: none; } .margins::backdrop { background: color-mix(in oklab, #000 74%, transparent); backdrop-filter: blur(7px) saturate(120%); } .margins__inner { min-height: 100%; display: grid; place-items: center; padding: clamp(3.75rem, 8vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem); } .margins__slot { width: min(100%, 34rem); } .margins__close { position: fixed; top: clamp(.9rem, 2.5vw, 1.6rem); inset-inline-end: clamp(.9rem, 2.5vw, 1.6rem); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-1); background: color-mix(in oklab, var(--surface) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(8px); transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease-out); } .margins__close:hover { color: var(--ink-0); background: var(--surface); transform: scale(1.06); } .margins__close:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .margins[open]::backdrop { animation: margins-veil 320ms var(--ease-out) both; } .margins[open] .margins__inner { animation: margins-rise 460ms var(--ease-out) both; } @keyframes margins-veil { from { opacity: 0; } } @keyframes margins-rise { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); } } } .about { padding-block: var(--section-y); position: relative; isolation: isolate; overflow: clip; } /* The garden, on the same terms as the other two sections: the whole section rather than a figure in its corner, and cut two ways so the narrow screens get an upright garden instead of a strip of one. */ .about__ground { background-position: 50% 42%; background-image: image-set(url("/assets/img/about-ground-tall-640.avif") type("image/avif"), url("/assets/img/about-ground-tall-640.webp") type("image/webp")); } /* This one carries more light than the other two grounds — the angel and the lamplit city are both in it — so it is held further back than they are, and further still once the wide cut brings the angel into frame. */ :root:not([data-theme="light"]) .about__ground, :root[data-theme="dark"] .about__ground { opacity: .13; } @media (min-width: 64rem) { .about__ground { /* Anchored to the right edge, so the figure keeps to the right of the section at every width. Centred, the crop lands on the sleeping disciples and loses Him off the edge entirely. */ background-position: 100% 45%; background-image: image-set(url("/assets/img/about-ground-960.avif") type("image/avif"), url("/assets/img/about-ground-960.webp") type("image/webp")); } :root:not([data-theme="light"]) .about__ground, :root[data-theme="dark"] .about__ground { opacity: .1; } } @media (min-width: 90rem) { .about__ground { background-image: image-set(url("/assets/img/about-ground-1440.avif") type("image/avif"), url("/assets/img/about-ground-1440.webp") type("image/webp")); } } .about::before { content: ""; position: absolute; inset-inline: var(--gutter); top: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .about__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); } @media (min-width: 64rem) { .about__grid { grid-template-columns: minmax(0px, 19rem) minmax(0px, 1fr); align-items: start; } .about__figure { position: sticky; top: calc(var(--header-h) + 3rem); } } .known { margin: 0px; width: 100%; max-width: 22rem; justify-self: center; text-align: center; isolation: isolate; } .known__art { position: relative; width: 100%; aspect-ratio: 360 / 310; color: var(--brass); pointer-events: none; } .known__canvas, .known__fallback { position: absolute; inset: 0px; width: 100%; height: 100%; } .known__canvas { display: none; } .known__flow { display: none; position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 2; } .known.is-enhanced .known__flow { display: block; } .known__controls { display: flex; justify-content: center; align-items: center; gap: 0.35rem; position: relative; z-index: 3; } .known.is-enhanced .known__canvas { display: block; } .known.is-enhanced .known__fallback { display: none; } .known__verse { margin: 0.8rem 0px 0px; color: var(--ink-1); font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.65rem); font-weight: 300; font-variation-settings: "SOFT" 40, "WONK" 1; line-height: 1.42; letter-spacing: -0.035em; } .known__verse p { margin: 0px; } .known__line { display: block; overflow: clip; padding-block: 0.06em; } .known__line > span { display: block; } .known__line--promise { margin-top: 0.14em; padding-block: 0.1em 0.16em; color: var(--brass-ink); font-size: 1.7em; font-style: italic; line-height: 1.2; letter-spacing: -0.055em; } .known__reference { margin-top: 1.2rem; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.625rem; font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; } .known__replay { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 72px; min-height: 44px; margin-top: 0.8rem; padding: 0.5rem; color: var(--ink-3); font-family: var(--font-ui); font-size: 0.65rem; transition: color var(--t-fast); } .known__replay:hover { color: var(--brass-ink); } .known__replay:focus-visible { outline: 1px solid var(--brass-ink); outline-offset: 2px; } @media (min-width: 64rem) and (max-height: 740px) { .known { max-width: 17rem; } .known__art { width: 82%; margin-inline: auto; } .known__verse { margin-top: 0.2rem; font-size: 1.35rem; } .known__reference { margin-top: 0.8rem; } .known__replay { margin-top: 0.2rem; } } @media (max-width: 63.999rem) { .known { position: relative; margin-bottom: 1rem; } .known__art { width: 88%; margin-inline: auto; } .known__verse { font-size: clamp(1.45rem, 4.8vw, 1.7rem); } } @media (prefers-reduced-motion: reduce) { .known [data-known-line], .known__reference { opacity: 1 !important; transform: none !important; } .known__controls, .known__flow { display: none !important; } } @media print { .known__canvas, .known__flow, .known__controls { display: none !important; } .known .known__fallback { display: block !important; } .known [data-known-line], .known__reference { opacity: 1 !important; transform: none !important; } } .about__prose { max-width: 40rem; } .about__prose p { color: var(--ink-2); line-height: 1.82; } .about__prose p + p { margin-block-start: 1.15em; } .about__prose h3 { font-size: var(--step-1); margin-block: clamp(2rem, 4vw, 2.75rem) 1.1rem; } .about__prose .section-head__title { margin-block-end: 1.75rem; max-width: 20ch; } .dropcap::first-letter { float: left; font-family: var(--font-display); font-size: 3.35em; line-height: 0.82; padding-inline-end: 0.09em; padding-block-start: 0.06em; color: var(--ink-0); font-variation-settings: "SOFT" 20, "WONK" 1; } .creed { display: grid; gap: 1.1rem; counter-reset: c 0; margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem); } .creed li { display: grid; grid-template-columns: 2rem minmax(0px, 1fr); align-items: start; color: var(--ink-2); line-height: 1.72; font-size: var(--step--1); } .creed__body { min-width: 0px; } .creed li::before { counter-increment: c 1; content: counter(c, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--step--2); color: var(--brass-ink); padding-block-start: 0.5em; } .creed strong { display: block; color: var(--ink-0); font-weight: 600; font-size: var(--step-0); font-family: var(--font-display); letter-spacing: -0.01em; margin-block-end: 0.18em; } .signature { margin-block-start: clamp(2rem, 4vw, 2.75rem); padding-block-start: 1.5rem; border-top: 1px solid var(--line-soft); display: grid; gap: 0.3rem; } .signature__name { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--ink-0); font-variation-settings: "SOFT" 60, "WONK" 1; } .signature__meta { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } /* isolate, so the ground's negative z-index stays inside this section rather than sinking behind the page; clip, so its masked edges end at the section's own and not somewhere down the colophon. */ .connect { padding-block: var(--section-y); position: relative; isolation: isolate; overflow: clip; } .connect::before { content: ""; position: absolute; inset-inline: var(--gutter); top: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } /* Him at the door on one side and everyone who came on the other, which is how this section is laid out anyway — the asking on the left, the form to do it with on the right. The phone cut keeps the door and the near edge of the crowd, because a band of that painting scaled up to cover a column would be nothing but robes. */ .connect__ground { background-position: 50% 46%; background-image: image-set(url("/assets/img/connect-ground-tall-840.avif") type("image/avif"), url("/assets/img/connect-ground-tall-840.webp") type("image/webp")); } /* Further forward than the other grounds, and further still on a wide screen: there is a panel over the right half of this section, so the painting only has one half to be seen in. On a phone it is directly behind the reading and is held back accordingly. */ :root:not([data-theme="light"]) .connect__ground, :root[data-theme="dark"] .connect__ground { opacity: .21; } @media (min-width: 64rem) { .connect__ground { /* Held left of centre, so the door he is standing in stays behind the column that does the asking rather than sliding off the edge. */ background-position: 36% 50%; background-image: image-set(url("/assets/img/connect-ground-960.avif") type("image/avif"), url("/assets/img/connect-ground-960.webp") type("image/webp")); } :root:not([data-theme="light"]) .connect__ground, :root[data-theme="dark"] .connect__ground { opacity: .26; } } @media (min-width: 90rem) { .connect__ground { background-image: image-set(url("/assets/img/connect-ground-1440.avif") type("image/avif"), url("/assets/img/connect-ground-1440.webp") type("image/webp")); } } .connect__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (min-width: 64rem) { .connect__grid { grid-template-columns: 1fr minmax(0px, 26rem); } } .connect__lede { margin-block-start: 1.5rem; max-width: 42ch; color: var(--ink-2); font-size: var(--step-0); line-height: 1.8; } .facts { margin-block-start: clamp(2rem, 4vw, 2.75rem); display: grid; gap: 0px; } .facts__row { display: grid; gap: 0.2rem 0.75rem; padding-block: 1rem; border-top: 1px solid var(--line-soft); } @media (min-width: 34rem) { .facts__row { grid-template-columns: 7rem 1fr; align-items: baseline; } } .facts dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .facts dd { color: var(--ink-1); font-size: var(--step--1); line-height: 1.65; } .connect__form-wrap { position: relative; } .form { display: grid; gap: 1.15rem; } .field { display: grid; gap: 0.45rem; } .field label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .field input, .field textarea, .field select { width: 100%; padding: 0.78rem 0.9rem; border-radius: var(--r-sm); border: 0px; background: color-mix(in oklab, var(--paper-0) 65%, transparent); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-0); font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.5; transition: box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast); } .field textarea { resize: vertical; min-height: 7.5rem; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; } .field input:hover, .field textarea:hover, .field select:hover { box-shadow: inset 0 0 0 1px var(--line-strong); } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--brass), 0 0 0 3px color-mix(in oklab, var(--brass) 20%, transparent); } .field [aria-invalid="true"] { box-shadow: inset 0 0 0 1px color-mix(in oklab, #b4442e 70%, var(--line)); } .select-wrap { position: relative; display: grid; } .select-wrap select { appearance: none; padding-inline-end: 2.4rem; cursor: pointer; } .select-wrap svg { position: absolute; right: 0.85rem; top: 50%; translate: 0px -50%; color: var(--ink-3); pointer-events: none; } .field__error { font-family: var(--font-ui); font-size: var(--step--2); color: color-mix(in oklab, #c1503a 80%, var(--ink-0)); } .field__meta { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; } .form__fineprint { font-size: var(--step--2); color: var(--ink-3); line-height: 1.6; text-align: center; } .form__done { display: grid; gap: 0.6rem; justify-items: center; text-align: center; padding-block: 1.5rem; } .form__done svg { color: var(--brass); } .form__done h3 { font-size: var(--step-2); margin-block-start: 0.5rem; } .form__done p { color: var(--ink-2); font-size: var(--step--1); max-width: 32ch; } .form__done .link-btn { margin-block-start: 0.75rem; } [data-submit][aria-busy="true"] { opacity: 0.7; pointer-events: none; } .colophon { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--paper-2) 45%, transparent)); position: relative; isolation: isolate; overflow: clip; } /* A phone stacks the colophon into a column, so it gets the whole figure. A desktop turns it into a band about four times as wide as it is tall, and the only register of a standing figure that survives being spread that far is the one the wings are in. */ .colophon__ground { background-position: 50% 26%; background-image: image-set(url("/assets/img/footer-ground-tall-840.avif") type("image/avif"), url("/assets/img/footer-ground-tall-840.webp") type("image/webp")); } :root:not([data-theme="light"]) .colophon__ground, :root[data-theme="dark"] .colophon__ground { opacity: .16; } @media (min-width: 48rem) { .colophon__ground { background-position: 50% 50%; background-image: image-set(url("/assets/img/footer-ground-960.avif") type("image/avif"), url("/assets/img/footer-ground-960.webp") type("image/webp")); } } .colophon__inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); } @media (min-width: 48rem) { .colophon__inner { grid-template-columns: 1fr 1fr; } } .colophon__mark { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-0); letter-spacing: -0.02em; } .colophon__mark span { font-family: var(--font-mono); font-size: 0.42em; color: var(--ink-3); letter-spacing: 0.04em; } .colophon__line { margin-block-start: 0.5rem; color: var(--ink-3); font-size: var(--step--1); max-width: 32ch; } .colophon__cols { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(1.5rem, 4vw, 3rem); } .colophon__cols .u-label { margin-block-end: 0.9rem; } .colophon__cols ul { display: grid; gap: 0.55rem; font-size: var(--step--1); color: var(--ink-2); list-style: none; padding: 0px; } .colophon__cols a { text-decoration: none; transition: color var(--t-fast); } .colophon__cols a:hover { color: var(--ink-0); text-decoration-line: underline; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: var(--brass); } .colophon__meta li { color: var(--ink-3); font-size: var(--step--2); line-height: 1.55; } .colophon__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block-start: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; color: var(--ink-3); font-variant-numeric: tabular-nums; } .colophon__foot .link-btn { font-family: var(--font-ui); font-size: var(--step--2); letter-spacing: 0px; } } @layer utilities { .u-sr { width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0px; position: absolute !important; } .u-hide { display: none; } [hidden] { display: none !important; } body.is-locked { overflow: hidden; } } @layer print { @media print { .masthead, .opening, .now, .notes, .about, .connect, .colophon, .toolbar, .reader__bar, .reader__progress, .reader__pager, .reader__end, .grain, .toast, .palette, .sheet, .skip-link, .verse__tools { display: none !important; } body { background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-size: 11.5pt; } .reader { position: static !important; display: block !important; width: auto !important; height: auto !important; overflow: visible !important; background: none !important; animation: auto ease 0s 1 normal none running none !important; } .reader:not([open]) { display: none !important; } .reader::backdrop { display: none; } .reader__scroll { overflow: visible !important; height: auto !important; } .reader__inner { width: auto !important; padding: 0px !important; } .reading { max-width: none; } .study__title { font-size: 24pt; } .verse p, .movement p, .questions li { color: rgb(34, 34, 34); } .aside-note, .carry { box-shadow: none; border: 1px solid rgb(221, 221, 221); background: none; } .pull { border-color: rgb(153, 153, 153); } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: rgb(102, 102, 102); } } } @media (prefers-reduced-motion: no-preference) { html[data-motion-live] [data-motion-armed] { opacity: 0; } } }