/* Return 01 · desktop candidate 04 · complete chapter. Candidate 03 plus one consolidated reading-flow pass: the three remaining text-to-text staircases — beneath "Surfing.", beneath "Four thousand weeks. Approximately one human life." and the balance → rhythm passage — now proceed down one left-aligned reading track, paragraph breaks kept. The joined morning passage beneath "Surfing does.", both painting pairings, the opening, the cycle and the closing are Candidate 03, unchanged. Loaded after essay.css by return/index.html. Every desktop rule is scoped to #return and gated at 1100px. No JavaScript, no motion, no sticky, no text on art, no new type sizes. Rules: two text columns, each capped at the source measure (40rem). The opening painting takes the width the viewport allows, never past its native 1712px; where it is wider than the text the text sits centred inside it. Sequential prose follows one reading track (30em); lines that open a passage span the block; anchors sit inside the same track. Each square painting takes the column its passage leaves free, level with the paragraph it belongs to, at the system's 36rem square cap; orange left, rose right. */ /* The wrapper beneath "Surfing does." exists at every width. Below 1100px it is an ordinary block, so the two paragraphs render exactly as before — except that reading.css's `.piece p:last-child{margin-bottom:0}` now matches the second paragraph (it is the last child of the wrapper). This restores its source margin. */ #return .run > p:last-child{margin-bottom:.9em} @media (min-width:1100px){ #return{ --colgap:clamp(2.5rem, 3.2vw, 4.5rem); --col:40rem; --sq:36rem; --run:30em; /* the one wider paragraph beneath "Surfing does.": 73–78 characters a line at 24px */ --pass:clamp(3rem, 4.5vw, 4.5rem); --text-w:min(100%, calc(100vh * 1.4861), calc(2 * var(--col) + var(--colgap))); --text-w:min(100%, calc(100svh * 1.4861), calc(2 * var(--col) + var(--colgap))); --art-w:min(100%, calc(100vh * 1.4861), 1712px); --art-w:min(100%, calc(100svh * 1.4861), 1712px); max-width:none; padding-inline:var(--gutter); margin-inline:auto; } #return > *{max-width:none; width:var(--text-w); margin-inline:auto} /* ---- opening: four tracks; label, title and lead in the two text tracks; painting spans all ---- */ #return .opening{ display:grid; width:var(--art-w); max-width:none; margin-top:clamp(2rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr) minmax(0, calc(var(--col) + var(--colgap) / 2)) minmax(0, calc(var(--col) + var(--colgap) / 2)) minmax(0,1fr); column-gap:0; row-gap:0; align-items:start; } #return .opening > :not(.art){max-width:none; margin-inline:0} #return .opening .label{grid-column:2 / 4} #return .opening h1{grid-column:2; padding-right:calc(var(--colgap) / 2); margin-bottom:0} #return .opening .lead{grid-column:3; padding-left:calc(var(--colgap) / 2); align-self:end; margin:0 0 .25em} #return .opening .art{grid-column:1 / -1; margin:2.25rem 0 0; width:100%; max-width:none} #return .art img{width:100%; height:auto; max-width:none} /* ---- passages: the staircase ---- */ #return .passage{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--colgap); row-gap:0; align-items:start; margin-block:var(--pass); } #return .passage > :where(.beat,.memory,.questions,.cycle){grid-column:1 / -1} #return .passage > .beat{margin-top:0} #return .passage > .memory{margin-top:0; max-width:none} #return .passage > .cycle{margin-top:0} #return .passage > .quiet{margin-top:1.1em} #return .passage > .quiet + .quiet{margin-top:0} #return .passage > .anchor{margin-top:0} #return .passage > .quiet + .anchor{margin-top:.5em} #return .passage > p:not(:where(.beat,.memory,.questions,.cycle)):not(p:not(:where(.beat,.memory,.questions,.cycle)) + p:not(:where(.beat,.memory,.questions,.cycle))){grid-column:1; grid-row:span 12} #return .passage > p:not(:where(.beat,.memory,.questions,.cycle)) + p:not(:where(.beat,.memory,.questions,.cycle)) + p:not(:where(.beat,.memory,.questions,.cycle)){grid-column:2} /* ---- one reading track for the three sequential-prose passages (candidate 04) ---- Passage 1 ("Surfing."), passage 2 ("Four thousand weeks…") and passage 5 (balance → rhythm): every line stacks in source order at the block's left edge. Prose and the quiet lines take the 30em track; the memory lines keep spanning; the anchors sit inside the same track. These rules replace the staircase for these three passages only (sections 2, 3 and 6 of the article). */ #return .passage:nth-of-type(2) > p, #return .passage:nth-of-type(3) > p, #return .passage:nth-of-type(6) > p{grid-column:1 / -1; grid-row:auto} #return .passage:nth-of-type(2) > p:not(:where(.beat,.memory,.anchor,.cycle)), #return .passage:nth-of-type(3) > p:not(:where(.beat,.memory,.anchor,.cycle)), #return .passage:nth-of-type(6) > p:not(:where(.beat,.memory,.anchor,.cycle)){max-width:var(--run)} #return .passage:nth-of-type(3) > .anchor, #return .passage:nth-of-type(6) > .anchor{max-width:calc(30 * var(--fs))} /* the anchors sit inside the same 720px track: "What deserves one of the / remaining times?" keeps its two-line break instead of orphaning "times?" at 18em */ #return .passage:nth-of-type(6) > .anchor{margin-top:.7em} /* the pause before "It may be rhythm." after a prose paragraph (≈ the system's collapsed 1.1em) */ /* ---- passage 3, "Surfing does." — one wider paragraph, then the orange painting beside the wave ---- 1 beat · 2 .run (the two morning paragraphs as one continuous paragraph) · 3 And occasionally a wave comes. 4 For a brief moment… · 5 Attention narrows… · 6 Then life returns… · 7 the painting. A trailing 1fr row absorbs the painting's extra height so it cannot push the text rows apart. */ #return .passage:nth-of-type(4){grid-template-rows:repeat(6, auto) 1fr} #return .passage:nth-of-type(4) > :nth-child(1){grid-column:1 / -1; grid-row:1} #return .passage:nth-of-type(4) > .run{grid-column:1 / -1; grid-row:2; max-width:var(--run); margin:0 0 .9em; text-wrap:pretty; hyphens:manual} #return .passage:nth-of-type(4) > .run > p{display:inline; margin:0; max-width:none} #return .passage:nth-of-type(4) > .run > p + p::before{content:" "} /* one rendered space between the two source paragraphs; no text is changed */ #return .passage:nth-of-type(4) > :nth-child(3){grid-column:1 / -1; grid-row:3} #return .passage:nth-of-type(4) > :nth-child(4){grid-column:1 / -1; grid-row:4; max-width:none} #return .passage:nth-of-type(4) > :nth-child(5){grid-column:2; grid-row:5; margin-top:1.25rem} #return .passage:nth-of-type(4) > :nth-child(6){grid-column:2; grid-row:6} #return .passage:nth-of-type(4) > .art{grid-column:1; grid-row:5 / 8; width:min(100%, var(--sq)); justify-self:start; margin:1.25rem 0 0; max-width:none} /* ---- passage 4, the sauna — the rose painting beside the questions ---- 1 At the other end… · 2 The ocean clears… · 3 What happened today? · 4 the questions · 5 the painting */ #return .passage:nth-of-type(5){grid-template-columns:minmax(0,1fr) min(var(--sq), 36%); grid-template-rows:repeat(4, auto) 1fr} #return .passage:nth-of-type(5) > :nth-child(1){grid-column:1 / -1; grid-row:1; max-width:none} #return .passage:nth-of-type(5) > :nth-child(2){grid-column:1 / -1; grid-row:2} #return .passage:nth-of-type(5) > :nth-child(3){grid-column:1; grid-row:3} #return .passage:nth-of-type(5) > :nth-child(4){grid-column:1; grid-row:4} #return .passage:nth-of-type(5) > .art{grid-column:2; grid-row:3 / 6; width:100%; justify-self:end; margin:0; max-width:none} /* ---- closing: a full rest around the last two lines ---- */ #return .closing{display:block; margin-top:clamp(6rem, 9vw, 9rem); margin-bottom:clamp(2rem, 4vw, 4rem); padding-bottom:clamp(2rem, 4vw, 4rem)} #return .closing > *{margin-inline:0} } @media (min-width:1420px){ #return .passage:nth-of-type(5){grid-template-columns:minmax(0,1fr) min(var(--sq), 50%)} }