/* Museum layer for the v8 variations: the page becomes a small exhibition. Switched on by . */ /* ---------- a room: one painting, centred between sections, one credit line ---------- */ .room { background: var(--wall, var(--bg)); padding: clamp(48px, 8vh, 80px) 0; border-top: 1px solid var(--line); } .room .work { width: var(--w, 56%); margin: 0 auto; } @media (max-width: 860px) { .room .work { width: 100%; } } .room img { display: block; width: 100%; height: auto; box-shadow: 0 16px 34px -26px rgba(22,21,15,.5); } .room .wtext { text-align: center; margin: 0 auto 28px; max-width: 46em; font-size: 0.95rem; color: var(--ink-soft); } .room .wtext b { color: var(--ink); font-weight: 600; } .cr { margin-top: 10px; font-size: 0.72rem; color: var(--ink-faint); text-align: center; } .cr i { font-style: italic; } .cr a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-strong); } .cr a:hover { color: var(--ink); text-decoration-color: var(--red); } /* treatments */ html[data-art~="wall-tint"] .room { --wall: #F3F0E9; } html[data-art~="wall-tint"] .room img { outline: 5px solid #D6CEBE; outline-offset: 0; } /* strip: a full-page painting, edge to edge, one viewport tall */ .strip { margin: 0; } .strip figure { margin: 0; position: relative; } .strip img { display: block; width: 100%; height: 100vh; height: 100svh; object-fit: cover; object-position: 50% var(--y, 50%); } .strip .cr, .chapter > .bg > figure .cr { position: absolute; right: 20px; bottom: 16px; margin: 0; color: rgba(255,255,255,.9); text-shadow: 0 1px 8px rgba(0,0,0,.55); text-align: right; } .strip .cr a, .chapter > .bg > figure .cr a { text-decoration-color: rgba(255,255,255,.5); } .strip .cr a:hover, .chapter > .bg > figure .cr a:hover { color: #fff; } .strip + section, .strip + div { border-top: 0 !important; } .strip.has-line figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(transparent, rgba(0,0,0,.42)); pointer-events: none; } .strip .line, .chapter > .bg > figure .line { position: absolute; left: max(24px, calc((100vw - 1120px) / 2 + 28px)); bottom: 44px; z-index: 1; margin: 0; max-width: 22ch; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); text-wrap: balance; } .strip.has-line .cr { z-index: 1; } /* ---------- scrolly (8.5): the painting stays pinned behind its section and dims as the section arrives ---------- */ .chapter { position: relative; } /* the painting lives in a layer exactly as tall as the chapter, so it can only stay pinned while its own section is on screen */ .chapter > .bg { position: absolute; inset: 0; z-index: 0; } .chapter > .bg > figure { position: sticky; top: 0; height: 100vh; margin: 0; overflow: hidden; } .chapter > .bg > figure img { display: block; width: 100%; height: 100%; object-fit: cover; } .chapter > .bg > figure::after { content: ""; position: absolute; inset: 0; background: #0D0C0A; opacity: var(--dim, 0); pointer-events: none; } .chapter > .bg > figure .line, .chapter > .bg > figure .cr { z-index: 1; } .chapter .spacer { position: relative; height: 135vh; } /* the line sits in the middle of the painting, out of the way of the section rising from below */ .chapter > .bg > figure .line { top: 50%; bottom: auto; transform: translateY(-50%); } .chapter > section { position: relative; z-index: 1; background: transparent !important; border-top: 0 !important; } /* text never sits on the painting: it sits on paper cards floating over it — one padding, one gap, everywhere */ .chapter > section { --pad: 32px; --gap: 20px; } .chapter > section .sec-head, .chapter > section .run, .chapter > section .contact > div:first-child, .chapter > section .clock, .chapter > section .runsum { background: rgba(250,250,248,.94); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); border: 1px solid rgba(22,21,15,.08); border-radius: 8px; box-shadow: 0 24px 50px -30px rgba(0,0,0,.45); padding: var(--pad); } .chapter > section .runsum { background: var(--ink); border: 0; } .chapter > section .sec-head { margin-bottom: var(--gap); gap: 40px; } .chapter > section .runwrap { gap: var(--gap); } .chapter > section .runsum { margin-top: var(--gap); } .chapter > section .clock { top: 90px; } .chapter > section .clock .sky { display: none; } /* the timeline as one card: a narrow time column, the spine right beside it */ .chapter > section .ev { grid-template-columns: 64px 1fr; gap: 32px; padding-bottom: 26px; } .chapter > section .ev .t { text-align: left; } .chapter > section .ev::after { left: 74px; } .chapter > section .run::before, .chapter > section .run .fill { left: calc(var(--pad) + 79px); top: calc(var(--pad) + 8px); } .chapter > section .run::before { bottom: var(--pad); } .chapter > section .ev:last-child { padding-bottom: 0; } @media (max-width: 700px) { .chapter > section .ev { grid-template-columns: 1fr; gap: 6px; padding-left: 30px; } .chapter > section .ev::after { left: 2px; } .chapter > section .run::before, .chapter > section .run .fill { left: calc(var(--pad) + 7px); } } /* one by one: blocks wait below the fold and come in in sequence */ html[data-art~="scrolly"] .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } html[data-art~="scrolly"] .reveal.shown { opacity: 1; transform: none; } html[data-art~="scrolly"] .ev { opacity: 0 !important; transform: translateY(26px) !important; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) !important; } html[data-art~="scrolly"] .ev.shown { opacity: 1 !important; transform: none !important; } /* concise: keep the times, titles and evidence; drop the extra prose */ html[data-art~="concise"] .ev:not(.human) p, html[data-art~="concise"] .sec-head p + p, html[data-art~="concise"] .night, html[data-art~="concise"] .runsum p { display: none; } html[data-art~="concise"] .runsum { grid-template-columns: 1fr; } html[data-art~="concise"] .ev { padding-bottom: 26px; } @media (prefers-reduced-motion: reduce) { html[data-art~="scrolly"] .reveal, html[data-art~="scrolly"] .ev { opacity: 1 !important; transform: none !important; } } /* ---------- touches: grain, a hand-drawn underline ---------- */ html[data-art~="touches"] body::after { content: ""; position: fixed; inset: -50%; z-index: 9999; pointer-events: none; opacity: .06; mix-blend-mode: multiply; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .scribble { position: relative; white-space: nowrap; } .scribble svg { position: absolute; left: -2%; width: 104%; bottom: -0.16em; height: 0.34em; overflow: visible; pointer-events: none; } .scribble path { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: scribble 1.1s cubic-bezier(.6,.1,.3,1) forwards .6s; } @keyframes scribble { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .scribble path { animation: none; stroke-dashoffset: 0; } }