/* ============================================================ craft.css — material, depth, light 28 Aug 2026 The reference interior reads as a room because of three things the site did not have: grain, light falloff, and depth in the images. Colour was never the gap. This sheet adds the physical layer and leaves the palette, faces and layout alone. Loaded last. Delete the to revert. ============================================================ */ /* ------------------------------------------------------------ 1 · GRAIN The single biggest difference between a flat web page and a photographed surface. Fixed, so it sits like film over the whole composition rather than scrolling with it. Kept under 4% — it should be felt, not seen. ------------------------------------------------------------ */ body::after{ content:""; position:fixed; inset:-50%; z-index:9999; pointer-events:none; opacity:.038; 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='4' 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; will-change:transform; } @media (prefers-reduced-motion:reduce){ body::after{ animation:none; } } /* ------------------------------------------------------------ 2 · LIGHT FALLOFF Flat fills read as paint. Rooms have a source. Each dark band gets one soft, off-centre light and a settling of shadow at its foot — the same logic as a lamp in the corner. ------------------------------------------------------------ */ /* .closing is deliberately excluded — it already carries its own warm radial glow on ::before, which this would have destroyed. */ .sec.dark, .rooms, .method-band, .shell, .sec.plum{ position:relative; background-image: radial-gradient(120% 90% at 18% 8%, rgba(255,241,226,.055) 0%, rgba(255,241,226,0) 58%), radial-gradient(90% 70% at 88% 96%, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 62%); background-repeat:no-repeat; } .sec.bone{ background-image:radial-gradient(120% 80% at 22% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%); } /* a hairline of light where a dark band meets a light one. .closing keeps its existing ::before, so it is left alone. */ .rooms::before, .method-band::before, .shell::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,241,226,.16) 22%, rgba(255,241,226,.16) 78%, transparent); pointer-events:none; z-index:2; } /* ------------------------------------------------------------ 3 · IMAGES WITH DEPTH The old treatment desaturated and stopped. Photographs in a room have a falloff at the edges and weight in the shadows. Vignette + a lifted black point + a touch more contrast. ------------------------------------------------------------ */ .city, .room, .cov.photo, .hero .art, .mich .pf, .dimg{ position:relative; } .city::after, .room::after, .cov.photo::after{ z-index:1; } .hero .art::before, .mich .pf::before, .dimg::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(112% 92% at 50% 42%, rgba(0,0,0,0) 42%, rgba(20,13,10,.42) 100%); } .city::before, .room::before, .cov.photo::before{ filter:grayscale(.52) sepia(.20) saturate(1.14) contrast(1.07) brightness(.99); } .hero .art, .mich .pf{ filter:grayscale(.30) sepia(.14) saturate(1.10) contrast(1.06); } /* an inner edge, the way a print sits inside a mount */ .city, .room, .cov, .hero .art, .mich .pf{ box-shadow:inset 0 0 0 1px rgba(255,241,226,.07), 0 18px 44px rgba(20,13,10,.14); } /* ------------------------------------------------------------ 4 · SURFACES Cards and bands lift off the ground very slightly instead of being drawn onto it. ------------------------------------------------------------ */ .symptoms.diag{ box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 34px rgba(20,13,10,.07); } .proof .st .n{ text-shadow:0 1px 0 rgba(255,255,255,.35); } .marq{ box-shadow:inset 0 12px 22px -14px rgba(20,13,10,.14), inset 0 -12px 22px -14px rgba(20,13,10,.14); } /* ------------------------------------------------------------ 5 · TYPE, FINISHED Cormorant has optical sizing and real italics; neither was being asked for. Display sizes want tighter tracking than body, and punctuation wants to hang. ------------------------------------------------------------ */ html{ -moz-osx-font-smoothing:grayscale; } h1,h2,h3,.dsp,.cy,.rname,.ctitle,.mname{ font-optical-sizing:auto; font-variant-ligatures:common-ligatures contextual; font-kerning:normal; } .hero h1{ letter-spacing:-.038em; } .tension .thesis-screen h2{ letter-spacing:-.034em; } .closing h2, .shell h2{ letter-spacing:-.032em; } p.body, .lead, .sig, .prose p{ hanging-punctuation:first last; } q, .tq q, .quote q{ hanging-punctuation:first; } .it, em, i{ letter-spacing:.004em; } /* italics need a hair more room */ .code, .label, .tn, .rmeta, .ix, .cnum{ font-feature-settings:"case" 1; } .proof .st .n, .num, .money{ font-variant-numeric:lining-nums tabular-nums; } /* ------------------------------------------------------------ 6 · MOTION THAT SETTLES The reveals were quick and uniform. Slower, with a longer travel and a real ease, reads as considered rather than as an effect. ------------------------------------------------------------ */ .rv{ transform:translateY(34px) scale(.995); transition:opacity 1.25s cubic-bezier(.16,.84,.28,1), transform 1.35s cubic-bezier(.16,.84,.28,1); } .rv.in{ transform:none; } .rv.d1{ transition-delay:.10s } .rv.d2{ transition-delay:.20s } .rv.d3{ transition-delay:.30s } /* images breathe as they arrive */ .city::before, .room::before{ transition:filter 1.1s ease, transform 1.6s cubic-bezier(.16,.84,.28,1); } /* the hero unveil, slower and from further */ .hero .art{ animation-duration:1.9s !important; } @media (prefers-reduced-motion:reduce){ .rv{ transform:none; transition:opacity .3s linear; } .city::before, .room::before{ transition:none; } .hero .art{ animation:none !important; clip-path:none !important; } }