/* ============================================================ SECTION 5 - TWO PRINTS 2026-08-20 Replaces the full-bleed photograph. Full bleed was the median move and it slammed straight into the dark demo above it; the print was chosen off the three-up comparison and then never installed, which is the gap this file closes. A print, not a picture: a white margin, a real shadow, half a degree off square, sitting ON the paper rather than filling the viewport. Two of them, because one print with a line beside it left half the section barren, and because one photograph of one woman says this is a product for somebody's grandmother. Two households, two rooms, two lives, and the same object lit on both tables. They overlap. Prints somebody set down on a table overlap; prints laid out on a grid are a catalogue. Hers is in front because the line is hers. MOBILE FIRST. The base is one column, prints stacked with a small overlap, line underneath. The two-column composition is a promotion at 720, not an override at 719. It was 860, which left 720 to 859 in the stacked layout at 1084px tall against 571px two columns up: a 500px discontinuity across one pixel of viewport. Scoped with #tuesdays throughout: a bare class selector loses to any id-scoped rule elsewhere in the build and fails silently. ============================================================ */ /* Plain paper. A night-into-paper gradient was tried here to introduce the dark demo above; it rendered as a muddy brown smear across the top third and read as a printing fault, not a transition. The three up comparison was judged WITH a dark band directly above each variant and this one was chosen on that basis, so the hard seam is the approved seam. */ #tuesdays{ background:var(--paper); padding:clamp(34px,4.5vw,62px) clamp(16px,4vw,44px) clamp(34px,4.5vw,62px); } #tuesdays .room5__in{ max-width:1000px; margin-inline:auto; display:grid; gap:clamp(22px,3vw,44px); grid-template-columns:1fr; align-items:center; } /* ---------- the prints ---------- */ #tuesdays .room5__prints{ position:relative; /* room at the foot for the second print to hang into */ /* Deep enough that his print sits BELOW her face, not across it. A percentage, because the drop has to scale with the print. */ padding:0 0 42% 0; /* Capped and centred while stacked. Uncapped, the prints scaled with the viewport and the single column layout ran 594px at 390 but 917px at 719, growing taller the wider the phone got. */ /* width:100% is load bearing, not tidiness. margin-inline:auto on a GRID ITEM cancels justify-self:stretch, so with an auto width this box shrink-to-fit to 6px until the photographs had intrinsic width, and the section jumped 279px when they loaded. A definite width makes the auto margins distribute leftover space instead of collapsing the box, so the aspect-ratio from the img width/height attributes reserves the space from first paint. Desktop never showed it: the promotion sets margin-inline:0. */ width:100%; max-width:430px; margin-inline:auto; } #tuesdays figure{margin:0} /* THE PRINT MARGIN SCALES WITH THE PRINT. The three-up comparison drew this at 320px wide with a 9px white margin and that is the object that was chosen. Rebuilt here at 451px, 9px read as a thin white line rather than the margin of a photograph, which is what made it stop looking like a print. The margin is a proportion of the print, not a constant, so it holds at every size: 3.1% of the width, with the foot fractionally deeper the way a photographic print is trimmed. Radius, shadow and paper are variant A's own values. */ #tuesdays .room5__prints img{ display:block; width:100%; height:auto; background:var(--paper); border:solid #fff; border-width:3.1% 3.1% 4.4%; border-radius:2px; } /* HERS. In front, larger, tipped left. THE WIDTH IS A CONSTRAINT, NOT A TASTE. His head sits at 40% across his own frame, so hers may only be wide enough that her right edge lands left of that point. With his print at 48% and flush right, the ceiling is 1 - 0.6 x 0.48 = 71%. 64% leaves real clearance. Asserted at every width in the check script, not judged by eye. */ #tuesdays .room5__her{ width:56%; /* variant A's tilt exactly. -1.1deg reads as dropped rather than set down, and at this size half a degree is plainly visible. */ transform:rotate(-.6deg); position:relative; z-index:2; box-shadow: 0 2px 3px rgba(4,20,43,.14), 0 26px 46px -24px rgba(4,20,43,.5); } /* HIS. Behind and below, smaller, tipped the other way, hanging off her lower right corner the way a second photo does when you put it down half on top of the first. */ #tuesdays .room5__him{ /* right:0 at the base. A negative offset here pushed the print past the viewport edge on a phone and produced 21px of horizontal scroll; the gutter it hangs into only exists once the layout is two columns, so the overhang is part of the 860 promotion. */ position:absolute; right:0; bottom:0; width:48%; /* the other way, and gently: 2.4deg made the pair look scattered rather than set down one after the other */ transform:rotate(1.3deg); z-index:1; box-shadow: 0 2px 3px rgba(4,20,43,.12), 0 20px 36px -20px rgba(4,20,43,.5); } /* ---------- the line ---------- */ #tuesdays .room5__line{ margin:0; max-width:17ch; font-family:var(--display); font-weight:400; letter-spacing:-.017em; font-size:clamp(24px,3.1vw,38px); line-height:1.2; color:var(--ink); text-wrap:balance; } /* ---------- the promotion ---------- */ @media (min-width:720px){ /* His print runs PAST the column edge into the gutter. It is what ties the two halves together: without it the type column read as a separate, emptier page sitting beside the photographs. */ #tuesdays .room5__in{ grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:clamp(26px,3vw,44px); } #tuesdays .room5__prints{padding-bottom:clamp(58px,5.5vw,86px); max-width:none; margin-inline:0} /* HER WIDTH IS SET BY HIS FACE. At 78% her print covered 53% of his, and his head sits at 40% across his frame, so the overlap ate the man. Prints that overlap have to overlap where nobody is: at 64% her right edge lands 78px clear of his face and the two prints touch at the corner instead of burying one of them. */ /* 64% BURIED HIM. The two prints are meant to touch at a corner the way a second photograph lands half on the first, but at 64% hers covered the top-left of his and the owner read it as one picture eating another. 56% + his 48% leaves a 4% corner, which is contact rather than occlusion. */ #tuesdays .room5__her{width:56%} /* THE OVERHANG IS A PIXEL VALUE, NOT A PERCENTAGE. At -5% of the column it measured 28px at 1440 and still 28px-ish at 900, while the gutter it hangs into is clamp(26px,3vw,44px) and SHRINKS. So the print grew into the type column and the line ran underneath it at 860 through 1024. 12px is under the 26px gutter floor, so the clearance holds at every width the two column layout is live. */ #tuesdays .room5__him{width:48%; right:-12px} } @media (prefers-reduced-motion:reduce){ #tuesdays .rv{transition:none} } /* ============================================================ THE THREE SMALL THINGS 2026-08-20 None of them are meant to be noticed on their own. That is the difference between craft and effects: an effect announces itself, craft only makes the thing feel more expensive without the reader being able to say why. ============================================================ */ /* ---- 1. THE TYPE, SMALLER ---- 38px against two 450px photographs was competing with them. The photographs are the argument; the line is the caption on the back. Also a wider measure, because the line is now three short sentences and it wants to break between them, not inside them. */ #tuesdays .room5__line{ font-size:clamp(20px,2.3vw,29px); max-width:21ch; } /* ---- 2. SET DOWN ONE AFTER THE OTHER ---- The two prints used to fade in together, which reads as a layout arriving. Staggered, it reads as somebody putting one photograph down and then the other. The reveal is OPACITY ONLY here, deliberately. The house .rv rule animates transform, and transform on these figures already carries the tilt, so a shared transform would fight. Motion is left entirely to the scroll drift below, which owns the translate property. */ /* The delays are written ON these two rules. The house stagger is .rv-2{transition-delay:.14s}, and the `transition` SHORTHAND resets transition-delay to 0, so an id-scoped shorthand here silently threw the stagger away: measured mid-reveal, both prints sat at exactly 0.331 opacity. Longer than .14s besides, because at this size the gap has to be felt as one photograph then another, not as a fade. */ #tuesdays .room5__her{transition:opacity .85s ease .04s} #tuesdays .room5__him{transition:opacity .85s ease .34s} #tuesdays .room5__line{transition:opacity .85s ease .52s} #tuesdays .rv{opacity:0} #tuesdays .rv.in{opacity:1} /* BOTH HALVES OF THE BLANK PAGE GUARD, RE-SCOPED. The house guards are `.no-js .rv` and `.rv-force .rv`, bare class selectors, and the rule directly above is id-scoped, so it OUTRANKS them: with this file loaded and JavaScript off, or the reveal never wired, section 5 would have stayed invisible while every other section showed itself. */ html.no-js #tuesdays .rv, .rv-force #tuesdays .rv{opacity:1; transition:none} /* BOTH HALVES OF THE BLANK PAGE GUARD, RE-SCOPED. The house guards are `.no-js .rv` and `.rv-force .rv`, bare class selectors, and the rule directly above is id-scoped, so it OUTRANKS them: with this file loaded and JavaScript off, or the reveal never wired, section 5 would have stayed invisible while every other section showed itself. That is the same silent-override this whole file is commented about, made by me, one rule after warning about it. */ html.no-js #tuesdays .rv, .rv-force #tuesdays .rv{opacity:1; transition:none} /* ---- 3. THE PAPER REMEMBERS THE LIGHT ---- A warm bloom on the paper behind the prints, the colour of the band that is lit in both photographs. It is the one thing in this section that could only belong to this product: the object's own light, spilling onto the page it is printed on. Radial and dying to nothing, never a flat panel, because a flat overlay in the ground colour is invisible on flat ground and a visible box over anything else. */ #tuesdays{position:relative; isolation:isolate} #tuesdays::before{ content:""; position:absolute; z-index:0; pointer-events:none; left:0; right:0; top:4%; bottom:4%; background:radial-gradient(42% 46% at 34% 52%, rgba(56,182,255,.13) 0%, rgba(56,182,255,.05) 46%, transparent 72%); } #tuesdays .room5__in{position:relative; z-index:1} /* ---- THE DRIFT ---- Scroll-linked, so the back print travels less than the front one and the pair has depth as it passes. 18px and 7px: enough to feel, not enough to see. Progressive on three counts, so a browser without scroll-driven animations, a reader who asked for less motion, or a phone all simply get two still photographs. */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference) and (min-width:720px){ /* ONE TIMELINE FOR BOTH PRINTS. view() gives each element its own progress, and because his print starts lower in the viewport his progress lagged hers: measured, they were drifting in OPPOSITE directions at the same moment, which is not parallax, it is two things wobbling. A named timeline on the container means one progress and two rates, which is what depth actually is. */ #tuesdays .room5__prints{view-timeline:--r5 block} #tuesdays .room5__her, #tuesdays .room5__him{ animation:r5drift linear both; animation-timeline:--r5; animation-range:entry 10% exit 90%; } #tuesdays .room5__her{--drift:9px} #tuesdays .room5__him{--drift:3.5px} } } @keyframes r5drift{ from{translate:0 var(--drift)} to {translate:0 calc(var(--drift) * -1)} } /* ============================================================ THE WORDMARK IN THE EMPTY QUARTER 2026-08-21 The type column carried one line and left the space above it blank. The name goes there, drawn rather than set: a single stroke that runs under the word, overshoots, and loops back on itself the way a hand does when it signs something. The stroke is one SVG path with round caps and no fill, so it reads as ink rather than as a shape. It is deliberately NOT the logo file: a second copy of the mark would compete with the one in the header, where a signature sits under the photographs like a caption. preserveAspectRatio is none on purpose. The swash stretches to the width of the word rather than keeping a fixed shape, so it stays tied to the type at every size. ============================================================ */ /* The mark and the line are ONE grid child. Added separately they made the grid three items and dropped the line into the left column under the photographs. */ #tuesdays .room5__say{min-width:0} #tuesdays .room5__mark{ position:relative; margin:0 0 clamp(22px,3vw,38px); line-height:1; } #tuesdays .room5__mark span{ font-family:var(--display); font-weight:400; font-size:clamp(38px,5.2vw,64px); letter-spacing:-.026em; color:var(--ink); display:inline-block; } #tuesdays .room5__swash{ display:block; width:min(100%,232px); height:clamp(16px,2vw,26px); margin-top:-2px; overflow:visible; } #tuesdays .room5__swash path{ fill:none; stroke:var(--ember); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; /* drawn on reveal, left to right, like it is being written */ stroke-dasharray:420; stroke-dashoffset:420; transition:stroke-dashoffset 1.15s cubic-bezier(.4,0,.2,1) .25s; } #tuesdays .room5__mark.in .room5__swash path{stroke-dashoffset:0} /* Stacked layout puts the type under the prints, where the space is tighter and a large mark would crowd the line under it. */ @media (max-width:719px){ #tuesdays .room5__mark{margin-bottom:clamp(16px,4vw,24px)} #tuesdays .room5__swash{width:min(100%,220px)} } @media (prefers-reduced-motion:reduce){ #tuesdays .room5__swash path{transition:none; stroke-dashoffset:0} } /* ============================================================ THE MARK, LIFTED AND MOVED OVER THE SECOND PRINT 2026-08-21 In flow it sat in the type column, which put it to the right of both photographs with the line underneath. Lifted out of flow so it rides over the sender's print and sits high against the armchair one. Positioned in percentages of the grid box, not pixels, so it tracks the photographs when they resize instead of drifting off them. It clears the sender's face, which sits at 68 percent across her frame and a third of the way down: the mark bottoms out well above that, and the check script asserts it. Absolute only once the layout is two columns. Stacked, the mark stays in flow above the line where there is room for it. ============================================================ */ @media (min-width:720px){ #tuesdays .room5__in{position:relative} #tuesdays .room5__mark{ position:absolute; z-index:3; /* 36% put the swash across the top corner of the sender's print. The mark has to bottom out ABOVE that print's top edge, not merely sit higher than it did. 20.5% keeps a gap at every width the two column layout is live; 24% measured 0px at 1100, and the check script asserts the gap rather than trusting the number. */ /* 20.5% was calibrated against her print at 64%. Narrowing her to 56% to stop her burying his print made the whole stack shorter, so his print - which is anchored to the bottom - ROSE, and rose straight into the mark. Raised to clear it. Two numbers that depend on each other: change either width and check this again. */ left:47%; top:11.5%; transform:translateY(-50%); margin:0; width:auto; } /* the line keeps the column to itself now the mark has left it */ #tuesdays .room5__say{display:flex; align-items:center; min-height:100%} }