page is one image and two lines of type. Silent by design — interactivity is a dial here, and this is it turned to zero. */ #day{ --canvas:#0e0b12; --ink:#efe6df; --accent:#f0894e; --muted:#9a8b86; background:var(--canvas); color:var(--ink); font-family:"Fraunces",Georgia,serif; } #day .field{ overflow:hidden; } #day canvas{ position:absolute; inset:0; width:100%; height:100%; display:block } /* Everything meant to be READ lives here, a sibling of .field, so it is inset clear of the fixed bar and footer. Anchored to the published safe-area variables — never a raw 0 / 1rem / vh from the viewport edge — so the type tracks the real, measured chrome at every width instead of guessing it. */ #day .readout{ position:absolute; inset:0; pointer-events:none; } #day .title{ position:absolute; left:clamp(1rem,5vw,3rem); top:calc(var(--safe-top) + clamp(.5rem,3vh,1.5rem)); right:clamp(1rem,5vw,3rem); font-weight:500; letter-spacing:-.01em; line-height:1.02; font-size:clamp(2.6rem,13vw,7rem); text-wrap:balance; text-shadow:0 1px 30px rgba(0,0,0,.45); } #day .caption{ position:absolute; left:clamp(1rem,5vw,3rem); right:clamp(1rem,5vw,3rem); bottom:calc(var(--safe-bottom) + clamp(.5rem,3vh,1.5rem)); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:clamp(.72rem,3.4vw,.9rem); letter-spacing:.04em; line-height:1.5; color:var(--muted); max-width:38ch; } #day .caption b{ font-weight:400; color:var(--accent) }

The long light

A made horizon for 3 September. Ridges by chance, the same every time you come back — no sound, nothing to press. Just somewhere to rest your eyes.